* {
  text-decoration: none !important;
}


/* Letra */

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

body {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

:root {
  /* ================================
  PRIMARIO (Azul marino elegante)
  ================================= */
  --color-primario:               #0A2A5A;
  --color-primario-hover:         #1B3D73 !important;
  --color-primario-active:        #082046;
  --color-primario-subtle:        #E6ECF5;
  --color-primario-subtle-focus:  #E6ECF580;
  --color-primario-focus:         #0A2A5A80;

  /* ================================
  SECUNDARIO (Turquesa vibrante)
  ================================= */
  --color-secundario:             #00A6A6 !important;
  --color-secundario-hover:       #1AB3B3;
  --color-secundario-active:      #008080;
  --color-secundario-subtle:      #E6F9F9;
  --color-secundario-subtle-focus:#E6F9F980;
  --color-secundario-focus:       #00A6A680;

  /* ================================
  AUXILIAR (Azul claro - número 4)
  ================================= */
  --color-auxiliar:               #00B4CC;
  --color-auxiliar-hover:         #26C6DA;
  --color-auxiliar-active:        #0097A7;
  --color-auxiliar-subtle:        #E6F7FA;
  --color-auxiliar-subtle-focus:  #E6F7FA80;
  --color-auxiliar-focus:         #00B4CC80;

  /* ================================
  FONDO (Blanco neutro)
  ================================= */
  --color-fondo:                  #FFFFFF;
  --color-fondo-hover:            #F5F5F5;
  --color-fondo-active:           #E6E6E6;
  --color-fondo-subtle:           #FFFFFF;
  --color-fondo-subtle-focus:     #FFFFFF80;
  --color-fondo-focus:            #FFFFFF80;

  /* ================================
  DESTAQUE (Naranja energético)
  ================================= */
  --color-destaque:               #F7941D;
  --color-destaque-hover:         #FFA733;
  --color-destaque-active:        #E67E00;
  --color-destaque-subtle:        #FFF3E6;
  --color-destaque-subtle-focus:  #FFF3E680;
  --color-destaque-focus:         #F7941D80;

  /* ================================
  NEGRO (Texto / contraste)
  ================================= */
  --color-negro:                  #000000;
  --color-negro-hover:            #1A1A1A;
  --color-negro-active:           #0D0D0D;
  --color-negro-subtle:           #333333;
  --color-negro-subtle-focus:     #33333380;
  --color-negro-focus:            #00000080;
}




/* ================================
Botones degradado 
================================ */
/* .btn-degradado {
  background: linear-gradient(to right, var(--color-auxiliar), 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-auxiliar-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-secundario), var(--color-primario));
  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-auxiliar-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-auxiliar), 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-auxiliar), 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-auxiliar), 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-auxiliar), 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-primario), var(--color-secundario));
  background:
    radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--color-primario) 20%, transparent), transparent 200px),
    radial-gradient(circle at 20% 70%, color-mix(in srgb, var(--color-secundario) 25%, transparent), transparent 300px),
    linear-gradient(120deg, var(--color-primario), var(--color-secundario));
}


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

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

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

/* ================================
Estados subtle
================================ */
.bg-primario-subtle          { background-color: var(--color-primario-subtle); }
.bg-secundario-subtle        { background-color: var(--color-secundario-subtle); }
.bg-auxiliar-subtle          { background-color: var(--color-auxiliar-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); }
.bg-negro-subtle             { background-color: var(--color-negro-subtle); }

/* ================================
Estados focus
================================ */
.bg-primario-focus           { background-color: var(--color-primario-focus); }
.bg-secundario-focus         { background-color: var(--color-secundario-focus); }
.bg-auxiliar-focus           { background-color: var(--color-auxiliar-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); }
.bg-negro-focus             { background-color: var(--color-negro-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 auxiliar
================================ */
.btn-auxiliar {
    background-color: var(--color-auxiliar);
    color: var(--color-blanco);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

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

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

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

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

.btn-auxiliar-outline:hover {
    background-color: var(--color-auxiliar-subtle);
    color: var(--color-auxiliar-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) !important; }
.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) !important; }
.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 auxiliar
================================ */
.text-auxiliar            { color: var(--color-auxiliar); }
.text-auxiliar-hover      { color: var(--color-auxiliar-hover); }
.text-auxiliar-active     { color: var(--color-auxiliar-active); }
.text-auxiliar-focus      { color: var(--color-auxiliar-focus); }
.text-auxiliar-subtle     { color: var(--color-auxiliar-subtle); }
.text-auxiliar-subtle-focus { color: var(--color-auxiliar-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: rgb(226, 225, 225);
    background-color: #212121;
    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-blanco);
    transition: all 0.3s ease;
    font-weight: 500;
}

.text-nav-link:hover {
    color: var(--color-primario) ;
    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-auxiliar));
-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-primario);
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--color-primario);
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-primario);
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-primario-hover);
text-decoration: underline;
}

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