* {
  text-decoration: none !important;
}


/* Letra */

body {
  font-family: "Open Sans", sans-serif;
}

:root {
    /* ================================
       PRIMARIO
    ================================= */
    --color-primario:               #917d98;
    --color-primario-hover:         #a894b0;
    --color-primario-active:        #7a6781;
    --color-primario-subtle:        #e8e1eb;
    --color-primario-subtle-focus:  #e8e1eb80;
    --color-primario-focus:         #917d9880;

    /* ================================
       SECUNDARIO
    ================================= */
    --color-secundario:             #c4c4a9;
    --color-secundario-hover:       #d4d4ba;
    --color-secundario-active:      #aaaa91;
    --color-secundario-subtle:      #f4f4e8;
    --color-secundario-subtle-focus:#f4f4e880;
    --color-secundario-focus:       #c4c4a980;

    /* ================================
    ACENTADO (TERCIARIO)
    ================================= */
    --color-acentado:               #713d7d;
    --color-acentado-hover:         #894e96;
    --color-acentado-active:        #5e3262;
    --color-acentado-subtle:        #e9d9ec;
    --color-acentado-subtle-focus:  #e9d9ec80;
    --color-acentado-focus:         #713d7d80;

    /* ================================
    FONDO OSCURO
    ================================= */
    --color-fondo:                  #0d0c12;
    --color-fondo-hover:            #1e1d23;
    --color-fondo-active:           #060508;
    --color-fondo-subtle:           #cfcfd4;
    --color-fondo-subtle-focus:     #cfcfd480;
    --color-fondo-focus:            #0d0c1280;

    /* ================================
    DESTAQUE / RESALTADO
    ================================= */
    --color-destaque:               #73bfbd;
    --color-destaque-hover:         #88d1cf;
    --color-destaque-active:        #5ba2a0;
    --color-destaque-subtle:        #d6f3f2;
    --color-destaque-subtle-focus:  #d6f3f280;
    --color-destaque-focus:         #73bfbd80;

    /* ================================
    BLANCO NEUTRO
    ================================= */
    --color-blanco:                 #ffffff;
    --color-blanco-hover:           #f5f5f5;
    --color-blanco-active:          #e6e6e6;
    --color-blanco-subtle:          #ffffff;
    --color-blanco-subtle-focus:    #ffffff80;
    --color-blanco-focus:           #ffffff80;
}

/* ================================
Botones degradado 
================================ */
/* .btn-degradado {
  background: linear-gradient(to right, var(--color-acentado), var(--color-primario));
  color: var(--color-blanco);
  border: none;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 0.375rem;
  transition: background 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-degradado:hover {
  background: linear-gradient(to right, var(--color-acentado-active), var(--color-primario-active));
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
} */

.btn-degradado {
  background: linear-gradient(135deg, var(--color-acentado), var(--color-destaque));
  color: var(--color-blanco);
  border: none;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 0.5rem;
  transition: background 0.3s ease, transform 0.3s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.btn-degradado:hover {
  background: linear-gradient(135deg, var(--color-acentado-hover), var(--color-destaque-hover));
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}


/*=============================================
Textos degradados
=============================================*/
.titulo-degradado {
  background: linear-gradient(to right, var(--color-acentado), var(--color-primario-active));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.15); 
}

/* .text-degradado {
  background: linear-gradient(to right, var(--color-acentado), var(--color-primario-active));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
} */

/* .text-degradado {
  background: linear-gradient(to right, var(--color-acentado), var(--color-destaque));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
} */

.text-degradado {
  background: linear-gradient(to right, var(--color-acentado), var(--color-secundario));
    background: 
        radial-gradient(circle at 75% 25%, rgba(106, 215, 229, 0.2), transparent 200px),
        radial-gradient(circle at 20% 70%, rgba(123, 63, 150, 0.25), transparent 300px),
        linear-gradient(120deg, #6AD7E5, #7D3B8A, #000000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}

/*=============================================
Backgrounds degradado
=============================================*/
.bg-degradado{
    background: linear-gradient(to right, var(--color-destaque-active), var(--color-secundario));
    background: 
        radial-gradient(circle at 75% 25%, rgba(106, 215, 229, 0.2), transparent 200px),
        radial-gradient(circle at 20% 70%, rgba(123, 63, 150, 0.25), transparent 300px),
        linear-gradient(120deg, #6AD7E5, #7D3B8A, #000000);
}

/*=============================================
//Backgrounds
=============================================*/

/* ================================
Colores de fondo base
================================ */
.bg-primario           { background-color: var(--color-primario); }
.bg-secundario         { background-color: var(--color-secundario); }
.bg-acentado           { background-color: var(--color-acentado); }
.bg-fondo              { background-color: var(--color-fondo); }
.bg-destaque           { background-color: var(--color-destaque); }
.bg-blanco             { background-color: var(--color-blanco); }

/* ================================
Estados hover
================================ */
.bg-primario-hover           { background-color: var(--color-primario-hover); }
.bg-secundario-hover         { background-color: var(--color-secundario-hover); }
.bg-acentado-hover           { background-color: var(--color-acentado-hover); }
.bg-fondo-hover              { background-color: var(--color-fondo-hover); }
.bg-destaque-hover           { background-color: var(--color-destaque-hover); }
.bg-blanco-hover             { background-color: var(--color-blanco-hover); }

/* ================================
Estados subtle
================================ */
.bg-primario-subtle          { background-color: var(--color-primario-subtle); }
.bg-secundario-subtle        { background-color: var(--color-secundario-subtle); }
.bg-acentado-subtle          { background-color: var(--color-acentado-subtle); }
.bg-fondo-subtle             { background-color: var(--color-fondo-subtle); }
.bg-destaque-subtle          { background-color: var(--color-destaque-subtle); }
.bg-blanco-subtle            { background-color: var(--color-blanco-subtle); }

/* ================================
Estados focus
================================ */
.bg-primario-focus           { background-color: var(--color-primario-focus); }
.bg-secundario-focus         { background-color: var(--color-secundario-focus); }
.bg-acentado-focus           { background-color: var(--color-acentado-focus); }
.bg-fondo-focus              { background-color: var(--color-fondo-focus); }
.bg-destaque-focus           { background-color: var(--color-destaque-focus); }
.bg-blanco-focus             { background-color: var(--color-blanco-focus); }




/* ================================
Botones primario
================================ */
.btn-primario {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-primario:hover {
    background-color: var(--color-primario-hover);
}

.btn-primario:active {
    background-color: var(--color-primario-active);
}

.btn-primario:focus {
    outline: 2px solid var(--color-primario-focus);
    outline-offset: 2px;
}

.btn-primario:disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Outline version */
.btn-primario-outline {
    background-color: transparent;
    color: var(--color-primario);
    border: 2px solid var(--color-primario);
}

.btn-primario-outline:hover {
    background-color: var(--color-primario-subtle);
    color: var(--color-primario-hover);
}


/* ================================
Botones secundario
================================ */
.btn-secundario {
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

.btn-secundario:active {
    background-color: var(--color-secundario-active);
}

.btn-secundario:focus {
    outline: 2px solid var(--color-secundario-focus);
    outline-offset: 2px;
}

.btn-secundario:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.btn-secundario-outline {
    background-color: transparent;
    color: var(--color-secundario);
    border: 2px solid var(--color-secundario);
}

.btn-secundario-outline:hover {
    background-color: var(--color-secundario-subtle);
    color: var(--color-secundario-hover);
}


/* ================================
Botones acentado
================================ */
.btn-acentado {
    background-color: var(--color-acentado);
    color: var(--color-blanco);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-acentado:hover {
    background-color: var(--color-acentado-hover);
}

.btn-acentado:active {
    background-color: var(--color-acentado-active);
}

.btn-acentado:focus {
    outline: 2px solid var(--color-acentado-focus);
    outline-offset: 2px;
}

.btn-acentado:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.btn-acentado-outline {
    background-color: transparent;
    color: var(--color-acentado);
    border: 2px solid var(--color-acentado);
}

.btn-acentado-outline:hover {
    background-color: var(--color-acentado-subtle);
    color: var(--color-acentado-hover);
}


/* ================================
Botones fondo
================================ */
.btn-fondo {
    background-color: var(--color-fondo);
    color: var(--color-blanco);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-fondo:hover {
    background-color: var(--color-fondo-hover);
}

.btn-fondo:active {
    background-color: var(--color-fondo-active);
}

.btn-fondo:focus {
    outline: 2px solid var(--color-fondo-focus);
    outline-offset: 2px;
}

.btn-fondo:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.btn-fondo-outline {
    background-color: transparent;
    color: var(--color-fondo);
    border: 2px solid var(--color-fondo);
}

.btn-fondo-outline:hover {
    background-color: var(--color-fondo-subtle);
    color: var(--color-fondo-hover);
}


/* ================================
Botones destaque
================================ */
.btn-destaque {
    background-color: var(--color-destaque);
    color: var(--color-blanco);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-destaque:hover {
    background-color: var(--color-destaque-hover);
}

.btn-destaque:active {
    background-color: var(--color-destaque-active);
}

.btn-destaque:focus {
    outline: 2px solid var(--color-destaque-focus);
    outline-offset: 2px;
}

.btn-destaque:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.btn-destaque-outline {
    background-color: transparent;
    color: var(--color-destaque);
    border: 2px solid var(--color-destaque);
}

.btn-destaque-outline:hover {
    background-color: var(--color-destaque-subtle);
    color: var(--color-destaque-hover);
}


/* ================================
Botones blanco
================================ */
.btn-blanco {
    background-color: var(--color-blanco);
    color: var(--color-fondo);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-blanco:hover {
    background-color: var(--color-blanco-hover);
}

.btn-blanco:active {
    background-color: var(--color-blanco-active);
}

.btn-blanco:focus {
    outline: 2px solid var(--color-blanco-focus);
    outline-offset: 2px;
}

.btn-blanco:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.btn-blanco-outline {
    background-color: transparent;
    color: var(--color-blanco);
    border: 2px solid var(--color-blanco);
}

.btn-blanco-outline:hover {
    background-color: var(--color-blanco-subtle);
    color: var(--color-blanco-hover);
}

/* ================================
Colores de texto primario
================================ */
.text-primario            { color: var(--color-primario); }
.text-primario-hover      { color: var(--color-primario-hover); }
.text-primario-active     { color: var(--color-primario-active); }
.text-primario-focus      { color: var(--color-primario-focus); }
.text-primario-subtle     { color: var(--color-primario-subtle); }
.text-primario-subtle-focus { color: var(--color-primario-subtle-focus); }

/* ================================
Colores de texto secundario
================================ */
.text-secundario            { color: var(--color-secundario); }
.text-secundario-hover      { color: var(--color-secundario-hover); }
.text-secundario-active     { color: var(--color-secundario-active); }
.text-secundario-focus      { color: var(--color-secundario-focus); }
.text-secundario-subtle     { color: var(--color-secundario-subtle); }
.text-secundario-subtle-focus { color: var(--color-secundario-subtle-focus); }

/* ================================
Colores de texto acentado
================================ */
.text-acentado            { color: var(--color-acentado); }
.text-acentado-hover      { color: var(--color-acentado-hover); }
.text-acentado-active     { color: var(--color-acentado-active); }
.text-acentado-focus      { color: var(--color-acentado-focus); }
.text-acentado-subtle     { color: var(--color-acentado-subtle); }
.text-acentado-subtle-focus { color: var(--color-acentado-subtle-focus); }

/* ================================
Colores de texto fondo
================================ */
.text-fondo            { color: var(--color-fondo) !important; }
.text-fondo-hover      { color: var(--color-fondo-hover); }
.text-fondo-active     { color: var(--color-fondo-active); }
.text-fondo-focus      { color: var(--color-fondo-focus); }
.text-fondo-subtle     { color: var(--color-fondo-subtle); }
.text-fondo-subtle-focus { color: var(--color-fondo-subtle-focus); }

/* ================================
Colores de texto destaque
================================ */
.text-destaque            { color: var(--color-destaque); }
.text-destaque-hover      { color: var(--color-destaque-hover); }
.text-destaque-active     { color: var(--color-destaque-active); }
.text-destaque-focus      { color: var(--color-destaque-focus); }
.text-destaque-subtle     { color: var(--color-destaque-subtle); }
.text-destaque-subtle-focus { color: var(--color-destaque-subtle-focus); }

/* ================================
Colores de texto blanco
================================ */
.text-blanco            { color: var(--color-blanco); }
.text-blanco-hover      { color: var(--color-blanco-hover); }
.text-blanco-active     { color: var(--color-blanco-active); }
.text-blanco-focus      { color: var(--color-blanco-focus); }
.text-blanco-subtle     { color: var(--color-blanco-subtle); }
.text-blanco-subtle-focus { color: var(--color-blanco-subtle-focus); }


/* ================================================
Navbar 
================================================ */
.navbar.fixed-top {
    z-index: 1050;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Más suave */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Sombra sutil */
}

/* ================================================
Estilo para enlaces del navbar (.text-nav-link)
================================================ */
.text-nav-link {
    color: var(--color-fondo);
    transition: all 0.3s ease;
    font-weight: 500;
}

.text-nav-link:hover {
    color: var(--color-destaque) ;
    transform: scale(1.09);
}

.text-nav-link:focus {
    color: var(--color-destaque);
}

/*=============================================
Footer
=============================================*/
.footer-copy {
border-top: 1px solid rgba(255, 255, 255, 0.08); /* Más sutil que 0.5 */
padding-top: 1rem;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
margin-top: 2rem;
}

/*=============================================
Footer-section
=============================================*/
.footer-dark {
background-color: var(--color-auxiliar, #0b0c1a);
color: var(--color-blanco, #ffffff);
}

/* .footer-dark .text-degradado {
background: linear-gradient(to right, var(--color-primario), var(--color-acentado));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} */

.footer-dark .social-icon {
background-color: rgba(255, 255, 255, 0.1);
color: var(--color-blanco);
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s, transform 0.3s;
}

.footer-dark .social-icon:hover {
background-color: var(--color-acentado);
transform: scale(1.1);
color: #fff;
}

.footer-dark .footer-link {
color: var(--color-blanco);
text-decoration: none;
display: block;
margin-bottom: 5px;
transition: color 0.3s;
}

.footer-dark .footer-link:hover {
color: var(--color-acentado);
text-decoration: underline;
}

.text-blanco-subtle {
color: rgba(255, 255, 255, 0.75);
}