/*
Theme Name: Ceccato Child
Theme URI: https://mundoceccato.cl/
Description: Child theme de Hello Elementor para personalizaciones de Mi Cuenta.
Author: Mundo Ceccato
Template: hello-elementor
Version: 1.0.0
Text Domain: ceccato-child
*/

/* ==========================================
   REGISTRO DE FUENTES (Fonts)
   ========================================== */
@font-face {
    font-family: 'SF Pro Display';
    src: url('assets/fonts/sf-pro-display-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('assets/fonts/sf-pro-display-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('assets/fonts/sf-pro-display-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   VARIABLES GLOBALES
   ========================================== */
:root {
    /* Fuentes */
    --fuente-principal: 'SF Pro Display', sans-serif;
    --w-regular: 400;
    --w-medium: 500;
    --w-bold: 700;
    
    /* Colores */
    --primario: #0A507D;
    --segundario: #146694; 
    --blanco: #fff;
    --gris: #474747;
    --celeste: #0F9BD8;
    --blanco-gris: #E0DFDF;
    --azul-oscuro: #022135;
    --gris-claro: #D9D9D9;
    --negro-claro: #5C5C5C;
    --blanco-celeste: #F6FBFE;
    --alerta: #BA225B;
    --celeste-claro: #54C2E8;
}

/* ==========================================
   ESTILOS GLOBALES
   ========================================== */
body, a {
    font-family: var(--fuente-principal)!important;
}

h1, h2, h3, h4, strong, b {
    font-family: var(--fuente-principal);
    margin: 0;
}

/* ==========================================
   HEADER
   ========================================== */
header ul.sub-menu {
    padding: 10px!important;
}

.elementor-nav-menu .sub-arrow {
    display: none;
    width: 0!important;
}

a.elementor-sub-item {
    border: none!important;
}

.has-submenu {
    cursor: pointer;
}

.menu-item-has-children .elementor-item::after {
    background-color: transparent!important;
    content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%229%22 height=%225%22 viewBox=%220 0 9 5%22%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M4.46337 4.64019C4.31692 4.78664 4.07952 4.78664 3.93307 4.64019L0.109834 0.816937C-0.0366113 0.670487 -0.0366113 0.433087 0.109834 0.286637L0.286614 0.109838C0.433059 -0.0366125 0.670494 -0.0366125 0.816944 0.109838L4.19822 3.49114L7.57952 0.109838C7.72597 -0.0366125 7.96337 -0.0366125 8.10982 0.109838L8.28662 0.286637C8.43307 0.433087 8.43307 0.670487 8.28662 0.816937L4.46337 4.64019Z%22/%3E%3C/svg%3E");
    opacity: 1!important;
    padding-left: 5px;
    position: relative;
}

/* Mi cuenta */
.usuario a {
    text-decoration: none!important;
    text-transform: none!important;
    font-weight: 400;
}

.header-avatar {
    border: 1px solid var(--primario)!important;
    border-radius: 50%!important;
    display: inline-block;
    height: 38px!important;
    object-fit: cover;
    transition: all .4s;
    width: 38px;
}

.header-avatar:hover {
    opacity: 0.5;
}

/* ==========================================
   ICONO
   ========================================== */
.elementor-icon-wrapper {
    display: flex;
}

/* ==========================================
   BOTONES
   ========================================== */
.btn-efecto a, form button.elementor-button, a.btn-efecto, button.btn-efecto, button.single_add_to_cart_button {
    display: inline-block;
    padding: 10px 20px;
    position: relative;
    overflow: hidden!important;
    transition: color 0.4s ease;
    text-decoration: none;
    z-index: 0;
}

.btn-efecto a:before, form button.elementor-button:before, a.btn-efecto:before, button.btn-efecto:before, button.single_add_to_cart_button:before {
    background-color: var(--celeste);
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    position: absolute;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    z-index: -1;
}

.btn-efecto a:hover:before, .btn-efecto a:focus:before, form button.elementor-button:hover:before, a.btn-efecto:hover:before, button.btn-efecto:hover:before,
button.single_add_to_cart_button:hover:before {
    transform: translateX(0);
}

.full a {
    width: 100%;
}

button.single_add_to_cart_button {
    border-radius: 50px !important;
    background-color: var(--primario) !important;
}

/* Botón - Flecha */
span.elementor-button-icon {
    transition: all .4s;
}

span.elementor-button-content-wrapper:hover span.elementor-button-icon {
    padding-left: 5px!important;
}

/* ==========================================
   SLIDER
   ========================================== */
.carrusel-hero .e-n-carousel.swiper {
   padding-bottom: 0!important;
}

.carrusel-hero .swiper-pagination {
    height: 50px!important;
}

.carrusel-hero span.swiper-pagination-bullet {
    border-radius: 20px;
    height: 4px!important;
}

.carrusel-hero .elementor-swiper-button {
    opacity: 0.6;
    transition: all .4s;
}

.carrusel-hero .elementor-swiper-button:hover {
    opacity: 1;
}

.relative > .e-con-inner {
    position: relative;
}

/* ==========================================
   CARRUSEL - CARD HOME + SOLUCIONES
   ========================================== */
.card-home-item {
    border-radius: 10px!important;
    box-shadow: 0 0 8px 1.5px rgba(116, 129, 137, 0.32)!important;
    display: flex!important;
    flex-direction: column!important;
    height: 420px!important;
    margin: 0 !important;
    overflow: hidden!important;
    width: 100%!important;
}

.my-acf-swiper .swiper-slide:hover .loop-oculto {
    opacity: 1;
    overflow: visible;
    transform: translateY(0);
    margin-top: 5px;
}

.card-image img {
    height: 300px!important;
    object-fit: contain;
    transition: all .4s;
    width: 100% !important;
}

.my-acf-swiper .swiper-slide:hover img {
    height: 220px!important;
}

span.card-tag {
    font-size: var(--e-global-typography-7d368f5-font-size)!important;
}

h3.card-title {
    color: var(--gris)!important;
    font-size: var( --e-global-typography-ba4bbcd-font-size )!important;
    font-weight: 500!important;
    padding: 5px 0 0!important;
}

p.card-text {
    color: var(--gris);
    font-size: var(--e-global-typography-7d368f5-font-size);
    line-height: 1.2em;
    padding-bottom: 10px;
}

a.card-button {
    align-items: center;
    border: 1px solid var(--primario)!important;
    border-radius: 50px!important;
    color: var(--primario)!important;
    cursor: pointer!important;
    display: flex;
    font-size: var(--e-global-typography-7d368f5-font-size)!important;
    font-weight: 400!important;
    gap: 5px;
    overflow: hidden;
    padding: 16px 12px!important;
    position: relative;
    transition: color 0.4s ease;
    text-transform: none!important;
    z-index: 0;
}

a.card-button:before {
    background-color: var(--celeste);
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    position: absolute;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    z-index: -1;
}

a.card-button svg {
    transition: all .4s;
}

/* Hover botón */
a.card-button:hover {
    border-color: var(--celeste)!important;
    color: var(--blanco)!important;
}

a.card-button:hover:before {
    transform: translateX(0);
}

a.card-button:hover svg {
    margin-left: 5px;
}

a.card-button:hover svg path {
    fill: var(--blanco);
}

/* ==========================================
   SOLUCIONES
   ========================================== */
/* Carrusel */
.solucion .card-home-item {
    height: 470px!important;
}

.solucion .card-image img {
    height: 380px!important;
}

.solucion .my-acf-swiper .swiper-slide:hover img {
    height: 250px!important;
}

/* Post solución */
.categoria-solucion-portales .seccion-solucion > .e-con-inner {
    flex-direction: row-reverse;
}

.descripcion-solucion h2, .descripcion-solucion h3, .descripcion-solucion h4 {
    font-size: var( --e-global-typography-56d0c07-font-size )!important;
    font-weight: 500!important;
}

.descripcion-solucion strong, .descripcion-solucion b {
    font-weight: 500!important;
}

.descripcion-solucion p {
    margin-bottom: 20px;
}

.descripcion-solucion p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   SECCIONES
   ========================================== */
.hidden {
    overflow: hidden;
}

.sombra {
    box-shadow: 0 0 8px 1.5px rgba(116, 129, 137, 0.32);
}

/* ==========================================
   CARD
   ========================================== */
.contenedor-grilla-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px 0;
}

.cards-simples .card-servicio{
    min-height: auto;
}

.card-servicio {
    border: 1px solid var(--blanco-gris);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(25% - 20px);
    min-height: 300px;
    padding: 20px;
    transition: all 0.3s ease;
    max-width: 100%; 
}

.card-servicio:hover {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

.card-icono img {
    height: auto;
    margin-bottom: 20px;
    max-width: 56px;
}

.card-servicio h3 {
    color: var(--primario)!important;
    font-size: var( --e-global-typography-ba4bbcd-font-size );
    margin-bottom: 10px;
}

.card-servicio p {
    color: var(--gris);
    font-size: var(--e-global-typography-7d368f5-font-size);
    line-height: 1.2em;
}

.boton-explorar {
    color: var(--primario)!important;
    display: flex;
    font-size: var(--e-global-typography-7d368f5-font-size)!important;
    font-weight: 400!important;
    gap: 5px;
    margin-top: auto;
    text-transform: none !important;
}

.card-servicio svg {
    transition: all .4s;
}

.card-servicio:hover svg {
    margin-left: 5px;
}

/* Animación */
.card-servicio {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.card-servicio.visible {
    opacity: 1;
}

/* ==========================================
   CARRUSEL - LOGOS
   ========================================== */
.carrusel-continuo .swiper-wrapper {
    overflow: visible!important;
}

/* ==========================================
   LOOP - POSTS - PRODUCTOS
   ========================================== */
.contenedor-carrusel-padre {
    overflow: hidden;
    padding: 0 8% 30px!important;
    position: relative;
}

.carrusel-posts, .my-product-swiper, .my-acf-swiper {
    overflow: visible!important;
    padding-top: 10px;
}

.post-item {
    border-radius: 10px; 
    border: 0.5px solid rgba(224, 223, 223, 0.40);
    box-shadow: 0 0 5.7px 0 rgba(116, 129, 137, 0.30);
    display: flex; 
    flex-direction: column;
    height: 400px!important;
    overflow: hidden;
}

/* Contenido */
.post-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
}

.post-content h3 {
    color: var(--gris);
    font-size: var( --e-global-typography-text-font-size );
    font-weight: 500;
}

.post-content p {
    color: var(--gris);
    font-size: var( --e-global-typography-996197c-font-size );
    line-height: 1.2em;
    padding: 10px 0 20px;
}

/* Botón */
.post-content a {
    align-items: center;
    color: var(--primario)!important;
    display: flex;
    font-size: var( --e-global-typography-text-font-size );
    font-weight: 400!important;
    gap: 5px;
    text-transform: none;
}

.post-content a svg {
    transition: all .4s;
}

.post-content a:hover svg {
    margin-left: 5px;
}

/* Hover */
.post-oculto {
    opacity: 0;
    transition: all .4s;
    transform: translateY(10px);
}

.post-item:hover .post-oculto {
    opacity: 1;
    transform: translateY(0);
}

/* Imagen */
.post-image {
    min-height: 310px;
    max-height: 310px;
    transition: all 0.4s!important;
    width: 100%;
}

.post-item:hover .post-image {
    min-height: 210px;
    max-height: 210px;
}

/* Scrollbar */
.controles-swiper {
    align-items: center;
    display: flex;  
    justify-content: space-between; 
    margin-top: 40px; 
    padding: 0 5%;
}

.swiper-scrollbar {
    background: transparent; 
    border: 1px solid var(--blanco-gris);
    flex-grow: 1;
    height: 5px!important;
    position: relative!important; 
    margin: 10px 50px 0 0!important;
}

.swiper-scrollbar-drag {
    background: var(--blanco-gris)!important;
    height: 5px!important;
}

/* Flechas */
.btn-nav {
    cursor: pointer; 
    transition: all 0.3s;
    opacity: 1;
}

.btn-nav path {
    transition: all 0.3s;
}

.btn-nav:hover path {
    fill: var(--primario);
}

.swiper-button-disabled path {
    fill: var(--blanco-gris);
}

/* ==========================================
   ENTRADA: BLOG
   ========================================== */
/* Migas */
.migas span.elementor-icon-list-text b {
    color: var(--primario);
}

.migas li:after {
    border-width: 0!important;
    content: ">";
}

.migas li:last-child:after{
    content: "";
}

/* Contenido */
figure.wp-block-image img {
    border-radius: 10px;
    box-shadow: 0 0 8px 1.5px rgba(116, 129, 137, 0.32);
    width: 100%;
}
.elementor-widget-theme-post-content p {
    padding-bottom: 20px;
}

.elementor-widget-theme-post-content p:last-child {
    padding-bottom: 0!important;
}

/* Relacionado */
.elementor-post__text {
    display: flex !important;
    justify-content: center;
}

a.elementor-post__read-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

a.elementor-post__read-more::after {
    content: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1025 4.10249C10.208 3.99716 10.3509 3.93799 10.5 3.93799C10.6491 3.93799 10.792 3.99716 10.8975 4.10249L15.3975 8.60249C15.5028 8.70796 15.562 8.85093 15.562 8.99999C15.562 9.14906 15.5028 9.29202 15.3975 9.39749L10.8975 13.8975C10.846 13.9528 10.7839 13.9971 10.7149 14.0278C10.6459 14.0586 10.5714 14.0751 10.4959 14.0764C10.4204 14.0778 10.3453 14.0639 10.2753 14.0356C10.2053 14.0073 10.1416 13.9652 10.0882 13.9118C10.0348 13.8584 9.9927 13.7947 9.96441 13.7247C9.93612 13.6546 9.92222 13.5796 9.92356 13.5041C9.92489 13.4286 9.94142 13.3541 9.97216 13.2851C10.0029 13.2161 10.0472 13.154 10.1025 13.1025L13.6425 9.56249H3C2.85082 9.56249 2.70774 9.50323 2.60225 9.39774C2.49676 9.29225 2.4375 9.14918 2.4375 8.99999C2.4375 8.85081 2.49676 8.70774 2.60225 8.60225C2.70774 8.49676 2.85082 8.43749 3 8.43749H13.6425L10.1025 4.89749C9.99716 4.79202 9.93799 4.64906 9.93799 4.49999C9.93799 4.35093 9.99716 4.20796 10.1025 4.10249Z' fill='%230A507D'/%3E%3C/svg%3E");
    display: inline-block;
    height: 18px;
    transition: all .4s;
    width: 18px;
}

a.elementor-post__read-more:hover:after {
    margin-left: 5px;
}

/* ==========================================
   FOOTER
   ========================================== */
/* Red social */
.redes-footer-grid {
    display: flex;
    gap: 10px;
}

span.dashicons {
    align-items: center;
    display: flex;
    color: var(--blanco);
    height: 28px;
    justify-content: center;
    transition: all .4s;
    width: 28px;
}

span.dashicons:hover {
    opacity: 0.6;
}

/* Presencia internacional */
.presencia-internacional-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    gap: 50px;
}

.item-presencia {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-presencia, .item-presencia a, .item-presencia h4 {
    color: var(--blanco);
    font-size: var(--e-global-typography-996197c-font-size)!important;
    font-weight: var(--w-regular)!important;
    text-decoration: none!important;
    text-transform: none!important;
}

.item-presencia h4 {
    font-weight: var(--w-bold)!important;
}

.item-presencia p {
    display: flex;
    flex-direction: column;
    padding-top: 5px;
}
.item-presencia img{
    display: none;
}

/* Fiiter informativo */
.menu-footer ul {
    gap: 10px;
    width: 100%;
}

.menu-footer ul li {
    width: 16.66%!important;
}

/* Up */
.up svg {
    transition: .4s;
}

.up:hover svg {
    transform: translateY(-10px);
}

/* ==========================================
   FORMULARIO
   ========================================== */
:focus-visible, :focus {
    outline: none!important;
}

form .elementor-column {
    display: flow;
}

input[type="checkbox"] {
    accent-color: var(--celeste)!important;
}

/* ==========================================
   WOOCOMMERCE GLOBAL
   ========================================== */
.woocommerce-error, .woocommerce-info, .woocommerce-message {
    margin: 20px 0!important;
}

ul.products {
    padding: 0!important;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    opacity: 1!important;
}

input.qty {
    padding: 0!important;
    height: 40px!important;
}

.elementor-widget-woocommerce-product-price span.woocommerce-Price-amount {
    color: var(--primario)!important;
}

/* Botones Home */
#productos-respuestos, #productos-quimicos {
    display: none;
    opacity: 0;
    transition: all .4s;
}

/* Solo mostramos el que tenga la clase activa */
.producto-activo {
    display: block!important;
    opacity: 1!important;
}

#repuestos, #quimicos {
    cursor: pointer;
}

.activo a {
    background-color: var(--celeste)!important;
    border-color: var(--celeste)!important;
    color: var(--blanco)!important;
}

/* ==========================================
   PLANTILLA
   ========================================== */
.wp-block-heading {
    font-size: var( --e-global-typography-1bc8e3d-font-size )!important;
    margin-bottom: 20px;
}

.wp-block-separator {
    border: none;
    border-top: 1px solid;
    margin-bottom: 20px!important;
}

ul.wp-block-list {
    margin-bottom: 20px;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
/* Pantalla full */
@media (min-width: 1800px) {
    /* Carruseles post - productos - soluciones- card */
    .contenedor-carrusel-padre {
        padding-left: 16%!important;
    }
}

@media (min-width: 2000px) {
    /* Carruseles post - productos - soluciones- card */
    .contenedor-carrusel-padre {
        padding-left: 19%!important;
    }
}

/* Pórtatil */
@media (max-width: 1430px) {
    /* Carruseles post - productos - soluciones- card */
    .contenedor-carrusel-padre {
        padding-left: 5%!important;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    /* Header */
    header ul.sub-menu {
        padding: 0!important;
    }

    /* Slider */
    .carrusel-hero .elementor-swiper-button {
        display: none!important;
    }
    
    /* Presencia internacional */
    .presencia-internacional-container {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Card */
    .card-servicio {
        flex: 1 1 calc(50% - 15px);
    }
    
    /* Sección */
    .sombra {
        box-shadow: 0 0 0 0 rgba(116, 129, 137, 0);
    }
    
    /* Imagen costado */
    .image-ratio img {
        aspect-ratio: 7/4!important;
        object-fit: cover!important;
        height: auto!important;
    }
}

@media (max-width: 970px) {
    /* Botón descarga */
    a.card-button {
        justify-content: center;
        width: 100%;
    }
}

    
/* Mobile */
@media (max-width: 820px) {
    /* Carrusel barra */
    .swiper-scrollbar.swiper-scrollbar-horizontal {
        margin: 0!important;
    }
    
    /* Carrusel equipo*/
    .card-home-item {
        height: auto!important;
    }

    .my-acf-swiper .swiper-slide .loop-oculto {
        justify-content: space-between;
        min-height: 110px;
        opacity: 1;
        padding-top: 10px;
        transform: translateY(0);
    }
    
    .card-image {
        height: 225px;
    }
    
    .card-image img, .my-acf-swiper .swiper-slide:hover img {
        height: 100%!important;
    }
    
    p.card-text {
        display: -webkit-box; 
        padding-bottom: 0;
        overflow: hidden; 
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
    
    a.card-button {
        margin-bottom: 5px;
    }
}

@media (max-width: 767px) {
    /* Botón */
    a.elementor-button {
        width: 100%;
    }
    
    /* Hero */
    .elementor-element::before {
        background-image: linear-gradient(0deg, var(--e-global-color-primary) 0%, #F2295B00 100%)!important;
    }
    
    /* Footer */
    .presencia-internacional-container {
        gap: 10px;
        grid-template-columns: repeat(3, 1fr);
    }
    
    .item-presencia {
        border-bottom: 1px solid var(--blanco);
        flex-direction: row;
        flex-flow: wrap;
        justify-content: space-between;
        padding-bottom: 10px;
    }
    
    .item-presencia:last-child {
        border-bottom-width: 0;
    }
    
    .item-presencia h4 {
        width: 100%;
    }

    .item-presencia p {
        width: 48%;
    }
    
    .menu-footer ul {
        justify-content: center;
    }

    .menu-footer ul li {
        width: auto!important;
    }
    
    .up svg {
        height: 35px;
        width: 30px;
    }
    
    /* Ajuste para las cards de las paginas de servicios*/
    .servicios .card-servicio {
        align-items: center;
        flex: 1 1 100%!important;
        text-align: center;
        min-height: 215px;
    }
}

@media (max-width: 680px) {
    /* Card */
    .card-servicio {
        width: 100%;
    }

    /* Footer */
    .presencia-internacional-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 580px) {
    /* Footer */
    .presencia-internacional-container {
        grid-template-columns: 1fr;
    }
    
    /* Card */
    .card-servicio {
        flex: 1 1 calc(100% - 15px);
        min-height: auto;
    }
    
    .card-servicio p {
        padding-bottom: 15px;
    }
}