@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDarker: #1e282d;
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: #3a3a3a;
    --borderMedium: rgba(38, 50, 56, 1); 
    --borderLight: rgba(38, 50, 56, 0.3);
    --accent: #f3353e;
    --accentDarker: rgb(49, 55, 74);
    --accentHover: #fd5c5c;
    --accentDarkerHover: rgb(84, 90, 110);
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map:not(section)::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: contrast(0.11) sepia(1) hue-rotate(340deg) contrast(13)!important;}


/*------------------------ CSS overrides below ------------------------*/

html {line-height: 1.5;}

.text-gradient-light {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(93deg,#d50711, #fd5c5c);
    background-clip: text;
}

.text-gradient-dark {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(93deg,#6368a0,#0b89bb);
    background-clip: text;
}

.button, button {
    font-weight: 400;
    border-radius: 0.3rem;
    transition: all .3s;
    font-size: 0.9rem;
}
 
h1, h2 {letter-spacing: -.03em;font-weight: 600;}

h3 {font-size: 1.7rem; padding-bottom: 1.5rem; font-weight: 300;}

ul.tabs li a {
    font-weight: 600;
    letter-spacing: -.03em;
}

/*------------------------*/
/* Páginas de condiciones legales
/*------------------------*/

.wide { font-size: 0.90rem;}
.wide h2 { font-size: 2.0rem;}
.wide h3 { font-size: 1.5rem;}
.wide ul li {
    font-size: 1.15rem;
}
.wide p {
    margin-bottom: 1.0em;
}
.wide strong {font-weight: 600;}
/*------------------------*/

footer ul li {
    font-size: 0.8rem;
    line-height: 1.0rem;
}

.button.secondary {background: var(--accentDarker);}
.button.smaller,.button.smaller2 {
    background: white; 
    color: var(--textMedium);
    border: 1.2px solid var(--borderLight);
}
@media (min-width: 600px) {
    .button:hover {
        transform: scale(1.0);
        background: var(--accentHover);
        }
    .button.secondary:hover {
        transform: scale(1.0);
        background: var(--accentDarkerHover);
        }
    .button.smaller:hover,.button.smaller2:hover {
        transform: scale(1.0);
        background: white;
        border: 1.2px solid var(--borderMedium);
        }
    }
    
p {
    font-size: 1.25em;
    line-height: 1.3;
}

section .container.small {max-width: 60rem;}

.tabs_container .twocols {
    margin-bottom: 0rem;
    padding: 0;
}

.tabs_container p {
    margin-bottom: 1.0em;
}

.image p {
    margin-bottom: 1.2em;
}

section.image {
    padding: 0.5rem 0 5rem;
}

ul.reviews li div.box .customers {display: flex; gap: 0.25rem; margin: 0 0 1.5rem;}
ul.reviews li div.box .customers img {height: 3rem;}

section.cta .twocols {padding: 2.5rem clamp(2rem, 5vw, 5rem)}

.big_font_size {
    font-size: 5em;
    line-height: 0.1em;
}

.eev-menu-icon {
    height: 16px !important; vertical-align:middle; display: inline;
}

body.mobilemenu.menushown header .navnav > ul > li > ul > li > a > img.eev-menu-icon {
    filter: invert(2);
}

section.intro img {width: 100%;}


.eevid-footer-grid {
    flex-shrink: 0 !important;
    flex-grow: 1 !important;
    display: grid !important;
    grid-template-columns: 200px 200px 200px;
    gap: 10px;
    align-items: start !important;
    gap: 5px;
    padding-bottom: 0px;
}

@media only screen and (max-width: 600px) {
    .eevid-footer-grid {
        grid-template-columns: 115px 115px 115px;
    }
}

.eevid-success-avatar * img {
    max-width: 300px;
}

.legal-list li {
    font-size: 1.25em;
    padding-bottom: 1em;
}

/*------------------------*/
/* Pàgines de Clients
/*------------------------*/

section.posts img {
    height: 30px;           /* Puedes ajustar la altura según tu diseño */
    display: flex;
    align-items: center;     /* Centra verticalmente la imagen si es más pequeña */
    justify-content: center; /* Centra horizontalmente la imagen */
    overflow: hidden;        /* Oculta el exceso de imagen si es muy grande */
}

/* Asegura que la imagen ocupe todo el espacio del contenedor */
section.posts img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;       /* Recorta la imagen para llenar el contenedor */
    display: block;
}

section.posts .grid .item .img {
    border-radius: 1rem;
    margin-bottom: 1.251rem;
    overflow: visible;
}

section.posts .filter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin: -2rem 0 3.25rem;
}

section.post .container {
    max-width: 70rem;
    text-align: left;
}

section.post img {
    max-width: 33%;
    max-height: 100%;
    object-fit: cover;       /* Recorta la imagen para llenar el contenedor */
    display: block;
    border-radius: 0rem;
    margin: -2rem 0 3.25rem;    
}

@media (max-width: 800px) {
    section.post img {
        max-width: 50%;
    }
}

@media (max-width: 480px) {
    section.post img {
        max-width: 80%;
    }
}

section.post .container h1, section.post .container h2 {
    font-size: 2.6rem;
    letter-spacing: -.03em;
    font-weight: 600;
    text-align: left;
    margin-bottom: 1.5rem;
}

/*------------------------*/
/* Páginas de clientes
/*------------------------*/


.twocols-styled ul {
    list-style: none; /* quitamos el bullet predeterminado */
    padding-left: 0;   /* opcional, según diseño */
}
  
.twocols-styled ul li {
    font-size: 1.15rem;
    position: relative;
    padding-left: 0.8rem; /* espacio para el icono */
    padding-bottom: 0.8rem;
}
  
.twocols-styled ul li::before {
    content: '✓'; /* Aquí puedes usar otro carácter o un icono */
    position: absolute;
    left: -0.8rem;
    top: 0.1rem;
    color: #007BFF; /* color del icono */
    font-size: 1.2rem;
  }

.x-testimonial-container {
    overflow: hidden;
}

.x-testimonial {
    margin-bottom: 16px;
    background-color: rgba(243, 243, 246, 1);
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    position: relative;
    transition: transform 0.3s ease;
}

.x-testimonial:last-child {
    margin-bottom: 0;
}

.x-testimonial-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.x-testimonial-header-content {
    display: flex;
    align-items: center;
    flex: 1;
}

.x-testimonial-avatar {
    display: inherit !important;
    width: 72px;
    height: 72px;
    border-radius: 50% !important;
    object-fit: cover;
    margin: 0 16px 0 0 !important;
    border: 2px solid #e2e8f0;
    transition: transform 0.3s ease;
}

.x-testimonial-meta {
    flex: 1;
}

.x-testimonial-name {
    font-weight: 600;
    font-size: 16px;
    margin-top: 8px;
    margin-bottom: 2px;
    color: #2d3748;
}

.x-testimonial-position {
    font-size: 13px;
    color: #718096;
    display: flex;
    align-items: center;
}

.x-testimonial-company {
    margin-left: 5px;
    font-weight: 500;
    color: #4a5568;
}

.x-testimonial-summary {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.5;
    font-style: italic;
}

@media (max-width: 480px) {
    .x-testimonial-avatar {
        display: none !important;
}