/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1757054215
Updated: 2025-09-05 06:36:55

*/

/*BOTONES*/
/* --- VARIABLES --- */
.Btn-animated-dark,
.Btn-animated-light {
  --btn-ancho: 8px;               
  --btn-velocidad: 0.5s;          
  --btn-color-naranja: #FF763F;   
  --btn-color-marron: #752201;    
}

/* --- ESTILO BASE DEL BOTÓN (<a>) --- */
.Btn-animated-dark .elementor-button,
.Btn-animated-light .elementor-button {
  position: relative !important;
  overflow: visible !important; 
  transition: all var(--btn-velocidad) ease !important;
  border-right: var(--btn-ancho) solid var(--btn-color-naranja) !important;
  display: inline-block !important; 
}

/* --- EL PSEUDO-ELEMENTO (AFTER) --- */
.Btn-animated-dark .elementor-button::after,
.Btn-animated-light .elementor-button::after {
  content: "" !important;
  position: absolute !important;
  top: 0; right: 0; bottom: 0;
  width: var(--btn-ancho);
  
  /* ESTADO INICIAL (SIN HOVER) */
  background-color: transparent !important;
  opacity: 0;
  
  /* CAMBIO CLAVE: Empezamos desplazados a la DERECHA (ocultos sobre el borde) */
  transform: translateX(var(--btn-ancho)) !important;
  
  transition: 
    transform var(--btn-velocidad) ease, 
    background-color var(--btn-velocidad) ease, 
    opacity var(--btn-velocidad) ease !important;
    
  pointer-events: none;
  z-index: 10;
}

/* --- HOVER GLOBAL --- */

/* 1. Cambio de borde a marrón */
.Btn-animated-dark:hover .elementor-button,
.Btn-animated-light:hover .elementor-button {
  border-right: var(--btn-ancho) solid var(--btn-color-marron) !important;
}

/* 2. Animación del after */
.Btn-animated-dark:hover .elementor-button::after,
.Btn-animated-light:hover .elementor-button::after {
  opacity: 1 !important;
  background-color: var(--btn-color-naranja) !important;

  /* CAMBIO CLAVE: Al hacer hover, vamos a 0 (pegado al borde, sin hueco) */
  transform: translateX(0) !important;
}

/* --- COLORES DE FONDO ESPECÍFICOS --- */
.Btn-animated-dark:hover .elementor-button {
  background-color: #ffffff !important;
}

.Btn-animated-light:hover .elementor-button {
  background-color: #0e0e0e !important;
}
/*FIN - BOTONES*/
/*----------- INICIO - EFECTO HOVER 2 CONTENEDORES TEXTO Y BOTÓN--------------*/
/* Cuando el mouse pasa sobre .Card-text_container, cambia el color de fondo del botón */
.animated-button:hover .elementor-button {
    background-color: white;
    border-right: 8px solid #752201;
    transition: all .5s ease;
}

/* Cuando el mouse pasa sobre .Card-text_container, mueve el pseudo-elemento y cambia el borde */
.animated-button::after {
    transform: translateX(-8px); /* Mueve el pseudo-elemento */
    background-color: #FF763F; /* Cambia el color del borde */
}
/*----------- FIN - EFECTO HOVER 2 CONTENEDORES TEXTO Y BOTÓN ----------------*/
/*----------- INICIO - FORMS TEXTOS LEGALES ----------------*/
/* Colores - Variables*/
/* --- TEMA NEGRO (Por defecto) --- */
.mi-acordeon-legal_negro {
    --legal-texto-ppal: #f3f3f3;
    --legal-texto-sec: #BEBBBD;
    --legal-borde: #494949;
    --legal-icono-fill: #BEBBBD;
    --legal-icono-stroke: #f3f3f3;
    --legal-enlace: #FF763F;
}
/* --- TEMA BLANCO (Invierte los colores aquí) --- */
.mi-acordeon-legal_blanco {
    --legal-texto-ppal: #0E0E0E; /* Texto oscuro */
    --legal-texto-sec: #383838;  /* Texto secundario gris */
    --legal-borde: #DCDCDC;      /* Borde gris claro */
    --legal-icono-fill: #494949; /* Icono oscuro */
    --legal-icono-stroke: #0E0E0E;
    --legal-enlace: #FF763F;     /* Naranja se mantiene */
}
/* Estructura */
/* Tipografía y reset base */
.mi-acordeon-legal_negro,
.mi-acordeon-legal_blanco {
    font-family: 'Roboto', sans-serif !important;
    width: 100%; /* Asegura ancho completo */
}
/* --- CABECERA (SUMMARY) --- */
.mi-acordeon-legal_negro summary,
.mi-acordeon-legal_blanco summary {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 0 !important;
    cursor: pointer !important;
    outline: none !important;
    list-style: none !important;
    font-weight: 300 !important;
    color: var(--legal-texto-ppal) !important;
}
/* Quitar flecha por defecto (Navegadores) */
.mi-acordeon-legal_negro summary::-webkit-details-marker,
.mi-acordeon-legal_blanco summary::-webkit-details-marker {
    display: none !important;
}
/* Título "Información básica..." */
.mi-acordeon-legal_negro .titulo-legal,
.mi-acordeon-legal_blanco .titulo-legal {
    font-size: 14px !important;
    color: inherit !important; /* Hereda del summary */
}
/* Contenedor del título e icono izquierdo */
.mi-acordeon-container {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 6px !important; /* Un poco más de espacio */
}
/* --- ICONO IZQUIERDO (El de la "i") --- */
/* Seleccionamos por la clase que tiene tu HTML o cualquier SVG dentro del container */
.mi-acordeon-legal_negro .mi-acordeon-legal_negro-icon,
.mi-acordeon-legal_blanco .mi-acordeon-legal_negro-icon { 
    width: 13px !important;
    height: 13px !important;
    fill: var(--legal-icono-fill) !important; /* Usa la variable */
}
/* --- ICONOS DERECHA (+ / -) --- */
.mi-acordeon-legal_negro .icono-toggle svg,
.mi-acordeon-legal_blanco .icono-toggle svg {
    width: 24px !important;
    height: 20px !important;
    fill: none !important;
    color: var(--legal-icono-stroke) !important; /* Usa variable */
}
/* Lógica para ocultar/mostrar + y - */
.mi-acordeon-legal_negro details[open] .icono-mas,
.mi-acordeon-legal_blanco details[open] .icono-mas {
    display: none !important;
}
.mi-acordeon-legal_negro details:not([open]) .icono-menos,
.mi-acordeon-legal_blanco details:not([open]) .icono-menos {
    display: none !important;
}
/*Contenido desplegable*/
.mi-acordeon-legal_negro .contenido-legal,
.mi-acordeon-legal_blanco .contenido-legal {
    padding-bottom: 20px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--legal-texto-sec) !important;
}
/* Filas */
.mi-acordeon-legal_negro .fila-legal,
.mi-acordeon-legal_blanco .fila-legal {
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    gap: 25px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--legal-borde) !important;
}
/* Columna Izquierda (Títulos: Responsable, Domicilio...) */
.mi-acordeon-legal_negro .col-titulo,
.mi-acordeon-legal_blanco .col-titulo {
    font-weight: 500 !important;
    color: var(--legal-texto-ppal) !important;
}
/* Enlaces */
.mi-acordeon-legal_negro .col-dato a,
.mi-acordeon-legal_blanco .col-dato a {
    text-decoration: underline !important;
    color: var(--legal-enlace) !important;
}
/*Mobile*/
@media (max-width: 600px) {
    .mi-acordeon-legal_negro .fila-legal,
    .mi-acordeon-legal_blanco .fila-legal {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        margin-bottom: 15px !important;
    }
}
/*----------- FIN - FORMS TEXTOS LEGALES ----------------*/