/* =====================================================================
   CARTA.CSS — la carta de una unidad (sirve para las 16)
   =====================================================================
   Diseñada MÓVIL PRIMERO: una carta se lee de pie, con una mano y con
   hambre. Reglas del sistema aplicadas desde el primer render:
     · ⛔ nunca negro — el oscuro es var(--azul) #043768
     · móvil: 24px de aire (lo pone UN solo contenedor), copy 15/1.55
     · todo lo tocable 44px · nada por debajo de 12px
     · el bloque móvil va AL FINAL para ganar por cascada
   ===================================================================== */

/* ═════════════════ CABECERA ═════════════════
   Corta a propósito: en una carta lo que importa es llegar a la comida.
   La foto de la unidad va de fondo muy apagada, sólo para dar contexto. */
.cta-hero{position:relative;background:var(--azul);color:#fff;overflow:hidden;
  padding:clamp(96px,14vh,150px) 0 clamp(30px,5vh,52px);text-align:center}
.cta-hero::before{content:'';position:absolute;inset:0;
  background-image:var(--cta-foto);background-size:cover;background-position:center;
  opacity:.20;filter:saturate(.85)}
.cta-hero::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 0%,rgba(4,55,104,.55) 0%,var(--azul) 72%)}
.cta-hero-in{position:relative;z-index:2}
.cta-eyebrow{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:4px;font-size:13px;color:var(--amarillo);margin:0 0 10px}
.cta-titulo{font-family:"Boris Black","Oswald",sans-serif;font-weight:400;
  text-transform:uppercase;color:#fff;margin:0;line-height:1;
  font-size:clamp(44px,8vw,104px);letter-spacing:1px}
.cta-unidad{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:2.4px;font-size:clamp(15px,1.8vw,20px);color:#fff;margin:12px 0 0}
.cta-resumen{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;
  font-size:13.5px;color:rgba(255,255,255,.72);margin:8px 0 0}

/* ═════════════════ BARRA DE SECCIONES · FLOTANTE AL PIE ═════════════════
   Carlos (2026-07-28): "esto que vaya en el footer y que lleve iconos cool".
   Antes iba pegada bajo el header. Ahora flota abajo como una nav de app
   (organismo §3.3 del sistema): más cerca del pulgar y sin robarle sitio
   al contenido.

   ⚠️⚠️ El carril NO puede robar el scroll de la página: en escritorio va
   con overflow cerrado en LOS DOS EJES (si sólo se cierra la X, el
   navegador computa overflow-y:auto y se come la rueda — medido el
   2026-07-28 en el carrusel de eventos) y se recorre con las flechas.  */
.cta-nav{position:fixed;left:50%;transform:translateX(-50%);z-index:950;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  width:min(1180px,calc(100% - 28px));
  background:rgba(4,55,104,.94);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.12);border-radius:100px;
  box-shadow:0 16px 44px rgba(2,15,32,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.cta-nav-in{position:relative;display:flex;align-items:center;padding:0 6px}

.cta-chips{display:flex;gap:6px;flex:1;min-width:0;
  overflow:hidden;scroll-behavior:smooth;padding:8px 2px}

.cta-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 15px;border-radius:999px;text-decoration:none;
  white-space:nowrap;color:rgba(255,255,255,.86);
  font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:1px;font-size:12.5px;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.14);
  transition:background .18s,color .18s,border-color .18s}
.cta-chip:hover{background:rgba(255,255,255,.18);color:#fff}
.cta-chip.activo{background:var(--amarillo);color:var(--azul);border-color:var(--amarillo)}
.cta-chip:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}
/* el icono hereda el color del chip: cambia solo al activarse */
.cta-ico{width:19px;height:19px;flex:0 0 auto;pointer-events:none}

.cta-nav-fl{flex:0 0 auto;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;
  display:grid;place-items:center;transition:background .18s,opacity .2s}
.cta-nav-fl svg{width:17px;height:17px;pointer-events:none}
.cta-nav-fl:hover{background:var(--rojo);border-color:var(--rojo)}
.cta-nav-fl[disabled]{opacity:0;pointer-events:none;width:0;margin:0;border:0}
.cta-nav-fl:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}

/* ═════════════════ LA CARTA ═════════════════ */
/* fondo claro con la textura de marca al 6%, como en la carta publicada */
.cta-cuerpo{background:var(--crema);padding:clamp(30px,5vh,56px) 0 clamp(40px,6vh,70px);
  position:relative}
.cta-cuerpo::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:url("../img/welcome-pattern.png") center 0/700px auto repeat;
  opacity:.05;mix-blend-mode:multiply}
.cta-cuerpo>*{position:relative;z-index:1}
.cta-sec{scroll-margin-top:96px}          /* el ancla no queda bajo la barra */
.cta-sec + .cta-sec{margin-top:clamp(34px,5vh,58px)}

/* el título de sección, con su línea que cruza */
.cta-sec-titulo{display:flex;align-items:center;gap:16px;margin:0 0 clamp(18px,2.6vh,28px);
  font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--rojo);font-size:clamp(24px,3.4vw,38px);line-height:1.1}
.cta-sec-titulo::after{content:'';flex:1;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--rojo),rgba(189,8,41,0))}

/* ═════ TARJETA DE PLATILLO ═════
   Calcada de la carta publicada: tarjeta blanca, NOMBRE EN AMARILLO,
   descripción a la izquierda, foto a la derecha y las opciones en una
   barra roja al pie. Dos por fila en escritorio, una en móvil. */
/* DOS por fila, como la carta publicada. Con tres, la columna de texto se
   quedaba en 148px y el nombre se partía en cuatro líneas. */
.cta-lista{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,470px),1fr));
  gap:clamp(16px,2vw,24px)}

.cta-plato{position:relative;display:grid;
  grid-template-columns:1fr;                    /* sin foto: el texto manda */
  align-items:start;gap:14px;
  background:#fff;border-radius:18px;overflow:hidden;
  padding:clamp(16px,2vw,22px);
  box-shadow:0 10px 30px rgba(3,35,71,.09)}
.cta-plato.con-foto{grid-template-columns:minmax(0,1fr) clamp(120px,17vw,168px)}
.cta-plato-texto{min-width:0}

.cta-plato-nombre{margin:0;font-family:"Oswald",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;color:var(--amarillo);
  font-size:clamp(17px,1.7vw,22px);line-height:1.15;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  /* el amarillo sobre blanco necesita un contorno o no se lee */
  text-shadow:0 1px 0 rgba(3,35,71,.22)}
.cta-plato-desc{margin:9px 0 0;font-family:"Museo Sans Rounded",sans-serif;font-weight:300;
  color:#33414f;font-size:14.5px;line-height:1.5}

.cta-plato-media{align-self:center;width:100%}
/* ⚠️ `height:auto` es imprescindible: sin él manda el height="500" del HTML
   y la foto salía de 500px de alto dentro de una columna de 168 (medido). */
.cta-plato-media img{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;border-radius:14px;background:#efe6db}

/* las opciones: barra roja a lo ancho del pie de la tarjeta */
.cta-plato-op{grid-column:1/-1;margin:4px -22px -22px;
  background:var(--rojo);color:#fff;
  padding:12px clamp(16px,2vw,22px);
  font-family:"Museo Sans Rounded",sans-serif;font-weight:500;
  font-size:13.5px;line-height:1.45}
.cta-plato-op + .cta-plato-op{margin-top:-1px}

.cta-badge{display:inline-block;font-family:"Oswald",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:1.4px;font-size:11px  /* 2026-08-02 · auditoría tipográfica: 10.5 quedaba corto */;
  background:var(--rojo);color:#fff;padding:3px 9px;border-radius:999px;
  text-shadow:none}
.cta-plato.es-destacado{box-shadow:0 10px 30px rgba(189,8,41,.18)}

.cta-vacia{background:var(--crema);padding:80px 0;text-align:center;
  font-family:"Museo Sans Rounded",sans-serif;color:var(--azul)}

/* ═════════════════ CIERRE ═════════════════
   MORADO: encima queda la carta (crema) y debajo el pie (rojo) —
   ningún color se repite en secciones contiguas. */
.cta-pie{background:#0a0620;color:#fff;text-align:center;
  padding:clamp(50px,8vh,86px) 0 clamp(96px,12vh,120px)}   /* aire para la barra flotante */
.cta-pie h2{font-family:"Boris Black","Oswald",sans-serif;font-weight:400;margin:0;
  text-transform:uppercase;color:var(--amarillo);font-size:clamp(30px,5.4vw,64px);line-height:1}
.cta-pie p{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;
  color:rgba(255,255,255,.9);margin:12px auto 24px;max-width:46ch;
  font-size:clamp(15px,1.5vw,18px);line-height:1.55}
.cta-pie-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ═════════════════ VOLVER ARRIBA ═════════════════ */
/* ⚠️ sube por encima de la barra flotante (66px + su margen), o se pisan */
.cta-arriba{position:fixed;right:18px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:951;
  width:48px;height:48px;border-radius:50%;cursor:pointer;border:none;
  background:var(--rojo);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(3,35,71,.4);transition:transform .18s,opacity .25s}
.cta-arriba[hidden]{display:none}
.cta-arriba:hover{transform:translateY(-3px)}
.cta-arriba svg{width:20px;height:20px;pointer-events:none}
.cta-arriba:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

/* ═════════════════ 📱 MÓVIL ═════════════════
   Va al FINAL para ganar por cascada (ley C). */
@media (max-width:900px){
  .cta-hero{padding:clamp(88px,13vh,120px) 0 26px}
  .cta-titulo{font-size:clamp(40px,13vw,60px)}
  .cta-unidad{font-size:14px;letter-spacing:2px}

  /* aquí SÍ se arrastra con el dedo: no hay rueda que robar, y el navegador
     decide por la dirección del gesto (vertical = la página) */
  /* en móvil manda el dedo: no hacen falta flechas */
  .cta-nav{width:calc(100% - 20px);bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .cta-nav-fl{display:none}
  .cta-chips{overflow-x:auto;overflow-y:hidden;touch-action:auto;
    overscroll-behavior-x:contain;scrollbar-width:none;padding:7px 6px;gap:6px}
  .cta-chips::-webkit-scrollbar{display:none}
  /* ⭐ 2026-08-01 · decisión final de Carlos tras probar el patrón de
     círculos del sfmenu: "se ve feo, déjalo en píldora". Píldoras de texto,
     nombre siempre visible, sin icono. */
  .cta-chip{min-height:44px;padding:0 14px;font-size:11px;gap:0;letter-spacing:.4px}
  .cta-chip .cta-ico{display:none}
  .cta-chip span{display:inline;white-space:nowrap}

  .cta-sec{scroll-margin-top:92px}
  /* una tarjeta por fila; la foto se hace más pequeña para dejar leer */
  .cta-lista{grid-template-columns:1fr;gap:12px}
  .cta-plato{padding:15px}
  .cta-plato.con-foto{grid-template-columns:minmax(0,1fr) 104px;gap:12px}
  .cta-plato-nombre{font-size:17px}
  .cta-plato-op{margin:4px -15px -15px;padding:11px 15px;font-size:13px}
  .cta-plato-desc{font-size:var(--m-fs,15px);line-height:var(--m-lh,1.55)}
  .cta-plato-op{font-size:12px}
  .cta-pie .btn{font-size:13px}
  .cta-arriba{width:46px;height:46px;right:14px;
    bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}

@media (prefers-reduced-motion:reduce){
  .cta-chips{scroll-behavior:auto}
  .cta-arriba{transition:none}
}

/* ⚠️ 2026-07-28 · AQUÍ HABÍA un bloque del primer diseño (la foto arriba,
   a lo ancho, con .cta-plato en flex-column). Se quedó tras rehacer la
   tarjeta y GANABA por ir después: el grid de dos columnas no aplicaba y la
   foto salía gigante debajo del texto (página de 17.400px). Eliminado.
   Lección: al rehacer un componente, borrar el CSS del anterior — no basta
   con escribir el nuevo encima. */


/* ═════════════════════════════════════════════════════════════════════
   EL DISEÑO ELEGIDO · EDITORIAL   (Carlos, 2026-07-28)
   =====================================================================
   De las tres propuestas (A editorial · B catálogo · C revista) se eligió
   la EDITORIAL, y va en las 16 cartas: "editorial, todos los menús a ese
   estilo, sólo la foto más alta, del tamaño del alto del cuadro".

   La idea: la carta como una carta. Tipografía protagonista, sin tarjetas,
   ritmo de lectura. Es la que mejor aguanta 61 platillos — medida contra
   las otras dos: 6.570px de alto frente a 10.529 (catálogo) y 8.011
   (revista).

   ⛔ Las propuestas B y C se retiraron al elegir. No se dejan comentadas
      para no arrastrar CSS muerto: están en el historial si hicieran falta.
   ═════════════════════════════════════════════════════════════════════ */
/* ⚠️ `align-items:start`: sin esto, los platillos de una misma fila se
   ESTIRAN al alto del más alto y la foto —que ocupa el bloque— se convertía
   en una tira vertical de 212px en un platillo de dos líneas. Cada uno mide
   lo suyo y su foto también. */
.cta-lista{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:0 clamp(30px,5vw,72px);align-items:start}

/* el platillo: una fila de la carta, no una tarjeta */
.cta-plato{background:none;box-shadow:none;border-radius:0;
  padding:18px 0;border-bottom:1px solid rgba(3,35,71,.10);
  grid-template-columns:1fr;gap:0}

/* ⭐ LA FOTO OCUPA EL ALTO DEL BLOQUE (lo pidió Carlos).
   `grid-row:1/-1` la hace abarcar TODAS las filas del platillo —nombre,
   descripción y la línea de opciones—, y con `height:100%` + `object-fit`
   se estira sin deformarse. Antes era un cuadrado de 72px que dejaba un
   hueco cuando el platillo tenía descripción larga u opciones. */
/* dos hijos y UNA fila: foto | texto. Así el `stretch` basta y no hacen
   falta trucos de grid-row (probados y descartados: `1/-1` no llega al
   final con filas implícitas, y `span 10` inflaba el bloque). */
.cta-plato.con-foto{grid-template-columns:118px minmax(0,1fr);
  gap:16px;align-items:stretch}
/* ⚠️ `height:100%` en la <img> NO basta: dentro de una celda de grid
   estirada el 100% se resuelve contra la altura AUTO y la foto se quedaba
   corta justo en los platillos con opciones (medido: 104px de foto en un
   bloque de 162). Con el contenedor en `position:relative` y la imagen
   absoluta, la foto ocupa SIEMPRE el alto real del bloque. */
/* ⭐ La foto ocupa el ALTO DEL BLOQUE (lo pidió Carlos), con un mínimo para
   que en los platillos de una línea no quede una tira aplastada. */
.cta-plato-media{order:-1;align-self:stretch;position:relative;min-height:132px}
.cta-plato-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:12px;display:block}

.cta-plato-nombre{color:var(--azul);text-shadow:none;
  font-size:clamp(16px,1.4vw,18px);letter-spacing:.5px}
.cta-plato-desc{font-size:14px;color:#5b6b7d;margin-top:5px}
/* las opciones, en su línea y en rojo — sin barra: aquí no hay tarjeta */
.cta-plato-op{margin:8px 0 0;padding:0;background:none;
  color:var(--rojo);font-family:"Oswald",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.6px;font-size:11.5px;line-height:1.45}
/* 2026-08-02 · Carlos: la PROTEÍNA EXTRA va "alineada para abajo" — su
   propio bloque al pie del platillo, separado por un filete punteado */
.cta-plato-add{margin:10px 0 0;padding:8px 0 0;border-top:1px dashed rgba(189,8,41,.35);
  color:var(--rojo);font-family:"Oswald",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.6px;font-size:11.5px;line-height:1.45}
.cta-plato-add + .cta-plato-add{margin-top:4px;padding-top:0;border-top:0}
.cta-badge{background:none;color:var(--rojo);border:1px solid var(--rojo);padding:2px 8px}
.cta-plato.es-destacado{box-shadow:none}

@media (max-width:900px){
  .cta-lista{grid-template-columns:1fr;gap:0}
  .cta-plato{padding:15px 0}
  .cta-plato.con-foto{grid-template-columns:100px minmax(0,1fr);gap:13px}
  .cta-plato-media{min-height:112px}
  .cta-plato-nombre{font-size:16px}
  .cta-plato-op{font-size:11.5px}
}

/* ═════ PLACEHOLDER · platillo sin foto (2026-07-28) ═════
   Carlos: "los platillos que no tengan foto, colócale algo del mismo tamaño
   o un icono grande que identifique el platillo".
   Ocupa EXACTAMENTE el mismo hueco que una foto, así la rejilla no se
   descuadra, y lleva el icono de su sección a tamaño grande sobre el azul
   de marca con la trama de doodles al 8%. */
.cta-plato-media.sin-foto{display:grid;place-items:center;border-radius:12px;
  background:
    url("../img/welcome-pattern.png") center/150px auto repeat,
    linear-gradient(160deg,#0a4d86 0%,var(--azul) 60%,#032b52 100%);
  background-blend-mode:soft-light,normal}
.cta-plato-media.sin-foto .cta-ico{width:46%;height:46%;max-width:56px;max-height:56px;
  color:var(--amarillo);opacity:.9;stroke-width:1.4}
@media (max-width:900px){
  .cta-plato-media.sin-foto .cta-ico{max-width:44px;max-height:44px}
}

/* ═════════════════════════════════════════════════════════════════════
   SECCIÓN ESPECIAL (2026-07-30 · Viktor)
   ═════════════════════════════════════════════════════════════════════
   Una sección de la carta puede vestirse aparte desde el panel
   (/admin/ → Menú web → Secciones): tipografía de marca en el título,
   fondo de color, esquinas redondas o cuadradas, título dentro o fuera
   del contenedor y formato de foto propio en web y en móvil.

   El look llega en el .md como sufijo del título:
       ## SPECIALS {tipo:boris; esquinas:redondo; titulo:dentro; foto:16:9;
                    movil:1:1; fondo:#bd0829}
   y _datos/carta.php lo convierte en estas variables, ya validadas.
   ⛔ Nada del .md llega crudo al CSS: colores y formatos se comprueban.
   ═════════════════════════════════════════════════════════════════════ */
.cta-sec--especial{
  --esp-tipo:"Oswald",sans-serif; --esp-tinta:var(--azul);
  --esp-radio:24px; --esp-foto:16/9; --esp-foto-m:1/1;
}
/* el contenedor: sólo se pinta si el panel eligió fondo */
.cta-sec--especial .cta-esp{border-radius:var(--esp-radio)}
.cta-sec--con-fondo .cta-esp{
  background:var(--esp-fondo);
  padding:clamp(24px,3.4vw,44px);
  box-shadow:0 18px 44px rgba(3,35,71,.14);
}

/* el título toma la tipografía y el color elegidos */
.cta-sec--especial .cta-sec-titulo{
  font-family:var(--esp-tipo);
  color:var(--esp-tinta);
}
/* ⚠️ Boris Black Bloxx es una display muy pesada: en MAYÚSCULAS y con el
   tracking de Oswald se empasta. Se le baja el tracking y se le deja aire. */
.cta-sec--especial .cta-sec-titulo{letter-spacing:.5px}
.cta-sec--especial .cta-sec-titulo::after{
  background:linear-gradient(90deg,var(--esp-tinta),transparent);
  opacity:.55;
}
/* con el título FUERA, la línea de la barra sobra: el bloque ya separa */
.cta-sec--titulo-fuera .cta-sec-titulo::after{opacity:.35}

/* sobre fondo, todo el texto de dentro se aclara con el título */
.cta-sec--con-fondo .cta-plato{border-bottom-color:color-mix(in srgb,var(--esp-tinta) 22%,transparent)}
.cta-sec--con-fondo .cta-plato-nombre{color:var(--esp-tinta)}
.cta-sec--con-fondo .cta-plato-desc{color:color-mix(in srgb,var(--esp-tinta) 78%,transparent)}
.cta-sec--con-fondo .cta-plato-op{color:color-mix(in srgb,var(--esp-tinta) 88%,transparent)}
.cta-sec--con-fondo .cta-badge{color:var(--esp-tinta); border-color:var(--esp-tinta)}

/* ⭐ el formato de la foto: en escritorio el elegido, en móvil el suyo.
   `aspect-ratio` sustituye al alto que estiraba el bloque. */
.cta-sec--especial .cta-plato.con-foto{grid-template-columns:minmax(0,42%) minmax(0,1fr)}
.cta-sec--especial .cta-plato-media{min-height:0; aspect-ratio:var(--esp-foto)}
.cta-sec--especial .cta-plato-media img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:calc(var(--esp-radio) * .5)}
.cta-sec--especial .cta-plato-media.sin-foto{border-radius:calc(var(--esp-radio) * .5)}

@media (max-width:900px){
  .cta-sec--especial .cta-plato.con-foto{grid-template-columns:1fr; gap:12px}
  .cta-sec--especial .cta-plato-media{aspect-ratio:var(--esp-foto-m)}
  .cta-sec--con-fondo .cta-esp{padding:var(--m-aire,24px) 18px}
}

/* ── FORMATO DE LA FOTO EN LA WEB ──────────────────────────────────────
   El formato de la web es suyo y no tiene por qué ser el del QR: aquí
   manda el diseño de la página, no la pantalla de la mesa.

   ⚠️ El `aspect-ratio` hay que ponerlo en el CONTENEDOR, no en el <img>:
   más abajo hay una regla global que deja la imagen en `position:absolute`
   con `height:100%`, y eso pisa cualquier aspect-ratio puesto en el <img>.
   Por eso la foto medía 118×132 y no era cuadrada, aunque el CSS pidiera
   1/1 desde el principio. Es el mismo patrón que ya usa la sección
   especial unas líneas más arriba: min-height:0 y ratio en el contenedor. */
.cta-plato-media{min-height:0; aspect-ratio:1/1}
.cta-plato-media.es-pano{aspect-ratio:16/9}

@media (max-width:900px){
  /* en móvil la foto va de fondo de la fila: manda el alto, no el ratio */
  .cta-plato-media{aspect-ratio:auto; min-height:112px}
  .cta-plato-media.es-pano{aspect-ratio:auto; min-height:112px}
}