.elementor-kit-7{--e-global-color-primary:#2C68FF;--e-global-color-secondary:#0E1A2F;--e-global-color-text:#3A4A5F;--e-global-color-accent:#25C199;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-size:30px;--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-size:26px;--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-size:22px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-weight:700;background-color:#D9E7FF;color:var( --e-global-color-text );font-family:"Inter", Sans-serif;font-size:28px;font-weight:900;text-transform:uppercase;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:var( --e-global-color-primary );}.elementor-kit-7 a:hover{color:var( --e-global-color-accent );}.elementor-kit-7 h1{color:var( --e-global-color-primary );font-family:"Inter", Sans-serif;}.elementor-kit-7 h2{color:var( --e-global-color-secondary );font-family:"Inter", Sans-serif;}.elementor-kit-7 h3{color:var( --e-global-color-text );font-family:"Inter", Sans-serif;}.elementor-kit-7 h4{color:var( --e-global-color-text );font-family:"Inter", Sans-serif;}.elementor-kit-7 h5{color:var( --e-global-color-text );font-family:"Inter", Sans-serif;}.elementor-kit-7 h6{color:var( --e-global-color-text );font-family:"Inter", Sans-serif;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{font-family:"Inter", Sans-serif;color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =============================== */
/* VARIABLES MODO DÍA (DEFAULT)    */
/* =============================== */
:root {
  --bg: #F5F7FA;
  --section: #FFFFFF;
  --text: #3A4A5F;
  --text-muted: #6D7A88;
  --border: #E1E6ED;
  --accent: #25C199;

  /* Colores especiales para headings con clase .fixed-heading */
  --fixed-heading-color: #ffffff;      /* DÍA → BLANCO */
}

/* =============================== */
/* VARIABLES MODO NOCHE            */
/* =============================== */
:root[data-theme="dark"] {
  --bg: #0A1424;
  --section: #131C2B;
  --text: #C6CFDA;
  --text-muted: #8FA1B8;
  --border: #1F2A3B;
  --accent: #30D9A5;

  --fixed-heading-color: #2C68FF;     /* NOCHE → CELESTE */
}

/* =============================== */
/* FONDO BASE DEL SITIO            */
/* =============================== */
body, html {
  background-color: var(--bg) !important;
}

/* =============================== */
/* TEXTO BASE                      */
/* =============================== */
body, p, span {
  color: var(--text) !important;
}

/* =============================== */
/* HERO CON VIDEO DE FONDO         */
/* =============================== */

/* Contenedor hero (EL CONTAINER con clase hero-section) */
.hero-section {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5;   /* aprox. 1920x600 */
  max-height: 80vh;       /* nunca más alto que 80% de la pantalla */
  overflow: hidden;
}

/* quitar fondos internos que tapen el vídeo */
.hero-section .e-con,
.hero-section .elementor-container,
.hero-section .elementor-widget-container {
  background: transparent !important;
}

/* el widget HTML y su contenedor llenan el hero */
.hero-section .elementor-widget-html,
.hero-section .elementor-widget-html .elementor-widget-container,
.hero-section .hero-video-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Wrapper de los vídeos */
.hero-video-wrapper {
  z-index: 1;
  pointer-events: none; /* no bloquea clics */
}

/* Vídeos día/noche */
.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Día por defecto */
.bg-video-day { opacity: 1; }
.bg-video-night { opacity: 0; }

/* Noche */
:root[data-theme="dark"] .bg-video-day { opacity: 0; }
:root[data-theme="dark"] .bg-video-night { opacity: 1; }

/* Transición */
.bg-video-day,
.bg-video-night {
  transition: opacity 0.4s ease;
}

/* Overlay entre vídeo y contenido */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.25); /* día */
}

:root[data-theme="dark"] .hero-section::before {
  background: rgba(0, 0, 0, 0.55); /* noche */
}

/* contenido “normal” del hero por encima del vídeo + overlay */
.hero-section > .e-con-inner,
.hero-section > .e-con,
.hero-section > *:not(.elementor-widget-html) {
  position: relative;
  z-index: 2;
}

/* =============================== */
/* HERO BILD (marco encima del vídeo) */
/* =============================== */

.hero-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* Para que no bloquee clicks */
}

.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Si quieres que no recorte */
}

/* =============================== */
/* HEADINGS ESPECIALES (.fixed-heading) */
/* usan su propio color día/noche  */
/* =============================== */

.elementor-widget-heading.fixed-heading .elementor-heading-title,
.fixed-heading.elementor-heading-title,
.fixed-heading .elementor-heading-title {
  color: var(--fixed-heading-color) !important;
}

/* =============================== */
/* CSS IMPORTADO (NO TOCAR LÓGICA) */
/* =============================== */

/* === Ajusta solo este color de la flecha en hover === */
#card1{ --icon-hover-color: #1e1647; }

/* === Tarjeta: transición + performance === */
#card1{
  position: relative; z-index: 1;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
  transform: translateZ(0);         /* acelera GPU */
  backface-visibility: hidden;
  overflow: visible;                /* que no se recorte la sombra */
}

/* === LIFT (3 vías): hover normal, overlay link y clase JS .is-hovered === */
@media (hover: hover) and (pointer: fine){
  #card1:hover,
  #card1:focus-within{
    transform: translate3d(0,-10px,0);
    box-shadow: 0 20px 30px rgba(0,0,0,.12);
  }
}
@supports .elementor-kit-7(:has(*)){
  @media (hover: hover) and (pointer: fine){
    #card1:has(.e-con-link:hover){
      transform: translate3d(0,-10px,0);
      box-shadow: 0 20px 30px rgba(0,0,0,.12);
    }
  }
}
/* si usas el script que añade .is-hovered */
#card1.is-hovered{
  transform: translate3d(0,-10px,0);
  box-shadow: 0 20px 30px rgba(0,0,0,.12);
}

/* === Icono: no tocamos color base; solo preparamos y forzamos en hover === */
#card1 .elementor-icon,
#card1 .elementor-icon i,
#card1 .elementor-icon svg,
#card1 .elementor-button-icon,
#card1 .elementor-button-icon i,
#card1 .elementor-button-icon svg,
#card1 .elementor-icon-list-icon,
#card1 .elementor-icon-list-icon i,
#card1 .elementor-icon-list-icon svg{
  transition: color .25s ease, fill .25s ease, stroke .25s ease;
}
/* asegura que cualquier SVG use currentColor */
#card1 .elementor-icon svg,
#card1 .elementor-icon svg *,
#card1 .elementor-button-icon svg,
#card1 .elementor-button-icon svg *,
#card1 .elementor-icon-list-icon svg,
#card1 .elementor-icon-list-icon svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* color de la flecha en hover de la TARJETA */
@media (hover: hover) and (pointer: fine){
  #card1:hover .elementor-icon,
  #card1:hover .elementor-icon i,
  #card1:hover .elementor-icon svg,
  #card1:hover .elementor-icon svg *,
  #card1:hover .elementor-button-icon,
  #card1:hover .elementor-button-icon i,
  #card1:hover .elementor-button-icon svg,
  #card1:hover .elementor-button-icon svg *,
  #card1:hover .elementor-icon-list-icon,
  #card1:hover .elementor-icon-list-icon i,
  #card1:hover .elementor-icon-list-icon svg,
  #card1:hover .elementor-icon-list-icon svg *{
    color: var(--icon-hover-color) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}
@supports .elementor-kit-7(:has(*)){
  @media (hover: hover) and (pointer: fine){
    #card1:has(.e-con-link:hover) .elementor-icon,
    #card1:has(.e-con-link:hover) .elementor-icon i,
    #card1:has(.e-con-link:hover) .elementor-icon svg,
    #card1:has(.e-con-link:hover) .elementor-icon svg *,
    #card1:has(.e-con-link:hover) .elementor-button-icon,
    #card1:has(.e-con-link:hover) .elementor-button-icon i,
    #card1:has(.e-con-link:hover) .elementor-button-icon svg,
    #card1:has(.e-con-link:hover) .elementor-button-icon svg *,
    #card1:has(.e-con-link:hover) .elementor-icon-list-icon,
    #card1:has(.e-con-link:hover) .elementor-icon-list-icon i,
    #card1:has(.e-con-link:hover) .elementor-icon-list-icon svg,
    #card1:has(.e-con-link:hover) .elementor-icon-list-icon svg *{
      color: var(--icon-hover-color) !important;
      fill: currentColor !important;
      stroke: currentColor !important;
    }
  }
}
/* con clase JS */
#card1.is-hovered .elementor-icon,
#card1.is-hovered .elementor-icon i,
#card1.is-hovered .elementor-icon svg,
#card1.is-hovered .elementor-icon svg *,
#card1.is-hovered .elementor-button-icon,
#card1.is-hovered .elementor-button-icon i,
#card1.is-hovered .elementor-button-icon svg,
#card1.is-hovered .elementor-button-icon svg *,
#card1.is-hovered .elementor-icon-list-icon,
#card1.is-hovered .elementor-icon-list-icon i,
#card1.is-hovered .elementor-icon-list-icon svg,
#card1.is-hovered .elementor-icon-list-icon svg *{
  color: var(--icon-hover-color) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ===================================== */
/* FORZAR COLORES PARA TODO .fixed-heading */
/* ===================================== */
html body .fixed-heading,
html body .fixed-heading * {
  color: var(--fixed-heading-color) !important;
}

/* =============================== */
/* BARRA DE MENÚ DÍA / NOCHE       */
/* =============================== */

/* Fondo y borde de la barra (modo día) */
.main-header {
  background-color: rgba(255, 255, 255, 0.92); /* casi blanco, un poco translúcido */
  backdrop-filter: blur(10px);                 /* efecto glass suave */
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

/* Fondo en modo noche */
:root[data-theme="dark"] .main-header {
  background-color: rgba(10, 20, 36, 0.92);    /* mismo tono que --bg pero un poco más sólido */
  border-bottom-color: var(--border);
}

/* =============================== */
/* LINKS DEL MENÚ WORDPRESS        */
/* =============================== */

/* Color base de los ítems del menú (día y noche) */
.main-menu a {
  color: var(--text) !important;      /* usa el color de texto según modo */
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Hover y item activo */
.main-menu a:hover,
.main-menu .current-menu-item > a,
.main-menu .current_page_item > a {
  color: var(--accent) !important;    /* usa el acento, también cambia con el tema */
}

/* =============================== */
/* LOGO DÍA / NOCHE                */
/* =============================== */

/* Opcional: aseguramos que se comporten como bloques normales */
.main-header .main-logo img {
  display: block;
}

/* Por defecto: se ve el logo de día */
.main-header .logo-day {
  display: block;
}
.main-header .logo-night {
  display: none;
}

/* En modo noche: intercambiamos */
:root[data-theme="dark"] .main-header .logo-day {
  display: none;
}
:root[data-theme="dark"] .main-header .logo-night {
  display: block;
}

/* ===================================== */
/* OVERRIDE FINAL HERO VIDEO DIA / NOCHE */
/* ===================================== */

.hero-section {
  position: relative;
  overflow: hidden;
}

/* El wrapper del vídeo ocupa todo el hero y va por debajo del contenido */
.hero-video-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Los dos vídeos ocupan todo y se solapan */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease;
}

/* Estado por defecto → DÍA */
.bg-video-day {
  opacity: 1;
  visibility: visible;
}
.bg-video-night {
  opacity: 0;
  visibility: hidden;
}

/* MODO NOCHE: solo se ve el vídeo night */
:root[data-theme="dark"] .bg-video-day {
  opacity: 0;
  visibility: hidden;
}
:root[data-theme="dark"] .bg-video-night {
  opacity: 1;
  visibility: visible;
}

/* ===================================== */
/* FLIP CARDS .flip-card-fixed           */
/* Delantera: mantiene imagen            */
/* Trasera: azul oscuro + texto blanco   */
/* ===================================== */

/* Cara DELANTERA: sólo fijamos el color del título
   (para que no se vuelva celeste raro con el theme) */
.flip-card-fixed .elementor-flip-box__front .elementor-flip-box__layer__title,
.flip-card-fixed .elementor-flip-box__front .elementor-flip-box__layer__title span {
  color: #3A4A5F !important;  /* gris oscuro legible sobre la foto */
}

/* Cara TRASERA: fondo azul oscuro constante */
.flip-card-fixed .elementor-flip-box__back {
  background-color: #0A1424 !important;   /* azul noche sólido */
  color: #FFFFFF !important;              /* texto blanco por defecto */
}

/* Título en la cara trasera */
.flip-card-fixed .elementor-flip-box__back .elementor-flip-box__layer__title,
.flip-card-fixed .elementor-flip-box__back .elementor-flip-box__layer__title span {
  color: #FFFFFF !important;
}

/* Descripción en la cara trasera */
.flip-card-fixed .elementor-flip-box__back .elementor-flip-box__description {
  color: #E5EDF9 !important;  /* blanco un pelín suavizado */
}

/* Por si hay iconos en la cara trasera */
.flip-card-fixed .elementor-flip-box__back .elementor-icon,
.flip-card-fixed .elementor-flip-box__back .elementor-icon i,
.flip-card-fixed .elementor-flip-box__back .elementor-icon svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* =============================== */
/* BOTÓN DÍA/NOCHE FIJO           */
/* =============================== */

/* Base del botón (día y noche) – clase en el WIDGET: theme-toggle */
.theme-toggle .elementor-button {
  background-color: #25C199 !important;   /* verde acento */
  color: #3A4A5F !important;              /* texto gris oscuro */
  border-radius: 6px;
  border: none;
  padding: 0.7em 1.8em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease,
    filter 0.2s ease;
}

/* Texto interno del botón */
.theme-toggle .elementor-button .elementor-button-text {
  color: #3A4A5F !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Mismo color en modo noche (no cambiamos nada) */
:root[data-theme="dark"] .theme-toggle .elementor-button {
  background-color: #25C199 !important;
  color: #3A4A5F !important;
}
:root[data-theme="dark"] .theme-toggle .elementor-button .elementor-button-text {
  color: #3A4A5F !important;
}

/* Hover en ambos modos – OJO: el hover va en el <a>, no en el widget */
.theme-toggle .elementor-button:hover,
.theme-toggle .elementor-button:focus {
  background-color: #22B58F !important;        /* un pelín más oscuro */
  transform: translateY(-2px) scale(1.02);     /* se levanta un poco */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);  /* sombra más fuerte */
  filter: none;
}

/* =============================== */
/* ESTILO GENERAL DE BOTÓN (CTA)   */
/* para botones normales con clase .btn-main */
/* =============================== */

/* Base – cubre dos casos:
   1) Clase en el widget: .btn-main .elementor-button
   2) Clase directamente en el <a>: .elementor-button.btn-main */
.btn-main .elementor-button,
.elementor-button.btn-main {
  background-color: #25C199 !important;   /* mismo verde que el toggle */
  color: #3A4A5F !important;              /* texto gris oscuro */
  border-radius: 6px;
  border: none;
  padding: 0.7em 1.8em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease,
    filter 0.2s ease;
}

/* Texto interno (por si Elementor mete color dentro) */
.btn-main .elementor-button .elementor-button-text,
.elementor-button.btn-main .elementor-button-text {
  color: #3A4A5F !important;
}

/* Igual en modo noche (no cambiamos estilo visual) */
:root[data-theme="dark"] .btn-main .elementor-button,
:root[data-theme="dark"] .elementor-button.btn-main {
  background-color: #25C199 !important;
  color: #3A4A5F !important;
}
:root[data-theme="dark"] .btn-main .elementor-button .elementor-button-text,
:root[data-theme="dark"] .elementor-button.btn-main .elementor-button-text {
  color: #3A4A5F !important;
}

/* Hover – mismo efecto que el toggle */
.btn-main .elementor-button:hover,
.btn-main .elementor-button:focus,
.elementor-button.btn-main:hover,
.elementor-button.btn-main:focus {
  background-color: #22B58F !important;      /* un pelín más oscuro */
  transform: translateY(-2px) scale(1.02);   /* se levanta un poquito */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  filter: none;
}

/* =============================== */
/* ICONOS SOCIALES FOOTER         */
/* =============================== */

/* Base: tamaño y forma */
.footer-social .elementor-social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;          /* sin pastilla sólida */
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

/* Icono en sí (por si Elementor mete color dentro del svg) */
.footer-social .elementor-social-icon i,
.footer-social .elementor-social-icon svg {
  color: inherit;
  fill: currentColor;
}

/* Modo día: borde y color adaptados al texto */
:root:not([data-theme="dark"]) .footer-social .elementor-social-icon {
  border-color: rgba(0, 0, 0, 0.18);
  color: #3A4A5F;                         /* mismo gris que el texto */
}

/* Hover: pastilla de color acento, icono blanco */
.footer-social .elementor-social-icon:hover {
  background-color: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* =============================== */
/* ICON LIST EN FOOTER             */
/* =============================== */

/* Base: alineación y espaciado */
.footer-icon-list .elementor-icon-list-items {
  gap: 0.4rem;
}

.footer-icon-list .elementor-icon-list-item {
  margin-bottom: 0.25rem;
}

/* Quitamos decoraciones raras */
.footer-icon-list .elementor-icon-list-item a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Icono + texto comparten color */
.footer-icon-list .elementor-icon-list-icon i,
.footer-icon-list .elementor-icon-list-icon svg,
.footer-icon-list .elementor-icon-list-text {
  transition: color 0.2s ease, fill 0.2s ease;
}

/* MODO DÍA: gris oscuro como el texto base */
:root:not([data-theme="dark"]) .footer-icon-list .elementor-icon-list-icon i,
:root:not([data-theme="dark"]) .footer-icon-list .elementor-icon-list-icon svg,
:root:not([data-theme="dark"]) .footer-icon-list .elementor-icon-list-text {
  color: #3A4A5F !important;
  fill: #3A4A5F !important;
}

/* MODO NOCHE: blanco suave para contraste */
:root[data-theme="dark"] .footer-icon-list .elementor-icon-list-icon i,
:root[data-theme="dark"] .footer-icon-list .elementor-icon-list-icon svg,
:root[data-theme="dark"] .footer-icon-list .elementor-icon-list-text {
  color: #E5EDF9 !important;
  fill: #E5EDF9 !important;
}

/* HOVER: icono + texto al color acento */
.footer-icon-list .elementor-icon-list-item a:hover .elementor-icon-list-icon i,
.footer-icon-list .elementor-icon-list-item a:hover .elementor-icon-list-icon svg,
.footer-icon-list .elementor-icon-list-item a:hover .elementor-icon-list-text {
  color: var(--accent) !important;
  fill: var(--accent) !important;
}/* End custom CSS */