body {font-family: "Rubik", sans-serif; 
    overflow-x: hidden; margin: 0; padding: 0;}
button {color: inherit; border-style: none; background-color: white;}
a {text-decoration:none; display: block; margin: 0; color: inherit; }
a:hover {text-decoration: underline; text-underline-offset: 5px;}
a:active { color:rgb(100, 100, 100); }

/* ESTRUCTURAS */

section { 

width: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; 
padding: var(--gap-80-40) var(--gap-80-17);
box-sizing: border-box;
}

.contenedor-flex { 
width: 100%;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center; 
max-width: 1080px;
box-sizing: border-box;
}
@media (max-width: 700px) { .contenedor-flex { max-width: 400px;}}


.vertical { flex-direction: column;}

.columna-flex {
    width: 100%;
    height: 100%;
    display: flex;
    flex: 0 1 auto;   /* NO fuerza expansión, sí permite encoger */
    min-width: 0;
	flex-direction: column;
	align-items: flex-start;
    box-sizing: border-box;
}

.linea-flex {
    width: 100%;
    display: flex;
	align-items: flex-start;
	align-content: flex-start;
}

.flex { display: flex; align-items: center; align-content: flex-start;}
.iz{align-items: flex-start;  align-content: flex-start;}
.index{ position: relative;; z-index: 2 ;background: white;}

.flex-linea-separados {
    flex: 1;
    width: 100%;
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
}

.horizontal-divider {
width: 100%;
height: 1px;
position: relative;
border-top: 1px solid #1f2937;
box-sizing: border-box;
}


.marcar{border: 1px solid black;}
.marcar2{border: 1px solid blue;}

.gap2 {gap: 2px;}
.gap5 {gap: 5px;}
.gap10{gap: 10px;}
.gap20{gap: 20px;}
.gap25{gap: 25px;}
.gap40{gap: 40px;}
.gap50{gap: 50px;}
.gap80{gap: 80px;}
.gap100{gap: 100px;}

.gaptotal{width: 100%; height: 100% ;justify-content: space-between;}



:root {
  	
  	/* Common Style Variables */
  	
  	/* Color */
  	--negro: #1F2937;
    --azul:#9AB7F9;
    --azul-claro:#D2E5F4;
    --verde:#97C3A4;
    --rojo:#E89797;
    --amarillo: #f9d073;

    /* font-size */
    --size-pp: 18px;
    --size-botton: 19px;
    --size-xxs: 16px;
    --size-xs: 20px;
    --size-s: 22px;
    --size-m: 29px;
    --size-l: 35px;
    --size-xl: 43px;
    --size-xxl: 54px;
    --size-xxxl:65px;

    /* width max */
    --width-max:1080px;
  	
  	/* space */
  	--gap-500-100: 500px;
    --gap-100-50: 100px;
    --gap-100-5: 100px;
    --gap-20-15: 20px;
    --gap-80-40: 80px;
    --gap-80-17: 80px;
    --gap-80-5:80px;
    --gap-40-20: 40px;
    --gap-40-10: 40px;
    --gap-15-5: 15px;
    --esp-vertical: 5px;
  	
}

@media (max-width: 700px) {

   
 
    :root {
            
          /* font-size */
        --size-pp: 15px;
        --size-botton: 15px;
        --size-xxs: 14px;
        --size-xs: 20px;
        --size-s: 19px;
        --size-m: 23px;
        --size-l: 30px;
        --size-xl: 26px;
        --size-xxl: 40px;
        --size-xxxl:41px;
        
        /* space */
        --gap-500-100: 100px;
        --gap-100-50: 50px;
        --gap-100-5: 5px;
        --gap-20-15: 15px;
        --gap-80-40: 40px;
        --gap-80-17: 30px;
        --gap-80-5:5px;
        --gap-40-20: 20px;
        --gap-40-10: 10px;
        --gap-15-5: 5px;
        --esp-vertical: 4px;
  }

  }

  /* ----------  BOTONES -------------*/

  
  
  button {cursor: pointer;}


/* Boton azul (Identidad) */

.boton-identidad {

    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: var(--size-botton);
    line-height: auto;

border-radius: 3px;
background-color: var(--azul-claro);
border: 1px solid #c7dae8;
padding: var(--esp-vertical) 10px;
white-space: nowrap;
}


/* Boton verde (Social) */

.boton-verde {

    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: var(--size-botton);
    line-height: auto;

border-radius: 3px;
background-color: var(--verde);
border: 1px solid #8fb99c;
padding: var(--esp-vertical) 10px;
}

/* Boton rojo (Maquetación) */

.boton-rojo {

    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: var(--size-botton);
    line-height: auto;

border-radius: 3px;
background-color: var(--rojo);
border: 1px solid #dc8f8f;
padding: var(--esp-vertical) 10px;
}


/* Boton linea negra */
.noboton{
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: var(--size-botton);
    line-height: auto;
    white-space: nowrap;
border-radius: 3px;
background-color: #fff;
border: 1px solid var(--negro);
padding: var(--esp-vertical) 10px;
}

.boton-identidad:hover{ text-decoration: none; background-color: rgba(210, 229, 244, 0.8);}
.boton-rojo:hover{ text-decoration: none; background-color: rgba(232, 151, 151, 0.8);;}
.boton-verde:hover{ text-decoration: none; background-color: rgba(151, 195, 164, 0.8);;}


/* ----------  TIPOGRAFIAS -------------*/
h1, h2, h3, h4, h5, h6, p { margin: 0;}

p,
.body {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  	align-self: stretch;
  	position: relative;
  	font-size: var(--size-pp);
    color: var(--negro);
    line-height: 125%;
}

.t1 {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
     font-weight: 450;
     font-style: normal;
     font-size: var(--size-xxxl);
  	position: relative;
  	letter-spacing: -2px;
  	line-height: 100%;
  	display: flex;
  	align-items: center;
    color: var(--negro);
}

.t2 {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
     font-size: var(--size-xxl);
  	position: relative;
  	letter-spacing: -2px;
  	line-height: 100%;
  	display: flex;
    margin: auto;
  	align-items: center;
    color: var(--negro);
}

.t3 {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    align-self: stretch;
    position: relative;
    font-size: var(--size-xl);
    color: var(--negro);
}

.t4 {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 360;
    font-style: normal;
    align-self: stretch;
    position: relative;
    font-size: var(--size-l);
    color: var(--negro);
    }

.t5 {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 350;
    font-style: normal;
    font-size: var(--size-m);
    color: var(--negro);
}

.t6 {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 330;
    font-style: normal;
    align-self: stretch;
    position: relative;
    font-size: var(--size-s);
    color: var(--negro);
}

.sub {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 350;
     font-style: normal;
    font-size: var(--size-xxs);
  	letter-spacing: 0.05em;
    color: var(--negro);
}

.tipoboton {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    line-height: 19.8px;
    color: var(--negro);
}

.underline {
text-decoration: underline;
}



/* - - - - - - EL HEADER - - - - - -  */

header { 
    display:flex; justify-content:center;
    position:fixed; 
    width:100%;
    z-index:40; }
.nav {
    max-width: 1080px;
    width: 100%;
    display:flex; align-items:center; justify-content:space-between;
    padding: 20px var(--gap-80-40);
    background:transparent;
    
    transition: transform 0.35s ease, opacity 0.35s ease;
    }

    .nav.hide { transform: translateY(-100%); opacity: 0;}
    .nav.show { transform: translateY(0); opacity: 1;}

@media (min-width:901px){

    .fondo{ 
    width: auto; 
    background-color: #f3f3f39e;
    border: 1px solid #f2f2f22f;
    height: 35px; border-radius: 3px; padding: 0 10px;
    }
    .fondo:hover{background-color: #f3f3f3; text-decoration: none; }
    }

@media (max-width:900px){
    .fondo-movil{ 
    padding: 6px 30px 2px;
    background-color: #f3f3f39e;
    border: 1px solid #f2f2f22f;
    height: 35px; border-radius: 3px; 
    }
  

     
}

.logo-nav {
    display: flex; align-items: center; align-content: center;
    gap: 12px;}
.myicon-nav {
    height: 25px; width: 25px;
    background-color: var(--amarillo); 
    mask: url("IMG/logobanco.svg") no-repeat center;
    mask-size: contain;}
.nombre-nav {
    display: flex;
    align-items: center;
    font-optical-sizing: auto;
    font-weight: 300;
    font-size: 20px;
    line-height: 19.8px;
    color: var(--negro);
    }
   
.desktop-nav {
    display:flex;
    font-weight:600;
	align-items: center;
	justify-content: flex-end;
    gap: 20px; }
    @media(max-width:900px){.desktop-nav {display:none;} .myicon-nav {display:none;}}

    .menu-btn{ cursor:pointer;  background-color: transparent }
    .menu-btn .chev{ display:inline-block;transform:rotate(0);transition:transform .35s ease;}
    .menu-btn.open .chev{transform:rotate(180deg)}



    .icon-nav { display: none; width: 20px; height: 20px;}
    

   

aside{padding: 0;}
  /* Drawer (full-screen overlay panel) */
  .drawer{
    position:fixed;inset:0;background:var(--amarillo);z-index:39;
    padding: 0;
    transform: translateY(-8%);opacity:0;pointer-events:none;
    transition:transform .45s cubic-bezier(.2,.9,.3,1),opacity .28s;
    display:flex;flex-direction:column;justify-content:center;
  }
  .drawer.open{
    transform:none;opacity:1;pointer-events:auto;
  }

  /* Menu list */
  .nav-list {padding-left: 0; list-style:none; display:flex; flex-direction:column; gap:20px; font-size:48px; font-weight:350; text-align: center;}
  .nav-list a {text-decoration:none;color:#0b0b0b; display:inline-block; transition:transform .18s,opacity .18s}
  .nav-list a:hover {transform:translateX(8px); opacity:.85}


  /* Desktop view: horizontal top menu instead of drawer */
  @media(min-width:900px){
    
    .menu-btn {display:none;}
    .site-header {padding:14px 56px;background:#fff;border-bottom:1px solid rgba(0,0,0,.04)}
    .drawer {display:none}
  }




/* - - - - - - EL FOOTER - - - - - -  */

.footer {background-color: var(--amarillo); padding: 50px var(--gap-80-40);}

@scope (.footer) {

    .contenedor-flex {
	width: 100%;
    align-items: center;
    justify-content: space-between;
    
    flex-basis:auto;
	}

    .bloq1 {gap: 10px;}
    .icon {height: 31px; transform: translateY(-6px);}

    .bloq2{gap: 36px;}
    strong{ font-weight: 400; margin-right: 5px;}
 	p{ gap:20px; white-space: nowrap; line-height:20px; font-size: 15px;}

    @media (max-width: 1100px) {

        .bloq2 {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
        }
        .contenedor-flex {
        justify-content: center;
        gap:80px;
        }
    }

    @media (max-width: 800px) {
        
        .contenedor-flex {
        flex-direction: column;
        gap: 25px;
        align-items: flex-start;
        }
        .icon {height: 23px; transform: translateY(-3px);}
        .bloq2 { gap: 10px; }

    }
}