/* FRANKLERS · el recorrido de la landing de producto (historia.js). Usa los tokens de ficha.css.
   Cada sección lleva su capítulo numerado (.cap-k) y entra al verse (.rv). Sin JS, todo queda visible. */

/* barra de progreso del recorrido */
.progreso{ position:fixed; left:0; right:0; top:0; z-index:45; height:3px; pointer-events:none }
.progreso span{ display:block; height:100%; background:var(--red); transform:scaleX(0); transform-origin:0 50%; will-change:transform }

/* capítulo */
.cap-k{ display:flex; align-items:center; gap:12px; margin-bottom:18px; font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--w2) }
.cap-k span{ color:var(--red); font-variant-numeric:tabular-nums }
.cap-k::after{ content:''; width:40px; height:1px; background:var(--w3) }

/* entradas */
html.js .rv{ opacity:0; transform:translateY(28px); transition:opacity .8s ease var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) }
html.js .rv.on{ opacity:1; transform:none }

/* bajar desde el hero */
.baja{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; min-height:44px; font-size:14px; color:var(--w2); text-decoration:none }
.baja span{ display:inline-block; color:var(--red); animation:baja 1.8s ease-in-out infinite }
.baja:hover{ color:var(--w) }
@keyframes baja{ 0%, 100%{ transform:translateY(0) } 50%{ transform:translateY(5px) } }

/* 01 · te pasa: el dolor, a pantalla completa, línea por línea */
main > section.dolor{ max-width:none; padding:clamp(80px, 14vw, 180px) 0;
  background:radial-gradient(ellipse 70% 60% at 50% 110%, rgba(226,35,52,.22), transparent 70%), var(--k);
  border-top:1px solid var(--w3); border-bottom:1px solid var(--w3) }
.dolor-in{ max-width:980px; margin:0 auto; padding:0 var(--g) }
.dl{ font-size:clamp(26px, 3.8vw, 50px); line-height:1.15; letter-spacing:-.01em; color:rgba(255,255,255,.88); padding:2.2vh 0 }
/* el capítulo es el primer párrafo: las líneas del dolor son el 2.º, 3.º y 4.º y se van apagando */
.dl:nth-of-type(3){ color:rgba(255,255,255,.72) } .dl:nth-of-type(4){ color:rgba(255,255,255,.58) }
.giro{ margin-top:clamp(28px, 5vw, 64px); font-size:clamp(32px, 5.2vw, 72px); line-height:1.02; font-weight:500; letter-spacing:-.02em; color:var(--red) }

/* 02 · tu ganancia */
.gan-media video, .vive-fig video{ width:100%; height:100%; object-fit:cover; display:block }

/* 03 · vívelo: la foto queda fija y los momentos pasan a su lado */
.vive{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 5vw, 80px); align-items:start; border-top:1px solid var(--w3) }
.vive-media{ position:sticky; top:96px }
.vive-fig{ aspect-ratio:4/5; max-height:calc(100vh - 130px); margin:0 auto }
.vive-pasos{ list-style:none; padding:0 }
.vive-pasos li{ display:grid; grid-template-columns:56px 1fr; column-gap:16px; align-content:center; min-height:34vh; padding:20px 0;
  border-top:1px solid var(--w3); opacity:.32; transition:opacity .5s ease }
.vive-pasos li.act{ opacity:1 }
html:not(.js) .vive-pasos li{ opacity:1 }
.vp-n{ grid-row:span 2; font-size:15px; color:var(--red); font-variant-numeric:tabular-nums; padding-top:6px }
.vive-pasos b{ font-size:clamp(22px, 2.6vw, 32px); font-weight:500; line-height:1.15 }
.vive-pasos p{ margin-top:8px; font-size:18px; color:var(--w2); max-width:42ch }
.vive.solo{ grid-template-columns:1fr; max-width:900px !important }

/* 04 · lo que ganas */
.ben{ grid-template-columns:48px 1fr }
.ben-n{ font-size:15px; color:var(--red); font-variant-numeric:tabular-nums; padding-top:2px }

/* 05 · en números */
main > section.cifras{ border-top:1px solid var(--w3) }
.cif-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 3vw, 40px) }
.cif{ padding-top:20px; border-top:2px solid var(--red) }
.cif b{ display:block; font-size:clamp(56px, 8vw, 120px); font-weight:500; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap }
.cif p{ margin-top:12px; font-size:17px; color:var(--w2); max-width:24ch }

/* 06 · 3D */
.tresd{ display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(24px, 5vw, 80px); align-items:center; border-top:1px solid var(--w3) }
.td-visor{ position:relative; border-radius:var(--r); overflow:hidden;
  background:radial-gradient(ellipse 60% 55% at 50% 45%, #2c2d33, var(--k3) 60%, var(--k2)) }
.td-visor model-viewer{ display:block; width:100%; height:clamp(380px, 62vh, 640px); --poster-color:transparent }
.td-ayuda{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); padding:6px 14px; border-radius:99px; background:rgba(0,0,0,.6);
  font-size:13px; color:var(--w2); pointer-events:none; white-space:nowrap }
.td-sab{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px }
.td-sab button{ min-height:44px; padding:0 18px; border:1px solid var(--w3); border-radius:99px; background:transparent; cursor:pointer; font-size:15px }
.td-sab [aria-pressed="true"]{ background:var(--w); color:var(--k); border-color:var(--w) }

/* 07 · la diferencia: un capítulo más, mismo estilo */
.compara .cap-k, .faq .cap-k{ margin-bottom:18px }

/* 12 · tu decisión: el cierre con lo elegido arriba */
main > section.cierre{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 5vw, 80px); align-items:center;
  max-width:none; padding-left:max(var(--g), calc((100% - var(--max)) / 2 + var(--g))); padding-right:max(var(--g), calc((100% - var(--max)) / 2 + var(--g)));
  background:radial-gradient(ellipse 60% 70% at 85% 50%, rgba(226,35,52,.2), transparent 70%), var(--k2); border-top:1px solid var(--w3) }
.cie-media{ aspect-ratio:4/5 }
.cie-t{ font-size:clamp(36px, 5.4vw, 76px); font-weight:500; line-height:1; letter-spacing:-.02em; margin-bottom:18px }
.cie-box{ display:grid; gap:12px; margin-top:28px; padding:22px; border:1px solid var(--w3); border-radius:var(--r); background:rgba(3,3,3,.6); max-width:480px }
.cie-res{ font-size:14px; color:var(--w2) }
.cie-box .add{ min-height:52px }

/* una columna con contenido ancho no debe ensanchar la grilla */
.vive > *, .tresd > *, main > section.cierre > *{ min-width:0 }

@media (max-width:860px){
  .vive, .tresd, main > section.cierre{ grid-template-columns:1fr }
  .vive-media{ position:relative; top:auto }
  .vive-fig{ max-height:none; aspect-ratio:1 }
  .vive-pasos li{ min-height:0; padding:22px 0; opacity:1 }
  .cif-grid{ grid-template-columns:1fr; gap:28px }
  .cie-media{ aspect-ratio:1; order:2 }
  .dl{ padding:1.4vh 0 }
}
@media (prefers-reduced-motion:reduce){
  html.js .rv{ opacity:1; transform:none; transition:none }
  .baja span{ animation:none }
  .vive-pasos li{ transition:none }
}