/* =========================================================
   SECCIÓN · Portada (#inicio)
   JS: js/hero-demo.js (cuadro de cobro de ejemplo + onda)
   ========================================================= */
.hero { position: relative; overflow: hidden; background: var(--night); color: var(--paper); }
.hero .wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px);
  align-items: center; padding-block: clamp(48px, 7vw, 88px) clamp(56px, 8vw, 96px);
}

/* Zorro del logo tan difuminado que queda como resplandor detrás del título */
.hero .bg-logo {
  position: absolute; z-index: 0; pointer-events: none; max-width: none;
  width: min(820px, 120vw); left: -10%; top: 50%; transform: translateY(-50%);
  filter: blur(40px) saturate(1.2); opacity: .45;
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .6; transform: translateY(-50%) scale(1.06); } }

/* --- Texto --- */
.hero-copy { min-width: 0; display: grid; gap: 26px; }
.acronym { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .3em; color: var(--steel); }
.acronym b { color: var(--orange); font-weight: 600; animation: blink 4s ease-in-out infinite; }
.acronym b:nth-child(2) { animation-delay: .2s; }
.acronym b:nth-child(3) { animation-delay: .4s; }
.acronym b:nth-child(4) { animation-delay: .6s; }
.acronym b:nth-child(5) { animation-delay: .8s; }
@keyframes blink { 0%, 70%, 100% { opacity: 1; } 80% { opacity: .35; } }

.hero h1 { font-size: var(--step-4); font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; }
.hero h1 .s { color: var(--steel); font-weight: 600; }   /* "y", "de" */
/* Cada palabra (.w) no se parte entre líneas */
.hero h1 .w { white-space: nowrap; }
/* Iniciales P-A-R-F-I: se encienden una por una al cargar (--d = retraso, en el HTML) */
.hero h1 .i { display: inline-block; color: var(--orange); animation: ini .9s var(--ease-out) var(--d, 0s) both; }
@keyframes ini {
  0% { color: var(--paper); transform: translateY(.18em); }
  60% { color: #ffb48f; text-shadow: 0 0 24px rgba(252, 102, 37, .9); }
}

.kicker { font-family: var(--f-display); font-weight: 600; font-stretch: 108%; font-size: var(--step-2); color: var(--paper); line-height: 1.2; }
.lede { font-size: 1.1rem; color: var(--on-dark); max-width: 34em; line-height: 1.55; }
.lede strong { color: var(--paper); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Pulsera flotando con señal NFC y onda --- */
.hero-visual { position: relative; min-width: 0; width: 100%; max-width: 460px; justify-self: center; }
.band-float { position: relative; animation: float 6s ease-in-out infinite; }
.band-float img { width: 100%; height: auto; }
@keyframes float { 50% { transform: translateY(-14px) rotate(-2deg); } }

/* Centro del chip de la pulsera: 24% / 37% de la foto. Si cambias la foto, ajusta estos dos valores en .waves y .ripple */
.waves {
  position: absolute; left: 24%; top: 37%; width: 46px; transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 4px rgba(120, 40, 0, .45));
}
.waves path { stroke: var(--paper); fill: none; stroke-width: 5; stroke-linecap: round; opacity: .25; animation: wave 1.8s infinite; }
.waves path:nth-child(2) { animation-delay: .2s; }
.waves path:nth-child(3) { animation-delay: .4s; }
@keyframes wave { 0%, 100% { opacity: .2; } 30% { opacity: 1; } }

.ripple {
  position: absolute; left: 24%; top: 37%; width: 140px; height: 140px; margin: -70px 0 0 -70px;
  border-radius: 50%; border: 2px solid var(--orange); opacity: 0; pointer-events: none;
}
.ripple.go { animation: ripple 1.1s ease-out; }
@keyframes ripple { from { transform: scale(.3); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }

/* --- Cuadro de cobro de ejemplo (debajo de la pulsera) --- */
.toast {
  position: absolute; left: -6%; top: calc(100% - 56px);
  display: grid; gap: 4px; min-width: 220px; padding: 14px 18px;
  background: rgba(22, 22, 22, .94); border: 1px solid var(--line-dark); border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
  font-family: var(--f-mono); font-size: .76rem; color: var(--steel);
}
.toast .ok { display: flex; justify-content: space-between; gap: 12px; color: var(--ok); }
.toast .amt {
  font-family: var(--f-display); font-size: 1.9rem; font-weight: 800; font-stretch: 110%;
  color: var(--paper); line-height: 1; font-variant-numeric: tabular-nums;
}
.toast.pulse { animation: pop .45s ease; }
@keyframes pop {
  from { transform: translateY(4px); box-shadow: 0 0 0 2px rgba(252, 102, 37, .6), 0 24px 60px -20px rgba(0, 0, 0, .8); }
}

@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-visual { max-width: 340px; margin-bottom: 56px; }
}
@media (max-width: 720px) {
  .toast { left: 0; min-width: 0; }
}