/* ==========================================================================
   VANTAR Dynamics — Hero + blueprint grid + animated logo (V-Telemetry)
   ========================================================================== */

.hero {
  position: relative;
  padding: calc(var(--s-8) + 8px + env(safe-area-inset-top, 0px)) var(--s-5) var(--s-7);
  overflow: hidden;
  isolation: isolate;
}

/* La retícula y el brillo mostaza ahora son de toda la página (ver base.css) */

/* --- Animated logo lockup --------------------------------------------- */
.brandmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s-3);
}
.brandmark .iso { width: clamp(150px, 42vw, 230px); aspect-ratio: 100 / 88; }
.brandmark .iso svg { width: 100%; height: 100%; }
/* Nombre en curvas: VANTAR y DYNAMICS con el mismo ancho exacto */
.brandmark .word { display: block; width: clamp(130px, 34vw, 190px); height: auto; }

/* Logo animado v1.1: se dibuja la barra, el pivote y la línea de datos; aparecen los nodos; pulso en bucle */

.vd-bar{opacity:0;stroke-dasharray:1;stroke-dashoffset:1;animation:vd-draw .9s cubic-bezier(.65,0,.35,1) .1s forwards}
.vd-ring{opacity:0;stroke-dasharray:1;stroke-dashoffset:1;animation:vd-draw .9s cubic-bezier(.65,0,.35,1) .6s forwards}
.vd-data{opacity:0;stroke-dasharray:1;stroke-dashoffset:1;animation:vd-draw-up .8s cubic-bezier(.65,0,.35,1) 1.1s forwards}
.vd-node{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.vd-n1{animation:vd-pop .45s cubic-bezier(.34,1.56,.64,1) 1.35s forwards,vd-pulse 1.2s ease-in-out 3.2s infinite}
.vd-n2{animation:vd-pop .45s cubic-bezier(.34,1.56,.64,1) 1.55s forwards,vd-pulse 1.2s ease-in-out 3.4s infinite}
.vd-n3{animation:vd-pop .45s cubic-bezier(.34,1.56,.64,1) 1.75s forwards,vd-pulse 1.2s ease-in-out 3.6s infinite}
.vd-w1{opacity:0;animation:vd-in .7s cubic-bezier(.22,1,.36,1) 2.1s forwards}
.vd-w2{opacity:0;animation:vd-in .7s cubic-bezier(.22,1,.36,1) 2.35s forwards}
@keyframes vd-draw{0%{opacity:1;stroke-dashoffset:1}100%{opacity:1;stroke-dashoffset:0}}
@keyframes vd-draw-up{0%{opacity:1;stroke-dashoffset:1}100%{opacity:1;stroke-dashoffset:0}}
@keyframes vd-pop{to{transform:scale(1)}}
@keyframes vd-pulse{0%,100%{transform:scale(1)}40%{transform:scale(1.22)}}
@keyframes vd-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mesh::before{animation:none}.vd-bar,.vd-ring,.vd-data{stroke-dashoffset:0;animation:none}
.vd-node{transform:none;animation:none}.vd-bar,.vd-ring,.vd-data{opacity:1}}


/* --- Hero copy (centrado) --------------------------------------------- */
.hero { text-align: center; }
.hero .slogan {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;               /* siempre en una sola línea */
  font-size: clamp(1.3rem, 5.6vw, 3.4rem);
}
.hecho-ar {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--s-4);
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
}
.hecho-ar .flag { width: 27px; height: 18px; }
.hero .lead { max-width: 44ch; margin: var(--s-5) auto 0; }

.hero-cta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-6);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
}

.badge {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-brd);
  color: var(--ink-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.badge b { color: var(--ink); font-weight: 600; }

/* Invitación a contactar: sobria, un solo acento */
.cta-texto {
  margin-top: var(--s-6);
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 12px 20px;
  border: 1px solid rgba(212, 154, 23, 0.45);
  border-radius: var(--r-pill);
  color: var(--ink); font-size: 0.95rem; font-weight: 500;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cta-texto span { color: var(--yellow); font-weight: 700; }
.cta-texto:hover { background: rgba(212, 154, 23, 0.1); border-color: var(--yellow); }
/* Pregunta que va rotando dentro del botón (src/ui/preguntas.js) */
.cta-texto { flex-wrap: wrap; justify-content: center; max-width: min(92vw, 40rem); text-align: center; line-height: 1.4; }
.cta-q { font-style: normal; transition: opacity 0.35s var(--ease); }
.cta-q.oculta { opacity: 0; }
.hero .lead { max-width: 60ch; }

/* Portada compacta (pedido 30-sep: «es muy larga hacia abajo») */
.hero { padding-top: calc(var(--s-6) + env(safe-area-inset-top, 0px)); padding-bottom: var(--s-4); }
.brandmark { gap: 6px; margin-bottom: var(--s-2); }
.brandmark .iso { width: clamp(118px, 32vw, 200px); }
.brandmark .word { width: clamp(118px, 30vw, 170px); }
.hecho-ar { margin-top: var(--s-3); }
.hero .lead { margin-top: var(--s-4); font-size: 0.93rem; line-height: 1.5; }
.cta-texto { margin-top: var(--s-5); }
#view-home .foot { padding-top: var(--s-3); }