/* =====================================================================
   LANDING · página principal (hero + cuestionario)
   Estilos de esta página. Colores y fuentes: ver base.css
   ===================================================================== */
/* ============ TOKENS propios de esta página (los de marca están en base.css) ============ */
:root{
  --danger:#E7A17A;     /* Ámbar */
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.10);
  --grad-text:linear-gradient(135deg, var(--gold-hi), var(--gold-deep));
  --grad-progress:linear-gradient(180deg, var(--gold-deep), var(--gold-hi));
}

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; background:var(--bg); color:var(--ink-dim);
    font-family:var(--font-body);
    font-size:16px; line-height:1.65; font-weight:400;
    -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
  }
  body::before{
    content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
    background-color: var(--bg);
    background-image:
      radial-gradient(1100px 720px at 6% -10%, rgba(40,98,170,.2), transparent 58%),
      radial-gradient(880px 620px at 112% 4%, rgba(28,58,120,.1), transparent 60%);
  }
  body::after{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  h1,h2,h3{ margin:0; color:var(--ink); font-family:var(--font-display);
    font-weight:500; line-height:1.15; text-wrap:balance; }
  p{ margin:0; }
  a{ color:var(--gold); }
  img{ display:block; max-width:100%; }
  ::selection{ background:var(--gold-deep); color:var(--ink); }
  :where(a,button,input,select,textarea):focus-visible{
    outline:none; border-radius:4px; box-shadow:var(--focus-ring), 0 0 0 1px var(--gold);
  }

  .col{ width:min(680px, 92vw); margin-inline:auto; }
  .col-wide{ width:min(760px, 94vw); margin-inline:auto; }

  .brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }

  /* ============ BUTTONS ============ */
  .btn{
    appearance:none; border:0; cursor:pointer; font-family:var(--font-ui);
    font-weight:600; font-size:15px; letter-spacing:.01em;
    height:50px; padding:0 24px; border-radius:var(--r-btn);
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    transition:filter .15s ease, transform .15s ease, border-color .15s ease, color .15s ease;
    text-decoration:none; white-space:nowrap;
  }
  .btn-gold{ background:var(--grad-action); color:var(--on-gold); }
  .btn-gold:hover{ filter:brightness(1.06); }
  .btn-gold:active{ transform:scale(.99); }
  .btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-hi); height:44px; padding:0 18px; font-size:14px; }
  .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
  .btn-block{ width:100%; }

  /* ============ TEXT ROLES ============ */
  .section-label{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
  .hero .lede .amount{ color:var(--gold); font-weight:600; white-space:nowrap; }
  .guarantee{ margin-top:0; display:inline-flex; flex-direction:row; align-items:center; gap:8px; padding:4px 0;
    border:0; background:none; }
  .guarantee > svg{ width:14px; height:14px; flex:none; color:var(--gold); }
  .guarantee .g-sub{ color:var(--ink-dim); font-size:13px; font-weight:400; }
  .h-hero{ font-size:clamp(1.3rem, 3.95vw, 2.375rem); font-weight:400; letter-spacing:.02em; margin-top:24px; line-height:1.2; }
  /* Promesa: Playfair Display 400, 48px en escritorio; cada frase en su propia línea */
  .h-hero.promise{ font-family:var(--font-display); font-weight:400; font-style:normal; font-size:clamp(1.3rem, 4vw, 2.75rem);
    line-height:1.14; letter-spacing:-.005em; text-transform:none; text-align:center; color:var(--ink); width:min(1040px, 94vw); max-width:none; }
  .h-hero.promise .p1, .h-hero.promise .p2{ display:block; }
  .h-hero.promise .p1{ color:var(--ink); text-transform:none; }
  .h-hero.promise .p2{ width:fit-content; margin-inline:auto; color:transparent; -webkit-text-fill-color:transparent; -webkit-background-clip:text; background-clip:text;
    background-image:linear-gradient(90deg, var(--gold-deep), var(--gold-hi) 50%, var(--gold)); }
  @media (min-width:700px){ .h-hero.promise .p1, .h-hero.promise .p2{ white-space:nowrap; } }
  .hero-logo{ height:32px; width:auto; margin:0 auto; }
  .h-question{ font-family:var(--font-display); font-style:normal; font-weight:400; font-size:clamp(1.7rem, 4.4vw, 2.75rem); line-height:1.14; letter-spacing:-.005em; color:var(--ink); text-wrap:balance; }
  .lede{ font-size:clamp(1rem, 2vw, 1.1rem); color:var(--ink-dim); line-height:1.6; }
  .hl{ color:var(--ink); font-weight:500; }

  .section{ padding:clamp(56px, 11vw, 92px) 0; scroll-margin-top:88px; }
  .section-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:38px; }

  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.in{ opacity:1; transform:none; }

  /* ============ HERO ============ */
  .hero{ position:relative; padding:clamp(20px,4vw,32px) 0 clamp(20px,3.5vw,28px); text-align:center; }
  .hero::before{ content:""; position:absolute; inset:0 -6% auto -6%; height:100%; pointer-events:none; z-index:0;
    background:
      radial-gradient(560px 300px at 50% 24%, rgba(40,98,170,.10), transparent 70%),
      radial-gradient(520px 280px at 50% 82%, rgba(216,185,120,.04), transparent 72%); }
  .hero .col{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
    width:min(920px, 92vw); }
  .hero h1{ max-width:46ch; }
  .hero .lede{ max-width:62ch; text-wrap:balance; margin-top:14px; font-size:clamp(1.05rem, 2.1vw, 1.3rem); line-height:1.5; }
  .h-anim{ opacity:0; transform:translateY(8px); animation:rise .3s ease forwards; }
  .h-anim:nth-child(1){ animation-delay:.02s; }
  .h-anim:nth-child(2){ animation-delay:.10s; }
  .h-anim:nth-child(3){ animation-delay:.18s; }
  .h-anim:nth-child(4){ animation-delay:.26s; }
  @keyframes rise{ to{ opacity:1; transform:none; } }
  /* Revelado cinematográfico de la promesa y la subpromesa: una onda de izquierda a derecha con blur que se disipa */
  @property --wave{ syntax:"<percentage>"; inherits:false; initial-value:150%; }
  .wave{
    -webkit-mask-image:linear-gradient(90deg, #000 calc(var(--wave) - 45%), transparent var(--wave));
            mask-image:linear-gradient(90deg, #000 calc(var(--wave) - 45%), transparent var(--wave));
    animation:wave-reveal 1.5s cubic-bezier(.22,.61,.36,1) var(--wd,0s) backwards,
              wave-fade .5s linear var(--wd,0s) backwards;
  }
  @keyframes wave-reveal{ from{ --wave:5%; filter:blur(7px); } to{ --wave:150%; filter:blur(0); } }
  @keyframes wave-fade{ from{ opacity:0; } to{ opacity:1; } }

  .hero-cta-bottom{ margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:12px; }
  .hero-cta-bottom .btn{ height:46px; }


  .hero-media{ width:100%; max-width:clamp(480px, calc((100vh - 392px) * 1.7778), 680px); /* el CTA debe quedar siempre visible en la primera pantalla */ aspect-ratio:16/9; margin:24px auto 0;
    border-radius:var(--r-card); overflow:hidden; border:1px dashed rgba(216,185,120,.45); }
  .hero-media video{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.1); transform-origin:50% 28%; }

  /* ============ MARCAS ============ */
  .brands{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:36px 0 8px; text-align:center; }
  .brands-label{ font-size:12px; font-weight:500; color:#8A8F9A; letter-spacing:.02em; }
  .brands-marquee{ width:100%; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .brands-track{ display:flex; width:max-content; animation:brands-scroll 30s linear infinite; }
  .brands-set{ display:flex; align-items:center; flex:none; gap:clamp(36px,7vw,60px); padding-right:clamp(36px,7vw,60px); }
  @keyframes brands-scroll{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
  @media (prefers-reduced-motion:reduce){
    .brands-track{ animation:none; width:100%; justify-content:center; }
    .brands-set[aria-hidden]{ display:none; }
    .brands-set{ flex-wrap:wrap; justify-content:center; padding-right:0; }
  }
  .brand-mark{ color:#9A9FAA; opacity:.82; font-weight:600; letter-spacing:.03em; font-size:1.05rem; white-space:nowrap; display:flex; align-items:center; }
  .brand-mark svg{ display:block; fill:currentColor; }
  .brand-mark img{ filter:brightness(1.5); }
  .logo-porsche{ width:118px; height:auto; }
  .logo-nike{ height:24px; width:auto; }
  .brand-stack{ flex-direction:column; gap:6px; }
  .brand-cap{ font-family:var(--font-ui); font-size:10px; font-weight:500; letter-spacing:.08em; line-height:1; }
  .logo-valencia{ height:44px; width:auto; }
  .logo-merc{ height:46px; width:auto; }
  .logo-cupra{ height:34px; width:auto; }
  .logo-seat{ height:32px; width:auto; }
  .logo-toys{ height:20px; width:auto; }
  .logo-abc{ height:26px; width:auto; }
  .brand-a3{ font-family:var(--font-ui); letter-spacing:.1em; }

  /* ============ HISTORIA ============ */
  .historia-grid{ display:flex; flex-direction:row; gap:20px; align-items:flex-start; }
  .historia{ flex:1 1 auto; min-width:0; }
  .historia p + p{ margin-top:16px; }
  .historia p{ font-size:15.5px; color:var(--ink-dim); }
  .historia-photo{ flex:none; width:34%; max-width:200px; min-width:96px;
    aspect-ratio:9/16; overflow:hidden; border-radius:var(--r-card); }
  .historia-photo img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r-card); }
  @media (max-width:420px){
    .historia-grid{ gap:12px; }
    .historia-photo{ width:28%; min-width:78px; }
    .historia p{ font-size:14px; }
  }

  /* ============ METODOLOGÍA · línea vertical con scroll ============ */
  .roadmap{ position:relative; }
  .spine{ position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--line); transform:translateX(-50%); }
  .spine i{ display:block; width:100%; height:0%; background:var(--grad-progress); transform-origin:top; }
  .rstep{ position:relative; display:flex; padding:34px 0; }
  .rstep:nth-child(odd){ justify-content:flex-end; }
  .rstep:nth-child(even){ justify-content:flex-start; }
  .rblock{ display:flex; align-items:center; gap:16px; width:calc(50% - 22px); }
  .rstep:nth-child(even) .rblock{ flex-direction:row-reverse; }
  .ring{
    flex:none; width:88px; height:88px; border-radius:50%;
    border:1px solid rgba(216,185,120,.38);
    background: radial-gradient(circle at 32% 28%, rgba(216,185,120,.18), var(--bg) 72%);
    display:flex; align-items:center; justify-content:center; color:var(--gold);
    position:relative; z-index:1;
  }
  .ring svg{ width:38px; height:38px; }
  .rbody{ display:flex; flex-direction:column; gap:8px; justify-content:center; min-width:0; }
  .rstep:nth-child(even) .rbody{ text-align:right; }
  .rbody h3{ font-size:19px; font-weight:500; }
  .rbody p{ font-size:14.5px; color:var(--ink-dim); }

  /* ============ RESULTADOS · tarjetas de cifras ============ */
  .stats{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .stat{
    position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:20px;
    padding:26px 26px 28px; border:1px solid var(--line); border-radius:var(--r-card);
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  }
  .stat::before{
    content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
    background:linear-gradient(90deg, transparent, var(--gold-deep), transparent); opacity:.9;
  }
  .stat-head{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--ink-faint);
    font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
  .stat-head svg{ width:15px; height:15px; flex:none; }
  .stat-num{ display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:6px 12px; }
  .stat-num .n{ font-family:var(--font-display); font-weight:500; color:var(--ink);
    font-size:clamp(2.4rem, 11vw, 3.2rem); line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
  .stat-num .u{ font-family:var(--font-display); font-style:italic; color:var(--gold);
    font-size:clamp(1.2rem, 3.4vw, 1.7rem); }
  .stat-foot{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
  .pill{ font-size:14px; font-weight:500; letter-spacing:.02em; color:var(--gold-hi);
    border:1px solid rgba(216,185,120,.55); background:rgba(216,185,120,.12);
    border-radius:999px; padding:7px 18px; }
  @media (max-width:640px){
    .stats{ grid-template-columns:1fr; }
    .stat{ padding:22px 20px 24px; gap:16px; }
  }

  /* ============ CASOS · carrusel deslizante ============ */
  .cases-carousel{
    position:relative; overflow:hidden; margin-inline:calc(50% - 50vw);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .cases-track{
    display:flex; align-items:flex-start; gap:28px; width:max-content;
    animation: cases-marquee 37s linear infinite;
  }
  .cases-carousel:hover .cases-track{ animation-play-state:paused; }
  @keyframes cases-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-33.3333%); } }

  .case-card{
    flex:none; width:340px; height:220px; display:flex; flex-direction:row; align-items:center;
    text-align:left; gap:16px; padding:16px;
    border:2px dashed rgba(216,185,120,.6); border-radius:var(--r-card);
  }
  .case-avatar{
    width:106px; height:188px; flex:none; border-radius:calc(var(--r-card) - 6px); overflow:hidden;
  }
  .case-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .case-copy{ display:flex; flex-direction:column; justify-content:center; gap:8px; min-width:0; height:100%; }
  .case-card h3{ font-size:1rem; font-weight:500; line-height:1.3; }
  .case-card .case-note{ font-size:12px; color:var(--ink-dim); }
  .case-handle{ font-size:12px; color:var(--ink-faint); }

  @media (prefers-reduced-motion:reduce){
    .cases-track{ animation:none; overflow-x:auto; scroll-snap-type:x proximity; }
    .case-card{ scroll-snap-align:start; }
  }

  /* ============ CLOSING / FORMULARIO FINAL ============ */
  .closing{ text-align:center; border-top:1px solid var(--line); padding-top:clamp(48px,9vw,72px); }
  .closing h2{ max-width:20ch; margin:0 auto; }
  .closing .lede{ margin:14px auto 0; max-width:42ch; }

  .quiz{
    width:100%; max-width:460px; margin:32px auto 0; text-align:left;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
    padding:26px;
  }
  .quiz-progress{ height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:10px; }
  .quiz-progress i{ display:block; height:100%; width:11.1111%; background:var(--grad-progress); transition:width .3s ease; }
  .quiz-meta{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); text-align:center; margin-bottom:20px; }
  .q-title{ display:block; font-family:var(--font-display-alt); font-weight:500; font-size:1.15rem; color:var(--ink); margin-bottom:6px; }
  .q-help{ font-size:12.5px; color:var(--ink-faint); margin-bottom:12px; }
  .q input[type="text"], .q input[type="email"], .q input[type="tel"], .q textarea{
    width:100%; font-family:var(--font-ui); font-size:18px; color:var(--ink);
    background:transparent; border:1px solid var(--line); border-radius:var(--r-btn);
    padding:12px 15px; margin-top:6px; transition:border-color .15s ease, box-shadow .15s ease;
  }
  .q input::placeholder, .q textarea::placeholder{ color:var(--ink-faint); }
  .q input:focus, .q textarea:focus{ outline:none; border-color:var(--gold); box-shadow:var(--focus-ring); }
  .consent{ display:flex; align-items:flex-start; gap:10px; margin-top:16px; font-size:12.5px; line-height:1.5; color:var(--ink-dim); cursor:pointer; }
  .consent input{ flex:none; margin-top:3px; accent-color:var(--gold); }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .q textarea{ min-height:110px; resize:vertical; }
  .q-options{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
  .opt{ position:relative; cursor:pointer; display:block; }
  .opt input{ position:absolute; opacity:0; pointer-events:none; }
  .opt-face{
    display:flex; align-items:center; gap:12px; padding:13px 16px;
    border:1px solid var(--line); border-radius:var(--r-btn); font-size:14px; color:var(--ink-dim);
    transition:border-color .15s ease, background .15s ease, color .15s ease;
  }
  .opt-face .dot{ width:16px; height:16px; border-radius:50%; border:1px solid var(--line-hi); flex:none; position:relative; }
  .opt input:checked + .opt-face{ border-color:var(--gold); background:rgba(216,185,120,.08); color:var(--ink); }
  .opt input:checked + .opt-face .dot{ border-color:var(--gold); }
  .opt input:checked + .opt-face .dot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--gold); }
  .opt input:focus-visible + .opt-face{ box-shadow:var(--focus-ring); border-color:var(--gold); }
  .q-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:22px; gap:12px; }
  .q-nav .btn-gold{ flex:1; }
  .err{ color:var(--danger); font-size:13px; margin-top:10px; }


  /* ============ FOOTER ============ */
  footer{ padding:36px 0 96px; border-top:1px solid var(--line); margin-top:clamp(56px,9vw,88px); }
  .foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
  .foot-links{ display:flex; gap:20px; }
  .foot a{ color:var(--ink-faint); text-decoration:none; font-size:13px; }
  .foot a:hover{ color:var(--ink-dim); }
  .foot .cr{ font-size:12px; color:var(--ink-faint); }

  /* ============ MOBILE STICKY CTA ============ */
  .mobile-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:90; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, transparent, var(--bg) 34%);
    transform:translateY(120%); transition:transform .3s ease;
    display:none;
  }
  .mobile-cta.show{ transform:translateY(0); }

  @media (max-width:640px){
    .mobile-cta{ display:block; }
    body{ padding-bottom:74px; }
    .spine{ left:32px; }
    .rstep, .rstep:nth-child(odd), .rstep:nth-child(even){ justify-content:flex-start; }
    .rblock, .rstep:nth-child(even) .rblock{ width:100%; flex-direction:row; gap:18px; }
    .ring{ width:64px; height:64px; }
    .ring svg{ width:28px; height:28px; }
    .rstep:nth-child(even) .rbody{ text-align:left; }
    .rbody{ min-height:64px; }
  }

  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
    .reveal,.h-anim{ opacity:1 !important; transform:none !important; }
    .wave{ animation:none !important; -webkit-mask-image:none; mask-image:none; }
  }