/*!
 * @project GN Impulso - Avalúos & Arquitectura
 * @author GN Impulso
 * @copyright 2026 GN Impulso. Todos los derechos reservados.
 *
 * Queda prohibida la copia, reproducción o distribución total 
 * o parcial de este código fuente sin autorización previa.
 */

/* ==========================================================================
   GN IMPULSO - SOTA DESIGN (MINIMAL & EDITORIAL)
   ========================================================================== */

:root {
  --primary: #0A192F;          /* Azul Oscuro Casi Negro (Sofisticación) */
  --secondary: #64748B;        /* Gris Neutro para párrafos */
  --bg-white: #FFFFFF;
  --bg-light: #F8FAFC;         /* Gris muy sutil para contrastar secciones */
  --accent: #25D366;           /* WhatsApp */
  
  --font-main: 'Mulish', sans-serif;
  
  --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ==========================================================================
   REGLAS BASE Y CANDADO ANTI-DESBORDAMIENTO (SOTA)
   ========================================================================== */
html, body {
  /* La guillotina absoluta: Nada sale del borde derecho jamás */
  overflow-x: hidden; 
  /* Forzamos al navegador a anclarse al ancho exacto del dispositivo */
  width: 100%; 
  max-width: 100vw;
}

html { 
  scroll-behavior: smooth; 
  font-size: 16px; 
  /* Escudo global para que los enlaces de anclaje no queden ocultos bajo el menú fijo */
  scroll-padding-top: 30px; 
}

body {
  font-family: var(--font-main);
  color: var(--primary);
  background-color: var(--bg-white);
  line-height: 1.7;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: var(--transition); }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
/* ANTES: .section-padding { padding: 8rem 0; } */
/* NUEVO SOTA: Espaciado dinámico e inteligente */
.section-padding { 
  padding: clamp(4rem, 8vw, 6rem) 0; 
}

.bg-light { background-color: var(--bg-light); }

/* --- Tipografía --- */
h1, h2, h3 { font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.section-title { font-size: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: 2rem; }
/* NUEVO: Aumentar la separación inferior de los encabezados de sección */
.section-header { 
  margin-bottom: 5rem; 
}
.text-body { font-size: 1.125rem; color: var(--secondary); margin-bottom: 1.5rem; font-weight: 400; }
.text-center-max { 
  max-width: 600px; 
  margin: 0 auto 3rem auto; 
  text-align: center; /* NUEVO: Centra el texto interno */
}

/* --- Placeholders para tus Imágenes/Videos --- */
.img-placeholder {
  background-color: #E2E8F0; /* Gris claro de fondo */
  border: 1px dashed #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  padding: 2rem;
  width: 100%;
}
.img-placeholder.landscape { aspect-ratio: 4/3; }
.img-placeholder.full-height { height: 100%; min-height: 400px; }

/* --- Imágenes Finales SOTA --- */
.sota-image {
  width: 100%;
  display: block;
  background-color: var(--bg-white); /* SOTA: Fuerza un fondo blanco sólido para que los SVGs transparentes luzcan como papel o tarjetas */
  border-radius: 4px; 
  box-shadow: 0 15px 35px rgba(0,0,0,0.08); 
  object-fit: cover; 
  transition: transform 0.5s ease; 
}

.sota-image.landscape {
  aspect-ratio: 4/3;
}

.sota-image-svg {
  width: 100%;
  display: block;
  background-color: transparent; /* Hacemos la caja totalmente invisible */
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15)); /* La sombra calca exactamente las líneas negras */
  object-fit: cover; 
  transition: transform 0.5s ease; 
}

.sota-image-svg.landscape {
  aspect-ratio: 4/3;
}

/* El efecto de movimiento (zoom) al pasar el mouse */
.service-row:hover .sota-image-svg {
  transform: scale(1.02);
}

/* --- Imagen de la Sección de Contacto --- */
.sota-image-contact {
  width: 100%;
  height: auto; 
  opacity: 0.85; 
  background-color: transparent; /* Quitamos el fondo blanco */
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.1)); /* Sombra sutil calocada en el trazo */
}

/* SOTA: Asegura que el croquis quede centrado verticalmente si el texto de la derecha crece */
.contact-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Efecto opcional: un pequeñísimo zoom al pasar el mouse por encima de la tarjeta del servicio */
.service-row:hover .sota-image {
  transform: scale(1.02);
}

/* --- Cabecera --- */
.site-header {
  position: fixed; 
  /* width: 100%; <- ELIMINAR ESTA LÍNEA */
  left: 0; /* NUEVO: Anclaje izquierdo */
  right: 0; /* NUEVO: Anclaje derecho */
  top: 0; 
  z-index: 1000;
  padding: 1.5rem 0;
  background: transparent;
  transition: var(--transition);
}
.site-header.scrolled {
  /* Bajamos el blanco al 85% de opacidad (puedes ajustarlo al 0.80 o 0.90) */
  background: rgba(255, 255, 255, 0.65);
  
  /* Añadimos el desenfoque para que el fondo se vea borroso y elegante blur modifica el desenfoque */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(6px);
  
  padding: 1rem 0;
  box-shadow: 0 4px 30px rgba(0,0,0,0.05);
}

.header-container { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 2rem; }

/* --- Control del SVG Inline --- */
.brand-icon {
  height: 62px; /* Tamaño del isotipo */
  width: auto;
  flex-shrink: 0;
  transition: var(--transition);
}

/* Fuerza el cambio de color dinámico */
.site-header:not(.scrolled) .brand-icon {
  color: var(--bg-white); /* Blanco sobre imagen de dron */
}

.site-header.scrolled .brand-icon {
  color: var(--primary); /* Azul oscuro cuando el menú es blanco */
}


/* Navegación Desktop */
.nav-list { display: flex; gap: 2.5rem; list-style: none; }
.nav-link { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.site-header:not(.scrolled) .nav-link { color: var(--bg-white); }
.site-header.scrolled .nav-link { color: var(--primary); }

/* Hamburguesa Móvil (Oculto en Desktop) */
.mobile-menu-toggle { 
  display: none; 
  background: none; 
  border: none; 
  z-index: 1001; 
  cursor: pointer; 
  color: var(--primary); /* Aseguramos el color base oscuro */
}

/* NUEVO: Cambiar el ícono a blanco cuando estamos hasta arriba (sin scroll) */
.site-header:not(.scrolled) .mobile-menu-toggle { 
  color: var(--bg-white); 
}

/* --- Hero Section --- */

.hero-section {
  position: relative; 
  /* ELIMINAR ESTA LÍNEA: height: 100vh; */
  
  min-height: 100dvh; /* Asegura que cubra la pantalla, pero le permite crecer si es necesario */
  display: flex; 
  align-items: center;
  padding-top: 100px;    /* Escudo para el menú fijo */
  padding-bottom: 3rem;  /* NUEVO: Espacio de respiro debajo del botón para que nunca toque la línea blanca */
}

/* Contenedor del fondo azul oscuro corporativo */
.hero-bg-container {
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; height: 100%;
  background-color: var(--primary); /* El lienzo azul profundo */
  z-index: -2;
  overflow: hidden;
}

/* Efecto SOTA: Respiración Cinematográfica (Fade In + Zoom Out) */
.hero-skyline {
  width: 100%; 
  height: 100%;
  object-fit: cover;
  object-position: center center; 
  
  /* Magia de Fusión: Vuelve invisible el fondo negro */
  mix-blend-mode: screen;
  
  /* Filtro limpio: Blanco y negro de alto contraste */
  filter: grayscale(100%) invert(100%) contrast(250%);

  /* GN_NOTAS: Inician pruebas borrar: */
  /* SOTA: Invertimos a blanco, aplicamos sepia para dar color base y rotamos el matiz hacia el amarillo #DBE124 */
  /* Nota: Puedes ajustar levemente los grados de hue-rotate (entre 15deg y 35deg) si quieres el amarillo más cálido o más lima. */
  /* filter: grayscale(100%) invert(100%) sepia(100%) saturate(600%) hue-rotate(33deg) brightness(1.2) contrast(250%); */
  /* GN_NOTAS: Terminan pruebas borrar: */
  
  /* Estado Inicial de la Animación */
  opacity: 0; /* Inicia 100% invisible */
  transform: scale(1.05); /* Inicia un 5% más grande */
  
  /* Se ejecuta en 3.5 segundos con una curva de velocidad premium */
  animation: cinematicBreathe 3.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards; 
}

/* Fotogramas de la nueva animación */
@keyframes cinematicBreathe {
  0% { 
    opacity: 0; 
    transform: scale(1.06); 
  }
  100% { 
    opacity: 0.35; /* Frena en tu tono Gris Pizarra perfecto */
    transform: scale(1); /* Encaja en su tamaño real */
  }
}

.hero-overlay {
  display: none; /* Apagamos la capa oscura por completo */
}

.hero-title { 
  font-size: clamp(2rem, 8vw, 4.5rem); 
  color: var(--bg-white); 
  margin-bottom: 1.5rem; 
  /* Escudo oscuro sutil para separar el título de las líneas */
  text-shadow: 0 4px 20px rgba(10,25,47, 0.8);
}

.hero-description { 
  font-size: 1.25rem; 
  font-weight: 500; /* Subimos el cuerpo de la letra a Medium */
  color: rgba(255,255,255,0.95); 
  max-width: 500px; 
  /* SOTA: Triple sombra oscura sin desplazamiento espacial. Crea un aura negra difuminada que "borra" las líneas de la ciudad justo donde toca la letra */
  text-shadow: 0 0 10px rgba(10,25,47, 1), 0 0 20px rgba(10,25,47, 1), 0 0 30px rgba(10,25,47, 0.8);
  line-height: 1.8;
}

/* --- Filosofía (Layout Asimétrico) --- */
.grid-2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.philosophy-visual { position: relative; text-align: center; }
.mv-block h3 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: 0.5rem; }

/* SOTA: Efecto Diorama / Maqueta 3D Flotante para la transparencia */
.sota-image-model {
  width: 100%;
  max-width: 500px; /* Evita que crezca desproporcionadamente en monitores gigantes */
  height: auto;
  margin: 0 auto;
  display: block;
  /* La sombra calca los marcos de tu estructura, creando un efecto 3D real */
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)); 
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Efecto de levitación al pasar el mouse por la sección */
.philosophy-visual:hover .sota-image-model {
  transform: translateY(-12px) scale(1.02);
}

/* --- Servicios (Galería Zig-Zag) --- */
.service-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; margin-bottom: 8rem; }
.service-row:last-child { margin-bottom: 0; }
.service-row.reverse { grid-template-columns: 1.2fr 1fr; }
.service-row.reverse .service-info { order: 2; }
.service-row.reverse .service-media { order: 1; }
.service-number { display: block; font-size: 1.5rem; font-weight: 300; color: #CBD5E1; margin-bottom: 1rem; }

/* --- Acreditaciones --- */
.accreditations-flex { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; margin-top: 3rem; }
.acc-item { font-size: 1.25rem; font-weight: 800; color: #94A3B8; letter-spacing: 0.1em; transition: var(--transition); cursor: default; }
.acc-item:hover { color: var(--primary); }

/* --- Contacto Minimalista --- */
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-light); }
.contact-content { padding: 6rem 4rem; display: flex; flex-direction: column; justify-content: center; }
.minimal-form .form-group { margin-bottom: 2rem; }
.minimal-form input, .minimal-form textarea {
  width: 100%; padding: 1rem 0;
  border: none; border-bottom: 1px solid #CBD5E1;
  background: transparent; font-family: inherit; font-size: 1rem; outline: none; transition: var(--transition);
}
.minimal-form input:focus, .minimal-form textarea:focus { border-bottom-color: var(--primary); }
.btn-solid {
  background: var(--primary); color: white; padding: 1rem 2.5rem; border: none; font-weight: 600; cursor: pointer; margin-top: 1rem; transition: var(--transition);
}
.btn-solid:hover { background: #000; }
.contact-direct { margin-top: 4rem; font-size: 0.95rem; font-weight: 600; }

/* --- Footer --- */
.site-footer { background: var(--primary); color: white; padding: 3rem 0; font-size: 0.85rem; }
.footer-flex { display: flex; justify-content: space-between; align-items: center; }
.footer-brand { font-weight: 800; letter-spacing: 0.1em; }

/* --- WhatsApp Flotante --- */
.wa-float {
  position: fixed; bottom: 30px; right: 30px; background-color: var(--accent);
  width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
  box-shadow: 0 10px 20px rgba(37,211,102,0.3); z-index: 999; transition: transform 0.3s;
}
.wa-float:hover { transform: scale(1.1); }

/* --- Animaciones Scroll Reveal --- */
.reveal { opacity: 0; transition: all 1s ease-out; }
.reveal.fade-up { transform: translateY(40px); }
.reveal.fade-left { transform: translateX(40px); }
.reveal.fade-right { transform: translateX(-40px); }
.reveal.active { opacity: 1; transform: translate(0); }


/* --- Mobile / Responsive --- */
@media (max-width: 1200px) {
  .grid-2-cols, .service-row, .service-row.reverse, .contact-wrapper { grid-template-columns: 1fr; gap: 3rem; }
  .service-row.reverse .service-info { order: 1; }
  .service-row.reverse .service-media { order: 2; }
  .mobile-menu-toggle { display: block; }
  .contact-content { padding: 4rem 1.25rem; }
  
  /* Forzar el pie de página renglón por renglón */
  .footer-flex {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  /* Centrar los íconos de redes sociales */
  .footer-social-wrap {
    justify-content: center;
  }

/* 1. Menú Móvil (SOTA: Estructura de despliegue) */
  .nav-list { 
    display: none; 
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0; /* NUEVO: Reemplaza a width: 100%; */
    box-sizing: border-box; /* NUEVO: Previene que el padding expanda la caja */
    background: var(--bg-white);
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    gap: 1.5rem;
    text-align: center;
  }
  .nav-list.active {
    display: flex; /* Se activará mediante JavaScript */
  }

  .site-header:not(.scrolled) .nav-link {
    color: var(--primary);
  }

/* 3. Sección de Contacto (Croquis al final en móviles) */
  .contact-content {
    order: 1; /* Forzamos que el texto y el botón de WhatsApp aparezcan primero (arriba) */
    padding-bottom: 0; /* Quitamos espacio extra inferior para que conecte mejor con el dibujo */
  }
  
  .contact-media {
    display: flex; /* Hacemos visible el croquis (sobrescribe el display:none anterior si lo tenías) */
    order: 2; /* Mandamos el dibujo de la casa al final (abajo) */
    padding: 0 1.25rem 3rem 1.25rem; /* Le damos un respiro antes de llegar al pie de página */
  }
}

/* --- COMPONENTES MIGRADOS DE LA OPCIÓN 4 --- */

/* Botones Adicionales en el Hero */
.hero-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.btn-solid, .btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; font-weight: 700; border-radius: 4px; transition: var(--transition); cursor: pointer; text-align: center; }

/* 1. ESTILOS BASE DE LOS BOTONES (Visibles para Celulares y PC) */
.btn-solid { background: var(--primary); color: white; border: none; }
.btn-whatsapp { background: #25D366; }
.btn-outline { 
  border: 2px solid var(--bg-white); 
  color: var(--bg-white); 
  /* SOTA: Efecto Cristal Ahumado (Glassmorphism) */
  background: rgba(10, 25, 47, 0.65); /* Azul oscuro semitransparente */
  backdrop-filter: blur(0.4px); 
  -webkit-backdrop-filter: blur(0.4px); 
}

/* 2. EFECTOS HOVER AISLADOS (Solo visibles para computadoras con Mouse real) */
@media (hover: hover) {
  .btn-solid:hover { background: #000; }
  .btn-whatsapp:hover { background: #1EBE57; transform: translateY(-2px); }
  .btn-outline:hover { background: var(--bg-white); color: var(--primary); }
}

/* Listas de Servicios (Viñetas personalizadas) */
.service-icon-wrap { color: #64748B; margin-bottom: 1rem; }
/* Espaciado para que el título respire antes de iniciar la lista */

.service-title {
  /* SOTA: El texto medirá mínimo 1.5rem, crecerá dinámicamente según la pantalla, con un máximo de 2rem */
  font-size: clamp(1.5rem, 4vw, 2rem); 
  color: var(--primary);
  margin-bottom: 1.5rem; 
  line-height: 1.2;
}

.service-list { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.service-list li { position: relative; padding-left: 1.5rem; }
.service-list li::before { content: "•"; color: var(--primary); font-weight: bold; position: absolute; left: 0; font-size: 1.2rem; line-height: 1; }

/* =========================================================
   SOTA: LIDERAZGO ACADÉMICO (JERARQUÍA Y HOVER EFFECTS)
   ========================================================= */

/* Grados Base (Cúspide de la pirámide) */
.degrees-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); 
  gap: 2rem; 
  margin-bottom: 4rem;
}

.degree-card { 
  display: flex; 
  align-items: center; 
  justify-content: center;
  gap: 1.5rem; 
  background: var(--bg-white); 
  padding: 2rem; 
  border-radius: 8px; 
  border: 1px solid #E2E8F0; 
  transition: var(--transition); 
}

.degree-info h4 { font-size: 1.15rem; color: var(--primary); margin-bottom: 0.25rem; font-weight: 800; }
.degree-info p { font-size: 0.95rem; color: var(--secondary); margin: 0; line-height: 1.4; }

/* El truco del color en las imágenes */
.uni-logo { 
  width: 80px; 
  height: 80px; 
  object-fit: contain; 
  /* Inicia en blanco y negro, ligeramente opaco */
  filter: grayscale(100%) opacity(60%); 
  transition: var(--transition); 
  flex-shrink: 0;
}

/* Al pasar el mouse, toda la tarjeta se eleva y el logo recupera su color */
.degree-card:hover { 
  border-color: var(--primary); 
  box-shadow: 0 10px 25px rgba(0,0,0,0.05); 
  transform: translateY(-5px); 
}
.degree-card:hover .uni-logo { 
  filter: grayscale(0%) opacity(100%); 
}

/* Especializaciones (Nivel inferior) */
.specialties-title {
  text-align: center;
  font-size: 1.1rem;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2.5rem;
}

.specialties-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); 
  gap: 3rem 2rem; 
  align-items: start; 
  text-align: center; 
}

.specialty-item { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 1rem; 
}

.uni-logo-small { 
  width: 140px; 
  height: 50px; 
  object-fit: contain; 
  filter: grayscale(100%) opacity(50%); 
  transition: var(--transition); 
}

.specialty-item span { 
  font-size: 0.85rem; 
  font-weight: 600; 
  color: var(--secondary); 
  line-height: 1.4; 
  transition: var(--transition);
}

.specialty-item:hover .uni-logo-small { 
  filter: grayscale(0%) opacity(100%); 
}
.specialty-item:hover span { 
  color: var(--primary); 
}

/* Grid de Valores (Sección Nosotros) */
.margin-bottom-lg { margin-bottom: 5rem; }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; margin-top: 2rem; }
.value-card { 
  background: var(--bg-white); 
  border: 1px solid #E2E8F0; 
  padding: 2rem; 
  border-radius: 8px; 
  transition: var(--transition); 
  text-align: center;
}
.value-card:hover { border-color: #64748B; box-shadow: 0 10px 25px rgba(0,0,0,0.05); transform: translateY(-5px); }
.value-card h4 { font-size: 1.1rem; color: var(--primary); margin-bottom: 0.5rem; font-weight: 800; }

/* Grid de Acreditaciones expandido */
.accreditations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; margin-top: 3rem; text-align: left; }
.acc-card { background: var(--bg-light); padding: 2rem; border-left: 4px solid #64748B; transition: var(--transition); }
.acc-card:hover { border-left-color: var(--primary); background: #F1F5F9; transform: translateX(5px); }
.acc-badge { display: inline-block; font-size: 0.8rem; font-weight: 800; color: #64748B; background: #E2E8F0; padding: 0.3rem 0.6rem; border-radius: 4px; margin-bottom: 1rem; }
.acc-card h4 { font-size: 1.1rem; color: var(--primary); margin-bottom: 0.5rem; font-weight: 800; }
.acc-card p { font-size: 0.95rem; color: var(--secondary); margin: 0; }

/* Lista de Contacto Directo (Reemplaza el formulario) */
.contact-info-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.info-item { display: flex; align-items: center; gap: 1rem; font-weight: 600; color: var(--primary); }
/* NUEVO: Tipografía fluida SOTA para que el email y teléfono no se corten */

.info-item a, .info-item span {
  font-size: clamp(0.85rem, 4vw, 1.1rem); /* Ajuste elástico del tamaño de fuente */
  word-break: break-word; /* Permite romper el correo largo si es necesario */
}

.info-item svg { color: #64748B; flex-shrink: 0; }

/* =========================================================
   SOTA: TÍTULO Y SUBTÍTULO AL MISMO NIVEL (SPLIT HEADER)
   ========================================================= */

.split-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  margin-bottom: 4rem;
}

.split-header .section-title {
  margin-bottom: 0; /* Elimina márgenes extra para un centrado perfecto */
}

.split-header .section-subtitle {
  margin: 0;
  max-width: 100%;
}

/* Solo se aplica en pantallas medianas y grandes (Tablets/Escritorio) */
@media (min-width: 992px) {
  .split-header {
    flex-direction: row;
    align-items: center; /* Centra ambos textos verticalmente */
    justify-content: space-between;
    gap: 4rem; /* Espacio de respiración entre el título y el texto */
  }
  
  .split-header .section-title {
    flex: 1; /* Toma la mitad izquierda */
  }
  
  .split-header .section-subtitle {
    flex: 1; /* Toma la mitad derecha */
    font-size: 1.15rem; 
    /* Toque de diseño editorial opcional: */
    border-left: 2px solid var(--primary, #0A192F); 
    padding-left: 1.5rem;
  }
}

/* =========================================================
   AJUSTE SOTA: JERARQUÍA Y LEGIBILIDAD (SUBTÍTULOS Y LISTAS)
   ========================================================= */

/* 1. Darle más cuerpo y presencia al subtítulo */
.section-subtitle, 
.text-body {
  font-size: 1.25rem; /* Subimos de 1.125rem a 1.25rem */
  font-weight: 500; /* Le damos un peso medio para que no se vea tan frágil */
  color: #475569; /* Un gris un poco más oscuro y legible que el actual --text-muted */
  line-height: 1.6;
}

/* 2. Aumentar el tamaño de las listas de servicios */
.service-list li {
  font-size: 1.1rem; /* Subimos de 0.975rem a 1.1rem para mejor lectura */
  font-weight: 500;
  color: var(--primary, #0A2540); /* Usar un tono más oscuro en lugar de gris claro */
  margin-bottom: 0.5rem; /* Separación extra entre viñetas */
}

/* 3. Ajuste opcional para el número "01" (que también se ve algo pálido en la imagen) */
.service-number {
  color: #94A3B8; /* Asegurar que no sea demasiado claro */
  font-weight: 400;
}

/* =========================================================
   SOTA: BRANDING UNIFICADO (HEADER & FOOTER)
   ========================================================= */

/* 1. El Logo SVG (Aumentado a 48px para equilibrar 2 líneas de texto) */
.brand-icon {
  height: 48px; 
  width: auto;
  flex-shrink: 0;
  transition: var(--transition);
}

/* 2. Contenedor flex para alinear perfectamente SVG y Textos */
.logo-link, 
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem; 
  text-align: left;
}

/* 3. La caja de los textos */
.brand-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-title {
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 1.55rem;
  line-height: 1.1;
  color: inherit;
}

.brand-subtitle {
  font-weight: 600;
  opacity: 0.75;
  font-size: 1.05rem;
  margin-top: 0.15rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: inherit;
}

/* 4. Colores Dinámicos (El superpoder del menú flotante) */
/* SVG y Textos se vuelven blancos en el inicio (fondo oscuro) */
.site-header:not(.scrolled) .brand-icon,
.site-header:not(.scrolled) .brand-text-wrapper {
  color: var(--bg-white);
}

/* SVG y Textos regresan al azul corporativo al hacer scroll */
.site-header.scrolled .brand-icon,
.site-header.scrolled .brand-text-wrapper {
  color: var(--primary);
}

/* Escudo Responsivo para Móviles (Evita el salto de línea en el texto del Logo) */
@media (max-width: 576px) {
  .brand-icon {
    height: 48px; /* Regresa al tamaño compacto original */
  }
  .brand-title {
    font-size: 1.2rem; /* Regresa al tamaño compacto original */
  }
  .brand-subtitle {
    font-size: 0.8rem; /* Garantiza que encaje en una sola línea */
  }
}

/* =========================================================
   SOTA: LETRERO DE COOKIES (MARQUESINA INFINITA)
   ========================================================= */
.cookie-banner.marquee-style {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  
  /* Efecto Cristal Ahumado SOTA (Mismo ADN que tu botón Explorar Servicios) */
  background: rgba(10, 25, 47, 0.45); 
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  
  display: flex;
  align-items: center;
  height: 60px; /* Altura delgada, no estorba */
  z-index: 9999;
  
  /* Estado inicial: oculto bajo la pantalla */
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.cookie-banner.marquee-style.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* El túnel donde corre el texto */
.marquee-track-container {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: 100%;
  /* Desvanecimiento elegante en los bordes para que el texto no se corte de tajo */
  mask-image: linear-gradient(to right, transparent, black 2%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 95%, transparent);
}

.marquee-track {
  display: inline-block;
  white-space: nowrap;
  /* 25s es la velocidad ideal de lectura. Súbela para hacerlo más lento */
  animation: marqueeScroll 25s linear infinite; 
}

.marquee-text {
  font-size: 0.85rem;
  color: var(--bg-white);
  font-weight: 500;
  letter-spacing: 0.05em;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
}

/* La cabina del botón: Se mantiene fija, opaca y protege al botón del texto móvil */
.marquee-button-wrapper {
  padding: 0 1.5rem;
  background: var(--primary); /* Azul sólido para esconder el texto que pasa por debajo */
  height: 100%;
  display: flex;
  align-items: center;
  /* Proyecta una sombra hacia la izquierda para dar profundidad a la marquesina */
  box-shadow: -10px 0 20px rgba(10, 25, 47, 0.9);
  z-index: 2;
}

/* Modificador del botón cristal para que embone en la barra */
.btn-marquee {
  padding: 0.4rem 1.2rem;
  font-size: 0.8rem;
  border-width: 1px;
}

/* SOTA Móvil: Ajuste milimétrico para celulares */
@media (max-width: 576px) {
  .cookie-banner.marquee-style {
    height: 55px; /* Ligeramente más delgado */
  }
  .marquee-text {
    font-size: 0.8rem;
  }
  .marquee-button-wrapper {
    padding: 0 1rem;
  }
  .btn-marquee {
    padding: 0.35rem 0.8rem;
    font-size: 0.75rem;
  }
}

/* =========================================================
   SOTA: FORMATO LEGAL Y PRIVACIDAD
   ========================================================= */
.legal-content h3 {
  font-size: 1.2rem;
  color: var(--primary);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.legal-content p, .legal-content ul {
  font-size: 1.05rem;
  color: var(--secondary);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.legal-content ul {
  padding-left: 1.5rem;
}

.legal-content li {
  margin-bottom: 0.5rem;
}

/* El truco mágico para esconder la dirección en una imagen sin romper el texto */
.inline-address {
  display: inline-block;
  height: 0.7em; /* Ligeramente más alto para que sea legible */
  vertical-align: middle; /* Lo centra perfectamente con las letras */
  margin: 0 1px; /* Da un respiro a los lados para que no se pegue a las comas */
  transform: translateY(-0.0px); /* Ajuste óptico fino hacia arriba o abajo */
}

/* =========================================================
   SOTA: CABECERA LEGAL (PRIVACIDAD) - CRISTAL NATIVO
   ========================================================= */

/* Dejamos que el fondo y el Glassmorphism funcionen solos. 
   SOLO forzamos a que el logo y el texto sean azul marino SIEMPRE. */
.legal-page .site-header .brand-icon,
.legal-page .site-header .brand-text-wrapper,
.legal-page .site-header .brand-icon g {
  color: var(--primary) !important;
}

/* Diseño del botón de regreso (Azul corporativo) */
.btn-legal-back {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  transition: var(--transition);
}

@media (hover: hover) {
  .btn-legal-back:hover {
    background-color: var(--primary);
    color: var(--bg-white);
  }
}

/* Escudo protector para empujar el texto del documento hacia abajo */
.legal-page {
  padding-top: 100px;
}