/* =====================================================================
   ESTILOS COMUNES DE LOS ARTÍCULOS DEL BLOG DE EiAmazonia
   Referencia ya hecha: el-rio-amazonas-nuevo.html (y pueblos-indigenas-brasil-nuevo.html).
   Enlazar SIEMPRE después de comun.css, en el <head>:
     <link rel="stylesheet" href="recursos/comun.css">
     <link rel="stylesheet" href="recursos/articulo.css">
   Los artículos no llevan <style> ni <script> propios (salvo que tengan algo
   muy especial). Al final del body: <script src="recursos/comun.js"></script>
   En el menú, aria-current="page" va en el enlace "Blog".

   ESTRUCTURA HTML ESPERADA (en este orden, dentro de <main id="contenido">)
   ---------------------------------------------------------------------
   1) BANNER CON EL TÍTULO (foto destacada del artículo de fondo; 400 px de
      alto en escritorio, 300 px en móvil, velo negro al 50 %).
      La foto va en un style en línea (no en una variable CSS, para que la
      ruta relativa funcione). Si la página antigua no tenía banner, se usa
      igualmente la foto destacada para que todos los artículos sean iguales.
        <header class="banner-articulo" style="background-image:url('wp-content/uploads/...')">
          <div data-anima="fadeIn" data-retraso="300">
            <h1 class="titulo-foto">TÍTULO DEL ARTÍCULO</h1>
          </div>
        </header>

   2) <article class="articulo">   (caja de 960 px de texto, centrada)
      2a) Título repetido, como en la web antigua (solo visual):
            <p class="articulo-titulo" aria-hidden="true">TÍTULO DEL ARTÍCULO</p>
      2b) Imagen destacada:
            <figure class="articulo-foto">
              <img src="..." srcset="..." sizes="(max-width: 1000px) 100vw, 960px"
                   alt="descripción" width="..." height="..." fetchpriority="high">
            </figure>
      2c) Fecha y categoría (sin autor "admin" ni contador de comentarios).
          Iconos: reloj y carpeta en SVG en línea (copiarlos de el-rio-amazonas-nuevo.html).
          Si el artículo no tenía categoría (p. ej. "Uncategorized"), se omite ese <li>.
            <ul class="articulo-datos">
              <li><span class="oculto">Publicado el </span><svg ...reloj...></svg><time datetime="2022-04-05">05/04/2022</time></li>
              <li><span class="oculto">Categoría: </span><svg ...carpeta...></svg>Educación</li>
            </ul>
      2d) Cuerpo con el texto completo:
            <div class="articulo-cuerpo"> ... </div>
          Dentro valen: <p>, <h2>/<h3> (subtítulos: se ven como la negrita de
          16 px de la antigua; usar h2 en lugar de <p><strong>), <ol>/<ul>,
          <a>, <figure><img><figcaption>, <blockquote>, y vídeos con
            <div class="video"><iframe src="https://www.youtube-nocookie.com/embed/ID" title="..." loading="lazy" allowfullscreen></iframe></div>
          Los párrafos vacíos (&nbsp;) de WordPress se quitan.
      2e) Navegación entre artículos (orden cronológico, del más reciente al
          más antiguo: el-rio-amazonas 05/04/2022 > los-guardianes-de-la-biodiversidad
          18/03/2022 > remedios-indigenas-amazonicos 05/02/2021 >
          pueblos-indigenas-brasil 30/01/2021 > nature-is-fierce 09/12/2020).
          "Entrada anterior" = el más antiguo siguiente de la lista; "Entrada
          siguiente" = el más reciente. Si no existe, se deja <span class="..."></span> vacío.
            <nav class="articulo-nav" aria-label="Otros artículos">
              <a class="anterior" href="xxx-nuevo.html"><span>‹ Entrada anterior</span><strong>TÍTULO</strong></a>
              <a class="siguiente" href="yyy-nuevo.html"><span>Entrada siguiente ›</span><strong>TÍTULO</strong></a>
              <a class="volver-blog" href="blog-nuevo.html">Ver todos los artículos del blog</a>
            </nav>
      </article>

   3) "TAMBIÉN PODRÍA GUSTARTE" (los mismos artículos relacionados que
      mostraba la antigua, como enlaces fijos a los -nuevo.html; 3 columnas en
      escritorio, 1 en móvil). Miniaturas ligeras ya creadas para los 5:
      wp-content/uploads/2026/09/blog-miniatura-<slug>.webp (640 px de ancho;
      tamaños: el-rio-amazonas 640x360, los-guardianes-de-la-biodiversidad 640x640,
      remedios-indigenas-amazonicos 640x360, pueblos-indigenas-brasil 640x427,
      nature-is-fierce 640x362).
        <section class="relacionados" aria-labelledby="titulo-relacionados">
          <h2 id="titulo-relacionados"><svg viewBox="0 0 10 16" aria-hidden="true"><path d="M2 2l6 6-6 6"/></svg>También podría gustarte</h2>
          <ul>
            <li>
              <a class="foto-relacionado" href="slug-nuevo.html" tabindex="-1" aria-hidden="true"><img src="wp-content/uploads/2026/09/blog-miniatura-slug.webp" alt="" width="640" height="360" loading="lazy"></a>
              <h3><a href="slug-nuevo.html">TÍTULO</a></h3>
              <time datetime="2022-03-18"><svg ...reloj...></svg>18/03/2022</time>
            </li>
          </ul>
        </section>

   Se quitan de WordPress: comentarios y formulario "Deja una respuesta",
   buscador, enlace al autor, enlace a la página de categoría y widgets
   dinámicos. No hay "Forma parte" al final (la antigua no lo tenía).
   Después de </main>: el pie y el botón "volver arriba" copiados de
   quien-somos-nuevo.html.
   ===================================================================== */

/* ---------- Texto solo para lectores de pantalla ---------- */
.oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Banner con el título (foto destacada de fondo) ---------- */
.banner-articulo{position:relative;min-height:400px;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 30px;background-color:#1b2417;background-position:center top;background-size:cover;background-repeat:no-repeat;overflow:hidden}
.banner-articulo::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.banner-articulo>div{position:relative;max-width:100%}
.banner-articulo h1{margin:0 auto;color:#fff;font-size:48px;line-height:1.1;letter-spacing:.3px;overflow-wrap:break-word}
@media (max-width:767px){.banner-articulo{min-height:300px;padding:40px 20px}.banner-articulo h1{font-size:34px}}
@media (max-width:359px){.banner-articulo h1{font-size:30px}}

/* ---------- Cuerpo del artículo ---------- */
.articulo{max-width:1000px;margin:0 auto;padding:100px 20px 0}
.articulo-titulo{margin:24px 0 15px;padding-bottom:20px;border-bottom:1px solid #f1f1f1;text-align:center;color:#333;font-size:34px;font-weight:600;line-height:1.4;letter-spacing:.6px;overflow-wrap:break-word}
.articulo-foto{margin:24px 0}
.articulo-foto img{width:100%}
.articulo-datos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;margin:20px 0;padding:0 0 10px;border-bottom:1px solid #f1f1f1;color:#4a4a4a;font-size:14px;line-height:1.4;letter-spacing:.6px}
.articulo-datos li{display:flex;align-items:center;padding-bottom:5px}
.articulo-datos li+li::before{content:"-";margin:0 8px}
.articulo-datos svg{width:16px;height:16px;margin-right:9px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5}
.articulo-cuerpo{color:#333;line-height:19px;overflow-wrap:break-word}
.articulo-cuerpo p{margin:24px 0}
.articulo-cuerpo h2,.articulo-cuerpo h3{margin:24px 0;color:#333;font-size:16px;font-weight:700;line-height:19px}
.articulo-cuerpo ol,.articulo-cuerpo ul{margin:24px 0;padding-left:20px}
.articulo-cuerpo li+li{margin-top:6px}
.articulo-cuerpo a{color:var(--verde)}
.articulo-cuerpo a:hover{color:var(--naranja)}
.articulo-cuerpo img{margin:24px auto}
.articulo-cuerpo figure{margin:24px 0}
.articulo-cuerpo figcaption{margin-top:8px;text-align:center;color:#777;font-size:14px}
.articulo-cuerpo blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:4px solid var(--naranja);font-family:var(--roboto);font-style:italic}
.articulo-cuerpo .video{position:relative;margin:24px 0;aspect-ratio:16/9}
.articulo-cuerpo .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:767px){.articulo{padding-top:50px}.articulo-titulo{font-size:26px}}

/* ---------- Navegación entre artículos ---------- */
.articulo-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px;margin:40px 0 0;padding:20px 0;border-top:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1}
.articulo-nav a{color:#333;text-decoration:none}
.articulo-nav .siguiente{text-align:right}
.articulo-nav a span{display:block;margin-bottom:4px;color:#4a4a4a;font-size:12px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase}
.articulo-nav strong{font-size:15px;font-weight:600;line-height:1.35;transition:color .2s}
.articulo-nav a:hover strong{color:var(--naranja)}
.articulo-nav .volver-blog{grid-column:1/-1;justify-self:center;padding:6px 0;color:var(--verde);font-size:14px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.articulo-nav .volver-blog:hover{color:var(--naranja)}
@media (max-width:480px){.articulo-nav{grid-template-columns:1fr}.articulo-nav .siguiente{text-align:left}.articulo-nav>span:empty{display:none}}

/* ---------- También podría gustarte ---------- */
.relacionados{max-width:1100px;margin:24px auto 0;padding:30px 20px 70px}
.relacionados h2{display:flex;align-items:center;gap:9px;margin:0 0 20px;color:#333;font-size:14px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase}
.relacionados h2 svg{width:8px;height:13px;fill:none;stroke:var(--naranja);stroke-width:2.6}
.relacionados ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px 12.5px}
.relacionados li{padding:0 6px;text-align:center}
.relacionados .foto-relacionado{display:block;overflow:hidden}
.relacionados img{width:100%;transition:opacity .25s}
.relacionados .foto-relacionado:hover img{opacity:.85}
.relacionados h3{margin:12px 12px 3px;font-size:16px;font-weight:600;line-height:1.4}
.relacionados h3 a{color:#333;text-decoration:none;transition:color .2s}
.relacionados h3 a:hover{color:var(--naranja)}
.relacionados time{display:inline-flex;align-items:center;gap:4px;color:#333;font-size:12px}
.relacionados time svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}
@media (max-width:767px){.relacionados ul{grid-template-columns:1fr}.relacionados li{padding:0}}

/* ---------- El artículo, en caja gris (17/09) ----------
   El cuerpo del artículo (título, foto, datos, texto y navegación) va dentro de
   una caja gris clara, como el resto de bloques de texto de la web.
   Las líneas finas de separación se oscurecen un poco para que se vean sobre
   el gris. Vale también para ca/en/pt-br/fr/de (mismas clases). */
.articulo{
  box-sizing:border-box;
  width:min(1000px, calc(100% - 2*var(--margen-lateral,20px)));max-width:none;
  margin:var(--respiro,56px) auto 0;
  padding:var(--relleno-caja,40px);
  background:var(--fondo-suave,#F7F5F1);
  border-radius:var(--radio,16px);
}
.articulo-titulo{margin-top:0;border-bottom-color:rgba(0,0,0,.1)}
.articulo-datos{border-bottom-color:rgba(0,0,0,.1)}
.articulo-nav{border-top-color:rgba(0,0,0,.1);border-bottom-color:rgba(0,0,0,.1)}
.articulo-cuerpo .video,.articulo-cuerpo img,.articulo-foto img{border-radius:var(--radio-peq,10px)}
@media (max-width:767px){.articulo{padding:var(--relleno-caja,24px)}}
