:root{
    --parchment: #efe6d6;
    --parchment-deep: #e6dac4;
    --ink: #232c36;
    --ink-soft: #3d4753;
    --oxblood: #8c3324;
    --oxblood-soft: #a6432f;
    --bottle: #33473a;
    --gold: #b98c4e;
    --paper-dark: #1e2530;
    --rule: rgba(35,44,54,0.18);
  }

  *{ box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:
      radial-gradient(ellipse 1000px 560px at 50% 0%, rgba(184,140,78,0.08), transparent 65%),
      var(--parchment);
    color:var(--ink);
    font-family:"Source Serif 4", Georgia, serif;
    font-size:17px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }

  ::selection{ background:var(--oxblood); color:var(--parchment); }

  a{ color:var(--oxblood); }

  .wrap{
    max-width:920px;
    margin:0 auto;
    padding:0 clamp(20px, 5vw, 64px);
  }

  /* ---------- header / portada ---------- */
  header.portada{
    padding:clamp(48px,9vw,96px) 0 40px;
    position:relative;
  }
  .eyebrow{
    font-family:"Courier Prime", monospace;
    font-size:12.5px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--bottle);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
  }
  .eyebrow::before{
    content:"";
    width:26px; height:1px;
    background:var(--bottle);
    display:inline-block;
  }

  .portada-grid{
    display:grid;
    grid-template-columns:1fr auto;
    gap:32px;
    align-items:end;
  }

  h1.nombre{
    font-family:"Literata", Georgia, serif;
    font-weight:700;
    font-size:clamp(2.4rem, 6vw, 3.6rem);
    line-height:1.04;
    margin:0 0 10px;
    letter-spacing:-0.01em;
  }
  .rol{
    font-family:"Courier Prime", monospace;
    font-size:15px;
    letter-spacing:.03em;
    color:var(--ink-soft);
    margin:0;
  }
  .rol .sep{ color:var(--gold); margin:0 8px; }

  .retrato{
    width:118px; height:118px;
    border-radius:50%;
    overflow:hidden;
    border:3px solid var(--parchment);
    outline:1.5px solid var(--oxblood-soft);
    outline-offset:4px;
    box-shadow:0 6px 18px rgba(35,44,54,0.18);
    flex-shrink:0;
  }
  .retrato img{ width:100%; height:100%; object-fit:cover; display:block; }

  .contacto-linea{
    margin-top:28px;
    padding-top:18px;
    border-top:1px solid var(--rule);
    display:flex;
    flex-wrap:wrap;
    gap:6px 22px;
    font-family:"Courier Prime", monospace;
    font-size:13.5px;
    color:var(--ink-soft);
  }
  .contacto-linea a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px dotted var(--oxblood-soft); }
  .contacto-linea a:hover{ color:var(--oxblood); }

  /* ---------- annotation / red-pen marginalia ---------- */
  .nota{
    position:relative;
    font-family:"Literata", serif;
    font-style:italic;
    font-weight:500;
    font-size:13.5px;
    color:var(--oxblood);
    line-height:1.35;
  }
  .nota-inline{
    display:inline-block;
    margin-left:10px;
    transform:rotate(-1.4deg);
  }
  .marca{
    color:var(--oxblood);
    font-family:"Literata", serif;
    font-style:italic;
  }
  .subrayado{
    text-decoration:none;
    background-image:linear-gradient(var(--oxblood-soft), var(--oxblood-soft));
    background-size:100% 2px;
    background-repeat:no-repeat;
    background-position:0 92%;
  }

  /* ---------- chapters ---------- */
  section.capitulo{
    padding:52px 0;
    border-top:1px solid var(--rule);
    position:relative;
  }
  .capitulo-head{
    display:grid;
    grid-template-columns:64px 1fr;
    gap:18px;
    align-items:baseline;
    margin-bottom:26px;
  }
  .num-romano{
    font-family:"Literata", serif;
    font-style:italic;
    font-weight:500;
    font-size:15px;
    color:var(--gold);
    border:1px solid var(--gold);
    border-radius:50%;
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
  }
  h2.titulo-capitulo{
    font-family:"Literata", serif;
    font-weight:600;
    font-size:clamp(1.4rem, 3vw, 1.85rem);
    margin:0;
  }

  /* perfil / drop cap */
  .perfil p{
    font-size:18px;
    line-height:1.85;
    color:var(--ink);
    max-width:66ch;
  }
  .perfil p::first-letter{
    font-family:"Literata", serif;
    font-weight:700;
    font-size:3.6em;
    float:left;
    line-height:0.8;
    padding:6px 8px 0 0;
    color:var(--oxblood);
  }

  /* experiencia — indice-style list with dot leaders */
  .indice{ list-style:none; margin:0; padding:0; }
  .indice li{
    display:grid;
    grid-template-columns:96px 1fr auto;
    gap:14px;
    align-items:baseline;
    padding:16px 0;
    border-bottom:1px dashed var(--rule);
  }
  .indice li:last-child{ border-bottom:none; }
  .indice .anio{
    font-family:"Courier Prime", monospace;
    font-size:13px;
    color:var(--bottle);
    letter-spacing:.02em;
  }
  .indice .detalle{ min-width:0; }
  .indice .cargo{
    font-family:"Literata", serif;
    font-weight:600;
    font-size:17px;
    display:block;
  }
  .indice .institucion{
    color:var(--ink-soft);
    font-size:14.5px;
    display:block;
    margin-top:2px;
  }
  .indice .marca-lateral{
    font-family:"Courier Prime", monospace;
    font-size:11.5px;
    color:var(--oxblood);
    white-space:nowrap;
    align-self:center;
  }
  @media (max-width:640px){
    .indice li{ grid-template-columns:1fr; gap:4px; }
    .indice .anio{ order:-1; }
    .indice .marca-lateral{ margin-top:4px; }
  }

  /* formación — grouped */
  .formacion-grupo{ margin-bottom:26px; }
  .formacion-grupo:last-child{ margin-bottom:0; }
  .institucion-titulo{
    font-family:"Literata", serif;
    font-weight:600;
    font-size:16.5px;
    margin:0 0 8px;
    display:flex;
    align-items:baseline;
    gap:10px;
  }
  .institucion-titulo .linea{
    flex:1;
    height:1px;
    background:var(--rule);
  }
  ul.programas{ list-style:none; margin:0; padding:0; }
  ul.programas li{
    padding:6px 0 6px 20px;
    position:relative;
    color:var(--ink);
    font-size:15.5px;
  }
  ul.programas li::before{
    content:"—";
    position:absolute; left:0; color:var(--oxblood-soft);
  }
  ul.programas li .estado{
    font-family:"Courier Prime", monospace;
    font-size:11.5px;
    color:var(--bottle);
    margin-left:8px;
  }

  /* aptitudes — palabras corregidas */
  .palabras{
    display:flex;
    flex-wrap:wrap;
    gap:12px 22px;
    margin-top:6px;
  }
  .palabra{
    font-family:"Literata", serif;
    font-size:17px;
    font-weight:500;
    color:var(--ink);
    text-decoration:none;
    background-image:linear-gradient(var(--oxblood-soft), var(--oxblood-soft));
    background-size:100% 2px;
    background-repeat:no-repeat;
    background-position:0 88%;
    padding-bottom:2px;
  }

  .idiomas{
    margin-top:30px;
    padding-top:22px;
    border-top:1px dashed var(--rule);
    display:flex;
    gap:36px;
    flex-wrap:wrap;
  }
  .idioma dt{
    font-family:"Courier Prime", monospace;
    font-size:11.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--bottle);
    margin:0 0 4px;
  }
  .idioma dd{
    font-family:"Literata", serif;
    font-weight:600;
    font-size:16px;
    margin:0;
  }

  /* colofón / footer */
  footer.colofon{
    margin-top:20px;
    padding:56px 0 64px;
    background:var(--paper-dark);
    color:var(--parchment-deep);
    position:relative;
  }
  footer.colofon .wrap{ position:relative; }
  .sello{
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:1.5px solid var(--oxblood-soft);
    color:var(--oxblood-soft);
    border-radius:6px;
    padding:8px 14px;
    font-family:"Courier Prime", monospace;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    transform:rotate(-2deg);
    margin-bottom:26px;
  }
  footer.colofon h3{
    font-family:"Literata", serif;
    font-weight:600;
    font-size:1.5rem;
    margin:0 0 8px;
    color:var(--parchment);
  }
  footer.colofon p.desc{
    color:#b9b0a0;
    max-width:52ch;
    margin:0 0 28px;
    font-size:15px;
  }
  .colofon-contacto{
    display:flex;
    flex-wrap:wrap;
    gap:10px 28px;
    font-family:"Courier Prime", monospace;
    font-size:13.5px;
  }
  .colofon-contacto a{
    color:var(--parchment-deep);
    text-decoration:none;
    border-bottom:1px dotted var(--gold);
    padding-bottom:2px;
  }
  .colofon-contacto a:hover{ color:var(--gold); }
  .colofon-pie{
    margin-top:36px;
    padding-top:20px;
    border-top:1px solid rgba(239,230,214,0.12);
    font-family:"Courier Prime", monospace;
    font-size:11.5px;
    color:#7d7768;
    letter-spacing:.03em;
  }

  @media (max-width:560px){
    .portada-grid{ grid-template-columns:1fr; }
    .retrato{ order:-1; width:88px; height:88px; }
  }
  /* ---------- whatsapp flotante ---------- */
  .whatsapp-flotante{
    position:fixed;
    right:22px;
    bottom:22px;
    width:56px; height:56px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(35,44,54,0.28);
    z-index:50;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .whatsapp-flotante:hover{
    transform:translateY(-2px) scale(1.04);
    box-shadow:0 12px 26px rgba(35,44,54,0.32);
  }
  .whatsapp-flotante svg{ width:29px; height:29px; display:block; }
  @media (max-width:560px){
    .whatsapp-flotante{ right:16px; bottom:16px; width:52px; height:52px; }
  }