/* =========================================================
   Jenifer Moltó — rediseño "papel y revelado" (una sola página)
   Lateral fijo + pestañas (fotografía · vídeo · sobre mí) + lightbox.
   Fuente mono (IBM Plex Mono) vía <link> en el <head>.
   ========================================================= */

@font-face { font-family:"Satoshi"; src:url("../fonts/satoshi-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("../fonts/satoshi-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("../fonts/satoshi-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("../fonts/satoshi-900.woff2") format("woff2"); font-weight:900; font-display:swap; }

:root{
  --paper:#F4ECDF;
  --ink:#1d1a17;
  --terracota:#C0392B;
  --cian:#1F4E79;
  --line:rgba(29,26,23,.15);
  --line-soft:rgba(29,26,23,.08);
  --muted:rgba(29,26,23,.55);
  --sans:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --side:clamp(288px,29vw,412px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background-color:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

/* ---------- Lateral fijo ---------- */
.side{
  position:fixed; top:0; left:0; z-index:30;
  width:var(--side); height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  padding:clamp(16px,1.8vw,28px);
  background:var(--paper); border-right:1px solid var(--line);
}
.side-logo{ display:block; }
.side-logo img{ display:block; width:min(372px,100%); height:auto; margin:0 auto; }
.side-nav{ margin-top:clamp(30px,5vh,58px); display:flex; flex-direction:column; align-items:flex-start; gap:clamp(8px,1.4vh,14px); }
.side-nav button{
  background:none; border:0; cursor:pointer; padding:3px 0 3px 18px; position:relative;
  font-family:var(--sans); font-size:clamp(21px,1.9vw,27px); font-weight:500;
  letter-spacing:-.01em; text-transform:lowercase; color:var(--ink);
  transition:color .25s var(--ease), opacity .25s var(--ease);
}
.side-nav button:hover{ opacity:.6; }
.side-nav button::before{
  content:""; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px;
  border-radius:50%; background:var(--terracota); opacity:0; transform:scale(.4);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.side-nav button.active{ color:var(--terracota); }
.side-nav button.active::before{ opacity:1; transform:scale(1); }
.side-foot{ margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:7px; }
.side-foot .hb{ font-size:14px; font-weight:500; }
.side-foot .hb a{ border-bottom:1px solid var(--terracota); }
.side-foot .ig{ font-family:var(--mono); font-size:11px; letter-spacing:.07em; color:var(--muted); }
.side-foot .ig:hover{ color:var(--terracota); }

/* ---------- Contenido ---------- */
.main{ margin-left:var(--side); padding:clamp(26px,3vw,56px) clamp(20px,3vw,56px) clamp(60px,7vw,100px); min-height:100vh; }
.panel{ display:none; }
.panel.active{ display:block; animation:fade .5s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Metadatos mono */
.mono{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* ---------- Carpetas de proyecto ---------- */
.folders{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,38px); }
.folder{ background:none; border:0; cursor:pointer; padding:0; text-align:left; display:block; }
.folder-cover{ aspect-ratio:4/5; overflow:hidden; background:var(--line-soft); }
.folder-cover img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.folder-cap{ margin-top:11px; font-size:clamp(19px,1.8vw,24px); font-weight:500; text-transform:lowercase; letter-spacing:-.01em; }
.folder-cap .n{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--terracota); margin-right:8px; }
@media (hover:hover){ .folder:hover .folder-cover img{ transform:scale(1.04); } .folder:hover .folder-cap{ color:var(--terracota); } }

/* ---------- Vista de proyecto (volver + galería) ---------- */
.back{ background:none; border:0; cursor:pointer; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:0 0 clamp(18px,2.4vw,28px); }
.back:hover{ color:var(--terracota); }
.vcat[hidden]{ display:none; }

/* ---------- Encabezado de estilo ---------- */
.block{ margin-bottom:clamp(44px,6vw,86px); }
.block-head{ display:flex; align-items:baseline; gap:12px; margin:0 0 clamp(16px,2vw,26px); }
.block-head .n{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--terracota); }
.block-head h2{ margin:0; font-size:clamp(26px,3vw,40px); font-weight:500; letter-spacing:-.02em; text-transform:lowercase; }
.block-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* ---------- Galería (columnas, alturas variadas) ---------- */
.gal{ column-count:3; column-gap:clamp(14px,1.6vw,22px); }
.gal .ph{ break-inside:avoid; margin:0 0 clamp(14px,1.6vw,22px); cursor:pointer; position:relative; }
.gal .ph img{ width:100%; height:auto; background:var(--line-soft); transition:transform .5s var(--ease); }
.gal .ph .pn{ position:absolute; top:9px; left:9px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--terracota); opacity:0; transition:opacity .3s var(--ease); mix-blend-mode:difference; }
@media (hover:hover){
  .gal .ph:hover img{ transform:translateY(-5px); }
  .gal .ph:hover .pn{ opacity:1; }
}

/* ---------- Vídeo ---------- */
.vid-grid{ column-count:2; column-gap:clamp(22px,2.6vw,38px); }
.vid{ cursor:pointer; break-inside:avoid; margin:0 0 clamp(26px,3vw,44px); }
.vid .vframe{ position:relative; overflow:hidden; background:var(--line-soft); }
.vid.vert .vframe{ max-width:330px; margin-inline:auto; }
.vid .vframe img{ width:100%; height:auto; display:block; transition:transform .5s var(--ease); }
.vid:hover .vframe img{ transform:scale(1.02); }
.vid .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.vid .play::after{ content:""; width:56px; height:56px; border-radius:50%; background:rgba(244,236,223,.9); box-shadow:0 2px 14px rgba(0,0,0,.2); }
.vid .play::before{ content:""; position:absolute; z-index:1; width:0; height:0; border-left:16px solid var(--ink); border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px; }
.vid .vmeta{ margin-top:12px; display:flex; align-items:baseline; gap:10px; }
.vid .vmeta .n{ font-family:var(--mono); font-size:12px; color:var(--terracota); letter-spacing:.06em; }
.vid .vmeta h3{ margin:0; font-size:clamp(18px,1.7vw,23px); font-weight:500; text-transform:none; letter-spacing:-.01em; }
.vid .vtext{ display:flex; flex-direction:column; gap:4px; }
.vid .vyear{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted); }

/* ---------- Sobre mí ---------- */
.about{ display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:clamp(30px,5vw,72px); align-items:start; max-width:1120px; }
.about-left{ position:sticky; top:clamp(26px,3vw,56px); }
.about-photo{ aspect-ratio:4/5; overflow:hidden; background:var(--line-soft); }
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-links{ margin-top:20px; display:flex; flex-direction:column; gap:7px; }
.about-links a{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--muted); }
.about-links a:hover{ color:var(--terracota); }
.about-links a b{ color:var(--ink); font-weight:500; display:inline-block; width:86px; }
.about-txt{ max-width:62ch; }
.about-txt p{ margin:0 0 18px; font-size:clamp(16px,1.4vw,18px); line-height:1.72; color:#33302b; }
.edu{ margin-top:clamp(30px,4vw,48px); padding-top:26px; border-top:1px solid var(--line); }
.edu h3{ margin:0 0 20px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--terracota); font-weight:500; }
.edu ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.edu .edu-name{ margin:0; font-size:clamp(16px,1.4vw,18px); font-weight:500; }
.edu .edu-meta{ margin:3px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
@media (max-width:820px){ .about-left{ position:static; } }

/* ---------- Posdata (testimonios) ---------- */
.posdata{ max-width:1120px; }
.pd-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px; margin-bottom:clamp(26px,3vw,42px); }
.pd-head h2{ margin:0; font-size:clamp(26px,3vw,40px); font-weight:500; letter-spacing:-.02em; text-transform:lowercase; }
.pd-sub{ margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pd-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(34px,4vw,56px) clamp(28px,4vw,64px); }
.pd{ margin:0; }
.pd blockquote{ margin:0; font-size:clamp(16px,1.4vw,18px); line-height:1.7; color:#33302b; }
.pd blockquote::before{ content:"\201C"; display:block; height:38px; font-family:Georgia,"Times New Roman",serif; font-size:68px; line-height:1; color:var(--terracota); }
.pd figcaption{ margin-top:14px; display:flex; flex-direction:column; gap:3px; }
.pd figcaption b{ font-size:15px; font-weight:500; }
.pd figcaption span{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
@media (max-width:820px){ .pd-list{ grid-template-columns:1fr; } }

/* ---------- Lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:90; background:var(--paper); display:none; }
.lb.open{ display:flex; align-items:center; justify-content:center; }
.lb img{ max-width:88vw; max-height:84vh; width:auto; height:auto; object-fit:contain; }
.lb-frame{ position:relative; width:min(88vw,1200px); display:flex; align-items:center; justify-content:center; }
.lb-video{ width:min(92vw,980px); aspect-ratio:16/9; }
.lb-video.vert{ width:auto; height:84vh; aspect-ratio:9/16; }
.lb-video iframe{ width:100%; height:100%; border:0; }
.lb-close{ position:absolute; top:22px; right:26px; background:none; border:0; cursor:pointer; font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.lb-close:hover{ color:var(--terracota); }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:0; cursor:pointer; font-size:34px; color:var(--ink); padding:16px; opacity:.5; transition:opacity .2s; }
.lb-nav:hover{ opacity:1; color:var(--terracota); }
.lb-prev{ left:10px; } .lb-next{ right:10px; }
.lb-count{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--muted); }

/* ---------- Aparición al scroll ---------- */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal,.panel.active{ opacity:1 !important; transform:none !important; animation:none !important; transition:none; } }

/* ---------- Barra móvil ---------- */
.mob{ display:none; }

@media (max-width:820px){
  .side{ position:sticky; top:0; left:0; width:100%; height:auto; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:8px; padding:12px clamp(16px,5vw,22px); border-right:0; border-bottom:1px solid var(--line); backdrop-filter:blur(6px); background:color-mix(in srgb,var(--paper) 90%,transparent); }
  .side-logo img{ width:clamp(132px,38vw,168px); }
  .side-nav{ margin-top:0; flex-direction:row; gap:clamp(10px,3.5vw,22px); flex-wrap:wrap; }
  .side-nav button{ font-size:15px; padding-left:11px; }
  .side-nav button::before{ width:5px; height:5px; margin-top:-2.5px; }
  .side-foot{ display:none; }
  .main{ margin-left:0; padding:clamp(20px,5vw,30px) clamp(16px,5vw,24px) 70px; }
  .folders{ grid-template-columns:repeat(2,1fr); gap:clamp(12px,4vw,20px); }
  .folder-cap{ font-size:16px; margin-top:8px; }
  .folder-cap .n{ font-size:11px; margin-right:6px; }
  .block-head h2{ font-size:clamp(23px,7vw,30px); }
  .gal{ column-count:2; }
  .vid-grid{ column-count:1; }
  .vid.vert .vframe{ max-width:280px; }
  .vid .play{ display:none; }
  .vid .vmeta h3{ font-size:19px; }
  .about{ grid-template-columns:1fr; }
  .about-photo{ max-width:320px; }
  /* contacto al final en móvil */
  .mob{ display:block; margin-top:50px; padding-top:22px; border-top:1px solid var(--line); }
  .mob .hb{ font-size:16px; font-weight:500; }
  .mob .hb a{ border-bottom:1px solid var(--terracota); }
  .mob .ig{ display:inline-block; margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.07em; color:var(--muted); }
}
@media (max-width:460px){ .gal{ column-count:2; } }