:root{
  --hoja:#6bbf3a;        /* ícono del logo */
  --verde:#2f6b1d;       /* texto y botones (AA sobre blanco) */
  --verde-os:#1f4f12;
  --wa:#1d7a3a;          /* botón WhatsApp, AA con texto blanco */
  --wa-os:#16622d;
  --cielo:#dff0fa;
  --cielo-2:#9fd0ee;
  --tierra:#f3e6cc;
  --maicillo:#d9b77e;
  --tinta:#25301f;
  --tinta-2:#4a5644;
  --linea:#e4dcc8;
  --r:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--tinta);background:#fffdf8;
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.0625rem;line-height:1.55;
  padding-bottom:84px; /* espacio para el botón flotante */
}
img{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.15;margin:0}
h2{font-size:1.75rem;font-weight:900;color:var(--verde-os);margin-bottom:.5rem}
p{margin:0 0 1rem}

/* franja de borrador */
.franja{
  background:var(--tinta);color:#fff8e0;text-align:center;
  font-size:.8125rem;font-weight:700;padding:8px 14px;letter-spacing:.01em;
}

/* botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:12px 22px;border-radius:999px;
  font:inherit;font-weight:800;font-size:1rem;text-decoration:none;text-align:center;
  transition:background .15s,transform .15s;
}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 4px 14px rgba(29,122,58,.28)}
.btn-wa:hover{background:var(--wa-os)}
.btn:active{transform:scale(.98)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.btn-grande{min-height:58px;font-size:1.125rem;padding:14px 28px;width:100%}
.ico{width:24px;height:24px;flex:none}

/* hero */
.hero{
  background:linear-gradient(180deg,var(--cielo-2) 0,var(--cielo) 55%,#fffdf8 100%);
  padding:28px 0 36px;position:relative;overflow:hidden;
}
.hero::after{ /* loma de maicillo al pie */
  content:"";position:absolute;left:-10%;right:-10%;bottom:-60px;height:110px;
  background:var(--tierra);border-radius:50% 50% 0 0;z-index:0;
}
.hero-grid{position:relative;z-index:1;display:grid;gap:24px}
.logo{display:inline-flex;align-items:flex-start;gap:8px;margin-bottom:18px}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-1{font-size:.9375rem;font-weight:600;color:var(--tinta-2)}
.logo-2{font-size:3.25rem;font-weight:900;color:var(--tinta);letter-spacing:-.02em;margin:2px 0 4px}
.logo-3{font-size:.9375rem;font-weight:700;color:var(--verde)}
.logo-ico{width:42px;height:42px;margin-top:2px;flex:none}
.bio{font-size:1.125rem;font-weight:800;color:var(--verde-os);margin-bottom:.75rem}
.hero h1{font-size:1.625rem;font-weight:900;color:var(--tinta)}
.hero h1 span{display:block;font-size:1.0625rem;font-weight:700;color:var(--tinta-2);margin-top:6px}
.zonas{margin:14px 0 20px;font-weight:700;color:var(--tinta)}
.hero-foto{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 8px 24px rgba(37,48,31,.18);background:#fff;max-width:480px;width:100%;justify-self:center}
.hero-foto img{width:100%;aspect-ratio:480/262;object-fit:cover}
.hero-foto figcaption{font-size:.875rem;font-weight:700;color:var(--tinta-2);padding:8px 14px;background:#fff}

/* secciones */
.sec{padding:44px 0}
.sec-sub{color:var(--tinta-2);margin-bottom:1.5rem}
.sec-tierra{background:var(--tierra)}
.sec-cielo{background:var(--cielo)}

/* tarjetas */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,440px));gap:20px;justify-content:center}
.card{background:#fff;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(37,48,31,.06)}
.foto{position:relative;aspect-ratio:16/9;background:var(--tierra);overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover}
.ph svg{position:absolute;inset:0;width:100%;height:100%}
.ph-zona{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);color:var(--verde-os);font-weight:800;font-size:.9375rem;padding:4px 12px;border-radius:999px}
.ph-nota{position:absolute;right:10px;top:10px;background:rgba(37,48,31,.72);color:#fff;font-weight:700;font-size:.75rem;padding:3px 10px;border-radius:999px}
.card-body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.1875rem;font-weight:800}
.precio{font-size:1.75rem;font-weight:900;color:var(--verde);margin:6px 0 8px}
.det{margin-bottom:10px}
.fecha{font-size:.8125rem;color:var(--tinta-2);margin-bottom:16px;margin-top:auto;padding-top:4px}
.card .btn{width:100%}

/* condiciones */
.checks{list-style:none;margin:16px 0 20px;padding:0;display:grid;gap:10px}
.checks li{background:#fff;border-radius:12px;padding:12px 14px 12px 46px;position:relative;font-weight:600}
.checks li::before{
  content:"";position:absolute;left:14px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;
  background:var(--hoja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.500l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.lema{font-weight:800;color:var(--verde-os);font-size:1.0625rem;margin:0}

/* tasaciones */
.tas{display:grid;gap:24px}
.lema-grande{font-size:1.5rem;font-weight:900;color:var(--verde);line-height:1.2}
.beneficios{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.beneficios li{background:var(--tierra);border-radius:var(--r);padding:16px 18px}
.beneficios strong{display:block;font-size:1.1875rem;font-weight:900;color:var(--verde-os)}
.beneficios span{color:var(--tinta-2);font-size:.9375rem}

/* zona */
.chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{background:#fff;color:var(--verde-os);font-weight:800;padding:8px 18px;border-radius:999px;border:2px solid var(--cielo-2)}

/* pie */
.pie{background:var(--verde-os);color:#fff;padding:40px 0 28px}
.pie h2{color:#fff}
.pie a:not(.btn){color:#fff;font-weight:700;text-underline-offset:3px}
.pie .btn-wa{background:#fff;color:var(--verde-os);box-shadow:none}
.pie .btn-wa:hover{background:var(--tierra)}
.redes{list-style:none;margin:20px 0;padding:0;display:grid;gap:10px}
.redes a{display:inline-block;padding:6px 0}
.pie-nota{font-size:.875rem;color:#d8e8d0;margin:18px 0 0}

/* botón flotante (celular) */
.wa-flota{
  position:fixed;right:14px;bottom:14px;z-index:20;display:inline-flex;align-items:center;gap:8px;
  background:var(--wa);color:#fff;text-decoration:none;font-weight:800;
  padding:12px 18px 12px 14px;border-radius:999px;min-height:52px;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.wa-flota:hover{background:var(--wa-os)}

/* escritorio */
@media (min-width:760px){
  body{padding-bottom:0}
  .wa-flota{display:none}
  h2{font-size:2.125rem}
  .sec{padding:64px 0}
  .hero{padding:48px 0 64px}
  .hero-grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:40px}
  .logo-2{font-size:4.25rem}
  .logo-ico{width:52px;height:52px}
  .hero h1{font-size:1.875rem}
  .btn-grande{width:auto}
  .checks{grid-template-columns:repeat(2,1fr)}
  .tas{grid-template-columns:1.2fr 1fr;align-items:center;gap:48px}
  .redes{grid-template-columns:repeat(3,auto);justify-content:start;gap:28px}
}
@media (max-width:359px){
  .logo-2{font-size:2.75rem}
  .wrap{padding:0 14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}