/* ===== Paleta Altitud 100K (morado/azul) ===== */
:root{
  --navy:#02183D;     /* azul noche */
  --ink:#FFFFFF;
  --muted:#B8C6E3;
  --violet:#913793;   /* morado */
  --violet-2:#a651ad; /* morado claro */
  --blue:#58C6FF;     /* celeste acento */
  --surface:#0B1430;
  --outline:#ffffff22;
  --radius:16px;
  --shadow: 0 18px 40px rgba(0,0,0,.35);
/* Neón (nuevo) */
  --neon-mint:#00FFD1;
  --neon-cyan:#00E1FF;
  --neon-magenta:#FF7AF0;
  --neon-lime:#7CFF00;

  /* Intensidad del velo (0.55–0.9 recomendado) */
  --veil: .72;
}


}

*{box-sizing:border-box}
html,body{height:100%}


body{
  margin:0;
  color:var(--ink);
  font-family: system-ui, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.55;

  /* ======= EFECTO DE FONDO MULTICOLOR + NEÓN (reactivo al puntero) ======= */
  --x: calc(var(--posX, 0) * 1px);
  --y: calc(var(--posY, 0) * 1px);

  /* Capas: combinamos paleta Altitud (fucsia, naranja, violeta, vino, azul, amarillo)
     + acentos neón (mint, cyan, magenta, lime) */
  background-image:
    /* 1) Velo general para contraste del contenido */
    linear-gradient(120deg, rgba(8,12,30,var(--veil)), rgba(0,0,0,calc(var(--veil) + .1))),

    /* 2) Morado base (Altitud) */
    radial-gradient(110% 130% at calc( 15% + var(--x)) calc(  0% + var(--y)),
                    color-mix(in srgb, var(--violet) 88%, #000 12%), rgba(12, 0, 30, 0.05)),

    /* 3) Fucsia Altitud */
    radial-gradient(90% 120% at calc( 35% - var(--x)) calc( 10% - var(--y)),
                    #F21651, rgba(40, 0, 25, 0.10)),

    /* 4) Naranja Altitud */
    radial-gradient(100% 120% at calc( 60% + var(--x)) calc(  8% + var(--y)),
                    #F9921C, rgba(40, 20, 0, 0.10)),

    /* 5) Azul/celeste Altitud */
    radial-gradient(120% 140% at calc( 80% - var(--x)) calc(  0% - var(--y)),
                    #58C6FF, rgba(  6,  8, 40, 0.12)),

    /* 6) Amarillo Altitud */
    radial-gradient(100% 120% at calc( 85% + var(--x)) calc( 25% + var(--y)),
                    #FFD66B, rgba( 40, 30,  0, 0.10)),

    /* 7) Vino Altitud */
    radial-gradient(120% 150% at calc(  5% - var(--x)) calc( 35% - var(--y)),
                    #8C1C3F, rgba( 30,  0, 10, 0.10)),

    /* 8) NEÓN mint */
    radial-gradient(90% 110% at calc( 20% + var(--x)) calc( 70% + var(--y)),
                    color-mix(in srgb, var(--neon-mint) 85%, #00a08a 15%), transparent),

    /* 9) NEÓN cyan */
    radial-gradient(90% 110% at calc( 55% - var(--x)) calc( 65% - var(--y)),
                    color-mix(in srgb, var(--neon-cyan) 85%, #0070a8 15%), transparent),

    /* 10) NEÓN magenta */
    radial-gradient(100% 120% at calc( 80% + var(--x)) calc( 60% + var(--y)),
                    color-mix(in srgb, var(--neon-magenta) 85%, #7a2b86 15%), transparent),

    /* 11) NEÓN lime */
    radial-gradient(110% 130% at calc( 40% - var(--x)) calc( 85% - var(--y)),
                    color-mix(in srgb, var(--neon-lime) 85%, #2f6b00 15%), transparent),

    /* 12) Base navy */
    linear-gradient(60deg, #02183D, #061232);

  /* Mezcla: más “luz” en neones y celestes, y overlay para morados/naranjas */
  background-blend-mode:
    overlay,       /* velo */
    overlay,       /* morado base */
    overlay,       /* fucsia */
    overlay,       /* naranja */
    screen,        /* azul celeste */
    color-dodge,   /* amarillo */
    overlay,       /* vino */
    lighten,       /* neon mint */
    screen,        /* neon cyan */
    lighten,       /* neon magenta */
    screen,        /* neon lime */
    normal;        /* base navy */

  background-attachment: fixed;
}





/* ===== Layout ===== */
.wrap{ max-width:1100px; margin:0 auto; padding:0 20px }

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg,#020a1dcc,#020a1d99 70%,transparent);
  border-bottom:1px solid var(--outline);
  backdrop-filter: blur(6px);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:68px }
.brand{ display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink) }
.brand-logo{ width:36px; height:36px; object-fit:contain }
.brand-text{ font-weight:900; letter-spacing:1px }
.brand-text span{ color:var(--violet) }

.mainnav{ display:flex; gap:18px; align-items:center }
.mainnav a{ color:var(--ink); text-decoration:none; opacity:.92; text-transform:uppercase; letter-spacing:.06em; font-weight:800 }
.mainnav a:hover{ opacity:1; color:var(--blue) }

.btn{
  display:inline-block;
  background:linear-gradient(180deg,var(--violet),var(--violet-2));
  color:#fff; padding:10px 14px; border-radius:12px;
  text-decoration:none; font-weight:900; border:1px solid transparent;
  box-shadow: 0 10px 24px rgba(145,55,147,.25);
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn.small{ padding:8px 12px }

/* ===== Bloque principal ===== */
.hero-invest{
  position:relative;
  padding:84px 0 100px;
}
.panel{
  background: rgba(6, 12, 30, .55);
  border:1px solid var(--outline);
  border-radius: 18px;
  padding: 28px 24px;
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: var(--shadow);
}
.panel h1{
  font-size: clamp(36px, 6vw, 64px);
  margin: 0 0 8px;
}
.lead{
  color: var(--muted);
  max-width: 900px;
  margin-bottom: 18px;
}

/* ===== Botones de líneas ===== */
.lineas{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.chip{
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:14px 16px; min-height:56px;
  border-radius: 14px; text-decoration:none; font-weight:900;
  letter-spacing:.2px; border:1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.chip:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow: 0 12px 30px rgba(0,0,0,.25) }

.chip-violet{
  color:#fff;
  background: linear-gradient(180deg, var(--violet), var(--violet-2));
  border-color: #ffffff25;
}
.chip-blue{
  color:#081020;
  background: linear-gradient(180deg, #7ed0ff, #58C6FF);
  border-color: #ffffff25;
}

/* ===== Footer ===== */
.foot{ border-top:1px solid var(--outline); padding:20px 0; color:#c2cee8; background:#061232 }
.foot-flex{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.foot-nav{ display:flex; gap:14px }
.foot-nav a{ color:#c2cee8; text-decoration:none; font-weight:700 }
.foot-nav a:hover{ color:#fff }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .lineas{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 560px){
  .lineas{ grid-template-columns: 1fr }
}


/* ===== Firma inline en el footer ===== */
.foot-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;                 /* permite que salte a dos líneas en móvil */
}

/* Texto del copy + firma en la misma línea */
.foot-copy{
  display:flex;
  align-items:center;
  gap:0;
  color: var(--muted, #9FB3D1);
  opacity:.92;
}

/* Separador sutil entre copy y firma */
.foot-copy .sig{
  margin-left:12px;
  padding-left:12px;
  border-left:1px dashed var(--outline, #ffffff22);
  opacity:.85;
  white-space:nowrap;
}

.foot-copy .sig a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dotted currentColor;
}

.foot-copy .sig a:hover{
  color: var(--ink, #ffffff);
  border-bottom-color: transparent;
}

/* En pantallas pequeñas, deja que todo respire */
@media (max-width:640px){
  .foot-flex{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
  }

  .foot-copy .sig{
    margin-left:10px;
    padding-left:10px;
    border-left-color: transparent;   /* sin barra en móvil */
    border-top:1px dashed var(--outline, #ffffff22);
    margin-top:6px;
    padding-top:6px;
  }
}