/* ===========================================
   GUESTHOUSE VILLARRICA - COMPONENTS
   =========================================== */

/* ─────────────────────────────────────────
   TYPOGRAPHY CLASSES
   ───────────────────────────────────────── */

.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.heading-display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
  min-height: 44px;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.btn-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-neutral-50);
}

.btn-primary:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(123, 78, 53, 0.3);
}

.btn-secondary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-neutral-50);
}

.btn-secondary:hover {
  background-color: var(--brand-oliva-dark);
  border-color: var(--brand-oliva-dark);
  transform: translateY(-2px);
}

/* El borde va en oliva, pero el texto no: oliva sobre marfil da 4.23 y
   no alcanza AA. El oliva oscuro se mantiene en familia y da 6.27. */
.btn-outline {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--brand-oliva-dark);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-neutral-50);
}

.btn-outline-light {
  background-color: transparent;
  border-color: var(--color-neutral-50);
  color: var(--color-neutral-50);
}

.btn-outline-light:hover {
  background-color: var(--color-neutral-50);
  color: var(--color-primary);
}

.btn-sm {
  padding: 0.625rem 1.25rem;
  font-size: var(--text-xs);
  min-height: 36px;
}

.btn-lg {
  padding: 1.125rem 2.25rem;
  font-size: var(--text-base);
}

.btn-full {
  width: 100%;
}

/* ─────────────────────────────────────────
   HEADER
   ───────────────────────────────────────── */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  padding: var(--space-4) var(--container-padding);
  background: transparent;
  transition:
    background var(--duration-slow) var(--ease-out),
    padding var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out);
}

.header--scrolled {
  background: rgba(242, 236, 226, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--space-3) var(--container-padding);
  box-shadow: var(--shadow-sm);
}

.header--scrolled .nav__link {
  color: var(--text-primary);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Logo: white lockup over the hero, full-colour once the header goes solid.
   Both variants are stacked and cross-faded so there is no reload flash. */
/* Manual pag. 10: area de seguridad equivalente a X alrededor del
   logotipo. Va en el ancla y no en las img porque la segunda variante
   esta en position:absolute y se posiciona contra la caja de padding
   del ancestro: asi las dos se desplazan igual y el cross-fade no se
   descuadra. */
.header__logo {
  position: relative;
  display: block;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
  padding: 0.35em;
}

/* Manual pag. 10: minimo digital de 80px de ancho para el logo
   completo. Con height 40px y la proporcion 3.365:1 del SVG el ancho
   real es ~135px, y ~94px en el breakpoint mas chico, asi que esta
   regla no llega a activarse: es una red contra regresiones. */
.header__logo img {
  display: block;
  width: auto;
  height: 40px;
  min-width: 80px;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    height var(--duration-slow) var(--ease-out);
}

.header__logo img + img {
  position: absolute;
  top: 0;
  left: 0;
}

.header__logo--dark {
  opacity: 0;
}

.header--scrolled .header__logo img {
  height: 34px;
}

.header--scrolled .header__logo--light {
  opacity: 0;
}

.header--scrolled .header__logo--dark {
  opacity: 1;
}

@media (max-width: 480px) {
  .header__logo img {
    height: 32px;
  }

  .header--scrolled .header__logo img {
    height: 28px;
  }
}

/* Navigation */
.nav {
  display: none;
  align-items: center;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
  }
}

.nav__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-inverse);
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--duration-base) var(--ease-out);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-slow) var(--ease-out);
}

.nav__link:hover,
.nav__link--active {
  color: var(--color-accent);
}

.nav__link:hover::after,
.nav__link--active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Header Actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.lang-switch {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-inverse);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  transition: color var(--duration-base) var(--ease-out);
}

.header--scrolled .lang-switch {
  color: var(--text-primary);
}

.lang-switch:hover {
  color: var(--color-accent);
}

.header__cta {
  display: none;
}

@media (min-width: 768px) {
  .header__cta {
    display: inline-flex;
  }
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-inverse);
  transition:
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}

.header--scrolled .menu-toggle span {
  background: var(--text-primary);
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Navigation */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 320px;
  height: 100vh;
  background: var(--surface-elevated);
  padding: var(--space-20) var(--space-8) var(--space-8);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  z-index: calc(var(--z-fixed) - 1);
  overflow-y: auto;
}

.mobile-nav.active {
  transform: translateX(0);
}

.mobile-nav__link {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
  text-decoration: none;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-neutral-200);
  transition: color var(--duration-base) var(--ease-out);
}

.mobile-nav__link:hover {
  color: var(--color-accent);
}

.mobile-nav__cta {
  margin-top: var(--space-8);
}

/* Overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    visibility var(--duration-slow) var(--ease-out);
  z-index: calc(var(--z-fixed) - 2);
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ─────────────────────────────────────────
   HERO
   ───────────────────────────────────────── */

/* El alto y el padding son mas contenidos que el resto de las secciones
   a proposito: con 100vh y el aire de --space-section, el widget de
   reserva caia debajo del pliegue y obligaba a bajar para reservar, que
   es lo primero que tiene que estar a mano. */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: var(--space-16) var(--container-padding);
  padding-top: calc(var(--space-16) + 80px);
  /* Solo visible si la foto del hero no carga. Va en verde profundo
     para que ese estado coincida con el degradado que normalmente
     cubre la imagen, y no en oliva, donde el texto daria 4.42. */
  background: var(--surface-dark);
  color: var(--text-inverse);
  overflow: hidden;
}

.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__background img,
.hero__background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El velo tiene que sostener texto marfil sobre lo mas claro de la foto
   —pasto a pleno sol—, no solo sobre el bosque. Con alpha 0.4 el
   subtitulo caia por debajo de 4.5:1; desde 0.6 se sostiene. Por eso la
   columna de texto se mantiene sobre 0.72 y recien clarea a la derecha,
   donde no hay texto y conviene ver la casa. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(29, 42, 34, 0.72) 0%,
    rgba(29, 42, 34, 0.66) 50%,
    rgba(29, 42, 34, 0.78) 100%
  );
}

@media (min-width: 768px) {
  .hero__overlay {
    background:
      linear-gradient(
        90deg,
        rgba(29, 42, 34, 0.88) 0%,
        rgba(29, 42, 34, 0.76) 45%,
        rgba(29, 42, 34, 0.42) 75%,
        rgba(29, 42, 34, 0.18) 100%
      ),
      linear-gradient(
        180deg,
        rgba(29, 42, 34, 0.45) 0%,
        rgba(29, 42, 34, 0) 30%
      );
  }
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 100%;
}

@media (min-width: 768px) {
  .hero__content {
    max-width: 650px;
  }
}

.hero__overline {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-6) 0;
  color: inherit;
}

@media (min-width: 768px) {
  .hero__title {
    font-size: var(--text-5xl);
  }
}

.hero__subtitle {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-8) 0;
  opacity: 0.9;
}

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

@media (min-width: 480px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Booking Widget */
.booking-widget {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .booking-widget {
    flex-direction: row;
    align-items: flex-end;
    /* Envuelve antes que desbordar: si los cuatro no caben en una fila,
       el boton baja a la siguiente en vez de salirse de la caja. */
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
  }

  /* El CTA toma su propia fila, a lo ancho. La columna del hero mide
     650px: metiendo tres campos y el boton en una sola fila, cada campo
     baja de 140px y el input de fecha nativo se recorta. Una barra
     ancha abajo se lee como decision y no como accidente. */
  .booking-widget .btn {
    flex: 1 0 100%;
  }
}

.booking-widget__field {
  flex: 1 1 140px;
  /* Sin esto los campos heredan min-width:auto y se niegan a bajar del
     ancho intrinseco del input de fecha, empujando el boton fuera de la
     caja gris. Es el desborde clasico de flexbox. */
  min-width: 0;
}

.booking-widget__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  opacity: 0.8;
}

/* Altura unica para input, select y boton. Sin esto cada control se
   dimensiona solo —input 54px, select 48px, boton 57px— y como la fila
   alinea por abajo, las etiquetas quedan a distinta altura arriba. */
.booking-widget__input,
.booking-widget select,
.booking-widget .btn {
  height: 52px;
  min-height: 52px;
}

.booking-widget__input {
  width: 100%;
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: var(--radius-sm);
  /* Un punto menos que el texto base: los campos de fecha nativos tienen
     un ancho minimo que no baja, y a 18px los cuatro controles no caben
     en una fila dentro de la columna del hero. */
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.booking-widget__input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
}

/* ─────────────────────────────────────────
   CARDS
   ───────────────────────────────────────── */

/* Room Card */
.card-room {
  display: flex;
  flex-direction: column;
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out);
}

.card-room:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.card-room__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.card-room__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.card-room:hover .card-room__image img {
  transform: scale(1.05);
}

.card-room__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent);
  color: var(--color-neutral-50);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.card-room__content {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.card-room__category {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  /* El arena solo funciona sobre fondo oscuro: sobre blanco da 1.98.
     Aca la tarjeta es clara, asi que va terracota (6.70). */
  color: var(--brand-terracota);
}

.card-room__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin: 0;
}

.card-room__description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.card-room__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-neutral-200);
  margin-top: auto;
}

.card-room__price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.card-room__price span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--text-muted);
}

/* Placeholder de marca para las fichas que todavia no tienen fotografia.
   Conserva la proporcion 4:3 del bloque de imagen para que la grilla
   mantenga su ritmo, sin fingir que hay una foto ni reutilizar la de otra
   pieza. Es decorativo, asi que va como fondo y no como <img>: no compite
   con las reglas de object-fit de arriba y no necesita alt.

   Desde septiembre de 2026 no lo usa ninguna pagina: las siete piezas
   tienen foto propia. Se conserva porque es la respuesta correcta cuando
   entre una pieza nueva sin fotografiar — se pone la clase en el div y la
   grilla no se descuadra. */
.card-room__image--marca {
  display: grid;
  place-items: center;
  background-color: var(--brand-salvia);
}

.card-room__image--marca::after {
  content: '';
  width: 38%;
  /* La proporcion real del viewBox del isotipo (422.08 x 442.5): con
     aspect-ratio 1 el contain lo centra pero deja aire desparejo. */
  aspect-ratio: 422.08 / 442.5;
  background: url('../images/logo/isotipo-verde.svg') center / contain no-repeat;
  opacity: 0.32;
}

/* Experience Card */
.card-experience {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}

@media (min-width: 768px) {
  .card-experience {
    aspect-ratio: 4 / 5;
  }
}

.card-experience__image {
  position: absolute;
  inset: 0;
}

.card-experience__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.card-experience:hover .card-experience__image img {
  transform: scale(1.08);
}

.card-experience__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(29, 42, 34, 0) 35%,
    rgba(29, 42, 34, 0.55) 65%,
    rgba(29, 42, 34, 0.88) 100%
  );
  transition: background var(--duration-slow) var(--ease-out);
}

.card-experience:hover .card-experience__overlay {
  background: linear-gradient(
    180deg,
    rgba(29, 42, 34, 0) 30%,
    rgba(29, 42, 34, 0.85) 100%
  );
}

.card-experience__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
  color: var(--text-inverse);
  transform: translateY(10px);
  transition: transform var(--duration-slow) var(--ease-out);
}

.card-experience:hover .card-experience__content {
  transform: translateY(0);
}

.card-experience__category {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

/* El titulo va sobre la foto, encima del degradado: sin color propio
   heredaba el verde profundo del texto base y quedaba ilegible. */
.card-experience__content,
.card-experience__title {
  color: var(--text-inverse);
  text-shadow: 0 1px 3px rgba(29, 42, 34, 0.55);
}

.card-experience__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

/* ─────────────────────────────────────────
   TESTIMONIALS
   ───────────────────────────────────────── */

.testimonial {
  padding: var(--space-8);
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-accent);
}

.testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.testimonial__name {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.testimonial__source {
  font-size: var(--text-sm);
  /* Atenuado, pero no tanto: con --text-muted caia en 3.64 sobre la
     tarjeta del testimonio. */
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────── */

.footer {
  background: var(--surface-dark);
  color: var(--text-inverse);
  padding: var(--space-16) 0 var(--space-8);
}

.footer__grid {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.footer__brand {
  max-width: 300px;
}

.footer__logo {
  display: inline-block;
  line-height: 0;
  margin-bottom: var(--space-5);
}

.footer__logo img {
  display: block;
  width: auto;
  height: 62px;
  max-width: 100%;
}

.footer__description {
  font-size: var(--text-sm);
  opacity: 0.8;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.footer__social {
  display: flex;
  gap: var(--space-4);
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: var(--text-inverse);
  transition:
    background var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.footer__social a:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
}

.footer__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-6);
  color: var(--text-inverse);
}

.footer__links {
  list-style: none;
  padding: 0;
}

.footer__links li {
  margin-bottom: var(--space-3);
}

.footer__links a {
  font-size: var(--text-sm);
  color: var(--text-inverse);
  opacity: 0.8;
  transition: opacity var(--duration-base) var(--ease-out);
}

.footer__links a:hover {
  opacity: 1;
  color: var(--color-accent);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  opacity: 0.8;
  margin-bottom: var(--space-4);
}

.footer__bottom {
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--text-sm);
  /* Sin opacity: al 0.6 el pie legal caia en 3.37 sobre el verde
     profundo. La discrecion se consigue con color, no atenuando el
     elemento entero, que arrastra tambien a los enlaces. */
  color: var(--brand-salvia);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer__legal {
  display: flex;
  gap: var(--space-6);
}

/* Sin opacidad: al 0.8 estos enlaces caian en 4.08 sobre el verde
   profundo. La salvia solida da 6.69 y se ve igual de discreta. */
.footer__legal a {
  color: var(--brand-salvia);
}

.footer__legal a:hover {
  opacity: 1;
}

/* ─────────────────────────────────────────
   WHATSAPP BUTTON
   ───────────────────────────────────────── */

.whatsapp-btn {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: var(--radius-full);
  color: white;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  color: white;
}

.whatsapp-btn svg {
  width: 28px;
  height: 28px;
}

/* ─────────────────────────────────────────
   NEWSLETTER
   ───────────────────────────────────────── */

.newsletter {
  padding: var(--space-12);
  background: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  text-align: center;
}

.newsletter__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}

.newsletter__text {
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 480px;
  margin: 0 auto;
}

@media (min-width: 480px) {
  .newsletter__form {
    flex-direction: row;
  }
}

.newsletter__input {
  flex: 1;
  padding: var(--space-4);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
}

.newsletter__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ─────────────────────────────────────────
   FORMS
   ───────────────────────────────────────── */

.form-group {
  margin-bottom: var(--space-6);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--surface-elevated);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  min-height: 44px;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(123, 78, 53, 0.15);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* ─────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────── */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s var(--ease-out) forwards;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* ===========================================
   FILIGRANA DEL ISOTIPO
   Direccion "Claros del bosque", intensidad sobria.
   Reglas duras:
     - una sola por pagina
     - nunca sobre texto
     - solo variantes oficiales de images/logo/
     - jamas redibujada ni recoloreada
   =========================================== */

.section--con-filigrana {
  position: relative;
  overflow: hidden;
}

.section--con-filigrana > .container {
  position: relative;
  z-index: 1;
}

.filigrana {
  --fw: var(--filigrana-size);
  position: absolute;
  width: var(--fw);
  height: auto;
  opacity: var(--filigrana-opacity);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Variantes de tamano. El ancho vive en --fw para que los
   desplazamientos de esquina se calculen sobre el tamano real de cada
   filigrana y no sobre el token base. */
.filigrana--sm { --fw: calc(var(--filigrana-size) * 0.62); }
.filigrana--lg { --fw: calc(var(--filigrana-size) * 1.4); }

/* Esquinas. El desplazamiento hacia afuera es grande a proposito: deja
   entrar poco mas de un tercio de la forma, que es lo que hace falta
   para que no quede por debajo del texto. Lo que entra es una medida
   FIJA (--filigrana-entra), no una fraccion del tamano: asi la variante
   grande se ve mas escalada pero no invade mas. Verificado con
   tools/filigrana-sobre-texto.js, que mide los glifos y no las cajas. */
.filigrana--sup-der { top: calc(var(--fw) * -1 + var(--filigrana-entra)); right: calc(var(--fw) * -1 + var(--filigrana-entra)); }
.filigrana--sup-izq { top: calc(var(--fw) * -1 + var(--filigrana-entra)); left: calc(var(--fw) * -1 + var(--filigrana-entra)); }
.filigrana--inf-der { bottom: calc(var(--fw) * -1 + var(--filigrana-entra)); right: calc(var(--fw) * -1 + var(--filigrana-entra)); }
.filigrana--inf-izq { bottom: calc(var(--fw) * -1 + var(--filigrana-entra)); left: calc(var(--fw) * -1 + var(--filigrana-entra)); }

/* Sobre fondo oscuro va la variante blanca y mas tenue: al 13% el
   blanco sobre verde profundo se lee como una mancha. */
.filigrana--clara { opacity: 0.07; }

/* ─── Reservas ─────────────────────────────────────── */

.reservas__fechas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  margin-bottom: var(--space-8);
}

.reservas__aviso,
.reservas__error {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--brand-arena);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
}

.reservas__calendario {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

/* El calendario necesita superficie propia: sobre el crema de la seccion,
   sin fondo ni borde, las cifras flotaban y no se leia como un control. */
.reservas__calendario {
  background: var(--surface-elevated);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6) var(--space-6);
  margin-bottom: var(--space-8);
  /* Sin ancho propio la tarjeta se estiraba a todo el contenedor y los dos
     meses quedaban perdidos en un mar blanco. */
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
}

/* El resumen tiene que leerse como un control, no como un título suelto. */
.reservas__plegable { margin-bottom: var(--space-8); }

.reservas__plegable > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--brand-terracota);
  padding: var(--space-2) 0;
}

.reservas__plegable > summary::marker { content: ''; }

/* Safari no implementa ::marker sobre <summary> y dibuja el suyo aparte: sin
   esta regla convive el triángulo nativo con la flecha del ::before. Importa
   más que de costumbre porque buena parte del tráfico llega desde iPhone. */
.reservas__plegable > summary::-webkit-details-marker { display: none; }

.reservas__plegable > summary::before {
  content: '›';
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-out);
}

.reservas__plegable[open] > summary::before { transform: rotate(90deg); }

/* El calendario ya traía su propio margen inferior; dentro del plegable
   duplicaba el hueco. */
.reservas__plegable .reservas__calendario { margin-bottom: var(--space-4); }

/* Una flecha en cada extremo, flanqueando los dos meses: juntas en una esquina
   se leian como un control suelto y no como la navegacion del calendario. */
.calendario__nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.calendario__flecha {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.calendario__flecha:hover:not(:disabled) {
  background: var(--brand-salvia);
  border-color: var(--brand-oliva);
}

.calendario__flecha:disabled {
  opacity: 0.3;
  cursor: default;
}

.calendario__meses {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.calendario { border-collapse: collapse; }
.calendario caption {
  text-transform: capitalize;
  font-weight: 600;
  padding-bottom: var(--space-2);
}
.calendario__dia {
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  border-radius: var(--radius-sm);
}
.calendario__dia--libre { cursor: pointer; }
.calendario__dia--libre:hover,
.calendario__dia--libre:focus { background: var(--brand-salvia); }
.calendario__dia--ocupado {
  opacity: 0.35;
  text-decoration: line-through;
}
.calendario__dia--pasado { opacity: 0.25; }

/* Una fila por habitación, no una tarjeta a ancho completo. Sin columnas
   declaradas, cada tarjeta se estiraba a los 1184px del contenedor y el
   aspect-ratio 4:3 del bloque de imagen la volvía de 888px de alto: una
   habitación ocupaba más que la pantalla y comparar precios era imposible. */
.reservas__resultados {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .reservas__resultados .card-room {
    display: grid;
    grid-template-columns: 17.5rem 1fr;
    align-items: stretch;
  }

  /* La foto manda el alto de la fila sólo si la ficha es corta; si el texto es
     más largo, la foto lo acompaña recortando por el centro. */
  .reservas__resultados .card-room__image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 13rem;
  }

  .reservas__resultados .card-room__description {
    /* En la fila, la descripción compite con las características por un ancho
       que ya no es el de una tarjeta. Dos líneas bastan para decidir; el
       detalle completo está en la ficha de alojamiento. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

}

/* Las características como fichas en línea, no apiladas. Con ocho puntos la
   lista vertical se comía la mitad del alto en escritorio y dejaba la fila en
   932px en móvil, más que la pantalla entera. Va fuera de la consulta de
   ancho porque el problema es peor en el teléfono, no menor. */
.reservas__resultados .card-room__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.reservas__resultados .card-room__features li {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--brand-arena);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

/* Sólo las cuatro primeras, que es lo mismo que muestra la ficha de
   alojamiento. Recortar por altura partía la segunda línea de fichas y se veía
   roto, no resumido: mejor mostrar menos entero que más cortado. */
.reservas__resultados .card-room__features li:nth-child(n+5) {
  display: none;
}

/* En escritorio caben en una línea; en el teléfono no, y partir un nombre
   largo en dos renglones dentro de la ficha es preferible a desbordar. */
@media (min-width: 768px) {
  .reservas__resultados .card-room__features li { white-space: nowrap; }
}

.reservas__form { display: grid; gap: var(--space-3); max-width: 40rem; }
.reservas__nota { font-size: var(--text-sm); }

/* El honeypot no puede usar display:none: algunos robots lo detectan. */
.reservas__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Galería ──────────────────────────────────────────── */

/* Las flechas y los puntos van dentro del bloque de imagen, que ya es
   position: relative por el badge. */
.galeria__flecha,
.galeria__ampliar {
  position: absolute;
  border: 0;
  cursor: pointer;
}

.galeria__flecha {
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Blanco translúcido y no color de marca: la flecha va sobre fotografías de
     tono impredecible y tiene que leerse en todas. */
  background: rgba(255, 255, 255, 0.82);
  color: var(--color-neutral-900);
  font-size: var(--text-lg);
  line-height: 1;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.galeria__flecha--anterior { left: var(--space-2); }
.galeria__flecha--siguiente { right: var(--space-2); }

/* En un dispositivo táctil no hay hover: ahí se quedan visibles. */
.galeria:hover .galeria__flecha,
.galeria__flecha:focus-visible { opacity: 1; }

@media (hover: none) {
  .galeria__flecha { opacity: 1; }
}

/* Cubre la foto entera: el clic en cualquier parte amplía. Va debajo de las
   flechas en z-index para no robarles el clic. */
.galeria__ampliar {
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: transparent;
}

.galeria__puntos {
  position: absolute;
  z-index: 2;
  bottom: var(--space-3);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  pointer-events: none;
}

.galeria__punto {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}

.galeria__punto--activo { background: var(--color-neutral-50); }

/* ── Visor ────────────────────────────────────────────── */

.visor {
  /* Sin esto el navegador reclama el gesto horizontal como desplazamiento y
     mata el flujo de punteros con pointercancel: el deslizamiento para pasar
     fotos no llegaba nunca a dispararse en un teléfono. */
  touch-action: pan-y;
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background: transparent;
  display: grid;
  place-items: center;
}

.visor::backdrop { background: rgba(13, 24, 18, 0.92); }

.visor__figura {
  margin: 0;
  max-width: min(90vw, 60rem);
  max-height: 85vh;
  display: grid;
  place-items: center;
}

.visor__imagen {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.visor__flecha,
.visor__cerrar {
  position: fixed;
  z-index: 2;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-neutral-50);
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.visor__flecha {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: var(--text-2xl);
}

.visor__flecha--anterior { left: var(--space-4); }
.visor__flecha--siguiente { right: var(--space-4); }

.visor__cerrar {
  top: var(--space-4);
  right: var(--space-4);
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--text-xl);
}

.visor__flecha:hover,
.visor__cerrar:hover { background: rgba(255, 255, 255, 0.28); }

.visor__contador {
  /* Una franja de lado a lado: sin esto se traga el clic en el fondo y ahí el
     visor no cerraba. Mismo motivo que en .galeria__puntos. */
  pointer-events: none;
  position: fixed;
  bottom: var(--space-5);
  left: 0;
  right: 0;
  text-align: center;
  color: var(--color-neutral-50);
  font-size: var(--text-sm);
  margin: 0;
}

/* ── Resumen de la reserva ─────────────────────────────
   Qué pieza, qué días y cuánto: es lo que el visitante confirma al enviar, y
   venía como una línea gris bajo el título, indistinguible de un subtítulo. */
.resumen {
  background: var(--surface-elevated);
  border: 1px solid var(--color-neutral-200);
  border-left: 3px solid var(--brand-terracota);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-2);
}

.resumen__categoria {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-terracota);
  margin: 0;
}

.resumen__pieza {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin: var(--space-1) 0 var(--space-4);
}

/* Dos columnas en escritorio y una en el teléfono, por ancho disponible y sin
   consulta de ancho. Cuatro no caben: el formulario está limitado a 40rem, así
   que la columna quedaría en 135px y "dom, 20 dic 2026" necesita 154. Antes de
   apretar la tipografía para que entren cuatro, es mejor que la fecha se lea. */
.resumen__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-neutral-200);
}

.resumen__datos dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.resumen__datos dd {
  margin: 0;
  font-size: var(--text-base);
  color: var(--text-primary);
}

.resumen__total {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
}

/* En el teléfono, cuatro filas apiladas dejaban la tarjeta en 389px: casi media
   pantalla antes del primer campo. Dos columnas con el valor un punto más chico
   la parten por la mitad, y la fecha sigue cabiendo en una línea. */
@media (max-width: 767px) {
  .resumen {
    padding: var(--space-4) var(--space-5);
  }

  .resumen__datos {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .resumen__datos dd {
    font-size: var(--text-sm);
  }
}

/* Las actividades que se pueden hacer, sin día ni hora: la propietaria pidió
   dejar de prometer una agenda que todavía no existe. Se leen de un vistazo,
   así que van en línea y no apiladas. */
.lista-posibilidades {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
}

.lista-posibilidades li {
  background: var(--surface-elevated);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* La casa completa es otro producto que los planes por habitación —17 plazas,
   la casa entera— así que va en su propio bloque y no en la rejilla, donde se
   leería como un plan más. */
.casa-completa {
  background: var(--surface-elevated);
  border: 1px solid var(--color-neutral-200);
  border-left: 3px solid var(--brand-terracota);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* El rótulo dice "por noche" antes de que se vea la cifra. Las tarjetas de
   arriba cobran por semana y por mes, así que sin esto alguien compara los
   $450.000 del mes contra los $350.000 de la noche y concluye que la casa
   entera sale más barata que una habitación. */
.casa-completa__rotulo {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-terracota);
  margin: 0;
}

.casa-completa h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: 0;
}

.casa-completa p, .casa-completa ul { margin: 0; color: var(--text-secondary); }
.casa-completa ul { padding-left: var(--space-5); }
.casa-completa__tarifas { color: var(--text-primary); }
.casa-completa .btn { align-self: flex-start; }