/* =============================================================================
   VITALDOC — INVESTOR RELATIONS PAGE
   Archivo: public/css/inversores.css
   Descripcion: Sistema de diseño visual premium para la página de inversores.
                Dark theme corporativo. Sin dependencias externas.
   Secciones:
     1. Design Tokens & Reset
     2. Hero con nebulosa animada
     3. Floating dots decorativos
     4. Cards de métricas (glassmorphism)
     5. Donut chart CSS puro
     6. Timeline de roadmap
     7. Tabla de proyecciones financieras
     8. Animaciones de entrada
     9. Utilidades y responsive
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS & RESET
   ============================================================================= */

:root {
  /* Paleta de color */
  --inv-bg-deep:       #0a0f1c;
  --inv-bg-mid:        #0d2137;
  --inv-bg-card:       rgba(255, 255, 255, 0.05);
  --inv-border-card:   rgba(255, 255, 255, 0.10);

  /* Accentos */
  --inv-blue:          #2563eb;
  --inv-blue-glow:     rgba(37, 99, 235, 0.40);
  --inv-blue-light:    #60a5fa;
  --inv-green:         #10b981;
  --inv-amber:         #f59e0b;
  --inv-red:           #ef4444;

  /* Texto */
  --inv-text-primary:  #f1f5f9;
  --inv-text-muted:    #94a3b8;
  --inv-text-caption:  #64748b;

  /* Tipografía */
  --inv-font-display:  'Inter', 'SF Pro Display', system-ui, sans-serif;
  --inv-font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Espaciado */
  --inv-radius-card:   16px;
  --inv-radius-pill:   999px;

  /* Transiciones */
  --inv-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --inv-ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --inv-duration-fast: 220ms;
  --inv-duration-med:  400ms;
}

/* Reset selectivo — no contamina el resto de la app */
.inv-page *,
.inv-page *::before,
.inv-page *::after {
  box-sizing: border-box;
}

.inv-page {
  font-family: var(--inv-font-display);
  color: var(--inv-text-primary);
  background: var(--inv-bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =============================================================================
   2. HERO — NEBULOSA ANIMADA
   ============================================================================= */

.inv-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  overflow: hidden;
  /* Fondo base del degradado */
  background: linear-gradient(160deg, var(--inv-bg-deep) 0%, var(--inv-bg-mid) 100%);
}

/* Capa de nebulosa: múltiples radial-gradients con animación lenta */
.inv-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%,  rgba(37, 99, 235, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 70%,  rgba(16, 185, 129, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 55% 10%,  rgba(245, 158, 11, 0.07) 0%, transparent 60%);
  animation: nebulaShift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Segunda capa para mayor profundidad */
.inv-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 75% 20%,  rgba(37, 99, 235, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 55% 65% at 15% 80%,  rgba(96, 165, 250, 0.08) 0%, transparent 55%);
  animation: nebulaShift 24s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}

@keyframes nebulaShift {
  0%   { opacity: 0.6; transform: scale(1)    translateX(0px)   translateY(0px); }
  33%  { opacity: 0.9; transform: scale(1.04) translateX(-12px) translateY(8px); }
  66%  { opacity: 0.7; transform: scale(1.02) translateX(10px)  translateY(-6px); }
  100% { opacity: 1;   transform: scale(1.06) translateX(-6px)  translateY(12px); }
}

/* Contenedor interior — por encima de los pseudo-elementos */
.inv-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

/* Eyebrow badge sobre el título */
.inv-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--inv-radius-pill);
  border: 1px solid rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.12);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inv-blue-light);
  margin-bottom: 28px;
}

.inv-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--inv-blue-light);
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* Título principal con efecto shimmer */
.inv-hero__title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  /* Degradado animado sobre el texto */
  background: linear-gradient(
    90deg,
    #f1f5f9 0%,
    #60a5fa 30%,
    #f1f5f9 50%,
    #a5b4fc 70%,
    #f1f5f9 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 6s linear infinite;
}

@keyframes shimmerText {
  0%   { background-position: 200% center; }
  100% { background-position: -100% center; }
}

/* Subheadline del hero */
.inv-hero__subtitle {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--inv-text-muted);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto 40px;
  font-weight: 400;
}

/* CTA group */
.inv-hero__cta-group {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.inv-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--inv-radius-pill);
  background: var(--inv-blue);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    transform var(--inv-duration-fast) var(--inv-ease-spring),
    box-shadow var(--inv-duration-fast) var(--inv-ease-smooth);
}

.inv-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--inv-blue-glow);
  color: #fff;
  text-decoration: none;
}

.inv-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--inv-radius-pill);
  background: transparent;
  color: var(--inv-text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition:
    background var(--inv-duration-fast) var(--inv-ease-smooth),
    border-color var(--inv-duration-fast) var(--inv-ease-smooth),
    transform var(--inv-duration-fast) var(--inv-ease-spring);
}

.inv-btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  color: var(--inv-text-primary);
  text-decoration: none;
}

/* Scroll indicator en la parte baja del hero */
.inv-hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
  opacity: 0.45;
}

.inv-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--inv-text-muted));
  animation: scrollDrop 2s ease-in-out infinite;
}

@keyframes scrollDrop {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  40%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: translateY(12px); }
}


/* =============================================================================
   3. FLOATING DOTS DECORATIVOS
   ============================================================================= */

.inv-dots-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Dot genérico — personalizar con modificadores de posición */
.inv-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.55);
  animation: floatDot var(--dot-duration, 9s) ease-in-out infinite var(--dot-delay, 0s) alternate;
}

/* Tamaños */
.inv-dot--sm { width: 4px;  height: 4px; }
.inv-dot--md { width: 7px;  height: 7px; }
.inv-dot--lg { width: 11px; height: 11px; }

/* Colores alternativos */
.inv-dot--green  { background: rgba(16, 185, 129, 0.50); }
.inv-dot--amber  { background: rgba(245, 158, 11, 0.45); }
.inv-dot--white  { background: rgba(255, 255, 255, 0.30); }

/* Posiciones predefinidas para el hero */
.inv-dot--p1  { top: 12%; left: 8%;  --dot-duration: 8s;  --dot-delay: 0s; }
.inv-dot--p2  { top: 25%; left: 18%; --dot-duration: 11s; --dot-delay: 1.2s; }
.inv-dot--p3  { top: 55%; left: 5%;  --dot-duration: 9s;  --dot-delay: 0.5s; }
.inv-dot--p4  { top: 75%; left: 22%; --dot-duration: 13s; --dot-delay: 2s; }
.inv-dot--p5  { top: 8%;  left: 42%; --dot-duration: 10s; --dot-delay: 0.8s; }
.inv-dot--p6  { top: 40%; left: 60%; --dot-duration: 7s;  --dot-delay: 1.5s; }
.inv-dot--p7  { top: 15%; left: 75%; --dot-duration: 12s; --dot-delay: 0.3s; }
.inv-dot--p8  { top: 65%; left: 85%; --dot-duration: 9.5s;--dot-delay: 2.5s; }
.inv-dot--p9  { top: 85%; left: 70%; --dot-duration: 11s; --dot-delay: 1s; }
.inv-dot--p10 { top: 45%; left: 92%; --dot-duration: 8.5s;--dot-delay: 3s; }
.inv-dot--p11 { top: 90%; left: 40%; --dot-duration: 10s; --dot-delay: 0.7s; }
.inv-dot--p12 { top: 30%; left: 50%; --dot-duration: 14s; --dot-delay: 1.8s; }

@keyframes floatDot {
  0%   { transform: translate(0,  0px)  scale(1); }
  30%  { transform: translate(3px, -8px) scale(1.1); }
  60%  { transform: translate(-4px, 5px) scale(0.9); }
  100% { transform: translate(2px, -12px) scale(1.05); }
}


/* =============================================================================
   4. CARDS DE MÉTRICAS — GLASSMORPHISM
   ============================================================================= */

.inv-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.metric-card {
  position: relative;
  background: var(--inv-bg-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--inv-border-card);
  border-radius: var(--inv-radius-card);
  padding: 28px 24px;
  overflow: hidden;
  cursor: default;
  transition:
    transform var(--inv-duration-fast) var(--inv-ease-spring),
    border-color var(--inv-duration-med) var(--inv-ease-smooth),
    box-shadow var(--inv-duration-med) var(--inv-ease-smooth);
}

/* Reflejo superior sutil (efecto cristal) */
.metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.20) 50%,
    transparent 100%
  );
}

/* Glow en hover */
.metric-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    ellipse 70% 55% at 50% 0%,
    var(--inv-blue-glow) 0%,
    transparent 70%
  );
  transition: opacity var(--inv-duration-med) var(--inv-ease-smooth);
  pointer-events: none;
}

.metric-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(37, 99, 235, 0.20),
    0 4px 20px var(--inv-blue-glow);
}

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

/* Icono del KPI */
.metric-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 1.2rem;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.25);
}

.metric-card__icon--green  { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.25); }
.metric-card__icon--amber  { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.25); }
.metric-card__icon--red    { background: rgba(239, 68, 68, 0.15);  border-color: rgba(239, 68, 68, 0.25); }

/* Número principal — tamaño impactante */
.metric-card__value {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--inv-text-primary);
  margin-bottom: 6px;
  /* Degradado sutil en el número */
  background: linear-gradient(135deg, #f1f5f9 30%, #93c5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Etiqueta debajo del número */
.metric-card__label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--inv-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 14px;
}

/* Tendencia (% cambio) */
.metric-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--inv-radius-pill);
}

.metric-card__trend--up {
  color: var(--inv-green);
  background: rgba(16, 185, 129, 0.12);
}

.metric-card__trend--down {
  color: var(--inv-red);
  background: rgba(239, 68, 68, 0.12);
}


/* =============================================================================
   5. DONUT CHART — CSS PURO (conic-gradient)
   Segmentos: Producto 40%, Marketing 30%, Equipo 20%, Legal 10%
   ============================================================================= */

.inv-donut-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

@media (min-width: 640px) {
  .inv-donut-wrapper {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}

/* El chart en sí */
.donut-chart {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    var(--inv-blue)   0%   40%,   /* Producto   40% */
    var(--inv-green)  40%  70%,   /* Marketing  30% */
    var(--inv-amber)  70%  90%,   /* Equipo     20% */
    var(--inv-red)    90%  100%   /* Legal      10% */
  );
  flex-shrink: 0;
  /* Sombra para profundidad */
  filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.45));
  /* Pequeño spin de entrada */
  animation: donutReveal 1.2s var(--inv-ease-smooth) both;
}

@keyframes donutReveal {
  from { opacity: 0; transform: scale(0.75) rotate(-90deg); }
  to   { opacity: 1; transform: scale(1)    rotate(0deg); }
}

/* Círculo central para efecto donut */
.donut-chart::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 112px;   /* 56% del diámetro = grosor de anillo 22% */
  height: 112px;
  border-radius: 50%;
  background: #0d1b2e;  /* Tono del fondo de la sección */
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Texto central del donut */
.donut-chart__center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  pointer-events: none;
}

.donut-chart__center-value {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--inv-text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}

.donut-chart__center-label {
  display: block;
  font-size: 0.65rem;
  color: var(--inv-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

/* Leyenda del donut */
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.donut-legend__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.donut-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.donut-legend__swatch--blue   { background: var(--inv-blue); }
.donut-legend__swatch--green  { background: var(--inv-green); }
.donut-legend__swatch--amber  { background: var(--inv-amber); }
.donut-legend__swatch--red    { background: var(--inv-red); }

.donut-legend__name {
  font-size: 0.88rem;
  color: var(--inv-text-primary);
  font-weight: 500;
  flex: 1;
}

.donut-legend__pct {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--inv-text-muted);
  font-variant-numeric: tabular-nums;
}


/* =============================================================================
   6. TIMELINE ANIMADO — ROADMAP
   ============================================================================= */

.inv-timeline {
  position: relative;
  padding-left: 36px;
  max-width: 680px;
}

/* Línea vertical conectora */
.inv-timeline::before {
  content: '';
  position: absolute;
  left: 11px;        /* Centrada en el punto (24px / 2 - 1px) */
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--inv-blue) 0%,
    rgba(37, 99, 235, 0.30) 100%
  );
  /* Draw animation: la línea "se dibuja" de arriba a abajo */
  transform-origin: top;
  animation: drawLine 1.8s var(--inv-ease-smooth) 0.4s both;
}

@keyframes drawLine {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Item individual del timeline */
.timeline-item {
  position: relative;
  padding: 0 0 36px 28px;
  animation: slideInLeft 0.55s var(--inv-ease-spring) both;
}

/* Retrasos escalonados para los items */
.timeline-item:nth-child(1) { animation-delay: 0.5s; }
.timeline-item:nth-child(2) { animation-delay: 0.7s; }
.timeline-item:nth-child(3) { animation-delay: 0.9s; }
.timeline-item:nth-child(4) { animation-delay: 1.1s; }
.timeline-item:nth-child(5) { animation-delay: 1.3s; }
.timeline-item:nth-child(6) { animation-delay: 1.5s; }

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Punto/nodo del timeline */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -36px;    /* sale del padding-left del item */
  top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: var(--inv-bg-deep);
  z-index: 1;
}

/* --- Estado: completado --- */
.timeline-item--done {
  color: var(--inv-green);
}

.timeline-item--done::before {
  background: var(--inv-green);
  border-color: var(--inv-green);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
  animation: pulseGreen 2.5s ease-in-out infinite;
}

/* Checkmark SVG embebido en el nodo completado */
.timeline-item--done::after {
  content: '';
  position: absolute;
  left: -29px;
  top: 11px;
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  z-index: 2;
}

@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); }
  50%       { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.05); }
}

/* --- Estado: en curso --- */
.timeline-item--active {
  color: var(--inv-blue);
}

.timeline-item--active::before {
  background: var(--inv-blue);
  border-color: var(--inv-blue);
  box-shadow: 0 0 0 4px var(--inv-blue-glow);
  animation: pulseBlue 1.8s ease-in-out infinite;
}

@keyframes pulseBlue {
  0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.30); }
  50%       { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0.08); }
}

/* --- Estado: pendiente --- */
.timeline-item--pending {
  color: var(--inv-text-caption);
}

.timeline-item--pending::before {
  background: rgba(100, 116, 139, 0.15);
  border-color: var(--inv-text-caption);
}

/* Contenido del item */
.timeline-item__quarter {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 4px;
  /* Hereda el color del estado */
}

.timeline-item__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--inv-text-primary);
  margin: 0 0 6px;
  line-height: 1.3;
}

.timeline-item__desc {
  font-size: 0.85rem;
  color: var(--inv-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Badge de estado (texto) */
.timeline-item__badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--inv-radius-pill);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.timeline-item__badge--done    { background: rgba(16, 185, 129, 0.15); color: var(--inv-green); }
.timeline-item__badge--active  { background: rgba(37, 99, 235, 0.15);  color: var(--inv-blue-light); }
.timeline-item__badge--pending { background: rgba(100, 116, 139, 0.12); color: var(--inv-text-caption); }


/* =============================================================================
   7. TABLA DE PROYECCIONES FINANCIERAS
   ============================================================================= */

.inv-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--inv-radius-card);
  border: 1px solid var(--inv-border-card);
  /* Sombra suave para el contenedor */
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.25);
}

.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  min-width: 560px;
}

/* Cabecera */
.inv-table thead tr {
  background: rgba(37, 99, 235, 0.12);
  border-bottom: 1px solid rgba(37, 99, 235, 0.25);
}

.inv-table thead th {
  padding: 14px 20px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inv-blue-light);
  white-space: nowrap;
}

.inv-table thead th:not(:first-child) {
  text-align: right;
}

/* Filas del cuerpo */
.inv-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition:
    background var(--inv-duration-fast) var(--inv-ease-smooth),
    transform var(--inv-duration-fast) var(--inv-ease-smooth);
}

.inv-table tbody tr:last-child {
  border-bottom: none;
}

/* Hover con degradado sutil lateral */
.inv-table tbody tr:hover {
  background: linear-gradient(
    90deg,
    rgba(37, 99, 235, 0.08) 0%,
    rgba(37, 99, 235, 0.04) 50%,
    transparent 100%
  );
}

.inv-table tbody td {
  padding: 14px 20px;
  color: var(--inv-text-primary);
  vertical-align: middle;
}

.inv-table tbody td:not(:first-child) {
  text-align: right;
  font-weight: 500;
}

/* Primera columna (etiqueta de año/concepto) */
.inv-table tbody td:first-child {
  font-weight: 600;
  color: var(--inv-text-muted);
}

/* Celda de año destacado */
.inv-table__year-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Fila de totales / breakeven */
.inv-table__row-total td {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 700;
  font-size: 0.92rem;
}

.inv-table__row-total td:first-child {
  color: var(--inv-text-primary);
}

/* Valores negativos y positivos */
.inv-value-neg {
  color: var(--inv-red) !important;
  font-weight: 700;
}

.inv-value-pos {
  color: var(--inv-green) !important;
  font-weight: 700;
}

.inv-value-neutral {
  color: var(--inv-text-muted) !important;
}

/* Chip de cambio porcentual dentro de celdas */
.inv-table__chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--inv-radius-pill);
  margin-left: 6px;
  vertical-align: middle;
}

.inv-table__chip--pos { background: rgba(16, 185, 129, 0.15); color: var(--inv-green); }
.inv-table__chip--neg { background: rgba(239, 68, 68, 0.15);  color: var(--inv-red); }


/* =============================================================================
   8. ANIMACIONES DE ENTRADA
   Uso: añadir la clase y las clases de animación se activan al cargar la sección.
   Para activación en scroll: añadir clase .is-visible via JS mínimo,
   o usar animation-play-state: paused por defecto y running al llegar al viewport.
   ============================================================================= */

/* Fade + subida desde abajo */
.fade-in-up {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeInUp 0.65s var(--inv-ease-smooth) both;
}

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

/* Escala desde 0.9 */
.scale-in {
  opacity: 0;
  transform: scale(0.92);
  animation: scaleIn 0.55s var(--inv-ease-spring) both;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Fade simple */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.6s var(--inv-ease-smooth) both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Retrasos escalonados para grids y listas */
.delay-100 { animation-delay: 0.10s; }
.delay-200 { animation-delay: 0.20s; }
.delay-300 { animation-delay: 0.30s; }
.delay-400 { animation-delay: 0.40s; }
.delay-500 { animation-delay: 0.50s; }
.delay-600 { animation-delay: 0.60s; }
.delay-700 { animation-delay: 0.70s; }
.delay-800 { animation-delay: 0.80s; }

/* Modo reducción de movimiento: respeta la preferencia del sistema operativo */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up,
  .scale-in,
  .fade-in,
  .timeline-item,
  .donut-chart,
  .inv-hero::before,
  .inv-hero::after,
  .inv-hero__title,
  .inv-dot,
  .inv-hero__scroll-line,
  .inv-timeline::before,
  .timeline-item--done::before,
  .timeline-item--active::before,
  .inv-hero__badge-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* =============================================================================
   9. UTILIDADES, LAYOUT Y RESPONSIVE
   ============================================================================= */

/* Contenedor principal de sección */
.inv-section {
  padding: 80px 24px;
  max-width: 1160px;
  margin: 0 auto;
}

.inv-section--full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Separador con degradado */
.inv-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(37, 99, 235, 0.20) 50%,
    rgba(255, 255, 255, 0.08) 70%,
    transparent 100%
  );
  margin: 0;
  border: none;
}

/* Encabezado de sección reutilizable */
.inv-section-header {
  max-width: 600px;
  margin-bottom: 56px;
}

.inv-section-header--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.inv-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inv-blue-light);
  margin-bottom: 12px;
}

.inv-section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--inv-text-primary);
  margin: 0 0 16px;
}

.inv-section-desc {
  font-size: 1rem;
  color: var(--inv-text-muted);
  line-height: 1.7;
  margin: 0;
}

/* Ocultamiento del video de fondo global cuando se usa la página de inversores */
.inv-page #video-background,
.inv-page #video-overlay {
  display: none !important;
}

/* Offset para la navbar fija de VitalDoc (~72px) */
.inv-page main,
.inv-navbar-offset {
  padding-top: 72px;
}

/* Grid de dos columnas general */
.inv-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 768px) {
  .inv-grid-2 {
    grid-template-columns: 1fr;
  }

  .inv-hero {
    min-height: auto;
    padding: 140px 20px 60px;
  }

  .inv-hero__title {
    font-size: 2.2rem;
  }

  .inv-section {
    padding: 56px 20px;
  }

  .inv-section-header {
    margin-bottom: 36px;
  }

  .donut-chart {
    width: 160px;
    height: 160px;
  }

  .donut-chart::after {
    width: 90px;
    height: 90px;
  }

  .inv-timeline {
    padding-left: 28px;
  }
}

@media (max-width: 480px) {
  .inv-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .metric-card {
    padding: 20px 16px;
  }

  .metric-card__value {
    font-size: 1.8rem;
  }

  .inv-hero__cta-group {
    flex-direction: column;
    align-items: center;
  }

  .inv-btn-primary,
  .inv-btn-outline {
    width: 100%;
    justify-content: center;
  }
}

/* Accesibilidad: foco visible para navegación por teclado */
.inv-btn-primary:focus-visible,
.inv-btn-outline:focus-visible,
.metric-card:focus-visible {
  outline: 2px solid var(--inv-blue-light);
  outline-offset: 3px;
}

/* Utility: texto mono para cifras financieras */
.inv-mono {
  font-family: var(--inv-font-mono);
  font-size: 0.9em;
}

/* Utility: truncado de texto */
.inv-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Visualmente oculto pero accesible para lectores de pantalla */
.inv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}