:root{
  --tinta:#141619; --tinta-2:#3d4450; --tinta-3:#6b7280;
  --linea:#e4e7ec; --fondo:#ffffff; --fondo-2:#f7f8fa;
  --marca:#0f5c4a; --marca-clara:#e8f2ef; --destacado:#b8860b; --destacado-fondo:#fdf8ec;
  --radio:10px; --ancho:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  color:var(--tinta); background:var(--fondo); line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.env{max-width:var(--ancho);margin:0 auto;padding:0 20px}
a{color:var(--marca);text-decoration:none}
a:hover{text-decoration:underline}

/* cabecera */
header.top{border-bottom:1px solid var(--linea);background:#fff;position:sticky;top:0;z-index:50}
.top .env{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;flex-wrap:wrap}
.logo{font-weight:700;font-size:17px;color:var(--tinta);letter-spacing:-.02em}
.logo span{color:var(--marca)}
nav.principal{display:flex;gap:20px;flex-wrap:wrap}
nav.principal a{color:var(--tinta-2);font-size:15px;font-weight:500}

/* hero */
.hero{padding:52px 0 36px;border-bottom:1px solid var(--linea)}
.hero h1{font-size:clamp(28px,4.4vw,42px);line-height:1.18;letter-spacing:-.025em;max-width:20ch}
.hero .bajada{margin-top:16px;font-size:19px;color:var(--tinta-2);max-width:62ch}
.datos-clave{display:flex;gap:28px;margin-top:26px;flex-wrap:wrap}
.dato .n{font-size:26px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1.1}
.dato .t{font-size:13px;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.06em}

/* secciones */
section{padding:44px 0}
h2{font-size:clamp(22px,3vw,29px);letter-spacing:-.02em;margin-bottom:8px;line-height:1.25}
h3{font-size:19px;letter-spacing:-.01em;margin-bottom:6px}
.sub{color:var(--tinta-3);margin-bottom:26px;max-width:68ch}
p{margin-bottom:14px;max-width:72ch}

/* tarjeta destacada */
.destacada{
  border:1px solid #edd9a3;background:var(--destacado-fondo);
  border-radius:var(--radio);padding:20px;margin-bottom:26px;
}
.etiqueta-pago{
  display:inline-block;background:var(--destacado);color:#fff;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;padding:4px 9px;border-radius:4px;margin-bottom:10px;
}
.destacada .nota-pago{font-size:13px;color:#8a6608;margin:8px 0 0}

/* ranking */
ol.ranking{list-style:none;counter-reset:pos}
ol.ranking > li{
  counter-increment:pos; display:grid; grid-template-columns:44px 1fr auto;
  gap:16px; padding:18px 0; border-bottom:1px solid var(--linea); align-items:start;
}
ol.ranking > li::before{
  content:counter(pos); font-size:20px; font-weight:700; color:var(--marca);
  background:var(--marca-clara); border-radius:50%; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
}
.ficha .nombre{font-weight:650;font-size:17px;letter-spacing:-.01em;display:block;color:var(--tinta)}
.ficha .meta{font-size:14.5px;color:var(--tinta-2);margin-top:3px}
.ficha .dir{font-size:14px;color:var(--tinta-3);margin-top:3px}
.estrella{color:#d99e0b}
.sedes{display:inline-block;font-size:12px;background:var(--fondo-2);border:1px solid var(--linea);
  padding:1px 7px;border-radius:20px;color:var(--tinta-2);margin-left:6px;vertical-align:1px}
.puntos{text-align:right;min-width:74px}
.puntos .v{font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.puntos .l{font-size:11px;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.06em}

/* rejilla ciudades */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.ciudad-card{
  border:1px solid var(--linea);border-radius:var(--radio);padding:17px;display:block;color:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.ciudad-card:hover{border-color:var(--marca);box-shadow:0 2px 10px rgba(15,92,74,.07);text-decoration:none}
.ciudad-card strong{display:block;font-size:17px;margin-bottom:3px;letter-spacing:-.01em}
.ciudad-card span{font-size:14px;color:var(--tinta-3)}

/* caja info */
.caja{background:var(--fondo-2);border:1px solid var(--linea);border-radius:var(--radio);padding:20px;margin:22px 0}
.caja h3{margin-bottom:10px}
.caja ul{margin:10px 0 0 19px}
.caja li{margin-bottom:7px;font-size:15.5px}
.aviso{border-left:3px solid var(--destacado);background:var(--destacado-fondo);padding:14px 17px;
  border-radius:0 var(--radio) var(--radio) 0;margin:20px 0;font-size:15.5px}

/* tabla */
table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15.5px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--linea)}
th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-3);font-weight:600}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* faq */
details{border-bottom:1px solid var(--linea);padding:15px 0}
summary{font-weight:600;cursor:pointer;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';color:var(--marca);font-weight:400;font-size:21px;line-height:1}
details[open] summary::after{content:'−'}
details p{margin-top:11px;color:var(--tinta-2)}

/* pie */
footer{border-top:1px solid var(--linea);background:var(--fondo-2);padding:34px 0;margin-top:44px;font-size:14.5px;color:var(--tinta-3)}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px;margin-bottom:22px}
footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-2);margin-bottom:9px}
footer a{color:var(--tinta-2);display:block;margin-bottom:5px}
.legal{border-top:1px solid var(--linea);padding-top:17px;font-size:13.5px;line-height:1.55}

.migas{font-size:14px;color:var(--tinta-3);padding:15px 0 0}
.migas a{color:var(--tinta-3)}

@media(max-width:620px){
  body{font-size:16px}
  .hero{padding:34px 0 26px}
  ol.ranking > li{grid-template-columns:34px 1fr;gap:12px}
  ol.ranking > li::before{width:30px;height:30px;font-size:16px}
  .puntos{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:7px;margin-top:5px}
  .datos-clave{gap:18px}
  nav.principal{gap:14px}
  nav.principal a{font-size:14px}
}