/* =============================================
   VARIABLES Y CONFIGURACIONES GLOBALES
============================================= */
:root {
  /* Colores principales */
  --primary: #004080;
  --primary-dark: #003366;
  --primary-light: #0066cc;
  --secondary: #d4af37;
  --secondary-dark: #b8952f;
  --dark: #222;
  --light: #f4f4f4;
  --white: #fff;
  --gray: #6c757d;
  --gray-light: #f8f9fa;

  /* Tipografía */
  --font-main: 'Roboto', sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;

  /* Espaciados */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Sombras */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

  /* Bordes */
  --border-radius: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 1rem;

  /* Transiciones */
  --transition-fast: all 0.15s ease;
  --transition-normal: all 0.3s ease;
  --transition-slow: all 0.5s ease;
}

/* =============================================
   RESET Y ESTILOS BASE
============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--dark);
  background-color: var(--light);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

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

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

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

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* =============================================
   COMPONENTES REUTILIZABLES
============================================= */
/* Botones */
.btn {
  display: inline-block;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.5rem 1.5rem;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  border-radius: var(--border-radius);
  transition: var(--transition-normal);
}

.btn-primary {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover {
  color: var(--white);
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-outline-primary {
  color: var(--primary);
  background-color: transparent;
  border-color: var(--primary);
}

.btn-outline-primary:hover {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Tarjetas */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--white);
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: var(--border-radius-lg);
  transition: var(--transition-normal);
  height: 100%;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.card-body {
  flex: 1 1 auto;
  padding: var(--space-lg);
}

.card-title {
  margin-bottom: var(--space-sm);
}

/* Icon circles */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--white);
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  transition: var(--transition-normal);
}

/* =============================================
   LAYOUT PRINCIPAL
============================================= */
/* Navbar */
.navbar {
  padding: var(--space-md) 0;
  transition: var(--transition-normal);
  background-color: transparent;
}

.navbar.scrolled {
  background: rgba(3, 13, 30, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 1px 0 rgba(212,175,55, 0.08), 0 4px 24px rgba(0, 0, 0, 0.4) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: var(--space-sm) 0;
}

/* Navbar glassmorphism — para páginas internas (noticias, nosotros) */
.navbar-glass {
  background: rgba(3, 13, 30, 0.82) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 1px 0 rgba(212,175,55, 0.08), 0 4px 24px rgba(0, 0, 0, 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: var(--space-sm) 0 !important;
}

.navbar-brand {
  font-weight: 700;
  display: flex;
  align-items: center;
}

.navbar-brand img {
  margin-right: var(--space-sm);
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--white);
  font-weight: 500;
  padding: var(--space-sm) var(--space-md);
  position: relative;
}

.navbar-dark .navbar-nav .nav-link::before {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--secondary);
  transition: var(--transition-normal);
}

.navbar-dark .navbar-nav .nav-link:hover::before,
.navbar-dark .navbar-nav .nav-link.active::before {
  width: calc(100% - 2rem);
}

/* =============================================
   HERO SECTION
============================================= */
.hero-section {
  position: relative;
  color: var(--white);
  background: linear-gradient(135deg, #030d1e 0%, #001a3d 60%, #000d2a 100%);
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 5rem 0;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
      radial-gradient(circle, rgba(212,175,55,0.055) 1px, transparent 1px),
      radial-gradient(ellipse 60% 70% at 80% 40%, rgba(0, 64, 128, 0.25) 0%, transparent 70%),
      radial-gradient(ellipse 40% 40% at 15% 60%, rgba(212,175,55, 0.04) 0%, transparent 60%);
  background-size: 38px 38px, 100% 100%, 100% 100%;
  background-position: 0 0, center, center;
  animation: hero-grid-drift 28s linear infinite;
  pointer-events: none;
}

@keyframes hero-grid-drift {
  0%   { background-position: 0 0, center, center; }
  100% { background-position: 38px 38px, center, center; }
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(3, 13, 30, 0.5));
  pointer-events: none;
}

.hero-section h1 {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: var(--space-lg);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.3;
}

.hero-section .lead {
  font-size: 1.5rem;
  margin-bottom: var(--space-xl);
  max-width: 500px;
}

.btn-hero-custom {
  background-color: var(--secondary);
  border: 2px solid var(--secondary);
  color: var(--dark);
  padding: 0.75rem 2.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn-hero-custom:hover {
  background-color: transparent;
  color: var(--secondary);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Secciones generales */
section {
  padding: 5rem 0;
  position: relative;
}

/* =============================================
   SECCIÓN SERVICIOS
============================================= */
#servicios .card {
  border: none;
  text-align: center;
  padding: var(--space-lg);
}

#servicios .icon-circle {
  margin-left: auto;
  margin-right: auto;
}

#servicios .card:hover .icon-circle {
  transform: rotate(15deg) scale(1.1);
}

/* =============================================
   SECCIÓN CLIENTES
============================================= */
.client-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-lg) 0;
}

.client-logos img {
  max-height: 80px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: var(--transition-normal);
}

.client-logos img:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════
   SECCIÓN TALENTO HUMANO — REDISEÑO PREMIUM
═══════════════════════════════════════════════════ */

#talento {
    background: linear-gradient(135deg, #030d1e 0%, #001430 60%, #002060 100%);
    padding: 0 0 5rem;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(212,175,55, 0.2);
}
#talento::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #d4af37 35%, #d4af37 65%, transparent 100%);
    opacity: 0.5;
    z-index: 1;
}

/* --- Banner hero interno --- */
.talento-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    background: url('../img/nosotros/unete.webp') center/cover no-repeat;
    margin-bottom: 3.5rem;
}
.talento-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(3,13,30,0.62) 30%, rgba(0,32,96,0.50) 100%);
}
.talento-hero-content {
    position: relative;
    z-index: 2;
    padding: 4rem 3rem;
}
.talento-hero-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #d4af37;
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 50px;
    padding: 0.3rem 1rem;
    margin-bottom: 1rem;
}
.talento-hero h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.75rem;
    line-height: 1.15;
}
.talento-hero p {
    color: rgba(255,255,255,0.75);
    font-size: 1.05rem;
    max-width: 520px;
    margin-bottom: 2rem;
}
.talento-hero .btn-talento-primary {
    background: #d4af37;
    color: #030d1e;
    font-weight: 700;
    padding: 0.7rem 1.75rem;
    border-radius: 50px;
    border: none;
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.talento-hero .btn-talento-primary:hover {
    background: #ffe84d;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212,175,55,0.35);
}
.talento-hero .btn-talento-outline {
    background: transparent;
    color: #fff;
    font-weight: 600;
    padding: 0.7rem 1.75rem;
    border-radius: 50px;
    border: 1.5px solid rgba(255,255,255,0.35);
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.talento-hero .btn-talento-outline:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.08);
    color: #fff;
    transform: translateY(-2px);
}

/* --- Tarjetas de talento --- */
.talento-cards-row {
    padding: 0 1.5rem;
}
.talento-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 2rem 1.75rem;
    height: 100%;
    transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.talento-card:hover {
    border-color: rgba(212,175,55,0.3);
    background: rgba(255,255,255,0.06);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.talento-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}
.talento-card-icon.tci-blue   { background: rgba(90,180,255,0.12); color: #5ab4ff; }
.talento-card-icon.tci-green  { background: rgba(93,219,160,0.12); color: #5ddba0; }
.talento-card-icon.tci-gold   { background: rgba(212,175,55,0.1);   color: #d4af37; }

.talento-card h5 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
}
.talento-card p {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}
.talento-card a.talento-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: #d4af37;
    text-decoration: none;
    transition: opacity 0.2s;
}
.talento-card a.talento-link:hover { opacity: 0.75; }

/* Listado de documentos */
.talento-docs-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}
.talento-docs-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.talento-docs-list li:last-child { border-bottom: none; }

.talento-doc-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(93,219,160,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5ddba0;
    font-size: 0.8rem;
}
.talento-doc-name { flex: 1; }
.talento-doc-badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(212,175,55,0.85);
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 20px;
    padding: 0.2rem 0.6rem;
}

/* Botones pequeños dentro de tarjeta */
.talento-card .btn-card-sm {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.talento-card .btn-card-sm.btn-support {
    background: rgba(90,180,255,0.15);
    color: #5ab4ff;
    border: 1px solid rgba(90,180,255,0.25);
}
.talento-card .btn-card-sm.btn-support:hover {
    background: rgba(90,180,255,0.25);
}
.talento-card .btn-card-sm.btn-whatsapp {
    background: rgba(37,211,102,0.15);
    color: #25d366;
    border: 1px solid rgba(37,211,102,0.25);
}
.talento-card .btn-card-sm.btn-whatsapp:hover {
    background: rgba(37,211,102,0.25);
}

@media (max-width: 767px) {
    .talento-hero-content { padding: 3rem 1.5rem; }
    .talento-hero { min-height: 340px; }
}

/* ═══════════════════════════════════════════════════
   SECCIÓN CONTACTO — REDISEÑO PREMIUM DARK
═══════════════════════════════════════════════════ */

#contacto {
    background: linear-gradient(160deg, #030d1e 0%, #001a3e 100%);
    padding: 5rem 0;
    position: relative;
}
#contacto::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.3), transparent);
}

/* Eyebrow badge reutilizable */
.section-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #d4af37;
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 50px;
    padding: 0.28rem 0.9rem;
    margin-bottom: 0.75rem;
}
#contacto .section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
}
#contacto .section-subtitle {
    color: rgba(255,255,255,0.5);
    font-size: 1rem;
    margin-bottom: 2.5rem;
}

/* Bloques de info de contacto */
.contact-info-dark {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.contact-info-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #d4af37;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.contact-info-item:hover .contact-info-icon {
    background: rgba(212,175,55,0.12);
    border-color: rgba(212,175,55,0.25);
}
.contact-info-text label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 0.15rem;
}
.contact-info-text span {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.85);
}

/* Social icons con colores de marca */
.social-icons-dark {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.social-icon-branded {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.22s ease;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
}
.social-icon-branded:hover { transform: translateY(-3px); opacity: 0.9; }
.social-icon-branded.si-facebook  { color: #fff; }
.social-icon-branded.si-facebook:hover  { background: #1877f2; border-color: #1877f2; }
.social-icon-branded.si-linkedin  { color: #fff; }
.social-icon-branded.si-linkedin:hover  { background: #0a66c2; border-color: #0a66c2; }
.social-icon-branded.si-instagram { color: #fff; }
.social-icon-branded.si-instagram:hover {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: #e6683c;
}
.social-icon-branded.si-whatsapp  { color: #fff; }
.social-icon-branded.si-whatsapp:hover  { background: #25d366; border-color: #25d366; }

/* Formulario oscuro */
.contact-form-dark {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 20px;
    padding: 2.25rem 2rem;
}
.contact-form-dark .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 0.4rem;
}
.contact-form-dark .form-control {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #fff;
    padding: 0.7rem 1rem;
    font-size: 0.92rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.contact-form-dark .form-control::placeholder { color: rgba(255,255,255,0.2); }
.contact-form-dark .form-control:focus {
    background: rgba(255,255,255,0.07);
    border-color: rgba(212,175,55,0.45);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.1);
    color: #fff;
}
.contact-form-dark textarea.form-control { resize: vertical; min-height: 120px; }
.contact-form-dark .btn-send {
    background: #d4af37;
    color: #030d1e;
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    border: none;
    font-size: 0.95rem;
    width: 100%;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.contact-form-dark .btn-send:hover {
    background: #ffe84d;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212,175,55,0.3);
}

@media (max-width: 767px) {
    .contact-form-dark { padding: 1.5rem 1.25rem; }
}

/* ═══════════════════════════════════════════════════
   FOOTER — REDISEÑO PREMIUM
═══════════════════════════════════════════════════ */

footer {
    background: #020914;
    color: rgba(255,255,255,0.65);
    padding: 4rem 0 0;
    position: relative;
    border-top: 1px solid rgba(212,175,55,0.15);
}

/* Línea dorada superior decorativa */
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #d4af37 35%, #d4af37 65%, transparent 100%);
    opacity: 0.6;
}

footer .footer-logo { margin-bottom: 1rem; }
footer .footer-tagline {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 240px;
}

footer h5 {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 0.6rem;
}
footer h5::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 28px; height: 2px;
    background: #d4af37;
    border-radius: 2px;
}

footer ul { list-style: none; padding: 0; margin: 0; }
footer ul li { margin-bottom: 0.5rem; }
footer ul li a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease, gap 0.2s ease;
}
footer ul li a:hover {
    color: #d4af37;
    gap: 0.6rem;
}
footer ul li a i {
    font-size: 0.65rem;
    opacity: 0;
    transition: opacity 0.2s;
}
footer ul li a:hover i { opacity: 1; }

/* Info de contacto en footer */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}
.footer-contact-item i {
    color: #d4af37;
    font-size: 0.8rem;
    margin-top: 3px;
    flex-shrink: 0;
}

/* Social icons en footer */
.footer-social {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.25rem;
}
.footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s ease;
}
.footer-social a:hover { transform: translateY(-2px); opacity: 0.9; gap: 0 !important; padding-left: 0 !important; }
.footer-social a.fs-facebook:hover  { background: #1877f2; border-color: #1877f2; color: #fff !important; }
.footer-social a.fs-linkedin:hover  { background: #0a66c2; border-color: #0a66c2; color: #fff !important; }
.footer-social a.fs-instagram:hover {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: #e6683c;
    color: #fff !important;
}
.footer-social a.fs-whatsapp:hover  { background: #25d366; border-color: #25d366; color: #fff !important; }

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 1.25rem 0;
    margin-top: 3rem;
}
.footer-bottom p {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.3);
}
.footer-bottom a {
    color: rgba(255,255,255,0.35);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-bottom a:hover { color: rgba(255,255,255,0.7); }

@media (max-width: 767px) {
    footer { padding: 3rem 0 0; }
    footer h5 { margin-top: 1.5rem; }
    .footer-tagline { max-width: 100%; }
}

/* =============================================
   MEDIA QUERIES - RESPONSIVE
============================================= */
@media (max-width: 1199.98px) {
  .hero-section h1 {}
}

@media (max-width: 991.98px) {
  section {
    padding: 4rem 0;
  }

  .hero-section {
    min-height: auto;
    padding: 6rem 0;
    text-align: center;
    background-position: center center;
    background-image: linear-gradient(rgba(5, 15, 30, 0.8), rgba(5, 15, 30, 0.8)), url('../img/banner1.webp');
  }

  .hero-section .row>div {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .hero-section h1 {
    font-size: 2.5rem;
  }

  .hero-section .lead {
    font-size: 1.25rem;
  }

}

/* Menu colapsado: hasta 1199px. Entre 992 y 1199 los 8 enlaces + Portales + Admin
   no caben en horizontal (el menu se salia hasta 100px y pisaba el logo), por eso el
   navbar usa navbar-expand-xl y estas reglas siguen ese mismo punto de corte. */
@media (max-width: 1199.98px) {
  .navbar-collapse {
    /* Mismo azul marino que el navbar al hacer scroll, en vez del azul primario
       brillante que desentonaba con el resto del sitio. */
    background-color: rgba(6, 20, 42, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: var(--space-md);
    margin-top: var(--space-sm);
    border-radius: var(--border-radius);
  }
}

@media (max-width: 767.98px) {
  :root {
    --font-size-base: 0.9rem;
  }

  section {
    padding: 3rem 0;
  }

  .hero-section {
    padding: 5rem 0;
  }

  .hero-section h1 {
    font-size: 2rem;
  }

  .contact-info,
  .contact-form {
    padding: var(--space-lg);
  }

  .client-logos {
    gap: var(--space-lg);
  }

  .client-logos img {
    max-height: 60px;
  }
}

@media (max-width: 575.98px) {
  .hero-section h1 {
    font-size: 1.75rem;
  }

  footer {
    text-align: center;
  }

  footer h5::after {
    left: 50%;
    transform: translateX(-50%);
  }

  footer ul {
    margin-bottom: var(--space-xl);
  }

  .social-icons {
    justify-content: center;
  }
}


/* =============================================
   EL TEATRO DE SOLUCIONES
============================================= */
.solutions-theater-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.service-selector-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.service-selector-btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  color: var(--primary-dark);
  background-color: var(--white);
  border: 2px solid var(--gray-light);
  transition: var(--transition-normal);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* =============================================
   ESTILOS PARA EL DASHBOARD DE SERVICIOS
   ============================================= */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  /* Equivalente a 24px si 1rem = 16px */
  margin-top: 2rem;
}

.kpi-card {
  /* Por defecto, cada tarjeta KPI ocupa una celda de la cuadrícula */
}

.chart-card {
  /* Hacemos que las tarjetas de gráficos se expandan para ocupar las 3 columnas */
  grid-column: span 3;
}

/* --- RESPONSIVIDAD PARA EL DASHBOARD --- */
@media (max-width: 768px) {
  .dashboard-grid {
    /* En pantallas pequeñas, cambiamos a una sola columna */
    grid-template-columns: 1fr;
  }

  .chart-card {
    /* En una sola columna, ya no necesita expandirse, así que lo reseteamos */
    grid-column: span 1;
  }
}

/* Estilos para la animación de Power BI */
.animation-stage {
  position: relative;
  width: 100%;
  height: 600px;
  /* Altura fija para el escenario de la animación */
  overflow: hidden;
  background: #f8f9fa;
  /* Coincide con el bg-light */
  border-radius: var(--border-radius-lg);
}

#raw-data-layer,
#processing-core,
#final-dashboard-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.data-fragment {
  position: absolute;
  background: #f8f9fa;
  /* Fondo más sólido */
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  /* Texto más grueso */
  color: #6c757d;
  /* Color de texto principal */
  opacity: 0;
  border: 1px solid #dee2e6;
  /* Borde sutil */
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Modificadores de color */
.data-fragment.color-1 {
  color: #0066cc;
}

/* Azul */
.data-fragment.color-2 {
  color: #6c757d;
}

/* Gris */
.data-fragment.color-3 {
  color: #28a745;
}

/* Verde */

#processing-core {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: scale(0);
}

#processing-core img {
  max-width: 100px;
}

#final-dashboard-layer {
  opacity: 0;
  /* El dashboard final empieza invisible */
}

/* ESTILOS PARA EL LABORATORIO DE DESARROLLO WEB */
.web-dev-lab {
  display: flex;
  gap: 2rem;
  background: #fff;
  padding: 2rem;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-md);
  position: relative;
  height: 500px;
}

.code-editor-panel,
.web-evolution-display {
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.editor-header,
.browser-header {
  padding: 0.75rem;
  background: #e9ecef;
  border-bottom: 1px solid #e0e0e0;
}

.dot {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.editor-header .dot {
  background-color: #ced4da;
}

.browser-header .dot:nth-child(1) {
  background-color: #ff5f56;
}

.browser-header .dot:nth-child(2) {
  background-color: #ffbd2e;
}

.browser-header .dot:nth-child(3) {
  background-color: #27c93f;
}

.code-editor-panel pre {
  background-color: #282c34;
  color: #abb2bf;
  padding: 1rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  flex-grow: 1;
  margin: 0;
  white-space: pre-wrap;
}

.code-editor-panel .token-tag {
  color: #e06c75;
}

.code-editor-panel .token-attr {
  color: #d19a66;
}

.code-editor-panel .token-string {
  color: #98c379;
}

.browser-content {
  flex-grow: 1;
  position: relative;
  padding: 1rem;
}

.evolution-phase {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  opacity: 0;
}

/* Estilos del Wireframe */
.wireframe-phase {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 1rem;
}

.wire-header {
  grid-column: 1 / -1;
  height: 40px;
  background: #e9ecef;
  border-radius: 4px;
}

.wire-hero-text {
  height: 120px;
  background: #f8f9fa;
  border: 2px dashed #ced4da;
  border-radius: 4px;
}

.wire-hero-button {
  height: 40px;
  width: 120px;
  background: #e9ecef;
  border-radius: 4px;
  align-self: start;
}

.wire-img {
  grid-row: 2;
  grid-column: 2;
  background: #e9ecef;
  border-radius: 4px;
}

/* Estilos del UI */
.ui-phase {
  background-image: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 100%);
  border-radius: 4px;
}

/* Estilos de la fase interactiva */
.interactive-button {
  position: absolute;
  top: 60%;
  left: 20%;
  padding: 1rem 2rem;
  background: var(--secondary);
  color: var(--dark);
  border: none;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
}

.floating-text {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gray);
  font-weight: 500;
  opacity: 0;
}

/* AÑADIR EN style.css */
.data-analysis-lab-v2 {
  position: relative;
  height: 550px;
  background: #f8f9fa;
  border-radius: 1rem;
  overflow: hidden;
}

.data-source-icons {
  position: absolute;
  top: 2rem;
  width: 100%;
  text-align: center;
  font-size: 2rem;
  color: #ced4da;
}

.data-grid-container {
  position: absolute;
  inset: 6rem 2rem 2rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 5px;
}

.data-cell {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: #adb5bd;
}

.kaizen-scanner {
  position: absolute;
  top: 6rem;
  left: 0;
  width: 5px;
  height: calc(100% - 8rem);
  background: var(--secondary);
  box-shadow: 0 0 15px var(--secondary);
  opacity: 0;
}

.final-dashboard {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  opacity: 0;
}

.kpi-display,
.bar-chart-display,
.line-chart-display {
  background: white;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
}

.kpi-display {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--primary-dark);
}

.bar-chart-display {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  height: 150px;
}

.bar-chart-display .bar {
  width: 40px;
  background: var(--primary-light);
  border-radius: 4px;
}

.line-chart-display svg {
  width: 250px;
  overflow: visible;
}

.line-chart-display path {
  stroke: var(--secondary-dark);
  stroke-width: 3;
  fill: none;
}

#analysis-text-1,
#analysis-text-2,
#analysis-text-3 {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gray);
  font-weight: 500;
  opacity: 0;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px 15px;
  border-radius: 20px;
}

/* AÑADIR EN style.css */
.data-analysis-lab {
  position: relative;
  height: 600px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.data-flow-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.data-icon {
  fill: #adb5bd;
  transform-origin: center center;
  transition: fill 0.3s ease;
}

.data-icon.active {
  fill: var(--primary);
}

.data-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #adb5bd;
  opacity: 0;
}

#data-text-1,
#data-text-2,
#data-text-3 {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gray);
  font-weight: 500;
  opacity: 0;
}

/* AÑADIR EN style.css */
.web-dev-lab {
  display: flex;
  gap: 2rem;
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  height: 550px;
}

.code-editor-panel {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #282c34;
}

.editor-header {
  padding: 0.75rem;
  background: #21252b;
  border-bottom: 1px solid #333;
}

.editor-header .dot {
  background-color: #555;
}

.code-editor-panel pre {
  color: #abb2bf;
  padding: 1rem;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 0.9rem;
  flex-grow: 1;
  margin: 0;
  white-space: pre-wrap;
  opacity: 0;
}

.code-editor-panel .token-tag {
  color: #e06c75;
}

.code-editor-panel .token-attr {
  color: #d19a66;
}

.code-editor-panel .token-string {
  color: #98c379;
}

.code-editor-panel .token-keyword {
  color: #c678dd;
}

.device-display-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#dynamic-device {
  transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

#dynamic-device.desktop {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

#dynamic-device.mobile {
  width: 220px;
  height: 95%;
  border-radius: 24px;
  border: 8px solid #333;
}

.browser-header {
  flex-shrink: 0;
  padding: 0.75rem;
  background: #e9ecef;
  border-bottom: 1px solid #e0e0e0;
}

.browser-header .dot:nth-child(1) {
  background-color: #ff5f56;
}

.browser-header .dot:nth-child(2) {
  background-color: #ffbd2e;
}

.browser-header .dot:nth-child(3) {
  background-color: #27c93f;
}

#dynamic-device.mobile .browser-header {
  display: none;
}

.browser-content {
  flex-grow: 1;
  padding: 1rem;
  transition: background-color 1s ease;
}

.content-grid {
  display: flex;
  gap: 1rem;
  height: 100%;
}

.main-panel {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.side-panel {
  flex: 1;
  background-color: #e9ecef;
  border-radius: 4px;
  transition: opacity 0.5s ease;
}

.text-placeholder {
  background-color: #e9ecef;
  border-radius: 4px;
}

.text-placeholder.long {
  height: 60%;
}

.text-placeholder.short {
  height: 30%;
}

.button-placeholder {
  background-color: #ced4da;
  border-radius: 20px;
  height: 40px;
  width: 120px;
}

#dynamic-device.mobile .content-grid {
  flex-direction: column;
}

#dynamic-device.mobile .side-panel {
  opacity: 0;
  height: 0;
}

#dev-text-1,
#dev-text-2,
#dev-text-3 {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gray);
  font-weight: 500;
  opacity: 0;
}

/* AÑADIR/MODIFICAR ESTE BLOQUE EN style.css */
.powerbi-kaizen-scene {
  position: relative;
  height: 650px;
  width: 100%;
  background-color: #f8f9fa;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-md);
}

.data-grid-cells {
  position: absolute;
  inset: 0;
  perspective: 800px;
  z-index: 5;
  /* CORRECCIÓN: Asegura que la capa de datos esté visible */
  pointer-events: none;
  /* Los datos crudos no deben ser clickeables */
}

.data-cell-powerbi {
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6c757d;
  opacity: 0;
  background: rgba(255, 255, 255, 0.6);
  padding: 3px 6px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  will-change: transform, opacity;
  /* Optimización para animaciones */
}

.data-icon-powerbi {
  /* Estilo para los nuevos iconos */
  position: absolute;
  font-size: 1.5rem;
  color: #aaa;
  opacity: 0;
  /* Inician invisibles */
  will-change: transform, opacity;
  /* Optimización para animaciones */
}

.kaizen-logo-placeholder {
  z-index: 10;
}

.kaizen-logo-placeholder {
  z-index: 10;
}

.kaizen-absorber-logo {
  width: 150px;
  height: auto;
  transform: scale(0);
  opacity: 0;
  filter: drop-shadow(0 0 20px rgba(0, 102, 204, 0.6));
  width: 150px;
  height: auto;
  transform: scale(0);
  opacity: 0;
  filter: drop-shadow(0 0 20px rgba(0, 102, 204, 0.6));
  will-change: transform, opacity, filter;
  /* Optimización */
}

.final-dashboard-display {
  position: absolute;
  inset: 1.5rem;
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  opacity: 0;
  transform: scale(0.8);
  overflow: hidden;
  z-index: 15;
  /* El dashboard siempre está al frente */
  will-change: transform, opacity;
  /* Optimización */
}

.dashboard-header {
  color: var(--primary-dark);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.dashboard-header p {
  color: var(--gray);
  font-size: 0.9rem;
}

.dashboard-header p span {
  font-weight: 600;
  color: var(--primary);
}

.kpi-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.kpi-item {
  background: linear-gradient(135deg, #f0f4f8, #e0e7ed);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #f0f4f8, #e0e7ed);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Transiciones controladas */
}

.kpi-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

.kpi-item i {
  font-size: 2rem;
  color: var(--primary);
}

.kpi-item .kpi-info h5 {
  font-size: 1.1rem;
  color: var(--gray-dark);
  margin-bottom: 0.3rem;
}

.kpi-item .kpi-info .kpi-value-powerbi {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--primary-dark);
}

.charts-section {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
}

.chart-panel {
  background: #fdfefe;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background: #fdfefe;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Transiciones controladas */
}

.chart-panel:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: var(--shadow-md);
}

.chart-panel h4 {
  margin-bottom: 1rem;
  color: var(--primary-dark);
  font-size: 1.3rem;
}

.charts-section .full-width {
  flex: 1 1 100%;
  height: 300px;
}

.charts-section .half-width {
  flex: 0 0 calc(50% - 0.75rem);
  height: 280px;
}

/* CORRECCIÓN: Evita que el gráfico crezca y se estire */
/* Asegurarse de que Chart.js Canvas tenga el 100% del tamaño de su contenedor */
.chart-panel canvas {
  width: 100% !important;
  height: 100% !important;
}

.floating-text-powerbi {
  position: absolute;
  bottom: 30px;
  color: var(--gray-dark);
  font-weight: 600;
  opacity: 0;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 20px;
  border-radius: 25px;
  box-shadow: var(--shadow-sm);
  z-index: 20;
  font-size: 1.1rem;
  position: absolute;
  bottom: 30px;
  color: var(--gray-dark);
  font-weight: 600;
  opacity: 0;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 20px;
  border-radius: 25px;
  box-shadow: var(--shadow-sm);
  z-index: 20;
  font-size: 1.1rem;
  will-change: opacity;
  /* Optimización */
}


/* ============================================= */
/* === ESTILOS PARA LA NUEVA ESCENA DE ANÁLISIS DE DATOS === */
/* ============================================= */

/* Contenedor principal de la escena */
.data-journey-scene {
  position: relative;
  width: 100%;
  height: 500px;
  /* Altura fija para la animación */
  background-color: #f8f9fa;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Contenedor de los íconos de fuentes de datos */
.data-sources {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.data-source-icon {
  position: absolute;
  font-size: 2rem;
  color: var(--primary);
  opacity: 0.8;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

/* Posicionamiento específico de cada ícono */
#source-db {
  top: 15%;
  left: 10%;
}

#source-cloud {
  top: 25%;
  right: 12%;
}

#source-excel {
  bottom: 20%;
  left: 15%;
}

#source-social {
  bottom: 15%;
  right: 20%;
}

/* Canvas para las partículas */
#data-lake-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Para que no interfiera con otros elementos */
}

/* El Motor Kaizen (Acto 2) */
.kaizen-engine {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  /* Inicialmente invisible */
  transform: scale(0);
}

.engine-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid;
}

.ring-1 {
  width: 100%;
  height: 100%;
  border-color: rgba(0, 102, 204, 0.5);
  animation: rotate 10s linear infinite;
}

.ring-2 {
  width: 70%;
  height: 70%;
  border-color: rgba(0, 153, 255, 0.7);
  animation: rotate-reverse 8s linear infinite;
}

.engine-core {
  width: 40px;
  height: 40px;
  background-color: #d4af37;
  border-radius: 50%;
  box-shadow: 0 0 20px #d4af37, 0 0 40px #ffae00;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-reverse {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

/* El Cristal del Conocimiento (Acto 3) */
.insight-crystal {
  position: absolute;
  bottom: 0;
  width: 80%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 15px;
  transform-style: preserve-3d;
  perspective: 1000px;
  opacity: 0;
  /* Inicialmente invisible */
}

.insight-bar {
  width: 50px;
  background: linear-gradient(to top, var(--primary), var(--secondary));
  border-radius: 5px 5px 0 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform-origin: bottom;
  height: 0;
  /* Altura inicial 0 para animar */
}

/* Textos flotantes (ya existen, pero aseguramos su posición) */
#analysis-content-pane .floating-text {
  position: absolute;
  bottom: 55%;
  /* CORRECCIÓN: Elevamos el texto para que aparezca justo encima del área del gráfico (que tiene un height del 50%). */
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: #343a40;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 8px 15px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  opacity: 0;
  /* Inicialmente invisibles */
}

/* =============================================
   NUEVA SECCIÓN DE LIDERAZGO
============================================= */
.liderazgo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.lider-card {
  background-color: var(--white);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.lider-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.lider-card-img-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.lider-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.4s ease;
}

.lider-card:hover .lider-card-img {
  transform: scale(1.05);
}

.lider-card-body {
  padding: 2rem;
  text-align: center;
}

.lider-card-name {
  font-size: 1.75rem;
  color: var(--primary-dark);
  margin-bottom: 0.25rem;
}

.lider-card-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--secondary-dark);
  margin-bottom: 1.5rem;
}

.lider-card-description {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.7;
}

@media (max-width: 991.98px) {
  .liderazgo-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ── Variante compacta de la sección de liderazgo (bajo el mapa) ── */
.liderazgo-compact h2 {
  font-size: 1.7rem;
}
.liderazgo-compact .lead {
  font-size: 0.95rem;
}
.liderazgo-compact .liderazgo-grid {
  max-width: 820px;
  margin: 0 auto;
  gap: 1.5rem;
}
.liderazgo-compact .lider-card {
  flex-direction: row;
  align-items: stretch;
}
.liderazgo-compact .lider-card-img-container {
  width: 130px;
  height: auto;
  flex-shrink: 0;
}
.liderazgo-compact .lider-card-body {
  padding: 1.15rem 1.25rem;
  text-align: left;
}
.liderazgo-compact .lider-card-name {
  font-size: 1.15rem;
  margin-bottom: 0.1rem;
}
.liderazgo-compact .lider-card-title {
  font-size: 0.82rem;
  margin-bottom: 0.6rem;
}
.liderazgo-compact .lider-card-description {
  font-size: 0.82rem;
  line-height: 1.55;
}
@media (max-width: 575.98px) {
  .liderazgo-compact .lider-card {
    flex-direction: column;
  }
  .liderazgo-compact .lider-card-img-container {
    width: 100%;
    height: 200px;
  }
  .liderazgo-compact .lider-card-body {
    text-align: center;
  }
}
/* =============================================
   BOTÓN ADMIN DE LA NAVBAR
   Antes vivía en un <style> inline dentro de nosotros.php. Como la navbar
   está copiada en cada página, tenerlo inline hacía que el botón se viera
   distinto según la página. Aquí es una sola fuente de verdad.
============================================= */
.navbar-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 1rem;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(212, 175, 55, 0.65);
    border: 1px solid rgba(212, 175, 55, 0.18);
    background: rgba(212, 175, 55, 0.05);
    text-decoration: none;
    letter-spacing: 0.4px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.navbar-admin-btn:hover {
    color: var(--secondary);
    border-color: rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.12);
}

@media (max-width: 1199.98px) {
    .navbar-admin-btn {
        margin-left: 0;
        margin-top: 0.5rem;
        align-self: flex-start;
    }
}

/* NOTA: aquí vivían ~460 líneas de #strategic-direction y .sm-* que solo
   consumía nosotros.php. Esa sección se retiró (su contenido pasó a estar
   visible en la página, no dentro de 4 modales), así que el bloque se
   eliminó de este archivo global en lugar de seguir enviándolo a todas
   las páginas del sitio. */
/* --- Estilos Galería de Clientes (V7.0 "Pared de Confianza") --- */

/* La animación de scroll infinito */
@keyframes scrollInfinito {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Mueve el track la mitad de su ancho (el ancho del Grupo 1) */
        transform: translateX(-50%);
    }
}

/* NUEVA Animación de scroll (Derecha) */
@keyframes scrollInfinitoReverso {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.rio-confianza-container {
    padding: 4rem 0;
    background-color: #f8f9fa;
    margin-bottom: 2rem;
}

.rio-confianza-wrapper {
    width: 100%;
    overflow: hidden; /* Oculta el desbordamiento */
    /* Gradiente en los bordes para un efecto 'fade' */
    mask-image: linear-gradient(to right, 
        transparent, 
        black 10%, 
        black 90%, 
        transparent
    );
    -webkit-mask-image: linear-gradient(to right, 
        transparent, 
        black 10%, 
        black 90%, 
        transparent
    );
    margin-bottom: 1.5rem; /* Espacio entre filas */
}

.rio-confianza-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content; /* Ancho total (Grupo 1 + Grupo 2) */
    
    /* ¡La animación! 40s de duración, lineal, infinita */
    animation: scrollInfinito 40s linear infinite; /* Fila 1 y 3 */
}

/* NUEVA Clase para la fila 2 */
.rio-track-reverso {
    animation: scrollInfinitoReverso 40s linear infinite;
    /* Una duración ligeramente diferente (opcional) para desincronizar */
    animation-duration: 45s; 
}

/* Pausa la animación en hover */
.rio-confianza-wrapper:hover .rio-confianza-track {
    animation-play-state: paused;
}

.rio-logo-card {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px; /* <- TAMAÑO AUMENTADO (era 250px) */
    height: 140px; /* <- TAMAÑO AUMENTADO (era 120px) */
    padding: 1.5rem;
    margin: 0 1rem;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rio-logo-card img {
    max-width: 100%;
    max-height: 90px; /* <- TAMAÑO AUMENTADO (era 80px) */
    object-fit: contain;
    /* Filtro para que todos los logos sean grises (profesional) */
    filter: grayscale(100%) opacity(0.7);
    transition: filter 0.3s ease;
}

/* Efecto hover en la tarjeta individual */
.rio-logo-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.rio-logo-card:hover img {
    /* Al hacer hover, el logo toma color y opacidad completa */
    filter: grayscale(0%) opacity(1);
}

/* =============================================
   ORBE DE INTELIGENCIA KAIZEN (KAI)
============================================= */

/* --- 1. El Orbe Flotante --- */
#kai-orb {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1040;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, var(--primary-dark) 0%, #1a1c23 70%);
  box-shadow: 0 0 25px rgba(0, 102, 204, 0.4);
  transition: transform 0.3s ease;
  will-change: transform; /* Optimización para GSAP */
  overflow: hidden;
}

#kai-orb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 35px rgba(212,175,55, 0.6);
}

/* --- 1.1. Núcleo de Datos (Nuevo) --- */
#data-core {
  width: 80%;
  height: 80%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 3px;
}

.data-pixel {
  background-color: var(--primary-dark);
  border-radius: 2px;
  opacity: 0.1;
}

/* --- 2. El Hub Modal --- */
#kai-hub-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 25, 41, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1050;
  display: flex;
  justify-content: center;
  align-items: center;
  /* GSAP controlará la visibilidad */
  visibility: hidden;
  opacity: 0;
}

#kai-hub-panel {
  position: relative;
  width: 90%;
  max-width: 550px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 2.5rem;
  /* GSAP controlará la visibilidad */
  visibility: hidden;
  opacity: 0;
}

#kai-hub-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 2rem;
  color: var(--gray);
  cursor: pointer;
  transition: var(--transition-fast);
}

#kai-hub-close-btn:hover {
  color: var(--primary);
  transform: rotate(90deg);
}

.kai-hub-header {
  text-align: center;
  margin-bottom: 2rem;
}

.kai-hub-header img {
  background-color: var(--primary);
  border-radius: 50%;
  padding: 5px;
  margin-bottom: 1rem;
}

.kai-hub-header h3 {
  color: var(--primary-dark);
  font-weight: 700;
}

#kai-hub-actions {
  list-style: none;
  padding: 0;
  margin: 0;
}

#kai-hub-actions li {
  /* GSAP controlará la visibilidad */
  opacity: 0;
  visibility: hidden;
}

#kai-hub-actions li a {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: var(--dark);
  border-radius: var(--border-radius);
  transition: var(--transition-normal);
}

.menu-item-content {
  display: flex;
  flex-direction: column; /* Apila el título y la descripción */
  align-items: flex-start; /* Alinea el texto a la izquierda */
  gap: 0.2rem; /* Espacio entre título y descripción */
}

.menu-item-content span:first-child { /* El título */
  font-weight: 500;
  font-size: 1.1rem;
}

.menu-description {
  font-size: 0.8rem; /* Tamaño de fuente menor */
  color: var(--gray); /* Color más claro */
  transition: var(--transition-fast);
}

#kai-hub-actions li a:hover {
  background-color: var(--primary);
  color: var(--white);
  transform: translateX(10px);
}

#kai-hub-actions li a i {
  color: var(--primary-light);
  margin-right: 1.5rem;
  width: 25px;
  text-align: center;
  transition: var(--transition-fast);
}

#kai-hub-actions li a:hover i {
  color: var(--secondary);
}

#kai-hub-actions li a:hover .menu-description {
  color: rgba(255, 255, 255, 0.7); /* Color más claro para la descripción en hover */
}

/* =============================================
   KAIZEN SUPPORT SUITE
============================================= */

/* --- Overlay Principal --- */
#suite-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 25, 41, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1060;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#suite-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* --- Contenedor del Modal --- */
#suite-modal {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 90vh;
  max-height: 700px;
  background-color: var(--white);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#suite-overlay.active #suite-modal {
  transform: scale(1);
}

/* --- Vistas Internas --- */
.suite-view {
  display: none; /* GSAP gestionará la visibilidad */
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  overflow-y: auto;
}

.suite-view.active {
  display: flex;
}

/* --- Vista de Login (#suite-login-view) --- */
#suite-login-view {
  justify-content: center;
  align-items: center;
  text-align: center;
}

#suite-login-view .suite-header img {
  background-color: var(--primary);
  border-radius: 50%;
  padding: 5px;
}

#suite-login-view .suite-header h2 {
  color: var(--primary-dark);
  margin-top: 1rem;
}

#suite-login-form {
  width: 100%;
  max-width: 400px;
  margin-top: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
  text-align: left;
}

.form-group label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
}

.form-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ced4da;
  border-radius: var(--border-radius);
  font-size: 1rem;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 64, 128, 0.15);
}

#login-error-msg {
  color: #dc3545;
  margin-top: 1rem;
  display: none;
}

/* --- Vista de Dashboard (#suite-dashboard-view) --- */
.suite-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.suite-dashboard-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--primary-dark);
}

.suite-dashboard-header p {
  margin: 0;
}

.ticket-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.ticket-filters .btn {
  border-radius: 20px;
  font-size: 0.9rem;
}

#suite-ticket-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- Estilos para el Nuevo Dashboard Profesional --- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.kpi-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 1.5rem;
  border-radius: var(--border-radius);
  gap: 1rem;
}

.kpi-icon {
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.kpi-icon.open { background-color: #0d6efd; }
.kpi-icon.in-progress { background-color: #ffc107; }
.kpi-icon.closed { background-color: #198754; }


.kpi-content .kpi-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-dark);
  display: block;
  line-height: 1;
}

.kpi-content .kpi-label {
  font-size: 0.9rem;
  color: var(--gray);
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Tabla de Tickets */
.suite-ticket-table {
  border-collapse: separate;
  border-spacing: 0 10px;
}
.suite-ticket-table thead th {
  border: none;
  color: var(--gray);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}
.suite-ticket-table tbody tr {
  background-color: #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition-normal);
}
.suite-ticket-table tbody tr:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.suite-ticket-table tbody td {
  padding: 1.25rem;
  vertical-align: middle;
  border: none;
  border-top: 1px solid #f1f1f1;
}
.suite-ticket-table tbody tr td:first-child { border-radius: var(--border-radius) 0 0 var(--border-radius); }
.suite-ticket-table tbody tr td:last-child { border-radius: 0 var(--border-radius) var(--border-radius) 0; }

/* Píldoras de Estado */
.status-pill {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
}
.status-pill.open { background-color: rgba(13, 110, 253, 0.1); color: #0d6efd; }
.status-pill.in-progress { background-color: rgba(255, 193, 7, 0.1); color: #ffc107; }
.status-pill.closed { background-color: rgba(25, 135, 84, 0.1); color: #198754; }

/* Vista de Creación de Ticket */
.ticket-form-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  /* Corrección: El contenido del formulario ya no se centra verticalmente */
  align-content: flex-start; 
}
.suite-view#suite-ticket-view {
  /* Corrección: Asegura que el contenedor flex se alinee al inicio */
  justify-content: flex-start;
  height: 100%;
}
.ticket-form-main {
  display: flex;
  flex-direction: column;
}
.ticket-form-sidebar {
  background-color: var(--gray-light);
  padding: 1.5rem;
  border-radius: var(--border-radius);
}
.ticket-form-sidebar h4 {
  color: var(--primary-dark);
  margin-bottom: 1rem;
}
.ticket-form-sidebar p {
  font-size: 0.9rem;
}
.form-select {
  padding: 0.75rem 1rem;
  height: calc(1.6em + 1.5rem + 2px);
}

/* --- Estilos para el Estado Vacío del Dashboard --- */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: var(--gray);
}

.empty-state-icon {
  font-size: 4rem;
  color: #28a745; /* Verde éxito */
  margin-bottom: 1.5rem;
  line-height: 1;
}

.empty-state-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  max-width: 400px;
  margin: 0;
}
/* Tarjetas de Ticket Rediseñadas */
.ticket-card {
  background-color: #fff;
  border: 1px solid #e9ecef;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ticket-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.ticket-card-status .status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.open { background-color: #007bff; } /* Azul */
.status-dot.in-progress { background-color: #ffc107; } /* Amarillo */
.status-dot.closed { background-color: #28a745; } /* Verde */

.ticket-card-info h5 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.ticket-card-info p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gray);
}

.ticket-card-date {
  text-align: right;
  font-size: 0.9rem;
  color: var(--gray);
}

.ticket-status .last-update {
  font-size: 0.8rem;
  color: var(--gray);
  margin-top: 0.25rem;
}

/* --- Responsividad --- */
@media (max-width: 767.98px) {
  #suite-modal {
    height: 95vh;
    max-height: none;
  }
  .suite-view {
    padding: 1.5rem;
  }
  .suite-dashboard-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .kpi-row {
    grid-template-columns: 1fr;
  }
  .action-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .ticket-filters {
    justify-content: center;
  }
  #suite-create-ticket-btn {
    width: 100%;
  }
  .ticket-form-layout {
    grid-template-columns: 1fr;
  }
  .ticket-form-sidebar { order: -1; margin-bottom: 2rem; }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.25);
    color: #d4af37;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    margin-bottom: 1.5rem;
}
.hero-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    font-weight: 900;
    line-height: 1.1;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-bottom: 1.5rem;
}
.hero-highlight {
    color: #d4af37;
    position: relative;
    display: inline-block;
}
.hero-subline {
    font-size: 1.1rem;
    color: rgba(255,255,0,0.7);
    line-height: 1.65;
    max-width: 560px;
    margin-bottom: 2rem;
}

/* ╔═══════════════════════════════════════════════════════════════
   ║  TEATRO DE SOLUCIONES — SISTEMA COMPLETO v2
   ╚═══════════════════════════════════════════════════════════════ */

/* ── Sección contenedora ──────────────────────────────────────── */
.teatro-section {
    background: linear-gradient(160deg, #030d1e 0%, #001230 60%, #002050 100%);
    padding: 5rem 0 4rem;
    position: relative;
    border-top: 1px solid rgba(212,175,55,0.12);
}
.teatro-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4), transparent);
}

/* ── Header del teatro ────────────────────────────────────────── */
.teatro-header { color: #fff; }
.teatro-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #d4af37;
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 50px;
    padding: 0.28rem 0.9rem;
    margin-bottom: 0.75rem;
}
.teatro-titulo {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
}
.teatro-accent { color: #d4af37; }
.teatro-sub { color: rgba(255,255,255,0.55); font-size: 1rem; }

/* ── Tabs glassmorphism ───────────────────────────────────────── */
.teatro-tabs { border: none !important; gap: 6px; }
.teatro-tab {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,0.55) !important;
    padding: 10px 22px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.22s ease !important;
    position: relative;
}
.teatro-tab:hover:not(.active) {
    background: rgba(255,255,255,0.09) !important;
    color: rgba(255,255,255,0.8) !important;
}
.teatro-tab.active {
    background: rgba(212,175,55,0.12) !important;
    border-color: rgba(212,175,55,0.4) !important;
    color: #d4af37 !important;
    box-shadow: 0 0 24px rgba(212,175,55,0.15) !important;
}
.tab-badge {
    font-size: 0.62rem;
    font-weight: 800;
    background: #d4af37;
    color: #030d1e;
    border-radius: 4px;
    padding: 1px 5px;
    letter-spacing: 0.05em;
    animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ── Stage principal (altura fija, sin scroll externo) ────────── */
.teatro-stage {
    position: relative;
    width: 100%;
    height: 620px;
    background: linear-gradient(145deg, #020c1b 0%, #001230 100%);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,0.1);
    box-shadow: 0 32px 80px rgba(0,0,0,0.6);
}
.teatro-grid-bg {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(212,175,55,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,175,55,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}
.teatro-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}
.teatro-scene {
    position: absolute; inset: 0;
    z-index: 5;
}

/* ── Logo holográfico ─────────────────────────────────────────── */
.kai-logo-holo {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 140px; height: 140px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
}
.holo-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(212,175,55,0.3);
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
.holo-ring.r1 { width: 140px; height: 140px; animation: holo-spin 6s linear infinite; }
.holo-ring.r2 { width: 110px; height: 110px; animation: holo-spin 4s linear infinite reverse; }
.holo-ring.r3 { width: 80px; height: 80px; border-color: rgba(90,180,255,0.3); animation: holo-spin 3s linear infinite; }
.holo-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 60px; height: 60px;
    background: rgba(0,64,128,0.8);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 30px rgba(212,175,55,0.4);
}
.holo-img { width: 40px; filter: brightness(2); }
.holo-scan {
    position: absolute; inset: 0;
    background: linear-gradient(transparent 40%, rgba(212,175,55,0.08) 50%, transparent 60%);
    animation: holo-scan 2s ease-in-out infinite;
}
@keyframes holo-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes holo-scan { 0%,100% { transform: translateY(-30px); } 50% { transform: translateY(30px); } }

/* ── Indicador de pasos ───────────────────────────────────────── */
.teatro-steps {
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 50;
    pointer-events: none;
    gap: 0;
}
.teatro-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.step-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,0.35);
    transition: all 0.4s ease;
}
.step-label {
    font-size: 9px;
    color: rgba(255,255,255,0.25);
    font-weight: 500;
    transition: color 0.4s ease;
    white-space: nowrap;
}
.teatro-step.active .step-num {
    background: #d4af37;
    border-color: #d4af37;
    color: #030d1e;
    box-shadow: 0 0 14px rgba(212,175,55,0.5);
}
.teatro-step.active .step-label { color: #d4af37; }
.teatro-step.done .step-num { background: #5ddba0; border-color: #5ddba0; color: #030d1e; }
.teatro-step.done .step-label { color: #5ddba0; }
.step-connector {
    width: 50px; height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 0 5px;
    margin-bottom: 18px;
}

/* ── Avatar KAI ───────────────────────────────────────────────── */
.kai-avatar {
    position: absolute;
    bottom: 16px; left: 16px;
    z-index: 60;
    pointer-events: none;
    transition: left 0.9s cubic-bezier(0.34,1.56,0.64,1), bottom 0.9s cubic-bezier(0.34,1.56,0.64,1);
}
.kai-body-wrap { position: relative; width: 52px; }
.kai-head {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, #d4af37, #ffbf00);
    border-radius: 50%;
    margin: 0 auto;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(212,175,55,0.45);
    animation: kai-bob 2.2s ease-in-out infinite;
    position: relative;
}
.kai-eyes { display: flex; gap: 7px; margin-bottom: 3px; }
.kai-eye {
    width: 7px; height: 9px;
    background: #030d1e;
    border-radius: 50%;
    position: relative;
    animation: kai-blink 4s ease-in-out infinite;
}
.kai-pupil {
    position: absolute;
    width: 3px; height: 3px;
    background: #fff;
    border-radius: 50%;
    top: 1px; right: 1px;
}
.kai-mouth {
    width: 15px; height: 6px;
    border-bottom: 2.5px solid #030d1e;
    border-radius: 0 0 15px 15px;
}
.kai-torso {
    width: 36px; height: 26px;
    background: linear-gradient(135deg, #004080, #002a5c);
    border-radius: 7px 7px 3px 3px;
    margin: 3px auto 0;
    display: flex; align-items: center; justify-content: center;
}
.kai-logo-badge { font-size: 12px; font-weight: 900; color: #d4af37; font-style: italic; }
.kai-legs { display: flex; gap: 5px; justify-content: center; margin-top: 2px; }
.kai-leg { width: 13px; height: 9px; background: #004080; border-radius: 0 0 4px 4px; }
.kai-leg.left { animation: kai-walk-l 0.5s ease-in-out infinite alternate; }
.kai-leg.right { animation: kai-walk-r 0.5s ease-in-out infinite alternate; }
.kai-arm {
    position: absolute;
    width: 7px; height: 19px;
    background: #d4af37;
    border-radius: 3px;
    top: 42px;
    transform-origin: top center;
}
.kai-arm.left { left: -5px; transform: rotate(-15deg); animation: kai-arm-l 2.5s ease-in-out infinite; }
.kai-arm.right { right: -5px; transform: rotate(15deg); animation: kai-arm-r 2.5s ease-in-out infinite; }
@keyframes kai-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes kai-blink { 0%,90%,100%{transform:scaleY(1)} 95%{transform:scaleY(0.1)} }
@keyframes kai-walk-l { from{transform:rotate(-18deg)} to{transform:rotate(8deg)} }
@keyframes kai-walk-r { from{transform:rotate(18deg)} to{transform:rotate(-8deg)} }
@keyframes kai-arm-l { 0%,100%{transform:rotate(-15deg)} 50%{transform:rotate(-38deg)} }
@keyframes kai-arm-r { 0%,100%{transform:rotate(15deg)} 50%{transform:rotate(38deg)} }

.kai-speech {
    position: absolute;
    bottom: 112px; left: -8px;
    background: #fff;
    color: #030d1e;
    border-radius: 12px 12px 12px 2px;
    padding: 8px 13px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    min-width: 130px;
    max-width: 200px;
    z-index: 65;
}
.kai-speech-tail {
    position: absolute;
    bottom: -7px; left: 13px;
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
}

/* Cursor virtual auto-play */
.kai-cursor {
    position: absolute;
    font-size: 20px;
    color: #d4af37;
    z-index: 80;
    pointer-events: none;
    display: none;
    filter: drop-shadow(0 0 6px rgba(212,175,55,0.8));
}

/* ── Drag scene ───────────────────────────────────────────────── */
.drag-pulse {
    position: absolute;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(212,175,55,0.3);
    display: none;
    z-index: 30;
    pointer-events: none;
}
.drag-pulse::before, .drag-pulse::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.25);
    animation: dpulse 1.8s ease-out infinite;
}
.drag-pulse::before { inset: -10px; }
.drag-pulse::after { inset: -20px; animation-delay: 0.35s; }
@keyframes dpulse { 0%{transform:scale(0.7);opacity:1} 100%{transform:scale(2.5);opacity:0} }

.drag-label {
    position: absolute;
    font-size: 10px; font-weight: 700;
    color: #d4af37;
    display: none;
    z-index: 35;
    pointer-events: none;
    animation: dlbl 1.1s ease-in-out infinite;
    white-space: nowrap;
    background: rgba(3,13,30,0.75);
    padding: 3px 8px;
    border-radius: 6px;
}
@keyframes dlbl { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* Cards de fuentes de datos */
.data-source-card {
    position: absolute;
    width: 92px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 11px;
    padding: 12px 8px;
    text-align: center;
    cursor: grab;
    z-index: 20;
    touch-action: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: border-color 0.2s, box-shadow 0.2s;
    user-select: none;
}
.data-source-card:hover { border-color: rgba(212,175,55,0.5); box-shadow: 0 6px 24px rgba(212,175,55,0.18); }
.data-source-card.dragging {
    cursor: grabbing;
    border-color: rgba(212,175,55,0.9);
    box-shadow: 0 14px 40px rgba(212,175,55,0.35);
    z-index: 45;
    transform: scale(1.06) rotate(2deg);
}
.data-source-card.done { opacity: 0; pointer-events: none; transform: scale(0.4); transition: opacity 0.35s, transform 0.35s; }
.dsc-glow {
    position: absolute; inset: 0;
    border-radius: 11px;
    background: radial-gradient(circle at 50% 0%, rgba(212,175,55,0.09), transparent 70%);
    pointer-events: none;
}
.dsc-icon { font-size: 24px; color: #d4af37; }
.dsc-name { font-size: 9.5px; font-weight: 700; color: #fff; line-height: 1.3; }
.dsc-type { font-size: 8.5px; color: rgba(255,255,255,0.38); }

/* Motor (drop zone) */
.motor-zone {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 120px; height: 120px;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
}
.motor-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px dashed rgba(212,175,55,0.2);
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    transition: border-color 0.25s, filter 0.25s;
}
.motor-ring.mr1 { width: 120px; height: 120px; animation: motor-rot 8s linear infinite; }
.motor-ring.mr2 { width: 92px; height: 92px; animation: motor-rot 5s linear infinite reverse; border-style: solid; }
.motor-ring.mr3 { width: 65px; height: 65px; animation: motor-rot 3s linear infinite; border-style: solid; border-color: rgba(90,180,255,0.25); }
@keyframes motor-rot { to { transform: translate(-50%,-50%) rotate(360deg); } }
.motor-zone.hover .motor-ring { border-color: rgba(212,175,55,0.8) !important; }
.motor-zone.hover { filter: drop-shadow(0 0 20px rgba(212,175,55,0.5)); }
.motor-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 52px; height: 52px;
    background: linear-gradient(135deg, #004080, #002a5c);
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    box-shadow: 0 0 18px rgba(0,64,128,0.9);
    z-index: 15;
}
.motor-logo { width: 26px; filter: brightness(2); }
.motor-counter { font-size: 9px; font-weight: 800; color: #d4af37; display: block; margin-top: 1px; }
.motor-label {
    position: absolute; bottom: -34px;
    font-size: 9.5px; color: rgba(212,175,55,0.55);
    text-align: center; font-weight: 600; line-height: 1.5;
    pointer-events: none; white-space: nowrap;
}

/* Botón auto-play */
.autoplay-btn {
    position: absolute;
    bottom: 16px; right: 16px;
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.35);
    border-radius: 24px;
    padding: 9px 18px;
    font-size: 11.5px;
    color: #d4af37;
    font-weight: 700;
    cursor: pointer;
    z-index: 55;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease, background 0.2s;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 7px;
}
.autoplay-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.autoplay-btn:hover { background: rgba(212,175,55,0.2); }

/* ── Escena de procesamiento ──────────────────────────────────── */
.proc-container {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column;
    align-items: center; gap: 18px;
}
.proc-rings { position: relative; width: 108px; height: 108px; }
.proc-ring {
    position: absolute; border-radius: 50%;
    border: 2.5px solid transparent;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
.proc-ring.pr1 { width: 108px; height: 108px; border-top-color: #d4af37; animation: spn 1.0s linear infinite; }
.proc-ring.pr2 { width: 83px; height: 83px; border-right-color: #5ab4ff; animation: spn 0.7s linear infinite reverse; }
.proc-ring.pr3 { width: 58px; height: 58px; border-bottom-color: #5ddba0; animation: spn 1.5s linear infinite; }
.proc-ring.pr4 { width: 36px; height: 36px; border-left-color: rgba(212,175,55,0.5); animation: spn 0.5s linear infinite reverse; }
@keyframes spn { to { transform: translate(-50%,-50%) rotate(360deg); } }
.proc-logo {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 26px; filter: brightness(2);
}
.proc-steps-list { display: flex; flex-direction: column; gap: 6px; min-width: 250px; }
.proc-step-item {
    font-size: 12px; color: rgba(255,255,255,0.3);
    display: flex; align-items: center; gap: 9px;
    transition: color 0.3s;
}
.proc-step-item.done { color: #5ddba0; }
.proc-step-item.done i { color: #5ddba0; }
.proc-step-item.active { color: #fff; }
.proc-step-item i { width: 13px; flex-shrink: 0; color: rgba(255,255,255,0.25); }
.proc-bar-wrap { display: flex; align-items: center; gap: 10px; min-width: 250px; }
.proc-bar-track { flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.proc-bar-fill { height: 100%; background: linear-gradient(90deg, #004080, #d4af37); border-radius: 2px; width: 0; transition: width 0.1s linear; }
.proc-pct { font-size: 11px; font-weight: 700; color: #d4af37; min-width: 34px; }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD POWER BI — ESTILO EJECUTIVO (SIN SCROLL EXTERNO)
══════════════════════════════════════════════════════════════ */
.teatro-scene#scene-dash {
    overflow-y: auto;
    overflow-x: hidden;
}
.pb-dashboard {
    min-height: 100%;
    background: #f0f2f5;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.pb-dashboard.revealed { opacity: 1; transform: scale(1); }

/* Navbar del dashboard */
.pb-navbar {
    background: #1a2332;
    padding: 0 14px;
    display: flex; align-items: center; justify-content: space-between;
    height: 42px; flex-shrink: 0;
    border-radius: 0;
}
.pb-nav-left { display: flex; align-items: center; gap: 16px; overflow: hidden; }
.pb-nav-logo { height: 24px; flex-shrink: 0; }
.pb-nav-tabs { display: flex; gap: 1px; overflow-x: auto; scrollbar-width: none; }
.pb-nav-tabs::-webkit-scrollbar { display: none; }
.pb-nav-tab {
    font-size: 10.5px; color: rgba(255,255,255,0.45);
    padding: 4px 9px; border-radius: 4px;
    cursor: pointer; transition: all 0.15s; white-space: nowrap; flex-shrink: 0;
}
.pb-nav-tab:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.07); }
.pb-nav-tab.active { color: #fff; background: rgba(255,255,255,0.12); border-bottom: 2px solid #d4af37; }
.pb-nav-right { flex-shrink: 0; }
.pb-nav-update { font-size: 9.5px; color: rgba(255,255,255,0.38); white-space: nowrap; }

/* Fila de título + selectores */
.pb-title-row {
    padding: 8px 14px 6px;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    background: #fff; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.pb-title { font-size: 14px; font-weight: 700; color: #1a2332; margin: 0; }
.pb-subtitle { font-size: 10px; color: #6b7280; margin: 1px 0 0; }
.pb-time-selectors { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.pb-year-tabs, .pb-month-tabs { display: flex; gap: 2px; }
.pb-year-tabs span, .pb-month-tabs span {
    font-size: 10px; padding: 2px 7px;
    border-radius: 3px; color: #6b7280;
    cursor: pointer; transition: all 0.15s; user-select: none;
}
.pb-year-tabs span:hover, .pb-month-tabs span:hover { background: #f1f5f9; color: #374151; }
.pb-year-tabs span.active, .pb-month-tabs span.active {
    background: #1a2332; color: #fff; font-weight: 700;
}

/* Fila de KPI cards */
.pb-kpi-row {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 7px; padding: 7px 10px;
    background: #fff; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.pb-kpi-card {
    display: flex; align-items: center; gap: 7px;
    background: #f8fafc; border: 1px solid #e5e7eb;
    border-radius: 7px; padding: 7px 9px;
    position: relative; overflow: hidden;
    opacity: 0; transform: translateY(7px);
    transition: opacity 0.4s, transform 0.4s;
}
.pb-kpi-card.vis { opacity: 1; transform: translateY(0); }
.pk-icon-wrap {
    width: 30px; height: 30px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.pk-icon-wrap.pk-blue   { background:#dbeafe; color:#1d4ed8; }
.pk-icon-wrap.pk-green  { background:#dcfce7; color:#15803d; }
.pk-icon-wrap.pk-orange { background:#ffedd5; color:#ea580c; }
.pk-icon-wrap.pk-purple { background:#f3e8ff; color:#7c3aed; }
.pk-icon-wrap.pk-teal   { background:#ccfbf1; color:#0d9488; }
.pk-icon-wrap.pk-gold   { background:#fef9c3; color:#b45309; }
.pk-data { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pk-label { font-size: 8.5px; color: #6b7280; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-value { font-size: 16px; font-weight: 800; color: #1a2332; line-height: 1; }
.pk-delta { font-size: 8.5px; color: #6b7280; }
.pk-delta.up { color: #15803d; }
.pk-delta.down { color: #dc2626; }
.pk-spark { position: absolute; bottom: 3px; right: 3px; opacity: 0.45; }

/* Grid principal */
.pb-main-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.1fr;
    gap: 7px; padding: 7px 10px;
    flex: 1; min-height: 0;
    overflow: hidden;
}
.pb-left-col, .pb-center-col, .pb-right-col {
    display: flex; flex-direction: column; gap: 7px;
    min-height: 0; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}

/* Cards internas */
.pb-chart-card, .pb-table-card, .pb-donut-card, .pb-bar-mini-card,
.pb-ai-card, .pb-alerts-card, .pb-reco-card {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 9px; padding: 9px 11px;
    opacity: 0; transform: translateY(7px);
    transition: opacity 0.4s, transform 0.4s;
    flex-shrink: 0;
}
.pb-chart-card.vis, .pb-table-card.vis, .pb-donut-card.vis,
.pb-bar-mini-card.vis, .pb-ai-card.vis, .pb-alerts-card.vis,
.pb-reco-card.vis { opacity: 1; transform: translateY(0); }
.pb-chart-card h4, .pb-table-card h4, .pb-donut-card h4,
.pb-bar-mini-card h4 { font-size: 10.5px; font-weight: 700; color: #1a2332; margin: 0 0 7px; }
.pb-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.pb-chart-header h4 { margin: 0; }
.pb-chart-legend { display: flex; align-items: center; gap: 8px; font-size: 8.5px; color: #6b7280; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.legend-dot.blue { background:#1a56db; }
.legend-dot.red { background:#ef4444; }
.pb-chart-wrap { height: 120px; }

/* Tabla */
.pb-table-wrap { overflow-x: auto; }
.pb-table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.pb-table th {
    background: #f1f5f9; padding: 3px 5px;
    text-align: center; font-weight: 700; color: #374151;
    border-bottom: 1px solid #e5e7eb; white-space: nowrap;
}
.pb-table td { padding: 3px 5px; text-align: center; color: #374151; border-bottom: 1px solid #f3f4f6; }
.pb-table tr:hover td { background: #f9fafb; }
.row-peak td { background: #fff7ed !important; font-weight: 600; }
.row-total td { background: #f1f5f9; font-weight: 700; }
.bold-red { color: #dc2626 !important; font-weight: 700; }
.pct-good { color: #15803d; font-weight: 700; }
.pct-warn { color: #dc2626; font-weight: 700; }

/* Donut */
.pb-donut-wrap { height: 105px; }
.pb-donut-legend { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.dl-item { display: flex; align-items: center; gap: 5px; font-size: 9.5px; color: #374151; }
.dl-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.dl-item strong { margin-left: auto; color: #1a2332; }

/* Columna derecha */
.pb-ai-card.vis { opacity: 1; transform: translateX(0); }
.pb-ai-header { margin-bottom: 6px; }
.pb-ai-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 9.5px; font-weight: 700; color: #1d4ed8;
    background: #dbeafe; border-radius: 5px; padding: 2px 7px;
}
.pb-ai-text { font-size: 10.5px; color: #374151; line-height: 1.6; min-height: 48px; }
.pb-ai-text .ai-cursor {
    display: inline-block; width: 1px; height: 11px;
    background: #1d4ed8; margin-left: 2px;
    animation: ai-cur 0.8s step-end infinite; vertical-align: middle;
}
@keyframes ai-cur { 0%,100%{opacity:1} 50%{opacity:0} }

.pb-alerts-header {
    font-size: 9.5px; font-weight: 700; color: #dc2626; margin-bottom: 6px;
    display: flex; align-items: center; gap: 5px;
}
.pb-alert-item {
    display: flex; align-items: flex-start; gap: 7px;
    padding: 6px 8px; border-radius: 6px;
    font-size: 9.5px; color: #374151; line-height: 1.5;
    margin-bottom: 4px;
    opacity: 0; transform: translateX(-5px);
    transition: opacity 0.3s, transform 0.3s;
}
.pb-alert-item.vis { opacity: 1; transform: translateX(0); }
.pb-alert-item.red { background: #fff1f2; border-left: 3px solid #dc2626; }
.pb-alert-item.orange { background: #fff7ed; border-left: 3px solid #ea580c; }
.pb-alert-item a { color: #1d4ed8; font-weight: 600; text-decoration: none; }
.alert-badge {
    width: 16px; height: 16px; border-radius: 50%;
    font-size: 9px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #fff;
}
.pb-alert-item.red .alert-badge { background: #dc2626; }
.pb-alert-item.orange .alert-badge { background: #ea580c; }

.pb-reco-header {
    font-size: 9.5px; font-weight: 700; color: #1a2332; margin-bottom: 6px;
    display: flex; align-items: center; gap: 5px;
}
.pb-reco-item {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 4px 0; font-size: 9.5px; color: #374151;
    border-bottom: 1px solid #f3f4f6; line-height: 1.5;
    opacity: 0; transform: translateX(-5px);
    transition: opacity 0.3s, transform 0.3s;
}
.pb-reco-item.vis { opacity: 1; transform: translateX(0); }
.pb-reco-item:last-of-type { border-bottom: none; }
.reco-num {
    width: 16px; height: 16px; background: #1a2332; color: #fff;
    border-radius: 50%; font-size: 8.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pb-action-btn {
    display: block; width: 100%; margin-top: 7px;
    padding: 6px 10px; background: #1a2332; color: #fff;
    border: none; border-radius: 7px; font-size: 10.5px; font-weight: 700;
    cursor: pointer; text-align: center; transition: background 0.2s;
}
.pb-action-btn:hover { background: #2d3f5c; }

/* Fila inferior de KPIs */
.pb-bottom-row {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 7px; padding: 7px 10px;
    background: #fff; border-top: 1px solid #e5e7eb; flex-shrink: 0;
}
.pb-bottom-kpi {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 9px; border-radius: 9px;
    background: #f8fafc; border: 1px solid #e5e7eb;
    border-left-width: 3px;
    opacity: 0; transform: translateY(5px);
    transition: opacity 0.4s, transform 0.4s;
}
.pb-bottom-kpi.vis { opacity: 1; transform: translateY(0); }
.pb-bottom-kpi i { font-size: 16px; flex-shrink: 0; }
.pb-bottom-kpi.green { border-left-color: #15803d; }
.pb-bottom-kpi.green i { color: #15803d; }
.pb-bottom-kpi.blue { border-left-color: #1d4ed8; }
.pb-bottom-kpi.blue i { color: #1d4ed8; }
.pb-bottom-kpi.orange { border-left-color: #ea580c; }
.pb-bottom-kpi.orange i { color: #ea580c; }
.pb-bottom-kpi.yellow { border-left-color: #b45309; }
.pb-bottom-kpi.yellow i { color: #b45309; }
.pb-bottom-kpi.red { border-left-color: #dc2626; }
.pb-bottom-kpi.red i { color: #dc2626; }
.pb-bottom-kpi.teal { border-left-color: #0d9488; }
.pb-bottom-kpi.teal i { color: #0d9488; }
.bk-data { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.bk-label { font-size: 8.5px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-val { font-size: 13px; font-weight: 800; color: #1a2332; line-height: 1.2; }
.bk-meta { font-size: 8.5px; color: #9ca3af; }
.bk-badge { font-size: 8.5px; font-weight: 700; padding: 2px 6px; border-radius: 9px; flex-shrink: 0; white-space: nowrap; }
.bk-badge.green { background: #dcfce7; color: #15803d; }
.bk-badge.orange { background: #ffedd5; color: #ea580c; }

/* Botón reset en dashboard */
.pb-reset-btn {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 70;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 7px;
    color: rgba(255,255,255,0.7);
    font-size: 10px; font-weight: 700;
    padding: 5px 11px;
    cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    transition: all 0.2s;
}
.pb-reset-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .pb-kpi-row { grid-template-columns: repeat(3, 1fr); }
    .pb-main-grid { grid-template-columns: 1fr 1fr; }
    .pb-right-col { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .pb-right-col > * { flex: 1; min-width: 200px; }
    .pb-bottom-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .teatro-stage { height: 540px; }
    .pb-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .pb-main-grid { grid-template-columns: 1fr; }
    .pb-bottom-row { grid-template-columns: repeat(2, 1fr); }
    .pb-nav-tabs { display: none; }
    .teatro-tab span:not(:first-child):not(.tab-badge) { display: none; }
    .data-source-card { width: 78px; }
}

/* ╔═══════════════════════════════════════════════════════════════
   ║  CSS RECUPERADO — clases que quedaron truncadas
   ╚═══════════════════════════════════════════════════════════════ */

/* ── PRELOADER ─────────────────────────────────────────────────── */
#kai-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #030d1e 0%, #001a3d 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
#kai-preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.kai-preloader-logo {
    width: 80px;
    filter: brightness(2);
    animation: plr-pulse 1.6s ease-in-out infinite;
}
@keyframes plr-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.07);opacity:0.8} }
.kai-preloader-bar-track {
    width: 200px;
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}
.kai-preloader-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #004080, #d4af37);
    border-radius: 2px;
    width: 0;
    animation: plr-fill 1.4s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes plr-fill { to { width: 100%; } }
.kai-preloader-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── PORTALES DROPDOWN (Navbar) ───────────────────────────────── */
.portales-nav-toggle {
    display: flex !important;
    align-items: center;
    gap: 7px;
}
.portales-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #5ddba0;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(93,219,160,0.6);
    animation: dot-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-pulse { 0%,100%{box-shadow:0 0 6px rgba(93,219,160,0.6)} 50%{box-shadow:0 0 12px rgba(93,219,160,1)} }
.portales-dropdown-menu {
    background: rgba(3,13,30,0.96) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(212,175,55,0.15) !important;
    border-radius: 12px !important;
    padding: 10px 8px !important;
    min-width: 240px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
    margin-top: 6px !important;
}
.portales-sep { height: 1px; background: rgba(255,255,255,0.07); margin: 5px 4px; }
.portal-item {
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 9px 10px !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.8) !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
}
.portal-item:hover {
    background: rgba(212,175,55,0.08) !important;
    color: #fff !important;
}
.portal-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.pi-support { background: rgba(59,130,246,0.2); color: #60a5fa; }
.pi-eps    { background: rgba(212,175,55,0.15); color: #d4af37; }
.pi-ips    { background: rgba(93,219,160,0.15); color: #5ddba0; }
.portal-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.portal-name { font-size: 12px; font-weight: 700; color: #fff; }
.portal-desc { font-size: 10.5px; color: rgba(255,255,255,0.45); }
.portal-ext { font-size: 10px; color: rgba(255,255,255,0.3); flex-shrink: 0; }

/* ── HERO CTA BUTTONS ─────────────────────────────────────────── */
.hero-cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.btn-hero-outline {
    background: transparent;
    border: 1.5px solid rgba(212,175,55,0.4);
    color: rgba(255,255,255,0.85);
    padding: 0.75rem 1.8rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.btn-hero-outline:hover {
    background: rgba(212,175,55,0.1);
    border-color: rgba(212,175,55,0.7);
    color: #d4af37;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212,175,55,0.15);
}

/* ── HERO TECH BADGES ─────────────────────────────────────────── */
.hero-tech-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0.5rem;
}
.hero-tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 4px 11px;
    transition: all 0.2s ease;
}
.hero-tech-badge:hover {
    color: #d4af37;
    border-color: rgba(212,175,55,0.35);
    background: rgba(212,175,55,0.06);
}

/* ── HERO AI SCENE (right column) ────────────────────────────── */
.hero-ai-scene {
    position: relative;
    width: 100%;
    max-width: 480px;
}
.hero-ai-labels {
    position: absolute;
    top: 10px; left: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    z-index: 2;
}
.hero-ai-labels span {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 2px 7px;
}
#hero-canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}
.hero-ai-card {
    position: absolute;
    background: rgba(3,13,30,0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: hacard-float 3s ease-in-out infinite;
    min-width: 180px;
    z-index: 3;
}
.hacard-acc { bottom: 30px; left: -10px; animation-delay: 0s; }
.hacard-pbi { top: 60px; right: -10px; animation-delay: 1s; }
.hacard-live { bottom: 110px; right: 5px; animation-delay: 1.8s; }
@keyframes hacard-float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.hacard-icon {
    width: 32px; height: 32px;
    background: rgba(26,86,219,0.3);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #60a5fa; flex-shrink: 0;
}
.hacard-icon--gold { background: rgba(212,175,55,0.15); color: #d4af37; }
.hacard-body { display: flex; flex-direction: column; gap: 3px; }
.hacard-title { font-size: 10px; color: rgba(255,255,255,0.55); font-weight: 600; }
.hacard-val { font-size: 13px; font-weight: 800; color: #fff; }
.hacard-bar-wrap { width: 100px; height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.hacard-bar { height: 100%; background: linear-gradient(90deg, #1a56db, #5ddba0); border-radius: 2px; width: var(--habar-w, 0%); }
.hacard-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #5ddba0; flex-shrink: 0;
    box-shadow: 0 0 8px rgba(93,219,160,0.7);
    animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.35)} }

/* ── HERO STATUS STRIP ────────────────────────────────────────── */
.hero-status-strip {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 10px 0;
}
.hss-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}
.hss-item { display: flex; align-items: center; gap: 6px; }
.hss-item i { color: rgba(212,175,55,0.6); font-size: 11px; }
.hss-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #5ddba0;
    box-shadow: 0 0 6px rgba(93,219,160,0.8);
    animation: live-pulse 1.5s ease-in-out infinite;
}
.hss-div { color: rgba(255,255,255,0.2); }

/* ── ESTADÍSTICAS (kai-stats) ─────────────────────────────────── */
.kai-stats-section {
    background: linear-gradient(135deg, #030d1e 0%, #001a3d 100%);
    padding: 4rem 0;
    position: relative;
    border-bottom: 1px solid rgba(212,175,55,0.08);
}
.kai-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.kai-stat-item {
    text-align: center;
    padding: 2rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
}
.kai-stat-item:hover {
    background: rgba(212,175,55,0.05);
    border-color: rgba(212,175,55,0.2);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.kai-stat-icon {
    font-size: 2rem;
    color: #d4af37;
    margin-bottom: 0.75rem;
    display: block;
}
.kai-stat-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 0.4rem;
}
.kai-stat-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
@media (max-width: 767px) {
    .kai-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .kai-stat-number { font-size: 2.2rem; }
}

/* ── KAI DARK SECTION (liderazgo) ────────────────────────────── */
.kai-dark-section {
    background: linear-gradient(145deg, #030d1e 0%, #001230 100%);
    color: #fff;
    position: relative;
}
.kai-dark-section .text-secondary { color: rgba(255,255,255,0.5) !important; }
.kai-dark-section h2 { color: #fff; }

/* ── CLIENTES — Marquee + Grid Pro ───────────────────────────── */
.pro-clientes-section {
    background: linear-gradient(160deg, #030d1e 0%, #001230 100%);
    padding: 5rem 0;
    border-top: 1px solid rgba(212,175,55,0.08);
}
.clients-marquee-wrap {
    overflow: hidden;
    position: relative;
    padding: 1rem 0;
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.clients-marquee-track {
    display: flex;
    gap: 2.5rem;
    width: max-content;
    animation: marquee-scroll 28s linear infinite;
}
.clients-marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
.clients-marquee-track img {
    height: 38px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.4;
    transition: opacity 0.25s ease, filter 0.25s ease;
    flex-shrink: 0;
}
.clients-marquee-track img:hover { opacity: 0.9; filter: brightness(1) invert(0); }
.clients-grid-pro {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.client-card-pro {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    transition: all 0.28s ease;
    cursor: pointer;
}
.client-card-pro:hover {
    background: rgba(212,175,55,0.06);
    border-color: rgba(212,175,55,0.25);
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.client-logo-wrap-pro {
    width: 70px; height: 70px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.client-logo-wrap-pro img { width: 52px; height: 52px; object-fit: contain; }
.client-divider {
    width: 30px; height: 2px;
    background: rgba(212,175,55,0.35);
    border-radius: 1px;
}
.client-name-pro {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
}
.client-badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.client-badge-sector,
.client-badge-service {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-align: center;
}
.client-badge-sector {
    background: rgba(26,86,219,0.2);
    color: #60a5fa;
    border: 1px solid rgba(26,86,219,0.25);
}
.client-badge-service {
    background: rgba(212,175,55,0.1);
    color: #d4af37;
    border: 1px solid rgba(212,175,55,0.2);
}
.client-cta {
    width: 100%;
    padding: 6px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.25rem;
}
.client-cta:hover {
    background: rgba(212,175,55,0.1);
    border-color: rgba(212,175,55,0.3);
    color: #d4af37;
}

/* ── HERO SUBLINE COLOR FIX ───────────────────────────────────── */
.hero-subline { color: rgba(255,255,255,0.68) !important; }

/* ── ACCENT GOLD ──────────────────────────────────────────────── */
.accent-gold { color: #d4af37; }


/* ╔═══════════════════════════════════════════════════════════════
   ║  TEATRO DASHBOARD — CORRECCIONES v2 (override)
   ╚═══════════════════════════════════════════════════════════════ */

/* 1. Stage: altura fija y sin scroll externo */
.teatro-stage {
    height: 620px !important;
    min-height: unset !important;
    overflow: hidden !important;
}

/* 2. Scene-dash: NO overflow-y (evita que robe el scroll de la página) */
.teatro-scene#scene-dash {
    overflow: hidden !important;
    position: absolute !important;
    inset: 0 !important;
}

/* 3. Dashboard: flex column que llena exactamente el stage */
.pb-dashboard {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #f0f2f5 !important;
}

/* 4. Secciones fijas del dashboard */
.pb-navbar    { flex-shrink: 0 !important; height: 42px !important; }
.pb-title-row { flex-shrink: 0 !important; padding: 7px 14px !important; }
.pb-kpi-row   { flex-shrink: 0 !important; padding: 6px 10px !important; }
.pb-bottom-row{ flex-shrink: 0 !important; padding: 6px 10px !important; }

/* 5. Grid principal: ocupa el espacio sobrante SIN scroll */
.pb-main-grid {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 2fr 1.2fr 1.1fr !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    align-items: start !important;
}

/* 6. Columnas: NO overflow-y (elimina scroll interno que roba el scroll de página) */
.pb-left-col,
.pb-center-col,
.pb-right-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: 100% !important;
}

/* 7. Cards internas: compactas y con flex-shrink para caber */
.pb-chart-card,
.pb-table-card,
.pb-donut-card,
.pb-bar-mini-card,
.pb-ai-card,
.pb-alerts-card,
.pb-reco-card {
    flex-shrink: 1 !important;
    overflow: hidden !important;
    padding: 8px 10px !important;
}

/* 8. Alturas explícitas de los canvases (la raíz del bug del bar chart gigante) */
.pb-chart-wrap          { height: 112px !important; overflow: hidden; }
.pb-donut-wrap          { height: 96px !important; overflow: hidden; }
#pb-bar-chart           { display: block !important; height: 100px !important; max-height: 100px !important; }
#pb-line-chart          { display: block !important; max-height: 112px !important; }
#pb-donut-chart         { display: block !important; max-height: 96px !important; }

/* 9. Tabla compacta */
.pb-table-wrap { max-height: 100px; overflow-y: auto; scrollbar-width: thin; }
.pb-table th, .pb-table td { padding: 2px 5px !important; font-size: 9px !important; }

/* 10. Narrativa IA: altura controlada */
.pb-ai-text { min-height: 40px !important; max-height: 65px; overflow: hidden; font-size: 10px !important; }

/* 11. Donut legend compacta */
.pb-donut-legend { margin-top: 4px !important; gap: 2px !important; }
.dl-item { font-size: 9px !important; }

/* 12. KPI row más compacto */
.pb-kpi-row { grid-template-columns: repeat(6, 1fr) !important; gap: 5px !important; }
.pb-kpi-card { padding: 6px 8px !important; gap: 6px !important; }
.pk-value { font-size: 14px !important; }
.pk-label { font-size: 8px !important; }
.pk-delta { font-size: 7.5px !important; }

/* 13. Bottom KPI row compacto */
.pb-bottom-kpi { padding: 5px 8px !important; gap: 6px !important; }
.pb-bottom-kpi i { font-size: 14px !important; }
.bk-val { font-size: 12px !important; }
.bk-label { font-size: 8px !important; }
.bk-meta  { font-size: 7.5px !important; }

/* 14. Títulos internos más compactos */
.pb-chart-card h4,
.pb-table-card h4,
.pb-donut-card h4,
.pb-bar-mini-card h4 { font-size: 10px !important; margin-bottom: 5px !important; }

/* 15. Alertas y recomendaciones compactas */
.pb-alert-item  { padding: 5px 7px !important; font-size: 9px !important; margin-bottom: 3px !important; }
.pb-reco-item   { padding: 3px 0 !important; font-size: 9px !important; }
.pb-action-btn  { padding: 5px 8px !important; font-size: 10px !important; margin-top: 5px !important; }
.pb-alerts-header,
.pb-reco-header { font-size: 9px !important; margin-bottom: 5px !important; }

/* 16. Reset-btn posición correcta sobre el dashboard (NO en el stage absoluto) */
.pb-reset-btn {
    position: fixed !important;
    top: auto !important;
    bottom: auto !important;
    /* Reposicionado como parte del navbar dashboard */
}

/* Mejor: botón reset DENTRO del pb-navbar */
.pb-navbar .pb-reset-btn {
    position: relative !important;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: rgba(255,255,255,0.65);
    font-size: 10px; font-weight: 700;
    padding: 4px 10px;
    cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    transition: all 0.2s;
    flex-shrink: 0;
}

/* 17. Paso de indicadores — asegurar colores correctos (evitar override de Bootstrap) */
.teatro-steps .teatro-step.active .step-num {
    background: #d4af37 !important;
    border-color: #d4af37 !important;
    color: #030d1e !important;
    box-shadow: 0 0 14px rgba(212,175,55,0.5) !important;
}
.teatro-steps .teatro-step.done .step-num {
    background: #5ddba0 !important;
    border-color: #5ddba0 !important;
    color: #030d1e !important;
}
.teatro-steps .step-num {
    background: rgba(255,255,255,0.08) !important;
    border: 1.5px solid rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.35) !important;
    width: 26px !important; height: 26px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important; font-weight: 700 !important;
}

/* 18. Responsive ajustado */
@media (max-width: 1199px) {
    .pb-main-grid { grid-template-columns: 1fr 1fr !important; }
    .pb-right-col { grid-column: 1 / -1 !important; flex-direction: row !important; flex-wrap: wrap !important; overflow: hidden !important; max-height: 160px !important; }
    .pb-right-col > * { flex: 1 !important; min-width: 180px !important; }
    .pb-kpi-row { grid-template-columns: repeat(3, 1fr) !important; }
    .pb-bottom-row { grid-template-columns: repeat(3, 1fr) !important; }
    .teatro-stage { height: 700px !important; }
}
@media (max-width: 767px) {
    .teatro-stage { height: 560px !important; }
    .pb-main-grid { grid-template-columns: 1fr !important; max-height: 320px !important; overflow-y: auto !important; }
    .pb-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
    .pb-bottom-row { grid-template-columns: repeat(2, 1fr) !important; }
    .pb-right-col { max-height: unset !important; }
}

/* ── CORRECCIÓN FINAL: reset-btn debe ser absolute en scene-dash, no fixed ── */
.pb-reset-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
}

/* ╔══════════════════════════════════════════════════════════════════
   ║  EL ESTUDIO DIGITAL — DESARROLLO WEB  (prefijo: .wd-)
   ╚══════════════════════════════════════════════════════════════════ */

/* ── Escenas base ──────────────────────────────────────────────── */
.wd-scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 56px 32px 20px;
    overflow: hidden;
}

/* ── Indicador de pasos ────────────────────────────────────────── */
.wd-steps {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 30;
}
.wd-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: default;
}
.wd-step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.3);
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.wd-step-label {
    font-size: 8.5px;
    color: rgba(255,255,255,0.3);
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.3s;
}
.wd-step-line {
    width: 38px; height: 1.5px;
    background: rgba(255,255,255,0.1);
    margin-bottom: 12px;
    flex-shrink: 0;
}
.wd-step.active .wd-step-num {
    background: rgba(212,175,55,0.2) !important;
    border-color: #d4af37 !important;
    color: #d4af37 !important;
    box-shadow: 0 0 12px rgba(212,175,55,0.45) !important;
}
.wd-step.active .wd-step-label { color: #d4af37 !important; }
.wd-step.done .wd-step-num {
    background: rgba(93,219,160,0.2) !important;
    border-color: #5ddba0 !important;
    color: #5ddba0 !important;
}
.wd-step.done .wd-step-label { color: #5ddba0 !important; }

/* ── KAI avatar posición en escena webdev ──────────────────────── */
#wd-kai {
    left: 18px !important;
    bottom: 18px !important;
}

/* ── Acento dorado ─────────────────────────────────────────────── */
.wd-accent { color: #d4af37; }

/* ── Auto-play button ──────────────────────────────────────────── */
.wd-autoplay-btn {
    position: absolute;
    bottom: 18px; right: 18px;
    background: rgba(212,175,55,0.14);
    border: 1.5px solid rgba(212,175,55,0.35);
    border-radius: 8px;
    color: #d4af37;
    font-size: 11px; font-weight: 700;
    padding: 7px 16px;
    cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s, background 0.2s;
    z-index: 50;
}
.wd-autoplay-btn:hover { background: rgba(212,175,55,0.24); }

/* ══════════════════════════════════════════════════════════════════
   ESCENA 1: BRIEF INTERACTIVO
══════════════════════════════════════════════════════════════════ */
.wd-brief-header {
    text-align: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.wd-brief-title {
    font-size: 22px; font-weight: 900;
    color: #fff;
    margin: 0 0 5px;
    letter-spacing: -0.3px;
}
.wd-brief-sub {
    font-size: 11px; color: rgba(255,255,255,0.45);
    margin: 0;
}

/* Grid de proyectos */
.wd-project-grid {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-shrink: 0;
    flex-wrap: nowrap;
}
.wd-proj-card {
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.34,1.56,0.64,1);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.wd-proj-glow {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 0%, rgba(212,175,55,0.12), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}
.wd-proj-card:hover .wd-proj-glow,
.wd-proj-card.selected .wd-proj-glow { opacity: 1; }
.wd-proj-card:hover {
    border-color: rgba(212,175,55,0.5);
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(212,175,55,0.14);
    background: rgba(212,175,55,0.07);
}
.wd-proj-card.selected {
    border-color: #d4af37 !important;
    background: rgba(212,175,55,0.12) !important;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 32px rgba(212,175,55,0.22) !important;
}
.wd-proj-icon { font-size: 26px; margin-bottom: 6px; }
.wd-proj-name {
    font-size: 11px; font-weight: 800; color: #fff;
    margin-bottom: 3px;
}
.wd-proj-desc { font-size: 9px; color: rgba(255,255,255,0.45); margin-bottom: 8px; }
.wd-proj-price {
    font-size: 9px; font-weight: 700;
    color: #5ddba0;
    background: rgba(93,219,160,0.1);
    border-radius: 6px;
    padding: 2px 6px;
    display: inline-block;
}

/* Features row */
.wd-features-row {
    display: none;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    flex-shrink: 0;
}
.wd-feat-label {
    font-size: 10px; color: rgba(255,255,255,0.5);
    font-weight: 600;
}
.wd-feat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-chip {
    padding: 5px 13px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 10px; color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.wd-chip:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
.wd-chip.selected {
    background: rgba(99,102,241,0.22);
    border-color: #818cf8;
    color: #a5b4fc;
}

/* Botones de navegación */
.wd-next-btn {
    align-self: flex-end;
    padding: 9px 22px;
    background: #d4af37;
    border: none;
    border-radius: 9px;
    color: #030d1e;
    font-size: 11px; font-weight: 800;
    cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    transition: all 0.2s;
    margin-top: 4px;
}
.wd-next-btn:hover { background: #ffe44d; transform: translateY(-2px); box-shadow: 0 5px 18px rgba(212,175,55,0.3); }

.wd-back-btn {
    padding: 8px 18px;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 9px;
    color: rgba(255,255,255,0.65);
    font-size: 11px; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    transition: all 0.2s;
}
.wd-back-btn:hover { background: rgba(255,255,255,0.07); color: #fff; }

.wd-scene-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   ESCENA 2: STACK TECNOLÓGICO
══════════════════════════════════════════════════════════════════ */
#wd-scene-stack { flex-direction: column; gap: 8px; }

.wd-stack-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Área del grafo */
.wd-graph-area {
    position: relative;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
}

.wd-graph-svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.wd-graph-line {
    stroke: rgba(212,175,55,0.3);
    stroke-width: 1.8;
    stroke-linecap: round;
    fill: none;
    transition: stroke 0.3s;
}
.wd-line-secondary {
    stroke: rgba(255,255,255,0.12);
    stroke-dasharray: 5 4;
}

/* Nodos del stack */
.wd-node {
    position: absolute;
    background: rgba(3,13,30,0.85);
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 11px;
    padding: 10px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    backdrop-filter: blur(4px);
    min-width: 100px;
}
.wd-node:hover, .wd-node.active {
    border-color: #d4af37;
    background: rgba(212,175,55,0.1);
    transform: scale(1.08);
    box-shadow: 0 0 18px rgba(212,175,55,0.22);
    z-index: 10;
}
.wd-node-icon { font-size: 20px; margin-bottom: 4px; }
.wd-node-name { font-size: 9px; font-weight: 800; color: #fff; margin-bottom: 2px; line-height: 1.2; }
.wd-node-role { font-size: 8px; color: rgba(255,255,255,0.4); }

/* Posiciones de los 5 nodos */
.wd-node-fe { left: 14px; top: 28px; }
.wd-node-be { left: calc(50% - 55px); top: calc(50% - 32px); border-color: rgba(212,175,55,0.3); }
.wd-node-db { left: 14px; bottom: 28px; }
.wd-node-cl { right: 14px; top: 28px; }
.wd-node-ci { right: 14px; bottom: 28px; }

.wd-node-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    border: 1px solid rgba(212,175,55,0.2);
    animation: wdPulse 2.5s ease-in-out infinite;
    pointer-events: none;
    opacity: 0;
}
.wd-node.active .wd-node-pulse { opacity: 1; }
@keyframes wdPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 0; }
}

/* Panel de info del nodo */
.wd-stack-info {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wd-info-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    text-align: center;
    padding: 20px;
}
.wd-info-ph-icon { font-size: 28px; opacity: 0.4; }
.wd-info-ph-text { font-size: 11px; color: rgba(255,255,255,0.35); line-height: 1.6; }

.wd-info-content h4 {
    font-size: 13px; font-weight: 800; color: #d4af37;
    margin: 0 0 10px;
}
.wd-info-content p {
    font-size: 10.5px; color: rgba(255,255,255,0.65);
    line-height: 1.65; margin: 0 0 12px;
}
.wd-info-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.wd-badge {
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 9px; font-weight: 700;
    background: rgba(212,175,55,0.12);
    color: #d4af37;
    border: 1px solid rgba(212,175,55,0.25);
}

/* ══════════════════════════════════════════════════════════════════
   ESCENA 3: PREVIEW VIVO
══════════════════════════════════════════════════════════════════ */
#wd-scene-preview { flex-direction: column; }

.wd-preview-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.wd-preview-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    min-height: 0;
}

/* Browser frame */
.wd-browser-frame {
    background: #1a1f2e;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.wd-browser-bar {
    background: rgba(255,255,255,0.06);
    padding: 8px 12px;
    display: flex; align-items: center; gap: 10px;
}
.wd-bdots { display: flex; gap: 5px; }
.wd-bd-r { width: 8px; height: 8px; border-radius: 50%; background: #f87171; display: block; }
.wd-bd-y { width: 8px; height: 8px; border-radius: 50%; background: #fcd34d; display: block; }
.wd-bd-g { width: 8px; height: 8px; border-radius: 50%; background: #34d399; display: block; }
.wd-url-bar {
    flex: 1; background: rgba(255,255,255,0.07);
    border-radius: 5px; padding: 3px 10px;
    font-size: 9px; color: rgba(255,255,255,0.45);
}
.wd-browser-body { padding: 0; overflow: hidden; }

/* Elementos del mockup */
.wd-mock-nav {
    background: #004080;
    height: 30px; display: flex; align-items: center; padding: 0 12px;
    justify-content: space-between;
}
.wd-mock-logo { width: 48px; height: 7px; background: #d4af37; border-radius: 2px; }
.wd-mock-links { display: flex; gap: 8px; align-items: center; }
.wd-mock-link { width: 28px; height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px; }
.wd-mock-cta-pill { width: 36px; height: 16px; background: #d4af37; border-radius: 8px; }

.wd-mock-hero {
    background: linear-gradient(135deg, #030d1e 0%, #001a3d 100%);
    height: 72px; display: flex; align-items: center; padding: 0 14px; gap: 12px;
}
.wd-mock-hero-text { flex: 1; }
.wd-mock-h1 { width: 90px; height: 8px; border-radius: 2px; margin-bottom: 6px; background: #d4af37; }
.wd-mock-p { width: 100%; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin-bottom: 4px; }
.wd-mock-btn { width: 52px; height: 14px; background: #d4af37; border-radius: 4px; margin-top: 6px; }
.wd-mock-visual { width: 58px; height: 52px; background: rgba(255,255,255,0.08); border-radius: 8px; flex-shrink: 0; }

.wd-mock-cards-row {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 7px 10px;
    background: #f8fafc;
}
.wd-mock-card { height: 36px; background: #e5e7eb; border-radius: 5px; }

.wd-mock-footer-bar { height: 20px; background: #030d1e; }

/* Gantt */
.wd-gantt {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 12px;
    flex-shrink: 0;
}
.wd-gantt-title {
    font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.55);
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 5px;
}
.wd-gantt-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.wd-gantt-lbl { font-size: 8.5px; color: rgba(255,255,255,0.45); width: 72px; flex-shrink: 0; }
.wd-gantt-bg { flex: 1; height: 7px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.wd-gantt-fill { height: 100%; border-radius: 4px; transition: width 0.7s ease; }
.wd-gantt-wk { font-size: 8px; color: rgba(255,255,255,0.35); width: 38px; text-align: right; flex-shrink: 0; }

/* Métricas Lighthouse */
.wd-metrics-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    overflow: hidden;
}
.wd-metric-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    padding: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    overflow: hidden;
}
.wd-metric-label { font-size: 9px; color: rgba(255,255,255,0.5); font-weight: 600; text-align: center; }
.wd-gauge-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.wd-gauge { display: block; }
.wd-gauge-val {
    position: absolute;
    font-size: 16px; font-weight: 900; color: #fff;
    line-height: 1;
}
.wd-metric-sub { font-size: 8px; color: rgba(255,255,255,0.3); }

/* ══════════════════════════════════════════════════════════════════
   ESCENA 4: PROPUESTA PERSONALIZADA
══════════════════════════════════════════════════════════════════ */
#wd-scene-proposal {
    flex-direction: column;
    padding: 56px 28px 16px;
}

.wd-proposal-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.wd-prop-header {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(212,175,55,0.1) 0%, rgba(212,175,55,0.04) 100%);
    border: 1px solid rgba(212,175,55,0.22);
    border-radius: 14px;
    padding: 14px 18px;
    flex-shrink: 0;
}
.wd-prop-proj-icon { font-size: 32px; }
.wd-prop-type { font-size: 18px; font-weight: 900; color: #d4af37; }
.wd-prop-generated { font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.wd-prop-badge {
    margin-left: auto;
    font-size: 9px; font-weight: 800;
    padding: 4px 11px; border-radius: 20px;
    background: rgba(93,219,160,0.15);
    border: 1px solid rgba(93,219,160,0.35);
    color: #5ddba0;
    white-space: nowrap;
}

.wd-proposal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.wd-prop-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    padding: 12px 14px;
    overflow: hidden;
}
.wd-prop-card-ttl {
    font-size: 10px; font-weight: 700;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 5px;
}
.wd-tag-stack, .wd-tag-feat {
    display: inline-block;
    padding: 3px 9px; border-radius: 8px;
    font-size: 9px; font-weight: 700;
    margin: 2px;
}
.wd-tag-stack {
    background: rgba(99,102,241,0.18);
    color: #a5b4fc;
    border: 1px solid rgba(99,102,241,0.3);
}
.wd-tag-feat {
    background: rgba(52,211,153,0.12);
    color: #34d399;
    border: 1px solid rgba(52,211,153,0.25);
}

.wd-timeline-big {
    font-size: 24px; font-weight: 900; color: #60a5fa;
    margin: 4px 0 2px;
}
.wd-timeline-note { font-size: 9px; color: rgba(255,255,255,0.35); }

.wd-price-card { border-color: rgba(93,219,160,0.2); background: rgba(93,219,160,0.05); }
.wd-price-big {
    font-size: 20px; font-weight: 900; color: #34d399;
    margin: 4px 0 2px;
}
.wd-price-note { font-size: 9px; color: rgba(255,255,255,0.35); }

.wd-prop-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-top: 4px;
}

.wd-cta-btn {
    flex: 1;
    padding: 11px 20px;
    background: #d4af37;
    border: none; border-radius: 10px;
    color: #030d1e;
    font-size: 12px; font-weight: 800;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.2s;
}
.wd-cta-btn:hover {
    background: #ffe44d;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212,175,55,0.35);
}

.wd-reset-btn {
    padding: 10px 16px;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    color: rgba(255,255,255,0.55);
    font-size: 11px; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}
.wd-reset-btn:hover { background: rgba(255,255,255,0.07); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
    .wd-project-grid { flex-wrap: wrap; }
    .wd-proj-card { flex: 0 0 calc(50% - 5px); min-width: calc(50% - 5px); }
    .wd-stack-layout { grid-template-columns: 1fr; }
    .wd-graph-area { height: 220px; }
    .wd-preview-layout { grid-template-columns: 1fr; }
    .wd-metrics-col { grid-template-columns: repeat(4,1fr); grid-template-rows: 1fr; }
    .wd-proposal-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .wd-scene { padding: 52px 16px 14px; }
    .wd-proj-card { flex: 0 0 100%; }
    .wd-brief-title { font-size: 17px; }
    .wd-proposal-grid { grid-template-columns: 1fr; }
    .wd-metrics-col { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
    .wd-prop-actions { flex-wrap: wrap; }
    .wd-cta-btn { flex: 0 0 100%; }
}

/* ── Fix: KAI WebDev speech bubble → derecha del avatar, no encima ── */
#wd-kai .kai-speech {
    bottom: 4px !important;
    left: 62px !important;
    max-width: 220px !important;
}
.wd-scene-actions {
    position: relative;
    z-index: 70; /* sobre KAI (z-index:60) para que los botones sean clicables */
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEATRO ANALÍTICA — Laboratorio de Predicción Clínica
   Prefijo exclusivo: .an-  (no colisiona con .wd- ni con .teatro-)
   Añadido después del bloque Fix KAI WebDev
═══════════════════════════════════════════════════════════════════════════ */

/* ── Contenedor stage (reutiliza teatro-stage base pero con clase extra) ── */
.an-stage {
    position: relative;
    height: 620px;
    overflow: hidden;
}

/* ── Header fijo en la parte superior del stage ── */
.an-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    background: rgba(3, 13, 30, 0.88);
    border-bottom: 1px solid rgba(212,175,55, 0.12);
    z-index: 20;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.an-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #d4af37;
    opacity: 0.85;
}

.an-scene-dots {
    display: flex;
    gap: 8px;
    margin-left: auto;
    align-items: center;
}

.an-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
    transition: all 0.3s ease;
}
.an-dot.active {
    background: #d4af37;
    box-shadow: 0 0 7px rgba(212,175,55, 0.5);
}
.an-dot.done { background: rgba(212,175,55, 0.4); }

/* ── Escenas ── */
.an-scene {
    display: none;
    position: absolute;
    top: 46px; left: 0; right: 0; bottom: 50px;
    padding: 14px 18px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,.2) transparent;
    z-index: 10;
}
.an-scene::-webkit-scrollbar { width: 4px; }
.an-scene::-webkit-scrollbar-thumb { background: rgba(212,175,55,.2); border-radius: 2px; }

.an-scene.active {
    display: block;
    animation: an-fadein 0.35s ease;
}
@keyframes an-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ── Tipografía de escenas ── */
.an-scene-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
    margin: 0 0 4px;
}
.an-scene-headline {
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 14px;
    line-height: 1.3;
}
.an-scene-headline span { color: #d4af37; }

/* ── Grid de desafíos ── */
.an-challenge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.an-challenge-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 12px;
    cursor: pointer;
    transition: all 0.22s ease;
    position: relative;
    overflow: hidden;
}
.an-challenge-card:hover {
    border-color: rgba(212,175,55, 0.3);
    background: rgba(212,175,55, 0.05);
    transform: translateY(-1px);
}
.an-challenge-card.selected {
    border-color: #d4af37;
    background: rgba(212,175,55, 0.08);
}
.an-challenge-card.selected::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: #d4af37;
}
.an-ch-emoji {
    font-size: 20px;
    display: block;
    margin-bottom: 6px;
}
.an-ch-tag {
    display: inline-flex;
    align-items: center;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 50px;
    margin-bottom: 5px;
}
.an-ch-tag.red   { background: rgba(239,68,68,.14);  color: #f87171; border: 1px solid rgba(239,68,68,.22); }
.an-ch-tag.amber { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.22); }
.an-ch-tag.blue  { background: rgba(96,165,250,.12); color: #60a5fa; border: 1px solid rgba(96,165,250,.22); }
.an-ch-tag.green { background: rgba(74,222,128,.1);  color: #4ade80; border: 1px solid rgba(74,222,128,.2);  }
.an-ch-title {
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
    line-height: 1.35;
}
.an-ch-desc {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.4;
    margin: 0;
}

/* ── Botones ── */
.an-btn {
    background: #d4af37;
    color: #030d1e;
    border: none;
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.an-btn:hover:not(:disabled) {
    background: #ffe033;
    transform: translateY(-1px);
}
.an-btn:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    transform: none;
}
.an-btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50px;
    padding: 9px 16px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.an-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
}
.an-btn-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Pipeline ── */
.an-pipeline-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 10px 0 14px;
}
.an-pipe-node { flex: 1; text-align: center; }
.an-pipe-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 4px;
    margin: 0 3px;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}
.an-pipe-box.active {
    border-color: rgba(212,175,55, 0.5);
    background: rgba(212,175,55, 0.07);
}
.an-pipe-box.active::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.08), transparent);
    animation: an-shimmer 1.5s infinite;
}
@keyframes an-shimmer { to { left: 200%; } }
.an-pipe-box.done {
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.06);
}
.an-pipe-icon {
    font-size: 18px;
    display: block;
    margin-bottom: 4px;
}
.an-pipe-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.4s ease;
}
.an-pipe-label.active { color: #d4af37; }
.an-pipe-label.done   { color: #4ade80; }
.an-pipe-arrow {
    color: rgba(255, 255, 255, 0.18);
    font-size: 13px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 1px;
    transition: color 0.4s ease;
}
.an-pipe-arrow.done { color: rgba(212,175,55, 0.45); }

/* ── Stats del pipeline ── */
.an-pipe-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.an-pipe-stat {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    padding: 9px 6px;
    text-align: center;
}
.an-pipe-stat-num {
    font-size: 15px;
    font-weight: 800;
    color: #d4af37;
    display: block;
    line-height: 1;
}
.an-pipe-stat-lbl {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.32);
    text-transform: uppercase;
    letter-spacing: 0.35px;
    margin-top: 3px;
    display: block;
}

/* ── Log del pipeline ── */
.an-pipe-log {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 10px;
    font-family: 'Courier New', monospace;
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.12);
    min-height: 48px;
    overflow: hidden;
}
.an-log-entry { display: block; }

/* ── Entrenamiento ── */
.an-train-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 6px;
}
.an-train-epoch-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.38);
    margin-bottom: 4px;
}
.an-train-bar-bg {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 50px;
    height: 7px;
    overflow: hidden;
    margin-bottom: 6px;
}
.an-train-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #004080, #d4af37);
    border-radius: 50px;
    width: 0%;
    transition: width 0.25s ease;
}
.an-train-status {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.38);
    font-style: italic;
    margin: 0 0 8px;
    min-height: 14px;
}
.an-metric-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}
.an-metric-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    padding: 9px 6px;
    text-align: center;
}
.an-metric-val {
    font-size: 18px;
    font-weight: 800;
    color: #d4af37;
    display: block;
    line-height: 1;
    font-family: 'Courier New', monospace;
}
.an-metric-name {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.32);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 3px;
    display: block;
}

/* ── Matriz de confusión ── */
.an-cm-title {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.25);
    margin: 0 0 5px;
}
.an-cm-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-template-rows: auto 1fr 1fr;
    gap: 3px;
}
.an-cm-lbl {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 3px;
    text-align: center;
}
.an-cm-cell {
    border-radius: 7px;
    padding: 9px 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.5s ease;
    line-height: 1;
}
.an-cm-cell-sub {
    font-size: 7px;
    display: block;
    margin-top: 2px;
    font-weight: 400;
    opacity: 0.65;
}
.an-cm-tp, .an-cm-tn {
    background: rgba(74, 222, 128, 0.14);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.22);
}
.an-cm-fp, .an-cm-fn {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.18);
}

/* ── Feature importance ── */
.an-feat-title {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.25);
    margin: 0 0 8px;
}
.an-feat-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}
.an-feat-name {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.48);
    width: 110px;
    flex-shrink: 0;
    text-align: right;
    line-height: 1.2;
}
.an-feat-bar-bg {
    flex: 1;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 50px;
    height: 5px;
    overflow: hidden;
}
.an-feat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #004080, #d4af37);
    border-radius: 50px;
    transition: width 1s ease;
}
.an-feat-pct {
    font-size: 9px;
    color: #d4af37;
    width: 26px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Resultado: layout ── */
.an-result-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.an-gauge-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
}
.an-gauge-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 8px;
}
.an-gauge-wrap svg { width: 96px; height: 96px; }
.an-gauge-number {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1;
}
.an-gauge-big {
    font-size: 20px;
    font-weight: 800;
    color: #d4af37;
    display: block;
}
.an-gauge-sub {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.28);
    display: block;
    margin-top: 1px;
}
.an-risk-label {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 3px;
    display: block;
}
.an-segments-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px;
    margin-top: 8px;
}
.an-seg-title {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.28);
    margin-bottom: 7px;
}
.an-seg-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.an-seg-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.an-seg-name {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.58);
    flex: 1;
    line-height: 1.2;
}
.an-seg-bar-bg {
    width: 65px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 50px;
    height: 4px;
    overflow: hidden;
    flex-shrink: 0;
}
.an-seg-bar-fill { height: 100%; border-radius: 50px; }
.an-seg-pct {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.32);
    width: 22px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Insight card ── */
.an-insight-card {
    background: rgba(0, 64, 128, 0.14);
    border: 1px solid rgba(0, 102, 204, 0.26);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
}
.an-insight-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    margin: 0 0 10px;
}
.an-impact-box {
    background: rgba(212,175,55, 0.07);
    border: 1px solid rgba(212,175,55, 0.18);
    border-radius: 9px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.an-impact-val {
    font-size: 14px;
    font-weight: 800;
    color: #d4af37;
    display: block;
    line-height: 1;
}
.an-impact-desc {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    display: block;
    margin-top: 2px;
}
.an-final-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* ── KAI Avatar del Teatro Analítica ── */
#an-kai {
    position: absolute;
    bottom: 60px;
    left: 16px;
    z-index: 60;
    transition: opacity 0.3s ease;
}
#an-kai .an-kai-speech {
    position: absolute;
    bottom: 4px;
    left: 60px;
    background: rgba(0, 20, 50, 0.96);
    border: 1px solid rgba(212,175,55, 0.32);
    border-radius: 10px 10px 10px 0;
    padding: 8px 12px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.88);
    max-width: 220px;
    line-height: 1.45;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 65;
}
#an-kai.an-kai-speaking .an-kai-speech { opacity: 1; }

/* ── Botón Demo Automática ── */
#an-autoplay-btn {
    position: absolute;
    bottom: 62px;
    right: 16px;
    background: rgba(212,175,55, 0.1);
    border: 1px solid rgba(212,175,55, 0.32);
    color: #d4af37;
    border-radius: 50px;
    padding: 7px 16px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
}
#an-autoplay-btn.an-ap-visible {
    opacity: 1;
    pointer-events: auto;
}
#an-autoplay-btn:hover {
    background: rgba(212,175,55, 0.18);
    border-color: rgba(212,175,55, 0.5);
}

/* ── Footer bar del stage ── */
.an-footer-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50px;
    background: rgba(3, 13, 30, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    padding: 0 14px;
    z-index: 20;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.28);
    gap: 8px;
}
.an-footer-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #d4af37;
    opacity: 0.5;
    flex-shrink: 0;
}
.an-reset-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.45);
    border-radius: 50px;
    padding: 5px 12px;
    font-size: 10px;
    cursor: pointer;
    transition: all .2s ease;
}
.an-reset-btn:hover {
    border-color: rgba(212,175,55,.3);
    color: #d4af37;
}

/* ── Responsive ajustes ── */
@media (max-width: 1199px) {
    .an-challenge-grid { grid-template-columns: 1fr 1fr; }
    .an-train-layout   { grid-template-columns: 1fr; gap: 10px; }
    .an-result-layout  { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 767px) {
    .an-challenge-grid { grid-template-columns: 1fr; }
    .an-pipe-stats     { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════
   MAPA ALIADOS — CINEMA MODE V2
   Kaizen Group · style.css
══════════════════════════════════════════════════════════ */

/* Sección */
.map-section {
  padding: 48px 0 36px;
  background: linear-gradient(180deg, #030d1e 0%, #020813 100%);
}

/* Encabezado */
.map-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #d4af37;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.map-title {
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px;
  line-height: 1.2;
}

.map-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.38);
  margin: 0 0 32px;
}

/* ── Stage: contenedor principal ──────────────────────── */
.map-stage {
  display: flex;
  align-items: stretch;
  height: 540px;          /* altura FIJA — evita que el stage crezca con el contenido de la ficha */
  border-radius: 20px;
  background: #020813;
  overflow: hidden;
  position: relative;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Mapa Colombia ──────────────────────────────────────── */
.map-colombia {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  transition: flex 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.map-colombia--shrunk {
  flex: 0 0 37%;
  cursor: pointer;
}

.map-colombia--shrunk::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 19, 0.35);
  pointer-events: none;
  z-index: 5;
}

/* SVG Colombia */
#map-svg-colombia {
  width: 100%;
  height: 100%;
  display: block;
  will-change: auto;
}
#map-svg-colombia:focus { outline: none; }
.map-pin-group:focus,
.map-pin-group:focus-visible { outline: none; }

/* Botón "← Mapa" (visible en Cinema Mode encima del mapa pequeño) */
.map-back-mini {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 10;
  background: rgba(212,175,55, 0.12);
  border: 1px solid rgba(212,175,55, 0.35);
  color: #d4af37;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap;
  font-family: inherit;
}
.map-back-mini:hover {
  background: rgba(212,175,55, 0.22);
}
.map-colombia--shrunk .map-back-mini {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ── Paneles laterales (rellenan el espacio junto al mapa) ── */
.map-aside {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 214px;
  opacity: 0;
  animation: mapAsideIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.map-aside--left  { left: 26px; pointer-events: none; }
.map-aside--right { right: 26px; }

/* Ocultar en Cinema Mode (mapa encogido) */
.map-colombia--shrunk .map-aside {
  opacity: 0 !important;
  pointer-events: none;
  transform: translateY(-50%) scale(0.96);
}

@keyframes mapAsideIn {
  from { opacity: 0; transform: translateY(-42%); }
  to   { opacity: 1; transform: translateY(-50%); }
}

/* Panel izquierdo: guía + leyenda */
.map-aside-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(212,175,55, 0.85);
  margin-bottom: 10px;
}
.map-aside-lead {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 16px;
}
.map-aside-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.map-aside-legend span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.map-aside-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}

/* Panel derecho: spotlight rotativo de destacados */
.map-spot {
  --spot-color: #38bdf8;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 18px 18px 16px;
  cursor: pointer;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--spot-color) 14%, transparent) 0%, rgba(255, 255, 255, 0.02) 55%),
    rgba(6, 14, 28, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}
.map-spot::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--spot-color);
  opacity: 0.9;
}
.map-spot:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--spot-color) 45%, transparent);
  box-shadow: 0 20px 46px color-mix(in srgb, var(--spot-color) 22%, rgba(0,0,0,0.45));
}
.map-spot-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
/* Placa de logo / etiqueta del pin en el mapa */
.map-pin-label {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.map-spot-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 9px;
  padding: 7px 12px;
  margin: 0 0 10px;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.map-spot-logo img {
  display: block;
  max-width: 100%;
  max-height: 28px;
  object-fit: contain;
}

.map-spot-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 3px;
  line-height: 1.25;
}
.map-spot-loc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 12px;
}
.map-spot-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.map-spot-cta {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
}

/* Tooltip de pin (hover en estado normal) */
.map-pin-tooltip {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(4, 16, 40, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 30;
  text-align: center;
  line-height: 1.5;
}
.map-pin-tooltip small {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.45);
  display: block;
}

/* ── Ficha del aliado ───────────────────────────────────── */
.map-ficha {
  flex: 0 0 0%;
  overflow: hidden;
  opacity: 0;
  transition: flex 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease 0.2s;
}

.map-ficha--open {
  flex: 0 0 63%;
  opacity: 1;
}

.map-ficha-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Hero de la ficha ────────────────────────────────────── */
.map-ficha-hero {
  position: relative;
  flex-shrink: 0;
  min-height: 118px;
  display: flex;
  align-items: flex-end;
  padding: 0 26px 20px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.map-ficha-hero-bg {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

.map-ficha-hero-content {
  position: relative;
  z-index: 1;
}

.map-ficha-hero-deco {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-60%);
  font-size: 60px;
  opacity: 0.08;
  pointer-events: none;
  line-height: 1;
}

.map-ficha-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 10px;
  padding: 6px 14px;
  margin: 0 0 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  max-width: 150px;
}

.map-ficha-logo-badge img {
  display: block;
  max-width: 100%;
  max-height: 32px;
  object-fit: contain;
}

.map-ficha-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 6px;
}
.map-ficha-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px currentColor;
}

.map-ficha-name {
  position: relative;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1.15;
}

.map-ficha-tags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.map-ficha-tag {
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
}

/* Cuerpo de la ficha — layout flexible sin scroll */
.map-ficha-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 26px 24px;
}

/* ── Tabs: Desafío / Solución / Resultado ────────────────── */
.map-ficha-tabs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.map-ficha-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.4);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 9px 6px 11px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.map-ficha-tab:hover { color: rgba(255, 255, 255, 0.75); }
.map-ficha-tab.is-active { color: #fff; }
.map-ficha-tab-icon { font-size: 12px; line-height: 1; }

/* ── Panes: solo uno visible a la vez (sin scroll) ───────── */
.map-ficha-panes {
  flex: 1;
  min-height: 0;
  position: relative;
  margin-bottom: 16px;
  display: flex;
  overflow-y: auto;
  scrollbar-width: none;
}
.map-ficha-panes::-webkit-scrollbar { display: none; }
.map-ficha-pane { display: none; width: 100%; }
.map-ficha-pane.is-active { display: block; }
.map-ficha-pane-text {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.72;
  margin: 0;
}

/* Quote */
.map-ficha-quote {
  flex-shrink: 0;
  border-left: 3px solid;
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, 0.03);
  padding: 13px 18px;
  margin-bottom: 16px;
}

.map-ficha-quote-text {
  font-size: 13px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
  margin: 0 0 8px;
}

.map-ficha-quote-by {
  font-size: 11px;
  font-weight: 700;
  margin: 0;
}

/* Botones de acción */
.map-ficha-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.map-ficha-btn-back {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.65);
  border-radius: 10px;
  padding: 12px 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.map-ficha-btn-back:hover {
  background: rgba(212,175,55, 0.1);
  border-color: rgba(212,175,55, 0.3);
  color: #d4af37;
}

.map-ficha-btn-cta {
  flex: 2;
  background: #d4af37;
  border: none;
  color: #030d1e;
  border-radius: 10px;
  padding: 12px 10px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.map-ficha-btn-cta:hover {
  background: #ffcc00;
  transform: translateY(-1px);
}

/* ── Chips de navegación (debajo del stage) ─────────────── */
.map-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 0 6px;
}

.map-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 5px 14px 5px 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
}
.map-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.map-chip.map-chip--active { color: #fff; }
.map-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Chips destacados vs. primeros clientes */
.map-chip--featured {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
.map-chip--featured .map-chip-dot {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
.map-chip-star {
  font-size: 10px;
  line-height: 1;
  margin-left: -2px;
  filter: drop-shadow(0 0 4px currentColor);
}

/* Botón "Ver más clientes" + grupo colapsable de primeros clientes */
.map-chip-more {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  padding: 5px 14px;
}
.map-chip-more:hover {
  border-color: rgba(212,175,55, 0.4);
  color: #d4af37;
}
.map-chip-more-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  margin-right: 6px;
}
.map-chip-more.is-open .map-chip-more-ico {
  background: rgba(212,175,55, 0.18);
}
.map-chips-more { display: none; }
.map-chips--expanded .map-chips-more { display: contents; }

/* ── Lista de bullets dentro de una solución ────────────── */
.map-ficha-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.map-ficha-list li {
  position: relative;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}
.map-ficha-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--dot, #38bdf8);
  box-shadow: 0 0 6px var(--dot, #38bdf8);
}

/* ── Botón WhatsApp (reemplaza "Agenda tu demo") ────────── */
.map-ficha-btn-wa {
  flex: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border: none;
  color: #fff;
  border-radius: 10px;
  padding: 12px 10px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.28);
}
.map-ficha-btn-wa svg { flex-shrink: 0; }
.map-ficha-btn-wa:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.4);
}

/* ── Barra de estadísticas ──────────────────────────────── */
.map-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 22px 0 4px;
  flex-wrap: wrap;
}
.map-stat { text-align: center; }
.map-stat-num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #d4af37;
  line-height: 1;
}
.map-stat-lbl {
  display: block;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
}
.map-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.07);
}

/* Los paneles laterales solo caben con el mapa ancho */
@media (max-width: 992px) {
  .map-aside { display: none; }
}

/* ── Responsive: tablet ─────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .map-colombia--shrunk { flex: 0 0 40% !important; }
  .map-ficha--open { flex: 0 0 60% !important; }
  .map-ficha-name { font-size: 19px; }
}

/* ── Responsive: móvil ──────────────────────────────────── */
@media (max-width: 768px) {
  .map-stage {
    flex-direction: column;
    height: auto !important;   /* anula el height fijo en móvil para apilar verticalmente */
    min-height: 0;
    border-radius: 16px;
  }
  .map-colombia {
    min-height: 300px !important;
    flex: none !important;
    width: 100% !important;
    height: 300px;
  }
  .map-colombia--shrunk {
    height: 180px !important;
    min-height: 180px !important;
  }
  .map-ficha {
    display: block;
    flex: none !important;
    width: 100% !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.55s ease, opacity 0.3s ease 0.15s;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  .map-ficha--open {
    max-height: 1200px;
    opacity: 1;
  }
  /* En móvil el contenido fluye de forma natural (la página hace scroll) */
  .map-ficha-inner { height: auto; overflow: visible; }
  .map-ficha-body { flex: none; display: block; padding: 14px 16px 20px; }
  .map-ficha-panes { flex: none; display: block; }
  .map-ficha-hero { min-height: 90px; padding: 0 16px 14px; }
  .map-ficha-name { font-size: 17px; }
  .map-ficha-pane-text { font-size: 12px; }
  .map-ficha-tab { font-size: 10.5px; padding: 8px 4px 10px; }
  .map-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .map-chips::-webkit-scrollbar { display: none; }
  .map-ficha-actions { gap: 8px; }
  .map-ficha-btn-back { font-size: 11.5px; padding: 10px 8px; }
  .map-ficha-btn-cta,
  .map-ficha-btn-wa { font-size: 11.5px; padding: 10px 8px; }
  .map-stats { gap: 16px; }
  .map-stat-divider { display: none; }
}

@media (max-width: 480px) {
  .map-colombia { height: 240px !important; min-height: 240px !important; }
  .map-colombia--shrunk { height: 155px !important; min-height: 155px !important; }
  .map-ficha-actions { flex-direction: column; }
  .map-ficha-btn-cta,
  .map-ficha-btn-wa { flex: none; }
}

/* ══ Fin MAPA ALIADOS ══════════════════════════════════ */

/* ── Contacto: fila .row.g-5 sin desbordamiento horizontal ──────────────
   g-5 aplica margenes de -24px a la fila, pero el .container solo aporta 12px de
   padding: la fila se salia 12px por cada lado y en movil provocaba scroll
   horizontal (372px de documento en 360 visibles). */
#contacto > .container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (max-width: 991.98px) {
  /* Columnas apiladas: el hueco horizontal no aporta nada y se iguala al padding
     del contenedor para que el contenido quede alineado con el resto del sitio. */
  #contacto > .container { padding-left: 12px; padding-right: 12px; }
  #contacto .row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* ── Teatro "Desarrollo Web" en movil ────────────────────────────────────
   Antes: escenario de 560px con .wd-scene overflow:hidden. En movil el contenido
   mide hasta 1.200px, asi que "Portal Corporativo" y "Sistema a Medida" quedaban
   fuera de alcance y las escenas 2-4 recortaban contenido en silencio (sus hijos
   flex se encogian hasta caber). Mismo patron que el teatro de Analitica
   (.an-scene): la escena hace scroll interno. */
.wd-scene {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.25) transparent;
}
.wd-scene::-webkit-scrollbar { width: 4px; }
.wd-scene::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.25); border-radius: 2px; }

@media (max-width: 767px) {
  /* Escenario mas alto, con tres franjas: pasos arriba, scroll en medio, mascota abajo. */
  #teatro-wd-stage { height: 660px !important; }
  #teatro-wd-stage .wd-scene {
    top: 66px;              /* el area de scroll empieza bajo el indicador de pasos */
    bottom: 150px;          /* y termina sobre la franja reservada a KAI */
    padding-top: 4px;
    padding-bottom: 12px;
  }
  /* Cada bloque mide lo que su contenido: nada se encoge ni se recorta. */
  #teatro-wd-stage .wd-scene > * { flex: 0 0 auto; }

  /* Franja de KAI: globo a la derecha del avatar y "Demo Automatica" encima
     del globo (antes se solapaban 41px). */
  #wd-kai .kai-speech { max-width: calc(100vw - 150px) !important; }
  #teatro-wd-stage .wd-autoplay-btn { bottom: 108px; right: 14px; }

  /* Grafo del stack: a 220px de alto los 5 nodos se pisaban. */
  .wd-graph-area { height: 350px; }
  .wd-node-name { font-size: 10.5px; }
  .wd-node-role { font-size: 9px; }

  /* Propuesta: la etiqueta "Personalizada" se salia por la derecha. */
  .wd-prop-header { flex-wrap: wrap; row-gap: 8px; }
  .wd-prop-header > :nth-child(2) { flex: 1 1 0; min-width: 0; }
  .wd-prop-badge { order: 3; margin-left: calc(44px + 14px); }
}

/* ── Franja propia para KAI en los teatros Power BI y Desarrollo Web ──────
   Antes KAI (avatar + globo) flotaba sobre el contenido en la esquina inferior
   izquierda: tapaba el 78% del boton "Volver", el 73% de "Atras", parte de
   "Oracle Cloud" y un KPI del dashboard. Ahora cada escenario crece 100px y las
   escenas terminan 100px antes: el contenido conserva su tamano original y KAI
   vive en su franja. Su globo va a la derecha del avatar (como ya hacia el teatro
   web). En movil KAI no camina (ver moveAv en js/teatro_powerbi.js). */
#teatro-pb-stage { height: 720px !important; }
#teatro-pb-stage > .teatro-scene { bottom: 100px; }
#teatro-pb-stage > .teatro-scene#scene-dash { bottom: 100px !important; }
/* El holograma se centra en el escenario y la zona del motor en la escena:
   se compensa la mitad de la franja para que sigan concentricos. */
#kai-logo-holo { top: calc(50% - 50px); }
#kai-avatar .kai-speech { bottom: 4px; left: 62px; max-width: 240px; }

@media (min-width: 768px) {
  #teatro-wd-stage { height: 720px !important; }
  #teatro-wd-stage .wd-scene { bottom: 100px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  #teatro-pb-stage,
  #teatro-wd-stage { height: 800px !important; }
}
@media (max-width: 767px) {
  #teatro-pb-stage { height: 660px !important; }
  #kai-avatar .kai-speech { max-width: calc(100vw - 150px); }
}
/* Con el globo a la derecha del avatar, la colita apunta a KAI (izquierda),
   no hacia abajo como cuando el globo iba encima. */
#kai-avatar .kai-speech-tail {
  bottom: 14px; left: -7px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #fff;
  border-left: 0;
}
/* El globo es absolute dentro de un avatar de 42px: sin ancho explicito se
   encogia a su ancho minimo y partia el texto en 5 lineas cortas. */
#kai-avatar .kai-speech,
#wd-kai .kai-speech { width: max-content; }
@media (min-width: 768px) {
  /* Con la frase mas larga de KAI (~120 caracteres) el globo a 220px subia
     104px y asomaba sobre la escena. A 300px cabe en 3 lineas dentro de la franja. */
  #wd-kai .kai-speech { max-width: 300px !important; }
}
/* El <p> del globo heredaba margin-bottom:16px de Bootstrap: 16px de hueco vacio
   bajo el texto y un globo mas alto de lo necesario. */
#wd-kai .kai-speech p,
#kai-avatar .kai-speech p { margin: 0; }

/* ── Hero en movil y tablet ──────────────────────────────────────────────
   La franja de estado era absolute al pie del hero; en movil ocupa 122px (se
   parte en varias lineas) y tapaba la segunda y tercera fila de chips ("Python ·
   Scikit-learn", "Big Data · SQL" y "Cloud Analytics", este ultimo entero). Pasa a
   su propia linea, al final del hero, sin los separadores "|" que quedaban colgando
   al final de cada linea. Ademas se centran botones y chips, que iban a la
   izquierda mientras el titulo y el texto van centrados. */
@media (max-width: 991.98px) {
  .hero-section { flex-wrap: wrap; padding-bottom: 0; }
  .hero-status-strip { position: relative; width: 100%; margin-top: 3rem; }
  .hss-inner { justify-content: center; gap: 8px 16px; }
  .hss-div { display: none; }
  .hero-cta-group,
  .hero-tech-row { justify-content: center; }
}
@media (max-width: 575.98px) {
  .hero-cta-group > .btn { flex: 1 1 100%; margin-left: 0; margin-right: 0; }
}

/* ── Pestanas del Teatro de Soluciones en movil ──────────────────────────
   La regla ".teatro-tab span:not(:first-child)" ocultaba justo el rotulo (el
   primer hijo es el icono): quedaban dos iconos sueltos sin texto y "LIVE". Ahora:
   tres pestanas iguales, icono sobre rotulo, y "LIVE" como insignia de esquina. */
@media (max-width: 767px) {
  .teatro-tabs { flex-wrap: nowrap !important; }
  .teatro-tabs > .nav-item { flex: 1 1 0; min-width: 0; }
  .teatro-tab {
    width: 100%;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 10px 6px !important;
    font-size: .72rem !important;
    line-height: 1.2;
    text-align: center;
  }
  .teatro-tab i { font-size: 1.05rem; }
  .teatro-tab span:not(:first-child):not(.tab-badge) { display: inline !important; }
  .teatro-tab .tab-badge { position: absolute; top: -8px; right: -4px; margin: 0; }
}

/* ── Contraste (WCAG AA: 4.5:1 texto normal, 3:1 texto grande) ───────────
   El dorado de marca (#d4af37) y su variante oscura (#b8952f) no se leen sobre
   fondo claro. Para texto sobre blanco se usa el dorado "de tinta" del sistema de
   diseno (--kz-gold-ink en css/kz-tokens.css, que index.php no carga): 6,0:1. */
.text-gold-ink { color: #7a5f16; }                 /* "Kaizen Insights": era 1,99:1 */
.lider-card-title { color: #7a5f16; }              /* cargos del equipo: era 2,85:1 */

/* "Conoce al resto del equipo": btn-outline-primary de Bootstrap (azul #004080,
   pensado para fondo claro) sobre la seccion oscura de liderazgo: 1,89:1.
   Contorno dorado, coherente con el resto de botones sobre fondo oscuro. */
#liderazgo-kaizen .btn-outline-primary {
  color: #d4af37;
  border-color: rgba(212, 175, 55, 0.55);
  background: transparent;
}
#liderazgo-kaizen .btn-outline-primary:hover,
#liderazgo-kaizen .btn-outline-primary:focus-visible {
  color: #030d1e;
  background: #d4af37;
  border-color: #d4af37;
}
/* Subtitulo de noticias: gris .text-secondary de Bootstrap (#6c757d) sobre #f4f4f4
   = 4,45:1, justo bajo el minimo. Un tono mas oscuro: ~5,6:1. */
#noticias-preview .lead.text-secondary { color: #5c636a !important; }

/* ── Footer con columnas apiladas (movil y tablet) ───────────────────────
   Titulos y textos centrados, pero los iconos sociales (flex sin justify) iban a
   la izquierda, y en contacto la direccion (2 lineas, ancho completo) quedaba
   centrada mientras telefono, correo y horario iban a la izquierda. */
@media (max-width: 991.98px) {
  .footer-social { justify-content: center; }
  .footer-contact-item { justify-content: center; }
  .footer-contact-item span { flex: 0 1 auto; max-width: 15.5rem; text-align: left; }
}

/* ── Orbe KAI y su Menu de Acceso Rapido: rediseno ──────────────────────
   El panel era blanco con texto oscuro y hover azul (estilo antiguo, distinto del
   resto del sitio) y no tenia altura maxima: en pantallas bajas la ultima opcion
   quedaba cortada sin forma de llegar a ella. Ahora usa el lenguaje del sitio
   (cristal azul marino, borde y acentos dorados, iconos en recuadro dorado como en
   Contacto) y hace scroll interno si no cabe. GSAP sigue controlando opacidad,
   visibilidad, escala y posicion del panel y de cada fila: aqui solo hay color,
   tipografia y espaciado. */
#kai-orb {
  background: radial-gradient(circle at 35% 30%, #0a2a55 0%, #041630 55%, #030d1e 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.06), 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 26px rgba(0, 102, 204, 0.35);
}
#kai-orb:focus-visible { outline: 2px solid #d4af37; outline-offset: 4px; }

#kai-hub-overlay { background-color: rgba(3, 13, 30, 0.72); padding: 16px; }
#kai-hub-panel {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(160deg, rgba(10, 28, 54, 0.97) 0%, rgba(4, 14, 30, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  padding: 1.6rem 1.4rem 1.2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.25) transparent;
}
#kai-hub-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
}
#kai-hub-close-btn {
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  padding: 0;
  font-size: 1.25rem; line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#kai-hub-close-btn:hover,
#kai-hub-close-btn:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.12); transform: rotate(90deg); outline: none; }

.kai-hub-header { display: flex; align-items: center; gap: 14px; text-align: left; margin: 0 44px 1.3rem 0; }
.kai-hub-header img {
  width: 46px; height: 46px; flex-shrink: 0;
  margin: 0; padding: 6px;
  background: #030d1e;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.18);
}
.kai-hub-eyebrow {
  display: block;
  font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #d4af37;
  margin-bottom: 3px;
}
.kai-hub-header h3 { margin: 0; color: #fff; font-weight: 800; font-size: 1.3rem; line-height: 1.2; }

#kai-hub-actions { display: flex; flex-direction: column; gap: 6px; }
#kai-hub-actions li a {
  gap: 14px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: #fff;
  transition: background .2s, border-color .2s, transform .2s;
}
#kai-hub-actions li a i {
  width: 42px; height: 42px; flex-shrink: 0;
  margin: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  font-size: 1rem;
  color: #d4af37;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.22);
  transition: background .2s, color .2s;
}
#kai-hub-actions li a::after {
  content: '\f105';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  padding-left: 8px;
  color: rgba(255, 255, 255, 0.22);
  transition: color .2s, transform .2s;
}
.menu-item-content { gap: 2px; min-width: 0; }
.menu-item-content span:first-child { font-weight: 700; font-size: .97rem; color: #fff; }
.menu-description { font-size: .8rem; line-height: 1.35; color: rgba(255, 255, 255, 0.55); }

#kai-hub-actions li a:hover,
#kai-hub-actions li a:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(212, 175, 55, 0.25);
  color: #fff;
  transform: translateX(4px);
  outline: none;
}
#kai-hub-actions li a:hover i,
#kai-hub-actions li a:focus-visible i { background: #d4af37; color: #030d1e; }
#kai-hub-actions li a:hover::after,
#kai-hub-actions li a:focus-visible::after { color: #d4af37; transform: translateX(3px); }
#kai-hub-actions li a:hover .menu-description,
#kai-hub-actions li a:focus-visible .menu-description { color: rgba(255, 255, 255, 0.75); }

@media (max-width: 575.98px) {
  #kai-hub-panel { padding: 1.3rem 1rem 1rem; border-radius: 18px; }
  .kai-hub-header h3 { font-size: 1.12rem; }
  #kai-hub-actions li a { padding: 9px 10px; gap: 12px; }
  #kai-hub-actions li a i { width: 38px; height: 38px; }
  .menu-description { font-size: .76rem; }
}

/* ── Dashboard del teatro Power BI en movil y tablet ─────────────────────
   Su CSS esta pensado para que TODO quepa dentro del escenario sin scroll (flex:1,
   height:100% y overflow:hidden con !important). Eso funciona en escritorio, pero:
   - en movil las columnas de graficos quedaban aplastadas a 8px (los graficos no
     se veian: era la franja gris vacia), la fila inferior se salia 91px por la
     derecha y habia textos de 7,5 a 9px;
   - en tablet las tarjetas de graficos recortaban hasta la mitad de su contenido
     y la tabla mostraba una sola fila.
   Hasta 1199px el dashboard toma su altura natural y se desplaza por dentro (mismo
   patron que los teatros Web y Analitica). En escritorio no cambia nada.
   Ademas, en todos los anchos el indicador de pasos (1-2-3) quedaba encima de la
   barra y el titulo del dashboard: se oculta en esa fase (clase .is-dash, la pone
   js/teatro_powerbi.js en showDashboard y la quita en reset). */
.pb-chart-legend .legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#teatro-pb-stage.is-dash #teatro-steps { opacity: 0; visibility: hidden; }

@media (max-width: 1199px) {
  #teatro-pb-stage > .teatro-scene#scene-dash {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.3) transparent;
  }
  #teatro-pb-stage .pb-dashboard { position: relative !important; inset: auto !important; height: auto !important; min-height: 100%; overflow: visible !important; }
  #teatro-pb-stage .pb-main-grid {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
  }
  #teatro-pb-stage .pb-left-col,
  #teatro-pb-stage .pb-center-col,
  #teatro-pb-stage .pb-right-col,
  #teatro-pb-stage .pb-main-grid > * { height: auto !important; max-height: none !important; overflow: visible !important; min-width: 0 !important; }
  /* IA, alertas y recomendaciones: fila completa bajo los graficos */
  #teatro-pb-stage .pb-right-col { grid-column: 1 / -1 !important; flex-direction: row !important; flex-wrap: wrap !important; }
  #teatro-pb-stage .pb-right-col > * { flex: 1 1 220px !important; min-width: 0 !important; }
  #teatro-pb-stage .pb-chart-card,
  #teatro-pb-stage .pb-table-card,
  #teatro-pb-stage .pb-donut-card,
  #teatro-pb-stage .pb-bar-mini-card,
  #teatro-pb-stage .pb-ai-card,
  #teatro-pb-stage .pb-alerts-card,
  #teatro-pb-stage .pb-reco-card { flex: 0 0 auto !important; overflow: visible !important; }
  #teatro-pb-stage .pb-chart-wrap { height: 180px !important; }
  #teatro-pb-stage #pb-line-chart { max-height: 180px !important; }
  #teatro-pb-stage .pb-table-wrap { max-height: 180px; overflow-x: auto; }
  #teatro-pb-stage .pb-chart-header { flex-wrap: wrap !important; row-gap: 4px; }
  #teatro-pb-stage .pb-chart-legend { flex-wrap: wrap !important; gap: 4px 10px !important; font-size: 10px !important; }
  #teatro-pb-stage .pb-bottom-kpi { min-width: 0; }
  #teatro-pb-stage .pb-bottom-kpi * { min-width: 0; white-space: normal !important; }
  /* Tamanos legibles (antes 7,5-9px) */
  #teatro-pb-stage .pb-table th,
  #teatro-pb-stage .pb-table td { font-size: 10.5px !important; padding: 4px 6px !important; white-space: nowrap !important; }
  #teatro-pb-stage .pb-ai-text { max-height: none; font-size: 11.5px !important; }
  #teatro-pb-stage .pk-label,
  #teatro-pb-stage .bk-label { font-size: 10px !important; }
  #teatro-pb-stage .pk-delta,
  #teatro-pb-stage .bk-meta,
  #teatro-pb-stage .bk-badge { font-size: 9.5px !important; }
  #teatro-pb-stage .pk-value { font-size: 16px !important; }
  #teatro-pb-stage .bk-val { font-size: 14px !important; }
  #teatro-pb-stage .pb-chart-card h4,
  #teatro-pb-stage .pb-table-card h4,
  #teatro-pb-stage .pb-donut-card h4,
  #teatro-pb-stage .pb-bar-mini-card h4 { font-size: 12px !important; }
  #teatro-pb-stage .dl-item,
  #teatro-pb-stage .pb-alerts-header,
  #teatro-pb-stage .alert-text,
  #teatro-pb-stage .alert-text *,
  #teatro-pb-stage .pb-reco-header,
  #teatro-pb-stage .pb-reco-card li,
  #teatro-pb-stage .pb-reco-card span { font-size: 10.5px !important; }
}
@media (max-width: 767px) {
  #teatro-pb-stage .pb-main-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #teatro-pb-stage .pb-right-col { flex-direction: column !important; flex-wrap: nowrap !important; }
  #teatro-pb-stage .pb-right-col > * { flex: 0 0 auto !important; }
  #teatro-pb-stage .pb-bottom-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Titulo arriba y filtros de ano/mes debajo (el titulo se partia en 3 lineas) */
  #teatro-pb-stage .pb-title-row { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  #teatro-pb-stage .pb-time-selectors { align-items: flex-start !important; width: 100%; }
}
@media (max-width: 575.98px) {
  /* A 2 columnas las etiquetas se partian a trozos ("Cumplimient / o") */
  #teatro-pb-stage .pb-bottom-row { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── Teatro Analitica: franja propia para la mini KAI ────────────────────
   Mismo problema y misma solucion que en Power BI y Desarrollo Web: la mini KAI,
   su globo y el boton "Demo Automatica" flotaban sobre la escena (en el paso 3
   tapaban "Importancia de variables" y el boton "Volver"). El escenario crece 80px
   y la escena termina antes (la barra inferior ya ocupaba 50px). En movil el globo
   necesita mas lineas: franja de 130px con el boton de demo encima del globo. */
#teatro-an-stage { height: 700px !important; }
#teatro-an-stage .an-scene { bottom: 130px; }
#an-kai { bottom: 58px; }
#an-kai .an-kai-speech { width: max-content; }
@media (min-width: 768px) and (max-width: 1199px) {
  #teatro-an-stage { height: 780px !important; }
}
@media (max-width: 767px) {
  #teatro-an-stage { height: 700px !important; }
  #teatro-an-stage .an-scene { bottom: 180px; }
  #an-kai .an-kai-speech { max-width: calc(100vw - 150px); }
  #an-autoplay-btn { bottom: 140px; }
  /* Etiquetas de 8-9px */
  #teatro-an-stage .an-scene-label,
  #teatro-an-stage .an-pipe-label { font-size: 10px; }
  #teatro-an-stage .an-ch-tag,
  #teatro-an-stage .an-pipe-stat-lbl,
  #teatro-an-stage .an-metric-name,
  #teatro-an-stage .an-cm-title,
  #teatro-an-stage .an-cm-lbl,
  #teatro-an-stage .an-gauge-sub,
  #teatro-an-stage .an-seg-title { font-size: 9.5px; }
}
@media (max-width: 1199px) {
  #teatro-an-stage .an-scene-label,
  #teatro-an-stage .an-pipe-label { font-size: 10px; }
  #teatro-an-stage .an-ch-tag,
  #teatro-an-stage .an-pipe-stat-lbl,
  #teatro-an-stage .an-metric-name,
  #teatro-an-stage .an-cm-title,
  #teatro-an-stage .an-cm-lbl,
  #teatro-an-stage .an-cm-cell-sub,
  #teatro-an-stage .an-gauge-sub,
  #teatro-an-stage .an-seg-title,
  #teatro-an-stage .an-feat-title,
  #teatro-an-stage .an-impact-desc { font-size: 9.5px; }
}
@media (min-width: 768px) {
  /* Los rotulos del indicador de pasos terminan a 59px y la escena empezaba a 56px:
     "Tu Proyecto" pisaba 3px el titulo "¿Que quieres construir?". */
  #teatro-wd-stage .wd-scene { padding-top: 70px; }
}

/* ── Aviso "Demo en vivo" del Teatro de Soluciones (js/teatro_director.js) ──
   Se coloca sobre el borde superior del escenario, fuera de el, para no tapar
   nada del contenido. */
.teatro-demo-pill {
  position: absolute;
  right: 18px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(6, 20, 42, 0.96);
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.76rem;
  line-height: 1.2;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.teatro-demo-pill.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.teatro-demo-pill strong { color: #d4af37; font-weight: 800; letter-spacing: .02em; }
.teatro-demo-pill[data-modo="fin"] { color: #d4af37; font-weight: 700; }
.teatro-demo-pill .tdp-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff5b5b;
  box-shadow: 0 0 0 0 rgba(255, 91, 91, 0.6);
  animation: tdp-latido 1.6s ease-out infinite;
}
@keyframes tdp-latido {
  0%   { box-shadow: 0 0 0 0 rgba(255, 91, 91, 0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 91, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 91, 91, 0); }
}
@media (max-width: 575.98px) {
  .teatro-demo-pill { right: 10px; padding: 5px 11px; font-size: 0.72rem; }
}
@media (max-width: 340px) {
  .teatro-demo-pill .tdp-extra { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .teatro-demo-pill .tdp-dot { animation: none; }
}

/* Iconos de redes sin direccion real (href="#"): con target="_blank" abrian una
   copia de la propia web en otra pestana. Se ocultan hasta tener la URL real; al
   ponerla en el HTML reaparecen solos. */
.social-icon-branded[href="#"],
.fs-facebook[href="#"],
.fs-linkedin[href="#"],
.fs-instagram[href="#"] { display: none !important; }

/* Footer: telefono y correo ahora son enlaces (tel:/mailto:); sin esto heredaban el
   azul de Bootstrap, ilegible sobre el fondo oscuro. */
.footer-contact-item a { color: inherit; text-decoration: none; transition: color .2s; }
.footer-contact-item a:hover,
.footer-contact-item a:focus-visible { color: #d4af37; }

/* ── Mapa de aliados: tamano ─────────────────────────────────────────────
   El SVG tiene viewBox vertical (310x430) y se ajusta manteniendo proporcion, asi
   que manda la ALTURA del contenedor. Con 300px (tablet) y 240px (movil) Colombia
   se dibujaba a 216 y 173px de ancho y los logos de los aliados median 11-13px de
   alto: ilegibles. En movil/tablet el contenedor toma la proporcion del mapa y
   ocupa todo el ancho (tope 600px); en escritorio pasa de 540 a 620px. */
@media (min-width: 769px) {
  .map-stage { height: 620px; }
}
@media (max-width: 768px) {
  .map-colombia { height: auto !important; min-height: 0 !important; aspect-ratio: 310 / 430; max-height: 600px; }
}
/* Texto de ayuda segun el tipo de pantalla ("Toca" en tactiles) */
.txt-tactil { display: none; }
@media (hover: none) {
  .txt-puntero { display: none; }
  .txt-tactil { display: inline; }
}
@media (max-width: 768px) {
  /* Fila de aliados en movil: pildoras de una linea que se deslizan en horizontal.
     Antes cada una se estrechaba hasta partir el nombre palabra por palabra
     ("EPS / Familiar / de / Colombia") en cajas de 88px de alto. */
  .map-chips {
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
    padding-right: 24px;
  }
  .map-chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
}
/* Etiquetas de las cifras del mapa: 9,5px al 30% de opacidad, casi invisibles. */
.map-stat-lbl { font-size: 10.5px; color: rgba(255, 255, 255, 0.58); letter-spacing: 0.08em; }
@media (max-width: 575.98px) {
  /* 2x2 alineado (con flex-wrap las columnas quedaban desparejas) */
  .map-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
}

/* ── Mapa: clientes anteriores (Kankuama, Suma, Dusakawi) ────────────────
   Siguen en el mapa pero con menos protagonismo que los activos: punto discreto sin
   placa de logo ni anillo de pulso. Al pasar el raton sale su nombre (tooltip) y al
   pulsar se abre su ficha, marcada como "Proyecto finalizado". */
.map-pin-group--anterior .map-pin-label,
.map-pin-group--anterior .map-pin-ring { display: none; }
.map-pin-group--anterior .map-pin-dot { opacity: 0.55; }
.map-pin-group--anterior:hover .map-pin-dot,
.map-pin-group--anterior:focus .map-pin-dot { opacity: 1; }
.map-ficha-anterior {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0.2rem 0 0.6rem;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ── Formulario de contacto: autorizacion de datos y campo trampa ─────── */
.hp-campo { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.contacto-autorizacion { display: flex; gap: 10px; align-items: flex-start; padding-left: 0; }
.contacto-autorizacion .form-check-input {
  flex-shrink: 0; margin: 3px 0 0; width: 1.1rem; height: 1.1rem;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.contacto-autorizacion .form-check-input:checked { background-color: #d4af37; border-color: #d4af37; }
.contacto-autorizacion .form-check-input:focus { box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25); border-color: #d4af37; }
.contacto-autorizacion .form-check-label { font-size: 0.84rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); cursor: pointer; }
.contacto-autorizacion a { color: #d4af37; text-decoration: underline; text-underline-offset: 2px; }
.contacto-autorizacion a:hover { color: #f0d77a; }
/* Documento disponible en la lista de Talento (los demas siguen "Proximamente") */
.talento-doc-badge--link {
  text-decoration: none;
  color: #5ddba0 !important;
  border-color: rgba(93, 219, 160, 0.4) !important;
  background: rgba(93, 219, 160, 0.08) !important;
  white-space: nowrap;
}
.talento-doc-badge--link:hover,
.talento-doc-badge--link:focus-visible { background: rgba(93, 219, 160, 0.18) !important; color: #8ff0c4 !important; }

/* =============================================================================
   LIDERAZGO (inicio) — rediseño 2026-10-01
   Antes: tarjetas blancas pequeñas sobre la sección oscura (parecían de otra web),
   fotos de 130 px de ancho con encuadres distintos (Jarol de cuerpo entero hecha
   con el móvil; Yeison horizontal) y textos de 13 px. Ahora: tarjetas de cristal
   navy con filete dorado, retratos 4:5 con el mismo encuadre (lider_*.webp,
   recortados de los originales, que siguen en nosotros.php), credenciales
   verificadas y llamada a agendar. Clases ldz-* propias: .lider-card la sigue
   usando nosotros.php y no se toca.
   ============================================================================= */
#liderazgo-kaizen.ldz {
  padding: 5.5rem 0 5rem;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(212, 175, 55, 0.07), transparent 70%),
    linear-gradient(160deg, #030d1e 0%, #04152f 55%, #001230 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.1);
}
.ldz-head { max-width: 840px; margin: 0 auto 3rem; text-align: center; }
.ldz-lead { max-width: 680px; margin-left: auto !important; margin-right: auto !important; }
.ldz-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 5px 16px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 50px;
  background: rgba(212, 175, 55, 0.1);
  color: #d4af37;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
#liderazgo-kaizen .ldz-head h2 {
  margin: 0 0 1rem;
  color: #fff;
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.ldz-gold { color: #d4af37; }
.ldz-lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.05rem;
  line-height: 1.7;
}

.ldz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1120px;
  margin: 0 auto;
}
.ldz-card {
  position: relative;
  display: grid;
  grid-template-columns: clamp(190px, 40%, 250px) 1fr;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.ldz-card::before {                       /* filete dorado superior */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37 30%, #d4af37 70%, transparent);
  opacity: 0.7;
  z-index: 2;
}
.ldz-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.ldz-photo {
  position: relative;
  width: 100%;
  min-height: 340px;                      /* la altura la marca la tarjeta; la foto rellena su columna */
  margin: 0;
  overflow: hidden;
  background: #0a1628;
}
.ldz-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(0.92) contrast(1.03);
  transition: transform 0.6s ease;
}
.ldz-card:hover .ldz-photo img { transform: scale(1.03); }
.ldz-photo::after {                       /* funde la foto con la tarjeta */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 62%, rgba(6, 20, 42, 0.55) 100%),
              linear-gradient(0deg, rgba(3, 13, 30, 0.35) 0%, transparent 35%);
  pointer-events: none;
}
.ldz-body {
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.75rem 1.6rem;
}
.ldz-role {
  margin: 0 0 0.35rem;
  color: #d4af37;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
#liderazgo-kaizen .ldz-name {
  margin: 0 0 0.9rem;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
}
.ldz-bio {
  margin: 0 0 1.15rem;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.95rem;
  line-height: 1.65;
}
.ldz-creds {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.4rem;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
}
.ldz-creds li {
  position: relative;
  padding-left: 1.15rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}
.ldz-creds li::before {                   /* rombo dorado */
  content: "";
  position: absolute;
  left: 1px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: #d4af37;
  transform: rotate(45deg);
}
.ldz-link {
  margin-top: auto;
  align-self: flex-start;
  color: #d4af37;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}
.ldz-link i { margin-left: 0.35rem; font-size: 0.78rem; transition: transform 0.25s ease; }
.ldz-link:hover,
.ldz-link:focus-visible { color: #e8c75a; text-decoration: underline; text-underline-offset: 4px; }
.ldz-link:hover i { transform: translateX(4px); }

.ldz-cta { margin-top: 3.25rem; text-align: center; }
.ldz-cta p { margin: 0 0 1.25rem; color: rgba(255, 255, 255, 0.78); font-size: 1.05rem; }
.ldz-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.ldz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.ldz-btn--gold { background: #d4af37; color: #0a1628; border: 1px solid #d4af37; }
.ldz-btn--gold:hover,
.ldz-btn--gold:focus-visible { background: #e2c35a; color: #0a1628; transform: translateY(-2px); }
.ldz-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); }
.ldz-btn--ghost:hover,
.ldz-btn--ghost:focus-visible { border-color: #d4af37; color: #d4af37; }

/* Tablet y portátil pequeño: una tarjeta por fila (dos a lo ancho dejaban el texto en 240 px) */
@media (max-width: 1199.98px) {
  .ldz-grid { grid-template-columns: 1fr; max-width: 760px; }
}
/* Teléfono: retrato pequeño junto al nombre; biografía y credenciales debajo */
@media (max-width: 575.98px) {
  #liderazgo-kaizen.ldz { padding: 4rem 0 3.5rem; }
  .ldz-head { margin-bottom: 2.25rem; }
  .ldz-lead { font-size: 0.98rem; }
  .ldz-grid { gap: 1.25rem; }
  .ldz-card {
    grid-template-columns: 96px 1fr;
    grid-template-areas: "foto id" "cuerpo cuerpo";
    column-gap: 1rem;
    padding: 1.25rem;
  }
  .ldz-body { display: contents; }
  .ldz-photo {
    grid-area: foto;
    width: 96px;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
  }
  .ldz-photo::after { background: linear-gradient(0deg, rgba(3, 13, 30, 0.25), transparent 40%); }
  .ldz-id { grid-area: id; align-self: center; }
  #liderazgo-kaizen .ldz-name { margin: 0; font-size: 1.3rem; }
  .ldz-bio, .ldz-creds, .ldz-link { grid-column: 1 / -1; }
  .ldz-bio { margin: 1.1rem 0 1rem; font-size: 0.93rem; }
  .ldz-creds { margin-bottom: 1.1rem; }
  .ldz-cta { margin-top: 2.5rem; }
  .ldz-cta-btns { flex-direction: column; }
  .ldz-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ldz-card, .ldz-photo img, .ldz-btn, .ldz-link i { transition: none; }
}

/* Títulos de liderazgo en líneas equilibradas (evita "proyecto" solo en la segunda línea) */
#liderazgo-kaizen .ldz-head h2, #liderazgo-kaizen .ldz-name { text-wrap: balance; }
/* Miniatura del móvil: encuadre más cerrado sobre la cara (con 96 px el plano de
   medio cuerpo dejaba la cara muy pequeña) */
@media (max-width: 575.98px) {
  .ldz-photo img { transform: scale(1.45); transform-origin: 50% 24%; }
  .ldz-card:hover .ldz-photo img { transform: scale(1.45); }
}

/* =============================================================================
   FOOTER kzf — rediseño 2026-10-01 (includes/site_footer.php)
   En móvil medía 1.227 px: una columna centrada con huecos enormes, letra de 11 px,
   logo circular ilegible, tagline descentrada y el botón de Kaizen AI tapando el
   copyright. Ahora: franja de contacto, marca + 4 grupos en rejilla que se reordena
   por ancho, contacto en filas pulsables y barra legal. Selectores footer.kzf para
   ganar a las reglas antiguas de "footer" (siguen arriba, sin efecto aquí).
   ============================================================================= */
footer.kzf {
  padding: 0;
  text-align: left;
  color: rgba(255, 255, 255, 0.68);
  background:
    radial-gradient(ellipse 55% 60% at 100% 0%, rgba(212, 175, 55, 0.06), transparent 70%),
    linear-gradient(180deg, #030c1b 0%, #020914 100%);
}
footer.kzf ul { list-style: none; margin: 0; padding: 0; }
footer.kzf a { text-decoration: none; }

/* ── Franja de contacto ── */
.kzf-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding: 2.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.kzf-eyebrow {
  margin: 0 0 0.4rem;
  color: #d4af37;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.kzf-cta-title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.3px;
}
.kzf-cta-title span { color: #d4af37; }
.kzf-cta-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; flex-shrink: 0; }
.kzf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.6rem;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
footer.kzf .kzf-btn--gold { background: #d4af37; color: #0a1628; border: 1px solid #d4af37; }
footer.kzf .kzf-btn--gold:hover,
footer.kzf .kzf-btn--gold:focus-visible { background: #e2c35a; color: #0a1628; transform: translateY(-2px); }
footer.kzf .kzf-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); }
footer.kzf .kzf-btn--ghost:hover,
footer.kzf .kzf-btn--ghost:focus-visible { border-color: #25d366; color: #25d366; }

/* ── Rejilla principal ── */
.kzf-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.25fr 1fr 1.45fr;
  gap: 2.5rem 2rem;
  padding: 3.25rem 0 2.75rem;
}
.kzf-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.kzf-logo img { width: 44px; height: 44px; border-radius: 50%; }
footer.kzf .kzf-logo:hover { color: #fff; }
.kzf-tagline {
  max-width: 300px;
  margin: 0 0 1.4rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.65;
}
.kzf-social { display: flex; gap: 0.6rem; }
footer.kzf .kzf-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
footer.kzf .kzf-social a:hover,
footer.kzf .kzf-social a:focus-visible { border-color: #d4af37; color: #d4af37; background: rgba(212, 175, 55, 0.08); }

footer.kzf .kzf-col h3 {
  margin: 0 0 1.1rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
footer.kzf .kzf-col li { margin: 0 0 0.7rem; }
footer.kzf .kzf-col a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.9rem;
  line-height: 1.4;
  transition: color 0.2s ease;
}
footer.kzf .kzf-col a:hover,
footer.kzf .kzf-col a:focus-visible { color: #d4af37; }
footer.kzf .kzf-portales a i { font-size: 0.65rem; opacity: 0.55; }

/* Contacto: icono + etiqueta pequeña + dato */
footer.kzf .kzf-contact li { margin-bottom: 0.9rem; }
footer.kzf .kzf-contact li > a,
footer.kzf .kzf-contact li > div {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  line-height: 1.45;
}
footer.kzf .kzf-contact i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 9px;
  background: rgba(212, 175, 55, 0.08);
  color: #d4af37;
  font-size: 0.8rem;
}
footer.kzf .kzf-contact small {
  display: block;
  margin-bottom: 1px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
footer.kzf .kzf-contact li > a:hover,
footer.kzf .kzf-contact li > a:focus-visible { color: #d4af37; }

/* ── Barra legal ── */
.kzf-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.4rem 0 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.kzf-bottom p { margin: 0; color: rgba(255, 255, 255, 0.45); font-size: 0.82rem; }
.kzf-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
footer.kzf .kzf-legal a { color: rgba(255, 255, 255, 0.6); font-size: 0.82rem; }
footer.kzf .kzf-legal a:hover,
footer.kzf .kzf-legal a:focus-visible { color: #d4af37; }

/* ── Portátil pequeño: marca a lo ancho, 4 grupos debajo ── */
@media (max-width: 1199.98px) {
  .kzf-main { grid-template-columns: repeat(4, 1fr); }
  .kzf-brand {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .kzf-logo, .kzf-tagline { margin-bottom: 0; }
  .kzf-tagline { max-width: 460px; flex: 1 1 320px; }
}
/* ── Tablet: grupos en 2 columnas, contacto a lo ancho ── */
@media (max-width: 991.98px) {
  .kzf-cta { flex-direction: column; align-items: flex-start; }
  .kzf-main { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .kzf-contact { grid-column: 1 / -1; }
  footer.kzf .kzf-contact ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1.5rem; }
  /* que el botón flotante de Kaizen AI no tape la barra legal */
  .kzf-bottom { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}
/* ── Teléfono ── */
@media (max-width: 575.98px) {
  .kzf-cta { padding: 2.25rem 0 2rem; }
  .kzf-cta-btns { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .kzf-btn { padding: 0.75rem 1rem; font-size: 0.9rem; }
  .kzf-main { gap: 2rem 1.25rem; padding: 2.25rem 0 2rem; }
  .kzf-brand { display: block; padding-bottom: 1.75rem; }
  .kzf-logo { margin-bottom: 0.85rem; }
  .kzf-tagline { margin-bottom: 1.1rem; font-size: 0.88rem; }
  footer.kzf .kzf-col li { margin-bottom: 0.25rem; }
  footer.kzf .kzf-col a { min-height: 36px; font-size: 0.88rem; }   /* área táctil */
  .kzf-portales { grid-column: 1 / -1; }
  footer.kzf .kzf-portales ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  footer.kzf .kzf-portales li { margin: 0; }
  footer.kzf .kzf-portales a {
    min-height: 38px;
    padding: 0 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50px;
  }
  footer.kzf .kzf-contact ul { display: block; }
  footer.kzf .kzf-contact li { margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
  footer.kzf .kzf-contact li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  footer.kzf .kzf-contact li > a,
  footer.kzf .kzf-contact li > div { align-items: center; padding: 0.75rem 0; }
  .kzf-bottom { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* El pie antiguo ocultaba los iconos de los enlaces de listas (footer ul li a i
   { opacity: 0 }, para revelar una flecha al pasar el ratón). En el nuevo se ven. */
footer.kzf ul li a i { opacity: 1; }
footer.kzf .kzf-social a i { font-size: 1rem; }
footer.kzf .kzf-contact li > a i { font-size: 0.8rem; }
footer.kzf .kzf-legal a { display: inline-flex; align-items: center; min-height: 32px; }

/* Teléfono: más compacto. "Compañía" en 2 columnas y "Soluciones" oculta (sus 4
   enlaces llevan a la misma sección de servicios, que ya está en el menú). */
@media (max-width: 575.98px) {
  .kzf-col:not(.kzf-portales):not(.kzf-contact) { grid-column: 1 / -1; }
  footer.kzf nav[aria-labelledby="kzf-h-soluciones"] { display: none; }
  footer.kzf nav[aria-labelledby="kzf-h-compania"] ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
  footer.kzf .kzf-col h3 { margin-bottom: 0.6rem; }
}
/* Red social aún sin dirección: el icono se ve igual pero no es enlace */
footer.kzf .kzf-social-pend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  cursor: default;
}

/* Tablet (576–991): Compañía · Soluciones · Portales en 3 columnas (con 2, Portales
   quedaba sola y media fila vacía) y enlaces con altura táctil. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .kzf-main { grid-template-columns: repeat(3, 1fr); }
  .kzf-brand, .kzf-contact { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
  footer.kzf .kzf-col li { margin-bottom: 0.15rem; }
  footer.kzf .kzf-col a { min-height: 36px; }
}

/* El botón flotante de Kaizen AI (abajo a la derecha) existe en todos los anchos:
   hueco bajo la barra legal para que nunca tape "Política de Tratamiento de Datos". */
.kzf-bottom { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
.kzf-cta-title { text-wrap: balance; }

/* Menú con "Portafolio" (2026-10-06): entre 1200 y 1399 px el contenedor de Bootstrap
   mide 1140 px y "Talento Humano" se partía en dos líneas. Menos aire lateral en ese
   rango y enlaces que nunca se parten (verificado: cabe con 37 px libres junto al logo). */
.navbar-dark .navbar-nav .nav-link { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar-dark .navbar-nav .nav-link { padding-left: .62rem; padding-right: .62rem; }
  .navbar-dark .navbar-nav .nav-link:hover::before,
  .navbar-dark .navbar-nav .nav-link.active::before { width: calc(100% - 1.24rem); }
}

/* =============================================================================
   PORTAFOLIO pfi — presentación en el inicio (2026-10-06)
   Sección clara con el azul y la "malla de puntos" del portafolio (portafolio.php), para
   que se reconozca como tal y para romper la sucesión de secciones oscuras
   (Servicios y el mapa). Cifras y líneas salen de includes/portafolio_resumen.php.
   ============================================================================= */
#portafolio-intro.pfi {
  position: relative;
  padding: 5.5rem 0;
  color: #0C1826;
  background:
    radial-gradient(rgba(0, 74, 173, .11) 1px, transparent 1.3px) 0 0 / 22px 22px,
    linear-gradient(180deg, #F6F8FC 0%, #EEF3FA 100%);
  border-top: 1px solid #D8E2F0;
  border-bottom: 1px solid #D8E2F0;
}
.pfi-caja {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.25rem;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
/* Las columnas de la rejilla pueden estrecharse por debajo de su contenido: si no, los
   ejemplos de cada línea (una sola línea con "…") ensanchaban la columna a 528 px en móvil. */
.pfi-caja > * { min-width: 0; }
.pfi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.1rem;
  color: #004AAD;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.pfi-eyebrow::before { content: ""; width: 26px; height: 2px; background: #004AAD; }
#portafolio-intro h2 {
  margin: 0 0 1rem;
  color: #0C1826;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
#portafolio-intro h2 span { color: #004AAD; }
.pfi-lead { max-width: 56ch; margin: 0 0 1.6rem; color: #3C4E64; font-size: 1.05rem; line-height: 1.65; }
.pfi-datos {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 1.75rem;
  margin: 0 0 1.8rem;
  padding: 1.1rem 0;
  border-top: 1px solid #D8E2F0;
  border-bottom: 1px solid #D8E2F0;
}
.pfi-datos dt { color: #004AAD; font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.pfi-datos dd { margin: .2rem 0 0; color: #6A7C93; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; }
.pfi-btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.pfi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.5rem;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
#portafolio-intro .pfi-btn--primario { background: #004AAD; border: 1px solid #004AAD; color: #fff; }
#portafolio-intro .pfi-btn--primario:hover,
#portafolio-intro .pfi-btn--primario:focus-visible { background: #00337A; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px -10px #004AAD; }
#portafolio-intro .pfi-btn--sec { background: #fff; border: 1px solid #D8E2F0; color: #004AAD; }
#portafolio-intro .pfi-btn--sec:hover,
#portafolio-intro .pfi-btn--sec:focus-visible { border-color: #004AAD; color: #004AAD; }

.pfi-lineas { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin: 0; padding: 0; list-style: none; }
#portafolio-intro .pfi-lineas a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  padding: .9rem 1.1rem;
  border: 1px solid #D8E2F0;
  border-radius: 13px;
  background: #fff;
  color: #0C1826;
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
#portafolio-intro .pfi-lineas a::before {          /* filete azul al pasar, como las fichas del portafolio */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #004AAD;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s ease;
}
#portafolio-intro .pfi-lineas a:hover,
#portafolio-intro .pfi-lineas a:focus-visible { border-color: #004AAD; color: #0C1826; transform: translateX(3px); box-shadow: 0 12px 28px -16px rgba(12, 24, 38, .3); }
#portafolio-intro .pfi-lineas a:hover::before,
#portafolio-intro .pfi-lineas a:focus-visible::before { transform: scaleY(1); }
.pfi-n {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9px;
  background: #E2EDFF;
  color: #004AAD;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .85rem;
  font-weight: 700;
}
.pfi-txt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pfi-nombre { font-size: .98rem; font-weight: 700; line-height: 1.25; }
.pfi-ej { overflow: hidden; color: #6A7C93; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
#portafolio-intro .pfi-lineas i { color: #9AAAC0; font-size: .8rem; transition: color .25s ease, transform .25s ease; }
#portafolio-intro .pfi-lineas a:hover i { color: #004AAD; transform: translateX(3px); }

@media (max-width: 991.98px) {
  .pfi-caja { grid-template-columns: 1fr; gap: 2.25rem; }
}
@media (max-width: 575.98px) {
  #portafolio-intro.pfi { padding: 4rem 0; }
  .pfi-datos { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .pfi-btn { width: 100%; }
  .pfi-lineas a { padding: .75rem .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pfi-btn, #portafolio-intro .pfi-lineas a, #portafolio-intro .pfi-lineas a::before, #portafolio-intro .pfi-lineas i { transition: none; }
}