/* ============================================================
   CASA MARGARITA — V220.96
   Armonización global de la landing.
   Capa final de sistema visual: tipografía, ritmo, encabezados y gaps.
   No modifica lógica, interacciones ni estructuras funcionales.
   ============================================================ */

:root {
  --cm-content-max-v22096: 1320px;
  --cm-section-y-v22096: clamp(78px, 8vw, 112px);
  --cm-section-title-gap-v22096: clamp(34px, 4vw, 48px);
  --cm-card-gap-v22096: clamp(16px, 1.6vw, 20px);
  --cm-kicker-gap-v22096: 12px;
  --cm-title-size-v22096: clamp(44px, 5.15vw, 68px);
  --cm-title-leading-v22096: .96;
  --cm-title-tracking-v22096: -.04em;
  --cm-body-size-v22096: clamp(15px, 1.08vw, 17px);
  --cm-body-leading-v22096: 1.7;
}

/* ------------------------------------------------------------
   1. Ritmo de sección
   Las secciones editoriales comparten una misma entrada/salida.
   Hero, Experiencias y Recorrido conservan su comportamiento inmersivo.
   ------------------------------------------------------------ */
#destacados.section,
.stats-section.section,
#amenidades.section,
#eventos.section,
#info-util.section,
#fechas.section,
#ubicacion.section {
  padding-top: var(--cm-section-y-v22096) !important;
  padding-bottom: var(--cm-section-y-v22096) !important;
}

#destacados > .section-title-row,
#amenidades > .section-title-row,
#eventos > .section-title-row,
#info-util > .section-title-row,
#fechas > .section-title-row,
#ubicacion > .section-title-row {
  width: min(100%, var(--cm-content-max-v22096));
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: var(--cm-section-title-gap-v22096) !important;
}

/* Historia usa una composición propia; igualamos su ritmo editorial sin
   eliminar el sticky aprobado en pantallas amplias. */
#historia.cm-story-v22053 .cm-story-header-v22053 {
  margin-bottom: var(--cm-section-title-gap-v22096) !important;
}

/* ------------------------------------------------------------
   2. Jerarquía tipográfica uniforme
   ------------------------------------------------------------ */
body.responsive-v173 #destacados .section-title-row h2,
body.responsive-v173 #amenidades .section-title-row h2,
body.responsive-v173 #eventos .section-title-row h2,
body.responsive-v173 #info-util .section-title-row h2,
body.responsive-v173 #fechas .section-title-row h2,
body.responsive-v173 #ubicacion .section-title-row h2,
body.responsive-v173 #historia.cm-story-v22053 .cm-story-header-v22053 h2,
body.responsive-v173 #experiencias .experience-heading h2,
body.responsive-v173 .contact-content h2 {
  font-size: var(--cm-title-size-v22096) !important;
  line-height: var(--cm-title-leading-v22096) !important;
  letter-spacing: var(--cm-title-tracking-v22096) !important;
  font-weight: 600 !important;
  text-wrap: balance;
}

/* Ningún módulo obtiene un tamaño "especial" por herencia histórica. */
body.responsive-v173.destacados-v148 #destacados .section-title-row h2 {
  font-size: var(--cm-title-size-v22096) !important;
}

/* Kicker / overline: misma altura, tracking y distancia al título. */
#destacados > .section-title-row .overline,
#amenidades > .section-title-row .overline,
#eventos > .section-title-row .overline,
#info-util > .section-title-row .overline,
#fechas > .section-title-row .overline,
#ubicacion > .section-title-row .overline,
#historia.cm-story-v22053 .cm-story-header-v22053 .overline,
#experiencias .experience-heading .experience-overline {
  margin-bottom: var(--cm-kicker-gap-v22096) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: .16em !important;
  font-weight: 800 !important;
}

/* Eventos usa display:contents en escritorio para alinear la introducción con
   el título; aquí el espacio lo controla row-gap, no el margin del overline. */
@media (min-width: 1061px) {
  #eventos .section-title-row > div:first-child .overline {
    margin-bottom: 0 !important;
  }
  #eventos .section-title-row {
    row-gap: var(--cm-kicker-gap-v22096) !important;
  }
}

/* Textos introductorios equivalentes. */
#destacados > .section-title-row p,
#amenidades > .section-title-row p,
#eventos .events-intro-copy p,
#info-util > .section-title-row p,
#fechas > .section-title-row p,
#ubicacion > .section-title-row p,
#experiencias .experience-heading p,
.location-card p,
.croquis-copy p,
.contact-content > p {
  font-size: var(--cm-body-size-v22096) !important;
  line-height: var(--cm-body-leading-v22096) !important;
}

#historia.cm-story-v22053 .cm-story-copy-v22053 p {
  font-size: clamp(16px, 1.05vw, 18px) !important;
  line-height: 1.74 !important;
}

/* ------------------------------------------------------------
   3. Ritmo interno y separación entre "cuadros"
   Se igualan espacios, no tamaños forzados de componentes.
   ------------------------------------------------------------ */
.amenity-grid,
.faq-list,
.booking-layout,
.location-grid,
#eventos .events-gallery-grid,
#eventos .events-support-grid,
#eventos .events-service-grid,
#eventos .events-steps {
  gap: var(--cm-card-gap-v22096) !important;
}

#eventos .events-gallery-grid,
#eventos .events-support-grid,
#eventos .events-possibilities,
#eventos .events-more-types,
#eventos .events-cinematic,
#ubicacion .location-grid,
#ubicacion .croquis-card,
#fechas .booking-layout {
  width: min(100%, var(--cm-content-max-v22096));
}

/* Espacio constante entre el primer bloque y los bloques secundarios. */
#eventos .events-cinematic {
  margin-top: 0 !important;
}

#eventos .events-gallery-grid {
  margin-top: var(--cm-card-gap-v22096) !important;
}

#eventos .events-more-types {
  margin-top: clamp(22px, 2.6vw, 32px) !important;
}

#eventos .events-possibilities {
  margin-top: clamp(44px, 5vw, 64px) !important;
}

#eventos .events-support-grid {
  margin-top: var(--cm-card-gap-v22096) !important;
}

#ubicacion .croquis-card {
  margin-top: var(--cm-card-gap-v22096) !important;
}

/* Tarjetas de FAQ: una misma cadencia vertical entre pregunta y respuesta. */
#info-util .faq-list details {
  min-height: 0 !important;
}

#info-util .faq-list summary {
  line-height: 1.3 !important;
}

#info-util .faq-list details p {
  font-size: clamp(14.5px, 1vw, 16px) !important;
  line-height: 1.68 !important;
}

/* ------------------------------------------------------------
   4. Contacto final: mismo lenguaje tipográfico que el resto.
   Sigue siendo un cierre visual, no una sección editorial neutra.
   ------------------------------------------------------------ */
.contact-content > p {
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------
   5. Responsive
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  :root {
    --cm-section-y-v22096: 64px;
    --cm-section-title-gap-v22096: 26px;
    --cm-card-gap-v22096: 14px;
    --cm-kicker-gap-v22096: 10px;
    --cm-title-size-v22096: clamp(31px, 8.7vw, 38px);
    --cm-body-size-v22096: clamp(14.5px, 3.9vw, 16px);
  }

  /* Reservación tenía una excepción histórica de 62/70px; se integra al ritmo. */
  body.responsive-v187 #fechas {
    padding-top: var(--cm-section-y-v22096) !important;
    padding-bottom: var(--cm-section-y-v22096) !important;
  }

  body.responsive-v187 #fechas > .section-title-row {
    margin-bottom: var(--cm-section-title-gap-v22096) !important;
  }

  body.responsive-v187 #fechas > .section-title-row h2,
  body.responsive-v173 #destacados .section-title-row h2,
  body.responsive-v173 #amenidades .section-title-row h2,
  body.responsive-v173 #eventos .section-title-row h2,
  body.responsive-v173 #info-util .section-title-row h2,
  body.responsive-v173 #ubicacion .section-title-row h2,
  body.responsive-v173 #historia.cm-story-v22053 .cm-story-header-v22053 h2,
  body.responsive-v173 #experiencias .experience-heading h2,
  body.responsive-v173 .contact-content h2,
  body.responsive-v173.destacados-v148 #destacados .section-title-row h2 {
    font-size: var(--cm-title-size-v22096) !important;
    line-height: .98 !important;
  }

  #historia.cm-story-v22053 .cm-story-shell-v22053 {
    width: calc(100% - 32px);
    padding-top: var(--cm-section-y-v22096) !important;
    padding-bottom: calc(var(--cm-section-y-v22096) + 16px) !important;
  }

  #historia.cm-story-v22053 .cm-story-header-v22053 {
    margin-bottom: var(--cm-section-title-gap-v22096) !important;
  }

  #historia.cm-story-v22053 .cm-story-copy-v22053 p {
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    margin-bottom: 18px !important;
  }

  #eventos .events-possibilities {
    margin-top: 40px !important;
  }

  #eventos .events-more-types {
    margin-top: 20px !important;
  }

  .contact-content > p {
    max-width: 38ch;
  }
}

@media (orientation: landscape) and (max-width: 1100px) and (max-height: 650px) {
  :root {
    --cm-title-size-v22096: clamp(26px, 3.8vw, 36px);
  }

  body.responsive-v173 #destacados .section-title-row h2,
  body.responsive-v173 #amenidades .section-title-row h2,
  body.responsive-v173 #eventos .section-title-row h2,
  body.responsive-v173 #info-util .section-title-row h2,
  body.responsive-v173 #fechas .section-title-row h2,
  body.responsive-v173 #ubicacion .section-title-row h2,
  body.responsive-v173 #historia.cm-story-v22053 .cm-story-header-v22053 h2,
  body.responsive-v173 #experiencias .experience-heading h2,
  body.responsive-v173 .contact-content h2,
  body.responsive-v173.destacados-v148 #destacados .section-title-row h2 {
    font-size: var(--cm-title-size-v22096) !important;
  }
}