:root{--azul:#0b3b60;--cyan:#00a8cc;--verde:#25d366;--gris:#f4f7fa;--txt:#22303c}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--txt);line-height:1.6;background:#fff}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
header{background:#fff;border-bottom:1px solid #e6ecf1;position:sticky;top:0;z-index:50}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-weight:800;color:var(--azul);text-decoration:none;font-size:1.05rem}
nav a{color:var(--txt);text-decoration:none;margin-left:18px;font-size:.95rem}
nav a:hover{color:var(--cyan)}
.hero{background:linear-gradient(135deg,var(--azul),#125a8f);color:#fff;padding:52px 0 44px}
.hero h1{font-size:2.1rem;line-height:1.25;margin-bottom:10px}
.hero p.sub{opacity:.92;max-width:680px;margin-bottom:22px}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:7px 14px;border-radius:99px;font-size:.86rem}
.btn{display:inline-block;padding:13px 26px;border-radius:10px;font-weight:700;text-decoration:none;transition:.15s;border:none;cursor:pointer;font-size:1rem}
.btn-wsp{background:var(--verde);color:#fff}
.btn-wsp:hover{filter:brightness(1.08)}
.btn-sec{background:#fff;color:var(--azul);margin-left:10px}
section{padding:44px 0}
section h2{color:var(--azul);font-size:1.5rem;margin-bottom:6px}
section p.lead{color:#5a6b7a;margin-bottom:24px;max-width:700px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{border:1px solid #e6ecf1;border-radius:14px;padding:18px;background:#fff;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:1.05rem;color:var(--azul)}
.card a.full{text-decoration:none;color:inherit}
.tag{display:inline-block;background:var(--gris);color:#41566a;font-size:.74rem;padding:3px 9px;border-radius:99px;margin:0 4px 4px 0}
.searchbox{display:flex;gap:10px;max-width:520px;flex-wrap:wrap}
.searchbox select{flex:1;min-width:220px;padding:12px 14px;border-radius:10px;border:none;font-size:1rem;color:var(--txt)}
.step{text-align:center;padding:22px}
.step .n{width:44px;height:44px;border-radius:50%;background:var(--cyan);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:1.2rem}
.cta-final{background:var(--gris);text-align:center;border-radius:18px;padding:40px 20px}
footer{background:var(--azul);color:#cfe2f0;padding:30px 0;margin-top:40px;font-size:.85rem}
footer a{color:#fff}
.fuente{font-size:.78rem;color:#8296a8;margin-top:10px}
.destacado{border:2px solid var(--cyan);position:relative;background:#f4fcfe}
@media(max-width:640px){.hero h1{font-size:1.55rem}.btn-sec{margin-left:0;margin-top:10px}}

/* Cards de ciudad con foto (home y /ciudades/).
   La imagen va con aspect-ratio fijo y width/height explicitos en el <img>: sin eso
   el navegador no reserva el alto y la card salta cuando carga la foto (CLS). */
.card-city{padding:0;overflow:hidden}
.card-city > *:not(.city-img):not(.city-img-ph){margin-left:18px;margin-right:18px}
.card-city > *:last-child{margin-bottom:18px}
.card-city h3{margin-top:14px}
.city-img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;display:block;background:var(--gris)}
.city-img-ph{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--azul),var(--cyan));color:#fff}
.city-img-ph span{font-size:2.4rem;font-weight:800;opacity:.85}
.card-city:hover .city-img{filter:brightness(1.06)}