/* Niche landings (distribuidoras.html, inmobiliarias.html): building blocks on top of styles.css,
   loaded after it. Each page's <body> carries .niche-page. The house rules stay: black and white,
   uppercase tracked labels, no colour except the green "live" dot. */

/* ---------- Hero ---------- */
/* The callout names the buyer, so it reads as a statement, not a trailing label */
.niche-page .callout { color: #fff; font-weight: 600; letter-spacing: .06em; }
.niche-page .callout::after { content: none; }
@media (min-width: 981px) { .niche-page .hero-grid { row-gap: 32px; } }

/* Proof strip: the case in one line, across the hero's full width under the copy and the card */
.proof { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px 28px;
  margin-top: clamp(8px, 2vw, 24px); padding-top: 22px; border-top: 1px solid #2a2a2a; }
.proof-label { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.proof-label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--live); vertical-align: 1px; }
.proof-text { font-size: 14.5px; line-height: 1.6; color: var(--on-dark-2); max-width: 88ch; }
.proof-link { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; }
.proof-link:hover { border-color: #fff; }

/* Phones and tablets: call-out, headline, pitch, CTA and the proof fit the first screen; the
   example card and the chips follow */
@media (max-width: 980px) {
  .niche-page .hero { padding-top: 96px; }
  .niche-page .hero-copy .rule { display: none; }
  .niche-page .hero-copy .lede { order: 3; margin-top: 16px; }
  .niche-page .hero-copy .hero-cta { order: 4; margin-top: 22px; }
  .niche-page .proof { order: 5; margin-top: 26px; padding-top: 18px; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .niche-page .stage { order: 6; }
  .niche-page .hero-copy .assure { order: 7; }
  .niche-page .hero-cta .link-quiet { align-self: center; }
}

/* ---------- Pain → solution ---------- */
/* Two columns with a head row on wide screens; on phones each row is a card and every cell shows its own label */
.ps { border-top: 2px solid var(--ink); }
.ps-head, .ps-row { display: grid; grid-template-columns: 1fr 1fr; }
.ps-head span { padding: 16px 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.ps-head span + span { padding-left: clamp(16px, 4vw, 48px); border-left: 1px solid var(--line); }
.ps-rows { list-style: none; margin: 0; padding: 0; }
.ps-row { border-top: 1px solid var(--line); }
.ps-row p { position: relative; padding: 20px 24px 20px 30px; font-size: 16px; line-height: 1.55; }
.ps-row .ps-new { padding-left: calc(clamp(16px, 4vw, 48px) + 30px); border-left: 1px solid var(--line); color: var(--ink); }
.ps-old { color: var(--muted); }
.ps-old::before, .ps-new::before { position: absolute; top: 20px; font-weight: 600; }
.ps-old::before { content: "×"; left: 0; }
.ps-new::before { content: "→"; left: clamp(16px, 4vw, 48px); }
.ps-k { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  .ps { border-top: 0; }
  .ps-head { display: none; }
  .ps-rows { display: grid; gap: 12px; }
  .ps-row { grid-template-columns: 1fr; border: 1px solid #d9d9d5; border-top: 2px solid var(--ink); background: #fff; }
  .ps-row p { padding: 16px 18px; }
  .ps-row .ps-new { padding-left: 18px; border-left: 0; border-top: 1px solid var(--line); background: var(--bg-soft); }
  .ps-old::before, .ps-new::before { content: none; }
  .ps-k { position: static; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip: auto; display: block;
    font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .ps-new .ps-k { color: var(--ink); }
}

/* Effort line under the steps */
.effort { margin-top: 28px; font-size: 15px; font-weight: 600; color: var(--ink); }

/* ---------- Case: before → after, step by step ---------- */
.case-lede { color: var(--ink); font-size: 18px; max-width: 64ch; margin-bottom: 14px; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.flow-step { padding: 24px clamp(12px, 1.6vw, 22px) 10px 0; display: grid; align-content: start; gap: 12px; }
.flow-step + .flow-step { padding-left: clamp(12px, 1.6vw, 22px); border-left: 1px solid #d9d9d5; }
.flow-n { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--muted); }
.flow h3 { font-size: 16px; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.3; }
.flow-before, .flow-after { font-size: 14.5px; line-height: 1.55; }
.flow-before { color: var(--muted); }
.flow-after { color: var(--ink); }
.flow-k { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.flow-after .flow-k::before { content: "→ "; }
@media (max-width: 1000px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-step, .flow-step + .flow-step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .flow-n { grid-row: 1 / span 3; padding-top: 2px; }
}
.figs-title { margin-top: clamp(40px, 5vw, 60px); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.case-figs { margin: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.case-figs div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 20px 20px 10px 0; }
.case-figs div + div { padding-left: 20px; border-left: 1px solid #d9d9d5; }
.case-figs dd { margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); overflow-wrap: anywhere; }
.case-figs dt { font-size: 13px; line-height: 1.45; color: var(--muted); }
@media (max-width: 760px) {
  .case-figs { grid-template-columns: minmax(0, 1fr); }
  .case-figs div, .case-figs div + div { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Offer stack as a checklist, with the bonus marked ---------- */
.offer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); max-width: 1000px; }
.offer li { position: relative; padding: 22px 24px 22px 34px; border-bottom: 1px solid var(--line); }
.offer li::before { content: "✓"; position: absolute; left: 0; top: 21px; font-weight: 600; color: var(--ink); }
.offer h3 { font-size: 16px; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.3; margin-bottom: 6px; }
.offer p { font-size: 15px; }
.offer .offer-bonus { grid-column: 1 / -1; margin-top: 14px; padding: 24px 22px 24px 54px; background: var(--ink); color: var(--on-dark-2); border: 0; }
.offer .offer-bonus::before { left: 22px; top: 25px; color: #fff; }
.offer-bonus h3 { color: #fff; }
.bonus-tag { display: inline-block; margin-bottom: 10px; padding: 3px 10px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 760px) { .offer { grid-template-columns: minmax(0, 1fr); } }

/* Scarcity: a plain fact next to the CTA */
.scarce { align-self: center; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }

/* ---------- Savings calculator (inside the .estimator layout from styles.css) ---------- */
.calc .est-inputs { gap: 22px; }
.calc-in input { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; max-width: 260px; }
.calc .est-figs dd { font-variant-numeric: tabular-nums; }
.calc .est-result .btn { justify-self: start; margin-top: 6px; }

/* ---------- Guarantee and contact ---------- */
.guar-fixed { color: #fff; font-weight: 600; }
.niche-page .contact .display { font-size: clamp(34px, 3.8vw, 52px); }

/* ---------- Hero with an illustrative WhatsApp chat (inmobiliarias.html: .hero-chat) ---------- */
/* Phones: call-out, headline, both CTAs, then the chat, so its first messages share the first screen;
   the pitch, chips and proof follow */
@media (max-width: 980px) {
  .niche-page .hero-chat .hero-copy .hero-cta { order: 3; margin-top: 20px; }
  .niche-page .hero-chat .stage { order: 4; margin-top: 20px; padding-block: 8px 24px; }
  .niche-page .hero-chat .hero-copy .lede { order: 5; margin-top: 8px; }
  .niche-page .hero-chat .hero-copy .assure { order: 6; }
  .niche-page .hero-chat .proof { order: 7; }
}
/* The headline is two sentences: a step smaller than the other heroes so the CTA stays in view */
.niche-page .hero-chat .display { font-size: clamp(32px, 3.1vw, 46px); }
/* "Consultas" / "Inquiries" is longer than the other stages' words: sized so it never widens the page */
.hero-chat .stage-word { font-size: clamp(54px, 8.4vw, 150px); }
.chat { position: relative; width: min(100%, 440px); background: #111; color: var(--on-dark-2); border: 1px solid #2a2a2a;
  box-shadow: 0 30px 80px rgba(0,0,0,.55); transform: rotate(-1.2deg); text-align: left; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #242424; }
.chat-avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; }
.chat-id { display: grid; min-width: 0; }
.chat-name { color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-status { font-size: 11.5px; color: #9a9a9a; }
.chat-status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--live); vertical-align: 1px; }
.chat-src { flex: none; margin-left: auto; padding: 3px 8px; border: 1px solid #3a3a3a; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #d6d6d6; }
.chat-log { list-style: none; margin: 0; padding: 14px; display: grid; gap: 8px; }
.msg { max-width: 86%; padding: 8px 11px 5px; font-size: 13.5px; line-height: 1.45; }
.msg-in { justify-self: start; background: #222; color: #e6e6e6; border-radius: 2px 10px 10px 10px; }
.msg-out { justify-self: end; background: #fff; color: var(--ink); border-radius: 10px 2px 10px 10px; }
.msg time { display: block; margin-top: 2px; text-align: right; font-family: var(--f-mono); font-size: 10.5px; color: #9a9a9a; }
.msg-out time { color: #5c5c5c; }
.chat-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 11px 14px; border-top: 1px solid #242424; font-size: 12px; }
.chat-foot span { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; }
.chat-foot b { color: #fff; font-weight: 600; }
/* The conversation writes itself in, one message at a time */
.stage .chat-log li { animation: rise .45s var(--ease) both; }
.stage .chat-log li:nth-child(1) { animation-delay: .4s; }
.stage .chat-log li:nth-child(2) { animation-delay: .8s; }
.stage .chat-log li:nth-child(3) { animation-delay: 1.2s; }
.stage .chat-log li:nth-child(4) { animation-delay: 1.6s; }
.stage .chat-log li:nth-child(5) { animation-delay: 2s; }
.stage .chat-log li:nth-child(6) { animation-delay: 2.4s; }
@media (prefers-reduced-motion: reduce) { .stage .chat-log li { animation: none; } }
@media (max-width: 560px) { .chat { transform: none; } .msg { font-size: 13px; } }

/* The argument above the calculator's own sub */
.calc-why { margin-bottom: 14px; }

/* ---------- Try it: example messages to send ---------- */
.try-qs { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-width: 60ch; }
.try-qs li { padding: 12px 16px; background: #fff; border: 1px solid #d9d9d5; border-left: 3px solid var(--ink); font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.try-note { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* Guarantee: the exclusions in small print under the promise */
.guar-terms { margin-top: 14px; font-size: 13px; line-height: 1.55; color: #9a9a9a; max-width: 64ch; }