/* Paleta de Dania: Hurricane #9CACB9, Field Green #94B06D, Granola #F0C684, Cochineal #DE4144, Blood #8F0607.
   Concepto: un archivero. La portada muestra cuatro carpetas de colores con cosas asomando;
   al abrir una, aparece la carpeta grande con pestañas para saltar entre secciones. */
:root{
  --navy:#8f0607;
  --navy-deep:#5c0304;
  --ink:#2a0a0b;
  --paper:#fbf4e8;
  --paper-line:#ead9bd;
  --grid:rgba(143,6,7,.07);
  --pink:#de4144;
  --pink-soft:#e8706f;
  --lime:#94b06d;
  --lime-soft:#afc58f;
  --sky:#9cacb9;
  --sky-soft:#bac6d0;
  --orange:#f0c684;
  --orange-soft:#f6d8a6;
  --violet:#f0a3a0;
  --violet-soft:#f6c3c1;
  --white:#ffffff;
  --muted:#7a5a55;
  --display:"Bricolage Grotesque", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body:"Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --type:"Courier Prime", "Courier New", Courier, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--white);font-family:var(--body);font-size:1.0625rem;line-height:1.55;min-height:100vh;
  background-image:radial-gradient(circle at 15% 0%, rgba(222,65,68,.35), transparent 40%),radial-gradient(circle at 90% 100%, rgba(240,198,132,.14), transparent 45%)}
.wrap{max-width:72rem;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}
.ejemplo{display:inline-block;font-family:var(--type);font-size:.75rem;border:1.5px dashed currentColor;padding:.05rem .45rem;border-radius:3px;opacity:.75}

/* ---------- Portada ---------- */
.cover{padding-block:3rem 1.5rem;text-align:center;display:grid;gap:1rem;justify-items:center}
.cover .kicker{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,3.5vw,2rem);margin:0;letter-spacing:-.01em}
.cover h1{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,11.5vw,8rem);line-height:.88;margin:0;color:var(--orange);letter-spacing:-.04em;text-transform:uppercase}
.cover h1 .drawer{display:inline-block;color:var(--lime);transform:rotate(-6deg);margin:0 .02em}
.cover .tag{font-family:var(--type);font-size:.95rem;border:1.5px solid rgba(255,255,255,.35);border-radius:6px;padding:.3rem .8rem}
.cover .hint{font-family:var(--type);font-size:.9rem;opacity:.75;margin:.5rem 0 0}

.cabinet{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2.5rem 1.75rem;padding-block:3rem 4rem}
@media (max-width:1000px){.cabinet{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.cabinet{grid-template-columns:repeat(2,minmax(0,1fr))}}

.folder-btn{all:unset;cursor:pointer;display:grid;gap:.9rem;justify-items:center;text-align:center;border-radius:14px}
.folder-btn:focus-visible{outline:3px solid var(--lime);outline-offset:8px}
.folder{position:relative;width:100%;max-width:13rem;aspect-ratio:1/0.82;perspective:600px}
.folder .back{position:absolute;inset:8% 0 0 0;border-radius:6px 14px 14px 14px;background:var(--c)}
.folder .back::before{content:"";position:absolute;top:-11%;left:0;width:42%;height:14%;background:var(--c);border-radius:10px 10px 0 0}
.folder .front{position:absolute;left:0;right:0;bottom:0;height:68%;border-radius:12px;background:var(--c-soft);transform-origin:bottom center;transition:transform .35s cubic-bezier(.2,.8,.3,1.2);box-shadow:0 -2px 0 rgba(255,255,255,.25) inset}
.folder .peek{position:absolute;left:12%;right:12%;bottom:40%;height:62%;transition:transform .35s cubic-bezier(.2,.8,.3,1.2)}
.folder-btn:hover .front,.folder-btn:focus-visible .front{transform:rotateX(-22deg)}
.folder-btn:hover .peek,.folder-btn:focus-visible .peek{transform:translateY(-14%)}
.folder-btn .label{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.15}
.folder-btn .count{display:block;font-family:var(--type);font-weight:400;font-size:.82rem;opacity:.7}

/* Lo que asoma de cada carpeta (todo dibujado con CSS) */
.peek > *{position:absolute;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.screen{left:4%;bottom:0;width:62%;height:78%;background:var(--ink);border-radius:6px;transform:rotate(-7deg)}
.screen::after{content:"";position:absolute;left:50%;top:50%;translate:-35% -50%;border-left:14px solid var(--pink);border-top:9px solid transparent;border-bottom:9px solid transparent}
.clapper{right:2%;bottom:6%;width:46%;height:56%;background:var(--white);border-radius:3px;transform:rotate(9deg)}
.clapper::before{content:"";position:absolute;left:0;right:0;top:0;height:30%;background:repeating-linear-gradient(-45deg,var(--ink) 0 7px,var(--white) 7px 14px);border-radius:3px 3px 0 0}
.clip-paper{left:6%;bottom:0;width:58%;height:96%;background:var(--paper);transform:rotate(-6deg);
  background-image:linear-gradient(var(--ink),var(--ink)),repeating-linear-gradient(transparent 0 6px,var(--paper-line) 6px 8px);background-size:70% 9px,80% 60%;background-position:14% 14%,50% 85%;background-repeat:no-repeat}
.clip-paper.b{left:auto;right:4%;width:52%;height:86%;transform:rotate(8deg);background-color:#fbeedd}
.sheet{left:10%;bottom:0;width:55%;height:100%;background:var(--white);transform:rotate(-4deg);
  background-image:repeating-linear-gradient(transparent 0 7px,var(--paper-line) 7px 9px);background-size:76% 70%;background-position:50% 70%;background-repeat:no-repeat}
.pencil{right:6%;bottom:10%;width:12%;height:92%;background:linear-gradient(var(--lime) 0 82%,#f2c48d 82% 94%,var(--ink) 94%);border-radius:2px 2px 0 0;transform:rotate(18deg);clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%)}
.badge{left:18%;bottom:0;width:52%;height:96%;background:var(--white);border-radius:6px;transform:rotate(-5deg)}
.badge::before{content:"";position:absolute;left:50%;top:18%;width:42%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:var(--orange)}
.badge::after{content:"";position:absolute;left:18%;right:18%;bottom:16%;height:12%;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px)}
.lanyard{left:38%;bottom:84%;width:8%;height:40%;background:var(--pink);border-radius:2px;box-shadow:none}

/* ---------- Carpeta abierta ---------- */
.open-view{padding-block:1.5rem 4rem}
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:2rem}
.back-btn{font-family:var(--type);font-size:.95rem;background:none;color:var(--white);border:1.5px solid rgba(255,255,255,.4);border-radius:999px;padding:.4rem 1rem;cursor:pointer}
.back-btn:hover{border-color:var(--white)}
.topbar .who{font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--orange);letter-spacing:-.02em}

.tabs{display:flex;gap:.35rem;align-items:flex-end;overflow-x:auto;padding-top:.6rem;margin-bottom:-1px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{font-family:var(--display);font-weight:700;font-size:clamp(1rem,2.4vw,1.35rem);color:var(--ink);background:var(--c);border:0;border-radius:14px 14px 0 0;padding:.65rem 1.4rem .55rem;cursor:pointer;white-space:nowrap;transform:translateY(8px);transition:transform .2s;filter:saturate(.85)}
.tab:hover{transform:translateY(3px)}
.tab[aria-selected="true"]{transform:none;padding-block:.85rem .7rem;filter:none;background:var(--c)}
.tab:focus-visible{outline-offset:-4px}

.panel{background:var(--panel);color:var(--ink);border-radius:0 18px 18px 18px;padding:clamp(1rem,3vw,2.2rem);min-height:24rem}
.sheet-area{background:var(--paper);border-radius:12px;padding:clamp(1.25rem,3.5vw,2.75rem);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;margin-bottom:2rem}
.panel-head h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,6vw,3.4rem);line-height:.95;margin:0;letter-spacing:-.03em}
.panel-head p{margin:0;font-family:var(--type);font-size:.9rem;color:var(--muted);max-width:30rem}
@media (prefers-reduced-motion:no-preference){
  .panel.enter .sheet-area > *{animation:rise .45s cubic-bezier(.2,.8,.3,1) both}
  .panel.enter .sheet-area > *:nth-child(2){animation-delay:.06s}
  .panel.enter .sheet-area > *:nth-child(3){animation-delay:.12s}
}
@keyframes rise{from{transform:translateY(14px)}to{transform:none}}

/* Pinza de papelería que sujeta tarjetas */
.binder{position:absolute;top:-14px;left:50%;translate:-50% 0;width:34px;height:20px;background:var(--pin, var(--pink));border-radius:3px 3px 6px 6px;box-shadow:0 2px 3px rgba(0,0,0,.2)}
.binder::before{content:"";position:absolute;left:6px;right:6px;top:-10px;height:12px;border:2.5px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0}

/* Videos */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:2.5rem 1.75rem}
.card{position:relative;display:grid;gap:.6rem;background:var(--white);padding:.8rem .8rem 1rem;border-radius:4px;box-shadow:0 3px 0 rgba(42,10,11,.12),0 10px 24px rgba(42,10,11,.12);text-decoration:none;color:var(--ink);transition:transform .25s;min-width:0}
.card:nth-child(odd){transform:rotate(-1.2deg)}
.card:nth-child(even){transform:rotate(1deg)}
.card:hover{transform:rotate(0) translateY(-4px)}
.thumb{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:3px;overflow:hidden;background:var(--ink)}
.thumb .play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--lime);display:grid;place-items:center}
.thumb .play::after{content:"";border-left:14px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.thumb .tc{position:absolute;right:.5rem;bottom:.5rem;font-family:var(--type);font-size:.8rem;background:rgba(0,0,0,.7);color:#fff;padding:0 .35rem;border-radius:2px}
.t1{background:radial-gradient(circle at 70% 30%,var(--sky) 0,transparent 55%),linear-gradient(160deg,#25306e,var(--navy-deep))}
.t2{background:radial-gradient(circle at 30% 70%,var(--orange) 0,transparent 50%),linear-gradient(200deg,#3a2550,#140c22)}
.t3{background:radial-gradient(circle at 60% 60%,var(--pink) 0,transparent 55%),linear-gradient(140deg,#2a1d4a,#0e0b20)}
.card .meta{font-family:var(--type);font-size:.82rem;color:var(--muted)}
.card h3{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.2;margin:0}
.card p{margin:0;font-size:.97rem;color:var(--muted)}

/* Notas publicadas: recortes de periódico */
.clipping{background:var(--paper);border:1px solid var(--paper-line);padding:1.6rem 1.3rem 1.2rem}
.clipping:nth-child(3n+2){background:#fbeedd}
.clipping .outlet{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;font-family:var(--type);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--ink);padding-bottom:.4rem}
.clipping h3{font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1.08;letter-spacing:-.02em}
.clipping .go{font-family:var(--type);font-size:.85rem;color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* Textos: hojas escritas a máquina */
.typed-list{display:grid;gap:1.25rem}
details.typed{background:var(--white);border-radius:4px;box-shadow:0 3px 0 rgba(42,10,11,.1),0 8px 20px rgba(42,10,11,.08);position:relative}
details.typed::before{content:"";position:absolute;left:2.2rem;top:0;bottom:0;width:1.5px;background:var(--pink-soft)}
details.typed summary{list-style:none;cursor:pointer;padding:1.3rem 1.4rem 1.3rem 3.2rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem 1rem;align-items:start}
details.typed summary::-webkit-details-marker{display:none}
details.typed h3{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.15;margin:0}
details.typed .meta{font-family:var(--type);font-size:.85rem;color:var(--muted);grid-column:1}
details.typed .toggle{grid-column:2;grid-row:1 / span 2;font-family:var(--type);font-size:.85rem;background:var(--lime);border-radius:999px;padding:.2rem .7rem;white-space:nowrap}
details.typed[open] .toggle .o, details.typed:not([open]) .toggle .c{display:none}
.typed-body{padding:0 1.4rem 1.8rem 3.2rem;font-family:var(--type);font-size:1.02rem;line-height:1.75;max-width:44rem}
.typed-body p{margin:0 0 1em}

/* Sobre mí */
.about{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:2.5rem;align-items:start}
@media (max-width:720px){.about{grid-template-columns:1fr;justify-items:start}}
.id-card{position:relative;background:var(--lime);border-radius:14px;padding:1rem 1rem 1.2rem;transform:rotate(-3deg);box-shadow:0 10px 24px rgba(42,10,11,.18);width:100%;max-width:15rem;margin-top:1.5rem}
.id-card .hole{width:44px;height:8px;border-radius:999px;background:var(--paper);margin:0 auto .8rem}
.id-card .photo{aspect-ratio:4/5;max-width:100%;border-radius:8px;background:repeating-linear-gradient(135deg,rgba(42,10,11,.12) 0 2px,transparent 2px 10px),var(--white);display:grid;place-items:center;font-family:var(--type);font-size:.8rem;color:var(--muted)}
.id-card .name{font-family:var(--display);font-weight:800;font-size:1.5rem;margin:.7rem 0 0;line-height:1}
.id-card .role{font-family:var(--type);font-size:.82rem}
.bio h3{font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1.1;margin:0 0 .75rem}
.bio > p{margin:0 0 1rem;max-width:38rem}
.bio h4{font-family:var(--display);font-weight:800;font-size:1.25rem;margin:1.8rem 0 .7rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0;list-style:none}
.chips li{font-family:var(--type);font-size:.85rem;border:1.5px solid var(--ink);border-radius:999px;padding:.1rem .65rem}
.contact{display:grid;gap:.6rem;font-family:var(--type);font-size:.95rem}
.contact div{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;overflow-wrap:anywhere}
.contact b{font-family:var(--display);min-width:5.5rem}
.copy{font-family:var(--type);font-size:.78rem;background:var(--ink);color:var(--white);border:0;border-radius:999px;padding:.15rem .7rem;cursor:pointer}

footer{padding-block:1rem 2.5rem;font-family:var(--type);font-size:.85rem;opacity:.6;text-align:center}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* Textos: tarjetas que abren la página de lectura */
.texts-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.story .story-img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;border-radius:3px}
.story h3{font-size:1.3rem}
.story .go{font-family:var(--type);font-size:.85rem;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.typed-card{padding:1.6rem 1.4rem 1.2rem;align-content:start}
.typed-card .excerpt{font-family:var(--type);color:var(--ink);font-size:1rem;line-height:1.7}

/* Videos propios (verticales) */
.videos-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),18rem))}
.vcard{margin:0}
.vcard video{display:block;width:100%;height:auto;aspect-ratio:9/16;max-width:100%;background:var(--ink);border-radius:3px}
.vcard figcaption{display:grid;gap:.2rem}
.clipping .story-img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;border-radius:3px;filter:grayscale(.35) contrast(1.05)}
img.photo{display:block;width:100%;height:auto;object-fit:cover;object-position:50% 30%}

/* Podcast y radio */
.wavecard{left:6%;bottom:0;width:60%;height:82%;background:var(--white);border-radius:6px;transform:rotate(-6deg);
  background-image:linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 6px);background-size:70% 34%;background-position:50% 55%;background-repeat:no-repeat}
.mic{right:10%;bottom:4%;width:24%;height:88%;border-radius:999px 999px 6px 6px;background:radial-gradient(circle,var(--ink) 1.2px,transparent 1.6px) 0 0/6px 6px,var(--lime);transform:rotate(10deg)}
.audio{background:var(--ink);color:var(--white)}
.audio .meta,.audio p{color:rgba(255,255,255,.7)}
.audio-top{display:flex;align-items:center;gap:.9rem;padding:.6rem .2rem}
.audio-play{width:3rem;height:3rem;flex:none;border-radius:50%;background:var(--violet);display:grid;place-items:center}
.audio-play::after{content:"";border-left:14px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.bars{display:flex;align-items:center;gap:3px;height:2.6rem;flex:1;min-width:0;overflow:hidden}
.bars i{display:block;width:4px;flex:none;border-radius:2px;background:var(--violet-soft)}
.bars i:nth-child(3n){height:40%}.bars i:nth-child(3n+1){height:75%}.bars i:nth-child(3n+2){height:55%}.bars i:nth-child(4n){height:95%}
.audio audio{width:100%}
.audio{text-decoration:none}
.audio .go{font-family:var(--type);font-size:.85rem;color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.vcard p a{color:var(--navy)}
.audio{align-content:start}