/*
 * Plantilla VIBRANTE — colorida y comunitaria. Toda la paleta de marca en escena.
 * A diferencia de las otras cinco (colores de soporte fijos), aquí TODO el
 * esquema —fondos, bandas, footer, bordes— se deriva del color de marca vía
 * color-mix(), con defaults estáticos para navegadores sin soporte. La franja
 * multicolor (primario → acento → tonos derivados) es su firma visual; una
 * instancia puede sustituir los tonos 3 y 4 vía brand_css_vars
 * (--v2s-stripe-3 / --v2s-stripe-4) para desplegar su paleta completa.
 * Archivo en títulos, Hanken Grotesk en cuerpo, radios orgánicos asimétricos.
 *
 * Media slots opcionales (convención por instancia, en public/uploads/media/):
 *   hero-2.jpg / hero-3.jpg → el hero se vuelve un slideshow con crossfade
 *     (las vars --v2s-hero-img-2/-3 las emite el partial si los archivos existen).
 *   isotipo.svg|png → --v2s-isotype (la emite el layout): marca de agua en
 *     footer y banda CTA, y sello del eyebrow.
 */

.v2s--vibrante {
    /* Marca */
    --v2s-primary: var(--brand-primary, #2C6E9B);
    --v2s-primary-hover: var(--brand-primary-hover, #1F567C);
    --v2s-accent: var(--brand-accent, #E0764F);
    --v2s-accent-hover: var(--brand-accent-hover, #C25A35);
    --v2s-green: var(--brand-primary, #2C6E9B);
    --v2s-green-hover: var(--brand-primary-hover, #1F567C);

    /* Derivados — defaults estáticos (navegadores sin color-mix) */
    --v2s-bg: #F6F9FB;
    --v2s-paper: #FFFFFF;
    --v2s-navy: #142838;
    --v2s-deep: #142838;
    --v2s-soft: #E8F1F7;
    --v2s-muted: #566876;
    --v2s-border: #DBE5EC;

    /* Franja multicolor de marca: tonos 3 y 4 sobreescribibles por instancia */
    --v2s-stripe-3: var(--v2s-accent);
    --v2s-stripe-4: var(--v2s-primary);

    --v2s-radius: 12px;
    --v2s-radius-lg: 18px;
    --v2s-btn-radius: 999px;
    /* Radios orgánicos asimétricos — firma de las cards (sobrios) */
    --v2s-organic-a: 12px 12px 30px 12px;
    --v2s-organic-b: 12px 30px 12px 12px;
    --v2s-organic-c: 30px 12px 12px 12px;
    --v2s-organic-d: 12px 12px 12px 30px;
    --v2s-shadow: 0 12px 34px rgba(20, 40, 56, 0.10);
    --v2s-display: var(--brand-font-display, 'Archivo', sans-serif);
    --v2s-serif: var(--v2s-display);
    /* Velo lateral: legible a la izquierda (texto), color pleno a la derecha */
    --v2s-hero-overlay: linear-gradient(97deg, rgba(10, 22, 32, 0.82) 0%, rgba(10, 22, 32, 0.52) 42%, rgba(10, 22, 32, 0.10) 78%, rgba(10, 22, 32, 0.04) 100%);
    --v2s-hero-em: rgba(255, 255, 255, 0.75);
    --v2s-ph-grad: linear-gradient(140deg, var(--v2s-primary) 0%, var(--v2s-deep) 70%, var(--v2s-accent) 135%);
    --v2s-ph-font: var(--v2s-display);
}

/* Con color-mix: el esquema completo nace del color de marca */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .v2s--vibrante {
        --v2s-bg: color-mix(in srgb, var(--v2s-primary) 4%, #FFFFFF);
        --v2s-soft: color-mix(in srgb, var(--v2s-primary) 10%, #FFFFFF);
        --v2s-navy: color-mix(in srgb, var(--v2s-primary) 60%, #0A141C);
        --v2s-deep: color-mix(in srgb, var(--v2s-primary) 60%, #0A141C);
        --v2s-muted: color-mix(in srgb, var(--v2s-primary) 34%, #6B7680);
        --v2s-border: color-mix(in srgb, var(--v2s-primary) 14%, #FFFFFF);
        --v2s-hero-em: color-mix(in srgb, var(--v2s-accent) 55%, #FFFFFF);
        --v2s-hero-overlay: linear-gradient(
            97deg,
            color-mix(in srgb, var(--v2s-deep) 84%, transparent) 0%,
            color-mix(in srgb, var(--v2s-deep) 52%, transparent) 42%,
            color-mix(in srgb, var(--v2s-deep) 12%, transparent) 78%,
            color-mix(in srgb, var(--v2s-deep) 4%, transparent) 100%
        );
    }
}

/* Franja multicolor de marca — firma de la plantilla */
.v2s--vibrante .v2s__header { position: relative; }
.v2s--vibrante .v2s__header::before {
    content: '';
    display: block;
    height: 5px;
    background: linear-gradient(
        90deg,
        var(--v2s-primary) 0%, var(--v2s-primary) 25%,
        var(--v2s-accent) 25%, var(--v2s-accent) 50%,
        var(--v2s-stripe-3) 50%, var(--v2s-stripe-3) 75%,
        var(--v2s-stripe-4) 75%, var(--v2s-stripe-4) 100%
    );
}

/* Header luminoso con tinte de marca */
.v2s--vibrante .v2s__header {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--v2s-border);
    backdrop-filter: blur(8px);
}
.v2s--vibrante .v2s__brand { font-family: var(--v2s-display); font-weight: 800; font-size: 20px; }
.v2s--vibrante .v2s__nav-link { border-radius: 999px; font-weight: 600; }
.v2s--vibrante .v2s__nav-link:hover { background: var(--v2s-soft); color: var(--v2s-primary); }
.v2s--vibrante .v2s__cta-header { background: var(--v2s-accent); color: var(--brand-on-accent, #FFFFFF); }
.v2s--vibrante .v2s__cta-header:hover { background: var(--v2s-accent-hover); color: var(--brand-on-accent, #FFFFFF); }

/* Títulos Archivo extra bold, muy protagonistas */
.v2s--vibrante .v2s__h1,
.v2s--vibrante .v2s__h2,
.v2s--vibrante .v2s__h3 {
    font-family: var(--v2s-display);
    font-weight: 800;
    letter-spacing: -0.015em;
}
.v2s--vibrante .v2s__h1 { font-size: clamp(38px, 5.5vw, 62px); line-height: 1.06; }
.v2s--vibrante .v2s__h3 { font-size: 22px; font-weight: 700; }
.v2s--vibrante .v2s__h1 em,
.v2s--vibrante .v2s__h2 em {
    font-style: normal;
    color: var(--v2s-accent);
}

/* Hero fallback: lienzo claro con burbujas de color y marca de agua */
.v2s--vibrante .v2s__hero {
    background:
        radial-gradient(46% 62% at 92% 4%, color-mix(in srgb, var(--v2s-accent) 16%, transparent) 0%, transparent 66%),
        radial-gradient(42% 58% at 4% 90%, color-mix(in srgb, var(--v2s-primary) 18%, transparent) 0%, transparent 64%),
        linear-gradient(180deg, var(--v2s-paper) 0%, var(--v2s-bg) 100%);
    padding: 104px 0 86px;
}
.v2s--vibrante .v2s__hero:not(.v2s__hero--img) {
    position: relative;
    overflow: hidden;
}
.v2s--vibrante .v2s__hero:not(.v2s__hero--img)::after {
    content: '';
    position: absolute;
    right: -80px;
    top: 50%;
    transform: translateY(-50%) rotate(-8deg);
    width: 420px;
    height: 420px;
    opacity: 0.08;
    background: var(--v2s-isotype, none) center / contain no-repeat;
    pointer-events: none;
}
.v2s--vibrante .v2s__hero:not(.v2s__hero--img) > * { position: relative; z-index: 1; }
/* Sello discreto del isotipo en heros internos con foto (no en el home) */
.v2s--vibrante .v2s__hero--img .v2s__container:not(.v2s__hero-inner) { position: relative; }
.v2s--vibrante .v2s__hero--img .v2s__container:not(.v2s__hero-inner)::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -56px;
    width: 84px;
    height: 84px;
    opacity: 0.5;
    background: var(--v2s-isotype, none) center / contain no-repeat;
    filter: drop-shadow(0 2px 10px rgba(10, 22, 32, 0.45)) brightness(0) invert(1);
    pointer-events: none;
}

/*
 * Hero con imagen → SLIDESHOW con crossfade + Ken Burns sutil.
 * Capa base = velo + imagen 1 (siempre presente). Los pseudo-elementos montan
 * las imágenes 2 y 3 (media slots) con el mismo velo y se funden en ciclo de
 * 21s. Sin media slots, las vars caen a la imagen 1 y el ciclo es invisible.
 * El texto va en la franja izquierda del velo: legible sin tapar las fotos.
 */
.v2s--vibrante .v2s__hero--img {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-image: var(--v2s-hero-overlay), var(--v2s-hero-img);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    padding: 126px 0 106px;
}
.v2s--vibrante .v2s__hero--img::before,
.v2s--vibrante .v2s__hero--img::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    opacity: 0;
    animation: v2s-vibrante-hero-fade 21s ease-in-out infinite;
    will-change: opacity, transform;
}
.v2s--vibrante .v2s__hero--img::before {
    background-image: var(--v2s-hero-overlay), var(--v2s-hero-img-2, var(--v2s-hero-img));
    animation-delay: 7s;
}
.v2s--vibrante .v2s__hero--img::after {
    background-image: var(--v2s-hero-overlay), var(--v2s-hero-img-3, var(--v2s-hero-img));
    animation-delay: 14s;
}
@keyframes v2s-vibrante-hero-fade {
    0% { opacity: 0; transform: scale(1); }
    6% { opacity: 1; }
    33% { opacity: 1; transform: scale(1.05); }
    40% { opacity: 0; transform: scale(1.06); }
    100% { opacity: 0; transform: scale(1); }
}
.v2s--vibrante .v2s__hero--img .v2s__hero-inner { position: relative; z-index: 2; max-width: 640px; margin-left: 0; }
.v2s--vibrante .v2s__hero--img .v2s__h1 { text-shadow: 0 2px 24px rgba(10, 22, 32, 0.35); }
.v2s--vibrante .v2s__hero--img .v2s__lead { text-shadow: 0 1px 14px rgba(10, 22, 32, 0.35); }
.v2s--vibrante .v2s__hero--img .v2s__eyebrow { color: var(--v2s-hero-em); }
.v2s--vibrante .v2s__hero--img .v2s__eyebrow::before { background: var(--v2s-hero-em); }

/* Eyebrow con sello: usa el isotipo si la instancia lo subió; si no, barrita */
.v2s--vibrante .v2s__eyebrow,
.v2s--vibrante .v2s__item-card-eyebrow {
    color: var(--v2s-primary);
    font-weight: 700;
    letter-spacing: 0.14em;
}
.v2s--vibrante .v2s__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.v2s--vibrante .v2s__eyebrow::before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 3px;
    border-radius: 3px;
    background: var(--v2s-accent);
}
@supports (background-image: var(--v2s-isotype)) {
    .v2s--vibrante .v2s__eyebrow::before,
    .v2s--vibrante .v2s__hero--img .v2s__eyebrow::before {
        width: 20px;
        height: 20px;
        border-radius: 0;
        background: var(--v2s-isotype, linear-gradient(0deg, var(--v2s-accent), var(--v2s-accent))) center / contain no-repeat;
    }
}

/* Secciones alternadas con tinte suave de marca y marca de agua */
.v2s--vibrante .v2s__section { padding: var(--v2s-section-pad, 76px) 0; }
.v2s--vibrante .v2s__section-alt {
    position: relative;
    overflow: hidden;
    background: var(--v2s-section-alt-bg, var(--v2s-soft));
}
.v2s--vibrante .v2s__section-alt::after {
    content: '';
    position: absolute;
    left: -110px;
    bottom: -110px;
    width: 360px;
    height: 360px;
    transform: rotate(10deg);
    opacity: 0.055;
    background: var(--v2s-isotype, none) center / contain no-repeat;
    pointer-events: none;
}
.v2s--vibrante .v2s__section-alt > * { position: relative; z-index: 1; }

/* Cards orgánicas: radios asimétricos y filete superior rotando por la paleta */
.v2s--vibrante .v2s__card,
.v2s--vibrante .v2s__item-card {
    border-radius: var(--v2s-organic-a);
    border-top: 4px solid var(--v2s-primary);
}
.v2s--vibrante .v2s__item-card:nth-of-type(4n+2) { border-radius: var(--v2s-organic-b); border-top-color: var(--v2s-accent); }
.v2s--vibrante .v2s__item-card:nth-of-type(4n+3) { border-radius: var(--v2s-organic-c); border-top-color: var(--v2s-stripe-3); }
.v2s--vibrante .v2s__item-card:nth-of-type(4n) { border-radius: var(--v2s-organic-d); border-top-color: var(--v2s-stripe-4); }
.v2s--vibrante .v2s__item-card-cover img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.v2s--vibrante .v2s__item-card:hover {
    box-shadow: 0 22px 54px rgba(20, 40, 56, 0.18);
    transform: translateY(-5px);
}
.v2s--vibrante .v2s__item-card:hover .v2s__item-card-cover img { transform: scale(1.045); }
.v2s--vibrante .v2s__item-card-title { font-family: var(--v2s-display); font-weight: 700; font-size: 20px; }
.v2s--vibrante .v2s__item-card-eyebrow { color: var(--v2s-accent-hover); }
.v2s--vibrante .v2s__item-card-cover--ph span { color: rgba(255, 255, 255, 0.85); font-weight: 700; }

/* Banda KPI tipo mosaico: fondo suave con marca de agua y tarjetas plenas */
.v2s--vibrante .v2s__section--kpis {
    position: relative;
    overflow: hidden;
    background: var(--v2s-soft);
    padding: 72px 0;
}
.v2s--vibrante .v2s__section--kpis::after {
    content: '';
    position: absolute;
    right: -90px;
    top: -70px;
    width: 380px;
    height: 380px;
    transform: rotate(8deg);
    opacity: 0.07;
    background: var(--v2s-isotype, none) center / contain no-repeat;
    pointer-events: none;
}
.v2s--vibrante .v2s__section--kpis > * { position: relative; z-index: 1; }
.v2s--vibrante .v2s__kpi {
    border: none;
    color: #FFFFFF;
    background: var(--v2s-primary);
    border-radius: var(--v2s-organic-a);
    padding: 26px 24px;
    box-shadow: var(--v2s-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.v2s--vibrante .v2s__kpi:nth-of-type(4n+2) { background: var(--v2s-accent); border-radius: var(--v2s-organic-b); }
.v2s--vibrante .v2s__kpi:nth-of-type(4n+3) { background: var(--v2s-stripe-3); border-radius: var(--v2s-organic-c); }
.v2s--vibrante .v2s__kpi:nth-of-type(4n) { background: var(--v2s-stripe-4); border-radius: var(--v2s-organic-d); }
.v2s--vibrante .v2s__kpi:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(20, 40, 56, 0.20); }
.v2s--vibrante .v2s__kpi-num {
    font-family: var(--v2s-display);
    font-weight: 800;
    font-size: clamp(40px, 5.5vw, 56px);
    color: #FFFFFF;
}
.v2s--vibrante .v2s__kpi-label { color: rgba(255, 255, 255, 0.92); font-size: 13px; font-weight: 600; }

/* Botones pill contundentes */
.v2s--vibrante .v2s__btn { border-radius: 999px; font-weight: 700; }
.v2s--vibrante .v2s__btn--primary { background: var(--v2s-primary); color: var(--brand-on-primary, #FFFFFF); }
.v2s--vibrante .v2s__btn--primary:hover { background: var(--v2s-primary-hover); color: var(--brand-on-primary, #FFFFFF); }
.v2s--vibrante .v2s__btn--outline { border-color: var(--v2s-primary); color: var(--v2s-primary); }
.v2s--vibrante .v2s__btn--outline:hover { background: var(--v2s-primary); color: var(--brand-on-primary, #FFFFFF); }
.v2s--vibrante .v2s__hero--img .v2s__btn--outline { border-color: rgba(255, 255, 255, 0.85); color: #FFFFFF; }
.v2s--vibrante .v2s__hero--img .v2s__btn--outline:hover { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }

/* Date badge en acento */
.v2s--vibrante .v2s__date-badge { background: var(--v2s-accent); color: var(--brand-on-accent, #FFFFFF); border-radius: 10px; }

/* Banda CTA de cierre: acento pleno con marca de agua del isotipo */
.v2s--vibrante .v2s__band-cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(52% 82% at 90% 100%, color-mix(in srgb, var(--v2s-deep) 42%, transparent) 0%, transparent 62%),
        linear-gradient(140deg, var(--v2s-accent) 0%, var(--v2s-accent-hover) 100%);
}
.v2s--vibrante .v2s__band-cta::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 340px;
    height: 340px;
    opacity: 0.10;
    background: var(--v2s-isotype, none) center / contain no-repeat;
    pointer-events: none;
}
.v2s--vibrante .v2s__band-cta > * { position: relative; z-index: 1; }
.v2s--vibrante .v2s__band-cta .v2s__btn--primary { background: #FFFFFF; color: var(--v2s-accent-hover); }
.v2s--vibrante .v2s__band-cta .v2s__btn--primary:hover { background: var(--v2s-soft); color: var(--v2s-accent-hover); }

/* Formularios redondeados con foco de marca */
.v2s--vibrante .v2s__form-field input,
.v2s--vibrante .v2s__form-field select,
.v2s--vibrante .v2s__form-field textarea { border-color: var(--v2s-border); border-radius: 10px; }
.v2s--vibrante .v2s__form-field input:focus,
.v2s--vibrante .v2s__form-field textarea:focus,
.v2s--vibrante .v2s__form-field select:focus {
    border-color: var(--v2s-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2s-primary) 18%, transparent);
}

/* Footer profundo de marca con la franja multicolor y marca de agua */
.v2s--vibrante .v2s__footer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(170deg, var(--v2s-deep) 0%, var(--v2s-navy) 100%);
    border-top: 5px solid var(--v2s-primary);
    border-image: linear-gradient(
        90deg,
        var(--v2s-primary) 0%, var(--v2s-primary) 25%,
        var(--v2s-accent) 25%, var(--v2s-accent) 50%,
        var(--v2s-stripe-3) 50%, var(--v2s-stripe-3) 75%,
        var(--v2s-stripe-4) 75%, var(--v2s-stripe-4) 100%
    ) 1;
}
.v2s--vibrante .v2s__footer::after {
    content: '';
    position: absolute;
    right: -70px;
    top: 50%;
    transform: translateY(-50%);
    width: 380px;
    height: 380px;
    opacity: 0.07;
    background: var(--v2s-isotype, none) center / contain no-repeat;
    pointer-events: none;
}
.v2s--vibrante .v2s__footer > * { position: relative; z-index: 1; }
.v2s--vibrante .v2s__footer-name { font-family: var(--v2s-display); font-weight: 800; font-size: 22px; }
.v2s--vibrante .v2s__footer-heading { color: var(--v2s-hero-em); letter-spacing: 0.14em; }
.v2s--vibrante .v2s__footer-credit { border-top-color: rgba(255, 255, 255, 0.16); }

@media (max-width: 700px) {
    .v2s--vibrante .v2s__hero { padding: 84px 0 68px; }
    .v2s--vibrante .v2s__hero--img .v2s__hero-inner { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .v2s--vibrante .v2s__hero--img::before,
    .v2s--vibrante .v2s__hero--img::after { animation: none; }
}