/* ===========================================================
   Salva tu Pega — estilos compartidos de las páginas de guías
   Para crear una guía nueva, copia una existente y enlaza este archivo.
   =========================================================== */
:root{
  --navy:#1B2432;
  --steel:#2C3A50;
  --accent:#C4372A;
  --coral:#EF4B3C;
  --paper:#F5F6F8;
  --cream:#EFEAE1;
  --ink:#16202B;
  --ink-soft:#51606F;
  --border:rgba(27,36,50,0.14);
  --radius:3px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
}
h1,h2,h3{font-family:'Newsreader', serif; color:var(--navy); margin:0; font-weight:600;}
a{color:var(--accent);}
img,svg{display:block; max-width:100%;}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.wrap{max-width:760px; margin:0 auto; padding:0 24px;}

/* ===== HEADER ===== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,246,248,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:1120px; margin:0 auto;
}
.brand{display:flex; align-items:center; text-decoration:none;}
.logo{height:44px; width:auto;}
.nav-cta{
  display:inline-flex; align-items:center; background:var(--navy); color:#fff;
  text-decoration:none; padding:10px 18px; border-radius:var(--radius);
  font-size:0.88rem; font-weight:600; white-space:nowrap;
}
.nav-cta:hover{background:var(--steel);}

/* ===== CABECERA DEL ARTÍCULO ===== */
.art-head{background:var(--navy); color:#fff; padding:52px 0 46px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.75rem; letter-spacing:0.08em;
  text-transform:uppercase; color:#F2A194; display:block; margin-bottom:14px;
}
.art-head h1{color:#fff; font-size:clamp(1.8rem,4vw,2.5rem); line-height:1.22; font-weight:500;}
.art-head p{color:#B8C2D0; margin:16px 0 0; font-size:1.05rem;}
.breadcrumb{font-size:0.84rem; color:#8896AB; margin-bottom:16px;}
.breadcrumb a{color:#8896AB;}

/* ===== CUERPO ===== */
article{padding:48px 0 60px;}
article h2{font-size:1.45rem; margin:38px 0 12px; line-height:1.3;}
article h3{font-size:1.12rem; margin:26px 0 8px;}
article p{margin:0 0 16px; font-size:1.03rem; text-align:justify; -webkit-hyphens:auto; hyphens:auto;}
article ul, article ol{margin:0 0 18px; padding-left:22px;}
article li{margin-bottom:9px;}
article strong{color:var(--navy);}

.callout{
  background:#fff; border-left:3px solid var(--coral);
  padding:20px 22px; margin:28px 0;
  border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:0 2px 12px rgba(27,36,50,0.06);
}
.callout p:last-child{margin-bottom:0;}

.cta-box{
  background:var(--cream); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 28px; margin-top:44px; text-align:center;
}
.cta-box h3{font-size:1.3rem;}
.cta-box p{color:var(--ink-soft); margin:10px 0 20px; font-size:0.98rem;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px;
  border-radius:var(--radius); font-weight:600; font-size:0.95rem;
  text-decoration:none; background:var(--navy); color:#fff; border:1px solid transparent;
}
.btn:hover{background:var(--steel);}

.disclaimer{
  font-size:0.85rem; color:var(--ink-soft); font-style:italic;
  border-top:1px solid var(--border); margin-top:42px; padding-top:18px;
}

/* ===== ÍNDICE DE GUÍAS ===== */
.guia-list{display:grid; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:8px;}
.guia-item{background:#fff; padding:26px 24px; text-decoration:none; display:block; transition:background .18s ease;}
.guia-item:hover{background:var(--paper);}
.guia-item h2{font-size:1.2rem; margin:0;}
.guia-item p{color:var(--ink-soft); font-size:0.95rem; margin:8px 0 0;}

/* ===== FOOTER ===== */
footer{background:#131A24; color:#7C8798; padding:28px 0; font-size:0.85rem;}
footer .wrap{
  display:flex; justify-content:space-between; flex-wrap:wrap;
  gap:12px; align-items:center; max-width:1120px;
}
footer a{color:#7C8798;}

/* ===== WHATSAPP FLOTANTE (móvil) ===== */
.wa-float{
  display:none; position:fixed; right:16px; bottom:16px; z-index:60;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,0.30);
}
.wa-float svg{width:30px; height:30px;}

@media (max-width:860px){
  .nav-cta{display:none;}
  .wa-float{display:inline-flex;}
  article{padding:38px 0 48px;}
}