/* brand.css — Normalización de identidad Versailles sobre contenido Divi.
   Se carga la última en TODAS las páginas para garantizar coherencia de marca:
   colores, tipografía, botones, contraste y citas. Sólo afecta al contenido
   Divi (#main-content / .et_pb_*); las páginas limpias ya están en marca. */

:root {
    --vs-magenta: #c4365a;
    --vs-magenta-dark: #9e2b48;
    --vs-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Reset global: el <body> tenía 8px de margen por defecto (causaba gap arriba/lados) */
html, body { margin: 0 !important; padding: 0 !important; }
.vs-main { margin: 0; padding: 0; }

/* ============================================================
   TEXTURAS DE SECCIÓN — rompen el patrón plano (sutil, coherent)
   ============================================================ */
/* Secciones "soft": fondo rosa + trama de puntos de marca */
.vs-bg-soft {
    background-color: #faf7f8 !important;
    background-image: radial-gradient(rgba(196,54,90,.06) 1.2px, transparent 1.2px) !important;
    background-size: 24px 24px !important;
}
/* Malla de luz magenta (para romper secciones blancas) */
.vs-mesh {
    background:
        radial-gradient(760px 440px at -2% -12%, rgba(196,54,90,.15), transparent 60%),
        radial-gradient(640px 380px at 105% 112%, rgba(158,43,72,.11), transparent 58%),
        #ffffff;
}
/* Trama clara sobre cajas/secciones magenta (profundidad) */
.vs-courses-cta .box, .vs-cta-box, .vs-about-cta .box, .vs-numbers, .vs-course-cta2 { position: relative; overflow: hidden; }
.vs-courses-cta .box::after, .vs-cta-box::after, .vs-about-cta .box::after, .vs-numbers::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size: 26px 26px;
}
.vs-courses-cta .box > *, .vs-cta-box > *, .vs-about-cta .box > *, .vs-numbers > * { position: relative; z-index: 1; }
/* Trama magenta tenue sobre secciones oscuras (cita, hero subtítols) */
.vs-quote-band::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(rgba(196,54,90,.14) 1px, transparent 1px); background-size: 30px 30px; opacity: .55;
}
.vs-quote-band > * { position: relative; z-index: 1; }

/* ============================================================
   TIPOGRAFÍA ÚNICA EN TODA LA WEB: Montserrat (títulos y texto)
   ============================================================ */
html, body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, ul, ol, button, input, select, textarea, label, blockquote, cite, figcaption, th, td, time, strong, em, small,
.vs-header, .vs-header *, .vs-footer, .vs-footer *,
[class^="et_pb_"], [class^="et_pb_"] *, .et_pb_text, .et_pb_module {
    font-family: var(--vs-font) !important;
}

/* Selección de texto coherente en todo el sitio */
::selection { background: rgba(196,54,90,.18); color: #1a1a2e; }

/* ============================================================
   CONTENIDO DIVI -> MARCA
   ============================================================ */

/* Tipografía base y contraste de texto (Divi usa #666, poco contraste) */
body.vs-interior #main-content,
body.vs-interior #main-content .et_pb_text,
body.vs-interior #main-content p,
body.vs-interior #main-content li {
    color: #2b2b38 !important;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Open Sans', sans-serif;
}

/* Títulos -> color y peso de marca */
body.vs-interior #main-content h1,
body.vs-interior #main-content h2,
body.vs-interior #main-content h3,
body.vs-interior #main-content h4,
body.vs-interior #main-content h5,
body.vs-interior #main-content h6,
body.vs-interior #main-content .et_pb_module_header,
body.vs-interior #main-content .et_pb_title_container h1 {
    color: #14141f !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

/* Enlaces de contenido -> magenta (adiós azul Divi #2ea3f2) */
body.vs-interior #main-content a:not(.et_pb_button):not(.vs-related-card):not(.vs-course-link):not([class*="icon"]) {
    color: var(--vs-magenta-dark) !important;
    text-decoration: none;
    transition: color .2s ease;
}
body.vs-interior #main-content a:not(.et_pb_button):hover { color: var(--vs-magenta) !important; }

/* Botones Divi -> botón de marca (gradiente magenta, pastilla) */
body.vs-interior .et_pb_button,
body.vs-interior .et_pb_button:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #c4365a 0%, #9e2b48 100%) !important;
    background-color: #c4365a !important;
    border: 2px solid transparent !important;
    border-radius: 50px !important;
    padding: 13px 30px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(196,54,90,.32);
    transition: transform .2s ease, box-shadow .2s ease !important;
}
body.vs-interior .et_pb_button:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(196,54,90,.42); }
body.vs-interior .et_pb_button:after,
body.vs-interior .et_pb_button:before { color: #fff !important; }

/* Acentos azules de Divi (bordes, iconos, blockquote) -> magenta */
body.vs-interior #main-content blockquote,
body.vs-interior .et-search-form { border-color: var(--vs-magenta) !important; }
body.vs-interior #main-content blockquote { border-left: 5px solid var(--vs-magenta) !important; background: #fdf2f4; padding: 18px 24px; border-radius: 0 12px 12px 0; }

/* Iconos/numeros de módulos con color por defecto azul -> magenta */
body.vs-interior #main-content .et_pb_number_counter .percent,
body.vs-interior #main-content .et-pb-icon[style*="2ea3f2"],
body.vs-interior #main-content .et_pb_toggle_title:before { color: var(--vs-magenta) !important; }

/* Viñetas de listas Divi en magenta */
body.vs-interior #main-content ul:not(.vs-related-grid) li::marker { color: var(--vs-magenta); }

/* Coherencia de ancho de fila Divi con el resto del sitio */
body.vs-interior #main-content .et_pb_row { max-width: 1180px; }

/* Imágenes siempre responsive y sin desbordes */
body.vs-interior #main-content img { max-width: 100%; height: auto; }

/* ============================================================
   PROTECCIÓN DE CONTRASTE: secciones de fondo oscuro de Divi
   (mayor especificidad -> mantienen texto blanco legible)
   ============================================================ */
body.vs-interior #main-content .et_pb_bg_layout_dark,
body.vs-interior #main-content .et_pb_bg_layout_dark h1,
body.vs-interior #main-content .et_pb_bg_layout_dark h2,
body.vs-interior #main-content .et_pb_bg_layout_dark h3,
body.vs-interior #main-content .et_pb_bg_layout_dark h4,
body.vs-interior #main-content .et_pb_bg_layout_dark h5,
body.vs-interior #main-content .et_pb_bg_layout_dark h6,
body.vs-interior #main-content .et_pb_bg_layout_dark p,
body.vs-interior #main-content .et_pb_bg_layout_dark li,
body.vs-interior #main-content .et_pb_bg_layout_dark span,
body.vs-interior #main-content .et_pb_bg_layout_dark .et_pb_module_header {
    color: #ffffff !important;
}
body.vs-interior #main-content .et_pb_bg_layout_dark a:not(.et_pb_button) {
    color: #ffd7e0 !important;
}

/* Foco visible accesible en toda la web */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid rgba(196,54,90,.55);
    outline-offset: 2px;
}

/* Amaga la capçalera Divi heretada (menu WordPress antic) de les pagines legacy.
   El header comu es l'unic valid: aixi es mante identic a tot el web. */
.et_pb_section--with-menu { display: none !important; }

/* Pagina 404 de marca */
.vs-404{display:flex;align-items:center;justify-content:center;min-height:62vh;padding:80px 6%;background:#faf7f8}
.vs-404-inner{text-align:center;max-width:600px}
.vs-404-code{font-size:clamp(5rem,18vw,9rem);font-weight:800;line-height:1;background:linear-gradient(135deg,#c4365a,#9e2b48);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vs-404-inner h1{font-size:clamp(1.5rem,4vw,2.2rem);color:#15151f;margin:6px 0 12px}
.vs-404-inner>p{color:#5a5a66;font-size:1.05rem;line-height:1.6;margin-bottom:28px}
.vs-404-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.vs-404-links{display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(0,0,0,.08)}
.vs-404-links a{color:#9e2b48;font-weight:600;text-decoration:none;font-size:.95rem}
.vs-404-links a:hover{text-decoration:underline}