:root{
    --tinta:#1B1340; --tinta-2:#2E2463; --naranja:#FF5A1F; --naranja-osc:#D9440C;
    --amarillo:#FFC531; --blanco:#FFFFFF; --vitrina:#F1F0F4; --gris:#6B6680; --linea:#E3E1EA;
    --ancho:1440px; --lado:clamp(16px,4vw,48px);
  }
  *{ box-sizing:border-box }
  html{ scroll-behavior:smooth }
  body{ margin:0; background:var(--blanco); color:var(--tinta); font-family:'Archivo',system-ui,sans-serif; font-stretch:100%; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased }
  img{ max-width:100%; height:auto; display:block }
  a{ color:inherit }
  button{ font:inherit; color:inherit }
  :focus-visible{ outline:3px solid var(--naranja); outline-offset:3px }
  .marco{ max-width:var(--ancho); margin:0 auto; padding:0 var(--lado) }

  /* Display: Archivo ultra condensada */
  .display{ font-stretch:62%; font-weight:900; text-transform:uppercase; line-height:.86; letter-spacing:-.005em; margin:0 }
  h2.display{ font-size:clamp(44px,6.4vw,96px) }
  h3{ margin:0; font-weight:700; font-size:16px; line-height:1.3 }

  /* Botones píldora */
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 26px; border-radius:999px; font-weight:600; font-size:16px; text-decoration:none; border:0; cursor:pointer; transition:background .15s, color .15s, box-shadow .15s }
  .btn-tinta{ background:var(--tinta); color:var(--blanco) } .btn-tinta:hover{ background:var(--tinta-2) }
  .btn-naranja{ background:var(--naranja); color:var(--blanco) } .btn-naranja:hover{ background:var(--naranja-osc) }
  .btn-borde{ background:transparent; box-shadow:inset 0 0 0 1.5px currentColor } .btn-borde:hover{ box-shadow:inset 0 0 0 2.5px currentColor }
  .btn svg{ width:20px; height:20px; flex:none }

  /* Aviso y menú */
  .aviso{ background:var(--vitrina); text-align:center; font-size:13px; font-weight:600; padding:9px var(--lado) }
  header{ position:sticky; top:0; z-index:30; background:var(--blanco) }
  .nav-abierto{ overflow:hidden }
  .menu{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px }
  .menu .logo img{ height:30px; width:auto }
  .nav-lista{ display:flex; gap:6px; list-style:none; margin:0; padding:0 }
  .nav-link{ display:inline-flex; align-items:center; gap:6px; height:64px; padding:0 12px; border:0; background:none; font:inherit; font-weight:600; font-size:16px; color:var(--tinta); text-decoration:none; cursor:pointer; box-shadow:inset 0 -2px 0 transparent; transition:box-shadow .15s }
  .nav-link:hover, .has-sub.open > .nav-link{ box-shadow:inset 0 -2px 0 var(--tinta) }
  .chev{ width:12px; height:12px; transition:transform .2s ease }
  .has-sub.open .chev{ transform:rotate(180deg) }
  .panel{ position:absolute; left:0; right:0; top:100%; overflow:hidden; background:var(--blanco); border-top:1px solid var(--linea); box-shadow:0 24px 40px -24px rgba(27,19,64,.35); visibility:hidden; opacity:0; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility 0s .18s }
  .has-sub.open .panel{ visibility:visible; opacity:1; transform:none; transition:opacity .18s ease, transform .18s ease }
  .panel-in{ display:flex; gap:48px; padding-top:28px; padding-bottom:32px }
  .panel-cards{ display:flex; gap:16px; flex:1 }
  .pc{ display:flex; gap:14px; align-items:center; flex:1 1 0; min-width:0; max-width:330px; padding:12px; border-radius:14px; text-decoration:none; transition:background .15s }
  .pc:hover{ background:var(--vitrina) }
  .pc img, .pc .mini-tapa{ width:64px; height:90px; flex:none; border-radius:4px; box-shadow:0 10px 18px -10px rgba(27,19,64,.6) }
  .pc .mini-tapa{ display:flex; align-items:flex-end; padding:6px; overflow:hidden; overflow-wrap:anywhere; font-stretch:62%; font-weight:900; text-transform:uppercase; font-size:11px; line-height:.95 }
  .pc b{ display:block; font-size:15px; line-height:1.25 }
  .pc small{ display:block; color:var(--gris); font-size:14px; margin-top:2px }
  .pc em{ display:block; font-style:normal; font-weight:700; font-size:14px; margin-top:6px }
  .pc.pronto em{ color:var(--gris); font-weight:600 }
  .panel-tit{ margin:0 0 10px; font-weight:700; color:var(--gris); font-size:14px }
  .panel-links{ list-style:none; margin:0; padding:0; display:grid; gap:10px; align-content:start; min-width:220px }
  .panel-links a{ text-decoration:none; font-weight:600 } .panel-links a:hover{ text-decoration:underline }
  .panel-cols{ gap:96px }
  .velo{ position:fixed; inset:0; z-index:20; background:rgba(27,19,64,.25) }
  .burger{ display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; padding:10px; flex-direction:column; justify-content:space-between }
  .burger span{ display:block; height:2px; background:var(--tinta); border-radius:2px; transition:transform .2s ease, opacity .2s ease }
  .nav-abierto .burger span:nth-child(1){ transform:translateY(10px) rotate(45deg) } .nav-abierto .burger span:nth-child(2){ opacity:0 } .nav-abierto .burger span:nth-child(3){ transform:translateY(-10px) rotate(-45deg) }
  .menu .der{ justify-self:end; display:flex; align-items:center; gap:8px }
  .menu .der .btn{ min-height:40px; padding:0 18px; font-size:15px }

  /* Hero */
  .hero{ background:var(--tinta); color:var(--blanco); position:relative; overflow:hidden }
  .hero .marco{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; gap:24px; min-height:min(calc(100svh - 101px),760px); padding-top:56px; padding-bottom:56px }
  .hero h1{ font-size:clamp(72px,12.5vw,196px) }
  .hero h1 span{ display:block; overflow:hidden; padding-top:.1em; margin-top:-.1em }
  .hero h1 span i{ display:block; font-style:normal; animation:sube .9s cubic-bezier(.2,.75,.15,1) both }
  .hero h1 span:nth-child(2) i{ animation-delay:.09s } .hero h1 span:nth-child(3) i{ animation-delay:.18s }
  @keyframes sube{ from{ transform:translateY(105%) } to{ transform:none } }
  .hero .bajada{ max-width:440px; font-size:18px; color:#D8D3EC; margin:28px 0 28px }
  .hero .bajada b{ color:var(--blanco); font-weight:700 }
  .hero .acciones{ display:flex; gap:12px; flex-wrap:wrap }
  .hero .btn-tinta{ background:var(--blanco); color:var(--tinta) } .hero .btn-tinta:hover{ background:var(--amarillo) }
  .hero .btn-borde{ color:var(--blanco) }
  .escena{ position:relative; align-self:center; height:100%; min-height:420px }
  .escena img{ position:absolute; border-radius:6px; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 40px 70px -30px rgba(0,0,0,.7) }
  .escena .modelo{ right:0; top:0; height:100%; width:auto; max-width:none; aspect-ratio:941/1672; object-fit:cover; border-radius:4px }
  .escena .p1{ width:44%; left:0; bottom:5%; transform:rotate(-5deg); animation:entra 1s .15s cubic-bezier(.2,.75,.15,1) both }
  @keyframes entra{ from{ transform:translateY(40px) rotate(-9deg); opacity:0 } to{ transform:rotate(-5deg); opacity:1 } }
  .sello{ position:absolute; left:4%; top:12%; background:var(--amarillo); color:var(--tinta); border-radius:999px; padding:12px 20px; font-stretch:62%; font-weight:900; font-size:34px; line-height:1; text-transform:uppercase; transform:rotate(-4deg) }

  /* Vitrina */
  .bloque{ padding:72px 0 }
  .cab{ display:flex; align-items:end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px }
  .cab .cuenta{ font-weight:600; color:var(--gris); font-size:16px; margin-left:12px; font-stretch:100%; text-transform:none; letter-spacing:0 }
  .filtros{ display:flex; gap:8px; flex-wrap:wrap }
  .filtros button{ min-height:40px; padding:0 18px; border-radius:999px; border:1.5px solid var(--linea); background:var(--blanco); font-weight:600; font-size:15px; cursor:pointer }
  .filtros button:hover{ border-color:var(--tinta) }
  .filtros button[aria-pressed="true"]{ background:var(--tinta); border-color:var(--tinta); color:var(--blanco) }
  .grilla{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:32px 12px }
  .prod{ text-decoration:none; display:block }
  .prod[hidden]{ display:none }
  .foto{ aspect-ratio:1/1; background:var(--vitrina); display:grid; place-items:center; overflow:hidden; margin-bottom:14px; position:relative }
  .foto > *{ transition:transform .5s cubic-bezier(.2,.75,.15,1) }
  .prod:hover .foto > *{ transform:scale(1.04) }
  .foto img{ width:54%; transform-origin:center; box-shadow:0 22px 34px -18px rgba(27,19,64,.6); border-radius:3px }
  .tapa{ width:60%; aspect-ratio:148/210; border-radius:3px; padding:9% 8%; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 22px 34px -18px rgba(27,19,64,.45) }
  .tapa{ container-type:inline-size }
  .tapa b{ font-stretch:62%; font-weight:900; text-transform:uppercase; line-height:.86; font-size:27cqi }
  .tapa small{ font-weight:600; font-size:12px; opacity:.8 }
  .estado{ font-weight:600; font-size:15px; color:var(--naranja-osc) }
  .estado.pronto{ color:var(--gris) }
  .prod h3{ margin-top:2px } .prod .cat{ color:var(--gris); font-size:15px }
  .prod .precio{ font-weight:700; margin-top:6px }

  /* Por dentro */
  .dentro{ background:var(--vitrina) }
  .tira{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px }
  .tira figure{ margin:0; scroll-snap-align:start }
  .tira img{ border-radius:4px; box-shadow:0 18px 30px -20px rgba(27,19,64,.5) }
  .tira figcaption{ margin-top:12px; font-weight:600 }
  .tira figcaption span{ display:block; font-weight:400; color:var(--gris); font-size:15px }

  /* Incluye */
  .incluye{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; align-items:start }
  .lista{ list-style:none; margin:0; padding:0 }
  .lista li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:18px 0; border-top:1px solid var(--linea); font-size:18px }
  .lista li:last-child{ border-bottom:1px solid var(--linea) }
  .lista li span{ color:var(--gris); font-size:16px; text-align:right }
  .compra{ margin-top:28px; display:flex; align-items:center; gap:20px; flex-wrap:wrap }
  .compra .monto{ font-stretch:62%; font-weight:900; font-size:64px; line-height:.9 }
  .aviso-salud{ color:var(--gris); font-size:14px; margin-top:16px; max-width:520px }

  /* Pasos */
  .pasos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; counter-reset:p; list-style:none; margin:0; padding:0 }
  .pasos li{ background:var(--vitrina); padding:28px 28px 32px; counter-increment:p }
  .pasos li:before{ content:counter(p); display:block; font-stretch:62%; font-weight:900; font-size:88px; line-height:.8; color:var(--naranja); margin-bottom:24px }
  .pasos h3{ font-size:20px; margin-bottom:6px } .pasos p{ margin:0; color:var(--gris) }

  /* Preguntas */
  .faq{ max-width:820px }
  details{ border-top:1px solid var(--linea) } details:last-child{ border-bottom:1px solid var(--linea) }
  summary{ list-style:none; cursor:pointer; padding:22px 40px 22px 0; font-weight:600; font-size:18px; position:relative }
  summary::-webkit-details-marker{ display:none }
  summary:after{ content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; border-right:2px solid var(--tinta); border-bottom:2px solid var(--tinta); transform:translateY(-70%) rotate(45deg); transition:transform .2s }
  details[open] summary:after{ transform:translateY(-20%) rotate(225deg) }
  details p{ margin:0 0 22px; color:var(--gris); max-width:640px }

  /* Cierre y pie */
  .cierre{ background:var(--naranja); color:var(--tinta) }
  .cierre .marco{ display:flex; align-items:end; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-top:72px; padding-bottom:72px }
  .cierre h2{ font-size:clamp(56px,9vw,140px); margin-bottom:32px }
  .cierre .marco{ align-items:center; padding-bottom:0 }
  .cierre-tx{ padding-bottom:72px }
  .cierre-foto{ width:min(360px,34%); aspect-ratio:3/4; object-fit:cover; object-position:50% 62%; align-self:end; border-radius:6px 6px 0 0 }

  /* Qué hacemos */
  .que{ padding:88px 0 8px }
  .que-cab{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:48px; align-items:end }
  .que h2.display{ font-size:clamp(46px,6.6vw,104px) }
  .que-bajada{ margin:0; font-size:19px; color:var(--gris); max-width:440px }
  .que-bajada b{ display:block; margin-top:12px; color:var(--tinta); font-size:20px }
  .formatos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:56px; border-top:2px solid var(--tinta) }
  .formato{ padding:28px 32px 8px 0 }
  .formato + .formato{ padding-left:32px; border-left:1px solid var(--linea) }
  .formato h3{ font-stretch:62%; font-weight:900; text-transform:uppercase; font-size:56px; line-height:.9; margin-bottom:14px }
  .formato p{ margin:0 0 16px; color:var(--gris); max-width:340px }
  .formato a{ display:inline-block; margin:0 14px 8px 0; font-weight:700; text-decoration:none; color:var(--naranja-osc); border-bottom:1.5px solid currentColor }
  .formato a:hover{ color:var(--tinta) }
  .areas{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:36px 0 0; padding:0 }
  .areas li{ border:1.5px solid var(--linea); border-radius:999px; padding:10px 18px; font-weight:700 }
  .areas li.pronto{ color:var(--gris); border-style:dashed }
  .areas li span{ font-weight:600; font-size:13px; margin-left:6px; background:var(--vitrina); padding:3px 8px; border-radius:999px }
  @media (max-width:820px){
    .que{ padding:56px 0 0 }
    .que-cab{ grid-template-columns:1fr; gap:18px }
    .formatos{ grid-template-columns:1fr; margin-top:32px }
    .formato, .formato + .formato{ padding:22px 0 14px; border-left:0 }
    .formato + .formato{ border-top:1px solid var(--linea) }
    .formato h3{ font-size:46px }
  }

  /* Protocolo del sueño */
  .noche{ background:var(--tinta); color:var(--blanco) }
  .noche h2.display{ line-height:.96 }
  .noche .eti{ margin:0 0 10px; font-weight:700; color:var(--amarillo) }
  .noche .bajada-noche{ color:#D8D3EC; font-size:18px; max-width:460px; margin:18px 0 28px }
  .noche .lista li{ border-color:rgba(255,255,255,.14) }
  .noche .lista li span{ color:#B9B2D3 }
  .noche .aviso-salud{ color:#B9B2D3 }
  .paginas{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:460px }
  .paginas img{ border-radius:4px; box-shadow:0 24px 40px -24px rgba(0,0,0,.8) }
  .paginas img:last-child{ transform:translateY(28px) }
  .btn-amarillo{ background:var(--amarillo); color:var(--tinta) } .btn-amarillo:hover{ background:#FFD45E }

  .glp{ background:var(--vitrina) }
  .glp .eti{ margin:0 0 10px; font-weight:700; color:var(--naranja-osc) }
  .glp .bajada-glp{ color:var(--gris); font-size:18px; max-width:480px; margin:18px 0 28px }
  .glp .bajada-glp b{ color:var(--tinta) }
  .glp-video{ margin:0 0 64px }
  .glp-video video{ display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:18px; background:var(--tinta); box-shadow:0 30px 60px -36px rgba(27,19,64,.6) }
  .glp-video figcaption{ margin-top:12px; font-size:15px; color:var(--gris) }
  @media (max-width:820px){ .glp-video{ margin-bottom:40px } .glp-video video{ border-radius:12px } }
  .glp-titulo{ display:flex; align-items:center; gap:20px }
  .glp-mol{ width:110px; flex:none }
  .glp-mol .enl path{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .7s ease }
  .glp-mol .nod circle{ transform-box:fill-box; transform-origin:center; transform:scale(0); transition:transform .45s cubic-bezier(.3,1.6,.5,1) }
  .glp-anim{ margin:0; background:#fff; border-radius:18px; padding:22px; max-width:520px }
  .glp-pasos{ list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
  .glp-pasos li{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; background:var(--vitrina); border-radius:999px; padding:6px 12px 6px 6px; opacity:.3; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease }
  .glp-pasos span{ display:inline-flex; width:26px; height:26px; border-radius:50%; background:var(--naranja); color:#fff; font-size:13px; align-items:center; justify-content:center; flex:none }
  .glp-pasos li:last-child span{ background:var(--tinta); color:var(--amarillo) }
  .glp-graf{ display:block; width:100% }
  .glp-graf .c1, .glp-graf .c2{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.3s cubic-bezier(.45,.05,.3,1) }
  .glp-graf .ley{ opacity:0; transition:opacity .5s ease }
  .glp-anim figcaption{ margin-top:8px; font-size:13px; color:var(--gris) }
  .glp.in .glp-mol .enl path{ stroke-dashoffset:0 }
  .glp.in .glp-mol .nod circle{ transform:scale(1) }
  .glp.in .glp-mol .nod circle:nth-child(2){ transition-delay:.08s } .glp.in .glp-mol .nod circle:nth-child(3){ transition-delay:.16s } .glp.in .glp-mol .nod circle:nth-child(4){ transition-delay:.24s } .glp.in .glp-mol .nod circle:nth-child(5){ transition-delay:.32s } .glp.in .glp-mol .nod circle:nth-child(n+6){ transition-delay:.4s }
  .glp.in .glp-pasos li{ opacity:1; transform:none }
  .glp.in .glp-pasos li:nth-child(1){ transition-delay:.3s } .glp.in .glp-pasos li:nth-child(2){ transition-delay:.55s } .glp.in .glp-pasos li:nth-child(3){ transition-delay:.8s }
  .glp.in .glp-graf .c1{ stroke-dashoffset:0; transition-delay:1s }
  .glp.in .glp-graf .c2{ stroke-dashoffset:0; transition-delay:1.6s }
  .glp.in .glp-graf .ley{ opacity:1; transition-delay:2.4s }
  @media (prefers-reduced-motion:reduce){
    .glp-mol .enl path, .glp-graf .c1, .glp-graf .c2{ stroke-dashoffset:0; transition:none }
    .glp-mol .nod circle{ transform:none; transition:none }
    .glp-pasos li{ opacity:1; transform:none; transition:none }
    .glp-graf .ley{ opacity:1; transition:none }
  }
  @media (max-width:520px){ .glp-mol{ width:76px } .glp-pasos li{ font-size:13px; padding-right:8px } .glp-anim{ padding:16px } }

  /* Paso a paso */
  .cab-nota{ margin:0; max-width:420px; color:var(--gris); font-size:16px }
  .ejercicios{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 12px }
  .ejercicios figure{ margin:0 }
  .ejercicios img{ width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--vitrina) }
  .ejercicios figcaption{ margin-top:10px; font-weight:700 }
  footer{ background:var(--tinta); color:#C9C3DE; font-size:15px; padding:56px 0 28px }
  .pie{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:32px }
  .red{ display:inline-flex; align-items:center; gap:10px }
  .ico-red{ width:20px; height:20px; flex:none }
  .libro{ display:inline-flex; align-items:center; gap:10px; margin-top:16px; padding:10px 14px; border:1.5px solid rgba(255,255,255,.35); border-radius:10px; color:var(--blanco); font-weight:600; text-decoration:none }
  .libro:hover{ border-color:var(--blanco); background:rgba(255,255,255,.06) }
  .libro svg{ width:22px; height:22px; flex:none }
  .pie img{ height:32px; width:auto; margin-bottom:14px }
  .pie h4{ color:var(--blanco); margin:0 0 12px; font-size:15px }
  .pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
  .pie a{ text-decoration:none } .pie a:hover{ color:var(--blanco); text-decoration:underline }
  .legal{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:20px; font-size:13px }

  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto }
    .hero h1 span i, .escena .p1{ animation:none }
    .foto > *{ transition:none }
  }
  @media (max-width:1080px){
    .grilla{ grid-template-columns:repeat(2,minmax(0,1fr)) }
    .incluye{ grid-template-columns:1fr; gap:24px }
  }
  @media (max-width:820px){
    .menu{ grid-template-columns:1fr auto }
    .burger{ display:flex }
    .menu .der .btn{ display:none }
    .nav{ position:fixed; left:0; right:0; bottom:0; top:var(--nav-top,64px); background:var(--blanco); overflow-y:auto; padding:8px var(--lado) 32px; visibility:hidden; opacity:0; transition:opacity .2s ease, visibility 0s .2s; z-index:40 }
    .nav-abierto .nav{ visibility:visible; opacity:1; transition:opacity .2s ease }
    .nav-lista{ flex-direction:column; gap:0 }
    .nav-lista > li{ border-bottom:1px solid var(--linea) }
    .nav-link{ width:100%; justify-content:space-between; height:60px; padding:0; font-size:20px; box-shadow:none !important }
    .chev{ width:16px; height:16px }
    .panel{ position:static; display:none; visibility:visible; opacity:1; transform:none; box-shadow:none; border:0; transition:none }
    .has-sub.open .panel{ display:block }
    .panel-in, .panel-cols{ flex-direction:column; gap:16px; padding:0 0 20px }
    .panel-cards{ flex-direction:column; gap:4px }
    .pc{ width:auto; padding:8px 0 }
    .pc img, .pc .mini-tapa{ width:52px; height:73px }
    .velo{ display:none }
    .hero .marco{ grid-template-columns:1fr; min-height:0; padding-top:40px; padding-bottom:0 }
    .escena{ min-height:0; height:auto; aspect-ratio:1/0.9; margin:0 -8px }
    .pasos{ grid-template-columns:1fr }
    .pie{ grid-template-columns:1fr 1fr } .pie > div:first-child{ grid-column:1/-1 }
    .bloque{ padding:56px 0 }
  }
  @media (max-width:520px){
    .grilla{ gap:28px 8px }
    .prod h3{ font-size:15px } .prod .cat{ font-size:14px }
    .hero .acciones .btn{ flex:1 1 100% }
    .lista li{ font-size:16px }
    .tira{ grid-auto-columns:72% }
    .ejercicios{ grid-template-columns:1fr }
    .cierre-foto{ width:100%; aspect-ratio:4/3; object-position:50% 55% }
    .cierre-tx{ padding-bottom:0 }
  }

  /* ===== Inicio: portada de marca ===== */
  .hero-marca .marco{ align-items:center }
  .hero-marca h1{ font-size:clamp(64px,9.6vw,150px) }
  .abanico{ position:relative; align-self:center; height:100%; min-height:440px }
  .abanico img{ position:absolute; width:44%; border-radius:6px; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 40px 70px -30px rgba(0,0,0,.75); animation:abre 1s cubic-bezier(.2,.75,.15,1) both }
  .abanico .a1{ left:2%; top:14%; transform:rotate(-9deg); animation-delay:.1s }
  .abanico .a2{ left:28%; top:4%; transform:rotate(0deg); z-index:2; animation-delay:.2s }
  .abanico .a3{ left:54%; top:14%; transform:rotate(9deg); animation-delay:.3s }
  @keyframes abre{ from{ opacity:0; translate:0 40px } to{ opacity:1; translate:0 0 } }
  .abanico .sello{ left:auto; right:4%; top:auto; bottom:6%; z-index:3 }

  /* ===== Categorías ===== */
  .temas{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px }
  .tema{ display:flex; flex-direction:column; justify-content:space-between; gap:28px; min-height:200px; padding:22px; border-radius:18px; text-decoration:none; background:var(--vitrina); border:0; text-align:left; cursor:pointer; font:inherit; color:var(--tinta); transition:transform .2s ease, box-shadow .2s ease }
  .tema:hover{ transform:translateY(-3px); box-shadow:0 18px 30px -22px rgba(27,19,64,.5) }
  .tema{ container-type:inline-size }
  .tema b{ display:block; font-stretch:62%; font-weight:900; text-transform:uppercase; font-size:min(40px,15cqi); line-height:.9; overflow-wrap:anywhere }
  .tema small{ display:block; color:var(--gris); font-size:15px; margin-top:8px; font-weight:500 }
  .tema .n{ font-weight:700; font-size:14px }
  .tema.t-fit{ background:var(--tinta); color:#fff } .tema.t-fit small{ color:#C9C3DE } .tema.t-fit .n{ color:var(--amarillo) }
  .tema.t-ali{ background:var(--naranja); color:#fff } .tema.t-ali small{ color:#FFE3D6 }
  .tema.t-bie{ background:var(--amarillo) } .tema.t-bie small{ color:#5B4A12 }
  .tema .n.pronto{ color:var(--gris) }

  /* ===== Tarjetas de producto (versión con botones) ===== */
  .prod .acc{ display:flex; gap:14px; align-items:center; margin-top:10px; flex-wrap:wrap }
  .prod .acc a, .prod .acc button{ font:inherit; font-weight:700; font-size:15px; background:none; border:0; padding:0; cursor:pointer; color:var(--naranja-osc); text-decoration:none; border-bottom:1.5px solid currentColor }
  .prod .acc a:hover, .prod .acc button:hover{ color:var(--tinta) }
  .prod .cat-tag{ font-size:13px; font-weight:700; color:var(--gris); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px }
  .prod > a.cubre{ text-decoration:none; display:block }
  .grilla.g4{ grid-template-columns:repeat(4,minmax(0,1fr)) }

  /* ===== Packs ===== */
  .packs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
  .pack{ border:1.5px solid var(--linea); border-radius:22px; padding:26px; display:flex; flex-direction:column; gap:18px; background:var(--blanco) }
  .pack.top{ border-color:var(--tinta); box-shadow:0 24px 40px -30px rgba(27,19,64,.55); position:relative }
  .pack.top:before{ content:"El más completo"; position:absolute; top:-13px; left:24px; background:var(--amarillo); color:var(--tinta); font-weight:800; font-size:13px; padding:4px 12px; border-radius:999px }
  .pack h3{ font-stretch:62%; font-weight:900; text-transform:uppercase; font-size:38px; line-height:.92 }
  .pack .tapas{ display:flex; gap:8px }
  .pack .tapas img{ width:64px; border-radius:3px; box-shadow:0 12px 20px -12px rgba(27,19,64,.6) }
  .pack ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; color:var(--gris) }
  .pack ul li:before{ content:"✓  "; color:var(--naranja); font-weight:800 }
  .pack .cuesta{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:auto }
  .pack .cuesta b{ font-stretch:62%; font-weight:900; font-size:56px; line-height:.9 }
  .pack .cuesta s{ color:var(--gris) }
  .pack .ahorro{ font-weight:700; color:var(--naranja-osc); font-size:15px }

  /* ===== Lista de espera ===== */
  .espera-banda{ background:var(--tinta); color:#fff }
  .espera-banda .marco{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; padding-top:72px; padding-bottom:72px }
  .espera-banda p.sub{ color:#D8D3EC; font-size:18px; max-width:460px; margin:18px 0 0 }
  .f-espera{ display:grid; gap:14px }
  .f-espera label{ display:block; font-weight:600; font-size:15px; margin-bottom:6px }
  .f-espera label small{ font-weight:400; opacity:.75 }
  .f-espera select, .f-espera input[type=email], .f-espera input[type=tel]{ width:100%; font:inherit; border-radius:12px; padding:12px 14px; border:1.5px solid var(--linea); background:#fff; color:var(--tinta) }
  .f-espera .dos{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
  .f-espera .check{ display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:14px; line-height:1.4 }
  .f-espera .check input{ margin-top:3px; accent-color:var(--naranja) }
  .f-espera .msg{ font-weight:600; min-height:1.4em; margin:0 }
  .f-espera .msg.err{ color:#FF9C7A } .f-espera .msg.ok{ color:var(--amarillo) }
  .oculto{ position:absolute; left:-9999px }
  dialog.dlg{ border:0; border-radius:22px; padding:28px; width:min(520px,calc(100vw - 32px)); color:var(--tinta) }
  dialog.dlg::backdrop{ background:rgba(27,19,64,.55) }
  dialog.dlg .msg.err{ color:#B42318 } dialog.dlg .msg.ok{ color:#12805C }
  .dlg-cerrar{ position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; border:0; background:var(--vitrina); cursor:pointer; font-size:22px; line-height:1 }

  /* ===== Visor de vista previa ===== */
  dialog.visor{ border:0; padding:0; background:transparent; width:min(560px,calc(100vw - 24px)); max-height:calc(100svh - 24px); overflow:visible }
  dialog.visor::backdrop{ background:rgba(27,19,64,.85) }
  .visor figure{ margin:0; text-align:center; color:#fff }
  .visor img{ max-height:calc(100svh - 140px); width:auto; margin:0 auto; border-radius:6px; box-shadow:0 30px 60px -20px rgba(0,0,0,.7) }
  .visor figcaption{ margin-top:12px; font-weight:600 }
  .visor .nav-v{ display:flex; justify-content:center; gap:10px; margin-top:12px }
  .visor .nav-v button{ min-height:44px; padding:0 18px; border-radius:999px; border:0; font:inherit; font-weight:700; cursor:pointer; background:#fff; color:var(--tinta) }
  .visor .dlg-cerrar{ top:-8px; right:-8px; background:#fff }

  /* ===== Ficha de producto ===== */
  .migas{ font-size:14px; color:var(--gris); padding-top:24px }
  .migas a{ text-decoration:none } .migas a:hover{ text-decoration:underline }
  .ficha{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; padding-top:24px; padding-bottom:72px; align-items:start }
  .galeria-f .principal{ background:var(--vitrina); aspect-ratio:1/1; display:grid; place-items:center; border-radius:6px }
  .galeria-f .principal img{ width:56%; border-radius:4px; box-shadow:0 26px 40px -22px rgba(27,19,64,.6) }
  .miniaturas{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px }
  .miniaturas button{ border:0; padding:10px; background:var(--vitrina); border-radius:6px; cursor:zoom-in; position:relative }
  .miniaturas img{ border-radius:3px; box-shadow:0 10px 18px -12px rgba(27,19,64,.6) }
  .miniaturas .lupa{ position:absolute; right:8px; bottom:8px; background:var(--tinta); color:#fff; font-size:12px; font-weight:700; border-radius:999px; padding:3px 9px }
  .info-f .estado{ margin-bottom:6px }
  .info-f h1{ font-size:clamp(48px,6vw,88px) }
  .info-f .sub-f{ font-size:20px; color:var(--gris); margin:16px 0 22px; max-width:520px }
  .info-f .precio-f{ font-stretch:62%; font-weight:900; font-size:64px; line-height:.9 }
  .info-f .comprar-f{ display:flex; gap:12px; flex-wrap:wrap; margin:20px 0 10px }
  .info-f .alt{ font-size:15px; color:var(--gris) }
  .beneficios{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px }
  .beneficios li{ display:grid; grid-template-columns:28px 1fr; gap:10px; font-size:17px }
  .beneficios li:before{ content:""; width:22px; height:22px; margin-top:2px; border-radius:7px; background:var(--naranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat }
  .chips-f{ display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; list-style:none; padding:0 }
  .chips-f li{ background:var(--vitrina); border-radius:999px; padding:7px 14px; font-weight:600; font-size:14px }
  .ver-gratis{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font:inherit; font-weight:700; background:none; border:0; cursor:pointer; color:var(--tinta); padding:0; border-bottom:2px solid var(--amarillo) }

  /* Credibilidad */
  .fuentes{ background:var(--vitrina) }
  .fuentes .marco{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px; padding-top:72px; padding-bottom:72px }
  .fuentes .quien{ display:grid; gap:12px; margin-top:22px }
  .fuentes .quien div{ background:#fff; border-radius:14px; padding:16px 18px }
  .fuentes .quien b{ display:block; font-size:14px; color:var(--gris); font-weight:600; margin-bottom:2px }
  .fuentes ol{ margin:0; padding-left:20px; display:grid; gap:12px; font-size:15px; color:var(--tinta) }
  .fuentes ol i{ font-style:italic }
  .fuentes .nota-f{ font-size:14px; color:var(--gris); margin-top:18px }

  @media (max-width:1080px){
    .temas{ grid-template-columns:repeat(3,minmax(0,1fr)) }
    .grilla.g4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
    .packs{ grid-template-columns:1fr }
    .ficha{ grid-template-columns:1fr; gap:32px }
    .fuentes .marco, .espera-banda .marco{ grid-template-columns:1fr; gap:28px }
  }
  @media (max-width:820px){
    .abanico{ min-height:0; height:auto; aspect-ratio:1/0.82; margin:0 -8px }
    .temas{ grid-template-columns:1fr 1fr }
    .tema{ min-height:150px }
    .f-espera .dos{ grid-template-columns:1fr }
  }
  @media (prefers-reduced-motion:reduce){ .abanico img{ animation:none } .tema{ transition:none } }

  /* El título de la sección GLP-1 no debe empujar la página en celular */
  .glp-titulo{ flex-wrap:wrap; min-width:0 } .glp-titulo h2{ min-width:0 } .glp .incluye > div{ min-width:0 }
  @media (max-width:520px){ .glp-titulo h2.display{ font-size:clamp(40px,13vw,60px) } }
  .glp-pasos{ grid-template-columns:repeat(3,minmax(0,1fr)) } .glp-pasos li{ min-width:0 }
  @media (max-width:1080px){ .glp .incluye{ grid-template-columns:minmax(0,1fr) } }
  @media (max-width:520px){ .glp-pasos{ grid-template-columns:1fr } }
  .gancho{ display:inline-block; margin:0 0 14px; background:var(--amarillo); color:var(--tinta); font-weight:700; font-size:16px; line-height:1.35; padding:10px 16px; border-radius:14px; max-width:520px }
  .beneficios.con-emoji li{ display:block; padding-left:0 } .beneficios.con-emoji li:before{ display:none }