/* ═══════════════════════════════════════════════
   Del prompt al aire · Taller de web con IA
   Identidad: papel + tinta + azul eléctrico
   (misma paleta que la landing del taller)
   ═══════════════════════════════════════════════ */

:root{
  --paper:#F3EDDE; --paper2:#EAE1CB; --ink:#181611; --ink2:#5a5342;
  --blue:#2A2ED8; --red:#E6491F; --dark:#14120D; --dark2:#1D1A13;
  --paper-dark:#F3EDDE;
  --disp:'Fraunces',Georgia,serif;
  --body:'Space Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:clamp(.95rem,1.5vw,1.05rem); line-height:1.55;
  overflow:hidden;
}
::selection{background:var(--blue);color:var(--paper)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;font-size:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.mono{font-family:var(--mono)}
em{font-style:italic}
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
h2 em,h1 em{color:var(--blue)}
.slide.dark h2 em,.slide.dark h1 em{color:#8E91FF}
code{font-family:var(--mono);background:var(--paper2);border:1.5px solid var(--ink);padding:.08em .4em;border-radius:4px;font-size:.92em;white-space:nowrap}
.link{color:var(--blue);border-bottom:2px solid var(--blue);font-weight:600}
.ink2{color:var(--ink2)}

/* grano de papel */
.noise{position:fixed;inset:-10%;z-index:60;pointer-events:none;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ BARRA SUPERIOR ============ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px clamp(14px,3vw,28px);
  font-size:.78rem;letter-spacing:.04em;
  color:var(--ink);pointer-events:none;
}
.topbar>*{pointer-events:auto}
.brand{font-weight:600}
.bloque-label{color:var(--ink2);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem}
.menu-btn{border:2px solid currentColor;padding:4px 12px;border-radius:999px;font-size:.72rem;letter-spacing:.06em;background:var(--paper)}
.menu-btn:hover{background:var(--blue);color:var(--paper);border-color:var(--blue)}
body.en-dark .topbar{color:var(--paper)}
body.en-dark .menu-btn{background:var(--dark)}

/* ============ ÍNDICE ============ */
.indice{
  position:fixed;top:52px;right:clamp(10px,2vw,24px);z-index:55;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;
  box-shadow:6px 6px 0 rgba(24,22,17,.85);
  padding:14px 18px;max-height:min(70vh,540px);overflow-y:auto;min-width:min(300px,86vw);
}
.indice ol{list-style:none;counter-reset:idx}
.indice li{counter-increment:idx}
.indice button{
  display:block;width:100%;text-align:left;padding:6px 4px;font-size:.88rem;
  border-bottom:1px dashed rgba(24,22,17,.2);
}
.indice li:last-child button{border-bottom:none}
.indice button::before{content:counter(idx,decimal-leading-zero)"  ";font-family:var(--mono);color:var(--red);font-size:.75rem}
.indice button:hover{color:var(--blue)}
.indice button.actual{color:var(--blue);font-weight:700}

/* ============ DECK Y LÁMINAS ============ */
.deck{position:fixed;inset:0}
.slide{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  background:var(--paper);color:var(--ink);
  opacity:0;pointer-events:none;visibility:hidden;
  transform:translateX(46px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),visibility 0s linear .5s;
  padding:74px clamp(18px,4.5vw,60px) 96px;
  display:flex;justify-content:center;
}
.slide.activa{opacity:1;pointer-events:auto;visibility:visible;transform:none;transition-delay:0s;z-index:2}
.slide.saliendo-izq{transform:translateX(-46px)}
.slide.dark{background:var(--dark);color:var(--paper)}
.slide.dark code{background:var(--dark2);border-color:var(--paper);color:var(--paper)}

.s-in{width:100%;max-width:1060px;margin:auto 0;align-self:center;
  display:flex;flex-direction:column;gap:clamp(16px,2.6vh,26px)}
.s-in.centro{text-align:center;align-items:center}

h1{font-size:clamp(3rem,9vw,6.4rem);font-weight:900}
h2{font-size:clamp(1.9rem,5vw,3.4rem)}
h3{font-size:1.08rem;font-weight:700;line-height:1.25}
.sub{font-family:var(--disp);font-size:1.3rem;margin-bottom:10px;color:var(--blue)}
.lead{font-size:clamp(1rem,2vw,1.22rem);max-width:62ch;line-height:1.6}
.lead.final{border-top:2px solid var(--paper);padding-top:18px}
.slide.dark .lead{color:#DDD5C2}
.kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--red)}
.slide.dark .kicker{color:#FF7A50}
.hint{font-size:.75rem;color:var(--ink2);letter-spacing:.05em}
.slide.dark .hint{color:#8b8370}
.nota{font-size:.8rem;color:var(--ink2);border-left:3px solid var(--red);padding-left:12px;max-width:72ch;line-height:1.55}
.flecha{color:var(--red);font-size:.85em}
.url{font-size:.78rem;color:var(--blue);letter-spacing:.02em;margin-bottom:2px}
.chica{font-size:.82rem}

/* ============ TARJETAS ============ */
.cards{display:grid;gap:14px}
.cards.tres{grid-template-columns:repeat(3,1fr)}
.cards.cuatro{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--paper2);border:2.5px solid var(--ink);border-radius:14px;
  padding:16px 18px;display:flex;flex-direction:column;gap:8px;
  box-shadow:5px 5px 0 rgba(24,22,17,.85);
}
.card p{font-size:.9rem;line-height:1.5}
a.card.ia{transition:transform .18s ease,box-shadow .18s ease}
a.card.ia:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--blue)}
.card.num{position:relative}
.card .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--blue);color:var(--paper);font-weight:600;font-size:.9rem;
}

/* ============ AGENDA ============ */
.agenda{list-style:none;display:flex;flex-direction:column;max-width:640px}
.agenda li{
  display:flex;gap:18px;align-items:baseline;padding:10px 4px;
  border-bottom:1.5px dashed rgba(24,22,17,.3);font-size:clamp(.95rem,1.9vw,1.15rem);
}
.agenda .t{color:var(--red);font-weight:600;font-size:.85em;min-width:44px}

/* ============ PROMPT (bloque copiable) ============ */
.prompt{border:2.5px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--dark);color:#EDE6D3;
  box-shadow:5px 5px 0 rgba(24,22,17,.85);max-width:860px}
.prompt-top{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--paper2);color:var(--ink);padding:8px 14px;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;border-bottom:2.5px solid var(--ink)}
.copy{border:2px solid var(--ink);border-radius:999px;padding:2px 14px;font-size:.72rem;
  background:var(--paper);letter-spacing:.06em;transition:background .15s}
.copy:hover{background:var(--blue);color:var(--paper);border-color:var(--blue)}
.copy.ok{background:var(--blue);color:var(--paper);border-color:var(--blue)}
.prompt pre{
  font-family:var(--mono);font-size:clamp(.7rem,1.5vw,.83rem);line-height:1.65;
  padding:16px 18px;white-space:pre-wrap;word-break:break-word;overflow-x:auto;
}

/* ============ REGLA DE ORO ============ */
.regla{
  background:var(--blue);color:var(--paper);border-radius:14px;
  border:2.5px solid var(--ink);box-shadow:5px 5px 0 rgba(24,22,17,.85);
  padding:16px 20px;font-size:clamp(.95rem,1.8vw,1.1rem);max-width:760px;
}

/* ============ DICCIONARIO ============ */
.dicc{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 26px}
.dicc>div{display:flex;gap:12px;align-items:baseline;padding:7px 4px;border-bottom:1.5px dashed rgba(24,22,17,.25)}
.dicc dt{color:var(--blue);font-weight:600;font-size:.82rem;min-width:128px;flex-shrink:0}
.dicc dd{font-size:.88rem;color:var(--ink);line-height:1.45}

/* ============ PASOS ============ */
.pasos{list-style:none;counter-reset:paso;display:flex;flex-direction:column;gap:12px;max-width:760px}
.pasos li{counter-increment:paso;position:relative;padding-left:46px;font-size:clamp(.92rem,1.8vw,1.05rem)}
.pasos li::before{
  content:counter(paso);position:absolute;left:0;top:0;
  width:32px;height:32px;border-radius:50%;
  background:var(--red);color:var(--paper);font-family:var(--mono);font-weight:600;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
  border:2px solid var(--ink);
}
.pasos.compact{gap:10px}
.pasos.compact li{font-size:.92rem}

/* ============ ÁRBOL DE ARCHIVOS ============ */
.arbol{
  background:var(--dark);color:#EDE6D3;border:2.5px solid var(--ink);border-radius:14px;
  padding:18px 20px;font-size:.88rem;line-height:2;box-shadow:5px 5px 0 rgba(24,22,17,.85);
  align-self:start;
}
.arbol .ink2{color:#8b8370;font-size:.8em}
.arbol.chico{box-shadow:none;margin:8px 0;padding:10px 14px;line-height:1.7;font-size:.8rem;border-width:1.5px}

/* ============ COLUMNAS ============ */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}

/* ============ MINIATURA OG (simulación) ============ */
.mini-preview{
  border:2.5px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:5px 5px 0 rgba(24,22,17,.85);max-width:420px;
}
.mp-img{
  background:linear-gradient(135deg,#3d5a40,#7a9b6d);color:#F3EDDE;
  aspect-ratio:1200/630;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;font-size:1.05rem;text-align:center;
}
.mp-img .mono{font-size:.72rem;opacity:.8}
.mp-txt{padding:12px 16px;display:flex;flex-direction:column;gap:3px}
.mp-title{font-weight:700;font-size:.95rem;color:#111}
.mp-desc{font-size:.8rem;color:#555}
.mp-url{font-size:.7rem;color:#999;text-transform:uppercase;letter-spacing:.06em}

/* ============ CHECKLIST ============ */
.checklist{list-style:none;display:flex;flex-direction:column;gap:4px;max-width:640px}
.checklist button{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:9px 6px;font-size:clamp(.95rem,1.9vw,1.12rem);color:var(--paper);
  border-bottom:1.5px dashed rgba(243,237,222,.25);
}
.checklist .box{
  width:24px;height:24px;flex-shrink:0;border:2px solid var(--paper);border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;
  transition:background .2s;
}
.checklist button.hecho .box{background:var(--blue);border-color:var(--blue)}
.checklist button.hecho .box::after{content:"✓";color:var(--paper)}
.checklist button.hecho{color:#8E91FF}

/* ============ CELEBRACIÓN ============ */
.celebracion{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,18,13,.92);
  animation:cele-fade .35s ease-out;
  overflow-y:auto;padding:24px;
}
.celebracion[hidden]{display:none}
@keyframes cele-fade{from{opacity:0}to{opacity:1}}
.cele-in{
  max-width:640px;width:100%;text-align:center;color:var(--paper);
  background:var(--dark2);border:2.5px solid var(--paper);border-radius:20px;
  box-shadow:8px 8px 0 rgba(42,46,216,.65);
  padding:clamp(24px,5vw,44px);
  animation:cele-pop .45s cubic-bezier(.2,1.4,.4,1);
  margin:auto;
}
@keyframes cele-pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.cele-foto-wrap{perspective:800px;display:inline-block;margin-bottom:14px}
.cele-foto{
  width:clamp(120px,22vw,170px);height:clamp(120px,22vw,170px);
  object-fit:cover;border-radius:50%;border:4px solid var(--paper);
  animation:cele-gira 2.4s linear infinite;
  transform-style:preserve-3d;backface-visibility:visible;
  display:block;
}
@keyframes cele-gira{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.cele-kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8E91FF;margin-bottom:8px}
.cele-titulo{font-size:clamp(1.7rem,4.5vw,2.6rem);margin-bottom:14px}
.cele-titulo em{color:#8E91FF}
.cele-texto{font-size:clamp(.95rem,1.8vw,1.08rem);margin-bottom:16px}
.cele-cita{
  font-family:var(--disp);font-style:italic;font-size:clamp(.9rem,1.7vw,1.02rem);
  color:rgba(243,237,222,.8);border-top:1.5px dashed rgba(243,237,222,.25);
  padding-top:14px;margin-bottom:20px;
}
.cele-cita .mono{font-style:normal;font-size:.78rem}
.cele-cerrar{
  border:2px solid var(--paper);padding:8px 22px;border-radius:999px;
  font-size:.8rem;letter-spacing:.06em;color:var(--paper);
}
.cele-cerrar:hover{background:var(--blue);border-color:var(--blue)}
.cele-credito{font-size:.62rem;color:rgba(243,237,222,.45);margin-top:14px}

/* ============ CONTROLES ============ */
.controles{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:14px;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:999px;
  padding:6px 12px;box-shadow:4px 4px 0 rgba(24,22,17,.85);
}
.ctrl{
  width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  background:var(--paper2);transition:background .15s;
}
.ctrl:hover{background:var(--blue);color:var(--paper);border-color:var(--blue)}
.ctrl:disabled{opacity:.3;cursor:default}
.ctrl:disabled:hover{background:var(--paper2);color:inherit;border-color:var(--ink)}
.contador{font-size:.8rem;letter-spacing:.08em;min-width:58px;text-align:center;font-variant-numeric:tabular-nums}

.progreso{position:fixed;bottom:0;left:0;right:0;height:5px;background:rgba(24,22,17,.15);z-index:50}
.progreso-fill{height:100%;background:var(--red);width:0;transition:width .4s cubic-bezier(.22,1,.36,1)}

/* zonas de toque laterales (solo útiles, invisibles) */
.tapzone{position:fixed;top:80px;bottom:80px;width:min(9vw,70px);z-index:40;opacity:0}
.tapzone.izq{left:0}
.tapzone.der{right:0}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .cards.cuatro{grid-template-columns:repeat(2,1fr)}
  .cards.tres{grid-template-columns:repeat(2,1fr)}
  .cols2{grid-template-columns:1fr}
  .dicc{grid-template-columns:1fr}
}
@media (max-width:600px){
  .slide{padding:64px 18px 92px}
  .s-in{margin:0;align-self:flex-start}
  .cards.tres,.cards.cuatro{grid-template-columns:1fr}
  .card{box-shadow:3px 3px 0 rgba(24,22,17,.85)}
  .bloque-label{display:none}
  .dicc dt{min-width:104px}
  .tapzone{display:none}
}

/* ============ MOVIMIENTO REDUCIDO ============ */
@media (prefers-reduced-motion:reduce){
  .slide{transition:opacity .01s,visibility 0s;transform:none}
  .slide.saliendo-izq{transform:none}
  .progreso-fill{transition:none}
  a.card.ia{transition:none}
}