/* ════════════════════════════════════════════════════════════
   IVIA — SISTEMA DE TOKENS DE DISEÑO
   Versión 2.0 · Ingversia
   
   INSTRUCCIONES DE INTEGRACIÓN:
   1. Pegar este bloque al INICIO de style.css, antes de cualquier regla
   2. El bloque :root que ya existe en style.css → eliminarlo y usar este
   3. Ver tabla de migración al final del archivo
   ════════════════════════════════════════════════════════════ */

:root {

  /* ── PALETA PRIMITIVA ────────────────────────────────────
     No usar directamente en componentes — usar los semánticos */

  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563EB;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #0F2D5E;

  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --green-100: #dcfce7;
  --green-500: #22c55e;
  --green-700: #15803d;

  --amber-100: #fef3c7;
  --amber-400: #fbbf24;
  --amber-600: #d97706;
  --amber-700: #b45309;

  --sky-50:  #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #0c4a6e;

  --red-50:  #fef2f2;
  --red-500: #ef4444;
  --white:   #ffffff;

  /* ── TOKENS SEMÁNTICOS ───────────────────────────────────
     Estos son los que se usan en componentes y secciones    */

  /* Fondos */
  --color-bg-page:    var(--slate-50);
  --color-bg-section: var(--slate-100);
  --color-bg-card:    var(--white);
  --color-bg-dark:    var(--slate-900);

  /* Texto */
  --color-text-primary: var(--slate-900);
  --color-text-body:    var(--slate-600);
  --color-text-muted:   var(--slate-500);
  --color-text-subtle:  var(--slate-400);
  --color-text-link:    var(--blue-600);
  --color-text-invert:  var(--white);

  /* Bordes */
  --color-border-default: var(--slate-200);
  --color-border-input:   var(--slate-300);
  --color-border-focus:   var(--blue-600);

  /* Acento */
  --color-accent:       var(--blue-600);
  --color-accent-dark:  var(--blue-700);
  --color-accent-light: var(--blue-50);

  /* Estados */
  --color-success:    var(--green-500);
  --color-success-bg: var(--green-100);
  --color-warning:    var(--amber-600);
  --color-warning-bg: var(--amber-100);
  --color-danger:     var(--red-500);
  --color-danger-bg:  var(--red-50);

  /* ── TIPOGRAFÍA ──────────────────────────────────────────*/
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.72rem;
  --text-sm:   0.82rem;
  --text-base: 0.95rem;
  --text-md:   1.05rem;
  --text-lg:   1.18rem;
  --text-xl:   1.4rem;
  --text-2xl:  1.8rem;
  --text-3xl:  2.5rem;
  --text-hero: clamp(2.6rem, 4.5vw, 3.9rem);

  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.75;

  /* ── ESPACIADO ───────────────────────────────────────────*/
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --section-y: var(--space-20);
  --section-x: 5%;

  /* ── RADIOS ──────────────────────────────────────────────*/
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── SOMBRAS ─────────────────────────────────────────────*/
  --shadow-xs:      0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:      0 1px 3px rgba(15,23,42,.06), 0 1px 8px rgba(15,23,42,.04);
  --shadow-md:      0 4px 6px rgba(15,23,42,.05), 0 10px 20px rgba(15,23,42,.06);
  --shadow-lg:      0 10px 25px rgba(15,23,42,.08), 0 20px 48px rgba(15,23,42,.08);
  --shadow-blue:    0 8px 24px rgba(37,99,235,.22);
  --shadow-blue-lg: 0 12px 32px rgba(37,99,235,.30);

  /* ── TRANSICIONES ────────────────────────────────────────*/
  --ease-out:    cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --transition-fast:   0.15s cubic-bezier(.4,0,.2,1);
  --transition-base:   0.22s cubic-bezier(.4,0,.2,1);
  --transition-slow:   0.35s cubic-bezier(.4,0,.2,1);

  /* ── LAYOUT ──────────────────────────────────────────────*/
  --max-width:        1200px;
  --max-width-text:   800px;
  --max-width-narrow: 600px;

  /* ── Z-INDEX ─────────────────────────────────────────────*/
  --z-dropdown: 300;
  --z-sticky:   1000;
  --z-overlay:  1020;
  --z-menu:     1050;
  --z-float:    9998;
  --z-top:      9999;
}

/* ── CLASES DE ICONOS SVG ────────────────────────────────────
   Uso: <svg class="icon icon-lg" aria-hidden="true"><use href="#icon-web"/></svg>
   El sprite #ivia-icons debe estar en el <body> de cada página  */

.icon {
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: -0.125em;
}
.icon-xs  { width: 12px; height: 12px; }
.icon-sm  { width: 14px; height: 14px; }
.icon-md  { width: 16px; height: 16px; }
.icon-lg  { width: 20px; height: 20px; }
.icon-xl  { width: 24px; height: 24px; }

.icon-blue  { color: var(--color-accent); }
.icon-muted { color: var(--color-text-muted); }
.icon-white { color: var(--white); }
.icon-green { color: var(--green-500); }
.icon-amber { color: var(--amber-600); }

/* Wrapper cuadrado para service-cards y secciones */
.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
  color: var(--color-accent);
  flex-shrink: 0;
  transition: background var(--transition-base), color var(--transition-base);
}
.icon-wrap svg { width: 20px; height: 20px; }

/* El wrapper cambia al hover de la service-card padre */
.service-card:hover .icon-wrap {
  background: var(--color-accent);
  color: var(--white);
}


/*  como trabajamos styles 
/* Estilos Premium para la Línea de Tiempo (Timeline) */
.timeline-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* La línea vertical central/lateral */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    width: 4px;
    background: #e2e8f0;
    border-radius: 4px;
}

.timeline-item {
    position: relative;
    margin-bottom: 3.5rem;
    padding-left: 5rem;
}

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

/* El círculo del número en la línea */
.timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 52px;
    height: 52px;
    background: white;
    border: 4px solid var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--dark-blue);
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,102,255,0.15);
}

/* Tarjeta de contenido del paso */
.timeline-content {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,102,255,0.08);
    border-color: rgba(0,102,255,0.2);
}

.step-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--dark-blue);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.step-desc {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.step-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid var(--primary-blue);
}

.step-list li {
    margin-bottom: 0.8rem;
    color: var(--dark-blue);
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.step-list li:last-child {
    margin-bottom: 0;
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .timeline-container::before { left: 20px; }
    .timeline-item { padding-left: 4rem; padding-right: 1rem; }
    .timeline-marker { width: 44px; height: 44px; font-size: 1rem; left: -2px; top: 4px; }
    .timeline-content { padding: 1.5rem; }
    .step-title { font-size: 1.3rem; flex-wrap: wrap; }
}