/* ============================================
   BASE - Reset, Variables y Estilos Globales
   ============================================ */

/* ----- Variables CSS ----- */
:root {
  /* Colores - Paleta oscura */
  --color-primary: #3b82f6;
  --color-primary-active: #22d3ee;
  --color-body: #0f172a;
  --color-heading: #f8fafc;
  --color-text: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-border: #334155;
  
  /* Neutrales */
  --neutral-950: #030712;
  --neutral-900: #111827;
  --neutral-800: #1e293b;
  --neutral-700: #334155;
  --neutral-600: #475569;
  --neutral-500: #64748b;
  --neutral-400: #94a3b8;
  --neutral-300: #cbd5e1;
  --neutral-200: #e2e8f0;
  --neutral-100: #f1f5f9;
  --neutral-0: #ffffff;

  /* Tipografía */
  --font-family-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-heading: 'IBM Plex Sans', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Tamaño de fuente */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Border radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition: all 0.15s ease-in Z-out;

  /*-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-overlay: 400;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Background Images - Tema Oscuro por defecto */
  --bg-parallax-image: url('../../images/DPTech-Innovation-Park-EDEntrada_dark.webp');
  --bg-newsletter-image: url('../../images/DPTech-Innovation-Park_dark.webp');

  /* Colores específicos de secciones - Dark mode */
  --section-bg-dark: #070707;
  --section-text-light: #ffffff;
}

/* ===== TEMA CLARO ===== */
html.light-mode {
  /* Colores - Paleta clara */
  --color-primary: #3b82f6;
  --color-primary-active: #22d3ee;
  --color-body: #d6e5f5;
  --color-heading: #0f172a;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-border: #cbd5e1;

  /* Neutrales invertidos */
  --neutral-950: #ffffff;
  --neutral-900: #f1f5f9;
  --neutral-800: #e2e8f0;
  --neutral-700: #cbd5e1;
  --neutral-600: #94a3b8;
  --neutral-500: #64748b;
  --neutral-400: #475569;
  --neutral-300: #334155;
  --neutral-200: #1e293b;
  --neutral-100: #111827;
  --neutral-0: #030712;

  /* Background Images - Versión clara */
  --bg-parallax-image: url('../../images/DPTech-Innovation-Park-EDEntrada.webp');
  --bg-newsletter-image: url('../../images/DPTech-Innovation-Park.webp');

  /* Colores específicos de secciones - Light mode */
  --section-bg-dark: #d6e5f5;
  --section-text-light: #0f172a;
}

/* ----- Reset Moderno ----- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-body);
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  margin: 0;
}

body.menu-open {
  overflow: hidden;
}

/* Prevent horizontal scroll */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ----- Layout Base ----- */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: visible;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: visible;
  margin: 0;
  padding: 0;
}

.wp-site-blocks {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: visible;
}

main {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: visible;
}

main.wp-block-group {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/* Override ALL WordPress container max-widths */
[class*="wp-container-core"] {
  max-width: none !important;
  width: 100% !important;
}

/* Force full width on desktop for all containers */
@media (min-width: 769px) {
  .wp-block-group,
  .wp-block-cover,
  .wp-block-columns {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .wp-block-group.is-layout-constrained {
    max-width: 100% !important;
  }
  
  .hero-tabs-container {
    height: 100vh !important;
    height: 100svh !important;
    min-height: 700px !important;
  }
}

/* Full width sections - override WordPress */
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-columns.alignfull,
.wp-block-image.alignfull {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Wide sections */
.wp-block-group.alignwide,
.wp-block-cover.alignwide,
.wp-block-columns.alignwide {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Inner containers - limit content width but not the container itself */
.wp-block-group.is-layout-constrained > *:not(.alignwide):not(.alignfull) {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

@media (max-width: 768px) {
  .wp-block-group.is-layout-constrained > *:not(.alignwide):not(.alignfull) {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .wp-block-cover__inner-container {
    padding: var(--spacing-lg) var(--spacing-md) !important;
  }
}

@media (max-width: 480px) {
  .wp-block-group.is-layout-constrained > *:not(.alignwide):not(.alignfull) {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
}

.wp-block-group.alignwide > *:not(.alignfull) {
  max-width: 1400px;
}

.wp-block-group.alignfull > *:not(.alignfull):not(.alignwide) {
  max-width: 100%;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

/* Cover Block (Hero) */
.wp-block-cover {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/* Hero tabs container - tamaño completo solo en desktop */
@media (min-width: 769px) {
  .hero-flex-container,
  .hero-tabs-container {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: 100vh !important;
    height: 100svh !important;
  }
}

/* En móvil: altura automática para que el contenido no quede cortado */
@media (max-width: 768px) {
  .hero-flex-container,
  .hero-tabs-container {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

.wp-block-cover.alignwide,
.wp-block-cover.alignfull {
  width: 100% !important;
  max-width: 100% !important;
}

.wp-block-cover__background {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  padding: var(--spacing-2xl);
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* Header dentro del cover */
.wp-block-cover .site-header {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.wp-block-cover .site-header-inner {
  max-width: 1400px;
  margin: 0 auto;
}

/* Parallax sections */
.wp-container-core-group-is-layout-12243e0f {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

.parallax-section {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 35vh !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
}

.parallax-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: var(--bg-parallax-image) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important; /* desactivado en móvil más abajo */
  z-index: 0 !important;
}

.parallax-content {
  position: relative !important;
  z-index: 1 !important;
}

/* background-attachment: fixed no funciona en iOS Safari */
@media (max-width: 768px) {
  .parallax-image {
    background-attachment: scroll !important;
  }
}

/* Force background image to cover full width */
.wp-block-cover .wp-block-cover__background,
.wp-block-cover__background {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* Newsletter section - fix positioning - override inline styles */
.nexal-newsletter-section {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
}

.nexal-newsletter-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--bg-newsletter-image) no-repeat center center !important;
  background-size: cover !important;
  background-position: center center !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.nexal-newsletter-section .nexal-newsletter-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
}

.nexal-newsletter-section .nexal-newsletter-content {
  position: relative !important;
  z-index: 2 !important;
}

/* Columns */
.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
  width: 100% !important;
  max-width: 100% !important;
  padding: var(--spacing-xl) var(--spacing-lg);
}

.wp-block-columns.alignwide {
  max-width: 100% !important;
  padding: var(--spacing-xl) var(--spacing-lg);
}

.wp-block-columns.alignfull {
  width: 100% !important;
  max-width: 100% !important;
  padding: var(--spacing-xl) var(--spacing-lg);
}

.wp-block-column {
  flex: 1;
  min-width: 280px;
  padding: var(--spacing-md);
}

@media (min-width: 1024px) {
  .wp-block-column {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .wp-block-columns {
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
  }

  .wp-block-column {
    width: 100%;
    min-width: 0;
    flex: 0 0 100%;
  }
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-body);
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

/* Prevent horizontal scroll */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ----- Tipografía ----- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  color: var(--color-heading);
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

/* Tipografía responsive: reducir headings en pantallas pequeñas */
@media (max-width: 768px) {
  h1, .wp-block-heading[data-type="h1"] { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl); }
}

@media (max-width: 480px) {
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
  h3 { font-size: var(--font-size-lg); }
}

p {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--color-primary-active);
  text-decoration: underline;
}

/* ----- Imágenes ----- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ----- Listas ----- */
ul, ol {
  list-style: none;
}

/* ----- Botones base ----- */
button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ----- Inputs base ----- */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ----- Contenedor ----- */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* ----- Visibilidad ----- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- Utilidades ----- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* Alignment */
.alignwide {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.alignfull {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.alignwide,
.alignfull {
  width: 100%;
}

/* Layout general - asegurar layout desktop */
main {
  width: 100%;
  max-width: 100%;
}

main > * {
  max-width: 100%;
}

/* ----- Bloques WP (clases base necesarias) ----- */
.wp-block {
  max-width: 100%;
}

/* Container para contenido */
.wp-block-group.alignwide,
.wp-block-group.alignfull {
  width: 100%;
}

.wp-block-group.has-global-padding {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.wp-block-group.is-layout-constrained {
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.wp-block-group.alignwide {
  max-width: 1400px;
}

.wp-block-group.alignfull {
  max-width: 100%;
}

/* Cover Block (Hero) */
.wp-block-cover {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.wp-block-cover.alignwide,
.wp-block-cover.alignfull {
  width: 100%;
  max-width: 100%;
}

.wp-block-cover__background {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  padding: var(--spacing-2xl);
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/* Columns */
.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
}

.wp-block-columns.alignwide {
  max-width: 1400px;
}

.wp-block-columns.alignfull {
  max-width: 100%;
}

.wp-block-column {
  flex: 1;
  min-width: 280px;
  padding: var(--spacing-md);
}

@media (min-width: 1024px) {
  .wp-block-column {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .wp-block-columns {
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
  }

  .wp-block-column {
    width: 100%;
    min-width: 0;
    flex: 0 0 100%;
  }
}

.wp-block-image {
  margin: var(--spacing-lg) 0;
}

.wp-block-image img {
  border-radius: var(--radius-lg);
}

/* ----- Spacer ----- */
.wp-block-spacer {
  clear: both;
}

/* ===== FONDO GLOBAL DARK MODE =====
   Cubre espaciadores y contenedores sin fondo explícito.
   Sin esta regla, el body (#0f172a) se filtra a través de gaps. */
.wp-site-blocks {
  background-color: #070707;
}

/* ===== OVERRIDES PARA LIGHT MODE ===== */
/* Override global para variables CSS de WordPress */
html.light-mode {
  --wp--preset--color--neutral-950: #d6e5f5 !important;
  --wp--preset--color--neutral-0: #d6e5f5 !important;
}

/* Fondo global light mode */
html.light-mode .wp-site-blocks {
  background-color: #d6e5f5 !important;
}

/* Sección Posts — NO cambiar con el tema */
html.light-mode .has-neutral-200-background-color {
  background-color: #1e293b !important;
}

/* Overrides de clases específicas */
html.light-mode .faq-section {
  background-color: #d6e5f5 !important;
  color: #0f172a !important;
}

html.light-mode .faq-contact-btn {
  color: #070707 !important;
}

html.light-mode .faq-final-cta p {
  color: #22d3ee !important;
}

html.light-mode .contact-section {
  background-color: #d6e5f5 !important;
  color: #0f172a !important;
}

html.light-mode .submit-btn {
  color: #d6e5f5 !important;
}

/* Override para clases de WordPress que usan esas variables */
html.light-mode .has-neutral-950-background-color {
  background-color: #d6e5f5 !important;
}

html.light-mode .has-neutral-0-background-color {
  background-color: #d6e5f5 !important;
}

html.light-mode .has-neutral-950-color {
  color: #0f172a !important;
}

html.light-mode .has-neutral-0-color {
  color: #0f172a !important;
}

html.light-mode [style*="--wp--preset--color--neutral-950"],
html.light-mode [style*="--wp--preset--color--neutral-0"] {
  background-color: #d6e5f5 !important;
  color: #0f172a !important;
}

/* Cambiar fondo oscuro a claro en cualquier elemento */
html.light-mode [style*="background-color: #070707"],
html.light-mode [style*="background-color:#070707"] {
  background-color: #d6e5f5 !important;
}

html.light-mode [style*="color: #070707"],
html.light-mode [style*="color:#070707"] {
  color: #d6e5f5 !important;
}

/* Cambiar colores adicionales oscuros (navegación, dropdowns, etc.) */
html.light-mode [style*="background-color:#0d2238"],
html.light-mode [style*="background-color: #0d2238"],
html.light-mode [style*="background-color:#060928"],
html.light-mode [style*="background-color: #060928"],
html.light-mode [style*="background-color:#020c18"],
html.light-mode [style*="background-color: #020c18"],
html.light-mode [style*="background:#0d2238"],
html.light-mode [style*="background: #0d2238"],
html.light-mode [style*="background:#020c18"],
html.light-mode [style*="background: #020c18"] {
  background-color: #d6e5f5 !important;
  color: #0f172a !important;
}

/* Override específico para las clases de secciones oscuras */
html.light-mode .nexal-metrics-container {
  background-color: #d6e5f5 !important;
  color: #0f172a !important;
}

html.light-mode .tech-carousel {
  background: #d6e5f5 !important;
  color: #0f172a !important;
}

/* Override para el contenedor de servicios (srv-grid-container) - múltiples selectores */
html.light-mode .srv-grid-container,
html.light-mode .wp-block-group.srv-grid-container,
html.light-mode .has-global-padding.srv-grid-container {
  background-color: #d6e5f5 !important;
  color: #0f172a !important;
}

/* Override específico para el estilo inline del srv-grid-container */
html.light-mode [class*="srv-grid-container"][style*="background-color:#0d2238"],
html.light-mode [class*="srv-grid-container"][style*="background-color: #0d2238"] {
  background-color: #d6e5f5 !important;
  color: #0f172a !important;
}

/* Override para el contenedor del parallax */
html.light-mode .wp-container-core-group-is-layout-12243e0f {
  background-color: #d6e5f5 !important;
}

/* ===== CAMBIOS DE COLOR DE TEXTOS EN LIGHT-MODE ===== */

/* 1. Sección de Métricas - H2 "Impulso Tech 360°" */
html.light-mode .wp-block-group.srv-grid-container h2.wp-block-heading {
  color: #0f172a !important;
}

/* 1b. Sección de Métricas - H4 "Soluciones que Transforman tu Empresa" */
html.light-mode .wp-block-group.srv-grid-container h4.wp-block-heading {
  color: #22d3ee !important;
}

/* 2. Sección de Soluciones Especializadas - H2 */
html.light-mode .wp-block-group.is-style-default.has-neutral-0-background-color h2.wp-block-heading {
  color: #0f172a !important;
}

html.light-mode .wp-block-column .wp-block-heading {
  color: #0f172a !important;
}

/* 2b. Sección de Soluciones Especializadas - Subtítulo turquesa */
html.light-mode section.wp-block-group.is-style-default.has-neutral-0-background-color p.has-primary-color-color,
html.light-mode section.wp-block-group.is-style-default.has-neutral-0-background-color .has-primary-color-color {
  color: #22d3ee !important;
}

/* Fallback para párrafos con primary-color en light mode dentro de la sección correcta */
html.light-mode .wp-block-columns.alignwide p.has-primary-color-color {
  color: #22d3ee !important;
}

/* 2c. Sección de Soluciones Especializadas - párrafos normales (oscuros) */
html.light-mode .wp-block-columns.alignwide .wp-block-column.is-layout-flow p {
  color: #0f172a !important;
}

/* Subtítulo turquesa en Soluciones Especializadas (párrafo con borde + em) */
html.light-mode .wp-block-columns.alignwide .wp-block-column.is-layout-flow p[style*="border-left"] {
  color: #22d3ee !important;
}

html.light-mode .wp-block-columns.alignwide .wp-block-column.is-layout-flow p[style*="border-left"] em {
  color: #22d3ee !important;
}

html.light-mode .wp-block-columns.alignwide .wp-block-column.is-layout-flow p[style*="border-left"] * {
  color: #22d3ee !important;
}

/* 3. Stack Tecnológico - Cambiar fondo a claro también */
html.light-mode section.tech-carousel {
  background: #d6e5f5 !important;
}

html.light-mode .tech-carousel {
  background: #d6e5f5 !important;
}

html.light-mode .tech-title {
  color: #0f172a !important;
  filter: none !important;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

html.light-mode .tech-carousel:hover .tech-title {
  color: #22d3ee !important;
  filter: none !important;
}

html.light-mode .tech-tagline {
  color: #0f172a !important;
}

/* 4. Newsletter - Mantener siempre blanco (NO cambiar) */
html.light-mode .newsletter-title {
  color: #ffffff !important;
  text-shadow: 0 4px 15px rgba(34, 211, 238, 0.5) !important;
}

html.light-mode .newsletter-subtitle {
  color: #ffffff !important;
  text-shadow: 0 4px 8px rgba(34, 211, 238, 0.4) !important;
}

/* 5. Links principales de nav en light mode — hover con resaltado y sin subrayado */
html.light-mode .dpt-nav-link:hover,
html.light-mode .dpt-dropdown-trigger:hover,
html.light-mode .dpt-nav-item.dpt-open > .dpt-dropdown-trigger {
  background-color: #0c3148 !important;
  color: #f8fafc !important;
  text-decoration: none !important;
}

/* 5b. Link Contacto en nav */
html.light-mode .dpt-nav-link[href="#contacto"] {
  color: #0f172a !important;
}
html.light-mode .dpt-nav-link[href="#contacto"]:hover {
  color: #f8fafc !important;
}

/* 6. Sección de Formulario (Contact Section) - igual que FAQ */
html.light-mode .contact-section h2,
html.light-mode .contact-section h3,
html.light-mode .contact-section p:not(.submit-btn) {
  color: #0f172a !important;
}

/* ===== PARALLAX SECTION ===== */

/* Título del parallax siempre blanco */
.parallax-content h2,
.parallax-content p {
  color: #ffffff !important;
}

/* NO cambiar colores de títulos del hero */
html.light-mode .hero-headline,
html.light-mode .hero-subheadline {
  color: inherit !important;
}

/* Reposicionar en móvil (max-width: 768px) */
@media (max-width: 768px) {
  .parallax-content {
    justify-content: flex-start !important;
    padding-top: 20px !important;
    padding-bottom: 0 !important;
  }

  .parallax-content h2 {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }

  .parallax-content p {
    position: absolute !important;
    bottom: 10px !important;
    top: auto !important;
    margin: 0 !important;
  }
}

/* ===== PROTEGER POSTS Y FOOTER DE CAMBIOS DE COLOR EN LIGHT MODE ===== */

/* Posts section - NO cambiar colores */
html.light-mode .wp-block-query,
html.light-mode article,
html.light-mode .wp-block-post {
  color: #cbd5e1 !important; /* Revertir al color dark mode */
}

html.light-mode .wp-block-query p,
html.light-mode article p,
html.light-mode .wp-block-post p {
  color: #cbd5e1 !important;
}

html.light-mode .wp-block-query h2,
html.light-mode article h2,
html.light-mode .wp-block-post h2,
html.light-mode .wp-block-query h3,
html.light-mode article h3,
html.light-mode .wp-block-post h3 {
  color: #f8fafc !important; /* Revertir al color heading dark mode */
}

html.light-mode .wp-block-query a,
html.light-mode article a,
html.light-mode .wp-block-post a {
  color: #3b82f6 !important;
}

/* Footer - NO cambiar colores */
html.light-mode .site-footer,
html.light-mode .site-footer p,
html.light-mode .site-footer a,
html.light-mode .site-footer h3 {
  color: #cbd5e1 !important; /* Mantener color de texto dark mode */
}

html.light-mode .site-footer h3,
html.light-mode .footer-col-title {
  color: #f8fafc !important; /* Mantener color heading dark mode */
}

html.light-mode .site-footer a {
  color: #3b82f6 !important;
}

/* ===== PROTEGER TARJETAS DE SOLUCIONES Y SERVICIOS EN LIGHT MODE ===== */
/* Estas tarjetas mantienen fondo oscuro en ambos temas — los colores de texto NO deben cambiar */

/* dp-wrapper (Soluciones Especializadas) - contenedor externo */
html.light-mode .dp-wrapper {
  background-color: #d6e5f5 !important;
}

/* dp-cards (Soluciones Especializadas) - especificidad alta para ganar frente a reglas de wp-block-columns */
html.light-mode .wp-block-columns.alignwide .wp-block-column.is-layout-flow .dp-card .dp-segment  { color: white !important; }
html.light-mode .wp-block-columns.alignwide .wp-block-column.is-layout-flow .dp-card .dp-title    { color: white !important; }
html.light-mode .wp-block-columns.alignwide .wp-block-column.is-layout-flow .dp-card .dp-subtitle { color: #00e0ff !important; }
html.light-mode .wp-block-columns.alignwide .wp-block-column.is-layout-flow .dp-card .dp-desc     { color: #8aaabb !important; }
html.light-mode .wp-block-columns.alignwide .wp-block-column.is-layout-flow .dp-card .dp-cta      { color: white !important; }
html.light-mode .wp-block-columns.alignwide .wp-block-column.is-layout-flow .dp-row:hover .dp-card:hover .dp-cta { color: #00e0ff !important; }

/* svc-cards (Servicios) — columnas individuales: dark mode #071828, light mode #d6e5f5 */
html.dark-mode .wp-block-column.has-background[style*="background-color:#0d2238"] {
  background-color: #071828 !important;
}
html.light-mode .wp-block-column.has-background[style*="background-color:#0d2238"] {
  background-color: #d6e5f5 !important;
}

/* svc-cards textos (Servicios) */
html.light-mode .wp-block-columns.alignwide .wp-block-column.is-layout-flow .svc-desc                   { color: #8aaabb !important; }
html.light-mode .wp-block-columns.alignwide .wp-block-column.is-layout-flow .svc-stack:hover .svc-desc  { color: white !important; }

/* metric-cards (Servicios / Impulso Tech 360°) */
html.light-mode .metric-card .metric-value        { color: #f8fafc !important; }
html.light-mode .metric-card .metric-label        { color: #8aaabb !important; }
html.light-mode .metric-card .metric-desc         { color: #8aaabb !important; }
html.light-mode .metric-card .metric-desc strong  { color: #00e0ff !important; }
html.light-mode .metric-card:hover .metric-value  { color: #00e0ff !important; }
html.light-mode .metric-card:hover .metric-label  { color: #00e0ff !important; }

/* Nav: eliminar subrayado en TODOS los estados (base y hover) — refuerzo global */
.dpt-nav-link,
.dpt-dropdown-trigger,
.dpt-mega-link,
.dpt-segment-btn,
.dpt-dropdown-link {
  text-decoration: none !important;
}
.dpt-nav-link:hover,
.dpt-dropdown-trigger:hover,
.dpt-mega-link:hover,
.dpt-segment-btn:hover,
.dpt-dropdown-link:hover {
  text-decoration: none !important;
}

/* ===== NAVEGACIÓN — Contenedores flotantes (dropdown y mega-menu) =====
   El header y los links principales SÍ cambian con el tema (comportamiento correcto).
   PERO los contenedores .dpt-dropdown y .dpt-mega-menu tienen fondo #0d2238 fijo.
   Sus links internos deben mantener color claro para ser legibles en light mode.
   ===================================================================== */

/* Dropdown estándar — links internos */
html.light-mode .dpt-segment-btn,
html.light-mode .dpt-dropdown-link {
  color: #cbd5e1 !important;
}
html.light-mode .dpt-segment-btn:hover,
html.light-mode .dpt-dropdown-link:hover {
  color: #00e0ff !important;
  background-color: rgba(0, 224, 255, 0.08) !important;
}
html.light-mode .dpt-segment-btn.dpt-seg-active {
  color: #00e0ff !important;
}

/* Mega-menu — links internos */
html.light-mode .dpt-mega-link {
  color: #cbd5e1 !important;
}
html.light-mode .dpt-mega-link:hover {
  color: #00e0ff !important;
  background-color: rgba(0, 224, 255, 0.08) !important;
}

/* ===== RRSS DOCK — sin subrayado en enlaces =====
   El a:hover global de base.css aplica text-decoration:underline
   a todos los <a>; estos elementos son icon-links que no deben subrayarse.
   ================================================= */
.dpt-social-item,
.dpt-social-item:hover,
.footer-social-link,
.footer-social-link:hover {
  text-decoration: none !important;
}