/*
Theme Name: Jardines Botánicos de Risaralda
Theme URI: https://jardinbotanico.utp.edu.co/
Author: Equipo de desarrollo
Author URI: https://jardinbotanico.utp.edu.co/
Description: Tema personalizado de alta fidelidad para los Jardines Botánicos de Risaralda. Construido con Bootstrap 5.3.3 (self-hosted), tipografías Atkinson Hyperlegible y Noto Sans, y un sistema de diseño basado en variables CSS (design tokens). Accesible (WCAG 2.1 AA) y modular.
Version: 0.5.3
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jbr
Tags: custom-theme, bootstrap, accessibility-ready, translation-ready
*/

/* =========================================================================
   1. FUENTES SELF-HOSTED (@font-face)
   Encabezados: Atkinson Hyperlegible · Cuerpo: Noto Sans
   ========================================================================= */

/* --- Atkinson Hyperlegible (encabezados) --- */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("recursos/fuentes/atkinson-hyperlegible/latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("recursos/fuentes/atkinson-hyperlegible/latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("recursos/fuentes/atkinson-hyperlegible/latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("recursos/fuentes/atkinson-hyperlegible/latin-700-italic.woff2") format("woff2");
}

/* --- Noto Sans (cuerpo) --- */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("recursos/fuentes/noto-sans/latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("recursos/fuentes/noto-sans/latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("recursos/fuentes/noto-sans/latin-700-normal.woff2") format("woff2");
}

/* =========================================================================
   2. DESIGN TOKENS (variables CSS)
   Paleta "verdes botánicos". Cambiar aquí NO altera el layout.
   ========================================================================= */
:root {
  /* Paleta verde */
  --jb-green-900: #14331f;
  /* header / footer oscuro */
  --jb-green-800: #1f3d2b;
  --jb-green-700: #2e6b3e;
  /* primario / botones */
  --jb-green-600: #3a7d4c;
  --jb-green-200: #cfe6d4;
  /* enlaces sobre fondo oscuro (footer) */
  --jb-green-100: #e8f0e6;
  /* tarjeta destacada / fondos suaves */
  --jb-green-50: #f3f8f1;

  /* Neutros */
  --jb-ink: #1a1a1a;
  /* texto principal */
  --jb-muted: #55625a;
  /* texto secundario */
  --jb-on-dark: #ffffff;
  /* texto sobre fondos oscuros */
  --jb-on-dark-soft: rgba(255, 255, 255, .85);
  /* texto secundario sobre oscuro */
  --jb-border: #d9d9d9;
  /* bordes de tarjetas */
  --jb-surface: #ffffff;
  --jb-surface-alt: #f5f7f4;
  --jb-focus: #7bb98a;
  /* anillo de foco */

  /* Controles sobre fotografía (flechas y reproducir/pausar de los carruseles).
     Es --jb-green-900 con canal alfa: el disco deja ver la foto en vez de
     taparla. La transparencia va AQUÍ, en el color, y no en `opacity` del
     botón — `opacity` desvanecería también la flecha blanca de dentro, que es
     justo lo que tiene que seguir leyéndose. */
  --jb-control-fondo: #14331f7a;
  /* verde 900 al 48% */
  --jb-control-fondo-activo: #14331fc7;
  /* el mismo al 78%, para hover y foco */

  /* Tipografía */
  --jb-font-heading: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jb-font-body: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Espaciado y formas */
  --jb-section-y: clamp(2.5rem, 5vw, 4rem);
  --jb-radius: 3px;

  /* Overrides de variables Bootstrap */
  --bs-body-font-family: var(--jb-font-body);
  --bs-body-color: var(--jb-ink);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-link-color: var(--jb-green-700);
  --bs-link-color-rgb: 46, 107, 62;
  --bs-link-hover-color: var(--jb-green-900);
  --bs-emphasis-color: var(--jb-ink);
  --bs-border-color: var(--jb-border);
}

/* =========================================================================
   3. BASE / GLOBAL
   ========================================================================= */
body {
  font-family: var(--jb-font-body);
  color: var(--jb-ink);
  background-color: var(--jb-surface);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--jb-font-heading);
  font-weight: 700;
  color: var(--jb-ink);
  line-height: 1.2;
}

a {
  color: var(--jb-green-700);
}

a:hover {
  color: var(--jb-green-900);
}

/* Foco visible (accesibilidad) */
:focus-visible {
  outline: 3px solid var(--jb-focus);
  outline-offset: 2px;
}

/* Skip link */
.jb-skip-link {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2000;
  transform: translateY(-120%);
  background: var(--jb-green-900);
  color: var(--jb-on-dark);
  padding: .6rem 1rem;
  border-radius: 0 0 var(--jb-radius) 0;
  text-decoration: none;
  transition: transform .15s ease;
}

.jb-skip-link:focus {
  transform: translateY(0);
  color: var(--jb-on-dark);
}

/* Divisor horizontal (líneas del wireframe) */
.jb-divider {
  border: 0;
  border-top: 1px solid var(--jb-border);
  margin: 0;
}

/* Contenedor de contenido genérico (plantillas de respaldo) */
.jb-page {
  padding-block: var(--jb-section-y);
}

/* =========================================================================
   4. BOTONES
   ========================================================================= */
.jb-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--jb-green-700);
  color: var(--jb-on-dark);
  border: 0;
  border-radius: var(--jb-radius);
  padding: .6rem 1.15rem;
  font-family: var(--jb-font-body);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}

.jb-btn::after {
  content: "\203A";
  /* › */
  font-size: 1.15em;
  line-height: 1;
  margin-top: -.1em;
}

.jb-btn:hover,
.jb-btn:focus-visible {
  background: var(--jb-green-900);
  color: var(--jb-on-dark);
}

.jb-btn--sm {
  padding: .45rem .9rem;
  font-size: .85rem;
}

/* =========================================================================
   5. HEADER / NAVBAR
   Navbar "offcanvas" de Bootstrap: bajo el breakpoint lg el menú vive en un
   panel deslizante propio (.jb-offcanvas, con cabecera, foco y cierre); a
   partir de lg, Bootstrap lo vuelve un contenedor en línea sin tocar el
   marcado (ver ".navbar-expand-lg .offcanvas" en bootstrap.min.css). Lo de
   abajo son las afinaciones visuales sobre ese comportamiento.
   ========================================================================= */
.jb-navbar {
  background-color: var(--jb-green-50);
  border-bottom: 1px solid var(--jb-border);
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* --- Logo del sitio ---
   Alto fijo en todo el rango: en móvil pesa junto al botón de menú y en
   escritorio acompaña a la marca del Ministerio. Cubre tanto el logo de
   respaldo (.jb-navbar__logo-mark) como el que suba el administrador desde
   Apariencia → Personalizar (.custom-logo, clase propia de WordPress). */
.jb-navbar__logo {
  display: inline-flex;
  align-items: center;
  color: var(--jb-green-900);
}

.jb-navbar__logo-mark,
.jb-navbar__logo .custom-logo {
  height: 85px;
  width: auto;
  max-width: 100%;
}

/* --- Menú principal ---
   En móvil los ítems se leen como una lista apilada dentro del offcanvas,
   con fondo propio al pasar el cursor/foco o estar activos; desde lg vuelven
   al patrón horizontal con subrayado, propio de una barra de navegación. */
.jb-navbar .navbar-nav {
  padding-block: .5rem;
}

.jb-navbar .navbar-nav .nav-link {
  color: var(--jb-green-800);
  font-weight: 500;
  padding: .7rem .85rem;
  border-radius: var(--jb-radius);
}

.jb-navbar .navbar-nav .nav-link:hover,
.jb-navbar .navbar-nav .nav-link:focus-visible,
.jb-navbar .navbar-nav .nav-link.active,
.jb-navbar .navbar-nav .nav-link[aria-expanded="true"] {
  color: var(--jb-green-900);
  font-weight: 700;
  background-color: var(--jb-green-100);
}

/* La flecha del desplegable gira para reforzar el estado "abierto" que ya
   anuncia aria-expanded. */
.jb-navbar .dropdown-toggle::after {
  transition: transform .15s ease;
}

.jb-navbar .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(-180deg);
}

/* Submenús desplegables (segundo nivel del menú principal).
   En móvil, Bootstrap los deja con position: static dentro del offcanvas:
   se abren en línea, como un bloque anidado con sangría y un borde de color
   que marca la jerarquía. Desde lg vuelven a flotar como una tarjeta clásica
   (ver @media más abajo). */
.jb-navbar__dropdown {
  --bs-dropdown-link-color: var(--jb-green-800);
  --bs-dropdown-link-hover-color: var(--jb-green-900);
  --bs-dropdown-link-hover-bg: var(--jb-green-100);
  --bs-dropdown-link-active-color: var(--jb-on-dark);
  --bs-dropdown-link-active-bg: var(--jb-green-700);
  --bs-dropdown-bg: var(--jb-green-50);
  --bs-dropdown-border-width: 0;
  --bs-dropdown-font-size: .95rem;
  margin: .15rem 0 .5rem;
  padding-inline-start: .5rem;
  border-left: 3px solid var(--jb-green-700);
  border-radius: 0 var(--jb-radius) var(--jb-radius) 0;
}

.jb-navbar__dropdown .dropdown-item {
  white-space: normal;
  /* Los nombres de jardín son largos: que envuelvan. */
  padding-block: .55rem;
  border-radius: var(--jb-radius);
}

/* El subrayado de estado activo estorba en un elemento con flecha; el
   desplegable ya se distingue por su propio fondo al abrirse. */
.jb-navbar .nav-link.dropdown-toggle.active,
.jb-navbar .nav-link.dropdown-toggle[aria-expanded="true"] {
  border-bottom: 0;
}

/* Marca institucional del Ministerio de Ambiente (dentro del offcanvas en
   móvil, a la derecha del navbar desde lg). La imagen se sirve a doble
   resolución: se declara a su tamaño real en el marcado y se limita por
   alto en CSS, para que no se vea pixelada. */
.jb-gov {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  transition: opacity .15s ease;
}

.jb-gov:hover,
.jb-gov:focus-visible {
  opacity: .82;
}

.jb-gov__marca {
  display: block;
  height: 85px;
  width: auto;
  max-width: 100%;
}

.navbar-toggler {
  padding: .5rem .65rem;
  border-color: rgba(20, 51, 31, .4);
}

.navbar-toggler-icon {
  width: 1.6em;
  height: 1.6em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2820,51,31,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Panel del menú (offcanvas en móvil) ---
   Cabecera oscura con título y botón de cierre; el cuerpo hereda el fondo
   claro del navbar para que el menú y la marca institucional se lean como
   una sola pieza. Bootstrap oculta la cabecera y neutraliza este fondo por
   su cuenta desde lg (".navbar-expand-lg .offcanvas-header"), cuando el
   panel pasa a mostrarse en línea. */
.jb-offcanvas {
  --bs-offcanvas-width: min(22rem, 100%);
  background-color: var(--jb-green-50);
}

.jb-offcanvas .offcanvas-header {
  background-color: var(--jb-green-900);
}

.jb-offcanvas .offcanvas-title {
  color: var(--jb-on-dark);
  font-size: 1.1rem;
}

/* Aspa de cierre (btn-close de Bootstrap). Su opacidad por defecto (.5) está
   pensada para fondos claros y sobre el verde oscuro se apaga: aquí va a
   pleno. El padding la lleva a unos 40px de área táctil y el margen negativo
   compensa ese padding, para que el aspa quede a 1rem del borde del panel,
   en el mismo eje que el título. */
.jb-offcanvas .btn-close {
  --bs-btn-close-opacity: 1;
  padding: .75rem;
  margin-right: -.75rem;
  border-radius: var(--jb-radius);
}

.jb-offcanvas .btn-close:hover {
  background-color: rgba(255, 255, 255, .14);
}

/* =========================================================================
   6. HERO
   La imagen se resuelve con la custom property --jb-hero-img, para que cada
   plantilla pueda declarar su propio banner sin duplicar la regla. Sin definir,
   se usa el banner general del sitio.
   ========================================================================= */
.jb-hero__media {
  height: 200px;
  background: var(--jb-hero-img, url("recursos/imagenes/BannerPrincipal.jpg")) center / cover no-repeat;
  position: relative;
}

/* Banner de la página de detalle de un jardín. Placeholder: mientras no exista
   el asset propio hereda el banner general. Para cambiarlo basta descomentar y
   apuntar a la imagen del jardín. */
/* .jb-hero__media--jardin { --jb-hero-img: url("recursos/imagenes/BannerJardinUTP.jpg"); } */

/* Banner con 2 o 3 imágenes propias (campo _jbr_banner_galeria): mismo
   componente y controles que .jb-galeria__carrusel (secciones 15, más abajo),
   pero a todo el ancho y sin bordes redondeados, con la misma altura por
   punto de ruptura que .jb-hero__media. */
.jb-hero__carrusel {
  border-radius: 0;
}

.jb-hero__carrusel,
.jb-hero__carrusel .carousel-inner,
.jb-hero__carrusel .carousel-item {
  height: 200px;
}

.jb-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
   7. SUBBAR (breadcrumb + buscador)
   ========================================================================= */
.jb-subbar {
  background: var(--jb-surface);
  border-bottom: 1px solid var(--jb-border);
  padding-block: .75rem;
}

.jb-subbar .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.jb-breadcrumb {
  color: var(--jb-muted);
  font-size: .95rem;
}

.jb-breadcrumb a {
  color: var(--jb-muted);
  text-decoration: none;
}

.jb-breadcrumb a:hover {
  color: var(--jb-green-700);
  text-decoration: underline;
}

.jb-breadcrumb__sep {
  margin-inline: .15rem;
  color: var(--jb-border);
}

.jb-breadcrumb [aria-current="page"] {
  color: var(--jb-green-900);
  font-weight: 600;
}

.jb-search {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.jb-search__label {
  color: var(--jb-muted);
  font-size: .95rem;
}

.jb-search__input {
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius) 0 0 var(--jb-radius);
  padding: .4rem .7rem;
  min-width: 0;
  width: 180px;
  max-width: 45vw;
}

.jb-search__btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 34px;
  background: var(--jb-green-700);
  border: 0;
  border-radius: 0 var(--jb-radius) var(--jb-radius) 0;
  color: var(--jb-on-dark);
  cursor: pointer;
}

.jb-search__btn:hover {
  background: var(--jb-green-900);
}

.jb-search__btn svg {
  width: 18px;
  height: 18px;
}

/* =========================================================================
   8. INTRO + VIDEO
   ========================================================================= */
.jb-intro {
  padding-block: var(--jb-section-y);
}

.jb-intro__text h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--jb-green-900);
  margin-bottom: 1rem;
}

.jb-intro__text p {
  color: var(--jb-ink);
}

/* El contenido de la entrada (the_content) nunca desborda la columna. */
.jb-intro__text {
  overflow-wrap: break-word;
}

.jb-intro__entry img,
.jb-intro__entry iframe,
.jb-intro__thumb img {
  max-width: 100%;
  height: auto;
}

/* Embed de video (16:9) */
.jb-video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(160deg, var(--jb-green-100), #c9dcc7);
  border-radius: var(--jb-radius);
  overflow: hidden;
}

.jb-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================================
   9. TARJETAS DE JARDINES (flip card)
   Cara frontal: la imagen destacada del jardín a sangre, con el nombre encima
   sobre un velo degradado. Cara trasera: el extracto y el enlace a la ficha.
   Volteo con :hover / :focus-within, y solo en escritorio: hover real, puntero
   fino y ventana de 992 px para arriba. En móvil y tablet la tarjeta no voltea
   ni monta la cara trasera: se queda en su cara frontal, que es un enlace a la
   ficha, y la pista «Ver jardín» con su flecha lo anuncia.
   ========================================================================= */
.jb-gardens {
  padding-block: var(--jb-section-y);
}

.jb-flip-card {
  position: relative;
  /* Baldosa cuadrada: la altura la marca el ancho de la columna, así que la
     proporción es la misma en todos los tamaños de pantalla y no hay que
     ajustarla breakpoint a breakpoint. */
  aspect-ratio: 1 / 1;
  /* Suelo de seguridad: las dos caras son absolutas, así que un navegador sin
     aspect-ratio dejaría la tarjeta sin altura. Nunca se alcanza en uno
     moderno — la baldosa más pequeña, en lg, mide 216 px. */
  min-height: 180px;
  perspective: 1200px;
}

.jb-flip-card__inner {
  position: absolute;
  inset: 0;
  transition: transform .6s;
  transform-style: preserve-3d;
}

.jb-flip-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.25rem;
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.jb-flip-card__face--front {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  border-color: transparent;
  background: var(--jb-green-800);
  cursor: pointer;
  /* Es un enlace: se le quita el vestido de enlace, no el destino. */
  color: var(--jb-on-dark);
  text-decoration: none;
}

/* Un jardín sin imagen destacada no deja hueco: degradado de la paleta. */
.jb-flip-card__face--sin-imagen {
  background-image: linear-gradient(160deg, var(--jb-green-600), var(--jb-green-900));
}

.jb-flip-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo sobre la foto: sin él, un nombre blanco sobre un cielo claro no se lee. */
.jb-flip-card__velo {
  position: relative;
  padding: 2.5rem 1.25rem 1.25rem;
  background-image: linear-gradient(to top,
      rgba(20, 51, 31, .94) 0%,
      rgba(20, 51, 31, .78) 45%,
      rgba(20, 51, 31, 0) 100%);
}

/* Solo se monta donde hay volteo; el bloque de escritorio la devuelve. Fuera
   de ahí no se pinta nunca, así que se quita del documento en vez de dejarla
   girada y transparente: su extracto no se cuela en la lectura de un lector de
   pantalla ni su enlace en el orden del foco. */
.jb-flip-card__face--back {
  display: none;
  justify-content: space-between;
  background: var(--jb-green-50);
  transform: rotateY(180deg);
}

/* Antetítulo de la cara trasera: el nombre del jardín como recordatorio, no
   como titular. Pequeño, en versalitas y en una sola línea para que el
   extracto siga siendo lo que se lee primero; misma voz que la familia de las
   fichas de registro. */
.jb-flip-card__antetitulo {
  overflow: hidden;
  margin: 0 0 .6rem;
  color: var(--jb-green-700);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.jb-flip-card__title {
  font-size: 1.1rem;
  color: var(--jb-on-dark);
  text-shadow: 0 1px 2px rgba(20, 51, 31, .5);
  margin: 0;
}

/* Pista de destino: donde no hay volteo, nada más delata que la baldosa lleva
   a algún sitio. Se le da cuerpo de cápsula translúcida —no de botón— para que
   se lea como zona pulsable sin disputarle el peso al nombre del jardín; el
   área táctil de verdad es la baldosa entera, así que la cápsula solo señala.
   Solo se ve donde no hay volteo: en escritorio el diseño no cambia un píxel. */
.jb-flip-card__pista {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .55rem;
  padding: .3rem .6rem;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: var(--jb-on-dark);
  font-family: var(--jb-font-body);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(20, 51, 31, .5);
}

.jb-flip-card__pista svg {
  width: .9em;
  height: .9em;
  transition: transform .15s ease;
}

/* Única respuesta al toque: la flecha avanza mientras se pulsa, y confirma el
   gesto antes de que empiece a cargar la ficha. */
.jb-flip-card__face--front:active .jb-flip-card__pista svg {
  transform: translateX(.2rem);
}

.jb-flip-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--jb-muted);
  font-size: .9rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.jb-flip-card__cta {
  align-self: flex-start;
}

/* ---------------------------------------------------------------------------
   VOLTEO — SOLO ESCRITORIO.

   ESTE BLOQUE VA AQUÍ, DESPUÉS DE LAS REGLAS BASE, Y NO SE PUEDE SUBIR.
   Una media query no añade especificidad: «.jb-flip-card__pista» dentro de ella
   y «.jb-flip-card__pista» fuera pesan lo mismo (0,1,0), así que no decide la
   media query — decide el orden del archivo, y gana la de más abajo. Con este
   bloque colocado arriba, el «display: none» base de la cara trasera lo pisaba
   también en escritorio: la tarjeta volteaba a una cara vacía y el volteo se
   veía roto. Mismo motivo por el que la pista se quedaba visible en escritorio.

   Se reserva al escritorio porque sin hover no hay gesto que deshaga el volteo,
   y una tarjeta volteada que no se puede devolver esconde la foto y el nombre
   del jardín. El ancho mínimo no sobra junto a las condiciones de puntero: un
   portátil táctil o una tablet con trackpad declaran «hover: hover» y
   «pointer: fine» aunque se usen con el dedo, y una ventana de escritorio
   encogida a tamaño móvil las declara siempre. 992 px es el mismo corte (lg) en
   el que la cuadrícula pasa a cuatro columnas.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {

  .jb-flip-card:hover .jb-flip-card__inner,
  .jb-flip-card:focus-within .jb-flip-card__inner {
    transform: rotateY(180deg);
  }

  /* Aquí sí se monta la cara trasera: su extracto y su botón «Más Información»
     son justo lo que la tarjeta enseña al voltear. */
  .jb-flip-card__face--back {
    display: flex;
  }

  /* Y aquí sobra la pista: la cara trasera ya dice a dónde lleva la tarjeta, y
     el nombre del jardín recupera el aire que le quitaba la cápsula. */
  .jb-flip-card__pista {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .jb-flip-card__inner,
  .jb-flip-card__pista svg {
    transition: none;
  }
}

/* =========================================================================
   10. ESTADÍSTICAS
   ========================================================================= */
.jb-stats {
  padding-block: var(--jb-section-y);
}

.jb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding-inline: .5rem;
}

.jb-stat__pre {
  font-family: var(--jb-font-body);
  color: var(--jb-muted);
  font-size: .95rem;
}

.jb-stat__num {
  font-family: var(--jb-font-heading);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.25rem);
  line-height: 1;
  color: var(--jb-green-700);
}

.jb-stat__label {
  font-family: var(--jb-font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--jb-ink);
  line-height: 1.25;
}

/* =========================================================================
   11. FOOTER
   ========================================================================= */
.jb-footer {
  background: var(--jb-green-900);
  color: var(--jb-on-dark-soft);
  padding-block: clamp(2rem, 4vw, 3rem);
}

/* El título de columna: .jb-footer__title lo pone el área de widgets
   (before_title), pero en la pantalla de widgets por bloques el administrador
   puede poner un encabezado suelto, sin esa clase. Se cubren los dos. */
.jb-footer__title,
.jb-footer h2,
.jb-footer h3 {
  color: var(--jb-on-dark);
  font-size: 1.15rem;
  margin-bottom: .9rem;
}

.jb-footer p {
  margin-bottom: 0;
}

.jb-footer strong {
  color: var(--jb-on-dark);
}

.jb-footer a {
  color: var(--jb-green-200);
  text-decoration: none;
}

.jb-footer a:hover {
  color: var(--jb-on-dark);
  text-decoration: underline;
}

/* Aviso de «falta el contacto»: solo lo ve quien puede crear los widgets, así
   que se marca como algo pendiente, no como parte del diseño (ver footer.php). */
.jb-footer__aviso {
  border: 1px dashed var(--jb-green-200);
  border-radius: var(--jb-radius);
  padding: .85rem 1rem;
  font-size: .95rem;
}

/* Sticky footer: el body es una columna flexible (utilidades Bootstrap en el
   body, ver jbr_body_sticky_footer_classes) y el contenido principal crece para
   empujar el pie y el colofón al final incluso en páginas cortas. */
.jb-main {
  flex: 1 0 auto;
}

/* Colofón inferior (estático) — barra de créditos pegada al final. */
.jb-colophon {
  background: var(--jb-green-800);
  color: var(--jb-on-dark-soft);
  padding-block: .85rem;
  text-align: center;
}

.jb-colophon__text {
  font-size: .9rem;
  color: var(--jb-on-dark-soft);
}

/* =========================================================================
   12. BANDA DE URL (página de jardín)
   ========================================================================= */
.jb-urlband {
  background: var(--jb-green-900);
  color: var(--jb-on-dark);
  padding-block: clamp(1.5rem, 3.5vw, 2.75rem);
}

.jb-urlband__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.jb-urlband__text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  min-width: 0;
}

.jb-urlband__label {
  font-family: var(--jb-font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--jb-on-dark-soft);
  letter-spacing: .04em;
}

.jb-urlband__link {
  font-family: var(--jb-font-heading);
  font-weight: 700;
  font-size: clamp(1.35rem, 4vw, 2.4rem);
  line-height: 1.15;
  color: var(--jb-on-dark);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.jb-urlband__link:hover,
.jb-urlband__link:focus-visible {
  color: var(--jb-green-200);
  text-decoration: underline;
}

.jb-urlband__cta {
  flex: 0 0 auto;
}

/* =========================================================================
   13. TARJETAS DE CATEGORÍA (página de jardín)
   ========================================================================= */
.jb-cats {
  padding-block: var(--jb-section-y);
}

.jb-cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  background: var(--jb-surface);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.jb-cat-card:hover,
.jb-cat-card:focus-visible {
  border-color: var(--jb-green-700);
  box-shadow: 0 2px 10px rgba(20, 51, 31, .12);
}

/* Imagen de la colección (campo del jardín). Sin foto queda el marco gris. */
.jb-cat-card__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--jb-surface-alt);
  border-bottom: 1px solid var(--jb-border);
}

.jb-cat-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.jb-cat-card:hover .jb-cat-card__img,
.jb-cat-card:focus-visible .jb-cat-card__img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .jb-cat-card__img {
    transition: none;
  }

  .jb-cat-card:hover .jb-cat-card__img,
  .jb-cat-card:focus-visible .jb-cat-card__img {
    transform: none;
  }
}

.jb-cat-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
  text-align: center;
  padding: 1rem 1.1rem;
  font-family: var(--jb-font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--jb-green-900);
}

/* =========================================================================
   14. ENTRADAS EN PESTAÑAS (página de jardín)
   Pestañas verticales de Bootstrap (.nav-pills). Se personalizan sobrescribiendo
   las variables del propio componente en lugar de competir en especificidad.
   ========================================================================= */
.jb-entradas {
  padding-block: var(--jb-section-y);
}

.jb-entradas__nav {
  --bs-nav-pills-border-radius: var(--jb-radius);
  --bs-nav-pills-link-active-bg: var(--jb-green-700);
  --bs-nav-pills-link-active-color: var(--jb-on-dark);
  --bs-nav-link-color: var(--jb-green-900);
  --bs-nav-link-hover-color: var(--jb-green-900);
  gap: .5rem;
}

.jb-entradas__tab {
  text-align: left;
  border: 1px solid var(--jb-border);
  background: var(--jb-surface);
  font-size: .95rem;
  line-height: 1.35;
}

.jb-entradas__tab:hover {
  background: var(--jb-green-50);
}

.jb-entradas__tab.active {
  border-color: transparent;
}

.jb-entradas__author {
  color: var(--jb-muted);
  font-size: .85em;
}

.jb-entradas__tab.active .jb-entradas__author {
  color: var(--jb-on-dark-soft);
}

/* Marcador de posición de la fotografía del espécimen (registro sin imagen). */
.jb-entrada__media {
  aspect-ratio: 1 / 1;
  background: var(--jb-surface-alt);
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
}

/* Fotografía real del espécimen (imagen destacada del registro). */
.jb-entrada__figure {
  margin: 0;
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  overflow: hidden;
}

.jb-entrada__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Ficha del herbario */
.jb-ficha {
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  padding: 1rem 1.1rem;
  background: var(--jb-surface);
}

/* En móvil el logo y el nombre del jardín no caben lado a lado: el nombre
   baja debajo del logo y ambos quedan centrados (ver ≥576px más abajo). */
.jb-ficha__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .9rem;
  padding-bottom: .8rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--jb-border);
}

.jb-ficha__logo {
  /* height: 52px; */
  height: 85px;
  width: auto;
  flex: 0 0 auto;
}

.jb-ficha__org {
  flex: 1 1 auto;
  font-family: var(--jb-font-heading);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
  color: var(--jb-green-900);
  text-transform: uppercase;
}

.jb-ficha__org span {
  font-weight: 400;
  color: var(--jb-muted);
}

.jb-ficha__list {
  margin: 0;
  font-size: .9rem;
  row-gap: .1rem;
  /* La columna de etiquetas se ajusta a su contenido (hasta un 40 %) y nunca
     queda más estrecha que su palabra más larga («Coordenadas»), así ninguna
     etiqueta se monta sobre su valor. */
  display: grid;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
}

/* Anula los anchos fijos de .col-4/.col-8: el ancho lo decide la rejilla. */
.jb-ficha__list > dt,
.jb-ficha__list > dd {
  width: auto;
}

.jb-ficha__list dt {
  font-family: var(--jb-font-body);
  font-weight: 600;
  font-size: .85rem;
  color: var(--jb-muted);
  padding-block: .35rem;
}

.jb-ficha__list dd {
  margin: 0;
  padding-block: .35rem;
  color: var(--jb-ink);
  border-bottom: 1px dotted var(--jb-border);
  overflow-wrap: anywhere;
}

.jb-ficha__list dd a {
  color: var(--jb-green-700);
}

/* Descripción libre del registro (el editor de la entrada). */
.jb-ficha__desc {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--jb-border);
  font-size: .9rem;
  color: var(--jb-ink);
}

.jb-ficha__desc p:last-child {
  margin-bottom: 0;
}

/* =========================================================================
   15. GALERÍA (cuadrícula de fotografías, página de jardín)
   Hasta tres fotos del mismo tamaño que las tarjetas de colección (§13):
   mismas columnas y misma proporción 4:3, pero sin título debajo. Los estilos
   de flechas y de reproducir/pausar se quedan en esta sección porque los
   reutiliza el hero (secciones/comunes/banner-hero.php), que sí es un carrusel.
   ========================================================================= */
.jb-galeria {
  padding-block: var(--jb-section-y);
  background: var(--jb-surface-alt);
}

.jb-galeria__titulo {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--jb-green-900);
  margin: 0 0 1.5rem;
  text-align: center;
}

/* Tarjeta de cada foto. La altura al 100 % iguala las tres de la fila cuando
   sus leyendas ocupan distinto número de líneas. */
.jb-galeria__figura {
  height: 100%;
  margin: 0;
  background: var(--jb-surface);
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(20, 51, 31, .06);
}

/* Misma proporción que .jb-cat-card__media: las dos secciones de la ficha
   usan además las mismas columnas, así que la foto sale del mismo tamaño.
   `height: auto` no es opcional: los atributos width/height que escribe
   wp_get_attachment_image() valen como estilo de presentación, y con las dos
   medidas definidas el navegador ignora `aspect-ratio` — la foto salía
   recortada en vertical a los 768 px del atributo. */
.jb-galeria__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--jb-border);
}

.jb-galeria__leyenda {
  padding: .8rem 1rem;
  border-top: 1px solid var(--jb-border);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--jb-muted);
}

/* Enlace que abre el visor. El acercamiento al pasar por encima es el mismo de
   .jb-cat-card__img: aquí sí corresponde, porque la foto es pulsable.
   El foco se dibuja HACIA DENTRO (offset negativo): la figura recorta lo que
   se salga (overflow: hidden) y un anillo por fuera quedaría cortado. */
.jb-galeria__ampliar {
  display: block;
  overflow: hidden;
}

.jb-galeria__ampliar:focus-visible {
  outline-offset: -3px;
}

.jb-galeria__ampliar .jb-galeria__img {
  transition: transform .3s ease;
}

.jb-galeria__ampliar:hover .jb-galeria__img,
.jb-galeria__ampliar:focus-visible .jb-galeria__img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .jb-galeria__ampliar .jb-galeria__img {
    transition: none;
  }

  .jb-galeria__ampliar:hover .jb-galeria__img,
  .jb-galeria__ampliar:focus-visible .jb-galeria__img {
    transform: none;
  }
}

/* --- Visor a pantalla completa (<dialog> modal, ver jb-galeria-visor.js) --- */

/* El <dialog> trae de serie un ancho ajustado al contenido y un borde: aquí se
   lleva a toda la pantalla para que la foto mande y el fondo sea el ::backdrop. */
.jb-galeria__visor {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--jb-on-dark);
  overflow: hidden;
}

.jb-galeria__visor::backdrop {
  background: rgba(20, 51, 31, .94);
  /* --jb-green-900 casi opaco */
}

.jb-galeria__visor-figura {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: clamp(1rem, 5vw, 3.5rem);
}

/* min-height: 0 deja que la foto ceda alto al pie en lugar de desbordar. */
.jb-galeria__visor-img {
  display: block;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--jb-radius);
}

.jb-galeria__visor-pie {
  flex: 0 0 auto;
  max-width: 60ch;
  text-align: center;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--jb-on-dark-soft);
}

.jb-galeria__visor-contador {
  display: block;
  margin-top: .25rem;
  font-size: .85rem;
}

/* Controles del visor: mismo disco que las flechas del carrusel, pero en claro
   — sobre el fondo oscuro del ::backdrop, el verde translúcido no se vería. */
.jb-galeria__visor-cerrar,
.jb-galeria__visor-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .15);
  color: var(--jb-on-dark);
  font-family: var(--jb-font-body);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease;
}

.jb-galeria__visor-cerrar:hover,
.jb-galeria__visor-cerrar:focus-visible,
.jb-galeria__visor-flecha:hover,
.jb-galeria__visor-flecha:focus-visible {
  background-color: rgba(255, 255, 255, .32);
}

@media (prefers-reduced-motion: reduce) {

  .jb-galeria__visor-cerrar,
  .jb-galeria__visor-flecha {
    transition: none;
  }
}

.jb-galeria__visor-cerrar {
  top: clamp(.5rem, 2vw, 1.25rem);
  right: clamp(.5rem, 2vw, 1.25rem);
}

.jb-galeria__visor-flecha {
  top: 50%;
  transform: translateY(-50%);
}

.jb-galeria__visor-flecha--anterior {
  left: clamp(.25rem, 2vw, 1.25rem);
}

.jb-galeria__visor-flecha--siguiente {
  right: clamp(.25rem, 2vw, 1.25rem);
}

/* El chevrón se dibuja con dos bordes en vez de escribirse con un glifo (‹ ›):
   un carácter se centra por su caja de línea, no por su trazo, y las métricas
   de la tipografía lo dejaban alto dentro del disco. Mismo recurso que el
   icono de reproducir/pausar. */
.jb-galeria__visor-icono {
  --jb-visor-chevron: .8rem;
  width: var(--jb-visor-chevron);
  height: var(--jb-visor-chevron);
  border-style: solid;
  border-width: .18rem .18rem 0 0;
  border-color: currentColor;
}

/* Al girar el cuadrado 45°, el trazo NO queda centrado en su propia caja: la
   punta se sale por una esquina y los dos extremos se quedan cortos, así que
   el chevrón entero se ve corrido hacia la punta. El margen del lado contrario
   lo devuelve al centro; va la mitad de lo que se pone, porque el centrado del
   flex reparte el margen. El factor 1/√2 sale de la diagonal del cuadrado, de
   modo que sigue centrado si se cambia --jb-visor-chevron. */
.jb-galeria__visor-flecha--anterior .jb-galeria__visor-icono {
  transform: rotate(-135deg);
  margin-left: calc(var(--jb-visor-chevron) * 0.7071);
}

.jb-galeria__visor-flecha--siguiente .jb-galeria__visor-icono {
  transform: rotate(45deg);
  margin-right: calc(var(--jb-visor-chevron) * 0.7071);
}

/* Con el visor abierto, el fondo no se desplaza: es lo único de un modal que
   el <dialog> nativo no resuelve solo. La pone y la quita jb-galeria-visor.js. */
.jb-sin-scroll {
  overflow: hidden;
}

/* Flechas: el verde institucional translúcido en vez del gris de Bootstrap.
   Se aplica a TODOS los carruseles del sitio — el hero de la portada y de la
   ficha reutilizan esta misma clase (secciones/comunes/banner-hero.php). */
.jb-galeria__carrusel .carousel-control-prev,
.jb-galeria__carrusel .carousel-control-next {
  width: 3rem;
  height: 3rem;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  margin-inline: .75rem;
  background-color: var(--jb-control-fondo);
  border-radius: 50%;
  opacity: 1;
  /* Bootstrap trae .5 de serie; la transparencia ya va en el color. */
  transition: background-color .15s ease;
}

.jb-galeria__carrusel .carousel-control-prev:hover,
.jb-galeria__carrusel .carousel-control-next:hover,
.jb-galeria__carrusel .carousel-control-prev:focus-visible,
.jb-galeria__carrusel .carousel-control-next:focus-visible {
  background-color: var(--jb-control-fondo-activo);
}

/* Con el disco a la mitad de opaco, el icono queda a merced de lo que haya
   detrás: sobre una foto clara, una flecha blanca sin más se pierde. La sombra
   le devuelve el borde sin volver a oscurecer el disco. */
.jb-galeria__carrusel .carousel-control-prev-icon,
.jb-galeria__carrusel .carousel-control-next-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

@media (prefers-reduced-motion: reduce) {

  .jb-galeria__carrusel .carousel-control-prev,
  .jb-galeria__carrusel .carousel-control-next {
    transition: none;
  }
}

/* Botón de reproducir/pausar: icono redondo en una esquina del banner, con el
   mismo lenguaje visual que las flechas (círculo verde institucional) pero
   más pequeño, al ser un control secundario frente a la navegación manual. */
.jb-galeria__reproducir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
  right: .75rem;
  bottom: .75rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--jb-control-fondo);
  color: var(--jb-on-dark);
  cursor: pointer;
  transition: background-color .15s ease;
}

.jb-galeria__reproducir:hover,
.jb-galeria__reproducir:focus-visible {
  background-color: var(--jb-control-fondo-activo);
}

@media (prefers-reduced-motion: reduce) {
  .jb-galeria__reproducir {
    transition: none;
  }
}

/* Triángulo de "reproducir"; dos barras de "pausar" con degradados.
   La sombra va sobre el icono, no sobre el botón: aplicada al botón, el filtro
   dibujaría la sombra alrededor del disco entero en vez de perfilar la figura
   de dentro, que es la que hay que salvar sobre una foto clara. */
.jb-galeria__reproducir-icono {
  display: inline-block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
  width: .6rem;
  height: .75rem;
  margin-left: .1rem;
  /* centrado óptico: el triángulo pesa a la izquierda */
  border-style: solid;
  border-width: .375rem 0 .375rem .6rem;
  border-color: transparent transparent transparent currentColor;
}

.is-reproduciendo .jb-galeria__reproducir-icono {
  width: .55rem;
  height: .75rem;
  margin-left: 0;
  border-style: none;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / .16rem 100% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / .16rem 100% no-repeat;
}

/* =========================================================================
   16. PIE CON MAPA (solo en la ficha de un jardín)
   El pie normal ocupa todo el ancho. En la ficha de un jardín se parte en dos:
   los datos administrados por widget a la izquierda, el mapa de ese jardín a
   la derecha, cada bloque pegado a su borde del contenedor.
   ========================================================================= */
.jb-footer--con-mapa {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* Las columnas de widgets se apilan cuando comparten el pie con el mapa: en
   media anchura no caben dos en paralelo sin quedar apretadas. Se fuerza aquí
   en lugar de cambiar before_widget, para que la portada siga igual. */
.jb-footer__datos>.row>* {
  flex: 0 0 100%;
  max-width: 100%;
}

.jb-footer__datos>.row {
  --bs-gutter-y: 1.75rem;
}

.jb-footer__mapa-marco {
  aspect-ratio: 4 / 3;
  border-radius: var(--jb-radius);
  overflow: hidden;
  background: var(--jb-green-800);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}

.jb-footer__mapa-marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================================
   17. COLECCIÓN (listado de registros en tarjetas)
   Cubre /coleccion/<slug>/ y la ficha individual del espécimen. Sustituye al
   volcado de entradas que hacía index.php.
   ========================================================================= */
.jb-coleccion {
  padding-block: var(--jb-section-y);
}

.jb-coleccion__encabezado {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--jb-border);
}

.jb-coleccion__titulo {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--jb-green-900);
  margin: 0;
}

.jb-coleccion__jardin {
  margin: .35rem 0 0;
  font-family: var(--jb-font-heading);
  font-size: 1.1rem;
  color: var(--jb-green-700);
}

.jb-coleccion__descripcion {
  margin: .75rem 0 0;
  max-width: 60ch;
  color: var(--jb-muted);
}

.jb-coleccion__cuenta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: .9rem 0 0;
  font-size: .95rem;
  color: var(--jb-muted);
}

.jb-coleccion__quitar {
  font-size: .9rem;
}

/* --- Tarjeta de registro --- */
.jb-registro {
  height: 100%;
}

.jb-registro__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: var(--jb-surface);
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.jb-registro__enlace:hover,
.jb-registro__enlace:focus-visible {
  border-color: var(--jb-green-700);
  box-shadow: 0 4px 16px rgba(20, 51, 31, .14);
  transform: translateY(-2px);
}

/* Las láminas son verticales (3:4) y llevan mucho margen claro alrededor:
   se encajan en un alto fijo con el fondo suave del tema. */
.jb-registro__media {
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--jb-surface-alt);
  border-bottom: 1px solid var(--jb-border);
  overflow: hidden;
}

.jb-registro__img,
.jb-registro__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.jb-registro__enlace:hover .jb-registro__img {
  opacity: .92;
}

.jb-registro__cuerpo {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1 0 auto;
  padding: .9rem 1rem 1.05rem;
}

.jb-registro__familia {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--jb-green-700);
}

.jb-registro__titulo {
  font-family: var(--jb-font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--jb-green-900);
}

.jb-registro__autoridad {
  display: block;
  font-family: var(--jb-font-body);
  font-weight: 400;
  font-size: .85rem;
  color: var(--jb-muted);
}

.jb-registro__numero {
  margin-top: auto;
  padding-top: .5rem;
  font-size: .82rem;
  color: var(--jb-muted);
}

/* --- Paginación ---
   Compartida con la sección 17 (ENTRADAS): mismo aspecto en la colección, el
   blog, las categorías y la búsqueda. */
.jb-coleccion .pagination,
.jb-entradas .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.jb-coleccion .page-numbers,
.jb-entradas .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding-inline: .6rem;
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  color: var(--jb-green-900);
  text-decoration: none;
}

.jb-coleccion .page-numbers:hover,
.jb-entradas .page-numbers:hover {
  background: var(--jb-green-50);
}

.jb-coleccion .page-numbers.current,
.jb-entradas .page-numbers.current {
  background: var(--jb-green-700);
  border-color: transparent;
  color: var(--jb-on-dark);
}

.jb-coleccion .screen-reader-text,
.jb-entradas .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* --- Recursos de Flora y Fauna (descripción + mapa + tabla) --- */
.jb-recursos {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* La descripción es un texto corrido a todo el ancho del contenedor: un
   párrafo tras otro, en una sola columna. */
.jb-recursos__descripcion {
  margin-bottom: 2.25rem;
  color: var(--jb-ink);
  font-size: 1.03rem;
  line-height: 1.7;
  text-align: left;
  /* Nada de justificado: abre ríos entre palabras. */
}

.jb-recursos__descripcion p {
  margin-bottom: 1.15rem;
}

.jb-recursos__descripcion p:last-child {
  margin-bottom: 0;
}

.jb-recursos__descripcion strong {
  color: var(--jb-green-900);
}

/* El primer párrafo hace de entradilla. */
.jb-recursos__descripcion>p:first-child {
  font-size: 1.12rem;
  color: var(--jb-green-900);
}

.jb-recursos__mapa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 2rem;
  background: var(--jb-green-50);
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
}

.jb-recursos__texto {
  margin: 0;
  max-width: 55ch;
  color: var(--jb-ink);
}

.jb-recursos__boton {
  flex: 0 0 auto;
}

.jb-recursos__subtitulo {
  font-size: 1.25rem;
  color: var(--jb-green-900);
  margin-bottom: .8rem;
}

/* El listado de especies es un <details> cerrado (ver recursos-coleccion.php):
   el visor de Drive pide mucho alto y no todo el que entra viene a consultarlo.
   Del ANCHO no se ocupa nada de aquí: lo pone la rejilla (col-lg-9) en el
   partial, para poder ajustarlo sin tocar este archivo. */
.jb-recursos__tabla {
  margin-top: 2rem;
}

/* El <summary> es lo que se pulsa, así que se viste como un control y ocupa
   toda la línea. Se retira el triángulo del navegador —`list-style` en los que
   siguen la especificación, `::-webkit-details-marker` en Safari— y se dibuja
   la flecha propia en `::before`. El anillo de foco ya lo pone la regla global
   `:focus-visible` de la sección 3; no hace falta repetirlo. */
.jb-recursos__resumen {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem 1.1rem;
  cursor: pointer;
  background: var(--jb-green-50);
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  list-style: none;
}

.jb-recursos__resumen::-webkit-details-marker {
  display: none;
}

.jb-recursos__resumen:hover {
  background: var(--jb-green-100);
}

/* Media escuadra girada: apunta a la derecha cerrada y abajo abierta. */
.jb-recursos__resumen::before {
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--jb-green-700);
  border-bottom: 2px solid var(--jb-green-700);
  transform: rotate(-45deg);
  transition: transform .2s ease;
}

.jb-recursos__tabla[open] .jb-recursos__resumen::before {
  transform: rotate(45deg);
}

/* Dentro del summary el título no manda el espaciado: lo pone el propio
   summary con su padding. */
.jb-recursos__resumen .jb-recursos__subtitulo {
  margin: 0;
}

/* El visor de Drive necesita alto propio: no se adapta al contenido. */
.jb-recursos__marco {
  height: 58vh;
  min-height: 340px;
  margin-top: 1.25rem;
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  overflow: hidden;
  background: var(--jb-surface-alt);
}

.jb-recursos__marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.jb-recursos__nota {
  margin: .7rem 0 0;
  font-size: .85rem;
  color: var(--jb-muted);
}

/* Va al final de la sección, después de las reglas base: una media query no
   aporta especificidad y solo gana por estar más abajo. */
@media (prefers-reduced-motion: reduce) {
  .jb-recursos__resumen::before {
    transition: none;
  }
}

/* --- Ficha individual del espécimen --- */
.jb-especimen {
  padding-block: var(--jb-section-y);
}

.jb-especimen__lamina {
  margin: 0;
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  overflow: hidden;
  background: var(--jb-surface-alt);
}

.jb-especimen__img {
  display: block;
  width: 100%;
  height: auto;
}

.jb-especimen__lamina figcaption {
  padding: .6rem 1rem;
  border-top: 1px solid var(--jb-border);
  font-size: .85rem;
  color: var(--jb-muted);
  background: var(--jb-surface);
}

.jb-especimen__titulo {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--jb-green-900);
  margin-bottom: .25rem;
}

.jb-especimen__autoridad {
  display: block;
  font-family: var(--jb-font-body);
  font-weight: 400;
  font-size: 1rem;
  color: var(--jb-muted);
}

.jb-especimen__jardin {
  margin-bottom: 1.25rem;
  font-size: .95rem;
}

/* =========================================================================
   18. ENTRADAS (blog, categoría, búsqueda — index.php y category.php)
   Mismo patrón que la sección 16 (COLECCIÓN): cuadrícula de tarjetas +
   paginación, pero para entradas/páginas genéricas en vez de registros del
   herbario. La cabecera y la paginación reutilizan las reglas de .jb-coleccion
   para que ambos listados se vean idénticos.
   ========================================================================= */
.jb-entradas {
  padding-block: var(--jb-section-y);
}

.jb-entradas__encabezado {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--jb-border);
}

.jb-entradas__titulo {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--jb-green-900);
  margin: 0;
}

.jb-entradas__descripcion {
  margin: .75rem 0 0;
  max-width: 60ch;
  color: var(--jb-muted);
}

/* --- Tarjeta de entrada/página --- */
.jb-entrada {
  height: 100%;
}

.jb-entrada__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: var(--jb-surface);
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.jb-entrada__enlace:hover,
.jb-entrada__enlace:focus-visible {
  border-color: var(--jb-green-700);
  box-shadow: 0 4px 16px rgba(20, 51, 31, .14);
  transform: translateY(-2px);
}

/* Miniaturas horizontales (16:9), como en un blog. */
.jb-entrada__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--jb-surface-alt);
  border-bottom: 1px solid var(--jb-border);
  overflow: hidden;
}

.jb-entrada__img,
.jb-entrada__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.jb-entrada__enlace:hover .jb-entrada__img {
  opacity: .92;
}

.jb-entrada__cuerpo {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1 0 auto;
  padding: 1.1rem 1.25rem 1.25rem;
}

.jb-entrada__titulo {
  font-family: var(--jb-font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--jb-green-900);
}

.jb-entrada__extracto {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--jb-muted);
}

/* =========================================================================
   19. CONTENIDO ADMINISTRADO (alineaciones y leyendas de WordPress)
   Cuando el administrador inserta una imagen o centra un párrafo desde el
   editor, WordPress no escribe estilos: escribe clases (.aligncenter,
   .alignleft, .wp-caption…) y da por hecho que el tema las viste. Sin estas
   reglas el cambio se veía en el editor y no en el sitio — la foto salía
   pegada a la izquierda pasara lo que pasara y la leyenda quedaba como un
   párrafo suelto.

   Los nombres van sin prefijo jb- a propósito: los decide WordPress, no el
   tema, y aparecen en cualquier texto administrado.
   ========================================================================= */

/* Contenedores de texto administrado. Toda sección nueva que pinte
   the_content() o un campo de tipo «editor» debe sumarse a esta lista. */
.jb-intro__entry img,
.jb-recursos__descripcion img,
.jb-ficha__desc img,
.entry-content img {
  max-width: 100%;
  /* Ninguna imagen desborda su columna, tenga el width que tenga. */
  height: auto;
}

/* El flotado se corta al final del bloque: sin esto, una imagen alineada a un
   lado se sale de su sección e invade la de abajo. */
.jb-intro__entry::after,
.jb-recursos__descripcion::after,
.jb-ficha__desc::after,
.entry-content::after {
  content: "";
  display: block;
  clear: both;
}

/* --- Alineaciones --- */
/* «Sin alinear» no toca el display: puede ser una imagen pequeña metida en
   mitad de una frase, y volverla bloque la sacaría de su línea. */
.alignnone {
  height: auto;
  margin-bottom: 1.25rem;
}

.alignleft,
.alignright {
  display: block;
  height: auto;
  margin: 0 0 1.25rem;
}

.aligncenter {
  display: block;
  height: auto;
  margin: 0 auto 1.25rem;
  text-align: center;
  /* Centra también la leyenda de una imagen con pie. */
}

/* En móvil no flota ninguna: a 375px una imagen con texto al lado deja
   columnas de dos palabras. El flotado se activa desde 576px, en la sección
   de media queries. */

/* --- Imagen con leyenda (wp_caption) --- */
.wp-caption {
  max-width: 100%;
  margin-bottom: 1.25rem;
}

.wp-caption img {
  display: block;
  margin: 0 auto;
}

.wp-caption-text {
  margin: .5rem 0 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--jb-muted);
  text-align: center;
}

/* =========================================================================
   20. MEDIA QUERIES (mobile-first)
   Base sin @media = 375px en adelante. A partir de ahí, min-width ascendente
   alineado con los breakpoints de Bootstrap (sm/md/lg/xl/xxl) + 1600 propio.
   No declarar max-width: cada regla nueva solo agrega/sobrescribe hacia arriba.
   ========================================================================= */

/* ≥576px (sm) */
@media (min-width: 576px) {

  /* Aquí ya hay ancho para que el texto acompañe a la imagen alineada a un
     lado. El tope del 50% evita que una foto grande se coma la columna. */
  .alignleft {
    float: left;
    max-width: 50%;
    margin: .35rem 1.5rem 1rem 0;
  }

  .alignright {
    float: right;
    max-width: 50%;
    margin: .35rem 0 1rem 1.5rem;
  }

  .jb-subbar .container {
    justify-content: space-between;
  }

  /* Con más ancho el nombre vuelve al lado del logo, alineado a la izquierda,
     y es su texto el que se parte en líneas en vez de bajar completo. */
  .jb-ficha__head {
    flex-wrap: nowrap;
    justify-content: flex-start;
    text-align: left;
  }

  .jb-hero__media {
    height: 240px;
  }

  .jb-hero__carrusel,
  .jb-hero__carrusel .carousel-inner,
  .jb-hero__carrusel .carousel-item {
    height: 240px;
  }
}

/* ≥768px (md) */
@media (min-width: 768px) {
  .jb-hero__media {
    height: 280px;
  }

  .jb-hero__carrusel,
  .jb-hero__carrusel .carousel-inner,
  .jb-hero__carrusel .carousel-item {
    height: 280px;
  }
}

/* ≥992px (lg) — Bootstrap expande el navbar (navbar-expand-lg) */
@media (min-width: 992px) {
  .jb-gov {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  /* El panel pasa a ser una fila: menú y marca institucional se alinean por
     su centro en lugar de estirarse a lo alto del navbar. */
  .jb-offcanvas .offcanvas-body {
    align-items: center;
  }

  /* Si el ancho no alcanza, baja el ítem completo a una segunda fila (en vez
     de partir su texto, ver white-space más abajo) y las filas quedan
     centradas entre sí. */
  .jb-navbar .navbar-nav {
    padding-block: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: .25rem;
  }

  .jb-navbar .navbar-nav .nav-link {
    padding: .5rem .85rem;
    border-radius: 0;
    white-space: nowrap;
  }

  /* En línea, el menú vuelve al patrón horizontal: subrayado en vez de
     fondo, salvo en el desplegable (ver regla de abajo). */
  .jb-navbar .navbar-nav .nav-link:hover,
  .jb-navbar .navbar-nav .nav-link:focus-visible,
  .jb-navbar .navbar-nav .nav-link.active,
  .jb-navbar .navbar-nav .nav-link[aria-expanded="true"] {
    background-color: transparent;
    border-bottom: 2px solid var(--jb-green-700);
  }

  /* El submenú vuelve a flotar como tarjeta, ya sin la sangría del panel. */
  .jb-navbar__dropdown {
    --bs-dropdown-bg: var(--jb-surface);
    --bs-dropdown-border-color: var(--jb-border);
    --bs-dropdown-border-radius: var(--jb-radius);
    --bs-dropdown-border-width: var(--bs-border-width);
    --bs-dropdown-min-width: 16rem;
    margin: 0;
    padding-inline-start: 0;
    border-left: 0;
    border-radius: var(--jb-radius);
    box-shadow: 0 4px 16px rgba(20, 51, 31, .12);
  }

  /* Se iguala al logo del sitio para que las dos marcas pesen lo mismo. */
  .jb-gov__marca {
    height: 85px;
  }

  .jb-hero__media {
    height: 320px;
  }

  .jb-hero__carrusel,
  .jb-hero__carrusel .carousel-inner,
  .jb-hero__carrusel .carousel-item {
    height: 320px;
  }

  /* La baldosa crece sola con el contenedor; lo que sí se ajusta por
     breakpoint es cuánto extracto cabe dentro sin empujar el botón fuera. */
  .jb-flip-card__desc {
    -webkit-line-clamp: 5;
  }

  /* La lista de entradas acompaña al panel mientras se recorre la ficha. */
  .jb-entradas__nav {
    position: sticky;
    top: 1rem;
  }

  /* Pie con mapa: los datos pegados a la izquierda, el mapa a la derecha,
     sin que el hueco central los separe de sus bordes. */
  .jb-footer--con-mapa .jb-footer__datos {
    padding-right: 2rem;
  }

  .jb-footer--con-mapa .jb-footer__mapa-marco {
    aspect-ratio: 16 / 11;
  }

  /* La lámina acompaña al lector mientras recorre la ficha de datos. */
  .jb-especimen__lamina {
    position: sticky;
    top: 1rem;
  }
}

/* ≥1200px (xl) */
@media (min-width: 1200px) {
  .jb-hero__media {
    height: 380px;
  }

  .jb-hero__carrusel,
  .jb-hero__carrusel .carousel-inner,
  .jb-hero__carrusel .carousel-item {
    height: 380px;
  }

  .jb-flip-card__desc {
    -webkit-line-clamp: 6;
  }

  .jb-flip-card__title {
    font-size: 1.2rem;
  }

  /* Más aire sobre el nombre: el degradado arranca más arriba y la foto se
     lee entera debajo. */
  .jb-flip-card__velo {
    padding: 3.5rem 1.4rem 1.4rem;
  }
}

/* ≥1400px (xxl) */
@media (min-width: 1400px) {
  .jb-hero__media {
    height: 420px;
  }

  .jb-hero__carrusel,
  .jb-hero__carrusel .carousel-inner,
  .jb-hero__carrusel .carousel-item {
    height: 420px;
  }

  .jb-flip-card__desc {
    -webkit-line-clamp: 8;
  }
}

/* ≥1600px */
@media (min-width: 1600px) {
  .jb-hero__media {
    height: 480px;
  }

  .jb-hero__carrusel,
  .jb-hero__carrusel .carousel-inner,
  .jb-hero__carrusel .carousel-item {
    height: 480px;
  }

  .jb-garden-col {
    flex: 0 0 20%;
    max-width: 20%;
  }

  /* Bootstrap no pasa de 1320 px, y a partir de 1600 eso deja demasiado aire a
     los lados: la cuadrícula pierde presencia justo en las pantallas donde más
     sitio hay. Se ensancha el contenedor de TODO el sitio, no solo el de la
     cuadrícula, para que las secciones sigan alineadas entre sí. */
  .container {
    max-width: 1500px;
  }
}