/* =====================================================================
   Tiny Room — hoja de estilos del sitio
   Marca: Tiny Room Design System (claude.ai/design).
   Estructura: heredada del sitio de Torote Host; colores y tipografia NO.
   Entrada unica: importa los tokens y despues define los componentes.
   ===================================================================== */

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/base.css");

/* =====================================================================
   Layout
   ===================================================================== */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.section { padding: var(--space-8) 0; }
.section--tight { padding: var(--space-6) 0; }
.section--tint { background: var(--primary-tint); }
.section--sand { background: var(--surface-raised); }

.section__head { max-width: 62ch; margin: 0 0 var(--space-6); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.grid { display: grid; gap: var(--grid-gutter); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .section { padding: var(--space-6) 0; }
}

/* =====================================================================
   Encabezado y navegacion
   ===================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface-page) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--rule-thin) solid var(--border);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.site-header--scrolled { box-shadow: var(--shadow-rest); }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: var(--space-2); border: 0; }
.brand:hover { border: 0; }
/* El logotipo trae el nombre, la regla y el tagline en una sola imagen, asi
   que necesita mas alto que un logotipo de una linea. */
.brand__img { height: 46px; width: auto; display: block; }
@media (max-width: 480px) { .brand__img { height: 36px; } }

/* Tira del motivo de muebles: elemento decorativo, nunca portador de
   informacion. Por eso va con alt vacio en el HTML. */
.motivo {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto var(--space-6);
}
.brand__text {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wordmark);
  font-size: var(--fs-h4);
  color: var(--text-brand);
  line-height: 1;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  color: var(--text-primary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  border-bottom: var(--rule-med) solid transparent;
  padding-bottom: 2px;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--text-brand);
  border-bottom-color: var(--rule);
}

/* En escritorio el menu se ve siempre, aunque el JS haya dejado puesto el
   atributo hidden al volver de un ancho de movil. El CSS manda; el JS no
   es requisito para que la navegacion aparezca. */
@media (min-width: 861px) {
  .nav__links[hidden] { display: flex; }
}

.nav__toggle {
  display: none;
  width: var(--touch-min);
  height: var(--touch-min);
  align-items: center;
  justify-content: center;
  background: none;
  border: var(--rule-thin) solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface-card);
    border-bottom: var(--rule-thin) solid var(--border);
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
  /* Leccion de Torote: un display propio le gana al atributo hidden. */
  .nav__links[hidden] { display: none; }
  .nav__links li { padding: var(--space-2) 0; }
  .nav__links a { display: block; padding: var(--space-2) 0; font-size: var(--fs-body); }
}

/* =====================================================================
   Botones
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border: var(--rule-thin) solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:hover { border-bottom-color: transparent; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--primary); color: var(--text-on-brand); }
.btn--primary:hover { background: var(--primary-hover); color: var(--text-on-brand); }

.btn--accent { background: var(--accent); color: var(--tr-white); }
.btn--accent:hover { background: var(--accent-hover); color: var(--tr-white); }

.btn--ghost { background: transparent; color: var(--text-brand); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--primary-tint); color: var(--text-brand); }

.btn--block { width: 100%; }
.btn--lg { min-height: 52px; padding: 0 var(--space-5); font-size: var(--fs-body); }

/* =====================================================================
   Hero
   ===================================================================== */

.hero { position: relative; overflow: hidden; background: var(--surface-inverse); }
.hero__media { position: absolute; inset: 0; }
.hero__img,
.hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,18,15,0.30) 0%, rgba(20,18,15,0.62) 100%);
}
/* Variante oscura. La foto del hero es la de la portada de la guia oficial,
   que YA viene oscura y calida. Por eso el velo es suave: con el degradado
   fuerte que se uso al principio —pensado para las fotos claras del PMS— esta
   se volvia una mancha cafe. Solo se oscurece abajo a la izquierda, que es
   donde cae el texto. */
.hero--oscuro .hero__media::after {
  background:
    linear-gradient(180deg, rgba(20, 18, 15, 0.10) 0%, rgba(20, 18, 15, 0.62) 100%),
    linear-gradient(90deg, rgba(20, 18, 15, 0.55) 0%, rgba(20, 18, 15, 0) 62%);
}

/* Solo arriba y abajo: hero__inner va junto con .container, y un "padding"
   completo le borraba el margen lateral. En celular y en toda pantalla de
   menos de 1200 px el texto quedaba pegado a la orilla (25 sep 2026). */
.hero__inner {
  position: relative;
  z-index: 1;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  min-height: 62vh;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  align-items: end;
  gap: var(--space-6);
}
.hero__texto { display: flex; flex-direction: column; gap: var(--space-4); }

/* El video oficial es vertical (478x850, grabado en celular). Va en panel,
   no de fondo: a pantalla completa se estiraria 4x y saldria borroso, y el
   encuadre vertical quedaria recortado a la altura del torso. */
/* Se manda por ALTO y el ancho lo saca del aspecto real del video. Al reves
   —dejando que la columna del grid fije el ancho— la caja sale mas cuadrada
   que el video y object-fit recorta la cabeza y los pies de la toma. */
.hero__video {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--rule-thin) solid rgba(244, 238, 226, 0.22);
  box-shadow: var(--shadow-raised);
  aspect-ratio: 478 / 850;
  height: min(58vh, 600px);
  width: auto;
  justify-self: end;
}
.hero__video video { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; align-items: start; }
  .hero__video { height: min(46vh, 420px); justify-self: center; }
}

/* En pantalla angosta la foto deja de ir DETRAS del texto y pasa a ir
   ARRIBA, con su propio formato.

   El motivo: la foto es horizontal (3:2) y el hero de celular es una caja
   alta y angosta. Con object-fit:cover el navegador recorta los lados para
   llenarla, y de una sala completa acaba mostrando el respaldo del sofa.
   Apilada se ve el cuarto entero, que es de lo que se trata. */
@media (max-width: 640px) {
  .hero {
    display: flex;
    flex-direction: column;
    background: var(--tr-near-black);
  }
  .hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 3 / 2;
    flex: none;
  }
  .hero--oscuro .hero__media::after {
    background: linear-gradient(180deg,
      rgba(20, 18, 15, 0) 55%, rgba(20, 18, 15, 0.92) 100%);
  }
  .hero__inner {
    min-height: 0;
    padding-top: var(--space-4);
    padding-bottom: var(--space-6);
  }
  .hero__title { max-width: none; }
}
.hero__title {
  font-size: var(--fs-display);
  color: var(--tr-bone-text);
  max-width: 18ch;
  margin: 0;
}
/* Titular con la composicion de la guia: cursiva para las palabras que
   cargan la marca, versalitas anchas para las que solo enlazan. Cada parte
   va en su renglon, como en la portada. */
.hero__title--marca {
  display: grid;
  gap: 2px;
  max-width: 22ch;
  font-size: var(--fs-h1);
  line-height: 1.08;
  text-wrap: initial;
}
/* Todo el titular va en dorado, como en la portada de la guia. Ahi tampoco
   es un dorado plano: las palabras de enlace van en un tono apagado y las
   que cargan la marca en el brillante. Esa diferencia es la que hace que se
   lea la jerarquia sin cambiar de color. Los dos tonos son los medidos del
   logotipo oficial. */
.hero__linea {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: var(--fs-h4);
  color: #C79B55;
}
.hero__linea b { font-weight: var(--fw-bold); color: #ECB84C; }
.hero__acento {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ECB84C;
}

@media (max-width: 640px) {
  .hero__title--marca { font-size: var(--fs-h2); max-width: none; }
  .hero__linea { font-size: var(--fs-body); }
}

.hero__sub { color: rgba(244,238,226,0.86); max-width: 52ch; font-size: var(--fs-body-lg); margin: 0; }
.hero__eyebrow { color: var(--tr-gold); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 640px) {
  .hero__title { font-size: var(--fs-h1); }
  .hero__inner { min-height: 70vh; }
}

/* =====================================================================
   Tarjetas
   ===================================================================== */

.card {
  background: var(--surface-card);
  border: var(--rule-thin) solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.card:hover { border-color: var(--accent-brand); }

.card__media {
  aspect-ratio: 4 / 3;
  background: var(--surface-raised);
  display: block;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.card:hover .card__media img { transform: scale(1.03); }

.card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.card__title { font-size: var(--fs-h4); margin: 0; }
.card__meta { color: var(--text-secondary); font-size: var(--fs-body-sm); margin: 0; }
.card__foot {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: var(--rule-thin) solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.card__price { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--text-brand); }
.card__price small {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  font-weight: var(--fw-regular);
}

/* Etiquetas */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.tag--green { background: var(--primary-tint); color: var(--text-brand); }

/* =====================================================================
   Formularios
   ===================================================================== */

.form { display: grid; gap: var(--space-4); max-width: 560px; }
.field { display: grid; gap: var(--space-1); }
.field > label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-card);
  color: var(--text-primary);
  border: var(--rule-thin) solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}
.field textarea { min-height: 120px; resize: vertical; padding-top: var(--space-3); }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-tertiary); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--focus-ring); }
.field__hint { font-size: var(--fs-caption); color: var(--text-secondary); }

.check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-body-sm); }
.check input { margin-top: 3px; width: 18px; height: 18px; min-height: 0; accent-color: var(--primary); }

/* Trampa antispam de Netlify Forms: se oculta, no se borra */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-ok,
.form-error {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
}
.form-ok { background: var(--primary-tint); color: var(--text-brand); border: var(--rule-thin) solid var(--primary); }
.form-error { background: var(--accent-tint); color: var(--danger); border: var(--rule-thin) solid var(--danger); }
.form-ok[hidden],
.form-error[hidden] { display: none; }

/* =====================================================================
   Pie de pagina
   ===================================================================== */

.site-footer {
  background: var(--tr-near-black);
  color: var(--tr-bone-text);
  padding: var(--space-7) 0 var(--space-5);
  margin-top: var(--space-8);
}
.site-footer a { color: var(--tr-terracotta-on-dark); }
.site-footer a:hover { color: #E6B392; }
.site-footer h4 { color: var(--tr-bone-text); font-size: var(--fs-body); margin-bottom: var(--space-2); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-6);
}
/* El logotipo del pie es el mismo, recoloreado con los tokens de fondo
   oscuro. Si algun dia se enciende el tema oscuro del sitio, el logotipo
   del ENCABEZADO tambien tiene que cambiar a esta version. */
.site-footer__logo {
  display: block;
  height: 56px;
  width: auto;
  margin: 0 0 var(--space-3);
}
.site-footer__nota {
  font-size: var(--fs-body-sm);
  color: rgba(244, 238, 226, 0.66);
  max-width: 32ch;
  margin: 0;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
}
.site-footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--rule-thin) solid var(--tr-char-600);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: rgba(244,238,226,0.66);
}
@media (max-width: 720px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Boton flotante de WhatsApp
   ===================================================================== */

.wa {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: #25D366;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  box-shadow: var(--shadow-raised);
}
.wa:hover { background: #1FBA57; color: #FFFFFF; border: 0; }
.wa[hidden] { display: none; }
.wa svg { width: 28px; height: 28px; }

/* =====================================================================
   El motor de Kunas dentro del sitio

   El motor trae su propia barra superior (logo, Contacto, Iniciar sesión,
   idioma, moneda, Menú) y ahí sale la marca de Torote Host, no la de Tiny
   Room: la identidad del engine se configura en el panel de Kunas, no aquí.
   Kunas tampoco ofrece un modo "incrustado" que la quite —ningún parámetro
   de su dirección la oculta—, así que se recorta desde fuera: el iframe se
   sube dentro de un contenedor con overflow:hidden.

   Medido sobre el motor real. Si Kunas cambia el alto de su barra, se
   ajusta aquí y en ningún otro lado.
   ===================================================================== */

.motor {
  --motor-recorte: 83px;
  position: relative;
  border: var(--rule-thin) solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card);
  margin-bottom: var(--space-4);
}
.motor iframe { display: block; width: 100%; border: 0; }

/* El recorte se aplica solo cuando el iframe ya cargó: si algo fallara, se
   ve el motor completo en vez de un hueco. */
/* El alto lo manda la PANTALLA, no un número fijo. Con 1180 px fijos, en una
   laptop (~900 px de alto útil) el marco no cabía: había que desplazar la
   página para ver el motor y el motor para ver el motor. Y cuando el motor
   contesta "Sin resultados" —que cabe en 300 px— quedaba medio metro de
   blanco debajo del fantasma.
   El tope de 1180 se conserva para monitores altos: más que eso no lo usa. */
.motor--recortado {
  height: min(1180px, calc(100svh - 150px));
  min-height: 560px;
}
.motor--recortado iframe {
  margin-top: calc(var(--motor-recorte) * -1);
  height: calc(100% + var(--motor-recorte));
}
/* Antes del recorte el contenedor no tiene alto, y un iframe sin alto se
   queda en 150px. Va solo aquí: puesto en los dos, le ganaría al alto de
   pantalla en teléfonos chicos y el motor se saldría por abajo. */
.motor:not(.motor--recortado) iframe { min-height: 600px; }

.motor__cargando {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
}
.motor__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: var(--radius-pill);
  animation: trGiro 0.8s linear infinite;
}
@keyframes trGiro { to { transform: rotate(360deg); } }

/* Debajo de 992 el motor pasa a ocupar el alto de la pantalla y se desplaza
   por dentro, como una app. svh y no vh: vh mide la pantalla sin la barra
   del navegador, y en el celular eso deja el motor más alto que el hueco. */
/* Tope de 520 px (el motor ve 600 con su barra recortada). El motor pega su
   boton "Reservar" al fondo del marco: con el marco del alto de la pantalla,
   despues de elegir la unidad quedaba un hueco blanco enorme entre "Tu
   seleccion" y el boton, y parecia que la pagina se habia quedado vacia.
   Medido sobre el motor real en 411 px de ancho: a 600 de alto la seleccion
   queda justo encima del boton. Lo demas se desplaza por dentro. */
@media (max-width: 991.98px) {
  .motor { --motor-recorte: 80px; }
  .motor--recortado { height: min(calc(100svh - 92px), 520px); min-height: 440px; }
}

/* =====================================================================
   Mejor precio directo
   El motor trae su propia insignia "-5%", pero ahi sola no se entiende
   contra que. Este bloque lo explica antes de que la vea.
   ===================================================================== */

.mejor-precio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--primary-tint);
  border: var(--rule-thin) solid var(--primary);
  border-radius: var(--radius-md);
}
.mejor-precio__sello {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 54px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--text-on-brand);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1;
}
.mejor-precio strong { display: block; font-family: var(--font-display); font-size: var(--fs-h4); color: var(--text-brand); }
.mejor-precio p { margin: 4px 0 0; font-size: var(--fs-body-sm); color: var(--text-secondary); max-width: 62ch; }

/* =====================================================================
   Buscador de fechas del hero

   Es propio, no el widget de Kunas. El widget oficial inyecta Bootstrap
   global y rompe el CSS del sitio: está documentado en las notas de Torote,
   donde se probó y se retiró. Este recoge fechas y lleva a reservar.html,
   que se las pasa al motor.
   ===================================================================== */

.buscador {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-2);
  align-items: end;
  padding: var(--space-3);
  background: rgba(20, 18, 15, 0.62);
  border: var(--rule-thin) solid rgba(244, 238, 226, 0.24);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
  max-width: 560px;
}
.buscador label {
  display: block;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: rgba(244, 238, 226, 0.78);
  margin-bottom: 4px;
}
.buscador input {
  width: 100%;
  min-height: var(--touch-min);
  padding: 0 var(--space-2);
  background: var(--surface-page);
  color: var(--text-primary);
  border: var(--rule-thin) solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
}
@media (max-width: 560px) {
  .buscador { grid-template-columns: 1fr 1fr; }
  .buscador .btn { grid-column: 1 / -1; }
}

/* =====================================================================
   Chat del sitio
   La burbuja va ARRIBA del boton de WhatsApp, no a un lado: en celular
   dos botones flotantes juntos se tocan por error.
   ===================================================================== */

.chat-burbuja {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--text-on-brand);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-raised);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.chat-burbuja:hover { background: var(--primary-hover); }
.chat-burbuja[hidden] { display: none; }
.chat-burbuja svg { width: 26px; height: 26px; }

/* Llamada de atencion: un halo que sale del boton.
   Va con CUENTA, no en bucle infinito. El sistema de marca prohibe los
   bucles decorativos permanentes, y ademas un boton que late para siempre
   deja de leerse como aviso y pasa a leerse como ruido. Empieza a los 3
   segundos, para no competir con la carga del hero, y se repite 4 veces.
   La regla global de prefers-reduced-motion lo apaga solo. */
.chat-burbuja::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--primary);
  opacity: 0;
  animation: trHalo 2.4s var(--ease-standard) 3s 4;
  pointer-events: none;
}
@keyframes trHalo {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}

.chat {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 70;
  width: min(360px, calc(100vw - var(--space-4) * 2));
  max-height: min(560px, calc(100vh - var(--space-6)));
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: var(--rule-thin) solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-raised);
  animation: trRise var(--dur-base) var(--ease-standard);
}
.chat[hidden] { display: none; }

.chat__cabeza {
  position: relative;
  background: var(--primary);
  color: var(--text-on-brand);
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
}
.chat__cabeza strong { display: block; font-family: var(--font-display); font-size: var(--fs-body-lg); }
.chat__cabeza span { font-size: var(--fs-caption); opacity: 0.86; }
.chat__cerrar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  background: none;
  border: 0;
  color: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.chat__cerrar:hover { background: rgba(255, 255, 255, 0.16); }

.chat__inicio { padding: var(--space-3) var(--space-3) 0; }
.chat__inicio[hidden] { display: none; }
.chat__nombre,
.chat__texto {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-page);
  color: var(--text-primary);
  border: var(--rule-thin) solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
}
.chat__nombre { min-height: var(--touch-min); }
.chat__texto { resize: none; line-height: var(--lh-snug); }

.chat__hilo {
  flex: 1;
  min-height: 140px;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chat__msg {
  margin: 0;
  max-width: 84%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat__msg--visitante { align-self: flex-end; background: var(--primary-tint); color: var(--text-primary); }
.chat__msg--staff { align-self: flex-start; background: var(--surface-raised); color: var(--text-primary); }

/* Galeria de fotos que manda el equipo (17 oct 2026): tres fotos en fila y
   "+N" en la tercera. Al tocar una se abre el visor. */
.chat__gal { white-space: normal; width: 100%; max-width: 290px; box-sizing: border-box; }
.chat__gal-txt { white-space: pre-wrap; margin-bottom: var(--space-2); }
.chat__gal-rej { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.chat__gal-rej--1 { grid-template-columns: 1fr; }
.chat__gal-rej--2 { grid-template-columns: 1fr 1fr; }
.chat__gal-rej button { position: relative; display: block; padding: 0; border: 0; border-radius: var(--radius-sm);
  overflow: hidden; aspect-ratio: 1; background: var(--primary-tint); cursor: zoom-in; }
.chat__gal-rej--1 button { aspect-ratio: 4 / 3; }
.chat__gal-rej button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.chat__gal-rej img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chat__gal-mas { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,18,15,0.56);
  color: #fff; font-family: var(--font-display); font-size: 1.35rem; }
.chat__gal-ficha { display: inline-block; margin-top: var(--space-2); padding: 6px 13px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--text-on-brand); font-size: var(--fs-caption); font-weight: 600; text-decoration: none; }
.chat__gal-ficha:hover { background: var(--primary-hover); color: var(--text-on-brand); }

.chat__aviso {
  margin: 0 var(--space-3) var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--danger);
  font-size: var(--fs-caption);
}
.chat__aviso[hidden] { display: none; }

.chat__pie {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  padding: var(--space-3);
  border-top: var(--rule-thin) solid var(--border);
}
.chat__pie .btn { min-height: 40px; padding: 0 var(--space-3); flex: none; }

/* Salida a WhatsApp desde dentro del chat.
   El verde es el de WhatsApp (#25D366) y NO el de la casa a proposito: el
   color ES el letrero. Un boton verde bosque con la palabra WhatsApp se lee
   como un boton mas del sitio; en el verde de ellos se reconoce sin leer.
   Es la unica pieza del sitio que usa un color de otra marca. */
.chat__wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  margin: 0 var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  background: #25D366;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  border: 0;
  text-decoration: none;
}
.chat__wa:hover,
.chat__wa:focus-visible {
  background: #1DA851;
  color: #fff;
  border: 0;
}
.chat__wa svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* =====================================================================
   Galeria y visor de fotos
   ===================================================================== */

.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-2); }
.gallery a { border: 0; border-radius: var(--radius-md); overflow: hidden; display: block; }
.gallery a:first-child { grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery a:first-child { grid-column: span 2; grid-row: auto; }
}

.visor {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20,18,15,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.visor[hidden] { display: none; }
.visor__img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: var(--radius-md); }
.visor__cerrar,
.visor__nav {
  position: absolute;
  background: none;
  border: 0;
  color: var(--tr-bone-text);
  font-size: 32px;
  cursor: pointer;
  width: var(--touch-min);
  height: var(--touch-min);
}
.visor__cerrar { top: var(--space-4); right: var(--space-4); }
.visor__nav--antes { left: var(--space-4); }
.visor__nav--despues { right: var(--space-4); }
.visor__cuenta {
  position: absolute;
  bottom: var(--space-4);
  color: rgba(244,238,226,0.66);
  font-size: var(--fs-caption);
}

/* =====================================================================
   Aviso vigente (calle en reparacion)
   ===================================================================== */

/* En terracota y con regla arriba y abajo: el dueno lo pidio visible, y tiene
   razon. Este aviso no compite por atencion con nada, es lo unico que puede
   arruinarle la llegada a alguien que no lo leyo.

   El rojo es el terracota de la marca, no un rojo de sistema. Avisa sin
   parecer un error del navegador. */
.aviso-obra {
  background: var(--accent-tint);
  border-top: var(--rule-thin) solid var(--accent-brand);
  border-bottom: var(--rule-thin) solid var(--accent-brand);
  padding: var(--space-3) 0;
}
.aviso-obra__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}
.aviso-obra p {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--tr-terracotta-deep);
}
.aviso-obra strong { color: var(--tr-terracotta-deep); }
/* Subrayado siempre: sobre el fondo teñido, solo el color no basta para que
   se lea como enlace. */
.aviso-obra__ver {
  font-size: var(--fs-body-sm);
  white-space: nowrap;
  color: var(--tr-terracotta-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Como esta la calle hoy ---
   La foto no dicta el alto: recorte fijo, como el resto de las parejas del
   sitio, para que la columna de texto y la imagen empiecen y terminen juntas
   en lugar de que una foto apaisada estire la fila. */
/* En su columna, junto al texto, pero SIN recorte: la toma completa de la
   camara, que se ve de lejos. Recortada a 16:10 quedaba demasiado cerca; a
   todo lo ancho ocupaba demasiado espacio para un aviso. */
.obra__figura { margin: 0; }
.obra__foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: var(--rule-thin) solid var(--border);
}
.obra__pie {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

/* =====================================================================
   Barra de confianza: Airbnb, Google, Instagram
   ===================================================================== */

.confianza {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
/* El li tiene que ser caja: sin esto no se estira al alto de la fila y el
   height:100% de la ficha no tiene contra que medirse. */
.confianza > li { display: flex; }
@media (max-width: 640px) { .confianza { grid-template-columns: 1fr; } }

.confianza__ficha {
  flex: 1;
  /* height 100%: sin esto la caja de Instagram, que no lleva estrellas,
     quedaba mas baja que las otras dos y la fila se veia chueca. */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--touch-min);
  padding: var(--space-3);
  border: var(--rule-thin) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.confianza__ficha:hover {
  border-color: var(--accent-brand);
  color: var(--text-primary);
}
.confianza__ficha strong { font-family: var(--font-display); font-size: var(--fs-h4); }
.confianza__pie { font-size: var(--fs-caption); color: var(--text-secondary); }

/* Una ficha empieza con estrellas (texto) y las otras con un SVG. Sin una
   altura comun, la fila queda despareja por un pixel y se nota: los titulos
   no arrancan a la misma altura. Se les fija la misma caja a las dos. */
.confianza__estrellas,
.confianza__icono {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confianza__estrellas { color: var(--decorative-gold); letter-spacing: 0.08em; font-size: var(--fs-body-sm); }
.confianza__icono { width: 26px; color: var(--text-brand); }
/* Airbnb y Google van con su logotipo de verdad; Instagram con el trazo de
   la casa, que es el que combina con la marca. */
.confianza__logo { width: 28px; height: 28px; display: block; margin-bottom: 2px; }

/* =====================================================================
   Los tres usos: Stay / Think / Create
   ===================================================================== */

.uso {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: var(--rule-thin) solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.uso:hover { border-color: var(--accent-brand); }

.uso__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-raised); border: 0; }
.uso__media:hover { border: 0; }
.uso__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.uso:hover .uso__media img { transform: scale(1.03); }

.uso__cuerpo { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }

/* La palabra del tagline, en dorado y con el tracking de marca. Es
   decorativa: el titulo de verdad es el h3 de abajo. */
.uso__palabra {
  margin: 0;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--decorative-gold);
}
.uso__titulo { margin: 0; font-size: var(--fs-h3); }

/* =====================================================================
   Cupo: cuantos caben
   Es la pregunta que mas llega por WhatsApp y la que causa problemas si se
   descubre al llegar. Por eso va en bloque propio y no en una lista mas.
   ===================================================================== */

.cupo {
  background: var(--surface-card);
  border: var(--rule-thin) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.cupo__titulo { font-size: var(--fs-h4); margin: 0 0 var(--space-3); }

.cupo__lista { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.cupo__lista li {
  display: grid;
  gap: 2px;
  padding: var(--space-3) 0;
  border-bottom: var(--rule-thin) solid var(--border);
}
.cupo__lista li:first-child { padding-top: 0; }
.cupo__lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.cupo__lista strong {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text-brand);
}
.cupo__lista span { font-size: var(--fs-body-sm); color: var(--text-secondary); }

/* =====================================================================
   Que tipo de eventos caben

   Hechas para llevar foto de fondo cuando existan: la tarjeta ya tiene el
   formato, el degradado y el texto abajo. Mientras tanto el fondo es la
   tinta de marca y no se ve un hueco esperando imagen.
   ===================================================================== */

.eventos {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  /* Sin esto la reja estira cada tarjeta al alto de su fila y el
     aspect-ratio de .evento se ignora: quedaban todas en los 190 px del
     min-height. Con "start" cada una toma el alto de su proporcion. */
  align-items: start;
}
@media (max-width: 900px) { .eventos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .eventos { grid-template-columns: 1fr; } }

/* El alto lo fija la proporcion, no el contenido: asi las seis quedan
   exactamente iguales aunque un pie ocupe dos renglones y otro uno. Es la
   misma regla de las fichas de alojamiento. */
.evento {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  aspect-ratio: 3 / 2;
  min-height: 190px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--tr-near-black);
  overflow: hidden;
}

/* La foto va como <img> y no como fondo de CSS: asi lleva texto alternativo,
   se carga en diferido y Google la ve. */
.evento__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El velo va en ::after para quedar POR ENCIMA de la foto: si viviera en el
   fondo de .evento, la imagen lo taparia. Sin el, el texto claro se pierde
   sobre las zonas claras de la foto. */
.evento::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 18, 15, 0.10) 35%, rgba(20, 18, 15, 0.82) 100%);
}

.evento__que,
.evento__pie { position: relative; z-index: 1; }

.evento__que {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--decorative-gold);
  line-height: var(--lh-heading);
}
/* Alto reservado para dos renglones. Sin esto, "Micrometros propios y nada de
   ruido afuera" ocupa dos lineas, empuja su titulo 20 px mas arriba que el de
   la tarjeta de al lado y la fila se ve chueca aunque las cajas midan igual. */
.evento__pie {
  font-size: var(--fs-body-sm);
  color: rgba(244, 238, 226, 0.86);
  line-height: var(--lh-snug);
  min-height: calc(2 * var(--lh-snug) * var(--fs-body-sm));
}

/* =====================================================================
   Mapa y lo que hay cerca
   ===================================================================== */

.mapa {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--rule-thin) solid var(--border);
  background: var(--surface-raised);
}
/* Los dos encuadres del mapa. Los crea main.js: sin JavaScript no hay mapa
   y estos botones no harian nada. */
.mapa__vistas {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--rule-thin) solid var(--border);
  background: var(--surface-card);
}
.mapa__vistas button {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  padding: 6px 14px;
  border-radius: 999px;
  border: var(--rule-thin) solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.mapa__vistas button:hover { border-color: var(--border-strong); color: var(--text-primary); }
.mapa__vistas button[aria-pressed="true"] {
  background: var(--tr-green);
  border-color: var(--tr-green);
  color: var(--tr-white);
}

.mapa__lienzo {
  height: 380px;
  background: var(--surface-raised);
  display: grid;
  place-items: center;
}
@media (max-width: 640px) { .mapa__lienzo { height: 320px; } }

/* Enlace que se ve solo si Leaflet no llego a cargar. En cuanto el mapa
   se dibuja, el script lo quita. */
.mapa__respaldo { padding: var(--space-4); text-align: center; }

/* Los dos pines. El ancla del icono es la PUNTA (abajo al centro), asi que
   todo se dibuja hacia arriba desde el punto 0,0 y el rotulo a la derecha. */
.pin { position: relative; width: 0; height: 0; }
.pin__gota {
  position: absolute;
  left: -14px;
  top: -36px;
  width: 28px;
  height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(26, 26, 26, 0.35);
  border: 2px solid var(--tr-white);
}
.pin__gota > * { transform: rotate(45deg); }
.pin__gota span {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--fw-bold, 700);
  line-height: 1;
  color: var(--tr-white);
}
.pin__gota svg { width: 15px; height: 15px; fill: var(--tr-white); display: block; }

.pin--tiny .pin__gota { background: var(--tr-green); }
.pin--parking .pin__gota { background: var(--tr-terracotta-ink); }

/* Los lugares de alrededor van en un rango mas bajo: circulo chico y sin
   rotulo fijo. Con cinco letreros fijos el mapa se vuelve ilegible —el Club
   Obregon y la Barra Hidalgo estan a 16 m uno del otro. El nombre sale al
   pasar el raton o al tocarlos. */
.pin--chico .pin__gota {
  left: -11px;
  top: -22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: none;
  border-width: 2px;
}
.pin--chico .pin__gota > * { transform: none; }
.pin--chico .pin__gota svg { width: 12px; height: 12px; }
.pin--chico:hover .pin__gota { transform: scale(1.15); }

.pin--copas .pin__gota { background: var(--tr-gold); }
.pin--casona .pin__gota { background: var(--tr-terracotta); }
.pin--iglesia .pin__gota { background: var(--tr-char-600); }
.pin--parque .pin__gota { background: var(--tr-green-deep); }

.pin__rotulo {
  position: absolute;
  left: 18px;
  top: -32px;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: var(--radius-sm, 6px);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(26, 26, 26, 0.18);
}
.pin--parking .pin__rotulo { color: var(--tr-terracotta-deep); }

/* En el telefono el mapa mide menos que el rotulo mas su pin: puesto a un
   lado se sale del marco o choca con los botones de zoom. Ahi baja debajo
   del pin, centrado, que es el unico sitio donde siempre cabe. */
@media (max-width: 560px) {
  .pin__rotulo {
    left: 50%;
    top: 5px;
    transform: translateX(-50%);
    font-size: 12px;
    padding: 2px 7px;
  }
}

/* La chapa de la distancia, sobre la linea del camino.
   Va en position:absolute como los rotulos y NO en el flujo: su contenedor
   de Leaflet mide 0 px de ancho, asi que una caja normal se queda en 17 px
   con el texto desbordado fuera. Medido: translate(-100%) la movia 17 px en
   vez de su ancho entero, y en el telefono la chapa seguia cortandose. */
.mapa__tramo {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tr-white);
  border: 1px solid var(--accent-brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--tr-terracotta-deep);
  box-shadow: 0 1px 4px rgba(26, 26, 26, 0.18);
}
/* En el telefono el camino cae pegado al borde derecho del mapa y la chapa
   centrada se corta. Ahi se recuesta a la izquierda de la linea. */
@media (max-width: 560px) {
  .mapa__tramo {
    font-size: 12px;
    padding: 3px 8px;
    transform: translate(calc(-100% - 10px), -50%);
  }
}

/* Leaflet trae su propia tipografia y un azul de enlaces que no es el de
   la casa. */
.leaflet-container { font-family: var(--font-body); background: var(--surface-raised); }
.leaflet-container a { color: var(--text-link); }
.leaflet-control-attribution { font-size: 10px; }

/* El dato del estacionamiento va pegado al mapa, no suelto mas abajo: se lee
   mientras se mira el camino dibujado. */
.mapa__pie {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-top: var(--rule-thin) solid var(--border);
  background: var(--accent-tint);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.mapa__pie strong { color: var(--text-brand); font-weight: var(--fw-semibold); }

.cerca { margin-top: var(--space-4); display: grid; gap: var(--space-3); }

/* El estacionamiento va aparte y mas grande: es la duda que frena una
   reserva en el centro y aqui la respuesta juega a favor. */
/* El icono de la tarjeta es el MISMO que el del pin: asi se ve de un
   vistazo cual punto del mapa es cual, sin leer nada. Lo pinta main.js
   desde una sola tabla, para que no puedan separarse. */
.cerca__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tr-bone-300);
}
.cerca__icono svg { width: 15px; height: 15px; fill: var(--tr-white); }
.cerca__icono span {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--tr-white);
}
[data-icono="parking"] .cerca__icono { background: var(--tr-terracotta-ink); }
[data-icono="copas"] .cerca__icono { background: var(--tr-gold); }
[data-icono="casona"] .cerca__icono { background: var(--tr-terracotta); }
[data-icono="iglesia"] .cerca__icono { background: var(--tr-char-600); }
[data-icono="parque"] .cerca__icono { background: var(--tr-green-deep); }

.cerca__destacado {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--rule-thin) solid var(--accent-brand);
  border-radius: var(--radius-lg);
  background: var(--accent-tint);
  border-bottom: var(--rule-thin) solid var(--accent-brand);
}
.cerca__destacado:hover { background: var(--surface-card); }
.cerca__etiqueta {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow, 0.12em);
  color: var(--tr-terracotta-deep);
}
.cerca__destacado strong {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text-brand);
}
.cerca__dato { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.cerca__texto { display: grid; gap: 2px; }

/* auto-FILL y no un numero fijo de columnas: los lugares van a crecer y con
   "repeat(4, 1fr)" el quinto abria una fila de una sola tarjeta. Con
   auto-FIT (que fue lo primero) la ultima fila estira sus tarjetas a todo
   lo ancho y quedan del doble que las de arriba; auto-fill deja las
   columnas vacias y todas miden igual. */
.cerca__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-3);
}
@media (max-width: 460px) { .cerca__lista { grid-template-columns: 1fr; } }

.cerca__lista a {
  height: 100%;
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: center;
  padding: var(--space-3);
  border: var(--rule-thin) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
/* El icono ocupa las dos filas de texto; nombre y distancia van a su lado. */
.cerca__lista .cerca__icono { grid-row: span 2; }
.cerca__lista strong { align-self: end; }
.cerca__lista span:not(.cerca__icono) { align-self: start; }
.cerca__lista a:hover { border-color: var(--border-strong); }
.cerca__lista strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.cerca__lista span { font-size: var(--fs-caption); color: var(--text-secondary); }

.cerca__nota { font-size: var(--fs-caption); color: var(--text-secondary); margin: 0; }

/* =====================================================================
   Seccion oscura (donde esta)
   ===================================================================== */

.section--oscura {
  background: var(--tr-near-black);
  color: var(--tr-bone-text);
}
.section--oscura h2, .section--oscura h3 { color: var(--tr-bone-text); }
.section--oscura .tr-eyebrow { color: var(--decorative-gold); }
.section--oscura .muted { color: rgba(244, 238, 226, 0.66); }

/* La foto es 3:4 y la caja tambien: asi no se recorta nada. Antes tenia
   max-height de 420 px con object-fit:cover y le comia arriba y abajo, que
   es justo donde estan el farol y los escalones. */
/* La frase de la puerta amarilla usa la misma tipografia que el hero:
   cursiva de Zilla Slab en el dorado medido del logotipo. Es una sena de
   marca, no un encabezado mas, y por eso se le da ese peso. */
/* Va con la seccion delante a proposito: `.section--oscura h2` pinta todos
   los titulos en crema y le ganaba por especificidad (0,1,1 contra 0,1,0),
   asi que el dorado no se aplicaba. */
.section--oscura .donde__titulo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ECB84C;
  font-size: clamp(2rem, 4.2vw, var(--fs-display));
  line-height: 1.05;
  max-width: 12ch;
  margin-bottom: var(--space-4);
}

/* Se limita por ANCHO, no por alto. Con max-height la caja se quedaba en
   591x620 —casi cuadrada— y recortaba el 27% de una foto 3:4: se comia el
   farol de arriba y los escalones de abajo, que es lo que hace que se
   entienda dónde está la entrada. */
.donde__foto {
  width: 100%;
  max-width: 470px;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  margin-left: auto;
}
.dos-columnas--invertida { align-items: center; }

/* Galeria de usos, debajo de la puerta amarilla. Cinco fotos parejas: mismo
   formato y misma altura reservada para el pie, para que la fila no quede
   escalonada cuando un texto ocupe dos renglones. */
.usos-galeria {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) { .usos-galeria { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .usos-galeria { grid-template-columns: repeat(2, 1fr); } }

.usos-galeria figure { margin: 0; }
.usos-galeria a {
  display: block;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--tr-char-800);
}
.usos-galeria a:hover { border: 0; }
.usos-galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.usos-galeria a:hover img { transform: scale(1.04); }
.usos-galeria figcaption {
  margin-top: var(--space-2);
  min-height: 2.6em;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(244, 238, 226, 0.72);
}

/* =====================================================================
   Datos de un vistazo
   ===================================================================== */

.datos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: center;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.datos strong {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  margin-right: 6px;
}
/* "semana y mes" no se parte: en telefono quedaba "y mes" solo abajo */
.datos a { white-space: nowrap; }

/* =====================================================================
   Dos columnas: texto + galeria
   ===================================================================== */

.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 860px) {
  .dos-columnas { grid-template-columns: 1fr; }
}

.lista {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
}
.lista::marker { color: var(--accent-brand); }

/* =====================================================================
   Resenas de las OTAs
   ===================================================================== */

.section[hidden] { display: none; }

.resena {
  background: var(--surface-card);
  border: var(--rule-thin) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.resena__estrellas { color: var(--decorative-gold); letter-spacing: 0.1em; font-size: var(--fs-body-sm); }
.resena__texto {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
}
.resena__pie {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: var(--rule-thin) solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}
.resena__alto {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}
.resena__canal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
}
.resena__logo { width: 20px; height: 20px; flex: none; }

/* Bloque de Google, dentro de la misma seccion de resenas */
.google { margin-top: var(--space-6); }
.google[hidden] { display: none; }
.google__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body-sm);
}
.google__nota strong { font-family: var(--font-display); color: var(--text-brand); font-size: var(--fs-h4); }

/* Enlaces a redes: icono mas la cuenta */
.red {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  font-size: var(--fs-body-sm);
  border-bottom: 0;
}
.red:hover { border-bottom: 0; }
.red__icono { width: 22px; height: 22px; flex: none; }
.red:hover .red__icono { transform: translateY(-1px); }
.red__icono { transition: transform var(--dur-fast) var(--ease-standard); }

/* Boton fantasma sobre una foto: el borde y el texto van en claro, o se
   pierden contra la imagen. */
.btn--sobre-foto { color: var(--tr-bone-text); border-color: rgba(244, 238, 226, 0.5); }
.btn--sobre-foto:hover {
  color: var(--tr-bone-text);
  background: rgba(244, 238, 226, 0.14);
  border-color: var(--tr-bone-text);
}

/* =====================================================================
   Paginas legales
   ===================================================================== */

.legal { max-width: 74ch; }
.legal h1 { margin-bottom: var(--space-2); }
.legal h2 {
  font-size: var(--fs-h3);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
.legal ul { padding-left: 1.2em; margin: 0 0 var(--space-3); display: grid; gap: var(--space-1); }
.legal ul::marker, .legal li::marker { color: var(--accent-brand); }

/* Aviso de que el texto es borrador. Va arriba y se ve: publicar un legal
   sin decir que falta revision es peor que no publicarlo. */
.legal__pendiente {
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-tint);
  border-left: var(--rule-med) solid var(--accent-brand);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  color: var(--tr-terracotta-deep);
}

/* =====================================================================
   Utilidades
   ===================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.muted { color: var(--text-secondary); }
.lead { font-size: var(--fs-body-lg); color: var(--text-secondary); }
.stack { display: grid; gap: var(--space-3); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* =====================================================================
   Preguntas frecuentes (#preguntas)
   Acordeon nativo con <details>: el teclado, el estado abierto/cerrado y
   el lector de pantalla vienen de fabrica. Solo se viste, con los tokens
   que ya usa el resto del sitio; ni un color nuevo.
   Las respuestas son las mismas de llms.txt palabra por palabra, y las
   mismas del bloque FAQPage del <head>. Google exige que lo que ve el
   visitante y lo que ve el buscador coincidan: si cambias una, cambia las
   tres.
   ===================================================================== */
.faq { display: grid; gap: var(--space-2); max-width: 72ch; }

.faq__item {
  background: var(--surface-card);
  border: var(--rule-thin) solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.faq__item[open] { border-color: var(--border-strong); }

.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) calc(var(--space-3) + 28px) var(--space-3) var(--space-3);
  position: relative;
  font-size: var(--fs-body);
  font-weight: 500;
}
.faq__item summary::-webkit-details-marker { display: none; }

/* La flecha gira al abrir: dice el estado sin una palabra */
.faq__item summary::after {
  content: "";
  position: absolute;
  right: var(--space-3);
  top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--accent-brand);
  border-bottom: 1.5px solid var(--accent-brand);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq__item summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-lg); }

.faq__cuerpo {
  padding: 0 var(--space-3) var(--space-3);
  border-top: var(--rule-thin) solid var(--border);
  margin-top: 0;
}
.faq__cuerpo p {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  line-height: 1.7;
}
.faq__cuerpo p:first-child { margin-top: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  .faq__item, .faq__item summary::after { transition: none; }
}