@import "root.css";
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;600;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;400&display=swap');



/* INDEX


1. Fuentes
2. Weight / Grosor
3. Ancho fijos
4. IMG Size
5. Contendedores
6. Text align
7. Flex align
8. Flex
9. Display/position
10. Color
11.Backgrounds  
12. Margin/Padding
13.Line height
14.Borders/lines
15.Separadores
16.Labels
17.Links/Underline
18.Hover effects 
  > Opacity
  > Zoom
  > MoveUP
  > Shadow

19.Buttons


*/
html {scroll-padding-top: 84px;}


body{ width: 100%; margin:0; color:black; touch-action: pan-y; }

section{padding:8px 14px 80px 14px !important;}



/* 1 FUENTES */

/* Title fonts */
.title-xl{font-family: 'Poppins', sans-serif; text-decoration:none; font-weight: 900; font-size: 65px;}
.title-l{font-family: 'Poppins', sans-serif; text-decoration:none; font-weight: 900; font-size: 54px;}
.title, h1{font-family: 'Poppins', sans-serif; text-decoration:none; font-weight: 900; font-size: 38px;}
.title-m{font-family: 'Poppins', sans-serif; text-decoration:none; font-weight: 700; font-size: 28px;}
.title-s, h2{font-family: 'Poppins', sans-serif; text-decoration:none; font-weight: 900; font-size: 18px; }
.title-xs{font-family: 'Poppins', sans-serif; text-decoration:none; font-weight: 600; font-size: 16px;}

/* Subtitle fonts */
.subtitle-l, h3{font-family: 'Roboto', sans-serif; text-decoration:none; font-weight: 200; font-size: 38px; line-height: 1.2;}
.subtitle, h4{font-family: 'Roboto', sans-serif; text-decoration:none; font-size: 24px; font-weight: 400;}

/* Body fonts */
.body-l{font-family: 'Roboto', sans-serif; text-decoration:none; font-size: 18px;}
.body, a,p{font-family: 'Roboto', sans-serif; text-decoration:none; font-size: 16px;}
.body-m{font-family: 'Roboto', sans-serif; text-decoration:none; font-size: 12px;}
.body-s{font-family: 'Roboto', sans-serif; text-decoration:none; font-size: 10px;}

/* 2. WEIGHT */
.bold-200{font-weight: 200;}
.bold-400{font-weight: 400;}
.bold-800{font-weight: 800;}
.bold-900{font-weight: 900;}


.txt-none{text-decoration: none;}


/* 3. Ancho fijo */
.w-80{width:80px;}
.w-100{width:100px;}
.w-100{width:120px;}



/* 4 IMG SIZE */

.img-medium, .img-auto{width:85%; height: auto;}
.img-full{width:100%; height: auto;}
.img-small-auto{width:65%; height: auto;}
.img-min-auto{width:30%; height: auto;}

/* 5 CONTENEDORES GLOBALES*/
.content-full{width:100%;}
.content-row {
    width: min(100% - 30px, 980px); /* cuando la pantalla es inferior a 980 pasa a ocupar el 100% - 30px repartido en ambos lados es decir 0 15 0 15 */
    margin-inline: auto; 
   /*padding:0 15px 0 15px;*/
}




/* 6.TEXT ALIGN - breakpoint 660px*/
.txt-c, .centro {text-align:center;}
.txt-r-c{text-align:right; }
.txt-l-c{text-align:left; }
.txt-j, .justify{text-align: justify;}


/* 7.ALIGN */
.center-x, .center-x-y{display: flex; flex-direction:row; justify-content: center; align-items: center;}
.center-y, .center-y-x{display: flex; flex-direction:column; justify-content: center; align-items: center;}



/* 8. FLEX */
.flex-row{display: flex;}
.flex-row-col{display: flex;}  
.flex-col {display:flex; flex-direction: column;}
.flex-wrap{flex-wrap: wrap;}
.flex-wrap-reverse{flex-wrap: wrap-reverse;}
.flex-nowrap{flex-wrap: nowrap;}

/* Eje principal */
.flex-1-start{justify-content: start} 
.flex-1-end{justify-content: end;}
.flex-1-center{justify-content: center;}
.flex-1-between{justify-content: space-between;}
.flex-1-around{justify-content: space-around;}

/* Eje secundario "align-content" (alinea cuando hay varias lineas) */
.flex-2-start{align-content: flex-start;} 
.flex-2-end{align-content: flex-end;}
.flex-2-center{align-content: center;}
.flex-2-between{justify-content: space-between;}

/* Eje secundario "align-item" (alinea cuando hay solo una lineas) */
.flex-item-start{align-items: flex-start;}
.flex-item-end{align-items: flex-end;}
.flex-item-center{align-items: center;}

.grow-1{flex-grow: 1;}
.gap-2, .gap-col-2, .gap-row-2{gap:2px;}
.gap-4, .gap-col-4, .gap-row-4{gap:4px;}
.gap-8, .gap-col-8, .gap-row-8{gap:8px;}
.gap-16, .gap-col-16, .gap-row-16{gap:16px;}
.gap-32, .gap-col-32, .gap-row-32{gap:32px;}
 




/* 9.DISPLAY / POSITION */
.p-relative{position:relative;}
.p-absolute{position:absolute;}
.hide-screen{display:none;}


/* 10.COLOR */
.color-black{color: var(--black);}
.color-white{color: var(--white);}
.color-acent{color: var(--acent-color);}
.color-acent-off{color: #c68c0a;}


/* 11.BG */
.bg-dots{background-color:rgba(255, 255, 255, 0.3); /*box-shadow: inset 0 0 60px 0 rgba(255, 255, 255, 0.8);*/ background-image:url("../img/bg-dot.png");background-repeat:repeat;background-attachment:fixed;background-size:5px;}
.bg-grid{background-image:url("../img/bg-grid.png");background-repeat:repeat;background-attachment:fixed;background-size:8px;}
.bg-main{background-color: var(--main-light-color); }
.bg-white{background-color: white;}
.bg-dark{background-color: var(--main-dark-color); }
.bg-acent{background-color: var(--acent-color); }
.bg-main-white{background: rgb(221,221,221); background: linear-gradient(180deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%); }
.bg-white-main{background: rgb(221,221,221); background: linear-gradient(360deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%); }
.bg-white-acent{background: rgb(221,221,221); background: linear-gradient(360deg, rgba(255,199,0,1) 0%, rgba(255,199,0,0.6) 30%, rgba(255,199,0,0) 100%); }
.bg-acent-main{background-image: linear-gradient(to top, #dddddd, #dddddd, #dddddd, #dddddd, #ffc700);}



/* 12.ESPACIADO */

/* 4 */
.pd-4{padding:4px;}
.pd-l-4{padding:0 0 0 4px;}
.pd-r-4{padding:0 4px 0 0;}
.pd-t-4{padding:4px 0 0 0;}
.pd-b-4{padding:0 0 4px 0;}

/* 8 */
.pd-8{padding:8px;}
.pd-l-8{padding:0 0 0 8px;}
.pd-r-8{padding:0 8px 0 0;}
.pd-t-8{padding:8px 0 0 0;}
.pd-b-8{padding:0 0 8px 0;}

/* 12 */
.pd-12{padding:12px !important;}
.pd-l-12{padding:0 0 0 12px !important;}
.pd-r-12{padding:0 12px 0 0;}
.pd-t-12{padding:12px 0 0 0;}
.pd-b-12{padding:0 0 12px 0;}

/* 15 */
.pd-15{padding:15px;}
.pd-l-15{padding:0 0 0 15px;}
.pd-r-15{padding:0 15px 0 0;}
.pd-t-15{padding:15px 0 0 0;}
.pd-b-15{padding:0 0 15px 0;}

/* 16 */
.pd-16{padding:16px;}
.pd-l-16{padding:0 0 0 16px;}
.pd-r-16{padding:0 16px 0 0;}
.pd-t-16{padding:16px 0 0 0;}
.pd-b-16{padding:0 0 16px 0;}

/* 20 */
.pd-20{padding:20px;}
.pd-l-20{padding:0 0 0 20px;}
.pd-r-20{padding:0 20px 0 0;}
.pd-t-20{padding:20px 0 0 0;}
.pd-b-20{padding:0 0 20px 0;}

/* 24 */
.pd-24{padding:24px !important;}
.pd-l-24{padding:0 0 0 24px !important;}
.pd-r-24{padding:0 24px 0 0 !important;}
.pd-t-24{padding:24px 0 0 0 !important;}
.pd-b-24{padding:0 0 24px 0 !important;}

/* 40 */
.pd-40{padding:40px !important;}
.pd-l-40{padding:0 0 0 40px !important;}
.pd-r-40{padding:0 40px 0 0 !important;}
.pd-t-40{padding:40px 0 0 0 !important;}
.pd-b-40{padding:0 0 40px 0 !important;}

/* 50 */
.pd-50{padding:50px !important;}
.pd-l-50{padding:0 0 0 50px !important;}
.pd-r-50{padding:0 50px 0 0 !important;}
.pd-t-50{padding:50px 0 0 0 !important;}
.pd-b-50{padding:0 0 50px 0 !important;}

/* 60 */
.pd-60{padding:60px !important;}
.pd-l-60{padding:0 0 0 60px !important;}
.pd-r-60{padding:0 60px 0 0 !important;}
.pd-t-60{padding:60px 0 0 0 !important;}
.pd-b-60{padding:0 0 60px 0 !important;}

/* margin */
.mg-0{margin:0px;}
.mg-b-0{margin-bottom:0;}
.mg-10{margin:10px;}


/* 13.LINE HEIGHT */

.no-space{line-height: 0;} 
.space-xxs{line-height: 0.2;} 
.space-xs{line-height: 0.5;} 
.space-s{line-height: 1;} 
.space-m{line-height: 1.2;} 
.space-l{line-height: 1.4;} 
.space-xl{line-height: 1.6;} 
.space-no-break{white-space: nowrap;}


/* 14.BORDER & LINES */
.br-radius-s{border-radius:12px;} /*br-12*/
.br-radius-m{border-radius:20px;} /*br-12*/
.br-radius-l{border-radius:25px;} /*br-25*/
.br-radius-xl{border-radius:50px;} /*br-50 */
.br-radius-xxl{border-radius:100px;} /*br-100 */
.br-acent-dotted{border:3px dotted var(--acent-color);}


/* 15.SEPARADORES */
.divider-main{border-bottom: 4px dotted var(--main-dark-color);}
.divider-acent{border-bottom: 4px dotted var(--acent-color);} 
.divider-off{border-bottom: 4px dotted #c68c0a;}
.border-dark{border: 2px solid var(--main-dark-color);}  
.border-dot {border: 3px dotted var(--main-dark-color);}
.border-sides-main{border-left: 3.5px var(--main-dark-color) dotted; border-right: 3.5px var(--main-dark-color) dotted;}

/* 16. LABELS */

.black-label{
  background-color: var(--black);
  border-radius: 20px;
  padding: 3px 6px 3px 6px;
  color: var(--acent-color);  
  font-size: 12px;
  font-family: 'Raleway', sans-serif;
}




/* 17.LINKS & TEXT UNDERLINE */



/* 17.1 link subrallado animado >> El Hover de este efecto esta concatenado con el hover de .grid-item en la hoja de estilo content.css*/
.link-underline{
  background-image: linear-gradient(#000 0 0);
  background-size: 200% .08em;
  background-position: 200% 100%;
  background-repeat: no-repeat;
  transition: background-size .3s, background-position .3s .3s;
}
.link-underline: hover{transition: background-size .3s .3s, background-position .3s; background-size: 200% 50%; background-position: 100% 100%;}

.txt-underline{
  background-image: linear-gradient(#ffc700 0 0);
  background-size: 200% 50%; background-position: 100% 100%;
  background-repeat: no-repeat;
}

.txt-underline-off{
  background-image: linear-gradient(#c68c0a 0 0);
  background-size: 200% 50%; background-position: 100% 100%;
  background-repeat: no-repeat;
}




/* 18 EFFECTS HOVER */

/* 18.1 opacity */
.op{filter:alpha(opacity=70);
  -moz-opacity:.70;
  -webkit-opacity:.70;
  -o-opacity:.70;
  -ms-opacity:.70;
  opacity:.70;
}
.op:hover{opacity: 100;}


/* 18.2 zoom */
.zoom{-webkit-transition:-webkit-transform 3s ease-out;-moz-transition:-moz-transform 3s ease-out;-o-transition:-o-transform 3s ease-out;-ms-transition:-ms-transform 3s ease-out;transition:transform 3s ease-out;}
.zoom:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}


/* 18.3 moveUP */
.moveup{-webkit-transition:-webkit-transform 1s ease-out;-moz-transition:-moz-transform 1s ease-out;-o-transition:-o-transform 1s ease-out;-ms-transition:-ms-transform 1s ease-out;transition:transform 1s ease-out;}
.moveup:hover{
-moz-transform: translate(0px, -10px);
-webkit-transform: translate(0px, -10px);
-o-transform: translate(0px, -10px);
-ms-transform: translate(0px, -10px);
 transform: translate(0px, -10px);}



/* 18.4 sombra */
 .shad, .shad-light{
-webkit-transition:-webkit-transform 1s ease-out;-moz-transition:-moz-transform 1s ease-out;-o-transition:-o-transform 1s ease-out;-ms-transition:-ms-transform 1s ease-out;transition:transform 1s ease-out;
-webkit-box-shadow: 2px 2px 16px 0px rgba(146, 146, 146, 0.4);
-moz-box-shadow:    2px 2px 16px 0px rgba(146, 146, 146, 0.4);
box-shadow:         2px 2px 16px 0px rgba(146, 146, 146, 0.4);


}
.shad:hover{
-webkit-box-shadow: 2px 2px 25px 0px rgba(146, 146, 146, 3);
-moz-box-shadow:    2px 2px 25px 0px rgba(146, 146, 146, 3);
box-shadow:         2px 2px 25px 0px rgba(146, 146, 146, 3); 
}



/* 19 Buttons */

.btn{ border-radius:50px; border: 2px solid black; padding:8px 24px 8px 24px; color:black;}
.btn:hover{background-color: black; color:var(--acent-color); transition: 0.5s;}







/* 660 */
@media screen and (max-width: 660px) {

.txt-r-c,.txt-l-c{text-align:center; }
.img-auto, .img-small-auto{width:95%; height: auto;}
.img-min-auto{width:50%; height: auto;}
.flex-row-col {display:flex; flex-direction: column;}
.center-x-y{display: flex; flex-direction:column; justify-content: center; align-items: center;}
.center-y-x{display: flex; flex-direction:row; justify-content: center; align-items: center;}

}  


/* 600 */
@media screen and (max-width: 600px) {
  .hide-screen{display:inline;}
  .bg-grid{background-size:5px;}
}  


 /* 385 */
 @media screen and (max-width: 385px) {

.title-l{font-size: 50px;}
.title, h1{font-size: 33px;}
.subtitle-l, h3{font-size: 33px;}


}