:root{
  --bg:        #F4F1EC;
  --bg2:       #EDE9E2;
  --bg3:       #E3DED5;
  --ink:       #1A1E2C;
  --ink2:      #252938;
  --ink3:      #363B4C;
  --ink4:      #565C70;
  --muted:     #5D6373;
  --muted2:    #A8AEBB;
  --border:    #C8C3BA;
  --border2:   #B5B0A8;
  --star:      #2F6D96;
  --star2:     #245A80;
  --star-l:    #7DB4D8;
  --star-dim:  rgba(47,109,150,.10);
  --green:     #2D8A5A;
  --warm:      #9A5F10;
  --pad:       clamp(20px,4vw,52px);
  --gap:       clamp(16px,3vw,40px);
  --max:       1200px;
  --font-serif:'Raleway Display','Raleway',sans-serif;
  --font-sans: 'Raleway',sans-serif;
  --cream:#F4F1EC;--cream2:#EDE9E2;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ── NAV ── */
.nav-logo{text-decoration:none;display:flex;align-items:center;gap:0;letter-spacing:-.02em;font-family:var(--serif);font-size:1.05rem;font-weight:700}
.logo-star{color:var(--star);font-size:.9rem;margin-right:5px;line-height:1}
.logo-my{color:var(--ink)}
.logo-rental{color:var(--ink)}
.logo-host{color:var(--ink)}
.nav-logo:hover .logo-star{opacity:.8}
.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);height:68px;
  background:rgba(244,241,236,.96);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-logo span{color:var(--star)}
.nav-back{
  display:flex;align-items:center;gap:6px;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  transition:color .2s;
}
.nav-back:hover{color:var(--star)}
.nav-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.nav-cta{
  display:flex;align-items:center;gap:8px;
}
.nav-btn{
  padding:8px 18px;
  background:var(--star);color:#fff;
  border:none;border-radius:4px;
  font-family:var(--font-sans);
  font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;
  transition:background .2s;
}
.nav-btn:hover{background:var(--star-l)}

/* ── HERO ── */
.post-hero{
  background:var(--ink);
  padding:clamp(44px, 6vw, 56px) var(--pad) clamp(28px, 4vw, 34px);
  position:relative;overflow:hidden;
}
.post-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(91,156,200,.15) 0%,transparent 70%);
}
.post-hero-inner{max-width:var(--max);margin:0 auto;position:relative}
.post-cat{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--star-l);margin-bottom:20px;
}
.post-cat::before{content:'';width:20px;height:1px;background:var(--star-l)}
.post-h1{
  font-family:var(--font-serif);
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:400;line-height:1.15;
  color:#fff;margin-bottom:20px;
  letter-spacing:-.02em;
}
.post-h1 em{font-style:normal}
.post-meta{
  display:flex;align-items:center;gap:20px;
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.post-meta-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.2)}

/* ── ARTICLE ── */
.post-body{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(28px, 3.5vw, 41px) var(--pad);
  display:grid;
  grid-template-columns:1fr min(240px,26%);
  gap:clamp(32px, 4vw, 50px);
  align-items:start;
}
.post-main{grid-column:1}
.post-sidebar{
  grid-column:2;
  position:sticky;top:88px;
}
@media(max-width:780px){
  .post-body{grid-template-columns:1fr}
  .post-sidebar{display:none}
}
.post-img{
  width:100%;height:clamp(220px,35vw,420px);
  object-fit:cover;border-radius:6px;
  margin-bottom:clamp(32px, 4vw, 41px);
  display:block;
}
.post-lede{
  font-family:var(--font-serif);
  font-size:clamp(1.05rem,1.2rem,1.35rem);
  line-height:1.65;color:var(--ink2);
  margin-bottom:clamp(20px, 2vw, 22px);
  padding-bottom:clamp(20px, 2vw, 22px);
  border-bottom:1px solid var(--border);
}
.post-lede em{font-style:italic}

/* Content blocks */
.post-content h2{
  font-family:var(--font-serif);
  font-size:clamp(1.2rem,1.6rem,1.9rem);
  font-weight:700;line-height:1.2;
  color:var(--ink);
  margin:clamp(20px, 2.5vw, 25px) 0 10px;
  letter-spacing:-.01em;
}
.post-content h3{
  font-family:var(--font-sans);
  font-size:clamp(.88rem,.96rem,1.05rem);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--star);
  margin:18px 0 8px;
}
.post-content p{
  font-size:clamp(.9rem,.96rem,1.02rem);
  line-height:1.78;color:var(--ink2);
  margin-bottom:12px;
}
.post-content strong{font-weight:700;color:var(--ink)}
.post-content em{font-style:italic}

.post-content ul{
  margin:0 0 20px 0;
  padding-left:0;list-style:none;
}
.post-content ul li{
  font-size:clamp(.9rem,.96rem,1.02rem);
  line-height:1.65;color:var(--ink2);
  padding:3px 0 3px 22px;
  position:relative;
}
.post-content ul li::before{
  content:'·';
  position:absolute;left:6px;
  color:var(--star);font-size:1.2rem;line-height:1.3;
}

.post-content hr{
  border:none;border-top:1px solid var(--border);
  margin:clamp(20px, 2.5vw, 25px) 0;
}

/* Pull quote */
.post-pull{
  padding:16px 0 16px 24px;
  margin:clamp(16px, 2vw, 19px) 0;
}
.post-pull p{
  font-family:var(--font-serif);
  font-size:clamp(1rem,1.15rem,1.25rem) !important;
  font-style:italic;
  color:var(--ink) !important;
  line-height:1.55 !important;
  margin:0 !important;
}

/* ── CTA BLOCK ── */
.post-cta{
  background:var(--ink);
  border-radius:8px;
  padding:clamp(28px, 4vw, 37px);
  margin:clamp(28px, 3vw, 31px) 0 0;
  text-align:center;
}
.post-cta-tag{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--star-l);margin-bottom:16px;
}
.post-cta h3{
  font-family:var(--font-serif);
  font-size:clamp(1.2rem,1.5rem,1.8rem);
  font-weight:400;color:#fff;
  margin-bottom:12px;
  text-transform:none !important;
  letter-spacing:-.01em;
}
.post-cta p{
  color:rgba(255,255,255,.55);
  font-size:.88rem;
  line-height:1.6;
  margin-bottom:24px !important;
}
.post-cta-btn{
  display:inline-block;
  padding:14px 32px;
  background:var(--star);color:#fff;
  border:none;border-radius:4px;
  font-family:var(--font-sans);
  font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;
  transition:background .2s, transform .15s;
}
.post-cta-btn:hover{background:var(--star-l);transform:translateY(-1px)}

/* ── FOOTER ── */
.post-footer{
  background:var(--ink2);
  padding:clamp(28px, 4vw, 31px) var(--pad);
  margin-top:clamp(48px, 6vw, 62px);
}
.post-footer-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.post-footer-brand{
  font-family:var(--font-serif);
  font-size:.9rem;color:rgba(255,255,255,.4);
}
.post-footer-brand strong{color:rgba(255,255,255,.7)}
.post-footer-copy{
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.25);
}

/* ── EDIT MODE ── */
.edit-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--ink);
  border-top:2px solid var(--star);
  padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;z-index:200;
  transform:translateY(100%);
  transition:transform .3s ease;
}
.edit-bar.active{transform:translateY(0)}
.edit-bar-msg{
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.edit-bar-msg strong{color:var(--star-l)}
.edit-bar-btns{display:flex;gap:10px}
.edit-btn{
  padding:9px 20px;border:none;border-radius:4px;
  font-family:var(--font-sans);font-size:.68rem;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;
}
.edit-btn-save{background:var(--star);color:#fff}
.edit-btn-save:hover{background:var(--star-l)}
.edit-btn-cancel{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
.edit-btn-cancel:hover{background:rgba(255,255,255,.14)}
.edit-btn-exit{background:rgba(255,80,80,.15);color:#ff6b6b}

/* Edit mode visual indicators */
body.editing [data-editable]{
  outline:2px dashed rgba(91,156,200,.4);
  outline-offset:4px;
  border-radius:2px;
  transition:outline .15s;
}
body.editing [data-editable]:hover{
  outline:2px solid rgba(91,156,200,.7);
  background:rgba(91,156,200,.04);
}
body.editing [data-editable]:focus{
  outline:2px solid var(--star);
  background:rgba(91,156,200,.06);
}

/* Edit mode hint */
body.editing::before{
  content:'MODO EDICIÓN ACTIVO';
  position:fixed;top:64px;right:0;
  background:var(--star);color:#fff;
  font-size:.55rem;letter-spacing:.15em;font-family:var(--font-sans);
  font-weight:700;text-transform:uppercase;
  padding:4px 10px;z-index:300;
}

.nav-center-links{display:flex;align-items:center;gap:clamp(16px, 2.5vw, 25px)}
.ncl{font-family:var(--font-sans);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:.2s}
.ncl:hover{color:var(--ink)}
.ncl-active{color:var(--star);font-weight:600}
.nav-post-links{display:none}
/* ── LANG SWITCHER ── */
.nav-langs{display:flex;gap:4px;align-items:center}
.nl{
  padding:4px 8px;border:1px solid var(--border);border-radius:3px;
  background:transparent;font-family:var(--font-sans);
  font-size:.58rem;font-weight:600;letter-spacing:.08em;
  color:var(--muted);cursor:pointer;transition:.2s;
}
.nl.on,.nl:hover{background:var(--star);color:#fff;border-color:var(--star)}

/* ── SHARE ── */
.post-share{
  display:flex;align-items:center;gap:12px;
  margin-top:clamp(20px, 2.5vw, 25px);
  padding-top:clamp(16px, 2vw, 19px);
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.share-label{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex-shrink:0}
.share-btn{
  display:flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:4px;border:1px solid var(--border);
  background:transparent;font-family:var(--font-sans);
  font-size:.7rem;font-weight:600;letter-spacing:.04em;
  color:var(--ink3);cursor:pointer;text-decoration:none;
  transition:.2s;white-space:nowrap;
}
.share-btn:hover{border-color:var(--star);color:var(--star);background:var(--star-dim)}
.share-btn.wa{border-color:rgba(37,211,102,.4);color:#1a7a3d}
.share-btn.wa:hover{background:rgba(37,211,102,.08);border-color:#25D366;color:#25D366}
.share-btn.li:hover{border-color:#0A66C2;color:#0A66C2;background:rgba(10,102,194,.06)}
.share-btn.x:hover{border-color:#000;color:#000;background:rgba(0,0,0,.04)}
.share-btn.fb:hover{border-color:#1877F2;color:#1877F2;background:rgba(24,119,242,.06)}
.share-btn.em:hover{border-color:var(--star);color:var(--star);background:var(--star-dim)}
.share-btn svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}
.share-copy-msg{font-size:.68rem;color:var(--star);opacity:0;transition:opacity .3s;margin-left:4px}

/* ── RECENT POSTS ── */
.recent-posts{background:var(--bg2);padding:clamp(40px, 5vw, 50px) var(--pad);border-top:1px solid var(--border)}
.recent-inner{max-width:var(--max);margin:0 auto}
.recent-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:clamp(24px, 3vw, 28px);gap:16px;flex-wrap:wrap}
.recent-title{font-family:var(--font-serif);font-size:clamp(1.1rem,1.4rem,1.6rem);font-weight:400;color:var(--ink)}
.recent-all{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--star);text-decoration:none;transition:color .2s}
.recent-all:hover{color:var(--star2)}
.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(16px, 2vw, 19px)}
.rp-card{background:var(--bg);border-radius:6px;border:1px solid var(--border);overflow:hidden;text-decoration:none;transition:.25s;display:block}
.rp-card:hover{border-color:var(--star);transform:translateY(-3px);box-shadow:0 8px 28px rgba(26,30,44,.08)}
.rp-img{height:160px;background:var(--bg3);background-size:cover;background-position:center}
.rp-body{padding:18px 20px}
.rp-cat{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--star);margin-bottom:8px}
.rp-title{font-family:var(--font-serif);font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:8px}
.sidebar-recent{border-top:1px solid var(--border);padding-top:4px}
.sr-item{display:block;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--border);transition:.15s}
.sr-item:last-child{border-bottom:none}
.sr-item:hover .sr-title{color:var(--star)}
.sr-title{font-size:.8rem;font-weight:600;color:var(--ink2);line-height:1.3;margin-bottom:3px;transition:.15s}
.sr-date{font-size:.65rem;color:var(--muted)}

/* ── EDIT TRIGGER ── */
.edit-trigger{
  position:fixed;bottom:clamp(20px,3vw,28px);left:clamp(20px,3vw,28px);
  z-index:490;
  width:28px;height:28px;border-radius:50%;
  background:rgba(26,30,44,.15);
  border:none;cursor:pointer;
  display:grid;place-items:center;
  opacity:0;transition:opacity .3s;
  font-size:.6rem;color:var(--muted);
}
.edit-trigger:hover{opacity:1 !important;background:rgba(26,30,44,.3)}
/* Appears only when hovering bottom-left corner */
body:has(.edit-trigger:hover) .edit-trigger,
.edit-trigger:focus{opacity:1}
.auth-modal{
  position:fixed;inset:0;z-index:500;
  background:rgba(26,30,44,.92);
  backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.auth-modal.open{opacity:1;pointer-events:all}
.auth-box{
  background:var(--cream);
  border-radius:10px;
  padding:31px;
  width:min(400px,90vw);
  text-align:center;
}
.auth-logo{
  font-family:var(--font-serif);font-size:1.2rem;
  color:var(--ink);margin-bottom:6px;
}
.auth-logo span{color:var(--star)}
.auth-sub{font-size:.72rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:28px}
.auth-label{
  display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;text-align:left;
}
.auth-input{
  width:100%;padding:12px 14px;
  border:1px solid var(--border);border-radius:4px;
  background:#fff;color:var(--ink);
  font-family:var(--font-sans);font-size:.9rem;
  outline:none;transition:border .2s;
  margin-bottom:16px;
}
.auth-input:focus{border-color:var(--star)}
.auth-submit{
  width:100%;padding:13px;
  background:var(--star);color:#fff;border:none;border-radius:4px;
  font-family:var(--font-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:background .2s;
}
.auth-submit:hover{background:var(--star-l)}
.auth-err{
  font-size:.72rem;color:#e05;
  margin-top:10px;height:16px;transition:opacity .2s;
}

/* ── WHATSAPP ── */
.wa-btn{
  position:fixed;bottom:clamp(20px,3vw,28px);right:clamp(20px,3vw,28px);
  z-index:490;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;
  box-shadow:0 4px 20px rgba(37,211,102,.35);
  font-size:1.5rem;transition:.25s;text-decoration:none;
}
.wa-btn:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(37,211,102,.45)}
.wa-tooltip{
  position:absolute;right:64px;
  background:var(--ink);color:#fff;
  font-family:var(--font-sans);font-size:.72rem;
  white-space:nowrap;padding:8px 14px;border-radius:6px;
  opacity:0;pointer-events:none;
  transition:opacity .2s;
}
.wa-tooltip::after{
  content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-left-color:var(--ink);border-right:0;
}
.wa-btn:hover .wa-tooltip{opacity:1}


/* ── SIDEBAR ── */
.sidebar-card{
  background:var(--ink);
  border-radius:8px;padding:24px;
  margin-bottom:24px;
}
.sc-tag{
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--star);margin-bottom:10px;
}
.sc-hl{
  font-family:var(--font-serif);
  font-size:1.05rem;font-weight:700;
  color:#fff;line-height:1.3;margin-bottom:8px;
}
.sc-text{font-size:.78rem;color:rgba(255,255,255,.45);line-height:1.5;margin-bottom:12px}
.sc-btn{
  display:block;width:100%;padding:11px;
  background:var(--star);color:#fff;
  border:none;border-radius:4px;
  font-family:var(--font-sans);
  font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;text-align:center;
  transition:background .2s;
}
.sc-btn:hover{background:var(--star-l)}
.sidebar-toc{
  background:var(--cream2);
  border-radius:8px;padding:20px 24px;
  border:1px solid var(--border);
}
.toc-item{
  display:block;
  font-size:.78rem;color:var(--muted);
  padding:7px 0;
  border-bottom:1px solid var(--border);
  text-decoration:none;
  transition:color .15s, padding-left .15s;
}
.toc-item:last-child{border-bottom:none}
.toc-item:hover{color:var(--star);padding-left:6px}

/* ── SAVE TOAST ── */
@media(max-width:600px){
  .nav-cta .nav-btn{display:none}
  .edit-bar{flex-direction:column;gap:10px;padding:16px}
  .edit-bar-btns{width:100%;justify-content:center}
}

/* ── COOKIE CONSENT ── */
#cookieBanner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--ink);padding:16px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:2px solid var(--star);transform:translateY(100%);transition:transform .4s ease}
#cookieBanner.show{transform:translateY(0)}
.cb-text{font-size:.72rem;color:rgba(255,255,255,.6);line-height:1.5;flex:1;min-width:200px}
.cb-text a{color:var(--star);text-decoration:none}
.cb-btns{display:flex;gap:8px;flex-shrink:0}
.cb-accept{padding:9px 20px;background:var(--star);color:#fff;border:none;border-radius:4px;font-family:var(--font-sans);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.2s}
.cb-accept:hover{background:var(--star-l)}
.cb-reject{padding:9px 16px;background:transparent;color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.15);border-radius:4px;font-family:var(--font-sans);font-size:.68rem;cursor:pointer;transition:.2s}

/* fix: el título del CTA usaba una clase sin regla (tinta sobre tinta) */
.post-cta-h{font-family:var(--font-serif);font-size:clamp(1.3rem,2vw,1.7rem);font-weight:400;color:#fff;margin-bottom:12px;line-height:1.25}

/* ── Rejilla de tres tarjetas dentro del cuerpo del artículo ──
   Vivía suelta en el CSS en línea de las guías antiguas; aquí la comparten
   todas las páginas que usan esta plantilla. */
.g-tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:20px 0 24px}
.g-card{background:#fff;border:1px solid var(--border);border-radius:6px;padding:20px}
.g-card em{display:block;font-style:normal;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--star);margin-bottom:8px}
.g-card h4{font-family:var(--font-serif);font-size:.98rem;font-weight:700;color:var(--ink);margin:0 0 7px}
.g-card p{font-size:.82rem;line-height:1.6;color:var(--ink4);margin:0}
@media(max-width:780px){.g-tres{grid-template-columns:1fr}}