/* * Jirafas - CSS Stylesheet V2 - Ruta 6 (Outfit + Lora) */ /* ========================================================================== TIPOGRAFÍAS AUTOALOJADAS (2026-07-16) -------------------------------------------------------------------------- Antes se pedían a Google (2 en el + 1 @import aquí = 3 peticiones a fonts.googleapis.com para las mismas familias). Ahora se sirven desde jirafas.es: · Ningún tercero recibe la IP de quien visita la web (ver política de privacidad: desaparece la transferencia internacional por Google Fonts). · Sin @import: no bloquea el render. · Una conexión menos (sin DNS ni handshake a otro dominio). Mismas familias y pesos que servía Google, así que NO cambia el diseño. Solo subsets latin y latin-ext (castellano); fuera cirílico, griego, vietnamita, math y símbolos, que no se usaban. Archivos en assets/fonts/. Para añadir un peso nuevo hay que añadir aquí su @font-face y su .woff2 — ya no basta con tocar la URL de Google. ========================================================================== */ /* Lora 400 italic · latin-ext */ @font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/lora-400-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; } /* Lora 400 italic · latin */ @font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/lora-400-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; } /* Lora 500 italic · latin-ext */ @font-face { font-family: 'Lora'; font-style: italic; font-weight: 500; font-display: swap; src: url('../assets/fonts/lora-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; } /* Lora 500 italic · latin */ @font-face { font-family: 'Lora'; font-style: italic; font-weight: 500; font-display: swap; src: url('../assets/fonts/lora-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; } /* Lora 400 normal · latin-ext */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/lora-400-normal-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; } /* Lora 400 normal · latin */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/lora-400-normal-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; } /* Lora 500 normal · latin-ext */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/lora-500-normal-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; } /* Lora 500 normal · latin */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/lora-500-normal-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; } /* Lora 600 normal · latin-ext */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/lora-600-normal-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; } /* Lora 600 normal · latin */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/lora-600-normal-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; } /* Lora 700 normal · latin-ext */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/lora-700-normal-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; } /* Lora 700 normal · latin */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/lora-700-normal-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; } /* Oswald 600 normal · latin-ext */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/oswald-600-normal-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; } /* Oswald 600 normal · latin */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/oswald-600-normal-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; } /* Outfit 300 normal · latin-ext */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url('../assets/fonts/outfit-300-normal-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; } /* Outfit 300 normal · latin */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url('../assets/fonts/outfit-300-normal-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; } /* Outfit 400 normal · latin-ext */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/outfit-400-normal-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; } /* Outfit 400 normal · latin */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/outfit-400-normal-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; } /* Outfit 500 normal · latin-ext */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/outfit-500-normal-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; } /* Outfit 500 normal · latin */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/outfit-500-normal-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; } /* Outfit 600 normal · latin-ext */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/outfit-600-normal-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; } /* Outfit 600 normal · latin */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/outfit-600-normal-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; } /* Outfit 700 normal · latin-ext */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/outfit-700-normal-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; } /* Outfit 700 normal · latin */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/outfit-700-normal-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; } :root { --bg-primary: #08090d; --bg-secondary: #11131a; --bg-card: rgba(17, 19, 26, 0.7); --accent-gold: #EAA73B; --accent-gold-hover: #F5BD52; --accent-gold-rgb: 234, 167, 59; --text-white: #f3f4f6; --text-muted: #9ca3af; --border-color: rgba(234, 167, 59, 0.12); --border-hover: rgba(234, 167, 59, 0.35); --success-green: #10b981; --font-heading: 'Outfit', sans-serif; --font-body: 'Lora', serif; --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --glass-bg: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.1); --lamp-bg: rgba(234, 167, 59, 0.05); --trust-bg: rgba(255, 255, 255, 0.03); --trust-border: rgba(255, 255, 255, 0.05); --eyebrow-bg: rgba(234, 167, 59, 0.1); --hero-glow: rgba(255, 255, 255, 0.02); /* Mocha Moose — calidez de las "fichas" (guía corporativa) */ --warm-surface: rgba(107, 78, 61, 0.07); --warm-border: rgba(107, 78, 61, 0.18); /* Tokens de consolidación (auditoría 2026-07-14) */ --bg-main: var(--bg-primary); /* antes usada sin definir */ --text-dark: #0B101E; /* texto oscuro para overrides light; antes usada sin definir */ --on-accent: #08090d; /* texto sobre oro: SIEMPRE oscuro, en ambos temas */ --accent-gold-text: var(--accent-gold);/* oro cuando es TEXTO; en light se oscurece para contraste AA */ --transition-colors: 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* para transiciones de propiedad concreta (la var --transition contiene "all" y no puede componerse) */ --field-border: rgba(255, 255, 255, 0.32); /* borde de campos de formulario visible (antes glass-border al 10% ≈ 1,3:1) */ } /* Enlace "Saltar al contenido" (accesibilidad, guía SEO) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--bg-secondary); color: var(--text-white); padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0; } [data-theme="light"] { --bg-primary: #F9F9F8; --bg-secondary: #F5F5F0; --bg-card: rgba(255, 255, 255, 0.9); --text-white: #0B101E; --text-muted: #3A404F; --border-color: rgba(107, 78, 61, 0.15); --border-hover: rgba(107, 78, 61, 0.4); --glass-bg: rgba(0, 0, 0, 0.04); --glass-border: rgba(0, 0, 0, 0.08); --lamp-bg: rgba(234, 167, 59, 0.1); --trust-bg: rgba(0, 0, 0, 0.02); --trust-border: rgba(0, 0, 0, 0.05); --eyebrow-bg: rgba(234, 167, 59, 0.15); --hero-glow: rgba(0, 0, 0, 0.02); --warm-surface: rgba(107, 78, 61, 0.06); --warm-border: rgba(107, 78, 61, 0.16); --accent-gold-text: #925E00; /* oro tostado: 4,9:1 sobre #F9F9F8 (AA texto) */ --field-border: rgba(0, 0, 0, 0.35); } /* Tema claro: el header se mantiene nocturno (marca) y sube su opacidad para garantizar el contraste de los enlaces claros sobre secciones claras */ [data-theme="light"] header { background: rgba(8, 9, 13, 0.88); } /* Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Deja hueco bajo el header fijo (barra superior + menú) en los saltos de ancla, para que ninguna sección quede tapada. (2026-07-15) */ scroll-padding-top: 150px; } body { background-color: var(--bg-primary); color: var(--text-white); font-family: var(--font-body); overflow-x: hidden; line-height: 1.6; transition: background-color var(--transition-colors), color var(--transition-colors); } /* Texto solo para lectores de pantalla (auditoría 2026-07-14) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; transition: background var(--transition-colors); } .section { padding: 8rem 0; border-bottom: 1px solid var(--border-color); } h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; } h2 { font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: 1.15; letter-spacing: -0.02em; } p { color: var(--text-muted); font-weight: 300; } /* Header */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: rgba(8, 9, 13, 0.4); } header > .container { display: flex; justify-content: space-between; align-items: center; height: 90px; } .logo-link { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--text-white); } .logo-text { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 600; font-size: 2.4rem; color: #f3f4f6; /* fijo: el header es nocturno en ambos temas (antes var(--text-white) volvía el logo invisible en claro) */ display: inline-flex; align-items: baseline; gap: 2px; } .brand-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background-color: #EAA73B; } .btn-header { font-family: var(--font-heading); border: 1px solid var(--accent-gold); color: var(--accent-gold) !important; padding: 0.5rem 1.25rem; border-radius: 30px; transition: var(--transition); } .btn-header:hover { background-color: var(--accent-gold); color: var(--on-accent) !important; } .mobile-menu-toggle { display: none; background: none; border: none; color: var(--text-white); cursor: pointer; padding: 0.5rem; } /* Barra superior de utilidad (teléfono) — sobre el menú principal, dentro del header fijo. Franja nocturna en ambos temas, con el teléfono en oro. */ .topbar { background: rgba(6, 7, 10, 0.55); border-bottom: 1px solid rgba(234, 167, 59, 0.14); } .topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 40px; } .topbar__msg { font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--text-muted); } .topbar__phone { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-size: 0.85rem; color: #f3f4f6; text-decoration: none; transition: color 0.3s ease; } .topbar__phone svg { width: 15px; height: 15px; color: var(--accent-gold); } .topbar__phone strong { color: var(--accent-gold); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.04em; } .topbar__phone:hover { color: var(--accent-gold); } /* Aparición al dejar atrás el hero (solo con JS: .is-auto). Sin JS la barra queda visible por defecto para no perder el teléfono. La clase .is-shown la añade el observador cuando el hero de vídeo sale de pantalla. (2026-07-15) */ .topbar.is-auto { max-height: 0; opacity: 0; overflow: hidden; border-bottom-color: transparent; transition: max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, border-bottom-color 0.4s ease; } .topbar.is-auto.is-shown { max-height: 4rem; opacity: 1; border-bottom-color: rgba(234, 167, 59, 0.14); } @media (max-width: 560px) { /* En pantallas muy estrechas, solo el teléfono (centrado y tappable) */ .topbar__msg { display: none; } .topbar__inner { justify-content: center; height: 42px; } } /* VIDEO HERO SECTION (FULL SCREEN) */ .video-hero { position: relative; height: 100vh; height: 100svh; /* viewport pequeño: sin salto al ocultarse la barra del navegador móvil */ min-height: 500px; width: 100%; /* antes 100vw: sumaba el ancho de la barra de scroll en escritorio */ display: flex; justify-content: center; align-items: center; overflow: hidden; } .video-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .video-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(8, 9, 13, 0.35) 0%, rgba(8, 9, 13, 0.88) 100%); z-index: 1; transition: background var(--transition-colors); } .video-hero-content { position: relative; z-index: 2; text-align: center; max-width: 900px; padding: 0 2rem; display: flex; flex-direction: column; align-items: center; } /* Titular del hero: blanco fijo. El póster es el fotograma 1 del vídeo (2026-07-15), así que texto y fondo se comportan igual antes y durante la reproducción — continuidad total, sin doble estado. */ .video-hero-content h1, .video-hero-content .hero-title { font-size: clamp(2.5rem, 6.5vw, 4.8rem); line-height: 1.15; font-family: var(--font-heading); font-weight: 700; /* Outfit necesita más peso para impactar */ letter-spacing: -0.02em; margin-bottom: 2.5rem; color: #f3f4f6; } .video-hero-content h1 span, .video-hero-content .hero-title span { color: var(--accent-gold); } .scroll-indicator { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; /* Fijo claro: vive siempre sobre el hero oscurecido por el overlay, en ambos temas y tamaños (antes var(--text-muted) se apagaba en el tema claro). */ color: rgba(243, 244, 246, 0.72); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; text-decoration: none; transition: var(--transition); } .scroll-indicator:hover { color: var(--accent-gold); } .scroll-mouse { width: 20px; height: 32px; border: 1.5px solid currentColor; border-radius: 12px; position: relative; } .scroll-wheel { width: 3px; height: 6px; background-color: currentColor; border-radius: 2px; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); animation: scrollMouse 1.8s infinite ease-in-out; } @keyframes scrollMouse { 0% { top: 6px; opacity: 1; } 50% { top: 14px; opacity: 0.2; } 100% { top: 6px; opacity: 1; } } .btn-primary { font-family: var(--font-heading); background-color: var(--accent-gold); color: var(--on-accent); text-decoration: none; padding: 1.1rem 2.5rem; border-radius: 40px; font-weight: 600; /* Outfit en botones funciona mejor en Semibold */ font-size: 1.05rem; box-shadow: 0 10px 30px rgba(234, 167, 59, 0.2); transition: var(--transition); border: none; cursor: pointer; letter-spacing: 0.02em; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(234, 167, 59, 0.35); background-color: var(--accent-gold-hover); } /* Service / Concept Section */ /* Jirafas Grid */ .grid-title { text-align: center; margin-bottom: 5rem; } .grid-title h2 { font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1rem; } .jirafa-img-container { position: relative; width: 100%; padding-top: 105%; overflow: hidden; border-bottom: 1px solid var(--border-color); background-color: #0c0d11; } .jirafa-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .jirafa-badge { position: absolute; top: 1.25rem; right: 1.25rem; background: rgba(8, 9, 13, 0.85); border: 1px solid rgba(16, 185, 129, 0.25); padding: 0.4rem 0.8rem; border-radius: 20px; display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-size: 0.85rem; font-weight: 500; backdrop-filter: blur(8px); } .status-dot { width: 6px; height: 6px; background-color: var(--success-green); border-radius: 50%; box-shadow: 0 0 8px var(--success-green); animation: pulseStatus 2s infinite alternate; } @keyframes pulseStatus { 100% { opacity: 0.4; } } .jirafa-content { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; } .jirafa-specialty { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-gold); margin-bottom: 1.25rem; font-weight: 655; } /* Rates Section */ .rate-duration { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-muted); margin-bottom: 0.75rem; } .rate-price { font-family: var(--font-heading); font-size: 3.8rem; font-weight: 700; color: var(--accent-gold); margin-bottom: 1.5rem; } .rate-price span { font-size: 1rem; font-family: var(--font-body); color: var(--text-muted); font-weight: 300; } .rate-features { list-style: none; margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 0.85rem; } .rate-features li { color: var(--text-muted); font-size: 0.98rem; } /* Disclaimer Banner */ .disclaimer-title { font-family: var(--font-heading); font-size: 1.45rem; color: var(--accent-gold); display: flex; align-items: center; gap: 0.75rem; } .disclaimer-text { font-size: 0.95rem; line-height: 1.8; color: var(--text-muted); } /* Footer */ footer { padding: 5rem 0; background-color: #040508; } /* CALL SIMULATOR OVERLAY */ .call-container { width: 100%; max-width: 450px; padding: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; } .call-avatar-wrapper { position: relative; margin-bottom: 2.5rem; } .call-pulsing-ring { position: absolute; top: -12px; left: -12px; right: -12px; bottom: -12px; border: 2px solid rgba(234, 167, 59, 0.3); border-radius: 50%; animation: ringPulse 2.5s infinite ease-out; } .call-pulsing-ring-2 { position: absolute; top: -24px; left: -24px; right: -24px; bottom: -24px; border: 1px solid rgba(234, 167, 59, 0.15); border-radius: 50%; animation: ringPulse 2.5s infinite ease-out 0.8s; } #call-avatar { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent-gold); box-shadow: 0 0 40px rgba(234, 167, 59, 0.2); position: relative; z-index: 2; } @keyframes ringPulse { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } } #call-name { font-size: 2.5rem; margin-bottom: 0.5rem; } #call-profile-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent-gold); margin-bottom: 1.5rem; } #call-status-text { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.5rem; } #call-timer-display { font-size: 2.2rem; font-weight: 500; color: var(--text-white); margin-bottom: 3rem; letter-spacing: 0.05em; } #call-timer-display.calling { animation: blinkText 1s infinite alternate; } @keyframes blinkText { 100% { opacity: 0.4; } } /* Audio Wave Animation */ .audio-wave-container { display: flex; justify-content: center; align-items: center; gap: 6px; height: 60px; margin-bottom: 4rem; opacity: 0; transform: scale(0.9); transition: var(--transition); } .audio-wave-container.active { opacity: 1; transform: scale(1); } .wave-bar { width: 4px; background-color: var(--accent-gold); border-radius: 4px; height: 5px; } .audio-wave-container.active .wave-bar { animation: wavePulse 1.2s infinite ease-in-out; } .audio-wave-container.active .wave-bar:nth-child(2) { height: 10px; animation-delay: 0.1s; } .audio-wave-container.active .wave-bar:nth-child(3) { height: 25px; animation-delay: 0.2s; } .audio-wave-container.active .wave-bar:nth-child(4) { height: 45px; animation-delay: 0.3s; } .audio-wave-container.active .wave-bar:nth-child(5) { height: 35px; animation-delay: 0.4s; } .audio-wave-container.active .wave-bar:nth-child(6) { height: 15px; animation-delay: 0.5s; } .audio-wave-container.active .wave-bar:nth-child(7) { height: 5px; animation-delay: 0.6s; } @keyframes wavePulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(3.5); } } #hang-up-btn { width: 75px; height: 75px; background-color: #ef4444; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: none; cursor: pointer; box-shadow: 0 10px 25px rgba(239, 68, 68, 0.4); transition: var(--transition); } #hang-up-btn:hover { transform: scale(1.08); background-color: #f87171; box-shadow: 0 15px 30px rgba(239, 68, 68, 0.65); } #hang-up-btn svg { width: 30px; height: 30px; fill: #ffffff; } /* FLOATING VERSION SWITCHER */ .switcher-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; padding-left: 0.25rem; } /* Responsive adjustments */ /* Menú móvil unificado a 968px (auditoría 2026-07-14): antes la hamburguesa aparecía solo a ≤768 mientras el nav recibía estilos de panel a ≤968 — entre 769 y 968 px (tablet) no había ni menú horizontal usable ni hamburguesa. */ @media (max-width: 968px) { .mobile-menu-toggle { display: block; } header { position: fixed; /* Mantenemos fixed pero el menú colgará de él */ background: rgba(8, 9, 13, 0.95); } header > .container { flex-direction: row; height: 70px; padding: 0 1.5rem; justify-content: space-between; align-items: center; } nav { position: absolute; top: 100%; /* cuelga del borde real del header, esté o no desplegada la topbar (antes 70px fijos) */ left: 0; width: 100%; background: rgba(8, 9, 13, 0.98); flex-direction: column; align-items: center; gap: 2rem; padding: 3rem 1rem; /* Si el panel no cabe (móviles bajos o apaisados), scroll interno en vez de enlaces inalcanzables (2026-07-20) */ max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; border-bottom: 1px solid var(--border-color); /* Oculto por defecto desplazado hacia arriba */ transform: translateY(-150%); /* visibility saca los 20+ enlaces del orden de tabulación cuando el panel está cerrado (antes solo se desplazaba fuera de pantalla y el foco del teclado entraba en enlaces invisibles) — auditoría 2026-07-14 */ visibility: hidden; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s; z-index: -1; } nav.active { transform: translateY(0); visibility: visible; box-shadow: 0 20px 40px rgba(0,0,0,0.5); } nav a { font-size: 1.2rem; } .btn-header { padding: 0.8rem 2rem; margin-top: 1rem; } } @media (max-width: 768px) { /* Versión móvil del hero (rediseñada 2026-07-20): portada estática con el PRIMER FOTOGRAMA del vídeo oficial (hero-poster.webp) en lugar de hero-movil.webp — la portada clara fundía la línea dorada del claim con la cabeza de la jirafa. Se mantiene el overlay oscuro y el titular blanco/oro de escritorio: mismo contraste antes y después del scroll. El vídeo sigue oculto y sin descargarse (JS). El encuadre 38% centra a la jirafa protagonista en vertical. */ .video-hero { background: url("../assets/img/hero-poster.webp") 38% center / cover no-repeat; } .video-hero-bg { display: none; } .video-hero-content h1, .video-hero-content .hero-title { font-size: clamp(2rem, 8.5vw, 2.6rem); /* cabe a 390px sin desbordar */ text-shadow: 0 2px 26px rgba(8, 9, 13, 0.55); /* red de seguridad sobre las zonas claras del fotograma */ } } /* ========================================================================== PREMIUM UX/UI REDESIGN FOR HERO SECTION (H1) ========================================================================== */ .hero { padding: 6rem 0; position: relative; background: linear-gradient(to bottom, var(--glass-bg) 0%, transparent 100%); /* Recorta el halo ::before (200% de ancho): sin esto, el pseudoelemento ensanchaba el viewport de layout en móvil 1,5× y toda la página podía desplazarse a la derecha con el header estirado. (Adaptación móvil 2026-07-20) */ overflow: hidden; } .hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, var(--hero-glow) 0%, transparent 60%); pointer-events: none; z-index: 0; } .hero__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: center; position: relative; z-index: 1; transition: background var(--transition-colors); } .eyebrow { font-family: var(--font-heading); color: var(--accent-gold-text); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1.5rem; display: inline-block; padding: 0.4rem 1rem; background: var(--eyebrow-bg); border-radius: 50px; border: 1px solid rgba(234, 167, 59, 0.2); } .hero h1 { font-family: var(--font-heading); font-size: clamp(2.5rem, 4vw, 3.8rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-white); margin-bottom: 1.5rem; } .hero__sub { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.8; color: var(--text-muted); margin-bottom: 2.5rem; } .hero__cta { display: flex; flex-wrap: wrap; /* en anchos intermedios los dos CTA saltan de línea en vez de desbordar */ gap: 1.5rem; margin-bottom: 3rem; } .trust { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .trust li { font-family: var(--font-heading); font-size: 0.95rem; color: var(--text-white); display: flex; align-items: center; gap: 0.75rem; background: var(--trust-bg); padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid var(--trust-border); backdrop-filter: blur(10px); transition: transform 0.3s ease, border-color 0.3s ease; } .trust li:hover { transform: translateY(-3px); border-color: rgba(234, 167, 59, 0.4); } .trust li::before { content: ''; display: block; width: 8px; height: 8px; background-color: var(--accent-gold); border-radius: 50%; box-shadow: 0 0 10px var(--accent-gold); } .media-frame { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); border: 1px solid var(--glass-border); } .media-frame img { aspect-ratio: 7/10; object-fit: cover; width: 100%; height: auto; display: block; transition: transform 0.7s ease; } .media-frame:hover img { transform: scale(1.03); } /* --- PREMIUM NAVBAR UX --- */ nav { position: relative; display: flex; align-items: center; gap: 0.25rem; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); padding: 0.35rem; border-radius: 50px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); z-index: 10; } nav a { position: relative; z-index: 2; padding: 0.6rem 1.25rem; border-radius: 50px; font-family: var(--font-heading); color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; transition: color 0.3s ease, background 0.3s ease; } nav a:hover { color: var(--accent-gold); } nav a.active { color: var(--accent-gold); background: var(--lamp-bg); } nav .btn-header { margin-left: 0.5rem; padding: 0.6rem 1.5rem; } /* Nav Lamp Indicator */ .nav-lamp { position: absolute; top: 0; height: 100%; background: var(--lamp-bg); border-radius: 50px; /* Spring-like transition */ transition: left 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1; pointer-events: none; } .lamp-line { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 32px; height: 4px; background-color: var(--accent-gold); border-radius: 4px 4px 0 0; } .lamp-glow { position: absolute; background-color: rgba(234, 167, 59, 0.3); border-radius: 50%; } .lamp-glow-1 { width: 48px; height: 24px; filter: blur(8px); top: -8px; left: -8px; } .lamp-glow-2 { width: 32px; height: 24px; filter: blur(8px); top: -4px; left: 0; } .lamp-glow-3 { width: 16px; height: 16px; filter: blur(4px); top: 0; left: 8px; } @media (max-width: 968px) { nav { /* Reafirma el panel móvil: la regla base "PREMIUM NAVBAR" (nav { position: relative }) va después del bloque de menú móvil de arriba y lo anulaba → el panel quedaba en flujo, encogido por flex, y ensanchaba el header fijo (scroll lateral en móvil). (2026-07-15) */ position: absolute; top: 100%; /* igual que arriba: borde real del header (2026-07-20) */ left: 0; width: 100%; border-radius: 0; padding: 2rem 1rem; background: rgba(8, 9, 13, 0.98); } .nav-lamp { display: none; } } /* Secondary Button (Corporate Brown) */ .btn-secondary { font-family: var(--font-heading); background-color: #6B4E3D; color: #F5F5F0; text-decoration: none; padding: 1.1rem 2.5rem; border-radius: 40px; font-weight: 600; font-size: 1.05rem; box-shadow: 0 10px 30px rgba(107, 78, 61, 0.3); transition: var(--transition); } .btn-secondary:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(107, 78, 61, 0.5); background-color: #553D30; } .hero__sub strong { color: var(--text-white); /* el oro vuelve a ser faro: las negritas de párrafo destacan por peso, no por color (auditoría 2026-07-14) */ font-weight: 600; } .hero__sub a { color: var(--text-white); /* mismo tratamiento que las negritas del hero; el subrayado es lo que lo delata como enlace */ font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .hero__sub a:hover, .hero__sub a:focus-visible { text-decoration-color: var(--accent-gold); text-decoration-thickness: 2px; } /* Sello "Revisado por" — pie de foto del hero (E-E-A-T; texto visible, nunca ocultar por CSS) */ .media-caption { font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.02em; line-height: 1.5; color: var(--text-muted); text-align: center; margin-top: 0.9rem; } .media-caption a { color: var(--text-white); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .media-caption a:hover, .media-caption a:focus-visible { text-decoration-color: var(--accent-gold); text-decoration-thickness: 2px; } /* Hide sun in light mode, moon in dark mode */ [data-theme="light"] .sun-icon { display: none; } [data-theme="light"] .moon-icon { display: block; } :root .moon-icon { display: none; } :root .sun-icon { display: block; } .theme-toggle-floating { position: fixed; top: 165px; /* bajo el header más alto por la barra superior (2026-07-15) */ right: 30px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); color: var(--text-white); cursor: pointer; padding: 0.75rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: var(--transition); z-index: 9999; opacity: 1; pointer-events: auto; transform: none; } .theme-toggle-floating:hover { color: var(--accent-gold); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .theme-toggle-floating svg { width: 20px; height: 20px; } /* ========================================================================== PROBLEMAS / QUÉ ES (STAGGERED GRID) ========================================================================== */ /* PREMIUM SECTION TRANSITION */ #que-es { position: relative; padding: 8rem 0; margin-top: 0; z-index: 2; background: transparent; overflow: hidden; } #que-es::before { content: ""; position: absolute; top: 10%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(234, 167, 59, var(--orb-intensity-1, 0.15)) 0%, transparent 70%); transition: background 0.3s ease-out; filter: blur(80px); z-index: 0; border-radius: 50%; pointer-events: none; } #que-es::after { content: ""; position: absolute; bottom: 0%; right: -10%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(107, 78, 61, var(--orb-intensity-2, 0.2)) 0%, transparent 70%); transition: background 0.3s ease-out; filter: blur(100px); z-index: 0; border-radius: 50%; pointer-events: none; } /* SECTION HEAD */ #que-es .section-head { text-align: center; max-width: 800px; margin: 0 auto 5rem auto; } .section-title { margin-bottom: 4rem; text-align: center; /* todos los H2 de sección centrados (petición 2026-07-14) */ } .manifesto-title { margin-bottom: 4rem; text-align: left; } /* ========================================================================== SISTEMA DE CABECERAS DE SECCIÓN (auditoría 2026-07-14) Antes vivía en 27 estilos inline con 7 variantes de intro y 3 espaciados; las clases .section-head/.lead/.text-center estaban en el HTML pero no existían en el CSS. Separación cabecera→contenido unificada: 5rem aquí (los contenidos ya no llevan margin-top propio). ========================================================================== */ .section-head { margin-bottom: 5rem; text-align: center; /* la cabecera entera acompaña al H2 centrado (eyebrow e intro) */ } .text-center { text-align: center; } .section-head.text-center { display: flex; flex-direction: column; align-items: center; } .section-head.text-center .section-title { text-align: center; } .lead { font-family: var(--font-body); max-width: 700px; margin: 0 auto; color: var(--text-muted); font-size: 1.1rem; line-height: 1.7; } #que-es .section-head p { font-family: var(--font-body); font-size: 1.15rem; color: var(--text-muted); line-height: 1.8; } /* GRID ASYMMETRICAL */ #que-es .grid-3 { display: grid; /* min(100%, 300px): en pantallas de <340px la tarjeta se ajusta al ancho disponible en vez de desbordar (2026-07-20) */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 2rem; counter-reset: problem-counter; } @media (min-width: 992px) { #que-es .grid-3 { grid-template-columns: repeat(3, 1fr); } /* Staggered effect: the middle column is pushed down */ #que-es .card:nth-child(2), #que-es .card:nth-child(5) { transform: translateY(3rem); } } /* DEEP GLASSMORPHISM CARDS */ #que-es .card { position: relative; background: var(--warm-surface); border: 1px solid var(--warm-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 24px; padding: 3rem 2.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); counter-increment: problem-counter; display: flex; flex-direction: column; z-index: 1; } /* Phantom Number using CSS Counter */ #que-es .card::before { content: "0" counter(problem-counter); position: absolute; top: -20px; right: -10px; font-family: var(--font-heading); font-size: 8rem; font-weight: 800; background: linear-gradient(135deg, var(--text-white), var(--accent-gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.05; z-index: -1; transition: all 0.5s ease; } [data-theme="light"] #que-es .card::before { opacity: 0.1; } /* Hover Micro-interaction */ #que-es .card:hover { transform: translateY(-10px); background: var(--trust-bg); border-color: rgba(234, 167, 59, 0.4); box-shadow: 0 20px 40px rgba(0,0,0,0.2), 0 0 20px rgba(234, 167, 59, 0.1); } @media (min-width: 992px) { #que-es .card:nth-child(2):hover, #que-es .card:nth-child(5):hover { transform: translateY(calc(3rem - 10px)); } } #que-es .card:hover::before { color: var(--accent-gold); opacity: 0.1; transform: scale(1.05); } /* Card Typography */ #que-es .card h3 { font-family: var(--font-heading); font-size: 1.5rem; color: var(--text-white); margin-bottom: 1rem; font-weight: 500; /* familia de tarjetas unificada (antes 600: se veía más dura que bento/science/step) */ line-height: 1.3; } #que-es .card p { font-family: var(--font-body); font-size: 1.05rem; color: var(--text-muted); line-height: 1.7; margin: 0; } [data-theme="light"] #que-es .card { border-top: 1px solid rgba(255, 255, 255, 0.6); } /* ========================================================================== GLASS HOLE BUTTON WITH GIRAFFE SKIN PATTERN ========================================================================== */ .glass-hole-btn-wrapper { text-align: center; margin-top: 3rem; margin-bottom: -1rem; position: relative; z-index: 50; } .glass-hole-btn { display: inline-flex; background-color: transparent; border: 2px solid var(--accent-gold); padding: 1.2rem 3.5rem; border-radius: 16px; color: var(--text-white); font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; text-decoration: none; position: relative; overflow: hidden; box-shadow: inset 0 0 30px rgba(234, 167, 59, 0.1), 0 10px 30px rgba(0,0,0,0.5); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="light"] .glass-hole-btn { box-shadow: inset 0 0 30px rgba(234, 167, 59, 0.2), 0 10px 30px rgba(0,0,0,0.1); } .glass-hole-btn::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; background: var(--accent-gold); border-radius: 50%; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), height 0.6s cubic-bezier(0.16, 1, 0.3, 1); z-index: -1; } .glass-hole-btn:hover { color: #08090d; box-shadow: 0 15px 40px rgba(234, 167, 59, 0.4); transform: scale(1.05); border-color: transparent; } .glass-hole-btn:hover::before { width: 600px; height: 600px; } /* MICRO CTAs IN CARDS */ .card-inline-cta { color: var(--accent-gold-text); text-decoration: none; font-weight: 600; display: inline-block; margin-top: 0.5rem; position: relative; transition: color 0.3s ease; } .card-inline-cta::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0%; height: 1px; background: var(--accent-gold); transition: width 0.3s ease; } .card-inline-cta:hover { color: var(--accent-gold-hover); } .card-inline-cta:hover::after { width: 100%; } /* HIGHLIGHTS EN TEXTO */ .section-head p strong { color: var(--text-white); /* ídem: peso sí, oro no */ font-weight: 600; } /* ========================================================================== MANIFESTO SECTION (DOs AND DONTs) ========================================================================== */ .section-manifesto { padding: 8rem 0; /* ritmo unificado (antes 10rem) */ position: relative; background: transparent; } /* Light mode adjustments */ [data-theme="light"] .section-manifesto { border-top: 1px solid rgba(0, 0, 0, 0.05); } .manifesto-grid { display: grid; grid-template-columns: 1fr; max-width: 1100px; margin: 0 auto; position: relative; } @media (min-width: 992px) { .manifesto-grid { grid-template-columns: 1fr 1fr; } /* The extremely thin dividing line */ .manifesto-grid::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(to bottom, transparent, rgba(234, 167, 59, 0.15), transparent); } } .manifesto-col { padding: 3rem 2rem; } @media (min-width: 992px) { .manifesto-yes { padding-right: 5rem; } .manifesto-no { padding-left: 5rem; } } /* (definiciones duplicadas de .manifesto-title consolidadas en la regla base ".section-title, .manifesto-title" — auditoría 2026-07-14) */ .manifesto-list { list-style: none; padding: 0; margin: 0; } .manifesto-list li { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2.5rem; font-size: 1.25rem; line-height: 1.6; font-family: var(--font-body); /* Outfit */ transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease; cursor: default; } .manifesto-list li:hover { transform: translateX(8px); } .manifesto-icon { flex-shrink: 0; width: 24px; height: 24px; margin-top: 0.25rem; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; } /* YES Column Specifics */ .list-yes li { color: var(--text-white); opacity: 0.9; } .list-yes li:hover { color: var(--accent-gold); } .icon-yes { stroke: var(--accent-gold); } .list-yes li:hover .icon-yes { transform: scale(1.3) rotate(90deg); } /* NO Column Specifics */ .list-no li { color: var(--text-muted); opacity: 0.85; /* antes 0.6: dejaba los límites del servicio a ~3,5:1 (mín. AA 4,5:1) */ } .list-no li:hover { color: var(--text-white); opacity: 0.95; } .icon-no { stroke: #ef4444; opacity: 0.4; } .list-no li:hover .icon-no { transform: scale(1.1); opacity: 0.9; stroke: #f87171; } .bento-grid { display: grid; grid-template-columns: 1fr; gap: 20px; position: relative; max-width: 1200px; margin: 0 auto; } @media (min-width: 768px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .bento-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(200px, auto); } .bento-span-2 { grid-column: span 2; } .bento-span-1 { grid-column: span 1; } .bento-row-span-2 { grid-row: span 2; } .bento-span-full { grid-column: 1 / -1; } } /* Glassmorphism Cards */ /* Spotlight Light Effect */ /* Spotlight Pattern Reveal Effect */ /* Giant Watermark Numbers */ /* Reglas de tarjeta bento RESTAURADAS (auditoría 2026-07-14): la purga las eliminó por compartir selector con la difunta .bento-quote-card. Incluyen position:relative (ancla de los números de fondo) y el efecto linterna (::before halo + ::after piel de jirafa con máscara que sigue al ratón). */ .bento-card { position: relative; background: var(--warm-surface); border: 1px solid var(--warm-border); border-radius: 24px; padding: 2.5rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; z-index: 1; } [data-theme="light"] .bento-card { background: var(--warm-surface); border: 1px solid var(--warm-border); } .bento-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px -10px rgba(0,0,0,0.3), 0 0 40px -10px rgba(234, 167, 59, 0.1); } [data-theme="light"] .bento-card:hover { box-shadow: 0 15px 30px -10px rgba(0,0,0,0.1), 0 0 40px -10px rgba(234, 167, 59, 0.15); } .bento-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient( 500px circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px), rgba(234, 167, 59, 0.15), transparent 40% ); z-index: -2; border-radius: inherit; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .bento-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: var(--bento-pattern-url); background-size: 200px 200px; -webkit-mask-image: radial-gradient( 350px circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px), rgba(0,0,0,1) 0%, transparent 60% ); mask-image: radial-gradient( 350px circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px), rgba(0,0,0,1) 0%, transparent 60% ); z-index: -1; border-radius: inherit; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .bento-grid:hover .bento-card::before, .bento-grid:hover .bento-card::after { opacity: 1; } .bento-bg-number { position: absolute; top: -15px; right: 5px; font-family: var(--font-heading); font-size: 10rem; font-weight: 700; line-height: 1; color: var(--accent-gold); opacity: 0.04; z-index: -1; pointer-events: none; user-select: none; transition: opacity 0.4s ease, transform 0.4s ease; } .bento-card:hover .bento-bg-number { opacity: 0.08; transform: scale(1.05) translate(-10px, 10px); } [data-theme="light"] .bento-bg-number { opacity: 0.1; } [data-theme="light"] .bento-card:hover .bento-bg-number { opacity: 0.2; } .bento-content { position: relative; z-index: 2; margin-top: 60px; /* Force text to the bottom */ } .bento-title { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 400; color: var(--text-white); margin-bottom: 1rem; line-height: 1.3; } [data-theme="light"] .bento-title { color: var(--text-dark); } .bento-text { font-family: var(--font-body); font-size: 1.1rem; color: var(--text-muted); line-height: 1.6; margin: 0; } @media (max-width: 768px) { .bento-bg-number { font-size: 8rem; } } /* ========================================================================== EDITORIAL MENU SECTION (MOTIVOS) ========================================================================== */ .section-editorial { padding: 8rem 0; position: relative; background-color: var(--bg-main); } .editorial-menu { max-width: 1000px; margin: 0 auto; /* la separación con la cabecera la da .section-head (5rem) */ display: flex; flex-direction: column; } .editorial-row { display: block; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 2.5rem 1rem; transition: background-color 0.4s ease, border-color 0.4s ease; border-radius: 8px; /* For subtle background hover */ } .editorial-row:first-child { border-top: 1px solid rgba(255, 255, 255, 0.05); } [data-theme="light"] .editorial-row { border-bottom: 1px solid rgba(0, 0, 0, 0.05); } [data-theme="light"] .editorial-row:first-child { border-top: 1px solid rgba(0, 0, 0, 0.05); } .editorial-row-header { display: flex; justify-content: space-between; align-items: center; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .editorial-title { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 300; color: var(--text-white); margin: 0; letter-spacing: -0.02em; transition: color 0.4s ease; } [data-theme="light"] .editorial-title { color: var(--text-dark); } .editorial-arrow { width: 36px; height: 36px; color: var(--accent-gold); /* Señal permanente de que la fila es un enlace (antes opacity 0: cero affordance en reposo) */ opacity: 0.25; transform: translateX(-15px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0; margin-left: 2rem; } .editorial-row-body { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform: translateY(-10px); } .editorial-row-body p { font-family: var(--font-body); font-size: 1.15rem; color: var(--text-muted); margin: 0; padding-top: 1rem; line-height: 1.6; max-width: 80%; } /* Hover Interactions (duplicadas con :focus-visible para que el teclado también pueda desplegar las descripciones — auditoría 2026-07-14) */ .editorial-row:hover, .editorial-row:focus-visible { background-color: rgba(234, 167, 59, 0.03); border-bottom-color: rgba(234, 167, 59, 0.2); } [data-theme="light"] .editorial-row:hover, [data-theme="light"] .editorial-row:focus-visible { background-color: rgba(234, 167, 59, 0.05); } .editorial-row:hover .editorial-row-header, .editorial-row:focus-visible .editorial-row-header { transform: translateX(20px); } .editorial-row:hover .editorial-title, .editorial-row:focus-visible .editorial-title { color: var(--accent-gold); } .editorial-row:hover .editorial-arrow, .editorial-row:focus-visible .editorial-arrow { opacity: 1; transform: translateX(-15px); } .editorial-row:hover .editorial-row-body, .editorial-row:focus-visible .editorial-row-body { max-height: 220px; /* antes 100px: truncaba con espaciado de texto de usuario (WCAG 1.4.12) */ opacity: 1; transform: translateY(0); } @media (max-width: 768px) { .editorial-row { padding: 1.5rem 0.5rem; } .editorial-row:hover .editorial-row-header { transform: translateX(10px); } .editorial-row:hover .editorial-arrow { transform: translateX(-5px); } .editorial-row-body p { max-width: 100%; font-size: 1rem; } .editorial-arrow { width: 24px; height: 24px; margin-left: 1rem; } .editorial-row:hover .editorial-row-body { max-height: 150px; } } /* ========================================================================== GALLERY SECTION (PERSONAJES) ========================================================================== */ .section-gallery { padding: 8rem 0; position: relative; background-color: var(--bg-main); } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; max-width: 1200px; margin-left: auto; margin-right: auto; } .gallery-card { background: var(--warm-surface); border: 1px solid var(--warm-border); border-radius: 12px; overflow: hidden; /* el offset de ancla lo da ahora scroll-padding-top global en html (2026-07-15) */ transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.5s ease; display: flex; flex-direction: column; } [data-theme="light"] .gallery-card { background: var(--warm-surface); border: 1px solid var(--warm-border); } .gallery-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); border-color: rgba(234, 167, 59, 0.3); } [data-theme="light"] .gallery-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); } .gallery-img-wrapper { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; } .gallery-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .gallery-card:hover .gallery-img-wrapper img { transform: scale(1.05); } .gallery-tag { position: absolute; top: 1.5rem; left: 1.5rem; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); color: #f3f4f6; /* fijo: la píldora es oscura en ambos temas (con var(--text-white) desaparecía en modo día) */ padding: 0.6rem 1.2rem; border-radius: 30px; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; z-index: 2; } .gallery-body { padding: 2.5rem 2rem; display: flex; flex-direction: column; flex-grow: 1; } .gallery-title { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 400; color: var(--text-white); margin-bottom: 1rem; letter-spacing: -0.01em; } [data-theme="light"] .gallery-title { color: var(--text-dark); } .gallery-desc { color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; margin-bottom: 2.5rem; flex-grow: 1; } .gallery-action { display: inline-flex; align-items: center; color: var(--text-white); text-decoration: none; font-weight: 500; font-size: 1.05rem; /* target táctil ≥44px sin alterar el layout (padding compensado con margen) */ padding: 0.45rem 0; margin: -0.45rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; align-self: flex-start; } [data-theme="light"] .gallery-action { color: var(--text-dark); border-bottom-color: rgba(0, 0, 0, 0.2); } .gallery-card:hover .gallery-action { color: var(--accent-gold); border-bottom-color: var(--accent-gold); } @media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .gallery-grid { grid-template-columns: 1fr; gap: 2rem; } .gallery-body { padding: 2rem 1.5rem; } .section-gallery { padding: 5rem 0; } } /* ========================================================================== SCIENCE & EEAT SECTION ========================================================================== */ .section-science { padding: 8rem 0; position: relative; overflow: hidden; background-color: var(--bg-main); } [data-theme="light"] .section-science { border-top: 1px solid rgba(0, 0, 0, 0.05); } /* Academic Columns */ .science-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; margin-bottom: 6rem; } .science-paper { display: flex; flex-direction: column; } .science-paper-title { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 400; color: var(--text-white); margin-bottom: 1.5rem; letter-spacing: -0.01em; } [data-theme="light"] .science-paper-title { color: var(--text-dark); } .science-paper-desc { font-size: 1.05rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 2rem; flex-grow: 1; } .science-paper-ref { font-family: 'Courier New', Courier, monospace; font-size: 0.85rem; line-height: 1.5; color: rgba(255, 255, 255, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.5rem; } [data-theme="light"] .science-paper-ref { color: rgba(0, 0, 0, 0.5); border-top-color: rgba(0, 0, 0, 0.1); } .science-paper-ref strong { color: var(--text-muted); display: block; margin-bottom: 0.5rem; } .science-link { display: inline-block; margin-top: 1rem; color: var(--accent-gold-text); text-decoration: none; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.8rem; transition: opacity 0.3s ease; } .science-link:hover { opacity: 0.7; } /* Who We Are Banner */ .who-we-are-banner { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 3rem 4rem; display: flex; align-items: center; justify-content: space-between; gap: 3rem; margin-bottom: 4rem; } [data-theme="light"] .who-we-are-banner { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.05); } .who-text { flex: 1; } .who-eyebrow { font-family: var(--font-heading); /* Changed to Outfit */ font-weight: 500; color: var(--accent-gold); font-size: 0.85rem; letter-spacing: 0.1em; margin-bottom: 0.5rem; } .who-title { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 500; color: var(--text-white); margin-bottom: 1rem; } [data-theme="light"] .who-title { color: var(--text-dark); } .who-desc { color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; margin: 0; max-width: 600px; } /* Medical Disclaimer */ .medical-disclaimer { border: 1px solid var(--accent-gold); border-radius: 8px; padding: 1.5rem 2rem; display: flex; align-items: flex-start; gap: 1.5rem; background: transparent; } [data-theme="light"] .medical-disclaimer { border-color: rgba(0, 0, 0, 0.1); } .disclaimer-icon { width: 24px; height: 24px; color: rgba(255, 255, 255, 0.3); flex-shrink: 0; margin-top: 0.2rem; } [data-theme="light"] .disclaimer-icon { color: rgba(0, 0, 0, 0.3); } .medical-disclaimer p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.5); } [data-theme="light"] .medical-disclaimer p { color: rgba(0, 0, 0, 0.6); } .medical-disclaimer strong { color: rgba(255, 255, 255, 0.7); font-weight: 500; } [data-theme="light"] .medical-disclaimer strong { color: rgba(0, 0, 0, 0.8); } /* Responsiveness */ @media (max-width: 992px) { .science-columns { grid-template-columns: 1fr; gap: 3rem; } .who-we-are-banner { flex-direction: column; text-align: center; padding: 2.5rem 2rem; } .who-desc { margin: 0 auto; } } #synapse-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .disclaimer-icon-wrapper { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; } .disclaimer-icon-svg { width: 100%; height: 100%; } .who-btn-highlight { display: inline-block; padding: 1.2rem 2.5rem; background-color: #553D30; color: #ffffff; font-family: var(--font-heading); text-decoration: none; border-radius: 30px; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; flex-shrink: 0; border: 1px solid transparent; box-shadow: 0 4px 15px rgba(85, 61, 48, 0.3); } .who-btn-highlight:hover { background-color: #3f2d23; color: #ffffff; border-color: transparent; transform: translateY(-3px); box-shadow: 0 15px 35px rgba(85, 61, 48, 0.5); /* (la segunda box-shadow que anulaba esta elevación se eliminó — auditoría 2026-07-14) */ } [data-theme="light"] .who-btn-highlight { display: inline-block; padding: 1.2rem 2.5rem; background-color: #553D30; color: #ffffff; font-family: var(--font-heading); text-decoration: none; border-radius: 30px; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; flex-shrink: 0; border: 1px solid transparent; box-shadow: 0 4px 15px rgba(85, 61, 48, 0.3); } [data-theme="light"] .who-btn-highlight:hover { background-color: #3f2d23; color: #ffffff; border-color: transparent; transform: translateY(-3px); box-shadow: 0 15px 35px rgba(85, 61, 48, 0.5); /* (la segunda box-shadow que anulaba esta elevación se eliminó — auditoría 2026-07-14) */ } /* ========================================================================== HOW IT WORKS (STEPPER) SECTION ========================================================================== */ .section-stepper { padding: 8rem 0; /* ritmo unificado (antes 8/10rem) */ background-color: var(--bg-main); position: relative; overflow: hidden; } [data-theme="light"] .section-stepper { border-top-color: rgba(0, 0, 0, 0.05); } .stepper-container { position: relative; max-width: 1200px; margin: 0 auto; } /* The Golden Thread */ .stepper-thread { position: absolute; top: 35px; /* Aligned with the dots */ left: 12.5%; /* Center of first col */ width: 75%; /* Span to center of last col */ height: 1px; background: linear-gradient(90deg, rgba(234, 167, 59, 0.1), rgba(234, 167, 59, 0.6) 50%, rgba(234, 167, 59, 0.1)); z-index: 1; } .stepper-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative; z-index: 2; } .step-card { position: relative; padding-top: 25px; /* Make room for the dot */ display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.4s ease; cursor: default; } .step-card:hover { transform: translateY(-8px); } .step-card:hover .step-dot { background-color: var(--accent-gold); box-shadow: 0 0 15px rgba(234, 167, 59, 0.6); transform: translateX(-50%) scale(1.3); } /* Titanic Numbers */ .step-num-bg { position: absolute; top: -2.5rem; left: 50%; transform: translateX(-50%); font-family: var(--font-heading); font-size: 15rem; font-weight: 700; color: var(--text-white); opacity: 0.02; line-height: 1; z-index: 0; pointer-events: none; transition: opacity 0.4s ease, color 0.4s ease; } [data-theme="light"] .step-num-bg { opacity: 0.04; } .step-card:hover .step-num-bg { opacity: 0.05; color: var(--accent-gold); } [data-theme="light"] .step-card:hover .step-num-bg { opacity: 0.08; } .step-content { position: relative; z-index: 2; padding: 3rem 1.5rem; background: transparent; height: 100%; } .step-dot { position: absolute; top: 10px; /* Centered with the thread */ left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background-color: var(--bg-main); border: 2px solid var(--accent-gold); z-index: 3; transition: all 0.4s ease; } [data-theme="light"] .step-dot { background-color: var(--bg-primary); } .step-title { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 400; color: var(--text-white); margin-bottom: 1rem; letter-spacing: -0.01em; } .step-desc { color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; margin: 0; } /* Responsiveness */ @media (max-width: 992px) { .stepper-grid { grid-template-columns: repeat(2, 1fr); gap: 4rem 2rem; } .stepper-thread { display: none; } } @media (max-width: 640px) { /* breakpoint consolidado (antes 600, único uso en la web) */ .stepper-grid { grid-template-columns: 1fr; gap: 3rem; } .section-stepper { padding: 6rem 0; } .stepper-thread { display: block; width: 1px; height: 75%; left: 20px; top: 40px; background: linear-gradient(180deg, rgba(234, 167, 59, 0.1), rgba(234, 167, 59, 0.6) 50%, rgba(234, 167, 59, 0.1)); } .step-card { flex-direction: row; text-align: left; align-items: flex-start; padding-top: 0; } .step-card:hover { transform: translateX(8px); translateY(0); } .step-card:hover .step-dot { transform: scale(1.3); } .step-content { padding: 0 0 0 3.5rem; } .step-dot { top: 8px; left: 20px; transform: translateX(-50%); } .step-card:hover .step-dot { transform: translateX(-50%) scale(1.3); } .step-num-bg { left: auto; right: 0; top: -1rem; transform: none; font-size: 10rem; opacity: 0.03; } } /* ========================================================================== PRICING SECTION (NEURO-UX) ========================================================================== */ .section-pricing { padding: 8rem 0; background-color: var(--bg-main); } [data-theme="light"] .section-pricing { border-top-color: rgba(0, 0, 0, 0.05); } .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 900px; margin: 0 auto 4rem auto; align-items: stretch; } /* Base Card Style */ .pricing-card { border-radius: 16px; padding: 3.5rem 2.5rem; text-align: center; display: flex; flex-direction: column; position: relative; transition: transform 0.4s ease, box-shadow 0.4s ease; } .pricing-tier { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 500; margin-bottom: 1rem; color: var(--text-muted); } .pricing-amount { font-family: var(--font-heading); font-size: 4.5rem; font-weight: 700; line-height: 1; margin-bottom: 1.5rem; color: var(--text-white); letter-spacing: -0.03em; } [data-theme="light"] .pricing-amount { color: var(--text-dark); } .pricing-desc { color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; margin-bottom: 2.5rem; flex-grow: 1; } /* Ghost Card (15 mins) */ /* Hero Card (30 mins) */ .pricing-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: var(--accent-gold); color: var(--on-accent); /* antes #fff sobre oro: 2,08:1, ilegible (auditoría 2026-07-14) */ font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.4rem 1.5rem; border-radius: 30px; box-shadow: 0 5px 15px rgba(234, 167, 59, 0.4); } /* Buttons */ /* Un solo faro dorado en Precios (auditoría 2026-07-14): el plan destacado ("Más elegido") lleva el relleno de oro; el otro va en contorno. */ .btn-primary-pricing { display: inline-block; width: 100%; padding: 1.2rem; background-color: transparent; color: var(--accent-gold-text); text-decoration: none; border-radius: 40px; font-weight: 600; transition: all 0.3s ease; border: 1px solid rgba(234, 167, 59, 0.55); font-family: var(--font-heading); } .btn-primary-pricing:hover { background-color: var(--accent-gold); border-color: transparent; color: var(--on-accent); } .pricing-card-featured .btn-primary-pricing { background-color: var(--accent-gold); border-color: transparent; color: var(--on-accent); } .pricing-card-featured .btn-primary-pricing:hover { background-color: var(--accent-gold-hover); transform: translateY(-2px); } /* Trust Bar */ .trust-icon { width: 20px; height: 20px; color: var(--accent-gold); flex-shrink: 0; } .trust-methods { display: flex; gap: 0.8rem; } /* Responsiveness */ @media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; gap: 2rem; } } /* Equal Pricing Cards */ .pricing-card-equal { background-color: var(--trust-bg); border: 1px solid var(--trust-border); padding: 3.5rem 2.5rem; } .pricing-card-equal:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(234, 167, 59, 0.1); border-color: rgba(234, 167, 59, 0.3); } [data-theme="light"] .pricing-card-equal:hover { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); border-color: rgba(107, 78, 61, 0.2); } /* Trust Bar V2 */ .trust-bar-v2 { max-width: 900px; margin: 4rem auto 0; padding: 2.5rem; background: transparent; border-top: 1px dotted rgba(255, 255, 255, 0.1); border-bottom: 1px dotted rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; } [data-theme="light"] .trust-bar-v2 { border-color: rgba(0, 0, 0, 0.1); } .trust-disclaimer { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; max-width: 800px; } .trust-disclaimer strong { color: var(--text-white); } [data-theme="light"] .trust-disclaimer strong { color: var(--text-dark); } .trust-methods-v2 { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; } .trust-lbl { font-family: var(--font-heading); font-weight: 500; color: var(--text-white); } [data-theme="light"] .trust-lbl { color: var(--text-dark); } .trust-chips { display: flex; gap: 0.5rem; } .trust-chip-v2 { font-size: 0.8rem; font-family: var(--font-body); font-weight: 600; color: var(--accent-gold-text); background: rgba(234, 167, 59, 0.1); padding: 0.4rem 1rem; border-radius: 30px; text-transform: uppercase; letter-spacing: 0.05em; } .pricing-card-featured { border-color: rgba(234, 167, 59, 0.5); /* Yellow border when inactive */ } /* ========================================================================== COMO NACE / AUTORIDAD SECTION ========================================================================== */ #como-nace { padding: 8rem 0; } [data-theme="light"] #como-nace { border-top-color: rgba(0, 0, 0, 0.05); } .author-role { font-family: var(--font-heading); font-weight: 500; font-size: 0.9rem; color: var(--accent-gold); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; } /* Fix inline links in this section to match premium look */ #como-nace a { color: var(--accent-gold); text-decoration: none; font-weight: 500; transition: opacity 0.3s ease; } #como-nace a:hover { opacity: 0.8; } /* ============ LÍMITES ÉTICOS (Un servicio con ética y límites claros) ============ */ /* Concepto: el "límite" hecho visible — cada ficha es una etiqueta de alta costura enmarcada por esquinas doradas que se afirman al pasar el ratón. Sellos circulares tipo "hallmark" (punzón de joyería) como iconografía. */ .section-limits { position: relative; } .limits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .limit-card-v2 { position: relative; background: var(--warm-surface); border: 1px solid var(--warm-border); border-radius: 16px; padding: 2.75rem 2rem 2.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; overflow: hidden; z-index: 1; transition: var(--transition); } .limit-card-v2:hover { transform: translateY(-8px); border-color: rgba(234, 167, 59, 0.35); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 0 24px rgba(234, 167, 59, 0.08); } [data-theme="light"] .limit-card-v2:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); } /* Esquinas de marco: el límite que "respira" y se afirma en hover */ /* Micro-etiqueta numerada (eco del eyebrow) */ .limit-index { font-family: var(--font-heading); font-size: 0.75rem; /* suelo de 12px para micro-etiquetas (auditoría 2026-07-14) */ font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-gold); opacity: 0.75; } /* Sello circular (hallmark) */ .limit-mark { width: 52px; height: 52px; border: 1.5px solid rgba(234, 167, 59, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-gold); background: rgba(234, 167, 59, 0.05); transition: var(--transition); } .limit-mark svg { width: 22px; height: 22px; } .limit-mark .mark-18 { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; } .limit-card-v2:hover .limit-mark { background: rgba(234, 167, 59, 0.12); border-color: rgba(234, 167, 59, 0.7); transform: rotate(-6deg) scale(1.05); } .limit-title { font-size: 1.4rem; font-weight: 500; /* familia de tarjetas unificada */ color: var(--text-white); margin-top: 0.25rem; } .limit-desc { font-size: 0.95rem; line-height: 1.65; color: var(--text-muted); } /* Coda: cierre enmarcado con el propio motivo de esquinas de la sección (el quinto "límite": la frase humana dentro de su propio marco) */ @media (max-width: 1024px) { /* breakpoint consolidado (antes 1100, único uso en la web) */ .limits-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .limits-grid { grid-template-columns: 1fr; } } /* ============ RESERVAR: LA LLAMADA, PASO A PASO ============ */ /* Sustituye al formulario (2026-07-15, decisión Marian+Andrés): la conversión es una llamada. Izquierda: tarjeta de llamada con pulso de "llamada entrante" (sticky: acompaña la lectura). Derecha: el guion de 5 pasos unidos por un hilo dorado que se dibuja y enciende en cascada al entrar la sección en pantalla (estado animado solo con JS: .llamada-anim). */ .section-llamada { position: relative; overflow: hidden; } .section-llamada::before { content: ""; position: absolute; top: 50%; left: -12%; width: 720px; height: 720px; transform: translateY(-50%); background: radial-gradient(circle, rgba(234, 167, 59, 0.06) 0%, transparent 65%); pointer-events: none; } .llamada-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; align-items: start; position: relative; z-index: 1; } /* --- Tarjeta de llamada --- */ .llamada-cta { position: sticky; top: 165px; background: var(--warm-surface); border: 1px solid var(--warm-border); border-radius: 24px; padding: 2.75rem 2.5rem; text-align: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .llamada-cta-icono { position: relative; width: 74px; height: 74px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; color: var(--accent-gold); border: 1px solid rgba(234, 167, 59, 0.45); border-radius: 50%; } .llamada-cta-icono svg { width: 30px; height: 30px; } /* Pulso de "llamada entrante": dos ondas que se expanden alternas */ .llamada-onda { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(234, 167, 59, 0.5); animation: llamadaOnda 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; pointer-events: none; } .llamada-onda--2 { animation-delay: 1.3s; } @keyframes llamadaOnda { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } } .llamada-cta-titulo { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text-muted); margin-bottom: 0.6rem; } .llamada-numero { display: block; font-family: var(--font-heading); font-size: clamp(1.9rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: 0.04em; color: var(--text-white); text-decoration: none; margin-bottom: 1.6rem; transition: color 0.3s ease; } .llamada-numero:hover { color: var(--accent-gold); } .llamada-boton { display: inline-block; } .llamada-notas { list-style: none; margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--warm-border); display: flex; flex-direction: column; gap: 0.7rem; text-align: left; } .llamada-notas li { position: relative; padding-left: 1.4rem; font-family: var(--font-heading); font-size: 0.92rem; color: var(--text-muted); } .llamada-notas li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-gold); box-shadow: 0 0 8px rgba(234, 167, 59, 0.5); } /* --- El guion de la llamada: pasos unidos por el hilo --- */ .llamada-pasos { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 2.4rem; counter-reset: paso-llamada; } /* Hilo dorado: nace bajo el primer número y muere en el último */ .llamada-paso { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 1.5rem; align-items: start; } /* Hilo dorado por tramos: cada conector va del centro de su número al centro del siguiente. height = 100% (alto del paso) + gap, así llega al número de abajo sea cual sea la altura del texto. Solo en los pasos 1-3: el tramo 4→desvío se elimina para que el hilo PARE en el 4 y no entre en la caja. */ .llamada-paso::before { content: ""; position: absolute; left: 23px; top: 24px; height: calc(100% + 2.4rem); width: 1px; background: linear-gradient(to bottom, rgba(234, 167, 59, 0.4), rgba(234, 167, 59, 0.25)); transform-origin: top; z-index: 0; } .llamada-paso:nth-child(4)::before, .llamada-paso--desvio::before { display: none; } .llamada-paso-num { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-primary); border: 1px solid var(--warm-border); font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--accent-gold-text); position: relative; z-index: 1; transition: border-color 0.4s ease, box-shadow 0.4s ease; } .llamada-paso:hover .llamada-paso-num { border-color: rgba(234, 167, 59, 0.6); box-shadow: 0 0 16px rgba(234, 167, 59, 0.25); } .llamada-paso-titulo { font-size: 1.25rem; font-weight: 500; color: var(--text-white); margin: 0.55rem 0 0.5rem; line-height: 1.3; } .llamada-paso-cuerpo p { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--text-muted); margin: 0; max-width: 56ch; } /* Paso condicional (desvío): si la jirafa no está disponible */ .llamada-paso--desvio { background: var(--warm-surface); border: 1px solid var(--warm-border); border-radius: 18px; padding: 1.4rem 1.5rem; } .llamada-paso--desvio .llamada-paso-num svg { width: 20px; height: 20px; } .llamada-paso--desvio .llamada-paso-titulo { margin-top: 0.45rem; } /* --- Encendido en cascada (solo si hay JS: .llamada-anim) --- */ .llamada-anim .llamada-paso { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } /* El hilo de cada tramo se "dibuja" de arriba abajo al encenderse el paso */ .llamada-anim .llamada-paso::before { transform: scaleY(0); transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .llamada-anim .llamada-paso:nth-child(1) { transition-delay: 0.15s; } .llamada-anim .llamada-paso:nth-child(2) { transition-delay: 0.4s; } .llamada-anim .llamada-paso:nth-child(3) { transition-delay: 0.65s; } .llamada-anim .llamada-paso:nth-child(4) { transition-delay: 0.9s; } .llamada-anim .llamada-paso:nth-child(5) { transition-delay: 1.15s; } .llamada-anim .llamada-paso:nth-child(1)::before { transition-delay: 0.4s; } .llamada-anim .llamada-paso:nth-child(2)::before { transition-delay: 0.65s; } .llamada-anim .llamada-paso:nth-child(3)::before { transition-delay: 0.9s; } .llamada-anim.en-vista .llamada-paso { opacity: 1; transform: none; } .llamada-anim.en-vista .llamada-paso::before { transform: scaleY(1); } @media (max-width: 968px) { .llamada-wrap { grid-template-columns: 1fr; gap: 3.5rem; } .llamada-cta { position: static; max-width: 460px; margin: 0 auto; width: 100%; } } /* ============ FAQ (Preguntas frecuentes como conversación) ============ */ /* Híbrido: layout editorial (izquierda contexto fijo, derecha acordeón) + despliegue tipo chat: la pregunta es una burbuja (voz directa, Outfit) y la respuesta contesta como mensaje de la jirafa (voz empática, Lora). */ .section-faq { position: relative; } .faq-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 5rem; align-items: start; } .faq-intro { position: sticky; top: 165px; } .faq-intro .section-title { font-size: clamp(1.9rem, 2.8vw, 2.7rem); line-height: 1.18; letter-spacing: -0.02em; margin-top: 1.4rem; } .faq-intro-text { margin-top: 1.4rem; font-size: 1.05rem; line-height: 1.7; color: var(--text-muted); } .faq-intro-cta { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2.25rem; font-family: var(--font-heading); font-size: 0.95rem; font-weight: 500; color: var(--accent-gold); text-decoration: none; padding: 0.8rem 1.5rem; border: 1px solid rgba(234, 167, 59, 0.4); border-radius: 40px; transition: var(--transition); } .faq-intro-cta svg { width: 17px; height: 17px; } .faq-intro-cta:hover { background: var(--accent-gold); color: #08090d; border-color: var(--accent-gold); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(234, 167, 59, 0.5); } /* Cabecera de chat */ .faq-chat-meta { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2rem; } .faq-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-green); box-shadow: 0 0 10px rgba(16, 185, 129, 0.7); } /* Ítems */ .faq-item { margin-bottom: 1rem; } .faq-q { margin: 0; font-size: 1rem; } .faq-trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit; } /* Burbuja de pregunta (voz del usuario) */ .faq-bubble { position: relative; flex: 1; background: var(--warm-surface); border: 1px solid var(--warm-border); border-radius: 18px 18px 18px 6px; padding: 1.05rem 1.4rem; font-family: var(--font-heading); font-size: 1.02rem; font-weight: 500; color: var(--text-white); line-height: 1.45; transition: var(--transition); } .faq-trigger:hover .faq-bubble { border-color: rgba(234, 167, 59, 0.35); background: rgba(234, 167, 59, 0.06); } .faq-trigger:focus-visible { outline: none; } .faq-trigger:focus-visible .faq-bubble { border-color: rgba(234, 167, 59, 0.6); box-shadow: 0 0 0 3px rgba(234, 167, 59, 0.15); } .faq-item.open .faq-bubble { background: rgba(234, 167, 59, 0.1); border-color: rgba(234, 167, 59, 0.4); } /* Emoji acento al final de algunas preguntas */ .faq-emoji { display: inline-block; margin-left: 0.45rem; font-size: 1.05em; transform: rotate(6deg) translateY(1px); } /* Icono +/− que gira al abrir */ .faq-icon { position: relative; flex-shrink: 0; width: 34px; height: 34px; border: 1.5px solid rgba(234, 167, 59, 0.4); border-radius: 50%; transition: var(--transition); } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: var(--accent-gold); transform: translate(-50%, -50%); transition: var(--transition); } .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item.open .faq-icon { background: rgba(234, 167, 59, 0.12); transform: rotate(180deg); } .faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); } /* Respuesta: mensaje de la jirafa */ .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .faq-item.open .faq-answer { grid-template-rows: 1fr; } .faq-answer-inner { overflow: hidden; } .faq-reply { position: relative; margin: 0.85rem 3rem 0.35rem 3.25rem; background: rgba(234, 167, 59, 0.08); border: 1px solid rgba(234, 167, 59, 0.22); border-radius: 6px 18px 18px 18px; padding: 1.15rem 1.4rem 1.25rem; font-family: var(--font-body); font-size: 0.98rem; line-height: 1.7; color: var(--text-white); opacity: 0; transform: translateY(8px) scale(0.98); transform-origin: top left; transition: opacity 0.4s ease 0.08s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.08s; } .faq-item.revealed .faq-reply { opacity: 1; transform: none; } .faq-sender { display: block; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-gold-text); margin-bottom: 0.5rem; } .faq-reply a { color: var(--accent-gold-text); text-decoration: none; border-bottom: 1px solid rgba(234, 167, 59, 0.35); transition: border-color 0.3s ease; } .faq-reply a:hover { border-bottom-color: var(--accent-gold); } @media (max-width: 968px) { .faq-layout { grid-template-columns: 1fr; gap: 3rem; } .faq-intro { position: static; } .faq-reply { margin: 0.85rem 0 0.35rem 1.5rem; } } /* ---- FAQ: refuerzo de simulación de chat ---- */ .faq-answer-inner { position: relative; } .faq-bubble { padding-right: 2.7rem; } /* Separador de fecha (chip centrado, estilo app de mensajería) */ .faq-date-chip { width: fit-content; margin: 0 auto 1.6rem; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 0.35rem 0.95rem; border-radius: 20px; } /* Doble check dorado en las preguntas (mensaje entregado y leído) */ .faq-ticks { position: absolute; bottom: 9px; right: 12px; display: inline-flex; color: var(--accent-gold); opacity: 0.55; transition: opacity 0.3s ease; } .faq-ticks svg { width: 15px; height: 10px; } .faq-item.open .faq-ticks { opacity: 0.9; } /* Indicador "escribiendo..." de la jirafa */ .faq-typing { position: absolute; top: 0.85rem; left: 3.25rem; display: none; align-items: center; gap: 5px; background: rgba(234, 167, 59, 0.08); border: 1px solid rgba(234, 167, 59, 0.22); border-radius: 6px 18px 18px 18px; padding: 0.85rem 1.05rem; } .faq-item.open:not(.revealed) .faq-typing { display: inline-flex; } .faq-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-gold); animation: faqTyping 1s infinite ease-in-out; } .faq-typing span:nth-child(2) { animation-delay: 0.15s; } .faq-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes faqTyping { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-4px); opacity: 1; } } @media (max-width: 968px) { .faq-typing { left: 1.5rem; } } /* ---- PREVIEW: Límites v3 ---- */ /* Tarjetas: fuera esquinas; al hover emerge la piel de jirafa CONTINUA (patrón toroidal sin costuras, una sola piel en toda la tarjeta). Coda: cita editorial, tratamiento propio distinto al de las fichas. */ .limit-card-v2::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("../assets/img/patron_jirafa_seamless.png"); background-size: 420px 420px; background-repeat: repeat; opacity: 0; transform: scale(1.04); transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .limit-card-v2:hover::after { opacity: 0.07; transform: scale(1); } [data-theme="light"] .limit-card-v2:hover::after { opacity: 0.09; } /* Coda v3: cita editorial — más grande, con comilla dorada colgante. (Regla autosuficiente: incorpora position/centrado/itálica que antes heredaba de la v1 purgada — auditoría 2026-07-14) */ .limits-coda { position: relative; max-width: 680px; margin: 5.5rem auto 0; padding: 2.9rem 1rem 0; text-align: center; font-family: var(--font-body); font-style: italic; font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.55; color: var(--text-white); } .limits-coda::before { content: "\201C"; position: absolute; top: -0.4rem; left: 50%; transform: translateX(-50%); font-family: var(--font-body); font-style: italic; font-size: 5.2rem; line-height: 1; color: var(--accent-gold); opacity: 0.4; pointer-events: none; } @media (max-width: 640px) { .limits-coda { font-size: 1.22rem; padding: 2.6rem 0.5rem 0; } } /* ============ FOOTER (el cierre de la sabana nocturna) ============ */ /* Fondo más profundo que el resto de la página, hairline dorada de entrada y la piel de jirafa como textura estática apenas perceptible. Estructura y anchors de Julián intactos. */ .site-footer { position: relative; background: #05060a; overflow: hidden; } [data-theme="light"] .site-footer { background: #EFEEE8; } /* Hairline dorada superior */ .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(234, 167, 59, 0.4), transparent); } /* Piel de jirafa: textura estática, un susurro */ .site-footer::after { content: ""; position: absolute; inset: 0; background-image: url("../assets/img/patron_jirafa_seamless.png"); background-size: 420px 420px; background-repeat: repeat; opacity: 0.03; pointer-events: none; } [data-theme="light"] .site-footer::after { opacity: 0.05; } .site-footer__inner { position: relative; z-index: 1; } .site-footer__grid { max-width: 1200px; margin: 0 auto; padding: 5.5rem 2rem 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 4rem; align-items: start; } /* Marca */ .site-footer .brand { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 600; font-size: 1.7rem; color: var(--text-white); text-decoration: none; display: inline-flex; align-items: baseline; gap: 2px; } .site-footer__about { margin-top: 1.2rem; max-width: 36ch; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.7; color: var(--text-muted); } /* Cabeceras de columna (H2 semánticos, aspecto de micro-etiqueta) */ .site-footer nav h2 { font-family: var(--font-heading); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-gold-text); margin-bottom: 1.5rem; } .site-footer nav ul { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; } /* Enlaces: guion dorado que se desliza al hover */ .site-footer nav a { display: inline-flex; align-items: center; font-family: var(--font-heading); font-size: 0.95rem; font-weight: 400; color: var(--text-muted); text-decoration: none; transition: color 0.3s ease; } .site-footer nav a::before { content: ""; width: 0; height: 1px; background: var(--accent-gold); margin-right: 0; transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin-right 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .site-footer nav a:hover { color: var(--text-white); } .site-footer nav a:hover::before { width: 14px; margin-right: 8px; } /* Franja legal inferior */ .site-footer__legal { margin-top: 4.5rem; border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 1.8rem 2rem 2.1rem; text-align: center; } [data-theme="light"] .site-footer__legal { border-top: 1px solid rgba(0, 0, 0, 0.06); } .site-footer__legal p { max-width: 860px; margin: 0 auto; font-family: var(--font-body); font-size: 0.85rem; line-height: 1.65; color: var(--text-muted); } @media (max-width: 968px) { .site-footer__grid { grid-template-columns: 1fr; gap: 3rem; padding-top: 4rem; } .site-footer__about { max-width: none; } .site-footer__legal { margin-top: 3.5rem; } } /* ---- Footer v2: compacto y sin cajas heredadas ---- */ /* El nav genérico del menú superior (píldora de vidrio, flex centrado) y el footer genérico (padding 5rem) contaminaban el footer. Se neutralizan aquí y se compacta todo el bloque para que la piel de jirafa respire. */ .site-footer { padding: 0; } .site-footer nav { display: block; background: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; border-radius: 0; box-shadow: none; z-index: auto; } .site-footer nav a { padding: 0; border-radius: 0; background: none; color: var(--text-muted); font-weight: 400; font-size: 0.92rem; } .site-footer nav a:hover { color: var(--text-white); background: none; } .site-footer__grid { padding: 3.75rem 2rem 0; grid-template-columns: 1.5fr 1fr 0.9fr; gap: 3rem 4.5rem; } .site-footer .brand { font-size: 1.5rem; } .site-footer__about { margin-top: 1.1rem; max-width: 46ch; font-size: 0.92rem; line-height: 1.65; } .site-footer nav h2 { margin-bottom: 1.1rem; } .site-footer nav ul { gap: 0.7rem; } .site-footer__legal { margin-top: 3.25rem; padding: 1.5rem 2rem 1.9rem; } .site-footer__legal p { font-size: 0.82rem; } @media (max-width: 968px) { .site-footer__grid { padding-top: 3rem; gap: 2.5rem; } .site-footer__legal { margin-top: 2.5rem; } } /* ---- Motivos v2 (mejora UX/SEO) ---- */ /* En pantallas táctiles no existe hover: las descripciones (texto SEO clave) quedaban invisibles para el usuario móvil aunque Google sí las leyera. En <=968px se muestran siempre; en escritorio se mantiene el hover elegante. */ @media (max-width: 968px) { .editorial-row-body { max-height: none; opacity: 1; transform: none; } .editorial-arrow { opacity: 0.55; transform: none; width: 28px; height: 28px; flex-shrink: 0; margin-left: 1rem; } .editorial-row:hover .editorial-row-header { transform: none; } .editorial-row { padding: 2rem 0.5rem; } } /* ============ QUIÉNES SOMOS v2 (fundadores, editorial alta costura) ============ */ /* Dos retratos grandes en filas alternadas (zigzag editorial), cada foto con marco dorado desplazado tipo lámina; credenciales rastreables con punto-faro y bloque "En Jirafas" separado por hairline. Aura suave para que la sección destaque: aquí están las personas que responden por el servicio. */ .section-founders { position: relative; overflow: hidden; } .section-founders::before { content: ""; position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: 900px; height: 900px; background: radial-gradient(circle, rgba(234, 167, 59, 0.05) 0%, transparent 65%); pointer-events: none; } .founders-story { max-width: 720px; margin: 1.5rem auto 0; font-size: 1.12rem; line-height: 1.75; color: var(--text-muted); text-align: center; } /* ========================================================================== FUNDADORES EN JERARQUÍA HORIZONTAL (rediseño 2026-07-15) Dos láminas gemelas a la misma altura —Marian a la izquierda, Andrés a la derecha— en simetría de espejo (cada marco dorado se desplaza hacia su lado), unidas por un eje central dorado con el punto de la marca: el punto de encuentro de los dos oficios del que habla la intro. ========================================================================== */ .founders-duo { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 4rem; align-items: start; position: relative; z-index: 1; } .founder-col { display: flex; flex-direction: column; } /* Retrato con marco-lámina dorado desplazado (gemelos: misma altura siempre) */ .founder-media { position: relative; margin-bottom: 2.4rem; } .founder-media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; position: relative; z-index: 1; } .founder-media::before { content: ""; position: absolute; border: 1px solid rgba(234, 167, 59, 0.4); border-radius: 18px; transition: var(--transition); } /* Espejo: el marco de Marian asoma hacia la izquierda; el de Andrés, hacia la derecha */ .founder-col--left .founder-media::before { top: 16px; left: -16px; bottom: -16px; right: 16px; } .founder-col--right .founder-media::before { top: 16px; right: -16px; bottom: -16px; left: 16px; } .founder-col--left:hover .founder-media::before { top: 10px; left: -10px; bottom: -10px; right: 10px; border-color: rgba(234, 167, 59, 0.7); } .founder-col--right:hover .founder-media::before { top: 10px; right: -10px; bottom: -10px; left: 10px; border-color: rgba(234, 167, 59, 0.7); } /* Eje central: hairline dorada con el punto de marca en el encuentro */ .founders-axis { align-self: stretch; width: 1px; background: linear-gradient(to bottom, transparent, rgba(234, 167, 59, 0.32) 15%, rgba(234, 167, 59, 0.32) 85%, transparent); position: relative; } .founders-axis-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 9px; /* eco del punto del logotipo */ height: 9px; border-radius: 50%; background: var(--accent-gold); box-shadow: 0 0 14px rgba(234, 167, 59, 0.6); } /* Contenido */ .founder-label { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-gold-text); margin-bottom: 0.6rem; } .founder-name { font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--text-white); margin: 0; line-height: 1.15; letter-spacing: -0.01em; } .founder-role { font-family: var(--font-body); font-style: italic; font-size: 1.08rem; color: var(--text-muted); margin-top: 0.4rem; } .founder-creds { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; margin: 1.75rem 0 0; padding: 0; } .founder-creds li { position: relative; padding-left: 1.5rem; font-family: var(--font-heading); font-size: 0.96rem; font-weight: 400; line-height: 1.55; color: var(--text-muted); } .founder-creds li::before { content: ""; position: absolute; left: 2px; top: 0.52em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-gold); box-shadow: 0 0 10px rgba(234, 167, 59, 0.55); } .founder-creds strong { color: var(--text-white); font-weight: 500; } .founder-in { margin-top: 1.9rem; border-top: 1px solid var(--warm-border); padding-top: 1.4rem; font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--text-white); max-width: 52ch; } .founder-in-label { display: block; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-gold-text); margin-bottom: 0.5rem; } .founder-link { color: var(--accent-gold-text); text-decoration: none; border-bottom: 1px solid rgba(234, 167, 59, 0.35); transition: border-color 0.3s ease; } .founder-link:hover { border-bottom-color: var(--accent-gold); } @media (max-width: 968px) { /* En pantallas estrechas la igualdad horizontal no cabe: se apilan (Marian primero) y el eje desaparece */ .founders-duo { grid-template-columns: 1fr; row-gap: 4rem; } .founders-axis { display: none; } .founder-media { max-width: 420px; margin: 0 auto 2.25rem; width: 100%; } } /* ============ EL PUZZLE DE LAS JIRAFAS · v2 (rondas guiadas) ============ */ /* 5 rondas. En cada una, 6 piezas (una por jirafa) con la forma EXACTA del hueco de esa ronda: todas encajan físicamente; cuál eliges decide el dibujo final. La 5ª pieza es universal: "Necesito hablarlo". Revelado honesto: mayoría de 4 votos con porcentaje; empate 2-2 muestra a las dos jirafas; sin mayoría, invita a conocerlas a todas. */ .section-puzzle { position: relative; overflow: hidden; padding: 8rem 0; /* ritmo unificado (antes 7/8rem) */ } .section-puzzle::before { content: ""; position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 1000px; height: 1000px; background: radial-gradient(circle, rgba(234, 167, 59, 0.05) 0%, transparent 65%); pointer-events: none; } .puzzle-intro { max-width: 700px; margin: 1.5rem auto 0; font-size: 1.12rem; line-height: 1.75; color: var(--text-muted); text-align: center; } .puzzle-stage { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 4rem; position: relative; z-index: 1; align-items: start; } /* ---------- IZQUIERDA: rondas ---------- */ .pz-left { position: relative; min-height: 560px; } .pz-round-label { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 1.6rem; } .pz-round-num { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-gold-text); } .pz-round-q { font-family: var(--font-body); font-style: italic; font-size: 1.35rem; color: var(--text-white); } .pz-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .pz-chips.single { grid-template-columns: 1fr; max-width: 420px; } .pz-chip { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.15rem; background: var(--warm-surface); border: 1px solid var(--warm-border); border-radius: 16px; cursor: pointer; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease, box-shadow 0.45s ease, background 0.45s ease; opacity: 0; translate: 0 14px; animation: chipIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: var(--d, 0s); } @keyframes chipIn { to { opacity: 1; translate: 0 0; } } .pz-chip:hover { transform: translateY(-5px); border-color: rgba(234, 167, 59, 0.5); background: rgba(234, 167, 59, 0.06); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35), 0 0 22px rgba(234, 167, 59, 0.1); } .pz-chip:hover .pz-mini { rotate: -5deg; scale: 1.08; } .pz-chip:focus-within { border-color: rgba(234, 167, 59, 0.7); box-shadow: 0 0 0 3px rgba(234, 167, 59, 0.15); } /* Icono: la pieza de puzzle de esta ronda, con piel de jirafa */ .pz-mini { flex-shrink: 0; width: 58px; height: 58px; transition: rotate 0.45s cubic-bezier(0.16, 1, 0.3, 1), scale 0.45s ease; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.35)); } .pz-chip-txt { min-width: 0; } .pz-chip h3 { margin: 0; font-size: 1.02rem; font-weight: 500; line-height: 1.3; color: var(--text-white); } .pz-chip h3 button { all: unset; cursor: pointer; color: inherit; font: inherit; } /* El botón (dentro del H3) extiende su área de clic a toda la ficha */ .pz-chip h3 button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .pz-chip-desc { margin: 0.3rem 0 0; font-family: var(--font-body); font-size: 0.86rem; line-height: 1.45; color: var(--text-muted); } /* Transición de ronda: las fichas salen */ .pz-chips.leaving .pz-chip { animation: chipOut 0.35s ease forwards; animation-delay: calc(var(--d, 0s) * 0.4); } @keyframes chipOut { to { opacity: 0; translate: 0 -12px; } } /* ---------- Resultado (sustituye a las rondas) ---------- */ .pz-result { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .pz-left.resolved .pz-rounds { opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } .pz-left.resolved .pz-result { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.75s; } .pz-result-label { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-gold-text); margin: 0 0 0.8rem; } .pz-result-name { font-family: var(--font-heading); font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 600; color: var(--text-white); line-height: 1.05; letter-spacing: -0.01em; margin: 0; } .pz-result-tag { font-family: var(--font-body); font-style: italic; font-size: 1.15rem; color: var(--accent-gold); margin: 0.7rem 0 0; } .pz-result-line { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.7; color: var(--text-muted); margin: 1.1rem 0 0; max-width: 44ch; } .pz-result-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .pz-cta { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: #08090d; background: var(--accent-gold); border: none; border-radius: 40px; padding: 0.95rem 1.9rem; text-decoration: none; display: inline-flex; align-items: center; transition: var(--transition); } .pz-cta:hover { background: var(--accent-gold-hover); transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(234, 167, 59, 0.55); } .pz-cta--ghost { background: none; color: var(--accent-gold); border: 1px solid rgba(234, 167, 59, 0.45); } .pz-cta--ghost:hover { background: rgba(234, 167, 59, 0.08); box-shadow: none; } .pz-escape { display: inline-block; margin-top: 1.4rem; font-family: var(--font-body); font-style: italic; font-size: 0.95rem; color: var(--text-muted); text-decoration: none; border-bottom: 1px solid rgba(234, 167, 59, 0.3); transition: color 0.3s ease, border-color 0.3s ease; width: fit-content; } .pz-escape:hover { color: var(--accent-gold); border-color: var(--accent-gold); } /* Empate: dos jirafas */ .pz-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.75rem; } .pz-duo-card { background: var(--warm-surface); border: 1px solid var(--warm-border); border-radius: 16px; overflow: hidden; text-align: center; padding-bottom: 1.25rem; transition: var(--transition); } .pz-duo-card:hover { transform: translateY(-5px); border-color: rgba(234, 167, 59, 0.45); } .pz-duo-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; margin-bottom: 1rem; } .pz-duo-name { font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; color: var(--text-white); } .pz-duo-tag { font-family: var(--font-body); font-style: italic; font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0.9rem; } /* ---------- DERECHA: el puzzle ---------- */ .pz-board-zone { position: relative; } .pz-board-frame { position: relative; border-radius: 18px; } .pz-board-svg { display: block; width: 100%; height: auto; overflow: visible; } .pz-socket { fill: rgba(234, 167, 59, 0.03); stroke: rgba(234, 167, 59, 0.32); stroke-width: 2; stroke-dasharray: 10 8; transition: stroke 0.4s ease, fill 0.4s ease; } /* Hueco activo: respira esperando su pieza */ @keyframes socketPulse { 0%, 100% { stroke: rgba(234, 167, 59, 0.35); fill: rgba(234, 167, 59, 0.03); } 50% { stroke: rgba(234, 167, 59, 0.8); fill: rgba(234, 167, 59, 0.09); } } .pz-socket.await { animation: socketPulse 2.2s ease-in-out infinite; } .pz-placed { opacity: 0; transform-origin: center; transform-box: fill-box; } .pz-placed.on { opacity: 1; animation: snapIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes snapIn { 0% { transform: scale(1.1); } 100% { transform: scale(1); } } .pz-placed-outline { fill: none; stroke: rgba(234, 167, 59, 0.55); stroke-width: 2.5; } .pz-placed.on .pz-placed-outline { animation: strokeFlash 0.8s ease; } @keyframes strokeFlash { 0% { stroke: rgba(234, 167, 59, 1); stroke-width: 5; } 100% { stroke: rgba(234, 167, 59, 0.55); stroke-width: 2.5; } } /* Fragmentos del retrato (revelado) */ .pz-frag { opacity: 0; transition: opacity 0.7s ease; } .pz-frag.show { opacity: 1; } .pz-full { opacity: 0; transition: opacity 1s ease; } .pz-full.show { opacity: 1; } /* Barrido dorado final */ .pz-shimmer { position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(115deg, transparent 30%, rgba(234, 167, 59, 0.28) 50%, transparent 70%); background-size: 260% 100%; background-position: 120% 0; opacity: 0; pointer-events: none; } .pz-board-zone.revealed .pz-shimmer { opacity: 1; animation: pzShimmer 1.6s ease 1s forwards; } @keyframes pzShimmer { to { background-position: -140% 0; opacity: 0; } } /* Pieza en vuelo (clon) */ .pz-flying { position: fixed; z-index: 999; pointer-events: none; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45)); transition: transform 0.75s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.2s ease 0.65s; will-change: transform; } /* Progreso */ .pz-progress { margin-top: 1.4rem; font-family: var(--font-heading); font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.9rem; } .pz-progress-dots { display: flex; gap: 7px; } .pz-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(234, 167, 59, 0.45); transition: background 0.4s ease, box-shadow 0.4s ease; } .pz-dot.on { background: var(--accent-gold); box-shadow: 0 0 10px rgba(234, 167, 59, 0.6); } .pz-reset { margin-top: 1.2rem; font-family: var(--font-heading); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--text-muted); background: none; border: 1px solid var(--glass-border); border-radius: 30px; padding: 0.75rem 1.2rem; /* target táctil (antes 0.5rem ≈ 31px) */ cursor: pointer; transition: var(--transition); } .pz-reset:hover { color: var(--accent-gold); border-color: rgba(234, 167, 59, 0.45); } /* ---------- Responsive ---------- */ @media (max-width: 968px) { .puzzle-stage { grid-template-columns: 1fr; gap: 3rem; } .pz-left { min-height: 0; } .pz-result { position: relative; } .pz-chips { grid-template-columns: 1fr; } .pz-board-zone { max-width: 420px; margin: 0 auto; width: 100%; } } @media (prefers-reduced-motion: reduce) { .pz-chip { animation: none; opacity: 1; translate: 0 0; } .pz-chips.leaving .pz-chip { animation: none; opacity: 0; } .pz-socket.await { animation: none; stroke: rgba(234, 167, 59, 0.7); } .pz-placed.on { animation: none; } .pz-flying { transition: none; } .pz-board-zone.revealed .pz-shimmer { animation: none; opacity: 0; } } /* ========================================================================== MENÚ HEADER CON SUBMENÚS (onepage → escalable a páginas) ========================================================================== */ .nav-item { position: relative; display: inline-flex; align-items: center; } .nav-item > .nav-link, nav > .nav-single { display: inline-flex; align-items: center; gap: 0.35rem; } .nav-caret { width: 12px; height: 12px; opacity: 0.6; transition: transform 0.3s ease, opacity 0.3s ease; } .nav-item:hover .nav-caret, .nav-item.open .nav-caret { transform: rotate(180deg); opacity: 1; } .submenu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(10px); min-width: 250px; display: flex; flex-direction: column; gap: 2px; padding: 0.5rem; background: rgba(8, 9, 13, 0.92); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 30; } /* Puente invisible para que el hover no se corte entre la píldora y el desplegable */ .submenu::before { content: ''; position: absolute; top: -16px; left: 0; width: 100%; height: 16px; } .nav-item:hover > .submenu, .nav-item:focus-within > .submenu, .nav-item.open > .submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } nav .submenu a { padding: 0.65rem 1.1rem; border-radius: 14px; font-size: 0.9rem; white-space: nowrap; color: rgba(255, 255, 255, 0.75); } nav .submenu a:hover { background: var(--lamp-bg); color: var(--accent-gold); } /* Móvil: submenús en acordeón dentro del panel desplegable */ @media (max-width: 968px) { /* unificado con el breakpoint del menú móvil (antes 768) */ .nav-item { flex-direction: column; width: 100%; align-items: center; } .submenu { position: static; transform: none; min-width: 0; width: 100%; max-height: 0; overflow: hidden; padding: 0; margin: 0; border: none; border-radius: 0; box-shadow: none; background: transparent; opacity: 1; visibility: hidden; /* cerrado = fuera del orden de tabulación (auditoría 2026-07-14) */ transition: max-height 0.35s ease, padding 0.35s ease, visibility 0.35s; } .submenu::before { display: none; } .nav-item:hover > .submenu, .nav-item:focus-within > .submenu { max-height: 0; padding: 0; } .nav-item.open > .submenu { max-height: 400px; padding: 0.5rem 0; visibility: visible; } nav .submenu a { display: block; text-align: center; font-size: 1rem; white-space: normal; padding: 0.8rem 1.1rem; /* target táctil (antes 0.65rem ≈ 37px) */ } } /* ========================================================================== REDUCED MOTION GLOBAL (auditoría 2026-07-14) Las animaciones saltan a su estado final al instante (compatible con las animaciones de entrada "forwards": el contenido nunca queda oculto). El canvas de sinapsis y el vídeo del hero se gestionan en JS. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== ADAPTACIÓN MÓVIL Y TABLET INTEGRAL (2026-07-20) -------------------------------------------------------------------------- Bloque final: gana la cascada sobre cualquier regla anterior de igual especificidad. Corrige, por orden: (1) el scroll lateral en móvil y el header estirado —el viewport de layout se inflaba por elementos más anchos que la pantalla—; (2) el grid del hero de texto, que a una columna deja la foto de Marian a tamaño completo; (3) el footer, que se quedaba en 3 columnas; (4) el ritmo vertical (padding de sección y márgenes de cabecera pensados para escritorio); (5) tamaños de botón y objetivos táctiles. Breakpoints: 968 (panel móvil) → 900 (hero apila) → 768 (densidad) → 640 (botones/tarjetas) → 560 (píldoras y logo). ========================================================================== */ @media (max-width: 968px) { /* Cinturón de seguridad contra el paneo lateral en iOS/Android: si algún elemento futuro vuelve a ser más ancho que la pantalla, se recorta en la raíz y el viewport de layout no se ensancha. (En ≤968 no hay ningún position:sticky activo, así que el recorte no rompe nada.) */ html { overflow-x: clip; /* Header móvil: topbar (44) + barra (70) + aire. Antes 150px de escritorio dejaban un hueco al saltar a un ancla. */ scroll-padding-top: 128px; } /* --- Topbar: todo el alto de la franja es zona de toque del teléfono --- */ .topbar__inner { height: 44px; } .topbar__phone { align-self: stretch; padding: 0 0.4rem; } /* --- Footer: vuelve a UNA columna (la regla "Footer v2" de 3 columnas es posterior al media query original de 968 y lo pisaba) --- */ .site-footer__grid { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 1.5rem 0; } .site-footer__legal { margin-top: 2.5rem; padding: 1.4rem 1.25rem 1.8rem; } .site-footer nav a { padding: 0.3rem 0; /* objetivo táctil de los enlaces legales/servicio */ } /* --- Objetivos táctiles de enlaces sueltos (WCAG 2.5.8) --- */ .card-inline-cta, .science-link, .founder-link, .pz-escape { display: inline-block; padding: 0.4rem 0; margin: -0.25rem 0; } /* --- Submenús del panel: anula el translateX(-50%) de la regla de escritorio ".nav-item.open > .submenu" (más específica que el reset del media query original) — desplazaba la lista medio ancho fuera de la pantalla al abrirla con el dedo --- */ .nav-item:hover > .submenu, .nav-item:focus-within > .submenu, .nav-item.open > .submenu { transform: none; } /* --- Fundadores: menos aire entre las dos láminas apiladas --- */ .founders-duo { row-gap: 3rem; } } /* --- Hero de texto (#inicio): apila y devuelve su tamaño a la foto --- */ @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 2.75rem; } .hero__media { width: 100%; max-width: 430px; margin: 0 auto; } } /* --- Densidad general: el ritmo de escritorio (8rem + 5rem + 4rem) dejaba pantallas casi vacías entre título y contenido --- */ @media (max-width: 768px) { .section, #que-es, .section-manifesto, .section-editorial, .section-gallery, .section-science, .section-stepper, .section-pricing, #como-nace, .section-puzzle { padding: 4.5rem 0; } .section-head, #que-es .section-head { margin-bottom: 2.75rem; } .section-title { margin-bottom: 1.5rem; text-wrap: balance; } .eyebrow { margin-bottom: 1.1rem; } .lead, #que-es .section-head p, .founders-story, .puzzle-intro { font-size: 1.05rem; line-height: 1.7; } /* Manifesto (Qué hacemos / qué no) más recogido */ .manifesto-col { padding: 2rem 1.5rem 1rem; } .manifesto-title { margin-bottom: 1.75rem; } .manifesto-list li { font-size: 1.08rem; gap: 1rem; margin-bottom: 1.5rem; } /* Interruptor de tema: de "flotando sobre el titular" a botón de esquina inferior (no tapa el claim ni el panel del menú). Fondo nocturno fijo para que el icono se lea sobre cualquier sección en ambos temas. */ .theme-toggle-floating { top: auto; bottom: 1.1rem; right: 1.1rem; background: rgba(8, 9, 13, 0.6); border-color: rgba(255, 255, 255, 0.16); color: #f3f4f6; } } /* --- Botones y tarjetas a escala de pulgar --- */ @media (max-width: 640px) { .container { padding: 0 1.25rem; /* antes 2rem: en 375px deja 335px útiles */ } .hero { padding: 4.5rem 0 4rem; } .hero h1 { font-size: clamp(2.05rem, 8.2vw, 2.5rem); } .hero__sub { font-size: 1.05rem; line-height: 1.75; margin-bottom: 2rem; } .hero__cta { gap: 0.9rem; margin-bottom: 2.25rem; } .hero__cta .btn-primary, .hero__cta .btn-secondary { flex: 1 1 100%; text-align: center; } .btn-primary, .btn-secondary { padding: 1rem 1.9rem; font-size: 1rem; } .glass-hole-btn { padding: 0.95rem 2rem; font-size: 1.1rem; border-radius: 14px; } .who-btn-highlight, [data-theme="light"] .who-btn-highlight { padding: 1rem 2rem; font-size: 1rem; } /* Tarjetas de problema (#que-es) */ #que-es .card { padding: 2.1rem 1.4rem; } #que-es .card h3 { font-size: 1.3rem; } /* Bento (para quién es) */ .bento-card { padding: 1.9rem 1.4rem; } .bento-content { margin-top: 44px; } .bento-title { font-size: 1.35rem; } .bento-bg-number { font-size: 6.5rem; } /* Galería de jirafas */ .gallery-grid { gap: 1.75rem; } .gallery-title { font-size: 1.9rem; margin-bottom: 0.75rem; } .gallery-desc { font-size: 1rem; margin-bottom: 1.75rem; } /* Puzzle */ .pz-chips { gap: 0.8rem; } .pz-chip { padding: 0.9rem 1rem; gap: 0.85rem; } .pz-mini { width: 48px; height: 48px; } .pz-round-q { font-size: 1.2rem; } /* Ciencia */ .science-columns { gap: 2.5rem; margin-bottom: 3rem; } .science-paper-title { font-size: 1.35rem; margin-bottom: 0.9rem; } .who-we-are-banner { padding: 2.25rem 1.25rem; gap: 1.75rem; margin-bottom: 2.5rem; } .who-title { font-size: 1.75rem; } .who-desc { font-size: 1rem; } .medical-disclaimer { padding: 1.25rem 1.1rem; gap: 1rem; } /* Precios */ .pricing-card, .pricing-card-equal { padding: 2.5rem 1.5rem; } .pricing-amount { font-size: 3.6rem; } .trust-bar-v2 { padding: 2rem 0.5rem; margin-top: 2.5rem; } /* Límites */ .limits-grid { gap: 1rem; } .limit-card-v2 { padding: 2.1rem 1.4rem 2rem; } .limits-coda { margin-top: 3.5rem; } /* La llamada, paso a paso */ .llamada-cta { padding: 2.25rem 1.5rem; } .llamada-pasos { gap: 2rem; } .llamada-paso { grid-template-columns: 42px 1fr; gap: 1rem; } .llamada-paso-num { width: 42px; height: 42px; font-size: 0.95rem; } .llamada-paso::before { left: 20px; top: 21px; height: calc(100% + 2rem); } .llamada-paso--desvio { padding: 1.2rem 1.1rem; } /* FAQ: las respuestas aprovechan el ancho */ .faq-reply { margin: 0.85rem 0 0.35rem 1rem; } .faq-typing { left: 1rem; } /* Fundadores */ .founder-creds li { font-size: 0.92rem; } .founder-media { margin-bottom: 1.75rem; } /* Pie de foto del hero: aire lateral e inferior dentro del marco redondeado */ .media-caption { padding: 0 0.9rem 0.8rem; } } @media (max-width: 560px) { .logo-text { font-size: 2rem; } .trust { grid-template-columns: 1fr; gap: 0.7rem; } .trust li { padding: 0.8rem 1rem; font-size: 0.9rem; } }