/* ============================================================
   mobile.css — adaptación a celular de todo el sitio
   ------------------------------------------------------------
   Se carga como ÚLTIMO stylesheet de cada página (justo antes de
   </head>), después del <style> inline. Por eso gana el cascade a
   igual especificidad y casi no hace falta !important.

   Scoping por página: cada <body> tiene data-page="<slug>" y
   data-tpl="<plantilla>" (producto | articulo | <slug>). Usar
   body[data-tpl="producto"] para cubrir las 14 fichas de producto
   de una sola vez, y body[data-tpl="articulo"] para las 10 notas
   del blog.

   Breakpoints:
     <= 900px  tablet / phone landscape
     <= 640px  teléfono (el grueso del trabajo)
     <= 380px  teléfono chico (iPhone SE, Android 360px)

   Editar SOLO acá para cualquier ajuste de mobile. No volver a
   duplicar media queries dentro de cada HTML.
   ============================================================ */


/* ============================================================
   0. BASE TÁCTIL (cualquier ancho, solo dispositivos sin hover)
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* El cursor "modo pasta" es un SVG custom pensado para mouse.
     En touch no se ve nunca y solo agrega peso al repaint. */
  html, body,
  a, button, .nav-link, .menu-list a, .burger, .menu-close,
  .topbar-logo, #heroScroll, .carrusel-viewport {
    cursor: auto;
  }
  /* Nada de estados :hover pegados después de un tap. */
  .acceso-card:hover { transform: none; }
  .card:hover { transform: none; box-shadow: 0 2px 16px rgba(0,0,0,0.08); }
  .card:hover .card-cta { background: transparent; color: var(--gold); }
  .carrusel-arrow:hover { background: #fff; color: #000; }
  /* El flash celeste de Android/Chrome al tocar un link no pega con la paleta.
     El feedback lo damos con :active, en dorado. */
  a, button, .card, .acceso-card, .post, .store-item {
    -webkit-tap-highlight-color: transparent;
  }
  a:not(.card):active, button:active { opacity: 0.72; }

  /* Nada de arrastrar imágenes por accidente al deslizar el carrusel */
  .card img, .card-img img { -webkit-user-drag: none; user-select: none; }
}

/* Deja de rebotar el fondo negro del <html> cuando el scroll llega al final */
@media (max-width: 900px) {
  html, body { overscroll-behavior-y: none; }
  /* El panel del menú abierto scrollea solo: en landscape los 9 ítems no
     entran en 390px de alto y antes quedaban cortados sin forma de llegar. */
  .menu-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .menu-right { min-height: 0; }
}

@media (max-width: 900px) {
  /* Evita el zoom automático de iOS al enfocar un campo:
     Safari hace zoom si el font-size del input es < 16px. */
  input, select, textarea { font-size: 16px !important; }
}


/* ============================================================
   1. TABLET / PHONE LANDSCAPE  (<= 900px)
   ============================================================ */
@media (max-width: 900px) {

  /* ---- Topbar (todas las páginas) ---- */
  .topbar { padding: 8px 20px; }
  .topbar-logo img { height: 76px; }
  .topbar-right { gap: 14px; }
  .burger { width: 48px; height: 48px; }

  /* ---- Menú hamburguesa (assets/menu-panel.css) ---- */
  .menu-panel { grid-template-columns: 1fr; }
  .menu-image { display: none; }
  .menu-right { padding: 104px 6vw 48px; justify-content: center; }
  .menu-list a { font-size: 38px; justify-content: flex-end; }

  /* El isologo del panel usa brightness(0) invert(1) => blanco.
     Sirve sobre la mitad oscura del panel en desktop; en mobile esa
     mitad no existe y el logo blanco queda invisible sobre el crema.
     Acá se pinta negro. */
  .menu-topbar img { filter: brightness(0); width: 132px; }
}


/* ============================================================
   2. TELÉFONO  (<= 640px)  — el grueso de la adaptación
   ============================================================ */
@media (max-width: 640px) {

  /* ------------------------------------------------------------
     2.1 TOPBAR — compartida por las 31 páginas
     ------------------------------------------------------------ */
  .topbar { padding: 6px 14px; }
  .topbar-logo img { height: 58px; }
  .topbar-right { gap: 12px; }
  .topbar-social { gap: 12px; }
  .topbar-social a { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
  .topbar-social svg { width: 17px; height: 17px; }
  .burger { width: 44px; height: 44px; padding: 0; }
  .burger span:nth-child(1) { width: 26px; }
  .burger span:nth-child(2) { width: 19px; }
  .burger span:nth-child(3) { width: 26px; }

  /* ------------------------------------------------------------
     2.2 MENÚ HAMBURGUESA
     ------------------------------------------------------------ */
  .menu-right { padding: 92px 22px 40px; }
  .menu-topbar { padding: 8px 14px; }
  .menu-topbar img { width: 112px; }
  .menu-topbar-right { gap: 10px; }
  .menu-social { width: 36px; height: 36px; }
  .menu-social svg { width: 16px; height: 16px; }
  .menu-close { width: 44px; height: 44px; }

  .menu-list a { font-size: 34px; padding: 15px 0; gap: 12px; }
  .menu-list a .num { font-size: 10px; letter-spacing: 0.22em; margin-left: 12px; padding-top: 8px; }
  .menu-list .has-sub > a > .caret { width: 22px; height: 22px; margin-top: 10px; }
  .menu-list .submenu a { font-size: 15px; padding: 14px 0; }
  .menu-list .submenu .sub-hint { font-size: 13px; }

  /* ------------------------------------------------------------
     2.3 CARRUSEL "También en Pastas Pariggi"
     (17 páginas — el estilo base vive en assets/carrusel.css)
     ------------------------------------------------------------ */
  /* height:auto — productos.html fija 600px para el layout de desktop */
  .productos-section { padding: 8px 0 44px; height: auto; margin-top: 0; }
  .productos-section .productos-title { margin: 0 0 22px; }
  .productos-title { font-size: 34px; letter-spacing: 0.06em; margin-bottom: 22px; }
  /* El padding va en el wrap y NO en el viewport: el viewport recorta en su
     padding box, así que un padding ahí dejaba asomar una tajada de la card
     anterior por izquierda y se leía como bug, no como "hay más al costado". */
  .carrusel-wrap { padding: 0 16px; }
  .carrusel-viewport {
    /* el drag horizontal es del carrusel; el scroll vertical, de la página */
    touch-action: pan-y;
  }
  .carrusel-track {
    grid-template-rows: auto;
    /* 2 cards enteras + flechas (antes: 62vw = 1 card y un asomo, sin flechas).
       Las flechas se re-muestran mas abajo; assets/carrusel.css las esconde
       bajo 780px. */
    grid-auto-columns: calc((100% - 14px) / 2);
    gap: 14px;
  }
  .card { height: auto; min-height: 0; }
  .card-img { height: 40vw; max-height: 190px; }
  .card-placeholder { height: 40vw; max-height: 190px; }
  .card-body { padding: 14px 10px 16px; gap: 12px; }
  .card-name {
    font-size: 13px;
    line-height: 1.2;
    /* sin esto el nombre largo se desborda sobre la card vecina */
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .card-cta {
    padding: 13px 18px; font-size: 10.5px; letter-spacing: 0.14em;
    min-height: 44px; display: inline-flex; align-items: center;
  }

  /* ------------------------------------------------------------
     2.4 FOOTER "PASTAS PARIGGI — COME UNA VOLTA" (compartido)
     ------------------------------------------------------------ */
  .foot { padding: 56px 20px 64px; }
  /* Un solo renglon siempre: el tamano baja con el ancho en vez de partir el
     texto. A 24px la linea mide 370px y en un telefono de 390 entran 350. */
  .foot-text, .nos-foot-text, .home-foot-text {
    font-size: min(22px, 5.7vw); letter-spacing: 0.09em; line-height: 1.25;
    white-space: nowrap;
  }
  .foot-text .sep, .home-foot-text .sep, .nos-foot-text .sep { margin: 0 8px; }
  /* El pie de nosotros.html trae 60px de padding lateral del diseno de desktop:
     en un telefono de 390 dejaba 270px utiles y la linea (341px) se desbordaba. */
  .nos-foot { padding-left: 20px; padding-right: 20px; }

  /* ------------------------------------------------------------
     2.5 FORMULARIOS DE CONTACTO
     (home .hc-*, contacto/b2b/blog .contacto-*, nosotros .nc-*)
     ------------------------------------------------------------ */
  .home-contacto, .contacto, .nos-contacto { padding: 62px 18px 70px; }
  .home-contacto-inner, .contacto-inner, .nos-contacto-inner { grid-template-columns: 1fr; gap: 34px; }

  .hc-lead, .contacto-lead, .nc-lead { font-size: 17px; margin: 16px 0 26px; max-width: none; }

  .hc-info-item, .contacto-info-item, .nc-info-item {
    /* la etiqueta (PEDIDOS / EMAIL / PLANTA) arriba del dato, no al lado:
       a 90px fijos de columna el dato quedaba en 3 renglones */
    flex-direction: column;
    gap: 4px;
    padding: 13px 0;
    font-size: 15px;
  }
  .hc-info-item .ci-k, .contacto-info-item .ci-k, .nc-info-item .ci-k {
    flex: none; font-size: 10px; letter-spacing: 0.24em; padding-top: 0;
  }
  .hc-info-item .ci-v strong, .contacto-info-item .ci-v strong, .nc-info-item .ci-v strong { font-size: 16px; }

  .hc-social, .contacto-social, .nc-social { margin-top: 24px; gap: 12px; flex-wrap: wrap; }
  .hc-social .cs-label, .contacto-social .cs-label, .nc-social .cs-label { font-size: 10px; letter-spacing: 0.24em; }
  .hc-social a, .contacto-social a, .nc-social a { width: 44px; height: 44px; }

  form.hc-form, form.contacto-form, form.nc-form, .contacto-inner form, .nos-contacto-inner form {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 18px 26px;
  }
  form label, .contacto-inner label, .nos-contacto-inner label {
    font-size: 10px; letter-spacing: 0.24em; gap: 6px;
  }
  form input, form select, form textarea { padding: 12px 0 10px; }
  form textarea { min-height: 96px; }
  form .submit-row { margin-top: 4px; }
  form button {
    width: 100%;
    justify-content: center;
    padding: 17px 20px;
    font-size: 12px;
    letter-spacing: 0.2em;
  }

  /* ------------------------------------------------------------
     2.6 BOTONES GENÉRICOS — ancho completo y área táctil real
     ------------------------------------------------------------ */
  .btn-gold, .btn-primary, .btn-ghost, .hero-cta, .historia-cta {
    padding: 15px 22px;
    font-size: 11px;
    letter-spacing: 0.18em;
    min-height: 48px;
  }

  /* ------------------------------------------------------------
     2.7 BREADCRUMB / VOLVER (fichas de producto y notas del blog)
     ------------------------------------------------------------ */
  /* El padding base del breadcrumb es 110px arriba (despeja la topbar fixed, que
     en desktop mide 125px). En telefono la topbar mide 71px, y encima
     .product-header sumaba OTROS 86px: 196px de aire antes del titulo. */
  .breadcrumb { font-size: 11px; letter-spacing: 0.1em; flex-wrap: wrap; row-gap: 2px; align-items: center;
                padding: 84px 18px 0; }
  /* El nombre del producto ya es el <h1> justo abajo. En telefono solo se duplica
     y, si es largo (p.ej. "Sorrentinos de Calabaza"), parte el breadcrumb en dos
     lineas. Se esconde el ultimo tramo y su separador; Inicio / Productos quedan. */
  body[data-tpl="producto"] .breadcrumb .current,
  body[data-tpl="producto"] .breadcrumb .sep:nth-of-type(2) { display: none; }
  /* 11px de alto no es un blanco táctil: se estira el área sin mover el texto */
  .breadcrumb a, .breadcrumb .current { padding: 11px 0; display: inline-flex; align-items: center; }
  .back-link { font-size: 12px; letter-spacing: 0.14em; padding: 12px 0; display: inline-flex; }
  .back-link-row { padding-left: 18px; padding-right: 18px; }
}


/* ============================================================
   3. HOME  (index.html)
   ============================================================ */
@media (max-width: 640px) {
  body[data-page="index"] .hero { height: 100svh; }

  /* El lockup de marca del hero se calcula en px desde JS/CSS: acá se
     recorta a un ancho relativo para que no toque los bordes. */
  body[data-page="index"] .hero-brand { width: min(78vw, 330px); }
  body[data-page="index"] .hero-brand .brand-svg { width: 100%; }

  /* La nav del hero se apilaba en 3 filas y chocaba contra el
     "DESCUBRIR" y contra el botón flotante de WhatsApp. Grilla de 2
     columnas, subida, y el hint decorativo se oculta. */
  body[data-page="index"] .nav-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    bottom: 92px;
    max-width: min(86vw, 340px);
    align-items: center;
    justify-items: center;
  }
  body[data-page="index"] .nav-link {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    padding: 11px 2px;
    text-align: center;
  }
  body[data-page="index"] .nav-link .ul-wrap { display: none; }
  body[data-page="index"] .hero-scroll { display: none; }

  /* Secciones inferiores */
  body[data-page="index"] .sec-eyebrow { font-size: 10px; letter-spacing: 0.3em; margin-bottom: 10px; }
  body[data-page="index"] .sec-title { font-size: 38px; }

  body[data-page="index"] .acceso { padding: 56px 18px 60px; }
  body[data-page="index"] .acceso-grid { grid-template-columns: 1fr; gap: 16px; }
  body[data-page="index"] .acceso-card { min-height: 0; padding: 26px 22px 26px; }
  body[data-page="index"] .acceso-icon { top: 22px; right: 20px; width: 38px; height: 38px; }
  body[data-page="index"] .acceso-eyebrow { font-size: 10px; letter-spacing: 0.26em; margin-bottom: 10px; padding-right: 46px; }
  body[data-page="index"] .acceso-title { font-size: 30px; margin-bottom: 10px; padding-right: 46px; }
  body[data-page="index"] .acceso-sub { font-size: 16px; margin-bottom: 16px; max-width: none; }
  body[data-page="index"] .acceso-link { font-size: 10.5px; letter-spacing: 0.2em; }

  body[data-page="index"] .prod-band { min-height: 0; }
  body[data-page="index"] .prod-band-inner { padding: 62px 18px 66px; }
  body[data-page="index"] .prod-band-title { font-size: 40px; margin-bottom: 14px; }
  body[data-page="index"] .prod-band-sub { font-size: 17px; margin-bottom: 26px; max-width: none; }

  body[data-page="index"] .home-foot { padding: 56px 18px 64px; }
}

@media (max-width: 380px) {
  body[data-page="index"] .nav-row { bottom: 84px; gap: 0 6px; }
  body[data-page="index"] .nav-link { font-size: 9.5px; letter-spacing: 0.12em; }
  body[data-page="index"] .sec-title { font-size: 33px; }
  body[data-page="index"] .acceso-title { font-size: 27px; }
  body[data-page="index"] .prod-band-title { font-size: 34px; }
}


/* ============================================================
   4. PRODUCTOS  (productos.html)
   ============================================================ */
@media (max-width: 640px) {
  body[data-page="productos"] .hero { height: 78svh; min-height: 470px; }
  /* El bloque del hero estaba anclado abajo a la derecha (right:64px) con el
     texto alineado a la derecha: a 390px el botón ocupaba todo el ancho y la
     alineación quedaba peleada. En mobile va centrado de lado a lado. */
  body[data-page="productos"] .hero-text {
    left: 18px; right: 18px; bottom: 40px;
    align-items: stretch;
    text-align: center;
    max-width: none;
    gap: 18px;
  }
  body[data-page="productos"] .hero-text > div,
  body[data-page="productos"] .hero-text-line {
    font-size: 26px; line-height: 1.14; display: block; text-align: center;
  }
  body[data-page="productos"] .pasta-runner-wrap { padding: 34px 0 10px; }
  body[data-page="productos"] #pasta-runner { height: 84px; background-size: 480px 84px; }
  body[data-page="productos"] .hero-cta { width: 100%; justify-content: center; min-height: 52px; }

  body[data-page="productos"] .pasta-runner-wrap { margin-bottom: 6px; }
  body[data-page="productos"] .productos-section { padding-left: 0; padding-right: 0; }
}


/* ============================================================
   5. NOSOTROS  (nosotros.html)
   ============================================================ */
@media (max-width: 900px) {
  /* "SOMOS <palabra>" tenía white-space:nowrap a 64px: a 390px de ancho
     empujaba el documento a ~736px y aparecía scroll horizontal en toda
     la página. Se apila en dos renglones y baja de cuerpo. */
  body[data-page="nosotros"] .somos-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 34px 18px 18px;
    white-space: normal;
  }
  body[data-page="nosotros"] .somos-label { font-size: 34px; letter-spacing: 0.12em; line-height: 1.1; }
  body[data-page="nosotros"] .somos-clip { font-size: 34px; height: 42px; }
  body[data-page="nosotros"] .somos-word { font-size: 34px; line-height: 42px; height: 42px; }

  /* El collage está posicionado en % con fotos de hasta 560px de ancho nativo:
     entre 641px y 900px (tablet y teléfono acostado) la foto de más a la
     derecha (left:62%) todavía se salía y metía scroll horizontal en toda la
     página. Se recorta en el contenedor y se limita el ancho de la grande. */
  body[data-page="nosotros"] .photo-stack { overflow: hidden; max-width: 100%; }
  body[data-page="nosotros"] .photo-stack .ps img[src*="6.jpg"] { width: auto; max-width: 52vw; }
}

@media (max-width: 640px) {
  body[data-page="nosotros"] .somos { padding-top: 62px; }
  body[data-page="nosotros"] .somos-label { font-size: 29px; }
  body[data-page="nosotros"] .somos-clip { font-size: 29px; height: 38px; }
  body[data-page="nosotros"] .somos-word { font-size: 29px; line-height: 38px; height: 38px; }

  /* El collage de 9 fotos está posicionado en % con left hasta 62% y
     anchos nativos de hasta 560px: a 390px se desbordaba por derecha.
     En mobile se muestra un abanico chico de 3 fotos centrado. */
  body[data-page="nosotros"] .photo-stack {
    --stack-h: clamp(230px, 40svh, 330px);
    height: var(--stack-h);
    max-width: 100%;
    overflow: hidden;
  }
  body[data-page="nosotros"] .photo-stack .ps { display: none; }
  body[data-page="nosotros"] .photo-stack .ps:nth-child(1),
  body[data-page="nosotros"] .photo-stack .ps:nth-child(2),
  body[data-page="nosotros"] .photo-stack .ps:nth-child(6) { display: block; }
  body[data-page="nosotros"] .photo-stack .ps:nth-child(1) { top: 4% !important;  left: 2%  !important; }
  body[data-page="nosotros"] .photo-stack .ps:nth-child(2) { top: 26% !important; left: 30% !important; }
  body[data-page="nosotros"] .photo-stack .ps:nth-child(6) { top: 12% !important; left: 16% !important; }
  body[data-page="nosotros"] .photo-stack .ps img,
  body[data-page="nosotros"] .photo-stack .ps img[src*="1.jpg"],
  body[data-page="nosotros"] .photo-stack .ps img[src*="3.jpg"] {
    max-height: calc(var(--stack-h) * 0.62);
    max-width: 66vw;
    width: auto;
  }
  body[data-page="nosotros"] .photo-stack .ps img[src*="6.jpg"] {
    max-height: calc(var(--stack-h) * 0.74);
    width: auto;
    max-width: 70vw;
  }
  body[data-page="nosotros"] .somos-pad { padding-bottom: 26px; }

  /* Historia */
  body[data-page="nosotros"] .historia { flex-direction: column; padding: 34px 20px 10px; gap: 0; }
  body[data-page="nosotros"] .historia-text { max-width: none; width: 100%; }
  body[data-page="nosotros"] .historia-eyebrow { font-size: 10px; letter-spacing: 0.26em; }
  body[data-page="nosotros"] .historia-title { font-size: 34px; line-height: 1.05; }
  body[data-page="nosotros"] .historia-sub { font-size: 17px; }
  body[data-page="nosotros"] .historia-body { font-size: 15.5px; line-height: 1.62; }
  body[data-page="nosotros"] .historia-body p { margin-bottom: 14px; }
  body[data-page="nosotros"] .historia-cta { width: 100%; justify-content: center; text-align: center; }
  body[data-page="nosotros"] .historia-image { width: 100%; margin: 0; }
  body[data-page="nosotros"] .historia-image img { width: 100%; height: auto; }

  body[data-page="nosotros"] .nc-title { font-size: 34px; }
}


/* ============================================================
   6. MÉTODO  (metodo.html)
   ============================================================ */
@media (max-width: 640px) {
  body[data-page="metodo"] .hero { height: 100svh; }
  body[data-page="metodo"] .hero-inner { padding: 0 20px; }
  body[data-page="metodo"] .hero-eyebrow { font-size: 10px; letter-spacing: 0.3em; }
  body[data-page="metodo"] .hero-title { font-size: 44px; line-height: 0.98; }
  body[data-page="metodo"] .hero-subtitle { font-size: 18px; line-height: 1.35; max-width: none; }

  body[data-page="metodo"] .proceso { padding: 56px 0 40px; }
  body[data-page="metodo"] .proceso-inner { padding: 0 20px; }
  body[data-page="metodo"] .proceso-head { margin-bottom: 22px; }
  body[data-page="metodo"] .proceso-eyebrow { font-size: 10px; letter-spacing: 0.3em; }
  body[data-page="metodo"] .proceso-title { font-size: 36px; line-height: 1.02; }
  body[data-page="metodo"] .proceso-lead,
  body[data-page="metodo"] .proceso-text { font-size: 15.5px; line-height: 1.62; }
  body[data-page="metodo"] .proceso-text-col { max-width: none; }
  body[data-page="metodo"] .proceso-photo,
  body[data-page="metodo"] .proceso-photo-square,
  body[data-page="metodo"] .proceso-photo-wide { width: 100%; max-width: 100%; height: auto; }

  body[data-page="metodo"] .ingredientes { padding: 52px 0 56px; }
  body[data-page="metodo"] .ingredientes-head { padding: 0 20px; margin-bottom: 26px; }
  body[data-page="metodo"] .ingredientes-eyebrow { font-size: 10px; letter-spacing: 0.3em; }
  body[data-page="metodo"] .ingredientes-title { font-size: 36px; }
  body[data-page="metodo"] .ingredientes-lead { font-size: 15.5px; line-height: 1.6; }

  body[data-page="metodo"] .ing-row { grid-template-columns: 1fr; gap: 0; padding: 0 0 34px; }
  body[data-page="metodo"] .ing-illus { width: 100%; height: 52vw; max-height: 260px; margin-bottom: 16px; }
  body[data-page="metodo"] .ing-illus img { width: 100%; height: 100%; object-fit: cover; }
  body[data-page="metodo"] .ing-text-col, body[data-page="metodo"] .ing-list { padding: 0 20px; }
  body[data-page="metodo"] .ing-name { font-size: 34px; line-height: 1.02; margin-bottom: 8px; }
  body[data-page="metodo"] .ing-text { font-size: 15.5px; line-height: 1.6; }
  body[data-page="metodo"] .ing-meta { font-size: 11px; letter-spacing: 0.14em; gap: 8px; flex-wrap: wrap; }
}


/* ============================================================
   7. B2B  (b2b.html)
   ============================================================ */
@media (max-width: 640px) {
  body[data-page="b2b"] .hero { min-height: 100svh; height: auto; }
  /* 92px abajo deja libre la esquina del botón flotante de WhatsApp */
  body[data-page="b2b"] .hero-inner, body[data-page="b2b"] .hero-content { padding: 96px 18px 92px; }
  body[data-page="b2b"] .hero-overlay { background: rgba(0,0,0,0.5); }
  body[data-page="b2b"] .hero-eyebrow { font-size: 10px; letter-spacing: 0.28em; }
  body[data-page="b2b"] .hero-title { font-size: 34px; line-height: 1.02; }
  body[data-page="b2b"] .hero-tagline { font-size: 16.5px; line-height: 1.4; max-width: none; }

  body[data-page="b2b"] .use-cases { gap: 10px; }
  /* La foto de fondo del hero es packaging con mucho contraste: al ancho de un
     teléfono el texto de las tarjetas quedaba encima de etiquetas y logos.
     Se opaca el scrim y se difumina lo que hay detrás. */
  body[data-page="b2b"] .uc-card {
    padding: 16px; gap: 12px;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  body[data-page="b2b"] .uc-num { font-size: 22px; flex: 0 0 auto; }
  body[data-page="b2b"] .uc-text { font-size: 15px; line-height: 1.42; }

  body[data-page="b2b"] .hero-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  body[data-page="b2b"] .btn-primary,
  body[data-page="b2b"] .btn-ghost { width: 100%; justify-content: center; }

  body[data-page="b2b"] .acceso { padding: 54px 18px 58px; }
  body[data-page="b2b"] .acceso-grid { grid-template-columns: 1fr; gap: 16px; }
  body[data-page="b2b"] .acceso-card { min-height: 0; padding: 26px 22px; }
  body[data-page="b2b"] .acceso-icon { top: 22px; right: 20px; width: 38px; height: 38px; }
  body[data-page="b2b"] .acceso-eyebrow { padding-right: 46px; }
  body[data-page="b2b"] .acceso-title { font-size: 30px; padding-right: 46px; }
  body[data-page="b2b"] .acceso-sub { font-size: 16px; max-width: none; }

  body[data-page="b2b"] .benefits { padding: 54px 18px 58px; }
  body[data-page="b2b"] .benefits-head { margin-bottom: 30px; }
  body[data-page="b2b"] .section-title { font-size: 36px; line-height: 1.02; }
  body[data-page="b2b"] .section-eyebrow { font-size: 10px; letter-spacing: 0.3em; }
  body[data-page="b2b"] .benefits-grid { grid-template-columns: 1fr; gap: 32px; }
  body[data-page="b2b"] .benefit-title { font-size: 20px; }
  body[data-page="b2b"] .benefit-text { font-size: 15px; line-height: 1.55; }

  body[data-page="b2b"] .contacto-title { font-size: 34px; }
}


/* ============================================================
   8. BLOG — índice  (blog.html)
   ============================================================ */
@media (max-width: 640px) {
  body[data-page="blog"] .page-header { padding: 92px 18px 26px; }
  body[data-page="blog"] .page-eyebrow { font-size: 10px; letter-spacing: 0.3em; }
  body[data-page="blog"] .page-title { font-size: 38px; line-height: 1.0; }
  body[data-page="blog"] .page-lead { font-size: 16.5px; line-height: 1.4; max-width: none; }

  /* Fila de filtros deslizable en vez de envuelta en 3 renglones */
  body[data-page="blog"] .blog-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 0 18px 12px;
    margin: 0 0 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body[data-page="blog"] .blog-filters::-webkit-scrollbar { display: none; }
  body[data-page="blog"] .blog-filter {
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: 0.14em;
    padding: 12px 16px;
    min-height: 44px;
  }

  body[data-page="blog"] .blog { padding-left: 0; padding-right: 0; }
  body[data-page="blog"] .blog-grid { grid-template-columns: 1fr; gap: 0; }
  body[data-page="blog"] .post {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 0 30px;
    margin: 0 18px 30px;
  }
  /* Antes acá había `height: 54vw; max-height: 260px`, un alto fijo que daba
     una caja de ~1.7:1 y recortaba las piezas gráficas más fuerte que en
     desktop. Se respeta la relación 4:3 del grid, que es la de las piezas. */
  body[data-page="blog"] .post-media { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  body[data-page="blog"] .post-ph { width: 100%; height: 54vw; max-height: 260px; }
  body[data-page="blog"] .post-media img { width: 100%; height: 100%; object-fit: cover; }
  body[data-page="blog"] .post-body { padding: 16px 0 0; }
  body[data-page="blog"] .post-cat { font-size: 10px; letter-spacing: 0.22em; }
  body[data-page="blog"] .post-date { font-size: 11px; }
  body[data-page="blog"] .post-title { font-size: 21px; line-height: 1.2; margin: 8px 0 8px; }
  body[data-page="blog"] .post-excerpt { font-size: 15px; line-height: 1.55; }
  body[data-page="blog"] .post-link {
    font-size: 11px; letter-spacing: 0.16em;
    padding: 16px 0 12px; display: inline-flex; align-items: center; min-height: 44px;
  }

  body[data-page="blog"] .portal-banner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 20px; margin: 0 18px; }
  body[data-page="blog"] .portal-banner-text { font-size: 16px; }
  body[data-page="blog"] .portal-banner-link { width: 100%; justify-content: center; min-height: 48px; }
}


/* ============================================================
   9. NOTAS DEL BLOG  (blog-*.html — data-tpl="articulo")
   ============================================================ */
@media (max-width: 640px) {
  body[data-tpl="articulo"] .article-hero { height: 52vh; min-height: 300px; }
  body[data-tpl="articulo"] .article-wrap { padding: 0 20px; max-width: none; }
  body[data-tpl="articulo"] .article-eyebrow { font-size: 10px; letter-spacing: 0.28em; }
  body[data-tpl="articulo"] .article-title { font-size: 32px; line-height: 1.1; }

  /* Cuerpo de lectura: 16.5px y line-height alto — es texto largo. */
  body[data-tpl="articulo"] .article-body { font-size: 16.5px; line-height: 1.68; }
  body[data-tpl="articulo"] .article-body p { margin-bottom: 18px; }
  body[data-tpl="articulo"] .article-body h2 { font-size: 25px; line-height: 1.15; margin-top: 30px; }
  body[data-tpl="articulo"] .article-body h3 { font-size: 19px; margin-top: 24px; }
  body[data-tpl="articulo"] .article-body img { width: 100%; height: auto; }
  body[data-tpl="articulo"] .article-list { font-size: 16.5px; line-height: 1.62; padding-left: 20px; }
  body[data-tpl="articulo"] .article-list li { margin-bottom: 9px; }
  body[data-tpl="articulo"] .article-nav { flex-direction: column; gap: 10px; align-items: stretch; padding: 26px 20px 40px; }
  body[data-tpl="articulo"] .article-nav a { width: 100%; justify-content: center; min-height: 48px; }
}


/* ============================================================
   10. FICHAS DE PRODUCTO  (producto-*.html — data-tpl="producto")
   ============================================================ */
@media (max-width: 640px) {
  /* 10px, no 86: la topbar ya la despejo el breadcrumb de arriba. */
  body[data-tpl="producto"] .product-header { padding: 10px 18px 8px; }
  body[data-tpl="producto"] .product-eyebrow { font-size: 10px; letter-spacing: 0.28em; }
  body[data-tpl="producto"] .product-title { font-size: 34px; line-height: 1.0; }

  body[data-tpl="producto"] .product-main { grid-template-columns: 1fr; gap: 26px; padding: 18px 18px 40px; }
  body[data-tpl="producto"] .gallery { grid-template-columns: 1fr; gap: 12px; position: static; }
  /* height:100%, NO auto: las fotos 2 y 3 son <image-slot>, que pinta en shadow
     DOM con .frame{position:absolute;inset:0}. Con height:auto el slot no tiene
     contenido en flujo, colapsa al min-height y deja la caja a medio llenar. El
     alto lo pone .shot, que ya trae aspect-ratio. */
  body[data-tpl="producto"] .gallery img,
  body[data-tpl="producto"] .gallery image-slot { width: 100%; height: 100%; }
  /* image-slot es un editor: su hoja interna le pone touch-action:none a la
     imagen para poder arrastrarla y reencuadrarla. En el sitio publicado eso
     solo secuestra el gesto y la pagina no scrollea con el dedo encima de la
     foto. La foto 1 de la galeria es un <img> comun y por eso era la unica que
     scrolleaba. ::part(image) alcanza el <img part="image"> desde afuera del
     shadow DOM.
     Va para TODOS los slots, no solo los de la galeria: los del video y los de
     la receta hoy estan vacios (el <img> queda display:none y no molesta), pero
     bloquean igual apenas se les cargue la foto. */
  image-slot::part(image) { touch-action: pan-y; }

  body[data-tpl="producto"] .ficha-h { font-size: 25px; line-height: 1.2; }
  body[data-tpl="producto"] .ficha-p { font-size: 15.5px; line-height: 1.62; }
  body[data-tpl="producto"] .ficha-section { padding: 22px 0; }
  body[data-tpl="producto"] .ficha-label { font-size: 10px; letter-spacing: 0.24em; }
  body[data-tpl="producto"] .specs { grid-template-columns: 1fr; gap: 0; }
  body[data-tpl="producto"] .specs > div { padding: 11px 0; }
  body[data-tpl="producto"] .specs .k { font-size: 10px; letter-spacing: 0.24em; }
  body[data-tpl="producto"] .ingredients-list { font-size: 14px; gap: 7px; }
  body[data-tpl="producto"] .ingredients-list .badge,
  body[data-tpl="producto"] .badge { font-size: 11px; padding: 7px 11px; letter-spacing: 0.06em; }

  body[data-tpl="producto"] .coccion, body[data-tpl="producto"] .cocina { padding: 48px 0 52px; }
  body[data-tpl="producto"] .coccion-inner, body[data-tpl="producto"] .cocina-inner {
    grid-template-columns: 1fr; gap: 22px; padding: 0 18px;
  }
  body[data-tpl="producto"] .coccion-title, body[data-tpl="producto"] .cocina-title { font-size: 32px; line-height: 1.05; }
  body[data-tpl="producto"] .cocina-eyebrow { font-size: 10px; letter-spacing: 0.28em; }
  body[data-tpl="producto"] .coccion-text { font-size: 15.5px; line-height: 1.62; }
  body[data-tpl="producto"] .coccion-video-wrap,
  body[data-tpl="producto"] .cocina-video-wrap { width: 100%; }
  /* Los videos de coccion son VERTICALES (1080x1920). El 16/10 que habia aca
     era una caja apaisada: dejaba ver ~30% del cuadro y ni un subtitulo. */
  body[data-tpl="producto"] .coccion-video,
  body[data-tpl="producto"] .cocina-video { width: 100%; height: auto; aspect-ratio: 9 / 16; }


  body[data-tpl="producto"] .cook-steps { font-size: 15px; line-height: 1.55; gap: 12px; }

  body[data-tpl="producto"] .receta { padding: 48px 0 52px; }
  body[data-tpl="producto"] .receta-inner { grid-template-columns: 1fr; gap: 22px; padding: 0 18px; }
  body[data-tpl="producto"] .receta-eyebrow { font-size: 10px; letter-spacing: 0.28em; }
  body[data-tpl="producto"] .receta-title { font-size: 32px; line-height: 1.05; }
  body[data-tpl="producto"] .receta-photo, body[data-tpl="producto"] .receta-photo-wrap { width: 100%; height: auto; }
  body[data-tpl="producto"] .recipe-h { font-size: 19px; }
  body[data-tpl="producto"] .recipe-text { font-size: 15.5px; line-height: 1.62; }
  body[data-tpl="producto"] .recipe-ing { font-size: 15px; line-height: 1.6; }
  body[data-tpl="producto"] .recipe-meta { font-size: 12px; gap: 14px; flex-wrap: wrap; }

  body[data-tpl="producto"] .recipe-card-wrap { padding: 0 18px; }
  body[data-tpl="producto"] .recipe-card { grid-template-columns: 1fr; }
  body[data-tpl="producto"] .recipe-card-img { width: 100%; height: 52vw; max-height: 250px; }
  body[data-tpl="producto"] .recipe-card-body { padding: 18px 18px 20px; }
  body[data-tpl="producto"] .recipe-card-name { font-size: 21px; line-height: 1.2; }
  /* display:flex es obligatorio: el <span> es inline-block por defecto y ahi el
     justify-content no hace nada, el min-height estira la caja y el texto queda
     pegado arriba y a la izquierda. */
  body[data-tpl="producto"] .recipe-card-cta {
    width: 100%; min-height: 48px;
    display: flex; align-items: center; justify-content: center;
  }

  body[data-tpl="producto"] .also-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  body[data-tpl="producto"] .also-h { font-size: 30px; }
}


/* ============================================================
   11. DISTRIBUIDORES  (distribuidores.html)
   ============================================================ */
@media (max-width: 640px) {
  body[data-page="distribuidores"] .page-header { padding: 92px 18px 24px; }
  body[data-page="distribuidores"] .page-eyebrow { font-size: 10px; letter-spacing: 0.3em; }
  body[data-page="distribuidores"] .page-title { font-size: 38px; line-height: 1.0; }
  body[data-page="distribuidores"] .page-lead { font-size: 16.5px; line-height: 1.4; max-width: none; }

  body[data-page="distribuidores"] .online { padding: 40px 18px 48px; }
  body[data-page="distribuidores"] .online-grid { grid-template-columns: 1fr; gap: 16px; }
  body[data-page="distribuidores"] .online-logo { height: 150px; }
  body[data-page="distribuidores"] .online-region { font-size: 10px; letter-spacing: 0.24em; }
  body[data-page="distribuidores"] .online-name { font-size: 19px; }
  body[data-page="distribuidores"] .online-cta { font-size: 11px; letter-spacing: 0.16em; min-height: 44px; padding: 12px 20px; }

  body[data-page="distribuidores"] .map-section { padding: 44px 0 52px; }
  body[data-page="distribuidores"] .map-head { padding: 0 18px; margin-bottom: 20px; }
  body[data-page="distribuidores"] .section-title { font-size: 34px; line-height: 1.02; }
  body[data-page="distribuidores"] .section-eyebrow { font-size: 10px; letter-spacing: 0.3em; }

  /* El mapa y la lista van uno sobre otro; el mapa primero (es lo que la
     gente busca en la calle) y la lista abajo con altura acotada. */
  body[data-page="distribuidores"] .map-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    height: auto;
  }
  body[data-page="distribuidores"] #map,
  body[data-page="distribuidores"] .map-grid > div[id*="map"] { order: 1; height: 62vh; min-height: 330px; width: 100%; }
  body[data-page="distribuidores"] .store-list { order: 2; max-height: 56vh; height: auto; overflow-y: auto; }
  body[data-page="distribuidores"] .search-bar { order: 0; }

  body[data-page="distribuidores"] .search-bar label { font-size: 10px; letter-spacing: 0.24em; }
  body[data-page="distribuidores"] .search-clear { min-height: 44px; font-size: 11px; letter-spacing: 0.16em; }
  body[data-page="distribuidores"] .store-list-count { font-size: 11px; letter-spacing: 0.16em; }
  body[data-page="distribuidores"] .store-item { padding: 14px 14px; }
  body[data-page="distribuidores"] .store-name { font-size: 16px; }
  body[data-page="distribuidores"] .store-address { font-size: 13.5px; line-height: 1.45; }
  body[data-page="distribuidores"] .store-meta { font-size: 11px; }
}


/* ============================================================
   12. TELÉFONO CHICO  (<= 380px) — ajustes finales
   ============================================================ */
@media (max-width: 380px) {
  .topbar { padding: 5px 12px; }
  .topbar-logo img { height: 50px; }
  .topbar-social { gap: 10px; }
  .topbar-social svg { width: 16px; height: 16px; }

  .menu-list a { font-size: 30px; padding: 13px 0; }
  .menu-right { padding: 84px 18px 34px; }

  .productos-title { font-size: 29px; }
  /* sigue siendo 2 cards; el calc de arriba ya se adapta solo */
  .carrusel-track { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }
  .card-name { font-size: 12.5px; }

  /* el min(22px, 5.7vw) de arriba ya achica solo, no hace falta fijarlo aca */

  body[data-page="nosotros"] .somos-label,
  body[data-page="nosotros"] .somos-clip,
  body[data-page="nosotros"] .somos-word { font-size: 26px; }
  body[data-page="nosotros"] .somos-clip,
  body[data-page="nosotros"] .somos-word { height: 34px; line-height: 34px; }

  body[data-page="metodo"] .hero-title { font-size: 38px; }
  body[data-page="b2b"] .hero-title { font-size: 30px; }
  body[data-tpl="producto"] .product-title { font-size: 30px; }
  body[data-tpl="articulo"] .article-title { font-size: 28px; }
  body[data-page="blog"] .page-title,
  body[data-page="distribuidores"] .page-title { font-size: 33px; }
}


/* ============================================================
   13. TELÉFONO ACOSTADO  (landscape, alto <= 500px)
   ------------------------------------------------------------
   Va después de todas las secciones por ancho a propósito: 844x390
   entra en el bloque de <=900px, así que si estuviera arriba lo
   pisarían el padding y el justify-content de esa sección.
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .topbar { padding: 4px 14px; }
  .topbar-logo img { height: 46px; }
  .burger { width: 40px; height: 40px; }

  /* Un hero de 100vh acostado deja el título y el CTA fuera de pantalla */
  .hero { height: auto; min-height: 0; }
  body[data-page="index"] .hero,
  body[data-page="metodo"] .hero { height: 150svh; }
  body[data-page="productos"] .hero { height: 150svh; min-height: 0; }
  body[data-page="index"] .hero-brand { width: min(38vw, 260px); }
  body[data-page="index"] .nav-row { bottom: 26px; max-width: 70vw; }
  body[data-page="b2b"] .hero-inner,
  body[data-page="b2b"] .hero-content { padding: 74px 18px 44px; }

  /* Con justify-content:center y contenido más alto que la caja, el
     desborde de arriba queda inalcanzable (no se puede scrollear hacia
     un overflow generado por centrado flex). Acostado se ancla arriba. */
  .menu-right { padding: 66px 26px 26px; justify-content: flex-start; }
  .menu-list a { font-size: 23px; padding: 8px 0; }
  .menu-list a .num { padding-top: 4px; }
  .menu-list .has-sub > a > .caret { margin-top: 4px; width: 18px; height: 18px; }
  .menu-list .submenu a { font-size: 14px; padding: 10px 0; }
  .menu-topbar img { width: 96px; }
  .menu-topbar { padding: 4px 14px; }
}


/* ============================================================
   14. SAFE AREAS — SIEMPRE AL FINAL DEL ARCHIVO
   ------------------------------------------------------------
   Las 31 páginas declaran viewport-fit=cover, así que el fondo pinta
   debajo del notch y de la barra de gestos del iPhone (que es lo que
   queremos para los heroes a pantalla completa), pero los controles
   tienen que respetar esas zonas o quedan tapados.

   Va último a propósito: los bloques de arriba usan el shorthand
   `padding`, que pisa cualquier longhand declarado antes. Si se agrega
   una sección nueva, agregarla ANTES de esta.

   `.social-float` lleva el prefijo `body` porque social-float.js inyecta
   su propio <style> en el <head> en runtime — o sea después de este
   archivo — y a igual especificidad ganaría él.
   ============================================================ */
@media (max-width: 900px) {
  .topbar {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-top: max(6px, env(safe-area-inset-top));
  }
  .menu-topbar {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .menu-right { padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px)); }
  body .social-float {
    right: max(14px, calc(env(safe-area-inset-right) + 8px));
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
  }
  .foot, .home-foot, .nos-foot { padding-bottom: max(64px, calc(env(safe-area-inset-bottom) + 48px)); }
  /* La nav del hero del home vive pegada al borde inferior */
  body[data-page="index"] .nav-row { bottom: max(92px, calc(env(safe-area-inset-bottom) + 84px)); }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  body[data-page="index"] .nav-row { bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px)); }
}

/* ============================================================
   14. FLECHAS DEL CARRUSEL EN TELEFONO
   assets/carrusel.css las oculta con .carrusel-arrow{display:none} dentro de
   @media (max-width:780px). Este bloque usa EL MISMO ancho a proposito: con el
   breakpoint de 640px del resto del archivo, entre 640 y 780 quedaban ocultas.
   Va al final y con la misma especificidad, asi que gana por orden de fuente.
   NO mover esto a @media (hover:none): esa query es de capacidad tactil, no de
   ancho, y en un navegador de escritorio angosto no aplica.
   ============================================================ */
@media (max-width: 780px) {
  .carrusel-arrow { display: flex; width: 40px; height: 40px; }
  .carrusel-arrow.left  { left: 6px; }
  .carrusel-arrow.right { right: 6px; }
  .carrusel-arrow svg { width: 14px; height: 14px; }
}
