/* ═══════════════════════════════════════════════════════════════════
   HERO ANIMADO · /puertas/
   Imagen: catálogo SanRafael 2025, "Clásico renovado" (950 VP23 Blanco SR).
   La puerta doble de la derecha se abre hacia el espectador, sobre sus
   bisagras, una sola vez al cargar; al fondo se ve un salón con el mismo
   parquet en espiga. Zoom leve de una sola pasada.
   Depende de /css/styles.css (tokens --pjm-*).
   ═══════════════════════════════════════════════════════════════════ */

.page-hero.hero-puertas{
  --hp-h: clamp(360px, 46vw, 600px);
  --hp-ease-door: cubic-bezier(.42, .02, .14, 1);   /* arranque suave, frenada larga */
  --hp-door-dur: 3.4s;
  --hp-door-delay: 1.15s;
  position: relative;
  display: block;
  height: var(--hp-h);
  min-height: 0;
  margin-top: 0;                      /* el body ya reserva el alto del nav */
  background: var(--pjm-crema, #F7F2EA);
  overflow: hidden;
  isolation: isolate;
}
.page-hero.hero-puertas .hero-bg{ display: none; }
/* Sin el degradado oscuro del hero genérico: la foto es clara */
.page-hero.hero-puertas::before{
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(24,17,12,.16) 0%, rgba(24,17,12,0) 38%);
}
.page-hero.hero-puertas::after{
  background: linear-gradient(90deg, transparent, rgba(15,98,50,.55), transparent);
  opacity: .7;
}

/* ── Escenario (recorta la escena) ───────────────────────────────── */
.hp-stage{ position: absolute; inset: 0; z-index: 1; overflow: hidden; }

/* La escena mantiene SIEMPRE la proporción de la foto (2485×1363) para que
   las hojas, posicionadas en %, encajen pixel a pixel sobre el hueco. */
.hp-scene{
  position: absolute;
  top: 50%; left: 50%;
  width: max(100%, calc(var(--hp-h) * 1.8232));
  aspect-ratio: 2485 / 1363;
  transform: translate(-50%, -50%);
  container-type: inline-size;
  transition: opacity .45s ease;
}
/* Con JS, la escena aparece entera de golpe (placa + hojas), sin destellos
   de hojas flotando o del salón antes de tiempo. Sin JS, se ve cerrada. */
html.hp-js .hero-puertas:not(.is-ready) .hp-scene{ opacity: 0; }
.hp-zoom{
  position: absolute; inset: 0;
  transform-origin: 64% 56%;         /* el zoom tiende hacia la puerta doble */
  will-change: transform;
}
.is-ready .hp-zoom{ animation: hpZoom 9.5s cubic-bezier(.18,.55,.2,1) both; }
@keyframes hpZoom{ from{ transform: scale(1); } to{ transform: scale(1.058); } }

.hp-plate{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; object-fit: fill;
}

/* Luz cálida que sale del salón y baña el suelo cuando se abre */
.hp-spill{
  position: absolute;
  left: 61.5%; top: 70%; width: 30%; height: 30%;
  background: radial-gradient(ellipse at 50% 0%, rgba(247,242,234,.55) 0%, rgba(247,242,234,.18) 42%, rgba(247,242,234,0) 72%);
  mix-blend-mode: soft-light;
  opacity: 0; pointer-events: none;
}
.is-ready .hp-spill{ animation: hpFade var(--hp-door-dur) ease-out calc(var(--hp-door-delay) + .5s) both; }
.is-open  .hp-spill{ opacity: 1; }
@keyframes hpFade{ to{ opacity: 1; } }

/* ── Puerta doble en 3D ──────────────────────────────────────────── */
.hp-doors{
  position: absolute; inset: 0;
  perspective: 118cqw;                /* cámara relativa al ancho de la foto */
  perspective-origin: 45% 46%;        /* punto principal de la cámara */
  /* Recorte al hueco del marco: lo que gira tras el plano de la pared desaparece */
  clip-path: polygon(66.64% 22.38%, 84.63% 20.76%, 84.63% 76.30%, 66.64% 74.25%);
}
.hp-leaf{
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Cajas medidas sobre la foto original (px → % de 2485×1363) */
.hp-leaf--l{ left: 66.640%; top: 21.643%; width: 8.531%; height: 53.558%; transform-origin: 0% 50%; }
.hp-leaf--r{ left: 75.171%; top: 20.763%; width: 9.457%; height: 55.539%; transform-origin: 100% 50%; }

.hp-face{
  position: absolute; inset: 0;
  background-repeat: no-repeat; background-size: 100% 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.hp-leaf--l .hp-face{ background-image: url('/images/hero-puertas/leaf-left.webp'); }
.hp-leaf--r .hp-face{ background-image: url('/images/hero-puertas/leaf-right.webp'); }
/* Cara trasera: misma hoja (el diseño es simétrico), a un grosor de distancia */
.hp-face--back{ transform: translateZ(calc(-.42cqw)) rotateY(180deg); filter: brightness(.86) saturate(.95); }
/* Sombreado de la cara frontal al girar (deja de mirar a la luz) */
.hp-face--front::after{
  content: ''; position: absolute; inset: 0; opacity: 0;
  mix-blend-mode: multiply;
}
.hp-leaf--l .hp-face--front::after{ background: linear-gradient(90deg, rgba(78,50,32,.08), rgba(78,50,32,.42)); }
.hp-leaf--r .hp-face--front::after{ background: linear-gradient(270deg, rgba(78,50,32,.06), rgba(78,50,32,.30)); }
.is-ready .hp-face--front::after{ animation: hpFade var(--hp-door-dur) var(--hp-ease-door) var(--hp-door-delay) both; }
.is-open  .hp-face--front::after{ opacity: 1; }

/* Canto de la hoja (grosor ≈ 40 mm) */
.hp-edge{
  position: absolute; top: 0; bottom: 0; width: .42cqw;
  background: linear-gradient(180deg, rgba(78,50,32,0) 0%, rgba(78,50,32,.10) 55%, rgba(78,50,32,.24) 100%), var(--pjm-crema, #F7F2EA);
  box-shadow: inset 0 0 0 .5px rgba(24,17,12,.10);
}
.hp-leaf--l .hp-edge{ left: 100%; transform-origin: 0 50%;   transform: rotateY(90deg); }
.hp-leaf--r .hp-edge{ right: 100%; transform-origin: 100% 50%; transform: rotateY(-90deg); }

/* Apertura: ambas hojas hacia dentro (hacia el salón); al pasar de 90° quedan tras la pared y desaparecen */
.is-ready .hp-leaf--l{ animation: hpOpenL var(--hp-door-dur) var(--hp-ease-door) var(--hp-door-delay) both; }
.is-ready .hp-leaf--r{ animation: hpOpenR var(--hp-door-dur) var(--hp-ease-door) calc(var(--hp-door-delay) + .18s) both; }
@keyframes hpOpenL{ from{ transform: rotateY(0deg); } to{ transform: rotateY(112deg); } }
@keyframes hpOpenR{ from{ transform: rotateY(0deg); } to{ transform: rotateY(-112deg); } }
.is-open .hp-leaf--l{ transform: rotateY(112deg); }
.is-open .hp-leaf--r{ transform: rotateY(-112deg); }


/* ── Texto del hero: tarjeta translúcida, H1 en verde corporativo ── */
.page-hero.hero-puertas .page-hero-content{
  position: absolute; z-index: 3;
  left: clamp(16px, 4vw, 56px);
  bottom: clamp(18px, 3.6vw, 48px);
  max-width: min(560px, 50%);
  padding: clamp(18px, 2.2vw, 28px) clamp(20px, 2.4vw, 32px);
  color: var(--pjm-carbon, #18110C);
  background: rgba(247,242,234,.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(247,242,234,.9);
  border-radius: var(--pjm-r-lg, 12px);
  box-shadow: 0 18px 44px rgba(24,17,12,.16);
}
.is-ready .page-hero-content{ animation: hpRise 1s var(--pjm-ease, cubic-bezier(.16,1,.3,1)) .2s both; }
@keyframes hpRise{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
.page-hero.hero-puertas h1{
  color: var(--pjm-verde, #0f6232);
  font-weight: 600; letter-spacing: -.012em; line-height: 1.08;
  font-size: clamp(1.75rem, 3.3vw, 2.9rem);
  text-shadow: none;
}
.page-hero.hero-puertas h1 em{ color: var(--pjm-verde, #0f6232); font-style: italic; opacity: 1; }
.page-hero.hero-puertas .pjm-subtitulo{ color: var(--pjm-tierra, #4E3220); margin: 0 0 .5em; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.page-hero.hero-puertas p{ color: var(--pjm-carbon, #18110C); font-size: clamp(.95rem, 1.1vw, 1.0625rem); line-height: 1.55; margin-top: 12px; max-width: none; }
.page-hero.hero-puertas p strong{ color: var(--pjm-verde, #0f6232); font-weight: 600; }

/* ── Móvil / vertical: escena anclada a la puerta doble, texto debajo ── */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1024px){
  .page-hero.hero-puertas{ --hp-h: clamp(250px, 64vw, 420px); height: auto; }
  .hp-stage{ position: relative; height: var(--hp-h); }
  .hp-scene{ left: auto; right: -2%; transform: translateY(-50%); }
  .hp-zoom{ transform-origin: 76% 58%; }
  .page-hero.hero-puertas::before{ display: none; }
  .page-hero.hero-puertas .page-hero-content{
    position: relative; left: auto; bottom: auto; max-width: none;
    margin: 0; padding: 22px 20px 28px;
    background: var(--pjm-crema, #F7F2EA);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .page-hero.hero-puertas h1{ font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

/* ── Orden de la página: tarjetas justo tras el hero; cifras + stock después ── */
main > .gama-block + .stats-strip{ margin-top: clamp(40px, 5vw, 64px); }
main > .stats-strip + .stock-section{ padding-top: clamp(40px, 5vw, 64px); }

/* ── Accesibilidad: sin movimiento → estado final (puertas abiertas) ── */
@media (prefers-reduced-motion: reduce){
  .is-ready .hp-zoom, .is-ready .hp-leaf, .is-ready .hp-spill,
  .is-ready .hp-face--front::after, .is-ready .page-hero-content{ animation: none !important; }
  .is-ready .hp-leaf--l{ transform: rotateY(112deg); }
  .is-ready .hp-leaf--r{ transform: rotateY(-112deg); }
  .is-ready .hp-spill, .is-ready .hp-face--front::after{ opacity: 1; }
}