/* ============================================================
   Little Caesars México · Aniversario 67 años
   ============================================================ */

:root {
  --orange:      #F15A22;
  --orange-dk:   #D9450F;
  --orange-lt:   #FF7A3C;
  --orange-soft: #FFE7D6;
  --cream:       #FFF7EF;
  --cream-2:     #FBE9D2;
  --ink:         #1C1512;
  --ink-soft:    #4a3f39;
  --white:       #ffffff;
  --line:        #eadfd3;
  --green:       #2E9E5B;
  --red:         #E23B2E;
  --radius:      18px;
  --shadow:      0 10px 30px rgba(28,21,18,.14);
  --shadow-sm:   0 4px 14px rgba(28,21,18,.10);
  --maxw:        430px;
  --font-head:   'Anton', 'Montserrat', system-ui, sans-serif;
  --font-strong: 'Montserrat', system-ui, sans-serif;
  --font-body:   'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

/* -------------------- Page container (real web page) -------------------- */
.page {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* En pantallas anchas, la columna de contenido se centra con un ligero realce */
@media (min-width: 700px) {
  body { background:
      radial-gradient(120% 50% at 50% -10%, #ffe6cd 0%, transparent 55%),
      linear-gradient(160deg, #fff3e8 0%, #ffe9d6 100%); }
  .page { box-shadow: 0 20px 60px rgba(28,21,18,.14); }
}

/* -------------------- Screens -------------------- */
.screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--white);
}

/* -------------------- Buttons -------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-strong); font-weight: 800; letter-spacing: .3px;
  border-radius: 999px; padding: 14px 22px; font-size: 16px;
  transition: transform .12s ease, box-shadow .15s ease, background .15s;
  line-height: 1;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--orange); color: #fff; box-shadow: 0 6px 16px rgba(241,90,34,.4); text-transform: uppercase; }
.btn--primary:hover { background: var(--orange-dk); }
.btn--ghost { background: #fff; color: var(--orange); border: 2px solid var(--orange); text-transform: uppercase; }
.btn--ghost:hover { background: var(--orange-soft); }
.btn--block { width: 100%; }
.btn--lg { padding: 17px 22px; font-size: 17px; }
.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.ic { width: 20px; height: 20px; flex: none; }
.ic--w { color: #fff; }
.ic--dk { color: var(--ink); width: 26px; height: 26px; }
.ic--sm { width: 15px; height: 15px; }
.ic--big { width: 40px; height: 40px; }

/* -------------------- Header band -------------------- */
.hdr {
  display: flex; align-items: center; gap: 8px;
  padding: max(18px, env(safe-area-inset-top)) 18px 14px;
  background: var(--orange); color: #fff;
  position: relative; z-index: 5;
}
.hdr--band { justify-content: center; }
.hdr__title {
  font-family: var(--font-strong); font-weight: 900; font-size: 18px;
  letter-spacing: .4px; text-transform: uppercase; text-align: center;
  flex: 1;
}
.hdr__back { color: #fff; display: flex; }
.hdr__back + .hdr__title { text-align: left; }

/* -------------------- Confetti & balloons -------------------- */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.confetti i {
  position: absolute; top: -20px; border-radius: 2px;
  animation: fall linear infinite;
}
@keyframes fall {
  0% { transform: translateY(-20px) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(360px) rotate(320deg); opacity: 0; }
}

.balloons { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.balloon { position: absolute; width: 52px; animation: bob 4s ease-in-out infinite; }
.balloon--l1 { left: 6px;  top: 30px; }
.balloon--l2 { left: 34px; top: 84px; width: 40px; animation-delay: .8s; }
.balloon--r1 { right: 6px;  top: 30px; animation-delay: .4s; }
.balloon--r2 { right: 34px; top: 84px; width: 40px; animation-delay: 1.2s; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }

/* ============================================================
   1 · HOME
   ============================================================ */
.home { background: var(--white); }
.home__top {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 26px 40px; position: relative; z-index: 4;
}
.badge67 { width: 194px; height: 194px; margin: 0 auto 20px; display: block; }
.home__title {
  font-family: var(--font-head); font-size: 40px; line-height: 1.08;
  color: var(--ink); letter-spacing: .5px; margin: 6px 0 22px;
}
.home__title .hl { color: var(--orange); }
.home__title .emoji { font-size: 32px; }
.home__sub { color: var(--ink-soft); font-weight: 700; font-size: 18px; line-height: 1.5; margin-bottom: 32px; }
.home__top .btn--primary { font-size: 18px; padding: 18px 28px; }
.dots { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cream-2); }
.dot.is-active { background: var(--orange); width: 24px; border-radius: 5px; }

.home__menu {
  flex: none;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  padding: 28px 0 36px; border-radius: 30px 30px 0 0;
}
.menu-head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 22px; }
.menu-head h2 { font-family: var(--font-head); font-size: 30px; letter-spacing: 1px; }
.menu-arrow {
  width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--orange);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
.menu-slider {
  display: flex; gap: 16px; overflow-x: auto; padding: 4px 24px 8px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.menu-slider::-webkit-scrollbar { display: none; }
.menu-card { flex: 0 0 132px; text-align: center; scroll-snap-align: start; }
.menu-card img {
  width: 132px; height: 132px; object-fit: cover; border-radius: 50%;
  border: 4px solid #fff; box-shadow: var(--shadow-sm); background: #fff;
}
.menu-card figcaption { margin-top: 10px; font-weight: 800; font-size: 15px; }

/* ============================================================
   2 · QUIZ
   ============================================================ */
.quiz { background: #fff; }
.quiz__body { position: relative; padding: 26px 24px 10px; flex: 1; text-align: center; }
.quiz__title {
  font-family: var(--font-head); font-size: 34px; line-height: 1; color: var(--ink);
  margin-bottom: 14px; position: relative; z-index: 4;
}
.quiz__q { font-weight: 800; font-size: 18px; line-height: 1.4; margin-bottom: 20px; }
.quiz__q strong { font-size: 20px; }
.quiz__opts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.quiz-opt {
  padding: 16px; border-radius: 999px; font-weight: 800; font-size: 17px;
  border: 2px solid var(--orange); color: var(--orange); background: #fff;
  transition: all .14s;
}
.quiz-opt.is-lead { background: var(--orange); color: #fff; box-shadow: 0 6px 16px rgba(241,90,34,.4); }
.quiz-opt:hover { background: var(--orange); color: #fff; }
.quiz-opt:active { transform: scale(.98); }
.quiz__mascot { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 6px; }
.art-mascot--sm { width: 148px; height: auto; }
.quiz__welcome { font-family: var(--font-head); font-size: 22px; line-height: 1; color: var(--ink); text-align: left; }
.quiz__foot { padding: 14px 24px 22px; display: flex; align-items: center; gap: 12px; }
.progress { flex: 1; height: 12px; background: var(--cream-2); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--orange); border-radius: 999px; transition: width .3s; }
.quiz__step { font-weight: 800; color: var(--ink-soft); font-size: 14px; }

/* ============================================================
   3 · SUCCESS
   ============================================================ */
.success { background: #fff; }
.success__body { padding: 26px 24px 30px; text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 4; }
.success__title { font-family: var(--font-head); font-size: 42px; color: var(--ink); letter-spacing: 1px; }
.success__sub { font-weight: 800; font-size: 19px; margin-top: 0; color: var(--orange-dk); }
.art-mascot { width: 210px; height: auto; margin: 6px auto 14px; display: block; }
.success__lead { color: var(--ink-soft); font-weight: 700; font-size: 15.5px; line-height: 1.5; max-width: 340px; margin: 0 auto 18px; }
.success__lead strong { color: var(--ink); }
.success__ways { display: flex; gap: 12px; width: 100%; max-width: 380px; margin: 0 auto 16px; }
.way { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.way .ic { width: 26px; height: 26px; flex: none; }
.way strong { display: block; font-size: 14px; }
.way span { display: block; font-size: 11.5px; color: var(--ink-soft); font-weight: 700; }
.ic--org { color: var(--orange); }
.success__valid { font-weight: 800; font-size: 12.5px; color: var(--green); margin-bottom: 20px; }
.success__body .btn--lg { width: 100%; max-width: 380px; }
.success__note { color: var(--ink-soft); font-weight: 700; font-size: 14px; line-height: 1.4; margin-top: 14px; max-width: 340px; }
.tabbar {
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: #fff;
}
.tabbar__item { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #b9a893; padding: 4px 8px; }
.tabbar__item svg { width: 24px; height: 24px; }
.tabbar__lb { font-size: 11px; font-weight: 800; }
.tabbar__item.is-active { color: var(--orange); }

/* ============================================================
   4 · COUPONS
   ============================================================ */
.coupons { background: var(--cream); }
.coupons__body { padding: 16px 14px 26px; }
.chips { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.chip {
  padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--ink);
  font-weight: 800; font-size: 13px; border: 1.5px solid var(--line); box-shadow: var(--shadow-sm);
}
.chip.is-active { background: var(--orange); color: #fff; border-color: var(--orange); }

.coupon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.coupon-card {
  position: relative; background: #fff; border-radius: 16px; padding: 12px 12px 14px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center;
  text-align: center; border: 1px solid var(--line);
}
.coupon-card.is-disabled { opacity: .62; filter: grayscale(.35); }
.coupon-card__n {
  position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: #fff; font-family: var(--font-head); font-size: 15px;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.coupon-card__soldout {
  position: absolute; top: 10px; right: 8px; background: var(--ink); color: #fff;
  font-weight: 900; font-size: 10px; padding: 3px 8px; border-radius: 6px; z-index: 2; letter-spacing: .5px;
}
.coupon-card__img { width: 92px; height: 92px; margin: 6px 0 6px; }
.coupon-card__img img { width: 92px; height: 92px; object-fit: cover; border-radius: 50%; }
.coupon-card__title { font-weight: 800; font-size: 12.5px; line-height: 1.2; min-height: 45px; display: flex; align-items: center; }
.coupon-card__price { font-family: var(--font-head); font-size: 26px; color: var(--orange); line-height: 1; margin: 2px 0 4px; }
.coupon-card__ref { display: block; font-family: var(--font-body); font-weight: 800; font-size: 9.5px; color: #b09a86; letter-spacing: .3px; margin-top: 3px; }
.coupon-card__badge {
  background: var(--orange); color: #fff; font-weight: 900; font-size: 9.5px;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .4px; margin-bottom: 8px;
}
.coupon-card__cta { width: 100%; margin-top: auto; }

/* -------------------- Modal -------------------- */
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(28,21,18,.55); backdrop-filter: blur(2px); opacity: 0; transition: opacity .2s; }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__card {
  position: relative; background: #fff; border-radius: 22px; padding: 26px 22px 22px;
  width: 100%; max-width: 340px; box-shadow: var(--shadow); text-align: center;
  transform: translateY(16px) scale(.96); opacity: 0; transition: all .22s cubic-bezier(.2,.8,.3,1);
}
.modal.is-open .modal__card { transform: none; opacity: 1; }
.modal__close { position: absolute; top: 12px; right: 12px; color: var(--ink-soft); }
.modal__title { font-family: var(--font-strong); font-weight: 900; font-size: 20px; letter-spacing: .3px; margin-bottom: 18px; text-transform: uppercase; }
.modal__opt { margin-bottom: 12px; }
.modal__opt:last-child { margin-bottom: 0; }

/* ============================================================
   5 · DETAIL
   ============================================================ */
.detail { background: #fff; }
.detail__hero {
  background: var(--orange); color: var(--ink); position: relative;
  padding: calc(max(16px, env(safe-area-inset-top)) + 30px) 22px 30px; overflow: hidden;
}
.detail__back { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; color: #fff; z-index: 3; }
.detail__kicker {
  font-family: var(--font-head); font-size: 30px; line-height: 1.02; color: var(--ink);
  display: flex; flex-direction: column; gap: 2px;
}
.detail__kicker .ic--dk { display: inline-block; vertical-align: middle; margin-right: 6px; }
.detail__kicker span { color: var(--ink); }
.detail__imgs { position: relative; height: 210px; margin-top: 6px; }
.detail__pizza {
  position: absolute; left: -6px; top: 8px; width: 74%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; box-shadow: 0 12px 26px rgba(0,0,0,.28);
}
.detail__drink {
  position: absolute; right: 2px; bottom: -4px; width: 40%; aspect-ratio: 1; object-fit: contain;
  mix-blend-mode: multiply; /* elimina el fondo blanco del JPG sobre el naranja */
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.22));
}
.detail__panel {
  background: #fff; border-radius: 26px 26px 0 0; margin-top: -18px; position: relative; z-index: 2;
  padding: 24px 22px 26px; text-align: center; flex: 1;
}
.detail__deal { font-family: var(--font-head); font-size: 28px; line-height: 1.05; color: var(--ink); }
.detail__price { color: var(--orange); }
.detail__before { font-weight: 800; color: var(--ink-soft); font-size: 15px; margin: 2px 0 14px; }
.detail__modality-pill {
  display: inline-block; background: var(--ink); color: #fff; font-weight: 900; font-size: 13px;
  letter-spacing: .5px; padding: 9px 20px; border-radius: 999px; margin-bottom: 14px;
}
.detail__note { color: var(--ink-soft); font-weight: 700; font-size: 15px; line-height: 1.4; margin-bottom: 18px; }
.detail__switch { margin-top: 16px; font-weight: 700; color: var(--ink-soft); font-size: 13px; }
.linkish { font-weight: 800; color: var(--ink-soft); text-decoration: underline; }
.linkish.is-on { color: var(--orange); }

/* ============================================================
   6 · DELIVERY
   ============================================================ */
.delivery { background: var(--cream); }
.delivery__body { padding: 14px 16px 20px; }
.delivery__hero { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--orange); margin: 4px 0 14px; }
.delivery__yell { font-family: var(--font-head); font-size: 22px; color: var(--ink); }

.loc-card { background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.loc-card__title { display: flex; align-items: center; gap: 6px; font-family: var(--font-strong); font-weight: 900; font-size: 16px; letter-spacing: .3px; }
.loc-card__detect { text-align: center; color: var(--ink-soft); font-weight: 700; font-size: 13px; margin: 2px 0 12px; }
.loc-card__lbl { display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.loc-card__input {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line);
  font-weight: 700; font-size: 14px; color: var(--ink); background: #fdfaf6;
}
.loc-card__input:focus { outline: none; border-color: var(--orange); }
.loc-card__actions { display: flex; gap: 8px; margin-top: 12px; }
.loc-card__actions .btn { flex: 1; }

/* Encabezado "Arma tu cupón" */
.build-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 4px; }
.build-head__title { font-family: var(--font-head); font-size: 20px; letter-spacing: .5px; }
.build-head__code { background: var(--ink); color: #fff; font-weight: 900; font-size: 12px; padding: 4px 12px; border-radius: 999px; letter-spacing: .5px; }
.build-note { color: var(--ink-soft); font-weight: 700; font-size: 13px; line-height: 1.4; margin: 0 2px 10px; }
.build-note strong { color: var(--orange); }

/* Tarjetas de selección de sabor */
.pick-list { display: flex; flex-direction: column; gap: 10px; }
.pick {
  display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px;
  padding: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
.pick__img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; flex: none; background: var(--cream-2); }
.pick__body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pick__slot { font-weight: 900; font-size: 10.5px; letter-spacing: .6px; color: var(--ink-soft); text-transform: uppercase; }
.pick__name { font-weight: 800; font-size: 15px; line-height: 1.15; }
.pick__promo { align-self: flex-start; background: var(--orange-soft); color: var(--orange-dk); font-weight: 900; font-size: 10.5px; letter-spacing: .5px; padding: 3px 10px; border-radius: 999px; }
.pick__fixed { font-weight: 800; font-size: 12px; color: var(--green); }
.pick__select {
  margin-top: 4px; width: 100%; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--line);
  font-weight: 800; font-size: 13.5px; color: var(--ink); background: #fdfaf6;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F15A22' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 32px;
}
.pick__select:focus { outline: none; border-color: var(--orange); }

.order-summary { margin-top: 14px; background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.order-summary__title { font-weight: 900; font-size: 16px; margin-bottom: 8px; }
.order-summary__title span { color: var(--ink-soft); font-weight: 700; font-size: 14px; }
.sum-row { display: flex; justify-content: space-between; font-weight: 800; font-size: 15px; padding: 4px 0; gap: 10px; }
.sum-row .neg { color: var(--red); }
.sum-row .strike { color: var(--ink-soft); text-decoration: line-through; }
.order-summary__total { border-top: 1.5px solid var(--line); margin-top: 6px; padding-top: 8px; }
.order-summary__total .sum-row { font-family: var(--font-head); font-size: 19px; line-height: 1.35; padding: 2px 0 4px; }

.delivery__foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--cream); position: sticky; bottom: 0; }

/* Barra de dirección de entrega (poblada tras el modal) */
.addr-bar {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; box-shadow: var(--shadow-sm); margin-bottom: 4px;
}
.addr-bar .ic { width: 22px; height: 22px; flex: none; }
.addr-bar__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.addr-bar__lb { font-weight: 900; font-size: 10.5px; letter-spacing: .5px; color: var(--ink-soft); text-transform: uppercase; }
.addr-bar__val { font-weight: 800; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr-bar__edit { font-weight: 900; font-size: 12px; color: var(--orange); flex: none; }
.addr-bar--empty { border-style: dashed; border-color: var(--orange-lt); }
.addr-bar--empty .addr-bar__val { color: var(--ink-soft); font-weight: 700; }

/* Modal bloqueante de dirección de entrega */
.addr-modal { position: fixed; z-index: 120; }
.addr-card { max-width: 400px; width: 100%; text-align: center; padding: 24px 22px 22px; max-height: 88vh; overflow-y: auto; }
.addr-card__scoot { color: var(--orange); display: flex; justify-content: center; margin-bottom: 4px; }
.addr-card .modal__title { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 19px; margin-bottom: 6px; }
.addr-card__hint { color: var(--ink-soft); font-weight: 700; font-size: 14px; line-height: 1.45; margin-bottom: 16px; }
.addr-card__hint strong { color: var(--orange-dk); }
.addr-card__lbl { display: block; text-align: left; font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.addr-card__err { text-align: left; color: var(--red); font-weight: 800; font-size: 12.5px; margin: 8px 0 12px; }
.loc-card__input.is-error { border-color: var(--red); background: #fff2f0; }

/* Fila de código postal (input + botón) */
.cp-row { display: flex; gap: 8px; }
.cp-row .loc-card__input { flex: 1; letter-spacing: 2px; font-weight: 800; }
.cp-row__btn { flex: none; padding: 12px 18px; font-size: 14px; }
.addr-card__status { text-align: left; font-weight: 800; font-size: 12.5px; margin: 8px 0 4px; min-height: 16px; color: var(--ink-soft); }
.addr-card__status.is-ok { color: var(--green); }
.addr-card__status.is-err { color: var(--red); }

/* Rejilla de campos autocompletados */
.addr-grid { display: flex; gap: 10px; margin-bottom: 10px; }
.addr-grid > div { flex: 1; min-width: 0; }
.addr-grid__wide { flex: 1 1 100%; }
#cpFields { margin-top: 6px; }

/* -------------------- Logo -------------------- */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mascot { width: 46px; height: 46px; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name { font-family: var(--font-head); font-size: 24px; color: var(--orange); letter-spacing: .3px; }
.logo__name sup { font-size: 10px; }
.logo__country { font-family: var(--font-strong); font-weight: 900; font-size: 13px; letter-spacing: 3px; color: var(--ink); align-self: flex-end; }

.is-fallback { background: var(--cream-2); }

/* ============================================================
   GATILLOS DE CONVERSIÓN
   ============================================================ */

/* -------------------- Barra de countdown (urgencia) -------------------- */
.cd-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 12px; background: linear-gradient(90deg, #241a15, #3a2a20);
  color: #fff; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.cd-bar__pulse {
  width: 9px; height: 9px; border-radius: 50%; background: #ff4d3d; flex: none;
  box-shadow: 0 0 0 0 rgba(255,77,61,.7); animation: cdPulse 1.4s infinite;
}
@keyframes cdPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,77,61,.7); }
  70% { box-shadow: 0 0 0 8px rgba(255,77,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,61,0); }
}
.cd-bar__flame { font-size: 15px; animation: flicker 1.1s ease-in-out infinite; }
@keyframes flicker {
  0%,100% { transform: scale(1) rotate(-3deg); filter: brightness(1); }
  50% { transform: scale(1.18) rotate(3deg); filter: brightness(1.25); }
}
.cd-bar__lbl {
  font-family: var(--font-strong); font-weight: 900; font-size: 10.5px;
  letter-spacing: .6px; color: #ffd9a8; text-transform: uppercase; white-space: nowrap;
}
.cd-bar.is-urgent { background: linear-gradient(90deg, #7a1109, #c0261a); animation: barShake 1.6s ease-in-out infinite; }
.cd-bar.is-urgent .cd-bar__lbl { color: #ffe08a; }
@keyframes barShake {
  0%,92%,100% { transform: translateX(0); }
  94% { transform: translateX(-2px); } 96% { transform: translateX(2px); } 98% { transform: translateX(-1px); }
}

/* Reloj digital */
.cd-clock { display: inline-flex; align-items: flex-end; gap: 3px; }
.cd-seg {
  display: inline-flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.12); border-radius: 6px; padding: 3px 5px 2px; min-width: 30px;
}
.cd-seg b {
  font-family: var(--font-head); font-size: 17px; line-height: 1; color: #fff;
  letter-spacing: .5px; font-variant-numeric: tabular-nums;
}
.cd-seg i { font-style: normal; font-size: 7.5px; font-weight: 800; letter-spacing: .4px; color: #ffcf9c; text-transform: uppercase; margin-top: 2px; }
.cd-colon { font-family: var(--font-head); font-size: 15px; color: #ff8a4c; padding-bottom: 6px; animation: colonBlink 1s step-end infinite; }
@keyframes colonBlink { 50% { opacity: .3; } }
.cd-expired { font-family: var(--font-head); font-size: 15px; color: #ffd9a8; letter-spacing: .5px; }

/* Reloj compacto embebido en paneles claros */
.cd-clock--mini { gap: 2px; }
.cd-clock--mini .cd-seg { background: var(--orange); padding: 2px 4px 1px; min-width: 24px; }
.cd-clock--mini .cd-seg b { font-size: 13px; }
.cd-clock--mini .cd-seg i { font-size: 6.5px; color: #ffe6d3; }
.cd-clock--mini .cd-colon { font-size: 12px; color: var(--orange); padding-bottom: 5px; }

/* -------------------- CTA con pulso -------------------- */
.btn--pulse { position: relative; animation: ctaPulse 1.8s ease-in-out infinite; }
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 6px 16px rgba(241,90,34,.4); transform: translateZ(0) scale(1); }
  50% { box-shadow: 0 8px 26px rgba(241,90,34,.6), 0 0 0 4px rgba(241,90,34,.18); transform: scale(1.02); }
}
.btn--sm.btn--pulse { animation-duration: 2.2s; }
@media (prefers-reduced-motion: reduce) {
  .btn--pulse, .cd-bar__flame, .cd-bar__pulse, .cd-bar.is-urgent, .cd-colon,
  .viewers__dot, .sp-toast, .scarcity__bar span { animation: none !important; }
}

/* -------------------- Prueba social (home) + espectadores -------------------- */
.home__proof { font-weight: 800; font-size: 13.5px; color: var(--ink-soft); margin-top: 16px; }
.home__proof b { color: var(--orange-dk); }
.viewers { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; }
.viewers b { color: var(--ink); }
.viewers__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(46,158,91,.6); animation: cdPulse 1.6s infinite; }

/* -------------------- Toast de prueba social en vivo -------------------- */
.sp-toast {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%);
  z-index: 70; display: flex; align-items: center; gap: 10px;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow);
  width: calc(100% - 32px); max-width: 360px; opacity: 0;
  transition: transform .4s cubic-bezier(.2,.9,.3,1), opacity .3s;
  pointer-events: none;
}
.sp-toast.is-show { transform: translate(-50%, 0); opacity: 1; }
.sp-toast__ic {
  font-size: 18px; flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--orange-soft);
}
.sp-toast__txt { font-weight: 800; font-size: 13px; line-height: 1.25; }
.sp-toast__txt b { color: var(--orange-dk); }
.sp-toast__txt i { display: block; font-style: normal; font-weight: 700; font-size: 11px; color: var(--ink-soft); margin-top: 1px; }

/* -------------------- Escasez (barra de stock) -------------------- */
.scarcity { width: 100%; margin: 4px 0 10px; text-align: left; }
.scarcity__bar { height: 6px; border-radius: 999px; background: var(--cream-2); overflow: hidden; margin-bottom: 4px; }
.scarcity__bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--orange-lt), var(--orange)); transition: width .6s;
  background-size: 200% 100%; animation: barShine 2.4s linear infinite;
}
@keyframes barShine { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } }
.scarcity__txt { font-weight: 800; font-size: 10.5px; color: var(--ink-soft); }
.scarcity__txt b { color: var(--orange-dk); }
.scarcity.is-low .scarcity__txt { color: var(--red); }
.scarcity.is-low .scarcity__txt b { color: var(--red); }
.scarcity.is-low .scarcity__bar span { background: linear-gradient(90deg, #ff6a4d, var(--red)); }

/* -------------------- Ancla de ahorro -------------------- */
.savings-badge {
  display: inline-block; background: var(--green); color: #fff; font-weight: 900;
  font-size: 11px; letter-spacing: .3px; padding: 3px 9px; border-radius: 999px; margin-left: 4px;
  vertical-align: middle;
}
.coupon-card__save {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--green); color: #fff; font-family: var(--font-head); font-size: 13px;
  padding: 3px 8px; border-radius: 8px; letter-spacing: .3px;
}

/* -------------------- Urgencia por pantalla -------------------- */
.coupons__urgency {
  background: var(--orange-soft); color: var(--orange-dk); font-weight: 800; font-size: 12.5px;
  line-height: 1.35; padding: 10px 14px; border-radius: 12px; margin-bottom: 14px;
}
.reserve-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  background: var(--cream); border: 1px dashed var(--orange-lt); border-radius: 14px;
  padding: 10px 12px; font-weight: 800; font-size: 13px; color: var(--ink-soft);
  max-width: 380px; margin: 0 auto 14px; text-align: center;
}
.reserve-note b { color: var(--orange-dk); }
.detail__urgency {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  font-weight: 800; font-size: 13px; color: var(--ink-soft); margin: 0 0 14px;
}
.delivery__urgency {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  font-weight: 800; font-size: 12px; color: var(--ink-soft); margin-bottom: 8px;
}
.order-summary__save {
  margin-top: 8px; background: rgba(46,158,91,.12); color: var(--green);
  font-weight: 900; font-size: 12.5px; text-align: center; padding: 8px; border-radius: 10px;
}
.order-summary__save b { color: #1f7d45; }
.detail .scarcity { max-width: 340px; margin: 0 auto 12px; }

/* -------------------- Responsive -------------------- */
@media (max-width: 470px) {
  .home__top { padding-top: 24px; }
  .success__body { padding-top: 22px; }
  .cd-bar__lbl { font-size: 9.5px; }
  .cd-seg { min-width: 27px; }
}