AIMEE CHEVALIER · Design Tokens
Colors, type, and semantic CSS variables.
Load with:
============================================================ */
/* Cormorant Garamond (Google Fonts) — primary serif. Full Spanish support.
Arpona DEMO had broken accents; Cormorant is the elegant fallback that ships.
When licensing the full Arpona family it can swap back in painlessly. */
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("/bundle/d0739418-8c9d-4032-bea3-483c1717cda5.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("/bundle/a24e4fc0-334b-4bbe-8a67-ade8860fccc1.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("/bundle/00845453-28d5-4274-9f7b-3d4e89edc4dd.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("/bundle/29f09b1d-7c7e-462b-8cd1-492648fef46e.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("/bundle/8b28f402-adf0-4470-9dac-2a3df8cb1d37.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/bundle/d0739418-8c9d-4032-bea3-483c1717cda5.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/bundle/a24e4fc0-334b-4bbe-8a67-ade8860fccc1.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/bundle/00845453-28d5-4274-9f7b-3d4e89edc4dd.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/bundle/29f09b1d-7c7e-462b-8cd1-492648fef46e.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/bundle/8b28f402-adf0-4470-9dac-2a3df8cb1d37.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("/bundle/d0739418-8c9d-4032-bea3-483c1717cda5.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("/bundle/a24e4fc0-334b-4bbe-8a67-ade8860fccc1.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("/bundle/00845453-28d5-4274-9f7b-3d4e89edc4dd.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("/bundle/29f09b1d-7c7e-462b-8cd1-492648fef46e.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("/bundle/8b28f402-adf0-4470-9dac-2a3df8cb1d37.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/bundle/7b6d0e76-7dff-40bd-a402-b7a11d0ea505.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/bundle/8a657a13-e892-4fa9-a37c-5c1c93392883.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/bundle/bca09f7f-6e5b-44a5-8c52-4f8723319596.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/bundle/593df143-1dbe-4e09-b5bb-17e689c54071.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/bundle/c5f27ff1-ce22-4279-aaa1-3fbc877b9388.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/bundle/7b6d0e76-7dff-40bd-a402-b7a11d0ea505.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/bundle/8a657a13-e892-4fa9-a37c-5c1c93392883.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/bundle/bca09f7f-6e5b-44a5-8c52-4f8723319596.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/bundle/593df143-1dbe-4e09-b5bb-17e689c54071.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/bundle/c5f27ff1-ce22-4279-aaa1-3fbc877b9388.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/bundle/7b6d0e76-7dff-40bd-a402-b7a11d0ea505.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/bundle/8a657a13-e892-4fa9-a37c-5c1c93392883.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/bundle/bca09f7f-6e5b-44a5-8c52-4f8723319596.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/bundle/593df143-1dbe-4e09-b5bb-17e689c54071.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/bundle/c5f27ff1-ce22-4279-aaa1-3fbc877b9388.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/bundle/7b6d0e76-7dff-40bd-a402-b7a11d0ea505.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/bundle/8a657a13-e892-4fa9-a37c-5c1c93392883.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/bundle/bca09f7f-6e5b-44a5-8c52-4f8723319596.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/bundle/593df143-1dbe-4e09-b5bb-17e689c54071.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/bundle/c5f27ff1-ce22-4279-aaa1-3fbc877b9388.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* -----------------------------------------------------------
1 · Font Faces (real brand fonts — see fonts/)
NOTE: Arpona @font-face declarations are commented out until the
licensed family with full Spanish glyph coverage ships. The local
files are DEMO builds with broken accents — loading them poisons
any fallback render that flashes Arpona before Cormorant resolves.
----------------------------------------------------------- */
/* Arpona — PRODUCTION DISABLED. Re-enable when licensed family arrives.
@font-face {
font-family: "Arpona";
src: url("/bundle/f4381d5c-9cf3-4de9-aac5-05ea38f697bb.png") format("opentype");
font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Arpona";
src: url("/bundle/c04450da-a74a-46a2-8166-1543ee0427f6.png") format("opentype");
font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Arpona";
src: url("/bundle/8c3f6f4e-f57f-45e1-9b10-f4c362f799f5.png") format("opentype");
font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
font-family: "Arpona";
src: url("/bundle/22983353-389c-4d61-a398-04e9f5463da3.png") format("opentype");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Arpona";
src: url("/bundle/5d75c341-56a0-4844-812f-c4d8c1acb117.png") format("opentype");
font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
font-family: "Arpona";
src: url("/bundle/0d119534-804f-4fbf-9f3f-1de7035f6ee7.png") format("opentype");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Arpona";
src: url("/bundle/82bc9c90-88fc-4f95-9521-cf800d79655d.png") format("opentype");
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Arpona";
src: url("/bundle/ff689767-5e36-47df-ac65-513da424d748.png") format("opentype");
font-weight: 700; font-style: normal; font-display: swap;
}
*/
/* Bicyclette — body sans (paragraphs, UI, eyebrows in caps) */
@font-face {
font-family: "Bicyclette";
src: url("/bundle/4a67bf8e-87cb-422a-be90-da320ab183b1.png") format("truetype");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Bicyclette";
src: url("/bundle/4a7b29a9-79b4-4118-8558-6fd38ddd291a.png") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Bicyclette";
src: url("/bundle/425c3688-f35e-417f-8816-b1bf46585871.png") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Bicyclette";
src: url("/bundle/841b8575-5304-42f1-accd-120105bffd7e.png") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Bicyclette";
src: url("/bundle/c1230915-d4e7-43de-9b4e-d19485d1d1c6.png") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Bicyclette";
src: url("/bundle/faf7a24d-540e-40c7-aa3b-53e5f5cf08fe.png") format("truetype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* Floreal — decorative italic accent (sparingly: anchor phrases, ornament) */
@font-face {
font-family: "Floreal";
src: url("/bundle/089c898b-2df5-453b-88a7-74b25b09560a.png") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Floreal";
src: url("/bundle/1b5d1a79-2797-4d29-b759-5fcf10af462f.png") format("opentype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* -----------------------------------------------------------
2 · Color Tokens
----------------------------------------------------------- */
:root {
/* PRIMARY · terracotta family — CTAs, accents, anchors */
--terracotta-primary: #C97B5D;
--terracotta-deep: #BF6E50;
--terracotta-rust: #7C2C20; /* extracted from logo-5 background — the brand's deep rust */
--peach-soft: #E8C5B0;
--peach-whisper: #F4E4D6;
/* GOLD · antique brass family — reserved for dark surfaces.
NOT FFD700 luxury-loud; these are warm, restrained, editorial. */
--gold-champagne: #C9A961; /* primary gold accent */
--gold-soft: #D4BD89; /* lighter, secondary */
--gold-deep: #9B7E3F; /* hover / pressed */
--gold-whisper: rgba(201, 169, 97, 0.18); /* fills, washes */
/* STRUCTURAL · never pure black/white */
--navy-deep: #1F2937; /* primary text */
--navy-darker: #1A2333; /* strong emphasis */
--forest-deep: #023127; /* extracted from logo-7 — THE brand forest (one tone, never two) */
--ink-deep: #14161A; /* dark surfaces — hero, drama */
--ink-rich: #1C1F25; /* dark surface alt */
--cream-base: #FAF7F2; /* main background */
--off-white: #F5F1EA; /* alternating sections / cards */
--cream-warm: #EFE7D8;
/* WhatsApp brand green — used only for the FAB. Brand law: don't tint. */
--whatsapp-green: #25D366;
--whatsapp-green-deep: #1FAE54;
/* ----- Aliases (components.css legacy naming) -----
Keep both naming schemes resolvable: --color-* maps to canonical tokens. */
--color-navy: var(--navy-deep);
--color-cream: var(--cream-base);
--color-terracota: var(--terracotta-primary);
--color-gold: var(--gold-champagne);
--font-body: var(--font-sans);
/* NEUTRALS */
--gray-200: #E8E4DE; /* separator lines, borders */
--gray-500: #6B6258; /* secondary text, captions */
--gray-700: #4A4339; /* tertiary text emphasis */
/* ------- BASE TYPE FAMILIES -------
Cormorant Garamond is primary — full Spanish accent support, loaded from Google Fonts.
Arpona is DELIBERATELY REMOVED from the production stack: the local OTFs are the
DEMO build that lacks Spanish glyphs, and showing them — even as fallback during
load — prints broken accents. When the licensed Arpona ships, drop it back in here.
Floreal stays reserved for ornament. */
--font-serif-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--font-sans: "Bicyclette", "Inter", system-ui, -apple-system, sans-serif;
--font-italic-accent: "Cormorant Garamond", "Floreal", Georgia, serif;
/* ------- SEMANTIC TEXT TOKENS ------- */
--fg-1: var(--navy-deep); /* primary text */
--fg-2: var(--gray-700); /* secondary text */
--fg-3: var(--gray-500); /* captions, meta */
--fg-on-dark: var(--cream-base);
--fg-accent: var(--terracotta-primary);
--bg-page: var(--cream-base);
--bg-alt: var(--off-white);
--bg-block-warm: var(--peach-whisper);
--bg-dark: var(--forest-deep);
--bg-rust: var(--terracotta-rust);
--border-hairline: var(--gray-200);
--border-strong: var(--navy-deep);
/* ------- SPACING — generous rhythm ------- */
--space-section: 144px; /* between major sections, desktop */
--space-section-mobile: 96px;
--space-block: 80px; /* between sub-blocks */
--space-block-mobile: 56px;
--space-element: 32px;
--space-tight: 16px;
--space-hair: 8px;
/* ------- WIDTHS ------- */
--w-text: 640px;
--w-content: 960px;
--w-wide: 1200px;
--w-max: 1440px;
/* ------- PADDING ------- */
--pad-block: 48px;
--pad-block-mobile: 24px;
--pad-page: 32px;
--pad-page-mobile: 20px;
/* ------- RADII — subtle. never pills. ------- */
--radius-sm: 2px;
--radius: 4px; /* default */
--radius-md: 8px;
--radius-photo: 2px; /* near-square corners on imagery */
/* ------- SHADOWS — almost none; used only for floating chrome ------- */
--shadow-fab: 0 4px 12px rgba(31, 41, 55, 0.10);
--shadow-lift: 0 1px 2px rgba(31, 41, 55, 0.04), 0 8px 24px rgba(31, 41, 55, 0.06);
/* ------- MOTION ------- */
--easing: cubic-bezier(0.22, 0.61, 0.36, 1); /* gentle ease-out */
--dur-quick: 160ms;
--dur-base: 240ms;
--dur-slow: 420ms;
}
/* -----------------------------------------------------------
3 · Type Scale (semantic, mobile-first)
----------------------------------------------------------- */
:root {
/* Master scale — clamp-driven, mobile-first. Per master prompt v1.0. */
--text-hero: clamp(56px, 12vw, 240px);
--text-display: clamp(40px, 8vw, 120px);
--text-heading: clamp(32px, 5vw, 80px);
--text-subheading: clamp(24px, 3vw, 48px);
--text-eyebrow: clamp(12px, 1vw, 14px);
--text-body-large: clamp(18px, 2vw, 22px);
--text-body: clamp(16px, 1.5vw, 18px);
--text-small: 14px;
--leading-tight: 1.05;
--leading-display: 1.1;
--leading-body: 1.6;
--tracking-eyebrow: 0.18em;
--tracking-body: -0.01em;
--tracking-display: -0.02em;
/* Legacy scale tokens — kept so existing preview cards continue rendering.
All resolve to the new master clamp scale. */
--t-display-size: var(--text-display);
--t-display-lh: var(--leading-tight);
--t-display-tracking: var(--tracking-display);
--t-display-weight: 300;
--t-h1-size: var(--text-display);
--t-h1-lh: var(--leading-display);
--t-h1-tracking: var(--tracking-display);
--t-h1-weight: 300;
--t-h2-size: var(--text-heading);
--t-h2-lh: var(--leading-display);
--t-h2-tracking: -0.015em;
--t-h2-weight: 400;
--t-h3-size: var(--text-subheading);
--t-h3-lh: 1.25;
--t-h3-weight: 400;
--t-body-lg-size: var(--text-body-large);
--t-body-lg-lh: 1.55;
--t-body-size: var(--text-body);
--t-body-lh: var(--leading-body);
--t-body-sm-size: var(--text-small);
--t-body-sm-lh: 1.5;
--t-eyebrow-size: var(--text-eyebrow);
--t-eyebrow-tracking: var(--tracking-eyebrow);
--t-eyebrow-weight: 500;
--t-caption-size: var(--text-small);
--t-caption-lh: 1.4;
}
/* -----------------------------------------------------------
4 · Base reset + body
----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg-page);
color: var(--fg-1);
font-family: var(--font-sans);
font-size: var(--t-body-size);
line-height: var(--t-body-lh);
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* -----------------------------------------------------------
5 · Semantic Type Classes
----------------------------------------------------------- */
.t-display, h1.is-display {
font-family: var(--font-serif-display);
font-size: var(--t-display-size);
line-height: var(--t-display-lh);
letter-spacing: var(--t-display-tracking);
font-weight: var(--t-display-weight);
margin: 0;
color: var(--fg-1);
text-wrap: balance;
}
.t-h1, h1 {
font-family: var(--font-serif-display);
font-size: var(--t-h1-size);
line-height: var(--t-h1-lh);
letter-spacing: var(--t-h1-tracking);
font-weight: var(--t-h1-weight);
margin: 0;
color: var(--fg-1);
text-wrap: balance;
}
.t-h2, h2 {
font-family: var(--font-serif-display);
font-size: var(--t-h2-size);
line-height: var(--t-h2-lh);
letter-spacing: var(--t-h2-tracking);
font-weight: var(--t-h2-weight);
margin: 0;
color: var(--fg-1);
text-wrap: balance;
}
.t-h3, h3 {
font-family: var(--font-serif-display);
font-size: var(--t-h3-size);
line-height: var(--t-h3-lh);
font-weight: var(--t-h3-weight);
margin: 0;
color: var(--fg-1);
}
.t-body-lg {
font-family: var(--font-sans);
font-size: var(--t-body-lg-size);
line-height: var(--t-body-lg-lh);
color: var(--fg-2);
}
.t-body, p {
font-family: var(--font-sans);
font-size: var(--t-body-size);
line-height: var(--t-body-lh);
color: var(--fg-2);
margin: 0 0 1.2em 0;
text-wrap: pretty;
}
.t-body-sm {
font-family: var(--font-sans);
font-size: var(--t-body-sm-size);
line-height: var(--t-body-sm-lh);
color: var(--fg-2);
}
.t-eyebrow {
font-family: var(--font-sans);
font-size: var(--t-eyebrow-size);
font-weight: var(--t-eyebrow-weight);
letter-spacing: var(--t-eyebrow-tracking);
text-transform: uppercase;
color: var(--fg-accent);
margin: 0 0 var(--space-tight) 0;
display: block;
}
.t-caption {
font-family: var(--font-sans);
font-size: var(--t-caption-size);
line-height: var(--t-caption-lh);
color: var(--fg-3);
}
/* Anchor phrase — italic Arpona, centered, paused. */
.t-anchor {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 24px;
line-height: 1.4;
color: var(--fg-1);
text-align: center;
max-width: 560px;
margin: 64px auto;
font-weight: 400;
text-wrap: balance;
}
/* Floreal — reserved decorative italic. Sparingly. */
.t-floreal {
font-family: var(--font-italic-accent);
font-style: italic;
color: var(--fg-accent);
}
/* Large display number (the 01/02/03 in numbered blocks) */
.t-number {
font-family: var(--font-serif-display);
font-size: 64px;
font-weight: 300;
color: var(--fg-accent);
line-height: 1;
display: block;
}
/* Selection — warm peach instead of default blue */
::selection {
background: var(--peach-soft);
color: var(--navy-deep);
}
/* Focus ring — terracotta */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
outline: 2px solid var(--terracotta-primary);
outline-offset: 2px;
}
/* ============================================================
AIMEE CHEVALIER · Component Styles
Buttons, links, cards, layouts. Pair with colors_and_type.css.
============================================================ */
/* -----------------------------------------------------------
LAYOUT — generous, editorial rhythm
----------------------------------------------------------- */
.ac-page {
padding-inline: var(--pad-page-mobile);
max-width: var(--w-max);
margin-inline: auto;
}
@media (min-width: 768px) {
.ac-page { padding-inline: var(--pad-page); }
}
.ac-text-col { max-width: var(--w-text); margin-inline: auto; }
.ac-content-col{ max-width: var(--w-content); margin-inline: auto; }
.ac-wide-col { max-width: var(--w-wide); margin-inline: auto; }
.ac-section {
padding-block: var(--space-section-mobile);
}
@media (min-width: 768px) {
.ac-section { padding-block: var(--space-section); }
}
.ac-section--warm { background: var(--bg-block-warm); }
.ac-section--alt { background: var(--bg-alt); }
/* Dark sections — navy + gold + silky.
Layered: navy base + silky linear shimmer + warm gold radial spill + grain. */
.ac-section--dark {
background:
linear-gradient(135deg,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(0, 0, 0, 0.10) 70%,
rgba(255, 255, 255, 0.02) 100%),
radial-gradient(ellipse 90% 70% at 78% 18%, rgba(201, 169, 97, 0.10), transparent 60%),
radial-gradient(ellipse 70% 65% at 18% 82%, rgba(201, 169, 97, 0.05), transparent 65%),
var(--navy-darker);
color: var(--fg-on-dark);
position: relative;
overflow: hidden;
}
.ac-section--dark::before {
content: ""; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.55;
mix-blend-mode: screen;
pointer-events: none;
}
.ac-section--dark::after {
/* The silk highlight — a soft elongated sheen */
content: ""; position: absolute;
top: -10%; left: -20%;
width: 70%; height: 120%;
background: linear-gradient(115deg,
transparent 0%,
rgba(255, 255, 255, 0.04) 45%,
rgba(201, 169, 97, 0.05) 50%,
rgba(255, 255, 255, 0.04) 55%,
transparent 100%);
filter: blur(20px);
pointer-events: none;
z-index: 0;
}
.ac-section--dark > * { position: relative; z-index: 1; }
.ac-section--dark h1, .ac-section--dark h2, .ac-section--dark h3 { color: var(--fg-on-dark); }
.ac-section--dark .t-eyebrow { color: var(--gold-champagne); }
.ac-section--dark p { color: rgba(245, 241, 234, 0.86); }
.ac-section--rust { background: var(--bg-rust); color: var(--fg-on-dark); }
.ac-section--rust h1, .ac-section--rust h2, .ac-section--rust h3 { color: var(--fg-on-dark); }
.ac-section--rust p { color: rgba(250, 247, 242, 0.82); }
/* -----------------------------------------------------------
BUTTONS
----------------------------------------------------------- */
.ac-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-body);
font-size: 17px;
font-weight: 500;
letter-spacing: 0.04em;
padding: 20px 40px;
border-radius: 0; /* Master doctrine: rectangular, never SaaS-rounded. */
border: none;
text-decoration: none;
cursor: pointer;
transition: background-color var(--dur-base) var(--easing),
transform var(--dur-base) var(--easing),
color var(--dur-base) var(--easing);
white-space: nowrap;
}
.ac-btn--primary {
background: var(--color-navy);
color: var(--color-cream);
}
.ac-btn--primary:hover { background: var(--color-terracota); transform: translateY(-1px); }
.ac-btn--primary:active { transform: translateY(0); }
.ac-btn--secondary {
background: transparent;
color: var(--color-navy);
border: 1px solid var(--color-navy);
padding: 19px 39px;
}
.ac-btn--secondary:hover { background: var(--color-navy); color: var(--color-cream); }
.ac-btn--on-dark {
background: var(--color-cream);
color: var(--color-navy);
}
.ac-btn--on-dark:hover { background: var(--color-gold); }
.ac-link {
display: inline-block;
background: transparent;
color: var(--color-navy);
font-family: var(--font-body);
font-size: 17px;
font-weight: 500;
text-decoration: none;
padding: 0 0 4px 0;
border-bottom: 1px solid var(--color-navy);
transition: color var(--dur-base) var(--easing), border-color var(--dur-base) var(--easing);
}
.ac-link:hover { color: var(--color-terracota); border-bottom-color: var(--color-terracota); }
.ac-link--on-dark { color: var(--color-cream); border-bottom-color: var(--color-gold); }
.ac-link--on-dark:hover { color: var(--color-gold); border-bottom-color: var(--color-gold); }
/* -----------------------------------------------------------
CARDS · TESTIMONIAL · CREDENTIAL · NUMBERED BLOCK
----------------------------------------------------------- */
.ac-card {
background: var(--bg-alt);
padding: var(--pad-block);
border-radius: var(--radius);
}
.ac-testimonial {
background: var(--bg-alt);
padding: 40px;
border-radius: var(--radius);
max-width: 380px;
}
.ac-testimonial__quote {
font-family: var(--font-serif-display);
font-size: 19px;
line-height: 1.5;
font-style: italic;
color: var(--navy-deep);
margin: 0 0 24px 0;
}
.ac-testimonial__author { font-family: var(--font-sans); }
.ac-testimonial__author strong {
display: block; font-size: 15px; font-weight: 600; color: var(--navy-deep);
}
.ac-testimonial__author span {
font-size: 14px; color: var(--gray-500);
}
.ac-credential {
padding: 20px 0;
border-bottom: 1px solid var(--border-hairline);
}
.ac-credential__title {
font-family: var(--font-sans);
font-size: 17px;
font-weight: 500;
color: var(--navy-deep);
margin: 0 0 4px 0;
}
.ac-credential__detail {
font-family: var(--font-sans);
font-size: 15px;
color: var(--gray-500);
margin: 0;
}
.ac-numbered {
max-width: var(--w-text);
padding-block: var(--space-element);
}
.ac-numbered__num {
font-family: var(--font-serif-display);
font-size: 64px;
font-weight: 300;
color: var(--terracotta-primary);
line-height: 1;
display: block;
margin-bottom: 24px;
}
.ac-numbered__title {
font-family: var(--font-serif-display);
font-size: 28px;
font-weight: 400;
color: var(--navy-deep);
margin: 0 0 12px 0;
}
.ac-numbered__body {
font-family: var(--font-sans);
font-size: 18px;
line-height: 1.65;
color: var(--gray-700);
max-width: 560px;
margin: 0;
}
/* -----------------------------------------------------------
FORM INPUT (newsletter, simple text inputs)
----------------------------------------------------------- */
.ac-input {
display: block;
width: 100%;
background: var(--cream-base);
color: var(--navy-deep);
font-family: var(--font-sans);
font-size: 16px;
padding: 16px 18px;
border: 1px solid var(--gray-200);
border-radius: var(--radius);
transition: border-color var(--dur-base) var(--easing);
}
.ac-input::placeholder { color: var(--gray-500); }
.ac-input:focus { border-color: var(--terracotta-primary); outline: none; }
/* -----------------------------------------------------------
WHATSAPP FAB
----------------------------------------------------------- */
.ac-fab {
position: fixed;
bottom: 24px; right: 24px;
width: 56px; height: 56px;
background: var(--whatsapp-green);
color: #FFFFFF;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none;
box-shadow: 0 4px 14px rgba(37, 211, 102, 0.32), 0 2px 4px rgba(0, 0, 0, 0.08);
z-index: 100;
transition: transform var(--dur-base) var(--easing), background-color var(--dur-base) var(--easing);
}
.ac-fab:hover { transform: translateY(-2px); background: var(--whatsapp-green-deep); }
.ac-fab svg { width: 30px; height: 30px; }
/* -----------------------------------------------------------
HAIRLINE SEPARATOR
----------------------------------------------------------- */
.ac-rule {
border: 0;
border-top: 1px solid var(--border-hairline);
margin: 0;
}
/* ============================================================
Aimee Chevalier · website UI kit — page styles
Pair with: ../../colors_and_type.css + ../../components.css
============================================================ */
html, body { min-height: 100%; }
body { background: var(--bg-page); color: var(--fg-1); }
/* ---------- NAV ---------- */
.ac-nav {
position: sticky; top: 0; z-index: 50;
background: rgba(250, 247, 242, 0.92);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--border-hairline);
}
.ac-nav__inner {
max-width: var(--w-max);
margin-inline: auto;
padding: 18px var(--pad-page-mobile);
display: flex; align-items: center; justify-content: space-between;
}
@media (min-width: 768px) {
.ac-nav__inner { padding-inline: var(--pad-page); }
}
.ac-nav__menu { display: none; gap: 32px; align-items: center; }
@media (min-width: 768px) {
.ac-nav__menu { display: flex; }
}
.ac-nav__link {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 400;
letter-spacing: 0.005em;
color: var(--navy-deep);
text-decoration: none;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: border-color var(--dur-base) var(--easing), color var(--dur-base) var(--easing);
}
.ac-nav__link:hover { border-bottom-color: var(--terracotta-primary); }
.ac-nav__link.is-active { color: var(--terracotta-primary); }
.ac-nav__link.is-cta {
color: var(--terracotta-primary);
border-bottom-color: var(--terracotta-primary);
}
.ac-nav__lang {
background: transparent; border: 0; cursor: pointer;
font-family: var(--font-sans); font-size: 13px; color: var(--gray-500);
padding: 4px 6px;
letter-spacing: 0.02em;
}
.ac-nav__lang .is-on { color: var(--navy-deep); font-weight: 500; }
.ac-nav__lang-sep { margin: 0 6px; color: var(--gray-200); }
.ac-nav__burger {
display: flex; flex-direction: column; gap: 4px;
background: transparent; border: 0; cursor: pointer;
padding: 8px;
}
.ac-nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--navy-deep); }
@media (min-width: 768px) { .ac-nav__burger { display: none; } }
.ac-nav__mobile {
display: flex; flex-direction: column; gap: 8px;
padding: 16px var(--pad-page-mobile) 24px;
border-top: 1px solid var(--border-hairline);
}
.ac-nav__mobile-link {
font-family: var(--font-sans);
font-size: 17px;
color: var(--navy-deep);
text-decoration: none;
padding: 12px 0;
border-bottom: 1px solid var(--border-hairline);
}
/* ---------- HERO · full-bleed photo background ---------- */
.ac-hero {
position: relative;
overflow: hidden;
isolation: isolate;
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--ink-deep);
}
/* The photo as full-bleed background. Faded version has dark left-side fade baked in. */
.ac-hero__bleed { position: absolute; inset: 0; z-index: 0; }
.ac-hero__bleed-photo {
position: absolute; inset: 0;
background-image: url("/bundle/03cd372a-0500-42ba-a5e1-c27de3c40a75.png");
background-size: cover;
background-position: 30% center;
}
/* MAGAZINE-COVER LAYOUT: text on the LEFT, Aimee on the right.
Type sits over the baked-in dark fade. Photo extends behind the type. */
.ac-hero__copy--magazine {
position: relative;
z-index: 2;
flex: 1 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
padding: clamp(48px, 8vh, 96px) clamp(20px, 5vw, 96px);
max-width: 1440px;
width: 100%;
margin-inline: auto;
}
@media (min-width: 768px) {
.ac-hero__copy--magazine {
/* Push the right side further so the text gets MORE dark room on the left;
the right ~38% holds Aimee on the photo. */
padding-right: clamp(160px, 56vw, 820px);
}
}
/* On very small screens, fall back to centered layout for legibility. */
@media (max-width: 600px) {
.ac-hero__copy--magazine {
align-items: center;
text-align: center;
padding-right: clamp(20px, 5vw, 96px);
background: linear-gradient(180deg, rgba(14,18,24,0.55), rgba(14,18,24,0.25) 60%, transparent);
}
}
.ac-hero__eyebrow--gold {
color: var(--gold-champagne) !important;
margin-bottom: 28px;
display: block;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.ac-hero__h1--magazine {
font-family: var(--font-serif-display);
font-weight: 300;
color: var(--cream-base);
margin: 0;
text-wrap: balance;
font-size: clamp(42px, 6.4vw, 88px);
line-height: 1.05;
letter-spacing: -0.022em;
max-width: 14ch;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ac-hero__h1-accent--gold {
font-style: italic;
font-weight: 400;
color: var(--gold-champagne);
letter-spacing: -0.005em;
padding-inline: 0.04em;
}
.ac-hero__sub--magazine {
font-family: var(--font-sans);
font-weight: 400;
color: rgba(245, 241, 234, 0.94);
max-width: 520px;
margin: 32px 0 0;
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.55;
text-wrap: pretty;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.ac-hero__cta--left {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 40px;
gap: 28px;
}
@media (max-width: 600px) {
.ac-hero__cta--left { justify-content: center; }
}
/* Masthead bar — on the photo, cream text */
.ac-hero__mast {
display: flex; align-items: center; gap: 18px;
max-width: var(--w-max);
margin: 0 auto;
padding: 28px var(--pad-page-mobile) 0;
width: 100%;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gray-500);
position: relative;
z-index: 3;
}
@media (min-width: 768px) { .ac-hero__mast { padding: 32px var(--pad-page) 0; font-size: 12px; } }
.ac-hero__mast-rule { flex: 1; height: 1px; background: var(--gray-200); }
.ac-hero__mast--on-photo { color: rgba(245, 241, 234, 0.72); }
.ac-hero__mast--on-photo .ac-hero__mast-rule { background: rgba(245, 241, 234, 0.28); }
/* Credential marquee — band over photo, cream type on dark wash */
.ac-hero__marquee {
position: relative;
width: 100%;
margin-top: auto;
border-top: 1px solid rgba(245, 241, 234, 0.18);
border-bottom: 1px solid rgba(245, 241, 234, 0.18);
overflow: hidden;
padding: 20px 0;
z-index: 2;
}
.ac-hero__marquee--on-photo {
background: linear-gradient(180deg, rgba(20, 22, 26, 0.30), rgba(20, 22, 26, 0.55));
backdrop-filter: blur(4px);
}
.ac-hero__marquee::before,
.ac-hero__marquee::after {
content: "";
position: absolute; top: 0; bottom: 0; width: 80px;
z-index: 2;
pointer-events: none;
}
.ac-hero__marquee--on-photo::before { left: 0; background: linear-gradient(90deg, rgba(20,22,26,0.85), transparent); }
.ac-hero__marquee--on-photo::after { right: 0; background: linear-gradient(270deg, rgba(20,22,26,0.85), transparent); }
.ac-hero__marquee-track {
display: flex;
gap: 56px;
width: max-content;
animation: ac-marquee 56s linear infinite;
white-space: nowrap;
}
.ac-hero__marquee--on-photo .ac-hero__marquee-item {
color: rgba(245, 241, 234, 0.85);
}
.ac-hero__marquee-item {
display: inline-flex; align-items: center; gap: 18px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gray-700);
}
.ac-hero__marquee-dot { color: var(--gold-champagne); font-size: 14px; }
@keyframes ac-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .ac-hero__marquee-track { animation: none; } }
/* Variant B · Quiet Authority */
.ac-hero--quiet { background: var(--cream-base); min-height: 90vh; }
.ac-hero--quiet .ac-hero__copy--centered { padding-block: clamp(96px, 18vh, 200px); display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1080px; margin-inline: auto; }
.ac-hero__mark { color: var(--terracotta-primary); margin-bottom: 56px; opacity: 0.85; }
.ac-hero__h1--quiet { font-size: clamp(56px, 9.5vw, 144px); letter-spacing: -0.03em; max-width: 12ch; font-family: var(--font-serif-display); font-weight: 300; color: var(--navy-deep); }
.ac-hero__sub--quiet { font-family: var(--font-serif-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.8vw, 26px); color: var(--navy-deep); max-width: 500px; margin-top: 40px; }
.ac-link.ac-link--lg { font-family: var(--font-sans); font-size: 18px; font-weight: 500; padding-bottom: 4px; margin-top: 64px; }
.ac-hero__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 80px; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-500); max-width: 720px; }
.ac-hero__meta-sep { color: var(--terracotta-primary); }
/* Variant C · Recognition Quote (kept for tweaks) */
.ac-hero__quote { margin: 0; position: relative; max-width: 18ch; }
.ac-hero__quote-mark { position: absolute; top: -0.35em; left: -0.55em; font-family: var(--font-serif-display); font-style: italic; font-weight: 300; font-size: clamp(80px, 12vw, 180px); color: var(--terracotta-primary); opacity: 0.35; line-height: 1; pointer-events: none; }
.ac-hero__quote-text { font-family: var(--font-serif-display); font-style: italic; font-weight: 300; font-size: clamp(34px, 5.2vw, 72px); line-height: 1.15; letter-spacing: -0.015em; color: var(--navy-deep); margin: 0; text-wrap: balance; position: relative; z-index: 1; }
.ac-hero__response { font-family: var(--font-sans); font-weight: 400; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--gray-700); max-width: 540px; margin: 0 auto; text-wrap: pretty; }
/* ---------- PAIN ---------- */
.ac-pain__paras { margin-top: 24px; }
.ac-pain__p {
font-family: var(--font-sans);
font-size: var(--t-body-lg-size);
line-height: 1.6;
color: var(--gray-700);
margin: 32px 0;
text-wrap: pretty;
}
.ac-pain__p.is-lede {
font-family: var(--font-serif-display);
font-size: 28px;
font-style: italic;
font-weight: 400;
color: var(--navy-deep);
line-height: 1.35;
margin-top: 8px;
}
@media (min-width: 768px) {
.ac-pain__p.is-lede { font-size: 36px; }
}
/* The doble triple-acción — italic Cormorant, centered, paused. */
.ac-pain__triple {
margin: 56px auto 0;
text-align: center;
max-width: 720px;
}
.ac-pain__triple-line {
font-family: var(--font-serif-display);
font-style: italic;
font-weight: 400;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.35;
color: var(--navy-deep);
margin: 28px 0;
text-wrap: balance;
}
.ac-pain__triple-line--gold {
color: var(--gold-deep);
}
/* ---------- METHOD ---------- */
.ac-method__paras { margin-top: 32px; }
.ac-method__p {
font-family: var(--font-sans);
font-size: var(--t-body-lg-size);
line-height: 1.65;
color: var(--gray-700);
margin: 0 0 24px;
text-wrap: pretty;
}
/* ---------- BIO ---------- */
.ac-bio {
display: grid; gap: 40px;
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 768px) {
.ac-bio { grid-template-columns: 0.85fr 1.15fr; gap: 64px; }
}
.ac-bio__photo {
width: 100%; aspect-ratio: 1 / 1;
background-position: center; background-size: cover;
border-radius: var(--radius-photo);
}
@media (min-width: 768px) {
.ac-bio__photo { aspect-ratio: 4 / 5; max-height: 520px; }
}
.ac-bio__copy { max-width: 560px; }
.ac-bio__p {
font-family: var(--font-sans);
font-size: var(--t-body-size);
line-height: 1.65;
color: var(--gray-700);
margin: 24px 0;
}
.ac-bio__copy .t-h2 { margin-bottom: 8px; }
/* ---------- CREDENTIALS ---------- */
.ac-cred {
margin-top: 32px;
display: grid; gap: 40px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.ac-cred { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.ac-cred__col-title { color: var(--terracotta-primary); margin: 0 0 4px; }
/* ---------- MOVEMENTS — terracota dark mode ---------- */
.ac-section--movements {
background: var(--color-terracota);
color: var(--color-cream);
position: relative;
overflow: hidden;
}
.ac-section--movements::before {
/* subtle grain so the terracota doesn't read flat */
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.45;
mix-blend-mode: screen;
pointer-events: none;
}
.ac-section--movements::after {
/* silky diagonal sheen — matches the navy dark mode */
content: "";
position: absolute;
top: -10%; left: -25%;
width: 70%; height: 120%;
background: linear-gradient(115deg,
transparent 0%,
rgba(255, 248, 237, 0.03) 45%,
rgba(217, 198, 139, 0.05) 50%,
rgba(255, 248, 237, 0.03) 55%,
transparent 100%);
filter: blur(24px);
pointer-events: none;
}
.ac-section--movements > * { position: relative; z-index: 1; }
.ac-section--movements .t-eyebrow { color: var(--color-gold); }
.ac-section--movements h2 { color: var(--color-cream); }
.ac-section--movements .ac-method__p { color: rgba(255, 248, 237, 0.88); }
.ac-section--movements .ac-numbered__num { color: var(--color-gold); }
.ac-section--movements .ac-numbered__title { color: var(--color-cream); }
.ac-section--movements .ac-numbered__body { color: rgba(255, 248, 237, 0.85); }
.ac-section--movements .ac-btn--primary {
background: var(--color-cream);
color: var(--color-terracota);
}
.ac-section--movements .ac-btn--primary:hover {
background: var(--color-gold);
color: var(--color-terracota);
}
/* Existing grid */
.ac-movements {
display: grid;
gap: 64px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.ac-movements { grid-template-columns: 1fr 1fr; gap: 80px 64px; }
}
/* ---------- NEWSLETTER ---------- */
.ac-newsletter { padding-block: 0; }
.ac-newsletter__body {
font-family: var(--font-sans);
font-size: var(--t-body-size);
line-height: 1.65;
color: var(--gray-700);
margin: 24px auto 32px;
max-width: 540px;
}
.ac-newsletter__form {
display: flex; gap: 12px; max-width: 540px; margin-inline: auto;
flex-wrap: wrap;
}
.ac-newsletter__form .ac-input { flex: 1 1 240px; }
.ac-newsletter__caption { margin-top: 16px; color: var(--gray-500); }
.ac-newsletter__done {
font-family: var(--font-serif-display); font-style: italic;
color: var(--terracotta-primary);
font-size: 19px;
margin: 32px 0;
}
/* ---------- CLOSING ---------- */
.ac-closing { max-width: 720px; margin-inline: auto; text-align: center; padding-inline: 8px; }
.ac-closing__line {
font-family: var(--font-serif-display);
font-weight: 300;
font-size: 32px;
line-height: 1.3;
color: var(--navy-deep);
margin: 56px 0;
text-wrap: balance;
}
@media (min-width: 768px) {
.ac-closing__line { font-size: 44px; margin: 72px 0; }
}
.ac-closing__anchor { margin: 64px auto; }
.t-anchor.t-anchor--lg {
font-size: 28px; color: var(--terracotta-primary);
font-style: italic;
}
@media (min-width: 768px) {
.t-anchor.t-anchor--lg { font-size: 34px; }
}
.ac-closing__cta { margin-top: 56px; }
.ac-closing__sig {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 20px;
color: var(--navy-deep);
margin-top: 56px;
}
/* ---------- AGENDA ---------- */
.ac-agenda__sub {
font-family: var(--font-sans);
font-size: var(--t-body-lg-size);
line-height: 1.55;
color: var(--gray-700);
margin: 24px 0 0;
max-width: 640px;
}
.ac-block {
padding: 32px;
border-radius: var(--radius);
margin-bottom: 32px;
}
@media (min-width: 768px) { .ac-block { padding: 48px; } }
.ac-block--warm { background: var(--terracotta-rust); }
.ac-block--warm .t-eyebrow { color: var(--peach-soft); }
.ac-block--warm .ac-block__banner { color: var(--cream-base); }
.ac-block--warm .ac-block__body { color: rgba(245, 241, 234, 0.82); }
.ac-block--warm .ac-btn--primary {
background: var(--cream-base);
color: var(--terracotta-rust);
border-color: var(--cream-base);
}
.ac-block--soft { background: var(--off-white); }
.ac-block__banner {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 22px;
line-height: 1.4;
color: var(--navy-deep);
margin: 16px 0 24px;
max-width: 640px;
text-wrap: balance;
}
.ac-block__body {
font-family: var(--font-sans);
font-size: var(--t-body-size);
line-height: 1.65;
color: var(--gray-700);
margin: 0 0 24px;
max-width: 640px;
}
.ac-step { margin: 32px 0; }
.ac-step__label {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--gray-500);
letter-spacing: 0.02em;
margin-bottom: 12px;
}
.ac-tiles {
display: grid; gap: 12px;
grid-template-columns: 1fr 1fr;
margin: 12px 0 24px;
}
.ac-tiles.is-disabled { opacity: 0.5; pointer-events: none; }
.ac-tile {
text-align: left;
background: var(--cream-base);
border: 1px solid var(--border-hairline);
border-radius: var(--radius);
padding: 20px 22px;
cursor: pointer;
font-family: var(--font-sans);
min-height: 64px;
transition: border-color var(--dur-base) var(--easing), background-color var(--dur-base) var(--easing);
}
.ac-tile:hover { border-color: var(--terracotta-primary); }
.ac-tile.is-selected {
border-color: var(--terracotta-primary);
background: var(--peach-whisper);
border-width: 1.5px;
padding: 19.5px 21.5px;
}
.ac-tile__title {
font-family: var(--font-serif-display);
font-size: 20px;
color: var(--navy-deep);
margin: 0;
}
.ac-tile__sub {
font-size: 13px;
color: var(--gray-500);
margin-top: 4px;
}
.ac-tile__mark {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--terracotta-primary);
font-weight: 500;
margin-top: 14px;
}
.ac-btn[disabled] { opacity: 0.5; pointer-events: none; }
/* Calendly placeholder */
.ac-calendly {
margin: 56px 0 32px;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-hairline);
background: var(--off-white);
}
.ac-calendly__chrome {
display: flex; align-items: center; gap: 14px;
padding: 10px 14px;
background: var(--cream-warm);
border-bottom: 1px solid var(--border-hairline);
}
.ac-calendly__chrome-bar { display: flex; gap: 6px; }
.ac-calendly__chrome-bar span {
width: 10px; height: 10px; border-radius: 50%; background: var(--border-hairline);
}
.ac-calendly__chrome-url {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px; color: var(--gray-500);
}
.ac-calendly__body { padding: 80px 32px; }
.ac-calendly__placeholder {
border: 1px dashed var(--gray-200);
border-radius: var(--radius);
padding: 56px 32px;
text-align: center;
font-family: var(--font-sans);
color: var(--gray-500);
line-height: 1.55;
}
/* practical info rows */
.ac-info { margin-top: 64px; }
.ac-info__row {
padding: 32px 0;
border-top: 1px solid var(--border-hairline);
}
.ac-info__row:last-child { border-bottom: 1px solid var(--border-hairline); }
.ac-info__title {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--terracotta-primary);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 12px;
}
.ac-info__body {
font-family: var(--font-sans);
font-size: var(--t-body-size);
line-height: 1.65;
color: var(--gray-700);
margin: 0 0 20px;
max-width: 640px;
}
/* ---------- FAQ ---------- */
.ac-faq { border-top: 1px solid var(--border-hairline); }
.ac-faq__item { border-bottom: 1px solid var(--border-hairline); }
.ac-faq__q {
width: 100%;
background: transparent;
border: 0;
text-align: left;
padding: 28px 0;
display: flex; align-items: flex-start; justify-content: space-between;
gap: 24px;
cursor: pointer;
font-family: var(--font-serif-display);
font-size: 22px;
font-weight: 400;
line-height: 1.3;
color: var(--navy-deep);
transition: color var(--dur-base) var(--easing);
}
.ac-faq__q:hover { color: var(--terracotta-deep); }
.ac-faq__q-text { flex: 1; text-wrap: balance; }
.ac-faq__sign {
font-family: var(--font-sans);
font-size: 24px;
font-weight: 300;
color: var(--terracotta-primary);
line-height: 1.3;
}
.ac-faq__a { padding: 0 0 32px; max-width: 640px; }
.ac-faq__a p {
font-family: var(--font-sans);
font-size: var(--t-body-size);
line-height: 1.7;
color: var(--gray-700);
margin: 0 0 16px;
}
/* ---------- FOOTER ---------- */
.ac-footer { background: var(--off-white); margin-top: var(--space-section-mobile); }
@media (min-width: 768px) { .ac-footer { margin-top: 0; } }
.ac-footer__inner {
display: grid; gap: 32px;
grid-template-columns: 1fr;
padding-block: 64px;
}
@media (min-width: 768px) {
.ac-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; gap: 56px; padding-block: 96px; }
}
.ac-footer__about {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.65;
color: var(--gray-500);
margin: 24px 0 0;
max-width: 360px;
}
.ac-footer__eyebrow { color: var(--gray-500); margin-bottom: 18px; }
.ac-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ac-footer li a {
font-family: var(--font-sans);
font-size: 15px;
color: var(--navy-deep);
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: border-color var(--dur-base) var(--easing);
}
.ac-footer li a:hover { border-bottom-color: var(--terracotta-primary); }
.ac-footer__copyright {
border-top: 1px solid var(--border-hairline);
padding-block: 24px;
}
.ac-footer__copyright .ac-page {
font-family: var(--font-sans);
font-size: 13px;
color: var(--gray-500);
}
/* ============================================================
/trabajaconmigo · landing styles
Convención: prefijo .tcm-*
Paleta: terracota (--terracotta-primary) para CTAs · navy acentos · cream base
============================================================ */
/* ---------- Botones específicos del landing ---------- */
.tcm-btn--rust {
background: var(--terracotta-primary);
color: var(--cream-base);
}
.tcm-btn--rust:hover {
background: var(--terracotta-deep);
color: var(--cream-base);
transform: translateY(-1px);
}
.tcm-btn--gold {
background: var(--gold-champagne);
color: var(--navy-deep);
}
.tcm-btn--gold:hover {
background: var(--gold-deep);
color: var(--cream-base);
}
.tcm-btn--lg {
font-size: 18px;
padding: 24px 56px;
letter-spacing: 0.06em;
}
/* ============================================================
SECCIÓN 1 · HERO
============================================================ */
.tcm-hero {
position: relative;
background: var(--cream-base);
border-bottom: 1px solid var(--border-hairline);
display: grid;
grid-template-columns: 1fr;
min-height: 88vh;
}
@media (min-width: 900px) {
.tcm-hero {
grid-template-columns: 1.25fr 1fr;
min-height: 92vh;
}
}
.tcm-hero__copy {
padding: clamp(64px, 9vh, 120px) clamp(20px, 5vw, 96px) clamp(48px, 7vh, 80px);
max-width: 720px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.tcm-hero__eyebrow {
color: var(--terracotta-primary);
margin-bottom: 32px;
letter-spacing: 0.2em;
}
.tcm-hero__h1 {
font-family: var(--font-serif-display);
font-weight: 500;
font-size: clamp(44px, 5.6vw, 84px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--navy-deep);
margin: 0;
text-wrap: balance;
max-width: 14ch;
}
.tcm-hero__h1-accent {
font-style: italic;
font-weight: 500;
color: var(--terracotta-primary);
}
.tcm-hero__sub {
font-family: var(--font-sans);
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.5;
font-weight: 500;
color: var(--navy-deep);
margin: 28px 0 0;
max-width: 560px;
text-wrap: pretty;
}
.tcm-hero__positioning {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.55;
color: var(--gray-700);
margin: 24px 0 0;
max-width: 540px;
}
.tcm-hero__positioning em {
font-family: var(--font-serif-display);
font-style: italic;
color: var(--gold-deep);
}
.tcm-hero__cta-wrap {
margin-top: 40px;
}
.tcm-hero__mini {
font-family: var(--font-sans);
font-size: 12.5px;
line-height: 1.55;
color: var(--gray-500);
margin: 20px 0 0;
max-width: 520px;
letter-spacing: 0.01em;
}
.tcm-hero__photo {
background-size: cover;
background-position: 50% 25%;
min-height: 56vh;
}
@media (min-width: 900px) {
.tcm-hero__photo {
min-height: 100%;
background-position: 50% 30%;
}
}
/* ============================================================
SECCIÓN 2 · TESTIMONIO INMEDIATO (Alejandra)
============================================================ */
.tcm-testimonial1 {
background: var(--navy-deep);
padding: clamp(64px, 10vh, 120px) var(--pad-page-mobile);
border-top: 2px solid var(--gold-champagne);
}
@media (min-width: 768px) {
.tcm-testimonial1 { padding-inline: var(--pad-page); }
}
.tcm-testimonial1__inner {
max-width: 880px;
margin-inline: auto;
text-align: center;
}
.tcm-testimonial1__headline {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(22px, 2.6vw, 34px);
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--cream-base);
margin: 0;
text-wrap: balance;
}
.tcm-testimonial1__body {
font-family: var(--font-serif-display);
font-style: italic;
font-size: clamp(18px, 1.7vw, 22px);
line-height: 1.55;
color: rgba(245, 241, 234, 0.82);
margin: 32px auto 0;
max-width: 720px;
text-wrap: pretty;
}
.tcm-testimonial1__author {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold-champagne);
margin: 40px 0 0;
}
/* ============================================================
SECCIÓN 3 · DOLOR (PAS)
============================================================ */
.tcm-pain { max-width: 760px; margin-inline: auto; text-align: center; }
.tcm-pain__h2 {
font-family: var(--font-serif-display);
font-size: clamp(36px, 4.8vw, 64px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--navy-deep);
margin: 0 auto 56px;
text-wrap: balance;
max-width: 20ch;
}
.tcm-pain__lines { margin: 0; }
.tcm-pain__line {
font-family: var(--font-sans);
font-size: clamp(19px, 1.7vw, 22px);
line-height: 1.55;
color: var(--gray-700);
margin: 0 auto 32px;
max-width: 640px;
text-wrap: pretty;
}
.tcm-pain__line:first-child { font-weight: 500; color: var(--navy-deep); }
.tcm-pain__anchor {
font-family: var(--font-serif-display);
font-style: italic;
font-size: clamp(24px, 2.8vw, 36px);
line-height: 1.35;
color: var(--terracotta-primary);
margin: 56px auto 0;
text-wrap: balance;
max-width: 22ch;
}
.tcm-pain__anchor em { font-style: italic; }
/* ============================================================
SECCIÓN 4 · OFERTA (3 outcomes)
============================================================ */
.tcm-offer { max-width: 880px; margin-inline: auto; }
.tcm-offer__h2 {
font-family: var(--font-serif-display);
font-size: clamp(32px, 4vw, 52px);
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.018em;
color: var(--navy-deep);
margin: 0 0 56px;
text-wrap: balance;
}
.tcm-offer__items {
display: grid;
gap: 48px;
}
.tcm-offer__item {
display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
align-items: start;
padding-block: 24px;
border-top: 1px solid var(--border-hairline);
}
.tcm-offer__item:first-child { border-top: 0; padding-top: 0; }
.tcm-offer__num {
font-family: var(--font-serif-display);
font-size: 56px;
font-weight: 300;
color: var(--terracotta-primary);
line-height: 1;
}
.tcm-offer__title {
font-family: var(--font-sans);
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 700;
line-height: 1.3;
color: var(--navy-deep);
margin: 8px 0 12px;
text-wrap: balance;
}
.tcm-offer__text {
font-family: var(--font-sans);
font-size: var(--t-body-size);
line-height: 1.65;
color: var(--gray-700);
margin: 0;
}
@media (max-width: 600px) {
.tcm-offer__item { grid-template-columns: 1fr; gap: 8px; }
.tcm-offer__num { font-size: 40px; }
}
/* ============================================================
SECCIÓN 6 · LISTA DE TESTIMONIOS (editorial)
============================================================ */
.tcm-tlist { max-width: 880px; margin-inline: auto; }
.tcm-tlist__eyebrow { color: var(--terracotta-primary); margin-bottom: 56px; }
.tcm-tlist__items {
display: flex;
flex-direction: column;
gap: 64px;
}
.tcm-tlist__item {
padding-bottom: 64px;
border-bottom: 1px solid var(--border-hairline);
}
.tcm-tlist__item:last-child { border-bottom: 0; padding-bottom: 0; }
.tcm-tlist__headline {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--navy-deep);
margin: 0 0 24px;
text-wrap: balance;
}
.tcm-tlist__body {
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.65;
color: var(--gray-700);
margin: 0 0 24px;
max-width: 720px;
}
.tcm-tlist__author {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--terracotta-primary);
margin: 0;
}
/* ============================================================
SECCIÓN 7 · BIO MÍNIMA (foto + texto)
============================================================ */
.tcm-bio {
display: grid;
gap: 48px;
grid-template-columns: 1fr;
align-items: center;
max-width: 1100px;
margin-inline: auto;
}
@media (min-width: 900px) {
.tcm-bio { grid-template-columns: 0.7fr 1fr; gap: 80px; }
}
.tcm-bio__photo {
width: 100%;
aspect-ratio: 4 / 5;
background-size: cover;
background-position: 50% 25%;
border-radius: var(--radius-photo);
max-height: 600px;
}
.tcm-bio__copy { max-width: 580px; }
.tcm-bio__copy .t-h2 { margin: 8px 0 0; }
.tcm-bio__p {
font-family: var(--font-sans);
font-size: var(--t-body-size);
line-height: 1.7;
color: var(--gray-700);
margin: 24px 0;
}
/* ============================================================
SECCIÓN 8 · BOOKING FLOW (3 pasos + Calendly)
============================================================ */
.tcm-step { margin-top: 56px; }
.tcm-step:first-of-type { margin-top: 48px; }
.tcm-step__label {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--gray-500);
letter-spacing: 0.06em;
margin-bottom: 16px;
}
.tcm-step__note {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 17px;
line-height: 1.55;
color: var(--gray-700);
margin: 16px 0 0;
padding-left: 16px;
border-left: 2px solid var(--gold-champagne);
max-width: 640px;
}
.tcm-pair {
display: grid;
gap: 12px;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
.tcm-pair { grid-template-columns: 1fr; }
}
.tcm-bigbtn {
background: var(--cream-base);
border: 1.5px solid var(--border-hairline);
border-radius: var(--radius);
padding: 24px 28px;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--navy-deep);
cursor: pointer;
text-align: left;
transition: border-color var(--dur-base) var(--easing),
background-color var(--dur-base) var(--easing),
transform var(--dur-base) var(--easing);
}
.tcm-bigbtn:hover { border-color: var(--terracotta-primary); }
.tcm-bigbtn.is-on {
border-color: var(--terracotta-primary);
background: var(--peach-whisper);
border-width: 2px;
padding: 23.5px 27.5px;
}
.tcm-bigbtn--withsub { display: flex; flex-direction: column; gap: 6px; }
.tcm-bigbtn__t { font-weight: 600; }
.tcm-bigbtn__s {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.01em;
color: var(--gray-500);
}
.tcm-bigbtn.is-on .tcm-bigbtn__s { color: var(--terracotta-deep); }
/* Calendly placeholder */
.tcm-calendly {
margin-top: 56px;
border: 1px solid var(--border-hairline);
border-radius: var(--radius);
background: var(--off-white);
overflow: hidden;
opacity: 0.6;
transition: opacity var(--dur-base) var(--easing);
}
.tcm-calendly.is-active { opacity: 1; }
.tcm-calendly__h3 {
font-family: var(--font-serif-display);
font-size: 24px;
font-weight: 400;
color: var(--navy-deep);
margin: 0;
padding: 24px 24px 0;
}
.tcm-calendly__chrome {
display: flex; align-items: center; gap: 14px;
padding: 16px 20px;
background: var(--cream-warm);
border-bottom: 1px solid var(--border-hairline);
margin-top: 16px;
}
.tcm-calendly__dots { display: flex; gap: 6px; }
.tcm-calendly__dots span {
width: 10px; height: 10px; border-radius: 50%; background: var(--border-hairline);
}
.tcm-calendly__url {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px; color: var(--gray-500);
word-break: break-all;
}
.tcm-calendly__body { padding: 56px 32px; min-height: 280px; display: flex; align-items: center; justify-content: center; }
.tcm-calendly__pending { text-align: center; max-width: 480px; color: var(--gray-500); font-family: var(--font-sans); line-height: 1.55; }
.tcm-calendly__hint { font-size: 13px; color: var(--gray-500); margin-top: 12px; }
.tcm-calendly__live { text-align: center; }
.tcm-calendly__live-url {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
color: var(--terracotta-primary);
margin: 16px 0 32px;
word-break: break-all;
}
.tcm-calendly__foot {
font-family: var(--font-sans);
font-size: 13px;
color: var(--gray-500);
text-align: center;
margin: 24px 0 0;
letter-spacing: 0.02em;
}
/* ============================================================
SECCIÓN 9 · MUJERES QUE TRASCIENDEN (bloque navy + form cream)
============================================================ */
.tcm-mqt {
background: var(--forest-deep);
color: var(--cream-base);
padding-block: var(--space-section-mobile);
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.tcm-mqt { padding-block: var(--space-section); }
}
.tcm-mqt::before {
content: ""; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.5;
mix-blend-mode: screen;
pointer-events: none;
}
.tcm-mqt > * { position: relative; z-index: 1; }
.tcm-mqt__inner { max-width: 880px; margin-inline: auto; }
.tcm-mqt__eyebrow { color: var(--gold-champagne); letter-spacing: 0.18em; }
.tcm-mqt__h2 {
font-family: var(--font-serif-display);
font-size: clamp(48px, 6vw, 88px);
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--cream-base);
margin: 16px 0 24px;
text-wrap: balance;
}
.tcm-mqt__sub {
font-family: var(--font-serif-display);
font-style: italic;
font-size: clamp(20px, 2vw, 26px);
line-height: 1.45;
color: var(--gold-soft);
margin: 0 0 64px;
max-width: 700px;
}
.tcm-mqt__pillars {
display: grid;
gap: 32px;
grid-template-columns: 1fr;
margin-bottom: 56px;
}
@media (min-width: 768px) {
.tcm-mqt__pillars { grid-template-columns: 1fr 1fr 1fr; gap: 48px; }
}
.tcm-mqt__pillar {
border-top: 1px solid rgba(201, 169, 97, 0.4);
padding-top: 20px;
}
.tcm-mqt__pillar-key {
font-family: var(--font-serif-display);
font-style: italic;
font-weight: 400;
font-size: 28px;
color: var(--gold-champagne);
margin-bottom: 6px;
}
.tcm-mqt__pillar-t {
font-family: var(--font-sans);
font-weight: 700;
font-size: 17px;
letter-spacing: 0.02em;
color: var(--cream-base);
margin-bottom: 12px;
}
.tcm-mqt__pillar-body {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.6;
color: rgba(250, 247, 242, 0.78);
margin: 0;
}
.tcm-mqt__specs {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.7;
color: rgba(250, 247, 242, 0.78);
border-top: 1px solid rgba(201, 169, 97, 0.3);
border-bottom: 1px solid rgba(201, 169, 97, 0.3);
padding: 24px 0;
margin: 0 0 56px;
letter-spacing: 0.01em;
}
/* Form panel on cream against forest */
.tcm-mqt__form {
background: var(--cream-base);
color: var(--navy-deep);
padding: clamp(40px, 6vw, 64px);
border-radius: var(--radius);
}
.tcm-mqt__form-h3 {
font-family: var(--font-serif-display);
font-size: clamp(28px, 3vw, 40px);
font-weight: 400;
color: var(--navy-deep);
margin: 0;
text-wrap: balance;
}
.tcm-mqt__form-intro {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 17px;
line-height: 1.55;
color: var(--gray-700);
margin: 16px 0 32px;
max-width: 560px;
}
.tcm-mqt__form-fields {
display: grid;
gap: 14px;
max-width: 560px;
}
.tcm-mqt__form-cta {
margin-top: 12px;
justify-self: start;
padding: 18px 36px;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tcm-mqt__form-done {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 20px;
color: var(--terracotta-primary);
margin: 24px 0;
}
.tcm-mqt__form-foot {
font-family: var(--font-sans);
font-size: 13px;
color: var(--gray-500);
margin: 20px 0 0;
}
/* ============================================================
SECCIÓN 10 · FAQ
============================================================ */
.tcm-faq { margin-top: 24px; border-top: 1px solid var(--border-hairline); }
.tcm-faq__item { border-bottom: 1px solid var(--border-hairline); }
.tcm-faq__q {
width: 100%;
background: transparent;
border: 0;
text-align: left;
padding: 28px 0;
display: flex; align-items: flex-start; justify-content: space-between;
gap: 24px;
cursor: pointer;
font-family: var(--font-serif-display);
font-size: clamp(20px, 2vw, 26px);
font-weight: 400;
line-height: 1.3;
color: var(--navy-deep);
}
.tcm-faq__q:hover { color: var(--terracotta-deep); }
.tcm-faq__q-text { flex: 1; text-wrap: balance; }
.tcm-faq__sign {
font-family: var(--font-sans);
font-size: 28px;
font-weight: 300;
color: var(--terracotta-primary);
line-height: 1;
}
.tcm-faq__a { padding: 0 0 32px; max-width: 720px; }
.tcm-faq__a p {
font-family: var(--font-sans);
font-size: var(--t-body-size);
line-height: 1.7;
color: var(--gray-700);
margin: 0;
}
/* ============================================================
SECCIÓN 11 · CIERRE
============================================================ */
.tcm-closing { max-width: 720px; margin-inline: auto; text-align: center; }
.tcm-closing__line {
font-family: var(--font-serif-display);
font-weight: 300;
font-size: clamp(28px, 3.6vw, 44px);
line-height: 1.3;
color: var(--navy-deep);
margin: 48px 0;
text-wrap: balance;
}
.tcm-closing__cta { margin-top: 64px; }
.tcm-closing__sig {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 22px;
color: var(--terracotta-primary);
margin: 64px 0 0;
}
/* ============================================================
STICKY CTA BAR (desktop bottom · mobile floating)
============================================================ */
.tcm-sticky {
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--navy-darker);
color: var(--cream-base);
padding: 14px 20px;
z-index: 80;
transform: translateY(100%);
transition: transform var(--dur-base) var(--easing);
box-shadow: 0 -4px 20px rgba(20, 22, 26, 0.18);
}
.tcm-sticky.is-visible { transform: translateY(0); }
.tcm-sticky__inner {
max-width: 1100px;
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.tcm-sticky__text {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 17px;
color: var(--gold-soft);
flex: 1;
}
.tcm-sticky__cta {
font-size: 14px;
padding: 12px 28px;
letter-spacing: 0.06em;
white-space: nowrap;
}
@media (max-width: 600px) {
.tcm-sticky { padding: 12px 16px 14px; }
.tcm-sticky__text { display: none; }
.tcm-sticky__inner { justify-content: center; }
.tcm-sticky__cta { width: 100%; padding: 14px 24px; font-size: 14px; text-align: center; }
}
/* Push footer above sticky on mobile so it doesn't get covered */
@media (max-width: 600px) {
.ac-footer { padding-bottom: 72px; }
}
/* WhatsApp FAB needs to clear sticky bar on desktop */
@media (min-width: 768px) {
.ac-fab { bottom: 84px; }
}
/* ============================================================
HOME v2.0 — estilos específicos de las nuevas secciones
Convención: prefijo .hv-*
Pair with: ../../colors_and_type.css + ../../components.css + site.css
============================================================ */
/* ---------- Hero support paragraph (3-4 lines bajo el sub) ---------- */
.ac-hero__support--magazine {
font-family: var(--font-serif-display);
font-weight: 300;
font-style: italic;
font-size: clamp(18px, 1.55vw, 23px);
line-height: 1.55;
color: rgba(245, 241, 234, 0.96);
max-width: 560px;
margin: 28px 0 0;
padding-left: 18px;
border-left: 2px solid var(--gold-soft, #c9a26a);
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
text-wrap: pretty;
}
/* ============================================================
SECCIÓN 2 · BANDA DE CREDENCIALES (estática, post-hero)
============================================================ */
.hv-credband {
background: var(--navy-deep);
padding: clamp(28px, 4vh, 44px) var(--pad-page-mobile);
}
@media (min-width: 768px) {
.hv-credband { padding-inline: var(--pad-page); }
}
.hv-credband__inner {
max-width: 1100px;
margin-inline: auto;
text-align: center;
}
.hv-credband__line {
font-family: var(--font-sans);
font-size: clamp(11px, 1vw, 13px);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245, 241, 234, 0.65);
margin: 6px 0;
text-wrap: balance;
}
.hv-credband__line:first-child { color: var(--gold-soft); }
/* ============================================================
SECCIÓN 3 · ARTICULACIÓN DEL DOLOR (condensada)
============================================================ */
.hv-pain {
max-width: 720px;
margin-inline: auto;
text-align: center;
padding-block: 24px;
}
.hv-pain__eyebrow {
color: var(--terracotta-primary);
margin-bottom: 40px;
letter-spacing: 0.18em;
}
.hv-pain__body {
font-family: var(--font-sans);
font-size: clamp(18px, 1.8vw, 21px);
line-height: 1.7;
color: var(--navy-deep);
margin: 0 auto;
max-width: 640px;
text-wrap: pretty;
}
.hv-pain__anchor {
font-family: var(--font-serif-display);
font-style: italic;
font-weight: 400;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--terracotta-primary);
margin: 64px auto 0;
max-width: 22ch;
text-wrap: balance;
}
/* ============================================================
SECCIÓN 4 · SUB-HERO · TRES PUERTAS
============================================================ */
.hv-doors__head {
text-align: center;
margin-bottom: 72px;
}
.hv-doors__h2 {
margin: 16px auto 0;
max-width: 16ch;
}
.hv-doors__grid {
display: grid;
gap: 32px;
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 900px) {
.hv-doors__grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
}
.hv-door {
background: var(--cream-base);
border-top: 2px solid var(--terracotta-primary);
padding: 40px 32px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
transition: transform var(--dur-base) var(--easing), box-shadow var(--dur-base) var(--easing);
}
.hv-door:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.hv-door--primary {
background: var(--off-white);
border-top-width: 4px;
padding: 56px 36px 48px;
box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04), 0 8px 24px rgba(31, 41, 55, 0.08);
}
@media (min-width: 900px) {
.hv-door--primary { transform: translateY(-12px); }
.hv-door--primary:hover { transform: translateY(-14px); }
}
.hv-door__badge {
position: absolute;
top: -14px;
left: 32px;
background: var(--terracotta-primary);
color: var(--cream-base);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: var(--radius-sm);
}
.hv-door__num {
font-family: var(--font-serif-display);
font-size: 36px;
font-weight: 300;
font-style: italic;
color: var(--terracotta-primary);
line-height: 1;
}
.hv-door__sub {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gray-500);
margin-top: -8px;
}
.hv-door__tagline {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 700;
line-height: 1.35;
color: var(--navy-deep);
margin: 0;
text-wrap: balance;
}
.hv-door__body {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.6;
color: var(--gray-700);
margin: 0 0 8px;
flex: 1;
}
.hv-door__link {
font-size: 15px;
align-self: flex-start;
margin-top: 8px;
}
/* ============================================================
SECCIÓN 5 · AS SEEN IN
============================================================ */
.hv-asseen {
max-width: 880px;
margin-inline: auto;
text-align: center;
}
.hv-asseen__h3 {
font-family: var(--font-serif-display);
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 400;
line-height: 1.2;
color: var(--navy-deep);
margin: 16px 0 24px;
text-wrap: balance;
}
.hv-asseen__body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.65;
color: var(--gray-700);
margin: 0 auto;
max-width: 560px;
}
.hv-asseen__grid {
display: grid;
gap: 32px 40px;
margin-top: 64px;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
@media (max-width: 768px) {
.hv-asseen__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 480px) {
.hv-asseen__grid { grid-template-columns: 1fr; gap: 20px; }
}
.hv-asseen__logo {
display: flex;
align-items: center;
justify-content: center;
min-height: 84px;
padding: 20px;
border-top: 1px solid var(--border-hairline);
border-bottom: 1px solid var(--border-hairline);
opacity: 0.7;
transition: opacity var(--dur-base) var(--easing);
}
.hv-asseen__logo:hover { opacity: 1; }
.hv-asseen__logo-img {
height: 60px;
width: auto;
max-width: 180px;
filter: grayscale(100%);
object-fit: contain;
display: block;
}
@media (max-width: 768px) {
.hv-asseen__logo-img { height: 48px; max-width: 140px; filter: none; }
.hv-asseen__logo { opacity: 1; }
}
/* ============================================================
SECCIÓN 7 · TANGIBLE OUTCOMES (Cindy + Maribel)
============================================================ */
.hv-outcomes {
max-width: 880px;
margin-inline: auto;
}
.hv-outcomes__head {
text-align: center;
margin-bottom: 80px;
}
.hv-outcomes__h2 {
margin-top: 16px;
max-width: 18ch;
margin-inline: auto;
}
.hv-outcomes__list {
display: flex;
flex-direction: column;
gap: 64px;
}
.hv-outcomes__item {
padding-bottom: 64px;
border-bottom: 1px solid var(--border-hairline);
display: grid;
gap: 48px;
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 768px) {
.hv-outcomes__item {
grid-template-columns: 240px 1fr;
gap: 64px;
}
}
.hv-outcomes__item:last-child { border-bottom: 0; padding-bottom: 0; }
.hv-outcomes__stat {
border-top: 2px solid var(--terracotta-primary);
padding-top: 16px;
}
.hv-outcomes__stat-num {
font-family: var(--font-serif-display);
font-style: italic;
font-weight: 400;
font-size: clamp(28px, 3vw, 38px);
line-height: 1.1;
color: var(--terracotta-primary);
margin-bottom: 8px;
text-wrap: balance;
}
.hv-outcomes__stat-sub {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--gray-500);
text-transform: uppercase;
line-height: 1.45;
}
.hv-outcomes__copy { max-width: 720px; }
.hv-outcomes__headline {
font-family: var(--font-serif-display);
font-weight: 500;
font-size: clamp(22px, 2.6vw, 32px);
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--navy-deep);
margin: 0 0 24px;
text-wrap: balance;
}
.hv-outcomes__body {
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.65;
color: var(--gray-700);
margin: 0 0 24px;
max-width: 720px;
}
.hv-outcomes__author {
font-family: var(--font-sans);
font-size: 14px;
color: var(--gray-500);
margin: 0;
}
.hv-outcomes__disclaimer {
margin-top: 64px;
text-align: center;
font-family: var(--font-sans);
font-size: 13px;
font-style: italic;
color: var(--gray-500);
max-width: 560px;
margin-inline: auto;
}
/* ============================================================
SECCIÓN 9 · CHARLAS TEASER (B2B · peach-whisper)
============================================================ */
.ac-section--warm { background: var(--peach-whisper); }
.ac-section--warm .ac-page { display: flex; justify-content: center; }
.hv-charlas {
max-width: 720px;
text-align: center;
}
.hv-charlas__h2 {
margin: 16px auto 24px;
max-width: 20ch;
}
.hv-charlas__body {
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.7;
color: var(--gray-700);
margin: 0 auto 32px;
max-width: 640px;
text-wrap: pretty;
}
.hv-charlas__link { font-size: 17px; }
/* ============================================================
SECCIÓN 11 · MOVEMENTS TEASER (4 bloques compactos)
============================================================ */
.hv-mteaser {
display: grid;
gap: 40px 48px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.hv-mteaser { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
.hv-mteaser { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}
.hv-mteaser__item {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px 0;
}
.hv-mteaser__num {
font-family: var(--font-serif-display);
font-size: 44px;
font-weight: 300;
color: var(--gold-champagne);
line-height: 1;
margin-bottom: 4px;
}
.hv-mteaser__title {
font-family: var(--font-serif-display);
font-size: 21px;
font-weight: 400;
line-height: 1.25;
color: var(--cream-base);
text-wrap: balance;
}
.hv-mteaser__body {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.55;
color: rgba(255, 248, 237, 0.78);
margin: 0;
max-width: 320px;
}
/* ============================================================
SECCIÓN 13 · CIERRE devocional con triples
============================================================ */
.hv-closing__triples {
margin: 64px auto 32px;
max-width: 640px;
}
.hv-closing__triple {
font-family: var(--font-serif-display);
font-style: italic;
font-weight: 400;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.35;
color: var(--navy-deep);
margin: 20px 0;
text-wrap: balance;
}
.hv-closing__triple--gold {
color: var(--gold-deep);
font-weight: 500;
}
/* ============================================================
PLACEHOLDER PAGES (Sobre mí · Charlas · MQT)
============================================================ */
.hv-placeholder {
max-width: 720px;
margin-inline: auto;
text-align: center;
padding-block: 96px;
}
.hv-placeholder__h1 {
font-family: var(--font-serif-display);
font-weight: 300;
font-size: clamp(48px, 6vw, 96px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--navy-deep);
margin: 24px 0 24px;
text-wrap: balance;
}
.hv-placeholder__sub {
font-family: var(--font-serif-display);
font-style: italic;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.5;
color: var(--gray-700);
margin: 0 auto;
max-width: 480px;
}
/* ============================================================
HOME LUXE · v3.0 — VISUAL UPGRADE LAYER
Pure visual layer over site.css + home-v2.css + trabajaconmigo.css.
Copy & architecture locked; this file refines:
· Type scale & hierarchy
· Editorial chrome (section marks, hairlines, ornaments)
· Photo treatments (grain, vignette, ken-burns)
· Restraint — drops SaaS tropes (badges, lifted cards, marquee)
· Scroll-fade-in (opacity only)
Prefix for new classes: .lx-*
============================================================ */
/* ============================================================
0 · ROOT — bumped scale, finer micro-typography
============================================================ */
:root {
/* Editorial display scale — pushed up vs default tokens */
--lx-h1: clamp(48px, 8.4vw, 132px);
--lx-h1-tight: clamp(44px, 7.4vw, 116px);
--lx-h2: clamp(36px, 5.4vw, 84px);
--lx-h3: clamp(28px, 3.4vw, 48px);
--lx-anchor: clamp(34px, 5.4vw, 78px);
--lx-body-lg: clamp(18px, 1.4vw, 22px);
/* Refined eyebrow */
--lx-eyebrow-tracking: 0.22em;
/* Whitespace bump */
--lx-section: clamp(120px, 16vh, 200px);
--lx-block: clamp(80px, 11vh, 144px);
/* Editorial hairlines (warmer than gray-200) */
--lx-hair: rgba(31, 41, 55, 0.14);
--lx-hair-soft: rgba(31, 41, 55, 0.08);
--lx-hair-on-dark: rgba(245, 241, 234, 0.18);
/* Film grain SVG — softer than the navy-section grain */
--lx-grain-cream: url("data:image/svg+xml;utf8,");
--lx-grain-warm: url("data:image/svg+xml;utf8,");
}
/* ============================================================
1 · BODY · KERNING + SCROLL
============================================================ */
body {
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
text-rendering: geometricPrecision;
scroll-behavior: smooth;
}
/* ============================================================
2 · SCROLL FADE-IN ENGINE
Add `data-lx-fade` to any element; the IntersectionObserver
in app.jsx will flip `is-in-view` after intersection.
Brand law: opacity only, 420ms, gentle ease.
============================================================ */
/* Animations disabled — content always visible, no fade-in delay */
[data-lx-fade] {
opacity: 1;
transition: none;
}
[data-lx-fade].is-in-view { opacity: 1; }
/* ============================================================
3 · NAV — finer, more editorial
============================================================ */
.ac-nav {
background: rgba(250, 247, 242, 0.86);
border-bottom: 1px solid var(--lx-hair-soft);
}
.ac-nav__inner { padding-block: 22px; }
.ac-nav__link {
font-size: 13px;
letter-spacing: 0.02em;
}
.ac-nav__link.is-cta {
border-bottom: 0;
padding: 8px 18px;
background: var(--terracotta-primary);
color: var(--cream-base);
transition: background-color var(--dur-base) var(--easing);
}
.ac-nav__link.is-cta:hover { background: var(--terracotta-deep); border-bottom: 0; }
.ac-nav__lang { font-size: 12px; letter-spacing: 0.08em; }
/* ============================================================
4 · HERO MASTHEAD — cinematic, editorial chrome
============================================================ */
/* Slightly slower, more atmospheric photo with ken-burns drift */
.ac-hero { min-height: 100svh; background: var(--ink-deep); }
.ac-hero__bleed-photo {
background-position: 36% center;
animation: lx-kenburns 36s ease-in-out infinite alternate;
transform-origin: 60% 40%;
}
@keyframes lx-kenburns {
from { transform: scale(1.00); }
to { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.ac-hero__bleed-photo { animation: none; }
}
/* Editorial vignette + film grain over the photo */
.ac-hero__bleed::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(ellipse 90% 75% at 28% 50%, transparent 0%, rgba(14, 18, 24, 0.55) 70%, rgba(14, 18, 24, 0.78) 100%),
linear-gradient(180deg, rgba(14, 18, 24, 0.38) 0%, transparent 18%, transparent 70%, rgba(14, 18, 24, 0.50) 100%);
pointer-events: none;
z-index: 1;
}
.ac-hero__bleed::before {
content: ""; position: absolute; inset: 0;
background-image: var(--lx-grain-cream);
opacity: 0.30;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
}
/* Editorial masthead bar — finer, refined */
.ac-hero__mast {
padding-top: 32px;
font-size: 11px;
letter-spacing: 0.22em;
}
.ac-hero__mast--on-photo { color: rgba(245, 241, 234, 0.62); }
.ac-hero__mast--on-photo .ac-hero__mast-rule { background: rgba(245, 241, 234, 0.22); }
/* Page numeral — replace "01 / 01" via JSX, but style the slot */
.ac-hero__mast-page {
font-family: var(--font-serif-display);
font-style: italic;
font-weight: 400;
font-size: 16px;
letter-spacing: 0.04em;
text-transform: none;
color: rgba(245, 241, 234, 0.78);
}
/* Editorial issue stamp */
.lx-hero__stamp {
position: absolute;
top: clamp(88px, 12vh, 140px);
right: clamp(20px, 5vw, 96px);
z-index: 3;
display: none;
flex-direction: column;
align-items: flex-end;
gap: 8px;
color: rgba(245, 241, 234, 0.62);
font-family: var(--font-sans);
font-size: 10.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
}
@media (min-width: 900px) { .lx-hero__stamp { display: flex; } }
.lx-hero__stamp-vol {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: none;
color: var(--gold-soft);
}
.lx-hero__stamp-rule {
width: 36px;
height: 1px;
background: rgba(245, 241, 234, 0.4);
}
/* Bigger H1, tighter tracking, refined accent */
.ac-hero__h1--magazine {
font-size: var(--lx-h1);
font-weight: 300;
letter-spacing: -0.028em;
line-height: 0.98;
max-width: 13ch;
text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}
.ac-hero__h1-accent--gold {
color: var(--gold-soft);
font-weight: 300;
font-style: italic;
}
/* Refined eyebrow */
.ac-hero__eyebrow--gold {
color: var(--gold-soft) !important;
font-size: 11.5px;
letter-spacing: 0.26em;
margin-bottom: 32px;
}
.ac-hero__sub--magazine {
color: rgba(245, 241, 234, 0.94);
font-size: clamp(18px, 1.4vw, 22px);
line-height: 1.5;
margin-top: 36px;
max-width: 540px;
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
/* (support paragraph styled in HOME v2.0 block above — kept editorial italic + gold rule) */
/* Hero CTA — softer hover, terracotta button on dark */
.ac-hero__cta--left .ac-btn--primary {
background: var(--terracotta-primary);
color: var(--cream-base);
padding: 22px 44px;
font-size: 14px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.ac-hero__cta--left .ac-btn--primary:hover {
background: var(--terracotta-deep);
transform: none;
}
/* Drop the busy marquee — replace with elegant static credential row */
.ac-hero__marquee { display: none; }
.lx-hero__credstrip {
position: relative;
z-index: 2;
margin-top: auto;
border-top: 1px solid rgba(245, 241, 234, 0.18);
border-bottom: 1px solid rgba(245, 241, 234, 0.18);
background: linear-gradient(180deg, rgba(20, 22, 26, 0.35), rgba(20, 22, 26, 0.6));
backdrop-filter: blur(6px);
padding: 22px clamp(20px, 5vw, 96px);
}
.lx-hero__credstrip-inner {
max-width: 1200px;
margin-inline: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px 28px;
}
.lx-hero__credstrip-item {
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(245, 241, 234, 0.88);
white-space: nowrap;
}
.lx-hero__credstrip-sep {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 14px;
color: var(--gold-soft);
opacity: 0.85;
}
@media (max-width: 700px) {
.lx-hero__credstrip { padding-block: 18px; }
.lx-hero__credstrip-item { font-size: 10.5px; letter-spacing: 0.2em; }
.lx-hero__credstrip-sep { display: none; }
}
/* ============================================================
5 · SECTIONS — global breath bump + editorial column rules
============================================================ */
.ac-section { padding-block: var(--lx-section); }
@media (max-width: 768px) {
.ac-section { padding-block: clamp(80px, 12vh, 120px); }
}
/* Soft section divider between sections (rendered before each section
except the hero) — only on cream/alt sections */
.ac-section + .ac-section { position: relative; }
/* ============================================================
6 · SECTION 2 · CREDENTIAL BAND — refined typography
============================================================ */
.hv-credband {
background: var(--navy-darker);
padding-block: clamp(40px, 6vh, 64px);
position: relative;
overflow: hidden;
}
.hv-credband::before {
content: ""; position: absolute; inset: 0;
background-image: var(--lx-grain-warm);
opacity: 0.25;
mix-blend-mode: screen;
pointer-events: none;
}
.hv-credband__inner { position: relative; z-index: 1; }
.hv-credband__line {
font-size: clamp(10.5px, 0.9vw, 12.5px);
letter-spacing: 0.22em;
color: rgba(245, 241, 234, 0.62);
margin: 8px 0;
}
.hv-credband__line:first-child { color: var(--gold-soft); }
/* ============================================================
7 · SECTION 3 · PAIN — push the anchor to magazine scale
============================================================ */
.hv-pain {
max-width: 760px;
padding-block: 48px;
position: relative;
}
.hv-pain__eyebrow {
font-size: 11.5px;
letter-spacing: var(--lx-eyebrow-tracking);
margin-bottom: 56px;
}
.hv-pain__body {
font-size: clamp(19px, 1.6vw, 23px);
line-height: 1.75;
color: var(--navy-deep);
max-width: 620px;
font-weight: 400;
}
.hv-pain__anchor {
font-size: var(--lx-anchor);
font-weight: 300;
line-height: 1.18;
letter-spacing: -0.02em;
color: var(--terracotta-primary);
max-width: 18ch;
margin: 96px auto 0;
}
/* Bold treatment for "el Poder de tu Alma" inside italic anchor */
.hv-pain__anchor strong,
.tcm-pain__anchor strong {
font-family: var(--font-serif-display);
font-style: italic;
font-weight: 600;
color: var(--terracotta-deep);
letter-spacing: -0.012em;
}
.tcm-pain__anchor strong { color: var(--terracotta-primary); }
/* Small ornate floreal flourish above the anchor */
.lx-flourish {
display: block;
margin: 0 auto;
height: 14px;
width: 80px;
color: var(--terracotta-primary);
opacity: 0.6;
}
.hv-pain .lx-flourish {
margin-top: 88px;
margin-bottom: 16px;
}
/* Section indicator marker (§ III) — runs along the left margin */
.lx-sectionmark {
display: block;
text-align: center;
font-family: var(--font-serif-display);
font-style: italic;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.06em;
color: var(--terracotta-primary);
opacity: 0.7;
margin-bottom: 24px;
}
/* ============================================================
8 · SECTION 4 · DOORS — flatten "most chosen", refine
============================================================ */
.hv-doors__head { margin-bottom: 96px; }
.hv-doors__h2 {
font-size: var(--lx-h2);
font-weight: 300;
letter-spacing: -0.022em;
line-height: 1.05;
max-width: 16ch;
}
.hv-doors__grid { gap: 1px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
.hv-doors__grid {
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--lx-hair);
border-bottom: 1px solid var(--lx-hair);
}
}
/* Replace the elevated/badge card system with editorial equal cards */
.hv-door {
background: transparent;
border: 0;
border-top: 1px solid var(--lx-hair);
padding: 64px 40px 56px;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
transition: background-color var(--dur-base) var(--easing);
}
@media (min-width: 900px) {
.hv-door {
border-top: 0;
border-right: 1px solid var(--lx-hair);
padding: 72px 44px 64px;
}
.hv-door:last-child { border-right: 0; }
}
.hv-door:hover {
background: rgba(232, 197, 176, 0.10);
transform: none;
box-shadow: none;
}
/* Drop primary elevation entirely — equal weight */
.hv-door--primary {
background: transparent;
border-top-width: 1px;
padding: 64px 40px 56px;
box-shadow: none;
transform: none;
}
@media (min-width: 900px) {
.hv-door--primary { padding: 72px 44px 64px; transform: none; }
.hv-door--primary:hover { transform: none; }
}
/* Drop the "Most chosen" badge — visually loud */
.hv-door__badge { display: none; }
.hv-door__num {
font-size: 14px;
font-style: italic;
font-family: var(--font-serif-display);
color: var(--terracotta-primary);
font-weight: 400;
letter-spacing: 0.04em;
text-transform: none;
}
.hv-door__sub {
font-size: 11px;
letter-spacing: 0.22em;
color: var(--gray-500);
margin-top: 4px;
}
.hv-door__tagline {
font-family: var(--font-serif-display);
font-weight: 400;
font-style: normal;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.2;
color: var(--navy-deep);
margin-top: 8px;
letter-spacing: -0.015em;
}
.hv-door__body {
font-size: 16px;
line-height: 1.65;
color: var(--gray-700);
}
.hv-door__link {
font-family: var(--font-sans);
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--terracotta-primary);
border-bottom: 1px solid var(--terracotta-primary);
padding-bottom: 4px;
align-self: flex-start;
margin-top: 12px;
}
.hv-door__link:hover {
color: var(--terracotta-deep);
border-bottom-color: var(--terracotta-deep);
}
/* ============================================================
9 · SECTION 5 · AS SEEN IN — quieter, more breath
============================================================ */
.hv-asseen { max-width: 920px; }
.hv-asseen__h3 {
font-size: clamp(30px, 3.4vw, 46px);
font-weight: 300;
letter-spacing: -0.018em;
margin: 20px 0 28px;
}
.hv-asseen__body {
font-size: 16.5px;
line-height: 1.7;
max-width: 540px;
}
.hv-asseen__grid {
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 88px;
border-top: 1px solid var(--lx-hair);
border-bottom: 1px solid var(--lx-hair);
}
@media (max-width: 900px) {
.hv-asseen__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.hv-asseen__grid { grid-template-columns: 1fr; }
}
.hv-asseen__logo {
border: 0;
border-right: 1px solid var(--lx-hair);
min-height: 116px;
padding: 32px 24px;
opacity: 0.55;
}
/* 4-col grid: row break after item 4 — add bottom border to first row */
.hv-asseen__logo:nth-child(4n) { border-right: 0; }
.hv-asseen__logo:nth-child(-n+4) { border-bottom: 1px solid var(--lx-hair); }
.hv-asseen__logo:hover { opacity: 0.95; }
@media (max-width: 900px) {
/* 2-col grid: every-other rightmost has no right border; every pair gets bottom border except last 2 */
.hv-asseen__logo { border-right: 1px solid var(--lx-hair); border-bottom: 0; }
.hv-asseen__logo:nth-child(2n) { border-right: 0; }
.hv-asseen__logo:nth-last-child(n+3) { border-bottom: 1px solid var(--lx-hair); }
}
@media (max-width: 480px) {
.hv-asseen__logo { border-right: 0; border-bottom: 1px solid var(--lx-hair); }
.hv-asseen__logo:last-child { border-bottom: 0; }
}
/* ============================================================
10 · SECTION 6 · METHOD ("Cómo trabajo") — half-bleed photo + dark
============================================================ */
.ac-section--dark { background: var(--ink-rich); position: relative; }
.ac-section--dark::before {
background-image: var(--lx-grain-warm);
opacity: 0.40;
}
.ac-section--dark::after { display: none; }
/* New split layout for Method */
.lx-method {
display: grid;
grid-template-columns: 1fr;
gap: 64px;
align-items: center;
position: relative;
}
@media (min-width: 900px) {
.lx-method { grid-template-columns: 0.95fr 1.15fr; gap: 80px; }
}
.lx-method__photo {
position: relative;
aspect-ratio: 4 / 5;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: var(--radius-photo);
}
.lx-method__photo::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(20, 22, 26, 0.42));
pointer-events: none;
}
.lx-method__caption {
position: absolute;
bottom: 20px; left: 20px;
font-family: var(--font-serif-display);
font-style: italic;
font-size: 13px;
color: rgba(245, 241, 234, 0.82);
letter-spacing: 0.02em;
z-index: 1;
}
.lx-method__copy { max-width: 580px; }
.lx-method__h2 {
font-size: var(--lx-h2);
font-weight: 300;
line-height: 1.04;
letter-spacing: -0.022em;
color: var(--cream-base);
margin: 28px 0 40px;
max-width: 14ch;
}
.lx-method__h2 em {
color: var(--gold-soft);
font-weight: 300;
font-style: italic;
}
.lx-method__p {
font-size: clamp(17px, 1.3vw, 19px);
line-height: 1.75;
color: rgba(245, 241, 234, 0.88);
margin: 0 0 24px;
}
.lx-method__p:last-child {
font-family: var(--font-serif-display);
font-style: italic;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.4;
color: var(--gold-soft);
margin-top: 40px;
}
.ac-section--dark .t-eyebrow {
color: var(--gold-soft);
letter-spacing: var(--lx-eyebrow-tracking);
font-size: 11.5px;
}
/* ============================================================
11 · SECTION 7 · OUTCOMES — magazine feature
============================================================ */
.hv-outcomes__head { margin-bottom: 112px; }
.hv-outcomes__h2 {
font-size: var(--lx-h2);
font-weight: 300;
letter-spacing: -0.022em;
line-height: 1.05;
}
.hv-outcomes__list { gap: 96px; }
.hv-outcomes__item {
padding-bottom: 96px;
gap: 56px;
}
@media (min-width: 768px) {
.hv-outcomes__item { grid-template-columns: 220px 1fr; gap: 80px; }
}
.hv-outcomes__stat {
border-top: 0;
padding-top: 0;
position: relative;
}
.hv-outcomes__stat::before {
content: ""; position: absolute;
top: 0; left: 0;
width: 56px; height: 1px;
background: var(--terracotta-primary);
}
.hv-outcomes__stat-num {
font-style: italic;
font-weight: 300;
font-size: clamp(44px, 5vw, 64px);
line-height: 1;
color: var(--terracotta-primary);
margin-top: 24px;
}
.hv-outcomes__stat-sub {
margin-top: 12px;
font-size: 11.5px;
letter-spacing: 0.18em;
}
.hv-outcomes__headline {
font-size: clamp(24px, 2.8vw, 36px);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 32px;
}
/* Drop cap on the first paragraph of each outcome */
.hv-outcomes__body {
font-size: 17.5px;
line-height: 1.75;
color: var(--gray-700);
}
.hv-outcomes__body::first-letter {
font-family: var(--font-serif-display);
font-weight: 300;
font-size: 4em;
float: left;
line-height: 0.85;
margin: 6px 12px 0 -2px;
color: var(--terracotta-primary);
}
.hv-outcomes__author {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 15px;
color: var(--gray-500);
}
.hv-outcomes__disclaimer {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 13.5px;
color: var(--gray-500);
margin-top: 80px;
}
/* ============================================================
12 · SECTION 8 · BIO — magazine spread
============================================================ */
.ac-bio {
grid-template-columns: 1fr;
gap: 56px;
align-items: start;
}
@media (min-width: 900px) {
.ac-bio { grid-template-columns: 0.95fr 1.15fr; gap: 96px; }
}
.ac-bio__photo {
position: relative;
aspect-ratio: 4 / 5;
max-height: 640px;
}
.ac-bio__photo::after {
content: ""; position: absolute; inset: 0;
background-image: var(--lx-grain-warm);
opacity: 0.18;
mix-blend-mode: multiply;
pointer-events: none;
border-radius: var(--radius-photo);
}
.ac-bio__copy { max-width: 600px; padding-top: 16px; }
.ac-bio__copy .t-h2 {
font-size: var(--lx-h2);
font-weight: 300;
letter-spacing: -0.022em;
line-height: 1.05;
margin-bottom: 32px;
max-width: 16ch;
}
.ac-bio__p {
font-size: 17px;
line-height: 1.75;
margin: 0 0 24px;
color: var(--gray-700);
}
/* Pull-quote sliver after bio block */
.lx-bio__pull {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--lx-hair);
font-family: var(--font-serif-display);
font-style: italic;
font-weight: 300;
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.35;
color: var(--terracotta-primary);
max-width: 28ch;
}
.ac-bio__copy .ac-link {
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--terracotta-primary);
border-bottom-color: var(--terracotta-primary);
margin-top: 16px;
}
/* ============================================================
13 · SECTION 9 · CHARLAS TEASER (peach-whisper)
============================================================ */
.ac-section--warm { background: var(--peach-whisper); position: relative; overflow: hidden; }
.ac-section--warm::before {
content: ""; position: absolute; inset: 0;
background-image: var(--lx-grain-warm);
opacity: 0.30;
mix-blend-mode: multiply;
pointer-events: none;
}
.ac-section--warm > * { position: relative; z-index: 1; }
.hv-charlas { max-width: 760px; }
.hv-charlas__h2 {
font-size: var(--lx-h2);
font-weight: 300;
letter-spacing: -0.022em;
line-height: 1.06;
margin: 28px auto 32px;
max-width: 18ch;
}
.hv-charlas__body {
font-size: 18px;
line-height: 1.75;
color: var(--gray-700);
margin-bottom: 40px;
}
.hv-charlas__link {
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--navy-deep);
border-bottom-color: var(--navy-deep);
}
/* ============================================================
14 · SECTION 10 · CREDENTIALS — refined hairline
============================================================ */
.ac-cred { margin-top: 56px; gap: 80px; }
.ac-cred__col-title {
color: var(--terracotta-primary);
font-size: 11.5px;
letter-spacing: var(--lx-eyebrow-tracking);
margin-bottom: 24px;
}
.ac-credential {
padding: 24px 0;
border-bottom: 1px solid var(--lx-hair);
}
.ac-credential:last-child { border-bottom: 1px solid var(--lx-hair); }
.ac-credential__title {
font-family: var(--font-serif-display);
font-size: 21px;
font-weight: 400;
letter-spacing: -0.005em;
color: var(--navy-deep);
margin: 0 0 4px;
}
.ac-credential__detail {
font-size: 14.5px;
color: var(--gray-500);
letter-spacing: 0.005em;
}
/* ============================================================
15 · SECTION 11 · MOVEMENTS TEASER — terracotta-rust depth
============================================================ */
.ac-section--movements {
background: var(--terracotta-rust);
color: var(--cream-base);
position: relative;
overflow: hidden;
}
.ac-section--movements::before {
background-image: var(--lx-grain-warm);
opacity: 0.50;
}
.ac-section--movements .t-eyebrow {
color: var(--gold-soft);
font-size: 11.5px;
letter-spacing: var(--lx-eyebrow-tracking);
}
.ac-section--movements h2 {
font-size: var(--lx-h2);
font-weight: 300;
letter-spacing: -0.022em;
}
.ac-section--movements .ac-method__p {
font-size: 18px;
line-height: 1.7;
color: rgba(250, 247, 242, 0.86);
}
.hv-mteaser { gap: 56px 48px; margin-top: 24px; }
@media (min-width: 1100px) {
.hv-mteaser { grid-template-columns: repeat(4, 1fr); gap: 48px; }
}
.hv-mteaser__item {
padding-top: 24px;
border-top: 1px solid rgba(245, 241, 234, 0.25);
}
.hv-mteaser__num {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 18px;
font-weight: 400;
color: var(--gold-soft);
margin-bottom: 16px;
letter-spacing: 0.02em;
}
.hv-mteaser__title {
font-family: var(--font-serif-display);
font-size: 24px;
font-weight: 400;
letter-spacing: -0.012em;
line-height: 1.2;
color: var(--cream-base);
margin-bottom: 12px;
}
.hv-mteaser__body {
font-size: 15.5px;
line-height: 1.6;
color: rgba(250, 247, 242, 0.82);
}
.ac-section--movements .ac-btn--primary {
background: var(--cream-base);
color: var(--terracotta-rust);
padding: 22px 44px;
font-size: 13.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.ac-section--movements .ac-btn--primary:hover {
background: var(--gold-soft);
color: var(--terracotta-rust);
transform: none;
}
/* ============================================================
16 · SECTION 12 · NEWSLETTER — editorial letter framing
============================================================ */
.ac-section--alt { background: var(--off-white); }
.ac-newsletter {
position: relative;
padding: 56px 0 0;
}
.ac-newsletter .t-eyebrow {
letter-spacing: var(--lx-eyebrow-tracking);
font-size: 11.5px;
}
.ac-newsletter .t-h3 {
font-size: clamp(32px, 4vw, 56px);
font-weight: 300;
letter-spacing: -0.022em;
margin: 20px auto 24px;
max-width: 18ch;
}
.ac-newsletter__body {
font-size: 17px;
line-height: 1.7;
max-width: 540px;
margin: 16px auto 40px;
}
.ac-newsletter__form { gap: 8px; max-width: 480px; }
.ac-newsletter__form .ac-input {
background: var(--cream-base);
border-color: var(--lx-hair);
padding: 18px 20px;
font-size: 16px;
}
.ac-newsletter__form .ac-input:focus { border-color: var(--terracotta-primary); }
.ac-newsletter__form .ac-btn {
padding: 18px 28px;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.ac-newsletter__caption {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 14px;
color: var(--gray-500);
margin-top: 20px;
}
/* ============================================================
17 · SECTION 13 · CLOSING — slower, bigger, more breath
============================================================ */
.hv-closing { padding-block: 32px; max-width: 760px; }
.ac-closing__line {
font-size: clamp(34px, 4.4vw, 56px);
font-weight: 300;
letter-spacing: -0.018em;
line-height: 1.18;
margin: 64px auto;
max-width: 22ch;
}
@media (min-width: 768px) {
.ac-closing__line { margin: 88px auto; }
}
.hv-closing__triples { margin: 96px auto 40px; }
.hv-closing__triple {
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.35;
margin: 24px 0;
font-weight: 400;
}
.hv-closing__triple--gold {
color: var(--terracotta-primary);
font-weight: 500;
}
.ac-closing__cta { margin-top: 80px; }
.ac-closing__cta .ac-btn--primary {
background: var(--terracotta-primary);
color: var(--cream-base);
padding: 24px 48px;
font-size: 13.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.ac-closing__cta .ac-btn--primary:hover { background: var(--terracotta-deep); transform: none; }
.ac-closing__sig {
font-style: italic;
font-size: 21px;
margin-top: 72px;
color: var(--terracotta-primary);
}
/* Floreal flourish separator above triples */
.hv-closing .lx-flourish { margin: 32px auto 0; }
/* ============================================================
18 · BUTTONS — global refinements
============================================================ */
.ac-btn {
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 22px 40px;
transition: background-color var(--dur-base) var(--easing), color var(--dur-base) var(--easing);
}
.ac-btn:hover { transform: none; }
/* Refined link underline */
.ac-link {
font-size: 14px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 500;
border-bottom: 1px solid var(--terracotta-primary);
color: var(--terracotta-primary);
padding-bottom: 4px;
}
.ac-link:hover { color: var(--terracotta-deep); border-bottom-color: var(--terracotta-deep); }
/* ============================================================
19 · FAQ PAGE — bigger serif, more breath
============================================================ */
.ac-faq { border-top: 1px solid var(--lx-hair); margin-top: 64px; }
.ac-faq__item { border-bottom: 1px solid var(--lx-hair); }
.ac-faq__q {
padding: 40px 0;
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 400;
letter-spacing: -0.012em;
line-height: 1.3;
color: var(--navy-deep);
transition: color var(--dur-base) var(--easing);
}
.ac-faq__q:hover { color: var(--terracotta-primary); }
.ac-faq__q[aria-expanded="true"] { color: var(--terracotta-primary); }
.ac-faq__sign {
font-family: var(--font-serif-display);
font-style: italic;
font-weight: 300;
font-size: 32px;
color: var(--terracotta-primary);
}
.ac-faq__a {
padding: 0 0 48px;
max-width: 680px;
}
.ac-faq__a p {
font-size: 17px;
line-height: 1.75;
color: var(--gray-700);
margin: 0 0 18px;
}
/* FAQ page H1 + sub */
[data-screen-label="FAQ title"] h1 {
font-size: clamp(56px, 8vw, 120px) !important;
font-weight: 300;
line-height: 1.02;
letter-spacing: -0.028em;
max-width: 18ch;
}
[data-screen-label="FAQ title"] .ac-agenda__sub {
font-family: var(--font-serif-display);
font-style: italic;
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.5;
color: var(--gray-700);
margin-top: 28px;
max-width: 580px;
}
/* ============================================================
20 · TRABAJACONMIGO · HERO + AGENDA polish
============================================================ */
.tcm-hero { min-height: 92vh; background: var(--cream-base); }
.tcm-hero__h1 {
font-size: clamp(46px, 6.4vw, 100px);
font-weight: 300;
letter-spacing: -0.026em;
line-height: 1.0;
}
.tcm-hero__h1-accent {
color: var(--terracotta-primary);
font-weight: 400;
}
.tcm-hero__eyebrow {
color: var(--terracotta-primary);
letter-spacing: var(--lx-eyebrow-tracking);
font-size: 11.5px;
margin-bottom: 36px;
}
.tcm-hero__sub {
font-family: var(--font-sans);
font-size: clamp(18px, 1.4vw, 22px);
font-weight: 400;
line-height: 1.55;
color: var(--navy-deep);
margin-top: 32px;
}
.tcm-hero__positioning {
font-size: 15.5px;
line-height: 1.7;
margin-top: 28px;
color: var(--gray-700);
}
.tcm-hero__positioning em {
font-family: var(--font-serif-display);
font-style: italic;
color: var(--terracotta-primary);
}
.tcm-hero__photo {
position: relative;
}
.tcm-hero__photo::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, transparent 60%, rgba(20,22,26,0.18)),
var(--lx-grain-warm);
opacity: 0.6;
mix-blend-mode: multiply;
pointer-events: none;
}
.tcm-btn--rust { background: var(--terracotta-primary); }
.tcm-btn--rust:hover { background: var(--terracotta-deep); transform: none; }
/* ============================================================
21 · WHATSAPP FAB — refined shadow
============================================================ */
.ac-fab {
width: 60px; height: 60px;
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.28), 0 2px 6px rgba(0, 0, 0, 0.10);
}
.ac-fab:hover { transform: translateY(-3px); }
/* ============================================================
22 · FOOTER — refined
============================================================ */
.ac-footer { background: var(--cream-base); border-top: 1px solid var(--lx-hair); }
.ac-footer__inner { padding-block: 96px; gap: 80px; }
.ac-footer__about {
font-size: 14.5px;
line-height: 1.7;
color: var(--gray-500);
margin-top: 32px;
}
.ac-footer__eyebrow {
color: var(--terracotta-primary);
font-size: 11.5px;
letter-spacing: var(--lx-eyebrow-tracking);
margin-bottom: 24px;
}
.ac-footer ul { gap: 14px; }
.ac-footer li a {
font-size: 14.5px;
color: var(--navy-deep);
}
.ac-footer__copyright .ac-page {
font-size: 12.5px;
letter-spacing: 0.06em;
color: var(--gray-500);
}
/* ============================================================
23 · CARDS / TILES (booking, etc) — refine
============================================================ */
.ac-tile {
background: var(--cream-base);
border: 1px solid var(--lx-hair);
padding: 28px 28px;
transition: border-color var(--dur-base) var(--easing), background-color var(--dur-base) var(--easing);
}
.ac-tile:hover { border-color: var(--terracotta-primary); }
.ac-tile.is-selected {
border-color: var(--terracotta-primary);
background: var(--peach-whisper);
border-width: 1px;
padding: 28px 28px;
}
.ac-tile__title {
font-size: 22px;
font-weight: 400;
letter-spacing: -0.005em;
}
.ac-tile__sub { font-size: 13.5px; }
.ac-tile__mark {
font-family: var(--font-serif-display);
font-style: italic;
font-size: 13px;
letter-spacing: 0.02em;
text-transform: none;
color: var(--terracotta-primary);
}
/* ============================================================
24 · TYPE — global serif refinements
============================================================ */
h1, h2, h3, .t-h1, .t-h2, .t-h3, .t-display {
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "dlig" 1;
}
.t-eyebrow { letter-spacing: var(--lx-eyebrow-tracking); font-size: 11.5px; }
/* ============================================================
25 · UTILITIES
============================================================ */
.lx-rule {
border: 0;
height: 1px;
background: var(--lx-hair);
width: 56px;
margin: 0;
}
.lx-rule--center { margin-inline: auto; }
.lx-rule--gold { background: var(--gold-soft); }
.lx-rule--terra { background: var(--terracotta-primary); }