/* ════════════════════════════════════════════════════════════════════
   MERCAO · la vitrina (fase 1, 2026-09-08)

   Identidad propia, no la de SAIOS: verde hoja de fondo y el naranja de
   la casa solo para lo que importa. SAIOS es una herramienta de trabajo
   para quien ya es cliente; esto es una tienda para quien no conoce la
   marca, y tiene que parecerlo.

   El doble toque NO hace zoom (`touch-action: manipulation`): en una
   tienda uno pulsa dos veces seguidas a menudo. El pellizco para
   agrandar la letra SÍ se conserva — por eso no se usa `user-scalable=no`.
   ════════════════════════════════════════════════════════════════════ */
html { touch-action: manipulation; }

:root {
  --fondo: #123028;
  --pantalla: #FFFDF9;
  --tinta: #16130F;
  --tinta-suave: #6E655A;
  --tinta-tenue: #9A9086;
  --naranja: #F39200;
  --naranja-hondo: #C57400;
  --ambar: #B8860B;
  --ambar-claro: #FBF0D5;
  --linea: #EAE3D7;
  --linea-fuerte: #D8CFC0;
  /* El mismo fondo de foto de SAIOS: un producto recortado contra un gris
     cualquiera se ve roto; contra este se ve enmarcado. */
  --foto-fondo: #F2EFE9;
  /* ── LA ESCALA DE TEXTO ──────────────────────────────────────────
     🚨 Habia 22 tamaños distintos en este archivo, varios a 0,01rem uno
     de otro (.86 / .87 / .88). Nadie los distingue, y cada uno es una
     decision que alguien vuelve a tomar el dia que agrega algo. Cinco
     tokens: si hace falta un sexto, es que sobra otra cosa. */
  --t-xs: .72rem;   /* etiquetas, notas al pie */
  --t-s:  .82rem;   /* texto de tarjeta */
  --t-m:  .92rem;   /* texto corrido */
  --t-l:  1.05rem;  /* precio, titulos de seccion */
  --t-xl: 1.35rem;  /* la marca */
  --r: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pantalla);
  color: var(--tinta);
  font: 400 15px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Deja aire para la barra del pedido, que va fija abajo. */
  padding-bottom: 78px;
}

/* ── Cinta ──────────────────────────────────────────────────────── */
.cinta {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fondo);
  color: #F2EDE4;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cinta-fila { display: flex; align-items: center; gap: 11px; }
.marca { width: 38px; height: 38px; border-radius: 11px; flex: none; background: #fff; }
.cinta-nombre { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.cinta-sub { font-size: var(--t-xs); color: #9CBFAE; margin-top: 3px; }

.buscar input {
  width: 100%;
  border: 0;
  border-radius: 11px;
  padding: 11px 13px;
  font: inherit;
  background: #fff;
  color: var(--tinta);
}
.buscar input:focus-visible { outline: 3px solid var(--naranja); outline-offset: 1px; }
.conIva { font-size: var(--t-xs); color: #9CBFAE; margin-top: -3px; }

/* ── Categorías ─────────────────────────────────────────────────── */
.categorias[hidden] { display: none; }
.categorias {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 11px 14px;
  scrollbar-width: none;
  border-bottom: 1px solid var(--linea);
}
.categorias::-webkit-scrollbar { display: none; }
.categorias button {
  flex: none;
  border: 1.5px solid var(--linea-fuerte);
  background: #fff;
  color: var(--tinta-suave);
  border-radius: 99px;
  padding: 6px 13px;
  font: 600 var(--t-s) inherit;
  white-space: nowrap;
  cursor: pointer;
}
.categorias button.on {
  background: var(--fondo);
  border-color: var(--fondo);
  color: #fff;
}
.categorias button:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* ── Vitrina ────────────────────────────────────────────────────── */
/* Contiene DOS cosas segun donde este el comprador: la portada de
   categorias, o la rejilla de productos. */
.vitrina { padding: 14px; }

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 12px;
}

/* ── La portada ─────────────────────────────────────────────────── */
.titulo { font-size: var(--t-l); margin: 2px 0 12px; }

.cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 11px;
}
/* Cada categoria se enseña con la foto de uno de sus productos: es la
   que ya tenemos y dice mas de lo que hay dentro que un icono. */
.cat {
  position: relative;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  display: block;
}
/* 🪤 CUADRADA, no apaisada. La puse 16:10 y quedaron casi vacias: las
   fotos del catalogo son cuadradas o verticales, asi que con `contain` en
   una caja apaisada el producto se encoge al alto de la caja y sobra
   beige a los lados. Medido: una foto de 700x700 en una caja de 158x99
   se pintaba a 99x99 — 60 px de aire a cada lado. */
.cat img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--foto-fondo);
  display: block;
}
.cat img.sinfoto { padding: 12%; opacity: .5; }
.cat-n {
  display: block;
  padding: 9px 34px 11px 10px;
  font-size: var(--t-s);
  font-weight: 700;
  line-height: 1.25;
  color: var(--tinta);
}
.cat-c {
  position: absolute;
  right: 8px;
  bottom: 9px;
  background: var(--linea);
  color: var(--tinta-suave);
  border-radius: 99px;
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}
.cat:hover { border-color: var(--fondo); }
.cat:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

.verTodo {
  width: 100%;
  margin-top: 12px;
  border: 1.5px solid var(--linea-fuerte);
  background: #fff;
  color: var(--tinta-suave);
  border-radius: 12px;
  padding: 12px;
  font: 600 var(--t-s) inherit;
  cursor: pointer;
}
.verTodo:hover { border-color: var(--fondo); color: var(--tinta); }
.verTodo:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* El «← Inicio» es el primer boton de la tira, no una barra aparte. */
.categorias button.atras {
  border-color: var(--fondo);
  color: var(--fondo);
  font-weight: 700;
}
.cargando, .vacio {
  padding: 44px 14px;
  text-align: center;
  color: var(--tinta-tenue);
}
.vacio b { display: block; color: var(--tinta); font-size: var(--t-l); margin-bottom: 5px; }

.prod {
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.prod:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
/* 🚨 `contain`, NUNCA `cover` — lo cazó él el 9-sep: «es el mismo tamaño
   de imagen publicado para todos, aun si la original tiene otra dimensión».
   Tenía razón y era un defecto mío.

   El marco es cuadrado para que la rejilla no baile, pero la foto entra
   ENTERA dentro de él. Con `cover` la foto se estira hasta llenar el
   cuadrado y lo que sobra se CORTA: medido sobre 40 fotos de producción,
   9 no son cuadradas y las peores pierden casi la mitad — AG010 es
   394×700 y se le iba el 44 %. En una tienda eso es una botella sin tapa
   o una etiqueta partida, que es justo lo que el comprador necesita ver.

   El fondo es el mismo `--foto-fondo` que usa SAIOS: las bandas que
   quedan a los lados se leen como parte del marco, no como un error. */
.prod img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--foto-fondo);
  display: block;
}
.prod img.sinfoto { padding: 22%; opacity: .55; }
.prod .txt { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
/* El nombre es un <button> porque ES el control que abre la ficha: asi el
   teclado y los lectores de pantalla lo entienden sin trucos. Se le quita
   el aspecto de boton, no su naturaleza. */
.prod .nom {
  font-size: var(--t-s);
  font-weight: 600;
  line-height: 1.25;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
.prod .nom:hover { text-decoration: underline; }
.prod .nom:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.prod .precio {
  margin-top: auto;
  font-size: var(--t-l);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.prod .iva { font-size: var(--t-xs); color: var(--tinta-tenue); font-weight: 400; }

/* Pedir por WhatsApp. Verde de WhatsApp a propósito y no el naranja de la
   casa: la gente reconoce ese verde antes de leer el texto.

   🎨 Va de CONTORNO y no relleno, y no es capricho: son 300 tarjetas, y
   300 botones verdes macizos se comen la tienda — el ojo ve una pared de
   verde y deja de ver los productos, que es lo que se vino a mirar. De
   contorno se reconoce igual y el protagonista sigue siendo el producto.
   Al pasar por encima sí se rellena: ahí ya hay UNO solo. */
.wa {
  display: block;
  margin-top: 8px;
  background: #fff;
  border: 1.5px solid #25D366;
  color: #0B7A3B;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-s);
  padding: 7px 6px;
  border-radius: 10px;
}
.wa:hover { background: #25D366; color: #05331A; }
.wa:focus-visible { outline: 3px solid var(--fondo); outline-offset: 2px; }

.pesa {
  display: inline-block;
  align-self: flex-start;
  background: var(--ambar-claro);
  color: var(--ambar);
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}

/* ── La ficha del producto ──────────────────────────────────────── */
/* 🪤 ESTA LÍNEA NO SOBRA. El navegador esconde lo que lleva `hidden` con
   `display: none`, pero cualquier regla de clase le gana por especificidad
   — y `display: flex` de abajo se la comía. Resultado: la ficha vacía
   encima de la tienda SIEMPRE, con todo oscurecido detrás. Se vio en
   producción, no en la prueba: en local solo la miré ABIERTA. */
.ficha[hidden] { display: none; }
.ficha {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(18, 48, 40, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Sube desde abajo, como una hoja: en el teléfono es el gesto que la
   gente ya conoce. En pantalla ancha se centra y no se estira. */
.ficha-caja {
  background: #fff;
  width: 100%;
  max-width: 460px;
  max-height: 92dvh;
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px 22px;
  position: relative;
}
@media (min-width: 620px) {
  .ficha { align-items: center; }
  .ficha-caja { border-radius: 18px; max-height: 88dvh; }
}
.ficha-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--linea);
  color: var(--tinta);
  font-size: var(--t-l);
  cursor: pointer;
}
.ficha-x:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* La galería se desliza; nunca empuja la página a lo ancho. */
.f-fotos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.f-fotos img {
  height: 190px;
  flex: none;
  border-radius: 12px;
  object-fit: contain;
  background: var(--foto-fondo);
}
.f-fotos img:only-child { width: 100%; height: 230px; }
/* El champiñón de relleno es un marcador, no una foto: a este tamaño y a
   todo color se comía la ficha entera y parecía el producto. */
.f-fotos img.sinfoto { padding: 16%; opacity: .45; }

.ficha h2 { font-size: var(--t-l); margin: 12px 0 2px; line-height: 1.25; }
.f-marca { font-size: var(--t-s); color: var(--tinta-tenue); }
.f-precio {
  font-size: var(--t-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin: 10px 0 2px;
}
.f-precio span { font-size: var(--t-xs); font-weight: 400; color: var(--tinta-tenue); }

.f-dato { border-top: 1px solid var(--linea); padding-top: 9px; margin-top: 11px; }
.f-dato b {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 3px;
}
.f-dato p { margin: 0; font-size: var(--t-m); }

/* Los alérgenos NO son un dato más: van marcados. */
.f-alerg { background: var(--ambar-claro); border-radius: 12px; padding: 10px 12px; margin-top: 11px; }
.f-alerg b { color: var(--ambar); }
.f-fuente { font-size: var(--t-xs); color: var(--tinta-tenue); margin-top: 4px; }
.f-pesa {
  background: var(--ambar-claro);
  color: #6B4E06;
  border-radius: 10px;
  padding: 9px 11px;
  margin-top: 10px;
  font-size: var(--t-s);
}

.ficha .wa { margin-top: 16px; padding: 12px; font-size: var(--t-m); background: #25D366; color: #05331A; }
.ficha .wa:hover { background: #1EBE5A; }

/* ── El carrito ─────────────────────────────────────────────────── */
.agregar {
  width: 100%;
  margin-top: 8px;
  border: 1.5px solid var(--fondo);
  background: #fff;
  color: var(--fondo);
  border-radius: 10px;
  padding: 7px 6px;
  font: 700 var(--t-s) inherit;
  cursor: pointer;
}
.agregar:hover { background: var(--fondo); color: #fff; }
.agregar:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* El ± con la cantidad en medio. Los botones son grandes a propósito:
   se pulsan con el pulgar y varias veces seguidas. */
.paso {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  border: 1.5px solid var(--fondo);
  border-radius: 10px;
  overflow: hidden;
}
.paso button {
  border: 0;
  background: var(--fondo);
  color: #fff;
  font-size: var(--t-l);
  line-height: 1;
  padding: 8px 0;
  cursor: pointer;
}
.paso button:hover { background: #0C211B; }
.paso button:focus-visible { outline: 3px solid var(--naranja); outline-offset: -3px; }
.paso span {
  text-align: center;
  font-weight: 700;
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
}

/* La barra del pedido: fija abajo, donde cae el pulgar. */
.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  background: var(--naranja);
  color: #3A2200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 -6px 20px rgba(18, 48, 40, .18);
}
.barra[hidden] { display: none; }
.barra b { font-variant-numeric: tabular-nums; font-size: var(--t-l); }
.barra .ver { margin-left: auto; text-decoration: underline; }
.barra:focus-visible { outline: 3px solid var(--fondo); outline-offset: -4px; }

/* Las líneas del pedido. */
.pl {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--linea);
  padding: 10px 0;
}
.pl-n { font-size: var(--t-s); font-weight: 600; line-height: 1.25; }
.pl-t { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--t-m); white-space: nowrap; }
/* El `1fr` de en medio se encoge al ancho del texto y «1,5 kg» queda
   apretado contra los botones: se le da un mínimo. */
.pl .paso { margin-top: 0; grid-template-columns: 32px minmax(58px, 1fr) 32px; }
.pl.total { border-top: 1.5px solid var(--linea-fuerte); font-size: var(--t-l); }
.pl.total .pl-n, .pl.total .pl-t { font-weight: 800; font-size: var(--t-l); }

.vaciar {
  width: 100%;
  margin-top: 10px;
  border: 0;
  background: none;
  color: var(--tinta-tenue);
  font: inherit;
  font-size: var(--t-s);
  text-decoration: underline;
  cursor: pointer;
  padding: 6px;
}

/* ── La caja ────────────────────────────────────────────────────── */
.ficha-caja h2 { font-size: var(--t-l); margin: 16px 0 4px; }
.ficha-caja h2:first-child { margin-top: 4px; }

.campo { display: block; margin-top: 9px; }
.campo span {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 3px;
}
.campo input {
  width: 100%;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 10px;
  padding: 10px 11px;
  font: inherit;
  font-size: var(--t-m);
  background: #fff;
  color: var(--tinta);
}
.campo input:focus-visible { outline: 3px solid var(--naranja); outline-offset: 1px; }

/* Cómo lo recibe: dos opciones, la escogida con borde firme. */
.medio {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 12px;
  padding: 10px 11px;
  margin-top: 8px;
  cursor: pointer;
}
.medio.on { border-color: var(--fondo); border-width: 2px; background: #FBFAF7; }
.medio em { width: 32px; height: 32px; border-radius: 9px; background: var(--foto-fondo);
  display: grid; place-items: center; font-style: normal; font-size: 16px; flex: none; }
.medio b { display: block; font-size: var(--t-m); }
.medio span { font-size: var(--t-xs); color: var(--tinta-tenue); }

.confirmar {
  width: 100%;
  margin-top: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--naranja);
  color: #3A2200;
  font: 800 var(--t-l) inherit;
  padding: 13px;
  cursor: pointer;
}
.confirmar:hover { background: var(--naranja-hondo); color: #fff; }
/* 🪤 Un `opacity: .6` sobre el naranja seguía leyéndose como un botón
   naranja: se ve pulsable, se pulsa, y no pasa nada. Un botón que no se
   puede pulsar tiene que dejar de parecer el botón principal. */
.confirmar:disabled {
  background: var(--foto-fondo);
  color: var(--tinta-tenue);
  cursor: default;
}
.confirmar:disabled:hover { background: var(--foto-fondo); color: var(--tinta-tenue); }
.confirmar:focus-visible { outline: 3px solid var(--fondo); outline-offset: 2px; }

/* El error del servidor se lee, no se esconde: dice qué corregir. */
.cajaError {
  margin-top: 12px;
  background: #FDECEA;
  border: 1px solid #F0B7B0;
  color: #8E2A1E;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: var(--t-s);
}
.cajaError[hidden] { display: none; }

.listo { text-align: center; padding: 10px 0 4px; }
.listo h2 { margin: 10px 0 4px; }
.listo p { margin: 0 0 10px; font-size: var(--t-m); color: var(--tinta-suave); }
.tick {
  width: 54px; height: 54px; margin: 0 auto;
  border-radius: 50%;
  background: #E7F3EC;
  color: #2E7D4F;
  display: grid; place-items: center;
  font-size: 26px;
}

/* ── Pie ────────────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--linea);
  margin-top: 8px;
  padding: 18px 16px 26px;
  color: var(--tinta-suave);
  font-size: var(--t-s);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pie p { margin: 0; }
.pie .tenue { color: var(--tinta-tenue); font-size: var(--t-s); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── LAS FRANJAS DE ENTREGA (10-sep) ─────────────────────────────
   Lo que se aprendió de Ocado: el comprador elige CUÁNDO antes de
   pagar. 🔑 Todo lo de aquí lo decide el servidor; esto solo lo pinta.

   🚨 El verde del ahorro (#2E7D4F) es SEMÁNTICO y no es el acento de
   la tienda: dice «esto te sale más barato», no «pulsa aquí». Ya vivía
   en `.tick`; aquí se le pone nombre para que no se reinvente otro. */
:root { --ahorro: #2E7D4F; --ahorro-fondo: #E7F3EC; }

.meta { border: 1px solid var(--linea); border-radius: 12px; padding: 11px 12px; margin: 4px 0 12px; }
.meta-t { font-size: var(--t-s); font-weight: 600; margin-bottom: 8px; }
.meta-t em { font-style: normal; color: var(--ahorro); }
.pista { height: 7px; border-radius: 99px; background: var(--foto-fondo); overflow: hidden; }
.pista span { display: block; height: 100%; border-radius: 99px; background: var(--ahorro); transition: width .45s ease; }

.diaF {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-suave); margin: 14px 0 7px;
}

.franja {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 10px;
  align-items: center; text-align: left;
  border: 1px solid var(--linea-fuerte); border-radius: 12px;
  background: var(--pantalla); color: var(--tinta);
  padding: 11px 13px; margin-bottom: 7px; font: inherit; cursor: pointer;
}
.franja:hover:not(:disabled) { border-color: var(--fondo); }
.franja.on { border-color: var(--fondo); box-shadow: inset 0 0 0 1px var(--fondo); }
/* 🪤 Una franja sin cupo o ya cerrada se DEJA VER, apagada. Esconderla
   haría que la lista cambiara de tamaño sola y que nadie entendiera por
   qué «las de la mañana» desaparecieron. */
.franja:disabled { opacity: .45; cursor: not-allowed; }
.f-h { font-size: var(--t-m); font-weight: 700; }
.f-n { font-size: var(--t-xs); color: var(--tinta-suave); margin-top: 2px; }
.f-p { font-size: var(--t-m); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.f-p.eco { color: var(--ahorro); }

.reserva {
  display: flex; align-items: center; gap: 8px;
  background: var(--ambar-claro); border: 1px solid #F0DFB0;
  border-radius: 10px; padding: 9px 12px;
  font-size: var(--t-s); font-weight: 600; margin: 10px 0 4px;
}
.reserva b { font-variant-numeric: tabular-nums; }

.pl.ahorro .pl-n, .pl.ahorro .pl-t { color: var(--ahorro); }

.confirmar.suave { background: var(--pantalla); color: var(--fondo); border: 1px solid var(--linea-fuerte); }
.enlace {
  border: 0; background: none; padding: 0; font: inherit;
  font-size: var(--t-xs); color: var(--fondo); text-decoration: underline; cursor: pointer;
}

/* El bloque de confirmar la dirección. 🚨 Se le da peso a propósito: es
   la única defensa contra que Google devuelva una casa que no es. */
.confirmaDir {
  border: 1px solid var(--linea-fuerte); border-left: 4px solid var(--naranja);
  border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px;
}
.cd-t { font-size: var(--t-xs); color: var(--tinta-suave); margin-bottom: 4px; }
.cd-d { font-size: var(--t-l); font-weight: 700; line-height: 1.3; }
.cd-k { font-size: var(--t-xs); color: var(--tinta-suave); margin-top: 4px; }
/* 🔑 Leer «Cl. 20 #25-30, Sincelejo» no basta para darse cuenta de que es
   la Calle 20 equivocada. Verlo en el mapa, sí. */
.cd-mapa {
  display: inline-block; margin-top: 9px;
  font-size: var(--t-s); font-weight: 700; color: var(--fondo);
}