/* =========================================================
   MOBILE — Versión compacta para celular
   ---------------------------------------------------------
   ¿Por qué un archivo aparte?
     El 80% de las visitas entra desde el celular. Acá están
     JUNTAS todas las reglas que achican la página en pantallas
     chicas, así es fácil encontrarlas y tocarlas.

   ¿Cómo funciona?
     Todo está dentro de "@media (max-width: 600px) { ... }".
     Eso significa: "aplicá estas reglas SOLO si la pantalla
     mide 600px de ancho o menos" (o sea, celulares).
     Como este archivo se carga último en index.html, sus
     reglas le ganan a las de los otros archivos.

   Objetivo: que toda la página mida ~4.000px de alto en un
   celular común (antes medía ~11.000px).

   Idea general:
     - Menos espacio entre secciones y títulos más chicos
     - Sin la bajada (texto gris) debajo de cada título
     - Productos en filas (foto a la izquierda, datos a la derecha),
       como en las apps de delivery
     - Pizza Vakna: video al lado de los beneficios
     - Formulario y preguntas más apretados
   ========================================================= */

@media (max-width: 600px) {

  /* =======================================================
     GENERAL: espacios y tipografía
     ======================================================= */
  :root {
    --section-y: 30px;   /* espacio arriba y abajo de cada sección (en compu es 64px o más) */
    --header-h: 60px;    /* header más bajito */
  }

  .section__head { margin-bottom: 14px; }
  .eyebrow { margin-bottom: 2px; font-size: .68rem; }
  .title { font-size: 1.7rem; }
  /* La bajada gris de cada título se esconde: el título ya se entiende solo */
  .section__lead { display: none; }

  .btn--lg { padding: 13px 18px; font-size: .95rem; }

  /* Header: logo un poco más chico para que entre en 60px */
  .brand__logo { width: 40px; height: 40px; }
  .brand__name { font-size: 1.15rem; }
  .header__cta { min-height: 38px; padding: 8px 16px; }

  /* =======================================================
     HERO: ya no ocupa toda la pantalla, solo lo necesario
     ======================================================= */
  .hero {
    min-height: 0;
    padding: calc(var(--header-h) + 26px) 0 30px;
  }
  .hero__eyebrow { margin-bottom: 12px; padding: 5px 12px; font-size: .68rem; }
  .hero__title { font-size: 2.3rem; }
  .hero__subtitle { margin-top: 10px; font-size: .93rem; }

  /* Los 2 botones uno al lado del otro */
  .hero__actions { flex-wrap: nowrap; gap: 10px; margin-top: 20px; }
  .hero__actions .btn { flex: 1 1 0; max-width: none; padding: 13px 8px; font-size: .9rem; }

  .hero__trust { gap: 6px 14px; margin-top: 18px; font-size: .78rem; }
  .hero__trust svg { width: 16px; height: 16px; }

  /* =======================================================
     BANNER DE LA PROMO DE PIZZAS
     ======================================================= */
  /* Todo en una sola fila: círculo 3+1 · texto · botón */
  .promo {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
  }
  .promo__badge { width: 46px; height: 46px; }
  .promo__badge strong { font-size: 1.15rem; }
  .promo__badge small { font-size: .45rem; }
  .promo__label { display: none; }               /* "Solo en noviembre" no entra: el círculo ya dice "Promo" */
  .promo__text p { margin: 0; font-size: .8rem; line-height: 1.35; }
  .promo__cta { padding: 8px 12px; font-size: .75rem; }

  /* =======================================================
     TARJETAS DE PRODUCTO EN FILA
     foto a la izquierda (34%) · nombre, precio y botón a la derecha
     ======================================================= */
  .products,
  .products--pizzas,
  .products--viandas { grid-template-columns: 1fr; gap: 10px; }

  .product { flex-direction: row; border-radius: 16px; }
  .product:hover { transform: none; }

  .product__media { flex: 0 0 32%; aspect-ratio: auto; }
  .product__media img { height: 100%; }
  .product__placeholder svg { width: 40px; height: 40px; }
  .product__placeholder span { font-size: .65rem; }

  .badge { top: 8px; left: 8px; max-width: calc(100% - 16px); padding: 3px 8px; font-size: .62rem; line-height: 1.3; }

  .product__body { min-width: 0; padding: 10px 12px; }
  .product__tagline { font-size: .68rem; letter-spacing: .06em; }
  .product__name { margin-top: 2px; font-size: 1.12rem; line-height: 1.15; }

  /* La descripción se corta en 1 renglón con "…" */
  .product__desc {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    font-size: .8rem;
    line-height: 1.4;
  }
  .product__features { display: none; } /* en celular escondemos la lista de beneficios */

  /* Precio a la izquierda y botón a la derecha, en la misma línea */
  .product__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
  }
  .price { gap: 0 5px; }
  .price__value { font-size: 1.3rem; }
  .price__unit, .price__old { font-size: .7rem; }
  .price__note { font-size: .66rem; }
  .product__footer .btn { flex: none; width: auto; padding: 10px 14px; font-size: .8rem; }

  /* Galería de fotos de viandas: franja horizontal más bajita */
  .product--gallery { min-height: 0; aspect-ratio: 16 / 9; }
  .gallery__head { padding: 10px 12px 28px; }
  .gallery__caption { padding: 28px 12px 26px; font-size: .78rem; }
  .gallery__dots { bottom: 9px; }
  .gallery__dot { width: 6px; height: 6px; }
  .gallery__dot.is-active { width: 16px; }

  /* Plan Empresarial (tarjeta oscura): ícono a la izquierda, texto de venta completo
     y los beneficios como "etiquetas" chiquitas en vez de lista */
  .product--dark { flex-direction: row; align-items: flex-start; }
  .product__icon { flex: none; width: 40px; height: 40px; margin: 14px 0 0 12px; padding: 9px; border-radius: 11px; }
  .product--dark .product__desc { display: block; overflow: visible; font-size: .78rem; }
  .product--dark .product__features { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; font-size: .7rem; }
  .product--dark .product__features li {
    gap: 4px; padding: 3px 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .08);
  }
  /* En celular mostramos solo los 2 beneficios más fuertes (los 2 primeros) */
  .product--dark .product__features li:nth-child(n+3) { display: none; }
  .product--dark .product__features svg { width: 12px; height: 12px; margin-top: 2px; }
  .product--dark .price__label { display: none; }   /* el botón ya invita a consultar */
  .product--dark .product__footer { margin-top: 10px; }
  .product--dark .product__footer .btn { flex: 1 1 auto; }

  /* =======================================================
     PIZZA VAKNA: video a la izquierda, beneficios a la derecha
     ======================================================= */
  .vakna { padding-top: 30px; }
  .vakna__inner {
    grid-template-columns: 40% 1fr;
    column-gap: 14px;
    align-items: center;
    padding-bottom: 24px;
  }
  /* Lo que va de lado a lado (ocupa las 2 columnas) */
  .vakna__brand, .vakna__title, .vakna__lead, .vakna__actions { grid-column: 1 / -1; }

  .vakna__brand { gap: 10px; margin-bottom: 10px; }
  .vakna__logo { width: 44px; height: 44px; }
  .vakna__eyebrow { font-size: .6rem; }
  .vakna__title { font-size: 1.6rem; }
  .vakna__lead { margin-top: 6px; font-size: .82rem; line-height: 1.5; }

  /* Video chiquito en la columna izquierda */
  .vakna__media { grid-column: 1; width: 100%; margin-top: 14px; padding: 0; }
  .vakna__frame { width: 100%; padding: 5px; border-radius: 20px; transform: none; }
  .vakna__video { border-radius: 16px; }
  .vakna__photo { display: none; }  /* la foto superpuesta no entra: se ve en las tarjetas */
  .vakna__stamp { width: 60px; height: 60px; top: -14px; right: -12px; }

  /* Beneficios como lista compacta en la columna derecha (solo el título) */
  .vakna__features {
    grid-column: 2;
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 14px;
  }
  .vfeature { gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px; }
  .vfeature__icon { width: 26px; height: 26px; padding: 5px; border-radius: 7px; }
  .vfeature h3 { font-size: .82rem; letter-spacing: 0; line-height: 1.15; }
  .vfeature p { display: none; }

  .vakna__actions { flex-wrap: nowrap; gap: 10px; margin-top: 16px; }
  .vakna__actions .btn { flex: 1 1 0; max-width: none; padding: 11px 8px; font-size: .85rem; }

  .vakna__marquee { padding: 7px 0; margin-bottom: 16px; }
  .vakna__marquee span { font-size: .9rem; }

  /* =======================================================
     CÓMO FUNCIONA: filas bajitas
     ======================================================= */
  /* Grilla de 2×2 (antes eran 4 filas): ícono y título arriba, texto abajo */
  .steps { grid-template-columns: 1fr 1fr; gap: 8px; }
  .step {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 8px;
    align-items: center;
    padding: 10px 10px 12px;
  }
  .step__icon { grid-row: auto; width: 30px; height: 30px; padding: 6px; }
  .step__title { align-self: center; padding-right: 10px; font-size: .85rem; line-height: 1.1; }
  .step__text { grid-column: 1 / -1; margin-top: 6px; font-size: .74rem; line-height: 1.35; }
  .step__num { top: 8px; right: 10px; transform: none; font-size: .85rem; }

  /* =======================================================
     HACÉ TU PEDIDO
     ======================================================= */
  .pedido { --pd-cut: 78px; }    /* alto del encabezado del ticket */

  /* Encabezado del ticket: título a la izquierda, progreso a la derecha */
  .ticket__head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 76px 0 16px;      /* lugar a la derecha para el sticker */
  }
  .ticket__label { font-size: .6rem; }
  .ticket__title { font-size: 1.3rem; }
  .ticket__progress { min-width: 0; justify-items: end; }
  .ticket__progress-text { font-size: .68rem; white-space: nowrap; }
  .ticket__bar { width: 80px; height: 6px; }
  .ticket__sticker { width: 62px; height: 62px; top: -16px; right: -4px; font-size: .7rem; }
  .ticket__sticker strong { font-size: 1.15rem; }
  .ticket__sticker small { font-size: .45rem; }

  .ticket__body { padding: 12px 14px 14px; }
  .ticket .field { gap: 3px; margin-bottom: 8px; }
  .ticket .field label { font-size: .74rem; }
  /* Nombre y localidad lado a lado; dirección abajo, a lo ancho */
  .ticket .field-row { grid-template-columns: 1fr 1fr; gap: 0 8px; }

  /* Bloques de sabores / cantidad más compactos */
  .order-extra { margin-bottom: 12px; padding: 10px; border-radius: 12px; }
  .order-extra__title { margin-bottom: 6px; font-size: .92rem; }
  .flavor-list { gap: 6px; }
  .flavor { grid-template-columns: 24px 1fr; column-gap: 8px; }
  .flavor__num { width: 24px; height: 24px; font-size: .8rem !important; }
  .flavor select { padding: 8px 30px 8px 10px; background-position: right 10px center; }
  .order-extra__gift { margin-top: 8px; padding: 7px 10px; font-size: .78rem; }
  .order-extra__gift svg { width: 18px; height: 18px; }
  .qty__btn { width: 38px; height: 38px; font-size: 1.3rem; }
  .qty__value { font-size: 1.5rem; }
  .order-extra__upsell { margin-top: 8px; padding: 8px 10px; font-size: .78rem; }
  .order-total { margin: -2px 0 12px; padding-bottom: 8px; font-size: .9rem; }
  .order-total strong { font-size: 1.3rem; }
  /* Los inputs quedan en 16px de letra: si es más chico, el iPhone hace zoom solo */
  .input-icon input { padding: 9px 8px 9px 32px !important; }
  .input-icon > svg { left: 10px; width: 16px; height: 16px; }
  .order__selected { margin-bottom: 12px; padding: 8px 12px; font-size: .8rem; }
  .order__note { display: none; }   /* el botón ya dice "Enviar por WhatsApp" */

  /* Lateral oscuro: en celular solo dejamos los 2 botones de contacto */
  .order { gap: 12px; }
  .order__side { padding: 10px; border-radius: 16px; }
  .side__title, .side__steps, .order__side-sprig { display: none; }
  .side__status { display: none; }
  .side__links { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 0; }
  .side__link { justify-content: center; gap: 6px; padding: 10px 6px; font-size: .78rem; white-space: nowrap; }
  .side__link svg { width: 18px; height: 18px; }

  /* =======================================================
     PREGUNTAS FRECUENTES y PIE
     ======================================================= */
  .faq { gap: 6px; }
  .faq__q { padding: 9px 12px; font-size: .82rem; line-height: 1.35; }
  .faq__q::after { width: 22px; height: 22px; font-size: 1rem; }
  .faq__a { padding: 0 12px 12px; font-size: .8rem; }

  /* Pie en una fila: logo a la izquierda, redes a la derecha, copyright abajo */
  .footer { padding: 16px 0 76px; }
  .footer__inner { grid-template-columns: 1fr auto; justify-items: start; align-items: center; gap: 8px; text-align: left; }
  .footer .brand__logo { width: 36px; height: 36px; }
  .footer__social a { width: 38px; height: 38px; }
  .footer__copy { grid-column: 1 / -1; font-size: .7rem; }
}

/* Celulares muy angostos (iPhone SE, Galaxy chicos: 360px o menos) */
@media (max-width: 360px) {
  .hero__title { font-size: 2.05rem; }
  .vakna__actions .btn { font-size: .8rem; padding-inline: 6px; }
  .vfeature h3 { font-size: .76rem; }
  .side__link { font-size: .72rem; }
  .product__footer .btn { padding-inline: 12px; }
}