/* Casa Vesperia (muestra): tokens, letras, menú, pie y piezas que se repiten en todas las páginas.
   Lenguaje visual tomado de satius.app: crema, café casi negro y naranja; serif grande que mezcla
   cursiva en minúsculas con MAYÚSCULAS. */
@font-face { font-family: "Gloock"; src: url("../fuentes/gloock-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fuentes/inter-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --oscuro: #210A0A;
  --crema: #EBEFDD;
  --crema-2: #DBDDCD;
  --acento: #F13F07;          /* títulos y texto grande; 4.9:1 sobre el oscuro */
  --acento-osc: #B32E05;      /* texto chico sobre crema: 5.4:1 */
  --azul: #1D72C2;            /* el botón del menú, como en Satius (#207BCF), un poco más oscuro para 5:1 con blanco */
  --crema-tenue: rgba(235, 239, 221, 0.66);
  --oscuro-tenue: rgba(33, 10, 10, 0.72);
  --serif: "Gloock", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --borde-claro: rgba(33, 10, 10, 0.14);
  --borde-oscuro: rgba(235, 239, 221, 0.14);
  --menu-alto: 64px;

  /* kamu-ui con los colores de la casa */
  --radius: 0.25rem;
  --background: var(--crema);
  --foreground: var(--oscuro);
  --card: var(--crema);
  --card-foreground: var(--oscuro);
  --primary: var(--acento-osc);
  --primary-foreground: #FFFFFF;
  --secondary: var(--crema-2);
  --secondary-foreground: var(--oscuro);
  --muted: var(--crema-2);
  --muted-foreground: rgba(33, 10, 10, 0.72);
  --border: var(--borde-claro);
  --input: rgba(33, 10, 10, 0.5);
  --ring: var(--acento-osc);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--menu-alto); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--oscuro);
  color: var(--crema);
  font: 400 16px/1.4 var(--sans);
  letter-spacing: 0.01em;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 8px 16px; background: var(--crema); color: var(--oscuro); }
.saltar:focus { top: 16px; }

/* ---------- títulos al estilo Satius ---------- */
.titulo { margin: 0; font: 400 1rem/1 var(--serif); color: var(--acento); text-align: center; letter-spacing: 0.01em; }
.titulo__it { display: block; font-style: italic; font-size: clamp(36px, 4.8vw, 68px); line-height: 1.05; text-transform: lowercase; }
.titulo__may { display: block; font-size: clamp(44px, 6.3vw, 90px); line-height: 1.12; text-transform: uppercase; }
.titulo--hero .titulo__it { font-size: clamp(40px, 6.3vw, 90px); }
.titulo--hero .titulo__may { font-size: clamp(54px, 8.4vw, 120px); line-height: 0.92; }
.texto { max-width: 470px; margin: 20px auto 0; font-size: 1rem; line-height: 1.3; text-align: center; color: var(--crema-tenue); text-wrap: pretty; }
.claro .texto { color: var(--oscuro-tenue); }
.etiqueta { font: 500 14px/1.3 var(--sans); letter-spacing: 0.01em; text-transform: uppercase; }
.enlace-serif { font: 400 14px/1.3 var(--serif); font-style: italic; color: var(--acento); text-underline-offset: 4px; }
.claro .enlace-serif { color: var(--acento-osc); }

.seccion { position: relative; padding: clamp(96px, 12vw, 160px) 16px; }
.claro { background: var(--crema); color: var(--oscuro); }
.claro .titulo { color: var(--acento); }

/* ---------- menú ---------- */
.menu {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--menu-alto);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px;
  color: var(--crema); transition: color .3s, background-color .3s;
}
.menu[data-tema="claro"] { color: var(--oscuro); }
/* Difuminado de arriba, como en Satius: el contenido se pierde bajo el menú en vez de cortarse. */
.menu::before {
  content: ""; position: absolute; inset: 0 0 -56px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--oscuro) 0%, rgba(33, 10, 10, .82) 40%, rgba(33, 10, 10, 0) 100%);
}
.menu[data-tema="claro"]::before { background: linear-gradient(var(--crema) 0%, rgba(235, 239, 221, .82) 40%, rgba(235, 239, 221, 0) 100%); }
.menu__links { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.menu__links a { font: 500 14px/1 var(--sans); text-transform: uppercase; text-decoration: none; padding: 8px 0; }
.menu__links a:hover, .menu__links a[aria-current="page"] { color: var(--acento); }
.menu[data-tema="claro"] .menu__links a:hover, .menu[data-tema="claro"] .menu__links a[aria-current="page"] { color: var(--acento-osc); }
.menu__logo { display: grid; place-items: center; width: 44px; height: 44px; color: var(--acento); }
.menu__logo svg { width: 30px; height: 36px; }
.menu__der { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.alterna { display: flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 14px/1 var(--sans); min-height: 44px; }
.alterna span { opacity: .5; }
.alterna span[aria-current="true"] { opacity: 1; }
.btn-azul {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 2px;
  background: var(--azul); color: #fff; font: 400 14px/1 var(--sans); text-decoration: none; white-space: nowrap;
}
.btn-azul:hover { background: #185FA3; }
.menu__hamburguesa { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.menu__hamburguesa svg { width: 24px; height: 24px; }

.panel {
  position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 96px 24px 40px; background: var(--oscuro); visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s;
}
.panel[data-abierto] { visibility: visible; opacity: 1; transition: opacity .3s; }
.panel a { font: 400 44px/1.1 var(--serif); color: var(--acento); text-decoration: none; text-transform: uppercase; }
.panel .panel__alternas { display: flex; gap: 24px; margin-top: 24px; color: var(--crema); }

@media (max-width: 860px) {
  .menu > nav, .menu__der .alterna { display: none; }
  .menu__hamburguesa { display: grid; place-items: center; justify-self: start; }
}

/* ---------- cortina entre páginas ---------- */
.cortina { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--oscuro); color: var(--acento); pointer-events: none; visibility: hidden; }
.cortina svg { width: 64px; height: 80px; }
.js .cortina[data-entrando] { visibility: visible; }

/* ---------- llamada final con video borroso (como "Join the Renaissance") ---------- */
.cierre { position: relative; overflow: hidden; padding: 0; min-height: 100vh; display: grid; place-items: center; }
.cierre__video { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(14px) brightness(.55) saturate(1.1); }
.cierre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--oscuro) 0%, transparent 30%, transparent 70%, var(--oscuro) 100%); }
.cierre__contenido { position: relative; z-index: 1; display: grid; justify-items: center; gap: 28px; padding: 120px 16px; }
.cierre__botones { display: grid; gap: 12px; width: min(360px, 100%); }
.btn-naranja {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 0; border-radius: 2px;
  background: var(--acento); color: var(--oscuro); font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer;
}
.btn-naranja:hover { background: #FF5A24; }
.btn-linea {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--acento);
  border-radius: 2px; background: transparent; color: var(--acento); font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer;
}
.btn-linea:hover { background: rgba(241, 63, 7, .12); }

/* ---------- pie con la marca gigante ---------- */
.pie { padding: 64px 16px 24px; background: var(--oscuro); color: var(--acento); }
.pie__marca { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 32px); }
.pie__marca svg { width: clamp(64px, 11vw, 150px); height: auto; flex: none; }
.pie__palabra { font: 400 clamp(56px, 13.6vw, 196px)/0.9 var(--serif); letter-spacing: 0.01em; text-transform: uppercase; }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; }
.pie__correo { font: 400 clamp(18px, 1.7vw, 24px)/1.2 var(--serif); }
.pie__redes { display: flex; gap: 8px; }
.pie__redes a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; }
.pie__redes svg { width: 18px; height: 18px; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(241, 63, 7, .5); font-size: 12px; }
.pie__legal a { text-underline-offset: 3px; }

/* WhatsApp de adorno */
.wa { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--acento); color: var(--oscuro); cursor: pointer; }
.wa svg { width: 26px; height: 26px; }
.aviso {
  position: fixed; left: 50%; bottom: 84px; z-index: 60; max-width: calc(100% - 32px); padding: 12px 16px; translate: -50% 0;
  background: var(--crema); color: var(--oscuro); font-size: 14px; border-radius: 2px; visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .25s;
}
.aviso[data-visible] { visibility: visible; opacity: 1; transition: opacity .25s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}