/* ═══════════════════════════════════════════════════════
   TOKENS DE DISEÑO
══════════════════════════════════════════════════════ */
:root {
    --bg            : #000;
    --text          : #fff;
    --primary       : #D2232A;
    --secondary     : #002855;
    --glass         : rgba(255, 255, 255, .06);
    --border        : rgba(255, 255, 255, .10);
    --f             : 'Poppins', sans-serif;
    --azul          : #002855;
    --azul-mid      : #003d8f;
    --azul-glow     : rgba(0, 61, 143, 0.35);
    --rojo          : #D2232A;
    --rojo-glow     : rgba(210, 35, 42, 0.35);
    --blanco        : #ffffff;

    --r-sm          : 8px;
    --r-md          : 12px;
    --r-lg          : 18px;
    --r-xl          : 24px;
    --r-pill        : 9999px;

    --t-fast        : 150ms ease;
    --t-med         : 280ms ease;
    --t-slow        : 500ms ease;

    --fuente        : var(--f);
}

/* ═══ TEMA OSCURO (default) ═══ */
[data-tema="oscuro"] {
    --bg            : #060d17;
    --bg-nav        : rgba(6, 13, 23, 0.80);
    --surface       : rgba(255,255,255,0.038);
    --surface-hover : rgba(255,255,255,0.060);
    --border        : rgba(255,255,255,0.075);
    --border-focus  : rgba(26,111,212,0.75);
    --border-error  : rgba(210,35,42,0.8);
    --border-ok     : rgba(34,197,94,0.7);
    --input-bg      : rgba(255,255,255,0.045);
    --input-hover   : rgba(255,255,255,0.070);
    --text-1        : #f1f5f9;
    --text-2        : #8fa3bd;
    --text-3        : #4a6070;
    --overlay       : rgba(2,6,12,0.78);
    --modal-bg      : #0d1825;
    --shadow        : 0 24px 64px rgba(0,0,0,0.55);
    --shadow-sm     : 0 2px 12px rgba(0,0,0,0.35);
    --drop-bg       : rgba(255,255,255,0.025);
    --drop-border   : rgba(255,255,255,0.10);
}

/* ═══ TEMA CLARO ═══ */
[data-tema="claro"] {
    --bg            : #f4f6fb;
    --bg-nav        : rgba(244,246,251,0.88);
    --surface       : #ffffff;
    --surface-hover : #f9fbff;
    --border        : rgba(0,30,80,0.10);
    --border-focus  : #002855;
    --border-error  : #D2232A;
    --border-ok     : #16a34a;
    --input-bg      : #ffffff;
    --input-hover   : #f5f8ff;
    --text-1        : #0d1b2e;
    --text-2        : #4a5f78;
    --text-3        : #9bacc0;
    --overlay       : rgba(4,10,22,0.55);
    --modal-bg      : #ffffff;
    --shadow        : 0 24px 64px rgba(0,30,80,0.14);
    --shadow-sm     : 0 2px 12px rgba(0,30,80,0.09);
    --drop-bg       : rgba(0,40,85,0.025);
    --drop-border   : rgba(0,40,85,0.12);
}

/* ═══════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family     : var(--fuente);
    background      : var(--bg);
    color           : var(--text-1);
    min-height      : 100vh;
    overflow-x      : hidden;
    transition      : background var(--t-slow), color var(--t-slow);
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════
   FONDO — ORBES DE GRADIENTE + CUADRÍCULA
══════════════════════════════════════════════════════ */
.fondo-escena {
    position   : fixed;
    inset      : 0;
    z-index    : 0;
    overflow   : hidden;
    pointer-events: none;
}

/* Degradados corporativos en esquinas */
.fondo-escena::before {
    content : '';
    position: absolute;
    inset   : 0;
    background:
        radial-gradient(ellipse 50% 45% at 0%   0%,   rgba(0, 40,130,.22)  0%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 100% 0%,   rgba(210,35, 42,.16) 0%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 0%   100%, rgba(210,35, 42,.13) 0%, transparent 100%),
        radial-gradient(ellipse 50% 45% at 100% 100%, rgba(0, 40,130,.18)  0%, transparent 100%);
    pointer-events: none;
}
[data-tema="claro"] .fondo-escena::before {
    background:
        radial-gradient(ellipse 50% 45% at 0%   0%,   rgba(0,40,130,.10)  0%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 100% 0%,   rgba(210,35,42,.08) 0%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 0%   100%, rgba(210,35,42,.07) 0%, transparent 100%),
        radial-gradient(ellipse 50% 45% at 100% 100%, rgba(0,40,130,.09)  0%, transparent 100%);
}

/* Orbe genérico */
.orbe {
    position      : absolute;
    border-radius : 50%;
    filter        : blur(90px);
    will-change   : transform;
    animation     : flotar linear infinite;
}

.orbe-1 {
    width     : 680px;
    height    : 680px;
    top       : -160px;
    left      : -180px;
    background: radial-gradient(circle, rgba(0,40,130,0.28) 0%, transparent 70%);
    animation-duration: 22s;
    animation-direction: alternate;
}

.orbe-2 {
    width     : 560px;
    height    : 560px;
    top       : 30%;
    right     : -180px;
    background: radial-gradient(circle, rgba(180,20,28,0.22) 0%, transparent 70%);
    animation-duration: 28s;
    animation-direction: alternate-reverse;
    animation-delay: -8s;
}

.orbe-3 {
    width     : 440px;
    height    : 440px;
    bottom    : -100px;
    left      : 30%;
    background: radial-gradient(circle, rgba(0,55,160,0.16) 0%, transparent 70%);
    animation-duration: 34s;
    animation-direction: alternate;
    animation-delay: -14s;
}

@keyframes flotar {
    0%   { transform: translate(0px,  0px)  scale(1);    }
    33%  { transform: translate(30px, -25px) scale(1.04); }
    66%  { transform: translate(-20px, 18px) scale(0.97); }
    100% { transform: translate(15px, -10px) scale(1.02); }
}

/* Cuadrícula fina */
.cuadricula {
    position: absolute;
    inset    : 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
    opacity: 0.6;
}

/* Viñeta perimetral */
.viñeta {
    position: absolute;
    inset    : 0;
    background: radial-gradient(ellipse 100% 80% at 50% 0%, transparent 40%, var(--bg) 100%);
}

/* ═══════════════════════════════════════════════════════
   NAVEGACIÓN
══════════════════════════════════════════════════════ */
.barra-navegacion {
    position        : fixed;
    top             : 0; left: 0; right: 0;
    z-index         : 200;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 0 2rem;
    height          : 60px;
    background      : var(--bg-nav);
    backdrop-filter : blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom   : 1px solid var(--border);
    transition      : background var(--t-slow);
}

.logo-nav {
    display    : flex;
    align-items: center;
}

.logo-imagen {
    height    : 32px;
    width     : auto;
    max-width : 160px;
    object-fit: contain;
    display   : block;
    transition: filter var(--t-med), opacity var(--t-med);
}

[data-tema="oscuro"] .logo-imagen {
    filter: brightness(0) invert(1);
}

[data-tema="claro"] .logo-imagen {
    filter: none;
}

.logo-texto-fallback {
    font-size  : 1rem;
    font-weight: 700;
    color      : var(--text-1);
    letter-spacing: -.02em;
}

.nav-derecha {
    display    : flex;
    align-items: center;
    gap        : .75rem;
}

.nav-tag {
    display      : flex;
    align-items  : center;
    gap          : .45rem;
    font-size    : .75rem;
    font-weight  : 600;
    color        : var(--text-1);
    letter-spacing: .04em;
    padding      : .32rem .75rem;
    background   : rgba(26,111,212,.10);
    border       : 1px solid rgba(26,111,212,.22);
    border-radius: var(--r-pill);
    transition   : background var(--t-fast), border-color var(--t-fast);
}

[data-tema="claro"] .nav-tag {
    background : rgba(0,40,130,.07);
    border-color: rgba(0,40,130,.18);
    color      : var(--azul);
}

.nav-tag:hover {
    background  : rgba(26,111,212,.16);
    border-color: rgba(26,111,212,.4);
}

.nav-tag-dot {
    width           : 6px;
    height          : 6px;
    border-radius   : 50%;
    background      : #22c55e;
    box-shadow      : 0 0 6px #22c55e;
    animation       : pulsar 2.4s infinite;
    flex-shrink     : 0;
}

@keyframes pulsar {
    0%, 100% { opacity: 1;  transform: scale(1);   }
    50%       { opacity: .5; transform: scale(1.5); }
}

.boton-tema {
    display     : flex;
    align-items : center;
    gap         : .4rem;
    padding     : .38rem .85rem;
    background  : var(--surface);
    border      : 1px solid var(--border);
    border-radius: var(--r-pill);
    color       : var(--text-2);
    font-size   : .78rem;
    font-weight : 500;
    cursor      : pointer;
    transition  : all var(--t-fast);
    font-family : var(--fuente);
    white-space : nowrap;
}

.boton-tema:hover {
    background  : var(--surface-hover);
    border-color: var(--border-focus);
    color       : var(--text-1);
}

/* Iconos sol / luna: se alternan con data-tema */
.icono-tema { display: flex; align-items: center; }
[data-tema="oscuro"] .icono-sol  { display: block; }
[data-tema="oscuro"] .icono-luna { display: none;  }
[data-tema="claro"]  .icono-sol  { display: none;  }
[data-tema="claro"]  .icono-luna { display: block; }

/* ═══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.hero {
    position   : relative;
    z-index    : 1;
    text-align : center;
    padding    : 7.5rem 1.5rem 2.5rem;
}

.hero-contenido {
    max-width : 960px;
    margin    : 0 auto;
    padding   : 0 1rem;
}

.hero-kicker {
    font-size     : .72rem;
    font-weight   : 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color         : var(--text-3);
    margin-bottom : 1.25rem;
}

.hero-titulo {
    font-size    : clamp(1.9rem, 4.8vw, 3.8rem);
    font-weight  : 800;
    line-height  : 1.1;
    letter-spacing: -.03em;
    color        : var(--text-1);
    margin-bottom: 1.25rem;
}

.titulo-linea-acento {
    background         : linear-gradient(90deg, #1a6fd4 0%, var(--rojo) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip    : text;
}

.hero-subtitulo {
    font-size  : clamp(.92rem, 1.8vw, 1.05rem);
    line-height: 1.8;
    color      : var(--text-2);
    font-weight: 400;
    max-width  : 820px;
    margin     : 0 auto;
}

.hero-cita {
    margin-top  : 1.6rem;
    font-size   : clamp(.88rem, 1.6vw, 1rem);
    font-style  : italic;
    color       : var(--text-2);
    line-height : 1.7;
    max-width   : 820px;
    margin-left : auto;
    margin-right: auto;
    padding     : 1rem 1.5rem;
    border-left : 3px solid var(--rojo);
    background  : rgba(210,35,42,.05);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    text-align  : left;
}

.cita-comilla {
    font-size  : 1.4em;
    font-style : normal;
    color      : var(--rojo);
    line-height: 0;
    vertical-align: -0.2em;
}

.hero-llamado {
    margin-top  : 1.1rem;
    font-size   : clamp(.85rem, 1.5vw, .95rem);
    color       : var(--text-2);
    line-height : 1.75;
    max-width   : 820px;
    margin-left : auto;
    margin-right: auto;
}

.hero-llamado strong { color: var(--text-1); }

/* ═══ RESPONSIVE ═══════════════════════════════════════ */
@media (max-width: 600px) {
    .br-desk { display: none; }
}

@media (max-width: 768px) {
    .hero { padding: 7rem 1.25rem 2rem; }
    .hero-contenido { padding: 0 .5rem; }
    .hero-cita, .hero-llamado { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 480px) {
    .barra-navegacion { padding: 0 1rem; }
    .nav-tag          { display: none; }
    .hero             { padding: 6.5rem 1.25rem 2rem; }
    .hero-cita        { border-left: 2px solid var(--rojo); padding: .75rem 1rem; }
    .modal-panel      { padding: 1.75rem 1.5rem; }
    .modal-acciones   { flex-direction: column; }
    .btn-modal        { flex: none; }
}

/* ═══════════════════════════════════════════════════════
   CONTENEDOR PRINCIPAL
══════════════════════════════════════════════════════ */
.contenedor-principal {
    position : relative;
    z-index  : 1;
    max-width: 900px;
    margin   : 0 auto;
    padding  : 0 1.5rem 6rem;
}

/* ═══════════════════════════════════════════════════════
   SELECTOR DE FORMULARIO (TABS)
══════════════════════════════════════════════════════ */
.selector-formulario {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : .6rem;
    margin-bottom        : 1.25rem;
    padding              : .35rem;
    background           : var(--surface);
    border               : 1px solid var(--border);
    border-radius        : var(--r-lg);
    backdrop-filter      : blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.selector-tab {
    display     : flex;
    align-items : center;
    gap         : .75rem;
    padding     : .9rem 1.25rem;
    background  : transparent;
    border      : none;
    border-radius: calc(var(--r-lg) - 4px);
    cursor      : pointer;
    transition  : all var(--t-med);
    font-family : var(--fuente);
    color       : var(--text-3);
    text-align  : left;
}

.selector-tab:hover:not(.activo) {
    background: var(--surface-hover);
    color     : var(--text-2);
}

.selector-tab.activo {
    background: var(--bg);
    color     : var(--text-1);
    box-shadow: var(--shadow-sm);
    border    : 1px solid var(--border);
}

.tab-icono {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 32px;
    height         : 32px;
    border-radius  : var(--r-sm);
    background     : var(--surface);
    border         : 1px solid var(--border);
    flex-shrink    : 0;
    transition     : all var(--t-med);
}

.selector-tab.activo .tab-icono {
    background  : var(--azul);
    border-color: transparent;
    color       : var(--blanco);
}

.tab-contenido {
    display       : flex;
    flex-direction: column;
    gap           : .1rem;
}

.tab-nombre {
    font-size  : .88rem;
    font-weight: 600;
    line-height: 1.2;
}

.tab-sub {
    font-size  : .7rem;
    font-weight: 500;
    opacity    : .6;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════
   PANELES
══════════════════════════════════════════════════════ */
.panel.oculto  { display: none; }
.panel.visible { display: block; animation: subir var(--t-med) ease; }
.panel.visible#panel-soporte {
    opacity: 1;
    transform: none;
}

@keyframes subir {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ═══════════════════════════════════════════════════════
   TARJETA DEL FORMULARIO
══════════════════════════════════════════════════════ */
.tarjeta {
    position        : relative;
    background      : var(--surface);
    border          : 1px solid var(--border);
    border-radius   : var(--r-xl);
    overflow        : hidden;
    box-shadow      : var(--shadow);
    backdrop-filter : blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

/* Tira de color superior */
.tarjeta-tira {
    height: 3px;
    width : 100%;
}

.tira-azul { background: linear-gradient(90deg, var(--azul) 0%, #1a6fd4 50%, var(--azul) 100%); }
.tira-roja { background: linear-gradient(90deg, var(--rojo) 0%, #ff6b6b 50%, var(--rojo) 100%); }

.tarjeta-cuerpo {
    padding: 2rem 2rem 2.25rem;
}

/* ─── Cabecera del form ───── */
.form-cabecera {
    display     : flex;
    align-items : center;
    gap         : 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.form-cabecera-icono {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 44px;
    height         : 44px;
    border-radius  : var(--r-md);
    flex-shrink    : 0;
}

.icono-azul { background: rgba(0,40,85,.15); color: #1a6fd4;  border: 1px solid rgba(26,111,212,.2); }
.icono-rojo { background: rgba(210,35,42,.12); color: #f05555; border: 1px solid rgba(210,35,42,.2); }

[data-tema="claro"] .icono-azul { background: rgba(0,40,85,.08);  color: var(--azul); }
[data-tema="claro"] .icono-rojo { background: rgba(210,35,42,.08); color: var(--rojo); }

.form-titulo {
    font-size    : 1.15rem;
    font-weight  : 700;
    color        : var(--text-1);
    letter-spacing: -.02em;
    line-height  : 1.2;
}

.form-subtitulo {
    font-size  : .78rem;
    color      : var(--text-3);
    margin-top : .2rem;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════
   FORMULARIO — CAMPOS
══════════════════════════════════════════════════════ */
.formulario {
    display       : flex;
    flex-direction: column;
    gap           : 1.1rem;
}

.fila-doble {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 1rem;
}

@media (max-width: 560px) {
    .fila-doble             { grid-template-columns: 1fr; }
    .selector-formulario    { grid-template-columns: 1fr; }
    .tarjeta-cuerpo         { padding: 1.5rem 1.1rem; }
    .contenedor-principal   { padding: 0 .85rem 4rem; }
    .selector-tab           { padding: .75rem .9rem; }
    .tab-sub                { display: none; }
}

@media (max-width: 400px) {
    .selector-tab .tab-nombre { font-size: .78rem; }
    .boton-enviar             { font-size: .85rem; padding: .85rem 1rem; }
}

.grupo {
    display       : flex;
    flex-direction: column;
    gap           : .4rem;
}

/* Etiquetas */
.etiqueta {
    font-size    : .78rem;
    font-weight  : 600;
    color        : var(--text-2);
    letter-spacing: .02em;
}

.req      { color: var(--rojo); margin-left: .15rem; }
.opcional { color: var(--text-3); font-weight: 400; }

/* Campo base */
.campo {
    width       : 100%;
    padding     : .7rem .9rem;
    background  : var(--input-bg);
    border      : 1px solid var(--border);
    border-radius: var(--r-md);
    color       : var(--text-1);
    font-family : var(--fuente);
    font-size   : .9rem;
    outline     : none;
    transition  : border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
    appearance  : none;
    -webkit-appearance: none;
}

.campo:hover:not(:focus) {
    background  : var(--input-hover);
    border-color: rgba(255,255,255,.14);
}

[data-tema="claro"] .campo:hover:not(:focus) {
    border-color: rgba(0,40,85,.22);
}

.campo:focus {
    border-color: var(--border-focus);
    background  : var(--input-hover);
    box-shadow  : 0 0 0 3px rgba(26,111,212,.12);
}

.campo::placeholder {
    color  : var(--text-3);
    opacity: 1;
}

/* Textarea */
.campo-area {
    resize     : vertical;
    min-height : 110px;
    line-height: 1.65;
}

.campo-meta {
    display        : flex;
    justify-content: flex-end;
    margin-top     : .1rem;
}

.contador {
    font-size  : .72rem;
    color      : var(--text-3);
    font-weight: 500;
}

/* Select */
.select-wrapper {
    position: relative;
}

.campo-select {
    cursor       : pointer;
    padding-right: 2.5rem;
}

.select-chevron {
    position      : absolute;
    right         : .85rem;
    top           : 50%;
    transform     : translateY(-50%);
    color         : var(--text-3);
    pointer-events: none;
}

[data-tema="oscuro"] .campo-select option {
    background: #0d1825;
    color     : var(--text-1);
}

/* Teléfono */
.campo-tel {
    display    : flex;
    align-items: stretch;
}

.tel-prefijo {
    display     : flex;
    align-items : center;
    gap         : .35rem;
    padding     : 0 .7rem;
    background  : var(--input-bg);
    border      : 1px solid var(--border);
    border-right: none;
    border-radius: var(--r-md) 0 0 var(--r-md);
    flex-shrink : 0;
    font-size   : .92rem;
}

/* Prefijo como select */
.tel-prefijo-select {
    padding: 0;
}

.prefijo-select {
    padding     : .7rem .55rem;
    background  : transparent;
    border      : none;
    box-shadow  : none;
    font-weight : 600;
    font-size   : .82rem;
    color       : var(--text-2);
    outline     : none;
    cursor      : pointer;
    appearance  : none;
    -webkit-appearance: none;
    min-width   : 90px;
}

.prefijo-select:focus { box-shadow: none; border: none; }

[data-tema="oscuro"] .prefijo-select option { background: #0d1825; color: var(--text-1); }

.tel-numero {
    border-radius: 0 var(--r-md) var(--r-md) 0;
    flex         : 1;
}

/* Campos condicionales Bitrix */
.grupo-condicional {
    border        : 1px solid rgba(26,111,212,.18);
    border-radius : var(--r-md);
    padding       : 1rem 1rem .75rem;
    background    : rgba(26,111,212,.04);
    display       : flex;
    flex-direction: column;
    gap           : .85rem;
}

.aviso-condicional {
    display    : flex;
    align-items: center;
    gap        : .5rem;
    font-size  : .75rem;
    font-weight: 500;
    color      : #1a6fd4;
    padding-bottom: .75rem;
    border-bottom : 1px solid rgba(26,111,212,.12);
}

[data-tema="claro"] .aviso-condicional { color: var(--azul); }

@keyframes condicionalEntrar {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.condicional-entrando {
    animation: condicionalEntrar .3s cubic-bezier(.22,1,.36,1) forwards;
}

.prefijo-input {
    width       : 36px;
    padding     : 0;
    background  : transparent;
    border      : none;
    box-shadow  : none;
    font-weight : 600;
    font-size   : .82rem;
    color       : var(--text-2);
    outline     : none;
    text-align  : center;
    border-radius: 0;
}

/* Zona drag-and-drop */
.zona-drop {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : .35rem;
    padding       : 1.4rem;
    background    : var(--drop-bg);
    border        : 1.5px dashed var(--drop-border);
    border-radius : var(--r-md);
    cursor        : pointer;
    transition    : all var(--t-fast);
    color         : var(--text-3);
    text-align    : center;
    position      : relative;
}

.zona-drop:hover {
    border-color: var(--border-focus);
    background  : rgba(26,111,212,.05);
    color       : var(--text-2);
}

.input-archivo {
    position: absolute;
    inset   : 0;
    opacity : 0;
    cursor  : pointer;
    width   : 100%;
    height  : 100%;
}

.drop-texto   { font-size: .85rem; font-weight: 500; }
.drop-formatos { font-size: .72rem; opacity: .6; }

.archivo-nombre {
    font-size  : .78rem;
    color      : var(--text-2);
    font-weight: 500;
    margin-top : .1rem;
}

/* Checkbox */
.etiqueta-check {
    display    : flex;
    align-items: flex-start;
    gap        : .65rem;
    cursor     : pointer;
}

.check-input { display: none; }

.check-box {
    width       : 18px;
    height      : 18px;
    border      : 1.5px solid var(--border);
    border-radius: 5px;
    background  : var(--input-bg);
    flex-shrink : 0;
    margin-top  : 1px;
    transition  : all var(--t-fast);
    display     : flex;
    align-items : center;
    justify-content: center;
    position    : relative;
}

.check-input:checked + .check-box {
    background  : var(--azul);
    border-color: var(--azul);
}

.check-input:checked + .check-box::after {
    content      : '';
    width        : 4px;
    height       : 8px;
    border-right : 1.8px solid white;
    border-bottom: 1.8px solid white;
    transform    : rotate(45deg) translate(-1px,-1px);
    display      : block;
}

.check-texto {
    font-size  : .82rem;
    color      : var(--text-2);
    line-height: 1.55;
}

/* Validación */
.campo-error {
    border-color: var(--border-error) !important;
    box-shadow  : 0 0 0 3px rgba(210,35,42,.10) !important;
}

.campo-valido {
    border-color: var(--border-ok) !important;
}

.mensaje-error {
    font-size  : .74rem;
    color      : #f87171;
    font-weight: 500;
    margin-top : -.15rem;
    display    : flex;
    align-items: center;
    gap        : .25rem;
}

.mensaje-error::before { content: '↳'; opacity: .7; }

@keyframes sacudir {
    0%,100% { transform: translateX(0);   }
    20%      { transform: translateX(-5px);}
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-3px);}
    80%      { transform: translateX(3px); }
}
.sacudir { animation: sacudir .35s ease; }

/* ═══════════════════════════════════════════════════════
   BOTÓN DE ENVÍO
══════════════════════════════════════════════════════ */
.boton-enviar {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : .5rem;
    width          : 100%;
    padding        : .82rem 1.5rem;
    border         : none;
    border-radius  : var(--r-md);
    font-family    : var(--fuente);
    font-size      : .9rem;
    font-weight    : 600;
    cursor         : pointer;
    transition     : all var(--t-med);
    letter-spacing : .01em;
    margin-top     : .35rem;
    position       : relative;
    overflow       : hidden;
}

.boton-enviar::after {
    content   : '';
    position  : absolute;
    inset     : 0;
    background: linear-gradient(rgba(255,255,255,.10), transparent);
    opacity   : 0;
    transition: opacity var(--t-fast);
    pointer-events: none;
}

.boton-enviar:hover::after { opacity: 1; }

.boton-enviar:hover {
    transform : translateY(-1px);
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
}

.boton-enviar:active { transform: translateY(0); }

.boton-enviar:disabled {
    opacity  : .5;
    cursor   : not-allowed;
    transform: none !important;
}

.boton-azul {
    background: var(--azul);
    color     : var(--blanco);
    box-shadow: 0 4px 16px rgba(0,40,85,.5);
}

.boton-rojo {
    background: var(--rojo);
    color     : var(--blanco);
    box-shadow: 0 4px 16px rgba(210,35,42,.45);
}

.texto-boton {
    display    : flex;
    align-items: center;
    gap        : .5rem;
}

.texto-boton svg { transition: transform var(--t-fast); }
.boton-enviar:hover .texto-boton svg { transform: translateX(3px); }

.spinner-boton {
    display    : flex;
    align-items: center;
    gap        : .55rem;
}

.spinner-anillo {
    width        : 16px;
    height       : 16px;
    border       : 2px solid rgba(255,255,255,.3);
    border-top   : 2px solid white;
    border-radius: 50%;
    animation    : girar .65s linear infinite;
    flex-shrink  : 0;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════
   MODALES
══════════════════════════════════════════════════════ */
.modal {
    display        : none;
    position       : fixed;
    inset          : 0;
    z-index        : 500;
    align-items    : center;
    justify-content: center;
    padding        : 1.25rem;
    background     : var(--overlay);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

.modal.activo {
    display  : flex;
    animation: fadeOverlay .2s ease;
}

@keyframes fadeOverlay { from { opacity: 0; } to { opacity: 1; } }

.modal-panel {
    background   : var(--modal-bg);
    border       : 1px solid var(--border);
    border-radius: var(--r-xl);
    padding      : 2.25rem 2rem;
    max-width    : 420px;
    width        : 100%;
    text-align   : center;
    box-shadow   : var(--shadow);
    animation    : panelEntrar .3s cubic-bezier(.34,1.56,.64,1);
}

@keyframes panelEntrar {
    from { transform: scale(.9) translateY(16px); opacity: 0; }
    to   { transform: scale(1)  translateY(0);    opacity: 1; }
}

.modal-icono-wrap {
    width          : 52px;
    height         : 52px;
    border-radius  : 50%;
    background     : rgba(26,111,212,.10);
    border         : 1px solid rgba(26,111,212,.2);
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin         : 0 auto 1.25rem;
    color          : #1a6fd4;
}

.icono-error {
    background: rgba(210,35,42,.10);
    border    : 1px solid rgba(210,35,42,.2);
    color     : #f87171;
}

.modal-titulo {
    font-size    : 1.15rem;
    font-weight  : 700;
    color        : var(--text-1);
    margin-bottom: .65rem;
    letter-spacing: -.02em;
}

.modal-desc {
    font-size  : .88rem;
    color      : var(--text-2);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.modal-nota {
    font-size    : .8rem;
    color        : var(--text-3);
    margin-bottom: 1.5rem;
}

.modal-acciones {
    display: flex;
    gap    : .6rem;
}

.btn-modal {
    flex        : 1;
    padding     : .72rem 1.25rem;
    border      : none;
    border-radius: var(--r-md);
    font-family : var(--fuente);
    font-size   : .85rem;
    font-weight : 600;
    cursor      : pointer;
    transition  : all var(--t-fast);
}

.btn-secundario {
    background  : var(--surface);
    border      : 1px solid var(--border);
    color       : var(--text-2);
}

.btn-secundario:hover {
    background  : var(--surface-hover);
    color       : var(--text-1);
}

.btn-primario {
    background: var(--azul);
    color     : var(--blanco);
    box-shadow: 0 4px 14px rgba(0,40,85,.45);
}

.btn-primario:hover { filter: brightness(1.12); }

.btn-exito {
    width     : 100%;
    background: #16a34a;
    color     : var(--blanco);
    box-shadow: 0 4px 14px rgba(22,163,74,.35);
}

.btn-exito:hover { filter: brightness(1.1); }

/* Check animado */
.check-wrap {
    width  : 64px;
    height : 64px;
    margin : 0 auto 1.25rem;
}

.check-svg { width: 100%; height: 100%; }

.check-circulo {
    stroke          : #22c55e;
    stroke-width    : 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation       : trazoCirculo .55s cubic-bezier(.65,0,.45,1) .2s forwards;
}

.check-marca {
    stroke          : #22c55e;
    stroke-width    : 2;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation       : trazoMarca .35s ease .78s forwards;
}

@keyframes trazoCirculo { to { stroke-dashoffset: 0; } }
@keyframes trazoMarca   { to { stroke-dashoffset: 0; } }

.id-negociacion { color: #1a6fd4; font-size: 1rem; }

.mensaje-error-detalle {
    font-size    : .78rem;
    color        : #f87171;
    margin-bottom: 1.25rem;
    font-style   : italic;
    min-height   : 1rem;
}

/* ═══════════════════════════════════════════════════════
   TOASTS
══════════════════════════════════════════════════════ */
#contenedor-toasts {
    position      : fixed;
    bottom        : 1.5rem;
    right         : 1.5rem;
    z-index       : 1000;
    display       : flex;
    flex-direction: column;
    gap           : .5rem;
    max-width     : 320px;
}

.toast {
    display     : flex;
    align-items : center;
    gap         : .65rem;
    padding     : .8rem 1.1rem;
    border-radius: var(--r-md);
    background  : var(--modal-bg);
    border      : 1px solid var(--border);
    box-shadow  : var(--shadow-sm);
    font-size   : .82rem;
    color       : var(--text-1);
    transform   : translateX(110%);
    opacity     : 0;
    transition  : all .28s cubic-bezier(.34,1.56,.64,1);
}

.toast.toast-visible { transform: translateX(0); opacity: 1; }

.toast-error { border-color: rgba(210,35,42,.3); }
.toast-exito { border-color: rgba(34,197,94,.3); }
.toast-icono { flex-shrink: 0; font-size: .95rem; }

/* ═══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.pie-pagina {
    position  : relative;
    z-index   : 1;
    text-align: center;
    padding   : 2rem 1.5rem;
    font-size : .76rem;
    color     : var(--text-3);
    border-top: 1px solid var(--border);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }



/* ═══════════════════════════════════════════════════════
   FONDO — LÍNEAS DE DATOS ANIMADAS
   Estilo fintech/SaaS: shimmer fluye como datos.
══════════════════════════════════════════════════════ */
.fondo-lineas {
    position      : fixed;
    inset         : 0;
    z-index       : 0;
    pointer-events: none;
    overflow      : hidden;
}

/* Líneas horizontales */
.linea-h {
    position  : absolute;
    left      : 0;
    width     : 100%;
    height    : 1px;
    overflow  : hidden;
}

.linea-h::before {
    content   : '';
    display   : block;
    position  : absolute;
    inset     : 0;
    background: rgba(255,255,255,.04);
}

.linea-h::after {
    content   : '';
    display   : block;
    height    : 100%;
    width     : 30%;
    background: linear-gradient(90deg, transparent 0%, rgba(26,111,212,.5) 50%, transparent 100%);
    animation : shimmerH linear infinite;
    will-change: transform;
}

[data-tema="claro"] .linea-h::before { background: rgba(0,40,130,.06); }
[data-tema="claro"] .linea-h::after  { background: linear-gradient(90deg, transparent, rgba(0,40,130,.28), transparent); }

.linea-h-1 { top: 18%; }
.linea-h-2 { top: 36%; }
.linea-h-3 { top: 58%; }
.linea-h-4 { top: 78%; }

.linea-h-1::after { animation-duration:  7s; animation-delay:   0s; }
.linea-h-2::after { animation-duration: 11s; animation-delay:  -3s; }
.linea-h-3::after { animation-duration:  9s; animation-delay:  -6s; }
.linea-h-4::after { animation-duration: 13s; animation-delay: -1.5s;}

@keyframes shimmerH {
    from { transform: translateX(-100%); }
    to   { transform: translateX(450%);  }
}

/* Líneas verticales */
.linea-v {
    position  : absolute;
    top       : 0;
    width     : 1px;
    height    : 100%;
    overflow  : hidden;
}

.linea-v::before {
    content   : '';
    display   : block;
    position  : absolute;
    inset     : 0;
    background: rgba(255,255,255,.03);
}

.linea-v::after {
    content   : '';
    display   : block;
    width     : 100%;
    height    : 25%;
    background: linear-gradient(180deg, transparent 0%, rgba(26,111,212,.42) 50%, transparent 100%);
    animation : shimmerV linear infinite;
    will-change: transform;
}

[data-tema="claro"] .linea-v::before { background: rgba(0,40,130,.05); }
[data-tema="claro"] .linea-v::after  { background: linear-gradient(180deg, transparent, rgba(0,40,130,.22), transparent); }

.linea-v-1 { left: 12%; }
.linea-v-2 { right: 12%; }

.linea-v-1::after { animation-duration:  8s; animation-delay: -2s; }
.linea-v-2::after { animation-duration: 10s; animation-delay: -5s; }

@keyframes shimmerV {
    from { transform: translateY(-100%); }
    to   { transform: translateY(500%);  }
}

/* Nodos en intersecciones */
.nodo {
    position     : absolute;
    width        : 5px;
    height       : 5px;
    border-radius: 50%;
    background   : rgba(26,111,212,.65);
    box-shadow   : 0 0 8px 2px rgba(26,111,212,.22);
    animation    : nodoParpadeo ease-in-out infinite alternate;
}

[data-tema="claro"] .nodo { background: rgba(0,40,130,.5); box-shadow: 0 0 8px 2px rgba(0,40,130,.15); }

.nodo-1 { top: calc(18% - 2px); left:  calc(12% - 2px); animation-duration: 3.2s; animation-delay:   0s; }
.nodo-2 { top: calc(36% - 2px); right: calc(12% - 2px); animation-duration: 4.1s; animation-delay:  -1s; }
.nodo-3 { top: calc(58% - 2px); left:  calc(12% - 2px); animation-duration: 3.7s; animation-delay:  -2s; }
.nodo-4 { top: calc(78% - 2px); right: calc(12% - 2px); animation-duration:   5s; animation-delay: -.5s; }

@keyframes nodoParpadeo {
    0%   { opacity: .3; transform: scale(.8); }
    100% { opacity:  1; transform: scale(1.5);}
}

/* Escáner — línea que baja lentamente */
.escaner {
    position   : absolute;
    left       : 0;
    width      : 100%;
    height     : 1px;
    background : linear-gradient(90deg, transparent 0%, rgba(26,111,212,.10) 15%, rgba(26,111,212,.28) 50%, rgba(26,111,212,.10) 85%, transparent 100%);
    box-shadow : 0 0 12px rgba(26,111,212,.12);
    animation  : escanerBajar 16s linear infinite;
    will-change: top;
}

[data-tema="claro"] .escaner { background: linear-gradient(90deg, transparent, rgba(0,40,130,.07) 20%, rgba(0,40,130,.16) 50%, rgba(0,40,130,.07) 80%, transparent); }

@keyframes escanerBajar {
    0%   { top: -2px;  opacity: 0; }
    4%   { opacity: 1; }
    96%  { opacity: 1; }
    100% { top: 100vh; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════
   LOGO MARCA DE AGUA — más visible
══════════════════════════════════════════════════════ */
.fondo-logo-marca {
    position       : fixed;
    inset          : 0;
    z-index        : 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
    pointer-events : none;
    overflow       : hidden;
}

.logo-marca-agua {
    width           : min(80vw, 760px);
    height          : auto;
    object-fit      : contain;
    user-select     : none;
    transform-origin: center center;
    animation       : marcaFlotarLenta 22s ease-in-out infinite alternate;
}

/* Watermark por defecto */
[data-tema="oscuro"] .logo-marca-agua { opacity: .09; filter: brightness(0) invert(1); }
[data-tema="claro"]  .logo-marca-agua { opacity: .10; filter: brightness(0) saturate(0); }

/* ═══════════════════════════════════════════════════════
   SPLASH DE INTRO
══════════════════════════════════════════════════════ */
#intro-splash {
    position  : fixed;
    inset     : 0;
    z-index   : 9999;
    display   : flex;
    align-items    : center;
    justify-content: center;
    background: var(--bg);
    transition: opacity .35s ease, visibility .35s ease;
}

#intro-splash.saliendo {
    pointer-events: none;
}

.intro-splash-logo {
    width    : min(65vw, 480px);
    height   : auto;
    position : relative;
    z-index  : 1;
    animation: splashLogoEntrar 0.55s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes splashLogoEntrar {
    0%   { opacity: 0; transform: scale(.8) translateY(16px); }
    60%  { opacity: 1; transform: scale(1.03) translateY(0);  }
    100% { opacity: 1; transform: scale(1)   translateY(0);   }
}

/* Órbita de triángulos en el splash */
@keyframes orbitarTri {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

@keyframes marcaFlotarLenta {
    0%   { transform: scale(1)    translateY(0px);   }
    50%  { transform: scale(1.02) translateY(-14px); }
    100% { transform: scale(.99)  translateY(8px);   }
}

.orbe-4 {
    width: 500px; height: 500px;
    bottom: 10%; right: 5%;
    background: radial-gradient(circle, rgba(210,35,42,.10) 0%, transparent 70%);
    animation-duration: 40s;
    animation-direction: alternate;
    animation-delay: -20s;
}

/* ═══════════════════════════════════════════════════════
   SCROLL REVEAL 3D
══════════════════════════════════════════════════════ */
.sr-oculto {
    opacity   : 0;
    transform : perspective(700px) translateY(50px) rotateX(-9deg);
}

.sr-visible {
    opacity   : 1;
    transform : perspective(700px) translateY(0) rotateX(0deg);
    transition: opacity .7s cubic-bezier(.22,1,.36,1),
                transform .7s cubic-bezier(.22,1,.36,1);
}

.sr-hijo {
    opacity   : 0;
    transform : translateY(20px);
    transition: opacity .5s cubic-bezier(.22,1,.36,1),
                transform .5s cubic-bezier(.22,1,.36,1);
    transition-delay: calc(var(--sr-i,0) * 60ms + 200ms);
}

.sr-visible .sr-hijo { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════
   ENTRADA INICIAL
══════════════════════════════════════════════════════ */
@keyframes entradaArriba {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.animar-entrada                { opacity: 0; animation: entradaArriba .7s cubic-bezier(.22,1,.36,1) forwards; }
.animar-entrada-delay-1        { animation-delay: .15s; }
.animar-entrada-delay-2        { animation-delay: .28s; }

/* ═══════════════════════════════════════════════════════
   TIPEO HERO
══════════════════════════════════════════════════════ */
.titulo-linea-acento.tipeo-activo { border-right: 2px solid currentColor; animation: parpadearCursor .6s step-end infinite; }

@keyframes parpadearCursor {
    0%,100% { border-color: currentColor; }
    50%      { border-color: transparent; }
}

/* ═══════════════════════════════════════════════════════
   RIPPLE
══════════════════════════════════════════════════════ */
.ripple-ola {
    position: absolute; border-radius: 50%;
    width: 10px; height: 10px;
    background: rgba(255,255,255,.22);
    transform: translate(-50%,-50%) scale(0);
    animation: rippleExpand .55s ease-out forwards;
    pointer-events: none;
}
@keyframes rippleExpand { to { transform: translate(-50%,-50%) scale(28); opacity: 0; } }

/* ═══════════════════════════════════════════════════════
   TARJETA, TABS, BOTONES, CAMPOS, NAV, MODAL
══════════════════════════════════════════════════════ */
.tarjeta-cuerpo { position: relative; z-index: 1; }

.tarjeta { transition: box-shadow var(--t-med), border-color var(--t-med), transform var(--t-med); }
.tarjeta:hover { border-color: rgba(26,111,212,.18); transform: translateY(-3px); box-shadow: 0 32px 72px rgba(0,0,0,.65); }
[data-tema="claro"] .tarjeta:hover { border-color: rgba(0,40,130,.18); box-shadow: 0 32px 72px rgba(0,30,80,.18); }

.tira-azul { background: linear-gradient(90deg, var(--azul) 0%, #1a6fd4 50%, var(--azul) 100%); background-size: 200% 100%; animation: tiraShimmer 3.5s linear infinite; }
.tira-roja { background: linear-gradient(90deg, var(--rojo) 0%, #ff7b7b 50%, var(--rojo) 100%); background-size: 200% 100%; animation: tiraShimmer 3.5s linear infinite; }
@keyframes tiraShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

.icono-azul { box-shadow: 0 0 20px rgba(26,111,212,.15); }
.icono-rojo { box-shadow: 0 0 20px rgba(210,35,42,.12);  }

.boton-azul { animation: glowAzul 2.8s ease-in-out infinite; }
.boton-rojo { animation: glowRojo 2.8s ease-in-out infinite; }
@keyframes glowAzul {
    0%,100% { box-shadow: 0 4px 18px rgba(0,40,85,.5),     0 0 0 0   rgba(26,111,212,.3); }
    50%      { box-shadow: 0 6px 28px rgba(0,40,85,.6), 0 0 14px 4px rgba(26,111,212,.15); }
}
@keyframes glowRojo {
    0%,100% { box-shadow: 0 4px 18px rgba(210,35,42,.45),   0 0 0 0   rgba(240,85,85,.3); }
    50%      { box-shadow: 0 6px 28px rgba(210,35,42,.55), 0 0 14px 4px rgba(240,85,85,.15); }
}

.campo:focus { box-shadow: 0 0 0 3px rgba(26,111,212,.15), 0 0 20px rgba(26,111,212,.06); }

.selector-tab { transition: all var(--t-med), transform 120ms ease; }
.selector-tab:active { transform: scale(0.97); }

/* Indicador de pestaña activa */
.selector-tab.activo {
    box-shadow  : var(--shadow-sm), 0 0 0 1.5px rgba(26,111,212,.25) !important;
}
.selector-tab[data-pestana="soporte"].activo  { border-bottom: 2px solid var(--azul-mid) !important; }
.selector-tab[data-pestana="proyectos"].activo { border-bottom: 2px solid var(--rojo) !important; }

.selector-tab.activo .tab-icono {
    box-shadow: 0 0 14px rgba(0,40,130,.4);
    animation : tabIconoPulso 2.5s ease-in-out infinite;
}
.selector-tab[data-pestana="proyectos"].activo .tab-icono {
    animation : tabIconoPulsoRojo 2.5s ease-in-out infinite;
}

@keyframes tabIconoPulso {
    0%, 100% { box-shadow: 0 0 10px rgba(0,40,130,.35); }
    50%       { box-shadow: 0 0 20px rgba(0,74,200,.6), 0 0 8px rgba(26,111,212,.3); }
}
@keyframes tabIconoPulsoRojo {
    0%, 100% { box-shadow: 0 0 10px rgba(210,35,42,.35); }
    50%       { box-shadow: 0 0 20px rgba(210,35,42,.6), 0 0 8px rgba(240,85,85,.3); }
}

.hero-kicker {
    background: linear-gradient(90deg, var(--text-3) 0%, #1a6fd4 50%, var(--text-3) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: kickerShimmer 4s linear infinite;
}
@keyframes kickerShimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

.barra-navegacion { border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 0 rgba(26,111,212,.06), 0 4px 20px rgba(0,0,0,.15); }

.zona-drop:hover { border-color: var(--border-focus); background: rgba(26,111,212,.06); box-shadow: 0 0 20px rgba(26,111,212,.08); color: var(--text-2); }

.modal-panel       { box-shadow: var(--shadow), 0 0 60px rgba(26,111,212,.06);  }
.modal-panel-exito { box-shadow: var(--shadow), 0 0 50px rgba(34,197,94,.08);   }
.modal-panel-error { box-shadow: var(--shadow), 0 0 50px rgba(210,35,42,.08);   }

/* ═══════════════════════════════════════════════════════
   PARTÍCULAS FLOTANTES
══════════════════════════════════════════════════════ */
.fondo-particulas {
    position      : fixed;
    inset         : 0;
    z-index       : 0;
    pointer-events: none;
    overflow      : hidden;
}

.particula {
    position      : absolute;
    background    : linear-gradient(135deg, var(--blanco) 0%, var(--particle-color, var(--secondary)) 55%, rgba(255,255,255,.18) 100%);
    clip-path     : polygon(50% 0%, 0% 100%, 100% 100%);
    animation     : particulaFlotando ease-in-out infinite;
    opacity       : var(--op, .75);
    box-shadow    : 0 0 10px rgba(255,255,255,.75),
                    0 0 18px color-mix(in srgb, var(--particle-color, var(--secondary)) 85%, white 15%),
                    0 0 34px color-mix(in srgb, var(--particle-color, var(--secondary)) 58%, transparent 42%);
    filter        : saturate(1.35) brightness(1.25);
    transform     : rotate(0deg);
    will-change   : transform, opacity;
}

[data-tema="claro"] .particula {
    box-shadow: 0 0 8px rgba(255,255,255,.55),
                0 0 16px color-mix(in srgb, var(--particle-color, var(--secondary)) 50%, white 12%),
                0 0 28px color-mix(in srgb, var(--particle-color, var(--secondary)) 30%, transparent 70%);
}

@keyframes particulaFlotando {
    0%   { transform: translate(0, 0) rotate(0deg) scale(.7); opacity: calc(var(--op, .75) * .6); }
    20%  { transform: translate(calc(var(--cx) * .55), calc(var(--cy) * -.4)) rotate(14deg) scale(var(--scale-mid, 1.45)); opacity: var(--op, .75); }
    45%  { transform: translate(var(--dx), calc(var(--dy) * -.45)) rotate(-18deg) scale(calc(var(--scale-mid, 1.45) * .92)); opacity: 1; }
    70%  { transform: translate(calc(var(--dx) * .45), calc(var(--dy) * .7)) rotate(10deg) scale(var(--scale-end, 1.1)); opacity: calc(var(--op, .75) * .9); }
    100% { transform: translate(0, 0) rotate(0deg) scale(.8); opacity: calc(var(--op, .75) * .45); }
}

/* ═══════════════════════════════════════════════════════
   CARRUSEL DE FUNCIONALIDADES
══════════════════════════════════════════════════════ */
.carrusel-wrap {
    position  : relative;
    z-index   : 1;
    max-width : 1080px;
    margin    : 0 auto 1.5rem;
    padding   : 0 1.25rem;
    overflow  : hidden;
}

.carrusel-pista {
    display        : flex;
    gap            : 1.1rem;
    transition     : transform .5s cubic-bezier(.22,1,.36,1);
    will-change    : transform;
    padding-bottom : .5rem;
}

/* Cada card: forzar ancho 1/3 de la pista */
.carrusel-card {
    flex           : 0 0 calc((100% - 2.2rem) / 3);
    background     : var(--surface);
    border         : 1px solid var(--border);
    border-radius  : var(--r-lg);
    padding        : 1.4rem 1.5rem 1.3rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition     : transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
    cursor         : default;
}

.carrusel-card:hover {
    transform   : translateY(-4px);
    border-color: rgba(26,111,212,.22);
    box-shadow  : 0 16px 40px rgba(0,0,0,.35);
}

@media (max-width: 900px) {
    .carrusel-card { flex: 0 0 calc((100% - 1.1rem) / 2); }
}

@media (max-width: 560px) {
    .carrusel-card { flex: 0 0 100%; }
}

/* Ícono */
.cc-icono {
    width          : 42px;
    height         : 42px;
    border-radius  : var(--r-md);
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-bottom  : 1rem;
    flex-shrink    : 0;
}

.cc-icono-azul  { background: rgba(26,111,212,.12); color: #1a6fd4; border: 1px solid rgba(26,111,212,.2); }
.cc-icono-rojo  { background: rgba(210,35,42,.10);  color: #f05555; border: 1px solid rgba(210,35,42,.18);}
.cc-icono-verde { background: rgba(34,197,94,.10);  color: #22c55e; border: 1px solid rgba(34,197,94,.2); }

[data-tema="claro"] .cc-icono-azul  { background: rgba(0,40,130,.08);  color: var(--azul); }
[data-tema="claro"] .cc-icono-rojo  { background: rgba(210,35,42,.07); color: var(--rojo); }
[data-tema="claro"] .cc-icono-verde { background: rgba(22,163,74,.08); color: #16a34a;     }

.cc-titulo {
    font-size    : .95rem;
    font-weight  : 700;
    color        : var(--text-1);
    margin-bottom: .4rem;
    letter-spacing: -.01em;
}

.cc-desc {
    font-size  : .8rem;
    color      : var(--text-2);
    line-height: 1.6;
    margin-bottom: .85rem;
}

.cc-tag {
    display      : inline-block;
    font-size    : .68rem;
    font-weight  : 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color        : var(--text-3);
    padding      : .22rem .6rem;
    background   : var(--surface);
    border       : 1px solid var(--border);
    border-radius: var(--r-pill);
}

/* Controles del carrusel */
.carrusel-controles {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : .75rem;
    margin-top     : 1.1rem;
}

.cc-btn {
    width         : 32px;
    height        : 32px;
    border-radius : 50%;
    border        : 1px solid var(--border);
    background    : var(--surface);
    color         : var(--text-2);
    display       : flex;
    align-items   : center;
    justify-content: center;
    cursor        : pointer;
    transition    : all var(--t-fast);
    flex-shrink   : 0;
    font-family   : var(--fuente);
}

.cc-btn:hover {
    background  : rgba(26,111,212,.12);
    border-color: rgba(26,111,212,.3);
    color       : var(--text-1);
    transform   : scale(1.08);
}

.cc-dots { display: flex; gap: .45rem; align-items: center; }

.cc-dot {
    width         : 7px;
    height        : 7px;
    border-radius : 50%;
    border        : none;
    background    : var(--border);
    cursor        : pointer;
    transition    : all .25s ease;
    padding       : 0;
    font-family   : var(--fuente);
}

.cc-dot.activo {
    background  : #1a6fd4;
    width       : 20px;
    border-radius: var(--r-pill);
    box-shadow  : 0 0 8px rgba(26,111,212,.4);
}

/* ═══════════════════════════════════════════════════════
   PANEL PRÓXIMAMENTE (Proyectos)
══════════════════════════════════════════════════════ */
.proximamente-wrap {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    text-align     : center;
    padding        : 3.5rem 2rem;
    gap            : .75rem;
}

.proximamente-icono {
    width          : 64px;
    height         : 64px;
    border-radius  : var(--r-lg);
    background     : rgba(210,35,42,.10);
    border         : 1px solid rgba(210,35,42,.18);
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : #f05555;
    margin-bottom  : .5rem;
    animation      : glowRojo 2.8s ease-in-out infinite;
}

.proximamente-titulo {
    font-size    : 1.2rem;
    font-weight  : 700;
    color        : var(--text-1);
    letter-spacing: -.02em;
}

.proximamente-sub {
    font-size : .8rem;
    color     : var(--text-3);
    font-weight: 500;
}

.proximamente-badge {
    display      : inline-block;
    font-size    : .7rem;
    font-weight  : 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color        : #f05555;
    background   : rgba(210,35,42,.10);
    border       : 1px solid rgba(210,35,42,.2);
    border-radius: var(--r-pill);
    padding      : .28rem .85rem;
    margin       : .25rem 0;
}

.proximamente-desc {
    font-size  : .85rem;
    color      : var(--text-2);
    line-height: 1.65;
    max-width  : 360px;
    margin-top : .25rem;
}

/* ═══════════════════════════════════════════════════════
   SELECTOR TIPO PROYECTO
══════════════════════════════════════════════════════ */
.proyecto-selector-pregunta {
    font-size  : .9rem;
    color      : var(--text-2);
    margin     : .5rem 0 1.25rem;
}

.proyecto-opciones {
    display       : flex;
    flex-direction: column;
    gap           : .85rem;
}

.proyecto-opcion {
    display        : flex;
    align-items    : center;
    gap            : 1rem;
    width          : 100%;
    padding        : 1.1rem 1.25rem;
    background     : var(--surface);
    border         : 1px solid var(--border);
    border-radius  : var(--r-md);
    cursor         : pointer;
    text-align     : left;
    transition     : background var(--t-med), border-color var(--t-med), transform var(--t-fast);
}

.proyecto-opcion:hover {
    background   : var(--surface-hover);
    border-color : var(--border-focus);
    transform    : translateY(-1px);
}

.proyecto-opcion:active {
    transform: translateY(0);
}

.proyecto-opcion-icono {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 48px;
    height         : 48px;
    border-radius  : var(--r-md);
    flex-shrink    : 0;
}

.proyecto-opcion-icono-azul {
    background: rgba(10, 74, 159, .15);
    color     : #1a6fd4;
}

.proyecto-opcion-icono-rojo {
    background: rgba(210, 35, 42, .12);
    color     : #f05555;
}

.proyecto-opcion-texto {
    display       : flex;
    flex-direction: column;
    gap           : .22rem;
    flex          : 1;
}

.proyecto-opcion-titulo {
    font-size  : .92rem;
    font-weight: 600;
    color      : var(--text-1);
    line-height: 1.3;
}

.proyecto-opcion-sub {
    font-size: .78rem;
    color    : var(--text-2);
}

.proyecto-opcion-flecha {
    color      : var(--text-3);
    flex-shrink: 0;
    transition : transform var(--t-fast), color var(--t-fast);
}

.proyecto-opcion:hover .proyecto-opcion-flecha {
    color    : var(--text-1);
    transform: translateX(3px);
}

/* Botón volver */
.btn-volver-proyecto {
    display     : inline-flex;
    align-items : center;
    gap         : .4rem;
    font-size   : .8rem;
    font-weight : 500;
    color       : var(--text-2);
    background  : transparent;
    border      : none;
    cursor      : pointer;
    padding     : .3rem .1rem;
    margin-bottom: .4rem;
    transition  : color var(--t-fast);
}

.btn-volver-proyecto:hover { color: var(--text-1); }

/* Botón rojo enviar */
.boton-rojo {
    background: linear-gradient(135deg, #D2232A 0%, #a01820 100%);
    box-shadow: 0 4px 18px rgba(210,35,42,.35);
}

.boton-rojo:hover {
    box-shadow: 0 6px 24px rgba(210,35,42,.5);
    transform : translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}