/* ==========================================================================
   MIL ASADOS — Responsive
   --------------------------------------------------------------------------
   TODOS los media queries del sitio viven acá, y este archivo se carga
   último. Si necesitás sobrescribir algo por viewport, va acá, no suelto
   en sections.css.

   Breakpoints reales del proyecto:
     980px → colapsa la nav; "El producto" pasa a modo scrollytelling
     760px → mobile pleno: aparece el sticky CTA y se reordena el hero
     430px → mobile chico: se aprieta el encabezado de la advertencia

   QA: 1280x860 (desktop) y 390x844 (mobile).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Movimiento reducido — respetamos la preferencia del sistema
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scrollcue span{animation:none}
  .hero-video{animation:none}
  .video-flame{animation:none}
}

/* ==========================================================================
   ≤ 980px — Tablet / mobile grande
   ========================================================================== */
@media(max-width:980px){

  /* Header: se ocultan los links, queda sólo marca + CTA */
  .nav .nav-links{display:none}

  .concept .wm{width:60vw;opacity:.045}

  .receive-grid{grid-template-columns:1fr;gap:28px}

  /* --- "El producto": de grilla a scrollytelling ------------------------
     La foto macro se reemplaza por la figura vertical, que queda sticky
     mientras los callouts pasan por encima en zig-zag.                    */
  .detail-stage{display:flex;flex-direction:column;gap:0}
  .detail-photo{display:none}
  .co-figure{
    display:flex;order:0;position:sticky;top:74px;z-index:0;
    min-height:auto;margin:0 0 -34vh;
    justify-content:center;align-items:flex-start;pointer-events:none;
  }
  .co-figure::before{
    content:"";position:absolute;width:170px;height:170px;border-radius:50%;
    background:radial-gradient(closest-side,var(--ember-soft),transparent 70%);
    top:30%;
  }
  .co-figure img{height:52vh;max-height:480px;object-fit:contain}
  .co-callouts{order:1;display:flex;flex-direction:column;gap:14px;z-index:2;margin:40vh 0 6vh}
  .callout{
    max-width:264px;
    background:rgba(13,12,10,.74);
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
    border:1px solid var(--line2);border-radius:9px;padding:15px 16px;
    text-align:left;box-shadow:0 10px 26px rgba(0,0,0,.35);
  }
  .co-callouts .callout:nth-child(odd){align-self:flex-start}
  .co-callouts .callout:nth-child(even){align-self:flex-end}
  .detail-claim{
    position:relative;z-index:2;text-align:left;margin-top:14px;
    background:rgba(13,12,10,.80);
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
    border:1px solid var(--line2);border-radius:10px;padding:16px 18px;
    box-shadow:0 10px 26px rgba(0,0,0,.40);
  }

  /* El sello de cierre, por encima de la figura sticky ---------------------
     En scrollytelling la figura del iniciador queda fija arriba mientras el
     contenido pasa por debajo, y llegaba a cruzarse justo con el wordmark:
     el vástago tapaba la I de MIL y se leía "M L".
     El ::before es una banda opaca del color de fondo de la sección, que se
     estira más allá del padding del .wrap para cortar la figura de lado a
     lado. No es un panel con borde a propósito: acá el sello tiene que
     verse como el final de la sección, no como otra tarjeta. */
  .lockup-b{
    position:relative;z-index:2;
    margin-top:26px;padding:22px 0 6px;
  }
  .lockup-b::before{
    content:"";position:absolute;z-index:-1;
    top:0;bottom:0;left:-22px;right:-22px;
    background:var(--bg2);
  }

}

/* ==========================================================================
   ≤ 760px — Mobile
   ========================================================================== */
@media(max-width:760px){

  /* WhatsApp elevado para que NO se pise con el sticky CTA de abajo.
     Si tocás el alto del sticky, ajustá también este bottom.             */
  .wa-float{
    right:14px;
    bottom:calc(92px + env(safe-area-inset-bottom));
    width:52px;height:52px;
  }
  .wa-float svg{width:26px;height:26px}

  /* --- Hero: copy centrado abajo, sobre el video ------------------------ */
  .hero{
    flex-direction:column;justify-content:flex-end;align-items:stretch;
    min-height:86svh;padding-top:84px;padding-bottom:38px;
  }
  /* En mobile el scrim se apaga y la legibilidad la da el halo del copy */
  .hero-scrim{display:none}
  .hero-inner{order:1}
  .hero-copy{position:relative;z-index:0;max-width:100%;text-align:center}
  .hero-copy::before{
    content:"";position:absolute;inset:-56px -26px -26px;z-index:-1;border-radius:22px;
    background:radial-gradient(92% 100% at 50% 44%,rgba(12,11,10,.74),rgba(12,11,10,.42) 62%,transparent 96%);
    filter:blur(10px);pointer-events:none;
  }
  .hero-copy .kicker{justify-content:center;letter-spacing:.2em;font-size:10.5px}
  .hero-copy .kicker::before{width:20px}
  .hero h1{font-size:clamp(38px,11vw,60px)}
  .badge-row{display:flex;justify-content:center}
  .badge{letter-spacing:.34em;font-size:10.5px}
  .prodname{font-size:12.5px;letter-spacing:.1em}
  /* El CTA principal se oculta acá porque lo cubre el sticky CTA */
  .hero-cta{justify-content:center}
  .hero-cta .hide-mobile{display:none}
  .scrollcue{display:none}

  .steps-grid{grid-template-columns:1fr;gap:14px}
  .step-img{aspect-ratio:16/11}

  .player{max-width:360px}
  .player-stage{padding:18px 0 6px}

  .usos-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .uso{flex:0 0 calc(33.333% - 7px);padding:18px 8px;font-size:11.5px;gap:9px}
  .uso-ic svg{width:28px;height:28px}

  .vs-grid{grid-template-columns:1fr}

  /* La tira de atributos fluye sola: sólo se aprieta un poco el aire y se
     baja la letra, que en mayúsculas con letter-spacing ocupa mucho. */
  .attrs-strip{gap:12px 20px;padding:20px 18px}
  .attr{font-size:11.5px;letter-spacing:.1em;gap:8px}
  .attr-ic svg{width:19px;height:19px}

  .receive-shots{grid-template-columns:1fr 1fr}

  .set-grid{grid-template-columns:1fr;gap:24px}
  .set-shot{max-width:260px;width:100%;margin:0 auto}

  /* La banda del blog se apila: el botón pasa a ancho completo para no
     quedar como un target chico al final de la página. */
  .blogband-inner{flex-direction:column;align-items:flex-start}
  .blogband .btn{width:100%;justify-content:center}

  /* Aparece el sticky CTA: el footer necesita aire para no quedar tapado */
  .sticky{display:block}
  footer{padding-bottom:96px}
  .header-cta{display:none}
}

/* ==========================================================================
   ≤ 430px — Mobile chico
   ========================================================================== */
@media(max-width:430px){
  /* El ícono de la advertencia baja para que el título tenga más renglón. */
  .warnbox-ic{width:22px;height:22px}
  .warnbox-head{gap:10px}
}