/* =========================================================
   El Chamizo · CSS común a las 3 variantes (A1/A2/A3)
   -----------------------------------------------------------
   Aquí vive la ESTRUCTURA de los componentes (tamaños, grids,
   comportamiento). El ASPECTO (colores, tipografías, formas)
   se define con las variables --chz-* que sobrescribe cada
   assets/css/variant-aN.css. Si un componente necesita una
   composición distinta en alguna variante, esa variante puede
   redefinir las reglas que necesite (cargan después que este
   archivo, así que ganan).
   ========================================================= */

/* ---------------------------------------------------------
   0. TIPOGRAFÍA BASE
   --------------------------------------------------------- */
body {
    font-family: var(--chz-font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--chz-color-text);
    background-color: var(--chz-color-bg);
}

h1, h2, h3, h4 {
    font-family: var(--chz-font-heading);
    line-height: 1.15;
    margin: 0 0 0.5em;
    color: var(--chz-color-text);
}

/* Especificidad 0,1,1 — gana al color de encabezados de Blocksy
   (que usa tag puro o inline CSS del Customizer sin clase wrapper) */
.chz-home h1, .chz-home h2, .chz-home h3, .chz-home h4,
.chz-archive-actividades h1, .chz-archive-actividades h2, .chz-archive-actividades h3,
.chz-actividad h1, .chz-actividad h2, .chz-actividad h3,
.chz-servicio h1, .chz-servicio h2, .chz-servicio h3,
.chz-contacto-page h1, .chz-contacto-page h2, .chz-contacto-page h3 {
    color: var(--chz-color-text);
}

/* Red de seguridad: el contenedor #main de Blocksy tiene fondo
   blanco propio. Pintamos el fondo aquí también para que ningún
   hueco entre bloques (o un bloque al que se le olvide su propio
   background) deje ver el blanco de Blocksy. */
.chz-home, .chz-archive-actividades, .chz-actividad, .chz-servicio, .chz-contacto-page {
    background-color: var(--chz-color-bg);
}

/* H1 y H2 llevan Caveat Brush (brush script tipo Avallon),
   distinta de la de H3-H4 (--chz-font-heading = Anton).
   Especificidad 0,1,1 para ganar a la tipografía de encabezados
   de Blocksy y al Anton de las variantes. */
.chz-home h1, .chz-home h2,
.chz-archive-actividades h1, .chz-archive-actividades h2,
.chz-actividad h1, .chz-actividad h2,
.chz-servicio h1, .chz-servicio h2,
.chz-contacto-page h1, .chz-contacto-page h2 {
    font-family: 'Caveat Brush', var(--chz-font-heading);
}

.chz-home h1,
.chz-archive-actividades h1,
.chz-actividad h1,
.chz-servicio h1,
.chz-contacto-page h1 {
    font-size: var(--chz-h1-size-mobile);
}

@media (min-width: 768px) {
    .chz-home h1,
    .chz-archive-actividades h1,
    .chz-actividad h1,
    .chz-servicio h1,
    .chz-contacto-page h1 {
        font-size: var(--chz-h1-size);
    }
}

h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: clamp(20px, 3vw, 24px); }

p { margin: 0 0 1em; }

/* Enlaces de texto en el naranja de acento de los iconos (#FD5300).
   Botones (.chz-btn) y enlaces de tarjeta sobreescriben su color. */
a {
    color: #FD5300;
}

/* Fondo del menú/cabecera al mismo color que las secciones
   (#302E2E), en lugar del negro puro. El header lo pinta Blocksy por
   fila, así que forzamos el color de sus filas. Si tu versión de
   Blocksy no lo coge, ponlo en Personalizar → Cabecera → (fila) →
   Color de fondo = #302E2E. */
#header [data-row],
.ct-header [data-row],
[data-row="top"],
[data-row="middle"],
[data-row="bottom"] {
    background-color: #302E2E !important;
}

/* ---------------------------------------------------------
   1. TÍTULOS DE SECCIÓN
   --------------------------------------------------------- */
.chz-section__title {
    max-width: 720px;
}

.chz-section__title--center {
    margin-inline: auto;
    text-align: center;
}

/* Títulos de sección de las landings de servicio (Club, Apoyo, Extraescolares)
   a la escala GRANDE de la home. Antes se quedaban en el h2 base (máx 40px) y
   se veían pequeños; la home usa 58-70px. Unificado para que haya uniformidad. */
.chz-servicio .chz-section__title {
    font-size: clamp(34px, 6vw, 62px);
    line-height: 1.04;
}

.chz-section__lead {
    color: var(--chz-color-text-secondary);
    max-width: 640px;
    font-size: 1.05rem;
}

.chz-section__lead--center {
    margin-inline: auto;
    text-align: center;
}

.chz-section__cta {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

/* Botón de Instagram del CTA final: estilo secundario (contorno) con el icono. */
.chz-btn--instagram svg {
    width: 1.2em;
    height: 1.2em;
    flex: 0 0 auto;
}

.chz-section {
    background-color: var(--chz-color-bg);
    color: var(--chz-color-text);
}

.chz-section--alt {
    background-color: var(--chz-color-bg-alt);
}

/* ---------------------------------------------------------
   1-bis. TEXTURAS DE FONDO (solo en las homes)
   -----------------------------------------------------------
   Fotografías reales (pared de ladrillo + grafiti / muro de
   tags) tratadas a duotono en los mismos colores del tema, para
   que cada sección tenga algo de textura sin perder contraste
   de texto. Se alternan dos fotos distintas ("a" y "b") para
   que dos secciones del mismo rol consecutivas no se vean
   idénticas. El degradado plano apilado delante de la imagen
   actúa de velo de color: cuanto más bajo el alpha, más se nota
   la foto. El hero lleva su propia textura para no fundirse con
   el menú (negro plano) de Blocksy.
   --------------------------------------------------------- */
/* El hero combina las clases chz-hero + chz-container en el
   mismo <section> (a diferencia del resto de bloques, que
   separan section de ancho completo + .chz-container interno).
   Por eso el fondo no puede ir directo en .chz-hero —quedaría
   encajonado en el max-width de 1200px—. Este ::before rompe el
   contenedor con el truco left:50% + width:100vw + translateX
   para cubrir el viewport completo, por detrás del grid de
   contenido (que sigue centrado y legible). */
.chz-home .chz-hero::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
    background-image: linear-gradient(rgba(10, 10, 10, 0.4), rgba(10, 10, 10, 0.4)), url('../img/fondos/textura-b-oscura.jpg');
    background-size: cover;
    background-position: center;
}

/* Red de seguridad de legibilidad: con la foto más visible,
   el H1/subtítulo necesitan algo de sombra para no perder
   contraste sobre las zonas más claras de la textura. */
.chz-home .chz-hero h1,
.chz-home .chz-hero .chz-hero__subtitulo {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.chz-home .chz-section {
    background-image: linear-gradient(rgba(10, 10, 10, 0.45), rgba(10, 10, 10, 0.45)), url('../img/fondos/textura-a-oscura.jpg');
    background-size: cover;
    background-position: center;
}

.chz-home .chz-section--alt {
    background-image: linear-gradient(rgba(22, 22, 22, 0.45), rgba(22, 22, 22, 0.45)), url('../img/fondos/textura-b-oscura.jpg');
    background-size: cover;
    background-position: center;
}

.chz-home .chz-section--light {
    background-image: none;
    background-color: #E0DFD3;
}

/* Fondo oscuro plano general (#302E2E vía --chz-color-bg), sin
   textura. Lo usan "Dónde estamos" y "¿Qué puedes encontrar?". */
.chz-home .chz-section--negro {
    background-image: none;
    background-color: var(--chz-color-bg);
}

.chz-home .chz-aviso {
    background-image: none;
    background-color: #ffffff;
}

/* Bloque del vídeo de la home: fondo de grafiti con la frase
   "Tú espacio · Tú disfrutas · Tú decides" ya integrada en la parte
   inferior de la imagen. Se ancla abajo (center bottom) para no recortar
   la frase y se le da algo más de aire inferior para que quede visible
   bajo el vídeo. Sin overlay: la imagen ya es oscura y así se respetan
   los colores de la rotulación. */
.chz-home .chz-section.chz-video-seccion {
    background-image: url('../img/fondo-video.jpg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: var(--chz-color-bg);
    /* En pantallas anchas "cover" agranda la imagen y sube la frase del fondo
       ("Tu espacio · Tú disfrutas · Tú decides"), que puede quedar tapada por el
       vídeo. Dejamos que el hueco inferior crezca con el ancho (tope 300px, antes
       160) para que el vídeo suba respecto a la frase y esta se lea completa.
       Por debajo de ~1333px el comportamiento es idéntico al anterior. */
    padding-block-end: clamp(90px, 12vw, 300px);
}

/* Garabato decorativo a izquierda y derecha del bloque de aviso. Solo en
   pantallas con sitio de sobra (desktop); en móvil se quita para que no
   quede detrás del texto. Va detrás del contenido (es fondo de sección). */
@media (min-width: 768px) {
    .chz-home .chz-aviso {
        background-image: url('../img/garabato.png'), url('../img/garabato.png');
        background-repeat: no-repeat, no-repeat;
        background-position: left 10px center, right 10px center;
        background-size: auto 88%, auto 88%;
    }
}

/* Banda con foto de fondo tipo parallax (la imagen se queda fija y
   el contenido pasa por delante al hacer scroll). background-attachment:
   fixed da el efecto sin JS; en móvil se desactiva (iOS no lo soporta
   bien) y pasa a scroll normal. */
.chz-banda-parallax {
    min-height: 420px;
    background-image: linear-gradient(rgba(10, 10, 10, 0.15), rgba(10, 10, 10, 0.15)), url('../img/fondos/banda-parallax.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (max-width: 768px) {
    .chz-banda-parallax {
        min-height: 280px;
        background-attachment: scroll;
    }
}

/* El H2 del aviso va en Anton (igual que los títulos de razones),
   en minúsculas y sin tracking. */
.chz-aviso h2 {
    font-family: var(--chz-font-heading);
    text-transform: none;
    letter-spacing: normal;
}

/* "¿Qué ofrecemos?" lleva la clase chz-section--alt, pero la
   queremos en negro plano sin textura. */
.chz-home .chz-servicios {
    background-image: none;
    background-color: var(--chz-color-bg);
}

/* Título de "¿Qué ofrecemos?" un punto más grande que el resto
   de títulos de sección (que usan clamp(32px, 6vw, 56px)). */
.chz-servicios .chz-section__title {
    font-size: clamp(38px, 7vw, 66px);
}

/* "Un sitio que es suyo" más grande (Caveat Brush se ve pequeña). */
.chz-presentacion .chz-section__title {
    font-size: clamp(40px, 7.5vw, 70px);
}

/* "¿Quién hay detrás de este proyecto?" es largo. Quitamos el tope
   de 720px y escalamos con el viewport; de 700px hacia arriba lo
   forzamos a una sola línea (era ahí donde partía en dos). En móvil
   se deja partir para que no quede diminuto ni desborde. */
.chz-equipo .chz-section__title {
    max-width: none;
    font-size: clamp(30px, 5vw, 60px);
}

@media (min-width: 700px) {
    .chz-equipo .chz-section__title {
        white-space: nowrap;
    }
}

/* La tarjeta central ("Actividades") lleva el fondo 6.png
   (muro de tags en amarillo). Velo amarillo ligero encima para
   que el texto negro de la tarjeta siga legible. Especificidad
   0,3,0 para ganar al amarillo plano de las variantes. */
.chz-home .chz-card-servicio:nth-child(2) {
    background-image: linear-gradient(rgba(232, 255, 58, 0.4), rgba(232, 255, 58, 0.4)), url('../img/fondos/textura-b-amarilla.jpg');
    background-size: cover;
    background-position: center;
}

/* El Club (1ª) y Apoyo al estudio (3ª) llevan la misma textura
   oscura que la sección "Un sitio que es suyo" (textura-a-oscura
   con velo). La 2ª (Actividades) mantiene su amarillo. */
.chz-home .chz-card-servicio:nth-child(1),
.chz-home .chz-card-servicio:nth-child(3) {
    background-image: linear-gradient(rgba(10, 10, 10, 0.45), rgba(10, 10, 10, 0.45)), url('../img/fondos/textura-a-oscura.jpg');
    background-size: cover;
    background-position: center;
}

/* Sección de actividades: fondo con la imagen grafiti.png (tag
   amarillo). Velo lima muy ligero encima para que el texto se lea
   sobre el trazo oscuro del grafiti. */
.chz-home .chz-actividades {
    background-color: var(--chz-color-accent);
    background-image: linear-gradient(rgba(232, 255, 58, 0.2), rgba(232, 255, 58, 0.2)), url('../img/fondos/grafiti.jpg');
    background-size: cover;
    background-position: center;
}

/* Título "Algunas de nuestras actividades": algo más pequeño para
   que quepa en una sola línea. */
.chz-actividades .chz-section__title {
    max-width: none;
    font-size: clamp(28px, 5.5vw, 58px);
    color: #231120;
}

/* Título "Ofertas de lanzamiento" en Anton, más grande. */
.chz-ofertas .chz-section__title {
    font-family: var(--chz-font-heading);
    text-transform: none;
    max-width: none;
    font-size: clamp(30px, 6vw, 64px);
}

/* Ambos, a una sola línea de 700px hacia arriba (en móvil se
   dejan partir para no quedar diminutos ni desbordar). */
@media (min-width: 700px) {
    .chz-actividades .chz-section__title,
    .chz-ofertas .chz-section__title {
        white-space: nowrap;
    }
}

/* Título de pre-inscripción ("Sé de los primeros en entrar"), más grande. */
.chz-preinscripcion .chz-section__title {
    font-size: clamp(38px, 7vw, 66px);
}

/* Título "Preguntas frecuentes", más grande. */
.chz-faq .chz-section__title {
    font-size: clamp(38px, 7vw, 66px);
}

/* Títulos de las dos tarjetas de oferta, centrados. */
.chz-ofertas__item h3 {
    text-align: center;
}

/* ---------------------------------------------------------
   2. BOTONES
   --------------------------------------------------------- */
.chz-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.85em 1.75em;
    border-radius: var(--chz-radius-sm);
    border: var(--chz-border-width) solid currentColor;
    font-family: var(--chz-font-heading);
    /* Anton es de un solo peso (400); con 600 el navegador finge la negrita
       y el texto sale "difuminado". Lo dejamos en 400 (Anton ya es grueso de
       por sí) para que el botón se vea nítido. */
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
    transition: background-color var(--chz-transition), color var(--chz-transition), border-color var(--chz-transition);
}

/* Botón grande, para CTAs destacados (p. ej. inscripción en la ficha). */
.chz-btn--lg {
    padding: 1.05em 2.4em;
    font-size: 1.15rem;
}

.chz-btn--primary {
    background-color: var(--chz-color-accent);
    border-color: var(--chz-color-accent);
    color: var(--chz-color-accent-contrast);
}

.chz-btn--primary:hover,
.chz-btn--primary:focus-visible {
    background-color: transparent;
    color: var(--chz-color-accent);
}

.chz-btn--secondary {
    border-color: var(--chz-color-text);
    color: var(--chz-color-text);
}

.chz-btn--secondary:hover,
.chz-btn--secondary:focus-visible {
    background-color: var(--chz-color-text);
    color: var(--chz-color-bg);
}

/* ---------------------------------------------------------
   3. PLACEHOLDERS DE IMAGEN / ICONO
   -----------------------------------------------------------
   Icono (SVG, currentColor) + etiqueta + descripción de qué
   debe mostrar el contenido definitivo. Generados con
   elchamizo_placeholder() en inc/helpers.php.
   --------------------------------------------------------- */
.chz-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--chz-radius-lg);
    background-color: var(--chz-color-bg-alt);
    border: 1px dashed var(--chz-color-border);
    color: var(--chz-color-text-secondary);
    font-size: 0.85rem;
    text-align: center;
    padding: 24px;
}

.chz-img-placeholder svg {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    opacity: 0.85;
}

.chz-img-placeholder__etiqueta {
    font-family: var(--chz-font-heading);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--chz-color-text);
}

.chz-img-placeholder__desc {
    display: block;
    max-width: 26ch;
    font-size: 0.8rem;
    line-height: 1.4;
}

.chz-icon-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 0.75em;
    border: 1px dashed var(--chz-color-border);
    border-radius: var(--chz-radius-sm);
    color: var(--chz-color-text-secondary);
    text-transform: uppercase;
}

.chz-icon-placeholder svg {
    width: 22px;
    height: 22px;
}

/* ---------------------------------------------------------
   4. BADGES
   --------------------------------------------------------- */
.chz-badge {
    display: inline-block;
    padding: 0.35em 0.85em;
    border-radius: var(--chz-radius-sm);
    background-color: var(--chz-color-text);
    color: var(--chz-color-bg);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.chz-badge--socios {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: var(--chz-color-accent);
    color: var(--chz-color-accent-contrast);
}

/* ---------------------------------------------------------
   5. GRIDS Y TARJETAS GENÉRICAS
   --------------------------------------------------------- */
.chz-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr;
}

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

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

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

.chz-card {
    background-color: var(--chz-color-bg-alt);
    border-radius: var(--chz-radius-md);
    padding: 28px;
}

.chz-card h3 {
    margin-top: 0;
}

.chz-card p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------
   BLOQUE 1 · HERO
   --------------------------------------------------------- */
.chz-hero {
    position: relative;
    z-index: 0;
    background-color: var(--chz-color-bg);
    color: var(--chz-color-text);
    display: grid;
    gap: 32px;
    align-items: center;
    padding-block: var(--chz-section-padding-mobile);
}

@media (min-width: 900px) {
    .chz-hero {
        grid-template-columns: 1.05fr 1fr;
        padding-block: var(--chz-section-padding);
    }
}

.chz-hero__media img,
.chz-hero__media .chz-img-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--chz-radius-lg);
}

/* Icono del servicio en el hueco del hero (Club, Apoyo, Extraescolares)
   en lugar del placeholder "Imagen pendiente": chapa grande y centrada,
   SIN caja gris, sin borde, sin padding y sin recorte 4:3. Doble clase
   para ganar en especificidad al 4:3 forzado por .chz-hero__media. */
.chz-hero__media .chz-img-placeholder.chz-img-placeholder--icono {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    aspect-ratio: auto;
    min-height: 0;
}

.chz-hero__media .chz-img-placeholder--icono img {
    width: clamp(200px, 60%, 340px);
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0;
}

/* Cabecera de las landings (Club, Apoyo al estudio, Extraescolares): MISMO
   fondo que el bloque de intro que va justo debajo, es decir la
   textura-a-oscura con velo oscuro (.chz-servicio-textura-a), a ANCHO
   COMPLETO vía ::before full-bleed. Sobre ese fondo oscuro: título en
   AMARILLO (#F2FF00) y subtítulo en BLANCO. Además, línea separadora
   amarilla de 2px al final del hero (::after) hacia la sección de intro. */
.chz-hero--landing {
    position: relative;
    z-index: 0;
}

.chz-hero--landing::before {
    content: '';
    position: absolute;
    inset: 0 calc(-50vw + 50%);
    z-index: -1;
    background-color: var(--chz-color-bg);
    background-image:
        linear-gradient(rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.55)),
        url('../img/fondos/textura-a-oscura.jpg');
    background-size: cover;
    background-position: center;
}

/* Separación de 2px en AMARILLO (#F2FF00, el mismo del título "El Club")
   entre el hero (sección 1) y la sección de intro (sección 2). A ANCHO
   COMPLETO (100vw), igual que el fondo full-bleed del hero. */
.chz-hero--landing::after {
    content: '';
    position: absolute;
    left: calc(-50vw + 50%);
    right: calc(-50vw + 50%);
    bottom: 0;
    height: 2px;
    background-color: #F2FF00;
    z-index: 1;
}

.chz-hero--landing .chz-hero__contenido h1 {
    color: #F2FF00;
}

.chz-hero--landing .chz-hero__subtitulo {
    color: #ffffff;
}

.chz-hero__subtitulo {
    font-size: 1.1rem;
    max-width: 46ch;
}

.chz-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 1.5em;
}

/* ---------------------------------------------------------
   BLOQUE 2 · AVISO DE APERTURA
   --------------------------------------------------------- */
.chz-aviso {
    background-color: var(--chz-color-bg-alt);
    padding-block: 48px;
    text-align: center;
}

.chz-aviso__texto {
    max-width: 640px;
    margin-inline: auto;
}

.chz-aviso__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 1.5em;
}

/* ---------------------------------------------------------
   BLOQUE 3 · PRESENTACIÓN + HIGHLIGHTS
   --------------------------------------------------------- */
.chz-presentacion {
    display: grid;
    gap: 40px;
    align-items: center;
}

@media (min-width: 900px) {
    .chz-presentacion {
        grid-template-columns: 1.2fr 0.8fr;
    }
}

.chz-presentacion__texto {
    max-width: 60ch;
    font-size: 1.05rem;
    margin-bottom: 0;
}

/* Círculo grande a la derecha, con el fondo 1.png (muro de ladrillo
   con grafiti en amarillo) y un velo lima muy ligero para que la
   silueta negra contraste. El círculo va un poco elevado y la
   silueta desplazada hacia abajo, así el muñeco "se sale" del
   círculo por la parte inferior. */
.chz-presentacion__media {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1;
    margin-inline: auto;
    transform: translateY(-28px);
    background-color: var(--chz-color-accent);
    background-image: linear-gradient(rgba(232, 255, 58, 0.3), rgba(232, 255, 58, 0.3)), url('../img/fondos/textura-a-amarilla.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}

.chz-presentacion__media .chz-img-placeholder {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 44px;
}

.chz-presentacion__media img {
    max-width: 80%;
    max-height: 84%;
    object-fit: contain;
    transform: translateY(28%);
    /* Silueta en BLANCO (la original es negra) con un contorno
       oscuro, para que resalte tanto sobre el círculo amarillo como
       sobre el fondo oscuro por donde se sale. */
    filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.4));
}

/* CSS heredado de los highlights (ya retirados del markup);
   se conserva inerte por si se reutiliza el patrón en otra
   página. No se renderiza en la home. */
.chz-highlights {
    margin-top: 48px;
}

.chz-highlights__item h3 {
    margin-bottom: 0.35em;
}

.chz-highlights__item p {
    color: var(--chz-color-text-secondary);
    margin: 0;
}

/* ---------------------------------------------------------
   BLOQUE 4 · ¿QUÉ OFRECEMOS? (tarjetas de servicio)
   --------------------------------------------------------- */
.chz-card-servicio {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    background-color: var(--chz-color-bg-alt);
    border-radius: var(--chz-radius-md);
}

.chz-card-servicio__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.chz-card-servicio__media img,
.chz-card-servicio__media .chz-img-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 0;
    aspect-ratio: auto;
}

.chz-card-servicio__media img {
    object-fit: cover;
}

/* Cuando la tarjeta usa icono en vez de foto: el área deja de ser
   4:3 y muestra el icono (chapa circular sobre fondo transparente)
   centrado arriba. */
.chz-card-servicio__media--icono {
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 28px 4px;
}

.chz-card-servicio__media--icono .chz-card-servicio__icono {
    width: 128px;
    height: 128px;
    object-fit: contain;
}

.chz-card-servicio__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.75em;
    padding: 28px;
}

.chz-card-servicio__body p {
    color: var(--chz-color-text-secondary);
    flex: 1;
}

.chz-card-servicio__body .chz-btn {
    align-self: center;
}

/* ---------------------------------------------------------
   BLOQUE 5 · VÍDEO / FRASE
   --------------------------------------------------------- */
.chz-video {
    display: grid;
    gap: 32px;
    align-items: center;
}

@media (min-width: 900px) {
    .chz-video {
        grid-template-columns: 1fr 1fr;
    }
}

.chz-video__media {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
    aspect-ratio: 9 / 16;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--chz-radius-lg);
    background-color: var(--chz-color-bg-alt);
    border: 1px dashed var(--chz-color-border);
    color: var(--chz-color-text-secondary);
    font-size: 0.85rem;
    text-align: center;
    padding: 24px;
}

.chz-video__media svg {
    width: 36px;
    height: 36px;
    opacity: 0.85;
}

/* Vídeo de la home: ocupa el 100% del ancho del contenedor, con altura
   de banner (más bajo que un 16:9 completo, para que el bloque no crezca)
   y recorte "cover" centrado. */
video.chz-video__media {
    display: block;
    width: 100%;
    max-width: none;
    height: 240px;
    object-fit: cover;
}

@media (min-width: 768px) {
    video.chz-video__media {
        height: 420px;
    }
}

.chz-video__frase {
    font-family: var(--chz-font-heading);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 600;
    line-height: 1.3;
}

/* ---------------------------------------------------------
   BLOQUE 6 · ¿QUÉ PUEDES ENCONTRAR? (razones)
   Maqueta a dos columnas: texto a la izquierda, lista de
   apartados (recuadro + icono a la izquierda) a la derecha.
   Centralizada aquí para las 3 variantes; cada variante ya
   no define su propia rejilla (ver variant-aN.css).
   --------------------------------------------------------- */
.chz-razones {
    display: grid;
    gap: 40px;
    align-items: start;
}

@media (min-width: 900px) {
    .chz-razones {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 64px;
    }
}

/* Título de la sección centrado y a todo el ancho, por encima de las
   dos columnas (texto+silueta / lista), y un poco más grande que un
   título de sección normal. */
.chz-razones__titulo {
    grid-column: 1 / -1;
    max-width: none;
    margin-bottom: 0;
    text-align: center;
    font-size: clamp(36px, 6vw, 58px);
}

.chz-razones__texto {
    max-width: 40ch;
    font-size: 1.05rem;
    margin-bottom: 0;
}

/* Silueta bajo el texto de la intro. Al hacer scroll se mueve
   (parallax) y se desvanece con un empujón final; lo controla el
   JS con [data-chz-fade-scroll]. La silueta original es negra;
   con el filtro se pinta de blanco para el fondo negro del bloque. */
.chz-razones__foto {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    margin: 28px auto 0;
    filter: brightness(0) invert(1);
    will-change: opacity, transform;
}

.chz-razones__lista {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chz-razones__item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border: none;
    color: #ffffff;
    background-color: var(--chz-color-bg-alt);
    background-image: linear-gradient(rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.5)), url('../img/fondos/textura-b-oscura.jpg');
    background-size: cover;
    background-position: center;
}

/* Al pasar el ratón se funde encima el fondo 6.png (muro de tags
   amarillo) y el texto se vuelve negro para leerse bien. El pseudo
   va en z-index -1 (con isolation) para quedar sobre el 4.png pero
   por debajo del texto. */
.chz-razones__item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(232, 255, 58, 0.4), rgba(232, 255, 58, 0.4)), url('../img/fondos/textura-b-amarilla.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chz-razones__item:hover::before {
    opacity: 1;
}

.chz-razones__item:hover .chz-razones__contenido h3,
.chz-razones__item:hover .chz-razones__contenido p,
.chz-razones__item:hover .chz-icon-placeholder {
    color: var(--chz-color-accent-contrast);
}

/* Icono placeholder en lima, visible sobre la textura oscura (4.png). */
.chz-razones__item .chz-icon-placeholder {
    color: var(--chz-color-accent);
    transition: color 0.3s ease;
}

/* El icono va dentro del "cuadrado amarillo" (recuadro con borde
   lima), como el placeholder de antes. El borde va en el SPAN y el
   filtro que pinta el icono de blanco va en la IMG (si estuvieran
   en el mismo elemento, el filtro recolorearía también el borde). */
.chz-razones__icono {
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    padding: 10px;
    border: var(--chz-border-width) solid var(--chz-color-accent);
    transition: border-color 0.3s ease;
}

.chz-razones__item:hover .chz-razones__icono {
    border-color: var(--chz-color-accent-contrast);
}

/* Icono en línea negra: se pinta de BLANCO para verse sobre el
   recuadro oscuro; en hover pasa a NEGRO (la caja se vuelve amarilla). */
.chz-razones__icono img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

.chz-razones__item:hover .chz-razones__icono img {
    filter: brightness(0);
}

.chz-razones__contenido h3 {
    font-family: var(--chz-font-heading);
    text-transform: none;
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 0.35em;
    color: #ffffff;
    transition: color 0.3s ease;
}

.chz-razones__contenido p {
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    transition: color 0.3s ease;
}

/* ---------------------------------------------------------
   BLOQUE 7 · DÓNDE ESTAMOS
   --------------------------------------------------------- */
.chz-ubicacion {
    display: grid;
    gap: 32px;
}

@media (min-width: 900px) {
    .chz-ubicacion {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

.chz-ubicacion__media img,
.chz-ubicacion__media iframe,
.chz-ubicacion__media .chz-img-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--chz-radius-lg);
}

/* El mapa embebido (iframe) ocupa el mismo hueco que ocupaba la foto. El borde
   amarillo fosforito de acento va en el CONTENEDOR, con una separación de 10px
   respecto al mapa (padding), de modo que el borde no queda pegado al iframe. */
.chz-ubicacion__media {
    box-sizing: border-box;
    padding: 10px;
    border: var(--chz-border-width) solid var(--chz-color-accent);
    border-radius: var(--chz-radius-lg);
}

.chz-ubicacion__media iframe {
    display: block;
    border: 0;
}

/* ---------------------------------------------------------
   BLOQUE 8 · EQUIPO (Amaya)
   --------------------------------------------------------- */
.chz-equipo__card {
    display: grid;
    gap: 32px;
    align-items: center;
    padding: 32px;
    background-color: var(--chz-color-bg-alt);
    border-radius: var(--chz-radius-lg);
}

@media (min-width: 768px) {
    .chz-equipo__card {
        grid-template-columns: 380px 1fr;
        padding: 48px;
    }
}

.chz-equipo__foto,
.chz-equipo__foto-placeholder {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1;
    border-radius: 50%;
    margin-inline: auto;
}

/* La foto de Amaya es una pieza gráfica compuesta (retrato 3:4 con
   textos y marco), así que se muestra ENTERA en 3:4 en lugar de
   recortada en círculo, para no cortar la composición. Sobrescribe
   el aspect-ratio 1 / border-radius 50% de la regla compartida. */
.chz-equipo__foto {
    aspect-ratio: 3 / 4;
    border-radius: var(--chz-radius-lg);
    object-fit: cover;
}

.chz-equipo__foto-placeholder {
    background-color: var(--chz-color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--chz-color-text-secondary);
    font-size: 0.8rem;
    text-align: center;
    padding: 16px;
}

.chz-equipo__foto-placeholder svg {
    width: 44px;
    height: 44px;
}

/* Título/rol de Amaya: va DENTRO de la columna de texto, justo encima
   de la bio (no encima de la foto). Es un texto largo, así que va a un
   tamaño contenido y se deja fluir en varias líneas. */
.chz-equipo__texto h3 {
    margin: 0 0 0.6em;
    line-height: 1.2;
    font-size: clamp(20px, 2.4vw, 28px);
}

/* ---------------------------------------------------------
   BLOQUE 9 · CARRUSEL DE ACTIVIDADES
   --------------------------------------------------------- */
.chz-carousel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
}

@media (min-width: 640px) {
    .chz-carousel {
        grid-template-columns: auto 1fr auto;
        align-items: center;
    }
}

.chz-carousel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    order: 2;
}

.chz-carousel__viewport::-webkit-scrollbar {
    display: none;
}

.chz-carousel__track {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 4px 2px;
}

.chz-carousel__item {
    flex: 0 0 320px;
    scroll-snap-align: start;
}

.chz-carousel__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: var(--chz-border-width) solid var(--chz-color-text);
    background-color: var(--chz-color-bg);
    color: var(--chz-color-text);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color var(--chz-transition), color var(--chz-transition);
}

.chz-carousel__btn:hover,
.chz-carousel__btn:focus-visible {
    background-color: var(--chz-color-text);
    color: var(--chz-color-bg);
}

.chz-carousel__btn--prev { order: 1; }
.chz-carousel__btn--next { order: 3; }

/* El JS marca los botones con [hidden] cuando no hay scroll posible (una
   sola tarjeta, o todas caben en el ancho). Como .chz-carousel__btn fuerza
   display:flex, hay que reponer aquí el ocultado del atributo; si no, las
   flechas quedan visibles pero "muertas" (sin nada que desplazar). */
.chz-carousel__btn[hidden] {
    display: none;
}

@media (max-width: 639px) {
    .chz-carousel__btn {
        justify-self: end;
    }

    .chz-carousel__btn--prev {
        justify-self: start;
    }
}

/* En la banda amarilla de actividades el color de texto es oscuro,
   así que el botón quedaba con flecha oscura sobre círculo oscuro
   (invisible). Esquema propio con contraste: círculo oscuro + flecha
   blanca; al pasar el ratón / con foco, se invierte. */
.chz-actividades .chz-carousel__btn {
    background-color: var(--chz-color-accent-contrast);
    border-color: var(--chz-color-accent-contrast);
    color: #ffffff;
}

.chz-actividades .chz-carousel__btn:hover,
.chz-actividades .chz-carousel__btn:focus-visible {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--chz-color-accent-contrast);
}

/* Tarjeta de actividad (carrusel, grids de servicio, relacionadas, archivo) */
.chz-card-actividad {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--chz-color-bg);
    border: 1px solid var(--chz-color-border);
    border-radius: var(--chz-radius-md);
}

.chz-card-actividad__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--chz-color-bg-alt);
}

/* La foto se posiciona en absoluto para llenar la caja 4:3 y
   recortarse (cover), sin que su altura natural estire la tarjeta. */
.chz-card-actividad__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chz-card-actividad__media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--chz-color-bg-alt), var(--chz-color-border));
    color: var(--chz-color-text-secondary);
}

.chz-card-actividad__media-placeholder svg {
    width: 28px;
    height: 28px;
}

/* Tarjetas de actividad de la home: fondo 4.png (muro de tags
   oscuro) en toda la tarjeta, en lugar del color plano. El hueco de
   la foto se deja transparente para que la textura sea continua
   (cuando haya foto real, la cubrirá). */
.chz-home .chz-card-actividad {
    background-image: linear-gradient(rgba(10, 10, 10, 0.45), rgba(10, 10, 10, 0.45)), url('../img/fondos/textura-b-oscura.jpg');
    background-size: cover;
    background-position: center;
}

.chz-home .chz-card-actividad__media,
.chz-home .chz-card-actividad__media-placeholder {
    background: transparent;
}

.chz-card-actividad__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.4em;
    padding: 20px;
}

.chz-card-actividad__tipo {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--chz-color-accent);
}

.chz-card-actividad__title {
    margin: 0;
    font-size: 1.35rem;
}

.chz-card-actividad__title a {
    color: inherit;
    text-decoration: none;
}

.chz-card-actividad__meta,
/* Fecha de las actividades puntuales (Ocio): destaca en amarillo. */
.chz-card-actividad__fecha {
    margin: 0 0 2px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--chz-color-accent);
}

.chz-card-actividad__precio {
    margin: 0;
    font-size: 0.9rem;
    color: var(--chz-color-text-secondary);
}

.chz-card-actividad__link {
    align-self: flex-start;
    margin-top: 0.75em;
    padding: 0.6em 1.4em;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------
   BLOQUE 10 · OFERTAS DE LANZAMIENTO
   --------------------------------------------------------- */
.chz-ofertas {
    background-color: var(--chz-color-bg-alt);
}

.chz-ofertas__items {
    margin-top: 32px;
}

.chz-ofertas__item {
    height: 100%;
    padding: 28px;
    background-color: var(--chz-color-bg);
    border-radius: var(--chz-radius-md);
}

.chz-ofertas__actions {
    margin-top: 40px;
    text-align: center;
}

/* ---------------------------------------------------------
   BLOQUE 11 · FORMULARIO DE PRE-INSCRIPCIÓN
   --------------------------------------------------------- */
.chz-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 640px;
    margin-top: 40px;
}

/* En las secciones "CTA final" con encabezado centrado (formulario de dudas de
   la ficha de actividad) el formulario también va centrado en el contenedor.
   El de la home y /contacto/ se mantiene alineado a la izquierda. */
.chz-cta-final .chz-form {
    margin-left: auto;
    margin-right: auto;
}

.chz-form__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chz-form__label {
    font-family: var(--chz-font-heading);
    /* Anton solo tiene un grosor (400). Con 600 el navegador finge la
       negrita y se ve emborronada / "con sombra"; 400 se ve nítida. */
    font-weight: 400;
}

.chz-form__required {
    color: var(--chz-color-accent);
    text-decoration: none;
}

.chz-form__input {
    width: 100%;
    padding: 0.75em 1em;
    font: inherit;
    color: var(--chz-color-text);
    background-color: var(--chz-color-bg);
    border: var(--chz-border-width) solid var(--chz-color-border);
    border-radius: var(--chz-radius-sm);
}

.chz-form__input:focus-visible {
    border-color: var(--chz-color-accent);
}

textarea.chz-form__input {
    resize: vertical;
}

.chz-form__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.chz-form__checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 10px;
}

.chz-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    font-weight: 400;
    cursor: pointer;
}

.chz-form__checkbox input {
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.2em;
    accent-color: var(--chz-color-accent);
}

.chz-form__row--rgpd {
    font-size: 0.9rem;
}

.chz-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    left: -9999px;
}

.chz-form__notice {
    margin-bottom: 4px;
    padding: 14px 18px;
    border-radius: var(--chz-radius-sm);
    font-weight: 600;
}

.chz-form__notice--ok {
    background-color: #e6f4ea;
    color: #1e4620;
}

.chz-form__notice--error {
    background-color: #fdecea;
    color: #611a15;
}

/* ---------------------------------------------------------
   BLOQUE 12 · FAQ (acordeón nativo <details>)
   --------------------------------------------------------- */
.chz-faq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
}

.chz-faq__item {
    padding: 4px 24px;
    border: var(--chz-border-width) solid var(--chz-color-border);
    border-radius: var(--chz-radius-md);
    /* Fondo liso sólido en cada pregunta (antes eran transparentes y se veía
       la textura de la sección a través): aspecto más limpio y sencillo. */
    background-color: var(--chz-color-bg-alt);
}

.chz-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--chz-font-heading);
    /* Igual que en los labels: Anton en 400 para que no se vea "con sombra". */
    font-weight: 400;
    color: var(--chz-color-text);
}

.chz-faq__item summary::-webkit-details-marker {
    display: none;
}

.chz-faq__item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--chz-color-accent);
    transition: transform var(--chz-transition);
}

.chz-faq__item[open] summary::after {
    transform: rotate(45deg);
}

.chz-faq__item p {
    padding-bottom: 18px;
    margin: 0;
    color: var(--chz-color-text-secondary);
}

/* ---------------------------------------------------------
   BLOQUE 13 · CONTACTO (footer breve)
   --------------------------------------------------------- */
.chz-contacto {
    background-color: var(--chz-color-bg-alt);
}

.chz-contacto__grid {
    gap: 40px;
}

.chz-contacto__col h3 {
    margin-bottom: 0.6em;
    font-family: var(--chz-font-heading);
}

.chz-contacto__col p {
    margin-bottom: 0.5em;
    color: var(--chz-color-text-secondary);
}

.chz-contacto__col .chz-btn {
    margin-top: 0.75em;
}

/* =========================================================
   PLANTILLA B · PÁGINA DE SERVICIO
   ========================================================= */
.chz-steps {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 40px;
}

.chz-steps__item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.chz-steps__number {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--chz-color-accent);
    color: var(--chz-color-accent-contrast);
    font-family: var(--chz-font-heading);
    font-weight: 700;
}

.chz-steps__item h3 {
    margin: 0 0 0.25em;
}

.chz-steps__item p {
    margin: 0;
    color: var(--chz-color-text-secondary);
}

/* Contenido enriquecido (wysiwyg): introducción y precios */
.chz-prose {
    max-width: 70ch;
    font-size: 1.05rem;
}

.chz-prose > * + * {
    margin-top: 1em;
}

.chz-prose ul,
.chz-prose ol {
    padding-left: 1.4em;
}

.chz-prose li + li {
    margin-top: 0.4em;
}

.chz-precios__destacado {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 24px;
    background-color: var(--chz-color-bg);
    border: var(--chz-border-width) solid var(--chz-color-accent);
    border-radius: var(--chz-radius-sm);
    font-family: var(--chz-font-heading);
    font-weight: 400;
}

.chz-cta-final {
    text-align: center;
}

.chz-cta-final__texto {
    max-width: 640px;
    margin-inline: auto;
}

.chz-cta-final .chz-btn {
    margin-top: 1.5em;
}

/* =========================================================
   PLANTILLA C · FICHA DE ACTIVIDAD (rediseño UX)
   -----------------------------------------------------------
   Encabezado compacto (tipo + título) y, debajo, dos columnas:
   contenido (imagen, texto, "¿qué aprenderás?", monitor) y una
   caja de información/reserva sticky con el precio, los datos
   esenciales y el CTA de inscripción.
   ========================================================= */
.chz-actividad-encabezado {
    margin-bottom: 32px;
}
.chz-actividad-encabezado .chz-card-actividad__tipo {
    display: block;
    margin-bottom: 0.6em;
}
.chz-actividad-encabezado h1 {
    margin: 0;
}

/* Tres bloques (en este orden en el DOM): contenido "arriba" (descripción +
   foto), caja de info, y contenido "abajo" (qué aprenderás + monitor).
   - Móvil: se apilan en orden de DOM → descripción, foto, caja, qué, monitor.
   - Escritorio: "arriba" y "abajo" van en la columna izquierda y la caja a la
     derecha, ocupando toda la altura (fila top + bottom) y fija (sticky). */
.chz-actividad-layout {
    display: grid;
    gap: 40px;
}
.chz-actividad-main--top,
.chz-actividad-main--bottom {
    min-width: 0;
    display: grid;
}
.chz-actividad-main--top {
    gap: 28px;
}
.chz-actividad-main--bottom {
    gap: 40px;
}
@media (min-width: 900px) {
    .chz-actividad-layout {
        grid-template-columns: 1fr minmax(300px, 340px);
        grid-template-areas:
            "top    aside"
            "bottom aside";
        column-gap: 48px;
        row-gap: 40px;
        align-items: start;
    }
    .chz-actividad-main--top    { grid-area: top; }
    .chz-actividad-main--bottom { grid-area: bottom; }
    .chz-actividad-info         { grid-area: aside; }
    .chz-actividad-info__card {
        position: sticky;
        top: 96px;
    }
}

/* --- Caja de información / reserva --- */
.chz-actividad-info__card {
    background-color: var(--chz-color-bg-alt);
    border: var(--chz-border-width) solid var(--chz-color-border);
    border-radius: var(--chz-radius-md);
    padding: 24px;
}
.chz-actividad-info__precio-label,
.chz-actividad-info__label {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--chz-color-text-secondary);
}
.chz-actividad-info__precio {
    margin: 3px 0 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--chz-color-accent);
}
.chz-actividad-info__precio .chz-badge {
    vertical-align: middle;
    margin-left: 4px;
}
.chz-actividad-info__lista {
    margin: 20px 0;
    padding: 20px 0;
    border-top: 1px solid var(--chz-color-border);
    border-bottom: 1px solid var(--chz-color-border);
    display: grid;
    gap: 14px;
}
.chz-actividad-info__fila {
    display: grid;
    gap: 2px;
}
.chz-actividad-info__valor {
    color: var(--chz-color-text);
    line-height: 1.35;
}
.chz-actividad-info__cta {
    width: 100%;
    /* texto largo ("Inscribirme en esta actividad"): tipografía de texto, que
       tiene pesos reales; en Anton se apelmaza. */
    font-family: var(--chz-font-body);
    font-weight: 600;
    letter-spacing: 0;
}
.chz-actividad-info__dudas {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--chz-color-text-secondary);
}

/* --- Contenido principal --- */
.chz-actividad-figura {
    margin: 0; /* la separación con la descripción la da el gap de --top */
}
.chz-actividad-figura .chz-actividad-imagen {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    max-height: 520px;      /* tope de altura para que la foto no domine */
    object-fit: contain;    /* sin recorte; en verticales deja franja, no corta */
    background-color: var(--chz-color-bg-alt);
    border-radius: var(--chz-radius-lg);
}
.chz-actividad-contenido {
    max-width: 68ch;
}

/* Bloques del contenido principal (¿Qué aprenderás?, monitor). La separación
   entre ellos la da el gap de .chz-actividad-main--bottom. */
.chz-actividad-bloque {
    margin-top: 0;
}
.chz-actividad-bloque__titulo {
    margin: 0 0 16px;
    font-family: var(--chz-font-heading);
    font-weight: 400;
    font-size: 1.4rem;
}
.chz-actividad-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.chz-actividad-checklist li {
    position: relative;
    padding-left: 30px;
    line-height: 1.4;
}
.chz-actividad-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: var(--chz-color-accent);
}
.chz-actividad-checklist li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 0.28em;
    width: 5px;
    height: 9px;
    border: solid var(--chz-color-accent-contrast);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.chz-info-practica {
    margin-top: 24px;
    overflow: hidden;
    border: var(--chz-border-width) solid var(--chz-color-border);
    border-radius: var(--chz-radius-md);
}

.chz-info-practica table {
    width: 100%;
    border-collapse: collapse;
}

.chz-info-practica th,
.chz-info-practica td {
    padding: 14px 22px;
    text-align: left;
    border-bottom: 1px solid var(--chz-color-border);
}

.chz-info-practica th {
    width: 45%;
    font-family: var(--chz-font-heading);
    /* Anton solo tiene un peso (400); con 600 el navegador finge la negrita
       y el texto sale emborronado. En 400 se ve nítido. */
    font-weight: 400;
}

.chz-info-practica tr:last-child th,
.chz-info-practica tr:last-child td {
    border-bottom: 0;
}

.chz-aprenderas ul {
    margin: 24px 0 0;
    padding-left: 1.4em;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

/* Bloque del monitor con estilo "comentario de red social":
   avatar redondo a la izquierda + burbuja con nombre y texto. */
.chz-monitor {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 32px;
}

.chz-monitor__avatar {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--chz-color-accent);
    border: 3px solid var(--chz-color-accent);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.chz-monitor__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Avatar ampliable: al pasar el ratón (escritorio) o pulsar/enfocar (móvil),
   la foto crece sobre la burbuja para verla en detalle. */
.chz-monitor__avatar--zoom {
    cursor: zoom-in;
    transform-origin: top left;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.chz-monitor__avatar--zoom:hover,
.chz-monitor__avatar--zoom:focus {
    transform: scale(2.6);
    z-index: 6;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    outline: none;
}

.chz-monitor__inicial {
    font-family: var(--chz-font-heading);
    font-size: 30px;
    line-height: 1;
    color: var(--chz-color-accent-contrast);
}

.chz-monitor__cuerpo {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 20px;
    background-color: var(--chz-color-bg-alt);
    border-radius: 4px 16px 16px 16px;
}

/* Pico de la burbuja apuntando al avatar. */
.chz-monitor__cuerpo::before {
    content: "";
    position: absolute;
    top: 18px;
    left: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 9px 8px 0;
    border-color: transparent var(--chz-color-bg-alt) transparent transparent;
}

.chz-monitor__cabecera {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 6px;
}

.chz-monitor__nombre {
    font-family: var(--chz-font-heading);
    font-size: 20px;
    line-height: 1.05;
    letter-spacing: 0.3px;
    color: var(--chz-color-text);
}

.chz-monitor__rol {
    padding-left: 12px;
    border-left: 1px solid rgba(245, 245, 245, 0.28);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--chz-color-accent);
}

.chz-monitor__texto {
    margin: 0;
    line-height: 1.55;
    color: var(--chz-color-text-secondary);
}

.chz-relacionadas {
    margin-top: 40px;
}

/* =========================================================
   ARCHIVO DE ACTIVIDADES
   ========================================================= */
.chz-archive-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 40px;
    padding: 0;
    list-style: none;
}

.chz-archive-filtros a {
    display: inline-block;
    padding: 0.5em 1.25em;
    border: var(--chz-border-width) solid var(--chz-color-border);
    border-radius: 999px;
    color: var(--chz-color-text);
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color var(--chz-transition), color var(--chz-transition);
}

.chz-archive-filtros a:hover,
.chz-archive-filtros a:focus-visible,
.chz-archive-filtros a.is-active {
    border-color: var(--chz-color-accent);
    color: var(--chz-color-accent);
}

/* ---------------------------------------------------------
   HORARIO SEMANAL (archive de actividades)
   -----------------------------------------------------------
   Parrilla que se rellena sola desde los campos "Día(s) de la
   semana" + "Hora" de cada actividad. Móvil: días apilados.
   Escritorio: una columna por día (scroll horizontal si no
   caben). Solo se pintan los días que tienen actividades.
   --------------------------------------------------------- */
.chz-horario {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 40px;
}

@media (min-width: 768px) {
    .chz-horario {
        grid-auto-flow: column;
        grid-auto-columns: minmax(170px, 1fr);
        overflow-x: auto;
        padding-bottom: 6px;
    }
}

.chz-horario__dia {
    background-color: var(--chz-color-bg-alt);
    border: 1px solid var(--chz-color-border);
    border-radius: var(--chz-radius-md);
    padding: 16px;
}

.chz-horario__dia-nombre {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--chz-color-border);
    font-family: var(--chz-font-heading);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--chz-color-accent);
}

.chz-horario__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chz-horario__item a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--chz-radius-sm);
    background-color: var(--chz-color-bg);
    border: 1px solid var(--chz-color-border);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.chz-horario__item a:hover,
.chz-horario__item a:focus-visible {
    border-color: var(--chz-color-accent);
    transform: translateY(-2px);
}

.chz-horario__hora {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--chz-color-text-secondary);
}

.chz-horario__titulo {
    color: var(--chz-color-text);
    line-height: 1.25;
}