/* ============================================================
   Víctor Conejero · Director de Recursos Humanos
   BLANCO ESTUDIO con sombras suaves + Space Grotesk / Inter.
   Acento degradado azul→violeta. Logos de las empresas junto a
   sus datos. Todo offline (fuentes y librerías vendorizadas).
   ============================================================ */

/* ---------- FUENTES (variables, subset latino) ---------- */
@font-face{
  font-family:'Space Grotesk';
  src:url('../assets/fonts/space-grotesk-var.woff2') format('woff2');
  font-weight:300 700;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../assets/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}

/* ---------- TOKENS ---------- */
:root{
  /* Blanco estudio: gris muy claro con sombras suaves */
  --bg:#e9ecf0;
  --bg-2:#f4f6f8;

  /* Tarjetas: blanco que destaca sobre el gris estudio */
  --panel:#ffffff;
  --panel-2:#f7f9fb;

  /* Tinta oscura sobre claro */
  --ink:#14181f;
  --muted:#4f5866;      /* cuerpo de texto, ~6:1 sobre el estudio */
  --muted-2:#5b6672;    /* micro-texto/etiquetas mono, ~4.6:1 (AA) */
  --line:rgba(22,27,34,.12);
  --line-soft:rgba(22,27,34,.07);

  /* Azul + violeta: acento moderno sobre claro */
  --accent:#1f6fd0;        /* primario (texto/líneas) */
  --accent-2:#195cb0;      /* profundo para micro-texto (AA) */
  --accent-deep:#0f4a95;   /* el más oscuro: hover */
  --accent-bright:#3d8bef; /* claro: brillos */
  --violet:#6d4ce0;        /* secundario del degradado */
  --accent-soft:#e6f0fb;   /* relleno azul muy claro (chips/hover) */
  --accent-glow:rgba(31,111,208,.20);
  --grad:linear-gradient(98deg, var(--accent) 10%, var(--violet) 90%);

  /* sombras de estudio */
  --shadow-sm:0 1px 2px rgba(22,27,34,.05);
  --shadow-md:0 14px 34px rgba(22,27,34,.08);
  --shadow-lg:0 30px 60px rgba(22,27,34,.14);

  --radius:16px;
  --radius-sm:10px;

  --font:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --ease:cubic-bezier(.22,.61,.36,1);

  /* carril derecho con la figura: más contenido que antes */
  --rail-w:clamp(340px, 34vw, 600px);
  --contenido-max:680px;
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

::selection{ background:var(--accent); color:#fff; }

/* Fondo global: BLANCO ESTUDIO — luz clave arriba, sombras suaves
   en los bordes y una mancha de color muy tenue (azul→violeta). */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 820px at 50% -6%, #f8fafc, transparent 60%),
    radial-gradient(820px 620px at -6% 8%, rgba(31,111,208,.07), transparent 62%),
    radial-gradient(700px 560px at 16% 96%, rgba(109,76,224,.05), transparent 65%),
    radial-gradient(940px 720px at 86% 110%, rgba(22,27,34,.07), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 46%);
}
/* rejilla sutil sobre claro: textura tech en la zona de contenido */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(22,27,34,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,27,34,.03) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(1200px 800px at 30% 20%, rgba(0,0,0,.9), transparent 75%);
  -webkit-mask-image:radial-gradient(1200px 800px at 30% 20%, rgba(0,0,0,.9), transparent 75%);
}

/* texto degradado reutilizable */
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- PROGRESO ---------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:transparent;
}
.progress span{
  display:block; height:100%; width:0%;
  background:var(--grad);
  box-shadow:0 0 12px var(--accent-glow);
}

/* ---------- NAVEGACIÓN ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px, 4vw, 56px);
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.nav.compacta{
  background:rgba(244,246,248,.82);
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 1px 0 var(--line), 0 10px 30px rgba(22,27,34,.05);
  padding-top:12px; padding-bottom:12px;
}
.nav-brand{ display:flex; align-items:center; gap:14px; }
.nav-avatar{
  width:52px; height:52px; border-radius:50%;
  object-fit:cover; object-position:center 12%;
  background:linear-gradient(180deg, #ffffff, #e7ebf0);
  border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(31,111,208,.4), 0 6px 16px rgba(22,27,34,.18);
  transition:transform .3s var(--ease);
}
.nav-brand:hover .nav-avatar{ transform:scale(1.06); }
.nav-name{ font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.nav-links{ display:flex; align-items:center; gap:clamp(18px, 2.6vw, 40px); }
.nav-links a{
  font-family:var(--display);
  font-size:17px; font-weight:600; color:var(--muted);
  letter-spacing:-.005em; transition:color .25s;
}
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  color:var(--accent-deep) !important; font-weight:600;
  border:1.5px solid rgba(31,111,208,.45);
  border-radius:999px; padding:9px 22px;
  transition:background .25s, border-color .25s;
}
.nav-cta:hover{ background:var(--accent-soft); border-color:var(--accent); }
/* icono de LinkedIn en la nav */
.nav-in{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:50%;
  color:var(--muted);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-in:hover{ color:#0a66c2; background:var(--accent-soft); }
.nav-in svg{ display:block; }

/* ---------- FIGURA (carril derecho · plató) ----------
   Retrato de cintura para arriba: el corte se disuelve con un
   difuminado suave (capa desenfocada + máscara) que lo funde con
   el fondo de estudio. Sin piernas ni zapatos. */
.figura{
  position:fixed; top:0; right:0; bottom:0;
  width:var(--rail-w);
  z-index:5;
  pointer-events:none;
  overflow:hidden;
}
.figura-bg{ position:absolute; inset:0; }
.figura-glow{
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100%;
  background:
    radial-gradient(64% 42% at 50% 16%, rgba(255,255,255,.65), transparent 68%),
    radial-gradient(58% 46% at 50% 82%, rgba(22,27,34,.06), transparent 74%),
    radial-gradient(120% 80% at 50% 50%, transparent 58%, rgba(22,27,34,.05));
}
.figura-ring{
  position:absolute; top:12%; left:50%; transform:translateX(-50%);
  width:70%; aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(31,111,208,.14);
}
.figura-ring::after{
  content:""; position:absolute; inset:-9%;
  border-radius:50%;
  border:1px dashed rgba(109,76,224,.10);
}
.figura-track{
  position:absolute; top:0; left:0; right:0;
  height:100%;
  display:flex; justify-content:center;
  will-change:transform;
}
/* Recorte de cintura para arriba: dos copias de la figura apiladas.
   La proporción del contenedor iguala la de la imagen (ratio h/w ≈ 3.28)
   para que no se deforme; las máscaras verticales disuelven la cintura. */
.figura-cuerpo{
  position:relative;
  height:min(54vh, calc(var(--rail-w) * 0.78));
  aspect-ratio:1122 / 1402;
  margin-top:21vh;             /* aire sobre la cabeza */
  filter:drop-shadow(0 14px 26px rgba(22,27,34,.12));
  user-select:none;
  will-change:transform;
}
.figura-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
}
/* capa nítida: sólo se suaviza el último canto de la cintura */
.figura-img--nitida{
  z-index:2;
  -webkit-mask-image:linear-gradient(to bottom, #000 0 96%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, #000 0 96%, rgba(0,0,0,0) 100%);
}
/* capa difuminada por debajo: casi imperceptible, apenas quita el filo */
.figura-img--blur{
  z-index:1;
  filter:blur(3px) saturate(1.02);
  -webkit-mask-image:linear-gradient(to bottom, #000 0 97%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, #000 0 97%, rgba(0,0,0,0) 100%);
}
/* fundido lateral hacia el contenido para integrar el carril */
.figura-fade{
  position:absolute; top:0; bottom:0; left:0; width:20%;
  background:linear-gradient(90deg, var(--bg), transparent);
  opacity:.7;
}

/* ---------- LAYOUT ---------- */
.page{
  position:relative; z-index:10;
  padding-right:var(--rail-w);
}
.seccion{
  max-width:calc(var(--contenido-max) + clamp(40px, 7vw, 112px) * 2);
  margin:0 auto;
  padding:clamp(84px, 12vh, 148px) clamp(40px, 7vw, 112px);
}
/* números fantasma de sección */
.con-ghost{ position:relative; }
.ghost{
  position:absolute; top:clamp(28px, 5vh, 64px); right:clamp(24px, 4vw, 72px);
  font-family:var(--display); font-weight:700;
  font-size:clamp(110px, 14vw, 190px); line-height:1;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(22,27,34,.08);
  pointer-events:none; user-select:none;
  z-index:-1;
}

/* ---------- TIPOGRAFÍA ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:22px;
  display:flex; align-items:center; gap:14px;
}
.eyebrow::after{
  content:""; height:2px; width:56px; border-radius:2px;
  background:var(--grad);
  opacity:.7;
}
.eyebrow-num{ color:var(--muted-2); }
.titulo{
  font-family:var(--display);
  font-size:clamp(30px, 4.1vw, 46px);
  font-weight:700; line-height:1.08;
  letter-spacing:-.025em;
  margin-bottom:34px;
  text-wrap:balance;
}
.titulo-grande{ font-size:clamp(42px, 6vw, 72px); }
.parrafo{
  font-size:clamp(16px, 1.25vw, 17.5px);
  color:var(--muted);
  max-width:56ch;
  margin-bottom:18px;
}
.parrafo strong{ color:var(--ink); font-weight:600; }

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;   /* fallback para navegadores sin svh */
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:110px;
  position:relative;
}
.hero-titulo{
  font-family:var(--display);
  font-size:clamp(54px, 7.6vw, 116px);
  font-weight:700; line-height:.96;
  letter-spacing:-.04em;
  margin-bottom:26px;
}
.hero-sub{
  font-size:clamp(16.5px, 1.35vw, 19px);
  color:var(--muted);
  max-width:52ch;
  margin-bottom:32px;
}
.hero-acciones{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600; letter-spacing:.01em;
  border-radius:999px; padding:13px 28px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background .25s, border-color .25s, color .25s;
}
.btn-primario{
  background:var(--grad);
  color:#fff;
  box-shadow:0 10px 26px var(--accent-glow);
}
.btn-primario:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(109,76,224,.28); }
.btn-fantasma{
  border:1px solid var(--line);
  color:var(--muted);
  background:var(--panel);
  box-shadow:var(--shadow-sm);
}
.btn-fantasma:hover{ border-color:rgba(31,111,208,.5); color:var(--accent-deep); }

/* logos flotantes del hero: grandes, dispersos y A COLOR.
   Estructura: .flotante (posición + parallax JS) > .flotante-bob
   (vaivén JS) > img (hover CSS). */
.hero-flotantes{
  position:fixed; inset:0;   /* capa fija: los logos se quedan junto a la figura */
  pointer-events:none;
  z-index:-1;               /* detrás del texto/contenido, delante de la figura */
}
.flotante{
  position:absolute; left:var(--x); top:var(--y);
  pointer-events:auto;
  will-change:transform;
}
.flotante img{
  height:var(--h, 48px); width:auto;
  filter:drop-shadow(0 14px 28px rgba(22,27,34,.16));
  transition:transform .4s var(--ease), filter .4s var(--ease);
  cursor:default;
}
.flotante img:hover{
  transform:scale(1.12) rotate(-3deg);
  filter:drop-shadow(0 22px 40px rgba(22,27,34,.24));
}

/* Insignias académicas (EAE · UBU): recortes con transparencia, como el
   resto de logos flotantes (EAE con esquinas redondeadas en el propio
   PNG; escudo UBU sin fondo). Heredan tamaño --h y sombra de .flotante. */

.hero-retrato{ display:none; }

.scroll-hint{
  position:absolute; bottom:30px; left:clamp(40px, 7vw, 112px);
  display:flex; align-items:center; gap:12px;
}
.scroll-hint-linea{
  width:1px; height:44px;
  background:linear-gradient(180deg, transparent, var(--accent));
  animation:hint 2.2s var(--ease) infinite;
  transform-origin:top;
}
@keyframes hint{
  0%{ transform:scaleY(0); opacity:0; }
  35%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1) translateY(10px); opacity:0; }
}
.scroll-hint-texto{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted-2);
}

/* ---------- MARQUEE ---------- */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--line-soft);
  background:rgba(255,255,255,.5);
  padding:18px 0;
  position:relative; z-index:10;
}
.marquee-pista{
  display:inline-flex; align-items:center; gap:28px;
  white-space:nowrap;
  animation:marquee 26s linear infinite;
  will-change:transform;
}
.marquee-pista span{
  font-family:var(--display);
  font-size:clamp(20px, 2.2vw, 30px);
  font-weight:700; letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--ink);
}
.marquee-pista span.hueco{
  color:transparent;
  -webkit-text-stroke:1.3px rgba(31,111,208,.55);
}
.marquee-pista i{
  font-style:normal; color:var(--violet); font-size:22px;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- CIFRAS ---------- */
.cifras{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px;
  background:var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:0;
  max-width:none;
  margin-inline:clamp(40px, 7vw, 112px);
}
.cifra{
  background:var(--bg);
  padding:clamp(28px, 3.6vw, 46px) clamp(22px, 2.6vw, 38px);
  display:flex; flex-direction:column; gap:8px;
}
.cifra-num{
  font-family:var(--display);
  font-size:clamp(36px, 4vw, 56px);
  font-weight:700; letter-spacing:-.03em;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-variant-numeric:tabular-nums;
}
.cifra-label{ font-size:13.5px; color:var(--muted-2); letter-spacing:.01em; max-width:24ch; }

/* ---------- CHIPS ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chips li{
  font-family:var(--mono);
  font-size:12.5px; letter-spacing:.06em;
  color:var(--accent-2);
  background:var(--accent-soft);
  border:1px solid rgba(31,111,208,.22);
  border-radius:999px;
  padding:7px 14px;
}
.chips-borde li{
  color:var(--muted);
  background:var(--panel);
  border-color:var(--line);
  box-shadow:var(--shadow-sm);
}

/* ---------- PERFIL · CREDENCIALES ---------- */
.credenciales{
  margin-top:32px;
  display:grid;
  gap:14px;
}
.credencial{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:18px;
  padding:18px 20px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s;
}
.credencial:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(31,111,208,.28);
}
/* emblema: monograma por defecto; admite logo/escudo con la variante --logo */
.credencial-emblema{
  display:grid; place-items:center;
  width:58px; height:58px;
  border-radius:15px;
  overflow:hidden;
  font-family:var(--display);
  font-weight:700; font-size:15px; letter-spacing:.03em;
  color:#fff;
  background:var(--grad);
  box-shadow:0 8px 18px var(--accent-glow);
}
/* logo/escudo con aire sobre fondo claro (p. ej. escudo de la UBU) */
.credencial-emblema--logo{
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  padding:4px;
}
.credencial-emblema--logo img{ width:100%; height:100%; object-fit:contain; }
/* logo cuadrado a sangre que llena el badge (p. ej. EAE) */
.credencial-emblema--fill{
  background:none;
  box-shadow:0 8px 18px rgba(22,27,34,.16);
}
.credencial-emblema--fill img{ width:100%; height:100%; object-fit:cover; }
.credencial-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.credencial-tipo{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-2);
}
.credencial-titulo{
  font-family:var(--display);
  font-weight:600; font-size:18px; line-height:1.2;
  color:var(--ink);
}
.credencial-detalle{ font-size:13px; color:var(--muted); }
.credencial-detalle i{ font-style:normal; color:var(--muted-2); margin:0 5px; }
.credencial-detalle b{ font-weight:600; color:var(--ink); }

/* ---------- TIMELINE · ACORDEÓN ---------- */
.timeline{
  position:relative;
  margin-top:6px;
  padding-left:34px;
}
.timeline::before{
  content:"";
  position:absolute; top:10px; bottom:10px; left:8px;
  width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--accent) 0%, var(--violet) 45%, var(--line) 100%);
  opacity:.5;
}
.hito{ position:relative; padding-bottom:16px; }
.hito:last-child{ padding-bottom:0; }
.hito::before{
  content:"";
  position:absolute; left:-30px; top:24px;
  width:9px; height:9px; border-radius:50%;
  background:#fff;
  border:2px solid var(--accent);
  box-shadow:0 0 0 4px rgba(31,111,208,.12);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
  z-index:1;
}
.hito.abierto::before{
  transform:scale(1.15);
  box-shadow:0 0 0 5px rgba(31,111,208,.18);
}

/* Tarjeta que envuelve cabecera + panel: borde/sombra unificados */
.hito-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hito-card:hover{ border-color:rgba(31,111,208,.30); box-shadow:var(--shadow-md); }
.hito.abierto .hito-card{ border-color:var(--accent); box-shadow:var(--shadow-md); }

/* Cabecera clicable: botón real a lo ancho de la tarjeta */
.hito-cab-h{ margin:0; font:inherit; font-weight:400; }
.hito-toggle{
  position:relative;
  width:100%; display:block; text-align:left;
  background:transparent; border:0; cursor:pointer;
  padding:20px 22px; padding-right:130px;   /* aire para el logo */
  font:inherit; color:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease);
}
.hito-toggle:hover{ background:var(--line-soft); }
.hito.abierto .hito-toggle{ background:var(--accent-soft); }
.hito-toggle:focus-visible{
  outline:2px solid var(--accent); outline-offset:-3px; border-radius:var(--radius);
}

/* logo de la empresa, arriba a la derecha de la cabecera */
.hito-logo{
  position:absolute; right:22px; top:20px;
  height:var(--h, 28px); width:auto;
  filter:grayscale(1) opacity(.5);
  transition:filter .4s var(--ease);
}
.hito-card:hover .hito-logo,
.hito.abierto .hito-logo{ filter:none; }

.hito-meta{
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;
  margin-bottom:9px;
}
.hito-fechas{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--accent-2); text-transform:uppercase;
}
.hito-plantilla{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--muted-2);
  border:1px solid var(--line);
  border-radius:999px; padding:3px 10px;
  background:var(--panel-2);
}
.hito-rol{
  display:block;
  font-family:var(--display);
  font-size:clamp(19px, 1.9vw, 24px); font-weight:700; letter-spacing:-.02em;
  color:var(--ink);
}
.hito-empresa{ display:block; font-size:14.5px; color:var(--muted); margin-top:4px; }

/* CTA "Ver funciones" + chevron */
.hito-cta{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:15px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent-2); font-weight:600;
}
.hito-chevron{
  display:block; color:var(--accent);
  transition:transform .4s var(--ease);
}
.hito.abierto .hito-chevron{ transform:rotate(180deg); }

/* Panel desplegable: animación suave de altura (grid) + opacidad */
.hito-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.hito.abierto .hito-panel{ grid-template-rows:1fr; }
.hito-panel-in{ overflow:hidden; min-height:0; }
.hito-logros{
  display:flex; flex-direction:column; gap:11px;
  padding:16px 22px 22px;
  border-top:1px solid var(--line-soft);
  opacity:0; transform:translateY(-4px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.hito.abierto .hito-logros{ opacity:1; transform:none; transition-delay:.08s; }
.hito-logros li{
  position:relative;
  padding-left:20px;
  font-size:15px; color:var(--muted);
}
.hito-logros li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:8px; height:2px; border-radius:2px;
  background:var(--grad);
}
/* Sin animación para quien la prefiere reducida (los acordeones siguen funcionando) */
@media (prefers-reduced-motion: reduce){
  .hito-panel, .hito-logros, .hito-chevron,
  .hito-card, .hito-toggle, .hito::before,
  .proyecto, .proyecto-panel, .proyecto-desc,
  .proyecto-dato, .proyecto-mas, .proyecto-mas::before, .proyecto-mas::after,
  .proyecto-logo{ transition:none; }
}

/* ---------- PROYECTOS · EXPANDABLE CARDS ---------- */
.proyectos-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  align-items:start;   /* focus card: la abierta crece, las demás quedan compactas */
}
.proyecto{
  position:relative;
  display:flex; flex-direction:column;
  min-height:188px;   /* altura uniforme en cerrado: todas las tarjetas iguales */
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm), var(--shadow-md);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
  overflow:hidden;
}
.proyecto::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad);
  opacity:0; transition:opacity .3s var(--ease);
  z-index:1;
}
.proyecto:hover{
  border-color:rgba(31,111,208,.35);
  box-shadow:0 1px 2px rgba(22,27,34,.05), 0 20px 44px rgba(22,27,34,.12);
  transform:translateY(-3px);
}
.proyecto:hover::before{ opacity:1; }
.proyecto.abierto{
  border-color:var(--accent);
  box-shadow:0 1px 2px rgba(22,27,34,.05), 0 26px 54px rgba(31,111,208,.16);
  transform:none;
}
.proyecto.abierto::before{ opacity:1; }

/* Cabecera clicable: botón real que rellena toda la altura de la tarjeta */
.proyecto-cab-h{ margin:0; font:inherit; font-weight:400; display:flex; flex-direction:column; flex:1 1 auto; }
.proyecto-toggle{
  width:100%; display:flex; flex-direction:column; gap:10px; flex:1 1 auto;
  text-align:left; cursor:pointer;
  background:transparent; border:0;
  padding:26px 24px 20px;
  font:inherit; color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.proyecto-toggle:focus-visible{
  outline:2px solid var(--accent); outline-offset:-3px; border-radius:var(--radius);
}
.proyecto-dato{
  align-self:flex-start; transform-origin:left center;
  font-family:var(--display);
  font-size:27px; font-weight:700; letter-spacing:-.02em; line-height:1.05;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  transition:transform .35s var(--ease);
}
.proyecto.abierto .proyecto-dato{ transform:scale(1.05); }
.proyecto-titulo{ display:block; font-family:var(--display); font-size:16.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.proyecto-pie{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:24px; margin-top:auto;   /* pie (logo + icono) anclado siempre abajo */
}
.proyecto-logo{
  height:var(--h, 15px); width:auto;
  filter:grayscale(1) opacity(.45);
  transition:filter .35s var(--ease);
}
.proyecto:hover .proyecto-logo,
.proyecto.abierto .proyecto-logo{ filter:none; }

/* Icono +/- (indicador de desplegable) */
.proyecto-mas{
  position:relative; width:17px; height:17px; flex:none;
  border:1px solid var(--line); border-radius:50%;
  color:var(--accent);
  transition:transform .4s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.proyecto-mas::before, .proyecto-mas::after{
  content:""; position:absolute; left:50%; top:50%;
  background:currentColor; border-radius:2px;
  transform:translate(-50%,-50%);
  transition:opacity .3s var(--ease), transform .35s var(--ease);
}
.proyecto-mas::before{ width:9px; height:1.6px; }   /* barra horizontal */
.proyecto-mas::after{ width:1.6px; height:9px; }    /* barra vertical → se oculta al abrir */
.proyecto:hover .proyecto-mas{ border-color:rgba(31,111,208,.4); }
.proyecto.abierto .proyecto-mas{
  transform:rotate(180deg);   /* giro sutil; la barra horizontal sigue horizontal → "−" */
  border-color:var(--accent); background:var(--accent-soft);
}
.proyecto.abierto .proyecto-mas::after{ opacity:0; }   /* oculta la barra vertical: + → − */

/* Panel desplegable: animación suave de altura (grid) + opacidad */
.proyecto-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.proyecto.abierto .proyecto-panel{ grid-template-rows:1fr; }
.proyecto-panel-in{ overflow:hidden; min-height:0; }
.proyecto-desc{
  font-size:14px; color:var(--muted);
  margin:0 24px 22px; padding-top:16px;
  border-top:1px solid var(--line-soft);
  opacity:0; transform:translateY(-6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.proyecto.abierto .proyecto-desc{ opacity:1; transform:none; transition-delay:.08s; }

/* ---------- MÉTODO · LÍNEA DE METRO ----------
   Una vía (SVG) conecta los 5 movimientos como estaciones. El trazado
   se calcula en JS con la posición real de los nodos y se dibuja con el
   scroll (stroke-dashoffset); un punto-tren viaja en cabeza y cada
   estación se enciende al llegar la vía. */
.metro{ position:relative; margin-top:14px; }
.metro-svg{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible;
  z-index:0;
}
.metro-via-fondo{
  fill:none; stroke:var(--line); stroke-width:2;
  stroke-dasharray:2 8; stroke-linecap:round;   /* vía punteada aún sin recorrer */
}
.metro-via{
  fill:none; stroke:url(#metroGrad); stroke-width:3;
  stroke-linecap:round;
  filter:drop-shadow(0 1px 6px rgba(31,111,208,.28));
}
.metro-tren{
  fill:#fff; stroke:var(--accent); stroke-width:3;
  filter:drop-shadow(0 2px 8px rgba(31,111,208,.5));
  opacity:0;
}
.pilares{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  gap:clamp(40px, 6vh, 62px);
}
/* Estación: nodo circular + contenido. Las pares se alinean a la derecha
   (nodo al canto exterior) para que la vía zigzaguee entre ambos lados. */
.pilar{
  display:flex; align-items:flex-start; gap:18px;
}
.pilar:nth-child(even){ flex-direction:row-reverse; }
.pilar:nth-child(even) .pilar-cuerpo{ text-align:right; }
.pilar:nth-child(even) .pilar-desc{ margin-left:auto; }
.pilar-nodo{
  flex:none; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--panel);
  border:2px solid var(--line);
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  color:var(--muted-2);
  box-shadow:var(--shadow-sm);
  transition:border-color .35s var(--ease), color .35s var(--ease),
             background .35s var(--ease), box-shadow .35s var(--ease),
             transform .35s var(--ease);
}
.pilar-cuerpo{
  padding-top:3px;
  flex:1 1 auto; min-width:0;   /* permite encoger y envolver el texto en móvil */
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.pilar-titulo{ font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:-.015em; }
.pilar-desc{ font-size:15px; color:var(--muted); max-width:52ch; margin-top:6px; }
/* apagado hasta que llega la vía (solo con JS y motion disponibles) */
html.js:not(.sin-motion) .pilar:not(.encendida) .pilar-cuerpo{
  opacity:.3; transform:translateY(5px);
}
.pilar.encendida .pilar-nodo{
  border-color:transparent; color:#fff;
  background:var(--grad);
  box-shadow:0 0 0 5px rgba(31,111,208,.14), 0 6px 16px rgba(31,111,208,.32);
  transform:scale(1.1);
}

/* ---------- COMPETENCIAS ---------- */
.comp-sub{
  color:var(--muted);
  font-size:clamp(15px, 1.15vw, 17px);
  max-width:64ch;
  margin:16px 0 34px;
}
.comp-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.comp-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:24px 22px;
  display:flex; flex-direction:column;
  transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s;
}
.comp-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(31,111,208,.24);
}
/* tarjeta destacada: más ancha y con un lavado de color de estudio */
.comp-card--stack{
  grid-column:span 2;
  background:
    radial-gradient(120% 150% at 0% 0%, var(--accent-soft), transparent 52%),
    var(--panel);
  box-shadow:var(--shadow-sm), var(--shadow-md);
}
.comp-card--idiomas{ grid-column:span 1; }

/* icono minimalista en pastilla */
.comp-ico{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:12px;
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid rgba(31,111,208,.18);
  margin-bottom:16px;
}
.comp-ico svg{ width:23px; height:23px; }

.comp-card-titulo{ font-family:var(--display); font-weight:600; font-size:18px; line-height:1.2; color:var(--ink); }
.comp-card--stack .comp-card-titulo{ font-size:clamp(20px, 1.8vw, 24px); }
.comp-card-desc{ color:var(--muted); font-size:14px; line-height:1.55; margin-top:9px; }

/* chips modernos: pastilla con leve degradado y sombra */
.comp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:18px; }
.comp-chips li{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em;
  color:var(--accent-2);
  background:linear-gradient(180deg, #ffffff, var(--accent-soft));
  border:1px solid rgba(31,111,208,.22);
  border-radius:999px; padding:6px 12px;
  box-shadow:var(--shadow-sm);
}
/* en la destacada los chips van justo bajo el texto (sin hueco central) */
.comp-card--stack .comp-chips{ margin-top:20px; }
.comp-card--stack .comp-chips li{ font-size:12px; padding:7px 14px; }

/* idiomas con barras de nivel */
.comp-idiomas-intro{ color:var(--muted); font-size:13.5px; line-height:1.5; margin-top:6px; }
.comp-idiomas-list{ display:flex; flex-direction:column; gap:15px; margin-top:auto; padding-top:20px; }
.comp-idiomas-list li{ display:flex; flex-direction:column; gap:7px; }
.idioma-top{ display:flex; flex-direction:column; gap:2px; }
.idioma-nombre{ font-weight:600; font-size:14.5px; color:var(--ink); }
.idioma-meta{ font-family:var(--mono); font-size:11px; color:var(--accent-2); letter-spacing:.02em; }
.idioma-barra{ height:6px; border-radius:999px; background:var(--accent-soft); overflow:hidden; }
.idioma-barra > span{ display:block; height:100%; width:var(--n, 50%); border-radius:999px; background:var(--grad); }

/* ---------- COLABORACIONES ---------- */
.colab-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
  margin-top:6px;
}
.colab-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:24px 22px;
  display:flex; flex-direction:column;
  transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s;
}
.colab-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(31,111,208,.24); }
/* una tarjeta con más presencia (lavado de color de estudio) */
.colab-card--destacada{
  background:
    radial-gradient(130% 150% at 100% 0%, var(--accent-soft), transparent 55%),
    var(--panel);
  box-shadow:var(--shadow-sm), var(--shadow-md);
}
.colab-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
/* microetiqueta */
.colab-badge{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-2);
  background:var(--accent-soft);
  border:1px solid rgba(31,111,208,.22);
  border-radius:999px; padding:5px 11px; white-space:nowrap;
}
.colab-card--destacada .colab-badge{ background:var(--grad); color:#fff; border-color:transparent; }
.colab-titulo{ font-family:var(--display); font-weight:600; font-size:19px; line-height:1.2; color:var(--ink); }
.colab-desc{ color:var(--muted); font-size:14px; line-height:1.55; margin-top:9px; }

/* frase manifiesto */
.colab-manifiesto{
  margin:34px 0 30px;
  padding:22px 26px;
  border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  background:linear-gradient(90deg, var(--accent-soft), transparent 92%);
  font-family:var(--display);
  font-size:clamp(17px, 1.5vw, 21px);
  line-height:1.42; color:var(--ink); font-weight:500;
  max-width:72ch;
}
/* CTA de la sección */
.colab-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.colab-cta-tags{
  font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--muted-2);
}

/* ---------- CONTACTO ---------- */
.contacto{ padding-bottom:60px; }
.contacto-cabecera{
  display:flex; align-items:center; gap:22px;
  margin-bottom:26px;
}
.contacto-cabecera .titulo{ margin-bottom:0; }
.contacto-avatar{
  width:76px; height:76px; border-radius:50%;
  flex-shrink:0;
  object-fit:cover; object-position:center 12%;
  background:linear-gradient(180deg, #ffffff, #e7ebf0);
  border:2px solid #fff;
  box-shadow:0 0 0 3px rgba(31,111,208,.35), 0 12px 26px rgba(22,27,34,.14);
}
.contacto-datos{
  margin-top:38px;
  border-top:1px solid var(--line);
}
.contacto-linea{
  display:flex; align-items:baseline; gap:26px;
  padding:20px 4px;
  border-bottom:1px solid var(--line);
  transition:background .25s, padding-left .3s var(--ease);
}
.contacto-datos .contacto-linea:last-child{ border-bottom:none; }
a.contacto-linea:hover{ background:var(--accent-soft); padding-left:14px; }
.contacto-label{
  font-family:var(--mono); font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted-2);
  width:88px; flex-shrink:0;
}
.contacto-valor{
  font-family:var(--display);
  font-size:clamp(17px, 1.8vw, 22px);
  font-weight:600; letter-spacing:-.01em;
}
a .contacto-valor{ color:var(--ink); }
a.contacto-linea:hover .contacto-valor{ color:var(--accent-deep); }

/* Acciones de contacto: descargar CV + LinkedIn */
.contacto-acciones{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:30px;
}
.contacto-acciones .btn{
  display:inline-flex; align-items:center; gap:10px;
}
.contacto-acciones .btn svg{ flex:none; }

.footer{
  margin-top:72px;
  padding-top:22px;
  border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:10px 24px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted-2);
  font-family:var(--mono); letter-spacing:.03em;
}
.footer-enlaces{ display:flex; align-items:center; gap:10px; }
.footer-enlaces i{ font-style:normal; color:var(--line); }
.footer-enlaces a{ color:var(--muted-2); transition:color .25s; }
.footer-enlaces a:hover{ color:var(--accent-deep); }

/* ---------- REVEALS ----------
   Solo se ocultan si hay JS (html.js la pone un script inline en el head):
   sin JavaScript la página entera queda visible. */
html.js .reveal{ opacity:0; transform:translateY(26px); }
html.sin-motion .reveal{ opacity:1; transform:none; }

/* ---------- FOCO VISIBLE ---------- */
a:focus-visible, .btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible, .nav-cta:focus-visible{ border-radius:999px; }
.seccion:focus{ outline:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Pantallas medianas: carril más estrecho */
@media (max-width: 1380px){
  :root{ --rail-w:clamp(310px, 31vw, 480px); }
  .hito-toggle{ padding-right:112px; }
}

/* Sin carril: la figura desaparece, entra el retrato en el hero */
@media (max-width: 1080px){
  .figura{ display:none; }
  .page{ padding-right:0; }
  .hero{ padding-top:130px; min-height:auto; padding-bottom:40px; }
  .hero-retrato{
    display:block; position:relative;
    margin:28px 0 0;
    max-width:250px;
  }
  /* halo de estudio detrás del recorte, para que no parezca pegatina */
  .hero-retrato::before{
    content:"";
    position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
    width:118%; aspect-ratio:1 / 1.06; border-radius:50%;
    background:
      radial-gradient(58% 54% at 50% 42%, rgba(255,255,255,.72), transparent 70%),
      radial-gradient(60% 60% at 50% 56%, var(--accent-glow), transparent 72%);
    z-index:0; pointer-events:none;
  }
  /* recorte transparente flotando + difuminado de cintura, como el carril */
  .hero-retrato img{
    position:relative; z-index:1;
    width:100%; height:auto;
    filter:drop-shadow(0 14px 26px rgba(22,27,34,.13));
    -webkit-mask-image:linear-gradient(to bottom, #000 0 96%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(to bottom, #000 0 96%, rgba(0,0,0,0) 100%);
  }
  .scroll-hint{ display:none; }
  .nav-name{ display:none; }
  /* en pantallas estrechas (sin figura) no hay destino para los flotantes */
  .hero-flotantes{ display:none; }
}

@media (max-width: 760px){
  .proyectos-grid{ grid-template-columns:1fr; }
  .comp-grid{ grid-template-columns:1fr; }
  .comp-card--stack, .comp-card--idiomas{ grid-column:auto; }
  .colab-grid{ grid-template-columns:1fr; }
  /* metro en móvil: sin zigzag, vía casi vertical con nodos a la izquierda */
  .pilar:nth-child(even){ flex-direction:row; }
  .pilar:nth-child(even) .pilar-cuerpo{ text-align:left; }
  .pilar:nth-child(even) .pilar-desc{ margin-left:0; }
  .pilar-nodo{ width:40px; height:40px; font-size:11.5px; }
  .cifras{ grid-template-columns:1fr 1fr; }
  /* nav móvil compacta: se ocultan solo Perfil y Método */
  .nav-links{ gap:14px; }
  .nav-links a{ font-size:15px; }
  .nav-links .nav-sec{ display:none; }
  .nav-cta{ padding:7px 16px; }
  .nav-avatar{ width:44px; height:44px; }
  .timeline{ padding-left:26px; }
  .hito::before{ left:-22px; top:22px; }
  /* el logo pasa a fluir arriba de la cabecera, no flotando */
  .hito-toggle{ padding:18px 18px; }
  .hito-logo{ position:static; margin-bottom:12px; }
  .ghost{ font-size:clamp(84px, 22vw, 130px); right:12px; }
}

@media (max-width: 560px){
  .contacto-cabecera{ flex-direction:column; align-items:flex-start; gap:16px; }
}

@media (max-width: 480px){
  .cifras{ grid-template-columns:1fr; }
  .contacto-linea{ flex-direction:column; gap:6px; }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.js .reveal{ opacity:1; transform:none; }
  .scroll-hint-linea{ animation:none; }
  .marquee-pista{ animation:none; }
}