/* ============================================================
   paginas.css — estilo común de las páginas secundarias de Mirzine Games
   (Cómo usar, Contacto y Entrar). Mismo aire que la tienda: fondo oscuro,
   rojo de marca, letras gruesas y condensadas y detalles de papel plegado.
   ============================================================ */
:root {
  color-scheme: dark;
  --bg: #120d0a; --panel: #1c1511; --panel-2: #0b0a0c; --line: #3a2a1e;
  --fg: #f2ede6; --muted: #b3a89a; --red: #c8261d; --orange: #e8782a; --blue: #3f86c4; --gold: #d9b04a;
  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Todas las páginas ocupan justo una pantalla: nunca hay scroll */
html, body { height: 100%; overflow: hidden; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.55; }
body { min-height: 100vh; background:
  radial-gradient(ellipse 60% 50% at 85% 0%, rgba(255, 216, 144, .10), transparent 70%),
  radial-gradient(ellipse 50% 40% at 0% 100%, rgba(200, 38, 29, .10), transparent 70%), var(--bg); }
a { color: var(--fg); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.pagina { max-width: 1280px; height: 100vh; height: 100dvh; margin: 0 auto; padding: 14px max(16px, env(safe-area-inset-left, 0px)) 16px; display: flex; flex-direction: column; gap: 22px; overflow: hidden; }
/* El contenido se centra en el hueco que deja la barra de arriba */
.pagina > main { flex: 1 1 auto; min-height: 0; margin-block: auto; }

/* ---- Barra de arriba (igual que en la tienda) ---- */
.barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.barra nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; }
.barra nav a { position: relative; font-family: var(--display); font-size: 24px; letter-spacing: 1.5px; text-transform: uppercase; color: #f2e6d2; text-decoration: none; padding: 6px 0; text-shadow: 0 0 18px rgba(232, 120, 42, .35); }
.barra nav a::before { content: ""; display: inline-block; margin-right: 10px; vertical-align: middle; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--red); transform: translateY(-2px); }
.barra nav a::after { content: ""; position: absolute; left: 22px; right: 0; bottom: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.barra nav a:hover::after, .barra nav a[aria-current="page"]::after { transform: scaleX(1); }
.barra nav a:hover, .barra nav a[aria-current="page"] { color: #fff; text-shadow: 0 0 14px rgba(255, 90, 58, .7); }
.barra .tienda-link::before { border-bottom-color: var(--orange) !important; }
.cuenta { display: flex; gap: 10px; }

/* ---- Botones ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 6px; border: 0; background: var(--red); color: #fff; font-family: var(--display); font-size: 20px; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: 0 0 18px rgba(200, 38, 29, .4); }
.btn:hover { background: #dc3428; }
.btn.secundario { background: transparent; border: 1px solid #5a4a3e; box-shadow: none; }
.btn.secundario:hover { border-color: var(--orange); }
.btn[disabled] { opacity: .6; cursor: default; }

/* ---- Cabecera de cada página ---- */
.titulo { display: flex; flex-direction: column; gap: 8px; }
.titulo .antetitulo { font-weight: 700; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--orange); }
h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(36px, min(6.5vw, 9vh), 72px); line-height: 1; text-transform: uppercase; letter-spacing: 1px; text-wrap: balance; }
h1 .rojo { color: var(--red); }
.titulo p { margin: 0; max-width: 60ch; color: #e2d6c4; font-size: 19px; }
h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 30px; text-transform: uppercase; letter-spacing: .8px; }

/* ---- Tarjetas (con una esquina doblada como papel) ---- */
.tarjeta { position: relative; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.tarjeta::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 26px 26px 0; border-color: transparent var(--bg) rgba(0, 0, 0, .35) transparent; }

/* ---- Cómo usar: pasos ---- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.paso { position: relative; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.paso .num { width: 42px; height: 37px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-family: var(--display); font-size: 17px; color: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.paso:nth-child(1) .num { background: var(--red); } .paso:nth-child(2) .num { background: var(--orange); }
.paso:nth-child(3) .num { background: var(--blue); } .paso:nth-child(4) .num { background: var(--gold); } .paso:nth-child(5) .num { background: #8a9499; }
.paso h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1.15; text-transform: uppercase; letter-spacing: .6px; }
.paso p { margin: 0; color: #e2d6c4; font-size: 14.5px; line-height: 1.45; }

/* ---- Formularios ---- */
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.campo { display: flex; flex-direction: column; gap: 6px; }
label { font-weight: 700; font-size: 15px; letter-spacing: .3px; }
input, textarea { font: inherit; color: var(--fg); background: var(--panel-2); border: 1px solid #4a3a30; border-radius: 6px; padding: 10px 14px; min-height: 44px; width: 100%; }
input:focus, textarea:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px rgba(232, 120, 42, .25); }
textarea { min-height: 90px; height: 16vh; resize: none; }
.nota { margin: 0; font-size: 14px; color: var(--muted); }
.aviso { margin: 0; padding: 12px 16px; border: 1px dashed var(--orange); border-radius: 10px; color: #ffd9b0; font-size: 15px; }
.oculto-bots { position: absolute; left: -9999px; }

/* En pantallas estrechas los pasos van uno debajo de otro (encajar.js los encoge si hace falta) */
@media (max-width: 760px) {
  .pasos { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .paso { padding: 10px 14px; }
}
@media (max-width: 700px) {
  .barra nav { gap: 2px 16px; }
  .barra nav a { font-size: 16px; letter-spacing: 1px; padding: 3px 0; }
  .barra nav a::before { margin-right: 6px; }
  .cuenta .btn { font-size: 16px; min-height: 38px; padding: 0 12px; }
  .pagina { gap: 14px; padding-top: 10px; }
}