/* =========================================================
   rodrigoorellana.cl — hoja principal
   Direccion: Expediente · Paleta: Indigo electrico
   Tokens cerrados en DESIGN-SYSTEM.md. No introducir colores
   ni tamanos fuera de esta escala.
   ========================================================= */

/* ---------- fuentes auto-alojadas ---------- */
@font-face{
  font-family:'Source Serif 4';
  src:url('../fonts/sourceserif4-var.woff2') format('woff2-variations');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Source Serif 4';
  src:url('../fonts/sourceserif4-italic.woff2') format('woff2-variations');
  font-weight:400 600; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrainsmono-var.woff2') format('woff2-variations');
  font-weight:400 600; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --paper:#EEEDF6;
  --ink:#16141F;
  --mute:#58546B;
  --rule:#CFCDE0;
  --card:#F7F7FB;
  --accent:#4A3AE0;
  --accent-hi:#3A2CC4;
  --band:#16141F;
  --on-band:#EEEDF6;
  --accent-on-band:#8B7DF5;

  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --fs-display:clamp(38px,5.6vw,68px);
  --fs-h2:clamp(26px,3.4vw,40px);
  --fs-h3:19px;
  --fs-body:17px;
  --fs-small:13.5px;
  --fs-label:10.5px;

  --wrap:1120px;
  --measure:68ch;
  --sec:clamp(64px,9vw,128px);
  --gap:clamp(20px,3vw,34px);

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

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--fs-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--accent-hi)}
:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:12px 18px;z-index:200;font-family:var(--mono);font-size:var(--fs-small);
}
.skip:focus{left:12px;top:12px}

h1,h2,h3{margin:0;font-weight:600;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:var(--fs-display);line-height:1.05;letter-spacing:-.025em;max-width:19ch}
h2{font-size:var(--fs-h2);line-height:1.12;max-width:22ch}
h3{font-size:var(--fs-h3);line-height:1.35;letter-spacing:-.01em}
p{margin:0}

/* ---------- utilidades ---------- */
.label{
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.lede{font-size:var(--fs-body);line-height:1.62;color:var(--mute);max-width:var(--measure)}
.small{font-size:var(--fs-small);color:var(--mute)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.btn{
  display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent);color:var(--paper);
  padding:12px 22px;border-radius:6px;border:0;cursor:pointer;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:var(--accent-hi);color:var(--paper);transform:translateY(-1px)}

section{padding:var(--sec) 0}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(30px,4vw,52px)}

/* ---------- cabecera ---------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}
/* padding-block, NO el atajo `padding`: el atajo pisaria el padding
   horizontal que aporta .wrap y el contenido quedaria pegado al borde. */
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:15px}
.brand{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);flex:none}
.brand:hover{color:var(--ink)}
.brand b{color:var(--accent);font-weight:600}

.nav{display:flex;align-items:center;gap:22px;flex:none;min-width:0}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--accent)}

.lang{display:flex;gap:7px;align-items:center;padding-left:16px;border-left:1px solid var(--rule);flex:none}
.lang a{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.lang a[aria-current]{color:var(--accent)}

/* Boton de menu: solo aparece cuando los enlaces se repliegan */
.nav-toggle{
  display:none;background:none;border:1px solid var(--rule);border-radius:6px;
  padding:7px 9px;color:var(--ink);cursor:pointer;line-height:0;flex:none;
}
.nav-toggle svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none}
.nav-toggle .ic-close{display:none}
.nav-toggle[aria-expanded="true"] .ic-open{display:none}
.nav-toggle[aria-expanded="true"] .ic-close{display:block}

/* ---------- portada: heroe ---------- */
.hero{padding-top:clamp(56px,8vw,104px)}
.hero-grid{display:grid;grid-template-columns:150px 1fr;gap:clamp(26px,4vw,52px)}
.hero-meta{display:flex;flex-direction:column;gap:18px}
.hero-meta div{display:flex;flex-direction:column;gap:4px}
.hero-meta .k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.hero-meta .v{font-size:var(--fs-small);line-height:1.45}
.hero-body{display:flex;flex-direction:column;gap:22px}

/* ---------- registro (trayectoria) ---------- */
.rec{display:flex;flex-direction:column}
.rec-row{
  display:grid;grid-template-columns:90px 1fr 220px;gap:var(--gap);
  align-items:baseline;padding:18px 0;border-top:1px solid var(--rule);
}
.rec-row:last-child{border-bottom:1px solid var(--rule)}
.rec-row .yr{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--accent)}
.rec-row .ti{font-size:var(--fs-h3);line-height:1.3}
.rec-row .de{font-size:var(--fs-small);color:var(--mute);line-height:1.5}

/* ---------- casos ---------- */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap)}
.case{
  background:var(--card);border:1px solid var(--rule);border-radius:10px;
  padding:24px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.case:hover{border-color:var(--accent);transform:translateY(-3px)}
.case .de{font-size:var(--fs-small);color:var(--mute);line-height:1.55}

/* ---------- banda oscura ---------- */
.band{background:var(--band);color:var(--on-band)}
.band .label{color:var(--accent-on-band)}
.band .lede{color:color-mix(in srgb,var(--on-band) 68%,transparent)}
.band a{color:var(--accent-on-band)}
.band .btn{background:var(--accent-on-band);color:var(--band)}
.band .btn:hover{background:var(--on-band);color:var(--band)}
.band-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--gap)}

/* ---------- contenido de pagina / articulo ---------- */
.entry{max-width:var(--measure)}
.entry h2{margin:1.6em 0 .5em;font-size:clamp(23px,2.6vw,30px)}
.entry h3{margin:1.4em 0 .4em}
.entry p{margin:0 0 1.15em}
.entry ul,.entry ol{margin:0 0 1.2em;padding-left:1.3em}
.entry li{margin-bottom:.5em}
.entry blockquote{
  margin:1.6em 0;padding-left:22px;border-left:2px solid var(--accent);
  font-style:italic;color:var(--mute);
}
.entry figure{margin:2em 0}
.entry figcaption{font-family:var(--mono);font-size:11.5px;color:var(--mute);margin-top:10px}
.entry table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.entry .table-scroll{overflow-x:auto;margin:1.6em 0}
.entry th,.entry td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule)}
.entry th{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* ---------- listado de escritos ---------- */
.posts{display:flex;flex-direction:column}
.post-row{
  display:grid;grid-template-columns:110px 1fr;gap:var(--gap);
  align-items:baseline;padding:20px 0;border-top:1px solid var(--rule);
}
.post-row:last-child{border-bottom:1px solid var(--rule)}
.post-row .dt{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--accent)}
.post-row h3 a{color:var(--ink)}
.post-row h3 a:hover{color:var(--accent)}
.post-row .ex{font-size:var(--fs-small);color:var(--mute);margin-top:6px;line-height:1.55}

/* ---------- pie ---------- */
.site-foot{border-top:1px solid var(--rule);padding:36px 0}
.foot-in{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.foot-in p{font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.foot-links{display:flex;gap:18px}
.foot-links a{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--mute)}
.foot-links a:hover{color:var(--accent)}

/* ---------- retrato ---------- */
.portrait-sec{padding-top:clamp(34px,5vw,60px);padding-bottom:0}
.portrait{margin:0;border-radius:14px;overflow:hidden;background:var(--ink);line-height:0}
.portrait-img{
  width:100%;height:auto;display:block;
  max-height:min(60vh,520px);object-fit:cover;object-position:center 28%;
}

/* ---------- chips de categoria ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(26px,3.5vw,40px)}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--mute);background:var(--card);
  border:1px solid var(--rule);border-radius:999px;padding:7px 13px;
  transition:border-color .22s var(--ease),color .22s var(--ease);
}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip-n{
  font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--accent);
  border-left:1px solid var(--rule);padding-left:8px;
}
.chip:hover .chip-n{border-left-color:var(--accent)}

/* ---------- cabecera de archivo ---------- */
.arch-head{display:flex;flex-direction:column;gap:14px}

/* ---------- video (facade: sin iframe hasta el clic) ---------- */
.vid-group{margin-top:clamp(28px,4vw,44px)}
.vid-group-t{
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:22px;
}
.vid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap)}
.vid{display:flex;flex-direction:column;gap:11px}
.vid-frame{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;
  background:var(--ink);padding:0;cursor:pointer;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.vid-frame:hover{border-color:var(--accent);transform:translateY(-3px)}
.vid-poster{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.vid-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(22,20,31,.22);transition:background .25s var(--ease);
}
.vid-frame:hover .vid-play{background:rgba(22,20,31,.34)}
.vid-play svg{
  width:56px;height:56px;fill:var(--paper);
  filter:drop-shadow(0 4px 14px rgba(22,20,31,.5));
  transition:transform .25s var(--ease),fill .25s var(--ease);
}
.vid-frame:hover .vid-play svg{transform:scale(1.08);fill:var(--accent)}
.vid-ti{font-size:16.5px;line-height:1.35;font-weight:600;letter-spacing:-.01em;margin:0}
.vid-ev{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--mute);margin:0}
.vid-ifr{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- dos columnas (formacion / reconocimientos) ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px)}
.rec-tight .rec-row{grid-template-columns:82px 1fr;padding:14px 0;row-gap:2px}
.rec-tight .rec-row .ti{font-size:16px}
.rec-tight .rec-row .de{grid-column:2;font-size:13px}

/* ---------- contacto ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:start}
.mail{
  font-family:var(--mono);font-size:14px;letter-spacing:.01em;
  border-bottom:1px solid rgba(139,125,245,.4);padding-bottom:2px;
}
.mail:hover{border-bottom-color:var(--accent-on-band)}

.form{display:flex;flex-direction:column;gap:16px}
.f-row{display:flex;flex-direction:column;gap:7px}
.f-row span{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-on-band);
}
.form input,.form textarea{
  font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--on-band);
  background:rgba(244,243,247,.05);
  border:1px solid rgba(244,243,247,.18);border-radius:8px;
  padding:12px 14px;width:100%;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.form input:focus,.form textarea:focus{
  outline:none;border-color:var(--accent-on-band);background:rgba(244,243,247,.09);
}
.form textarea{resize:vertical;min-height:110px}
.form .btn{align-self:flex-start;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{
  font-family:var(--mono);font-size:13px;line-height:1.5;
  color:var(--accent-on-band);
  border-left:2px solid var(--accent-on-band);padding-left:12px;margin:0;
}

/* ---------- movimiento ---------- */
/* El contenido es visible por defecto. Solo se oculta para animarlo cuando
   hay JavaScript confirmado (clase .js puesta en el <head>). Asi, si el script
   falla, se bloquea o tarda, la pagina nunca queda en blanco. */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .rec-row{grid-template-columns:80px 1fr}
  .rec-row .de{grid-column:2;margin-top:4px}
}
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-meta{flex-direction:row;flex-wrap:wrap;gap:22px}
  .band-in{flex-direction:column;align-items:flex-start}

  /* Los enlaces de seccion se repliegan en un panel desplegable */
  .nav{gap:14px}
  .nav-toggle{display:block}
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:18px;
    padding:22px clamp(20px,5vw,48px) 26px;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    box-shadow:0 18px 30px -24px rgba(22,20,31,.5);
  }
  .nav-links.open{display:flex}
  .nav-links a{font-size:12px}
}
@media (max-width:820px){
  .two-col,.contact-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .post-row{grid-template-columns:1fr;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.rv{opacity:1;transform:none}
}