/*-------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////// GLOBAL //////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*------------------------------------------------------------------------ GLOBAL - 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; }} /*------------------------------------------------------------------------ GLOBAL - 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-maps:#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); } /*--------------------------------------------------- --- COLOR MAIN //////////////////////////////////// ---------------------------------------------------*/ /* Main ----------------------------------------*/ .color-main, .titles-color-main .title { color:var(--color-main)!important; } .color-main.svg-icon { fill:var(--color-main)!important; } .bg-main, .items-bg-main [class^="item"], .cols-bg-main [class^="col"], ul.items-bg-main li > * { background:var(--color-main)!important; } /* Main darker ----------------------------------------*/ .color-main-darker, .titles-color-main-darker .title { color: var(--color-main-darker)!important; } .color-main-darker.svg-icon { fill: var(--color-main-darker)!important; } .bg-main-darker, .items-bg-main-darker [class^="item"], .cols-bg-main-darker [class^="col"], ul.items-bg-main-darker li > * { background:var(--color-main-darker)!important; } /* Main dark ----------------------------------------*/ .color-main-dark, .titles-color-main-dark .title { color: var(--color-main-dark)!important; } .color-main-dark.svg-icon { fill: var(--color-main-dark)!important; } .bg-main-dark, .items-bg-main-dark [class^="item"], .cols-bg-main-dark [class^="col"], ul.items-bg-main-dark li > * { background:var(--color-main-dark)!important; } /* Main soft ----------------------------------------*/ .color-main-soft, .titles-color-main-soft .title { color: var(--color-main-soft) !important; } .color-main-soft.svg-icon { fill: var(--color-main-soft) !important; } .bg-main-soft, .items-bg-main-soft [class^="item"], .cols-bg-main-soft [class^="col"], ul.items-bg-main-soft li > * { background:var(--color-main-soft)!important; } /* Main softer ----------------------------------------*/ .color-main-softer, .titles-color-main-softer .title { color: var(--color-main-softer) !important; } .color-main-softer.svg-icon { fill: var(--color-main-softer) !important; } .bg-main-softer, .items-bg-main-softer [class^="item"], .cols-bg-main-softer [class^="col"], ul.items-bg-main-softer li > * { background:var(--color-main-softer)!important; } /*--------------------------------------------------- --- COLOR SECOND ////////////////////////////////// ---------------------------------------------------*/ /* Second ----------------------------------------*/ .color-second, .titles-color-second .title { color: var(--color-second) !important; } .color-second.svg-icon { fill: var(--color-second) !important; } .bg-second, .items-bg-second [class^="item"], .cols-bg-second [class^="col"], ul.items-bg-second li > * { background:var(--color-second)!important; } /* Second darker ----------------------------------------*/ .color-second-darker, .titles-color-second-darker .title { color: var(--color-second-darker) !important; } .color-second-darker.svg-icon { fill: var(--color-second-darker) !important; } .bg-second-darker, .items-bg-second-darker [class^="item"], .cols-bg-second-darker [class^="col"], ul.items-bg-second-darker li > * { background:var(--color-second-darker)!important; } /* Second dark ----------------------------------------*/ .color-second-dark, .titles-color-second-dark .title { color: var(--color-second-dark) !important; } .color-second-dark.svg-icon { fill: var(--color-second-dark) !important; } .bg-second-dark, .items-bg-second-dark [class^="item"], .cols-bg-second-dark [class^="col"], ul.items-bg-second-dark li > * { background:var(--color-second-dark)!important; } /* Second soft ----------------------------------------*/ .color-second-soft, .titles-color-second-soft .title { color: var(--color-second-soft) !important; } .color-second-soft.svg-icon { fill: var(--color-second-soft) !important; } .bg-second-soft, .items-bg-second-soft [class^="item"], .cols-bg-second-soft [class^="col"], ul.items-bg-second-soft li > * { background:var(--color-second-soft)!important; } /* Second softer ----------------------------------------*/ .color-second-softer, .titles-color-second-softer .title { color: var(--color-second-softer) !important; } .color-second-softer.svg-icon { fill: var(--color-second-softer) !important; } .bg-second-softer, .items-bg-second-softer [class^="item"], .cols-bg-second-softer [class^="col"], ul.items-bg-second-softer li > * { background:var(--color-second-softer)!important; } /*--------------------------------------------------- --- COLOR WHITE //////////////////////////////////// ---------------------------------------------------*/ .color-white, .titles-color-white .title { color:var(--color-white)!important; } .color-white.svg-icon { fill:var(--color-white)!important; } .bg-white, .items-bg-white [class^="item"]:not(.items-split .item-row), .items-bg-white.items-split [class^="item"] > [class^="col"], .cols-bg-white [class^="col"], ul.items-bg-white li > * { background:var(--color-white)!important; } .color-white-90, .titles-color-white-90 .title { color:var(--color-white-90)!important; } .color-white-80, .titles-color-white-80 .title { color:var(--color-white-80)!important; } .color-white-70, .titles-color-white-70 .title { color:var(--color-white-70)!important; } .color-white-60, .titles-color-white-60 .title { color:var(--color-white-60)!important; } .color-white-50, .titles-color-white-50 .title { color:var(--color-white-50)!important; } .color-white-40, .titles-color-white-40 .title { color:var(--color-white-40)!important; } .color-white-30, .titles-color-white-30 .title { color:var(--color-white-30)!important; } .color-white-20, .titles-color-white-20 .title { color:var(--color-white-20)!important; } .color-white-10, .titles-color-white-10 .title { color:var(--color-white-10)!important; } /*--------------------------------------------------- --- COLOR BLACK /////////////////////////////////// ---------------------------------------------------*/ .color-black, .titles-color-black .title { color:var(--color-black)!important; } .color-black.svg-icon { fill:var(--color-black)!important; } .bg-black, .items-bg-black [class^="item"], .cols-bg-black [class^="col"], ul.items-bg-black li > * { background:var(--color-black)!important; } .color-black-90, .titles-color-black-90 .title { color:var(--color-black-90)!important; } .color-black-80, .titles-color-black-80 .title { color:var(--color-black-80)!important; } .color-black-70, .titles-color-black-70 .title { color:var(--color-black-70)!important; } .color-black-60, .titles-color-black-60 .title { color:var(--color-black-60)!important; } .color-black-50, .titles-color-black-50 .title { color:var(--color-black-50)!important; } .color-black-40, .titles-color-black-40 .title { color:var(--color-black-40)!important; } .color-black-30, .titles-color-black-30 .title { color:var(--color-black-30)!important; } .color-black-20, .titles-color-black-20 .title { color:var(--color-black-20)!important; } .color-black-10, .titles-color-black-10 .title { color:var(--color-black-10)!important; } /*--------------------------------------------------- --- COLOR NEUTRO ///////////////////////////////// ---------------------------------------------------*/ /* Neutro ----------------------------------------*/ .color-neutro, .titles-color-neutro .title { color: var(--color-neutro) !important; } .color-neutro.svg-icon { fill: var(--color-neutro) !important; } .bg-neutro, .items-bg-neutro [class^="item"], ul.items-bg-neutro li > * { background:var(--color-neutro)!important; } /* Neutro darker ----------------------------------------*/ .color-neutro-darker, .titles-color-neutro-darker .title { color: var(--color-neutro-darker) !important; } .color-neutro-darker.svg-icon { fill: var(--color-neutro-darker) !important; } .bg-neutro-darker, .items-bg-neutro-darker [class^="item"], ul.items-bg-neutro-darker li > * { background:var(--color-neutro-darker)!important; } /* Neutro dark ----------------------------------------*/ .color-neutro-dark, .titles-color-neutro-dark .title { color: var(--color-neutro-dark) !important; } .color-neutro-dark.svg-icon { fill: var(--color-neutro-dark) !important; } .bg-neutro-dark, .items-bg-neutro-dark [class^="item"], ul.items-bg-neutro-dark li > * { background:var(--color-neutro-dark)!important; } /* Neutro soft ----------------------------------------*/ .color-neutro-soft, .titles-color-neutro-soft .title { color: var(--color-neutro-soft) !important; } .color-neutro-soft.svg-icon { fill: var(--color-neutro-soft) !important; } .bg-neutro-soft, .items-bg-neutro-soft [class^="item"], ul.items-bg-neutro-soft li > * { background:var(--color-neutro-soft)!important; } /* Neutro softer ----------------------------------------*/ .color-neutro-softer, .titles-color-neutro-softer .title { color: var(--color-neutro-softer) !important; } .color-neutro-softer.svg-icon { fill: var(--color-neutro-softer) !important; } .bg-neutro-softer, .items-bg-neutro-softer [class^="item"], ul.items-bg-neutro-softer li > * { background:var(--color-neutro-softer)!important; } /*------------------------------------------------------------------------ GLOBAL - 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'); } @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'); } */ :root { --fs-h1: 2rem; --fs-h2: 1.8rem; --fs-h3: 1.6rem; --fs-h4: 1.4rem; --fs-h5: 1.2rem; --fs-h6: 1rem; --fs-xlarge:1.4rem; --fs-large:1.2rem; --fs-default:1rem; --fs-medium:0.8rem; --fs-small:0.6rem; --fs-xsmall:0.4rem; --fs-5x:5em; --fs-4x:4em; --fs-3x:3em; --fs-2x:2em; --fs-1x:1em; } /*--------------------------------------------------- --- GENERAL //////////////////////////////////// ---------------------------------------------------*/ .font-main {font-family: var(--font-main)!important;} .font-second {font-family: var(--font-second)!important;} .fs-xlarge { font-size:var(--fs-xlarge)!important;} .fs-large { font-size:var(--fs-large)!important;} .fs-default, .fs-normal { font-size:var(--fs-default)!important;} .fs-medium { font-size:var(--fs-medium)!important;} .fs-small { font-size:var(--fs-small)!important;} .fs-xsmall { font-size:var(--fs-xsmall)!important;} .fs-5x { font-size:var(--fs-5x)!important;} .fs-4x { font-size:var(--fs-4x)!important;} .fs-3x { font-size:var(--fs-3x)!important;} .fs-2x { font-size:var(--fs-2x)!important;} .fs-1x { font-size:var(--fs-1x)!important;} .fw-bolder { font-weight:800;} .fw-bold { font-weight:700;} .fw-semi-bold { font-weight:600;} .fw-normal { font-weight:normal!important;} .fw-thin { font-weight:300;} /* Fuente primaria ----------------------------------------*/ html, body{ font-family:var(--font-main); font-weight:normal; } /* Fuente secundaria ----------------------------------------*/ h1, h2, h3, h4, h5, h6{ font-family:var(--font-second); text-wrap: balance; } /* Font size ----------------------------------------*/ body { font-size: clamp(1rem, 1.2vw, 1.5rem); } /* 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:16px; }} @media only screen and (max-width:820px) { html, body { font-size:16px; }} @media only screen and (max-width:620px) { html, body { font-size:16px; }} @media only screen and (max-width:520px) { html, body { font-size:16px; }} @media only screen and (max-width:420px) { html, body { font-size:16px; }} */ /*--------------------------------------------------- --- Hs /////////////////////////////////////// ---------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { height:auto; margin:0px; padding:2px 0px; line-height:1.2em; width:100%; } h1 {font-size:var(--fs-h1);} h2 {font-size:var(--fs-h2);} h3 {font-size:var(--fs-h3);} h4 {font-size:var(--fs-h4);} h5 {font-size:var(--fs-h5);} h6 {font-size:var(--fs-h6);} /*--------------------------------------------------- --- PARRAFOS //////////////////////////////////// ---------------------------------------------------*/ p { color:inherit; font-size:inherit; height:auto; margin:0px 0px; padding:0px 0px; text-align:left; text-wrap: pretty; width:100%; } p a, p a:hover{ color:inherit; } p.center { text-align:center; } p.left { text-align:left; } p.right { text-align:right; } /*--------------------------------------------------- --- COLUMNA EN PARRADO ///////////////////////////// ---------------------------------------------------*/ p.add-columns { columns:2; column-gap:var(--gap-second); text-align: justify; } @media only screen and (max-width:620px) { p.add-columns{ columns:1; column-gap:0px; text-align:left; }} /*--------------------------------------------------- --- ANCHORS //////////////////////////////////// ---------------------------------------------------*/ a, a:visited{ font-size:inherit; margin:0px; padding:0px; text-decoration:underline; } a:hover { text-decoration:underline; } /*--------------------------------------------------- --- LINK //////////////////////////////////// ---------------------------------------------------*/ .link{ color:inherit; cursor: pointer; font-size:0.7em; text-transform:uppercase; text-decoration:none; } .link:hover{ text-decoration:underline; } a:hover .link{ text-decoration:none; } /*--------------------------------------------------- --- LISTAS ////////////////////////////////////// ---------------------------------------------------*/ ul.list, ol.list { margin:10px 0px; list-style-position: outside; padding-left:1.2em; width:100%; } ul.list li, ol.list li{ float: none; height: auto; line-height:1.4em; margin: 0px; padding: 0px; width:100%; } ul.list li { list-style:disc; } ol.list li { list-style:decimal; } ul.list li a, ol.list li a{ color:inherit; } /*-------------------------------------------------- --- TITLES RESET ////////////////////////// ---------------------------------------------------*/ [class*="title"] { color:inherit; font-size:inherit; text-wrap: pretty; } .title.center, .title-1.center, .title-2.center, .title-3.center, .subtitle.center, .subtitle-1.center, .subtitle-2.center, .subtitle-3.center{ justify-content:center; text-align:center; } /*------------------------------------------------------------------------ GLOBAL - IMAGENS //////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- --- 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; } /*-------------------------------------------------- --- SVG-ICON ////////////////////////// ---------------------------------------------------*/ .svg-icon { aspect-ratio: 1 / 1; height:auto; } .svg-icon.xlarge{width:clamp(100px, 5vw, 120px);} .svg-icon.large{width:clamp(80px, 5vw, 100px);} .svg-icon{width:clamp(60px, 5vw, 80px);} .svg-icon.medium {width:clamp(40px, 5vw, 60px);} .svg-icon.small {width:clamp(20px, 5vw, 40px);} .svg-icon.xsmall {width:clamp(10px, 5vw, 20px);} /*------------------------------------------------------------------------ GLOBAL - MAS //////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- --- HR ////////////////////////////////////// ---------------------------------------------------*/ hr, hr.wp-block-separator { background-color:var(--color-neutro-softer)!important; border:0px; padding:0px; margin:5px 0px; height:1px; width:100%; } hr.medium { height:3px; } hr.small, hr.thin { height:1px; } hr.big, hr.large { height:5px; } hr.space-1x {background-color:transparent!important; margin:1px 0px!important;} hr.space-2x {background-color:transparent!important; margin:2px 0px!important;} hr.space-3x {background-color:transparent!important; margin:3px 0px!important;} hr.space-4x {background-color:transparent!important; margin:4px 0px!important;} hr.space-5x {background-color:transparent!important; margin:5px 0px!important;} hr.space-6x {background-color:transparent!important; margin:6px 0px!important;} hr.space-7x {background-color:transparent!important; margin:7px 0px!important;} hr.space-8x {background-color:transparent!important; margin:8px 0px!important;} hr.space-9x {background-color:transparent!important; margin:9px 0px!important;} hr.space-10x {background-color:transparent!important; margin:10px 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:99; width:0%; } /*--------------------------------------------------- --- BOX SIZING //////////////////////////////////// ---------------------------------------------------*/ * { box-sizing:border-box!important; float: none; } /* label ----------------------------------------*/ label { font-size:inherit; font-family:inherit; font-weight:inherit; } /* Uppercase ----------------------------------------*/ .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; } /* Box shadow ----------------------------------------*/ :root { --box-shadow:0px 0px 6px rgba(0, 0, 0, 0.1); --box-shadow-medium:0px 0px 4px rgba(0, 0, 0, 0.2); --box-shadow-small:0px 0px 2px rgba(0, 0, 0, 0.2); } .shadow {box-shadow:var(--box-shadow);} .shadow-medium {box-shadow:var(--box-shadow-medium);} .shadow-small {box-shadow:var(--box-shadow-small);} /* iFrame ----------------------------------------*/ iframe { aspect-ratio: 16 / 9; border: none; display: block; height: auto; max-width: 100%; width: 100%; } /* Lazy ----------------------------------------*/ .lazyloading { opacity: 0; } .loading, .lazyload, .lazyloaded{ opacity: 1; transition: opacity 0.4s; } /* Esconder ------------------------------*/ .ocultar, .esconder, .hide { display:none; } /* Transition ----------------------------------------*/ :root { --add-transition-slower: transform 0.5s ease-in-out, opacity 0.5s linear; --add-transition-slow: transform 0.4s ease-in-out, opacity 0.4s linear; --add-transition: transform 0.3s ease-in-out, opacity 0.3s linear; --add-transition-fast: transform 0.2s ease-in-out, opacity 0.2s linear; --add-transition-very-fast: transform 0.1s ease-in-out, opacity 0.1s linear; --add-opacity-slower: opacity 0.3s ease; --add-opacity-slow: opacity 0.3s ease; --add-opacity: opacity 0.3s ease; --add-opacity-fast: opacity 0.3s ease; --add-opacity-faster: opacity 0.3s ease; --add-color-slower: background-color 0.3s ease, color 0.3s ease; --add-color-slow: background-color 0.3s ease, color 0.3s ease; --add-color: background-color 0.3s ease, color 0.3s ease; --add-color-fast: background-color 0.3s ease, color 0.3s ease; --add-color-faster: background-color 0.3s ease, color 0.3s ease; } /*-------------------------------------------------------------------------- //////////////////////////////////////////////////// ---------- / END GLOBAL --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////// STRUCTURE ////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*------------------------------------------------------------------------ STRUCTURE - GENERAL ///////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*--------------------------------------------------- --- Z ELEMENTOS //////////////////////////////////// ---------------------------------------------------*/ /* 9 ----------------------------------------*/ [data-element='panel-movil'].show { z-index:9; } /* 8 ----------------------------------------*/ .block-opacity.show { z-index:8; } /* 7 ----------------------------------------*/ /* 6 ----------------------------------------*/ [data-element='header-main'] { z-index:6; } /* 5 Default ----------------------------------------*/ [data-element='banner-main'], [data-element='banner'] { z-index:5; } [data-element='panel'] { z-index:5; } /* 4 ----------------------------------------*/ /* 3 ----------------------------------------*/ /* 2 ----------------------------------------*/ [data-element='panel-movil'] { z-index:2; } /* 1 ----------------------------------------*/ .block-opacity { z-index:1; } /*--------------------------------------------------- --- PADDING ////////////////////////////////////// ---------------------------------------------------*/ :root { --padding-main:4vw; --padding-second:3vw; --padding-third:2vw; --padding-large:80px; --padding:40px; --padding-medium:20px; --padding-small:10px; --padding-1x:2px; --padding-2x:4px; --padding-3x:6px; --padding-4x:8px; --padding-5x:10px; --padding-6x:12px; --padding-7x:14px; --padding-8x:16px; --padding-9x:19px; --padding-10x:20px; } .padding-1x { padding:var(--padding-1x); } .padding-2x { padding:var(--padding-2x); } .padding-3x { padding:var(--padding-3x); } .padding-4x { padding:var(--padding-4x); } .padding-5x { padding:var(--padding-5x); } .padding-6x { padding:var(--padding-6x); } .padding-7x { padding:var(--padding-7x); } .padding-8x { padding:var(--padding-8x); } .padding-9x { padding:var(--padding-9x); } .padding-10x { padding:var(--padding-10x); } .padding-main { padding:var(--padding-main); } .padding-second { padding:var(--padding-second); } .padding-third { padding:var(--padding-third); } .padding-large { padding:var(--padding-large); } .padding { padding:var(--padding); } .padding-medium { padding:var(--padding-medium); } .padding-small { padding:var(--padding-small); } .padding-block-large { padding-block: clamp(50px, 6vw, 100px); } .padding-block { padding-block: clamp(40px, 5vw, 80px); } .padding-block-medium { padding-block: clamp(30px, 4vw, 60px); } .padding-block-small { padding-block: clamp(20px, 3vw, 40px); } /*--------------------------------------------------- --- GAP ////////////////////////////////////////// ---------------------------------------------------*/ :root { --gap-main:4vw; --gap-second:3vw; --gap-third:2vw; --gap-inside:8px; --gap:10px; --gap-medium:8px; --gap-small:4px; --gap-xsmall:2px; --gap-1x:2px; --gap-2x:4px; --gap-3x:6px; --gap-4x:8px; --gap-5x:10px; --gap-6x:12px; } .gap-1x { gap:var(--gap-1x); } .gap-2x { gap:var(--gap-2x); } .gap-3x { gap:var(--gap-3x); } .gap-4x { gap:var(--gap-4x); } .gap-5x { gap:var(--gap-5x); } .gap-main, .gap-main.items-split .item-row{ gap:var(--gap-main); } .gap-second, .gap-second.items-split .item-row { gap:var(--gap-second); } .gap-third, .gap-third.items-split .item-row { gap:var(--gap-third); } .gap-inside { gap:var(--gap-inside); } .gap { gap:var(--gap); } .gap-medium { gap:var(--gap-medium); } .gap-small { gap:var(--gap-small); } .gap-sxmall { gap:var(--gap-xsmall); } /*--------------------------------------------------- --- CONTENT ////////////////////////////////////// ---------------------------------------------------*/ /* Usualmente hay elementos que abarcan: 100% ancho de la pantalla 50% 30 Con base a lo anterior tenemos content-large para < 100% content para < 50% content-medium para < 30% content-samll para < 20% */ .content-large, .content-large-to-none { padding-block:clamp(40px, 6vw, 80px); padding-inline:clamp(40px, 10vw, 200px); gap:clamp(6px, 3vw, 10px); } .content, .content-to-none { padding-block:clamp(40px, 5vw, 60px); padding-inline:clamp(40px, 5vw, 100px); gap:clamp(4px, 2vw, 8px); } .content-medium, .content-medium-to-none { padding-block:clamp(30px, 4vw, 50px); padding-inline:clamp(30px, 4vw, 80px); gap:clamp(4px, 2vw, 8px); } .content-small, .content-small-to-none { padding-block:clamp(20px, 4vw, 40px); padding-inline:clamp(20px, 2vw, 40px); gap:clamp(2px, 2vw, 6px); } @media only screen and (max-width:620px) { .content-large-to-none, .content-to-none, .content-medium-to-none, .content-small-to-none{ padding-inline:clamp(0px, 0vw, 0px); } } /* Alineaciones ----------------------------------------*/ [class^="content"].center > *:where(p, .title, .subtitle, .link), [class^="content"].center-to-left > *:where(p, .title, .subtitle, .link){ justify-content:center; text-align:center; } @media only screen and (max-width:620px) { [class^="content"].center-to-left > *:where(p, .title, .subtitle, .link){ justify-content:flex-start; text-align:left; } } /*-------------------------------------------------- --- ROUNDED ////////////////////////////////// ---------------------------------------------------*/ :root { --rounded-xlarge:24px; --rounded-xlarge-top:24px 24px 0px 0px; --rounded-xlarge-bottom:0px 0px 24px 24px; --rounded-xlarge-left:24px 0px 0px 24px; --rounded-xlarge-right:0px 24px 24px 0px; --rounded-xlarge-none:0px 0px 0px 0px; --rounded-large:18px; --rounded-large-top:18px 18px 0px 0px; --rounded-large-bottom:0px 0px 18px 18px; --rounded-large-left:18px 0px 0px 18px; --rounded-large-right:0px 18px 18px 0px; --rounded-large-none:0px 0px 0px 0px; --rounded:12px; --rounded-top:12px 12px 0px 0px; --rounded-bottom:0px 0px 12px 12px; --rounded-left:12px 0px 0px 12px; --rounded-right:0px 12px 12px 0px; --rounded-none:0px 0px 0px 0px; --rounded-medium:8px; --rounded-medium-top:8px 8px 8px 8px; --rounded-medium-bottom:8px 8px 8px 8px; --rounded-medium-left:8px 8px 8px 8px; --rounded-medium-right:8px 8px 8px 0px; --rounded-medium-none:0px 0px 0px 0px; --rounded-small:6px; --rounded-small-top:6px 6px 0px 0px; --rounded-small-bottom:0px 0px 6px 6px; --rounded-small-left:6px 0px 0px 6px; --rounded-small-right:0px 6px 6px 0px; --rounded-small-none:0px 0px 0px 0px; --rounded-xsmall:2px; --rounded-xsmall-top:2px 2px 0px 0px; --rounded-xsmall-bottom:0px 0px 2px 2px; --rounded-xsmall-left:2px 0px 0px 2px; --rounded-xsmall-right:0px 2px 2px 0px; --rounded-xsmall-none:0px 0px 0px 0px; --rounded-1x:2px; --rounded-2x:4px; --rounded-3x:6px; --rounded-4x:8px; --rounded-5x:10px; --rounded-6x:12px; --rounded-7x:14px; --rounded-8x:16px; --rounded-9x:18px; --rounded-10x:20px; } [class*="rounded"] { overflow:hidden; } /* Rounded large ------------------------------*/ .rounded-large:not(div.select, div.box-search), .items-rounded-large [class^="item"], .cols-rounded-large [class^="col"] { border-radius:var(--rounded-large); } .items-bg-white [class^="item"]:not(.items-split .item-row), .items-bg-white.items-split [class^="item"] > [class^="col"], /* Rounded ------------------------------*/ .rounded:not(div.select, div.box-search), .items-rounded [class^="item"]:not(.items-split .item-row), .items-rounded.items-split [class^="item"] > [class^="col"], .cols-rounded [class^="col"] { border-radius:var(--rounded); } /* Rounded medium ------------------------------*/ .rounded-medium:not(div.select, div.box-search), .items-rounded-medium [class^="item"], .cols-rounded-medium [class^="col"] { border-radius:var(--rounded-medium); } /* Rounded small ------------------------------*/ .rounded-small:not(div.select, div.box-search), .items-rounded-small [class^="item"], .cols-rounded-small [class^="col"] { border-radius:var(--rounded-small); } /* Rounded xsmall ------------------------------*/ .rounded-xsmall:not(div.select, div.box-search), .items-rounded-xsmall [class^="item"], .cols-rounded-xsmall [class^="col"] { border-radius:var(--rounded-xsmall); } /* Rounded x ------------------------------*/ .rounded-1x, .rounded-items-1x [class^="item"] {border-radius:var(--rounded-1x);} .rounded-2x, .rounded-items-2x [class^="item"] {border-radius:var(--rounded-2x);} .rounded-3x, .rounded-items-3x [class^="item"] {border-radius:var(--rounded-3x);} .rounded-4x, .rounded-items-4x [class^="item"] {border-radius:var(--rounded-4x);} .rounded-5x, .rounded-items-5x [class^="item"] {border-radius:var(--rounded-5x);} .rounded-6x, .rounded-items-6x [class^="item"] {border-radius:var(--rounded-6x);} .rounded-7x, .rounded-items-7x [class^="item"] {border-radius:var(--rounded-7x);} .rounded-8x, .rounded-items-8x [class^="item"] {border-radius:var(--rounded-8x);} .rounded-9x, .rounded-items-9x [class^="item"] {border-radius:var(--rounded-9x);} .rounded-10x, .rounded-items-10x [class^="item"] {border-radius:var(--rounded-10x);} /*--------------------------------------------------- --- ALTURA /////////////////////////////////////// ---------------------------------------------------*/ :root { --height-auto:auto; --height-0:0; --height-full:100vh; --height-large:75vh; --height-medium:50vh; --height-third:30vh; --height-100:100vh; --height-90:90vh; --height-80:80vh; --height-75:75vh; --height-70:70vh; --height-60:60vh; --height-50:50vh; --height-40:40vh; --height-30:30vh; --height-20:20vh; --height-25:25vh; --height-10:10vh; } .height-full, .height-100, .items-height-100 [class^="item"], .items-height-full [class^="item"]{ height:auto; min-height:var(--height-full); } .height-90, .items-height-90 [class^="item"]{ height:auto; min-height:var(--height-90); } .height-80, .items-height-90 [class^="item"]{ height:auto; min-height:var(--height-80); } .height-large, .height-75, .items-height-large [class^="item"], .items-height-75 [class^="item"] { height:auto; min-height:var(--height-large); } .height-70, .items-height-70 [class^="item"] { height:auto; min-height:var(--height-70); } .height-60, .items-height-60 [class^="item"] { height:auto; min-height:var(--height-60); } .height-medium, .height-50, .items-height-medium [class^="item"], .items-height-50 [class^="item"] { height:auto; min-height:var(--height-medium); } .height-40, .items-height-40 [class^="item"] { height:auto; min-height:var(--height-40); } .height-third, .height-30, .items-height-third [class^="item"], .items-height-30 [class^="item"] { height:auto; min-height:var(--height-third); } .height-20, .items-height-20 [class^="item"] { height:auto; min-height:var(--height-20); } .height-25, .items-height-25 [class^="item"] { height:auto; min-height:var(--height-25); } .height-10, .items-height-10 [class^="item"] { height:auto; min-height:var(--height-10); } /*--------------------------------------------------- --- ASPECT RATIO ////////////////////////////////// ---------------------------------------------------*/ :root { --aspect-ratio-1-1: 1 / 1; --aspect-ratio-square: 1 / 1; --aspect-ratio-3-2: 3 / 2; --aspect-ratio-post: 3 / 2; --aspect-ratio-4-5: 4 / 5; --aspect-ratio-9-16: 9 / 16; --aspect-ratio-9-16: 16 / 9; } /* 1 / 1 */ .aspect-ratio-1-1, .aspect-ratio-1-1-to-post, .aspect-ratio-square, .aspect-ratio-square-to-post, .height-1-1 { aspect-ratio: 1 / 1; } /* 2 / 1 */ .aspect-ratio-2-1, .aspect-ratio-2-1-to-post, .aspect-ratio-2-1-to-square, .height-2-1 { aspect-ratio: 2 / 1; } /* 3 / 2 */ .aspect-ratio-3-2, .aspect-ratio-post, .aspect-ratio-3-2-to-square, .aspect-ratio-post-to-square, .height-3-2 { aspect-ratio: 3 / 2; } .aspect-ratio-4-5, .height-4-5 { aspect-ratio: 4 / 5; } .aspect-ratio-9-16, .height-9-16 { aspect-ratio: 9 / 16; } .aspect-ratio-16-9, .height-16-9 { aspect-ratio: 16 / 9; } .aspect-ratio-21-9, .height-21-9 { aspect-ratio: 21 / 9; } @media only screen and (max-width:620px) { /* TO SQUARE */ .aspect-ratio-2-1-to-square, .aspect-ratio-3-2-to-square, .aspect-ratio-post-to-square, [class*="aspect-ratio"][class*="-to-square"] { aspect-ratio:var(--aspect-ratio-square)!important; position:relative; } /* TO POST */ .aspect-ratio-1-1-to-post, .aspect-ratio-square-to-post, .aspect-ratio-2-1-to-post, [class*="aspect-ratio"][class*="-to-post"] { aspect-ratio:var(--aspect-ratio-post)!important; position:relative; } } /*--------------------------------------------------- --- SCROLL BAR ///////////////////////////////////// ---------------------------------------------------*/ .container, .main, *[data-element='banner'], *[data-element='banner-main'], *[data-element='panel'] { scrollbar-gutter: stable; } /*--------------------------------------------------- --- CONTENT VISIBILITY //////////////////////////// ---------------------------------------------------*/ .svg-icon, video, iframe{ content-visibility: auto; } /*--------------------------------------------------- --- DISPLAY-FLEX //////////////////////////////// ---------------------------------------------------*/ .display-flex { display:flex; flex-flow:row wrap; justify-content:flex-start; } .display-flex.center, .align-center { align-items:center!important; align-content:center!important; } /*--------------------------------------------------- --- Z INDEX ///////////////////////////////////// ---------------------------------------------------*/ :root { --zindex-front:99; --zindex-back:0; } .zindex-front { z-index:var(--zindex-front)!important; } .zindex-back { z-index:var(--zindex-back)!important; } /*------------------------------------------------------------------------ STRUCTURE - PANELES, COLUMAS, ETC //////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- --- MAIN //////////////////////////////////// ---------------------------------------------------*/ main, div.main { align-items:stretch; display:flex; flex-flow:row wrap; justify-content:flex-start; height:auto; min-height:100vh; max-width:100%; position:relative; overflow-x:hidden; width:100%; } /*-------------------------------------------------- --- CONTAINER DEFAULT ///////////////////////// ---------------------------------------------------*/ div.container, section.container { width:100%; } /*-------------------------------------------------- --- PANELES ALL /////////////////////////////// ---------------------------------------------------*/ *[data-element='panel'].swiper, .swiper[data-element='panel'] { display:block!important; } *[data-element='panel'] { width:100%; } *[data-element='panel'], *[data-element='panel'] *{ position:relative; } /* Content visibility (SEO) ----------------------------------------*/ *[data-element='panel'] img, *[data-element='panel'] svg{ content-visibility: auto; } /* Alineaciones ----------------------------------------*/ *[data-element='panel'].left{ justify-content:flex-start!important; } *[data-element='panel'].center{ justify-content:center!important; } *[data-element='panel'].right: ;{ justify-content:flex-end!important; } /*------------------------------------------------------------------------ STRUCTURE - PANEL ITEMS ///////////////////////////////////////////////// ------------------------------------------------------------------------*/ /* General ----------------------------------------*/ [class*="panel-items"] { align-items:stretch; display:grid; font-size:inherit; margin:0px; width:100%; } .panel-items-1 { grid-template-columns:repeat(auto-fill, minmax(580px, 1fr)); } .panel-items-2 { grid-template-columns:repeat(auto-fill, minmax(540px, 1fr)); } .panel-items-3 { grid-template-columns:repeat(auto-fill, minmax(500px, 1fr)); } .panel-items-4 { grid-template-columns:repeat(auto-fill, minmax(460px, 1fr)); } .panel-items-5{ grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); } .panel-items-6, .panel-items { grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); } .panel-items-7 { grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); } .panel-items-8 { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); } .panel-items-9 { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); } .panel-items-10 { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); } .panel-items-11 { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); } .panel-items-12 { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); } @media only screen and (max-width:1600px) { .panel-items-1 { grid-template-columns:repeat(auto-fill, minmax(540px, 1fr)); } .panel-items-2 { grid-template-columns:repeat(auto-fill, minmax(500px, 1fr)); } .panel-items-3 { grid-template-columns:repeat(auto-fill, minmax(460px, 1fr)); } .panel-items-4 { grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); } .panel-items-5{ grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); } .panel-items-6, .panel-items { grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); } .panel-items-7 { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); } .panel-items-8 { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); } .panel-items-9 { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); } .panel-items-10 { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); } .panel-items-11 { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); } .panel-items-12 { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); } } @media only screen and (max-width:1200px) { .panel-items-1 { grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); } .panel-items-2 { grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); } .panel-items-3 { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); } .panel-items-4 { grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); } .panel-items-5{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); } .panel-items-6, .panel-items { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); } .panel-items-7 { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); } .panel-items-8 { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); } .panel-items-9 { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); } .panel-items-10 { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); } .panel-items-11 { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); } .panel-items-12 { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); } } @media only screen and (max-width:720px) { .panel-items-1 { grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); } .panel-items-2 { grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); } .panel-items-3 { grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); } .panel-items-4 { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); } .panel-items-5{ grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); } .panel-items-6, .panel-items { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); } .panel-items-7 { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); } .panel-items-8 { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); } .panel-items-9 { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); } .panel-items-10 { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); } .panel-items-11 { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); } .panel-items-12 { grid-template-columns:repeat(auto-fill, minmax(80px, 1fr)); } } /*------------------------------------------------------------------------ STRUCTURE - PANEL BLOQUES //////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- --- PANEL BLOQUES ALL ///////////////////////// ---------------------------------------------------*/ /* General ----------------------------------------*/ [class*="panel-bloques"] { align-items:flex-start; display:flex; flex-flow:row wrap; font-size:inherit; justify-content:center; list-style:none; width:100%; } /* Stretch ----------------------------------------*/ .stretch, .items-stretch, .items-stretch [class*="item"]{ align-items:stretch; } /*-------------------------------------------------- --- ITEM TO POST /////////////////////////////// ---------------------------------------------------*/ @media only screen and (max-width:820px) { .items-movil-post .item-row > .col-img-cover { aspect-ratio:3 / 2; min-height:100px; order:1; } .items-movil-post .item-row > .col:has(+ .col-img-cover), .items-movil-post .item-row > .col-img-cover + .col-content{ order: 2!important; width:100%!important; } } /*--------------------------------------------------- +++ ITEMS-ZIGZAG ---------------------------------------------------*/ /* ODD */ .items-zigzag [class^="item"]:nth-child(odd) .col:nth-child(1) { order:1; } .items-zigzag [class^="item"]:nth-child(odd) .col:nth-child(2){ order:2; } /* EVEN */ .items-zigzag [class^="item"]:nth-child(even) .col:nth-child(1) { order:2; } .items-zigzag [class^="item"]:nth-child(even) .col:nth-child(2) { order:1; } /*------------------------------------------------------------------------ STRUCTURE - PANEL FLEX //////////////////////////////////////////////// ------------------------------------------------------------------------*/ /* General ----------------------------------------*/ .panel-flex, [class*="panel-flex-"] { align-content:center; align-items:stretch; display:flex; flex-flow:row wrap; justify-content:center; list-style:none; width:100%; } .panel-flex-2 [class^="item"], .panel-flex-3 [class^="item"], .panel-flex-4 [class^="item"], .panel-flex-5 [class^="item"], .panel-flex-6 [class^="item"], .panel-flex-7 [class^="item"], .panel-flex-8 [class^="item"], .panel-flex-9 [class^="item"], .panel-flex-10 [class^="item"], .panel-flex-11 [class^="item"], .panel-flex-12 [class^="item"] { min-width:40px; } .panel-flex-2 > [class^="item"]{ width:40%; } .panel-flex-3 > [class^="item"]{ width:30%; } .panel-flex-4 > [class^="item"]{ width:20%; } .panel-flex-5 > [class^="item"]{ width:18%; } .panel-flex-6 > [class^="item"]{ width:15%; } .panel-flex-7 > [class^="item"]{ width:12%; } .panel-flex-8 > [class^="item"]{ width:11%; } .panel-flex-9 > [class^="item"]{ width:10%; } .panel-flex-10 > [class^="item"]{ width:9%; } .panel-flex-11 > [class^="item"]{ width:8%; } .panel-flex-12 > [class^="item"]{ width:7%; } /* -------------------------------------------- 1020 --- --------------------------------------------------*/ @media only screen and (max-width:1020px) { .panel-flex-2 > [class^="item"], .panel-flex-3 > [class^="item"], .panel-flex-4 > [class^="item"] { width:40%; } .panel-flex-3 > [class^="item"], .panel-flex-5 > [class^="item"], .panel-flex-7 > [class^="item"], .panel-flex-9 > [class^="item"], .panel-flex-11 > [class^="item"]{ flex-grow:0; } .panel-flex-5 > [class^="item"], .panel-flex-6 > [class^="item"], .panel-flex-7 > [class^="item"], .panel-flex-8 > [class^="item"]{ width:20%; } .panel-flex-9 > [class^="item"], .panel-flex-10 > [class^="item"], .panel-flex-11 > [class^="item"], .panel-flex-12 > [class^="item"]{ width:15%; } } /* -------------------------------------------- 720 --- --------------------------------------------------*/ @media only screen and (max-width:720px) { .panel-flex-2 > [class^="item"], .panel-flex-3 > [class^="item"], .panel-flex-4 > [class^="item"] { width:clamp(220px, 80vw, 720px); } .panel-flex-5 > [class^="item"], .panel-flex-6 > [class^="item"], .panel-flex-7 > [class^="item"], .panel-flex-8 > [class^="item"]{ width:clamp(120px, 20vw, 220px); } .panel-flex-9 > [class^="item"], .panel-flex-10 > [class^="item"], .panel-flex-11 > [class^="item"], .panel-flex-12 > [class^="item"]{ width:clamp(60px, 15vw, 160px); } } /* -------------------------------------------- 360 --- --------------------------------------------------*/ @media only screen and (max-width:360px) { [class^="panel-flex"] [class^="item"]{ flex-grow:99; min-width:100%; width:100%; } } /*------------------------------------------------------------------------ STRUCTURE - MAS ////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- --- INSIDE DEFAULT /////////////////////////// ---------------------------------------------------*/ * .inside{ align-items:center; display:flex; flex-flow:row wrap; justify-content:center; height:auto; overflow:hidden; position:relative; width:100%; } /*-------------------------------------------------- --- COLUMNA DEFAULT ////////////////////////// ---------------------------------------------------*/ [class^="col"]:not([class*="color"]){ align-items:flex-start; align-content:flex-start; display:flex; flex-grow:99; flex-flow:row wrap; justify-content:flex-start; height:auto; overflow:hidden; position:relative; order:2; width:18%; } /* Sligs ---------------------------------------- -content = contenid -img = imagen -full = todo lo ancho -back = pasa atras con absolute -front = pasa al rente con absolite -full = todo lo ancho -full = todo lo ancho -full = todo lo ancho -full = todo lo ancho */ /* Alineaciones ----------------------------------------*/ .col.left { justify-content:flex-start; } .col.center { justify-content:center; } .col.right: ; { justify-content:flex-end; } /*-------------------------------------------------- --- COLUMNA FULL ///////////////////////////// ---------------------------------------------------*/ [class^="col"][class*="-full"]{ width:100%; } /*-------------------------------------------------- --- COLUMNA FRONT ///////////////////////////// ---------------------------------------------------*/ [class^="col"][class*="-front"]{ position:absolute; width:100%; bottom:0px; left:0px; top:0px; right:0px; z-index:9!important; } /*-------------------------------------------------- --- COLUMNA AUTO ////////////////////////// ---------------------------------------------------*/ /* Ancho = ancho de su hijo */ [class^="col"].col-auto, .col-auto{ flex-grow:0!important; width: fit-content!important; } /*-------------------------------------------------- --- COLUMNA CONTENT CENTER /////////////////// ---------------------------------------------------*/ .col-content-center, .items-col-content-center [class*="item"] > [class*="col-content"]{ align-items:center; align-content:center; } /*-------------------------------------------------- --- COLUMNA IMG //////////////////////////// ---------------------------------------------------*/ /*-------------------------------------------------- --- COLUMNA COVER //////////////////////////// ---------------------------------------------------*/ @media only screen and (max-width:620px) { .col-cover{ order:1!important; } } /*-------------------------------------------------- --- DOS COLUMNAS 50% - 50% ////////////////// ---------------------------------------------------*/ /* Por default si tenemos dos columas mediran lo mismo, inlcuso hasta 5 */ /*-------------------------------------------------- --- DOS COLUMNAS 20% - 80% ////////////////// ---------------------------------------------------*/ .w20-80 > [class^="item"] > .col:nth-child(1), .w20-80 > [class^="item"] > .col-1, .w20-80 > .col:nth-child(1), .w20-80 > .col-1{ width:10%; } .wauto-80 > .col-1 {flex-grow:0; width: fit-content;} .w20-80 > [class^="item"] > .col:nth-child(2), .w20-80 > [class^="item"] > .col-2, .w20-80 > .col:nth-child(2), .w20-80 > .col-2, .wauto-80 > .col-2{ width:40%; } .w80-20 > [class^="item"] > .col:nth-child(1), .w80-20 > [class^="item"] > .col-1, .w80-20 > .col:nth-child(1), .w80-20 > .col-1, .w80-auto > .col-1{ width:40%; } .w80-20 > [class^="item"] > .col:nth-child(2), .w80-20 > [class^="item"] > .col-2, .w80-20 > .col:nth-child(2), .w80-20 > .col-2{ width:10%; } .w80-auto > .col-2 {flex-grow:0; width: fit-content;} /*-------------------------------------------------- --- DOS COLUMNAS 30% - 70% ////////////////// ---------------------------------------------------*/ .w30-70 > [class^="item"] > .col:nth-child(1), .w30-70 > [class^="item"] > .col-1, .w30-70 > .col:nth-child(1), .w30-70 > .col-1{ width:15%; } .wauto-70 > .col-1 {flex-grow:0; width: fit-content;} .w30-70 > [class^="item"] > .col:nth-child(2), .w30-70 > [class^="item"] > .col-2, .w30-70 > .col:nth-child(2), .w30-70 > .col-2, .wauto-70 > .col-2{ width:35%; } .w70-30 > [class^="item"] > .col:nth-child(1), .w70-30 > [class^="item"] > .col-1, .w70-30 > .col:nth-child(1), .w70-30 > .col-1, .w70-auto > .col-1{ width:35%; } .w70-30 > [class^="item"] > .col:nth-child(2), .w70-30 > [class^="item"] > .col-2, .w70-30 > .col:nth-child(2), .w70-30 > .col-2{ width:15%; } .w70-auto > .col-2 {flex-grow:0; width: fit-content;} /*-------------------------------------------------- --- DOS COLUMNAS 40% - 60% ////////////////// ---------------------------------------------------*/ .w40-60 > [class^="item"] > .col:nth-child(1), .w40-60 > [class^="item"] > .col-1, .w40-60 > .col:nth-child(1), .w40-60 > .col-1{ width:20%; } .wauto-60 > .col-1 {flex-grow:0; width: fit-content;} .w40-60 > [class^="item"] > .col:nth-child(2), .w40-60 > [class^="item"] > .col-2, .w40-60 > .col:nth-child(2), .w40-60 > .col-2, .wauto-60 > .col-2{ width:30%; } .w60-40 > [class^="item"] > .col:nth-child(1), .w60-40 > [class^="item"] > .col-1, .w60-40 > .col:nth-child(1), .w60-40 > .col-1, .w60-auto > .col-1{ width:30%; } .w60-40 > [class^="item"] > .col:nth-child(2), .w60-40 > [class^="item"] > .col-2, .w60-40 > .col:nth-child(2), .w60-40 > .col-2{ width:20%; } .w60-auto > .col-2 {flex-grow:0; width: fit-content;} /*-------------------------------------------------- --- BLQOUE DEFAULT /////////////////////////// ---------------------------------------------------*/ .bloque { align-items:flex-start; align-content:flex-start; display:flex; flex-grow:99; flex-flow:row wrap; justify-content:flex-start; height:auto; width:18%; } /*-------------------------------------------------- --- GRUPO ////////////////////////////////// ---------------------------------------------------*/ .group, .gropo { display:flex; flex-flow:row wrap; gap:var(--gap-inside); width:100%; } /*-------------------------------------------------- --- ARTICLE DEFAULT //////////////////////// ---------------------------------------------------*/ article { display:flex; flex-flow:row wrap; height:auto; width:100%; } /*--------------------------------------------------- --- DIV //////////////////////////////////////////// ---------------------------------------------------*/ div.center { display:flex; flex-flow:row wrap; justify-content:center; } /*-------------------------------------------------- --- DESFASAR ///////////////////////////////// ---------------------------------------------------*/ .desfasar-1x-0x, .desfasar-0x-1x, .desfasar-1x-0x .inside, .desfasar-0x-1x .inside { overflow:visible!important; } .desfasar-1x-0x .col:nth-child(1), .desfasar-1x-0x .col-1{ margin-top:100px; } .desfasar-0x-1x .col:nth-child(2), .desfasar-0x-1x .col-2{ margin-top:100px } /*------------------------------------------------------------------------ STRUCTURE - ITEMS ////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- --- ITEMS ALL //////////////////////////////// ---------------------------------------------------*/ /* Item ----------------------------------------*/ * [class^="item"] { align-items:stretch; align-content:flex-start; color:inherit; display:flex; flex-flow:row wrap; flex-grow:99; height:auto; overflow:hidden; position:relative; max-width:100%; text-decoration:none; width:auto; } /* IF: item is anchor */ * a[class^="item"]:hover { box-shadow:0px 0px 6px rgba(0, 0, 0, 0.2); text-decoration:none; } /*-------------------------------------------------- --- ITEMS CARDS /////////////////////////////// ---------------------------------------------------*/ .item-card { gap:var(--gap); } .item-card .content-img{ z-index:1; } .item-card .content{ z-index:2; } .item-card, .item-card .content, .item-card .content-img{ transition:var(--add-transition-fast); } /* Item content ----------------------------------------*/ .item-card [class^="content"]{ align-items:center; align-content: center; display:flex; flex-flow:row wrap; justify-content:center; flex-grow:99; gap:var(--gap-small); height:auto; width:auto; } .item-card [class^="content"] > *:where(p, .title, .subtitle, .link){ line-height:1.4em; width:100%; } /*-------------------------------------------------- +++ CARD BASE ---------------------------------------------------*/ .card-base, .add-card-base .item-card { padding:var(--padding-medium); } .card-base [class*="content"], .add-card-base .item-card [class*="content"] { padding:var(--padding-medium); padding-block:0px; width:100%; } /*-------------------------------------------------- +++ CARD POST ---------------------------------------------------*/ .card-post [class*="content"], .add-card-post .item-card [class*="content"] { padding:var(--padding-medium); width:100%; } /*-------------------------------------------------- +++ CARD COVER ---------------------------------------------------*/ .card-cover > .content, .add-card-cover .item-card > .content { padding:var(--padding); position:absolute; bottom:0px; left:0px; right:0px; top:0px; } /*-------------------------------------------------- +++ CARD HORIZONTAL ---------------------------------------------------*/ .card-horizontal, .add-card-horizontal .item-card { justify-content:flex-start; padding:var(--padding-small); gap:var(--gap-small); } .card-horizontal .content-img, .add-card-horizontal .item-card .content-img { flex-grow:0!important; width:fit-content; } .card-horizontal .content, .add-card-horizontal .item-card .content { padding:var(--padding-medium); width:10%; } /*-------------------------------------------------- +++ CARD HORIZONTAL COVER ---------------------------------------------------*/ .card-horizontal-cover, .add-card-horizontal-cover .item-card { align-items:stretch; justify-content:flex-start; gap:var(--gap-small); } .card-horizontal-cover .content-img, .add-card-horizontal-cover .item-card .content-img { width:10%; } .card-horizontal-cover .content, .add-card-horizontal-cover .item-card .content { padding:var(--padding-medium); width:40%; } /*-------------------------------------------------- +++ CARD WHATSAPP ---------------------------------------------------*/ .card-whatsapp { align-items:center; align-content: center; gap:var(--gap-medium); box-shadow:0px 0px 2px rgba(0, 0, 0, 0.4); border:1px solid var(--color-neutro-softer); max-width:300px; padding: var(--padding-small); } .card-whatsapp .img-icon-profile{ aspect-ratio:1 / 1!important; border-radius:50%!important; padding:0px!important; height:60px!important; width:60px!important; } .card-whatsapp .svg-icon{ aspect-ratio:1 / 1!important; padding:2px!important; height:60px!important; fill:var(--color-white)!important; width:60px!important; } .card-whatsapp .content{ padding:0px; } .card-whatsapp .title{ line-height:1.2em; font-weight:600; } @media only screen and (max-width:620px) { .card-whatsapp{ align-items:center!important; justify-content: center!important; border-radius:50%!important; border:0px; height:80px; padding:0px!important; width:80px; } .card-whatsapp .img-icon-profile{ height:80px!important; width:80px!important; } .card-whatsapp .svg-icon{ height:80px!important; width:80px!important; } .card-whatsapp .content-img > *{ padding:0px!important; } .card-whatsapp .content{ display: none!important; } } /*-------------------------------------------------- --- ITEM ROW ///////////////////////////////// ---------------------------------------------------*/ .item-row { align-items:stretch; display:flex; flex-flow:row wrap; height:auto; justify-content:space-between; list-style:none; overflow:hidden; text-decoration:none; width:100%; } /*------------------------------------------------------------------------ STRUCTURE - ITEMS TO M0VIL //////////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- +++ ITEM TO POST ---------------------------------------------------*/ @media only screen and (max-width:720px) { .movil-post, .items-movil-post [class*="item"] { } .movil-post .col, .items-movil-post [class*="item"] .col{ min-height:100px; width:100%!important; } .movil-post [class*="col-img"], .items-movil-post [class*="item"] [class*="col-img"]{ aspect-ratio:2 / 1; order:1; } .movil-post .col:has(+ [class*="col-img"]) , .items-movil-post [class*="item"] .col:has(+ [class*="col-img"]){ order:2; } .movil-post .col-content, .items-movil-post [class*="item"] .col-content{ height:auto; } } /*------------------------------------------------------------------------ STRUCTURE - IMAGENES //////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- --- IMG-BACKGROUND /////////////////////////// ---------------------------------------------------*/ .img-background > picture.background{ height:auto; overflow:hidden; position:absolute; bottom:0px; left:0px; right:0px; top:0px; width:auto; z-index:var(--zindex-back); } .img-background > *:not(picture.background) { z-index: 1; } .img-background > picture.background > img, .img-background > img.background, .img-background > svg.background { height:100%; width:100%; object-fit:cover; object-position:center center; } /*-------------------------------------------------- --- IMG-COVER /////////////////////////////// ---------------------------------------------------*/ [class*="img-cover"] > picture{ height:auto; overflow:hidden; position:absolute; bottom:0px; left:0px; right:0px; top:0px; width:auto; z-index:1; } [class*="img-cover"] > picture img, [class*="img-cover"] > img, [class*="img-cover"] > video{ height:100%; width:100%; object-fit:cover; object-position:center center; } /*-------------------------------------------------- --- IMG-CONTAIN ////////////////////////////// ---------------------------------------------------*/ .img-contain > picture{ height:auto; overflow:hidden; position:absolute; bottom:0px; left:0px; right:0px; top:0px; width:auto; z-index:1; } .img-contain > picture img, .img-contain > img, .img-contain > video{ height:100%; width:100%; object-fit:contain; object-position:center center; } /*-------------------------------------------------- --- IMG-PROFILE ////////////////////////////// ---------------------------------------------------*/ [class^="img-profile"]{ aspect-ratio: 1 / 1!important; border-radius:50%; display:flex; flex-flow:row wrap; justify-content:center; flex-shrink:0; height:auto; max-height:100%; max-width:100%; overflow:hidden; } .img-profile-auto { width:auto; } .img-profile-large, .img-profile-big { width: clamp(100px, 8vw, 120px); } .img-profile { width: clamp(0px, 6vw, 100px); } .img-profile-medium { width: clamp(60px, 6vw, 80px); } .img-profile-small { width: clamp(60px, 6vw, 80px); } [class^="img-profile"] > picture{ height:auto; overflow:hidden; position:absolute; bottom:0px; left:0px; right:0px; top:0px; width:auto; z-index:1; } [class^="img-profile"] > picture img, [class^="img-profile"] > img, [class^="img-profile"] > svg { height:100%; width:100%; object-fit:cover; object-position:center center; } /*------------------------------------------------------------------------ STRUCTURE - MAS ///////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /* Flexbox al centro ----------------------------------------*/ div.center, section.center{ justify-content:center!important; } /* Anchos ----------------------------------------*/ .w100, [class*="-w100"] { width:100%!important; } .w50, [class*="-w50"] { width:50%!important; } /* If header fixed, First element ------------------------------*/ @media only screen and (max-width:620px) { .first{ margin-top:62px; /* = Tamaño de header movil */ } } /*------------------------------------------------------------------------ STRUCTURE - NAV ////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- --- NAV DEFAULT //////////////////////////// ---------------------------------------------------*/ nav { align-items:center; align-content:center; display:flex; flex-flow:row wrap; flex-grow:99; justify-content:flex-start; height:auto; position:relative; width:auto; } /* Alineaciones ----------------------------------------*/ nav.left { justify-content:flex-start!important; } nav.center { justify-content:center!important; } nav.right { justify-content:flex-end!important; } nav.space-between { justify-content:space-between!important; } nav.space-around { justify-content:space-around!important; } nav > ul { align-items:center; align-content:center; display:flex; flex-flow:row wrap; flex-grow:99; gap:var(--gap-small); justify-content:flex-start; list-style:none; margin:0px; padding:0px; width:auto; } /* Alineaciones del menu ----------------------------------------*/ nav > ul.left { justify-content:flex-start!important; } nav > ul.center { justify-content:center!important; } nav > ul.right { justify-content:flex-end!important; } nav > ul.space-between { justify-content:space-between!important; } nav > ul.space-around { justify-content:space-around!important; } nav > ul > li{ align-items:center; align-content:center; display:flex; flex-flow:row wrap; height:auto; justify-content:center; list-style:none; margin:0px; padding:0px; position:relative; text-align:center; width:auto; } /* botones en nav */ nav > ul > [data-seccion] > *:not( ul, .button, .icon, [class^="img-profile"]){ align-items:center; align-content:center; cursor:pointer; display:flex; flex-flow:row wrap; gap:var(--gap-small); height:auto; justify-content:flex-start; margin:0px; overflow:hidden; padding-inline:clamp(4px, 2vw, 12px); position:relative; transition:var(--add-transition-very-fast); text-decoration:none; text-overflow:ellipsis!important; user-select: none; white-space:nowrap; width:auto; } nav > ul > li > a { cursor:pointer; } nav > ul > li > a:hover{ text-decoration:none; } /* Separator */ nav > ul > li[data-element='separator']{ margin:0px 6px; min-width:1px; width:1px!important; } /*-------------------------------------------------- --- SHOW-DROPDOWN /////////////////////////// ---------------------------------------------------*/ input[type=button].show-dropdown, input[type=checkbox].show-dropdown, input[type=radio].show-dropdown, input[type=button].show-dropdown:checked, input[type=checkbox].show-dropdown:checked, input[type=radio].show-dropdown:checked { display:none!important; } input[type=button].show-dropdown + label, input[type=checkbox].show-dropdown + label, input[type=radio].show-dropdown + label { } /*------------------------------------------------------------------------ STRUCTURE - DIV IN ///////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /* Full ----------------------------------------*/ .in-full, .in-full-to-in, .in-full-to-none{ padding-inline: clamp(40px, 40px, 80px); } .padding.in-full, .padding.in-full-to-none { padding-block: clamp(40px, 40px, 80px); } /* Wide ----------------------------------------*/ .in-wide, .in-wide-to-in, .in-wide-to-none{ padding-inline: clamp(40px, 2vw, 2vw); } .padding.in-wide, .padding.in-wide-to-none { padding-block:clamp(40px, 2vw, 2vw); } /* In ----------------------------------------*/ .in, .in-to-full, .in-to-wide, .in-to-none{ padding-inline: clamp(40px, 8vw, 160px); } .padding.in, .padding.in-to-full, .padding.in-to-wide, .padding.in-to-none { padding-block:clamp(40px, 8vw, 160px); } /* Thin ----------------------------------------*/ .in-thin, .in-thin-to-full, .in-thin-to-wide, .in-thin-to-in, .in-thin-to-none{ padding-inline: clamp(40px, 10vw, 200px); } .padding.in-thin, .padding.in-thin-to-full, .padding.in-thin-to-wide, .padding.in-thin-to-in, .padding.in-to-none { padding-block:clamp(40px, 10vw, 200px); } /* ------------------------------------------ 620 --- --------------------------------------------------*/ @media only screen and (max-width:620px) { .in-full, .in-to-full, .in-thin-to-full, .in-wide, .in-to-wide, .in-thin-to-wide{ padding-inline: clamp(20px, 4vw, 40px); } .padding.in-full, .padding.in-to-full, .padding.in-thin-to-full, .padding.in-wide, .padding.in-to-wide, .padding.in-thin-to-wide{ padding-block:clamp(20px, 5vw, 40px); } .in, .in-full-to-in, .in-wide-to-in, .in-thin-to-in{ padding-inline:clamp(40px, 5vw, 60px); } .padding.in, .padding.in-full-to-in, .padding.in-wide-to-in, .padding.in-thin-to-in{ padding-block:clamp(40px, 5vw, 60px); } .in-thin{ padding-inline: clamp(40px, 5vw, 60px); } .padding.in-to-thin{ padding-block:clamp(40px, 5vw, 60px); } .in-full-to-none, .in-wide-to-none, .in-to-none, .in-thin-to-none{ padding-inline: clamp(0px, 0vw, 0px); } .padding.in-full-to-none, .padding.in-wide-to-none, .padding.in-to-none, .padding.in-thin-to-none{ padding-block:clamp(0px, 0vw, 0px); } } /*------------------------------------------------------------------------ STRUCTURE - BANNERS ///////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /* General ----------------------------------------*/ [data-element='banner'], [data-element='banner-main']{ align-items:stretch; display:flex; flex-flow:row wrap; max-width:100%; overflow:hidden; position:relative; width:100%; } /* Columnas ----------------------------------------*/ *[data-element='banner'] [class*="col"], *[data-element='banner-main'] [class*="col"] { align-content:center; align-items:center; min-width:auto; overflow:hidden; } *[data-element='banner'] [class*="col"]:not(.col-front), *[data-element='banner-main'] [class*="col"]:not(.col-front) { position:relative; z-index:1; } /*-------------------------------------------------- --- IMG LOADED ///////////////////////// ---------------------------------------------------*/ /* Esta es necesaria para visualizar la imagen. Cuando la imagen de los banners se termina de cargar se asigan la clase .loaded Por ahora solo la pondremos en banner main ya que ahi no usamos lazyload */ *[data-element='banner-main'] img.loaded, *[data-element='banner-main'].play img.loaded { transform: scale(1)!important; opacity:1!important; } /*--------------------------------------------------- --- BANNER COVER ////////////////////////// ---------------------------------------------------*/ .banner-cover .col{ width:100%!important; } .banner-cover .inside > .col-img{ height:100%; width:100%; } /* Col content ----------------------------------------*/ .banner-cover .col-content{ position:absolute; bottom:0px; left:0px; top:0px; right:0px; } @media only screen and (max-width:620px) { .banner-cover .inside > .col{ position:relative; bottom:auto; left:auto; right:auto; top:auto; } .banner-cover .inside > .col-img{ height:auto; } } /*-------------------------------------------------- --- IF PLAYED ///////////////////////// ---------------------------------------------------*/ /* Played all (need js) ------------------------------*/ *[data-element='banner'].played .banner-box, *[data-element='banner-main'].played .banner-box{ opacity:1.0!important; transform: translateY(0px)!important; transform: translateX(0px)!important; } *[data-element='banner'].played picture.img-main, *[data-element='banner-main'].played picture.img-main{ transform: scale(1)!important; opacity:1.0!important; } /* ------------------------------------- MOVIL 720 --- --------------------------------------------------*/ @media only screen and (max-width:720px) { /* Columnas ------------------------------*/ *[data-element='banner'] .col, *[data-element='banner-main'] .col { min-height:0px!important; width:100%!important; } /* Columna info ------------------------------ *[data-element='banner'] .col-content, *[data-element='banner-main'] .col-content { height:auto; min-height:220px; padding:32px 5vw!important; order:2; position:relative; width:100%; bottom:auto; left:auto; top:auto; right:auto; } */ /*--------------------------------------------------- --- BANNER COVER ////////////////////////// ---------------------------------------------------*/ /*---------------------------------------------------------------- BANNERS - MOVIL OPTIONS /////////////////////////////////////// ----------------------------------------------------------------*/ /*--------------------------------------------------- --- TO POST /////////////////////////////////////// ---------------------------------------------------*/ .to-post, .items-to-post > [class^="item"]{ } .to-post [class*="col"], .items-to-post > [class^="item"] [class*="col"]{ position:relative; bottom:auto; left:auto; right:auto; top:auto; } .to-post [class*="col-img"], .items-to-post > [class^="item"] [class*="col-img"]{ aspect-ratio:var(--aspect-ratio-3-2); min-height:var(--height-auto); height:auto; order:1; } .to-post [class*="col-content"], .items-to-post > [class^="item"] [class*="col-content"]{ height:auto; order:2; } /*--------------------------------------------------- --- BANNER MOVIL OPACITY ////////////////////////// ---------------------------------------------------*/ *[data-element='banner'].movil-opacity .col-content, *[data-element='banner-main'].movil-opacity .col-content{ background:transparent!important; position:absolute; bottom:0px; left:0px; top:0px; right:0px; } *[data-element='banner'].movil-opacity picture.img-main, *[data-element='banner-main'].movil-opacity picture.img-main{ opacity:0.4!important; } /*--------------------------------------------------- --- BANNER MOVIL GRADIENT //////////////////////// ---------------------------------------------------*/ *[data-element='banner'].movil-gradient .col-content, *[data-element='banner-main'].movil-gradient .col-content{ align-content:flex-end; position:absolute; bottom:0px; left:0px; top:0px; right:0px; } /*--------------------------------------------------- --- BANNER MOVIL BOX //////////////////////////// ---------------------------------------------------*/ *[data-element='banner'].movil-box .col-content, *[data-element='banner-main'].movil-box .col-content{ position:absolute; bottom:0px; left:0px; top:auto; right:0px; } /*--------------------------------------------------- --- BANNER MOVIL BLOCK //////////////////////////// ---------------------------------------------------*/ *[data-element='banner'].movil-block .col-content, *[data-element='banner-main'].movil-block .col-content{ position:absolute; bottom:0px; left:0px; top:auto; right:0px; } } /*--------------------------------------------------- --- BANNER BOX //////////////////////////////////// ---------------------------------------------------*/ .banner-box { align-items:center; align-content:center; display:flex; flex-flow:row wrap; gap:var(--gap-inside); height:auto; justify-content:flex-start; z-index:10; /* width:auto; */ } .banner-box .title, .banner-box .subtitle, .banner-box > p{ padding:0px; margin:0px; } .banner-box > *:not(a){ width:100%; } /* If center ------------------------------------------*/ *[data-element='banner'].center .banner-box > *, *[data-element='banner-main'].center .banner-box > *, .banner-box.center, .banner-box.center > *{ justify-content:center!important; text-align:center; } /* ------------------------------------- MOVIL 620 --- --------------------------------------------------*/ @media only screen and (max-width:620px) { .banner-box{ padding:0px 0vw; max-width:100%; min-width:100%; width:100%; z-index:99; } .banner-box > *:not(a){ width:100%; } } /*------------------------------------------------------------------------- /////////////////////////////////////////////// ---------- / END STRUCTURE -------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////// ELEMENTOS ///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*------------------------------------------------------------------------ ELEMENTOS - VARIOS //////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*--------------------------------------------------- --- MODALS ///////////////////////////////////////// ---------------------------------------------------*/ /* ---------------------------------------- -------------------------- MODAL SIMPLE --- -----------------------------------------*/ /* Container (ancho) ------------------------------*/ .modal, .modal .modal-container{ max-width:820px!important; } /* Inside ------------------------------*/ .modal .inside{ display:flex; flex-flow:row wrap; height: auto; gap:var(--gap); padding:40px 5vw 20px 5vw; width:100%!important; } /* Modal header ------------------------------*/ .modal .modal-header{ display:flex; flex-flow:row wrap; justify-content:center; height: auto; gap:var(--gap-small); padding:20px 5vw 20px 5vw; text-align:center; width:100%; } .modal .inside p { color:inherit; margin:0px; padding:0px; text-align:center; } /* Close modal ------------------------------*/ .modal .close-modal { top:10px!important; right:10px!important; } /* ---------------------------------------- --------------------- MODAL IGRAMF --- -----------------------------------------*/ .modal-container.modal-iframe { background-color:var(--color-black); max-width:100%; padding:0px; width:100vw!important; } .modal-container.modal-iframe iframe { aspect-ratio: 3 / 1; height:auto; min-height:80vh; width:100%; } /* ---------------------------------------- --------------------- MODAL OPEN VIDEO --- -----------------------------------------*/ .modal-container.modal-open-video { background-color:var(--color-black); max-width:100%; padding:0px; width:100vw!important; } .modal-container.modal-open-video iframe { aspect-ratio: 3 / 1; height:auto; min-height:320px; width:100%; } /*--------------------------------------------------- --- TAB BOX /////////////////////////////////////// ---------------------------------------------------*/ div.tab-box { align-items:flex-start; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; /* or center */ margin-top:0px;/* set */ padding:0px;/* set */ width:100%;/* set */ } div.tab-box > input[type=radio] { display: none; } div.tab-box > label { display:flex; font-size:0.8rem; height:50px; line-height:50px; margin:0px 0px -1px 0px!important; min-width:0px!important; padding:0px 10px!important; width:auto; z-index:10; transition:all 0.2s; width:auto!important; } #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4, #tab5:checked ~ #content5, #tab6:checked ~ #content6, #tab7:checked ~ #content7, #tab8:checked ~ #content8, #tab9:checked ~ #content9, #tab10:checked ~ #content10, #tab11:checked ~ #content11, #tab12:checked ~ #content12, #tab13:checked ~ #content13, #tab14:checked ~ #content14, #tab15:checked ~ #content15, #tab16:checked ~ #content16, #tab17:checked ~ #content17, #tab18:checked ~ #content18, #tab19:checked ~ #content19, #tab20:checked ~ #content20, #tab21:checked ~ #content21, #tab22:checked ~ #content22, #tab23:checked ~ #content23, #tab24:checked ~ #content24, #tab25:checked ~ #content25, #tab26:checked ~ #content26, #tab27:checked ~ #content27, #tab28:checked ~ #content28, #tab29:checked ~ #content29{ display:flex!important; } .tab-contenido{ align-items:flex-start; align-content:flex-start; display:none; flex-flow:row wrap; gap:var(--gap-inside); justify-content:flex-start!important; padding:20px 0px; width:100%; } /* Break menu 100% ------------------------------*/ @media only screen and (max-width:620px) { div.tab-box > label { height:36px; line-height:36px; padding:0px 12px!important; width:100%; }} /* SET: Diseño ------------------------------*/ div.tab-box { background-color:#fff; } /* Pestaña */ div.tab-box > label { border-top:1px solid transparent;/* set */ border-bottom:1px solid transparent;/* set */ color:var(--color-neutro);/*set*/ font-weight:bold; /* set */ font-size:0.7rem; gap:4px; text-align:center; text-transform:uppercase; } /* Pestaña hover */ div.tab-box > label:hover { color:var(--color-main);/*set*/ opacity:0.6; cursor: pointer; } /* Pestaña actva */ div.tab-box > input:checked + label { color:var(--color-black); border-top:1px solid var(--color-main)!important;/* set */ border-bottom: 1px solid var(--color-main)!important;/* set */ } /* Icono */ div.tab-box > label .svg-icon{ border:1px solid var(--color-neutro-soft); border-radius:59%; height:auto; fill:var(--color-neutro-soft); padding:3px; width:20px; } div.tab-box > label:hover .svg-icon{ border:1px solid var(--color-main); fill:var(--color-main); } div.tab-box > input:checked + label .svg-icon{ border:1px solid var(--color-black); fill:var(--color-black); } .tab-contenido{ padding:20px 0px; /* set */ border-top:1px solid var(--color-neutro-soft); /* set */ } /* + Small ------------------------------*/ div.tab-box.small > label { color:var(--color-neutro-soft);/*set*/ border-top:1px solid var(--color-white);/* set */ display:flex; font-size:0.7rem; font-weight:normal; height:26px; line-height:26px; padding:0px 6px!important; } @media only screen and (max-width:620px) { div.tab-box.small > label { height:26px; line-height:26px; padding:0px 4px!important; width:auto; }} /* Pestaña actva */ div.tab-box.small > input:checked + label { color:var(--color-second);/*set*/ border-top:1px solid var(--color-white);/* set */ border-bottom: 1px solid var(--color-neutro-softer)!important;/* set */ } div.tab-box.small .tab-contenido{ border-top:1px solid var(--color-neutro-softer)!important; /* set */ padding:6px 0px; /* set */ } /* + Categories ------------------------------*/ /* El estilo de los botones se determina el ul.menu-categories en www-inputs */ div.tab-box.categories { gap:4px; } div.tab-box.categories div.box { gap:initial; } div.tab-box.categories .tab-contenido{ border-top:0px!important; /* set */ } /*--------------------------------------------------- --- LIST ICON ////////////////////////////////////// ---------------------------------------------------*/ ul.list-icon{ align-items:flex-start; display:flex; flex-wrap:wrap; gap:var(--gap-small); justify-content:flex-start; list-style:none; padding:0px; flex-direction:column; width:100%; } ul.list-icon li{ align-items:flex-start; display:flex; flex-wrap:wrap; height:auto; justify-content:space-between; line-height:20px; list-style:none; width:100%; } ul.list-icon li .svg-icon{ fill:var(--color-black); height:20px; line-height:20px; width:20px; } ul.list-icon li span{ display: block; width:calc(100% - 26px); } /*--------------------------------------------------- --- LIST TAG /////////////////////////////////////// ---------------------------------------------------*/ ul.list-tag{ align-items:flex-start; display:flex; flex-wrap:wrap; justify-content:flex-start; list-style:none; padding:0px; flex-direction:column; width:100%; } ul.list-tag{ flex-direction:row; padding:0px; } ul.list-tag li{ background-color:var(--color-neutro-softer); color:var(--color-neutro); display:block; font-size:0.6em; font-weight:bold; margin:4px 4px 0px 0px; padding:0px 10px; text-transform:uppercase; width:auto; } ul.list-tag li, ul.list-tag li a{ display:flex; flex-wrap:wrap; flex-direction:row; justify-content:center; border-radius:13px; height:26px; line-height:26px; } ul.list-tag li a{ color:inherit; font-size:inherit; text-decoration:none; width:100%; } ul.list-tag li a:hover{ color:inherit; font-size:inherit; text-decoration:none; } ul.list-tag li .svg-icon{ height:26px; width:26px; } /*--------------------------------------------------- --- SOCIAL BAR ////////////////////////////////////// ---------------------------------------------------*/ /* ---------------------------------------- -------------------------- FLOATING --- -----------------------------------------*/ .social-bar.floating { position:fixed; width:auto!important; bottom:20px; left:auto; right:20px!important; top:auto; z-index:99; } @media only screen and (max-width:1600px) { .social-bar.floating { bottom:5vw; right:5vw!important; }} /* escondemos textos */ .social-bar.floating label{ display:none; } /*--------------------------------------------------- --- FLOATING ///////////////////////////////////////// ---------------------------------------------------*/ .elemento-flotante { visibility: hidden; opacity:0.0; z-index:1; position:fixed; right:20px; bottom:40px; transition: opacity 0.3s ease; } .elemento-flotante.activo { display:flex; opacity:1; visibility:visible; z-index:9; transition:opacity 0.3s ease; } .elemento-flotante.inactivo { visibility: hidden; opacity:0.0; } /*--------------------------------------------------- --- FIRMA ////////////////////////////////////// ---------------------------------------------------*/ .firma { align-items:flex-start; display:flex; flex-flow:column wrap; flex-grow:9; font-size:10px; gap:8px; line-height:1.2em; justify-content:flex-end; opacity:0.5; text-decoration:none; margin-top:40px; max-width:auto; width:auto; } .firma span{ text-transform:none; } .firma a{ background-color:var(--color-neutro); color:var(--color-neutro-softer); font-weight:bold; text-decoration:none!important; padding:2px 5px; } /*-------------------------------------------------------------------------- ///////////////////////////////////////////////// ---------- / END ELEMENTOS --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- //////////////////////////////////////////////////////////////////////////// PANELES ////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*------------------------------------------------------------------------ PANELES - PANEL-ITEM-ROWS ////////////////////////////////////////////// ------------------------------------------------------------------------*/ [class*="panel-items-row"] .col-content > *:not(a) { width:100%; } /* ------------------------------------- +++ CONTENT CENTER -------------------------------------*/ [class*="panel-items-row"][class*="-center"] .col-content { align-items:center; align-content:center; } /* ------------------------------------------- 820 --- --------------------------------------------------*/ @media only screen and (max-width:820px) { [class*="panel-items-row"] [class*="item"] .col{ width:40%!important; } } /* ------------------------------------------- 620 --- --------------------------------------------------*/ @media only screen and (max-width:620px) { [class*="panel-items-row"] [class*="item"] .col{ width:100%!important; } [class*="panel-items-row"] [class*="item"] .col-cover{ order:1!important; } [class*="panel-items-row"] [class*="item"] .col:not(.col-cover){ order:2!important; } } /*-------------------------------------------------------------------------- /////////////////////////////////////////////////// ---------- / END PANELES --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- //////////////////////////////////////////////////////////////////////////// BASE GLOBAL MENU & INPUTS //////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /* (import: assets/css-inputs.css) */ /*-------------------------------------------------------------------------- ////////////////////////////////////////////// ---------- / END MENU INPUTS --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- //////////////////////////////////////////////////////////////////////////// BASE GLOBAL FOOTER ///////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /* General ------------------------------*/ footer{ align-items:stretch; display:flex!important; flex-flow:row wrap; font-size:1.1rem; height:auto; max-width:100%; overflow-x:hidden; width:100%; } /* Content visibility (SEO) ----------------------------------------*/ footer img{ content-visibility: auto; } /* Flexbox al centro ------------------------------*/ footer.center { justify-content:center!important; } footer.center .col { justify-content:center!important; } footer.center .col *{ justify-content:center!important; text-align:center; } /* IF: Col Center ------------------------------*/ footer .col.center * { justify-content:center; text-align:center; } /* Cols ------------------------------*/ footer .col{ gap:var(--gap-inside); min-width:180px!important; width:20%; } footer .col-1{ order:1; } footer .col-2{ order:2; } footer .col-3{ order:3; } footer .col-4{ order:4; } /* IF: Col Logotipo ------------------------------*/ footer .col-logotipo{ margin-top: 20px; justify-content:flex-start; min-width:180px!important; } footer .col .logotipo{ display:block; height:auto; width:250px; } footer .col .logotipo img{ height:auto; width:100%; } footer .col { container-type: inline-size; /* o size */ } @container (max-width: 700px) { footer .col .bloque { width:100%; } } /* Parrafo ------------------------------*/ footer p{ height:auto; line-height:1.6em; padding:0px; width:100%; } /* Links ------------------------------*/ footer p a{ text-decoration:none; } footerp a:hover{ text-decoration:underline; } /* Social Bar ------------------------------*/ footer ul.social-bar label { display:none; } /* Col last ------------------------------*/ footer .col-last{ justify-content:flex-end; min-width:160px!important; } footer .col-last ul.social-bar, footer .col-last ul.menu{ justify-content:flex-end; } footer .col-last p, footer .col-last .title{ text-align:right; } footer .col-last .firma{ align-items:flex-end; align-self: flex-end; } /* ----------------------------------------- 820 --- --------------------------------------------------*/ @media only screen and (max-width:820px) { footer .col-logotipo{ order:1; margin-bottom:20px; width:100%!important; } } /* ----------------------------------------- 820 --- --------------------------------------------------*/ @media only screen and (max-width:820px) { footer .col{ order:1; width:100%!important; } footer .col-logotipo{ order:1; width:100%; } footer .logotipo{ margin-bottom:20px; } footer .col-last{ width:100%!important; justify-content:flex-start; } footer .col-last p, footer .col-last .title{ text-align:left; } footer .col-last ul.social-bar, footer .col-last ul.menu{ justify-content:flex-start; } footer .col-last .firma{ align-items:flex-start; justify-content:flex-start; } } /*-------------------------------------------------------------------------- /////////////////////////////////////////////////// ---------- / END FOOTER --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- ////////////////////////////////////////////////////////////////////////// BASE GLOBAL ANIMATIONS ////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*--------------------------------------------------- --- SLIDE TO ////////////////////////////////////// ---------------------------------------------------*/ [class*="slide-to"] { opacity:0.0; } /* large ----------------------------------------*/ .play.slide-to-top-large{ transform:translateY(60px); transition:var(--add-transition); } .play.slide-to-bottom-large{ transform:translateY(-60px); transition:var(--add-transition); } .play.slide-to-left-large{ transform:translateX(60px); transition:var(--add-transition); } .play.slide-to-right-large{ transform:translateX(-60px); transition:var(--add-transition); } /* normal ----------------------------------------*/ .play.slide-to-top{ transform:translateY(40px); transition:var(--add-transition); } .play.slide-to-bottom{ transform:translateY(-40px); transition:var(--add-transition); } .play.slide-to-left{ transform:translateX(40px); transition:var(--add-transition); } .play.slide-to-right{ transform:translateX(-40px); transition:var(--add-transition); } /* medium ----------------------------------------*/ .play.slide-to-top-medium{ transform:translateY(20px); transition:var(--add-transition-fast); } .play.slide-to-bottom-medium{ transform:translateY(-20px); transition:var(--add-transition-fast); } .play.slide-to-left-medium{ transform:translateX(20px); transition:var(--add-transition-fast); } .play.slide-to-right-medium{ transform:translateX(-20px); transition:var(--add-transition-fast); } /* small ----------------------------------------*/ .play.slide-to-top-small{ transform:translateY(10px); transition:var(--add-transition-faster); } .play.slide-to-bottom-small{ transform:translateY(-10px); transition:var(--add-transition-faster); } .play.slide-to-left-small{ transform:translateX(10px); transition:var(--add-transition-faster); } .play.slide-to-right-small{ transform:translateX(-10px); transition:var(--add-transition-faster); } /*--------------------------------------------------- --- SCALE ////////////////////////////////////////// ---------------------------------------------------*/ [class*="scale-"] { opacity:0.0; } /* normal ----------------------------------------*/ .play.scale-in{ transform:scale(1.1); transition:var(--add-transition); } .play.scale-out{ transform:scale(0.9); transition:var(--add-transition); } /*--------------------------------------------------- --- PLAYED ALL ///////////////////////////////////// ---------------------------------------------------*/ /* Para aplicar PLAYED es necesario waypoints.js */ .played, .played :is(.item, .item-card, .item-row) { opacity:1.0!important; transform: scale(1)!important; transform: translateY(0px)!important; transform: translateX(0px)!important; } /* Eliminamos animacion en movil para que no tarde en aparecer texto */ @media only screen and (max-width:620px) { [data-element='banner-main'] .content-box.play, [data-element='banner'] .content-box.play { opacity:1.0!important; transform: scale(1)!important; transform: translateY(0px)!important; transform: translateX(0px)!important; } } /*-------------------------------------------------------------------------- /////////////////////////////////////////////// ---------- / END ANIMATIONS --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- ////////////////////////////////////////////////////////////////////////// BASE GLOBAL EXTRAS ///////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////// ---------- / END EXTRAS --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////// 00 AREA /////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*------------------------------------------------------------------------ AREA - CATEGORIA //////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*---------------------------------------------------------------- --- DIVISION - DIVISION ///////////////////////////////////////// ----------------------------------------------------------------*/ /*--------------------------------------------------- --- DIVISION ///////////////////////////////////// ---------------------------------------------------*/ /*--------------------------------------------------- //////////// PATRON //////////// ---------------------------------------------------*/ /* -------------------------------------------------- ----------------------------------------- BLOQUE --- ---------------------------------------------------*/ /* ------------------------------------------- 720 --- --------------------------------------------------*/ /* ------------------------------------- +++ VARIACION //////////////// -------------------------------------*/ /* ------------------------------------ --- TITLE /////////////// -------------------------------------*/ /* item ------------------------------*/ /* item ----------------------------------------*/