/* =========================================================
   El Chamizo · Variante A1 — Cultura urbana / streetwear
   (composición: hero a dos columnas)
   -----------------------------------------------------------
   Comparte exactamente la misma paleta, tipografía y lenguaje
   de formas que A2 y A3: negro + amarillo-lima (#E8FF3A) como
   acento, Anton + Space Grotesk, esquinas duras, alto
   contraste. Lo único que diferencia esta variante es la
   MAQUETACIÓN: el hero va a dos columnas (texto + foto lado a
   lado, usando el grid por defecto de common.css) en vez de a
   pantalla completa.
   ========================================================= */

:root {
    /* Color — idéntico a A2/A3 */
    --chz-color-bg: #302E2E;
    --chz-color-bg-alt: #3A3838;
    --chz-color-bg-light: #f5f5f0;
    --chz-color-text: #f5f5f5;
    --chz-color-text-secondary: #a8a8a8;
    --chz-color-accent: #E8FF3A;
    --chz-color-accent-contrast: #0a0a0a;
    --chz-color-accent-2: #ffffff;
    --chz-color-border: #2e2e2e;

    /* Tipografía — idéntica a A2/A3 */
    --chz-font-heading: 'Anton', 'Archivo Black', system-ui, sans-serif;
    --chz-font-body: 'Space Grotesk', system-ui, sans-serif;
    --chz-h1-size: 64px;
    --chz-h1-size-mobile: 40px;

    /* Forma y espaciado — idéntica a A2/A3 */
    --chz-radius-sm: 0px;
    --chz-radius-md: 0px;
    --chz-radius-lg: 0px;
    --chz-border-width: 3px;
    --chz-section-padding: 80px;
    --chz-section-padding-mobile: 48px;
}

/* ---------------------------------------------------------
   Tipografía: display condensada, mayúsculas estratégicas
   --------------------------------------------------------- */
h1, h2, h3, h4 {
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.01em;
}

/* Caveat Brush es un brush script: no funciona en mayúsculas
   forzadas ni con tracking añadido. Lo usan H1 y H2. */
h1, h2 {
    text-transform: none;
    line-height: 1.15;
    letter-spacing: normal;
}

h2 { font-size: clamp(32px, 6vw, 56px); }
h3 { font-size: clamp(20px, 3vw, 28px); }

/* Tratamiento fotográfico: colores vivos, igual que A2/A3 */
img {
    filter: grayscale(0.05) contrast(1.1);
}

/* ---------------------------------------------------------
   Botones: esquinas duras, alto contraste, mayúsculas
   --------------------------------------------------------- */
.chz-btn {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.95rem;
}

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

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

/* ---------------------------------------------------------
   Placeholders e iconos: bloques duros, sin filigranas
   --------------------------------------------------------- */
.chz-img-placeholder {
    border-radius: 0;
    border-style: solid;
    background-color: var(--chz-color-bg-alt);
    border-color: var(--chz-color-border);
    filter: none;
}

.chz-icon-placeholder {
    width: 56px;
    height: 56px;
    border: var(--chz-border-width) solid currentColor;
    border-radius: 0;
    font-size: 0.65rem;
}

.chz-img-placeholder svg,
.chz-icon-placeholder,
.chz-equipo__foto-placeholder svg,
.chz-card-actividad__media-placeholder svg,
.chz-video__media svg {
    color: var(--chz-color-accent);
}

/* ---------------------------------------------------------
   BLOQUE 1 · HERO — dos columnas (texto + foto). El grid de
   2 columnas ya lo define common.css por defecto; aquí solo
   centramos el bloque de texto en su columna.
   --------------------------------------------------------- */
.chz-hero__contenido {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6em;
}

.chz-hero__subtitulo {
    font-size: 1.1rem;
    color: var(--chz-color-text);
}

/* ---------------------------------------------------------
   BLOQUE 2 · AVISO — banda amarilla de alto impacto
   --------------------------------------------------------- */
.chz-aviso {
    background-color: var(--chz-color-accent);
    color: var(--chz-color-accent-contrast);
    border-top: none;
    border-bottom: none;
}

.chz-aviso h2 {
    color: var(--chz-color-accent-contrast);
}

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

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

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

.chz-aviso .chz-btn--secondary:hover,
.chz-aviso .chz-btn--secondary:focus-visible {
    background-color: var(--chz-color-accent-contrast);
    color: var(--chz-color-accent);
}

/* ---------------------------------------------------------
   BLOQUE 3 · PRESENTACIÓN + HIGHLIGHTS
   --------------------------------------------------------- */
.chz-highlights {
    gap: 0;
}

.chz-highlights__item {
    padding: 28px;
    border: var(--chz-border-width) solid var(--chz-color-border);
}

.chz-highlights__item:nth-child(2) {
    background-color: var(--chz-color-accent);
    border-color: var(--chz-color-accent);
}

.chz-highlights__item:nth-child(2) h3,
.chz-highlights__item:nth-child(2) p {
    color: var(--chz-color-accent-contrast);
}

/* ---------------------------------------------------------
   BLOQUE 4 · ¿QUÉ OFRECEMOS?
   --------------------------------------------------------- */
.chz-card-servicio {
    border: var(--chz-border-width) solid var(--chz-color-border);
    background-color: var(--chz-color-bg-alt);
}

.chz-card-servicio:nth-child(2) {
    background-color: var(--chz-color-accent);
    border-color: var(--chz-color-accent);
}

.chz-card-servicio:nth-child(2) h3,
.chz-card-servicio:nth-child(2) p {
    color: var(--chz-color-accent-contrast);
}

.chz-card-servicio:nth-child(2) .chz-btn--secondary {
    background-color: var(--chz-color-accent-contrast);
    border-color: var(--chz-color-accent-contrast);
    color: var(--chz-color-accent);
}

.chz-card-servicio:nth-child(2) .chz-btn--secondary:hover,
.chz-card-servicio:nth-child(2) .chz-btn--secondary:focus-visible {
    background-color: transparent;
    color: var(--chz-color-accent-contrast);
}

/* ---------------------------------------------------------
   BLOQUE 5 · VÍDEO/FRASE
   --------------------------------------------------------- */
.chz-video__media {
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

.chz-video__frase {
    padding: 24px;
    background-color: var(--chz-color-accent);
    color: var(--chz-color-accent-contrast);
    font-size: clamp(22px, 4vw, 34px);
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   SECCIÓN CON FONDO CLARO ("Por qué el Chamizo")
   Se activa con la clase chz-section--light en el <section>.
   --------------------------------------------------------- */
.chz-section--light {
    --chz-color-text: var(--chz-color-accent-contrast);
    --chz-color-text-secondary: #666666;
    --chz-color-border: rgba(0, 0, 0, 0.12);
    background-color: var(--chz-color-bg-light);
    color: var(--chz-color-accent-contrast);
}

/* ---------------------------------------------------------
   BLOQUE 6 · ¿QUÉ PUEDES ENCONTRAR? — la maqueta (texto +
   lista con recuadro e icono) está centralizada en common.css
   (.chz-razones…), idéntica en las 3 variantes.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   BLOQUE 7 · DÓNDE ESTAMOS
   --------------------------------------------------------- */
.chz-ubicacion__media .chz-img-placeholder {
    aspect-ratio: 16 / 9;
}

/* ---------------------------------------------------------
   BLOQUE 8 · EQUIPO
   --------------------------------------------------------- */
.chz-equipo__card {
    border: var(--chz-border-width) solid var(--chz-color-border);
}

.chz-equipo__foto,
.chz-equipo__foto-placeholder {
    border-radius: 0;
    border: var(--chz-border-width) solid var(--chz-color-accent);
}

.chz-equipo__texto h3 {
    color: var(--chz-color-accent);
}

/* ---------------------------------------------------------
   BLOQUE 9 · CARRUSEL DE ACTIVIDADES — fondo amarillo con
   tarjetas oscuras encima (igual mecánica que A2/A3)
   --------------------------------------------------------- */
.chz-actividades {
    --chz-color-text: var(--chz-color-accent-contrast);
    background-color: var(--chz-color-accent);
}

.chz-actividades .chz-card-actividad {
    --chz-color-text: #f5f5f5;
    border: var(--chz-border-width) solid transparent;
    background-color: var(--chz-color-bg-alt);
}

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

.chz-actividades .chz-section__cta .chz-btn--secondary:hover,
.chz-actividades .chz-section__cta .chz-btn--secondary:focus-visible {
    background-color: transparent;
    border-color: var(--chz-color-accent-contrast);
    color: var(--chz-color-accent-contrast);
}

.chz-card-actividad {
    border: var(--chz-border-width) solid var(--chz-color-border);
    background-color: var(--chz-color-bg-alt);
}

.chz-card-actividad__tipo {
    letter-spacing: 0.1em;
}

.chz-carousel__btn {
    border-width: var(--chz-border-width);
}

.chz-badge--socios {
    background-color: var(--chz-color-accent);
    color: var(--chz-color-accent-contrast);
}

/* ---------------------------------------------------------
   BLOQUE 11 · FORMULARIO — campos de alto contraste
   --------------------------------------------------------- */
.chz-form__input {
    background-color: var(--chz-color-bg-alt);
    border-color: var(--chz-color-text);
    color: var(--chz-color-text);
}

.chz-form__label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
}

.chz-form__notice--ok {
    background-color: var(--chz-color-accent);
    color: var(--chz-color-accent-contrast);
}

.chz-form__notice--error {
    background-color: #cc2200;
    color: #ffffff;
}

/* ---------------------------------------------------------
   BLOQUE 12 · FAQ — acento lateral
   --------------------------------------------------------- */
.chz-faq__item {
    border: var(--chz-border-width) solid var(--chz-color-border);
    border-left-width: 6px;
    border-left-color: var(--chz-color-accent);
}

.chz-faq__item summary {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
}

.chz-faq__item summary::after {
    font-family: var(--chz-font-body);
    color: var(--chz-color-accent);
}

/* ---------------------------------------------------------
   BLOQUE 13 · CONTACTO
   --------------------------------------------------------- */
.chz-contacto {
    border-top: var(--chz-border-width) solid var(--chz-color-accent);
}

.chz-contacto__col h3 {
    color: var(--chz-color-accent);
}