:root {
  --blue-950: #071b4b;
  --blue-900: #0c2e72;
  --blue-800: #17479d;
  --blue-700: #235bc1;
  --cyan: #00adee;
  --cyan-soft: #dff7ff;
  --ink: #10213d;
  --muted: #5d6a7c;
  --line: #dbe4f2;
  --surface: #ffffff;
  --page: #f3f7fc;
  --success: #188a5b;
  --danger: #b3261e;
  --shadow: 0 18px 55px rgba(9, 38, 92, .14);
  --radius: 26px;
}

* { box-sizing: border-box; }
html { height: 100%; color-scheme: light; scroll-behavior: smooth; }
body {
  display: flex; /* footer pegado abajo: si el contenido es más corto que
    la pantalla (pasó al achicar el banner en mobile), el footer ya no
    queda "flotando" a la mitad — se estira hasta el borde real. */
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(0, 173, 238, .10), transparent 24rem),
    radial-gradient(circle at 92% 22%, rgba(35, 74, 192, .08), transparent 28rem),
    var(--page);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  transform: translateY(-150%);
  color: #fff;
  background: var(--blue-950);
  border-radius: 8px;
}
.skip-link:focus { transform: none; }

.quote-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1240px, calc(100% - 32px));
  min-height: 86px;
  margin: 0 auto;
  gap: 20px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--blue-950);
  text-decoration: none;
}
.brand img { width: 64px; height: 64px; object-fit: contain; }
.brand span, .header-phone span { display: grid; gap: 2px; }
.brand strong { font-size: 1.04rem; letter-spacing: -.01em; }
.brand small, .header-phone small { color: var(--muted); font-size: .78rem; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--blue-950);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(12, 46, 114, .06);
}
.header-phone > span:first-child { color: var(--blue-700); font-size: 1.45rem; }

main { flex: 1 0 auto; padding-bottom: 54px; }
.quote-footer { flex: 0 0 auto; }
.campaign-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(310px, 1fr) minmax(235px, .7fr) minmax(360px, 1.15fr);
  align-items: stretch;
  width: min(1240px, calc(100% - 32px));
  min-height: 286px;
  margin: 4px auto 28px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 75% 2%, rgba(0,173,238,.40), transparent 38%),
    radial-gradient(circle at 5% 120%, rgba(35,91,193,.58), transparent 38%),
    linear-gradient(115deg, #061943 0%, #103a88 58%, #086cae 100%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 32px;
  box-shadow: 0 24px 64px rgba(7, 27, 75, .24);
}
.campaign-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent),
    radial-gradient(circle at 92% 82%, rgba(255,255,255,.12) 0 1px, transparent 2px) 0 0/16px 16px;
}
.campaign-offer, .campaign-price, .campaign-visual {
  position: relative;
  z-index: 1;
}
.campaign-offer, .campaign-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 3vw, 42px);
}
.campaign-chip {
  align-self: flex-start;
  padding: 7px 11px;
  color: var(--blue-950);
  background: #fff;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.campaign-offer h1 { display: grid; margin: 15px 0 11px; line-height: .88; }
.campaign-offer h1 strong { font-size: clamp(2.5rem, 5vw, 4.4rem); letter-spacing: -.06em; }
.campaign-offer h1 span { margin-top: 8px; font-size: 1.28rem; letter-spacing: .03em; text-transform: uppercase; }
.campaign-offer p { max-width: 390px; margin: 4px 0 0; color: #dcecff; font-weight: 620; line-height: 1.45; }
.campaign-benefits { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.campaign-benefits span { padding: 7px 10px; color: #e8f5ff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: .68rem; font-weight: 720; }
.campaign-price {
  align-self: center;
  min-height: 216px;
  margin: 18px 4px;
  padding: 24px 18px;
  text-align: left;
  background: linear-gradient(155deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 24px;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.campaign-price > span { color: #dcecff; font-size: .84rem; font-weight: 750; text-transform: uppercase; }
.campaign-price strong { margin-top: 7px; font-size: clamp(1.75rem, 2.7vw, 2.65rem); line-height: .96; letter-spacing: -.05em; }
.campaign-price small { font-weight: 700; }
.campaign-price em { margin-top: 11px; color: #dcecff; font-size: .72rem; font-style: normal; line-height: 1.35; }
.campaign-visual { display: grid; align-items: stretch; min-width: 0; padding: 18px 18px 18px 10px; }
.product-stage {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  background: linear-gradient(145deg, #fff 0%, #eef6ff 100%);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(5, 26, 72, .22), inset 0 1px 0 #fff;
}
.product-stage::before {
  content: "";
  position: absolute;
  right: -25%;
  bottom: -62%;
  width: 85%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,173,238,.19), transparent 65%);
  border-radius: 50%;
}
.product-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
  transform: scale(1.22) translateY(2%);
  filter: contrast(1.025) saturate(.9);
}
.product-label, .product-note {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  font-weight: 800;
}
.product-label { top: 16px; left: 16px; padding: 7px 10px; color: var(--blue-900); background: rgba(255,255,255,.92); border: 1px solid var(--line); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.product-note { right: 14px; bottom: 14px; max-width: 170px; padding: 8px 11px; color: #fff; background: var(--blue-800); font-size: .64rem; line-height: 1.3; text-align: center; box-shadow: 0 8px 20px rgba(23,71,157,.24); }

.quote-shell {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
}
.phase-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 6px 8px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
  text-align: center;
}
.phase-row .is-active { color: var(--blue-700); }
.progress-track {
  height: 9px;
  overflow: hidden;
  background: #dfe6f0;
  border-radius: 999px;
}
.progress-track span {
  display: block;
  width: 14.285%;
  height: 100%;
  background: linear-gradient(90deg, var(--blue-700), var(--cyan));
  border-radius: inherit;
  transition: width .35s ease;
}
.question-card {
  min-height: 470px;
  margin-top: 16px;
  padding: clamp(26px, 5vw, 58px);
  background: linear-gradient(155deg, #fff 0%, #fbfdff 100%);
  border: 1px solid rgba(28, 75, 158, .1);
  border-radius: var(--radius);
  box-shadow: 0 18px 52px rgba(19, 51, 106, .10);
}
.question-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.step-count { color: var(--blue-700); font-size: .78rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.mode-badge { padding: 6px 10px; color: var(--blue-900); background: var(--cyan-soft); border-radius: 999px; font-size: .75rem; font-weight: 750; }
.question-card h2 {
  max-width: 820px;
  margin: 22px 0 8px;
  color: var(--blue-950);
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.question-card h2:focus { outline: none; }
.question-help { margin: 0 0 28px; color: var(--muted); line-height: 1.55; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.option-button {
  position: relative;
  min-height: 88px;
  padding: 18px 58px 18px 22px;
  color: var(--blue-950);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  font-weight: 800;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.option-button::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 18px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  color: var(--blue-700);
  background: var(--cyan-soft);
  border-radius: 50%;
}
.option-button:hover, .option-button:focus-visible { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 9px 24px rgba(0, 126, 192, .12); outline: none; }
.option-button.is-selected { color: #fff; background: var(--blue-800); border-color: var(--blue-800); }
.option-button.is-selected::after { color: var(--blue-950); background: #fff; }
.option-button.is-committing { color: #fff; background: linear-gradient(135deg, var(--blue-700), var(--blue-800)); border-color: var(--cyan); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(23,71,157,.24); }
.option-button.is-committing::after { content: "✓"; color: var(--blue-800); background: #fff; }

.field-layout { display: grid; gap: 18px; max-width: 740px; }
.contact-layout { width: 100%; max-width: none; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.form-field { display: grid; gap: 7px; }
.form-field label, .field-label { color: var(--blue-950); font-size: .87rem; font-weight: 800; }
.form-field input, .form-field select {
  width: 100%;
  min-height: 56px;
  padding: 13px 15px;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  outline: none;
}
.form-field input:focus, .form-field select:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0,173,238,.13); }
.form-field input[aria-invalid="true"], .form-field select[aria-invalid="true"] { border-color: var(--danger); }
.field-hint { color: var(--muted); font-size: .78rem; font-weight: 600; line-height: 1.4; }
.contact-trust { display: grid; gap: 3px; padding: 13px 15px; color: var(--blue-950); background: linear-gradient(135deg, #eef7ff, #f7fbff); border: 1px solid #cfe1f7; border-radius: 14px; }
.contact-trust strong { font-size: .76rem; }
.contact-trust span { color: var(--muted); font-size: .68rem; line-height: 1.35; }
.consent-row { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; color: var(--muted); font-size: .83rem; line-height: 1.45; }
.consent-row input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue-700); }
.consent-row a { color: var(--blue-700); font-weight: 700; }
.continue-button {
  justify-self: start;
  min-height: 56px;
  padding: 14px 24px;
  color: #fff;
  background: linear-gradient(100deg, var(--blue-800), var(--blue-700));
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(23,71,157,.22);
  cursor: pointer;
  font-weight: 850;
}
.continue-button:hover, .continue-button:focus-visible { background: var(--blue-950); outline: 3px solid rgba(0,173,238,.28); outline-offset: 2px; }
#submit-prototype {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  justify-self: stretch;
  text-align: center;
}
#submit-prototype span { display: inline-block; line-height: 1; }
#submit-prototype + .recaptcha-notice { margin: 2px 0 0; }
.field-error { margin: 14px 0 0; color: var(--danger); font-weight: 750; }
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.processing-overlay[hidden] { display: none; }
.processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(7, 27, 75, .55);
  backdrop-filter: blur(2px);
}
.processing-card {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 320px;
  padding: 32px 28px;
  text-align: center;
  color: var(--blue-950);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(7, 27, 75, .3);
}
.processing-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--cyan-soft);
  border-top-color: var(--blue-700);
  border-radius: 50%;
  animation: processingSpin .8s linear infinite;
}
@keyframes processingSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .processing-spinner { animation: none; }
}
.question-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.btn-back { min-height: 42px; padding: 8px 4px; color: var(--blue-700); background: none; border: 0; cursor: pointer; font-weight: 800; }
.btn-back:disabled { color: #9ca8b8; cursor: default; }
.secure-note { color: var(--muted); font-size: .77rem; }
.secure-note span { color: var(--success); }
.legal-note { max-width: 820px; margin: 17px auto 0; color: var(--muted); font-size: .73rem; line-height: 1.5; text-align: center; }

.quote-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  padding: 24px 16px;
  color: #dce8fa;
  background: var(--blue-950);
  font-size: .77rem;
}
.quote-footer a { color: #fff; }

/* Resultado */
.result-page { background: #eef3f8; }
.result-main { width: min(1320px, calc(100% - 32px)); margin: 8px auto 48px; padding: 0; }
.result-hero {
  position: relative;
  min-height: 560px;
  padding: clamp(34px, 6vw, 80px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.result-copy { max-width: 930px; }
.case-line { display: flex; align-items: center; gap: 14px; }
.case-line > span:last-child { display: grid; }
.case-line small { color: var(--muted); }
.case-line strong { color: var(--blue-950); font-size: 1.05rem; }
.check-icon { display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 auto; color: var(--success); border: 4px solid #84c7a8; border-radius: 50%; font-size: 1.8rem; font-weight: 900; }
.result-hero h1 { max-width: 820px; margin: 32px 0 15px; color: var(--blue-950); font-size: clamp(2.7rem, 7vw, 6rem); line-height: .96; letter-spacing: -.06em; }
.result-hero .result-copy > p { max-width: 800px; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.result-timeline { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 62px; }
.result-timeline > div { position: relative; display: grid; justify-items: center; gap: 10px; color: var(--muted); text-align: center; }
.result-timeline > div::before { content: ""; position: absolute; z-index: 0; top: 17px; left: -50%; width: 100%; height: 4px; background: var(--cyan); }
.result-timeline > div:first-child::before { display: none; }
.result-timeline span { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: var(--success); border: 5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--success); }
.result-timeline .is-current span { background: var(--blue-700); box-shadow: 0 0 0 2px var(--blue-700); }
.result-timeline strong { color: var(--blue-950); font-size: .85rem; }
.calling-card {
  position: absolute;
  right: -18px;
  top: 50%;
  z-index: 3;
  width: 315px;
  padding: 27px;
  transform: translateY(-22%);
  color: #fff;
  background: linear-gradient(135deg, var(--blue-800), #087fc0);
  border-radius: 22px 0 0 22px;
  box-shadow: 0 18px 36px rgba(7,43,104,.25);
  animation: callFloat 2.7s ease-in-out infinite;
}
.calling-card strong { display: block; margin-top: 14px; font-size: 1.35rem; }
.calling-card p { margin: 7px 0 0; color: #e5f4ff; line-height: 1.35; }
.calling-visual { display: flex; align-items: center; gap: 10px; font-size: 2.1rem; }
.calling-visual i { display: block; width: 74px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='14' viewBox='0 0 74 14'%3E%3Cpath d='M1 7c7-13 12 13 19 0s12 13 19 0 12 13 19 0 9 0 15 0' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.contact-band { margin-top: 18px; padding: 48px 24px; color: #fff; background: linear-gradient(120deg, var(--blue-900), var(--blue-700)); border-radius: 25px; text-align: center; }
.contact-band .calling-visual { justify-content: center; }
.calling-visual.large { font-size: 2.8rem; }
.calling-visual.large i { width: 100px; }
.contact-band h2 { margin: 14px 0 8px; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.035em; }
.contact-band p { margin: 0; color: #dcecff; }
.result-detail {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 48px;
  margin-top: 18px;
  padding: clamp(30px, 6vw, 72px);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 25px;
}
.eyebrow { color: var(--blue-700); font-size: .8rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.result-detail h2 { margin: 10px 0 25px; color: var(--blue-950); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.04; letter-spacing: -.045em; }
.result-detail ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.result-detail li { display: flex; gap: 10px; color: var(--ink); font-weight: 650; }
.result-detail li span { color: var(--success); font-weight: 900; }
.result-equipment { position: relative; min-height: 440px; overflow: hidden; background: linear-gradient(145deg, #f8fbff, #eaf4ff); border: 1px solid var(--line); border-radius: 26px; }
.result-equipment::after { content: ""; position: absolute; right: -22%; bottom: -28%; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgba(0,173,238,.18), transparent 68%); }
.result-equipment img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.08); }
.result-price { display: grid; gap: 4px; margin-top: 28px; padding: 20px; background: var(--cyan-soft); border-radius: 16px; }
.result-price small, .result-price span { color: var(--muted); }
.result-price strong { color: var(--blue-950); font-size: clamp(1.25rem, 3vw, 1.9rem); }

@keyframes callFloat { 0%, 100% { transform: translateY(-22%); } 50% { transform: translateY(calc(-22% - 9px)); } }

@media (max-width: 900px) {
  .campaign-banner { grid-template-columns: minmax(260px, 1fr) minmax(330px, 1.15fr); }
  .campaign-offer { grid-column: 1; grid-row: 1; padding-bottom: 12px; }
  .campaign-price { grid-column: 1; grid-row: 2; min-height: auto; margin: 0 26px 26px; }
  .campaign-visual { grid-column: 2; grid-row: 1 / 3; padding: 18px; }
  .result-hero { min-height: auto; padding-bottom: 40px; }
  .calling-card { position: relative; right: auto; top: auto; width: 100%; margin-top: 34px; transform: none; border-radius: 20px; animation: callPulse 2.7s ease-in-out infinite; }
  .result-detail { grid-template-columns: 1fr; }
  .result-equipment { grid-row: 1; min-height: 380px; }
  @keyframes callPulse { 0%, 100% { box-shadow: 0 18px 36px rgba(7,43,104,.22); } 50% { box-shadow: 0 20px 50px rgba(0,173,238,.35); } }
}

@media (max-width: 680px) {
  .quote-header { width: calc(100% - 24px); min-height: 66px; }
  .brand img { width: 48px; height: 48px; }
  .brand strong { font-size: .92rem; }
  .brand small { font-size: .68rem; }
  .header-phone { padding: 8px 10px; }
  .header-phone > span:first-child, .header-phone small { display: none; }
  .header-phone strong { font-size: .82rem; }

  /* Banner compacto: en vez de las 3 secciones grandes y apiladas del
     original (~360px de alto), es una sola tarjeta con foto + texto en dos
     líneas + precio, para que la primera pregunta quede visible sin
     scrollear en un celular común — sin quedar tan apretado que se vea mal.
     (Verisure, para tráfico de anuncio, directamente reemplaza todo esto
     por una sola imagen de diseño ya armada; acá seguimos con HTML/CSS en
     vivo porque el precio cambia por campaña y una imagen fija no podría.) */
  .campaign-banner {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    column-gap: 14px;
    grid-template-rows: none;
    width: calc(100% - 20px);
    min-height: 0;
    margin: 10px auto 16px;
    padding: 14px;
    border-radius: 18px;
  }
  .campaign-offer, .campaign-price, .campaign-visual { padding: 0; grid-row: 1; }
  .campaign-offer { grid-column: 2; min-width: 0; }
  .campaign-visual { grid-column: 1; align-self: center; margin: 0; padding: 0; }
  .campaign-chip { display: none; }
  .campaign-offer h1 { margin: 0 0 4px; line-height: 1.05; }
  .campaign-offer h1 strong { font-size: 1.44rem; letter-spacing: -.02em; }
  .campaign-offer h1 span { display: block; margin-top: 2px; font-size: .82rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
  .campaign-offer p { display: none; }
  .campaign-benefits { display: block; margin-top: 7px; }
  .campaign-benefits span { padding: 0; color: #dcecff; background: none; border: 0; font-size: .76rem; font-weight: 700; }
  .campaign-benefits span:not(:last-child)::after { content: " · "; opacity: .6; }
  .campaign-price {
    grid-column: 3;
    align-self: center;
    margin: 0;
    padding: 0;
    text-align: right;
    background: none;
    border: 0;
    backdrop-filter: none;
  }
  .campaign-price > span { display: none; }
  .campaign-price strong { margin: 0; font-size: 1.34rem; line-height: 1.1; white-space: nowrap; }
  .campaign-price small { font-size: .78rem; font-weight: 700; }
  .campaign-price em { display: none; }
  .product-stage { min-height: 0; width: 52px; height: 52px; border-radius: 12px; }
  .product-stage::before { display: none; }
  .product-stage img { transform: scale(1.5) translateY(4%); }
  .product-label, .product-note { display: none; }

  .quote-shell { width: calc(100% - 20px); }
  .phase-row { font-size: .62rem; }
  .question-card { min-height: 0; padding: 16px 18px 18px; border-radius: 20px; }
  .question-meta { align-items: flex-start; }
  .mode-badge { font-size: .65rem; }
  .question-card h2 { margin-top: 10px; font-size: 1.55rem; }
  .question-help { margin-bottom: 12px; font-size: .88rem; }
  .option-grid { grid-template-columns: 1fr; gap: 8px; }
  .option-button { min-height: 54px; padding-top: 9px; padding-bottom: 9px; }
  /* Pasos con formulario (contacto): menos aire entre campos para que el
     botón final entre sin scrollear en un celular común. Un lead perdido
     por no ver el botón "Registrar" es peor que un formulario un poco más
     compacto. */
  .field-layout { gap: 12px; }
  /* El aviso de "30 años de trayectoria" es lindo pero no imprescindible
     para completar el formulario — en mobile, donde cada pixel de alto
     importa para que el botón final entre sin scrollear, se saca. Sigue
     visible en desktop. */
  .contact-trust { display: none; }
  .field-hint { font-size: .7rem; }
  .field-row { grid-template-columns: 1fr; }
  .question-actions { align-items: flex-end; }
  .secure-note { max-width: 150px; text-align: right; }
  .result-main { width: calc(100% - 20px); margin-top: 4px; }
  .result-hero { padding: 28px 20px; border-radius: 20px; }
  .case-line { align-items: flex-start; }
  .case-line strong { font-size: .9rem; }
  .check-icon { width: 43px; height: 43px; border-width: 3px; font-size: 1.35rem; }
  .result-hero h1 { margin-top: 26px; font-size: 2.65rem; }
  .result-timeline { grid-template-columns: repeat(4, minmax(66px, 1fr)); margin-top: 42px; overflow-x: auto; padding: 3px; }
  .result-timeline strong { font-size: .65rem; }
  .calling-card { padding: 23px; }
  .contact-band { padding: 36px 18px; border-radius: 20px; }
  .result-detail { gap: 24px; padding: 28px 20px; border-radius: 20px; }
  .result-equipment { min-height: 300px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* V3: banner fotográfico 099 con texto dinámico en HTML. La imagen de
   alta resolución funciona solo como fondo: precio, promoción y beneficios
   conservan nitidez y pueden cambiar según la campaña. */
.phone-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(145deg, #44b8f4 0%, #2876df 52%, #164bb4 100%);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 13px;
  box-shadow: 0 9px 21px rgba(20, 79, 181, .3), inset 0 1px 0 rgba(255,255,255,.35);
}
.phone-icon svg { display: block; width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0,20,70,.22)); }
.calling-phone-icon { display: grid; place-items: center; color: #fff; }
.calling-phone-icon svg { width: 1em; height: 1em; }

.campaign-banner {
  grid-template-columns: minmax(0, 1fr) minmax(250px, .42fr);
  min-height: 230px;
  background-image:
    linear-gradient(90deg, rgba(3,17,48,.96) 0%, rgba(7,27,75,.83) 55%, rgba(7,27,75,.42) 100%),
    url("../img/fondo-casa-neon-099.webp");
  background-size: cover;
  background-position: center;
}
.campaign-banner::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent);
}
.campaign-offer { padding: clamp(27px, 3vw, 40px); }
.campaign-chip {
  display: inline-flex;
  padding: 6px 11px;
  color: var(--blue-950);
  background: var(--cyan);
  font-size: .68rem;
}
.campaign-offer h1 { margin: 13px 0 8px; }
.campaign-offer h1 strong { font-size: clamp(3.2rem, 5.3vw, 4.8rem); }
.campaign-offer h1 span { margin-top: 7px; font-size: clamp(1rem, 1.6vw, 1.3rem); }
.campaign-offer p {
  margin-top: 8px;
  color: #75ddff;
  font-size: .92rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.campaign-benefits { margin-top: 8px; }
.campaign-benefits span { padding: 0; border: 0; background: transparent; font-size: .76rem; }
.campaign-price {
  align-self: center;
  min-height: 166px;
  margin: 20px 24px 20px 0;
  padding: 23px 22px;
  background: linear-gradient(150deg, rgba(13,47,114,.88), rgba(8,118,182,.68));
  border-color: rgba(255,255,255,.28);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(1,16,49,.27), inset 0 1px rgba(255,255,255,.16);
}
.campaign-price > span { color: #a9e8ff; }
.campaign-price strong { font-size: clamp(1.8rem, 3vw, 2.7rem); }

.result-equipment {
  isolation: isolate;
  padding: 28px;
  background-image:
    linear-gradient(145deg, rgba(3,17,48,.38), rgba(8,105,174,.2)),
    url("../img/fondo-casa-neon-099.webp");
  background-size: cover;
  background-position: 74% center;
  border-color: rgba(0,173,238,.26);
  box-shadow: 0 22px 54px rgba(7,27,75,.2);
}
.result-equipment::after { z-index: 0; right: -18%; bottom: -36%; background: radial-gradient(circle, rgba(0,173,238,.38), transparent 68%); }
.result-equipment img {
  z-index: 1;
  inset: 8% 7% 12%;
  width: 86%;
  height: 80%;
  padding: 10px;
  object-fit: contain;
  mix-blend-mode: normal;
  transform: none;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(2,16,48,.25);
}
.result-equipment .product-label { z-index: 3; }
.equipment-caption {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 17px;
  left: 18px;
  padding: 10px 13px;
  color: #fff;
  background: rgba(7,27,75,.88);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 13px;
  font-size: .7rem;
  font-weight: 800;
  text-align: center;
  backdrop-filter: blur(8px);
}
.result-site-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 20px 24px;
  color: #fff;
  background: linear-gradient(120deg, var(--blue-950), var(--blue-700));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.result-site-cta span { display: grid; gap: 3px; }
.result-site-cta small { color: #bfeeff; font-weight: 700; }
.result-site-cta strong { font-size: clamp(1rem, 2.2vw, 1.25rem); }
.result-site-cta b { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; background: var(--cyan); border-radius: 14px; font-size: 1.35rem; }
.result-site-cta:hover { transform: translateY(-2px); box-shadow: 0 24px 60px rgba(7,27,75,.24); }

@media (min-width: 681px) and (max-width: 900px) {
  .campaign-banner { grid-template-columns: minmax(0, 1fr) minmax(235px, .48fr); }
  .campaign-offer { grid-column: 1; grid-row: 1; padding: 28px; }
  .campaign-price { grid-column: 2; grid-row: 1; min-height: 170px; margin: 22px 22px 22px 0; }
}

@media (max-width: 680px) {
  .quote-header { min-height: 74px; }
  .brand img { width: 54px; height: 54px; }
  .brand strong { font-size: .94rem; }
  .brand small { font-size: .69rem; }
  .header-phone { gap: 0; padding: 7px; border-radius: 14px; }
  .header-phone > .phone-icon { display: grid; width: 38px; height: 38px; }
  .header-phone > span:last-child { display: none; }

  .campaign-banner {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 32%);
    aspect-ratio: 352 / 124;
    min-height: 0;
    max-height: none;
    padding: 11px 13px;
    column-gap: 10px;
    background-position: center;
  }
  .campaign-offer { grid-column: 1; padding: 0; }
  .campaign-chip { padding: 4px 8px; font-size: clamp(.46rem, 2vw, .58rem); }
  .campaign-offer h1 { margin: 5px 0 1px; line-height: .91; }
  .campaign-offer h1 strong { font-size: clamp(1.72rem, 8.2vw, 2.05rem); letter-spacing: -.045em; }
  .campaign-offer h1 span { margin-top: 4px; font-size: clamp(.58rem, 2.7vw, .71rem); font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
  .campaign-offer p { display: block; margin: 6px 0 0; font-size: clamp(.5rem, 2.2vw, .62rem); letter-spacing: .03em; }
  .campaign-benefits { display: block; margin-top: 4px; }
  .campaign-benefits span { font-size: clamp(.46rem, 2vw, .57rem); }
  .campaign-price {
    grid-column: 2;
    align-self: stretch;
    justify-content: center;
    min-height: 0;
    margin: 2px 0;
    padding: 9px 10px;
    text-align: left;
    background: linear-gradient(150deg, rgba(13,47,114,.86), rgba(8,118,182,.68));
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 14px;
    backdrop-filter: blur(8px);
  }
  .campaign-price > span { display: block; font-size: clamp(.48rem, 2vw, .58rem); }
  .campaign-price strong { margin-top: 5px; font-size: clamp(.9rem, 4.2vw, 1.08rem); line-height: 1.05; white-space: normal; }
  .campaign-price small { font-size: clamp(.5rem, 2.15vw, .6rem); }
  .campaign-price em { display: none; }
  .result-equipment { padding: 18px; }
  .result-equipment img { inset: 7% 6% 13%; width: 88%; height: 80%; border-radius: 17px; }
  .equipment-caption { right: 12px; bottom: 12px; left: 12px; font-size: .62rem; }
  .result-site-cta { padding: 17px 18px; border-radius: 17px; }
}

/* Ajustes V3.1 solicitados tras la prueba real en mobile. */
.header-phone > span.phone-icon:first-child {
  display: grid;
  color: #fff;
}
.processing-overlay {
  background:
    radial-gradient(circle at 50% 44%, rgba(0,173,238,.18), transparent 18rem),
    rgba(3, 17, 48, .72);
  backdrop-filter: blur(8px);
}
.processing-card {
  width: min(360px, calc(100% - 32px));
  gap: 13px;
  padding: 34px 28px 29px;
  border: 1px solid rgba(255,255,255,.82);
  background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(237,247,255,.97));
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(2,16,48,.42), inset 0 1px 0 #fff;
}
.processing-card strong { font-size: 1.05rem; line-height: 1.35; }
.processing-card small { max-width: 270px; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.processing-orbit { position: relative; display: grid; place-items: center; width: 68px; height: 68px; }
.processing-orbit b { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; background: linear-gradient(145deg, var(--cyan), var(--blue-700)); border-radius: 16px; font-size: .82rem; box-shadow: 0 12px 28px rgba(0,173,238,.3); }
.processing-orbit i { position: absolute; inset: 0; border: 2px solid rgba(35,91,193,.12); border-top-color: var(--cyan); border-right-color: var(--blue-700); border-radius: 50%; animation: processingSpin 1s linear infinite; }
.processing-line { width: 100%; height: 5px; margin-top: 5px; overflow: hidden; background: #dfeafa; border-radius: 999px; }
.processing-line i { display: block; width: 42%; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--blue-700)); border-radius: inherit; animation: processingTravel 1.25s ease-in-out infinite; }
@keyframes processingTravel { 0% { transform: translateX(-105%); } 100% { transform: translateX(345%); } }

.result-equipment img {
  inset: 12% 4% 15%;
  width: 92%;
  height: 73%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  filter: drop-shadow(0 22px 22px rgba(0,8,28,.44));
  box-shadow: none;
}

/* La marca identifica el recorrido pero no funciona como salida. */
.brand { cursor: default; user-select: none; }
.calling-card { overflow: hidden; }
.calling-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  color: #dff7ff;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.calling-kicker::before { content: ""; width: 7px; height: 7px; background: #59e3ff; border-radius: 50%; box-shadow: 0 0 0 5px rgba(89,227,255,.13); }
.calling-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  display: none;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0;
  color: #fff;
  background: rgba(0,15,48,.18);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 680px) {
  .result-page { padding-bottom: 0; }
  .quote-header { gap: 8px; }
  .header-phone {
    display: inline-flex;
    gap: 7px;
    padding: 6px 8px 6px 6px;
    border-radius: 15px;
  }
  .header-phone > span.phone-icon:first-child { display: grid; width: 35px; height: 35px; border-radius: 11px; }
  .header-phone > span:last-child { display: grid; gap: 0; }
  .header-phone > span:last-child small { display: none; }
  .header-phone > span:last-child strong { font-size: .74rem; white-space: nowrap; }
  .campaign-price { justify-content: flex-start; }
  .campaign-price em { display: block; margin-top: 5px; color: #d9f3ff; font-size: clamp(.41rem, 1.65vw, .49rem); line-height: 1.25; }
  .result-equipment img { inset: 14% 2% 17%; width: 96%; height: 69%; }

  /* Aviso tipo llamada entrante integrado al contenido: anima como una
     llamada, pero nunca tapa información ni queda flotando en mobile. */
  .calling-card {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 20px 0 0;
    padding: 20px 18px;
    transform: none;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(1,15,48,.42), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(14px);
    animation: mobileCallIn .62s .25s cubic-bezier(.2,.9,.25,1.12) both, incomingGlow 2.6s 1.1s ease-in-out 3;
  }
  .calling-dismiss { display: none; }
  .calling-card .calling-kicker { margin-bottom: 9px; }
  .calling-card .calling-visual { position: absolute; top: 16px; right: 50px; gap: 5px; font-size: 1.35rem; }
  .calling-card .calling-visual span:first-child, .calling-card .calling-visual i { display: none; }
  .calling-card .calling-visual span:last-child { display: grid; place-items: center; width: 34px; height: 34px; background: linear-gradient(145deg, rgba(89,220,255,.38), rgba(28,104,224,.5)); border: 1px solid rgba(255,255,255,.25); border-radius: 12px; animation: phoneRing 1.8s 1.3s ease-in-out infinite; }
  .calling-card strong { margin-top: 0; padding-right: 4px; font-size: 1.14rem; }
  .calling-card p { max-width: 320px; margin-top: 4px; font-size: .75rem; line-height: 1.35; }
}

@media (max-width: 360px) {
  .quote-header { width: calc(100% - 16px); }
  .brand { gap: 7px; }
  .brand img { width: 48px; height: 48px; }
  .brand strong { font-size: .82rem; }
  .brand small { font-size: .59rem; }
  .header-phone { gap: 5px; padding-right: 6px; }
  .header-phone > span.phone-icon:first-child { width: 32px; height: 32px; }
  .header-phone > span:last-child strong { font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) {
  .processing-orbit i, .processing-line i { animation: none; }
}

@keyframes mobileCallIn {
  from { opacity: 0; transform: translateY(120%) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes incomingGlow {
  0%, 100% { box-shadow: 0 24px 70px rgba(1,15,48,.42), 0 0 0 0 rgba(0,184,238,.22); }
  50% { box-shadow: 0 28px 76px rgba(1,15,48,.48), 0 0 0 8px rgba(0,184,238,0); }
}
@keyframes phoneRing {
  0%, 66%, 100% { transform: rotate(0) scale(1); }
  72% { transform: rotate(10deg) scale(1.06); }
  78% { transform: rotate(-10deg) scale(1.06); }
  84% { transform: rotate(7deg) scale(1.03); }
  90% { transform: rotate(-5deg) scale(1.02); }
}

/* V3.5: acabado visual más limpio y tecnológico. */
body {
  background:
    radial-gradient(circle at 8% 14%, rgba(0,173,238,.075), transparent 25rem),
    radial-gradient(circle at 92% 38%, rgba(35,91,193,.055), transparent 28rem),
    var(--page);
}
.progress-track {
  height: 7px;
  border: 1px solid rgba(23,71,157,.07);
  background: #e3ebf5;
  box-shadow: inset 0 1px 3px rgba(7,27,75,.08);
}
.progress-track span {
  background: linear-gradient(90deg, var(--cyan), #2786eb 58%, var(--blue-700));
  box-shadow: 0 0 16px rgba(0,173,238,.32);
}
.question-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(23,71,157,.1);
  box-shadow: 0 22px 55px rgba(7,27,75,.09), inset 0 1px 0 rgba(255,255,255,.95);
}
.question-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--blue-700), transparent 86%);
}
.option-button {
  border-color: #d3e0ef;
  background: linear-gradient(145deg, #fff, #f8fbff);
  box-shadow: 0 5px 14px rgba(7,27,75,.035);
}
.option-button:hover, .option-button:focus-visible {
  border-color: #58bde8;
  box-shadow: 0 10px 25px rgba(0,126,192,.11), 0 0 0 3px rgba(0,173,238,.055);
}
.option-button.is-committing {
  border-color: #65d9fa;
  box-shadow: 0 10px 24px rgba(23,71,157,.2), 0 0 0 3px rgba(0,173,238,.08);
}
.form-field input, .form-field select {
  border-color: #d3e0ef;
  background: linear-gradient(145deg, #fff, #fbfdff);
}
.mode-badge {
  border: 1px solid rgba(0,173,238,.14);
  background: linear-gradient(135deg, #e7f7ff, #eef4ff);
}
@media (hover: none) {
  .option-button:hover { transform: none; border-color: #d3e0ef; box-shadow: 0 5px 14px rgba(7,27,75,.035); }
  .option-button.is-committing:hover { transform: translateY(-1px); border-color: #65d9fa; box-shadow: 0 10px 24px rgba(23,71,157,.2), 0 0 0 3px rgba(0,173,238,.08); }
}

/* reCAPTCHA v3 invisible: Google permite ocultar la insignia si el aviso con
   enlaces a Privacidad y Términos permanece visible junto al formulario. */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-notice { margin: -2px 0 4px; color: var(--muted); font-size: .62rem; line-height: 1.45; text-align: center; }
.recaptcha-notice a { color: var(--blue-700); }

/* V3.6: carga con la marca real y recorrido mobile más corto. */
.processing-orbit {
  width: 76px;
  height: 76px;
}
.processing-orbit img {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 9px 15px rgba(11,75,179,.24));
}
.processing-orbit i { border-width: 3px; }

@media (max-width: 680px) {
  main { padding-bottom: 36px; }
  .quote-header {
    min-height: 64px;
  }
  .brand img {
    width: 46px;
    height: 46px;
  }
  .header-phone > span.phone-icon:first-child {
    width: 33px;
    height: 33px;
  }
  .campaign-banner {
    height: 110px;
    min-height: 110px;
    aspect-ratio: auto;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 9px 12px;
    border-radius: 17px;
  }
  .campaign-chip { padding: 3px 7px; }
  .campaign-offer h1 { margin-top: 4px; }
  .campaign-offer h1 strong { font-size: clamp(1.62rem, 7.7vw, 1.9rem); }
  .campaign-offer h1 span { margin-top: 3px; }
  .campaign-offer p { margin-top: 5px; }
  .campaign-benefits { margin-top: 3px; }
  .campaign-price { padding: 8px 9px; }
  .campaign-price strong { margin-top: 4px; }
  .campaign-price em { margin-top: 3px; }
  .phase-row { margin-bottom: 5px; }
  .progress-track { height: 6px; }
  .question-card {
    margin-top: 9px;
    padding: 14px 16px 17px;
  }
  .question-card h2 {
    margin-top: 8px;
    font-size: 1.42rem;
  }
  .question-help { margin-bottom: 10px; }
  .option-button {
    min-height: 50px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* V3.7: un mismo banner mobile en Cotizador y ZERO, sin texto cortado. */
.campaign-price-prefix {
  margin-top: 6px;
  color: #d9f3ff;
  font-weight: 800;
}

/* La tarjeta acompaña la pantalla y puede cerrarse, como una llamada entrante. */
.result-page .calling-card {
  position: fixed;
  top: auto;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  transform: none;
  border-radius: 22px;
  animation: floatingCall 2.7s ease-in-out infinite;
}
.result-page .calling-dismiss { display: grid; }
.result-page .calling-card[hidden] { display: none !important; }

@keyframes floatingCall {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (max-width: 680px) {
  .campaign-banner {
    grid-template-columns: minmax(0, 1.08fr) minmax(145px, .92fr);
    height: 142px;
    min-height: 142px;
    margin-top: 6px;
    margin-bottom: 10px;
    padding: 13px 14px;
    column-gap: 11px;
    overflow: hidden;
  }
  .campaign-chip { padding: 4px 8px; font-size: 8px; }
  .campaign-offer h1 { margin: 7px 0 0; line-height: .88; }
  .campaign-offer h1 strong { font-size: clamp(30px, 8.5vw, 34px); line-height: .88; }
  .campaign-offer h1 span { margin-top: 5px; font-size: 9.5px; line-height: 1.1; }
  .campaign-offer p { margin-top: 8px; font-size: 8.3px; line-height: 1.2; }
  .campaign-benefits { margin-top: 4px; }
  .campaign-benefits span { font-size: 8px; line-height: 1.15; }
  .campaign-price {
    align-self: stretch;
    justify-content: center;
    margin: 0;
    padding: 11px 12px;
    border-radius: 15px;
  }
  .campaign-price > span { font-size: 8px; }
  .campaign-price-prefix { margin-top: 8px; font-size: 8.7px; line-height: 1; }
  .campaign-price strong { margin-top: 1px; font-size: clamp(22px, 6.2vw, 25px); line-height: 1.02; white-space: nowrap; }
  .campaign-price > small:not(.campaign-price-prefix) { margin-top: 5px; font-size: 8.5px; line-height: 1.15; }
  .campaign-price em {
    display: block;
    margin-top: 6px;
    color: #d9f3ff;
    font-size: 7px;
    line-height: 1.3;
  }

  #submit-prototype {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    justify-self: stretch;
    text-align: center;
  }
  #submit-prototype span { display: inline-block; line-height: 1; }
  #submit-prototype + .recaptcha-notice { margin: 2px 0 0; }

  .result-page .calling-card {
    position: fixed;
    inset: auto 14px calc(16px + env(safe-area-inset-bottom));
    z-index: 60;
    width: auto;
    max-width: 430px;
    margin: 0 auto;
    padding: 20px 52px 20px 18px;
    border-radius: 22px;
    animation: mobileCallIn .62s .25s cubic-bezier(.2,.9,.25,1.12) both, incomingGlow 2.6s 1.1s ease-in-out 3;
  }
  .result-page .calling-dismiss {
    top: 12px;
    right: 12px;
    display: grid;
  }
  .result-page .calling-card .calling-visual { right: 52px; }
}
.duplicate-notice {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 22px;
  text-align: center;
  border: 1px solid rgba(30, 169, 255, 0.28);
  border-radius: 18px;
  background: rgba(30, 169, 255, 0.08);
}

.duplicate-notice__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  border-radius: 50%;
  background: #168de2;
}

.duplicate-notice p {
  margin: 0;
  color: var(--muted, #536579);
}

.duplicate-notice__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.duplicate-notice__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 14px;
  text-decoration: none;
}

@media (max-width: 540px) {
  .duplicate-notice__actions {
    grid-template-columns: 1fr;
  }
}