/**
 * Portada NEB. Diseno de Toni (neb-home-bloque.html), adaptado a plantilla.
 * Ya viene scopeado bajo #neb-home por el autor.
 */

#neb-home,
#neb-home *,
#neb-home *::before,
#neb-home *::after { box-sizing: border-box; }

#neb-home {
  --neb-black: #0D0D0D;
  --neb-panel: #141414;
  --neb-off: #F2F0EB;
  --neb-acid: #C8FF00;
  --neb-orange: #FF4D1A;
  --neb-border: #2A2A2A;
  --neb-muted: #7A7A74;

  width: 100%;
  background: var(--neb-black);
  color: var(--neb-off);
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 4rem 1.5rem 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#neb-home .neb-inner { width: 100%; max-width: 820px; }

/* frase */
#neb-home h1 {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 900;
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0 0 0.8rem;
  color: var(--neb-off);
}
#neb-home h1 .neb-l2 { color: var(--neb-acid); display: block; }

#neb-home .neb-sub {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: #A3A39C;
  margin: 0 0 2.6rem;
}

/* flash de articulos */
#neb-home .neb-flash {
  border-top: 1px solid var(--neb-border);
  border-bottom: 1px solid var(--neb-border);
  padding: 1.3rem 1rem;
  margin-bottom: 2.6rem;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}
#neb-home .neb-flash[hidden] { display: none; } /* sin articulos: no se muestra el bloque */
#neb-home .neb-eyebrow {
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--neb-orange);
  text-transform: uppercase;
}
#neb-home .neb-flash a {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.9vw, 1.7rem);
  line-height: 1.1;
  color: var(--neb-off);
  text-decoration: none;
  display: block;
}
#neb-home .neb-flash a:hover { color: var(--neb-acid); }
#neb-home .neb-flash p {
  font-size: 0.86rem;
  color: var(--neb-muted);
  max-width: 58ch;
  margin: 0 auto;
}
#neb-home .neb-fade { animation: nebFade 0.55s ease; }
@keyframes nebFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* coche electrico cargando */
#neb-home .neb-car {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
}
#neb-home .neb-car svg { display: block; width: 100%; height: auto; }

#neb-home .neb-charge {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0.04);
  fill: var(--neb-orange);
  opacity: 0.22;
  animation: nebCharge 10s linear infinite;
}
@keyframes nebCharge {
  0%    { transform: scaleX(0.04); fill: var(--neb-orange); }
  19.9% { transform: scaleX(0.20); fill: var(--neb-orange); }
  20%   { transform: scaleX(0.20); fill: var(--neb-acid); }
  62%   { transform: scaleX(1);    fill: var(--neb-acid); }
  88%   { transform: scaleX(1);    fill: var(--neb-acid); }
  100%  { transform: scaleX(0.04); fill: var(--neb-orange); }
}

/* boton, centrado dentro del coche */
#neb-home .neb-cta {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 900;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  letter-spacing: 0.04em;
  padding: 0.6rem 2.1rem;
  border: 2px solid #3A3A36;
  border-radius: 3px;
  color: #6A6A64;
  text-decoration: none;
  white-space: nowrap;
  animation: nebGo 10s linear infinite;
}
@keyframes nebGo {
  0%, 61%  { color: #6A6A64;        border-color: #3A3A36;    background: transparent; }
  62%, 88% { color: var(--neb-black); border-color: var(--neb-acid); background: var(--neb-acid); }
  89%,100% { color: #6A6A64;        border-color: #3A3A36;    background: transparent; }
}
#neb-home .neb-cta:hover,
#neb-home .neb-cta:focus-visible {
  color: var(--neb-black) !important;
  background: var(--neb-acid) !important;
  border-color: var(--neb-acid) !important;
  animation: none;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  #neb-home * { animation: none !important; }
  #neb-home .neb-charge { transform: scaleX(1); fill: var(--neb-acid); }
  #neb-home .neb-cta {
    color: var(--neb-black);
    background: var(--neb-acid);
    border-color: var(--neb-acid);
  }
}