@charset "UTF-8";
/* apps/myfuture/static/myfuture/scss/_general.scss */
:root {
  /* ============================================
     DARK THEME — Midnight Blue, Sky Electric & Lime
     Basado en el sistema v5 de la presentación
  ============================================ */
  /* Colores de acento DHA */
  --color-type: #c2ff05;
  --color-font-night: #F1EDDF;
  --color-night-font: #F1EDDF;
  --color-focus: #ff006e;
  --color-focus-text: #ff006e;
  --color-topic: #053c76;
  --color-topic-hover: #033060;
  --color-vivid-sky-blue: #4cc9f0;
  --color-megusto: #730071;
  --color-type-hex1: rgb(194, 255, 100);
  --pres-bg-1: #03162b;
  /* Fuentes */
  --font-headline: "sofia-pro", sans-serif;
  --font-main: "sofia-pro", sans-serif;
  /* Tamaños */
  --fz-sm: 18px;
  --fz-md: 20px;
  --fz-heading: 32px;
  /* Ruido */
  --noise: url("/static/myfuture/img/noise.97d2a93664bc.png");
  /* Fondos (gradaciones de azul corporativo, no negro) */
  --bg-body: #03162b;
  --bg-main: #053c76;
  --bg-card: rgba(10, 74, 143, 0.4);
  --border-card: rgba(76, 201, 240, 0.3);
  --card-shadow: 0 15px 35px rgba(3, 22, 43, 0.8);
  --card-shadow-hover: 0 0 25px rgba(76, 201, 240, 0.2), 0 15px 45px rgba(0, 0, 0, 0.6);
  /* Gradiente principal para text-clip y acentos */
  --gradient-main: linear-gradient(135deg, #4cc9f0 0%, #c2ff05 100%);
  --gradient-focus: linear-gradient(135deg, #ff006e 0%, #ff5ca1 100%);
  /* Texto secundario */
  --text-sub: #C8C0AC;
  --text-muted: #8E887A;
}

/* ============================================
   LIGHT THEME — Limpieza Técnica con Sky Blue
   Basado en el sistema v5 de la presentación
============================================ */
html[data-theme=light] {
  /* Fondos: blanco azulado, no papel plano */
  --bg-body: #f4f9ff;
  --bg-main: #f4f9ff;
  --bg-card: #ffffff;
  /* Borde más definido y sombra en dos niveles (cercana + difusa): separan las capas
     blancas del fondo azul-lavanda, que con el borde anterior (#c2d9f8) se fundían. */
  --border-card: #b7cbec;
  --card-shadow: 0 1px 2px rgba(5, 60, 118, 0.08), 0 14px 28px -14px rgba(5, 60, 118, 0.28);
  --card-shadow-hover: 0 2px 4px rgba(5, 60, 118, 0.08), 0 22px 40px -16px rgba(0, 80, 214, 0.4);
  /* Acentos adaptados. El azul baja de #0062ff a #0050d6: sobre fondos tintados
     el anterior quedaba en 4,3:1, por debajo de AA. */
  --color-type: #0050d6;
  --color-font-night: #0a2540; /* casi negro-azul — titulos y body */
  --color-night-font: #0a2540;
  --color-focus: #e8005e; /* magenta ligeramente más saturado en light */
  /* Magenta para TEXTO pequeño: #e8005e llegaba a 3,4:1 sobre las tarjetas azul claro; este
     alcanza 4,6:1. Los rellenos (botones con texto blanco) siguen con --color-focus. */
  --color-focus-text: #c4004a;
  --color-topic: #053c76;
  --color-topic-hover: #0056b3;
  --color-vivid-sky-blue: #0050d6; /* azul primario vibrante */
  --color-megusto: #7c3aed; /* violeta más profundo */
  --color-type-hex1: #0050d6;
  /* Gradiente para text-clip en light: azul → violeta. El final cian (#00c2ff) llegaba
     a ~2:1 sobre el fondo claro y lavaba las cifras y los títulos con degradado. */
  --gradient-main: linear-gradient(135deg, #0050d6 0%, #6d28d9 100%);
  --gradient-focus: linear-gradient(135deg, #e8005e 0%, #ff5ca1 100%);
  /* Jerarquía tipográfica — 3 niveles bien diferenciados */
  --text-sub: #2c4a72; /* cuerpo de párrafo, texto secundario */
  --text-muted: #4f627d; /* metadata, labels, fechas (antes #6b7e99: 3,6:1) */
}

/* Isla oscura dentro del tema claro: bloques azul marino (pie de página) que conservan los
   tokens del tema oscuro, para que texto, acentos y logo cian se lean sobre fondo oscuro. */
/* ============================================
   ESTILOS BASE
============================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  background: linear-gradient(180deg, var(--bg-body) 0%, var(--bg-main) 100%);
  font-family: var(--font-main);
  color: var(--color-font-night);
  line-height: 1.5;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  transition: background 0.5s ease, color 0.3s ease;
}

main {
  background: linear-gradient(180deg, var(--bg-body) 0%, var(--bg-main) 100%);
  overflow: hidden;
  width: 100vw;
}

html[data-theme=light] body {
  background: linear-gradient(160deg, #f4f9ff 0%, #e1efff 100%);
  background: linear-gradient(160deg, #f4f9ff 0%, #dce8f8 50%, #e8f0fb 100%);
}

html[data-theme=light] main {
  background: linear-gradient(160deg, #f4f9ff 0%, #e1efff 100%);
  background: linear-gradient(160deg, #f4f9ff 0%, #dce8f8 50%, #e8f0fb 100%);
}

/* Efecto de ruido — reducido en light */
html[data-theme=light] main:after {
  opacity: 0.02;
}

a {
  text-decoration: none;
  color: var(--color-font-night);
  z-index: 100;
}

p {
  color: var(--color-font-night);
  font-family: var(--font-main);
  font-size: var(--fz-sm);
  line-height: 150%;
  letter-spacing: 1px;
}

/* ============================================
   TÍTULOS CON TEXT-CLIP
============================================ */
h1, h2, h3, h4 {
  font-family: var(--font-headline);
  color: var(--color-font-night);
}

h2 {
  font-size: var(--fz-heading);
}

h3 {
  color: var(--color-vivid-sky-blue);
  font-family: var(--font-main);
  letter-spacing: 1.5px;
  font-weight: 400;
  line-height: 150%;
}

h5 {
  color: var(--color-font-night);
}

/* Text-clip gradient en títulos principales */
.text-gradient {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.text-gradient--focus {
  background: var(--gradient-focus);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Efecto de Ruido */
main:after {
  animation: grain 3s steps(10) infinite;
  background-image: var(--noise);
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.15;
  position: fixed;
  top: -100%;
  width: 300%;
  pointer-events: none;
}

@keyframes grain {
  0%, 100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  20% {
    transform: translate(-15%, 5%);
  }
  30% {
    transform: translate(7%, -25%);
  }
  40% {
    transform: translate(-5%, 25%);
  }
  50% {
    transform: translate(-15%, 10%);
  }
  60% {
    transform: translate(15%, 0%);
  }
  70% {
    transform: translate(0%, 15%);
  }
  80% {
    transform: translate(3%, 35%);
  }
  90% {
    transform: translate(-10%, 10%);
  }
}
/* Hero title en light — text-clip */
html[data-theme=light] .hero-main__title {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

html[data-theme=light] .hero-title {
  color: var(--color-topic);
  text-shadow: none;
}

/* ============================================
   CTA BUTTONS
============================================ */
.hero-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 18px 36px;
  background: var(--color-focus);
  color: #fff;
  font-family: var(--font-main);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(255, 0, 110, 0.3);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hero-cta .btn-primary:hover {
  background: #ff1a7a;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(255, 0, 110, 0.5);
}

/* CTA Bottom */
.timeline-cta {
  text-align: center;
  padding: 60px 20px;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  background: var(--color-topic);
}
.timeline-cta h3 {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-vivid-sky-blue);
  margin-bottom: 24px;
}

html[data-theme=light] .timeline-cta {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  box-shadow: var(--card-shadow);
}
html[data-theme=light] .timeline-cta h3 {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-contact {
  display: inline-block;
  padding: 16px 40px;
  background: var(--color-focus);
  color: #fff;
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 30px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}
.btn-contact i {
  padding-left: 5px;
}
.btn-contact:hover {
  background: #ff1a7a;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 25px rgba(255, 0, 110, 0.35);
}

/* apps/myfuture/static/myfuture/scss/_nav.scss */
/* =========================================================
   UPPER NAV - Barra superior con social + switchers
========================================================= */
.upper-nav {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 0;
  font-size: 0.875rem;
  position: relative;
  z-index: 1001;
}
[data-theme=light] .upper-nav {
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(5, 60, 118, 0.06);
}

.upper-nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  overflow: visible;
  gap: 10vw;
  align-items: center;
}

.dha-ticker {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.dha-ticker .ticker-container {
  display: flex;
  align-items: center;
  overflow: hidden;
  flex: 1;
}

.badge-fijo {
  color: var(--color-night-font);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.7rem;
  margin-right: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.trending-controls {
  display: none;
}

#trending-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#trending-list li {
  display: none;
  color: var(--color-type);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  z-index: 1000;
}
html[data-theme=light] #trending-list li {
  color: var(--color-focus-text);
}
#trending-list li.show {
  display: inline-block;
  animation: slideCity 0.5s ease-out;
}

.pulse-icon {
  position: relative;
  display: inline-block;
  color: var(--color-type);
  animation: pulse-animation 1s infinite;
}
html[data-theme=light] .pulse-icon {
  color: var(--color-focus);
}
.pulse-icon i {
  position: relative;
  z-index: 2;
}

@keyframes pulse-animation {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes slideCity {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* Ajuste para Móviles */
@media (max-width: 768px) {
  .dha-ticker {
    flex: 1;
  }
  .ticker-container {
    flex-direction: column;
  }
  .badge-fijo {
    padding: 2px 5px;
  }
  #ticker-items li {
    font-size: 0.75rem;
  }
  .trending-controls {
    display: none; /* Esto oculta las flechas */
  }
}
.upper-social {
  display: flex;
  gap: 16px;
}

.upper-social a {
  color: var(--color-night-font);
  font-size: 1rem;
  opacity: 0.8;
  transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.upper-social a:hover {
  color: var(--color-type);
  opacity: 1;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .upper-social {
    gap: 12px;
  }
  .upper-social a {
    font-size: 0.875rem;
  }
}
.upper-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.upper-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  color: var(--color-night-font);
  text-decoration: none;
  border-radius: 20px;
  transition: all 0.3s ease;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
}
html[data-theme=light] .upper-toggle {
  background: rgba(5, 60, 118, 0.06);
  border: 1px solid rgba(5, 60, 118, 0.1);
}
.upper-toggle i {
  font-size: 1rem;
}
.upper-toggle span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.upper-toggle:hover {
  background: var(--color-type);
  color: var(--color-topic);
  transform: translateY(-2px);
}
html[data-theme=light] .upper-toggle:hover {
  background: var(--color-focus);
  color: #fff;
}
@media (max-width: 768px) {
  .upper-toggle {
    padding: 6px 10px;
  }
  .upper-toggle span {
    display: none;
  }
}

/* =========================================================
   UPPER NAV — Admin dropdown
   Agregar dentro de _nav.scss, después de .upper-toggle
========================================================= */
.upper-admin-menu {
  position: relative;
}

.upper-admin-trigger {
  cursor: pointer;
  border: none;
  background: rgba(255, 255, 255, 0.1);
}
.upper-admin-trigger .upper-admin-chevron {
  font-size: 0.65rem;
  transition: transform 0.3s ease;
}
.upper-admin-trigger:hover .upper-admin-chevron, .upper-admin-trigger.active .upper-admin-chevron {
  transform: rotate(180deg);
}

.upper-admin-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: rgba(42, 42, 64, 0.98);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s ease;
  z-index: 1100;
}
[data-theme=light] .upper-admin-dropdown {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.upper-admin-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.upper-admin-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: var(--color-night-font);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.upper-admin-item i {
  font-size: 0.9rem;
  opacity: 0.8;
}
.upper-admin-item:hover {
  background: var(--color-type);
  color: var(--color-topic);
  padding-left: 26px;
}
html[data-theme=light] .upper-admin-item:hover {
  background: var(--color-focus);
  color: #fff;
}
.upper-admin-item:hover i {
  opacity: 1;
}

/* apps/myfuture/static/myfuture/scss/_footer.scss */
footer {
  width: 100%;
  font-size: 0.9rem;
  padding: 48px 5% 0;
  background: rgba(0, 0, 0, 0.3);
  /* Tema claro: el pie es un bloque azul marino que cierra la página. Antes heredaba
     rgba(0,0,0,.3) sobre fondo claro (un gris sucio) y el logo cian quedaba a ~1,7:1. */
}
footer .footer-main {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 32px;
}
footer .footer-brand .footer-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}
footer .footer-nap,
footer .footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
footer .footer-nap-item,
footer .footer-link {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}
footer .footer-nap-item i,
footer .footer-link i {
  color: var(--color-type);
  font-size: 1rem;
}
footer .footer-nap-item:hover,
footer .footer-link:hover {
  color: white;
}
footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
  text-align: center;
}
footer .footer-bottom p {
  font-size: 0.8rem;
  opacity: 0.5;
  margin: 0;
}
html[data-theme=light] footer {
  --color-font-night: #F1EDDF;
  --color-night-font: #F1EDDF;
  --color-type: #c2ff05;
  --color-vivid-sky-blue: #4cc9f0;
  --text-sub: #C8C0AC;
  --text-muted: #8E887A;
  --bg-card: rgba(10, 74, 143, 0.4);
  --border-card: rgba(76, 201, 240, 0.3);
  background: var(--color-topic);
  border-top: 0;
  box-shadow: none;
}
html[data-theme=light] footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
html[data-theme=light] footer .footer-bottom p {
  opacity: 0.75;
}
html[data-theme=light] footer .footer-nap-item, html[data-theme=light] footer .footer-link {
  color: var(--color-font-night);
}
html[data-theme=light] footer .footer-nap-item i, html[data-theme=light] footer .footer-link i {
  color: var(--color-type);
}
html[data-theme=light] footer .footer-nap-item:hover, html[data-theme=light] footer .footer-link:hover {
  color: #fff;
}

/* =========================================================
   MAIN NAV - Con dropdown de servicios
========================================================= */
.main-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: top 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  /* Riel inferior: una línea fina sobre la que se "enciende" la página activa (ver .is-active).
     En tema claro lo sustituye una línea de acento en degradado (_light-theme.scss). */
}
.main-nav.scrolled {
  background: rgba(3, 22, 43, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
[data-theme=light] .main-nav {
  background: transparent;
}
[data-theme=light] .main-nav.scrolled {
  background: rgba(244, 249, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(5, 60, 118, 0.08);
}
.main-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(76, 201, 240, 0.18);
  pointer-events: none;
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
}

.logo {
  z-index: 1001;
}
.logo img {
  height: 50px;
  width: auto;
  transition: filter 0.3s ease;
}

.menu-desktop {
  display: flex;
  align-items: center;
  gap: 32px;
  /* Por encima de la luz de la página activa (.nav-indicator, z-index 1): el desplegable la tapa */
  position: relative;
  z-index: 2;
}
@media (max-width: 968px) {
  .menu-desktop {
    display: none;
  }
}

.menu-link {
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-night-font);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  position: relative;
  transition: color 0.3s ease;
  /* PÁGINA ACTIVA — "canal encendido": un segmento lima → cian se enciende sobre el riel de la
     cabecera, con un haz de luz que sube desde el riel hacia el enlace, como el canal activo de una
     sala de control. La marca `.is-active` la pone _main_nav.html. El enlace se mantiene en su
     sitio (no hay pastilla ni relleno); solo gana peso. Medidas: la barra mide 100 px y el
     enlace ~38 px centrado, así que el riel queda 31 px bajo el enlace. */
}
.menu-link i {
  font-size: 1.125rem;
}
.menu-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-type);
  transition: width 0.3s ease;
}
html[data-theme=light] .menu-link::after {
  background: var(--color-focus);
}
.menu-link:hover {
  color: var(--color-type);
}
.menu-link:hover::after {
  width: 100%;
}
html[data-theme=light] .menu-link:hover {
  color: var(--color-focus);
}
html[data-theme=light] .menu-link:hover::after {
  background: var(--color-focus);
}
.menu-link.is-active {
  font-weight: 700;
}
/* Luz de la página activa: un elemento aparte (nav.js lo coloca bajo el enlace activo), fuera de lo
   que anima AOS. Aparece solo con opacidad y ancho, sin movimiento vertical. */
.nav-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, #c2ff05, #4cc9f0);
  /* El brillo sube (desplazamiento negativo): nada se derrama bajo la barra */
  box-shadow: 0 -4px 16px rgba(194, 255, 5, 0.8), 0 0 4px #c2ff05;
  opacity: 0;
  transform: scaleX(0.3);
  transform-origin: 50% 100%;
  transition: opacity 0.5s ease 0.6s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
  pointer-events: none;
  z-index: 1;
  /* Haz: nace en el riel (estrecho, más intenso) y se abre hacia el enlace */
}
.nav-indicator::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 100%;
  height: 26px;
  background: linear-gradient(180deg, rgba(194, 255, 5, 0) 0%, rgba(194, 255, 5, 0.3) 100%);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
}
.nav-indicator.is-on {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-indicator {
    transition: none;
  }
}

/* Dropdown de servicios */
.menu-item.has-dropdown {
  position: relative;
}
.menu-item.has-dropdown .dropdown-icon {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}
.menu-item.has-dropdown:hover .dropdown-icon {
  transform: rotate(180deg);
}
.menu-item.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  min-width: 280px;
  background: rgba(42, 42, 64, 0.98);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 12px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: all 0.3s ease;
  z-index: 100;
}
[data-theme=light] .dropdown-menu {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.dropdown-item {
  display: block;
  padding: 12px 24px;
  color: var(--color-night-font);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.dropdown-item:hover {
  background: var(--color-type);
  color: var(--color-topic);
  padding-left: 28px;
}
html[data-theme=light] .dropdown-item:hover {
  background: var(--color-focus);
  color: #fff;
}

/* =========================================================
   MOBILE BURGER MENU
========================================================= */
.burger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
  /* Tema claro: con el menú abierto, la X queda sobre el panel azul marino (no sobre la barra
     clara), así que cambia a crema; cerrado conserva el trazo navy. */
}
@media (max-width: 968px) {
  .burger {
    display: block;
  }
}
.burger svg {
  width: 50px;
  height: 50px;
}
.burger .line {
  fill: none;
  stroke: var(--color-night-font);
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.burger .line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.burger .line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}
.burger .line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.burger.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
.burger.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}
.burger.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
html[data-theme=light] .burger.opened .line {
  stroke: #F1EDDF;
}

/* Burger menu overlay */
.burger-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: var(--color-back);
  z-index: 1000;
  transition: right 0.4s ease;
  overflow-y: auto;
}

/* Mostrar cuando burger tiene clase burger-active */
.burger-menu.burger-active {
  right: 0;
}

.sub-decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: var(--gradient-1a);
  opacity: 0.3;
}

.burger-sub-menu {
  position: relative;
  padding: 250px 5% 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: linear-gradient(90deg, hsl(236, 100%, 8%) 0%, hsl(211, 100%, 28%) 100%);
  border-bottom: 2px solid var(--color-focus);
  /* Ocultar logo duplicado en mobile */
  /* Tema claro: el panel conserva su degradado azul marino, así que los enlaces deben
     conservar los tokens oscuros (antes: texto navy sobre fondo navy, 1,04:1). */
}
.burger-sub-menu .logo {
  display: none;
}
.burger-sub-menu a {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-night-font);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}
.burger-sub-menu a:hover {
  color: var(--color-type);
  padding-left: 12px;
}
html[data-theme=light] .burger-sub-menu {
  --color-font-night: #F1EDDF;
  --color-night-font: #F1EDDF;
  --color-type: #c2ff05;
  --color-vivid-sky-blue: #4cc9f0;
  --text-sub: #C8C0AC;
  --text-muted: #8E887A;
  --bg-card: rgba(10, 74, 143, 0.4);
  --border-card: rgba(76, 201, 240, 0.3);
}

.mobile-actions {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-actions a {
  font-size: 1rem;
  border: none;
  padding: 8px 16px;
  background: var(--color-type);
  color: var(--color-topic);
  border-radius: 20px;
}

.login-modal-container {
  max-width: 460px;
}

.login-header-icon {
  background: linear-gradient(135deg, #1a1a2e 0%, #053c76 100%) !important;
  border: 1px solid rgba(194, 255, 5, 0.3);
  box-shadow: 0 8px 32px rgba(5, 60, 118, 0.5) !important;
}

.login-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.login-password-wrapper .form-input {
  padding-right: 50px;
}

.login-eye-btn {
  position: absolute;
  right: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-night-font);
  opacity: 0.5;
  transition: opacity 0.2s ease;
  padding: 0;
  display: flex;
  align-items: center;
}
.login-eye-btn:hover {
  opacity: 1;
}
.login-eye-btn i {
  font-size: 1.1rem;
}

.login-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(255, 0, 110, 0.1);
  border: 1px solid rgba(255, 0, 110, 0.3);
  border-radius: 10px;
  color: var(--color-focus);
  font-size: 0.9rem;
  font-weight: 500;
}
.login-error i {
  font-size: 1rem;
  flex-shrink: 0;
}

.login-btn {
  background: linear-gradient(135deg, #053c76 0%, #1a6dc2 100%) !important;
  box-shadow: 0 8px 24px rgba(5, 60, 118, 0.4) !important;
}
.login-btn:hover:not(:disabled) {
  box-shadow: 0 12px 32px rgba(5, 60, 118, 0.6) !important;
  transform: translateY(-3px);
}

/* apps/myfuture/static/myfuture/scss/contact-modal.scss */
/* HONEYPOT FIELDS - Ocultos pero accesibles para bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  /* Alternativa: hacer parecer campo real pero invisible */
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.contact-modal.active {
  display: flex;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  cursor: pointer;
  animation: fadeIn 0.3s ease;
}
[data-theme=light] .modal-overlay {
  background: rgba(0, 0, 0, 0.6);
}

.modal-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: 95vh;
  overflow-y: hidden;
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(5, 60, 118, 0.95) 100%);
  border: 1px solid rgba(194, 255, 5, 0.2);
  border-radius: 24px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme=light] .modal-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 247, 250, 0.98) 100%);
  border-color: rgba(37, 99, 235, 0.2);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}
[data-theme=light] .modal-close {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}
.modal-close i {
  font-size: 1.25rem;
  color: var(--color-night-font);
}
.modal-close:hover {
  background: var(--color-focus);
  border-color: var(--color-focus);
  transform: rotate(90deg);
}
.modal-close:hover i {
  color: #fff;
}

.modal-content {
  padding: 60px 50px;
}
@media (max-width: 768px) {
  .modal-content {
    padding: 50px 30px;
  }
}

/* Header */
.modal-header {
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  align-items: flex-end;
  column-gap: 20px;
  justify-content: center;
}
.modal-header .header-title-wrapper {
  flex: 4;
  display: flex;
  flex-direction: column;
}

.header-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--color-focus) 0%, #ff1a7a 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(255, 0, 110, 0.4);
}
.header-icon i {
  font-size: 2rem;
  color: #fff;
}

.modal-title {
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-night-font);
  text-wrap: nowrap;
}

.modal-subtitle {
  font-size: 1.125rem;
  color: var(--color-night-font);
  opacity: 0.8;
}

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-night-font);
}
.form-group label .required {
  color: var(--color-focus);
}
.form-group label .optional {
  font-size: 0.875rem;
  font-weight: 400;
  opacity: 0.6;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-night-font);
  font-family: var(--font-main);
  font-size: 1rem;
  transition: all 0.3s ease;
}
[data-theme=light] .form-input,
[data-theme=light] .form-textarea {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.15);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-night-font);
  opacity: 0.5;
}
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-type);
  background: rgba(194, 255, 5, 0.05);
}
[data-theme=light] .form-input:focus,
[data-theme=light] .form-textarea:focus {
  background: rgba(37, 99, 235, 0.05);
  border-color: var(--color-type);
}
.form-input.error,
.form-textarea.error {
  border-color: var(--color-focus);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.field-error {
  font-size: 0.875rem;
  color: var(--color-focus);
  display: none;
}
.field-error.show {
  display: block;
}

/* Actions */
.form-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .form-actions {
    flex-direction: column;
  }
}

.privacy-policy-link {
  font-size: 0.875rem;
  color: var(--color-type);
  text-decoration: underline;
  margin-left: 4px;
}
.privacy-policy-link:hover {
  color: var(--color-vivid-sky-blue);
}

.btn-submit,
.btn-whatsapp {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 32px;
  font-family: var(--font-main);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-submit i,
.btn-whatsapp i {
  font-size: 1.25rem;
}

.btn-submit {
  background: linear-gradient(135deg, var(--color-focus) 0%, #ff1a7a 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 0, 110, 0.4);
}
.btn-submit:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(255, 0, 110, 0.6);
}
.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-submit.loading .btn-text {
  display: none;
}
.btn-submit.loading::after {
  content: "";
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.btn-whatsapp {
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
}
.btn-whatsapp:hover {
  background: #20BA5A;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.6);
}

.form-note {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-night-font);
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.form-note i {
  color: var(--color-type);
}

/* Success Message */
.success-message {
  text-align: center;
  padding: 40px 20px;
}

.success-icon {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #00C9A7 0%, #00B894 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
  animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.success-icon i {
  font-size: 3rem;
  color: #fff;
}

.success-icon-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
}

.success-message h3 {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-night-font);
  margin-bottom: 16px;
}

.success-message p {
  font-size: 1.125rem;
  color: var(--color-night-font);
  opacity: 0.85;
  margin-bottom: 32px;
}

.btn-close-success {
  padding: 14px 40px;
  background: var(--color-type);
  color: var(--color-topic);
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-close-success:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(194, 255, 5, 0.4);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Honeypot hidden fields */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Botones disabled */
.btn-submit:disabled,
.btn-whatsapp:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

@media screen and (max-width: 900px) {
  .modal-container {
    max-height: 90vh;
    overflow-y: auto;
    padding-bottom: 20px;
  }
  .modal-container .modal-header {
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
  }
}
/* ---------------------------------------------------------
   LIGHT THEME — Text Banner
--------------------------------------------------------- */
/* Antes: banda pálida (azul→rosa al 10%), texto navy y comillas al 12% de opacidad: plana y
   apagada. Ahora es un bloque azul marino con texto crema, comillas magenta a plena opacidad y
   el retrato con marco magenta, como el oscuro pero con el acento del tema claro. El retrato
   sobresale de la banda, así que el marco y la comilla (que también cruzan el borde) van en
   magenta: se leen igual sobre el azul y sobre el fondo claro. */
html[data-theme=light] .quote {
  background-color: transparent;
  background: linear-gradient(100deg, #053c76 0%, #0a4aa8 60%, #3b2fd0 120%);
  border-top: none;
  border-bottom: none;
}
html[data-theme=light] .quote h3 {
  color: #F1EDDF;
  font-weight: 500;
}
html[data-theme=light] .quote img {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(16%) sepia(95%) saturate(6000%) hue-rotate(328deg);
}

html[data-theme=light] .portrait img {
  border-color: var(--color-focus);
  box-shadow: 0 24px 50px -12px rgba(5, 40, 120, 0.55);
}

.about-page {
  background: var(--color-back);
  min-height: 100vh;
}

/* apps/myfuture/static/myfuture/_light-theme.scss */
/* =========================================================
   TEMA CLARO — "Mediodía eléctrico"

   El tema oscuro se siente vivo porque toda la página tiene peso: fondo profundo, acentos y
   tarjetas con presencia. El claro era un lavado pálido y parejo, sin ningún punto de peso.
   Este parcial le da su propio ritmo, con tres recursos que se repiten en todo el sitio:

     1. CAMPO DE COLOR  — el hero de cada página y el cierre antes del pie: azul eléctrico →
        violeta, con un resplandor magenta arriba a la derecha y otro cian abajo a la
        izquierda. Texto blanco, palabra clave en lima, botón magenta.
     2. BLOQUE AZUL MARINO — una sección por página que vuelve a la isla oscura (misión,
        clientes): texto crema, tarjetas translúcidas, logos blancos que se leen.
     3. BANDAS TINTADAS — las secciones intermedias alternan entre el fondo base y una tinta
        suave de violeta o de cian, para que el scroll tenga ritmo sin gritar.

   Todo va bajo html[data-theme="light"] y con el prefijo `main >` para ganar en especificidad a
   las reglas claras de cada página (se cargan después de styles.css).
========================================================= */
/* Las dos tintas son azules fríos (matiz ~215° y ~195°). La anterior, violeta claro (#ede8fb), se
   leía como rosado sobre el fondo azul y no gustó: ninguna banda debe acercarse al magenta. */
html[data-theme=light] {
  /* -----------------------------------------------------
     0. BARRAS DE NAVEGACIÓN — fondo sólido en claro
     Eran transparentes: sobre un hero de color (algunas páginas lo deslizan bajo la barra) el
     texto navy del menú y el magenta del ticker quedaban sobre el azul.
  ----------------------------------------------------- */
  /* Cabecera con vida (antes: un bloque plano #f4f9ff). La barra superior es una franja azul
     tintada con pastillas blancas; la principal es blanca, con el riel inferior en degradado
     azul → violeta → cian. La página actual (.is-active, marcada en _main_nav.html) enciende
     sobre ese riel un segmento lima → cian con un haz de luz (ver _nav.scss), igual que en el
     oscuro: allí solo cambian el riel y el color del haz. */
  /* -----------------------------------------------------
     1. CAMPO DE COLOR — heroes de página
  ----------------------------------------------------- */
  /* Títulos y textos de cada hero sobre el campo de color */
  /* Índice de recursos: la página entera es una sola sección; el campo de color enmarca las tarjetas blancas */
  /* Política de privacidad: el encabezado es el campo de color; el texto legal queda sobrio sobre claro */
  /* El celeste (#0ea5e9) del énfasis llegaba a 2,2:1 sobre el cuadro lavanda de la introducción */
  /* Cierre de las fichas de proyecto */
  /* El hero de servicio tiene su propia capa pálida (.hero-bg-overlay) sobre una foto del
     proyecto: se convierte en el campo de color y la foto queda como textura debajo. */
  /* Cierre de las páginas de recurso: "¿Prefieres platicarlo primero?" */
  /* -----------------------------------------------------
     Cierre antes del pie: "¿Tienes un proyecto en mente?"
  ----------------------------------------------------- */
  /* -----------------------------------------------------
     2. BLOQUES AZUL MARINO — una isla oscura por página
  ----------------------------------------------------- */
  /* -----------------------------------------------------
     3. BANDAS TINTADAS — ritmo entre secciones
  ----------------------------------------------------- */
  /* La sección de experiencia de la home mide 80vw: la banda se veía como un rectángulo
     flotante con el fondo base a los lados. Ocupa todo el ancho y conserva el contenido a 80vw. */
}
html[data-theme=light] .upper-nav {
  background: linear-gradient(100deg, #dfe9fa 0%, #e6f1fb 60%, #e3ecfb 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(0, 80, 214, 0.14);
}
html[data-theme=light] .upper-nav .upper-toggle {
  background: #fff;
  border: 1px solid rgba(0, 80, 214, 0.22);
}
html[data-theme=light] .main-nav {
  background: #fff;
  box-shadow: 0 14px 30px -22px rgba(5, 40, 140, 0.55);
}
html[data-theme=light] .main-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #0a3fd0 0%, #6d28d9 55%, #4cc9f0 100%);
}
html[data-theme=light] .main-nav.scrolled {
  background: rgba(255, 255, 255, 0.94);
}
html[data-theme=light] .main-nav .menu-link:hover {
  color: var(--color-vivid-sky-blue);
}
html[data-theme=light] .main-nav .menu-link:hover::after {
  background: var(--color-vivid-sky-blue);
}
html[data-theme=light] .main-nav .menu-link.is-active {
  color: var(--color-topic);
  /* Sobre fondo blanco el lima no se ve: en claro el canal es magenta (la señal de
                   acción del sitio), que contrasta con el blanco de la barra y con el riel azul,
                   y el haz es un magenta tenue. */
  /* El segmento magenta gana al magenta/azul que el claro pone a ::after; ocupa los 4 px
                   finales de la barra, sobre el riel de degradado, y su brillo sube */
}
html[data-theme=light] .main-nav .nav-indicator {
  background: linear-gradient(90deg, #e8005e, #ff5ca1);
  box-shadow: 0 -5px 14px rgba(232, 0, 94, 0.4);
}
html[data-theme=light] .main-nav .nav-indicator::before {
  background: linear-gradient(180deg, rgba(232, 0, 94, 0) 0%, rgba(232, 0, 94, 0.24) 100%);
}
html[data-theme=light] .main-nav .dropdown-item:hover {
  background: rgba(0, 80, 214, 0.1);
  color: var(--color-vivid-sky-blue);
}
html[data-theme=light] main > .services-hero,
html[data-theme=light] main > .service-detail-hero,
html[data-theme=light] main > .about-hero,
html[data-theme=light] main > .hero-masonry,
html[data-theme=light] main > .res-hero {
  background: radial-gradient(60% 70% at 88% 8%, rgba(255, 45, 135, 0.55) 0%, transparent 62%), radial-gradient(55% 65% at 6% 100%, rgba(76, 201, 240, 0.5) 0%, transparent 60%), linear-gradient(135deg, #0a3fd0 0%, #3b2fd0 48%, #6d28d9 100%) !important;
}
html[data-theme=light] main > .services-hero .hero-subtitle {
  color: #c2ff05;
}
html[data-theme=light] main > .services-hero .hero-title {
  color: #fff;
  text-shadow: 0 2px 24px rgba(5, 20, 80, 0.3);
}
html[data-theme=light] main > .services-hero .hero-description {
  color: rgba(255, 255, 255, 0.92);
}
html[data-theme=light] main > .service-detail-hero .hero-breadcrumb a {
  color: #c2ff05;
}
html[data-theme=light] main > .service-detail-hero .hero-breadcrumb span {
  color: rgba(255, 255, 255, 0.8);
}
html[data-theme=light] main > .service-detail-hero .hero-title {
  color: #fff;
  text-shadow: 0 2px 24px rgba(5, 20, 80, 0.3);
}
html[data-theme=light] main > .service-detail-hero .hero-subtitle {
  color: #c2ff05;
}
html[data-theme=light] main > .service-detail-hero .hero-description {
  color: rgba(255, 255, 255, 0.92);
}
html[data-theme=light] main > .service-detail-hero .meta-label, html[data-theme=light] main > .service-detail-hero .meta-value, html[data-theme=light] main > .service-detail-hero .meta-content {
  color: rgba(255, 255, 255, 0.9);
}
html[data-theme=light] main > .service-detail-hero .hero-meta .meta-item i {
  color: #c2ff05;
}
html[data-theme=light] main > .about-hero .hero-title {
  color: #fff;
  text-shadow: 0 2px 24px rgba(5, 20, 80, 0.3);
}
html[data-theme=light] main > .about-hero .hero-description p {
  color: rgba(255, 255, 255, 0.92);
}
html[data-theme=light] main > .hero-masonry .masonry-header h1 {
  color: #fff;
  text-shadow: 0 2px 24px rgba(5, 20, 80, 0.3);
}
html[data-theme=light] main > .hero-masonry .masonry-header h2 {
  color: #c2ff05;
}
html[data-theme=light] main > .hero-masonry .masonry-intro {
  color: rgba(255, 255, 255, 0.92);
}
html[data-theme=light] main > .hero-masonry .stat-number {
  color: #c2ff05;
}
html[data-theme=light] main > .hero-masonry .stat-label {
  color: rgba(255, 255, 255, 0.85);
}
html[data-theme=light] main > .res-hero .res-eyebrow {
  color: #c2ff05;
}
html[data-theme=light] main > .res-hero .res-hero__title {
  color: #fff;
  text-shadow: 0 2px 24px rgba(5, 20, 80, 0.3);
}
html[data-theme=light] main > .res-hero .res-lead {
  color: rgba(255, 255, 255, 0.92);
}
html[data-theme=light] main > .res-hero .res-hero__note, html[data-theme=light] main > .res-hero .res-hero__note strong {
  color: rgba(255, 255, 255, 0.85);
}
html[data-theme=light] main > .res-hero .res-btn--primary {
  background: var(--color-focus);
  color: #fff;
  box-shadow: 0 10px 30px rgba(232, 0, 94, 0.5);
}
html[data-theme=light] main > .res-section:only-child {
  background: radial-gradient(60% 70% at 88% 8%, rgba(255, 45, 135, 0.55) 0%, transparent 62%), radial-gradient(55% 65% at 6% 100%, rgba(76, 201, 240, 0.5) 0%, transparent 60%), linear-gradient(135deg, #0a3fd0 0%, #3b2fd0 48%, #6d28d9 100%) !important;
}
html[data-theme=light] main > .res-section:only-child .res-head .res-eyebrow {
  color: #c2ff05;
}
html[data-theme=light] main > .res-section:only-child .res-head .res-hero__title {
  color: #fff;
  text-shadow: 0 2px 24px rgba(5, 20, 80, 0.3);
}
html[data-theme=light] main > .res-section:only-child .res-head .res-lead {
  color: rgba(255, 255, 255, 0.92);
}
html[data-theme=light] .privacy-header {
  background: radial-gradient(60% 70% at 88% 8%, rgba(255, 45, 135, 0.55) 0%, transparent 62%), radial-gradient(55% 65% at 6% 100%, rgba(76, 201, 240, 0.5) 0%, transparent 60%), linear-gradient(135deg, #0a3fd0 0%, #3b2fd0 48%, #6d28d9 100%) !important;
  padding: clamp(32px, 5vw, 56px) 24px;
  border-radius: 20px;
  border-bottom: 0;
}
html[data-theme=light] .privacy-header .privacy-title {
  color: #fff;
  text-shadow: 0 2px 24px rgba(5, 20, 80, 0.3);
}
html[data-theme=light] .privacy-header .privacy-updated {
  color: #c2ff05;
}
html[data-theme=light] .privacy-section .intro-text strong {
  color: var(--color-vivid-sky-blue);
}
html[data-theme=light] main > .project-cta-final {
  background: radial-gradient(60% 70% at 88% 8%, rgba(255, 45, 135, 0.55) 0%, transparent 62%), radial-gradient(55% 65% at 6% 100%, rgba(76, 201, 240, 0.5) 0%, transparent 60%), linear-gradient(135deg, #0a3fd0 0%, #3b2fd0 48%, #6d28d9 100%) !important;
}
html[data-theme=light] main > .project-cta-final h2 {
  color: #fff;
}
html[data-theme=light] main > .project-cta-final p {
  color: rgba(255, 255, 255, 0.92);
}
html[data-theme=light] main > .project-cta-final .btn-contact-large {
  box-shadow: 0 10px 30px rgba(232, 0, 94, 0.55), 0 0 0 3px rgba(255, 255, 255, 0.22);
}
html[data-theme=light] main > .service-detail-hero .hero-bg-overlay {
  background: radial-gradient(60% 70% at 88% 8%, rgba(255, 45, 135, 0.55) 0%, transparent 62%), radial-gradient(55% 65% at 6% 100%, rgba(76, 201, 240, 0.5) 0%, transparent 60%), linear-gradient(135deg, #0a3fd0 0%, #3b2fd0 48%, #6d28d9 100%);
  opacity: 0.93;
}
html[data-theme=light] main > .res-cta .res-cta__box {
  background: radial-gradient(60% 70% at 88% 8%, rgba(255, 45, 135, 0.55) 0%, transparent 62%), radial-gradient(55% 65% at 6% 100%, rgba(76, 201, 240, 0.5) 0%, transparent 60%), linear-gradient(135deg, #0a3fd0 0%, #3b2fd0 48%, #6d28d9 100%) !important;
  border: 0;
  box-shadow: 0 24px 50px -20px rgba(10, 50, 160, 0.55);
}
html[data-theme=light] main > .res-cta .res-cta__box .res-h2 {
  color: #fff;
}
html[data-theme=light] main > .res-cta .res-cta__box .res-lead {
  color: rgba(255, 255, 255, 0.92);
}
html[data-theme=light] main > .res-cta .res-cta__box .res-btn--primary {
  background: var(--color-focus);
  color: #fff;
  box-shadow: 0 10px 30px rgba(232, 0, 94, 0.5);
}
html[data-theme=light] .timeline-cta {
  background: radial-gradient(60% 70% at 88% 8%, rgba(255, 45, 135, 0.55) 0%, transparent 62%), radial-gradient(55% 65% at 6% 100%, rgba(76, 201, 240, 0.5) 0%, transparent 60%), linear-gradient(135deg, #0a3fd0 0%, #3b2fd0 48%, #6d28d9 100%) !important;
  border: 0;
  box-shadow: 0 24px 50px -20px rgba(10, 50, 160, 0.55);
}
html[data-theme=light] .timeline-cta h3 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #fff;
}
html[data-theme=light] .timeline-cta .btn-contact {
  box-shadow: 0 10px 30px rgba(232, 0, 94, 0.55), 0 0 0 3px rgba(255, 255, 255, 0.22);
}
html[data-theme=light] main > .about-mission,
html[data-theme=light] main > .service-clients {
  --color-font-night: #F1EDDF;
  --color-night-font: #F1EDDF;
  --color-type: #c2ff05;
  --color-vivid-sky-blue: #4cc9f0;
  --text-sub: #C8C0AC;
  --text-muted: #8E887A;
  --bg-card: rgba(10, 74, 143, 0.4);
  --border-card: rgba(76, 201, 240, 0.3);
  background: linear-gradient(100deg, #053c76 0%, #0a4aa8 60%, #3b2fd0 120%) !important;
}
html[data-theme=light] main > .page3,
html[data-theme=light] main > .related-projects,
html[data-theme=light] main > .service-projects,
html[data-theme=light] main > .about-timeline,
html[data-theme=light] main > .timeline-library {
  background: linear-gradient(180deg, #dfe9fa 0%, #d3e1f6 100%) !important;
}
html[data-theme=light] main > .page3 {
  width: 100%;
  padding-inline: 10vw;
  margin-inline: 0;
}
html[data-theme=light] main > .faq-section,
html[data-theme=light] main > .services-grid,
html[data-theme=light] main > .about-extra-skills,
html[data-theme=light] main > .service-benefits {
  background: linear-gradient(180deg, #e2f3fb 0%, #d6edf7 100%) !important;
}

/*# sourceMappingURL=styles.css.18d79d9826a7.map */