/* Base visual v4: tema oscuro único. Tokens del manual de marca GMR, tipografías alojadas, reset y
   tipografía. Los literales hexadecimales viven solo en el :root; todo lo demás usa var(--token).
   Todo el movimiento va únicamente en movimiento.css. */

/* Tipografías alojadas en el sitio (SIL Open Font License 1.1, textos en assets/fuentes/):
   Archivo (Omnibus-Type), variable: peso 100–900, ancho 62–125 %.
   JetBrains Mono (JetBrains), variable: peso 100–800.
   Playfair Display (Claus Eggers Sørensen), solo itálica, variable: peso 400–900. Es un acento afín al logo y se usa
   en tres frases del Inicio (segunda línea del titular, enfoque y frase del socio); sin precarga. */
@font-face {
  font-family: "Archivo";
  src: url(../assets/fuentes/archivo-latin.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(../assets/fuentes/jetbrains-mono-latin.woff2) format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url(../assets/fuentes/playfair-italic-latin.woff2) format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --fondo: #16131F;
  --noche: #241B3D;
  --linea: #3A3452;
  --texto: #EEEAF8;
  --gris: #A29DB8;
  --blanco: #FFFFFF;
  --violeta-txt: #B4A5EE;
  --violeta: #6144A1;
  --violeta-medio: #836EB3;
  --violeta-claro: #A598C6;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --ancho-titulo: 113%;
  --radio: 10px;
  --ancho: 1240px;
  --alto-cab: 88px;
  --alto-cab-compacto: 70px;
  --curva: cubic-bezier(.16,1,.3,1);
  --curva-io: cubic-bezier(.76,0,.24,1);
  color-scheme: dark;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--fondo);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 17.5px/1.7 var(--sans);
  font-stretch: 100%;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 760px) {
  body { font-size: 16px; }
}

/* Páginas cortas (gracias, 404): el pie queda al fondo de la pantalla */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
main { flex: 1 0 auto; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 640;
  font-stretch: var(--ancho-titulo);
  letter-spacing: -.028em;
  line-height: 1.02;
  text-wrap: balance;
}
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }

a { color: var(--violeta-txt); }
::selection { background: var(--violeta); color: var(--blanco); }
:focus-visible {
  outline: 2px solid var(--violeta-txt);
  outline-offset: 3px;
}

/* Estructura */
.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px), 4vw);
  padding-right: max(20px, env(safe-area-inset-right, 0px), 4vw);
}
@media (min-width: 1360px) {
  .contenedor { padding-left: 56px; padding-right: 56px; }
}

.saltar {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--noche);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

/* Tipografía */
.volanta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--violeta-claro);
}
/* Mini isotipo de 15 × 11 px: tres barras que suben */
.volanta::before {
  content: "";
  flex: none;
  width: 15px;
  height: 11px;
  background:
    linear-gradient(var(--violeta), var(--violeta)) 0 100% / 4px 11px no-repeat,
    linear-gradient(var(--violeta-medio), var(--violeta-medio)) 5.5px 100% / 4px 9px no-repeat,
    linear-gradient(var(--violeta-claro), var(--violeta-claro)) 11px 100% / 4px 7px no-repeat;
  transform-origin: bottom;
}

.titulo-1 {
  margin-top: 28px;
  font-size: clamp(40px, 5.8vw, 84px);
  color: var(--texto);
}
/* Título de sección: 42 px en escritorio y 25 px en el celular (un 27 % menos que en la primera versión), para que una
   oración entre en dos líneas a 1440 px y en tres a 390 px */
.titulo-2 {
  margin-top: 18px;
  font-size: clamp(25px, 2.9vw, 42px);
  color: var(--texto);
}
.titulo-3 {
  font-size: clamp(23px, 2vw, 28px);
  font-weight: 620;
  letter-spacing: -.02em;
  color: var(--violeta-txt);
}

.bajada {
  max-width: 58ch;
  font-size: clamp(17px, 1.35vw, 19.5px);
  color: var(--gris);
}

.etiqueta {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}