/* ===========================================
   GUESTHOUSE VILLARRICA - LAYOUT
   Mobile-first responsive grid system
   =========================================== */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.container--narrow {
  max-width: 900px;
}

.container--wide {
  max-width: 1440px;
}

/* Sections */
.section {
  padding: var(--space-section) 0;
  background: var(--surface-primary);
}

/* Para paginas-herramienta: --space-section llega a 10rem en pantallas anchas,
   que es aire de pagina de venta. Ver .page-header--compacto. */
.section--compacta {
  padding: var(--space-10) 0 var(--space-16);
}

/* Bloque oscuro — verde profundo del manual */
.section--dark {
  background: var(--brand-profundo);
  color: var(--on-profundo);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--on-profundo);
}

.section--dark p,
.section--dark .lead {
  color: var(--brand-salvia);
}

.section--dark .feature-item__content h4 {
  color: var(--on-profundo);
}

.section--dark .feature-item__content p {
  color: var(--brand-salvia);
}

.section--dark strong {
  color: var(--on-profundo);
}

.section--dark .feature-item__icon {
  background: rgba(255, 255, 255, 0.1);
}

.section--dark .overline {
  color: var(--brand-arena);
}

.section--dark .pricing-card {
  background: var(--surface-elevated);
}

.section--dark .pricing-card h3,
.section--dark .pricing-card__title {
  color: var(--text-primary);
}

.section--dark .pricing-card p,
.section--dark .pricing-card__period {
  color: var(--text-muted);
}

.section--dark .pricing-card__features li {
  color: var(--text-secondary);
}

/* Bloque oliva — el color que el manual pide que predomine.
   Una o dos por pagina, tipicamente reserva y CTA.
   El texto va en blanco puro: el marfil sobre oliva da 4.42
   y no alcanza AA. */
.section--oliva {
  background: var(--brand-oliva);
  color: var(--on-oliva);
}

.section--oliva h1,
.section--oliva h2,
.section--oliva h3,
.section--oliva h4,
.section--oliva h5,
.section--oliva h6,
.section--oliva strong {
  color: var(--on-oliva);
}

.section--oliva p,
.section--oliva .lead,
.section--oliva li {
  color: var(--on-oliva);
}

/* Paridad con .section--dark. Sin estas dos, .feature-item__content p
   conserva su gris de components.css —que carga despues de este
   archivo y gana por orden— y queda en 1.46:1 sobre el oliva. */
.section--oliva .feature-item__content h4 {
  color: var(--on-oliva);
}

.section--oliva .feature-item__content p {
  color: var(--on-oliva);
}

/* Aca NO va arena. Sobre el verde profundo da 7.43, pero sobre el oliva
   se queda en 2.59: son dos fondos oscuros muy distintos. Blanco da
   5.20 y es lo unico que pasa. */
.section--oliva .overline {
  color: var(--on-oliva);
}

.section--oliva .feature-item__icon {
  background: rgba(255, 255, 255, 0.12);
}

.section--oliva .pricing-card {
  background: var(--surface-elevated);
}

.section--oliva .pricing-card h3,
.section--oliva .pricing-card__title {
  color: var(--text-primary);
}

.section--oliva .pricing-card p,
.section--oliva .pricing-card__period {
  color: var(--text-muted);
}

.section--oliva .pricing-card__features li {
  color: var(--text-secondary);
}

/* Respiro sutil sobre el marfil */
.section--cream {
  background: var(--surface-elevated);
}

.section--white {
  background: var(--surface-elevated);
}

.section__header {
  margin-bottom: var(--space-16);
}

.section__header--center {
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Ancho de lectura — manual sec. 6, "composicion respirable" */
.section__header p,
.section .lead,
.prose {
  max-width: var(--measure);
}

.section__header--center p {
  margin-left: auto;
  margin-right: auto;
}

/* Grid System - Mobile First */
.grid {
  display: grid;
  gap: var(--space-6);
}

/* Mobile: single column */
.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 640px) {
  .grid {
    gap: var(--space-8);
  }

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

/* Desktop: full columns */
@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Asymmetric grids */
.grid--asymmetric {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--asymmetric {
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
  }

  .grid--asymmetric-reverse {
    grid-template-columns: 1fr 1.5fr;
  }
}

/* Flex utilities */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-col {
  flex-direction: column;
}

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Spacing utilities */
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Hide/Show responsive */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }

  .hide-desktop {
    display: none;
  }
}

/* ─────────────────────────────────────────
   BARRIDO DE TEXTO SOBRE FONDO OSCURO

   Los componentes fijan sus colores pensando en fondo claro. Dentro de
   una seccion oscura esos colores quedan ilegibles, y las reglas del
   componente ganan por orden de carga. Estas dos listas cubren los
   descendientes que aparecieron en el barrido de contraste renderizado.

   Ojo: los dos fondos oscuros NO admiten el mismo color. Sobre el verde
   profundo la salvia da 6.69; sobre el oliva se queda en 2.33. Por eso
   el bloque oliva va todo en blanco.
   ───────────────────────────────────────── */

/* Cualquier descendiente que herede un color pensado para fondo claro.
   El selector es amplio a proposito: es mas seguro pasarse que dejar un
   gris de 2.64 sobre el verde profundo. */
.section--dark a,
.section--dark div,
.section--dark li,
.section--dark span,
.section--dark small,
.section--dark .card-room__price,
.section--dark .card-room__description,
.section--dark .service-item__text,
.section--dark .text-center {
  color: var(--brand-salvia);
}

.section--dark .card-room__title,
.section--dark .card-room__price strong {
  color: var(--on-profundo);
}

.section--oliva a,
.section--oliva div,
.section--oliva li,
.section--oliva span,
.section--oliva small,
.section--oliva .card-room__price,
.section--oliva .card-room__title,
.section--oliva .card-room__description,
.section--oliva .service-item__text,
.section--oliva .text-center {
  color: var(--on-oliva);
}

/* Tarjetas de fondo claro DENTRO de una seccion oscura.

   El barrido de arriba usa selectores de descendiente muy amplios, y
   eso arrastra tambien el texto de las tarjetas que traen su propio
   fondo claro: quedaba blanco sobre marfil, invisible. Aca se les
   devuelve el color normal.

   Si agregas otra tarjeta clara sobre fondo oscuro, sumala a esta
   lista o su texto desaparecera. */
.section--dark [style*="surface-elevated"],
.section--dark [style*="surface-elevated"] *,
.section--oliva [style*="surface-elevated"],
.section--oliva [style*="surface-elevated"] *,
.section--dark .pricing-card,
.section--dark .pricing-card *,
.section--oliva .pricing-card,
.section--oliva .pricing-card *,
.section--dark .newsletter,
.section--dark .newsletter *,
.section--dark .testimonial,
.section--dark .testimonial *,
.section--oliva .newsletter,
.section--oliva .newsletter *,
.section--oliva .testimonial,
.section--oliva .testimonial * {
  color: var(--text-primary);
}

.section--dark .newsletter .lead,
.section--dark .newsletter p,
.section--dark .testimonial p,
.section--dark .testimonial__source,
.section--oliva .testimonial__source,
.section--oliva .newsletter .lead,
.section--oliva .newsletter p,
.section--oliva .testimonial p {
  color: var(--text-secondary);
}

/* Los botones dentro de esas tarjetas conservan su color propio: son
   piezas con su propio fondo y no heredan el de la tarjeta. */
.section--dark .btn-primary,
.section--oliva .btn-primary {
  color: var(--on-terracota);
}

.section--dark .newsletter .btn-outline,
.section--oliva .newsletter .btn-outline,
.section--dark [style*="surface-elevated"] .btn-outline,
.section--oliva [style*="surface-elevated"] .btn-outline {
  color: var(--brand-oliva-dark);
}