/* ==========================================================================
   Momentia — sitio público (landing, alta de evento, pagos)
   ========================================================================== */

/* ---------- "Fotos" ilustradas: luces de fiesta y siluetas ---------- */
.ph-1, .style-card .gmini .gmini__grid i.ph-1 { background:
  radial-gradient(ellipse 16% 26% at 26% 104%, #0b0616 97%, transparent),
  radial-gradient(ellipse 13% 22% at 58% 106%, #0b0616 97%, transparent),
  radial-gradient(ellipse 15% 25% at 86% 104%, #0b0616 97%, transparent),
  radial-gradient(circle at 18% 22%, #ffc23d 0 5%, transparent 13%),
  radial-gradient(circle at 48% 16%, #ffe3a3 0 3%, transparent 9%),
  radial-gradient(circle at 78% 30%, #ff3e8a 0 6%, transparent 16%),
  radial-gradient(circle at 60% 55%, #a894ff 0 4%, transparent 14%),
  linear-gradient(165deg, #45205f, #1a0d2c 70%); }
.ph-2, .style-card .gmini .gmini__grid i.ph-2 { background:
  radial-gradient(ellipse 22% 42% at 44% 100%, #120a1f 96%, transparent),
  radial-gradient(ellipse 20% 40% at 60% 102%, #0d0717 96%, transparent),
  radial-gradient(circle at 50% 30%, #fff1d0 0 7%, transparent 26%),
  radial-gradient(circle at 15% 70%, #ff7eb3 0 3%, transparent 10%),
  radial-gradient(circle at 85% 18%, #ffc23d 0 4%, transparent 12%),
  linear-gradient(180deg, #7a3a55, #2b1233 75%); }
.ph-3, .style-card .gmini .gmini__grid i.ph-3 { background:
  radial-gradient(circle at 30% 30%, #ff3e8a 0 8%, transparent 26%),
  radial-gradient(circle at 75% 60%, #ffc23d 0 6%, transparent 24%),
  radial-gradient(circle at 60% 20%, #fff 0 2%, transparent 7%),
  radial-gradient(circle at 20% 75%, #a894ff 0 5%, transparent 20%),
  linear-gradient(140deg, #2d1650, #140e26); }
.ph-4, .style-card .gmini .gmini__grid i.ph-4 { background:
  radial-gradient(ellipse 14% 24% at 20% 104%, #110a1c 97%, transparent),
  radial-gradient(ellipse 14% 24% at 50% 104%, #110a1c 97%, transparent),
  radial-gradient(ellipse 14% 24% at 80% 104%, #110a1c 97%, transparent),
  radial-gradient(circle at 50% 20%, #ffc23d 0 10%, transparent 30%),
  linear-gradient(180deg, #c86a2e, #4a1f3c 80%); }
.ph-5, .style-card .gmini .gmini__grid i.ph-5 { background:
  radial-gradient(circle at 25% 25%, #7ef0ff 0 4%, transparent 14%),
  radial-gradient(circle at 70% 35%, #ff3e8a 0 5%, transparent 18%),
  radial-gradient(circle at 45% 70%, #ffc23d 0 3%, transparent 12%),
  radial-gradient(ellipse 30% 50% at 50% 110%, #0d0717 96%, transparent),
  linear-gradient(200deg, #203a6b, #150e2a 70%); }
.ph-6, .style-card .gmini .gmini__grid i.ph-6 { background:
  radial-gradient(circle at 70% 25%, #fff 0 3%, transparent 10%),
  radial-gradient(circle at 30% 40%, #ffc23d 0 7%, transparent 22%),
  radial-gradient(ellipse 25% 45% at 35% 104%, #1a0d23 96%, transparent),
  linear-gradient(170deg, #6d2c7c, #25113a); }

/* ---------- Encabezado ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgb(20 14 38 / .86); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); color: var(--flash); border-bottom: 1px solid rgb(255 255 255 / .06); }
.site-header__row { display: flex; align-items: center; gap: 2rem; min-height: 68px; }
.site-header .brand { margin-right: auto; }
.site-nav { display: flex; gap: 1.8rem; font-size: .93rem; }
.site-nav a { text-decoration: none; color: rgb(255 247 234 / .78); transition: color .15s; }
.site-nav a:hover { color: var(--flash); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; color: var(--flash); background: radial-gradient(120% 90% at 85% 10%, #3b1a5e 0%, var(--night) 55%); padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 6.2vw, 5.4rem); font-weight: 800; letter-spacing: -.045em; line-height: .96; max-width: 11ch; }
.hero__lead { margin-top: 1.5rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: rgb(255 247 234 / .8); max-width: 34rem; line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hero__actions .btn--ghost { color: var(--flash); --btn-bd: rgb(255 247 234 / .35); }
.hero__note { margin-top: 1.1rem; font-size: .9rem; color: rgb(255 247 234 / .6); }

.hero__lights i { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; }
.hero__lights i:nth-child(1) { width: 260px; height: 260px; background: var(--fucsia); right: 8%; top: 12%; opacity: .35; }
.hero__lights i:nth-child(2) { width: 180px; height: 180px; background: var(--marigold); right: 32%; bottom: 8%; opacity: .22; }
.hero__lights i:nth-child(3) { width: 120px; height: 120px; background: var(--lilac); left: 4%; top: 18%; opacity: .25; }
.hero__lights i:nth-child(4) { width: 14px; height: 14px; background: var(--marigold); filter: blur(3px); left: 46%; top: 14%; opacity: .8; }
.hero__lights i:nth-child(5) { width: 9px; height: 9px; background: #fff; filter: blur(2px); left: 8%; bottom: 18%; opacity: .7; }
.hero__lights i:nth-child(6) { width: 18px; height: 18px; background: var(--fucsia); filter: blur(4px); right: 4%; bottom: 20%; opacity: .7; }

/* El momento del flash: una sola vez al cargar */
.hero__flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle at 70% 40%, #fff 0%, #fff7ea 40%, transparent 85%); opacity: 0; animation: flash 1.1s ease-out .15s 1 both; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: .95; } 100% { opacity: 0; } }

.hero__scene { position: relative; height: 540px; }
.print { position: absolute; margin: 0; padding: 10px 10px 34px; background: #fffdf8; border-radius: 3px; box-shadow: var(--shadow-print); color: #3b3450; }
.print__img { aspect-ratio: 4 / 5; border-radius: 1px; }
.print figcaption { position: absolute; left: 12px; right: 12px; bottom: 9px; font-family: var(--font-serif); font-style: italic; font-size: .85rem; text-align: center; }
.print--a { width: 200px; left: 0; top: 40px; transform: rotate(-8deg); animation: drop-a .9s var(--ease) .35s both; }
.print--b { width: 180px; left: 40px; bottom: 10px; transform: rotate(6deg); animation: drop-b .9s var(--ease) .5s both; z-index: 1; }
@keyframes drop-a { from { opacity: 0; transform: translate(-30px, -50px) rotate(-18deg); } }
@keyframes drop-b { from { opacity: 0; transform: translate(-20px, 40px) rotate(14deg); } }

.phone { position: absolute; left: 50%; top: 10px; transform: translateX(-40%); width: 250px; height: 510px; border-radius: 40px; background: #0a0714; padding: 11px; box-shadow: 0 0 0 1.5px #3a3052, 0 40px 80px -20px rgb(0 0 0 / .8); z-index: 2; }
.phone__notch { position: absolute; left: 50%; top: 18px; width: 72px; height: 20px; border-radius: 12px; background: #0a0714; transform: translateX(-50%); z-index: 3; }
.phone__screen { height: 100%; border-radius: 30px; overflow: hidden; background: #1a1230; display: flex; flex-direction: column; }
.phone__url { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 44px 10px 8px; font-size: 10px; color: rgb(255 247 234 / .6); }
.phone__url .i { width: 10px; height: 10px; }
.phone__cover { margin: 0 10px; border-radius: 18px; height: 170px; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; }
.phone__cover strong { font-family: var(--font-display); font-size: 34px; line-height: .9; letter-spacing: -.04em; }
.phone__cover span { font-size: 13px; opacity: .85; }
.phone__btn { margin: 10px; padding: 11px; border-radius: 999px; background: var(--fucsia); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.phone__btn .i { width: 15px; height: 15px; }
.phone__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0 10px; }
.phone__grid i { aspect-ratio: 1; border-radius: 5px; }

.qr-card { position: absolute; right: 0; bottom: 60px; width: 180px; padding: 16px 16px 14px; background: var(--flash); color: var(--night); border-radius: 16px; text-align: center; transform: rotate(5deg); box-shadow: var(--shadow-print); z-index: 3; animation: drop-c .9s var(--ease) .65s both; }
@keyframes drop-c { from { opacity: 0; transform: translate(30px, 30px) rotate(14deg); } }
.qr-card__title { display: block; font-family: var(--font-display); font-weight: 750; font-size: 1.05rem; letter-spacing: -.02em; }
.qr-card__code { margin: 10px auto; width: 118px; height: 118px; }
.qr-card__code svg, .tv__qr svg { width: 100%; height: 100%; }
.qr-card__foot { font-size: .75rem; color: var(--ink-soft); }

/* ---------- Beneficios ---------- */
.perks { background: var(--white); border-bottom: 1px solid var(--line); }
.perks__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-block: 1.8rem; }
.perk { display: flex; gap: .8rem; align-items: flex-start; }
.perk > .i { width: 26px; height: 26px; color: var(--fucsia); margin-top: 2px; }
.perk b { display: block; font-size: .98rem; }
.perk span { display: block; font-size: .87rem; color: var(--ink-soft); line-height: 1.4; overflow-wrap: anywhere; }

/* ---------- Secciones ---------- */
.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section--tint { background: var(--white); }
.section--night { background: var(--night); color: var(--flash); }
.section__head { max-width: 40rem; margin: 0 auto 3rem; text-align: center; }
.section__head--left { text-align: left; margin-inline: 0; }
.section__head h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 780; letter-spacing: -.035em; }
.section__head p { margin-top: 1rem; color: var(--ink-soft); font-size: 1.08rem; }
.section__head a { color: var(--fucsia-deep); }

/* Pasos: es una secuencia real, por eso van numerados */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; counter-reset: s; position: relative; }
.steps::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; border-top: 2px dashed #d6d1e6; }
.step { position: relative; }
.step__n { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--night); color: var(--marigold); font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; box-shadow: 0 0 0 8px var(--paper); }
.step:last-child .step__n { background: var(--fucsia); color: #fff; }
.step h3 { margin-top: 1.3rem; font-size: 1.3rem; }
.step p { margin-top: .5rem; color: var(--ink-soft); font-size: .96rem; max-width: 26ch; }

/* En la fiesta */
.party { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }
.party__copy h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 780; letter-spacing: -.035em; }
.party__lead { margin-top: 1.1rem; color: rgb(255 247 234 / .75); font-size: 1.08rem; }
.features { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.3rem; }
.features li { display: flex; gap: .9rem; }
.features .i { width: 24px; height: 24px; color: var(--marigold); margin-top: 2px; }
.features b { display: block; }
.features span { color: rgb(255 247 234 / .65); font-size: .95rem; }

.tv { position: relative; aspect-ratio: 16 / 9.4; border-radius: 14px; background: #000; border: 10px solid #1b1628; box-shadow: 0 50px 100px -30px rgb(255 62 138 / .35), 0 30px 60px -20px #000; overflow: hidden; }
.tv__slides i { position: absolute; inset: 0; animation: slide 12s infinite; opacity: 0; }
.tv__slides i:nth-child(2) { animation-delay: 4s; }
.tv__slides i:nth-child(3) { animation-delay: 8s; }
@keyframes slide { 0% { opacity: 0; transform: scale(1.02); } 6%, 33% { opacity: 1; } 40%, 100% { opacity: 0; transform: scale(1.1); } }
.tv__badge { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgb(20 14 38 / .72); backdrop-filter: blur(6px); font-size: .8rem; font-weight: 600; }
.tv__badge .i { color: var(--marigold); width: 14px; height: 14px; }
.tv__qr { position: absolute; right: 14px; bottom: 14px; width: 92px; padding: 8px; background: var(--flash); color: var(--night); border-radius: 10px; text-align: center; font-size: .62rem; font-weight: 700; }
.tv__qr div { width: 76px; height: 76px; margin-bottom: 4px; }
.tv__stand { width: 34%; height: 14px; margin: 0 auto; background: linear-gradient(#1b1628, #0f0b1a); border-radius: 0 0 12px 12px; }

/* Planes */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 1.8rem 1.5rem 1.5rem; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-lg); }
.plan h3 { font-size: 1.35rem; }
.plan__price { margin: .6rem 0 1.3rem; font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; letter-spacing: -.04em; line-height: 1; }
.plan ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .65rem; font-size: .95rem; color: var(--ink-soft); }
.plan li { display: flex; align-items: center; gap: .6rem; }
.plan li .i { color: var(--fucsia); width: 18px; height: 18px; }
.plan .btn { margin-top: auto; }
.plan--featured { background: var(--night); color: var(--flash); border-color: var(--night); box-shadow: 0 30px 60px -25px rgb(20 14 38 / .6); }
.plan--featured ul { color: rgb(255 247 234 / .78); }
.plan--featured li .i { color: var(--marigold); }
.plan__tag { position: absolute; top: -13px; left: 1.5rem; padding: 4px 12px; border-radius: 999px; background: var(--marigold); color: var(--night); font-size: .78rem; font-weight: 700; }

/* FAQ */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; }
.faq__list { display: grid; gap: .6rem; }
.faq details { border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper); transition: background .2s; }
.faq details[open] { background: var(--white); border-color: #d3cde5; }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.2rem; font-weight: 650; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 1.2rem; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 1.2rem 1.2rem; color: var(--ink-soft); }

/* Cierre */
.closing { background: var(--fucsia); color: #fff; padding: clamp(3rem, 7vw, 5rem) 0; }
.closing__row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.closing h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -.035em; max-width: 22ch; }
.closing .btn--primary { --btn-bg: var(--night); --btn-bd: var(--night); --btn-fg: var(--flash); box-shadow: none; }

/* Pie */
.site-footer { background: var(--night); color: rgb(255 247 234 / .7); padding: 3rem 0; font-size: .92rem; }
.site-footer__row { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: start; }
.site-footer .brand { color: var(--flash); }
.site-footer__brand p { margin-top: .6rem; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { color: var(--flash); }
.site-footer small { grid-column: 1 / -1; color: rgb(255 247 234 / .45); }

/* ==========================================================================
   Páginas de proceso (alta de evento, pago)
   ========================================================================== */
.page-flow { background: var(--paper); min-height: 100vh; }
.flow-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.3rem; }
.flow-top .brand .mark { color: var(--fucsia); }
.progress { display: flex; gap: .4rem; list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--ink-faint); }
.progress li { display: flex; align-items: center; gap: .4rem; }
.progress li + li::before { content: ""; width: 22px; height: 1.5px; background: #d6d1e6; }
.progress li.is-current { color: var(--ink); font-weight: 650; }
.progress li.is-done { color: var(--ok); }

.flow { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start; padding-bottom: 4rem; }
.flow h1 { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.035em; }
.flow__intro { margin: .6rem 0 2rem; color: var(--ink-soft); font-size: 1.05rem; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.3rem, 3vw, 2rem); }
.card + .card { margin-top: 1rem; }
.card h2 { font-size: 1.25rem; margin-bottom: 1.1rem; letter-spacing: -.02em; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
.form-grid .full { grid-column: 1 / -1; }

.slug-field { display: flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--white); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.slug-field:focus-within { border-color: var(--fucsia); box-shadow: 0 0 0 4px rgb(255 62 138 / .15); }
.slug-field input { border: 0 !important; box-shadow: none !important; min-width: 0; font-weight: 650; }
.slug-field span { display: flex; align-items: center; padding: 0 .9rem; background: var(--paper); color: var(--ink-soft); font-size: .92rem; white-space: nowrap; border-left: 1px solid var(--line); }
.slug-field.is-prefix span { border-left: 0; border-right: 1px solid var(--line); order: -1; }
.slug-status { display: flex; align-items: center; gap: .35rem; font-size: .86rem; min-height: 1.3em; }
.slug-status.is-ok { color: var(--ok); }
.slug-status.is-bad { color: var(--bad); }
.slug-status .i { width: 16px; height: 16px; }

.types { display: flex; flex-wrap: wrap; gap: .45rem; }
.types label { cursor: pointer; }
.types input { position: absolute; opacity: 0; pointer-events: none; }
.types span { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); font-size: .9rem; font-weight: 550; transition: all .15s; }
.types input:checked + span { background: var(--night); border-color: var(--night); color: var(--flash); }
.types input:focus-visible + span { outline: 3px solid var(--marigold); outline-offset: 2px; }
.types .i { width: 16px; height: 16px; }

.coupon-row { display: flex; gap: .5rem; }
.coupon-row input { text-transform: uppercase; }

.summary { position: sticky; top: 1.5rem; background: var(--night); color: var(--flash); border-radius: var(--r-lg); padding: 1.6rem; overflow: hidden; }
.summary::before { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -90px; border-radius: 50%; background: var(--fucsia); filter: blur(60px); opacity: .45; }
.summary > * { position: relative; }
.summary__plan { font-size: .9rem; color: rgb(255 247 234 / .65); }
.summary h2 { font-size: 1.7rem; margin: .2rem 0 1.2rem; }
.summary__url { display: flex; align-items: center; gap: .5rem; padding: .75rem .9rem; margin-bottom: 1.2rem; border-radius: var(--r-md); background: rgb(255 255 255 / .07); font-size: .9rem; overflow-wrap: anywhere; }
.summary__url .i { color: var(--marigold); }
.summary__url b { color: var(--marigold); }
.summary ul { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .5rem; font-size: .93rem; color: rgb(255 247 234 / .8); }
.summary li { display: flex; gap: .55rem; align-items: center; }
.summary li .i { width: 17px; height: 17px; color: var(--marigold); }
.summary__lines { border-top: 1px solid rgb(255 255 255 / .12); padding-top: 1rem; display: grid; gap: .45rem; font-size: .95rem; }
.summary__lines div { display: flex; justify-content: space-between; }
.summary__lines .is-discount { color: var(--marigold); }
.summary__total { font-family: var(--font-display); font-size: 1.9rem !important; font-weight: 800; letter-spacing: -.03em; margin-top: .3rem; }
.summary__change { display: inline-block; margin-top: 1rem; font-size: .88rem; color: rgb(255 247 234 / .65); }
.summary__secure { display: flex; gap: .5rem; align-items: center; margin-top: 1.2rem; font-size: .82rem; color: rgb(255 247 234 / .6); }
.summary__secure .i { width: 16px; height: 16px; }

/* Página de estado del pago */
.receipt { max-width: 620px; margin: 0 auto 4rem; }
.receipt__badge { width: 72px; height: 72px; margin: 0 auto 1.3rem; display: grid; place-items: center; border-radius: 50%; }
.receipt__badge .i { width: 34px; height: 34px; }
.receipt__badge--ok { background: var(--ok-bg); color: var(--ok); }
.receipt__badge--wait { background: var(--warn-bg); color: var(--warn); }
.receipt__badge--bad { background: var(--bad-bg); color: var(--bad); }
.receipt__badge--wait .i { animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.receipt__head { text-align: center; margin-bottom: 2rem; }
.receipt__head h1 { font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -.035em; }
.receipt__head p { margin-top: .7rem; color: var(--ink-soft); font-size: 1.05rem; }
.dl { display: grid; gap: .1rem; margin: 0; }
.dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.dl div:last-child { border-bottom: 0; }
.dl dt { color: var(--ink-soft); }
.dl dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.copy-box { display: flex; gap: .5rem; align-items: center; padding: .5rem .5rem .5rem 1rem; border: 1.5px dashed #cfc8e3; border-radius: var(--r-md); background: var(--paper); }
.copy-box code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.next-steps { display: grid; gap: .8rem; margin-top: 1rem; }
.next-steps a { display: flex; gap: .9rem; align-items: center; padding: 1rem; border: 1.5px solid var(--line); border-radius: var(--r-md); text-decoration: none; transition: border-color .15s, background .15s; }
.next-steps a:hover { border-color: var(--fucsia); background: #fff7fa; }
.next-steps .i { width: 22px; height: 22px; color: var(--fucsia); }
.next-steps b { display: block; }
.next-steps span { display: block; font-size: .88rem; color: var(--ink-soft); }
.stack { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.center { text-align: center; }
.muted { color: var(--ink-soft); }

/* Pantalla de estado genérica */
.page-status { min-height: 100vh; display: grid; place-items: center; padding: 2rem; background: var(--night); color: var(--flash); }
.status-card { max-width: 460px; text-align: center; display: grid; justify-items: center; gap: 1rem; }
.status-card .brand { margin-bottom: 1.5rem; }
.status-card__icon { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .07); color: var(--marigold); }
.status-card__icon .i { width: 34px; height: 34px; }
.status-card h1 { font-size: 2.2rem; letter-spacing: -.03em; }
.status-card p { color: rgb(255 247 234 / .72); font-size: 1.05rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 14ch; }
  .hero__scene { height: 500px; max-width: 560px; width: 100%; margin: 0 auto; }
  .party { grid-template-columns: 1fr; gap: 3rem; }
  .flow { grid-template-columns: 1fr; }
  .summary { position: static; order: -1; }
  .faq { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 820px) {
  .site-nav { display: none; }
  .perks__row { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 2.2rem 1.2rem; }
  .steps::before { display: none; }
  .closing__row { flex-direction: column; align-items: flex-start; }
  .progress li:not(.is-current) span { display: none; }
}
@media (max-width: 560px) {
  .shell { width: min(100% - 32px, var(--shell)); }
  .hero__scene { height: 440px; }
  .phone { width: 210px; height: 430px; transform: translateX(-45%); }
  .phone__cover { height: 130px; }
  .print--a { width: 150px; top: 30px; }
  .print--b { width: 140px; left: 0; }
  .qr-card { width: 150px; bottom: 40px; }
  .qr-card__code { width: 96px; height: 96px; }
  .perks__row, .steps, .form-grid { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1 1 100%; }
  .site-footer__row { grid-template-columns: 1fr; }
  .progress { display: none; }
}
.text-ok { color: var(--ok) !important; }
.text-bad { color: var(--bad) !important; }

/* ==========================================================================
   Momentia 2.1 — vitrina de estilos, comparación, opiniones, tipos de evento
   ========================================================================== */
.site-header__login { font-size: .9rem; text-decoration: none; color: rgb(255 247 234 / .78); white-space: nowrap; }
.site-header__login:hover { color: var(--flash); }
.site-footer__links--types { grid-column: 1 / -1; padding-bottom: 1.2rem; border-bottom: 1px solid rgb(255 255 255 / .08); }

/* Estilos */
.section--styles { background: linear-gradient(180deg, var(--paper), #fff 70%); }
.tabs__list { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.tabs__list button { border: 1.5px solid var(--line); background: var(--white); color: var(--ink-soft); padding: .6rem 1.15rem; border-radius: 999px; font-weight: 650; font-size: .93rem; cursor: pointer; transition: all .15s; }
.tabs__list button:hover { color: var(--ink); border-color: #d7d2e6; }
.tabs__list button[aria-selected="true"] { background: var(--night); border-color: var(--night); color: var(--flash); }
.styles-row { display: grid; grid-template-columns: repeat(3, minmax(0, 250px)); justify-content: center; gap: clamp(1rem, 3vw, 2.6rem); }
.styles-row[hidden] { display: none; }
.style-card { margin: 0; display: grid; gap: .9rem; text-align: center; animation: style-in .5s var(--ease) both; }
.style-card:nth-child(2) { animation-delay: .06s; } .style-card:nth-child(3) { animation-delay: .12s; }
@keyframes style-in { from { opacity: 0; transform: translateY(12px); } }
.style-card figcaption b { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.style-card figcaption span { font-size: .9rem; color: var(--ink-soft); }
.phone-frame { aspect-ratio: 9 / 18.5; border-radius: 34px; border: 7px solid #120d20; background: #120d20; overflow: hidden;
  box-shadow: 0 1px 0 1px #2b2440 inset, 0 40px 70px -35px rgb(20 14 38 / .55), 0 12px 24px -12px rgb(20 14 38 / .3); position: relative; }
.phone-frame::before { content: ""; position: absolute; top: 7px; left: 50%; translate: -50% 0; width: 32%; height: 18px; border-radius: 99px; background: #120d20; z-index: 3; }
.phone-frame .gmini { height: 100%; }

/* Comparación */
.compare-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: center; }
.compare-wrap .section__head { margin-bottom: 0; }
.compare { overflow-x: auto; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgb(20 14 38 / .35); }
.compare table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.compare th, .compare td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: center; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: .85rem; color: var(--ink-soft); font-weight: 650; }
.compare tbody th { text-align: left; font-weight: 550; }
.compare .compare__us { background: rgb(255 62 138 / .06); }
.compare thead .compare__us { color: var(--fucsia-deep); font-family: var(--font-display); font-size: 1rem; }
.cmp-yes, .cmp-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.cmp-yes { background: var(--fucsia); color: #fff; }
.cmp-no { background: var(--paper); color: #b9b3c9; }
.cmp-yes .i, .cmp-no .i { width: 15px; height: 15px; stroke-width: 3; }

/* Opiniones */
.numbers { display: flex; justify-content: center; gap: clamp(1.5rem, 6vw, 5rem); margin-bottom: 3rem; text-align: center; flex-wrap: wrap; }
.numbers b { display: block; font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.04em; color: var(--fucsia-deep); }
.numbers span { color: var(--ink-soft); }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.quote { margin: 0; padding: 1.6rem; border-radius: var(--r-lg); background: var(--paper); display: grid; gap: .9rem; align-content: start; }
.quote > .i { width: 26px; height: 26px; color: var(--fucsia); }
.quote blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.quote figcaption b { display: block; }
.quote figcaption span { font-size: .88rem; color: var(--ink-soft); }

/* Tipos de evento */
.evtypes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.type-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 1rem; align-items: center; padding: .7rem 1rem .7rem .7rem; border-radius: var(--r-lg);
  background: var(--white); border: 1px solid var(--line); text-decoration: none; transition: transform .15s var(--ease), box-shadow .15s; }
.type-card:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -24px rgb(20 14 38 / .4); }
.type-card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--tc) 14%, #fff); color: var(--tc); }
.type-card__icon .i { width: 22px; height: 22px; }
.style-card .gmini__grid i[class^="ph-"] { opacity: 1 !important; }
.type-card__txt b { display: block; font-size: 1.02rem; }
.type-card__txt span { font-size: .85rem; color: var(--ink-soft); }
.type-card > .i { color: var(--ink-faint); }

/* Planes */
.plan__fit { margin: -.4rem 0 1.2rem; font-size: .9rem; color: var(--ink-soft); }
.plan--featured .plan__fit { color: rgb(255 247 234 / .7); }
.plans__note { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.6rem; color: var(--ink-soft); font-size: .93rem; }
.plans__note .i { color: var(--ok); }

/* WhatsApp */
.wa-float { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.1rem .7rem .8rem; border-radius: 999px; background: #1fa855; color: #fff; text-decoration: none; font-weight: 650; font-size: .92rem;
  box-shadow: 0 14px 30px -10px rgb(10 80 40 / .55); transition: transform .15s var(--ease); }
.wa-float:hover { transform: translateY(-2px); }
.wa-float svg { width: 26px; height: 26px; }
.wa-btn { background: #1fa855 !important; color: #fff !important; border-color: #1fa855 !important; }

/* Página por tipo de evento */
.type-hero { background: linear-gradient(180deg, #fff, var(--paper)); padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.type-hero__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
.type-hero__crumb { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--ink-soft); }
.type-hero__crumb .i { color: var(--fucsia); width: 16px; height: 16px; }
.type-hero h1 { margin-top: 1.2rem; font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 1.02; letter-spacing: -.04em; max-width: 16ch; }
.type-hero .hero__lead { color: var(--ink-soft); }
.type-hero__phone { max-width: 290px; justify-self: center; width: 100%; transform: rotate(2deg); }

/* Extender */
.ext-options { display: grid; gap: .7rem; }
.ext-opt { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ext-opt input { accent-color: var(--fucsia); width: 18px; height: 18px; }
.ext-opt:has(input:checked) { border-color: var(--fucsia); box-shadow: 0 0 0 4px rgb(255 62 138 / .12); }
.ext-opt__body { flex: 1; display: grid; }
.ext-opt__body small { color: var(--ink-soft); }
.ext-opt__price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 750; }

@media (max-width: 1000px) {
  .compare-wrap, .type-hero__grid { grid-template-columns: 1fr; }
  .type-hero__phone { max-width: 250px; transform: none; }
}
@media (max-width: 820px) {
  .site-header__login { display: none; }
  .styles-row { grid-template-columns: repeat(3, minmax(220px, 1fr)); justify-content: start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 1rem 1.2rem; margin: 0 -1rem; }
  .style-card { scroll-snap-align: center; }
  .tabs__list { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .3rem; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none; }
  .tabs__list button { white-space: nowrap; }
}
@media (max-width: 560px) {
  .wa-float span { display: none; }
  .wa-float { padding: .8rem; }
}

/* Botones de galería de ejemplo */
.demo-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1rem; margin-top: 2.2rem; }
.demo-links__hint { width: 100%; text-align: center; font-size: .85rem; color: var(--ink-soft); }
.type-hero .demo-links, .section--styles .demo-links { margin-top: 2rem; }