/* Autor: PUM! estudio Index: 1 -- Structure 1.1 -- Header 1.2 -- Menu 1.3 -- Footer 2 -- Text 3 -- Interaction 3.1 -- CTAs 3.2 -- Tags 3.3 -- Inputs 3.4 -- Cursor 4 -- Icons 5 -- Animation */ @charset "UTF-8"; /* 1 -- Structure */ html { background-color: var(--bg-html); scroll-behavior: smooth;} body { background-color: var(--bg-body); color: var(--c-txt);} .col-main { width: 100%; padding-left: var(--padd-main); padding-right: var(--padd-main); max-width: 152rem;} @media ( max-width: 720px ) { .col-main { padding-left: var(--padd-main-s); padding-right: var(--padd-main-s);}} /* 1.1 -- Header */ .header { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; pointer-events: none;} .header-main { width: 100%; padding: var(--unit-4) 0; color: var(--c-white);} .header-logo { position: relative; z-index: 3; padding-top: var(--unit-2); padding-bottom: var(--unit-2); pointer-events: all;} .header-logo a, .header-logo svg { display: block;} .header-logo svg { height: var(--unit-17); width: auto;} .header .header-btns a, .header .header-btns button { color: var(--c-black); position: relative; z-index: 3; font-weight: var(--fw-bold); pointer-events: all;} .header .header-btns svg { height: var(--unit-6); width: auto;} .header .header-btns button:last-child { border-left: var(--border-1-b);} .header-main { transition: all 1s var(--bezier);} .header-main a, .header-main a span, .header-main a path, .header-main button, .header-main button span, .header-main button path, .menu a, .menu a span, .menu a path { transition: all .6s var(--bezier);} .header-btns a.hover, .header-btns button.hover, .menu a.hover { opacity: 0.8;} .menu .menu-destacado a.hover.content-media { opacity: 1;} .scroll-up .header { transform: translateY(0);} .scroll-down .header { transform: translateY(-100%);} .header-transparent .header-btns a, .header-transparent .header-btns button { color: var(--c-white);} .header-transparent svg path { fill: var(--c-white);} .header-transparent .header-btns button:last-child { border-left: var(--border-1-w);} .header-transparent-r-w .header-btns a, .header-transparent-r-w .header-btns button { color: var(--c-white);} .header-transparent-r-w .header-btns svg path { fill: var(--c-white);} .header-transparent-r-w .header-btns button:last-child { border-left: var(--border-1-w);} .header-transparent::before, .header-transparent-r-w::before { content: ''; display: block; position: absolute; top: 0; right: 0; z-index: -1; width: 100%; height: 100%; background: linear-gradient(to bottom, #000000d1, #00000000);} .header-transparent.middle::before, .header-transparent-r-w.middle::before { width: 50%;} .scroll-up .header-transparent::before, .scroll-down .header-transparent::before, .scroll-up .header-transparent-r-w::before, .scroll-down .header-transparent-r-w::before { display: none;} @media ( max-width: 1020px ) { .header-main { padding: var(--unit-5) 0;} .header-main .col-main { padding: 0 var(--unit);} .header-logo { padding-top: 0; padding-bottom: 0;} .header-logo svg { height: var(--unit-10);} .header-main .header-btns :not(.lang-btn) span { display: none;} .header-transparent.middle::before, .header-transparent-r-w.middle::before { display: none;} .header-transparent-r-w .header-btns a, .header-transparent-r-w .header-btns button { color: var(--c-black);} .header-transparent-r-w .header-btns svg path { fill: var(--c-black);} .header-transparent-r-w .header-btns button:last-child { border-left: var(--border-1-b);} } .scroll-up .header-main, .scroll-down .header-main { background-color: var(--c-white); color: var(--c-black); fill: var(--c-black);} .scroll-up .header .header-logo svg path, .scroll-down .header .header-logo svg path { fill: var(--c-black);} .scroll-up .header .header-logo svg .name path, .scroll-down .header .header-logo svg .name path { fill: var(--c-blue-500);} .scroll-up .header .header-btns a, .scroll-down .header .header-btns a, .scroll-up .header .header-btns button, .scroll-down .header .header-btns button { color: var(--c-black);} .scroll-up .header .header-btns a svg path, .scroll-down .header .header-btns a svg path, .scroll-up .header .header-btns button svg path, .scroll-down .header .header-btns button svg path { fill: var(--c-black);} .scroll-up .header-btns button:last-child, .scroll-down .header-btns button:last-child { border-left: var(--border-1-b);} .menu-active .header-main { background-color: transparent;} .menu-active .header .header-btns a, .menu-active .header .header-btns a, .menu-active .header .header-btns button, .menu-active .header .header-btns button { color: var(--c-white);} .menu-active .header .header-btns a svg path, .menu-active .header .header-btns a svg path, .menu-active .header .header-btns button svg path, .menu-active .header .header-btns button svg path { fill: var(--c-white);} .menu-active .header .header-logo svg path, .menu-active .header .header-logo svg .name path { fill: var(--c-white);} .menu-active .header-btns button:last-child { border-left: var(--border-1-w);} .map-active .header-transparent::before { display: none;} .header .header-tabs { position: relative; z-index: 2; container-type: inline-size; max-height: 100cqh; visibility: visible; opacity: 1; transition: all .8s var(--bezier); pointer-events: all;} .header .header-tabs .header-tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--unit); position: relative; padding: var(--unit-4) 0; margin: auto; width: 50%; color: var(--c-white); background-color: #25282A8C; backdrop-filter: blur(var(--unit-4));} .header .header-tabs .header-tab + .header-tab { border-left: var(--border-1-g);} .header .header-tabs .header-tab::before { content: ''; display: block; position: absolute; top: 100%; left: 50%; opacity: 0; width: var(--unit-5); height: var(--unit-2); background-color: #25282A8C; backdrop-filter: blur(var(--unit-4)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-50%); transition: all .8s var(--bezier);} .header .header-tabs .header-tab.active { font-weight: var(--fw-bold);} .header .header-tabs .header-tab.active::before { opacity: 1;} .header .header-tabs .header-tab.hover, .header .header-tabs .header-tab.hover::before { background-color: #25282AD9;} .header .header-tabs .drop-cta { display: none;} .scroll-up .header .header-tabs, .scroll-down .header .header-tabs, .menu-active .header .header-tabs { max-height: 0; overflow: hidden; opacity: 0;} @media ( max-width: 1020px ) { .header .header-tabs .header-tab { width: 100%; padding: var(--unit-3) 0; border-top: var(--border-1-b); font-weight: bold;} .header .header-tabs .header-tab + .header-tab { border-left: 0;} .header .header-tabs .header-tab::before { display: none;} .header .header-tabs .header-tab.active { display: none;} .header .header-tabs .drop-cta { position: relative; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: var(--unit); padding: var(--unit-2) 0; margin: auto; width: 100%; color: var(--c-white); background-color: #25282A8C; backdrop-filter: blur(var(--unit-4)); font-weight: var(--fw-bold);} .header .header-tabs .drop-cta::after { content: ''; display: block; height: var(--unit-5); width: var(--unit-5); background-image: var(--icon-w-chevron-down); background-position: center; background-repeat: no-repeat; transition: all .4s var(--bezier);} .header .header-tabs .drop-cta::before { content: ''; display: block; position: absolute; top: 100%; left: 50%; width: var(--unit-5); height: var(--unit-2); background-color: #25282A8C; backdrop-filter: blur(var(--unit-4)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-50%); transition: all .8s var(--bezier);} .header .header-tabs .drop-content { container-type: inline-size; position: relative; visibility: hidden; max-height: 0; opacity: 0; top: 0; left: 0; padding: 0; transition: all .4s var(--bezier);} .header .header-tabs .drop-content.active { max-height: 100vh; visibility: visible; opacity: 1;} .header .header-tabs .drop-cta.active::after { transform: rotate(180deg);} .header .header-tabs .drop-cta.active::before { opacity: 0;} } /* 1.2 -- Menu */ .menu { opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; transform: translateY(-1%); z-index: 99; width: 100%; height: 100%; color: var(--c-white); background-color: var(--c-blue-500); padding-top: var(--unit-40); padding-bottom: var(--unit-10);} .menu * { color: var(--c-white);} .menu .menu-col { border-left: var(--border-1-w);} .menu .menu-main > li { margin-top: var(--unit-5);} .menu .menu-main > li:first-child { margin-top: 0;} .menu .menu-main > li > a { display: block;} .menu .menu-main > li > a:has(+ ul):after { content: '+'; white-space: pre; margin-left: var(--unit-2);} .menu .menu-main > li > a:has(+ ul).active::after { content: '-';} .menu .menu-main a + ul { container-type: inline-size; position: relative; visibility: hidden; max-height: 0; opacity: 0; top: 0; left: 0; padding: 0 0 0 var(--unit-4); transition: all .8s var(--bezier);} .menu .menu-main a + ul.active { max-height: 100cqh; visibility: visible; opacity: 1; padding-top: var(--unit-5);} .menu .menu-destacado { width: 50vw; height: 100%; position: fixed; top: 0; right: 0;} .menu .menu-destacado::before { content: ''; display: block; width: 100%; height: 100%; background-image: linear-gradient(to bottom, #00000090, #00000000, #00000090); position: absolute; top: 0; left: 0; z-index: 2;} .menu .menu-destacado .menu-destacado-txt { position: absolute; bottom: var(--unit-15); left: var(--unit-8); z-index: 1000;} .menu .menu-destacado .content-media, .menu .menu-destacado .content-media img, .menu .menu-destacado .content-media video { border-radius: 0;} .menu-rrss a.hover { opacity: .8;} .menu-rrss img { width: var(--unit-6); height: auto;} .cta-menu .icon-close { display: none;} .menu-active .cta-menu .icon-close { display: flex;} .menu-active .cta-menu .icon-menu { display: none;} .menu-active .menu { opacity: 1; pointer-events: all; overflow: auto; transform: translateY(0);} .menu-active body { overflow: hidden;} @media ( max-width: 1020px ) { .menu { padding: var(--unit-40) var(--unit-3) var(--unit-10);} .menu .menu-col { border-left: 0; padding: 0;} .menu .menu-destacado { display: none;} } /* 1.3 -- Footer */ .content, .footer { position: relative; z-index: 90;} .footer { padding: var(--unit-20) 0 var(--unit-12) 0; background-color: var(--c-blue-500); color: var(--c-white);} .footer a { color: var(--c-white);} .footer .txt-display-footer { color: var(--c-blue-900);} .footer-logo img { height: var(--unit-30); width: auto;} .footer-quote { color: var(--c-blue-100);} @media ( max-width: 720px ) { .footer-logo img { height: var(--unit-13);} } /* 2 -- Text */ html, body, input, button, select, textarea { font-family: var(--font); font-style: normal;} body { font-size: var(--txt-18); line-height: var(--txt-18-lh);} html { font-size: .65vw;} @media ( min-width: 1520px ) { html { font-size: 10px;} } @media ( max-width: 1380px ) { html { font-size: 9px;} } @media ( max-width: 720px ) { html { font-size: 2vw;} } @media ( max-width: 480px ) { html { font-size: 2.66667vw;} } .txt-display-above-home { font-size: var(--txt-display-above-home); line-height: var(--txt-display-above-home-lh); font-weight: var(--txt-display-above-home-fw); letter-spacing: var(--txt-display-above-home-ls);} .txt-display-above-section { font-size: var(--txt-display-above-section); line-height: var(--txt-display-above-section-lh); font-weight: var(--txt-display-above-section-fw); letter-spacing: var(--txt-display-above-section-ls);} .txt-display-footer { font-size: var(--txt-display-footer); line-height: var(--txt-display-footer-lh); font-weight: var(--txt-display-footer-fw); letter-spacing: var(--txt-display-footer-ls);} .txt-title-block { font-size: var(--txt-title-block); line-height: var(--txt-title-block-lh); font-weight: var(--txt-title-block-fw); letter-spacing: var(--txt-title-block-ls);} .content-txt h1, .txt-40 { font-size: var(--txt-40); line-height: var(--txt-40-lh); font-weight: var(--txt-40-fw); letter-spacing: var(--txt-40-ls);} .content-txt h2, .txt-32 { font-size: var(--txt-32); line-height: var(--txt-32-lh); font-weight: var(--txt-32-fw); letter-spacing: var(--txt-32-ls);} .content-txt h3, .txt-28 { font-size: var(--txt-28); line-height: var(--txt-28-lh); font-weight: var(--txt-28-fw); letter-spacing: var(--txt-28-ls);} .content-txt h4, .txt-24 { font-size: var(--txt-24); line-height: var(--txt-24-lh); font-weight: var(--txt-24-fw); letter-spacing: var(--txt-24-ls);} .content-txt h5, .txt-20 { font-size: var(--txt-20); line-height: var(--txt-20-lh); font-weight: var(--txt-20-fw); letter-spacing: var(--txt-20-ls);} .content-txt p, .txt-18 { font-size: var(--txt-18); line-height: var(--txt-18-lh); font-weight: var(--txt-18-fw); letter-spacing: var(--txt-18-ls);} .content-txt h6, .txt-16, .cta { font-size: var(--txt-16); line-height: var(--txt-16-lh); font-weight: var(--txt-16-fw); letter-spacing: var(--txt-16-ls);} .txt-14, .tag { font-size: var(--txt-14); line-height: var(--txt-14-lh); font-weight: var(--txt-14-fw); letter-spacing: var(--txt-14-ls);} .txt-12 { font-size: var(--txt-12); line-height: var(--txt-12-lh); font-weight: var(--txt-12-fw); letter-spacing: var(--txt-12-ls);} @media ( max-width: 1380px ) { .txt-display-footer { font-size: 11.2vw;} } @media ( max-width: 1020px ) { .txt-display-above-section-m { font-size: var(--txt-display-above-section); line-height: var(--txt-display-above-section-lh); font-weight: var(--txt-display-above-section-fw); letter-spacing: var(--txt-display-above-section-ls);} .txt-title-block-m { font-size: var(--txt-title-block); line-height: var(--txt-title-block-lh); font-weight: var(--txt-title-block-fw); letter-spacing: var(--txt-title-block-ls);} .txt-40-m { font-size: var(--txt-40); line-height: var(--txt-40-lh); font-weight: var(--txt-40-fw); letter-spacing: var(--txt-40-ls);} .txt-32-m { font-size: var(--txt-32); line-height: var(--txt-32-lh); font-weight: var(--txt-32-fw); letter-spacing: var(--txt-32-ls);} .txt-28-m { font-size: var(--txt-28); line-height: var(--txt-28-lh); font-weight: var(--txt-28-fw); letter-spacing: var(--txt-28-ls);} .txt-24-m { font-size: var(--txt-24); line-height: var(--txt-24-lh); font-weight: var(--txt-24-fw); letter-spacing: var(--txt-24-ls);} .txt-20-m { font-size: var(--txt-20); line-height: var(--txt-20-lh); font-weight: var(--txt-20-fw); letter-spacing: var(--txt-20-ls);} .txt-18-m { font-size: var(--txt-18); line-height: var(--txt-18-lh); font-weight: var(--txt-18-fw); letter-spacing: var(--txt-18-ls);} .txt-16-m { font-size: var(--txt-16); line-height: var(--txt-16-lh); font-weight: var(--txt-16-fw); letter-spacing: var(--txt-16-ls);} .txt-14-m { font-size: var(--txt-14); line-height: var(--txt-14-lh); font-weight: var(--txt-14-fw); letter-spacing: var(--txt-14-ls);} .txt-12-m { font-size: var(--txt-12); line-height: var(--txt-12-lh); font-weight: var(--txt-12-fw); letter-spacing: var(--txt-12-ls);} } @media ( max-width: 720px ) { .txt-display-footer { font-size: var(--txt-display-footer-s); line-height: var(--txt-display-footer-lh-s); font-weight: var(--txt-display-footer-fw-s); letter-spacing: var(--txt-display-footer-ls-s);} .txt-title-block-s { font-size: var(--txt-title-block); line-height: var(--txt-title-block-lh); font-weight: var(--txt-title-block-fw); letter-spacing: var(--txt-title-block-ls);} .txt-40-s { font-size: var(--txt-40); line-height: var(--txt-40-lh); font-weight: var(--txt-40-fw); letter-spacing: var(--txt-40-ls);} .content-txt h1, .txt-32-s { font-size: var(--txt-32); line-height: var(--txt-32-lh); font-weight: var(--txt-32-fw); letter-spacing: var(--txt-32-ls);} .content-txt h2, .txt-28-s { font-size: var(--txt-28); line-height: var(--txt-28-lh); font-weight: var(--txt-28-fw); letter-spacing: var(--txt-28-ls);} .content-txt h3, .txt-24-s { font-size: var(--txt-24); line-height: var(--txt-24-lh); font-weight: var(--txt-24-fw); letter-spacing: var(--txt-24-ls);} .content-txt h4, .txt-20-s { font-size: var(--txt-20); line-height: var(--txt-20-lh); font-weight: var(--txt-20-fw); letter-spacing: var(--txt-20-ls);} .content-txt h5, .txt-18-s { font-size: var(--txt-18); line-height: var(--txt-18-lh); font-weight: var(--txt-18-fw); letter-spacing: var(--txt-18-ls);} .content-txt p, .txt-16-s { font-size: var(--txt-16); line-height: var(--txt-16-lh); font-weight: var(--txt-16-fw); letter-spacing: var(--txt-16-ls);} .content-txt h6, .txt-14-s { font-size: var(--txt-14); line-height: var(--txt-14-lh); font-weight: var(--txt-14-fw); letter-spacing: var(--txt-14-ls);} .txt-12-s { font-size: var(--txt-12); line-height: var(--txt-12-lh); font-weight: var(--txt-12-fw); letter-spacing: var(--txt-12-ls);} } .content-txt { word-break: break-word;} .content-txt h1, .content-txt h2, .content-txt h3 { margin-bottom: var(--unit-8); margin-top: var(--unit-8);} .content-txt h4 { margin-bottom: var(--txt-24-lh);} .content-txt h5 { margin-bottom: var(--txt-24-lh);} .content-txt h6 { margin-bottom: var(--txt-16-lh);} .content-txt p, .content-txt ul, .content-txt ol { margin-bottom: var(--txt-18-lh);} .content-txt ul, .content-txt ol { padding-left: var(--unit-4);} .content-txt li { margin-bottom: var(--unit-2);} .content-txt h1:first-child, .content-txt h2:first-child, .content-txt h3:first-child { margin-top: 0;} .content-txt h3 + h4 { margin-top: calc(0px - var(--unit-2));} .content-txt p + ul { margin-top: calc(0px - var(--txt-body-lh));} .content-txt :last-child { margin-bottom: 0;} .content-txt.columns-2 * { font-size: var(--txt-18); line-height: var(--txt-18-lh); letter-spacing: var(--txt-18-ls);} .content-txt a { text-decoration: underline; color: var(--c-blue-500); font-weight: var(--fw-bold);} .content-txt a.hover { color: var(--c-blue-900);} a, button { color: var(--c-black); text-decoration: none;} .txt-extrabold { font-weight: var(--fw-extrabold);} .txt-strong, strong, b, .cta { font-weight: var(--fw-bold);} .txt-semibold { font-weight: var(--fw-semibold);} .txt-regular { font-weight: var(--fw-regular);} .txt-a-l { text-align: left;} .txt-a-c { text-align: center;} .txt-a-r { text-align: right;} .txt-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .txt-upper { text-transform: uppercase;} .txt-underline { text-decoration: underline;} .txt-blue { color: var(--c-blue-500);} @media ( max-width: 1020px ) { .txt-extrabold-m { font-weight: var(--fw-extrabold);} .txt-strong-m { font-weight: var(--fw-bold);} .txt-semibold-m { font-weight: var(--fw-extrabold);} .txt-a-l-m { text-align: left;} .txt-a-c-m { text-align: center;} .txt-a-r-m { text-align: right;} .txt-line-m { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .txt-upper-m { text-transform: uppercase;} .txt-underline-m { text-decoration: underline;} } @media ( max-width: 720px ) { .txt-extrabold-s { font-weight: var(--fw-extrabold);} .txt-strong-s { font-weight: var(--fw-bold);} .txt-semibold-s { font-weight: var(--fw-extrabold);} .txt-a-l-s { text-align: left;} .txt-a-c-s { text-align: center;} .txt-a-r-s { text-align: right;} .txt-line-s { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .txt-upper-s { text-transform: uppercase;} .txt-underline-s { text-decoration: underline;} } .header a, .footer a { text-decoration: none;} /* 3 -- Interaction */ ::selection { background: var(--c-black); color: var(--c-white);} ::-moz-selection { background: var(--c-black); color: var(--c-white);} ::-webkit-selection { background: var(--c-black); color: var(--c-white);} ::placeholder { color: var(--c-black);} :focus::placeholder { color: var(--c-black);} /* 3.1 -- CTAs */ .cta { display: inline-flex; align-items: center; gap: var(--unit-3); text-decoration: none !important;} .cta-box { border-radius: var(--border-rad-2);} .cta-box, .cta-box.cta-l { padding: var(--unit-4) var(--unit-8);} .cta-box.cta-m { padding: var(--unit-3) var(--unit-4);} .cta-box.cta-s { padding: var(--unit-2) var(--unit-3); border-radius: var(--unit);} .cta-primary { background-color: var(--c-blue-500); color: var(--c-white); border: var(--border-2-blue);} .cta-primary.hover, .hover .cta-primary { background-color: var(--c-blue-900);} .cta-secondary { background-color: var(--c-white); color: var(--c-blue-500); border: var(--border-1-blue);} .cta-secondary.hover, .hover .cta-secondary { background-color: var(--c-blue-500); color: var(--c-white);} .cta-grey { background-color: var(--c-white); color: var(--c-black); border: var(--border-1-g-200);} .cta-grey.hover, .hover .cta-grey { background-color: var(--c-grey-100);} .cta-grey.active { background-color: var(--c-blue-500); color: var(--c-white); border: var(--border-1-blue);} .cta-line { color: var(--c-blue-500);} .cta-line.hover, .hover .cta-line { opacity: .7;} .cta-ghost { background-color: transparent; color: var(--c-white); border: var(--border-2-w);} .cta-ghost.hover, .hover .cta-ghost { background-color: var(--c-white); color: var(--c-black); border: var(--border-2-w);} .cta-ghost.icon-w-arrow-right::after { transition: all .4s var(--bezier);} .cta-ghost.icon-w-arrow-right.hover::after, .hover .cta-ghost.icon-w-arrow-right::after { background-image: var(--icon-b-arrow-right);} @media ( max-width: 720px ) { .cta-box, .cta-box.cta-l { padding: var(--unit-3) var(--unit-4);} } /* 3.2 -- Tags */ .tag { display: inline-block; padding: var(--unit) var(--unit-2); border-radius: var(--unit); background-color: var(--c-grey-100); color: var(--c-black); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .tag-open { display: inline-flex; align-items: center; gap: var(--unit); background-color: var(--c-green-fluor); } .tag-open::before { content: ''; display: block; width: var(--unit-2); height: var(--unit-2); background-color: var(--c-black); opacity: .2; border-radius: 100%; animation: pulse 1s ease infinite alternate;} .tag-close { display: inline-flex; align-items: center; gap: var(--unit); background-color: var(--c-black); color: var(--c-white);} .tag-close::before { display: none;} a.tag.hover, button.tag.hover { background-color: var(--c-grey-200);} button.tag.active { background-color: var(--c-blue-500); color: var(--c-white); font-weight: var(--fw-bold);} button.tag.active.icon-b-plus::after { background-image: var(--icon-w-exit); transform: rotate(135deg);} .chip { display: inline-flex; align-items: center; padding: .2rem var(--unit-2); border-radius: var(--unit); background-color: var(--c-grey-100); color: var(--c-black);} a.chip, a .chip { text-transform: uppercase; color: var(--c-black); text-decoration: none;} a.hover.chip, a.hover .chip { opacity: 0.8;} /* 3.3 -- Input */ input, select, textarea { width: 100%;} input[type=submit] { width: auto;} /* -- Campos de texto */ input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea { font-size: var(--txt-input); line-height: var(--txt-input-lh); font-weight: var(--txt-input-fw); letter-spacing: var(--txt-input-ls); padding: var(--input-padd); border-radius: var(--input-border-rad); background-color: var(--input-color-bg); color: var(--input-color); border: var(--input-border);} textarea { min-height: var(--unit-30);} /* -- Select */ select { padding-right: var(--unit-14); background: transparent; color: var(--c-black); border: .1rem solid var(--c-grey-200); background-repeat: no-repeat; background-position: calc(100% - var(--unit-4)) center; background-image: var(--icon-arrow-drop); background-size: var(--unit-6);} /* -- Labels */ label, legend { cursor: pointer; font-size: var(--txt-14); line-height: var(--txt-14-lh); font-weight: var(--txt-14-fw); letter-spacing: var(--txt-14-ls);} /* -- Botón */ input[type=submit] { -webkit-appearance: none!important; appearance: none!important; font-size: var(--txt-submit); line-height: var(--txt-submit-lh); font-weight: var(--txt-submit-fw); letter-spacing: var(--txt-submit-ls); border-radius: var(--submit-border-rad); padding: var(--submit-padd) !important; background: var(--submit-color-bg); color: var(--submit-color); border: var(--submit-border);} input[type=submit].hover { background-color: var(--submit-hov-color-bg); color: var(--submit-hov-color); border-color: var(--submit-hov-border-color);} /* -- Checkbox */ input[type=checkbox], input[type=radio] { width: var(--unit-5); height: var(--unit-5); border: var(--border-1-g-200); background-color: var(--c-white); background-position: center; background-repeat: no-repeat; border-radius: var(--unit);} input[type=checkbox] { background-image: url(../img/icon/w/checkbox.svg);} input[type=radio] { background-image: var(--icon-w-radio);} input[type=checkbox]:checked, input[type=radio]:checked { border-color: var(--c-white); background-color: var(--c-blue-900);} input[type=radio]:checked + * { color: var(--c-black);} /* -- :focus */ input:focus, textarea:focus, select:focus { border-color: var(--c-black);} :focus::placeholder { color: var(--c-black); border-color: var(--c-black);} /* -- gravity forms */ .content-form .gform_heading { display: none;} .content-form .ginput_container.ginput_container_consent { display: flex; flex-direction: row; align-items: center; gap: var(--unit-3);} .content-form .ginput_container.ginput_container_consent a { text-decoration: underline; color: var(--c-blue-500);} .content-form .gform_wrapper.gravity-theme .gform_validation_errors>h2 .gform-icon { display: none;} .content-form .gform_wrapper.gravity-theme input[type=color], .content-form .gform_wrapper.gravity-theme input[type=date], .content-form .gform_wrapper.gravity-theme input[type=datetime-local], .content-form .gform_wrapper.gravity-theme input[type=datetime], .content-form .gform_wrapper.gravity-theme input[type=email], .content-form .gform_wrapper.gravity-theme input[type=month], .content-form .gform_wrapper.gravity-theme input[type=number], .content-form .gform_wrapper.gravity-theme input[type=password], .content-form .gform_wrapper.gravity-theme input[type=search], .content-form .gform_wrapper.gravity-theme input[type=tel], .content-form .gform_wrapper.gravity-theme input[type=text], .content-form .gform_wrapper.gravity-theme input[type=time], .content-form .gform_wrapper.gravity-theme input[type=url], .content-form .gform_wrapper.gravity-theme input[type=week], .content-form .gform_wrapper.gravity-theme select, .content-form .gform_wrapper.gravity-theme textarea { font-size: var(--txt-input); line-height: var(--txt-input-lh); font-weight: var(--txt-input-fw); letter-spacing: var(--txt-input-ls); padding: var(--input-padd); border-radius: var(--input-border-rad); background-color: var(--input-color-bg); color: var(--input-color); border: var(--input-border);} .content-form .gform_wrapper.gravity-theme textarea, .content-form .gform_wrapper.gravity-theme .gfield textarea.large { height: var(--unit-40); resize: vertical;} .content-form .gform_wrapper.gravity-theme .gfield_label { font-weight: var(--fw-regular);} .content-form .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: var(--unit-8); grid-column-gap: var(--unit-4)} .content-form .gform_wrapper.gravity-theme textarea { border-radius: var(--unit-2);} .content-form .gform_wrapper.gravity-theme .ginput_container.ginput_container_select { position: relative;} .content-form .gform_wrapper.gravity-theme .ginput_container.ginput_container_select::after { content: ''; display: block; width: var(--unit-6); height: var(--unit-6); position: absolute; top: 50%; right: var(--unit-6); transform: translateY(-50%); background-image: var(--icon-b-chevron-down); background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none;} .content-form .gform_wrapper.gravity-theme #field_1_8 .gfield_label { font-weight: var(--fw-bold); color: var(--c-blue-500);} .content-form .gform_wrapper.gravity-theme .gform_footer, .content-form .gform_wrapper.gravity-theme .gform_page_footer { padding: 0; margin: var(--unit-10) 0 0 0;} .content-form .gform_wrapper.gravity-theme .gform_footer button, .content-form .gform_wrapper.gravity-theme .gform_footer input, .content-form .gform_wrapper.gravity-theme .gform_page_footer button, .content-form .gform_wrapper.gravity-theme .gform_page_footer input { margin-bottom: 0;} .content-form .gform_wrapper.gravity-theme .gform_validation_errors { margin-top: 0; margin-bottom: var(--unit-6); padding: 0; background-color: transparent; border: none; box-shadow: none;} .content-form .gform_wrapper.gravity-theme .gfield_validation_message, .content-form .gform_wrapper.gravity-theme .validation_message { margin-bottom: 0; padding: 0; background-color: transparent; border: none; box-shadow: none;} .content-form .gform_wrapper.gravity-theme .gform_validation_errors>h2 { font-size: var(--txt-14); line-height: var(--txt-14-lh); letter-spacing: var(--txt-14-ls); margin-bottom: 0;} .content-form .gform_wrapper.gravity-theme .gform_validation_errors>ol a { font-size: var(--txt-12);} .content-form .gform_wrapper.gravity-theme .field_description_above .description, .content-form .gform_wrapper.gravity-theme .field_description_above .gfield_description, .content-form .gform_wrapper.gravity-theme .field_description_above .gsection_description, .content-form .gform_wrapper.gravity-theme .field_description_above .instruction { padding: 0;} .content-form .gform_wrapper.gravity-theme .description, .content-form .gform_wrapper.gravity-theme .gfield_description, .content-form .gform_wrapper.gravity-theme .gsection_description, .content-form .gform_wrapper.gravity-theme .instruction { font-size: var(--txt-14); line-height: var(--txt-14-lh); font-weight: var(--txt-14-fw); letter-spacing: var(--txt-14-ls);} .content-form .gform_wrapper.gravity-theme input[type=file] { font-size: 1.4rem;} .content-form .gform_wrapper.gravity-theme input[type=file]::file-selector-button { -webkit-appearance: none !important; appearance: none !important; font-family: var(--font); font-size: var(--txt-submit); line-height: var(--txt-submit-lh); font-weight: var(--txt-submit-fw); letter-spacing: var(--txt-submit-ls); border-radius: var(--submit-border-rad); padding: var(--unit-2) var(--unit-3) !important; border: 2px solid var(--c-black); background: var(--c-grey-100); color: var(--c-black); border: transparent; cursor: pointer; margin-right: var(--unit-2); transition: all 0.2s ease-in-out;} .content-form .gform_wrapper.gravity-theme input[type=file]::file-selector-button:hover { background: var(--c-blue-500); color: var(--c-white);} .content-form .gform_wrapper.gravity-theme .gchoice { display: flex; align-items: flex-start; gap: var(--unit-2);} .content-form .gform_wrapper.gravity-theme .gchoice + .gchoice { margin-top: var(--unit);} .content-form .gform_wrapper.gravity-theme input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file]) { line-height: 1; min-height: auto; } .content-form .gform_wrapper.gravity-theme .gform_validation_errors:focus { outline: 0; box-shadow: none;} .content-form .gform_wrapper.gravity-theme .gfield_label { font-size: var(--txt-16); line-height: var(--txt-16-lh); font-weight: var(--txt-16-fw); letter-spacing: var(--txt-16-ls);} .content-form .gform_wrapper.gravity-theme .gfield_checkbox label, .content-form .gform_wrapper.gravity-theme .gfield_radio label { font-size: var(--txt-14); line-height: var(--txt-14-lh); font-weight: var(--txt-14-fw); letter-spacing: var(--txt-14-ls);} /* -- gravity forms -- Newsletter */ .content-newsletter-card .gform_wrapper.gravity-theme .gfield { grid-column: 1/6;} .content-newsletter-card .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: var(--unit-6);} .content-newsletter-card .gform_wrapper.gravity-theme #field_2_5 .gfield_label { font-weight: var(--fw-bold);} .content-newsletter-card input[type=submit] { background-color: transparent; color: var(--c-black); border: var(--border-2-b);} .content-grid-masonry-item .content-newsletter-card .gform_wrapper.gravity-theme .gfield { grid-column: span 12;} /* 4 -- Icons */ .icon::after { content: ''; display: block; width: var(--unit-6); height: var(--unit-6); background-position: center; background-repeat: no-repeat; background-size: contain; flex-shrink: 0;} .icon-m::after { width: var(--unit-8); height: var(--unit-8);} .icon-l::after { width: var(--unit-10); height: var(--unit-10);} .icon-w-a-medida:after { background-image: var(--icon-w-a-medida);} .icon-w-arrow-big-up-lines:after { background-image: var(--icon-w-arrow-big-up-lines);} .icon-w-arrow-left:after { background-image: var(--icon-w-arrow-left);} .icon-w-arrow-right:after { background-image: var(--icon-w-arrow-right);} .icon-w-bluesky:after { background-image: var(--icon-w-bluesky);} .icon-w-calendar:after { background-image: var(--icon-w-calendar);} .icon-w-check:after { background-image: var(--icon-w-check);} .icon-w-chevron-down:after { background-image: var(--icon-w-chevron-down);} .icon-w-chevron-left:after { background-image: var(--icon-w-chevron-left);} .icon-w-chevron-right:after { background-image: var(--icon-w-chevron-right);} .icon-w-chevron-up:after { background-image: var(--icon-w-chevron-up);} .icon-w-circle_arrow_left:after { background-image: var(--icon-w-circle_arrow_left);} .icon-w-circle_arrow_right:after { background-image: var(--icon-w-circle_arrow_right);} .icon-w-co-construido:after { background-image: var(--icon-w-co-construido);} .icon-w-dot_actual:after { background-image: var(--icon-w-dot_actual);} .icon-w-dot_simple:after { background-image: var(--icon-w-dot_simple);} .icon-w-download:after { background-image: var(--icon-w-download);} .icon-w-exit:after { background-image: var(--icon-w-exit);} .icon-w-expanded:after { background-image: var(--icon-w-expanded);} .icon-w-filter_2:after { background-image: var(--icon-w-filter_2);} .icon-w-filter:after { background-image: var(--icon-w-filter);} .icon-w-flexible:after { background-image: var(--icon-w-flexible);} .icon-w-globe:after { background-image: var(--icon-w-globe);} .icon-w-instagram:after { background-image: var(--icon-w-instagram);} .icon-w-less:after { background-image: var(--icon-w-less);} .icon-w-light:after { background-image: var(--icon-w-light);} .icon-w-linkedin:after { background-image: var(--icon-w-linkedin);} .icon-w-map-pin:after { background-image: var(--icon-w-map-pin);} .icon-w-menu:after { background-image: var(--icon-w-menu);} .icon-w-play-circle:after { background-image: var(--icon-w-play-circle);} .icon-w-play-circle-l:after { background-image: var(--icon-w-play-circle-l);} .icon-w-plus:after { background-image: var(--icon-w-plus);} .icon-w-search:after { background-image: var(--icon-w-search);} .icon-w-Share:after { background-image: var(--icon-w-Share);} .icon-w-target:after { background-image: var(--icon-w-target);} .icon-w-user-heart:after { background-image: var(--icon-w-user-heart);} .icon-w-users-group:after { background-image: var(--icon-w-users-group);} .icon-w-X-twitter:after { background-image: var(--icon-w-X-twitter);} .icon-w-youtube:after { background-image: var(--icon-w-youtube);} .icon-w-map:after { background-image: var(--icon-w-map);} .icon-w-grid:after { background-image: var(--icon-w-grid);} .icon-c-a-medida:after { background-image: var(--icon-c-a-medida);} .icon-c-arrow-big-up-lines:after { background-image: var(--icon-c-arrow-big-up-lines);} .icon-c-arrow-left:after { background-image: var(--icon-c-arrow-left);} .icon-c-arrow-right:after { background-image: var(--icon-c-arrow-right);} .icon-c-bluesky:after { background-image: var(--icon-c-bluesky);} .icon-c-calendar:after { background-image: var(--icon-c-calendar);} .icon-c-check:after { background-image: var(--icon-c-check);} .icon-c-check-nobox:after { background-image: var(--icon-c-check-nobox);} .icon-c-chevron-down:after { background-image: var(--icon-c-chevron-down);} .icon-c-chevron-left:after { background-image: var(--icon-c-chevron-left);} .icon-c-chevron-right:after { background-image: var(--icon-c-chevron-right);} .icon-c-chevron-up:after { background-image: var(--icon-c-chevron-up);} .icon-c-circle_arrow_left:after { background-image: var(--icon-c-circle_arrow_left);} .icon-c-circle_arrow_right:after { background-image: var(--icon-c-circle_arrow_right);} .icon-c-co-construido:after { background-image: var(--icon-c-co-construido);} .icon-c-dot_actual:after { background-image: var(--icon-c-dot_actual);} .icon-c-dot_simple:after { background-image: var(--icon-c-dot_simple);} .icon-c-download:after { background-image: var(--icon-c-download);} .icon-c-exit:after { background-image: var(--icon-c-exit);} .icon-c-expanded:after { background-image: var(--icon-c-expanded);} .icon-c-filter_2:after { background-image: var(--icon-c-filter_2);} .icon-c-filter:after { background-image: var(--icon-c-filter);} .icon-c-flexible:after { background-image: var(--icon-c-flexible);} .icon-c-globe:after { background-image: var(--icon-c-globe);} .icon-c-instagram:after { background-image: var(--icon-c-instagram);} .icon-c-less:after { background-image: var(--icon-c-less);} .icon-c-light:after { background-image: var(--icon-c-light);} .icon-c-linkedin:after { background-image: var(--icon-c-linkedin);} .icon-c-map-pin:after { background-image: var(--icon-c-map-pin);} .icon-c-menu:after { background-image: var(--icon-c-menu);} .icon-c-phone:after { background-image: var(--icon-c-phone);} .icon-c-play-circle:after { background-image: var(--icon-c-play-circle);} .icon-c-plus:after { background-image: var(--icon-c-plus);} .icon-c-search:after { background-image: var(--icon-c-search);} .icon-c-Share:after { background-image: var(--icon-c-Share);} .icon-c-target:after { background-image: var(--icon-c-target);} .icon-c-user-heart:after { background-image: var(--icon-c-user-heart);} .icon-c-users-group:after { background-image: var(--icon-c-users-group);} .icon-c-X-twitter:after { background-image: var(--icon-c-X-twitter);} .icon-c-youtube:after { background-image: var(--icon-c-youtube);} .icon-b-a-medida:after { background-image: var(--icon-b-a-medida);} .icon-b-arrow-big-up-lines:after { background-image: var(--icon-b-arrow-big-up-lines);} .icon-b-arrow-left:after { background-image: var(--icon-b-arrow-left);} .icon-b-arrow-right:after { background-image: var(--icon-b-arrow-right);} .icon-b-bluesky:after { background-image: var(--icon-b-bluesky);} .icon-b-calendar:after { background-image: var(--icon-b-calendar);} .icon-b-check:after { background-image: var(--icon-b-check);} .icon-b-chevron-down:after { background-image: var(--icon-b-chevron-down);} .icon-b-chevron-left:after { background-image: var(--icon-b-chevron-left);} .icon-b-chevron-right:after { background-image: var(--icon-b-chevron-right);} .icon-b-chevron-up:after { background-image: var(--icon-b-chevron-up);} .icon-b-circle_arrow_left:after { background-image: var(--icon-b-circle_arrow_left);} .icon-b-circle_arrow_right:after { background-image: var(--icon-b-circle_arrow_right);} .icon-b-co-construido:after { background-image: var(--icon-b-co-construido);} .icon-b-dot_actual:after { background-image: var(--icon-b-dot_actual);} .icon-b-dot_simple:after { background-image: var(--icon-b-dot_simple);} .icon-b-download:after { background-image: var(--icon-b-download);} .icon-b-exit:after { background-image: var(--icon-b-exit);} .icon-b-expanded:after { background-image: var(--icon-b-expanded);} .icon-b-filter_2:after { background-image: var(--icon-b-filter_2);} .icon-b-filter:after { background-image: var(--icon-b-filter);} .icon-b-flexible:after { background-image: var(--icon-b-flexible);} .icon-b-globe:after { background-image: var(--icon-b-globe);} .icon-b-instagram:after { background-image: var(--icon-b-instagram);} .icon-b-less:after { background-image: var(--icon-b-less);} .icon-b-light:after { background-image: var(--icon-b-light);} .icon-b-linkedin:after { background-image: var(--icon-b-linkedin);} .icon-b-map-pin:after { background-image: var(--icon-b-map-pin);} .icon-b-menu:after { background-image: var(--icon-b-menu);} .icon-b-play-circle:after { background-image: var(--icon-b-play-circle);} .icon-b-plus:after { background-image: var(--icon-b-plus);} .icon-b-search:after { background-image: var(--icon-b-search);} .icon-b-Share:after { background-image: var(--icon-b-Share);} .icon-b-target:after { background-image: var(--icon-b-target);} .icon-b-user-heart:after { background-image: var(--icon-b-user-heart);} .icon-b-users-group:after { background-image: var(--icon-b-users-group);} .icon-b-X-twitter:after { background-image: var(--icon-b-X-twitter);} .icon-b-youtube:after { background-image: var(--icon-b-youtube);} .icon-b-map:after { background-image: var(--icon-b-map);} .icon-b-grid:after { background-image: var(--icon-b-grid);} /* 5 -- Animation */ a, button, .cta, .icon::after, .header, .header::before, .header .cta-menu::before, .header .cta-menu::after, .menu, input, select, textarea, ::placeholder { transition: all .8s var(--bezier);} input[type="checkbox"], input[type="radio"], #cursor:after { transition: all .2s var(--bezier);} [data-view] { opacity: 0; transition: all 1.2s var(--bezier);} [data-view].view { opacity: 1; transform: translate(0);} [data-view]:nth-child(n+2) { transition-delay: .2s;} [data-view]:nth-child(n+3) { transition-delay: .3s;} [data-view]:nth-child(n+4) { transition-delay: .4s;} [data-view]:nth-child(n+5) { transition-delay: .5s;} [data-view]:nth-child(n+6) { transition-delay: .6s;} [data-view]:nth-child(n+7) { transition-delay: .7s;} [data-view]:nth-child(n+8) { transition-delay: .8s;} [data-view]:nth-child(n+9) { transition-delay: .9s;} @keyframes fadein { 0% { opacity: 0;} 100% { opacity: 1;} } @keyframes pulse { 0% { opacity: .1;} 100% { opacity: .3;} } /* The end -- :P */