/* ── EL RESTO DEL CSS DE LA PORTADA (20 ago) ──────────────────────────────
   Partido del bloque en linea de index.html, que media 87 KB y habia que
   parsear ENTERO antes del primer pintado. Aqui vive todo lo que NO toca el
   primer viewport; lo de arriba del pliegue sigue en linea.
   El corte lo hizo un clasificador que comprueba, regla a regla y en 390x844 y
   1440x900, si algun elemento que la cumple cae dentro del primer viewport --
   mas una lista blanca para lo que ese metodo NO puede ver: el velo (ya
   retirado cuando se mide) y las clases que anade el JS (fuera, se-ve,
   visible, motion-on, nav--puesta...).
   Las at-rules indivisibles (@keyframes, @font-face) se quedan siempre en linea.
   ATENCION: si anades CSS de algo que se vea SIN hacer scroll, va en linea, no aqui. */

.lista-viva[hidden]{display:none}

/* ─────────── FORM ─────────── */
/* el gancho: la frase que pide el correo, justo encima del campo */
.captura{max-width:34rem}

/* REJILLA, no flex-wrap. Con flex los dos campos quedaban a 249px y el botón
   caía a la segunda línea con 207: tres anchos distintos, alineado con nada.
   Así los campos son gemelos y el botón ocupa la fila entera debajo — el bloque
   entero tiene el mismo ancho que la caja que lo contiene y que la foto de al lado. */
.captura__fila{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
/* (9 ago) En móvil los DOS CAMPOS COMPARTEN FILA y el botón va debajo a lo
   ancho. Antes era 1 columna: CP + email + botón apilados = ~70px más de caja,
   y esa altura salía directamente de la foto (el hero nuevo ancla el texto
   abajo: todo lo que crece la caja se lo come a la comida). "Código postal" a
   16px mide ~100px y cabe en el campo estrecho — medido, no supuesto. */
@media(max-width:620px){
  /* La columna del CP es FIJA: con fracciones "Código postal" se cortaba.
     ⚠️ 9.7rem salen de MIRAR EL RENDER, no de medir con canvas: la primera
     cifra (8.6) venía de measureText con la fuente aún sin cargar, que mide el
     fallback y se queda corta con Hanken de verdad. A 320px el email conserva
     ~100px, justos para tu@email.com. */
  .captura__fila{grid-template-columns:9.7rem minmax(0,1fr)}}

.nota[data-estado="error"]{color:#F09077}

.nota[data-estado="ok"]{color:var(--trigo)}

.nota a{color:var(--trigo)}

/* La posición en TU zona: lo único que podemos darle al instante y que le importa.
   Una zona abre por densidad, no por volumen nacional — así que el número que
   cuenta es el de sus vecinos, no el nacional. Cifra real de KV; si no hay, no sale. */

/* El carnet recién emitido (F2). El momento de más atención de toda la web es
   el segundo justo después de darle a "Únete", y hasta ahora lo único que
   pasaba ahí era "revisa tu correo": la recompensa se iba a una bandeja de
   entrada y volvía media hora tarde, si volvía. Ahora se entrega en el acto. */

/* ─────────── PRUEBA (fotos) ─────────── */
/* ─────────── FRANJAS · imagen + texto alternando (1 ago) ───────────
   Una sola pieza reutilizable: el lado se invierte con una clase, no con un
   :nth-child, para que reordenar los bloques en el HTML no descoloque el ritmo.
   `align-items:center` y no `start`: los textos tienen alturas distintas (dos
   párrafos unos, tres otros) y anclados arriba las fotos quedaban en escalera. */
/* ─────────── LUZ AMBIENTE (2 ago) ───────────
   Focos cálidos muy diluidos en las secciones grandes. Es la mitad del arreglo
   de "la web no tiene luz": la otra mitad son los tokens de superficie, que
   viven en feat.css. Esto es lo que se lee como LUZ y no como gris — la luz
   tiene color, y el suyo es el de la marca: trigo y terracota, más un egeo en
   el mapa porque es la sección que habla de mar y de ciudades.
   Van EN el background de cada sección, no en un pseudo-elemento fijo del body:
   las secciones llevan color opaco y lo taparían. */

/* ── (26 ago, Nacho) LAS FRANJAS, PLEGADAS ─────────────────────────────────
   "La gente lo obvia y esquiva; molesta porque está en medio y desplegado."
   La franja pasa de artículo abierto a <details> cerrado: la caja exterior se
   queda con el padding de barra, y el grid de dos columnas se muda ENTERO a
   .franja__cuerpo, que solo existe al abrir. Mismo lenguaje que la FAQ de
   abajo (chevron terracota que rota), que ya era acordeón. */

/* La vuelta: la foto salta a la derecha. En móvil NO se aplica (una columna).
   (4 ago, check 13 del QA) Estaba en `min-width:881` mientras la franja apila
   en `max-width:900`: en la banda 881-900 la columna ya era UNA y el `order:2`
   seguía puesto, así que la foto caía DEBAJO del texto y solo en esas 19px.
   Era el último de los cinco umbrales sueltos que quedaban por unificar. */

/* Proporción FIJA aunque las fuentes no lo sean (900x900, 1100x614, 1000x1000):
   sin esto las tres franjas tenían tres alturas distintas y no leían como sistema.
   El height:auto de feat.css sigue mandando; aquí manda el aspect-ratio del marco. */

/* El enlace de "seguir leyendo": subrayado con aire, no un botón. Es contenido
   SEO que ya existía y desde la portada no se veía (docs/SEO.md). */

/* (4 ago, Nacho: "la versión de tablet no se ve bien") ─────────────────────
   Este corte estaba en 880 px. La web tenía CINCO valores distintos —820, 860,
   880, 900 y 1000— para la MISMA decisión: "dos columnas ya no caben, apila".
   El efecto en tablet era el que se veía: a 834 px (iPad en vertical) unas
   secciones ya habían apilado y otras seguían en dos columnas de 380 px, así
   que media página iba en modo móvil y la otra media en modo escritorio.
   Todos los cortes de apilado pasan a 900, que es el que ya usaban la nav y el
   hero. Un solo umbral: o cabe en dos columnas, o no cabe. */
@media(max-width:900px){
  /* Móvil: foto arriba SIEMPRE y texto debajo, en los tres bloques. Alternar
     lados en una sola columna no se percibe y solo descoloca la lectura. */
  

  /* En movil la cabeza apila: rotulo arriba, titular debajo, chevron a la
     derecha del titular. El baseline con gap no cabe en 390. */
  
  }

/* (6 ago) Ritmo por escala, no por clamp inventado: la carta y el mapa ABREN
   capítulo (--aire-largo); el resumen, los pasos y el destacado continúan el
   argumento anterior (--aire). El ritmo se elige; antes se heredaba. */

/* La nota de las fotos (I3): letra pequeña de verdad, no un aviso legal. Va
   discreta a propósito — es honestidad, no una excusa que haya que subrayar. */
/* La comparación a domicilio / recogida (F9): destacada sin ser un aviso. */

/* ── FEAT EN 30 SEGUNDOS (N2) ──────────────────────────────────────────────
   Fondo carbon-2 porque alterna con la cinta de arriba y las franjas de abajo
   (la regla de las secciones alternas). Una línea por tarjeta: si alguna
   necesita dos frases es que la idea no estaba clara. */

/* (6 ago, pulido) Los titulares de sección iban a 3,2rem aquí y a 2,15rem en
   el destacado: el mismo escalón de la jerarquía pintado con dos tamaños. Uno
   solo, y la escala se lee. */

/* (6 ago, Nacho) DOS FILAS DE TRES, no un auto-fit que dejaba 4+2. Un 4+2 se
   lee como "cuatro cosas y dos sobras"; tres y tres se lee como dos ternas:
   lo que ES el bowl arriba, lo que GANAS abajo. Y con `auto-fit` el reparto
   cambiaba según el ancho, así que la lectura no era la misma dos veces. */

/* (3 ago, Nacho) "más visual y un poco más grande". Eran seis líneas de texto
   con un punto delante: la misma densidad que un párrafo, solo que troceado.
   Ahora cada tarjeta tiene TITULAR —la idea en dos o tres palabras, en Cinzel y
   grande— y debajo la frase que la sostiene. Se escanean los seis titulares en
   un barrido y solo se lee el detalle de lo que te interesa, que es justo lo que
   tiene que pasar en una sección que se llama "en 30 segundos".
   Sin iconos: harían falta seis pictogramas nuevos y el número/palabra ya es la
   pieza visual. La cifra manda donde hay cifra (50g, 12€, 10, 5%, 15%). */
/* (6 ago) Nacho probó la web con alguien que conoce el negocio y no supo
   repetir NI UN detalle del Club. La causa se ve en la captura: las seis
   casillas pesan exactamente lo mismo, así que el ojo no tiene por dónde
   entrar y seis cosas iguales se recuerdan como ninguna. Ahora cada una abre
   con su CIFRA en grande —que es lo que se retiene— y la frase queda debajo. */

/* El filete superior en trigo: marca las seis piezas como una serie. */

/* HIJO DIRECTO del <li>: sin el `>`, los <b> que hay DENTRO de la frase
   ("décimo gratis", "5%", "15%") heredaban el titular y salían en Cinzel, a
   cuerpo grande y en su propia línea, partiendo la frase en tres. */

/* La cifra: lo primero que ve el ojo y lo único que se recuerda a los diez
   segundos. Va ENCIMA del titular, en trigo y a cuerpo de titular grande. */
/* La cifra manda DENTRO de su casilla —tres veces el cuerpo de al lado— pero
   ya no compite con el titular de la página: iba a 54px, exactamente lo que
   mide el h1 del hero, y una prueba de apoyo no puede pesar como el titular. */

/* (21 ago) El "desde" del precio. Va DENTRO de la cifra y encima del número —
   no como parte del rótulo— porque "12€" a secas se leía como EL precio, y el
   salmón cuesta 13,50 y el XL 16. Es la regla general que pidió Nacho: el 12 es
   un suelo, y donde se diga tiene que verse que lo es. Pequeño y en piedra: no
   compite con la cifra, solo la califica. */

/* ── (10 ago, Nacho) La fila del Club, en CLARO ─────────────────────────────
   "Las últimas tres cajas, como son del Club, deben tener el tema claro."
   Crema de la isla del destacado, colores literales (tokens no remapeados en
   página oscura), y la cifra en terracota-d — trigo sobre crema NO llega a AA
   (la regla que ya mordió tres veces; hoy histórica: la isla es carbón desde
    el 3 sep). Medido entonces: #A34620 sobre #FFFDF7 = 5,9 ·
   carbón = 14,9 · humo-claro = 9,4. Todo AA de sobra. */

/* La declaración autorizada: presente y legible, sin competir con las cifras. */

/* ── ASÍ FUNCIONA (N3) ─────────────────────────────────────────────────────
   (3 ago, Nacho) "una línea que una todo, que se entienda que es un proceso".
   Eran cuatro columnas con un número encima y un filete cada una: cuatro cosas
   sueltas, no una secuencia. Ahora los cuatro números van sobre UNA línea que
   los atraviesa, con el punto de cada paso encima — el lenguaje de un recorrido,
   que es lo que es.

   La línea se dibuja con un ::before del <ol> y no con un SVG ni un borde por
   item: así no hay que recortarla en el primer y el último paso (el clásico
   medio filete que sobresale), se adapta sola si algún día son 3 o 5, y en móvil
   basta con girarla a vertical. */

/* El fondo de brasa: bajo el texto y muy velado. El velo NO es decorativo — sin
   él, el blanco de las llamas deja los pasos en 2 de contraste. */

/* el hilo, de centro de bolita a centro de bolita */

/* la bolita del paso, centrada sobre el hilo */

/* En móvil el recorrido se pone de pie: el hilo baja por la izquierda y los
   pasos se leen en columna, que es como se lee un proceso en una pantalla
   estrecha. Cuatro columnas de 90px no son una secuencia, son un mosaico. */

/* .zona-eti la define feat.css (rótulo único de toda la web) */

.cierre .captura{margin-inline:auto}

/* El banquete panorámico del cierre: ENTERO (nada de recortes — Nacho, 29 jul),
   capado de ancho y con las esquinas del sistema. */
/* (30 jul) A SANGRE, como superfuud. En su web las imágenes de sección van de
   borde a borde y sin redondear (medidas: 375px de ancho, radio 0); solo las
   fichas de contenido llevan caja. Aquí el panorama del banquete era una
   tarjeta de 335px con esquinas de 18px dentro de una pantalla de 375: la
   imagen no separaba nada, se sumaba al montón de cajas. A sangre sí corta la
   página en dos, que es para lo que está. En escritorio conserva su ancho
   máximo: ahí a sangre serían 1.280px de foto decorativa. */

@media(max-width:900px){
  

  /* Con el padre delante: la regla base de .cierre__pano img vive MÁS ABAJO en
     esta hoja y a igual especificidad ganaba ella (el radio seguía en 18px).
     Comprobado con getComputedStyle, no con "está en el fichero". */
  }

/* ── La tira del Fundador (30 jul, Nacho): visual, mínimas palabras ── */
.fundador-strip{display:flex;align-items:center;justify-content:center;gap:clamp(1.2rem,4vw,2.4rem);
  flex-wrap:wrap;margin:0 auto clamp(1.4rem,3vh,2rem);max-width:44rem;
  padding:clamp(1rem,2.5vw,1.4rem) clamp(1.2rem,3vw,2rem);
  border-block:1px solid rgba(247,241,228,.16)}

.fundador-strip__num{text-align:center}

.fundador-strip__num span{display:block;font-family:'Cinzel',serif;font-size:.62rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--trigo)}

.fundador-strip__num b{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.7rem,5vw,2.3rem);
  line-height:1.1;color:var(--crema)}

.fundador-strip__num i{font-style:normal;font-variant-numeric:tabular-nums}

/* (21 ago) Aquí vivía `.fundador-strip__hechos`, la lista de tres cifras que
   Nacho retiró. Su sustituta es una sola frase: el trigo se reserva para los dos
   datos que importan y el resto va en humo, así que la cifra vuelve a destacar
   por contraste en vez de por tamaño. */
.fundador-strip__prosa{margin:0;max-width:34ch;text-align:left;
  font-size:.95rem;line-height:1.55;color:var(--humo);text-wrap:pretty}
.fundador-strip__prosa b{font-family:'Cinzel',serif;font-weight:700;color:var(--trigo)}

/* (1 ago) .club-deseo murió con la escena del Club: la línea sigue viva dentro
   del destacado, como .destacado__deseo. */
/* ─────────── EL MAPA · expansión desde Valencia ─────────── */
/* (1 ago) Pasa a --carbon para que ALTERNE con la carta (carbon-2) que ahora
   tiene encima y con los artículos (carbon-2) que tiene debajo. Es el recurso
   con el que superfuud separa bloques —blanco, gris, blanco— traducido a
   nuestros dos marrones. Con las tres seguidas en carbon-2 la página se leía
   como una única mancha larga y no se veía dónde acababa una y empezaba otra. */
.mapa{padding:var(--aire-largo) 0;border-block:1px solid var(--linea);background:
  radial-gradient(950px 540px at 10% -10%,rgba(47,93,124,.12),transparent 66%),var(--carbon)}

.mapa h2 em{font-style:normal;color:var(--terracota)}

.mapa__intro{color:var(--humo);max-width:44ch;text-wrap:pretty;margin-bottom:clamp(1.5rem,3.5vh,2.2rem)}

.mapa__fases{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;counter-reset:fase}

.mapa__fases li{display:flex;align-items:baseline;gap:.75rem;padding-top:.85rem;border-top:1px solid var(--linea);counter-increment:fase}

.mapa__fases li::before{content:counter(fase);font-family:'Cinzel',serif;font-weight:700;font-size:.82rem;color:var(--trigo);min-width:1.1rem}

.mapa__fases b{font-weight:600;color:var(--crema)}

.mapa__fases span{margin-left:auto;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--humo)}

/* La zona con más peticiones: se marca, no se anuncia. Va en trigo porque es
   un HECHO del ranking, no una promesa de apertura. */
.mapa__fases li[data-lider] b{color:var(--trigo)}

.mapa__fases span[data-n]{letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}

/* (5 ago, Nacho) "falta margen entre la quinta ciudad y el borde de la
   diapositiva siguiente": la lista terminaba pegada al corte de sección porque
   su último <li> no tenía nada debajo — el pie está oculto hasta que hay
   datos, así que el hueco desaparecía justo cuando la lista se llenaba. */
.mapa__fases{padding-bottom:clamp(1.2rem,3vh,2rem)}

/* (1 ago) Las reglas de .ciudad-form murieron con el tercer formulario. */
/* ── Tarjetas de zona (1 ago) ──────────────────────────────────────────────
   COLUMNAS FIJAS, no auto-fit. Con `auto-fit minmax(17rem,1fr)` a 1440px
   entraban CUATRO y las seis tarjetas quedaban en 4+2, con un hueco vacío del
   ancho de dos tarjetas que se leía como un fallo de maquetación.
   Son seis: 3×2 en escritorio, 2×3 en tablet y una columna en móvil. */
.mapa__lienzo{margin:0}

.mapa__lienzo svg{width:100%;height:auto;display:block;overflow:visible}

.mapa__silueta{fill:rgba(247,241,228,.055);stroke:rgba(247,241,228,.34);stroke-width:2;stroke-linejoin:round}

.mapa__ruta{fill:none;stroke:var(--trigo);stroke-width:1.4;stroke-linecap:round;opacity:.75;
  stroke-dasharray:var(--largo,320);stroke-dashoffset:var(--largo,320)}

.mapa__ruta--tenue{stroke:var(--piedra);opacity:.5;stroke-dasharray:3 5}

/* 15px sobre un lienzo de 560 → se sigue leyendo cuando el SVG baja a ancho de móvil */
.mapa__ciudad text{font-family:'Cinzel',serif;font-size:15px;font-weight:700;letter-spacing:.14em;
  text-anchor:middle;fill:var(--humo);paint-order:stroke;stroke:rgba(24,20,16,.55);stroke-width:3px}

.mapa__ciudad .mapa__punto{fill:var(--piedra)}

.mapa__ciudad--luego .mapa__punto{fill:var(--trigo)}

.mapa__ciudad--luego text{fill:var(--crema)}

.mapa__ciudad--ahora .mapa__punto{fill:var(--terracota)}

.mapa__ciudad--ahora text{fill:var(--terracota-cl);font-size:17px}

.mapa__halo{fill:var(--terracota);opacity:.18}

.mapa__luz{fill:var(--terracota);opacity:0;transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){
  .mapa__ruta{stroke-dashoffset:0}}

/* ─────────── (3 sep) AQUÍ VIVÍA EL DESTACADO DEL CLUB ───────────
   ~290 líneas de la «isla de crema» (destacado, jardín, .mec, órbitas y el
   collage ev-*) MUERTAS desde el 26 ago: las cápsulas sustituyeron a la
   sección y el markup salió de index.html, pero su CSS se quedó. La purga del
   2 sep no lo cazó porque la palabra «destacado» seguía viva en comentarios.
   Si vuelve, está en git. */

/* empresas · teaser hacia /empresas (puerta al mundo restaurante) */
/* ─────────── ARTÍCULOS (1 ago) ───────────
   Tres tarjetas-enlace. Fondo carbón-2 para separarla de la sección del barrio,
   que va en carbón: el mismo recurso de alternar plano que usa superfuud entre
   bloques, con nuestros dos marrones en vez de su blanco y su gris. */

/* Tres líneas: el título y a dónde va. El filete de arriba las agrupa como
   serie sin necesidad de tarjetas, fotos ni resúmenes. */

/* La miniatura: 56px y redonda. Pequeña a propósito — es una pista visual, no
   la protagonista; con foto grande esto volvía a parecer un catálogo de blogs. */

/* (2 ago) Era la QUINTA variante suelta del rótulo: Cinzel a .7rem (11px) en
   terracota clara. Con las superficies elevadas más claras caía a 3,76 de
   contraste, por debajo de AA — y ya antes era el mismo problema que CLAUDE.md
   describe para los otros cuatro alias ("casi todas a .7rem, que no se leían").
   Se alinea con el rótulo canónico: mismo cuerpo y mismo trigo (4,69 sobre la
   superficie elevada). Sin el filete degradado, que aquí iría dentro de una
   franja horizontal estrecha y no tiene sitio. */

/* ─────────── PREGUNTAS (1 ago) ───────────
   Acordeón nativo con <details>: cero JS, accesible de fábrica (teclado y lector de
   pantalla incluidos) y abierto o cerrado el texto siempre está en el DOM, que es lo
   que importa para que lo lea un buscador. El marcador ▸ es un pseudo-elemento
   propio porque el triángulo del sistema no se puede estilar y desentona. */
.faq{padding:clamp(3.5rem,9vh,6rem) 0;border-block:1px solid var(--linea);background:
  radial-gradient(900px 480px at 50% -16%,rgba(201,151,59,.07),transparent 70%),var(--carbon)}

.faq h2{font-size:var(--t-seccion);text-align:center;margin-bottom:clamp(2rem,5vh,3rem)}

.faq h2 em{font-style:normal;color:var(--trigo)}

/* (3 ago, Nacho) "la sección de sin letra pequeña me parece que ocupa demasiado
   espacio". Ocho preguntas abiertas de par en par son una pantalla y media, y
   ninguna se lee: se hojean. Se aprieta el bloque y se acorta el aire entre
   preguntas — sin quitar ninguna, que son oro para el FAQPage y para Google. */
.faq{padding-block:clamp(3rem,6vh,4.5rem)}

.faq h2{margin-bottom:clamp(1.4rem,3vh,2rem)}

.faq__it summary{padding-block:.85rem}

.faq__it .faq__r{padding-bottom:.9rem}

.faq__r p+p{margin-top:.5rem}

.faq__lista{max-width:46rem;margin-inline:auto;border-top:1px solid var(--linea)}

.faq__it{border-bottom:1px solid var(--linea)}

.faq__it summary{
  display:flex;align-items:flex-start;gap:.9rem;cursor:pointer;list-style:none;
  padding:1.15rem .2rem;font-family:'Marcellus',serif;font-size:clamp(1.02rem,2.4vw,1.18rem);
  color:var(--crema);transition:color .3s var(--exp);
}

.faq__it summary::-webkit-details-marker{display:none}

.faq__it summary::before{
  content:"";flex:none;width:.62rem;height:.62rem;margin-top:.5em;
  border-right:2px solid var(--terracota-cl);border-bottom:2px solid var(--terracota-cl);
  rotate:-45deg;transition:rotate .35s var(--exp);
}

.faq__it[open] summary::before{rotate:45deg}

.faq__it summary:hover{color:var(--trigo)}

.faq__r{padding:0 0 1.3rem 1.5rem}

.faq__r p{color:var(--humo);line-height:1.6;max-width:58ch;text-wrap:pretty}

.faq__r p + p{margin-top:.7rem}

.faq__r b{color:var(--crema);font-weight:600}

.faq__r a{color:var(--terracota-cl);text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.faq__it summary::before{transition:none}}

/* ─────────── LA RULETA DE PLATOS (30 jul, Nacho) ───────────
   Reaprovecha la tarjeta .plato de feat.css (foto + figcaption en degradado);
   lo único nuevo es el raíl y el mando. Scroll-snap NATIVO: sin librería y sin
   auto-avance — la cinta de arriba ya se mueve sola y dos motores juntos
   marean. Aquí manda el dedo. */

/* Cuadradas: las fotos SON cuadradas, y a 5/7 se caían del encuadre la salsa
   aparte y la servilleta con el casco — lo que prueba que el pack es nuestro. */

/* ── CARDS MÁS GRANDES (1 ago) ────────────────────────────────────────────
   La ruleta se SALE del wrap de 1180px: con 40px de hueco entre cards, cada
   bowl pasaba de 380px a 455px de lado (+20%). La comida es el argumento de
   esta sección, así que es lo que tiene que crecer — y en superfuud las
   tarjetas de producto van igual, más anchas que la columna de texto.
   El truco es margin-left:50% + translate:-50%: permite un ancho arbitrario
   centrado respecto al padre sin tocar el .wrap, que lo comparten el rótulo,
   el titular y el botón (y esos SÍ deben quedarse en la medida de lectura).
   El cuadrado NO se toca: está decidido arriba y por un motivo medido — a 5/7
   se caían del encuadre la salsa aparte y la servilleta con el casco. */
@media(min-width:901px){
  

  

  .plato figcaption{font-size:1.34rem;padding:5rem 1.5rem 1.4rem}

  .plato figcaption small{font-size:.86rem}}