/* ===== CASOS OCULTOS — hoja de estilos principal ===== */
:root{
  --desk:#050506; --desk-2:#1a1a1f;
  --paper:#d9c9a0; --paper-2:#e6d9b6; --paper-dark:#bfae82;
  --ink:#24201a; --ink-soft:#5b5240;
  --red:#a8271f; --red-dark:#7f1b15;
  --blue:#2d4766;
  --font-type:"Special Elite","Courier New",monospace;
  --font-head:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);color:var(--paper);line-height:1.6;
  background:#000;min-height:100vh;display:flex;flex-direction:column;
}
a{color:inherit}
:focus-visible{outline:3px solid #f0c24b;outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--paper);color:var(--ink);padding:8px 12px;z-index:99}

/* Cabecera */
.top{padding:22px clamp(16px,4vw,48px)}
.brand{font-family:var(--font-head);font-weight:800;font-size:24px;letter-spacing:.04em;text-decoration:none;display:flex;align-items:center;gap:10px;text-transform:uppercase}
.cart-btn{z-index:25;font:600 14px var(--font-body);background:rgba(0,0,0,.8);color:var(--paper);border:1px solid var(--paper);padding:8px 14px;cursor:pointer}
.cart-btn:hover{background:var(--paper);color:var(--ink)}
.cart-btn{display:inline-flex;align-items:center;gap:8px}.cart-ico{width:20px;height:20px}
.cart-count{display:inline-block;min-width:22px;padding:0 6px;background:var(--red);color:#fff;border-radius:11px;text-align:center}

/* Hero: el dosier */
.hero{padding:46px clamp(16px,4vw,48px) clamp(21px,4.7vw,59px)}
.dossier{
  position:relative;max-width:860px;margin:0 auto;padding:clamp(28px,5vw,64px);
  background:linear-gradient(var(--paper-2),var(--paper));color:var(--ink);
  box-shadow:0 2px 0 var(--paper-dark),0 14px 40px rgba(0,0,0,.55);
  transform:rotate(-.6deg);
}
.dossier::before{content:"";position:absolute;top:-14px;left:36px;width:90px;height:28px;background:rgba(190,175,130,.75);transform:rotate(-3deg)}
.doc-ref{font-family:var(--font-type);font-size:13px;color:var(--ink-soft);margin-bottom:22px}
.dossier h1{font-family:var(--font-head);font-weight:800;font-size:clamp(40px,7vw,76px);line-height:1;margin-bottom:26px;letter-spacing:.01em}
.typed{font-family:var(--font-type);font-size:17px;max-width:60ch;margin-bottom:16px}

/* Tachado: la pieza memorable */
.redact{font:inherit;color:transparent;background:#14110d;border:0;padding:0 4px;cursor:pointer;transition:color .25s,background .25s;border-radius:1px}
.redact:hover,.redact.on{color:var(--ink);background:rgba(20,17,13,.12)}
.redact.revealed-never{cursor:default;user-select:none;color:#14110d}

/* Sellos */
.stamp{font-family:var(--font-head);font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--red);border:4px double var(--red);padding:4px 16px;position:absolute;opacity:.88;pointer-events:none;mix-blend-mode:multiply}
.stamp-hero{top:34px;right:clamp(16px,4vw,48px);font-size:clamp(22px,4vw,38px);transform:rotate(9deg);animation:slam .45s .3s cubic-bezier(.3,1.6,.5,1) both}
.stamp-card{font-size:20px;transform:rotate(8deg);background:rgba(230,217,182,.88);mix-blend-mode:normal;z-index:2}
.stamp-grey{color:#555;border-color:#555}
@keyframes slam{from{opacity:0;transform:rotate(9deg) scale(2.6)}to{opacity:.88;transform:rotate(9deg) scale(1)}}

/* Botones */
.btn{font:600 15px var(--font-body);padding:12px 22px;border:2px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;transition:transform .12s,background .15s}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink);color:var(--paper)}.btn-ink:hover{background:#000}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-dark)}
.btn-ghost{background:transparent;border-color:#7d7560;color:#7d7560;cursor:not-allowed}
.btn-block{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed}

/* Secciones */
.section{padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px);max-width:1180px;margin:0 auto}
.section-head{margin-bottom:34px}
.section-head h2{font-family:var(--font-head);font-weight:800;font-size:clamp(32px,5vw,52px);line-height:1.05}
.section-head p{margin-top:8px;max-width:60ch;opacity:.8}

/* Expedientes anchos y apilados */
.cases{display:grid;gap:48px;max-width:980px;margin:0 auto;padding-top:20px}
.folder{position:relative;background:linear-gradient(var(--paper-2),var(--paper));color:var(--ink);box-shadow:0 10px 28px rgba(0,0,0,.6);scroll-margin-top:24px;transition:opacity .3s}
.cases.has-open .folder:not(.open){opacity:.55}
.folder-tab{background:var(--paper-dark);color:var(--ink);font-family:var(--font-type);font-size:13px;padding:0 16px;height:28px;display:flex;align-items:center;line-height:1;clip-path:polygon(0 100%,6% 0,94% 0,100% 100%)}
.folder-head{position:relative;display:grid;grid-template-columns:220px 1fr auto;gap:26px;padding:30px 26px 26px;align-items:start}
.folder-head .case-photo{width:220px;height:150px;margin:0}
.folder-main{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.folder h3{font-family:var(--font-head);font-weight:800;font-size:38px;line-height:1.02}
.toggle{font:inherit;color:inherit;background:none;border:0;text-align:left;cursor:pointer;padding:0}
.toggle::after{content:"";position:absolute;inset:0}
.toggle:focus-visible{outline:none}
.folder-head:has(.toggle:focus-visible){outline:3px solid #f0c24b;outline-offset:-3px}
.summary{font-family:var(--font-type);font-size:15px;color:var(--ink-soft);max-width:58ch}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 22px;border-top:1px solid rgba(36,32,26,.3)}
.fields div{display:flex;flex-direction:column;padding:6px 0;border-bottom:1px dotted rgba(36,32,26,.45);font-size:14px}
.fields dt{font-family:var(--font-type);color:var(--ink-soft);font-size:12.5px}.fields dd{font-weight:600}
.buy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:190px}
.price{font-family:var(--font-head);font-weight:800;font-size:40px;line-height:1}
.buy .btn{width:100%}.buy .player-link{align-self:flex-end}
.stamp-card{top:-6px;right:0}
.folder-sealed{filter:saturate(.5);opacity:.8}
.folder h3.plain{color:var(--ink-soft)}

/* Panel desplegable: los documentos salen de la carpeta */
.panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.folder.open .panel{grid-template-rows:1fr}
.panel-inner{overflow:hidden;min-height:0}
.sheets{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;padding:10px 26px 34px;border-top:2px dashed rgba(36,32,26,.3);margin:0 26px;padding-left:0;padding-right:0}
.sheet{background:#f3ecd4;padding:20px 20px 22px;box-shadow:0 5px 14px rgba(0,0,0,.35);transform:rotate(var(--r,0))}
.folder.open .sheet{animation:out .55s calc(.12s + var(--i)*.1s) cubic-bezier(.2,.9,.3,1) both}
@keyframes out{from{opacity:0;transform:translateY(-70px) rotate(0)}to{opacity:1;transform:translateY(0) rotate(var(--r,0))}}
.sheet h4{font-family:var(--font-head);font-weight:800;font-size:24px;margin-bottom:8px;border-bottom:2px solid var(--ink);padding-bottom:4px}
.sheet p,.doclist{font-family:var(--font-type);font-size:14.5px;color:var(--ink-soft)}
.doclist{list-style:none}.doclist li{padding:4px 0;border-bottom:1px dotted rgba(36,32,26,.35)}
.doclist strong{font-family:var(--font-head);font-size:26px;color:var(--ink);margin-right:6px}
.doclist .host{color:var(--red);font-weight:700}.doclist .pending{opacity:.6}
.case-photo-sm{height:120px;margin-top:12px}
.audios{display:grid;gap:8px;margin-top:12px;font-family:var(--font-type);font-size:14px}
.audios span{display:flex;align-items:center;gap:10px}
.wave{display:inline-block;width:70px;height:14px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px);-webkit-mask:linear-gradient(90deg,#000 0 100%);opacity:.8}

@media (max-width:820px){
  .folder-head{grid-template-columns:1fr}.folder-head .case-photo{width:100%;height:170px}
  .buy{align-items:stretch}.buy .player-link{align-self:flex-start}.stamp-card{top:-12px}
}

/* Cómo funciona */
.section-paper{max-width:none;background:linear-gradient(var(--paper-2),var(--paper));color:var(--ink)}
.section-paper .section-head,.section-paper .steps{max-width:1180px;margin-left:auto;margin-right:auto}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.steps li{counter-increment:s;border-left:3px solid var(--red);padding-left:18px}
.steps li::before{content:counter(s);font-family:var(--font-type);font-size:34px;color:var(--red);display:block;line-height:1}
.steps h3{font-family:var(--font-head);font-weight:800;font-size:24px;margin:8px 0 4px}
.steps p{font-family:var(--font-type);font-size:15px;color:var(--ink-soft)}

/* Pruebas */

.foot{padding:30px clamp(16px,4vw,48px);border-top:1px solid rgba(217,201,160,.18);font-size:13px;opacity:.65;text-align:center}

/* Carrito: recibo */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:30}
.cart{position:fixed;top:0;right:0;height:100%;width:min(400px,100%);background:var(--paper-2);color:var(--ink);z-index:40;transform:translateX(105%);transition:transform .28s;display:flex;flex-direction:column;padding:22px;box-shadow:-10px 0 40px rgba(0,0,0,.5);font-family:var(--font-type)}
.cart.open{transform:none}
.cart-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px dashed var(--ink-soft);padding-bottom:12px}
.cart-head h2{font-family:var(--font-head);font-size:28px}
.close{background:none;border:0;font-size:32px;cursor:pointer;color:var(--ink)}
.cart-list{list-style:none;flex:1;overflow:auto;padding-top:12px}
.cart-list li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dotted var(--ink-soft)}
.cart-list button{background:none;border:0;color:var(--red);cursor:pointer;font:inherit;text-decoration:underline;display:block;margin-top:2px}
.cart-empty{color:var(--ink-soft);padding:16px 0}
.cart-foot{border-top:2px dashed var(--ink-soft);padding-top:14px;display:grid;gap:12px}
.total{display:flex;justify-content:space-between;font-size:20px}
.note{font-size:12px;color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Introducción: pestaña y datos del archivo */
.folder-tab-dossier{position:absolute;bottom:100%;left:0;font-size:14px;height:30px}
.dossier::before{display:none}
.intro-stats{display:flex;flex-wrap:wrap;gap:12px 36px;margin:26px 0;padding:14px 0;border-top:1px solid rgba(36,32,26,.35);border-bottom:1px solid rgba(36,32,26,.35)}
.intro-stats dt{font-family:var(--font-type);font-size:13px;color:var(--ink-soft)}
.intro-stats dd{font-family:var(--font-head);font-weight:800;font-size:40px;line-height:1}

/* Foto del caso */
.case-photo{position:relative;height:170px;margin:4px 0 2px;border:6px solid #f1e9d2;background:#2a2f3b;box-shadow:0 3px 10px rgba(0,0,0,.35);transform:rotate(-1deg);overflow:hidden}
.case-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.1)}
.case-photo .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-type);font-size:13px;color:#8d93a3}

/* Dificultad en estrellas (máx. 4) */
.stars{display:inline-flex;gap:3px}
.stars i{width:17px;height:17px;background:rgba(36,32,26,.22);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars i.on{background:var(--red)}

.player-link{font-family:var(--font-type);font-size:13px;color:var(--ink-soft);text-underline-offset:3px}
.player-link:hover{color:var(--red)}

/* Botón de abrir/cerrar junto a la pestaña del caso */
.tab-toggle{background:var(--red);color:#fff;border:0;font-family:var(--font-type);font-size:13px;padding:0 18px;height:28px;display:flex;align-items:center;line-height:1;cursor:pointer;clip-path:polygon(0 100%,6% 0,94% 0,100% 100%)}
.tab-toggle::before{content:"Abrir dossier ▾"}
.folder.open .tab-toggle::before{content:"Cerrar dossier ✕"}
.tab-toggle:hover{background:var(--red-dark)}

/* Estructura única: 3 documentos arriba y 2 anchos debajo */
.sheets{grid-template-columns:repeat(6,1fr);gap:18px;margin:0 26px;padding:16px 0 26px}
.sheet{grid-column:span 2;padding:14px 16px 16px}
.sheet-wide{grid-column:span 3}
.sheet h4{font-size:21px;margin-bottom:6px}
.sheet p,.doclist{font-size:13.5px}
.doclist li{padding:3px 0}
.doclist strong{font-size:22px}
.photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.photo-row .case-photo{height:104px;margin:0;border-width:5px}
.mini-steps{list-style:none;counter-reset:m;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px;font-family:var(--font-type);font-size:13.5px;color:var(--ink-soft)}
.mini-steps li{counter-increment:m;padding-left:30px;position:relative}
.mini-steps li::before{content:counter(m);position:absolute;left:0;top:-4px;font-size:22px;color:var(--red)}
.audios-inline{margin-left:6px}
/* Dossier abierto: cabecera compacta para que todo quepa en pantalla */
.folder.open .summary{display:none}
.folder.open .folder-head .case-photo{height:96px}
@media (max-width:820px){
  .sheets{grid-template-columns:1fr}.sheet,.sheet-wide{grid-column:auto}
  .photo-row{grid-template-columns:repeat(3,1fr)}.mini-steps{grid-template-columns:1fr}
}

/* Fondo: negro con degradado, más claro en el centro y más oscuro en los bordes */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse 110% 90% at 50% 38%,#34343c 0%,#1a1a1f 42%,#07070a 78%,#000 100%)}

/* Separación entre introducción y casos (reducida) */
#casos{padding-top:clamp(27px,4vw,54px)}

/* Pestañas siempre pegadas al borde superior de la carpeta */
.folder-tabs{position:absolute;bottom:100%;left:0;display:flex;gap:4px}

/* Mismo tamaño por defecto en todos los dossiers */
.folder:not(.open) .folder-head{min-height:250px}
.summary{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:72px}
.sheet{min-height:190px}.sheet-wide{min-height:150px}

/* Cabecera: marca, carrito y barra social */
.top{display:flex;align-items:center;gap:20px}
.brand{margin-right:auto}
.top-social-bar{display:flex;align-items:center;gap:14px}
.social-link{display:inline-flex;align-items:center;gap:6px;color:#c9bf9f;text-decoration:none;font-size:14px;font-weight:700;padding:4px;border-radius:6px;transition:color .15s,transform .15s;user-select:none}
.social-link:hover{transform:translateY(-1px)}
.social-link svg{flex-shrink:0;transition:transform .15s}.social-link:hover svg{transform:scale(1.1)}
.link-web:hover{color:#2563eb}.link-youtube:hover{color:#ff0000}.link-github:hover{color:#fff}.link-banana:hover{color:#FBBF24}

/* Carrito flotante al hacer scroll */
.cart-fab{position:fixed;right:18px;bottom:18px;z-index:25;width:54px;height:54px;border-radius:50%;background:var(--red);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.6)}
.cart-fab[hidden]{display:none}
.cart-fab svg{width:24px;height:24px}
.cart-fab .cart-count{position:absolute;top:-4px;right:-4px;background:#fff;color:var(--red);font-size:12px;min-width:20px}

@media (max-width:860px){
  .top{display:contents}
  .brand{padding:22px clamp(16px,4vw,48px) 0;margin:0}
  .cart-btn{position:fixed;top:16px;right:clamp(16px,4vw,48px)}
  .top-social-bar{order:10;margin:40px 0 20px;flex-wrap:wrap;justify-content:center;width:100%}
  .cart-fab{display:none!important}
}