/* ==================== 1. CONFIGURACIÓN BASE ==================== */
:root {
    --cursor-size: 20px;
    --cursor-hover-size: 80px;

    /* PALETA: BLANCO + AZUL (Light Theme) */
    --gold: #2563eb;          /* Azul principal (alias histórico) */
    --gold-dim: #1d4ed8;      /* Azul profundo */
    --dark-bg: #f7fbff;       /* Fondo principal (blanco azulado) */
    --dark-secondary: #ffffff;/* Superficies */
    --dark-tertiary: #eff6ff; /* Tinte sutil azul */
    --text-main: #0f172a;     /* Texto principal */

    --text-muted: rgba(30, 41, 59, 0.92);
    --border: rgba(15, 23, 42, 0.10);
    --border-strong: rgba(15, 23, 42, 0.16);
    --surface: rgba(255, 255, 255, 0.78);
    --surface-strong: rgba(255, 255, 255, 0.92);
    --shadow: 0 18px 50px rgba(2, 6, 23, 0.10);
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--dark-bg);
    background-image:
      radial-gradient(900px circle at 15% 10%, rgba(37, 99, 235, 0.14), transparent 55%),
      radial-gradient(700px circle at 85% 20%, rgba(14, 165, 233, 0.10), transparent 55%),
      radial-gradient(900px circle at 50% 110%, rgba(37, 99, 235, 0.10), transparent 55%);
    color: var(--text-main);
    cursor: none; 
    overflow-x: hidden; 
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

h1, h2, h3, h4, .font-heading, .heading { 
    font-family: 'Space Grotesk', sans-serif; 
}

::-webkit-scrollbar { width: 0px; background: transparent; }


/* ==================== 1.B SECCIONES LIGHT (BLANCO/AZUL) ==================== */
.section-surface{
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(239,246,255,0.78));
  border-top: 1px solid rgba(15,23,42,0.08);
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
.section-surface::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px circle at 20% 0%, rgba(37,99,235,0.10), transparent 55%),
    radial-gradient(700px circle at 85% 35%, rgba(14,165,233,0.08), transparent 55%);
  pointer-events:none;
}
.section-surface > *{ position: relative; z-index: 1; }

/* Normaliza textos Tailwind “dark” dentro de secciones claras */
.section-surface .text-white{ color: var(--text-main) !important; }
.section-surface .text-gray-400{ color: rgba(51,65,85,0.82) !important; }
.section-surface .text-gray-300{ color: rgba(51,65,85,0.78) !important; }
.section-surface .border-white\/10,
.section-surface .border-white\/5{ border-color: rgba(15,23,42,0.10) !important; }
.section-surface .bg-black\/40,
.section-surface .bg-black\/50,
.section-surface .bg-black\/30,
.section-surface .bg-black\/20,
.section-surface .bg-gray-900\/40{
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(10px);
}
/* ==================== 2. UTILIDADES DE TEXTO Y EFECTOS ==================== */

/* Text Glow (Azul) */
.text-gold-glow { 
    color: var(--gold);
    text-shadow: 0 0 30px rgba(37, 99, 235, 0.25), 0 0 12px rgba(37, 99, 235, 0.35);
    display: inline-block; 
    font-weight: 800; 
}

/* Clip Text (Adaptado a Oro/Blanco) */
.clip-text {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    /* Gradiente azul suave */
    background-image: linear-gradient(to right, #0f172a, var(--gold));
}

/* Film Grain */
.grain-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    pointer-events: none; z-index: 9998; opacity: 0.025; 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/76/Noise_overlay_image.png"); 
    mix-blend-mode: soft-light;
}

/* ==================== 3. SCROLL STORY (KEN BURNS & PANELES) ==================== */

#pinContainer { 
    width: 100%; height: 100vh; 
    position: relative; overflow: hidden; 
    background: var(--dark-bg);
}

.panel { 
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%; 
    display: flex; align-items: center; justify-content: center; 
    opacity: 0; z-index: 1; 
}
.panel.first { opacity: 1; z-index: 1; }

/* Fondos de Fase (claros, azulados) */
.bg-fase1 { background: radial-gradient(circle at center, #ffffff, #eef6ff); }
.bg-fase2 { background: radial-gradient(circle at center, #ffffff, #e9f3ff); }
.bg-fase3 { background: radial-gradient(circle at center, #ffffff, #e7f0ff); }
.bg-fase4 { background: radial-gradient(circle at center, #ffffff, #eaf7ff); }

.overlay { background: rgba(255, 255, 255, 0.55); position: absolute; inset: 0; }

.story-bg { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    object-fit: cover; z-index: -1; 
    transform: scale(1); transition: transform 10s ease; 
    filter: brightness(0.96) contrast(1.05) saturate(1.06);
    will-change: transform;
}
.panel.active .story-bg { transform: scale(1.1); }

/* ==================== 4. TARJETAS (SPOTLIGHT & FLIP) ==================== */

/* Spotlight Effect */
.spotlight-card { 
    position: relative; overflow: hidden; 
    --mouse-x: 0px; --mouse-y: 0px; 
}
.spotlight-card::before { 
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    opacity: 0; transition: opacity 0.5s; 
    background: radial-gradient(650px circle at var(--mouse-x) var(--mouse-y), rgba(37, 99, 235, 0.12), transparent 42%);
    pointer-events: none; z-index: 10; will-change: opacity;
}
.spotlight-card:hover::before { opacity: 1; }

/* ESTILOS FLIP CARD */
.flip-card {
    background-color: transparent;
    perspective: 1000px;
    height: 400px;
    width: 100%;
    cursor: pointer;
}

.flip-inner {
    position: relative; width: 100%; height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-inner {
    transform: rotateY(180deg);
}

.flip-front, .flip-back {
    position: absolute; width: 100%; height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.flip-front {
    background-color: var(--dark-secondary);
}
.flip-front img {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.92) contrast(1.05) saturate(1.05);
}

.flip-back {
    background: linear-gradient(to bottom, #ffffff, #eef6ff);
    color: var(--text-main);
    transform: rotateY(180deg);
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    padding: 2rem;
    border: 1px solid rgba(37, 99, 235, 0.22);
}

/* ==================== 5. LIGHTBOX ==================== */

.lightbox-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#lightbox-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.95); /* Fondo más oscuro */
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none; 
    transition-property: opacity;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}

#lightbox-modal.lightbox-open {
    opacity: 1;
    pointer-events: auto;
}

/* ==================== 6. UI: CURSOR, PRELOADER, FAB ==================== */

#custom-cursor { 
    position: fixed; top: 0; left: 0; 
    width: var(--cursor-size); height: var(--cursor-size); 
    border: 1px solid rgba(37, 99, 235, 0.32);
    background: rgba(37, 99, 235, 0.08);
    border-radius: 50%; pointer-events: none; z-index: 9999; 
    transform: translate(-50%, -50%); 
    transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1), 
                height 0.3s cubic-bezier(0.19, 1, 0.22, 1), 
                background 0.3s; 
    backdrop-filter: blur(2px); 
    will-change: width, height, transform, top, left;
}
#custom-cursor.hovered { 
    width: var(--cursor-hover-size); height: var(--cursor-hover-size); 
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.42);
    mix-blend-mode: screen; 
}

/* Ticker */
.ticker-wrap { 
    width: 100%; overflow: hidden; 
    background-color: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid var(--border);
    white-space: nowrap; 
}
.ticker { display: inline-block; padding-left: 100%; animation: ticker 35s linear infinite; }
@keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

/* Cards hover */
.card-split { transition: flex 0.5s ease; }
.card-split:hover { flex: 2; }

/* Preloader */
#preloader { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    /* IMPORTANTE: fondo NO transparente durante carga (evita FOUC) */
    background-color: #f7fbff;
    background:
      radial-gradient(1200px circle at 30% 20%, rgba(37, 99, 235, 0.18), transparent 55%),
      radial-gradient(900px circle at 80% 70%, rgba(14, 165, 233, 0.12), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,1), rgba(239,246,255,0.92));
    z-index: 10000;
    display: flex; justify-content: center; align-items: center; flex-direction: column; 
}
.loader-bar { width: 200px; height: 2px; background: #333; margin-top: 20px; position: relative; overflow: hidden; }
/* Progreso en Oro */
.loader-bar { background: rgba(15, 23, 42, 0.12); }
.loader-progress { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--gold); transition: width 0.2s; }

/* Progress Bar */
#reading-progress { 
    position: fixed; top: 0; left: 0; height: 3px; 
    background: var(--gold); 
    z-index: 9999; width: 0%; transition: width 0.1s; 
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.28);
}

/* FAB */
.fab { 
    position: fixed; bottom: 30px; right: 30px; z-index: 50; 
    width: 60px; height: 60px; 
    background: var(--gold);
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.25);
    transition: transform 0.3s, background 0.3s; 
    color: #fff;
    cursor: none; 
}

.fab:hover { 
    transform: scale(1.1); 
    background: var(--gold-dim);
}



/* Animación para que las luces se muevan suavemente "flotando" */
 @keyframes float-slow {
        0%, 100% { transform: translate(0, 0) scale(1); }
        33% { transform: translate(30px, -50px) scale(1.1); }
        66% { transform: translate(-20px, 20px) scale(0.9); }
    }
    @keyframes pulse-slow {
        0%, 100% { opacity: 0.5; transform: scale(1); }
        50% { opacity: 0.8; transform: scale(1.1); }
    }
    @keyframes spin-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .animate-float-slow { animation: float-slow 15s ease-in-out infinite; }
    .animate-pulse-slow { animation: pulse-slow 8s ease-in-out infinite; }
    .animate-spin-slow { animation: spin-slow 40s linear infinite; }


/* ==================== 7. SELENTIA: EXTRA UI ==================== */

/* Anchor offset (fixed ticker/progress) */
section[id] { scroll-margin-top: 96px; }

/* CTA buttons */
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #fff !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.24);
}
.btn-gold:hover { filter: brightness(1.05); transform: translateY(-1px); }

.btn-ghost {
  border: 1px solid rgba(37, 99, 235, 0.26);
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: rgba(37, 99, 235, 0.42); }

/* FAQ */
.faq details {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
}
.faq details[open] { border-color: rgba(37, 99, 235, 0.30); }
.faq summary {
  cursor: none;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display:none; }
.faq .faq-q { font-weight: 800; color: var(--text-main); }
.faq .faq-a { color: var(--text-muted); line-height: 1.7; margin-top: .75rem; }

/* Small label */
.kicker {
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.72rem;
  color: rgba(37, 99, 235, 0.95);
}


/* ==================== 8. LIGHT THEME OVERRIDES (Tailwind tokens) ==================== */

/* Tipografía y suavizado general */
.selentia-light {
  color: var(--text-main);
}

/* Convertir “amarillos” del markup a azul (sin tocar HTML) */
.selentia-light [class*="text-yellow-"] { color: var(--gold) !important; }
.selentia-light [class*="bg-yellow-"] { background-color: rgba(37, 99, 235, 0.14) !important; }
.selentia-light [class*="border-yellow-"] { border-color: rgba(37, 99, 235, 0.22) !important; }
.selentia-light [class*="shadow-\["] { box-shadow: var(--shadow) !important; }

/* Texto: de grises Tailwind a “slate” */
.selentia-light [class~="text-white"] { color: var(--text-main) !important; }
.selentia-light [class~="text-gray-200"] { color: rgba(30, 41, 59, 0.92) !important; }
.selentia-light [class~="text-gray-300"] { color: rgba(30, 41, 59, 0.86) !important; }
.selentia-light [class~="text-gray-400"] { color: rgba(51, 65, 85, 0.82) !important; }
.selentia-light [class~="text-gray-500"] { color: rgba(71, 85, 105, 0.80) !important; }
.selentia-light [class~="text-gray-600"] { color: rgba(71, 85, 105, 0.84) !important; }

/* Fondos oscuros del markup -> superficies claras */
.selentia-light [class~="bg-[#0a0a0a]"] { background-color: var(--dark-bg) !important; }
.selentia-light [class~="bg-[#050505]"] { background-color: var(--dark-bg) !important; }
.selentia-light [class~="bg-black"] { background-color: var(--dark-secondary) !important; }
.selentia-light :not(#lightbox-modal)[class~="bg-black/90"] { background-color: rgba(255, 255, 255, 0.86) !important; }
.selentia-light :not(#lightbox-modal)[class~="bg-black/80"] { background-color: rgba(255, 255, 255, 0.88) !important; }
.selentia-light :not(#lightbox-modal)[class~="bg-black/60"] { background-color: rgba(255, 255, 255, 0.76) !important; }
.selentia-light :not(#lightbox-modal)[class~="bg-black/50"] { background-color: rgba(255, 255, 255, 0.74) !important; }
.selentia-light :not(#lightbox-modal)[class~="bg-black/40"] { background-color: rgba(255, 255, 255, 0.72) !important; }
.selentia-light [class~="bg-gray-900/40"] { background-color: rgba(255, 255, 255, 0.76) !important; }

/* Gradientes oscuros -> gradiente claro azul */
.selentia-light [class~="bg-gradient-to-b"] {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.10), rgba(255, 255, 255, 1)) !important;
}

/* Bordes “blancos” de Tailwind -> borde slate */
.selentia-light [class*="border-white/"] { border-color: var(--border) !important; }
.selentia-light [class~="border-gray-900"] { border-color: var(--border) !important; }

/* Chips y badges */
.selentia-light [class~="bg-yellow-500"] { background-color: var(--gold) !important; }
/* Solo invertimos texto cuando el fondo (antes amarillo) es sólido */
.selentia-light .bg-yellow-500.text-black { color: #ffffff !important; }

/* Ajustes puntuales */
.selentia-light .spotlight-card,
.selentia-light .card-split {
  box-shadow: var(--shadow) !important;
}

/* Footer limpio */
.selentia-light footer {
  background: rgba(255, 255, 255, 0.88) !important;
  border-top: 1px solid var(--border) !important;
}

/* Lightbox: mantener oscuro (y texto blanco) */
#lightbox-modal { background-color: rgba(0, 0, 0, 0.92); }
#lightbox-modal .text-white { color: #fff !important; }



/* ==================== 9. PREMIUM: GALERÍA & SUPERFICIES ==================== */

/* Galería premium (sin dependencias externas) */
.premium-gallery{
  display:grid;
  grid-template-columns: 1.35fr 0.95fr;
  gap: 1.25rem;
  align-items: stretch;
}
@media (max-width: 1024px){
  .premium-gallery{ grid-template-columns: 1fr; }
}

.pg-stage{
  position: relative;
  border-radius: 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(239,246,255,0.60));
  box-shadow: var(--shadow);
  min-height: 380px;
  outline: none;
}
.pg-stage:focus-visible{
  box-shadow: 0 0 0 4px rgba(37,99,235,0.18), var(--shadow);
  border-color: rgba(37,99,235,0.32);
}
.pg-stage::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px circle at 20% 0%, rgba(37,99,235,0.18), transparent 55%),
    radial-gradient(700px circle at 80% 65%, rgba(14,165,233,0.12), transparent 55%);
  opacity: 0.95;
  pointer-events:none;
  z-index: 1;
}

.pg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 420ms ease, transform 700ms ease;
  filter: saturate(1.05) contrast(1.05) brightness(1.02);
  z-index: 0;
}
.pg-img.active{
  opacity: 1;
  transform: scale(1);
  z-index: 0;
}
.pg-img:hover{ transform: scale(1.012); }

.pg-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 16px 36px rgba(2,6,23,0.12);
  opacity: 0;
  pointer-events:none;
  transition: opacity 220ms ease, transform 220ms ease, background 220ms ease;
  z-index: 3;
}
.pg-stage:hover .pg-arrow{
  opacity: 1;
  pointer-events:auto;
}
.pg-prev{ left: 14px; }
.pg-next{ right: 14px; }
.pg-arrow:hover{
  background: rgba(255,255,255,0.96);
  transform: translateY(-50%) scale(1.05);
}

.pg-caption{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 70px;
  padding: 14px 16px;
  border-radius: 1.15rem;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(15,23,42,0.10);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(2,6,23,0.12);
  z-index: 3;
}
.pg-caption-top{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: .75rem;
  margin-bottom: .35rem;
}
.pg-badge{
  display:inline-flex;
  align-items:center;
  gap: .4rem;
  padding: .36rem .64rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(37,99,235,0.12);
  color: rgba(37,99,235,0.96);
  border: 1px solid rgba(37,99,235,0.22);
}
.pg-count{
  font-size: .76rem;
  color: rgba(71,85,105,0.86);
  font-weight: 800;
}
.pg-caption-title{
  font-weight: 950;
  color: var(--text-main);
  font-size: 1.08rem;
  line-height: 1.25;
}
.pg-caption-sub{
  color: var(--text-muted);
  font-size: .86rem;
  margin-top: .25rem;
  line-height: 1.45;
}

.pg-thumbs{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display:flex;
  gap: 10px;
  z-index: 3;
}
.pg-thumb{
  width: 92px;
  height: 56px;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.65);
  box-shadow: 0 12px 26px rgba(2,6,23,0.12);
  opacity: 0.88;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.pg-thumb img{ width:100%; height:100%; object-fit: cover; display:block; filter: saturate(1.02) contrast(1.03); }
.pg-thumb:hover{ transform: translateY(-2px); opacity: 1; }
.pg-thumb.active{
  opacity: 1;
  border-color: rgba(37,99,235,0.55);
  box-shadow: 0 16px 34px rgba(37,99,235,0.18);
}

.pg-info{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.pg-info-card{
  background: rgba(255,255,255,0.80);
  border: 1px solid var(--border);
  border-radius: 1.35rem;
  padding: 16px 16px;
  box-shadow: var(--shadow);
}
.pg-info-title{
  font-weight: 950;
  color: var(--text-main);
  font-size: 1.06rem;
}
.pg-info-text{
  color: var(--text-muted);
  line-height: 1.72;
  margin-top: .35rem;
  font-size: .95rem;
}
.pg-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pg-tag{
  padding: .42rem .68rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  background: rgba(14,165,233,0.10);
  border: 1px solid rgba(14,165,233,0.18);
  color: rgba(2,132,199,0.96);
}
.pg-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pg-footnote{
  display:flex;
  align-items:flex-start;
  gap: .6rem;
  color: rgba(71,85,105,0.86);
  font-size: .86rem;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 1rem;
  border: 1px dashed rgba(37,99,235,0.22);
  background: rgba(255,255,255,0.72);
}

/* Superficie premium para secciones claras (código ético / hoja de ruta) */
.premium-surface{
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(239,246,255,0.85));
  border-top: 1px solid rgba(15,23,42,0.06);
}
.premium-surface::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px circle at 18% 0%, rgba(37,99,235,0.14), transparent 55%),
    radial-gradient(700px circle at 85% 45%, rgba(14,165,233,0.10), transparent 55%);
  pointer-events:none;
  z-index: 0;
}
.premium-surface > *{ position: relative; z-index: 1; }

.premium-surface .ethic-icon{
  background: rgba(37,99,235,0.12) !important;
  color: rgba(37,99,235,0.96) !important;
  border: 1px solid rgba(37,99,235,0.20);
}
.premium-surface .group:hover .ethic-icon{
  background: linear-gradient(135deg, var(--gold), var(--gold-dim)) !important;
  color: #fff !important;
  border-color: rgba(37,99,235,0.10);
  box-shadow: 0 18px 44px rgba(37,99,235,0.20);
}

.premium-surface .roadmap-step-badge{
  background: linear-gradient(135deg, var(--gold), var(--gold-dim)) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.85) !important;
}


/* ==================== MAPA SELENTIA (Leaflet + GeoJSON) ==================== */

.premium-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(2,6,23,0.08);
  backdrop-filter: blur(10px);
}

.map-shell{ position: relative; overflow: hidden; }
.map-shell::before{
  content:""; position:absolute; inset:-2px;
  background: radial-gradient(900px circle at 30% 20%, rgba(37,99,235,0.14), transparent 55%),
              radial-gradient(700px circle at 70% 80%, rgba(59,130,246,0.12), transparent 60%);
  pointer-events:none;
  z-index:0;
}
.map-shell__top{
  position: relative; z-index: 2;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding: 18px 18px 0 18px;
  flex-wrap: wrap;
}
.map-shell__title{ display:flex; align-items:center; gap:10px; }
.map-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.18);
  color: rgba(2,6,23,0.78);
  font-weight: 700;
}
.map-dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--gold);
  box-shadow: 0 0 0 rgba(37,99,235,0.0);
  animation: mapDotPulse 2.4s ease-in-out infinite;
}
@keyframes mapDotPulse{
  0%,100%{ box-shadow: 0 0 0 rgba(37,99,235,0.0); transform: scale(1); }
  50%{ box-shadow: 0 0 24px rgba(37,99,235,0.35); transform: scale(1.05); }
}

.map-chips{ display:flex; gap:10px; flex-wrap:wrap; }
.map-chip{
  appearance:none; border:none; cursor:pointer;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15,23,42,0.10);
  color: rgba(2,6,23,0.82);
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.map-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(37,99,235,0.30);
  box-shadow: 0 14px 30px rgba(2,6,23,0.10);
}
.map-chip.is-active{
  background: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(59,130,246,0.10));
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 18px 40px rgba(37,99,235,0.16);
}

.selentia-map{
  position: relative; z-index: 1;
  height: 520px;
  margin: 16px 18px 0 18px;
  border-radius: 22px;
  overflow:hidden;
  background: radial-gradient(1100px circle at 25% 18%, rgba(37,99,235,0.12), transparent 58%),
              radial-gradient(900px circle at 70% 80%, rgba(59,130,246,0.10), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239,246,255,0.82));
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7);
}

.map-shell__bottom{
  position: relative; z-index: 2;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap:12px;
  padding: 14px 18px 18px 18px;
}
.map-legend{ display:flex; gap:14px; flex-wrap:wrap; color: rgba(2,6,23,0.72); font-weight: 650; }
.legend-item{ display:inline-flex; align-items:center; gap:10px; }
.legend-swatch{
  width:14px; height:14px; border-radius: 6px;
  border: 1px solid rgba(15,23,42,0.14);
}
.legend-swatch--target{
  background: rgba(37,99,235,0.22);
  border-color: rgba(37,99,235,0.35);
}
.legend-swatch--all{
  background: rgba(37,99,235,0.08);
}
.map-hint{ color: rgba(2,6,23,0.62); font-weight: 600; }

/* Panel info */
.map-info{ padding: 20px; }
.map-info__header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
}
.map-info__kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(2,6,23,0.55);
  font-weight: 800;
}
.map-info__title{
  font-size: 28px;
  font-weight: 900;
  color: rgba(2,6,23,0.92);
  line-height: 1.05;
  margin-top: 6px;
}
.map-info__badge{
  display:flex; flex-direction:column; align-items:flex-end;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(37,99,235,0.18);
  min-width: 150px;
}
.map-info__badgeLabel{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(2,6,23,0.55);
  font-weight: 800;
}
.map-info__badgeValue{
  font-size: 22px;
  font-weight: 950;
  color: rgba(2,6,23,0.90);
  margin-top: 6px;
}
.map-info__body{ padding-top: 14px; }

.map-stats{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}
.map-stat{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(15,23,42,0.08);
}
.map-stat__label{ font-weight: 900; color: rgba(2,6,23,0.78); }
.map-stat__value{ font-weight: 950; color: rgba(2,6,23,0.92); }

.map-cta{ margin-top: 16px; }
.map-cta .btn-gold, .map-cta .btn-ghost{ display:block; padding: 14px 18px; border-radius: 16px; }

/* Leaflet polish */
.leaflet-container{
  background: transparent;
  font-family: var(--font-body, 'Inter', system-ui);
}
.leaflet-control-zoom a{
  background: rgba(255,255,255,0.88);
  color: rgba(2,6,23,0.92);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 14px 30px rgba(2,6,23,0.10);
}
.leaflet-control-zoom a:hover{
  background: rgba(255,255,255,0.98);
}
.leaflet-pane svg path.selentia-prov{
  transition: stroke-width .18s ease, fill-opacity .18s ease, filter .18s ease;
  will-change: filter;
  filter: drop-shadow(0 10px 18px rgba(2,6,23,0.10));
}
.leaflet-pane svg path.selentia-prov.is-target{
  filter: drop-shadow(0 16px 28px rgba(37,99,235,0.18));
}
.leaflet-pane svg path.selentia-prov.is-pulse{
  /* Pulso SOLO por brillo (sin transform para evitar desplazamientos) */
  animation: provGlow 1.8s ease-in-out infinite;
}
@keyframes provGlow{
  0%,100%{ filter: drop-shadow(0 16px 28px rgba(37,99,235,0.16)); }
  50%{ filter: drop-shadow(0 28px 46px rgba(37,99,235,0.34)); }
}
.leaflet-pane svg path.selentia-prov.is-hover{
  filter: drop-shadow(0 22px 42px rgba(37,99,235,0.24));
  animation-play-state: paused;
}
/* Selección fija (más marcada que hover) */
.leaflet-pane svg path.selentia-prov.is-selected{
  filter: drop-shadow(0 26px 52px rgba(37,99,235,0.28));
  animation: provGlowStrong 1.6s ease-in-out infinite;
}
@keyframes provGlowStrong{
  0%,100%{ filter: drop-shadow(0 22px 42px rgba(37,99,235,0.22)); }
  50%{ filter: drop-shadow(0 34px 62px rgba(37,99,235,0.42)); }
}
  50%{ filter: drop-shadow(0 0 26px rgba(37,99,235,0.46)); transform: scale(1.038); }
}

/* Tooltip */
.leaflet-tooltip.selentia-tooltip{
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(15,23,42,0.12);
  box-shadow: 0 18px 50px rgba(2,6,23,0.16);
  color: rgba(2,6,23,0.92);
  border-radius: 14px;
  padding: 10px 12px;
}
.leaflet-tooltip.selentia-tooltip::before{
  border-top-color: rgba(255,255,255,0.95);
}
.selentia-tt-title{ font-weight: 950; letter-spacing: .02em; }
.selentia-tt-meta{ margin-top: 4px; font-weight: 650; color: rgba(2,6,23,0.70); }
.selentia-tt-meta strong{ color: rgba(2,6,23,0.92); font-weight: 950; }

/* Responsive map height */
@media (max-width: 640px){
  .selentia-map{ height: 420px; margin: 14px 14px 0 14px; }
  .map-shell__top{ padding: 16px 14px 0 14px; }
  .map-shell__bottom{ padding: 12px 14px 16px 14px; }
}


/* Selentia: KPI micro-cards (premium) */
.sel-stat{
  background: linear-gradient(180deg, rgba(239,246,255,0.78), rgba(255,255,255,0.74));
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(2,6,23,0.08);
  position: relative;
  overflow: hidden;
}
.sel-stat::before{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,0.18), transparent 55%);
  transform: rotate(12deg);
  pointer-events:none;
}
.sel-stat__kpi{
  position: relative;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 28px;
  line-height: 1;
  color: #0f172a;
}
.sel-stat__label{
  position: relative;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(51,65,85,0.78);
  font-weight: 800;
}


/* Utility: ensure text wraps on small heights/widths */
.safe-wrap{white-space:normal; word-break:break-word;}