/* =================== Fuente typewriter =================== */
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap");

/* =================== Variables y tipografía =================== */
:root{
  --ink:#000; --paper:#fff; --accent:#000;
  --cyber-cyan:#00f0ff; --cyber-mag:#ff00a8;

  --font-sans: "Courier Prime","Courier New",Courier,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --font-ocr: "OCR A Std","OCR A Extended","OCR A","Courier Prime",ui-monospace,monospace;

  /* Medidas clave */
  --coverW: clamp(200px, 24vw, 240px);   /* ancho portada (↑ para mejor presencia) */
  --quotesW: clamp(260px, 28vw, 360px);  /* columna de citas */
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans);
  line-height:1.66; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.ocr-ui{ --font-sans:var(--font-ocr) }
a{ color:inherit; text-decoration:none }

/* =================== Layout base =================== */
.frame{
  min-height:100dvh; display:flex; flex-direction:column;
  border:3px solid var(--ink); margin:10px; position:relative;
  box-shadow:8px 8px 0 var(--ink); background:var(--paper); overflow:hidden;
  background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
  background-size:6px 6px;
}
.container{ width:min(1100px,92vw); margin:0 auto; }

header{ padding:clamp(16px,2vw,28px) 0; border-bottom:3px solid var(--ink) }
.head{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.brand{ font-size:clamp(28px,4vw,44px); font-weight:900; letter-spacing:.01em; line-height:1 }

nav{
  font-family:var(--font-sans);
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  text-transform:uppercase; letter-spacing:.03em; font-weight:700;
}
nav a{ padding:6px 10px; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--paper) }
nav a:hover{ transform:translate(-1px,-1px) }

main{ flex:1 1 auto }
.section{ padding:clamp(24px,4vw,64px) 0; border-bottom:3px solid var(--ink); position:relative }
.sec-title{ padding-bottom:2em; display:grid; place-items:center; text-align:center; margin:0 0 18px 0 }
.sec-title h2{ font-size:clamp(22px,3.2vw,34px); margin:0; line-height:1; letter-spacing:.01em }

.lede{ font-size:clamp(16px,2.2vw,20px); max-width:70ch }
.ink-card{ border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); background:var(--paper); padding:clamp(16px,2.6vw,24px) }

/* =================== BIO =================== */
.bio-grid{ display:grid; gap:clamp(18px,2.8vw,32px); align-items:stretch }
@media (min-width:880px){ .bio-grid{ grid-template-columns:1fr 1fr } }
.figure{ border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); background:var(--paper); display:flex; flex-direction:column; margin:0 } /* no margen de <figure> */
.figure img{ width:100%; height:100%; max-height:520px; object-fit:cover; display:block }
.figcap{
  border-top:3px solid var(--ink); padding:10px 12px;
  font-family:var(--font-sans); letter-spacing:.02em; text-transform:uppercase; font-size:12px;
  display:flex; justify-content:space-between;
}

/* =================== Timeline / Roadmap =================== */
.timeline{ position:relative; width:100%; padding:10px 0 }
.tl-line{ position:absolute; top:0; bottom:0; left:50%; width:3px; background:var(--ink); transform:translateX(-50%) }
.tl-list{ position:relative; display:grid; gap:40px }
.tl-item{ position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:24px }
.tl-item.left .tl-card{ grid-column:1 }
.tl-item.right .tl-card{ grid-column:2 }
.tl-card{ border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); background:var(--paper); padding:14px; overflow:visible }
.tl-title{ margin:10px 0 8px 0; font-size:clamp(18px,2.3vw,24px) }
.tl-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.tl-tag{ border:2px solid var(--ink); padding:3px 7px; box-shadow:3px 3px 0 var(--ink); text-transform:uppercase; letter-spacing:.03em; font-weight:700; font-size:12px }
.tl-dot{ position:absolute; left:50%; top:12px; transform:translate(-50%,0); width:16px; height:16px; border:3px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); border-radius:50%; z-index:2 }

/* --- Tarjeta de obra (portada + texto, sin solapes) --- */
.tl-card-grid{
  display:grid;
  grid-template-columns: var(--coverW) minmax(0,1fr);
  align-items:start; gap:20px;
}
.tl-card-cover{ 
  margin:0 !important;          /* FIX: <figure> sin margen para alinear arriba */
  width:var(--coverW); max-width:none;
  border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); background:var(--paper);
}
.tl-card-cover img{ width:100%; height:auto; display:block; aspect-ratio:2/3; object-fit:cover }
.tl-copy{ min-width:0; max-width:60ch }  /* evita desbordes y mantiene ancho legible */

/* --- Variante con columna de citas a la derecha (fuera de la tarjeta) --- */
.tl-item.with-side{
  display:grid;
  grid-template-columns: 1fr var(--quotesW); /* tarjeta | citas */
  align-items:start; gap:24px;
}
.tl-side-title{ margin:0 0 10px 0; font-size:12px; text-transform:uppercase; letter-spacing:.06em }
.q-list{ display:grid; gap:12px }
.q-card{
  margin:0; padding:12px 14px; font-style:italic; line-height:1.45;
  border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); background:var(--paper);
}
.tl-side .tl-cite{ display:block; margin-top:10px; font-size:12px; opacity:.8 }

/* =================== Portal (puertas) =================== */
.portal-wrap{ position:relative; width:100%; overflow:hidden; padding:0 }
.portal-scene{ position:relative; width:100%; height:clamp(720px,96vh,1200px); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); background:#fff }
.interior{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(100%) contrast(105%) }
.door{ position:absolute; top:0; height:100%; width:50%; object-fit:cover; filter:contrast(115%) saturate(110%); box-shadow:inset 0 0 0 3px var(--ink), 6px 0 0 rgba(0,0,0,.6); transition:transform 3.6s cubic-bezier(.2,.7,.07,1); will-change:transform; z-index:2 }
.door.left{ left:0; transform:translateX(0); box-shadow:inset 0 0 0 3px var(--ink), -6px 0 0 rgba(0,0,0,.6) }
.door.right{ right:0; transform:translateX(0) }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.shaking .door.left{ animation:shake .44s linear }
.shaking .door.right{ animation:shake .44s linear }
.open .door.left{ transform:translateX(-102%) }
.open .door.right{ transform:translateX(102%) }

.portal-overlay{ position:absolute; inset:0; display:grid; place-items:center; background:transparent; transition:background .3s ease; z-index:3; text-align:center }

.cyber-btn,.portal-cta,.enter-link{ font-family:var(--font-sans); letter-spacing:.02em; text-transform:uppercase }
.portal-cta{
  padding:.7rem 1.1rem; border:3px solid var(--cyber-cyan); background:rgba(0,0,0,.35); color:#eaffff;
  box-shadow:0 0 0 3px rgba(0,240,255,.15), 0 0 18px rgba(0,240,255,.35), inset 0 0 12px rgba(0,240,255,.12);
  clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transform:translateY(8px) scale(.98); opacity:0; transition:opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
.portal-cta::after{ content:""; position:absolute; inset:0; border:1px dashed rgba(0,240,255,.35); clip-path:inherit; pointer-events:none; mix-blend-mode:screen }
.portal-cta:hover{ box-shadow:0 0 0 3px rgba(0,240,255,.25), 0 0 26px rgba(0,240,255,.55), inset 0 0 18px rgba(0,240,255,.2) }
.enter-link{
  display:inline-block; margin-top:14px; padding:.75rem 1.15rem; border:0;
  background:linear-gradient(135deg, rgba(0,240,255,.18), rgba(255,0,168,.18)), linear-gradient(90deg, #0e0e0e, #1a1a1a);
  color:#fff; text-decoration:none; box-shadow:0 0 0 3px rgba(255,0,168,.25), 0 0 22px rgba(255,0,168,.45), 0 0 12px rgba(0,240,255,.35) inset;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  opacity:0; transform:translateY(6px) scale(.98); transition:opacity .25s ease, transform .25s ease, box-shadow .25s ease; pointer-events:none;
}
.portal-link{ position:absolute; inset:0; z-index:5; cursor:pointer }
.portal-link:hover ~ .portal-overlay{ background:rgba(0,0,0,.08) }
.portal-link:hover ~ .portal-overlay .portal-cta{ opacity:1; transform:translateY(0) scale(1) }

/* =================== Blink =================== */
.blink{ position:absolute; inset:0; z-index:1; pointer-events:none; background:rgba(0,0,0,0); animation:blinkPulse var(--blinkDur,8s) linear infinite }
@keyframes blinkPulse{ 0%,10%,20%,35%,60%,100%{background:rgba(0,0,0,0)} 5%{background:rgba(0,0,0,.22)} 18%{background:rgba(0,0,0,.18)} 33%{background:rgba(0,0,0,.28)} 58%{background:rgba(0,0,0,.20)} }
.blink2{ position:absolute; inset:0; z-index:1; pointer-events:none; background:rgba(0,0,0,0); animation:blinkPulse2 var(--blinkDur2,9s) linear infinite }
@keyframes blinkPulse2{ 0%,8%,100%{background:rgba(0,0,0,0)} 4%{background:rgba(0,0,0,.18)} 19%{background:rgba(0,0,0,.32)} 42%{background:rgba(0,0,0,.20)} 66%{background:rgba(0,0,0,.26)} }

/* =================== Formulario y redes =================== */
.btns{ display:flex; gap:12px; flex-wrap:wrap }
.btn{ border:2px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); padding:.6rem 1rem; text-transform:uppercase; letter-spacing:.03em; font-weight:700; cursor:pointer }
.socials{ display:flex; gap:10px; margin-top:14px }
.socials a{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); background:var(--paper) }
.socials svg{ width:14px; height:14px; fill:#000 }

/* =================== Responsive =================== */
@media (max-width:1100px){
  .tl-item.with-side{ grid-template-columns:1fr }  /* tarjeta arriba, citas debajo */
  .tl-side{ margin-top:8px }
}
@media (max-width:900px){
  .tl-line{ left:12px; transform:none }
  .tl-item{ grid-template-columns:1fr }
  .tl-dot{ left:12px; transform:none }
  .tl-item.left .tl-card, .tl-item.right .tl-card{ grid-column:1 }
  .tl-card-grid{ grid-template-columns:1fr }      /* portada arriba, texto debajo */
  .tl-card-cover{ width:100% }
}

/* =================== Accesibilidad =================== */
@media (prefers-reduced-motion:reduce){
  .door{ transition:none }
  .shaking .door.left, .shaking .door.right{ animation:none }
  .blink, .blink2{ animation:none }
}
/* deja que el botón sea clickeable cuando .open esté activo */
.open .portal-link { pointer-events: none; }

/* asegúrate de que el overlay con el botón está por encima de las puertas */
.portal-overlay { z-index: 6; }
/* Overlay visible pero NO intercepta clics al inicio */
.portal-overlay { z-index: 6; pointer-events: none; }

/* El área clickeable que abre puertas debe estar por encima de todo al inicio */
.portal-link { z-index: 7; }

/* Al abrir: desactiva el overlay invisible y activa el overlay con el botón */
.open .portal-link   { pointer-events: none; }
.open .portal-overlay{ pointer-events: auto; }