/* Catálogo público. Hoja aparte del panel: la ven los clientes del negocio,
   casi siempre desde el celular, así que está pensada mobile-first. */

/* Las tipografías se repiten acá porque esta página NO carga style.css: es una
   hoja independiente a propósito. Se declara la fuente dos veces, pero el
   archivo se descarga una sola —el navegador lo tiene en caché— y así el
   catálogo no arrastra los 40 KB del CSS del panel que no usa. */
@font-face {
  font-family: 'League Spartan';
  src: url('../fuentes/league-spartan.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Questrial';
  src: url('../fuentes/questrial.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --cat-bg: #faf9fc;
  --cat-surface: #ffffff;
  --cat-text: #16151a;
  --cat-muted: #6b6b76;
  --cat-border: #e7e5ee;
  /* El color por defecto cuando el negocio todavía no eligió el suyo en
     Configuración → Catálogo. Es el verde de Gestya; en cuanto el negocio elige
     uno, esta variable se pisa desde la propia página con su color. */
  --cat-accent: #34b193;
  --cat-accent-rgb: 52, 177, 147;
  --cat-dark: #09264d;
  --cat-dark-texto: #ffffff;
  --cat-wa: #25d366;
  --cat-wa-texto: #16151a;
  --cat-radius: 14px;
  --cat-shadow: 0 1px 2px rgba(20,10,30,.05), 0 6px 20px rgba(20,10,30,.08);
}

* { box-sizing: border-box; }

/* El atributo [hidden] tiene que ganarle a cualquier `display` propio del
   elemento. Sin esto, una regla como `.cat-drawer { display: flex }` deja el
   panel del pedido siempre visible: `[hidden] { display: none }` vive en la
   hoja del navegador y las declaraciones del autor le ganan siempre. */
[hidden] { display: none !important; }

.cat-body {
  margin: 0;
  background: var(--cat-bg);
  color: var(--cat-text);
  font-family: 'Questrial', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  padding-bottom: 2rem;
}

/* Questrial no tiene negrita dibujada; League Spartan sí. */
.cat-body h1, .cat-body h2, .cat-body h3, .cat-body h4,
.cat-body strong, .cat-body b, .cat-body button, .cat-body .cat-precio {
  font-family: 'League Spartan', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* El :where() no es un adorno, es lo que arregla el error.

   `.cat-body a` pesa una clase y un elemento; `.cat-btn-accent` pesa una
   clase sola. Así que la regla general de los enlaces le ganaba a la del
   botón y le pintaba el texto del color del acento: sobre un botón de
   fondo acento eso es texto invisible, y sobre el verde de WhatsApp,
   ilegible. Lo mismo le pasaba a los chips de categoría, que también son
   enlaces con color propio.

   `:where()` no suma peso, así que esta regla pasa a pesar solo la clase
   `.cat-body` y cualquier componente definido más abajo la gana sin tener
   que ir enumerando excepciones una por una — que es la lista que dentro
   de seis meses le va a faltar la nueva. */
.cat-body :where(a) { color: var(--cat-accent); text-decoration: none; }
.cat-body :where(a):hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ---------- Cabecera ---------- */
.cat-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cat-border);
}
.cat-marca img { height: 34px; width: auto; object-fit: contain; }

.cat-carrito-btn {
  position: relative;
  border: 1px solid var(--cat-border);
  background: #fff;
  border-radius: 999px;
  padding: .45rem .8rem;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.cat-carrito-count {
  min-width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--cat-border);
  color: var(--cat-muted);
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cat-carrito-count.lleno { background: var(--cat-accent); color: #fff; }

/* ---------- Barra de anuncio ---------- */
/* El texto NO es blanco fijo: sobre un acento amarillo o celeste el blanco no
   se lee. --cat-accent-texto es el que más contrasta de los dos, medido. */
.cat-anuncio {
  background: var(--cat-accent); color: var(--cat-accent-texto, #fff); text-align: center;
  padding: .5rem 1rem; font-size: .86rem; font-weight: 600;
}

/* ---------- Portada (banner) ---------- */
.cat-portada { position: relative; background: #f1eff5; }
.cat-portada img { width: 100%; height: clamp(180px, 42vw, 380px); object-fit: cover; display: block; }
.cat-portada.sin-texto img { height: clamp(150px, 34vw, 320px); }
.cat-portada-texto {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.25rem; color: #fff;
  background: linear-gradient(180deg, rgba(11,11,12,.15) 0%, rgba(11,11,12,.62) 100%);
}
.cat-portada-texto h1 {
  margin: 0 0 .35rem; font-size: clamp(1.4rem, 5.5vw, 2.4rem);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.cat-portada-texto p {
  margin: 0; max-width: 46ch; font-size: clamp(.88rem, 2.6vw, 1.05rem);
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

/* ---------- Hero y filtros ---------- */
.cat-hero { padding: 1.6rem 1rem .6rem; text-align: center; max-width: 720px; margin: 0 auto; }
.cat-hero h1 { font-size: 1.5rem; margin: 0 0 .35rem; }
.cat-hero p { color: var(--cat-muted); margin: 0 0 .75rem; }
.cat-hero-chips {
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
  padding: 1rem 1rem 0; max-width: 720px; margin: 0 auto;
}

.cat-chip {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--cat-border);
  background: #fff;
  color: var(--cat-muted);
  font-size: .82rem;
  white-space: nowrap;
}
a.cat-chip:hover { text-decoration: none; border-color: var(--cat-accent); color: var(--cat-accent); }
.cat-chip.activo { background: var(--cat-dark); border-color: var(--cat-dark); color: var(--cat-dark-texto, #fff); }

.cat-filtros { max-width: 1080px; margin: 0 auto; padding: .5rem 1rem 1rem; display: grid; gap: .6rem; }
.cat-buscador { display: flex; gap: .4rem; }
.cat-buscador input {
  flex: 1; padding: .6rem .9rem; border: 1px solid var(--cat-border);
  border-radius: 999px; font-size: .95rem; background: #fff; color: inherit;
}
.cat-buscador button {
  border: 1px solid var(--cat-border); background: #fff; border-radius: 999px;
  padding: 0 .95rem; cursor: pointer; font-size: 1rem;
}
.cat-categorias { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }

/* ---------- Grilla ---------- */
.cat-grid {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
}
.cat-card {
  background: var(--cat-surface);
  border: 1px solid var(--cat-border);
  border-radius: var(--cat-radius);
  overflow: hidden;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cat-card:hover { transform: translateY(-2px); box-shadow: var(--cat-shadow); }
/* La tarjeta entera es un enlace, pero su texto NO debe tomar el color de
   enlace: el nombre del producto tiene que leerse con el color de texto
   normal. Necesita ganarle en especificidad a `.cat-body a`. */
.cat-body a.cat-card-link,
.cat-body a.cat-card-link:hover { display: flex; flex-direction: column; flex: 1; color: var(--cat-text); text-decoration: none; }

.cat-card-add {
  margin: 0 .8rem .8rem; padding: .55rem .6rem;
  border: 1px solid var(--cat-accent); border-radius: 9px;
  background: #fff; color: var(--cat-accent);
  font-size: .88rem; font-weight: 700; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cat-card-add:hover { background: var(--cat-accent); color: #fff; }
.cat-card-add.agregado {
  background: var(--cat-wa); border-color: var(--cat-wa); color: var(--cat-wa-texto, #16151a);
}
.cat-card-img { position: relative; aspect-ratio: 1 / 1; background: #f1eff5; }
.cat-card-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-sin-foto {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--cat-muted); font-size: .85rem;
}
.cat-badge-stock {
  position: absolute; left: .5rem; top: .5rem;
  background: var(--cat-accent); color: #fff; font-size: .7rem; font-weight: 700;
  padding: .2rem .5rem; border-radius: 999px;
}
.cat-card-body { padding: .7rem .8rem .9rem; display: flex; flex-direction: column; gap: .15rem; }
.cat-card-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cat-muted); }
.cat-card-body h3 { margin: 0; font-size: .98rem; line-height: 1.3; }
.cat-precio { margin: .2rem 0 0; font-weight: 700; color: var(--cat-accent); }

/* ---------- Ficha de producto ---------- */
.cat-migas { max-width: 1080px; margin: 0 auto; padding: 1rem 1rem 0; }
.cat-detalle {
  max-width: 1080px; margin: 0 auto; padding: 1rem;
  display: grid; gap: 1.5rem;
}
.cat-galeria-principal {
  position: relative; aspect-ratio: 1 / 1; background: #f1eff5;
  border-radius: var(--cat-radius); overflow: hidden; border: 1px solid var(--cat-border);
}
.cat-galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.cat-galeria-miniaturas { display: flex; gap: .5rem; margin-top: .6rem; overflow-x: auto; padding-bottom: .2rem; }
.cat-mini {
  flex: 0 0 68px; width: 68px; height: 68px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #f1eff5;
}
.cat-mini img { width: 100%; height: 100%; object-fit: cover; }
.cat-mini.activo { border-color: var(--cat-accent); }

/* ---------- El video de la galería ---------- */
/* El reproductor tapa la carátula en vez de reemplazarla: mientras TikTok
   carga —y tarda—, lo que se ve es la foto del video y no un rectángulo
   negro, que se lee como una página rota. */
.cat-video {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 340px); height: 100%;
  border: 0; display: block; background: #000;
}
/* El marco de la galería es cuadrado y el video de TikTok es vertical, así
   que mientras se reproduce el marco deja de ser cuadrado y se estira. Con
   el cuadrado, el reproductor entra cortado por abajo — justo donde TikTok
   pone el texto del video. */
.cat-galeria-principal:has(.cat-video) {
  aspect-ratio: auto; height: min(80vh, 700px); background: #000;
}
/* La carátula se queda atrás, borrosa y oscurecida: sigue tapando el negro
   mientras TikTok carga, pero a los costados se lee como un fondo y no como
   una foto estirada al doble de su ancho. */
.cat-galeria-principal:has(.cat-video) [data-galeria-principal] {
  filter: blur(20px) brightness(.45); transform: scale(1.1);
}
/* Y se le pone un ancho máximo: el reproductor de TikTok arma una columna
   angosta y centrada, y en un marco más ancho quedan dos bandas blancas a
   los lados que parecen un error nuestro. El fondo negro de arriba tapa lo
   que sobra. Menos de 325px TikTok no baja, así que no se achica más. */
.cat-play {
  position: absolute; inset: 0; margin: auto;
  width: 66px; height: 66px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.45);
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding-left: 4px;
  transition: transform .15s ease, background .15s ease;
}
.cat-play:hover { background: rgba(0,0,0,.65); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .cat-play { transition: none; } }
/* En la tira de miniaturas, la del video lleva su propio triángulo: sin eso
   se ve una foto más y nadie la toca. */
.cat-mini-video { position: relative; }
.cat-mini-video::after {
  content: '▶'; position: absolute; inset: 0;
  display: grid; place-items: center; color: #fff; font-size: .85rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.8); pointer-events: none;
}
.cat-mini-video img { filter: brightness(.7); }

.cat-detalle-info h1 { font-size: 1.4rem; margin: .2rem 0 .3rem; }
.cat-precio-grande { font-size: 1.6rem; font-weight: 700; color: var(--cat-accent); margin: 0 0 .8rem; }
.cat-descripcion { color: var(--cat-muted); margin: 0 0 1.2rem; }

.cat-selector { margin-bottom: 1.1rem; }
.cat-selector-label { display: block; font-size: .82rem; color: var(--cat-muted); margin-bottom: .4rem; }
.cat-selector-label strong { color: var(--cat-text); }
.cat-opciones { display: flex; flex-wrap: wrap; gap: .45rem; }
.cat-opcion {
  border: 1px solid var(--cat-border); background: #fff; color: inherit;
  border-radius: 10px; padding: .5rem .85rem; cursor: pointer; font-size: .9rem;
}
.cat-opcion:hover { border-color: var(--cat-accent); }
.cat-opcion.activo { background: var(--cat-dark); border-color: var(--cat-dark); color: var(--cat-dark-texto, #fff); }

.cat-cantidad { display: inline-flex; align-items: center; border: 1px solid var(--cat-border); border-radius: 10px; overflow: hidden; background: #fff; }
.cat-cantidad button { border: 0; background: #fff; width: 2.4rem; height: 2.4rem; font-size: 1.1rem; cursor: pointer; color: inherit; }
.cat-cantidad button:hover { background: #f6f4fa; }
.cat-cantidad input { width: 3rem; border: 0; text-align: center; font-size: 1rem; background: #fff; color: inherit; -moz-appearance: textfield; }
.cat-cantidad input::-webkit-outer-spin-button,
.cat-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cat-stock-nota { margin: .4rem 0 0; font-size: .82rem; color: var(--cat-accent); }
.cat-agregado { color: var(--cat-wa); font-weight: 600; text-align: center; margin: .6rem 0 0; }

/* ---------- Botones ---------- */
.cat-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .75rem 1.2rem; border-radius: 10px; border: 1px solid transparent;
  font-size: .95rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.cat-btn:hover { text-decoration: none; opacity: .92; }
.cat-btn-full { width: 100%; }
/* El color de marca lo elige cada negocio, así que el texto de encima no
   puede ser blanco fijo: sobre un amarillo o un lima no se lee. La variable
   la calcula el servidor midiendo cuál de los dos contrasta más. */
.cat-btn-accent { background: var(--cat-accent); color: var(--cat-accent-texto, #fff); }
.cat-btn-accent:disabled { background: var(--cat-border); color: var(--cat-muted); cursor: not-allowed; }
/* De noche `--cat-dark` pasa a ser casi blanco —es el color contrario al
   fondo, no un azul— así que el texto blanco fijo desaparecía. */
.cat-btn-oscuro { background: var(--cat-dark); color: var(--cat-dark-texto, #fff); }
/* Texto oscuro, no blanco. El blanco sobre el verde de WhatsApp da 1,98 de
   contraste —el peor de toda la página— y se lee como una mancha clara sobre
   una mancha verde. Se cambia el texto y no el verde a propósito: el verde es
   lo que hace que el botón se reconozca de lejos, y ninguno de los verdes más
   oscuros de la marca deja pasar el blanco tampoco. Con tinta da 9,16. */
.cat-btn-wa { background: var(--cat-wa); color: var(--cat-wa-texto, #16151a); }
/* Se usaba en la página de una clínica desde el primer día y nunca existió
   acá: quedaba como texto suelto con el espaciado de un botón. */
.cat-btn-outline {
  background: transparent; color: var(--cat-text);
  border-color: var(--cat-border);
}
.cat-btn-outline:hover { border-color: var(--cat-accent); color: var(--cat-accent); }

/* ---------- Tienda y mapa ---------- */
.cat-tienda {
  max-width: 1080px; margin: 2rem auto 0; padding: 1.25rem;
  background: var(--cat-surface); border: 1px solid var(--cat-border);
  border-radius: var(--cat-radius); display: grid; gap: 1rem;
}
.cat-tienda h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.cat-tienda-dir { margin: 0 0 .2rem; font-weight: 600; }
.cat-tienda-ref, .cat-tienda-horario { margin: 0 0 .2rem; color: var(--cat-muted); font-size: .9rem; }
.cat-tienda-info .cat-btn { margin-top: .8rem; }
.cat-mapa iframe { width: 100%; height: 260px; border: 1px solid var(--cat-border); border-radius: 10px; }

/* ---------- Medios de pago y redes ---------- */
.cat-pagos { max-width: 1080px; margin: 2rem auto 0; padding: 0 1rem; text-align: center; }
.cat-pagos h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cat-muted); margin: 0 0 .6rem; }
.cat-pagos-lista { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }

.cat-redes { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 0 .8rem; }
.cat-redes a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .85rem; border: 1px solid var(--cat-border); border-radius: 999px;
  background: #fff; color: var(--cat-text); font-size: .85rem; font-weight: 600;
}
.cat-redes a:hover { text-decoration: none; border-color: var(--cat-accent); color: var(--cat-accent); }

.cat-footer { text-align: center; padding: 2.5rem 1rem 1rem; color: var(--cat-muted); }
.cat-footer img { height: 30px; width: auto; margin: 0 auto .5rem; object-fit: contain; opacity: .8; }
.cat-footer p { margin: 0 0 .8rem; font-weight: 600; color: var(--cat-text); }

.cat-vacio { text-align: center; color: var(--cat-muted); padding: 2.5rem 1rem; }

.cat-cerrado { max-width: 420px; margin: 18vh auto; text-align: center; padding: 1rem; }
.cat-cerrado img { height: 44px; width: auto; margin: 0 auto 1.2rem; object-fit: contain; }
.cat-cerrado h1 { font-size: 1.3rem; margin: 0 0 .4rem; }
.cat-cerrado p { color: var(--cat-muted); margin: 0 0 1.2rem; }

/* ---------- Panel del pedido ---------- */
.cat-drawer-fondo {
  position: fixed; inset: 0; background: rgba(11,11,12,.45); z-index: 40;
  animation: cat-aparecer .18s ease;
}
.cat-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(420px, 100%); background: var(--cat-surface);
  display: flex; flex-direction: column; box-shadow: -8px 0 28px rgba(20,10,30,.16);
  animation: cat-entrar .22s ease;
  /* En celulares con notch, respeta la zona segura de abajo */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@keyframes cat-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes cat-entrar { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cat-drawer, .cat-drawer-fondo { animation: none; }
}

.cat-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem; border-bottom: 1px solid var(--cat-border);
  flex-shrink: 0;
}
.cat-drawer-head h2 { margin: 0; font-size: 1.1rem; }
.cat-drawer-cerrar {
  border: 0; background: none; cursor: pointer; color: var(--cat-muted);
  /* Área de toque cómoda en celular */
  font-size: 1.35rem; line-height: 1; width: 44px; height: 44px;
  margin: -.5rem -.5rem -.5rem 0; border-radius: 999px;
}
.cat-drawer-cerrar:active { background: #f1eff5; }
.cat-drawer-body { flex: 1; overflow-y: auto; padding: 1rem; }

.cat-item { display: flex; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--cat-border); }
.cat-item-img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #f1eff5; }
.cat-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-item-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cat-item-info strong { font-size: .92rem; }
.cat-item-sub { font-size: .8rem; color: var(--cat-muted); }
.cat-item-precio { font-size: .88rem; font-weight: 700; color: var(--cat-accent); }
.cat-item-ctrl { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.cat-item-ctrl button {
  border: 1px solid var(--cat-border); background: #fff; border-radius: 8px;
  width: 2rem; height: 2rem; cursor: pointer; font-size: .95rem; line-height: 1; color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.cat-item-ctrl button:active { background: #f1eff5; }
.cat-item-quitar { border-color: transparent !important; color: var(--cat-muted) !important; }

/* En pantallas angostas los controles bajan a su propia fila para que el
   nombre del producto no quede aplastado en dos letras por línea. */
@media (max-width: 400px) {
  .cat-item { flex-wrap: wrap; }
  .cat-item-info { flex: 1 1 auto; }
  .cat-item-ctrl { flex-basis: 100%; justify-content: flex-end; margin-top: .35rem; }
}

.cat-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .9rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--cat-border); margin-bottom: .9rem;
}
.cat-total-row strong { color: var(--cat-accent); font-size: 1.25rem; }

.cat-campo { margin-bottom: .9rem; }
.cat-campo label { display: block; font-size: .82rem; color: var(--cat-muted); margin-bottom: .3rem; }
.cat-campo input[type="text"], .cat-campo input[type="tel"], .cat-campo textarea {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--cat-border);
  border-radius: 9px; font-size: .95rem; font-family: inherit; background: #fff; color: inherit;
}
.cat-envios { display: grid; gap: .4rem; }
.cat-envio {
  display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem;
  border: 1px solid var(--cat-border); border-radius: 9px; cursor: pointer; font-size: .92rem;
}
.cat-envio:has(input:checked) { border-color: var(--cat-accent); background: var(--cat-accent-suave, rgba(var(--cat-accent-rgb),.05)); }
.cat-envio-nota { display: block; font-size: .78rem; color: var(--cat-muted); font-style: normal; margin-top: .1rem; }
.cat-nota-tienda {
  font-size: .85rem; color: var(--cat-muted); background: #f6f4fa;
  padding: .6rem .75rem; border-radius: 9px; margin: 0 0 .9rem;
}
.cat-legal { font-size: .78rem; color: var(--cat-muted); text-align: center; margin: .6rem 0 0; }

/* ---------- Escritorio ---------- */
@media (min-width: 700px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  .cat-detalle { grid-template-columns: 1fr 1fr; align-items: start; gap: 2.5rem; }
  .cat-tienda { grid-template-columns: 1fr 1.3fr; align-items: center; }
  .cat-hero h1 { font-size: 1.9rem; }
}
@media (min-width: 1000px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Selector rápido desde la grilla ---------- */
.cat-modal-fondo { position: fixed; inset: 0; background: rgba(11,11,12,.5); z-index: 60; animation: cat-aparecer .18s ease; }
.cat-modal {
  position: fixed; z-index: 70; background: var(--cat-surface);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 2rem)); max-height: min(84vh, 640px);
  border-radius: var(--cat-radius); box-shadow: 0 12px 40px rgba(20,10,30,.24);
  display: flex; flex-direction: column; overflow: hidden;
  animation: cat-modal-entrar .2s ease;
}
@keyframes cat-modal-entrar {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .cat-modal, .cat-modal-fondo { animation: none; } }

.cat-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .9rem 1rem; border-bottom: 1px solid var(--cat-border); flex-shrink: 0;
}
.cat-modal-head strong { font-size: 1rem; }
.cat-modal-body { padding: 1rem; overflow-y: auto; }
.cat-modal-resumen { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.cat-modal-resumen img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--cat-border); flex-shrink: 0;
}
.cat-modal-resumen .cat-precio-grande { margin: 0; font-size: 1.3rem; }

/* En celular el selector sube como hoja desde abajo, que es más cómodo */
@media (max-width: 560px) {
  .cat-modal {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%;
    transform: none; max-height: 88vh;
    border-radius: var(--cat-radius) var(--cat-radius) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: cat-hoja-entrar .22s ease;
  }
  @keyframes cat-hoja-entrar { from { transform: translateY(100%); } to { transform: none; } }
}

/* ---------- Modo noche del catálogo ----------
   El color de marca (--cat-accent) lo define el negocio y no se toca: solo
   cambian fondos, texto y bordes. */
:root[data-theme="oscuro"] {
  --cat-bg: #131217;
  --cat-surface: #1c1b22;
  --cat-text: #ece9f2;
  --cat-muted: #a09daf;
  --cat-border: #302e3a;
  --cat-dark: #ece9f2;
  --cat-dark-texto: #131217;
  --cat-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.35);
}
:root[data-theme="oscuro"] .cat-header { background: rgba(28,27,34,.92); }
:root[data-theme="oscuro"] .cat-card-img,
:root[data-theme="oscuro"] .cat-galeria-principal,
:root[data-theme="oscuro"] .cat-mini,
:root[data-theme="oscuro"] .cat-item-img,
:root[data-theme="oscuro"] .cat-portada { background: #26242e; }
:root[data-theme="oscuro"] .cat-carrito-btn,
:root[data-theme="oscuro"] .cat-buscador input,
:root[data-theme="oscuro"] .cat-buscador button,
:root[data-theme="oscuro"] .cat-chip,
:root[data-theme="oscuro"] .cat-opcion,
:root[data-theme="oscuro"] .cat-cantidad,
:root[data-theme="oscuro"] .cat-cantidad button,
:root[data-theme="oscuro"] .cat-cantidad input,
:root[data-theme="oscuro"] .cat-campo input[type="text"],
:root[data-theme="oscuro"] .cat-campo input[type="tel"],
:root[data-theme="oscuro"] .cat-pago-opcion,
:root[data-theme="oscuro"] .cat-mapa-cliente,
:root[data-theme="oscuro"] .cat-campo textarea,
:root[data-theme="oscuro"] .cat-item-ctrl button,
:root[data-theme="oscuro"] .cat-redes a { background: var(--cat-surface); color: var(--cat-text); }
:root[data-theme="oscuro"] .cat-cantidad button:hover,
:root[data-theme="oscuro"] .cat-item-ctrl button:active,
:root[data-theme="oscuro"] .cat-nota-tienda { background: #26242e; }
/* El chip activo usa el color de texto invertido para seguir legible */
:root[data-theme="oscuro"] .cat-chip.activo { background: var(--cat-accent); border-color: var(--cat-accent); color: var(--cat-accent-texto, #fff); }
:root[data-theme="oscuro"] .cat-opcion.activo { background: var(--cat-accent); border-color: var(--cat-accent); color: var(--cat-accent-texto, #fff); }
/* El mapa incrustado es claro: se atenúa un poco para que no encandile */
:root[data-theme="oscuro"] .cat-mapa iframe,
:root[data-theme="oscuro"] .cat-mapa-cliente iframe { filter: brightness(.82) contrast(1.05); }
:root[data-theme="oscuro"] .cat-pedido-ok { background: #26242e; }

/* Logo según el tema */
.logo-a-blanco { filter: brightness(0) invert(1); }
.logo-a-negro  { filter: brightness(0); }
.logo-en-noche { display: none; }
:root[data-theme="oscuro"] .logo-en-dia { display: none; }
:root[data-theme="oscuro"] .logo-en-noche { display: block; }

/* Botón de modo día / noche */
.tema-toggle {
  border: 1px solid var(--cat-border);
  background: var(--cat-surface);
  color: var(--cat-text);
  border-radius: 999px;
  width: 2.35rem; height: 2.35rem;
  font-size: 1rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.tema-toggle:hover { border-color: var(--cat-accent); }
.cat-header-acciones { display: flex; align-items: center; gap: .5rem; }

/* --- Opciones del plato: salsas, extras y qué quitar --------------------- */
.cat-grupo-opciones { margin-bottom: .9rem; }
.cat-grupo-pista { font-style: normal; opacity: .7; font-size: .75rem; margin-left: .35rem; }
.cat-item-opciones {
  font-size: .76rem; color: var(--cat-muted); line-height: 1.35; margin-top: .1rem;
}

/* --- Checkout ------------------------------------------------------------ */
.cat-opcional { opacity: .65; font-weight: normal; }
.cat-total-sub {
  border-bottom: 0; padding: .2rem 0; margin-bottom: 0;
  font-size: .9rem; color: var(--cat-muted);
}
.cat-pagos-elegir { display: flex; flex-wrap: wrap; gap: .4rem; }
.cat-pago-opcion {
  display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem;
  border: 1px solid var(--cat-border); border-radius: 9px; cursor: pointer;
  font-size: .88rem; background: #fff;
}
.cat-pago-opcion:has(input:checked) {
  border-color: var(--cat-accent); background: var(--cat-accent-suave, rgba(var(--cat-accent-rgb),.05));
}
.cat-mapa-cliente {
  height: 220px; margin-top: .5rem; border: 1px solid var(--cat-border);
  border-radius: 10px; overflow: hidden; background: #eee; z-index: 0;
}
.cat-mapa-cliente iframe { width: 100%; height: 100%; border: 0; }
.cat-error-pedido {
  margin: .6rem 0 0; padding: .6rem .75rem; border-radius: 9px;
  background: rgba(220,38,38,.1); color: #b91c1c; font-size: .86rem; text-align: center;
}

/* --- Confirmación del pedido -------------------------------------------- */
.cat-pedido-ok { text-align: center; padding: 1.4rem .4rem; }
.cat-pedido-ok-icono { font-size: 2.6rem; display: block; margin-bottom: .4rem; }
.cat-pedido-ok h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.cat-pedido-ok p { color: var(--cat-muted); font-size: .9rem; margin: 0 0 1rem; }
.cat-pedido-ok .cat-btn { margin-bottom: .5rem; }
/* --- Opciones que se piden por cantidad (las cremas) --------------------- */
.cat-opciones-cantidad { display: grid; gap: .35rem; }
.cat-fila-opcion {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .45rem .6rem; border: 1px solid var(--cat-border); border-radius: 9px;
  font-size: .9rem;
}
.cat-fila-opcion.activo {
  border-color: var(--cat-accent); background: var(--cat-accent-suave, rgba(var(--cat-accent-rgb),.05));
}
.cat-fila-nombre { flex: 1; min-width: 0; }
.cat-fila-valor { min-width: 1.5rem; text-align: center; font-weight: 600; }
.cat-cantidad-sm button { width: 1.9rem; height: 1.9rem; font-size: 1rem; }
.cat-cantidad-sm button:disabled { opacity: .35; cursor: default; }

/* Precio propio de cada valor de variante: pecho 17, chaufa 19 */
.cat-opcion-precio {
  display: block; font-style: normal; font-size: .78rem; opacity: .75; margin-top: .1rem;
}

/* Comentario del cliente para ese plato */
.cat-nota-item {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--cat-border);
  border-radius: 9px; font-size: .92rem; font-family: inherit;
  background: #fff; color: inherit; resize: vertical;
}
:root[data-theme="oscuro"] .cat-nota-item,
:root[data-theme="oscuro"] .cat-fila-opcion { background: var(--cat-surface); color: var(--cat-text); }

/* --- Landing de una clínica: informa y toma citas ------------------------ */
.cat-seccion { max-width: 1080px; margin: 0 auto 2.5rem; padding: 0 1rem; }
.cat-seccion > h2 { font-size: 1.35rem; margin-bottom: 1rem; }

.cat-servicios {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.cat-servicio {
  border: 1px solid var(--cat-border); border-radius: 12px; padding: 1rem;
  background: var(--cat-surface); display: flex; flex-direction: column; gap: .35rem;
}
.cat-servicio-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.cat-servicio h3 { margin: 0; font-size: 1rem; }
.cat-servicio-precio { font-weight: 700; color: var(--cat-accent); white-space: nowrap; }
.cat-servicio-duracion { margin: 0; font-size: .85rem; color: var(--cat-muted); }
.cat-servicio .cat-btn { margin-top: auto; align-self: flex-start; }

.cat-equipo {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.cat-profesional {
  display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem;
  border: 1px solid var(--cat-border); border-radius: 12px; background: var(--cat-surface);
}
.cat-profesional-inicial {
  flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.1rem;
}
.cat-profesional strong { display: block; font-size: .95rem; }
.cat-profesional-esp,
.cat-profesional-dias { display: block; font-size: .78rem; color: var(--cat-muted); }

/* --- El formulario de reserva ------------------------------------------- */
.cat-reserva { max-width: 560px; }
.cat-reserva-intro { color: var(--cat-muted); font-size: .92rem; margin-top: -.5rem; }
.cat-reserva-form {
  border: 1px solid var(--cat-border); border-radius: 14px;
  padding: 1.25rem; background: var(--cat-surface); margin-top: 1rem;
}
.cat-reserva-form select,
.cat-reserva-form input[type="date"] {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--cat-border);
  border-radius: 9px; font-size: .95rem; font-family: inherit;
  background: #fff; color: inherit;
}
.cat-horas { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
.cat-hora {
  padding: .5rem .8rem; border: 1px solid var(--cat-border); border-radius: 9px;
  background: #fff; color: inherit; font-size: .92rem; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cat-hora:hover { border-color: var(--cat-accent); }
.cat-hora.activo { background: var(--cat-dark); border-color: var(--cat-dark); color: #fff; }
.cat-btn-sm { padding: .4rem .7rem; font-size: .85rem; }

:root[data-theme="oscuro"] .cat-servicio,
:root[data-theme="oscuro"] .cat-profesional,
:root[data-theme="oscuro"] .cat-reserva-form,
:root[data-theme="oscuro"] .cat-hora,
:root[data-theme="oscuro"] .cat-reserva-form select,
:root[data-theme="oscuro"] .cat-reserva-form input[type="date"] {
  background: var(--cat-surface); color: var(--cat-text);
}
:root[data-theme="oscuro"] .cat-hora.activo {
  background: var(--cat-accent); border-color: var(--cat-accent); color: var(--cat-accent-texto, #fff);
}

/* ---------- Filtro de precio ---------- */
.cat-precio-filtro {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.cat-precio-label { font-size: .85rem; color: var(--cat-muted); }
.cat-precio-filtro input {
  width: 5.5rem; padding: .45rem .6rem;
  border: 1px solid var(--cat-border); border-radius: 999px;
  background: #fff; color: inherit; font-size: .9rem;
}
.cat-precio-filtro button {
  border: 1px solid var(--cat-border); background: #fff;
  border-radius: 999px; padding: .45rem .9rem;
  font-size: .85rem; cursor: pointer;
}
.cat-precio-filtro button:hover { border-color: var(--cat-accent); color: var(--cat-accent); }

.cat-resultado { font-size: .85rem; color: var(--cat-muted); margin: 0; }

/* ---------- Paginado ---------- */
.cat-paginado {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .35rem; padding: 1.75rem 1rem .25rem;
  max-width: 1080px; margin: 0 auto;
}
.cat-pag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 2.4rem; padding: 0 .7rem;
  border: 1px solid var(--cat-border); border-radius: 10px;
  background: #fff; color: var(--cat-text);
  font-size: .9rem; text-decoration: none;
}
.cat-body a.cat-pag:hover { border-color: var(--cat-accent); color: var(--cat-accent); text-decoration: none; }
.cat-pag.activo {
  background: var(--cat-accent); border-color: var(--cat-accent); color: var(--cat-accent-texto, #fff); font-weight: 700;
}
.cat-pag-hueco { display: inline-flex; align-items: center; padding: 0 .2rem; color: var(--cat-muted); }
.cat-paginado-nota {
  text-align: center; color: var(--cat-muted); font-size: .82rem; margin: .5rem 0 0;
}

/* En el celular los números se aprietan; el dedo necesita blanco alrededor. */
@media (max-width: 480px) {
  .cat-paginado { gap: .3rem; }
  .cat-pag { min-width: 2.6rem; height: 2.6rem; padding: 0 .5rem; }
}

/* ===========================================================================
   Carrusel de portadas y secciones del catálogo
   =========================================================================== */

/* ---------- El carrusel ----------
   Se desplaza con scroll horizontal y ajuste por lámina, no con transformaciones
   en JavaScript. Así el dedo lo arrastra en el celular sin que haya que escribir
   nada para eso, y si el JavaScript falla sigue siendo un carrusel usable. */
/* Sin `scroll-behavior: smooth` a propósito: la transición la anima el script
   cuadro a cuadro. Con esta propiedad puesta, el navegador querría animar
   además cada paso de esa animación, y las dos se pelean. Encima el navegador
   la desactiva cuando el sistema pide menos movimiento —que en Windows viene
   puesto de fábrica en muchas máquinas—, así que tampoco se podía confiar en
   ella para la transición. */
.cat-portada-pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cat-portada-pista::-webkit-scrollbar { display: none; }

.cat-portada-lamina {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.cat-portada-lamina img {
  width: 100%;
  height: clamp(180px, 42vw, 380px);
  object-fit: cover;
  display: block;
}
.cat-portada.sin-texto .cat-portada-lamina img { height: clamp(150px, 34vw, 320px); }

.cat-portada-lamina .cat-portada-texto h2 {
  margin: 0 0 .35rem;
  font-size: clamp(1.3rem, 5vw, 2.2rem);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* Las flechas: discretas hasta que se apunta al carrusel. En el celular no
   aparecen, porque ahí se arrastra con el dedo. */
.cat-portada-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: #16151a;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.cat-portada-flecha.izq { left: .75rem; }
.cat-portada-flecha.der { right: .75rem; }
.cat-portada:hover .cat-portada-flecha { opacity: 1; }
.cat-portada-flecha:hover { background: #fff; }
.cat-portada-flecha:focus-visible { opacity: 1; outline: 2px solid var(--cat-accent); }

@media (hover: hover) and (min-width: 700px) {
  .cat-portada-flecha { display: grid; }
}

/* Los puntos */
.cat-portada-puntos {
  position: absolute;
  left: 0; right: 0; bottom: .8rem;
  display: flex; justify-content: center; gap: .4rem;
}
.cat-portada-puntos button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.cat-portada-puntos button[aria-selected="true"] {
  width: 22px;
  border-radius: 999px;
  background: #fff;
}

/* ---------- Secciones ---------- */

.cat-seccion { padding: 2.5rem 0; }
/* Las secciones sin color propio alternan con el fondo de la página, para que
   se distingan una de otra sin que el negocio tenga que elegir nada. */
.cat-seccion:nth-of-type(even) { background: var(--cat-surface); }
.cat-seccion-ancho { max-width: 1080px; margin: 0 auto; padding: 0 1rem; }
.cat-seccion-titulo {
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  margin: 0 0 1.1rem;
  text-align: center;
}

/* Tira horizontal de destacados: en el celular se desliza en vez de romper la
   fila o encoger las fotos hasta que no se vean. */
.cat-tira {
  display: flex;
  gap: .85rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: .35rem;
  scrollbar-width: none;
}
.cat-tira::-webkit-scrollbar { display: none; }
.cat-tira-item {
  flex: 0 0 46%;
  max-width: 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  color: inherit;
}
.cat-body a.cat-tira-item:hover { text-decoration: none; }
.cat-tira-img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f1eff5;
  border: 1px solid var(--cat-border);
  border-radius: var(--cat-radius);
  overflow: hidden;
}
.cat-tira-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-tira-item strong { font-size: .92rem; line-height: 1.3; }
.cat-tira-item .cat-precio { margin: 0; font-size: .9rem; }

@media (min-width: 700px) {
  .cat-tira-item { flex-basis: 22%; }
}

/* Categorías con foto */
.cat-categorias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}
.cat-categoria-tarjeta {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--cat-radius);
  overflow: hidden;
  background: #f1eff5;
  color: #fff;
}
.cat-categoria-tarjeta img { width: 100%; height: 100%; object-fit: cover; }
.cat-categoria-nombre {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem .7rem .55rem;
  font-weight: 700;
  font-size: .92rem;
  /* El degradado y no un fondo liso: sobre una foto clara un texto blanco sin
     nada detrás no se lee, y un recuadro opaco tapa la mitad de la imagen. */
  background: linear-gradient(180deg, transparent, rgba(11,11,12,.78));
}
.cat-body a.cat-categoria-tarjeta:hover { text-decoration: none; }

/* Texto con imagen */
.cat-texto { display: grid; gap: 1.25rem; align-items: center; }
.cat-texto.con-imagen { grid-template-columns: 1fr; }
.cat-texto-img img { width: 100%; border-radius: var(--cat-radius); }
.cat-texto-cuerpo { line-height: 1.7; }

@media (min-width: 760px) {
  .cat-texto.con-imagen { grid-template-columns: 0.9fr 1.1fr; gap: 2rem; }
}

/* Preguntas frecuentes */
.cat-preguntas { max-width: 720px; margin: 0 auto; display: grid; gap: .5rem; }
.cat-pregunta {
  border: 1px solid var(--cat-border);
  border-radius: var(--cat-radius);
  background: var(--cat-surface);
  padding: .7rem .9rem;
}
.cat-pregunta summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}
.cat-pregunta summary::-webkit-details-marker { display: none; }
.cat-pregunta summary::after { content: "+"; color: var(--cat-accent); font-size: 1.2rem; line-height: 1; }
.cat-pregunta[open] summary::after { content: "−"; }
.cat-pregunta p { margin: .6rem 0 0; color: var(--cat-muted); }

/* Dónde estamos */
.cat-contacto { text-align: center; line-height: 1.8; }

/* El texto de estas tarjetas NO debe tomar el color de enlace: son nombres de
   producto y de categoría, no enlaces dentro de un párrafo. Necesitan ganarle
   en especificidad a `.cat-body a`, igual que las tarjetas del catálogo. */
.cat-body a.cat-tira-item,
.cat-body a.cat-tira-item:hover { color: var(--cat-text); }
.cat-body a.cat-tira-item .cat-precio { color: var(--cat-accent); }

.cat-body a.cat-categoria-tarjeta,
.cat-body a.cat-categoria-tarjeta:hover { color: #fff; }

/* ---------- Foto de perfil del negocio ----------
   Un círculo con borde del color del fondo, montado sobre la portada. Ese borde
   no es adorno: separa la foto de la imagen de atrás, que casi siempre tiene
   algo justo ahí y sin el aro las dos se confunden en una sola mancha. */
.cat-perfil {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
}
.cat-perfil img {
  width: clamp(84px, 22vw, 118px);
  height: clamp(84px, 22vw, 118px);
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--cat-bg);
  background: var(--cat-bg);
  box-shadow: var(--cat-shadow);
}

/* Se sube a medias sobre la portada, y se compensa abajo para que no empuje al
   contenido siguiente. */
.cat-perfil.sobre-portada {
  margin-top: calc(-1 * clamp(42px, 11vw, 59px));
  margin-bottom: .75rem;
  position: relative;
  z-index: 2;
}

.cat-perfil-izquierda { justify-content: flex-start; }
.cat-perfil-centro    { justify-content: center; }
.cat-perfil-derecha   { justify-content: flex-end; }

/* Sin portada no hay nada sobre lo que montarse: se apoya con aire propio. */
.cat-perfil:not(.sobre-portada) { margin-top: 1.25rem; margin-bottom: .25rem; }

/* La bajada de una sección: una línea que explica para qué está lo que sigue.
   Va con el mismo gris del resto del texto secundario y no con el color de
   marca, que en esta página ya lo llevan el precio y los botones. */
.cat-seccion-nota {
  margin: -.4rem 0 1.1rem;
  color: var(--cat-muted);
  font-size: .92rem;
}

/* "Ahora estamos cerrados". Va arriba de todo y se ve distinto del anuncio:
   el anuncio es una promoción y esto es una condición del negocio. Si fueran
   iguales, la gente leería "2x1 los martes" y "cerrado" con el mismo peso. */
.cat-sin-horario {
  background: var(--cat-dark); color: var(--cat-dark-texto);
  text-align: center; padding: .7rem 1rem; font-size: .9rem; line-height: 1.45;
}
.cat-sin-horario strong { font-weight: 700; }
.cat-sin-horario span { display: block; opacity: .82; font-size: .82rem; margin-top: .15rem; }

/* ---------- El formulario de pedido de mudanza ---------- */
/*
 * Es largo por necesidad: lo que no se pregunta acá se descubre el día del
 * viaje con el camión en la puerta. Lo que lo hace llevadero no es acortarlo
 * sino que se vea el final — de ahí los seis pasos numerados.
 *
 * El título, la bajada y el formulario comparten el MISMO ancho y el mismo
 * borde izquierdo. Antes el título usaba el ancho de la sección y el formulario
 * se centraba más angosto, y quedaba colgado contra el borde.
 */
.mud-ancho { max-width: 720px; }
.mud-bajada {
  margin: -.6rem auto 1.8rem; text-align: center;
  color: var(--cat-muted); font-size: .95rem; line-height: 1.5;
  max-width: 58ch;
}

.mud-form { display: grid; gap: 1.25rem; text-align: left; }

/* Cada paso es una tarjeta sobre el fondo de la página: separa sin encerrar. */
.mud-grupo {
  border: 1px solid var(--cat-border);
  border-radius: 16px;
  background: var(--cat-surface);
  padding: 1.4rem 1.4rem 1.5rem;
  margin: 0;
  display: grid;
  gap: 1rem;
}
/* El legend se saca del borde y se pone adentro: un título encajado en la línea
   parte la tarjeta al medio y obliga a dejarle un hueco que nunca queda bien. */
.mud-grupo legend {
  float: left; width: 100%;
  padding: 0; margin: 0 0 .2rem;
  font-weight: 700; font-size: 1.02rem; color: var(--cat-text);
  display: flex; align-items: center; gap: .6rem;
}
.mud-grupo legend + * { clear: both; }

/* El número del paso. Se ve de reojo y dice cuánto falta. */
.mud-paso {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; flex-shrink: 0;
  border-radius: 50%;
  background: var(--cat-accent); color: var(--cat-accent-texto, #fff);
  font-size: .85rem; font-weight: 700; line-height: 1;
}

.mud-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }

.mud-form label { display: grid; gap: .35rem; font-size: .88rem; font-weight: 600; }
.mud-form small { font-weight: 400; font-size: .78rem; color: var(--cat-muted); line-height: 1.4; }
.mud-form input[type=text], .mud-form input[type=tel], .mud-form input[type=number],
.mud-form input[type=date], .mud-form input[type=time], .mud-form select, .mud-form textarea {
  width: 100%; padding: .7rem .8rem; font: inherit; font-weight: 400;
  border: 1px solid var(--cat-border); border-radius: 10px;
  background: var(--cat-bg); color: var(--cat-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mud-form input:focus, .mud-form select:focus, .mud-form textarea:focus {
  outline: none;
  border-color: var(--cat-accent);
  box-shadow: 0 0 0 3px var(--cat-accent-suave);
}
.mud-form textarea { resize: vertical; min-height: 6rem; }

/* Las dos opciones de arriba son la primera decisión y se ven como tarjetas:
   un par de radios chicos se saltean sin leerlos. */
.mud-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; }
/* .mud-form label es (0,1,1) y le gana a una sola clase: sin igualarle la
   especificidad le impone su display:grid. Es la misma trampa que dejó
   invisible un botón del catálogo hace unos meses. */
.mud-form label.mud-opcion {
  display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  border: 1px solid var(--cat-border); border-radius: 12px; padding: .9rem 1rem;
  background: var(--cat-bg); transition: border-color .15s ease, background .15s ease;
}
.mud-form label.mud-opcion:hover { border-color: var(--cat-accent); }
.mud-form label.mud-opcion:has(input:checked) {
  border-color: var(--cat-accent); background: var(--cat-accent-suave);
}
.mud-opcion input { margin: .15rem 0 0; width: 1.15rem; height: 1.15rem; flex-shrink: 0; accent-color: var(--cat-accent); }
.mud-opcion span { display: grid; gap: .2rem; }
.mud-opcion em { font-style: normal; font-size: .82rem; color: var(--cat-muted); font-weight: 400; line-height: 1.4; }
/* Sobre la tarjeta elegida el fondo lleva un 10% del color del negocio, y ahí
   el gris apagado cae a 4.51 de contraste — pasa raspando, y con otro acento
   podría no pasar. La elegida lleva color pleno: además es la que se está
   leyendo. */
.mud-form label.mud-opcion:has(input:checked) em { color: var(--cat-text); }

.mud-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .1rem; }
.mud-form label.mud-check {
  display: flex; align-items: center; gap: .6rem; font-weight: 400;
  padding: .5rem 0; cursor: pointer;
}
.mud-check input { width: 1.2rem; height: 1.2rem; accent-color: var(--cat-accent); }

/* El botón final es ancho a propósito: después de seis pasos, el que llega
   abajo no tiene que buscar dónde apretar. */
.mud-enviar { display: grid; gap: .7rem; justify-items: center; margin-top: .3rem; }
.mud-enviar .cat-btn { min-width: 16rem; padding: .85rem 1.6rem; font-size: 1rem; }
.mud-aviso { margin: 0; font-size: .92rem; text-align: center; line-height: 1.5; }
.mud-aviso.ok { color: #087443; font-weight: 600; }
.mud-aviso.error { color: #b42318; font-weight: 600; }

@media (max-width: 34rem) {
  .mud-grupo { padding: 1.1rem 1rem 1.2rem; border-radius: 14px; }
  .mud-enviar .cat-btn { min-width: 0; width: 100%; }
}

/* El selector de punto en el mapa, en la página pública.
   Va plegado: escribir la dirección alcanza, y el mapa es lo que le permite ser
   exacto al que quiere serlo — no un peaje para todos. */
.mud-mapa { margin-top: .2rem; }
.mud-mapa > summary {
  cursor: pointer; font-size: .85rem; font-weight: 600;
  color: var(--cat-accent); padding: .35rem 0; width: fit-content;
  list-style: none;
}
.mud-mapa > summary::-webkit-details-marker { display: none; }
.mud-mapa > summary::before { content: '▸ '; display: inline-block; transition: transform .15s ease; }
.mud-mapa[open] > summary::before { content: '▾ '; }
.mud-mapa > summary span { font-weight: 400; color: var(--cat-muted); }

/* El display va SOLO cuando está abierto. El navegador esconde el contenido de
   un <details> cerrado con una regla suya, y cualquier `display` que le ponga
   la hoja del sitio le gana — el cuerpo quedaba visible siempre y el
   desplegable no plegaba nada. */
.mud-mapa[open] > .mud-mapa-cuerpo { display: grid; gap: .55rem; margin-top: .6rem; }
.mud-mapa-lienzo {
  height: 240px; border-radius: 10px;
  border: 1px solid var(--cat-border); background: var(--cat-bg); overflow: hidden;
}
/* Leaflet dibuja sus controles con z-index alto; acá adentro no tiene por qué
   pasar por encima de nada de la página. */
.mud-mapa-lienzo .leaflet-pane,
.mud-mapa-lienzo .leaflet-control { z-index: 1; }

/* El estado habla del PIN. Confirmado en verde, no en el gris de una ayuda: lo
   que dice es que el punto quedó, y eso hay que verlo sin leerlo. */
.mud-mapa-estado { margin: 0; font-size: .84rem; color: var(--cat-muted); line-height: 1.45; }
.mud-mapa-estado.puesto { color: #087443; font-weight: 600; }
.mud-mapa-estado.error { color: #b42318; }

.mud-mapa-pegar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.mud-mapa-pegar input { flex: 1; min-width: 12rem; }
.mud-mapa-pegar .cat-btn { flex-shrink: 0; }

/* La distancia estimada, cuando los dos pines están puestos. */
.mud-distancia {
  margin: 0; padding: .75rem 1rem; text-align: center;
  background: var(--cat-accent-suave); border-radius: 12px;
  font-size: .9rem; line-height: 1.5; color: var(--cat-text);
}
.mud-distancia[hidden] { display: none; }

@media (max-width: 34rem) { .mud-mapa-lienzo { height: 200px; } }

/* Las estrellas de la reseña. Grandes y tocables: se contesta desde un celular
   con una mano, muchas veces caminando. */
.resena-estrellas { display: grid; gap: .45rem; }
.resena-estrellas label {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  padding: .7rem .9rem; border: 1px solid var(--cat-border); border-radius: 12px;
  background: var(--cat-surface);
}
.resena-estrellas label:has(input:checked) {
  border-color: var(--cat-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-accent) 30%, transparent);
}
.resena-estrellas input { width: auto; margin: 0; flex: 0 0 auto; }
.resena-estrellas span { font-size: 1.3rem; color: #f0a92b; letter-spacing: .08em; }

/* ---------- Hotel ---------- */
/* La página abre con las fechas porque es la pregunta con la que llega todo el
   mundo: "¿hay lugar del 14 al 18?". Va pegado arriba en el celular: al bajar
   por las habitaciones sigue a mano para cambiar las fechas sin volver. */
.hot-buscador {
  position: sticky; top: 0; z-index: 20;
  margin: 0 0 1.6rem; padding: .9rem 0;
  background: color-mix(in srgb, var(--cat-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cat-border);
}
.hot-buscador-caja {
  display: grid; gap: .7rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.hot-campo { display: grid; gap: .3rem; }
.hot-campo label { font-size: .8rem; color: var(--cat-muted); font-weight: 600; }
.hot-buscador-nota { margin: .5rem 0 0; font-size: .82rem; color: var(--cat-muted); }

.hot-tipos { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.hot-tipo {
  display: flex; flex-direction: column;
  border: 1px solid var(--cat-border); border-radius: var(--cat-radius);
  background: var(--cat-surface); overflow: hidden;
}
/* Un tipo sin lugar no se esconde: se apaga y dice por qué. Esconderlo hace
   pensar que el hotel no tiene esa habitación, y entonces nadie prueba con
   otras fechas. */
.hot-tipo.sin-lugar { opacity: .62; }

.hot-tipo-galeria { position: relative; aspect-ratio: 4 / 3; background: #1b1b22; overflow: hidden; }
.hot-tipo-galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hot-etiqueta {
  position: absolute; top: .7rem; left: .7rem;
  background: rgba(220, 38, 38, .92); color: #fff;
  padding: .28rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700;
}
/* El reproductor tapa la foto en vez de reemplazarla: mientras carga se sigue
   viendo la habitación y no un rectángulo negro. */
.hot-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.hot-play {
  position: absolute; inset: 0; margin: auto;
  width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.45);
  color: #fff; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center;
  padding-left: 4px;
}
.hot-play:hover { background: rgba(0,0,0,.68); }

.hot-miniaturas { display: flex; gap: .35rem; padding: .5rem .6rem 0; overflow-x: auto; }
.hot-mini {
  position: relative; flex: 0 0 54px; width: 54px; height: 42px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #1b1b22;
}
.hot-mini img { width: 100%; height: 100%; object-fit: cover; }
.hot-mini.activo { border-color: var(--cat-accent); }
/* La miniatura de un video lleva su triángulo: sin eso se ve una foto más y
   nadie la toca. */
.hot-mini.es-video::after {
  content: '▶'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: .7rem; text-shadow: 0 1px 5px rgba(0,0,0,.9);
}
.hot-mini.es-video img { filter: brightness(.68); }

.hot-tipo-cuerpo { padding: .9rem 1rem 1rem; display: grid; gap: .35rem; }
.hot-tipo-cuerpo h3 { margin: 0; font-size: 1.1rem; }
.hot-capacidad { font-size: .8rem; color: var(--cat-muted); }
.hot-tipo-texto { margin: .2rem 0 .4rem; font-size: .9rem; color: var(--cat-muted); }
.hot-precio { margin: .2rem 0 .6rem; font-size: 1.25rem; }
.hot-precio span { font-size: .82rem; color: var(--cat-muted); font-weight: 400; }
.hot-total { font-size: .85rem; }
.hot-aviso {
  margin: .3rem 0 0; padding: .5rem .7rem; border-radius: 10px;
  background: var(--cat-surface-2, rgba(255,255,255,.05));
  font-size: .85rem; color: var(--cat-muted); text-align: center;
}

.hot-espacios { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hot-espacio {
  border: 1px solid var(--cat-border); border-radius: var(--cat-radius);
  overflow: hidden; background: var(--cat-surface);
}
.hot-espacio-foto { position: relative; aspect-ratio: 16 / 10; background: #1b1b22; }
.hot-espacio-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hot-espacio-texto { padding: .8rem .9rem 1rem; }
.hot-espacio-texto h3 { margin: 0 0 .25rem; font-size: 1rem; }
.hot-espacio-texto p { margin: 0; font-size: .88rem; color: var(--cat-muted); }
.hot-resumen {
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  padding: .9rem 1rem; margin: 1rem 0;
  border: 1px solid var(--cat-border); border-radius: var(--cat-radius); background: var(--cat-surface);
}
.hot-resumen div { display: grid; gap: .15rem; }
.hot-resumen span { font-size: .76rem; color: var(--cat-muted); }
.hot-detalle-noches { margin: 0 0 1rem; font-size: .88rem; }
.hot-detalle-noches summary { cursor: pointer; color: var(--cat-muted); }
.hot-detalle-noches[open] ul { display: grid; gap: .3rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.hot-detalle-noches li { display: flex; gap: .6rem; align-items: baseline; }
.hot-detalle-noches li strong { margin-left: auto; }
.hot-detalle-noches li em { font-style: normal; color: var(--cat-accent); font-size: .8rem; }

/* ---------------------------------------------------------------------------
   Los planes del gimnasio
   ---------------------------------------------------------------------------
   En tarjetas y no en una tabla: lo que se compara es el precio contra lo que
   dura, y una tabla obliga a leer dos columnas y hacer la cuenta. Acá el precio
   por día va escrito, que es la única forma honesta de comparar un mensual con
   un anual — y es la cuenta que la gente hace igual, así que mejor hacérsela. */

.gym-planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}

.gym-plan {
  position: relative;
  padding: 1.3rem 1.1rem 1.1rem;
  border: 1px solid var(--cat-borde, rgba(0,0,0,.1));
  border-radius: 14px;
  background: var(--cat-superficie, #fff);
  text-align: center;
}
.gym-plan.destacado { border-color: var(--cat-accent); border-width: 2px; }

.gym-etiqueta {
  position: absolute; top: -.65rem; left: 50%; transform: translateX(-50%);
  padding: .18rem .6rem; border-radius: 999px;
  background: var(--cat-accent); color: var(--cat-accent-texto);
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}

.gym-plan h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.gym-precio { margin: 0; font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.gym-pordia { margin: .1rem 0 .5rem; font-size: .82rem; opacity: .7; }
.gym-dura   { margin: 0 0 .5rem; font-size: .85rem; opacity: .8; }
.gym-texto  { margin: 0; font-size: .88rem; opacity: .85; }

/* ---------------------------------------------------------------------------
   El carnet del socio
   ---------------------------------------------------------------------------
   Se mira en el teléfono, a veces con el sol de frente en la puerta del
   gimnasio. Por eso el código va enorme y con mucho contraste: es lo que sirve
   cuando el QR no se puede escanear. */
.carnet-tarjeta {
  border: 1px solid var(--cat-border);
  border-radius: 16px; padding: 1.6rem 1.2rem; text-align: center;
  background: var(--cat-surface);
}
.carnet-negocio {
  margin: 0 0 1rem; font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; opacity: .65;
}
.carnet-foto {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  margin: 0 auto .8rem; display: block;
}
.carnet-tarjeta h1 { font-size: 1.35rem; margin: 0 0 .3rem; }
.carnet-codigo {
  font-family: ui-monospace, monospace; font-size: 2.1rem; font-weight: 700;
  letter-spacing: .08em; margin: .2rem 0 1rem;
}
.carnet-qr {
  width: min(220px, 70%); margin: 0 auto 1rem;
  background: #fff; padding: .6rem; border-radius: 10px;
}
/* Siempre sobre blanco, también en modo oscuro: un QR con los colores
   invertidos no lo lee ninguna cámara. */
.carnet-qr svg { width: 100%; height: auto; display: block; }

.carnet-estado {
  margin: 0; padding: .5rem .8rem; border-radius: 999px;
  display: inline-block; font-weight: 600; font-size: .95rem;
}
.carnet-bien { background: rgba(23,178,106,.14); color: #0f7a49; }
.carnet-ojo  { background: rgba(245,158,11,.16); color: #92600a; }
.carnet-mal  { background: rgba(229,72,77,.14);  color: #b02a2f; }
[data-theme="oscuro"] .carnet-bien { color: #6ee7b7; }
[data-theme="oscuro"] .carnet-ojo  { color: #fcd34d; }
[data-theme="oscuro"] .carnet-mal  { color: #fca5a5; }

/* ---------- Promociones de la carta ----------
   Arriba de todo y con el borde del color del local: son lo que el negocio
   quiere vender, y entre veinte platos tienen que verse primero. */
.cat-promos { max-width: 1080px; margin: 0 auto 1.8rem; }
.cat-promos-titulo { margin: 0 0 .8rem; padding: 0 1rem; font-size: 1.2rem; }
.cat-card-promo { border: 1.5px solid var(--cat-accent); }
.cat-promo-lleva { margin: .25rem 0 0; font-size: .8rem; line-height: 1.35; color: var(--cat-muted); }
.cat-badge-ahorro { background: var(--cat-wa); color: var(--cat-wa-texto, #16151a); }
.cat-card-add:disabled { opacity: .5; cursor: not-allowed; background: transparent; color: var(--cat-muted); border-color: var(--cat-border); }