/* =========================
       Base
       ========================= */
    :root {
      --bg: #ffffff;
      --text: #111111;
      --muted: #5a5a5a;
      --brand: #002028;
      --card: #f2f2f2;
      --max: 1200px;
      --pad: 1.25rem;
      --gap: 1.25rem;
      --radius: 10px;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color: var(--text);
      background: var(--bg);
      line-height: 1.6;
    }
    a { color: inherit; }
    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 var(--pad);
    }

    /* =========================
       Header + Menú superior
       ========================= */
    header {
      border-bottom: 1px solid #e7e7e7;
    }
    .topbar {
      display: flex;
      align-items: center;
      gap: var(--gap);
      padding: 0.75rem 0;
    }
    .topbar img {
      display: block;
      height: auto;
      max-width: 220px;
    }
    .site-title {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 600;
    }
    .site-title a {
      text-decoration: none;
    }

    nav.menu {
      background: var(--brand);
    }
    nav.menu ul {
      list-style: none;
      margin: 0;
      padding: 0.5rem 0;
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }
    nav.menu a {
      color: #fff;
      text-decoration: none;
      padding: 0.35rem 0.5rem;
      display: inline-block;
      border-radius: 6px;
    }
    nav.menu a:hover {
      background: rgba(255,255,255,0.12);
      text-decoration: none;
    }

    /* =========================
       Contenido (TEST)
       ========================= */
    main {
      padding: 2rem 0 2.5rem;
    }
    h1 {
      margin: 0 0 1rem;
      line-height: 1.2;
    }
    .lead {
      color: var(--muted);
      margin-top: 0;
      max-width: 80ch;
    }

    /* Bloques de publicaciones en 2 columnas */
    .wp-block-group_art {
      margin-top: 1.5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }
    @media (max-width: 900px) {
      .wp-block-group_art {
        grid-template-columns: 1fr;
      }
    }

    /* Tarjeta */
    .wp-block-group {
      background: var(--card);
      padding: 1.25rem;
      border-radius: var(--radius);
    }
    .wp-block-group h2 {
      margin: 0 0 0.5rem;
      font-size: 1.25rem;
      line-height: 1.25;
    }
    .meta {
      margin: 0.75rem 0 0;
      font-size: 0.95rem;
    }

    /* =========================
       Footer + Menú inferior
       ========================= */
    footer {
      border-top: 1px solid #e7e7e7;
      padding: 1.5rem 0 2rem;
      background: #fafafa;
    }
    footer nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 0.5rem;
    }
    footer nav a {
      color: var(--brand);
    }
    .footer-note {
      margin-top: 1rem;
      color: var(--muted);
      font-size: 0.95rem;
    }
	
	/* =========================
   META como TAGS
   ========================= */

ul.meta {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

ul.meta li {
  background-color: #e6e6e6;      /* color de fondo */
  color: #002028;                 /* color del texto */
  padding: 0.25rem 0.6rem;
  border-radius: 999px;           /* estilo pill / tag */
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
}

ul.meta li a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

ul.meta li a:hover {
  text-decoration: underline;
}

/* =========================
   Título en inglés (secundario)
   ========================= */

p.tit_en {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.9rem;          /* letra pequeña */
  font-style: italic;         /* típico para títulos traducidos */
  color: #555555;             /* gris medio */
  line-height: 1.4;
}

/* =========================
   Referencia destacada (badge)
   ========================= */

p.ref {
  display: inline-block;
  margin: 0.6rem 0 0;
  padding: 0.25rem 0.6rem;

  background-color: #f26b3a;     /* naranja-rojo */
  color: #ffffff;

  border-radius: 999px;          /* muy redondeado */
  font-size: 0.85rem;
  line-height: 1.3;
}

p.ref a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

p.ref a:hover {
  text-decoration: underline;
}

/* =========================
   FOOTER
   ========================= */

footer {
  background-color: #8d1300;   /* granate UMU */
  color: #ffffff;
  padding: 2rem 0;
}

/* Contenedor en dos columnas */
footer .wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
}

/* Logo a la izquierda */
footer .footer-note {
  margin: 0;
}

footer .footer-note img {
  max-width: 220px;
  height: auto;
  display: block;
}

/* Navegación a la derecha */
footer nav {
  justify-self: end;
}

footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

footer nav li {
  margin-bottom: 0.4rem;
}

footer nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
}

footer nav a:hover {
  text-decoration: underline;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 768px) {
  footer .wrap {
    grid-template-columns: 1fr;
    text-align: center;
  }

  footer nav {
    justify-self: center;
  }

  footer .footer-note img {
    margin: 0 auto;
  }
}
#hero1 {
  position: relative;
  background-image: url("Pegatines_2025-downside.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 320px;
  padding: 3rem 1.5rem;

  color: #ffffff;
  display: flex;
  align-items: flex-start;   /* 🔹 alineación superior */
}

/* Overlay suavizado */
#hero1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 210, 190, 0.18); /* cálido, muy suave */
}

/* Contenido por encima del overlay */
#hero1 > * {
  position: relative;
  z-index: 1;
}
/* =========================
   Post-it / aviso destacado
   ========================= */

p.post-it {
  display: inline-block;
  margin: 0.6rem 0.6rem 0.6rem 0.6rem ;
  padding: 0.35rem 0.7rem;

  background: rgba(200, 120, 90, 0.35);
  color: #ffffff;

  font-size: 0.9rem;
  line-height: 1.3;

  font-weight: 500;
}
/* =========================
   HERO SUAVE (sin imagen)
   ========================= */

#hero1.hero-suave {
  background-image: linear-gradient(
    135deg,
    #a33a4f 0%,   /* granate claro */
    #c96b6b 50%,  /* rosado cálido */
    #e6b0a6 100%  /* tono claro */
  );
}

/* Sin overlay en hero-suave */
#hero1.hero-suave::before {
  content: none;
}

.wp-block-group.alt {
  background-color: #f9f4f2;   /* claro, cálido y distinto */
}

* =========================
   HERO OSCURO 
   ========================= */

#hero1.hero-oscuro {
  background-image: url("Pegatines_2025-downside.jpeg");
  
}

/* Sin overlay */

#hero1.hero-oscuro::before {
  content: none;