/* ============================================================
   Helmit — helmit.pro
   Dirección: precisión suiza + energía de plumón.
   Blanco disciplinado; toda la energía vive en el «!» morado.
   ============================================================ */

:root {
  --blanco: #ffffff;
  --tinta: #0e0e10;
  --morado: #8500b2;
  --morado-profundo: #55007a;
  --lila: #f6eefb;
  --gris: #6b6b70;
  --hairline: #e8e6ec;

  --display: "Bricolage Grotesque", sans-serif;
  --cuerpo: "Instrument Sans", sans-serif;
  --mono: "Spline Sans Mono", monospace;

  --margen: clamp(20px, 5vw, 72px);
  --transicion: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--morado); color: var(--blanco); }

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

:focus-visible {
  outline: 3px solid var(--morado);
  outline-offset: 3px;
  border-radius: 2px;
}

.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--morado);
  color: var(--blanco);
  padding: 10px 18px;
  z-index: 100;
}
.salto:focus { left: 0; }

/* ---------- utilidades tipográficas ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--morado);
}

h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin-top: 14px;
}

/* ============================== NAV ============================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px var(--margen);
  background: color-mix(in srgb, var(--blanco) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav.con-borde { border-bottom-color: var(--hairline); }

.nav-logo { display: flex; align-items: center; }
.nav-logo img { display: block; height: 26px; width: auto; }

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links a {
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--morado);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--transicion);
}
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--tinta);
  padding: 10px 20px;
  border-radius: 999px;
  transition: background 0.25s, transform 0.25s var(--transicion);
}
.nav-cta:hover { background: var(--morado); transform: translateY(-2px); }

/* ============================== HERO ============================== */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px var(--margen) 90px;
  position: relative;
}

/* La lluvia de «!» vive AL FRENTE del contenido: las piezas chocan con las
   letras y botones (cuerpos sólidos en fisica.js). El contenedor no captura
   eventos — solo las piezas — así el texto y los botones siguen usables. */
.fisica {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
.pieza {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  will-change: transform;
  cursor: grab;
  pointer-events: auto;
}
.pieza:active { cursor: grabbing; }
.pieza svg { display: block; width: 100%; height: 100%; }
.pieza-gris-1 { color: #e0e0e6; }
.pieza-gris-2 { color: #cbcbd3; }
.pieza-gris-3 { color: #b3b3bd; }
.pieza-morado { color: var(--morado); }
.pieza-morado-p { color: var(--morado-profundo); }

.hero-eyebrow,
.hero-titulo,
.hero-abajo,
.hero-datos {
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  margin-bottom: 26px;
  opacity: 0;
  animation: aparece 0.7s var(--transicion) 0.15s forwards;
}

.hero-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 8.8vw, 140px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  white-space: nowrap;
}

/* revelado por líneas */
.linea { display: block; overflow: hidden; }
.linea > span {
  display: inline-block;
  transform: translateY(110%);
  animation: sube 0.9s var(--transicion) forwards;
}
.linea:nth-child(1) > span { animation-delay: 0.25s; }
.linea:nth-child(2) > span { animation-delay: 0.38s; }
.linea:nth-child(3) > span { animation-delay: 0.51s; }

.linea:nth-child(2) > span { color: var(--morado); }

/* el «!» — firma de la página */
.signo {
  color: var(--morado);
  display: inline-block;
  position: relative;
  width: 0.34em;
  height: 0.88em;
  margin-left: 0.08em;
  vertical-align: baseline;
}
.signo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateY(0.06em) scale(0);
  transform-origin: 50% 85%;
  animation: estampa 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s forwards;
}
.signo:hover svg { animation: tiembla 0.5s ease-in-out; }

/* aro de tinta que suelta el estampado */
.aro {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 1em;
  height: 1em;
  border: 3px solid var(--morado);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  animation: onda 0.7s ease-out 1.25s;
  pointer-events: none;
}

.hero-abajo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 32px;
  margin-top: 48px;
  opacity: 0;
  animation: aparece 0.8s var(--transicion) 1s forwards;
}

.hero-sub {
  max-width: 46ch;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--gris);
}

.hero-acciones { display: flex; gap: 14px; flex-wrap: wrap; }

.boton {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  transition: transform 0.25s var(--transicion), background 0.25s, color 0.25s, border-color 0.25s;
}
.boton:hover { transform: translateY(-3px); }
.boton-lleno { background: var(--morado); color: var(--blanco); }
.boton-lleno:hover { background: var(--morado-profundo); }
.boton-linea { border: 1.5px solid var(--tinta); }
.boton-linea:hover { border-color: var(--morado); color: var(--morado); }

.hero-datos {
  position: absolute;
  bottom: 26px;
  left: var(--margen);
  right: var(--margen);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  opacity: 0;
  animation: aparece 0.8s var(--transicion) 1.4s forwards;
}

/* ============================ MARQUEE ============================ */

.marquee {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  padding: 18px 0;
  background: var(--blanco);
}
.marquee-pista {
  display: flex;
  width: max-content;
  animation: desfila 28s linear infinite;
}
.marquee:hover .marquee-pista { animation-play-state: paused; }

.marquee-grupo {
  display: flex;
  align-items: center;
  gap: 36px;
  padding-right: 36px;
  font-family: var(--display);
  font-weight: 650;
  font-size: 21px;
  letter-spacing: 0;
  white-space: nowrap;
}

.mini-signo {
  width: 9px;
  height: 22px;
  background: var(--morado);
  clip-path: polygon(20% 0, 80% 0, 68% 62%, 32% 62%, 20% 0);
  position: relative;
  flex-shrink: 0;
}
.mini-signo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 30%;
  width: 40%;
  height: 18%;
  background: var(--morado);
  border-radius: 50%;
}

/* =========================== SECCIONES =========================== */

.seccion { padding: 110px var(--margen); }

.seccion-cabeza { margin-bottom: 56px; }

/* cards de servicios */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.card {
  position: relative;
  padding: 34px 28px 44px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  isolation: isolate;
}
.card::before {
  /* barrido de tinta al hover */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tinta);
  transform: translateY(101%);
  transition: transform 0.45s var(--transicion);
  z-index: -1;
}
.card:hover::before { transform: translateY(0); }
.card h3 {
  font-family: var(--display);
  font-weight: 750;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  max-width: 18ch;
  transition: color 0.35s;
}
.card p {
  margin-top: 12px;
  font-size: 15.5px;
  color: var(--gris);
  transition: color 0.35s;
}
.card:hover h3 { color: var(--blanco); }
.card:hover p { color: #c9c9cf; }
.card::after {
  /* guion morado que crece al hover */
  content: "";
  position: absolute;
  left: 28px;
  bottom: 26px;
  width: 26px;
  height: 4px;
  background: var(--morado);
  transition: width 0.4s var(--transicion);
}
.card:hover::after { width: 54px; }

/* ============================ MANIFIESTO ========================== */

.banda {
  background: var(--tinta);
  color: var(--blanco);
  padding: 130px var(--margen);
}
.banda-texto {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4.8vw, 60px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 26ch;
}
.banda-texto em { font-style: normal; color: var(--morado); filter: brightness(1.6); }
.banda-signo {
  display: inline-block;
  width: 0.34em;
  height: 0.88em;
  margin-left: 0.08em;
  vertical-align: baseline;
}
.banda-signo svg { width: 100%; height: 100%; transform: translateY(0.06em); }

/* ============================= MÉTODO ============================ */

.pasos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.paso { border-top: 3px solid var(--tinta); padding-top: 22px; position: relative; }
.paso::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--morado);
  transition: width 0.8s var(--transicion) 0.2s;
}
.paso.visible::before { width: 100%; }
.paso-num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--morado);
  letter-spacing: 0.14em;
}
.paso h3 {
  font-family: var(--display);
  font-weight: 780;
  font-size: 30px;
  letter-spacing: -0.015em;
  margin: 8px 0 10px;
}
.paso p { color: var(--gris); font-size: 16px; }

/* ============================ CONTACTO =========================== */

.contacto {
  background: var(--lila);
  padding: 120px var(--margen) 130px;
}
.contacto-titulo {
  font-size: clamp(44px, 8vw, 108px);
}
.contacto-mail {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: clamp(17px, 2.6vw, 30px);
  font-weight: 600;
  color: var(--morado);
  border-bottom: 3px solid var(--morado);
  padding-bottom: 4px;
  transition: color 0.25s, border-color 0.25s, transform 0.3s var(--transicion);
}
.contacto-mail:hover {
  color: var(--morado-profundo);
  border-color: var(--morado-profundo);
  transform: translateX(6px);
}

.contacto-datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: 70px;
  max-width: 880px;
}
.dato-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 6px;
}
.contacto-datos p { font-size: 16px; }
.contacto-datos a:hover { color: var(--morado); }

/* ============================== PIE ============================== */

.pie {
  background: var(--tinta);
  color: #9a9aa0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px var(--margen);
  font-size: 13px;
}
.pie img { height: 20px; width: auto; }

/* ======================== revelado al scroll ===================== */

/* Solo se ocultan cuando JS está activo (html sin la clase sin-js);
   sin JS, todo el contenido es visible desde el inicio. */
html:not(.sin-js) .revela {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--transicion), transform 0.7s var(--transicion);
}
html:not(.sin-js) .revela.visible { opacity: 1; transform: none; }

/* =========================== keyframes =========================== */

@keyframes sube { to { transform: translateY(0); } }
@keyframes aparece { to { opacity: 1; } }
@keyframes estampa {
  0% { transform: translateY(0.06em) scale(0); }
  60% { transform: translateY(0.06em) scale(1.18) rotate(3deg); }
  80% { transform: translateY(0.06em) scale(0.94) rotate(-1.5deg); }
  100% { transform: translateY(0.06em) scale(1); }
}
@keyframes onda {
  0% { transform: translate(-50%, -50%) scale(0.25); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
@keyframes tiembla {
  0%, 100% { transform: translateY(0.06em) rotate(0); }
  25% { transform: translateY(0.06em) rotate(-5deg); }
  60% { transform: translateY(0.06em) rotate(4deg); }
}
@keyframes desfila { to { transform: translateX(-50%); } }

/* ========================== responsivo =========================== */

@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: 1fr; gap: 30px; }
  .contacto-datos { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 620px) {
  .nav { gap: 16px; padding: 14px 20px; }
  .nav-links { display: none; }
  .cards { grid-template-columns: 1fr; }
  .hero { padding-top: 100px; }
  .hero-datos span:nth-child(2) { display: none; }
  .pie { flex-direction: column; text-align: center; }
}

/* ====================== movimiento reducido ====================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .linea > span,
  .hero-eyebrow,
  .hero-abajo,
  .hero-datos { animation: none; transform: none; opacity: 1; }
  .signo svg { animation: none; transform: translateY(0.06em) scale(1); }
  .aro { display: none; }
  .marquee-pista { animation: none; }
  .revela { opacity: 1; transform: none; transition: none; }
  .paso::before { transition: none; }
}