@font-face{
  font-family: "CenturyGothic";
  src: url("../assets/fonts/centurygothic.woff2") format("woff2"),
  font-weight: 300 700;   /* rangos que tengas */
  font-style : normal;
  font-display: swap;     /* evita FOIT */
}

:root{
  --green-700:#5F8C45;/*#A3C89E;*/
  --green-900:#086E2C;/*#5F8C45;    /*#0a4b1a;*/

  --green-dark:#0a4b1a; /*#114308;*/
  --text-light: #F7F4EE;  /*#f1f1f1;*/
  --text-dark:#14391c;    /*#4a320e;*/
  --gis: #A3A3A3;
  --blanco:#FFFFFF;
  --amarillo-calido: #F2D398;

  --nav: #338a29; /*efeac0;*/
  --cbtext1: #f9efcb;
  --seal-brown: #581f0b;
  --ocre-dorado: #8c7523;
  --footer-color: #0a4b1aee;

  --space:clamp(0.5rem,2vw,1.5rem);
  --header-h:92px;
  font-family:"Century Gothic Regular",Arial,sans-serif;

   --overlay-color: rgba(0, 110, 44, 0.5);
}
*{margin:0;padding:0;box-sizing:border-box;}
ul{list-style:none;}
a{text-decoration:none;color:inherit;}

body{background:#fdfdfd;}

/* Navbar desktop */
.navbar{
  background:var(--nav);
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
}
.container{
  max-width:1224px;
  margin:0 auto;
  padding: 0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  display:inline-flex;
}
.logo img{
  height:160px;
  width: 125px;
}

.nav{
  display:flex;
  align-items:center;
  font-family: "Century Gothic Regular";
  font-size: 32px;
}
.nav ul{
  display:flex;
  column-gap:19px;
  flex-wrap:wrap;
  justify-content:right;
}
.link{
  color:var(--blanco);
  position:relative;
  transition:opacity .2s;
}
.link:hover{
  color:var(--amarillo-calido);
}
.link.active{
  color:var(--amarillo-calido);
}


.btn-pqrs{
  background:var(--green-dark);
  color:#FFFFFF;
  font-size: 16px;
  margin: 0 0 0 8px;
  padding:20px 56px;
  font-family: "Arimo", sans-serif;
  font-weight: 700;      /* ó  font-weight: bold; */
  transition: background-color .25s ease, color .25s ease;
}
.btn-pqrs:hover{
  background-color: var(--amarillo-calido);
  color: var(--green-dark);
}
.btn-active{
  background-color: var(--amarillo-calido);
  color: var(--green-dark);
}
/* Burger */
.burger{
  /*margin: auto 0;*/
  display:none;
  flex-direction:column;
  gap: 5px;
  border:0;
  background:none;
  cursor:pointer;
  height: 18px;
}
.burger span{
  width:24px;
  height:2px;  
  background:var(--text-light);
  transition:transform .4s,opacity .4s;
  border-radius: 1px 1px;
}

/* Main*/
.banner{
  width:100%;
  height:364px;
  position:relative;
  /* Centrado vertical (eje cruzado) */
  display:flex;              /* o display:grid; */
  justify-content:flex-start;
  align-items:center;        /* eje vertical    ↓ */
  font-size: 76px;
  font-family: "Lobster";
  color: var(--blanco);
}

/* --- 3. Capa semitransparente --- */
.banner-overlay{
  position:absolute;
  inset:0;                      /* ocupa todo el banner */
  background:var(--overlay-color);  /*--overlay-color*/
  z-index:0;                    /* debajo del texto */
}

/* --- 4. Título --- */
.banner-title{
  position:relative;          /* crea nuevo contexto encima de overlay */
  z-index:1;                  /* sobre la capa */
  margin-left:clamp(1rem,3vw,2rem);      /* espacio a la izquierda */
  font-weight:600;
  line-height:1.3;
  max-width: 1000px;
}
/* Footer */
.aliados {
  position:relative;
  top:0;
  width: 100%;
  background: var(--blanco);
}
.aliados .container{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}
.titulo{
  font-family: Lobster;
  font-size: 48px;
  color: var(--green-900);
  padding: 20px 0;
  text-align: center;
}
.logos{
  display:flex;            /* fila por defecto → flex-direction:row */
  gap:17px;                /* separación opcional entre logos */
  flex-wrap:wrap;          /* si quieres que brinquen a la siguiente línea cuando no quepan */
  overflow: hidden;
  align-items:center;
  justify-content:center;
  padding: 0 0 30px 0;
}
.parther1{
  width: 244px;
  height: 58.01px;
}
.parther2{
  width: 149px;
  height: 61px;
}
.parther3{
  width: 162px;
  height: 74.01px;
}
.parther4{
  width: 90px;
  height: 100.5px;
}
.parther5{
  width: 149px;
  height: 110.5px;
}
.parther6{
  width: 131px;
  height: 75.5px;
}
.parther7{
  width: 155px;
  height: 78.5px;
}

.logos img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ♦ “cubre” todo el marco recortando lo que sobre */
  /* usa `object-fit: contain;` si prefieres que se vea completa con
     franjas vacías (tipo “letterbox”) */
  display: block;         /* elimina el espacio bajo la imagen inline */
}
.footer {
  position: relative;
  overflow: hidden;
  color: white;  
}

.footer .video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  transform: translate(-50%, -50%);
  object-fit: cover;
  /*filter: brightness(0.4); /* oscurece un poco para resaltar texto */
}

.footer .container{
  position: relative;
  z-index: 1;
  flex-direction:column;
  color: var(--blanco);
  padding: 0;
  max-width: 100%;
  background: var(--footer-color);
}
.footer .texto{
  width: auto;
  height: auto;
}
.footer .info{
  width: 100%;
  height: auto;
  display:flex;
  font-size: 18px;
  justify-content: center;
  border-bottom: 2px dotted var(--ocre-dorado);
  flex-wrap:wrap;          /* si quieres que brinquen a la siguiente línea cuando no quepan */
}
.footer .logo{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;/*280.6px;*/
  justify-content: center;
}
.footer .logo img{
  width: 125px;/*226px;*/
  height: 100%;
  object-fit: contain;
  display: block; 
}
.slogan {
  max-width: 200px;
  text-align: center;
  font-family: "Lobster";
}
.direcciones{
  display: flex;
}
.direccion{
  flex-direction:column;
  padding: 15px;
  padding-bottom: 0;
}
.direccion h1{
  font-size: 20px;
  padding-bottom: 10px;
  /*color: var(--ocre-dorado);*/
}
.correo{
  width: 100%;
  display: flex;                 /* convierte el div en contenedor flex */
  justify-content: center;       /* centra horizontalmente  ─→ */
  align-items: center;           /* centra verticalmente    ↓ */
  bottom: 0;
}
.info-f {

  display:flex;
  align-items:center;
  font-size: 16px;
  margin: 10px 0;
}
.info-f i {
  margin-right: 8px;
  color: var(--ocre-dorado); /* Color del ícono */

}
.icon {

  width: auto;
  height: 100%;
}
.fila{
  display: flex;                 /* convierte el div en contenedor flex */
}
.copriying{  
  align-items: center;           /* centra verticalmente    ↓ */
  width: 100%;
  height: auto;
  padding: 5px 16px;
  font-size: 14px;
  column-gap: 3px;
  max-width:1224px;
  justify-content:space-between;
}

.copriying p{
  max-width: 45%
}

/*//////PÁGINAS///////*/
.opciones{
  display: flex;                 /* convierte el div en contenedor flex */
  justify-content: center;       /* centra horizontalmente  ─→ */
  align-items: center;           /* centra verticalmente    ↓ */
  width: 100%;
  padding: 30px;
  background: var(--text-light);
}
.opciones .container{
   flex-direction:column;
   gap: 15px;
}
.opciones .container p{
  font-family: "Arimo", sans-serif;
  font-size: 48px;
  color: var(--text-dark);
  text-align: center;
}
.opcion{
  width: 100%;
  height: auto;
  padding: 10px;
  background: var(--green-900);
  border-radius: 10px;
}
.opcion a{
  display:block;
  width:100%;
  font-family: "Century Gothic Regular";
  font-size: 18px;
  color: var(--text-light);
  text-align: center;
}


/*Diseño de Textos*/
.textos{
  font-family: "Century Gothic Regular";
  display: flex;                 /* convierte el div en contenedor flex */
  justify-content: center;       /* centra horizontalmente  ─→ */
  align-items: center;           /* centra verticalmente    ↓ */
  width: 100%;
  padding: 30px;
  background: var(--cbtext1);
  
}
.textos .container{
   flex-direction:column;
   gap: 15px;
}
.titulo1{
  width: 100%;
  font-family: "Arimo", sans-serif;
  font-size: 48px;
  color: var(--seal-brown);
  text-align: left;
  font-weight: bold;
}
.titulo2{
  width: 100%;
  font-size: 32px;
  text-align: left;
  font-weight: bold;
}
.subtitulo {
  width: 100%;  
  font-size: 26px;
  text-align: left;
  font-weight: bold;
  color: var(--seal-brown);
}
.parrafo {
  width: 100%;  
  font-size: 20px;
  text-align: justify;
}
.bullet-list{
  list-style-type: disc;      /* • por defecto */
  margin: 0;                  /* elimina espacio exterior si lo deseas */
  padding-left: 1.25rem;      /* separa viñeta y texto */
  width: 100%;  
  font-size: 20px;
  text-align: justify;
}

.negrilla{
  font-weight: bold;
}
.subrayado{
  text-decoration: underline;
}
.cursiva{
  font-style: italic;
}

/* Mobile layout */
@media(max-width:991px){
  .container{
    padding: 0 32px;
  }
  .logo img{
    height:var(--header-h);
    width: 72px;
  }
  .burger{
    display:flex;
    position:relative;    
    z-index:1101; /* above nav */
  }

  /* Nav overlay */
  .nav{
    position:fixed;
    top: var(--header-h);
    right: 0%;
    width:100%;
    height: auto;        
    background:var(--green-700);
    flex-direction:column;
    align-items:flex-end;
    vertical-align: top;
    justify-content:right;
    clip-path: inset(0 0 100% 0);
    padding: 0;
    transition: clip-path .5s ease,
                padding .5s ease;
    overflow: hidden;
    font-size: 16px;
    gap: 15px;
  }
  .nav ul{
    row-gap: 1rem;
    flex-direction:column;
    align-items:flex-end;
    gap: 25px;
    position: relative;
    right: 15px;    
  }
  .nav.open{
    clip-path: inset(0 0 0 0);
    padding: 20px 0 20px 0;
    max-height: 50%;
    overflow-y:auto;
  }

  .btn-pqrs{
    padding:.8rem 2rem;
    position: relative;
    right: 15px; 
  }

  /* Main*/
  .banner{
    justify-content:center;    /* eje horizontal  ─→ */
    height:210px;
    font-size: 40px;    
  }
  .banner-title{                   
    margin-left:0;
    max-width: 800px;
    padding: 20px;
    text-align:center;
  }
  /* Footer */
  .direcciones{
    font-size: 16px;
    flex-wrap:wrap;
    justify-content: center;
  }
  .direccion{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;
  }
  .direccion p {
    text-align: center;      /* el texto queda centrado dentro del p */
    margin: 0;               /* quita márgenes si no los necesitas    */
  }
  .titulo{
    font-size: 26px;
  }

  /*/////PÁGINAS/////*/
  .opciones .container{
    padding: 20PX;
  }
  /*/////TEXTOS/////*/
  .titulo1{
    font-size: 32px;
  }
  .titulo2{
    font-size: 26px;
    text-align: center;
  }
  .subtitulo { 
    font-size: 20px;
    text-align: center;
  }
  .parrafo { 
    font-size: 16px;
  }
  .bullet-list{ 
    font-size: 16px;
  }
}

/* Burger transforms to X */
.burger.open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.burger.open span:nth-child(2){
  opacity:0;
}
.burger.open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}


/* estado inicial: oculto y un poco desplazado */
.reveal{
  opacity: 0;
  transform: scale(.85); 
  transition: opacity 1.0s ease, transform 1.0s ease;
}

/* se añade cuando entra al viewport */
.visible{
  opacity: 1;
  transform: scale(1); 
}