/* Investment estimator. From the Estimador design.
   Reuses .reveal / .js-reveal from how-it-works.css and js/reveal.js. */

.estimator {
  background: var(--surface);
  color: var(--on-surface);
  padding-block: 48px 44px;
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.estimator__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.estimator__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-lime);
}
.estimator__eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: currentColor;
}

.estimator__title {
  font-size: var(--text-display);
  font-weight: var(--fw-bold);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.estimator__lead {
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--on-surface-muted);
}

.estimator__layout {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 26px;
}

/* FORM */
.estimator__form {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.estimator__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.estimator__label {
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  color: var(--color-white);
}
.estimator__hint {
  margin-top: -4px;
  font-size: 1rem;
  line-height: 1.45;
  color: rgb(255 255 255 / 0.75);
}

/* Doctor stepper */
.estimator__stepper {
  display: flex;
  align-items: center;
  gap: 14px;
}
.estimator__step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-white);
  font-size: 1.5rem;
  font-weight: var(--fw-light);
  cursor: pointer;
}
.estimator__step-btn:hover { border-color: var(--color-sky); }
.estimator__step-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.estimator__step-input {
  flex: 1;
  min-width: 0;
  height: 56px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 0.06);
  color: var(--color-white);
  font: inherit;
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  text-align: center;
  outline: none;
}
.estimator__step-input:focus {
  border-color: var(--color-sky);
  box-shadow: 0 0 0 3px rgb(157 196 213 / 0.35);
}

/* Segmented controls (WhatsApp numbers, volume) */
.estimator__segments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.estimator__segment {
  flex: 1;
  min-width: fit-content;
  height: 48px;
  padding-inline: 18px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-white);
  font: inherit;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.estimator__segment:hover { border-color: var(--color-sky); }
.estimator__segment[aria-pressed='true'] {
  border-color: var(--color-sky);
  background: var(--color-sky);
  color: var(--color-forest);
  font-weight: var(--fw-semibold);
}
/* Volume pills are round, WhatsApp-number segments use the standard field radius. */
.estimator__segments--pill .estimator__segment { border-radius: var(--radius-pill); flex: none; }

/* Scope checkboxes */
.estimator__base-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgb(157 196 213 / 0.3);
  border-radius: var(--radius-md);
  background: rgb(157 196 213 / 0.12);
}
.estimator__base-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 7px;
  background: var(--color-lime);
  color: var(--color-forest);
}
.estimator__base-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.estimator__base-title { font-size: 1rem; font-weight: var(--fw-medium); color: var(--color-white); }
.estimator__base-note { font-size: 0.875rem; color: rgb(255 255 255 / 0.82); }

.estimator__check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.estimator__check:hover { border-color: var(--color-sky); }
.estimator__check:has(input:checked) {
  border-color: var(--color-lime);
  background: rgb(224 222 44 / 0.08);
}
.estimator__check input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.estimator__check-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 7px;
  color: var(--color-forest);
}
.estimator__check:has(input:checked) .estimator__check-box {
  border-color: var(--color-lime);
  background: var(--color-lime);
}
.estimator__check-box svg { display: none; }
.estimator__check:has(input:checked) .estimator__check-box svg { display: block; }
.estimator__check-label { font-size: 1rem; line-height: 1.4; color: var(--color-white); }

.estimator__submit {
  height: 56px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-lime);
  color: var(--color-forest);
  font: inherit;
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.estimator__submit:hover { background: var(--color-lime-hover); }

.estimator__note {
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.18);
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.82);
}

/* RESULT */
.estimator__result {
  display: none;
  flex-direction: column;
}
.estimator[data-state='result'] .estimator__result { display: flex; }

/* On phones, calculating replaces the form with the result (matches the design's
   mobile states); "Nueva estimación" brings the form back. On desktop the
   form stays visible next to the result (see the 900px block below) — this
   rule is capped to below that width so it can't outrank the desktop
   override on specificity. It used to have no cap, and because
   ".estimator[data-state='result'] .estimator__form" (0,3,0) beats a plain
   ".estimator__form" (0,1,0) regardless of which media query it's in, the
   desktop override never actually won: the form silently stayed
   display:none after the first Calcular, so a second edit-and-recalculate
   was impossible without reloading (found while testing the reset button,
   2026-09-24). */
@media (max-width: 899px) {
  .estimator[data-state='result'] .estimator__form { display: none; }
}

/* Two mutually exclusive states inside .estimator__result, independent of
   the mobile/desktop split above: before Calcular is pressed, a plain
   placeholder — never a pre-filled number, since nothing has actually been
   estimated yet (Andrés's call, 2026-09-24). After, the real content. */
.estimator__placeholder {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 260px;
  padding: 32px;
  border: 1px dashed rgb(255 255 255 / 0.25);
  border-radius: var(--radius-lg);
}
.estimator[data-state='form'] .estimator__placeholder { display: flex; }
.estimator__placeholder-title {
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  color: var(--color-white);
}
.estimator__placeholder-text {
  max-width: 38ch;
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.75);
}

.estimator__result-content {
  display: none;
  flex-direction: column;
  gap: 20px;
}
.estimator[data-state='result'] .estimator__result-content { display: flex; }

.estimator__answers {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.estimator__answers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.estimator__answers-label {
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
}
/* Visual styling comes from the shared .btn/.btn--secondary/.btn--compact
   classes now (Andrés's feedback, 2026-09-24: the old text-link style read
   as decoration, not as an obvious "start over" action). This class is
   just the JS hook + a flex-shrink guard next to the label. */
.estimator__change { flex: none; }
.estimator__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.estimator__chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: 13px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.08);
  font-size: 0.9375rem;
  color: var(--color-white);
}

.estimator__value {
  padding: 26px 20px;
  border: 1px solid rgb(224 222 44 / 0.35);
  border-radius: var(--radius-lg);
  background: rgb(224 222 44 / 0.1);
}
/* Short fade behind the headline number each time it's (re)calculated. */
.estimator__value--pop { animation: estimator-value-pop 0.3s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes estimator-value-pop {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .estimator__value--pop { animation: none; }
}
.estimator__value-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-lime);
}
.estimator__value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.estimator__value-prefix { font-size: 1.375rem; font-weight: var(--fw-light); color: var(--color-white); }
.estimator__value-num {
  font-size: 4.5rem;
  line-height: 0.92;
  font-weight: var(--fw-extralight);
  letter-spacing: -0.03em;
  color: var(--color-lime);
}
.estimator__value-period { display: block; margin-top: 4px; font-size: 1.125rem; color: var(--color-white); }
.estimator__value-basis { display: none; }

.estimator__highend-notice {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-sky);
  color: var(--color-forest);
}
.estimator__highend-notice strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.estimator__highend-notice p { font-size: 1rem; line-height: 1.5; font-weight: var(--fw-medium); }
.estimator__highend-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 12px;
  height: 44px;
  border-bottom: 2px solid var(--color-forest);
  color: var(--color-forest);
  font-size: var(--text-body);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.estimator__highend-link:hover { opacity: 0.75; }

.estimator__plans-title { font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--color-white); }

.estimator__plans {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}
.estimator__plan {
  padding: 20px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease;
}
.estimator__plan:hover { border-color: var(--color-sky); }
.estimator__plan--picked {
  border-color: var(--color-lime);
  background: rgb(224 222 44 / 0.08);
}
.estimator__plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.estimator__plan-name { font-size: 1.0625rem; font-weight: var(--fw-bold); color: var(--color-white); }
.estimator__plan-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-lime);
  color: var(--color-forest);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}
.estimator__plan-tag[hidden] { display: none; }
.estimator__plan-figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.estimator__plan-num { font-size: 2.5rem; line-height: 1; font-weight: var(--fw-extralight); color: var(--color-white); }
.estimator__plan-unit { font-size: 1rem; color: rgb(255 255 255 / 0.82); }
.estimator__plan-text { margin-top: 8px; font-size: 1rem; line-height: 1.5; color: rgb(255 255 255 / 0.82); }

.estimator__custom-note {
  margin-top: 4px;
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.86);
}
.estimator__custom-note strong {
  color: var(--color-lime);
  font-weight: var(--fw-semibold);
}

/* Consultorios grandes (tier "large"): no se calcula un precio real, así que las
   tres tarjetas de pago y la nota de personalización no aplican aquí. */
.estimator[data-tier='large'] .estimator__plans-block,
.estimator[data-tier='large'] .estimator__custom-note {
  display: none;
}

.estimator__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.18);
}
.estimator__disclaimer { font-size: 1rem; line-height: 1.5; color: rgb(255 255 255 / 0.82); }

@media (min-width: 600px) {
  .estimator__segments--pill .estimator__segment { flex: none; }
}

@media (min-width: 900px) {
  .estimator { padding-block: 88px; }

  .estimator__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: end;
  }
  .estimator__title { line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
  .estimator__lead { max-width: 48ch; margin-bottom: 6px; font-size: 1.1875rem; line-height: 1.6; }

  /* Two columns from first paint, not gated behind data-state='result' —
     on desktop the result panel sits beside the form the whole time
     (pre-populated with the default inputs' result, see estimator.js),
     so the doctor sees what the form produces before touching it instead
     of filling in four questions next to empty space (Andrés's feedback,
     2026-09-24). data-state still governs the mobile form/result swap. */
  .estimator__layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
    align-items: start;
    margin-top: 56px;
  }
  .estimator__form { display: flex; }
  .estimator__result { display: flex; }

  /* On desktop the answers chip echo is unnecessary: the form stays visible on the left. */
  .estimator__answers { display: none; }

  .estimator__value { padding: 40px; }
  .estimator__value-num { font-size: 7rem; }
  .estimator__value-basis {
    display: block;
    margin-top: 4px;
    max-width: 48ch;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: rgb(255 255 255 / 0.86);
  }
  .estimator__value-basis[hidden] { display: none; }

  .estimator__plans { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .estimator__plan-num { font-size: 2.25rem; }

  .estimator__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding-top: 24px;
  }
  .estimator__disclaimer { max-width: 52ch; }
}