/* Cotillón Fiestas & Más: violeta oscuro de fondo, rosa como único acento; el color lo ponen los globos y las fotos.
   Bagel Fat One para títulos + Plus Jakarta Sans. El 3D: un solo canvas (portada) y el resto transformaciones CSS. */
:root {
  --bg: #150d28; --bg2: #1d1238; --card: #271a49; --ink: #f6f1ff; --ink2: #b9acd8; --line: rgba(255, 255, 255, .14);
  --acc: #ff3d9a; --acc-ink: #1a0b2e; --acc-soft: rgba(255, 61, 154, .16);
  --font-d: 'Bagel Fat One', system-ui, sans-serif; --font-b: 'Plus Jakarta Sans', system-ui, sans-serif;
  --r: 24px;
  --sh: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -16px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
h1, h2, h3 { font-weight: 400; letter-spacing: 0; line-height: 1.05; }
h2 { font-size: clamp(32px, 4.6vw, 54px); }
.top { background: color-mix(in srgb, var(--bg) 78%, transparent); }
.marca i { font-size: 32px; color: var(--acc); }
.marca span { font-family: var(--font-d); font-weight: 400; letter-spacing: 0; }
.btn.contorno { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.agregar { background: var(--ink); color: var(--bg); }
.agregar.ok { background: var(--acc); color: var(--acc-ink); }
.filtros .ind { background: var(--ink); }
.chip[aria-selected="true"] { color: var(--bg); }
.faq details { box-shadow: none; border: 1px solid var(--line); }
.faq summary { font-family: var(--font-b); }
.cinco li a { box-shadow: none; border: 1px solid var(--line); }
.cinco b { font-family: var(--font-d); font-weight: 400; }
.pend { background: var(--acc-soft); color: var(--ink); }
.pie { background: #0d081a; color: var(--ink); }
.tile.color h3, .tile h3 { font-weight: 400; }

/* ── portada: el único canvas 3D de la página ── */
.hero-fiesta { position: relative; display: grid; align-items: end; min-height: min(calc(100dvh - 66px), 880px); isolation: isolate; overflow: clip;
  background: radial-gradient(60% 55% at 78% 30%, rgba(255, 61, 154, .32), transparent 70%), radial-gradient(50% 50% at 25% 80%, rgba(124, 92, 255, .38), transparent 70%), linear-gradient(180deg, #1b1035, #150d28); }
.fondo3d { position: absolute; inset: 0; z-index: 0; }
.fondo3d canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.hero-fiesta .wrap { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: start; padding-top: 140px; padding-bottom: clamp(36px, 7vw, 84px); pointer-events: none; }
.hero-fiesta .wrap :is(a, button) { pointer-events: auto; }
.hero-fiesta h1 { font-size: clamp(40px, 6.6vw, 92px); line-height: 1; max-width: 13ch; text-shadow: 0 6px 30px rgba(21, 13, 40, .6); }
.hero-fiesta h1 em { font-style: normal; color: var(--acc); }
.hero-fiesta .bajada { margin-top: 0; max-width: 40ch; color: #e6dcfb; text-shadow: 0 2px 16px rgba(21, 13, 40, .8); }
.hero-fiesta::after { content: ''; position: absolute; inset: auto 0 0 0; height: 55%; z-index: 0; pointer-events: none; background: linear-gradient(to top, rgba(21, 13, 40, .88), transparent); }
@media (min-width: 900px) { .hero-fiesta::after { height: 40%; } }

/* ── carrusel 3D de temas (coverflow, solo CSS 3D) ── */
#fiesta { overflow-x: clip; }
.flow { position: relative; height: clamp(380px, 52vw, 460px); perspective: 1300px; outline: none; touch-action: pan-y; user-select: none; }
.flow:focus-visible { outline: 3px solid var(--acc); outline-offset: 6px; border-radius: 30px; }
.tema { position: absolute; left: 50%; top: 0; width: clamp(230px, 30vw, 300px); height: 100%; margin-left: calc(clamp(230px, 30vw, 300px) / -2); border-radius: var(--r); overflow: hidden; background: var(--card); box-shadow: var(--sh);
  display: grid; grid-template-rows: 1fr auto; text-align: left; transform-style: preserve-3d; will-change: transform;
  transition: transform .8s var(--out), opacity .5s var(--out), filter .5s var(--out); }
.tema img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.tema .t { display: grid; gap: 6px; padding: 16px 18px 18px; }
.tema h3 { font-size: 22px; }
.tema p { font-size: 14px; color: var(--ink2); line-height: 1.4; }
.tema .ir { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; color: var(--acc); }
.tema:not(.activo) .ir { visibility: hidden; }
.tema:not(.activo) { cursor: pointer; filter: saturate(.8) brightness(.8); }
.flow-ctl { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.flow-ctl button { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); transition: transform .16s var(--out), background-color .2s var(--out); }
.flow-ctl button:active { transform: scale(.92); }

/* ── tarjetas del catálogo: se dan vuelta al aparecer y se inclinan con el puntero ── */
.grilla { perspective: 1400px; }
.tarjeta { transform-style: preserve-3d; transform-origin: 50% 0; animation: voltea .85s var(--out) backwards; animation-delay: calc(var(--i, 0) * 60ms); transition: transform .35s var(--out), box-shadow .3s var(--out); position: relative; }
@keyframes voltea { from { opacity: 0; transform: rotateX(-78deg) translateY(36px) scale(.94); } }
.tarjeta.inclina { transition: transform .08s linear; }
.tarjeta::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .22), transparent 55%); transition: opacity .3s var(--out); }
.tarjeta.inclina::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .tarjeta:hover { transform: none; } }

/* ── secciones que entran en perspectiva al bajar (CSS scroll-driven, sin listeners) ── */
@supports (animation-timeline: view()) {
  .sec > .wrap { transform-origin: 50% 100%; animation: entra3d linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes entra3d { from { opacity: .15; transform: perspective(1400px) rotateX(9deg) translateY(70px) translateZ(-60px); } to { opacity: 1; transform: none; } }
}

/* ── mirar de cerca: el cuadro se abre girando ── */
.cerca { animation: abre3d .7s var(--out); transform-origin: 50% 50%; }
@keyframes abre3d { from { opacity: 0; transform: perspective(1200px) rotateY(-28deg) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  .tarjeta { animation: none; }
  .tema { transition: none; }
  .sec > .wrap { animation: none; }
}