/**
 * CTC · CSS Base (Cultura, Territorios y Cercanía)
 *
 * Hoja de estilos base compartida por los bloques del micrositio CTC
 * (programa del Ministerio de Cultura · Provincia de Santa Fe).
 * Centraliza el manual de marca: tipografías, paleta, dimensiones y
 * componentes reutilizables.
 *
 * Identidad alineada al sitio de Cultura / Provincia de Santa Fe:
 * tipografía Inter y paleta de theme.json. El elemento diferenciador
 * del programa son sus ilustraciones (línea negra + mapa ilustrado),
 * no una paleta propia. Fuente de valores: theme.json + PDF de
 * identidad del programa (temporal-ctc/ajuste-identidad-visual/).
 *
 * Metodología: Desktop First.
 * Scope: TODO cuelga de la clase raíz `.ctc` para no pisar los estilos
 * globales del multisite. Cada bloque CTC debe renderizarse dentro de un
 * contenedor con la clase `.ctc`.
 */

/* ============================================================
   1. TOKENS DE MARCA (Custom Properties)
   Scopeados a `.ctc` para no filtrarse al resto del sitio.
   Los valores salen de theme.json cuando existe variable global.
   ============================================================ */
.ctc {
    /* --- Tipografía --- */
    /* Inter para todo (títulos, cuerpo, UI): ya la carga el theme */
    --ctc-font-base: var(--wp--preset--font-family--inter, 'Inter'), Arial, sans-serif;

    --ctc-font-weight-regular: 400;
    --ctc-font-weight-medium: 500;
    --ctc-font-weight-semibold: 600;
    --ctc-font-weight-bold: 700;
    --ctc-font-weight-black: 800;

    /* Escala tipográfica (roles del sistema) */
    --ctc-font-size-display: 58px;      /* Titular principal · Inter 800 */
    --ctc-font-size-h2: 32px;           /* Título de sección · Inter 700 */
    --ctc-font-size-h3: 20px;           /* Subtítulo de tarjeta · Inter 600/700 */
    --ctc-font-size-cuerpo: 16px;       /* Párrafos · Inter 400 */
    --ctc-font-size-cuerpo-sm: 14px;    /* Texto secundario de cards */
    --ctc-font-size-eyebrow: 12px;      /* Etiqueta / eyebrow · Inter 600 */
    --ctc-font-size-numero: 72px;       /* Números grandes del relevamiento */

    /* --- Paleta (Santa Fe / Cultura, desde theme.json) --- */
    --ctc-color-oscuro: var(--wp--preset--color--principal, #000000);          /* Texto principal, fondos oscuros */
    --ctc-color-acento: var(--wp--preset--color--custom-violeta, #e42153);     /* Acento primario, CTAs, links activos */
    --ctc-color-acento-sec: var(--wp--preset--color--custom-naranja, #ff7402); /* Acento secundario, detalles */
    --ctc-color-fondo: var(--wp--preset--color--custom-blanco, #ffffff);       /* Fondo base */
    --ctc-color-fondo-alterno: #f7f7f7;  /* Fondo de cards / secciones alternas (gris neutro, sin token global) */
    --ctc-color-fondo-suave: #efefef;    /* Fondos de imagen / placeholder */
    --ctc-color-borde: #e5e5e5;          /* Bordes y divisores */
    --ctc-color-texto: var(--wp--preset--color--texto, #555555);        /* Párrafos principales */
    --ctc-color-texto-sec: var(--wp--preset--color--secundario, #666666); /* Texto secundario */
    --ctc-color-texto-suave: #777777;    /* Texto de apoyo en cards */
    --ctc-color-texto-mute: #999999;     /* Metadatos, labels tenues */
    --ctc-color-badge: var(--wp--preset--color--custom-amarillo, #ffcb02); /* Punto y texto de badge sobre oscuro */
    --ctc-color-badge-fondo: #fff3cc;    /* Fondo claro del badge "PRONTO" (amarillo al 20%, sin token global) */

    /* Degradé de marca (Santa Fe full color) */
    --ctc-gradiente-marca: var(--wp--preset--gradient--custom-full-color-90, linear-gradient(90deg, rgb(60, 58, 229) 0%, rgb(228, 33, 83) 23%, rgb(255, 109, 126) 48%, rgb(255, 116, 2) 76%, rgb(255, 203, 2) 100%));

    /* Sobre fondos oscuros o degradé */
    --ctc-color-claro: #ffffff;                    /* Títulos sobre oscuro */
    --ctc-color-claro-sec: rgba(255, 255, 255, 0.78); /* Párrafos sobre oscuro */

    /* --- Dimensiones / layout --- */
    --ctc-content-size: var(--wp--style--global--content-size, 880px);
    --ctc-wide-size: var(--wp--style--global--wide-size, 1060px);

    /* Espaciados */
    --ctc-space-xs: 8px;
    --ctc-space-sm: 16px;
    --ctc-space-md: 24px;
    --ctc-space-lg: 40px;
    --ctc-space-xl: 72px;               /* Padding vertical de sección (diseño) */

    /* Radios */
    --ctc-radius-sm: 4px;               /* Botones, láminas */
    --ctc-radius-md: 7px;               /* Cards */
    --ctc-radius-lg: 9px;               /* Cards grandes (home) */
    --ctc-radius-pill: 100px;           /* Badges redondeados */

    /* Sombras */
    --ctc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);

    /* Transiciones */
    --ctc-transition: 0.2s ease;
}

/* ============================================================
   2. RESET / BASE del scope
   ============================================================ */
.ctc {
    margin-top: 0 !important;
    box-sizing: border-box;
    font-family: var(--ctc-font-base);
    color: var(--ctc-color-texto);
    background-color: var(--ctc-color-fondo);
}

.ctc,
.ctc::before,
.ctc::after,
.ctc *,
.ctc *::before,
.ctc *::after {
    box-sizing: border-box;
}

.ctc ::selection {
    background: var(--ctc-color-acento);
    color: var(--ctc-color-claro);
}

/* Fondo de transición para imágenes de contenido mientras cargan. */
.ctc-home__hero-imagen,
.ctc-home__relevamiento-fondo,
.ctc-home__acceso-img,
.ctc-identidad__relevamiento-fondo,
.ctc-novedades__card-img,
.ctc-noticia__media img,
.ctc-noticia__card-media img {
    background-color: var(--ctc-color-fondo-suave);
}

/* ============================================================
   3. CONTENEDOR
   ============================================================ */
.ctc-contenedor {
    width: 100%;
    max-width: var(--ctc-wide-size);
    margin-inline: auto;
    padding-inline: var(--ctc-space-md);
}

.ctc-contenedor--angosto {
    max-width: var(--ctc-content-size);
}

/* ============================================================
   4. SECCIONES
   ============================================================ */
.ctc-seccion {
    padding-block: var(--ctc-space-xl);
    border-bottom: 1px solid var(--ctc-color-borde);
}

/* Sección con fondo alterno (gris muy claro) */
.ctc-seccion--alterna {
    background-color: var(--ctc-color-fondo-alterno);
}

/* Sección oscura (hero de página, destacados) */
.ctc-seccion--oscura {
    background-color: var(--ctc-color-oscuro);
    color: var(--ctc-color-claro-sec);
    border-bottom: none;
}

/* Sección con el degradé de marca (bloques de datos destacados) */
.ctc-seccion--degrade {
    background: var(--ctc-gradiente-marca);
    color: var(--ctc-color-claro);
    border-bottom: none;
}

/* ============================================================
   5. TIPOGRAFÍA · Títulos y textos
   ============================================================ */
/* Eyebrow: etiqueta superior de sección */
.ctc-eyebrow {
    font-family: var(--ctc-font-base);
    font-size: var(--ctc-font-size-eyebrow);
    font-weight: var(--ctc-font-weight-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ctc-color-acento);
    margin: 0 0 16px;
}

/* Eyebrow con guión decorativo a la izquierda */
.ctc-eyebrow--con-linea {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ctc-eyebrow--con-linea::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--ctc-color-acento);
    flex: none;
}

/* Titular principal (display) */
.ctc-titulo-display {
    margin: 0;
    font-family: var(--ctc-font-base);
    font-weight: var(--ctc-font-weight-black);
    font-size: var(--ctc-font-size-display);
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--ctc-color-oscuro);
}

/* Título de sección */
.ctc-titulo {
    margin: 0;
    font-family: var(--ctc-font-base);
    font-weight: var(--ctc-font-weight-bold);
    font-size: var(--ctc-font-size-h2);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ctc-color-oscuro);
}

/* Subtítulo de tarjeta */
.ctc-subtitulo {
    margin: 0;
    font-family: var(--ctc-font-base);
    font-weight: var(--ctc-font-weight-bold);
    font-size: var(--ctc-font-size-h3);
    line-height: 1.2;
    color: var(--ctc-color-oscuro);
}

/* Sobre fondos oscuros o degradé los títulos van claros */
.ctc-seccion--oscura .ctc-titulo-display,
.ctc-seccion--oscura .ctc-titulo,
.ctc-seccion--oscura .ctc-subtitulo,
.ctc-seccion--degrade .ctc-titulo-display,
.ctc-seccion--degrade .ctc-titulo,
.ctc-seccion--degrade .ctc-subtitulo {
    color: var(--ctc-color-claro);
}

/* Párrafo base */
.ctc-texto {
    margin: 0;
    font-family: var(--ctc-font-base);
    font-size: var(--ctc-font-size-cuerpo);
    font-weight: var(--ctc-font-weight-regular);
    line-height: 1.7;
    color: var(--ctc-color-texto);
}

/* Texto secundario / de apoyo */
.ctc-texto--sec {
    font-size: var(--ctc-font-size-cuerpo-sm);
    line-height: 1.6;
    color: var(--ctc-color-texto-suave);
}

.ctc-seccion--oscura .ctc-texto,
.ctc-seccion--degrade .ctc-texto {
    color: var(--ctc-color-claro-sec);
}

/* Número grande (datos del relevamiento) */
.ctc-numero {
    font-family: var(--ctc-font-base);
    font-weight: var(--ctc-font-weight-black);
    font-size: var(--ctc-font-size-numero);
    line-height: 0.9;
    color: var(--ctc-color-oscuro);
}

.ctc-numero--acento {
    color: var(--ctc-color-acento);
}

.ctc-seccion--oscura .ctc-numero,
.ctc-seccion--degrade .ctc-numero {
    color: var(--ctc-color-claro);
}

/* ============================================================
   6. BOTONES
   ============================================================ */
.ctc-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 30px;
    background-color: var(--ctc-color-acento);
    border: none;
    border-radius: var(--ctc-radius-sm);
    font-family: var(--ctc-font-base);
    font-size: 15px;
    font-weight: var(--ctc-font-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    color: var(--ctc-color-claro);
    cursor: pointer;
    transition: filter var(--ctc-transition);
}

/* Hover sin escala: solo un brillo más marcado */
.ctc-boton:hover {
    filter: brightness(1.18);
    color: var(--ctc-color-claro);
}

.ctc-boton:focus-visible {
    outline: 2px solid var(--ctc-color-acento);
    outline-offset: 2px;
}

/* Botón oscuro (ej. "Descargar informe") */
.ctc-boton--oscuro {
    background-color: var(--ctc-color-oscuro);
    color: var(--ctc-color-claro);
    font-size: 14px;
    padding: 12px 22px;
}

/* Botón con borde, sin relleno */
.ctc-boton--borde {
    background-color: transparent;
    border: 1px solid var(--ctc-color-acento);
    color: var(--ctc-color-acento);
}

.ctc-boton--borde:hover {
    color: var(--ctc-color-acento);
}

/* Link de acción con flecha (ej. "Ver informe →") */
.ctc-link-accion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ctc-font-base);
    font-size: 14px;
    font-weight: var(--ctc-font-weight-semibold);
    color: var(--ctc-color-acento);
    text-decoration: none;
    transition: filter var(--ctc-transition);
}

.ctc-link-accion:hover {
    filter: brightness(0.85);
    color: var(--ctc-color-acento);
}

/* ============================================================
   7. BADGES
   ============================================================ */
/* Badge claro (ej. "Video en producción" / "PRONTO") */
.ctc-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ctc-color-badge-fondo);
    padding: 10px 18px;
    border-radius: 20px;
    font-family: var(--ctc-font-base);
    font-size: 12px;
    font-weight: var(--ctc-font-weight-semibold);
    letter-spacing: 0.04em;
    color: var(--ctc-color-oscuro);
}

.ctc-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ctc-color-badge);
    flex: none;
}

/* Badge oscuro (ej. "PRÓXIMAMENTE" sobre card) */
.ctc-badge--oscuro {
    background: var(--ctc-color-oscuro);
    color: var(--ctc-color-badge);
    font-size: 10px;
    font-weight: var(--ctc-font-weight-bold);
    letter-spacing: 0.07em;
    padding: 5px 10px;
    text-transform: uppercase;
}

.ctc-badge--oscuro::before {
    display: none;
}

/* ============================================================
   8. CARDS
   ============================================================ */
.ctc-card {
    background: var(--ctc-color-fondo-alterno);
    border: 1px solid var(--ctc-color-borde);
    border-radius: var(--ctc-radius-md);
    overflow: hidden;
}

/* Card sobre fondo alterno (invierte el fondo) */
.ctc-card--fondo {
    background: var(--ctc-color-fondo);
}

/* Zona de imagen / placeholder de la card */
.ctc-card__media {
    background: var(--ctc-color-fondo-suave);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctc-card__cuerpo {
    padding: 20px 22px 24px;
}

/* Círculo de ícono (tinte suave del acento con ícono violeta) */
.ctc-icono-circulo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(228, 33, 83, 0.08); /* Violeta de marca al 8% */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* Placeholder grande (PDF / video pendiente) */
.ctc-placeholder {
    background: var(--ctc-color-fondo-suave);
    border: 1px solid var(--ctc-color-borde);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* ============================================================
   9. UTILIDADES
   ============================================================ */
.ctc-divisor {
    height: 1px;
    background: var(--ctc-color-borde);
    border: none;
    margin-block: 30px;
}

/* Filete de marca: barra fina con el degradé full color, como el
   remate de página del PDF de identidad. Usar como separador o
   remate de secciones. */
.ctc-filete {
    height: 5px;
    background: var(--ctc-gradiente-marca);
    border: none;
    margin: 0;
}

/* Los heroes principales completan el alto visible que queda debajo de las
   cabeceras. El JS del header actualiza la variable con la medida real. */
body.ctc-micrositio {
    --ctc-altura-cabeceras: 143px;
}

body.ctc-micrositio .ctc-home__hero,
body.ctc-micrositio .ctc-identidad__hero,
body.ctc-micrositio .ctc-formacion__hero,
body.ctc-micrositio .ctc-novedades__hero,
body.ctc-micrositio .ctc-suma-celebracion__hero {
    min-height: max(540px, calc(100vh - var(--ctc-altura-cabeceras))) !important;
    min-height: max(540px, calc(100svh - var(--ctc-altura-cabeceras))) !important;
}

/* El newsletter y el pie institucional pertenecen al layout global. En las
   páginas CTC se alinean con los laterales propios del micrositio. */
body.ctc-micrositio {
    --ctc-footer-lateral: clamp(24px, 8.33vw, 120px);
}

body.ctc-micrositio .newsletter,
body.ctc-micrositio footer.footer {
    padding-inline: 0 !important;
}

body.ctc-micrositio .newsletter > .container,
body.ctc-micrositio footer.footer > .container {
    width: auto !important;
    max-width: none !important;
    margin-right: var(--ctc-footer-lateral) !important;
    margin-left: var(--ctc-footer-lateral) !important;
}

/* Gravity Forms puede imponer su botón primario azul sobre el newsletter.
   Se preservan las variables del componente para respetar desktop y mobile. */
body.ctc-micrositio .newsletter .form-container.form-container--newsletter .gform_wrapper .gform_footer .gform_button {
    width: var(--submit-width) !important;
    height: var(--submit-height) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 var(--input-px) !important;
    border: var(--submit-border) !important;
    border-radius: var(--submit-radius) !important;
    background-color: var(--submit-bg) !important;
    box-shadow: none !important;
    color: var(--submit-color) !important;
    font-family: var(--submit-font) !important;
    font-size: var(--submit-font-size) !important;
    font-weight: var(--submit-font-weight) !important;
    line-height: 1 !important;
    text-transform: var(--submit-text-transform) !important;
    cursor: var(--submit-cursor);
}

body.ctc-micrositio .newsletter .form-container.form-container--newsletter .gform_wrapper .gform_footer .gform_button:hover {
    background-color: var(--submit-hover-bg) !important;
    color: var(--submit-hover-color) !important;
}

body.ctc-micrositio .newsletter .form-container.form-container--newsletter .gform_wrapper .gform_footer .gform_button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Metadato tenue en mayúsculas (ej. "Región") */
.ctc-metadato {
    font-family: var(--ctc-font-base);
    font-size: 11px;
    font-weight: var(--ctc-font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ctc-color-texto-mute);
}

/* ============================================================
   10. RESPONSIVE (breakpoints según css/partials/_breakpoints.scss)
   Desktop First
   ============================================================ */
/* Tablet / Móvil */
@media (max-width: 63.9375rem) {
    body.ctc-micrositio {
        --ctc-altura-cabeceras: 123px;
        --ctc-footer-lateral: 20px;
    }

    body.ctc-micrositio .ctc-home__hero,
    body.ctc-micrositio .ctc-identidad__hero,
    body.ctc-micrositio .ctc-formacion__hero,
    body.ctc-micrositio .ctc-novedades__hero,
    body.ctc-micrositio .ctc-suma-celebracion__hero {
        min-height: max(480px, calc(100vh - var(--ctc-altura-cabeceras))) !important;
        min-height: max(480px, calc(100svh - var(--ctc-altura-cabeceras))) !important;
    }

    .ctc-contenedor {
        padding-inline: var(--ctc-space-sm);
    }

    .ctc {
        --ctc-font-size-display: 42px;
        --ctc-font-size-h2: 27px;
        --ctc-font-size-numero: 56px;
    }

    .ctc-seccion {
        padding-block: var(--ctc-space-lg);
    }
}

/* Móvil pequeño */
@media (max-width: 37.4375rem) {
    body.ctc-micrositio {
        --ctc-altura-cabeceras: 128px;
    }

    body.ctc-micrositio .ctc-home__hero,
    body.ctc-micrositio .ctc-identidad__hero,
    body.ctc-micrositio .ctc-formacion__hero,
    body.ctc-micrositio .ctc-novedades__hero,
    body.ctc-micrositio .ctc-suma-celebracion__hero {
        min-height: max(620px, calc(100vh - var(--ctc-altura-cabeceras))) !important;
        min-height: max(620px, calc(100svh - var(--ctc-altura-cabeceras))) !important;
    }

    .ctc {
        --ctc-font-size-display: 34px;
        --ctc-font-size-h2: 24px;
        --ctc-font-size-numero: 48px;
    }

    .ctc-boton {
        width: 100%;
    }
}