:root{
  --brand:#d9001a;
  --beige:#efe4dc;
  --text:#1f1f1f;
  --muted:#6b6b6b;
  --border:#e8e8e8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);line-height:1.35;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
.container{max-width:1200px;margin-inline:auto;padding:0 16px}
.site-header{padding:18px 0;display:flex;justify-content:center}
.logo{height:34px;width:auto}

.hero{display:grid;gap:16px;align-items:start;grid-template-columns:1fr}
.hero-media{position:relative}
#mainImage{width:100%;height:auto;aspect-ratio:21/12;object-fit:cover;border-radius:12px}

.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:8px;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.02));border-radius:12px}
.thumbs .thumb{position:relative;border:0;background:transparent;padding:0;cursor:pointer;border-radius:10px;overflow:hidden;outline:none;height:64px}
.thumbs .thumb img{width:100%;height:100%;object-fit:cover}
.thumb-tag{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.45);color:#fff;font-weight:600;font-size:.72rem;padding:2px 6px;border-radius:999px}
.thumbs .thumb::after{content:"";position:absolute;inset:0;border:3px solid transparent;border-radius:10px}
.thumbs .thumb.active::after{border-color:var(--brand)}

.cta{display:block;text-align:center;text-decoration:none;background:var(--brand);color:#fff;font-weight:700;padding:14px 18px;border-radius:20px;box-shadow:0 8px 18px rgba(217,0,26,.18);transition:transform .1s ease, box-shadow .2s ease, opacity .2s;margin-top:10px}
.cta:hover{transform:translateY(-1px)}
.cta:active{transform:translateY(0)}
.helper{margin:6px 2px 0;color:#6d6d6d;text-align:center;font-size:.9rem}
.cta.large{padding:16px 22px;font-size:1.05rem}

.pitch{margin-top:20px;padding:18px;border-radius:14px;background:var(--beige)}
.pitch h2{margin:0 0 10px 0;font-size:1.2rem;font-weight:700;text-align:center}
.pitch .lead{margin:0 0 16px 0;color:#2b2b2b;text-align:center}
.cols{display:grid;gap:16px}
.cols h3{margin:10px 0;font-size:1.05rem}
.checks{margin:0;padding-left:0;list-style:none}
.checks li{position:relative;padding-left:28px;margin:10px 0}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 50% 50%, #fff 0 40%, transparent 41% 100%),conic-gradient(from 0deg,#2bbf5b 0 100%);mask:radial-gradient(circle at 50% 50%, transparent 0 45%, #000 46% 100%);box-shadow:inset 0 0 0 2px #2bbf5b}
.checks li::after{content:"";position:absolute;left:5px;top:8px;width:6px;height:10px;border:solid #2bbf5b;border-width:0 2px 2px 0;transform:rotate(45deg)}

.cta-bottom{text-align:center;padding:24px 0;margin:18px 0 10px}
.cta-bottom h3{margin:0 0 14px 0;font-weight:700}

.site-footer{background:#202020;color:#fff;text-align:center;padding:18px 12px;margin-top:6px}
.site-footer p{margin:0;font-size:.95rem}

@media (min-width: 1024px){.container{max-width:1100px}.kpi-value{font-size:36px}.thumbs .thumb{height:72px}}

.kpi-area{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "k1 k2"
    "cta cta";
  gap: 12px;
  margin-top: 10px;
}
.kpi-area > * { min-width: 0; } /* evita overflow raro en Safari iOS */

.kpi-area .kpi{
  grid-area: auto;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  padding: 12px 12px;
  text-align: center;
}
.kpi-area .kpi--superficie { grid-area: k1; }
.kpi-area .kpi--renta      { grid-area: k2; }

.kpi-area .kpi-title{ margin:0 0 6px; font-weight:400; color:#222; }
.kpi-area .kpi-value{ margin:0; font-size:32px; font-weight:700; line-height:1; }
.kpi-area .kpi-value span{ font-weight:600; font-size:18px; margin-left:4px; }
.kpi-area .kpi-sub{ margin:2px 0 0; color:var(--muted); font-size:.95rem; }

/* CTA a todo el ancho (dos columnas), en pastilla */
.kpi-area .cta{
  grid-area: cta;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  min-height:64px;
  padding:16px 24px;
  background:#d9001a; color:#fff; text-decoration:none;
  border-radius:26px;
  box-shadow:0 12px 26px rgba(217,0,26,.22);
  font-weight:700; font-size:18px; line-height:1.15; letter-spacing:.2px;
  transition:transform .08s ease, box-shadow .18s ease;
  margin-top:8px;
}
.kpi-area .cta:hover{ transform:translateY(-1px); }
.kpi-area .cta:active{ transform:translateY(0); }

/* iPhone 15/16 Pro (~430px) */
@media (max-width: 480px){
  .container{ padding: 0 14px; }
  .kpi-area{ gap:14px 12px; }
  .kpi-area .kpi{ padding:16px 14px; }
  .kpi-area .kpi-value{ font-size:34px; }
}

/* Desktop ancho (MBP 16") */
@media (min-width: 1280px){
  .container{ max-width:1100px; }
  .kpi-area{ gap:16px; }
  .kpi-area .kpi-value{ font-size:36px; }
  .kpi-area .cta{ min-height:72px; font-size:20px; }
}