/* Portal — Escribe Borracho / Edita Sobrio
   Tokens del handoff. Nada redondeado, todo con textura de fanzine. */

:root{
  --ink:#14110e;        /* fondo oscuro */
  --ink-2:#1a1611;      /* hover del panel oscuro */
  --paper:#f2ede3;      /* fondo claro */
  --paper-2:#ece6d8;    /* hover del panel claro */
  --text-dark:#1c1814;
  --text-light:#e6ddcc;
  --muted-dark:#b8ae9e;
  --muted:#7a7164;
  --muted-light:#6b6255;
  --muted-2:#9a917f;
  --red:#c93a32;
  --red-hover-dark:#e0564d;
  --red-hover-light:#a02a24;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ink);
  font-family:'Courier Prime',monospace;
}

a{color:var(--red);text-decoration:none}

/* --alto-aviso lo pone aviso.js: 0 si no hay barra o si ya la cerraste. */
.portal{
  height:calc(100vh - var(--alto-aviso, 0px));
  min-height:calc(100svh - var(--alto-aviso, 0px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.paneles{flex:1;display:flex;min-height:0}

.panel{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  position:relative;
  padding:40px;
  text-align:center;
  transition:background .15s ease;
}

.panel--oscuro{background:var(--ink);color:var(--paper)}
.panel--oscuro:hover{background:var(--ink-2)}
.panel--claro{background:var(--paper);color:var(--text-dark)}
.panel--claro:hover{background:var(--paper-2)}

.etapa{
  border:2px dashed var(--red);
  color:var(--red);
  padding:5px 14px;
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
}
.panel--oscuro .etapa{transform:rotate(-2deg)}
.panel--claro .etapa{transform:rotate(1.5deg)}

/* Es un <h2> de verdad (Google necesita encabezados, no <span>), así que hay
   que apagarle el margen y el bold que el navegador le pone por su cuenta. */
.titulo{
  font-family:'Special Elite',monospace;
  font-size:clamp(40px,5vw,72px);
  line-height:1;
  margin:0;font-weight:400;
}
.panel--oscuro .titulo{transform:rotate(-1.2deg)}
.panel--claro .titulo{transform:rotate(0.8deg)}

.desc{max-width:380px;font-size:15px;line-height:1.6}
.panel--oscuro .desc{color:var(--muted-dark)}
.panel--claro .desc{color:var(--muted-light)}

.entrar{
  color:var(--red);
  font-size:16px;
  letter-spacing:2px;
  border-bottom:2px solid var(--red);
  padding-bottom:2px;
}
.panel--oscuro:hover .entrar{color:var(--red-hover-dark);border-bottom-color:var(--red-hover-dark)}
.panel--claro:hover .entrar{color:var(--red-hover-light);border-bottom-color:var(--red-hover-light)}

/* Firmas. Los logos son negros: sobre oscuro van invertidos. */
.firma{position:absolute;display:flex;flex-direction:column;gap:6px}
.firma--aletz{top:24px;left:28px;align-items:flex-start;text-align:left}
.firma--tinta{bottom:24px;right:28px;align-items:flex-end;text-align:right}

.firma img{display:block;width:auto;object-fit:contain}
.firma--aletz img{height:20px;max-width:140px;align-self:flex-start;filter:invert(1);opacity:.8}
.firma--tinta img{height:13px;max-width:130px;align-self:flex-end;opacity:.65}

.firma small{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:400}
.firma--aletz small{color:var(--muted)}
.firma--tinta small{color:var(--muted-2)}

.cita{
  background:var(--red);
  color:var(--paper);
  padding:16px 24px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cita q{font-family:'Special Elite',monospace;font-size:19px;quotes:'"' '"'}
.cita cite{font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.85;font-style:normal}

/* Foco visible: el handoff no lo definía y hace falta. */
a:focus-visible{outline:2px solid var(--red);outline-offset:-6px}

/* En vertical los paneles se apilan y la página deja de ser de una sola pantalla. */
@media (max-width:820px){
  .portal{height:auto;min-height:100vh;overflow:visible}
  .paneles{flex-direction:column}
  .panel{padding:64px 28px 48px;gap:18px;min-height:52vh}
  .firma--aletz{top:18px;left:20px}
  .firma--tinta{bottom:18px;right:20px}
}

/* ---------- Lo que se lee abajo del tajo ----------
   La primera pantalla sigue siendo de un solo golpe de vista; esto vive
   después, para quien baja a leer de qué se trata (y para Google, que de dos
   palabras sueltas en un panel no entiende nada). */

.explica{
  background:var(--ink);
  color:var(--muted-dark);
  padding:64px 32px 72px;
}
.explica > *{max-width:720px;margin-left:auto;margin-right:auto}

.explica h1{
  font-family:'Special Elite',monospace;font-weight:400;
  font-size:34px;line-height:1.15;color:var(--red);
  transform:rotate(-0.8deg);margin:0 auto 26px;
}
.explica h2{
  font-family:'Special Elite',monospace;font-weight:400;
  font-size:23px;line-height:1.25;color:var(--paper);
  margin:40px auto 12px;
}
.explica h3{
  font-size:16px;font-weight:700;color:var(--paper);
  margin:26px auto 6px;
}
.explica p{font-size:15.5px;line-height:1.8;margin:0 auto 14px}
.explica em{color:var(--paper);font-style:italic}

@media (max-width:820px){
  .explica{padding:48px 22px 56px}
  .explica h1{font-size:27px}
  .explica h2{font-size:20px}
}