/* ============================================================ FFIT — Lead Magnet Diagnóstico Aplicación literal de FFIT Design System ============================================================ */ /* ===== Switzer (solo pesos necesarios, woff2 local) ===== */ @font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('assets/fonts/Switzer-Extrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } /* ===== Tokens FFIT ===== */ :root { --color-blue-primary: #375CA6; --color-blue-navy: #48596B; --color-blue-sky: #AFCAE8; --color-cream: #EFEAE4; --color-cream-deep: #E4DED5; --color-white: #FFFFFF; --color-black: #1A1A1A; --font-sans: 'Switzer', 'Inter', 'Helvetica Neue', Arial, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* Fluid type — escala generosa, mobile-first */ --t-mega: clamp(56px, 11vw, 168px); /* hero / “Y aquí sigues” */ --t-h1: clamp(40px, 6.6vw, 92px); /* titulares de bloque */ --t-h2: clamp(30px, 4.4vw, 56px); /* preguntas */ --t-h3: clamp(22px, 2.8vw, 32px); --t-body: clamp(17px, 1.4vw, 21px); --t-lead: clamp(20px, 1.9vw, 28px); --t-small: clamp(13px, 1.05vw, 15px); --t-mono: clamp(13px, 1.1vw, 16px); --t-num: clamp(110px, 18vw, 240px); /* números de pregunta */ --eyebrow-tracking: 0.18em; } /* ===== Reset + base ===== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; background: var(--color-cream); } body { font-family: var(--font-sans); color: var(--color-black); background: var(--color-cream); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; } strong, b { font-weight: var(--fw-bold); } ::selection { background: var(--color-blue-primary); color: var(--color-cream); } /* ============================================================ LAYOUT — sections full-viewport ============================================================ */ .section { min-height: 100svh; display: flex; flex-direction: column; position: relative; padding: clamp(28px, 5vw, 64px) clamp(22px, 6vw, 96px); } .section-inner { width: 100%; max-width: 1240px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; justify-content: center; } .bg-cream { background: var(--color-cream); color: var(--color-black); } .bg-blue { background: var(--color-blue-primary); color: var(--color-cream); } .bg-navy { background: var(--color-blue-navy); color: var(--color-cream); } .bg-sky { background: var(--color-blue-sky); color: var(--color-black); } /* Aparición con scroll — IntersectionObserver-driven. Por defecto contenido visible (no-JS fallback). Solo se oculta si JS marca con .scroll-anim (síncronamente, antes del primer paint). */ .reveal { /* visible por defecto */ } html.scroll-anim .reveal { opacity: 0; transform: translateY(36px); transition: opacity 1s cubic-bezier(.16,.84,.28,1), transform 1s cubic-bezier(.16,.84,.28,1); will-change: opacity, transform; } html.scroll-anim .reveal.in-view { opacity: 1; transform: translateY(0); } html.scroll-anim .reveal.delay-1 { transition-delay: .08s; } html.scroll-anim .reveal.delay-2 { transition-delay: .18s; } html.scroll-anim .reveal.delay-3 { transition-delay: .30s; } html.scroll-anim .reveal.delay-4 { transition-delay: .42s; } html.scroll-anim .reveal.delay-5 { transition-delay: .54s; } /* Stagger automático para hijos (opciones, warnings, chronicle) */ html.scroll-anim .reveal.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .75s cubic-bezier(.16,.84,.28,1), transform .75s cubic-bezier(.16,.84,.28,1); } html.scroll-anim .reveal.in-view.stagger > * { opacity: 1; transform: translateY(0); } html.scroll-anim .reveal.in-view.stagger > *:nth-child(1) { transition-delay: .15s; } html.scroll-anim .reveal.in-view.stagger > *:nth-child(2) { transition-delay: .25s; } html.scroll-anim .reveal.in-view.stagger > *:nth-child(3) { transition-delay: .35s; } html.scroll-anim .reveal.in-view.stagger > *:nth-child(4) { transition-delay: .45s; } html.scroll-anim .reveal.in-view.stagger > *:nth-child(5) { transition-delay: .55s; } @media (prefers-reduced-motion: reduce) { html.scroll-anim .reveal, html.scroll-anim .reveal.stagger > * { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ============================================================ TOP NAV — barra fija mínima ============================================================ */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(22px, 6vw, 96px); pointer-events: none; } .topbar > * { pointer-events: auto; } .topbar-logo { height: 22px; width: auto; transition: opacity .3s ease; } .topbar-tag { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-blue-navy); opacity: .75; } /* Cuando el topbar está sobre fondo oscuro */ .topbar[data-theme="dark"] .topbar-logo { filter: brightness(0) invert(1); } .topbar[data-theme="dark"] .topbar-tag { color: var(--color-cream); opacity: .8; } /* ============================================================ ELEMENTOS DE TIPOGRAFÍA RECURRENTES ============================================================ */ .eyebrow { font-size: var(--t-small); font-weight: var(--fw-semibold); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-blue-primary); display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ""; display: inline-block; width: 28px; height: 2px; background: currentColor; } .bg-blue .eyebrow, .bg-navy .eyebrow { color: var(--color-blue-sky); } .bg-sky .eyebrow { color: var(--color-blue-primary); } h1, h2, h3 { font-weight: var(--fw-extrabold); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; } .lead { font-size: var(--t-lead); font-weight: var(--fw-regular); line-height: 1.45; max-width: 26ch; } .body-text { font-size: var(--t-body); line-height: 1.6; max-width: 60ch; } .body-text + .body-text { margin-top: 1.1em; } /* ============================================================ BLOQUE 1 — HERO ============================================================ */ .hero { background: var(--color-cream); } .hero .section-inner { justify-content: space-between; padding-top: 80px; padding-bottom: 40px; gap: 48px; } .hero-marker { font-size: var(--t-small); font-weight: var(--fw-semibold); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-blue-primary); display: flex; align-items: center; gap: 12px; } .hero-marker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-blue-primary); display: inline-block; } .hero-headline { font-size: clamp(38px, 6.2vw, 92px); font-weight: var(--fw-extrabold); line-height: 1; letter-spacing: -0.025em; max-width: 18ch; color: var(--color-black); } .hero-headline .em-blue { display: block; font-size: var(--t-mega); font-style: italic; color: var(--color-blue-primary); margin-top: .2em; line-height: .95; letter-spacing: -0.04em; } .hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; border-top: 1px solid rgba(26,26,26,.18); padding-top: 22px; } .hero-signature { font-size: var(--t-body); font-weight: var(--fw-medium); max-width: 32ch; } .hero-signature strong { font-weight: var(--fw-bold); color: var(--color-blue-primary); } .scroll-cue { font-size: 11px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--color-blue-navy); display: inline-flex; align-items: center; gap: 10px; opacity: .8; animation: scrollHint 2.4s ease-in-out infinite; } .scroll-cue::after { content: ""; display: inline-block; width: 1px; height: 26px; background: currentColor; transform-origin: top center; } @keyframes scrollHint { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(6px); opacity: 1; } } /* ============================================================ BLOQUE 2 — PARA QUIÉN NO ES ESTO ============================================================ */ .who-not { background: var(--color-cream); } .who-not .section-inner { gap: 40px; } .who-not h2 { font-size: var(--t-h1); max-width: 14ch; } .who-not .body-text { max-width: 56ch; } .who-not .body-text strong { color: var(--color-blue-primary); } .warning-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 760px; } .warning-item { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; } .warning-num { font-size: 14px; font-weight: var(--fw-bold); letter-spacing: var(--eyebrow-tracking); color: var(--color-blue-primary); padding-top: 4px; } /* ============================================================ BLOQUE 3 — CÓMO FUNCIONA (blue full-bleed) ============================================================ */ .how .section-inner { gap: 40px; } .how h2 { font-size: var(--t-h1); max-width: 16ch; } .how .body-text { color: var(--color-cream); } .how .body-text strong { color: var(--color-white); } .cta-pill { display: inline-flex; align-items: center; gap: 14px; padding: 22px 36px; background: var(--color-cream); color: var(--color-blue-primary); border-radius: var(--radius-pill); font-weight: var(--fw-bold); font-size: var(--t-body); letter-spacing: -0.005em; cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease; margin-top: 12px; text-decoration: none; align-self: flex-start; white-space: nowrap; } .cta-pill:hover { transform: translateY(-2px); background: var(--color-white); } .cta-pill .arrow { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; transition: transform .25s ease; } .cta-pill:hover .arrow { transform: translateX(4px); } /* Variante CTA sobre cream */ .cta-pill.dark { background: var(--color-blue-primary); color: var(--color-cream); } .cta-pill.dark:hover { background: var(--color-black); color: var(--color-cream); } /* ============================================================ BLOQUE 4 — PREGUNTAS ============================================================ */ .question { background: var(--color-cream); } .question[data-state="hidden"] { display: none; } .question .section-inner { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: start; gap: clamp(32px, 5vw, 80px); padding-top: clamp(64px, 8vw, 96px); padding-bottom: clamp(40px, 5vw, 80px); } .question-num { font-size: var(--t-num); font-weight: var(--fw-extrabold); line-height: .85; color: var(--color-blue-primary); letter-spacing: -0.06em; position: relative; top: -.08em; } .question-num small { display: block; font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: var(--eyebrow-tracking); color: var(--color-blue-navy); margin-bottom: 18px; text-transform: uppercase; } .question-content { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px); min-width: 0; } .question-title { font-size: var(--t-h2); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; line-height: 1.05; max-width: 22ch; color: var(--color-black); } .options { display: flex; flex-direction: column; gap: 12px; } .option { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 18px; padding: 22px 26px; background: var(--color-cream-deep); border: 1.5px solid transparent; border-radius: var(--radius-lg); text-align: left; font-size: var(--t-body); font-weight: var(--fw-medium); color: var(--color-black); cursor: pointer; transition: background .25s ease, border-color .25s ease, transform .2s ease, opacity .3s ease, color .25s ease; line-height: 1.4; width: 100%; } .option:hover { border-color: var(--color-blue-primary); background: #ECE5DC; } .option-letter { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--color-cream); color: var(--color-blue-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: 15px; flex-shrink: 0; transition: background .25s ease, color .25s ease; } /* Estado seleccionado */ .option.is-selected { background: var(--color-blue-primary); border-color: var(--color-blue-primary); color: var(--color-cream); } .option.is-selected .option-letter { background: var(--color-cream); color: var(--color-blue-primary); } .options[data-has-selection="true"] .option:not(.is-selected) { opacity: .45; } .options[data-has-selection="true"] .option:not(.is-selected):hover { opacity: .85; } /* Interpretación */ .interp { display: grid; grid-template-columns: 4px 1fr; gap: 22px; padding: 22px 0 4px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s ease, opacity .5s ease, padding .5s ease; } .interp.is-open { max-height: 600px; opacity: 1; padding: 22px 0 4px; } .interp::before { content: ""; background: var(--color-blue-primary); border-radius: 2px; width: 4px; } .interp-content { font-size: var(--t-body); line-height: 1.6; color: var(--color-blue-navy); font-weight: var(--fw-medium); max-width: 60ch; } .interp-content em { color: var(--color-blue-primary); font-style: italic; font-weight: var(--fw-semibold); } /* Next button block */ .next-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .4s ease, transform .4s ease; } .next-row.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .next-btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--color-black); color: var(--color-cream); border-radius: var(--radius-pill); font-weight: var(--fw-semibold); font-size: 16px; transition: background .2s ease, transform .2s ease; } .next-btn:hover { background: var(--color-blue-primary); transform: translateY(-2px); } .next-btn .arrow { width: 18px; height: 18px; display: inline-flex; } /* Micro-anclas de Ferran (después de Q1, Q4, Q7) */ .anchor { background: var(--color-blue-navy); color: var(--color-cream); padding: clamp(40px, 5vw, 64px) clamp(22px, 6vw, 96px); min-height: auto; } .anchor .section-inner { display: flex; flex-direction: row; align-items: flex-start; gap: 24px; justify-content: flex-start; } .anchor[data-state="hidden"] { display: none; } .anchor-quote { font-size: clamp(22px, 2.8vw, 36px); font-weight: var(--fw-medium); font-style: italic; line-height: 1.3; max-width: 26ch; color: var(--color-cream); letter-spacing: -0.01em; } .anchor-byline { font-size: 12px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--color-blue-sky); white-space: nowrap; flex-shrink: 0; padding-top: 12px; } /* ============================================================ BLOQUE 5 — PANTALLA DE CÁLCULO ============================================================ */ .calc { background: var(--color-blue-navy); color: var(--color-cream); } .calc[data-state="hidden"] { display: none; } .calc .section-inner { align-items: flex-start; justify-content: center; gap: 40px; } .calc-title { font-size: var(--t-h1); font-weight: var(--fw-extrabold); line-height: 1.05; letter-spacing: -0.02em; max-width: 18ch; } .calc-lines { font-family: var(--font-sans); font-size: var(--t-h3); font-weight: var(--fw-medium); color: var(--color-blue-sky); display: flex; flex-direction: column; gap: 14px; min-height: 200px; } .calc-line { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; display: inline-flex; align-items: center; gap: 14px; } .calc-line.is-visible { opacity: 1; transform: translateY(0); } .calc-line.is-done { color: var(--color-cream); } .calc-line .marker { display: inline-block; width: 10px; height: 10px; background: var(--color-blue-sky); border-radius: 2px; flex-shrink: 0; } .calc-line.is-done .marker { background: var(--color-cream); } .calc-line .typewriter { position: relative; } .calc-line .typewriter::after { content: "▍"; display: inline-block; color: var(--color-blue-sky); animation: blink 1s steps(1) infinite; margin-left: 2px; } .calc-line.is-done .typewriter::after { display: none; } @keyframes blink { 50% { opacity: 0; } } /* ============================================================ BLOQUE 6 — DIAGNÓSTICO ============================================================ */ .diagnosis { background: var(--color-blue-primary); color: var(--color-cream); } .diagnosis[data-state="hidden"] { display: none; } .diagnosis .section-inner { gap: clamp(32px, 4vw, 56px); padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(48px, 6vw, 96px); } .diagnosis-eyebrow { font-size: var(--t-small); font-weight: var(--fw-semibold); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-blue-sky); display: inline-flex; gap: 12px; align-items: center; } .diagnosis-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; } .diagnosis-profile-name { font-size: var(--t-small); font-weight: var(--fw-bold); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-blue-sky); } .diagnosis-title { font-size: var(--t-h1); font-weight: var(--fw-extrabold); line-height: 1.05; letter-spacing: -0.025em; max-width: 18ch; color: var(--color-white); } .diagnosis-body { font-size: var(--t-lead); line-height: 1.45; font-weight: var(--fw-regular); max-width: 32ch; color: var(--color-cream); } .diagnosis-body p + p { margin-top: 1em; } .diagnosis-body strong { color: var(--color-white); font-weight: var(--fw-semibold); } /* Tarjetitas con las categorías detectadas */ .diagnosis-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .diagnosis-tag { font-size: 12px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; font-weight: var(--fw-semibold); padding: 8px 14px; border: 1px solid rgba(239, 234, 228, 0.4); border-radius: var(--radius-pill); color: var(--color-cream); } .diagnosis-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start; } /* ============================================================ BLOQUE 7 — CIERRE + CTA ============================================================ */ .closing { background: var(--color-cream); } .closing[data-state="hidden"] { display: none; } .closing .section-inner { gap: clamp(28px, 3.5vw, 48px); padding-top: clamp(64px, 8vw, 96px); padding-bottom: clamp(48px, 5vw, 80px); } .closing h2 { font-size: var(--t-h1); max-width: 18ch; } .closing-story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .closing-story .body-text { max-width: 52ch; } .closing-story .body-text strong { color: var(--color-blue-primary); } /* ============================================================ CHRONICLE — strip de fotos de recuperación ============================================================ */ .chronicle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(8px, 1.5vw, 20px); } .chronicle-item { display: flex; flex-direction: column; gap: 14px; position: relative; margin: 0; } .chronicle-img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-cream-deep); transition: transform .5s cubic-bezier(.2,.7,.2,1); } .chronicle-img img { width: 100%; height: 100%; object-fit: cover; display: block; /* Tinte sutil para integrar con paleta cream/navy */ filter: saturate(.85) contrast(1.02); transition: filter .6s ease, transform .8s cubic-bezier(.2,.7,.2,1); } .chronicle-item:hover .chronicle-img img { filter: saturate(1) contrast(1.05); transform: scale(1.03); } /* Marca la foto "hoy" con borde de marca */ .chronicle-item.is-now .chronicle-img { outline: 2px solid var(--color-blue-primary); outline-offset: -2px; } .chronicle-item figcaption { display: flex; flex-direction: column; gap: 4px; } .chronicle-num { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-blue-primary); } .chronicle-item.is-now .chronicle-num { background: var(--color-blue-primary); color: var(--color-cream); padding: 3px 8px; border-radius: var(--radius-sm); align-self: flex-start; } .chronicle-label { font-size: 13px; font-weight: var(--fw-medium); color: var(--color-blue-navy); line-height: 1.35; } /* Tarjeta CTA destacada */ .cta-card { background: var(--color-black); color: var(--color-cream); border-radius: var(--radius-xl); padding: clamp(32px, 4vw, 56px); margin-top: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: clamp(28px, 4vw, 56px); align-items: center; } .cta-card-headline { font-size: var(--t-h3); font-weight: var(--fw-semibold); line-height: 1.25; max-width: 30ch; color: var(--color-cream); } .cta-card-headline .keyword { display: inline-block; background: var(--color-blue-primary); color: var(--color-cream); padding: 1px 12px; border-radius: var(--radius-sm); font-weight: var(--fw-extrabold); letter-spacing: 0.04em; } .cta-card-note { font-size: var(--t-small); color: var(--color-blue-sky); font-style: italic; margin-top: 14px; max-width: 38ch; line-height: 1.5; } .cta-card-side { display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-width: 260px; } .cta-card-side .cta-pill { margin: 0; background: var(--color-cream); color: var(--color-black); justify-content: center; padding: 22px 32px; font-size: var(--t-body); align-self: stretch; } .cta-card-side .cta-pill:hover { background: var(--color-blue-primary); color: var(--color-cream); } .cta-card-side .cta-note { font-size: 12px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-blue-sky); font-weight: var(--fw-semibold); text-align: center; } .final-line { font-size: var(--t-small); color: var(--color-blue-navy); font-style: italic; margin-top: 20px; text-align: center; opacity: .85; } /* Footer minimal */ .footer { background: var(--color-cream); padding: 36px clamp(22px, 6vw, 96px); border-top: 1px solid rgba(26,26,26,.12); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .footer-logo { height: 18px; opacity: .6; } .footer-text { font-size: 12px; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-blue-navy); font-weight: var(--fw-semibold); opacity: .6; } /* ============================================================ RESPONSIVE — mobile-first ajustes ============================================================ */ /* Tablet */ @media (max-width: 960px) { .chronicle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .diagnosis-grid, .closing-story { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); } .cta-card { grid-template-columns: 1fr; gap: 28px; } } /* Mobile */ @media (max-width: 760px) { /* Padding más ajustado en móvil + safe area iOS */ .section { padding: 56px max(20px, env(safe-area-inset-left)) 48px max(20px, env(safe-area-inset-right)); min-height: 100svh; } .topbar { padding: 12px max(16px, env(safe-area-inset-left)); } .topbar-logo { height: 17px; } .topbar-tag { font-size: 10px; } /* Hero móvil — más respirado */ .hero .section-inner { padding-top: 80px; padding-bottom: 28px; gap: 32px; } .hero-marker { font-size: 12px; } .hero-foot { flex-direction: column; align-items: flex-start; gap: 22px; } .hero-headline { font-size: clamp(28px, 7.5vw, 44px); line-height: 1.08; } .hero-headline .em-blue { font-size: clamp(56px, 18vw, 96px); margin-top: .15em; } .hero-signature { font-size: 16px; } .scroll-cue { font-size: 10px; } /* Who not + How — más compactos */ .who-not .section-inner, .how .section-inner { gap: 28px; } .who-not h2, .how h2, .closing h2 { font-size: clamp(30px, 8vw, 44px); } .warning-stack { gap: 22px; } .warning-item { grid-template-columns: 38px 1fr; gap: 12px; } .warning-num { font-size: 12px; } .cta-pill { padding: 18px 26px; font-size: 16px; width: 100%; justify-content: center; } /* Preguntas en móvil — número grande arriba, contenido debajo */ .question .section-inner { grid-template-columns: 1fr; gap: 18px; padding-top: 88px; padding-bottom: 56px; } .question-num { font-size: clamp(80px, 26vw, 160px); top: 0; margin-bottom: 4px; } .question-num small { font-size: 11px; margin-bottom: 8px; } .question-title { font-size: clamp(26px, 6.5vw, 38px); line-height: 1.1; } .options { gap: 10px; } .option { grid-template-columns: 34px 1fr; padding: 16px 18px; gap: 14px; font-size: 15.5px; min-height: 60px; align-items: center; } .option-letter { width: 30px; height: 30px; font-size: 13px; } .interp-content { font-size: 15.5px; line-height: 1.55; } .interp { gap: 16px; } .next-btn { padding: 16px 26px; font-size: 15.5px; width: 100%; justify-content: center; } .next-row { width: 100%; } /* Anclas — quote más compacto */ .anchor { padding: 44px 20px; min-height: auto; } .anchor .section-inner { flex-direction: column; gap: 14px; justify-content: flex-start; } .anchor-byline { padding-top: 0; font-size: 11px; } .anchor-quote { font-size: clamp(20px, 5.5vw, 28px); line-height: 1.3; } /* Cálculo */ .calc-title { font-size: clamp(32px, 8vw, 48px); } .calc-lines { font-size: clamp(18px, 4.5vw, 24px); } .calc-line .marker { width: 8px; height: 8px; } /* Diagnóstico */ .diagnosis .section-inner { padding-top: 72px; padding-bottom: 56px; gap: 24px; } .diagnosis-title { font-size: clamp(30px, 8vw, 48px); } .diagnosis-body { font-size: clamp(18px, 4.6vw, 24px); } .diagnosis-tag { font-size: 11px; padding: 7px 11px; } /* Closing — chronicle 2x2, story stacked, CTA card stacked */ .closing .section-inner { padding-top: 64px; padding-bottom: 56px; gap: 28px; } .chronicle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .chronicle-img { border-radius: var(--radius-md); } .chronicle-label { font-size: 12px; } .chronicle-num { font-size: 10px; } .cta-card { grid-template-columns: 1fr; padding: 28px 24px; gap: 22px; border-radius: var(--radius-lg); } .cta-card-headline { font-size: 19px; line-height: 1.35; } .cta-card-note { font-size: 13px; } .cta-card-side { min-width: 0; } .cta-card-side .cta-pill { padding: 18px 24px; font-size: 16px; } .footer { padding: 28px 20px; flex-direction: column; gap: 14px; text-align: center; } .footer-text { font-size: 11px; } } /* Móviles pequeños */ @media (max-width: 380px) { .hero .section-inner { padding-top: 70px; } .question .section-inner { padding-top: 80px; padding-bottom: 48px; } .section { padding: 48px 18px 40px; } .question-num { font-size: 88px; } } /* Touch hover removal — los hover no deben quedarse "pegados" en táctil */ @media (hover: none) { .option:hover { background: var(--color-cream-deep); border-color: transparent; } .option:active { background: #E0D9CE; } .chronicle-item:hover .chronicle-img img { filter: saturate(.85) contrast(1.02); transform: none; } .cta-pill:hover { transform: none; } } /* Hide initial sections that should animate in via JS */ .q-pending { display: none; }