@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
body, html {margin:0;padding:0;width:100%;min-height:100%;font-family:'Inter',sans-serif;scroll-behavior:smooth;background:#f8fafc;color:#1e293b;}
p.text-justify{text-align:justify;}
#slogan-bar{background:#334155;color:#fff;border-bottom:1px solid #475569;}
#app-title-bar{background:#fff;border-bottom:1px solid #e2e8f0;}
.mobile-header-btn{padding:.4rem .8rem;font-size:.8rem;font-weight:500;color:#fff;border-radius:.375rem;white-space:nowrap;transition:background-color .2s ease;border:1px solid #38bdf8;text-decoration:none;}
.mobile-header-btn.bg-sky-600{background:#0284c7;border-color:transparent;}
.article-hero{background:linear-gradient(135deg,#fff,#f0f9ff);}
.article-card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;box-shadow:0 4px 14px rgba(15,23,42,.05);}
.article-highlight{background:#f0f9ff;border-left:4px solid #0ea5e9;border-radius:.5rem;}
.article-problem{background:#fff1f2;border-left:4px solid #f43f5e;border-radius:.5rem;}
.article-good{background:#ecfdf5;border-left:4px solid #10b981;border-radius:.5rem;}
.article-index a{color:#0369a1;text-decoration:none;}
.article-index a:hover{text-decoration:underline;}
.article-content h2{font-size:1.75rem;line-height:1.2;margin-top:2.25rem;margin-bottom:1rem;font-weight:800;color:#0f172a;}
.article-content h3{font-size:1.25rem;line-height:1.25;margin-top:1.5rem;margin-bottom:.75rem;font-weight:700;color:#0f172a;}
.article-content p{margin:.9rem 0;color:#334155;text-align:justify;}
.article-content ul{margin:1rem 0 1rem 1.25rem;color:#334155;}
.article-content li{margin:.45rem 0;}
.article-content strong{color:#0f172a;}

.cta-box {
    background: #0f172a; /* slate-900 */
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.cta-box p {
    color: #e2e8f0; /* slate-200 */
    margin-top: 0;
}

.cta-box a{display:inline-block;background:#0ea5e9;color:#fff;padding:.85rem 1.2rem;border-radius:.6rem;text-decoration:none;font-weight:700;}
.fab-btn{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:9999px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);transition:transform .2s ease-in-out, box-shadow .2s ease-in-out;text-decoration:none;}
.fab-btn:hover{transform:scale(1.05);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}
footer a{color:#475569;text-decoration:none;}
footer a:hover{color:#0284c7;text-decoration:underline;}
.container{max-width:1200px;margin:0 auto;}
.max-w-4xl{max-width:56rem;}
.max-w-5xl{max-width:64rem;}
.mx-auto{margin-left:auto;margin-right:auto;}
.px-4{padding-left:1rem;padding-right:1rem;}
.py-2{padding-top:.5rem;padding-bottom:.5rem;}
.py-3{padding-top:.75rem;padding-bottom:.75rem;}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}
.py-16{padding-top:4rem;padding-bottom:4rem;}
.pt-4{padding-top:1rem;}
.pb-2{padding-bottom:.5rem;}
.mt-2{margin-top:.5rem;}
.mt-3{margin-top:.75rem;}
.mt-4{margin-top:1rem;}
.mt-6{margin-top:1.5rem;}
.mt-8{margin-top:2rem;}
.mt-10{margin-top:2.5rem;}
.mb-2{margin-bottom:.5rem;}
.mb-4{margin-bottom:1rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-8{margin-bottom:2rem;}
.text-center{text-align:center;}
.text-white{color:#fff;}
.text-slate-600{color:#475569;}
.text-slate-700{color:#334155;}
.text-slate-800{color:#1e293b;}
.text-slate-900{color:#0f172a;}
.text-sky-600{color:#0284c7;}
.bg-slate-800{background:#1e293b;}
.bg-slate-700{background:#334155;}
.bg-sky-600{background:#0284c7;}
.bg-emerald-600{background:#059669;}
.rounded-lg{border-radius:.5rem;}
.rounded-xl{border-radius:.75rem;}
.rounded-2xl{border-radius:1rem;}
.shadow{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}
.border-t{border-top:1px solid #e2e8f0;}
.grid{display:grid;}
.gap-8{gap:2rem;}
.flex{display:flex;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.flex-wrap{flex-wrap:wrap;}
.gap-2{gap:.5rem;}
.gap-3{gap:.75rem;}
.gap-4{gap:1rem;}
.font-bold{font-weight:700;}
.font-semibold{font-weight:600;}
.font-extrabold{font-weight:800;}
.text-sm{font-size:.875rem;}
.text-base{font-size:1rem;}
.text-lg{font-size:1.125rem;}
.text-xl{font-size:1.25rem;}
.text-2xl{font-size:1.5rem;}
.text-3xl{font-size:1.875rem;}
.text-4xl{font-size:2.25rem;}
.leading-tight{line-height:1.15;}
.uppercase{text-transform:uppercase;}
.tracking-wider{letter-spacing:.06em;}
.w-full{width:100%;}
.fixed{position:fixed;}
.bottom-6{bottom:1.5rem;}
.right-6{right:1.5rem;}
.z-40{z-index:40;}
.space-y-3 > * + *{margin-top:.75rem;}
@media (min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .md\:text-left{text-align:left;}
  .md\:text-center{text-align:center;}
}

/* Barra de slogan del header en artículos */
#slogan-bar p {
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
  margin: 0;
}

@media (max-width: 640px) {
  #slogan-bar p {
    font-size: 0.68rem;
    line-height: 1.15;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
}