:root{
  --verde:#00C853;
  --verde-osc:#00b84a;
  --negro:#1f1f1f;
  --gris:#f6f7f9;
  --gris-medio:#dfe3e8;
  --texto:#333;
  --blanco:#fff;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Open Sans,Arial,sans-serif;
  color:var(--texto);
  background:var(--blanco);
  line-height:1.55;
}

html, body{
  height:100%;
}
body{
  display:flex;
  flex-direction:column;
}
main{
  flex:1;
}

a{color:var(--verde);text-decoration:none}
a:hover{color:var(--verde-osc);text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
/* Header fijo */
header{
  position:sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid var(--gris-medio);
  backdrop-filter:saturate(180%) blur(8px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:40px;width:auto}
.brand .site{font-weight:700;color:var(--negro)}
.menu{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.menu a{color:var(--negro);font-weight:600}
.btn{
  display:inline-block; padding:12px 20px; border-radius:28px;
  font-weight:700; border:0; cursor:pointer; text-align:center
}
.btn-primary{background:var(--verde); color:#fff}
.btn-primary:hover{background:var(--verde-osc); color:#fff}
.btn-outline{border:2px solid var(--verde); color:var(--verde); background:transparent}
.btn-outline:hover{background:var(--verde); color:#fff}

/* Hero */
.hero{
  background:
	linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.34)),
	radial-gradient(1200px 400px at 50% -20%, rgba(0,200,83,.18), transparent 60%),
	var(--verde);
  color:#fff; padding:92px 0 72px;
  text-align:center;
}
.hero h1{font-size:clamp(28px,4vw,40px);margin:0 0 12px}
.hero p{font-size:clamp(16px,2.2vw,20px);margin:0 0 18px;opacity:.95}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}

/* Secciones */
section{padding:72px 0}
h2{font-size:clamp(22px,3.2vw,30px);margin:0 0 12px;color:var(--negro)}
.lead{font-size:18px; color:#444}
.band{background:var(--gris)}
.grid{display:grid; gap:22px}
@media(min-width:900px){.grid-2{grid-template-columns:1.2fr .8fr}}
@media(min-width:900px){.grid-2.rev{grid-template-columns:.9fr 1.1fr}}
ul.check{padding-left:0; list-style:none; margin:14px 0 0}
ul.check li{margin:8px 0; padding-left:28px; position:relative}
ul.check li:before{
  content:""; position:absolute; left:0; top:7px; width:18px; height:18px;
  border-radius:50%; background:var(--verde);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M20.285 6.709a1 1 0 0 0-1.414-1.418l-9.9 9.9-3.843-3.842a1 1 0 1 0-1.414 1.414l4.55 4.55a1 1 0 0 0 1.414 0l10.607-10.604z"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M20.285 6.709a1 1 0 0 0-1.414-1.418l-9.9 9.9-3.843-3.842a1 1 0 1 0-1.414 1.414l4.55 4.55a1 1 0 0 0 1.414 0l10.607-10.604z"/></svg>') center/contain no-repeat;
}

/* Cards de precios */
.cards{display:grid; gap:18px}
@media(min-width:880px){.cards{grid-template-columns:1fr 1fr}}
.card{
  background:#fff; border:1px solid var(--gris-medio); border-radius:14px; padding:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.06)
}
.price{color:var(--verde); font-weight:800; font-size:24px}
.muted{color:#6b7280}
.note{font-size:13px; color:#6b7280}

/* Banners SVG horizontales (apoyo visual) */
.banner{
  width:100%; height:180px; border-radius:14px; overflow:hidden; background:#e8f9f0;
  box-shadow: inset 0 0 0 1px #cdeede;
  display:flex; align-items:center; justify-content:center; padding:8px;
}
.banner svg{width:100%; height:100%; display:block}

/* Formulario */
form{display:grid; gap:12px; max-width:720px}
.row-2{display:grid; gap:12px}
@media(min-width:720px){.row-2{grid-template-columns:1fr 1fr}}
input, textarea{
  width:100%; padding:12px 14px; border:1px solid #cfd6dd; border-radius:10px; font-size:16px
}
textarea{min-height:140px; resize:vertical}
.center{text-align:center}

/* Footer */
footer{background:#0e0e0e;color:#cbd5e1;padding:26px 0;margin-top:40px}
footer a{color:#bff5d1}

.form-check{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0;
  font-size:15px;
}

.form-check-input{
  width:8px;
  height:8px;
  border:1.6px solid #555;
  border-radius:4px;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background:#fff;
  transition:all .2s ease;
  position:relative; /* ← IMPORTANTE */
  display:inline-block; /* ← IMPORTANTE */
}

.form-check-input:checked{
  background:var(--verde);
  border-color:var(--verde);
}

.form-check-input:checked::after{
  content:"";
  position:absolute;
  top:2px;  /* ajustado */
  left:5px; /* ajustado */
  width:4px;
  height:8px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.legal-page{
  max-width:800px;
  margin:0 auto;
  padding:60px 16px;
}
.legal-page h1{
  font-size:clamp(26px,3vw,34px);
  margin:0 0 24px;
  color:var(--negro);
}
.legal-page h2{
  font-size:clamp(18px,2vw,22px);
  margin:32px 0 12px;
  color:var(--negro);
}
.legal-page p,
.legal-page li{
  font-size:16px;
  line-height:1.55;
  margin:0 0 12px;
}
.legal-page ul{
  padding-left:20px;
}

/* Hero reducido para páginas internas */
.hero.hero-small{
  padding:40px 0 38px !important;
}
.hero.hero-small h1{
  font-size:clamp(22px,3vw,30px);
}
.hero.hero-small p{
  font-size:clamp(14px,1.8vw,17px);
}

/* Blog */
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.card:hover img{
  transform:scale(1.04);
}

/* Paginador */

/* PAGINACIÓN GLOBAL */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding-left: 0;
  margin: 32px auto; /* separa del bloque superior/inferior */
  background: #fff;
  border: 1px solid var(--gris-medio);
  border-radius: 8px;
  box-shadow: 0 1px 2px #e0e0e0;
  overflow: hidden;
  max-width: fit-content;
}

/* ELEMENTOS INDIVIDUALES */
.pagination li {
  flex: 0 0 auto;
}

/* ENLACES */
.pagination a {
  display: block;
  padding: 10px 16px;
  min-width: 42px;
  text-align: center;
  color: var(--verde);
  font-weight: 600;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* ÚLTIMO SIN BORDE */
.pagination li:last-child a {
  border-right: none;
}

/* EFECTO HOVER */
.pagination a:hover {
  background: var(--gris);
  color: var(--verde-osc);
}

/* ACTIVO (soporta <a class="active"> o <li class="active"><a>) */
.pagination a.active,
.pagination li.active a {
  background: #90a4ae; /* gris como en tu ejemplo */
  border-color: #90a4ae;
  color: #fff;
  cursor: default;
}

/* DESHABILITADOS */
.pagination a[disabled],
.pagination a.disabled {
  color: #c0c6cc;
  background: #fafafa;
  pointer-events: none;
}