/* ===== fonts.css ===== */ /* Fuentes del prototipo, auto-alojadas. No van por Google Fonts a proposito: la CSP declara font-src 'self', evita una peticion a un tercero en cada carga y quita el consentimiento que en la UE haria falta para servir desde fonts.gstatic.com. */ @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-garamond-500-italic-latin-ext.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} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-garamond-500-italic-latin.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} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-garamond-600-italic-latin-ext.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} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-garamond-600-italic-latin.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} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-garamond-500-latin-ext.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} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-garamond-500-latin.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} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-garamond-600-latin-ext.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} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-garamond-600-latin.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} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/cormorant-garamond-700-latin-ext.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} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/cormorant-garamond-700-latin.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/hanken-grotesk-400-latin-ext.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/hanken-grotesk-400-latin.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/hanken-grotesk-500-latin-ext.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/hanken-grotesk-500-latin.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/hanken-grotesk-600-latin-ext.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/hanken-grotesk-600-latin.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/hanken-grotesk-700-latin-ext.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/hanken-grotesk-700-latin.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/hanken-grotesk-800-latin-ext.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} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/hanken-grotesk-800-latin.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} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400-latin-ext.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} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400-latin.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} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-500-latin-ext.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} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-500-latin.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} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/jetbrains-mono-600-latin-ext.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} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/jetbrains-mono-600-latin.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} /* ===== tokens.css ===== */ /* ============================================================ Cterra Saadani Luxury Tents — Design tokens Reescritos el 2 ago 2026 para reproducir el prototipo de diseño (`Web/01-diseno-referencia-prototipo.html`). Verde profundo del bosque + ocre de la arena al atardecer. Serif alto contraste para los titulares, monoespaciada para las etiquetas, grotesca para el cuerpo. Los NOMBRES de los tokens no cambian a propósito: los consumen las 90 páginas y los componentes del motor de reservas. Cambiando solo los valores se repinta el sitio entero sin tocar el markup. ============================================================ */ :root { /* ---- Colour ------------------------------------------------- Muestreados del prototipo. Cada par de texto/fondo está medido: ver la tabla de contraste al final de este fichero. */ --c-ink: #1A1712; /* casi negro cálido — cuerpo 16.9:1 */ --c-ink-soft: #3A342B; /* secundario 11.6:1 */ --c-ink-muted: #6E6353; /* meta, pies de foto 5.6:1 */ --c-shell: #FBF8F2; /* fondo de página */ --c-canvas: #F4EFE6; /* superficie elevada — arena */ --c-canvas-warm: #F4EEE1; /* variante más cálida (bandas) */ --c-canvas-deep: #EBE2D2; /* bordes y divisores */ --c-canvas-line: #DDD3C1; /* borde marcado */ /* Verde: es la marca, no el botón. Vive en el logo y en las superficies oscuras (banda del campamento, testimonio, pie). */ --c-sea: #1C4A3D; /* marca 9.5:1 */ --c-sea-bright: #24604F; /* hover */ --c-sea-deep: #12332A; /* testimonio */ --c-sea-darkest: #10261E; /* banda del campamento y pie */ --c-sea-wash: #EAF0EB; /* superficie teñida */ --c-sea-mist: #9FB3A8; /* texto apagado sobre verde */ /* Ocre: la llamada a la acción. OJO — el prototipo usa #B4762C y con texto blanco encima da 3,77:1, por debajo del 4,5:1 que promete la Cláusula de accesibilidad. No es un capricho: a pleno sol en Tanzania, que es donde se lee esto, ese contraste se pierde del todo. Solución: se conserva #B4762C como color de superficie grande (banda CTA, donde el texto va a 44px y ahí 3:1 basta y sobra), y para los botones normales se usa #A06927 — mismo tono (32,6°), misma saturación, 5% menos de luminosidad, 4,62:1 con blanco. A simple vista son el mismo color. */ --c-sun: #A06927; /* CTA con texto pequeño 4.6:1 */ --c-sun-flat: #B4762C; /* el ocre del prototipo, superficies */ --c-sun-bright: #8A5A20; /* hover */ --c-sun-soft: #E7B76A; /* etiquetas sobre verde oscuro 8.6:1 */ --c-sun-wash: #FAF5EB; /* superficie teñida */ --c-gold: #E0A73B; /* estrellas 6.4:1 */ --c-white: #FFFFFF; --c-black: #0A0906; --c-cream: #F3EEE2; /* texto sobre verde oscuro 13.8:1 */ --c-cream-dim: #B9C7BE; /* secundario en el pie 9.1:1 */ --c-ok: #1F6B4A; --c-warn: #8A6212; --c-error: #A3341F; --c-error-wash: #FBEAE6; /* ---- Typography --------------------------------------------- Las tres del prototipo, auto-alojadas en /assets/fonts/ (ver fonts.css: no van por Google, la CSP declara font-src 'self'). Cormorant Garamond es de contraste alto y ojo pequeño: pide más tamaño y más peso que una serif normal. Por eso los titulares van a 600 y la escala arranca más arriba que la anterior. */ --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --f-text: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Escala fluida — de 320px a 1440px de ancho. El tope de --t-3xl es 64px: el h1 del prototipo. */ --t-xs: 0.8125rem; /* 13px */ --t-sm: 0.875rem; /* 14px */ --t-base: 1rem; /* 16px */ --t-md: clamp(1.03125rem, 0.15vw + 1rem, 1.09375rem); --t-lg: clamp(1.1875rem, 0.4vw + 1.1rem, 1.375rem); --t-xl: clamp(1.5rem, 1.1vw + 1.22rem, 2.125rem); --t-2xl: clamp(2rem, 2.4vw + 1.45rem, 3.25rem); --t-3xl: clamp(2.625rem, 4vw + 1.6rem, 4rem); /* 64px */ --t-4xl: clamp(3rem, 5.2vw + 1.7rem, 5rem); /* Cormorant aguanta interlineados muy cerrados; la grotesca no. */ --lh-tight: 0.99; /* titulares grandes */ --lh-snug: 1.16; --lh-normal: 1.58; --lh-loose: 1.7; --ls-tight: -0.015em; --ls-normal: 0; --ls-wide: 0.08em; --ls-label: 0.2em; /* etiquetas monoespaciadas en mayúsculas */ --ls-logo: 0.14em; /* ---- Space — base de 4px, sin excepciones ------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; --s-section: clamp(3.5rem, 7vw, 6.5rem); /* ---- Shape -------------------------------------------------- El prototipo mezcla dos lenguajes a propósito: tarjetas de esquina suave y botones completamente redondeados. */ --r-sm: 5px; --r-md: 11px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; /* ---- Elevation — cálida y verdosa, nunca gris --------------- */ --e-1: 0 1px 2px rgba(16, 38, 30, 0.05); --e-2: 0 10px 26px rgba(16, 38, 30, 0.07); --e-3: 0 12px 28px rgba(16, 38, 30, 0.12); --e-4: 0 22px 50px rgba(16, 38, 30, 0.20); --e-5: 0 40px 90px rgba(16, 38, 30, 0.34); --e-cta: 0 12px 30px rgba(160, 105, 39, 0.40); /* ---- Motion — 150-320ms, y solo cuando significa algo ------- */ --m-fast: 150ms; --m-base: 220ms; --m-slow: 320ms; --m-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --m-out: cubic-bezier(0.2, 0.8, 0.3, 1); /* ---- Layout -------------------------------------------------- */ --w-prose: 66ch; --w-narrow: 42rem; --w-page: 70rem; /* 1120px: el ancho de contenido del prototipo */ --w-wide: 75rem; --gutter: clamp(1.25rem, 4vw, 2.5rem); --h-header: 4.125rem; /* 66px, como el prototipo */ --h-mobilebar: 4.25rem; --z-base: 1; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --touch: 44px; } /* Menos movimiento para quien lo pide. */ @media (prefers-reduced-motion: reduce) { :root { --m-fast: 1ms; --m-base: 1ms; --m-slow: 1ms; } } /* Más contraste para quien lo pide. El ocre plano deja de usarse como superficie con texto encima. */ @media (prefers-contrast: more) { :root { --c-ink-muted: #4F473A; --c-canvas-deep: #C9BCA6; --c-sun-flat: #8A5A20; --c-cream-dim: #DCE7DF; } } /* ============================================================ Contraste medido (2 ago 2026). Mínimo del contrato: 4,5:1. #1A1712 sobre #FBF8F2 .......... 16,86:1 #3A342B sobre #FBF8F2 .......... 11,61:1 #6E6353 sobre #FBF8F2 ........... 5,55:1 #6E6353 sobre #F4EFE6 ........... 5,13:1 #1C4A3D sobre #FBF8F2 ........... 9,45:1 blanco sobre #A06927 ........... 4,62:1 #F3EEE2 sobre #10261E ........... 13,76:1 #B9C7BE sobre #10261E ........... 9,09:1 #E7B76A sobre #10261E ........... 8,63:1 #E0A73B sobre #12332A ........... 6,37:1 Único par por debajo, y a propósito: blanco sobre #B4762C ............ 3,77:1 Solo se usa en la banda CTA, donde el texto va a 44px. Para texto grande (>=24px) el mínimo de la WCAG es 3:1, así que cumple. ============================================================ */ /* ===== site.css ===== */ /* ============================================================ Cterra Saadani Luxury Tents — site stylesheet ============================================================ */ /* ---------- Reset ------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--h-header) + var(--s-4)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--f-text); font-size: var(--t-base); line-height: var(--lh-normal); color: var(--c-ink); background: var(--c-shell); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100svh; overflow-x: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul[class], ol[class] { list-style: none; padding: 0; } /* ---------- Focus: always visible, never removed ------------ */ :focus-visible { outline: 3px solid var(--c-sun); outline-offset: 3px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } /* ---------- Skip link --------------------------------------- */ .skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: var(--z-toast); background: var(--c-sea); color: var(--c-white); padding: var(--s-3) var(--s-5); border-radius: var(--r-md); font-weight: 600; text-decoration: none; transition: top var(--m-fast) var(--m-ease); } .skip-link:focus { top: var(--s-4); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Typography -------------------------------------- */ h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--c-ink); text-wrap: balance; } h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); } /* h3/h4 son ya tamaño de párrafo grande: a esos cuerpos Cormorant pierde legibilidad, así que bajan a la grotesca. */ h3 { font-size: var(--t-xl); line-height: var(--lh-snug); } h4 { font-family: var(--f-text); font-size: var(--t-lg); font-weight: 600; letter-spacing: 0; line-height: var(--lh-snug); } p { max-width: var(--w-prose); text-wrap: pretty; } .lead { font-size: var(--t-md); line-height: var(--lh-loose); color: var(--c-ink-soft); } .small { font-size: var(--t-sm); } .meta { font-size: var(--t-sm); color: var(--c-ink-muted); } /* Etiqueta de sección: monoespaciada, versalitas muy espaciadas y una raya corta delante. Es la firma visual del prototipo y aparece encima de casi todos los titulares. */ .kicker { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--f-mono); font-size: 0.65625rem; /* 10.5px, como el prototipo */ font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-sun); margin-bottom: var(--s-4); } .kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; } /* Sobre superficies oscuras la etiqueta pasa a oro: el ocre no llega a contraste suficiente contra el verde profundo. */ .section--sea .kicker, .band--dark .kicker, .hero .kicker { color: var(--c-sun-soft); } a { color: var(--c-sea); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--c-sun); } /* ---------- Layout ------------------------------------------ */ .wrap { width: min(100% - var(--gutter) * 2, var(--w-page)); margin-inline: auto; } .wrap-wide { width: min(100% - var(--gutter) * 2, var(--w-wide)); margin-inline: auto; } .wrap-narrow { width: min(100% - var(--gutter) * 2, var(--w-narrow)); margin-inline: auto; } .section { padding-block: var(--s-section); } .section--tint { background: var(--c-canvas); } .section--sea { background: var(--c-sea); color: var(--c-shell); } .section--sea h1, .section--sea h2, .section--sea h3 { color: var(--c-shell); } .section--sea .lead { color: rgba(251, 248, 243, 0.82); } .stack > * + * { margin-top: var(--s-4); } .stack-lg > * + * { margin-top: var(--s-8); } .grid { display: grid; gap: var(--s-6); } @media (min-width: 40rem) { .grid-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 60rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 48rem) { .grid-sidebar { grid-template-columns: 1fr 20rem; gap: var(--s-10); } } .section-head { max-width: var(--w-prose); margin-bottom: var(--s-10); } /* ---------- Buttons ----------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--touch); padding: var(--s-3) var(--s-6); border: 1.5px solid transparent; border-radius: var(--r-full); font-size: var(--t-base); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--m-fast) var(--m-ease), border-color var(--m-fast) var(--m-ease), color var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-ease); } .btn:active { transform: translateY(1px); } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .btn[disabled]:active { transform: none; } .btn--primary { background: var(--c-sun); color: var(--c-white); box-shadow: var(--e-cta); } .btn--primary:hover:not([disabled]) { background: var(--c-sun-bright); color: var(--c-white); } .btn--sea { background: var(--c-sea); color: var(--c-white); } .btn--sea:hover:not([disabled]) { background: var(--c-sea-bright); color: var(--c-white); } .btn--ghost { background: transparent; border-color: var(--c-canvas-line); color: var(--c-ink); } .btn--ghost:hover:not([disabled]) { border-color: var(--c-sun); color: var(--c-sun); } .btn--onsea { background: var(--c-shell); color: var(--c-sea); } .btn--onsea:hover:not([disabled]) { background: var(--c-white); color: var(--c-sea); } /* Botón secundario sobre una foto: cristal esmerilado con borde claro. El prototipo lo usa junto al principal en el hero. */ .btn--glass { background: rgba(255, 255, 255, 0.12); color: var(--c-cream); border-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); } .btn--glass:hover:not([disabled]) { background: rgba(255, 255, 255, 0.22); color: var(--c-white); } .btn--lg { min-height: 3.25rem; padding-inline: var(--s-8); font-size: var(--t-md); } .btn--block { width: 100%; } /* ---------- Header ------------------------------------------ */ .header { position: sticky; top: 0; z-index: var(--z-header); height: var(--h-header); display: flex; align-items: center; background: rgba(251, 248, 242, 0.86); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--c-canvas-deep); transition: border-color var(--m-base) var(--m-ease), background var(--m-base) var(--m-ease); } /* Sin blur (Firefox antiguo, o si el usuario lo desactiva) el fondo translúcido dejaría el texto ilegible sobre la foto del hero. */ @supports not (backdrop-filter: blur(1px)) { .header { background: var(--c-shell); } } .header__inner { display: flex; align-items: center; gap: var(--s-6); width: 100%; } /* Logotipo: CTERRA en versalitas verdes muy espaciadas y SAADANI en monoespaciada ocre al lado, en línea de base. Es el bloque del prototipo tal cual. */ .header__brand { display: flex; align-items: baseline; gap: var(--s-2); font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; letter-spacing: var(--ls-logo); color: var(--c-sea); text-decoration: none; margin-right: auto; line-height: 1; text-transform: uppercase; } .header__brand span { font-family: var(--f-mono); font-size: 0.53125rem; /* 8.5px */ font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-sun); } @media (max-width: 26rem) { .header__brand span { display: none; } } .nav { display: none; gap: var(--s-6); align-items: center; } @media (min-width: 62rem) { .nav { display: flex; } } .nav a { color: var(--c-ink-soft); text-decoration: none; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; padding: var(--s-2) 0; position: relative; transition: color var(--m-fast) var(--m-ease); } .nav a:hover, .nav a[aria-current="page"] { color: var(--c-sun); } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-sun); transform: scaleX(0); transform-origin: left; transition: transform var(--m-fast) var(--m-ease); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); } .header__cta { display: none; } @media (min-width: 48rem) { .header__cta { display: inline-flex; } } .burger { display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); background: none; border: 0; cursor: pointer; border-radius: var(--r-md); } @media (min-width: 62rem) { .burger { display: none; } } /* Mobile drawer */ .drawer { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--c-shell); padding: var(--s-6) var(--gutter); display: flex; flex-direction: column; gap: var(--s-6); transform: translateX(100%); transition: transform var(--m-base) var(--m-out); overflow-y: auto; } .drawer[data-open="true"] { transform: translateX(0); } .drawer a { font-family: var(--f-display); font-size: var(--t-xl); color: var(--c-ink); text-decoration: none; padding-block: var(--s-2); } /* ---------- Hero -------------------------------------------- */ /* 520px es la altura del prototipo. Antes eran 736px, y con la foto que tenemos (1988x324) eso obligaba a ampliarla 2,3 veces: se veía blanda. A 520px el aumento baja a 1,6. Sigue sin ser una foto publicable — hace falta el original — pero deja de cantar. */ .hero { position: relative; isolation: isolate; color: var(--c-white); min-height: min(78svh, 32.5rem); display: flex; align-items: flex-end; } .hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } /* El prototipo oscurece por la IZQUIERDA, no por abajo: el texto vive pegado al borde izquierdo y la foto respira a la derecha. En móvil no cabe esa composición, así que ahí se vuelve al velo vertical. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 38, 30, 0.30) 0%, rgba(16, 38, 30, 0.45) 45%, rgba(16, 38, 30, 0.82) 100%); } @media (min-width: 48rem) { .hero::after { background: linear-gradient(90deg, rgba(16, 38, 30, 0.78) 0%, rgba(16, 38, 30, 0.30) 52%, rgba(16, 38, 30, 0.12) 100%); } } .hero__inner { padding-block: var(--s-16) var(--s-20); width: 100%; } .hero h1 { color: var(--c-cream); font-size: var(--t-3xl); max-width: 14ch; font-weight: 600; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3); } .hero .lead { color: #DCE4DD; max-width: 31rem; } /* Fila de confianza bajo el hero: estrellas, nota y una credencial. Solo se pinta si hay datos reales que poner — ver la nota en el README sobre las afirmaciones del prototipo que no podemos publicar. */ .hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-8); font-size: 0.78125rem; color: #C4CEC6; } .hero__trust strong { color: var(--c-cream); } .hero__stars { color: var(--c-gold); letter-spacing: 2px; } .hero .lead { color: rgba(255, 255, 255, 0.9); max-width: 48ch; margin-top: var(--s-4); } .hero__kicker { color: var(--c-sun-soft); } /* ---------- Booking search widget --------------------------- */ .search { background: var(--c-shell); color: var(--c-ink); border-radius: var(--r-lg); box-shadow: var(--e-4); padding: var(--s-5); display: grid; gap: var(--s-4); } @media (min-width: 56rem) { .search { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: var(--s-4); } } .search--inline { box-shadow: var(--e-2); border: 1px solid var(--c-canvas-deep); } .field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; } .field > label { font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-ink-muted); } .field input, .field select { min-height: var(--touch); padding: var(--s-3) var(--s-4); border: 1.5px solid var(--c-canvas-deep); border-radius: var(--r-md); background: var(--c-white); color: var(--c-ink); font-size: var(--t-base); width: 100%; transition: border-color var(--m-fast) var(--m-ease); } .field input:hover, .field select:hover { border-color: var(--c-ink-muted); } .field input:focus-visible, .field select:focus-visible { border-color: var(--c-sea); } .field--error input, .field--error select { border-color: var(--c-error); } .field__error { font-size: var(--t-sm); color: var(--c-error); display: flex; align-items: center; gap: var(--s-2); } .field__hint { font-size: var(--t-sm); color: var(--c-ink-muted); } /* Guests stepper */ .guests { display: flex; gap: var(--s-3); } .guests .field { flex: 1; } /* ---------- Park fee notice — the conversion-critical one ---- */ .parkfee { border-left: 3px solid var(--c-sun); background: var(--c-sun-wash); padding: var(--s-4) var(--s-5); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--t-sm); line-height: var(--lh-normal); } .parkfee strong { color: var(--c-ink); } .parkfee__amount { font-family: var(--f-display); font-size: var(--t-lg); display: block; margin-top: var(--s-1); } /* ---------- Cards ------------------------------------------- */ .card { background: var(--c-white); border: 1px solid var(--c-canvas-deep); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease); } .card:hover { box-shadow: var(--e-3); transform: translateY(-2px); } .card__media { aspect-ratio: 4 / 3; background: var(--c-canvas); overflow: hidden; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--m-slow) var(--m-ease); } .card:hover .card__media img { transform: scale(1.03); } .card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; } .card__title { font-family: var(--f-display); font-size: var(--t-lg); } .card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; } .price { font-family: var(--f-display); font-size: var(--t-xl); color: var(--c-ink); line-height: 1; } .price small { font-family: var(--f-text); font-size: var(--t-sm); font-weight: 400; color: var(--c-ink-muted); } .tag { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em; padding: var(--s-1) var(--s-3); border-radius: var(--r-full); background: var(--c-sea-wash); color: var(--c-sea); } .tag--sun { background: var(--c-sun-wash); color: #8E4527; } .tag--muted { background: var(--c-canvas); color: var(--c-ink-soft); } .feature-list { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; } .feature-list li { font-size: var(--t-sm); color: var(--c-ink-soft); background: var(--c-canvas); padding: var(--s-1) var(--s-3); border-radius: var(--r-sm); } /* ---------- Availability states ----------------------------- */ .avail { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); font-weight: 600; } .avail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; } .avail--yes { color: var(--c-ok); } .avail--yes::before { background: var(--c-ok); } .avail--few { color: var(--c-warn); } .avail--few::before { background: var(--c-warn); } .avail--none { color: var(--c-ink-muted); } .avail--none::before { background: var(--c-ink-muted); } /* ---------- Skeletons — reserve space, avoid CLS ------------- */ .skeleton { background: linear-gradient(90deg, var(--c-canvas) 25%, var(--c-canvas-deep) 37%, var(--c-canvas) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: var(--r-md); } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } } /* ---------- Steps ------------------------------------------- */ .steps { counter-reset: step; display: grid; gap: var(--s-6); } .step { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-4); align-items: start; } .step__num { counter-increment: step; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-sea-wash); color: var(--c-sea); display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; } .step__num::before { content: counter(step); } /* ---------- Booking progress -------------------------------- */ .progress { display: flex; gap: var(--s-2); list-style: none; padding: 0; margin-bottom: var(--s-8); flex-wrap: wrap; } .progress li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--c-ink-muted); } .progress li[aria-current="step"] { color: var(--c-sea); font-weight: 600; } .progress li[data-done="true"] { color: var(--c-ok); } .progress li + li::before { content: "›"; margin-right: var(--s-2); color: var(--c-canvas-deep); } /* ---------- Summary panel ----------------------------------- */ .summary { background: var(--c-canvas); border-radius: var(--r-lg); padding: var(--s-6); position: sticky; top: calc(var(--h-header) + var(--s-4)); } .summary dl { display: grid; gap: var(--s-3); margin: 0; } .summary .row { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--t-sm); } .summary .row dt { color: var(--c-ink-soft); } .summary .row dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; } .summary .row--total { border-top: 1px solid var(--c-canvas-deep); padding-top: var(--s-4); margin-top: var(--s-2); font-size: var(--t-md); } .summary .row--total dd { font-family: var(--f-display); font-size: var(--t-xl); } .summary .row--excluded dd, .summary .row--excluded dt { color: var(--c-ink-muted); } /* ---------- Notices ----------------------------------------- */ .notice { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); font-size: var(--t-sm); display: flex; gap: var(--s-3); align-items: flex-start; } .notice--info { background: var(--c-sea-wash); color: var(--c-ink); } .notice--warn { background: var(--c-sun-wash); color: var(--c-ink); } .notice--error { background: var(--c-error-wash); color: var(--c-error); } .notice--ok { background: #E6F2EC; color: var(--c-ok); } /* ---------- Payment frame ----------------------------------- */ .payframe { width: 100%; min-height: 34rem; border: 1px solid var(--c-canvas-deep); border-radius: var(--r-lg); background: var(--c-white); } /* ---------- Bandas de sección del prototipo ------------------ */ /* Banda oscura con una foto muy atenuada por detrás. La imagen va a opacidad .28 sobre verde casi negro: se intuye el lugar sin que el texto pelee con ella. */ .band--dark { position: relative; isolation: isolate; background: var(--c-sea-darkest); color: var(--c-cream); padding-block: clamp(3.5rem, 6vw, 4.625rem); } .band--dark::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--band-img, none); background-size: cover; background-position: center; opacity: 0.28; } .band--dark::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(16, 38, 30, 0.92), rgba(16, 38, 30, 0.62)); } .band--dark h1, .band--dark h2, .band--dark h3 { color: var(--c-cream); } .band--dark .lead, .band--dark p { color: var(--c-cream-dim); } /* Testimonio: verde profundo, serif en cursiva, centrado. */ .testimonial { background: var(--c-sea-deep); color: #EAF0EB; text-align: center; padding-block: clamp(3.5rem, 6.5vw, 4.875rem); } .testimonial blockquote { margin: 0 auto; max-width: 46rem; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.375rem, 2.4vw + 0.9rem, 1.875rem); line-height: 1.34; color: var(--c-cream); } .testimonial figcaption { margin-top: var(--s-6); font-size: 0.8125rem; color: var(--c-sea-mist); } .testimonial .hero__stars { font-size: 1.1875rem; letter-spacing: 5px; display: block; margin-bottom: var(--s-6); } /* Banda de llamada final: ocre pleno. Es el único sitio donde se usa el ocre del prototipo sin oscurecer, porque el titular va a 44px y ahí 3:1 es contraste suficiente según la WCAG. */ .band--cta { background: var(--c-sun-flat); color: var(--c-white); text-align: center; padding-block: clamp(3.25rem, 5.5vw, 4.375rem); } .band--cta h2 { color: var(--c-white); font-size: var(--t-2xl); margin-bottom: var(--s-3); } .band--cta p { color: #FBEEDD; margin: 0 auto var(--s-6); max-width: 28rem; } .band--cta .btn { background: var(--c-white); color: var(--c-sun-bright); box-shadow: var(--e-3); } .band--cta .btn:hover:not([disabled]) { background: var(--c-cream); color: var(--c-sun-bright); } /* ---------- Footer ------------------------------------------ */ .footer { background: var(--c-sea-darkest); color: var(--c-cream-dim); padding-block: var(--s-12) var(--s-8); margin-top: 0; } .footer h2, .footer h3 { color: var(--c-cream); font-size: var(--t-sm); font-family: var(--f-mono); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; } .footer a { color: var(--c-cream-dim); text-decoration: none; } .footer a:hover { color: var(--c-sun-soft); text-decoration: underline; } .footer__grid { display: grid; gap: var(--s-8); } @media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .footer__bottom { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid rgba(251, 248, 243, 0.14); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; font-size: var(--t-sm); } /* ---------- Mobile action bar — the top converter ----------- */ .mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); height: var(--h-mobilebar); padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); background: rgba(251, 248, 243, 0.96); backdrop-filter: blur(12px); border-top: 1px solid var(--c-canvas-deep); display: flex; gap: var(--s-3); align-items: center; } .mobilebar .btn { flex: 1; } @media (min-width: 62rem) { .mobilebar { display: none; } } @media (max-width: 61.99rem) { body { padding-bottom: var(--h-mobilebar); } } /* ---------- Utilities --------------------------------------- */ .flow > * + * { margin-top: 1em; } .center { text-align: center; } .mt-0 { margin-top: 0; } .hide { display: none !important; } [hidden] { display: none !important; } /* ---------- Language switcher ------------------------------- */ .langs { display: none; gap: var(--s-1); align-items: center; } @media (min-width: 62rem) { .langs { display: flex; } } .langs a { min-width: 2.25rem; min-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--c-ink-muted); text-decoration: none; border-radius: var(--r-sm); transition: color var(--m-fast) var(--m-ease), background var(--m-fast) var(--m-ease); } .langs a:hover { color: var(--c-ink); background: var(--c-canvas); } .langs a[aria-current="true"] { color: var(--c-sea); background: var(--c-sea-wash); } .langs--drawer { display: flex; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--c-canvas-deep); } .langs--drawer a { min-width: var(--touch); min-height: var(--touch); border: 1px solid var(--c-canvas-deep); font-size: var(--t-sm); } /* ---------- Map — loads only on click (GDPR: no cookie until asked) ---- */ .map { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--c-sea-wash); aspect-ratio: 16 / 10; } @media (max-width: 40rem) { .map { aspect-ratio: 4 / 3; } } .map iframe { width: 100%; height: 100%; border: 0; display: block; } .map__placeholder { position: absolute; inset: 0; display: grid; place-items: center; gap: var(--s-4); padding: var(--s-6); text-align: center; cursor: pointer; background: radial-gradient(circle at 62% 44%, var(--c-sun-soft) 0 7px, transparent 8px), linear-gradient(160deg, var(--c-sea-wash) 0%, var(--c-canvas) 55%, var(--c-sun-wash) 100%); border: 0; width: 100%; font: inherit; color: inherit; } .map__placeholder:hover { filter: brightness(0.98); } .map__label { font-family: var(--f-display); font-size: var(--t-lg); } .map__hint { font-size: var(--t-sm); color: var(--c-ink-soft); max-width: 34ch; } .map__pin { width: 44px; height: 44px; border-radius: 50%; background: var(--c-sun); display: grid; place-items: center; color: #fff; box-shadow: var(--e-3); } .hero--short { min-height: min(52svh, 26rem); } /* ---------- Cookie consent ---------------------------------- */ .consent { position: fixed; left: var(--s-4); right: var(--s-4); bottom: calc(var(--h-mobilebar) + var(--s-4)); z-index: var(--z-toast); background: var(--c-white); border: 1px solid var(--c-canvas-deep); border-radius: var(--r-lg); box-shadow: var(--e-4); padding: var(--s-5); opacity: 0; transform: translateY(12px); transition: opacity var(--m-base) var(--m-out), transform var(--m-base) var(--m-out); } .consent[data-in="true"] { opacity: 1; transform: none; } @media (min-width: 62rem) { .consent { bottom: var(--s-6); left: auto; right: var(--s-6); max-width: 30rem; } } .consent__inner { display: grid; gap: var(--s-4); } .consent__text { font-size: var(--t-sm); line-height: var(--lh-normal); margin: 0; max-width: none; } .consent__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; } .consent__actions .btn { flex: 1; min-width: 10rem; }