/* ==========================================================================
   Paradise Weeks — pw-secciones.css
   Lo que es propio de cada una de las 12 secciones. Todo lo reutilizable vive
   en pw-base.css (tokens y transversales) y pw-componentes.css.

   Ritmo claro / oscuro (no se altera sin recalcular contrastes):
     1  cabecera .......... profunda (azul noche)
     2  hero ............... profunda (azul noche)
     3  quiénes somos ...... clara    (hueso)
     4  misión y visión .... oscura   (azul marino)
     5  destinos ........... clara    (hueso)
     6  cómo funciona ...... oscura   (azul marino)
     7  disponibilidad ..... clara    (hueso)   ┐ única pausa de dos claras
     8  por qué elegirnos .. clara    (hueso)   ┘ seguidas: la 8 usa tarjetas
     9  compromisos ........ oscura   (azul marino)
    10  FAQ ................ clara    (hueso)
    11  CTA final .......... oscura   (azul marino)
    12  pie ................ profunda (azul noche)

   Regla operativa: dos secciones consecutivas nunca comparten background-color
   salvo el par 7+8, y ese par obliga a que la segunda use tarjetas de
   --pw-superficie-clara.
   ========================================================================== */


/* ==========================================================================
   2. Hero
   ========================================================================== */

.pw-hero {
    display: flex;
    align-items: center;
    min-height: min(88vh, 760px);
    padding-block: var(--pw-e-20) var(--pw-seccion-y);
    /* Resplandor dorado muy tenue detrás del titular. Puramente decorativo:
       no separa contenido ni comunica estado. */
    background-image: radial-gradient(
        120% 80% at 50% 0%,
        var(--pw-hero-resplandor) 0%,
        transparent 62%
    );
}

.pw-hero__interior {
    max-width: 46rem;
}

.pw-hero__cejilla {
    color: var(--pw-acento-texto);   /* dorado claro sobre azul noche: 10.08 */
}

.pw-hero__titulo {
    margin: 0 0 var(--pw-e-5);
    color: var(--pw-txt-actual);
}

.pw-hero__entrada {
    margin: 0 0 var(--pw-e-8);
    font-size: var(--pw-txt-lg);
    color: var(--pw-txt-suave);      /* 11.14 sobre azul noche */
    max-width: var(--pw-ancho-lectura);
}

.pw-hero__respaldo {
    margin-top: var(--pw-e-10);
    font-size: var(--pw-txt-sm);
    color: var(--pw-txt-suave);
}


/* ==========================================================================
   3. Quiénes somos
   ========================================================================== */

.pw-quienes__rejilla {
    display: grid;
    gap: var(--pw-e-10);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 900px) {
    .pw-quienes__rejilla { grid-template-columns: 1.05fr .95fr; gap: var(--pw-e-16); }
}

.pw-quienes__texto p { max-width: var(--pw-ancho-lectura); }

.pw-quienes__marco {
    border: 1px solid var(--pw-borde-sutil);
    border-radius: var(--pw-radio-lg);
    overflow: hidden;
    box-shadow: var(--pw-sombra-suave);
}
/* La ilustración de "quiénes somos" es del set .pw-ilus (mismo viewBox, mismo
   halo, mismo horizonte, mismo trazo dorado sobre marino), pero acá va a 5:4 y
   no a la 4:3 de las tarjetas de destino: el marco es una columna alta al lado
   del texto, no la cabecera de una tarjeta. El SVG lleva preserveAspectRatio
   "meet", así que el dibujo 4:3 se centra dentro del 5:4 y queda una franja de
   marino arriba y abajo — que es aire, no recorte.

   border-bottom: 0 porque el filete dorado de .pw-ilus separa la ilustración
   del cuerpo de una tarjeta, y acá no hay cuerpo debajo: el marco cierra con
   su propio borde. */
.pw-quienes__marco .pw-ilus { aspect-ratio: 5 / 4; border-bottom: 0; }

/* Tres datos de confianza bajo el texto. Son cualitativos a propósito:
   el sitio no publica cifras, cupos ni disponibilidad numérica. */
.pw-rasgos {
    display: grid;
    gap: var(--pw-e-5);
    grid-template-columns: 1fr;
    list-style: none;
    margin: var(--pw-e-8) 0 0;
    padding: 0;
}
@media (min-width: 600px) { .pw-rasgos { grid-template-columns: repeat(3, 1fr); } }

.pw-rasgo {
    padding-top: var(--pw-e-4);
    border-top: 1px solid var(--pw-borde-sutil);
}
.pw-rasgo__titulo {
    display: block;
    font-family: var(--pw-fuente-titulo);
    font-size: var(--pw-txt-lg);
    font-weight: var(--pw-peso-titulo);
    color: var(--pw-txt-actual);
}
.pw-rasgo__texto {
    display: block;
    margin-top: var(--pw-e-1);
    font-size: var(--pw-txt-sm);
    color: var(--pw-txt-suave);
}


/* ==========================================================================
   4. Misión y visión
   ========================================================================== */

.pw-mv {
    display: grid;
    gap: var(--pw-e-8);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .pw-mv { grid-template-columns: repeat(2, 1fr); gap: var(--pw-e-12); } }

.pw-mv__bloque {
    padding: var(--pw-e-8);
    background-color: var(--pw-superficie);   /* #12325C */
    border: 1px solid var(--pw-borde-sutil);  /* se separa por BORDE: superficie vs marino da 1.12 */
    border-radius: var(--pw-radio-lg);
}
.pw-mv__titulo {
    margin: 0 0 var(--pw-e-3);
    font-size: var(--pw-txt-xl);
    color: var(--pw-txt-actual);
}
.pw-mv__texto {
    margin: 0;
    color: var(--pw-txt-suave);   /* 8.46 sobre superficie oscura */
    max-width: var(--pw-ancho-lectura);
}

/* Declaración de valores en itálica no: la itálica de Cormorant está reservada
   al h1 del hero y a los testimonios. Acá el énfasis lo da el tamaño. */
.pw-mv__declaracion {
    margin-top: var(--pw-e-12);
    text-align: center;
    font-family: var(--pw-fuente-titulo);
    font-size: var(--pw-txt-xl);
    line-height: var(--pw-lh-subtitulo);
    color: var(--pw-txt-actual);
    max-width: var(--pw-ancho-estrecho);
    margin-inline: auto;
}


/* ==========================================================================
   5. Destinos
   ========================================================================== */

.pw-destinos__nota {
    margin-top: var(--pw-e-8);
    font-size: var(--pw-txt-sm);
    color: var(--pw-txt-suave);
    text-align: center;
    max-width: var(--pw-ancho-estrecho);
    margin-inline: auto;
}


/* ==========================================================================
   7. Disponibilidad
   Texto plano sobre hueso, sin tarjetas: es lo que la distingue de la 8, que
   comparte fondo con ella.
   ========================================================================== */

.pw-disponibilidad__cuerpo {
    display: grid;
    gap: var(--pw-e-10);
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .pw-disponibilidad__cuerpo { grid-template-columns: repeat(2, 1fr); gap: var(--pw-e-16); }
}

.pw-disponibilidad__texto p { max-width: var(--pw-ancho-lectura); }

.pw-lista-marcada {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pw-e-5);
}
.pw-lista-marcada li {
    position: relative;
    padding-left: var(--pw-e-8);
    color: var(--pw-txt-suave);
}
/* La viñeta es un filete corto dorado: decoración de relleno, y el texto
   nunca depende de ella. */
.pw-lista-marcada li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .75em;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--pw-dorado);
}
.pw-lista-marcada strong {
    display: block;
    font-weight: var(--pw-peso-medio);
    color: var(--pw-txt-actual);
}


/* ==========================================================================
   11. CTA final
   ========================================================================== */

.pw-cta__rejilla {
    display: grid;
    gap: var(--pw-e-12);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 900px) {
    .pw-cta__rejilla { grid-template-columns: .9fr 1.1fr; gap: var(--pw-e-16); }
}

.pw-cta__texto p { color: var(--pw-txt-suave); max-width: var(--pw-ancho-lectura); }

.pw-cta__directo {
    margin-top: var(--pw-e-8);
    padding-top: var(--pw-e-6);
    border-top: 1px solid var(--pw-borde-sutil);
}
.pw-cta__directo p { margin-bottom: var(--pw-e-4); }

.pw-cta__caja {
    padding: var(--pw-e-8);
    background-color: var(--pw-superficie);
    border: 1px solid var(--pw-borde-sutil);
    border-radius: var(--pw-radio-lg);
}
.pw-cta__caja-titulo {
    margin: 0 0 var(--pw-e-2);
    font-size: var(--pw-txt-xl);
    color: var(--pw-txt-actual);
}
.pw-cta__caja-entrada {
    margin: 0 0 var(--pw-e-6);
    font-size: var(--pw-txt-sm);
    color: var(--pw-txt-suave);
}