/* La portada de naosforme.com: la promesa de NAOS, pública y sin pase. Mismo lenguaje
   que la presentación (fondo tinta, naranja, Inter 900) y las fuentes servidas desde aquí. */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url(/fuentes/inter-400.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url(/fuentes/inter-500.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url(/fuentes/inter-700.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 900; font-display: swap; src: url(/fuentes/inter-900.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url(/fuentes/jetbrains-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url(/fuentes/jetbrains-mono-500.woff2) format('woff2'); }

:root {
  --ink: #0E1A2B; --orange: #E85A1A; --grey: #5C6470; --light-grey: #B8BEC5;
  --paper: #FAFAF7; --grid: #E5E2D8; --interior: #FFFFFE;
  --soft: rgba(255,255,255,0.72); --dim: rgba(255,255,255,0.5); --line: rgba(255,255,255,0.16);
  --sans: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.o { color: var(--orange); }
.envoltura { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Cabecera */
.cabecera { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.cabecera .envoltura { display: flex; justify-content: space-between; align-items: center; height: 76px; }
.logo { font-weight: 900; font-size: 26px; letter-spacing: -0.04em; color: #fff; text-decoration: none; display: inline-flex; align-items: baseline; }
.logo::after { content: ''; width: 13px; height: 4px; background: var(--orange); margin-left: 3px; animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.boton { display: inline-block; font: 500 14px var(--sans); text-decoration: none; padding: 12px 22px; border: 1px solid currentColor; cursor: pointer; background: none; color: inherit; transition: background .2s, color .2s, border-color .2s; }
.boton:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.boton.lleno { background: var(--orange); border-color: var(--orange); color: #fff; }
.boton.lleno:hover { background: #fff; color: var(--ink); border-color: #fff; }
.cabecera .boton { color: #fff; padding: 9px 18px; }

/* 1 · La promesa */
/* Una sola pantalla: la promesa ocupa lo que deja el pie, y el pie se ve sin bajar. */
body { min-height: 100vh; display: flex; flex-direction: column; background: var(--ink); }
.promesa { background: var(--ink); color: #fff; flex: 1; display: flex; align-items: center; padding: 120px 0 48px; }
.promesa > .envoltura { width: 100%; }
.promesa .mono { color: var(--orange); margin-bottom: 28px; }
.promesa h1 { font-weight: 900; font-size: clamp(36px, 6vw, 76px); line-height: 1.03; letter-spacing: -0.03em; max-width: 960px; }
.promesa p { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--soft); max-width: 640px; margin-top: 28px; font-weight: 400; }
.promesa .acciones { margin-top: 44px; display: flex; gap: 14px; flex-wrap: wrap; }

.pie { background: var(--ink); color: var(--dim); padding: 0 0 48px; font-size: 13px; }
.pie .envoltura { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pie a { color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.pie a:hover { color: var(--orange); border-color: var(--orange); }

@media (max-width: 780px) {
  .envoltura { padding: 0 16px; }
}