/* ============================================================
   IT CAPITAL® — PÁGINA DE CV DEL REPRESENTANTE LEGAL

   Hoja propia, encima de site.css. Toma del sitio el fondo de chispas, el
   encabezado, la tipografía y los colores; y añade lo que un currículum
   necesita y el sitio no tiene: cifras destacadas, línea de tiempo, barras
   de competencia y listas de formación.

   Regla de diseño heredada del manual: un solo elemento barroco y todo lo
   demás en orden. Aquí el elemento vivo es el fondo; el contenido va en
   rejilla estricta, alineado a una sola columna de lectura.
   ============================================================ */
:root{
  --cv-t:'Archivo','Inter',system-ui,sans-serif;
  --cv-b:'Open Sans',system-ui,sans-serif;
  --cv-m:'IBM Plex Mono',ui-monospace,monospace;
  --cv-teal:#4FE3D0; --cv-am:#FFE14D; --cv-verde:#8FE64A;
  --cv-dim:#c3ccd8; --cv-mute:#8590a3; --cv-linea:rgba(255,255,255,.10);
}
body.cv-body{background:#050B14;color:#fff;font-family:var(--cv-b);margin:0}
.cv-main{position:relative;z-index:2;max-width:1180px;margin:0 auto;
  padding:0 clamp(18px,5vw,44px) 80px}

/* ── Portada ─────────────────────────────────────────────────────────── */
.cv-hero{padding:clamp(130px,17vh,190px) 0 clamp(34px,5vh,54px)}
.cv-hero h1{
  font-family:var(--cv-t);font-weight:900;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(2.2rem,5.6vw,4.1rem);margin:14px 0 0;color:#fff;
  background-image:linear-gradient(96deg,#fff 34%,var(--cv-teal) 96%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  /* aire para que el recorte del degradado no muerda acentos ni colas */
  padding:.10em .05em .20em;margin-left:-.05em;overflow:visible}
.cv-rol{font-family:var(--cv-t);font-weight:700;font-size:clamp(1.05rem,2vw,1.35rem);
  color:var(--cv-am);margin:10px 0 0}
.cv-ubic{font-family:var(--cv-m);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cv-mute);margin:12px 0 0}
.cv-acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ── Bloques ─────────────────────────────────────────────────────────── */
.cv-bloque{padding:clamp(32px,5vh,52px) 0;border-top:1px solid var(--cv-linea)}
.cv-bloque h2{font-family:var(--cv-t);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(1.25rem,2.5vw,1.85rem);margin:0 0 20px;color:#fff}
.cv-h2-sep{margin-top:40px!important}
.cv-fine{font-family:var(--cv-m);font-size:.68rem;line-height:1.7;letter-spacing:.04em;
  color:var(--cv-mute);margin:0 0 18px}
.cv-resumen p{font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.75;color:var(--cv-dim);
  max-width:78ch;margin:0}
.cv-dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}

/* ── Cifras ──────────────────────────────────────────────────────────── */
.cv-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--cv-linea);border:1px solid var(--cv-linea)}
.cv-cifra{background:#050B14;padding:24px 22px 26px}
.cv-cifra strong{display:block;font-family:var(--cv-t);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--cv-am);line-height:1;
  padding-bottom:.08em}
.cv-cifra span{display:block;margin-top:12px;font-size:.86rem;line-height:1.55;color:var(--cv-dim)}

/* ── Línea de tiempo ─────────────────────────────────────────────────── */
.cv-linea{display:grid;gap:0}
.cv-hito,.cv-evento{display:grid;grid-template-columns:190px 1fr;gap:clamp(18px,3vw,40px);
  padding:26px 0;border-top:1px solid var(--cv-linea)}
.cv-hito:first-child,.cv-evento:first-child{border-top:0}
.cv-hito-anio{font-family:var(--cv-m);font-size:.76rem;letter-spacing:.08em;
  color:var(--cv-teal);padding-top:.35em}
.cv-hito-cuerpo h3{font-family:var(--cv-t);font-weight:800;font-size:1.16rem;
  letter-spacing:-.015em;margin:0 0 4px;color:#fff}
.cv-hito-cargo{font-size:.95rem;color:var(--cv-am);margin:0 0 3px;font-weight:600}
.cv-hito-lugar{font-family:var(--cv-m);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cv-mute);margin:0 0 14px}
.cv-hito-cuerpo ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cv-hito-cuerpo li{font-size:.92rem;line-height:1.68;color:var(--cv-dim);
  padding-left:20px;position:relative}
.cv-hito-cuerpo li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--cv-teal);opacity:.75}
.cv-hito-cuerpo p{font-size:.92rem;line-height:1.68;color:var(--cv-dim);margin:0}
.cv-enlace{display:inline-block;margin-top:12px;color:var(--cv-teal);font-weight:600;
  font-size:.9rem;text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(79,227,208,.45)}
.cv-enlace:hover{text-decoration-color:var(--cv-teal)}

/* ── Barras de competencia ───────────────────────────────────────────── */
.cv-barras{display:grid;gap:20px}
.cv-barra-t{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-bottom:8px}
.cv-barra-t span{font-size:.92rem;color:var(--cv-dim);line-height:1.4}
.cv-barra-t b{font-family:var(--cv-m);font-size:.78rem;color:var(--cv-am)}
.cv-barra-p{height:5px;background:rgba(255,255,255,.08);overflow:hidden}
.cv-barra-p i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--cv-teal),var(--cv-verde));
  transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.cv-barra-p i.llena{width:var(--v)}
@media (prefers-reduced-motion:reduce){
  .cv-barra-p i{transition:none;width:var(--v)}
}

/* ── Países e idiomas ────────────────────────────────────────────────── */
.cv-paises{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.cv-paises li{font-family:var(--cv-m);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--cv-linea);padding:9px 14px;
  color:var(--cv-dim)}
.cv-idiomas{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cv-idiomas li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--cv-linea);font-size:.92rem;color:var(--cv-dim)}
.cv-idiomas b{font-family:var(--cv-m);font-size:.76rem;color:var(--cv-teal)}

/* ── Formación y certificaciones ─────────────────────────────────────── */
.cv-edu{list-style:none;margin:0;padding:0}
.cv-edu li{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:15px 0;
  border-bottom:1px solid var(--cv-linea)}
.cv-edu-anio{font-family:var(--cv-m);font-size:.7rem;letter-spacing:.07em;
  color:var(--cv-mute);padding-top:.2em}
.cv-edu-cuerpo{font-size:.9rem;line-height:1.6;color:var(--cv-dim)}
.cv-edu-cuerpo b{display:block;color:#fff;font-family:var(--cv-t);font-weight:700;
  font-size:.96rem;margin-bottom:3px}
.cv-edu-cuerpo em{display:block;font-style:normal;font-family:var(--cv-m);font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cv-mute);margin-top:5px}
.cv-colab{list-style:none;margin:0;padding:0}
.cv-colab li{padding:15px 0;border-bottom:1px solid var(--cv-linea)}
.cv-colab b{display:block;font-family:var(--cv-t);font-weight:700;color:#fff;
  font-size:.96rem;margin-bottom:4px}
.cv-colab span{font-size:.88rem;line-height:1.6;color:var(--cv-dim)}

/* ── LinkedIn y contacto ─────────────────────────────────────────────── */
.cv-li-tarjeta{display:block;border:1px solid var(--cv-linea);padding:22px 24px;
  text-decoration:none;transition:.25s;background:rgba(255,255,255,.03)}
.cv-li-tarjeta:hover{border-color:rgba(79,227,208,.5);background:rgba(79,227,208,.06)}
.cv-li-nombre{display:block;font-family:var(--cv-t);font-weight:800;font-size:1.06rem;
  color:#fff;letter-spacing:-.015em}
.cv-li-rol{display:block;font-size:.88rem;color:var(--cv-dim);margin-top:5px}
.cv-li-ver{display:block;font-family:var(--cv-m);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cv-teal);margin-top:14px}
.cv-li-btn{margin-top:14px}
.cv-contacto-lista{list-style:none;margin:0;padding:0}
.cv-contacto-lista li{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--cv-linea)}
.cv-contacto-lista span{font-family:var(--cv-m);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cv-mute)}
.cv-contacto-lista a{color:var(--cv-teal);text-decoration:none;font-size:.94rem}
.cv-contacto-lista a:hover{text-decoration:underline;text-underline-offset:3px}
.cv-pie{margin-top:0}

/* ── Móvil ───────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .cv-dos{grid-template-columns:1fr}
  .cv-hito,.cv-evento{grid-template-columns:1fr;gap:8px}
  .cv-hito-anio{padding-top:0}
  .cv-edu li{grid-template-columns:1fr;gap:4px}
  .cv-hero{padding-top:120px}
}

/* ══════════════════════════════════════════════════════════════════════
   RONDA 16 — línea de tiempo e insignia de LinkedIn
   ══════════════════════════════════════════════════════════════════════ */

/* ── LÍNEA DE TIEMPO DE LA TRAYECTORIA ─────────────────────────────────
   Ocupa el hueco que dejaban seis cifras en una rejilla de cinco columnas.
   El SVG es fluido: escala con el ancho sin perder proporción, y en móvil
   se puede desplazar en horizontal en vez de encogerse hasta ser ilegible. */
.cv-gantt{margin-top:34px;padding-top:30px;border-top:1px solid rgba(255,255,255,.08)}
.cv-gantt h3{
  font-family:var(--cv-m,ui-monospace,monospace);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cv-teal,#4FE3D0);margin:0 0 18px;font-weight:500;
}
.cv-gantt-caja{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.cv-gantt-caja svg{display:block;width:100%;min-width:620px;height:auto}
.cv-gantt-nota{
  margin:14px 0 0;font-size:.78rem;line-height:1.5;color:var(--cv-dim,#7B899E);
  max-width:62ch;
}

/* ── INSIGNIA DE LINKEDIN JUNTO AL NOMBRE ──────────────────────────────
   Va en el encabezado, abierta desde el principio. Mientras LinkedIn
   responde, la caja muestra el enlace de texto que ya está en el HTML: no
   hay un hueco parpadeando. Si no responde, `sin-insignia` la retira. */
.cv-li-insignia{
  margin-top:22px;min-height:0;
  border:1px solid rgba(255,255,255,.10);border-radius:8px;
  padding:10px 14px;display:inline-block;background:rgba(255,255,255,.03);
  max-width:100%;
}
.cv-li-insignia.LI-profile-badge{padding:0;border:0;background:none}
/* (sin-insignia se retiró: esconder la caja dejaba al lector sin el enlace) */
.cv-li-insignia .badge-base__link{
  color:var(--cv-teal,#4FE3D0);text-decoration:none;font-size:.9rem;font-weight:600;
}
.cv-li-insignia .badge-base__link:hover{text-decoration:underline}
@media (max-width:640px){
  .cv-li-insignia{display:block}
}

/* La rejilla de cifras acomodaba cinco por renglón y las seis cifras dejaban
   cuatro celdas vacías. Con tres columnas quedan dos renglones llenos. */
@media (min-width:900px){
  .cv-cifras{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:560px) and (max-width:899px){
  .cv-cifras{grid-template-columns:repeat(2,1fr)}
}

/* ── BLANCOS DE TOQUE EN MÓVIL ─────────────────────────────────────────
   Misma corrección que en el resto del sitio: en pantalla táctil estrecha,
   los enlaces de contacto y del pie no pueden medir 15 px de alto. Se gana
   con `padding` y no con `height`, para no descuadrar las columnas.     */
@media (max-width:900px){
  .cv-contacto-lista a,
  .cv-pie a,
  .footer-bottom a,
  .cv-linea a{
    display:inline-block;padding:9px 2px;min-height:24px;
  }
  .cv-li-insignia .badge-base__link{display:inline-block;padding:6px 0}
}