/* =====================================================================
   TOROTE HOST — Sistema de diseño (replica del sitio Atoms)
   Paleta de marca, tipografías y componentes reutilizables.
   ===================================================================== */

:root {
  /* --- Paleta de marca --- */
  --terracota: #8A472E;   /* acento / CTA */
  --terracota-dark: #713a26;
  --arena: #D6CBB6;       /* fondos suaves / bordes */
  --cacao: #36201B;       /* texto oscuro / footer */
  --enebro: #3D4316;      /* detalle */
  --nacar: #F1EDE4;       /* fondo de página */
  --nacar-2: #E9E3D7;     /* fondo alterno */
  --blanco: #FBF9F5;

  /* --- Texto --- */
  --text: #3a2a22;
  --text-soft: #6b5a50;
  --text-inv: #F1EDE4;

  /* --- Tipografías --- */
  --font-title: "Forum", "EB Garamond", Georgia, serif;
  --font-body: "Open Sauce Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-accent: "EB Garamond", Georgia, serif;

  /* --- Formas --- */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow: 0 18px 40px -20px rgba(54, 32, 27, .35);
  --shadow-soft: 0 8px 24px -14px rgba(54, 32, 27, .3);

  /* --- Curva de movimiento ---
     Arranca rápido y frena suave, que es como se mueven las cosas con
     peso. Las curvas que trae el navegador (ease, ease-out) son mucho
     mas planas y dejan la sensacion de que la interfaz responde tarde. */
  --salida: cubic-bezier(.23, 1, .32, 1);
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* --- Reset ligero --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--nacar);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* --- Tipografía base --- */
h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 1.1;
  color: var(--cacao);
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--terracota);
  margin-bottom: 1rem;
  display: inline-block;
}
.accent { font-family: var(--font-accent); font-style: italic; }

/* --- Layout --- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--alt { background: var(--nacar-2); }
.center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--text-soft); max-width: 60ch; }
.center .lead { margin-inline: auto; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(241, 237, 228, .82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(138, 71, 46, .12);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; }
/* Marca del torote (PNG con fondo transparente). Alto automático para no deformarla. */
.brand__logo { width: 46px; height: auto; }
.brand__name {
  font-family: var(--font-title); font-size: 1.15rem;
  letter-spacing: .16em; color: var(--terracota); text-transform: uppercase; line-height: 1;
}
.brand__name small { display:block; font-size:.5rem; letter-spacing:.4em; color: var(--text-soft); text-align:center; margin-top:2px; }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a {
  font-size: .95rem; color: var(--text); position: relative; padding-block: 4px;
  transition: color .2s;
}
.nav__links a:hover { color: var(--terracota); }
.nav__links a.active { color: var(--terracota); }
.nav__right { display: flex; align-items: center; gap: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius-pill);
  padding: 13px 26px; font-size: .9rem; font-weight: 600; letter-spacing: .02em;
  /* Solo transform y opacity mueven el boton: son las dos que el navegador
     resuelve en la tarjeta de video sin volver a calcular el diseño de la
     pagina. Color y sombra se acompanan, pero nada de ancho ni margen. */
  transition: transform .22s var(--salida), background .22s var(--salida),
              box-shadow .22s var(--salida), color .18s var(--salida),
              border-color .18s var(--salida);
}
/* El movimiento va en .btn y no en cada variante: antes solo el terracota
   y el verde se levantaban, y el de contorno se quedaba quieto. */
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
/* Al presionar cede y regresa al piso. Baja a 80ms porque un toque tiene
   que sentirse instantaneo: 220ms al presionar ya se siente lento. */
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }

.btn--primary { background: var(--terracota); color: #fff; }
.btn--primary:hover { background: var(--terracota-dark); }
.btn--ghost { background: transparent; color: var(--terracota); border: 1.5px solid var(--terracota); }
.btn--ghost:hover { background: var(--terracota); color: #fff; }
.btn--lg { padding: 16px 34px; font-size: 1rem; }
.btn--sm { padding: 9px 18px; font-size: .82rem; }
/* Quien navega con teclado nunca ve el hover. El aro va aparte y en la
   marca, porque el gris del navegador se pierde sobre el terracota.
   No lleva border-radius: el aro ya sigue la forma del elemento, y si se
   lo damos la pildora se vuelve rectangulo al enfocarla. */
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }
.btn--primary:focus-visible, .btn--reservar:focus-visible { outline-color: var(--cacao); }
/* Quien pidió menos movimiento se queda sin desplazamientos, pero NO sin
   respuesta: el cambio de color y de sombra se conserva, porque es lo que
   dice "este boton reacciona". */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; }
}
/* Botón de reserva. Verde esmeralda pedido por Torote, tomado de la
   referencia: queda fuera de la paleta de marca a propósito, para que la
   acción de reservar destaque sobre el terracota del resto del sitio. */
.btn--reservar { background: #0A7B3E; color: #fff; }
.btn--reservar:hover { background: #086532; }
.btn--block { width: 100%; }
.nav__cta { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }

.nav__toggle { display: none; background: none; border: none; padding: 6px; }
.nav__toggle span { display:block; width:24px; height:2px; background: var(--cacao); margin: 5px 0; transition: .3s; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative; min-height: 88vh; display: flex; align-items: center;
  justify-content: center; text-align: center; color: #fff; overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(28,17,13,.28), rgba(28,17,13,.5)),
    linear-gradient(120deg, #6f5a44, #8a6b4c 45%, #c7b48f);
  background-size: cover; background-position: center;
}
/* Video de fondo del hero. Va debajo del degradado (.hero__bg) y por eso
   no lleva z-index: el orden en el HTML basta. object-fit cover para que
   llene la banda sin deformarse, igual que hacia la foto. */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}
/* Si el visitante pidio menos movimiento, se queda la foto del poster. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__bg { background-image:
    linear-gradient(180deg, rgba(28,17,13,.28), rgba(28,17,13,.5)),
    url('img/hero-kino.jpg'); }
}

.hero__inner { position: relative; z-index: 2; padding: 40px var(--gutter) 60px; width: 100%; max-width: 1000px; }
.hero h1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); margin-bottom: 2rem; }

/* --- Barra de reservas --- */
.searchbar {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px;
  background: rgba(241, 237, 228, .95); border-radius: var(--radius);
  padding: 10px; box-shadow: var(--shadow); max-width: 820px; margin: 0 auto;
  text-align: left;
}
.searchbar__field { padding: 8px 14px; display: flex; flex-direction: column; gap: 2px; border-radius: var(--radius-sm); }
.searchbar__field + .searchbar__field { border-left: 1px solid var(--arena); }
.searchbar__field label {
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); font-weight: 600;
}
.searchbar__field input, .searchbar__field select {
  border: none; background: transparent; font-family: inherit; font-size: .98rem;
  color: var(--cacao); padding: 2px 0; outline: none; width: 100%;
}
.searchbar .btn { border-radius: var(--radius-sm); }

/* =====================================================================
   PROPERTY CARDS
   ===================================================================== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* Destacados de la portada: 8 fichas en hileras de 4 */
.cards--4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.property-card {
  background: var(--blanco); border: 1px solid rgba(138,71,46,.1);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column;
}
.property-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.property-card__img { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--arena), #b9a888); position: relative; }
.property-card__img span {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color: rgba(54,32,27,.35); font-family: var(--font-accent); font-style: italic; font-size: .9rem;
}
/* Foto real de la unidad: llena la caja sin deformarse */
.property-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.property-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.property-card__title { font-family: var(--font-title); font-size: 1.22rem; color: var(--cacao); line-height: 1.2; }
.property-card__price { color: var(--terracota); font-weight: 600; }
.property-card__price small { color: var(--text-soft); font-weight: 400; font-size: .75rem; }
/* La razon por la que se elige ESTA y no la de al lado. Dos renglones
   reservados: sin eso, la ficha de la frase corta sube el precio y la
   fila se ve chueca. */
.property-card__razon { color: var(--text-soft); font-size: .88rem; line-height: 1.5; min-height: 3em; margin: -4px 0 0; }
.property-card__meta { margin-top: auto; display: flex; gap: 16px; color: var(--text-soft); font-size: .86rem; align-items:center; flex-wrap: wrap; }
.property-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.property-card__meta .ico { width: 18px; height: 18px; color: var(--terracota); }
.property-card .btn { margin-top: 4px; }

.row-link { text-align: center; margin-top: 42px; }
.row-link a { color: var(--terracota); font-weight: 600; letter-spacing: .02em; }
.row-link a:hover { text-decoration: underline; }

/* =====================================================================
   REVIEWS
   ===================================================================== */
.rating-hero { text-align: center; margin-bottom: 48px; }
.rating-hero .big { font-family: var(--font-title); font-size: clamp(3.5rem, 8vw, 5rem); color: var(--cacao); line-height: 1; }
.stars { color: var(--terracota); letter-spacing: 3px; font-size: 1.1rem; }

/* Estrellas de relleno parcial: 4.9 se ve como 4.9, no como cinco llenas.
   --n es la calificación (0 a 5) y la pone main.js.
   El ancho del relleno sale de --n, pero hay que restarle un espacio de
   letter-spacing: el texto deja uno suelto despues de la ultima estrella,
   y sin restarlo el 100% se pasa de largo y la quinta se ve llena siempre. */
.stars--frac { --letra: 3px; position: relative; display: inline-block; white-space: nowrap; }
.stars--frac .stars__base { color: color-mix(in oklab, var(--terracota) 26%, transparent); }
.stars--frac .stars__fill {
  position: absolute; top: 0; left: 0; overflow: hidden;
  width: calc(var(--n, 5) * 20% - var(--letra));
}
/* Navegador sin color-mix: gris de la marca en vez de nada */
@supports not (color: color-mix(in oklab, red 50%, transparent)) {
  .stars--frac .stars__base { color: #d8c6bd; }
}
.rating-hero small { display:block; color: var(--text-soft); margin-top: 6px; }

/* Fila de recuadros: uno por canal (Google, Airbnb…).
   La separación de arriba vive aquí y no en cada recuadro: puesta en el
   hijo, al envolverse en dos filas la segunda quedaba mas separada que la
   primera. */
.notas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 26px; }

/* Calificación traída de Google. Nace oculta y main.js la muestra solo si
   Google respondió, para no dejar un hueco cuando falla. */
/* Columna: logo arriba, estrellas y la atribucion debajo. En fila el logo
   quedaba apretado entre el numero y el borde, y se recortaba. */
.google-nota {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 28px;
  background: var(--blanco); border: 1px solid var(--arena);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.google-nota[hidden] { display: none; }
/* De Google va solo la G, no el logo con estrellas: ese trae 5 fijas y
   mentiria si algun dia la calificacion baja. Las estrellas de abajo si
   son las reales.
   Todos los logos se miden por ALTO, no por ancho: cada marca trae su
   propia forma y con un ancho fijo unos salen enormes y otros diminutos.
   Mismo alto = se leen del mismo tamano. */
.google-nota__logo { flex: none; width: auto; height: 40px; max-width: 110px; object-fit: contain; display: block; }

/* --- Tira de canales bajo las reseñas ---
   Los logos vienen con fondos y formas distintas (Expedia trae cuadro
   amarillo, Booking mucho blanco), así que cada uno va en una caja del
   mismo alto con object-fit para que se vean parejos. */
.canales-tira { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--arena); text-align: center; }
.canales-tira__titulo {
  display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-soft); margin-bottom: 22px;
}
.canales-tira__logos {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 18px 40px;
}
.canales-tira__logos li { display: grid; place-items: center; height: 38px; }
.canales-tira__logos img {
  max-height: 38px; max-width: 120px; width: auto; height: auto; object-fit: contain;
  /* En gris se ven como un grupo y no compiten con tu marca; al pasar
     el mouse recuperan su color. */
  filter: grayscale(1); opacity: .62; transition: filter .2s, opacity .2s;
}
.canales-tira__logos li:hover img { filter: none; opacity: 1; }
/* Booking, Expedia y Google traen su fondo dentro del archivo; Airbnb no.
   Se lo damos aqui para que los cuatro se lean como un grupo y no como si
   a uno le faltara la caja.
   Va blanco al 62%, no blanco a secas: el de las otras tres es un blanco
   que la opacidad de la imagen ya mezclo con el fondo de la seccion.
   Puesto asi se mezcla igual, y sigue igualando si algun dia cambia el
   color de fondo. Al pasar el mouse suben las cuatro a blanco pleno,
   igual que la imagen sube a opacidad 1.
   El alto de la caja lo fija el li: el relleno le come al alto de la
   imagen en vez de sumarselo. */
/* Las cuatro cajas en blanco.
   Booking y Google ya traen su fondo blanco dentro del archivo y no hay
   que hacerles nada. Expedia trae fondo amarillo, que en gris queda en
   210: se le sube el brillo a 1.22 y llega a 255, o sea blanco.
   No se puede pintar por detras porque la imagen es opaca y taparia la
   caja; por eso va por brillo y no por background.
   Vive solo en esta tira. Los mismos archivos salen a color en
   publicar.html y en las tarjetas de resena, y alla no se tocan. */
.canales-tira__blanco img { filter: grayscale(1) brightness(1.22); }
.canales-tira__caja { background: rgba(255, 255, 255, .62); padding: 3px 7px; box-sizing: border-box; transition: background .2s; }
.canales-tira__caja:hover { background: #fff; }
.canales-tira__caja img { max-height: 32px; }
.canales-tira__nota {
  margin: 24px auto 0; max-width: 52ch; font-size: .92rem; color: var(--text-soft);
}
@media (max-width: 560px) { .canales-tira__logos { gap: 16px 26px; } .canales-tira__logos li { height: 30px; } .canales-tira__logos img { max-height: 30px; max-width: 92px; } .canales-tira__caja { padding: 3px 5px; } .canales-tira__caja img { max-height: 24px; } }

/* --- Botón flotante de WhatsApp ---
   En el verde oficial de WhatsApp, no en terracota: el visitante lo
   reconoce por el color antes que por el icono. */
.wa-flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px -8px rgba(28, 17, 13, .45);
  transition: transform .22s var(--salida), box-shadow .22s var(--salida);
}
.wa-flotante svg { width: 30px; height: 30px; }
.wa-flotante:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(28, 17, 13, .5); }
.wa-flotante:active { transform: scale(.94); }
@media (max-width: 620px) { .wa-flotante { width: 52px; height: 52px; right: 14px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .wa-flotante:hover, .wa-flotante:active { transform: none; } }
@media print { .wa-flotante { display: none; } }

/* --- Barra de "dejaste una reserva a medias" ---
   Va pegada bajo el encabezado, no flotando encima del contenido: es una
   invitación, no una alarma. */
.reanudar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
  padding: 12px var(--gutter); background: var(--nacar-2);
  border-bottom: 1px solid var(--arena);
}
.reanudar__txt { margin: 0; font-size: .92rem; color: var(--text); }
.reanudar__cerrar {
  border: 0; background: none; cursor: pointer; color: var(--text-soft);
  font-size: 1.5rem; line-height: 1; width: 44px; height: 44px;
  display: grid; place-items: center; margin: -8px -8px -8px -4px;
}
.reanudar__cerrar:hover { color: var(--cacao); }

/* --- Pregunta de salida en las páginas de reservar --- */
.salida {
  border: 1px solid var(--arena); border-radius: var(--radius);
  background: var(--blanco); color: var(--text);
  padding: 26px 28px; max-width: 380px; width: calc(100vw - 48px);
  box-shadow: var(--shadow);
}
.salida::backdrop { background: rgba(28, 17, 13, .45); }
.salida h3 { margin: 0 0 14px; font-size: 1.15rem; }
.salida p { margin: 0 0 14px; color: var(--text-soft); font-size: .92rem; }
.salida label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 2px; font-size: .95rem; border-top: 1px solid rgba(138,71,46,.08);
}
.salida input[type="radio"] { accent-color: var(--terracota); width: 17px; height: 17px; }
.salida__botones { display: flex; gap: 10px; margin-top: 16px; }

/* --- Publicar mi propiedad: vender o rentar ---
   Dos opciones del mismo tamano: ninguna es la principal, depende de lo
   que la persona trae. */
.elige {
  border: 1px solid var(--arena); border-radius: var(--radius);
  background: var(--blanco); color: var(--text);
  padding: 30px 28px 26px; max-width: 460px; width: calc(100vw - 32px);
  box-shadow: var(--shadow); position: relative;
}
.elige::backdrop { background: rgba(28, 17, 13, .5); }
.elige h3 { margin: 0 32px 18px 0; font-size: 1.3rem; line-height: 1.25; }
.elige__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.elige__opcion {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 16px;
  border: 1px solid var(--arena); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text); background: var(--nacar);
  transition: border-color .2s var(--salida), background-color .2s var(--salida);
}
.elige__opcion:hover, .elige__opcion:focus-visible { border-color: var(--terracota); background: var(--blanco); }
.elige__opcion b { font-family: var(--font-title), serif; font-weight: 400; font-size: 1.35rem; color: var(--terracota); }
.elige__opcion span { font-size: .85rem; line-height: 1.45; color: var(--text-soft); }
.elige__cerrar {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  border: 0; background: none; cursor: pointer; color: var(--text-soft);
  font-size: 1.7rem; line-height: 1; display: grid; place-items: center;
}
.elige__cerrar:hover { color: var(--cacao); }
@media (max-width: 420px) { .elige__opciones { grid-template-columns: 1fr; } }

/* --- Visor de fotos ---
   Sobre <dialog> nativo, que trae Escape, bloqueo del fondo y encierro del
   foco sin tener que programarlos. El navegador lo centra solo, por eso no
   hay position fixed ni z-index en toda esta seccion. */
.visor {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh;
  width: min(1200px, 96vw); overflow: visible;
}
.visor::backdrop { background: rgba(28, 17, 13, .88); }
.visor__img {
  display: block; margin: 0 auto; border-radius: var(--radius-sm);
  max-width: 100%; max-height: 82dvh; object-fit: contain; background: var(--cacao);
}
/* Los tres botones en el mismo tono oscuro traslucido: sobre una foto no
   se sabe que va a haber detras, y el terracota de la marca desaparece
   sobre un atardecer. */
.visor__cerrar, .visor__nav {
  position: absolute; z-index: 1; border: 0; cursor: pointer; color: #fff;
  background: rgba(28, 17, 13, .55); border-radius: var(--radius-pill);
  display: grid; place-items: center; line-height: 1;
  transition: background .2s var(--salida), transform .2s var(--salida);
}
.visor__cerrar:hover, .visor__nav:hover { background: rgba(28, 17, 13, .8); }
.visor__cerrar:active, .visor__nav:active { transform: scale(.94); }
/* 48px: arriba del minimo de 44 para tocar con el dedo */
.visor__cerrar { top: -6px; right: -6px; width: 48px; height: 48px; font-size: 1.9rem; }
.visor__nav { top: 50%; margin-top: -26px; width: 52px; height: 52px; font-size: 2.2rem; padding-bottom: 5px; }
.visor__nav--antes { left: -6px; }
.visor__nav--despues { right: -6px; }
.visor__cuenta { margin: 14px 0 0; text-align: center; color: var(--arena); font-size: .85rem; }
@media (max-width: 620px) {
  /* En pantalla angosta los botones se meten adentro de la foto: fuera se
     salian del borde y quedaban a medias. */
  .visor__cerrar { top: 6px; right: 6px; }
  .visor__nav--antes { left: 6px; }
  .visor__nav--despues { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .visor__cerrar:active, .visor__nav:active { transform: none; }
}
/* El boton de "Ver las N fotos" ya no abre otra pestana, asi que el
   cursor de mano tiene que decir que sigue siendo clicleable. */
.gallery__more { cursor: pointer; }
.gallery a { cursor: zoom-in; }

/* --- Cuánto se hace de Hermosillo ---
   Dos renglones pegados al mapa, con el mismo hilo que la lista de
   lugares cercanos para que se lean como la misma familia. */
.traslados { list-style: none; margin: 18px 0 0; padding: 0; max-width: 46ch; }
.traslados[hidden] { display: none; }
.traslados li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-top: 1px solid rgba(138, 71, 46, .12);
}
.traslados__desde { color: var(--text); }
.traslados__dato { flex: none; font-size: .82rem; color: var(--text-soft); white-space: nowrap; }

/* --- Qué tienes cerca (fichas de alojamiento) ---
   Sin tarjetas: son cuatro listas cortas y meterlas en recuadros solo
   agrega ruido. Se separan con espacio y un hilo entre renglones.
   El nombre a la izquierda y el dato a la derecha para que la vista baje
   por una sola columna de nombres. */
.cerca { margin: 34px 0 10px; }
.cerca[hidden] { display: none; }
.cerca__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px 40px; }
.cerca__titulo { font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--cacao); margin: 0 0 4px; }
.cerca__lista { list-style: none; margin: 0; padding: 0; }
.cerca__lista li { border-top: 1px solid rgba(138, 71, 46, .12); }
/* El renglon entero es el enlace a la ficha de Google, para que en celular
   haya donde atinarle. El subrayado aparece al pasar encima: 15 renglones
   subrayados de entrada se ven como un directorio, no como una lista. */
.cerca__fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 0; color: inherit; text-decoration: none;
}
.cerca__nombre { color: var(--text); transition: color .15s ease; }
a.cerca__fila:hover .cerca__nombre { color: var(--terracota); text-decoration: underline; text-underline-offset: 3px; }
/* El dato no se parte ni se encoge: "4,5 ★ · 1,2 km" en una linea */
.cerca__dato { flex: none; font-size: .82rem; color: var(--text-soft); white-space: nowrap; }
.cerca__pie { margin-top: 20px; font-size: .8rem; color: var(--text-soft); }

/* Logo del canal en cada tarjeta de reseña: dice de dónde salió */
.review__canal { display: block; width: auto; height: 20px; max-width: 92px; object-fit: contain; object-position: left center; margin-bottom: 10px; }
/* Logo y estrellas en el mismo renglón, en cualquier tamaño: apilados se
   comen un renglón entero para dos datos de una línea. Sin space-between
   aquí: en una tarjeta de 525px los mandaría a orillas opuestas y dejarían
   un vacío en medio. Eso solo tiene sentido en la tarjeta angosta. */
.review__encabezado { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review__encabezado .review__canal { margin: 0; }
/* --letra tiene que ir igual que letter-spacing o el recorte se desfasa */
.google-nota .stars { font-size: 1.15rem; letter-spacing: 4px; --letra: 4px; }
.google-nota .btn { margin-top: 4px; }
@media (max-width: 480px) { .google-nota { padding: 14px 20px; } }
.reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.review {
  background: var(--blanco); border: 1px solid rgba(138,71,46,.1);
  border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-soft);
}
.review__quote { font-family: var(--font-accent); font-style: italic; font-size: 1.08rem; color: var(--text); margin: 12px 0 20px; }
.review__author { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 600; font-size: .85rem; flex: none;
}
.review__name { font-weight: 600; color: var(--cacao); font-size: .95rem; }
.review__loc { color: var(--text-soft); font-size: .82rem; }

/* =====================================================================
   CATEGORY / IMAGE CARDS
   ===================================================================== */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tile {
  border-radius: var(--radius); overflow: hidden; background: var(--blanco);
  box-shadow: var(--shadow-soft); border: 1px solid rgba(138,71,46,.1);
  transition: transform .2s; display: flex; flex-direction: column;
}
.tile:hover { transform: translateY(-4px); }
/* El recuadro entero es el enlace a su pagina de Descubre Kino. */
a.tile { text-decoration: none; color: inherit; }
.tile__img {
  aspect-ratio: 3/2; position: relative; display: flex; align-items: flex-end; padding: 18px;
  background: linear-gradient(160deg, #9a8461, #6f5a44);
}
/* La foto va debajo del degradado; el título queda encima de ambos */
.tile__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__img::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(28,17,13,.55)); }
.tile__img h3 { position: relative; z-index: 2; color: #fff; margin: 0; font-size: 1.3rem; }
.tile__body { padding: 18px 20px 22px; color: var(--text-soft); font-size: .95rem; }

/* --- Descubre Kino grid --- */
.kino { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kino .tile__img { aspect-ratio: 4/3; }
.kino .tile__body { font-size: .9rem; }

/* =====================================================================
   SPLIT (texto + imagen)
   ===================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.split__media { aspect-ratio: 4/3; border-radius: var(--radius); background: linear-gradient(135deg, var(--arena), #a89170); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split--reverse .split__media { order: -1; }
/* Para fotos verticales: la caja toma la proporcion de la imagen (2:3) para
   que no se corten los cuerpos. */
.split__media--vertical { aspect-ratio: 2/3; }
@media (max-width: 900px) { .split__media--vertical { aspect-ratio: 4/3; } }

/* =====================================================================
   FEATURE STRIP
   ===================================================================== */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.feature { text-align: center; padding: 20px; }
.feature__k { font-family: var(--font-title); font-size: 2rem; color: var(--terracota); display: flex; justify-content: center; }
.feature__k .ico { width: 34px; height: 34px; }
.feature h4 { font-family: var(--font-body); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cacao); margin: 8px 0 6px; }
.feature p { color: var(--text-soft); font-size: .9rem; margin: 0; }

/* =====================================================================
   OWNERS / CTA
   ===================================================================== */
.owners { background: var(--cacao); color: var(--text-inv); }
.owners h2 { color: #fff; }
.owners .lead { color: rgba(241,237,228,.8); }
.checklist { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist li::before { content: "✓"; color: var(--terracota); background: rgba(214,203,182,.25); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: .8rem; }

.cta-band { background: linear-gradient(120deg, var(--terracota), #a15738); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
/* El .lead tiene max-width de 60ch. Sin margen automático el bloque se pega a
   la izquierda aunque su texto esté centrado, y la sección se ve descuadrada. */
.cta-band .lead { color: rgba(255,255,255,.9); margin-inline: auto; margin-bottom: 32px; }

/* =====================================================================
   PUBLICAR MI PROPIEDAD
   ===================================================================== */

/* --- Comparativo en dos columnas. Ambas listan lo mismo, en el mismo orden,
       así que se pueden comparar renglón por renglón sin una columna de
       etiquetas que dejaría una esquina vacía. --- */
/* Las dos columnas comparten renglones para que el boton "Me interesa" quede
   a la misma altura aunque un plan tenga insignia y dos precios. Sin subgrid
   (navegadores viejos) simplemente se ve como antes: nada se rompe. */
.planes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; grid-template-rows: auto auto; }
.plan { background: var(--blanco); border: 1px solid var(--arena); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
@supports (grid-template-rows: subgrid) {
  .plan { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
}
.plan__head { display: flex; flex-direction: column; }
.plan__head .btn { margin-top: auto; }
.plan--destacado { border-color: var(--terracota); box-shadow: var(--shadow); }
.plan__head { padding: 30px 28px 26px; border-bottom: 1px solid var(--arena); }
.plan--destacado .plan__head { background: rgba(214,203,182,.22); }
.plan__head h3 { font-size: 1.5rem; margin-bottom: .3em; color: var(--terracota); text-align: center; }
/* Banda de color en los dos titulos.
   Antes los dos eran terracota sobre blanco, pero solo el segundo traia
   insignia arriba, asi que su titulo caia mas abajo que el del primero y
   los encabezados se veian desparejos. Con la banda los dos arrancan a la
   misma altura y se leen como una pareja.
   Los margenes negativos igualan el padding de .plan__head para que la
   banda llegue al borde de la tarjeta sin tener que reestructurar. */
.plan__titulo {
  background: var(--terracota); margin: -30px -28px 20px; padding: 20px 28px 18px;
}
.plan__titulo h3 { color: #fff; margin: 0; }
.plan__titulo .comparar__insignia { background: rgba(255,255,255,.22); color: #fff; margin-bottom: 10px; }
.plan__head > p { color: var(--text-soft); font-size: .92rem; margin-bottom: 20px; }
.comparar__insignia { display: inline-block; background: var(--terracota); color: #fff; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 12px; }
.plan__precio { margin-bottom: 22px; }
.plan__precio strong { display: block; font-family: var(--font-title); font-size: 1.6rem; color: var(--terracota); line-height: 1.1; }
.plan__precio span { display: block; font-size: .8rem; color: var(--text-soft); margin-top: 3px; }

.plan__lista { list-style: none; padding: 0; margin: 0; }
.plan__lista li { padding: 12px 28px; font-size: .92rem; color: var(--text); display: flex; gap: 11px; align-items: flex-start; }
.plan__lista li + li { border-top: 1px solid rgba(138,71,46,.08); }
.plan__grupo { background: var(--nacar-2); font-size: .68rem !important; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--terracota) !important; padding: 11px 28px !important; }
.plan__texto { flex-direction: column; gap: 3px !important; }
.plan__texto span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.plan__texto b { font-weight: 400; }

/* El sí y el no van dibujados, con su texto oculto para lectores de pantalla */
.plan__lista li[data-si]::before, .plan__lista li[data-no]::before {
  flex: none; display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: .72rem; font-weight: 700; margin-top: 1px;
}
.plan__lista li[data-si]::before { content: "✓"; background: rgba(10,123,62,.12); color: #0A7B3E; }
.plan__lista li[data-no] { color: var(--text-soft); }
.plan__lista li[data-no]::before { content: "–"; background: rgba(107,90,80,.1); color: var(--text-soft); }

.tabla-nota { font-size: .85rem; color: var(--text-soft); margin-top: 20px; max-width: 74ch; }
@media (max-width: 820px) { .planes { grid-template-columns: 1fr; } }
/* Un solo plan desde que Property Management salió de la página (se
   ofrece en privado): la tarjeta centrada, no media rejilla vacía.
   El encabezado (banda, entrada y precio) también va centrado: alineado a
   la izquierda era la mitad de una comparación que ya no existe. La lista
   se queda a la izquierda, que es como se leen las listas. */
.planes--uno { grid-template-columns: min(560px, 100%); justify-content: center; }
.planes--uno .plan__titulo, .planes--uno .plan__head > p, .planes--uno .plan__precio { text-align: center; }

/* --- Todo bajo un mismo techo --- */
.techo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.techo__col { background: var(--blanco); border: 1px solid rgba(138,71,46,.1); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-soft); }
.techo__col h3 { font-size: 1.15rem; color: var(--terracota); margin-bottom: 18px; }
.checklist--claro li::before { background: rgba(138,71,46,.1); }
.checklist--claro li { font-size: .93rem; }

/* --- Canales --- */
.canales { display: grid; grid-template-columns: 1fr auto 1.2fr; gap: 28px; align-items: center; }
.canales__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
/* Los logos vienen de las OTAs con formas y fondos distintos (Expedia trae
   cuadro amarillo, Booking viene con mucho blanco alrededor). Los metemos en
   una caja del mismo tamano con object-fit para que se vean parejos. */
.canales__lista li {
  background: var(--blanco); border: 1px solid var(--arena); border-radius: var(--radius-sm);
  padding: 12px 20px; font-family: var(--font-title); font-size: 1.05rem; color: var(--cacao);
  display: flex; align-items: center; gap: 16px;
}
.canales__lista li img {
  flex: none; width: 40px; height: 40px; object-fit: contain;
}
/* Booking ya trae aire propio: si lo dejamos igual se ve mas chico que el resto */
.canales__lista li img.canal__logo--ancho { width: 52px; margin: 0 -6px; }
.canales__flecha { font-size: 1.8rem; color: var(--terracota); text-align: center; }
.canales__app { background: var(--terracota); color: #fff; border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow); }
.canales__app h3 { color: #fff; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.canales__app h3 span { font-family: var(--font-body); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius-pill); padding: 4px 10px; }
.canales__app .checklist { margin: 0; }
.canales__app .checklist li { color: rgba(255,255,255,.92); font-size: .93rem; }
.canales__app .checklist li::before { background: rgba(255,255,255,.2); color: #fff; }

/* --- Pasos numerados --- */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; counter-reset: paso; }
.pasos li { text-align: center; }
.pasos__num { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; border: 1.5px solid var(--terracota); background: var(--blanco); font-family: var(--font-title); font-size: 1.3rem; color: var(--terracota); }
.pasos--lleno .pasos__num { background: var(--terracota); color: #fff; border-color: var(--terracota); }
.pasos h3 { font-size: 1.05rem; margin-bottom: .4em; }
.pasos p { color: var(--text-soft); font-size: .9rem; margin: 0; }
.frase-cierre { font-family: var(--font-accent); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--cacao); text-align: center; margin: 56px auto 0; max-width: 30ch; }

.form--centrado { margin-inline: auto; }

@media (max-width: 980px) {
  .techo { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .canales { grid-template-columns: 1fr; }
  .canales__flecha { transform: rotate(90deg); }
}
@media (max-width: 560px) {
  .pasos { grid-template-columns: 1fr; }
}

/* =====================================================================
   FORMS
   ===================================================================== */
.form { display: grid; gap: 16px; max-width: 620px; }
.form.two { grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--cacao); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--arena); background: var(--blanco); color: var(--text); outline: none; transition: border .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--terracota); }
.field textarea { min-height: 120px; resize: vertical; }
.field__opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-soft); opacity: .75; }
.field__ayuda { font-size: .78rem; line-height: 1.45; color: var(--text-soft); opacity: .85; }
.field__error { font-size: .82rem; line-height: 1.45; color: #A3341F; font-weight: 600; }

/* Adjuntar fotos: el input real va oculto y el <label> hace de botón */
.adjuntos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adjunto {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px dashed var(--arena); border-radius: var(--radius-sm);
  background: var(--nacar-2); padding: 13px 16px;
  font-size: .85rem; font-weight: 500; color: var(--text-soft);
  transition: border-color .2s, color .2s, background .2s;
}
.adjunto::before {
  content: "+"; font-size: 1.1rem; line-height: 1; color: var(--terracota);
  flex: 0 0 auto;
}
.adjunto:hover { border-color: var(--terracota); color: var(--cacao); }
.adjunto input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.adjunto input[type="file"]:focus-visible + .adjunto__txt { outline: 2px solid var(--terracota); outline-offset: 3px; }
.adjunto__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjunto--lleno {
  border-style: solid; border-color: var(--terracota);
  background: var(--nacar); color: var(--cacao);
}
.adjunto--lleno::before { content: "\2713"; font-size: .9rem; font-weight: 700; }
@media (max-width: 520px) { .adjuntos { grid-template-columns: 1fr; } }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--text-soft); }
.consent input { margin-top: 4px; }
.consent a { color: var(--terracota); text-decoration: underline; text-underline-offset: 2px; }
.form-note { font-size: .85rem; color: var(--text-soft); }
.form-ok { background: rgba(61,67,22,.1); border: 1px solid var(--enebro); color: var(--enebro); padding: 14px 18px; border-radius: var(--radius-sm); display: none; }
.form-ok.show { display: block; }
.form-error { background: rgba(138,71,46,.08); border: 1px solid var(--terracota); color: var(--terracota); padding: 14px 18px; border-radius: var(--radius-sm); display: none; }
.form-error.show { display: block; }
.form-error a { color: inherit; text-decoration: underline; }
.form button[type="submit"]:disabled { opacity: .6; cursor: default; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--cacao); color: rgba(241,237,228,.75); padding-block: 64px 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h5 { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--arena); margin: 0 0 16px; }
.site-footer a { display: block; padding: 5px 0; color: rgba(241,237,228,.75); font-size: .92rem; }
.site-footer a:hover { color: #fff; }
.footer-brand p { max-width: 34ch; font-size: .92rem; }
.footer-brand .brand__name { color: var(--arena); }
.footer-bottom { border-top: 1px solid rgba(241,237,228,.14); margin-top: 44px; padding-top: 22px; font-size: .82rem; color: rgba(241,237,228,.55); text-align: center; }

/* =====================================================================
   PAGE HEADER (subpáginas)
   ===================================================================== */
.page-hero { background: var(--nacar-2); padding-block: clamp(56px, 8vw, 96px); text-align: center; border-bottom: 1px solid rgba(138,71,46,.1); }
.page-hero .lead { margin-inline: auto; }

/* Encabezado con foto. El velo oscuro no es decorativo: sin él, el texto
   blanco se pierde sobre las zonas claras de la imagen. */
.page-hero--foto {
  position: relative; border-bottom: none; color: #fff;
  background-size: cover; background-position: center;
  padding-block: clamp(72px, 10vw, 132px);
}
.page-hero--foto::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,17,13,.5), rgba(28,17,13,.72));
}
.page-hero--foto .wrap { position: relative; z-index: 2; }
.page-hero--foto h1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.page-hero--foto .lead { color: rgba(241,237,228,.92); }
.page-hero--foto .eyebrow { color: var(--arena); }
.page-hero--foto [data-search-banner] { color: #fff !important; }

/* =====================================================================
   FICHA DE ALOJAMIENTO (alojamiento-*.html)
   Datos y fotos vienen del PMS Kunas.
   ===================================================================== */

/* --- Galería: una foto grande + dos chicas ---
   Eran cuatro chicas y cada una salía del tamaño de una estampa: no se
   alcanzaba a ver nada. Dos, al doble de tamaño, sí se miran; el resto
   está a un clic en "Ver las N fotos".
   El alto lo fija aspect-ratio, no las fotos: si lo dictaran ellas, una
   vertical estiraría la fila entera. */
.gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; border-radius: var(--radius); overflow: hidden; position: relative; aspect-ratio: 2 / 1; }
.gallery--ancha { aspect-ratio: auto; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; background: linear-gradient(135deg, var(--arena), #b9a888); }
.gallery a { display: block; overflow: hidden; }
.gallery a:first-child { grid-row: span 2; }
.gallery a img { transition: transform .4s ease; }
.gallery a:hover img { transform: scale(1.04); }
.gallery__more {
  position: absolute; right: 16px; bottom: 16px; background: rgba(251,249,245,.94);
  color: var(--cacao); border: 1px solid var(--arena); border-radius: var(--radius-pill);
  padding: 10px 20px; font-size: .82rem; font-weight: 600; box-shadow: var(--shadow-soft);
}
.gallery__more:hover { background: #fff; }

/* --- Galeria con foto principal a lo ancho ---
   Una unidad terminada se vende con una foto, no con cinco miniaturas.
   La principal ocupa el ancho entero y las otras cuatro van debajo, del
   mismo tamano entre si. Y la principal NO se repite abajo: ya la
   viste, repetirla gasta un hueco que podia mostrar algo nuevo.

   Sigue siendo .gallery porque el visor de main.js recorre ".gallery a"
   por orden y lo empareja con data-galeria; sacar la foto de ahi la
   dejaria sin abrir en grande. */
.gallery--ancha { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; }
.gallery--ancha a:first-child { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 21 / 9; }
.gallery--ancha a:not(:first-child) { aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
  .gallery--ancha { grid-template-columns: repeat(2, 1fr); }
  .gallery--ancha a:first-child { aspect-ratio: 4 / 3; }
}

/* --- Dos columnas: contenido + tarjeta de reserva pegajosa --- */
/* OJO: la columna derecha debe ESTIRARSE a lo alto de la fila (align-items
   por defecto: stretch). Si se pone align-items:start, la columna mide lo
   mismo que la tarjeta y position:sticky se queda sin recorrido. */
.unit { display: grid; grid-template-columns: minmax(0,1fr) 370px; gap: clamp(32px, 5vw, 72px); }
.unit__head { border-bottom: 1px solid var(--arena); padding-bottom: 24px; margin-bottom: 28px; }
.unit__head h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: .3em; }
.unit__stats { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--text-soft); font-size: .95rem; }
.unit__stats span { display: inline-flex; align-items: center; gap: 7px; }
.unit__desc { white-space: pre-line; }
.unit h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 48px 0 18px; padding-top: 40px; border-top: 1px solid var(--arena); }
.unit h2:first-of-type { border-top: none; padding-top: 0; margin-top: 36px; }

/* --- Amenidades --- */
/* Iconografía monolínea: hereda el color del texto y no depende de que el
   sistema del visitante tenga tal o cual emoji. */
.ico { width: 22px; height: 22px; flex: none; }
.amenities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.amenities li { display: flex; align-items: center; gap: 14px; color: var(--text-soft); font-size: .95rem; }
.amenities li .ico { color: var(--cacao); }
.unit__stats .ico { color: var(--terracota); width: 20px; height: 20px; }

/* --- Tarjeta de reserva --- */
.book { position: sticky; top: 92px; background: var(--blanco); border: 1px solid var(--arena); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.book__price { font-family: var(--font-title); font-size: 1.8rem; color: var(--cacao); line-height: 1; }
.book__price small { font-family: var(--font-body); font-size: .8rem; color: var(--text-soft); }
.book__note { font-size: .8rem; color: var(--text-soft); margin: 6px 0 18px; }
/* Politica de cancelacion en la tarjeta de reserva. Nace oculta: solo
   aparece cuando el PMS devuelve el texto para esas fechas. */
.book__politica {
  display: flex; gap: 11px; align-items: flex-start;
  margin-top: 14px; padding: 12px 14px;
  background: var(--nacar-2); border-radius: var(--radius-sm);
  font-size: .84rem; line-height: 1.5; color: var(--text-soft);
}
.book__politica[hidden] { display: none; }
.book__politica svg { flex: none; width: 18px; height: 18px; color: var(--terracota); margin-top: 1px; }
.book__politica strong { display: block; color: var(--cacao); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }

.book .field { margin-bottom: 12px; }
.book .field label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.book__legal { font-size: .75rem; color: var(--text-soft); text-align: center; margin: 12px 0 0; }

/* --- Mapa de Google, detrás de consentimiento ---
   No se carga hasta que la persona lo pide: Google instala cookies en cuanto
   aparece el iframe, y hacerlo sin permiso no cumple con la ley. */
.mapa { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--arena); box-shadow: var(--shadow-soft); background: var(--nacar-2); }
.mapa iframe { display: block; width: 100%; height: 340px; border: 0; }
.mapa--cerrado { display: grid; place-items: center; min-height: 340px; padding: 32px 24px; text-align: center; background: linear-gradient(160deg, var(--nacar-2), var(--arena)); }
.mapa__aviso { max-width: 46ch; display: grid; gap: 10px; justify-items: center; }
.mapa__aviso p { margin: 0; }
.mapa__icono { font-size: 2rem; line-height: 1; }
.mapa__texto { font-size: .86rem; color: var(--text-soft); }
.mapa__aviso .btn { margin-top: 6px; }
.mapa__aviso a { color: var(--terracota); text-decoration: underline; }
.mapa__nota { font-size: .85rem; color: var(--text-soft); margin-top: 12px; }
.mapa__nota a { color: var(--terracota); }

/* --- Página de reserva: el motor de Kunas dentro del sitio --- */
.reserva__head { display: grid; grid-template-columns: 120px 1fr auto; gap: 24px; align-items: center; background: var(--blanco); border: 1px solid var(--arena); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow-soft); }
.reserva__head img { border-radius: var(--radius-sm); object-fit: cover; width: 120px; height: 90px; }
.reserva__head h1 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin: 0 0 8px; }
.reserva__precio { text-align: right; }
/* El motor trae su propia barra superior (logo, Contacto, Iniciar sesión,
   idioma, moneda). Dentro del sitio esa barra compite con la nuestra, y Kunas
   no ofrece un modo "incrustado" para quitarla: ningún parámetro de su URL la
   oculta. La recortamos desde fuera subiendo el iframe dentro de un
   contenedor con overflow:hidden.

   El recorte NO es un solo numero: el motor cambia de diseño en 992px y su
   barra cambia de alto con el. Medido en agosto de 2026 sobre el motor real:

       >= 992px   barra de 83px  (Contacto, Iniciar sesión, ES, MXN, Menú)
       <  992px   barra de 118px = 80px de esa fila + 38px de la fila de
                  calificación (9.9, Excepcional, y los logos de las OTAs)

   Abajo de 992 se recortan 80 y no 118: así la fila de calificación se ve
   completa en vez de asomarse cortada por la mitad, que es como se veía.
   Si algún día Kunas cambia el alto de su barra, se ajusta aquí. */
.motor {
  --motor-recorte: 83px;
  border: 1px solid var(--arena); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); background: var(--blanco);
  margin-bottom: 16px; position: relative;
}
.motor--recortado { height: 1180px; }
.motor--recortado iframe { margin-top: calc(var(--motor-recorte) * -1); height: calc(100% + var(--motor-recorte)); }
.motor iframe { display: block; width: 100%; border: 0; }
/* Mientras carga todavia no hay alto en el contenedor y un iframe sin alto
   se queda en 150px. Solo aplica antes del recorte: puesto en los dos,
   min-height le ganaria al alto de pantalla en telefonos chicos y el motor
   se saldria por abajo del contenedor. */
.motor:not(.motor--recortado) iframe { min-height: 600px; }

/* Debajo de 992 el motor pasa a ocupar el alto de la pantalla y se desplaza
   por dentro, como una app.
   Con el alto fijo de 1180px, cuando el motor mostraba poco contenido
   quedaba un vacío de casi mil píxeles antes de llegar a "Reservar". Y como
   el iframe se queda con el gesto del dedo, deslizar encima de ese vacío no
   movía nada: había que atinarle al margen de dos dedos de ancho.
   svh y no vh: vh mide la pantalla sin la barra del navegador, y en el
   celular eso deja el motor mas alto que el hueco disponible. */
@media (max-width: 991.98px) {
  .motor { --motor-recorte: 80px; }
  .motor--recortado { height: calc(100svh - 92px); min-height: 540px; }
}
/* Aviso de pago seguro bajo el motor. Solo en las unidades que de verdad
   cobran con tarjeta: en las de "bajo solicitud" seria falso. */
.pago-seguro {
  display: flex; align-items: center; gap: 12px; max-width: 74ch;
  margin: 18px 0 0; padding: 13px 18px;
  background: rgba(10,123,62,.06); border: 1px solid rgba(10,123,62,.22);
  border-radius: var(--radius-sm);
  font-size: .9rem; line-height: 1.55; color: var(--text);
}
.pago-seguro svg { flex: none; width: 22px; height: 22px; color: #0A7B3E; }
.pago-seguro strong { color: #0A7B3E; }

.motor__cargando { display: grid; place-items: center; gap: 14px; min-height: 420px; color: var(--text-soft); font-size: .95rem; }
.motor__spinner { width: 34px; height: 34px; border: 3px solid var(--arena); border-top-color: var(--terracota); border-radius: 50%; animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .motor__spinner { animation-duration: 3s; } }
@media (max-width: 720px) {
  .reserva__head { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .reserva__precio { text-align: center; }
}

/* --- Resultados de búsqueda (buscar.html) --- */
.searchbar--compacta { margin-top: 26px; box-shadow: var(--shadow-soft); }
.resultado__total { font-size: .82rem; color: var(--text-soft); margin-top: -6px; }
.sin-resultados { text-align: center; max-width: 52ch; margin-inline: auto; padding: clamp(32px, 6vw, 64px) 24px; }
.sin-resultados__icono { font-size: 1.8rem; color: var(--terracota); margin: 0 0 10px; }
.sin-resultados h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.sin-resultados p { color: var(--text-soft); }
.sin-resultados__acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* --- Galería y video de los lugares de Descubre Kino ---
   Los huecos muestran el marcador color arena mientras no exista el archivo:
   main.js quita la imagen rota y deja ver el fondo del contenedor. */
/* La galería y el video se salen del ancho de lectura (74ch): con ese ancho
   las fotos quedaban de 175px y no se veía nada. Se centran respecto a la
   página, no respecto a la columna de texto. */
.galeria, .video-lugar, .legal .mapa {
  width: min(1040px, calc(100vw - 2 * var(--gutter)));
  position: relative; left: 50%; transform: translateX(-50%);
}
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.galeria__hueco {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius-sm);
  overflow: hidden; background: linear-gradient(135deg, var(--arena), #b9a888);
  display: grid; place-items: center;
}
.galeria__hueco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.galeria__hueco span {
  font-family: var(--font-accent); font-style: italic; font-size: .85rem;
  color: rgba(54,32,27,.4); padding: 8px; text-align: center;
}
.galeria__hueco--ancho { grid-column: span 2; aspect-ratio: 8/3; }

.video-lugar {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius);
  overflow: hidden; background: linear-gradient(135deg, var(--cacao), #4a3630);
  display: grid; place-items: center; box-shadow: var(--shadow);
}
.video-lugar video, .video-lugar iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-lugar__aviso { text-align: center; color: rgba(241,237,228,.75); display: grid; gap: 6px; }
.video-lugar__aviso b { font-size: 1.8rem; font-weight: 400; }
.video-lugar__aviso span { font-size: .85rem; font-family: var(--font-accent); font-style: italic; }

@media (max-width: 720px) {
  .galeria { grid-template-columns: 1fr 1fr; }
  .galeria__hueco--ancho { grid-column: span 2; }
}

/* --- Actividades de cada lugar de Descubre Kino --- */
/* Entrada editorial: el primer párrafo entra grande, como en una revista */
.kino-intro { font-family: var(--font-title); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.45; color: var(--cacao); margin: 0 0 8px; }

/* Cómo vivirlo, en bloque destacado */
.kino-vivirlo { background: var(--nacar-2); border-left: 3px solid var(--terracota); border-radius: 0 var(--radius) var(--radius) 0; padding: 24px 28px; margin: 40px 0 8px; }
.kino-vivirlo h2 { border-top: none; padding-top: 0; margin: 0 0 10px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; }
.kino-vivirlo p { margin: 0; color: var(--text-soft); }

/* Actividades numeradas, al estilo de un itinerario */
.actividades { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.actividades li { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--arena); }
.actividades li:last-child { border-bottom: 1px solid var(--arena); }
.act__num { font-family: var(--font-title); font-size: 1.5rem; color: var(--arena); line-height: 1; flex: none; width: 42px; }
.actividades .ico { width: 26px; height: 26px; color: var(--terracota); margin-top: 1px; }
.actividades div { display: grid; gap: 3px; }
.actividades strong { color: var(--cacao); font-size: .98rem; }
.actividades span { color: var(--text-soft); font-size: .88rem; line-height: 1.5; }
@media (max-width: 720px) { .actividades { grid-template-columns: 1fr; } }

/* --- Modo de confirmación (viene del PMS) --- */
.confirma { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; margin: 12px 0 0; line-height: 1.4; }
.confirma b { font-size: .95rem; line-height: 1.2; flex: none; }
.confirma--inmediata { color: var(--enebro); }
.confirma--solicitud { color: var(--text-soft); }

/* --- Solicitud de reserva (alojamientos que confirmamos con el propietario) --- */
.solicitud { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; background: var(--blanco); border: 1px solid var(--arena); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-soft); margin-bottom: 16px; }
.solicitud__intro h2 { margin-bottom: .4em; }
.solicitud__intro p { color: var(--text-soft); }
.solicitud__nota { font-size: .85rem; padding-left: 14px; border-left: 3px solid var(--enebro); }
.solicitud .form { max-width: none; }
@media (max-width: 900px) { .solicitud { grid-template-columns: 1fr; } }

/* --- Reseñas y datos prácticos --- */
.unit-reviews { display: grid; gap: 16px; }
.unit-know { display: grid; gap: 18px; }
.unit-know div { padding-left: 14px; border-left: 3px solid var(--enebro); }
.unit-know h3 { font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cacao); margin: 0 0 6px; }
.unit-know p { color: var(--text-soft); font-size: .92rem; margin: 0; }

@media (max-width: 980px) {
  .unit { grid-template-columns: 1fr; }
  .book { position: static; }
}
@media (max-width: 720px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; }
  .gallery a:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4/3; }
  .gallery:not(.gallery--ancha) a:not(:first-child) { aspect-ratio: 4/3; }
  .amenities { grid-template-columns: 1fr; }
}

/* =====================================================================
   PÁGINAS LEGALES (aviso de privacidad, términos)
   ===================================================================== */
.legal { max-width: 74ch; margin-inline: auto; }
.legal h2 {
  font-family: var(--font-body); font-weight: 600; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cacao);
  margin: 44px 0 12px; padding-left: 14px; border-left: 3px solid var(--enebro);
}
.legal h2:first-of-type { margin-top: 8px; }
.legal h3 { font-family: var(--font-body); font-weight: 600; font-size: .95rem; color: var(--cacao); margin: 28px 0 8px; }
.legal p, .legal li { color: var(--text-soft); }
.legal a { color: var(--terracota); text-decoration: underline; text-underline-offset: 2px; }
.legal ul { padding-left: 20px; margin: 0 0 1em; display: grid; gap: 8px; }
.legal strong { color: var(--cacao); }
.legal__date {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-soft); border-bottom: 2px solid var(--terracota);
  padding-bottom: 14px; margin-bottom: 32px;
}
.legal__fundamento {
  background: var(--nacar-2); border: 1px solid var(--arena);
  border-radius: var(--radius-sm); padding: 14px 18px;
  font-size: .88rem; margin-top: 44px;
}
.legal__note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--arena); font-size: .92rem; }
/* =====================================================================
   PÁGINA DE GRACIAS (gracias-reserva.html) — oculta, se enlaza desde Kunas
   ===================================================================== */
.gracias-hero { text-align: center; }
.gracias-hero .lead { margin-inline: auto; }
.gracias-sello {
  width: 64px; height: 64px; margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%; background: #0A7B3E; color: #fff;
  box-shadow: 0 8px 24px rgba(10,123,62,.35);
  /* Sin animación: si el navegador la pausa (pestaña en segundo plano, batería
     baja, movimiento reducido) el sello se queda en el primer fotograma y se
     ve encogido. No vale la pena arriesgar eso por un adorno. */
}
.gracias-sello svg { width: 32px; height: 32px; }

.gracias-codigo {
  display: inline-block; margin-top: 22px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-sm); padding: 10px 20px;
  font-size: .9rem; letter-spacing: .04em;
}
.gracias-codigo strong { letter-spacing: .14em; font-size: 1.05rem; }

.pasos-gracias { list-style: none; padding: 0; margin: 0 auto; max-width: 720px; display: grid; gap: 4px; }
.pasos-gracias li { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--arena); }
.pasos-gracias li:last-child { border-bottom: 1px solid var(--arena); }
.pasos-gracias__num {
  font-family: var(--font-title); font-size: 1.5rem;
  color: var(--terracota); opacity: .55; line-height: 1;
}
.pasos-gracias h3 { margin: 0 0 8px; font-size: 1.15rem; }
.pasos-gracias p { margin: 0; color: var(--text-soft); font-size: .95rem; line-height: 1.65; }
@media (max-width: 560px) {
  .pasos-gracias li { grid-template-columns: 1fr; gap: 8px; }
  .pasos-gracias__num { font-size: 1.2rem; }
}

.legal__aviso-ley {
  border-left: 3px solid var(--terracota); background: var(--nacar-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px; font-size: .9rem; margin-bottom: 36px;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* En pantallas medianas 4 fichas quedan muy angostas: bajamos a 3 */
@media (max-width: 1100px) {
  .cards--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .cards, .tiles, .kino, .features { grid-template-columns: 1fr 1fr; }
  .reviews, .split, .footer-grid { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .form.two { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav__links { position: fixed; inset: 64px 0 auto; flex-direction: column; background: var(--nacar); padding: 24px var(--gutter); gap: 4px; border-bottom: 1px solid var(--arena); transform: translateY(-130%); transition: transform .3s ease; box-shadow: var(--shadow); align-items: stretch; }
  .nav__links.open { transform: translateY(0); }
  .nav__links a { padding: 12px 0; width: 100%; border-bottom: 1px solid rgba(138,71,46,.08); }
  .nav__toggle { display: block; }
  /* En movil el CTA del encabezado partia en dos lineas y crecia la barra a 94px */
  .nav__right { gap: 8px; }
  .nav__cta { font-size: .62rem; letter-spacing: .04em; padding: 9px 12px; white-space: nowrap; }
  .searchbar { grid-template-columns: 1fr; }
  .searchbar__field + .searchbar__field { border-left: none; border-top: 1px solid var(--arena); }
  .tiles, .features { grid-template-columns: 1fr; }

  /* Descubre Kino de dos en dos: son siete recuadros y a lo ancho completo
     eran 2,300 px de desplazamiento por una seccion que se hojea, no se
     lee. Las 3 categorias sí se quedan a lo ancho: son la entrada al
     catalogo y ahi la foto grande es el argumento. */
  .kino { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kino .tile__img h3 { font-size: .88rem; line-height: 1.2; }
  .kino .tile__body { padding: 10px 12px 14px; font-size: .76rem; }

  /* Propiedades y reseñas se quedan de dos en dos.
     A lo ancho completo, ocho propiedades son 3,900 px de desplazamiento y
     el visitante nunca ve dos juntas para compararlas. De dos en dos el
     bloque baja a la mitad y el pulgar las compara lado a lado.
     El resto de las rejillas sí se aplana: las fotos de Descubre Kino y
     las categorías se venden por tamaño, no por cantidad. */
  .cards, .cards--4, .reviews { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* Casa Ruma y The Salty Shack tienen una sola unidad: sola en media
     columna se ve como si faltara algo. Ocupa el renglon completo. */
  .cards > :only-child, .reviews > :only-child { grid-column: 1 / -1; }

  /* Partir la rejilla sin bajar la escala de adentro deja una palabra por
     renglón y los iconos desbordando. Todo lo de adentro encoge. */
  .property-card__body { padding: 12px 12px 14px; gap: 7px; }
  .property-card__title { font-size: .9rem; line-height: 1.25; }
  .property-card__price { font-size: .88rem; }
  .property-card__razon { font-size: .78rem; min-height: 3.2em; }
  /* En bloque: "MXN / noche" no cabe junto al precio a este ancho */
  .property-card__price small { display: block; font-size: .66rem; margin-top: 1px; }
  .property-card__meta { gap: 7px; font-size: .68rem; }
  .property-card__meta span { gap: 4px; }
  .property-card__meta .ico { width: 13px; height: 13px; }
  /* 11px de alto interior, no 9: con 9 el boton quedaba en 40px y el
     minimo para tocar con el dedo son 44. */
  .property-card .btn { padding: 11px 12px; font-size: .74rem; }

  /* Manposteria, no rejilla.
     Las resenas nunca miden lo mismo. Con rejilla solo hay dos finales
     malos: estirarlas todas al alto de la mas alta (hueco blanco adentro
     de la corta) o dejarlas libres (escalones entre renglon y renglon).
     En columnas cada tarjeta cae debajo de la anterior de SU columna y no
     queda ni un hueco. El orden pasa a ser por columna en vez de por
     renglon, que en testimonios da igual: no hay un primero.
     Al abrir un "Leer mas" la columna se reacomoda sola. */
  .reviews {
    display: block; columns: 2; column-gap: 12px;
  }
  .review {
    break-inside: avoid; -webkit-column-break-inside: avoid;
    margin: 0 0 12px; padding: 14px 14px 16px;
  }

  /* A 162px de ancho sí conviene separarlos a las orillas: el renglón se
     usa completo y el logo no se pega a las estrellas. */
  .review__encabezado { justify-content: space-between; gap: 8px; margin-bottom: 9px; }
  .review__encabezado .review__canal { height: 14px; }
  .review .stars { font-size: .9rem; letter-spacing: 0; }
  /* Las cuatro resenas escritas a mano en el HTML no traen encabezado:
     ahi las estrellas son hijas directas y necesitan su propio aire. Las
     que arma main.js van dentro de .review__encabezado y no entran aqui. */
  .review > .stars { margin-bottom: 9px; }
  .review__quote { font-size: .82rem; line-height: 1.5; margin: 0 0 12px; }
  /* Recorte a cinco renglones. La clase la pone main.js y SOLO en las que
     de verdad sobran, para no dejar un "Leer mas" que no abre nada. */
  .review--corta .review__quote {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
  }
  .review--abierta .review__quote { display: block; overflow: visible; }
  /* El relleno vertical es zona para el dedo, no aire: el margen negativo
     se lo devuelve al diseno para que se vea igual de junto. */
  .review__mas {
    display: block; margin: -14px 0 2px; padding: 13px 0;
    background: none; border: 0; cursor: pointer;
    font-family: var(--font-body); font-size: .76rem; font-weight: 600;
    color: var(--terracota); text-decoration: underline; text-underline-offset: 3px;
  }
  .review__canal { height: 15px; margin-bottom: 7px; }
  /* Un hilo separa la firma de la cita: a este ancho las dos se leian como
     un solo bloque de texto. */
  .review__author { gap: 8px; padding-top: 11px; border-top: 1px solid rgba(138,71,46,.1); }
  .avatar { width: 28px; height: 28px; font-size: .6rem; }
  /* balance reparte los renglones parejo: "Luis Alberto Jaime Ozuna" caia
     como tres palabras arriba y una sola abajo. */
  .review__name { font-size: .76rem; line-height: 1.25; text-wrap: balance; }
  .review__loc { font-size: .66rem; }

  /* Los dos recuadros de calificacion, uno junto al otro. Apilados se
     comian media pantalla para mostrar un logo y cinco estrellas cada uno.
     Rejilla y no flex para que los dos midan igual aunque "Ver en Google"
     sea mas largo que "Ver en Airbnb". */
  .notas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
  .google-nota { padding: 14px 10px; gap: 6px; }
  .google-nota__logo { height: 32px; }
  /* --letra va igual que letter-spacing o el recorte de las estrellas
     parciales se desfasa y la quinta se ve llena de mas */
  .google-nota .stars { font-size: .9rem; letter-spacing: 2px; --letra: 2px; }
  /* 12px de alto interior deja el boton en 44, el minimo para el dedo */
  .google-nota .btn { padding: 12px 8px; font-size: .7rem; }
}
/* Telefonos angostos (iPhone SE): el menu hamburguesa se salia del borde */
@media (max-width: 360px) {
  .nav__cta { font-size: .56rem; letter-spacing: .02em; padding: 8px 9px; }
  .brand__logo { width: 34px; }
}

/* --- Aviso temporal flotante (esquina inferior derecha) ---
   Vive arriba del botón de WhatsApp, en la misma columna. Entra
   deslizándose desde fuera de la pantalla; con menos movimiento, solo
   aparece. Se borra el bloque del HTML y esto queda sin efecto. */
.aviso-flotante {
  position: fixed; right: 18px; bottom: 126px; z-index: 40;
  width: min(340px, calc(100vw - 28px));
  background: var(--blanco); border: 1px solid var(--arena); border-radius: var(--radius);
  padding: 16px 46px 14px 18px; box-shadow: var(--shadow);
  font-size: .9rem; line-height: 1.5; color: var(--text);
  transform: translateX(calc(100% + 24px)); opacity: 0;
  transition: transform .5s var(--salida), opacity .4s var(--salida);
}
.aviso-flotante--visible { transform: none; opacity: 1; }
.aviso-flotante[hidden] { display: none; }
.aviso-flotante p { margin: 0; }
.aviso-flotante .aviso-flotante__eti { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terracota); margin-bottom: 4px; }
.aviso-flotante a { color: var(--terracota); white-space: nowrap; }
.aviso-flotante .aviso-flotante__firma { margin-top: 8px; font-size: .78rem; color: var(--text-soft); }
/* 40px de zona de toque, en la esquina, sin comerse el texto */
.aviso-flotante__cerrar {
  position: absolute; top: 4px; right: 4px; width: 40px; height: 40px;
  border: 0; background: none; border-radius: 50%; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--text-soft);
}
.aviso-flotante__cerrar:hover { color: var(--cacao); background: var(--nacar-2); }
/* La flecha cae del aviso al globo del chat, por el hueco que deja el
   bottom de arriba. Se balancea despacio: lo justo para que el ojo la
   siga hasta el boton, sin convertirse en un anuncio parpadeante. */
.aviso-flotante__flecha {
  position: absolute; right: 8px; bottom: -50px;
  width: 40px; height: 58px; color: var(--terracota);
  pointer-events: none;
  animation: flecha-senala 2.4s var(--salida) infinite;
}
@keyframes flecha-senala {
  0%, 62%, 100% { transform: none; }
  80% { transform: translateY(6px); }
}
/* Con el chat abierto el aviso sobra y ademas le caeria encima: el
   visitante ya hizo lo que le pedia. */
.chat-abierto .aviso-flotante { opacity: 0; pointer-events: none; }
@media (max-width: 620px) { .aviso-flotante { right: 14px; left: 14px; width: auto; bottom: 112px; } }
@media (prefers-reduced-motion: reduce) { .aviso-flotante { transform: none; transition: opacity .2s; } .aviso-flotante__flecha { animation: none; } }
@media print { .aviso-flotante { display: none; } }

/* --- Acordeones de políticas (publicar.html) ---
   <details> nativo: el teclado, el estado y la accesibilidad vienen
   gratis. Solo se viste. */
.pliegues { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.pliegue { background: var(--blanco); border: 1px solid var(--arena); border-radius: var(--radius-sm); }
.pliegue summary {
  list-style: none; cursor: pointer; padding: 16px 48px 16px 20px; position: relative;
  font-weight: 600; color: var(--cacao);
}
.pliegue summary::-webkit-details-marker { display: none; }
/* La flecha gira al abrir: dice el estado sin palabras */
.pliegue summary::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 9px; height: 9px; border-right: 2px solid var(--terracota); border-bottom: 2px solid var(--terracota);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--salida);
}
.pliegue[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.pliegue summary:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; border-radius: var(--radius-sm); }
.pliegue__cuerpo { padding: 0 20px 18px; color: var(--text); border-top: 1px solid rgba(138,71,46,.1); }
.pliegue__cuerpo p, .pliegue__cuerpo li { font-size: .95rem; line-height: 1.6; }
.pliegue__cuerpo ul { margin: 12px 0 0; padding-left: 20px; }
.pliegue__cuerpo li { margin-bottom: 8px; }
.pliegues__nota { text-align: center; color: var(--text-soft); font-size: .85rem; margin-top: 22px; }

/* --- Chat interno (burbuja + ventana) ---
   Ocupa el lugar del botón de WhatsApp mientras la línea está caída
   (ver CHAT_EN_VEZ_DE_WHATSAPP en main.js). Terracota y no verde:
   es nuestro canal, no WhatsApp, y no hay que disfrazarlo. */
.chat-boton { background: var(--terracota); border: 0; cursor: pointer; }
.chat-boton:hover { background: var(--terracota-dark); }
/* La ventana se sienta ARRIBA del icono (56px + 18px del borde + aire),
   no encima: el icono nunca desaparece, como en WhatsApp. */
.chat {
  position: fixed; right: 18px; bottom: 86px; z-index: 41;
  width: min(360px, calc(100vw - 28px));
  background: var(--blanco); border: 1px solid var(--arena); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  max-height: min(560px, calc(100dvh - 110px)); overflow: hidden;
}
/* Sin esta linea el chat no se cierra nunca.
   El navegador esconde lo marcado como oculto con [hidden]{display:none},
   pero esa regla es suya y pierde contra cualquier regla nuestra: el
   display:flex de arriba la anula. El resultado era una ventana que
   obedecia la orden de cerrarse -el icono hasta cambiaba- y se quedaba
   igual de visible. Vale para cualquier elemento con display propio. */
.chat[hidden] { display: none; }
/* Marca de mensaje sin leer sobre el icono */
.chat-boton { position: fixed; }
.chat-boton__punto {
  position: absolute; top: 2px; right: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: #E2574C; border: 2px solid var(--nacar);
}
.chat-boton__punto[hidden] { display: none; }
/* Los dos iconos viven siempre en el boton y se turnan segun
   aria-expanded. Antes se reemplazaba el innerHTML en cada cambio, y eso
   arrancaba del documento el mismo <path> que el visitante acababa de
   tocar: para cuando el clic llegaba al document, boton.contains(destino)
   ya era falso y el cierre por "tocar fuera" se disparaba encima del
   chat recien abierto. */
.chat-boton__ico { display: grid; place-items: center; }
.chat-boton[aria-expanded="false"] .chat-boton__ico--min,
.chat-boton[aria-expanded="true"] .chat-boton__ico--abrir { display: none; }
.chat__cabeza { background: var(--cacao); color: #fff; padding: 14px 48px 12px 18px; position: relative; }
.chat__cabeza strong { display: block; font-size: 1rem; }
.chat__cabeza span { font-size: .78rem; color: var(--arena); }
/* Con fondo propio: sobre la banda oscura, una equis suelta no se lee
   como boton y la gente no sabe que ahi se cierra. */
.chat__cerrar {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .18s var(--salida);
}
.chat__cerrar:hover { background: rgba(255,255,255,.3); }
.chat__cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chat__inicio { padding: 14px 16px 0; }
.chat__inicio p { margin: 0 0 10px; font-size: .85rem; color: var(--text-soft); line-height: 1.5; }
.chat__inicio input {
  width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 10px 12px;
  border: 1px solid var(--arena); border-radius: var(--radius-sm); font: inherit; font-size: .9rem; background: var(--nacar);
}
.chat__hilo { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.chat__msg { max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.chat__msg--visitante { align-self: flex-end; background: var(--terracota); color: #fff; border-bottom-right-radius: 4px; }
.chat__msg--staff { align-self: flex-start; background: var(--nacar-2); color: var(--text); border-bottom-left-radius: 4px; }
/* Ficha de la pagina que recomienda Isabel: foto chica y nombre. Va dentro
   de la burbuja, no como mensaje aparte, para que se lea como parte de lo
   que acaba de decir. */
.chat__ficha { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px; background: var(--blanco); border: 1px solid var(--arena); border-radius: 10px; text-decoration: none; color: var(--text); }
.chat__ficha:hover { border-color: var(--terracota); }
.chat__ficha img { width: 58px; height: 58px; object-fit: cover; border-radius: 7px; flex: none; }
.chat__ficha__txt { display: flex; flex-direction: column; min-width: 0; }
.chat__ficha__txt b { font-size: .86rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__ficha__txt small { font-size: .72rem; color: var(--terracota); margin-top: 2px; }
.chat__pie { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--arena); align-items: flex-end; }
/* Adjuntar foto, video o audio desde el chat del sitio. Los botones son de
   38px: en el celular, un blanco menor se falla y se acaba mandando el
   mensaje a medias en vez de la foto. */
.chat__accion { flex: none; width: 38px; height: 38px; border: 1px solid var(--arena); background: var(--nacar); border-radius: var(--radius-sm); cursor: pointer; font-size: 1rem; line-height: 1; display: grid; place-items: center; color: var(--text); padding: 0; }
.chat__accion:hover { border-color: var(--terracota); color: var(--terracota); }
.chat__accion[aria-pressed="true"] { background: #C0392B; border-color: #C0392B; color: #fff; }
.chat__aviso { font-size: .78rem; color: var(--text-soft); padding: 0 12px 8px; min-height: 1em; }
.chat__msg img, .chat__msg video { display: block; max-width: 100%; border-radius: var(--radius-sm); margin-top: 6px; }
.chat__msg audio { display: block; width: 100%; margin-top: 6px; }
.chat__texto { flex: 1; min-width: 0; resize: none; padding: 9px 12px; border: 1px solid var(--arena); border-radius: var(--radius-sm); font: inherit; font-size: .9rem; background: var(--nacar); }
@media (max-width: 620px) { .chat { right: 14px; left: 14px; bottom: 78px; width: auto; max-height: min(560px, calc(100dvh - 100px)); } }
/* --- Saludo junto al icono del chat ---
   La versión Torote del globito naranja: mismo gesto, nuestra paleta.
   Fondo nácar, texto cacao, tipografía del cuerpo y una punta que apunta
   al icono para que se lea como una sola pieza y no como dos objetos
   sueltos en la esquina. Es un botón, no un adorno: al tocarlo abre el
   chat. La equis lo retira para siempre. */
.chat-saludo {
  position: fixed; z-index: 41;
  right: 86px; bottom: 25px;
  display: flex; align-items: stretch;
  max-width: min(20rem, calc(100vw - 104px));
  background: var(--nacar);
  color: var(--cacao);
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(28, 17, 13, .38), 0 1px 0 rgba(255, 255, 255, .7) inset;
  /* Entra desde el icono, no desde la nada: nace donde el visitante ya
     está mirando. */
  opacity: 0; transform: translateX(14px) scale(.94); transform-origin: 100% 70%;
  transition: opacity .3s var(--salida), transform .3s var(--salida);
  pointer-events: none;
}
.chat-saludo--visible { opacity: 1; transform: none; pointer-events: auto; }

/* La punta. Hereda el fondo del globo para que no se despinte si algún
   día cambia la paleta. */
.chat-saludo::after {
  content: ""; position: absolute; right: -5px; bottom: 13px;
  width: 14px; height: 14px; background: inherit;
  transform: rotate(45deg); border-radius: 0 0 3px 0;
}

.chat-saludo__texto {
  flex: 1; min-width: 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .95rem; line-height: 1.3; color: inherit;
  text-align: left; padding: 13px 6px 13px 20px;
  border-radius: 999px 0 0 999px;
}
.chat-saludo__texto:hover { color: var(--terracota); }

.chat-saludo__cerrar {
  border: 0; background: none; cursor: pointer;
  color: var(--text-soft); font-size: 1.15rem; line-height: 1;
  width: 34px; padding: 0 12px 0 0;
  display: grid; place-items: center;
  border-radius: 0 999px 999px 0;
}
.chat-saludo__cerrar:hover { color: var(--cacao); }
.chat-saludo :focus-visible { outline: 2px solid var(--terracota); outline-offset: -3px; }

@media (max-width: 620px) {
  .chat-saludo { right: 76px; bottom: 21px; max-width: calc(100vw - 92px); }
  .chat-saludo__texto { font-size: .9rem; padding: 11px 4px 11px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-saludo { transition: opacity .2s linear; transform: none; }
}

/* --- Latido del icono del chat ---
   Un icono quieto en la esquina se vuelve parte del decorado a los diez
   segundos. El latido lo devuelve a la vista.

   Tres decisiones para que llame y no moleste:
   1. Es una onda que sale del boton, no un baile. La onda se lee de
      reojo, con la vista en el texto, que es donde esta el visitante.
   2. Late TRES veces y para. Un movimiento infinito deja de ser aviso y
      se vuelve ruido: a los treinta segundos ya nadie lo ve y a los dos
      minutos estorba para leer.
   3. La sombra base va escrita en cada paso. Sin eso el boton pierde su
      relieve durante el latido y parece pegado a la pantalla.

   El brinco corre una sola vez, al principio: es el que hace girar la
   cabeza; la onda es la que sostiene la mirada. */
@keyframes chat-onda {
  0%   { box-shadow: 0 8px 24px -8px rgba(28,17,13,.45), 0 0 0 0 rgba(138,71,46,.5); }
  70%  { box-shadow: 0 8px 24px -8px rgba(28,17,13,.45), 0 0 0 18px rgba(138,71,46,0); }
  100% { box-shadow: 0 8px 24px -8px rgba(28,17,13,.45), 0 0 0 0 rgba(138,71,46,0); }
}
@keyframes chat-brinco {
  0%, 100% { transform: translateY(0); }
  28%      { transform: translateY(-6px); }
  52%      { transform: translateY(0); }
  70%      { transform: translateY(-3px); }
}
.chat-boton--latido { animation: chat-onda 1.5s var(--salida) 3, chat-brinco .95s var(--salida) 1; }
/* Con el cursor encima ya no hace falta llamar a nadie: esa persona ya
   lo encontro. */
.chat-boton--latido:hover { animation: none; }
@media (prefers-reduced-motion: reduce) { .chat-boton--latido { animation: none; } }
@media print { .chat, .chat-boton, .chat-saludo { display: none; } }