/*
Theme Name: SYM Naval Child
Theme URI: https://sym-naval.com
Description: Tema hijo de sym-naval.com sobre Nereida Theme. Estilos de SYM, recursos de los widgets de SYM Core, tarjeta del blog y selector de idioma.
Author: Nereida Studio
Author URI: https://nereidastudio.com
Template: nereida-theme
Version: 1.0.1
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: symnaval-child
Update URI: false
*/

/*
 * Estilos de SYM Naval, tal cual estaban en hello-theme-child 2.0.0 (03/08/2026).
 * Se cargan al final (prioridad 99), después de Elementor y de sym-core-assets/theme.css.
 */

/* =========================================
   VARIABLES GLOBALES & COLORES (SYM CORE)
   ========================================= */

:root {
    /* 1. PALETA DE COLORES SYM NAVAL (La fuente de la verdad) */
    --sym-orange: #FF4713;  /* Naranja corporativo */
    --sym-dark:   #121C22;  /* BG2 - Azul muy oscuro/Negro */
    --sym-text:   #100707;  /* Texto principal (Casi negro) */
    --sym-grey:   #E1E6E9;  /* Gris claro (Probablemente para fondos o bordes) */
    --sym-white:  #FFFFFF;  /* Blanco puro */

    /* 2. CONEXIÓN CON ELEMENTOR (Mapeo) */
    /* Esto hace que si un widget pide "Primary", use tu Naranja automáticamente */

    /* Primary: Suele usarse para Títulos H1, H2 y elementos destacados */
    --e-global-color-primary: var(--sym-orange);

    /* Secondary: Suele usarse para subencabezados o fondos oscuros */
    --e-global-color-secondary: var(--sym-dark);

    /* Text: El color del cuerpo del texto (párrafos) */
    --e-global-color-text: var(--sym-text);

    /* Accent: Enlaces, botones de acción, estados hover */
    --e-global-color-accent: var(--sym-orange);
    
    /* 3. VARIABLES DEL PLUGIN SYM (Para asegurar que los widgets nuevos lo pillen) */
    /* Como usamos esta variable en el button.php, la definimos aquí también por si acaso */
    --btn-custom-color: var(--sym-orange);
}




/* =========================================
   ESTILOS BASE (RESET)
   ========================================= */

body {
    color: var(--sym-text);
    background-color: var(--sym-white);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sym-dark); /* O var(--sym-text) si prefieres */
}

/* Fondo oscuro para secciones específicas (Clase de utilidad) */
.bg-sym-dark {
    background-color: var(--sym-dark);
    color: var(--sym-white);
}

.bg-sym-grey {
    background-color: var(--sym-grey);
}




/* =========================================
   ARREGLOS DEFINITIVOS WIDGET BUTTON
   ========================================= */

/* 1. ARREGLO DE TIPOGRAFÍA (El problema del font-size: 0) */
/* Forzamos que el botón tenga un tamaño base para que la Global de Elementor pueda funcionar */
.elementor-widget-industrium_button .industrium-button {
    font-size: 16px; /* Valor por defecto si la global falla */
    line-height: 1.2;
}

/* IMPORTANTE: Si el contenedor padre tiene font-size: 0, lo reseteamos en el enlace */
.elementor-widget-industrium_button .button-container a {
    font-size: initial; /* Permite que Elementor controle el tamaño */
}
/* --- CORRECCIÓN ZOOM IMAGEN BLOG --- */

/* 1. Convertimos el contenedor en una "máscara" */
.post-media-wrapper {
    overflow: hidden !important; /* Corta todo lo que se salga del borde */
    position: relative;          /* Mantiene la estructura */
}

/* 2. Aseguramos que el enlace ocupe el espacio correcto */
.post-media-wrapper a {
    display: block;
    overflow: hidden;
}

/* 3. Ajuste para que la imagen no rompa el flujo */
.post-media-wrapper img {
    transform-origin: center center; /* El zoom se hace desde el centro */
    transition: transform 0.5s ease; /* Suavizamos la animación */
    width: 100%;                     /* Asegura que ocupe el ancho */
    height: auto;
}

/* 4. El efecto Hover (Zoom suave) */
/* Solo se aplica cuando pasas el ratón por el artículo entero (.blog-item) */
.blog-item:hover .post-media-wrapper img {
    transform: scale(1.1); /* Zoom al 110% */
}




/* =========================================
   ANTI-FLECHAS: ELIMINACIÓN FORZADA
   ========================================= */

/* OJO: estos selectores son globales (todos los <ul> del sitio).
   Al matar el :before quitan la flecha que hace de viñeta en el CSS de
   Industrium que replicamos en sym-core-assets/theme.css (lo encola
   functions.php:38). Pero ese mismo archivo trae ya, en global:
     linea 8913  ul { list-style: none; }
     linea 8896  ul, ol { padding: 0; }
   Nadie devolvia la vinieta nativa -> las listas del cuerpo de las
   entradas se quedaban sin flecha Y sin punto.
   Se compensa en el bloque "VIÑETAS EN EL CUERPO DE LAS ENTRADAS".
   La base del child (assets/css/base-heredada.css, el reset de Hello)
   no toca listas. */

/* 1. Ocultar el pseudo-elemento de la flecha */
ul > li:before {
    content: none !important;
    display: none !important;
    border: none !important;
}

/* 2. Eliminar el padding izquierdo que dejaba hueco a la flecha */
ul > li {
    padding-left: 0 !important;
}




/* =========================================
   VIÑETAS EN EL CUERPO DE LAS ENTRADAS
   ========================================= */

/* Devuelve la viñeta nativa SOLO dentro del contenido de una entrada de blog
   (Gutenberg -> .elementor-widget-theme-post-content, Elementor -> .elementor-widget-text-editor).
   Acotado con body.single-post para no tocar menús, icon-lists ni el resto del sitio.
   No reactiva las flechas: el :before del bloque anterior sigue anulado. */

body.single-post .elementor-widget-theme-post-content ul,
body.single-post .elementor-widget-text-editor ul {
    list-style: disc outside !important;
    padding-left: 1.4em !important;
}

body.single-post .elementor-widget-theme-post-content ol,
body.single-post .elementor-widget-text-editor ol {
    list-style: decimal outside !important;
    padding-left: 1.4em !important;
}

body.single-post .elementor-widget-theme-post-content li,
body.single-post .elementor-widget-text-editor li {
    margin-bottom: 0.4em;
}

/* Listas anidadas */
body.single-post .elementor-widget-theme-post-content ul ul,
body.single-post .elementor-widget-text-editor ul ul {
    list-style: circle outside !important;
    margin-block: 0.4em !important;
}




/* =========================================
   PREGUNTAS DEL FAQ EN LAS ENTRADAS
   ========================================= */

/* Las preguntas del FAQ son <h3>, y por defecto salían a 22px: demasiado
   grandes para lo que son. Se igualan al tamaño del texto (17px, via inherit)
   y se distinguen solo por peso (400 -> 600).

   OJO: NO se puede estilar `h3` a secas. En el blog los <h3> se usan sobre todo
   como subtitulo estructural ("Motorizacion diesel", "Inspeccion y diagnostico"):
   a fecha 2026-08-02 hay 55 h3 estructurales frente a 22 de FAQ. Bajarlos todos
   romperia la jerarquia de 10 entradas.

   Por eso las preguntas del FAQ llevan la clase `sym-faq-q` en el HTML del post.
   Ponla tambien en las entradas nuevas (ver Blog/_plantilla-post.md).

   Los !important son obligatorios aqui: el CSS adicional del Personalizador
   (bloque "Encabezados - jerarquia limpia", se sirve inline como #wp-custom-css)
   fija `.single-post h3 { font-size: 22px !important }`. Esta regla gana por
   especificidad (0,2,1 frente a 0,1,1), no por orden de carga. */

body.single-post .sym-faq-q {
    font-size: inherit !important;   /* = 17px, el mismo cuerpo que el parrafo */
    font-weight: 600 !important;     /* el parrafo es 400: se distingue solo por peso */
    line-height: 1.45 !important;
    margin: 1.6em 0 0.35em !important; /* separa de la respuesta anterior, pega a la suya */
}




/* =========================================
   ENLACES EN EL CUERPO DE LAS ENTRADAS
   ========================================= */

/* Los enlaces del cuerpo eran INVISIBLES: mismo color que el texto, sin
   subrayado, sin borde y sin fondo. Cero señal para el lector.

   Causa (comprobada sobre estilos calculados el 2026-08-02):
     · El kit de Elementor pinta los enlaces con el color global "secondary":
         post-9.css  ->  .elementor-kit-9 a { color: var(--e-global-color-secondary) }
       y esa variable vale #121C22 — EXACTAMENTE el color del texto del cuerpo.
     · Y tres hojas distintas quitan el subrayado:
         reset.css                  a { text-decoration: none }
         custom-frontend.min.css    .elementor a { text-decoration: none }
         sym-core-assets/theme.css  a { text-decoration: none }

   Se corrige aqui y NO tocando el color global del kit, porque esa variable
   la usan tambien menus, botones y tarjetas de todo el sitio.

   Color: #C4360F = el naranja de marca (#FF4713) oscurecido.
   El naranja puro tiene contraste 3,41 sobre blanco y NO cumple WCAG AA
   (minimo 4,5 para texto normal). El oscurecido da 5,41 y si cumple.
   El naranja puro se reserva para :hover, que es un estado transitorio y
   ademas va acompañado de subrayado. */

body.single-post .elementor-widget-theme-post-content p a,
body.single-post .elementor-widget-theme-post-content li a,
body.single-post .elementor-widget-text-editor p a,
body.single-post .elementor-widget-text-editor li a {
    color: #C4360F !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

body.single-post .elementor-widget-theme-post-content p a:hover,
body.single-post .elementor-widget-theme-post-content li a:hover,
body.single-post .elementor-widget-text-editor p a:hover,
body.single-post .elementor-widget-text-editor li a:hover {
    color: #FF4713 !important;          /* naranja de marca puro solo en hover */
    text-decoration-thickness: 2px;
}

/* Navegacion por teclado: el foco debe verse (WCAG 2.4.7) */
body.single-post .elementor-widget-theme-post-content p a:focus-visible,
body.single-post .elementor-widget-theme-post-content li a:focus-visible,
body.single-post .elementor-widget-text-editor p a:focus-visible,
body.single-post .elementor-widget-text-editor li a:focus-visible {
    outline: 2px solid #C4360F;
    outline-offset: 2px;
}




/* =========================================
   BLOG RESPONSIVE (SOLUCIÓN IMAGEN FILL)
   ========================================= */

/* 1. EL ENLACE (CONTENEDOR QUE DEFINE EL TAMAÑO) */
/* Usamos selector genérico 'a' para asegurar que lo pilla aunque no hayas actualizado el PHP */
.blog-item .post-media-wrapper a {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* Reset de altura */
    height: 0 !important;
    
    /* MÓVIL (Por defecto): Formato 16:9 (Horizontal) */
    padding-bottom: 56.25% !important; 
}

/* 2. LA IMAGEN (OBLIGADA A LLENAR) */
.blog-item .post-media-wrapper img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    
    /* LAS CLAVES PARA QUE NO HAYA HUECOS: */
    width: 100% !important;
    height: 100% !important;   /* Fuerza a llenar la altura vertical */
    max-width: none !important; /* Evita límites del tema */
    min-height: 100% !important; /* Asegura llenado mínimo */
    
    /* RECORTAR LO QUE SOBRE */
    object-fit: cover !important; 
    object-position: center center !important;
    
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.5s ease;
}

/* Zoom al pasar el ratón */
.blog-item:hover .post-media-wrapper img {
    transform: scale(1.1);
}

/* 3. LA FECHA (LAPA EN LA ESQUINA) */
.blog-item .post-date-box.anchored-date {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    background: none !important;
    
    display: flex;
    flex-direction: column;
    min-width: 70px;
    text-align: center;
}

/* Estilos Fecha */
.blog-item .post-date-box .day {
    display: block;
    background-color: var(--sym-orange, #FF4713);
    color: #FFFFFF;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    padding: 10px 5px 5px 5px;
}

.blog-item .post-date-box .month-year {
    display: block;
    background-color: var(--sym-dark, #121C22);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    padding: 5px 5px 8px 5px;
}


/* 4. MEDIA QUERY: ESCRITORIO Y TABLET (Vertical 4:5) */
@media (min-width: 768px) {
    .blog-item .post-media-wrapper a {
        /* Aquí forzamos la altura vertical */
        padding-bottom: 125% !important; 
    }
}




/* =========================================
   ESTILAR PAGINACIÓN NATIVA (FIX TÍTULOS)
   ========================================= */

/* 1. Contenedor: Centrado (para la paginación) */
.archive-listing {
    text-align: center; /* Esto centra los números */
    padding-top: 0 !important;
    display: block;
}

/* 1.5. CORRECCIÓN: Devolver los textos de los posts a la izquierda */
/* Esto evita que el 'center' de arriba afecte a tus títulos y textos */
.archive-listing .archive-listing-wrapper, 
.archive-listing .blog-item {
    text-align: left !important; 
}

/* ... (El resto del CSS de los números y flechas déjalo igual) ... */





/* =========================================
   REDEFINIR "BOLD" (MODERN BOLD)
   ========================================= */

/* 1. Redefinir las etiquetas HTML de negrita */
b, strong {
    font-weight: 600 !important; /* Cambia a 500 si quieres algo más fino */
}




/* =========================================
   ESTILO GLOBAL IMAGE BOX (Línea Título)
   ========================================= */

.elementor-widget-image-box .elementor-image-box-title {
    border-bottom: 1px solid var(--sym-orange, #FF4713);
    padding-bottom: 12px;
}




/* =========================================
   ESTILAR PAGINACIÓN NATIVA (FINAL)
   ========================================= */

/* 1. Contenedor: Solo centrado, SIN padding superior */
.archive-listing {
    text-align: center;
    padding-top: 0 !important; /* Quitamos el espacio que afectaba a todo */
    display: block;
}

/* 2. Las Cajas (Números y Flechas) */
.archive-listing .page-numbers {
    display: inline-flex;       
    justify-content: center;    
    align-items: center;        
    
    width: 50px;                
    height: 50px;               
    
    /* AQUÍ ESTÁ EL CAMBIO: El margen va en los botones */
    margin-top: 60px !important; 
    
    /* Alineación del escalón */
    vertical-align: middle !important;
    
    background: transparent;
    color: #000000;             
    border: 1px solid #FF4713;  
    
    margin-left: -1px;          
    text-decoration: none;      
    font-weight: 600;
    font-family: "Manrope", sans-serif;
    line-height: 1;
    
    transition: all 0.3s ease;
    position: relative;         
}

/* 3. El número activo */
.archive-listing .page-numbers.current {
    background-color: #FF4713;
    color: #ffffff;
    z-index: 2; 
}

/* 4. Hover */
.archive-listing a.page-numbers:hover {
    background-color: #FF4713;
    color: #ffffff;
    z-index: 3;
}

/* 5. Las flechas */
.archive-listing .page-numbers .button-icon {
    width: 8px;
    height: 8px;
    display: block;
    border-top: 2px solid currentColor; 
    border-right: 2px solid currentColor;
    margin-bottom: 2px; 
}

.archive-listing .page-numbers.next .button-icon {
    transform: rotate(45deg);
    margin-left: -4px;
}

.archive-listing .page-numbers.prev .button-icon {
    transform: rotate(-135deg);
    margin-left: 4px;
}




/* =========================================
   WIDGET: SINGLE SERVICE (GAP FILL ANIMATION)
   ========================================= */

/* 1. Contenedor Principal */
.elementor-widget-sym_single_service .service-card-wrapper {
    display: block;
    width: 100%;
}
.elementor-widget-sym_single_service .service-card-link {
    display: block;
    text-decoration: none;
}

/* 2. Tarjeta */
.elementor-widget-sym_single_service .service-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* La altura viene del control PHP */
}

/* 3. Imagen de Fondo */
.elementor-widget-sym_single_service .service-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.elementor-widget-sym_single_service .service-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.4s ease;
}

/* 4. La Banda de Contenido (FLOTANTE) */
.elementor-widget-sym_single_service .service-content {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 5;
    
    /* ESTADO INICIAL: Flotando */
    bottom: 32px; 
    padding: 25px 30px 25px 30px; /* Padding normal */
    background-color: #121C22;
    
    /* Transición suave de posición, color y relleno */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Cabecera (Título + Flecha) */
.elementor-widget-sym_single_service .service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.elementor-widget-sym_single_service .service-title {
    margin: 0;
    padding-right: 15px;
    line-height: 1.2;
    font-size: 22px;
    transition: color 0.3s ease;
}

.elementor-widget-sym_single_service .service-arrow:before {
    content: '\e839';
    font-family: 'fontello';
    font-size: 20px;
    display: block;
    color: #fff;
    transition: transform 0.3s ease;
}

/* Cuerpo del texto (Desplegable) */
.elementor-widget-sym_single_service .service-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0;
}

.elementor-widget-sym_single_service .service-text {
    overflow: hidden;
    min-height: 0;
    font-size: 15px;
    line-height: 1.6;
    padding-top: 0;
    transition: padding 0.4s ease;
}

/* --- ANIMACIONES HOVER --- */

/* 1. La Banda "Aterriza" y se vuelve Naranja */
.elementor-widget-sym_single_service .service-card-wrapper:hover .service-content {
    bottom: 0; /* Baja al suelo */
    background-color: #FF4713;
    
    /* TRUCO MAESTRO: Aumentamos el padding inferior para compensar la bajada.
       25px (original) + 32px (lo que baja) = 57px. 
       Así el título se queda quieto visualmente mientras el fondo crece. */
    padding-bottom: 57px; 
}

/* 2. Despliegue del Texto */
.elementor-widget-sym_single_service .service-card-wrapper:hover .service-body {
    grid-template-rows: 1fr;
    opacity: 1;
}
.elementor-widget-sym_single_service .service-card-wrapper:hover .service-text {
    padding-top: 20px; /* Aire entre título y texto */
}

/* 3. Imagen a color */
.elementor-widget-sym_single_service .service-card-wrapper:hover .service-bg img {
    filter: grayscale(0%) contrast(1);
}

/* 4. Flecha rota */
.elementor-widget-sym_single_service .service-card-wrapper:hover .service-arrow:before {
    transform: rotate(45deg);
}




/* =========================================
   BLOG FORMATO VERTICAL (4:5)
   ========================================= */

/* 1. Forzar proporción en el enlace de la imagen */
.blog-item .post-media-wrapper a {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* FORZAR FORMATO VERTICAL */
    aspect-ratio: 4 / 5 !important; 
    /* Si el navegador es muy viejo y no soporta aspect-ratio, esto ayuda: */
    padding-bottom: 125%; 
    height: 0 !important;
}

/* 2. Ajustar la imagen para que llene el hueco */
.blog-item .post-media-wrapper img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    object-fit: cover !important; /* Recorta lo que sobre para no deformar */
    object-position: center !important;
    
    transition: transform 0.5s ease;
}

/* 3. Efecto Zoom al pasar el ratón */
.blog-item:hover .post-media-wrapper img {
    transform: scale(1.1);
}

/* 4. Asegurar que la fecha (si está dentro) se quede abajo */
.blog-item .post-media-wrapper .post-date-box {
    z-index: 10; /* Por encima de la imagen */
}




/* =========================================
   WIDGET: SINGLE SERVICE (TYPE 3 - CLEAN)
   ========================================= */

/* 1. La Tarjeta */
.elementor-widget-sym_single_service_type3 .service-card-link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    width: 100%;
    /* Altura mínima por si acaso */
    min-height: 400px;
    
    /* Imagen de Fondo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    text-decoration: none;
    padding: 40px;
    overflow: hidden;
    z-index: 1;
}

/* 2. DEGRADADO NEGRO FIJO (Para que se lea el texto blanco) */
/* Este no cambia, solo está para dar contraste */
.elementor-widget-sym_single_service_type3 .service-card-link:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Solo la parte de abajo */
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.8) 0%, 
        rgba(0, 0, 0, 0) 100%);
    z-index: -1;
}

/* 3. Estilos de Texto */
.elementor-widget-sym_single_service_type3 .service-subtitle {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    display: block;
}

/* Número */
.elementor-widget-sym_single_service_type3 .service-number {
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
    color: #ffffff;
    transition: color 0.3s ease;
}

/* Título */
.elementor-widget-sym_single_service_type3 .service-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Flecha */
.elementor-widget-sym_single_service_type3 .service-arrow:before {
    content: '\e839';
    font-family: 'fontello';
    font-size: 24px;
    color: #ffffff;
    
    /* Para que pueda rotar */
    display: inline-block; 
    transform-origin: center center;
    
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- ANIMACIONES HOVER (Solo elementos) --- */

/* 1. Número Naranja */
.elementor-widget-sym_single_service_type3 .service-card-link:hover .service-number {
    color: var(--sym-orange, #FF4713);
}

/* 2. Flecha Naranja y Rotada */
.elementor-widget-sym_single_service_type3 .service-card-link:hover .service-arrow:before {
    color: var(--sym-orange, #FF4713);
    transform: rotate(45deg);
}




/* =========================================
   EFECTO HOVER: DESPLAZAMIENTO EN LISTA DE ICONOS
   ========================================= */

/* Solo afecta a listas con la clase iconlist-slide */
.iconlist-slide .elementor-icon-list-item {
    transition: transform 0.28s cubic-bezier(.25,.8,.25,1);
}

.iconlist-slide .elementor-icon-list-item:hover {
    transform: translateX(6px);
}




/* ==========================================================================
   ESTILOS UNIFICADOS FORMULARIOS (CLEAN CHECKBOX & PRO BUTTON)
   IDs: 15, 17 (Fondo Oscuro) | 11, 13 (Fondo Claro)
   ========================================================================== */

/* -----------------------------------------------------------
   1. ESTRUCTURA COMÚN (Aplica a TODOS)
----------------------------------------------------------- */
._form_11, ._form_13, ._form_15, ._form_17 {
    background: transparent !important;
    padding: 0 !important;
    margin: 20px auto;
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    font-family: "Manrope", sans-serif !important;
}

/* Ocultar etiquetas superiores y branding */
._form_11 ._form-label:not(._checkbox-radio label),
._form_13 ._form-label:not(._checkbox-radio label),
._form_15 ._form-label:not(._checkbox-radio label),
._form_17 ._form-label:not(._checkbox-radio label),
._form_11 legend, ._form_13 legend, ._form_15 legend, ._form_17 legend,
._form_11 ._form_branding, ._form_13 ._form_branding, 
._form_15 ._form_branding, ._form_17 ._form_branding {
    display: none !important;
}

/* Estilo base de Inputs */
._form_11 input:not([type="submit"]):not([type="checkbox"]), ._form_11 textarea,
._form_13 input:not([type="submit"]):not([type="checkbox"]), ._form_13 textarea,
._form_15 input:not([type="submit"]):not([type="checkbox"]), ._form_15 textarea,
._form_17 input:not([type="submit"]):not([type="checkbox"]), ._form_17 textarea {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    margin-bottom: 25px !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
}

/* Estructura Checkbox (SIN BORDE) */
._form_11 input[type="checkbox"], ._form_13 input[type="checkbox"],
._form_15 input[type="checkbox"], ._form_17 input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 10px 0 0 !important;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    position: relative;
    top: 5px;
    border: none !important; /* <--- ADIÓS LÍNEAS DEL RECUADRO */
}

/* Checkbox Marcado (Fondo Naranja) */
._form_11 input[type="checkbox"]:checked, ._form_13 input[type="checkbox"]:checked,
._form_15 input[type="checkbox"]:checked, ._form_17 input[type="checkbox"]:checked {
    background-color: var(--sym-orange, #FF4713) !important;
    color: transparent !important;
}

/* El Tick Blanco */
._form_11 input[type="checkbox"]::before, ._form_13 input[type="checkbox"]::before,
._form_15 input[type="checkbox"]::before, ._form_17 input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em white;
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
._form_11 input[type="checkbox"]:checked::before, ._form_13 input[type="checkbox"]:checked::before,
._form_15 input[type="checkbox"]:checked::before, ._form_17 input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* Layout textos legales */
._form_11 ._row._checkbox-radio, ._form_13 ._row._checkbox-radio,
._form_15 ._row._checkbox-radio, ._form_17 ._row._checkbox-radio {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 15px !important;
}
.field-required { color: var(--sym-orange, #FF4713) !important; }


/* -----------------------------------------------------------
   2. GRUPO DARK (Forms 15, 17) -> Texto BLANCO
----------------------------------------------------------- */
._form_15 input:not([type="submit"]):not([type="checkbox"]), ._form_15 textarea,
._form_17 input:not([type="submit"]):not([type="checkbox"]), ._form_17 textarea {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}
._form_15 ::placeholder, ._form_17 ::placeholder { color: #ffffff !important; opacity: 0.7; }

/* Checkbox Dark: Fondo blanco semitransparente en lugar de borde */
._form_15 input[type="checkbox"], ._form_17 input[type="checkbox"] {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Textos */
._form_15 ._row._checkbox-radio label, ._form_15 ._row._checkbox-radio span,
._form_17 ._row._checkbox-radio label, ._form_17 ._row._checkbox-radio span {
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}


/* -----------------------------------------------------------
   3. GRUPO LIGHT (Forms 11, 13) -> Texto NEGRO
----------------------------------------------------------- */
._form_11 input:not([type="submit"]):not([type="checkbox"]), ._form_11 textarea,
._form_13 input:not([type="submit"]):not([type="checkbox"]), ._form_13 textarea {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: var(--sym-dark, #121C22) !important;
}
._form_11 ::placeholder, ._form_13 ::placeholder { color: var(--sym-dark, #121C22) !important; opacity: 0.6; }

/* Checkbox Light: Fondo gris claro en lugar de borde */
._form_11 input[type="checkbox"], ._form_13 input[type="checkbox"] {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

/* Textos */
._form_11 ._row._checkbox-radio label, ._form_11 ._row._checkbox-radio span,
._form_13 ._row._checkbox-radio label, ._form_13 ._row._checkbox-radio span {
    color: var(--sym-dark, #121C22) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}


/* -----------------------------------------------------------
   4. BOTÓN UNIFICADO (Estilo Minimal & Clean)
----------------------------------------------------------- */
._form_11 ._submit, ._form_13 ._submit,
._form_15 ._submit, ._form_17 ._submit {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    
    font-family: "Manrope", sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 15px 25px 15px 0 !important; 
    margin-top: 10px !important;
    width: auto !important;
    cursor: pointer !important;
    
    transition: color 0.3s ease !important;
}

/* Color de inicio según fondo */
._form_15 ._submit, ._form_17 ._submit { color: #FFFFFF !important; }
._form_11 ._submit, ._form_13 ._submit { color: var(--sym-dark, #121C22) !important; }

/* Icono Flecha */
._form_11 ._submit::after, ._form_13 ._submit::after,
._form_15 ._submit::after, ._form_17 ._submit::after {
    content: '\e82d'; 
    font-family: 'fontello';
    font-size: 14px !important; 
    line-height: 1;
    font-weight: normal !important;
    
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    
    color: inherit !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* HOVER: Todo Naranja y Flecha Gira */
._form_11 ._submit:hover, ._form_13 ._submit:hover,
._form_15 ._submit:hover, ._form_17 ._submit:hover {
    color: var(--sym-orange, #FF4713) !important;
}

._form_11 ._submit:hover::after, ._form_13 ._submit:hover::after,
._form_15 ._submit:hover::after, ._form_17 ._submit:hover::after {
    transform: translateY(-50%) rotate(-45deg) !important;
}

/* ==========================================================================
   FORMULARIOS ELEMENTOR (LIGHT / DARK)
   Clases del widget Form: sym-form-light  |  sym-form-dark
   ========================================================================== */

/* -----------------------------------------------------------
   1. BASE COMÚN
----------------------------------------------------------- */
.sym-form-light .elementor-form,
.sym-form-dark .elementor-form {
    font-family: "Manrope", sans-serif !important;
}

.sym-form-light .elementor-field-group,
.sym-form-dark .elementor-field-group {
    margin-bottom: 10px;
    padding: 0;
}

.sym-form-light .elementor-field-textual,
.sym-form-dark .elementor-field-textual {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    margin-bottom: 15px !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    width: 100%;
}

.sym-form-light .elementor-field-textual:focus,
.sym-form-dark .elementor-field-textual:focus {
    box-shadow: none !important;
    outline: none !important;
}

.sym-form-light textarea.elementor-field-textual,
.sym-form-dark textarea.elementor-field-textual {
    min-height: 140px;
    resize: vertical;
}

/* -----------------------------------------------------------
   2. ACCEPTANCE (estructura común)
----------------------------------------------------------- */
.sym-form-light .elementor-field-type-acceptance .elementor-field-subgroup,
.sym-form-dark .elementor-field-type-acceptance .elementor-field-subgroup {
    display: flex !important;
    align-items: flex-start !important;
}

.sym-form-light .elementor-field-type-acceptance input[type="checkbox"],
.sym-form-dark .elementor-field-type-acceptance input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 10px 0 0 !important;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    position: relative;
    top: 2px;
    border: none !important;
    flex-shrink: 0;
}

.sym-form-light .elementor-field-type-acceptance input[type="checkbox"]:checked,
.sym-form-dark .elementor-field-type-acceptance input[type="checkbox"]:checked {
    background-color: var(--sym-orange) !important;
}

.sym-form-light .elementor-field-type-acceptance input[type="checkbox"]::before,
.sym-form-dark .elementor-field-type-acceptance input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em white;
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.sym-form-light .elementor-field-type-acceptance input[type="checkbox"]:checked::before,
.sym-form-dark .elementor-field-type-acceptance input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.sym-form-light .elementor-field-type-acceptance label,
.sym-form-dark .elementor-field-type-acceptance label {
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.5;
    cursor: pointer;
    margin: 0;
}

/* Recuadro alrededor de los dos acceptance */
.sym-form-light .elementor-field-type-acceptance:first-of-type,
.sym-form-dark .elementor-field-type-acceptance:first-of-type {
    padding: 15px 15px 8px 15px;
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    margin-top: 20px;
    margin-bottom: 0 !important;
}

.sym-form-light .elementor-field-type-acceptance:last-of-type,
.sym-form-dark .elementor-field-type-acceptance:last-of-type {
    padding: 8px 15px 15px 15px;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    margin-bottom: 20px !important;
}

.sym-form-light .elementor-field-type-acceptance:first-of-type:last-of-type,
.sym-form-dark .elementor-field-type-acceptance:first-of-type:last-of-type {
    padding: 15px;
    border: 1px solid;
}

/* -----------------------------------------------------------
   3. VARIANTE LIGHT (fondo claro, texto oscuro)
----------------------------------------------------------- */
.sym-form-light .elementor-field-textual {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: var(--sym-dark) !important;
}

.sym-form-light .elementor-field-textual::placeholder {
    color: var(--sym-dark) !important;
    opacity: 0.6;
}

.sym-form-light .elementor-field-type-acceptance input[type="checkbox"] {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

.sym-form-light .elementor-field-type-acceptance,
.sym-form-light .elementor-field-type-acceptance label,
.sym-form-light .elementor-field-type-acceptance a {
    color: var(--sym-dark) !important;
}

.sym-form-light .elementor-field-type-acceptance:first-of-type,
.sym-form-light .elementor-field-type-acceptance:last-of-type {
    border-color: rgba(0, 0, 0, 0.2);
}

/* -----------------------------------------------------------
   4. VARIANTE DARK (fondo oscuro, texto blanco)
----------------------------------------------------------- */
.sym-form-dark .elementor-field-textual {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

.sym-form-dark .elementor-field-textual::placeholder {
    color: #ffffff !important;
    opacity: 0.8;
}

.sym-form-dark .elementor-field-type-acceptance input[type="checkbox"] {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.sym-form-dark .elementor-field-type-acceptance,
.sym-form-dark .elementor-field-type-acceptance label,
.sym-form-dark .elementor-field-type-acceptance a {
    color: #ffffff !important;
}

.sym-form-dark .elementor-field-type-acceptance:first-of-type,
.sym-form-dark .elementor-field-type-acceptance:last-of-type {
    border-color: rgba(255, 255, 255, 0.5);
}

/* -----------------------------------------------------------
   5. BOTÓN SUBMIT
----------------------------------------------------------- */
.sym-form-light .elementor-field-type-submit,
.sym-form-dark .elementor-field-type-submit {
    padding: 0 !important;
}

.sym-form-light .elementor-button,
.sym-form-dark .elementor-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    font-family: "Manrope", sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;

    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 15px 35px 15px 0 !important;
    margin-top: 10px !important;
    width: auto !important;
    cursor: pointer !important;

    transition: color 0.3s ease !important;
}

.sym-form-light .elementor-button .elementor-button-icon,
.sym-form-dark .elementor-button .elementor-button-icon {
    display: none !important;
}

.sym-form-light .elementor-button::after,
.sym-form-dark .elementor-button::after {
    content: '\e82d';
    font-family: 'fontello';
    font-size: 14px !important;
    line-height: 1;
    font-weight: normal !important;

    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    color: inherit !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.sym-form-light .elementor-button {
    color: var(--sym-dark) !important;
}

.sym-form-dark .elementor-button {
    color: #ffffff !important;
}

.sym-form-light .elementor-button:hover,
.sym-form-dark .elementor-button:hover {
    color: var(--sym-orange) !important;
    background: transparent !important;
}

.sym-form-light .elementor-button:hover::after,
.sym-form-dark .elementor-button:hover::after {
    transform: translateY(-50%) rotate(-45deg) !important;
}

/* -----------------------------------------------------------
   6. MENSAJES DEL FORM (success, error, validación)
----------------------------------------------------------- */

/* Mensaje principal (success / danger / warning) */
.sym-form-dark .elementor-message,
.sym-form-dark .elementor-message.elementor-message-success,
.sym-form-dark .elementor-message.elementor-message-danger,
.sym-form-dark .elementor-message.elementor-message-warning {
    color: #ffffff !important;
}

.sym-form-light .elementor-message,
.sym-form-light .elementor-message.elementor-message-success,
.sym-form-light .elementor-message.elementor-message-danger,
.sym-form-light .elementor-message.elementor-message-warning {
    color: var(--sym-dark) !important;
}

/* Validación de campo individual (cuando un required está vacío) */
.sym-form-dark .elementor-field-group .elementor-field-textual.elementor-error,
.sym-form-dark .elementor-message.elementor-message-danger {
    border-bottom-color: var(--sym-orange) !important;
}

.sym-form-dark .elementor-field-validation-error,
.sym-form-dark .elementor-error-message,
.sym-form-light .elementor-field-validation-error,
.sym-form-light .elementor-error-message {
    color: var(--sym-orange) !important;
    font-size: 13px !important;
    margin-top: 4px;
}