/* ===========================================================================
   SITIO PÚBLICO — Hacienda San Vicente
   ---------------------------------------------------------------------------
   La otra cara del sistema. Aquí manda el aire: el huésped viene a
   emocionarse, no a despachar. Escala grande, serif en los encabezados,
   fotografía a toda pantalla.

   Los tokens salen de tema.css, que genera el admin. Ni un color escrito a
   mano.
   =========================================================================== */

:root{
  /* Escala editorial: nada que ver con la del panel */
  --p-xs:12px; --p-sm:14px; --p-base:16px; --p-lg:19px; --p-xl:24px;
  --p-2xl:34px;
  /* ⚠ EL SUELO ERA DEMASIADO ALTO Y CORTABA LA PALABRA. A 390px el `clamp`
     caía en su mínimo —2.2rem = 35.2px— y «CELEBRACIONES» con su tracking de
     .16em pedía **352px de los 342 que hay**: la última letra quedaba fuera, y
     como `.a-hero` lleva `overflow:hidden`, cortada. Medido el 2026-09-08.

     Y no es un caso raro que se pueda ignorar: los nombres de área **se
     escriben desde el panel**, así que mañana puede haber uno más largo. El
     suelo baja a 1.75rem (28px), donde «CELEBRACIONES» ocupa 280 de 342 —un
     20% de margen para el que venga— y el techo de 3.6 a 2.9rem, porque a
     3.6rem competía con el nombre de la casa en la portada (56,2px). */
  --p-3xl:clamp(1.75rem,4.4vw,2.9rem);
  --p-1:4px;  --p-2:8px;  --p-3:16px; --p-4:24px; --p-5:32px;
  --p-6:48px; --p-7:64px; --p-8:96px; --p-9:128px;
  /* El alto de la barra fija, para que el contenido pueda reservárselo. */
  --p-barra-alto:74px;
  /* ⚠ EL ALTO DE UN CAMPO, UNA VEZ. Estaba escrito `height:var(--p-campo)` en DOCE
     reglas con doce nombres distintos —el buscador de la portada, la barra de
     reservar, los campos del checkout, el calendario, el de depositar…— y
     cuando el §3 bajó el techo a 44 no había forma de bajarlo sin cazarlas una
     a una. Ahora es un número y se cambia en un sitio.

     44 y no 48: el objetivo táctil mínimo son 44px y con eso se cumple. Y el
     zoom de iOS al enfocar **no depende del alto, depende de la LETRA**: sigue
     en `--p-base` (16px), que es lo que lo evita. El comentario viejo mezclaba
     las dos cosas y por eso nadie se atrevía a tocarlo. */
  --p-campo:44px;
  /* ⚠ LA SOMBRA DEL SITIO. Tres reglas pedían una sombra «media» que **no
     estaba definida en ninguna hoja del proyecto** —comprobado el 2026-09-08
     recorriendo las dieciocho—, así que las tarjetas de la carta y las de
     eventos se levantaban al pasar el cursor SIN SOMBRA: la mitad del gesto no
     ocurría, y en el inspector no se ve, porque la declaración entera se cae.
     Y no vale la del kit: el kit es del panel y aquí no se carga. Elevación
     casi imperceptible, como manda el §3. */
  --p-sombra:0 1px 2px rgba(36,36,33,.05), 0 12px 30px -14px rgba(36,36,33,.18);
  --p-borde:color-mix(in srgb,var(--hsv-tinta) 12%,transparent);
  --p-ancho:1200px;

  /* La curva y la duración las definía kit.css, que es del panel y aquí no se
     carga. Sin ellas, «animation: x .8s var(--curva)» es una declaración
     inválida y el navegador la tira entera: el nombre de la portada no
     aparecía nunca. Una sola curva y una sola duración en todo el sistema. */
  --dur:var(--dur-base,240ms);
  --curva:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{ box-sizing:border-box }
*{ margin:0 }
body{
  font-family:var(--fuente-titular);
  font-size:var(--p-base); line-height:1.6;
  color:var(--hsv-tinta); background:var(--hsv-fondo);
  -webkit-font-smoothing:antialiased;
}
svg{ display:block }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0 }
:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:3px }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } }

.p-ancho{ max-width:var(--p-ancho); margin:0 auto; padding:0 var(--p-4) }
.p-saltar{ position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--hsv-tinta); color:#fff; padding:12px 20px; font-size:var(--p-sm) }
.p-saltar:focus{ left:8px }

/* ============================================================== CABECERA == */
.p-barra{
  position:fixed; inset:0 0 auto 0; z-index:90;
  background:color-mix(in srgb,var(--hsv-fondo) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--curva), background var(--dur) var(--curva);
}
/* Sobre la portada va invisible; al bajar, aparece */
.p-barra--suelta{ background:none; backdrop-filter:none; color:#fff }
.p-barra--posada{ border-bottom-color:var(--p-borde) }
.p-barra__in{ display:flex; align-items:center; gap:var(--p-3);
  min-height:var(--p-barra-alto); max-width:var(--p-ancho); margin:0 auto;
  padding:0 var(--p-4) }

/* ⚠ LA BARRA SE RESERVA SU HUECO. Es `position:fixed` y no ocupaba sitio, así
   que en las doce páginas sin portada el titular arrancaba a 48px y la barra
   llegaba hasta 75: **27px de la primera línea tapados**, medido a 390px el
   2026-09-08. Las páginas con portada llevan `--suelta` y ahí no se reserva
   nada, porque la fotografía tiene que empezar arriba del todo. */
main{ padding-top:var(--p-barra-alto) }
.p-barra--suelta ~ main{ padding-top:0 }
@media (max-width:760px){
  .p-barra__in{ min-height:60px }
  main{ padding-top:60px }
}

.p-logo{ display:flex; align-items:center; gap:10px; flex:none }
.p-logo img{ height:44px; width:auto; transition:filter var(--dur) var(--curva) }
.p-barra--suelta .p-logo img{ filter:brightness(0) invert(1) }

.p-nav{ display:flex; gap:var(--p-4); margin-left:auto; align-items:center }
.p-nav a{
  position:relative; font-size:var(--p-xs); letter-spacing:.14em;
  text-transform:uppercase; font-weight:500; padding:6px 0;
  transition:color var(--dur) var(--curva);
}
/* El filete crece desde el centro: lo único que se mueve al pasar el cursor */
.p-nav a::after{
  content:''; position:absolute; left:50%; right:50%; bottom:0; height:1px;
  background:currentColor; opacity:.55;
  transition:left var(--dur) var(--curva), right var(--dur) var(--curva);
}
.p-nav a:hover::after, .p-nav a[aria-current]::after{ left:0; right:0 }

/* La campana de reservar: sin caja, con su nombre al pasar */
.p-campana{ position:relative; flex:none; width:44px; height:44px;
  display:grid; place-items:center; margin-left:var(--p-2) }
.p-campana svg{ width:26px; height:26px; stroke-width:1.9;
  transition:transform var(--dur) var(--curva), color var(--dur) var(--curva) }
.p-campana:hover svg{ color:var(--hsv-acento); animation:repica .7s var(--curva) }
@keyframes repica{
  0%,100%{ transform:rotate(0) } 20%{ transform:rotate(-13deg) }
  45%{ transform:rotate(10deg) } 70%{ transform:rotate(-5deg) }
}
.p-campana::after{
  content:attr(data-txt); position:absolute; top:calc(100% + 6px); left:50%;
  transform:translateX(-50%) translateY(-4px);
  background:var(--hsv-tinta); color:#fff; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 10px; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.p-campana:hover::after{ opacity:1; transform:translateX(-50%) }

/* ══════════ EL GRUPO «LA HACIENDA» EN LA BARRA ═════════════════════════════
   Se pinta como una entrada más —misma letra, mismo filete al pasar— y solo se
   distingue por la puntita. Si pareciera un botón, la barra volvería a tener
   dos pesos distintos, que es de lo que se venía. */
.p-grupo{ position:relative }
.p-grupo > summary{
  list-style:none; cursor:pointer; position:relative;
  font-size:var(--p-xs); letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; padding:6px 0;
  display:inline-flex; align-items:center; gap:7px;
  transition:color var(--dur) var(--curva);
}
.p-grupo > summary::-webkit-details-marker{ display:none }
/* La puntita, dibujada: el triángulo del sistema es distinto en cada máquina. */
.p-grupo > summary::before{
  content:''; order:2; width:6px; height:6px; margin-top:-3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform var(--dur) var(--curva);
}
.p-grupo[open] > summary::before{ transform:rotate(-135deg); margin-top:2px }
/* El mismo filete que las demás entradas, o el grupo se leería como otra cosa */
.p-grupo > summary::after{
  content:''; position:absolute; left:50%; right:50%; bottom:0; height:1px;
  background:currentColor; opacity:.55;
  transition:left var(--dur) var(--curva), right var(--dur) var(--curva);
}
.p-grupo > summary:hover::after,
.p-grupo > summary[aria-current]::after{ left:0; right:0 }
.p-grupo__caja{
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(100% + 14px); z-index:95; min-width:11rem;
  background:var(--hsv-tinta); color:#fff; padding:var(--p-2);
  animation:menuSale var(--dur) var(--curva) both;
}
.p-grupo__caja a{
  display:block; padding:9px var(--p-3); font-size:var(--p-sm);
  letter-spacing:0; text-transform:none; color:rgba(255,255,255,.86);
  transition:color var(--dur) var(--curva), background var(--dur) var(--curva);
}
.p-grupo__caja a::after{ content:none }
.p-grupo__caja a:hover,
.p-grupo__caja a[aria-current]{ color:#fff; background:rgba(255,255,255,.09) }

/* ⚠ EL TELÉFONO NO ES UNA SECCIÓN. Iba en la misma fila, con la misma letra y
   el mismo peso que «Habitaciones» o «Restaurante», así que se leía como una
   entrada más del menú — un número de teléfono haciendo de sitio al que ir.
   Se separa con un filete y baja de peso: sigue a un toque, deja de competir. */
.p-tel{ font-size:var(--p-xs); letter-spacing:.06em; font-weight:400;
  margin-left:var(--p-2); padding-left:var(--p-3);
  border-left:1px solid color-mix(in srgb,currentColor 28%,transparent);
  opacity:.78; transition:opacity var(--dur) var(--curva) }
.p-tel:hover{ opacity:1 }

/* ══════════ EL MENÚ DEL TELÉFONO ═══════════════════════════════════════════
   ⚠ ESTA REGLA ESCONDÍA LA NAVEGACIÓN Y NO PONÍA NADA EN SU SITIO. Por debajo
   de 900px `.p-nav` y `.p-tel` desaparecían y el sitio se quedaba sin menú: no
   había hamburguesa, ni cajón, ni guion que lo abriera —comprobado el
   2026-09-08: `#i-menu` estaba en el sprite sin que lo usara nadie—. La única
   lista de secciones que quedaba en un teléfono era el pie, de 1.037px, y es
   la que el dueño fotografió llamándola «menú largo sin sentido profesional».

   Y el corte baja de 900 a 760: entre 760 y 900 el menú cabe de sobra, y ahí
   se estaba escondiendo por nada.
   ═══════════════════════════════════════════════════════════════════════════ */
.p-menu{ display:none; flex:none; margin-left:auto; position:relative }
.p-menu > summary{
  list-style:none; cursor:pointer; width:44px; height:44px;
  display:grid; place-items:center; border-radius:0;
}
.p-menu > summary::-webkit-details-marker{ display:none }
.p-menu > summary svg{ width:24px; height:24px; stroke-width:1.9 }
.p-menu__caja{
  position:absolute; right:0; top:calc(100% + 10px); z-index:95;
  min-width:min(15rem,calc(100vw - var(--p-4) * 2));
  background:var(--hsv-tinta); color:#fff;
  padding:var(--p-2); display:grid;
  animation:menuSale var(--dur) var(--curva) both;
}
@keyframes menuSale{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }
.p-menu__caja a{
  display:block; padding:11px var(--p-3); font-size:var(--p-sm);
  color:rgba(255,255,255,.86);
  transition:color var(--dur) var(--curva), background var(--dur) var(--curva);
}
.p-menu__caja a:hover, .p-menu__caja a[aria-current]{ color:#fff; background:rgba(255,255,255,.09) }
/* El teléfono, separado: no es un sitio de la hacienda, es cómo se llega. */
.p-menu__tel{
  margin-top:var(--p-2); padding-top:var(--p-3) !important;
  border-top:1px solid rgba(255,255,255,.16);
  letter-spacing:.08em; font-weight:500;
}
/* Sobre la portada la barra va en blanco, y el icono con ella. */
.p-barra--suelta .p-menu > summary{ color:#fff }

@media (max-width:760px){
  .p-nav, .p-tel{ display:none }
  .p-menu{ display:block }
}

/* ================================================================= BOTONES */
/* ⚠ 44, NO 48. El objetivo táctil mínimo son 44px y con eso se cumple; 48
   era altura de sobra en cada botón del sitio. Dueño, 2026-09-08: «más
   pequeños, discretos, y que todo se vea profesional». */
.p-btn{
  display:inline-flex; align-items:center; gap:12px; height:44px; padding:0 var(--p-5);
  border-radius:0; font-size:var(--p-xs); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  transition:background var(--dur) var(--curva), color var(--dur) var(--curva),
             border-color var(--dur) var(--curva);
}
.p-btn--solido{ background:var(--hsv-acento); color:#fff }
.p-btn--solido:hover{ background:var(--hsv-acento-hover) }
.p-btn--linea{ border:1px solid var(--p-borde) }
.p-btn--linea:hover{ border-color:var(--hsv-tinta) }
.p-btn--claro{ border:1px solid rgba(255,255,255,.45); color:#fff }
.p-btn--claro:hover{ background:rgba(255,255,255,.14); border-color:#fff }
/* El más usado: solo texto y flecha */
.p-enlace{ display:inline-flex; align-items:center; gap:11px;
  font-family:var(--fuente-editorial); font-style:italic; font-size:var(--p-lg) }
.p-flecha{ position:relative; display:block; flex:none; width:22px; height:1px;
  background:currentColor; transition:transform var(--dur) var(--curva) }
.p-flecha::after{ content:''; position:absolute; right:0; top:-4px; width:8px; height:8px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg) }
.p-btn:hover .p-flecha, .p-enlace:hover .p-flecha{ transform:translateX(7px) }
.p-centro{ text-align:center; margin:0 }

/* ============================================== ENCABEZADO DE SECCIÓN ===== */
.p-seccion{ padding:var(--p-seccion-y) 0 }
.p-seccion--corta{ padding:var(--p-seccion-y-corta) 0 }
/* ⚠ EL AIRE DE ESCRITORIO NO CABE EN UN TELÉFONO. `--seccion-y` vale 128px y
   se aplicaba igual a 1440 que a 375: en una pantalla de 812 de alto, cada
   sección se comía 256px —casi un tercio— en blanco, y una página de cuatro
   secciones se volvía un desplazamiento que no termina (§8-quinquies). No se
   escribe un número nuevo: se escala el que el dueño edita desde el panel, así
   que si mañana lo sube a 160 el teléfono sigue proporcionado. */
:root{
  --p-seccion-y:var(--seccion-y,128px);
  --p-seccion-y-corta:var(--p-8);
}
@media (max-width:760px){
  :root{
    --p-seccion-y:calc(var(--seccion-y,128px) * .5);
    --p-seccion-y-corta:var(--p-6);
  }
}
.p-titulo{ text-align:center; margin-bottom:var(--p-6) }
.p-titulo h1,
.p-titulo h2{
  font-family:var(--fuente-editorial); font-weight:400; text-transform:uppercase;
  /* ⚠ NO PUEDE SER UN TAMAÑO FIJO. A 34px con .24em de tracking, una palabra
     larga no cabe en un teléfono y TAMPOCO PUEDE PARTIRSE —es una sola
     palabra—: «CELEBRACIONES» medía 378px dentro de un hueco de 327 y sacaba
     la página entera de sus bordes. No se veía porque hasta hoy ningún titular
     de sección pasaba de doce letras. El tope sigue siendo el mismo; lo que
     cambia es que en pantalla estrecha se encoge. */
  font-size:clamp(1.35rem, 6.2vw, var(--p-2xl));
  letter-spacing:.24em; text-indent:.24em; line-height:1.2;
}
.p-titulo p{
  font-family:var(--fuente-editorial); font-style:italic; font-size:var(--p-lg);
  color:color-mix(in srgb,var(--hsv-tinta) 70%,transparent);
  max-width:52ch; margin:var(--p-3) auto 0;
}
/* La entradilla de una pantalla de trámite: no vende, explica qué hacer. */
.p-entrada{
  max-width:58ch; margin:0 auto var(--p-5); font-size:var(--p-lg);
  color:color-mix(in srgb,var(--hsv-tinta) 72%,transparent);
}
.p-titulo + .p-entrada{ margin-top:calc(var(--p-6) * -0.5) }

/* ==================================================== CAMPOS DE FORMULARIO =
   ⚠ SE LLAMAN «p-», Y ESE ES EL ARREGLO. Estas piezas existían solo en
   `kit.css` con los nombres `k-campo`, `k-label`, `k-input`, `k-ayuda`,
   `k-opcional` y `k-recado` — y `kit.css` es la hoja del PANEL, que el sitio
   público no carga. El formulario de comprar una entrada usaba los seis y
   salía con los campos de fábrica del navegador dentro de una tarjeta
   cuidada; los recados del salón salían como párrafos sueltos.

   No se arregla cargando el kit aquí: la escala del panel es de trabajar
   (36px, 12.5px de letra) y la de aquí es editorial (48px, 16px). Son dos
   diseños distintos a propósito (§1-bis), así que llevan dos nombres
   distintos. `k-` es del panel; `p-` es del público. Cuando un nombre cruza
   la frontera, no da error: deja de existir en silencio.
   ========================================================================= */
.p-campo{ display:flex; flex-direction:column; gap:var(--p-2); margin:0 }
.p-label{
  font-size:var(--p-xs); letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent);
}
.p-input{
  font-family:inherit; font-size:var(--p-base); color:var(--hsv-tinta);
  background:var(--hsv-superficie);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  /* 48px: el objetivo táctil no baja de 44, y por debajo de 16px de letra
     iOS hace zoom al enfocar. */
  height:var(--p-campo); width:100%; padding:0 var(--p-3);
  transition:border-color var(--dur) var(--curva);
}
textarea.p-input{ height:auto; padding:var(--p-3); line-height:1.5 }
.p-input:hover{ border-color:color-mix(in srgb,var(--hsv-tinta) 26%,transparent) }
.p-input:focus-visible{
  outline:2px solid var(--hsv-acento); outline-offset:2px; border-color:transparent;
}
.p-ayuda{
  margin:0; font-size:var(--p-xs); line-height:1.5;
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent);
}
/* «opcional» acompaña a la etiqueta y no compite con ella: sin versalitas y
   sin el tracking, que es lo que hace que se lea como un rótulo más. */
.p-opcional{
  margin-left:6px; letter-spacing:0; text-transform:none; font-weight:400;
  color:color-mix(in srgb,var(--hsv-tinta) 42%,transparent);
}

/* ── el recado: algo que hay que saber antes de seguir ─────────────────── */
.p-recado{
  display:flex; gap:12px; align-items:flex-start; margin:var(--p-4) 0;
  padding:var(--p-3) var(--p-4); border-radius:var(--radio-tarjeta);
  background:var(--hsv-superficie-alt); font-size:var(--p-sm); line-height:1.55;
}
.p-recado .ico{ width:18px; height:18px; flex:none; margin-top:2px }
.p-recado b{ font-weight:600 }
.p-recado a{ color:var(--hsv-acento); font-weight:600 }
.p-recado--ojo{ background:var(--hsv-acento-suave) }
.p-recado--bien{ background:var(--e-exito-suave); color:var(--e-exito) }
.p-recado--atencion{ background:var(--e-atencion-suave); color:var(--e-atencion) }
.p-recado--bien a,
.p-recado--atencion a{ color:inherit; text-decoration:underline }

/* ==================================================================== PIE = */
/* ══════════ EL PIE ═════════════════════════════════════════════════════════
   ⚠ MEDÍA 1.037px EN UNA PANTALLA DE 844. Medido el 2026-09-08 a 390px: una
   pantalla y cuarto, y el 40% de toda la página de contacto, para quince
   enlaces y una dirección. El dueño lo señaló con el dedo: «usas más de la
   pantalla completa para colocar unos datos».

   De dónde salían: 96px de relleno arriba, cuatro bloques apilados en UNA
   columna con 48px de hueco entre cada uno, 64px más antes del cierre, y cada
   enlace en su propio renglón de 342px de ancho para decir «Piscina», que mide
   55. El contenido real eran ~380px; el resto, aire.

   Lo que cambia, y la regla detrás de cada cosa:
   · El relleno baja de 96 a 48 (a 32 en teléfono). 96px era el mayor salto de
     la escala usado como relleno normal.
   · Los huecos bajan de 48 a 24/32, y el margen final de 64 a 32.
   · **Dos columnas desde 380px.** La regla: si el elemento más ancho de una
     lista ocupa menos de la mitad del ancho disponible, la lista está mal
     puesta. «Piscina» ocupa 55 de 342.
   · El logo de 64 a 44 —el mismo de la barra— y la frase de 16 a 14.
   ═══════════════════════════════════════════════════════════════════════════ */
.p-pie{ background:var(--hsv-tinta); color:#fff; padding:var(--p-6) 0 var(--p-4) }
.p-pie__cols{ display:grid; gap:var(--p-4) var(--p-5); margin-bottom:var(--p-5);
  grid-template-columns:repeat(2,minmax(0,1fr)) }
/* El bloque de marca lleva frase, no etiquetas: ocupa el renglón entero. */
.p-pie__cols > :first-child{ grid-column:1 / -1 }
@media (min-width:760px){
  /* `2fr` y no `1.4fr`: con 1.4 el bloque de la frase se llevaba 181px y las
     listas de una palabra 129 cada una — y «Reservar en línea» pide ~119. */
  .p-pie__cols{ grid-template-columns:2fr 1fr 1fr 1fr }
  .p-pie__cols > :first-child{ grid-column:auto }
}
.p-pie h3{ font-size:var(--p-xs); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.5); font-weight:600; margin-bottom:var(--p-2) }
.p-pie a{ display:block; font-size:var(--p-sm); color:rgba(255,255,255,.82);
  padding:4px 0; transition:color var(--dur) var(--curva) }
.p-pie a:hover{ color:#fff }
.p-pie__logo{ height:44px; width:auto; filter:brightness(0) invert(1); opacity:.92;
  margin-bottom:var(--p-2) }
.p-pie__frase{ font-family:var(--fuente-editorial); font-style:italic;
  font-size:var(--p-sm); color:rgba(255,255,255,.6); max-width:34ch }
.p-pie__fin{ display:flex; flex-wrap:wrap; gap:var(--p-2) var(--p-3);
  align-items:center;
  justify-content:space-between; padding-top:var(--p-3);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:var(--p-xs); color:rgba(255,255,255,.45) }
/* Términos y Privacidad van en línea con el copyright, no en su renglón cada
   uno. Estaba resuelto con `style="display:inline"` en la vista; la regla vive
   aquí, que es donde se puede encontrar. */
.p-pie__fin a{ display:inline; padding:0 }
/* Copyright a la izquierda, los legales a su lado, y las redes al otro
   extremo. Con `space-between` y cuatro hijos sueltos, al partirse el renglón
   los dos legales acababan en esquinas opuestas. */
.p-pie__fin{ justify-content:flex-start }
.p-pie__legal{ display:inline-flex; gap:var(--p-3) }
.p-pie__fin .p-redes{ margin-left:auto }

/* El croquis no se dibuja por debajo de 760 y lo que queda es la misma lista
   de áreas que la sección de al lado. Ver el porqué en portada.php. */
@media (max-width:760px){ .h-recorrido{ display:none } }

@media (max-width:760px){
  .p-pie{ padding:var(--p-5) 0 var(--p-3) }
  .p-pie__cols{ gap:var(--p-4) }
}
.p-redes{ display:flex; gap:var(--p-3) }
.p-redes a{ padding:0 }
.p-redes svg{ width:19px; height:19px; opacity:.6;
  transition:opacity var(--dur) var(--curva), color var(--dur) var(--curva) }
.p-redes a:hover svg{ opacity:1; color:var(--hsv-detalle) }

/* ===========================================================================
   PÁGINA DE ÁREA
   =========================================================================== */
.a-hero{ position:relative; min-height:78vh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--hsv-tinta) }
.a-hero__fondo{ position:absolute; inset:0 }
.a-hero__fondo img{ width:100%; height:124%; object-fit:cover;
  will-change:transform }
.a-hero__fondo::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(36,36,33,.82) 6%,rgba(36,36,33,.12) 62%,rgba(36,36,33,.42)) }
.a-hero__in{ position:relative; z-index:2; width:100%; color:#fff;
  padding-bottom:var(--p-7) }
.a-hero__eyebrow{ font-size:var(--p-xs); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-bottom:var(--p-3) }
.a-hero h1{ font-family:var(--fuente-editorial); font-weight:400;
  text-transform:uppercase; font-size:var(--p-3xl); letter-spacing:.16em;
  text-indent:.16em; line-height:1.05 }
/* ⚠ EN PANTALLA ESTRECHA EL TRACKING CEDE ANTES QUE LA LETRA. Los nombres de
   área **se escriben desde el panel**, así que el margen no puede ser el justo:
   el siguiente nombre puede ser más largo y cortarse contra el
   `overflow:hidden` del hero, que es lo que le pasaba a «CELEBRACIONES».

   Lo que sobra no es el tamaño de la letra —que es lo que vende— sino el aire
   ENTRE letras: a .16em, trece caracteres cargan 58px solo de tracking; a .10em
   son 36. Medido a 360px con un `Range` sobre el texto real: **253px de los
   312 disponibles, 19% de margen**, contra el 12% que daba a .16em.
   El `text-indent` va con él, o el bloque queda descentrado.

   ⚠ Y de paso, la trampa de medirlo: `scrollWidth` en un bloque que NO desborda
   devuelve el ancho de la caja, así que da «312 de 312» y parece que va al
   límite. El ancho real de un texto se mide con un `Range`, no con el
   elemento. */
@media (max-width:560px){
  .a-hero h1{ letter-spacing:.10em; text-indent:.10em }
}
.a-hero__frase{ font-family:var(--fuente-editorial); font-style:italic;
  font-size:var(--p-xl); color:rgba(255,255,255,.9); max-width:26ch;
  margin-top:var(--p-3) }

/* La banda de fotografías, a todo el ancho de la ventana */
.a-banda{ width:100vw; margin-left:calc(50% - 50vw); display:flex; gap:2px }
.a-banda figure{ flex:1; min-width:0; height:clamp(240px,38vw,440px);
  overflow:hidden; position:relative;
  transition:flex var(--dur) var(--curva) }
.a-banda img{ width:100%; height:128%; object-fit:cover;
  filter:saturate(.72); transition:filter var(--dur) var(--curva) }
/* Al señalar una, se abre y recupera el color */
.a-banda figure:hover{ flex:1.6 }
.a-banda figure:hover img{ filter:saturate(1) }
@media (max-width:760px){
  .a-banda figure:nth-child(n+4){ display:none }
  .a-banda figure:hover{ flex:1 }
}

/* Lo que hay aquí, en iconos grandes */
.a-tiene{ display:grid; gap:var(--p-4);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
.a-cosa{ text-align:center; padding:var(--p-3) }
.a-cosa svg{ width:30px; height:30px; margin:0 auto var(--p-2);
  color:var(--hsv-acento); stroke-width:1.6;
  transition:transform var(--dur) var(--curva) }
.a-cosa:hover svg{ transform:translateY(-3px) scale(1.08) }
.a-cosa b{ display:block; font-size:var(--p-sm); font-weight:500 }
.a-cosa i{ display:block; font-style:normal; font-size:var(--p-xs);
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent); margin-top:3px }

/* El recorrido, en su forma grande */
.p-recorrido{ background:var(--hsv-superficie-alt) }

/* ===========================================================================
   PORTADA
   =========================================================================== */
.h-hero{ position:relative; height:100vh; min-height:560px; display:grid;
  place-items:center; overflow:hidden; background:var(--hsv-tinta) }
.h-buscar__caja--carta{ display:flex; justify-content:flex-end }
.h-visual-panoramica{ height:clamp(320px,46vw,560px); overflow:hidden }
.h-visual-panoramica img{ width:100%; height:100%; object-fit:cover }
.h-bloque-doble{ background:var(--hsv-superficie-alt) }

/* El slider: fundido cruzado, nunca deslizamiento lateral —eso es de tienda—
   y cada lámina con su zoom lentísimo mientras está a la vista. */
.h-slider{ position:absolute; inset:0 }
.h-slider img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s var(--curva);
}
.h-slider img.on{ opacity:1; animation:respiraLenta 9s linear forwards }
@keyframes respiraLenta{ from{ transform:scale(1.02) } to{ transform:scale(1.13) } }
/* El velo tiene que ganarle a la foto más clara del slider: si se calibra con
   la aérea, sobre la del restaurante el nombre desaparece. Se refuerza donde
   va el texto y se deja respirar a la fotografía en los bordes. */
.h-slider::after{ content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 74% 56% at 50% 48%,rgba(36,36,33,.62),transparent 76%),
    linear-gradient(to bottom,rgba(36,36,33,.50),rgba(36,36,33,.32) 42%,rgba(36,36,33,.70)) }

.h-hero__in{ position:relative; z-index:3; text-align:center; color:#fff;
  padding:0 var(--p-4) }
.h-saludo{ font-family:var(--fuente-editorial); font-style:italic;
  font-size:var(--p-lg); color:rgba(255,255,255,.94);
  text-shadow:0 1px 12px rgba(36,36,33,.5); opacity:0;
  animation:asoma 1s var(--curva) .3s forwards }
@keyframes asoma{ to{ opacity:1 } }

.h-marca{
  /* «SAN VICENTE» son once letras: a 11.4vw se salía por los lados. La medida
     la manda la línea más larga, no el gusto por lo grande.
     Y baja de 9vw a 3.9vw desde que el widget de reserva se monta sobre el
     borde de la portada: la medida sale del mockup que aprobó el cliente,
     donde «SAN VICENTE» ocupa poco más de un cuarto del ancho. A 9vw el
     nombre llegaba casi a los bordes y se comía la fotografía, que es la que
     vende. El nombre presenta, no llena.

     A 375px «SAN VICENTE» mide 283px de los 331 disponibles, centrado, con
     la fuente propia y con la de respaldo —van en «nowrap», así que no puede
     quedar al azar—. */
  font-size:clamp(1.9rem,3.9vw,4.2rem); font-weight:700; line-height:.98;
  letter-spacing:.02em; margin-top:var(--p-2); position:relative;
  text-shadow:0 2px 30px rgba(36,36,33,.42);
}
.h-marca span{ display:block; white-space:nowrap }
/* Cada letra se revela con su desenfoque resolviéndose */
.h-marca i{
  display:inline-block; font-style:normal; opacity:0;
  filter:blur(14px); transform:translateY(18px);
  animation:revelaLetra .8s var(--curva) forwards;
}
@keyframes revelaLetra{ to{ opacity:1; filter:blur(0); transform:none } }
.h-marca u{ display:inline-block; width:.28em; text-decoration:none }

/* La campana cruza el nombre y las letras se encienden a su paso */
.h-campana{
  position:absolute; top:50%; left:-8%; z-index:4; width:clamp(34px,4.6vw,54px);
  color:#fff; opacity:0; pointer-events:none;
  animation:cruza 2.6s var(--curva) .25s forwards;
}
@keyframes cruza{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.7) }
  12%  { opacity:.95 }
  85%  { opacity:.95 }
  100% { opacity:0; transform:translate(calc(116vw),-50%) scale(.7) }
}

/* Y al terminar, un brillo recorre el nombre en bucle lento */
.h-marca::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,
    color-mix(in srgb,var(--hsv-detalle) 70%,transparent) 50%,transparent 58%);
  background-size:260% 100%; background-position:180% 0;
  mix-blend-mode:overlay; opacity:0;
  animation:brilla 7s linear 3.4s infinite;
}
@keyframes brilla{
  0%  { background-position:180% 0; opacity:0 }
  8%  { opacity:.85 }
  38% { background-position:-80% 0; opacity:0 }
  100%{ background-position:-80% 0; opacity:0 }
}

/* Indicadores: líneas que se llenan, no puntos. La activa es más larga. */
.h-marcas{ position:absolute; left:50%; bottom:var(--p-5); z-index:4;
  transform:translateX(-50%); display:flex; gap:10px; align-items:center }
.h-marcas button{ position:relative; width:26px; height:2px;
  background:rgba(255,255,255,.32); overflow:hidden;
  transition:width var(--dur) var(--curva) }
.h-marcas button.on{ width:52px }
.h-marcas button i{ position:absolute; inset:0 auto 0 0; width:0; background:#fff }
.h-marcas button.on i{ animation:llena 6.5s linear forwards }
@keyframes llena{ to{ width:100% } }

/* La flecha de bajar: lo único que dice que hay más abajo */
.h-baja{ position:absolute; left:50%; bottom:var(--p-6); z-index:4;
  transform:translateX(-50%); color:rgba(255,255,255,.7);
  animation:respiraBaja 2.4s ease-in-out infinite }
@keyframes respiraBaja{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,7px) } }

@media (prefers-reduced-motion:reduce){
  .h-slider img.on{ animation:none }
  .h-marca i{ opacity:1; filter:none; transform:none; animation:none }
  .h-campana, .h-marca::after, .h-baja{ animation:none; opacity:0 }
  .h-marcas button.on i{ width:100%; animation:none }
}

/* ---------------------------------------------------- tarjetas de área --- */
.h-areas{ display:grid; gap:2px }
@media (min-width:700px){ .h-areas{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .h-areas{ grid-template-columns:repeat(4,1fr) } }
.h-area{ position:relative; height:clamp(320px,42vw,460px); overflow:hidden;
  display:flex; align-items:flex-end; color:#fff }
.h-area img{ position:absolute; inset:0; width:100%; height:124%; object-fit:cover;
  transition:filter var(--dur) var(--curva) }
.h-area::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(36,36,33,.80) 10%,rgba(36,36,33,.06) 62%);
  transition:background var(--dur) var(--curva) }
.h-area:hover::after{ background:linear-gradient(to top,rgba(36,36,33,.86) 14%,rgba(166,83,52,.24) 70%) }
.h-area__in{ position:relative; z-index:2; padding:var(--p-4); width:100% }
.h-area h3{ font-family:var(--fuente-editorial); font-weight:400;
  text-transform:uppercase; font-size:var(--p-xl); letter-spacing:.18em;
  text-indent:.18em }
.h-area p{ font-family:var(--fuente-editorial); font-style:italic;
  font-size:var(--p-sm); color:rgba(255,255,255,.8); margin-top:6px;
  max-width:26ch }
.h-area__ir{ display:flex; align-items:center; gap:9px; margin-top:var(--p-3);
  font-size:var(--p-xs); letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transform:translateY(6px);
  transition:opacity var(--dur) var(--curva), transform var(--dur) var(--curva) }
.h-area:hover .h-area__ir{ opacity:1; transform:none }

/* ===========================================================================
   LOS BLOQUES QUE VENDEN — portada (Fase 4.9, 2026-08-26)
   ---------------------------------------------------------------------------
   El croquis y las áreas dicen DÓNDE está cada cosa. Estos tres dicen QUÉ se
   vende, que es lo que le faltaba a la portada frente al mockup aprobado.
   =========================================================================== */

/* ---- el rótulo pequeño sobre un titular ---------------------------------- */
.h-encima{
  font-size:var(--p-xs); letter-spacing:.2em; text-transform:uppercase;
  font-weight:500; color:var(--hsv-acento); margin-bottom:var(--p-2);
}

/* ---- el mosaico del restaurante -----------------------------------------
   ⚠ ASIMÉTRICO A PROPÓSITO: una grande y cuatro alrededor. Cinco cuadros del
   mismo tamaño se leen como un catálogo de producto; con una que manda, se lee
   como una mesa puesta. Y es lo que sustituyó a los tres párrafos numerados
   que el dueño paró: en una portada, lo que levanta a alguien de la silla es
   ver la comida, no leer sobre ella. */
.h-mosaico{ display:grid; gap:4px; grid-template-columns:repeat(2,1fr) }
/* En el teléfono, la grande toma el ancho entero y los cuatro platos quedan en
   un cuadro de dos por dos. Con las cinco iguales en dos columnas, la quinta se
   queda sola en su renglón y al lado queda un hueco que parece un fallo. */
@media (max-width:759px){ .h-mosaico figure:first-child{ grid-column:span 2 } }
@media (min-width:760px){
  .h-mosaico{ grid-template-columns:repeat(4,1fr) }
  /* La primera ocupa dos por dos: con cuatro columnas, las otras cuatro
     completan la rejilla exacta y no queda ningún hueco. */
  .h-mosaico figure:first-child{ grid-column:span 2; grid-row:span 2 }
}
.h-mosaico figure{ position:relative; overflow:hidden; aspect-ratio:1;
  background:var(--hsv-superficie-alt); margin:0 }
.h-mosaico img{ width:100%; height:100%; object-fit:cover;
  transition:transform 700ms var(--curva) }
.h-mosaico figure:hover img{ transform:scale(1.05) }
/* El pie dice qué se está mirando. Aparece al señalar: en reposo la foto va
   limpia, que es de lo que se trata. */
.h-mosaico figcaption{
  position:absolute; inset:auto 0 0 0; padding:var(--p-4) var(--p-3) var(--p-3);
  font-size:var(--p-xs); letter-spacing:.06em; color:#fff;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--hsv-tinta) 82%,transparent), transparent);
  opacity:0; transform:translateY(6px);
  transition:opacity var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.h-mosaico figure:hover figcaption{ opacity:1; transform:none }

/* ---- las tres cosas que no hace nadie más -------------------------------
   ⚠ CADA UNA ES UNA COLUMNA ENTERA. La versión anterior le daba al `li` una
   rejilla de dos columnas con TRES hijos dentro —el número, el título y la
   explicación—: el tercero caía en la fila siguiente empezando por la primera
   columna, y con `auto` esa columna se ensanchaba hasta el ancho del párrafo,
   dejando el título estrujado en el canal que sobraba. Una rejilla reparte por
   orden: si hay tres hijos y dos columnas, el tercero baja. */
.h-tres{ list-style:none; padding:0; margin:var(--p-6) 0 var(--p-5);
  display:grid; gap:var(--p-5); grid-template-columns:1fr }
@media (min-width:760px){ .h-tres{ grid-template-columns:repeat(3,1fr) } }
.h-tres li{ display:grid; gap:8px; align-content:start }
.h-tres svg{ width:26px; height:26px; stroke-width:1.6;
  color:var(--hsv-acento); transition:transform var(--dur) var(--curva) }
.h-tres li:hover svg{ transform:translateY(-2px) scale(1.08) }
.h-tres b{ font-size:var(--p-base); font-weight:600 }
.h-tres span{ font-size:var(--p-sm); line-height:1.6; max-width:34ch;
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent) }

/* ---- los espacios del salón --------------------------------------------- */
.h-salon{ display:grid; gap:var(--p-5) }
@media (min-width:760px){ .h-salon{ grid-template-columns:1fr 1fr } }
.h-salon__uno{ display:block }
.h-salon__foto{ display:block; overflow:hidden; aspect-ratio:16/10;
  background:var(--hsv-superficie) }
.h-salon__foto img{ width:100%; height:100%; object-fit:cover;
  transition:transform 700ms var(--curva) }
.h-salon__uno:hover .h-salon__foto img{ transform:scale(1.04) }
.h-salon__uno h3{ font-family:var(--fuente-editorial); font-weight:400;
  text-transform:uppercase; font-size:var(--p-xl); letter-spacing:.2em;
  text-indent:.2em; margin-top:var(--p-3) }
.h-salon__uno p{ margin-top:var(--p-2); max-width:42ch; font-size:var(--p-sm);
  line-height:1.6; color:color-mix(in srgb,var(--hsv-tinta) 65%,transparent) }
/* El aforo es el dato que decide si sigues leyendo: va aparte y en su medida */
.h-salon__cabe{ display:inline-block; margin-top:var(--p-3);
  font-size:var(--p-xs); letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--hsv-acento) }

/* ---- el cierre, con la foto a sangre ------------------------------------ */
.h-cierre{ position:relative; overflow:hidden; isolation:isolate;
  padding:var(--p-8) 0; color:#fff }
.h-cierre__foto{ position:absolute; inset:0; z-index:-2; overflow:hidden }
/* Más alta que su marco: es lo que le deja recorrido al parallax sin dejar
   una franja del fondo asomando por abajo. */
.h-cierre__foto img{ width:100%; height:124%; object-fit:cover }
/* ⚠ EL VELO SE CALIBRA CON LO MÁS CLARO DE LA FOTO, NO CON SU MEDIA.
   `piscina-alto` es un aéreo a pleno día: luminancia media 105 de 255, y sus
   zonas de agua al sol pasan de 200. Con el velo al 46% por la derecha —donde
   cae el botón— el blanco quedaba en 4,17:1, por debajo del 4,5 que exige AA.
   Al 62% queda en 6,1:1 y la fotografía todavía se ve. */
.h-cierre__velo{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(
    to right,
    color-mix(in srgb,var(--hsv-tinta) 80%,transparent),
    color-mix(in srgb,var(--hsv-tinta) 62%,transparent)) }
.h-cierre__in{ display:flex; flex-wrap:wrap; gap:var(--p-5);
  align-items:center; justify-content:space-between }
.h-cierre__in .h-encima{ color:rgba(255,255,255,.72) }
.h-cierre h2{ font-family:var(--fuente-editorial); font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.8rem); line-height:1.12; max-width:18ch }

/* ===========================================================================
   EL CROQUIS
   ---------------------------------------------------------------------------
   Monocromo, con dos excepciones que significan algo: el agua lleva su azul y
   la vegetación su verde. Nada más de color.

   La vegetación no son arbolitos: son masas blandas alrededor del terreno. Lo
   que dicen es que esto no da a una avenida —y esa es la mitad de lo que se
   vende—, sin caer en el dibujo infantil.
   =========================================================================== */
.cro-marco{ position:relative; max-width:1180px; margin:0 auto }
.cro{ width:100%; height:auto; overflow:visible }

/* El monte: denso en los bordes y abierto en el centro. Un degradado hace el
   grueso y las copas insinuadas le quitan el aire de mancha lisa. */
/* Los árboles: el monte, en la tinta del sistema. Dos tonos —la copa y su
   lado de luz— bastan para que se lean redondos sin dibujar una sola hoja. */
.cro__copa{ fill:color-mix(in srgb,var(--hsv-tinta) 42%,transparent) }
.cro__copa-luz{ fill:color-mix(in srgb,var(--hsv-tinta) 24%,transparent) }
.cro__sombra-arbol{ fill:var(--hsv-tinta); opacity:.07 }

/* Los faldones del techo: sin la diferencia entre los dos, el volumen se lee
   plano y todo el trabajo del relieve se pierde. */
.cro__faldon--claro{ fill:color-mix(in srgb,var(--hsv-tinta) 16%,transparent) }
.cro__faldon--oscuro{ fill:color-mix(in srgb,var(--hsv-tinta) 36%,transparent) }
.cro__cumbrera{ stroke:color-mix(in srgb,var(--hsv-tinta) 34%,transparent);
  stroke-width:1; fill:none }

/* La palapa: dos faldas del cono, la izquierda a la luz */
.cro__palapa--izq{ fill:color-mix(in srgb,var(--hsv-tinta) 30%,transparent) }
.cro__palapa--der{ fill:color-mix(in srgb,var(--hsv-tinta) 48%,transparent) }

.cro__calle{ fill:color-mix(in srgb,var(--hsv-tinta) 17%,transparent) }
/* La raya del medio: lo que dice que es una calle y no una explanada */
.cro__raya{ stroke:var(--hsv-fondo); stroke-width:1.6; stroke-dasharray:7 7; opacity:.7 }
.cro__calle-txt{ fill:var(--hsv-tinta); opacity:.35; font-family:var(--fuente-titular);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; text-anchor:middle }

.cro__zona{ cursor:pointer }
.cro__zona *, .cro__fondo *{ transition:transform var(--dur) var(--curva),
  fill var(--dur) var(--curva), opacity var(--dur) var(--curva) }

.cro__sombra{ fill:var(--hsv-tinta); opacity:.12 }
.cro__cara--izq{ fill:color-mix(in srgb,var(--hsv-tinta) 26%,transparent) }
.cro__cara--der{ fill:color-mix(in srgb,var(--hsv-tinta) 46%,transparent) }
.cro__techo{ fill:color-mix(in srgb,var(--hsv-tinta) 15%,transparent);
  stroke:color-mix(in srgb,var(--hsv-tinta) 22%,transparent); stroke-width:.8 }
.cro__llano{
  fill:color-mix(in srgb,var(--hsv-tinta) 10%,transparent);
  stroke:color-mix(in srgb,var(--hsv-tinta) 22%,transparent); stroke-width:1;
}
/* Las plazas del parqueo: sin ellas se lee como una carretera */
.cro__plaza{ stroke:color-mix(in srgb,var(--hsv-tinta) 20%,transparent); stroke-width:.9 }
.cro__agua{ fill:var(--hsv-acento-agua); opacity:.62 }
/* Las palapas son del sitio, no un destino: se quedan atrás */
.cro__palapa{ fill:color-mix(in srgb,var(--hsv-tinta) 30%,transparent) }
.cro__fondo{ pointer-events:none }

/* La etiqueta va sobre una pastilla sólida. El contorno blanco de antes se
   veía tosco y hacía el dibujo escolar. */
.cro__pastilla{
  fill:var(--hsv-tinta); opacity:.86; pointer-events:none;
  transition:fill var(--dur) var(--curva), transform var(--dur) var(--curva),
             opacity var(--dur) var(--curva);
}
.cro__nombre{
  fill:#fff; font-family:var(--fuente-titular);
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-anchor:middle; pointer-events:none;
  transition:transform var(--dur) var(--curva);
}

/* Al señalar, la zona se levanta y su techo toma el color de la marca */
/* Señalar un parqueo levanta LOS TRES: son la misma cosa en tres sitios, y
   que reaccione solo el trozo señalado los hace parecer piezas sueltas.
   Se resuelve con :has() sobre el SVG, sin una línea de JavaScript. */
/* ⚠ El alza se aplica al GRUPO entero, nunca a cada hijo: un `transform` de
   CSS sobre un hijo pisa su `transform="matrix(…)"` del marcado, y los
   rótulos perdían su inclinación y caían todos apilados en el origen. */
.cro__zona{ --alza:0px; transform:translateY(var(--alza));
  transition:transform var(--dur) var(--curva) }
.cro__zona > *{
  transition:fill var(--dur) var(--curva), opacity var(--dur) var(--curva);
}

.cro:has([data-area="parqueo"]:hover)      [data-area="parqueo"],
.cro:has([data-area="piscina"]:hover)      [data-area="piscina"],
.cro:has([data-area="habitaciones"]:hover) [data-area="habitaciones"],
.cro:has([data-area="restaurante"]:hover)  [data-area="restaurante"],
.cro:has([data-area="celebraciones"]:hover)[data-area="celebraciones"],
.cro:has([data-area="jardines"]:hover)     [data-area="jardines"]{ --alza:-14px }

/* El agua sube menos: es una lámina, no un edificio */
.cro:has([data-area="piscina"]:hover) [data-area="piscina"]{ --alza:-7px }

/* Y toda el área toma el color de la marca, no solo la pieza señalada */
.cro:has([data-area="parqueo"]:hover)      [data-area="parqueo"] .cro__llano,
.cro:has([data-area="jardines"]:hover)     [data-area="jardines"] .cro__llano,
.cro:has([data-area="habitaciones"]:hover) [data-area="habitaciones"] .cro__techo,
.cro:has([data-area="restaurante"]:hover)  [data-area="restaurante"] .cro__techo,
.cro:has([data-area="celebraciones"]:hover)[data-area="celebraciones"] .cro__techo,
/* El césped de los eventos es del área de celebraciones: al señalar el salón
   tiene que encenderse con él, o parecen dos sitios distintos */
.cro:has([data-area="celebraciones"]:hover)[data-area="celebraciones"] .cro__jardin{
  fill:var(--hsv-acento);
}
.cro:has([data-area="piscina"]:hover) [data-area="piscina"] .cro__agua{ opacity:.88 }

.cro:has([data-area="habitaciones"]:hover) [data-area="habitaciones"] .cro__cara--izq,
.cro:has([data-area="restaurante"]:hover)  [data-area="restaurante"] .cro__cara--izq,
.cro:has([data-area="celebraciones"]:hover)[data-area="celebraciones"] .cro__cara--izq{
  fill:var(--hsv-acento-hover);
}
.cro:has([data-area="habitaciones"]:hover) [data-area="habitaciones"] .cro__cara--der,
.cro:has([data-area="restaurante"]:hover)  [data-area="restaurante"] .cro__cara--der,
.cro:has([data-area="celebraciones"]:hover)[data-area="celebraciones"] .cro__cara--der{
  fill:color-mix(in srgb,var(--hsv-acento-hover) 74%,var(--hsv-tinta));
}

.cro:has([data-area]:hover) [data-area]:hover .cro__pastilla{
  fill:var(--hsv-acento-hover); opacity:1;
}
.cro__zona:hover .cro__sombra{ opacity:.16 }

/* Sin :has() —navegadores viejos— al menos reacciona la pieza señalada */
@supports not selector(:has(*)){
  .cro__zona:hover{ --alza:-14px }
}

.cro__zona:focus-visible{ outline:none }
.cro__zona:focus-visible .cro__techo,
.cro__zona:focus-visible .cro__agua,
.cro__zona:focus-visible .cro__llano{ stroke:var(--hsv-acento); stroke-width:2 }

/* En el teléfono el croquis no se puede señalar: se cambia por tarjetas */
.cro-tarjetas{ display:none }

@media (max-width:760px){
  .cro-marco{ display:none }
  .cro-tarjetas{ display:grid; gap:2px; grid-template-columns:1fr 1fr }
}

/* ===========================================================================
   CATÁLOGO DE HABITACIONES
   =========================================================================== */
.hab-lista{ display:grid; gap:var(--p-5) }
@media (min-width:900px){ .hab-lista{ grid-template-columns:repeat(3,1fr) } }

.hab-tarjeta{ display:block; position:relative }
.hab-tarjeta__foto{ position:relative; overflow:hidden; aspect-ratio:4/3;
  background:var(--hsv-superficie-alt) }
.hab-tarjeta__foto img{ width:100%; height:100%; object-fit:cover;
  transition:transform 700ms var(--curva) }
.hab-tarjeta:hover .hab-tarjeta__foto img{ transform:scale(1.05) }
/* La cuenta de cuántas quedan de ese tipo: dato útil, no adorno */
.hab-tarjeta__cuantas{ position:absolute; left:var(--p-3); top:var(--p-3);
  background:color-mix(in srgb,var(--hsv-fondo) 92%,transparent);
  padding:5px 12px; font-size:var(--p-xs); letter-spacing:.1em;
  text-transform:uppercase; font-weight:500 }
.hab-tarjeta h3{ font-family:var(--fuente-editorial); font-weight:400;
  text-transform:uppercase; font-size:var(--p-xl); letter-spacing:.2em;
  text-indent:.2em; margin-top:var(--p-3) }
.hab-tarjeta__datos{ display:flex; gap:var(--p-3); flex-wrap:wrap;
  margin-top:var(--p-2); font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent) }
.hab-tarjeta__datos span{ display:flex; align-items:center; gap:6px }
.hab-tarjeta__datos svg{ width:15px; height:15px }
.hab-tarjeta__ir{ display:inline-flex; align-items:center; gap:10px;
  margin-top:var(--p-3); font-family:var(--fuente-editorial); font-style:italic;
  font-size:var(--p-base) }

/* ------------------------------------------------------ ficha de un tipo -- */
.tipo{ display:grid; gap:var(--p-6) }
@media (min-width:900px){ .tipo{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  align-items:start } }
.tipo__galeria{ display:grid; gap:2px; grid-template-columns:repeat(2,1fr) }
.tipo__galeria figure:first-child{ grid-column:1 / -1 }
.tipo__galeria figure{ overflow:hidden; aspect-ratio:16/10; cursor:zoom-in;
  background:var(--hsv-superficie-alt) }
.tipo__galeria figure:first-child{ aspect-ratio:16/9 }
.tipo__galeria img{ width:100%; height:100%; object-fit:cover;
  transition:transform 600ms var(--curva) }
.tipo__galeria figure:hover img{ transform:scale(1.04) }

.tipo__datos dl{ margin:var(--p-4) 0 }
.tipo__datos dl > div{ display:flex; gap:var(--p-3); padding:12px 0;
  border-bottom:1px solid var(--p-borde); font-size:var(--p-sm) }
.tipo__datos dt{ flex:none; width:8rem;
  color:color-mix(in srgb,var(--hsv-tinta) 52%,transparent) }
.tipo__datos dd{ font-weight:500 }
.tipo__trae{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--p-3) }
.tipo__trae span{ display:flex; align-items:center; gap:7px; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 70%,transparent) }
.tipo__trae svg{ width:16px; height:16px; color:var(--hsv-acento) }

/* El visor de la galería, a pantalla completa */
.visor-foto{ position:fixed; inset:0; z-index:120; display:none;
  place-items:center; background:rgba(36,36,33,.94); padding:var(--p-4) }
.visor-foto.on{ display:grid }
.visor-foto img{ max-width:100%; max-height:86vh; object-fit:contain }
.visor-foto__cerrar{ position:absolute; top:var(--p-4); right:var(--p-4);
  color:#fff; width:44px; height:44px; display:grid; place-items:center }
.visor-foto__cerrar svg{ width:24px; height:24px }
.visor-foto__paso{ position:absolute; top:50%; transform:translateY(-50%);
  color:#fff; width:56px; height:56px; display:grid; place-items:center; opacity:.7 }
.visor-foto__paso:hover{ opacity:1 }
.visor-foto__paso--izq{ left:var(--p-3) }
.visor-foto__paso--der{ right:var(--p-3) }
.visor-foto__paso svg{ width:30px; height:30px }
.visor-foto__pie{ position:absolute; bottom:var(--p-4); left:0; right:0;
  text-align:center; color:rgba(255,255,255,.72); font-size:var(--p-sm) }

/* El césped de los eventos al aire libre. Verde muy bajado de tono: el croquis
   es un esquema y un verde saturado lo convertía en dibujo infantil —ya se
   probó—. Aquí solo hace falta que se distinga de una explanada de parqueo. */
.cro__jardin{ fill:rgba(122,158,126,.34); stroke:rgba(122,158,126,.62); stroke-width:1 }

/* ---------------------------------------------------------------------------
   WIDGET DE RESERVA — montado sobre el borde de la portada
   --------------------------------------------------------------------------- */
.h-buscar{
  position:relative; z-index:4;
  max-width:var(--p-ancho); margin:0 auto; padding:0 var(--p-4);
  /* Sube sobre la portada en vez de colgar debajo: así se ve sin bajar */
  /* ⚠ −64, NO −128. El widget mide 123px y se subía 128: no se montaba sobre el
     borde de la portada, **se hundía entero dentro** y tapaba los indicadores
     del slider y la flecha de bajar. Con −64 queda mitad sobre la foto y mitad
     por debajo, que es lo que dice su propio comentario. Y era el único uso de
     `--p-9` en toda la hoja. */
  margin-top:calc(var(--p-7) * -1);
}
.h-buscar__caja{
  display:grid; gap:var(--p-3); align-items:end;
  grid-template-columns:1.4fr 1fr 1fr 1fr auto;
  background:var(--hsv-superficie);
  border-radius:var(--radio-tarjeta);
  padding:var(--p-4);
  /* Elevación casi imperceptible: una sombra marcada abarata al instante */
  box-shadow:0 1px 2px rgba(36,36,33,.04), 0 12px 34px rgba(36,36,33,.07);
}
/* ⚠ `min-width:0`, O LA REJILLA REVIENTA. Un hijo de rejilla no baja de su
   tamaño mínimo automático, y el mínimo de un `<select>` es su opción más
   larga: «¿Qué desea reservar?» con «Habitación / Mesa / El salón» dentro pide
   395px. Mientras el widget iba a una sola columna de 342 no se notaba —el
   track era ancho—; al partirlo en dos columnas de 163 el campo se salió de su
   caja y arrastró la página entera de lado. Se vio a 390px el 2026-09-08:
   documento de 434 en una ventana de 390. */
.h-buscar__campo{ display:flex; flex-direction:column; gap:var(--p-2); margin:0;
  min-width:0 }
.h-buscar__campo select,
.h-buscar__campo input,
.h-buscar__ir{ min-width:0 }
.h-buscar__campo label{
  font-size:var(--p-xs); letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent);
}
.h-buscar__campo select,
.h-buscar__campo input{
  font-family:inherit; font-size:var(--p-base); color:var(--hsv-tinta);
  background:var(--hsv-superficie);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  padding:0 var(--p-3);
  /* 48px: el objetivo táctil no baja de 44px, y en iOS un campo por debajo
     de 16px hace que la página salte con zoom al enfocarlo */
  height:var(--p-campo); width:100%;
  transition:border-color var(--dur) var(--curva);
}
/* El desplegable del sistema pinta su propia flecha, distinta en cada
   máquina —doble en macOS, triangular en Windows—. Se apaga y se dibuja la
   nuestra, o el widget se ve de una forma en cada computadora. */
.h-buscar__campo select{
  appearance:none; -webkit-appearance:none;
  padding-right:var(--p-5);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  /* ⚠ 19px, NO 21. La flecha se coloca desde el BORDE DE ARRIBA, así que al
     bajar el campo de 48 a 44 se queda descentrada 2px hacia abajo. Es de las
     cosas que no se ven de una en una y se ven las tres juntas. */
  background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.h-buscar__campo select:hover,
.h-buscar__campo input:hover{ border-color:color-mix(in srgb,var(--hsv-tinta) 26%,transparent) }
.h-buscar__campo select:focus-visible,
.h-buscar__campo input:focus-visible{
  outline:2px solid var(--hsv-acento); outline-offset:2px; border-color:transparent;
}

/* El único botón sólido de la portada: recto, en mayúsculas, con su flecha */
.h-buscar__ir{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--p-2); height:var(--p-campo); padding:0 var(--p-5);
  background:var(--hsv-acento); color:#fff;
  border:0; border-radius:0; cursor:pointer;
  font-family:inherit; font-size:var(--p-xs); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  transition:background var(--dur) var(--curva);
}
.h-buscar__ir:hover{ background:var(--hsv-acento-hover) }
.h-buscar__ir:active{ transform:scale(.94) }
.h-buscar__ir:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:2px }
/* Al pasar el cursor: la flecha avanza y el calendario pasa la hoja */
.h-buscar__flecha{ transition:transform var(--dur) var(--curva) }
.h-buscar__ir:hover .h-buscar__flecha{ transform:translateX(7px) }
.h-buscar__cal{ transform-origin:50% 24%; transition:transform var(--dur) var(--curva) }
.h-buscar__ir:hover .h-buscar__cal{ transform:rotateX(-38deg) }

/* Para una mesa o un salón no hay noche de salida: el campo sobra */
.h-buscar__caja[data-sin-salida] [data-campo="salida"]{ display:none }
.h-buscar__caja[data-sin-salida]{ grid-template-columns:1.4fr 1fr 1fr auto }

@media (max-width:900px){
  .h-buscar{ margin-top:calc(var(--p-6) * -1) }
  .h-buscar__caja,
  .h-buscar__caja[data-sin-salida]{ grid-template-columns:1fr 1fr }
  /* En una sola columna el botón sí ocupa el ancho: es la única acción */
  /* ⚠ NINGÚN BOTÓN TOMA EL ANCHO DE SU SITIO — tampoco en el teléfono. La
     excepción que decía «ancho completo solo en móvil, y solo cuando es la
     única acción» quedó anulada el 2026-09-08: era la puerta por la que se
     colaban todos, y una franja de color de borde a borde no se lee como algo
     que se pulsa. Lo que se apila cambia de dirección, no de ancho. */
  .h-buscar__ir{ grid-column:1 / -1; justify-self:end }
}
/* ══════════ EL WIDGET EN EL TELÉFONO ═══════════════════════════════════════
   ⚠ MEDÍA 461px, EL 55% DE LA PANTALLA. Cinco campos en una columna, uno
   debajo de otro, en lo primero que se ve del sitio: la fotografía —que es lo
   que vende— quedaba reducida a una franja.

   No hace falta apilarlo entero. Entrada y salida son **una sola decisión** y
   se eligen juntas, así que van en la misma fila; y personas y el botón caben
   al lado. De cinco filas a tres: **461px → ~270px**, el 32% de la pantalla.

   El campo baja de 48 a 44 y NO pasa nada con el zoom de iOS: lo que lo
   dispara es la LETRA por debajo de 16px, no la altura, y la letra sigue en
   `--p-base`. El comentario de arriba mezclaba las dos cosas.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:560px){
  .h-buscar{ margin-top:calc(var(--p-5) * -1) }
  .h-buscar__caja,
  .h-buscar__caja[data-sin-salida]{
    grid-template-columns:1fr 1fr; gap:var(--p-2) var(--p-3);
    padding:var(--p-3);
  }
  /* Qué se reserva manda sobre todo lo demás: renglón entero. */
  .h-buscar__caja > .h-buscar__campo:first-of-type{ grid-column:1 / -1 }
  .h-buscar__campo select,
  .h-buscar__campo input{ height:44px }
  .h-buscar__campo{ gap:4px }
  .h-buscar__campo label{ font-size:10px; letter-spacing:.1em }
  /* ⚠ EL BOTÓN, EN SU PROPIA FILA. Se probó a ponerlo al lado de «personas» y
     no cabe: «VER DISPONIBILIDAD» con su calendario y su flecha mide 260px y
     la columna son 163, así que `justify-self:end` le pegaba el borde derecho
     a la columna y el resto del botón **se montaba encima del campo de al
     lado**. Un botón mide su texto (§3) y su texto mide lo que mide: quien
     cede es la fila. Siguen siendo tres filas de campos y una de acción, no
     las cinco de antes. */
  .h-buscar__ir{ grid-column:1 / -1; justify-self:end }

  /* Las fechas se escriben cortas: «8 sep» en vez de «8 de septiembre», que en
     163px se parte en dos renglones y sube el campo a 100px de alto. */
  .h-buscar__campo[data-campo] .h-buscar__fecha,
  .h-buscar__campo[data-campo] input,
  .h-buscar__campo[data-campo] button{ font-size:var(--p-sm) }
}

/* ---------------------------------------------------------------------------
   LA CARTA — EN DOS FORMAS
   Aprobado con el dueño el 2026-08-15: no se elige entre fichas y libro, se
   hacen las dos y el visitante conmuta. La foto sale en las dos.
   Entra en FICHAS: se abre casi siempre desde el teléfono, en la mesa.
   --------------------------------------------------------------------------- */
.ca-vacia{ text-align:center; color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent) }

/* ---- el conmutador ---- */
.ca-vista{ display:flex; justify-content:center; margin:0 0 var(--p-7) }
.ca-vista[hidden]{ display:none }
.ca-vista button{
  border:1px solid var(--p-borde); background:transparent; border-radius:0;
  padding:10px 22px; font-size:var(--p-xs); letter-spacing:.14em;
  text-transform:uppercase; cursor:pointer;
  color:color-mix(in srgb,var(--hsv-tinta) 50%,transparent);
  transition:background var(--dur) var(--curva), color var(--dur) var(--curva);
}
.ca-vista button + button{ border-left:0 }
.ca-vista button.on{ background:var(--hsv-tinta); border-color:var(--hsv-tinta); color:#fff }

/* ═══════════════════════ FICHAS ═══════════════════════════════════════════ */
.ca-bloque + .ca-bloque{ margin-top:var(--p-8) }
.ca-bloque__top{ text-align:center; margin-bottom:var(--p-6) }
.ca-bloque__top h2{
  font-family:var(--fuente-editorial); font-weight:400; text-transform:uppercase;
  letter-spacing:.24em; text-indent:.24em; font-size:clamp(1.25rem,2vw,1.7rem);
}
.ca-bloque__top p{
  font-family:var(--fuente-editorial); font-style:italic; margin:6px 0 0;
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent);
}
.ca-fichas{
  display:grid; gap:var(--p-5);
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}
.ca-ficha{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--hsv-superficie); border:1px solid var(--p-borde);
  border-radius:var(--radio-tarjeta);
  transition:transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.ca-ficha:hover{ transform:translateY(-4px); box-shadow:var(--p-sombra) }
.ca-ficha__foto{ aspect-ratio:4/3; overflow:hidden; background:var(--hsv-superficie-alt) }
.ca-ficha__foto img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--curva) }
.ca-ficha:hover .ca-ficha__foto img{ transform:scale(1.04) }
.ca-ficha__in{ padding:var(--p-4); display:flex; flex-direction:column; gap:5px; flex:1 }
.ca-ficha__top{ display:flex; align-items:baseline; gap:var(--p-3) }
.ca-ficha__top h3{ font-size:var(--p-base); font-weight:600; flex:1; margin:0 }
.ca-ficha__precio{ font-family:var(--fuente-editorial); font-size:var(--p-lg); white-space:nowrap }
.ca-ficha__dice{
  margin:0; font-size:var(--p-sm); line-height:1.5;
  color:color-mix(in srgb,var(--hsv-tinta) 68%,transparent);
}
.ca-ficha__marcas{ display:flex; flex-wrap:wrap; gap:6px; margin:auto 0 0; padding-top:8px }

/* ⚠ La ficha SIN foto no deja un hueco gris esperando: se compone como tarjeta
   de texto, en marfil y con el nombre en la serif. Mientras no lleguen las
   fotografías es la que más se va a ver, y tiene que sostenerse sola — un
   rectángulo que dice «sin fotografía» le echa la culpa al cliente. */
.ca-ficha--texto{ background:var(--hsv-marfil); border-color:transparent }
.ca-ficha--texto .ca-ficha__in{ padding:var(--p-6) var(--p-5); justify-content:center; gap:8px }
.ca-ficha--texto .ca-ficha__top{ flex-direction:column; align-items:flex-start; gap:4px }
.ca-ficha--texto h3{ font-family:var(--fuente-editorial); font-size:1.4rem; font-weight:400; line-height:1.15 }
.ca-ficha--texto .ca-ficha__precio{ font-size:var(--p-xl); color:var(--hsv-acento) }
/* Lo que hoy no hay se apaga, no se esconde: el cliente ya lo vio otra vez, y
   buscarlo sin encontrarlo es peor que leer que se acabó. */
.ca-ficha--sin{ opacity:.55 }
.ca-ficha--sin:hover{ transform:none; box-shadow:none }

/* ═══════════════════════ LIBRO ════════════════════════════════════════════ */
/* «Tiene que sentirse como un libro cambiando de página» (dueño, 2026-08-15).
   Un cambio instantáneo de contenido no es un libro: es una pestaña. */
.ca-libro{ max-width:1040px; margin:0 auto; perspective:2400px }
.ca-libro[hidden]{ display:none }
.ca-libro__hoja{
  position:relative; display:flex; min-height:540px;
  background:var(--hsv-superficie); border-radius:var(--radio-tarjeta);
  box-shadow:var(--p-sombra); transform-style:preserve-3d;
}
.ca-libro__izq{ width:50%; position:relative; overflow:hidden }
.ca-libro__lomo{
  position:absolute; left:50%; top:0; bottom:0; width:38px; transform:translateX(-50%);
  pointer-events:none; z-index:20;
  background:linear-gradient(90deg,transparent,rgba(36,36,33,.10) 45%,
    rgba(36,36,33,.13) 50%,rgba(36,36,33,.05) 56%,transparent);
}
.ca-pag{
  position:absolute; top:0; right:0; width:50%; height:100%;
  transform-origin:left center; transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.35,.05,.25,1);
}
.ca-pag.volteada{ transform:rotateY(-180deg) }
/* ⚠ `backface-visibility:hidden` en las DOS caras, o se ve el texto del dorso
   espejado a través del papel mientras gira. */
.ca-pag__c{
  position:absolute; inset:0; overflow:hidden; background:var(--hsv-superficie);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:0 var(--radio-tarjeta) var(--radio-tarjeta) 0;
}
.ca-pag__c--dorso{ transform:rotateY(180deg); border-radius:var(--radio-tarjeta) 0 0 var(--radio-tarjeta) }
/* La sombra que el papel proyecta mientras está levantado */
.ca-pag__c::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(36,36,33,.09),transparent 22%);
}
.ca-pag__c--dorso::after{ background:linear-gradient(270deg,rgba(36,36,33,.09),transparent 22%) }

.ca-cara{ padding:var(--p-7) var(--p-6); height:100%; overflow-y:auto; box-sizing:border-box }
.ca-cara__top{
  font-family:var(--fuente-editorial); text-transform:uppercase;
  letter-spacing:.24em; text-indent:.24em; font-size:var(--p-lg);
  text-align:center; margin-bottom:var(--p-5);
}
.ca-cara__num{
  position:absolute; bottom:var(--p-4); left:0; right:0; text-align:center;
  font-size:var(--p-xs); color:color-mix(in srgb,var(--hsv-tinta) 42%,transparent);
}
.ca-cara--fin{ display:grid; place-items:center }
.ca-cara--fin p{ font-family:var(--fuente-editorial); font-style:italic;
  color:color-mix(in srgb,var(--hsv-tinta) 45%,transparent) }
.ca-portada{ display:grid; place-items:center; text-align:center; height:100%;
  background:var(--hsv-marfil); padding:var(--p-5) }
.ca-portada img{ margin:0 auto var(--p-4); opacity:.85; width:64px; height:auto }
.ca-portada h2{
  font-family:var(--fuente-editorial); text-transform:uppercase; font-weight:400;
  letter-spacing:.24em; text-indent:.24em; font-size:1.5rem;
}
.ca-portada p{ font-family:var(--fuente-editorial); font-style:italic; margin:8px 0 0;
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent) }

/* El renglón del libro: el filete punteado es lo que hace que se lea como una
   carta y no como una tabla de dos columnas. */
.ca-ren{ display:flex; align-items:flex-start; gap:10px; margin-bottom:var(--p-4) }
.ca-ren--sin{ opacity:.5 }
.ca-ren__foto{ flex:none; width:52px; height:52px; border-radius:8px; overflow:hidden; margin-top:2px }
.ca-ren__foto img{ width:100%; height:100%; object-fit:cover }
.ca-ren__texto{ flex:1; min-width:0 }
.ca-ren__linea{ display:flex; align-items:baseline; gap:8px }
.ca-ren__linea b{ font-weight:600; font-size:var(--p-sm) }
.ca-ren__filete{ flex:1; border-bottom:1px dotted var(--p-borde); transform:translateY(-4px) }
.ca-ren__precio{ font-family:var(--fuente-editorial); font-size:var(--p-base) }
.ca-ren__texto small{
  display:block; font-size:var(--p-xs); margin-top:1px;
  color:color-mix(in srgb,var(--hsv-tinta) 50%,transparent);
}

.ca-libro__mando{ display:flex; align-items:center; justify-content:center;
  gap:var(--p-5); margin-top:var(--p-5) }
.ca-libro__mando span{ font-size:var(--p-xs); letter-spacing:.1em; min-width:9ch;
  text-align:center; color:color-mix(in srgb,var(--hsv-tinta) 45%,transparent) }
.ca-pasa{
  width:42px; height:42px; border:1px solid var(--p-borde); background:transparent;
  border-radius:50%; display:grid; place-items:center; cursor:pointer;
  transition:border-color var(--dur) var(--curva), background var(--dur) var(--curva);
}
.ca-pasa:hover:not(:disabled){ border-color:var(--hsv-tinta); background:var(--hsv-superficie-alt) }
.ca-pasa:disabled{ opacity:.3; cursor:default }
.ca-pasa .ico{ width:17px; height:17px }

/* ---- marcas de platillo (las dos vistas) ---- */
.ca-marca{
  font-style:normal; font-size:var(--p-xs); letter-spacing:.06em;
  border:1px solid var(--p-borde); border-radius:999px; padding:2px 10px;
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent); display:inline-block;
}
.ca-marca--sin{ border-color:var(--hsv-acento); color:var(--hsv-acento) }

.ca-pie{ text-align:center; margin-top:var(--p-8);
  font-family:var(--fuente-editorial); font-style:italic; font-size:var(--p-lg) }
.ca-pie a{ color:var(--hsv-acento) }

@media (max-width:760px){
  /* En el teléfono el libro no gira: media pantalla girando en 3D se siente
     como un fallo, no como un libro. Se enseña una página por vez. */
  .ca-libro{ perspective:none }
  .ca-libro__hoja{ display:block; min-height:0; box-shadow:none;
    border:1px solid var(--p-borde) }
  .ca-libro__izq, .ca-libro__lomo{ display:none }
  .ca-pag{ position:static; width:100%; transform:none !important; transition:none }
  .ca-pag:not(.actual){ display:none }
  .ca-pag__c{ position:static; transform:none !important; border-radius:var(--radio-tarjeta) }
  .ca-pag__c--dorso{ display:none }
  .ca-pag__c::after{ display:none }
  .ca-cara{ padding:var(--p-5) var(--p-4); height:auto; overflow:visible }
  .ca-cara__num{ position:static; margin-top:var(--p-4) }
  .ca-fichas{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){ .ca-pag{ transition:none } }

/* ---------------------------------------------------------------------------
   CONTACTO
   Dos cosas quiere quien abre esto: llamar, o saber por dónde se entra.
   --------------------------------------------------------------------------- */
.co-rejilla{
  display:grid; gap:var(--p-4);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  max-width:64rem; margin:0 auto;
}
.co-caja{
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  padding:var(--p-5); text-align:center;
}
.co-caja__ico{ color:var(--hsv-acento); margin-bottom:var(--p-2) }
.co-caja h2{
  font-family:var(--fuente-editorial); font-weight:400; text-transform:uppercase;
  font-size:var(--p-base); letter-spacing:.2em; text-indent:.2em;
  margin:0 0 var(--p-3);
}
.co-caja__grande{
  font-size:var(--p-xl); margin:0; line-height:1.3;
}
/* Un correo largo no cabe a 24px en una caja de 240: se lee, no se luce */
.co-caja__grande--corto{ font-size:var(--p-base); word-break:break-word }
.co-caja__grande a{ color:inherit; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--hsv-tinta) 25%,transparent);
  transition:border-color var(--dur) var(--curva), color var(--dur) var(--curva) }
.co-caja__grande a:hover{ color:var(--hsv-acento); border-bottom-color:var(--hsv-acento) }
.co-caja__dice{
  margin:var(--p-2) 0 0; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent);
}
.co-caja__ir{ font-size:var(--p-base); margin-top:var(--p-3) }

.co-camino{
  max-width:60ch; margin:var(--p-7) auto 0; text-align:center;
}
.co-camino h2{
  font-family:var(--fuente-editorial); font-weight:400; text-transform:uppercase;
  font-size:var(--p-lg); letter-spacing:.24em; text-indent:.24em;
  margin:0 0 var(--p-3);
}
.co-camino p{ line-height:1.8; margin:0 }

.co-cierre{ margin-top:var(--p-7) }

/* El renglón de «dónde estamos» del pie, que llevaba su estilo escrito dentro
   del marcado en vez de aquí */
.p-pie__donde{
  font-size:var(--p-sm); color:rgba(255,255,255,.82); line-height:1.7; margin:0 0 var(--p-2);
}

/* El relato del área: lo que se cuenta del sitio, bajo el título.
   Medida de lectura, no de pantalla — 65ch es el máximo del sistema. */
.a-relato{ max-width:62ch; margin:0 auto }
.a-relato p{ line-height:1.8; margin:0 0 var(--p-3) }
.a-relato p:last-child{ margin-bottom:0 }
/* La primera frase entra más grande: es la que decide si se sigue leyendo */
.a-relato p:first-child{ font-size:var(--p-lg); line-height:1.7 }

/* ---------------------------------------------------------------------------
   EVENTOS
   --------------------------------------------------------------------------- */

/* La franja de arriba se quitó (cliente, 2026-08-14): competía con la barra de
   navegación y obligaba a elegir entre dos formas de decir lo mismo. El único
   anuncio es el recuadro de la esquina, más abajo en esta hoja. */

/* ---- la tira de eventos ---- */
.ev-tira{
  display:grid; gap:var(--p-4);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
/* Con uno o dos no hay nada que recorrer: se centran en vez de estirarse a
   todo el ancho, que los deja con aire de cartel de rebajas */
.ev-tira--pocos{
  grid-template-columns:repeat(auto-fit,minmax(280px,340px));
  justify-content:center;
}

.ev-tarjeta{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform var(--dur) var(--curva);
}
.ev-tarjeta:hover{ transform:translateY(-4px) }
.ev-tarjeta__foto{
  position:relative; display:block; aspect-ratio:4/3;
  overflow:hidden; border-radius:var(--radio-tarjeta); margin-bottom:var(--p-3);
}
.ev-tarjeta__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur) var(--curva);
}
.ev-tarjeta:hover .ev-tarjeta__foto img{ transform:scale(1.03) }
/* La fecha sobre la foto: es el dato por el que se decide si interesa */
.ev-tarjeta__cuando{
  position:absolute; left:var(--p-3); bottom:var(--p-3);
  background:var(--hsv-tinta); color:#fff;
  font-style:normal; font-size:var(--p-xs); letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--radio-tarjeta);
}
.ev-tarjeta h3{
  font-family:var(--fuente-editorial); font-weight:400; font-size:var(--p-xl);
  margin:0 0 var(--p-2); line-height:1.2;
}
.ev-tarjeta__frase{
  margin:0 0 var(--p-3); font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 66%,transparent);
}
.ev-tarjeta__pie{ display:flex; flex-wrap:wrap; gap:var(--p-2); margin-bottom:var(--p-3) }
.ev-tarjeta__lugar,
.ev-tarjeta__dto{
  font-size:var(--p-xs); letter-spacing:.08em; text-transform:uppercase;
  padding:3px var(--p-2); border-radius:var(--radio-tarjeta);
  border:1px solid var(--p-borde);
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent);
}
/* El descuento se marca: es lo que hace que alguien se quede a dormir */
.ev-tarjeta__dto{ border-color:var(--hsv-acento); color:var(--hsv-acento) }
.ev-tarjeta__ir{
  margin-top:auto; display:inline-flex; align-items:center; gap:11px;
  font-family:var(--fuente-editorial); font-style:italic; font-size:var(--p-base);
}

/* ---- la página del evento ---- */
.ev-datos{
  display:flex; flex-wrap:wrap; gap:var(--p-6);
  justify-content:center; margin:0 0 var(--p-6); padding:0;
}
.ev-datos dt{
  font-size:var(--p-xs); letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent);
  margin-bottom:var(--p-1);
}
.ev-datos dd{ margin:0; font-size:var(--p-lg) }
.ev-paso{
  text-align:center; font-family:var(--fuente-editorial); font-style:italic;
  color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent);
  margin:0 0 var(--p-5);
}

.ev-medios{
  display:grid; gap:var(--p-4); margin-top:var(--p-7);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.ev-medio{ margin:0; border-radius:var(--radio-tarjeta); overflow:hidden }
.ev-medio img{ width:100%; height:100%; object-fit:cover; display:block }
/* El video mantiene su proporción sin depender de la altura del contenedor */
.ev-medio--video{ aspect-ratio:16/9; background:var(--hsv-tinta) }
.ev-medio--video iframe{ width:100%; height:100%; border:0; display:block }

@media (max-width:560px){
  .ev-datos{ gap:var(--p-4) }
}

/* ---- la cartelera ---- */
/* Lo próximo va grande y el resto en fila. Hay una diferencia real entre «este
   sábado» y «dentro de ocho meses»; con todas las fichas del mismo tamaño, esa
   diferencia solo está en la fecha y hay que leerlas todas para encontrarla. */
.ev-cartel{
  display:grid; gap:var(--p-6);
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
}
.ev-ficha{
  display:flex; flex-direction:column;
  border-radius:var(--radio-tarjeta); overflow:hidden;
  background:var(--hsv-superficie); border:1px solid var(--hsv-borde);
  transition:transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.ev-ficha:hover{ transform:translateY(-3px); box-shadow:var(--p-sombra) }
.ev-ficha--grande{ grid-column:1 / -1 }

.ev-ficha__foto{ display:block; overflow:hidden; background:var(--hsv-superficie-alt) }
.ev-ficha__foto img{
  width:100%; height:220px; object-fit:cover; display:block;
  transition:transform 1.1s var(--curva);
}
.ev-ficha:hover .ev-ficha__foto img{ transform:scale(1.03) }
.ev-ficha--grande .ev-ficha__foto img{ height:min(46vh,380px) }

.ev-ficha__in{ padding:var(--p-5); display:flex; flex-direction:column; gap:var(--p-2) }
.ev-ficha__cuando{
  font-size:var(--p-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--hsv-acento); margin:0;
}
.ev-ficha__in h2{ margin:0; font-size:var(--p-xl); line-height:1.15 }
.ev-ficha--grande .ev-ficha__in h2{ font-size:var(--p-2xl) }
/* El enlace toma el título entero, no una palabra suelta: es el objetivo más
   grande de la ficha y el que se toca en el teléfono. */
.ev-ficha__in h2 a{ color:inherit; text-decoration:none }
.ev-ficha__in h2 a:hover{ color:var(--hsv-acento) }
.ev-ficha__frase{
  margin:0; font-family:var(--fuente-editorial); font-style:italic;
  color:color-mix(in srgb,var(--hsv-tinta) 68%,transparent);
}
.ev-ficha__datos{
  margin:var(--p-2) 0 0; display:flex; flex-wrap:wrap; gap:8px;
  font-size:var(--p-xs);
}
.ev-ficha__datos span{
  border:1px solid var(--hsv-borde); border-radius:999px; padding:3px 11px;
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent);
}
/* El descuento se marca: es lo que hace que alguien se quede a dormir */
.ev-ficha__dto{ border-color:var(--hsv-acento) !important; color:var(--hsv-acento) !important }

/* Sin nada anunciado: se dice, y se ofrece la salida que la gente busca de
   todos modos, que es preguntar por el salón para lo suyo. */
.ev-nada{
  text-align:center; max-width:34rem; margin:0 auto; padding:var(--p-6) 0;
}
.ev-nada h2{ margin:0 0 var(--p-3) }
.ev-nada p{ margin:0 0 var(--p-5); color:color-mix(in srgb,var(--hsv-tinta) 68%,transparent) }

.ev-pasados{ margin-top:var(--p-8); padding-top:var(--p-7); border-top:1px solid var(--hsv-borde) }
.ev-pasados ul{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--p-3);
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.ev-pasados a{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  color:inherit; padding:8px; border-radius:var(--radio-tarjeta);
  transition:background var(--dur) var(--curva);
}
.ev-pasados a:hover{ background:var(--hsv-superficie-alt) }
.ev-pasados img{
  width:56px; height:56px; object-fit:cover; border-radius:10px; flex:none;
  /* Apagadas: son el ayer. En color compiten con lo que sí se puede ir a ver. */
  filter:grayscale(.55);
}
.ev-pasados a:hover img{ filter:none }
.ev-pasados b{ display:block; font-weight:600; font-size:var(--p-sm) }
.ev-pasados i{
  font-style:normal; font-size:var(--p-xs);
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent);
}

@media (max-width:560px){
  .ev-ficha--grande .ev-ficha__foto img{ height:200px }
  .ev-ficha__foto img{ height:180px }
}

/* ---------------------------------------------------------------------------
   DISPONIBILIDAD Y RESERVA
   --------------------------------------------------------------------------- */
.di-cambiar{
  display:grid; gap:var(--p-3); align-items:end;
  grid-template-columns:1fr 1fr 1fr auto;
  max-width:var(--p-ancho); margin:0 auto var(--p-6);
  padding:var(--p-4); border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
}
.di-cambiar .h-buscar__campo{ margin:0 }

.di-lista{ display:flex; flex-direction:column; gap:var(--p-3); max-width:60rem; margin:0 auto }
.di-tipo{
  display:grid; gap:var(--p-4); align-items:center;
  grid-template-columns:160px 1fr auto;
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  padding:var(--p-3);
}
/* Lo agotado se enseña, no se esconde: saber que existe una triple y que hoy
   no queda es información; que desaparezca parece que no la hay nunca */
.di-tipo--sin{ opacity:.55 }
.di-tipo__foto{ display:block; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radio-tarjeta) }
.di-tipo__foto img{ width:100%; height:100%; object-fit:cover; display:block }
.di-tipo h2{
  font-family:var(--fuente-editorial); font-weight:400; font-size:var(--p-xl);
  margin:0 0 var(--p-1);
}
.di-tipo__datos{ margin:0; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 66%,transparent) }
.di-tipo__pocas{
  margin:var(--p-2) 0 0; font-size:var(--p-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--e-atencion);
}
.di-tipo__precio{ text-align:right }
.di-tipo__noche{ margin:0; display:flex; align-items:baseline; gap:6px; justify-content:flex-end }
.di-tipo__noche b{ font-size:var(--p-xl); font-weight:500 }
.di-tipo__noche i{ font-style:normal; font-size:var(--p-xs);
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent) }
.di-tipo__total{ margin:2px 0 var(--p-3); font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 66%,transparent) }
.di-tipo__agotado{ margin:0; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent) }

/* ---- la promoción ----------------------------------------------------------
   Dos precios juntos solo funcionan si uno pesa MENOS que el otro. El tachado
   va pequeño y apagado, y el de ahora grande y en acento: si los dos van del
   mismo tamaño el ojo tiene que leerlos para saber cuál paga, y ese medio
   segundo es justo lo que la oferta quería ahorrarle.
   --------------------------------------------------------------------------- */
.di-tipo__promo{
  margin:var(--p-2) 0 0; display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px 3px 7px; border-radius:999px;
  background:color-mix(in srgb,var(--hsv-acento) 12%,transparent);
  color:var(--hsv-acento);
  font-size:var(--p-xs); letter-spacing:.06em; text-transform:uppercase;
}
.di-tipo__promo .ico{ width:13px; height:13px; flex:none }

.di-tipo__antes{
  margin:0 0 1px; display:flex; align-items:center; gap:7px; justify-content:flex-end;
  font-size:var(--p-sm);
}
.di-tipo__antes s{ color:color-mix(in srgb,var(--hsv-tinta) 45%,transparent) }
/* El porcentaje es lo único que se lee de lejos: por eso lleva el fondo */
.di-tipo__baja{
  padding:1px 7px; border-radius:999px;
  background:var(--hsv-acento); color:#fff;
  font-size:var(--p-xs); font-weight:600; letter-spacing:.02em;
}
.di-tipo__noche--oferta b{ color:var(--hsv-acento) }

.di-nada{
  text-align:center; max-width:46ch; margin:0 auto;
  font-family:var(--fuente-editorial); font-style:italic; font-size:var(--p-lg);
}
.di-nada__ir{ font-size:var(--p-base) }
.di-nada a{ color:var(--hsv-acento) }
.di-nota{
  text-align:center; margin:var(--p-5) auto 0; max-width:52ch;
  font-size:var(--p-sm); color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent);
}

/* ---- el formulario ---- */
.re-cols{
  display:grid; gap:var(--p-6); max-width:56rem; margin:0 auto;
  grid-template-columns:1fr 1.2fr;
}
.re-resumen{
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  padding:var(--p-4); align-self:start;
}
.re-resumen__foto{ display:block; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radio-tarjeta); margin-bottom:var(--p-3) }
.re-resumen__foto img{ width:100%; height:100%; object-fit:cover; display:block }
.re-resumen h2{
  font-family:var(--fuente-editorial); font-weight:400; font-size:var(--p-xl); margin:0 0 var(--p-3);
}
.re-detalle{ margin:0 0 var(--p-3); padding:0 }
.re-detalle div{ display:flex; justify-content:space-between; gap:var(--p-3);
  padding:5px 0; font-size:var(--p-sm) }
.re-detalle dt{ color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent) }
.re-detalle dd{ margin:0 }
.re-total{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--p-borde); padding-top:var(--p-3); margin:0;
}
.re-total b{ font-size:var(--p-xl); font-weight:500 }
.re-total__nota{ margin:var(--p-1) 0 0; font-size:var(--p-xs);
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent) }

.re-forma{ display:flex; flex-direction:column; gap:var(--p-4) }
.re-forma textarea{
  font-family:inherit; font-size:var(--p-base); color:var(--hsv-tinta);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  padding:var(--p-2) var(--p-3); resize:vertical;
}
.re-forma textarea:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:2px }
.re-problema{
  margin:0; padding:var(--p-3); border-radius:var(--radio-tarjeta);
  background:color-mix(in srgb,var(--e-error) 8%,transparent); color:var(--e-error);
}
/* Se dice antes de pulsar qué va a pasar: un botón que lleva a una pantalla
   de pago que nadie esperaba es la forma más rápida de perder la confianza */
.re-aviso{
  margin:0; font-size:var(--p-sm); line-height:1.7;
  color:color-mix(in srgb,var(--hsv-tinta) 70%,transparent);
}
.re-ir{ align-self:flex-start }

/* ---- la reserva hecha ---- */
.rh-tarjeta{
  max-width:44rem; margin:0 auto; text-align:center;
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  padding:var(--p-6) var(--p-4);
}
/* El código es lo único que hay que recordar: es lo más grande de la pantalla */
.rh-codigo{ margin:0 0 var(--p-6) }
.rh-codigo i{
  display:block; font-style:normal; font-size:var(--p-xs); letter-spacing:.14em;
  text-transform:uppercase; color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent);
  margin-bottom:var(--p-2);
}
.rh-codigo b{
  font-size:clamp(1.8rem,5vw,2.8rem); font-weight:500; letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
.rh-total{
  display:flex; justify-content:center; align-items:baseline; gap:var(--p-3);
  border-top:1px solid var(--p-borde); padding-top:var(--p-4); margin:var(--p-4) 0 0;
}
.rh-total b{ font-size:var(--p-xl); font-weight:500 }   /* total: manda */
.rh-estado{
  display:inline-block; font-size:var(--p-xs); letter-spacing:.1em; text-transform:uppercase;
  padding:3px var(--p-2); border-radius:var(--radio-tarjeta); border:1px solid currentColor;
}
.rh-estado--atencion{ color:var(--e-atencion) }
.rh-estado--exito{ color:var(--e-exito) }
.rh-estado--curso{ color:var(--e-curso) }
.rh-estado--neutro{ color:var(--e-neutro) }
.rh-estado--error{ color:var(--e-error) }
.rh-ayuda{
  text-align:center; margin:var(--p-5) auto 0; max-width:50ch;
  font-family:var(--fuente-editorial); font-style:italic; font-size:var(--p-lg);
}
.rh-ayuda a{ color:var(--hsv-acento) }

@media (max-width:820px){
  .re-cols{ grid-template-columns:1fr }
  .di-cambiar{ grid-template-columns:1fr 1fr }
  .di-cambiar .h-buscar__ir{ grid-column:1 / -1; justify-self:end }
  .di-tipo{ grid-template-columns:110px 1fr; }
  .di-tipo__precio{ grid-column:1 / -1; text-align:left; display:flex;
    align-items:center; gap:var(--p-3); flex-wrap:wrap }
  .di-tipo__total{ margin:0 }
  .di-tipo__antes{ justify-content:flex-start }
}
@media (max-width:560px){
  .di-cambiar{ grid-template-columns:1fr }
  .di-tipo{ grid-template-columns:1fr }
}

/* ---------------------------------------------------------------------------
   EL RECUADRO FLOTANTE DE LA ESQUINA
   Lo que se ve es la IMAGEN del evento: quien la sube ya le puso su diseño.
   El recuadro solo pone el marco, la ✕ y el enlace.
   --------------------------------------------------------------------------- */
.ev-flota[hidden]{display:none}
.ev-flota__uno{
  position:fixed;z-index:70;
  width:min(400px,calc(100vw - 32px));
  border-radius:var(--radio-tarjeta);
  /* Sombra de verdad, no la casi imperceptible del resto: esto flota sobre el
     contenido y necesita despegarse para que no parezca parte de la página */
  box-shadow:0 18px 50px -12px rgba(36,36,33,.45);
  /* Entra desde abajo, no aparece en seco */
  opacity:0;transform:translateY(16px);
  transition:opacity var(--dur) var(--curva),transform var(--dur) var(--curva);
}
.ev-flota__uno--on{opacity:1;transform:none}
.ev-flota__uno[hidden]{display:none}

/* Con la barra de abajo del móvil, 16px pega el recuadro al borde: se usan
   los márgenes seguros del aparato cuando los hay */
.ev-flota__uno--abajo-derecha{
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
}
.ev-flota__uno--abajo-izquierda{
  left:max(16px,env(safe-area-inset-left));
  bottom:max(16px,env(safe-area-inset-bottom));
}

.ev-flota__img{display:block;border-radius:var(--radio-tarjeta);overflow:hidden;line-height:0}
.ev-flota__img img{width:100%;height:auto;display:block}

/* La ✕ va FUERA del enlace y encima. Dentro, tocarla abriría el evento en vez
   de cerrar el recuadro, que es lo contrario de lo que se quiere. */
.ev-flota__x{
  position:absolute;top:-10px;right:-10px;
  width:32px;height:32px;display:grid;place-items:center;
  border-radius:50%;border:2px solid #fff;cursor:pointer;
  background:var(--hsv-tinta);color:#fff;
  box-shadow:0 2px 8px rgba(36,36,33,.35);
  transition:background var(--dur) var(--curva),transform var(--dur) var(--curva);
}
.ev-flota__x:hover{background:var(--hsv-acento);transform:scale(1.08)}
.ev-flota__x:focus-visible{outline:2px solid var(--hsv-acento);outline-offset:2px}

@media (max-width:560px){
  /* En el teléfono ocupa el ancho: un recuadro de 400px en una pantalla de 375
     se sale, y uno pequeño no se lee */
  .ev-flota__uno{width:calc(100vw - 24px)}
  .ev-flota__uno--abajo-derecha,
  .ev-flota__uno--abajo-izquierda{left:12px;right:12px}
}

@media (prefers-reduced-motion:reduce){
  .ev-flota__uno{transition:none;opacity:1;transform:none}
}

/* ---------------------------------------------------------------------------
   AVISO DE PRIVACIDAD
   Texto largo y seguido: manda la medida de lectura, no el ancho de la página.
   --------------------------------------------------------------------------- */
.pv__in{ max-width:42rem }
.pv h1{ margin-bottom:var(--p-2) }
.pv__fecha{
  font-size:var(--p-xs); letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb,var(--hsv-tinta) 50%,transparent);
  margin:0 0 var(--p-6);
}
/* El resumen primero y destacado: quien abre esto quiere una respuesta corta,
   no ocho apartados. Los apartados están debajo para quien los quiera. */
.pv__entrada{
  font-family:var(--fuente-editorial); font-size:var(--p-lg); line-height:1.55;
  border-left:2px solid var(--hsv-acento); padding-left:var(--p-4);
  margin:0 0 var(--p-7);
}
.pv h2{
  font-size:var(--p-lg); margin:var(--p-7) 0 var(--p-2);
  padding-top:var(--p-5); border-top:1px solid var(--hsv-borde);
}
.pv h2:first-of-type{ border-top:0; padding-top:0 }
.pv p{ margin:0 0 var(--p-3); line-height:1.7 }
.pv ul{ margin:0 0 var(--p-4); padding-left:1.1rem; line-height:1.7 }
.pv li{ margin-bottom:6px }
.pv a{ color:var(--hsv-acento) }
/* El cierre no es un párrafo más: es la invitación a llamar después de tres
   pantallas de letra pequeña, y estaba escrito en la vista sin regla ninguna. */
.pv__cierre{
  font-family:var(--fuente-editorial); font-size:var(--p-lg); line-height:1.55;
  margin:var(--p-7) 0 0; padding-top:var(--p-5);
  border-top:1px solid var(--hsv-borde);
}

/* ---------------------------------------------------------------------------
   ESCRÍBANOS — el formulario de contacto
   No es un chat: alguien lo lee y devuelve la llamada. La página lo dice.
   --------------------------------------------------------------------------- */
.co-escribir{ max-width:40rem; margin:var(--p-8) auto 0 }
.co-forma{ display:flex; flex-direction:column; gap:var(--p-4) }
.co-forma label{ display:flex; flex-direction:column; gap:6px }
.co-forma label > span{
  font-size:var(--p-xs); letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent);
}
.co-forma label > span i{ font-style:normal; text-transform:none; letter-spacing:0 }
.co-forma input, .co-forma textarea{
  width:100%; border:1px solid var(--p-borde); border-radius:0;
  /* 16px como mínimo: por debajo, iOS hace zoom al enfocar el campo */
  padding:13px 14px; font:inherit; font-size:16px;
  background:var(--hsv-superficie); color:var(--hsv-tinta);
}
.co-forma input:focus, .co-forma textarea:focus{
  outline:2px solid var(--hsv-acento); outline-offset:1px; border-color:transparent;
}
.co-forma textarea{ resize:vertical; min-height:7rem; line-height:1.6 }
.co-forma__fila{ display:grid; grid-template-columns:1fr 1fr; gap:var(--p-4) }
@media (max-width:560px){
  .co-forma__fila{ grid-template-columns:1fr }
  /* Se queda donde estaba: alineado al inicio y midiendo su texto. */
}
.co-forma .p-btn{ align-self:flex-start }
.co-forma__nota{
  margin:0; font-size:var(--p-xs); line-height:1.6;
  color:color-mix(in srgb,var(--hsv-tinta) 50%,transparent);
}
.co-forma__mal{
  margin:0; padding:11px 14px; font-size:var(--p-sm);
  background:rgba(142,59,47,.08); color:#8E3B2F;
  border-left:3px solid #8E3B2F;
}
/* ⚠ La trampa para robots se esconde SIN `display:none`: los que rellenan
   formularios solos saltan los campos ocultos así, y algunos lectores de
   pantalla también los anuncian. Fuera de la vista y fuera del tabulador. */
.co-forma__trampa{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.co-gracias{
  text-align:center; font-family:var(--fuente-editorial); font-style:italic;
  font-size:var(--p-lg); padding:var(--p-6) var(--p-5);
  background:var(--hsv-marfil); margin:0;
}

/* ===========================================================================
   RESERVAR — UNA SOLA PANTALLA
   El dueño, 2026-08-16: «el cliente pierde la paciencia entrando página tras
   página, muy tedioso; lo más simple pero profesionalmente». Fechas arriba,
   habitaciones con sus fotos, y el formulario abriéndose DENTRO de la tarjeta.
   Nada de esto necesita JavaScript para funcionar.
   =========================================================================== */

/* ---- la barra de fechas ----
   Se queda pegada arriba al bajar: cambiar las fechas es lo primero que se
   quiere hacer cuando la lista no convence, y obligar a subir para eso es la
   forma más segura de que alguien se vaya. */
.rv-barra{
  position:sticky; top:var(--p-3); z-index:20;
  display:grid; gap:var(--p-3); align-items:end;
  grid-template-columns:1fr 1fr 1fr auto;
  background:var(--hsv-superficie);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  padding:var(--p-4); margin-bottom:var(--p-4);
  box-shadow:0 1px 2px rgba(36,36,33,.04), 0 12px 34px rgba(36,36,33,.07);
}
.rv-barra__campo{ display:flex; flex-direction:column; gap:var(--p-2); margin:0 }
.rv-barra__campo label{
  font-size:var(--p-xs); letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent);
}
.rv-barra__campo input,
.rv-barra__campo select{
  font-family:inherit; font-size:var(--p-base); color:var(--hsv-tinta);
  background:var(--hsv-superficie);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  /* 48px: el objetivo táctil no baja de 44px, y en iOS un campo por debajo de
     16px hace saltar la página con zoom al enfocarlo */
  height:var(--p-campo); width:100%; padding:0 var(--p-3);
  transition:border-color var(--dur) var(--curva);
}
.rv-barra__campo select{
  appearance:none; -webkit-appearance:none; padding-right:var(--p-5);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  /* ⚠ 19px, NO 21. La flecha se coloca desde el BORDE DE ARRIBA, así que al
     bajar el campo de 48 a 44 se queda descentrada 2px hacia abajo. Es de las
     cosas que no se ven de una en una y se ven las tres juntas. */
  background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.rv-barra__campo input:hover,
.rv-barra__campo select:hover{ border-color:color-mix(in srgb,var(--hsv-tinta) 26%,transparent) }
.rv-barra__campo input:focus-visible,
.rv-barra__campo select:focus-visible{
  outline:2px solid var(--hsv-acento); outline-offset:2px; border-color:transparent;
}
.rv-barra__ir{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--p-2);
  height:var(--p-campo); padding:0 var(--p-5);
  background:var(--hsv-acento); color:#fff; border:0; cursor:pointer;
  font-family:inherit; font-size:var(--p-xs); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  transition:background var(--dur) var(--curva);
}
.rv-barra__ir .ico{ width:16px; height:16px; transition:transform var(--dur) var(--curva) }
.rv-barra__ir:hover{ background:var(--hsv-acento-hover) }
.rv-barra__ir:hover .ico{ transform:translateX(7px) }
.rv-barra__ir:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:2px }

.rv-linea{ margin:0 0 var(--p-4); font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 66%,transparent) }
.rv-nota{
  margin:0 0 var(--p-4); padding:var(--p-3) var(--p-4);
  border-radius:var(--radio-tarjeta); font-size:var(--p-sm);
  background:color-mix(in srgb,var(--e-atencion) 10%,transparent);
  color:var(--e-atencion);
}
.rv-nada{ text-align:center; max-width:46ch; margin:var(--p-6) auto;
  font-family:var(--fuente-editorial); font-style:italic; font-size:var(--p-lg) }
.rv-nada__ir{ font-size:var(--p-base) }
.rv-nada a{ color:var(--hsv-acento) }

/* ---- una habitación ----
   Grid de tres columnas —foto, texto, precio— con el formulario debajo
   ocupando el ancho entero: al abrirlo no se pierde de vista qué se reserva,
   que es justo lo que pasa cuando el formulario vive en otra página. */
.rv-lista{ display:grid; gap:var(--p-4) }
.rv-hab{
  display:grid; gap:var(--p-4);
  grid-template-columns:260px 1fr auto;
  align-items:start;
  background:var(--hsv-superficie);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  padding:var(--p-4);
}
/* Se apaga, no se esconde: saber que existe una triple y que esa noche no
   queda es información; que desaparezca parece que no la hay nunca */
.rv-hab--sin{ opacity:.55 }

/* ---- las fotos, dentro de la tarjeta ----
   Scroll con imanes: se arrastra con el dedo y salta de foto en foto, sin una
   línea de JavaScript. El alto lo fija la proporción, NO la foto: si lo fijara
   la foto, cambiar de imagen movería toda la lista de abajo. */
/* ⚠ `min-width:0` NO es decorativo. Una casilla de rejilla vale por defecto lo
   que mida su contenido (`min-width:auto`), y aquí dentro va una tira flex con
   las fotos al 100% cada una. En cuanto una foto no quepa, la tira estiraría
   la tarjeta y la tarjeta la página: el sitio entero se iría de lado en un
   teléfono. Es la protección estándar de cualquier casilla con contenido que
   se desplaza. */
.rv-hab__fotos{ position:relative; min-width:0 }
.rv-hab__cuerpo{ min-width:0 }
.rv-hab__tira{
  display:flex; gap:var(--p-2);
  overflow-x:auto; scroll-snap-type:x mandatory;
  border-radius:var(--radio-tarjeta);
  scrollbar-width:none;
}
.rv-hab__tira::-webkit-scrollbar{ display:none }
.rv-hab__tira:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:3px }
.rv-hab__tira figure{
  margin:0; flex:0 0 100%; scroll-snap-align:center;
  aspect-ratio:4/3; overflow:hidden; border-radius:var(--radio-tarjeta);
}
.rv-hab__tira img{ width:100%; height:100%; object-fit:cover; display:block }
.rv-hab__cuantas{
  position:absolute; right:8px; bottom:8px; margin:0;
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  background:rgba(28,28,26,.62); color:#fff; font-size:var(--p-xs);
  backdrop-filter:blur(6px);
}
.rv-hab__cuantas .ico{ width:13px; height:13px }

.rv-hab__cuerpo h2{
  font-family:var(--fuente-editorial); font-weight:400; font-size:var(--p-xl);
  margin:0 0 var(--p-1);
}
.rv-hab__datos{ margin:0; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 66%,transparent) }
.rv-hab__promo{
  margin:var(--p-2) 0 0; display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px 3px 7px; border-radius:999px;
  background:color-mix(in srgb,var(--hsv-acento) 12%,transparent);
  color:var(--hsv-acento);
  font-size:var(--p-xs); letter-spacing:.06em; text-transform:uppercase;
}
.rv-hab__promo .ico{ width:13px; height:13px; flex:none }
.rv-hab__trae{
  list-style:none; margin:var(--p-3) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--p-2) var(--p-3);
  font-size:var(--p-sm); color:color-mix(in srgb,var(--hsv-tinta) 70%,transparent);
}
.rv-hab__trae li{ display:inline-flex; align-items:center; gap:6px }
.rv-hab__trae .ico{ width:15px; height:15px; flex:none;
  color:color-mix(in srgb,var(--hsv-tinta) 45%,transparent) }
.rv-hab__pocas{
  margin:var(--p-3) 0 0; font-size:var(--p-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--e-atencion);
}
.rv-hab__cabe{ margin:var(--p-2) 0 0; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent) }

/* ---- el precio ----
   Dos precios juntos solo funcionan si uno pesa MENOS que el otro: el tachado
   pequeño y apagado, el de ahora grande y en acento. Si van del mismo tamaño
   hay que leerlos para saber cuál se paga, y ese medio segundo es justo lo que
   la oferta quería ahorrar. */
.rv-hab__precio{ text-align:right; min-width:170px }
.rv-hab__antes{ margin:0 0 1px; display:flex; align-items:center; gap:7px;
  justify-content:flex-end; font-size:var(--p-sm) }
.rv-hab__antes s{ color:color-mix(in srgb,var(--hsv-tinta) 45%,transparent) }
.rv-hab__baja{
  padding:1px 7px; border-radius:999px;
  background:var(--hsv-acento); color:#fff;
  font-size:var(--p-xs); font-weight:600;
}
.rv-hab__noche{ margin:0; display:flex; align-items:baseline; gap:6px;
  justify-content:flex-end }
/* Precio por noche: es referencia, no el total. Baja de 24 a 19. */
.rv-hab__noche b{ font-size:var(--p-lg); font-weight:500 }
.rv-hab__noche i{ font-style:normal; font-size:var(--p-xs);
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent) }
.rv-hab__noche--oferta b{ color:var(--hsv-acento) }
.rv-hab__total{ margin:2px 0 0; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 66%,transparent) }
.rv-hab__agotado{ margin:0; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent) }

/* ---- el checkout, dentro de la misma tarjeta ---- */
.rv-pedir{ grid-column:1 / -1; border-top:1px solid var(--p-borde);
  margin-top:var(--p-1); padding-top:var(--p-4) }
.rv-pedir__abre{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--p-2);
  height:var(--p-campo); padding:0 var(--p-5);
  background:var(--hsv-acento); color:#fff;
  font-size:var(--p-xs); font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
  transition:background var(--dur) var(--curva);
}
.rv-pedir__abre::-webkit-details-marker{ display:none }
.rv-pedir__abre:hover{ background:var(--hsv-acento-hover) }
.rv-pedir__abre:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:2px }
.rv-pedir__abre .ico{ width:16px; height:16px; transition:transform var(--dur) var(--curva) }
.rv-pedir__abre:hover .ico{ transform:translateX(7px) }
/* Abierto ya no invita a nada: se apaga para que el botón que manda sea el de
   abajo, el que de verdad aparta la habitación */
.rv-pedir[open] > .rv-pedir__abre{
  background:transparent; color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent);
  padding-left:0;
}
.rv-pedir[open] > .rv-pedir__abre .ico{ transform:rotate(90deg) }
.rv-pedir[open] > .rv-pedir__abre:hover{ background:transparent; color:var(--hsv-tinta) }

.rv-pedir__forma{ padding-top:var(--p-3); max-width:640px }
.rv-pedir__campos{ display:grid; gap:var(--p-3); grid-template-columns:1fr 1fr }
.rv-campo{ display:flex; flex-direction:column; gap:var(--p-2); margin:0 }
.rv-campo--ancho{ grid-column:1 / -1 }
.rv-campo label{
  font-size:var(--p-xs); letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent);
}
.rv-campo input{
  font-family:inherit; font-size:var(--p-base); color:var(--hsv-tinta);
  background:var(--hsv-superficie);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  height:var(--p-campo); width:100%; padding:0 var(--p-3);
  transition:border-color var(--dur) var(--curva);
}
.rv-campo input:hover{ border-color:color-mix(in srgb,var(--hsv-tinta) 26%,transparent) }
.rv-campo input:focus-visible{
  outline:2px solid var(--hsv-acento); outline-offset:2px; border-color:transparent;
}
.rv-problema{
  margin:0 0 var(--p-3); padding:var(--p-3) var(--p-4);
  border-radius:var(--radio-tarjeta); font-size:var(--p-sm);
  background:color-mix(in srgb,var(--e-error) 10%,transparent); color:var(--e-error);
}

/* ---- la cuenta ----
   ⚠ Va ANTES del botón y con los impuestos ya contados. Un precio que sube en
   la última pantalla es lo que más reclamaciones genera en hotelería. */
.rv-cuenta{
  margin:var(--p-4) 0 0; padding:var(--p-3) var(--p-4);
  background:color-mix(in srgb,var(--hsv-tinta) 4%,transparent);
  border-radius:var(--radio-tarjeta);
}
.rv-cuenta__fila{
  margin:0 0 var(--p-2); display:flex; justify-content:space-between; gap:var(--p-3);
  font-size:var(--p-sm); color:color-mix(in srgb,var(--hsv-tinta) 72%,transparent);
}
.rv-cuenta__total{
  margin:0; padding-top:var(--p-2); border-top:1px solid var(--p-borde);
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--p-3);
}
/* ══════════ UNA SOLA ESCALA PARA EL DINERO ═════════════════════════════════
   ⚠ EL TOTAL QUE SE PAGA MANDA. Estaba al revés: el precio POR NOCHE salía a
   24px y el TOTAL a 19 —el dato que decide pesaba menos que el de referencia—,
   y el mismo importe cambiaba de tamaño en cada pantalla del flujo: 16, 19, 24
   y 34px según dónde cayera. La persona no puede aprender a leer una pantalla
   si el mismo número se dice de cuatro maneras.

   Tres peldaños y ninguno más, en las cinco pantallas:
     · el total que se paga  → --p-xl  (24px)
     · precio unitario y montos de opción → --p-lg (19px)
     · el desglose → --p-sm (14px)
   Regla R4 del §3-bis. */
.rv-cuenta__total b{ font-size:var(--p-xl); font-weight:500 }
.rv-cuenta__dentro{ margin:var(--p-2) 0 0; font-size:var(--p-xs);
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent) }

.rv-cancelar{ margin-top:var(--p-3); font-size:var(--p-sm) }
.rv-cancelar summary{
  cursor:pointer; color:var(--hsv-acento);
  text-decoration:underline; text-underline-offset:3px;
}
.rv-cancelar ul{ margin:var(--p-2) 0 0; padding-left:1.2em;
  color:color-mix(in srgb,var(--hsv-tinta) 70%,transparent) }
.rv-cancelar li{ margin-bottom:var(--p-1) }

.rv-pedir__aviso{
  margin:var(--p-4) 0 var(--p-3); font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 70%,transparent);
}
.rv-pedir__ir{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--p-2);
  height:44px; padding:0 var(--p-5);
  width:fit-content; align-self:flex-end; margin-left:auto;
  background:var(--hsv-acento); color:#fff; border:0; cursor:pointer;
  font-family:inherit; font-size:var(--p-xs); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background var(--dur) var(--curva);
}
.rv-pedir__ir .ico{ width:16px; height:16px; transition:transform var(--dur) var(--curva) }
.rv-pedir__ir:hover{ background:var(--hsv-acento-hover) }
.rv-pedir__ir:hover .ico{ transform:translateX(7px) }
.rv-pedir__ir:active{ transform:scale(.99) }
.rv-pedir__ir:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:2px }

.rv-pie{
  text-align:center; margin:var(--p-6) auto 0; max-width:52ch;
  font-size:var(--p-sm); color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent);
}

@media (max-width:900px){
  .rv-barra{ grid-template-columns:1fr 1fr }
  .rv-barra__ir{ grid-column:1 / -1; justify-self:end }
  .rv-hab{ grid-template-columns:180px 1fr }
  /* El precio pasa a fila entera y se lee de izquierda a derecha, como todo
     lo demás en un teléfono */
  .rv-hab__precio{ grid-column:1 / -1; text-align:left;
    display:flex; align-items:center; gap:var(--p-3); flex-wrap:wrap; min-width:0 }
  .rv-hab__antes{ justify-content:flex-start }
  .rv-hab__total{ margin:0 }
  .rv-pedir__abre{ width:fit-content; margin-left:auto }
}
@media (max-width:620px){
  /* Entrada y salida van juntas —se eligen de una vez— y personas comparte
     fila con el botón. Apiladas de una en una, la barra medía 230px: pegada
     arriba se comía la quinta parte de un teléfono, así que en móvil deja de
     ser pegajosa y se queda donde está. */
  .rv-barra{ position:static; grid-template-columns:1fr 1fr; padding:var(--p-3) }
  .rv-barra__ir{ grid-column:auto; height:var(--p-campo) }
  .rv-hab{ grid-template-columns:1fr }
  .rv-pedir__campos{ grid-template-columns:1fr }
}

/* El atajo al final del catálogo: para quien ya sabe qué quiere */
.hab-lista__ir{ text-align:center; margin:var(--p-5) 0 0 }

/* ---- cuántas habitaciones ----
   El botón de al lado solo existe para quien no tiene JavaScript: reenvía y
   repinta la cuenta. Con JS el script lo esconde, porque la cuenta ya se
   actualiza sola al cambiar el desplegable. */
.rv-cuantas{ display:flex; align-items:end; gap:var(--p-3); margin-top:var(--p-4) }
.rv-campo--corto{ max-width:220px }
.rv-campo select{
  font-family:inherit; font-size:var(--p-base); color:var(--hsv-tinta);
  background:var(--hsv-superficie);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  height:var(--p-campo); width:100%; padding:0 var(--p-5) 0 var(--p-3);
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  /* ⚠ 19px, NO 21. La flecha se coloca desde el BORDE DE ARRIBA, así que al
     bajar el campo de 48 a 44 se queda descentrada 2px hacia abajo. Es de las
     cosas que no se ven de una en una y se ven las tres juntas. */
  background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.rv-campo select:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:2px }
.rv-cuantas__ver{
  height:var(--p-campo); padding:0 var(--p-4);
  background:transparent; color:var(--hsv-acento);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  font-family:inherit; font-size:var(--p-sm); cursor:pointer; white-space:nowrap;
}
.rv-cuantas__ver:hover{ border-color:var(--hsv-acento) }

/* ---- lo que puede añadir ----
   ⚠ Ninguna casilla viene marcada. La tarjeta se enciende SOLO cuando la
   marca la persona, y por eso el estado «puesto» no existe al cargar. */
.rv-extras{ margin-top:var(--p-5) }
.rv-extras__titulo{
  margin:0 0 var(--p-3); font-size:var(--p-xs); letter-spacing:.14em;
  text-transform:uppercase; font-weight:500;
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent);
}
.rv-extras__lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--p-2) }
.rv-extra label{
  display:flex; align-items:center; gap:var(--p-3); cursor:pointer;
  padding:var(--p-2) var(--p-3);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  transition:border-color var(--dur) var(--curva), background var(--dur) var(--curva);
}
.rv-extra label:hover{ border-color:color-mix(in srgb,var(--hsv-tinta) 26%,transparent) }
.rv-extra input{ width:20px; height:20px; flex:none; accent-color:var(--hsv-acento) }
.rv-extra input:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:2px }
.rv-extra--puesto label{
  border-color:var(--hsv-acento);
  background:color-mix(in srgb,var(--hsv-acento) 6%,transparent);
}
.rv-extra__foto{ width:56px; height:42px; flex:none; overflow:hidden;
  border-radius:var(--radio-tarjeta) }
.rv-extra__foto img{ width:100%; height:100%; object-fit:cover; display:block }
.rv-extra__texto{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 }
.rv-extra__texto b{ font-weight:500 }
.rv-extra__texto i{ font-style:normal; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent) }
/* De dónde sale el número: «Q45 × 2 × 2 noches». Sin esto, un desayuno de
   Q45 que aparece como Q180 parece un error de la página */
.rv-extra__texto em{ font-style:normal; font-size:var(--p-xs);
  color:color-mix(in srgb,var(--hsv-tinta) 45%,transparent) }
.rv-extra__precio{ font-size:var(--p-base); white-space:nowrap }

@media (max-width:620px){
  .rv-cuantas{ flex-direction:column; align-items:stretch }
  .rv-campo--corto{ max-width:none }
  .rv-extra__foto{ display:none }
}

/* ===========================================================================
   EL CALENDARIO DE LA HACIENDA
   El dueño, 2026-08-16: «el verde libre las fechas, y en gris bloqueada la
   fecha para seleccionar, quiere decir que está ocupada».
   ⚠ El verde y el gris NO van solos: los días llenos además están apagados y
   no se pueden pulsar. Uno de cada doce hombres no distingue el rojo del
   verde, y con el gris de al lado tampoco es evidente — que no se pueda tocar
   es lo que de verdad lo comunica.
   =========================================================================== */
.rv-barra--con-cal{ position:sticky }
/* El botón que tapa el campo de fecha: se ve igual que un campo, para que
   nadie tenga que aprender un control nuevo */
.cal__campo{
  font-family:inherit; font-size:var(--p-base); color:var(--hsv-tinta);
  background:var(--hsv-superficie); text-align:left; cursor:pointer;
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  height:var(--p-campo); width:100%; padding:0 var(--p-3);
  transition:border-color var(--dur) var(--curva);
}
.cal__campo:hover{ border-color:color-mix(in srgb,var(--hsv-tinta) 26%,transparent) }
.cal__campo--activo{ border-color:var(--hsv-acento) }
.cal__campo:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:2px }

.cal{
  position:absolute; z-index:60; top:calc(100% + 8px); left:0;
  width:min(340px, calc(100vw - 32px));
  background:var(--hsv-superficie);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  padding:var(--p-3);
  box-shadow:0 1px 2px rgba(36,36,33,.04), 0 18px 44px rgba(36,36,33,.13);
}
.cal[hidden]{ display:none }
.cal__top{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--p-2); margin-bottom:var(--p-3) }
/* `capitalize` pondría «Agosto De 2026»: capitaliza CADA palabra, incluida la
   preposición. Solo la primera letra. */
.cal__mes{ font-weight:500 }
.cal__mes::first-letter{ text-transform:uppercase }
.cal__paso{
  width:34px; height:34px; display:grid; place-items:center;
  background:transparent; border:0; border-radius:50%; cursor:pointer;
  color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent);
}
.cal__paso:hover{ background:color-mix(in srgb,var(--hsv-tinta) 7%,transparent);
  color:var(--hsv-tinta) }
.cal__paso .ico{ width:16px; height:16px }

.cal__dias, .cal__rejilla{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px }
.cal__dias{ margin-bottom:var(--p-2) }
.cal__dias span{
  text-align:center; font-size:var(--p-xs); letter-spacing:.06em;
  color:color-mix(in srgb,var(--hsv-tinta) 45%,transparent);
}
.cal__dia{
  aspect-ratio:1; display:grid; place-items:center;
  background:transparent; border:0; border-radius:50%;
  font-family:inherit; font-size:var(--p-sm); color:var(--hsv-tinta);
  cursor:pointer; position:relative;
  transition:background var(--dur) var(--curva);
}
/* El punto verde debajo del número: libre esa noche */
.cal__dia--libre::after{
  content:''; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--e-exito, #2f7d4f);
}
.cal__dia--libre:hover{ background:color-mix(in srgb,var(--hsv-acento) 12%,transparent) }
.cal__dia--lleno{
  color:color-mix(in srgb,var(--hsv-tinta) 30%,transparent);
  cursor:not-allowed; text-decoration:line-through;
}
.cal__dia--ido{ color:color-mix(in srgb,var(--hsv-tinta) 22%,transparent); cursor:default }
/* El trazo del rango, como en Airbnb: los días de en medio pintados de lado a
   lado —sin redondear, para que se lea como una barra continua— y las dos
   puntas en círculo lleno. La entrada abre por la derecha y la salida cierra
   por la izquierda, así el trazo entra y sale de los círculos sin cortes. */
.cal__dia--medio{ background:color-mix(in srgb,var(--hsv-acento) 12%,transparent);
  border-radius:0 }
.cal__dia--punta{ background:var(--hsv-acento); color:#fff; font-weight:500 }
.cal__dia--punta::after{ background:#fff }
.cal__dia--entra{ border-radius:50% 0 0 50% }
.cal__dia--sale{  border-radius:0 50% 50% 0 }
/* Una sola noche: el círculo se cierra por los dos lados */
.cal__dia--entra.cal__dia--sale{ border-radius:50% }

/* Cuántas noches, con todas las letras: el trazo se ve, pero nadie cuenta
   cuadritos */
.cal__cuenta{
  margin:var(--p-3) 0 0; text-align:center; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 70%,transparent);
}
.cal__cuenta--pide{ color:var(--hsv-acento) }
.cal__dia:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:1px }

.cal__leyenda{
  display:flex; gap:var(--p-4); margin:var(--p-3) 0 0;
  padding-top:var(--p-2); border-top:1px solid var(--p-borde);
  font-size:var(--p-xs); color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent);
}
.cal__leyenda span{ display:inline-flex; align-items:center; gap:6px }
.cal__punto{ width:7px; height:7px; border-radius:50%; display:inline-block }
.cal__punto--libre{ background:var(--e-exito, #2f7d4f) }
.cal__punto--lleno{ background:color-mix(in srgb,var(--hsv-tinta) 25%,transparent) }
.cal__aviso{
  margin:var(--p-3) 0 0; padding:var(--p-2) var(--p-3);
  border-radius:var(--radio-tarjeta); font-size:var(--p-sm);
  background:color-mix(in srgb,var(--e-atencion) 12%,transparent);
  color:var(--e-atencion);
}

/* El pie del calendario: la leyenda a un lado y «Listo» al otro. El panel NO
   se cierra solo al elegir —lo pidió el dueño el 2026-08-16— así que hace
   falta una salida visible y no solo «toque fuera», que nadie adivina. */
.cal__pie{
  display:flex; align-items:center; justify-content:space-between; gap:var(--p-3);
  margin-top:var(--p-3); padding-top:var(--p-2); border-top:1px solid var(--p-borde);
}
.cal__pie .cal__leyenda{ margin:0; padding:0; border:0 }
.cal__listo{
  padding:8px var(--p-4); border:0; cursor:pointer;
  background:var(--hsv-acento); color:#fff;
  font-family:inherit; font-size:var(--p-xs); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
}
.cal__listo:hover{ background:var(--hsv-acento-hover) }
.cal__listo:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:2px }

/* El campo del que cuelga el calendario es su marco de referencia. Sin esto se
   coloca respecto al primer antepasado posicionado, que en la portada está
   media página más arriba. */
.cal__ancla{ position:relative }

/* ---- − 0 + ----
   Cantidades, no casillas: «puede poner 1 o poner 10» (dueño, 2026-08-16).
   El número del medio es el que manda y se puede teclear; los botones son
   comodidad para el pulgar. */
.cuenta{ display:inline-flex; align-items:center; flex:none;
  border:1px solid var(--p-borde); border-radius:999px; overflow:hidden }
.cuenta__btn{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  background:transparent; border:0; cursor:pointer;
  font-family:inherit; font-size:var(--p-lg); line-height:1;
  color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent);
}
.cuenta__btn:hover{ background:color-mix(in srgb,var(--hsv-tinta) 7%,transparent);
  color:var(--hsv-tinta) }
.cuenta__btn:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:-2px }
.cuenta__n{
  width:38px; height:34px; border:0; background:transparent;
  font-family:inherit; font-size:var(--p-base); text-align:center;
  color:var(--hsv-tinta); appearance:textfield; -moz-appearance:textfield;
}
/* Las flechitas del navegador sobran: ya hay − y +, y en cada máquina se ven
   distintas */
.cuenta__n::-webkit-outer-spin-button,
.cuenta__n::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.cuenta__n:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:-2px }
/* En cero, apagado: así se ve de un golpe qué se lleva y qué no */
.rv-extra:not(.rv-extra--puesto) .cuenta__n,
.rv-plato:not(.rv-plato--puesto) .cuenta__n{
  color:color-mix(in srgb,var(--hsv-tinta) 35%,transparent);
}

/* la fila de un complemento, ahora sin <label> envolvente */
.rv-extra{
  display:flex; align-items:center; gap:var(--p-3);
  padding:var(--p-2) var(--p-3);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  transition:border-color var(--dur) var(--curva), background var(--dur) var(--curva);
}
.rv-extra--puesto{
  border-color:var(--hsv-acento);
  background:color-mix(in srgb,var(--hsv-acento) 6%,transparent);
}

/* ---- la carta, en una tira que se desliza ----
   «Un pequeño slider… sin poner desayuno, almuerzo o cena» (dueño). Todos
   juntos: quien reserva no piensa en horarios, piensa en qué se le antoja. */
.rv-carta{ margin-top:var(--p-5) }
.rv-carta__top{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--p-3); margin-bottom:var(--p-3); flex-wrap:wrap }
.rv-carta__top .rv-extras__titulo{ margin:0 }
.rv-carta__buscar{
  display:inline-flex; align-items:center; gap:var(--p-2); flex:1; min-width:180px;
  max-width:260px; padding:0 var(--p-3); height:38px;
  /* Recto: el §3 prohíbe la píldora, y un buscador no es una excepción. */
  border:1px solid var(--p-borde); border-radius:0;
}
.rv-carta__buscar .ico{ width:15px; height:15px; flex:none;
  color:color-mix(in srgb,var(--hsv-tinta) 45%,transparent) }
.rv-carta__buscar input{
  border:0; background:transparent; width:100%; height:100%;
  font-family:inherit; font-size:var(--p-sm); color:var(--hsv-tinta);
}
.rv-carta__buscar input:focus{ outline:none }
.rv-carta__buscar:focus-within{ border-color:var(--hsv-acento) }

.rv-carta__tira{
  list-style:none; margin:0; padding:0 0 var(--p-2);
  display:flex; gap:var(--p-3);
  overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.rv-plato{
  flex:0 0 150px; scroll-snap-align:start;
  display:flex; flex-direction:column; gap:6px;
  padding:var(--p-2); border:1px solid var(--p-borde);
  border-radius:var(--radio-tarjeta);
  transition:border-color var(--dur) var(--curva), background var(--dur) var(--curva);
}
.rv-plato[hidden]{ display:none }
.rv-plato--puesto{
  border-color:var(--hsv-acento);
  background:color-mix(in srgb,var(--hsv-acento) 6%,transparent);
}
.rv-plato__foto{ display:block; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radio-tarjeta) }
.rv-plato__foto img{ width:100%; height:100%; object-fit:cover; display:block }
.rv-plato__nombre{ font-weight:500; font-size:var(--p-sm); line-height:1.25 }
.rv-plato__precio{ font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent) }
.rv-plato .cuenta{ align-self:flex-start; margin-top:auto }
.rv-carta__nada{ margin:var(--p-3) 0 0; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent) }

/* ===========================================================================
   PAGAR EN LÍNEA
   Mientras el cobro esté apagado —como sale de fábrica— nada de esto se ve.
   =========================================================================== */
.rh-pago{ margin:var(--p-5) 0 0; text-align:center }
.rh-pago__pie{
  margin:var(--p-2) auto 0; max-width:44ch; text-align:center;
  font-size:var(--p-sm); color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent);
}
.rh-pagado{
  display:flex; align-items:flex-start; gap:var(--p-3);
  margin:var(--p-5) 0 0; padding:var(--p-3) var(--p-4);
  border-radius:var(--radio-tarjeta); text-align:left;
  background:color-mix(in srgb,var(--e-exito, #2f7d4f) 10%,transparent);
  font-size:var(--p-sm);
}
.rh-pagado .ico{ width:20px; height:20px; flex:none; color:var(--e-exito, #2f7d4f) }
.rh-pagado__prueba{ display:block; font-style:normal;
  color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent) }

/* ---- la pasarela de mentira ---- */
.pp-caja{
  max-width:34rem; margin:0 auto; padding:var(--p-5);
  background:var(--hsv-superficie);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
}
.pp-aviso{
  display:flex; align-items:flex-start; gap:var(--p-3);
  margin:0 0 var(--p-4); padding:var(--p-3) var(--p-4);
  border-radius:var(--radio-tarjeta); font-size:var(--p-sm);
  background:color-mix(in srgb,var(--e-atencion) 12%,transparent);
  color:var(--e-atencion);
}
.pp-aviso .ico{ width:20px; height:20px; flex:none }
.pp-detalle{ margin:0 0 var(--p-5); display:grid; gap:var(--p-3) }
.pp-detalle > div{ display:flex; justify-content:space-between; gap:var(--p-3);
  padding-bottom:var(--p-2); border-bottom:1px solid var(--p-borde) }
.pp-detalle dt{ font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent) }
.pp-detalle dd{ margin:0 }
.pp-ir{ display:flex; width:fit-content; margin-left:auto }
.pp-volver{ margin:var(--p-3) 0 0; text-align:center; font-size:var(--p-sm) }
.pp-volver a{ color:var(--hsv-acento) }

/* ---- elegir cuánto pagar ---- */
.rh-elegir{ margin:var(--p-5) 0 0; text-align:left }
.rh-elegir__titulo{
  margin:0 0 var(--p-3); text-align:center;
  font-size:var(--p-xs); letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent);
}
.rh-opcion{
  display:flex; align-items:center; gap:var(--p-3);
  padding:var(--p-3); margin-bottom:var(--p-2); cursor:pointer;
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  transition:border-color var(--dur) var(--curva), background var(--dur) var(--curva);
}
.rh-opcion:hover{ border-color:color-mix(in srgb,var(--hsv-tinta) 26%,transparent) }
.rh-opcion:has(input:checked){
  border-color:var(--hsv-acento);
  background:color-mix(in srgb,var(--hsv-acento) 6%,transparent);
}
.rh-opcion input{ width:20px; height:20px; flex:none; accent-color:var(--hsv-acento) }
.rh-opcion input:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:3px }
.rh-opcion__texto{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0 }
.rh-opcion__texto b{ font-weight:500 }
.rh-opcion__texto i{ font-style:normal; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent) }
.rh-opcion__monto{ font-size:var(--p-lg); white-space:nowrap }
.rh-elegir__ir{ display:flex; width:fit-content; margin:var(--p-3) 0 0 auto }

/* El plazo para pagar. Se dice antes, no al volver y encontrarla vendida. */
.rh-plazo{
  display:flex; align-items:flex-start; gap:var(--p-3);
  margin:var(--p-5) 0 0; padding:var(--p-3) var(--p-4);
  border-radius:var(--radio-tarjeta); text-align:left; font-size:var(--p-sm);
  background:color-mix(in srgb,var(--e-atencion) 12%,transparent);
  color:var(--e-atencion);
}
.rh-plazo .ico{ width:20px; height:20px; flex:none }

/* ---- depositar ---- */
/* ⚠ `flex:1` EN UN BOTÓN ES `width:100%` CON OTRO NOMBRE. Los dos botones de
   pago se repartían el ancho entero de la tarjeta —dos franjas de color de
   350px cada una en escritorio— y en teléfono cada uno se estiraba a todo su
   sitio. Es lo mismo que prohíbe el §3, escrito de forma que no se busca al
   revisar. Miden su texto y se alinean a la derecha, como todos. */
.rh-formas{ display:flex; gap:var(--p-3); flex-wrap:wrap; margin-top:var(--p-3);
  justify-content:flex-end }
.rh-formas .rh-elegir__ir{ margin-top:0 }
.rh-revision{
  display:flex; align-items:flex-start; gap:var(--p-3);
  margin:var(--p-5) 0 0; padding:var(--p-3) var(--p-4);
  border-radius:var(--radio-tarjeta); text-align:left; font-size:var(--p-sm);
  background:color-mix(in srgb,var(--hsv-tinta) 5%,transparent);
}
.rh-revision .ico{ width:20px; height:20px; flex:none;
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent) }
.rh-revision a{ color:var(--hsv-acento) }

.dp-caja{
  max-width:34rem; margin:0 auto; padding:var(--p-5);
  background:var(--hsv-superficie);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
}
.dp-hecho, .dp-plazo, .dp-rechazo{
  display:flex; align-items:flex-start; gap:var(--p-3);
  padding:var(--p-3) var(--p-4); margin:0 0 var(--p-4);
  border-radius:var(--radio-tarjeta); font-size:var(--p-sm);
}
.dp-hecho{ background:color-mix(in srgb,var(--e-exito, #2f7d4f) 10%,transparent) }
.dp-hecho .ico{ color:var(--e-exito, #2f7d4f) }
.dp-plazo{ background:color-mix(in srgb,var(--hsv-tinta) 5%,transparent);
  color:color-mix(in srgb,var(--hsv-tinta) 70%,transparent) }
.dp-rechazo{ background:color-mix(in srgb,var(--e-error) 10%,transparent);
  color:var(--e-error) }
.dp-hecho .ico, .dp-plazo .ico, .dp-rechazo .ico{ width:20px; height:20px; flex:none }
.dp-cambiar{ margin:calc(var(--p-4) * -1) 0 var(--p-4); font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent) }

.dp-cuanto{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--p-3);
  margin:0 0 var(--p-4); padding-bottom:var(--p-3);
  border-bottom:1px solid var(--p-borde);
}
.dp-cuanto span{ font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent) }
/* De 34 a 24: `--p-2xl` es el tamaño de un TITULAR DE SECCIÓN, y esto es un
   importe. Sigue siendo el más grande de su pantalla porque es el total. */
.dp-cuanto b{ font-size:var(--p-xl); font-weight:500 }

.dp-banco{ margin:0 0 var(--p-4); display:grid; gap:var(--p-3) }
.dp-banco > div{ display:flex; justify-content:space-between; gap:var(--p-3);
  align-items:center; flex-wrap:wrap }
.dp-banco dt{ font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent) }
.dp-banco dd{ margin:0 }
/* El número de cuenta es lo que más se equivoca al copiar: monoespaciado, con
   los dígitos separados, y con botón para copiarlo */
.dp-banco__cuenta{ display:flex; align-items:center; gap:var(--p-2) }
.dp-banco__cuenta code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:var(--p-base); letter-spacing:.06em;
  background:color-mix(in srgb,var(--hsv-tinta) 6%,transparent);
  padding:3px 8px; border-radius:var(--radio-tarjeta);
}
.dp-copiar{
  padding:4px 10px; cursor:pointer;
  background:transparent; border:1px solid var(--p-borde);
  border-radius:999px; font-family:inherit; font-size:var(--p-xs);
  color:var(--hsv-acento);
}
.dp-copiar:hover{ border-color:var(--hsv-acento) }

.dp-forma{ display:grid; gap:var(--p-4); margin-top:var(--p-4) }
.dp-campo{ display:flex; flex-direction:column; gap:var(--p-2) }
.dp-campo label{
  font-size:var(--p-xs); letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent);
}
.dp-campo input[type="text"]{
  font-family:inherit; font-size:var(--p-base); color:var(--hsv-tinta);
  background:var(--hsv-superficie);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  height:var(--p-campo); padding:0 var(--p-3);
}
.dp-campo input[type="file"]{
  font-family:inherit; font-size:var(--p-sm);
  padding:var(--p-3); border:1px dashed var(--p-borde);
  border-radius:var(--radio-tarjeta); background:transparent;
}
.dp-campo input:focus-visible{ outline:2px solid var(--hsv-acento); outline-offset:2px }
.dp-ayuda{ margin:0; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent) }
.dp-ir{ display:flex; width:fit-content; margin-left:auto }
.dp-nota{ margin:var(--p-4) 0 0; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 65%,transparent) }
.dp-volver{ margin:var(--p-3) 0 0; text-align:center; font-size:var(--p-sm) }
.dp-volver a{ color:var(--hsv-acento) }
/* El descuento de la comisión: se dice en la política, no en letra pequeña */
.rv-cancelar__comision{
  margin:var(--p-2) 0 0; padding-left:1.2em;
  font-size:var(--p-sm); color:color-mix(in srgb,var(--hsv-tinta) 70%,transparent);
}

/* ---- cómo y cuánto paga, dentro del checkout ----
   Va ANTES del botón. Preguntarlo después de crear la reserva convierte el
   pago en algo opcional que se cierra sin más, y era justo lo que había que
   quitar. */
.rv-pagar{
  margin:var(--p-4) 0 0; padding:var(--p-3) var(--p-4);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
}
.rv-pagar__titulo{
  margin:0 0 var(--p-2); font-size:var(--p-xs); letter-spacing:.14em;
  text-transform:uppercase; font-weight:500;
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent);
}
.rv-pagar__titulo + .rv-pagar__formas,
.rv-pagar__op + .rv-pagar__titulo{ margin-top:var(--p-3) }
.rv-pagar__op{
  display:flex; align-items:center; gap:var(--p-3); cursor:pointer;
  padding:var(--p-2) var(--p-3); margin-bottom:6px;
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  transition:border-color var(--dur) var(--curva), background var(--dur) var(--curva);
}
.rv-pagar__op:has(input:checked){
  border-color:var(--hsv-acento);
  background:color-mix(in srgb,var(--hsv-acento) 6%,transparent);
}
.rv-pagar__op input{ width:18px; height:18px; flex:none; accent-color:var(--hsv-acento) }
.rv-pagar__texto{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0 }
.rv-pagar__texto b{ font-weight:500 }
.rv-pagar__texto i{ font-style:normal; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent) }
/* Un monto no se lee como cuerpo: sube de 16 a 19, el peldaño de los montos. */
.rv-pagar__monto{ font-size:var(--p-lg); white-space:nowrap }

.rv-pagar__formas{ display:grid; gap:6px; grid-template-columns:1fr 1fr }
.rv-pagar__forma{
  display:flex; align-items:center; gap:var(--p-2); cursor:pointer;
  padding:var(--p-2) var(--p-3);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  transition:border-color var(--dur) var(--curva), background var(--dur) var(--curva);
}
.rv-pagar__forma:has(input:checked){
  border-color:var(--hsv-acento);
  background:color-mix(in srgb,var(--hsv-acento) 6%,transparent);
}
.rv-pagar__forma input{ width:18px; height:18px; flex:none; accent-color:var(--hsv-acento) }
.rv-pagar__forma span{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.rv-pagar__forma b{ font-weight:500; font-size:var(--p-sm) }
.rv-pagar__forma i{ font-style:normal; font-size:var(--p-xs);
  color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent) }

@media (max-width:620px){
  .rv-pagar__formas{ grid-template-columns:1fr }
}

/* WhatsApp: la vía de confirmación mientras no haya correo */
.rh-wa{ margin:var(--p-5) 0 0; text-align:center }
.rh-wa .ico{ width:17px; height:17px; margin-right:7px; vertical-align:-3px }
.rh-wa__pie{
  margin:var(--p-2) auto 0; max-width:42ch; text-align:center;
  font-size:var(--p-sm); color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent);
}

/* ---- el QR de la reserva ---- */
.rh-qr{ margin:var(--p-5) 0 0; text-align:center }
.rh-qr__cuadro{
  display:inline-block; padding:var(--p-3); background:#fff;
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  line-height:0;
}
/* El QR se lee por contraste: negro sobre blanco y nada más. Teñirlo del color
   de la marca es lo que hace que una cámara con poca luz no lo reconozca. */
.rh-qr__cuadro svg{ width:170px; height:170px; display:block }
.rh-qr__dice{ margin:var(--p-3) 0 0; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 70%,transparent) }
.rh-qr__baja{ margin:var(--p-2) 0 0 }
.rh-qr__baja .ico{ width:15px; height:15px; margin-right:6px; vertical-align:-2px }
@media print{
  /* Al imprimir la reserva, lo que importa es el código y el QR */
  .rh-qr__baja, .rh-wa, .rh-elegir, .rh-formas{ display:none }
}

/* ---- «sus reservas», las de este navegador ---- */
.mis{
  margin:0 0 var(--p-4); padding:var(--p-3) var(--p-4);
  background:var(--hsv-superficie);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
}
.mis[hidden]{ display:none }
.mis__titulo{
  margin:0 0 var(--p-2); font-size:var(--p-xs); letter-spacing:.14em;
  text-transform:uppercase; font-weight:500;
  color:color-mix(in srgb,var(--hsv-tinta) 62%,transparent);
}
.mis__lista{ list-style:none; margin:0; padding:0; display:flex; gap:var(--p-2);
  flex-wrap:wrap }
.mis__lista li{
  display:flex; align-items:center; gap:4px;
  border:1px solid var(--p-borde); border-radius:999px; padding:2px 4px 2px 12px;
}
.mis__lista a{ display:flex; align-items:baseline; gap:7px; font-size:var(--p-sm) }
.mis__lista b{ font-weight:500 }
.mis__lista i{ font-style:normal;
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent) }
.mis__lista button{
  width:24px; height:24px; border:0; background:transparent; cursor:pointer;
  border-radius:50%; font-size:var(--p-base); line-height:1;
  color:color-mix(in srgb,var(--hsv-tinta) 45%,transparent);
}
.mis__lista button:hover{ background:color-mix(in srgb,var(--hsv-tinta) 8%,transparent);
  color:var(--hsv-tinta) }
/* ⚠ Se dice que se pierde. Prometer «su cuenta» y perderla al limpiar el
   navegador es peor que no ofrecer nada. */
.mis__pie{ margin:var(--p-2) 0 0; font-size:var(--p-xs);
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent) }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPRAR LA ENTRADA DE UN EVENTO (Fase 4.7b)
   ═══════════════════════════════════════════════════════════════════════════ */

.ev-vender{
  margin:var(--p-6) 0; padding:var(--p-4);
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  background:var(--hsv-superficie);
  display:grid; gap:var(--p-4);
}
@media (min-width:840px){
  /* El precio a un lado y el formulario al otro: en escritorio, el precio
     debajo del formulario obliga a subir la vista para comprobarlo. */
  .ev-vender{ grid-template-columns:minmax(9rem,14rem) 1fr; align-items:start;
    gap:var(--p-5); padding:var(--p-5) }
}
.ev-vender__precio{ margin:0; display:grid }
.ev-vender__precio b{ font-family:var(--fuente-titular); font-size:var(--p-2xl);
  line-height:1 }
.ev-vender__precio span{ font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent) }
.ev-vender__quedan{ margin:var(--p-2) 0 0; font-size:var(--p-sm) }
/* ⚠ En rojo solo cuando de verdad queda poco. Si siempre alarmara, dejaría de
   significar nada el día que quedan tres. */
.ev-vender__quedan--pocas{ color:var(--e-atencion); font-weight:600 }

.ev-vender__forma{ display:grid; gap:var(--p-3) }
.ev-vender__fila{ display:grid; gap:var(--p-3);
  grid-template-columns:1fr; }
@media (min-width:560px){
  .ev-vender__fila{ grid-template-columns:1fr auto }
  .ev-vender__fila:last-of-type{ grid-template-columns:1fr 1fr }
}
.ev-vender__forma .p-campo--corto{ max-width:7rem }

.ev-vender__dto > summary{ cursor:pointer; font-size:var(--p-sm);
  color:var(--hsv-acento); font-weight:500; padding:var(--p-2) 0 }
.ev-vender__dto[open] > summary{ margin-bottom:var(--p-2) }

.ev-vender__forma-pago{ border:0; padding:0; margin:0; display:grid; gap:6px }
.ev-vender__forma-pago legend{ padding:0; margin-bottom:4px }
.p-radio{ display:flex; align-items:center; gap:8px; font-size:var(--p-sm);
  cursor:pointer }

.ev-vender__ir{ justify-self:start }
.ev-vender__letra{ margin:0; font-size:var(--p-xs);
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent) }

/* Cuando NO se puede comprar, se dice por qué */
.ev-vender__no{ display:flex; gap:10px; align-items:flex-start;
  margin:var(--p-5) 0; padding:var(--p-3) var(--p-4);
  border-radius:var(--radio-tarjeta); background:var(--hsv-superficie-alt);
  font-size:var(--p-sm) }
.ev-vender__no .ico{ width:18px; height:18px; flex:none; margin-top:2px }

/* ------------------------------------------------------- la compra hecha --- */
.en-caja{ max-width:46rem; margin:0 auto; display:grid; gap:var(--p-4) }

.en-estado{ display:flex; gap:12px; align-items:flex-start; margin:0;
  padding:var(--p-4); border-radius:var(--radio-tarjeta); font-size:var(--p-base) }
.en-estado .ico{ width:24px; height:24px; flex:none }
.en-estado b{ display:block }
.en-estado--bien{ background:var(--e-exito-suave); color:var(--e-exito) }
.en-estado--espera{ background:var(--e-atencion-suave); color:var(--e-atencion) }
.en-estado--mal{ background:var(--e-error-suave); color:var(--e-error) }

.en-cuenta{ margin:0; display:grid; gap:var(--p-2);
  padding:var(--p-4); border:1px solid var(--p-borde);
  border-radius:var(--radio-tarjeta) }
.en-cuenta > div{ display:flex; justify-content:space-between; gap:var(--p-3);
  align-items:baseline; font-size:var(--p-sm) }
.en-cuenta dt{ color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent) }
.en-cuenta dd{ margin:0; font-weight:600 }
.en-cuenta__dto dd{ color:var(--e-exito) }
.en-codigo{ font-size:var(--p-base); letter-spacing:.08em }

.en-dice{ margin:0; font-size:var(--p-sm);
  color:color-mix(in srgb,var(--hsv-tinta) 60%,transparent) }

/* ⚠ En fila con desplazamiento: cinco entradas una debajo de otra son cinco
   pantallas de teléfono, y en la puerta hay que llegar a la tercera rápido. */
.en-tira{ display:flex; gap:var(--p-3); overflow-x:auto;
  scroll-snap-type:x mandatory; padding-bottom:var(--p-2);
  /* ⚠ `min-width:0` para que la fila pueda encoger dentro de la rejilla. Sin
     esto, el contenido la ensancha y la página entera se desplaza a lo ancho. */
  min-width:0 }
.en-boleto{ margin:0; flex:0 0 auto; scroll-snap-align:center;
  width:11rem; padding:var(--p-3); text-align:center;
  border:1px solid var(--p-borde); border-radius:var(--radio-tarjeta);
  background:var(--hsv-superficie) }
.en-boleto__qr svg{ width:100%; height:auto; display:block }
.en-boleto figcaption{ margin-top:var(--p-2); display:grid; gap:2px }
.en-boleto code{ font-size:var(--p-sm); letter-spacing:.05em }
.en-boleto span{ font-size:var(--p-xs);
  color:color-mix(in srgb,var(--hsv-tinta) 55%,transparent) }
.en-boleto i{ font-style:normal; font-size:var(--p-xs); color:var(--e-neutro);
  font-weight:600 }
/* La usada se apaga, no desaparece: quien la busca tiene que encontrarla */
.en-boleto--usada{ opacity:.45 }

.en-nota{ margin:0; font-size:var(--p-sm) }
.en-pagar{ display:flex; gap:var(--p-3); flex-wrap:wrap; align-items:center }
.en-volver{ margin:0; font-size:var(--p-sm) }

/* ------------------------------------------------------ avisos de la web ---
   ⚠ NO FLOTAN, como en el panel. Aquí el aviso es la respuesta a lo que la
   persona acaba de hacer —«no quedan entradas», «esa foto pesa demasiado»— y
   tiene que estar donde va a mirar: arriba del contenido y empujándolo. Un
   recuadro que se desvanece a los cinco segundos se pierde justo cuando se
   está leyendo otra cosa. */
.p-avisos{ padding:var(--p-3) 0 0 }
.p-aviso{ display:flex; gap:10px; align-items:flex-start; margin:0 0 var(--p-2);
  padding:var(--p-3) var(--p-4); border-radius:var(--radio-tarjeta);
  font-size:var(--p-sm); line-height:1.45 }
.p-aviso .ico{ width:20px; height:20px; flex:none; margin-top:1px }
.p-aviso--exito{ background:var(--e-exito-suave); color:var(--e-exito) }
.p-aviso--error{ background:var(--e-error-suave); color:var(--e-error) }
.p-aviso--atencion{ background:var(--e-atencion-suave); color:var(--e-atencion) }

/* ── el gancho de apartar el salón (Fase 10) ──────────────────────────────
   Va en `publico.css` y no en `salon.css` porque lo pinta la página de área,
   que no carga la hoja del salón. */
/* ⚠ ESTABA ENTERO A CERO. Pedía tres tokens del kit —hueco, relleno, esquinas
   y el tamaño del titular— y el kit no se carga en el sitio público: sin
   hueco, sin relleno, esquinas rectas y el titular a tamaño de cuerpo. Un
   recuadro a todo el ancho con el texto pegado al borde izquierdo, y
   justamente en la página que lleva a apartar el salón. Los tokens del sitio
   sí existen; lo que faltaba era usarlos. */
.area-apartar{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--p-4); flex-wrap:wrap;
  background:var(--hsv-superficie); border:1px solid var(--hsv-borde);
  border-radius:var(--radio-tarjeta); padding:var(--p-4);
}
.area-apartar__dice{ margin:0; color:var(--hsv-tinta-70); max-width:44ch }
.area-apartar__dice b{ display:block; color:var(--hsv-tinta);
  font-family:var(--fuente-editorial); font-size:var(--p-lg); font-weight:400 }
@media (max-width:640px){
  .area-apartar{ flex-direction:column; align-items:stretch }
  .area-apartar .p-btn{ text-align:center }
}