.elementor-78 .elementor-element.elementor-element-125c50b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-78 .elementor-element.elementor-element-ad1c5ef{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-78 .elementor-element.elementor-element-ad1c5ef.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-78 .elementor-element.elementor-element-e40e768 img{opacity:1;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );box-shadow:0px 0px 50px 0px rgba(0,0,0,0.5);}.elementor-78 .elementor-element.elementor-element-8a52540{--display:flex;--justify-content:center;--overlay-opacity:0.5;}.elementor-78 .elementor-element.elementor-element-8a52540::before, .elementor-78 .elementor-element.elementor-element-8a52540 > .elementor-background-video-container::before, .elementor-78 .elementor-element.elementor-element-8a52540 > .e-con-inner > .elementor-background-video-container::before, .elementor-78 .elementor-element.elementor-element-8a52540 > .elementor-background-slideshow::before, .elementor-78 .elementor-element.elementor-element-8a52540 > .e-con-inner > .elementor-background-slideshow::before, .elementor-78 .elementor-element.elementor-element-8a52540 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-78 .elementor-element.elementor-element-8a52540.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-78 .elementor-element.elementor-element-335afdb .elementor-menu-toggle{margin:0 auto;}.elementor-78 .elementor-element.elementor-element-386e4de{--display:flex;--justify-content:center;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-78 .elementor-element.elementor-element-704cb56 .elementor-button{background-color:#6EC1E4;}.elementor-78 .elementor-element.elementor-element-704cb56.elementor-element{--align-self:center;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-78 .elementor-element.elementor-element-ad1c5ef{--width:25%;}.elementor-78 .elementor-element.elementor-element-8a52540{--width:50.463%;}}/* Start custom CSS for image, class: .elementor-element-e40e768 */.imagen-fusion {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.imagen-fusion::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,  #004C78, transparent 5%, transparent 95%, #004C78),
    linear-gradient(to bottom, #004C78, transparent 5%, transparent 95%, #004C78);
}/* End custom CSS */
/* Start custom CSS *//* ============================================================
   🎨 TEMA ÓPTICA — CSS PERSONALIZADO PARA ELEMENTOR PRO
   ============================================================
   
   INSTRUCCIONES DE USO:
   ─────────────────────
   Este archivo está dividido en MÓDULOS independientes.
   Puedes copiar TODO en Elementor > Custom CSS global,
   o copiar solo los módulos que necesites en cada widget/sección.
   
   DÓNDE PEGAR EN ELEMENTOR:
   
   1) CSS GLOBAL (aplica a toda la web):
      WordPress Admin → Apariencia → Personalizar → CSS Adicional
      O bien: Elementor → Hamburguesa (☰) → Ajustes del sitio → CSS personalizado
   
   2) CSS POR PÁGINA:
      Dentro del editor de Elementor → Hamburguesa (☰) → Ajustes de página → Avanzado → CSS personalizado
   
   3) CSS POR SECCIÓN/WIDGET:
      Click en la sección o widget → Pestaña "Avanzado" → Custom CSS
      NOTA: En este nivel, usa ".elementor-78" en lugar del .elementor-78 real.
      Ejemplo: .elementor-78 .mi-clase { color: red; }
   
   ============================================================ */


/* ============================================================
   MÓDULO 1: VARIABLES CSS (ROOT)
   ─────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Define los colores como variables reutilizables.
      Si algún día cambia un color, lo cambias SOLO aquí.
   ============================================================ */

:root {
    /* Paleta principal */
    --azul-profundo: #004C78;
    --turquesa: #00A6C2;
    --amarillo: #FFC845;
    --blanco: #FFFFFF;
    --gris-suave: #e9e8e8;

    /* Variantes de uso */
    --texto-principal: #004C78;
    --texto-body: rgba(0, 76, 120, 0.85);    /* Azul profundo al 85% */
    --texto-sobre-oscuro: #FFFFFF;
    --texto-sobre-amarillo: #004C78;
    --texto-secundario: #999999;
    --error: #E74C3C;
    --exito: #27AE60;

    /* Sombras */
    --sombra-card: 0 2px 12px rgba(0, 76, 120, 0.08);
    --sombra-card-hover: 0 8px 30px rgba(0, 76, 120, 0.15);
    --sombra-boton: 0 4px 15px rgba(255, 200, 69, 0.4);

    /* Transiciones */
    --transicion: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transicion-rapida: all 0.2s ease;

    /* Bordes */
    --radio-boton: 50px;      /* Botones pill / redondeados */
    --radio-card: 12px;
    --radio-input: 8px;

    /* Tipografía base */
    --font-heading: 'Montserrat', sans-serif;   /* Cambiar si usas otra */
    --font-body: 'Open Sans', sans-serif;        /* Cambiar si usas otra */
}


/* ============================================================
   MÓDULO 2: RESET Y BASE
   ─────────────────────
   📍 PEGAR EN: CSS Global
   📝 Estilos base del body, tipografía general,
      selección de texto, scrollbar.
   ============================================================ */

body {
    background-color: var(--blanco);
    color: var(--texto-body);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selección de texto personalizada */
::selection {
    background-color: var(--turquesa);
    color: var(--blanco);
}

::-moz-selection {
    background-color: var(--turquesa);
    color: var(--blanco);
}

/* Scrollbar personalizado (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gris-suave);
}

::-webkit-scrollbar-thumb {
    background: var(--turquesa);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--azul-profundo);
}

/* Scrollbar Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--turquesa) var(--gris-suave);
}


/* ============================================================
   MÓDULO 3: TIPOGRAFÍA — HEADINGS
   ────────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Controla el color y estilo de todos los títulos.
      Elementor permite override por widget, así que estos
      son los defaults globales.
   ============================================================ */

h1, .elementor-heading-title.elementor-size-xxl {
    color: var(--azul-profundo);
    font-family: var(--font-heading);
    font-weight: 700;
}

h2, .elementor-heading-title.elementor-size-xl {
    color: var(--turquesa);
    font-family: var(--font-heading);
    font-weight: 700;
}

h3, h4,
.elementor-heading-title.elementor-size-large,
.elementor-heading-title.elementor-size-medium {
    color: var(--azul-profundo);
    font-family: var(--font-heading);
    font-weight: 600;
}

h5, h6,
.elementor-heading-title.elementor-size-small {
    color: var(--turquesa);
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85em;
}

/* Línea decorativa bajo h2 (usa clase personalizada) */
.titulo-con-linea {
    position: relative;
    padding-bottom: 15px;
}

.titulo-con-linea::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--amarillo);
    border-radius: 2px;
}

/* Versión centrada */
.titulo-con-linea-center {
    position: relative;
    padding-bottom: 15px;
    text-align: center;
}

.titulo-con-linea-center::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--amarillo);
    border-radius: 2px;
}


/* ============================================================
   MÓDULO 4: ENLACES
   ─────────────────
   📍 PEGAR EN: CSS Global
   📝 Links en texto general. El hover amarillo es el
      "destello de lente" que hace memorable la interacción.
   ============================================================ */

a {
    color: var(--turquesa);
    text-decoration: none;
    transition: var(--transicion-rapida);
}

a:hover {
    color: var(--amarillo);
}

/* Links sobre fondo oscuro */
.fondo-oscuro a,
.fondo-azul a {
    color: var(--blanco);
}

.fondo-oscuro a:hover,
.fondo-azul a:hover {
    color: var(--amarillo);
}


/* ============================================================
   MÓDULO 5: BOTONES (CORREGIDO)
   ─────────────────
   📍 PEGAR EN: CSS Global
   📝 Selectores corregidos para la estructura real de Elementor.
      La clase se aplica al wrapper (.elementor-widget-button)
      pero los estilos deben llegar al <a> interno.
   ============================================================ */

/* ----- BOTÓN PRIMARIO ----- */
.btn-primario .elementor-button {
    background-color: var(--amarillo) !important;
    color: var(--azul-profundo) !important;
    border: 2px solid var(--amarillo) !important;
    border-radius: var(--radio-boton) !important;
    padding: 14px 36px !important;
    font-weight: 700 !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 14px !important;
    transition: var(--transicion) !important;
    position: relative;
    overflow: hidden;
}

.btn-primario .elementor-button:hover {
    background-color: var(--azul-profundo) !important;
    color: var(--blanco) !important;
    border-color: var(--azul-profundo) !important;
    box-shadow: var(--sombra-boton) !important;
    transform: translateY(-2px);
}

/* ----- BOTÓN SECUNDARIO (ghost) ----- */
.btn-secundario .elementor-button {
    background-color: transparent !important;
    color: var(--turquesa) !important;
    border: 2px solid var(--turquesa) !important;
    border-radius: var(--radio-boton) !important;
    padding: 14px 36px !important;
    font-weight: 700 !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 14px !important;
    transition: var(--transicion) !important;
}

.btn-secundario .elementor-button:hover {
    background-color: var(--turquesa) !important;
    color: var(--blanco) !important;
    transform: translateY(-2px);
}

/* ----- BOTÓN SOBRE FONDO OSCURO ----- */
.btn-sobre-oscuro .elementor-button,
.btn-sobre-oscuro .elementor-button .elementor-button-text,
.btn-sobre-oscuro .elementor-button .elementor-button-icon {
    background-color: var(--amarillo) !important;
    color: var(--azul-profundo) !important;
    border: 2px solid var(--amarillo) !important;
    border-radius: var(--radio-boton) !important;
    padding: 14px 36px !important;
    font-weight: 700 !important;
    transition: var(--transicion) !important;
}

.btn-sobre-oscuro .elementor-button .elementor-button-text,
.btn-sobre-oscuro .elementor-button .elementor-button-icon {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.btn-sobre-oscuro .elementor-button:hover,
.btn-sobre-oscuro .elementor-button:hover .elementor-button-text,
.btn-sobre-oscuro .elementor-button:hover .elementor-button-icon {
    background-color: var(--blanco) !important;
    color: var(--azul-profundo) !important;
    border-color: var(--blanco) !important;
}

.btn-sobre-oscuro .elementor-button:hover .elementor-button-text,
.btn-sobre-oscuro .elementor-button:hover .elementor-button-icon {
    background: none !important;
    border: none !important;
}

/* ----- BOTÓN PEQUEÑO ----- */
.btn-small .elementor-button {
    padding: 8px 20px !important;
    font-size: 12px !important;
}

/* ----- LIMPIAR WRAPPER -----
   Esto asegura que el div contenedor no herede
   estilos visuales que crean el efecto doble */
.btn-primario,
.btn-secundario,
.btn-sobre-oscuro {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ============================================================
   MÓDULO 6: HEADER / NAVEGACIÓN
   ──────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Estilos para el header con Elementor Pro Header Builder.
      Si usas el header del tema, puede necesitar ajustes.
   ============================================================ */

/* Fondo del header */
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-container,
.elementor-location-header .e-con {
    background-color: var(--azul-profundo) !important;
}

/* Links de navegación */
.elementor-nav-menu a,
.elementor-location-header .elementor-nav-menu a {
    color: var(--blanco) !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: var(--transicion-rapida) !important;
    position: relative;
}

/* Hover del nav: destello amarillo */
.elementor-nav-menu a:hover,
.elementor-nav-menu .elementor-item:hover {
    color: var(--amarillo) !important;
}

/* Link activo */
.elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-nav-menu .current-menu-item > a {
    color: var(--amarillo) !important;
}

/* Indicador de página activa (línea bajo el link) */
.elementor-nav-menu .elementor-item.elementor-item-active::after,
.elementor-nav-menu .current-menu-item > a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--amarillo);
    border-radius: 1px;
}

/* Header sticky con transparencia */
.header-sticky {
    transition: var(--transicion) !important;
}

.header-sticky.elementor-sticky--active {
    background-color: rgba(0, 76, 120, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Menú móvil hamburguesa */
.elementor-menu-toggle {
    color: var(--blanco) !important;
}

.elementor-menu-toggle:hover {
    color: var(--amarillo) !important;
}

/* Dropdown del menú mobile */
.elementor-nav-menu--dropdown {
    background-color: var(--azul-profundo) !important;
    border-top: 3px solid var(--amarillo) !important;
}


/* ============================================================
   MÓDULO 7: SECCIONES DE FONDO
   ─────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Clases para asignar a secciones de Elementor.
      En Elementor: Sección → Avanzado → CSS Classes
   ============================================================ */

/* Fondo blanco (default) */
.fondo-blanco {
    background-color: var(--blanco) !important;
}

/* Fondo gris suave (secciones alternas) */
.fondo-gris {
    background-color: var(--gris-suave) !important;
}

/* Fondo azul profundo */
.fondo-azul {
    background-color: var(--azul-profundo) !important;
}

.fondo-azul h1, .fondo-azul h2, .fondo-azul h3,
.fondo-azul h4, .fondo-azul h5, .fondo-azul h6,
.fondo-azul p, .fondo-azul span, .fondo-azul li {
    color: var(--blanco) !important;
}

.fondo-azul h2 {
    color: var(--blanco) !important;
}

/* Fondo turquesa (testimonios, CTAs) */
.fondo-turquesa {
    background-color: var(--turquesa) !important;
}

.fondo-turquesa h1, .fondo-turquesa h2, .fondo-turquesa h3,
.fondo-turquesa h4, .fondo-turquesa p, .fondo-turquesa span {
    color: var(--blanco) !important;
}

/* Fondo amarillo (banners de oferta) */
.fondo-amarillo {
    background-color: var(--amarillo) !important;
}

.fondo-amarillo h1, .fondo-amarillo h2, .fondo-amarillo h3,
.fondo-amarillo h4, .fondo-amarillo p, .fondo-amarillo span {
    color: var(--azul-profundo) !important;
}

/* Overlay azul profundo sobre imagen (para hero) */
.hero-overlay {
    position: relative;
}

.hero-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 76, 120, 0.80);
    z-index: 1;
}

.hero-overlay > .elementor-container,
.hero-overlay > .e-con-inner {
    position: relative;
    z-index: 2;
}


/* ============================================================
   MÓDULO 8: CARDS DE PRODUCTOS / SERVICIOS
   ─────────────────────────────────────────
   📍 PEGAR EN: CSS Global o en sección específica
   📝 Aplica a contenedores de Elementor con la clase asignada.
      En Elementor: Container/Columna → Avanzado → CSS Classes
   ============================================================ */

.card-producto {
    background: var(--blanco);
    border: 1px solid var(--gris-suave);
    border-radius: var(--radio-card);
    padding: 0;
    overflow: hidden;
    transition: var(--transicion);
    box-shadow: var(--sombra-card);
}

.card-producto:hover {
    border-color: var(--turquesa);
    box-shadow: var(--sombra-card-hover);
    transform: translateY(-5px);
}

/* Card de servicio (exámenes, consultas) */
.card-servicio {
    background: var(--blanco);
    border: 1px solid var(--gris-suave);
    border-radius: var(--radio-card);
    padding: 30px;
    text-align: center;
    transition: var(--transicion);
    position: relative;
    overflow: hidden;
}

.card-servicio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--turquesa);
    transform: scaleX(0);
    transition: var(--transicion);
}

.card-servicio:hover {
    box-shadow: var(--sombra-card-hover);
    transform: translateY(-5px);
}

.card-servicio:hover::before {
    transform: scaleX(1);
}

/* Icono dentro de card de servicio */
.card-servicio .elementor-icon {
    color: var(--turquesa) !important;
    font-size: 48px !important;
    margin-bottom: 15px;
    transition: var(--transicion);
}

.card-servicio:hover .elementor-icon {
    color: var(--amarillo) !important;
    transform: scale(1.1);
}


/* ============================================================
   MÓDULO 9: BADGES Y ETIQUETAS
   ─────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Pequeñas etiquetas para marcar productos o servicios.
      Usar en un widget de texto con la clase asignada.
   ============================================================ */

.badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-heading);
}

.badge-nuevo {
    background-color: var(--amarillo);
    color: var(--azul-profundo);
}

.badge-popular {
    background-color: var(--turquesa);
    color: var(--blanco);
}

.badge-oferta {
    background-color: var(--azul-profundo);
    color: var(--amarillo);
}


/* ============================================================
   MÓDULO 10: FORMULARIOS
   ──────────────────────
   📍 PEGAR EN: CSS Global
   📝 Aplica a formularios de Elementor Forms.
      El borde turquesa en focus indica "el ojo se enfoca".
   ============================================================ */

/* Inputs y textareas */
.elementor-field-textual,
.elementor-field-textual input,
.elementor-field-textual textarea,
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
    border: 2px solid var(--gris-suave) !important;
    border-radius: var(--radio-input) !important;
    padding: 12px 16px !important;
    font-family: var(--font-body) !important;
    color: var(--texto-principal) !important;
    background: var(--blanco) !important;
    transition: var(--transicion-rapida) !important;
    font-size: 15px !important;
}

.elementor-field-group input:focus,
.elementor-field-group textarea:focus,
.elementor-field-group select:focus {
    border-color: var(--turquesa) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 166, 194, 0.15) !important;
}

/* Placeholder */
.elementor-field-group input::placeholder,
.elementor-field-group textarea::placeholder {
    color: var(--texto-secundario) !important;
    font-style: italic;
}

/* Labels */
.elementor-field-label {
    color: var(--azul-profundo) !important;
    font-weight: 600 !important;
    font-family: var(--font-heading) !important;
    margin-bottom: 6px !important;
}

/* Botón submit del formulario */
.elementor-button[type="submit"],
.elementor-field-group .elementor-button {
    background-color: var(--amarillo) !important;
    color: var(--azul-profundo) !important;
    border: none !important;
    border-radius: var(--radio-boton) !important;
    padding: 14px 40px !important;
    font-weight: 700 !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: var(--transicion) !important;
}

.elementor-button[type="submit"]:hover,
.elementor-field-group .elementor-button:hover {
    background-color: var(--azul-profundo) !important;
    color: var(--blanco) !important;
}

/* Mensajes de error */
.elementor-message.elementor-message-danger {
    color: var(--error) !important;
}

/* Mensaje de éxito */
.elementor-message.elementor-message-success {
    color: var(--exito) !important;
}


/* ============================================================
   MÓDULO 11: FOOTER
   ─────────────────
   📍 PEGAR EN: CSS Global
   📝 Footer con el mismo azul profundo del header.
      Consistencia visual que "enmarca" la página.
   ============================================================ */

.elementor-location-footer .elementor-section,
.elementor-location-footer .e-con {
    background-color: var(--azul-profundo) !important;
}

.elementor-location-footer h1,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4,
.elementor-location-footer h5,
.elementor-location-footer h6 {
    color: var(--blanco) !important;
}

.elementor-location-footer p,
.elementor-location-footer span,
.elementor-location-footer li {
    color: rgba(255, 255, 255, 0.75) !important;
}

.elementor-location-footer a {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: var(--transicion-rapida);
}

.elementor-location-footer a:hover {
    color: var(--amarillo) !important;
}

/* Iconos sociales en footer */
.elementor-location-footer .elementor-social-icon {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--blanco) !important;
    transition: var(--transicion) !important;
}

.elementor-location-footer .elementor-social-icon:hover {
    background-color: var(--amarillo) !important;
    color: var(--azul-profundo) !important;
}

/* Línea divisora en footer */
.elementor-location-footer .elementor-divider-separator {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Barra inferior de copyright */
.footer-copyright {
    background-color: rgba(0, 0, 0, 0.15) !important;
    padding: 15px 0 !important;
}

.footer-copyright p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}


/* ============================================================
   MÓDULO 12: TESTIMONIOS
   ──────────────────────
   📍 PEGAR EN: CSS de la sección de testimonios
   📝 Usa clase "seccion-testimonios" en la sección.
      Fondo turquesa con citas en blanco.
   ============================================================ */

.seccion-testimonios {
    background-color: var(--turquesa) !important;
    position: relative;
}

.seccion-testimonios .elementor-testimonial-content {
    color: var(--blanco) !important;
    font-size: 18px !important;
    font-style: italic !important;
    line-height: 1.7 !important;
}

.seccion-testimonios .elementor-testimonial-name {
    color: var(--amarillo) !important;
    font-weight: 700 !important;
}

.seccion-testimonios .elementor-testimonial-job {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Comillas decorativas */
.seccion-testimonios .elementor-testimonial-wrapper::before {
    content: '"';
    font-size: 120px;
    color: rgba(255, 255, 255, 0.15);
    font-family: Georgia, serif;
    position: absolute;
    top: -20px;
    left: 20px;
    line-height: 1;
}


/* ============================================================
   MÓDULO 13: BLOCKQUOTES / CITAS
   ──────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Citas con borde amarillo — el "hallazgo visual".
   ============================================================ */

blockquote,
.elementor-blockquote__content {
    border-left: 4px solid var(--amarillo) !important;
    padding: 20px 25px !important;
    margin: 20px 0 !important;
    background: rgba(255, 200, 69, 0.05);
    border-radius: 0 var(--radio-input) var(--radio-input) 0;
    color: var(--azul-profundo) !important;
    font-style: italic;
    font-size: 1.1em;
}


/* ============================================================
   MÓDULO 14: DIVIDERS / SEPARADORES
   ──────────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Líneas limpias que no distraen.
   ============================================================ */

hr,
.elementor-divider-separator {
    border-color: var(--gris-suave) !important;
}

/* Divider decorativo con acento */
.divider-acento .elementor-divider-separator {
    border-color: var(--turquesa) !important;
    border-width: 2px !important;
    width: 60px !important;
}


/* ============================================================
   MÓDULO 15: BANNER DE OFERTAS
   ────────────────────────────
   📍 PEGAR EN: CSS de la sección del banner
   📝 Usa clase "banner-oferta" en la sección.
      Franja amarilla llamativa para promociones.
   ============================================================ */

.banner-oferta {
    background-color: var(--amarillo) !important;
    padding: 20px 0 !important;
}

.banner-oferta h2,
.banner-oferta h3,
.banner-oferta p {
    color: var(--azul-profundo) !important;
    margin: 0 !important;
}

.banner-oferta .elementor-button {
    background-color: var(--azul-profundo) !important;
    color: var(--blanco) !important;
    border-radius: var(--radio-boton) !important;
}

.banner-oferta .elementor-button:hover {
    background-color: var(--blanco) !important;
    color: var(--azul-profundo) !important;
}


/* ============================================================
   MÓDULO 16: ANIMACIONES Y EFECTOS
   ─────────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Micro-interacciones que dan vida a la web.
      Efecto "destello" en elementos clave.
   ============================================================ */

/* Efecto brillo/destello en botones primarios */
.btn-primario .elementor-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.btn-primario .elementor-button:hover::after {
    left: 100%;
}

/* Efecto pulse para elementos de atención */
@keyframes pulse-turquesa {
    0% { box-shadow: 0 0 0 0 rgba(0, 166, 194, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(0, 166, 194, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 166, 194, 0); }
}

.pulse {
    animation: pulse-turquesa 2s infinite;
}

/* Fade in al hacer scroll (se activa con Elementor Motion Effects) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}


/* ============================================================
   MÓDULO 17: RESPONSIVE
   ─────────────────────
   📍 PEGAR EN: CSS Global
   📝 Ajustes para móvil y tablet.
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .card-servicio {
        padding: 20px;
    }
    
    .btn-primario,
    .btn-secundario {
        padding: 12px 28px !important;
        font-size: 13px !important;
    }
}

/* Móvil */
@media (max-width: 767px) {
    h1 {
        font-size: 28px !important;
    }
    
    h2 {
        font-size: 24px !important;
    }
    
    .btn-primario,
    .btn-secundario {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
    }
    
    .card-producto,
    .card-servicio {
        margin-bottom: 20px;
    }

    /* En móvil, el sticky no tiene blur (performance) */
    .header-sticky.elementor-sticky--active {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: var(--azul-profundo) !important;
    }
}


/* ============================================================
   MÓDULO 18: UTILIDADES RÁPIDAS
   ─────────────────────────────
   📍 PEGAR EN: CSS Global
   📝 Clases de utilidad para aplicar rápidamente en Elementor.
      Sección/Widget → Avanzado → CSS Classes
   ============================================================ */

/* Colores de texto */
.texto-azul { color: var(--azul-profundo) !important; }
.texto-turquesa { color: var(--turquesa) !important; }
.texto-amarillo { color: var(--amarillo) !important; }
.texto-blanco { color: var(--blanco) !important; }
.texto-gris { color: var(--texto-secundario) !important; }

/* Fondos */
.bg-azul { background-color: var(--azul-profundo) !important; }
.bg-turquesa { background-color: var(--turquesa) !important; }
.bg-amarillo { background-color: var(--amarillo) !important; }
.bg-blanco { background-color: var(--blanco) !important; }
.bg-gris { background-color: var(--gris-suave) !important; }

/* Bordes */
.borde-turquesa { border: 2px solid var(--turquesa) !important; }
.borde-amarillo { border: 2px solid var(--amarillo) !important; }
.borde-gris { border: 1px solid var(--gris-suave) !important; }

/* Sombras */
.con-sombra { box-shadow: var(--sombra-card) !important; }
.con-sombra-fuerte { box-shadow: var(--sombra-card-hover) !important; }

/* Bordes redondeados */
.redondeado { border-radius: var(--radio-card) !important; }
.redondeado-full { border-radius: 50px !important; }
.redondeado-circulo { border-radius: 50% !important; }/* End custom CSS */