/* ============================================================
   IMPACT.CSS — piezas que no están en style.css
   Tamaños del hero, franja de confianza, sección "¿Qué necesitás?",
   animación de scroll-reveal y ajustes mobile. Sin efectos de brillo.
   ============================================================ */

/* ---- HERO (tamaño/composición; los colores están en style.css) ----
   El tamaño de desktop quedaba bien (confirmado por el cliente) — se
   vuelve al original. El achique es solo para mobile, ver los
   overrides con !important mas abajo en los @media de este archivo. */
.hero-slide {
  min-height: 66vh !important;
  padding: 0 !important;
  align-items: center !important;
  position: relative;
}
.hero-slide.active { display: flex !important; }
.hero-slide .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  width: 100%;
}
.hero-content { max-width: 600px; flex: 1; }
.hero-content h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.1rem) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em !important;
}
.hero-content p { max-width: 480px; }
.hero-btns { display: flex; gap: .85rem; flex-wrap: wrap; align-items: center; }

.hero-img { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }

.hero-slide .container, .hero-slide .hero-content, .hero-slide .hero-img { position: relative; z-index: 1; }
.hero-slide-bg, .hero-slide-bg-overlay { position: absolute; inset: 0; z-index: 0; }
.hero-slide-bg img, .hero-slide-bg video { width:100%;height:100%;object-fit:cover; }

.hero-controls { z-index: 10; position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); }

/* ---- TRUST BAR (debajo del hero) ---- */
.trust-bar {
  background: var(--dark);
  padding: 1.6rem 0;
  position: relative;
  isolation: isolate;
}
/* Misma textura de grilla que el panel "instrumento" de Herramientas
   (academy.css .tool-instrument) y #empresas (style.css) — el trust
   bar es la primera superficie oscura que ve el visitante, conviene
   que ya hable el mismo idioma visual. */
.trust-bar::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/26px 26px;
}
.trust-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: #fff;
  transition: opacity .5s ease, transform .5s ease;
}
.trust-item.visible { opacity: 1 !important; transform: translateY(0) !important; }
.trust-item-icon {
  width: 42px; height: 42px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  color: #7fd0ff;
  flex-shrink: 0;
}
.trust-item-num { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff; }
.trust-item-label { font-size: .7rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .06em; margin-top: .1rem; }
.trust-divider { width: 1px; height: 38px; background: rgba(255,255,255,.12); }

/* ---- "¿QUÉ NECESITÁS?" ---- */
.orient-section { background: var(--bg-2); padding: 1.6rem 0; border-bottom: 1px solid var(--border); }
.orient-inline { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.orient-inline-label { flex-shrink: 0; }
.orient-inline-label h2 { font-size: 1rem; font-weight: 800; color: var(--text); margin: .2rem 0 0; letter-spacing: -.01em; white-space: nowrap; }
.orient-chips { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1; min-width: 0; }
.orient-chip { font: inherit; }
.orient-chip i { color: var(--primary); font-size: .78rem; }
.orient-chip.orient-chip-unsure { border-color: rgba(255,102,0,.35); color: var(--orange); }
.orient-chip.orient-chip-unsure i { color: var(--orange); }
.orient-chip.orient-chip-unsure:hover { background: rgba(255,102,0,.08); border-color: var(--orange); color: var(--orange); }
@media(max-width:900px) {
  .orient-inline { flex-direction: column; align-items: flex-start; gap: .7rem; }
  /* El fade en el borde derecho avisa que hay mas chips para el costado
     sin necesitar una flecha/indicador aparte — se nota que se puede
     seguir deslizando en vez de verse "cortado". */
  .orient-chips { flex: none; width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
  .orient-chips::-webkit-scrollbar { display: none; }
  .orient-chip { flex: 0 0 auto; }
}
@media(max-width:480px) { .orient-section { padding: 1.1rem 0; } .orient-chip { padding: .48rem .85rem; font-size: .78rem; } }

/* ---- SECTION REVEAL (solo activo cuando JS añade la clase visible) ---- */
.js-animate { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; }
.js-animate.visible { opacity: 1; transform: translateY(0); }
.section-reveal { opacity: 1 !important; transform: none !important; }

/* ---- SECTION HEADERS (composición; colores en style.css) ----
   El minimo de 1.9rem del clamp no bajaba nunca en mobile (3.6vw es
   insignificante ahi), asi que TODO titulo de seccion generica quedaba
   igual de grande en un telefono que en desktop — el mismo bug que ya se
   habia encontrado y corregido puntualmente en Marcas/Categorias, pero
   nunca en la fuente. Bajar el piso a 1.5rem soluciona todas las
   secciones que todavia usan .section-header de una sola vez (Servicios,
   Herramientas, Academy, Empresas, Contacto, FAQ, Blog). El techo de
   2.6rem en desktop no cambia. */
.section-header h2 { font-size: clamp(1.5rem, 5vw, 2.6rem) !important; letter-spacing: -.02em !important; }
.section-header h2::after {
  content: '';
  display: block;
  width: 48px; height: 3px;
  background: var(--primary);
  border-radius: 2px;
  margin: .9rem auto 0;
}

/* ---- BRAND STRIP: cinta animada infinita (le encantaba al cliente) ----
   El fade de los bordes queda activo en TODOS los tamaños de pantalla
   (antes se apagaba en mobile y el corte se veía feo — ese era el bug
   real, no el efecto en sí). */
.brands-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow: hidden;
  padding: 1rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.brands-strip-inner {
  display: flex;
  gap: 1.5rem;
  animation: scrollBrands 25s linear infinite;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Bug real (reportado: "el carrusel de marcas no funciona en algunos
   dispositivos"): :hover no tiene forma confiable de "soltarse" en
   pantalla táctil — en varios navegadores mobile (Safari iOS el más
   conocido) queda pegado en estado hover apenas el dedo toca cerca,
   sin mouseleave que lo limpie, y la animación se congelaba para
   siempre. Se limita la pausa-al-pasar-el-mouse a dispositivos que
   de verdad tienen mouse/puntero fino — en touch la cinta simplemente
   sigue animando siempre. */
@media (hover: hover) and (pointer: fine) {
  .brands-strip:hover .brands-strip-inner { animation-play-state: paused; }
}
@keyframes scrollBrands {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .brands-strip-inner { animation: none; }
}

/* ---- RESPONSIVE MOBILE ---- */
@media (max-width: 768px) {
  .hero-slide { min-height: 42vh !important; }
  /* object-fit:contain (probado antes) dejaba franjas vacias arriba/abajo
     y se veia peor que el recorte — la solucion real es subir una imagen
     pensada para mobile (vertical/cuadrada) en vez de forzar la misma
     foto horizontal en un espacio angosto. Ver banner-mobile-img mas
     abajo: si el admin cargo una version mobile, se usa esa imagen (ya
     compuesta para ese formato) con cover normal; si no, cae al cover de
     la imagen de escritorio como venia siendo. */
  .hero-slide .container {
    flex-direction: column !important;
    text-align: center !important;
    padding-top: 2.2rem !important;
    padding-bottom: 1.6rem !important;
    gap: 1rem !important;
  }
  .hero-content { max-width: 100% !important; }
  /* El clamp de arriba (2.1rem piso) no bajaba mas en mobile — se
     achica puntual solo para este ancho, el techo de desktop no se toca. */
  .hero-content h1 { font-size: 1.7rem !important; margin-bottom: .6rem !important; }
  .hero-content p { font-size: .92rem !important; margin-bottom: 1.3rem !important; }
  .hero-btns { justify-content: center !important; flex-wrap: wrap !important; gap: .65rem !important; }
  .hero-img { display: none !important; }
  .hero-badge { font-size: .7rem !important; }

  .trust-bar { padding: 1.2rem 0 !important; }
  /* Pedido explicito del cliente: una sola fila con todos los items uno
     al lado del otro, no una grilla que envuelve — scroll horizontal con
     fade en el borde, mismo patron que .features-grid y los chips de
     categorias. Los separadores (.trust-divider) se reactivan porque
     tienen sentido en una fila continua (ya no rompen un grid de 2 col). */
  .trust-bar-inner { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: .9rem !important; padding: 0 1rem !important; scrollbar-width: none; mask-image: linear-gradient(90deg,#000 92%,transparent); -webkit-mask-image: linear-gradient(90deg,#000 92%,transparent); }
  .trust-bar-inner::-webkit-scrollbar { display: none; }
  .trust-divider { flex-shrink: 0; height: 30px; }
  .trust-item { flex: 0 0 auto; white-space: nowrap; justify-content: center; opacity: 1 !important; transform: none !important; gap: .55rem !important; }
  /* Un poco mas chico todavia — pedido del cliente despues de ver la fila
     unica ya funcionando. */
  .trust-item-icon { width: 34px !important; height: 34px !important; font-size: .95rem !important; }
  .trust-item-num { font-size: 1rem !important; }
  .trust-item-label { font-size: .62rem !important; }

  .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .75rem !important; }
  /* Pedido del cliente: 2 tarjetas por fila en mobile donde el contenido
     lo permita, para que la web no sea tan larga de scrollear. */
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .8rem !important; }
}

@media (max-width: 480px) {
  .hero-slide { min-height: 40vh !important; }
  .hero-content h1 { font-size: 1.45rem !important; }
  .products-grid { grid-template-columns: 1fr 1fr !important; gap: .5rem !important; }
}