/*
--------------------------------------------------------------------------------
GLOBALES
--------------------------------------------------------------------------------
*/
/* Variables */
:root {
--spacing-none: 0;
--spacing-xxs: .125rem;
--spacing-xs: .25rem;
--spacing-sm: .375rem;
--spacing-md: .5rem;
--spacing-lg: .75rem;
--spacing-xl: 1rem;
--spacing-2xl: 1.25rem;
--spacing-3xl: 1.5rem;
--spacing-4xl: 2rem;
--spacing-5xl: 2.5rem;
--spacing-6xl: 3rem;
--spacing-7xl: 4rem;
--spacing-8xl: 5rem;
--spacing-9xl: 6rem;
--spacing-10xl: 8rem;
--spacing-11xl: 10rem;
--radius-none: 0;
--radius-xxs: .125rem;
--radius-xs: .25rem;
--radius-sm: .375rem;
--radius-md: .5rem;
--radius-lg: .625rem;
--radius-xl: .75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.25rem;
--radius-4xl: 1.5rem;
--radius-full: 9999px;
/* --container-padding-mobile: 1rem; */
--container-padding-mobile: 2rem;
--container-padding-desktop: 2rem;
--container-max-width-desktop: 80rem;
--Font-size-text-xs: .75rem;
--Font-size-text-sm: .875rem;
--Font-size-text-md: 1rem;
--Font-size-text-lg: 1.125rem;
--Font-size-text-xl: 1.25rem;
--Font-size-display-xs: 1.5rem;
--Font-size-display-sm: 1.875rem;
--Font-size-display-md: 2.25rem;
--Font-size-display-lg: 3rem;
--Font-size-display-xl: 3.75rem;
--Font-size-display-2xl: 4.5rem;
--Line-height-text-sm: 1.42;
--Line-height-text-md: 1.5;
--Line-height-text-xl: 1.5;
--Line-height-display-xs: 1.33333;
--Line-height-display-sm: 1.26667;
--Line-height-display-md: 1.22222;
--Line-height-display-lg: 1.25;
--Line-height-display-xl: 1.2;
--Line-height-display-2xl: 1.25;
--colors-bg-primary: #FFF;
--colors-bg-brand-primary: #E8F4FF;
--colors-bg-brand-solid: #0D2EFF;
--colors-bg-brand-solid-hover: #0120F4;
--colors-bg-secondary: #F5F5F5;
--colors-bg-secondary-alt: #FAFAFA;
--colors-border-primary: #D5D7DA;
--colors-text-primary-700: #94979C;
--colors-text-secondary-700: #414651;
--colors-text-primary-900: #181D27;
--colors-text-tertiary-600: #535862;
--colors-text-white: #FFFFFF;
--colors-foreground-primary-900: #181D27;
--colors-text-brand-secondary: #0120F4;
--colors-text-brand-secondary-hover: #0723CC;
--colors-text-brand-tertiary-600: #0D2EFF;
--font-family-body: 'Inter', helvetica, sans-serif;
/* Revisar para unificar (copiadas de style-new) */
--font-size-xxl: 3.75rem;
--font-size-xl: 2.25rem;
--font-size-l: 1.875rem;
--font-size-m: 1.25rem;
--font-size-s: 1.125rem;
--font-size-xs: 1rem;
--font-size-xxs: .9375rem;
--color-light-gray: #FAFCFF;
}
html {
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 7.5rem;
}
/* Body */
body {
background: var(--colors-bg-primary);
color: var(--colors-text-tertiary-600); /*#617892*/
font-family: var(--font-family-body);
font-size: 93.75%;
font-style: normal;
font-stretch: normal;
font-weight: 400;
line-height: 1.33;
letter-spacing: normal;
overflow-x: hidden;
position: relative;
}
body.header-affix {
padding-top: 4.75rem;
}
body.header-affix.use-bottombar {
padding-top: calc(4.75rem + 3.25rem);
}
/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: var(--colors-text-primary-900); /*#052b53*/
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
}
h1, .h1 {
font-size: var(--Font-size-display-xl);
font-weight: 700;
line-height: var(--Line-height-display-xl);
letter-spacing: -1.2px;
margin-bottom: 1.5rem;
}
h2, .h2 {
font-size: var(--font-size-xl);
font-weight: 700;
line-height: 1.22;
margin-bottom: 1rem;
}
h3, .h3 {
font-size: var(--font-size-l);
font-weight: 600;
line-height: 1.27;
}
h4, .h4 {
font-size: var(--font-size-m);
font-weight: 600;
line-height: 1.5;
}
h5, .h5 {
font-size: 1.75rem;
line-height: 1.29;
}
h6, .h6 {
font-size: 1.125rem;
line-height: 1.23;
}
/* Links */
a {
color: var(--colors-text-brand-secondary);
}
a:hover {
color: var(--colors-text-brand-secondary-hover);
}
a.active,
a:active,
a:focus,
a:hover {
text-decoration: underline;
}
/* Text */
b,
strong {
font-weight: 700;
}
i {
font-style: italic;
}
/* Images */
img {
height: auto !important;
max-width: 100% !important;
}
/* Backgrounds */
.bg-lightgray {
background: #F6F9FF;
}
.bg-secondary {
background: var(--colors-bg-secondary) !important;
}
.bg-secondary-alt {
background: var(--colors-bg-secondary-alt);
}
.bg-lightgray-one {
background: url(../images/bg-lightgray-one.svg) no-repeat 50% 100%;
background-color: var(--colors-bg-secondary);
background-size: cover;
}
.section-darkblue {
background: url(../images/home-numbers-bg.svg) no-repeat 0 0;
background-color: rgba(0, 0, 0, 0);
background-size: auto;
background-size: cover;
background-color: var(--Colors-Background-bg-secondary_alt, #161927);
}
.section-darkblue .subheading {
color: var(--colors-text-text-brand-secondary-700, #CECFD2);
}
.section-darkblue.section h2 {
color: var(--colors-text-text-primary-900, #F7F7F7);
}
.section-darkblue p {
color: var(--colors-text-text-secondary-700, #A8ADC8);
}
.section-darkblue .btn,
.section-darkblue .btn:hover {
color: var(--colors-text-text-brand-primary-900, #E0E2EB);
}
.section-darkblue .btn-more-new {
background-image: url(../images/arrow-right-light.svg);
}
/* Revisar si es necesaria */
/* .main-bg {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 1.37%, rgba(245, 249, 255, 0.5) 99.97%);
} */
/* Margins */
.mt-4xl {
margin-top: var(--spacing-4xl);
}
.mt-7xl {
margin-top: var(--spacing-7xl);
}
/* Paddings */
.pt-6xl {
padding-top: var(--spacing-6xl) !important;
}
.pt-8xl {
padding-top: var(--spacing-8xl) !important;
}
.pb-6xl {
padding-bottom: var(--spacing-6xl) !important;
}
.pb-8xl {
padding-bottom: var(--spacing-8xl) !important;
}
.text-sm {
font-size: var(--Font-size-text-sm, 14px);
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}
/*
--------------------------------------------------------------------------------
BOTONES
--------------------------------------------------------------------------------
*/
.btn {
border: none;
line-height: 1.33;
}
.btn:focus {
text-decoration: none;
}
/* Primary */
.btn-primary,
.btn-secondary {
padding: var(--spacing-lg) 1.125rem;
border-radius: var(--radius-full);
/* Shadows/shadow-xs-skeuomorphic */
box-shadow: 0 0 0 1px rgba(10, 13, 18, 0.18) inset,
0 -2px 0 0 rgba(10, 13, 18, 0.05) inset,
0 1px 2px 0 rgba(10, 13, 18, 0.05);
font-size: var(--Font-size-text-md);
font-weight: 600;
line-height: var(--Line-height-text-md);
}
.btn-primary:focus,
.btn-secondary:focus {
box-shadow: 0 0 0 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(10, 13, 18, 0.18)) inset, 0 -2px 0 0 var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05)) inset, 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05)), 0 0 0 2px var(--Colors-Background-bg-primary, #FFF), 0 0 0 4px var(--Colors-Effects-Focus-rings-focus-ring, #3060FF);
}
.btn-primary {
border: 2px solid rgba(255, 255, 255, 0.12);
background: var(--colors-bg-brand-solid);
color: var(--colors-text-white);
--color-arrow: #86B9FF;
--color-arrow-hover: #B3D5FF;
}
.btn-primary:hover {
background: var(--colors-bg-brand-solid-hover);
border-color: rgba(255, 255, 255, 0.12);
}
/* Secondary */
.btn-secondary {
border: 1px solid var(--colors-border-primary);
background: var(--colors-bg-primary);
color: var(--colors-text-brand-secondary);
--color-arrow: #3060FF;
--color-arrow-hover: #0D2EFF;
}
.btn-secondary:hover {
background: var(--colors-bg-brand-primary);
border-color: var(--colors-border-primary);
color: var(--colors-text-brand-secondary);
}
/* Arrow right */
.btn-primary.arrow-right,
.btn-secondary.arrow-right {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
}
.btn-primary.arrow-right::after,
.btn-secondary.arrow-right::after {
content: "";
display: inline-block;
width: .875rem;
height: .875rem;
background-color: currentColor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M0.833252 6.66732H12.4999M6.66659 12.5007L12.4999 6.66732L6.66659 0.833984' stroke='black' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M0.833252 6.66732H12.4999M6.66659 12.5007L12.4999 6.66732L6.66659 0.833984' stroke='black' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
color: var(--color-arrow, inherit);
}
.btn-primary:hover.arrow-right::after,
.btn-secondary:hover.arrow-right::after {
color: var(--color-arrow-hover, inherit);
}
/* Default (Se usa en las paginas Clientes y Sostenibilidad) */
.btn-default {
background: linear-gradient(180deg, rgba(0, 177, 255, 0.5) 0%, #0060FF 100%), #00B1FF;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
border-radius: 21px;
color: #fff;
display: inline-block;
font-size: .9375rem;
font-weight: 500;
letter-spacing: normal;
line-height: 42px;
padding: 0 1.875rem;
text-transform: uppercase;
}
.btn-default:hover {
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
opacity: 1;
color: #fff;
}
/* Outline Primary */
.btn-outline-primary {
background: none;
border: 1.2px solid #99ccff;
color: #fff;
font-weight: 500;
letter-spacing: 0.6px;
line-height: 42px;
padding: 0 30px;
text-transform: uppercase;
-webkit-border-radius: 21px;
-moz-border-radius: 21px;
border-radius: 21px;
}
/* Light */
.btn-light {
background: none;
border: none;
color: #0065ff;
font-weight: 500;
line-height: 42px;
padding: 0 30px;
text-transform: uppercase;
-webkit-border-radius: 21px;
-moz-border-radius: 21px;
border-radius: 21px;
-webkit-box-shadow: 0 10px 20px 0 rgba(88, 53, 167, 0.46);
box-shadow: 0 10px 20px 0 rgba(88, 53, 167, 0.46);
}
/* Warning (Revisar si se usa) */
.btn-warning {
background: none;
border: none;
color: #f7f7f7;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.6px;
line-height: 42px;
padding: 0 30px;
text-transform: uppercase;
background-image: -webkit-linear-gradient(#ffb29b, #e78263);
background-image: -o-linear-gradient(#ffb29b, #e78263);
background-image: linear-gradient(#ffb29b, #e78263);
-webkit-border-radius: 21px;
-moz-border-radius: 21px;
border-radius: 21px;
-webkit-box-shadow: 0 10px 20px 0 #5835a774;
box-shadow: 0 10px 20px 0 #5835a774;
}
/* Dark */
.btn-dark {
background-color: #0060FF;
padding: .5rem 1rem;
font-size: .875rem;
font-weight: 400;
line-height: 1.71;
border-radius: 1.875rem;
}
.btn-dark:hover {
background-color: #0060FF;
box-shadow: 0px 10px 20px rgba(0, 96, 255, 0.25);
opacity: 1;
}
/* Dark new */
.btn-dark-new {
padding: 1rem 1.75rem;
font-size: var(--font-size-s);
font-weight: 600;
}
.btn-dark-new:hover {
color: #FFFFFF;
opacity: 1;
box-shadow: 0px 4px 17px rgba(0, 96, 255, 0.25);
}
.btn-dark-new.outline {
background: #fff;
border: 1px solid #D0D5DD;
color: #052B53;
}
.btn-dark-new.outline:hover {
background: #fff;
color: #052B53;
}
.btn-dark-new.small {
padding: .625rem 1.125rem;
height: 2.75rem;
font-size: var(--font-size-xs);
/* line-height: 1.5; */
}
/* More new */
.btn-more-new {
font-size: var(--font-size-xs);
font-weight: 500;
line-height: 1.5;
color: var(--colors-text-brand-secondary); /*#0060FF*/
background: url('../images/arrow-right.svg') no-repeat 100% 50%;
padding: 0 1.75rem 0 0;
transition: 0.30s padding ease-out;
}
.btn-more-new:hover {
color: var(--colors-text-brand-secondary-hover); /*#0060FF*/
opacity: 1;
padding-right: 2rem;
}
.btn-more-new.dark {
color: #052B53;
background-image: url('../images/arrow-right-dark.svg');
}
.btn-more-new.dark:hover {
color: #052B53;
}
/* Light new */
.btn-light-new {
background: #fff;
border: 2px solid #052B53;
border-radius: .5rem;
padding: .5rem 1.75rem;
box-shadow: none;
font-size: .875rem;
font-weight: 500;
line-height: 1.49;
color: #052B53;
text-transform: none;
}
.btn-light-new:hover {
background-color: #052B53;
border-color: #052B53;
color: #fff;
opacity: 1;
}
/* Dark 1 (Se usa en la pagina Onboarding Cliente) */
.btn-dark-1 {
background-color: #052b53;
color: #fff;
border-radius: 1.875rem;
padding: .5rem 1rem;
font-size: .8125rem;
font-weight: 700;
line-height: 1.615;
text-transform: uppercase;
}
.btn-dark-1:hover {
color: var(--colors-text-white);
box-shadow: 0px 10px 20px rgba(5, 43, 83, 0.25);
opacity: 1;
}
/* Dark 1 (Se usa en la pagina Compara Woffu) */
.btn-dark1 {
background-color: #052B53;
color: #F7F7F7;
border-radius: 1.875rem;
padding: .5rem 2.25rem;
font-size: 15px;
font-weight: 500;
letter-spacing: 1px;
line-height: 1.733;
text-transform: uppercase;
}
.btn-dark1:hover {
box-shadow: 0px 10px 20px rgba(0, 96, 255, 0.25);
opacity: 1;
color: var(--colors-text-white);
}
/* Aplicando nuevos estilos a los botones dark (primary) */
.btn-dark-new,
.btn-dark-1,
.btn-dark1 {
border: 2px solid rgba(255, 255, 255, 0.12);
background: var(--colors-bg-brand-solid);
color: var(--colors-text-white);
border-radius: var(--radius-full);
box-shadow: 0 0 0 1px rgba(10, 13, 18, 0.18) inset, 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}
.btn-dark-new:hover,
.btn-dark-1:hover,
.btn-dark1:hover {
background: var(--colors-bg-brand-solid-hover);
border-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 1px rgba(10, 13, 18, 0.18) inset, 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}
/* Aplicando nuevos estilos a los botones light (secondary) */
.btn-dark-new.outline {
border: 1px solid var(--colors-border-primary);
background: var(--colors-bg-primary);
color: var(--colors-text-brand-secondary);
box-shadow: 0 0 0 1px rgba(10, 13, 18, 0.18) inset,
0 -2px 0 0 rgba(10, 13, 18, 0.05) inset,
0 1px 2px 0 rgba(10, 13, 18, 0.05);
}
.btn-dark-new.outline:hover {
background: var(--colors-bg-brand-primary);
border-color: var(--colors-border-primary);
color: var(--colors-text-brand-secondary);
}
/*
--------------------------------------------------------------------------------
LAYOUT
--------------------------------------------------------------------------------
*/
/* Container */
.container {
max-width: var(--container-max-width-desktop);
padding-left: var(--container-padding-desktop);
padding-right: var(--container-padding-desktop);
}
/* Margin */
.mt-7xl {
margin-top: var(--spacing-7xl);
}
.mb-7xl {
margin-bottom: var(--spacing-7xl);
}
/* Row gap */
.row-gap {
--row-gap-x: var(--spacing-4xl);
--row-gap-y: var(--spacing-4xl);
gap: var(--row-gap-y) 0;
margin-left: calc(var(--row-gap-x) / 2 * -1);
margin-right: calc(var(--row-gap-x) / 2 * -1);
}
.row-gap > div[class*="col-"] {
padding-left: calc(var(--row-gap-x) / 2);
padding-right: calc(var(--row-gap-x) / 2);
}
.g-3xl {
--row-gap-x: var(--spacing-3xl);
--row-gap-y: var(--spacing-3xl);
}
.g-7xl {
--row-gap-x: var(--spacing-7xl);
--row-gap-y: var(--spacing-7xl);
}
.gy-6xl {
--row-gap-y: var(--spacing-6xl);
}
/* Row height 100% */
.row-h-100 .vc_column-inner,
.row-h-100 .vc_column-inner > .wpb_wrapper {
height: 100%;
}
/* Fractional columns */
.col-xs-1\/5,
.col-xs-2\/5,
.col-xs-3\/5,
.col-sm-1\/5,
.col-sm-2\/5,
.col-sm-3\/5,
.col-md-1\/5,
.col-md-2\/5,
.col-md-3\/5,
.col-lg-1\/5,
.col-lg-2\/5,
.col-lg-3\/5 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
/* XS */
.col-xs-1\/5 {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.col-xs-2\/5 {
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
}
.col-xs-3\/5 {
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
/* SM */
@media (min-width: 576px) {
.col-sm-1\/5 {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.col-sm-2\/5 {
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
}
.col-sm-3\/5 {
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
}
/* MD */
@media (min-width: 768px) {
.col-md-1\/5 {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.col-md-2\/5 {
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
}
.col-md-3\/5 {
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
}
/* LG */
@media (min-width: 992px) {
.col-lg-1\/5 {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.col-lg-2\/5 {
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
}
.col-lg-3\/5 {
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
}
/*
--------------------------------------------------------------------------------
HEADER
--------------------------------------------------------------------------------
*/
#header {
background: none;
background-size: 100% 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
position: static; /* Revisar si puedo quitar las reglas de position absolute (esta viene de style-new) */
z-index: 2;
-webkit-transition: background-size .5sn;
-moz-transition: background-size .5s;
-ms-transition: background-size .5s;
-o-transition: background-size .5s;
transition: background-size .5s;
}
/* Affix */
#header.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10;
border-bottom: 1px solid rgba(97, 120, 146, 0.10);
}
.admin-bar #header.affix {
top: 32px;
}
#header.affix .container-fixed {
position: relative;
}
/* TOGGLER */
#header nav .navbar-toggler {
background: url(../images/navbar-toggler-icon-close.svg) no-repeat 50% 50%;
height: 1.5rem;
margin: 0 1rem 0 0;
width: 1.5rem;
padding: 0;
}
#header nav .navbar-toggler.collapsed {
background-image: url(../images/navbar-toggler-icon-open.svg);
}
#header nav .navbar-toggler:focus {
outline: none;
}
/*
--------------------------------------------------------------------------------
HEADER MENUS
--------------------------------------------------------------------------------
*/
/* Nav */
.navbar {
padding: 1.125rem 0;
}
#header nav {
display: flex;
align-items: center;
gap: var(--spacing-xl);
align-self: stretch;
/* padding: 1.125rem 0; */
}
#header nav .container {
justify-content: start;
padding-left: var(--container-padding-desktop);
padding-right: var(--container-padding-desktop);
}
/* #header:not(.affix) nav.navbar-single {
padding: 3.125rem 0 1.25rem 0;
} */
#header.affix nav {
color: #617892;
background: #FFFFFF !important;
}
#header.affix .navbar-single {
display: none;
}
#header nav .navbar-brand {
color: #fff;
font-size: 2rem;
line-height: 1;
padding: 0;
/* max-width: 6.0625rem; */
margin-right: 3.875rem;
}
#header nav .navbar-brand .logo-desktop {
width: 6.0625rem;
}
#header nav .navbar-brand .logo-mobile {
width: 2.5rem;
}
#header nav .navbar-brand .show-desktop {
display: block;
}
#header nav .navbar-brand .show-mobile {
display: none;
}
@media (max-width: 1200px) {
#header nav .navbar-brand .show-desktop {
display: none;
}
#header nav .navbar-brand .show-mobile {
display: block;
}
}
#header nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 1rem;
}
#header nav li a:hover,
#header nav li a:focus {
text-decoration: none;
}
#header nav .dropdown:hover .dropdown-menu {
display: block;
}
#header nav .dropdown .dropdown-menu,
#header nav .dropdown .sub-menu {
background: #006cff;
min-width: 250px;
padding: 15px 20px;
left: -20px;
top: 70%;
border-radius: 10px;
box-shadow: 0 3px 31px 0 #00000016, 0 3px 31px 0 #00000012;
}
#header.affix nav .dropdown .dropdown-menu,
#header.affix nav .dropdown .sub-menu {
background: #fff;
}
#header nav .dropdown .submenu,
#header nav .dropdown .sub-menu li,
#header nav .dropdown .dropdown-menu ul,
#header nav .dropdown .dropdown-menu ul li {
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
}
#header nav .dropdown .dropdown-menu a,
#header nav .dropdown .sub-menu a {
color: #f7f7f7;
display: block;
font-size: 13px;
font-weight: 300;
line-height: 26px;
letter-spacing: -0.2px;
margin: 0;
padding: 0;
}
#header.affix nav .dropdown .dropdown-menu a,
#header.affix nav .dropdown .sub-menu a {
color: #617892;
}
/* MENU DROPDOWN */
#header nav .sub-menu {
display: none;
position: absolute;
z-index: 1000;
text-align: left;
border: 1px solid rgba(0, 0, 0, 0.15);
background: #fff;
padding: 15px 20px;
left: 0;
top: 100%;
border-radius: 10px;
box-shadow: 0 3px 31px 0 #00000016, 0 3px 31px 0 #00000012;
flex-direction: column;
}
#header nav ul.sub-menu li {
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
}
#header nav ul.sub-menu li a:hover {
color: var(--colors-text-brand-secondary);
}
#header nav .menu-item-has-children {
position: relative;
display: flex;
align-items: center;
gap: 4px;
}
#header nav .menu-item-has-children::after {
background: url('data:image/svg+xml,');
content: "";
display: block;
width: .625rem;
height: .375rem;
}
#header nav .menu-item-has-children:hover>.sub-menu {
display: flex;
}
/* Language switcher */
/* Top menu */
#header nav .top-nav-menu {
margin-left: auto;
}
.top-nav-menu {
display: flex;
list-style: none outside none;
padding-left: 0;
margin-bottom: 0;
gap: 1rem;
justify-content: end;
align-items: center;
}
.top-nav-menu .menu-link {
color: var(--colors-foreground-primary-900);
font-size: var(--Font-size-text-sm);
font-weight: 600;
line-height: var(--Line-height-text-sm);
}
.top-nav-menu .menu-link:hover {
text-decoration: none;
}
.top-menu-icon .menu-link {
padding-left: 1.5rem;
background-repeat: no-repeat;
background-position: 0 50%;
}
/* Menu buttons */
.menu-button .menu-link {
display: flex;
padding: 10px var(--spacing-xl);
justify-content: center;
align-items: center;
gap: var(--spacing-sm, 6px);
/* Text md/Semibold */
font-size: var(--Font-size-text-md);
font-weight: 600;
line-height: var(--Line-height-text-md);
text-align: center;
border-radius: var(--radius-full);
/* Shadows/shadow-xs-skeuomorphic */
box-shadow: 0 0 0 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(10, 13, 18, 0.18)) inset,
0 -2px 0 0 var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05)) inset,
0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05));
}
.menu-button .menu-link:hover {
text-decoration: none;
}
.menu-button-secondary .menu-link {
border: 1px solid var(--colors-border-primary);
background: var(--colors-bg-primary);
color: var(--colors-text-brand-secondary);
}
.menu-button-secondary .menu-link:hover {
background: var(--colors-bg-brand-primary);
border-color: var(--colors-border-primary);
color: var(--colors-text-brand-secondary);
}
.menu-button-primary .menu-link {
border: 2px solid rgba(255, 255, 255, 0.12);
background: var(--colors-bg-brand-solid);
color: var(--Colors-Text-text-white, #FFF);
}
.menu-button-primary .menu-link:hover {
background: var(--colors-bg-brand-solid-hover);
border-color: rgba(255, 255, 255, 0.12);
}
.menu-button-secondary .menu-link:focus,
.menu-button-primary .menu-link:focus {
box-shadow: 0 0 0 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(10, 13, 18, 0.18)) inset, 0 -2px 0 0 var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05)) inset, 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05)), 0 0 0 2px var(--Colors-Background-bg-primary, #FFF), 0 0 0 4px var(--Colors-Effects-Focus-rings-focus-ring, #3060FF);
}
/*
--------------------------------------------------------------------------------
MEGA MENU
--------------------------------------------------------------------------------
*/
#mega-menu-wrap-top_nav {
background: none;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item > a.mega-menu-link {
height: auto;
color: var(--colors-text-secondary-700);
font-size: var(--Font-size-text-md, 16px);
font-weight: 600 !important;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
#mega-menu-wrap-top_nav #mega-menu-top_nav li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
color: var(--colors-foreground-fg-quaternary-400, #A4A7AE);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item > a.mega-menu-link:hover .mega-indicator,
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
color: var(--colors-text-brand-secondary);
font-weight: 600;
background: none;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
color: var(--colors-text-brand-secondary);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item:not(.menu-button) > a.mega-menu-link {
background: none;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav li.mega-menu-item-has-children.mega-toggle-on>a.mega-menu-link>span.mega-indicator::after {
transform: rotate(180deg);
}
/* Menu buttons */
/* #mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.menu-button-light > a.mega-menu-link,
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.menu-button-light > a.mega-menu-link:hover {
border-radius: 8px;
border: 1px solid #D0D5DD;
background: #FFF;
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
color: #052B53 !important;
font-weight: 500;
padding: .625rem 1.125rem;
line-height: 1.5;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.menu-button-dark > a.mega-menu-link,
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.menu-button-dark > a.mega-menu-link:hover {
border-radius: 8px;
border: 1px solid #052B53;
background: #052B53;
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
color: #fff !important;
font-weight: 500;
padding: .625rem 1.125rem;
line-height: 1.5;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.menu-button-light > a.mega-menu-link:hover,
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.menu-button-dark > a.mega-menu-link:hover {
box-shadow: 0px 4px 17px rgba(0, 96, 255, 0.25);
}
#mega-menu-wrap-top_nav .menu-button {
margin-left: .75rem !important;
} */
/* Submenu */
#mega-menu-wrap-top_nav #mega-menu-top_nav li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.menu-icon:hover {
background-color: #ECF4FF;
border-radius: .75rem;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu li.mega-menu-item.menu-icon > a.mega-menu-link {
display: flex;
color: var(--colors-text-primary-900);
font-weight: 600;
background: none;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu li.megamenu-item.menu-icon > a.mega-menu-link:hover,
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu li.megamenu-item.menu-icon > a.mega-menu-link:focus {
font-weight: 600;
background: none;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.menu-icon > a.mega-menu-link .mega-menu-description {
color: var(--colors-text-tertiary-600); /*#617892*/
font-size: .875rem;
font-weight: 400;
font-style: normal; /* Importante: el plugin pone italic */
line-height: 1.42;
min-height: 2.5rem;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav li.mega-menu-item.menu-icon a.mega-menu-link::before {
flex-basis: 2.5rem;
flex-shrink: 0;
flex-grow: 0;
margin-right: 0;
}
/* Producto */
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.control-horario .mega-menu-link::before {
content: url(../images/menu-icon-control-horario.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.app-fichaje .mega-menu-link::before {
content: url(../images/menu-icon-app-fichaje.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.canal-denuncias .mega-menu-link::before {
content: url(../images/menu-icon-canal-denuncias.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.comunicacion-interna .mega-menu-link::before {
content: url(../images/menu-icon-comunicacion-interna.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.gestion-turnos .mega-menu-link::before {
content: url(../images/menu-icon-gestion-turnos.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.informes-rrhh .mega-menu-link::before {
content: url(../images/menu-icon-informes-rrhh.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.vacaciones-ausencias .mega-menu-link::before {
content: url(../images/menu-icon-vacaciones-ausencias.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.evaluacion-desempeno .mega-menu-link::before {
content: url(../images/menu-icon-evaluacion-desempeno.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.formacion-empresarial .mega-menu-link::before {
content: url(../images/menu-icon-formacion-empresarial.svg);
}
/* Por qué Woffu */
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.normativa-laboral .mega-menu-link::before {
content: url(../images/menu-icon-normativa-laboral.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.servicio-postventa .mega-menu-link::before {
content: url(../images/menu-icon-servicio-postventa.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.implementacion-guiada .mega-menu-link::before {
content: url(../images/menu-icon-implementacion-guiada.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.compara-woffu .mega-menu-link::before {
content: url(../images/menu-icon-compara-woffu.svg);
}
/* Especialistas en tu sector */
#mega-menu-wrap-top_nav #mega-menu-top_nav li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.sectores {
padding-top: 0;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.sectores > a.mega-menu-link {
color: var(--colors-text-brand-secondary); /*#0060FF*/
font-size: .875rem;
line-height: 1.42;
display: block;
margin-bottom: 1.25rem;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon[class*="sector-"] {
margin-bottom: 1.25rem;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon[class*="sector-"] .mega-menu-link {
color: var(--colors-text-primary-900) !important; /*#052B53*/
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 30px !important;
background-repeat: no-repeat !important;
padding-left: 3rem !important;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon[class*="sector-"] .mega-menu-link:hover {
color: var(--colors-text-brand-secondary) !important; /*#0060FF*/
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.sector-alimentacion .mega-menu-link {
background-image: url(../images/menu-icon-sector-alimentacion.svg) !important;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.sector-farmaceutico .mega-menu-link {
background-image: url(../images/menu-icon-sector-farmaceutico.svg) !important;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.sector-automocion .mega-menu-link {
background-image: url(../images/menu-icon-sector-automocion.svg) !important;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.sector-media .mega-menu-link {
background-image: url(../images/menu-icon-sector-media.svg) !important;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.sector-bienes-consumo .mega-menu-link {
background-image: url(../images/menu-icon-sector-bienes-consumo.svg) !important;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.sector-finanzas .mega-menu-link {
background-image: url(../images/menu-icon-sector-finanzas.svg) !important;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.sector-industrial .mega-menu-link {
background-image: url(../images/menu-icon-sector-industrial.svg) !important;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.sector-ongs-fundaciones .mega-menu-link {
background-image: url(../images/menu-icon-sector-ong.svg) !important;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.sector-logistica .mega-menu-link {
background-image: url(../images/menu-icon-sector-logistica.svg) !important;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.sector-construccion .mega-menu-link {
background-image: url(../images/menu-icon-sector-construccion.svg) !important;
}
/* Conoce Woffu */
#mega-menu-wrap-top_nav #mega-menu-top_nav>li.mega-menu-item.conoce-woffu>.mega-sub-menu .mega-menu-row {
padding: 2rem 1.125rem;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav>li.mega-menu-item.conoce-woffu>.mega-sub-menu .mega-menu-row:last-child {
background-color: #FAFCFF;
padding: 1.5rem 1.125rem;
border-top: 1px solid #E4E7EC;
border-radius: 0 0 .75rem .75rem;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.clientes .mega-menu-link::before {
content: url(../images/menu-icon-clientes.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.quienes-somos .mega-menu-link::before {
content: url(../images/menu-icon-quienes-somos.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.integraciones .mega-menu-link::before {
content: url(../images/menu-icon-integraciones.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.sostenibilidad .mega-menu-link::before {
content: url(../images/menu-icon-sostenibilidad.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.blog .mega-menu-link::before {
content: url(../images/menu-icon-blog.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.recursos .mega-menu-link::before {
content: url(../images/menu-icon-recursos.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.blog-normativa .mega-menu-link::before {
content: url(../images/menu-icon-blog-normativa.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.blog-personas .mega-menu-link::before {
content: url(../images/menu-icon-blog-personas.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.blog-control-horario .mega-menu-link::before {
content: url(../images/menu-icon-blog-control-horario.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.blog-casos-exito .mega-menu-link::before {
content: url(../images/menu-icon-blog-casos-exito.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.blog-noticias .mega-menu-link::before {
content: url(../images/menu-icon-blog-noticias.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.help-center .mega-menu-link::before {
content: url(../images/menu-icon-help-center.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.woffu-academy .mega-menu-link::before {
content: url(../images/menu-icon-woffu-academy.svg);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.help-center,
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.woffu-academy {
padding-top: .25rem !important;
padding-bottom: .25rem !important;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.help-center .mega-menu-link,
#mega-menu-wrap-top_nav #mega-menu-top_nav .menu-icon.woffu-academy .mega-menu-link {
color: var(--colors-text-brand-secondary) !important; /*#0060FF*/
}
/*
--------------------------------------------------------------------------------
HEADER BARS
--------------------------------------------------------------------------------
*/
/* Top bar */
#topbar {
background-color: #14375D;
color: #fff;
font-size: 1.125rem;
font-weight: 400;
display: block;
}
#topbar .container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 52px;
}
#topbar b {
font-weight: 600;
}
#topbar a {
color: #fff;
text-decoration: underline;
}
#topbar .btn {
background-color: #FF9878;
color: #fff;
text-transform: uppercase;
font-size: 0.875rem;
/*14px*/
line-height: 2.5;
padding: 0 1.125rem;
border-radius: 1.125rem;
}
#topbar:hover,
#topbar .btn:hover {
opacity: 1;
text-decoration: none;
}
/* Bottom bar */
#bottombar {
background-color: #DBFFE1;
text-align: center;
color: #617892;
font-size: 1.125rem;
line-height: 1.3333;
padding: 13px 20px 14px 20px;
}
a#bottombar {
display: block;
}
a#bottombar:hover {
opacity: 1;
text-decoration: none;
}
#bottombar b {
font-weight: 500;
}
#bottombar a {
color: #4CD964;
font-weight: 600;
text-decoration: underline;
}
#bottombar img {
display: inline-block;
vertical-align: middle;
margin-right: 6px;
}
#bottombar span {
display: inline-block;
vertical-align: middle;
}
/* Bottom bar 1 */
#bottombar.dark {
background-color: #052B53;
color: #fff;
padding: 11px 20px 11px 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
font-weight: 600;
}
#bottombar.dark img {
margin-right: .1875rem;
}
#bottombar.dark span.button {
background-color: #4CD964;
padding: 2.5px 18px;
border-radius: .5rem;
margin-left: 1.4375rem;
}
/*
--------------------------------------------------------------------------------
GENERAL
--------------------------------------------------------------------------------
*/
/* Headings */
.subheading {
color: var(--colors-text-brand-secondary);
/* Display xs/Semibold */
font-size: var(--Font-size-display-xs);
font-weight: 600;
line-height: var(--Line-height-display-xs);
}
.subheading-light {
color: var(--Component-colors-Utility-Brand-utility-brand-400, #578BFF);
/* Text xl/Semibold */
font-size: var(--Font-size-text-xl, 20px);
font-weight: 600;
line-height: var(--Line-height-text-xl, 30px); /* 150% */
}
.overtitle {
color: var(--colors-text-brand-secondary); /*#0060FF*/
font-weight: 600;
}
.accent-title {
border-radius: 9999px;
border: 1px solid #BED6FF;
background: #EDF4FF;
padding: var(--spacing-xs, 4px) var(--spacing-xl, 16px);
color: var(--colors-text-brand-secondary); /*#0060FF*/
font-size: var(--font-size-xs);
font-weight: 600;
line-height: 1.5;
width: fit-content;
margin-bottom: 1.25rem;
}
.accent-title.lightgray {
color: #fff;
background: rgba(12, 14, 18, 0.10);
border-color: rgba(255, 255, 255, 0.12);
}
.accent-title.light {
color: #454C6B;
background: #fff;
border-color: #fff;
}
.badge-title {
background: var(--Colors-Background-bg-brand-solid, #0D2EFF);
border: 1px solid var(--Colors-Foreground-fg-brand-primary_alt, #0D2EFF);
border-radius: var(--radius-full, 9999px);
display: flex;
padding: var(--spacing-xs, 4px) var(--spacing-lg, 12px);
align-items: center;
gap: var(--spacing-md, 8px);
color: var(--Colors-Text-text-primary_on-brand, #FFF);
/* Text sm/Medium */
font-size: var(--Font-size-text-sm, 14px);
font-weight: 500;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}
.badge-title[class*="icon-"] {
background-repeat: no-repeat;
background-position: calc(100% - var(--spacing-lg)) 50%;
padding-right: calc(var(--icon-width, 1rem) + .25rem + var(--spacing-lg));
}
.badge-title.icon-percent {
background-image: url(../images/icon-percent-single.svg);
--icon-width: 1rem;
}
/* Checked list */
.checked-list ul {
list-style: none;
padding-left: 1rem;
text-align: left;
}
.checked-list ul > li {
background: url('../images/check-border.svg') no-repeat 0 0;
padding-left: 2.5rem;
font-size: 1.125rem;
line-height: 1.56;
}
.checked-list ul > li + li {
margin-top: 1.25rem;
}
/* Check single list */
.check-single-list ul {
list-style: none outside none;
padding: 0;
margin: 0;
}
.check-single-list ul li {
background: url(../images/check-simple-green.svg) no-repeat 0 2px;
padding-left: 1.625rem;
}
.check-single-list ul li + li {
margin-top: .5rem;
}
/* Legal list (Se usa en la pagina Politica de privacidad) */
.legal-list > li + li {
margin-top: 1rem;
}
.legal-list > li > ul {
line-height: 1.5;
margin-top: 0.5rem;
}
/* Info block */
.info-block {
border-radius: var(--radius-2xl, 16px);
border: 1px solid var(--Component-colors-Utility-Brand-utility-brand-200, #B3D5FF);
background: var(--Colors-Background-bg-brand-primary, #E8F4FF);
padding: 32px;
color: var(--Colors-Text-text-secondary_hover, #252B37);
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px);
}
.info-block p strong {
color: var(--Colors-Text-text-secondary_hover, #252B37);
}
.info-block.lightgray {
background-color: var(--Colors-Background-bg-secondary, #FAFAFA);
border-color: var(--Colors-Border-border-primary, #D5D7DA);
}
/*
--------------------------------------------------------------------------------
HERO
--------------------------------------------------------------------------------
*/
.hero {
background: linear-gradient(180deg, #FFFFFF 1.37%, #F5F9FF 37.64%, #E4ECFA 100%);
padding-top: 5rem !important;
padding-bottom: 5rem;
margin-bottom: 50px;
/* color: #617892; */
font-size: 1.25rem;
font-weight: 400;
line-height: 1.5;
text-align: center;
}
.use-topbar .hero {
padding-top: 132px;
}
.use-bottombar .hero {
padding-top: calc(80px + 51px);
}
.hero .container {
padding: 0 15px;
}
.hero .article {
margin: 25px auto 0 auto;
padding: 0;
max-width: 475px;
}
.page-title {
/* Display lg/Bold */
font-size: var(--Font-size-display-lg);
font-weight: 700;
line-height: var(--Line-height-display-lg);
letter-spacing: -0.96px;
text-wrap: balance;
}
.hero p {
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
max-width: 360px;
}
/* Hero simple */
.hero-simple {
margin-bottom: 0;
}
.hero-simple p {
max-width: 100%;
}
/*
--------------------------------------------------------------------------------
1. PAGE: HOME
--------------------------------------------------------------------------------
*/
/* 1.0 GENERAL --------------------------------------*/
.section,
[class*="section-home"] {
padding-top: var(--spacing-9xl);
padding-bottom: var(--spacing-9xl);
color: var(--colors-text-tertiary-600);
}
.section strong,
[class*="section-home"] strong {
color: var(--colors-text-primary-900);
}
.section-header {
color: var(--colors-text-tertiary-600);
/* Text xl/Regular */
font-size: var(--Font-size-text-xl);
font-weight: 500;
line-height: var(--Line-height-text-xl);
margin-bottom: var(--spacing-7xl);
}
.section-header.strech {
max-width: 545px;
}
.section-header .section-header {
margin-bottom: 0;
}
.section-header > div.wpb_wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-2xl);
align-self: stretch;
}
.section-home-hero h1 {
/* Display 2xl/Bold */
font-size: var(--Font-size-display-2xl);
line-height: var(--Line-height-display-2xl);
letter-spacing: -1.44px;
}
.section-header h1 strong {
color: var(--colors-text-brand-tertiary-600);
}
.section-header h2 {
/* Display md/Bold */
font-size: var(--Font-size-display-md);
line-height: var(--Line-height-display-md);
letter-spacing: -0.72px;
text-wrap: balance;
}
.section-header h3 {
/* Display sm/Semibold */
font-size: var(--Font-size-display-sm);
line-height: var(--Line-height-display-sm);
font-weight: 600;
}
.section-header strong {
color: var(--colors-text-tertiary-600);
}
.section-header.center {
max-width: var(--width-xl, 768px);
margin-left: auto;
margin-right: auto;
text-align: center;
}
.section-header.center > div.wpb_wrapper {
align-items: center;
}
/* Row actions */
.row-actions {
width: 100%;
--row-gap-x: 0;
}
.row-actions .actions-container > .wpb_wrapper {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-lg);
}
/* Check list */
.check-list ul {
display: flex;
padding-left: var(--spacing-xl, 16px);
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-2xl, 20px);
align-self: stretch;
list-style: none outside none;
/* Text md/Medium */
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
}
.check-list ul > li {
background: url('data:image/svg+xml,') no-repeat 0 0;
background-size: 1.75rem auto;
padding-left: calc(1.75rem + var(--spacing-lg));
line-height: 1.75rem;
}
/* Check list - Accent */
.check-list.accent ul {
color: var(--colors-text-primary-900);
font-weight: 500;
}
/* Check list - Icon circle green */
.check-list.icon-circle-green {
color: inherit;
}
.check-list.icon-circle-green ul > li {
background-image: url('data:image/svg+xml,');
}
/* 1.1 HERO -----------------------------------------*/
.section-home-hero {
background: url(../images/home-hero-bg.svg) no-repeat 100% 0;
padding-top: var(--spacing-7xl);
}
.home-hero-video {
margin-left: auto;
}
.home-hero-video .overload {
position: absolute;
box-shadow: 0 20px 24px -4px var(--Colors-Effects-Shadows-shadow-xl_01, rgba(10, 13, 18, 0.08)),
0 8px 8px -4px var(--Colors-Effects-Shadows-shadow-xl_02, rgba(10, 13, 18, 0.03)),
0 3px 3px -1.5px var(--Colors-Effects-Shadows-shadow-xl_03, rgba(10, 13, 18, 0.04));
border-radius: 16px;
overflow: hidden;
}
.home-hero-video .overload-1 {
top: 1.375rem;
left: -5.625rem;
max-width: 361px;
}
.home-hero-video .overload-2 {
top: 10.625rem;
right: -5.625rem;
max-width: 249px;
}
.home-hero-video .overload-3 {
bottom: 1.875rem;
left: 2.8125rem;
max-width: 314px;
}
.section-home-hero .row-actions .wpb_wrapper {
margin-top: var(--spacing-3xl);
margin-bottom: var(--spacing-3xl);
}
.rate-caption > .wpb_wrapper {
display: flex;
align-items: flex-start;
gap: var(--spacing-xl) var(--spacing-3xl);
color: var(--colors-text-tertiary-600);
/* Text sm/Medium */
font-size: var(--Font-size-text-sm, 14px);
font-weight: 500;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}
.rate-caption p {
margin-bottom: .25rem;
}
.rate-caption img {
vertical-align: middle;
}
.rate-caption img + strong {
vertical-align: middle;
margin-left: .5rem;
}
/* 1.2 LOGOS ----------------------------------------*/
.section-home-logos {
padding-top: var(--spacing-none);
padding-bottom: var(--spacing-5xl);
}
.section-home-logos .features-logos {
padding: 0;
background: #fff;
}
.section-home-logos .features-logos .clients-text {
color: var(--colors-text-text-tertiary-600, #535862);
text-align: center;
text-wrap: balance;
/* Text lg/Medium */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 500;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
.section-home-logos .features-logos .imagelist {
justify-content: center;
gap: var(--spacing-5xl);
}
@media screen and (min-width: 768px) {
.imagelist-container.logos-marquee-mobile li[aria-hidden="true"] {
display: none;
}
}
/* 1.3 TESTIMONIALS ---------------------------------*/
.section-home-testimonials {
padding-top: var(--spacing-4xl);
padding-bottom: var(--spacing-7xl);
}
.testimonials-slider .vc_tta-panel .vc_tta-panel-body {
padding: var(--spacing-7xl, 64px) !important;
border-radius: var(--radius-4xl, 24px);
background: var(--Colors-Background-bg-secondary, #FAFAFA) !important;
}
.testimonials-slider-row {
align-items: center;
}
.testimonials-slider-caption {
color: var(--colors-text-tertiary-600);
/* Text md/Regular */
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.testimonials-slider-caption > .wpb_wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-3xl, 24px);
align-self: stretch;
}
.testimonials-slider-caption .testimonial-text {
color: var(--colors-text-primary-900);
/* Display sm/Semibold */
font-size: var(--Font-size-display-sm);
font-weight: 600;
line-height: var(--Line-height-display-sm);
}
.section-home-testimonials .vc_pagination-color-grey.vc_pagination-style-outline .vc_pagination-trigger {
background: var(--Colors-Background-bg-quaternary, #E9EAEB);
border: none;
}
.vc_pagination-color-grey.vc_pagination-style-outline .vc_pagination-trigger {
background-color: #E9EAEB;
border-color: #E9EAEB;
}
.vc_pagination-color-grey.vc_pagination-style-flat .vc_pagination-trigger,
.vc_pagination-color-grey.vc_pagination-style-outline .vc_active .vc_pagination-trigger,
.vc_pagination-color-grey.vc_pagination-style-outline .vc_pagination-trigger:hover {
background-color: var(--colors-bg-brand-solid);
border-color: var(--colors-bg-brand-solid);
}
/* 1.4 PROFILES -------------------------------------*/
.section-home-profiles {
background: var(--Colors-Background-bg-secondary_alt, #FAFAFA);
}
.home-profile-item {
font-size: 1rem;
}
.woffu-tabs-image-trigger .home-profile-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #fff;
}
.woffu-tabs-image-trigger.is-active .home-profile-item::before {
background: linear-gradient( to left, #fff 0%, #e0f2fe 12%, #b3d5ff 34%, #86b9ff 46%, #3060ff 65%, #0a0a0a 100% );
}
.home-profile-item > .wpb_wrapper {
display: flex;
padding: var(--spacing-3xl, 24px) var(--spacing-xl, 16px) 0 var(--spacing-xl, 16px);
flex-direction: column;
align-items: center;
gap: var(--spacing-xl, 16px);
flex: 1 0 0;
text-align: center;
}
.home-profile-item h3 {
color: var(--colors-text-primary-900);
text-align: center;
/* Text lg/Semibold */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 600;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
margin-bottom: 0;
}
/* 1.5 VALUES ---------------------------------------*/
.section-home-values {
background: var(--colors-bg-secondary);
background-image: url(../images/home-values-bg.svg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 100%;
padding-bottom: var(--spacing-11xl);
}
.home-values-row {
--row-gap-x: 1.5rem;
--row-gap-y: 1.5rem;
}
.home-values-card {
border-radius: 28.354px;
background: var(--Colors-Background-bg-primary, #FFF);
backdrop-filter: blur(10.632911682128906px);
padding: var(--spacing-5xl) var(--spacing-5xl) 0 var(--spacing-5xl);
color: var(--colors-text-tertiary-600);
/* Text md/Semibold */
font-size: var(--Font-size-text-md, 16px);
font-weight: 600;
line-height: var(--Line-height-text-md, 24px); /* 150% */
overflow: hidden;
}
.home-values-card > .wpb_wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xl, 16px);
align-self: stretch;
}
.home-values-card h3 {
color: var(--colors-text-primary-900);
/* Display sm/Semibold */
font-size: var(--Font-size-display-sm, 30px);
font-weight: 600;
line-height: var(--Line-height-display-sm, 38px); /* 126.667% */
}
.home-values-card .subheading {
color: var(--colors-text-brand-secondary);
/* Text md/Semibold */
font-size: var(--Font-size-text-md, 16px);
font-weight: 600;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.home-values-card p {
margin-bottom: var(--spacing-2xl);
}
.home-values-card .img {
margin-left: calc(-1 * var(--spacing-5xl));
margin-right: calc(-1 * var(--spacing-5xl));
width: calc(100% + 2 * var(--spacing-5xl));
margin-top: auto;
}
.home-values-card .img img {
width: 100%;
}
/* 1.6 FEATURES -------------------------------------*/
/* Features tabs */
.section-home-features .vc_tta-container {
margin-bottom: var(--spacing-7xl);
}
.home-features-tabs .vc_tta-panel-body {
padding-top: var(--spacing-7xl) !important;
}
.home-features-tabs.vc_tta.vc_general .vc_tta-tabs-list {
display: inline-flex;
padding: var(--spacing-xs, 4px);
align-items: center;
gap: var(--spacing-md, 8px);
border-radius: var(--radius-full, 9999px);
border: 1px solid var(--Colors-Border-border-secondary, #E9EAEB);
background: var(--colors-bg-secondary);
backdrop-filter: blur(4px);
}
.home-features-tabs.vc_tta-color-white.vc_tta-style-flat .vc_tta-tab > a {
color: var(--colors-text-primary-900);
/* Text sm/Semibold */
font-size: var(--Font-size-text-sm);
font-weight: 600;
line-height: var(--Line-height-text-sm);
display: flex;
height: 2.25rem;
padding: var(--spacing-md) var(--spacing-lg);
justify-content: center;
align-items: center;
gap: var(--spacing-md);
border-radius: var(--radius-full) !important;
background-color: transparent;
/* Shadows/shadow-sm */
box-shadow: none;
background-repeat: no-repeat;
background-position: .25rem;
padding-left: 1.75rem;
}
.home-features-tabs.vc_tta-color-white.vc_tta-style-flat .vc_tta-tab.vc_active > a ,
.home-features-tabs.vc_tta-color-white.vc_tta-style-flat .vc_tta-tab > a:hover {
background-color: var(--colors-bg-primary);
/* Shadows/shadow-sm */
box-shadow: 0 1px 3px 0 var(--Colors-Effects-Shadows-shadow-sm_01, rgba(10, 13, 18, 0.10)),
0 1px 2px -1px var(--Colors-Effects-Shadows-shadow-sm_02, rgba(10, 13, 18, 0.10));
color: var(--colors-text-primary-900);
}
.home-features-tabs .vc_tta-tab > a#tab-tab-control-horario {
background-image: url(../images/tab-icon-clock-stopwatch.svg);
}
.home-features-tabs .vc_tta-tab > a#tab-tab-ausencias {
background-image: url(../images/tab-icon-plane.svg);
}
.home-features-tabs .vc_tta-tab > a#tab-tab-turnos {
background-image: url(../images/tab-icon-rows.svg);
}
.home-features-tabs .vc_tta-tab > a#tab-tab-comunicacion-interna {
background-image: url(../images/tab-icon-message-dots-square.svg);
}
.home-features-tabs .vc_tta-tab > a#tab-tab-gestion-documental {
background-image: url(../images/tab-icon-folder.svg);
}
.home-features-tabs .vc_tta-tab > a#tab-tab-informes {
background-image: url(../images/tab-icon-line-chart-up.svg);
}
.home-features-tabs .vc_tta-tab > a#tab-tab-denuncias {
background-image: url(../images/tab-icon-shield-zap.svg);
}
/* Feature row */
.home-feature-row {
--row-gap-x: var(--spacing-7xl);
--row-gap-y: 2rem;
align-items: center;
}
.home-feature-text {
color: var(--colors-text-tertiary-600);
/* Text md/Regular */
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.home-feature-text > .wpb_wrapper {
display: flex;
padding: var(--spacing-xl, 16px) 0 var(--spacing-xl, 16px) var(--spacing-3xl, 24px);
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xl, 16px);
align-self: stretch;
}
.home-feature-text p {
margin-bottom: 0;
}
.home-feature-text a {
color: var(--colors-text-brand-secondary);
font-size: var(--Font-size-text-md, 16px);
font-weight: 600;
line-height: var(--Line-height-text-md, 24px);
display: inline-flex;
align-items: center;
gap: .5rem;
transition: 0.30s gap ease-out;
}
.home-feature-text a::after {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background-color: currentColor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M0.833252 6.66732H12.4999M6.66659 12.5007L12.4999 6.66732L6.66659 0.833984' stroke='black' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M0.833252 6.66732H12.4999M6.66659 12.5007L12.4999 6.66732L6.66659 0.833984' stroke='black' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.home-feature-text a:hover {
color: var(--colors-text-brand-secondary-hover);
gap: .75rem;
text-decoration: none;
}
/* Features premium */
.section-home-features .section-header h3 {
text-wrap: balance;
}
.home-feature-premium {
display: flex;
padding: var(--spacing-4xl, 32px);
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-6xl, 48px);
flex: 1 0 0;
border-radius: var(--radius-2xl, 16px);
background-color: #FAFAFA;
}
.home-feature-premium-bg-1 {
background-image: url(../images/home-feature-premium-bg-1.png);
background-repeat: no-repeat;
background-position: 100% 100%;
background-size: contain;
}
.home-feature-premium-bg-2 {
background-image: url(../images/home-feature-premium-bg-2.png);
background-repeat: no-repeat;
background-position: 100% 100%;
background-size: auto;
}
.home-feature-premium > .wpb_wrapper {
max-width: 380px;
color: var(--colors-text-text-secondary-700, #414651);
font-size: var(--Font-size-text-lg, 18px);
font-weight: 500;
line-height: var(--Line-height-text-lg, 28px);
padding: 0;
}
.home-feature-premium strong {
color: var(--colors-text-primary-900);
font-size: var(--Font-size-text-lg, 18px);
font-weight: 700;
line-height: var(--Line-height-text-lg, 28px);
}
.home-feature-premium a {
color: var(--colors-text-brand-secondary);
font-size: var(--Font-size-text-md, 16px);
font-weight: 600;
line-height: var(--Line-height-text-md, 24px);
display: inline-flex;
align-items: center;
gap: 8px;
}
.home-feature-premium a::after {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background-color: currentColor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M0.833252 6.66732H12.4999M6.66659 12.5007L12.4999 6.66732L6.66659 0.833984' stroke='black' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M0.833252 6.66732H12.4999M6.66659 12.5007L12.4999 6.66732L6.66659 0.833984' stroke='black' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
/* 1.7 IA -------------------------------------------*/
.section-home-ia {
background: var(--colors-bg-secondary);
}
.section-home-ia .section-header {
font-weight: 600;
max-width: 41.125rem !important;
}
.home-ia-row {
--row-gap-x: var(--spacing-xl);
--row-gap-y: var(--spacing-3xl);
}
.card-home-ia {
border-radius: var(--radius-4xl, 24px);
background: var(--Colors-Background-bg-primary, #FFF);
overflow: hidden;
padding: 0 3.25rem 4.25rem 3.25rem;
height: 100%;
text-align: center;
}
.card-home-ia .feature-image {
margin-left: -52px;
margin-right: -52px;
margin-bottom: .75rem;
}
.card-home-ia .feature-image img {
width: 100%;
}
.card-home-ia .feature-title {
color: var(--colors-text-primary-900);
/* Text lg/Semibold */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 600;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
.card-home-ia .feature-text {
color: var(--colors-text-primary-900);
/* Text md/Medium */
font-size: var(--Font-size-text-md, 16px);
font-weight: 500;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.card-home-ia .feature-text p {
margin-bottom: 0;
}
/* 1.8 INTEGRATION ----------------------------------*/
.section-home-integration {
}
.home-integrations-row {
--row-gap-x: var(--spacing-7xl, 64px);
--row-gap-y: var(--spacing-7xl, 64px);
}
.home-integrations-row .check-list {
margin-top: var(--spacing-2xl);
margin-bottom: var(--spacing-4xl);
}
/* 1.9 NUMBERS --------------------------------------*/
.section-home-numbers {
background: url(../images/home-numbers-bg.svg) no-repeat 0 0;
background-size: cover;
background-color: var(--Colors-Background-bg-secondary_alt, #161927);
}
.section-home-numbers * {
color: #fff;
}
.section-home-numbers h2,
.section-home-numbers strong {
color: #fff;
}
.home-numbers-row {
--row-gap-x: var(--spacing-7xl, 64px);
--row-gap-y: var(--spacing-7xl, 64px);
justify-content: center;
}
.home-numbers-row-items {
--row-gap-x: var(--spacing-4xl, 32px);
--row-gap-y: var(--spacing-7xl, 64px);
}
.home-number-item {
color: var(--Colors-Text-text-primary_on-brand, #E0E2EB);
text-align: center;
/* Text md/Regular */
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.home-number-item h3 {
color: var(--Colors-Text-text-brand-tertiary_alt, #F7F7F7);
/* Display xl/Semibold */
font-size: var(--Font-size-display-xl, 60px);
font-weight: 600;
line-height: var(--Line-height-display-xl, 72px); /* 120% */
letter-spacing: -1.2px;
}
.home-number-item h4 {
color: var(--colors-text-text-primary-900, #F7F7F7);
text-align: center;
/* Text lg/Semibold */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 600;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
/* 1.10 USER CASES -----------------------------------*/
/* Slide pagination */
.js-vc-slider-arrows.vc_tta-tabs.vc_tta-has-pagination .vc_pagination {
position: static;
}
.js-vc-slider-arrows.vc_tta-tabs.vc_tta-has-pagination.vc_tta-tabs-position-top {
padding-bottom: 0;
}
.js-vc-slider-arrows.vc_tta-tabs.vc_tta-has-pagination.vc_tta-tabs-position-top .vc_tta-panels-container {
display: flex;
flex-direction: column-reverse;
}
.js-vc-slider-arrows.vc_tta-tabs.vc_tta-has-pagination.vc_tta-tabs-position-top .vc_pagination {
position: static;
transform: none;
margin-top: 2rem;
margin-bottom: 0;
}
.js-vc-slider-arrows.vc_tta-tabs.vc_tta-has-pagination.vc_tta-tabs-position-bottom {
padding-top: 0;
}
.js-vc-slider-arrows.vc_tta-tabs.vc_tta-has-pagination.vc_tta-tabs-position-bottom .vc_tta-panels-container {
display: flex;
flex-direction: column-reverse;
}
.js-vc-slider-arrows.vc_tta-tabs.vc_tta-has-pagination.vc_tta-tabs-position-bottom .vc_pagination {
position: static;
transform: none;
margin-top: 0;
margin-bottom: 2rem;
}
.js-vc-slider-arrows .vc_pagination {
display: flex;
gap: .75rem;
list-style: none outside none;
justify-content: end;
align-items: center;
}
.js-vc-slider-arrows.arrows-center .vc_pagination {
justify-content: center;
}
.js-vc-slider-arrows .vc_general.vc_pagination .vc_pagination-item {
display: none;
}
.js-vc-slider-arrows-nav .js-vc-slider-arrows-prev,
.js-vc-slider-arrows-nav .js-vc-slider-arrows-next {
border-radius: var(--radius-full, 9999px);
border: 1px solid var(--Colors-Border-border-primary, #D5D7DA);
background: var(--Colors-Background-bg-primary, #FFF);
box-shadow: 0 0 0 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(10, 13, 18, 0.18)) inset,
0 -2px 0 0 var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05)) inset, 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05));
display: flex;
padding: 14px;
justify-content: center;
align-items: center;
}
.js-vc-slider-arrows-nav .js-vc-slider-arrows-prev:hover,
.js-vc-slider-arrows-nav .js-vc-slider-arrows-next:hover {
border-radius: var(--radius-full, 9999px);
border: 1px solid rgba(255, 255, 255, 0.12);
background: var(--Colors-Background-bg-brand-solid, #0D2EFF);
/* Shadows/shadow-xs-skeuomorphic */
box-shadow: 0 0 0 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(10, 13, 18, 0.18)) inset,
0 -2px 0 0 var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05)) inset, 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05));
}
.js-vc-slider-arrows-nav .js-vc-slider-arrows-prev {
content: url('data:image/svg+xml,');
}
.js-vc-slider-arrows-nav .js-vc-slider-arrows-prev:hover {
content: url('data:image/svg+xml,');
}
.js-vc-slider-arrows-nav .js-vc-slider-arrows-next {
content: url('data:image/svg+xml,');
}
.js-vc-slider-arrows-nav .js-vc-slider-arrows-next:hover {
content: url('data:image/svg+xml,');
}
.js-vc-slider-arrows-nav button:focus {
outline: none;
}
/* Slide caption */
.user-case-testimonial .user-case-logo {
position: absolute;
top: 1.875rem;
left: 1.875rem;
}
.user-case-testimonial .user-case-caption {
position: absolute;
right: 1.875rem;
bottom: 1.875rem;
width: 60%;
border-radius: 10.583px;
border: 0.661px solid var(--Component-colors-Alpha-alpha-white-30, rgba(12, 14, 18, 0.30));
background: var(--Component-colors-Alpha-alpha-white-30, rgba(12, 14, 18, 0.30));
backdrop-filter: blur(7.937070846557617px);
padding: 15px 0;
color: #fff;
}
.user-case-testimonial .user-case-caption a,
.user-case-testimonial .user-case-caption strong {
color: #fff;
}
.user-case-testimonial .user-case-number {
font-size: .9297rem;
font-weight: 600;
line-height: var(--Line-height-text-md);
}
.user-case-testimonial .user-case-number strong {
font-size: 4.875rem;
font-weight: 600;
line-height: 1.23;
}
.user-case-testimonial .user-case-text {
font-size: .5787rem;
font-weight: 500;
line-height: var(--Line-height-text-sm);
}
.user-case-testimonial .user-case-caption.user-case-text {
padding: .875rem;
max-width: 415px;
}
.user-case-testimonial .user-case-text p {
margin-bottom: 0;
}
.user-case-testimonial .user-case-text > .wpb_wrapper {
display: flex;
flex-direction: column;
gap: 0;
}
.user-case-testimonial .user-case-text > .wpb_wrapper p:first-child {
font-size: .8267rem;
font-weight: 600;
line-height: var(--Line-height-text-md);
margin-bottom: .75rem;
}
.user-case-testimonial .user-case-text img {
margin-bottom: .375rem;
}
.user-case-testimonial .user-case-text strong {
font-size: .6614rem;
font-weight: 600;
line-height: 1.5;
}
.user-case-testimonial .user-case-text a {
background: url(../images/arrow-up-right.svg) no-repeat 100% 50%;
padding-right: 1.625rem;
/* Text md/Semibold */
font-size: var(--Font-size-text-md);
font-weight: 600;
line-height: var(--Line-height-text-md);
display: inline-block;
margin-top: .75rem;
}
/* 1.11 RESOURCES ------------------------------------*/
.section-home-resources {
background: var(--colors-bg-secondary);
padding-top: var(--spacing-7xl);
}
.section-home-resources .section-header {
font-weight: 400;
}
/* Resources */
.woffu-resource-posts-title {
margin-bottom: 2rem;
}
.woffu-resource-posts-row {
margin-bottom: 4rem;
--row-gap-y: 3rem;
}
.woffu-resource-posts-col {
display: flex;
}
.woffu-resource-post-card {
display: flex;
flex-direction: column;
gap: .5rem;
font-size: 1rem;
line-height: 1.5;
}
.woffu-resource-post-card a {
display: block;
}
.woffu-resource-post-card img {
display: block;
margin: 0 auto;
width: 100%;
border-radius: 1rem;
}
.woffu-resource-post-card .category {
display: inline-block;
text-decoration: none;
color: var(--colors-text-brand-secondary);
font-weight: 500;
}
.woffu-resource-post-card .category:hover,
.woffu-resource-post-card h3 a:hover {
text-decoration: none;
}
.woffu-resource-post-card h3 a {
color: var(--colors-text-text-primary-900, #181D27);
/* Text lg/Semibold */
font-size: var(--Font-size-text-lg);
font-weight: 600;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
.woffu-resource-post-card h3 a {
color: inherit;
}
/* Blog */
.woffu-blog-posts-title {
color: var(--colors-text-primary-900);
/* Display xs/Semibold */
font-size: var(--Font-size-display-xs);
font-weight: 600;
line-height: var(--Line-height-display-xs);
}
.woffu-blog-posts-list {
list-style: none outside none;
padding-left: 0;
margin: 0;
}
.woffu-blog-posts-item {
border-bottom: 1px solid var(--colors-border-primary);
padding: .75rem 0;
}
.woffu-blog-posts-link {
display: block;
color: var(--colors-text-primary-900);
font-size: var(--Font-size-text-lg);
font-weight: 600;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
.woffu-blog-posts-link:hover {
color: var(--colors-text-primary-900);
text-decoration: none;
}
/* 1.12 FAQS -----------------------------------------*/
.section-home-faq {
padding-bottom: var(--spacing-11xl);
}
.section-home-faq > div > .container {
max-width: calc(48rem + 2 * var(--container-padding-desktop));
}
.section-home-faq .section-header {
font-weight: 400;
}
.faq-toggles .vc_toggle_title .vc_custom_heading {
color: var(--colors-text-primary-900);
/* Text md/Semibold */
font-size: var(--Font-size-text-md, 16px);
font-weight: 600;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.faq-toggles .vc_toggle_content {
color: var(--colors-text-tertiary-600);
/* Text md/Regular */
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.faq-toggles .vc_toggle.vc_toggle_default .vc_toggle_title {
background-image: url('../images/icon-toggle-open.svg');
}
.faq-toggles .vc_toggle.vc_toggle_default.vc_toggle_active .vc_toggle_title {
background-image: url('../images/icon-toggle-close.svg');
}
/* 1.13 DEMO -----------------------------------------*/
.section-home-demo {
padding-top: var(--spacing-none);
padding-bottom: var(--spacing-4xl);
}
.home-demo-block > .wpb_wrapper {
display: flex;
padding: var(--spacing-4xl, 32px) var(--spacing-4xl, 32px) var(--spacing-5xl, 40px) var(--spacing-4xl, 32px);
flex-direction: column;
align-items: center;
gap: var(--spacing-4xl, 32px);
align-self: stretch;
border-radius: var(--spacing-xl, 16px);
background: rgba(232, 244, 255, 0.64);
backdrop-filter: blur(44.5px);
text-align: center;
font-size: var(--Font-size-text-lg, 18px);
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
margin-bottom: -17.5rem;
}
.home-demo-block h2,
.section .home-demo-block h2 {
color: var(--colors-text-primary-900);
text-align: center;
/* Text xl/Semibold */
font-size: var(--Font-size-text-xl);
font-weight: 600;
line-height: var(--Line-height-text-xl, 30px); /* 150% */
margin-bottom: var(--spacing-md);
}
/* REVIEWS ------------------------------------------------------------------*/
/* Card review */
.card-review {
background: #FFFFFF;
box-shadow: 0px 32.5px 86.6667px rgba(0, 0, 0, 0.1);
border-radius: 30px;
max-width: 982px;
margin: 0 auto;
border: none;
}
.card-review .card-body {
padding: 45px 56px 36px 52px;
min-height: 557px;
}
.card-review h2 {
font-size: 2.125rem;
line-height: 1.18;
color: #00B1FF;
margin-bottom: 30px;
}
.card-review .card-text {
padding-left: 86px;
font-size: 1.1875rem;
line-height: 1.42;
font-style: italic;
background: url(../images/comillas.svg) no-repeat 0 0;
padding-top: 10px;
margin-bottom: 50px;
}
.card-review .card-text p:first-child {
font-size: 1.6875rem;
line-height: 1.30;
}
.card-review .card-author {
font-size: 1.125rem;
line-height: 1.33;
font-weight: 500;
color: var(--colors-text-primary-900); /*#052B53*/
display: flex;
align-items: center;
}
.card-review .author {
display: flex;
align-items: center;
width: 100%;
}
.card-review .card-author .img {
width: 78px;
margin-right: 20px;
}
.card-review.green .card-author .img {
width: 92px;
}
.card-review .card-author .job {
color: #00B1FF;
}
.card-review .logo {
margin-left: auto;
}
.card-review.green h2,
.card-review.green .job {
color: #4CD964;
}
.card-review.green .card-text {
background-image: url(../images/comillas-verdes.svg);
}
.card-review.orange h2,
.card-review.orange .job {
color: #FF9878;
}
.card-review.orange .card-text {
background-image: url(../images/comillas-naranja.svg);
}
/*
--------------------------------------------------------------------------------
2.1 PAGE PRODUCT: CONTROL HORARIO
--------------------------------------------------------------------------------
*/
/* 1.0 GENERAL --------------------------------------*/
.section h2 {
/* Display md/Bold */
font-size: var(--Font-size-display-md);
line-height: var(--Line-height-display-md);
letter-spacing: -0.72px;
text-wrap: balance;
}
.section h3 {
/* Display sm/Semibold */
font-size: var(--Font-size-display-sm);
line-height: var(--Line-height-display-sm);
font-weight: 600;
}
.section strong {
color: var(--colors-text-tertiary-600);
}
/* Feature card */
.product-feature-card > .wpb_wrapper {
display: flex;
padding: var(--spacing-3xl);
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-4xl);
flex: 1 0 0;
align-self: stretch;
border-radius: var(--radius-2xl);
background: var(--Colors-Background-bg-secondary, #FAFAFA);
color: var(--colors-text-text-tertiary-600, #535862);
/* Text md/Medium */
font-size: var(--Font-size-text-md, 16px);
font-weight: 500;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.product-feature-card h3 {
color: var(--colors-text-text-primary-900, #181D27);
/* Text lg/Semibold */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 600;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
.product-feature-card .btn-more-new.dark {
background-image: url('data:image/svg+xml,');
color: var(--colors-text-text-brand-secondary-700, #0120F4);
padding-right: 1.25rem;
}
.product-feature-card .btn-more-new.dark:hover {
color: var(--colors-text-text-brand-secondary-700, #0120F4);
padding-right: 1.5rem;
}
/* 1.1 PRODUCT HERO ---------------------------------*/
.product-hero-row {
align-items: end;
}
.product-hero-header {
font-weight: 400;
}
.product-hero-header strong {
color: var(--colors-text-text-primary-900, #181D27);
font-weight: 600;
}
.product-hero-list .check-list {
margin-left: auto;
}
.product-hero-list .check-list ul {
padding-left: var(--spacing-xl);
padding-bottom: var(--spacing-3xl);
}
.product-hero-list .check-list ul > li {
background-image: url('data:image/svg+xml,');
background-size: 2rem;
padding-left: calc(2rem + var(--spacing-lg));
color: var(--colors-text-text-tertiary-600, #535862);
/* Text lg/Medium */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 500;
line-height: 2rem;
}
/* 1.1 FEATURES -------------------------------------*/
.section-product-features {
padding-top: 0;
}
.section-product-features .section-header {
margin-bottom: var(--spacing-9xl);
}
.product-feature-row {
--row-gap-x: var(--spacing-9xl);
--row-gap-y: var(--spacing-2xl);
align-items: center;
color: var(--colors-text-text-tertiary-600, #535862);
/* Text lg/Regular */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 400;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
.product-feature-row.top {
align-items: start;
}
.product-feature-row.right {
flex-direction: row-reverse;
}
.product-feature-row + .product-feature-row {
margin-top: var(--spacing-9xl);
}
.product-feature-row h3 {
color: var(--colors-text-text-primary-900, #181D27);
/* Display sm/Semibold */
font-size: var(--Font-size-display-sm, 30px);
font-weight: 600;
line-height: var(--Line-height-display-sm, 38px); /* 126.667% */
}
/* 1.3 OPTIMIZATION ---------------------------------*/
.section-product-optimization {
padding-top: var(--spacing-9xl);
padding-bottom: var(--spacing-11xl);
background: url(../images/control-horario-optimizacion-bg.svg) no-repeat 0 100%;
background-color: var(--colors-bg-tertiary);
background-size: cover;
}
.product-optimization-row {
--row-gap-x: var(--spacing-7xl);
--row-gap-y: var(--spacing-5xl);
}
.product-optimization-row .product-feature-item {
gap: .25rem;
}
.product-optimization-row .product-feature-item .feature-image {
margin-bottom: var(--spacing-xl);
}
.product-optimization-row .product-feature-item p {
margin-bottom: 0;
}
.product-optimization-row .product-feature-item + .product-feature-item {
margin-top: var(--spacing-5xl);
}
.product-feature-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xl);
align-self: stretch;
color: var(--colors-text-text-tertiary-600, #535862);
/* Text md/Medium */
font-size: var(--Font-size-text-md, 16px);
font-weight: 500;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.product-feature-item h3 {
color: var(--colors-text-text-primary-900, #181D27);
/* Text lg/Semibold */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 600;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
.product-optimization-image-wrap > .wpb_wrapper {
display: flex;
align-items: center;
justify-content: center;
}
/* 1.4 METHODS --------------------------------------*/
.product-methods-row {
--row-gap-x: var(--spacing-2xl);
--row-gap-y: var(--spacing-7xl);
}
/* 1.5 PROCESS TABS --------------------------------------*/
.section-product-tabs {
padding-top: 0;
}
.woffu-tabs-vertical {
--row-gap-x: var(--spacing-7xl);
--row-gap-y: var(--spacing-7xl);
}
.woffu-tabs-caption {
padding: var(--spacing-xl) var(--spacing-none) var(--spacing-xl) var(--spacing-3xl);
border-left: 4px solid var(--colors-bg-secondary);
color: var(--colors-text-text-tertiary-600, #535862);
/* Text md/Regular */
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.woffu-tabs-caption.is-active {
border-left-color: transparent;
border-image: linear-gradient(
to bottom,
#FFFFFF 0%,
#E0F2FE 12%,
#B3D5FF 34%,
#86B9FF 46%,
#3060FF 64%,
#0A0A0A 100%
) 1;
}
.woffu-tabs-caption h3 {
color: var(--colors-text-text-primary-900, #181D27);
/* Text lg/Semibold */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 600;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
/* 1.6 INTEGRATIONS --------------------------------------*/
.section-product-integration {
background: url(../images/section-product-integrations-bg.svg) no-repeat 0 100%;
background-color: #0E132E;
background-size: cover;
}
.section-product-integration > div {
background: url(../images/section-product-integrations-bg-1.svg) no-repeat 0 100%;
background-size: 100% auto;
}
.section-product-integration * {
color: #E0E2EB;
}
.product-integration-header,
.product-integration-header strong {
color: #E0E2EB;
}
.product-integration-header .subheading {
color: #CECFD2;
}
.product-integration-header h2 {
color: #F7F7F7;
}
.product-integration-header .btn-primary {
background: none;
border: none;
text-decoration: underline;
color: var(--colors-text-text-brand-secondary-700, #A8ADC8);
--color-arrow: #596188;
}
.product-integration-header .btn-primary:hover {
--color-arrow: #A8ADC8;
}
.product-integration-logos > .wpb_wrapper {
position: relative;
}
.product-integration-logos .img {
max-width: 5.5rem;
position: absolute;
}
.product-integration-logos .logo-top {
top: 15%;
}
.product-integration-logos .logo-center {
top: 50%;
right: 15%;
}
.product-integration-logos .logo-bottom {
bottom: 0;
}
.product-integration-logos.left .logo-bottom {
right: 0;
}
.product-integration-logos.right .logo-top {
right: 0;
}
/* 1.7 PLUS ------------------------------------------*/
.product-feature-caption {
color: var(--colors-text-text-tertiary-600, #535862);
/* Text xl/Medium */
font-size: var(--Font-size-text-xl, 20px);
font-weight: 500;
line-height: var(--Line-height-text-xl, 30px); /* 150% */
}
.product-feature-caption .img {
margin-bottom: var(--spacing-2xl);
}
.product-feature-list {
color: var(--colors-text-text-tertiary-600, #535862);
/* Text lg/Regular */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 400;
line-height: var(--Line-height-text-lg, 28px);
margin-top: var(--spacing-4xl);
}
.product-feature-list strong {
color: var(--colors-text-text-tertiary-600, #535862);
/* Text lg/Regular */
font-weight: 700;
}
/* 1.6 CLIENTS ---------------------------------------*/
.section-product-clients {
background: var(--Colors-Background-bg-secondary, #FAFAFA);
}
.section-product-clients .features-logos {
border-radius: var(--radius-md, 8px);
background: var(--Colors-Background-bg-primary, #FFF);
padding: var(--spacing-6xl, 48px);
}
.section-product-clients .features-logos .imagelist {
flex-wrap: nowrap;
gap: 2rem;
}
.product-client-review {
color: var(--colors-text-text-tertiary-600, #535862);
text-align: center;
/* Text md/Regular */
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px); /* 150% */
margin-bottom: var(--spacing-4xl);
}
.product-client-review h2 {
margin-bottom: var(--spacing-4xl) !important;
}
.product-client-review strong {
color: var(--colors-text-text-primary-900, #181D27);
/* Text lg/Semibold */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 600;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
/*
--------------------------------------------------------------------------------
2.2 PAGE PRODUCT: GESTION DOCUMENTAL
--------------------------------------------------------------------------------
*/
/* 1.2 STEPS --------------------------------------*/
.section-product-steps {
background: var(--colors-bg-secondary);
}
.product-steps-row {
--row-gap-x: var(--spacing-7xl);
}
.product-steps-row > div:nth-child(1) {
flex: 0 0 45%;
max-width: 45%;
}
.product-steps-row > div:nth-child(2) {
flex: 0 0 55%;
max-width: 55%;
}
.product-steps-header-text {
color: var(--colors-text-tertiary-600);
/* Text lg/Regular */
font-size: var(--Font-size-text-lg);
font-weight: 400;
line-height: var(--Line-height-text-lg);
}
.product-steps-header-text a {
color: var(--colors-text-tertiary-600);
text-decoration-line: underline;
}
.product-steps-card {
background: var(--colors-bg-primary);
border-radius: var(--radius-2xl);
display: flex;
padding: var(--spacing-3xl);
align-items: flex-start;
gap: var(--spacing-4xl);
align-self: stretch;
}
.product-steps-card + .product-steps-card {
margin-top: var(--spacing-3xl);
}
.product-steps-card .feature-title {
color: var(--colors-text-brand-secondary);
/* Display sm/Semibold */
font-size: var(--Font-size-display-sm);
font-weight: 600;
line-height: var(--Line-height-display-sm);
}
.product-steps-card .feature-text {
color: var(--colors-text-tertiary-600);
/* Text md/Medium */
font-size: var(--Font-size-text-md);
font-weight: 500;
line-height: var(--Line-height-text-md);
}
.product-steps-card .feature-text h3,
.product-steps-card .feature-text h4 {
color: var(--colors-text-primary-900);
/* Text lg/Semibold */
font-size: var(--Font-size-text-lg);
font-weight: 600;
line-height: var(--Line-height-text-lg);
}
.product-steps-card .feature-text a {
color: var(--colors-text-tertiary-600);
text-decoration: underline;
}
/* 1.2 FEATURES --------------------------------------*/
.product-documents-item {
background: var(--Colors-Background-bg-secondary, #FAFAFA);
border-radius: var(--radius-4xl, 24px);
display: flex;
padding: var(--spacing-3xl, 24px);
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xl, 16px);
align-self: stretch;
margin-bottom: var(--spacing-3xl);
}
.product-documents-item .feature-image {
margin-bottom: 0 !important;
}
.product-documents-item .feature-title {
color: var(--colors-text-primary-900);
/* Display xs/Semibold */
font-size: var(--Font-size-display-xs, 24px);
font-weight: 600;
line-height: var(--Line-height-display-xs, 32px); /* 133.333% */
}
.mt-9xl {
margin-top: var(--spacing-9xl);
}
.product-feature-description .subheading {
margin-bottom: var(--spacing-lg);
}
.product-feature-description h2 {
margin-bottom: var(--spacing-2xl) !important;
color: var(--colors-text-text-primary-900, #181D27);
font-size: var(--Font-size-display-lg, 48px);
font-weight: 700;
line-height: var(--Line-height-display-lg, 60px); /* 125% */
letter-spacing: -0.96px;
}
.product-feature-description .product-feature-caption {
margin-bottom: var(--spacing-4xl);
}
.product-feature-description .product-feature-text {
margin-bottom: var(--spacing-4xl);
}
.product-feature-description .product-feature-text h3 {
/* Display xs/Semibold */
font-size: var(--Font-size-display-xs);
line-height: var(--Line-height-display-xs);
margin-bottom: var(--spacing-xl);
}
/*
--------------------------------------------------------------------------------
2.3 PAGE PRODUCT: APP FICHAJE
--------------------------------------------------------------------------------
*/
/* Hero */
.app-hero-row {
align-items: start;
}
.app-hero-row .product-hero-header strong {
color: var(--colors-text-tertiary-600);
}
.product-app-block {
background: #F5F5F5;
border-radius: var(--radius-md);
padding: var(--spacing-xl);
/* Text sm/Medium */
font-size: var(--Font-size-text-sm, 14px);
font-weight: 500;
line-height: var(--Line-height-text-sm, 20px);
margin-top: var(--spacing-3xl);
}
.product-app-block .app-link {
margin-left: var(--spacing-lg);
}
/* Main */
.app-main-row {
--row-gap-x: var(--spacing-9xl);
--row-gap-y: var(--spacing-4xl);
}
.app-main-pictures > .wpb_wrapper {
display: flex;
flex-direction: column;
}
.app-main-pictures .app-picture + .app-picture {
margin-top: 12.5rem;
}
.app-main-header {
margin-bottom: 0;
font-weight: 400;
}
.app-main-header h3 {
font-size: var(--Font-size-text-xl, 20px);
font-weight: 600;
line-height: var(--Line-height-text-xl, 30px);
}
.app-main-header h3 strong {
border-radius: var(--radius-full, 9999px);
background: var(--Colors-Background-bg-brand-primary, #E8F4FF);
display: inline-block;
width: 2.5rem;
height: 2.5rem;
padding: .625rem .5rem;
margin-right: var(--spacing-xl);
vertical-align: middle;
color: var(--colors-text-text-brand-tertiary-600, #0D2EFF);
text-align: center;
/* Text sm/Medium */
font-size: var(--Font-size-text-sm, 14px);
font-weight: 500;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}
.alert-block {
border-radius: var(--radius-xl, 12px);
border: 1px solid var(--Colors-Border-border-primary, #D5D7DA);
background: var(--Colors-Background-bg-primary_alt, #FFF);
box-shadow: 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05));
padding: var(--spacing-xl, 16px);
}
.alert-block.icon-info {
background-image: url(../images/icon-info-circle.svg);
background-repeat: no-repeat;
background-position: 1rem 1rem;
padding-left: calc(2.5rem + 1rem + 1.25rem);
color: var(--colors-text-text-secondary-700, #414651);
font-size: var(--Font-size-text-sm, 14px);
/* font-weight: 600; */
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}
.alert-block h3 {
/* Text lg/Semibold */
font-size: var(--Font-size-text-lg, 18px);
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
margin-bottom: .25rem;
}
/* Features */
.section-app-features {
padding-top: var(--spacing-6xl);
}
/* Metodos Fichaje Block */
.metodos-fichaje-block {
background: var(--colors-bg-secondary);
border-radius: var(--radius-2xl);
padding: var(--spacing-7xl);
text-align: center;
margin-top: var(--spacing-9xl);
font-size: var(--font-size-m);
}
.metodos-fichaje-block h2 {
margin-bottom: var(--spacing-2xl);
}
.metodos-fichaje-icon-list {
margin: var(--spacing-2xl) 0 var(--spacing-4xl) 0;
}
.metodos-fichaje-icon-list ul {
list-style: none outside none;
padding-left: 0;
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.375rem 1rem;
}
.metodos-fichaje-icon-list ul img {
border-radius: var(--radius-2xl);
box-shadow: 0 0 0 1px rgba(10, 13, 18, 0.18) inset,
0 -2px 0 0 rgba(10, 13, 18, 0.05) inset,
0 1px 2px 0 rgba(10, 13, 18, 0.05);
}
.metodos-fichaje-icon-list ul img[src*="Logomark"] {
width: 5.375rem;
box-shadow: none;
}
/* Optimization */
.section-app-optimization {
padding-top: var(--spacing-9xl);
padding-bottom: var(--spacing-11xl);
background: url(../images/app-optimizacion-bg.svg) no-repeat 50% 100%;
background-color: var(--colors-bg-secondary);
background-size: cover;
}
.app-optimization-row {
padding: 0 var(--container-padding-desktop, 32px);
}
.app-optimization-card .img {
margin-bottom: var(--spacing-4xl);
}
.app-optimization-card .caption {
margin-bottom: var(--spacing-xl);
/* Text md/Regular */
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.app-optimization-card .subheading {
font-size: var(--Font-size-text-sm);
margin-bottom: var(--spacing-xs);
}
.app-optimization-card h3 {
margin-bottom: .25rem;
/* Text lg/Semibold */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 600;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
.app-optimization-card p a {
text-decoration: underline;
}
/* Reviews */
.app-reviews-header-row {
margin-bottom: var(--spacing-7xl);
--row-gap-x: var(--spacing-9xl);
--row-gap-y: var(--spacing-4xl);
}
.app-reviews-header-row .section-header {
margin-bottom: 0;
}
/* Normativa */
.section-app-normativa {
background: var(--colors-bg-secondary);
}
.app-normativa-row {
align-items: center;
--row-gap-x: var(--spacing-7xl);
--row-gap-y: var(--spacing-7xl);
}
.app-normativa-row .section-header p a {
color: var(--colors-text-tertiary-600);
text-decoration: underline;
}
.app-normativa-row .section-header .btn {
margin-top: 1.75rem;
}
/*
--------------------------------------------------------------------------------
2.4 PAGE PRODUCT: GESTOR VACACIONES
--------------------------------------------------------------------------------
*/
/* Product card */
.product-card {
background: var(--Colors-Background-bg-primary, #FFF);
border: 1px solid var(--Colors-Border-border-secondary, #E9EAEB);
border-radius: var(--radius-2xl, 16px);
box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
display: flex;
padding: 1.75rem;
flex-direction: column;
align-items: flex-start;
gap: var(--product-card-gap, 16px);
height: 100%;
}
.product-card .feature-image {
margin-bottom: var(--product-card-image-mb, 0);
}
.product-card .feature-title {
font-size: var(--Font-size-text-lg, 18px);
font-weight: 700;
line-height: 26px; /* 144.444% */
margin-bottom: var(--product-card-title-mb, 0);
}
.product-card .feature-text p {
margin-bottom: 0;
}
.product-card .feature-link {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: 100% 50%;
color: var(--colors-text-text-brand-secondary-700, #0120F4);
padding-right: 1.25rem;
font-weight: 500;
margin-top: auto;
}
.product-card .feature-link:hover {
color: var(--colors-text-text-brand-secondary-700, #0120F4);
padding-right: 1.5rem;
text-decoration: none;
}
/* Steps */
.section-gestor-vacaciones-steps {
background: url(../images/gestor-vacaciones-steps-bg.svg) no-repeat 0 0;
background-size: cover;
}
.section-gestor-vacaciones-steps *,
.section-gestor-vacaciones-steps h2,
.section-gestor-vacaciones-steps h3 {
color: #fff;
}
.gestor-vacaciones-steps-row {
--row-gap-x: var(--spacing-9xl);
align-items: center;
}
.gestor-vacaciones-steps-row .product-steps-card {
background: none;
border: none;
padding: 0;
gap: 2rem;
}
.gestor-vacaciones-steps-row .product-steps-card .feature-title {
min-width: 48px;
font-size: 2.25rem;
font-weight: 600;
line-height: 45.6px; /* 126.667% */
}
.gestor-vacaciones-steps-row .product-steps-card .feature-text {
font-weight: 400;
}
.gestor-vacaciones-steps-row .product-steps-card .feature-text p {
margin-bottom: 0;
}
.gestor-vacaciones-steps-row .product-steps-card .feature-title,
.gestor-vacaciones-steps-row .product-steps-card .feature-text a,
.gestor-vacaciones-steps-row .product-steps-card .feature-text h3 {
color: #fff;
}
/* Features */
.section-gestor-vacaciones-features {
background: url(../images/control-horario-optimizacion-bg.svg) no-repeat 0 100%;
background-size: cover;
padding-bottom: var(--spacing-11xl);
}
.gestor-vacaciones-features-row {
--row-gap-x: var(--spacing-xl);
--row-gap-y: var(--spacing-xl);
}
.gestor-vacaciones-features-row .product-card {
--product-card-gap: 0;
--product-card-image-mb: 1rem;
--product-card-title-mb: .375rem;
}
/* Merker circle list */
.marker-circle ol {
list-style: none;
padding-left: 0;
counter-reset: item;
}
.marker-circle li {
counter-increment: item;
position: relative;
padding-left: 3.75rem;
margin-bottom: 1.5rem;
}
.marker-circle li::before {
content: counter(item);
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
padding: 10px 8px;
border-radius: var(--radius-full, 9999px);
background-color: var(--Colors-Background-bg-brand-primary, #E8F4FF);
display: flex;
align-items: center;
justify-content: center;
color: var(--colors-text-text-brand-tertiary-600, #0D2EFF);
text-align: center;
/* Text sm/Medium */
font-size: var(--Font-size-text-sm, 14px);
font-weight: 500;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}
.marker-circle li strong {
color: var(--colors-text-text-primary-900, #181D27);
font-weight: 600;
}
/*
--------------------------------------------------------------------------------
2.5 PAGE PRODUCT: INFORMES
--------------------------------------------------------------------------------
*/
/* Section caption */
.section-caption {
/* Text xl/Regular */
font-size: var(--Font-size-text-xl, 20px);
font-weight: 400;
line-height: var(--Line-height-text-xl, 30px); /* 150% */
}
.section-caption .subheading {
margin-bottom: var(--spacing-xl);
}
.section-caption h2 {
margin-bottom: var(--spacing-xl);
}
.section-caption p {
margin-bottom: var(--spacing-4xl);
}
.section-caption p strong {
font-weight: 600;
}
.section-caption p a {
text-decoration: underline;
}
.section-caption .check-list ul {
font-size: var(--font-size-s);
margin-bottom: var(--spacing-4xl);
}
/* Informes Features Row */
.informes-features-row {
--row-gap-x: var(--spacing-3xl);
--row-gap-y: var(--spacing-3xl);
justify-content: center;
}
/*
--------------------------------------------------------------------------------
LANDING: TRIAL WEB PAID
--------------------------------------------------------------------------------
*/
/* Header */
.header-custom nav {
background: var(--Colors-Background-bg-secondary, #FAFAFA);
}
#header nav .top-custom-menu {
margin-left: 1.5rem;
gap: 1.5rem;
}
.top-custom-menu .menu-item:not(.menu-button) .menu-link {
color: var(--colors-text-text-secondary-700, #414651);
font-size: .9375rem;
font-weight: 600;
line-height: var(--Line-height-text-sm, 20px); /* 133.333% */
}
.custom-menu-rate {
color: var(--colors-text-text-secondary-700, #414651);
font-size: var(--Font-size-text-sm, 14px);
font-weight: 500;
line-height: var(--Line-height-text-sm, 20px);
}
.custom-menu-rate .starts {
color: var(--colors-foreground-fg-primary-900, #181D27);
font-size: var(--Font-size-text-sm, 14px);
font-weight: 700;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
background: url(../images/starts-5-black.svg) no-repeat 0 0;
padding-left: 120px;
}
.countdown-mini {
color: var(--colors-text-text-secondary-700, #414651);
font-size: 13.5px;
font-weight: 600;
line-height: var(--Line-height-text-sm, 20px);
}
.countdown-mini b {
color: var(--colors-foreground-fg-primary-900, #181D27);
}
/* Trial Hero */
.section-trial-hero {
background: var(--Colors-Background-bg-secondary, #FAFAFA);
padding-top: var(--spacing-6xl);
padding-bottom: var(--spacing-8xl);
}
.section-trial-hero .features-logos {
background: none;
padding-top: var(--spacing-7xl);
padding-bottom: 0;
}
.trial-hero-header {
font-weight: 400;
}
.trial-hero-header > div.wpb_wrapper {
gap: var(--spacing-3xl);
}
.trial-hero-header .subheading {
background-color: var(--Component-colors-Utility-Brand-utility-brand-50, #E8F4FF);
border-radius: var(--radius-full, 9999px);
border: 1px solid var(--Component-colors-Utility-Brand-utility-brand-200, #B3D5FF);
display: flex;
padding: var(--spacing-xs, 4px) var(--spacing-md, 8px) var(--spacing-xs, 4px) var(--spacing-xs, 4px);
align-items: center;
gap: var(--spacing-md, 8px);
color: var(--Component-colors-Utility-Brand-utility-brand-700, #0120F4);
/* Text sm/Medium */
font-size: var(--Font-size-text-sm, 14px);
font-weight: 500;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
--icon-width: 0px;
}
.trial-hero-header .subheading b {
border-radius: var(--radius-full, 9999px);
border: 1px solid var(--Component-colors-Utility-Brand-utility-brand-200, #B3D5FF);
background: var(--Colors-Background-bg-primary, #FFF);
display: flex;
padding: var(--spacing-xxs, 2px) 10px;
align-items: center;
}
.trial-hero-header .subheading[class*="icon-"] {
background-repeat: no-repeat;
background-position: calc(100% - .5rem) 50%;
padding-right: calc(var(--icon-width, 1.25rem) + .5rem + .5rem);
}
.trial-hero-header .subheading.icon-card {
background-image: url(../images/icon-card-single.svg);
--icon-width: 1.25rem;
}
.trial-hero-header .subheading.icon-zap {
background-image: url(../images/icon-zap-single.svg);
--icon-width: 1rem;
}
.trial-hero-header .subheading.icon-calendar {
background-image: url(../images/icon-calendar-single.svg);
--icon-width: 1rem;
}
.trial-hero-header .subheading.dark {
background-color: var(--colors-foreground-primary-900);
border-color: var(--colors-foreground-primary-900);
color: #fff;
padding-left: var(--spacing-lg);
padding-right: calc(var(--spacing-lg) + var(--icon-width));
}
.trial-hero-header .subheading.dark b {
color: var(--colors-text-text-primary-900, #181D27);
font-weight: 500;
margin-left: -0.5rem;
}
.trial-hero-header .subheading.light {
background-color: #FFF;
padding-left: var(--spacing-lg);
padding-right: calc(var(--spacing-lg) + var(--icon-width));
}
.trial-hero-header p {
text-wrap: balance;
}
.trial-hero-list {
/* Text md/Semibold */
font-size: var(--Font-size-text-md, 16px);
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.trial-hero-list strong {
color: var(--colors-text-primary-900);
font-weight: 600;
}
.trial-hero-list ul {
list-style: none outside none;
padding: 0;
}
.trial-hero-list ul li {
background: url(../images/check-simple-green.svg) no-repeat 0 0;
padding-left: 1.625rem;
line-height: 1.125rem;
}
.trial-hero-list ul li + li {
margin-top: .5rem;
}
.trial-rate-caption {
margin-top: var(--spacing-md);
}
.trial-rate-caption strong {
color: var(--colors-text-text-primary-900, #181D27);
font-weight: 600;
}
.trial-hero-cta {
padding: 2.25rem;
border-radius: var(--radius-4xl, 24px);
border: 1px solid var(--Colors-Border-border-secondary, #E9EAEB);
background: var(--Colors-Background-bg-primary, #FFF);
box-shadow: 0 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0 32px 64px -12px rgba(10, 13, 18, 0.14);
color: var(--colors-text-text-tertiary-600, #535862);
/* Text md/Regular */
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.trial-hero-cta > .wpb_wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-3xl);
flex: 1 0 0;
}
.trial-hero-cta h2 {
color: var(--colors-foreground-fg-primary-900, #181D27);
/* Display xs/Bold */
font-size: var(--Font-size-display-xs, 24px);
font-weight: 700;
line-height: var(--Line-height-display-xs, 32px); /* 133.333% */
margin-bottom: .5rem;
}
.trial-hero-cta .product-steps-card {
padding: 0;
gap: .875rem;
}
.trial-hero-cta .product-steps-card .feature-title {
border-radius: var(--radius-full, 9999px);
background: var(--Colors-Background-bg-brand-primary, #E8F4FF);
color: var(--colors-text-text-brand-secondary-700, #0120F4);
text-align: center;
font-size: var(--Font-size-text-sm, 14px);
font-weight: 700;
line-height: var(--Line-height-text-lg, 28px); /* 200% */
display: flex;
width: 28px;
height: 28px;
flex-direction: column;
align-items: center;
min-width: 28px;
}
.trial-hero-cta .product-steps-card h3 {
color: var(--colors-foreground-fg-primary-900, #181D27);
/* Text lg/Bold */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 700;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
margin-bottom: 2px;
}
.trial-hero-cta .product-steps-card p {
margin-bottom: 0;
}
.trial-hero-cta .product-steps-card + .product-steps-card {
margin-top: 1.25rem;
}
.trial-hero-cta .btn {
width: 100%;
}
.trial-hero-cta-text {
color: var(--Colors-Text-text-disabled, #717680);
text-align: center;
/* Text xs/Regular */
font-size: var(--Font-size-text-xs, 12px);
font-weight: 400;
line-height: var(--Line-height-text-xs, 18px); /* 150% */
border-top: 1px solid var(--Colors-Border-border-secondary, #E9EAEB);
padding-top: var(--spacing-2xl, 20px);
}
.trial-hero-cta-list {
width: 100%;
}
.trial-hero-cta-list ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: .5rem;
justify-content: center;
list-style: none outside none;
padding-left: 0;
}
.trial-hero-cta-list ul li {
border-radius: var(--radius-full, 9999px);
border: 1px solid var(--Colors-Border-border-secondary, #E9EAEB);
color: var(--colors-text-text-tertiary-600, #535862);
/* Text xs/Semibold */
font-size: var(--Font-size-text-xs, 12px);
font-weight: 600;
line-height: var(--Line-height-text-xs, 18px); /* 150% */
padding: var(--spacing-xs, 4px) var(--spacing-lg, 12px);
}
/* Trial Features */
.section-trial-features {
background: url(../images/trial-features-bg.svg) no-repeat 0 100%;
background-size: cover;
}
.section-trial-features .text-accent {
color: var(--Component-colors-Utility-Brand-utility-brand-500, #3060FF);
text-align: center;
/* Display xs/Bold */
font-size: var(--Font-size-display-xs, 24px);
font-weight: 700;
line-height: var(--Line-height-display-xs, 32px); /* 133.333% */
max-width: 42.5rem;
margin: 0 auto;
}
.trial-feature-row {
margin-bottom: 3.5rem;
}
.trial-feature {
border-radius: var(--radius-2xl, 16px);
border: 1px solid var(--Colors-Border-border-secondary, #323850);
background: var(--Colors-Background-bg-primary, #161927);
box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
padding: 1.75rem;
color: var(--colors-text-text-secondary-700, #A8ADC8);
/* Text md/Medium */
font-size: var(--Font-size-text-md, 16px);
font-weight: 500;
line-height: var(--Line-height-text-md, 24px);
height: 100%;
display: flex;
align-items: flex-start;
gap: 18px;
}
.trial-feature .feature-image {
flex: 0 0 3rem; /* no crece, no se reduce, ancho fijo de 3rem */
width: 3rem;
}
.trial-feature .feature-text {
flex: 1; /* ocupa todo el espacio restante */
min-width: 0; /* importante si hay textos largos */
}
.trial-feature strong {
color: var(--colors-text-text-secondary-700, #A8ADC8);
/* Text md/Bold */
font-size: var(--Font-size-text-md, 16px);
font-weight: 700;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
/* Trial Steps */
.section-trial-steps {
background: #fff;
}
.trial-steps-header > .wpb_wrapper {
gap: .75rem;
}
.section-trial-steps .product-steps-card {
background: #FAFAFA;
}
.section-trial-steps .product-steps-card p {
margin-bottom: 0;
}
/* Trial Cards */
.section-trial-card {
background-color: #F5F5F5;
background: url(../images/trial-card-bg.svg) no-repeat 0 0;
background-size: cover;
}
.trial-card-row {
margin-bottom: 3.5rem;
}
.trial-card {
border-radius: 28.354px;
border: 1.772px solid #FFF;
background: var(--Colors-Background-bg-primary, #FFF);
backdrop-filter: blur(10.632911682128906px);
overflow: hidden;
}
.trial-card-caption {
padding: var(--spacing-5xl, 40px);
text-align: center;
color: var(--colors-text-text-tertiary-600, #535862);
text-align: center;
/* Text md/Semibold */
font-size: var(--Font-size-text-md, 16px);
font-weight: 600;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.trial-card-caption h3 {
color: var(--colors-text-text-primary-900, #181D27);
text-align: center;
/* Display xs/Semibold */
font-size: var(--Font-size-display-xs, 24px);
font-weight: 600;
line-height: var(--Line-height-display-xs, 32px); /* 133.333% */
}
.trial-tag-row {
border-radius: var(--radius-4xl, 24px);
background: var(--Colors-Background-bg-primary, #FFF);
box-shadow: 0 433px 121px 0 rgba(0, 0, 0, 0.00), 0 277px 111px 0 rgba(0, 0, 0, 0.01), 0 156px 94px 0 rgba(0, 0, 0, 0.05), 0 69px 69px 0 rgba(0, 0, 0, 0.09), 0 17px 38px 0 rgba(0, 0, 0, 0.10);
padding: var(--spacing-6xl, 48px) 40px;
--row-gap-x: 0;
}
.trial-tag-caption {
padding-right: 2.5rem;
}
.trial-tag-list ul {
list-style: none outside none;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: .75rem;
margin-bottom: 1.25rem !important;
}
.trial-tag-list ul li {
background: var(--Colors-Background-bg-brand-primary, #E8F4FF);
border-radius: var(--radius-full, 9999px);
color: var(--colors-text-text-brand-secondary-700, #0120F4);
font-size: var(--Font-size-text-sm, 14px);
font-weight: 600;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
padding: .5rem 1rem;
}
.trial-tag-row.single {
text-align: center;
}
.trial-tag-row.single h3 {
/* Text xl/Bold */
font-size: var(--Font-size-text-xl, 20px);
font-weight: 700;
line-height: var(--Line-height-text-xl, 30px); /* 150% */
margin-bottom: 1.5rem;
}
.trial-tag-row.single .trial-tag-list {
margin-bottom: 2rem;
}
.trial-tag-row.single .trial-tag-list ul {
justify-content: center;
}
/* Trial Numbers */
.trial-numbers-block {
background: linear-gradient(180deg, #181D27 73.06%, #0D2EFF 100%);
border-radius: var(--radius-4xl, 24px);
padding: var(--spacing-7xl, 64px);
}
.section-header.dark {
color: var(--colors-text-text-quaternary-500, #94979C);
/* Text md/Regular */
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.section-header.dark h2 {
color: var(--Colors-Base-white, #FFF);
text-align: center;
/* Display lg/Semibold */
font-size: var(--Font-size-display-lg, 48px);
font-weight: 600;
line-height: var(--Line-height-display-lg, 60px); /* 125% */
letter-spacing: -0.96px;
}
.section-header.dark .subheading {
color: var(--Colors-Text-text-secondary_on-brand, #B3D5FF);
/* Display xs/Semibold */
font-size: var(--Font-size-display-xs, 24px);
font-weight: 600;
line-height: var(--Line-height-display-xs, 32px); /* 133.333% */
}
.trial-number {
color: var(--Colors-Text-text-primary_on-brand, #E0E2EB);
/* Text sm/Regular */
font-size: var(--Font-size-text-sm, 14px);
font-weight: 400;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}
.trial-number strong {
color: var(--Colors-Text-text-white, #FFF);
/* Display md/Bold */
font-size: var(--Font-size-display-md, 36px);
font-weight: 700;
line-height: var(--Line-height-display-md, 44px); /* 122.222% */
letter-spacing: -0.72px;
}
/* Trial Reviews */
.review-card-row {
--row-gap-x: var(--spacing-5xl);
margin-bottom: 3.5rem;
}
/* Review Card */
.review-card {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--spacing-3xl, 24px);
padding: var(--spacing-5xl, 40px);
height: 100%;
border-radius: var(--radius-4xl, 24px);
border: 1px solid var(--Colors-Border-border-secondary, #E9EAEB);
background: var(--Colors-Background-bg-primary, #FFF);
box-shadow: 0 5px 5px -2.5px rgba(10, 13, 18, 0.04), 0 20px 24px -4px rgba(10, 13, 18, 0.08);
}
.review-card.reverse {
flex-direction: row-reverse;
}
.review-card-image {
--image-width: 194px;
flex: 0 0 var(--image-width); /* no crece, no se reduce, ancho fijo de --image-width */
width: var(--image-width);
}
.review-card-caption {
flex: 1; /* ocupa todo el espacio restante */
min-width: 0; /* importante si hay textos largos */
}
.review-card-five-starts {
content: url(../images/starts-5-yellow.svg);
margin-bottom: 1.5rem;
}
.review-card-text {
color: var(--colors-foreground-fg-primary-900, #181D27);
/* Text xl/Bold */
font-size: var(--Font-size-text-xl, 20px);
font-weight: 700;
line-height: var(--Line-height-text-xl, 30px); /* 150% */
margin-bottom: 1.5rem;
}
.review-card-author-title {
color: var(--colors-foreground-fg-primary-900, #181D27);
/* Text md/Bold */
font-size: var(--Font-size-text-md, 16px);
font-weight: 700;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.review-card-author-subtitle {
color: var(--Colors-Text-text-disabled, #717680);
/* Text md/Regular */
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
/* Review Card - Large */
.review-card-lg {
padding: var(--spacing-7xl, 64px);
}
.review-card-lg .review-card-image {
--image-width: 418px;
}
.review-card-lg .review-card-text {
/* Display md/Semibold */
font-size: var(--Font-size-display-md, 36px);
font-weight: 600;
line-height: var(--Line-height-display-md, 44px); /* 122.222% */
letter-spacing: -0.72px;
}
/* Review number */
.review-number-row {
max-width: 60rem;
margin: 0 auto;
}
.review-number-row.full {
max-width: 100%;
}
.review-number {
color: var(--colors-text-text-tertiary-600, #535862);
/* Text md/Semibold */
font-size: var(--Font-size-text-md, 16px);
font-weight: 600;
line-height: var(--Line-height-text-md, 24px); /* 150% */
text-align: center;
text-wrap: balance;
}
.review-number p {
margin-bottom: .25rem;
}
.review-number strong {
color: var(--colors-text-brand-tertiary-600);
/* Display lg/Semibold */
font-size: var(--Font-size-display-lg, 48px);
font-weight: 600;
line-height: var(--Line-height-display-lg, 60px); /* 125% */
letter-spacing: -0.96px;
}
/* Demo block - Version 1 */
.demo-block-full > .wpb_wrapper {
gap: .5rem;
}
.demo-block-full .img {
margin-bottom: 1.5rem;
}
.section .demo-block-full h2 {
color: var(--colors-foreground-fg-primary-900, #181D27);
text-align: center;
/* Display md/Bold */
font-size: var(--Font-size-display-md, 36px);
line-height: var(--Line-height-display-md, 44px); /* 122.222% */
letter-spacing: -0.72px;
margin-bottom: .5rem;
/* max-width: 48rem;
text-wrap: initial; */
}
.demo-block-full .description p {
max-width: 35rem;
margin: 0 auto 1rem auto;
}
.demo-block-full .row-actions {
margin-bottom: .5rem;
}
.demo-block-full .row-actions .actions-container > .wpb_wrapper {
justify-content: center;
}
.demo-block-full .description-small {
max-width: 40rem;
/* Text sm/Regular */
font-size: var(--Font-size-text-sm, 14px);
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}
/*
--------------------------------------------------------------------------------
LANDING: CAMPANA LITE 0.90€
--------------------------------------------------------------------------------
*/
/* Campaign hero */
.campaign-hero-cta .check-single-list ul {
column-count: 2;
}
.campaign-hero-cta .btn {
width: auto;
}
.campaign-hero-cta .woffu-price-calculator {
margin-top: -1rem;
}
/* Clients */
.section-trial-clients {
background: var(--Colors-Background-bg-secondary, #FAFAFA);
border-top: 1px solid var(--Colors-Border-border-primary, #D5D7DA);
border-bottom: 1px solid var(--Colors-Border-border-primary, #D5D7DA);
padding-top: var(--spacing-6xl);
padding-bottom: var(--spacing-6xl);
}
.section-trial-clients .features-logos {
padding: 0 0 var(--spacing-5xl) 0;
background-color: transparent;
}
/* Client texts */
.client-text-row {
max-width: 870px;
margin: 0 auto 3rem auto;
justify-content: space-between;
}
.client-text-row.full {
max-width: 100%;
}
.client-text-row > div {
max-width: auto;
}
.client-text {
font-size: .875rem;
line-height: 1.42857;
text-align: center;
}
.client-text.flex > .wpb_wrapper {
display: flex;
gap: var(--spacing-xl);
text-align: left;
}
.client-text p {
margin-bottom: .25rem;
}
.client-text strong {
color: var(--colors-text-text-primary-900, #181D27);
font-size: var(--Font-size-display-sm, 30px);
font-weight: 600;
line-height: var(--Line-height-display-sm, 38px);
}
.client-text img {
width: 5.6875rem;
margin-bottom: .25rem;
}
.label-list ul {
list-style: none outside none;
padding-left: 0;
margin-bottom: 0;
display: flex;
justify-content: center;
gap: var(--spacing-md);
}
.label-list ul li {
background: var(--Component-colors-Utility-Gray-utility-gray-50, #FAFAFA);
border: 1px solid var(--Component-colors-Utility-Gray-utility-gray-200, #E9EAEB);
border-radius: var(--radius-full, 9999px);
padding: var(--spacing-xs, 4px) var(--spacing-lg, 12px);
/* Text xs/Medium */
font-size: var(--Font-size-text-xs, 12px);
font-weight: 500;
line-height: var(--Line-height-text-xs, 18px); /* 150% */
}
.client-logos-title {
font-size: 1.125rem;
}
/* Tabla Versus */
.table-versus {
width: 100%;
min-width: 760px;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
margin: 0;
color: #171B2A;
}
.table-versus-container {
overflow: visible;
border-radius: 16px;
}
.table-versus-container > .wpb_wrapper > .wpb_text_column:first-child {
margin-bottom: 0;
overflow-x: auto;
border-radius: 16px 16px 0 0;
}
.table-versus th,
.table-versus td {
width: 20% !important;
height: 67px;
box-sizing: border-box;
padding: 16px 24px;
text-align: center;
font-size: .875rem;
line-height: 1.4;
border: 0;
}
.table-versus thead th {
height: 81px;
background: #FAFAFA;
font-size: .875rem;
font-weight: 700;
color: #515462;
vertical-align: middle;
line-height: 1.4;
}
.table-versus thead th:first-child {
border-radius: 16px 0 0;
color: #123DFF;
text-align: left;
}
.table-versus thead th:last-child {
border-radius: 0 16px 0 0;
}
.table-versus thead th small {
display: block;
margin-top: 2px;
color: #515462;
font-size: .8125rem;
font-weight: 400;
line-height: 1.4;
}
.table-versus .col-us {
border-right: 2px solid #3162FF;
border-left: 2px solid #3162FF;
}
.table-versus thead .col-us {
border-top: 2px solid #3162FF;
border-radius: 17px 17px 0 0;
background: #E5F2FD;
color: #171B2A;
}
.table-versus thead .col-us small {
color: #515462;
}
.table-versus tbody tr:nth-child(even) td {
background: #FAFAFA;
}
.table-versus tbody tr:last-child .col-us {
border-bottom: 2px solid #3162FF;
border-radius: 0 0 17px 17px;
}
.table-versus tbody td:first-child {
color: #171B2A;
font-weight: 400;
text-align: left;
}
.table-versus .price-cell {
color: #171B2A;
font-size: 18px;
font-weight: 700;
letter-spacing: -.03em;
}
.table-versus span.check {
content: url('data:image/svg+xml,');
display: inline-block;
width: 22px;
height: 22px;
vertical-align: middle;
}
.table-versus span.no {
color: #9CA0AA;
font-size: 22px;
line-height: 1;
}
.table-versus span.accent {
border-radius: var(--radius-full, 9999px);
border: 1px solid var(--Component-colors-Utility-Success-utility-success-200, #ABEFC6);
background: var(--Component-colors-Utility-Success-utility-success-50, #ECFDF3);
padding: var(--spacing-xs, 4px) var(--spacing-xl, 16px);
color: #067647;
display: inline-block;
}
.table-foot {
margin: 0 !important;
padding: 24px;
border-radius: 0 0 16px 16px;
background: #E5F2FD;
color: #171B2A;
font-size: .875rem;
line-height: 1.4;
}
.table-foot > .wpb_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.table-foot p {
margin: 0;
}
@media (max-width: 480px) {
.table-versus {
min-width: 0;
width: 100%;
table-layout: fixed;
}
.table-versus th,
.table-versus td {
width: 18% !important;
height: auto;
padding: 9px 3px;
font-size: 10px;
line-height: 1.25;
overflow-wrap: anywhere;
}
.table-versus th:first-child,
.table-versus td:first-child {
width: 28% !important;
padding-right: 5px;
padding-left: 8px;
overflow-wrap: normal;
word-break: normal;
hyphens: auto;
}
.table-versus thead th {
height: 58px;
font-size: 10px;
line-height: 1.2;
}
.table-versus thead th small {
display: none;
}
.table-versus .price-cell {
font-size: 12px;
line-height: 1.15;
white-space: normal;
}
.table-versus span.check {
width: 16px;
height: 16px;
}
.table-versus span.no {
font-size: 16px;
}
.table-versus .col-us {
border-right-width: 1.5px;
border-left-width: 1.5px;
}
.table-versus thead .col-us {
border-top-width: 1.5px;
border-radius: 12px 12px 0 0;
}
.table-versus tbody tr:last-child .col-us {
border-bottom-width: 1.5px;
border-radius: 0 0 12px 12px;
}
.table-foot {
padding: 14px 10px;
font-size: 11px;
line-height: 1.35;
}
}
@media (max-width: 399px) {
.table-versus {
min-width: 368px;
}
}
/* Campaign feature */
.section-campaign-features .section-header.dark h2 {
text-align: left;
}
.campaign-feature {
flex-direction: column;
}
.campaign-feature .feature-title {
color: var(--Colors-Text-text-secondary_on-brand, #B3D5FF);
/* Text md/Semibold */
font-size: var(--Font-size-text-md, 16px);
font-weight: 600;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.campaign-feature h3 {
color: var(--colors-text-text-primary-900, #F7F7F7);
/* Display xs/Semibold */
font-family: var(--Font-family-font-family-display, Inter);
font-size: var(--Font-size-display-xs, 24px);
font-style: normal;
font-weight: 600;
line-height: var(--Line-height-display-xs, 32px); /* 133.333% */
}
.campaign-feature .feature-text {
color: var(--colors-text-text-secondary-700, #A8ADC8);
/* Text md/Semibold */
font-size: var(--Font-size-text-md, 16px);
font-weight: 600;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.campaign-feature .feature-text p {
margin-bottom: 0;
}
/* Campaign tags */
.campaign-tag-row {
align-items: center;
}
.campaign-tag-row h3 {
font-weight: 700;
}
.campaign-tag-row .trial-tag-list ul {
margin-bottom: 0 !important;
}
/* Campaign steps */
.campaign-steps-row {
--row-gap-x: var(--spacing-3xl);
--row-gap-y: var(--spacing-4xl);
margin-bottom: var(--spacing-7xl);
}
.campaign-steps-card {
gap: .9375rem;
height: 100%;
}
.campaign-steps-card .feature-title {
color: var(--colors-text-text-brand-secondary-700, #0120F4);
font-size: 24px;
font-weight: 600;
line-height: 30.4px; /* 126.667% */
}
.campaign-steps-cta {
max-width: 25.625rem;
margin: 0 auto;
text-align: center;
color: var(--colors-text-text-secondary-700, #414651);
text-align: center;
/* Text sm/Semibold */
font-family: var(--Font-family-font-family-body, Inter);
font-size: var(--Font-size-text-sm, 14px);
font-style: normal;
font-weight: 600;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}
.campaign-steps-cta .btn {
margin-bottom: var(--spacing-4xl);
}
/* Campaign conditions */
.campaign-conditions {
background: var(--Colors-Base-white, #FFF);
border: 1px solid var(--Colors-Border-border-secondary, #E9EAEB);
border-radius: var(--radius-2xl, 16px);
padding: var(--spacing-6xl, 48px) var(--spacing-6xl, 48px) var(--spacing-5xl, 40px) var(--spacing-6xl, 48px);
}
.campaign-conditions-list ul li + li {
margin-top: var(--spacing-4xl);
}
.campaign-conditions-list ul li strong {
color: var(--colors-text-text-primary-900, #181D27);
}
/* Footer demo */
.section-footer-demo {
background-color: var(--Colors-Background-bg-primary, #0C0E12);
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
padding: 6.875rem 0 var(--spacing-7xl) 0;
}
.footer-demo-block {
/* padding-bottom: var(--spacing-7xl); */
color: var(--Colors-Text-text-tertiary_on-brand, #B3D5FF);
text-align: center;
/* Text xl/Regular */
font-size: var(--Font-size-text-xl, 20px);
font-weight: 400;
line-height: var(--Line-height-text-xl, 30px); /* 150% */
}
.footer-demo-block .description,
.footer-demo-block .row-actions {
margin-bottom: var(--spacing-6xl);
}
.footer-demo-block .description p {
max-width: 40rem;
}
.footer-demo-block .subheading {
color: var(--Colors-Text-text-secondary_on-brand, #B3D5FF);
margin-bottom: var(--spacing-xl);
}
.footer-demo-block h2 {
color: var(--Colors-Text-text-primary_on-brand, #FFF) !important;
text-align: center;
/* Display md/Bold */
font-size: var(--Font-size-display-md, 36px);
font-weight: 700;
line-height: var(--Line-height-display-md, 44px); /* 122.222% */
letter-spacing: -0.72px;
max-width: 38.75rem;
margin: 0 auto .5rem auto;
}
.footer-demo-block .description-small {
margin: 0 auto;
color: var(--colors-text-text-quaternary-500, #717680);
text-align: center;
/* Text lg/Regular */
font-family: var(--Font-family-font-family-body, Inter);
font-size: var(--Font-size-text-lg, 18px);
font-style: normal;
font-weight: 400;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
max-width: 31.25rem;
}
#footer.footer-single {
padding-top: var(--spacing-7xl);
background-position: bottom center;
}
.footer-single-menu {
display: flex;
gap: 1rem;
width: fit-content;
margin-left: auto;
}
/*
--------------------------------------------------------------------------------
LANDING: INFORME TIEMPO TRABAJO 2025 (RECURSOS)
--------------------------------------------------------------------------------
*/
/* Hero */
.informe-tiempo-hero-header {
max-width: 638px;
}
.informe-tiempo-hero-cta .img {
max-width: 15.5rem;
margin: 0 auto;
}
.informe-form-container h3 {
/* Display xs/Bold */
font-size: var(--Font-size-display-xs, 24px);
font-weight: 700;
line-height: var(--Line-height-display-xs, 32px); /* 133.333% */
}
.informe-form-container .pardot-iframe {
min-height: auto;
}
/* Clients */
.informe-tiempo-clients-row {
--row-gap-x: var(--spacing-7xl);
}
.informe-tiempo-clients-row .marker-circle {
/* Text xl/Semibold */
font-size: var(--Font-size-text-xl, 20px);
font-weight: 500;
line-height: var(--Line-height-text-xl, 30px); /* 150% */
}
.informe-tiempo-clients-row .marker-circle li::before {
top: calc(50% - 20px);
}
.informe-tiempo-clients-row .client-logos-title {
margin-bottom: var(--spacing-4xl);
}
/* Grid de logos */
.logos-columns .imagelist {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
margin: 0;
padding: 0;
list-style: none;
}
.logos-columns .imagelist li {
display: flex;
align-items: center;
justify-content: center;
min-height: 90px;
padding: 20px;
background: #f8f8f8;
border-radius: 6px;
}
.logos-columns .imagelist li img {
display: block;
width: auto;
height: auto;
max-width: 75%;
max-height: 38px;
object-fit: contain;
}
/* Mobile */
@media (max-width: 575px) {
.logos-columns .imagelist {
gap: 12px;
}
.logos-columns .imagelist li {
min-height: 60px;
padding: 12px;
}
}
/* Features */
.section-informe-tiempo-features .section-header {
color: var(--Colors-Text-text-primary_on-brand, #E0E2EB);
}
.card-feature-dark {
border-radius: var(--radius-2xl, 16px);
border: 1px solid var(--Colors-Border-border-secondary, #323850);
background: var(--Colors-Background-bg-primary, #161927);
box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
padding: 1.75rem;
color: var(--colors-text-text-secondary-700, #A8ADC8);
font-size: var(--Font-size-text-md, 16px);
font-weight: 500;
line-height: var(--Line-height-text-md, 24px);
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.card-feature-dark .feature-title {
color: var(--Component-colors-Utility-Brand-utility-brand-300, #86B9FF);
/* Display md/Bold */
font-size: var(--Font-size-display-md, 36px);
font-weight: 700;
line-height: var(--Line-height-display-md, 44px); /* 122.222% */
letter-spacing: -0.72px;
}
.card-feature-dark .feature-text h3 {
color: var(--colors-text-text-primary-900, #F7F7F7);
font-size: 18px;
font-weight: 600;
line-height: var(--Line-height-text-xl, 30px); /* 166.667% */
}
.card-feature-dark.accent {
border: 1.772px solid #B3D5FF;
background: linear-gradient(180deg, var(--Component-colors-Utility-Brand-utility-brand-100, #D5EAFF) 33.83%, var(--Component-colors-Utility-Brand-utility-brand-400, #578BFF) 208.8%);
color: var(--colors-text-text-secondary-700, #414651);
}
.card-feature-dark.accent .feature-title {
color: var(--colors-text-text-brand-secondary-700, #0120F4);
}
.card-feature-dark.accent .feature-text h3 {
color: var(--colors-text-text-primary-900, #181D27);
}
/* Main */
.informe-tiempo-main-row {
--row-gap-x: var(--spacing-9xl);
--row-gap-y: var(--spacing-7xl);
}
.informe-tiempo-main-row + .informe-tiempo-main-row {
margin-top: var(--spacing-9xl);
}
.informe-tiempo-header h3 {
/* Display xs/Bold */
font-size: var(--Font-size-display-xs, 24px);
line-height: var(--Line-height-display-xs, 32px); /* 133.333% */
}
.informe-tiempo-header {
/* Text xl/Regular */
font-size: var(--Font-size-text-xl, 20px);
font-weight: 400;
line-height: var(--Line-height-text-xl, 30px); /* 150% */
}
/* Form */
.section-informe-tiempo-form {
background: url(../images/informe-tiempo-form-bg.svg) no-repeat 0 100%;
background-color: var(--Colors-Background-bg-tertiary, #F5F5F5);
background-size: cover;
}
.informe-tiempo-form-row {
--row-gap-x: var(--spacing-9xl);
--row-gap-y: var(--spacing-7xl);
}
.informe-tiempo-form-header h2 {
/* Display md/Bold */
font-size: var(--Font-size-display-md, 36px);
line-height: var(--Line-height-display-md, 44px); /* 122.222% */
letter-spacing: -0.72px;
}
.informe-tiempo-form-header .check-list {
color: var(--colors-text-text-tertiary-600, #535862);
/* Text lg/Regular */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 400;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
/*
--------------------------------------------------------------------------------
LANDING: INFORME TIEMPO TRABAJO 2025 THANKYOU
--------------------------------------------------------------------------------
*/
.informe-tiempo-cover-full {
max-width: 18.625rem;
margin-left: auto;
border-radius: .625rem;
box-shadow: 0 273.601px 75.862px 0 rgba(0, 0, 0, 0.00),
0 175.353px 69.644px 0 rgba(0, 0, 0, 0.01),
0 98.248px 58.451px 0 rgba(0, 0, 0, 0.05),
0 43.527px 43.527px 0 rgba(0, 0, 0, 0.09),
0 9.949px 23.629px 0 rgba(0, 0, 0, 0.10);
}
.text-balance {
text-wrap: balance;
}
.section-informe-tiempo-card .trial-card-caption {
padding-left: var(--spacing-3xl);
padding-right: var(--spacing-3xl);
}
.section-informe-tiempo-reviews {
background-color: #fff;
padding-top: 0;
padding-bottom: 2.5rem;
}
.section-informe-tiempo-reviews .features-logos {
padding: 4rem 0 7.5rem 0;
}
.section-informe-tiempo-resources .woffu-resource-posts-row {
margin-bottom: 0;
}
/* Social Share */
.woffu-social-share {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--spacing-4xl);
margin-top: var(--spacing-3xl);
}
.woffu-social-share__item:hover {
text-decoration: none;
}
.woffu-social-share--light .woffu-social-share__item {
color: #fff;
}
.woffu-social-share--dark .woffu-social-share__item {
color: #000;
}
/*
--------------------------------------------------------------------------------
LANDING: PRE BLACK FRIDAY
--------------------------------------------------------------------------------
*/
/* KPI features */
.kpi-feature-row {
--row-gap-x: 1rem;
--row-gap-y: 1rem;
}
.kpi-feature {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-3xl) 1.25rem;
border: 1px solid var(--Colors-Border-border-secondary, #E9EAEB);
border-radius: var(--radius-2xl, 16px);
background: linear-gradient(180deg, var(--Colors-Background-bg-secondary, #FAFAFA) 0%, #E8F4FF 100%);
text-align: center;
height: 100%;
}
.kpi-feature .feature-title {
margin: 0 0 .25rem;
color: var(--colors-text-text-brand-secondary-700, #0120F4);
font-size: var(--Font-size-display-md, 36px);
font-style: normal;
font-weight: 700;
line-height: var(--Line-height-display-md, 44px); /* 122.222% */
}
.kpi-feature .feature-text h3 {
margin: 0 0 .375rem;
color: var(--colors-text-text-primary-900, #181D27);
font-size: var(--Font-size-text-md, 16px);
font-style: normal;
font-weight: 600;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.kpi-feature .feature-text p {
margin: 0;
color: var(--colors-text-text-tertiary-600, #535862);
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 23px; /* 153.333% */
}
/* Icon single features */
.icon-single-feature {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
column-gap: 1rem;
row-gap: .375rem;
align-items: start;
padding: 1.5rem;
border-radius: var(--radius-2xl, 16px);
background: var(--Colors-Background-bg-secondary, #FAFAFA);
margin-bottom: 1.5rem;
}
.icon-single-feature .feature-image {
grid-column: 1;
grid-row: 1 / span 2;
margin: 0;
line-height: 0;
}
.icon-single-feature .feature-image img {
display: block;
width: 2.75rem;
height: 2.75rem;
}
.icon-single-feature .feature-title {
grid-column: 2;
margin: 1px 0 0;
color: var(--colors-text-text-primary-900, #181D27);
font-size: 1.125rem;
font-style: normal;
font-weight: 600;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.icon-single-feature .feature-text {
grid-column: 2;
color: var(--colors-text-text-tertiary-600, #535862);
font-size: .9375rem;
font-style: normal;
font-weight: 400;
line-height: 1.54;
}
.icon-single-feature .feature-text p {
margin: 0;
}
/* Icon single features mini */
.icon-single-feature.light {
border-radius: var(--radius-2xl, 16px);
border: 1px solid var(--Colors-Border-border-secondary, #E9EAEB);
background: var(--Colors-Background-bg-primary, #FFF);
padding: var(--spacing-3xl, 24px) var(--spacing-xl, 16px);
grid-template-columns: 1rem minmax(0, 1fr);
margin-bottom: 0;
}
.icon-single-feature.light .feature-image {
padding-top: 6px;
}
.icon-single-feature.light .feature-image {
width: 1rem;
}
/* Title block */
.title-block {
margin-top: 4rem;
text-align: center;
}
.title-block h2 strong,
.title-block h3 strong,
.title-block h4 strong {
color: var(--colors-text-text-brand-secondary-700, #0120F4);
}
/* Section header xl */
.section-header-xl .subheading {
margin-bottom: .75rem;
}
.section-header-xl h2 {
font-size: 3rem;
margin-bottom: 3.5rem !important;
}
.section-header-xl .img {
max-width: 33.75rem;
}
.section-header-xl > div.wpb_wrapper {
gap: 0;
}
/* Feature caption */
.feature-card {
border-radius: 28.354px;
background: var(--Colors-Background-bg-primary, #FFF);
backdrop-filter: blur(10.632911682128906px);
overflow: hidden;
}
.feature-card > .wpb_wrapper {
display: flex;
flex-direction: column;
}
.feature-card .caption {
padding: var(--spacing-5xl, 40px);
color: var(--colors-text-text-tertiary-600, #535862);
/* Text md/Semibold */
font-size: var(--Font-size-text-md, 16px);
font-weight: 500;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.feature-card .caption h3 {
color: var(--colors-text-text-primary-900, #181D27);
/* Text xl/Semibold */
font-size: var(--Font-size-text-xl, 20px);
line-height: var(--Line-height-text-xl, 30px); /* 150% */
}
.feature-card .caption + .accent-title {
margin-left: var(--spacing-5xl);
margin-top: -1rem;
}
.feature-card .picture {
margin-top: auto;
}
/* Step feature */
.step-feature {
display: flex;
align-items: flex-start;
gap: var(--spacing-4xl);
align-self: stretch;
}
.step-feature + .step-feature {
margin-top: var(--spacing-3xl);
}
.step-feature .feature-title {
/* Display sm/Semibold */
font-size: var(--Font-size-display-sm);
font-weight: 600;
line-height: var(--Line-height-display-sm);
}
.step-feature .feature-text {
/* Text md/Medium */
font-size: var(--Font-size-text-md);
font-weight: 500;
line-height: var(--Line-height-text-md);
}
.step-feature .feature-text h3,
.step-feature .feature-text h4 {
/* Text lg/Semibold */
font-size: var(--Font-size-text-lg);
font-weight: 600;
line-height: var(--Line-height-text-lg);
}
.step-feature .feature-text p {
margin-bottom: 0;
}
.step-feature .feature-text a {
text-decoration: underline;
}
.step-feature.light * {
color: #fff;
}
.section-header.light {
color: #E0E2EB;
}
.section-header.light h2 {
color: #F7F7F7;
}
.section-header.light h2 strong {
color: #578BFF;
}
/* Campaign main */
.campaign-section-header > div.wpb_wrapper {
gap: 1.5rem;
}
.campaign-section-header .accent-title {
margin-bottom: 0;
}
.campaign-section-header .step-feature {
margin-bottom: var(--spacing-md);
}
.campaign-section-header .step-feature + .step-feature {
margin-top: 0;
}
.icon-title {
color: var(--colors-text-text-primary-900, #181D27);
/* Display xs/Semibold */
font-family: var(--Font-family-font-family-display, Inter);
font-size: var(--Font-size-display-xs, 24px);
font-style: normal;
font-weight: 600;
line-height: var(--Line-height-display-xs, 32px); /* 133.333% */
}
.icon-title.icon-square-clock {
background: url(../images/icon-square-clock.svg) no-repeat 0 50%;
background-size: 2.5rem auto;
padding-left: calc(2.5rem + 1rem);
min-height: 2.5rem;
}
.icon-title.icon-square-folder {
background: url(../images/icon-square-folder.svg) no-repeat 0 50%;
background-size: 2.5rem auto;
padding-left: calc(2.5rem + 1rem);
min-height: 2.5rem;
}
.legal-card-row {
}
.legal-card {
border-radius: var(--radius-4xl, 24px);
border: 1px solid var(--Colors-Border-border-secondary, #E9EAEB);
background: var(--Colors-Background-bg-secondary, #FAFAFA);
padding: var(--spacing-5xl, 40px) var(--spacing-4xl, 32px) var(--spacing-3xl, 24px) var(--spacing-4xl, 32px);
}
.legal-card .check-list ul > li {
background-image: url('data:image/svg+xml,');
}
.legal-block {
border-radius: var(--radius-4xl, 24px);
border: 1px dashed rgba(48, 96, 255, 0.50);
background: #FFF;
box-shadow: 0 433px 121px 0 rgba(0, 0, 0, 0.00), 0 277px 111px 0 rgba(0, 0, 0, 0.01);
padding: var(--spacing-6xl, 48px) 40px;
margin-top: 2rem;
}
.legal-block > .wpb_wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.legal-block h3 {
color: #0D2EFF;
font-size: 26.662px;
font-weight: 600;
line-height: 41.474px; /* 155.556% */
margin-bottom: .375rem;
}
/* Campaign Counter Section */
.campaign-counter-row {
align-items: center;
}
.final-count {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.final-count > div {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 118px;
min-height: 110px;
padding: 1rem;
overflow: hidden;
color: #ffffff;
text-align: center;
border-radius: var(--radius-2xl, 16px);
border: 1px solid var(--Component-colors-Utility-Brand-utility-brand-400, #578BFF);
background: rgba(87, 139, 255, 0.20);
}
.final-count > div > b {
display: block;
margin: 0;
color: var(--Colors-Text-text-secondary_on-brand, #B3D5FF);
text-align: center;
/* Display md/Bold */
font-size: var(--Font-size-display-md, 36px);
font-weight: 700;
line-height: var(--Line-height-display-md, 44px); /* 122.222% */
letter-spacing: -0.72px;
}
.final-count > div > span {
display: block;
margin-top: .25rem;
color: var(--Colors-Text-text-white, #FFF);
text-align: center;
/* Text xl/Regular */
font-size: var(--Font-size-text-xl, 20px);
font-weight: 400;
line-height: var(--Line-height-text-xl, 30px); /* 150% */
}
/*
--------------------------------------------------------------------------------
PAGE: POR QUE WOFFU - COMPARA WOFFU
--------------------------------------------------------------------------------
*/
/* Hero */
#graphics-hero {
background-image: url(../images/graphics-hero.png);
background-size: cover;
background-position: 100% 0;
text-align: left;
/* color: #617892; */
font-weight: 400;
padding: 171px 0 130px 0;
margin-bottom: 0;
}
#graphics-hero h1 {
/* color: #052B53; */
max-width: 730px;
margin-bottom: 18px;
font-size: 51px;
font-style: italic;
font-weight: 400;
line-height: 1.2;
}
#graphics-hero p {
max-width: 590px;
margin: 0 0 45px 0;
line-height: 1.62;
}
#graphics-hero h2 {
/* color: #052B53; */
margin-bottom: 2rem;
font-size: 2.1875rem;
line-height: 2;
}
#graphics-hero h2 strong {
font-weight: 500;
background: url(../images/curved-line.svg) no-repeat 0 100%;
display: inline-block;
}
/* Section */
.graphic-section {
font-size: 19px;
font-weight: 400;
line-height: 1.58;
padding: 103px 0 193px 0;
}
.graphic-section.violet {
background: url(../images/graphic-violet-bg.svg) no-repeat 0 50%;
background-size: cover;
}
.graphic-section.green {
background: url(../images/graphic-green-bg.svg) no-repeat 0 50%;
background-size: cover;
}
.graphic-section.blue {
background: url(../images/graphic-blue-bg.svg) no-repeat 0 50%;
background-size: cover;
}
.graphic-section.orange {
background: url(../images/graphic-orange-bg.svg) no-repeat 0 50%;
background-size: cover;
}
.graphic-section.violet1 {
background: url(../images/graphic-violet1-bg.svg) no-repeat 0 50%;
background-size: cover;
}
/* Caption */
.graphic-caption h2 {
width: 900px;
font-size: 35px;
font-weight: 400;
line-height: 2.28;
margin-bottom: 17px;
}
.graphic-caption .description-1 {
width: 690px;
margin-bottom: 1rem !important;
}
.graphic-caption .description-2 {
max-width: 500px;
}
.graphic-caption .description ul {
color: var(--colors-text-primary-900); /*#052B53*/
font-weight: 500;
list-style: none outside none;
padding-left: 0;
margin-top: 2rem;
margin-bottom: 2rem;
}
.graphic-caption .description ul li {
background-image: url(../images/graphic-li-blue.svg);
background-repeat: no-repeat;
background-position: 0 0;
padding-top: 10px;
padding-left: 68px;
min-height: 50px;
}
.graphic-section.violet .graphic-caption .description ul li,
.graphic-section.violet1 .graphic-caption .description ul li {
background-image: url(../images/graphic-li-violet.svg);
}
.graphic-section.green .graphic-caption .description ul li {
background-image: url(../images/graphic-li-green.svg);
}
.graphic-caption .description ul li+li {
margin-top: 25px;
}
.graphic-caption .btn {
margin-top: 54px;
}
#graphic-section-1 .graphic-caption .description-2 {
margin-top: 55px;
}
/* Legend */
.graphic-legend {
text-align: right;
margin-top: 54px;
margin-bottom: 2rem !important;
}
/* Card */
.graphic-card {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgb(0, 177, 255, 0.2);
border-radius: 50px;
padding: 2rem 4rem;
margin-top: 4rem;
}
/* Simple review */
.simple-review {
margin-left: 0 !important;
max-width: 100%;
background: none;
box-shadow: none;
border-radius: 0;
border: none;
}
.simple-review .card-body {
padding: 0;
min-height: auto;
}
.graphic-section .simple-review {
margin-top: 112px;
margin-bottom: 0;
}
.graphic-section .simple-review h2 {
margin-bottom: 0;
}
/* Form */
.graphics-form-section {
background: url(../images/colors-bg.svg) no-repeat 0 0;
background-size: cover;
padding: 157px 0 137px 0;
}
.graphics-form-container {
padding: 66px 63px 63px 0;
position: relative;
width: fit-content;
margin: 0 auto;
}
.graphics-form-container::before {
content: '';
background: url(../images/circle_3.svg) no-repeat 0 0;
display: block;
width: 165px;
height: 173px;
position: absolute;
top: 0;
left: -43px;
}
.graphics-form-container::after {
content: '';
background: url(../images/circle_4.svg) no-repeat 0 0;
display: block;
width: 253px;
height: 266px;
position: absolute;
bottom: 0;
right: 0;
}
.graphics-form-container .wpb_wrapper {
background-color: #fff;
border-radius: 20px;
box-shadow: 0px 4px 17px rgb(0 0 0 / 5%);
padding: 2rem;
z-index: 1;
position: relative;
}
/* Popup kit digital */
.pum-theme-tema-por-defecto .pum-container {
padding: 0 !important;
background: radial-gradient(100% 94.59% at 24.85% 79.79%, rgba(196, 233, 253, 0.14) 0%, rgba(255, 255, 255, 0.00) 100%), #F3F8FC !important;
max-width: 90% !important;
margin-bottom: 0 !important;
}
.pum-theme-tema-por-defecto .pum-close {
background: url(../images/close.svg) no-repeat 0 0 !important;
background-size: contain !important;
width: 20px !important;
height: 20px !important;
box-shadow: none !important;
font-size: 0 !important;
right: 20px !important;
top: 20px !important;
}
/*
--------------------------------------------------------------------------------
PAGE: PRICING
--------------------------------------------------------------------------------
*/
/* Plan card */
.plan-card {
background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(180deg, 0%, #FFFFFF 100%);
box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.02);
border: 1px solid #EFF1F4;
color: #617892;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
text-align: center;
border-radius: 10px;
height: auto !important;
}
.plan-card .card-body {
padding: 2rem 0;
}
.plan-card-title {
color: #052B53;
font-size: 1.5rem;
font-weight: 500;
line-height: 1.17;
margin-bottom: 1rem;
}
.plan-card-title b {
color: #0060FF;
font-weight: 500;
}
.plan-card-text {
padding: 0 1rem;
min-height: 6.25rem;
}
.plan-card-price {
background-color: #FAFCFF;
color: #052B53;
font-size: 20px;
line-height: 24px;
border-top: 1px solid #E1E1E1;
border-bottom: 1px solid #E1E1E1;
border-color: #EFF1F4;
min-height: 162px;
padding: 29px 31px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.plan-card-features {
text-align: left;
list-style: none outside none;
padding: 1.5rem 2rem 0 2rem;
margin: 0;
}
.plan-card-features li {
margin-bottom: 1rem;
display: flex;
}
.plan-card-features li:last-child {
margin-bottom: 0;
}
.plan-card-features li::before {
content: url(../images/check.svg);
margin-right: .5rem;
}
.plan-card-features li.plus {
font-weight: 500;
}
.plan-card-features li.plus::before {
content: url(../images/plus.svg);
}
.plan-card.last-feature-label .plan-card-features li:last-child {
color: #052B53;
font-size: .875rem;
padding-left: 34px;
}
.plan-card.last-feature-label .plan-card-features li:last-child::before {
display: none;
}
.plan-card .btn-dark {
display: block;
background: #0060FF;
color: #FFFFFF;
box-shadow: none;
text-transform: none;
}
.plan-card .btn {
margin-top: auto;
border-radius: 8px;
width: 100%;
}
/* Plan Lite */
.plan-card.plan-lite .plan-card-price {
font-size: 1rem;
color: #617892;
}
.plan-card.plan-lite .plan-card-price b {
color: #052B53;
font-weight: 400;
margin-bottom: .125rem;
display: block;
}
.plan-card.plan-lite .plan-card-price big {
font-size: 2rem;
font-weight: 500;
}
.plan-card.plan-lite .plan-card-price s {
text-decoration: red line-through 2px;
}
/* Plan pro */
.plan-card.plan-pro .plan-card-features li:first-child {
font-weight: 500;
}
.plan-card.plan-pro .plan-card-features li:first-child::before {
content: url(../images/plus.svg);
}
/* Plan enterprise */
.plan-card.plan-enterprise {
border-color: #B2CFFF;
box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.05);
}
.plan-card.plan-enterprise .plan-card-text {
color: #052B53;
}
.plan-card.plan-enterprise .plan-card-price {
border-color: #B2CFFF;
}
.plan-card.plan-enterprise .btn-light-new {
background-color: #0060FF;
border-color: #0060FF;
color: #fff;
}
.plan-card.plan-enterprise .btn-light-new:hover {
box-shadow: 0px 10px 20px rgba(0, 96, 255, 0.25);
}
.plan-card.plan-enterprise .plan-card-features {
color: #052B53;
}
.plan-card.plan-enterprise .plan-card-features li:first-child {
font-weight: 500;
}
.plan-card.plan-enterprise .plan-card-features li:first-child::before {
content: url(../images/plus.svg);
}
.plans-button-container {
text-align: center;
margin-top: 4.4375rem;
margin-bottom: 2.0625rem;
}
/* Plan accordeon */
#plans-accordeon {
margin-top: 0;
}
#plans-accordeon h2 {
color: #4A4A4A;
font-size: 1.875rem;
font-weight: 400;
line-height: 1.2;
text-align: center;
margin-bottom: 2.5rem;
}
#plans-accordeon .vc_tta-panel-title {
font-size: 1rem;
}
#plans-accordeon .vc_tta-panel-title > a {
color: #052B53;
padding: 2.4375rem 3rem 2.25rem 3rem;
}
#plans-accordeon .vc_tta-title-text {
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
color: #052B53;
}
#plans-accordeon .vc_tta-controls-icon-position-right .vc_tta-controls-icon {
right: 5rem;
content: url(../images/down.svg);
}
#plans-accordeon .vc_active .vc_tta-controls-icon.vc_tta-controls-icon-triangle {
content: url(../images/up.svg);
}
#plans-accordeon .vc_tta-controls-icon.vc_tta-controls-icon-triangle::before {
display: none;
}
#plans-accordeon .vc_tta-panel {
border: 1px solid #E1E1E1;
border-radius: 0.25rem;
background-color: #FFF;
margin-bottom: 1.875rem;
}
#plans-accordeon .vc_tta-panel-heading,
#plans-accordeon .vc_tta-panel-body {
border: none;
background-color: transparent;
}
#plans-accordeon .vc_tta-panel-body {
padding: 0 3.9375rem 6.25rem 3.9375rem;
}
#plans-accordeon .table {
max-width: 900px;
}
#plans-accordeon .table td,
.table th {
border-top: 1px solid #E1E1E1;
font-size: 0.875rem;
line-height: 1.43;
color: #4A4A4A;
padding-top: 1rem;
padding-bottom: 0.875rem;
vertical-align: middle;
}
#plans-accordeon .table th {
font-weight: 400;
color: #052B53;
}
#plans-accordeon .table td {
color: #052B53;
text-align: center;
}
#plans-accordeon .table thead th {
font-weight: 500;
border-bottom: 1px solid #E1E1E1;
}
#plans-accordeon .table thead th:not(:first-child) {
text-align: center;
}
#plans-accordeon .table thead th:first-child,
#plans-accordeon .table tbody th {
padding-left: 0;
}
#plans-accordeon .table span.checked {
content: url(../images/check.svg);
}
#plans-accordeon .table span.unchecked {
content: url(../images/check-disabled.svg);
}
/*
--------------------------------------------------------------------------------
PAGE: ERRORS 401, 403, 404, 500
--------------------------------------------------------------------------------
*/
#error-hero {
padding-bottom: 30px;
}
#error-page {
position: relative;
padding-top: 100px;
padding-bottom: 6rem;
}
#error-page h2 {
background: url(../images/hr.png) no-repeat 0 100%;
font-size: 40px;
padding-bottom: 25px;
margin-bottom: 25px;
}
#error-page img.error-bg {
position: absolute;
right: -150px;
top: -110px;
}
#error-page .description {
max-width: 465px;
}
#error-page p {
font-size: 21px;
margin-bottom: 50px;
}
#error-page p a {
font-weight: bold;
color: #00b1ff;
}
#error-page .btn-primary {
font-size: 15px;
line-height: 20px;
padding: 11px 15px;
min-width: 161px;
background: #0060ff;
background: -moz-linear-gradient(top, rgba(0, 175, 255, 1) 0%, rgba(0, 96, 255, 1) 100%);
background: -webkit-linear-gradient(top, rgba(0, 175, 255, 1) 0%, rgba(0, 96, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 175, 255, 1) 0%, rgba(0, 96, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8000afff', endColorstr='#800060ff', GradientType=0);
-webkit-box-shadow: 0 10px 20px 0 rgba(0, 96, 255, 0.23);
box-shadow: 0 10px 20px 0 rgba(0, 96, 255, 0.23);
}
/*
--------------------------------------------------------------------------------
LIGHT THEME
--------------------------------------------------------------------------------
*/
body.light-theme,
.light-theme>body {
background: #fff;
}
.light-theme #header:not(.affix) {
position: static;
border-bottom: 1px solid #BAECFD;
}
.light-theme #header nav li a {
color: #617892;
font-size: 14px;
line-height: 28px;
}
/*
--------------------------------------------------------------------------------
STATUS HISTORY
--------------------------------------------------------------------------------
*/
/* Level */
.level-icon::before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.level-icon.level-1::before {
background-color: #0060FF;
}
.level-icon.level-2::before {
background-color: #FECB2F;
}
.level-icon.level-3::before {
background-color: #FD9426;
}
.level-icon.level-4::before {
background-color: #FC3D39;
}
h1.level-1 {
color: #0060FF;
}
h1.level-2 {
color: #FECB2F;
}
h1.level-3 {
color: #FD9426;
}
h1.level-4 {
color: #FC3D39;
}
/* History */
#status-history>header {
border-bottom: 1px solid #BAECFD;
padding: 25px 0 12px 0;
overflow: hidden;
}
#status-history h1 {
color: #617892;
font-size: 32px;
line-height: 32px;
display: inline-block;
}
/* Legend */
#status-history .legend {
font-size: 9.8px;
line-height: 18px;
float: right;
border: 1px solid #BAECFD;
padding: 12px;
border-radius: 10px;
background: #FCFCFC;
}
#status-history .legend ul {
list-style: none outside none;
float: right;
padding: 0;
margin-left: 23px;
margin-bottom: 0;
}
#status-history .legend ul li {
font-weight: 500;
}
#status-history .legend ul li::before {
margin-right: 5px;
vertical-align: text-top;
}
#status-history .status-archives>div {
border-bottom: 1px solid #BAECFD;
padding: 35px 0;
}
#status-history h2 {
color: #617892;
font-size: 26px;
line-height: 32px;
}
#status-history a {
color: #00B1FF;
}
#status-history a:hover {
text-decoration: none;
}
#status-history a.prev {
display: inline-block;
margin-top: 30px;
background: url(../images/status-prev.png) no-repeat 0 50%;
padding-left: 16px;
}
/* Incident */
h2+.incident-history {
margin-top: 30px;
}
.incident-history {
margin-bottom: 30px;
font-size: 14px;
line-height: 26px;
}
.incident-history .level-icon {
float: right;
line-height: 30px;
}
.incident-history .level-icon::before {
width: 15px;
height: 15px;
}
.incident-history .services {
list-style: none outside none;
padding-left: 0;
display: inline-flex;
margin-bottom: 0;
}
.incident-history .services li {
background: #FCFCFC;
border: 1px solid #BAECFD;
padding: 0 12px;
line-height: 18px;
font-size: 10px;
border-radius: 10px;
margin-left: 5px;
font-weight: bold;
}
.incident-history .date {
opacity: 0.5;
margin-top: 10px;
}
.incident-history .date+.date {
margin-top: 0;
}
.incident-history a.more {
opacity: 1;
text-decoration: underline;
}
/*
--------------------------------------------------------------------------------
STATUS INCIDENT
--------------------------------------------------------------------------------
*/
#status-incident {
padding-top: 45px;
}
#status-incident h1 {
text-align: center;
font-size: 32px;
line-height: 32px;
margin-bottom: 20px;
}
#status-incident h2 {
color: #617892;
text-align: center;
font-size: 26px;
line-height: 32px;
padding-bottom: 20px;
}
#status-incident .incident-update {
margin-top: 50px;
}
#status-incident .status {
font-size: 18px;
line-height: 26px;
font-weight: 500;
}
#status-incident .services {
margin-top: 40px;
margin-bottom: 45px;
padding: 45px 55px;
background: #FCFCFC;
border: 1px solid #BAECFD;
border-radius: 10px;
}
#status-incident footer {
border-top: 1px solid #BAECFD;
padding-top: 30px;
}
#status-incident a {
color: #00B1FF;
}
#status-incident a:hover {
text-decoration: none;
}
#status-incident a.prev {
display: inline-block;
background: url(../images/status-prev.png) no-repeat 0 50%;
padding-left: 16px;
}
/*
--------------------------------------------------------------------------------
PAGE: BUZÓN INTERNO
--------------------------------------------------------------------------------
*/
#buzon-interno .wpcf7-radio {
border: none;
/*margin-bottom: 10px;
display: block;*/
}
#buzon-interno .wpcf7-radio .wpcf7-list-item.first {
margin-left: 0;
}
#buzon-interno .wpcf7-form label {
margin-top: 10px;
}
/*
--------------------------------------------------------------------------------
PAGE TRIAL
--------------------------------------------------------------------------------
*/
.hero-trial .article {
max-width: 100%;
}
.hero-trial p {
max-width: 100%;
margin-top: 10px;
}
.trial-content {
text-align: center;
}
.trial-content .footer-text {
margin-top: 3rem;
margin-bottom: 1rem !important;
}
.trial-content .btn-link {
color: #0060ff;
background-color: #fff;
border: 2px solid #0060ff;
border: none;
border-top-color: currentcolor;
border-right-color: currentcolor;
border-bottom-color: currentcolor;
border-left-color: currentcolor;
box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
font-size: 0.875rem;
font-weight: 500;
text-transform: uppercase;
padding: .5rem 1.5rem;
border-radius: 9999px;
}
.trial-content .btn-link:hover {
color: #0060ff;
background-color: #fff;
border-color: #0060ff;
box-shadow: 0px 10px 20px rgba(0, 0, 0, .15);
text-decoration: none;
}
/*
--------------------------------------------------------------------------------
API PAGE
--------------------------------------------------------------------------------
*/
#api-top {
margin-top: 7.5rem;
}
.p-l {
text-align: left;
font-size: 20px;
}
.btn-primary-blue {
color: white;
border-radius: 100px;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
line-height: 20px;
padding: 11px 15px;
min-width: 161px;
background: #0060ff;
background: -moz-linear-gradient(top, rgba(0, 175, 255, 1) 0%, rgba(0, 96, 255, 1) 100%);
background: -webkit-linear-gradient(top, rgba(0, 175, 255, 1) 0%, rgba(0, 96, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 175, 255, 1) 0%, rgba(0, 96, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8000afff', endColorstr='#800060ff', GradientType=0);
-webkit-box-shadow: 0 10px 20px 0 rgba(0, 96, 255, 0.23);
box-shadow: 0 10px 20px 0 rgba(0, 96, 255, 0.23);
}
#api-links a.more {
background: url(../images/arrow.svg) no-repeat 99% 50%;
background-size: 1.375rem auto;
color: #00b1ff;
display: inline-block;
font-size: 1.3125rem;
line-height: 1.29;
margin-bottom: 0;
padding-right: 2rem;
}
#api-links a.more:hover {
text-decoration: none;
}
#api-links a.more+a.more {
margin-top: 0.625rem;
}
/*
--------------------------------------------------------------------------------
RESOURCES PAGE
--------------------------------------------------------------------------------
*/
/* Resources hero */
/* Resource row */
.resources-row>div {
order: 4;
}
.resources-row>div:nth-child(1) {
order: 3;
}
.resources-row>div:nth-child(2) {
order: 1;
}
.resources-row>div:nth-child(3) {
order: 2;
}
/* Resource card */
.resources-row .resource-card {
overflow: hidden;
height: 100%;
}
.resource-card {
transition: all .3s ease;
max-width: 380px;
margin-left: auto;
margin-right: auto;
top: 0;
border-radius: 1rem;
border: 1px solid #E9EAEB;
background: #FFF;
box-shadow: 0 4px 17px 0 rgba(0, 0, 0, 0.03);
}
.resource-card .card-header {
padding: 0;
border-radius: var(--radius-none, 0);
background: linear-gradient(180deg, #EDEFF9 -12.5%, #CDDDFB 137.3%), linear-gradient(180deg, #0060FF 0%, #CDDDFB 100%), url() lightgray 50% / cover no-repeat;
text-align: center;
}
.resource-card .card-header img {
bottom: -1px;
position: relative;
}
.resource-card .card-body {
padding: 1.5rem 1.5rem 3.5rem 1.5rem;
}
.resource-card h2 {
color: var(--colors-text-primary-900); /*#052B53*/
font-size: var(--Font-size-text-lg, 18px);
font-weight: 600;
line-height: var(--Line-height-text-lg, 28px);
margin-bottom: .25rem;
}
.resource-card .resource-description {
overflow: hidden;
color: var(--colors-text-tertiary-600); /*#617892*/
text-overflow: ellipsis;
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px);
height: 4.5rem;
}
.resource-card .resource-description p {
margin-bottom: none;
}
.resource-card .category {
margin-bottom: 18px;
border-radius: var(--radius-full, 9999px);
border: 1px solid rgba(0, 96, 255, 0.20);
background: #EDF4FF;
width: fit-content;
padding: 2px 10px;
color: #0060FF;
text-align: center;
font-size: var(--Font-size-text-sm, 14px);
font-weight: 500;
line-height: var(--Line-height-text-sm, 20px);
text-wrap: balance;
}
.resource-card .btn-default {
font-size: .8125rem;
line-height: 1;
padding: .5rem .75rem;
min-width: 112px;
box-shadow: none;
}
.resource-card:hover {
text-decoration: none;
opacity: 1;
top: -14px;
box-shadow: 0px 4px 56px rgba(0, 0, 0, 0.12);
}
.resource-card:focus {
text-decoration: none;
}
/*
--------------------------------------------------------------------------------
RESOURCE DETAIL PAGE
--------------------------------------------------------------------------------
*/
.single-resource #main {
background: linear-gradient(355deg, #F1F6FF -17.73%, #FFF 97.49%);
}
/* Hero */
.resource-hero {
text-align: left;
padding: 4.5rem 0 !important;
margin-bottom: 0;
}
.resource-hero h1 {
max-width: 670px;
margin-bottom: 2rem;
}
.resource-hero .category {
border-radius: 9999px;
border: 1px solid rgba(0, 96, 255, 0.20);
background: #EDF4FF;
width: fit-content;
padding: 2px 10px;
color: #0060FF;
text-align: center;
font-size: .875rem;
font-weight: 500;
line-height: 1.25rem;
}
.resource-hero .text {
margin-top: 1.5rem;
max-width: 670px;
}
.resource-hero img {
border-radius: 1.25rem;
}
.resource-hero .resource-hero-language {
font-size: 1rem;
margin-top: 1.5rem;
}
.resource-breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 1.5rem;
font-size: .875rem;
font-weight: 600;
line-height: 1.42;
}
.resource-breadcrumbs a,
.resource-breadcrumbs span {
display: inline-flex;
align-items: center;
}
.resource-breadcrumbs a {
color: #717680;
}
.resource-breadcrumbs span {
color: #414651;
}
.resource-breadcrumb-separator {
flex: 0 0 auto;
}
/* Main section */
.resource-section {
padding: 6rem 0;
}
/* Content */
.resource-description {
font-size: 1.4375rem;
line-height: 1.61;
}
.resource-description p {
max-width: 590px;
margin-bottom: 2rem;
}
.resource-content iframe {
width: 560px;
/* min-height: 400px; */
}
.resource-form-container {
padding: 1.25rem 1.875rem;
max-width: 560px;
margin: 0 auto 0 auto;
text-align: center;
border-radius: 1.5rem;
border: 0.861px solid rgba(0, 96, 255, 0.16);
background: #D1E2FF;
}
/* Webinar Team */
.webinar-team-row {
justify-content: center;
--row-gap-x: 1.25rem;
}
.webinar-team-card {
background: #FAFAFA;
border-radius: 1.5rem;
padding: 1.5rem;
max-width: 290px;
margin: 0 auto;
}
.webinar-team-card h3 {
font-size: 1.125rem;
}
.webinar-team-card h4 {
color: #2B7AFE;
font-size: 1rem;
margin-bottom: .5rem;
}
/* Webinar Numbers */
.webinar-number {
color: var(--colors-text-primary-900); /*#052B53*/
font-size: 1.125rem;
font-weight: 600;
line-height: 1.56;
text-align: center;
}
.webinar-number h3 {
color: #2B7AFE;
text-align: center;
font-size: 3.75rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: -1.2px;
margin-bottom: .75rem;
}
/* Webinar About */
.webinar-about-row {
--row-gap-x: 3.625rem;
}
.webinar-about-row h2 {
font-size: var(--font-size-l);
}
.webinar-about {
font-size: 1rem;
}
.webinar-about h3 {
font-size: 1.125rem;
margin-bottom: .5rem;
}
.webinar-about p {
margin-bottom: 0;
}
.button-container-row {
text-align: center;
margin-top: 5rem;
}
/*
--------------------------------------------------------------------------------
RESOURCE DETAIL PAGE - NEW DESIGN
--------------------------------------------------------------------------------
*/
/* Hero */
.section-resource-hero {
background: var(--Colors-Background-bg-brand-primary, #E8F4FF);
padding: var(--spacing-5xl) 0;
}
.section-resource-hero .resource-hero-row {
align-items: center;
}
.resource-hero-category {
border-radius: var(--radius-full);
border: 1px solid rgba(0, 96, 255, 0.20);
background: #EDF4FF;
width: fit-content;
padding: 2px 10px;
color: #0060FF;
text-align: center;
font-size: .875rem;
font-weight: 500;
line-height: 1.25rem;
margin-bottom: var(--spacing-md);
}
.resource-hero-description {
color: var(--colors-text-text-secondary-700, #414651);
font-size: var(--Font-size-text-lg, 18px);
font-weight: 500;
line-height: var(--Line-height-text-lg, 28px);
}
.resource-hero-description h1 {
color: var(--colors-text-text-primary-900, #181D27);
font-size: var(--Font-size-display-md, 36px);
font-weight: 700;
line-height: var(--Line-height-display-md, 44px);
letter-spacing: -0.72px;
margin-bottom: var(--spacing-md);
}
.resource-hero-image {
max-width: 435px;
margin: var(--spacing-5xl) 0 !important;
}
.resource-hero-language strong {
border-radius: var(--radius-sm, 6px);
border: 1px solid var(--Component-colors-Utility-Gray-utility-gray-200, #E9EAEB);
background: var(--Component-colors-Utility-Gray-utility-gray-50, #FAFAFA);
color: var(--Component-colors-Utility-Gray-utility-gray-700, #414651);
text-align: center;
font-size: var(--Font-size-text-sm, 14px);
font-weight: 600;
line-height: var(--Line-height-text-sm, 20px);
padding: 2px 8px;
}
.resource-hero-form > .wpb_wrapper {
border-radius: 35px;
background: var(--Colors-Background-bg-primary, #FFF);
box-shadow: 0 380px 106px 0 rgba(82, 83, 117, 0.00), 0 243px 97px 0 rgba(82, 83, 117, 0.01), 0 137px 82px 0 rgba(82, 83, 117, 0.05), 0 61px 61px 0 rgba(82, 83, 117, 0.09), 0 15px 33px 0 rgba(82, 83, 117, 0.10);
padding: var(--spacing-6xl, 48px) var(--spacing-5xl, 40px);
width: fit-content;
margin-left: auto;
}
.resource-hero-form .resource-form-title {
color: var(--colors-text-text-primary-900, #181D27);
/* Display xs/Bold */
font-size: var(--Font-size-display-xs, 24px);
font-weight: 700;
line-height: var(--Line-height-display-xs, 32px); /* 133.333% */
margin-bottom: var(--spacing-5xl);
}
/* Features */
.section-resource-features {
background: #FAFAFA;
}
.resource-features-row + .resource-features-row {
margin-top: 2.5rem;
}
.resource-features-row h2 {
color: var(--colors-text-text-primary-900, #181D27);
/* Display sm/Semibold */
font-size: var(--Font-size-display-sm, 30px);
font-weight: 600;
line-height: var(--Line-height-display-sm, 38px); /* 126.667% */
}
.resource-features-row .title {
margin-bottom: 2.5rem;
}
.resource-features-row .subheading {
margin-bottom: .75rem;
}
.resource-features-header {
color: var(--colors-text-text-tertiary-600, #535862);
/* Text xl/Regular */
font-size: var(--Font-size-text-xl, 20px);
font-weight: 400;
line-height: var(--Line-height-text-xl, 30px); /* 150% */
margin-bottom: 2rem !important;
}
.resource-features-header strong {
color: var(--colors-text-brand-tertiary-600);
/* Text xl/Bold */
font-size: var(--Font-size-text-xl, 20px);
font-weight: 700;
line-height: var(--Line-height-text-xl, 30px);
}
.resource-features-header h2 {
color: var(--colors-text-text-primary-900, #181D27);
/* Display sm/Semibold */
font-size: var(--Font-size-display-sm, 30px);
font-weight: 600;
line-height: var(--Line-height-display-sm, 38px); /* 126.667% */
margin-bottom: 1.25rem;
}
.resource-feature-item {
border-radius: 28.354px;
border: 1.772px solid #FFF;
background: var(--Colors-Background-bg-primary, #FFF);
backdrop-filter: blur(10.632911682128906px);
padding: var(--spacing-4xl, 32px);
color: var(--colors-text-text-tertiary-600, #535862);
/* Text lg/Medium */
font-size: var(--Font-size-text-lg, 18px);
font-weight: 500;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
.resource-feature-item.center {
text-align: center;
}
.resource-feature-item + .resource-feature-item {
margin-top: var(--spacing-3xl);
}
.resource-feature-item h3.feature-title {
color: var(--colors-text-text-primary-900, #181D27);
/* Text xl/Semibold */
font-size: var(--Font-size-text-xl, 20px);
font-weight: 600;
line-height: var(--Line-height-text-xl, 30px); /* 150% */
margin-bottom: 0;
}
.resource-feature-item.feature-item .feature-image {
margin-bottom: var(--spacing-md);
}
/* Logos */
.section-resource-logos {
padding: var(--spacing-7xl) 0 var(--spacing-5xl) 0;
background: #fff;
}
.section-resource-logos .features-logos {
padding: 0 0 var(--spacing-5xl) 0;
background-color: #fff;
}
/* Review */
.section-resource-review {
background-color: #FAFAFA;
}
.resource-review-row {
--row-gap-x: 0;
--row-gap-y: 0;
border-radius: var(--radius-4xl, 24px);
background: var(--Colors-Background-bg-primary, #FFF);
overflow: hidden;
align-items: center;
}
.resource-review-caption {
padding: var(--spacing-7xl);
color: var(--colors-text-text-tertiary-600, #535862);
/* Text md/Regular */
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px); /* 150% */
}
.resource-review-caption h2 {
font-weight: 600;
}
/* CTA */
.section-resource-cta {
background: url(../images/resource-cta-bg.svg) no-repeat 0 100%;
background-color: #0E132E;
background-size: cover;
}
.section-resource-cta .section-header {
margin-bottom: 0;
}
.section-resource-cta .subheading {
color: #B3D5FF;
text-align: center;
/* Display xs/Semibold */
font-size: var(--Font-size-display-xs, 24px);
font-weight: 600;
line-height: var(--Line-height-display-xs, 32px); /* 133.333% */
}
.section-resource-cta h2 {
color: var(--Colors-Base-white, #FFF);
text-align: center;
/* Display lg/Semibold */
font-size: var(--Font-size-display-lg, 48px);
font-weight: 600;
line-height: var(--Line-height-display-lg, 60px); /* 125% */
letter-spacing: -0.96px;
margin-bottom: var(--spacing-4xl);
}
/*
--------------------------------------------------------------------------------
RESOURCE THANKYOU PAGE
--------------------------------------------------------------------------------
*/
.thanks-resource-content {
align-items: center;
}
.thanks-resource-content .thanks-caption {
max-width: 480px;
font-size: 23px;
font-weight: 400;
line-height: 37px;
}
.thanks-resource-content .thanks-caption p:not(:last-child) {
margin-bottom: 28px;
}
.thanks-resource-content .thanks-caption a {
color: #00B1FF;
}
.thanks-resource-content .thanks-image {
max-width: 344px;
display: block;
margin-left: auto;
}
/*
--------------------------------------------------------------------------------
KNOWLEDGE: ARTICLE PAGE
--------------------------------------------------------------------------------
*/
.knowledge_article.post-article .blog-title {
margin-bottom: 0;
}
.knowledge_article.post-article .post-image {
margin-bottom: 3rem;
}
/*
--------------------------------------------------------------------------------
PARTNERS - ASESORÍA
--------------------------------------------------------------------------------
*/
/* Video */
.woffu-video {
max-width: 690px;
margin: 0 auto;
position: relative;
}
.woffu-video .description {
position: absolute;
left: 60px;
bottom: 25px;
color: #FFFFFF;
font-style: italic;
font-weight: 500;
font-size: 21px;
line-height: 25px;
}
.woffu-video .btn-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100px;
height: 72px;
background: url(../images/icon-play.svg) no-repeat 0 0;
background-size: contain;
}
.woffu-video .btn-play-new {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
padding: var(--spacing-md, 8px) var(--spacing-lg, 12px);
justify-content: center;
align-items: center;
gap: var(--spacing-md);
border-radius: var(--radius-full, 9999px);
border: 2px solid var(--Gradient-skeuemorphic-gradient-border, rgba(255, 255, 255, 0.12));
background: var(--colors-bg-brand-solid);
/* Shadows/shadow-xs-skeuomorphic */
box-shadow: 0 0 0 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(10, 13, 18, 0.18)) inset, 0 -2px 0 0 var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05)) inset, 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05));
color: var(--Colors-Text-text-white, #FFF);
/* Text sm/Semibold */
font-size: var(--Font-size-text-sm, 14px);
font-weight: 600;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}
.woffu-video .btn-play-new:hover {
background: var(--colors-bg-brand-solid-hover);
text-decoration: none;
}
/* Lightbox */
.lightbox-carousel .ratio {
position: relative;
width: 100%;
}
.lightbox-carousel .ratio>* {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.lightbox-carousel .ratio-16x9 {
--bs-aspect-ratio: calc(9 / 16 * 100%);
}
.lightbox-carousel .ratio::before {
display: block;
padding-top: var(--bs-aspect-ratio);
content: "";
}
.lightbox .btn-close {
box-sizing: content-box;
width: 1em;
height: 1em;
padding: .25em .25em;
color: #000;
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
border: 0;
border-radius: .25rem;
opacity: .5;
}
.lightbox .btn-close:hover {
color: #000;
text-decoration: none;
opacity: .75;
}
/*
--------------------------------------------------------------------------------
RRHH INTEGRACION ERP
--------------------------------------------------------------------------------
*/
/* Generales */
.btn-secondary-dark {
color: #F7F7F7;
display: inline-block;
font-weight: 500;
line-height: 42px;
text-transform: uppercase;
border-radius: 21px;
font-size: 0.9375rem;
line-height: 1.2;
letter-spacing: 1px;
padding: 12px 32px;
min-width: 271px;
background: #052B53;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}
.btn-secondary-dark:hover {
color: #F7F7F7;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
opacity: 1;
}
/*
--------------------------------------------------------------------------------
FOOTER
--------------------------------------------------------------------------------
*/
#footer {
background-color: var(--Colors-Background-bg-primary, #0C0E12);
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
color: var(--colors-text-primary-700);
font-size: var(--Font-size-text-md, 16px);
font-weight: 400;
line-height: var(--Line-height-text-md, 24px); /* 150% */
padding: var(--spacing-11xl) 0 var(--spacing-6xl) 0;
}
body:has(.home-demo-block) #footer {
padding-top: 18.75rem;
}
#footer a,
#footer .h6 {
color: var(--colors-text-primary-700);
}
/* TOP -----------------------------------------------------------------------*/
#footer .top {
padding: var(--spacing-7xl) 0;
}
#footer .row-top {
--row-gap-x: var(--spacing-4xl);
}
#footer .about-block {
display: flex;
flex-direction: column;
gap: var(--spacing-3xl);
}
#footer .about-text {
max-width: 20rem;
}
#footer .navbar-brand {
line-height: 1;
margin: 0;
padding: 0;
max-width: 6.0625rem;
}
#footer .apk-links {
display: flex;
flex-direction: row;
gap: var(--spacing-lg);
flex-wrap: wrap;
}
#footer .apk-links .logo-app-store {
max-width: 120px;
}
#footer .apk-links .logo-google-play {
max-width: 130px;
}
#footer .apk-links svg {
max-width: 100%;
}
#footer .social-links {
display: flex;
flex-direction: row;
align-items: center;
gap: 1.5rem;
}
#footer .h6 {
font-size: var(--Font-size-text-sm);
font-weight: 600;
line-height: var(--Line-height-text-sm);
margin-bottom: 1rem;
}
#footer .widgets-block {
display: flex;
justify-content: space-between;
align-items: flex-start;
--row-gap-x: var(--spacing-xl);
}
#footer .widgets-block > div {
display: flex;
min-width: 96px;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xl, 16px);
}
#footer .top .menu {
list-style: none outside none;
padding-left: 0;
}
#footer .top .menu-item {
margin-bottom: .75rem;
}
#footer .top .menu-item a {
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
}
/* BOTTOM --------------------------------------------------------------------*/
#footer .bottom {
border-top: 1px solid var(--Colors-Border-border-secondary, #22262F);
padding-top: var(--spacing-4xl);
}
#footer .row-bottom {
align-items: center;
}
/* Copyright */
#footer .copyright ul {
list-style: none outside none;
margin-bottom: .5rem;
padding: 0;
}
#footer .copyright ul li {
display: inline-block;
margin: 0;
padding: 0;
}
#footer .copyright a {
font-size: var(--Font-size-text-xs);
line-height: 1.5;
display: inline-block;
}
/* Logos */
#footer .legal-images {
display: flex;
justify-content: right;
align-items: center;
gap: .0625rem;
}
#footer .legal-images > a:last-child {
margin-left: .1875rem;
}
#footer .legal-images img {
max-width: 80px !important;
}
#footer .legal-images img.logo-huella-carbono {
max-width: 50px !important;
}
/*
********************************************************************************
WP THEME
********************************************************************************
*/
/*.admin-bar #header.affix {
top: 30px;
}*/
/* Columnas de bootstrap en WPBakery Frontpage Editor */
div[class*="vc_col-"]>div[class*="col-"] {
max-width: 100%;
}
/* Reglas que hacen compatible el tema con WPBakery Page Editor */
/* .vc_column-inner .row {
margin-left: 0;
margin-right: 0;
}
.vc_column-inner .row div[class*="col-"] {
padding-left: 0;
padding-right: 0;
} */
.wpb_content_element {
margin-bottom: 0;
/* margin-bottom: 0 !important; */
}
.vc_editor #header {
z-index: 1;
}
/* Functionalities */
#main>section.function-timeoff:nth-child(2n+1) .row.vc_inner>div:nth-child(2) {
-ms-flex-order: -1;
order: -1;
}
#main>section.function-timeoff:nth-child(2n+1) .row.vc_inner>div:nth-child(2) .img {
text-align: left;
}
/* Idiomas */
#footer .wpml-ls-legacy-list-vertical a {
padding: 0;
line-height: 28px;
border-bottom: none;
}
#footer .wpml-ls-legacy-list-vertical a span {
vertical-align: initial;
}
/* Image lazyloaded */
img[data-lazyloaded] {
opacity: 0;
}
img.litespeed-loaded {
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
transition: opacity .5s linear 0.2s;
opacity: 1;
}
/* Form default */
form.wpcf7-form {
background: white;
max-width: 395px;
margin: 0 auto;
margin-bottom: 0px;
padding: 24px 28px;
border: 1px solid #00000014;
border-radius: 18px;
}
.wpcf7-form label {
display: grid;
margin-bottom: 0.5rem;
width: 100%
}
.wpcf7-submit {
margin-top: 20px;
width: 100%;
background: #015fff;
color: white;
border: none;
padding: 14px;
border: none !important;
border-radius: 100px;
margin-bottom: 0;
}
.wpcf7-form-control {
border: 1px solid #d7dde4;
width: 100%;
}
input.wpcf7-form-control.wpcf7-number.wpcf7-validates-as-required.wpcf7-validates-as-number {
width: 100%;
height: 40px;
}
input.wpcf7-form-control.wpcf7-text.wpcf7-tel.wpcf7-validates-as-tel {
height: 40px;
width: 100%;
}
/* Hide edit links in English language */
html[lang="en-US"] #wp-admin-bar-edit,
html[lang="en-US"] #wp-admin-bar-vc_inline-admin-bar-link {
display: none;
}
/*
********************************************************************************
MD AND LG
********************************************************************************
*/
@media (min-width: 992px) {
/* Mega menu */
#header nav .container {
position: relative;
}
#mega-menu-wrap-top_nav,
#mega-menu-wrap-top_nav #mega-menu-top_nav {
position: initial;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item {
position: inherit;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-megamenu > ul.mega-sub-menu {
max-width: calc(100% - var(--container-padding-desktop) * 2);
left: var(--container-padding-desktop);
top: calc(100% + 10px);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.why-woffu > ul.mega-sub-menu {
max-width: calc(100% - 2rem);
}
#mega-menu-wrap-top_nav #mega-menu-top_nav li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.col-sector {
width: 40%;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.col-page {
width: 30%;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.sectores > ul.mega-sub-menu {
column-count: 2;
column-gap: 0;
/* column-width: 192px; */
max-width: max-content;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.conoce-woffu {
position: relative;
}
#mega-menu-wrap-top_nav #mega-menu-top_nav > li.mega-menu-item.conoce-woffu > .mega-sub-menu {
width: 350px;
max-width: 350px;
padding: 0;
overflow: hidden;
left: 10px;
}
}
/*
********************************************************************************
DESKTOP MEDIUM
********************************************************************************
*/
@media (min-width: 992px) and (max-width: 1199px) {
#header nav .btn-outline-primary {
margin-left: 60px;
margin-right: 0;
}
}
/*
********************************************************************************
PAGINAS LEGALES
********************************************************************************
*/
.legal-page td {
border: 1px solid #cecece;
padding: 10px;
}
/* Cookies page */
#cookies-page .CookieDeclarationType {
border: 0px;
padding: 0px;
}
#cookies-page .CookieDeclarationTableHeader,
#cookies-page .CookieDeclarationTableCell {
border-bottom: 1px solid #cecece;
}
/* OneTrust Cookies */
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy #cookie-policy-title,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-sdk-cookie-policy-group,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table th,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy h5,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy h6,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy li,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy p,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy a,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy span,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy td,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy #cookie-policy-description {
color: #617892 !important;
}
#onetrust-consent-sdk #onetrust-banner-sdk *:focus,
#onetrust-consent-sdk #onetrust-banner-sdk:focus {
outline-color: transparent !important;
outline-width: 0 !important;
}
/*
********************************************************************************
Background Video Section
********************************************************************************
*/
.video-background-section {
position: relative;
width: 100%;
max-width: 100%;
height: auto;
/* overflow: hidden; */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: var(--spacing-xl);
}
.video-background-section .video-background-media,
.video-background-section .video-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.video-background-section .video-background-media {
z-index: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--spacing-xl);
}
.video-background-section .video-overlay {
z-index: 1;
pointer-events: none;
}
.video-background-section .video-content {
/* position: relative; */
z-index: 2;
width: 100%;
}
@media (max-width: 767px) {
.video-background-section .video-background-media {
display: none;
}
}
/*
********************************************************************************
Woffu Tabs Image Section
********************************************************************************
*/
.woffu-tabs-image-content {
position: relative;
margin-bottom: 42px;
}
.woffu-tabs-image-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.woffu-tabs-image-panel.is-active {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
.woffu-tabs-image-trigger {
cursor: pointer;
}
.woffu-tabs-image-trigger img {
display: none;
}
@media (max-width: 767px) {
.woffu-tabs-image-content {
display: none;
}
.woffu-tabs-image-trigger {
cursor: auto;
}
.woffu-tabs-image-trigger img {
display: block;
}
}
/* Resource fixed form */
.resource-template-resource-landing #descargar-guia {
position: relative;
}
.resource-template-resource-landing .resource-hero-form {
box-sizing: border-box;
}
.resource-template-resource-landing .resource-hero-form > .wpb_wrapper.is-fixed {
position: fixed;
z-index: 20;
margin-top: 0;
}
@media (max-width: 767px) {
.resource-template-resource-landing .resource-hero-form > .wpb_wrapper.is-fixed {
position: static;
width: auto;
}
}
/* Admin bar */
#wpadminbar #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
#wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
max-width: 25px !important;
}
/*
--------------------------------------------------------------------------------
KNOWLEDGE: PILLAR PAGE (TOPIC PAGE)
--------------------------------------------------------------------------------
*/
/* Topic Hero */
.section-topic-hero {
background-color: #fff;
}
.topic-hero-header .subheading {
background-color: #fff;
padding: .1875rem .625rem;
}
/* Internal menu list */
.internal-menu-list {
border-radius: var(--radius-full, 9999px);
/* background-color: #e8f4ff;
border-radius: 0.5rem 0.5rem 0 0; */
}
.internal-menu-list ul {
display: flex;
margin: 0;
list-style: none;
justify-content: space-between;
border-radius: var(--radius-full, 9999px);
border: 1px solid var(--Colors-Border-border-secondary, #E9EAEB);
background: var(--colors-bg-secondary);
backdrop-filter: blur(4px);
padding: var(--spacing-xs, 4px);
/* padding: 0; */
/* border-bottom: 2px solid #b3d5ff; */
}
.internal-menu-list ul li {
/* flex: 1 1 0; */
margin: 0;
padding: 0;
text-align: center;
}
.internal-menu-list ul li a {
display: block;
text-decoration: none;
color: var(--colors-text-primary-900);
font-size: var(--Font-size-text-sm);
font-weight: 600;
line-height: var(--Line-height-text-sm);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-full);
/* padding: 10px 16px 9px;
color: #252525;
line-height: 20px;
border-bottom: 2px solid #b3d5ff;
margin-bottom: -1px !important; */
}
.internal-menu-list ul li a:hover,
.internal-menu-list ul li a:focus,
.internal-menu-list ul li a.active {
background-color: var(--colors-bg-primary);
box-shadow: 0 1px 3px 0 var(--Colors-Effects-Shadows-shadow-sm_01, rgba(10, 13, 18, 0.10)), 0 1px 2px -1px var(--Colors-Effects-Shadows-shadow-sm_02, rgba(10, 13, 18, 0.10));
/* color: #001eff;
border-bottom: 2px solid #001eff; */
}
/* .internal-menu-list ul li a.active {
color: #0d2eff;
border-bottom-color: #3060ff;
} */
/* Summary */
.summary-text {
font-size: var(--Font-size-text-md);
font-weight: 400;
line-height: var(--Line-height-text-md);
}
.summary-text p {
border-top: 1px solid #e3e5e8;
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 0;
}
.summary-text p:last-child {
border-bottom: 1px solid #e3e5e8;
}
.summary-text strong {
color: var(--colors-text-primary-900);
}
/* Feature cards */
.topic-feature-card {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background-color: #fafafa;
border: 1px solid var(--Colors-Border-border-secondary, #e9eaeb);
border-radius: var(--radius-2xl, 16px);
box-shadow: 0 1px 2px rgba(10, 13, 18, .05);
}
.topic-feature-card .feature-image {
flex: 0 0 auto;
margin: 0;
line-height: 0;
}
.topic-feature-card .feature-image img {
display: block;
width: 100%;
height: auto;
}
.topic-feature-card .feature-title,
.topic-feature-card .feature-text,
.topic-feature-card .feature-link {
margin-right: 2.5rem;
margin-left: 2.5rem;
}
.topic-feature-card .feature-title {
margin-top: 2.25rem;
margin-bottom: 0;
color: var(--colors-text-primary-900, #181d27);
font-size: var(--Font-size-text-lg, 1.125rem);
font-weight: 700;
line-height: 1.3;
}
.topic-feature-card .feature-text {
margin-top: 1rem;
margin-bottom: 2.5rem;
color: var(--colors-text-tertiary-600, #535862);
font-size: var(--Font-size-text-lg, 1.125rem);
line-height: 1.5;
}
.topic-feature-card .feature-text p {
margin-bottom: 0;
}
.topic-feature-card .feature-link {
align-self: flex-start;
margin-top: auto;
margin-bottom: 2.5rem;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: 100% 50%;
color: var(--colors-text-text-brand-secondary-700, #0120f4);
font-size: var(--Font-size-text-md, 1rem);
font-weight: 600;
line-height: 1.5;
padding: 0 1.75rem 0 0;
transition: padding .3s ease-out;
}
.topic-feature-card .feature-link:hover,
.topic-feature-card .feature-link:focus {
color: var(--colors-text-text-brand-secondary-700, #0120f4);
padding-right: 2rem;
text-decoration: none;
}
@media (max-width: 767px) {
.topic-feature-card {
height: auto;
}
.topic-feature-card .feature-title,
.topic-feature-card .feature-text,
.topic-feature-card .feature-link {
margin-right: 1.5rem;
margin-left: 1.5rem;
}
.topic-feature-card .feature-text {
margin-bottom: 1.5rem;
}
.topic-feature-card .feature-title {
margin-top: 1.5rem;
}
.topic-feature-card .feature-link {
margin-bottom: 1.5rem;
}
}
/* Topic info */
.topic-info-row {
position: relative;
margin-right: 0;
margin-left: 0;
padding: var(--spacing-4xl) 0 0 var(--spacing-7xl);
overflow: hidden;
align-items: center;
background-color: #f1f5ff;
border-radius: var(--radius-4xl, 1.5rem);
--row-gap-x: 0;
}
.topic-info-row::before {
position: absolute;
z-index: 0;
top: 0;
right: 16%;
width: 52%;
height: 58%;
background-image: url("data:image/svg+xml,");
background-repeat: repeat;
content: "";
opacity: .55;
pointer-events: none;
}
.topic-info-row > :first-child {
position: relative;
z-index: 2;
}
.topic-info-row .section-header {
max-width: 30rem;
margin-bottom: 0;
}
.topic-info-row .subheading {
color: var(--colors-text-brand-secondary, #0d2eff);
font-size: var(--Font-size-text-xl, 1.25rem);
font-weight: 600;
line-height: var(--Line-height-text-xl, 1.5);
}
.topic-info-row .description h2 {
color: var(--colors-text-primary-900, #181d27);
font-size: var(--Font-size-display-md, 2.25rem);
font-weight: 700;
line-height: var(--Line-height-display-md, 1.22222);
letter-spacing: -.045rem;
}
.topic-info-row .description p {
color: var(--colors-text-tertiary-600, #535862);
font-size: var(--Font-size-text-xl, 1.25rem);
line-height: var(--Line-height-text-xl, 1.5);
}
.topic-info-row .row-actions {
margin-bottom: 0;
}
.topic-info-row .actions-container .btn {
border-radius: var(--radius-full, 9999px);
white-space: nowrap;
}
@media (max-width: 991px) {
.topic-info-row > :first-child,
.topic-info-row > :last-child {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
}
.topic-info-row .section-header {
max-width: 38rem;
}
}
@media (max-width: 767px) {
.topic-info-row {
padding: var(--spacing-5xl) var(--spacing-3xl);
border-radius: var(--radius-3xl, 1.25rem);
}
.topic-info-row::before {
right: -10%;
width: 90%;
height: 45%;
}
.topic-info-row .subheading {
font-size: var(--Font-size-text-lg, 1.125rem);
}
.topic-info-row .description h2 {
font-size: var(--Font-size-display-sm, 1.875rem);
letter-spacing: normal;
}
.topic-info-row .description p {
font-size: var(--Font-size-text-lg, 1.125rem);
}
.topic-info-row .actions-container .btn {
width: 100%;
text-align: center;
}
.topic-info-row > :last-child img {
width: 145%;
margin-top: var(--spacing-5xl);
margin-right: calc(var(--spacing-3xl) * -1);
margin-bottom: calc(var(--spacing-5xl) * -1);
}
}