/* ── VARIABLES ── */
:root {
  /* COLORES DE MARCA */
  --navy: #007E9A;
  --cyan: #00B3BD;
  --sky: #83bf4c;
  --muted: #727376;
  --white: #fefefe;
  /* COLORES DE MARCA */

  --text: #0f172a;
  --light: #94a3b8;
  --navy-light: #0094b5;
  
  --sky-light: #eef6e6;

  --border: #e2e8f0;
  --dark-border: rgba(255, 255, 255, 0.1);

  --radius-full: 999px;
  --radius-lg: 20px;
  --radius: 16px;
  --radius-sm: 8px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 10px 25px -3px rgb(0 11 51 / 0.08), 0 4px 6px -4px rgb(0 11 51 / 0.04);
}

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

/* ══════════════════════════════════════════════
   BARRA DE DESPLAZAMIENTO PERSONALIZADA
══════════════════════════════════════════════ */

/* 1. Para navegadores basados en WebKit (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
  width: 14px;
}

/* El "carril" por donde baja la barra */
::-webkit-scrollbar-track {
  background: var(--sky-light);
  border-radius: 8px;
}

/* La barra móvil en sí misma */
::-webkit-scrollbar-thumb {
  background-color: var(--sky); 
  border-radius: 20px; 
  border: 4px solid var(--sky-light); 
}

/* Cuando le pasas el mouse por encima a la barra */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--navy); 
}

/* 2. Para Firefox (Usa un estándar diferente y más simple) */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--sky) var(--sky-light); 
}

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

body {
  background: var(--white);
  color: var(--text);
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  /* Fredoka Medium as requested */
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: -0.01em;
  border: none;
  text-decoration: none;
}

.btn-nav-ghost {
  background: transparent;
  color: var(--muted);
}

.btn-nav-ghost:hover {
  background: rgba(0, 179, 189, 0.1);
  color: var(--navy);
}

/* 1. Preparar el botón para contener el destello */
.btn-primary {
  position: relative;
  overflow: hidden; /* VITAL: Evita que el destello se salga de los bordes curvos */
  background: linear-gradient(110deg, var(--navy) 0%, var(--cyan) 50%, #000000 100%);
  color: var(--white);
  /* Aseguramos que el botón no se deforme */
  z-index: 1; 
}

/* 2. Crear el "rayo de luz" invisible */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%; /* Arranca bien escondido a la izquierda */
  width: 50%; /* El grosor del rayo de luz */
  height: 100%;
  
  /* El degradado que simula el cristal/luz brillante */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  
  transform: skewX(-25deg); /* Lo inclinamos 25 grados para que sea aerodinámico */
  z-index: 2; /* Pasa por encima del fondo del botón */
}

/* 3. Disparar el destello al pasar el mouse */
.btn-primary:hover::after {
  animation: shine-effect 3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 4. El motor de la animación (Recorrido) */
@keyframes shine-effect {
  0% {
    left: -150%;
  }
  100% {
    left: 200%; /* Termina del otro lado, perdiéndose a la derecha */
  }
}

.btn-blue {
  background: var(--cyan);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 179, 189, 0.2);
}

.btn-blue:hover {
  background: #0094b5;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 179, 189, 0.25);
}

.btn-white {
  background: white;
  color: var(--navy);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.btn-white:hover {
  background: var(--white);
  transform: translateY(-1px);
}
/* ══════════════════════════════
   HERO 
══════════════════════════════ */
.hero {
  min-height: 100vh;
  padding: 120px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;  
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('assets/hero/resonador.webp') center/cover no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('assets/hero/Diagnostico.webp') center/cover no-repeat;
  z-index: 1;
  opacity: 0;
  animation: fade-img2 9s infinite;
}

.hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('assets/hero/Diagnostico2.webp') center/cover no-repeat;
  z-index: 2;
  opacity: 0;
  animation: fade-img3 9s infinite;
}

@keyframes fade-img2 {
  0%, 22% { opacity: 0; }
  33%, 88% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fade-img3 {
  0%, 55% { opacity: 0; }
  66%, 88% { opacity: 1; }
  100% { opacity: 0; }
}

.hero-content {
  max-width: 800px;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

.hero-title em {
  font-style: normal;
  color: var(--cyan);
}

.hero-sub {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  color: var(--text);
  line-height: 1.6;
  margin-top: 1rem;
  margin-bottom: 2.5rem;
  max-width: 600px;
}

.hero-actions {
  display: flex;
  margin-top: 20px;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 3rem;
}

/* ══════════════════════════════
   BANNER PRINCIPAL DEL HERO
══════════════════════════════ */
.hero-main-banner {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
  z-index: 10;
  width: 80%;
  max-width: 1400px;
  height: 200px;
  margin-top: 100px;   
  background: linear-gradient(110deg, var(--navy) 0%, var(--cyan) 50%, #000000 100%);
  border-radius: 2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  padding: 0 2rem;
}

.banner-item {
  flex: 1;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white); 
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 0 1rem;
}

.banner-item.slogan-text {
  flex: 1.5;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--white); 
}

.banner-item.slogan-text span {
  font-weight: 400;
  color: #00FFFF;
  font-size: 1.3rem;
  margin: 0 0.3rem;
}

.banner-divider {
  width: 2px;
  height: 80px; 
  background: rgba(255, 255, 255, 0.2); 
  border-radius: 2px;
}

@media (max-width: 968px) {
  .hero-main-banner {
    width: 95%; 
    height: auto;
    min-height: 200px;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem 1.5rem;
    border-radius: 1.5rem;
  }
  
  .banner-divider {
    width: 100px;
    height: 2px;
  }
  
  .banner-item.slogan-text {
    font-size: 1.4rem;
  }
}

@media (max-height: 860px) {
  .hero-main-banner {
    margin-bottom: 30px;
  }
}

/* ══════════════════════════════
   LOGO CAROUSEL
══════════════════════════════ */
.carousel-section {
  background: var(--white);
  padding: 3rem 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.carousel-label {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--light);
  margin-bottom: 2rem;
}

.carousel-track-wrap {
  overflow: hidden;
  position: relative;
}

/* Gradientes a los lados para fade effect */
.carousel-track-wrap::before,
.carousel-track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
}

.carousel-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.carousel-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

.carousel-track {
  display: flex;
  gap: 4rem;
  width: max-content;
  align-items: center;
  animation: carousel-slide 30s linear infinite;
}

.carousel-track:hover {
  animation-play-state: paused;
}

.carousel-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity .3s, transform .3s;
}

.carousel-item:hover {
  opacity: 1;
  transform: scale(1.05);
}

.carousel-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sky-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
}

.carousel-dot svg {
  width: 14px;
  height: 14px;
}

@keyframes carousel-slide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ══════════════════════════════
   SECCIONES — GENERAL
══════════════════════════════ */
.section {
  padding: 6rem 20px;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section-alt {
  background: var(--white);
}

.section-header {
  max-width: 600px;
  margin-bottom: 4rem;
}

.section-header.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 700px;
}

.eyebrow {
  font-size: 0.85rem;
  color: var(--cyan);
  font-weight: 700;
  margin-bottom: 1rem;
  display: inline-block;
  background: var(--sky-light);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
}

.section-title {
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 1rem;
}

.section-title em {
  font-style: normal;
  color: var(--cyan);
}

.section-sub {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Counters row - Adaptado a Sección Intermedia */
.counters-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9rem;
  /* Eliminamos el border-top y el padding-top que tenía antes */
}

.counter-item {
  text-align: center;
}

.counter-num {
  font-size: 76px; /* 20px más grande que el tamaño anterior */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Fuente seria y corporativa */
  font-weight: 800;
  color: #000000; /* Color negro absoluto */
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; /* Evita que los números "salten" horizontalmente al animarse */
  white-space: nowrap; /* Evita que los números largos pasen a otra línea */
  min-height: 76px;
}

.counter-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
}

/* ══════════════════════════════════════════════
   EQUIPO (REWORK INTERACTIVO Y MODAL)
══════════════════════════════════════════════ */
.team-section-rework {
  position: relative;
  overflow: visible;
  background: var(--white);
}

/* 1. FONDO TECNOLÓGICO Y ORBES */
.team-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none; /* Deja pasar los clicks a las tarjetas */
}

.team-orbs {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0; 
  pointer-events: none;
}

.t-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; transform: translateZ(0); }
.t-orb-1 { width: 350px; height: 550px; background: var(--sky); top: -15%; left: -10%; animation: float-ambient 20s ease-in-out infinite alternate; }
.t-orb-2 { width: 300px; height: 300px; background: var(--sky); bottom: -10%; right: -5%; animation: float-ambient 25s ease-in-out infinite alternate-reverse; }
.t-orb-3 { width: 350px; height: 350px; background: var(--navy-light); top: -5%; left: 75%; animation: float-ambient 22s ease-in-out infinite alternate; }
.t-orb-4 { width: 350px; height: 350px; background: var(--navy-light); top: 60%; left: 5%; animation: float-ambient 22s ease-in-out infinite alternate; }

.relative-z {
  position: relative;
  z-index: 10;
}

/* 2. TARJETAS DE EQUIPO */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.team-card {
  /* Al restar el gap y dividir por 3, forzamos 3 tarjetas arriba y el resto se centra abajo */
  width: calc((100% - 3rem) / 3); 
  
  background: rgba(255, 255, 255, 0.85); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all .3s;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
}

.team-card:hover {
  box-shadow: 0 20px 40px rgba(0, 11, 51, 0.08);
  transform: translateY(-5px);
  border-color: var(--cyan);
}

.team-avatar-wrap {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  border: 3px solid var(--sky-light);
  overflow: hidden;
  box-shadow: 0 0px 20px rgba(100, 100, 100, 0.08);
  transition: transform 0.3s ease;
}

.team-card:hover .team-avatar-wrap {
  transform: scale(1.08);
  border-color: var(--cyan);
}

.team-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.team-role {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
}

.team-bio {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 1.5rem;
  flex-grow: 1; /* Empuja el botón siempre hacia abajo */
}

.btn-more-info {
  width: 100%;
  border: 1px solid var(--border);
  background: white;
}

/* 3. MODAL OSCURO (ESTILO PREMIUM) */
.team-modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 11, 30, 0.85); /* Fondo muy oscuro, casi azul marino */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  
  /* Animación de entrada */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

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

.team-modal-card {
  background: var(--white);
  width: 100%;
  max-width: 800px;
  border-radius: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
  
  /* Animación de salto de la tarjeta */
  transform: translateY(40px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.team-modal-overlay.active .team-modal-card {
  transform: translateY(0) scale(1);
}

.team-modal-close {
  position: absolute;
  top: 15px; right: 20px;
  background: none; border: none;
  font-size: 2.5rem;
  color: var(--light);
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  transition: color 0.2s;
}

.team-modal-close:hover { color: var(--navy); }

.team-modal-layout {
  display: flex;
}

.team-modal-left {
  width: 40%;
}

.team-modal-img {
  width: 100%;
  height: 100%;
  min-height: 350px;
  object-fit: cover;
}

.team-modal-right {
  width: 60%;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
}

.team-modal-name {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.team-modal-role {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cyan);
  display: block;
  margin-bottom: 0.5rem;
}

.team-modal-mp {
  font-size: 0.85rem;
  color: var(--light);
  font-weight: 600;
}

.team-modal-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

.modal-body-info h4 {
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 0.8rem;
}

.team-modal-bio {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}

@media (max-width: 968px) {
  .counters-row {
    grid-template-columns: repeat(2, 1fr); /* 2 arriba y 2 abajo */
    gap: 5rem 2rem; /* Reduce la separación gigante */
  }
}

@media (max-width: 768px) {
  /* Reemplaza la línea antigua de .team-grid por esta: */
  .team-card { width: calc((100% - 1.5rem) / 2); } /* 2 tarjetas por fila */
  
  .team-modal-card { max-height: 85vh; overflow-y: auto; }
  .team-modal-layout { flex-direction: column; }
  .team-modal-left { width: 100%; height: 250px; flex-shrink: 0; }
  .team-modal-img { min-height: 250px; }
  .team-modal-right { width: 100%; padding: 2rem 1.5rem; }
  .team-modal-name { font-size: 1.5rem; }

  .counters-row {
    grid-template-columns: 1fr; 
    gap: 3.5rem; 
  }
  
  .counter-num {
    font-size: 60px; 
    min-height: 60px;
  }
}

@media (max-width: 480px) {
  /* Reemplaza la línea antigua de .team-grid por esta: */
  .team-card { width: 100%; } /* 1 tarjeta por fila */
}

/* ══════════════════════════════
   FAQ — ACORDEÓN
══════════════════════════════ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all .3s;
}

.faq-item:hover {
  border-color: var(--light);
}

.faq-item.open {
  border-color: var(--cyan);
  box-shadow: 0 4px 12px rgba(0, 179, 189, 0.1);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  user-select: none;
}

.faq-chevron {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--cyan);
  background: var(--sky-light);
  border-radius: 50%;
  padding: 4px;
  transition: transform .3s, background .3s, color .3s;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  background: var(--cyan);
  color: white;
}

.faq-answer {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .4s ease;
  padding: 0 1.5rem;
}

.faq-item.open .faq-answer {
  max-height: 400px;
  padding-bottom: 1.5rem;
}

/* ══════════════════════════════
   CTA OSCURO (Footer superior)
══════════════════════════════ */
.cta-dark {
  background: var(--navy);
  padding: 6rem 20px;
  position: relative;
  overflow: hidden;
}

/* Gradientes de fondo para darle el look DocShield */
.cta-dark::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 60%;
  height: 200%;
  pointer-events: none;
}

.cta-dark::after {
  content: '';
  position: absolute;
  bottom: -50%;
  right: -10%;
  width: 50%;
  height: 150%;
  background: radial-gradient(circle, rgba(131, 191, 76, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.cta-dark-inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-title {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.cta-sub {
  font-size: 1.2rem;
  color: var(--white);
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 600px;
}

/* ══════════════════════════════
   ANIMACIONES
══════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}



/* ══════════════════════════════════════════════
   TESTIMONIOS — ESTILO DOCSHIELD
══════════════════════════════════════════════ */
.testi-ds-section {
  position: relative;
  background: var(--white); /* Fondo blanco */
  height: 450vh; /* Permite hacer scroll mientras la sección está anclada */
  padding: 0; 
}

.testi-slogan-reveal {
  position: absolute;
  top: 70%; /* Lo bajamos para que quede siempre debajo del logo */
  left: 50%;
  /* Viaje más corto y menos borroso */
  transform: translate(-50%, -50%) translateY(100px) scale(0.6);
  opacity: 0;
  filter: blur(8px); /* Bajamos el blur drásticamente */
  
  font-size: clamp(3rem, 6vw, 10rem); 
  font-weight: 200;
  color: var(--navy);
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.04em;
  z-index: 10;
  pointer-events: none;
  
  will-change: transform, opacity, filter;
}

.testi-slogan-reveal span {
  color: var(--cyan);
  font-weight: 400;
}

/* Este contenedor se queda pegado en la pantalla mientras bajamos */
.testi-ds-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Logotipo gigante de fondo, detrás de las tarjetas */
.testi-ds-bg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw; 
  max-width: 1100px; 
  min-width: 320px;
  
  opacity: 1; 
  pointer-events: none;
  user-select: none;
  z-index: 1; 
  image-rendering: -webkit-optimize-contrast; 
  will-change: opacity, transform;
}

/* La pista 3D (Ocupa todo el espacio, perspectiva 3D) */
.testi-ds-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 1500px;
  transform-style: preserve-3d;
  z-index: 2;
  overflow: hidden;
}

/* Las tarjetas ahora parten del centro de forma absoluta */
.testi-ds-card {
  position: absolute;
  top: 50%;
  left: 50%;
  /* El translate inicial lo manejará el JS */
  background: var(--white);
  border-radius: 20px;
  padding: 3rem 2rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  width: 466px;   /* Medida exacta solicitada */
  height: 320px;  /* Medida exacta solicitada */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--border);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform, opacity, filter;
}

.testi-ds-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  border-color: var(--sky-light);
}

.testi-ds-quote {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text);
  font-weight: 500;
  margin: 0;
}

.testi-ds-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testi-ds-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sky-light);
  color: var(--cyan);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testi-ds-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}

.testi-ds-role {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Ajustes Responsive */
@media (max-width: 768px) {
  .testi-ds-card {
    width: 320px; /* Un poco más chicas en móviles para mejor UX */
    height: 350px;
  }

  .testi-slogan-reveal {
    white-space: normal; 
    width: 95vw; /* Le da un límite de ancho para que no toque los bordes */
    font-size: clamp(2.5rem, 13vw, 4rem); /* Letra matemáticamente adaptada al ancho del celu */
    line-height: 1.1; /* Aprieta un poquito los renglones para que se vea más como un bloque sólido */
  }

}


/* ══════════════════════════════════════════════
   BANNER INTERMEDIO (MORPHING AI SEQUENCE)
══════════════════════════════════════════════ */

/* 1. CONTENEDOR PRINCIPAL */
.morph-section {
  position: relative;
  width: 95%;
  margin: 0 auto;
  max-width: 1550px;
  min-height: 700px;
  border-radius: 2.5rem;
  background: linear-gradient(to bottom, 
    rgba(0, 126, 154, 0) 0%, 
    rgba(0, 126, 154, 0.1) 15%,
    rgba(0, 126, 154, 0.8) 45%,
    #007E9A 60%
  );
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.morph-scene {
  position: absolute; /* Cambiado de relative a absolute */
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: 1550px;
  margin: 0 auto;
}

/* 2. EL ORBE DE LUZ */
.morph-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 179, 189, 0.4) 0%, rgba(0, 126, 154, 0) 70%);
  border-radius: 50%;
  opacity: 0.5;
  transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.morph-section.is-searching .morph-orb {
  transform: translate(-50%, -50%) scale(1.5);
  opacity: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(0, 179, 189, 0) 70%);
}

/* 3. PÍLDORAS FLOTANTES PERIFÉRICAS */
.float-pill {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--navy);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0;
  
  /* El secreto: Separamos el centrado de la animación de escala/movimiento */
  translate: -50% -50%;
  transform: scale(0.8) translateY(0);
  
  /* Optimizamos la transición para que no choque con la animación infinita */
  transition: opacity 1.2s ease, top 1.2s ease, left 1.2s ease;
  
  white-space: nowrap; 
  letter-spacing: 0.02em;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  
  /* Le avisa a la placa de video que reserve memoria para este movimiento */
  will-change: transform, opacity;
}

/* Posiciones Iniciales */
.fp-1, .fp-2, .fp-3, .fp-4, .fp-5, .fp-6 { top: 50%; left: 50%; }

/* Animaciones 100% procesadas por la Tarjeta Gráfica (GPU) */
@keyframes float-up {
  0% { transform: scale(1) translateY(12px); }
  100% { transform: scale(1) translateY(-12px); }
}

@keyframes float-down {
  0% { transform: scale(1) translateY(-12px); }
  100% { transform: scale(1) translateY(12px); }
}

/* Coreografía de Búsqueda (100% Aceleración GPU) */
.morph-section.is-searching .fp-1 { top: 25%; left: 25%; opacity: 0.6; animation: float-up 4s ease-in-out infinite alternate; }
.morph-section.is-searching .fp-2 { top: 75%; left: 30%; opacity: 0.5; animation: float-down 5s ease-in-out infinite alternate; }
.morph-section.is-searching .fp-3 { top: 20%; left: 75%; opacity: 0.7; animation: float-up 6s ease-in-out infinite alternate; }
.morph-section.is-searching .fp-4 { top: 70%; left: 70%; opacity: 0.4; animation: float-down 4.5s ease-in-out infinite alternate; }
.morph-section.is-searching .fp-5 { top: 50%; left: 15%; opacity: 0.5; animation: float-up 5.5s ease-in-out infinite alternate; }
.morph-section.is-searching .fp-6 { top: 50%; left: 85%; opacity: 0.6; animation: float-down 4.8s ease-in-out infinite alternate; }

/* 4. LA TARJETA MUTANTE (CONTENEDOR) */
.morph-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              height 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              border-radius 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              background 0.8s ease;
}

/* 5. ESTADOS DE LA TARJETA MUTANTE */
.morph-card.state-loading {
  width: 280px;
  height: 140px;
  border-radius: 20px;
}

.morph-card.state-pill {
  width: 240px;
  height: 60px;
  border-radius: 50px;
  background: rgba(0, 179, 189, 0.3);
  border-color: rgba(0, 179, 189, 0.6);
}

.morph-card.state-final {
  width: 90%; 
  max-width: 580px; 
  height: 420px; 
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
  box-shadow: 0 30px 60px rgba(0,0,0,0.3), inset 0 0 20px rgba(255,255,255,0.05);
}

/* 6. CONTENIDOS INTERNOS DE LA TARJETA */
.mc-content {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none; /* Bloquea interacciones permanentemente */
  transition: opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mc-content.active {
  opacity: 1;
  pointer-events: none; 
  transition-delay: 0.4s; 
}

/* 6A. Detalles Loading */
.mc-loading { padding: 2rem; }
.mc-header { display: flex; justify-content: space-between; color: white; font-weight: 600; margin-bottom: 2rem; font-size: 1.1rem; }
.mc-header svg { width: 24px; height: 24px; animation: spin 2s linear infinite; }
.mc-bar-track { width: 100%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 10px; overflow: hidden; }
.mc-bar-fill { width: 0%; height: 100%; background: #00B3BD; animation: load-bar 2s ease-in-out forwards; }

/* 6B. Detalles Píldora */
.mc-pill { align-items: center; color: white; font-weight: 700; font-size: 1.1rem; }

/* 6C. Detalles Finales (Efecto Cascada Smooth) */
.mc-final { 
  padding: 3rem; 
  align-items: center; 
  text-align: center; 
}

/* Elementos ocultos e inicialmente desplazados hacia abajo */
.mc-final > * {
  opacity: 0;
  transform: translateY(20px); 
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Elementos subiendo y apareciendo al activarse */
.mc-content.active.mc-final > * {
  opacity: 1;
  transform: translateY(0);
}

/* Retrasos escalonados para la cascada visual */
.mc-content.active.mc-final .eyebrow-light { transition-delay: 0.4s; }
.mc-content.active.mc-final .banner-card-title { transition-delay: 0.55s; }
.mc-content.active.mc-final .banner-card-sub { transition-delay: 0.7s; }
.mc-content.active.mc-final .banner-card-actions { transition-delay: 0.85s; }

/* 7. ANIMACIONES CLAVE */
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes load-bar { 100% { width: 100%; } }

/* 8. RESPONSIVE BÁSICO */
@media (max-width: 768px) {
  .morph-section { width: 100% !important; min-height: 600px; border-radius: 1.5rem; }
  .morph-card.state-final { height: 450px; padding: 2rem; width: 95%; }
  .float-pill { display: none; }
}

/* ══════════════════════════════════════════════
   TARJETA DE CONFIANZA (DEGRADADO INVERTIDO)
══════════════════════════════════════════════ */
.trust-wrapper {
  padding: 2rem 20px 0 20px;
  display: flex;
  justify-content: center;
}

.trust-card {
  position: relative;
  width: 95%;
  max-width: 1550px;
  min-height: 700px;
  border-radius: 2.5rem;
  background: linear-gradient(to bottom, 
    #007E9A 20%, 
    rgba(0, 126, 154, 0.8) 50%,
    rgba(0, 126, 154, 0.1) 85%,
    rgba(255, 255, 255, 0) 100%
  );  
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* INTERACCIONES DEL BOTÓN TRUST CARD
1. Efecto Hover: Cambio a color Navy */
.trust-content .btn-white {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.trust-content .btn-white:hover {
  background-color: var(--navy); /* Cambio al azul corporativo #007E9A */
  color: var(--white);
  /* Activamos el latido infinito y suave mientras el mouse esté encima */
  animation: heartbeat-hover 1.2s infinite ease-in-out;
}

/* 2. Animación del latido (palpitar) */
@keyframes heartbeat-hover {
  0% { 
    transform: translateY(-2px) scale(1); 
    box-shadow: 0 8px 25px rgba(0, 126, 154, 0.4); 
  }
  50% { 
    transform: translateY(-2px) scale(1.04); /* Se expande un 4% */
    box-shadow: 0 12px 35px rgba(0, 126, 154, 0.6); /* Brilla más fuerte */
  }
  100% { 
    transform: translateY(-2px) scale(1); 
    box-shadow: 0 8px 25px rgba(0, 126, 154, 0.4); 
  }
}

/* Esta clase se la agregaremos por JavaScript al hacer clic */
.btn-palpitate {
  animation: palpitate 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Escenario absoluto para que las píldoras no deformen la tarjeta */
.trust-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* El usuario no puede clickearlas */
}

/* Reutilizamos el estilo visual de .float-pill, pero las posicionamos distinto */
.trust-scene .float-pill {
  opacity: 0.8; /* Siempre visibles en esta tarjeta */
  transform: scale(1) translateY(0);
}

/* Distribución con motores de video (GPU) y tiempos ultra-smooth */
.tp-1 { top: 20%; left: 15%; animation: float-up 10s ease-in-out infinite alternate; }
.tp-2 { top: 70%; left: 20%; animation: float-down 9s ease-in-out infinite alternate; }
.tp-3 { top: 30%; left: 80%; animation: float-up 12s ease-in-out infinite alternate; }
.tp-4 { top: 80%; left: 75%; animation: float-down 11s ease-in-out infinite alternate; }
.tp-5 { top: 15%; left: 50%; animation: float-up 8s ease-in-out infinite alternate; }
.tp-6 { top: 85%; left: 50%; animation: float-down 13s ease-in-out infinite alternate; }
.tp-7 { top: 50%; left: 10%; animation: float-up 8.5s ease-in-out infinite alternate; }

/* Contenido Central */
.trust-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 700px;
  padding: 2rem;
}

.trust-title {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.trust-sub {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2.5rem;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════
   MINI SECCIÓN INTERMEDIA
══════════════════════════════════════════════ */
.mini-section {
  text-align: center;
  padding: 7rem 20px 7rem 20px;
  max-width: 800px;
  margin: 0 auto;
}

.mini-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.mini-desc {
  font-size: 1.1rem;
  color: var(--muted);
}

@media (max-width: 928px) {
  /* La tarjeta de confianza vuelve al 100% (conservando los 20px de margen de su wrapper) */
  .trust-card {
    width: 100%;
  }
  
  /* El morph-section vuelve al 100% pero le restamos 40px (20px de cada lado) 
     para que tenga el mismo margen visual que la otra tarjeta */
  .morph-section {
    width: calc(100% - 40px);
  }
}

/* Responsividad */
@media (max-width: 768px) {
  .trust-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
  .trust-card {
    width: 100%;
    min-height: 500px;
    border-radius: 1.5rem;
  }
  .trust-title {
    font-size: 2rem;
  }
  
  .mini-title {
    font-size: 1.5rem;
  }
  /* Ocultamos algunas píldoras en móviles para no asfixiar la lectura */
  .tp-1, .tp-3, .tp-5, .tp-7 { display: none; }
}

/* ══════════════════════════════════════════════
   DECORACIONES DE TESTIMONIOS (CRUCES VIVAS)
══════════════════════════════════════════════ */
.testi-deco-wrapper {
  position: absolute;
  z-index: 1; 
  pointer-events: none; 
  width: 160px; /* TAMAÑO MODIFICABLE */
  
  /* ESTADO INICIAL (Ocultas antes de que el usuario llegue) */
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.2s ease;
  
  /* Aura de luz para hacerlas mucho más imponentes */
  filter: drop-shadow(0 15px 25px rgba(0, 179, 189, 0.4));
  will-change: transform, opacity;
}

/* 1. POSICIONES Y ESTADOS DE ENTRADA */
.wrapper-tl {
  top: 10%;
  left: 8%;
  transform: translateY(-150px); /* Empieza 150px más arriba (escondida) */
}

.wrapper-br {
  bottom: 10%;
  right: 8%;
  transform: translateY(150px); /* Empieza 150px más abajo (escondida) */
}

/* 2. ESTADO ACTIVO (Cuando el JS detecta que el usuario llegó) */
.testi-deco-wrapper.active {
  opacity: 0.95; /* Color súper fuerte y vivo (casi 100%) */
  transform: translateY(0); /* Aterrizan en su posición original */
}

/* 3. FLOTACIÓN CONTINUA INDEPENDIENTE (Efecto Mantequilla) */
.testi-deco-img {
  width: 100%;
  height: auto;
  will-change: transform;
}

.img-tl {
  /* Flota usando un motor suave independiente */
  animation: float-up 6s ease-in-out infinite alternate;
}

.img-br {
  /* Imagen invertida y flotando a otro ritmo para ser asimétrica */
  animation: float-down-flipped 7.5s ease-in-out infinite alternate;
}

/* Motor gráfico exacto para la imagen invertida sin romper el espejo */
@keyframes float-down-flipped {
  0% { transform: scale(-1, -1) translateY(-12px); }
  100% { transform: scale(-1, -1) translateY(12px); }
}

/* 4. RESPONSIVE */
@media (max-width: 768px) {
  .testi-deco-wrapper { 
    width: 100px; 
  }
  .testi-deco-wrapper.active {
    opacity: 0.6; /* Un poco más suaves en el celu para no tapar el texto */
  }
  .wrapper-tl { top: 5%; left: 2%; }
  .wrapper-br { bottom: 5%; right: 2%; }
}

/* ══════════════════════════════════════════════
   BARRA DE PROGRESO DE LECTURA (TARJETA FINAL)
══════════════════════════════════════════════ */
.mc-timeout-track {
  width: 100%;
  max-width: 250px; /* Tamaño sutil y centrado */
  height: 4px;
  background: rgba(255, 255, 255, 0.15); /* Riel translúcido */
  border-radius: 10px;
  margin: 1.5rem auto 0 auto; /* Separación desde el texto */
  overflow: hidden;
  
  /* Se suma al efecto cascada de aparición */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mc-content.active.mc-final .mc-timeout-track {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.85s; /* Aparece en último lugar, justo después del párrafo */
}

.mc-timeout-fill {
  width: 0%;
  height: 100%;
  background: var(--sky); /* El verde corporativo destaca muy bien sobre azul */
  border-radius: 10px;
  /* La animación se inyecta por JS para sincronizar el tiempo exacto */
}

@keyframes timeout-bar {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* ══════════════════════════════════════════════
   ESPECIALIDADES — REWORK (STICKY SCROLL ARCHITECTURE)
══════════════════════════════════════════════ */

.esp-rework-section {
  position: relative;
  background-color: var(--white);
  padding: 6rem 20px 8rem 20px;
}

.esp-rework-container {
  display: flex;
  gap: 3rem; 
  max-width: 1700px; /* Aumentamos el ancho total máximo de la sección */
  margin: 0 auto;
  align-items: flex-start; 
}

/* COLUMNA IZQUIERDA (CONTENEDOR DE IMAGEN) */
.esp-left-column {
  /* CAMBIO: Sumamos 50px de ancho base al contenedor (de 600px a 650px) */
  flex: 0 0 65%; 
  max-width: 950px; 
  
  position: sticky;
  top: 130px; 
  height: calc(100vh - 180px); 
  display: flex;
  align-items: center;
  justify-content: center;
}

.esp-sticky-images {
  position: relative;
  width: 100%;
  height: 100%;
  /* CAMBIO: Sumamos 20px de alto máximo (de 550px a 570px) */
  max-height: 670px; 
  background: var(--white);
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* ANIMACIÓN DE DESPLIEGUE GRADUAL DESDE ESQUINA SUPERIOR IZQUIERDA */
/* ANIMACIÓN: RECTÁNGULO DESDE ESQUINA SUPERIOR IZQUIERDA */
.esp-img {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  object-fit: cover;
  
  /* Comienza oculto en la esquina 0,0 (100% recortado derecha y abajo) */
  clip-path: inset(0 100% 100% 0);
  -webkit-clip-path: inset(0 100% 100% 0); /* Soporte para Safari */
  
  /* La duración que pediste: 2.5 segundos con curva fluida */
  transition: clip-path 2.5s cubic-bezier(0.25, 1, 0.5, 1), 
              -webkit-clip-path 2.5s cubic-bezier(0.25, 1, 0.5, 1);
  
  /* ⚠️ EL SECRETO DEL RENDIMIENTO: 
     Obligamos a la placa de video a renderizar esto en una capa 3D separada */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: clip-path;
}

/* Orden de capas estricto para que se superpongan */
.esp-img:nth-child(1) { z-index: 1; }
.esp-img:nth-child(2) { z-index: 2; }
.esp-img:nth-child(3) { z-index: 3; }
.esp-img:nth-child(4) { z-index: 4; }
.esp-img:nth-child(5) { z-index: 5; }
.esp-img:nth-child(6) { z-index: 6; }
.esp-img:nth-child(7) { z-index: 7; }
.esp-img:nth-child(8) { z-index: 8; }
/* Estado Activo: Se revela el rectángulo completo */
.esp-img.active {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* COLUMNA DERECHA */
.esp-right-column {
  flex: 1;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  position: relative; 
}

/* 1. LA CABECERA FIJA Y SU MÁSCARA */
.esp-sticky-header {
  position: sticky;
  top: 130px; 
  background-color: var(--white); 
  z-index: 10;
}

/* Este es el truco maestro: un "techo" blanco infinito arriba de la cabecera
   para tapar por completo los textos que scrollean hacia arriba */
.esp-sticky-header::before {
  content: "";
  position: absolute;
  bottom: 100%; /* Se dibuja desde el tope del header hacia arriba */
  left: 0;
  width: 100%;
  height: 150px; /* Altura exagerada para tapar toda la pantalla hacia arriba */
  background-color: var(--white);
  z-index: 10;
}

.esp-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}

.esp-fixed-label {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.08em;
  margin-bottom: 0.8rem;
}

/* El número dinámico animado */
.esp-number {
  font-size: clamp(4rem, 6vw, 5.5rem);
  font-weight: 200;
  color: var(--text);
  line-height: 0.8;
  margin-bottom: 0.8rem;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
}

.esp-divider {
  border: none;
  border-top: 1px solid var(--text);
  margin: 0;
  width: 100%;
  opacity: 0.15;
}

.esp-text-item {
  min-height: 85vh; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 0;
}

.esp-title {
  font-size: clamp(1.45rem, 2.3vw, 1.95rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.esp-desc {
  font-size: 1.25rem;
  color: var(--text); 
  line-height: 1.85;
  margin-bottom: 1rem;
}

.esp-desc-extra {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ELEMENTOS EXCLUSIVOS MÓVILES (Ocultos en computadora) */
.mobile-only-bg,
.mobile-only-header,
.mobile-card-img,
.mobile-only-btn {
  display: none;
}

/* REWORK CELULARES (DISEÑO GLASSMORPHISM + ORBES) */
@media (max-width: 968px) {
  
  /* 1. Apagamos el sistema Sticky de escritorio */
  .esp-left-column,
  .esp-sticky-header {
    display: none !important;
  }

  /* 2. Encendemos el fondo de Orbes y la cabecera */
  .esp-rework-section {
    background-color: #f8fafc;
    overflow: hidden;
    padding: 4rem 20px 5rem 20px;
  }

  .mobile-only-bg {
    display: block;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  .mobile-only-header {
    display: block;
    background: rgba(255, 255, 255, 0.75);
    padding: 2rem 1.5rem;
    border-radius: 2rem;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  }

  /* 3. Animación fluida de los orbes (exclusivo celular) */
  .esp-orb { position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.5; transform: translateZ(0); }
  .orb-1 { width: 350px; height: 350px; background: var(--cyan); top: 5%; left: -20%; animation: float-ambient 20s ease-in-out infinite alternate; }
  .orb-2 { width: 300px; height: 300px; background: var(--sky); top: 35%; right: -20%; animation: float-ambient 25s ease-in-out infinite alternate-reverse; }
  .orb-3 { width: 350px; height: 350px; background: var(--navy-light); top: 65%; left: -20%; animation: float-ambient 22s ease-in-out infinite alternate; }
  .orb-4 { width: 250px; height: 250px; background: #00C2CC; bottom: 5%; right: -10%; animation: float-ambient 18s ease-in-out infinite alternate-reverse; }

  @keyframes float-ambient {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 50px) scale(1.05); }
  }

  .relative-z {
    position: relative;
    z-index: 5; /* Eleva las tarjetas por sobre los orbes */
  }

  /* 4. Transformamos los textos simples en Tarjetas de Cristal */
  .esp-right-column {
    width: 100%;
  }

  .esp-text-item {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    padding: 2.5rem 1.5rem !important; /* Padding de tarjeta */
    border-radius: 1.5rem;
    box-shadow: 0 15px 35px rgba(0, 11, 51, 0.05);
    margin-bottom: 2rem;
    min-height: auto;
    
    /* Apagamos el motor de JavaScript forzando opacidad */
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }

  .esp-text-item:last-child {
    margin-bottom: 0;
  }

  /* 5. Imagen interna de la tarjeta de cristal */
  .mobile-card-img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  }

  .mobile-only-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--cyan);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.5rem 0 0 0;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: color 0.3s ease;
    font-family: inherit;
  }

  .mobile-only-btn:hover {
    color: var(--navy);
  }

  /* Ocultamos el párrafo extra por defecto en móvil */
  .esp-text-item .esp-desc-extra {
    display: none;
  }

  /* Cuando la tarjeta tiene la clase 'expanded', mostramos el texto con animación */
  .esp-text-item.expanded .esp-desc-extra {
    display: block;
    animation: fadeInText 0.4s ease forwards;
  }

  @keyframes fadeInText {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* RESPONSIVO PARA MÓVILES */
@media (max-width: 968px) {
  .esp-rework-container {
    flex-direction: column;
    gap: 0;
  }

  .esp-left-column {
    width: 100%;
    height: 300px;
    position: sticky;
    top: 64px;
    z-index: 100;
    padding-bottom: 1rem;
    background: var(--white);
    max-width: 100%;
  }

  .esp-sticky-images {
    max-height: 100%;
    border-radius: 1.25rem;
  }

  .esp-right-column {
    width: 100%;
    position: relative;
    z-index: 5;
  }

  .esp-sticky-header {
    top: 364px; /* 64px del menú navbar + 300px de la imagen pegajosa */
    padding-top: 1.5rem;
  }

  .esp-text-item {
    min-height: auto;
    padding: 3.5rem 0;
    border-bottom: 1px solid var(--border);
    opacity: 1;
    transform: none;
  }
  
  .esp-text-item:last-child {
    border-bottom: none;
  }
}

@media (max-width: 728px) {
  .esp-sticky-header::before {
    height: 300px;
    top: 130px; 
  }
}

/* ==========================================================================
   PÁGINA INDEPENDIENTE: NOSOTROS.HTML (Estilo Editorial Corporativo)
   ========================================================================== */

.about-page-body {
  background-color: var(--white);
}

.about-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 1. HERO DE LA PÁGINA SOBRE NOSOTROS */
.about-hero {
  min-height: 55vh;
  padding: 160px 0 4rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(213, 236, 241, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.about-hero-orbs {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

.a-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.25; }
.ab-orb-1 { width: 400px; height: 400px; background: var(--cyan); top: -10%; left: -5%; }
.ab-orb-2 { width: 350px; height: 350px; background: var(--sky); bottom: 10%; right: -5%; }

.about-hero-content {
  max-width: 850px;
  position: relative;
  z-index: 10;
  padding: 0 20px;
}

.about-hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.about-hero-title em {
  font-style: normal;
  color: var(--cyan);
}

.about-hero-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--muted);
  line-height: 1.6;
}
/* 2. ESTRUCTURA EDITORIAL ASIMÉTRICA */
.about-editorial-section {
  padding: 5rem 0;
  background: var(--white);
  position: relative;
  overflow: hidden;
}

/* IDEA C: ORBE NAVY FANTASMA */
.about-editorial-section::after {
  content: "";
  position: absolute;
  top: 20%; left: -10%;
  width: 600px; height: 600px;
  background: var(--navy);
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.05; /* Apenas un suspiro de color */
  pointer-events: none;
  z-index: 0;
}
.editorial-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 5rem;
  align-items: center;
}

.accent-pill-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.editorial-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.editorial-title em { font-style: normal; color: var(--cyan); }

.editorial-text {
  font-size: 1.1rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

/* TARJETA DE MÉTRICA DE HISTORIA (Glassmorphism Invertido) */
.history-metric-card {
  background: var(--sky-light);
  border: 1px solid rgba(0, 126, 154, 0.1);
  border-radius: 2.5rem;
  padding: 3.5rem 2.5rem;
  box-shadow: 0 15px 35px rgba(0, 126, 154, 0.04);
  text-align: center;
}

.metric-big-number {
  font-size: 5.5rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  font-family: system-ui, sans-serif;
  letter-spacing: -0.03em;
}

.metric-text-label {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cyan);
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

.metric-divider {
  border: none;
  border-top: 2px solid rgba(0, 126, 154, 0.1);
  margin: 1.5rem auto;
  width: 60px;
}

.metric-desc {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}

/* 3. GRID DE HITOS TECNOLÓGICOS */
.about-tech-milestones {
  padding: 6rem 0;
  background-color: #f8fafc;
  position: relative;
  overflow: hidden;
}

/* IDEA D: MARCA DE AGUA DE CRUCES */
.about-tech-milestones::before {
  content: "";
  position: absolute;
  top: -50px; right: -5%;
  width: 600px; height: 600px;
  background: url('assets/details/cruces-2.png') center/contain no-repeat;
  opacity: 0.03; /* Nivel marca de agua en billete */
  pointer-events: none;
  z-index: 0;
  transform: rotate(15deg); /* Inclinación dinámica */
}

.tech-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}

.tech-tile {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 1.8rem;
  padding: 3rem 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 11, 51, 0.02);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.tech-tile:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
}

.tile-icon-wrap {
  width: 50px;
  height: 50px;
  background: var(--sky-light);
  color: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.tech-tile h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
}

.tech-tile p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
}

.tech-footer-note {
  max-width: 900px;
  margin: 4rem auto 0;
  text-align: center;
  font-size: 1.1rem;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.7;
  background: rgba(255, 255, 255, 0.6);
  padding: 2rem;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
}

/* 4. BIO DEL DIRECTOR MÉDICO DR. HUGO GUERRA */
.legacy-director-section {
  padding: 7rem 0;
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.legacy-director-section::before {
  content: "";
  position: absolute;
  bottom: -15%; right: -10%;
  width: 800px; height: 800px;
  background: var(--navy);
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}



.legacy-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 5rem;
  align-items: flex-start;
}

.director-profile-card {
  position: sticky;
  top: 120px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.04);
}

.director-image-placeholder {
  width: 100%;
  height: 380px;
  background: #e2e8f0;
}

.director-real-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.director-meta-info {
  padding: 2rem 1.5rem;
  text-align: center;
}

.director-meta-info h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
}

.director-meta-info span {
  font-size: 0.9rem;
  color: var(--cyan);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 1.25rem;
}

.medal-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fffbeb;
  border: 1px solid #fef3c7;
  color: #d97706;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  line-height: 1.3;
}

.medal-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.legacy-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.legacy-title em { font-style: normal; color: var(--cyan); }

.legacy-lead {
  font-size: 1.2rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

/* LÍNEA DE TRAYECTORIA ACADÉMICA (Timeline Fina) */
.trayectory-timeline {
  position: relative;
  padding-left: 2rem;
  border-left: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.timeline-node {
  position: relative;
}

.timeline-node::before {
  content: "";
  position: absolute;
  left: calc(-2rem - 6px);
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--cyan);
}

.timeline-node h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.timeline-node p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
}

.legacy-footer-text {
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}

.legacy-right {
  flex: 1;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  position: relative; 
    background: rgba(131, 191, 76, 0.05); 
  border-radius: 10px;                  
  padding: 3.5rem 3rem;               
  border: 1px solid rgba(0, 126, 154, 0.07); 
  box-shadow: 0 15px 40px rgba(0, 11, 51, 0.02); 
}

@media (max-width: 1024px) {
  .editorial-grid,
  .legacy-layout {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  
  .director-profile-card {
    position: relative;
    top: 0;
    max-width: 450px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .tech-feature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .legacy-director-section::after {
    display: none;
  }
  
  .about-hero {
    padding-top: 120px;
    min-height: auto;
  }
  
  .tech-tile {
    padding: 2rem 1.5rem;
    position: relative;
  }

  .tech-tile .tile-icon-wrap {
    position: absolute;
    top: 1.5rem; 
    right: 1.5rem; 
    margin-bottom: 0;
  }

  .tech-tile h3 {
    padding-right: 55px; 
    min-height: 45px;
  }
  
  .tech-footer-note {
    margin-top: 2.5rem;
    padding: 1.5rem;
    font-size: 1rem;
  }
}