/* Portada interactiva de Maison Dulce: fondo rosa en degradado + elementos sueltos que se mueven (ver portada.js) */
#hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* La portada ocupa justo lo que queda de la primera pantalla (alto de la ventana menos el menú de 68 px), sin pasarse */
  height: clamp(520px, min(40.7vw, calc(100vh - 68px)), 820px);
  height: clamp(520px, min(40.7vw, calc(100svh - 68px)), 820px);
  min-height: 0;
  padding: 44px 24px 0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 38%, #FEF0F3 0%, rgba(254, 240, 243, 0) 72%),
    linear-gradient(180deg, #FDE7EB 0%, #FCD5DC 100%);
}
@media (max-width: 899px) {
  #hero { height: clamp(500px, calc(100vh - 68px), 610px); height: clamp(500px, calc(100svh - 68px), 610px); min-height: 0; padding: 36px 16px 0; }
}

.portada-stage { position: absolute; inset: 0; z-index: 1; }
.portada-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.p-item {
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
  max-width: none;
  opacity: 0;
  will-change: transform;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Que el dedo pueda seguir deslizando la página hacia abajo: solo se reservan los gestos horizontales */
#hero { touch-action: pan-y; }

/* Nada de la portada se puede seleccionar ni arrastrar como imagen: así al agarrar una pieza no se marca en azul el texto ni las sombras */
#hero, #hero * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#hero ::selection { background: transparent; }
.p-item { -webkit-touch-callout: none; }

/* Pantallas bajas (portátiles): el texto se compacta un poco para que las piezas tengan más espacio sin pasarse de la primera pantalla */
@media (min-width: 900px) and (max-height: 780px) {
  #hero { padding-top: 26px; }
  #hero .hero-content-overlay { padding-top: 0; }
  #hero .hero-badge { margin-bottom: 8px; }
  #hero .hero-title { font-size: clamp(34px, 5.6vh, 50px); margin-bottom: 8px; }
  #hero .hero-subtitle { margin-bottom: 14px; }
}