/* ============================================================
   pages/home.css — estilos propios de la portada
   Solo lo específico de la home. Lo reutilizable (tarjeta de
   producto, insignias) se extrae a components/ en la Fase 2.
   ============================================================ */

/* ---- Hero ---- */
.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem); }
.hero__title {
  font-size: var(--step-5);
  max-width: 16ch;
  letter-spacing: -.01em;
  margin-bottom: var(--space-lg);
}
.hero__lead {
  font-size: var(--step-1);
  color: var(--color-text-muted);
  max-width: 54ch;
  margin-bottom: var(--space-xl);
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* Texto a la izquierda, destacado a la derecha: la mitad derecha del hero
   estaba vacía. */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .hero__inner { grid-template-columns: minmax(0, 1fr); } }

.hero-feature {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.hero-feature:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); text-decoration: none; }
.hero-feature img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hero-feature__body { display: grid; gap: .45rem; padding: var(--space-lg); }
.hero-feature__label {
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-brand-green-text);
}
.hero-feature__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.15;
  color: var(--color-ink);
}
.hero-feature__text { color: var(--color-text-muted); font-size: var(--step--1); }
/* Espacio de no separación: la flecha nunca queda sola en una línea. */
.hero-feature__text::after {
  content: "\00a0→";
  content: "\00a0→" / "";
  color: var(--color-brand-green-text);
  font-weight: 700;
}

/* ---- Certificaciones (carrusel de logos) ---- */
.certs {
  background: var(--color-surface-tint);
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-xl);
}
.certs__label {
  text-align: center;
  margin-bottom: var(--space-lg);
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  color: var(--color-text-muted);
}

/* Marquesina infinita en CSS puro (sin JS): la pista lleva la lista
   repetida; al desplazar -50% el bucle es continuo. Se pausa al pasar
   el cursor y se detiene con prefers-reduced-motion. */
.cert-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cert-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
  width: max-content;
  list-style: none;
  margin: 0;
  padding-block: var(--space-sm);
  animation: cert-scroll 45s linear infinite;
}
.cert-marquee:hover .cert-marquee__track { animation-play-state: paused; }
.cert-marquee__item { flex: none; }
.cert-marquee__item img {
  height: 56px;
  width: auto;
  display: block;
}
@keyframes cert-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .cert-marquee { -webkit-mask-image: none; mask-image: none; }
  .cert-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: clamp(1.5rem, 5vw, 3rem); }
  .cert-marquee__item[aria-hidden] { display: none; } /* en estático, solo una copia */
}

/* `.section` y `.section__head` se mudaron a base.css: las usan también
   /nosotros, /servicios, /contacto y las páginas legales, que no cargan
   esta hoja y se quedaban sin el espaciado. */

/* La tarjeta de producto y la rejilla viven en
   components/product-card.css (se cargan con <x-product-card>). */

/* ---- Videos ---- */
.videos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
@media (max-width: 900px) { .videos__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .videos__grid { grid-template-columns: 1fr; } }

/* ---- Banda de asesoría ---- */
.advice {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.8rem, 4vw, 3rem);
}
@media (max-width: 760px) { .advice { grid-template-columns: 1fr; } }
.advice h2 { margin-top: 0; }
.advice p { color: var(--color-text-muted); margin: 0; }