/* ==========================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ========================================== */
:root {
  --azul-electrico: #017EFD;
  --azul-oscuro: #0F2042;
  --verde-agua: #17C1A3;
  --gris-texto: #556075;
  --gris-borde: #E2E8F0;
  --fondo-claro: #F4F7FC;
  --blanco: #FFFFFF;

  --bg-body: var(--blanco);
  --bg-superficie: var(--blanco);
  --bg-superficie-alterna: var(--fondo-claro);
  --texto-principal: var(--azul-oscuro);
  --texto-secundario: var(--gris-texto);
  --borde: var(--gris-borde);
}

html[data-theme="dark"] {
  /* --bg-body ahora coincide exactamente con el color al que funde el
     difuminado de la derecha del Hero (--bg-superficie-alterna) — antes
     eran dos tonos de azul oscuro ligeramente distintos (#0B1120 vs
     #0F1729) y se notaba una costura de color entre el fondo general de
     la página y cualquier sección que sí usara el color del hero. */
  --bg-body: #0F1729;
  --bg-superficie: #131C31;
  --bg-superficie-alterna: #0F1729;
  --texto-principal: #F1F5F9;
  --texto-secundario: #A9B4C4;
  --borde: #253148;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  color: var(--texto-secundario);
  overflow-x: hidden;
  background-color: var(--bg-body);
  transition: background-color 0.3s ease, color 0.3s ease;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ==========================================
   2. ESTILOS DEL HEADER
   ========================================== */
.main-header {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.main-header.is-scrolled {
  position: fixed;
  background-color: var(--bg-superficie);
  border-bottom: 1px solid var(--borde);
}

.header-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 34px;
  width: auto;
  display: block;
}

.nav-menu {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  min-width: 0;
}

.nav-link {
  font-size: 14px;
  font-weight: 600;
  color: #2D3748;
  padding: 12px 0;
  position: relative;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--verde-agua);
}

.nav-link:hover::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--verde-agua);
  border-radius: 99px;
}

button.nav-link.logout-btn {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

html[data-theme="dark"] .nav-link {
  color: #FFFFFF;
}

/* Header flotando sobre el hero (sin scroll): el color del texto sigue al
   tema activo (--texto-principal) en vez de forzar blanco siempre, para que
   en modo claro las letras sigan siendo legibles sobre la imagen clara. */
.main-header:not(.is-scrolled) .nav-link {
  color: var(--texto-principal);
}

.main-header:not(.is-scrolled) .nav-link.active {
  color: var(--verde-agua);
}

.nav-link.active {
  color: var(--verde-agua);
  font-weight: 700;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--verde-agua);
  border-radius: 99px;
}

/* Redes Sociales */
.social-media {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-left: 20px;
  padding-left: 16px;
  padding-right: 20px;
  border-left: 1px solid var(--borde);
}

.social-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Los PNG son blancos sobre transparente (pensados para fondo oscuro) —
     en modo claro casi no se ven contra el fondo claro del footer, así
     que se tiñen al azul de marca (#1E77F5) con el mismo truco de filtro
     que usan los logos de Aliados: invert(1) los vuelve negros primero,
     el resto de la cadena los tiñe al azul exacto. */
  filter: invert(1) brightness(0) saturate(100%) invert(31%) sepia(94%) saturate(3207%) hue-rotate(210deg) brightness(99%) contrast(96%);
}

html[data-theme="dark"] .social-icon img {
  /* En oscuro ya son blancos sobre el fondo oscuro del footer — se dejan
     tal cual, sin filtro. */
  filter: none;
}

.social-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 82, 255, 0.15);
}

/* ==========================================
   3. ESTILOS COMUNES Y BOTONES
   ========================================== */
.highlight-blue {
  color: var(--azul-electrico);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--azul-electrico);
  color: var(--blanco);
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(0, 82, 255, 0.3);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--azul-oscuro);
  transform: translateY(-2px);
}

.btn-primary--hero {
  background: linear-gradient(90deg, #17C1A3, var(--azul-electrico));
  box-shadow: 0 8px 22px rgba(0, 82, 255, 0.35);
}

.btn-primary--hero:hover {
  background: linear-gradient(90deg, #14A88E, var(--azul-oscuro));
}

.header-login-btn {
  padding: 8px 20px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: none;
}

.header-login-btn:hover {
  transform: none;
}

.arrow {
  font-size: 18px;
  transition: transform 0.2s ease;
}

.btn-primary:hover .arrow {
  transform: translateX(4px);
}

/* Botón "Demo" del header — modo claro: relleno blanco con borde azul.
   Modo oscuro: relleno azul (color de marca) con borde blanco. */
.demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background-color: #FFFFFF;
  color: var(--azul-electrico);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border: 1.5px solid var(--azul-electrico);
  border-radius: 50px;
  opacity: 0.85;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

.demo-btn:hover {
  opacity: 1;
}

html[data-theme="dark"] .demo-btn {
  background-color: var(--azul-oscuro);
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.demo-btn-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.demo-btn:hover .demo-btn-arrow {
  transform: translateX(3px);
}

.demo-btn-wrap {
  position: relative;
}

button.demo-btn {
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
}

.demo-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 260px;
  background: var(--bg-superficie, #fff);
  border: 1px solid var(--borde, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(15, 32, 66, 0.25);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1200;
}

.demo-popover.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.demo-popover-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texto-principal, #0F2042);
  margin-bottom: 12px;
}

.demo-popover-cred {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--fondo-claro, #F4F7FC);
  margin-bottom: 10px;
}

.demo-popover-role {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--azul-electrico);
  margin-bottom: 4px;
}

.demo-popover-line {
  font-size: 12.5px;
  color: var(--texto-secundario, #556075);
}

.demo-popover-line strong {
  color: var(--texto-principal, #0F2042);
  font-weight: 600;
}

.demo-popover-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border-radius: 10px;
  background: var(--azul-electrico);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.demo-popover-go:hover {
  opacity: 0.9;
}

.section-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--texto-principal);
  margin-bottom: 16px;
}

.section-desc {
  font-size: 16px;
  color: var(--texto-secundario);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* ==========================================
   4. SECCIÓN HERO
   ========================================== */
.hero-section {
  padding-top: 60px;
  padding-bottom: 140px;
  position: relative;
  background: linear-gradient(160deg, var(--bg-body) 0%, var(--bg-superficie-alterna) 55%, #ECF1F9 100%);
}

html[data-theme="dark"] .hero-section {
  background: var(--bg-superficie-alterna);
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--bg-body) 0%, var(--bg-body) 38%, rgba(244, 247, 252, 0.75) 52%, transparent 72%);
}

html[data-theme="dark"] .hero-bg-overlay {
  background: linear-gradient(90deg, var(--bg-superficie-alterna) 0%, var(--bg-superficie-alterna) 38%, rgba(15, 23, 41, 0.75) 52%, transparent 72%);
}

/* --------------------------------------------------------------------
   FRANJA DE TRANSICIÓN HERO -> SIGUIENTE SECCIÓN (blur progresivo)
   --------------------------------------------------------------------
   Un solo backdrop-filter con mask no sirve: el blur aparece "de golpe"
   en el punto donde el mask empieza a revelarlo (0 -> 45px instantáneo),
   y esa transición abrupta del blur en sí es lo que se ve como una línea
   dura, aunque el color sí se difumine bien.

   Solución: apilar 3 capas (el elemento base + ::before + ::after) con
   blur CRECIENTE (8px -> 22px -> 50px) que se revelan en puntos distintos
   y se solapan. Así el ojo nunca ve un salto de "nítido" a "muy borroso",
   sino una rampa continua. La última capa además lleva el degradado de
   color que empalma con el fondo sólido de la sección siguiente.

   Requiere que .hero-section NO tenga overflow:hidden, si no el navegador
   recorta el borde del filtro y vuelve a verse una línea dura.
   -------------------------------------------------------------------- */
/* IMPORTANTE: .pilares-section tiene margin-top:-90px y z-index:4, o sea
   se monta 90px encima del hero y por delante de esta franja (z-index:2).
   Esos últimos 90px de la franja quedan tapados por un rectángulo SÓLIDO
   Y PLANO sin importar qué tan bien difuminado esté el gradiente ahí abajo.
   Por eso el color de esta franja debe llegar a 100% opaco/sólido bien
   ANTES de esos últimos 90px (dejamos margen de sobra) — así, cuando
   pilares-section lo tape, ya es exactamente el mismo color plano y el
   corte se vuelve invisible.

   La franja se mantiene BAJA (180px) a propósito: cuanto más alta, más
   sube el blur hacia la imagen y termina difuminando al personaje. Con
   180px, toda la actividad (blur + color) queda comprimida en el primer
   40% de la franja (0-72px desde arriba, es decir pegado a los últimos
   ~110-180px sobre el borde del hero) — lo suficientemente abajo para no
   tocar la mascota, y con margen de sobra para llegar a color sólido
   antes de que empiece a taparla pilares-section a los 90px del final. */
.hero-bg-fade,
.hero-bg-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 180px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* .hero-bg-fade-bottom solo existe para el layout de teléfono (borde
   inferior); en escritorio el borde inferior ya lo cubre .hero-bg-fade. */
.hero-bg-fade-bottom {
  display: none;
}

.hero-bg-fade,
.hero-bg-fade::before,
.hero-bg-fade::after,
.hero-bg-fade-bottom,
.hero-bg-fade-bottom::before,
.hero-bg-fade-bottom::after {
  -webkit-backdrop-filter: blur(var(--fade-blur, 6px));
  backdrop-filter: blur(var(--fade-blur, 6px));
}

/* Capa 1: blur muy suave, empieza a revelarse casi desde arriba de la franja */
.hero-bg-fade,
.hero-bg-fade-bottom {
  --fade-blur: 6px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 100%);
}

/* Capa 2: blur medio, se revela un poco más abajo, solapando la capa 1 */
.hero-bg-fade::before,
.hero-bg-fade-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  --fade-blur: 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 8%, black 30%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 8%, black 30%, black 100%);
}

/* Capa 3: blur máximo + el degradado de color. Llega a color 100% SÓLIDO
   al 38% de la altura (68px de 180px) — bien antes del punto donde
   pilares-section empieza a taparla (al 50%, es decir a 90px del final).
   Del 38% al 100% ya es puro color plano, así que el tapado de pilares
   cae sobre una zona ya idéntica a su propio fondo: sin costura visible. */
.hero-bg-fade::after,
.hero-bg-fade-bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  --fade-blur: 34px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 12%, black 40%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 12%, black 40%, black 100%);
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 10%,
    rgba(244, 247, 252, 0.75) 24%,
    var(--bg-superficie-alterna) 38%,
    var(--bg-superficie-alterna) 100%);
}

/* El tinte usa el MISMO azul que el color final (#0F1729 = rgb(15,23,41),
   igual que --bg-superficie-alterna en oscuro), variando solo la opacidad.
   Un tinte de tono distinto al del color final crea un salto de HUE (no
   de opacidad) justo al resolver, y eso se ve como línea aunque el blur
   esté perfectamente calculado. */
html[data-theme="dark"] .hero-bg-fade::after {
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 10%,
    rgba(15, 23, 41, 0.75) 24%,
    var(--bg-superficie-alterna) 38%,
    var(--bg-superficie-alterna) 100%);
}

.hero-blobs,
.section-blobs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-blobs {
  z-index: 2;
}

.section-blobs {
  z-index: 0;
}

.hero-blobs svg,
.section-blobs svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-blobs .blob-1,
.section-blobs .blob-1 {
  fill: var(--azul-electrico);
  opacity: 0.10;
}

.hero-blobs .blob-2,
.section-blobs .blob-2 {
  fill: var(--azul-oscuro);
  opacity: 0.12;
}

.hero-blobs .blob-3,
.section-blobs .blob-3 {
  fill: var(--gris-texto);
  opacity: 0.10;
}

.hero-blobs .blob-4,
.section-blobs .blob-4 {
  fill: var(--azul-electrico);
  opacity: 0.08;
}

html[data-theme="dark"] .hero-blobs .blob-1,
html[data-theme="dark"] .hero-blobs .blob-4,
html[data-theme="dark"] .section-blobs .blob-1,
html[data-theme="dark"] .section-blobs .blob-4 {
  opacity: 0.18;
}

html[data-theme="dark"] .hero-blobs .blob-2,
html[data-theme="dark"] .section-blobs .blob-2 {
  fill: var(--azul-electrico);
  opacity: 0.20;
}

html[data-theme="dark"] .hero-blobs .blob-3,
html[data-theme="dark"] .section-blobs .blob-3 {
  fill: var(--gris-borde);
  opacity: 0.12;
}

/* Eleva el contenido directo de cualquier sección con blobs por encima de ellos */
.nosotros-section > *:not(.section-blobs):not(.nosotros-circle),
.soluciones-section > *:not(.section-blobs):not(.soluciones-circle),
.aliados-section > *:not(.section-blobs):not(.aliados-circle),
.servicios-section > *:not(.section-blobs):not(.servicios-circle),
.portafolio-section > *:not(.section-blobs):not(.portafolio-circle),
.qr-form-section > *:not(.section-blobs):not(.qr-form-circle):not(.qr-form-waves) {
  position: relative;
  z-index: 1;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  padding-top: var(--header-overlap, 0px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  position: relative;
  z-index: 3;
  min-height: 560px;
}

.hero-text-content {
  flex: 1;
  min-width: 0;
  width: 100%;
  position: relative;
  z-index: 3;
}

.hero-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-electrico);
  margin-bottom: 14px;
}

html[data-theme="dark"] .hero-eyebrow {
  color: #6FCBFF;
}

.hero-title {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--texto-principal);
  margin-bottom: 24px;
  overflow-wrap: break-word;
}

html[data-theme="dark"] .hero-title {
  color: #FFFFFF;
}

.hero-description {
  font-size: 18px;
  line-height: 1.6;
  color: var(--texto-secundario);
  margin-bottom: 32px;
  max-width: 500px;
}

html[data-theme="dark"] .hero-description {
  color: #B8C4DA;
}

.hero-badges {
  display: flex;
  gap: 24px;
  margin-top: 48px;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge-icon {
  font-size: 24px;
}

.badge-item strong {
  display: block;
  font-size: 14px;
  color: var(--texto-principal);
  font-weight: 700;
}

.badge-item p {
  font-size: 12px;
  color: var(--texto-secundario);
}

html[data-theme="dark"] .badge-item strong {
  color: #FFFFFF;
}

html[data-theme="dark"] .badge-item p {
  color: #96A5C2;
}


.wave-separator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 3;
}

.wave-separator svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 60px;
}

.wave-separator .shape-fill {
  fill: var(--bg-superficie-alterna);
}

/* ==========================================
   4B. SECCIÓN PILARES (íconos circulares flotando sobre el hero)
   ========================================== */
.pilares-section {
  position: relative;
  background-color: var(--bg-superficie-alterna);
  padding: 0 24px 56px;
  margin-top: -90px;
  z-index: 4;
}

.pilares-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.pilar-icon {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  animation: pilarFloat 4s ease-in-out infinite;
}

/* Esfera 3D sólida: highlight pequeño y concentrado arriba-izquierda,
   degradado continuo de claro a oscuro hacia abajo — sin sombra superpuesta.
   Las tres esferas comparten el mismo cian/turquesa. */
.pilar-icon--seguridad,
.pilar-icon--evolucion,
.pilar-icon--resultados {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95), rgba(255,255,255,0) 18%),
    radial-gradient(circle at 42% 38%, #7CF3EA, #00C9D4 45%, #026B78 100%);
  box-shadow: 0 16px 36px -10px rgba(0, 201, 212, 0.55);
}

.pilar-item:nth-child(2) .pilar-icon {
  animation-delay: 0.4s;
}

.pilar-item:nth-child(3) .pilar-icon {
  animation-delay: 0.8s;
}

@keyframes pilarFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.pilar-icon-svg {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

@media (prefers-reduced-motion: reduce) {
  .pilar-icon {
    animation: none;
  }
}

.pilar-item h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #19B6BC;
  margin-bottom: 6px;
}

.pilar-item p {
  font-size: 14.5px;
  color: var(--texto-secundario);
  line-height: 1.5;
}

@media (max-width: 720px) {
  .pilares-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ==========================================
   4C. SECCIÓN "SERVICIOS QUE IMPULSAN TU NEGOCIO"
   (4 tarjetas en cinta diagonal con foto de fondo)
   ========================================== */
.impulso-section {
  padding: 90px 24px 40px;
  background-color: var(--bg-superficie-alterna);
}

.impulso-header {
  max-width: 1200px;
  margin: 0 auto 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.impulso-header h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--texto-principal);
  max-width: 480px;
}

.impulso-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-secundario);
  max-width: 300px;
  border-left: 2px solid #1E77F5;
  padding-left: 18px;
}

.impulso-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.impulso-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Ciclo automático (ver JS en index.html): la tarjeta activa crece y el
     resto se reparte el espacio restante — flex-grow anima suave porque
     el ancho real de cada .impulso-card-banner es 100% del flex item. */
  flex: 1 1 0;
  transition: flex-grow 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  /* Se solapan levemente para que el corte diagonal de una tarjeta
     "encaje" visualmente con el de la siguiente, como una cinta continua */
  margin-left: -18px;
  /* clip-path: polygon(...) no soporta border-radius (los vértices del
     paralelogramo siempre quedan filosos). Truco: este contenedor recorta
     con overflow:hidden + border-radius, redondeando las puntas que el
     paralelogramo interno deja sobresaliendo arriba/abajo. */
  border-radius: 14px;
  overflow: hidden;
  /* TiltedCard (React Bits, portado a JS+CSS vanilla): inclinación 3D con
     el mouse — ver el <script> con [data-tilt] en index.html. */
  perspective: 800px;
  will-change: transform, flex-grow;
}

.impulso-card:first-child {
  margin-left: 0;
}

.impulso-card.is-active {
  flex-grow: 2.6;
}

.impulso-card-banner {
  position: relative;
  height: 320px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  /* Corte en paralelogramo: el filo izquierdo y derecho se inclinan en el
     mismo ángulo, así al solapar con margin-left negativo encajan sin
     dejar huecos ni picos sueltos entre tarjetas. */
  clip-path: polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
  transition: transform 0.3s ease;
}

.impulso-card:hover .impulso-card-banner {
  transform: translateY(-4px);
}

/* Foto real de fondo por tarjeta, sin tinte de color — se ve tal cual.
   La legibilidad del número (arriba) y del texto (abajo) ya no depende de
   un degradado sobre toda la imagen: el número lleva text-shadow y el
   texto tiene su propio fondo con blur (.impulso-card-content). */
.impulso-card--infra .impulso-card-banner {
  background-image: url('../assets/servicios/servicio-infraestructura.png');
  background-size: cover;
  background-position: center;
}
.impulso-card--ciber .impulso-card-banner {
  background-image: url('../assets/servicios/servicio-ciberseguridad.png');
  background-size: cover;
  background-position: center;
}
.impulso-card--digital .impulso-card-banner {
  background-image: url('../assets/servicios/servicio-desarrollo.png');
  background-size: cover;
  background-position: center;
}
.impulso-card--soporte .impulso-card-banner {
  background-image: url('../assets/servicios/servicio-soporte.png');
  background-size: cover;
  background-position: center;
}
.impulso-card--consultoria .impulso-card-banner {
  background-image: url('../assets/servicios/servicio-consultoria.png');
  background-size: cover;
  background-position: center;
}

html[data-theme="dark"] .impulso-card--infra .impulso-card-banner {
  background-image: url('../assets/servicios/servicio-infraestructura.png');
}
html[data-theme="dark"] .impulso-card--ciber .impulso-card-banner {
  background-image: url('../assets/servicios/servicio-ciberseguridad.png');
}
html[data-theme="dark"] .impulso-card--digital .impulso-card-banner {
  background-image: url('../assets/servicios/servicio-desarrollo.png');
}
html[data-theme="dark"] .impulso-card--soporte .impulso-card-banner {
  background-image: url('../assets/servicios/servicio-soporte.png');
}
html[data-theme="dark"] .impulso-card--consultoria .impulso-card-banner {
  background-image: url('../assets/servicios/servicio-consultoria.png');
}

.impulso-number {
  display: block;
  font-size: 40px;
  font-weight: 800;
  color: #1E77F5;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
  /* Halo blanco reforzado para que nunca se pierda, sin importar qué tan
     clara u oscura sea la foto justo detrás. */
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 6px rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Transición foto → texto sin corte: el fondo del bloque de contenido es
   un degradado que arranca totalmente transparente (se funde con la foto,
   sin línea de división) y se va haciendo sólido hacia abajo. El blur
   acompaña la misma curva para que no se note un límite duro del blur.
   Empieza a cubrir desde el 30% (más arriba que antes) para que el fundido
   sea más largo y gradual. */
.impulso-card-content {
  position: relative;
  z-index: 2;
  /* El banner tiene un clip-path en paralelogramo (corte diagonal de 24px
     en las esquinas inferior-izq/superior-der). Este bloque es rectangular
     y va pegado al fondo (align-items:flex-end del banner), así que sin
     este ensanche la cuña diagonal de la esquina inferior-izquierda queda
     "vacía" de overlay y se ve un triángulo de la foto sin cubrir.
     Se ensancha 30px por lado; el overflow:hidden del banner recorta el
     sobrante, así no se nota que ya no mide exactamente 100%. */
  width: calc(100% + 60px);
  margin-left: -30px;
  padding: 56px 52px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 30%, transparent 100%);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0) 100%);
  transition: opacity 0.3s ease;
}

.impulso-card-content h3 {
  font-size: 15px;
  font-weight: 700;
  color: #0B1224;
  margin-bottom: 4px;
}

.impulso-card-content p {
  font-size: 12.5px;
  line-height: 1.5;
  color: #3A4356;
  /* Solo la tarjeta activa (más ancha) tiene espacio cómodo para la
     descripción completa sin partirse en muchas líneas. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html[data-theme="dark"] .impulso-card-content {
  background: linear-gradient(0deg, rgba(6, 15, 35, 0.92) 0%, rgba(6, 15, 35, 0.92) 30%, rgba(6, 15, 35, 0) 100%);
}

html[data-theme="dark"] .impulso-number {
  /* En oscuro el fondo del overlay ya es azul-oscuro — el número azul se
     perdía contra él. Blanco puro + halo azul de marca para que siga
     resaltando y sin perder la identidad de color. */
  color: #fff;
  text-shadow: 0 0 14px rgba(30, 119, 245, 0.9), 0 0 6px rgba(30, 119, 245, 0.9), 0 1px 2px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .impulso-card-content h3 {
  color: #fff;
}

html[data-theme="dark"] .impulso-card-content p {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 992px) {
  /* En pantallas chicas el ciclo de "una tarjeta grande" no cabe bien —
     se apilan en 2 columnas, todas del mismo tamaño (sin is-active). */
  .impulso-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;
  }
  .impulso-card {
    margin-left: 0;
    flex: initial;
  }
  .impulso-card.is-active {
    flex-grow: initial;
  }
  .impulso-card-banner {
    height: 260px;
    clip-path: none;
    border-radius: 16px;
  }
  .impulso-number {
    left: 20px;
  }
}

@media (max-width: 640px) {
  .impulso-grid {
    grid-template-columns: 1fr;
  }
  .impulso-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .impulso-desc {
    max-width: 100%;
  }
}

/* ==========================================
   SECCIÓN "SOLUCIONES QUE CONECTAN TU NEGOCIO"
   (entre Servicios/Impulso y Nosotros — 3 puntos unidos por una curva SVG)
   ========================================== */
.soluciones-conectan-section {
  padding: 90px 24px 170px;
  background-color: var(--bg-superficie-alterna);
  position: relative;
  overflow: hidden;
}

/* Envoltorio del carrusel de burbujas + la cinta de fondo que pasa "por
   detrás" de ellas — ambos comparten el mismo centro, para que la cinta se
   vea como una órbita que atraviesa las esferas, no una franja aparte
   arriba de la sección. */
.sol-bubbles-wrap {
  position: relative;
  /* Con .soluciones-conectan-container en align-items:start, esta columna
     arranca a la altura del título — se empuja hacia abajo para que quede
     por debajo del párrafo de la intro (que ya no se mueve, al no estar
     centrado contra esta columna más alta). */
  margin-top: 104px;
}

/* Cinta TextLoop (React Bits, portado a JS vanilla + GSAP) en forma de
   onda, centrada detrás del carrusel de burbujas (z-index menor que
   .sol-bubble) para que se lea como si pasara por detrás de las esferas.
   Vive DENTRO de .sol-bubbles (no de .sol-bubbles-wrap) para centrarse
   respecto a esos 380px fijos — el wrap crece con el detalle expandido de
   la burbuja activa, así que centrar ahí la desplazaba hacia arriba.
   A diferencia del shape "circle" (que se dimensiona por alto), la onda es
   naturalmente más ancha que alta, así que aquí se dimensiona por ANCHO
   (ocupa el mismo ancho que el carrusel) y la altura queda proporcional. */
.soluciones-conectan-bg-loop.text-loop {
  position: absolute;
  /* left/width calculados por JS (ver mountTextLoop caller) para que el
     contenedor llegue a los bordes reales de la pantalla mantieniendo
     EXACTAMENTE el mismo ratio px/unidad-de-viewBox que el diseño
     original (1200 unidades en ~820px) — así la cresta central no se
     mueve ni la onda se reescala, solo aparecen más ciclos a los lados.
     Los valores de abajo son el fallback antes de que el JS corra. */
  left: var(--loop-left, 50%);
  width: var(--loop-width, 100%);
  top: 50%;
  transform: var(--loop-transform, translate(-50%, -50%));
  z-index: 0;
  opacity: 0.09;
  pointer-events: none;
}

.soluciones-conectan-bg-loop .text-loop-svg {
  width: 100%;
  height: auto;
  display: block;
}

html[data-theme="dark"] .soluciones-conectan-bg-loop {
  opacity: 0.09;
}

/* Logo fijo en el centro de la cresta, más grande que el contenedor del
   carrusel (se desborda a propósito) — por encima de la cinta de texto
   (z-index 0) pero por debajo de las burbujas (z-index 1-3), así queda
   siempre visible sin importar cuál burbuja esté activa en el ciclo.
   Misma opacidad que la cinta (.soluciones-conectan-bg-loop) para que
   ambos elementos de fondo se sientan igual de sutiles/discretos. */
.sol-bubbles-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 160%;
  height: 160%;
  object-fit: contain;
  z-index: 0.5;
  opacity: 0.09;
  pointer-events: none;
  /* Mismo tinte azul de marca que usan los logos de Aliados, en ambos
     temas — nada de blanco. */
  filter: brightness(0) saturate(100%) invert(31%) sepia(94%) saturate(3207%) hue-rotate(210deg) brightness(99%) contrast(96%);
}

.soluciones-conectan-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  /* "start" (no "center"): el texto de la intro se ancla arriba de su
     columna en vez de centrarse verticalmente contra las burbujas (más
     altas) — así el título/párrafo queda completo por encima de donde
     pasa la cinta, sin que ambas columnas compitan por el mismo centro. */
  align-items: start;
  gap: 40px;
}

.soluciones-conectan-intro h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--texto-principal);
  margin-bottom: 14px;
}

.soluciones-conectan-intro p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-secundario);
  margin-bottom: 26px;
  max-width: 320px;
}

/* ---------- TextLoop (React Bits, portado a JS vanilla + GSAP) ---------- */
.text-loop {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.text-loop-svg {
  display: block;
  width: 100%;
  height: auto;
}

.text-loop-text {
  user-select: none;
}

.text-loop-measure {
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Ciclo de burbujas "Soluciones" (12 items, JS: sol-bubbles.js) ----------
   Las 12 burbujas viven todas en el DOM a la vez; solo 3 son visibles según
   su `data-pos` (-1/0/1 respecto a la protagonista), que sol-bubbles.js
   recalcula cada tick del setInterval. El resto (pos ±2, ±3...) se oculta
   con opacity/scale 0 pero sigue en el flujo (position: absolute), así el
   cambio de protagonista es una transición CSS, no un re-render. */
.sol-bubbles {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease, filter 0.5s ease;
  pointer-events: none;
}

.sol-bubble[data-pos="0"] {
  pointer-events: auto;
}

/* Protagonista: centrada, grande, al frente. Un poco más abajo del
   centro exacto para no tapar la punta del logo de fondo. */
.sol-bubble[data-pos="0"] {
  transform: translate(-50%, calc(-50% + 40px)) scale(1);
  opacity: 1;
  z-index: 3;
}

/* Apoyo: una a cada lado, chica, semitransparente, ancladas a los
   extremos BAJOS del arco de fondo (que sube hacia la protagonista al
   centro) — por eso llevan un translateY positivo, a diferencia de la
   protagonista que va centrada en el pico. */
.sol-bubble[data-pos="-1"] {
  transform: translate(calc(-50% - 280px), calc(-50% + 78px)) scale(0.95);
  opacity: 0.55;
  z-index: 2;
}

.sol-bubble[data-pos="1"] {
  transform: translate(calc(-50% + 280px), calc(-50% + 78px)) scale(0.95);
  opacity: 0.55;
  z-index: 2;
}

/* Todo lo demás (pos ±2 en adelante): oculto, esperando su turno. */
.sol-bubble:not([data-pos="0"]):not([data-pos="-1"]):not([data-pos="1"]) {
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  z-index: 1;
}

.sol-bubble-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sol-bubble-icon {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--azul-electrico);
  background: radial-gradient(circle at 32% 28%, #EAF1FF 0%, var(--bg-superficie-alterna) 70%);
  box-shadow: 0 8px 20px rgba(0, 82, 255, 0.18);
  transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1), height 0.6s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.4s ease;
}

.sol-bubble-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sol-bubble[data-pos="0"] .sol-bubble-icon {
  width: 260px;
  height: 260px;
  box-shadow: 0 16px 36px rgba(0, 82, 255, 0.28);
}

html[data-theme="dark"] .sol-bubble-icon {
  background: radial-gradient(circle at 32% 28%, #22345C 0%, var(--bg-superficie-alterna) 70%);
}

.sol-bubble-title {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-principal);
  max-width: 140px;
}

.sol-bubble[data-pos="0"] .sol-bubble-title {
  font-size: 19px;
  max-width: 260px;
}

/* Detalle (descripción + bullets + acciones): solo existe visualmente en
   la protagonista. En las de apoyo se colapsa a 0 altura para no empujar
   el layout ni mostrarse "a medias". */
.sol-bubble-detail {
  max-width: 340px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.4s ease 0.05s;
}

.sol-bubble[data-pos="0"] .sol-bubble-detail {
  /* 320px alcanzaba justo para desc + 3 bullets, pero en textos más
     largos (o en móvil, donde el ancho del bloque es menor y el texto
     ocupa más líneas) el contenido real superaba ese máximo y el
     overflow:hidden recortaba lo último del flujo: el botón "Ficha PDF". */
  max-height: 420px;
  opacity: 1;
  margin-top: 12px;
}

.sol-bubble-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-secundario);
  margin-bottom: 12px;
}

.sol-bubble-bullets {
  list-style: none;
  text-align: left;
  margin-bottom: 16px;
}

.sol-bubble-bullets li {
  position: relative;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--texto-principal);
}

.sol-bubble-bullets li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--azul-electrico);
}

.sol-bubble-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* .sol-bubble-link ahora comparte .btn-primary/.btn-primary--hero (mismo
   botón degradado que tenía el CTA general de la sección) — aquí solo se
   ajusta el tamaño para que quepa cómodo dentro de la burbuja. */
.sol-bubble-link {
  padding: 10px 22px;
  font-size: 13px;
  color: var(--blanco);
}

.sol-bubble-link .arrow {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.sol-bubble-link:hover .arrow {
  transform: translateX(3px);
}

.sol-bubble-pdf {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 50px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--blanco);
  background-color: var(--azul-oscuro);
  border: 1.5px solid var(--blanco);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.sol-bubble-pdf:hover {
  background-color: #16305F;
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .soluciones-conectan-container {
    grid-template-columns: 1fr;
  }
  .soluciones-conectan-intro {
    text-align: center;
  }
  .soluciones-conectan-intro p {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .sol-bubbles {
    height: 420px;
  }
  .sol-bubble[data-pos="-1"] {
    transform: translate(calc(-50% - 120px), -80px) scale(0.5);
  }
  .sol-bubble[data-pos="1"] {
    transform: translate(calc(-50% + 120px), -80px) scale(0.5);
  }
  .sol-bubble[data-pos="0"] .sol-bubble-icon {
    width: 104px;
    height: 104px;
  }
}

@media (max-width: 480px) {
  .sol-bubble[data-pos="-1"],
  .sol-bubble[data-pos="1"] {
    opacity: 0;
  }
}

/* ==========================================
   5. SECCIÓN NOSOTROS (Tarjetas Simétricas)
   ========================================== */
.nosotros-section {
  padding: 90px 24px 70px;
  background-color: var(--bg-superficie-alterna);
  position: relative;
  overflow: hidden;
}

.nosotros-top {
  max-width: 1200px;
  margin: 0 auto 56px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
}

.nosotros-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-agua);
  margin-bottom: 14px;
}

.nosotros-intro h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--texto-principal);
  margin-bottom: 18px;
}

.nosotros-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--texto-secundario);
  margin-bottom: 12px;
}

.nosotros-text-more {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.nosotros-text-more.is-expanded {
  max-height: 400px;
  opacity: 1;
  margin-bottom: 12px;
}

.nosotros-ver-mas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #1E77F5;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.nosotros-ver-mas svg {
  transition: transform 0.25s ease;
}

.nosotros-ver-mas.is-expanded svg {
  transform: rotate(180deg);
}

.nosotros-mv {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.nosotros-mv-item {
  display: flex;
  gap: 16px;
}

.nosotros-mv-num {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1E77F5;
  padding-top: 2px;
  flex-shrink: 0;
}

.nosotros-mv-content h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-principal);
  margin-bottom: 6px;
}

.nosotros-mv-content p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-secundario);
  margin: 0;
}

.nosotros-valores {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 32px;
}

.nosotros-valores-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.valores-nav {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--texto-principal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.valores-nav:hover:not(:disabled) {
  border-color: #1E77F5;
  color: #1E77F5;
}

.valores-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.valores-track-viewport {
  flex: 1;
  overflow: hidden;
}

.valores-track {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.valor-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 0 0 25%;
  min-width: 0;
  padding: 8px 18px;
  font-size: 19px;
  font-weight: 700;
  color: var(--texto-principal);
  white-space: nowrap;
  border-right: 1px solid var(--borde);
}

.valor-item:first-child {
  padding-left: 0;
}

.valor-item:last-child {
  border-right: none;
}

.valor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1E77F5;
  flex-shrink: 0;
}

.valor-icon svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 700px) {
  .valor-item {
    flex: 0 0 50%;
    font-size: 16px;
    padding: 6px 10px;
  }
  .valor-icon svg {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480px) {
  /* A 320-480px, 2 valores por vista (texto + ícono cada uno, con
     white-space:nowrap) ya no caben sin que el segundo ítem empuje su
     ícono encima del texto del primero — se reduce a 1 valor a la vez
     (el JS ya calcula VISIBLE()=1 en este rango) y se baja el tamaño de
     letra para que quepa cómodo incluso el nombre más largo. */
  .valor-item {
    flex: 0 0 100%;
    font-size: 15px;
    gap: 10px;
    border-right: none;
  }
  .valor-icon svg {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 860px) {
  .nosotros-top {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ==========================================
   6. SECCIÓN SOLUCIONES (CON GRILLA SIMÉTRICA Y MODALES)
   ========================================== */
.soluciones-section {
  padding: 100px 24px;
  background-color: var(--bg-superficie-alterna);
  position: relative;
  overflow: hidden;
}

.soluciones-circle {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: var(--azul-electrico);
  opacity: 0.06;
  animation: portafolioCircleFloat ease-in-out infinite;
}

html[data-theme="dark"] .soluciones-circle {
  opacity: 0.14;
}

.soluciones-circle-1 {
  width: 260px;
  height: 260px;
  top: 8%;
  left: 6%;
  animation-duration: 10s;
}

.soluciones-circle-2 {
  width: 180px;
  height: 180px;
  bottom: 10%;
  left: 12%;
  background: var(--azul-oscuro);
  animation-duration: 8s;
  animation-delay: -3s;
}

html[data-theme="dark"] .soluciones-circle-2 {
  background: var(--azul-electrico);
}

.soluciones-circle-3 {
  width: 220px;
  height: 220px;
  top: 12%;
  right: 8%;
  animation-duration: 9s;
  animation-delay: -5s;
}

.soluciones-circle-4 {
  width: 150px;
  height: 150px;
  bottom: 6%;
  right: 14%;
  background: var(--azul-oscuro);
  animation-duration: 7s;
  animation-delay: -1.5s;
}

html[data-theme="dark"] .soluciones-circle-4 {
  background: var(--azul-electrico);
}

.soluciones-header {
  max-width: 800px;
  margin: 0 auto 60px auto;
  text-align: center;
}

.soluciones-badge {
  display: inline-block;
  background-color: rgba(0, 82, 255, 0.1);
  color: var(--azul-electrico);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.section-title-center {
  font-size: 40px;
  font-weight: 800;
  color: var(--texto-principal);
  margin-bottom: 16px;
}

.section-desc-center {
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto-secundario);
}

.soluciones-container {
  max-width: 1200px;
  margin: 0 auto;
}

.soluciones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.solucion-card.solucion-extra {
  display: none;
}

.soluciones-grid.expanded .solucion-card.solucion-extra {
  display: flex;
  animation: fadeInCard 0.4s ease, solucionCardFloat 4.5s ease-in-out infinite;
  animation-delay: 0s, calc(var(--solucion-index, 0) * -0.9s);
}

@keyframes fadeInCard {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.soluciones-toggle-wrap {
  text-align: center;
  margin-top: 40px;
}

.btn-toggle-soluciones {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--bg-superficie);
  color: var(--azul-electrico);
  border: 1.5px solid var(--azul-electrico);
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-toggle-soluciones:hover {
  background-color: var(--azul-electrico);
  color: #fff;
}

.toggle-arrow {
  transition: transform 0.3s ease;
  display: inline-block;
}

.btn-toggle-soluciones.active .toggle-arrow {
  transform: rotate(180deg);
}

.solucion-card {
  background-color: var(--bg-superficie);
  border-radius: 24px;
  border: 1px solid var(--borde);
  box-shadow: 0 10px 30px rgba(15, 32, 66, 0.03);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  animation: solucionCardFloat 4.5s ease-in-out infinite;
  animation-delay: calc(var(--solucion-index, 0) * -0.9s);
  will-change: transform;
}

.solucion-card:nth-child(1) { --solucion-index: 0; }
.solucion-card:nth-child(2) { --solucion-index: 1; }
.solucion-card:nth-child(3) { --solucion-index: 2; }
.solucion-card:nth-child(4) { --solucion-index: 3; }
.solucion-card:nth-child(5) { --solucion-index: 4; }
.solucion-card:nth-child(6) { --solucion-index: 5; }

.solucion-card:hover {
  transform: translateY(-10px);
  border-color: var(--azul-electrico);
  box-shadow: 0 15px 35px rgba(0, 82, 255, 0.08);
}

.solucion-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--glow-angle, 0deg), transparent 0%, transparent 65%, var(--azul-electrico) 85%, var(--azul-oscuro) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.55;
  transition: opacity 0.3s ease;
  pointer-events: none;
  animation: servicioGlowSpin 3s linear infinite;
  z-index: 2;
}

.solucion-card:hover::after {
  opacity: 1;
}

@keyframes solucionCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .solucion-card,
  .solucion-card::after {
    animation: none;
  }
}

.solucion-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--azul-electrico);
}

.solucion-content {
  padding: 35px 30px 20px 30px;
  flex-grow: 1;
}

.solucion-icon {
  width: 60px;
  height: 60px;
  background-color: rgba(0, 82, 255, 0.06);
  border-radius: 16px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.solucion-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--texto-principal);
  margin-bottom: 14px;
}

.solucion-short-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-secundario);
  margin-bottom: 20px;
}

.solucion-features {
  list-style: none;
  border-top: 1px solid var(--borde);
  padding-top: 15px;
}

.solucion-features li {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--texto-principal);
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
}

.solucion-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--azul-electrico);
  font-weight: 700;
}

/* BOTONES DE ACCIÓN EN CADA TARJETA */
.solucion-actions {
  display: flex;
  gap: 12px;
  padding: 0 30px 30px 30px;
}

.btn-quick-view {
  flex: 1.2;
  background-color: var(--azul-electrico);
  color: var(--blanco);
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.btn-quick-view:hover {
  background-color: var(--azul-oscuro);
}

.btn-pdf-view {
  flex: 1;
  background-color: var(--bg-superficie);
  color: var(--azul-electrico);
  border: 1.5px solid var(--azul-electrico);
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  display: inline-block;
}

.btn-pdf-view:hover {
  background-color: rgba(0, 82, 255, 0.05);
}

.soluciones-cta {
  text-align: center;
  margin-top: 60px;
}

.soluciones-cta p {
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-principal);
  margin-bottom: 20px;
}

/* Variante para cuando el CTA vive dentro de la columna de texto de
   "Soluciones que conectan tu negocio" (alineado a la izquierda, no
   centrado como en su posición original). */
.soluciones-cta--intro {
  text-align: left;
  margin-top: 141px;
}

.soluciones-cta--intro p {
  max-width: 320px;
}

.soluciones-cta--intro .btn-primary {
  width: auto;
  font-size: 13px;
  padding: 12px 26px;
}

/* ==========================================
   7. ESTILOS DE LA VENTANA EMERGENTE (MODAL)
   ========================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 32, 66, 0.6);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  background-color: var(--bg-superficie);
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(15, 32, 66, 0.15);
  position: relative;
  overflow: hidden;
  transform: translateY(30px);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid var(--borde);
}

.modal-overlay.active .modal-container {
  transform: translateY(0);
}

/* Visor de PDF embebido (Fichas de Soluciones): mismo modal reutilizable,
   pero más ancho/alto y sin padding propio para que el iframe llene el
   espacio, en vez de abrir el PDF en una pestaña/URL aparte. El botón de
   cerrar se saca del rectángulo del modal (queda arriba, fuera del área
   del iframe) por dos razones: (1) un <iframe> siempre captura los clicks
   dentro de su área, sin importar el z-index del hermano superpuesto, y
   (2) el propio visor de PDF del navegador ya tiene sus botones (imprimir,
   descargar, zoom) en la esquina superior derecha — superponer nuestro
   botón ahí encima choca visualmente con esos íconos nativos. */
.modal-container--pdf {
  width: 88%;
  max-width: 960px;
  height: 85vh;
  max-height: 860px;
  padding: 0;
  overflow: visible;
}

.modal-container--pdf .modal-close-btn {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 14px;
  color: #fff;
  background-color: rgba(15, 32, 66, 0.55);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-container--pdf .modal-close-btn:hover {
  background-color: var(--azul-electrico);
  color: #fff;
}

.pdf-modal-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background-color: #525659;
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 25px;
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 10;
}

.modal-close-btn:hover {
  color: var(--azul-electrico);
}

.modal-body {
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.modal-header-info {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
  border-bottom: 1.5px solid var(--borde);
  padding-bottom: 20px;
}

.modal-top-icon {
  font-size: 36px;
  width: 70px;
  height: 70px;
  background-color: rgba(0, 82, 255, 0.06);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#modalTitle {
  font-size: 26px;
  font-weight: 800;
  color: var(--texto-principal);
}

.modal-scroll-area {
  overflow-y: auto;
  max-height: 42vh;
  padding-right: 15px;
}

/* Scrollbar estética personalizada para el Modal */
.modal-scroll-area::-webkit-scrollbar {
  width: 6px;
}
.modal-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}
.modal-scroll-area::-webkit-scrollbar-thumb {
  background: var(--borde);
  border-radius: 10px;
}
.modal-scroll-area::-webkit-scrollbar-thumb:hover {
  background: var(--azul-electrico);
}

.modal-section-block {
  margin-bottom: 25px;
}

.modal-section-block h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--texto-principal);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#modalDesc {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--texto-secundario);
}

.modal-bullet-list {
  list-style: none;
}

.modal-bullet-list li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-secundario);
  margin-bottom: 10px;
  position: relative;
  padding-left: 25px;
}

.modal-bullet-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--azul-electrico);
  font-weight: bold;
}

/* Color azul para destacar los beneficios del negocio */
.benefits-highlight li::before {
  color: #00D16C; /* Verde esmeralda dinámico para beneficios */
}

/* Glosario en acordeón interactivo sutil */
.modal-glossary-container {
  background-color: var(--bg-superficie-alterna);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--borde);
}

.modal-glossary-item {
  margin-bottom: 15px;
}

.modal-glossary-item:last-child {
  margin-bottom: 0;
}

.modal-glossary-item strong {
  display: block;
  font-size: 13.5px;
  color: var(--texto-principal);
  margin-bottom: 4px;
}

.modal-glossary-item p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-secundario);
}

/* Botones de acción del Modal */
.modal-footer-actions {
  border-top: 1.5px solid var(--borde);
  padding-top: 25px;
  margin-top: 15px;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.modal-btn-pdf {
  background-color: var(--bg-superficie);
  color: var(--azul-electrico);
  border: 2px solid var(--azul-electrico);
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 14px;
  transition: all 0.2s ease;
}

.modal-btn-pdf:hover {
  background-color: rgba(0, 82, 255, 0.05);
}

.modal-btn-contact {
  background-color: var(--azul-electrico);
  color: var(--blanco);
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 82, 255, 0.2);
}

.modal-btn-contact:hover {
  background-color: var(--azul-oscuro);
  box-shadow: none;
}

/* ==========================================
   8. SECCIÓN ALIADOS (Efecto de Rotación Fluida)
   ========================================== */
.aliados-section {
  padding: 80px 24px;
  background-color: var(--bg-superficie-alterna);
  position: relative;
  overflow: hidden;
}

.aliados-header {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.aliados-header .section-title-center {
  color: var(--texto-principal);
}

.aliados-header .section-desc-center {
  color: var(--texto-secundario);
}

.aliados-loop {
  /* Full-bleed: rompe el padding de .aliados-section para que el carrusel
     llegue hasta el borde real de la ventana y el fade se funda ahí — si se
     quedara limitado por el padding, esos px extra mostrarían el logo sin
     degradado justo antes del corte de overflow:hidden de la sección. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  --logoloop-fadeColor: var(--bg-superficie-alterna);
}

/* ---------- LogoLoop (React Bits, portado a JS vanilla) ---------- */
.logoloop {
  position: relative;
  --logoloop-gap: 56px;
  --logoloop-logoHeight: 32px;
}

.logoloop__track {
  display: flex;
  width: max-content;
  will-change: transform;
  user-select: none;
  position: relative;
  z-index: 0;
}

.logoloop__list {
  display: flex;
  align-items: center;
}

.logoloop__item {
  flex: 0 0 auto;
  margin-right: var(--logoloop-gap);
  display: flex;
  align-items: center;
}

.logoloop__item img {
  height: var(--logoloop-logoHeight);
  width: auto;
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
  pointer-events: none;
  /* Placeholder actual (logos a color originales), adaptado al tema:
     azul de marca (#1E77F5) en modo claro, blanco en modo oscuro.
     brightness(0) los vuelve negro puro primero; el resto de la cadena
     (invert, sepia, saturate, hue-rotate) los tiñe al color exacto.
     Cuando lleguen las versiones ya monocromáticas (blanca/azul), quitar
     este filtro y usar data-src-dark / data-src-light en su lugar. */
  filter: brightness(0) saturate(100%) invert(31%) sepia(94%) saturate(3207%) hue-rotate(210deg) brightness(99%) contrast(96%);
  opacity: 0.9;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

html[data-theme="dark"] .logoloop__item img {
  filter: brightness(0) invert(1);
}

.logoloop__item:hover img {
  opacity: 1;
}

.logoloop--fade::before,
.logoloop--fade::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(24px, 8%, 120px);
  pointer-events: none;
  z-index: 10;
}

.logoloop--fade::before {
  left: 0;
  background: linear-gradient(to right, var(--logoloop-fadeColor, #0B1224) 0%, rgba(0, 0, 0, 0) 100%);
}

.logoloop--fade::after {
  right: 0;
  background: linear-gradient(to left, var(--logoloop-fadeColor, #0B1224) 0%, rgba(0, 0, 0, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .logoloop__track {
    transform: translate3d(0, 0, 0) !important;
  }
}

/* ==========================================
   9. SECCIÓN SERVICIOS (Flexbox Simétrico)
   ========================================== */
.servicios-section {
  padding: 100px 24px;
  background-color: var(--bg-superficie-alterna);
  position: relative;
  overflow: hidden;
}

.servicios-circle {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: var(--azul-electrico);
  opacity: 0.06;
  animation: portafolioCircleFloat ease-in-out infinite;
}

html[data-theme="dark"] .servicios-circle {
  opacity: 0.14;
}

.servicios-circle-1 {
  width: 260px;
  height: 260px;
  top: 8%;
  left: 6%;
  animation-duration: 10s;
}

.servicios-circle-2 {
  width: 180px;
  height: 180px;
  bottom: 10%;
  left: 12%;
  background: var(--azul-oscuro);
  animation-duration: 8s;
  animation-delay: -3s;
}

html[data-theme="dark"] .servicios-circle-2 {
  background: var(--azul-electrico);
}

.servicios-circle-3 {
  width: 220px;
  height: 220px;
  top: 12%;
  right: 8%;
  animation-duration: 9s;
  animation-delay: -5s;
}

.servicios-circle-4 {
  width: 150px;
  height: 150px;
  bottom: 6%;
  right: 14%;
  background: var(--azul-oscuro);
  animation-duration: 7s;
  animation-delay: -1.5s;
}

html[data-theme="dark"] .servicios-circle-4 {
  background: var(--azul-electrico);
}

.servicios-header {
  max-width: 800px;
  margin: 0 auto 50px auto;
  text-align: center;
}

.servicios-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;             
  flex-wrap: wrap;           
  justify-content: center;   
  gap: 30px;
}

.servicio-card {
  background-color: var(--bg-superficie);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  flex: 1 1 calc(33.333% - 20px);
  min-width: 280px;
  max-width: 380px;
  animation: servicioCardFloat 4.5s ease-in-out infinite;
  animation-delay: calc(var(--servicio-index, 0) * -0.9s);
  will-change: transform;
  position: relative;
  z-index: 0;
  border: 1px solid var(--borde);
}

.servicio-card:nth-child(1) { --servicio-index: 0; }
.servicio-card:nth-child(2) { --servicio-index: 1; }
.servicio-card:nth-child(3) { --servicio-index: 2; }
.servicio-card:nth-child(4) { --servicio-index: 3; }
.servicio-card:nth-child(5) { --servicio-index: 4; }

.servicio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--glow-angle, 0deg), transparent 0%, transparent 65%, var(--azul-electrico) 85%, var(--azul-oscuro) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.55;
  transition: opacity 0.3s ease;
  pointer-events: none;
  animation: servicioGlowSpin 3s linear infinite;
  z-index: 1;
}

.servicio-card:hover {
  transform: translateY(-10px);
  background-color: var(--bg-superficie);
  box-shadow: 0 16px 34px rgba(15, 32, 66, 0.12);
  border-color: var(--azul-electrico);
}

.servicio-card:hover::before {
  opacity: 1;
}

@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes servicioGlowSpin {
  from { --glow-angle: 0deg; }
  to { --glow-angle: 360deg; }
}

@keyframes servicioCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .servicio-card,
  .servicio-card::before {
    animation: none;
  }
}

.servicio-icon-container {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px auto;
  position: relative;
  z-index: 2;
}

.servicio-card h3,
.servicio-card p {
  position: relative;
  z-index: 2;
}

.servicio-icon-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.servicio-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--texto-principal);
  margin-bottom: 12px;
}

.servicios-footer-btn {
  text-align: center;
  margin-top: 50px;
}

/* ==========================================
   SECCIÓN PORTAFOLIO
   ========================================== */
.portafolio-section {
  padding: 100px 24px;
  background-color: var(--bg-superficie-alterna);
  position: relative;
  overflow: hidden;
}

.portafolio-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Layout de 2 columnas: texto + Carousel (React Bits, portado) --- */
.portafolio-container--carousel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}

.portafolio-info {
  flex: 1 1 420px;
  min-width: 280px;
}

.portafolio-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-electrico);
  margin-bottom: 14px;
}

.portafolio-title-main {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--texto-principal);
  margin-bottom: 18px;
}

.portafolio-desc-main {
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto-secundario);
  max-width: 420px;
  margin-bottom: 28px;
}

.portafolio-carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--borde);
  background-color: var(--bg-superficie);
  color: var(--azul-electrico);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  box-shadow: 0 6px 18px rgba(15, 32, 66, 0.12);
}

.portafolio-carousel-arrow--prev {
  left: -64px;
}

.portafolio-carousel-arrow--next {
  right: -64px;
}

.portafolio-carousel-arrow:hover {
  background-color: var(--azul-electrico);
  border-color: var(--azul-electrico);
  color: #FFFFFF;
  transform: translateY(-50%) translateY(-2px);
}

.portafolio-carousel-wrap {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
}

/* --- Componente Carousel (React Bits), estilos base --- */
.carousel-container {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  padding: 16px;
  height: 464px;
  box-sizing: border-box;
}

.carousel-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 20px;
}

.carousel-track {
  display: flex;
  height: 100%;
}

.carousel-item {
  position: relative;
  flex-shrink: 0;
  height: 100%;
}

.carousel-indicators-container {
  display: flex;
  width: 100%;
  justify-content: center;
}

.carousel-indicators {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}

.carousel-indicator {
  height: 8px;
  width: 8px;
  border: none;
  padding: 0;
  appearance: none;
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--borde);
  transition: background-color 150ms, transform 150ms;
}

.carousel-indicator:focus-visible {
  outline: 2px solid var(--azul-electrico);
  outline-offset: 2px;
}

.carousel-indicator.active {
  background-color: var(--azul-electrico);
  transform: scale(1.2);
}

/* --- Tarjeta de proyecto dentro del Carousel --- */
.portafolio-carousel-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--bg-superficie);
  border: 1px solid var(--borde);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 32, 66, 0.06);
}

.portafolio-carousel-media {
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, var(--azul-electrico) 0%, var(--azul-oscuro) 100%);
  flex-shrink: 0;
  overflow: hidden;
}

.portafolio-carousel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Difumina la unión entre la imagen y el texto en vez de dejar un borde/
   línea dura: 3 capas de blur creciente hacia abajo (mismo patrón exacto
   que .hero-bg-fade), y la capa final agrega el degradado de color que
   termina 100% sólido en var(--bg-superficie) antes de llegar al texto. */
.portafolio-carousel-media-fade,
.portafolio-carousel-media-fade::before,
.portafolio-carousel-media-fade::after {
  -webkit-backdrop-filter: blur(var(--fade-blur, 6px));
  backdrop-filter: blur(var(--fade-blur, 6px));
}

.portafolio-carousel-media-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  pointer-events: none;
  --fade-blur: 1.5px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 35%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 35%, black 100%);
}

.portafolio-carousel-media-fade::before {
  content: '';
  position: absolute;
  inset: 0;
  --fade-blur: 4px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 25%, black 55%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 25%, black 55%, black 100%);
}

.portafolio-carousel-media-fade::after {
  content: '';
  position: absolute;
  inset: 0;
  --fade-blur: 9px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, black 70%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, black 70%, black 100%);
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 35%,
    var(--bg-superficie) 80%,
    var(--bg-superficie) 100%);
}

.portafolio-carousel-media + .portafolio-carousel-content {
  position: relative;
  margin-top: -34px;
  padding-top: 44px;
}

.portafolio-carousel-content {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portafolio-tag {
  display: none;
}

.portafolio-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--texto-principal);
  margin-bottom: 10px;
}

.portafolio-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto-secundario);
  margin-bottom: 0;
  /* Recorta a 3 líneas; "Ver más" se muestra solo si el texto real excede
     ese alto (medido por JS al montar la tarjeta). -webkit-line-clamp
     necesita display:-webkit-box para funcionar como "clamp" real (texto
     completo + "…" al límite de palabra) — dentro de una tarjeta con
     rotación 3D (rotateY del carrusel) y viewports muy angostos, ese modo
     de caja no siempre se aplica de forma consistente y el navegador
     recorta el texto a mitad de palabra sin puntos suspensivos. Se usa
     en su lugar max-height = 3 líneas con overflow:hidden normal, que no
     depende de ese modo de caja y siempre recorta por línea completa. */
  max-height: calc(1.6em * 3);
  overflow: hidden;
}

.portafolio-desc.is-expanded {
  max-height: none;
  overflow: visible;
}

.portafolio-ver-mas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--azul-electrico);
  cursor: pointer;
}

.portafolio-ver-mas svg {
  transition: transform 0.2s ease;
}

.portafolio-ver-mas.is-expanded svg {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .portafolio-container--carousel {
    flex-direction: column;
    text-align: center;
  }
  .portafolio-info {
    /* En escritorio flex-basis:420px reserva espacio junto al carrusel;
       en columna (móvil) ese mismo mínimo fuerza al contenedor a
       desbordarse cuando el viewport es más angosto que 420px (la
       mayoría de celulares), cortando el párrafo por la derecha. */
    flex-basis: auto;
    min-width: 0;
    width: 100%;
  }
  .portafolio-desc-main {
    max-width: 100%;
    margin: 0 auto 28px;
  }
  .portafolio-title-main {
    font-size: 30px;
  }
  /* En móvil ya no hay espacio de sobra a los costados de la tarjeta
     (ocupa casi todo el ancho) para que las flechas floten fuera de ella
     como en escritorio — se reserva un padding lateral en el wrap para
     que las flechas tengan su propio espacio y no se superpongan a la
     imagen/contenido de la tarjeta. */
  .portafolio-carousel-wrap {
    width: 100%;
    padding: 0 18px;
  }
  .carousel-container {
    max-width: 100%;
    /* 464px (altura fija pensada para escritorio) reservaba solo ~198px
       para el texto tras descontar la imagen (200px) y los paddings —
       insuficiente para título + 3 líneas de descripción + "Ver más", así
       que el overflow:hidden de .carousel-viewport recortaba la última
       línea de la descripción y hasta el propio título. 415px es lo
       medido como necesario para el texto más largo de las 3 tarjetas
       (222px de contenido + 150px de imagen + paddings) sin dejar hueco
       vacío de sobra en las tarjetas con menos texto (antes 520px). */
    height: 415px;
  }
  .portafolio-carousel-media {
    height: 150px;
  }
  .portafolio-carousel-arrow {
    width: 28px;
    height: 28px;
  }
  .portafolio-carousel-arrow--prev {
    left: -2px;
  }
  .portafolio-carousel-arrow--next {
    right: -2px;
  }
  .portafolio-carousel-content {
    /* Un poco más de aire a la derecha que a los otros lados: la flecha
       "siguiente" del carrusel (28px, casi pegada al borde de la card)
       queda muy cerca del final del texto en anchos angostos. */
    padding: 16px 20px 16px 16px;
  }
  .portafolio-carousel-media + .portafolio-carousel-content {
    margin-top: -24px;
    padding-top: 34px;
  }
  .portafolio-title {
    font-size: 16.5px;
  }
  .portafolio-desc {
    font-size: 13.5px;
    max-height: none;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }
}

/* ==========================================
   9.5. SECCIÓN VACANTES
   ========================================== */
.vacantes-section {
  padding: 100px 24px;
  background-color: var(--bg-superficie-alterna);
  position: relative;
  overflow: hidden;
}

.vacantes-circle {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: var(--azul-electrico);
  opacity: 0.06;
  animation: portafolioCircleFloat ease-in-out infinite;
}

html[data-theme="dark"] .vacantes-circle {
  opacity: 0.14;
}

.vacantes-circle-1 {
  width: 240px;
  height: 240px;
  top: 10%;
  right: 8%;
  animation-duration: 9s;
}

.vacantes-circle-2 {
  width: 170px;
  height: 170px;
  bottom: 8%;
  left: 10%;
  background: var(--azul-oscuro);
  animation-duration: 7.5s;
  animation-delay: -2s;
}

html[data-theme="dark"] .vacantes-circle-2 {
  background: var(--azul-electrico);
}

.vacantes-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.vacantes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}

.vacantes-grid {
  perspective: 1200px;
}

.vacante-card {
  background-color: var(--bg-superficie);
  border-radius: 22px;
  border: 1px solid var(--borde);
  box-shadow: 0 10px 30px rgba(15, 32, 66, 0.03);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  position: relative;
  transition: transform 0.15s ease-out, border-color 0.3s ease, box-shadow 0.3s ease;
  animation: servicioCardFloat 4.5s ease-in-out infinite;
  animation-delay: calc(var(--vacante-index, 0) * -0.9s);
  will-change: transform;
}

.vacante-card:nth-child(1) { --vacante-index: 0; }
.vacante-card:nth-child(2) { --vacante-index: 1; }
.vacante-card:nth-child(3) { --vacante-index: 2; }
.vacante-card:nth-child(4) { --vacante-index: 3; }
.vacante-card:nth-child(5) { --vacante-index: 4; }
.vacante-card:nth-child(6) { --vacante-index: 5; }

.vacante-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--glow-angle, 0deg), transparent 0%, transparent 65%, var(--azul-electrico) 85%, var(--azul-oscuro) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.55;
  transition: opacity 0.3s ease;
  pointer-events: none;
  animation: servicioGlowSpin 3s linear infinite;
}

.vacante-card:hover {
  transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-8px) scale(1.015);
  border-color: var(--azul-electrico);
  box-shadow: 0 20px 40px rgba(0, 82, 255, 0.14);
}

.vacante-card:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .vacante-card,
  .vacante-card::after {
    animation: none;
  }
}

.vacante-card-banner {
  width: 100%;
  height: 90px;
  background: linear-gradient(135deg, #017EFD 0%, #001A66 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.vacante-card:nth-child(3n+2) .vacante-card-banner {
  background: linear-gradient(135deg, #0066FF 0%, #003D99 100%);
}

.vacante-card:nth-child(3n+3) .vacante-card-banner {
  background: linear-gradient(135deg, #0040CC 0%, #000D33 100%);
}

.vacante-card-banner-icon {
  font-size: 34px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
  transition: transform 0.4s ease;
}

.vacante-card:hover .vacante-card-banner-icon {
  transform: scale(1.12) rotate(-6deg);
}

.vacante-card-content {
  transform: translateZ(24px);
}

.vacante-card .btn-quick-view {
  position: relative;
  overflow: hidden;
  margin-top: auto;
  flex: none;
  width: 100%;
  box-sizing: border-box;
}

.vacante-card .btn-quick-view::after {
  content: '→';
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.25s ease;
}

.vacante-card:hover .btn-quick-view::after {
  transform: translateX(4px);
}

.vacante-card-content {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.vacante-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--texto-principal);
  margin: 0;
}

.vacante-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vacante-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--azul-electrico);
  background-color: rgba(0, 82, 255, 0.08);
  padding: 5px 12px;
  border-radius: 50px;
  display: inline-block;
}

.vacante-short-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-secundario);
  margin: 0;
  flex-grow: 1;
}

.vacantes-empty {
  text-align: center;
  color: var(--texto-secundario);
  font-size: 15px;
  padding: 40px 20px;
}

/* Meta de la vacante dentro del modal de detalle */
.vacante-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.vacante-modal-meta .vacante-badge {
  font-size: 13px;
}

/* Formulario de postulación (dentro del modal) */
.postulacion-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.postulacion-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.postulacion-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.postulacion-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-principal);
}

.postulacion-field input,
.postulacion-field textarea {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--texto-principal);
  background-color: var(--bg-superficie-alterna);
  border: 1.5px solid var(--borde);
  border-radius: 12px;
  padding: 10px 14px;
  transition: border-color 0.2s ease;
}

.postulacion-field input:focus,
.postulacion-field textarea:focus {
  outline: none;
  border-color: var(--azul-electrico);
}

.postulacion-field textarea {
  resize: vertical;
  min-height: 70px;
}

.postulacion-status {
  font-size: 13.5px;
  font-weight: 600;
  min-height: 18px;
  margin: 0;
}

.postulacion-status.success {
  color: #16a34a;
}

.postulacion-status.error {
  color: #dc2626;
}

/* ==========================================
   BASE DE CONOCIMIENTO PÚBLICA — buscador pill
   ========================================== */
.kb-search-wrap {
  max-width: 480px;
  margin: 0 auto 2rem;
  display: flex;
  justify-content: center;
}

.kb-search-pill {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--bg-superficie);
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  padding: 0.75rem 1.1rem;
  box-shadow: 0 1px 2px rgba(15, 32, 66, 0.04), 0 8px 20px -12px rgba(15, 32, 66, 0.14);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kb-search-pill:focus-within {
  border-color: var(--azul-electrico);
  box-shadow: 0 0 0 4px rgba(0, 82, 255, 0.12);
}

.kb-search-icon {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  color: var(--azul-electrico);
}

.kb-search-pill input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  color: var(--texto-principal);
}

.kb-search-pill input::placeholder {
  color: #9aa5bd;
}

.kb-search-btn {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  background: var(--azul-electrico);
  color: white;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.postulacion-submit-btn {
  border: none;
  cursor: pointer;
  width: 100%;
  font-family: 'Poppins', sans-serif;
}

.postulacion-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================
   9.6. SECCIÓN "MÁS OPORTUNIDADES PARA CRECER JUNTOS"
   (Stack de tarjetas Vacantes / ArdaWiki, React Bits "Stack" portado)
   ========================================== */
.talento-section {
  padding: 100px 24px;
  background-color: var(--bg-superficie-alterna);
  position: relative;
  overflow: hidden;
}

.talento-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}

.talento-info {
  flex: 1 1 420px;
  min-width: 280px;
}

.talento-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde-agua);
  margin-bottom: 14px;
}

.talento-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--texto-principal);
  margin-bottom: 18px;
}

.talento-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto-secundario);
  max-width: 420px;
}

.talento-stack-wrap {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  /* El offset del Stack (la tarjeta de atrás se desplaza hacia la esquina
     superior-derecha) descentra visualmente el conjunto respecto a este
     contenedor — se compensa moviendo el wrap ligeramente para que el
     "centro visual" del par de tarjetas caiga en el centro real. Un poco
     más de margen a la derecha corre todo el bloque hacia la izquierda. */
  padding: 9px 40px 0 13px;
}

.talento-stack.stack-container {
  width: 340px;
  height: 420px;
}

/* --- Componente Stack (React Bits), estilos base --- */
.stack-container {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 600px;
}

.card-rotate {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.card {
  border-radius: 1.25rem;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  will-change: transform;
}

/* --- Tarjetas de contenido dentro del Stack (Vacantes / ArdaWiki) --- */
.talento-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px 24px;
  text-decoration: none;
  background: linear-gradient(160deg, #FFFFFF 0%, #EAF1FB 100%);
  border: 1.5px solid var(--verde-agua);
  border-radius: 1.25rem;
  box-sizing: border-box;
  box-shadow: 0 20px 45px -15px rgba(15, 32, 66, 0.2);
}

html[data-theme="dark"] .talento-card {
  background: linear-gradient(160deg, #0F2042 0%, #0A162E 100%);
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.5);
}

/* Sin esto, arrastrar desde el texto/ícono (en vez del margen vacío de las
   esquinas) dispara el drag NATIVO del navegador para el link/imagen, que
   compite con el drag manual del Stack — se sentía como que "solo las
   esquinas" respondían al arrastre. */
.talento-card,
.talento-card * {
  -webkit-user-drag: none;
  user-select: none;
}

.talento-card-icon {
  color: var(--verde-agua);
  opacity: 0.9;
}

.talento-card-icon svg {
  width: 56px;
  height: 56px;
}

.talento-card-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--verde-agua);
}

.talento-card-btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--azul-electrico);
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 30px;
  border: none;
  border-radius: 50px;
  white-space: nowrap;
  cursor: pointer;
  /* El resto de la tarjeta es área de arrastre (Stack); este botón es la
     única parte "clickeable" real, así que sí debe poder recibir el
     puntero (el resto conserva pointer-events normal para el drag). */
  position: relative;
  z-index: 1;
}

.talento-card-btn:hover {
  background-color: var(--azul-oscuro);
}

@media (max-width: 768px) {
  .talento-container {
    flex-direction: column;
    text-align: center;
  }
  .talento-info {
    /* Igual que .portafolio-info: flex-basis:420px reserva espacio junto
       al Stack en escritorio, pero en columna (móvil) ese mínimo excede
       el viewport disponible (320-480px) y desborda el título/párrafo
       por la derecha en vez de hacer wrap. */
    flex-basis: auto;
    min-width: 0;
    width: 100%;
  }
  .talento-desc {
    max-width: 100%;
    margin: 0 auto;
  }
  .talento-title {
    font-size: 30px;
  }
  .talento-stack-wrap {
    /* El padding asimétrico (compensación de offset del Stack pensada
       para escritorio) suma ancho extra que, junto con la tarjeta de
       340px fija, desborda cualquier viewport móvil — se centra sin
       ese padding en este breakpoint. */
    padding: 20px 0 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* 340px de ancho fijo para la tarjeta del Stack es mayor que el propio
     viewport en un celular (320-480px), desbordando el título y párrafo
     de al lado por la derecha — se escala la tarjeta completa al ancho
     real disponible, manteniendo la proporción original (340:420).
     El propio efecto Stack desplaza la tarjeta de atrás hacia la derecha
     (translate proporcional al tamaño del contenedor, ver stack.js) —
     hay que reservar ESE espacio extra además del margen de la sección,
     si no la tarjeta trasera se sale por el borde de la pantalla aunque
     la tarjeta base ya quepa. */
  .talento-stack.stack-container {
    width: min(340px, calc(100vw - 48px - 50px));
    height: min(420px, calc((100vw - 48px - 50px) * 420 / 340));
  }
}

/* ==========================================
   10. SECCIÓN CONTACTO (Fiel al código de origen)
   ========================================== */
.qr-form-section {
  padding: 100px 24px;
  background-color: var(--bg-superficie-alterna);
  position: relative;
  overflow: hidden;
}

.qr-form-waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.qr-form-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.qr-form-info {
  flex: 1.2;
}

.qr-form-title {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.15;
}

.qr-display-wrap {
  flex: 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.qr-display-card {
  background-color: var(--bg-superficie-alterna);
  border-radius: 24px;
  padding: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  animation: servicioCardFloat 4.5s ease-in-out infinite;
  will-change: transform;
}

.qr-display-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--glow-angle, 0deg), transparent 0%, transparent 65%, var(--azul-electrico) 85%, var(--azul-oscuro) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
  animation: servicioGlowSpin 3.5s linear infinite;
}

.qr-display-card > * {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .qr-display-card,
  .qr-display-card::after,
  .qr-form-container::after {
    animation: none;
  }
}

.qr-frame {
  background-color: var(--bg-superficie);
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 32, 66, 0.04);
}

.qr-image {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
}

.qr-caption {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-principal);
}

.qr-caption-top {
  text-align: center;
  max-width: 220px;
  margin-top: -19px;
}

.qr-form-pointer {
  /* Antes era position:absolute con left/width en % y px fijos — al
     achicar .qr-form-container ese cálculo manual dejaba de coincidir
     con el hueco real entre el texto y el QR (o invadía el texto, o
     quedaba corta sin llegar al QR). Se convierte en un ítem flex más
     de .qr-form-container: el navegador reparte el espacio disponible
     automáticamente entre las 3 columnas, así que la flecha SIEMPRE
     ocupa exactamente el hueco real, sin importar el ancho de pantalla.
     El SVG tiene viewBox, así que reescalar su ancho no distorsiona el
     trazo. */
  flex: 1 1 auto;
  min-width: 60px;
  max-width: 260px;
  height: auto;
  aspect-ratio: 260 / 120;
  align-self: center;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.55));
}

.qr-form-pointer-line {
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  animation: qrPointerDraw 2.4s ease-in-out infinite;
}

.qr-form-pointer-head {
  stroke-dasharray: var(--head-len, 40);
  stroke-dashoffset: var(--head-len, 40);
  animation: qrPointerDrawHead 2.4s ease-in-out infinite;
}

@keyframes qrPointerDraw {
  0% {
    stroke-dashoffset: var(--len, 300);
  }
  55%, 100% {
    stroke-dashoffset: 0;
  }
}

@keyframes qrPointerDrawHead {
  0%, 50% {
    stroke-dashoffset: var(--head-len, 40);
  }
  75%, 100% {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qr-form-pointer-line,
  .qr-form-pointer-head {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ==========================================
   11. CONTROLES DE IDIOMA Y MODO OSCURO
   ========================================== */
.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--borde);
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: var(--bg-superficie-alterna);
  border: 1px solid var(--borde);
  border-radius: 50px;
  padding: 4px;
}

.lang-btn {
  background: none;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texto-secundario);
  padding: 6px 12px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lang-btn.active {
  background-color: var(--azul-electrico);
  color: #fff;
}

/* Header flotando sobre el hero (sin scroll): en modo oscuro el texto
   inactivo se aclara para verse sobre el fondo oscuro del hero; en modo
   claro se deja el color normal (--texto-secundario) para que siga legible
   sobre el fondo claro. */
html[data-theme="dark"] .main-header:not(.is-scrolled) .lang-btn {
  color: rgba(255, 255, 255, 0.75);
}

html[data-theme="dark"] .main-header:not(.is-scrolled) .lang-btn.active {
  color: #fff;
}

.theme-toggle-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-superficie-alterna);
  border: 1px solid var(--borde);
  border-radius: 50%;
  cursor: pointer;
  color: var(--azul-electrico);
  font-size: 17px;
  transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
  border-color: var(--azul-electrico);
  color: var(--azul-electrico);
}

html[data-theme="dark"] .main-header:not(.is-scrolled) .theme-toggle-btn {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--azul-electrico);
}

html[data-theme="dark"] .main-header:not(.is-scrolled) .theme-toggle-btn:hover {
  border-color: var(--azul-electrico);
  color: var(--azul-electrico);
}

.theme-toggle-btn .icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle-btn .icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle-btn .icon-moon {
  display: inline;
}

.menu-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background-color: var(--bg-superficie-alterna);
  border: 1px solid var(--borde);
  border-radius: 50%;
  cursor: pointer;
}

.menu-toggle-bar {
  display: block;
  width: 16px;
  height: 2px;
  background-color: var(--texto-principal);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.main-header.menu-open .menu-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.main-header.menu-open .menu-toggle-bar:nth-child(2) {
  opacity: 0;
}
.main-header.menu-open .menu-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================
   12. FOOTER
   ========================================== */
.main-footer {
  background-color: var(--bg-superficie-alterna);
  border-top: 1px solid var(--borde);
  padding: 60px 24px 0 24px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 40px;
  flex-wrap: wrap;
}

.footer-brand {
  flex: 1.4;
  min-width: 240px;
}

.footer-logo-img {
  height: 42px;
  width: auto;
  margin-left: 0;
  margin-bottom: 8px;
}

.footer-tagline {
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-secundario);
  max-width: 320px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.footer-col {
  flex: 1;
  min-width: 160px;
}

.footer-col-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-principal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-size: 14px;
  color: var(--texto-secundario);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--azul-electrico);
}

.footer-bottom {
  border-top: 1px solid var(--borde);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copy {
  font-size: 13px;
  color: var(--texto-secundario);
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.footer-legal-links a {
  color: var(--texto-secundario);
  transition: color 0.2s ease;
}

.footer-legal-links a:hover {
  color: var(--azul-electrico);
}

.footer-legal-sep {
  color: var(--borde);
}

/* Columna de newsletter (4ta columna del footer) */
.footer-newsletter {
  min-width: 260px;
}

.footer-newsletter-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto-secundario);
  margin-bottom: 16px;
  max-width: 260px;
}

.footer-newsletter-form {
  display: flex;
  align-items: center;
  background-color: var(--bg-superficie);
  border: 1px solid var(--borde);
  border-radius: 50px;
  padding: 4px 4px 4px 18px;
  max-width: 300px;
}

.footer-newsletter-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--texto-principal);
  outline: none;
}

.footer-newsletter-input::placeholder {
  color: var(--texto-secundario);
}

.footer-newsletter-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background-color: var(--azul-electrico);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.footer-newsletter-btn:hover {
  background-color: var(--azul-oscuro);
  transform: translateX(2px);
}

.footer-bottom-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ==========================================
   BURBUJA FLOTANTE DE LA MASCOTA
   ========================================== */
.floating-mascot-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 120px;
  height: 120px;
  border-radius: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  overflow: visible;
  animation: floatMascotBtn 3.5s ease-in-out infinite;
  transition: transform 0.25s ease;
}

.floating-mascot-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

.floating-mascot-btn:hover {
  transform: scale(1.08);
  animation-play-state: paused;
}

@keyframes floatMascotBtn {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 600px) {
  /* En móvil el botón flotante del chat coincide, durante el scroll, con
     la esquina inferior derecha de cualquier tarjeta/card que llegue
     hasta ahí (Portafolio, Talento) — al ser position:fixed siempre
     ocupa el mismo punto de la pantalla sin importar el contenido que
     pase debajo, tapando parcialmente texto o botones. Se reduce más
     que antes para minimizar esa área de solape. */
  .floating-mascot-btn {
    width: 46px;
    height: 46px;
    right: 8px;
    bottom: 8px;
  }
}

@media (max-width: 640px) {
  /* En pantallas angostas no hay espacio a la derecha del modal para el
     botón de cerrar del PDF: se coloca arriba en su lugar. */
  .modal-container--pdf {
    width: 94%;
  }
  .modal-container--pdf .modal-close-btn {
    top: -52px;
    left: auto;
    right: 0;
    margin-left: 0;
  }
}

/* ==========================================
   13. RESPONSIVO (TABLET, MÓVIL GRANDE, MÓVIL)
   ========================================== */

/* ---- Tablet grande / laptop chica (<=1100px) ---- */
@media (max-width: 1100px) {
  .hero-title {
    font-size: 44px;
  }
  .hero-container {
    min-height: 440px;
  }
}

/* ---- Tablet (<=992px) ---- */
@media (max-width: 992px) {
  .header-container {
    padding: 10px 20px;
  }

  .hero-container {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding-top: max(60px, var(--header-overlap, 0px));
  }
  .hero-description {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-badges {
    justify-content: center;
    flex-wrap: wrap;
  }
  .hero-container {
    min-height: 480px;
  }

  .soluciones-grid,
  .portafolio-grid,
  .vacantes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .servicios-grid {
    justify-content: center;
  }
  .servicio-card {
    flex: 1 1 calc(50% - 20px);
  }

  .qr-form-container {
    flex-direction: column;
    text-align: center;
  }
  .qr-form-info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* La flecha apunta en diagonal de izquierda a derecha, pensada para el
     layout horizontal de escritorio — en columna (texto arriba, QR abajo)
     su posición fija en % del ancho ya no coincide con ningún elemento
     real y queda flotando encima del texto o de la tarjeta. Se oculta. */
  .qr-form-pointer {
    display: none;
  }
  /* margin-top:-19px en .qr-caption-top acerca el texto "Escanea..." a la
     tarjeta QR en el layout horizontal de escritorio (donde el texto
     empieza más abajo, alineado con el centro del QR) — en columna ese
     mismo margen negativo lo sube por encima del botón "Ir al formulario"
     que queda justo antes en el flujo, solapándolos. */
  .qr-caption-top {
    margin-top: 32px;
  }

  .footer-container {
    flex-wrap: wrap;
    gap: 32px;
  }
  .footer-brand {
    flex: 1 1 100%;
  }
}

/* ---- Móvil grande / tablet vertical chica (<=768px) ---- */
@media (max-width: 768px) {
  .section-title,
  .section-title-center {
    font-size: 30px;
  }

  .hero-title {
    font-size: 36px;
  }
  .hero-badges {
    gap: 18px;
    margin-top: 32px;
  }

  .nosotros-section,
  .soluciones-section,
  .aliados-section,
  .servicios-section,
  .portafolio-section,
  .vacantes-section,
  .qr-form-section {
    padding: 70px 20px;
  }
  .nosotros-intro h2 {
    font-size: 26px;
  }

  /* En escritorio "Nosotros" es un grid de 2 columnas (texto | misión y
     visión) alineado a la izquierda de forma natural; en móvil pasa a 1
     columna pero seguía alineado a la izquierda, deslavado respecto al
     resto de secciones (Hero, Servicios, Soluciones, etc.) que sí centran
     su texto en este breakpoint. Se centra todo el bloque para que
     "Nosotros" luzca consistente con el resto de la página en móvil. */
  .nosotros-top {
    text-align: center;
  }
  .nosotros-mv-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .nosotros-valores {
    text-align: center;
  }

  .servicio-card {
    flex: 1 1 100%;
  }

  .qr-form-container {
    padding: 32px 24px;
  }

  .modal-container {
    width: 95%;
    max-height: 90vh;
  }
  .modal-body {
    padding: 28px 22px;
  }
  .modal-footer-actions {
    flex-direction: column;
  }

  .footer-container {
    flex-direction: column;
    text-align: center;
  }
  .footer-social {
    justify-content: center;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ---- Móvil grande / tablet vertical estrecha (<=640px) ---- */
@media (max-width: 640px) {
  .soluciones-grid,
  .portafolio-grid,
  .vacantes-grid {
    grid-template-columns: 1fr;
  }
  .postulacion-row {
    grid-template-columns: 1fr;
  }

  /* En teléfono el texto ya no se superpone a la imagen: la imagen queda
     como bloque propio arriba, acoplada al ancho de pantalla desde el borde
     superior, y el texto pasa a flujo normal debajo. El degradado de
     transición (.hero-bg-fade) se conserva para que el borde inferior de
     la imagen se funda con el color de fondo de la sección; el overlay
     lateral (.hero-bg-overlay) se desactiva porque es horizontal (pensado
     para composición lado a lado con texto, no para una imagen sola). */
  .hero-section {
    padding-top: 0;
    padding-bottom: 60px;
    overflow: hidden;
  }
  /* Todos los selectores de este bloque (.hero-bg-img, .hero-bg-overlay,
     .hero-bg-fade, .hero-container, etc.) se reutilizan también dentro
     de .vista-dedicada-hero (Vacantes/ArdaWiki) — sin acotarlos a
     ".hero-section" aquí, este override pensado solo para el Hero
     principal se filtraba también a esas vistas: su imagen pasaba a
     position:static (dejando de comportarse como fondo) y, como
     .vista-dedicada-hero es un flex-row, ese cambio empujaba todo el
     contenido de texto hacia la derecha, fuera de la pantalla —
     exactamente el "la vista se rompe en teléfono" reportado. */
  .hero-section .hero-bg-img {
    position: static;
    display: block;
    width: 100%;
    height: 78vh;
    max-height: 480px;
    /* La cara de la mascota está en el tercio medio-bajo de la imagen de
       teléfono (no arriba): con un ancho de pantalla amplio y poca altura
       object-fit:cover puede dejarla fuera del recorte si el ancla vertical
       es muy alta. 72% mantiene la cara visible en el rango típico de
       teléfonos y tablets angostas. */
    object-position: center 72%;
  }
  .hero-section .hero-bg-overlay {
    display: none;
  }
  /* El degradado va en el borde SUPERIOR de la imagen (donde empieza,
     justo bajo el header), no en el inferior — se ancla arriba de
     .hero-section (que sigue siendo position:relative) en vez de usar el
     flujo normal después de la imagen. Los mask-image y el gradiente de
     color de las capas se invierten (to top en vez de to bottom) para que
     el difuminado se revele hacia arriba. */
  .hero-section .hero-bg-fade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 36px;
    margin-top: 0;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 22%, black 100%);
    mask-image: linear-gradient(to top, transparent 0%, black 22%, black 100%);
  }
  .hero-section .hero-bg-fade::before {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 8%, black 30%, black 100%);
    mask-image: linear-gradient(to top, transparent 0%, transparent 8%, black 30%, black 100%);
  }
  .hero-section .hero-bg-fade::after {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 12%, black 40%, black 100%);
    mask-image: linear-gradient(to top, transparent 0%, transparent 12%, black 40%, black 100%);
  }
  /* Los blur() de las 3 capas (6/16/34px) están calibrados para una franja
     de 180px (diseño de escritorio); a 36px esos mismos blurs son
     desproporcionados y saturan contra el borde del overflow:hidden,
     viéndose como una banda sólida en vez de una transición. Se escalan a
     ~20% (misma proporción que 36/180) para que la sensación de "difuminado
     progresivo" se mantenga en la franja más chica. */
  .hero-section .hero-bg-fade {
    --fade-blur: 1.2px;
  }
  .hero-section .hero-bg-fade::before {
    --fade-blur: 3px;
  }
  /* El color final del degradado (antes --bg-superficie-alterna) es el
     color de LA SIGUIENTE sección, pensado para cuando el fade cae muy
     abajo en el diseño de escritorio. Aquí el fade queda justo debajo de
     la imagen, todavía sobre el fondo propio de .hero-section (que en este
     punto es ~blanco por su gradiente diagonal), así que debe fundirse
     hacia ESE color — no hacia el de la sección siguiente, pero tampoco
     "sin degradado" (eso deja un salto dsco de imagen nítida a nada). */
  .hero-section .hero-bg-fade::after {
    --fade-blur: 7px;
    /* --bg-body: el mismo color de fondo que usa toda la página (body),
       no un blanco fijo aparte. */
    background: linear-gradient(to top,
      transparent 0%,
      transparent 10%,
      color-mix(in srgb, var(--bg-body) 75%, transparent) 40%,
      var(--bg-body) 100%);
  }
  html[data-theme="dark"] .hero-section .hero-bg-fade::after {
    --fade-blur: 7px;
    background: linear-gradient(to top,
      transparent 0%,
      transparent 10%,
      rgba(15, 23, 41, 0.75) 40%,
      var(--bg-superficie-alterna) 100%);
  }

  /* Segundo fade, borde INFERIOR de la imagen: en flujo normal justo
     después de la imagen, con solape moderado hacia arriba (no tanto como
     para comerse a la mascota, pero suficiente para que se note el
     fundido). Transiciona hacia el fondo real de .hero-section en ese
     punto (blanco/casi blanco), igual que hace .hero-bg-fade original en
     escritorio pero recalibrado a esta franja más chica. */
  .hero-bg-fade-bottom {
    display: block;
    position: relative;
    left: 0;
    right: 0;
    bottom: auto;
    height: 36px;
    margin-top: -26px;
  }
  .hero-bg-fade-bottom {
    --fade-blur: 1.2px;
  }
  .hero-bg-fade-bottom::before {
    --fade-blur: 3px;
  }
  .hero-bg-fade-bottom::after {
    --fade-blur: 7px;
    background: linear-gradient(to bottom,
      transparent 0%,
      transparent 10%,
      color-mix(in srgb, var(--bg-body) 75%, transparent) 40%,
      var(--bg-body) 100%);
  }
  html[data-theme="dark"] .hero-bg-fade-bottom::after {
    --fade-blur: 7px;
    background: linear-gradient(to bottom,
      transparent 0%,
      transparent 10%,
      rgba(15, 23, 41, 0.75) 40%,
      var(--bg-superficie-alterna) 100%);
  }

  .hero-container {
    position: static;
    min-height: 0;
    padding: 32px 24px 0;
  }
  .hero-text-content {
    text-align: center;
  }
  .hero-badges {
    margin-left: 0;
    align-items: center;
  }

  .header-container {
    padding: 8px 12px;
    column-gap: 6px;
  }
  .logo-img {
    height: 32px;
  }
  .lang-btn {
    padding: 5px 9px;
    font-size: 12px;
  }
  .theme-toggle-btn {
    width: 32px;
    height: 32px;
  }
  .header-login-btn {
    padding: 7px 14px;
    font-size: 12.5px;
  }
  .demo-btn {
    padding: 7px 12px;
    font-size: 12.5px;
  }
  .menu-toggle-btn {
    width: 36px;
    height: 36px;
  }
}

/* ---- Tablet / nav colapsado (<=1320px) ----
   El nav de escritorio conserva SIEMPRE su tamaño de letra original
   (14px, definido en .nav-link más arriba) — no se comprime nunca. Por
   debajo de este ancho ya no cabe en una sola línea a ese tamaño
   sin volverlo ilegible: se colapsa a menú hamburguesa. */
@media (max-width: 1320px) {
  .header-container {
    grid-template-columns: auto 1fr;
    row-gap: 10px;
    padding: 10px 16px;
  }
  .logo-img {
    height: 40px;
  }
  .menu-toggle-btn {
    display: flex;
  }

  .nav-menu {
    display: none;
    order: 4;
    grid-template-columns: 1fr;
    justify-items: start;
    row-gap: 8px;
  }
  .nav-link {
    /* Adaptativo (tablet/móvil): entre 320px y 900px de viewport escala
       suavemente de 13px a 15px, en vez de un valor fijo por breakpoint. */
    font-size: clamp(13px, 12.3px + 0.35vw, 15px);
    padding: 6px 0;
    justify-content: flex-start;
  }
  .header-controls {
    grid-column: 2;
    justify-self: end;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
    max-width: 100%;
    /* Con varias filas (wrap) un borde separador de una sola fila ya no
       tiene sentido: se ve como una línea vertical larga y descolocada. */
    border-left: none;
    padding-left: 0;
  }

  .main-header.menu-open .nav-menu {
    display: grid;
    position: absolute;
    top: 100%;
    right: 0;
    width: max-content;
    max-width: calc(100vw - 32px);
    background-color: var(--bg-superficie);
    border-top: 1px solid var(--borde);
    box-shadow: 0 12px 24px rgba(15, 32, 66, 0.08);
    padding: 14px 20px;
  }

  .main-header.menu-open:not(.is-scrolled) .nav-link {
    color: var(--texto-principal);
  }
}

@media (max-width: 1360px) {
  .hero-section {
    padding-top: 30px;
    padding-bottom: 90px;
  }
  .hero-title {
    font-size: 30px;
  }
  .hero-title br {
    display: none;
  }
  .hero-description {
    font-size: 16px;
  }
  .btn-primary {
    padding: 12px 24px;
    font-size: 14px;
  }
  .hero-badges {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-left: 20px;
  }
  .hero-container {
    min-height: 380px;
  }

  .section-title,
  .section-title-center {
    font-size: 26px;
  }
  .section-desc,
  .section-desc-center {
    font-size: 15px;
  }

  .soluciones-grid {
    gap: 18px;
  }
  .solucion-content {
    padding: 28px 22px 16px 22px;
  }
  .solucion-actions {
    flex-direction: column;
    padding: 0 22px 22px 22px;
  }

  .modal-header-info {
    gap: 14px;
  }
  #modalTitle {
    font-size: 20px;
  }
  .modal-footer-actions {
    gap: 10px;
  }

  .footer-col-title {
    margin-top: 6px;
  }
}

/* ---- Teléfono: tamaño de letra moderado en todas las secciones ----
   Va DESPUÉS del bloque de 1360px a propósito: mismos selectores, ganan en
   la cascada por orden de aparición sobre los font-size definidos ahí. */
@media (max-width: 640px) {
  .hero-title {
    font-size: 26px;
  }
  .hero-eyebrow {
    font-size: 12px;
  }
  .hero-description {
    font-size: 14.5px;
  }

  .section-title,
  .section-title-center,
  .impulso-header h2,
  .soluciones-conectan-intro h2,
  .nosotros-intro h2 {
    font-size: 22px;
  }
  .section-desc,
  .section-desc-center {
    font-size: 13.5px;
  }
}

/* ---- Móvil pequeño (<=380px) ---- */

@media (max-width: 380px) {
  .hero-title {
    font-size: 22px;
  }
  .badge-item {
    width: 100%;
  }
  .lang-btn {
    padding: 6px 10px;
  }
}

/* ==========================================
   EFECTOS DINÁMICOS: SCROLL-REVEAL, PARALLAX, MICRO-INTERACCIONES
   ========================================== */

/* Scroll-reveal: elementos ocultos hasta que entran en viewport */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-visible { transform: translateX(0); }

[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-visible { transform: translateX(0); }

[data-reveal="zoom"] { transform: scale(0.94); }
[data-reveal="zoom"].is-visible { transform: scale(1); }

/* Retraso escalonado para grupos de tarjetas (grid-reveal aplica a los hijos directos) */
[data-reveal-group] > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group] > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal-group] > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-group] > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal-group] > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal-group] > *:nth-child(6) { transition-delay: 350ms; }
[data-reveal-group] > *:nth-child(n+7) { transition-delay: 400ms; }

/* Parallax sutil del hero (aplicado vía JS con --parallax-x / --parallax-y) */
.hero-bg-img {
  transform: translate3d(calc(var(--parallax-x, 0) * -0.6px), calc(var(--parallax-y, 0) * -0.6px), 0) scale(1.03);
  transition: transform 0.2s ease-out;
}

/* Micro-interacciones: botones y CTAs con respuesta más viva */
.btn-primary,
.btn-quick-view,
.btn-pdf-view,
.modal-btn-contact,
.postulacion-submit-btn {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn-primary:hover,
.postulacion-submit-btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.015);
}

.btn-primary:active,
.postulacion-submit-btn:active:not(:disabled) {
  transform: translateY(-1px) scale(0.99);
}

.btn-quick-view:hover,
.btn-pdf-view:hover,
.modal-btn-contact:hover {
  transform: translateY(-2px);
}

/* Tarjetas: leve elevación + escala sutil añadida a lo que ya exista de hover */
.vacante-card,
.servicio-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}

.vacante-card:hover {
  transform: translateY(-6px) scale(1.01);
}

/* Nav links: subrayado animado suave al pasar el mouse */
.nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--azul-electrico);
  border-radius: 99px;
  transition: width 0.25s ease;
}

.nav-link:not(.active):hover::before {
  width: 100%;
}

/* ── Imágenes con vida propia ── */

/* Iconos de servicio: rebote + rotación sutil */
.servicio-card img {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.servicio-card:hover img {
  transform: scale(1.12) rotate(-4deg);
}

/* Redes sociales: pequeño salto + rotación al hover */
.social-icon,
.footer-social .social-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-icon:hover {
  transform: translateY(-3px) rotate(-6deg) scale(1.1);
}

/* Mascota flotante: reacciona más al hover */
.floating-mascot-btn img {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floating-mascot-btn:hover img {
  transform: scale(1.1) rotate(4deg);
}

/* ── Texto con vida propia ── */

/* Highlight azul: brillo sutil pulsante para atraer el ojo */
.highlight-blue {
  display: inline-block;
  position: relative;
  animation: highlightGlow 3s ease-in-out infinite;
}

@keyframes highlightGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(0, 82, 255, 0); }
  50% { text-shadow: 0 2px 18px rgba(0, 82, 255, 0.35); }
}

/* Títulos de sección: subrayado decorativo que se dibuja al aparecer */
.section-title-center.is-visible::after,
.section-title.is-visible::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin: 14px auto 0 auto;
  background: linear-gradient(90deg, var(--azul-electrico), transparent);
  border-radius: 99px;
  animation: underlineGrow 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.section-title.is-visible::after {
  margin-left: 0;
}

@keyframes underlineGrow {
  from { width: 0; opacity: 0; }
  to { width: 56px; opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   TEXTO TROCEADO: cada palabra/letra es un <span data-split-unit>
   inyectado por JS, con distintos estilos de entrada por sección.
   ══════════════════════════════════════════════════════════ */
[data-split] .split-unit {
  display: inline-block;
  will-change: transform, opacity;
}

/* Estilo "cascade": palabras suben con leve rotación (Hero, Vacantes) */
[data-split="cascade"] .split-unit {
  opacity: 0;
  transform: translateY(0.6em) rotate(4deg);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-split="cascade"].is-split-visible .split-unit {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* Estilo "typewriter": letras aparecen en seco, una a una (Nosotros) */
[data-split="typewriter"] .split-unit {
  opacity: 0;
  transition: opacity 0.05s linear;
}
[data-split="typewriter"].is-split-visible .split-unit {
  opacity: 1;
}

/* Estilo "flip": palabras giran en 3D como si voltearan una carta (Soluciones) */
[data-split="flip"] {
  perspective: 800px;
}
[data-split="flip"] .split-unit {
  opacity: 0;
  transform: rotateX(-90deg);
  transform-origin: center bottom;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-split="flip"].is-split-visible .split-unit {
  opacity: 1;
  transform: rotateX(0deg);
}

/* Estilo "scale-pop": palabras aparecen con rebote de escala (Aliados, Servicios) */
[data-split="scale-pop"] .split-unit {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-split="scale-pop"].is-split-visible .split-unit {
  opacity: 1;
  transform: scale(1);
}

/* Estilo "slide-side": palabras entran alternando de izquierda/derecha (Portafolio, Contacto) */
[data-split="slide-side"] .split-unit {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-split="slide-side"] .split-unit:nth-child(odd) {
  transform: translateX(-0.8em);
}
[data-split="slide-side"] .split-unit:nth-child(even) {
  transform: translateX(0.8em);
}
[data-split="slide-side"].is-split-visible .split-unit {
  opacity: 1;
  transform: translateX(0);
}

/* Estilo "blur-focus": palabras entran desenfocadas y enfocan (párrafos descriptivos) */
[data-split="blur-focus"] .split-unit {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(0.3em);
  transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-split="blur-focus"].is-split-visible .split-unit {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Respeta accesibilidad: sin movimiento si el usuario lo prefiere */
/* ==========================================
   CHATBOT — panel de conversación
   ========================================== */
.chat-panel {
  position: fixed;
  right: 28px;
  bottom: 116px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 150px);
  background-color: var(--bg-superficie);
  border: 1px solid var(--borde);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(15, 32, 66, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 900;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.chat-panel.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--azul-electrico) 0%, var(--azul-oscuro) 100%);
  flex-shrink: 0;
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-header-avatar {
  width: 34px;
  height: 34px;
  border-radius: 0;
  object-fit: contain;
  background-color: transparent;
}

.chat-header-info strong {
  display: block;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.chat-header-status {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
}

.chat-header-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #4ADE80;
  display: inline-block;
}

.chat-close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.chat-close-btn:hover {
  opacity: 1;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: var(--bg-superficie-alterna);
}

.chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  animation: chatBubbleIn 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes chatBubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-bubble-bot {
  align-self: flex-start;
  background-color: var(--bg-superficie);
  color: var(--texto-principal);
  border: 1px solid var(--borde);
  border-bottom-left-radius: 4px;
}

.chat-bubble-user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--azul-electrico) 0%, #0040CC 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background-color: var(--bg-superficie);
  border: 1px solid var(--borde);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--texto-secundario);
  opacity: 0.5;
  animation: chatTypingDot 1.2s ease-in-out infinite;
}

.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatTypingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px 16px;
  flex-shrink: 0;
  background-color: var(--bg-superficie-alterna);
}

.chat-quick-reply-btn {
  background-color: var(--bg-superficie);
  border: 1.5px solid var(--azul-electrico);
  color: var(--azul-electrico);
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-quick-reply-btn:hover {
  background-color: var(--azul-electrico);
  color: #fff;
  transform: translateY(-1px);
}

/* En modo oscuro, #017EFD sobre el fondo azul-oscuro del panel pierde contraste;
   se usa un azul más claro para que el texto de los botones siga siendo legible. */
html[data-theme="dark"] .chat-quick-reply-btn {
  background-color: rgba(91, 140, 255, 0.12);
  border-color: #5B8CFF;
  color: #8FB3FF;
}

html[data-theme="dark"] .chat-quick-reply-btn:hover {
  background-color: #5B8CFF;
  border-color: #5B8CFF;
  color: #0B1120;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--borde);
  background-color: var(--bg-superficie);
  flex-shrink: 0;
}

.chat-input-row input {
  flex: 1;
  border: 1.5px solid var(--borde);
  border-radius: 50px;
  padding: 10px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: var(--texto-principal);
  background-color: var(--bg-superficie-alterna);
  transition: border-color 0.2s ease;
}

.chat-input-row input:focus {
  outline: none;
  border-color: var(--azul-electrico);
}

.chat-input-row input::placeholder {
  color: var(--texto-secundario);
  opacity: 1;
}

.chat-send-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background-color: var(--azul-electrico);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.chat-send-btn:hover {
  background-color: var(--azul-oscuro);
  transform: scale(1.05);
}

.chat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.chat-lead-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.chat-lead-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-secundario);
}

@media (max-width: 600px) {
  .chat-panel {
    right: 12px;
    left: 12px;
    bottom: 90px;
    width: auto;
    height: calc(100vh - 120px);
  }
}

/* ── Modal de login (ventana emergente) — identidad propia, no reusa el molde de "postulación" ── */
.login-modal-container {
  max-width: 420px;
  padding: 0;
}

.login-modal-brand {
  position: relative;
  background: linear-gradient(135deg, var(--azul-oscuro) 0%, #071433 100%);
  padding: 40px 40px 32px;
  text-align: center;
  overflow: hidden;
}

.login-modal-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 82, 255, 0.35), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(88, 220, 255, 0.25), transparent 50%);
  pointer-events: none;
}

.login-modal-brand > * {
  position: relative;
}

.login-modal-brand-logo {
  height: 34px;
  width: auto;
  margin-bottom: 20px;
}

.login-modal-brand-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #7db4ff;
  background: rgba(0, 82, 255, 0.18);
  border: 1px solid rgba(125, 180, 255, 0.35);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.login-modal-brand-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
  line-height: 1.25;
}

.login-modal-brand-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 8px;
  line-height: 1.5;
}

.login-modal-body {
  padding: 32px 40px 36px;
}

.login-modal-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-modal-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--texto-secundario);
  margin-bottom: 7px;
}

.login-modal-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-modal-input-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--texto-secundario);
  pointer-events: none;
}

.login-modal-input-wrap input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border-radius: 12px;
  border: 1.5px solid var(--borde);
  background-color: var(--bg-superficie);
  color: var(--texto-principal);
  /* 16px mínimo: por debajo de eso, Safari/Chrome en iOS hacen zoom
     automático de toda la página al enfocar el input (se percibe como si
     la imagen del hero "se agrandara" al tocar el botón que abre el modal). */
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 641px) {
  .login-modal-input-wrap input {
    font-size: 14.5px;
  }
}

.login-modal-input-wrap input:focus {
  outline: none;
  border-color: var(--azul-electrico);
  box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.12);
}

.login-modal-toggle-pw {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  padding: 6px;
  display: flex;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: color 0.2s ease;
}

.login-modal-toggle-pw:hover {
  color: var(--azul-electrico);
}

.login-modal-toggle-pw svg {
  width: 18px;
  height: 18px;
}

.login-modal-status {
  font-size: 13px;
  min-height: 18px;
  text-align: center;
}

.login-modal-status.success {
  color: #0a8a4a;
  font-weight: 600;
}

.login-modal-status.error {
  color: #d92d20;
  font-weight: 600;
}

.login-modal-submit-btn {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--azul-electrico) 0%, var(--azul-oscuro) 100%);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.login-modal-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 82, 255, 0.25);
}

.login-modal-submit-btn:disabled {
  opacity: 0.65;
  cursor: default;
}

@media (max-width: 480px) {
  .login-modal-brand {
    padding: 28px 24px 22px;
  }
  .login-modal-body {
    padding: 24px 24px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-bg-img,
  .highlight-blue,
  .hero-description,
  .section-desc,
  .section-desc-center {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
  .section-title-center.is-visible::after,
  .section-title.is-visible::after {
    animation: none !important;
    width: 56px;
  }
  .chat-panel {
    transition: opacity 0.15s linear !important;
    transform: none !important;
  }
  .chat-bubble,
  .chat-typing span {
    animation: none !important;
  }
  [data-split] .split-unit {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .btn-primary:hover,
  .postulacion-submit-btn:hover:not(:disabled),
  .login-modal-submit-btn:hover:not(:disabled),
  .btn-quick-view:hover,
  .btn-pdf-view:hover,
  .modal-btn-contact:hover,
  .vacante-card:hover,
  .servicio-card:hover img,
  .social-icon:hover,
  .floating-mascot-btn:hover img {
    transform: none !important;
  }
}

/* ==========================================
   17. VISTAS DEDICADAS (Vacantes / ArdaWiki)
   ========================================== */
/* Página completa embebida dentro del home (sin router ni recarga): se
   activa/desactiva por JS ocultando el resto de secciones del home. El
   header y el footer del sitio quedan siempre visibles por fuera de este
   bloque. Se adapta al tema claro/oscuro del sitio (mismas variables que
   el resto de las secciones), no un fondo oscuro fijo. */
.vista-dedicada {
  background-color: var(--bg-superficie-alterna);
  color: var(--texto-principal);
  min-height: 60vh;
}

/* Mismo tratamiento visual que el hero principal (#inicio): imagen +
   .hero-bg-overlay + .hero-bg-fade — por eso NO lleva overflow:hidden (el
   fade lo necesita sin recortar, ver comentario junto a .hero-bg-fade más
   arriba en este archivo). Usa las mismas variables de tema que
   .hero-section para adaptarse a claro/oscuro igual que el hero principal. */
.vista-dedicada-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, var(--bg-body) 0%, var(--bg-superficie-alterna) 55%, #ECF1F9 100%);
}

html[data-theme="dark"] .vista-dedicada-hero {
  background: var(--bg-superficie-alterna);
}

/* A diferencia del hero principal (altura más estable), aquí el alto real
   de .vista-dedicada-hero varía según el largo del título/descripción —
   con decimales de subpíxel en el layout, el -1px de .hero-bg-fade no
   siempre alcanza a cubrir el borde real y se asoma una línea de 1px de
   la imagen sin difuminar. Se extiende un poco más para tener margen.
   También se reduce el blur de cada capa (la imagen de esta vista es más
   angosta verticalmente que el hero principal, así que el mismo blur
   pensado para 180px sobre una imagen más alta aquí cubre demasiado
   rostro/contenido de la foto). */
.vista-dedicada-hero .hero-bg-fade {
  bottom: -3px;
  height: 130px;
}

.vista-dedicada-hero .hero-bg-fade {
  --fade-blur: 4px;
}

.vista-dedicada-hero .hero-bg-fade::before {
  --fade-blur: 10px;
}

.vista-dedicada-hero .hero-bg-fade::after {
  --fade-blur: 20px;
}

.vista-dedicada-hero-content {
  position: relative;
  /* Debe quedar POR ENCIMA de .hero-bg-fade (z-index:2) — si no, el
     backdrop-filter:blur() del fade difumina el título en vez de solo la
     franja inferior de la imagen (mismo z-index:3 que usa .hero-container
     en el hero principal para lograr lo mismo). */
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 110px 24px 48px;
}

.vista-dedicada-volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(15, 32, 66, 0.18);
  color: var(--texto-principal);
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px 9px 12px;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  margin-bottom: 22px;
}

html[data-theme="dark"] .vista-dedicada-volver {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #F1F5F9;
}

.vista-dedicada-volver:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(15, 32, 66, 0.32);
}

html[data-theme="dark"] .vista-dedicada-volver:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
}

.vista-dedicada-volver svg {
  flex-shrink: 0;
}

.vista-dedicada-breadcrumb {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--verde-agua);
  margin-bottom: 10px;
}

.vista-dedicada-titulo {
  font-size: 38px;
  font-weight: 800;
  color: var(--texto-principal);
  margin-bottom: 14px;
  max-width: 720px;
}

html[data-theme="dark"] .vista-dedicada-titulo {
  color: #FFFFFF;
}

.vista-dedicada-titulo .highlight-blue {
  color: var(--azul-electrico);
}

.vista-dedicada-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto-secundario);
  max-width: 560px;
}

html[data-theme="dark"] .vista-dedicada-desc {
  color: #B8C4DA;
}

.vista-dedicada-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 100px;
  position: relative;
  z-index: 3;
}

/* El backdrop-filter:blur() de .hero-bg-fade deja una costura de 1-2px en
   su propio borde (artefacto de renderizado del navegador, no una
   cuestión de posición/color) por la que se asoma la imagen sin difuminar.
   Se cubre con una franja sólida del mismo color que el fondo de la
   sección, superpuesta sobre ese borde exacto — con z-index mayor que
   .hero-bg-fade (2), si no queda tapada por él en vez de taparlo. */
.vista-dedicada .vista-dedicada-body::before {
  content: "";
  position: absolute;
  top: -8px;
  /* .vista-dedicada-body está centrado con max-width:1200px — left/right:0
     solo cubriría ese ancho, dejando sin tapar los márgenes laterales
     donde la imagen/fade sí llegan hasta el borde real de la pantalla. */
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  height: 20px;
  background: var(--bg-superficie-alterna);
  z-index: 4;
}

/* Buscador de ArdaWiki reutilizado dentro de la vista dedicada: mismo
   componente, pero adaptado al tema del sitio. */
.vista-dedicada-body .kb-search-wrap {
  margin-bottom: 32px;
}

.vista-dedicada-body .kb-search-pill {
  background: var(--bg-superficie);
  border: 1px solid var(--borde);
}

.vista-dedicada-body .kb-search-pill input {
  color: var(--texto-principal);
}

.vista-dedicada-body .kb-search-pill input::placeholder {
  color: var(--texto-secundario);
}

.vista-dedicada-body .kb-search-icon {
  color: var(--texto-secundario);
}

/* --- Listado en filas horizontales --- */
.filas-lista {
  display: flex;
  flex-direction: column;
}

.fila-item {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 8px;
  border-bottom: 1px solid var(--borde);
  text-align: left;
}

.fila-item:last-child {
  border-bottom: none;
}

.fila-icono {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(1, 126, 253, 0.16);
  color: var(--azul-electrico);
  display: flex;
  align-items: center;
  justify-content: center;
}

html[data-theme="dark"] .fila-icono {
  color: #F1F5F9;
}

.fila-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fila-titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--texto-principal);
  margin: 0;
}

.fila-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.fila-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-secundario);
}

.fila-meta-item svg {
  flex-shrink: 0;
  color: var(--verde-agua);
}

.fila-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-secundario);
  margin: 0;
  max-width: 640px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fila-accion {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  border-left: 1px solid var(--borde);
  padding: 4px 0 4px 22px;
  margin-left: 6px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--azul-electrico);
  white-space: nowrap;
  transition: color 0.2s ease, gap 0.2s ease;
}

html[data-theme="dark"] .fila-accion {
  color: #5EB3FF;
}

.fila-accion:hover {
  color: var(--azul-oscuro);
  gap: 13px;
}

html[data-theme="dark"] .fila-accion:hover {
  color: #8FCBFF;
}

.fila-accion svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.fila-accion:hover svg {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .vista-dedicada-hero-content {
    padding: 100px 20px 36px;
  }

  .vista-dedicada-titulo {
    font-size: 28px;
  }

  .vista-dedicada-body {
    padding: 32px 20px 70px;
  }

  .fila-item {
    flex-wrap: wrap;
    padding: 22px 4px;
  }

  .fila-info {
    flex-basis: calc(100% - 78px);
  }

  .fila-accion {
    flex-basis: 100%;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding: 14px 0 0;
    margin-left: 0;
    margin-top: 6px;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fila-accion,
  .fila-accion svg,
  .vista-dedicada-volver {
    transition: none !important;
  }
}