/*
  HERO DE HOME — Little Mochi Studio (littlemochistudio-web)
  ------------------------------------------------------------
  Portado desde hero.css de mochis.app (repo mochistudio-web,
  bloque .hero--home, Paso 6 del rediseño, cerrado 19/09/2026).
  Solo se porta el hero de HOME — no .hero--interior (para
  /services/, /cuentanos/, /sobre-nosotros/, cuando se construyan).

  Hero SIEMPRE oscuro fijo (morado), sin sistema día/noche — no
  depende de --color-fondo-hero ni de html[data-theme], que aquí
  no existen. Ancho 1180px. Sin .hero__borde (corta en recto).

  CAMBIOS respecto al original de mochis.app:
  · Trama Ben-Day más sutil (21/09/2026, decisión de Erika): solo
    cambia el TAMAÑO de punto en tokens.css (--trama-punto-*,
    ~30% menor) — opacidad y máscaras intactas, mismo criterio.
  · Copy propio de marca paraguas (Little Mochi Studio, no
    Services): título/subtítulo genéricos, tarjeta única
    "En desarrollo" (¡Applícate! y Nummis) en vez de la tarjeta de
    servicio con precio — las apps aún no están lanzadas, así que
    no llevan CTA propio.
  · CTA terciario "Sobre nosotros" OMITIDO — esa página aún no
    existe en este repo. Añadir cuando se construya.

  APILAMIENTO (de abajo a arriba):
    0 — .hero__mancha (mancha-hero.css) y .hero::before/
        .hero__trama-media/.hero__trama-fina (trama de puntos)
    1 — .hero__contenido
*/

.hero {
  position: relative;
  overflow: hidden;
}

/*
  TRAMA BEN-DAY — 3 capas, misma rejilla (--trama-paso, tokens.css),
  solo cambia el TAMAÑO del punto por capa. Máscaras concéntricas
  centradas en 68% 35% (zona donde vive la mancha animada).
*/
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    rgba(var(--trama-rgb), var(--trama-opacidad-grande)) var(--trama-punto-grande),
    transparent calc(var(--trama-punto-grande) + 0.2px)
  );
  background-size: var(--trama-paso) var(--trama-paso);
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(
    ellipse 32% 38% at 68% 35%,
    #000 0%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 32% 38% at 68% 35%,
    #000 0%,
    transparent 100%
  );
}

.hero__trama-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    rgba(var(--trama-rgb), var(--trama-opacidad-medio)) var(--trama-punto-medio),
    transparent calc(var(--trama-punto-medio) + 0.2px)
  );
  background-size: var(--trama-paso) var(--trama-paso);
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(
    ellipse 50% 60% at 68% 35%,
    transparent 0%,
    #000 45%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 50% 60% at 68% 35%,
    transparent 0%,
    #000 45%,
    transparent 100%
  );
}

.hero__trama-fina {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    rgba(var(--trama-rgb), var(--trama-opacidad-pequeno)) var(--trama-punto-pequeno),
    transparent calc(var(--trama-punto-pequeno) + 0.2px)
  );
  background-size: var(--trama-paso) var(--trama-paso);
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(
    ellipse 65% 85% at 68% 35%,
    transparent 0%,
    #000 55%,
    #000 75%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 65% 85% at 68% 35%,
    transparent 0%,
    #000 55%,
    #000 75%,
    transparent 100%
  );
}

.hero__contenido {
  position: relative;
  z-index: 1;
  padding: 32px 64px 0;
}

.hero__titular {
  margin: 0;
  font-family: var(--font-marca);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.038em;
  text-wrap: balance;
  max-width: 15ch;
}

.hero__subtitulo {
  margin: 18px 0 0;
  font-family: var(--font-marca);
  font-weight: 300;
  font-size: var(--texto-sub);
  line-height: 1.45;
  letter-spacing: -0.008em;
  max-width: 34ch;
}

/* ============ HERO DE HOME — fondo oscuro fijo, ancho 1180px ============ */

.hero--home {
  background-color: #1a0e2e;
  background-image: radial-gradient(
    ellipse 90% 70% at 68% 28%,
    #3a1f5c 0%,
    #241238 42%,
    #1a0e2e 78%
  );
  padding-top: 120px;
  padding-bottom: 100px;
}

.hero--home .hero__contenido {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 0;
}

.hero--home .hero__titular,
.hero--home .hero__subtitulo {
  color: var(--color-blanco);
}

.hero--home .hero__subtitulo {
  opacity: 0.82;
}

/* Énfasis en menta dentro del titular */
.hero--home .hero__titular em {
  font-style: normal;
  font-weight: 700;
  color: var(--color-menta);
}

/* Eyebrow */
.hero--home .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-marca);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 7px 14px 7px 10px;
  border-radius: 100px;
  margin-bottom: 28px;
}

.hero--home .hero__eyebrow-punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-naranja);
  flex-shrink: 0;
}

/* CTAs — primario naranja sólido, secundario contorno translúcido */
.hero--home .hero__ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.hero--home .hero__cta-primario,
.hero--home .hero__cta-secundario {
  font-family: var(--font-marca);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 100px;
  display: inline-block;
  transition: transform 0.15s ease;
}

.hero--home .hero__cta-primario {
  background-color: var(--color-naranja);
  color: var(--color-blanco);
}

.hero--home .hero__cta-secundario {
  background-color: transparent;
  color: var(--color-blanco);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 500;
  padding: 13px 26px;
}

.hero--home .hero__cta-primario:hover,
.hero--home .hero__cta-secundario:hover {
  transform: translateY(-1px);
}

/* Tarjeta flotante — vidrio translúcido, única línea (apps en
   desarrollo, sin CTA propio: aún no hay página que enlazar). */
.hero--home .hero__tarjeta {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 20px;
  padding: 26px 28px;
  max-width: 340px;
  margin-top: 56px;
}

.hero--home .hero__tarjeta-etiqueta {
  display: block;
  font-family: var(--font-marca);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-menta);
  font-weight: 600;
  margin-bottom: 10px;
}

.hero--home .hero__tarjeta-texto {
  margin: 0;
  font-family: var(--font-marca);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
  .hero--home {
    padding-top: 90px;
  }

  .hero--home .hero__contenido {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero--home .hero__subtitulo {
    font-size: 1.0625rem; /* 17px — mismo criterio que --texto-cuerpo de mochis.app */
    margin-top: 16px;
  }

  .hero--home .hero__ctas {
    margin-top: 32px;
  }

  .hero--home .hero__tarjeta {
    max-width: none;
    margin-top: 40px;
  }
}