/* ============================================================
   NASTASI FOODS — mobile.css   ·   RONDA 25, 9 sep 2026
   ------------------------------------------------------------
   LA REGLA DE ORO DE ESTA HOJA: **NI UNA SOLA REGLA FUERA DE UNA
   MEDIA QUERY DE MOVIL.** El escritorio esta perfecto y no se toca.

   "DE MOVIL" SON DOS CONDICIONES, NO UNA. Casi todo cuelga de un
   `max-width` (768px = telefono; 1080 y 430 solo donde el bloque que se
   corrige vive exactamente ahi). La excepcion es §M1b, que cuelga de
   `(pointer: coarse)` — y es la condicion CORRECTA, no un atajo: el
   defecto que arregla lo causa una regla de objetivo tactil que un raton
   nunca recibe. Un escritorio con raton no cumple `coarse`, asi que la
   garantia sigue en pie: **ningun bloque de esta hoja puede aplicarse a
   la web de ordenador de Sergio.** Comprobado en el CSSOM en vivo a
   1440px: 0 bloques casan.

   Se escribe como hoja aparte, cargada LA ULTIMA, en vez de repartir
   los arreglos por pages.css / scenes.css / catalog.css, por tres
   motivos:

     · El riesgo. Una regla suelta en pages.css puede caer fuera del
       bloque que uno cree y llegar al escritorio. Aqui es
       ESTRUCTURALMENTE IMPOSIBLE: todo cuelga de `@media (max-width)`.
     · La cascada. Cargada al final gana sin `!important` salvo cuando
       hay que vencer un estilo EN LINEA (los `--w` de las fotos de
       How it works), que es el unico sitio donde aparece.
     · La marcha atras. Quitar el `<link>` devuelve el sitio al estado
       de la ronda 24, exacto, sin buscar diffs.

   El corte es 768px = telefono. NO se toca 1024px, que es donde vive
   el modo apilado de How it works y con el que `narrow()` en
   rolling-steps.js tiene que coincidir EXACTAMENTE (CLAUDE.md). Al
   escribir por debajo de 768 esa pareja se queda como estaba.

   Medido todo a 390x844 (iPhone 14/15) y comprobado a 320px.
   ============================================================ */


/* ============================================================
   §M1 · EL MENU NO TENIA SALIDA
   ------------------------------------------------------------
   `--z-drawer: 90` contra `--z-header: 60`: el panel se pinta ENCIMA
   de la cabecera, asi que la hamburguesa que lo abrio queda debajo y
   no se puede volver a pulsar. Sin boton de cerrar y sin enlace a
   Home, la unica salida era el boton "atras" del navegador.

   Se arregla en el panel y no subiendo la cabecera a z-index 100:
   una cabecera por encima de un panel a pantalla completa deja la
   barra de la tienda y el carrito flotando sobre el menu, que es un
   segundo problema. El panel gana su propio boton de cerrar.

   El fondo pasa de `--green-900` (verde muy oscuro, el que no te
   gusta y que no esta en ninguna otra pantalla del sitio) al papel
   de la casa: el mismo `--bone`/pistacho de la cabecera, con la
   tinta como color de texto.
   ============================================================ */
@media (max-width: 959px) {
  .mobile-nav {
    background: var(--bone, #F3EEE3);
    color: var(--ink, #16140F);
    /* sitio para el boton de cerrar, que va sobre la esquina */
    padding-top: calc(var(--header-h) + 1rem);
  }

  /* Los enlaces eran claros sobre verde oscuro; sobre papel necesitan
     tinta y una linea que se vea. */
  .mobile-nav a.m-link {
    color: var(--ink, #16140F);
    border-bottom-color: color-mix(in srgb, var(--ink, #16140F) 16%, transparent);
  }
  .mobile-nav a.m-link .num { color: var(--brass, #A87B3D); }
  .mobile-nav__foot .manifest { color: color-mix(in srgb, var(--ink, #16140F) 62%, transparent); }

  /* El enlace a Home: primero de la lista, marcado como los demas.
     Se numera `00` a proposito — la numeracion existente (01,02,03,05)
     es del cliente y NO se toca; Our Story sigue oculta por
     components.css:1047, que es una decision deliberada. */
  .mobile-nav .m-link--home { font-weight: 560; }

  /* El boton de cerrar. Va dentro del panel, asi que siempre esta por
     encima de el, pase lo que pase con los z-index de la cabecera. */
  .mobile-nav__close {
    position: absolute;
    top: max(env(safe-area-inset-top, 0px), .75rem);
    right: var(--gutter, 22px);
    z-index: 2;
    width: 44px; height: 44px;          /* 44px: objetivo tactil WCAG 2.5.8 */
    display: grid; place-items: center;
    border: 1px solid color-mix(in srgb, var(--ink, #16140F) 22%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bone-pure, #FBF7EF) 90%, transparent);
    color: var(--ink, #16140F);
    font-size: 1.35rem; line-height: 1;
    cursor: pointer;
  }
  .mobile-nav__close:active { transform: scale(.94); }
}


/* ============================================================
   §M1b · "HOME / LA PAGINA" DESALINEADO EN TODAS LAS PANTALLAS
   ------------------------------------------------------------
   Sergio, ronda 25c: *"en todas las pantallas de la pagina web el
   home/la pagina estan desalineados"*. Lo esta, y la causa explica
   por que solo pasa en el telefono.

   `.breadcrumb` es `display: flex`, y sus hijos son TRES piezas:
   el `<a>Home</a>`, **el " / " suelto — que en un contenedor flex se
   convierte en un item anonimo** — y el `<span>` de la pagina. Sobre
   eso, el bloque de objetivos tactiles de pages.css le da
   `min-height: 44px; display: inline-flex; align-items: center` **solo
   al `<a>`**. Resultado: el enlace centra su texto dentro de 44px
   mientras la barra y el nombre de la pagina, estirados por el
   `align-items: stretch` por defecto, dejan su texto ARRIBA.

   MEDIDO reproduciendo la regla tactil a 390px: "Home" con su centro
   en y=22 y la barra en y=9 — **13px de desfase**, que es exactamente
   el escalon de la foto.

   Va en `(pointer: coarse)` y no en un `max-width` a proposito: la
   causa no es el ancho, es el puntero grueso. Un raton nunca recibe
   esa regla de 44px — comprobado, con raton los tres centros ya caen
   en y=9 — asi que este bloque NO PUEDE tocar un escritorio normal.
   Y `align-items: center` sobre una fila de texto de una sola linea
   no mueve nada donde no habia desfase.
   ============================================================ */
@media (pointer: coarse) {
  .breadcrumb { align-items: center; flex-wrap: wrap; row-gap: 0; }
}


/* ============================================================
   §M2 · LAS MARCAS: 30 LOGOS PEREZOSOS EN UNA CAPA DE 5.700px
   ------------------------------------------------------------
   "se demora demasiado en cargar y se ven tarjetas sin logos o se
   empiezan a trabar" — son dos sintomas de una sola causa y estan
   MEDIDOS:

     30 <img>  ·  los 30 con loading="lazy"  ·  8 sin cargar al medir
     ninguno con atributo `width` (solo height="52")
     .brand-marquee__track: animacion infinita + will-change:transform
     30 fichas de min-width:156px  ->  capa compuesta de ~5.700px

   Sin `width` el navegador no puede reservar el hueco antes de que
   llegue el byte: la ficha ya mide 156px y esta VACIA — eso es
   literalmente "tarjetas sin logos". Y la marquesina se mide y clona
   en JS (initLabelMarquees): si mide cuando las imagenes aun no tienen
   tamaño, el `-50%` no cierra y la tira da el tiron.

   La unica valvula de escape que existia era
   `@media (prefers-reduced-motion: reduce)`, que un telefono normal
   NO cumple. Aqui se baja el coste sin apagar la animacion:
   fichas mas pequeñas => capa mas corta => el GPU del telefono la
   sostiene. El `loading="eager"` y el `width` van en el HTML, que es
   donde el navegador los tiene que leer antes de pintar.
   ============================================================ */
@media (max-width: 768px) {
  .brand-logo {
    height: 62px;                        /* 88 -> 62 */
    min-width: 112px;                    /* 156 -> 112 */
    padding: 0 1rem;
  }
  .brand-logo img { height: 30px; max-width: 104px; }

  /* La capa promovida deja de compensar cuando mide miles de pixeles:
     el telefono la re-rasteriza entera. Con las fichas mas cortas la
     tira baja de ~5.700 a ~3.700px, y sin `will-change` el navegador
     decide por si mismo si le conviene promoverla. */
  .brand-marquee__track { will-change: auto; }
}


/* ============================================================
   §M3 · "HOW IT WORKS": UN HUECO ARRIBA, OTRO ABAJO Y LA PIZZA
         EN EL SITIO EQUIVOCADO
   ------------------------------------------------------------
   Medido en modo apilado a 390x844:

     .steps        4546 .. 6132
     padding-top del stage           102px
     .disc--steps (pizza)     4699 .. 4879   <- 180px + 32 de margen
     .steps__head   empieza en       4879    <- 333px por debajo del tope
     ultima tarjeta acaba en         5957
     .steps__stage acaba en          6005    (48px de padding)
     .steps__pin   acaba en          6132    (126,6px de padding)
                                     ------
                                     175px de NADA al final

   O sea: la pizza ocupa el hueco de arriba (donde se lee como espacio
   vacio, porque el lavado la deja casi invisible) y al final sobran
   175px de nada. Moverla de arriba abajo cierra los DOS huecos con un
   solo cambio, y es ademas lo que pediste: "que despues del step 4
   saliera la pizza aunque sea la mitad".

   Como se mueve: el stage pasa a `flex-direction: column` y se usa
   `order`. Sus unicos hijos EN FLUJO son la pizza y la cortina
   (`.steps__bg` es `absolute`), asi que el cambio es de dos piezas.
   Se deja `align-items` en su valor por defecto (stretch) para que la
   cortina conserve EXACTAMENTE el ancho que tenia en modo bloque
   (317px medidos), y solo la pizza se centra con `align-self`.

   La media pizza sale gratis: `.steps__stage` ya tiene
   `overflow: hidden`, asi que un margen inferior negativo la recorta
   limpio contra la costura de la seccion.
   ============================================================ */
@media (max-width: 768px) {
  .steps__stage {
    display: flex;
    flex-direction: column;
    /* el titulo sube: 102 -> 28 */
    padding-top: 1.75rem;
    padding-bottom: 0;
  }
  .steps__curtain { order: 1; }

  .disc--steps {
    order: 2;
    align-self: center;
    /* el translateX(-89px) que la colocaba a la izquierda arriba ya no
       aplica: aqui la centra el propio flex */
    transform: none;
    margin: 1.25rem 0 -92px;             /* -92 de 180 => se ve algo mas de la mitad */
  }

  /* Sin los 126,6px de cola no queda hueco muerto detras de la pizza. */
  .steps__pin { padding-bottom: 0; }

  /* Las dos fotos del margen van a `--w:12vw` y `14vw`, que en un
     telefono de 390px son 47px y 55px — sellos, no fotos. En
     escritorio esos mismos valores dan 173px y son correctos, asi que
     el arreglo es de movil y no del valor.
     `!important` porque `--w` viene en un atributo `style=""` en el
     HTML y un estilo en linea gana a la hoja salvo con !important. */
  .steps__tiles i { --w: 30vw !important; }
  .steps__tiles i:nth-child(2) { --w: 34vw !important; }
}


/* ============================================================
   §M4 · LAS RESEÑAS, UN PUNTO MAS PEQUEÑAS
   ------------------------------------------------------------
   Medidas: 214x327 con el texto a 16,14px. Pediste "un poco mas
   pequeñas", no diminutas: se bajan a ~185 de ancho y el texto a
   15px, que sigue por encima del minimo legible.
   ============================================================ */
@media (max-width: 768px) {
  .review-card { width: 185px; }
  .review-card p { font-size: .94rem; line-height: 1.45; }
  .review-card .vcard__body { padding: .9rem 1rem; }
}


/* ============================================================
   §M5 · LOS BOTONES DE "WHY NASTASI" SE PINTABAN DETRAS DEL PAPEL
   ------------------------------------------------------------
   Este es el unico bloque que llega hasta 1080px, y es a proposito:
   el defecto vive EXACTAMENTE ahi, no solo en el telefono.

   En la regla base `.benefits__cta` es `position: absolute` y cuelga
   del borde inferior de la ficha. A partir de `max-width: 1080px`
   pasa a `position: static` para entrar dentro de la ficha... y
   **`z-index` NO APLICA A UN ELEMENTO ESTATICO**. Su `z-index: 3` se
   queda inerte, mientras `.vcard__shape` — que SI esta posicionado,
   con `z-index: 1` — se pinta por encima. De ahi "los botones
   quedaron por detras de la tarjeta".

   Y por que se podian pulsar igual: `.vcard__shape` lleva
   `pointer-events: none`, asi que `elementsFromPoint` devolvia el
   boton y la primera medida dijo que estaba bien. Lo que tapa no es
   el raton, es la PINTURA.

   LA TRAMPA AL ARREGLARLO: la regla base tambien declara `left: 50%`
   y `bottom: 0`. Con `static` los ignora; en cuanto se pasa a
   `relative` SE APLICAN y el bloque se va media pantalla a la
   derecha. Por eso hay que devolverlos a `auto` en la misma regla.

   `relative` sin desplazamientos ocupa la MISMA caja que `static`:
   no mueve un pixel, solo devuelve el orden de pintado. Verificado
   midiendo la caja antes y despues a 390 y a 1024.
   ============================================================ */
@media (max-width: 1080px) {
  .benefits__cta {
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 3;
    /* RONDA 25c — Y CENTRADOS. Ya se veian (arriba se arreglo el pintado),
       pero salian pegados a la izquierda y **1px POR FUERA** del borde de la
       ficha: medido, los botones en l=21 contra una tarjeta en l=22, porque
       el ticket sangra por su forma. El bloque de <=1080px los habia puesto
       en `justify-content: flex-start`, y esa es la excepcion, no la norma:
       en escritorio la regla base es `left: 50%` + `translate(-50%, ...)`,
       o sea CENTRADOS bajo la ficha. Centrarlos aqui devuelve la intencion
       original del diseño y los mete dentro del papel. */
    justify-content: center;
    max-width: 100%;
  }
}


/* ============================================================
   §M6 · "LOOKING FOR AN ITALIAN SUPPLIER": EL TEXTO A MEDIA COLUMNA
   ------------------------------------------------------------
   Medido: el cuerpo mide 317px y el titulo y el parrafo estan topados
   a `min(394px, 50%)` y `min(450px, 50%)` = **158px**. La mitad. El
   texto cae en una columna estrecha pegada a la izquierda con medio
   ancho vacio al lado — que es exactamente "quedo esquinado a la
   izquierda y se ve feo".

   Ese `50%` no es un error: en escritorio reserva el hueco del
   collage de fotos, que va colocado en `%` sobre el mismo escenario
   (CLAUDE.md: "Copy capped in `ch` cannot share a stage with art
   placed in `%`"). En el telefono no hay collage al lado — las fotos
   caen debajo — asi que el tope no reserva nada, solo estrangula.

   Se libera al 100% y se centra, como pediste. Y los sellos pasan de
   ~50-63px a algo que se pueda mirar.
   ============================================================ */
@media (max-width: 768px) {
  .supplier__body { text-align: center; }
  .supplier__body > *,
  .supplier__body h2,
  .supplier__body p {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  /* el filete del eyebrow y los botones acompañan al centro */
  .supplier__body .eyebrow { justify-content: center; }
  .supplier__body .btn--ticket,
  .supplier__actions { margin-inline: auto; }
  .supplier__actions { justify-content: center; }

  /* Los sellos: de 49-63px a ~104px. Van en flujo y centrados en vez
     de pinchados en % sobre un escenario que en el telefono no existe. */
  .supplier__pin { width: 104px; }
  .supplier__pin img { width: 100%; height: auto; }
}


/* ============================================================
   §M7 · EL PIE: CUATRO COLUMNAS APILADAS EN UNA
   ------------------------------------------------------------
   Medido: `grid-template-columns: 316.667px` — una sola columna, las
   cuatro cajas a x=22 y todo alineado a la izquierda. "Explore",
   "Departments" y "Contact" son listas cortas: en dos columnas caben
   de sobra y el pie deja de ser una tira de 800px de alto.

   La caja "about" (logo + texto + redes) se queda a ancho completo
   porque su parrafo no cabe en media columna.
   ============================================================ */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .footer-grid .footer-about { grid-column: 1 / -1; }
}


/* ============================================================
   §M8 · EL CATALOGO: UN PRODUCTO POR PANTALLA
   ------------------------------------------------------------
   Esta es la pantalla con la que se compra, asi que va medida al
   detalle. Desglose de la tarjeta a 390px, 482px de alto:

     product-card__head    22px   (codigo + marca)
     packshot             296px   <- 61% de la tarjeta. Cuadrado 1:1.
     product-card__body   135px   (nombre + fila de compra)
     padding               18px
                          -----
                          482px   = 57% de la pantalla por producto

   La foto cuadrada es la culpable. Pasa a 4:3 con tope de altura, y
   la tarjeta cae a ~350px: se ven dos productos y medio por pantalla
   en vez de uno. No se pasa a dos columnas: la fila de compra
   (`.buy-row`, medida en 312px) no cabe en 151px y el paso de
   cantidad quedaria impulsable — y esta pantalla tiene que dejar
   comprar con el pulgar.

   Y el nombre de la categoria: `.cat-group__head` es `position:
   static`, y un grupo mide **35.560px** de alto. El titulo aparece una
   vez arriba y no vuelve a verse en toda la categoria — de ahi "no
   salen los nombres de las categorias". Se pega arriba mientras se
   recorre su grupo.
   ============================================================ */
/* RONDA 25c — LA REFERENCIA ERA "BROWSE THE AISLE", Y ES DE DOS COLUMNAS.
   La ronda anterior bajo la tarjeta de 482 a 381px encogiendo la foto, y
   seguia siendo "un producto por pantalla": el problema no era el ALTO, era
   que la rejilla tenia UNA columna. La ficha que Sergio señalo como modelo es
   `.landed__tag`, medida: **154 x 227px, dos columnas** (l=21 y l=185).

   Se descarto dos columnas en la ronda 24 por un dato mal leido: se midio
   `.buy-row` en 312px y se dio por hecho que el paso de cantidad no cabria.
   Medido de verdad, **el que importa es `.qty--card` y son 86px** — la fila
   es ancha porque se estira, no porque lo necesite. En 154px sobra sitio.

   Lo que si hay que cambiar para que quepa:
   · `.buy-row` deja de ser `1fr auto` (rotulo | paso, en la misma linea) y
     pasa a una columna: el rotulo "CASE 12 x 500 G" arriba y el paso debajo.
     A dos columnas el rotulo se quedaria con ~50px y partiria feo.
   · su `margin-inline: -0.5rem` sangra 8px por lado sobre una tarjeta que ya
     solo tiene 154: se reduce.
   · la marca puede ser larguisima ("LA FABBRICA DELLA PASTA"), asi que se le
     pone tope con puntos suspensivos en vez de dejar que empuje al codigo. */
@media (max-width: 768px) {
  /* DOS COLUMNAS, PERO NO A CUALQUIER PRECIO. `repeat(2, 1fr)` a secas
     parte el catalogo en pantallas muy estrechas: MEDIDO a 320px daba
     tarjetas de 120px y el paso de cantidad —que mide 86px y no encoge—
     se salia por la derecha, con 26 elementos fuera de su ficha.

     `auto-fill` + un minimo lo resuelve solo y sin un segundo punto de
     corte que mantener.

     EL MINIMO SON 132px, Y EL NUMERO ESTA MEDIDO, no elegido a ojo.
     Con 140 el barrido de 14 anchos reales de telefono destapo que
     **360px caia a UNA columna — y por dos pixeles**: a 360 el ancho util
     es 288 y dos columnas de 140 con 10 de hueco piden 290. 360 no es un
     ancho raro, es de los mas comunes en Android. Con 132: 2x132+10 = 274
     <= 288, entran dos.

     El suelo de verdad lo pone el mando de comprar: `.qty--card` mide 86px
     y no encoge, mas 14 de padding = 100px minimos por tarjeta. 132 deja
     margen sobre eso y, a la vez, sigue dejando 320px en una columna
     (2x132+10 = 274 > 249 utiles), que es lo correcto: a 120px por ficha
     el paso de cantidad se sale.

     Verificado en 14 anchos: 320 y menos -> 1 columna; 360..480 -> 2;
     540+ -> 3 y 4. En los 14, cero contenido fuera de su tarjeta. */
  .product-grid,
  .product-grid.cat-group__grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    column-gap: 10px;
    row-gap: 16px;
  }

  .product-grid .packshot {
    aspect-ratio: 4 / 3;
    max-height: 120px;                 /* la referencia mide 110 */
  }
  .product-grid .packshot__img { object-fit: contain; }

  .product-card { padding: 6px 7px 8px; }
  .product-card__body { gap: .3rem; }

  /* la cabecera: codigo fijo, marca recortada — nunca al reves, el codigo
     es con lo que se cotiza (§81) */
  .product-card__head { font-size: .5rem; gap: .3rem; letter-spacing: .1em; }
  .product-card__head .pc-code { flex: none; }
  .product-card__head .pc-brand {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .product-card__body h3 { font-size: .84rem; line-height: 1.25; }

  /* el rotulo arriba, el paso de cantidad debajo.

     `margin-inline: 0` y no la sangria negativa de la regla base: medido
     en el barrido, a 360px (tarjetas de 139) la fila se salia **2px por
     la derecha** por ese margen. En una ficha ancha la sangria es un
     detalle de diseño; en una de 139px es un desborde. */
  .buy-row {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: 0;
    padding: .3rem .25rem;
    row-gap: .3rem;
    min-width: 0;
  }
  .buy-row .qty { justify-self: start; }
  .buy-row__meta { font-size: .56rem; min-width: 0; overflow-wrap: anywhere; }
  .buy-note { font-size: .56rem; }

  /* El nombre de la categoria viaja con el dedo.

     EL DESPLAZAMIENTO NO ES LA CABECERA, ES LA CABECERA **MAS LA BARRA
     DEL CATALOGO**. Medido a 390px: cabecera 0..70 (fixed, z60) y
     `.catalog-toolbar` 70..179 (sticky, z40). Con `top: 72px` el rotulo
     se pegaba DETRAS de la barra — `elementsFromPoint` sobre su texto
     devolvia el INPUT del buscador. Un titulo pegajoso invisible es
     peor que no tener ninguno.

     El alto de la barra lo MIDE y publica catalog.js
     (`--cat-toolbar-h`): son 109px a 390, y mas cuando los chips se
     envuelven en pantallas mas estrechas, asi que cablearlo se romperia
     solo. El respaldo de 110px cubre el instante antes de la medida. */
  .product-grid.is-grouped .cat-group__head {
    position: sticky;
    top: calc(var(--header-h) + var(--cat-toolbar-h, 110px));
    z-index: 5;
    /* fondo opaco o las tarjetas se leen por debajo al pasar */
    background: var(--bone, #F3EEE3);
    padding-block: .5rem .4rem;
    margin-inline: -2px;
    padding-inline: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--ink, #16140F) 12%, transparent);
  }
}


/* ============================================================
   §M9 · EL CHECKOUT: LA LISTA PEGADA AL BORDE
   ------------------------------------------------------------
   Medido: `.cko__order .vcard__body` y `.cko__form .vcard__body`
   llevan `padding: 14px 12px` en el bloque de movil. La lista de
   productos queda a **12px** del borde de la ficha — y esa ficha
   lleva un borde DIBUJADO (`.vcard__shape`), asi que el texto casi
   toca la linea de tinta.

   El resto de fichas del sitio usan `clamp(1.1rem, …)` ≈ 17,6px. Los
   12px son la excepcion, no la norma. Se suben a 18px horizontales,
   que es la medida de la casa, y se reparte tambien el aire vertical.
   Aplica igual a la parte de los datos, que comparte la regla.
   ============================================================ */
/* DOS DETALLES QUE COSTARON UNA PASADA EN FALSO, los dos medidos:

   · LA CONDICION. Los 12px no viven en un bloque de "movil" generico:
     estan en `@media (max-width: 430px)`. Entre 431 y 768 manda la regla
     base, `clamp(1.35rem, 1rem + 1.8vw, 2.5rem)` = 21..40px, que ya es
     holgada. Escribir 18px a 768 habria EMPEORADO esa franja. Se copia
     la condicion exacta del bloque que se corrige.

   · LA ESPECIFICIDAD. La regla original es una LISTA cuyo primer
     selector es `#checkout .vcard__body` — un ID, (1,1,0). En una lista
     gana la especificidad del selector MAS ALTO que case, asi que mi
     `.cko__order .vcard__body` (0,2,0) perdia aunque la hoja cargue
     despues. Medido: seguia dando `14px 12px`. Es la leccion de
     `.leaflet-container a` contra `.mpop__go`: se gana por
     ESPECIFICIDAD, no por orden. Se antepone `#checkout` -> (1,2,0),
     que gana limpio y sin `!important`. */
@media (max-width: 430px) {
  #checkout .cko__order .vcard__body,
  #checkout .cko__form .vcard__body { padding: 16px 18px; }
}

@media (max-width: 768px) {
  /* las lineas respiran entre si, no solo contra el borde */
  .cko__line { padding-block: 13px; }
}


/* ============================================================
   §M10 · IMPORTACION Y VISITA: LOS PASOS ANTES QUE EL FORMULARIO
   ------------------------------------------------------------
   Medido en import-inquiry.html a 390px: `.pinsteps.desk__steps`
   empieza en t=86 y mide **1371px**. O sea, hay que bajar mil
   trescientos pixeles de explicacion antes de llegar a la tarjeta con
   la que de verdad se pide la importacion.

   `.desk__inner` es un GRID que en movil ya pasa a una sola columna,
   asi que los hijos se apilan en orden del DOM
   (pasos -> formulario -> rail). Con `order` se cambia el orden
   VISUAL sin tocar el HTML, sin mover nada en escritorio (donde la
   rejilla es de tres columnas y `order` no se declara) y sin alterar
   el orden de lectura del codigo.

   El formulario primero, los pasos despues: es lo que pediste, y de
   paso el que ya sabe lo que quiere no baja 1371px para pedirlo.
   ============================================================ */
@media (max-width: 768px) {
  .desk__inner > .desk__form  { order: 1; }
  .desk__inner > .desk__rail  { order: 2; }
  .desk__inner > .desk__steps { order: 3; }

  /* Las fotos que siguen al formulario: `desk__snap--a` medía 295x368.
     Se reparten en dos columnas y quedan proporcionadas.

     SE USA GRID Y NO FLEX, y no es preferencia: con
     `display:flex; flex-wrap:wrap` MEDIDO en appointment.html los dos
     sellos salian los dos en l=354 — 113px FUERA de la pantalla,
     colocados en la misma linea detras de un `.desk__details` que es
     `flex: 1 1 100%` y ocupa los 770px de alto del rail, en vez de
     envolver. Grid coloca por celda declarada y no depende de como se
     resuelva el envoltorio: la ficha ocupa las dos columnas y cada
     sello la suya. Es ademas lo que ya hace `.desk__inner`. */
  .desk__rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
  }
  .desk__rail > .desk__details { grid-column: 1 / -1; }
  .desk__snap { width: 100%; margin: 0; }
  .desk__snap img { width: 100%; height: auto; }

  /* Las tarjetas de paso, mas compactas: son cuatro y ninguna lleva
     mas de dos renglones de texto. */
  .pinstep__inner { padding: .9rem 1rem; }
  .pinstep__inner img { max-height: 150px; object-fit: cover; }
}


/* ============================================================
   §M11 · EL MENSAJE INICIAL ALARGA LAS FICHAS
   ------------------------------------------------------------
   contact.html abre con DOS parrafos de presentacion
   (`.chero__lede` y `.chero__lede--2`) antes del primer campo. En
   escritorio caben al lado del collage; en el telefono son seis
   renglones que empujan el formulario fuera de la primera pantalla.

   Se esconde el SEGUNDO, que es el que repite la idea del primero
   ("whether you're a distributor, retailer…"). No se borra del HTML:
   sigue ahi para escritorio y para los buscadores.
   ============================================================ */
@media (max-width: 768px) {
  .chero__lede--2 { display: none; }
  .chero__lede { font-size: .95rem; line-height: 1.5; }

  /* Y NO SOLO EN CONTACTO. Custom Import y Visita tienen su propio
     mensaje de entrada (`.desk__lede`), y el de la visita son dos
     frases largas — el mismo sintoma que describiste ("el mensaje
     inicial ocupa mucho espacio y alarga las tarjetas").

     Aqui NO se esconde nada: a diferencia de contacto, que repetia la
     idea en un segundo parrafo, estos son el UNICO texto que explica
     de que va el formulario. Se compacta: cuerpo mas pequeño e
     interlineado mas corto bajan el bloque sin quitar una palabra. */
  .desk__lede { font-size: .93rem; line-height: 1.45; margin-top: .6rem; }
}


/* ============================================================
   §M12 · LA LINEA DE ACCION AL PIE DE LAS FICHAS
   ------------------------------------------------------------
   "Or skip the form" y su renglon `.way__go` ("Open the catalog") se
   leian como texto corrido: un enlace que no parece un enlace no se
   pulsa. Se le da area de pulsacion (44px, WCAG 2.5.8), se separa del
   cuerpo con un filete y la flecha se ancla al final de la linea.
   ============================================================ */
@media (max-width: 768px) {
  .way__go {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem;
    min-height: 44px;
    margin-top: .6rem; padding-top: .6rem;
    border-top: 1px solid color-mix(in srgb, var(--ink, #16140F) 14%, transparent);
    font-weight: 560;
  }
  .way__go [data-icon] { flex: none; }

  /* "Y ASI ESTAN TODOS LOS CALL TO ACTION DE LAS TARJETAS" — dicho
     literal, asi que no basta con `.way__go` de contacto. La otra
     familia es `.landed__go`, y son NUEVE en la pagina de la visita.
     Mismo tratamiento: la flecha al final de la linea y 44px de area
     tactil (WCAG 2.5.8), que a .62rem de cuerpo no llegaban ni de
     lejos. `align-self: end` de la regla base se anula o el renglon no
     puede ocupar el ancho de su ficha. */
  .landed__go {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem;
    min-height: 44px;
    align-self: stretch;
    font-size: .68rem;
  }
  .landed__go [data-icon], .landed__go svg { flex: none; }
}


/* ============================================================
   §M13 · ENDURECIDO DE ETIQUETAS CON TRACKING
   ------------------------------------------------------------
   Reportaste que "Your order" se sale de su ficha en el telefono. NO
   SE PUDO REPRODUCIR aqui: medido a 390px y a 320px, el rotulo queda
   17px DENTRO del borde y `.desk__details .vcard__body` si tiene su
   padding (la regla existe en pages.css:1851). Queda escrito tal cual
   para que la proxima ronda no lo de por arreglado sin mirar.

   Lo que si es cierto y depende del motor: `letter-spacing: .2em`
   añade espacio TAMBIEN DESPUES de la ultima letra, y Safari mide las
   fuentes distinto que Chromium. Asi que se endurece la clase entera
   de problema en vez de perseguir un pixel: se recupera el espacio
   sobrante del final y se permite que el texto parta antes que
   desbordar. Si el sintoma era ese, esto lo cierra; si no, no rompe
   nada.
   ============================================================ */
@media (max-width: 768px) {
  .ihero__details-eyebrow,
  .desk__details .ihero__details-eyebrow {
    margin-right: -.2em;               /* devuelve el tracking de la ultima letra */
  }
  .desk__details .vcard__body > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}