/* ==========================================================================
   EXOPOL · Web nueva · Hoja principal (mobile-first)
   Se apoya en Bootstrap 5 (solo grid, utilidades, offcanvas y collapse).
   Los colores salen de tokens.css.
   ========================================================================== */

body {
  font-family: var(--ex-font-base);
  color: var(--ex-texto);
  background: var(--ex-blanco);
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.exo-cabecera {
  /* hueco · logo (centrado) · hamburguesa, con hueco = ancho de la hamburguesa */
  display: flex;
  align-items: center;
  gap: var(--ex-espacio);
  padding: 1.25rem var(--ex-espacio);
  background: var(--ex-blanco);
}

.exo-cab-hueco {
  flex: 0 0 44px;             /* mismo ancho que la hamburguesa */
}

.exo-logo {
  flex: 1 1 auto;            /* ocupa el centro y centra su contenido */
  display: flex;
  justify-content: center;
  min-width: 0;
}

.exo-logo img {
  display: block;
  width: auto;
  height: 60px;
}

/* Botón de hamburguesa: tres barras, sin depender de ningún icon font */
.exo-hamburguesa {
  flex: 0 0 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
}

.exo-hamburguesa span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--ex-negro);
}

/* --------------------------------------------------------------------------
   Menú (offcanvas de Bootstrap)
   -------------------------------------------------------------------------- */

.exo-menu {
  --bs-offcanvas-width: min(88vw, 380px);
}

.exo-menu-lista,
.exo-submenu {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada sección grande, una banda gris separada por una fina línea blanca */
.exo-menu-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Los niveles 1 son unos <a> y otros <button>: se igualan aquí */
.exo-menu-nivel1 {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  background: var(--ex-gris-buscador);
  color: var(--ex-negro);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
  text-decoration: none;
}

.exo-submenu {
  padding: 0.35rem 0 0.85rem;
}

.exo-submenu a {
  display: block;
  padding: 0.45rem 0 0.45rem 1rem;
  color: var(--ex-texto);
  text-decoration: none;
}

.exo-submenu a:hover,
.exo-submenu a:focus-visible {
  color: var(--ex-verde);
}

/* «Solicitud de análisis» va destacado en el diseño, con una estrella delante */
.exo-submenu .exo-destacado {
  color: var(--ex-verde);
  font-weight: 700;
}

.exo-submenu .exo-destacado::before {
  content: "\2605";   /* ★ */
  margin-right: 0.4rem;
}

/* La flechita (un chevron dibujado con dos bordes, sin icon font). Igual en las
   tres entradas que despliegan, que ahora se abren todas del mismo modo:
   pinchando la palabra (05-08-2026). */
.exo-menu-nivel1[data-bs-toggle="collapse"]::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.exo-menu-nivel1[data-bs-toggle="collapse"][aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
}

/* Los toggles de texto completo (MUESTREO, NOSOTROS) llevan la flecha al final */
.exo-menu-nivel1[data-bs-toggle="collapse"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* El botón de «Solicitud de análisis» es exclusivo de la barra de PC */
/* «Envío de muestras». Hasta el 12-08-2026 era un enlace suelto y en móvil no
   se pintaba (display:none), porque la solicitud ya estaba dentro de
   DIAGNÓSTICO. Ahora agrupa las tres vías de envío y es el único sitio donde
   están, así que en móvil tiene que verse: por eso su botón lleva también la
   clase .exo-menu-nivel1. El verde y la estrella se los pone la barra de PC,
   más abajo.

   Las mayúsculas las pone el CSS y no el rótulo, porque el mismo texto sirve
   para las dos cosas: en el panel de móvil es una entrada más y va como
   DIAGNÓSTICO o MUESTREO; en el botón verde de PC iría gritando. */
.exo-menu-cta-boton {
  text-transform: uppercase;
}

/* --- Acceso a ExopolOnline -------------------------------------------------

   No está en el diseño que mandó Exopol (ver el comentario de inc/header.php).
   Se pinta como texto, sin fondo, para que no compita con el botón verde de
   «Solicitud de análisis», que es la acción que Exopol quiere destacar. En
   móvil es una fila más del panel, como los idiomas. */
/* Desde el 12-08-2026 es un enlace directo a ExopolOnline, no un botón que
   despliega: por eso lleva text-decoration, que un <button> no necesitaba. */
.exo-menu-online-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  background: none;
  color: var(--ex-texto);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: left;
  text-decoration: none;
}

.exo-menu-online-boton:hover,
.exo-menu-online-boton:focus-visible {
  color: var(--ex-verde);
}

/* El candado hereda el color del texto (stroke: currentColor) */
.exo-menu-online-icono {
  flex: 0 0 auto;
}

/* El propio acceso no se subraya (es icono + rótulo, y el subrayado cruzaría el
   candado); lo demás del bloque, sí. */
.exo-menu-online a:hover,
.exo-menu-online a:focus-visible {
  color: var(--ex-verde);
  text-decoration: underline;
}

.exo-menu-online a.exo-menu-online-boton:hover,
.exo-menu-online a.exo-menu-online-boton:focus-visible {
  text-decoration: none;
}

/* --- Selector de idioma ----------------------------------------------------

   Texto (ES · EN), no banderas: una bandera es un país y no una lengua, y con
   ES/EN/FR el visitante reconoce el suyo sin traducción. En móvil se queda como
   una fila más del panel; en PC salta a la derecha del botón verde. */
.exo-menu-idiomas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  font-weight: 700;
}

.exo-menu-idiomas a {
  color: var(--ex-texto);
  text-decoration: none;
}

.exo-menu-idiomas a:hover,
.exo-menu-idiomas a:focus-visible {
  color: var(--ex-verde);
  text-decoration: underline;
}

/* El idioma en el que ya estás no es un enlace: se marca y punto */
.exo-idioma-activo {
  color: var(--ex-verde);
}

.exo-idiomas-sep {
  color: var(--ex-texto);
  font-weight: 400;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Cabecera y menú en PC (a partir de 992px)

   El corte es 992 y no 768, el del resto de la hoja, porque lo que manda aquí
   no es el ancho de lectura sino que quepan las cinco entradas del menú
   (DIAGNÓSTICO, AUTOVACUNAS, MUESTREO, EXOONE, NOSOTROS) más el botón. En
   tablet no caben sin apretarlas, así que hasta 991px sigue la hamburguesa.

   Disposición elegida por Ana (05-08-2026): logo centrado arriba, como en el
   diseño móvil, y la barra de menú en una segunda franja debajo.

   Nada de esto altera el móvil: el HTML es el mismo y todas las reglas viven
   dentro de este @media.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

  /* En PC no hay hamburguesa, así que tampoco hace falta el hueco que la
     compensaba para dejar el logo centrado: lo centra ya el propio flex. */
  .exo-cab-hueco,
  .exo-hamburguesa {
    display: none;
  }

  .exo-cabecera {
    justify-content: center;
    padding: 1.75rem var(--ex-espacio) 1.25rem;
  }

  .exo-logo {
    flex: 0 0 auto;
  }

  .exo-logo img {
    height: 72px;   /* algo mayor que en móvil: hay sitio de sobra */
  }

  /* --- La franja del menú -------------------------------------------------

     Bootstrap, al desactivar el offcanvas en este breakpoint, fuerza
     «background-color: transparent !important» sobre el contenedor y sobre el
     cuerpo. Para pintar la franja gris hay que responder con la misma arma;
     es el único !important de la hoja y solo existe por eso. */
  .exo-menu {
    background: var(--ex-gris-buscador) !important;
    margin-bottom: 2.25rem;   /* aire entre la franja del menú y el contenido */
  }

  /* El gris va a todo el ancho de la pantalla, pero los enlaces se quedan en
     la misma columna de 1080px que usa el pie. */
  .exo-menu .offcanvas-body {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--ex-espacio);
  }

  /* Bootstrap deja el cuerpo del menú en flex, y la lista es su único hijo:
     sin el flex:1 no se estiraría y el botón de la derecha se quedaría pegado
     a NOSOTROS en vez de irse al extremo. */
  .exo-menu .offcanvas-body > .exo-menu-lista {
    flex: 1 1 auto;
  }

  .exo-menu-lista {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    /* Red de seguridad: si algún día no cabe todo (traducciones más largas,
       una entrada nueva), que baje a una segunda línea en vez de salirse por
       la derecha y quedar inalcanzable. */
    flex-wrap: wrap;
  }

  /* Referencia de posición para el desplegable, que en PC flota */
  .exo-menu-lista > li {
    position: relative;
    display: flex;
    align-items: stretch;
  }

  /* En móvil cada entrada es una banda gris; aquí el gris ya lo pone la franja,
     así que se quedan en texto suelto. */
  .exo-menu-nivel1 {
    width: auto;
    padding: 0.8rem 1.1rem;
    background: transparent;
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .exo-menu-nivel1:hover,
  .exo-menu-nivel1:focus-visible {
    color: var(--ex-verde);
  }

  .exo-menu-nivel1[data-bs-toggle="collapse"] {
    gap: 0.55rem;
  }

  /* --- Desplegables --------------------------------------------------------

     Siguen siendo el «collapse» de Bootstrap (mismo HTML, mismo JS); lo único
     que cambia es que aquí se sacan del flujo y flotan bajo su entrada, en vez
     de empujar hacia abajo el resto de la barra. */
  .exo-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1030;
    min-width: 260px;
    padding: 0.5rem 0;
    background: var(--ex-blanco);
    border-radius: 0 0 var(--ex-radio) var(--ex-radio);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  /* NOSOTROS es la última entrada con desplegable: el suyo se ancla por la
     derecha para que no se salga de la columna. Va por clase y no por posición
     (antes era :nth-last-child) para que no se rompa cada vez que se añade algo
     al final de la barra, como el selector de idioma. */
  .exo-menu-lista > li.exo-menu-sub-derecha .exo-submenu {
    left: auto;
    right: 0;
  }

  .exo-submenu a {
    padding: 0.5rem 1.1rem;
  }

  /* «Solicitud de análisis» tiene aquí su propio botón en la barra: dentro del
     desplegable de DIAGNÓSTICO sobra. En móvil, donde no hay botón, sigue
     estando (es la acción que Exopol quiere destacar). */
  .exo-submenu .exo-solo-movil {
    display: none;
  }

  /* --- Botón de solicitud de análisis --------------------------------------

     El selector lleva el «li» a propósito: las demás entradas se estiran a la
     altura de la franja (.exo-menu-lista > li), y como ese selector pesa más
     que la clase, el botón se estiraba con ellas y su texto se quedaba pegado
     arriba en vez de centrado. Aquí el enlace conserva su propio alto y queda
     centrado en la franja. */
  .exo-menu-lista > li.exo-menu-cta {
    display: flex;
    margin-left: auto;      /* lo empuja al extremo derecho de la franja */
    align-items: center;
  }

  /* Desde el 12-08-2026 es un botón que despliega, no un enlace suelto, pero
     sigue siendo el único elemento verde de la barra. El selector lleva el «li»
     delante para ganarle al bloque de .exo-menu-nivel1 apretado del final de la
     hoja, que si no le quitaría el fondo y el tamaño. */
  .exo-menu-lista > li.exo-menu-cta .exo-menu-cta-boton {
    width: auto;
    padding: 0.5rem 0.85rem;
    border-radius: var(--ex-radio);
    background: var(--ex-verde);
    color: var(--ex-blanco);
    /* 0.95rem hasta el 12-08-2026. Al pasar de enlace a desplegable, el botón
       ganó la flecha y el rótulo cambió, y se plantó en 226px (los idiomas
       volvían a caerse). Con 0.85 vuelve a entrar todo en una línea. */
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: none;   /* en el botón verde, no (ver arriba) */
    white-space: nowrap;
  }

  .exo-menu-cta .exo-menu-cta-boton::before {
    content: "\2605";   /* ★, la misma que lleva dentro del desplegable */
    margin-right: 0.3rem;
  }

  .exo-menu-cta .exo-menu-cta-boton:hover,
  .exo-menu-cta .exo-menu-cta-boton:focus-visible {
    background: var(--ex-verde-oscuro);
    color: var(--ex-blanco);
  }

  /* En la barra de PC queda el candado SOLO (decisión de Ana, 11-08-2026): el
     nombre lo llevan el aria-label y el title. Así ocupa poco en una franja que
     ya va justa. En móvil el texto sí se ve, que es donde hay sitio. */
  .exo-menu-online-boton {
    width: auto;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .exo-menu-online-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .exo-menu-online-icono {
    width: 20px;
    height: 20px;
  }

  /* --- Selector de idioma en la barra --------------------------------------

     A la derecha del botón verde, en el extremo de la franja. El margin-left
     lo separa del botón; el auto que empuja el bloque hacia la derecha ya lo
     pone .exo-menu-cta, que va justo antes. */
  .exo-menu-lista > li.exo-menu-idiomas {
    padding: 0;
    margin-left: 1.25rem;
    gap: 0.4rem;
    align-items: center;   /* como en el botón: si no, gana el stretch del li */
    font-size: 0.85rem;
  }
}

/* --------------------------------------------------------------------------
   Home · tarjetas de especie
   -------------------------------------------------------------------------- */

.exo-especies {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;                /* la línea blanca que separa las bandas */
}

.exo-especie a {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.75rem;
  background: var(--esp-color);
  color: var(--esp-tinta);
  text-decoration: none;
}

.exo-especie-icono {
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
}

.exo-especie-icono svg {
  width: 100%;
  height: auto;
  max-height: 52px;
}

.exo-especie-nombre {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.exo-especie a:hover,
.exo-especie a:focus-visible {
  filter: brightness(0.92);
}

/* Marcador de los iconos que Exopol aún no ha entregado en SVG.
   Cuando lleguen los 8 archivos a img/especies/, esta regla deja de aplicar. */
.esp-icono--falta {
  opacity: 0.55;
}

/* Iconos entregados en PNG (los 7 que mandó Exopol el 09-09-2026: muestreo,
   diagnóstico, autovacunas, servicio técnico, secuenciación, parasitología y
   anatomía patológica). Vienen en negro macizo con transparencia, así que en
   lugar de pintarlos como <img> se usan de MÁSCARA sobre currentColor: de esa
   forma cogen el color del sitio donde caigan, igual que los SVG. Hace falta
   porque las bandas de especie van con tinta blanca sobre color.
   El PNG concreto llega en la variable --esp-icono-img, desde exo_icono(). */
.esp-icono--png {
  display: inline-block;
  aspect-ratio: 1 / 1;
  background-color: currentColor;
  -webkit-mask: var(--esp-icono-img) no-repeat center / contain;
          mask: var(--esp-icono-img) no-repeat center / contain;
}

/* Navegador sin máscaras: mejor el PNG tal cual (negro) que un hueco vacío */
@supports not ((-webkit-mask-image: url(a.png)) or (mask-image: url(a.png))) {
  .esp-icono--png {
    background: var(--esp-icono-img) no-repeat center / contain;
  }
}

/* A partir de tablet las 8 bandas no necesitan ocupar todo el ancho */
@media (min-width: 768px) {
  .exo-especies {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
   Landing de especie · portada (icono + nombre + accesos)
   -------------------------------------------------------------------------- */

.exo-especie-portada {
  padding: 0.5rem var(--ex-espacio) 1.5rem;
  text-align: center;
}

.exo-especie-portada-icono {
  display: block;
  color: var(--esp-color);       /* aquí el icono va EN COLOR, no en blanco */
}

.exo-especie-portada-icono svg {
  width: auto;
  height: 72px;
}

.exo-especie-portada-icono .esp-icono--png {
  width: auto;
  height: 72px;
}

.exo-especie-portada-nombre {
  margin: 0.75rem 0 0.6rem;
  color: var(--esp-color);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Los dos accesos van en una fila; si no caben, se apilan */
.exo-especie-portada-accesos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 0;
}

.exo-acceso {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ex-texto);
  font-size: 0.95rem;
  text-decoration: none;
}

.exo-acceso span {
  text-decoration: underline;
}

.exo-acceso svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.exo-acceso:hover,
.exo-acceso:focus-visible {
  color: var(--esp-color);
}

/* --------------------------------------------------------------------------
   Landing de especie · los 4 bloques de sección
   Misma banda que las especies de la home, pero todas del color de la especie.
   -------------------------------------------------------------------------- */

.exo-secciones {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;                /* la separación blanca del diseño */
}

.exo-seccion a {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem 1.75rem;
  background: var(--esp-color);
  color: var(--esp-tinta);
  text-decoration: none;
}

.exo-seccion-icono {
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
}

.exo-seccion-icono svg {
  width: 100%;
  height: auto;
  max-height: 46px;
}

.exo-seccion-icono .esp-icono--png {
  width: auto;
  height: 44px;
}

.exo-seccion-nombre {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.exo-seccion a:hover,
.exo-seccion a:focus-visible {
  filter: brightness(0.92);
}

@media (min-width: 768px) {
  .exo-secciones {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
   Banda de apartado (DIAGNÓSTICO, MUESTREO, AUTOVACUNAS, SERVICIO TÉCNICO)
   Igual que los bloques de la landing, pero como cabecera de la página.
   -------------------------------------------------------------------------- */

.exo-banda {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 0.9rem 1.5rem;
  background: var(--esp-color);
  color: var(--esp-tinta);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.exo-banda-icono {
  display: flex;
  flex: 0 0 34px;
  align-items: center;
}

.exo-banda-icono svg {
  width: 100%;
  height: auto;
  max-height: 34px;
}

.exo-banda-icono .esp-icono--png {
  width: auto;
  height: 32px;
}

/* --------------------------------------------------------------------------
   Diagnóstico · buscador
   -------------------------------------------------------------------------- */

.exo-diagnostico {
  padding: 1.25rem var(--ex-espacio) 0;
}

.exo-buscador {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 1rem;
  border-radius: 6px;
  background: var(--ex-gris-buscador);
}

.exo-buscador-lupa {
  display: flex;
  flex: 0 0 22px;
  color: #777;
}

.exo-buscador-lupa svg {
  width: 22px;
  height: 22px;
}

.exo-buscador input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;              /* si no, en móvil el input desborda la caja */
  padding: 0.6rem 0;
  border: 0;
  background: none;
  color: var(--ex-texto);
  font-size: 1rem;
}

.exo-buscador input[type="search"]:focus {
  outline: none;
}

.exo-buscador:focus-within {
  outline: 2px solid var(--esp-color);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Diagnóstico · acordeones por técnica
   Se recolorean los de Bootstrap: sin caja, con la raya del color de la especie.
   -------------------------------------------------------------------------- */

.exo-tecnicas {
  --bs-accordion-border-width: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 0.7rem;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0.5rem;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--ex-negro);
  --bs-accordion-btn-focus-box-shadow: none;
  margin-top: 1.5rem;
}

.exo-tecnica {
  background: none;
}

.exo-tecnica .accordion-button {
  align-items: flex-start;
  border-bottom: 2px solid var(--esp-color);
  background: none;
  box-shadow: none;
}

.exo-tecnica-texto {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.exo-tecnica-nombre {
  color: var(--ex-negro);
  font-size: 1.05rem;
  font-weight: 700;
}

/* La frase SEO de debajo. Las que Exopol no ha escrito no se pintan.
   Ya NO sale en el catálogo por técnica —Exopol la mandó quitar el 09-09-2026—,
   pero la clase sigue viva para las preguntas frecuentes, que usan el mismo
   acordeón. */
.exo-tecnica-sub {
  color: var(--ex-texto);
  font-size: 0.9rem;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Catálogo por técnica UNIFICADO (09-09-2026)
   Cada línea: icono · nombre (enlace a la técnica) · flecha (despliega).
   Antes el título entero era el botón de Bootstrap; ahora el botón se queda
   solo con la flecha, para que el nombre pueda ser un enlace de verdad.
   -------------------------------------------------------------------------- */

.exo-tecnicas--iconos .exo-tecnica-cabecera {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  /* la raya sube del botón a la fila entera, que ahora es la que la cruza */
  border-bottom: 2px solid var(--esp-color);
}

.exo-tecnica-icono {
  display: flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  color: var(--ex-negro);
}

.exo-tecnica-icono svg,
.exo-tecnica-icono .esp-icono--png {
  width: auto;
  height: 26px;
}

.exo-tecnicas--iconos .exo-tecnica-nombre {
  flex: 1 1 auto;
  padding: 0.7rem 0;
  color: var(--ex-negro);
  text-decoration: none;
}

a.exo-tecnica-nombre:hover,
a.exo-tecnica-nombre:focus-visible {
  text-decoration: underline;
}

/* El botón de Bootstrap nace a todo lo ancho; aquí solo tiene que ocupar la
   flecha, y la raya ya la pone la fila. */
.exo-tecnicas--iconos .exo-tecnica-flecha.accordion-button {
  flex: 0 0 auto;
  width: auto;
  padding: 0.7rem 0 0.7rem 0.75rem;
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Diagnóstico · lista de determinaciones
   -------------------------------------------------------------------------- */

.exo-determinaciones {
  margin: 0;
  padding: 0;
  list-style: none;
}

.exo-determinaciones li {
  position: relative;
  padding: 0 0 1rem 1.6rem;
}

/* La viñeta redonda del color de la especie */
.exo-determinaciones li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--esp-color);
}

.exo-det-nombre {
  display: block;
  color: var(--ex-negro);
  font-size: 1rem;
}

.exo-det-desc {
  display: block;
  color: var(--ex-texto);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* «PCR», «ELISA»… la parte de antes de los dos puntos va subrayada en el diseño */
.exo-det-tecnica {
  text-decoration: underline;
}

/* --- Etiquetas de cada determinación (12-08-2026) --------------------------

   Exopol avisó de que en canino-felino y ovino-caprino hay paneles que se llaman
   IGUAL y no había forma de distinguirlos. Al buscar, la lista sale plana y sin
   decir de qué técnica es cada uno, así que se añaden dos etiquetas:

   · el animal, solo cuando la determinación no vale para los dos («solo canino»);
   · la técnica, que resuelve los repetidos del resto de especies (por ejemplo
     «Brucella ovis», que está en Serología y en Real Time PCR).

   Dentro del acordeón la de la técnica sobra —la dice la propia cabecera—, así
   que ahí se esconde; el <li> es el mismo en las dos vistas para que el buscador
   reactivo solo tenga que clonarlo. */
/* Sin margen propio a propósito: cuando la única etiqueta que lleva es la de la
   técnica y el acordeón la esconde, este contenedor se queda vacío y NO debe
   dejar hueco. El aire lo ponen las etiquetas. */
.exo-det-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.exo-det-etiquetas span {
  margin: 0.2rem 0 0.3rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* El animal: en color, porque es lo que evita la confusión. Toma el de la
   especie que se esté viendo (lo pone .exo-especie-pagina), no el verde de
   marca: en canino-felino, que es rojo, un botón verde se lee como de otra
   página. Si algún día se usa fuera de una página de especie, cae al verde. */
.exo-det-animal {
  background: var(--esp-color, var(--ex-verde));
  color: var(--ex-blanco);
  font-weight: 700;
}

/* Las especies a las que sirve. Solo en las pantallas globales —Diagnóstico
   general y las siete de técnica—, donde el catálogo es de todos los animales y
   los nombres repetidos son de especies distintas. Cada una con su color, como
   las pastillas de los packs de muestreo. */
.exo-det-especie {
  background: var(--esp-color);
  color: var(--esp-tinta);
  font-weight: 700;
}

/* Mismo apaño que en las pastillas de los packs: sobre los tres colores claros
   (conejos y acuicultura son mentas, avicultura es gris) el blanco no se lee. */
.exo-det-especie.esp-conejos,
.exo-det-especie.esp-acuicultura,
.exo-det-especie.esp-avicultura {
  color: var(--ex-negro);
}

.exo-det-grupo {
  background: var(--ex-gris-buscador);
  color: var(--ex-texto);
}

.exo-tecnica .exo-det-grupo {
  display: none;
}

.exo-cuenta {
  margin: 1.25rem 0 0.75rem;
  color: var(--ex-texto);
  font-size: 0.9rem;
}

.exo-sin-resultados {
  margin: 1.5rem 0 0.5rem;
}

.exo-enlace {
  color: var(--esp-color);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Especie · Autovacunas (pantalla 04)
   Marco = portada + banda (ya existentes) + frase SEO + aviso + lista de
   patógenos con viñeta del color de la especie.
   -------------------------------------------------------------------------- */

.exo-autovacunas {
  padding: 1.25rem var(--ex-espacio) 0;
}

.exo-av-frase {
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-av-aviso {
  margin: 1.25rem 0 0;   /* si no, se pega a av_comun y se leen como un solo párrafo */
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-av-intro {
  margin: 1rem 0 0.75rem;
  color: var(--ex-negro);
  font-weight: 700;
}

/* Los procesos que cubre la autovacuna de la especie. Van como pastillas y no
   como lista con viñeta para que no se confundan con los patógenos de abajo,
   que son otra cosa: aquéllas son patologías, éstos, agentes.
   El color va en el BORDE y el texto en tinta oscura: sobre los cuatro tonos
   claros (conejos, acuicultura, avicultura y porcino) el texto en blanco no se
   leería, y aquí la especie ya la marca la portada. */
.exo-av-procesos-titulo {
  margin: 1.25rem 0 0.6rem;
  color: var(--ex-negro);
  font-weight: 700;
}

.exo-av-procesos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.exo-av-procesos li {
  padding: 0.3rem 0.7rem;
  border: 2px solid var(--esp-color);
  border-radius: 999px;
  color: var(--ex-negro);
  font-size: 0.95rem;
}

.exo-av-comun {
  margin: 1.25rem 0 0;
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-av-contacto {
  margin: 1.5rem 0 0;
  color: var(--ex-texto);
}

.exo-av-contacto a {
  color: var(--ex-verde);   /* verde fijo: sobre los colores claros de especie no se leería */
  font-weight: 700;
  overflow-wrap: anywhere;  /* el correo no debe desbordar en móvil */
}

.exo-av-mas {
  margin: 1rem 0 0;
}

/* .exo-enlace se tiñe del color de la especie, y sobre porcino, conejos,
   acuicultura o avicultura no se lee. Aquí va en verde corporativo, mismo
   criterio que los PDF de catálogo y la página de vídeos. */
.exo-av-mas .exo-enlace {
  color: var(--ex-verde);
}

.exo-patogenos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.exo-patogenos li {
  position: relative;
  padding: 0.28rem 0 0.28rem 1.5rem;
  color: var(--ex-texto);
}

/* La viñeta redonda del color de la especie, como en el catálogo */
.exo-patogenos li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--esp-color);
}

@media (min-width: 768px) {
  .exo-banda,
  .exo-diagnostico,
  .exo-autovacunas {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   Especie · Muestreo (pantalla 02): guía + vídeo de barreras + packs + vídeos.
   Provisional: packs y vídeos en dos bloques hasta que Exopol entregue el
   agrupado por «PROCESO» (entonces se reordena en acordeones).
   -------------------------------------------------------------------------- */
.exo-muestreo {
  padding: 1.25rem var(--ex-espacio) 0;
}

.exo-mue-intro {
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-mue-guia {
  margin: 0.75rem 0;
}

.exo-mue-descarga {
  color: var(--esp-color);
  font-weight: 700;
  text-decoration: underline;
}

.exo-mue-barreras {
  margin: 0.75rem 0 1.25rem;
}

.exo-mue-barreras a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--esp-color);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.exo-mue-bloque {
  margin-top: 1.5rem;
}

.exo-mue-titulo {
  margin: 0 0 0.6rem;
  color: var(--ex-negro);
  font-weight: 700;
}

.exo-mue-packs,
.exo-mue-videos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.exo-mue-packs li,
.exo-mue-videos li {
  padding: 0.3rem 0;
}

.exo-mue-packs a,
.exo-mue-videos a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ex-texto);
  text-decoration: none;
}

.exo-mue-packs a:hover,
.exo-mue-videos a:hover {
  text-decoration: underline;
}

.exo-mue-pack-icono {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* El icono de vídeo hereda el color de la especie */
.exo-mue-video-icono svg {
  width: 1.2em;
  height: 1.2em;
  color: var(--esp-color);
}

.exo-mue-barreras .exo-mue-video-icono svg {
  color: #fff;
}

@media (min-width: 768px) {
  .exo-muestreo {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   MUESTREO · páginas generales del menú: «Packs de muestreo» y «Vídeos de
   toma de muestras». Fuera del diseño de 12 pantallas.

   IMPORTANTE — estas dos páginas NO son de una especie, así que no llevan
   clase .esp-* en el <main> y --esp-color quedaría sin definir (el botón de
   las 3 barreras saldría con fondo transparente y letra blanca: invisible).
   Se le da aquí el verde corporativo como valor base; dentro de cada bloque
   de especie de la página de vídeos, la clase .esp-* lo vuelve a pisar y
   manda el color de esa especie.
   -------------------------------------------------------------------------- */
.exo-packs,
.exo-videos {
  --esp-color: var(--ex-verde);
  --esp-tinta: #fff;
}

.exo-pk-cuerpo,
.exo-vd-cuerpo {
  padding: 1.25rem var(--ex-espacio) 0;
}

.exo-pk-intro,
.exo-vd-intro {
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-pk-sub,
.exo-vd-sub {
  margin: 0 0 1.25rem;
  color: var(--ex-texto);
  line-height: 1.5;
}

/* --- Packs: lista única, cada pack con las especies que lo usan ----------- */
.exo-pk-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.exo-pk-item {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--ex-gris-buscador);
}

.exo-pk-item:last-child {
  border-bottom: 0;
}

.exo-pk-enlace {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ex-texto);
  text-decoration: none;
}

.exo-pk-enlace:hover .exo-pk-nombre {
  text-decoration: underline;
}

.exo-pk-icono {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
}

.exo-pk-nombre {
  font-weight: 700;
}

/* Pastillas de especie. Cada <a> lleva su propia clase .esp-*, que es la que
   define ahí mismo el --esp-color que se usa de fondo. */
.exo-pk-especies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  padding-left: calc(48px + 0.75rem);
}

.exo-pk-para {
  color: var(--ex-texto);
  font-size: 0.8rem;
}

.exo-pk-especie {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--esp-color);
  color: var(--esp-tinta);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.exo-pk-especie:hover {
  text-decoration: underline;
}

/* Tres especies tienen color claro (conejos y acuicultura son mentas, avicultura
   es gris): sobre ellos el texto blanco no se lee. Ahí la letra va oscura.
   Los otros cinco son colores saturados y el blanco funciona. */
.exo-pk-especie.esp-conejos,
.exo-pk-especie.esp-acuicultura,
.exo-pk-especie.esp-avicultura {
  color: var(--ex-negro);
}

/* --- Vídeos: un bloque por especie ---------------------------------------- */
.exo-vd-bloque {
  margin-bottom: 1.75rem;
}

.exo-vd-especie {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 3px solid var(--esp-color);
  color: var(--ex-negro);
  font-weight: 700;
}

.exo-vd-especie-icono svg {
  width: 1.6em;
  height: 1.6em;
  color: var(--esp-color);
}

.exo-vd-mas {
  margin: 0.5rem 0 0;
}

/* Este enlace NO va del color de la especie a propósito: en acuicultura y
   avicultura (menta claro y gris) el texto quedaba ilegible sobre el fondo
   blanco. La especie ya se identifica por el icono, el título y la línea de
   debajo, así que aquí manda que se lea. */
.exo-vd-mas a {
  color: var(--ex-verde);
  font-weight: 700;
}

.exo-pk-vacio,
.exo-vd-vacio {
  color: var(--ex-texto);
}

/* AQUÍ ESTABA EL BLOQUE «MUESTREO AMBIENTAL» de Packs de muestreo (.exo-pk-amb-*):
   el titular, las preguntas, la lista de cuándo aplicarlos, las cajas de tipos con su
   estrella de color y el enlace a la guía en PDF. Todo retirado el 07-09-2026, cuando
   Exopol pidió dejar en esa página solo la lista de packs. Ver
   inc/paginas/packs-de-muestreo.php, que explica qué se fue y por qué. */

/* OJO AL BORRAR AQUÍ: esta media query estaba DENTRO del bloque que se retiró, pero no
   era suya. Además de poner los tipos de muestreo a dos columnas, es la que limita el
   ancho de las DOS páginas de MUESTREO —packs y vídeos— en pantalla grande. Al quitar
   el bloque se fue con él y las dos se quedaron ocupando todo el monitor; restaurada el
   mismo día. Mismo patrón que .exo-muestreo o .exo-st. */
@media (min-width: 768px) {
  .exo-packs,
  .exo-videos {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   Especie · Servicio técnico (pantalla 05): selector de zona + tarjeta del
   delegado + mapa de apoyo.
   Provisional: el diseño selecciona por PROVINCIA; hasta que Exopol entregue el
   mapeo se elige por zona y el mapa es lo que ubica al cliente (por eso NO es
   decorativo y lleva alt de verdad).
   -------------------------------------------------------------------------- */
.exo-st {
  padding: 1.25rem var(--ex-espacio) 0;
}

.exo-st-intro {
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-st-form {
  margin: 1.25rem 0;
}

.exo-st-label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ex-negro);
  font-weight: 700;
}

/* Mismo gris que el buscador: es el otro control de formulario del sitio */
.exo-st-select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--ex-radio);
  background: var(--ex-gris-buscador);
  color: var(--ex-texto);
  font: inherit;
}

.exo-st-select:focus {
  outline: none;
  border-color: var(--esp-color);
}

.exo-st-boton {
  margin-top: 0.75rem;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: var(--ex-radio);
  background: var(--esp-color);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.exo-st-boton:hover,
.exo-st-boton:focus-visible {
  filter: brightness(0.92);
}

/* Recuadro sutil: el diseño no da estilo para esta tarjeta, así que se usa el
   gris de los buscadores como borde en vez de inventar un color nuevo. */
.exo-st-tarjeta {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid var(--ex-gris-buscador);
  border-radius: var(--ex-radio);
}

.exo-st-tarjeta-intro {
  margin-bottom: 0.5rem;
  color: var(--ex-texto);
}

.exo-st-nombre {
  margin-bottom: 0.6rem;
  color: var(--esp-color);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Móvil y email en fila, como los accesos de la portada de especie */
.exo-st-contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
}

.exo-st-mapa {
  margin: 1.5rem 0 0;
}

/* El SVG lleva viewBox, así que con width:100% escala solo: no hace falta JS
   para el responsive (que es justo lo que no daban las áreas sensibles). */
.exo-st-mapa svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Cada zona es un enlace: tiene que notarse que se puede pinchar */
.exo-st-zona {
  cursor: pointer;
}

.exo-st-zona path {
  stroke: #fff;
  stroke-width: 6;
  transition: opacity 0.15s ease;
}

.exo-st-zona:hover path,
.exo-st-zona:focus path {
  opacity: 0.75;
}

/* La zona elegida NO se marca con un borde grueso (quedaba muy duro): se atenúa
   el resto del mapa y ella se queda a pleno color con un filo fino. */
.exo-st-mapa svg.tiene-seleccion .exo-st-zona:not(.es-activa) path {
  opacity: 0.35;
}

.exo-st-zona.es-activa path {
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 5;
}

/* El foco por teclado tiene que verse: el contorno por defecto se pierde
   dentro del SVG. */
.exo-st-zona:focus {
  outline: none;
}

.exo-st-zona:focus path {
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 5;
  opacity: 1;
}

.exo-st-mapa figcaption {
  margin-top: 0.5rem;
  color: var(--ex-texto);
  font-size: 0.9rem;
  text-align: center;
}

@media (min-width: 768px) {
  .exo-st {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   Diagnóstico general (pantallas 10-11-12, una sola página)
   Como no es de ninguna especie, se fija el color al verde de marca: así toda
   la maquinaria que ya usa --esp-color (portada, buscador, acordeones, viñetas)
   se pinta en verde sin tocar nada más.
   -------------------------------------------------------------------------- */

.exo-diag-general {
  --esp-color: var(--ex-verde);
  --esp-tinta: #fff;
}

/* Portada del diagnóstico GENERAL (pantalla 10) — distinta a la de especie:
   «DIAGNÓSTICO» en NEGRO y el icono (microscopio) dentro de un aro de puntos
   multicolor. Todo acotado a .exo-diag-general para no tocar las especies.
   El microscopio real lo dará Exopol; hasta entonces va el marcador de guiones. */
.exo-diag-general .exo-especie-portada-nombre {
  color: var(--ex-negro);
}

.exo-diag-general .exo-especie-portada-icono {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  color: var(--ex-negro);        /* el microscopio en negro, como el diseño */
}

/* Aro de puntos multicolor: un disco con degradado cónico de los colores de
   marca, recortado con una máscara = (anillo) ∩ (radios) → puntos de colores. */
.exo-diag-general .exo-especie-portada-icono::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--ex-bovino), var(--ex-porcino), var(--ex-conejos), var(--ex-equino),
    var(--ex-ovino), var(--ex-avicultura), var(--ex-acuicultura), var(--ex-compania),
    var(--ex-bovino));
  -webkit-mask:
    repeating-conic-gradient(#000 0 4deg, transparent 4deg 9deg),
    radial-gradient(circle at center, transparent 59px, #000 60px 66px, transparent 67px);
  -webkit-mask-composite: source-in;
  mask:
    repeating-conic-gradient(#000 0 4deg, transparent 4deg 9deg),
    radial-gradient(circle at center, transparent 59px, #000 60px 66px, transparent 67px);
  mask-composite: intersect;
}

.exo-diag-cuerpo {
  padding: 0 var(--ex-espacio);
}

.exo-diag-intro {
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-diag-bloque {
  margin-top: 2.25rem;
}

.exo-diag-titulo {
  margin: 0 0 0.75rem;
  color: var(--ex-negro);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.exo-diag-sub {
  margin: -0.4rem 0 0;
  color: var(--ex-texto);
}

.exo-diag-subtitulo {
  margin: 1.5rem 0 1rem;
  color: var(--ex-texto);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* «Técnicas empleadas»: rejilla de 2 columnas, icono + nombre + frase */
/* La rejilla de las siete técnicas. Sale en dos sitios: la portada de Diagnóstico
   y el «otras técnicas» del pie de cada técnica.

   ENCOGIDA EL 07-09-2026 por petición de Exopol: el icono baja de 48 a 32 px, se cae
   la frase explicativa y los huecos se aprietan. Todo va en la misma dirección: que
   el buscador de la portada de Diagnóstico se vea sin hacer scroll. */
.exo-tecnicas-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 0.75rem;
}

.exo-tecnica-card {
  text-align: center;
}

/* Toda la tarjeta es clicable, en los dos sitios donde sale la rejilla. Antes esto
   solo valía dentro de .exo-tec-pagina, porque en la portada de Diagnóstico las
   tarjetas no enlazaban a ninguna parte; desde el 07-09-2026 sí. */
.exo-tecnica-card a {
  display: block;
  text-decoration: none;
}

.exo-tecnica-card a:hover .exo-tecnica-card-nombre,
.exo-tecnica-card a:focus-visible .exo-tecnica-card-nombre {
  text-decoration: underline;
}

.exo-tecnica-card-icono {
  display: block;
  color: var(--ex-negro);
}

.exo-tecnica-card-icono svg,
.exo-tecnica-card-icono .esp-icono--png {
  width: auto;
  height: 32px;
}

.exo-tecnica-card-nombre {
  display: block;
  margin-top: 0.35rem;
  color: var(--ex-negro);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

/* (Aquí estaba .exo-tecnica-card-sub, la frase bajo cada técnica. Exopol la mandó
   quitar el 07-09-2026: «deja solo el título, la explicación irá en otros sitios».
   Las claves tec_*_sub siguen en los archivos de idioma para ese otro sitio.) */

/* Buscador global: gris, como el resto (el rosa del mockup era una anotación
   del cliente, NO un color del diseño — confirmado por Ana; en la pág. 6 del PDF
   el buscador va en gris). Solo añade aire antes del título de abajo. */
.exo-buscador--global {
  margin-bottom: 1.25rem;
}

/* Catálogo por especie: la fila de 8 iconos, cada uno de su color */
.exo-especies-iconos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* móvil: 8 iconos en 4 y 4 */
  gap: 0.9rem 0.75rem;
  justify-items: center;
  align-items: center;
}

.exo-especies-iconos li {
  margin: 0;
}

.exo-especies-iconos a {
  display: block;
  color: var(--esp-color);
}

.exo-especies-iconos svg {
  width: auto;
  height: 40px;
}

@media (min-width: 768px) {
  .exo-especies-iconos {
    grid-template-columns: repeat(8, 1fr);   /* pantalla grande: los 8 en fila */
  }
}

/* Preguntas frecuentes: el título con su icono «?» y las respuestas */
.exo-diag-titulo--faq {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.exo-faq-icono {
  display: inline-flex;
  flex: 0 0 28px;
  color: var(--ex-verde);
}

.exo-faq-icono svg {
  width: 28px;
  height: 28px;
}

.exo-faq-respuesta {
  margin: 0;
  color: var(--ex-texto);
  line-height: 1.5;
}

@media (min-width: 768px) {
  .exo-diag-cuerpo {
    max-width: 720px;
    margin: 0 auto;
  }

  /* En PC caben las siete técnicas en dos filas de cuatro en vez de cuatro de dos:
     así el buscador sube casi una pantalla entera, que es lo que pidió Exopol. */
  .exo-tecnicas-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.exo-404 {
  padding: 3rem var(--ex-espacio);
  text-align: center;
}

.exo-404 a {
  color: var(--ex-verde);
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.exo-pie {
  margin-top: 2.5rem;
  background: var(--ex-blanco);
}

/* Franja multicolor: la misma idea que la web actual, pero construida con los
   8 colores de especie del diseño nuevo, simétricos (ida y vuelta). */
.exo-pie-franja {
  height: 8px;
  background: linear-gradient(to right,
    var(--ex-bovino)      0%,    var(--ex-bovino)      6.25%,
    var(--ex-ovino)       6.25%, var(--ex-ovino)      12.5%,
    var(--ex-conejos)    12.5%,  var(--ex-conejos)    18.75%,
    var(--ex-acuicultura) 18.75%, var(--ex-acuicultura) 25%,
    var(--ex-avicultura) 25%,    var(--ex-avicultura) 31.25%,
    var(--ex-porcino)    31.25%, var(--ex-porcino)    37.5%,
    var(--ex-equino)     37.5%,  var(--ex-equino)     43.75%,
    var(--ex-compania)   43.75%, var(--ex-compania)   56.25%,
    var(--ex-equino)     56.25%, var(--ex-equino)     62.5%,
    var(--ex-porcino)    62.5%,  var(--ex-porcino)    68.75%,
    var(--ex-avicultura) 68.75%, var(--ex-avicultura) 75%,
    var(--ex-acuicultura) 75%,   var(--ex-acuicultura) 81.25%,
    var(--ex-conejos)    81.25%, var(--ex-conejos)    87.5%,
    var(--ex-ovino)      87.5%,  var(--ex-ovino)      93.75%,
    var(--ex-bovino)     93.75%, var(--ex-bovino)    100%
  );
}

/* Bloque de financiación Kit Digital / Next Generation EU */
.exo-pie-financiacion {
  padding: 1rem var(--ex-espacio) 0;
  text-align: center;
}

.exo-pie-financiacion-texto {
  margin: 0 0 0.75rem;
  color: var(--ex-texto);
  font-weight: 600;
}

.exo-pie-financiacion-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.exo-pie-financiacion-logos img {
  height: 58px;
  width: auto;
}

@media (max-width: 480px) {
  .exo-pie-financiacion-logos {
    gap: 1.25rem;
  }
  .exo-pie-financiacion-logos img {
    height: 46px;
  }
}

.exo-pie-contenido {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem var(--ex-espacio);
}

.exo-pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
}

/* El «Configurar cookies» es un <button> (abre la barra, no lleva a ninguna
   página), pero en el pie tiene que verse exactamente igual que sus vecinos:
   se le quita el aspecto de botón del navegador. */
.exo-pie-enlaces a,
.exo-pie-boton {
  color: var(--ex-negro);
  font-size: 0.95rem;
  text-decoration: none;
}

/* «Configurar cookies» va enmarcado y no como un enlace más de la fila (idea de
   Ana, 11-08-2026): en el pie quedaba descolgado en su propia línea y no se
   entendía que fuera un botón. Se probó primero como pestaña —sin borde abajo—,
   pero medio abierto quedaba raro, así que va cerrado por los cuatro lados.
   Así se distingue de los enlaces legales, que sí son páginas. */
.exo-pie-boton {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--ex-verde);
  border-radius: var(--ex-radio);
  background: none;
  color: var(--ex-verde);
  font-family: inherit;
  font-weight: 700;
  line-height: inherit;
  cursor: pointer;
}

.exo-pie-boton:hover,
.exo-pie-boton:focus-visible {
  background: var(--ex-verde);
  color: var(--ex-blanco);
  text-decoration: none;
}

.exo-pie-enlaces a:hover,
.exo-pie-enlaces a:focus-visible,
.exo-pie-boton:hover,
.exo-pie-boton:focus-visible {
  text-decoration: underline;
}

.exo-pie-copy {
  margin: 0;
  color: var(--ex-texto);
  font-weight: 600;
}

@media (min-width: 768px) {
  .exo-pie-contenido {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* Más ancho que la columna de 720px del contenido: así los 4 enlaces
       legales y el copyright caben en una sola línea en PC. */
    max-width: 1080px;
    margin: 0 auto;
  }
  .exo-pie-copy {
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Contacto (menú NOSOTROS)

   No es una página del diseño, así que reutiliza sus piezas: la portada de
   sección, .exo-acceso para teléfonos y correos, y el mapa de la pantalla 05.
   Como no es de ninguna especie, se fija --esp-color al verde de marca, igual
   que en el diagnóstico general.
   -------------------------------------------------------------------------- */

.exo-contacto {
  --esp-color: var(--ex-verde);
  --esp-tinta: #fff;
}

.exo-con-cuerpo {
  padding: 0 var(--ex-espacio) 2rem;
}

.exo-con-bloque {
  margin-top: 2rem;
}

.exo-con-titulo {
  margin: 0 0 0.35rem;
  color: var(--ex-negro);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.exo-con-sub {
  margin: 0 0 1rem;
  color: var(--ex-texto);
  font-size: 0.95rem;
}

/* --- La sede --- */

.exo-con-sede {
  padding: 1rem;
  border: 1px solid var(--ex-gris-buscador);
  border-radius: var(--ex-radio);
  font-style: normal;            /* <address> va en cursiva por defecto */
}

.exo-con-sede-nombre {
  margin: 0 0 0.35rem;
  color: var(--ex-verde);
  font-weight: 700;
}

.exo-con-sede-dir {
  margin: 0 0 0.85rem;
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-con-sede-accesos,
.exo-con-accesos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0;
}

/* El correo, siempre en su propia línea dentro de las fichas.
   Aquí los enlaces se colocan seguidos y saltan cuando no caben, así que el
   resultado dependía de lo largo que fuera el email: en AVICULTURA, que es el
   más corto (aves@exopol.com), se quedaba pegado al teléfono mientras que en
   las demás bajaba (lo vio Ana el 11-08-2026). Forzándolo a ocupar la fila
   entera, todas las fichas se ven igual — y porcino, que tiene dos teléfonos,
   los mantiene juntos arriba. */
.exo-con-especie .exo-con-accesos a[href^="mailto:"],
.exo-con-delegado .exo-con-accesos a[href^="mailto:"] {
  flex: 0 0 100%;
}

.exo-con-sede-mapa {
  margin: 0.85rem 0 0;
}

/* --- Delegados --- */

.exo-con-delegados,
.exo-con-especies {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exo-con-delegado {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--ex-gris-buscador);
  border-radius: var(--ex-radio);
}

/* Pastilla del color de la zona: es lo que ata la tarjeta con su trozo de mapa,
   así que no es decorativa de más — pero el dato también está escrito (la zona),
   por eso va aria-hidden y no necesita texto alternativo. */
.exo-con-color {
  flex: 0 0 8px;
  border-radius: 4px;
}

.exo-con-nombre {
  margin: 0;
  font-weight: 700;
}

.exo-con-zona {
  margin: 0.1rem 0 0.5rem;
  color: var(--ex-texto);
  font-size: 0.9rem;
}

/* Zona pulsada en el mapa → se resalta la ficha de su delegado. El realce va SOLO
   en la ficha (fondo gris): al trazado del mapa no se le pone borde, que es de
   donde salían los piquitos en la pantalla 05. */
.exo-con-delegado {
  transition: background-color 0.15s ease;
}

.exo-con-delegado.es-activa {
  background: var(--ex-gris-buscador);
}

.exo-con-zona {
  cursor: pointer;
}

.exo-con-zona path {
  transition: opacity 0.15s ease;
}

.exo-con-zona:hover path,
.exo-con-zona:focus path {
  opacity: 0.75;
}

/* Mismo criterio que en la 05: el contorno de foco por defecto se pierde dentro
   del SVG, así que el aviso es el propio aclarado. */
.exo-con-zona:focus {
  outline: none;
}

.exo-con-mapa {
  margin: 1.25rem 0 0;
}

.exo-con-mapa svg {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
}

/* --- Especialistas por especie --- */

.exo-con-especie {
  padding: 0.85rem;
  border: 1px solid var(--ex-gris-buscador);
  border-left: 6px solid var(--esp-color);
  border-radius: var(--ex-radio);
}

.exo-con-especie-nombre {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  color: var(--esp-color);
  font-weight: 700;
  text-decoration: none;
}

.exo-con-especie-nombre:hover span,
.exo-con-especie-nombre:focus-visible span {
  text-decoration: underline;
}

.exo-con-especie-icono {
  display: inline-flex;
}

.exo-con-especie-icono svg {
  width: 32px;
  height: 32px;
}

@media (min-width: 768px) {
  .exo-con-cuerpo {
    max-width: 720px;
    margin: 0 auto;
  }

  .exo-con-delegados,
  .exo-con-especies {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   NUESTRA HISTORIA (menú NOSOTROS)
   Página de texto: lo único que necesita es una columna cómoda de leer y los
   dos vídeos de instalaciones. Reutiliza la portada de sección y el verde de
   la casa, igual que Contacto.
   -------------------------------------------------------------------------- */

.exo-historia {
  --esp-color: var(--ex-verde);
  --esp-tinta: #fff;
}

.exo-his-cuerpo {
  padding: 0 var(--ex-espacio) 2rem;
}

.exo-his-bloque {
  margin-top: 2rem;
}

.exo-his-titulo {
  margin: 0 0 0.35rem;
  color: var(--ex-negro);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.exo-his-sub {
  margin: 0 0 1rem;
  color: var(--ex-texto);
  font-size: 0.95rem;
}

.exo-his-texto p {
  margin: 0 0 0.9rem;
  color: var(--ex-texto);
  line-height: 1.6;
}

/* Las cuatro cifras (1993 / 70 / 5.000 m² / 20%). Exopol las quiere visuales pero
   sin que ocupen: dos por fila en móvil, las cuatro en fila en PC. Cajas sobrias,
   con el número grande en el verde de la casa y el rótulo pequeño debajo.
   (Aquí estaba la regla del lema «Nacimos de la innovación», que Exopol mandó
   quitar el 07-09-2026 junto con los dos últimos párrafos.) */
.exo-his-cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.exo-his-cifras li {
  padding: 0.9rem 0.6rem;
  border: 1px solid var(--ex-gris-buscador);
  border-radius: var(--ex-radio);
  text-align: center;
}

.exo-his-cifra-n {
  display: block;
  color: var(--ex-verde);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}

.exo-his-cifra-t {
  display: block;
  margin-top: 0.3rem;
  color: var(--ex-texto);
  font-size: 0.85rem;
  line-height: 1.35;
}

.exo-his-videos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.exo-his-videos li {
  padding: 0.3rem 0 1rem;
}

/* Marco 16:9 sin padding-bottom del truco viejo: aspect-ratio lo hace solo y
   los navegadores que no lo entiendan se quedan con la altura mínima. */
.exo-his-video-marco {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 180px;
  margin-bottom: 0.4rem;
  border-radius: var(--ex-radio, 8px);
  overflow: hidden;
  background: #000;
}

.exo-his-video-marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* El pie de cada vídeo. Exopol pidió el 07-09-2026 «agranda un poco los pies de
   foto»: sube de heredar el cuerpo del texto a 1.05rem y en negrita, que es lo que
   lo separa del párrafo de al lado sin que parezca otro titular. */
.exo-his-videos a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ex-texto);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}

.exo-his-videos a:hover,
.exo-his-videos a:focus-visible {
  text-decoration: underline;
}

.exo-his-video-icono svg {
  width: 1.2em;
  height: 1.2em;
  color: var(--esp-color);
}

@media (min-width: 768px) {
  .exo-his-cuerpo {
    max-width: 720px;
    margin: 0 auto;
  }

  /* Las cuatro cifras caben de sobra en una fila con 720px de ancho. */
  .exo-his-cifras {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   PROYECTOS I+D Y COLABORACIONES (menú NOSOTROS)
   Dos cifras arriba (CDTI y AEI, como en la web actual) y debajo la lista de
   resoluciones, cada una como tarjeta enlazable entera.
   -------------------------------------------------------------------------- */

.exo-proyectos {
  --esp-color: var(--ex-verde);
  --esp-tinta: #fff;
}

.exo-pro-cuerpo {
  padding: 0 var(--ex-espacio) 2rem;
}

.exo-pro-bloque {
  margin-top: 2rem;
}

.exo-pro-titulo {
  margin: 0 0 0.35rem;
  color: var(--ex-negro);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.exo-pro-sub {
  margin: 0 0 1rem;
  color: var(--ex-texto);
  font-size: 0.95rem;
}

/* --- Las cifras --- */

.exo-pro-cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exo-pro-cifra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 1rem 0.75rem;
  border: 1px solid var(--ex-gris-buscador);
  border-radius: var(--ex-radio);
  text-align: center;
}

.exo-pro-numero {
  margin: 0;
  color: var(--ex-verde);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}

.exo-pro-rotulo {
  margin: 0 0 0.6rem;
  color: var(--ex-negro);
  font-size: 0.95rem;
  font-weight: 700;
}

/* El logo es el sello del organismo: se deja tal cual, solo se le pone tope de
   alto para que los dos (CDTI y AEI, de proporciones distintas) casen. */
.exo-pro-logo {
  max-width: 100%;
  max-height: 46px;
  margin-top: auto;
  object-fit: contain;
}

/* --- La lista de proyectos --- */

.exo-pro-lista {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exo-pro-item a {
  display: block;
  padding: 0.85rem;
  border: 1px solid var(--ex-gris-buscador);
  border-radius: var(--ex-radio);
  color: var(--ex-texto);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.exo-pro-item a:hover,
.exo-pro-item a:focus-visible {
  background: var(--ex-gris-buscador);
}

.exo-pro-nombre {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--ex-negro);
  font-weight: 700;
}

.exo-pro-item a:hover .exo-pro-nombre,
.exo-pro-item a:focus-visible .exo-pro-nombre {
  text-decoration: underline;
}

/* Aviso de que el enlace baja un PDF, no abre una página. */
.exo-pro-pdf {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: var(--ex-verde);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.exo-pro-texto {
  display: block;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Proyectos a medida: los servicios de la página `servicios/proyectos.php`, que
   desaparece. Mismas cajas que la lista de proyectos, pero centradas y sin texto
   debajo. Son cinco: la salud intestinal se quitó porque Exopol ya no ofrece ese
   servicio (confirmado el 07-09-2026). */
.exo-pro-medida {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exo-pro-medida a {
  display: block;
  padding: 0.85rem;
  border: 1px solid var(--ex-gris-buscador);
  border-radius: var(--ex-radio);
  color: var(--ex-negro);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.exo-pro-medida a:hover,
.exo-pro-medida a:focus-visible {
  background: var(--ex-gris-buscador);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .exo-pro-cuerpo {
    max-width: 720px;
    margin: 0 auto;
  }

  .exo-pro-medida {
    grid-template-columns: 1fr 1fr;
  }

  /* Al ser un número impar de servicios, el último se quedaba solo y pegado a la
     izquierda. Se centra en su fila conservando el ancho de una columna (la mitad,
     menos la mitad del hueco). Si algún día vuelven a ser pares, esta regla deja
     de aplicar sola. */
  .exo-pro-medida li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.375rem);
  }
}

/* Sello PYME Innovadora. La imagen ya trae el rótulo y el escudo del Ministerio
   dentro, así que solo hay que centrarla y no dejar que crezca más de la cuenta:
   el JPG mide 703 px de ancho y estirado se ve pastoso. Sin borde ni caja, que es
   un sello oficial y se basta solo. */
.exo-pro-sello {
  text-align: center;
}

.exo-pro-sello img {
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* --------------------------------------------------------------------------
   PÁGINA DE UNA TÉCNICA (submenú DIAGNÓSTICO: paneles, Real Time PCR…)
   Reutiliza el armazón de .exo-diag-general (portada, cuerpo, títulos,
   determinaciones); aquí solo va lo propio del contenido editorial.
   -------------------------------------------------------------------------- */

/* El aro de puntos multicolor es del microscopio del Diagnóstico general: en
   una técnica concreta (o en Solicitud) sobra, y el icono va sin marco. Si se
   repitiera, dos páginas distintas tendrían la misma portada. */
.exo-tec-pagina .exo-especie-portada-icono::before,
.exo-sol-pagina .exo-especie-portada-icono::before,
.exo-tecx .exo-especie-portada-icono::before {
  content: none;
}

.exo-tec-pagina .exo-especie-portada-icono,
.exo-sol-pagina .exo-especie-portada-icono,
.exo-tecx .exo-especie-portada-icono {
  width: auto;
  height: auto;
}

.exo-tec-item + .exo-tec-item {
  margin-top: 1.25rem;
}

.exo-tec-item-titulo {
  margin: 0 0 0.35rem;
  color: var(--ex-verde);
  font-size: 1rem;
  font-weight: 700;
}

.exo-tec-item-texto {
  margin: 0;
  color: var(--ex-texto);
  line-height: 1.5;
}

/* 25-09-2026 · Paneles de toxicología: el filtro de especie y las especies de
   cada panel. El resto (acordeón, rótulos, texto) ya lo visten las clases de la
   teoría de las técnicas. */
.exo-tox-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.exo-tox-filtro label {
  color: var(--ex-texto);
  font-weight: 700;
}

.exo-tox-filtro select {
  flex: 1 1 12rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ex-gris-buscador);
  border-radius: var(--ex-radio);
  background: var(--ex-gris-buscador);
  color: var(--ex-negro);
  font: inherit;
}

.exo-tox-especies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 1rem 0 0;
}

.exo-tox-especie {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--ex-gris-buscador);
  color: var(--ex-negro);
  font-size: 0.8rem;
  text-transform: uppercase;
}

/* 25-09-2026 · Colores corporativos en los rótulos de la teoría (petición de
   Exopol: «hay que darles colores corporativos para que no quede texto
   uniforme»). Los rótulos van rotando por la paleta de tokens.css y el texto
   se queda en negro, igual que en el ejemplo que mandaron.
   Se quedan fuera el turquesa claro, el verde agua y el gris de la banda de
   especies: sobre blanco no se leen. */
.exo-tecx .exo-tec-item:nth-of-type(4n+1) .exo-tec-item-titulo {
  color: var(--ex-verde-oscuro);
}

.exo-tecx .exo-tec-item:nth-of-type(4n+2) .exo-tec-item-titulo {
  color: var(--ex-equino);
}

.exo-tecx .exo-tec-item:nth-of-type(4n+3) .exo-tec-item-titulo {
  color: var(--ex-verde);
}

.exo-tecx .exo-tec-item:nth-of-type(4n+4) .exo-tec-item-titulo {
  color: var(--ex-compania);
}

.exo-tec-lista {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-tec-lista li + li {
  margin-top: 0.35rem;
}

/* Documento de apoyo (hoy solo la hoja de anamnesis de toxicología). Mismo
   trato que los PDF de Proyectos I+D: aviso de que el enlace baja un archivo. */
.exo-tec-pdf {
  margin: 1.25rem 0 0;
}

.exo-tec-pdf a {
  color: var(--ex-verde);
  font-weight: 700;
  text-decoration: none;
}

.exo-tec-pdf a:hover,
.exo-tec-pdf a:focus-visible {
  text-decoration: underline;
}

/* «Otras técnicas» usa la misma rejilla de la portada de Diagnóstico, y desde el
   07-09-2026 las dos son clicables: el estilo del enlace vive arriba, con la rejilla. */

/* Aquí vivían .exo-tec-lectura y .exo-tec-seccion, el apartado «Sobre esta técnica»
   que el 07-09-2026 bajó al final de la página de la técnica. El 10-09-2026 Exopol
   pidió sacar esa teoría de la página, así que las dos clases se han ido con ella:
   el contenido está ahora en «Sobre nuestras técnicas» (más abajo, .exo-tecx-*).
   Los estilos de dentro (.exo-tec-item, .exo-tec-lista, .exo-tec-pdf) SIGUEN EN USO:
   los usa la página nueva. */

/* Mismo tratamiento para la teoría de Estadísticas, que el 07-09-2026 bajó también al
   final de su página («los archivos para descargar y el mapa interactivo al inicio»).
   Se separa igual, con una línea arriba, para que las dos páginas se lean igual. */
.exo-est-lectura {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ex-gris-buscador);
}


.exo-tec-volver {
  margin: 1.5rem 0 0;
  text-align: center;
}

/* El buscador y el título de las determinaciones quedaban pegados. Mismo aire
   que el buscador global de la página de Diagnóstico. */
.exo-tec-pagina .exo-buscador {
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   SOBRE NUESTRAS TÉCNICAS (10-09-2026)
   La teoría de las siete técnicas, que Exopol pidió sacar de las páginas de
   técnica y reunir aquí «a modo de FAQ». Reutiliza casi todo: el armazón de
   .exo-diag-general, el acordeón de .exo-faq y los estilos de contenido
   .exo-tec-item / .exo-tec-lista / .exo-tec-pdf, que son los mismos textos.
   Aquí va solo lo propio: la cabecera de cada técnica y su separación.
   -------------------------------------------------------------------------- */

/* Cada técnica, separada de la anterior por una línea: son siete bloques
   seguidos en la misma página y sin ella se leen como uno solo. La primera no
   la lleva, que iría pegada a la intro de la página. */
.exo-tecx-tecnica + .exo-tecx-tecnica {
  padding-top: 1.75rem;
  border-top: 1px solid var(--ex-gris-buscador);
}

/* Icono y nombre en una fila. El nombre es enlace a la página de la técnica y
   se pinta como el título de sección que es, sin subrayado hasta el hover. */
.exo-tecx-titulo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.exo-tecx-icono {
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  color: var(--ex-negro);
}

.exo-tecx-icono svg,
.exo-tecx-icono .esp-icono--png {
  width: auto;
  height: 28px;
}

.exo-tecx-titulo a {
  color: inherit;
  text-decoration: none;
}

.exo-tecx-titulo a:hover,
.exo-tecx-titulo a:focus-visible {
  text-decoration: underline;
}

/* La descripción de la técnica va A LA VISTA, fuera de los desplegables: es el
   texto que trabaja para el SEO, que era la otra cosa que pedía Exopol. */
.exo-tecx-intro {
  margin: 0.75rem 0 1rem;
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-tecx-ver {
  margin: 1rem 0 0;
}

/* El enlace a esta página desde las preguntas frecuentes de Diagnóstico general. */
.exo-tecx-mas {
  margin: 1.25rem 0 0;
  text-align: center;
}

/* Los listados de paneles y determinaciones en PDF, en la página de Diagnóstico
   de cada especie. Van antes del buscador: son la versión descargable del
   catálogo que se muestra debajo. */
.exo-diag-descargas {
  margin-bottom: 1.25rem;
}

.exo-diag-descargas-titulo {
  margin: 0 0 0.5rem;
  color: var(--ex-negro);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.exo-diag-descargas-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.exo-diag-descargas-lista a {
  /* Verde corporativo fijo, NO el color de la especie: sobre conejos,
     acuicultura y avicultura (colores claros) no se leería. */
  color: var(--ex-verde);
  font-weight: 700;
  text-decoration: none;
}

.exo-diag-descargas-lista a:hover,
.exo-diag-descargas-lista a:focus-visible {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   SOLICITUD DE ANÁLISIS · el formulario
   Remaquetado del de es/diagnostico/aviso.php. Mobile-first: una columna,
   etiqueta encima del campo y objetivos táctiles grandes.
   -------------------------------------------------------------------------- */

.exo-sol-nota {
  margin: 0 0 1rem;
  color: var(--ex-texto);
  font-size: 0.9rem;
}

.exo-sol-grupo {
  margin: 1.75rem 0 0.75rem;
  color: var(--ex-verde);
  font-size: 1rem;
  font-weight: 700;
}

.exo-sol-campo {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 1rem;
}

.exo-sol-campo label {
  color: var(--ex-negro);
  font-size: 0.9rem;
  font-weight: 700;
}

.exo-sol-campo input,
.exo-sol-campo select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid #c9c9c9;
  border-radius: 6px;
  background: var(--ex-blanco);
  color: var(--ex-texto);
  font-family: inherit;
  font-size: 1rem;    /* 16px: por debajo, el móvil hace zoom al enfocar */
}

.exo-sol-campo select[multiple] {
  padding: 0.3rem;
}

.exo-sol-campo input:focus,
.exo-sol-campo select:focus {
  outline: 2px solid var(--ex-verde);
  outline-offset: 1px;
}

.exo-sol-ayuda {
  color: var(--ex-texto);
  font-size: 0.8rem;
}

/* Las casillas del catálogo, dentro de cada acordeón de técnica */
.exo-sol-bloques {
  margin-bottom: 1.25rem;
}

.exo-sol-casilla {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0;
  line-height: 1.4;
}

.exo-sol-casilla input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
}

.exo-sol-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 0;
}

.exo-sol-enviar {
  padding: 0.7rem 1.5rem;
  border: 0;
  border-radius: 6px;
  background: var(--ex-verde);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.exo-sol-enviar:hover,
.exo-sol-enviar:focus-visible {
  filter: brightness(0.92);
}

/* Los 8 pasos de la app */
.exo-sol-pasos {
  margin: 0.75rem 0 0;
  padding-left: 1.3rem;
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-sol-pasos li + li {
  margin-top: 0.4rem;
}

/* ==========================================================================
   AUTOVACUNAS · página general de la rama (inc/paginas/autovacunas.php)
   Explica el servicio y reparte hacia las 7 especies que lo tienen.
   ========================================================================== */

.exo-avg-cuerpo {
  padding: 0 var(--ex-espacio);
}

.exo-avg-intro {
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-avg-bloque {
  margin-top: 2.25rem;
}

.exo-avg-titulo {
  margin: 0 0 0.75rem;
  color: var(--ex-negro);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.exo-avg-subtitulo {
  margin: 1.5rem 0 0.5rem;
  color: var(--ex-texto);
  font-size: 1rem;
  font-weight: 700;
}

.exo-avg-def {
  margin: 0;
  color: var(--ex-texto);
  line-height: 1.55;
}

.exo-avg-lista {
  margin: 0;
  padding-left: 1.3rem;
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-avg-lista li + li {
  margin-top: 0.5rem;
}

/* --- Los puntos sueltos, en tarjetas (10-09-2026) ------------------------
   «Es una autovacuna si…» y «¿Cuándo están indicadas?» eran dos listas de
   viñetas seguidas, y Exopol vio la página «muy plana (mucho texto, poco
   visual)». Cada punto es una frase corta e independiente, así que se lee
   mejor en tarjeta que en viñeta.

   La raya de color a la izquierda es la misma idea que ya usan los pasos del
   proceso de más abajo, para que las dos mitades de la página se reconozcan
   como la misma familia. */
.exo-avg-tarjetas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.exo-avg-tarjetas li {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--ex-gris-buscador);
  border-left: 3px solid var(--ex-verde);
  border-radius: var(--ex-radio);
  color: var(--ex-texto);
  line-height: 1.45;
}

/* --- El proceso de producción, en 8 pasos --------------------------------
   El número lo pinta un contador CSS, no el HTML: así el orden lo sigue
   marcando el <ol> y no hay cifras sueltas que se puedan desalinear con la
   lista si algún día se añade o quita un paso. */
.exo-avg-proceso {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: exo-avg-paso;
}

.exo-avg-paso {
  position: relative;
  counter-increment: exo-avg-paso;
  padding-left: 3rem;
  min-height: 2.1rem;
  color: var(--ex-texto);
  line-height: 1.5;
}

.exo-avg-paso + .exo-avg-paso {
  margin-top: 1rem;
}

.exo-avg-paso::before {
  content: counter(exo-avg-paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paso-color, var(--ex-verde));
  color: var(--paso-tinta, #fff);
  font-weight: 700;
  font-size: 0.95rem;
}

.exo-avg-paso-h {
  color: var(--paso-color, var(--ex-verde));
  font-weight: 700;
}

/* Los 8 colores del diseño, de rojo a verde oscuro, igual que el degradado con
   el que la web actual numera hoy estos pasos. En los cuatro tonos claros el
   número va en tinta oscura: en blanco no se lee (mismo criterio que en las
   pastillas de especie de packs y vídeos). */
.exo-avg-paso-1 { --paso-color: var(--ex-compania); }
.exo-avg-paso-2 { --paso-color: var(--ex-equino); }
.exo-avg-paso-3 { --paso-color: var(--ex-porcino);     --paso-tinta: var(--ex-negro); }
.exo-avg-paso-4 { --paso-color: var(--ex-avicultura);  --paso-tinta: var(--ex-negro); }
.exo-avg-paso-5 { --paso-color: var(--ex-acuicultura); --paso-tinta: var(--ex-negro); }
.exo-avg-paso-6 { --paso-color: var(--ex-conejos);     --paso-tinta: var(--ex-negro); }
.exo-avg-paso-7 { --paso-color: var(--ex-ovino); }
.exo-avg-paso-8 { --paso-color: var(--ex-bovino); }

/* Sobre los cuatro claros el texto del paso tampoco se lee, así que ahí el
   título vuelve al verde corporativo. */
.exo-avg-paso-3 .exo-avg-paso-h,
.exo-avg-paso-4 .exo-avg-paso-h,
.exo-avg-paso-5 .exo-avg-paso-h,
.exo-avg-paso-6 .exo-avg-paso-h {
  color: var(--ex-verde);
}

/* El registro de laboratorio autorizado. Hasta el 10-09-2026 era una línea en
   letra pequeña al pie del proceso; ahora se lee como lo que es, el dato que
   respalda todo lo anterior: con el vial delante y sobre el gris de fondo que
   ya usa el sitio (--ex-gris-buscador). NO se ha inventado ningún color nuevo:
   en tokens.css no hay un verde claro y la paleta es la de Exopol. */
.exo-avg-registro {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.5rem 0 0;
  padding: 0.8rem 0.9rem;
  border-left: 3px solid var(--ex-verde);
  border-radius: var(--ex-radio);
  background: var(--ex-gris-buscador);
  color: var(--ex-negro);
  font-size: 0.95rem;
  font-weight: 700;
}

.exo-avg-registro-icono {
  display: flex;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  color: var(--ex-verde);
}

.exo-avg-registro-icono svg,
.exo-avg-registro-icono .esp-icono--png {
  width: auto;
  height: 24px;
}

.exo-avg-intervinientes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.exo-avg-intervinientes li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--ex-gris-buscador);
  border-radius: var(--ex-radio);
  color: var(--ex-negro);
  font-weight: 700;
  text-align: center;
}

/* El icono de cada interviniente (10-09-2026): eran tres cajas con una línea
   de texto y nada más, el bloque más plano de la página. */
.exo-avg-int-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ex-verde);
}

.exo-avg-int-icono svg,
.exo-avg-int-icono .esp-icono--png {
  width: auto;
  height: 34px;
}

/* --- El proceso RESUMIDO de la página de especie (10-09-2026) ------------
   Los mismos ocho pasos de la general, pero solo con el título: aquí hacen de
   mapa, no de explicación. Sin la descripción caben en dos columnas ya desde
   el móvil, así que ocupan poco y se leen de un golpe. */
.exo-avg-proceso--resumen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.9rem;
}

.exo-avg-proceso--resumen .exo-avg-paso {
  margin: 0;
  align-items: center;
}

/* El título del paso, sin la descripción debajo, no necesita separarse. */
.exo-avg-proceso--resumen .exo-avg-paso-h {
  margin: 0;
  font-size: 0.9rem;
}

.exo-av-proceso-resumen {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ex-gris-buscador);
}

/* La normativa, que el 10-09-2026 bajó al final de la página: es respaldo
   legal, no el argumento de venta. Se separa con una raya y se pinta un punto
   más apagada que el resto, como se hace con la teoría en otras páginas. */
.exo-avg-legal {
  padding-top: 1.5rem;
  border-top: 1px solid var(--ex-gris-buscador);
}

.exo-avg-legal .exo-avg-titulo {
  font-size: 1rem;
}

.exo-avg-legal .exo-avg-lista {
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .exo-avg-cuerpo {
    max-width: 720px;   /* mismo ancho de lectura que .exo-diag-cuerpo */
    margin: 0 auto;
  }

  .exo-avg-intervinientes {
    grid-template-columns: repeat(3, 1fr);
  }

  /* De dos en dos: dentro de los 720px de ancho de lectura caben bien, y es
     lo que quita la sensación de columna interminable (10-09-2026). */
  .exo-avg-tarjetas {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Un proyecto de I+D (inc/paginas/proyecto.php)
   Las 6 notas de prensa migradas de es/prensa/ el 2026-07-24.
   ========================================================================== */

.exo-proy-cuerpo {
  padding: 0 var(--ex-espacio);
}

/* El nombre del proyecto es largo (citas literales de expediente), así que aquí
   el h1 de portada baja de tamaño y deja de ir en versalitas apretadas. */
.exo-proy-h1 {
  font-size: 1.35rem;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}

.exo-proy-texto,
.exo-proy-dato {
  margin: 1rem 0 0;
  color: var(--ex-texto);
  line-height: 1.55;
}

.exo-proy-destacado {
  margin: 1.25rem 0 0;
  color: var(--ex-negro);
  font-weight: 700;
  line-height: 1.45;
}

.exo-proy-lista {
  margin: 0.75rem 0 0;
  padding-left: 1.3rem;
  color: var(--ex-texto);
  line-height: 1.55;
}

.exo-proy-lista li + li {
  margin-top: 0.5rem;
}

/* Logos institucionales: cada uno viene con su tamaño, así que se limita la
   altura y se centran. max-width para que en móvil no desborden. */
.exo-proy-img {
  margin: 1.5rem 0 0;
  text-align: center;
}

.exo-proy-img img {
  max-width: 100%;
  max-height: 200px;
  height: auto;
}

.exo-proy-volver {
  margin: 2rem 0 0;
}

.exo-proy-volver .exo-enlace {
  color: var(--ex-verde);   /* no es página de especie, pero --esp-color no existe aquí */
}

@media (min-width: 768px) {
  .exo-proy-cuerpo {
    max-width: 720px;
    margin: 0 auto;
  }

  .exo-proy-h1 {
    font-size: 1.6rem;
  }
}

/* ==========================================================================
   Cookies · barra inferior, panel de ajustes y contenido bloqueado
   (inc/banner-cookies.php + js/cookies.js, 2026-08-10)
   ========================================================================== */

/* La barra sale del flujo y se pega abajo. z-index 1030: por encima de la
   página, pero POR DEBAJO del panel del menú de Bootstrap (1045), para que si
   alguien abre el menú con la barra puesta no se le monte encima. */
.exo-cookies {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  background: var(--ex-blanco);
  border-top: 4px solid var(--ex-verde);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
}

/* Bootstrap ya lo hace, pero se deja explícito: el atributo hidden es lo único
   que enseña y esconde la barra, y no puede fallar por una regla de display. */
.exo-cookies[hidden] {
  display: none;
}

.exo-cookies-caja {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.1rem var(--ex-espacio) 1.3rem;
  /* Con el panel abierto en un móvil bajo, el contenido no cabe: que haga
     scroll la barra y no la página de detrás. */
  max-height: 85vh;
  overflow-y: auto;
}

.exo-cookies-titulo {
  margin: 0 0 0.4rem;
  color: var(--ex-verde-oscuro);
  font-size: 1.05rem;
  font-weight: 700;
}

.exo-cookies-texto {
  margin: 0;
  color: var(--ex-texto);
  font-size: 0.92rem;
  line-height: 1.5;
}

.exo-cookies-texto a {
  color: var(--ex-verde);
}

/* --- Los tres botones ------------------------------------------------------
   Mismo tamaño, mismo color y mismo borde a propósito: la normativa pide que
   rechazar cueste lo mismo que aceptar, así que ninguno va destacado. */
.exo-cookies-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.exo-cookies-boton {
  flex: 1 1 auto;
  min-width: 8.5rem;
  padding: 0.6rem 1.1rem;
  border: 2px solid var(--ex-verde);
  border-radius: var(--ex-radio);
  background: var(--ex-blanco);
  color: var(--ex-verde);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.exo-cookies-boton:hover,
.exo-cookies-boton:focus-visible {
  background: var(--ex-verde);
  color: var(--ex-blanco);
}

/* --- El panel de categorías ------------------------------------------------ */
.exo-cookies-panel {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ex-gris-buscador);
}

.exo-cookies-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.exo-cookies-cat + .exo-cookies-cat {
  margin-top: 0.9rem;
}

.exo-cookies-cat-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.exo-cookies-cat-nombre {
  color: var(--ex-verde-oscuro);
  font-size: 0.95rem;
  font-weight: 700;
}

/* El <label> de las opcionales es pinchable: que se note. */
label.exo-cookies-cat-nombre {
  cursor: pointer;
}

.exo-cookies-siempre {
  color: var(--ex-texto);
  font-size: 0.82rem;
  font-style: italic;
}

/* Casilla grande: en móvil se pulsa con el dedo. accent-color la tiñe de verde
   en los navegadores que lo soportan; en los demás sale la casilla de siempre,
   que funciona igual. */
.exo-cookies-check {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  accent-color: var(--ex-verde);
  cursor: pointer;
}

.exo-cookies-cat-desc {
  margin: 0.25rem 0 0;
  color: var(--ex-texto);
  font-size: 0.85rem;
  line-height: 1.45;
}

@media (min-width: 768px) {
  .exo-cookies-botones {
    justify-content: flex-end;
  }

  .exo-cookies-boton {
    flex: 0 0 auto;
  }
}

/* --- Contenido bloqueado a la espera de permiso (el mapa de Contacto) ------ */
.exo-mapa {
  margin-top: 1.4rem;
  border: 1px solid var(--ex-gris-buscador);
  border-radius: var(--ex-radio);
  overflow: hidden;
  background: var(--ex-gris-buscador);
}

/* El iframe lo crea el JS al aceptar; hasta entonces aquí solo hay un aviso.
   min-height sostiene la caja en los navegadores sin aspect-ratio. */
.exo-mapa iframe {
  display: block;
  width: 100%;
  min-height: 300px;
  aspect-ratio: 4 / 3;
  border: 0;
}

.exo-mapa-aviso {
  padding: 1.6rem var(--ex-espacio);
  text-align: center;
}

.exo-mapa-aviso p {
  margin: 0 0 1rem;
  color: var(--ex-texto);
  font-size: 0.9rem;
  line-height: 1.5;
}

.exo-mapa-boton {
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--ex-verde);
  border-radius: var(--ex-radio);
  background: var(--ex-blanco);
  color: var(--ex-verde);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.exo-mapa-boton:hover,
.exo-mapa-boton:focus-visible {
  background: var(--ex-verde);
  color: var(--ex-blanco);
}

@media (min-width: 768px) {
  .exo-mapa iframe {
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
   Páginas legales (hoy solo la política de cookies)
   Una columna de texto: sin bandas de color ni portada de especie, porque no
   son páginas de producto.
   ========================================================================== */
.exo-legal-cuerpo {
  padding: 1.5rem var(--ex-espacio) 3rem;
}

.exo-legal-h1 {
  margin: 0 0 1.5rem;
  color: var(--ex-verde-oscuro);
  font-size: 1.4rem;
  font-weight: 700;
}

.exo-legal-bloque + .exo-legal-bloque {
  margin-top: 2rem;
}

.exo-legal-h2 {
  margin: 0 0 0.6rem;
  color: var(--ex-verde);
  font-size: 1.05rem;
  font-weight: 700;
}

.exo-legal-h3 {
  margin: 1.4rem 0 0.4rem;
  color: var(--ex-verde-oscuro);
  font-size: 0.98rem;
  font-weight: 700;
}

.exo-legal p {
  margin: 0 0 0.8rem;
  color: var(--ex-texto);
  line-height: 1.6;
}

.exo-legal a {
  color: var(--ex-verde);
}

.exo-legal-vacia {
  font-style: italic;
}

.exo-legal-boton {
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--ex-verde);
  border-radius: var(--ex-radio);
  background: var(--ex-blanco);
  color: var(--ex-verde);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.exo-legal-boton:hover,
.exo-legal-boton:focus-visible {
  background: var(--ex-verde);
  color: var(--ex-blanco);
}

/* Cinco columnas no caben en un móvil: hace scroll la tabla, nunca la página.
   -webkit-overflow-scrolling para el inercial de iOS antiguo. */
.exo-legal-tabla-caja {
  margin: 0.8rem 0 1.2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.exo-legal-tabla {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.exo-legal-tabla th,
.exo-legal-tabla td {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--ex-gris-buscador);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.exo-legal-tabla th {
  background: var(--ex-gris-buscador);
  color: var(--ex-verde-oscuro);
  font-weight: 700;
}

.exo-legal-tabla code {
  color: var(--ex-negro);
  font-size: 0.85rem;
  word-break: break-word;
}

@media (min-width: 768px) {
  .exo-legal-cuerpo {
    max-width: 720px;
    margin: 0 auto;
  }

  .exo-legal-h1 {
    font-size: 1.6rem;
  }
}

/* Aviso de que las hojas de instrucciones y los vídeos siguen en español.
   Solo sale en la web inglesa: en español la clave 'mue_en_es' está vacía y la
   plantilla no lo pinta (2026-08-10). */
.exo-mue-aviso-idioma {
  margin: 0 0 1rem;
  color: var(--ex-texto);
  font-size: 0.85rem;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Botones de las páginas HEREDADAS (área privada, endpoints)

   Esas páginas escriben los botones como `class="btn"`, `btn right` o
   `btn btn-default`: en Bootstrap 3 y 4 eso ya pintaba un botón, pero en el 5
   —el que carga la web nueva— `.btn` sola no da color y `.btn-default` ni
   existe. Resultado: «Acceder» y «Enviar» salían como texto suelto
   (lo vio Ana el 11-08-2026 en area_clientes.php).

   Se les da el verde corporativo SIN tocar las páginas, y se respetan los
   botones que sí traen variante propia de Bootstrap (btn-primary, btn-danger…),
   que deben seguir con su color.
   -------------------------------------------------------------------------- */

.btn:not([class*="btn-primary"]):not([class*="btn-danger"]):not([class*="btn-success"]):not([class*="btn-warning"]):not([class*="btn-info"]):not([class*="btn-secondary"]):not([class*="btn-outline"]):not(.btn-close),
.btn-default {
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: var(--ex-radio);
  background: var(--ex-verde);
  color: var(--ex-blanco);
  font-weight: 700;
  text-decoration: none;
}

.btn:not([class*="btn-primary"]):not([class*="btn-danger"]):not([class*="btn-success"]):not([class*="btn-warning"]):not([class*="btn-info"]):not([class*="btn-secondary"]):not([class*="btn-outline"]):not(.btn-close):hover,
.btn-default:hover {
  background: var(--ex-verde-oscuro);
  color: var(--ex-blanco);
}

/* Utilidades de Bootstrap 3/4 que esas páginas siguen usando y el 5 ya no trae */
.pull-right { float: right; }
.pull-left  { float: left; }
.mr-2       { margin-right: 0.5rem; }

/* --- Campos de las páginas heredadas ---------------------------------------

   Los inputs salían con el gris oscuro y las esquinas casi rectas de Bootstrap
   y no pegaban con la web nueva (lo vio Ana el 11-08-2026). Se les da el mismo
   aspecto que al buscador del sitio: fondo gris claro, sin borde y 6px de radio.

   Va colgado de .exo-heredada (la clase que inc/heredado-cabecera.php pone en el
   body) para no tocar nada de la web nueva, y cubre también los campos sueltos
   que no llevan la clase .form-control, como el email de «He olvidado la
   contraseña». */
/* `input:not([type])`: los criterios que añade a mano el JS de «Búsqueda
   avanzada» salen como <input id="filter_3" name="filter_3">, SIN atributo
   type, así que no los cogía `input[type="text"]` y se quedaban con el borde
   gris del navegador mientras los de al lado iban ya vestidos (17-08-2026). */
.exo-heredada .form-control,
.exo-heredada .form-select,
.exo-heredada input:not([type]),
.exo-heredada input[type="text"],
.exo-heredada input[type="email"],
.exo-heredada input[type="password"],
.exo-heredada input[type="search"],
.exo-heredada input[type="number"],
.exo-heredada input[type="date"],
.exo-heredada select,
.exo-heredada textarea {
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--ex-gris-buscador);
  color: var(--ex-negro);
  font-size: 1rem;
}

.exo-heredada .form-control:focus,
.exo-heredada input:focus,
.exo-heredada select:focus,
.exo-heredada textarea:focus {
  outline: 2px solid var(--ex-verde);
  outline-offset: 0;
  box-shadow: none;
  background: var(--ex-gris-buscador);
}

/* El original repite el rótulo de cada campo: un <h3> enorme encima del <label>
   que dice lo mismo («Usuario» / «Usuario»). Se esconde el h3 y se queda el
   label, que es el que va unido al campo. Solo afecta a estas páginas. */
.exo-heredada form h3 {
  display: none;
}

.exo-heredada label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 700;
}

/* --- Migas de pan de las páginas heredadas ---------------------------------

   Lo que vio Ana el 12-08-2026: salían como una lista de puntos en vertical
   («Inicio · · Área Cliente · · Listado Diagnósticos»), en vez de en una línea.

   Dos motivos, los dos del HTML viejo, que NO se toca (php_fm/ está fuera del
   encargo: micro_list.php, micro_list_exp.php, vac_list.php y datos.php):

     1. son un <ul class="list list-legend"> con <li class="list-item">, clases
        del tema antiguo que la web nueva no viste, así que quedaban como una
        lista con viñetas;
     2. los separadores son <i class="fas fa-angle-right">, iconos de Font
        Awesome, y esta web NO carga Font Awesome: los <li> quedaban vacíos y
        solo se veía su viñeta.

   Se arregla aquí: la lista pasa a línea y al icono vacío se le da el símbolo
   por CSS, así no depende de ninguna fuente externa. */
.exo-heredada .list-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  color: var(--ex-texto);
  font-size: 0.9rem;
}

.exo-heredada .list-legend .list-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.exo-heredada .list-legend a {
  color: var(--ex-verde);
  text-decoration: none;
}

.exo-heredada .list-legend a:hover,
.exo-heredada .list-legend a:focus-visible {
  text-decoration: underline;
}

/* La última, la de la página en la que estás: ni enlace ni color de enlace. */
.exo-heredada .list-legend .active {
  color: var(--ex-texto);
  font-weight: 600;
}

/* El separador. Se pinta el «›» aquí porque el <i> viene vacío. */
.exo-heredada .list-legend .fa-angle-right::before {
  content: "\203A";
  color: #999999;
  font-style: normal;
  font-weight: 700;
}

/* --- Paginación de las páginas heredadas -----------------------------------

   Mismo caso que las migas, y lo vio Ana el 17-08-2026: «Primera Previa
   Siguiente Última» salían pegadas unas a otras.

   El HTML es <ul class="pagination justify-content-center"> con <li> PELADOS,
   sin las clases .page-item / .page-link que espera Bootstrap, así que su CSS
   no los toca. Además el rótulo («Página 1 de 88 (1759 encontradas)») va suelto
   dentro del propio <ul>, no en un <li>, y los <li> SIN enlace son los que están
   deshabilitados —en la página 1, «Primera» y «Previa»—.

   Aquí se les da aire y forma de botón sin tocar php_fm/. Afecta a
   micro_list.php y vac_list.php, que son las que llevan los <li> pelados.

   OJO con micro_list_exp.php: ESA sí está bien escrita, con .page-item y
   .page-link, y Bootstrap ya la pinta. Por eso los <li> se seleccionan con
   :not(.page-item) — si no, se le sumaría un segundo borde y un segundo padding
   a los suyos. */
.exo-heredada .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  color: var(--ex-texto);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Cada botón. El color gris es el de los deshabilitados: los que llevan enlace
   lo pisan con la regla de abajo. */
.exo-heredada .pagination li:not(.page-item) {
  margin: 0;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--ex-gris-buscador);
  border-radius: 6px;
  color: #999999;
  list-style: none;
}

/* El enlace ocupa toda la caja —de ahí el margen negativo— para que se pueda
   pulsar el botón entero y no solo la palabra. */
.exo-heredada .pagination li:not(.page-item) a {
  display: block;
  margin: -0.35rem -0.8rem;
  padding: 0.35rem 0.8rem;
  color: var(--ex-verde);
  text-decoration: none;
}

.exo-heredada .pagination li:not(.page-item) a:hover,
.exo-heredada .pagination li:not(.page-item) a:focus-visible {
  background: var(--ex-verde);
  border-radius: 6px;
  color: var(--ex-blanco);
}

/* --- «Búsqueda avanzada» de las páginas heredadas --------------------------

   El buscador por criterios de micro_list_exp.php (lo vio Ana el 17-08-2026).
   Estaba dentro de un <div class="alert alert-primary">, o sea la caja AZUL de
   avisos de Bootstrap, con los campos pegados unos a otros y los dos botones en
   ROJO sobre blanco. Tres arreglos, ninguno tocando php_fm/:

     1. la caja azul pasa a una caja neutra, del color de la web;
     2. cada criterio se reparte en línea y con aire;
     3. los botones se visten como los de la web nueva.

   Lo del rojo hay que pisarlo con !important y no hay otra: viene escrito en el
   propio HTML (style="color: #ff5454; background-color: white;…"), y un estilo
   en línea gana a cualquier hoja de estilos. */
.exo-heredada .alert-primary {
  padding: 1.25rem;
  border: 1px solid var(--ex-gris-buscador);
  border-radius: var(--ex-radio);
  background: var(--ex-blanco);
  color: var(--ex-texto);
}

.exo-heredada .alert-primary h3 {
  margin: 0 0 1rem;
  color: var(--ex-verde-oscuro);
  font-size: 1.15rem;
  font-weight: 700;
}

/* Cada criterio es un .form-group: en línea, y que baje solo si no cabe. */
.exo-heredada .alert-primary #div_fields > .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

/* Los campos no se estiran a todo lo ancho, pero tampoco se quedan en un palmo. */
.exo-heredada .alert-primary select,
.exo-heredada .alert-primary input[type="text"] {
  width: auto;
  min-width: 11rem;
}

/* Los dos botones. De verde ya los viste la regla general de botones heredados
   de más arriba (la del 11-08-2026), así que aquí NO se repite eso; solo se
   hacen las dos cosas que aquella no puede:

     - pisar el rojo y el tamaño escritos a mano en el HTML (`style="color:
       #ff5454; background-color: white; font-size: 0.95em; padding: 5px"`), y
       eso obliga a !important: un estilo en línea gana a cualquier hoja;
     - distinguir el principal del secundario. «Filtrar» es el que hace la
       búsqueda y «Añade otro criterio» solo suma una fila, pero en el HTML son
       un <button> y un <div> con el mismo aspecto.

   El !important del borde es por lo mismo: la regla general de botones lleva
   nueve :not() encadenados y pesa más que este selector. */
.exo-heredada .alert-primary .btn-primary,
.exo-heredada .alert-primary .btn-default {
  display: inline-block;
  padding: 0.55rem 1.1rem !important;
  border-radius: var(--ex-radio);
  background: var(--ex-verde) !important;
  color: var(--ex-blanco) !important;
  font-family: inherit;
  font-size: 0.95rem !important;
  font-weight: 700;
  cursor: pointer;
}

.exo-heredada .alert-primary .btn-default {
  border: 2px solid var(--ex-verde) !important;
  background: var(--ex-blanco) !important;
  color: var(--ex-verde) !important;
}

/* La papelera que quita un criterio. Es otro icono de Font Awesome, que esta
   web no carga: SIN ESTO NO SE VE NADA y no hay forma de borrar un criterio ya
   añadido. Se le da el aspa por CSS, como al «›» de las migas. */
.exo-heredada .fa-trash-alt {
  cursor: pointer;
  color: #999999;
  font-style: normal;
}

.exo-heredada .fa-trash-alt::before {
  content: "\2715";
  font-size: 1rem;
  font-weight: 700;
}

.exo-heredada .fa-trash-alt:hover {
  color: var(--ex-verde);
}

/* --- La calculadora de diagnóstico -----------------------------------------

   php_fm/calculadora.php. Lo vio Ana el 17-08-2026: los campos salían pegados
   unos a otros, a cuatro píxeles. En el HTML van uno detrás de otro sin nada en
   medio —tres <select> seguidos y luego <input><button><button>—, así que la
   separación tiene que venir de aquí.

   Los tres selects van uno debajo de otro y con el MISMO ancho. Si se dejan en
   línea no caben —la columna es media pantalla— y, sobre todo, cada uno mide
   según lo que le mete el JS: «Porcino» sale estrecho y el de grupos el doble
   de ancho, y eso se ve desparejo. Apilados e iguales se leen como los tres
   pasos que son. */
.exo-heredada #calculadora select {
  display: block;
  width: 100%;
  max-width: 24rem;
  margin: 0 0 0.6rem;
}

/* Y mientras no toque enseñarlos, que no dejen hueco.
   Los oculta la propia página con `visibility:hidden`, que reserva el sitio: en
   línea se notaba poco, pero apilados dejaban tres filas en blanco entre el
   primer select y el punto 2. Se mira el atributo style en sus dos escrituras
   porque el HTML lo trae pegado (`visibility:hidden;`) y el JS, al volver a
   ocultarlo, lo escribe con espacio (`calculadora.php:96-103`). En cuanto el JS
   lo pone en «visible», este selector deja de casar y el select reaparece. */
.exo-heredada #calculadora select[style*="visibility:hidden"],
.exo-heredada #calculadora select[style*="visibility: hidden"] {
  display: none;
}

.exo-heredada #calculadora #cantidad {
  max-width: 10rem;
  margin: 0 0.6rem 0.6rem 0;
}

.exo-heredada #calculadora .btn {
  margin: 0 0.5rem 0.6rem 0;
  vertical-align: top;
}

/* Los dos botones venían con el azul y el rojo de Bootstrap, que no son colores
   de esta web (lo pidió cambiar Ana el 17-08-2026). Se pasan a los de la casa:
   «añadir» al verde principal y «borrar» al rojo de la paleta —el de animales de
   compañía, #be1823, que es el único rojo lo bastante oscuro para leerse en
   blanco; los otros dos son tonos claros—.

   Van con !important porque Bootstrap 5 pinta el fondo a través de sus propias
   variables (`--bs-btn-bg`) y las reescribe en cada estado. Y aquí, a
   diferencia del resto de páginas heredadas, sí se tocan `btn-primary` y
   `btn-danger`: la regla general los respeta a propósito, así que esto solo vale
   dentro de la calculadora. */
.exo-heredada #calculadora .btn-primary {
  border: 0;
  border-radius: var(--ex-radio);
  background: var(--ex-verde) !important;
  color: var(--ex-blanco) !important;
  font-weight: 700;
}

.exo-heredada #calculadora .btn-primary:hover,
.exo-heredada #calculadora .btn-primary:focus-visible {
  background: var(--ex-verde-oscuro) !important;
}

.exo-heredada #calculadora .btn-danger {
  border: 0;
  border-radius: var(--ex-radio);
  background: var(--ex-compania) !important;
  color: var(--ex-blanco) !important;
  font-weight: 700;
}

/* Sin token para el rojo oscurecido: se apaga el mismo color en vez de inventar
   uno nuevo. */
.exo-heredada #calculadora .btn-danger:hover,
.exo-heredada #calculadora .btn-danger:focus-visible {
  filter: brightness(0.88);
}

/* --------------------------------------------------------------------------
   Estadísticas (menú OTROS SERVICIOS)

   Página recuperada a petición de Exopol el 12-08-2026. Se apoya en la portada
   de sección y en el ancho de lectura de las demás páginas generales; lo propio
   es la rejilla de los libros y el bloque del mapa.
   -------------------------------------------------------------------------- */

.exo-est-cuerpo {
  padding: 0 var(--ex-espacio);
}

.exo-est-intro {
  color: var(--ex-texto);
  font-size: 1.05rem;
  line-height: 1.5;
}

.exo-est-ventajas {
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}

.exo-est-ventajas li {
  margin-bottom: 0.9rem;
  padding-left: 1rem;
  border-left: 3px solid var(--ex-verde);
  line-height: 1.5;
}

.exo-est-contacto {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.exo-est-bloque {
  margin-top: 2.25rem;
}

.exo-est-titulo {
  margin: 0 0 0.75rem;
  color: var(--ex-negro);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.exo-est-bloque p {
  line-height: 1.5;
}

.exo-est-libros-pie {
  margin-bottom: 1rem;
  font-weight: 600;
}

/* Las portadas de los libros. Dos por fila en móvil; en PC caben las cuatro. */
.exo-est-libros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exo-est-libros a {
  display: block;
  color: var(--ex-negro);
  text-align: center;
  text-decoration: none;
}

.exo-est-libros img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ex-gris-buscador);
  border-radius: var(--ex-radio);
}

.exo-est-libros span {
  display: block;
  margin-top: 0.5rem;
  font-weight: 600;
}

.exo-est-libros a:hover span,
.exo-est-libros a:focus-visible span {
  color: var(--ex-verde);
  text-decoration: underline;
}

.exo-est-mapa-img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 1rem;
}

/* Enlace al mapa de calor, que vive en php_fm/ y no se rehace. */
.exo-est-mapa-cta {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: var(--ex-radio);
  background: var(--ex-verde);
  color: var(--ex-blanco);
  font-weight: 700;
  text-decoration: none;
}

.exo-est-mapa-cta:hover,
.exo-est-mapa-cta:focus-visible {
  background: var(--ex-verde-oscuro);
  color: var(--ex-blanco);
}

@media (min-width: 992px) {

  .exo-est-cuerpo {
    max-width: 720px;   /* mismo ancho de lectura que .exo-avg-cuerpo */
    margin: 0 auto;
  }

  .exo-est-ventajas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .exo-est-ventajas li {
    margin-bottom: 0;
  }

  .exo-est-libros {
    grid-template-columns: repeat(4, 1fr);
  }

  /* El mapa, a la izquierda del texto que lo explica. */
  .exo-est-mapa-img {
    float: left;
    width: 40%;
    margin: 0 1.5rem 1rem 0;
  }

  .exo-est-mapa::after {
    display: table;
    clear: both;
    content: "";
  }
}

/* --------------------------------------------------------------------------
   Franja de menú apretada (todo PC)

   Desde el 11-08-2026 la barra lleva dos cosas más: el acceso a ExopolOnline y
   el tercer idioma. Con el espaciado anterior ya no cabía todo y los idiomas
   caían a una segunda línea (o peor, el botón verde se salía por la derecha).

   OJO, esto NO se puede resolver por ancho de pantalla: la columna del menú
   está fijada a 1080px para cuadrar con el pie, así que una pantalla más ancha
   no da ni un píxel más de sitio. Por eso el ajuste vale para todo PC y no
   para una horquilla.

   Va al FINAL de la hoja a propósito: tiene la misma especificidad que el
   bloque de PC de más arriba, así que solo gana si se lee después.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

  /* 12-08-2026 · segundo apretón, por la entrada OTROS SERVICIOS. Medido en
     Chrome a 1366px: la barra da 1048px y el contenido pasó a ocupar 1106, así
     que los idiomas se caían a una segunda línea. Bajar de 0.88 a 0.80 rem
     devuelve unos 85px y todo vuelve a caber en una línea (Ana, 12-08-2026).

     Aviso para el próximo que toque esto: el margen se ha vuelto a agotar. Si
     Exopol añade otro servicio al desplegable no pasa nada (eso crece hacia
     abajo), pero si añade otra entrada de primer nivel ya no cabe, y entonces
     toca sacar los idiomas y el candado de esta fila. */
  .exo-menu-nivel1 {
    padding: 0.8rem 0.45rem;
    font-size: 0.78rem;
  }

  .exo-menu-cta a {
    padding: 0.5rem 0.6rem;
    font-size: 0.78rem;
  }

  .exo-menu-online a {
    padding: 0.5rem 0.4rem;
    font-size: 0.78rem;
  }

  .exo-menu-idiomas {
    padding: 0.85rem 0 0.85rem 0.4rem;
    gap: 0.3rem;
    font-size: 0.82rem;
  }
}

/* 13-08-2026 · el FRANCÉS no cabía, y al medirlo se vio que EL INGLÉS TAMPOCO.
   Sus rótulos son más largos que los españoles («AUTOGENOUS VACCINES», «AUTRES
   SERVICES», «Envoi d’échantillons»…) y el selector de idioma caía a una segunda
   línea ya a 1366px, en los dos idiomas. Lo del inglés venía de antes y no lo
   había visto nadie: el apretón del 12-08 se midió solo en español.

   Acortar «QUI SOMMES-NOUS» a «À PROPOS» ayudó pero no bastó.

   Se aprietan SOLO el inglés y el francés: el español ya estaba medido y se deja
   como está. Ana pidió expresamente NO sacar el selector de idioma de esta fila,
   así que el sitio se saca de la letra y del hueco. */
@media (min-width: 992px) {

  html[lang="en"] .exo-menu-nivel1,
  html[lang="fr"] .exo-menu-nivel1 {
    padding: 0.8rem 0.3rem;
    font-size: 0.72rem;
  }

  html[lang="en"] .exo-menu-cta a,
  html[lang="fr"] .exo-menu-cta a {
    padding: 0.5rem 0.5rem;
    font-size: 0.74rem;
  }

  html[lang="en"] .exo-menu-idiomas,
  html[lang="fr"] .exo-menu-idiomas {
    padding-left: 0.25rem;
    font-size: 0.78rem;
  }
}

/* Y en el tramo justo (992–1099px), donde la columna ni siquiera llega a 1080px,
   los dos necesitan un punto más: a 992 el selector todavía se caía. */
@media (min-width: 992px) and (max-width: 1099px) {

  html[lang="en"] .exo-menu-nivel1,
  html[lang="fr"] .exo-menu-nivel1 {
    padding: 0.8rem 0.25rem;
    font-size: 0.69rem;
  }

  html[lang="en"] .exo-menu-lista > li.exo-menu-cta .exo-menu-cta-boton,
  html[lang="en"] .exo-menu-online a,
  html[lang="fr"] .exo-menu-lista > li.exo-menu-cta .exo-menu-cta-boton,
  html[lang="fr"] .exo-menu-online a {
    padding: 0.5rem 0.45rem;
    font-size: 0.72rem;
  }

  html[lang="en"] .exo-menu-idiomas,
  html[lang="fr"] .exo-menu-idiomas {
    padding-left: 0.2rem;
    font-size: 0.74rem;
  }
}

/* Pantallas justas (992–1099px): ahí la columna del menú no llega a los 1080px
   y aun con el ajuste de arriba faltaban 12px, así que se aprieta un punto más.
   Medido en Chrome a 1024px el 12-08-2026.

   02-09-2026 · el apretón de arriba se midió A 1024px, y a 1024 cabe; POR DEBAJO
   no se miró. En el QA cross-navegador se vio que entre 992 y 1015px el selector
   ES · EN · FR se caía a una segunda línea y la franja pasaba a doble altura.
   Inglés y francés no fallaban porque a ellos (bloque de arriba) sí se les
   apretó `.exo-menu-idiomas`; al español no. Se le da el mismo trato. */
@media (min-width: 992px) and (max-width: 1099px) {

  /* 02-09-2026 · valores igualados a los de EN y FR en este mismo tramo. Solo
     apretar los idiomas no bastaba: a 992–1008px seguía cayéndose. */
  .exo-menu-nivel1 {
    padding: 0.8rem 0.25rem;
    font-size: 0.69rem;
  }

  .exo-menu-lista > li.exo-menu-cta .exo-menu-cta-boton,
  .exo-menu-online a {
    padding: 0.5rem 0.45rem;
    font-size: 0.72rem;
  }

  .exo-menu-idiomas {
    padding-left: 0.2rem;
    font-size: 0.74rem;
  }
}