/* hero.css - Hero oscuro premium (estética Apple/Ducati/KTM):
   glow naranja, capa de luz radial, tipografía Poppins y una "vitrina"
   de productos a la derecha. Incluye el buscador del hero (glass) y la
   sección de Beneficios. Usa solo tokens --mm-*.
   Nota: .mm-hero-chips / .mm-hero-chip viven en pages.css y aquí NO se tocan. */

/* ============================= Hero ============================= */
.mm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1150px 540px at 88% -12%, rgba(56, 189, 248, 0.14), transparent 62%),
    radial-gradient(980px 540px at 6% 118%, rgba(255, 152, 0, 0.12), transparent 60%),
    var(--mm-oscuro);
}

/* Capa de luz radial extra (se pinta tras el fondo del hero). */
.mm-hero-fondo {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(520px 430px at 78% 40%, rgba(255, 152, 0, 0.16), transparent 60%),
    radial-gradient(460px 380px at 10% 16%, rgba(56, 189, 248, 0.1), transparent 62%);
  filter: blur(6px);
  pointer-events: none;
}

.mm-hero-inner {
  position: relative;
  display: grid;
  gap: clamp(40px, 6vw, 56px);
  align-items: center;
  padding-block: clamp(56px, 8vw, 88px) clamp(56px, 7vw, 80px);
}

@media (min-width: 900px) {
  .mm-hero-inner {
    grid-template-columns: 1.08fr 0.92fr;
    column-gap: clamp(40px, 5vw, 64px);
    min-height: calc(90vh - 0px);
    padding-block: 84px;
  }
}

/* Texto del hero ------------------------------------------------ */
.mm-hero-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Entrada suave escalonada (fade + translateY) */
.mm-hero-texto > *,
.mm-hero-visual {
  animation: mm-hero-entrada var(--mm-t-suave) var(--mm-ease) backwards;
}

.mm-hero-texto > :nth-child(1) { animation-delay: 0.06s; }
.mm-hero-texto > :nth-child(2) { animation-delay: 0.12s; }
.mm-hero-texto > :nth-child(3) { animation-delay: 0.18s; }
.mm-hero-texto > :nth-child(4) { animation-delay: 0.24s; }
.mm-hero-texto > :nth-child(5) { animation-delay: 0.3s; }
.mm-hero-texto > :nth-child(6) { animation-delay: 0.36s; }
.mm-hero-visual { animation-delay: 0.2s; }

@keyframes mm-hero-entrada {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Píldora glass con punto de luz naranja */
.mm-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--mm-borde-fuerte);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--mm-texto-cabecera);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: clamp(20px, 3vw, 28px);
}

.mm-hero-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mm-primario-claro);
  box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.16), 0 0 12px rgba(255, 152, 0, 0.8);
}

.mm-hero-badge svg {
  color: var(--mm-primario-claro);
}

/* Título enorme Poppins, letter-spacing negativo */
.mm-hero h1 {
  font-family: var(--mm-fuente-titulo);
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
  margin-bottom: 16px;
}

.mm-hero h1 .mm-resaltar {
  background: linear-gradient(100deg, var(--mm-primario) 0%, var(--mm-primario-claro) 55%, var(--mm-primario) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mm-hero p.mm-hero-descripcion {
  font-family: var(--mm-fuente);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.65;
  color: var(--mm-texto-claro);
  max-width: 560px;
  text-wrap: pretty;
  margin-bottom: clamp(24px, 4vw, 34px);
}

.mm-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(28px, 4vw, 40px);
}

/* CTA de WhatsApp con tinte verde sutil sobre el contorno */
.mm-boton-hero-wa {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--mm-borde-fuerte);
}

.mm-boton-hero-wa:hover {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.55);
  color: #fff;
  box-shadow: 0 14px 34px -12px rgba(37, 211, 102, 0.5);
}

.mm-hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(22px, 3.5vw, 44px);
}

.mm-hero-stat .mm-hero-stat-numero {
  font-family: var(--mm-fuente-titulo);
  font-size: clamp(1.45rem, 3vw, 1.7rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(120deg, var(--mm-primario), var(--mm-primario-claro));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mm-hero-stat .mm-hero-stat-etiqueta {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--mm-texto-tenue);
  margin-top: 6px;
}

/* -------- Columna visual: vitrina premium del hero -------- */
.mm-hero-visual {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

/* Halo de luz radial detrás de la vitrina */
.mm-hero-halo {
  position: absolute;
  z-index: -1;
  inset: -12% -6%;
  background:
    radial-gradient(58% 54% at 50% 42%, rgba(255, 152, 0, 0.3), transparent 62%),
    radial-gradient(46% 42% at 30% 72%, rgba(56, 189, 248, 0.18), transparent 62%);
  filter: blur(14px);
  pointer-events: none;
}

/* Vitrina: marco generoso donde el JS inyecta las 4 imágenes */
.mm-hero-collage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--mm-borde);
  border-radius: var(--mm-radio-l);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}

/* Tarjetas-imagen como "marcos" grandes con glow naranja */
.mm-hero-collage img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 14px;
  background: var(--mm-superficie-oscura);
  border: 1px solid var(--mm-borde-fuerte);
  border-radius: var(--mm-radio-m);
  box-shadow: var(--mm-sombra-s);
  transition:
    transform var(--mm-t-suave) var(--mm-ease),
    box-shadow var(--mm-t-suave) var(--mm-ease),
    border-color var(--mm-t-suave) var(--mm-ease);
}

.mm-hero-collage img:hover {
  transform: translateY(-8px) scale(1.04);
  border-color: var(--mm-primario);
  box-shadow: var(--mm-glow-primario), 0 30px 60px -24px rgba(0, 0, 0, 0.7);
  z-index: 2;
}

.mm-hero-collage img:active {
  transform: translateY(-3px) scale(0.99);
}

/* Focal: la primera tarjeta ocupa 2 filas con radio mayor */
.mm-hero-collage img:first-child {
  grid-row: span 2;
  border-radius: var(--mm-radio-l);
  padding: 16px;
  background: linear-gradient(180deg, #141b26, #10161f);
  border-color: rgba(255, 152, 0, 0.18);
}

/* Esqueletos mientras cargan los datos */
.mm-hero-collage .mm-esqueleto {
  border-radius: var(--mm-radio-m);
  background: var(--mm-esqueleto);
  border: 1px solid var(--mm-borde);
}

.mm-hero-collage .mm-esqueleto:first-child {
  border-radius: var(--mm-radio-l);
}

/* Partículas decorativas (solo CSS, sin assets) */
.mm-hero-particula {
  position: absolute;
  z-index: 2;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd04d, rgba(255, 152, 0, 0.4) 55%, transparent 72%);
  box-shadow: 0 0 12px rgba(255, 152, 0, 0.55), 0 0 26px rgba(255, 152, 0, 0.2);
  pointer-events: none;
  animation: mm-hero-flotar 3.2s var(--mm-ease) infinite alternate;
}

.mm-hero-particula-1 { top: 5%; right: 6%; width: 10px; height: 10px; }
.mm-hero-particula-2 { top: 30%; left: -4px; width: 6px; height: 6px; box-shadow: 0 0 10px rgba(56, 189, 248, 0.55); background: radial-gradient(circle at 30% 30%, #b8e6ff, rgba(56, 189, 248, 0.4) 55%, transparent 72%); }
.mm-hero-particula-3 { bottom: 10%; right: -4px; width: 7px; height: 7px; }

@keyframes mm-hero-flotar {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}

/* Móvil: la vitrina respira con menos borde */
@media (max-width: 640px) {
  .mm-hero-inner {
    gap: 34px;
  }

  .mm-hero-collage {
    gap: 12px;
    padding: 10px;
  }

  .mm-hero-collage img {
    border-radius: var(--mm-radio-s);
    padding: 10px;
  }

  .mm-hero-collage img:first-child {
    border-radius: var(--mm-radio-m);
    padding: 12px;
  }
}

/* ========================== Buscador (glass) ========================== */
.mm-buscador-grande {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(820px 380px at 12% 0%, rgba(255, 152, 0, 0.05), transparent 60%),
    radial-gradient(720px 360px at 92% 100%, rgba(56, 189, 248, 0.05), transparent 55%),
    var(--mm-fondo-2);
}

.mm-buscador-grande-forma {
  position: relative;
  max-width: 760px;
  margin: 36px auto 0;
}

.mm-buscador-grande-icono {
  position: absolute;
  z-index: 2;
  left: clamp(22px, 3vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--mm-texto-tenue);
  pointer-events: none;
}

.mm-buscador-grande-forma input {
  width: 100%;
  min-height: 70px;
  padding: 18px clamp(20px, 3vw, 28px) 18px 62px;
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: var(--mm-texto);
  caret-color: var(--mm-primario);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--mm-borde-fuerte);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--mm-sombra-s);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    border-color var(--mm-t-rapida) var(--mm-ease),
    box-shadow var(--mm-t-medio) var(--mm-ease),
    background var(--mm-t-rapida) var(--mm-ease);
}

.mm-buscador-grande-forma input::placeholder {
  color: var(--mm-texto-tenue);
  font-weight: 400;
}

.mm-buscador-grande-forma input:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
}

.mm-buscador-grande-forma input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--mm-primario);
  box-shadow: 0 0 0 4px var(--mm-anillo), var(--mm-glow-primario);
}

/* ========================== Beneficios ========================== */
.mm-beneficios {
  position: relative;
  padding-block: clamp(64px, 8vw, 96px);
  background:
    radial-gradient(900px 420px at 90% -10%, rgba(56, 189, 248, 0.06), transparent 60%),
    radial-gradient(760px 400px at 0% 110%, rgba(255, 152, 0, 0.06), transparent 55%),
    var(--mm-fondo);
  border-top: 1px solid var(--mm-borde);
  border-bottom: 1px solid var(--mm-borde);
}

.mm-beneficios-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: clamp(28px, 4vw, 40px);
}

.mm-beneficio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--mm-superficie);
  border: 1px solid var(--mm-borde);
  border-radius: var(--mm-radio-l);
  box-shadow: var(--mm-sombra-s);
  transition:
    transform var(--mm-t-medio) var(--mm-ease),
    box-shadow var(--mm-t-medio) var(--mm-ease),
    border-color var(--mm-t-medio) var(--mm-ease);
}

.mm-beneficio:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 152, 0, 0.4);
  box-shadow: var(--mm-sombra-m), var(--mm-glow-suave);
}

.mm-beneficio-icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 152, 0, 0.12);
  color: var(--mm-primario-claro);
  box-shadow: inset 0 0 0 1px rgba(255, 152, 0, 0.18);
  margin-bottom: 6px;
  transition: background var(--mm-t-medio) var(--mm-ease), box-shadow var(--mm-t-medio) var(--mm-ease);
}

.mm-beneficio:hover .mm-beneficio-icono {
  background: rgba(255, 152, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 152, 0, 0.35), var(--mm-glow-suave);
}

.mm-beneficio-icono svg {
  width: 22px;
  height: 22px;
}

.mm-beneficio h3 {
  font-family: var(--mm-fuente-titulo);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mm-texto);
}

.mm-beneficio p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--mm-texto-suave);
}

@media (min-width: 640px) {
  .mm-beneficios-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .mm-beneficios-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Respeto a prefers-reduced-motion (la base ya acelera; aquí evitamos
   el relleno "backwards" que podría ocultar contenido y el flotado). */
@media (prefers-reduced-motion: reduce) {
  .mm-hero-texto > *,
  .mm-hero-visual,
  .mm-hero-particula {
    animation: none;
  }

  .mm-hero-collage img,
  .mm-buscador-grande-forma input,
  .mm-beneficio,
  .mm-beneficio-icono {
    transition: none;
  }
}