/* Base común a todos los lenguajes. Solo usa tokens: los valores los pone la dirección artística de cada cliente. */
:root {
  --s-pequena: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --s-texto: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --s-entrada: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --s-seccion: clamp(1.75rem, 1.2rem + 2.2vw * var(--escala), 3.25rem);
  --s-titulo: clamp(2.25rem, 1.2rem + 3.4vw * var(--escala), 5rem);
  --s-display: clamp(2.5rem, 1rem + 6.4vw * var(--escala), 10rem);
  --entre: calc(clamp(88px, 11vw, 176px) * var(--densidad));
  --sube: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 400 var(--s-texto)/1.5 var(--f-texto), system-ui, sans-serif;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; filter: var(--filtro-imagen); }
a { color: inherit; text-underline-offset: 0.2em; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, .t-display, .t-titulo, .t-seccion, .tipo-nombre, .pie-nombre, .marca {
  font-family: var(--f-display), serif; font-weight: var(--peso-display); letter-spacing: var(--tracking);
  line-height: var(--leading-display); text-transform: var(--mayus); text-wrap: balance;
}
h3 { font-size: var(--s-texto); font-weight: 600; margin: 0; }
.valor, .num, .tablon-precio, .horario, .resguardo-fila, .fila-carta { font-variant-numeric: tabular-nums; }
small { display: block; font-size: var(--s-pequena); color: var(--suave); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
::selection { background: var(--acento); color: var(--tinta-acento); }

/* Titulares: tamaño máximo por diseño, pero nunca más de lo que cabe en dos líneas (--chars lo pone el motor). */
.t-display { font-size: min(var(--s-display), calc((100vw - 2 * var(--margen)) / (var(--chars) * var(--ancho-letra)))); }
.t-titulo { font-size: min(var(--s-titulo), calc(var(--ancho-titulo, 46vw) / (var(--chars) * var(--ancho-letra)))); }
.t-seccion { font-size: min(var(--s-seccion), calc(var(--ancho-seccion, 100vw - 2 * var(--margen)) / (var(--chars, 12) * var(--ancho-letra)))); margin-bottom: clamp(24px, 3vw, 48px); }
.t-entrada { font-size: var(--s-entrada); line-height: 1.4; max-width: 40ch; }
.t-afirmacion { font-family: var(--f-display), serif; font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem); line-height: 1.25; letter-spacing: -0.01em; max-width: 30ch; }
.t-acento { color: var(--acento); }
.nota { font-size: var(--s-pequena); color: var(--suave); margin-top: 16px; max-width: 60ch; }

.saltar { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: var(--fondo); padding: 12px 16px; z-index: 20; }
.saltar:focus { left: 8px; }

/* ---------- botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  background: var(--acento); color: var(--tinta-acento); border-radius: var(--boton-radio);
  font: 600 var(--s-texto)/1 var(--f-texto), system-ui, sans-serif; text-decoration: none; border: 0; cursor: pointer;
  transition: transform .2s var(--sube), filter .2s;
}
.boton:hover { transform: translateY(-2px); filter: brightness(.92); }
.boton:active { transform: translateY(0) scale(.98); }

/* ---------- formulario ---------- */
.formulario { margin-top: 32px; }
.celdas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.celda { display: flex; flex-direction: column; padding: 14px 18px; background: var(--superficie); border-radius: var(--radio); font-size: var(--s-pequena); }
.celda-ancha { grid-column: 1 / -1; }
.celda input, .celda textarea { font: inherit; font-size: var(--s-texto); color: inherit; background: transparent; border: 0; padding: 6px 0 0; resize: vertical; min-height: 32px; }
.celda input:focus, .celda textarea:focus { outline: none; }
.celda:focus-within { outline: 3px solid var(--acento); outline-offset: 2px; }
.error { display: none; color: inherit; font-weight: 600; margin-top: 6px; }
.formulario.revisado :invalid ~ .error { display: block; }
.formulario.revisado .celda:has(:invalid) { outline: 3px solid currentColor; outline-offset: 2px; }
.consentimiento { display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; align-items: start; margin: 20px 0; font-size: var(--s-pequena); max-width: 64ch; }
.consentimiento input { width: 22px; height: 22px; margin: 0; accent-color: var(--acento); }
.consentimiento .error { grid-column: 2; }
.boton-envio { width: 100%; min-height: 60px; }
.estado-envio { margin-top: 12px; font-weight: 600; min-height: 1.5em; }
.trampa { display: none; }

/* ---------- horario ---------- */
table { border-collapse: collapse; width: 100%; }
.horario { margin-top: 40px; max-width: 30rem; font-size: var(--s-texto); }
.horario caption { text-align: left; font-weight: 600; margin-bottom: 8px; }
.horario th { text-align: left; font-weight: 400; padding: 6px 16px 6px 0; }
.horario td { text-align: right; padding: 6px 0; }
[data-estado]::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--suave); margin-right: .5em; vertical-align: .1em; }
[data-estado][data-abierto="true"]::before { background: var(--acento); }

/* ---------- llamar fijo en móvil (negocios que viven del teléfono) ---------- */
.llamar-fijo { display: none; }
@media (max-width: 760px) {
  .llamar-fijo { display: flex; transition: transform .3s var(--sube), opacity .3s; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 15; }
  body:has(.llamar-fijo) { padding-bottom: 76px; }
  .llamar-fijo.oculto { transform: translateY(140%); opacity: 0; pointer-events: none; }
}

/* ---------- calendario de reservas ---------- */
.calendario { margin-top: 32px; }
.calendario iframe { width: 100%; height: min(720px, 85svh); border: 0; background: #fff; border-radius: var(--radio); }

/* ---------- páginas legales ---------- */
.legal { max-width: 70ch; margin: 0 auto; padding: 48px 20px 96px; }
.legal h1 { font-size: var(--s-seccion); margin: 32px 0 24px; }
.legal h2 { font-family: var(--f-texto), sans-serif; font-size: var(--s-texto); font-weight: 600; letter-spacing: 0; text-transform: none; margin-top: 2em; }
.legal p { margin-top: 1em; }
.legal .pendiente { background: var(--superficie); padding: 12px 16px; }

/* ---------- movimiento ---------- */
.hero h1, .hero .t-entrada, .hero .boton, .hero img, .hoja-centro > *, .tipo-nombre { animation: entra .9s var(--sube) both; }
.hero .t-entrada, .hoja-centro .t-entrada { animation-delay: .08s; }
.hero .boton, .hoja-centro .boton { animation-delay: .16s; }
.hero img { animation-name: entra-foto; animation-duration: 1.2s; }
@keyframes entra { from { opacity: 0; transform: translateY(20px); } }
@keyframes entra-foto { from { opacity: 0; transform: scale(1.03); } }
.anima .aparece { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--sube), transform .7s var(--sube); }
.anima .aparece.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
@media (max-width: 760px) {
  .celdas { grid-template-columns: 1fr; }
  .boton { width: 100%; }
}

/* Variantes de componentes. Cada bloque de reglas corresponde a una variante de motor/componentes.mjs. */
.bloque { padding: var(--entre) var(--margen); }
.bloque > * { max-width: var(--medida); }

/* ================= CABECERAS ================= */
.cab a { text-decoration: none; }
.cab nav a:hover { text-decoration: underline; }
.marca { font-size: var(--s-entrada); }

.cab-centrado { padding: 12px var(--margen); }
.hoja .cab-centrado { padding: 0; }
.cab-centrado nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; font-size: var(--s-pequena); }
.cab-centrado nav a { padding: 12px 0; }
.cab-centrado nav a:first-child { justify-self: start; }
.cab-centrado nav a:last-child { justify-self: end; }

.cab-barra { display: flex; align-items: center; gap: 24px; padding: 16px var(--margen); }
.cab-barra nav { display: flex; gap: 24px; margin-left: auto; font-size: var(--s-pequena); }
.cab-barra nav a { padding: 12px 0; }
.boton-cab { min-height: 44px; padding: 0 20px; font-size: var(--s-pequena); }
.cab-sobre { position: absolute; top: 0; left: 0; right: 0; z-index: 2; color: #fff; }

.cab-indice { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 24px; align-items: start; padding: 20px var(--margen) 0; }
.cab-indice .marca { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }
.cab-indice .cab-dato { font-size: var(--s-pequena); color: var(--suave); }
.cab-indice nav { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--s-pequena); }
.cab-indice nav a { padding: 4px 0; }

/* ================= PORTADAS ================= */
/* Escena: foto fija a un lado, columna de lectura al otro */
.escena { --ancho-seccion: 38vw; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; align-items: start; }
.escenario { order: 2; position: sticky; top: 12px; height: calc(100svh - 24px); overflow: hidden; background: var(--superficie); }
.escenario-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1.6s ease, transform 8s linear; }
.escenario-foto.activa { opacity: 1; transform: scale(1); }
.barra { position: absolute; left: 0; right: 0; bottom: 0; min-height: 56px; padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--fondo); font-size: var(--s-pequena); }
.lectura { order: 1; min-width: 0; }
.escena .bloque { padding-inline: clamp(24px, 4vw, 64px); }
.hoja { min-height: calc(100svh - 24px); background: var(--superficie); padding: 24px clamp(24px, 4vw, 64px); text-align: center; display: flex; flex-direction: column; --ancho-titulo: 38vw; }
.hoja-centro { margin-top: 24svh; padding-bottom: 18svh; }
.hoja .t-titulo, .hoja .t-entrada { margin-inline: auto; }
.hoja .t-entrada { margin-block: 24px 32px; }

/* Portada de revista: titular a todo el ancho, foto grande con pie */
.hero-portada { padding: clamp(40px, 7vw, 120px) var(--margen) 0; }
.hero-portada .t-display { max-width: none; }
.portada-pie { display: grid; grid-template-columns: 5fr 4fr auto; gap: 24px 48px; align-items: end; margin: clamp(32px, 4vw, 64px) 0 24px; }
.portada-datos { display: flex; flex-direction: column; gap: 4px; font-size: var(--s-pequena); }
.portada-foto { margin-inline: calc(-1 * var(--margen)); }
.portada-foto img { width: 100%; height: min(78svh, 900px); object-fit: cover; }
.portada-foto figcaption, .mosaico figcaption { font-size: var(--s-pequena); color: var(--suave); padding: 10px var(--margen) 0; }

/* Foto completa: la foto es la primera pantalla y el titular se apoya abajo */
.hero-completa { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; isolation: isolate; }
.completa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: var(--filtro-imagen) brightness(.58); }
.completa-texto { padding: 0 var(--margen) clamp(32px, 5vw, 64px); }
.completa-texto .t-entrada { margin: 20px 0 28px; }
.completa-barra { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 16px var(--margen); background: var(--fondo); color: var(--tinta); font-size: var(--s-pequena); }

/* Ficha: datos prácticos primero */
.hero-ficha { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 72px); padding: clamp(40px, 6vw, 96px) var(--margen) var(--entre); max-width: 1320px; margin: 0 auto; --ancho-titulo: 52vw; }
.ficha-titulo .t-entrada { margin: 24px 0 32px; }
.ficha-datos { align-self: end; display: grid; gap: 6px; }
.ficha-datos div { padding: 14px 20px; background: var(--superficie); border-radius: var(--radio); }
.ficha-datos dt { font-size: var(--s-pequena); color: var(--suave); }
.ficha-datos dd { font-size: var(--s-entrada); }
.ficha-fotos { grid-column: 1 / -1; display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
.ficha-fotos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio); }
.ficha-fotos img:nth-child(2) { aspect-ratio: auto; height: 100%; }

/* Collage: fotos de tamaños distintos, desalineadas */
.hero-collage { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(32px, 5vw, 80px) var(--margen); min-height: 92svh; --ancho-titulo: 38vw; }
.collage-texto .t-entrada { margin: 24px 0 32px; }
.collage-dato { margin-top: 24px; font-size: var(--s-pequena); }
.collage-fotos { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(10, 8.4svh); }
.collage-fotos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio); }
.collage-fotos .c1 { grid-area: 1 / 1 / 11 / 9; transform: rotate(-1.5deg); }
.collage-fotos .c2 { grid-area: 1 / 8 / 5 / 13; transform: rotate(1deg); z-index: 1; }
.collage-fotos .c3 { grid-area: 6 / 8 / 11 / 13; transform: rotate(-.5deg); z-index: 2; }

/* Bloques: señalética en campos de color */
.hero-bloques { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; padding: 8px var(--margen); --ancho-titulo: 52vw; }
.bloque-titulo { grid-column: 1 / 8; grid-row: span 2; background: var(--acento); color: var(--tinta-acento); padding: clamp(24px, 4vw, 64px); display: flex; flex-direction: column; justify-content: flex-end; min-height: 72svh; border-radius: var(--radio); }
.bloque-titulo .t-entrada { margin-top: 24px; }
.bloque-foto { grid-column: 8 / 13; grid-row: span 2; }
.bloque-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio); }
.bloque-dato { grid-column: span 4; background: var(--superficie); padding: 24px; font-size: var(--s-entrada); border-radius: var(--radio); }
.bloque-dato a { text-decoration: none; }
.bloque-accion { grid-column: span 4; min-height: 100%; font-size: var(--s-entrada); border-radius: var(--radio); }

/* Tipográfico: el nombre del negocio es la imagen */
.hero-tipo { padding: clamp(32px, 6vw, 96px) var(--margen) var(--entre); }
.tipo-nombre { font-size: min(var(--s-display) * 1.6, calc((100vw - 2 * var(--margen)) / (var(--chars) * var(--ancho-letra)))); line-height: .85; white-space: nowrap; }
.tipo-pie { display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(32px, 6vw, 96px); margin-top: clamp(40px, 6vw, 96px); --ancho-titulo: 44vw; }
.tipo-pie .t-entrada { margin-bottom: 20px; }
.tipo-dato { font-size: var(--s-pequena); color: var(--suave); margin-bottom: 28px; }

/* ================= INTRO ================= */
.intro-columna p { max-width: 36ch; color: var(--suave); }
.intro-columna p + p { margin-top: 1.4em; }
.intro-columna .primero { color: var(--tinta); font-weight: 600; }
.intro-destacada { display: grid; grid-template-columns: 7fr 4fr; gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.intro-destacada > * { max-width: none; }
.intro-resto p + p { margin-top: 1em; }

/* ================= SERVICIOS ================= */
.grupo + .grupo, .tablon-grupo + .tablon-grupo { margin-top: 40px; }
.grupo-nombre { font-weight: 400; color: var(--suave); margin-bottom: 6px; }
.fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 44px; padding-block: 8px; }
.fila .valor, .col-fila .valor { color: var(--suave); white-space: nowrap; }

.serv-carta > * { margin-inline: auto; max-width: 40rem; text-align: center; }
.serv-carta .t-seccion { max-width: none; }
.serv-carta .grupo-nombre { font-family: var(--f-display), serif; font-size: var(--s-entrada); color: var(--tinta); margin-bottom: 12px; }
.fila-carta { display: flex; align-items: baseline; gap: 10px; padding-block: 8px; text-align: left; }
.fila-carta .puntos, .resguardo-fila .puntos { flex: 1; min-width: 24px; border-bottom: 3px dotted var(--suave); transform: translateY(-5px); }
.fila-carta .valor { white-space: nowrap; }
.detalle { font-size: var(--s-pequena); color: var(--suave); text-align: left; margin-top: -4px; }

.serv-tabla > * { max-width: 1120px; margin-inline: auto; }
.tabla-envoltura { overflow-x: auto; }
.serv-tabla table { font-size: var(--s-texto); }
.serv-tabla th, .serv-tabla td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent); vertical-align: top; }
.serv-tabla thead th { font-size: var(--s-pequena); color: var(--suave); font-weight: 400; }
.serv-tabla tbody th { font-weight: 400; }
.serv-tabla .num { text-align: right; padding-right: 0; white-space: nowrap; }
.tabla-grupo th { padding-top: 36px; font-weight: 600 !important; border-bottom-color: var(--tinta); }

.serv-tablon { background: var(--superficie); }
.serv-tablon > * { max-width: none; }
.tablon { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 48px clamp(32px, 5vw, 80px); }
.tablon-grupo + .tablon-grupo { margin-top: 0; }
.tablon .grupo-nombre { font-family: var(--f-display), sans-serif; font-weight: var(--peso-display); font-size: var(--s-entrada); color: inherit; text-transform: var(--mayus); margin-bottom: 12px; }
.tablon-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 12px; }
.tablon-fila > span:first-child { min-width: 0; }
.tablon-precio { font-family: var(--f-display), sans-serif; font-weight: var(--peso-display); font-size: min(var(--s-seccion), 2.75rem, 7vw); line-height: 1; white-space: nowrap; color: var(--acento); }

.serv-columnas > * { max-width: none; }
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 40px clamp(24px, 4vw, 64px); }
.columna .grupo-nombre { font-family: var(--f-display), serif; font-size: var(--s-entrada); color: var(--tinta); margin-bottom: 16px; }
.col-fila { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding-block: 10px; }
.col-fila small { grid-column: 1 / -1; }

/* ================= RESERVAS ================= */
.reservar { background: var(--tinta); color: var(--fondo); }
.reservar .nota { color: color-mix(in srgb, var(--fondo) 82%, var(--tinta)); }
.reservar .boton { background: var(--fondo); color: var(--tinta); }
.reservar-texto p, .res-directa > p { margin-top: 8px; max-width: 40ch; }
.res-resguardo { display: grid; gap: 48px; }
.resguardo { background: var(--fondo); color: var(--tinta); max-width: 460px; padding: 28px 28px 34px; transform: rotate(-1deg);
  clip-path: polygon(0 0,100% 0,100% calc(100% - 10px),95% 100%,90% calc(100% - 10px),85% 100%,80% calc(100% - 10px),75% 100%,70% calc(100% - 10px),65% 100%,60% calc(100% - 10px),55% 100%,50% calc(100% - 10px),45% 100%,40% calc(100% - 10px),35% 100%,30% calc(100% - 10px),25% 100%,20% calc(100% - 10px),15% 100%,10% calc(100% - 10px),5% 100%,0 calc(100% - 10px)); }
.resguardo-dia { font-weight: 600; margin-top: 24px; }
.resguardo > div:first-child .resguardo-dia { margin-top: 0; }
.resguardo-fila { display: flex; align-items: baseline; gap: 8px; padding-block: 6px; }
.resguardo-fila span:last-child { white-space: nowrap; }
.resguardo-total { background: var(--tinta); color: var(--fondo); margin-top: 24px; padding: 12px 16px; font-weight: 600; }
.calendario { max-width: none; }

/* ================= GALERÍA ================= */
.galeria > * { max-width: none; }
.tira { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: calc(-1 * var(--margen)); padding-inline: var(--margen); }
.tira figure { flex: none; scroll-snap-align: start; }
.tira img { height: clamp(220px, 34vw, 440px); width: auto; border-radius: var(--radio); }
.mosaico { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(160px, 19vw, 300px); grid-auto-flow: dense; gap: 6px; }
.mosaico figure { position: relative; overflow: hidden; }
.mosaico .m1 { grid-column: span 3; grid-row: span 2; }
.mosaico :is(.m2, .m5) { grid-column: span 2; }
.mosaico :is(.m3, .m4) { grid-column: span 1; }
.mosaico:has(figure:nth-child(3):last-child) :is(.m2, .m3) { grid-column: span 3; }
.mosaico:has(figure:nth-child(4):last-child) :is(.m2, .m3, .m4) { grid-column: span 3; }
.mosaico:has(figure:nth-child(4):last-child) .m4 { grid-column: 1 / -1; } /* con 4 fotos la última cierra a todo el ancho: sin hueco */
.mosaico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--sube); }
.mosaico figure:hover img { transform: scale(1.04); }
.mosaico figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 16px !important; background: var(--fondo); color: var(--tinta) !important; opacity: 0; transition: opacity .3s; }
.mosaico figure:hover figcaption { opacity: 1; }

/* ================= QUIÉNES SOMOS ================= */
.sobre-carta { padding-block: calc(var(--entre) + 40px); }
.sobre-carta p { max-width: 40ch; line-height: 1.6; }
.sobre-carta p + p { margin-top: 1.2em; }
.firma { font-family: var(--f-display), serif; font-size: var(--s-entrada); font-style: italic; margin-top: 2em; }
.firma span { display: block; font-family: var(--f-texto), sans-serif; font-style: normal; font-size: var(--s-pequena); color: var(--suave); margin-top: 4px; }
.sobre-cita { display: grid; grid-template-columns: 7fr 4fr; gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.sobre-cita > * { max-width: none; }
.sobre-cita .t-seccion { grid-column: 1 / -1; }
.sobre-cita blockquote footer { font-family: var(--f-texto), sans-serif; font-size: var(--s-pequena); color: var(--suave); margin-top: 20px; letter-spacing: 0; }
.cita-resto p + p { margin-top: 1em; }

/* ================= PREGUNTAS ================= */
.faq { background: var(--superficie); }
.faq-corrido .faq-texto { columns: 2 22rem; column-gap: 56px; }
.faq-corrido > .faq-texto { max-width: 70rem; }
.faq-texto p { line-height: 1.55; break-inside: avoid; margin-bottom: 20px; }
.faq-texto strong { font-weight: 600; }
.faq-lista { max-width: 52rem; }
.faq-lista details { background: var(--superficie); border-radius: var(--radio); margin-bottom: 8px; padding-inline: 20px; }
.faq-lista summary { cursor: pointer; padding: 18px 40px 18px 0; font-weight: 600; list-style: none; position: relative; min-height: 44px; }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 1.4em; line-height: 1; transition: transform .2s var(--sube); }
.faq-lista details[open] summary::after { transform: rotate(45deg); }
.faq-lista details p { padding: 0 0 20px; max-width: 60ch; }

/* ================= CONTACTO ================= */
.contacto > * { max-width: none; }
.via { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-block: 10px; text-decoration: none; font-size: var(--s-pequena); }
.via span { display: inline-block; font-size: var(--s-entrada); transition: transform .2s var(--sube); }
.via:hover span { transform: translateX(6px); text-decoration: underline; }

.cont-campo { background: var(--acento); color: var(--tinta-acento); }
.cont-campo > * { max-width: 46rem; }
.cont-campo .vias { margin: 32px 0 48px; }
.cont-campo .celda { background: color-mix(in srgb, var(--acento) 80%, #000); }
.cont-campo .celda:focus-within { background: var(--fondo); color: var(--tinta); outline-color: var(--tinta-acento); }
.cont-campo .consentimiento input { accent-color: var(--tinta); }
.cont-campo .boton-envio { background: var(--fondo); color: var(--tinta); }
.cont-campo .horario td, .cont-campo .horario th { color: inherit; }

.cont-ficha { display: grid; grid-template-columns: 5fr 6fr; gap: 32px clamp(32px, 6vw, 96px); }
.cont-ficha .t-seccion { grid-column: 1 / -1; }
.cont-ficha address { font-style: normal; margin-bottom: 24px; }
.cont-ficha .vias { margin-bottom: 8px; }
.cont-ficha .formulario { margin-top: 0; }

.cont-directo .directo-grande { display: flex; flex-direction: column; gap: 4px; margin-bottom: clamp(40px, 6vw, 80px); }
.directo-grande a { font-family: var(--f-display), sans-serif; font-weight: var(--peso-display); font-size: var(--s-titulo); line-height: 1.05; letter-spacing: var(--tracking); text-transform: var(--mayus); text-decoration: none; width: fit-content; }
.directo-grande a:nth-child(n + 2) { font-size: var(--s-seccion); color: var(--suave); }
.directo-grande a:hover { color: var(--acento); }
.directo-resto { display: grid; grid-template-columns: 4fr 7fr; gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.directo-resto .horario { margin-top: 0; }
.directo-resto .formulario { margin-top: 0; }

/* ================= PIES ================= */
.pie-legal { margin-top: 20px; font-size: var(--s-pequena); }
.credito { display: block; opacity: .85; }
.pie nav { display: flex; flex-direction: column; }
.pie nav a, .pie address a { display: inline-block; padding-block: 10px; }
.pie address { font-style: normal; }
.pie-nombre { font-size: min(18vw, calc((100vw - 2 * var(--margen)) / (var(--chars) * var(--ancho-letra)))); line-height: .85; white-space: nowrap; }

.pie-foto { position: relative; min-height: 100svh; color: #fff; overflow: hidden; display: flex; flex-direction: column; padding: 32px var(--margen) 40px; isolation: isolate; }
.pie-imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); z-index: -1; }
.pie-arriba { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.pie-foto .pie-arriba address { text-align: right; }
.pie-foto .pie-nombre { margin-top: auto; }

.pie-colofon { background: var(--superficie); padding: 64px var(--margen) 40px; }
.colofon { display: grid; grid-template-columns: 2fr 1.5fr 1fr; gap: 32px; font-size: var(--s-pequena); }

.pie-bloque { background: var(--acento); color: var(--tinta-acento); padding: clamp(96px, 12vw, 160px) var(--margen) 40px; }
.pie-bloque .pie-arriba { margin-top: 48px; }

/* ================= MÓVIL ================= */
@media (max-width: 900px) {
  .escena { display: block; --ancho-seccion: calc(100vw - 64px); }
  .escenario { position: sticky; top: 12px; height: 42svh; z-index: 0; }
  .lectura { position: relative; z-index: 1; background: var(--fondo); }
  .hoja { min-height: auto; padding-bottom: 64px; --ancho-titulo: 86vw; }
  .hoja-centro { margin-top: 32px; padding-bottom: 0; }
  .escena .bloque { padding-inline: 20px; }
  .cab-indice { grid-template-columns: 1fr; gap: 8px; }
  .cab-indice nav { flex-direction: row; gap: 20px; align-items: center; }
  .cab-indice nav a { padding: 10px 0; }
  .cab-barra nav { display: none; }
  .cab-barra .boton-cab { margin-left: auto; width: auto; }
  .portada-pie { grid-template-columns: 1fr; }
  .portada-foto img { height: 56svh; }
  .hero-ficha, .hero-collage, .tipo-pie, .intro-destacada, .sobre-cita, .cont-ficha, .directo-resto { grid-template-columns: 1fr; --ancho-titulo: 86vw; }
  .hero-collage { min-height: auto; }
  .collage-fotos { grid-template-rows: repeat(10, 5svh); }
  .hero-bloques { grid-template-columns: 1fr; --ancho-titulo: 86vw; }
  .bloque-titulo, .bloque-foto, .bloque-dato, .bloque-accion { grid-column: 1 / -1; grid-row: auto; }
  .bloque-titulo { min-height: 56svh; }
  .bloque-foto img { aspect-ratio: 4 / 3; }
  .bloque-accion { min-height: 64px; }
  .mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: 44vw; }
  .mosaico figure { grid-column: span 1 !important; grid-row: auto !important; }
  .mosaico .m1 { grid-column: 1 / -1 !important; grid-row: span 2 !important; }
  .mosaico figcaption { display: none; }
  .colofon { grid-template-columns: 1fr; }
  .pie-foto { min-height: 88svh; }
  .pie-foto .pie-arriba address { text-align: left; }
  .serv-tabla th, .serv-tabla td { padding-right: 8px; }
}

/* ================= EXTRAS DE SECTOR (base neutra; el toque lo pone Sectores/<Sector>/toque.css) ================= */
.extra > * { max-width: 60rem; }
/* Etiquetas como una frase grande («Terraza, menú del día y comida para llevar.»), no como pastillas. */
.etiquetas { list-style: none; padding: 0; margin: 0; max-width: 30ch; font-family: var(--f-display), sans-serif; font-weight: 700; font-size: clamp(1.375rem, 1rem + 1.4vw, 2.125rem); line-height: 1.25; letter-spacing: -0.02em; text-transform: var(--mayus); }
.etiquetas li { display: inline; }
.etiquetas li:nth-child(odd) { color: var(--acento); }
.etiquetas li:not(:last-child)::after { content: ", "; color: var(--tinta); }
.etiquetas li:nth-last-child(2)::after { content: " y "; }
.etiquetas li:last-child::after { content: "."; color: var(--tinta); }
.aviso { background: var(--superficie); padding: clamp(24px, 4vw, 56px); border-radius: var(--radio); }
.aviso p { max-width: 56ch; font-size: var(--s-entrada); line-height: 1.4; }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 32px clamp(24px, 4vw, 56px); counter-reset: paso; }
.pasos li { counter-increment: paso; }
.pasos li::before { content: counter(paso); display: block; font-family: var(--f-display), sans-serif; font-size: var(--s-seccion); line-height: 1; color: var(--acento); margin-bottom: 12px; }
.pasos h3 { font-size: var(--s-entrada); margin-bottom: 8px; }
.doble { display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(32px, 6vw, 96px); }
.doble h3 { font-family: var(--f-display), serif; font-size: var(--s-entrada); margin-bottom: 12px; }
.doble ul { margin: 0; padding-left: 1.1em; }
.doble li + li { margin-top: 10px; }
.aviso-demo { margin: 0; padding: 12px max(var(--margen), calc((100% - 62ch) / 2)); background: var(--tinta); color: var(--fondo); font-size: var(--s-texto); text-align: center; position: relative; z-index: 30; }
@media (max-width: 760px) { .doble { grid-template-columns: 1fr; } }
/* Avisos del dueño (reservas/sitio.js): bandas en el flujo, arriba del todo, con la letra, mayúsculas y color de la familia.
   Sin animación, sin icono ni cápsula: la etiqueta es texto en la letra display. Cerrado = tinta invertida; oferta = acento; aviso = superficie con filete de acento. */
.aviso-web { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 0; padding: 12px max(var(--margen), calc((100% - 72ch) / 2)); background: var(--superficie); color: var(--tinta); border-bottom: 3px solid var(--acento); font-size: var(--s-texto); line-height: 1.4; position: relative; z-index: 30; }
.aviso-web p { margin: 0; }
.aviso-tipo { font-family: var(--f-display), sans-serif; font-weight: var(--peso-display); text-transform: var(--mayus); letter-spacing: var(--tracking); }
.aviso-texto { flex: 1 1 26ch; }
.aviso-fechas { font-size: var(--s-pequena); font-weight: 600; }
.aviso-cerrado { background: var(--tinta); color: var(--fondo); border-bottom-color: var(--tinta); }
.aviso-oferta { background: var(--acento); color: var(--tinta-acento); border-bottom-color: var(--acento); }
.aviso-web + .aviso-web { border-top: 1px solid currentColor; }
.aviso-demo + .avisos-web > .aviso-web:first-child { border-top: 1px solid var(--fondo); } /* separa el aviso del dueño del de demo (mismo fondo) */
@media (max-width: 600px) { .aviso-web { gap: 2px 12px; padding-block: 10px; } .aviso-texto { flex-basis: 100%; order: 2; } .aviso-fechas { order: 1; } }

/* ================= VARIANTES 19-10-2026: cartel, filas, franja, opiniones, pie mínimo ================= */
/* Cartel: titular grande arriba, tira de fotos a sangre debajo */
.hero-cartel { padding-top: clamp(32px, 5vw, 80px); }
.cartel-texto { padding-inline: var(--margen); }
.hero-cartel .t-display { max-width: none; }
.cartel-pie { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) auto; gap: 20px 40px; align-items: end; margin: clamp(24px, 3vw, 44px) 0; }
.cartel-dato { display: flex; flex-direction: column; gap: 4px; font-size: var(--s-pequena); font-weight: 600; }
.cartel-fotos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; height: min(56svh, 620px); }
.cartel-fotos[data-n="2"] { grid-template-columns: 2fr 1fr; }
.cartel-fotos img { width: 100%; height: 100%; object-fit: cover; }
/* Filas grandes */
.serv-filas > * { max-width: none; }
.filas-grupo + .filas-grupo { margin-top: clamp(28px, 4vw, 56px); }
.serv-filas .grupo-nombre { margin-bottom: 8px; }
.fila-grande { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: baseline; padding: 16px 12px; margin-inline: -12px; font-family: var(--f-display), sans-serif; font-size: clamp(1.25rem, 1rem + .9vw, 1.875rem); line-height: 1.15; letter-spacing: -0.01em; transition: background .25s, transform .25s var(--sube); }
.fila-grande:nth-child(even) { background: color-mix(in srgb, currentColor 6%, transparent); }
.fila-grande:hover { background: color-mix(in srgb, currentColor 12%, transparent); transform: translateX(6px); }
.fila-grande .detalle { grid-column: 1 / -1; font-family: var(--f-texto), sans-serif; font-size: var(--s-texto); color: inherit; opacity: .8; margin: 0; letter-spacing: 0; }
.fila-grande .valor { white-space: nowrap; color: var(--acento); }
/* Franja: fotos iguales de borde a borde */
.gal-franja { padding-inline: 0; padding-bottom: 0; }
.gal-franja .t-seccion { margin-inline: var(--margen); }
.franja { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 4px; max-width: none; }
.franja[data-n="4"] { --n: 4; }
.franja figure { position: relative; height: clamp(240px, 32vw, 520px); overflow: hidden; }
.franja img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sube); }
.franja figure:hover img { transform: scale(1.04); }
/* Opiniones reales */
.opiniones > * { max-width: none; }
.opinion-grande { max-width: 34ch; }
.opiniones blockquote footer { font-family: var(--f-texto), sans-serif; font-size: var(--s-texto); font-weight: 600; letter-spacing: 0; margin-top: 16px; color: var(--suave); }
.opiniones-resto, .opiniones-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 32px clamp(24px, 4vw, 64px); margin-top: clamp(32px, 4vw, 56px); }
.opiniones-columnas blockquote p, .opiniones-resto blockquote p { font-size: var(--s-entrada); line-height: 1.4; }
/* Pie mínimo */
.pie-minimo { padding: 32px var(--margen) 28px; background: var(--tinta); color: var(--fondo); font-size: var(--s-pequena); }
.pie-minimo p:first-child { font-size: var(--s-texto); }
@media (max-width: 900px) {
  .cartel-pie { grid-template-columns: 1fr; }
  .cartel-fotos { grid-template-columns: 1fr 1fr; height: auto; }
  .cartel-fotos img { aspect-ratio: 4 / 5; }
  .cartel-fotos img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .franja { grid-template-columns: 1fr 1fr; }
  .franja figure { height: 44vw; }
}

/* Índice de precios y quiénes somos con retrato a sangre (compartidos por varios lenguajes) */
.serv-indice > * { max-width: none; }
.indice-grupo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px clamp(24px, 4vw, 64px); padding-block: clamp(28px, 3vw, 44px); }
.indice-grupo + .indice-grupo { border-top: 4px solid var(--superficie); }
.indice .grupo-nombre { font-family: var(--f-display), sans-serif; font-weight: var(--peso-display); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); letter-spacing: var(--tracking); line-height: 1; color: var(--tinta); }
.indice-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 22px clamp(24px, 3vw, 48px); align-content: start; }
.indice-fila { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; }
.indice-nombre { font-weight: 600; }
.indice-fila .valor { font-weight: 700; color: var(--acento); white-space: nowrap; }
.indice-fila .detalle { grid-column: 1 / -1; margin: 0; }
.sobre-retrato { display: grid; grid-template-columns: 1fr 1fr; padding: 0 !important; background: var(--superficie); }
.sobre-retrato > * { max-width: none; }
.retrato-foto { position: relative; min-height: clamp(420px, 46vw, 680px); overflow: hidden; }
.retrato-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.retrato-texto { align-self: center; padding: clamp(40px, 6vw, 96px) max(var(--margen), (100vw - 1200px) / 2) clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px); }
.retrato-texto blockquote { font-weight: var(--peso-display); font-size: clamp(1.375rem, 1rem + 1.4vw, 2.125rem); line-height: 1.18; letter-spacing: -0.02em; max-width: 32ch; }
.retrato-texto blockquote footer { font-family: var(--f-texto), sans-serif; font-size: var(--s-texto); font-weight: 600; letter-spacing: 0; color: var(--acento); margin-top: 20px; }
.retrato-texto > p { margin-top: 24px; max-width: 44ch; }
@media (max-width: 900px) {
  .indice-grupo, .sobre-retrato { grid-template-columns: 1fr; }
  .indice-grupo { padding-block: 48px; }
  .retrato-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .retrato-texto { padding: 40px var(--margen) 48px; }
}

/* ---------- asistente (burbuja y panel) ---------- */
/* Solo tokens del lenguaje: la burbuja es un botón de la familia y el panel usa su letra, colores y radios. */
.asistente { --as-lado: max(16px, calc(env(safe-area-inset-right) + 12px)); --as-abajo: max(16px, calc(env(safe-area-inset-bottom) + 12px)); --as-alto: 52px; --as-linea: color-mix(in srgb, var(--tinta) 16%, transparent); }
.asistente[hidden], .asistente [hidden] { display: none !important; }

/* Lanzador: base común (botón real, 44 px mínimos, foco visible) y ocho modelos según data-boton. */
.asistente-burbuja {
  position: fixed; right: var(--as-lado); bottom: var(--as-abajo); z-index: 40; min-height: 48px; min-width: 44px; padding: 0 20px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--acento); color: var(--tinta-acento); border: 0; border-radius: var(--boton-radio); cursor: pointer;
  font: 600 1rem/1 var(--f-texto), system-ui, sans-serif; -webkit-tap-highlight-color: transparent;
  transition: translate .3s var(--sube), opacity .25s, filter .2s, border-width .2s, background-color .2s, color .2s, padding .3s var(--sube), rotate .2s;
  animation: as-sube .5s var(--sube) .5s backwards;
}
.asistente-burbuja:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.asistente-signo { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tinta-acento); color: var(--acento); font: var(--peso-display) 1.125rem/1 var(--f-display), system-ui, sans-serif; }
.asistente-pista { font-weight: 400; font-size: .8125rem; letter-spacing: 0; text-transform: none; }
.asistente.abierto .asistente-burbuja { background: var(--tinta); color: var(--fondo); }
/* Se aparta de botones y titulares al desplazarse; vuelve en cuanto recibe el foco del teclado. */
.asistente.apartada .asistente-burbuja:not(:focus) { translate: 0 calc(100% + var(--as-abajo) + 8px); opacity: 0; pointer-events: none; }
@keyframes as-sube { from { opacity: 0; translate: 0 14px; } }
@keyframes as-crece { from { opacity: 0; scale: .6; } }
@keyframes as-lado { from { translate: 100% 0; } }
@keyframes as-sello { 0% { opacity: 0; scale: 1.35; } 70% { opacity: 1; scale: .97; } }
@keyframes as-sombra { from { opacity: 0; filter: drop-shadow(0 0 0 var(--tinta)); translate: 4px 4px; } }

/* 1. Pastilla con icono y texto. */
[data-boton="pastilla"] .asistente-burbuja { min-height: var(--as-alto); padding: 0 22px 0 16px; border-radius: 999px; }
[data-boton="pastilla"] .asistente-burbuja:hover { translate: 0 -2px; }

/* 2. Redondo, solo icono: la etiqueta se despliega al pasar, al enfocar y con el panel abierto (el nombre accesible siempre está). */
.asistente[data-boton="redondo"] { --as-alto: 56px; }
[data-boton="redondo"] .asistente-burbuja { min-height: 56px; min-width: 56px; padding: 0 17px; gap: 0; border-radius: 28px; animation-name: as-crece; }
[data-boton="redondo"] .asistente-signo { width: auto; height: auto; background: none; color: inherit; font-size: 1.75rem; }
[data-boton="redondo"] .asistente-texto { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s var(--sube), opacity .2s, margin .35s var(--sube); }
[data-boton="redondo"] .asistente-burbuja:is(:hover, :focus-visible, [aria-expanded="true"]) { padding: 0 22px 0 17px; }
[data-boton="redondo"] .asistente-burbuja:is(:hover, :focus-visible, [aria-expanded="true"]) .asistente-texto { max-width: 9em; opacity: 1; margin-left: 10px; }

/* 3. Pestaña vertical pegada al borde derecho (en móvil, pestaña horizontal pegada al borde inferior). */
[data-boton="pestana"] .asistente-burbuja {
  right: 0; bottom: auto; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  min-height: 0; min-width: 44px; padding: 20px 12px; padding-left: calc(12px + env(safe-area-inset-right));
  font-family: var(--f-display), system-ui, sans-serif; font-weight: max(500, var(--peso-display)); text-transform: var(--mayus); letter-spacing: .04em; animation-name: as-lado;
}
[data-boton="pestana"] .asistente-burbuja:hover { padding-left: calc(18px + env(safe-area-inset-right)); }
.asistente[data-boton="pestana"].apartada .asistente-burbuja:not(:focus) { translate: 100% 0; }
[data-boton="pestana"] .asistente-panel { right: 60px; bottom: auto; top: max(16px, calc(50% - 300px)); max-height: calc(100svh - 32px); }

/* 4. Barra inferior a todo el ancho en móvil; en escritorio, bloque en la esquina con la misma piel. */
.asistente[data-boton="barra"] { --as-alto: 60px; }
[data-boton="barra"] .asistente-burbuja {
  min-height: 60px; padding: 0 20px; background: var(--tinta); color: var(--fondo); border-top: 3px solid var(--acento);
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; align-content: center; text-align: left;
}
[data-boton="barra"] .asistente-signo { grid-row: 1 / 3; align-self: center; width: auto; height: auto; background: none; color: var(--acento); font-size: 2rem; }
[data-boton="barra"] .asistente-pista { opacity: .8; }
[data-boton="barra"] .asistente-burbuja:hover { border-top-width: 6px; }
.asistente[data-boton="barra"].abierto .asistente-burbuja { background: var(--acento); color: var(--tinta-acento); }
.asistente[data-boton="barra"].abierto .asistente-signo { color: currentColor; }

/* 5. Sello: etiqueta girada con doble filete, se endereza al pasar. */
.asistente[data-boton="sello"] { --as-alto: 66px; }
[data-boton="sello"] .asistente-burbuja {
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 66px; padding: 10px 18px; rotate: -4deg; border-radius: 0;
  outline: 1.5px solid var(--tinta-acento); outline-offset: -5px; animation: as-sello .45s cubic-bezier(.3, 1.4, .5, 1) .5s backwards;
  font-family: var(--f-display), system-ui, sans-serif; font-weight: max(500, var(--peso-display)); text-transform: uppercase; letter-spacing: .06em;
}
[data-boton="sello"] .asistente-texto { font-size: 1.0625rem; }
[data-boton="sello"] .asistente-pista { font-family: var(--f-texto), system-ui, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
[data-boton="sello"] .asistente-burbuja:hover, [data-boton="sello"] .asistente-burbuja[aria-expanded="true"] { rotate: 0deg; }
.asistente[data-boton="sello"].abierto .asistente-burbuja { outline-color: var(--fondo); }

/* 6. Recto: esquina viva, filete y sombra dura sin desenfoque (drop-shadow plano, no un brillo) que se hunde al pulsar. */
[data-boton="recto"] .asistente-burbuja {
  border-radius: 0; border: 2px solid var(--tinta); filter: drop-shadow(5px 5px 0 var(--tinta)); min-height: var(--as-alto); padding: 0 18px;
  font-family: var(--f-display), system-ui, sans-serif; font-weight: max(500, var(--peso-display)); text-transform: uppercase; letter-spacing: .05em; animation-name: as-sombra;
}
[data-boton="recto"] .asistente-flecha { width: 9px; height: 9px; border-top: 2px solid; border-right: 2px solid; rotate: 45deg; translate: -2px 0; transition: translate .2s; }
[data-boton="recto"] .asistente-burbuja:hover { translate: -2px -2px; filter: drop-shadow(7px 7px 0 var(--tinta)); }
[data-boton="recto"] .asistente-burbuja:hover .asistente-flecha { translate: 1px 0; }
[data-boton="recto"] .asistente-burbuja:active { translate: 3px 3px; filter: drop-shadow(2px 2px 0 var(--tinta)); }
.asistente[data-boton="recto"].abierto .asistente-burbuja { border-color: var(--acento); filter: drop-shadow(5px 5px 0 var(--acento)); }

/* 7. Enlace subrayado: en la cabecera fija (lo coloca asistente.js); sin cabecera fija o en móvil, enlace en la esquina. */
[data-boton="enlace"] .asistente-burbuja {
  background: var(--fondo); color: var(--tinta); padding: 0 14px; min-height: 44px; border: 1px solid var(--as-linea); border-radius: var(--boton-radio);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; text-decoration-color: var(--acento);
}
[data-boton="enlace"] .asistente-burbuja:hover { text-decoration-thickness: 4px; }
.asistente[data-boton="enlace"].abierto .asistente-burbuja { background: var(--fondo); color: var(--tinta); text-decoration-thickness: 4px; }
/* Dentro de la cabecera el botón ya no cuelga de .asistente: sus estilos van completos aquí. */
.asistente-burbuja.en-cabecera { position: static; flex: none; min-height: 44px; padding: 0 4px; border: 0; background: none; color: inherit; animation: none; font-size: var(--s-pequena); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; text-decoration-color: currentColor; }
.asistente-burbuja.en-cabecera:hover, .asistente-burbuja.en-cabecera[aria-expanded="true"] { text-decoration-thickness: 4px; }
.asistente.en-cabecera .asistente-panel { top: calc(var(--as-arriba, 72px) + 8px); bottom: auto; max-height: calc(100svh - var(--as-arriba, 72px) - 24px); }

/* 8. Horario de hoy en la propia etiqueta: «Abierto hasta las 20:00» sobre «¿Te ayudo?». */
.asistente[data-boton="horario"] { --as-alto: 60px; }
[data-boton="horario"] .asistente-burbuja {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-height: 60px; padding: 8px 18px 8px 16px;
  background: var(--superficie); color: var(--tinta); border: 1px solid var(--as-linea); border-left: 5px solid var(--acento); border-radius: var(--boton-radio); font-variant-numeric: tabular-nums;
}
[data-boton="horario"] .asistente-hoy { font-weight: 400; font-size: .8125rem; color: var(--suave); }
[data-boton="horario"] .asistente-hoy:empty { display: none; }
[data-boton="horario"] .asistente-hoy::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--suave); margin-right: .45em; }
[data-boton="horario"] .asistente-hoy[data-abierto="true"]::before { background: var(--acento); }
[data-boton="horario"] .asistente-burbuja:hover { border-left-width: 9px; padding-left: 12px; }
.asistente[data-boton="horario"].abierto .asistente-hoy { color: inherit; }

.asistente-panel {
  position: fixed; right: var(--as-lado); bottom: calc(var(--as-abajo) + var(--as-alto) + 12px); z-index: 40; width: min(380px, calc(100vw - 2 * var(--as-lado)));
  max-height: min(640px, calc(100svh - var(--as-abajo) - var(--as-alto) - 36px)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--fondo); color: var(--tinta); border-top: 4px solid var(--acento); border-radius: var(--radio);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--tinta) 22%, transparent); padding: 16px 20px 20px; font-size: 1rem;
}
.asistente-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.asistente-cabeza h2 { font-size: 1.375rem; }
.asistente-cabeza h2:focus, .asistente-vista h3:focus { outline: none; }
.asistente-cerrar, .asistente-volver { background: none; border: 0; padding: 10px 0; min-height: 44px; color: var(--tinta); font: 600 var(--s-pequena)/1 var(--f-texto), system-ui, sans-serif; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.asistente-vista h3 { font-family: var(--f-display), serif; font-weight: max(500, var(--peso-display)); text-transform: var(--mayus); letter-spacing: var(--tracking); font-size: 1.125rem; margin: 4px 0 12px; }
.asistente-vista p { margin: 0 0 12px; }

.asistente-opcion {
  display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 4px; background: none; border: 0; border-bottom: 1px solid var(--as-linea);
  color: var(--tinta); font: 600 1rem/1.2 var(--f-texto), system-ui, sans-serif; text-align: left; text-decoration: none; cursor: pointer;
}
.asistente-opcion:hover { color: var(--acento); }
.asistente-principal { justify-content: center; margin: 4px 0 8px; padding: 0 16px; background: var(--acento); color: var(--tinta-acento); border: 0; border-radius: var(--boton-radio); }
.asistente-principal:hover { color: var(--tinta-acento); filter: brightness(.92); }

.asistente-estado::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--suave); margin-right: .5em; }
.asistente-estado[data-abierto="true"]::before { background: var(--acento); }
.asistente-horario { width: 100%; font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.asistente-horario th { text-align: left; font-weight: 400; padding: 7px 8px; white-space: nowrap; }
.asistente-horario td { text-align: right; padding: 7px 8px; }
.asistente-horario td span { white-space: nowrap; }
.asistente-horario tr { border-bottom: 1px solid var(--as-linea); }
.asistente-horario tr.hoy { background: color-mix(in srgb, var(--acento) 14%, transparent); font-weight: 600; box-shadow: inset 4px 0 0 var(--acento); }
.asistente-horario tr.hoy th { font-weight: 600; }
.asistente-sub { font-size: var(--s-pequena); color: var(--suave); margin-top: 12px; }
.asistente-lista { list-style: none; margin: 0; padding: 0; }
.asistente-lista li { padding: 6px 0; border-bottom: 1px solid var(--as-linea); }
.asistente-lista li::first-letter { text-transform: uppercase; }
.asistente-precios li { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }
.asistente-precios li span:last-child { text-align: right; white-space: nowrap; color: var(--suave); }
.asistente-faq details { border-bottom: 1px solid var(--as-linea); }
.asistente-faq summary { cursor: pointer; list-style: none; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.asistente-faq summary::-webkit-details-marker { display: none; }
.asistente-faq summary::after { content: "+"; font-size: 1.25em; line-height: 1; flex: none; }
.asistente-faq details[open] summary::after { content: "−"; }
.asistente-faq details p { margin: 0 0 14px; }
.asistente-form .celda { margin-bottom: 12px; }
.asistente-form .boton { width: 100%; min-height: 48px; }
.asistente-form [aria-invalid="true"] { text-decoration: underline wavy; }
.asistente-respuesta { margin-top: 12px; font-weight: 600; min-height: 1.5em; }

@media (max-width: 760px) {
  body:has(.llamar-fijo) .asistente { --as-abajo: max(80px, calc(env(safe-area-inset-bottom) + 76px)); }
  .asistente-panel { left: var(--as-lado); width: auto; }
  [data-boton="pestana"] .asistente-burbuja { top: auto; bottom: 0; transform: none; writing-mode: horizontal-tb; min-height: calc(44px + env(safe-area-inset-bottom)); padding: 0 18px env(safe-area-inset-bottom); animation-name: as-sube; }
  [data-boton="pestana"] .asistente-burbuja:hover { padding-left: 18px; }
  .asistente[data-boton="pestana"].apartada .asistente-burbuja:not(:focus) { translate: 0 100%; }
  [data-boton="pestana"] .asistente-panel { right: var(--as-lado); top: auto; bottom: calc(44px + env(safe-area-inset-bottom) + 12px); max-height: calc(100svh - 80px); }
  [data-boton="barra"] .asistente-burbuja { left: 0; right: 0; bottom: 0; width: 100%; border-radius: 0; min-height: calc(60px + env(safe-area-inset-bottom)); padding: 0 var(--as-lado) env(safe-area-inset-bottom); grid-template-columns: auto 1fr; }
  [data-boton="barra"] .asistente-panel { bottom: calc(60px + env(safe-area-inset-bottom) + 12px); }
  .asistente[data-boton="barra"].apartada .asistente-burbuja:not(:focus) { translate: 0 100%; }
  body:has([data-boton="barra"]) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  /* El sello en móvil va sin pista: más pequeño, tapa menos al desplazarse. */
  .asistente[data-boton="sello"] { --as-alto: 52px; }
  [data-boton="sello"] .asistente-burbuja { min-height: 52px; padding: 8px 16px; }
  [data-boton="sello"] .asistente-pista { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .asistente-burbuja, .asistente-burbuja * { animation: none !important; transition: none !important; }
  [data-boton="sello"] .asistente-burbuja:hover { rotate: -4deg; }
}

/* Botánico: sans geométrica suave, salvia o ciruela, fotos grandes en collage recto.
   Movimiento: deriva lateral lenta (las piezas pares llegan desde la derecha). */
.lenguaje-botanico { --s-seccion: clamp(2rem, 1.1rem + 2.8vw, 3.75rem); --lado: max(var(--margen), (100% - 1240px) / 2); }
.lenguaje-botanico .bloque { padding-inline: var(--lado); }
.lenguaje-botanico .cab-centrado { position: sticky; top: 0; z-index: 10; background: var(--fondo); }
.lenguaje-botanico .marca { font-weight: 600; }
.lenguaje-botanico .boton:hover { filter: none; background: var(--tinta); color: var(--fondo); }
.lenguaje-botanico .hero-collage { padding-inline: var(--lado); }
.lenguaje-botanico .collage-fotos { gap: 8px; }
.lenguaje-botanico .collage-fotos img { transform: none !important; }
.lenguaje-botanico .collage-fotos .c1 { grid-area: 1 / 1 / 11 / 11; }
.lenguaje-botanico .collage-fotos .c2 { grid-area: 1 / 11 / 6 / 13; }
.lenguaje-botanico .collage-fotos .c3 { grid-area: 6 / 11 / 11 / 13; }
@media (min-width: 901px) { .lenguaje-botanico .hero-collage { --ancho-titulo: 36vw; } }
@media (max-width: 900px) { .lenguaje-botanico .collage-fotos { grid-template-rows: repeat(10, 6svh); } }
.lenguaje-botanico .portada-foto img { height: min(70svh, 800px); }
.lenguaje-botanico .intro { background: var(--superficie); }
.lenguaje-botanico .intro-columna { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 6vw, 96px); }
.lenguaje-botanico .intro-columna > * { max-width: none; margin: 0 !important; }
.lenguaje-botanico .intro-columna .primero { font-family: var(--f-display), sans-serif; font-weight: 500; font-size: clamp(1.375rem, 1rem + 1.4vw, 2.125rem); line-height: 1.2; }
.lenguaje-botanico .intro-columna p + p { color: var(--tinta); align-self: end; }
.lenguaje-botanico :is(.columna, .serv-lista) .grupo-nombre { font-family: var(--f-display), sans-serif; font-weight: 600; color: var(--acento); }
.lenguaje-botanico .col-fila .valor { color: var(--tinta); font-weight: 600; }
.lenguaje-botanico :is(.gal-mosaico, .gal-franja) { padding-inline: 0; padding-bottom: 0; }
.lenguaje-botanico :is(.gal-mosaico, .gal-franja) .t-seccion { margin-inline: var(--lado); }
.lenguaje-botanico .sobre-retrato { background: var(--superficie); }
.lenguaje-botanico .faq { background: var(--fondo); }
.lenguaje-botanico .faq-lista details { background: var(--superficie); border-radius: 0; margin-bottom: 4px; }
.lenguaje-botanico .reservar { background: var(--acento); color: var(--tinta-acento); }
.lenguaje-botanico .reservar .boton { background: var(--tinta-acento); color: var(--acento); }
.lenguaje-botanico .reservar .nota { color: inherit; opacity: .9; }
.lenguaje-botanico .contacto .celda { border-radius: 0; }
.anima .lenguaje-botanico .aparece { transform: translateX(-20px); transition-duration: 1s; }
.anima .lenguaje-botanico .aparece:nth-child(even) { transform: translateX(20px); }
.anima .lenguaje-botanico .aparece.visto { transform: none; }
@media (max-width: 900px) { .lenguaje-botanico .intro-columna { grid-template-columns: 1fr; } }
.lenguaje-botanico .columnas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* Belleza: cuidados antes y después de la cita, con marcas en forma de gota de esmalte. */
.sector-belleza .extra-doble { background: var(--superficie); }
.sector-belleza .doble ul { list-style: none; padding: 0; }
.sector-belleza .doble li { padding-left: 1.4em; position: relative; }
.sector-belleza .doble li::before { content: ""; position: absolute; left: 0; top: .5em; width: .55em; height: .7em; border-radius: 999px 999px 2px 2px; background: var(--acento); }
.sector-belleza .detalle { color: var(--suave); }

/* ---------- agenda de reservas (Modulos/Reservas) ---------- */
/* Hoja propia con los colores base de la web: la sección .reservar cambia de fondo según el lenguaje y aquí no puede depender de él. */
.agenda { margin-top: 32px; background: var(--fondo); color: var(--tinta); border-radius: var(--radio); padding: clamp(16px, 4vw, 32px); max-width: 60rem; }
.agenda a { color: inherit; }
.agenda-aviso { margin: 0; font-weight: 600; }
.agenda-proximo { margin: 0 0 .75em; font-weight: 600; } /* «Próximo hueco libre: …» (lo rellena reservas/sitio.js) */
.agenda-grupo { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.agenda-grupo:disabled { opacity: .45; }
.agenda-grupo legend { font-weight: 700; font-size: var(--s-texto); margin-bottom: 10px; padding: 0; }
.agenda-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.agenda-opcion { position: relative; }
.agenda-opcion input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.agenda-opcion label { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--tinta) 45%, transparent); border-radius: var(--boton-radio, 6px); cursor: pointer; font-variant-numeric: tabular-nums; }
.agenda-meta { display: block; font-size: var(--s-pequena); opacity: .8; }
.agenda-opcion input:checked + label { background: var(--acento); border-color: var(--acento); color: var(--tinta-acento); }
.agenda-opcion input:focus-visible + label { outline: 3px solid var(--acento); outline-offset: 2px; }
.agenda-opcion input:disabled + label { cursor: not-allowed; }
.agenda-mas { margin-top: 10px; background: none; border: 0; padding: 10px 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }
.agenda-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.agenda-datos legend { grid-column: 1 / -1; }
.agenda-datos .consentimiento { grid-column: 1 / -1; margin: 12px 0 0; }
.agenda-ayuda { font-size: var(--s-pequena); opacity: .8; margin-top: 4px; }
.agenda [aria-invalid="true"] { outline: 3px solid currentColor; outline-offset: 2px; }
.agenda-resumen { font-weight: 700; min-height: 1.5em; margin: 0 0 12px; }
.reservar .agenda .boton, .agenda .boton { background: var(--acento); color: var(--tinta-acento); border: 0; cursor: pointer; }
.agenda .boton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.agenda-estado { margin-top: 12px; font-weight: 600; min-height: 1.5em; }
.agenda-hecho h3 { margin: 0 0 8px; font-size: var(--s-subtitulo, 1.4rem); }
.agenda-hecho p { margin: 0 0 12px; max-width: 60ch; }
.agenda-enlace a { font-weight: 700; }
.agenda-hecho:focus { outline: none; }
@media (max-width: 640px) { .agenda-datos { grid-template-columns: 1fr; } .agenda-opcion { flex: 1 1 calc(33% - 8px); } .agenda-opcion label { align-items: center; text-align: center; } .agenda-lista .agenda-opcion { flex-basis: 100%; } .agenda-lista .agenda-opcion label { align-items: flex-start; text-align: left; } }
/* Crecer: cumpleaños (día y mes) y lista de espera */
.agenda-cumple { border: 0; padding: 0; margin: 12px 0 0; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agenda-cumple legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.agenda-cumple select { min-height: 44px; font: inherit; }
.agenda-espera { margin-top: 24px; }
.agenda-espera summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.agenda-espera form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.agenda-espera form > p:first-child, .agenda-espera .consentimiento, .agenda-espera .agenda-estado { grid-column: 1 / -1; }
@media (max-width: 640px) { .agenda-espera form { grid-template-columns: 1fr; } }
.agenda .consentimiento .agenda-ayuda { display: block; }
/* Extras por sector: vehículo o mascota junto a los datos (Modulos/Extras) */
.agenda-extra { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; margin: 12px 0 0; }
.agenda-extra legend { grid-column: 1 / -1; font-weight: 600; margin-bottom: 4px; padding: 0; }
.agenda-extra .consentimiento { grid-column: 1 / -1; margin: 4px 0 0; }
@media (max-width: 640px) { .agenda-extra { grid-template-columns: 1fr; } }
/* Calendario del día: rejilla de mes; solo se pulsan los días con hueco. */
.agenda-calendario { max-width: 420px; }
.agenda-cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; text-transform: capitalize; }
.agenda-cal-nav { min-width: 44px; min-height: 44px; font: inherit; font-size: 1.4em; background: none; border: 1px solid color-mix(in srgb, var(--tinta) 30%, transparent); border-radius: var(--boton-radio, 6px); color: inherit; cursor: pointer; }
.agenda-cal-nav:disabled { opacity: .3; cursor: default; }
.agenda-cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.agenda-cal-sem { font-size: .8em; opacity: .65; padding: 4px 0; }
.agenda-cal-dia { position: relative; }
.agenda-cal-dia input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.agenda-cal-dia label { display: grid; place-items: center; aspect-ratio: 1; min-height: 40px; border-radius: 50%; font-variant-numeric: tabular-nums; cursor: pointer; border: 1px solid color-mix(in srgb, var(--acento) 55%, transparent); font-weight: 600; transition: background .15s, color .15s; }
.agenda-cal-dia input:disabled + label { border-color: transparent; font-weight: 400; opacity: .35; cursor: default; }
.agenda-cal-dia input:not(:disabled):hover + label { background: color-mix(in srgb, var(--acento) 15%, transparent); }
.agenda-cal-dia input:checked + label { background: var(--acento); border-color: var(--acento); color: var(--tinta-acento); }
.agenda-cal-dia input:focus-visible + label { outline: 3px solid var(--acento); outline-offset: 2px; }
.agenda-opcion input:disabled + label { opacity: .4; }