/* ==========================================================================
   MI TEMA — Footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   FOOTER BASE
   -------------------------------------------------------------------------- */

.mt-footer {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   SECCIÓN PRINCIPAL
   -------------------------------------------------------------------------- */

.mt-footer__main {
  background-color: var(--mt-color-bg-light);
  padding-block: var(--mt-space-10);
  border-top: var(--mt-border);
}

/* --------------------------------------------------------------------------
   GRID — base móvil: 1 columna
   -------------------------------------------------------------------------- */

.mt-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mt-space-6);
  align-items: start;
}

/* --------------------------------------------------------------------------
   COLUMNAS
   -------------------------------------------------------------------------- */

.mt-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-3);
}

/* --------------------------------------------------------------------------
   COLUMNA BRAND — centrada en móvil
   -------------------------------------------------------------------------- */

.mt-footer__col--brand {
  align-items: center;
  text-align: center;
  gap: var(--mt-space-5);
}

.mt-footer__logo-link {
  display: inline-flex;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.mt-footer__logo-link:hover,
.mt-footer__logo-link:focus-visible {
  opacity: 0.85;
}

.mt-footer__logo {
  display: block;
  max-width: 180px;
  height: auto;
  color: var(--mt-color-primary-dark);
}

.mt-footer__tagline {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  line-height: var(--mt-line-height-relaxed);
  max-width: 40ch;
}

/* --------------------------------------------------------------------------
   ACCORDION MÓVIL — título como botón (columnas 2-5)
   -------------------------------------------------------------------------- */

.mt-footer__col-title {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-lg);
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-primary-dark);
  text-transform: uppercase;
  letter-spacing: var(--mt-letter-spacing-wider);
  line-height: var(--mt-line-height-tight);
  margin: 0;
}

/* El botón lo crea main.js y solo por debajo de 768px; va dentro del <h2>, así
   que hereda de él familia, tamaño y color en lugar de repetirlos. */
.mt-footer__col-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mt-space-2);
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--mt-color-border);
  padding-block: var(--mt-space-2);
  cursor: pointer;
  transition: var(--mt-transition-colors);
}

.mt-footer__col-btn:hover,
.mt-footer__col-btn:focus-visible {
  color: var(--mt-color-primary-dark);
}

.mt-footer__col-icon {
  display: inline-flex;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.mt-footer__col.is-open .mt-footer__col-icon {
  transform: rotate(180deg);
}

/* El contenido solo se pliega si el JS ha montado el acordeón (le pone la clase
   --collapsible). Sin JavaScript no hay ninguna regla que lo oculte, y el pie
   del móvil enseña todos los enlaces.

   Se usa grid-template-rows y no max-height: el valor fijo de 400px recortaba
   una columna de seis enlaces cuando las etiquetas pasaban a dos líneas en
   castellano o inglés. Con 1fr no hace falta adivinar ninguna altura. */
.mt-footer__col--collapsible .mt-footer__col-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  /* Plegado, el contenido no solo no se ve: tampoco existe para el teclado ni para
     el lector de pantalla. Sin esto, los enlaces de una columna cerrada seguían en
     el orden de Tab —el foco caía en enlaces invisibles— y el lector los leía con
     el botón diciendo «contraído» (auditoría de accesibilidad del 14-10, 🟡-1).
     La visibilidad cambia al final del plegado y al principio del desplegado, para
     no cortar la animación. */
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, visibility 0s linear 0.3s;
}

.mt-footer__col--collapsible .mt-footer__col-content > * {
  min-height: 0;
}

.mt-footer__col--collapsible.is-open .mt-footer__col-content {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .mt-footer__col--collapsible .mt-footer__col-content {
    transition: none;
  }
}

/* Los acordeones del móvil, juntos (revisión de móvil del 14-10). Cada uno sumaba el
   `gap` de la rejilla (24 px), el de su columna (12 px) y un botón de solo 8 px de relleno:
   unos 90 px por título y casi una pantalla para cuatro palabras. Ahora son una lista de
   botones de 48 px separados por su línea, y el respiro va dentro del contenido al
   abrirlo. El JavaScript solo monta el acordeón por debajo de 768 px; esto también. */
@media (max-width: 767.98px) {
  .mt-footer__grid {
    gap: 0;
  }

  .mt-footer__col--brand {
    margin-bottom: var(--mt-space-6);
  }

  .mt-footer__col--collapsible {
    gap: 0;
  }

  .mt-footer__col-btn {
    min-height: 48px;
    padding-block: var(--mt-space-3);
  }

  .mt-footer__col--collapsible .mt-footer__col-content > * {
    padding-block: var(--mt-space-3) var(--mt-space-4);
  }
}

/* --------------------------------------------------------------------------
   LISTAS DE NAVEGACIÓN DEL FOOTER
   -------------------------------------------------------------------------- */

.mt-footer__nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-2);
  padding-top: var(--mt-space-3);
}

.mt-footer__nav-list a {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-body);
  text-decoration: none;
  transition: var(--mt-transition-colors);
  display: inline-block;
}

.mt-footer__nav-list a:hover,
.mt-footer__nav-list a:focus-visible {
  color: var(--mt-color-primary-dark);
}

.mt-footer__nav-list--social a {
  font-weight: var(--mt-font-weight-medium);
}

/* --------------------------------------------------------------------------
   BARRA DE PATROCINADORES
   -------------------------------------------------------------------------- */

.mt-footer__sponsors {
  background-color: var(--mt-color-white);
  padding-block: var(--mt-space-8);
  border-top: 1px solid var(--mt-color-primary);
}

.mt-footer__sponsors .mt-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mt-space-4);
  text-align: center;
}

.mt-footer__sponsors-label {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--mt-letter-spacing-wide);
  white-space: nowrap;
  max-width: none;
}

.mt-footer__sponsors-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mt-space-4);
  flex-wrap: wrap;
}

.mt-footer__sponsor-placeholder {
  width: 120px;
  height: 48px;
  background-color: var(--mt-color-bg-light);
  border: var(--mt-border);
  border-radius: var(--mt-radius-md);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   SELECTOR DE IDIOMAS WPML
   -------------------------------------------------------------------------- */

.mt-footer__lang-bar {
  padding-block: var(--mt-space-6);
  border-top: var(--mt-border);
  text-align: center;
}

.mt-footer__lang-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mt-space-4);
  flex-wrap: wrap;
}

.mt-footer__lang-group {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
  flex-wrap: wrap;
}

.mt-footer__lang-bar .mt-header__lang-item {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-medium);
  color: var(--mt-color-text-secondary);
  text-decoration: none;
  letter-spacing: var(--mt-letter-spacing-wider);
  transition: var(--mt-transition-colors);
}

.mt-footer__lang-bar .mt-header__lang-item:hover,
.mt-footer__lang-bar .mt-header__lang-item:focus-visible,
.mt-footer__lang-bar .mt-header__lang-item.is-active {
  color: var(--mt-color-primary-dark);
}

.mt-footer__lang-bar .mt-header__lang-sep {
  color: var(--mt-color-text-secondary);
  font-size: var(--mt-font-size-sm);
  user-select: none;
  pointer-events: none;
}

.mt-footer__lang-flag {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   FRANJA COPYRIGHT
   -------------------------------------------------------------------------- */

.mt-footer__copyright {
  background-color: var(--mt-color-primary-dark);
  padding-block: var(--mt-space-4);
}

.mt-footer__copyright p {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-white);
  text-align: center;
  max-width: none;
}

/* --------------------------------------------------------------------------
   BOTÓN ALTO CONTRASTE — junto al selector de idiomas
   -------------------------------------------------------------------------- */

.mt-footer__contrast-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-space-1);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-primary-dark);
  background: transparent;
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-pill);
  padding: 6px var(--mt-space-3);
  line-height: var(--mt-line-height-tight);
  cursor: pointer;
  transition: var(--mt-transition-colors);
}

.mt-footer__contrast-btn:hover,
.mt-footer__contrast-btn[aria-pressed="true"] {
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
  border-color: var(--mt-color-primary-dark);
}

.mt-footer__contrast-btn:focus-visible {
  outline: 2px solid var(--mt-color-primary-dark);
  outline-offset: 3px;
}

.mt-footer__contrast-btn svg {
  flex-shrink: 0;
}

/* Ocultar selector de idiomas automático de WPML */
.wpml-ls,
.wpml-ls-legacy-list-horizontal,
.icl_lang_sel_widget {
  display: none !important;
}

/* --------------------------------------------------------------------------
   768px — Tablet: 2 columnas (brand | menús 2x2)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

  .mt-footer__main {
    padding-block: var(--mt-space-12);
  }

  .mt-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--mt-space-8);
  }

  /* Brand ocupa 2 filas */
  .mt-footer__col--brand {
    grid-column: 1;
    grid-row: 1 / 3;
    align-items: flex-start;
    text-align: left;
  }

  .mt-footer__logo {
    max-width: 200px;
  }

  .mt-footer__tagline {
    max-width: 30ch;
  }

  /* A partir de aquí el JS desmonta el acordeón y quita el botón: no hace falta
     neutralizarlo con pointer-events, que es lo que antes dejaba un
     <button> enfocable con el tabulador y sin ningún efecto. */

  .mt-footer__nav-list {
    padding-top: var(--mt-space-2);
  }

  /* Patrocinadores en fila */
  .mt-footer__sponsors .mt-container {
    flex-direction: row;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   1024px — Desktop: 5 columnas
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

  .mt-footer__main {
    padding-block: var(--mt-space-16);
  }

  .mt-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--mt-space-8);
  }

  .mt-footer__col--brand {
    grid-column: auto;
    grid-row: auto;
  }
}


/* ==========================================================================
   PREFOOTER — BOLETÍN
   Va en todas las páginas, justo antes del pie.

   El formulario ya NO es una maqueta ni lo pinta el tema: lo pinta el conector
   `plugin-formularios` con [ldf_form key="newsletter"], que es la misma fuente
   para los dos sitios. Aquí solo está la franja y los estilos PUENTE que el
   formulario necesita para leerse sobre el azul de marca.

   ⚠️ Este bloque debe ser IDÉNTICO al del otro tema (tema-daurada ↔
   mi-tema). Si se toca en uno, se toca en los dos.
   ========================================================================== */

/* Azul medio de la escala de marca, no negro. Texto blanco sólido encima: 5,06:1.
   ⚠️ Nada de texto blanco con opacidad en este fondo: al 85 % el contraste se va
   por debajo de AA. Si hace falta jerarquía, se hace con el tamaño y el peso, no con el alfa. */
/* El mismo ritmo que cualquier otra sección: iba a 48/64 px y el límite con
   la última franja quedaba en 144 en vez de 160, que es lo que hacen todas las
   demás. Es el último cambio de banda de la página y se tiene que leer igual. */
.mt-butlleti {
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
  padding-block: var(--mt-section-space);
}


.mt-butlleti__inner {
  display: grid;
  gap: var(--mt-space-8);
}

/* A partir de tablet, texto a la izquierda y formulario a la derecha. Por debajo
   se apilan: dos columnas en 390 px dejarían el campo inutilizable. */
@media (min-width: 900px) {
  .mt-butlleti__inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--mt-space-12);
  }
}

.mt-butlleti__title {
  margin: 0 0 var(--mt-space-3);
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-2xl);
  font-weight: var(--mt-font-weight-regular);
  line-height: var(--mt-line-height-tight);
  letter-spacing: var(--mt-letter-spacing-widest);
  text-transform: uppercase;
  color: var(--mt-color-white);
}

.mt-butlleti__intro {
  margin: 0;
  max-width: 46ch;
  font-size: var(--mt-font-size-base);
  line-height: var(--mt-line-height-relaxed);
  color: var(--mt-color-white);
}

/* Contenedor del formulario del conector. `min-width: 0` porque un ítem de
   grid no se expande más allá de su columna solo si se le quita el tamaño
   mínimo automático; sin esto, un texto largo dentro del formulario
   ensancharía la columna y descuadraría las dos mitades. */
.mt-butlleti__form {
  min-width: 0;
}


/* --------------------------------------------------------------------------
   PUENTE CON EL CONECTOR DE FORMULARIOS

   El conector no lleva paleta propia: consume las mismas variables --mt-*
   de este tema. Pero las que elige son las de FONDO CLARO —etiquetas en
   text-primary, errores en rojo, enlaces en turquesa—, y ninguna de las tres se
   lee sobre el azul de esta franja. Aquí se reescriben SOLO los colores
   que el fondo cambia, acotados a `.mt-butlleti .ldf-form` para que el mismo
   formulario en una página de fondo claro siga tal como el conector lo quiere.

   Los selectores son los que el conector genera de verdad (leídos en
   includes/class-ldf-shortcode.php, no supuestos): `.ldf-form`, `.ldf-field`,
   `.ldf-required`, `.ldf-consent`, `.ldf-error`, `.ldf-form__status` y un
   `<button type="submit">` con las clases `.mt-btn .mt-btn--primary`.

   📌 La hoja del conector se encola cuando se renderiza el shortcode, o sea en el
   pie y DESPUÉS de este archivo. Por eso cada regla de aquí gana por
   ESPECIFICIDAD y no por orden: si algún día se rebaja un selector, la regla
   dejará de surtir efecto en silencio.
   -------------------------------------------------------------------------- */

.mt-butlleti .ldf-form {
  /* El conector limita el formulario a 640 px pensando en una página de ancho
     completo. Aquí ya vive dentro de una columna: el tamaño lo manda la columna. */
  max-width: none;
  color: var(--mt-color-white);
}

/* Etiquetas, asterisco de obligatorio y mensajes: blanco sólido, nunca blanco con
   alfa. El rojo de error del conector (#DC2626) sobre este azul se queda
   en 1,05:1 —prácticamente invisible—, y el verde de éxito no va mucho mejor. Por
   eso aquí todos los estados son blancos y la jerarquía la hace el PESO.
   Que éxito y error se distingan por el texto y no por el color no es una renuncia:
   es lo que pide WCAG 1.4.1, y el mensaje ya se anuncia solo (role="status").
   El campo erróneo, además, queda marcado con aria-invalid, que tampoco depende
   del color. */
.mt-butlleti .ldf-form .ldf-field label,
.mt-butlleti .ldf-form .ldf-required,
.mt-butlleti .ldf-form .ldf-field__hint,
.mt-butlleti .ldf-form .ldf-consent,
.mt-butlleti .ldf-form .ldf-error,
.mt-butlleti .ldf-form .ldf-form__status,
.mt-butlleti .ldf-form .ldf-form__status[data-state="success"],
.mt-butlleti .ldf-form .ldf-form__status[data-state="error"] {
  color: var(--mt-color-white);
}

.mt-butlleti .ldf-form .ldf-error,
.mt-butlleti .ldf-form .ldf-form__status[data-state] {
  font-weight: var(--mt-font-weight-semibold);
}

/* ⚠️ **Campo BLANCO sólido.** En la maqueta de esta misma franja el campo tuvo
   el fondo blanco al 8 % y el borde al 40 %, y aquello incumplía tres cosas
   a la vez —medidas, no estimadas—:

     texto de guía sobre el campo   2,95:1  ❌ (hace falta 4,5)
     texto escrito sobre el campo   4,36:1  ❌ (hace falta 4,5)
     borde del campo sobre el fondo 2,22:1  ❌ (hace falta 3,0, criterio 1.4.11)

   La causa era la misma en las tres: un blanco translúcido aclara el azul de
   debajo y deja el campo a medio camino, demasiado claro para el texto blanco y demasiado
   oscuro para nada más. Con el campo blanco y el texto oscuro, las mismas tres pasan
   a 5,74, 11,60 y 5,06.

   El borde no desaparece pero es del mismo blanco que el campo: el blanco contra
   el azul de la sección da 5,06:1, muy por encima del 3:1 que pide el
   criterio para el límite de un campo de formulario.

   La lista de tipos es la de los campos que el formulario `newsletter` pinta hoy
   (email + text) más `tel`, que comparte forma. Si algún día el catálogo del
   conector añade un `textarea` o un `select`, esta lista tiene que
   crecer: si no, el campo nuevo saldrá con los colores de fondo claro. */
.mt-butlleti .ldf-form .ldf-field input[type="text"],
.mt-butlleti .ldf-form .ldf-field input[type="email"],
.mt-butlleti .ldf-form .ldf-field input[type="tel"] {
  min-height: 44px;
  /* 12/16, lo mismo que el checkout y el formulario de contacto (antes 12/20). */
  padding: var(--mt-space-3) var(--mt-space-4);

  font-family: var(--mt-font-body);
  /* El tamaño NO se fija aquí: lo pone el conector, que hace 16px en el móvil y
     14px a partir de 768px, igual que el checkout. Con el valor escrito aquí,
     este campo se quedaba a 16px en escritorio y se veía más grande que todos
     los demás del sitio. */
  color: var(--mt-color-primary-deep);

  background-color: var(--mt-color-white);
  border: 2px solid var(--mt-color-white);
  /* El mismo radio que el resto de campos del sitio: 8px.
   *
   * Aquí había `--mt-radius-pill` y el campo del boletín salía como una
   * cápsula mientras el de contacto y los del checkout tenían la esquina
   * redondeada normal. Es el mismo conector pintando el mismo tipo de campo
   * en dos páginas seguidas, y se veía que no.
   *
   * `md` y no `sm`: 8px es lo que usan el checkout, el formulario de
   * contacto y los campos de la ficha del vale. Con `sm` este campo pasaba de
   * ser el único con forma de cápsula a ser el único con la esquina más viva,
   * que es cambiar un desajuste por otro.
   *
   * El borde blanco de 2px SÍ se queda: no es decoración, es lo que separa
   * el campo del azul del boletín (véase la nota de contraste unas líneas más
   * arriba). Aquí solo se cambia la forma de la esquina. */
  border-radius: var(--mt-radius-md);
}

/* Gris secundario sobre blanco: 5,74:1. Hoy el conector no pinta ningún texto de
   guía —pone etiquetas visibles, que es mejor—, pero si algún día lo hay
   tiene que cumplir AA igual que cualquier otro texto. */
.mt-butlleti .ldf-form .ldf-field ::placeholder {
  color: var(--mt-color-text-secondary);
}

/* El borde rojo del campo erróneo SÍ vale aquí, y por eso se recupera: se
   dibuja contra el BLANCO del campo (#DC2626 sobre blanco, 4,26:1, por encima
   del 3:1 del criterio 1.4.11), no contra el azul de la franja. */
.mt-butlleti .ldf-form .ldf-field input[aria-invalid="true"] {
  border-color: var(--mt-color-error);
}

/* El foco del conector es un borde turquesa con un halo turquesa: sobre
   este azul no se distingue. Se neutraliza y se usa el mismo
   contorno blanco separado que el resto de la franja. */
.mt-butlleti .ldf-form .ldf-field input:focus {
  outline: none;
  border-color: var(--mt-color-white);
  box-shadow: none;
}

.mt-butlleti .ldf-form .ldf-field input:focus-visible,
.mt-butlleti .ldf-form .ldf-consent input[type="checkbox"]:focus-visible,
.mt-butlleti .ldf-form button[type="submit"]:focus-visible {
  outline: 3px solid var(--mt-color-white);
  outline-offset: 3px;
}

/* La casilla la pinta el navegador. `accent-color` blanco en lugar de
   reimplementarla con un pseudoelemento: una casilla falsa es exactamente lo
   que rompe los lectores de pantalla y la navegación con teclado. */
.mt-butlleti .ldf-form .ldf-consent input[type="checkbox"] {
  accent-color: var(--mt-color-white);
  width: 1.1rem;
  height: 1.1rem;
}

/* ⚠️ Blanco subrayado y NO el turquesa de marca: sobre este azul, el
   turquesa se queda en 2,04:1. Es la misma trampa de la D-014 en un fondo nuevo:
   el color de marca no es apto sobre cualquier cosa. El subrayado lo
   distingue del texto de alrededor sin depender del color (WCAG 1.4.1). */
.mt-butlleti .ldf-form .ldf-consent a {
  color: var(--mt-color-white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mt-butlleti .ldf-form .ldf-consent a:hover,
.mt-butlleti .ldf-form .ldf-consent a:focus-visible {
  text-decoration-thickness: 2px;
}

/* ---- Botón de enviar ----
   Se define entero aquí, y no solo el color, por dos razones:

   1. **El fondo.** `.mt-btn--primary` es azul sobre blanco; aquí el fondo YA es
      ese azul y el botón desaparecería en él. Sobre oscuro el relleno se invierte:
      blanco con el texto en primary-deep = 11,60:1.
   2. **En mi-tema, `.mt-btn` vive dentro de assets/css/woocommerce.css**, que solo
      se encola en las páginas de WooCommerce (véase inc/enqueue.php). El boletín
      sale en TODAS: sin estas propiedades, en la portada de la tienda el
      botón se vería como el botón crudo del navegador. Dándole aquí la
      geometría, los dos sitios lo pintan igual sin depender de qué hoja
      se haya encolado. Los valores son los de `.mt-btn` de tema-daurada, que es la
      referencia de paridad.

   Los colores NO se fijan a pelo: se leen de los tokens --mt-btn-* que
   tema-daurada ya declara sobre `.mt-butlleti` (assets/css/components.css, el
   bloque «fons foscos»), con el mismo valor como alternativa para mi-tema,
   que todavía no tiene ese mecanismo. Así el día que tema-daurada cambie el
   botón de las franjas oscuras, el del boletín lo sigue en lugar de
   quedarse atrás.

   `align-self: start` porque el formulario del conector es una columna flex:
   sin esto el botón se estiraría a todo el ancho. */
.mt-butlleti .ldf-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;

  min-height: 44px;
  padding: var(--mt-space-3) var(--mt-space-6);

  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-regular);
  line-height: var(--mt-line-height-none);
  letter-spacing: var(--mt-letter-spacing-wider);
  text-indent: var(--mt-letter-spacing-wider);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;

  color: var(--mt-btn-fill-text, var(--mt-color-primary-deep));
  background-color: var(--mt-btn-fill, var(--mt-color-white));
  border: 2px solid var(--mt-btn-fill, var(--mt-color-white));
  border-radius: var(--mt-radius-pill);

  cursor: pointer;
  transition: var(--mt-transition-colors);
}

/* El hover se aclara hacia el blanco roto de la marca, igual que cualquier
   otro botón lleno sobre fondo oscuro. Los dos números: el texto primary-deep sobre
   este aclarado da 10,63:1, y el propio botón contra el azul de la franja da
   4,64:1 —por encima del 3:1 que el criterio 1.4.11 pide al límite de un
   control. */
.mt-butlleti .ldf-form button[type="submit"]:hover,
.mt-butlleti .ldf-form button[type="submit"]:focus-visible {
  background-color: var(--mt-btn-fill-hover, var(--mt-color-primary-light));
  border-color: var(--mt-btn-fill-hover, var(--mt-color-primary-light));
}

/* El JS del conector deshabilita el botón mientras se está enviando. La opacidad
   aquí sí es aceptable: un control deshabilitado queda fuera del criterio de
   contraste (WCAG 1.4.3), y la bajada es justamente la señal de que no se puede
   volver a clicar. */
.mt-butlleti .ldf-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}