/* ==========================================================================
   SMIÐJA ÁSGARÐS — Hoja de estilos principal
   Estructura:
   1. Tokens de marca (color, tipografía, espaciado)
   2. Reset y base
   3. Utilidades y layout
   4. Componentes: header, botones, tarjetas, formulario
   5. Secciones: hero, servicios, la forja, por qué, contacto, footer
   6. Animaciones
   7. Responsive
   8. Accesibilidad / prefers-reduced-motion
   ========================================================================== */

/* ---------- 1. TOKENS DE MARCA ---------- */
:root {
  /* Paleta oficial Smiðja Ásgarðs */
  --anthracite: #1a1a1a;      /* fondo principal */
  --deep-black: #0d0d0d;      /* profundidad, degradados */
  --gold: #c5a059;            /* dorado principal */
  --gold-dark: #8b6f3d;       /* sombras / detalles metálicos */
  --gold-light: #e8c77e;      /* reflejos / acentos puntuales */
  --ivory: #fdfbf7;           /* texto principal */

  /* Derivados de trabajo (transparencias sobre la base de marca) */
  --ivory-muted: rgba(253, 251, 247, 0.68);
  --ivory-faint: rgba(253, 251, 247, 0.4);
  --gold-line: rgba(197, 160, 89, 0.35);
  --gold-line-soft: rgba(197, 160, 89, 0.16);
  --surface-raised: rgba(253, 251, 247, 0.03);
  --surface-raised-hover: rgba(253, 251, 247, 0.06);
  --border-hairline: rgba(197, 160, 89, 0.22);

  /* Acento holográfico — reservado para la futura capa de personajes
     (ver comentario "FUTURE INTERACTIVE CHARACTER LAYER" al final del
     archivo). Brokkr Hildesson es el primero en utilizarlo; el resto
     de la web sigue gobernada por antracita + dorado + marfil. */
  --hologram-blue: #5fb4e0;
  --hologram-blue-light: #a7dcf2;
  --hologram-blue-line: rgba(95, 180, 224, 0.45);
  --hologram-blue-soft: rgba(95, 180, 224, 0.14);
  --hologram-blue-glow: rgba(95, 180, 224, 0.55);

  /* Tipografía: Jost (display) + Outfit (texto) */
  --font-display: "Jost", "Outfit", "Segoe UI", sans-serif;
  --font-body: "Outfit", "Segoe UI", sans-serif;

  /* Escala tipográfica fluida */
  --fs-h1: clamp(2.4rem, 5vw + 1rem, 4.6rem);
  --fs-h2: clamp(1.9rem, 3vw + 1rem, 2.8rem);
  --fs-h3: clamp(1.1rem, 1vw + 0.9rem, 1.3rem);
  --fs-lead: clamp(1.05rem, 0.6vw + 0.9rem, 1.25rem);
  --fs-body: 1rem;
  --fs-eyebrow: 0.8rem;

  /* Espaciado editorial */
  --section-pad-y: clamp(5rem, 10vw, 9rem);
  --container-w: 1180px;
  --container-pad-x: clamp(1.5rem, 5vw, 3rem);

  /* Ritmo y transición */
  --ease-elegant: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.6s;
  --dur-slow: 1.4s;

  --radius-card: 4px;
  --header-h: 100px;
}

@media (max-width: 640px) {
  :root {
    --header-h: 84px;
  }
}

/* ---------- 2. RESET Y BASE ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background-color: var(--anthracite);
  /* Firma ambiental: la bindrune (ya pre-renderizada a ~3% de opacidad
     en el propio archivo) permanece fija respecto al viewport mientras
     se hace scroll, por lo que asoma de forma continua y muy sutil en
     cualquier sección que no pinte su propio fondo opaco encima
     (Servicios, Por qué Smiðja). La Forja y Contacto la reciben de
     nuevo explícitamente más abajo, junto a su propio degradado. */
  background-image: url("../assets/bindrune-watermark.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(50vw, 620px);
  background-attachment: fixed;
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ivory);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.01em;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Foco visible y accesible en toda la web */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--gold-dark);
  color: var(--ivory);
}

/* Enlace de salto para lectores de pantalla / teclado */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--deep-black);
  color: var(--gold-light);
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--border-hairline);
  z-index: 999;
  transition: top var(--dur-fast) var(--ease-elegant);
}

.skip-link:focus {
  top: 1rem;
}

/* ---------- 3. UTILIDADES Y LAYOUT ---------- */
.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
}

.section {
  position: relative;
  padding-block: var(--section-pad-y);
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head--center .eyebrow::before {
  display: none;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--ivory-muted);
  font-weight: 300;
  max-width: 58ch;
}

.section-head--center .lead {
  margin-inline: auto;
}

.divider-rune {
  display: flex;
  justify-content: center;
  margin-block: clamp(3rem, 6vw, 5rem);
  opacity: 0.55;
}

.divider-rune img {
  width: 34px;
  height: 34px;
  opacity: 0.7;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fondo ambiental compartido: profundidad + textura discreta */
.ambient-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 15% 0%, rgba(197, 160, 89, 0.07), transparent 60%),
    radial-gradient(ellipse 55% 50% at 100% 100%, rgba(13, 13, 13, 0.9), transparent 65%);
}

/* ---------- 4. COMPONENTES ---------- */

/* --- Botones / CTA --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-elegant),
    border-color var(--dur-fast) var(--ease-elegant),
    background var(--dur-fast) var(--ease-elegant),
    color var(--dur-fast) var(--ease-elegant);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  color: var(--deep-black);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px rgba(197, 160, 89, 0.55);
}

.btn-ghost {
  background: transparent;
  color: var(--ivory);
  border-color: var(--border-hairline);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--gold);
  color: var(--gold-light);
}

/* --- Header --- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) var(--ease-elegant),
    border-color var(--dur-med) var(--ease-elegant),
    backdrop-filter var(--dur-med) var(--ease-elegant);
}

.site-header.is-scrolled {
  background: rgba(13, 13, 13, 0.72);
  border-bottom-color: var(--border-hairline);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
}

.brand-text {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  transition: color var(--dur-fast) var(--ease-elegant);
}

.brand:hover .brand-text,
.brand:focus-visible .brand-text {
  color: var(--gold-light);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.main-nav a {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  position: relative;
  padding-block: 0.35rem;
  transition: color var(--dur-fast) var(--ease-elegant);
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width var(--dur-fast) var(--ease-elegant);
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--ivory);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  width: 100%;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-hairline);
  border-radius: 2px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
}

/* --- Mobile nav drawer --- */
.mobile-nav {
  position: fixed;
  inset: 0;
  top: var(--header-h);
  background: rgba(13, 13, 13, 0.98);
  border-top: 1px solid var(--border-hairline);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-elegant),
    transform var(--dur-fast) var(--ease-elegant),
    visibility var(--dur-fast);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ivory);
  letter-spacing: 0.04em;
}

.mobile-nav .btn {
  margin-top: 1rem;
}

/* ---------- 5. SECCIONES ---------- */

/* --- HERO --- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  padding-bottom: clamp(6rem, 11vh, 7.5rem);
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #232323 0%, var(--anthracite) 55%, var(--deep-black) 100%);
}

.hero-bindrune {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80vw, 900px);
  transform: translate(-50%, -50%);
  opacity: 0.05;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.hero-logo {
  display: block;
  width: clamp(220px, 24vw, 300px);
  height: auto;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
}

.hero-title {
  font-size: var(--fs-h1);
  margin-bottom: 0.6rem;
}

.hero-subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw + 0.6rem, 1.9rem);
  color: var(--ivory-muted);
  margin-bottom: 2rem;
}

.shimmer {
  background: linear-gradient(
    100deg,
    var(--gold-dark) 20%,
    var(--gold-light) 45%,
    var(--gold) 55%,
    var(--gold-dark) 80%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-sweep 7s ease-in-out infinite;
}

.hero-lead {
  font-size: var(--fs-lead);
  color: var(--ivory-muted);
  font-weight: 300;
  max-width: 52ch;
  margin-bottom: 2.75rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
}

.hero-link-secondary {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 4px;
  transition: color var(--dur-fast) var(--ease-elegant), border-color var(--dur-fast) var(--ease-elegant);
}

.hero-link-secondary:hover,
.hero-link-secondary:focus-visible {
  color: var(--gold-light);
  border-color: var(--gold);
}

.scroll-cue {
  position: absolute;
  bottom: clamp(1.5rem, 4vw, 2.75rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--ivory-faint);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  z-index: 1;
}

.scroll-cue .line {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--gold), transparent);
  animation: scroll-pulse 2.4s ease-in-out infinite;
}

/* --- SERVICIOS ---
   Composición editorial 3 + 2: una rejilla base de 6 columnas en la que
   las tres primeras tarjetas ocupan 2 columnas cada una (fila completa)
   y las dos últimas ocupan también 2 columnas cada una pero arrancan
   desplazadas una columna, quedando centradas en la segunda fila. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
}

.service-card:nth-child(1) { grid-column: 1 / 3; }
.service-card:nth-child(2) { grid-column: 3 / 5; }
.service-card:nth-child(3) { grid-column: 5 / 7; }
.service-card:nth-child(4) { grid-column: 2 / 4; }
.service-card:nth-child(5) { grid-column: 4 / 6; }

.service-card {
  background: var(--anthracite);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
  transition: background var(--dur-med) var(--ease-elegant);
}

.service-card:hover {
  background: var(--surface-raised-hover);
}

.service-card .card-index {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--gold-dark);
  display: block;
  margin-bottom: 1.25rem;
}

.service-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.85rem;
}

.service-card p {
  color: var(--ivory-muted);
  font-size: 0.95rem;
  font-weight: 300;
}

.services-note {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: var(--ivory-faint);
  font-weight: 300;
  max-width: 60ch;
}

/* --- LA FORJA (elemento distintivo) --- */
.forge-section {
  background: url("../assets/bindrune-watermark.webp") center center / min(50vw, 620px) no-repeat fixed,
    linear-gradient(180deg, var(--anthracite), var(--deep-black));
}

.forge-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* La "línea de forja": un filamento dorado que recorre las etapas
   como una soldadura, con un pulso de calor que la recorre al
   entrar en pantalla. Este es el elemento firma de la sección. */
.forge-timeline::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--gold-dark),
    var(--gold-line) 50%,
    var(--gold-dark)
  );
}

.forge-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease-elegant), transform 0.9s var(--ease-elegant);
}

.forge-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.forge-step:not(:last-child) {
  border-bottom: 1px solid rgba(253, 251, 247, 0.06);
}

.forge-node {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: var(--deep-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold-light);
  transition: box-shadow 0.9s var(--ease-elegant), border-color 0.9s var(--ease-elegant);
}

.forge-step.is-visible .forge-node {
  box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.06), 0 0 22px -4px rgba(232, 199, 126, 0.45);
  border-color: var(--gold);
}

.forge-content h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.6rem;
  letter-spacing: 0.02em;
}

.forge-content p {
  color: var(--ivory-muted);
  font-weight: 300;
  max-width: 60ch;
}

/* --- POR QUÉ SMIÐJA --- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}

.why-item {
  border-top: 1px solid var(--border-hairline);
  padding-top: 1.5rem;
}

.why-item h3 {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.85rem;
}

.why-item p {
  color: var(--ivory-muted);
  font-weight: 300;
  font-size: 0.95rem;
}

/* --- CONTACTO --- */
.contact-section {
  background: url("../assets/bindrune-watermark.webp") center center / min(50vw, 620px) no-repeat fixed,
    linear-gradient(180deg, var(--deep-black), var(--anthracite));
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact-intro h2 {
  font-size: var(--fs-h2);
  margin-bottom: 1.25rem;
}

.contact-intro p {
  color: var(--ivory-muted);
  font-weight: 300;
  font-size: var(--fs-lead);
  max-width: 42ch;
}

.contact-form {
  display: grid;
  gap: 1.4rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.field label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory-faint);
}

.field .required {
  color: var(--gold);
}

.field input,
.field select,
.field textarea {
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: 2px;
  color: var(--ivory);
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease-elegant), background var(--dur-fast) var(--ease-elegant);
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(253, 251, 247, 0.32);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  background: var(--surface-raised-hover);
  outline: none;
}

.field textarea {
  resize: vertical;
  min-height: 130px;
}

.form-submit {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.form-status {
  font-size: 0.85rem;
  color: var(--gold-light);
}

.form-status:empty {
  display: none;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border-hairline);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--deep-black);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.footer-brand img {
  width: 30px;
  height: 30px;
  opacity: 0.85;
}

.footer-brand span {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  color: var(--ivory-muted);
  font-size: 0.9rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.footer-nav a {
  font-size: 0.82rem;
  color: var(--ivory-faint);
  letter-spacing: 0.05em;
  transition: color var(--dur-fast) var(--ease-elegant);
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--gold-light);
}

.footer-meta {
  width: 100%;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(253, 251, 247, 0.06);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: rgba(253, 251, 247, 0.35);
}

/* ---------- 6. ANIMACIONES ---------- */
@keyframes shimmer-sweep {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.25; transform: scaleY(0.7); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* Reveal genérico al hacer scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-elegant), transform 0.9s var(--ease-elegant);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 7. RESPONSIVE ---------- */
@media (max-width: 900px) {
  .main-nav {
    display: none;
  }

  .header-cta .btn {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card:nth-child(1),
  .service-card:nth-child(2),
  .service-card:nth-child(3),
  .service-card:nth-child(4),
  .service-card:nth-child(5) {
    grid-column: auto;
  }

  /* En móvil/tablet se desactiva el anclaje al viewport de la marca de
     agua (background-attachment: fixed) por estabilidad y rendimiento;
     el símbolo se mantiene visible, solo deja de "seguir" el scroll. */
  body,
  .forge-section,
  .contact-section {
    background-attachment: scroll;
  }
}

@media (max-width: 640px) {
  .brand-text {
    font-size: 0.82rem;
  }

  .hero {
    padding-top: calc(var(--header-h) + 1rem);
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 8. PREFERS-REDUCED-MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .shimmer {
    animation: none;
    background-position: 40% 50%;
  }

  .scroll-cue .line {
    animation: none;
  }

  .reveal,
  .forge-step {
    opacity: 1;
    transform: none;
    transition: none;
  }

  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   CHARACTER INVOCATION LAYER
   Arquitectura reutilizable de "invocación de personajes" para la futura
   familia de personajes de mitología nórdica (Odín, Brokkr, Loki). El
   marcado de cada personaje lo genera CharacterInvocation en js/main.js a
   partir de la configuración CHARACTERS (mismo archivo); estas reglas
   estilan cualquier personaje que use esas clases, no solo a Brokkr.
   Brokkr Hildesson es la primera implementación activa. El resto de la
   web sigue gobernada por antracita, dorado y marfil; el azul holográfico
   (--hologram-blue y derivados, definidos en la sección 1) queda
   reservado en exclusiva para esta capa.

   Secuencia de invocación (clases añadidas por JS):
     runa:      idle -> .is-awakening (destello breve) -> activa (.is-open)
     personaje: oculto -> materializándose -> visible   (todo vía .is-open
                en .character-widget, con retardos escalonados por CSS)
     panel:     cerrado -> abriéndose -> abierto         (idem, vía .is-open)
   Cerrar invierte la secuencia. Toda la coreografía se apoya en
   opacity/transform/filter — nada de JS anima directamente.
   ========================================================================== */

.character-widget {
  position: fixed;
  right: clamp(1.25rem, 4vw, 2rem);
  bottom: clamp(1.25rem, 4vw, 2rem);
  z-index: 200;
}

/* Velo de fondo a pantalla completa: al invocar a Brokkr, el resto de la
   página se atenúa muy ligeramente para que el personaje y el panel se
   lean como una capa en primer plano deliberada — nunca como una
   superposición accidental sobre el contenido. Clic fuera cierra
   (gestionado en JS). */
.character-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(13, 13, 13, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-elegant), visibility 0.4s;
  pointer-events: none;
}

.character-widget.is-open .character-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* --- Runa de invocación ---
   Discreta en reposo: borde y glow cian muy tenues, sin pulsaciones
   llamativas. Se aviva al hover y destella brevemente al activarse. */
.rune-trigger {
  position: relative;
  z-index: 2;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(95, 180, 224, 0.08), var(--deep-black) 72%);
  border: 1px solid rgba(95, 180, 224, 0.28);
  color: var(--hologram-blue-light);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.6);
  transition: transform var(--dur-fast) var(--ease-elegant),
    box-shadow var(--dur-med) var(--ease-elegant),
    border-color var(--dur-med) var(--ease-elegant);
}

.rune-trigger svg {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
}

.rune-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hologram-blue-glow), transparent 70%);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--dur-med) var(--ease-elegant), transform var(--dur-med) var(--ease-elegant);
  pointer-events: none;
}

.rune-trigger:hover,
.rune-trigger:focus-visible {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--hologram-blue-line);
}

.rune-trigger:hover .rune-glow,
.rune-trigger:focus-visible .rune-glow {
  opacity: 0.55;
  transform: scale(1);
}

/* Destello de activación: breve y contenido, no un pulso continuo. */
.rune-trigger.is-awakening .rune-glow {
  opacity: 0.9;
  transform: scale(1.3);
  transition-duration: 0.14s;
}

.character-widget.is-open .rune-trigger {
  border-color: var(--hologram-blue-line);
  box-shadow: 0 0 0 1px rgba(95, 180, 224, 0.16), 0 0 22px -6px var(--hologram-blue-glow);
}

.character-widget.is-open .rune-trigger .rune-glow {
  opacity: 0.4;
  transform: scale(1);
}

/* --- Cluster de invocación: personaje + panel --- */
.invocation-cluster {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: calc(100% + 1rem);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0;
  pointer-events: none;
}

.invocation-cluster > * {
  pointer-events: auto;
}

/* --- Personaje ---
   Oculto y ligeramente hundido/difuminado en reposo; se materializa con
   un desvanecido + enfoque suave, sobresaliendo un poco a la izquierda
   del panel sin taparlo. object-fit: contain conserva sus proporciones
   completas (cabeza, manos y botas nunca se recortan). */
.character-figure {
  height: min(50vh, 380px);
  width: auto;
  max-width: 34vw;
  object-fit: contain;
  object-position: bottom;
  margin-right: -0.5rem;
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  filter: blur(6px);
  transition: opacity 0.5s var(--ease-elegant) 0.05s,
    transform 0.5s var(--ease-elegant) 0.05s,
    filter 0.5s var(--ease-elegant) 0.05s;
}

.character-widget.is-open .character-figure {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* --- Panel holográfico --- */
.character-panel {
  position: relative;
  width: min(340px, calc(100vw - 2.5rem));
  padding: 1.75rem 1.6rem;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.97), rgba(13, 13, 13, 0.99));
  border: 1px solid var(--hologram-blue-line);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(95, 180, 224, 0.06), 0 0 40px -8px var(--hologram-blue-glow),
    0 20px 50px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.45s var(--ease-elegant) 0.12s,
    transform 0.45s var(--ease-elegant) 0.12s,
    visibility 0.45s 0.12s;
}

.character-widget.is-open .character-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Línea de escaneo: barrido vertical muy sutil, apenas perceptible */
.character-panel-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(95, 180, 224, 0.06) 45%, transparent 90%);
  background-size: 100% 240%;
  animation: character-panel-scan 6s linear infinite;
}

.character-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(95, 180, 224, 0.3);
  background: transparent;
  color: var(--hologram-blue-light);
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast) var(--ease-elegant), color var(--dur-fast) var(--ease-elegant);
}

.character-close:hover,
.character-close:focus-visible {
  border-color: var(--hologram-blue-light);
  color: var(--ivory);
}

.character-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hologram-blue-light);
  margin-bottom: 0.6rem;
  padding-right: 2rem;
}

.character-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ivory);
  text-shadow: 0 0 18px rgba(95, 180, 224, 0.35);
  margin-bottom: 1.4rem;
  padding-right: 1.5rem;
}

.character-links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.character-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-hairline);
  border-radius: 3px;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--ivory-muted);
  transition: border-color var(--dur-fast) var(--ease-elegant),
    color var(--dur-fast) var(--ease-elegant),
    background var(--dur-fast) var(--ease-elegant);
}

.character-link::after {
  content: "\2192";
  color: var(--hologram-blue-light);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease-elegant), transform var(--dur-fast) var(--ease-elegant);
}

.character-link:hover,
.character-link:focus-visible {
  color: var(--ivory);
  border-color: var(--hologram-blue-line);
  background: rgba(95, 180, 224, 0.05);
}

.character-link:hover::after,
.character-link:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

@keyframes character-panel-scan {
  0% { background-position: 0 -60%; }
  100% { background-position: 0 60%; }
}

/* Tablet: el personaje se reduce progresivamente para no invadir la
   pantalla, pero sigue presente junto al panel. */
@media (max-width: 900px) {
  .character-figure {
    height: min(40vh, 300px);
    max-width: 42vw;
  }
}

/* Móvil: sin espacio suficiente para el personaje completo sin arriesgar
   overflow horizontal — se oculta y queda runa + panel, que siguen
   siendo perfectamente utilizables. */
@media (max-width: 640px) {
  .invocation-cluster {
    right: -0.25rem;
  }

  .character-figure {
    display: none;
  }

  .character-panel {
    width: calc(100vw - 2rem);
  }
}