/* ====================================================================== GLOBAL ////////////////////////////////////////////////////////////// ====================================================================== */ /*---------------------------------------------------------- GLOBAL - COLORS /////////////////////////////////////////// ----------------------------------------------------------*/ /*------------------------------------------------ --- COLOR MAIN ///////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- COLOR SECOND /////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- COLOR WHITE ///////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- COLOR BLACK //////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- COLOR NEUTRO ////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- GRADIENTES ///////////////////////////////// ------------------------------------------------*/ /*---------------------------------------------------------- GLOBAL - FONTS AND TEXTS ////////////////////////////////// ----------------------------------------------------------*/ /*------------------------------------------------ --- FONT FACE /////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- GENERAL //////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- H //////////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- PARRAFOS ///////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- ALINEACIONES /////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- ANCHORS & LINKS ///////////////////////////// ------------------------------------------------*/ /*---------------------------------------------------------- GLOBAL - MAS ////////////////////////////////////////////// ----------------------------------------------------------*/ /*----------------------------------------------- --- IMG /////////////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- SVG-ICON ////////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- HR /////////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- OPACITY /////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- CONTENT VISIBILITY ///////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- BOX SIZING ///////////////////////////////// ------------------------------------------------*/ /* ====================================================================== HEADER ////////////////////////////////////////////////////////////// ====================================================================== */ /*------------------------------------------------ --- HEADER DEFAULT ////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- HEADER-MAIN //////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- LOGOTIPO /////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- MOVIL ////////////////////////////////////// ------------------------------------------------*/ /* ====================================================================== NAV ///////////////////////////////////////////////////////////////// ====================================================================== */ /*----------------------------------------------- --- NAV DEFAULT ///////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- NAV MAIN /////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- NAV SECOND ///////////////////////////////// ------------------------------------------------*/ /* ====================================================================== LAYOUT ///////////////////////////////////////////////////////////// ====================================================================== */ /*---------------------------------------------------------- LAYOUT - DISPLAY ////////////////////////////////////////// ----------------------------------------------------------*/ /*------------------------------------------------ --- DISPLAY FLEX ////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- DISPLAY FLEX ITEMS ///////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- PANEL FLEX COLS //////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- DISPLAY GRID ////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- DISPLAY GRID ITEMS ////////////////////// ------------------------------------------------*/ /*---------------------------------------------------------- LAYOUT - SPACING ////////////////////////////////////////// ----------------------------------------------------------*/ /*------------------------------------------------ --- ALTURA //////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- PADDING /////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- GAP ////////////////////////////////// ------------------------------------------------*/ /*---------------------------------------------------------- LAYOUT - SIZES ////////////////////////////////////////// ----------------------------------------------------------*/ /*------------------------------------------------ --- W SIZES ////////////////////////////////// ------------------------------------------------*/ /*---------------------------------------------------------- LAYOUT - MAS /////////////////////////////////////////////// ----------------------------------------------------------*/ /*------------------------------------------------ --- SCROLL BAR ////////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- ROUNDED /////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- ASPECT RATIO /////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- STRECTH //////////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- DESFASAR /////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- IS-ABSOLUTE ///////////////////////////////// ------------------------------------------------*/ /* ====================================================================== STRUCTURE ////////////////////////////////////////////////////////// ====================================================================== */ /*---------------------------------------------------------- STRUCTURE - GENERAL //////////////////////////////////////// ----------------------------------------------------------*/ /*------------------------------------------------ --- Z INDEX ////////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- IN //////////////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- MAIN ///////////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- CONTAINER DEFAULT ///////////////////////// ------------------------------------------------*/ /*---------------------------------------------------------- STRUCTURE - BANNERS //////////////////////////////////////// ----------------------------------------------------------*/ /*----------------------------------------------- --- GENERAL /////////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- IMG LOADED /////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- IF PLAYED //////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- MOVIL //////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- CONTENT BOX //////////////////////////////// ------------------------------------------------*/ /*---------------------------------------------------------- STRUCTURE - LEVELS //////////////////////////////////////// ----------------------------------------------------------*/ /*----------------------------------------------- --- PANELES ALL /////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- PANEL FIXED /////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- COLUMNA DEFAULT ////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- COLUMNA FULL ///////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- COLUMNA FRONT ///////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- COLUMNA AUTO ////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- COLUMNA CONTENT CENTER ///////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- DOS COLUMNAS 50% - 50% //////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- DOS COLUMNAS 20% - 80% ///////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- DOS COLUMNAS 30% - 70% //////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- DOS COLUMNAS 40% - 60% //////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- GRUPO /////////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- INSIDE DEFAULT //////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- ARTICLE DEFAULT ///////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- DIV CENTER ///////////////////////////////// ------------------------------------------------*/ /* ====================================================================== COMPONENTS ///////////////////////////////////////////////////////// ====================================================================== */ /*---------------------------------------------------------- COMPONENTS - ITEMS ///////////////////////////////////////// ----------------------------------------------------------*/ /*----------------------------------------------- --- ITEMS ALL ///////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- ITEMS CARDS /////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- ITEMS CARDS CENTER ////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- ITEM ROW ////////////////////////////////// ------------------------------------------------*/ /*---------------------------------------------------------- COMPONENTS - ITEMS TO M0VIL /////////////////////////////// ----------------------------------------------------------*/ /*------------------------------------------------ --- IS TOP ///////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- IETMS-TO-POST ///////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- IETMS-TO-COVER ///////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- ITEM TO SQUARE //////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- TO-FULL ///////////////////////////////////// ------------------------------------------------*/ /*---------------------------------------------------------- COMPONENTS - ELEMENTOS ///////////////////////////////////// ----------------------------------------------------------*/ /*------------------------------------------------ --- TITULOS ///////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- LISTAS ///////////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- IMG-BACKGROUND //////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- IMG-COVER ///////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- IMG-CONTAIN ////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- IMG-BLOCK //////////////////////////////// ------------------------------------------------*/ /*----------------------------------------------- --- IMG ICON PROFILE ////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- TAB BOX //////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- MODALS ////////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- SOCIAL BAR /////////////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- ELEMENTO FLOTANTE /////////////////////////// ------------------------------------------------*/ /*------------------------------------------------ --- TABLES ////////////////////////////////////// ------------------------------------------------*/ /* ======================================================================= ////////////////////////////////////////////////////////////////////////// GLOBAL /////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////// ======================================================================== */ 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-ubicacion:#ff0000; --color-twitter:#55acee; --color-tiktok:#000; --color-x:#55acee; --color-linkedin:#007bb5; --gradient-main:linear-gradient(to top, var(--color-main) 0%, var(--color-main-soft) 100%); --gradient-main-soft:linear-gradient(to top, var(--color-main-softer) 0%, var(--color-white) 120%); --gradient-main-dark:linear-gradient(to top, var(--color-main-darker) 0%, var(--color-main) 80%); --gradient-main-to-right:linear-gradient(to right, var(--color-main) 0%, transparent 80%); --gradient-main-to-top:linear-gradient(to top, var(--color-main) 0%, transparent 80%); --gradient-main-to-left:linear-gradient(to left, var(--color-main) 0%, transparent 80%); --gradient-main-to-bottom:linear-gradient(to bottom, var(--color-main) 0%, transparent 80%); --gradient-main-softer-to-right:linear-gradient(to right, var(--color-main-softer) 0%, transparent 80%); --gradient-main-softer-to-top:linear-gradient(to top, var(--color-main-softer) 0%, transparent 80%); --gradient-main-softer-to-left:linear-gradient(to left, var(--color-main-softer) 0%, transparent 80%); --gradient-main-softer-to-bottom:linear-gradient(to bottom, var(--color-main-softer) 0%, transparent 80%); --gradient-second:linear-gradient(to top, var(--color-second) 0%, var(--color-second-soft) 100%); --gradient-second-soft:linear-gradient(to top, var(--color-second-softer) 0%, var(--color-white) 120%); --gradient-second-dark:linear-gradient(to top, var(--color-second-darker) 0%, var(--color-second) 80%); --gradient-second-to-right:linear-gradient(to right, var(--color-second) 0%, transparent 80%); --gradient-second-to-top:linear-gradient(to top, var(--color-second) 0%, transparent 80%); --gradient-second-to-left:linear-gradient(to left, var(--color-second) 0%, transparent 80%); --gradient-second-to-bottom:linear-gradient(to bottom, var(--color-second) 0%, transparent 80%); --gradient-combinado:linear-gradient(to top, var(--color-main) 0%, var(--color-second-soft) 100%); --gradient-combinado-soft:linear-gradient(to top, var(--color-main-soft) -20%, var(--color-second-softer) 100%); --gradient-combinado-dark:linear-gradient(to top, var(--color-main-dark) 0%, var(--color-second) 120%); --gradient-combinado-to-right:linear-gradient(to right, var(--color-main) 0%, var(--color-second-soft) 100%); --gradient-combinado-to-top:linear-gradient(to top, var(--color-main) 0%, var(--color-second-soft) 100%); --gradient-combinado-to-left:linear-gradient(to left, var(--color-main) 0%, var(--color-second-soft) 100%); --gradient-combinado-to-bottom:linear-gradient(to bottom, var(--color-main) 0%, var(--color-second-soft) 100%); --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-neutro:linear-gradient(to top, var(--color-neutro) 0%, var(--color-neutro-soft) 100%); --gradient-neutro-soft:linear-gradient(to top, var(--color-neutro-softer) 0%, var(--color-white) 120%); --gradient-neutro-dark:linear-gradient(to top, var(--color-neutro-darker) 0%, var(--color-neutro) 80%); --gradient-neutro-to-right:linear-gradient(to right, var(--color-neutro) 0%, transparent 80%); --gradient-neutro-to-top:linear-gradient(to top, var(--color-neutro) 0%, transparent 80%); --gradient-neutro-to-left:linear-gradient(to left, var(--color-neutro) 0%, transparent 80%); --gradient-neutro-to-bottom:linear-gradient(to bottom, var(--color-neutro) 0%, transparent 80%); --gradient-white-to-right:linear-gradient(to right, var(--color-white) 0%, transparent 80%); --gradient-white-to-top:linear-gradient(to top, var(--color-white) 0%, transparent 80%); --gradient-white-to-left:linear-gradient(to left, var(--color-white) 0%, transparent 80%); --gradient-white-to-bottom:linear-gradient(to bottom, var(--color-white) 0%, transparent 80%); --gradient-black-to-right:linear-gradient(to right, var(--color-black) 0%, transparent 80%); --gradient-black-to-top:linear-gradient(to top, var(--color-black) 0%, transparent 80%); --gradient-black-to-left:linear-gradient(to left, var(--color-black) 0%, transparent 80%); --gradient-black-to-bottom:linear-gradient(to bottom, var(--color-black) 0%, transparent 80%); } /*--------------------------------------------------- --- COLOR MAIN //////////////////////////////////// ---------------------------------------------------*/ /* Main ----------------------------------------*/ .color-main, [class~="--titles-color-main"] [class^="title"], [class~="--subtitles-color-main"] [class^="subtitle"], [class~="--txts-color-main"] p{ color:var(--color-main)!important; } .color-main.svg-icon, [class*="--icons-color-main"] .svg-icon { fill:var(--color-main)!important; } .bg-main, [class~="--items-bg-main"] [class^="item"], [class~="--cols-bg-main"] [class^="col"], [class~="--blocks-bg-main"] [class^="block"], ul.items-bg-main li > * { background:var(--color-main)!important; } .bg-main-90 { background:color-mix(in srgb, var(--color-main) 90%, transparent); } .bg-main-80 { background:color-mix(in srgb, var(--color-main) 80%, transparent); } .bg-main-70 { background:color-mix(in srgb, var(--color-main) 70%, transparent); } .bg-main-60 { background:color-mix(in srgb, var(--color-main) 60%, transparent); } .bg-main-50 { background:color-mix(in srgb, var(--color-main) 50%, transparent); } .bg-main-40 { background:color-mix(in srgb, var(--color-main) 40%, transparent); } .bg-main-30 { background:color-mix(in srgb, var(--color-main) 30%, transparent); } .bg-main-20 { background:color-mix(in srgb, var(--color-main) 20%, transparent); } .bg-main-10 { background:color-mix(in srgb, var(--color-main) 10%, transparent); } /* Main darker ----------------------------------------*/ .color-main-darker, [class~="--titles-color-main-darker"] [class^="title"], [class~="--subtitles-color-main-darker"] [class^="subtitle"], [class~="--txts-color-main-darker"] p{ color: var(--color-main-darker)!important; } .color-main-darker.svg-icon, [class*="--icons-color-main-darker"] .svg-icon { fill: var(--color-main-darker)!important; } .bg-main-darker, [class~="--items-bg-main-darker"] [class^="item"], [class~="--cols-bg-main-darker"] [class^="col"], [class~="--blocks-bg-main-darker"] [class^="block"], ul.items-bg-main-darker li > * { background:var(--color-main-darker)!important; } .bg-main-darker-90 { background:color-mix(in srgb, var(--color-main-darker) 90%, transparent); } .bg-main-darker-80 { background:color-mix(in srgb, var(--color-main-darker) 80%, transparent); } .bg-main-darker-70 { background:color-mix(in srgb, var(--color-main-darker) 70%, transparent); } .bg-main-darker-60 { background:color-mix(in srgb, var(--color-main-darker) 60%, transparent); } .bg-main-darker-50 { background:color-mix(in srgb, var(--color-main-darker) 50%, transparent); } .bg-main-darker-40 { background:color-mix(in srgb, var(--color-main-darker) 40%, transparent); } .bg-main-darker-30 { background:color-mix(in srgb, var(--color-main-darker) 30%, transparent); } .bg-main-darker-20 { background:color-mix(in srgb, var(--color-main-darker) 20%, transparent); } .bg-main-darker-10 { background:color-mix(in srgb, var(--color-main-darker) 10%, transparent); } /* Main dark ----------------------------------------*/ .color-main-dark, [class~="--titles-color-main-dark"] [class^="title"], [class~="--subtitles-color-main-dark"] [class^="subtitle"], [class~="--txts-color-main-dark"] p{ color: var(--color-main-dark)!important; } .color-main-dark.svg-icon, [class*="--icons-color-main-dark"] .svg-icon { fill: var(--color-main-dark)!important; } .bg-main-dark, [class~="--items-bg-main-dark"] [class^="item"], [class~="--cols-bg-main-dark"] [class^="col"], [class~="--blocks-bg-main-dark"] [class^="block"], ul.items-bg-main-dark li > * { background:var(--color-main-dark)!important; } /* Main soft ----------------------------------------*/ .color-main-soft, [class~="--titles-color-main-soft"] [class^="title"], [class~="--subtitles-color-main-soft"] [class^="subtitle"], [class~="--txts-color-main-soft"] p{ color: var(--color-main-soft) !important; } .color-main-soft.svg-icon, [class*="--icons-color-main-soft"] .svg-icon { fill: var(--color-main-soft) !important; } .bg-main-soft, [class~="--items-bg-main-soft"] [class^="item"], [class~="--cols-bg-main-soft"] [class^="col"], [class~="--blocks-bg-main-soft"] [class^="block"], ul.items-bg-main-soft li > * { background:var(--color-main-soft)!important; } /* Main softer ----------------------------------------*/ .color-main-softer, [class~="--titles-color-main-softer"] [class^="title"], [class~="--subtitles-color-main-softer"] [class^="subtitle"], [class~="--txts-color-main-softer"] p{ color: var(--color-main-softer) !important; } .color-main-softer.svg-icon, [class*="--icons-color-main-softer"] .svg-icon { fill: var(--color-main-softer) !important; } .bg-main-softer, [class~="--items-bg-main-softer"] [class^="item"], [class~="--cols-bg-main-softer"] [class^="col"], [class~="--blocks-bg-main-softer"] [class^="block"], ul.items-bg-main-softer li > * { background:var(--color-main-softer)!important; } /*--------------------------------------------------- --- COLOR SECOND ////////////////////////////////// ---------------------------------------------------*/ /* Second ----------------------------------------*/ .color-second, [class~="--titles-color-second"] [class^="title"], [class~="--subtitles-color-second"] [class^="subtitle"], [class~="--txts-color-second"] p { color: var(--color-second) !important; } .color-second.svg-icon, [class*="--icons-color-second"] .svg-icon { fill: var(--color-second) !important; } .bg-second, [class~="--items-bg-second"] [class^="item"], [class~="--cols-bg-second"] [class^="col"], [class~="--blocks-bg-second"] [class^="block"], ul.items-bg-second li > * { background:var(--color-second)!important; } .bg-second-90 { background:color-mix(in srgb, var(--color-second) 90%, transparent); } .bg-second-80 { background:color-mix(in srgb, var(--color-second) 80%, transparent); } .bg-second-70 { background:color-mix(in srgb, var(--color-second) 70%, transparent); } .bg-second-60 { background:color-mix(in srgb, var(--color-second) 60%, transparent); } .bg-second-50 { background:color-mix(in srgb, var(--color-second) 50%, transparent); } .bg-second-40 { background:color-mix(in srgb, var(--color-second) 40%, transparent); } .bg-second-30 { background:color-mix(in srgb, var(--color-second) 30%, transparent); } .bg-second-20 { background:color-mix(in srgb, var(--color-second) 20%, transparent); } .bg-second-10 { background:color-mix(in srgb, var(--color-second) 10%, transparent); } /* Second darker ----------------------------------------*/ .color-second-darker, [class~="--titles-color-second-darker"] [class^="title"], [class~="--subtitles-color-second-darker"] [class^="subtitle"], [class~="--txts-color-second-darker"] p { color: var(--color-second-darker) !important; } .color-second-darker.svg-icon, [class*="--icons-color-second-darker"] .svg-icon { fill: var(--color-second-darker) !important; } .bg-second-darker, [class~="--items-bg-second-darker"] [class^="item"], [class~="--cols-bg-second-darker"] [class^="col"], [class~="--blocks-bg-second-darker"] [class^="block"], ul.items-bg-second-darker li > * { background:var(--color-second-darker)!important; } /* Second dark ----------------------------------------*/ .color-second-dark, [class~="--titles-color-second-dark"] [class^="title"], [class~="--subtitles-color-second-dark"] [class^="subtitle"], [class~="--txts-color-second-dark"] p { color: var(--color-second-dark) !important; } .color-second-dark.svg-icon, [class*="--icons-color-second-dark"] .svg-icon { fill: var(--color-second-dark) !important; } .bg-second-dark, [class~="--items-bg-second-dark"] [class^="item"], [class~="--cols-bg-second-dark"] [class^="col"], [class~="--blocks-bg-second-dark"] [class^="block"], ul.items-bg-second-dark li > * { background:var(--color-second-dark)!important; } /* Second soft ----------------------------------------*/ .color-second-soft, [class~="--titles-color-second-soft"] [class^="title"], [class~="--subtitles-color-second-soft"] [class^="subtitle"], [class~="--txts-color-second-soft"] p { color: var(--color-second-soft) !important; } .color-second-soft.svg-icon, [class*="--icons-color-second-soft"] .svg-icon { fill: var(--color-second-soft) !important; } .bg-second-soft, [class~="--items-bg-second-soft"] [class^="item"], [class~="--cols-bg-second-soft"] [class^="col"], [class~="--blocks-bg-second-soft"] [class^="block"], ul.items-bg-second-soft li > * { background:var(--color-second-soft)!important; } /* Second softer ----------------------------------------*/ .color-second-softer, [class~="--titles-color-second-softer"] [class^="title"], [class~="--subtitles-color-second-softer"] [class^="subtitle"], [class~="--txts-color-second-softer"] p { color: var(--color-second-softer) !important; } .color-second-softer.svg-icon, [class*="--icons-color-second-softer"] .svg-icon { fill: var(--color-second-softer) !important; } .bg-second-softer, [class~="--items-bg-second-softer"] [class^="item"], [class~="--cols-bg-second-softer"] [class^="col"], [class~="--blocks-bg-second-softer"] [class^="block"], ul.items-bg-second-softer li > * { background:var(--color-second-softer)!important; } /*--------------------------------------------------- --- COLOR WHITE //////////////////////////////////// ---------------------------------------------------*/ .color-white, [class~="--titles-color-white"] [class^="title"], [class~="--subtitles-color-white"] [class^="subtitle"], [class~="--txts-color-white"] p { color:var(--color-white)!important; } .color-white.svg-icon, [class*="--icons-color-white"] .svg-icon{ fill:var(--color-white)!important; } .bg-white, [class~="--items-bg-white"] [class^="item"], [class~="--cols-bg-white"] [class^="col"], [class~="--blocks-bg-white"] [class^="block"], .items-bg-white.items-split [class^="item"] > [class^="col"], ul.items-bg-white li > * { background:var(--color-white)!important; } .color-white-90, .titles-color-white-90 [class*="title"] { color:var(--color-white-90)!important; } .color-white-80, .titles-color-white-80 [class*="title"] { color:var(--color-white-80)!important; } .color-white-70, .titles-color-white-70 [class*="title"] { color:var(--color-white-70)!important; } .color-white-60, .titles-color-white-60 [class*="title"] { color:var(--color-white-60)!important; } .color-white-50, .titles-color-white-50 [class*="title"] { color:var(--color-white-50)!important; } .color-white-40, .titles-color-white-40 [class*="title"] { color:var(--color-white-40)!important; } .color-white-30, .titles-color-white-30 [class*="title"] { color:var(--color-white-30)!important; } .color-white-20, .titles-color-white-20 [class*="title"] { color:var(--color-white-20)!important; } .color-white-10, .titles-color-white-10 [class*="title"] { color:var(--color-white-10)!important; } .bg-white-90 { background:color-mix(in srgb, var(--color-white) 90%, transparent); } .bg-white-80 { background:color-mix(in srgb, var(--color-white) 80%, transparent); } .bg-white-70 { background:color-mix(in srgb, var(--color-white) 70%, transparent); } .bg-white-60 { background:color-mix(in srgb, var(--color-white) 60%, transparent); } .bg-white-50 { background:color-mix(in srgb, var(--color-white) 50%, transparent); } .bg-white-40 { background:color-mix(in srgb, var(--color-white) 40%, transparent); } .bg-white-30 { background:color-mix(in srgb, var(--color-white) 30%, transparent); } .bg-white-20 { background:color-mix(in srgb, var(--color-white) 20%, transparent); } .bg-white-10 { background:color-mix(in srgb, var(--color-white) 10%, transparent); } /*--------------------------------------------------- --- COLOR BLACK /////////////////////////////////// ---------------------------------------------------*/ .color-black, [class~="--titles-color-black"] [class^="title"], [class~="--subtitles-color-black"] [class^="subtitle"], [class~="--txts-color-black"] p { color:var(--color-black)!important; } .color-black.svg-icon, [class*="--icons-color-black"] .svg-icon{ fill:var(--color-black)!important; } .bg-black, [class~="--items-bg-black"] [class^="item"], [class~="--cols-bg-black"] [class^="col"], [class~="--blocks-bg-black"] [class^="block"], ul.items-bg-black li > * { background:var(--color-black)!important; } .bg-black-90 { background:color-mix(in srgb, var(--color-black) 90%, transparent); } .bg-black-80 { background:color-mix(in srgb, var(--color-black) 80%, transparent); } .bg-black-70 { background:color-mix(in srgb, var(--color-black) 70%, transparent); } .bg-black-60 { background:color-mix(in srgb, var(--color-black) 60%, transparent); } .bg-black-50 { background:color-mix(in srgb, var(--color-black) 50%, transparent); } .bg-black-40 { background:color-mix(in srgb, var(--color-black) 40%, transparent); } .bg-black-30 { background:color-mix(in srgb, var(--color-black) 30%, transparent); } .bg-black-20 { background:color-mix(in srgb, var(--color-black) 20%, transparent); } .bg-black-10 { background:color-mix(in srgb, var(--color-black) 10%, transparent); } .color-black-90, .titles-color-black-90 [class*="title"] { color:var(--color-black-90)!important; } .color-black-80, .titles-color-black-80 [class*="title"] { color:var(--color-black-80)!important; } .color-black-70, .titles-color-black-70 [class*="title"] { color:var(--color-black-70)!important; } .color-black-60, .titles-color-black-60 [class*="title"] { color:var(--color-black-60)!important; } .color-black-50, .titles-color-black-50 [class*="title"] { color:var(--color-black-50)!important; } .color-black-40, .titles-color-black-40 [class*="title"] { color:var(--color-black-40)!important; } .color-black-30, .titles-color-black-30 [class*="title"] { color:var(--color-black-30)!important; } .color-black-20, .titles-color-black-20 [class*="title"] { color:var(--color-black-20)!important; } .color-black-10, .titles-color-black-10 [class*="title"] { color:var(--color-black-10)!important; } /*--------------------------------------------------- --- COLOR NEUTRO ///////////////////////////////// ---------------------------------------------------*/ /* Neutro ----------------------------------------*/ .color-neutro, [class~="--titles-color-neutro"] [class^="title"], [class~="--subtitles-color-neutro"] [class^="subtitle"], [class~="--txts-color-neutro"] p { color: var(--color-neutro); } .color-neutro.svg-icon, [class*="--icons-color-neutro"] .svg-icon{ fill: var(--color-neutro); } .bg-neutro, [class~="--items-bg-neutro"] [class^="item"], [class~="--cols-bg-neutro"] [class^="col"], [class~="--blocks-bg-neutro"] [class^="block"], ul.items-bg-neutro li > * { background:var(--color-neutro); } /* Neutro darker ----------------------------------------*/ .color-neutro-darker, [class~="--titles-color-neutro-darker"] [class^="title"], [class~="--subtitles-color-neutro-darker"] [class^="subtitle"], [class~="--txts-color-neutro-darker"] p { color: var(--color-neutro-darker); } .color-neutro-darker.svg-icon, [class*="--icons-color-neutro-darker"] .svg-icon{ fill: var(--color-neutro-darker); } .bg-neutro-darker, [class~="--items-bg-neutro-darker"] [class^="item"], [class~="--cols-bg-neutro-darker"] [class^="col"], [class~="--blocks-bg-neutro-darker"] [class^="block"], ul.items-bg-neutro-darker li > * { background:var(--color-neutro-darker); } /* Neutro dark ----------------------------------------*/ .color-neutro-dark, [class~="--titles-color-neutro-dark"] [class^="title"], [class~="--subtitles-color-neutro-dark"] [class^="subtitle"], [class~="--txts-color-neutro-dark"] p { color: var(--color-neutro-dark); } .color-neutro-dark.svg-icon, [class*="--icons-color-neutro-dark"] .svg-icon{ fill: var(--color-neutro-dark); } .bg-neutro-dark, [class~="--items-bg-neutro-dark"] [class^="item"], [class~="--cols-bg-neutro-dark"] [class^="col"], [class~="--blocks-bg-neutro-dark"] [class^="block"], ul.items-bg-neutro-dark li > * { background:var(--color-neutro-dark); } /* Neutro soft ----------------------------------------*/ .color-neutro-soft, [class~="--titles-color-neutro-soft"] [class^="title"], [class~="--subtitles-color-neutro-soft"] [class^="subtitle"], [class~="--txts-color-neutro-soft"] p { color: var(--color-neutro-soft); } .color-neutro-soft.svg-icon, [class*="--icons-color-neutro-soft"] .svg-icon{ fill: var(--color-neutro-soft); } .bg-neutro-soft, [class~="--items-bg-neutro-soft"] [class^="item"], [class~="--cols-bg-neutro-soft"] [class^="col"], [class~="--blocks-bg-neutro-soft"] [class^="block"], ul.items-bg-neutro-soft li > * { background:var(--color-neutro-soft); } /* Neutro softer ----------------------------------------*/ .color-neutro-softer, [class~="--titles-color-neutro-softer"] [class^="title"], [class~="--subtitles-color-neutro-softer"] [class^="subtitle"], [class~="--txts-color-neutro-softer"] p { color: var(--color-neutro-softer); } .color-neutro-softer.svg-icon, [class*="--icons-color-neutro-softer"] .svg-icon { fill: var(--color-neutro-softer); } .bg-neutro-softer, [class~="--items-bg-neutro-softer"] [class^="item"], [class~="--cols-bg-neutro-softer"] [class^="col"], [class~="--blocks-bg-neutro-softer"] [class^="block"], ul.items-bg-neutro-softer li > * { background:var(--color-neutro-softer); } /*--------------------------------------------------- --- COLOR OK ///////////////////////////////// ---------------------------------------------------*/ /* OK ----------------------------------------*/ .color-ok, [class~="--titles-color-ok"] [class^="title"], [class~="--subtitles-color-ok"] [class^="subtitle"], [class~="--txts-color-ok"] p { color: var(--color-ok); } .color-ok.svg-icon, [class*="--icons-color-ok"] .svg-icon{ fill: var(--color-ok); } .bg-ok, [class~="--items-bg-ok"] [class^="item"], [class~="--cols-bg-ok"] [class^="col"], [class~="--blocks-bg-ok"] [class^="block"], ul.items-bg-ok li > * { background:var(--color-ok); } /* OK softer ----------------------------------------*/ .color-ok, [class~="--titles-color-ok-softer"] [class^="title"], [class~="--subtitles-color-ok-softer"] [class^="subtitle"], [class~="--txts-color-ok-softer"] p { color: var(--color-ok-softer); } .color-ok-softer.svg-icon, [class*="--icons-color-ok-softer"] .svg-icon{ fill: var(--color-ok-softer); } .bg-ok-softer, [class~="--items-bg-ok-softer"] [class^="item"], [class~="--cols-bg-ok-softer"] [class^="col"], [class~="--blocks-bg-ok-softer"] [class^="block"], ul.items-bg-ok-softer li > * { background:var(--color-ok-softer); } /*--------------------------------------------------- --- GRADIENTES //////////////////////////////////// ---------------------------------------------------*/ /* Main ----------------------------------------*/ .gradient-main{ background-image:var(--gradient-main); } .gradient-main-dark{ background-image:var(--gradient-main-dark); } .gradient-main-soft{ background-image:var(--gradient-main-soft); } .gradient-main-to-top{ background-image:var(--gradient-main-to-top); } .gradient-main-to-right{ background-image:var(--gradient-main-to-right); } .gradient-main-to-bottom{ background-image:var(--gradient-main-to-bottom); } .gradient-main-to-left{ background-image:var(--gradient-main-to-left); } /* Second ----------------------------------------*/ .gradient-second{ background-image:var(--gradient-second); } .gradient-second-dark{ background-image:var(--gradient-second-dark); } .gradient-second-soft{ background-image:var(--gradient-second-soft); } .gradient-second-to-right{ background-image:var(--gradient-second-to-right); } .gradient-second-to-top{ background-image:var(--gradient-second-to-top); } .gradient-second-to-left{ background-image:var(--gradient-second-to-left); } .gradient-second-to-bottom{ background-image:var(--gradient-second-to-bottom); } /* Neutro ----------------------------------------*/ .gradient-neutro{ background-image:var(--gradient-neutro); } .gradient-neutro-dark{ background-image:var(--gradient-neutro-dark); } .gradient-neutro-soft{ background-image:var(--gradient-neutro-soft); } .gradient-neutro-to-top{ background-image:var(--gradient-neutro-to-top); } .gradient-neutro-to-right{ background-image:var(--gradient-neutro-to-right); } .gradient-neutro-to-bottom{ background-image:var(--gradient-neutro-to-bottom); } .gradient-neutro-to-left{ background-image:var(--gradient-neutro-to-left); } /* Main ----------------------------------------*/ .gradient-combinado{ background-image:var(--gradient-combinado); } .gradient-combinado-dark{ background-image:var(--gradient-combinado-dark); } .gradient-combinado-soft{ background-image:var(--gradient-combinado-soft); } .gradient-combinado-to-top{ background-image:var(--gradient-combinado-to-top); } .gradient-combinado-to-right{ background-image:var(--gradient-combinado-to-right); } .gradient-combinado-to-bottom{ background-image:var(--gradient-combinado-to-bottom); } .gradient-combinado-to-left{ background-image:var(--gradient-combinado-to-left); } /* White ----------------------------------------*/ .gradient-white-to-top{ background-image:var(--gradient-white-to-top); } .gradient-white-to-right{ background-image:var(--gradient-white-to-right); } .gradient-white-to-bottom{ background-image:var(--gradient-white-to-bottom); } .gradient-white-to-left{ background-image:var(--gradient-white-to-left); } /* Black ----------------------------------------*/ .gradient-black-to-top{ background-image:var(--gradient-black-to-top); } .gradient-black-to-right{ background-image:var(--gradient-black-to-right); } .gradient-black-to-bottom{ background-image:var(--gradient-black-to-bottom); } .gradient-black-to-left{ background-image:var(--gradient-black-to-left); } /*--------------------------------------------------- --- MIX BLEND MODE ///////////////////////////////// ---------------------------------------------------*/ .mix-blend-mode-color { mix-blend-mode: color; } .mix-blend-mode-darker { mix-blend-mode: darker; } .mix-blend-mode-lighten { mix-blend-mode: lighten; } .mix-blend-mode-overlay { mix-blend-mode: overlay; } .mix-blend-mode-screen { mix-blend-mode: screen; } .mix-blend-mode-multiply { mix-blend-mode: multiply; } /*---------------------------------------------------------- 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'); } */ /*--------------------------------------------------- --- GENERAL /////////////////////////////////////// ---------------------------------------------------*/ :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; --line-height-xxlarge:3.2em; --line-height-xlarge:2.6em; --line-height-large:2em; --line-height-default:1.4em; --line-height-medium:1.2em; } /* 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-main {font-family: var(--font-main)!important;} .font-second {font-family: var(--font-second)!important;} /* Font size ----------------------------------------*/ .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;} /* Font weight ----------------------------------------*/ .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;} /* Line height ----------------------------------------*/ .line-height-xxlarge, .line-height-xxlarge * { line-height:var(--line-height-xxlarge)!important; } .line-height-xlarge, .line-height-xlarge * { line-height:var(--line-height-xlarge)!important; } .line-height-large, .line-height-large * { line-height:var(--line-height-large)!important; } .line-height, .line-height * { line-height:var(--line-height-default)!important; } .line-height-medium, .line-height-medium * { line-height:var(--line-height-medium)!important; } /* 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; } /*--------------------------------------------------- --- H /////////////////////////////////////////// ---------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { height:auto; margin:0px; padding:0px 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; line-height:1.4em; 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; } /*--------------------------------------------------- --- ALINEACIONES ////////////////////////////////// ---------------------------------------------------*/ [class*="-center"]:is(p, a, ul. ol, span, [class*="title"] ), [class*="-center-to-left"]:where(p, a, ul, ol, span, [class*="title"] ){ justify-content:center; text-align:center; } @media only screen and (max-width:620px) { [class*="-center-to-left"]:where(p, a, ul. ol, span, [class*="title"]){ justify-content:flex-start!important; text-align:left!important; } } /*--------------------------------------------------- --- 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 & LINKS //////////////////////////////// ---------------------------------------------------*/ a { color:inherit; font-size:inherit; margin:0px; padding:0px; text-decoration:underline; } a:hover { text-decoration:underline; } * a, * .link { color:inherit; } .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; } /*------------------------------------------------------------------------ GLOBAL - SPACING //////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*--------------------------------------------------- --- 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); } /*--------------------------------------------------- --- PADDING ////////////////////////////////////// ---------------------------------------------------*/ .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); } :root { --padding-main:4vw; --padding-second:3vw; --padding-third:2vw; --padding-xlarge:clamp(120px, 7vw, 140px); --padding-large:clamp(80px, 5vw, 100px); --padding:clamp(40px, 4vw, 60px); --padding-medium:clamp(30px, 3vw, 50px); --padding-small:clamp(20px, 2vw, 40px); --padding-xsmall:clamp(10px, 1vw, 20px); --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 ----------------------------------------*/ [class~="--items-padding"] [class^="item"], [class~="--items-padding-to-none"] [class^="item"], .padding, .padding-to-none { padding-block:var(--padding); padding-inline:var(--padding); } [class~="--items-padding-block"] [class^="item"], [class~="--items-padding-block-to-none"] [class^="item"], .padding-block, .padding-block-to-none { padding-block:var(--padding); } [class~="--items-padding-inline"] [class^="item"], [class~="--items-padding-inline-to-none"] [class^="item"], .padding-inline, .padding-inline-to-none { padding-inline:var(--padding); } /* Padding xlarge ----------------------------------------*/ [class~="--items-padding-xlarge"] [class^="item"], [class~="--items-padding-xlarge-to-none"] [class^="item"], .padding-xlarge, .padding-xlarge-to-none { padding-block:var(--padding-xlarge); padding-inline:var(--padding-xlarge); } [class~="--items-padding-block-xlarge"] [class^="item"], [class~="--items-padding-block-xlarge-to-none"] [class^="item"], .padding-block-xlarge, .padding-block-xlarge-to-none { padding-block:var(--padding-xlarge); } [class~="--items-padding-inline-xlarge"] [class^="item"], [class~="--items-padding-inline-xlarge-to-none"] [class^="item"], .padding-inline-xlarge, .padding-inline-xlarge-to-none { padding-inline:var(--padding-xlarge); } /* Padding large ----------------------------------------*/ [class~="--items-padding-large"] [class^="item"], [class~="--items-padding-large-to-none"] [class^="item"], .padding-large, .padding-large-to-none { padding-block:var(--padding-large); padding-inline:var(--padding-large); } [class~="--items-padding-block-large"] [class^="item"], [class~="--items-padding-block-large-to-none"] [class^="item"], .padding-block-large, .padding-block-large-to-none { padding-block:var(--padding-large); } [class~="--items-padding-inline-large"] [class^="item"], [class~="--items-padding-inline-large-to-none"] [class^="item"], .padding-inline-large, .padding-inline-large-to-none { padding-inline:var(--padding-large); } /* Padding medium ----------------------------------------*/ [class~="--items-padding-medium"] [class^="item"], [class~="--items-padding-medium-to-none"] [class^="item"], .padding-medium, .padding-medium-to-none { padding-block:var(--padding-medium); padding-inline:var(--padding-medium); } [class~="--items-padding-block-medium"] [class^="item"], [class~="--items-padding-block-medium-to-none"] [class^="item"], .padding-block-medium, .padding-block-medium-to-none { padding-block:var(--padding-medium); } [class~="--items-padding-inline-medium"] [class^="item"], [class~="--items-padding-inline-medium-to-none"] [class^="item"], .padding-inline-medium, .padding-inline-medium-to-none { padding-inline:var(--padding-medium); } /* Padding small ----------------------------------------*/ [class~="--items-padding-small"] [class^="item"], [class~="--items-padding-small-to-none"] [class^="item"], .padding-small, .padding-small-to-none { padding-block:var(--padding-small); padding-inline:var(--padding-small); } [class~="--items-padding-block-small"] [class^="item"], [class~="--items-padding-block-small-to-none"] [class^="item"], .padding-block-small, .padding-block-small-to-none { padding-block:var(--padding-small); } [class~="--items-padding-inline-small"] [class^="item"], [class~="--items-padding-inline-small-to-none"] [class^="item"], .padding-inline-small, .padding-inline-small-to-none { padding-inline:var(--padding-small); } /* Padding xsmall ----------------------------------------*/ [class~="--items-padding-xsmall"] [class^="item"], [class~="--items-padding-xsmall-to-none"] [class^="item"], .padding-xsmall, .padding-xsmall-to-none { padding-block:var(--padding-xsmall); padding-inline:var(--padding-xsmall); } [class~="--items-padding-block-xsmall"] [class^="item"], [class~="--items-padding-block-xsmall-to-none"] [class^="item"], .padding-block-xsmall, .padding-block-xsmall-to-none { padding-block:var(--padding-xsmall); } [class~="--items-padding-inline-xsmall"] [class^="item"], [class~="--items-padding-inline-xsmall-to-none"] [class^="item"], .padding-inline-xsmall, .padding-inline-xsmall-to-none { padding-inline:var(--padding-xsmall); } /* Padding-to-none ----------------------------------------*/ @media only screen and (max-width:620px) { /* padding */ .padding-to-none, .padding-xlarge-to-none, .padding-large-to-none, .padding-medium-to-none, .padding-small-to-none, .padding-xsmall-to-none, :is( [class~="--items-padding-to-none"], [class~="--items-padding-xlarge-to-none"], [class~="--items-padding-large-to-none"], [class~="--items-padding-medium-to-none"], [class~="--items-padding-small-to-none"], [class~="--items-padding-xsmall-to-none"]) [class*="item"] { padding-block:clamp(0px, 0vw, 0px); padding-inline:clamp(0px, 0vw, 0px); } /* padding-block */ .padding-block-to-none, .padding-block-xlarge-to-none, .padding-block-large-to-none, .padding-block-medium-to-none, .padding-block-small-to-none, .padding-block-xsmall-to-none, :is( [class~="--items-padding-block-to-none"], [class~="--items-padding-block-xlarge-to-none"], [class~="--items-padding-block-large-to-none"], [class~="--items-padding-block-medium-to-none"], [class~="--items-padding-block-small-to-none"], [class~="--items-padding-block-xsmall-to-none"]) [class*="item"] { padding-block:clamp(0px, 0vw, 0px); } /* padding-inline */ .padding-inline-to-none, .padding-inline-xlarge-to-none, .padding-inline-large-to-none, .padding-inline-medium-to-none, .padding-inline-small-to-none, .padding-inline-xsmall-to-none, :is( [class~="--items-padding-inline-to-none"], [class~="--items-padding-inline-xlarge-to-none"], [class~="--items-padding-inline-large-to-none"], [class~="--items-padding-inline-medium-to-none"], [class~="--items-padding-inline-small-to-none"], [class~="--items-padding-inline-xsmall-to-none"]) [class*="item"] { padding-inline:clamp(0px, 0vw, 0px); } } /* padding-xlarge- ----------------------------------------*/ .padding-xlarge-large, .padding-xlarge-large-to-none { padding-block:var(--padding-xlarge)!important; padding-inline:var(--padding-large)!important; } .padding-xlarge-default, .padding-xlarge-default-to-none { padding-block:var(--padding-xlarge)!important; padding-inline:var(--padding)!important; } .padding-xlarge-medium, .padding-xlarge-medium-to-none { padding-block:var(--padding-xlarge)!important; padding-inline:var(--padding-medium)!important; } .padding-xlarge-small, .padding-xlarge-small-to-none { padding-block:var(--padding-xlarge)!important; padding-inline:var(--padding-small)!important; } .padding-xlarge-xsmall, .padding-xlarge-xsmall-to-none { padding-block:var(--padding-xlarge)!important; padding-inline:var(--padding-xsmall)!important; } .padding-xlarge-none { padding-block:var(--padding-xlarge)!important; padding-inline:0px!important; } /* padding-large- ----------------------------------------*/ .padding-large-default, .padding-large-default-to-none { padding-block:var(--padding-large)!important; padding-inline:var(--padding)!important; } .padding-large-medium, .padding-large-medium-to-none { padding-block:var(--padding-large)!important; padding-inline:var(--padding-medium)!important; } .padding-large-small, .padding-large-small-to-none { padding-block:var(--padding-large)!important; padding-inline:var(--padding-small)!important; } .padding-large-xsmall, .padding-large-xsmall-to-none { padding-block:var(--padding-large)!important; padding-inline:var(--padding-xsmall)!important; } .padding-large-none { padding-block:var(--padding-large)!important; padding-inline:0px!important; } /* padding-to-none ----------------------------------------*/ @media only screen and (max-width:620px) { .padding-xlarge-large-to-none, .padding-xlarge-default-to-none, .padding-xlarge-medium-to-none, .padding-xlarge-small-to-none, .padding-xlarge-xsmall-to-none, .padding-large-default-to-none, .padding-large-medium-to-none, .padding-large-small-to-none, .padding-large-xsmall-to-none { padding-inline:0px!important; } } /*--------------------------------------------------- --- GAP ////////////////////////////////////////// ---------------------------------------------------*/ :root { --gap-main:4vw; --gap-second:3vw; --gap-third:2vw; --gap-inside:8px; --gap-xlarge:clamp(10px, 2vw, 20px); --gap-large:clamp(8px, 2vw, 16px); --gap:clamp(6px, 1vw, 12px); --gap-medium:clamp(4px, 1vw, 8px); --gap-small:clamp(2px, 1vw, 4px); --gap-xsmall:clamp(1px, 1vw, 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-xlarge { gap:var(--gap-xlarge); } .gap-large { gap:var(--gap-large); } .gap { gap:var(--gap); } .gap-medium { gap:var(--gap-medium); } .gap-small { gap:var(--gap-small); } .gap-sxmall { gap:var(--gap-xsmall); } /*------------------------------------------------------------------------ GLOBAL - MAS //////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- --- 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);} /*-------------------------------------------------- --- 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%; } /*--------------------------------------------------- --- OPACITY ////////////////////////////////////// ---------------------------------------------------*/ .opacity-90, [class*="-opacity-90"] {opacity:0.9;} .opacity-80, [class*="-opacity-80"] {opacity:0.8;} .opacity-70, [class*="-opacity-70"] {opacity:0.7;} .opacity-60, [class*="-opacity-60"] {opacity:0.6;} .opacity-50, [class*="-opacity-50"] {opacity:0.5;} .opacity-40, [class*="-opacity-40"] {opacity:0.4;} .opacity-30, [class*="-opacity-30"] {opacity:0.3;} .opacity-20, [class*="-opacity-20"] {opacity:0.2;} .opacity-10, [class*="-opacity-10"] {opacity:0.1;} .opacity-0, [class*="-opacity-0"] {opacity:0;} /*--------------------------------------------------- --- CONTENT VISIBILITY //////////////////////////// ---------------------------------------------------*/ .svg-icon, video, iframe{ content-visibility: auto; } /*--------------------------------------------------- --- BOX SIZING //////////////////////////////////// ---------------------------------------------------*/ * { box-sizing:border-box!important; float: none; } /* label ----------------------------------------*/ label { font-size:inherit; font-family:inherit; font-weight:inherit; } /* 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); } .add-shadow {box-shadow:var(--box-shadow);} .add-shadow-medium {box-shadow:var(--box-shadow-medium);} .add-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 ------------------------------------------------------------------------*/ /*------------------------------------------------------------------------ ////////////////////////////////////////////////////////////////////////// HEADER /////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /* Z Index default ----------------------------------------*/ .movil-panel-menu.show {z-index:12;} div.block-opacity.show {z-index:11;} /* Z index ----------------------------------------*/ header {z-index:99;} header .logotipo {z-index:2;} header nav[class^="nav-main"] {z-index:1;} /*--------------------------------------------------- --- HEADER DEFAULT //////////////////////////////// ---------------------------------------------------*/ header{ align-items:center; align-content:center; display:flex; flex-flow:row wrap; justify-content:flex-start; gap:var(--gap-inside); margin:0px; max-width:100%; overflow-x:visible;/* necesary */ width:100%; } header > *{ max-height:100%; } header, div[class*="header"] { padding-block:clamp(2px, 5vh, 12px); } /*--------------------------------------------------- --- HEADER-MAIN //////////////////////////////////// ---------------------------------------------------*/ header[class*="header-main"]{ display:flex!important; } /* Altura ----------------------------------------*/ header.header-main { height:clamp(60px, 10vh, 160px); } header.header-main-medium { height:clamp(60px, 9vh, 140px); } header.header-main-small { height:clamp(60px, 8vh, 120px); } /*--------------------------------------------------- --- LOGOTIPO ///////////////////////////////////// ---------------------------------------------------*/ header.header-main .logotipo{ align-items:center; display:flex; flex-flow:row wrap; flex-grow:0; height:100%; justify-content:center; max-height:100px; width:auto; } header.header-main .logotipo img { height: 100%; width: auto; object-fit:contain; display:block; } /*------------------------------------------------------------------------ HEADER - MOVIL ////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*--------------------------------------------------- ////////// PANEL MOVIL ////////// ---------------------------------------------------*/ .panel-movil{ align-content:center; align-items:center; flex-flow:row wrap; height:auto; gap:var(--gap-inside); min-height:100vh!important; justify-content:flex-start; margin:0px; overflow-y:scroll!important; padding:40px 8vw!important; position:fixed; bottom:auto; left:auto; right:auto; top:0px; } /* Ancho ----------------------------------------*/ .panel-movil{ max-width:820px; width:80vw; } /* IF: boton close esta dentro ----------------------------------------*/ .panel-movil .btn-close-menu-movil{ display:flex!important; position:absolute; bottom:auto; left:auto; top:20px; right:20px; } /* IF: Social bar ----------------------------------------*/ .panel-movil .social-bar label{ display:none!important; } /*--------------------------------------------------- ////////// BUTTON MOVIL OPEN ////////// ---------------------------------------------------*/ /* Escondemos ------------------------------------------*/ [class*="menu"] [data-element='btn-movil']{ display:none; } /*--------------------------------------------------- ////////// BLOCK OPACITY ////////// ---------------------------------------------------*/ div.block-opacity { background-color:var(--color-black); display:none; height:100vh; opacity:0.6; transition:all 0.18s; position:fixed!important; bottom:0px; left:0px; right:0px; top:0px; max-width:100%; /*transition-delay:0.16s;*/ width:100vw; } /* ACTION Show ----------------------------------------*/ div.block-opacity.show{ display:block!important; } /*--------------------------------------------------- ////////// BODY LOCK ////////// ---------------------------------------------------*/ /* ACTION Lock ----------------------------------------*/ body.lock{ position:fixed!important; } /*--------------------------------------------------- ////////// MENU MOVIL ////////// ---------------------------------------------------*/ ul.menu-movil, ul.menu-movil-second { align-items:center; align-content:center; display:flex; justify-content:flex-start; flex-flow:row wrap; height:auto; list-style:none; max-width:100%; margin:0px; padding:0px; width:100%; } ul.menu-movil li, ul.menu-movil-second li{ align-items:center; align-content:center; display:flex; flex-flow:row wrap; height:auto; justify-content:flex-start; margin:0px; padding:0px; width:100%; } /*--------------------------------------------------- ////////// MENU MOVIL BASE ////////// ---------------------------------------------------*/ .menu-movil-base ul.menu-movil, .menu-movil-base ul.menu-movil-second{ gap:var(--gap-inside); } /* Botones ----------------------------------------*/ .menu-movil-base ul.menu-movil > li > *:not(ul), .menu-movil-base ul.menu-movil > li > *:not(ul):hover, .menu-movil-base ul.menu-movil-second li > *, .menu-movil-base ul.menu-movil-second li > *:hover{ align-items:center; align-content:center; cursor:pointer; display:flex; flex-flow:row wrap; gap:var(--gap-small); height:40px; line-height:40px; justify-content:flex-start; margin:0px 0px; position:relative; transition:var(----add-transition-very-fast); text-align:left; text-decoration:none; text-overflow:ellipsis!important; user-select: none; white-space:nowrap; width:100%; } .menu-movil-base ul.menu-movil > li > *:hover{ text-decoration:none; } /* Buttons icons */ .menu-movil-base ul.menu-movil > li > *:not(.button) .svg-icon, .menu-movil-base ul.menu-dropdown > li > * .svg-icon, .menu-movil-base ul.menu-dropdown li[data-seccion='back'] > label .svg-icon{ height:32px; width:32px; } /* --- / END */ /*------------------------------------------------------------------------ HEADER - ACTIONS TO SHOW ////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*--------------------------------------------------- ////////// PANEL TO SHOW ////////// ---------------------------------------------------*/ .panel-to-show{ display:none; transition: transform 0.2s ease-in-out; } /* ------------------------------------- +++ SLIDE TO LEFT //////////////// -------------------------------------*/ .panel-to-show.slide-to-left { opacity:1.0; right:0px; transform:translateX(100vw); z-index:12; } /* ------------------------------------- +++ SLIDE TO RIGHT //////////////// -------------------------------------*/ .panel-to-show.slide-to-right { opacity:1.0; left:0px; transform:translateX(-100vw); z-index:12; } /* ------------------------------------- +++ SLIDE TO TOP //////////////// -------------------------------------*/ .panel-to-show.slide-to-top { opacity:1.0; top:0px; transform:translateY(100vH); z-index:12; } .panel-to-show.slide-to-top { max-width:100vw; width:100vw; } /* ------------------------------------- +++ FADE IN ///////////////////// -------------------------------------*/ .panel-to-show.fade-in { opacity:0.0; top:0px; z-index:0; } .panel-to-show.fade-in { max-width:100vw; width:100vw; } /* ------------------------------------- +++ SHOW ALL //////////////// -------------------------------------*/ .panel-to-show.show{ display:flex!important; visibility: visible!important; opacity:1.0!important;; position:fixed!important; transform:translateX(0vw)!important; transform:translateY(0vw)!important; z-index:99!important; } /*------------------------------------------------------------------------ ///////////////////////////////////////////////// ---------- / END HEADER ------------------------------------------------------------------------*/ /*------------------------------------------------------------------------ ////////////////////////////////////////////////////////////////////////// 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; padding-block:clamp(2px, 5vh, 12px)!important; position:relative; width:auto; } nav ul { width:auto!important; } nav, nav > *, div.nav *{ max-height:100%; } /* 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; 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, [class^="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; } /*--------------------------------------------------- --- NAV MAIN ///////////////////////////////////// ---------------------------------------------------*/ header.header-main nav[class^="nav-main"]{ justify-content:flex-end; padding-bottom:0px; padding-top:0px; } /* Nav UL ----------------------------------------*/ header nav[class^="nav-main"] > ul { justify-content:flex-end; } /* Nav Buttons ----------------------------------------*/ header nav[class^="nav-main"] > ul > li > *:where( a, span, label){ transition:var(--add-transition-very-fast); } /* Nomal ----------------------------------------*/ header nav.nav-main { font-size:inherit; } header nav.nav-main > ul > li[data-element='separator']{ height:22px; } /* large ----------------------------------------*/ header nav.nav-main-large { font-size: clamp(1.2rem, 1.2vw, 2rem); } header nav.nav-main.large > ul > li[data-element='separator']{ height:24px; } /* Medium ----------------------------------------*/ header nav.nav-main-medium { font-size: clamp(0.9rem, 1.1vw, 1.6rem); } header nav.nav-main-medium > ul > li[data-element='separator']{ height:19px; } /* Small ----------------------------------------*/ header nav.nav-main-small { font-size: clamp(0.8rem, 1vw, 1.4rem); } header nav.nav-main-small > ul > li[data-element='separator']{ height:16px; } /* xSmall ----------------------------------------*/ header nav.nav-main-xsmall { font-size: clamp(0.8rem, 1vw, 1.2rem); } header nav.nav-main-xsmall > ul > li[data-element='separator']{ height:10px; } /* --- / END */ /*------------------------------------------------------------------------ NAV SECOND ////////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ nav.nav-second { display:none; width:100%; } /*------------------------------------------------------------------------- ///////////////////////////////////////////////////// ---------- / END NAV -------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////// LAYOUT //////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*--------------------------------------------------- --- SCROLL BAR ///////////////////////////////////// ---------------------------------------------------*/ [class*="container"], .main, *[data-element*='banner'], *[data-element='panel'] { scrollbar-gutter: stable; } /*-------------------------------------------------- --- 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"]:not([class*="--"]) { overflow:hidden; } /* Rounded ------------------------------*/ [class*="rounded"]:not([class*="--"]), [class~="--items-rounded"] [class^="item"], [class~="--cols-rounded"] [class^="col"], [class~="--blocks-rounded"] [class^="block"] { border-radius:var(--rounded); } /* Rounded xlarge ------------------------------*/ .roundit-xlarge:not([class*="--"]), [class~="--items-rounded-xlarge"] [class^="item"], [class~="--cols-rounded-xlarge"] [class^="col"], [class~="--blocks-rounded-xlarge"] [class^="block"] { border-radius:var(--rounded-xlarge); } /* Rounded large ------------------------------*/ .roundit-large:not([class*="--"]), [class~="--items-rounded-large"] [class^="item"], [class~="--cols-rounded-large"] [class^="col"], [class~="--blocks-rounded-large"] [class^="block"] { border-radius:var(--rounded-large); } /* Rounded medium ------------------------------*/ .rounded-medium:not([class*="--"]), [class~="--items-rounded-medium"] [class^="item"], [class~="--cols-rounded-medium"] [class^="col"], [class~="--blocks-rounded-medium"] [class^="block"] { border-radius:var(--rounded-medium); } /* Rounded small ------------------------------*/ .rounded-small:not([class*="--"]), [class~="--items-rounded-small"] [class^="item"], [class~="--cols-rounded-small"] [class^="col"], [class~="--blocks-rounded-small"] [class^="block"] { border-radius:var(--rounded-small); } /* Rounded xsmall ------------------------------*/ .rounded-xsmall:not([class*="--"]), [class~="--items-rounded-xsmall"] [class^="item"], [class~="--cols-rounded-xsmall"] [class^="col"], [class~="--blocks-rounded-xsmall"] [class^="block"] { 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);} /* only botton, top, left or right ------------------------------*/ [class*="rounded-bottom"] { border-top-left-radius: 0px!important; border-top-right-radius: 0px!important; } [class*="rounded-top"] { border-bottom-left-radius: 0px!important; border-bottom-right-radius: 0px!important; } [class*="rounded-left"] { border-bottom-right-radius: 0px!important; border-top-right-radius: 0px!important; } [class*="rounded-right"] { border-bottom-left-radius: 0px!important; border-top-left-radius: 0px!important; } /*--------------------------------------------------- --- DISPLAY FLEX ///////////////////////////////// ---------------------------------------------------*/ [class*="display-flex"] { align-items:flex-start; align-content:center; display:flex; flex-flow:row wrap; justify-content:flex-start; list-style:none; width:100%; } /*--------------------------------------------------- --- FLEX FEATURES ///////////////////////////////// ---------------------------------------------------*/ [class*="flex-left-center"] { align-items:center!important; align-content:center!important; } /*-------------------------------------------------- --- DISPLAY FLEX ITEMS /////////////////////////// ---------------------------------------------------*/ [class*="display-flex-items"] { align-content:center; align-items:stretch; display:flex; flex-flow:row wrap; justify-content:center; } .display-flex-items-2 [class^="item"], .display-flex-items-3 [class^="item"], .display-flex-items-4 [class^="item"], .display-flex-items-5 [class^="item"], .display-flex-items-6 [class^="item"], .display-flex-items-7 [class^="item"], .display-flex-items-8 [class^="item"], .display-flex-items-9 [class^="item"], .display-flex-items-10 [class^="item"], .display-flex-items-11 [class^="item"], .display-flex-items-12 [class^="item"] { min-width:40px; } .display-flex-items-2 > [class^="item"]{ width:40%; } .display-flex-items-3 > [class^="item"]{ width:30%; } .display-flex-items-4 > [class^="item"]{ width:20%; } .display-flex-items-5 > [class^="item"]{ width:18%; } .display-flex-items-6 > [class^="item"]{ width:15%; } .display-flex-items-7 > [class^="item"]{ width:12%; } .display-flex-items-8 > [class^="item"]{ width:11%; } .display-flex-items-9 > [class^="item"]{ width:10%; } .display-flex-items-10 > [class^="item"]{ width:9%; } .display-flex-items-11 > [class^="item"]{ width:8%; } .display-flex-items-12 > [class^="item"]{ width:7%; } /* -------------------------------------------- 1020 --- --------------------------------------------------*/ @media only screen and (max-width:1020px) { .display-flex-items-2 > [class^="item"], .display-flex-items-3 > [class^="item"], .display-flex-items-4 > [class^="item"] { width:40%; } .display-flex-items-3 > [class^="item"], .display-flex-items-5 > [class^="item"], .display-flex-items-7 > [class^="item"], .display-flex-items-9 > [class^="item"], .display-flex-items-11 > [class^="item"]{ flex-grow:0; } .display-flex-items-5 > [class^="item"], .display-flex-items-6 > [class^="item"], .display-flex-items-7 > [class^="item"], .display-flex-items-8 > [class^="item"]{ width:20%; } .display-flex-items-9 > [class^="item"], .display-flex-items-10 > [class^="item"], .display-flex-items-11 > [class^="item"], .display-flex-items-12 > [class^="item"]{ width:15%; } } /* -------------------------------------------- 720 --- --------------------------------------------------*/ @media only screen and (max-width:720px) { .display-flex-items-2 > [class^="item"], .display-flex-items-3 > [class^="item"], .display-flex-items-4 > [class^="item"] { width:clamp(220px, 80vw, 720px); } .display-flex-items-5 > [class^="item"], .display-flex-items-6 > [class^="item"], .display-flex-items-7 > [class^="item"], .display-flex-items-8 > [class^="item"]{ width:clamp(120px, 20vw, 220px); } .display-flex-items-9 > [class^="item"], .display-flex-items-10 > [class^="item"], .display-flex-items-11 > [class^="item"], .display-flex-items-12 > [class^="item"]{ width:clamp(60px, 15vw, 160px); } } /* -------------------------------------------- 360 --- --------------------------------------------------*/ @media only screen and (max-width:360px) { [class^="display-flex-items"] [class^="item"]{ flex-grow:99; min-width:100%; width:100%; } } /*-------------------------------------------------- --- DISPLAY FLEX ITEMS //////////////////////////// ---------------------------------------------------*/ [class*="display-flex-cols"] > [class*="col"]{ min-width:300px; } /*--------------------------------------------------- --- DISPLAY GRID ///////////////////////////////// ---------------------------------------------------*/ [class*="display-grid"] { display:grid; width:100%; } /*-------------------------------------------------- --- DISPLAY-GRID-ITEMS ///////////////////////// ---------------------------------------------------*/ [class*="display-grid-items"] { align-items:stretch; display:grid; font-size:inherit; margin:0px; width:100%; } .display-grid-items-1 { grid-template-columns:repeat(auto-fill, minmax(580px, 1fr)); } .display-grid-items-2 { grid-template-columns:repeat(auto-fill, minmax(540px, 1fr)); } .display-grid-items-3 { grid-template-columns:repeat(auto-fill, minmax(500px, 1fr)); } .display-grid-items-4 { grid-template-columns:repeat(auto-fill, minmax(460px, 1fr)); } .display-grid-items-5{ grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); } .display-grid-items-6, .display-grid-items { grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); } .display-grid-items-7 { grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); } .display-grid-items-8 { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); } .display-grid-items-9 { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); } .display-grid-items-10 { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); } .display-grid-items-11 { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); } .display-grid-items-12 { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); } @media only screen and (max-width:1600px) { .display-grid-items-1 { grid-template-columns:repeat(auto-fill, minmax(540px, 1fr)); } .display-grid-items-2 { grid-template-columns:repeat(auto-fill, minmax(500px, 1fr)); } .display-grid-items-3 { grid-template-columns:repeat(auto-fill, minmax(460px, 1fr)); } .display-grid-items-4 { grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); } .display-grid-items-5{ grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); } .display-grid-items-6, .display-grid-items { grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); } .display-grid-items-7 { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); } .display-grid-items-8 { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); } .display-grid-items-9 { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); } .display-grid-items-10 { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); } .display-grid-items-11 { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); } .display-grid-items-12 { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); } } @media only screen and (max-width:1200px) { .display-grid-items-1 { grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); } .display-grid-items-2 { grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); } .display-grid-items-3 { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); } .display-grid-items-4 { grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); } .display-grid-items-5{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); } .display-grid-items-6, .display-grid-items { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); } .display-grid-items-7 { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); } .display-grid-items-8 { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); } .display-grid-items-9 { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); } .display-grid-items-10 { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); } .display-grid-items-11 { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); } .display-grid-items-12 { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); } } @media only screen and (max-width:720px) { .display-grid-items-1 { grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); } .display-grid-items-2 { grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); } .display-grid-items-3 { grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); } .display-grid-items-4 { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); } .display-grid-items-5{ grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); } .display-grid-items-6, .display-grid-items { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); } .display-grid-items-7 { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); } .display-grid-items-8 { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); } .display-grid-items-9 { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); } .display-grid-items-10 { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); } .display-grid-items-11 { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); } .display-grid-items-12 { grid-template-columns:repeat(auto-fill, minmax(80px, 1fr)); } } /*--------------------------------------------------- --- 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; } /* 1 / 1 */ .aspect-ratio-1-1, .aspect-ratio-1-1-to-post, .aspect-ratio-square, .aspect-ratio-square-to-post, .aspect-ratio-1-1-to-4-5, .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, .aspect-ratio-2-1-to-4-5, .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, .aspect-ratio-3-2-to-post, .aspect-ratio-3-2-to-4-5, .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, .aspect-ratio-3-2-to-post, [class*="aspect-ratio"][class*="-to-post"] { aspect-ratio:var(--aspect-ratio-post)!important; position:relative; } /* TO 4-5 */ .aspect-ratio-1-1-to-4-5, .aspect-ratio-square-to-4-5, .aspect-ratio-2-1-to-4-5, .aspect-ratio-3-2-to-4-5, [class*="aspect-ratio"][class*="-to-4-5"] { aspect-ratio:var(--aspect-ratio-4-5)!important; position:relative; } } /*--------------------------------------------------- --- STRECTH /////////////////////////////////////// ---------------------------------------------------*/ .stretch{ align-items: stretch!important; } /*-------------------------------------------------- --- DESFASAR ////////////////////////////////////// ---------------------------------------------------*/ .desfasar-1x-0x, .desfasar-0x-1x, .desfasar-1x-0x .inside, .desfasar-0x-1x .inside { overflow:visible!important; } .desfasar-1x-0x [class*="col"]:nth-child(1), .desfasar-1x-0x .col-1{ margin-top:100px; } .desfasar-0x-1x [class*="col"]:nth-child(2), .desfasar-0x-1x .col-2{ margin-top:100px } /*--------------------------------------------------- --- W SIZES ////////////////////////////////// ---------------------------------------------------*/ .w100, [class*="w100"] { width:100%; } .w80, [class*="w80"], [class*="w80-to-w100"] { width:80%; } .w75, [class*="w75"], [class*="w75-to-w100"] { width:75%; } .w60, [class*="w60"], [class*="w60-to-w100"] { width:60%; } .w50, [class*="w50"], [class*="w50-to-w100"] { width:50%; } .w30, [class*="w30"], [class*="w30-to-w100"] { width:30%; } .w25, [class*="w25"], [class*="w25-to-w100"] { width:25%; } .w20, [class*="w20"], [class*="w20-to-w100"] { width:20%; } .w15, [class*="w15"], [class*="w15-to-w100"] { width:15%; } @media only screen and (max-width:620px) { [class*="w15-to-w100"], [class*="w20-to-w100"], [class*="w25-to-w100"], [class*="w30-to-w100"], [class*="w50-to-w100"], [class*="w60-to-w100"], [class*="w75-to-w100"], [class*="w80-to-w100"] { width:100%;} } /*------------------------------------------------------------------------- /////////////////////////////////////////////// ---------- / END LAYOUT -------------------------------------------------------------------------*/ /* ======================================================================= ////////////////////////////////////////////////////////////////////////// STRUCTURE /////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////// ======================================================================== */ /*------------------------------------------------ --- 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; } /* 9 ----------------------------------------*/ [data-element='panel-movil'].show { z-index:9; } /* 8 ----------------------------------------*/ .block-opacity.show { z-index:8; } /* 7 ----------------------------------------*/ /* 6 ----------------------------------------*/ [data-element='header-main'], .nav-second { z-index:6; } /* 5 Default ----------------------------------------*/ [data-element='banner-main'], [data-element='banner'] { z-index:5; } [data-element='panel'], footer { z-index:5; } /* 4 ----------------------------------------*/ /* 3 ----------------------------------------*/ /* 2 ----------------------------------------*/ [data-element='panel-movil'] { z-index:2; } /* 1 ----------------------------------------*/ .block-opacity { z-index:1; } /*-------------------------------------------------- --- 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); } } /*-------------------------------------------------- --- 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[class*="container"], section[class*="container"] { width:100%; } /*------------------------------------------------------------------------ STRUCTURE - BANNERS ///////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- --- GENERAL ////////////////////////////////////// ---------------------------------------------------*/ [data-element*='banner']{ align-items:stretch; display:flex; flex-flow:row wrap; max-width:100%; overflow:hidden; position:relative; width:100%; } /* Columnas ----------------------------------------*/ [data-element*='banner'] [class*="col"] { align-content:center; align-items:center; min-width:auto; overflow:hidden; } /* Col front ----------------------------------------*/ [data-element*='banner'] [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; } /*-------------------------------------------------- --- IF PLAYED ////////////////////////////////// ---------------------------------------------------*/ /* Played all (need js) ------------------------------*/ *[data-element='banner'].played .content-box, *[data-element='banner-main'].played .content-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 620 --- --------------------------------------------------*/ @media only screen and (max-width:620px) { /* Columna ----------------------------------------*/ [data-element*='banner'] [class*="col"]{ min-height:0px; width:100%; } /* imagen position reset ----------------------------------------*/ [data-element*='banner'] [class*="-right"] > img, [data-element*='banner'] [class*="-right"] > picture img, [data-element*='banner'] [class*="-left"] > img, [data-element*='banner'] [class*="-left"] > picture img{ object-position:center center; } /*--------------------------------------------------- --- 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; } } /*--------------------------------------------------- --- CONTENT BOX /////////////////////////////////// ---------------------------------------------------*/ [class^="content-box"] { align-items:center; align-content:center; display:flex; flex-flow:row wrap; height:auto; justify-content:flex-start; z-index:10; /* width:auto; */ } [class^="content-box"] .title, [class^="content-box"] .subtitle, [class^="content-box"] > p{ padding:0px; margin:0px; } [class^="content-box"] > *:not(a){ width:100%; } /* If center ------------------------------------------*/ *[data-element='banner'].center [class^="content-box"] > *, *[data-element='banner-main'].center [class^="content-box"] > *, [class^="content-box"][class*="-center"], [class^="content-box"][class*="-center"] > *{ justify-content:center!important; text-align:center; } /* ------------------------------------- MOVIL 620 --- --------------------------------------------------*/ @media only screen and (max-width:620px) { .content-box{ max-width:100%; min-width:100%; width:100%!important; z-index:99; } .content-box > *:not(a){ width:100%; } } /*------------------------------------------------------------------------ STRUCTURE - LEVELS ///////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- --- 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; } /*-------------------------------------------------- --- PANEL FIXED ////////////////////////////////// ---------------------------------------------------*/ .panel-fixed { position:fixed!important; transform: translate(-50%, -50%); left: 50%; top: 50%; z-index:0; } /*------------------------------------------------------------------------ PANELES - INSERT-ROWS ////////////////////////////////////////////////// ------------------------------------------------------------------------*/ [class*="insert-rows"] .col-content > *:not(a) { width:100%; } /* ------------------------------------- +++ CONTENT CENTER -------------------------------------*/ [class*="insert-rows"][class*="-center"] .col-content { align-items:center; align-content:center; } /* ------------------------------------------- 820 --- --------------------------------------------------*/ @media only screen and (max-width:820px) { [class*="insert-rows"] .item-row [class^="col"]:not([class*="color"]), [class*="insert-rows"] .item-row [class^="col"]:nth-child(1):not([class*="color"]), [class*="insert-rows"] .item-row [class^="col"]:nth-child(2):not([class*="color"]){ width:40%; } } /* ------------------------------------------- 620 --- --------------------------------------------------*/ @media only screen and (max-width:620px) { [class*="insert-rows"] .item-row [class^="col"]:not([class*="color"]), [class*="insert-rows"] .item-row [class^="col"]:nth-child(1):not([class*="color"]), [class*="insert-rows"] .item-row [class^="col"]:nth-child(2):not([class*="color"]){ width:100%; } } /*------------------------------------------------------------------------ PANLES ///////////////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- --- GALERIA 1 //////////////////////////////////// ---------------------------------------------------*/ .panel-galeria-1 .item-row{ align-items: stretch; } /* col-1 ----------------------------------------*/ .panel-galeria-1 .item-row .col-1 .block-img{ aspect-ratio:1 / 1; } /* col-2 ----------------------------------------*/ .panel-galeria-1 .item-row .col-2 .item-card{ width:60%; } .panel-galeria-1 .item-row .col-2 .block-img{ aspect-ratio:2 / 1; } /* Break ----------------------------------------*/ @media only screen and (max-width:820px) { .panel-galeria-1 .item-row .col-1{ width:100%; } .panel-galeria-1 .item-row .col-2 .item-card{ width:20%; } .panel-galeria-1 .item-row .col-2 .block-img{ aspect-ratio:4 / 5; } } @media only screen and (max-width:320px) { .panel-galeria-1 .item-row .col-1 .block-img{ aspect-ratio:4 / 5; } .panel-galeria-1 .item-row .col-2 .item-card{ width:60%; } .panel-galeria-1 .item-row .col-2 .block-img{ aspect-ratio:1 / 1; } } /*-------------------------------------------------- --- BLOQUE //////////////////////////////////////// ---------------------------------------------------*/ /*-------------------------------------------------- --- COLUMNA DEFAULT ///////////////////////////// ---------------------------------------------------*/ [class^="col"], [class^="block"] { 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; width:20%; } [class^="col"] { min-width:100px; } [class^="block"] { min-width:50px; } /* Slugs ---------------------------------------- -content = contenido -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"]:not([class*="to-full"]), [class^="block"][class*="-full"]:not([class*="to-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; } /*-------------------------------------------------- --- DOS COLUMNAS 50% - 50% ///////////////////// ---------------------------------------------------*/ /* Por default si tenemos dos columas mediran lo mismo, inlcuso hasta 5 */ /*-------------------------------------------------- --- DOS COLUMNAS 20% - 80% ///////////////////// ---------------------------------------------------*/ .w20-80 > [class^="item"] > [class*="col"]:nth-child(1), .w20-80 > [class^="item"] > [class*="block"]:nth-child(1), .w20-80 > [class^="item"] > .col-1, .w20-80 > [class^="item"] > .block-1, .w20-80 > [class*="col"]:nth-child(1), .w20-80 > [class*="block"]:nth-child(1), .w20-80 > .col-1, .w20-80 > .block-1{ width:10%; } .wauto-80 > .col-1 {flex-grow:0; width: fit-content;} .w20-80 > [class^="item"] > [class*="col"]:nth-child(2), .w20-80 > [class^="item"] > [class*="block"]:nth-child(2), .w20-80 > [class^="item"] > .col-2, .w20-80 > [class^="item"] > .block-2, .w20-80 > [class*="col"]:nth-child(2), .w20-80 > [class*="block"]:nth-child(2), .w20-80 > .col-2, .w20-80 > .block-2, .wauto-80 > .col-2, .wauto-80 > .block-2{ width:40%; } .w80-20 > [class^="item"] > [class*="col"]:nth-child(1), .w80-20 > [class^="item"] > [class*="block"]:nth-child(1), .w80-20 > [class^="item"] > .col-1, .w80-20 > [class^="item"] > .block-1, .w80-20 > [class*="col"]:nth-child(1), .w80-20 > [class*="block"]:nth-child(1), .w80-20 > .col-1, .w80-20 > .block-1, .w80-auto > .col-1, .w80-auto > .block-1{ width:40%; } .w80-20 > [class^="item"] > [class*="col"]:nth-child(2), .w80-20 > [class^="item"] > [class*="block"]:nth-child(2), .w80-20 > [class^="item"] > .col-2, .w80-20 > [class^="item"] > .block-2, .w80-20 > [class*="col"]:nth-child(2), .w80-20 > [class*="block"]:nth-child(2), .w80-20 > .col-2, .w80-20 > .block-2{ width:10%; } .w80-auto > .col-2 {flex-grow:0; width: fit-content;} /*-------------------------------------------------- --- DOS COLUMNAS 30% - 70% ///////////////////// ---------------------------------------------------*/ .w30-70 > [class^="item"] > [class*="col"]:nth-child(1), .w30-70 > [class^="item"] > [class*="block"]:nth-child(1), .w30-70 > [class^="item"] > .col-1, .w30-70 > [class^="item"] > .block-1, .w30-70 > [class*="col"]:nth-child(1), .w30-70 > [class*="block"]:nth-child(1), .w30-70 > .col-1, .w30-70 > .block-1{ width:15%; } .wauto-70 > .col-1 {flex-grow:0; width: fit-content;} .w30-70 > [class^="item"] > [class*="col"]:nth-child(2), .w30-70 > [class^="item"] > [class*="block"]:nth-child(2), .w30-70 > [class^="item"] > .col-2, .w30-70 > [class^="item"] > .block-2, .w30-70 > [class*="col"]:nth-child(2), .w30-70 > [class*="block"]:nth-child(2), .w30-70 > .col-2, .w30-70 > .block-2, .wauto-70 > .col-2, .wauto-70 > .block-2{ width:35%; } .w70-30 > [class^="item"] > [class*="col"]:nth-child(1), .w70-30 > [class^="item"] > [class*="block"]:nth-child(1), .w70-30 > [class^="item"] > .col-1, .w70-30 > [class^="item"] > .block-1, .w70-30 > [class*="col"]:nth-child(1), .w70-30 > [class*="block"]:nth-child(1), .w70-30 > .col-1, .w70-30 > .block-1, .w70-auto > .col-1, .w70-auto > .block-1{ width:35%; } .w70-30 > [class^="item"] > [class*="col"]:nth-child(2), .w70-30 > [class^="item"] > [class*="block"]:nth-child(2), .w70-30 > [class^="item"] > .col-2, .w70-30 > [class^="item"] > .block-2, .w70-30 > [class*="col"]:nth-child(2), .w70-30 > [class*="block"]:nth-child(2), .w70-30 > .col-2, .w70-30 > .block-2{ width:15%; } .w70-auto > .col-2 {flex-grow:0; width: fit-content;} /*-------------------------------------------------- --- DOS COLUMNAS 40% - 60% ///////////////////// ---------------------------------------------------*/ .w40-60 > [class^="item"] > [class*="col"]:nth-child(1), .w40-60 > [class^="item"] > [class*="block"]:nth-child(1), .w40-60 > [class^="item"] > .col-1, .w40-60 > [class^="item"] > .block-1, .w40-60 > [class*="col"]:nth-child(1), .w40-60 > [class*="block"]:nth-child(1), .w40-60 > .col-1, .w40-60 > .block-1{ width:20%!important; } .wauto-60 > .col-1 {flex-grow:0; width: fit-content;} .w40-60 > [class^="item"] > [class*="col"]:nth-child(2), .w40-60 > [class^="item"] > [class*="block"]:nth-child(2), .w40-60 > [class^="item"] > .col-2, .w40-60 > [class^="item"] > .block-2, .w40-60 > [class*="col"]:nth-child(2), .w40-60 > [class*="block"]:nth-child(2), .w40-60 > .col-2, .w40-60 > .block-2, .wauto-60 > .col-2, .wauto-60 > .block-2{ width:30%!important; } .w60-40 > [class^="item"] > [class*="col"]:nth-child(1), .w60-40 > [class^="item"] > [class*="block"]:nth-child(1), .w60-40 > [class^="item"] > .col-1, .w60-40 > [class^="item"] > .block-1, .w60-40 > [class*="col"]:nth-child(1), .w60-40 > [class*="block"]:nth-child(1), .w60-40 > .col-1, .w60-40 > .block-1, .w60-auto > .col-1, .w60-auto > .block-1{ width:30%; } .w60-40 > [class^="item"] > [class*="col"]:nth-child(2), .w60-40 > [class^="item"] > [class*="block"]:nth-child(2), .w60-40 > [class^="item"] > .col-2, .w60-40 > [class^="item"] > .block-2, .w60-40 > [class*="col"]:nth-child(2), .w60-40 > [class*="block"]:nth-child(2), .w60-40 > .col-2, .w60-40 > .block-2{ width:20%; } .w60-auto > .col-2 {flex-grow:0; width: fit-content;} /*-------------------------------------------------- --- GRUPO ///////////////////////////////////// ---------------------------------------------------*/ .group, .grupo { display:flex; flex-flow:row wrap; gap:var(--gap-inside); width:100%; } /*-------------------------------------------------- --- INSIDE DEFAULT ////////////////////////////// ---------------------------------------------------*/ * .inside{ align-items:center; display:flex; flex-flow:row wrap; justify-content:center; height:auto; overflow:hidden; position:relative; width:100%; } /*-------------------------------------------------- --- ARTICLE DEFAULT /////////////////////////// ---------------------------------------------------*/ article { display:flex; flex-flow:row wrap; height:auto; width:100%; } /*--------------------------------------------------- --- DIV CENTER /////////////////////////////////// ---------------------------------------------------*/ div.center { display:flex; flex-flow:row wrap; justify-content:center; } /* ======================================================================= ////////////////////////////////////////////////////////////////////////// COMPONENTS /////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////// ======================================================================== */ /*------------------------------------------------------------------------ COMPONENTS - ITEMS ////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /*-------------------------------------------------- --- ITEMS ALL //////////////////////////////// ---------------------------------------------------*/ /* Item ----------------------------------------*/ * [class^="item"]:not([class*="items"]) { align-items:stretch; align-content:flex-start; display:flex; flex-flow:row wrap; flex-grow:99; height:auto; overflow:hidden; position:relative; max-width:100%; text-decoration:none; } /* IF: item is anchor */ * a[class^="item"]:not([class*="items"]):hover { box-shadow:0px 0px 6px rgba(0, 0, 0, 0.2); text-decoration:none; } /*--------------------------------------------------- +++ ITEMS-ZIGZAG ---------------------------------------------------*/ /* ODD */ [class~="--items-zigzag"] [class^="item"]:nth-child(odd) [class*="col"]:nth-child(1) { order:1; } [class~="--items-zigzag"] [class^="item"]:nth-child(odd) [class*="col"]:nth-child(2){ order:2; } /* EVEN */ [class~="--items-zigzag"] [class^="item"]:nth-child(even) [class*="col"]:nth-child(1) { order:2; } [class~="--items-zigzag"] [class^="item"]:nth-child(even) [class*="col"]:nth-child(2) { order:1; } /*-------------------------------------------------- --- ITEMS CARDS /////////////////////////////// ---------------------------------------------------*/ [class*="item-card"]{ gap:var(--gap); } [class*="item-card"] .block{ z-index:2; } [class*="item-card"].block-img{ z-index:1; } [class*="item-card"], [class*="item-card"] > [class*="block"]{ transition:var(--add-transition-fast); } /* Block ----------------------------------------*/ [class*="item-card"] [class^="block"]{ align-items:center!important; align-content: center!important; display:flex; flex-flow:row wrap; justify-content:flex-start; flex-grow:99; height:auto; width:100%; } [class*="item-card"] [class^="block-center"]{ justify-content:center; } [class*="item-card"] [class^="block"] > *:where(p, .title, .subtitle, .link){ line-height:1.4em; padding:0px; width:100%; } [class*="item-card"] [class*="title"]{ line-height:1.2em; } /*-------------------------------------------------- --- CARDS BASE //////////////////////////////////// ---------------------------------------------------*/ [class*="card-base"], [class*="--cards-base"] .item-card { padding:var(--padding-small); } [class*="card-base"] [class*="block"], [class*="--cards-base"] .item-card [class*="block"] { justify-content: flex-start; width:100%; } /*-------------------------------------------------- --- ITEMS CARDS CENTER /////////////////////////// ---------------------------------------------------*/ [class*="card"][class*="-center"], [class*="card"][class*="-center"] > *, [class*="card"][class*="-center"] > * > *, [class*="card"][class*="-center"] > * > * > *, [class*="--cards"][class*="-center"], [class*="--cards"][class*="-center"] > *, [class*="--cards"][class*="-center"] > * > *, [class*="--cards"][class*="-center"] > * > * > * { justify-content: center!important; text-align:center!important; } /*-------------------------------------------------- +++ CARD HORIZONTAL ---------------------------------------------------*/ .card-horizontal, [class~="--cards-horizontal"] .item-card { align-items:stretch; justify-content:flex-start; gap:0px; padding:0px; } .card-horizontal .block-img, [class~="--cards-horizontal"] .item-card .block-img { align-content:center; flex-grow:0; justify-content:center; min-height:100%; min-width:100px; width:fit-content; } .card-horizontal .block-content, [class~="--cards-horizontal"] .item-card [class*="block-content"] { align-items:center!important; align-content:center!important; padding-block:var(--padding-small); padding-inline:var(--padding-xsmall); width:20%; } /*-------------------------------------------------- +++ CARD POST ---------------------------------------------------*/ .card-post [class*="block-content"], [class~="--cards-post"] .item-card [class*="block-content"] { padding:var(--padding-xsmall); width:100%; } /*-------------------------------------------------- +++ CARD POST HORIZONTAL ---------------------------------------------------*/ .card-post-horizontal, [class~="--cards-post-horizontal"] .item-card { align-items:stretch; justify-content:flex-start; padding:0px; } .card-post-horizontal .block-img, [class~="--cards-post-horizontal"] .item-card .block-img { align-content:flex-start; min-width:100px; } .card-post-horizontal [class*="block-content"], [class~="--cards-post-horizontal"] .item-card [class*="block-content"] { padding:var(--padding-small); } /*-------------------------------------------------- +++ CARD COVER ---------------------------------------------------*/ .card-cover > [class*="block-content"], [class*="--cards-cover"] .item-card > [class*="block-content"] { padding:var(--padding-medium); position:absolute; bottom:0px; left:0px; right:0px; top:0px; z-index:9; } /*-------------------------------------------------- --- 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 ///////////////////////////////////////////// ------------------------------------------------------------------------*/ @media only screen and (max-width:620px) { /*--------------------------------------------------- --- IS TOP //////////////////////////////////////// ---------------------------------------------------*/ [class*="is-top"]{ order:1; } :not([class*="is-top"]) { order: 2; } /*--------------------------------------------------- --- IETMS-TO-POST //////////////////////////////// ---------------------------------------------------*/ [class*="to-post"] [class*="col"]:not([class*="color"]), [class*="to-post"] [class*="col"]:nth-child(-n+4):not([class*="color"]), [class*="items-to-post"] > [class^="item"] [class*="col"]:not([class*="color"]), [class*="items-to-post"] > [class^="item"] [class*="col"]:nth-child(-n+4):not([class*="color"]){ width:100%!important; position:relative; bottom:auto; left:auto; right:auto; top:auto; } [class*="to-post"] [class*="col-content"], [class*="items-to-post"] > [class^="item"] [class*="col-content"]{ height:auto; order:2!important; } [class*="to-post"] [class*="is-top"], [class*="items-to-post"] > [class^="item"] [class*="is-top"]{ aspect-ratio:var(--aspect-ratio-3-2); min-height:var(--height-auto); height:auto; order:1!important } /*--------------------------------------------------- --- IETMS-TO-COVER //////////////////////////////// ---------------------------------------------------*/ [class*="to-cover"] [class*="col"], [class*="to-cover"] [class*="col"]:nth-child(-n+4), [class*="items-to-cover"] > [class^="item"] [class*="col"], [class*="items-to-cover"] > [class^="item"] [class*="col"]:nth-child(-n+4){ width:100%!important; } [class*="to-post"] [class*="col-img"], [class*="to-post"] [class*="col-img"]:nth-child(-n+4), [class*="items-to-post"] > [class^="item"] [class*="col-img"], [class*="items-to-post"] > [class^="item"] [class*="col-img"]:nth-child(-n+4){ position:relative; bottom:auto; left:auto; right:auto; top:auto; z-index:1; } [class*="to-cover"] [class*="col-content"], [class*="items-to-cover"] > [class^="item"] [class*="col-content"]{ /*background-color:transparent; afecta a otros*/ height:auto; order:2!important; position:absolute!important; bottom:0px; left:0px; right:0px; top:0px; z-index:9!important; } [class*="to-cover"] [class*="is-top"], [class*="items-to-cover"] > [class^="item"] [class*="is-top"]{ aspect-ratio:var(--aspect-ratio-3-2)!important; min-height:var(--height-auto); height:auto; order:1!important } /*--------------------------------------------------- --- IETM TO POST 3-2 ---------------------------------------------------*/ /* item to post and item-top-cover default */ /*--------------------------------------------------- --- ITEM TO SQUARE ---------------------------------------------------*/ [class*="to-post-square"] [class*="is-top"], [class*="items-to-post-square"] > [class*="item"] [class*="is-top"], [class*="to-cover-square"] [class*="is-top"], [class*="items-to-cover-square"] > [class*="item"] [class*="is-top"]{ aspect-ratio:var(--aspect-ratio-square)!important; } /*--------------------------------------------------- --- IETM TO 4-5 ---------------------------------------------------*/ [class*="to-post-4-5"] [class*="is-top"], [class*="items-to-post-4-5"] > [class*="item"] [class*="is-top"], [class*="to-cover-4-5"] [class*="is-top"], [class*="items-to-cover-4-5"] > [class*="item"] [class*="is-top"]{ aspect-ratio:var(--aspect-ratio-4-5)!important; } /*--------------------------------------------------- --- IETM TO POST 9-16 ---------------------------------------------------*/ [class*="to-post-9-16"] [class*="is-top"], [class*="items-to-post-9-16"] > [class*="item"] [class*="is-top"], [class*="to-cover-9-16"] [class*="is-top"], [class*="items-to-cover-9-16"] > [class*="item"] [class*="is-top"]{ aspect-ratio:var(--aspect-ratio-9-16)!important; } /*--------------------------------------------------- --- IETM TO POST AUTO ---------------------------------------------------*/ [class*="to-post-auto"] [class*="is-top"], [class*="items-to-post-auto"] > [class*="item"] [class*="is-top"], [class*="to-cover-auto"] [class*="is-top"], [class*="items-to-cover-auto"] > [class*="item"] [class*="is-top"]{ aspect-ratio:auto!important; } } /*--------------------------------------------------- --- TO-FULL //////////////////////////////////////// ---------------------------------------------------*/ @media only screen and (max-width:1020px) { .to-full-1020, [class~="--items-to-full-1020"] [class^="item"], [class~="--cols-to-full-1020"] [class^="col"], [class~="--groups-to-full-1020"] [class^="group"]{ min-width:100%; } } @media only screen and (max-width:820px) { .to-full-820, [class~="--items-to-full-820"] [class^="item"], [class~="--cols-to-full-820"] [class^="col"], [class~="--groups-to-full-820"] [class^="group"]{ min-width:100%; } } @media only screen and (max-width:720px) { .to-full-720, [class~="--items-to-full-720"] [class^="item"], [class~="--cols-to-full-720"] [class^="col"], [class~="--groups-to-full-720"] [class^="group"]{ min-width:100%; } } @media only screen and (max-width:620px) { .to-full-620, [class~="--items-to-full-620"] [class^="item"], [class~="--cols-to-full-620"] [class^="col"], [class~="--groups-to-full-620"] [class^="group"]{ min-width:100%; } } @media only screen and (max-width:520px) { .to-full-520, [class~="--items-to-full-520"] [class^="item"], [class~="--cols-to-full-520"] [class^="col"], [class~="--groups-to-full-520"] [class^="group"]{ min-width:100%; } } @media only screen and (max-width:420px) { .to-full-420, [class~="--items-to-full-420"] [class^="item"], [class~="--cols-to-full-420"] [class^="col"], [class~="--groups-to-full-420"] [class^="group"]{ min-width:100%; } } /*------------------------------------------------------------------------ STRUCTURE - MAS ///////////////////////////////////////////////////////// ------------------------------------------------------------------------*/ /* Flexbox al centro ----------------------------------------*/ div.center, section.center{ justify-content:center!important; } /* Anchos ----------------------------------------*/ .w100, [class~="w100"] { width:100%; } .w80, [class~="w80"] { width:80%; } .w75, [class~="w75"] { width:75%; } .w60, [class~="w60"] { width:60%; } .w50, [class~="w50"] { width:50%; } .w30, [class~="w30"] { width:30%; } .w25, [class~="w25"] { width:25%; } .w20, [class~="w20"] { width:20%; } .w15, [class~="w15"] { width:15%; } .min-300 { min-width:300px; } .min-400 { min-width:400px; } .min-500 { min-width:500px; } /* If header fixed, First element ------------------------------*/ @media only screen and (max-width:620px) { .first{ margin-top:62px; /* = Tamaño de header movil */ } } /*------------------------------------------------------------------------- /////////////////////////////////////////////// ---------- / END STRUCTURE -------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////// ELEMENTOS //////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*-------------------------------------------------- --- TITLES OK /////////////////////////////////// ---------------------------------------------------*/ [class^="title"]:not([class*="--titles"]), [class^="subtitle"]:not([class*="--subtitles"]){ display:flex!important; text-wrap: pretty; } :where( [class^="title"], [class^="subtitle"]):not([class*="-main"], [class*="-1"], [class*="-2"], [class*="-3"]) { font-size: 1em; } /* Left ----------------------------------------*/ [class*="title-left"], [class^="title-left-to-center"], [class^="title-left-to-right"]{ justify-content:left; text-align:flex-start; } [class*="--titles-left"] [class^="title"], [class*="--titles-left-to-center"] [class^="title"], [class*="--titles-left-to-right"] [class^="title"]{ justify-content:left; text-align:flex-start; } /* Center ----------------------------------------*/ [class*="title-center"], [class^="title-center-to-left"], [class^="title-center-to-right"]{ justify-content:center; text-align:center; } [class*="--titles-center"] [class^="title"], [class^="--titles-center-to-left"] [class^="title"], [class^="--titles-center-to-right"] [class^="title"]{ justify-content:center; text-align:center; } /* Right ----------------------------------------*/ [class^="title-right"], [class^="title-right-to-center"], [class^="title-right-to-left"]{ justify-content:flex-end; text-align:right; } [class*="--titles-right"] [class^="title"], [class*="--titles-right-to-center"] [class^="title"], [class*="--titles-right-to-left"] [class^="title"]{ justify-content:flex-end; text-align:right; } /* TO: ----------------------------------------*/ @media only screen and (max-width:620px) { [class*="title-center-to-left"], [class*="title-right-to-left"] { justify-content:flex-start!important; text-align:left!important; } [class*="--titles-center-to-left"] [class^="title"], [class*="--titles-right-to-left"] [class^="title"]{ justify-content:flex-start!important; text-align:left!important; } [class*="title-right-to-center"], [class*="title-left-to-center"] { justify-content:center!important; text-align:center!important; } [class*="--titles-right-to-center"] [class^="title"], [class*="--titles-left-to-center"] [class^="title"]{ justify-content:center!important; text-align:center!important; } [class*="title-center-to-right"], [class*="title-left-to-right"] { justify-content:flex-end!important; text-align:right!important; } [class*="--titles-center-to-right"] [class^="title"], [class*="--titles-left-to-right"] [class^="title"]{ justify-content:flex-end!important; text-align:right!important; } } /*--------------------------------------------------- --- LISTAS //////////////////////////////////////// ---------------------------------------------------*/ ul[class^="list"], ol[class^="list"] { list-style-position:outside; padding-left:1.2em; width:100%; } ul[class^="list"] li, ol[class^="list"] li{ float: none; height: auto; line-height:1.6em; margin: 0px; padding: 0px; width:100%; } ul[class^="list"] li { list-style:disc; } ol[class^="list"] li { list-style:decimal; } ul[class^="list"] li a, ol[class^="list"] li a{ color:inherit; text-decoration: none; } /* Simple (sin viñetas) ----------------------------------------*/ ul.list-simple, ol.list-simple{ padding-left:0px; } ul.list-simple li, ol.list-simple li{ list-style:none; } /*--------------------------------------------------- --- CONTENT ////////////////////////////////////// --------------------------------------------------- /* Content ---------------------------------------- [class*="content"]:not(.col-):not([class*="-items"]), [class*="content"]:not(.col-):not([class*="-items"])[class*="-to-none"] { gap:var(--gap-small); } /* Alineaciones ---------------------------------------- [class*="content"][class*="-center"] > *:where(p, .title, .subtitle, .link), [class*="content"][class*="-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; } } */ /*--------------------------------------------------- --- LIST ICON ////////////////////////////////////// ---------------------------------------------------*/ ul[class^="list-icon"]{ align-items:flex-start; display:flex; flex-flow:column wrap; gap:var(--gap-small); justify-content:flex-start; list-style:none; padding:0px; width:100%; } ul[class^="list-icon"] li{ align-items:center; align-content:center; display:flex; gap:var(--gap-small); flex-wrap:wrap; height:auto; justify-content:flex-start; list-style:none; width:100%; } ul[class^="list-icon"] li .svg-icon{ aspect-ratio:1 / 1!important; } ul[class^="list-icon"] li *:where(span, i, b, p, a){ display:block; font-size:1rem; flex-grow:9; text-align:left; text-decoration:none; width:50%; } ul.list-icon li *:where(span, i, b, p, a), ul.list-icon-medium li *:where(span, i, b, p, a), ul.list-icon-small li *:where(span, i, b, p, a), ul.list-icon-xsamll li *:where(span, i, b, p, a) { font-size:1rem; } ul.list-icon-large li *:where(span, i, b, p, a){ font-size:1.2rem; } ul.list-icon-xlarge li *:where(span, i, b, p, a){ font-size:1.4rem; } /*--------------------------------------------------- --- 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; } /*-------------------------------------------------- --- 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; } /* Bottom ----------------------------------------*/ .img-background-bottom > picture { align-items: flex-end; align-content:flex-end; display:flex; } .img-background-bottom > picture.background > img, .img-background-bottom > img.background, .img-background-bottom > svg.background { height:auto; width:100%!important; } /*-------------------------------------------------- --- IMG-COVER /////////////////////////////////// ---------------------------------------------------*/ [class*="img-cover"] > picture, [class*="img-cover"] > video{ 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{ height:100%; width:100%; object-fit:cover; } [class*="img-cover"] > video{ object-fit:cover; } /*-------------------------------------------------- --- IMG-CONTAIN ///////////////////////////////// ---------------------------------------------------*/ [class*="img-contain"] > picture{ height:auto; overflow:hidden; position:absolute; bottom:0px; left:0px; right:0px; top:0px; width:auto; z-index:1; } [class*="img-contain"] > picture img, [class*="img-contain"] > img, [class*="img-contain"] > video{ height:100%; width:100%; object-fit:contain; } [class*="img-contain"][class*="-left"] > picture img, [class*="img-contain"][class*="-left"] > img, [class*="img-contain"][class*="-left"] > video{ object-position:left center; } [class*="img-contain"][class*="-right"] > picture img, [class*="img-contain"][class*="-right"] > img, [class*="img-contain"][class*="-right"] > video{ object-position:right center; } /* TO: center ----------------------------------------*/ @media only screen and (max-width:620px) { [class*="img-contain"][class*="-to-center"] > picture img, [class*="img-contain"][class*="-to-center"] > img, [class*="img-contain"][class*="-to-center"] > video{ object-position:center center; } } /*-------------------------------------------------- --- IMG-BLOCK /////////////////////////////////// ---------------------------------------------------*/ [class*="img-block"] > picture{ height:auto; overflow:hidden; position:relative; bottom:auto; left:auto; right:auto; top:auto; width:auto; z-index:1; } [class*="img-block"] > picture img, [class*="img-block"] > img, [class*="img-block"] > svg { width:100%!important; } /*-------------------------------------------------- --- IMG ICON PROFILE ///////////////////////////// ---------------------------------------------------*/ [class^="img-icon"]{ align-items:center; align-content:center; 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-icon-auto, .img-icon-profile-auto { width:auto; } .img-icon-xlarge, .img-icon-profile-xlarge, ul.list-icon-xlarge li .svg-icon{ height: clamp(100px, 7vw, 180px); } .img-icon-large, .img-icon-profile-large, ul.list-icon-large li .svg-icon{ height: clamp(80px, 6vw, 140px); } .img-icon, .img-icon-profile, ul.list-icon li .svg-icon { height: clamp(50px, 5vw, 100px); } .img-icon-medium, .img-icon-profile-medium, ul.list-icon-medium li .svg-icon { height: clamp(40px, 4vw, 80px); } .img-icon-small, .img-icon-profile-small, ul.list-icon-small li .svg-icon { height: clamp(30px, 3vw, 60px); } .img-icon-xsmall, .img-icon-profile-xsmall, ul.list-icon-xsmall li .svg-icon { height: clamp(20px, 2vw, 40px); } [class*="img-icon-profile"], ul[class*="list-icon-profile"] .svg-icon{ border-radius:50%; } [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; } /*--------------------------------------------------- ---DIV BOX /////////////////////////////////////// ---------------------------------------------------*/ div.box { background-color:var(--color-white); align-items:flex-start; display:flex; flex-grow:99; flex-wrap:wrap; flex-direction:row; justify-content:flex-start; min-height:50px; height: auto; transition:all 0.12s; width:100%; } /*--------------------------------------------------- --- TAB BOX /////////////////////////////////////// ---------------------------------------------------*/ [class*="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 */ } [class*="tab-box"] > input[type=radio], [class*="tab-box"] > input[type=checkbox] { display: none; } [class*="tab-box"] > label { display:flex; 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, #tab30:checked ~ #content30, #tab31:checked ~ #content31, #tab32:checked ~ #content32, #tab33:checked ~ #content33, #tab34:checked ~ #content34, #tab35:checked ~ #content35, #tab36:checked ~ #content36{ 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) { [class*="tab-box"] > label { height:36px; line-height:36px; padding:0px 12px!important; width:100%; }} /* SET: Diseño ------------------------------*/ /* Pestaña */ [class*="tab-box"] > label { border-top:1px solid transparent;/* set */ border-bottom:1px solid transparent;/* set */ font-size:1em; gap:4px; text-align:center; text-transform:uppercase; } /* Pestaña hover */ [class*="tab-box"] > label:hover { color:var(--color-main);/*set*/ opacity:0.6; cursor: pointer; } /* Pestaña actva */ [class*="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 */ [class*="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; } [class*="tab-box"] > label:hover .svg-icon{ border:1px solid var(--color-main); fill:var(--color-main); } [class*="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 ------------------------------*/ [class*="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) { [class*="tab-box"].small > label { height:26px; line-height:26px; padding:0px 4px!important; width:auto; }} /* Pestaña actva */ [class*="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 */ } [class*="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 */ [class*="tab-box"].categories { gap:4px; } [class*="tab-box"].categories div.box { gap:initial; } [class*="tab-box"].categories .tab-contenido{ border-top:0px!important; /* set */ } /*--------------------------------------------------- --- TAB BOX ACCORDEON /////////////////////////////// ---------------------------------------------------*/ [class*="tab-box"][class*="-accordeon"] { } [class*="tab-box"][class*="-accordeon"] > label { display:flex; 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:100%!important; } /*--------------------------------------------------- --- MODALS ///////////////////////////////////////// ---------------------------------------------------*/ /* ---------------------------------------- -------------------------- MODAL SIMPLE --- -----------------------------------------*/ /* Container (ancho) ------------------------------*/ .modal, .modal .modal-container{ height:auto!important; max-width:820px!important; } /* Title ------------------------------*/ .modal .title{ align-items:center; display:flex; flex-flow:row wrap; font-weight:bold; height: auto; justify-content:center; padding:20px 5vw; text-transform: uppercase; width:100%!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%; } /*--------------------------------------------------- --- IS-ABSOLUTE //////////////////////////////////// ---------------------------------------------------*/ [class*="is-absolute"]{ position:absolute; bottom:auto; left:auto; top:auto; right:auto; } .is-absolute-all{ bottom:0px!important; left:0px!important; right:0px!important; top:0px!important; width:100%; } .is-absolute-bottom{ bottom:0px!important; } .is-absolute-left{ left:0px!important; } .is-absolute-right{ right:0px!important; } .is-absolute-top{ top:0px!important; } /*--------------------------------------------------- --- 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; } /*--------------------------------------------------- --- ELEMENTO FLOTANTE ///////////////////////////// ---------------------------------------------------*/ .elemento-flotante { visibility: hidden; opacity:0.0; z-index:1; position:fixed; right:20px; bottom:20px; 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; } /*------------------------------------------------ --- TABLES ////////////////////////////////////// ------------------------------------------------*/ ul.table-rows{ background-color:var(--color-white); display:flex; flex-direction:row; flex-wrap:wrap; justify-content: flex-start; list-style: none; font-size:0.8rem; height: auto; margin:0px 0px 0px 0px; overflow:hidden; padding:0px 0px; width:100%; } ul.table-rows > div{ border:1px solid red; display:flex; flex-direction:row; flex-wrap:wrap; justify-content: flex-start; list-style: none; font-size:1em; height: auto; padding:0px 0px; width:100%; } /* Row subtitles ------------------------------*/ ul.table-rows li.row.subtitle, ul.table-rows li.row.subtitle .inside{ min-height:40px; } ul.table-rows li.subtitle .inside > *{ font-size:1em; text-transform:uppercase; } /* Row ------------------------------*/ ul.table-rows li.row{ background-color:var(--color-white); list-style:none; height:auto; line-height:1.1em; margin:0px 0px; padding:0px 0px; /* solo aumentar si no hay un etiqueta adentro */ text-indent:8px; width:100%; } ul.table-rows li.row:nth-child(odd){ background-color:var(--color-neutro-softer); } ul.table-rows li.row:nth-child(even){ background-color:var(--color-white); } ul.table-rows li.row > a:hover { background-color:var(--color-main-softer); } /* DIV or A inside ------------------------------*/ ul.table-rows li.row .inside{ align-items:stretch; color:inherit; display:flex; flex-direction:row; flex-wrap:wrap; gap:var(--gap-small); justify-content:flex-start; font-size:1em; font-weight:initial; height:auto; margin:0px; padding-block:clamp(4px, 2vw, 10px); padding-inline:clamp(4px, 2vw, 10px); text-decoration:none; text-align:left; text-indent:0px; width:100%; } /* Row Items ------------------------------*/ ul.table-rows li.row .inside div{ align-items:center; display:flex; flex-flow:row wrap; flex-grow:99; gap:var(--gap-inside); justify-content:flex-start; height:auto; text-indent:0px; position:relative; padding-left:0px; /*width:100%; Por default medira el 100% */ } /* primero */ ul.table-rows li.row .inside div:first-child{ padding-left:0px; } /* Item Align-right ------------------------------*/ ul.table-rows li.row .inside div.align-right { justify-content:flex-end; } /* Icon ------------------------------*/ ul.table-rows li.row .inside div > .svg-icon:not(.button) , ul.table-rows li.row .inside div > svg:not(.button) , ul.table-rows li.row .inside div > img:not(.button){ display: block; flex-wrap: wrap; background-color:var(--color-neutro-softer); border-radius:50%; border:1px solid var(--color-neutro-soft); fill:var(--color-neutro); height:20px!important; padding:0px; width:20px!important; } /* inputs ------------------------------*/ ul.table-rows li.row .inside div > input[type=text]{ max-width:100%; min-width:auto!important; width:100%; } /* --------------------------------------- ------------------- ROW ITEMS DEFAULT --- ----------------------------------------*/ ul.table-rows .row .folio { max-width:60px; min-width:40px; width:1%; } ul.table-rows .row .date-short { min-width:80px; max-width:120px; width:1%; } ul.table-rows .row .price { min-width:80px; width:2%; } ul.table-rows .row .date { min-width:120px; width:2%; } ul.table-rows .row .category { min-width:160px; width:2%; } ul.table-rows .row .name { min-width:220px; width:4%; } ul.table-rows .row .email { min-width:220px; width:3%; } ul.table-rows .row .description { min-width:220px; width:3%; } ul.table-rows .row .options { min-width:220px; width:3%; } ul.table-rows-new .row .space-20, ul.table-rows-new .row .space-30, ul.table-rows-new .row .space-40, ul.table-rows-new .row .space-50, ul.table-rows-new .row .space-60, ul.table-rows-new .row .space-70, ul.table-rows-new .row .space-80, ul.table-rows-new .row .space-90 { flex-grow:0px!important; } ul.table-rows-new .row .space-20 { width:20px; } ul.table-rows-new .row .space-30 { width:30px; } ul.table-rows-new .row .space-40 { width:40px; } ul.table-rows-new .row .space-50 { width:50px; } ul.table-rows-new .row .space-60 { width:60px; } ul.table-rows-new .row .space-70 { width:70px; } ul.table-rows-new .row .space-80 { width:80px; } ul.table-rows-new .row .space-90 { width:80px; } /*-------------------------------------------------------------------------- ///////////////////////////////////////////////// ---------- / END ELEMENTOS --------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- //////////////////////////////////////////////////////////////////////////// PANELES ////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// -------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- /////////////////////////////////////////////////// ---------- / 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:0.8rem; 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; } 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{ justify-content:flex-start; min-width:180px!important; } footer .col .logotipo{ display:block; height:auto; width:120px; } footer .col .logotipo img{ height:auto; width:100%; } footer .col { container-type: inline-size; /* o size */ } @container (max-width: 700px) { footer .col .block { 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 [class*="title"]{ text-align:right; justify-content:flex-end; } footer .col-last .firma{ 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 [class*="title"]{ justify-content:flex-start; 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; } } /*--------------------------------------------------- --- FIRMA ////////////////////////////////////// ---------------------------------------------------*/ .firma { align-items:flex-end; 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 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; } /* Eliinamos 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 ----------------------------------------*/