/* ==========================================================================
   Hero "Grafito" (perlas de plata) — solo se carga en la home.

   Adaptado del paquete wemark-hero v18: mismas medidas, tipografías y
   tokens, pero con todas las clases prefijadas con `hero-beads__` y los
   tokens de color dentro de `.hero-beads` para que no choquen con el CSS
   global del sitio (que ya define .hero, .btn, .nav, h1…).

   La cabecera del paquete se ha quitado: el hero va debajo del nav fijo
   del sitio (var(--nav-height)), que no se toca.
   ========================================================================== */

:root { --hero-scroll: 0; } /* 0 → 1 según se baja por el hero; lo actualiza hero.js */

/* Las fuentes Instrument (Sans y Serif itálica) se declaran en style.css: también se usan en los pies de las piezas de los casos. */

.hero-beads {
  --wall: #4a5256;
  --wall-top: #858f93;
  --floor: #353c41;
  --floor-deep: #262c30;
  --ink: #22262a;
  --ink-muted: #4b5055;
  --paper: #eef0f1;
  --paper-muted: #aab0b5;
  --paper-faint: #7d848a;
  --line-light: rgba(238, 240, 241, 0.14);
  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  position: sticky; /* se queda fijo mientras .home-content sube por encima (cortina) */
  top: 0;
  z-index: 0;
  min-height: 100vh;   /* respaldo */
  min-height: 100svh;  /* altura realmente visible: en iPhone deja fuera la barra inferior de Safari */
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: var(--nav-height);
  isolation: isolate;
  background: linear-gradient(112deg, var(--wall-top) 0%, var(--wall) 100%);
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.hero-beads__stage {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
  touch-action: pan-y;
}
.hero-beads__shade {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.34;
  background:
    linear-gradient(118deg, transparent 18%, rgba(20,26,30,0.55) 24%, transparent 31%),
    linear-gradient(112deg, transparent 34%, rgba(20,26,30,0.45) 40%, transparent 46%),
    linear-gradient(106deg, transparent 50%, rgba(20,26,30,0.35) 56%, transparent 63%);
  filter: blur(22px);
}
/* grano de película + viñeta */
.hero-beads::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.16;
  mix-blend-mode: overlay;
}
.hero-beads::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(20, 23, 26, 0.35) 100%);
}
.hero-beads__hint, .hero-beads__foot { position: relative; z-index: 2; }
/* El titular, el texto y los botones se desvanecen en la primera mitad del scroll del hero */
.hero-beads__foot {
  opacity: clamp(0, 1 - var(--hero-scroll) * 2.2, 1);
  transform: translateY(calc(var(--hero-scroll) * -40px));
  will-change: opacity, transform;
}
.hero-beads__hint { opacity: clamp(0, 1 - var(--hero-scroll) * 4, 1); }

/* Cortina: el resto de la home sube por encima del hero con las esquinas redondeadas.
   Entra en transparencia: las tarjetas flotan sobre el hero gris y el fondo blanco solo aparece al final
   (entre el 82 % y el 92 % del scroll del hero), justo cuando el header pasa a blanco (main.js lo cambia
   al llegar el contenido a la altura del nav, ≈ 91 %). Las dos primeras tarjetas se funden al subir. */
.home-content {
  position: relative;
  z-index: 2;
  isolation: isolate;
}
.home-content::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--color-white);
  border-radius: 24px 24px 0 0;
  opacity: clamp(0, (var(--hero-scroll) - 0.82) * 10, 1);
}
.home-content .projects-row--first .pcard {
  opacity: clamp(0, (var(--hero-scroll) - 0.05) * 2.2, 1);
}

/* El JS del paquete rellena #markPath con el trazado del logo; aquí no se muestra (el logo es el del nav). */
.hero-beads__markpath { display: none; }

.hero-beads__hint {
  grid-row: 1;
  justify-self: end; align-self: start;
  margin-right: max(16px, env(safe-area-inset-right, 0px));
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-muted);
  transition: opacity .8s ease;
  pointer-events: none;
}
.hero-beads__hint i { width: 28px; height: 1px; background: currentColor; display: block; }
.hero-beads__hint.off { opacity: 0; }

.hero-beads__foot {
  grid-row: 2;
  color: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 32px 48px;
  align-items: end;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
}
.hero-beads__lede { min-width: 0; max-width: 640px; }
.hero-beads__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.7vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  max-width: 16ch;
  text-wrap: balance;
}
.hero-beads__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.hero-beads__lede p { margin: 0 0 22px; color: var(--paper-muted); max-width: 62ch; font-size: 15px; text-wrap: balance; }
.hero-beads__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-beads__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  border: 1px solid transparent; color: var(--ink); background: var(--paper);
  transition: background .2s ease, transform .2s ease;
}
.hero-beads__btn:hover { background: #ffffff; transform: translateY(-1px); }
.hero-beads__btn--ghost { background: transparent; color: var(--paper); border-color: var(--line-light); }
.hero-beads__btn--ghost:hover { background: rgba(238,240,241,0.08); }
.hero-beads__btn svg { width: 14px; height: 14px; }
.hero-beads__btn:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.hero-beads__services { min-width: 0; justify-self: end; text-align: right; align-self: start; padding-top: 6px; } /* la etiqueta arranca en la línea del titular */
.hero-beads__services ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--paper-muted); }
.hero-beads__services li span { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 10px; }
.hero-beads__services li { transition: color .2s ease; }
.hero-beads__services li:hover { color: var(--paper); }

@media (max-width: 720px) {
  .hero-beads__hint { display: none; }
  .hero-beads__foot { grid-template-columns: 1fr; gap: 26px; padding-bottom: 45px; } /* 15 px más arriba que el original (30px) */
  .hero-beads__services { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-beads__btn, .hero-beads__services li, .hero-beads__hint { transition: none; }
  .hero-beads__foot { transform: none; }
}