/* ===========================================================================
   TEMA «ENSIGNA · MONETIZACIÓN» — la cara de Central Ensigna        (13/11/2026)
   ===========================================================================
   Lo que pidió Nicolás, en orden: que NO se parezca a la app de Finanzas; que
   no sea genérico; «la calidad de Finanzas, pero mejor», «con el tema de
   monetización» y «con la marca Ensigna».

   De dónde sale cada cosa (todo es material de la marca, nada inventado):
     · azul noche + rosa → violeta → naranja: el logo y la tarjeta de Ensigna;
     · el símbolo de los nodos con el aro: el logo oficial (img/ensigna-simbolo);
     · títulos en itálica gruesa, monedas, aro 3D y esfera: la portada de
       Facebook «Proyecto 1M$» hecha con Higgsfield (recortes en img/ens-*);
     · las líneas con nodos del fondo: el dorso de la tarjeta de presentación.

   En qué se diferencia de Finanzas: sin vidrio ni desenfoque, sin holograma
   cian-lila-durazno, sin grabado de billete; neón de marca, cifras en itálica
   con degradé, monedas, el botón [+] con forma del aro del logo, píldoras.

   Se carga ÚLTIMA y manda sobre base.css. Los colores de las redes
   (--serie-1..8) no cambian: están validados para distinguirse entre sí.
   =========================================================================== */

@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url("../fonts/montserrat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat"; font-style: italic; font-weight: 600 900; font-display: swap;
  src: url("../fonts/montserrat-italica.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/dm-sans.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/anton.woff2") format("woff2");
}

/* ── tokens: CLARO (la marca sobre papel lila) ──────────────────────────── */
:root {
  --rosa: #FF2E97; --violeta: #9B4DFF; --naranja: #FF8A3D; --oro: #FFC83D;
  --neon: 255, 46, 151;                         /* el rosa de la marca, para luces y sombras de color */
  --neon-2: 155, 77, 255;

  --fondo: #F3EEFF;
  --superficie: #FFFFFF;
  --superficie-solida: #FFFFFF;
  --texto: #170B33;
  --texto-2: #55497B;
  --texto-3: #8479A8;
  --linea: rgba(64, 32, 128, .12);
  --linea-fuerte: rgba(64, 32, 128, .26);
  --cian: #7440DC; --lila: #D41A7A; --durazno: #CC6410;
  --entra: #0E8A5A; --sale: #D02C4B; --aviso: #946600;

  --holo: linear-gradient(100deg, #FF4FA8, #B872FF 50%, #FFA254);       /* botones y barras: letra oscura encima */
  --sobre-holo: #170B33;
  --holo-texto: linear-gradient(100deg, #E0187F, #7A3FE0 52%, #E46C0C);  /* cifras grandes sobre claro */
  --oro-texto: linear-gradient(100deg, #B26B00, #D98A00 50%, #E4680C);   /* la plata, sobre claro */
  --campo: #FFFFFF;
  --campo-2: rgba(64, 32, 128, .06);
  --pulgar: #FFFFFF;
  --acento: #C0177A;
  --sobre-sale: #FFFFFF;
  --vidrio-a: #FFFFFF; --vidrio-b: #FBF8FF;
  --vidrio-borde: rgba(64, 32, 128, .13);
  --vidrio-luz: rgba(255, 255, 255, .9);
  --tarjeta-a: #FFFFFF; --tarjeta-b: #FAF6FF;
  --brillo: rgba(255, 46, 151, .10);
  --sombra-1: 0 1px 2px rgba(60, 20, 120, .06), 0 16px 34px -22px rgba(110, 50, 200, .45);
  --sombra-2: 0 24px 58px -18px rgba(90, 40, 170, .45), 0 2px 8px rgba(60, 20, 120, .08);
  --velo: rgba(20, 8, 50, .45);
  --barra-fondo: #FFFDFF;
  --blur: 0px;
  --luz-a: rgba(255, 46, 151, .16); --luz-b: rgba(155, 77, 255, .16); --luz-c: rgba(255, 138, 61, .12);
  --trama: .5;

  --display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cuerpo: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radio: 22px; --radio-chico: 14px;
}

/* ── tokens: OSCURO (el azul noche de Ensigna: así es la marca) ─────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #090720; --superficie: #171040; --superficie-solida: #171040;
    --texto: #FFFFFF; --texto-2: #D3C8F5; --texto-3: #9A8EC6;
    --linea: rgba(196, 170, 255, .14); --linea-fuerte: rgba(196, 170, 255, .30);
    --cian: #B592FF; --lila: #FF6DB8; --durazno: #FFA25C;
    --entra: #4FE3A3; --sale: #FF6F84; --aviso: #FFCB47;
    --holo-texto: linear-gradient(100deg, #FF6FB8, #C9A4FF 50%, #FFB570);
    --oro-texto: linear-gradient(100deg, #FFE88A, #FFC233 48%, #FF9A3D);
    --campo: #1D1550; --campo-2: rgba(196, 170, 255, .08);
    --pulgar: rgba(255, 255, 255, .18); --acento: #FF6DB8; --sobre-sale: #1E0612;
    --vidrio-a: #1D1550; --vidrio-b: #130D36; --vidrio-borde: rgba(196, 170, 255, .18);
    --vidrio-luz: rgba(255, 255, 255, .09);
    --tarjeta-a: #1B1348; --tarjeta-b: #120C32;
    --brillo: rgba(255, 46, 151, .12);
    --sombra-1: inset 0 1px 0 rgba(255, 255, 255, .07), 0 22px 48px -30px rgba(var(--neon-2), .75);
    --sombra-2: 0 28px 70px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(196, 170, 255, .12), 0 0 50px -18px rgba(var(--neon), .5);
    --velo: rgba(4, 2, 16, .74); --barra-fondo: #0B0824;
    --luz-a: rgba(255, 46, 151, .22); --luz-b: rgba(155, 77, 255, .24); --luz-c: rgba(255, 138, 61, .12);
    --trama: 1;
  }
}
:root[data-theme="dark"] {
  --fondo: #090720; --superficie: #171040; --superficie-solida: #171040;
  --texto: #FFFFFF; --texto-2: #D3C8F5; --texto-3: #9A8EC6;
  --linea: rgba(196, 170, 255, .14); --linea-fuerte: rgba(196, 170, 255, .30);
  --cian: #B592FF; --lila: #FF6DB8; --durazno: #FFA25C;
  --entra: #4FE3A3; --sale: #FF6F84; --aviso: #FFCB47;
  --holo-texto: linear-gradient(100deg, #FF6FB8, #C9A4FF 50%, #FFB570);
  --oro-texto: linear-gradient(100deg, #FFE88A, #FFC233 48%, #FF9A3D);
  --campo: #1D1550; --campo-2: rgba(196, 170, 255, .08);
  --pulgar: rgba(255, 255, 255, .18); --acento: #FF6DB8; --sobre-sale: #1E0612;
  --vidrio-a: #1D1550; --vidrio-b: #130D36; --vidrio-borde: rgba(196, 170, 255, .18);
  --vidrio-luz: rgba(255, 255, 255, .09);
  --tarjeta-a: #1B1348; --tarjeta-b: #120C32;
  --brillo: rgba(255, 46, 151, .12);
  --sombra-1: inset 0 1px 0 rgba(255, 255, 255, .07), 0 22px 48px -30px rgba(var(--neon-2), .75);
  --sombra-2: 0 28px 70px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(196, 170, 255, .12), 0 0 50px -18px rgba(var(--neon), .5);
  --velo: rgba(4, 2, 16, .74); --barra-fondo: #0B0824;
  --luz-a: rgba(255, 46, 151, .22); --luz-b: rgba(155, 77, 255, .24); --luz-c: rgba(255, 138, 61, .12);
  --trama: 1;
}
:root.menos-transparencia { --blur: 0px; }

/* ── fondo: las luces de la marca y la trama de nodos de la tarjeta ──────── */
.fondo { display: none !important; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(62vmax 44vmax at 104% -10%, var(--luz-a), transparent 62%),
    radial-gradient(56vmax 50vmax at -16% 46%, var(--luz-b), transparent 64%),
    radial-gradient(48vmax 36vmax at 62% 116%, var(--luz-c), transparent 60%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--trama);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='560' fill='none'%3E%3Cg stroke='%239B4DFF' stroke-opacity='.2' stroke-width='1.3'%3E%3Cpath d='M-20 132 176 214 430 96 652 232 980 104'/%3E%3Cpath d='M-20 438 214 346 404 410 668 306 980 428'/%3E%3C/g%3E%3Cg fill='%23FF2E97' fill-opacity='.3'%3E%3Ccircle cx='176' cy='214' r='4.5'/%3E%3Ccircle cx='430' cy='96' r='4.5'/%3E%3Ccircle cx='652' cy='232' r='4.5'/%3E%3Ccircle cx='214' cy='346' r='4.5'/%3E%3Ccircle cx='404' cy='410' r='4.5'/%3E%3Ccircle cx='668' cy='306' r='4.5'/%3E%3C/g%3E%3C/svg%3E") center top / 960px 560px repeat-y;
}

/* ── sin vidrio: nada se desenfoca ───────────────────────────────────────── */
.vidrio, .tarjeta, .hoja, .barra-sup, .barra-inf, .lateral, .aviso, [class*="vidrio"] {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.barra-sup { background: color-mix(in srgb, var(--fondo) 94%, transparent); }

/* ── letras: itálica gruesa, como el titular de la portada ───────────────── */
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; }
.barra-sup h1 { font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: 20px; }
.ceja { font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; }
.tarjeta-titulo, .pi-titulo { font-style: italic; font-weight: 800; letter-spacing: -.02em; }
.cifra { font-style: italic; font-weight: 900; letter-spacing: -.035em; font-variation-settings: normal; }
:root .brillo-texto { background: var(--holo-texto); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none !important; }
.marca-nombre strong { font-family: "Anton", var(--display); font-weight: 400; font-size: 25px; letter-spacing: .06em; line-height: 1;
  background: var(--holo-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca-nombre small { font-family: var(--display); font-weight: 700; letter-spacing: .16em; font-size: 9px; color: var(--texto-3); margin-top: 4px; }

/* ── tarjetas: sólidas, con filo de neón ─────────────────────────────────── */
.tarjeta, .vidrio { background: linear-gradient(165deg, var(--tarjeta-a), var(--tarjeta-b)); border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-1); }
.holo::after { opacity: 1; background: linear-gradient(120deg, var(--rosa), var(--violeta) 50%, var(--naranja)); }

/* ── la cifra grande: itálica con el degradé de la marca, y sus monedas ──── */
.pi-total-cifra {
  font-style: italic; font-weight: 900; letter-spacing: -.04em;
  background: var(--holo-texto); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .12em;                         /* la itálica no se corta a la derecha */
}
/* LA PLATA VA SIEMPRE EN DORADO: seguidores y vistas llevan el degradé de la marca; todo lo que es
   dinero ganado lleva el oro de las monedas. Así se distingue de un vistazo qué número es plata. */
.pg-mes-cifra, .pi-ing-cifra {
  font-style: italic; font-weight: 900; letter-spacing: -.04em; padding-right: .12em;
  background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* las monedas (ui.monedas()): dos piezas 3D de la portada, flotando detrás del texto.
   Solo se anima transform: no repinta la tarjeta. */
.monedas { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.moneda { position: absolute; background: center / contain no-repeat; will-change: transform; animation: moneda-flota 6.5s ease-in-out infinite; }
.moneda-1 { width: 96px; height: 96px; right: 8px; top: 40px; background-image: url("../img/ens-moneda.webp"); filter: drop-shadow(0 14px 18px rgba(255, 150, 40, .28)); }
.moneda-2 { width: 42px; height: 42px; right: 104px; top: 10px; background-image: url("../img/ens-moneda-2.webp"); animation-duration: 8s; animation-delay: -3s; }
.pg-mes .moneda-1 { top: 22px; }
.pg-mes .moneda-2 { top: 6px; right: 100px; }
@keyframes moneda-flota {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(6deg); }
}
@media (min-width: 960px) {
  .moneda-1 { width: 100px; height: 100px; right: 8px; top: 54px; }       /* debajo del rótulo «N cuentas» */
  .moneda-2 { width: 42px; height: 42px; right: 104px; top: 134px; }
  .pg-mes .moneda-1 { top: 28px; }
  .pg-mes .moneda-2 { top: 122px; right: 100px; }
}

/* ── medidas que cambian con la letra nueva (DM Sans es más ancha que la anterior) ── */
@media (min-width: 960px) {
  .pi-cola-num { padding: 10px 8px 9px; }
  .pi-cola-num-cab { flex-direction: column; gap: 3px; font-size: 11px; letter-spacing: -.01em; }
  .pi-monet-fila { align-items: start; }          /* cada tarjeta con su alto: sin cajas medio vacías */
}

/* ── botones: píldoras con el degradé de la marca ────────────────────────── */
.btn { border-radius: 999px; font-weight: 700; padding: 0 18px; }
.btn-chico { border-radius: 999px; }
.btn-primario { box-shadow: 0 12px 30px -12px rgba(var(--neon), .8), inset 0 1px 0 rgba(255, 255, 255, .5); font-weight: 800; }
.btn-primario:hover:not(:disabled) { filter: saturate(1.15) brightness(1.05); }
.chip, .pill, .segmentado, .segmentado button { border-radius: 999px; }

/* ── navegación ──────────────────────────────────────────────────────────── */
.barra-inf { border-top: 0; background:
    linear-gradient(90deg, var(--rosa), var(--violeta) 50%, var(--naranja)) top / 100% 2px no-repeat,
    linear-gradient(var(--barra-fondo), var(--barra-fondo)); }
.tab { font-family: var(--display); font-weight: 700; font-size: 10.5px; }
/* el [+] es el aro del logo: naranja → rosa con el centro oscuro */
.tab-publicar span {
  background: radial-gradient(circle, var(--fondo) 0 53%, transparent 54%), linear-gradient(140deg, var(--naranja), var(--rosa));
  color: var(--texto);
  box-shadow: 0 0 26px -2px rgba(var(--neon), .75), 0 0 0 5px var(--fondo);
}
.lateral-item { border-radius: 999px; font-weight: 650; }
.lateral-item.activo { background: linear-gradient(90deg, rgba(var(--neon), .18), rgba(var(--neon-2), .10)); }
.lateral-item.activo::before { width: 4px; background: linear-gradient(var(--rosa), var(--naranja)); }
.avatar { font-weight: 800; }
.campo input, .campo select, .campo textarea, .entrada { border-radius: var(--radio-chico); }

/* ── el logo: el símbolo oficial de Ensigna ──────────────────────────────── */
.marca-svg { object-fit: contain; }
.arranque .marca-svg { width: 96px; height: 96px; animation: marca-pulso 1.6s ease-in-out infinite; filter: drop-shadow(0 0 26px rgba(var(--neon), .55)); }
@keyframes marca-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(.93); } }

/* ── la entrada: el símbolo en el centro, el aro 3D y las monedas alrededor ── */
.login {
  background:
    url("../img/ens-moneda.webp") right 7% top 7% / 74px auto no-repeat,
    url("../img/ens-moneda-2.webp") left 9% bottom 16% / 54px auto no-repeat;
}
/* el aro 3D y la esfera salen de la portada con su fondo oscuro: solo van sobre el azul noche */
:root[data-theme="dark"] .login {
  background:
    url("../img/ens-aro.webp") left -128px top 3% / 236px auto no-repeat,
    url("../img/ens-moneda.webp") right 7% top 7% / 74px auto no-repeat,
    url("../img/ens-moneda-2.webp") left 9% bottom 16% / 54px auto no-repeat,
    url("../img/ens-esfera.webp") right -52px bottom 10% / 150px auto no-repeat;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login {
    background:
      url("../img/ens-aro.webp") left -128px top 3% / 236px auto no-repeat,
      url("../img/ens-moneda.webp") right 7% top 7% / 74px auto no-repeat,
      url("../img/ens-moneda-2.webp") left 9% bottom 16% / 54px auto no-repeat,
      url("../img/ens-esfera.webp") right -52px bottom 10% / 150px auto no-repeat;
  }
}
/* el símbolo grande al medio y las cinco redes girando AFUERA de él (antes le pasaban por encima) */
.login-nucleo { inset: 25%; border-radius: 0; background: none; box-shadow: none; animation: marca-pulso 3.2s ease-in-out infinite; filter: drop-shadow(0 0 34px rgba(var(--neon), .65)); }
.login-nucleo .marca-svg { width: 100%; height: 100%; display: block; }
.login-halo { inset: 22%; border-radius: 50%; border-color: var(--rosa); }
.orb { border-color: rgba(var(--neon-2), .45); }
.orb-1 { inset: 9%; }
.orb-2 { inset: -3%; border-color: rgba(var(--neon), .4); }
.orb-3 { inset: -15%; }
.login-escena::before { display: none; }
.login-escena { margin: 44px 0 50px; }
@media (min-width: 960px) { .login-escena { margin: 0; width: min(330px, 30vw); } }
.login-titulo { font-family: "Anton", var(--display); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; font-variation-settings: normal;
  background: var(--holo-texto); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .06em 0; }

/* ── la guía, los vacíos y las fichas usan los colores de la marca ───────── */
.gu-titulo, .gu-paso-titulo, .gu-mision-cuerpo h3 { font-style: italic; }
.gu-avance-barra i, .gu-tramo.aqui i { background: linear-gradient(90deg, var(--rosa), var(--violeta) 50%, var(--naranja)); }
.ilu-3d { filter: drop-shadow(0 14px 26px rgba(var(--neon-2), .45)); }

@media (prefers-reduced-motion: reduce) {
  .arranque .marca-svg, .moneda { animation: none; }
}