/* ═════════════════════════════════════════
   HERO DIMIA — estilos aislados (scope .hero-dimia)
   Adaptado de Claude Designs v4: nuevo shape con textura papel (feTurbulence)
   + gradientes; paleta DIMIA (--navy), tipografías self-hosted (Helvetica Now
   Display + ITC Garamond Std), sin chrome duplicado (el .nav fixed ya provee
   logo + socials).
   v4 — 2026-04-19
   ═════════════════════════════════════════ */

.hero-dimia {
  --hd-bg: var(--navy, #0D0A23);
  --hd-text: var(--white, #FFFFFF);

  position: relative;
  width: 100%;
  background: var(--hd-bg);
  color: var(--hd-text);
  font-family: var(--f-sans);
  overflow: hidden;
  /* isolation:isolate removido: atrapaba al stage pinned en un stacking
     context local, y los títulos/pills de #problema se pintaban por encima
     mientras subían en scroll. Ahora el z-index del stage actúa en root. */
}

/* v6 2026-04-21: autoplay sin scroll-scrub. El wrapper ahora es
   simplemente la altura del hero section (100vh). */
.hero-dimia__scroll {
  position: relative;
  height: 100vh;
}

/* La escena que pinnea GSAP (pin: r.stage, pinSpacing: false).
   El fondo navy es crítico: con pinSpacing:false el stage queda position:fixed
   pero la sección siguiente (#problema) sigue scrolleando en flujo por detrás.
   Sin fondo opaco aquí se ve a través del hero animado. */
.hero-dimia__stage {
  position: relative;
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--hd-bg);
  z-index: 10;
}

/* ---------- Canvas frame-sequence (origami baked del video 3D) ----------
   Llena el stage completo (1599×917 landscape del frame baked, cover-mode
   recorta bordes laterales en viewports portrait sin perder el origami
   centrado). z-index 1 para quedar bajo los textos/CTA. */
.hero-dimia__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  image-rendering: auto;
  /* El webp baked tiene bg #010013 (casi negro). El hero anterior usaba
     #0D0A23 (navy). Con mix-blend-mode:lighten el navy del stage "gana"
     sobre los pixeles casi-negros del webp, pero el púrpura del origami
     (canales mucho más brillantes) queda intacto. Resultado: bg navy
     como antes + origami sin tocar. */
  mix-blend-mode: lighten;
}

/* ---------- Textos ---------- */
.hero-dimia__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-dimia__word {
  position: absolute;
  opacity: 0;
  will-change: opacity;
  line-height: 0.95;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--hd-text);
}

.hero-dimia__word--damos,
.hero-dimia__word--forma,
.hero-dimia__word--atu {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: clamp(40px, 6.4vw, 88px);
}
.hero-dimia__word--marca {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(46px, 7.2vw, 100px);
  letter-spacing: 0;
}

/* Posiciones desktop — texts hug origami corners per PDF reference:
   "Damos/forma" inside origami top-left, "a tu/marca" at origami bottom-right. */
.hero-dimia__word--damos { top: 17%; left: 34%; }
.hero-dimia__word--forma { top: 25%; left: 34%; }
.hero-dimia__word--atu   { top: 63%; right: 35%; left: auto; text-align: right; }
.hero-dimia__word--marca { top: 72%; right: 35%; left: auto; text-align: right; }

/* ---------- CTA ---------- */
.hero-dimia__cta {
  position: absolute;
  left: 50%;
  bottom: clamp(40px, 8vh, 90px);
  transform: translateX(-50%);
  opacity: 0;
  z-index: 4;

  padding: 16px 34px;
  background: transparent;
  color: var(--hd-text);
  border: 1px solid var(--hd-text);
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.hero-dimia__cta:hover {
  background: var(--hd-text);
  color: var(--hd-bg);
}

/* ---------- Tablet portrait / near-square (>720px ancho, más alto que ancho) ----------
   El canvas en cover-mode escala la imagen a full-height en estos aspect-ratios,
   así que el origami queda más abajo que en landscape. Corremos los textos para
   pegarlos a los bordes del origami, no al viewport. */
@media (min-width: 721px) and (max-aspect-ratio: 1/1) {
  .hero-dimia__word--damos { top: 26%; left: 20%; }
  .hero-dimia__word--forma { top: 30.5%; left: 20%; }
  .hero-dimia__word--atu   { top: 62%; right: 23%; left: auto; text-align: right; }
  .hero-dimia__word--marca { top: 67%; right: 23%; left: auto; text-align: right; }
}

/* ---------- Portrait tablet más vertical (iPad Air 820x1180, Surface Pro 7
   912x1368, aspect < 5/6) — el origami se corre más a la derecha visualmente
   porque el cover-mode escala full-height; "a tu marca" necesita menos aire
   del borde derecho. */
@media (min-width: 721px) and (max-aspect-ratio: 5/6) {
  .hero-dimia__word--atu   { right: 15%; }
  .hero-dimia__word--marca { right: 15%; }
}

/* ---------- Landscape chico (1025px- o tablets landscape) ----------
   Aspect 1:1 a 1.5:1 — origami sigue siendo grande pero cambia levemente
   su verticalidad vs el 16:9 de referencia. */
@media (min-width: 721px) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) {
  .hero-dimia__word--damos { top: 23%; left: 32%; }
  .hero-dimia__word--forma { top: 30%; left: 32%; }
  .hero-dimia__word--atu   { top: 63%; right: 33%; left: auto; text-align: right; }
  .hero-dimia__word--marca { top: 71%; right: 33%; left: auto; text-align: right; }
}

/* ---------- Mobile: recompone, no escala ---------- */
@media (max-width: 720px) {
  /* Mobile autoplay: mismo 100vh que desktop. */
  .hero-dimia__scroll { height: 100vh; }

  /* Origami más chico en móvil — el cover-mode escalaba el webp
     para llenar toda la altura del stage y quedaba gigante en 430x932.
     Scale aplicado en canvas no afecta posiciones % de los textos. */
  .hero-dimia__canvas { transform: scale(0.82); transform-origin: center center; }

  .hero-dimia__word--damos { top: 26.5%; left: 5%; }
  .hero-dimia__word--forma { top: 33.5%; left: 5%; }
  .hero-dimia__word--atu   { top: 60%; right: 5%; left: auto; text-align: right; }
  .hero-dimia__word--marca { top: 67%; right: 5%; left: auto; text-align: right; }

  .hero-dimia__word--damos,
  .hero-dimia__word--forma,
  .hero-dimia__word--atu { font-size: clamp(36px, 13vw, 64px); }
  .hero-dimia__word--marca { font-size: clamp(42px, 15vw, 72px); }

  .hero-dimia__cta { bottom: 40px; padding: 14px 24px; font-size: 11px; }
}

/* ---------- Mobile angosto (iPhone SE 375px, iPhone 13 mini, etc) ----------
   En viewports <=400px, "a tu marca" quedaba muy pegado al borde derecho.
   iPhone 14 Pro Max (430px) mantiene right:5% del bloque base. */
@media (max-width: 400px) {
  .hero-dimia__word--atu   { right: 9%; }
  .hero-dimia__word--marca { right: 9%; }
}

/* ---------- Galaxy Z Fold 5 folded (344x882) y similares ultra-narrow ----------
   A 344px el origami al 0.82 queda gigantesco vs el viewport; bajar a 0.70. */
@media (max-width: 360px) {
  .hero-dimia__canvas { transform: scale(0.70); }
}

/* Reduced motion: el canvas frame-sequence ya es estático (no filtros CSS
   animados); PREFERS_REDUCED en JS muestra el último frame directo. */