/* Despeguía · encuestas (organizador e invitado) · mismo sistema que la landing: fondo cálido, Outfit + Epilogue, tarjetas blancas, botón oscuro en píldora.
   Se carga después de organizador.css (y de invitado.css) y sustituye su lenguaje visual:
   fondo blanco, bordes de 1px, radios de 12px, sombras suaves y un color de tema por celebración.
   La lógica (:target, :has(), JS) no cambia. */


:root {
  --paper: #F8F4EF; --ink: #1C1512; --muted: #6A5E56; --line: #E6DCD1; --line-strong: #CDBFAE;
  --peach: #FCEBE1; --brand: #D93800; --accent-text: #B82F00; --ok: #157E3E; --danger: #C0271D;
  --r: 16px; --r-lg: 24px;
  --shadow: 0 1px 3px rgba(0 0 0 / .08); --shadow-lg: 0 12px 30px -18px rgba(28 21 18 / .35);
  --f-display: 'Outfit', system-ui, sans-serif; --f-body: 'Epilogue', system-ui, sans-serif; --f-mono: 'Epilogue', system-ui, sans-serif;
}
body { font-family: var(--f-body); background: var(--paper); color: var(--ink); }
h1, h2, h3, h4, p { margin: 0; }

/* ─── Temas: un acento sobre fondo blanco ─── */
.quiz {
  --bg: #F8F4EF; --surf: #fff; --text: #1C1512; --muted: #6A5E56; --line: #E6DCD1;
  --acc: #D93800; --acc-t: #B82F00; --tint: #FCEBE1; --accent: var(--acc);
  --hl-bg: var(--tint); --hl-text: var(--acc-t);
  --on: var(--tint); --on-text: var(--text);
  --cta-bg: #1C1512; --cta-text: #fff;
  --ticket-bg: #fff; --ticket-text: var(--text);
  --range: var(--tint); --range-text: var(--text);
  --side-bg: var(--tint); --side-fg: var(--text); --side-dot: var(--acc);
  background: var(--bg);
}
.quiz:has(input[name="tema"]:checked):has(.screen:target:not(#paso-1)), .quiz.t-soltera {
  --acc: #D93800; --acc-t: #B82F00; --tint: #FCEBE1; --side-bg: var(--tint); --side-fg: var(--text); --side-dot: var(--acc);
}
.quiz:has(#t-divorcio:checked):has(.screen:target:not(#paso-1)), .quiz.t-divorcio {
  --acc: #1F4FD8; --acc-t: #1B3FB0; --tint: #EAF0FF;
  --bg: #F8F4EF; --surf: #fff; --text: #1C1512; --muted: #6A5E56; --line: #E6DCD1;
  --hl-bg: var(--tint); --hl-text: var(--acc-t); --on: var(--tint); --on-text: var(--text);
  --cta-bg: #1C1512; --cta-text: #fff; --ticket-bg: #fff; --ticket-text: var(--text);
  --range: var(--tint); --range-text: var(--text); --side-bg: var(--tint); --side-fg: var(--text); --side-dot: var(--acc);
}
.quiz:has(#t-cumple:checked):has(.screen:target:not(#paso-1)), .quiz.t-cumple {
  --acc: #B45309; --acc-t: #92400E; --tint: #FFF1D6;
  --bg: #F8F4EF; --surf: #fff; --text: #1C1512; --muted: #6A5E56; --line: #E6DCD1;
  --hl-bg: var(--tint); --hl-text: var(--acc-t); --on: var(--tint); --on-text: var(--text);
  --cta-bg: #1C1512; --cta-text: #fff; --ticket-bg: #fff; --ticket-text: var(--text);
  --range: var(--tint); --range-text: var(--text); --side-bg: var(--tint); --side-fg: var(--text); --side-dot: var(--acc);
}

/* ─── Movimiento sobrio ─── */
@keyframes stageIn { from { translate: 24px 0; opacity: 0; } }
@keyframes cardIn { from { translate: 0 10px; scale: .98; opacity: 0; } }
@keyframes slotIn { from { scale: .96; opacity: 0; } }
@keyframes react { 0% { translate: 0 8px; opacity: 0; } 15%, 85% { translate: 0 0; opacity: 1; } 100% { opacity: 0; } }
.screen:target .stage, .quiz:not(:has(.screen:target)) #paso-1 .stage { animation-timing-function: ease-out; }

/* ─── Texto ─── */
body .quiz * { text-transform: none; }
body .quiz :is(h1, h2, h3, b, strong, .cta, .theme__title, .tile--big > span, .tile--choice b, .tile--city > span, .tile--month > span,
  .portrait p, .quick, .cal__month, .hl-box strong, .rules__title, .bote__tier, .bote__price, .tier__title, .slot b, .pass__data dd,
  .invite__data dd, .invite__stamp, .tile--avail > span, .tile--day b, .vcard__title, .vcard__num, .vcard__stamp, .vote__btn,
  .done-card p, .arsenal b, .side__big, .side__title, .libre, .count__num input, .qcard__title) { font-weight: 800; letter-spacing: -.01em; }
.quiz :is(.lbl, .mono, .q-step, .qcard__kicker, .inv-kicker, .theme__kicker, .pill, .q-pct, .side__kicker, .side__tag, .row small,
  .vcard__kind, .vcard__foot, .lock-lbl, .vrow__lbl, .arsenal small, .portrait span, .done-card span, .q-secondary, .link-btn, .count__num b,
  .cal__wd, .day, .slot, .pass__head .mono, .pass__data dt, .invite__head, .invite__data dt, .deadline, .tile--day small) { font-family: var(--f-body); letter-spacing: 0; }
.quiz .qcard__kicker, .quiz .inv-kicker, .quiz .theme__kicker { font-size: 13px; font-weight: 700; color: var(--acc-t); }
.q-main h1 { font-size: 30px; line-height: 1.1; max-width: 420px; }
.screen--q h1 { font-size: 28px; }
.q-main .inv-hero { font-size: 38px; line-height: 1.05; }
.quiz--inv .q-main h1:not(.inv-hero) { font-size: 28px; }
.hl { background: none; color: inherit; padding: 0; } /* los títulos llevan un solo color */
.q-sub, .hint { color: var(--muted); font-weight: 500; }
.lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
.q-step { font-size: 14px; font-weight: 600; color: var(--muted); }

/* ─── Cabecera ─── */
.q-head { padding-top: 16px; }
.icon-btn { border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; }
.icon-btn:hover { background: var(--paper); color: var(--text); }
.segs li, .segs--inv span { height: 4px; border: 0; border-radius: 2px; background: var(--line); }
.q-bar--brand .logo, .q-bar--brand .logo span { font-size: 24px; }
.q-bar--brand .logo { color: var(--brand); }
.q-bar--brand .logo span { color: var(--ink); }
.pill { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; font-weight: 600; }
.deco, .side__deco, .theme__card > svg, .theme__card > i, .invite__stamp { display: none !important; }

/* ─── Campos y opciones ─── */
.card, .linkbox, .vrow, .secret { border: 1px solid var(--line-strong); border-radius: var(--r); background: #fff; }
.field { height: 52px; border: 1px solid var(--line-strong); border-radius: var(--r); font-size: 17px; font-weight: 600; }
.field:focus-visible { outline: 3px solid var(--acc); outline-offset: 1px; }
textarea.field { font-weight: 500; }

.tile > span, .row > span {
  border: 1px solid var(--line-strong); border-radius: var(--r); background: #fff; font-weight: 700;
  transition: background-color .15s, box-shadow .15s, border-color .15s;
}
.tile:hover > span { box-shadow: none; border-color: var(--acc); }
.tile input:checked + span, .rules--yes input:checked + span {
  background: var(--tint); color: var(--text); rotate: none; scale: none; border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc);
}
.rules--no input:checked + span { background: #FDECEA; color: #8F1B13; border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); rotate: none; scale: none; }
.row input:checked + span { rotate: none; scale: none; }
.tile input:focus-visible + span, .row input:focus-visible + span { outline: 3px solid var(--acc); outline-offset: 2px; }
.tile--big > span, .tile--city > span, .tile--month > span { font-size: 18px; }
.tile--choice b { font-size: 17px; }
.tile--choice small, .row small { font-weight: 500; opacity: 1; color: var(--muted); }
.row small { font-size: 12px; }
.row__box { border-radius: 6px; }
.tile--avail > span { font-size: 16px; }
.tile--avail input[value="no"]:checked + span { background: #FDECEA; color: #8F1B13; border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.tile--day b { font-size: 22px; }
.tips .tile:nth-child(odd) input:checked + span, .tips .tile:nth-child(even) input:checked + span { rotate: none; scale: none; }
.tips .tile > span { border-radius: 999px; }

/* ─── Paso 1 · motivo ─── */
.theme__card { min-height: 112px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); rotate: none !important; transition: box-shadow .15s, border-color .15s, opacity .2s; }
.theme--soltera .theme__card { background: #FCEBE1; color: var(--ink); }
.theme--divorcio .theme__card { background: #EFE7DD; color: var(--ink); }
.theme--cumple .theme__card { background: #FFF1D6; color: var(--ink); }
.theme input:checked + .theme__card { scale: none; box-shadow: 0 0 0 2px var(--ink); border-color: var(--acc); }
.theme--soltera input:checked + .theme__card { box-shadow: 0 0 0 2px #D93800; border-color: var(--acc); }
.theme--divorcio input:checked + .theme__card { box-shadow: 0 0 0 2px #1C1512; border-color: #1C1512; }
.theme--cumple input:checked + .theme__card { box-shadow: 0 0 0 2px #1C1512; border-color: #1C1512; }
.themes:has(:checked) input:not(:checked) + .theme__card { opacity: .6; }
.theme__title { font-size: 24px; line-height: 1.1; }
.theme__tag { font-size: 14px; font-weight: 500; color: #444; }
.theme__kicker { color: #444; }

/* ─── Paso 2 · cartas ─── */
.dots a, .cdots i { border: 0; border-radius: 50%; background: var(--line); }
.dots a:has(~ [aria-current]), .cdots .is-si { background: var(--ink); }
.dots a[aria-current], .cdots .is-cur { width: 22px; border-radius: 6px; background: var(--acc); }
.cdots .is-no { background: var(--danger); }
.deck::before, .deck::after { border: 1px solid var(--line); border-radius: var(--r-lg); rotate: none; }
.deck::before { inset: 10px 8px 6px; background: var(--paper); }
.deck::after { inset: 18px 0 0 14px; background: #fff; }
.qcard { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.qcard__title { font-size: 26px; line-height: 1.12; }
.ans > span { font-size: 16px; }
.ans input:checked + span { box-shadow: inset 0 0 0 1px var(--acc); }
.meter > i { border-radius: 2px; border-width: 1.5px; }
.ans input:checked + span .meter { --fill: var(--acc); }
.portrait, .done-card, .hl-box { background: var(--tint); color: var(--text); border-radius: var(--r); rotate: none; }
.portrait p, .done-card p { font-size: 20px; line-height: 1.2; color: var(--acc-t); }
.portrait span, .done-card span, .hl-box .mono { font-size: 13px; font-weight: 600; color: var(--muted); }
.hl-box strong { font-size: 20px; color: var(--acc-t); }
.hl-box > span:last-child { font-weight: 600; }

/* ─── Paso 3 · grupo, ciudad y fecha ─── */
.count__num input { font-size: 44px; line-height: 1; }
.count__num input:focus-visible { outline-color: var(--acc); }
.count__num b { font-size: 14px; font-weight: 600; color: var(--muted); }
.sq-btn { border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; }
.sq-btn--on { background: var(--ink); color: #fff; border-color: var(--ink); }
.quick { min-height: 48px; border: 1px solid var(--line-strong); border-radius: var(--r); font-size: 18px; background: #fff; }
.quick[aria-pressed="true"] { background: var(--tint); color: var(--text); rotate: none; border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.cal__month { font-size: 18px; }
.cal__nav { border: 1px solid var(--line-strong); border-radius: 50%; }
.cal__wd { font-size: 13px; }
.cal__wd .wk { color: var(--acc-t); }
.day { border: 0; border-radius: 10px; font-size: 15px; }
.day:hover:not(:disabled) { background: var(--paper); }
.day--wk { font-weight: 700; text-decoration: none; }
.day--in { background: var(--tint); border-radius: 0; }
.day--edge { background: var(--ink); color: #fff; border-radius: 50%; border: 0; }
.reveal { rotate: none; }

/* ─── Paso 4 · sí o sí / ni de coña ─── */
.rules__title { font-size: 20px; }
.row > span { font-size: 14px; }

/* ─── Paso 5 · bote ─── */
.bote__tier { font-size: 20px; color: var(--acc-t); }
.bote__price { font-size: 44px; line-height: 1; }
.runway__track::before, .runway__fill { height: 6px; border: 0; border-radius: 999px; }
.runway__track::before { background: var(--line); }
.runway__fill { background: var(--ink); transition: width .25s ease-out; }
.runway__thumb {
  top: 50%; translate: 0 -50%; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; rotate: none;
  background: #fff; box-shadow: var(--shadow-lg); left: calc(var(--p) * (100% - 28px)); transition: left .25s ease-out;
}
.runway__stops label { font-family: var(--f-body); font-size: 13px; font-weight: 600; }
.runway__stops input:checked + span { text-decoration: underline 2px var(--ink); font-weight: 800; }
.tier { padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.tier__title { font-size: 20px; line-height: 1.15; }
.tier__copy { font-weight: 500; }
.slot { rotate: none !important; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--muted); font-size: 12px; font-weight: 600; animation-duration: .25s; }
.slot b { font-size: 15px; line-height: 1.2; color: var(--ink); }
.slot--premium { background: var(--ink); border-color: var(--acc); color: #ddd; }
.slot--premium b { color: #fff; }
.slot--extra { background: var(--tint); border-color: var(--acc); color: var(--acc-t); }
.slot--extra b { color: var(--acc-t); }
.slot--free { background: none; border-style: dashed; scale: none; opacity: 1; }

/* ─── Paso 6 y 7 ─── */
.consent input { accent-color: var(--acc); }
.pass { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; rotate: none; box-shadow: var(--shadow-lg); }
.pass__head { border-bottom: 1px solid var(--line); }
.pass .logo { color: var(--brand); }
.pass .logo span { color: var(--ink); }
.pass__data dt { font-size: 13px; font-weight: 600; color: var(--muted); opacity: 1; }
.pass__data dd { font-size: 18px; line-height: 1.2; }
.pass__head .mono { font-size: 13px; font-weight: 600; color: var(--muted); }
.pass--receipt .pass__data dd { font-size: 18px; }
.pass--receipt .logo span { color: var(--ink); }
.linkbox { font-size: 14px; font-weight: 600; }

/* ─── Pie y botón ─── */
.q-foot { border-top: 1px solid var(--line); background: #fff; }
.cta { border-radius: 999px; min-height: 56px; font-family: var(--f-body); font-size: 17px; font-weight: 700; letter-spacing: 0; transition: background-color .15s, box-shadow .15s, opacity .3s; }
.cta:hover { translate: 0 -2px; box-shadow: none; background: #3A2E27; }
.cta--ok:hover { background: #0F6B33; }
.cta--ok { background: var(--ok); color: #fff; }
.q-secondary, .link-btn { font-size: 15px; font-weight: 700; color: var(--text); }
.q-foot button.q-secondary { color: var(--text); }

/* ─── Reacción: aviso breve ─── */
[data-react]:has(input:checked:focus)::after, .day[data-react]:focus::after, .react.is-on {
  background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
  font: 700 15px/1.3 var(--f-body); letter-spacing: 0; animation: react 1.6s ease-out both;
}

/* ─── Invitado: invitación y votación ─── */
.invite { --inv-bg: #FFF1EC; --inv-text: #1C1512; border: 1px solid var(--line); border-radius: var(--r-lg); rotate: none; box-shadow: var(--shadow-lg); }
.t-divorcio .invite { --inv-bg: #EFE7DD; --inv-text: #1C1512; }
.t-cumple .invite { --inv-bg: #FFF7DB; --inv-text: #1C1512; }
.invite__head { border-bottom: 1px dashed var(--line-strong); font-size: 13px; font-weight: 600; }
.invite__data dt { font-size: 13px; font-weight: 600; opacity: 1; color: var(--muted); }
.invite__data dd { font-size: 20px; line-height: 1.2; }
.voters__faces i { border: 2px solid #fff; border-radius: 50%; rotate: none !important; color: var(--ink); font: normal 700 12px var(--f-body); }
.voters__faces i:nth-child(1) { background: #FFE3D8; }
.voters__faces i:nth-child(2) { background: #DCEBFF; }
.voters__faces i:nth-child(3) { background: #D9F2E6; }
.t-divorcio .voters__faces i:nth-child(4), .voters__faces i:nth-child(4) { background: var(--paper); color: var(--text); }
.deadline { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--text); font-size: 13px; font-weight: 600; }
.vinculos b { font-size: 16px; }

[data-c="accent"] { --c-bg: #FFF1EC; --c-fg: #1C1512; }
[data-c="sign"] { --c-bg: #FFF7DB; --c-fg: #1C1512; }
[data-c="ink"] { --c-bg: #EFE7DD; --c-fg: #1C1512; }
.vdeck__back { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.vdeck__back:nth-child(1), .vdeck__back:nth-child(2) { rotate: none; }
.vdeck__back:nth-child(1) { inset: 10px 8px 6px; }
.vdeck__back:nth-child(2) { inset: 18px 0 0 14px; }
.vcard { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); rotate: none; }
.vcard__kind { border: 0; border-radius: 999px; background: rgba(255 255 255 / .85); padding: 5px 12px; font-size: 13px; font-weight: 700; }
.vcard__num { font-size: 40px; opacity: .25; }
.vcard__title { font-size: 30px; line-height: 1.1; }
.vcard__foot { border-top: 1px dashed var(--line-strong); font-size: 13px; font-weight: 600; }
.vcard__stamp { border: 3px solid currentColor; border-radius: 10px; font-size: 26px; background: rgba(255 255 255 / .9); }
.vote__btn { border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: none; font-size: 15px; font-weight: 700; transition: background-color .15s, border-color .15s; }
.vote__btn:hover { border-color: var(--acc); }
.vote__btn:active { translate: none; scale: .97; }
.vote__btn--no { background: #FDECEA; color: #8F1B13; border-color: #F3C4BF; }
.vote__btn--si { background: var(--ink); color: #fff; border-color: var(--ink); }
.vrow--si { background: var(--tint); color: var(--text); border-color: var(--acc); }
.vrow--no { background: #FDECEA; color: #8F1B13; border-color: var(--danger); }
.vrow__mark { border-radius: 6px; }

/* Bote del invitado: tramo bloqueado hasta el mínimo; solo sube */
.slide { height: 40px; }
.slide__track, .slide__lock, .slide__fill { height: 6px; border: 0; border-radius: 999px; }
.slide__track { background: var(--line); }
.slide__lock { background: var(--line-strong); opacity: 1; }
.slide__fill { background: var(--ink); }
.slide__thumb {
  width: 28px; height: 28px; left: calc(var(--p) * 100% - 14px); border: 1px solid var(--line-strong); border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-lg); color: var(--ink);
}
.slide.is-up .slide__thumb { background-color: #fff; rotate: none; border-color: var(--acc); }
.slide__input:focus-visible ~ .slide__thumb { outline: 3px solid var(--acc); outline-offset: 3px; }
.slide__legend { margin-top: 0; }
.lock-lbl { font-size: 13px; font-weight: 600; }

.secret { transition: background-color .2s, border-color .2s; }
.secret:has(input:checked) { background: var(--tint); color: var(--text); border-color: var(--acc); }
.secret__sw { border: 0; border-radius: 999px; width: 48px; height: 28px; background: var(--line-strong); }
.secret__sw::after { top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.secret input:checked + .secret__sw { background: var(--acc); }
.secret input:checked + .secret__sw::after { left: 23px; }
.secret small { font-weight: 500; opacity: 1; color: var(--muted); }

.prog { height: 10px; border: 0; border-radius: 999px; background: var(--line); }
.prog::before { background: var(--acc); border-radius: 999px; }
.arsenal a, .arsenal a + a { border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--text); rotate: none; }
.arsenal a:hover { translate: none; box-shadow: var(--shadow-lg); border-color: transparent; }
.arsenal small { font-size: 13px; font-weight: 600; color: var(--muted); }
.arsenal b { font-size: 17px; line-height: 1.2; }

/* ─── Escritorio: panel lateral claro ─── */
@media (min-width: 900px) {
  .side { background: var(--side-bg); color: var(--side-fg); border-right: 1px solid var(--line); padding: 40px 48px; }
  .side .logo { color: var(--brand); font-size: 28px; }
  .side .logo span { color: var(--ink); }
  .side__tag { border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; background: #fff; }
  .side__kicker { font-size: 14px; font-weight: 700; color: var(--acc-t); }
  .side__big { font-size: 88px; line-height: 1; color: var(--ink); letter-spacing: -.04em; }
  .side__title { font-size: 34px; line-height: 1.1; }
  .side__quote { font-size: 17px; font-weight: 500; color: #333; opacity: 1; }
  .side__steps li { border: 0; border-radius: 12px; font-size: 16px; font-weight: 700; opacity: .75; }
  .side__steps span { font-size: 13px; }
  .side__steps .is-done { opacity: 1; }
  .side__steps [aria-current] { background: #fff; box-shadow: var(--shadow); opacity: 1; }
  .side__steps [aria-current]::after { content: "→"; }
}

/* Pantallas bajas */
@media (max-height: 740px) {
  .q-main h1 { font-size: 26px; }
  .screen--q h1 { font-size: 24px; }
  .q-main .inv-hero { font-size: 32px; }
  .qcard__title { font-size: 22px; }
  .vcard__title { font-size: 24px; }
  .bote__price { font-size: 36px; }
}



/* ─── Ajustes finales de la encuesta ─── */
.logo { font-family: var(--f-display); font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.logo span { color: var(--ink); }
.q-main h1, .qcard__title, .side__title, .vcard__title, .inv-hero { font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.06; text-wrap: balance; }
.q-step { font-family: var(--f-body); font-size: 14px; }
.side__kicker { color: var(--ink); font-weight: 600; }
.side__big { font-family: var(--f-display); font-weight: 800; color: var(--ink); }
.progress, .segs li { background: var(--line); }
.q-sub { font-size: 16px; }
.cta--gate { opacity: .4; }
@media (max-height: 740px) { .q-main h1 { font-size: 26px; } }

.theme__kicker { display: none; }
.theme__card { padding: 20px; min-height: 0; }
.theme__tag { max-width: 36em; }
.side .logo, .side .logo span, .q-bar--brand .logo, .q-bar--brand .logo span, .pass .logo, .pass .logo span { color: var(--ink); }
.deck::before, .deck::after { display: none; }
.deck { padding: 0; }
.voters__faces i, .voters__faces i:nth-child(n) { color: var(--ink); }

/* ─── Rediseño estructural ─── */

/* Ciudad: tarjetas con foto (las mismas que en la landing) */
.tile--city > span {
  display: flex; align-items: flex-end; min-height: 150px; padding: 10px;
  border: 1px solid var(--line); border-radius: 20px; background: #EADCCD center / cover no-repeat;
  transition: transform .2s ease-out;
}
.tile--city:has(input[value="Madrid"]) > span { background-image: url(../img/madrid.jpg); }
.tile--city:has(input[value="Málaga"]) > span { background-image: url(../img/malaga.jpg); }
.tile--city:has(input[value="Sevilla"]) > span { background-image: url(../img/sevilla.jpg); }
.tile--city > span b { padding: 5px 14px; border-radius: 999px; background: #fff; font-family: var(--f-display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.tile--city input:checked + span { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--ink); border-color: var(--ink); background-color: #EADCCD; }

/* Panel lateral: título del paso y foto enmarcada, sin lista de pasos */
@media (min-width: 900px) {
  .side { justify-content: flex-start; gap: 28px; }
  .side__steps { display: none; }
  .side__now { margin-top: 2vh; }
  .side__big { font-size: 72px; }
  .side__title { font-size: 40px; max-width: 14ch; }
  .side::after {
    content: ""; position: absolute; right: 48px; bottom: 40px; width: min(34%, 190px); aspect-ratio: 4 / 5;
    border: 6px solid #fff; border-radius: 22px; background: #EADCCD url(../img/portada.jpg) center / cover; rotate: 3deg;
    box-shadow: 0 18px 36px -22px rgba(28 21 18 / .45);
  }
  .q-main { display: flex; flex-direction: column; }
  .q-main > .stage { margin-block: auto; }
}
[data-react]::after, [data-react]:has(input:checked:focus)::after, .react.is-on { text-transform: none; font-family: var(--f-body); font-size: 15px; font-weight: 700; letter-spacing: 0; }

/* Respuestas visuales: set de iconos propio (img/ico), mismo trazo, fondo melocotón y punto naranja */
.tile:has(input[name=vinculo], input[name=disponibilidad], input[name=vibe], input[name=chivatazos], input[name=fiesta], input[name=gusto], input[name=show], input[name=aventura], input[name=horario], input[name=ciudad_modo], input[name=fecha_modo], input[name=pron]) > span::before { content: ""; display: block; width: 44px; height: 44px; flex-shrink: 0; background: var(--ico) center / contain no-repeat; }
.tile--choice > span, .tile--avail > span, label.tile:has(input[name=vibe]) > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
label.tile:has(input[name=vibe]) > span { padding-block: 16px; }
.ans > span { display: flex; align-items: center; gap: 14px; }
.ans .meter { display: none; }
.ans > span::before { width: 36px; height: 36px; }
.tips .tile > span { display: flex; align-items: center; gap: 10px; border-radius: 999px; }
.tips .tile > span::before { width: 32px; height: 32px; }
.tile:has(input[name=vinculo][value="bff"]) { --ico: url(../img/ico/heart.svg); }
.tile:has(input[name=vinculo][value="familia"]) { --ico: url(../img/ico/house.svg); }
.tile:has(input[name=vinculo][value="pandilla"]) { --ico: url(../img/ico/people.svg); }
.tile:has(input[name=vinculo][value="uni"]) { --ico: url(../img/ico/cap.svg); }
.tile:has(input[name=vinculo][value="curro"]) { --ico: url(../img/ico/coffee.svg); }
.tile:has(input[name=vinculo][value="plus"]) { --ico: url(../img/ico/ticket.svg); }
.tile:has(input[name=disponibilidad][value="si"]) { --ico: url(../img/ico/smile.svg); }
.tile:has(input[name=disponibilidad][value="no"]) { --ico: url(../img/ico/sad.svg); }
.tile:has(input[name=vibe][value="playa"]) { --ico: url(../img/ico/wave.svg); }
.tile:has(input[name=vibe][value="ciudad"]) { --ico: url(../img/ico/city.svg); }
.tile:has(input[name=vibe][value="naturaleza"]) { --ico: url(../img/ico/tree.svg); }
.tile:has(input[name=vibe][value="sorpresa"]) { --ico: url(../img/ico/gift.svg); }
.tile:has(input[name=fiesta][value="0"]) { --ico: url(../img/ico/sofa.svg); }
.tile:has(input[name=fiesta][value="1"]) { --ico: url(../img/ico/beer.svg); }
.tile:has(input[name=fiesta][value="2"]) { --ico: url(../img/ico/neutral.svg); }
.tile:has(input[name=fiesta][value="3"]) { --ico: url(../img/ico/disco.svg); }
.tile:has(input[name=fiesta][value="4"]) { --ico: url(../img/ico/sunrise.svg); }
.tile:has(input[name=gusto][value="0"]) { --ico: url(../img/ico/bread.svg); }
.tile:has(input[name=gusto][value="1"]) { --ico: url(../img/ico/bowl.svg); }
.tile:has(input[name=gusto][value="2"]) { --ico: url(../img/ico/smile.svg); }
.tile:has(input[name=gusto][value="3"]) { --ico: url(../img/ico/cubiertos.svg); }
.tile:has(input[name=gusto][value="4"]) { --ico: url(../img/ico/star.svg); }
.tile:has(input[name=show][value="0"]) { --ico: url(../img/ico/eyeoff.svg); }
.tile:has(input[name=show][value="1"]) { --ico: url(../img/ico/mask.svg); }
.tile:has(input[name=show][value="2"]) { --ico: url(../img/ico/half.svg); }
.tile:has(input[name=show][value="3"]) { --ico: url(../img/ico/music.svg); }
.tile:has(input[name=show][value="4"]) { --ico: url(../img/ico/mic.svg); }
.tile:has(input[name=aventura][value="0"]) { --ico: url(../img/ico/sofa.svg); }
.tile:has(input[name=aventura][value="1"]) { --ico: url(../img/ico/loop.svg); }
.tile:has(input[name=aventura][value="2"]) { --ico: url(../img/ico/wave.svg); }
.tile:has(input[name=aventura][value="3"]) { --ico: url(../img/ico/compass.svg); }
.tile:has(input[name=aventura][value="4"]) { --ico: url(../img/ico/parachute.svg); }
.tile:has(input[name=horario][value="0"]) { --ico: url(../img/ico/coffee.svg); }
.tile:has(input[name=horario][value="1"]) { --ico: url(../img/ico/sun.svg); }
.tile:has(input[name=horario][value="2"]) { --ico: url(../img/ico/neutral.svg); }
.tile:has(input[name=horario][value="3"]) { --ico: url(../img/ico/sunset.svg); }
.tile:has(input[name=horario][value="4"]) { --ico: url(../img/ico/moon.svg); }
.tile:has(input[name=chivatazos][value="madrugar"]) { --ico: url(../img/ico/alarm.svg); }
.tile:has(input[name=chivatazos][value="marisco"]) { --ico: url(../img/ico/fish.svg); }
.tile:has(input[name=chivatazos][value="dosmil"]) { --ico: url(../img/ico/cassette.svg); }
.tile:has(input[name=chivatazos][value="rosalia"]) { --ico: url(../img/ico/music.svg); }
.tile:has(input[name=chivatazos][value="disfraz"]) { --ico: url(../img/ico/mask.svg); }
.tile:has(input[name=chivatazos][value="karaoke"]) { --ico: url(../img/ico/mic.svg); }
.tile:has(input[name=chivatazos][value="bodas"]) { --ico: url(../img/ico/ring.svg); }
.tile:has(input[name=chivatazos][value="brunch"]) { --ico: url(../img/ico/plate.svg); }
.tile:has(input[name=ciudad_modo][value="si"]) { --ico: url(../img/ico/city.svg); }
.tile:has(input[name=ciudad_modo][value="rec"]) { --ico: url(../img/ico/compass.svg); }
.tile:has(input[name=fecha_modo][value="si"]) { --ico: url(../img/ico/calendar.svg); }
.tile:has(input[name=fecha_modo][value="no"]) { --ico: url(../img/ico/neutral.svg); }
.side__tag, .invite__stamp { display: inline-flex; align-items: center; gap: 6px; }
.side__tag::before { content: ""; width: 20px; height: 20px; background: url(../img/ico/lock.svg) center / contain no-repeat; }

/* Motivo de la celebración: un icono grande por opción */
.theme__card { position: relative; padding-right: 112px; min-height: 120px; }
.theme__card::after { content: ""; position: absolute; right: 18px; top: 50%; width: 80px; height: 80px; translate: 0 -50%; background: var(--ico) center / contain no-repeat; }
.theme--soltera { --ico: url(../img/ico/ring-w.svg); }
.theme--divorcio { --ico: url(../img/ico/rings.svg); }
.theme--cumple { --ico: url(../img/ico/cake.svg); }
@media (max-width: 380px) { .theme__card { padding-right: 96px; } .theme__card::after { width: 64px; height: 64px; right: 14px; } }
.tile:has(input[name=pron][value="ella"]) { --ico: url(../img/ico/ella.svg); }
.tile:has(input[name=pron][value="el"]) { --ico: url(../img/ico/el.svg); }
.tile--big:has(input[name=pron]) > span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-block: 14px; }
.tile--big:has(input[name=pron]) > span { height: auto; min-height: 104px; justify-content: center; }
.tile--big:has(input[name=pron]) > span::before { width: 48px; height: 48px; }

/* Escritorio: las preguntas cortas llenan el hueco con tarjetas grandes (organizador) */
@media (min-width: 900px) {
  .q-main { padding-inline: 8px; }
  .quiz:not(.quiz--inv) .tile--choice > span, .quiz:not(.quiz--inv) .tile--avail > span { min-height: 210px; gap: 12px; }
  .quiz:not(.quiz--inv) .tile--choice > span::before { width: 76px !important; height: 76px !important; }
  .quiz:not(.quiz--inv) .tile--choice b { font-size: 24px; }
  .quiz:not(.quiz--inv) .tile--choice small { font-size: 16px; }
  .tile--big:has(input[name=pron]) > span { min-height: 190px; font-size: 24px; }
  .tile--big:has(input[name=pron]) > span::before { width: 72px !important; height: 72px !important; }
  label.tile:has(input[name=vibe]) > span { min-height: 170px; font-size: 20px; }
  label.tile:has(input[name=vibe]) > span::before { width: 64px !important; height: 64px !important; }
  .ans > span { min-height: 68px; font-size: 19px; gap: 18px; }
  .ans > span::before { width: 48px !important; height: 48px !important; }
  .tips .tile > span { min-height: 56px; font-size: 17px; }
  .tips .tile > span::before { width: 40px !important; height: 40px !important; }
  .tile--city > span { min-height: 230px; }
  @media (max-height: 700px) { .ans > span { min-height: 56px; } }
}

/* Contador "Pregunta X de Y": legible y separado del título */
.q-count { gap: 12px; margin: 14px 0 12px; }
.q-count .lbl { font-size: 14px; font-weight: 700; color: var(--ink); }
@media (max-width: 480px) { .q-count { margin: 12px 0 10px; } .q-count .lbl { font-size: 13px; } }

/* Móvil (estilo Duolingo): pregunta arriba, opciones abajo en la zona del pulgar */
@media (max-width: 899px) {
  .q-main { display: flex; flex-direction: column; }
  .q-main > .stage { flex: 1; display: flex; flex-direction: column; margin-block: 0; }
  .q-main > .stage > :last-child { margin-top: auto; }
}

/* Slider del bote: arrastrable, con pulgar grande e iconos */
.runway { grid-template-rows: 44px auto; row-gap: 8px; }
.runway__range { grid-area: 1 / 1; position: relative; z-index: 2; width: 100%; height: 44px; margin: 0; opacity: 0; cursor: grab; touch-action: pan-y; }
.runway__track::before, .runway__fill { height: 8px; }
.runway__thumb { width: 32px; height: 32px; left: calc(var(--p) * (100% - 32px)); border: 2px solid var(--ink); box-shadow: 0 4px 12px -4px rgba(18 15 14 / .45); }
.runway__fill { width: calc(var(--p) * (100% - 32px) + 16px); background: var(--acc); }
.runway__range:active ~ .runway__stops, .runway:has(.runway__range:active) .runway__thumb { scale: 1.12; }
.runway__stops label { flex-direction: column; align-items: center; gap: 4px; }
.runway__stops label span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.runway__stops label img { opacity: .45; transition: opacity .2s, scale .2s; }
.runway__stops input:checked + span img { opacity: 1; scale: 1.15; }

/* Marca en móvil: el aside con el logo solo existe en escritorio */
@media (max-width: 899px) {
  .q-head::before {
    content: "Despeguía"; align-self: center; line-height: 1;
    font-family: var(--f-display); font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--brand, var(--ink));
  }
  .q-head { gap: 10px; }
}

/* Bote: las paradas van debajo de la pista, sin solaparla */
.runway__stops { grid-area: 2 / 1; align-items: start; }
.runway__stops label { align-items: flex-start; justify-content: center; padding-top: 2px; }
.runway__stops label span { text-align: center; }
.runway__stops label img { width: 24px; height: 24px; }

/* organizador.css oculta `.runway input` (pointer-events: none, 1px): el range necesita ganarle */
.runway .runway__range { position: relative; width: 100%; height: 44px; opacity: 0; pointer-events: auto; }

/* Bote: pista inset un 10 % por lado para que cada parada caiga justo bajo su etiqueta (5 columnas) */
.runway__track, .runway .runway__range { margin-inline: 10%; width: 80%; }
.runway__track::before { left: -12px; right: -12px; }
.runway__fill { left: -12px; width: calc(var(--p) * 100% + 12px); }
.runway__thumb { left: calc(var(--p) * 100% - 16px); }
.runway__stops label:first-child, .runway__stops label:last-child { justify-content: center; }
.runway__stops { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.runway__stops label span { font-size: 12px; }
.runway__stops label, .runway__stops label:first-child, .runway__stops label:last-child { align-items: center; justify-content: flex-start; }

/* Bote: slider NATIVO y visible (más robusto que el overlay invisible). Pista y pulgar dibujados con pseudo-elementos. */
.runway__track { display: none; }
.runway .runway__range {
  -webkit-appearance: none; appearance: none; background: transparent; opacity: 1; cursor: grab;
  width: calc(80% + 32px); margin-inline: calc(10% - 16px); height: 44px; padding: 0; touch-action: pan-y;
}
.runway__range:active { cursor: grabbing; }
.runway__range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--acc) calc(var(--p) * 100%), var(--line) 0); }
.runway__range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--line); }
.runway__range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--acc); }
.runway__range::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -12px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; box-shadow: 0 4px 12px -4px rgba(18 15 14 / .45); }
.runway__range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; box-shadow: 0 4px 12px -4px rgba(18 15 14 / .45); }
.runway__range:focus-visible { outline: none; }
.runway__range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--acc); outline-offset: 3px; }
.runway__range:focus-visible::-moz-range-thumb { outline: 3px solid var(--acc); outline-offset: 3px; }

/* Animación del slider: pulgar que crece al agarrarlo, icono que rebota al activarse */
.runway__range::-webkit-slider-thumb { transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), box-shadow .2s; }
.runway__range::-moz-range-thumb { transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), box-shadow .2s; }
.runway__range:active::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 8px 18px -6px rgba(18 15 14 / .5); }
.runway__range:active::-moz-range-thumb { transform: scale(1.18); box-shadow: 0 8px 18px -6px rgba(18 15 14 / .5); }
.runway__stops input:checked + span img { animation: icoBote .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes icoBote { 0% { scale: .6; rotate: -14deg; } 60% { scale: 1.35; rotate: 8deg; } 100% { scale: 1.15; rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .runway__stops input:checked + span img { animation: none; } }

/* Paso 5: el bloque cambia de altura según el nivel; anclado abajo, el slider se movería bajo el dedo. Aquí se ancla arriba. */
@media (max-width: 899px) { #paso-5 .q-main > .stage > :last-child { margin-top: 14px; } }

/* Resumen rápido (paso 6): filas con icono y separadores */
.summary { display: flex; flex-direction: column; gap: 0; padding: 14px 16px 6px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r); }
.summary .lbl { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acc-t); }
.summary .sum { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 12px; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.summary .sum:first-of-type { border-top: 0; }
.summary .sum img { box-sizing: content-box; padding: 7px; width: 22px; height: 22px; border-radius: 50%; background: #fff; }

/* Invitación: el logo ya está en la barra de marca, no duplicarlo */
.q-head:has(.q-bar--brand)::before { display: none; }

/* Votos recibidos: barra de progreso */
.votes { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.votes__top { display: flex; align-items: center; gap: 12px; }
.votes__top p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.votes__top b { font-weight: 800; color: var(--acc-t); }
.votes__bar { height: 10px; margin-top: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.votes__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--acc), #FF8A4C); transition: width .9s cubic-bezier(.2, .8, .2, 1) .2s; }

/* Cuenta atrás */
.cd { margin-top: 10px; padding: 14px 16px; border-radius: var(--r); background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cd__lbl { margin: 0; max-width: 8.5em; font-size: 14px; font-weight: 700; line-height: 1.25; }
.cd__boxes { display: flex; gap: 8px; }
.cd__boxes div { min-width: 54px; padding: 8px 6px 6px; border-radius: 12px; background: rgba(255 255 255 / .12); text-align: center; }
.cd__boxes b { display: block; font-family: var(--f-display); font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cd__boxes span { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; opacity: .75; }

/* Pastillas de lo que viene */
.perks { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.perks li { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--tint); font-size: 13px; font-weight: 700; color: var(--acc-t); }
.stage .perks { flex-wrap: nowrap; gap: 6px; margin: 14px 0 0; }
.stage .perks li { padding: 6px 10px 6px 7px; font-size: 12px; white-space: nowrap; }

/* Botones de voto con carita */
.vote__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 84px; padding: 8px 6px 10px; }
.vote__btn img { width: 40px; height: 40px; transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.vote__btn:hover img, .vote__btn:focus-visible img { transform: scale(1.12) rotate(-6deg); }
.vote__btn:active img { transform: scale(.9); }
.vote__btn--no:hover { background: #FBD9D4; }
.vote__btn--si:hover { background: #2A211E; }
@media (prefers-reduced-motion: reduce) { .vote__btn img { transition: none; } }

/* Icono de cada carta */
.vcard__ico { display: block; width: 72px; height: 72px; margin-bottom: 14px; animation: icoCarta .5s cubic-bezier(.2, 1.6, .4, 1) backwards; }
@keyframes icoCarta { from { scale: .5; rotate: -12deg; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vcard__ico { animation: none; } }
.vrow img { flex-shrink: 0; margin-inline: 2px 8px; }

/* Chivatazo: dos columnas compactas para que todo entre sin scroll */
.tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tips .tile { min-height: 0; padding: 10px 12px; font-size: 14px; line-height: 1.25; }
#paso-5 .stack { gap: 10px; }
#paso-5 textarea.field { min-height: 0; height: 66px; }

/* Confirmación de voto */
.done-ico { position: relative; width: 64px; height: 64px; margin-bottom: 10px; animation: icoCarta .6s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.done-ico img { width: 64px; height: 64px; }
.done-ico__ok { position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 15px; font-weight: 800; border: 2px solid var(--paper, #fff); }
.q-main h1.inv-hero#h1-6 { font-size: 38px; }
@media (max-height: 740px) { .done-ico { display: none; } }

/* Comprobante: estilo ticket */
.pass--receipt { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-lg); }
.pass--receipt .pass__head { border-bottom: 1px dashed var(--line-strong); }
.pass__ok { padding: 3px 10px; border-radius: 999px; background: #E3F5EA; color: var(--ok); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.pass--receipt .pass__data { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.pass--receipt .pass__data dt { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.pass--receipt .pass__data dd { margin-top: 4px; font-size: 18px; font-weight: 800; }

/* Progreso del grupo */
.prog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.prog-head .voters__faces i { width: 30px; height: 30px; font-size: 11px; margin-left: -8px; display: inline-grid; place-items: center; }
.prog-head .voters__faces i:first-child { margin-left: 0; }
.prog-head b { color: var(--acc-t); }

/* Arsenal: tarjetas con icono */
.arsenal { grid-template-columns: 1fr; gap: 8px; }
.arsenal a { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; min-height: 0; padding: 10px 14px; }
.arsenal a img { width: 40px; height: 40px; }
.arsenal__t { display: flex; flex-direction: column; gap: 2px; }
.arsenal a .arsenal__go { font-size: 13px; font-weight: 700; color: var(--acc-t); text-decoration: none; white-space: nowrap; }
.arsenal a:hover .arsenal__go { text-decoration: underline; }
.arsenal a, .arsenal a * { text-decoration: none; }
.arsenal a:hover .arsenal__go { text-decoration: underline; }
.done-ico, .done-ico img { width: 56px; height: 56px; }
.done-ico { margin-bottom: 6px; }
#paso-6 .stack { gap: 12px; }

/* Avisos de reacción (toast): arriba y centrados, píldora oscura con destello naranja */
[data-react]:has(input:checked:focus)::after, .day[data-react]:focus::after, .react.is-on {
  top: calc(env(safe-area-inset-top, 0px) + 14px); bottom: auto; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: min(88vw, 340px);
  padding: 11px 18px 11px 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; text-align: center;
  box-shadow: 0 14px 30px -12px rgba(18 15 14 / .55); font: 700 15px/1.25 var(--f-body); transform-origin: top center;
  animation: toast 1.8s cubic-bezier(.2, 1.3, .4, 1) both;
}
[data-react]:has(input:checked:focus)::after { content: "✦  " attr(data-react); }
.day[data-react]:focus::after { content: "✦  " attr(data-react); }
.react.is-on::before { content: "✦"; margin-right: 8px; color: #FF8A4C; }
@keyframes toast {
  0% { translate: 0 -18px; scale: .92; opacity: 0; }
  14%, 84% { translate: 0 0; scale: 1; opacity: 1; }
  100% { translate: 0 -10px; scale: 1; opacity: 0; }
}
@media (min-width: 900px) {
  [data-react]:has(input:checked:focus)::after, .day[data-react]:focus::after, .react.is-on { left: 560px; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-react]:has(input:checked:focus)::after, .day[data-react]:focus::after, .react.is-on { animation-duration: 1.8s; animation-name: toastFade; }
  @keyframes toastFade { 0%, 100% { opacity: 0; } 14%, 84% { opacity: 1; } }
}

/* Invitado · bote: mismos niveles que el organizador; los de por debajo del mínimo quedan bloqueados */
.runway--inv { margin: 6px 0 0; }
.runway--inv .runway__range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--line-strong) calc(var(--lock, 0) * 100%), transparent 0), linear-gradient(to right, var(--acc) calc(var(--p, .5) * 100%), var(--line) 0);
}
.stop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0 0; border: 0; background: none; font: 600 12px/1.2 var(--f-body); color: var(--muted); cursor: pointer; }
.stop img { opacity: .45; transition: opacity .2s, scale .2s; }
.stop.is-on { color: var(--ink); font-weight: 800; }
.stop.is-on span { text-decoration: underline 2px var(--ink); text-underline-offset: 4px; }
.stop.is-on img { opacity: 1; animation: icoBote .45s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.stop.is-lock { cursor: not-allowed; }
.stop.is-lock img { opacity: .25; filter: grayscale(1); }
.stop:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: 8px; }
.lock-lbl { margin: 0; }

/* Ajuste fino de euros */
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.stepper__txt { margin: 0; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.2; }
.stepper__txt small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.stepper__btn { min-width: 84px; height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font: 800 16px/1 var(--f-body); cursor: pointer; transition: background-color .15s, scale .15s, opacity .15s; }
.stepper__btn[data-d="5"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.stepper__btn:active:not(:disabled) { scale: .94; }
.stepper__btn:disabled { opacity: .35; cursor: not-allowed; }
.stepper__btn:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
.stepper__btn { height: 40px; }
#paso-4 .lock-lbl { line-height: 1.3; }

/* Voto enviado: pantalla mínima, centrada */
@media (max-width: 899px) { #paso-6 .q-main > .stage { justify-content: center; } #paso-6 .q-main > .stage > :last-child { margin-top: 14px; } }

/* Voto enviado: salida discreta a la landing */
.next-link { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; }
.next-link b { color: var(--acc-t); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.next-link svg { width: 16px; height: 16px; color: var(--acc-t); transition: translate .2s; }
.next-link:hover svg { translate: 4px 0; }
.next-link:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; border-radius: 12px; }

/* Botón principal desactivado: faltan datos obligatorios */
.cta.is-off, .cta[aria-disabled="true"] { background: #9A9390; border-color: #9A9390; color: #fff; box-shadow: none; opacity: .7; cursor: not-allowed; translate: none; }
.cta.is-off:hover { translate: none; box-shadow: none; }

/* Paso «¿Cuántos sois?»: tarjeta clara, número grande y botones redondos */
.card.count { padding: 22px 18px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-lg); color: var(--ink); }
.count__row { gap: 12px; }
.count__num { align-items: center; text-align: center; gap: 0; }
.count__num > span:last-child { flex-direction: column; align-items: center; gap: 2px; }
.count__num .lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
.count__num input { font-size: 72px; line-height: 1; text-align: center; }
.count__num b { font-size: 15px; }
.count .sq-btn { width: 60px; height: 60px; flex-shrink: 0; }
.count .sq-btn svg { width: 24px; height: 24px; }
.count .sq-btn:hover { background: var(--tint); }
.count .sq-btn--on:hover { background: #2A211E; }
.count .hint { margin: 14px 0 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--acc-t); }
.grid-4 .quick { min-height: 52px; }
/* − número + : el número en el centro */
.count__row { justify-content: space-between; }
.count__row > .sq-btn:not(.sq-btn--on) { order: 1; }
.count__row > .count__num { order: 2; }
.count__row > .sq-btn--on { order: 3; }

/* Buscador de ciudad */
.reveal--ciudad-si .group { margin-top: 2px; }
input[type="search"].field { -webkit-appearance: none; appearance: none; width: 100%; padding-inline: 16px; background: #fff; }
input[type="search"].field::-webkit-search-cancel-button { cursor: pointer; }

/* Autocompletado de ciudades: la lista se abre hacia arriba (el campo está pegado al pie) */
.ac-wrap { position: relative; }
.ac { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 8; max-height: 260px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; border: 1px solid var(--line-strong); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-lg); }
.ac[hidden] { display: none; }
.ac li { padding: 13px 14px; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; }
.ac li[aria-selected="true"], .ac li:hover { background: var(--tint); color: var(--acc-t); }
.ac li.ac__vacio { color: var(--muted); font-weight: 500; cursor: default; }
.ac li.ac__vacio:hover { background: none; color: var(--muted); }

/* Sí o sí / ni de coña: más ideas */
.rules__more { align-self: flex-start; padding: 6px 2px; border: 0; background: none; font: 700 14px/1 var(--f-body); color: var(--acc-t); cursor: pointer; }
.rules__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.rules__more:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; border-radius: 6px; }
.rules__more:active { scale: .96; }
.rules__head { order: -1; }
.rules .row > span { min-height: 0; }