.elementor-kit-6{--e-global-color-primary:#38363A;--e-global-color-secondary:#F5F4F0;--e-global-color-text:#38363A;--e-global-color-accent:#38363A;--e-global-color-f363507:#2F2F34;--e-global-color-ad3a488:#F0F1F4;--e-global-color-0e7854b:#C74507;--e-global-typography-primary-font-family:"EB Garamond";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"DM Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"EB Garamond";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"EB Garamond";--e-global-typography-accent-font-weight:400;background-color:#F5F4F0;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================
   1. GLOBAL (Aplica a PC y Móvil)
   ========================================= */
.site-header { display: none; }
.site-footer { display: none; }
body { overflow-x: hidden; }
/* Ocultar el título de página nativo de WordPress */
.page-title, 
.entry-title { 
  display: none !important; 
}

/* =========================================
   2. ESCRITORIO (Solo aplica a más de 1024px)
   ========================================= */
@media (min-width: 1025px) {
  
  /* Sacamos el logo del flujo para que el texto central ocupe el 100% y se centre perfectamente */
  .vca-logo {
    position: absolute !important;
    top: 40px !important;
    left: 5% !important;
    z-index: 10 !important;
  }
  
  .vca-colecciones {
    align-items: flex-start !important;
    
  }
  
  .vca-colecciones .vca-col-izq {
    position: sticky !important;
    top: 40px !important;
    width: 750px !important;
    min-width: 750px !important;
    max-width: 750px !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    /* Padding eliminado: ahora se controla desde la pestaña Avanzado de Elementor */
  }
  
  .vca-colecciones .vca-col-der {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 40px 0 20px !important;
  }
  
  .vca-colecciones .vca-panel {
    padding: 0 !important; 
  }
  
  /* ESTADO INACTIVO: Todas las palabras (Preparadas para el Slide) */
  .vca-colecciones .vca-lista-cats h3 {
    opacity: 0.35 !important;
    color: #ffffff !important; 
    cursor: pointer !important;
    transition: all 0.4s ease !important; 
    margin: 0 0 15px 0 !important;
    font-size: 30px !important;
    line-height: 1.1 !important;
    transform: translateX(0px) !important;
  }
  
  /* ESTADO ACTIVO: La palabra de la foto que estás viendo (Sale hacia afuera) */
  .vca-colecciones .vca-lista-cats h3.vca-activa {
    opacity: 1 !important;
    font-size: 38px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    transform: translateX(30px) !important;
  }
  
}

/* =========================================
   3. COLORES Y TIPOGRAFÍAS (Aplica a PC y Móvil)
   ========================================= */
.vca-journal h2,
.vca-journal .elementor-widget-heading h2,
.vca-journal .elementor-heading-title,
.vca-journal h1,
.vca-journal h3,
.vca-donde .elementor-heading-title,
.vca-donde h1,
.vca-donde h2,
.vca-donde h3 {
  color: #3B363A !important;
}

/* =========================================
   4. AJUSTES PARA PORTÁTILES (De 1025px a 1440px)
   ========================================= */
@media (max-width: 1440px) and (min-width: 1025px) {
  
  /* Hacemos la sección de Colecciones fluida y SCROLLEABLE */
  .vca-colecciones .vca-col-izq {
    width: 40% !important;
    min-width: 40% !important;
    max-width: 40% !important;
    /* Padding eliminado: ahora se controla desde la pestaña Avanzado de Elementor */
    
    /* El antídoto contra el corte: */
    top: 20px !important; /* Sobrescribimos los 100px del PC para aprovechar más la pantalla */
    max-height: 90vh !important; /* Obligamos a la columna a no medir más que tu monitor */
    overflow-y: auto !important; /* Permite hacer scroll independiente dentro del menú */
    scrollbar-width: none !important; /* Oculta la barra en Firefox para que siga elegante */
  }

  /* Oculta la barra de scroll del menú en Chrome/Edge/Safari */
  .vca-colecciones .vca-col-izq::-webkit-scrollbar {
    display: none !important;
  }
  
  .vca-colecciones .vca-col-der {
    width: 60% !important;
    padding: 0 40px 0 20px !important;
  }

  /* Reducimos márgenes y tamaño en portátil para que quepan todas las categorías sin cortarse por abajo */
  .vca-colecciones .vca-lista-cats h3 {
    font-size: 24px !important; 
    margin: 0 0 8px 0 !important; /* Hueco reducido */
    line-height: 1 !important; 
  }

  /* Ajustamos la clase activa para mantener la jerarquía visual */
  .vca-colecciones .vca-lista-cats h3.vca-activa {
    font-size: 30px !important; 
  }

  /* Controlamos la altura de las imágenes como respaldo al JavaScript */
  .vca-colecciones .vca-col-der img {
    max-height: 80vh !important; 
    width: 100% !important;
    object-fit: contain !important; /* Mantiene proporción sin cortar ni deformar */
    margin-bottom: 20px !important; 
  }
  
}

/* =========================================
   5. AJUSTES MÓVILES (Hasta 767px)
   ========================================= */
@media (max-width: 767px) {
  
  /* Forzamos a las fotos de Colecciones a comportarse bien desde el inicio */
  .vca-colecciones .vca-col-der img {
    position: relative !important;
    max-height: none !important; /* Anulamos el límite de 80vh que le pusimos al PC */
    height: auto !important;
    width: 100% !important;
    object-fit: cover !important;
    margin-bottom: 20px !important;
    transform: none !important; /* Por si algún resto de parallax se ha colado */
  }

  /* Aseguramos que los contenedores hijos (Vajilla, Cristaleria...) no se monten */
  .vca-colecciones .vca-panel {
     position: relative !important;
     display: block !important;
     width: 100% !important;
  }
}

/* ===== CF7 FORMULARIO CONTACTO (1 COLUMNA - CALCADO AL MOCKUP) ===== */

/* 1. BLINDAJE DE CENTRADO */
.wpcf7, 
.wpcf7 form, 
.cf7-proyecto-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.wpcf7 .screen-reader-response {
    display: none !important;
}

/* 2. CAMPOS DE TEXTO (Líneas más cortas a 600px para igualar el diseño) */
.cf7-field-group {
    width: 100% !important;
    max-width: 600px !important; /* <--- Reducido para que la línea no sea kilométrica */
    margin: 0 auto 24px auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    padding-bottom: 25px !important; /* Colchón para los errores */
}

.cf7-field-group .wpcf7-form-control-wrap {
    width: 100% !important;
    display: block !important; 
    position: relative !important;
}

.cf7-field-group input[type="text"],
.cf7-field-group input[type="email"],
.cf7-field-group input[type="tel"] {
    width: 100% !important; 
    max-width: 600px !important; 
    margin: 0 auto !important;
    border: none !important;
    border-bottom: 1px solid #d1d1d1 !important; 
    text-align: center !important; 
    font-family: 'DM Sans', sans-serif !important;
    font-size: 18px !important; /* <--- Letra más fina y elegante */
    color: #463F45;
    padding: 8px 0 !important;
    background: transparent !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.cf7-field-group input::placeholder {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 18px !important; 
    color: #a0a0a0 !important; 
    opacity: 0.8;
    text-align: center !important;
}

.cf7-field-group input:focus {
    border-bottom: 2px solid #3B363A !important; 
}

/* Avisos de error anclados debajo de la línea */
span.wpcf7-not-valid-tip {
    position: absolute !important;
    bottom: -22px !important; 
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important; 
    color: #dc3232 !important; 
    margin: 0 !important;
}

/* 3. INTERESES Y PÍLDORAS (CALCADO AL PANEL DE FIGMA) */
.cf7-intereses-label {
    text-align: center !important;
    width: 100% !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 22px !important;
    color: #463F45;
    margin-bottom: 20px !important;
    margin-top: 10px !important;
}

.cf7-pills .wpcf7-checkbox {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important; /* Espacio de 10px exacto de Figma */
    max-width: 750px !important; /* Le damos un poco más de margen al contenedor para que fluyan bien */
    margin: 0 auto !important;
}

.cf7-pills .wpcf7-checkbox input[type="checkbox"] {
    display: none !important;
}

.cf7-pills .wpcf7-list-item {
    margin: 0 !important;
}

/* LAS PÍLDORAS: MEDIDAS CLAVADAS DEL FIGMA */
.cf7-pills .wpcf7-list-item-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Las tres claves de tu captura: */
    height: 46px !important; 
    padding: 0 30px !important; 
    background-color: #C3C5CC !important; 
    
    border-radius: 40px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 22px !important; 
    color: #ffffff !important; 
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    
    /* Ajuste óptico para que el texto quede centrado perfecto dentro de los 46px */
    line-height: 1 !important;
}

/* Píldora Activa (Gris oscuro/Negro) */
.cf7-pills .wpcf7-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label {
    background-color: #3B363A !important; 
    color: #ffffff !important;
}
/* 4. EL PUTO BOTÓN (CALCADO A FIGMA) */
.wpcf7 button.cf7-boton-custom {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important; 
    
    /* PADDING Y BORDER-RADIUS EXACTOS DEL FIGMA */
    padding: 10px 30px !important; 
    border-radius: 40px !important;
    
    height: auto !important; 
    background-color: #C74507 !important;
    border: none !important;
    color: #ffffff !important;
    
    /* MÁRGENES: 50px de aire por arriba, 160px por abajo (como en la captura 2) */
    margin: 100px auto 160px auto !important; 
    
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* CONTROL DEL TEXTO (Ajustado a 20px y peso 400) */
.wpcf7 button.cf7-boton-custom span {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 20px !important; /* <--- Actualizado a 20px */
    font-weight: 400 !important; /* <--- Actualizado a Normal (400) */
    text-transform: uppercase !important; /* <--- Añadido por si acaso */
    line-height: normal !important;
    display: block !important;
    transform: translateY(1px) !important; 
}

/* CONTROL DE LA FLECHA */
.wpcf7 button.cf7-boton-custom::after {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;  
    height: 14px !important;
    -webkit-mask-image: url("https://hylionworks.com/vca/wp-content/uploads/2026/06/3.svg") !important;
    mask-image: url("https://hylionworks.com/vca/wp-content/uploads/2026/06/3.svg") !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    background-color: #ffffff !important; 
    transform: translateY(1px) !important; 
}

/* Hover a negro */
.wpcf7 button.cf7-boton-custom:hover {
    background-color: #3B363A !important; 
    opacity: 1 !important; 
}

/* ===== AJUSTES ESPECÍFICOS PARA MÓVIL (CALCADO A FIGMA) ===== */
@media (max-width: 767px) {
    
    /* 1. RESET TOTAL DE MÁRGENES (Matamos el desvío a la izquierda) */
    .cf7-intereses-group,
    .cf7-intereses-group .wpcf7-form-control-wrap,
    .cf7-pills,
    .cf7-pills .wpcf7-checkbox {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important; /* <--- Adiós al margen oculto de WordPress */
        box-sizing: border-box !important;
    }

    .cf7-pills .wpcf7-checkbox {
        gap: 12px !important; /* Separación vertical entre las pastillas */
    }

    /* 2. EL CONTENEDOR DE CADA PASTILLA (Fuerza el centrado absoluto) */
    .cf7-pills .wpcf7-list-item {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cf7-pills .wpcf7-list-item label {
        display: inline-flex !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. LA PASTILLA ("Efecto guante" + 18px de padding lateral del Figma) */
    .cf7-pills .wpcf7-list-item-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* LA CLAVE DE ELISA: La pastilla se ajusta al ancho del texto exacto */
        width: fit-content !important; 
        max-width: 90vw !important; /* Límite de seguridad por si la pantalla es diminuta */
        
        height: auto !important;
        min-height: 42px !important;
        padding: 8px 18px !important; /* Los 17.5px de tu captura redondeados */
        
        font-size: 18px !important; /* Letra a 18px como en Figma */
        text-align: center !important;
        white-space: normal !important; /* Permite salto de línea solo si es estrictamente necesario */
        line-height: 1.2 !important;
        box-sizing: border-box !important;
    }

    /* 4. CAMPOS DE TEXTO (Ajustamos para que dejen margen lateral y respiren) */
    .cf7-field-group {
        width: 85% !important; 
        margin: 0 auto 24px auto !important;
    }
    
    /* En móvil bajamos los placeholders a 18px para que no se vean gigantes */
    .cf7-field-group input[type="text"],
    .cf7-field-group input[type="email"],
    .cf7-field-group input[type="tel"],
    .cf7-field-group input::placeholder {
        font-size: 18px !important;
    }

    /* 5. EL BOTÓN (Con el salto de 100px) */
    .wpcf7 button.cf7-boton-custom {
        margin: 100px auto 100px auto !important; 
    }
}

/* ===== FORMULARIO SHOWROOM: REGLAS PARA 2 COLUMNAS ===== */

/* 1. CREAMOS EL GRID (Solo para pantallas grandes) */
@media (min-width: 768px) {
    .cf7-grid-superior {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Dos columnas iguales */
        gap: 0 40px !important; /* 40px de separación entre columnas */
        width: 100% !important;
        max-width: 900px !important; /* Mismo ancho que las líneas de antes */
        margin: 0 auto !important;
    }
}

/* 2. AJUSTE DE LOS CAMPOS EN EL GRID */
.cf7-grid-superior .cf7-field-group {
    width: 100% !important;
    max-width: 100% !important; /* En el grid, que ocupen todo su hueco */
}

/* 3. ESPACIADO ENTRE GRUPOS DE PREGUNTAS */
.cf7-intereses-group {
    margin-top: 40px !important;
    width: 100% !important;
}

/* 4. ASEGURAR QUE EN MÓVIL SIGA SIENDO 1 COLUMNA */
@media (max-width: 767px) {
    .cf7-grid-superior {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    /* En showroom móvil, que las líneas de texto respeten el 85% que pusimos antes */
    .cf7-grid-superior .cf7-field-group {
        width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===== AJUSTES MÓVIL SHOWROOM (EFECTO NUBE + CORRECCIONES ELISA) ===== */
@media (max-width: 767px) {
    
    /* 1. RESET DE MÁRGENES Y ESTRUCTURA */
    .cf7-showroom .cf7-intereses-group,
    .cf7-showroom .cf7-intereses-group .wpcf7-form-control-wrap,
    .cf7-showroom .cf7-pills {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. TÍTULOS DE PREGUNTAS Y ESPACIADO DE BLOQUES */
    .cf7-showroom .cf7-intereses-label {
        font-size: 22px !important;
        line-height: 1.3 !important;
        padding: 0 10px !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .cf7-showroom .cf7-intereses-group {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    /* 3. FILA HORIZONTAL CON SALTO DE LÍNEA (Efecto nube) */
    .cf7-showroom .cf7-pills .wpcf7-checkbox {
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: wrap !important;     
        align-items: center !important;
        justify-content: center !important; 
        width: 100% !important;
        gap: 8px !important; 
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 4. EL CONTENEDOR DE CADA PASTILLA */
    .cf7-showroom .cf7-pills .wpcf7-list-item {
        display: inline-flex !important;
        justify-content: center !important;
        width: auto !important; 
        margin: 0 !important;
        padding: 0 !important;
    }

    .cf7-showroom .cf7-pills .wpcf7-list-item label {
        display: inline-flex !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 5. LA PASTILLA ("Efecto guante" reescalado a 3 por línea) */
    .cf7-showroom .cf7-pills .wpcf7-list-item-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: fit-content !important; 
        max-width: 90vw !important; 
        height: auto !important;
        min-height: 38px !important;
        padding: 6px 14px !important; 
        font-size: 22px !important; 
        text-align: center !important;
        white-space: nowrap !important; 
        line-height: 1.2 !important;
        box-sizing: border-box !important;
    }

    /* 6. CAMPOS DE TEXTO Y SEPARACIONES */
    .cf7-showroom .cf7-field-group {
        width: 85% !important; 
        margin: 0 auto 24px auto !important;
    }
    
    .cf7-showroom .cf7-grid-superior {
        margin-bottom: 60px !important; 
    }

    .cf7-showroom .cf7-field-group input[type="text"],
    .cf7-showroom .cf7-field-group input[type="email"],
    .cf7-showroom .cf7-field-group input[type="tel"],
    .cf7-showroom .cf7-field-group input::placeholder {
        font-size: 18px !important;
    }

    /* 7. EL BOTÓN */
    .cf7-showroom .wpcf7 button.cf7-boton-custom {
        margin: 60px auto 100px auto !important; 
    }
}/* End custom CSS */