/*-------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////// 01 GLOBAL ///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*---------------------------------------------------------------- --- G1 GENERAL /////////////////////////////////////////////////// ----------------------------------------------------------------*/ details,figcaption,figure,hgroup,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button, html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} html, body { align-items:flex-start; align-content:flex-start; display:flex; flex-flow:row wrap; justify-content:center; height:auto; min-height:100vh; text-align:left; position: relative; scroll-behavior:smooth; width:100%; } @media only screen and (max-width:620px) { html, body { overflow-x:hidden; }} /*---------------------------------------------------------------- --- G2 COLORS ////////////////////////////////////////////////// ----------------------------------------------------------------*/ :root { --color-back:#f2f4f6; --color-white:#fff; --color-white-90:rgba(255, 255, 255, 0.9); --color-white-80:rgba(255, 255, 255, 0.8); --color-white-70:rgba(255, 255, 255, 0.7); --color-white-60:rgba(255, 255, 255, 0.6); --color-white-50:rgba(255, 255, 255, 0.5); --color-white-40:rgba(255, 255, 255, 0.4); --color-white-30:rgba(255, 255, 255, 0.3); --color-white-20:rgba(255, 255, 255, 0.2); --color-white-10:rgba(255, 255, 255, 0.1); --color-black:#000; --color-black-90:rgba(0, 0, 0, 0.9); --color-black-80:rgba(0, 0, 0, 0.8); --color-black-70:rgba(0, 0, 0, 0.7); --color-black-60:rgba(0, 0, 0, 0.6); --color-black-50:rgba(0, 0, 0, 0.5); --color-black-40:rgba(0, 0, 0, 0.4); --color-black-30:rgba(0, 0, 0, 0.3); --color-black-20:rgba(0, 0, 0, 0.2); --color-black-10:rgba(0, 0, 0, 0.1); --color-whatsapp:#25d366; --color-facebook:#3b5998; --color-instagram:#cd486b; --color-youtube:#ff0000; --color-twitter:#55acee; --color-x:#55acee; --color-linkedin:#007bb5; --gradient-main:linear-gradient(to top, var(--color-main) 0%, var(--color-main-soft) 180%); --gradient-main-soft:linear-gradient(to top, var(--color-main-softer) 0%, var(--color-white) 180%); --gradient-main-dark:linear-gradient(to top, var(--color-main-darker) 0%, var(--color-main) 180%); --gradient-second:linear-gradient(to top, var(--color-second) 0%, var(--color-second-soft) 180%); --gradient-second-soft:linear-gradient(to top, var(--color-second-softer) 0%, var(--color-white) 180%); --gradient-second-dark:linear-gradient(to top, var(--color-second-darker) 0%, var(--color-second) 180%); --gradient-neutro:linear-gradient(to top, var(--color-neutro-soft) 0%, var(--color-neutro) 180%); --gradient-neutro-soft:linear-gradient(to top, var(--color-neutro-softer) 0%, var(--color-neutro-soft) 180%); --gradient-neutro-dark:linear-gradient(to top, var(--color-neutro) 0%, var(--color-neutro-dark) 180%); --gradient-combinado-uno:linear-gradient(to right top, var(--color-main-soft) 0%, var(--color-main-softer) 40%, var(--color-second-softer) 80%); --gradient-combinado-dos:linear-gradient(to right top, var(--color-main) 0%, var(--color-main-soft) 40%, var(--color-second-soft) 80%); --gradient-combinado-tres:linear-gradient(to right top, var(--color-main-dark) 0%, var(--color-main) 40%, var(--color-second) 80%); --gradient-radial-uno:radial-gradient(circle at center center, #A6CEE2, #0066B2); --gradient-radial-dos:radial-gradient(circle at center center, #EDC1AE, #F26721); } /*---------------------------------------------------------------- --- G3 FONTS AND TEXTS ////////////////////////////////////////// ----------------------------------------------------------------*/ /* Font face ------------------------------*/ @font-face { font-display:swap; font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url('../assets/fonts/montserrat-v14/montserrat-v14-latin-300.woff2') format('woff2'); } /* montserrat-regular - latin */ @font-face { font-display:swap; font-family: 'Montserrat'; font-style:normal; font-weight:400; src: url('../assets/fonts/montserrat-v14/montserrat-v14-latin-regular.woff2') format('woff2'); } @font-face { font-display:swap; font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('../assets/fonts/montserrat-v14/montserrat-v14-latin-500.woff2') format('woff2'); } @font-face { font-display:swap; font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('../assets/fonts/montserrat-v14/montserrat-v14-latin-600.woff2') format('woff2'); } /* Fuente primaria ------------------------------*/ html, body{ font-family:var(--font-main); } /* Fuente secundaria ------------------------------*/ h1, h2, h3, h4, h5, h6{ font-family:var(--font-second); text-wrap: balance; } /* Font size ------------------------------*/ html, body { font-size:24px; } @media only screen and (max-width:2200px) { html, body { font-size:20px; }} @media only screen and (max-width:1500px) { html, body { font-size:18px; }} @media only screen and (max-width:920px) { html, body { font-size:16px; }} @media only screen and (max-width:720px) { html, body { font-size:15px; }} @media only screen and (max-width:820px) { html, body { font-size:14px; }} @media only screen and (max-width:620px) { html, body { font-size:16px; }} @media only screen and (max-width:520px) { html, body { font-size:15px; }} @media only screen and (max-width:420px) { html, body { font-size:14px; }} /* H ------------------------------*/ h1, h2, h3, h4, h5, h6 { height:auto; margin:0px; padding:2px 0px; line-height:1em; width:100%; } h1 {font-size:2rem;} h2 {font-size:1.8rem;} h3 {font-size:1.6rem;} h4 {font-size:1.4rem;} h5 {font-size:1.2rem;} h6 {font-size:1rem;} /* Párrafos ------------------------------*/ p { color:inherit; height:auto; line-height:1.4rem; margin:0px 0px; padding:10px 0px; text-align:left; text-wrap: pretty; width:100%; } p strong, p b{ font-weight:bold; } p a, p a:hover{ color:inherit; } a.large, p.large, p.large a, span.large, span.large a { font-size: var(--fs-large); } a.medium, p.medium, p.medium a, span.medium, span.medium a { font-size: var(--fs-medium); } a.small, p.small, p.small a span.small, span.small a { font-size: var(--fs-small); } p.center { text-align:center; } p.left { text-align:left; } p.right { text-align:right; } /* label ------------------------------*/ label { font-size:inherit; font-family:inherit; font-weight:inherit; } /* ------------------------------*/ div.center { display:flex; flex-flow:row wrap; justify-content:center; } .uppercase{ text-transform:uppercase; } /* Punto suspensivos ------------------------------*/ .puntos-suspensivos{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* txt small ------------------------------*/ .txt-small { color:var(--color-neutro); font-size:0.7rem; line-height:1.2rem; } .txt-small > *{ color:inherit; font-size:inherit; text-decoration:none; } .txt-small > * .svg-icon{ display:inline-block; height:12px; width:12px; } p.add-columns { columns:2; column-gap:4%; text-align: justify; } @media only screen and (max-width:620px) { p.add-columns{ columns:1; column-gap:0px; text-align:left; }} /* Enlaces ------------------------------*/ a, a:visited{ margin:0px; padding:0px; text-decoration:underline; } a:hover { text-decoration:underline; } /* Listas ------------------------------*/ ul, ol { float:none; height: auto; margin:10px 0px; padding-left:18px; width:100%; } ul li, ol li{ float: none; height: auto; line-height:1.4em; margin: 0px; padding: 0px; width:100%; } ul li { list-style:disc; } ol li { list-style:decimal; } ul li a, ol li a{ color:inherit; } /* Fonts variables ------------------------------*/ :root { --fs-small:0.6rem; --fs-medium:0.8rem; --fs-regular:1rem; --fs-large:1.2rem; --fs-xlarge:1.4rem; --fs-xxlarge:1.6rem; --fw-thin:300; --fw-normal:400; --fw-bold:500; --fw-bolder:500; } /*---------------------------------------------------------------- --- G4 IMAGENES ////////////////////////////////////////////////// ----------------------------------------------------------------*/ /* IMG ------------------------------*/ img{ display:block; height:auto; padding:0px; margin:0px; max-width:100%; } img:not([alt]) { outline:1px dashed pink; } .fancybox-content img:not([alt]) { outline:0px dashed pink; } /*---------------------------------------------------------------- --- G5 OTROS //////////////////////////////////////////////////// ----------------------------------------------------------------*/ /* Box shadow ------------------------------*/ :root { --box-shadow:0px 0px 6px rgba(0, 0, 0, 0.1); --box-shadow-small:0px 0px 2px rgba(0, 0, 0, 0.2); } /* iFrame ------------------------------*/ iframe { border:0px; width:100%!important; } /* Lazy ------------------------------*/ .lazyloading { opacity: 0; } .loading, .lazyload, .lazyloaded{ opacity: 1; transition: opacity 0.4s; } /* Transition ------------------------------*/ :root { --add-transition-very-slow:all 0.5s; --add-transition-slow:all 0.4s; --add-transition:all 0.3s; --add-transition-fast:all 0.2s; --add-transition-very-fast:all 0.1s; } /*-------------------------------------------------------------------------- ////////////////////////////////////////////////////// ---------- END GLOBAL --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////// 02 STRUCTURE ////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*---------------------------------------------------------------- --- S1 GENERAL /////////////////////////////////////////////////// ----------------------------------------------------------------*/ /* Box sizing ------------------------------*/ * { box-sizing:border-box!important; float: none; position:relative; } /* Flexbox all ------------------------------*/ *[data-element='banner'], *[data-element='banner'] div, *[data-element='banner-main'], *[data-element='banner-main'] div, *[data-element='panel'], *[data-element='panel'] > div:not(.modal), footer, footer > div { display:flex; flex-flow:row wrap; } *[data-element='panel'].swiper, .swiper[data-element='panel'] { display:block!important; } /* Flexbox al centro ------------------------------*/ div.center, *[data-element='panel'].center, *[data-element='banner'].center .banner-box > *, .banner-box.center, .banner-box.center > *, ul.menu.center, section.center, footer.center { justify-content:center!important; } /* Scroll bar ------------------------------*/ .container, .main, *[data-element='banner'], *[data-element='banner-main'], *[data-element='panel'], { scrollbar-gutter: stable; } /* Gap ------------------------------*/ :root { --gap-main:4vw; --gap-second:3vw; --gap-inside:10px; --gap-inside-medium:8px; --gap-inside-small:6px; } .gap-main { gap:var(--gap-main); } /* Panels ------------------------------*/ *[data-element='panel'] { padding-bottom:20px; padding-top:20px; width:100%; } /* Container default ------------------------------*/ div.container { width:100%; } /* Rounded ------------------------------*/ :root { --rounded:8px; --rounded-top:8px 8px 0px 0px; --rounded-bottom:0px 0px 8px 8px; --rounded-left:8px 0px 0px 8px; --rounded-right:0px 8px 8px 0px; --rounded-none:0px 0px 0px 0px; --rounded-medium:6px; --rounded-medium-top:6px 6px 6px 6px; --rounded-medium-bottom:6px 6px 6px 6px; --rounded-medium-left:6px 6px 6px 6px; --rounded-medium-right:6px 6px 6px 0px; --rounded-medium-none:0px 0px 0px 0px; --rounded-small:4px; --rounded-small-top:4px 4px 0px 0px; --rounded-small-bottom:0px 0px 4px 4px; --rounded-small-left:4px 0px 0px 4px; --rounded-small-right:0px 4px 4px 0px; --rounded-small-none:0px 0px 0px 0px; } /*---------------------------------------------------------------- --- S2 BLOQUES Y COLUMAS ///////////////////////////////////////// ----------------------------------------------------------------*/ div.bloque, div.bloque > .col { gap:var(--gap-second); } div.bloque { display:flex; flex-flow:row wrap; justify-content:flex-start; height:auto; width:100%; } /* Columna ------------------------------*/ div.col { align-items:flex-start; align-content:flex-start; display:flex; flex-grow:99; flex-wrap:wrap; justify-content:flex-start; height:auto; min-width:300px; padding:0px; transition:all 0.12s; width:18%; /* but grow */ } /* Dos columnas dentro de un div ------------------------------*/ div.cols-2 > div.col { width:40%; } /* Tres columnas dentro de un div ------------------------------*/ div.cols-3 > div.col { min-width:120px; width:28%; /* but grow */ } /* col aside ------------------------------*/ div.cols-aside > div.col { width:60%; /* but grow */ } div.cols-aside > div.col-aside { width:30%; /* but grow */ } /* ------------------------------------ 820 --- --------------------------------------------------*/ @media only screen and (max-width:820px) { div.cols-3 > div.col { min-width:300px; } } /* ------------------------------------ 100% 720 --- --------------------------------------------------*/ @media only screen and (max-width:720px) { div.cols-2 > div.col { min-width:100%; } div.cols-3 > div.col { min-width:100%; } } /*---------------------------------------------------------------- --- S3 DIV IN //////////////////////////////////////////////////// ----------------------------------------------------------------*/ .in.full, .in-full, .in-full-to-none{ padding-left:3vw; padding-right:3vw; } .in.wide, .in-wide, .in-wide-to-none{ padding-left:6vw; padding-right:6vw; /*width:90vw;*/ } .in, .in-to-full, .in-to-wide, .in-to-none{ padding-left:10vw; padding-right:10vw; } .in.thin, .in-thin, .in-thin-to-full, .in-thin-to-wide, .in-thin-to-none{ padding-left:20vw; padding-right:20vw; } /* ----------------------------------------- 2200 --- --------------------------------------------------*/ @media only screen and (max-width:2200px) { .in.full, .in-full, .in-full-to-none{ padding-left:3vw; padding-right:3vw; } .in.wide, .in-wide, .in-wide-to-none{ padding-left:3vw; padding-right:3vw; } .in, .in-to-full, .in-to-wide, .in-to-none{ padding-left:10vw; padding-right:10vw; /*width:80vw;*/ } .in.thin, .in-thin, .in-thin-to-full, .in-thin-to-wide, .in-thin-to-none{ padding-left:20vw; padding-right:20vw; /*width:60vw;*/ } } /* ----------------------------------------- 1200 --- --------------------------------------------------*/ @media only screen and (max-width:1200px) { .in.thin, .in-thin, .in-thin-to-full, .in-thin-to-wide, .in-thin-to-none{ padding-left:15vw; padding-right:15vw; /*width:70vw;*/ } } /* ----------------------------------------- 1020 --- --------------------------------------------------*/ @media only screen and (max-width:1020px) { .in, .in-to-full, .in-to-wide, .in-to-none{ padding-left:3vw; padding-right:3vw; } } /* ----------------------------------------- 820 --- --------------------------------------------------*/ @media only screen and (max-width:820px) { .in, .in-to-full, .in-to-wide, .in-to-none{ padding-left:6vw; padding-right:6vw; } .in.thin, .in-thin, .in-thin-to-full, .in-thin-to-wide, .in-thin-to-none{ padding-left:10vw; padding-right:10vw; } } /* ------------------------------------------ 720 --- --------------------------------------------------*/ @media only screen and (max-width:720px) { .in, .in-to-full, .in-to-wide, .in-to-none{ padding-left:3vw; padding-right:3vw; } .in.thin, .in-thin, .in-thin-to-full, .in-thin-to-wide, .in-thin-to-non{ padding-left:8vw; padding-right:8vw; } } /* ------------------------------------------ 620 --- --------------------------------------------------*/ @media only screen and (max-width:620px) { .in-full, .in-to-full, .in-thin-to-full{ padding-left:3vw; padding-right:3vw; } .in-wide, .in-to-wide, .in-thin-to-wide{ padding-left:3vw; padding-right:3vw; } .in{ padding-left:7vw; padding-right:7vw; } .in.thin, .in-thin{ padding-left:10vw; padding-right:10vw; } .in-full-to-none, .in-wide-to-none, .in-to-none, .in-thin-to-none{ padding-left:0vw; padding-right:0vw; } } /* ------------------------------------------ 520 --- --------------------------------------------------*/ @media only screen and (max-width:520px) { .in{ padding-left:5vw; padding-right:5vw; } .in.thin, .in-thin{ padding-left:8vw; padding-right:8vw; } } /* ------------------------------------------ 420 --- --------------------------------------------------*/ @media only screen and (max-width:420px) { .in{ padding-left:3vw; padding-right:3vw; } .in.thin, .in-thin{ padding-left:3vw; padding-right:3vw; } } /*---------------------------------------------------------------- --- S4 MAS /////////////////////////////////////////////////////// ----------------------------------------------------------------*/ /* hr ------------------------------*/ hr { background-color:var(--color-neutro-softer); border:0px; padding:0px; margin:5px 0px; height:1px; width:100%; } hr.medium { height:3px; } hr.big { height:5px; } hr.space-2 {background-color:transparent!important; margin:1px 0px!important;} hr.space-4 {background-color:transparent!important; margin:2px 0px!important;} hr.space-6 {background-color:transparent!important; margin:3px 0px!important;} hr.space-8 {background-color:transparent!important; margin:4px 0px!important;} hr.space-10 {background-color:transparent!important; margin:5px 0px!important;} hr.space-20 {background-color:transparent!important; margin:10px 0px!important;} hr.space-30 {background-color:transparent!important; margin:15px 0px!important;} hr.space-40 {background-color:transparent!important; margin:20px 0px!important;} hr.space-60 {background-color:transparent!important; margin:30px 0px!important;} hr.space-80 {background-color:transparent!important; margin:40px 0px!important;} hr.space-grow { background:none; display:flex; flex-flow:row wrap; flex-grow:999; width:0%; } /* Al 100% ------------------------------*/ .w100 {width:100%!important;} /* Al 50% ------------------------------*/ .w50 {width:50%;} /* Formulario ------------------------------*/ .formulario { height:auto; width:100%; } /*------------------------------------------------------------------------- ////////////////////////////////////////////////// ---------- END STRUCTURE -------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- //////////////////////////////////////////////////////////////////////////// 03 HEADER ///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /* import from: codex/header/css-header.css */ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////// ---------- / END HEADER --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////// 04 BANNERS /////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*---------------------------------------------------------------- --- BAN1 GENRAL ////////////////////////////////////////////////// ----------------------------------------------------------------*/ *[data-element='banner'] .inside, *[data-element='banner-main'] .inside { overflow:hidden; } *[data-element='banner'] .panel, *[data-element='banner-main'] .panel { overflow:hidden; } /*---------------------------------------------------------------- --- BAN2 BANNER BOX ///////////////////////////////////////////// ----------------------------------------------------------------*/ .banner-box { align-items:center; align-content:center; display:flex; flex-flow:row wrap; gap:var(--gap-inside-small); height:auto; justify-content:flex-start; z-index:10; /* width:auto; */ } .banner-box .title{ padding:0px; margin:0px; } .banner-box .subtitle{ padding:0px; margin:0px; } .banner-box > p{ text-align:left; padding:0px; margin:0px; } .banner-box > *:not(a){ width:100%; } /* If center ------------------------------------------*/ .banner-box.center{ justify-content:center; } .banner-box.center > * { text-align: center; } /* ------------------------------------- MOVIL 620 --- --------------------------------------------------*/ @media only screen and (max-width:620px) { .banner-box{ padding:20px 5vw; width:100%; z-index:99; } .banner-box > *:not(a){ width:100%; } } /*---------------------------------------------------------------- --- BANNER DUOPANEL ///////////////////////////////////////////// ----------------------------------------------------------------*/ /* -------------------------------------------------- DO ---------------------------------------- ANCHO --- ---------------------------------------------------*/ /* Usamos las mismas clases predefinidas from: www/style.css para determinar padding laterales. none │ in-full │ in-full-to-none │ in-wide │ in │ in-thin │ in-to-wide │ in-thin-to-wide ejemplo: