/* Titular: DM Serif Display — la misma que usa el Instituto de Comunicación.
     Cuerpo: Inter — también la suya. Autohospedadas, sin llamadas externas. */
  @font-face{
    font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;
    src:url("/fonts/dm-serif-display-latin.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
  }
  @font-face{
    font-family:"Inter";font-style:normal;font-weight:300 600;font-display:swap;
    src:url("/fonts/inter-latin.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
  }

  :root{
    --ground:#050505; --card:#101013; --raise:#16161a;
    --line:rgba(194,199,207,.12); --line-soft:rgba(194,199,207,.07);
    --silver:#c2c7cf; --silver-dim:#8f959f;
    --ink:#f4f5f7; --ink-2:#a5aab3; --ink-3:#6e737c;
    --serif:"DM Serif Display",Georgia,"Times New Roman",serif;
    --sans:"Inter",ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;
    --measure:66ch;
  }
  /* Sin esto el navegador pinta su seleccion clara por defecto sobre el
     fondo negro y el bloque se ve lavado al arrastrar el raton encima. */
  ::selection{background:var(--silver);color:#050505;text-shadow:none}
  ::-moz-selection{background:var(--silver);color:#050505;text-shadow:none}
  /* La seleccion no puede repintar el degradado de las metricas: ahi el texto
     es transparente y quedaria invisible. */
  .metric .n::selection{background:var(--silver);-webkit-text-fill-color:#050505}
  html{-webkit-tap-highlight-color:rgba(194,199,207,.18)}
  /* Sin color-scheme el navegador se cree que la pagina es clara y pinta de
     BLANCO el lienzo, la zona de rebote al final del scroll, las barras y los
     controles nativos, y html transparente dejaba verlo por detras. El fondo
     en body no basta: hay que pintar los dos. */
  :root{color-scheme:dark}
  html{background:var(--ground)}
  html,body{min-height:100%}
  body{overscroll-behavior-y:none}

  *{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
  body{
    background:var(--ground);color:var(--ink);
    font-family:var(--sans);font-weight:300;line-height:1.62;font-size:16px;
  }
  .wrap{max-width:940px;margin:0 auto;padding:0 28px 96px}
  a{color:inherit;text-decoration:none}
  .link{color:var(--silver);border-bottom:1px solid rgba(194,199,207,.26)}
  .link:hover{border-bottom-color:var(--silver)}
  a:focus-visible{outline:2px solid var(--silver);outline-offset:3px;border-radius:2px}

  .eyebrow{
    font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
    color:var(--silver-dim);
  }

  /* ── Hero ───────────────────────────────────────────── */
  .hero{padding:74px 0 54px;position:relative}
  .hero::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg,rgba(194,199,207,.35),rgba(194,199,207,.04) 60%,transparent);
  }
  .hero-grid{display:grid;grid-template-columns:1fr 232px;gap:44px;align-items:center}
  .name{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(42px,7vw,68px);line-height:1.04;letter-spacing:-.005em;
    margin:16px 0 16px;text-wrap:balance;
  }
  .role{font-size:16.5px;color:var(--ink-2);max-width:36ch}
  .role b{color:var(--ink);font-weight:500}
  .contact{
    display:flex;flex-wrap:wrap;gap:9px 24px;margin-top:26px;
    font-size:14px;color:var(--ink-2);
  }
  .portrait{
    width:232px;aspect-ratio:4/5;object-fit:cover;object-position:center 15%;
    border-radius:14px;border:1px solid var(--line);
    filter:grayscale(.2) contrast(1.03);
  }

  /* ── Secciones ──────────────────────────────────────── */
  section{padding:52px 0;border-bottom:1px solid var(--line-soft)}
  section:last-of-type{border-bottom:0;padding-bottom:8px}
  h2{
    font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
    color:var(--silver-dim);margin-bottom:28px;
  }
  h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.25;color:var(--ink);text-wrap:balance}
  p{max-width:var(--measure);color:var(--ink-2)}
  .lead{font-size:18px;line-height:1.7;color:var(--ink)}
  .lead b{font-weight:500;color:#fff}

  /* ── Principios ─────────────────────────────────────── */
  /* Dos columnas fijas: con cuatro fichas da un 2x2 exacto. Con auto-fit
     armaba tres columnas y la cuarta quedaba sola dejando un hueco. */
  .principles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft)}
  .principle{background:var(--ground);padding:26px 24px 28px}
  .principle h3{font-size:18px;margin-bottom:10px}
  .principle p{font-size:14.5px;color:var(--ink-3)}
  .principle.wide{grid-column:1/-1}
  .principle.wide p{max-width:74ch}

  .flow{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:2px 0 13px}
  .flow span{
    position:relative;
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
    border:1px solid var(--line-soft);border-radius:3px;padding:5px 8px;
  }
  .flow span.on{color:#050505;background:var(--silver);border-color:var(--silver);font-weight:500}
  .flow span + span{margin-left:11px}
  /* El conector va DESPUES de cada ficha, no antes de la siguiente: si la
     cadena salta de linea, la rayita queda al final del renglon (se lee bien)
     y no colgando al principio del siguiente (se lee roto). */
  .flow span:not(:last-child)::after{
    content:"";position:absolute;right:-14px;top:50%;width:7px;height:1px;
    background:var(--silver);opacity:.45;
  }

  /* ── Experiencia ────────────────────────────────────── */
  .job{display:grid;grid-template-columns:186px 1fr;gap:30px;padding:30px 0}
  .job + .job{border-top:1px solid var(--line-soft)}
  .job-when{font-size:13px;color:var(--ink-3);padding-top:5px}
  .job-when .tag{display:block;color:var(--silver-dim);margin-top:6px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
  .brand{display:flex;align-items:center;gap:14px;margin-bottom:4px;flex-wrap:wrap}
  .brand img{
    filter:brightness(0) invert(1);opacity:.92;
    height:26px;width:auto;display:block;
  }
  ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:10px}
  li{position:relative;padding-left:19px;font-size:15px;color:var(--ink-2);max-width:var(--measure)}
  li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--silver);opacity:.5}
  li b{color:var(--ink);font-weight:500}

  /* ── Métricas ───────────────────────────────────────── */
  .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;background:var(--line-soft);margin-top:14px}
  .metric{background:var(--ground);padding:26px 20px}
  .metric .n{
    font-family:var(--serif);font-size:40px;line-height:1;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(160deg,#fff,var(--silver-dim));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .metric .l{font-size:12.5px;color:var(--ink-3);margin-top:12px;line-height:1.45}

  /* ── Sistemas ───────────────────────────────────────── */
  .systems{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px}
  .system{
    background:var(--card);border:1px solid var(--line-soft);border-radius:6px;
    padding:22px 22px 24px;transition:border-color .5s cubic-bezier(.16,1,.3,1);
  }
  .system:hover{border-color:rgba(194,199,207,.24)}
  .system .eyebrow{font-size:10px}
  .system h3{margin:12px 0 9px;font-size:18px}
  .system p{font-size:14px;color:var(--ink-3)}

  /* ── Bloque ICO ─────────────────────────────────────── */
  .ico{
    border-left:2px solid var(--silver);
    background:linear-gradient(90deg,rgba(194,199,207,.055),transparent 70%);
    padding:26px 28px;border-radius:0 6px 6px 0;margin-top:28px;
  }
  .ico h3{margin-bottom:12px}

  /* ── Certificados ───────────────────────────────────── */
  .certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
  figure{background:var(--raise);border:1px solid var(--line-soft);border-radius:6px;overflow:hidden}
  figure img{width:100%;display:block;background:#fff}
  figcaption{padding:13px 15px;font-size:12px;color:var(--ink-3);line-height:1.45}

  /* ── Cierre ─────────────────────────────────────────── */
  .plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:var(--line-soft)}
  .step{background:var(--ground);padding:26px 22px}
  .step .eyebrow{color:var(--silver)}
  .step h3{margin:11px 0 9px;font-size:18px}
  .step p{font-size:14px;color:var(--ink-3)}

  .wa{width:1em;height:1em;flex:none;color:var(--silver)}
  .wa-link{display:inline-flex;align-items:center;gap:7px}

  .fade{animation:up .9s cubic-bezier(.16,1,.3,1) both}
  @keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.fade{animation:none}*{transition:none!important}}

  @media (max-width:680px){
    .hero{padding:46px 0 40px}
    .hero-grid{grid-template-columns:1fr;gap:28px}
    .portrait{width:190px}
    .job{grid-template-columns:1fr;gap:12px}
    .principles{grid-template-columns:1fr}
    .wrap{padding:0 20px 72px}
  }