/* ═══════════════════════════════════════════════════════════════
   HELGA · TEMA MAGENTA & ÍNDIGO
   Basado en la maqueta de referencia
   Cargar DESPUÉS de helga-premium.css, helga-menu.css y helga-text-fx.css
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Poppins:wght@200;300;400;500;600&display=swap');

/* ───────────────────────────────────────────────
   TOKENS — se reescriben los del tema original
   ─────────────────────────────────────────────── */
:root {
    /* Magenta de marca */
    --rose:        #D51E8C;   /* magenta principal */
    --rose-lt:     #F45FB4;   /* magenta claro / glow */
    --rose-dk:     #9E1268;   /* magenta profundo */
    --rose-glow:   rgba(213, 30, 140, .55);
    --magenta-2:   #7B1FA2;   /* violeta para degradados */
    --plum:        #7C1A5C;   /* títulos sobre fondo claro */

    /* Índigo profundo */
    --night:       #150C33;
    --night-2:     #1F1147;
    --night-3:     #2A1758;

    /* Claros */
    --cream:       #FAF4F7;
    --beige:       #F2E8EE;
    --sand:        #E6D4E0;
    --paper:       #FFFFFF;

    /* Texto */
    --ink:         #241634;
    --graphite:    #3B2B4D;
    --slate:       #6E5F80;
    --mist:        #A99BB8;

    /* Partículas del hero (lo lee el JS) */
    --particle-rgb: 213, 30, 140;

    /* Tipografía */
    --serif: 'Playfair Display', Georgia, serif;
    --sans:  'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Esquinas redondeadas, como en la referencia */
    --radius:      14px;
    --radius-pill: 999px;

    /* Degradados */
    --grad-magenta: linear-gradient(120deg, #D51E8C 0%, #A5199B 55%, #7B1FA2 100%);
    --grad-glow:    radial-gradient(circle, rgba(244,95,180,.55), transparent 70%);

    --shadow-glow: 0 14px 46px -10px var(--rose-glow);
    --shadow-ring: 0 0 0 1px rgba(213,30,140,.28), 0 10px 34px -8px rgba(213,30,140,.42);
}

/* ───────────────────────────────────────────────
   TIPOGRAFÍA BASE
   ─────────────────────────────────────────────── */
body { font-family: var(--sans); font-weight: 300; letter-spacing: .002em; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -.012em;
    color: var(--plum);
}
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: #fff; }

.eyebrow {
    color: var(--rose);
    font-weight: 600;
    letter-spacing: .24em;
}
.eyebrow--light { color: var(--rose-lt); }

.rule {
    height: 2px;
    background: var(--grad-magenta);
    border-radius: 2px;
}
.rule--light { background: linear-gradient(90deg, var(--rose-lt), transparent); }

.lead { color: var(--slate); }
.serif-quote { color: var(--slate); font-style: italic; }

::selection { background: var(--rose); color: #fff; }
::-webkit-scrollbar-thumb { background: var(--sand); }
::-webkit-scrollbar-thumb:hover { background: var(--rose); }

/* ───────────────────────────────────────────────
   TOPBAR — franja índigo
   ─────────────────────────────────────────────── */
.topbar {
    background: var(--night);
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: rgba(255,255,255,.55);
}
.topbar i { color: var(--rose-lt); }

/* ───────────────────────────────────────────────
   NAVBAR — oscura, como la referencia
   ─────────────────────────────────────────────── */
.nav {
    background: rgba(21, 12, 51, .92) !important;
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav.is-stuck {
    background: rgba(21, 12, 51, .97) !important;
    border-bottom-color: rgba(213,30,140,.22);
    box-shadow: 0 6px 34px rgba(21,12,51,.5);
}
.nav__logo { color: #fff; }
.nav__logo em { color: var(--rose-lt); }
.nav__link { color: rgba(255,255,255,.78) !important; letter-spacing: .14em; font-weight: 400; }
.nav__link:hover, .nav__link.is-active { color: #fff !important; }
.nav__link::after { background: var(--grad-magenta); height: 2px; border-radius: 2px; }

.nav__toggle span { background: rgba(255,255,255,.9); }

/* CTA en píldora con degradado y resplandor */
.nav__cta,
.btn--solid {
    background: var(--grad-magenta) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    color: #fff !important;
    box-shadow: 0 6px 22px -6px var(--rose-glow);
    font-weight: 500;
}
.nav__cta::before, .btn--solid::before { background: var(--rose-dk); }
.nav__cta:hover, .btn--solid:hover { box-shadow: var(--shadow-glow); }

/* ───────────────────────────────────────────────
   BOTONES
   ─────────────────────────────────────────────── */
.btn { border-radius: var(--radius-pill); font-weight: 500; letter-spacing: .1em; }

.btn--ghost {
    border: 1px solid var(--rose);
    color: var(--rose);
    background: transparent;
}
.btn--ghost::before { background: var(--grad-magenta); }
.btn--ghost:hover { color: #fff; border-color: transparent; box-shadow: var(--shadow-glow); }

.btn--light { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.9); }
.btn--light::before { background: var(--grad-magenta); }
.btn--light:hover { border-color: transparent; }

.btn--white { background: #fff; color: var(--rose); }
.btn--white::before { background: var(--night); }

.link-sweep { color: var(--rose); font-weight: 500; }

/* ───────────────────────────────────────────────
   HERO — fondo dividido: claro a la izquierda,
   índigo a la derecha, como en la maqueta
   ─────────────────────────────────────────────── */
.hero { background: #FBF6F9; }

@media (min-width: 992px) {
    .hero {
        background: linear-gradient(90deg,
            #FBF6F9 0%, #FBF6F9 51%,
            var(--night) 51%, var(--night-2) 100%);
    }
    /* Las partículas viven solo en la mitad oscura */
    .hero__canvas { left: 51%; }
}
@media (max-width: 991px) {
    .hero__canvas { opacity: .35; }
}

.hero__blob--1 { background: radial-gradient(circle, rgba(213,30,140,.42), transparent 68%); }
.hero__blob--2 { background: radial-gradient(circle, rgba(123,31,162,.32), transparent 70%); }
.hero__blob--3 { background: radial-gradient(circle, rgba(244,95,180,.26), transparent 72%); }

@media (min-width: 992px) {
    /* Los resplandores se concentran del lado oscuro */
    .hero__blob--1 { right: -4%; }
    .hero__blob--2 { left: 55%; }
    .hero__blob--3 { left: 62%; }
}

.hero__lines span { background: linear-gradient(180deg, transparent, rgba(213,30,140,.12), transparent); }

/* Texto del hero sobre fondo claro */
.hero__tag { color: var(--slate); font-weight: 500; letter-spacing: .22em; }
.hero__tag::before { background: var(--grad-magenta); height: 2px; }

.hero__sub {
    color: var(--rose);
    font-style: normal;
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.hero__title { color: var(--plum); font-weight: 600; }
.hero__title .accent {
    background: var(--grad-magenta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: normal;
}

.hero__desc { color: var(--slate); }
.hero__desc strong { color: var(--rose); font-weight: 600; }

.hero__badges .badge {
    color: var(--rose);
    background: rgba(213,30,140,.07);
    border: 1px solid rgba(213,30,140,.24);
    border-radius: var(--radius-pill);
    font-weight: 500;
}
.hero__badges .badge:hover {
    background: var(--grad-magenta);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px -6px var(--rose-glow);
}

.hero__scroll { color: var(--slate); }
.hero__scroll-line { background: rgba(124,26,92,.18); }

/* Retrato con marco redondeado y halo */
.hero__portrait {
    border-radius: var(--radius);
    box-shadow: 0 30px 80px -30px rgba(213,30,140,.5);
}
.hero__portrait-frame { border-color: var(--rose-lt); }

@media (max-width: 991px) {
    .hero__title, .hero__desc, .hero__tag { text-align: left; }
}

/* ───────────────────────────────────────────────
   CIFRAS — banda índigo
   ─────────────────────────────────────────────── */
.stats { background: var(--night); border-block-color: rgba(255,255,255,.07); }
.stats .stat:hover { background: rgba(255,255,255,.03); }
.stats .stat::after { background: rgba(255,255,255,.1); }
.stat__num {
    background: linear-gradient(120deg, #fff 20%, var(--rose-lt) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}
.stat__label { color: rgba(255,255,255,.5); }
@media (max-width: 767px) { .stats .stat:nth-child(-n+2) { border-bottom-color: rgba(255,255,255,.08); } }

/* ───────────────────────────────────────────────
   SECCIONES
   ─────────────────────────────────────────────── */
.section--cream { background: var(--cream); }
.section--dark  { background: var(--night); }

/* ───────────────────────────────────────────────
   TARJETAS — redondeadas, con ícono circular y halo
   ─────────────────────────────────────────────── */
.card {
    border-radius: var(--radius);
    border-color: var(--sand);
    box-shadow: 0 2px 14px rgba(124,26,92,.045);
}
.card::before {
    background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
                rgba(213,30,140,.11), transparent 62%);
}
.card::after { background: var(--grad-magenta); border-radius: var(--radius) var(--radius) 0 0; }
.card:hover { border-color: rgba(213,30,140,.42); box-shadow: var(--shadow-glow); }

.card__icon {
    border-radius: 50%;
    background: rgba(213,30,140,.08);
    color: var(--rose);
    box-shadow: inset 0 0 0 1px rgba(213,30,140,.2);
}
.card:hover .card__icon {
    background: var(--grad-magenta);
    color: #fff;
    box-shadow: 0 8px 26px -6px var(--rose-glow), inset 0 0 0 1px rgba(255,255,255,.25);
    transform: translateY(-4px) scale(1.05) rotate(0);
}
.card__num {
    background: var(--grad-magenta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .28;
    font-weight: 600;
}
.card:hover .card__num { opacity: .6; }
.card h4 { color: var(--plum); }
.card ul li::before { background: var(--rose); width: 6px; height: 2px; border-radius: 2px; }

.card--dark {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.09);
}
.card--dark h4 { color: #fff; }
.card--dark .card__icon { background: var(--grad-magenta); color: #fff; box-shadow: 0 8px 24px -8px var(--rose-glow); }
.card--dark:hover { border-color: rgba(213,30,140,.5); }

/* ───────────────────────────────────────────────
   IMÁGENES
   ─────────────────────────────────────────────── */
.media { border-radius: var(--radius); }
.media__badge {
    background: var(--grad-magenta);
    border-radius: var(--radius);
    box-shadow: -10px 10px 34px rgba(213,30,140,.35);
}
.media__frame { border-color: var(--rose-lt); border-radius: var(--radius); }

/* ───────────────────────────────────────────────
   TIMELINE
   ─────────────────────────────────────────────── */
.tl-item__dot {
    background: var(--grad-magenta);
    border-radius: 50%;
    box-shadow: 0 6px 18px -6px var(--rose-glow);
}
.tl-item:hover .tl-item__dot { box-shadow: 0 0 0 6px rgba(213,30,140,.13), 0 6px 18px -6px var(--rose-glow); }
.tl-item h6 { color: var(--plum); font-weight: 600; }
.timeline::before { background: var(--sand); }

/* ───────────────────────────────────────────────
   CONFERENCIAS
   ─────────────────────────────────────────────── */
.conf { border-radius: var(--radius); }
.conf__veil { background: linear-gradient(to top, rgba(21,12,51,.95) 0%, rgba(21,12,51,.4) 45%, transparent 75%); }
.conf__caption span { color: var(--rose-lt); }
.conf__mark { border-radius: 50%; border-color: rgba(244,95,180,.5); }

.achievements li i { color: var(--rose-lt); }

/* ───────────────────────────────────────────────
   MARQUEE Y MEMBRESÍAS
   ─────────────────────────────────────────────── */
.marquee { border-block-color: var(--sand); }
.marquee__item b {
    background: var(--grad-magenta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.memb { border-radius: var(--radius); border-color: var(--sand); }
.memb::before { background: var(--cream); }
.memb:hover { border-color: var(--rose); box-shadow: var(--shadow-ring); }
.memb b {
    background: var(--grad-magenta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* ───────────────────────────────────────────────
   CONTACTO Y FORMULARIO
   ─────────────────────────────────────────────── */
.contact-item {
    border-radius: var(--radius);
    border-color: var(--sand);
    border-left: 3px solid transparent;
    border-image: var(--grad-magenta) 1;
    border-image-slice: 1;
}
/* Fallback simple para navegadores sin border-image en este contexto */
@supports not (border-image: linear-gradient(#000,#000) 1) {
    .contact-item { border-left: 3px solid var(--rose); }
}
.contact-item i { color: var(--rose); }
.contact-item h6 { color: var(--rose); font-weight: 600; }
.contact-item p { color: var(--ink); }
.contact-item:hover { box-shadow: var(--shadow-ring); }

.form-panel { border-radius: var(--radius); border-color: var(--sand); }
.field input, .field select, .field textarea {
    border-radius: 10px;
    border-color: var(--sand);
}
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(213,30,140,.14);
}
.field label { color: var(--slate); font-weight: 500; }

/* ───────────────────────────────────────────────
   BANDA CTA — degradado magenta a violeta
   ─────────────────────────────────────────────── */
.cta-band { background: var(--grad-magenta); }
.cta-band::before { background: radial-gradient(circle, rgba(255,255,255,.2), transparent 65%); }
.cta-band h3 { color: #fff; }

/* ───────────────────────────────────────────────
   CABECERA DE PÁGINAS INTERNAS
   ─────────────────────────────────────────────── */
.page-head { background: linear-gradient(135deg, var(--night) 0%, var(--night-3) 100%); }
.page-head::after { background: var(--grad-magenta); height: 3px; }
.crumbs span { color: var(--rose-lt); }

/* ───────────────────────────────────────────────
   SOCIAL STRIP Y PIE — pie claro, como la referencia
   ─────────────────────────────────────────────── */
.social-strip { background: var(--night-2); }
.social-strip a:hover { color: var(--rose-lt); }

.footer {
    background: var(--paper);
    color: var(--slate);
    border-top: 1px solid var(--sand);
}
.footer__brand { color: var(--plum); font-weight: 600; }
.footer__brand em {
    background: var(--grad-magenta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.footer h6 { color: var(--rose); font-weight: 600; }
.footer p, .footer a, .footer li { color: var(--slate); }
.footer a:hover { color: var(--rose); }
.footer i { color: var(--rose); }
.footer .footer__divider,
.footer__bottom { border-color: var(--sand); color: var(--mist); }
.footer__bottom a { color: var(--slate); }

.social-btn {
    border-radius: 50%;
    border-color: var(--sand);
    color: var(--rose);
}
.social-btn:hover {
    background: var(--grad-magenta);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 22px -6px var(--rose-glow);
}
/* Dentro del menú oscuro los iconos siguen siendo claros */
.menu-social .social-btn { border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.7); }
.menu-social .social-btn:hover { color: #fff; }

/* ───────────────────────────────────────────────
   BOTÓN VOLVER ARRIBA
   ─────────────────────────────────────────────── */
.to-top {
    background: var(--grad-magenta);
    border-radius: 50%;
    box-shadow: 0 10px 30px -8px var(--rose-glow);
}
.to-top:hover { background: var(--rose-dk); }

/* ───────────────────────────────────────────────
   MENÚ INMERSIVO
   ─────────────────────────────────────────────── */
.menu-overlay__veil {
    background:
        radial-gradient(120% 90% at 78% 18%, rgba(213,30,140,.3), transparent 62%),
        linear-gradient(180deg, rgba(21,12,51,.92) 0%, rgba(21,12,51,.8) 45%, rgba(21,12,51,.95) 100%);
}
.menu-nav__link:hover, .menu-nav__link:focus-visible { color: var(--rose-lt); }
.menu-nav__link::before { color: var(--rose-lt); }
.menu-nav__link .menu-nav__arrow { color: var(--rose-lt); }
.menu-nav__link.is-current { color: var(--rose-lt); }
.menu-aside__block h6 { color: var(--rose-lt); }
.menu-close { border-radius: 50%; }
.menu-close:hover { border-color: var(--rose-lt); color: var(--rose-lt); background: rgba(213,30,140,.12); }
.menu-brand em { color: var(--rose-lt); }
.menu-videotag i { color: var(--rose-lt); }

/* ───────────────────────────────────────────────
   EFECTOS DE TEXTO
   ─────────────────────────────────────────────── */
[data-text="shimmer"].fx-sweep {
    background-image: linear-gradient(100deg,
        currentColor 0%, currentColor 38%,
        var(--rose) 47%, var(--rose-lt) 52%, var(--rose) 57%,
        currentColor 66%, currentColor 100%);
}
.fx-underline path { stroke: var(--rose); }
.fx-caret { background: var(--rose); }

/* ───────────────────────────────────────────────
   CURSOR
   ─────────────────────────────────────────────── */
.cursor-dot { background: var(--rose); }
.cursor-ring { border-color: var(--rose); }
body.cursor-active .cursor-ring { background: rgba(213,30,140,.08); }

/* ───────────────────────────────────────────────
   RESPLANDOR REUTILIZABLE
   Añade class="glow-ring" a cualquier ícono circular
   ─────────────────────────────────────────────── */
.glow-ring {
    position: relative;
    border-radius: 50%;
}
.glow-ring::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: var(--grad-glow);
    opacity: .5;
    z-index: -1;
    filter: blur(6px);
    pointer-events: none;
}