/* clarity-base.css — base compartida del diseño "claridad" (lo que en el
   prototipo vivía en el <style> de cada página). Grano, contenedor, hover de
   tarjetas/botones, marquee de clientes, y colapsos responsivos comunes. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: var(--ev-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { -webkit-tap-highlight-color: transparent; }
::selection { background: #6B4DF6; color: #fff; }

/* contenedor centrado (1180/32) */
.hp-wrap { max-width: 1180px; margin: 0 auto; width: 100%; }

/* grano sutil sobre todo el body */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* hover de tarjetas y botones */
.hp-card { transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s; }
.hp-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -16px rgba(23,19,42,.22) !important; }
.hp-btn { transition: transform .15s ease, filter .15s ease; }
.hp-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* Decorative full-bleed overlays (the aria-hidden gradient blobs and dot-grids,
   position:absolute; inset:0) must never intercept clicks on the content above
   them — e.g. .ev-s33 (dot grid behind the ANIE phone) was eating the chat-chip
   clicks. They carry no semantics, so disable pointer events globally. */
div[aria-hidden="true"] { pointer-events: none; }

/* marquee de clientes */
.hp-marquee { position: relative; display: flex; overflow: hidden; }
/* edge fade via overlays instead of mask-image (mask-image + animated child can
   render blank in Chrome under GPU compositing). Section bg is white. */
.hp-marquee::before, .hp-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.hp-marquee::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.hp-marquee::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.hp-marquee-track { display: flex; flex: 0 0 auto; align-items: center; gap: 56px; padding-right: 56px;
  animation: hpMarquee 28s linear infinite; }
@keyframes hpMarquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* NOTE: intentionally NOT disabled under prefers-reduced-motion — the brand
   marquee is a core visual and must scroll even when the OS has "reduce motion"
   on (which is why it looked static on machines with that setting enabled). */

/* colapsos responsivos comunes */
@media (max-width: 1000px) {
  .hp-hero-grid { grid-template-columns: 1fr !important; }
  .hp-split { grid-template-columns: 1fr !important; gap: 36px !important; }
  .hp-3col { grid-template-columns: repeat(2,1fr) !important; }
  .hp-footer { grid-template-columns: 1fr 1fr !important; gap: 30px !important; }
  /* flujo "cómo funciona": apila y el conector no rota en bloque (etiqueta
     horizontal + flecha hacia abajo) */
  .hp-how { flex-direction: column !important; }
  .hp-how-arrow { transform: none !important; padding: 12px 0 !important; gap: 8px !important; }
  .hp-how-arrow svg { transform: rotate(90deg); }
  .hp-case-grid { grid-template-columns: 1fr !important; }
}
/* Collapse the desktop nav to the hamburger while the full nav + actions still
   fit (~1010px min). Below this the action buttons used to overflow off-screen. */
@media (max-width: 1120px) {
  .hp-nav-links { display: none !important; }
  .hp-hide-sm { display: none !important; }
}
@media (max-width: 720px) {
  .hp-3col, .hp-2col { grid-template-columns: 1fr !important; }
  .hp-footer { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 460px) {
  .v2-chips { grid-template-columns: 1fr !important; }
}