/* ============================================================
   portada-movil.css · LA PORTADA EN EL TELÉFONO
   ------------------------------------------------------------
   Se carga al final de todo. Manda solo hasta 699px de ancho:
   en escritorio no toca nada.

   LO QUE RESUELVE
   · La portada medía dos pantallas. Ahora es UNA: todo —cinta,
     logo, hamburguesa, titular, ubicación y los dos botones—
     cabe hasta la banda amarilla sin bajar el dedo. Se mide en
     `dvh`, que es el alto real de la pantalla descontando las
     barras de Safari, así que calza en cualquier iPhone o Android.
   · La hamburguesa flota y cambia con un fundido de verdad, todo
     con `transform` y `opacity`: son las dos únicas propiedades
     que el teléfono anima sin calentarse. Nada de filtros.
   · La cinta vuelve a moverse aunque el teléfono tenga "Reducir
     movimiento": es lenta y horizontal, no marea a nadie, y el
     dueño la quiere en movimiento. Lo que sí se apaga en ese modo
     es la flotación de la hamburguesa.
   ============================================================ */

@media (max-width: 699px) {

  /* ==========================================================
     1 · LA PANTALLA COMPLETA COMO UNA SOLA PIEZA
     ========================================================== */
  #hero {
    display: grid !important;
    grid-template-rows:
      auto            /* cinta */
      auto            /* logo */
      minmax(0, 1fr)  /* hamburguesa: toma lo que sobre */
      auto            /* titular + frase */
      auto            /* ubicación */
      auto            /* botones */
      auto;           /* banda amarilla */
    grid-template-areas:
      "cinta" "logo" "foto" "texto" "sello" "botones" "banda";
    align-items: center;
    justify-items: center;
    min-height: 100dvh;
    max-height: none;
    padding: 0 0 0 !important;
    gap: 0 !important;
    overflow: hidden;
  }

  .smash-ticker         { grid-area: cinta;   margin: 0 0 clamp(10px, 2.2dvh, 18px) !important; width: 100vw; }
  .hero-logo            { grid-area: logo; }
  .hero-img-wrap        { grid-area: foto; }
  .manifiesto           { grid-area: texto; }
  .manifiesto__sello    { grid-area: sello; }
  .hero-ctas            { grid-area: botones; }
  .hero-checker-bottom  { grid-area: banda; }

  /* La cinta, más compacta. */
  .smash-ticker__grupo span { padding: 8px 0 !important; font-size: 12.5px !important; }

  /* ==========================================================
     2 · EL LOGO, A ESCALA DE LA PANTALLA
     ========================================================== */
  .hero-logo {
    margin: 0 !important;
    line-height: 0;
  }
  .hero-logo img {
    width: auto !important;
    height: clamp(96px, 17dvh, 150px) !important;
    filter: none !important;
  }

  /* ==========================================================
     3 · LA HAMBURGUESA: FLOTA, CAMBIA SUAVE, SE PUEDE TOCAR
     ----------------------------------------------------------
     El slider original cambiaba el `src` de una sola imagen sin
     fundido. Acá hay dos capas superpuestas: la que sale se
     desvanece mientras la que entra aparece creciendo un poco.
     Solo opacity y transform: el teléfono lo mueve a 60 fps.
     ========================================================== */
  .hero-img-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    max-height: clamp(220px, 38dvh, 340px) !important;
    margin: clamp(6px, 1.4dvh, 14px) 0 !important;
    background: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    display: grid;
    place-items: center;
    cursor: pointer;
  }

  /* Los pudús decorativos y la sombra vieja se apagan acá. */
  .hero-img-wrap::before,
  .hero-img-wrap::after { content: none !important; }

  /* El resplandor detrás: un degradado, no un blur (el blur es
     caro; el degradado es gratis). */
  .portada-glow {
    position: absolute;
    inset: 4% 6% 8%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 52%,
      rgba(245, 197, 24, .20) 0%,
      rgba(245, 197, 24, .07) 42%,
      transparent 70%);
    pointer-events: none;
  }

  /* La sombra bajo la hamburguesa: una elipse plana en el piso. */
  .portada-sombra {
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 3%;
    height: 9%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, .75) 0%, transparent 70%);
    pointer-events: none;
    animation: sombra-respira 4.6s ease-in-out infinite;
  }

  /* El escenario donde viven las dos capas. */
  .portada-escena {
    position: relative;
    z-index: 1;
    width: 118%;
    height: 100%;
    max-height: 100%;
    animation: flotar 4.6s ease-in-out infinite;
    will-change: transform;
  }

  .portada-capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(1.06) translateY(6px);
    transition: opacity .72s cubic-bezier(.22, .8, .3, 1),
                transform .72s cubic-bezier(.22, .8, .3, 1);
    will-change: opacity, transform;
    filter: none !important;
    animation: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .portada-capa.activa {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  @keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
  }
  @keyframes sombra-respira {
    0%, 100% { transform: scaleX(1);   opacity: .9; }
    50%      { transform: scaleX(.88); opacity: .6; }
  }

  /* La imagen original del slider queda oculta: la reemplazan
     las capas de arriba. No se borra por si el JS no corre. */
  #hero-img-slider { display: none !important; }

  /* --- El rótulo: qué hamburguesa es y cuánto vale --- */
  .portada-rotulo {
    position: absolute;
    left: 50%;
    bottom: -2%;
    z-index: 2;
    transform: translateX(-50%) translateY(4px);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(8, 8, 8, .78);
    border: 1px solid rgba(245, 197, 24, .35);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
  }
  .portada-rotulo.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
  .portada-rotulo b {
    font-family: var(--f-display, 'Anton', Impact, sans-serif);
    font-size: 15px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #fff;
  }
  .portada-rotulo span {
    font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--y, #F5C518);
  }
  .portada-rotulo span i { font-style: normal; color: #fff; font-size: .85em; }

  /* --- Los puntitos: cuál de las seis se está viendo --- */
  .portada-puntos {
    position: absolute;
    right: 4%;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 7px;
    pointer-events: none;
  }
  .portada-puntos i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    transition: background .3s ease, height .3s ease;
  }
  .portada-puntos i.activo {
    height: 16px;
    border-radius: 3px;
    background: var(--y, #F5C518);
  }

  /* ==========================================================
     4 · EL TEXTO, APRETADO PERO CON PESO
     ========================================================== */
  .manifiesto {
    margin: 0 !important;
    padding: 0 20px !important;
    gap: clamp(4px, .9dvh, 8px) !important;
    max-width: none !important;
  }
  .manifiesto__titular {
    font-size: clamp(27px, 7.8vw, 36px) !important;
    line-height: .96 !important;
  }
  .manifiesto__frase {
    font-size: clamp(17px, 4.9vw, 22px) !important;
    padding-bottom: 6px !important;
  }
  .manifiesto__frase::after { width: 44px; height: 3px; }

  /* La ubicación: más chica, es secundaria. */
  .manifiesto__sello {
    margin: clamp(6px, 1.2dvh, 12px) 0 0 !important;
    min-height: 38px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
  }

  /* ==========================================================
     5 · LOS BOTONES, LADO A LADO
     ----------------------------------------------------------
     Apilados ocupaban 130px. Uno al lado del otro, 54. "Ver
     menú" es el ancho; WhatsApp es el atajo.
     ========================================================== */
  .hero-ctas {
    display: grid !important;
    grid-template-columns: 1.55fr 1fr;
    gap: 9px;
    width: calc(100% - 40px);
    margin: clamp(10px, 2dvh, 18px) 0 clamp(12px, 2.2dvh, 20px) !important;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-wapp {
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    letter-spacing: 1.4px !important;
    white-space: nowrap;
    box-shadow: none !important;
  }
  .hero-ctas .btn-wapp { border-color: rgba(37, 211, 102, .45) !important; }

  /* ==========================================================
     6 · LA BANDA AMARILLA, DE VUELTA Y EN SU LUGAR
     ========================================================== */
  .hero-checker-bottom {
    display: block !important;
    position: static !important;
    width: 100vw;
    height: 12px;
    margin: 0 !important;
  }

  /* ==========================================================
     7 · REDUCIR MOVIMIENTO: SE RESPETA DONDE IMPORTA
     ----------------------------------------------------------
     experiencia.css apagaba TODO. Acá se rescatan las dos cosas
     que no marean a nadie y que la portada necesita: la cinta
     (lenta, horizontal) y el fundido entre hamburguesas. La
     flotación sí se apaga: es movimiento continuo vertical.
     ========================================================== */
  @media (prefers-reduced-motion: reduce) {
    .smash-ticker__track {
      animation: correr-cinta 34s linear infinite !important;
      animation-duration: 34s !important;
      animation-iteration-count: infinite !important;
    }
    .portada-capa {
      transition-duration: .5s !important;
    }
    .portada-escena,
    .portada-sombra { animation: none !important; }
  }
}

/* ============================================================
   8 · AJUSTES TRAS VERLA EN TAMAÑO REAL
   ============================================================ */
@media (max-width: 699px) {

  /* La hamburguesa toma todo el espacio que sobra entre el logo y
     el texto: antes quedaba chica con aire por arriba y por abajo. */
  .hero-img-wrap {
    max-height: clamp(250px, 47dvh, 420px) !important;
    margin: clamp(2px, .6dvh, 8px) 0 !important;
  }
  .portada-escena { width: 128%; }
  .portada-rotulo { bottom: 0; }

  /* Los botones flotantes se esconden mientras la portada está a
     la vista: tapaban "Pedir por WhatsApp", y la portada ya tiene
     su propio botón de WhatsApp. Reaparecen al bajar a la carta,
     donde sí hacen falta. */
  body.en-portada .fab-cart,
  body.en-portada .fab-wapp {
    transform: translateY(140px) !important;
    opacity: 0;
    pointer-events: none;
  }
  .fab-cart, .fab-wapp {
    transition: transform .38s cubic-bezier(.2, .8, .3, 1), opacity .3s ease !important;
  }

  /* "Pedir por WhatsApp" no cabe en su columna: el texto se acorta
     a "WhatsApp" manteniendo el ícono. */
  .hero-ctas .btn-wapp { font-size: 0 !important; gap: 8px; }
  .hero-ctas .btn-wapp svg { width: 20px; height: 20px; }
  .hero-ctas .btn-wapp::after {
    content: 'WhatsApp';
    font-size: 13.5px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }
  .hero-ctas { grid-template-columns: 1.6fr 1fr; }
}

@media (max-width: 699px) {
  /* Las fotos traen margen transparente arriba y abajo: contenidas
     en su caja dejaban aire muerto. La capa se agranda un tercio
     por sobre la caja (que tiene overflow visible) y la hamburguesa
     rellena el espacio entre el logo y el rótulo. */
  .portada-capa {
    inset: -17% 0 !important;
    height: 134% !important;
  }
}

/* ============================================================
   9 · SIN RÓTULO, LOGO CON PRESENCIA
   ------------------------------------------------------------
   Lukas prefirió la portada sin el nombre y el precio sobre la
   hamburguesa: la foto habla sola. Ese alto se lo lleva el logo,
   que pasa a ser el elemento con más peso de la pantalla.
   ============================================================ */
@media (max-width: 699px) {
  .portada-rotulo { display: none !important; }
  .hero-logo img  { height: clamp(150px, 26dvh, 230px) !important; }
  .hero-img-wrap  { max-height: clamp(230px, 42dvh, 380px) !important; }
  .portada-puntos { right: 3%; opacity: .8; }
}