/* ---- shell compartido illanes00.cl ---- */
:root { --fg: var(--ink, #0f1113); }           /* texto sigue al ink del design system (se voltea en oscuro) */
[data-theme=light]{ --bg:#fff; --paper:#fff; --shell-bg:#eaecef; }
[data-theme=dark]{ --fg: var(--ink, #e9eef2); --shell-bg:#191c21; }
body { background: var(--paper, #fff); min-height:100vh; display:flex; flex-direction:column; }        /* fondo sigue el tema (blanco en claro, oscuro en oscuro) */

/* navbar (estática, estilo oficial) */
.topnav { position:sticky; top:0; z-index:20; background:var(--paper,#fff); border-bottom:1px solid var(--line); }
.topnav .bar { max-width:1000px; margin:0 auto; padding:0 1rem; display:flex; align-items:center; gap:.5rem; min-height:52px; flex-wrap:wrap; }
.topnav .brand { font-weight:900; letter-spacing:-.02em; text-decoration:none; color:var(--fg,#0f1113); white-space:nowrap; display:flex; align-items:center; gap:.4rem; }
.topnav .brand:hover { color:var(--c-blue,#3763e0); }
.topnav .sw { display:flex; gap:2px; } .topnav .sw i { width:6px; height:6px; display:inline-block; }
.topnav .links { display:flex; align-items:center; margin-left:auto; }
.topnav .links > a, .topnav .dd > .dd-btn { padding:.5rem .7rem; text-decoration:none; color:var(--muted,#4b5563);
  font-weight:500; font-size:.9rem; white-space:nowrap; background:none; border:none; font:inherit; cursor:pointer; display:inline-flex; align-items:center; }
.topnav .links > a:hover, .topnav .dd:hover > .dd-btn, .topnav .dd:focus-within > .dd-btn, .topnav .links > a.on { color:var(--fg,#0f1113); }
.topnav .dd-btn::after { content:'▾'; font-size:.7em; margin-left:.25rem; }
.topnav .dd { position:relative; }
.topnav .dd-menu { position:absolute; top:100%; left:0; min-width:230px; background:var(--paper,#fff);
  border:1px solid var(--line); display:none; flex-direction:column; z-index:30; box-shadow:0 6px 16px rgba(0,0,0,.08); }
.topnav .dd:hover .dd-menu, .topnav .dd:focus-within .dd-menu { display:flex; }
.topnav .dd-menu a { padding:.5rem .8rem; text-decoration:none; color:var(--fg,#0f1113); font-size:.85rem; white-space:nowrap; }
.topnav .dd-menu a:hover { background:var(--soft,#f6f7f9); color:var(--c-blue,#3763e0); }
.topnav .langs { display:flex; gap:.15rem; margin-left:1rem; padding-left:1rem; border-left:1px solid var(--line); }
.topnav .langs a { font-family:var(--mono,monospace); font-size:.72rem; text-decoration:none; color:var(--muted); padding:.2rem .3rem; }
.topnav .langs a.on { color:var(--fg,#0f1113); font-weight:700; }
.topnav .langs a:hover { color:var(--c-blue,#3763e0); }
.topnav .toggle { background:none; border:1px solid var(--line); color:var(--fg,#0f1113); cursor:pointer; padding:.25rem .5rem; font-size:.85rem; line-height:1; margin-left:.4rem; }
#navcb { display:none; }
.topnav .burger { display:none; margin-left:auto; cursor:pointer; border:1px solid var(--line); padding:.3rem .6rem; font-size:.95rem; user-select:none; }
@media (max-width:760px){
  .topnav .burger { display:inline-block; }
  .topnav .links { order:3; width:100%; margin-left:0; display:none; flex-direction:column; align-items:stretch; padding-bottom:.4rem; }
  #navcb:checked ~ .bar .links { display:flex; }
  .topnav .links > a, .topnav .dd > .dd-btn { width:100%; padding:.6rem .3rem; border-top:1px solid var(--line); }
  .topnav .dd-menu { position:static; display:flex; border:none; box-shadow:none; padding-left:1rem; min-width:0; }
  .topnav .dd-btn::after { display:none; }
  .topnav .langs { padding:.4rem .3rem; }
}

/* layout home (dos columnas) */
.wrap { max-width:1000px; margin:0 auto; padding:2rem 1rem 3rem; display:grid; grid-template-columns:250px 1fr; gap:2.8rem; align-items:start; }
@media (max-width:780px){ .wrap { grid-template-columns:1fr; gap:1.6rem; } }
/* contenedor de página simple (una columna) */
.page { max-width:820px; margin:0 auto; padding:2rem 1rem 4rem; }
.page h1 { font-size:1.7rem; margin:0 0 .3rem; } .page .lead { color:var(--muted); font-size:.95rem; margin:0 0 1.5rem; }
.crumbs { font-family:var(--mono,monospace); font-size:.75rem; color:var(--muted); margin-bottom:1rem; }
.crumbs a { color:var(--muted); text-decoration:none; } .crumbs a:hover { color:var(--c-blue,#3763e0); }

/* bio (columna izq home) */
.bio { position:sticky; top:1rem; }
@media (max-width:780px){ .bio { position:static; } }
.bio .photo { width:100%; max-width:210px; display:block; border:1px solid var(--line); }
.bio h1 { font-size:1.5rem; margin:.9rem 0 .25rem; line-height:1.1; }
.bio .titles { font-size:.8rem; font-weight:600; line-height:1.3; margin:0 0 .5rem; }
.bio .tagline { font-size:.88rem; line-height:1.45; margin:0 0 .5rem; color:var(--muted); }
.bio .place { font-size:.82rem; color:var(--muted); margin:0 0 .7rem; }
.bio .cv { display:inline-block; font-family:var(--mono,monospace); font-size:.82rem; text-decoration:none; color:var(--c-blue,#3763e0); border:1px solid var(--line); padding:.4rem .7rem; }
.bio .cv:hover { border-color:var(--c-blue,#3763e0); }
.bio hr { border:none; border-top:1px solid var(--line); margin:1rem 0; }
.bio .social { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.bio .social a { text-decoration:none; color:var(--fg); font-family:var(--mono,monospace); font-size:.84rem; padding:0; display:flex; align-items:center; gap:.55rem; }
.bio .social a:hover { color:var(--c-blue,#3763e0); }
.bio .thumbs { display:flex; gap:.4rem; margin-top:1rem; }
.bio .thumbs .ph { flex:1; aspect-ratio:1; border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; font-size:.6rem; color:var(--muted); }

/* iconos sociales (máscara CSS) */
.s-icon { display:inline-block; width:1em; height:1em; background:currentColor; -webkit-mask-position:center; mask-position:center; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; flex:none; }
.s-github{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 .5C5.6.5.5 5.6.5 12c0 5.1 3.3 9.4 7.8 10.9.6.1.8-.2.8-.6v-2c-3.2.7-3.8-1.4-3.8-1.4-.5-1.3-1.3-1.6-1.3-1.6-1-.7.1-.7.1-.7 1.1.1 1.7 1.2 1.7 1.2 1 1.7 2.7 1.2 3.4.9.1-.7.4-1.2.7-1.5-2.5-.3-5.2-1.3-5.2-5.6 0-1.2.4-2.2 1.2-3-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.2 1.2.9-.3 1.9-.4 2.9-.4s2 .1 2.9.4c2.2-1.5 3.2-1.2 3.2-1.2.6 1.7.2 2.9.1 3.2.7.8 1.2 1.8 1.2 3 0 4.3-2.7 5.3-5.2 5.6.4.3.8 1 .8 2v3c0 .3.2.7.8.6 4.5-1.5 7.8-5.8 7.8-10.9C23.5 5.6 18.4.5 12 .5z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 .5C5.6.5.5 5.6.5 12c0 5.1 3.3 9.4 7.8 10.9.6.1.8-.2.8-.6v-2c-3.2.7-3.8-1.4-3.8-1.4-.5-1.3-1.3-1.6-1.3-1.6-1-.7.1-.7.1-.7 1.1.1 1.7 1.2 1.7 1.2 1 1.7 2.7 1.2 3.4.9.1-.7.4-1.2.7-1.5-2.5-.3-5.2-1.3-5.2-5.6 0-1.2.4-2.2 1.2-3-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.2 1.2.9-.3 1.9-.4 2.9-.4s2 .1 2.9.4c2.2-1.5 3.2-1.2 3.2-1.2.6 1.7.2 2.9.1 3.2.7.8 1.2 1.8 1.2 3 0 4.3-2.7 5.3-5.2 5.6.4.3.8 1 .8 2v3c0 .3.2.7.8.6 4.5-1.5 7.8-5.8 7.8-10.9C23.5 5.6 18.4.5 12 .5z'/></svg>")}
.s-linkedin{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19 0H5a5 5 0 0 0-5 5v14a5 5 0 0 0 5 5h14a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5zM8 19H5V8h3v11zM6.5 6.7a1.8 1.8 0 1 1 0-3.6 1.8 1.8 0 0 1 0 3.6zM20 19h-3v-5.6c0-3.4-4-3.1-4 0V19h-3V8h3v1.8c1.4-2.6 7-2.8 7 2.5V19z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19 0H5a5 5 0 0 0-5 5v14a5 5 0 0 0 5 5h14a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5zM8 19H5V8h3v11zM6.5 6.7a1.8 1.8 0 1 1 0-3.6 1.8 1.8 0 0 1 0 3.6zM20 19h-3v-5.6c0-3.4-4-3.1-4 0V19h-3V8h3v1.8c1.4-2.6 7-2.8 7 2.5V19z'/></svg>")}
.s-twitter{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M23 4.9c-.8.4-1.7.6-2.6.8 .9-.6 1.6-1.4 2-2.5-.9.5-1.9.9-2.9 1.1C18.6 3.4 17.4 3 16.1 3c-2.5 0-4.5 2-4.5 4.5 0 .3 0 .7.1 1C8 8.3 4.9 6.6 2.9 4c-.4.6-.6 1.4-.6 2.2 0 1.6.8 3 2 3.8-.7 0-1.4-.2-2-.5v.1c0 2.2 1.5 4 3.6 4.4-.4.1-.8.2-1.2.2-.3 0-.6 0-.8-.1 .6 1.8 2.2 3.1 4.2 3.2-1.5 1.2-3.5 1.9-5.6 1.9-.4 0-.7 0-1.1-.1 2 1.3 4.4 2 6.9 2 8.3 0 12.8-6.9 12.8-12.8v-.6c.9-.6 1.6-1.4 2.2-2.3z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M23 4.9c-.8.4-1.7.6-2.6.8 .9-.6 1.6-1.4 2-2.5-.9.5-1.9.9-2.9 1.1C18.6 3.4 17.4 3 16.1 3c-2.5 0-4.5 2-4.5 4.5 0 .3 0 .7.1 1C8 8.3 4.9 6.6 2.9 4c-.4.6-.6 1.4-.6 2.2 0 1.6.8 3 2 3.8-.7 0-1.4-.2-2-.5v.1c0 2.2 1.5 4 3.6 4.4-.4.1-.8.2-1.2.2-.3 0-.6 0-.8-.1 .6 1.8 2.2 3.1 4.2 3.2-1.5 1.2-3.5 1.9-5.6 1.9-.4 0-.7 0-1.1-.1 2 1.3 4.4 2 6.9 2 8.3 0 12.8-6.9 12.8-12.8v-.6c.9-.6 1.6-1.4 2.2-2.3z'/></svg>")}
.s-instagram{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='2' y='2' width='20' height='20' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='6.5' r='1' fill='black' stroke='none'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='2' y='2' width='20' height='20' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='6.5' r='1' fill='black' stroke='none'/></svg>")}
.s-letterboxd{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='6.5' cy='12' r='4'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='12' r='4'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='6.5' cy='12' r='4'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='12' r='4'/></svg>")}
.s-mail{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='5' width='18' height='14'/><polyline points='3 7 12 13 21 7'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='5' width='18' height='14'/><polyline points='3 7 12 13 21 7'/></svg>")}

/* editorial / secciones */
.hero-tag { font-size:1.12rem; line-height:1.5; margin:.2rem 0 2rem; }
section { margin-bottom:2.4rem; scroll-margin-top:4.5rem; }
.sec-title { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-family:var(--mono,monospace); margin:0 0 .8rem; padding-bottom:.3rem; border-bottom:1px solid var(--line); }
.sec-lead { font-size:.88rem; color:var(--muted); margin:-.35rem 0 .9rem; }
.sec-lead a, .focus h3 a, .orgs a { color:var(--c-blue,#3763e0); }
.subhead { font-family:var(--mono,monospace); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--c-blue,#3763e0); margin:1.2rem 0 .5rem; }
.subhead:first-of-type { margin-top:0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
@media (max-width:560px){ .grid2,.grid3 { grid-template-columns:1fr; } }
.focus { border:1px solid var(--line); padding:.8rem .9rem; }
.focus h3 { font-size:.95rem; margin:0 0 .15rem; } .focus h3 a { text-decoration:none; }
.focus .meta { font-family:var(--mono,monospace); font-size:.72rem; color:var(--c-green,#0b7e59); margin:0 0 .35rem; }
.focus p.b { font-size:.85rem; margin:0; line-height:1.4; }
.proj { display:flex; gap:.7rem; border:1px solid var(--line); padding:.7rem .8rem; text-decoration:none; color:inherit; align-items:flex-start; }
.proj:hover { border-color:var(--c-blue,#3763e0); }
.proj .mark { flex:none; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; font-family:var(--mono,monospace); font-weight:700; font-size:.8rem; letter-spacing:.02em; background:var(--c-blue,#3763e0); color:#fff; }
.proj .tag { font-family:var(--mono,monospace); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.proj h3 { font-size:.9rem; margin:.1rem 0 .2rem; }
.proj p { font-size:.8rem; color:var(--muted); margin:0; line-height:1.35; }
.pubs { margin:.2rem 0 .6rem; padding-left:1.1rem; } .pubs li { margin-bottom:.4rem; font-size:.9rem; }
.cvbox { border:1px solid var(--line); padding:.9rem 1rem; }
.cvbox ul { margin:.3rem 0 .7rem 1.1rem; padding:0; } .cvbox li { margin-bottom:.2rem; font-size:.9rem; }
.orgs { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width:560px){ .orgs{grid-template-columns:1fr} }
.orgs a { text-decoration:none; font-weight:600; font-size:.9rem; }
.orgs .m { color:var(--muted); font-size:.8rem; margin-top:.1rem; }
.btn { display:inline-block; text-decoration:none; border:1px solid var(--fg); color:var(--fg); padding:.35rem .8rem; font-size:.85rem; }
.btn:hover { background:var(--fg); color:var(--bg); }
.mini { font-size:.78rem; color:var(--muted); margin:.7rem 0 .3rem; }
.posters { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:.5rem; }
.posters a, .covers-sq a { text-decoration:none; }
.posters .p { border:1px solid var(--line); aspect-ratio:2/3; overflow:hidden; background:var(--soft,#f6f7f9); }
.covers-sq { display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:.5rem; }
.covers-sq .p { border:1px solid var(--line); aspect-ratio:1; overflow:hidden; background:var(--soft,#f6f7f9); }
.posters .p img, .covers-sq .p img { width:100%; height:100%; object-fit:cover; display:block; }
.posters .cap, .covers-sq .cap { font-size:.66rem; color:var(--muted); margin-top:.15rem; line-height:1.2; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.genres { font-size:.82rem; color:var(--muted); margin:.5rem 0; }
.todo { font-size:.7rem; color:#b06; background:#fff3f6; border:1px dashed #e9a; padding:.05rem .35rem; }
[data-theme=dark] .todo { background:#2a1a20; }

/* --- subheads en gris (en qué ando) --- */
.subhead { color: var(--c-grey,#616e7c); }
.subhead.soft { color: var(--muted); }
/* flecha "ver" en tarjetas focus */
.focus .go { font-family:var(--mono,monospace); font-size:.8rem; color:var(--c-blue,#3763e0); text-decoration:none; }
.focus .go:hover { text-decoration:underline; }

/* --- footer custom: organigrama izq→der --- */
.sitefoot { border-top:1px solid var(--line); margin-top:2rem; background:var(--paper,#fff); }
.sitefoot .in { max-width:1000px; margin:0 auto; padding:1.6rem 1rem; }
.sitefoot .cols { display:flex; gap:1.5rem; flex-wrap:wrap; }
.sitefoot .col { min-width:150px; }
.sitefoot .col h4 { font-family:var(--mono,monospace); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 .5rem; }
.sitefoot .col a { display:block; text-decoration:none; color:var(--fg); font-size:.82rem; padding:.12rem 0; }
.sitefoot .col a:hover { color:var(--c-blue,#3763e0); }
.sitefoot .col small { color:var(--muted); font-size:.72rem; }
.sitefoot .bottom { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.78rem; color:var(--muted); }
.sitefoot .bottom a { color:var(--muted); text-decoration:none; }
.sitefoot .bottom a:hover { color:var(--c-blue,#3763e0); }
.sitefoot .bottom .ds { margin-left:auto; }

/* banner arte isométrico */
.iso-banner { border:none; margin:0 0 1.4rem; position:relative; }
.iso-banner img { width:100%; height:auto; display:block; }
.iso-banner .cap { text-align:right; padding:.2rem 0 0; color:var(--muted); font-size:.74rem; }
.iso-banner .cap a { color:var(--c-blue,#3763e0); }

/* redes fuera del sidebar (ej. página de contacto) heredan el mismo estilo */
.page .social { list-style:none; margin:0; padding:0; }
.page .social a { text-decoration:none; color:var(--fg); font-family:var(--mono,monospace); font-size:.86rem; padding:.02rem 0; display:flex; align-items:center; gap:.55rem; }
.page .social a:hover { color:var(--c-blue,#3763e0); }