/* Hero del inicio como slider: el fondo (aurora) queda quieto y continuo; solo cambian los elementos de cada diapositiva.
   Diapositiva 1: la invitación (el hero de siempre). Diapositiva 2: la galería colaborativa, que también se vende por aparte. */

.hero.hero-slider { display: block; position: relative; }
.hs-pista { display: grid; }
.hs-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 64px); align-items: center; min-width: 0; }
.hs-slide { transition: visibility 0s .7s; }
.hs-slide.es-activo { transition-delay: 0s; }
.hs-slide:not(.es-activo) { visibility: hidden; pointer-events: none; }
.hs-slide > :first-child, .hs-slide > :last-child { transition: opacity .7s cubic-bezier(.23, 1, .32, 1), translate .9s cubic-bezier(.16, 1, .3, 1), scale .9s cubic-bezier(.16, 1, .3, 1); }
.hs-slide > :last-child { transition-delay: .08s; }
.hs-slide:not(.es-activo) > :first-child { opacity: 0; translate: -40px 0; }
.hs-slide:not(.es-activo) > :last-child { opacity: 0; translate: 60px 0; scale: .96; }

/* Navegación: pestañas con barra de avance */
.hs-nav { position: absolute; left: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen))); bottom: clamp(18px, 5vh, 56px); z-index: 5; display: flex; gap: 8px; }
.hs-tab { display: grid; gap: 8px; width: 150px; padding: 10px 2px 0; border: 0; background: none; text-align: left; font: inherit; font-size: .86rem; font-weight: 600; color: var(--gris); cursor: pointer; }
.hs-tab span { display: block; }
.hs-tab i { display: block; height: 3px; border-radius: 3px; background: rgb(122 46 142 / .16); overflow: hidden; }
.hs-tab i::after { content: ""; display: block; height: 100%; width: 100%; background: var(--orquidea); transform: scaleX(0); transform-origin: left; }
.hs-tab[aria-selected="true"] { color: var(--tinta); }
.hs-tab[aria-selected="true"] i::after { animation: hs-avance var(--hs-ms, 8000ms) linear forwards; }
.hero-slider.en-pausa .hs-tab[aria-selected="true"] i::after { animation-play-state: paused; }
.hero-slider.sin-auto .hs-tab[aria-selected="true"] i::after { animation: none; transform: scaleX(1); }
@keyframes hs-avance { to { transform: scaleX(1); } }

/* Diapositiva 2 · texto */
.hs-ceja { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgb(255 255 255 / .7); box-shadow: 0 0 0 1px var(--linea); font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orquidea); margin-bottom: 20px; }
.hs-ceja .icono { width: 18px; height: 18px; }
.hs-titulo { max-width: 22ch; font-size: clamp(2.3rem, 3.6vw, 3.25rem); line-height: 1.1; }
.hs-titulo em { font-style: normal; color: var(--orquidea); background: linear-gradient(transparent 62%, var(--coral-suave) 62% 92%, transparent 92%); padding: 0 .08em; }
.hs-precio { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 20px; }
.hs-precio strong { font-family: var(--titulos); font-weight: 400; font-size: 1.6rem; color: var(--tinta); }
.hs-precio span { color: var(--gris); font-size: .95rem; }

/* Diapositiva 2 · escena */
.hs-escena { position: relative; height: min(760px, calc(100svh - 120px)); min-height: 600px; display: grid; place-items: center; }
.hs-cel { position: relative; width: 272px; height: 572px; padding: 10px; border-radius: 44px; background: linear-gradient(145deg, #3B2A4A, #1F1428); box-shadow: 0 50px 90px -40px rgb(58 30 74 / .6), inset 0 0 0 2px rgb(255 255 255 / .08); rotate: 3deg; }
.hs-pantalla { position: relative; height: 100%; border-radius: 35px; overflow: hidden; background: #FBF8FC; display: flex; flex-direction: column; }
.hs-cab { padding: 34px 18px 12px; display: grid; gap: 2px; }
.hs-cab span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); font-weight: 700; }
.hs-cab strong { font-family: var(--titulos); font-weight: 400; font-size: 1.25rem; color: var(--tinta); }
.hs-cab em { font-style: normal; font-size: .78rem; font-weight: 600; color: var(--orquidea); font-variant-numeric: tabular-nums; }
.hs-fotos { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 86px; gap: 4px; padding: 0 6px; }
.hs-foto { border-radius: 8px; background: #E9DDF0 center / cover no-repeat; }
.hs-foto.f0 { grid-column: span 2; grid-row: span 2; }
.hs-foto.f4 { grid-row: span 2; }
.hs-subiendo { position: relative; display: grid; place-items: center; background: linear-gradient(135deg, #F4E8F8, #FCE9E4); }
.hs-subiendo i { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--orquidea) var(--hs-p, 30%), rgb(122 46 142 / .15) 0); -webkit-mask: radial-gradient(circle, transparent 11px, #000 12px); mask: radial-gradient(circle, transparent 11px, #000 12px); }
.hs-slide.es-activo .hs-subiendo i { animation: hs-sube 3.2s ease-in-out infinite; }
@property --hs-p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes hs-sube { from { --hs-p: 0%; } 80%, to { --hs-p: 100%; } }
.hs-boton-subir { margin: 10px 14px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 999px; background: var(--orquidea); color: #fff; font-size: .88rem; font-weight: 700; }
.hs-boton-subir .icono { width: 18px; height: 18px; }

.hs-tarjeta-qr { position: absolute; left: -2%; bottom: 13%; z-index: 2; width: 168px; padding: 16px 16px 14px; border-radius: 16px; background: #FFFDF8 url("img/correo/papel.webp") center / 200% auto; box-shadow: 0 30px 50px -24px rgb(58 30 74 / .55), 0 0 0 1px rgb(58 30 74 / .06); rotate: -8deg; display: grid; justify-items: center; gap: 8px; text-align: center; }
.hs-tarjeta-qr small { font-family: var(--titulos); font-size: 1.05rem; color: var(--orquidea); }
.hs-qr { width: 112px; height: 112px; border-radius: 6px; }
.hs-tarjeta-qr b { font-size: .74rem; line-height: 1.3; color: var(--tinta); font-weight: 600; }
.hs-aviso { position: absolute; right: -4%; top: 22%; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--blanco); font-size: .9rem; box-shadow: 0 18px 36px -18px rgb(58 30 74 / .45), 0 0 0 1px var(--linea); max-width: 15rem; }
.hs-aviso .icono { width: 26px; height: 26px; color: var(--coral); }
.hs-lacre { position: absolute; right: 6%; bottom: 12%; z-index: 2; width: 84px; height: auto; rotate: 14deg; filter: drop-shadow(0 10px 14px rgb(58 30 74 / .35)); }
.hs-slide.es-activo .hs-tarjeta-qr { animation: hs-flota 6s ease-in-out infinite alternate; }
.hs-slide.es-activo .hs-aviso { animation: hs-aviso .8s cubic-bezier(.34, 1.4, .64, 1) .7s both; }
@keyframes hs-flota { to { translate: 0 -10px; rotate: -6deg; } }
@keyframes hs-aviso { from { opacity: 0; translate: 0 14px; scale: .9; } }

@media (hover: hover) and (pointer: fine) {
	.hs-tab:hover { color: var(--tinta); }
}
@media (max-width: 899px) {
	.hero.hero-slider { overflow-x: clip; }  /* la diapositiva que entra de lado no debe ensanchar la página */
	.hs-slide { grid-template-columns: minmax(0, 1fr); }
	.hs-titulo { max-width: 14ch; }
	.hs-escena { height: 600px; min-height: 0; }
	.hs-nav { position: static; justify-content: center; margin-top: 12px; }
	.hs-tab { width: 42vw; max-width: 170px; }
	.hs-tarjeta-qr { left: 0; width: 140px; }
	.hs-qr { width: 92px; height: 92px; }
	.hs-aviso { right: 0; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
	.hs-slide > :first-child, .hs-slide > :last-child { transition: none; }
	.hs-tab[aria-selected="true"] i::after { animation: none; transform: scaleX(1); }
	.hs-slide.es-activo .hs-tarjeta-qr, .hs-slide.es-activo .hs-subiendo i, .hs-slide.es-activo .hs-aviso { animation: none; }
}