/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */




/* =========================================
   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
   ========================================= */

/* 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;
}




/* =========================================
   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;
}