/*
Theme Name:   Kadence Child — Medalla de San Benito
Theme URI:    https://medalladesanbenito.com.co/
Description:  Tema hijo de Kadence para medalladesanbenito.com.co. Tokens de diseño,
              animación ligada al scroll, patrones de bloque y plantillas de
              WooCommerce. Todo el diseño vive en archivos: no depende del
              Personalizador.
Author:       MedalladeSanBenito.com.co
Author URI:   https://medalladesanbenito.com.co/
Template:     kadence
Version:      1.3.0
Requires PHP: 7.4
Text Domain:  kadence-child
*/

/* ==========================================================================
   TOKENS — DESIGN.md §4
   Fuente de verdad única. No añadir colores ni tamaños fuera de este bloque.
   ========================================================================== */

:root {

  /* --- Fondos ------------------------------------------------------------ */

  --msb-fondo:        #FBF9F5;
  --msb-superficie:   #FFFFFF;
  --msb-superficie-2: #F5F3EF;
  --msb-superficie-3: #EFEEEA;
  --msb-bandeja:      #F8F6F0;

  /* --- Texto ------------------------------------------------------------- */

  --msb-tinta:        #000000;
  --msb-tinta-cuerpo: #1B1C1A;
  --msb-tinta-2:      #44474D;

  /* --- Líneas ------------------------------------------------------------ */

  --msb-linea:     #C5C6CD;
  --msb-linea-2:   #75777E;
  --msb-linea-oro: #C5A059;

  /* --- Azul noche: secciones de autoridad y vitrinas ---------------------- */

  --msb-noche:       #0D1C32;
  --msb-noche-2:     #162A4A;
  --msb-noche-3:     #091322;
  --msb-sobre-noche: #76849F;

  /* --- Oro: único acento ------------------------------------------------- */

  --msb-oro:       #775A19;
  --msb-oro-claro: #FED488;
  --msb-oro-suave: #FFDEA5;

  /* --- WhatsApp: marca ajena, no se toca --------------------------------- */

  --msb-whatsapp:       #1E7A56;
  --msb-whatsapp-hover: #165A40;
  --msb-whatsapp-borde: #3D936D;

  /* --- Familias ----------------------------------------------------------
     Autoalojadas en fonts/. La pila de reserva actúa si falta algún .woff2. */

  --msb-fuente-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --msb-fuente-texto:  "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
                       "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- Escala tipográfica ------------------------------------------------ */

  --msb-t-hallmark: 0.6875rem;  /* 11 — sellos y microetiquetas */
  --msb-t-sm:       0.8125rem;  /* 13 — texto de apoyo y navegación */
  --msb-t-base:     0.9375rem;  /* 15 — cuerpo */
  --msb-t-lg:       1.125rem;   /* 18 — entradillas y subtítulos */
  --msb-t-h-sm:     1.375rem;   /* 22 — títulos de tarjeta */
  --msb-t-h-md:     1.75rem;    /* 28 — títulos de bloque */
  --msb-t-h-lg:     2.5rem;     /* 40 — títulos de sección */
  --msb-t-display:  3.5rem;     /* 56 — titular de portada */

  /* Interlineados, en proporción al tamaño que acompañan. */
  --msb-alto-hallmark: 1.27;
  --msb-alto-sm:       1.54;
  --msb-alto-base:     1.6;
  --msb-alto-lg:       1.67;
  --msb-alto-h-sm:     1.36;
  --msb-alto-h-md:     1.29;
  --msb-alto-h-lg:     1.25;
  --msb-alto-display:  1.21;

  /* Tracking. */
  --msb-track-hallmark:  0.14em;
  --msb-track-label:     0.06em;
  --msb-track-title:     0.01em;
  --msb-track-h-lg:     -0.015em;
  --msb-track-display:  -0.02em;

  /* --- Escala de espaciado: 4 / 8 / 16 / 24 / 28 / 48 / 64 --------------- */

  --msb-e-1: 0.25rem;
  --msb-e-2: 0.5rem;
  --msb-e-3: 1rem;
  --msb-e-4: 1.5rem;
  --msb-e-5: 1.75rem;
  --msb-e-6: 3rem;
  --msb-e-7: 4rem;

  /* --- Medidas ----------------------------------------------------------- */

  --msb-gutter:      1.5rem;   /* 24 en escritorio */
  --msb-ancho:       80rem;    /* contenedor máximo */
  --msb-ancho-texto: 68ch;

  --msb-radio:    2px;
  --msb-radio-lg: 4px;
  --msb-radio-xl: 8px;

  --msb-borde:     1px solid var(--msb-linea);
  --msb-borde-oro: 1px solid rgb(197 160 89 / .28);
}

/* En móvil bajan el titular de portada y el de sección. Al vivir en variables,
   todo lo que los usa se adapta sin repetir una sola regla. */
@media (max-width: 767px) {
  :root {
    --msb-t-display: 2.25rem;  /* 36 */
    --msb-t-h-lg:    1.75rem;  /* 28 */
    --msb-track-display: -0.01em;
    --msb-gutter: 1rem;
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
  background-color: var(--msb-fondo);
  color: var(--msb-tinta-cuerpo);
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-base);
  font-weight: 400;
  line-height: var(--msb-alto-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entry-title,
.product_title {
  font-family: var(--msb-fuente-titulo);
  color: var(--msb-tinta);
}

h1 {
  font-size: var(--msb-t-h-lg);
  font-weight: 500;
  line-height: var(--msb-alto-h-lg);
  letter-spacing: var(--msb-track-h-lg);
}

h2 {
  font-size: var(--msb-t-h-md);
  font-weight: 500;
  line-height: var(--msb-alto-h-md);
}

h3 {
  font-size: var(--msb-t-h-sm);
  font-weight: 600;
  line-height: var(--msb-alto-h-sm);
}

h4 {
  font-size: var(--msb-t-lg);
  font-weight: 600;
  line-height: 1.44;
  letter-spacing: var(--msb-track-title);
}

/* Titular de portada. Aplícalo al h1 del hero. */
.msb-display {
  font-size: var(--msb-t-display);
  font-weight: 600;
  line-height: var(--msb-alto-display);
  letter-spacing: var(--msb-track-display);
}

a { color: var(--msb-oro); }
a:hover, a:focus { color: var(--msb-tinta); }

/* Foco visible siempre. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--msb-oro);
  outline-offset: 2px;
}

/* ==========================================================================
   ESTRUCTURA
   ========================================================================== */

.msb-contenedor {
  max-width: var(--msb-ancho);
  margin-inline: auto;
  padding-inline: var(--msb-gutter);
}

.msb-seccion { padding-block: var(--msb-e-7); }

.msb-seccion--alterna {
  background-color: var(--msb-superficie-2);
  border-block: var(--msb-borde);
}

/* Sección de autoridad: azul noche. Para mayoristas y vitrinas. */
.msb-seccion--noche {
  background-color: var(--msb-noche);
  color: #FFFFFF;
}

.msb-seccion--noche h1,
.msb-seccion--noche h2,
.msb-seccion--noche h3,
.msb-seccion--noche h4 { color: #FFFFFF; }

.msb-seccion--noche p { color: var(--msb-sobre-noche); }
.msb-seccion--noche .msb-hallmark { color: var(--msb-oro-claro); }

/* Cabecera de sección centrada, con su filete bajo el título. */
.msb-cabecera {
  max-width: 48rem;
  margin-inline: auto;
  margin-block-end: var(--msb-e-7);
  text-align: center;
}

.msb-cabecera__filete {
  inline-size: 4rem;
  block-size: 2px;
  background-color: var(--msb-oro);
  margin: var(--msb-e-3) auto;
  border: 0;
}

/* ==========================================================================
   ETIQUETAS Y ORNAMENTO  —  C.S.P.B.
   ========================================================================== */

.msb-hallmark {
  display: inline-block;
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-hallmark);
  font-weight: 700;
  line-height: var(--msb-alto-hallmark);
  text-transform: uppercase;
  letter-spacing: var(--msb-track-hallmark);
  color: var(--msb-oro);
}

.msb-eyebrow {
  display: block;
  margin-block-end: var(--msb-e-2);
}

.msb-label {
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-sm);
  font-weight: 600;
  line-height: 1.38;
  text-transform: uppercase;
  letter-spacing: var(--msb-track-label);
}

/* Sello: la etiqueta enmarcada del mockup. Filete doble, sin resplandor. */
.msb-sello {
  display: inline-flex;
  align-items: center;
  gap: var(--msb-e-2);
  padding: var(--msb-e-1) var(--msb-e-3);
  border: 1px double rgb(197 160 89 / .6);
  background-color: rgb(254 212 136 / .12);
  border-radius: var(--msb-radio);
}

/* Marca de agua para secciones de respiro. Decorativa:
   ponle aria-hidden="true" en el marcado. */
.msb-marca-agua {
  font-family: var(--msb-fuente-titulo);
  font-weight: 600;
  font-size: var(--msb-t-display);
  letter-spacing: var(--msb-track-hallmark);
  line-height: 1;
  color: var(--msb-tinta);
  opacity: .06;
  user-select: none;
  pointer-events: none;
}

/* ==========================================================================
   SUPERFICIES
   ========================================================================== */

/* Bandeja: el bloque de contenido destacado sobre fondo claro. */
.msb-bandeja {
  background-color: var(--msb-bandeja);
  border: 1px solid rgb(197 160 89 / .22);
  border-radius: var(--msb-radio-lg);
  padding: var(--msb-e-6);
}

/* Filete dorado: el borde de las tarjetas de producto. */
.msb-filete { border: var(--msb-borde-oro); }

/* ==========================================================================
   ARTÍCULOS DE GUÍA
   ========================================================================== */

.msb-guia {
  max-width: var(--msb-ancho-texto);
  margin-inline: auto;
  font-size: var(--msb-t-lg);
  line-height: var(--msb-alto-lg);
}

.msb-guia p { margin-block: 0 var(--msb-e-4); }

/* Citas latinas: Playfair itálica. */
.msb-cita {
  font-family: var(--msb-fuente-titulo);
  font-style: italic;
  font-weight: 400;
}

/* ==========================================================================
   ZONAS DE TEXTO SEO  (archive-product.php)
   ========================================================================== */

.msb-zona-seo {
  max-width: var(--msb-ancho-texto);
  margin-inline: auto;
  font-size: var(--msb-t-base);
}

.msb-zona-seo--superior { margin-block-end: var(--msb-e-6); }

.msb-zona-seo--inferior {
  margin-block-start: var(--msb-e-7);
  padding-block-start: var(--msb-e-6);
  border-block-start: var(--msb-borde);
}

.msb-zona-seo > :first-child { margin-block-start: 0; }
.msb-zona-seo > :last-child  { margin-block-end: 0; }

/* ==========================================================================
   FICHA EN REJILLA  (content-product.php)
   Orden fijo: foto · nombre · acabado · precio · botón de WhatsApp.
   ========================================================================== */

ul.products li.product.msb-ficha {
  display: flex;
  flex-direction: column;
  background-color: var(--msb-superficie);
  border: var(--msb-borde-oro);
  border-radius: var(--msb-radio-lg);
  padding: var(--msb-e-5);
  text-align: start;
  transition: border-color .18s ease;
}

ul.products li.product.msb-ficha:hover { border-color: var(--msb-linea-oro); }

.msb-ficha__media {
  display: block;
  margin-block-end: var(--msb-e-3);
  background-color: var(--msb-superficie-2);
  border-radius: var(--msb-radio);
  overflow: hidden;
}

.msb-ficha__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.msb-ficha__nombre {
  font-family: var(--msb-fuente-titulo);
  font-weight: 600;
  font-size: var(--msb-t-h-sm);
  line-height: var(--msb-alto-h-sm);
  margin: 0 0 var(--msb-e-1);
}

.msb-ficha__nombre a { color: var(--msb-tinta); text-decoration: none; }
.msb-ficha__nombre a:hover { color: var(--msb-oro); }

/* El acabado es el argumento de venta (§1), no la aleación. */
.msb-ficha__acabado {
  font-size: var(--msb-t-sm);
  line-height: var(--msb-alto-sm);
  color: var(--msb-tinta-2);
  margin: 0 0 var(--msb-e-3);
}

/* Enlace al archivo del acabado. Deliberadamente discreto: es enlazado
   interno hacia una página SEO, no una llamada a la acción. */
.msb-ficha__acabado-enlace {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid var(--msb-linea);
}

.msb-ficha__acabado-enlace:hover,
.msb-ficha__acabado-enlace:focus-visible {
  color: var(--msb-oro);
  border-block-end-color: currentColor;
}

/* Bandeja de datos técnicos: peso, acabado, diámetro. */
.msb-ficha__datos {
  background-color: var(--msb-superficie-2);
  border-radius: var(--msb-radio);
  padding: var(--msb-e-2) var(--msb-e-3);
  margin-block-end: var(--msb-e-3);
  font-size: var(--msb-t-sm);
}

.msb-ficha__dato {
  display: flex;
  justify-content: space-between;
  gap: var(--msb-e-3);
  color: var(--msb-tinta-2);
}

.msb-ficha__dato strong { color: var(--msb-tinta-cuerpo); font-weight: 600; }

.msb-ficha__precio-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--msb-e-2);
  margin-block-end: var(--msb-e-3);
}

.msb-ficha__precio {
  font-family: var(--msb-fuente-titulo);
  font-weight: 600;
  font-size: var(--msb-t-lg);
  color: var(--msb-tinta);
}

.msb-ficha__precio--pendiente {
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-sm);
  font-weight: 400;
  font-style: italic;
  color: var(--msb-tinta-2);
}

/* Empuja el botón al fondo: todas las fichas cierran a la misma altura. */
.msb-ficha__accion { margin-block-start: auto; }

/* ==========================================================================
   BOTONES
   ========================================================================== */

.msb-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--msb-e-2);
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-sm);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: var(--msb-track-label);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--msb-e-2) var(--msb-e-4);
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--msb-radio);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* WhatsApp: la acción principal en todo el sitio (§3). */
.msb-boton--wa {
  background-color: var(--msb-whatsapp);
  border-color: rgb(61 147 109 / .4);
  color: #FFFFFF;
}

.msb-boton--wa:hover,
.msb-boton--wa:focus-visible {
  background-color: var(--msb-whatsapp-hover);
  color: #FFFFFF;
}

/* Azul noche: acción principal dentro de una tarjeta clara. */
.msb-boton--noche {
  background-color: var(--msb-noche);
  color: #FFFFFF;
}

.msb-boton--noche:hover { background-color: var(--msb-tinta); color: #FFFFFF; }

/* Contorno: acción secundaria sobre fondo claro. */
.msb-boton--linea {
  background-color: var(--msb-superficie);
  border-color: rgb(197 160 89 / .28);
  color: var(--msb-tinta-cuerpo);
}

.msb-boton--linea:hover {
  background-color: var(--msb-superficie-3);
  color: var(--msb-tinta);
}

.msb-boton--ancho { inline-size: 100%; }

/* Botón grande del hero, con línea de apoyo debajo del rótulo. */
.msb-boton--grande {
  padding: var(--msb-e-3) var(--msb-e-5);
  font-size: var(--msb-t-base);
}

.msb-boton__nota {
  display: block;
  font-size: var(--msb-t-hallmark);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: .9;
}

/* ==========================================================================
   FICHA DE PRODUCTO  (single-product.php)
   Un solo H1. WhatsApp es la acción principal (§3).
   ========================================================================== */

.woocommerce div.product .product_title.msb-producto__titulo {
  font-size: var(--msb-t-h-lg);
  font-weight: 500;
  line-height: var(--msb-alto-h-lg);
  letter-spacing: var(--msb-track-h-lg);
  margin: 0 0 var(--msb-e-3);
}

.woocommerce div.product .price {
  font-family: var(--msb-fuente-titulo);
  font-weight: 600;
  font-size: var(--msb-t-h-sm);
  color: var(--msb-tinta);
}

/* El selector de acabado alimenta el mensaje de WhatsApp. */
.msb-acabado-selector {
  margin-block: var(--msb-e-4);
  padding-block-end: var(--msb-e-4);
  border-block-end: var(--msb-borde);
}

.msb-acabado-selector__titulo {
  display: block;
  margin-block-end: var(--msb-e-2);
  color: var(--msb-tinta-2);
}

.msb-acabado-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--msb-e-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.msb-acabado-opcion {
  display: inline-flex;
  align-items: center;
  padding: var(--msb-e-2) var(--msb-e-3);
  min-height: 44px;
  border: var(--msb-borde);
  border-radius: var(--msb-radio);
  background-color: var(--msb-superficie);
  font-size: var(--msb-t-sm);
  color: var(--msb-tinta-cuerpo);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}

.msb-acabado-opcion:hover,
.msb-acabado-opcion:focus-visible {
  border-color: var(--msb-linea-oro);
  background-color: var(--msb-bandeja);
  color: var(--msb-tinta);
}

.msb-acabado-opcion[aria-current="true"] {
  border-color: var(--msb-oro);
  background-color: rgb(254 212 136 / .18);
  color: var(--msb-tinta);
  font-weight: 600;
}

/* Formulario de carrito: oculto por defecto (§3). Se recupera con el filtro
   msb_mostrar_carrito. Cuando se muestra, es acción secundaria. */
.woocommerce div.product form.cart {
  margin-block-start: var(--msb-e-4);
  padding-block-start: var(--msb-e-4);
  border-block-start: var(--msb-borde);
}

.woocommerce div.product form.cart .button {
  background-color: transparent;
  border: 1px solid var(--msb-linea-2);
  color: var(--msb-tinta-cuerpo);
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--msb-track-label);
  border-radius: var(--msb-radio);
  min-height: 44px;
}

.woocommerce div.product form.cart .button:hover {
  background-color: var(--msb-superficie-3);
  border-color: var(--msb-tinta-2);
  color: var(--msb-tinta);
}

/* Aviso de dato pendiente: visible en obra, no para el visitante. */
.msb-pendiente {
  display: block;
  font-size: var(--msb-t-sm);
  font-style: italic;
  color: var(--msb-tinta-2);
}

/* ==========================================================================
   BARRA FIJA MÓVIL  (§3)
   Aparece al pasar la portada y reemplaza cualquier widget flotante.
   ========================================================================== */

.msb-barra-movil {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--msb-e-3);
  padding: var(--msb-e-2) var(--msb-e-3);
  background-color: var(--msb-superficie);
  border-block-start: var(--msb-borde);
}

.msb-barra-movil__dato {
  font-size: var(--msb-t-sm);
  line-height: 1.3;
  color: var(--msb-tinta-2);
}

.msb-barra-movil__dato strong {
  display: block;
  color: var(--msb-tinta);
  font-weight: 600;
}

@media (min-width: 768px) {
  .msb-barra-movil { display: none; }
}

/* ==========================================================================
   HUECO DE IMAGEN
   Los patrones traen huecos marcados donde va una foto real. Las imágenes del
   mockup eran URLs temporales del generador: enlazarlas sería sembrar enlaces
   rotos a plazo. Sustituye cada hueco por un bloque de imagen de tu biblioteca.
   ========================================================================== */

.msb-hueco {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--msb-e-4);
  min-block-size: 12rem;
  background-color: var(--msb-superficie-2);
  border: 1px dashed var(--msb-linea-2);
  border-radius: var(--msb-radio);
  color: var(--msb-tinta-2);
  font-size: var(--msb-t-sm);
}

.msb-hueco--cuadrado { aspect-ratio: 1 / 1; min-block-size: 0; }
.msb-hueco--video    { aspect-ratio: 16 / 9; min-block-size: 0; }
.msb-hueco--redondo  { aspect-ratio: 1 / 1; min-block-size: 0; border-radius: 50%; }

.msb-seccion--noche .msb-hueco {
  background-color: rgb(255 255 255 / .05);
  border-color: rgb(255 255 255 / .2);
  color: var(--msb-sobre-noche);
}

/* Vitrina del hero: la bandeja oscura donde se presenta la pieza. */
.msb-vitrina {
  background: radial-gradient(circle at center, var(--msb-noche-2) 0%, var(--msb-noche-3) 100%);
  border: 1px solid rgb(197 160 89 / .3);
  border-radius: var(--msb-radio-xl);
  padding: var(--msb-e-4);
  color: #FFFFFF;
}

.msb-vitrina__cabecera,
.msb-vitrina__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--msb-e-3);
  flex-wrap: wrap;
}

.msb-vitrina__cabecera {
  padding-block-end: var(--msb-e-2);
  border-block-end: 1px solid rgb(118 132 159 / .3);
  margin-block-end: var(--msb-e-3);
}

.msb-vitrina__pie {
  padding-block-start: var(--msb-e-2);
  border-block-start: 1px solid rgb(118 132 159 / .3);
  margin-block-start: var(--msb-e-3);
}

.msb-vitrina .msb-hallmark { color: var(--msb-oro-claro); }

/* Rejilla de confianza bajo el hero. */
.msb-confianza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--msb-e-4);
  margin-block-start: var(--msb-e-5);
  padding-block-start: var(--msb-e-5);
  border-block-start: var(--msb-borde);
}

.msb-confianza__titulo { margin: 0 0 var(--msb-e-1); }

.msb-confianza__nota {
  margin: 0;
  font-size: var(--msb-t-sm);
  color: var(--msb-tinta-2);
}

/* Paso numerado del bloque de taller. */
.msb-paso__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border: 1px solid rgb(197 160 89 / .3);
  border-radius: var(--msb-radio);
  background-color: var(--msb-superficie);
  font-family: var(--msb-fuente-texto);
  font-weight: 700;
  color: var(--msb-oro);
}

/* Tarjeta de ventaja sobre azul noche. */
.msb-ventaja {
  padding: var(--msb-e-3);
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: var(--msb-radio);
  background-color: rgb(255 255 255 / .05);
  transition: border-color .18s ease;
}

.msb-ventaja:hover { border-color: rgb(197 160 89 / .5); }

/* ==========================================================================
   BARRA DE ANUNCIOS
   Tres mensajes sobre azul noche, encima de la cabecera. En móvil se apilan
   para que ninguno quede cortado.
   ========================================================================== */

.msb-anuncios {
  background-image: linear-gradient(
    160deg, var(--msb-noche-2) 0%, var(--msb-noche) 55%, var(--msb-noche-3) 100%
  );
  border-block-end: 1px solid rgb(254 212 136 / .22);
  padding-block: var(--msb-e-2);
}

/* Tres columnas iguales para que los mensajes queden repartidos aunque uno
   sea mucho mas largo que los otros. Con flex, el largo se comia el espacio
   de los cortos. */
.msb-anuncios__fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: var(--msb-e-2) var(--msb-e-4);
}

.msb-anuncios__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: 0;
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-hallmark);
  font-weight: 700;
  line-height: var(--msb-alto-hallmark);
  text-transform: uppercase;
  letter-spacing: var(--msb-track-hallmark);
  text-align: center;
  color: var(--msb-oro-suave);
}

/* El mensaje central va en gris azulado para crear jerarquia sin meter un
   tercer color. #9AA6BC sobre el azul de la barra da 6,96:1 — holgado para
   AA incluso a 11 px. El --msb-sobre-noche de los cuerpos de texto se queda
   en 4,53:1, que pasa pero va justo para un rotulo tan pequeno. */
.msb-anuncios__item--apoyo { color: #9AA6BC; }

.msb-anuncios__icono { flex: none; opacity: .9; }

/* Bajo 1024 px cabe mal en tres columnas: pasa a dos y el tercero se centra
   ocupando ambas. Bajo 600 px se apilan. */
@media (max-width: 1023px) {
  .msb-anuncios__fila { grid-template-columns: repeat(2, 1fr); }
  .msb-anuncios__item:last-child { grid-column: 1 / -1; }
}

@media (max-width: 599px) {
  .msb-anuncios__fila { grid-template-columns: 1fr; }
  .msb-anuncios__item:last-child { grid-column: auto; }
  .msb-anuncios__item { justify-content: flex-start; text-align: start; }
}

/* ==========================================================================
   TESTIMONIOS
   ========================================================================== */

.msb-testimonio {
  height: 100%;
  background-color: var(--msb-superficie);
  border: var(--msb-borde-oro);
  border-radius: var(--msb-radio-lg);
  padding: var(--msb-e-4);
}

.msb-estrellas {
  margin: 0 0 var(--msb-e-2);
  color: var(--msb-oro);
  letter-spacing: .12em;
  line-height: 1;
}

.msb-testimonio p:last-child { margin-block-end: 0; }

/* ==========================================================================
   PIE
   ========================================================================== */

.msb-pie__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.msb-pie__lista li { margin-block-end: var(--msb-e-2); }

.msb-pie__lista a {
  color: var(--msb-sobre-noche);
  text-decoration: none;
}

.msb-pie__lista a:hover,
.msb-pie__lista a:focus-visible {
  color: var(--msb-oro-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.msb-pie .msb-hallmark { margin-block-end: var(--msb-e-3); }

/* ==========================================================================
   ELEMENTOS GEO DEL BRIEF
   La cápsula, la firma de autor, el índice y las tablas de datos. Son los
   bloques que las IA citan como respuesta directa, así que tienen que leerse
   como una unidad separada del párrafo que los rodea.
   ========================================================================== */

/* Cápsula GEO: la respuesta directa bajo cada H2. Filete dorado a la
   izquierda para que se distinga del cuerpo sin gritar. */
.msb-capsula {
  margin-block: var(--msb-e-3) var(--msb-e-4);
  padding: var(--msb-e-3) var(--msb-e-4);
  border-inline-start: 3px solid var(--msb-oro);
  background-color: var(--msb-bandeja);
  font-size: var(--msb-t-base);
  line-height: var(--msb-alto-base);
  color: var(--msb-tinta-cuerpo);
}

.msb-seccion--noche .msb-capsula {
  background-color: rgb(255 255 255 / .06);
  border-inline-start-color: var(--msb-oro-claro);
  color: #FFFFFF;
}

/* Firma del autor: resuelve el test "quién" de Google. Discreta pero visible. */
.msb-firma {
  margin-block-start: var(--msb-e-3);
  padding-block-start: var(--msb-e-2);
  border-block-start: var(--msb-borde);
}

.msb-firma a {
  color: var(--msb-tinta-cuerpo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.msb-firma a:hover { color: var(--msb-oro); }

/* Índice con anclas a cada H2. */
.msb-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--msb-e-5);
}

.msb-toc li { margin-block-end: var(--msb-e-2); break-inside: avoid; }

.msb-toc a {
  color: var(--msb-tinta-cuerpo);
  text-decoration: none;
  border-block-end: 1px solid var(--msb-linea);
}

.msb-toc a:hover { color: var(--msb-oro); border-block-end-color: currentColor; }

@media (max-width: 767px) {
  .msb-toc ul { columns: 1; }
}

/* Tablas de datos: especificaciones y comparativas. Son datos propios, que es
   justo lo que las IA citan, así que deben leerse bien también en móvil. */
.msb-tabla { margin-block: var(--msb-e-4); overflow-x: auto; }

.msb-tabla table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--msb-t-sm);
  line-height: var(--msb-alto-sm);
}

.msb-tabla th,
.msb-tabla td {
  padding: var(--msb-e-2) var(--msb-e-3);
  border: var(--msb-borde);
  text-align: start;
  vertical-align: top;
}

.msb-tabla thead th {
  background-color: var(--msb-noche);
  color: #FFFFFF;
  font-family: var(--msb-fuente-texto);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--msb-track-label);
  font-size: var(--msb-t-hallmark);
}

.msb-tabla tbody tr:nth-child(even) { background-color: var(--msb-superficie-2); }

/* El cuerpo de guía no debe estirar las tablas ni los huecos al ancho de texto. */
.msb-guia .msb-tabla,
.msb-guia .msb-hueco { max-inline-size: none; }

/* ==========================================================================
   GALERÍA DE PRODUCTO
   Va arriba, antes del texto largo: el comprador de una medalla decide por lo
   que ve. Rejilla que se adapta sola, de 3 columnas a 2 y a 1 en móvil.
   ========================================================================== */

.msb-galeria.wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--msb-e-3);
}

.msb-galeria.wp-block-gallery figure.wp-block-image {
  margin: 0;
  background-color: var(--msb-superficie);
  border: var(--msb-borde-oro);
  border-radius: var(--msb-radio-lg);
  overflow: hidden;
  transition: border-color .18s ease;
}

.msb-galeria.wp-block-gallery figure.wp-block-image:hover {
  border-color: var(--msb-linea-oro);
}

/* aspect-ratio + object-fit deja todas las fichas del mismo alto sin recortar
   el motivo de la medalla, que siempre está centrado. */
.msb-galeria.wp-block-gallery figure.wp-block-image img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (max-width: 900px) {
  .msb-galeria.wp-block-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .msb-galeria.wp-block-gallery { grid-template-columns: 1fr; }
}

/* Las imágenes sueltas del cuerpo tampoco deben desbordar el ancho de lectura. */
.msb-guia > figure.wp-block-image img {
  border-radius: var(--msb-radio-lg);
}

/* ==========================================================================
   AJUSTES DE UX
   Correcciones detectadas al auditar la Home con criterios de accesibilidad
   y de uso en móvil.
   ========================================================================== */

/* 1. La barra fija tapaba el final de la página.
      Se reserva su altura al final del documento, y se respeta el área segura
      de los iPhone con notch para que el botón no quede bajo el indicador. */
@media (max-width: 767px) {
  body { padding-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

.msb-barra-movil {
  padding-block-end: calc(var(--msb-e-1) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -1px 0 var(--msb-linea);
}

/* El botón de la barra no debe encogerse cuando el texto de la izquierda
   es largo: es la acción principal del sitio en móvil. */
.msb-barra-movil .msb-boton { flex: none; }

/* 2. Las tablas desbordan en móvil. El contenedor ya hace scroll horizontal,
      pero un área desplazable tiene que poder recorrerse con el teclado, y
      necesita indicar que hay más contenido a la derecha. */
.msb-tabla {
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--msb-fondo) 30%, transparent),
    linear-gradient(to left,  var(--msb-fondo) 30%, transparent) 100% 0,
    linear-gradient(to right, rgb(0 0 0 / .10), transparent 12px),
    linear-gradient(to left,  rgb(0 0 0 / .10), transparent 12px) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.msb-tabla:focus-visible {
  outline: 2px solid var(--msb-oro);
  outline-offset: 2px;
}

/* Sin esto las celdas se parten en una letra por línea al estrecharse. */
.msb-tabla th { white-space: nowrap; }
.msb-tabla td { min-inline-size: 9rem; }

/* 3. La galería es lo primero que mira el comprador. Reservar la proporción
      evita que el texto de abajo salte mientras cargan las fotos (CLS). */
.msb-galeria.wp-block-gallery figure.wp-block-image { aspect-ratio: 1 / 1; }

/* 4. Objetivo táctil: los enlaces de acabado de la ficha quedaban por debajo
      del mínimo cómodo al ir en línea dentro de un párrafo. */
.msb-ficha__acabado-enlace {
  display: inline-block;
  padding-block: var(--msb-e-1);
}

/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   --------------------------------------------------------------------------
   El encargo era "llamativo y de lujo". DESIGN.md §4 prohíbe los destellos:
   "nada brilla, nada parpadea". No es contradicción si el lujo se busca en el
   material y no en la luz:

   · Filete de oro fino alrededor del verde — el mismo recurso que las fichas.
   · Sombra profunda y difusa, de objeto que reposa sobre la página; nunca un
     halo de color, que es lo que abarata.
   · La etiqueta aparece al pasar el ratón desplegándose hacia la izquierda.
     Se mueve para decir algo, no para adornar.
   · Entra al pasar la portada, con la línea de tiempo de scroll en CSS puro,
     igual que el resto del movimiento del sitio.

   Convive con la barra fija: el flotante desaparece bajo 768 px, que es donde
   entra la barra. Nunca se ven los dos a la vez.
   ========================================================================== */

.msb-wa-flotante {
  position: fixed;
  inset-block-end: var(--msb-e-4);
  inset-inline-end: var(--msb-e-4);
  z-index: 60;

  display: inline-flex;
  align-items: center;
  gap: var(--msb-e-2);

  padding: var(--msb-e-2);
  min-block-size: 56px;
  min-inline-size: 56px;

  background-color: var(--msb-whatsapp);
  color: #FFFFFF;
  text-decoration: none;

  border: 1px solid rgb(197 160 89 / .55);   /* el filete de oro */
  border-radius: 999px;

  /* Dos sombras: una de contacto, corta y densa, y otra larga y suave.
     Juntas leen como un objeto físico apoyado, no como un resplandor. */
  box-shadow:
    0 2px 6px rgb(13 28 50 / .18),
    0 12px 28px -6px rgb(13 28 50 / .28);

  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.msb-wa-flotante:hover,
.msb-wa-flotante:focus-visible {
  background-color: var(--msb-whatsapp-hover);
  border-color: var(--msb-linea-oro);
  color: #FFFFFF;
  box-shadow:
    0 2px 6px rgb(13 28 50 / .22),
    0 16px 34px -6px rgb(13 28 50 / .34);
}

.msb-wa-flotante__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  flex: none;
}

/* La etiqueta arranca colapsada y se despliega. Se anima max-inline-size y no
   width porque el contenido decide su ancho; y opacity para que no parpadee
   el texto a mitad de camino. */
.msb-wa-flotante__texto {
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-sm);
  font-weight: 600;
  letter-spacing: var(--msb-track-label);
  white-space: nowrap;
  overflow: hidden;
  max-inline-size: 0;
  opacity: 0;
  transition: max-inline-size .32s cubic-bezier(.2,.7,.3,1), opacity .2s ease, padding-inline-end .32s cubic-bezier(.2,.7,.3,1);
}

.msb-wa-flotante:hover .msb-wa-flotante__texto,
.msb-wa-flotante:focus-visible .msb-wa-flotante__texto {
  max-inline-size: 16rem;
  opacity: 1;
  padding-inline-end: var(--msb-e-2);
}

/* Quien pidió menos movimiento ve la etiqueta siempre, sin despliegue. */
@media (prefers-reduced-motion: reduce) {
  .msb-wa-flotante__texto {
    max-inline-size: 16rem;
    opacity: 1;
    padding-inline-end: var(--msb-e-2);
    transition: none;
  }
}

/* Entrada al pasar la portada. Si el navegador no soporta la línea de tiempo
   de scroll, el botón simplemente está visible desde el principio: el bloque
   entero no aplica y no hay nada que falle. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes msb-wa-entrada {
      from { opacity: 0; transform: translate3d(0, 1rem, 0); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }
    .msb-wa-flotante {
      animation-name: msb-wa-entrada;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
    }
  }
}

/* Bajo 768 px manda la barra fija: dos llamadas a la vez compiten entre sí. */
@media (max-width: 767px) {
  .msb-wa-flotante { display: none; }
}

/* ==========================================================================
   BLOQUE DE COTIZACIÓN B2B
   Sustituye al formulario: el sitio no tiene plugin de formularios y la
   conversión va por WhatsApp. En vez de pedir datos, se dice qué se recibe
   al escribir — que es lo que el mayorista quiere saber antes de hacerlo.
   ========================================================================== */

.msb-cotizacion__lista {
  list-style: none;
  margin: var(--msb-e-3) 0;
  padding: 0;
  font-size: var(--msb-t-sm);
  line-height: var(--msb-alto-sm);
}

.msb-cotizacion__lista li {
  position: relative;
  padding-inline-start: var(--msb-e-4);
  margin-block-end: var(--msb-e-2);
  color: var(--msb-tinta-cuerpo);
}

/* Palomita dibujada en CSS: no hay que cargar una fuente de iconos para
   cuatro viñetas, y así hereda el color del acento. */
.msb-cotizacion__lista li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .45em;
  inline-size: .5rem;
  block-size: .28rem;
  border-inline-start: 2px solid var(--msb-oro);
  border-block-end: 2px solid var(--msb-oro);
  transform: rotate(-45deg);
}

/* ==========================================================================
   CABECERA
   --------------------------------------------------------------------------
   Lo que la hacía fea no era el color: era que no había jerarquía. El nombre
   del sitio pesaba lo mismo que los enlaces, y los enlaces pesaban todos lo
   mismo entre sí. Aquí se separan tres planos —marca, navegación, acción— y
   se les da a cada uno su tipografía.
   ========================================================================== */

/* Kadence pinta la cabecera con una regla de ID —#masthead{background:#fff}—
   que gana a cualquier selector de clase. Encadenar la clase al ID sube la
   especificidad a (1,1,0) y la vence sin recurrir a !important. */
#masthead.site-header {
  background-color: transparent;
  background-image: linear-gradient(
    160deg, var(--msb-noche-2) 0%, var(--msb-noche) 60%, var(--msb-noche-3) 100%
  );
  border-block-end: 1px solid rgb(254 212 136 / .3);
  box-shadow: 0 1px 24px -10px rgb(9 19 34 / .7);
}

/* Las capas interiores se dejan transparentes para que se vea el degradado
   de la cabecera entera y no se corte por filas. */
#masthead .site-header-wrap,
#masthead .site-header-row,
#masthead .site-header-row-container-inner,
#masthead .site-main-header-wrap {
  background: transparent;
}

/* Pegajosa en escritorio, con desenfoque. En movil no: roba altura util. */
@media (min-width: 1024px) {
  #masthead.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 500;
    background-color: rgb(13 28 50 / .9);
    backdrop-filter: saturate(1.3) blur(12px);
  }
}

/* --- Marca --------------------------------------------------------------- */

#masthead .site-branding .site-title,
#masthead .site-title a {
  font-family: var(--msb-fuente-titulo);
  font-weight: 600;
  font-size: var(--msb-t-h-sm);
  line-height: 1.15;
  letter-spacing: .02em;
  color: #FFFFFF;
  text-decoration: none;
  text-transform: none;
}

#masthead .site-title a:hover { color: var(--msb-oro-claro); }

/* La bajada se convierte en el sello de taller: mayúsculas pequeñas con
   tracking ancho, en oro. Es el gesto que más "orfebrería" aporta y el que
   menos ruido hace. */
#masthead .site-branding .site-description {
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-hallmark);
  font-weight: 700;
  line-height: var(--msb-alto-hallmark);
  text-transform: uppercase;
  letter-spacing: var(--msb-track-hallmark);
  color: var(--msb-oro-claro);
  margin-block-start: .35em;
}

/* --- Navegación ---------------------------------------------------------- */

#masthead .header-navigation .menu > li > a,
#masthead .primary-menu-container .menu > li > a {
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-sm);
  font-weight: 600;
  letter-spacing: var(--msb-track-label);
  text-transform: uppercase;
  color: #E7E3DA;
  padding-block: var(--msb-e-2);
  position: relative;
}

/* Subrayado que crece desde el centro. Es el único movimiento de la cabecera:
   dice "esto es pulsable" sin desplazar nada a su alrededor. */
#masthead .header-navigation .menu > li > a::after,
#masthead .primary-menu-container .menu > li > a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background-color: var(--msb-oro-claro);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}

.header-navigation .menu > li > a:hover::after,
.header-navigation .menu > li > a:focus-visible::after,
.header-navigation .menu > li.current-menu-item > a::after,
.primary-menu-container .menu > li > a:hover::after,
.primary-menu-container .menu > li.current-menu-item > a::after {
  transform: scaleX(1);
}

#masthead .header-navigation .menu > li > a:hover,
#masthead .header-navigation .menu > li.current-menu-item > a { color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .header-navigation .menu > li > a::after { transition: none; }
}

/* Los enlaces de ancla (#que-es, #por-mayor...) los marca WordPress como
   "current" en todas las paginas: salian tres subrayados dorados a la vez.
   El subrayado permanente queda solo para paginas reales. */
#masthead .header-navigation .menu > li.menu-item-type-custom.current-menu-item > a::after {
  transform: scaleX(0);
}

#masthead .header-navigation .menu > li.menu-item-type-custom > a:hover::after {
  transform: scaleX(1);
}

/* Icono del menu movil y flechas de submenu, sobre fondo oscuro. */
#masthead .mobile-toggle-open-container .menu-toggle-open,
#masthead .header-navigation .dropdown-nav-toggle { color: #E7E3DA; }
#masthead .mobile-toggle-open-container .menu-toggle-open:hover { color: var(--msb-oro-claro); }

/* Submenu en oscuro, para que no rompa con la barra. */
#masthead ul ul.sub-menu {
  background-color: var(--msb-noche-2);
  border: 1px solid rgb(254 212 136 / .28);
  border-radius: var(--msb-radio-lg);
  box-shadow: 0 2px 4px rgb(9 19 34 / .3), 0 18px 44px -20px rgb(9 19 34 / .7);
  padding-block: .4rem;
  min-inline-size: 15rem;
}

#masthead ul ul.sub-menu li a {
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #E7E3DA;
  padding: .6rem 1.1rem;
}

#masthead ul ul.sub-menu li a:hover {
  background-color: rgb(254 212 136 / .12);
  color: var(--msb-oro-claro);
}


/* ==========================================================================
   PIE
   --------------------------------------------------------------------------
   Azul noche, como el bloque de mayoristas: cierra el documento con el mismo
   material con el que se presenta la autoridad de la marca.
   ========================================================================== */

.site-footer,
.site-footer-wrap,
.site-middle-footer-wrap,
.site-top-footer-wrap {
  background-color: var(--msb-noche);
  color: var(--msb-sobre-noche);
}

.site-footer a { color: var(--msb-sobre-noche); text-decoration: none; }

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--msb-oro-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.site-footer .widget-title {
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-hallmark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--msb-track-hallmark);
  color: var(--msb-oro-claro);
  margin-block-end: var(--msb-e-3);
}

.site-footer .menu > li > a {
  display: inline-block;
  padding-block: var(--msb-e-1);
  font-size: var(--msb-t-sm);
}

/* Franja inferior: separada por un filete de oro tenue, no por una línea
   gris que parecería un corte. */
.site-bottom-footer-wrap {
  background-color: var(--msb-noche-3);
  border-block-start: 1px solid rgb(197 160 89 / .22);
  font-size: var(--msb-t-sm);
}

.site-bottom-footer-wrap,
.site-bottom-footer-wrap a { color: var(--msb-sobre-noche); }

/* ==========================================================================
   PIE PROPIO
   --------------------------------------------------------------------------
   Las cuatro columnas que compone msb_pie_de_pagina(). Va encima del pie de
   Kadence, que se queda debajo con su línea de créditos.

   El CSS vive junto al marcado que lo necesita: si algún día se retira la
   función, esto deja de aplicarse a nada y no estorba.
   ========================================================================== */

.msb-pie-propio {
  background-image: linear-gradient(
    160deg, var(--msb-noche-2) 0%, var(--msb-noche) 55%, var(--msb-noche-3) 100%
  );
  border-block-start: 1px solid rgb(254 212 136 / .3);
  color: var(--msb-sobre-noche);
  padding-block: var(--msb-e-7);
}

.msb-pie-propio__rejilla {
  display: grid;
  gap: var(--msb-e-6) var(--msb-e-4);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .msb-pie-propio__rejilla { grid-template-columns: repeat(2, 1fr); }
}

/* La columna de marca pesa más: lleva la razón social y los datos legales. */
@media (min-width: 1024px) {
  .msb-pie-propio__rejilla {
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: var(--msb-e-6);
  }
}

.msb-pie-propio__nombre {
  font-family: var(--msb-fuente-titulo);
  font-size: var(--msb-t-h-sm);
  font-weight: 600;
  line-height: 1.2;
  color: #FFFFFF;
  margin-block: var(--msb-e-2) var(--msb-e-3);
}

.msb-pie-propio__dato {
  font-size: var(--msb-t-sm);
  line-height: 1.65;
  color: var(--msb-sobre-noche);
  margin-block: 0 var(--msb-e-3);
}

.msb-pie-propio__titulo {
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-hallmark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--msb-track-hallmark);
  color: var(--msb-oro-claro);
  margin-block: 0 var(--msb-e-3);
  padding-block-end: var(--msb-e-2);
  border-block-end: 1px solid rgb(254 212 136 / .22);
}

.msb-pie-propio__columna ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.msb-pie-propio__columna li { margin-block-end: var(--msb-e-2); }

.msb-pie-propio__columna a {
  font-size: var(--msb-t-sm);
  color: #E7E3DA;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.msb-pie-propio__columna a:hover,
.msb-pie-propio__columna a:focus-visible {
  color: var(--msb-oro-claro);
  border-block-end-color: rgb(254 212 136 / .5);
}

/* Enlace de WhatsApp del pie: contorno, no relleno. Es acción secundaria
   frente al botón flotante y a los de cada sección. */
.msb-pie-propio__wa {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--msb-e-2) var(--msb-e-4);
  margin-block-end: var(--msb-e-3);
  font-family: var(--msb-fuente-texto);
  font-size: var(--msb-t-sm);
  font-weight: 700;
  letter-spacing: var(--msb-track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--msb-oro-claro);
  border: 1px solid rgb(254 212 136 / .45);
  border-radius: var(--msb-radio-lg);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.msb-pie-propio__wa:hover,
.msb-pie-propio__wa:focus-visible {
  background-color: rgb(254 212 136 / .12);
  color: #FFFFFF;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .msb-pie-propio__columna a,
  .msb-pie-propio__wa { transition: none; }
  .msb-pie-propio__wa:hover { transform: none; }
}