/* Estilos compartidos por blog.html y las noticias */
::selection { background: #E06D63; color: white; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }

.dot-pattern {
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 20px 20px;
}
.bg-dots {
    background-image: radial-gradient(rgba(11, 78, 56, 0.08) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
}

.animate-blob { animation: blob 8s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

/* ---------- Cuerpo de la noticia ----------
   Dentro de <div class="articulo"> basta con escribir HTML simple:
   <p>, <h2>, <h3>, <ul><li>, <ol><li>, <strong>, <a>, <blockquote>, <img>. */
.articulo { color: #374151; font-size: 1.0625rem; line-height: 1.8; }
.articulo > * + * { margin-top: 1.25rem; }
.articulo h2 {
    font-family: 'Montserrat', sans-serif; font-weight: 800; color: #073827;
    font-size: 1.6rem; line-height: 1.25; margin-top: 3rem; padding-left: 1rem;
    border-left: 4px solid #E06D63;
}
.articulo h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #0B4E38; font-size: 1.25rem; margin-top: 2rem; }
.articulo strong { color: #073827; font-weight: 700; }
.articulo a { color: #0B4E38; font-weight: 600; text-decoration: underline; text-decoration-color: #E06D63; text-underline-offset: 3px; }
.articulo a:hover { color: #E06D63; }
.articulo ul, .articulo ol { padding-left: 0; list-style: none; }
.articulo li { position: relative; padding-left: 1.75rem; }
.articulo li + li { margin-top: 0.6rem; }
.articulo ul > li::before {
    content: ''; position: absolute; left: 0.35rem; top: 0.72em;
    width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #E06D63;
}
.articulo ol { counter-reset: paso; }
.articulo ol > li { counter-increment: paso; padding-left: 2.25rem; }
.articulo ol > li::before {
    content: counter(paso); position: absolute; left: 0; top: 0.2em;
    width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: #0B4E38; color: #fff;
    font: 700 0.8rem/1.5rem 'Montserrat', sans-serif; text-align: center;
}
.articulo blockquote {
    background: #F2EFE8; border-radius: 1rem; padding: 1.25rem 1.5rem;
    border-left: 4px solid #0B4E38; font-style: italic;
}
.articulo img { border-radius: 1rem; width: 100%; height: auto; }

/* Cajas destacadas: <div class="destacado">…</div> o <div class="destacado alerta">…</div> */
.articulo .destacado { background: #fff; border: 1px solid #E5E7EB; border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); }
.articulo .destacado.alerta { background: #F4EAEA; border-color: rgba(224, 109, 99, 0.3); }
.articulo .destacado > * + * { margin-top: 0.75rem; }
.articulo .destacado-titulo { font-family: 'Montserrat', sans-serif; font-weight: 800; color: #073827; display: flex; align-items: center; gap: 0.5rem; }
