/* 🎨 Variables de color */
:root {
  --color-primary: #033E5B;
  --color-secondary: #05507A;
  --color-light: #f5f5f5;
  --color-dark: #222;
  --color-naranja-tools: #F8AD40;
  --color-verde-cife: #95C121;
  --color-azul-agente360: #00ACD8;
  --color-rosa-talentia: #DB5185;
  --color-azul-neock: #003E5C;
  --color-gris-neock: #878787;
}

/* Scroll para navegadores WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f5f5f5; /* Fondo del track */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    #F8AD40,   /* naranja - tools */
    #95C121,   /* verde - cife */
    #00ACD8,   /* azul - agente360 */
    #DB5185,   /* rosa - talentia */
    #003E5C    /* azul oscuro - neock */
  );
  border-radius: 10px;
  border: 2px solid #f5f5f5; /* para separar visualmente del fondo */
}

::-webkit-scrollbar-thumb:hover {
  opacity: 0.8;
}

/* Scroll simple para Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #003E5C #f5f5f5; /* azul oscuro sobre fondo claro */
}


/* 📝 Tipografías globales */
body {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  color: var(--color-dark);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* Pesos tipográficos */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-bold { font-weight: 700; }

/* Títulos */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', sans-serif;
  margin: 0 0 0.5em;
  color: var(--color-primary);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* 📌 Estilo para resaltar la primera palabra */
h1 span.font-instrument,
h2 span.font-instrument,
h3 span.font-instrument {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
}

/* Párrafos */
p {
  margin: 0 0 1em;
}

/* Enlaces */

/* Botones */
.cta-button {
  background: var(--color-primary) !important;
  color: white !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  font-size:1.4em;
  transition: background 0.3s ease !important;
}

.cta-button:hover {
  background: var(--color-secondary) !important;
  color:#ffffff !important;
}

/* Contenedor global */
/*.container {
  max-width: 100%;
  margin: 0 auto;
  
}*/

/* Secciones */
.section {
  padding: 5rem 0;
}

body {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  color: var(--color-dark);
}

.font-thin { font-weight: 100; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-bold { font-weight: 700; }