/* =====================================================================
   Valorafy — Landing page
   Implements design-spec.md v3 (tokens, hero, floating card, steps).
   ===================================================================== */

/* ------------------------------ 1. Tokens ------------------------------ */
:root{
  --color-navy-base:#000033;
  --color-navy-panel:#0A0A3D;
  --color-navy-glass:rgba(0,0,51,.91);
  --color-green-primary:#009933;
  --color-green-hover:#007A28;
  --color-green-glow:rgba(0,153,51,.4);
  --color-text-primary:#FFFFFF;
  --color-text-secondary:#9CA6BF;
  --color-text-muted:#6B7280;
  --color-input-bg:#FFFFFF;
  --color-badge-white-bg:#FFFFFF;
  --color-divider:rgba(255,255,255,.08);

  /* Text tiers between --color-text-secondary and #fff. Introduced for the
     pricing table, where an included row must read brighter than an excluded
     one but still sit clearly under the plan name and the price. */
  --color-text-strong:#C6CEE0;
  --color-text-faint:#8794AE;
  /* Green that stays legible as *text* on a dark green tint — the brand green
     is too dark against rgba(0,153,51,.16) to read. */
  --color-green-bright:#3ED27A;
  /* Icon on the one white surface on the site (the hero address pill). */
  --color-icon-on-light:#4B5563;

  --font:'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --radius-card:20px;
  --radius-field:14px;

  --shadow-card:0 20px 50px -10px rgba(0,0,0,.6), 0 0 30px rgba(0,153,51,.15);
  --glow-green:drop-shadow(0 0 4px rgba(0,153,51,.5));

  --container:1240px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --header-h:96px;
}

/* ------------------------------ 2. Reset ------------------------------ */
*,*::before,*::after{box-sizing:border-box}
/* [hidden] and a class rule (e.g. .mobile-menu{display:flex}) are equal
   specificity, so the later rule wins and can silently un-hide a fixed,
   full-screen overlay — it then eats every click on the page even at
   opacity:0. Force the attribute to win everywhere. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;
  font-family:var(--font);
  font-weight:600;
  background:var(--color-navy-base);
  color:var(--color-text-primary);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--color-green-primary);outline-offset:3px;border-radius:6px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* Lucide-style stroke icons */
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ------------------------------ 3. Buttons ------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:600;font-size:1rem;letter-spacing:.005em;
  padding:.95rem 1.6rem;border-radius:var(--radius-field);
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn .ico{width:1.15em;height:1.15em}
/* Transparent border so a filled button and an outlined one are the same box:
   without it .btn-outline's 1px border makes it 2px taller, and a primary +
   outline pair sits misaligned by a pixel. */
.btn-primary{background:var(--color-green-primary);color:#fff;border:1px solid transparent}
.btn-primary:hover{background:var(--color-green-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-lg{padding:1.15rem 2.2rem;font-size:1.0625rem}
.btn-block{width:100%}

/* ------------------------------ 4. Header ------------------------------ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--header-h);display:flex;align-items:center;
  transition:background-color .25s ease, backdrop-filter .25s ease, border-color .25s ease, height .25s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  height:74px;
  background:rgba(0,0,51,.93);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border-bottom-color:var(--color-divider);
}
.header-inner{display:flex;align-items:center;gap:2rem}
.brand{display:flex;align-items:center;flex:none}
.brand-logo{height:40px;width:auto;transition:height .25s ease}
.site-header.is-stuck .brand-logo{height:34px}

.nav-desktop{display:flex;align-items:center;gap:2.75rem;margin-left:auto}
.nav-desktop a{
  font-size:1rem;font-weight:600;color:var(--color-text-primary);opacity:.92;
  position:relative;padding-block:.35rem;transition:opacity .18s ease;
}
.nav-desktop a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--color-green-primary);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.nav-desktop a:hover{opacity:1}
.nav-desktop a:hover::after{transform:scaleX(1)}
.btn-nav{padding:.85rem 1.5rem}

.hamburger{display:none;padding:.35rem;font-size:28px;line-height:0;color:#fff}
.hamburger .ico{stroke-width:2}

/* -------------------------- 5. Mobile menu -------------------------- */
.mobile-menu{
  position:fixed;inset:0;z-index:80;background:var(--color-navy-base);
  display:flex;flex-direction:column;
  opacity:0;transition:opacity .22s ease;
}
.mobile-menu.is-open{opacity:1}
.mobile-menu-head{height:var(--header-h);display:flex;align-items:center;justify-content:space-between}
.mobile-menu-head .brand-logo{height:34px}
.mobile-menu-links{display:flex;flex-direction:column;gap:.25rem;padding-top:1.5rem}
.mobile-menu-links a:not(.btn){
  font-size:1.5rem;font-weight:600;padding:1rem 0;
  border-bottom:1px solid var(--color-divider);
}
.mobile-menu-links .btn{margin-top:1.75rem;padding:1.1rem}
body.menu-open{overflow:hidden}

/* ------------------------------ 6. Hero ------------------------------ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(1.5rem,4.5vh,3rem));
  padding-bottom:clamp(2rem,4.5vh,3rem);
}
/* The photo carries its own fades so they stay tied to the crop, not the hero box.
   --photo-top pushes the building's apex clear of the nav (spec-neutral tuning knob). */
.hero-photo{
  position:absolute;z-index:-2;
  top:var(--photo-top,12%);right:0;bottom:0;
  width:min(64%,1180px);
  background-image:
    linear-gradient(to bottom,
      var(--color-navy-base) 0%,
      rgba(0,0,51,.58) 4%,
      rgba(0,0,51,.10) 16%,
      rgba(0,0,51,.10) 54%,
      rgba(0,0,51,.80) 86%,
      var(--color-navy-base) 100%),
    linear-gradient(to right,
      var(--color-navy-base) 0%,
      rgba(0,0,51,.84) 20%,
      rgba(0,0,51,.40) 44%,
      rgba(0,0,51,.22) 72%,
      rgba(0,0,51,.26) 100%),
    url("assets/hero-building.jpg");
  background-size:100% 100%,100% 100%,cover;
  background-position:center,center,center right;
  background-repeat:no-repeat;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  gap:clamp(2rem,5vw,4rem);
  min-height:min(58vh,540px);
}

.eyebrow{
  font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-green-primary);margin-bottom:1.25rem;
}
.hero-copy h1{
  font-size:clamp(2.5rem,5.2vw,3.5rem);
  font-weight:800;line-height:1.08;letter-spacing:-.025em;
  max-width:9.2em;
}
.accent{color:var(--color-green-primary)}

.lede{
  font-weight:400;font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.6;
  color:var(--color-text-secondary);max-width:36em;
}
.hero-copy h1 + .lede{margin-top:1.5rem}
.lede-diff{margin-top:.75rem}

.address-form{
  display:flex;align-items:stretch;
  margin-top:2.25rem;
  background:var(--color-input-bg);
  border-radius:var(--radius-field);
  max-width:610px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55);
  overflow:hidden;
}
.address-field{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0;padding:0 1.25rem;height:68px}
.address-field .pin{width:22px;height:22px;color:var(--color-icon-on-light);stroke-width:1.8}
.address-field input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--font);font-size:1rem;font-weight:500;color:var(--color-navy-panel);
}
.address-field input::placeholder{color:var(--color-text-muted);font-weight:400}
.address-submit{border-radius:0;padding-inline:2rem;flex:none}

.trust-line{
  display:flex;align-items:center;gap:.6rem;margin-top:1.75rem;
  font-size:.9375rem;font-weight:500;color:var(--color-text-secondary);
}
.trust-line .check,.tick-list .check{color:var(--color-green-primary)}
.trust-line .check{width:18px;height:18px;stroke-width:2.4}

/* -------------------- 7. Floating valuation card -------------------- */
.hero-card-slot{display:flex;justify-content:flex-end}

.valuation-card{
  width:min(430px,100%);
  padding:1.75rem;
  border:1px solid var(--color-green-glow);
  border-radius:var(--radius-card);
  background:var(--color-navy-glass);
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
  box-shadow:var(--shadow-card);
}
@media (prefers-reduced-motion:no-preference){
  @keyframes card-float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-12px)}
  }
  .valuation-card.is-visible,
  html:not(.js) .valuation-card{animation:card-float 5.2s ease-in-out infinite}
}
.card-label{
  font-size:.8125rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--color-text-secondary);
}
.card-value-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.5rem}
.card-value{font-size:2.125rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.card-value .euro{font-size:.72em;font-weight:800}
.sparkline{width:118px;height:56px;flex:none;overflow:visible}
.spark-line{fill:none;stroke:var(--color-green-primary);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.spark-dot{fill:var(--color-green-primary);filter:drop-shadow(0 0 6px rgba(0,153,51,.85))}

.confidence-badge{
  display:flex;align-items:center;gap:.5rem;margin-top:.5rem;
  font-size:.875rem;font-weight:600;color:var(--color-green-primary);
  filter:var(--glow-green);
}
.confidence-badge .ico{width:18px;height:18px}

.card-divider{border-top:1px solid var(--color-divider);margin:1rem 0}

.card-range{display:flex;align-items:center;gap:.9rem}
.range-bound{font-size:.9375rem;font-weight:600;color:#fff;white-space:nowrap}
.range-track{position:relative;flex:1;height:2px;border-radius:2px;background:var(--color-green-primary)}
.range-dot{
  position:absolute;top:50%;left:50%;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--color-green-primary);
  box-shadow:0 0 8px rgba(0,153,51,.8);
}

/* ------------------------- 8. Hero step panel ------------------------- */
.steps-wrap{margin-top:clamp(1.75rem,4.5vh,3rem)}
.steps-panel{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--color-divider);
  border-radius:var(--radius-card);
  background:var(--color-navy-glass);
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
  overflow:hidden;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.6);
}
.step{
  display:flex;align-items:center;gap:1rem;
  padding:1.5rem 1.75rem;
  transition:background-color .18s ease;
}
.step + .step{border-left:1px solid var(--color-divider)}
.step:hover{background:rgba(255,255,255,.035)}
.step-badge{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--color-badge-white-bg);
  color:var(--color-navy-base);font-weight:700;font-size:1.0625rem;
}
.step-badge.is-first{color:var(--color-green-primary)}
.step-text{display:flex;flex-direction:column;min-width:0}
.step-title{font-size:1rem;font-weight:600;color:#fff}
.step-sub{font-size:.875rem;font-weight:400;color:var(--color-text-secondary);line-height:1.35;margin-top:.15rem}
.step .chev{display:none;width:18px;height:18px;color:var(--color-text-secondary);margin-left:auto}

/* ------------------------- 9. Generic sections -------------------------
   Rhythm audit (2026-09-06): section padding was clamp(4.5rem,10vw,7.5rem),
   which at desktop put 120px above *and* below every band — with a section
   head's own margin on top of that, the gap before a heading read as dead
   screen. Tightened one step across the board so the page scrolls as a
   continuous document instead of a stack of isolated slabs. Keep these three
   values in proportion if you change them; they set the whole page's rhythm. */
.section{padding:clamp(3.5rem,7vw,5.5rem) 0}
.section-alt{background:var(--color-navy-panel)}
.section-head{max-width:62ch;margin-bottom:clamp(2rem,4vw,2.75rem)}
h2{font-size:clamp(1.875rem,3.4vw,2.5rem);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.section-lede{
  margin-top:1.25rem;font-weight:400;font-size:1.0625rem;line-height:1.65;
  color:var(--color-text-secondary);max-width:58ch;
}
h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.01em}

.tick-list{display:flex;flex-direction:column;gap:.85rem;margin-top:1.75rem}
.tick-list li{
  display:flex;align-items:flex-start;gap:.75rem;
  font-weight:400;font-size:1rem;color:var(--color-text-secondary);line-height:1.5;
}
.tick-list .ico{width:20px;height:20px;margin-top:.15rem;stroke-width:2.4}
.tick-list li > span{flex:1;min-width:0}

/* -------------------------- 10. Comparison -------------------------- */
.compare{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(1rem,2.5vw,1.75rem);
  margin-bottom:.9rem;   /* the "Ejemplo ilustrativo" caption carries the gap */
}
.compare-card{
  padding:1.75rem;border-radius:var(--radius-card);
  border:1px solid var(--color-divider);background:rgba(255,255,255,.025);
}
.compare-card.is-featured{
  border-color:var(--color-green-glow);
  background:rgba(0,153,51,.06);
  box-shadow:0 0 34px rgba(0,153,51,.12);
}
.compare-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.compare-tag{font-size:.8125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--color-text-secondary)}
.condition-pill{
  font-size:.75rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;white-space:nowrap;
}
.cond-low{background:rgba(255,255,255,.07);color:var(--color-text-secondary)}
.cond-high{background:rgba(0,153,51,.16);color:var(--color-green-bright)}
.compare-price{font-size:clamp(1.75rem,3vw,2.125rem);font-weight:800;letter-spacing:-.02em;margin-top:1rem}
.compare-price .euro{font-size:.72em}
.compare-list{margin-top:1.25rem;border-top:1px solid var(--color-divider)}
.compare-list li{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--color-divider);
  font-size:.9375rem;
}
.compare-list li:last-child{border-bottom:0}
.compare-list span{font-weight:400;color:var(--color-text-secondary)}
.compare-list b{font-weight:600;color:#fff;text-align:right}
.compare-vs{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--color-divider);background:var(--color-navy-base);
  font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text-secondary);
}

/* --------------------------- 11. Features --------------------------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.feature{
  padding:1.75rem;border-radius:var(--radius-card);
  border:1px solid var(--color-divider);background:rgba(255,255,255,.025);
  transition:border-color .2s ease, transform .2s ease;
}
.feature:hover{border-color:var(--color-green-glow);transform:translateY(-3px)}
.feature-ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:rgba(0,153,51,.14);color:var(--color-green-primary);font-size:23px;
  margin-bottom:1.25rem;
}
.feature h3{margin-bottom:.6rem}
.feature p{font-weight:400;font-size:.9375rem;line-height:1.6;color:var(--color-text-secondary)}

/* --------------------------- 12. Timeline --------------------------- */
.timeline{display:grid;gap:0;max-width:820px}
.tl-item{display:flex;gap:1.5rem;padding-bottom:2.25rem;position:relative}
.tl-item:not(:last-child)::before{
  content:"";position:absolute;left:22px;top:52px;bottom:0;width:1px;
  background:linear-gradient(to bottom,var(--color-green-glow),var(--color-divider));
}
.tl-num{
  flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--color-badge-white-bg);color:var(--color-navy-base);
  font-weight:700;font-size:1.0625rem;
}
.tl-item:first-child .tl-num{color:var(--color-green-primary)}
.tl-body h3{margin-bottom:.5rem;padding-top:.55rem}
.tl-body p{font-weight:400;font-size:1rem;line-height:1.65;color:var(--color-text-secondary);max-width:56ch}

/* ---------------------------- 13. Stats ---------------------------- */
.confianza-grid,.agencias-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(2.5rem,5vw,4rem);align-items:center;
}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:1rem}
.stat{
  padding:1.5rem;border-radius:var(--radius-card);
  border:1px solid var(--color-divider);background:rgba(255,255,255,.025);
}
.stat-num{font-size:clamp(2rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.02em;color:var(--color-green-primary)}
.stat-num .unit{font-size:.6em}
.stat-label{margin-top:.4rem;font-weight:400;font-size:.875rem;line-height:1.45;color:var(--color-text-secondary)}

/* --------------------------- 14. Embed card --------------------------- */
.embed-card{
  border:1px solid var(--color-divider);border-radius:var(--radius-card);
  background:var(--color-navy-base);overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
}
.embed-head{
  display:flex;align-items:center;gap:.45rem;
  padding:.9rem 1.15rem;border-bottom:1px solid var(--color-divider);
  background:rgba(255,255,255,.03);
}
.embed-head .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.embed-file{margin-left:.75rem;font-size:.8125rem;font-weight:500;color:var(--color-text-secondary)}
.embed-code{
  margin:0;padding:1.5rem 1.25rem;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;
  font-size:.8125rem;line-height:1.75;color:#C7D0E4;
}
/* Syntax colours for the embedded code sample. Deliberately a local scheme
   rather than brand tokens: this block imitates a code editor, and the site
   palette has no equivalent roles to map them onto. */
.c-tag{color:#4FD1FF}
.c-attr{color:#8BE9A5}
.c-str{color:#FFD79A}
.c-punc{color:#6B7A99}
.embed-note{
  padding:1rem 1.25rem;border-top:1px solid var(--color-divider);
  font-weight:400;font-size:.875rem;color:var(--color-text-secondary);
}

/* ------------------------------ 15. FAQ ------------------------------ */
.faq{max-width:820px;border-top:1px solid var(--color-divider)}
.faq-item{border-bottom:1px solid var(--color-divider)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;font-size:1.0625rem;font-weight:600;cursor:pointer;list-style:none;
  transition:color .18s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--color-green-primary)}
.faq-mark{position:relative;flex:none;width:16px;height:16px}
.faq-mark::before,.faq-mark::after{
  content:"";position:absolute;top:50%;left:0;width:16px;height:2px;border-radius:2px;
  background:var(--color-green-primary);transform:translateY(-50%);transition:transform .22s ease;
}
.faq-mark::after{transform:translateY(-50%) rotate(90deg)}
.faq-item[open] .faq-mark::after{transform:translateY(-50%) rotate(0)}
.faq-item p{
  padding:0 0 1.5rem;max-width:64ch;
  font-weight:400;font-size:1rem;line-height:1.65;color:var(--color-text-secondary);
}

/* ---------------------------- 16. CTA band ---------------------------- */
.cta-band{
  background:linear-gradient(180deg,var(--color-navy-panel),var(--color-navy-base));
  border-top:1px solid var(--color-divider);
  padding:clamp(4rem,9vw,6.5rem) 0;
}
.cta-inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-inner p{
  margin-top:1.1rem;font-weight:400;font-size:1.0625rem;color:var(--color-text-secondary);max-width:52ch;
}
.cta-inner .btn{margin-top:2.25rem}

/* ----------------------------- 17. Footer ----------------------------- */
.site-footer{border-top:1px solid var(--color-divider);padding:clamp(3rem,6vw,4rem) 0 2rem}
.footer-grid{
  display:grid;grid-template-columns:2fr repeat(3,1fr);
  gap:clamp(2rem,4vw,3rem);
}
.footer-brand .brand-logo{height:34px}
.footer-brand p{margin-top:1.15rem;font-weight:400;font-size:.9375rem;line-height:1.6;color:var(--color-text-secondary);max-width:32ch}
.footer-col{display:flex;flex-direction:column;gap:.7rem}
.footer-col h4{font-size:.8125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:.35rem}
.footer-col a{font-weight:400;font-size:.9375rem;color:var(--color-text-secondary);transition:color .18s ease}
.footer-col a:hover{color:#fff}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.75rem;border-top:1px solid var(--color-divider);
  font-weight:400;font-size:.8125rem;color:var(--color-text-muted);
}

/* ----------------------- 17b. Address autocomplete -----------------------
   Shared by the hero field and the wizard's address field (autocomplete.js).
   Rendered as a single fixed-position panel appended to <body>, positioned
   over whichever input is active — a "portal" so it always escapes an
   ancestor's overflow:hidden (both the hero pill and the wizard's
   accordion clip normal-flow content). */
.geo-suggest{
  position:fixed;z-index:200;left:0;top:0;width:0;
  border:1px solid var(--color-divider);border-radius:var(--radius-field);
  background:var(--color-navy-glass);
  backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);
  box-shadow:0 20px 50px -14px rgba(0,0,0,.65);
  overflow:hidden;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
}
.geo-suggest.is-open{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .geo-suggest{transition:none}
}
.geo-suggest-list{max-height:min(320px,55vh);overflow-y:auto;margin:0;padding:.4rem;list-style:none}
.geo-suggest-item{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.65rem .7rem;border-radius:10px;cursor:pointer;
  transition:background-color .12s ease;
}
.geo-suggest-item + .geo-suggest-item{margin-top:2px}
.geo-suggest-item:hover,.geo-suggest-item.is-active{background:rgba(0,153,51,.14)}
.geo-suggest-pin{
  width:17px;height:17px;margin-top:.15rem;flex:none;
  fill:none;stroke:var(--color-green-primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
/* A street with no house number typed yet: shown so the visitor sees their
   street was found, but not a pick — nothing to place on a map without a
   number. Not clickable, not keyboard-navigable (see renderResults() in
   autocomplete.js); just keep typing and it turns into a real, selectable
   row on its own. */
.geo-suggest-hint{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.65rem .7rem;border-radius:10px;cursor:default;
}
.geo-suggest-hint + .geo-suggest-item,
.geo-suggest-item + .geo-suggest-hint{margin-top:2px}
.geo-suggest-hint .geo-suggest-pin{stroke:var(--color-text-secondary);opacity:.6}
.geo-suggest-hint .geo-suggest-line1{color:var(--color-text-secondary)}
.geo-suggest-hint .geo-suggest-line2{font-style:italic}
.geo-suggest-text{display:flex;flex-direction:column;min-width:0}
.geo-suggest-line1{font-size:.9375rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.geo-suggest-line2{font-size:.8125rem;font-weight:400;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem}
.geo-suggest-state{padding:.85rem .9rem;font-size:.875rem;font-weight:500;color:var(--color-text-secondary)}

/* --------------------------- 18. Reveal anim --------------------------- */
@media (prefers-reduced-motion:no-preference){
  /* .js is set by the inline head script, so content stays visible without JS */
  .js .reveal{
    opacity:0;transform:translateY(22px);
    transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1);
  }
  .js .reveal.from-above{transform:translateY(-22px)}
  .js .reveal.is-visible{opacity:1;transform:none}
}

/* --------------------------- 19. Legal pages ---------------------------
   terminos.html / privacidad.html — plain static content pages, same
   header/footer as the landing page, no JS. Paragraph styling mirrors
   .faq-item p (the closest existing long-prose precedent). */
/* 74px matches .is-stuck's own height, not the taller --header-h — these
   pages render the header permanently in its "stuck" state (see the HTML
   comment above <header>), so content needs to clear that height, not the
   base one. */
.legal-main{padding:calc(74px + clamp(2.5rem,6vw,4rem)) 0 clamp(4rem,8vw,6rem)}
.legal-content{max-width:68ch}
.legal-content h1{margin-bottom:.5rem}
.legal-meta{font-size:.875rem;font-weight:500;color:var(--color-text-muted);margin-bottom:2.5rem}
.legal-content h2{font-size:1.375rem;margin-top:2.5rem;margin-bottom:.85rem}
/* Only zero the gap when a heading directly follows the meta line (no lead
   paragraph between them) — .legal-meta already supplies that gap via its
   own margin-bottom, so h2's margin-top would double it. A page with an
   intro paragraph before its first h2 still needs the normal margin-top. */
.legal-meta + h2{margin-top:0}
.legal-content p{font-weight:400;font-size:1rem;line-height:1.65;color:var(--color-text-secondary)}
.legal-content p + p{margin-top:1rem}
.legal-content ul{margin-top:.75rem;display:flex;flex-direction:column;gap:.6rem}
.legal-content li{
  position:relative;padding-left:1.4rem;
  font-weight:400;font-size:1rem;line-height:1.65;color:var(--color-text-secondary);
}
.legal-content li::before{
  content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;
  border-radius:50%;background:var(--color-green-primary);
}
.legal-content strong{color:#fff;font-weight:600}
.legal-content a{color:var(--color-green-primary);text-decoration:underline;text-decoration-color:rgba(0,153,51,.4);text-underline-offset:.15em}
.legal-content a:hover{color:var(--color-green-hover)}
.legal-footnote{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--color-divider);
  font-size:.875rem;font-weight:400;line-height:1.6;color:var(--color-text-muted);
}

/* ---------------------- 20. Marketing page additions ----------------------
   Shared by index.html and agencias.html. Everything here is built out of
   the existing tokens — no new colours, no new motion tiers. */

/* Secondary button: same geometry as .btn, outlined instead of filled, so a
   two-CTA row reads as one primary + one alternative rather than two peers. */
.btn-outline{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.22);
}
.btn-outline:hover{border-color:var(--color-green-primary);color:var(--color-green-primary)}
.btn-outline:active{transform:translateY(1px)}

/* Hero sub-headline: carries the differentiator, so it sits between the h1
   and the explanatory lede with more weight than body copy but less than a
   heading — it is a line to be read, not a section title. */
.hero-sub{
  margin-top:1.35rem;max-width:22ch;
  font-size:clamp(1.1875rem,2vw,1.4375rem);font-weight:700;line-height:1.3;
  letter-spacing:-.01em;color:#fff;
}
.hero-sub + .lede{margin-top:1rem}

/* Reassurance pill under the hero. This started as a full-bleed bordered band
   and was wrong: a full band is the loudest device on the page, and this is
   the quietest content on it — a "just in case you were wondering" line, not
   a claim anyone came for. Demoted to a bordered pill sized to its text, in
   the same visual family as .condition-pill, so it reassures without
   interrupting the scroll. */
.trust-strip{padding:0 0 clamp(1.5rem,3vw,2.25rem)}
.trust-pill{
  display:inline-flex;align-items:flex-start;gap:.6rem;
  max-width:66ch;padding:.65rem 1.15rem;border-radius:999px;
  border:1px solid var(--color-green-glow);background:rgba(0,153,51,.06);
  text-align:left;
  font-weight:400;font-size:.875rem;line-height:1.5;color:var(--color-text-secondary);
}
.trust-pill .ico{width:17px;height:17px;margin-top:.15rem;flex:none;color:var(--color-green-primary);stroke-width:2.4}
.trust-pill b{color:#fff;font-weight:600}

/* "Ejemplo ilustrativo" — a caption. Centred and unadorned it read as a
   stray line of text; as a left-aligned tagged chip with a rule running off
   it, it reads as a deliberate figure caption belonging to the cards above. */
.example-label{
  display:flex;align-items:center;gap:.7rem;
  margin-bottom:clamp(2.25rem,4.5vw,3rem);
  font-weight:600;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-muted);
}
.example-label::before{
  content:"";flex:none;width:18px;height:1px;background:var(--color-text-muted);opacity:.55;
}
.example-label::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(to right,var(--color-divider),transparent);
}

/* Cross-sell above the homepage footer: a contained card, not a full-bleed
   coloured band. Reads as a considered aside rather than an ad break. */
.agency-band{padding:0 0 clamp(2.5rem,5vw,3.5rem)}
.agency-band a{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.15rem 1.35rem;border-radius:var(--radius-card);
  border:1px solid var(--color-divider);background:rgba(255,255,255,.025);
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease;
}
.agency-band a:hover{
  border-color:var(--color-green-glow);background:rgba(0,153,51,.06);
  transform:translateY(-2px);
}
.agency-band strong{display:block;font-size:.9375rem;font-weight:700;color:#fff}
.agency-band span{
  display:block;margin-top:.2rem;
  font-size:.875rem;font-weight:400;line-height:1.45;color:var(--color-text-secondary);
}
.agency-band .band-go{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(0,153,51,.14);color:var(--color-green-primary);font-size:17px;
  transition:background-color .18s ease;
}
.agency-band a:hover .band-go{background:rgba(0,153,51,.24)}

/* Sections that carry a photo instead of flat colour. Same layered technique
   as the two heroes: gradients baked into the element so the fades belong to
   the crop. The vertical ramp closes to solid navy at both edges so the
   section still butts cleanly against its plain neighbours. */
.section-photo{position:relative;isolation:isolate;overflow:hidden}
.nosotros-photo{
  position:absolute;z-index:-2;inset:0;
  background-image:
    linear-gradient(to right,
      var(--color-navy-base) 0%,
      var(--color-navy-base) 33%,
      rgba(0,0,51,.92) 48%,
      rgba(0,0,51,.62) 66%,
      rgba(0,0,51,.34) 86%,
      rgba(0,0,51,.44) 100%),
    linear-gradient(to bottom,
      var(--color-navy-base) 0%,
      rgba(0,0,51,.30) 16%,
      rgba(0,0,51,.30) 74%,
      rgba(0,0,51,.86) 94%,
      var(--color-navy-base) 100%),
    url("assets/nosotros-home.jpg");
  background-size:100% 100%,100% 100%,cover;
  background-position:center,center,center right;
  background-repeat:no-repeat;
}
/* Keeps the prose off the house rather than letting it run under it. */
.section-head-photo{max-width:min(58ch,56%)}

/* -------------------------- Agencias page -------------------------- */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:calc(var(--header-h) + clamp(2.5rem,6vw,4.25rem)) 0 clamp(3.5rem,7vw,5.5rem);
}
/* Full-bleed photo with the fades baked into the element, same technique as
   .hero-photo on the homepage. The horizontal ramp is doing the real work:
   it holds the left ~45% at near-solid navy so the headline and BOTH buttons
   sit on flat colour, and only releases the image where there is no text. */
.page-hero-photo{
  position:absolute;z-index:-2;inset:0;
  background-image:
    linear-gradient(to right,
      var(--color-navy-base) 0%,
      var(--color-navy-base) 32%,
      rgba(0,0,51,.92) 48%,
      rgba(0,0,51,.62) 66%,
      rgba(0,0,51,.24) 86%,
      rgba(0,0,51,.34) 100%),
    linear-gradient(to bottom,
      rgba(0,0,51,.62) 0%,
      rgba(0,0,51,.14) 22%,
      rgba(0,0,51,.14) 58%,
      rgba(0,0,51,.84) 88%,
      var(--color-navy-base) 100%),
    url("assets/agencias-hero.jpg");
  background-size:100% 100%,100% 100%,cover;
  background-position:center,center,center right;
  background-repeat:no-repeat;
}
/* Caps the copy column so the second, outlined button never drifts off the
   dark side and onto the skyline. 700px is not arbitrary: the two btn-lg
   buttons measure 334 + 320 + 16 gap = 670, so anything tighter wraps them
   into a stack and breaks the side-by-side pairing. */
.page-hero-copy{max-width:min(720px,68%)}
/* h1 sizing lives on .hero-copy h1, which is the homepage hero only — without
   this the agencias h1 falls back to the browser default 2em/32px. */
.page-hero h1{
  font-size:clamp(2.5rem,5.2vw,3.5rem);
  font-weight:800;line-height:1.08;letter-spacing:-.025em;
  max-width:14ch;
}
.page-hero .lede{margin-top:1.5rem;max-width:52ch}
.hero-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2.25rem}
.hero-actions-note{
  margin-top:1.15rem;font-weight:400;font-size:.9375rem;line-height:1.55;
  color:var(--color-text-secondary);max-width:44ch;
}

/* Browser mockup: the widget shown living inside somebody else's site. */
.mockup{
  border:1px solid var(--color-divider);border-radius:var(--radius-card);
  background:var(--color-navy-base);overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
}
.mockup-chrome{
  display:flex;align-items:center;gap:.45rem;
  padding:.9rem 1.15rem;border-bottom:1px solid var(--color-divider);
  background:rgba(255,255,255,.03);
}
.mockup-chrome .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.mockup-url{
  margin-left:.75rem;padding:.25rem .7rem;border-radius:999px;
  background:rgba(255,255,255,.05);
  font-size:.75rem;font-weight:500;color:var(--color-text-secondary);
}
.mockup-body{padding:1.25rem}
.mockup-nav{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--color-divider);
}
.mockup-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9375rem;color:#fff}
.mockup-brand span{width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.22)}
.mockup-links{display:flex;gap:.85rem;font-size:.75rem;color:var(--color-text-muted)}
.mockup-widget{
  margin-top:1.25rem;padding:1.15rem;border-radius:14px;
  border:1px solid var(--color-green-glow);background:rgba(0,153,51,.07);
}
.mockup-tag{
  display:inline-block;margin-bottom:.85rem;padding:.2rem .55rem;border-radius:999px;
  background:rgba(0,153,51,.18);color:var(--color-green-bright);
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.mockup-field{
  display:flex;align-items:center;gap:.55rem;padding:.7rem .85rem;border-radius:10px;
  background:#fff;color:var(--color-text-muted);font-size:.8125rem;font-weight:500;
}
.mockup-field .ico{width:15px;height:15px;color:var(--color-green-primary)}
.mockup-btn{
  margin-top:.6rem;padding:.7rem;border-radius:10px;text-align:center;
  background:var(--color-green-primary);color:#fff;font-size:.8125rem;font-weight:600;
}

/* ------------------------------ Pricing ------------------------------ */
/* Three plans now, and the whole section is meant to land in one viewport
   when the nav's "Precios" jumps here — so everything is a notch tighter
   than the two-plan version was. */
/* No scroll-margin here: html already sets scroll-padding-top for the fixed
   header, and the two stack — together they dropped the section 80px lower
   than needed and pushed the closing note off screen. */
#precios{padding-block:clamp(1.6rem,3.2vw,2.25rem)}
#precios .section-head{margin-bottom:clamp(1.25rem,2.4vw,1.6rem)}

.pricing-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,1.8vw,1.35rem);align-items:stretch;max-width:1120px;
}
.price-card{
  position:relative;padding:1.35rem 1.3rem;border-radius:var(--radius-card);
  border:1px solid var(--color-divider);background:rgba(255,255,255,.025);
  display:flex;flex-direction:column;
}
/* The recommended plan carries real visual weight — lift, accent border and
   glow — so the eye lands on it before it reads any price. */
.price-card.is-recommended{
  border-color:var(--color-green-glow);
  background:rgba(0,153,51,.07);
  box-shadow:0 0 54px rgba(0,153,51,.20), 0 0 0 1px rgba(0,153,51,.18);
  transform:translateY(-10px);
}
/* Expansión sits a step above Captación without competing with the
   recommended plan: a brighter edge, but the same ground as every other
   plain card — no lift and no glow, those belong to Conversión alone. A
   lighter background here read as a different navy tint next to Captación
   rather than as the same card family. */
.price-card.is-premium{
  border-color:rgba(255,255,255,.16);
}
.price-badge{
  position:absolute;top:-.8rem;left:1.35rem;
  padding:.35rem .9rem;border-radius:999px;
  background:var(--color-green-primary);color:#fff;
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 4px 14px -4px rgba(0,153,51,.6);
}
.price-name{font-size:1.125rem;font-weight:700;letter-spacing:-.01em}
.price-amount{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.price-from{font-size:.875rem;font-weight:500;color:var(--color-text-secondary)}
.price-now{font-size:clamp(1.75rem,3vw,2.125rem);font-weight:800;letter-spacing:-.02em}
.price-now .cents{font-size:.46em;font-weight:800;vertical-align:.62em;letter-spacing:0}
.price-now .per{font-size:.4em;font-weight:600;color:var(--color-text-secondary);letter-spacing:0}
.price-was{
  font-size:1rem;font-weight:500;color:var(--color-text-faint);
  text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.55);
  text-decoration-thickness:2px;
}

/* Coverage sits in its own outlined pill rather than as another checklist
   row: it is a scope statement about the plan, not a feature you get. Same
   device as the homepage trust pill, at list scale. */
.coverage-pill{
  display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  margin-top:.9rem;padding:.35rem .7rem;border-radius:999px;
  border:1px solid var(--color-divider);
  font-size:.75rem;font-weight:600;color:var(--color-text-secondary);
}
.coverage-pill .ico{width:14px;height:14px;flex:none;color:var(--color-text-secondary)}
.coverage-pill > span{min-width:0}
.coverage-pill.is-national{
  border-color:var(--color-green-glow);background:rgba(0,153,51,.09);
  color:var(--color-text-strong);
}
.coverage-pill.is-national .ico{color:var(--color-green-bright)}
.coverage-pill b{color:var(--color-green-bright);font-weight:700}

.price-list{display:flex;flex-direction:column;gap:.55rem;margin-top:1rem;flex:1}
.price-list li{
  display:flex;align-items:flex-start;gap:.6rem;
  font-weight:500;font-size:.875rem;line-height:1.45;color:var(--color-text-strong);
}
.price-list .ico{width:16px;height:16px;margin-top:.15rem;flex:none;stroke-width:2.9;color:var(--color-green-primary)}
/* The label is one flex item, not three. Without the wrapping span the <b>
   became its own item and picked up the row's gap, so an emphasised word
   rendered with a 10px trench either side of it. */
.price-list li > span{flex:1;min-width:0}
.price-list li.is-out{color:var(--color-text-muted)}
.price-list li.is-out .ico{color:var(--color-text-muted);opacity:.6}
/* Quiet emphasis on the one word that carries the plan's argument. */
.price-list b{color:var(--color-green-bright);font-weight:700}
.price-card .btn{margin-top:1.15rem;width:100%;justify-content:center;padding:.8rem 1.2rem;font-size:.9375rem}
.pricing-note{
  margin-top:clamp(.9rem,1.8vw,1.1rem);max-width:60ch;
  font-weight:400;font-size:.9375rem;line-height:1.65;color:var(--color-text-secondary);
}
.pricing-note b{color:#fff;font-weight:600}

/* ============================ 21. Breakpoints ============================ */

/* --- Small desktop: keep two columns, just tighten --- */
@media (max-width:1080px) and (min-width:901px){
  .nav-desktop{gap:1.75rem}
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2rem}
  .valuation-card{width:min(390px,100%);padding:1.5rem}
  .card-value{font-size:1.875rem}
  .btn-nav{padding:.8rem 1.25rem}
}

/* --- Tablet: stack the hero --- */
@media (max-width:900px){
  .nav-desktop{gap:1.75rem}
  .hero-grid{grid-template-columns:1fr;gap:2.5rem;min-height:0}
  .hero-copy h1{max-width:12em}
  .hero-card-slot{justify-content:flex-start}
  .valuation-card{width:min(430px,100%)}
  .hero-photo{
    --photo-top:9%;
    width:100%;
    background-image:
      linear-gradient(to bottom,
        var(--color-navy-base) 0%,
        rgba(0,0,51,.60) 5%,
        rgba(0,0,51,.30) 18%,
        rgba(0,0,51,.34) 52%,
        rgba(0,0,51,.86) 84%,
        var(--color-navy-base) 100%),
      linear-gradient(to right,
        var(--color-navy-base) 0%,
        rgba(0,0,51,.80) 34%,
        rgba(0,0,51,.42) 70%,
        rgba(0,0,51,.36) 100%),
      url("assets/hero-building.jpg");
  }
}

/* --- Two-up step panel from small desktop down --- */
@media (max-width:1080px){
  .steps-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step:nth-child(-n+2){border-bottom:1px solid var(--color-divider)}
  .step:nth-child(odd){border-left:0}
}

/* --- Mobile (spec Section 5) --- */
@media (max-width:768px){
  :root{--header-h:82px}

  .nav-desktop,.btn-nav{display:none}
  .hamburger{display:block;margin-left:auto}
  .brand-logo{height:34px}

  /* 5.2 — photo kept as a top-right cropped accent that dissolves into navy.
     The fades live on the photo element itself so they scale with the crop,
     not with the (much taller) hero. */
  .hero{padding-top:calc(var(--header-h) + 1.25rem);padding-bottom:2.5rem}
  .hero-photo{
    top:clamp(66px,9vh,84px);right:0;bottom:auto;left:auto;
    width:78%;height:clamp(230px,34vh,300px);opacity:1;
    background-image:
      linear-gradient(to bottom,
        var(--color-navy-base) 0%,
        rgba(0,0,51,.60) 10%,
        rgba(0,0,51,.22) 28%,
        rgba(0,0,51,.52) 64%,
        rgba(0,0,51,.90) 87%,
        var(--color-navy-base) 100%),
      linear-gradient(to right,
        var(--color-navy-base) 0%,
        rgba(0,0,51,.80) 24%,
        rgba(0,0,51,.22) 60%,
        rgba(0,0,51,.06) 100%),
      url("assets/hero-building.jpg");
    background-size:100% 100%,100% 100%,cover;
    background-position:center,center,60% center;
    background-repeat:no-repeat;
  }

  .hero-grid{min-height:0;gap:1.75rem}
  .eyebrow{margin-bottom:1rem}
  .hero-copy h1{font-size:clamp(2.125rem,10vw,2.625rem);max-width:6.3em;line-height:1.12}
  .lede{max-width:26em}
  .hero-copy h1 + .lede{margin-top:1.25rem}

  /* 5.3 — input and button are two separate fully-rounded blocks */
  .address-form{
    display:block;background:transparent;border-radius:0;box-shadow:none;overflow:visible;
    margin-top:1.75rem;max-width:none;
  }
  .address-field{
    height:60px;padding:0 1rem;gap:.625rem;
    background:var(--color-input-bg);border-radius:var(--radius-field);
    box-shadow:0 10px 26px -12px rgba(0,0,0,.5);
  }
  .address-field .pin{width:20px;height:20px}
  .address-field input{text-overflow:ellipsis}
  .address-submit{
    width:100%;height:60px;margin-top:.875rem;border-radius:var(--radius-field);
  }
  .trust-line{margin-top:1.35rem}

  /* 5.4 — card is a normal full-width block below the trust microcopy */
  .hero-card-slot{justify-content:stretch}
  .valuation-card{width:100%;padding:1.5rem}
  .card-value{font-size:2rem}

  /* 5.5 — steps become accordion-style rows in one rounded container */
  .steps-wrap{margin-top:1.75rem}
  .steps-panel{grid-template-columns:1fr}
  .step{padding:1.25rem;gap:.9rem}
  .step + .step{border-left:0;border-top:1px solid var(--color-divider)}
  .step:nth-child(-n+2){border-bottom:0}
  .step .chev{display:block}

  /* Sections */
  .compare{grid-template-columns:1fr;gap:1rem}
  .compare-vs{justify-self:center;width:44px;height:44px}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
}

@media (max-width:420px){
  .stat-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .range-bound{font-size:.875rem}
}

/* --- Marketing additions: mobile --- */
@media (max-width:900px){
  /* No room for a text column beside the skyline, so the photo becomes a
     background wash: the vertical ramp carries it and the horizontal one is
     flattened to keep every line legible over the image. */
  /* Same rule as the agencias hero below: portrait has no column to spare, so
     the photo moves out from behind the prose and becomes a band under it,
     fading up into navy. The text keeps flat colour; the house still gets to
     close the section. */
  .section-head-photo{max-width:none}
  /* The band is anchored to the section's bottom edge, so the section has to
     reserve that height as padding — otherwise the photo sits *behind* the
     closing paragraph instead of beneath it. Padding is kept a little taller
     than the band so the text never meets even the band's solid-navy head. */
  .section-photo{padding-bottom:clamp(190px,27vh,250px)}
  .nosotros-photo{
    top:auto;right:0;left:0;bottom:0;
    height:clamp(180px,26vh,240px);
    background-image:
      linear-gradient(to bottom,
        var(--color-navy-base) 0%,
        rgba(0,0,51,.72) 26%,
        rgba(0,0,51,.42) 62%,
        rgba(0,0,51,.36) 100%),
      url("assets/nosotros-home.jpg");
    background-size:100% 100%,auto 150%;
    background-position:center,72% 40%;
  }

  /* Three plans stop fitting side by side well before the phone breakpoint.
     A 2-column fallback would orphan the third card, so go straight to one. */
  .pricing-grid{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto}
  .price-card.is-recommended{transform:none}

  .page-hero-copy{max-width:none}
  /* Portrait: the photo stops being a full-bleed background and becomes a
     top band, the same move .hero-photo makes on the homepage. Spanning the
     whole hero meant the lede and both buttons sat on skyline no matter how
     the overlay was tuned — dark enough to read over is dark enough to hide
     the photo anyway, so the honest answer is to end the image above them.
     The band resolves to solid navy at its own bottom edge, which lands
     before the lede starts; everything from there down is flat colour.
     `auto 170%` zooms past `cover` (which would squeeze the whole 1707x921
     frame into a short strip and bury the skyline) so the crop can sit on
     the buildings, with the green arcs entering across the top. */
  .page-hero-photo{
    top:0;right:0;left:0;bottom:auto;
    height:clamp(210px,36vh,300px);
    /* Reaches solid navy at 78% of the band, not at its edge. The band is
       sized in vh but the lede's position is set by how many lines the h1
       wraps to — those two move independently across devices, so the fade
       finishes early enough that a phone which pulls the lede upward still
       meets flat colour rather than the tail of the photo. */
    background-image:
      linear-gradient(to bottom,
        rgba(0,0,51,.74) 0%,
        rgba(0,0,51,.79) 42%,
        rgba(0,0,51,.97) 68%,
        var(--color-navy-base) 78%,
        var(--color-navy-base) 100%),
      url("assets/agencias-hero.jpg");
    background-size:100% 100%,auto 170%;
    background-position:center,70% 85%;
    background-repeat:no-repeat;
  }
}

@media (max-width:768px){
  .page-hero{padding-top:calc(var(--header-h) + 2rem)}
  .page-hero h1{font-size:clamp(2.125rem,9vw,2.625rem);max-width:none}
  .page-hero .lede{max-width:none}
  .hero-actions{gap:.75rem}
  .hero-actions .btn{width:100%;justify-content:center}

  /* At this width the text wraps to ~4 lines, and a 999px radius on a 100px
     tall box reads as a bulbous stadium rather than a pill. Card radius keeps
     it a neat rounded rectangle. */
  .trust-pill{font-size:.8125rem;padding:.75rem 1rem;border-radius:var(--radius-card)}
  .agency-band a{padding:1rem 1.1rem;gap:1rem}

  /* Stacked, the lift reads as a misalignment rather than emphasis — the
     accent border and badge carry the hierarchy on their own here. */
  .price-card.is-recommended{transform:none}
  .price-card{padding:1.75rem 1.35rem}

  .trust-strip{padding:1.25rem 0}
  .agency-band a{padding:1.2rem 0;font-size:.9375rem;text-align:center}
}