/* 1. Importar las fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/* <weight>: Use a value from 100 to 900 */
/* <uniquifier>: Use a unique and descriptive class name */

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

/* <weight>: Use a value from 100 to 900 */
/* <uniquifier>: Use a unique and descriptive class name */

.raleway-conab {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}




/* 2. Fuente para títulos (H1, H2, H3) - Ejemplo: Raleway */
h1, h2, h3, h4, h5, h6 {
    font-family: 'raleway-conab', sans-serif;
    font-weight: 700; /* Grosor si es necesario */
}

/* 3. Fuente para texto principal (body) - Ejemplo: Open Sans */
body {
    background:#f5f5f5;
    padding: 0 1.875rem 0 30px;
    font-family: 'roboto-conab', sans-serif;
    font-weight: 200;
    line-height: 1.9;
    color: #4e4d4d;
}

html * { max-height: 1000000px; }
html {
  -webkit-text-size-adjust: 100%; /* Chrome, Safari, navegadores Android */
  -moz-text-size-adjust: 100%;    /* Firefox para Android */
  text-size-adjust: 100%;         /* Estándar */
}


/* -------------- COLORES ------------ */
:root {
  --azul-conab: #3699c1; /* Define el color aquí */
  --gris-boton: rgba(81, 78, 78, 0.7); /* Define el color aquí */
  --gris-boton-hover:rgba(126, 125, 125, 0.7); /* Define el color aquí */
}

.fondo-gris {
  background-color: var(--gris-boton);
}
.fondoHover-gris {
  background-color: var(--gris-boton-hover);
}
.fondo-conab {
  background-color: var(--azul-conab);
}





/* body{
  background:#f5f5f5;
  padding: 0 1.875rem 0 30px;
  font-family:Arial,Helvetica,sans-serif !important;
} */

.color-conab{
  color: var(--azul-conab);
}

.color-boton{
  color: var(--color-gris);
}

/* ===== CONTENEDOR ===== */
.page-box{
  max-width:75rem;
  margin:0 auto;
  padding:2.5rem 1rem;
}

.page-box h1{
  text-align:center;
  font-size:1.90rem;
  font-weight: 200 !important;
  margin:0 0 2.5rem 0;
}

.page-box h1 span{
  color: #8f8f8f;
}

.page-box h3{
  text-align:center;
  line-height: 0.7rem;
  font-size:1.25rem;
  font-weight:400;
  margin-bottom:3.125rem;
  color:#555;
}


/* ===== TITULOS DE PAGINAS ===== */

.titulos {
  width: 100%;
  text-align: center;
  padding: 0;
  margin-bottom: .625rem;
  background: none;
  /* background-color: #f5f5f5; */
}

.titulos h1 {
  font-size: 1.90rem;
  font-weight: 200 !important;
  margin: 1.875rem 0 1.25rem 0;
}

.titulos h1 span{
  color: #8f8f8f;
}

.titulos a {
    /* background-color: cadetblue; */
  color: #2280be;
  text-decoration: none;
}

.titulos a:hover {
  color: #849dae;
}

/*  LINK DE NOTAS */
.link-nota{
  color: #373737;
  text-decoration: none;
}

.link-nota :hover{
  color: #b0b0b0;
    text-decoration: none;
}

.link-nota div{
  color: #3c3c3c;
}

/* ===== TEXTO ===== */
.text-box{
  background:#fff;
  padding:2.5rem;
  border-radius:.25rem;
  box-shadow:0 .25rem 1.125rem rgba(0,0,0,.06);
  font-size:.9375rem;
  line-height:1.7;
  color:#333;
}

.text-box p{
  margin-bottom:18px;
}

.color-text{
  color: #2280be;
}


/* ===== LISTA ===== */
.text-box ul{
  margin:1.25rem 0 1.5rem 1.375rem;
  line-height: 1.5;
}

.text-box li{
  margin-bottom:.75rem;
}

@media(max-width:768px){
  .text-box{
    padding:1.5rem;
  }
}