/* ============================================================
   CALEÑO RECOMIENDA
   La paleta sale de la bandera de Cali: un solo acento, el rojo, y
   el verde para los fondos oscuros. El azul vive dentro de la vitrina.
   Las categorías se distinguen por su icono, no por el color, para
   que la página no grite.
   ============================================================ */

@font-face{
  font-family:"Fraunces";
  src:url("../fuentes/fraunces.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Figtree";
  src:url("../fuentes/figtree-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Figtree";
  src:url("../fuentes/figtree-600.woff2") format("woff2");
  font-weight:500 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Figtree";
  src:url("../fuentes/figtree-800.woff2") format("woff2");
  font-weight:700 800;font-style:normal;font-display:swap;
}

:root{
  /* Bandera de Cali: azul, rojo, blanco, rojo y verde, de arriba abajo. */
  --rojo:#C8102E;          /* el rojo de la bandera — el único acento */
  --rojo-osc:#96091F;
  --rojo-claro:#FCEAEC;
  --verde:#0A5C38;         /* fondo oscuro: el verde de la bandera */
  --verde-2:#0E7549;
  --pulpa:#F7B32B;         /* amarillo de la pulpa, solo para destacar */

  --cali-azul:#0B4EA2;
  --cali-azul-osc:#083C7E;
  --cali-azul-claro:#2E7ED6;
  --cali-verde:#0E9B57;    /* verde vivo: solo para la cinta, que es delgada */

  --tinta:#20140F;
  --tinta-media:#5B4A42;
  --tinta-suave:#7A675D;
  --linea:#E7DED6;
  --papel:#FBF7F3;
  --blanco:#FFFFFF;

  --r-sm:10px; --r-md:18px; --r-lg:26px;
  --sombra:0 1px 2px rgba(32,20,15,.05), 0 8px 20px rgba(32,20,15,.06);
  --sombra-alta:0 14px 38px rgba(32,20,15,.20);
  --max:1120px;

  --display:"Fraunces","Palatino Linotype",Georgia,serif;
  --texto:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* WONK activa las alternas de Fraunces: es lo que le quita el aire
   institucional. Los nombres de negocios quedan fuera porque la "&"
   alterna se lee como un símbolo raro. */
.titulo,.seccion__titulo,.lista__titulo,.ficha-cat__nombre,
.btn-todos,.modal__encabezado h2{
  font-variation-settings:"WONK" 1;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--blanco);color:var(--tinta);
  font-family:var(--texto);font-size:16px;line-height:1.55;
}
img{max-width:100%;display:block}
/* Los botones heredan azul de sistema en iOS si no se les da color. */
button{font:inherit;cursor:pointer;color:var(--tinta)}
h1,h2,h3{margin:0;line-height:1.1}

.envoltorio{width:100%;max-width:var(--max);margin:0 auto;padding:0 18px}
.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--blanco);padding:10px 16px}
.saltar:focus{left:0}
.oculto-visual{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--pulpa);outline-offset:2px}

/* ---------------- Portada ----------------
   Fondo blanco y limpio: el color lo pone el recuadro de la bandera
   que va justo debajo, no el encabezado. */
.portada{
  position:relative;color:var(--tinta);text-align:center;background:var(--blanco);
}

/* Barra superior: marca a la izquierda, sugerir a la derecha. */
.barra{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:var(--max);margin:0 auto;padding:12px 18px;
}
.barra__id{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;min-width:0}
.marca-mini{width:34px;height:34px;flex:0 0 auto}
.barra__nombre{
  font-family:var(--display);font-weight:800;font-size:1.02rem;
  letter-spacing:-.015em;color:var(--tinta);white-space:nowrap;
}

.portada__interior{
  max-width:680px;margin:0 auto;padding:14px 18px 26px;
  display:flex;flex-direction:column;align-items:center;
}
.marca{width:72px;height:72px}

/* El nombre ocupa el lugar del titular grande: es lo primero que se lee. */
.titulo{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.35rem,10vw,3.9rem);letter-spacing:-.03em;line-height:.96;
  margin:12px 0 0;color:var(--tinta);text-wrap:balance;
}
.titulo span{display:block;color:var(--rojo)}
@media (min-width:560px){
  .titulo span{display:inline;margin-left:.28em}
}

.lema{
  margin:16px 0 0;font-size:1rem;color:var(--tinta-media);max-width:54ch;text-wrap:pretty;
}
.lema strong{color:var(--tinta);font-weight:800}

/* ---------------- Buscador ---------------- */
.buscador{
  position:relative;display:flex;align-items:center;
  width:100%;max-width:560px;margin:24px 0 0;
  background:var(--blanco);border-radius:999px;
  border:1.5px solid var(--linea);
  box-shadow:0 2px 6px rgba(32,20,15,.05), 0 12px 26px rgba(32,20,15,.09);
}
.buscador:focus-within{border-color:var(--rojo);box-shadow:0 0 0 4px rgba(200,16,46,.14)}
.buscador__icono{position:absolute;left:18px;width:20px;height:20px;fill:var(--tinta-suave);pointer-events:none}
.buscador input{
  width:100%;border:0;background:transparent;color:var(--tinta);
  padding:16px 46px 16px 50px;font:inherit;font-size:1rem;border-radius:999px;
}
.buscador input::placeholder{color:#A2938A}
.buscador input::-webkit-search-cancel-button{display:none}
.buscador__x{
  position:absolute;right:9px;border:0;background:var(--linea);color:var(--tinta-suave);
  width:30px;height:30px;border-radius:50%;font-size:1.25rem;line-height:1;
}
.buscador--mini{margin:16px 0 0;max-width:none;box-shadow:var(--sombra);border:1px solid var(--linea)}

.contador{margin:18px 0 0;font-size:.82rem;color:var(--tinta-suave)}
.contador strong{color:var(--rojo-osc);font-size:.95rem;font-variant-numeric:tabular-nums}

/* ---------------- Botones ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:999px;padding:11px 18px;font-weight:700;font-size:.9rem;
  text-decoration:none;transition:transform .08s ease,filter .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primario{background:var(--rojo);color:#fff}
.btn--primario:hover{filter:brightness(1.08)}
.btn--fantasma{background:transparent;color:var(--tinta-suave);border:1.5px solid var(--linea)}
.btn--sugerir{background:var(--rojo);color:#fff;flex:0 0 auto;white-space:nowrap}
.barra__txt{white-space:nowrap}
.btn--sugerir:hover{filter:brightness(1.06)}
.btn--sugerir span[aria-hidden]{font-size:1.1rem;line-height:1}

/* En pantallas angostas el botón se acorta para que no pise la marca. */
@media (max-width:620px){
  .barra{padding:10px 14px;gap:8px}
  .barra__extra{display:none}
  .barra__nombre{font-size:.92rem}
  .marca-mini{width:30px;height:30px}
  .btn--sugerir{padding:9px 15px;font-size:.86rem}
}
@media (max-width:360px){
  .barra__nombre{display:none}
}

.enlace{background:none;border:0;color:var(--rojo-osc);text-decoration:underline;padding:0;font-weight:700;font-size:.9rem}

/* El nombre ya está en la barra de arriba: repetirlo en grande solo aleja
   la lista de los dedos. */
body[data-vista="lista"] .portada__interior{display:none}
body[data-vista="lista"] .barra{padding-bottom:10px}
/* Sobre blanco el encabezado necesita una línea que lo separe del listado. */
body[data-vista="lista"] .portada{border-bottom:1px solid var(--linea)}

/* ---------------- Vistas ---------------- */
.vista{padding:34px 0 56px}
.seccion__titulo{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,5.5vw,2rem);letter-spacing:-.02em}
.seccion__ayuda{margin:6px 0 20px;color:var(--tinta-suave);font-size:.92rem}

/* ---------------- Vitrina: el recuadro de la bandera ----------------
   Azul de la bandera de Cali, con la cinta superior repitiendo las cinco
   franjas (azul, rojo, blanco, rojo, verde) en su misma proporción 3-1-3-1-3. */
.vitrina{
  position:relative;overflow:hidden;margin:0 0 32px;color:#fff;
  border-radius:var(--r-lg);
  background:linear-gradient(155deg,var(--cali-azul) 0%,var(--cali-azul-osc) 100%);
  box-shadow:0 10px 30px rgba(8,60,126,.22);
}
.vitrina__cinta{
  height:7px;
  background:linear-gradient(90deg,
    var(--cali-azul-claro) 0 27.27%,
    var(--rojo)  27.27% 36.36%,
    #FFFFFF           36.36% 63.63%,
    var(--rojo)  63.63% 72.72%,
    var(--cali-verde) 72.72% 100%);
}
.vitrina__interior{display:grid;gap:20px;padding:20px 18px 22px}
.vitrina__galeria{min-width:0}

/* Puntos del carrusel: el botón es grande para el dedo, el punto es pequeño. */
.vitrina__puntos{display:flex;justify-content:center;gap:2px;margin-top:12px}
.vitrina__punto{
  position:relative;width:26px;height:26px;padding:0;border:0;background:none;
}
.vitrina__punto::before{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:rgba(255,255,255,.38);
  transition:background .15s ease,transform .15s ease;
}
.vitrina__punto:hover::before{background:rgba(255,255,255,.72)}
.vitrina__punto[aria-current="true"]::before{background:#fff;transform:scale(1.3)}

/* En móvil las fotos ruedan de lado; se ven dos y media, así se nota que hay más. */
.vitrina__fotos{
  display:flex;gap:11px;
  overflow-x:auto;scroll-snap-type:x proximity;
  margin:0 -18px;padding:0 18px 4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.vitrina__fotos::-webkit-scrollbar{display:none}

.vitrina__pieza{
  flex:0 0 43%;min-width:0;scroll-snap-align:start;
  text-decoration:none;color:#fff;display:block;
}
.vitrina__pieza img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:14px;background:rgba(255,255,255,.14);
  transition:transform .16s ease;
}
.vitrina__pieza:hover img{transform:translateY(-3px)}
.vitrina__pieza span{
  display:block;margin-top:7px;text-align:center;
  font-size:.66rem;font-weight:600;color:#CFE1FA;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.vitrina__mensaje{
  margin:0;font-family:var(--display);font-weight:800;
  font-variation-settings:"WONK" 1;
  font-size:clamp(1.5rem,6.2vw,2.35rem);line-height:1.06;letter-spacing:-.025em;
  text-wrap:balance;color:#fff;
}
.vitrina__mensaje em{display:block;font-style:normal;color:#FFD27A}

/* ---------------- Fichas de categoría ---------------- */
.rejilla-cat{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.ficha-cat{
  position:relative;text-align:left;color:var(--tinta);
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-md);
  padding:17px 15px 15px;box-shadow:var(--sombra);
  display:flex;flex-direction:column;gap:9px;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.ficha-cat:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:var(--rojo)}
.ficha-cat__icono{
  width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:var(--rojo-claro);
}
.ficha-cat__icono svg{width:27px;height:27px;fill:var(--rojo);color:var(--rojo)}
.ficha-cat__nombre{
  font-family:var(--display);font-weight:800;font-size:1.04rem;letter-spacing:-.015em;
  line-height:1.15;text-wrap:balance;color:var(--tinta);
}
.ficha-cat__n{
  font-size:.72rem;font-weight:600;color:var(--tinta-suave);letter-spacing:.02em;
}
.ficha-cat::after{
  content:"";position:absolute;left:15px;right:15px;bottom:0;height:4px;border-radius:4px 4px 0 0;
  background:var(--rojo);opacity:0;transition:opacity .14s ease;
}
.ficha-cat:hover::after{opacity:1}

.btn-todos{
  margin-top:22px;width:100%;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--verde);color:#EAF6EF;border:0;border-radius:var(--r-md);
  padding:19px 22px;font-family:var(--display);font-weight:800;font-size:1.06rem;
  letter-spacing:-.01em;box-shadow:var(--sombra);
  transition:transform .1s ease,filter .15s ease;
}
.btn-todos:hover{filter:brightness(1.28);transform:translateY(-2px)}
.btn-todos em{
  font-style:normal;font-family:var(--texto);font-size:.78rem;font-weight:700;
  background:var(--rojo);color:#fff;border-radius:999px;padding:4px 11px;
}

/* ---------------- Listado ---------------- */
.btn-volver{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--pulpa);color:#3B2200;border:0;border-radius:999px;
  padding:11px 20px;font-weight:800;font-size:.92rem;margin:0 0 22px;
  box-shadow:0 4px 14px rgba(247,179,43,.32);
  transition:transform .1s ease,filter .15s ease;
}
.btn-volver svg{width:18px;height:18px;fill:currentColor}
.btn-volver:hover{filter:brightness(1.06);transform:translateX(-2px)}

.cierre-lista{margin-top:30px;text-align:center}
.btn-volver--abajo{margin:0 auto;padding:14px 26px;font-size:1rem}
.cierre-lista__pista{margin:11px 0 0;font-size:.82rem;color:var(--tinta-suave)}

.lista__cabecera{display:flex;align-items:center;gap:14px}
.lista__marca{
  width:52px;height:52px;border-radius:15px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--rojo-claro);
}
.lista__marca svg{width:28px;height:28px;fill:var(--rojo)}
.lista__titulo{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,6vw,2.1rem);letter-spacing:-.02em;text-wrap:balance}
.lista__conteo{margin:3px 0 0;color:var(--tinta-suave);font-size:.88rem}

/* ---------------- Filtros de ubicación ---------------- */
/* Los filtros son una herramienta, no el contenido: ocupan lo mínimo para
   seguir siendo usables con el dedo (los chips conservan 34 px de alto). */
.filtros{
  margin:12px 0 16px;padding:10px 12px;background:var(--blanco);
  border:1px solid var(--linea);border-radius:14px;
  display:flex;flex-direction:column;gap:8px;
}
.filtros__fila{display:flex;flex-direction:column;gap:5px}
.filtros__titulo{
  margin:0;font-size:.64rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;color:var(--tinta-suave);
}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}

/* En celular los chips no se apilan en cinco filas: ruedan de lado con el dedo.
   Así la lista de negocios empieza casi de una, que es a lo que vino la gente. */
@media (max-width:719px){
  .chips{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;scrollbar-width:none;
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;scroll-snap-align:start}
  .filtros{margin:10px 0 14px;padding:9px 0 9px 12px;border-radius:12px}
  .filtros__titulo{padding-right:12px}
  .chips::after{content:"";flex:0 0 12px}
}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  min-height:34px;padding:0 12px;color:var(--tinta);
  border:1.5px solid var(--linea);background:var(--papel);
  border-radius:999px;font-size:.82rem;font-weight:600;line-height:1;
  transition:background .13s ease,border-color .13s ease,color .13s ease,transform .09s ease;
}
.chip:hover{border-color:var(--rojo);background:var(--rojo-claro)}
.chip:active{transform:scale(.97)}
.chip__n{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--linea);color:var(--tinta-suave);
  font-size:.68rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.chip[aria-pressed="true"]{background:var(--rojo);border-color:var(--rojo);color:#fff}
.chip[aria-pressed="true"] .chip__n{background:rgba(255,255,255,.28);color:#fff}
.chip[aria-pressed="true"]:hover{background:var(--rojo-osc);border-color:var(--rojo-osc)}

/* ---------------- Tarjetas ---------------- */
/* align-items:start evita que la tarjeta corta se estire hasta la alta
   y deje ese hueco blanco al final. */
.rejilla{display:grid;gap:14px;grid-template-columns:1fr;align-items:start}

.tarjeta{
  display:flex;gap:14px;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r-md);padding:15px;box-shadow:var(--sombra);
}
/* Redondo, no cuadrado redondeado: los logos vienen de fotos de perfil de
   Instagram, que son círculos. Con esquinas cuadradas, los que no traen su
   propio círculo dibujado se veían como fotos recortadas. El aro finito les
   da un borde parejo a todos, tengan el fondo que tengan. */
.tarjeta__foto{
  position:relative;flex:0 0 74px;width:74px;height:74px;
  border-radius:50%;overflow:hidden;background:#F2EAE3;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(32,20,15,.09);
}
.tarjeta__foto img{width:100%;height:100%;object-fit:cover}
.tarjeta__inicial{
  position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:1.9rem;font-weight:900;color:#fff;background:var(--rojo);
}
.tarjeta__cuerpo{flex:1;min-width:0;display:flex;flex-direction:column}
.tarjeta__cat{
  margin:0 0 3px;font-size:.68rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--rojo-osc);
}
.tarjeta__nombre{font-family:var(--display);font-weight:800;font-size:1.09rem;letter-spacing:-.015em;margin:0 0 4px}
.tarjeta__meta{
  margin:0 0 6px;font-size:.79rem;color:var(--tinta-suave);
  display:flex;flex-wrap:wrap;gap:2px 7px;
}
.tarjeta__desc{margin:0;font-size:.92rem;color:var(--tinta-media)}
.tarjeta__afectacion{
  margin:9px 0 0;font-size:.86rem;color:var(--tinta-media);
  padding-left:12px;border-left:3px solid var(--pulpa);
}
.tarjeta__afectacion:empty{display:none}
.tarjeta__acciones{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}

.accion{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border-radius:999px;font-size:.85rem;font-weight:700;
  text-decoration:none;border:1.5px solid transparent;white-space:nowrap;
}
.accion svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.accion--wa{background:#128C7E;color:#fff}
.accion--tel{background:#F3F0ED;color:#4E403A;border-color:#E3DCD5}
.accion--red{background:var(--rojo-claro);color:var(--rojo-osc);border-color:#F3D3D8}
.accion--web{background:#F3F0ED;color:#4E403A;border-color:#E3DCD5}
.accion--maps{background:#EAF4EE;color:#14603F;border-color:#CDE5D8}
/* Las apps de domicilio van en su naranja, sólidas, como el verde de WhatsApp:
   se reconocen de lejos y se distinguen entre ellas por el tono y el icono. */
.accion--rappi{background:#FF441F;color:#fff}
.accion--didi{background:#F58220;color:#fff}
.accion:hover{filter:brightness(.97)}

/* ---- "Cómo llegar" con sus dos apps dentro ---- */
.llegar{position:relative;display:inline-block}
.llegar__flecha{width:11px;height:11px;fill:currentColor;transition:transform .15s ease;margin-left:1px}
.llegar[data-abierto="true"] .llegar__flecha{transform:rotate(180deg)}
.llegar__menu{
  position:absolute;z-index:20;left:0;top:calc(100% + 7px);min-width:190px;
  background:var(--blanco);border:1px solid var(--linea);border-radius:14px;
  box-shadow:var(--sombra-alta);padding:6px;display:flex;flex-direction:column;gap:2px;
}
.llegar__opcion{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;
  text-decoration:none;font-size:.9rem;font-weight:700;color:var(--tinta);
}
.llegar__opcion svg{width:19px;height:19px;flex:0 0 auto}
.llegar__opcion:hover{background:var(--papel)}
.llegar__opcion--maps svg{fill:#1A9A5B}
.llegar__opcion--waze svg{fill:#2CB5E8}

/* Una sola línea gris, sin recuadro: informa y se quita del camino. */
.nota-orden{
  margin:0 0 10px;font-size:.78rem;line-height:1.3;
  color:var(--tinta-suave);
}
.aviso-global{
  margin:0 0 12px;font-size:.85rem;line-height:1.45;color:var(--tinta-media);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
}
.aviso-amplia{
  margin:0 0 14px;padding:11px 14px;border-radius:12px;
  background:color-mix(in srgb, var(--pulpa) 20%, white);
  border:1px solid color-mix(in srgb, var(--pulpa) 45%, white);
  font-size:.9rem;line-height:1.45;color:var(--tinta)
}
.vacio{
  background:var(--blanco);border:1px dashed var(--linea);border-radius:var(--r-md);
  padding:30px 20px;text-align:center;color:var(--tinta-suave);
}

/* ---------------- Pie ---------------- */
.pie{position:relative;background:var(--verde);color:#C4DED0;padding:34px 0 40px;font-size:.9rem;overflow:hidden}
/* La silueta va grande a propósito: es el fondo del pie, no un adorno de
   esquina. El texto le pasa por encima y se sigue leyendo porque está a
   muy baja opacidad. */
.pie__cali{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-16px;
  width:min(980px,104%);height:auto;
  fill:#FFFFFF;opacity:.13;pointer-events:none;
}

/* El chontaduro cierra el pie, centrado sobre la silueta de la ciudad.
   Va solo: el nombre ya está arriba en la barra y en el primer párrafo. */
.pie__sello{margin:30px auto 4px;text-align:center}
.pie__sello svg{width:100px;height:100px;display:block;margin:0 auto}
.pie__interior{position:relative;z-index:1}
.pie__columna{min-width:0}
.pie__marca{width:42px;height:42px;margin-bottom:14px}
.pie p{margin:0 0 9px;max-width:58ch}
.pie strong{color:var(--pulpa)}
.pie__nota{opacity:.75}

/* Cómo se armó la lista y por qué no está completa. En pantalla grande se
   va a la derecha, como una nota al margen; en el celular queda debajo. */
.pie__aclaracion{
  margin:22px 0 4px;padding:18px 20px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-left:4px solid var(--rojo);border-radius:var(--r-md);
}
.pie__aclaracion p{margin:0 0 9px;font-size:.87rem;line-height:1.55;opacity:.9}
.pie__aclaracion p:last-of-type{margin-bottom:0}
.pie__aclaracion strong{color:var(--pulpa)}
.pie__aclaracion em{font-style:normal;font-weight:700;color:#EAF6EF}
.pie__boton{margin-top:14px}
.pie__contacto{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.pie__enlace{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#EAF6EF;text-decoration:none;border-radius:999px;
  padding:10px 17px;font-size:.88rem;font-weight:700;
  transition:background .14s ease,border-color .14s ease;
}
.pie__enlace svg{width:17px;height:17px;fill:var(--pulpa);flex:0 0 auto}
.pie__enlace:hover{background:rgba(247,179,43,.16);border-color:var(--pulpa)}
.pie p.pie p.pie__fecha{
  margin:16px 0 4px;font-size:.8rem;line-height:1.5;
  color:rgba(255,255,255,.62);
}
.pie__fecha time{font-weight:700;color:rgba(255,255,255,.82)}
.pie__estado{opacity:.5;font-size:.8rem;margin:18px 0 0;max-width:none}

/* Lo legal del pie. Mas chico y mas apagado que el resto: tiene que estar,
   no tiene que gritar. Los enlaces si se subrayan, para que se vean. */
.pie__legal{
  grid-column:1/-1; margin:14px 0 0; max-width:none;
  font-size:.78rem; line-height:1.6; opacity:.62;
}
.pie__legal a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.pie__legal a:hover{color:var(--pulpa)}

/* ---------------- Modal ---------------- */
/* En el celular el formulario ocupa casi toda la pantalla y se pega abajo,
   como una hoja: así el pulgar alcanza los botones y el teclado no lo tapa.
   100dvh tiene en cuenta la barra del navegador en iOS. */
.modal{
  border:0;padding:0;background:transparent;color:var(--tinta);
  max-width:520px;width:calc(100% - 24px);border-radius:var(--r-lg);
  max-height:calc(100dvh - 24px);
}
.modal::backdrop{background:rgba(6,38,24,.74)}
/* Con el formulario abierto, la página de atrás no se mueve. */
html.con-modal,html.con-modal body{overflow:hidden}
.modal__caja{
  background:var(--blanco);border-radius:var(--r-lg);padding:22px;
  max-height:calc(100dvh - 24px);overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}

@media (max-width:560px){
  /* --tecla la calcula el JS con visualViewport: es lo que mide el teclado.
     Sin eso, en iOS la hoja queda debajo del teclado y los botones de enviar
     no se alcanzan. */
  .modal{
    width:100%;max-width:none;margin:0;border-radius:var(--r-lg) var(--r-lg) 0 0;
    max-height:calc(100dvh - var(--tecla, 0px) - 8px);
    position:fixed;left:0;right:0;bottom:var(--tecla, 0px);top:auto;
    overflow-x:hidden;
  }
  .modal__caja{
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:20px 16px calc(16px + env(safe-area-inset-bottom));
    max-height:calc(100dvh - var(--tecla, 0px) - 8px);
    overflow-x:hidden;
  }
  /* El encabezado queda fijo para no perder el botón de cerrar al bajar. */
  .modal__encabezado{
    position:sticky;top:-20px;z-index:2;background:var(--blanco);
    padding:14px 0 10px;margin:-20px 0 0;border-bottom:1px solid var(--linea);
  }
  .modal__intro{margin:12px 0 16px}
  /* En iOS, CUALQUIER campo con letra menor a 16px hace que Safari acerque la
     página al enfocarlo, y la deja corrida hacia un lado. Tiene que cubrir
     también el campo trampa antispam, que no vive dentro de .campo: como mide
     1 píxel, el zoom hacia él descuadraba toda la pantalla. */
  /* Con el id, porque ".modal input" empata en peso con ".campo input" y
     esa última gana por ir después en el archivo. */
  #dlg-sugerir input,#dlg-sugerir select,#dlg-sugerir textarea{font-size:16px}
  .modal__pie{
    position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom));
    background:var(--blanco);padding:12px 0 calc(12px + env(safe-area-inset-bottom));
    margin-top:16px;border-top:1px solid var(--linea);
  }
  .modal__pie .btn{flex:1 1 auto;min-height:46px}
}
.modal__encabezado{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal__encabezado h2{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.modal__cerrar{border:0;background:var(--linea);width:34px;height:34px;border-radius:50%;font-size:1.4rem;line-height:1;flex:0 0 auto}
.modal__intro{margin:8px 0 18px;font-size:.9rem;color:var(--tinta-suave)}
.modal__pie{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}

.campo{display:block;margin-bottom:13px}
.campo>span{display:block;font-size:.84rem;font-weight:700;margin-bottom:5px}
.campo em{color:var(--rojo);font-style:normal}
.campo input,.campo textarea{
  width:100%;border:1.5px solid var(--linea);border-radius:var(--r-sm);
  padding:11px 12px;font:inherit;font-size:.95rem;background:var(--papel);color:var(--tinta);
}
.campo textarea{resize:vertical}
.campo small{display:block;margin-top:5px;font-size:.78rem;color:var(--tinta-suave)}
.campo input:focus,.campo textarea:focus{
  outline:0;border-color:var(--rojo);background:#fff;box-shadow:0 0 0 3px rgba(200,16,46,.15);
}

/* ---------------- Pantallas grandes ---------------- */
@media (min-width:640px){
  .rejilla-cat{grid-template-columns:repeat(3,1fr);gap:14px}
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .filtros__fila{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start}
  .filtros__titulo{padding-top:9px;line-height:1.2}

  /* En tableta se sigue deslizando de lado, no en cuadrícula.
     Antes acá se abrían todas en filas: con 8 fotos ocupaba dos renglones y
     estaba bien, pero ahora entran las 15 y eran cinco renglones — más de
     1.400 px de alto que empujaban el directorio fuera de la pantalla.
     Deslizando ocupa lo mismo con 15 que con 50. */
  .vitrina__interior{padding:26px 26px 28px;gap:24px}
  .vitrina__pieza{flex:0 0 min(38%, 200px)}
  .vitrina__pieza span{font-size:.76rem}
}
@media (min-width:900px){
  /* La aclaración se va al margen derecho y el resto del pie queda a la
     izquierda, sin la columna larga de párrafos apilados. */
  .pie__interior{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
    gap:46px;align-items:start;
  }
  .pie__aclaracion{margin:0}
  .pie__sello{grid-column:1/-1;margin-top:36px}
  .pie__sello svg{width:132px;height:132px}
  .pie p.pie__estado{grid-column:1/-1;margin:12px auto 0;text-align:center}

  .marca{width:84px;height:84px}
  .rejilla-cat{grid-template-columns:repeat(4,1fr)}
  .vista{padding:44px 0 70px}
  .portada__interior{padding-top:22px;padding-bottom:34px}

  /* Fotos a un lado, mensaje al otro. */
  .vitrina__interior{
    grid-template-columns:minmax(0,420px) minmax(0,1fr);
    align-items:center;gap:38px;padding:32px 34px;
  }
  .vitrina__mensaje{font-size:2.6rem}

  /* Con espacio de sobra no vale la pena achicar cinco fotos: se muestra
     una grande y se van turnando. La primera queda en el flujo para que
     sea ella la que le da la altura a la caja. */
  .vitrina__fotos.js-carrusel{
    display:block;position:relative;overflow:visible;
    margin:0;padding:0;
  }
  .vitrina__fotos.js-carrusel .vitrina__pieza{
    position:absolute;left:0;right:0;top:0;
    opacity:0;visibility:hidden;
    transition:opacity .55s ease, visibility 0s linear .55s;
  }
  /* Hasta que no está armado no se anima nada (ver conectarVitrina). */
  .vitrina__fotos.js-carrusel:not(.js-listo) .vitrina__pieza{transition:none}
  .vitrina__fotos.js-carrusel .vitrina__pieza:first-child{position:relative}
  .vitrina__fotos.js-carrusel .vitrina__pieza.es-activa{
    opacity:1;visibility:visible;z-index:2;
    transition:opacity .55s ease, visibility 0s linear 0s;
  }
  .vitrina__fotos.js-carrusel .vitrina__pieza img{border-radius:20px}
  .vitrina__fotos.js-carrusel .vitrina__pieza:hover img{transform:none}
  .vitrina__fotos.js-carrusel .vitrina__pieza span{
    margin-top:13px;font-size:.95rem;font-weight:700;color:#fff;
  }
}

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