/**
 * Mercado Mayor — "Soporte" section
 * ---------------------------------------------------------------------------
 * Covers everything the footer's Soporte menu points to, so it reads as one
 * designed section instead of three unrelated basic WordPress screens:
 *
 *   soporte (page)     "Centro de ayuda" — the FAQ hub, page-soporte.php
 *   anuncios (page)    "Anuncios" — page-anuncios.php
 *   posts, cat=soporte "Soporte / Apoyo" and "Conoce al equipo..." — single.php
 *
 * Scoped with `body.mm-soporte` (all three) plus the narrower
 * `body.mm-page-soporte` / `body.mm-page-anuncios` / `body.mm-soporte-post`
 * — see mercado_mayor_page_slug_body_class() in functions.php. Loaded after
 * page-hero.css (see the enqueue in functions.php), so .mm-hero/.mm-btn/
 * .mm-section-head are already available here.
 *
 * Sections:
 *   1. Backdrop
 *   2. Hero — static variant (no looping video) + compact single-post variant
 *   3. "Centro de ayuda" — bloques bz-* del FAQ (cómo funciona, comisiones, preguntas)
 *   4. FAQ article card ("Soporte / Apoyo")
 *   5. Leadership grid ("Conoce al equipo...")
 *   6. Announcement cards ("Anuncios")
 *   7. "Contenido de ejemplo" badge
 *   8. Closing CTA (page-soporte.php)
 *   9. Single-post chrome — meta row, category badge, sidebar
 *  10. Responsive
 */

/* ========================================================================
   1. BACKDROP
   ========================================================================
 * A quiet off-white panel rather than the recursos pages' dot-grid texture —
 * this section is read-and-answer content, not a landing page, so the calmer
 * flat tone is the more minimalist choice. Goes on <main> so the white header
 * and dark footer are untouched.
 * ======================================================================== */
body.mm-soporte #maincontent{
  background: var(--mm-surface-alt);
  padding-bottom: clamp(28px, 3.6vw, 52px);
}

body.mm-soporte .middle-align{
  background-color: transparent;
}

/* ========================================================================
   2. HERO
   ======================================================================== */

/* No video source, so this is just the base .mm-hero panel with its own
   gradient instead of the flat #111827 fallback — enough presence to anchor
   the section without borrowing the Carrera/Sobre Nosotros footage. */
.mm-hero--static{
  background:
    radial-gradient(60% 100% at 15% 0%, rgba(210, 61, 45, .30), transparent 60%),
    linear-gradient(155deg, #1E1E1E 0%, #111827 100%);
}

/* Single-post variant: the article itself carries the meta row and content,
   so this only has to announce "you're in Soporte" and the title — a third
   of the full hero's height keeps three separate articles from each opening
   with a slab as tall as the page-level hub. */
.mm-hero--compact{
  min-height: clamp(160px, 16vw, 220px);
  margin-bottom: clamp(20px, 2.6vw, 32px);
}

.mm-hero--compact .mm-hero__inner{
  padding: clamp(28px, 3.6vw, 44px) 24px;
}

/* ========================================================================
   3. "CENTRO DE AYUDA" — bloques de contenido (bz-*)
   ========================================================================
 * Antes esta sección existía solo para corregir por encima los colores de un
 * contenido escrito con estilos en línea, enganchando selectores frágiles
 * (li[style*="padding:12px 0"], h2[style*="#DC2626"]) que se rompían en cuanto
 * alguien editaba la página en el editor de bloques.
 *
 * El contenido de /soporte/ ya no lleva estilos en línea: son clases bz-*
 * sobre los tokens --mm-*, así que esos parches desaparecieron. Los acordeones
 * usan <details>/<summary> nativos — sin JavaScript, accesibles con teclado.
 *
 * El mismo juego de clases alimenta la fila .bz-entries de la portada, cuyos
 * estilos viven en home.css porque esta hoja solo carga en la sección Soporte.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
   Contenedor y ritmo vertical
   --------------------------------------------------------------------------- */
body.mm-page-soporte .entry-content{
  max-width: min(68rem, 100%);
  margin-inline: auto;
}

body.mm-page-soporte .bz-how,
body.mm-page-soporte .bz-fees,
body.mm-page-soporte .bz-faq{
  margin-block: clamp(2rem, 4vw, 3.25rem);
}

/* La fila de accesos de la portada enlaza a /soporte/#preguntas-frecuentes.
   Sin este margen el título queda pegado al borde superior —o debajo de la
   cabecera— al llegar por el ancla. */
.bz-faq[id]{
  scroll-margin-top: clamp(1.5rem, 6vw, 5.5rem);
}

/* ---------------------------------------------------------------------------
   Encabezado de sección
   --------------------------------------------------------------------------- */
.bz-head{
  max-width: 46rem;
  margin-bottom: clamp(1.25rem, 2.4vw, 1.875rem);
}

.bz-head__eyebrow{
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-2xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm-accent);
  margin: 0 0 .5rem;
}

/* text-transform, text-align y font-weight se declaran, no se heredan:
   style.css lleva `section h2 { text-transform: uppercase; text-align: center;
   font-weight: bold }`, así que un título largo dentro de un <section> saldría
   gritando y centrado. Mismo recurso que usa .mm-section-head__title en
   page-hero.css para mantener el componente independiente del contexto. */
.bz-head__title{
  font-family: var(--mm-font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.18;
  text-transform: none;
  text-align: left;
  color: var(--mm-ink);
  margin: 0 0 .625rem;
  text-wrap: balance;
}

.bz-head__lead{
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-md);
  line-height: 1.6;
  color: var(--mm-ink-muted);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   «Cómo funciona» — dos columnas de pasos
   --------------------------------------------------------------------------- */
.bz-how__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--mm-gutter);
}

.bz-how__col{
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  display: flex;
  flex-direction: column;
}

.bz-how__tag{
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-2xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mm-ink);
  background: var(--mm-accent-soft);
  border-radius: var(--mm-radius-pill);
  padding: .3125rem .75rem;
  margin: 0 0 1.125rem;
  align-self: flex-start;
}

/* Numeración propia: el contador va en un círculo a la izquierda, de modo que
   el texto del paso se alinea en una sola columna y no en escalera. */
.bz-steps{
  list-style: none;
  counter-reset: bz-step;
  margin: 0;
  padding: 0;
  flex: 1;
}

.bz-steps > li{
  counter-increment: bz-step;
  position: relative;
  padding-left: 2.375rem;
  margin-bottom: 1.125rem;
}

.bz-steps > li:last-child{ margin-bottom: 0; }

.bz-steps > li::before{
  content: counter(bz-step);
  position: absolute;
  left: 0;
  top: -.0625rem;
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-xs);
  font-weight: 700;
  color: var(--mm-accent);
  background: var(--mm-accent-soft);
  border-radius: 50%;
}

.bz-steps > li strong{
  display: block;
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-md);
  font-weight: 600;
  color: var(--mm-ink);
  margin-bottom: .1875rem;
  line-height: 1.35;
}

.bz-steps > li span{
  display: block;
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-base);
  line-height: 1.55;
  color: var(--mm-ink-muted);
}

.bz-how__foot{
  margin: 1.5rem 0 0;
  padding-top: 1.125rem;
  border-top: 1px solid var(--mm-border);
}

/* ---------------------------------------------------------------------------
   Comisiones
   --------------------------------------------------------------------------- */
.bz-fees__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--mm-gutter);
}

.bz-fee{
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  padding: clamp(1.25rem, 2.2vw, 1.5rem);
  display: flex;
  flex-direction: column;
}

/* Una sola franja superior distingue a quién le aplica cada tarifa: es el
   único dato que el lector necesita antes de leer la cifra. */
.bz-fee--buyer{  border-top: 3px solid var(--mm-border-strong); }
.bz-fee--seller{ border-top: 3px solid var(--mm-accent); }

.bz-fee__tag{
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-2xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mm-ink-subtle);
  margin: 0 0 .875rem;
}

.bz-fee__figure{
  font-family: var(--mm-font-display);
  font-size: clamp(2rem, 4.4vw, 2.75rem);
  line-height: 1;
  color: var(--mm-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.bz-fee__label{
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-base);
  font-weight: 600;
  color: var(--mm-ink);
  margin: .375rem 0 .75rem;
}

.bz-fee__note{
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-base);
  line-height: 1.55;
  color: var(--mm-ink-muted);
  margin: 0;
}

/* Modalidades de pago */
.bz-payout{
  margin-top: var(--mm-gutter);
  background: var(--mm-surface-sunken);
  border-radius: var(--mm-radius-lg);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
}

/* h3 dentro de <section>: style.css lo centra y lo pone en mayúsculas. Se
   declara aquí por la misma razón que en .bz-head__title. */
.bz-payout__title{
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-lg);
  font-weight: 600;
  text-transform: none;
  text-align: left;
  color: var(--mm-ink);
  margin: 0 0 .5rem;
}

.bz-payout__lead,
.bz-payout__foot{
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-base);
  line-height: 1.55;
  color: var(--mm-ink-muted);
  margin: 0;
}

.bz-payout__foot{
  margin-top: .875rem;
  font-size: var(--mm-text-sm);
}

.bz-table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.125rem;
  background: var(--mm-surface);
  border-radius: var(--mm-radius);
  overflow: hidden;
}

.bz-table th,
.bz-table td{
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-base);
  text-align: left;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--mm-border);
}

.bz-table thead th{
  font-size: var(--mm-text-2xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mm-ink-subtle);
  background: var(--mm-surface-alt);
}

.bz-table tbody th{
  font-weight: 500;
  color: var(--mm-ink);
}

.bz-table tbody td{
  color: var(--mm-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bz-table tbody tr:last-child th,
.bz-table tbody tr:last-child td{ border-bottom: 0; }

/* ---------------------------------------------------------------------------
   Preguntas frecuentes — acordeón nativo
   --------------------------------------------------------------------------- */
/* Aquí las mayúsculas sí se buscan —es una etiqueta de grupo, no un título—,
   pero el centrado que impone `section h3` en style.css no. */
.bz-faq__group{
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--mm-ink);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 .875rem;
  padding-bottom: .625rem;
  border-bottom: 2px solid var(--mm-accent);
}

.bz-faq__list{
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.bz-q{
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  transition: border-color var(--mm-dur) var(--mm-ease),
              box-shadow var(--mm-dur) var(--mm-ease);
}

.bz-q:hover{ border-color: var(--mm-border-strong); }

.bz-q[open]{
  border-color: var(--mm-accent-pastel);
  box-shadow: var(--mm-shadow-sm);
}

.bz-q > summary{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .9375rem 1.125rem;
  cursor: pointer;
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-md);
  font-weight: 600;
  line-height: 1.4;
  color: var(--mm-ink);
  list-style: none;
}

/* Oculta el triángulo nativo en ambos motores */
.bz-q > summary::-webkit-details-marker{ display: none; }
.bz-q > summary::marker{ content: ""; }

/* Chevron dibujado con bordes: evita cargar un icono solo para esto */
.bz-q > summary::after{
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-top: .3125rem;
  border-right: 2px solid var(--mm-accent);
  border-bottom: 2px solid var(--mm-accent);
  transform: rotate(45deg);
  transition: transform var(--mm-dur) var(--mm-ease);
}

.bz-q[open] > summary::after{
  transform: rotate(-135deg);
  margin-top: .5625rem;
}

.bz-q > summary:focus-visible{
  outline: 2px solid var(--mm-accent);
  outline-offset: -2px;
  border-radius: var(--mm-radius);
}

.bz-a{
  padding: 0 1.125rem 1.125rem;
  border-top: 1px solid var(--mm-border);
  margin-top: -.125rem;
  padding-top: .9375rem;
}

.bz-a p{
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-base);
  line-height: 1.6;
  color: var(--mm-ink-muted);
  margin: 0 0 .75rem;
  max-width: 60ch;
}

.bz-a p:last-child{ margin-bottom: 0; }

.bz-a strong{ color: var(--mm-ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Utilidades compartidas
   --------------------------------------------------------------------------- */
/* El selector va anidado en .entry-content a propósito: style.css trae
   `.entry-content a { color:#e1261c; text-decoration:underline }`, que por
   especificidad (0,1,1) le gana a un `.bz-link` suelto (0,1,0). Subir a dos
   clases (0,2,0) resuelve sin recurrir a !important. El subrayado se dibuja
   con border-bottom para controlarlo en hover. */
.entry-content .bz-link{
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-base);
  font-weight: 600;
  color: var(--mm-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--mm-dur) var(--mm-ease);
}

.entry-content .bz-link:hover,
.entry-content .bz-link:focus-visible{
  color: var(--mm-accent-hover);
  text-decoration: none;
  border-bottom-color: currentColor;
}

/* Rutas dentro del panel: se leen como interfaz, no como prosa */
.bz-path{
  font-size: .95em;
  font-weight: 600;
  color: var(--mm-ink);
  background: var(--mm-surface-sunken);
  border-radius: var(--mm-radius-sm);
  padding: .0625rem .375rem;
  white-space: nowrap;
}

/* El cierre con WhatsApp no se repite aquí: page-soporte.php ya renderiza su
   propio bloque .mm-soporte-cta al final de la plantilla. Duplicarlo en el
   contenido dejaba dos llamados idénticos seguidos. */

/* ---------------------------------------------------------------------------
   Responsive y accesibilidad
   --------------------------------------------------------------------------- */
@media (max-width: 40rem){
  .bz-q > summary{ font-size: var(--mm-text-base); padding: .875rem 1rem; }
  .bz-a{ padding-inline: 1rem; }
  .bz-table th,
  .bz-table td{ padding: .625rem .75rem; font-size: var(--mm-text-sm); }
}

/* .bz-link va anidado también aquí: la media query no suma especificidad y la
   regla base (.entry-content .bz-link) le ganaría. */
@media (prefers-reduced-motion: reduce){
  .bz-q,
  .bz-q > summary::after,
  .entry-content .bz-link{ transition: none; }
}

/* ========================================================================
   4. FAQ ARTICLE CARD — "Soporte / Apoyo"
   ========================================================================
 * The question rendered as its own highlighted card, echoing the accent
 * hairline recursos.css uses on its form card, then plain article typography
 * for the answer. Selectors are unscoped classes (`.mm-faq-*`) written by
 * hand into the post content, matching how the rest of the site's bespoke
 * copy blocks work (`.mm-hero`, `.mm-section-head`).
 * ======================================================================== */
.mm-faq-question{
  position: relative;
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 28px);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-sm);
  overflow: hidden;
}

.mm-faq-question::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mm-accent), #F87171);
}

.mm-faq-question__label{
  display: inline-block;
  margin: 0 0 8px;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-2xs) !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--mm-accent) !important;
}

.mm-faq-question p{
  margin: 0 !important;
  font-family: var(--mm-font-display) !important;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--mm-ink) !important;
}

.mm-faq-answer{
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-base) !important;
  line-height: 1.7 !important;
  color: var(--mm-ink-muted) !important;
}

.mm-faq-answer p{
  margin: 0 0 16px !important;
}

.mm-faq-answer ul{
  margin: 0 0 20px !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.mm-faq-answer li{
  position: relative;
  padding: 8px 0 8px 26px !important;
  border-bottom: 1px solid var(--mm-border);
}

.mm-faq-answer li:last-child{
  border-bottom: 0;
}

.mm-faq-answer li::before{
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  font-weight: 700;
  color: var(--mm-accent);
}

.mm-faq-related{
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--mm-border);
}

.mm-faq-related__title{
  margin: 0 0 12px !important;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  color: var(--mm-ink-subtle) !important;
}

.mm-faq-related ul{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mm-faq-related li{
  margin: 0 0 8px !important;
}

.mm-faq-related a{
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm) !important;
  font-weight: 500;
  color: var(--mm-accent) !important;
  text-decoration: none;
}

.mm-faq-related a:hover{
  text-decoration: underline;
}

/* ========================================================================
   5. LEADERSHIP GRID — "Conoce al equipo que lidera Mercado Mayor"
   ========================================================================
 * Three cards written as a wp:columns block (matching how the rest of the
 * site's block-editor pages are authored), styled here. No photography yet,
 * so each card gets an initials badge in the brand's pastel tier instead of
 * a broken image placeholder.
 * ======================================================================== */
body.mm-soporte-post .entry-content .wp-block-columns{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin: 0 0 clamp(20px, 2.6vw, 32px);
}

body.mm-soporte-post .entry-content .wp-block-column{
  margin: 0 !important;
}

.mm-team-card{
  height: 100%;
  padding: clamp(22px, 2.6vw, 30px) clamp(18px, 2vw, 22px);
  text-align: center;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-sm);
  transition: box-shadow var(--mm-dur) var(--mm-ease),
              transform var(--mm-dur) var(--mm-ease),
              border-color var(--mm-dur) var(--mm-ease);
}

.mm-team-card:hover{
  border-color: var(--mm-border-strong);
  box-shadow: var(--mm-shadow-md);
  transform: translateY(-3px);
}

.mm-team-card__avatar{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  font-family: var(--mm-font-display) !important;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--mm-ink);
  background: var(--mm-accent-pastel);
  border-radius: 50%;
}

.mm-team-card__name{
  margin: 0 0 3px !important;
  font-family: var(--mm-font-display) !important;
  font-size: var(--mm-text-lg) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--mm-ink) !important;
}

.mm-team-card__role{
  margin: 0 0 12px !important;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mm-accent) !important;
}

.mm-team-card__bio{
  margin: 0 !important;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm) !important;
  line-height: 1.6 !important;
  color: var(--mm-ink-muted) !important;
}

/* ========================================================================
   6. ANNOUNCEMENT CARDS — "Anuncios"
   ========================================================================
 * Written as a wp:group per card (block-editor-editable), styled here as a
 * simple dated list rather than a magazine grid — announcements are read
 * newest-first, one at a time, so a single column keeps that order obvious.
 * ======================================================================== */
.mm-announce-list{
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 20px);
  max-width: 760px;
  margin: 0 auto;
}

.mm-announce-card{
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-sm);
  transition: box-shadow var(--mm-dur) var(--mm-ease),
              border-color var(--mm-dur) var(--mm-ease);
}

.mm-announce-card:hover{
  border-color: var(--mm-border-strong);
  box-shadow: var(--mm-shadow);
}

.mm-announce-card__date{
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--mm-font-ui) !important;
  color: var(--mm-ink);
  background: var(--mm-accent-soft);
  border-radius: var(--mm-radius);
}

.mm-announce-card__date-day{
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.mm-announce-card__date-month{
  font-size: var(--mm-text-2xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mm-accent);
}

.mm-announce-card__body{
  min-width: 0;
}

.mm-announce-card__tag{
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-2xs) !important;
  font-weight: 600 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mm-ink-subtle) !important;
}

.mm-announce-card__title{
  margin: 0 0 6px !important;
  font-family: var(--mm-font-display) !important;
  font-size: var(--mm-text-lg) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--mm-ink) !important;
}

.mm-announce-card__excerpt{
  margin: 0 0 10px !important;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm) !important;
  line-height: 1.6 !important;
  color: var(--mm-ink-muted) !important;
}

.mm-announce-card__link{
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm) !important;
  font-weight: 600;
  color: var(--mm-accent) !important;
  text-decoration: none;
}

.mm-announce-card__link:hover{
  text-decoration: underline;
}

/* ========================================================================
   7. "CONTENIDO DE EJEMPLO" BADGE
   ========================================================================
 * Marks the placeholder pieces (the FAQ answer, the team bios, two of the
 * three announcements) so they read as a design preview rather than
 * something already final — a flag for whoever swaps in the real copy, not
 * a permanent fixture. Dashed border keeps it visually distinct from every
 * other solid-bordered chip on the site, on purpose.
 * ======================================================================== */
.mm-example-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 5px 12px;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-2xs) !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  color: var(--mm-ink-subtle) !important;
  background: var(--mm-surface);
  border: 1px dashed var(--mm-border-strong);
  border-radius: var(--mm-radius-pill);
}

.mm-example-badge::before{
  content: '✎';
  font-size: .9em;
}

/* ========================================================================
   8. CLOSING CTA — page-soporte.php
   ======================================================================== */
.mm-soporte-cta{
  max-width: 560px;
  margin: clamp(32px, 4vw, 52px) auto 0;
  padding: clamp(24px, 3vw, 36px);
  text-align: center;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-sm);
}

.mm-soporte-cta__title{
  margin: 0 0 6px !important;
  font-family: var(--mm-font-display) !important;
  font-size: var(--mm-text-lg) !important;
  font-weight: 600 !important;
  color: var(--mm-ink) !important;
}

.mm-soporte-cta__text{
  margin: 0 0 18px !important;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm) !important;
  color: var(--mm-ink-muted) !important;
}

/* ========================================================================
   9. SINGLE-POST CHROME — meta row, category badge, sidebar
   ======================================================================== */
body.mm-soporte-post .metabox{
  margin-bottom: clamp(16px, 2vw, 24px);
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-xs);
  color: var(--mm-ink-subtle);
}

body.mm-soporte-post .single-post-category{
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}

body.mm-soporte-post .single-post-category a{
  display: inline-block;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-2xs) !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mm-accent) !important;
  background: var(--mm-accent-soft);
  border-radius: var(--mm-radius-pill);
  padding: 4px 12px;
  text-decoration: none !important;
}

body.mm-soporte-post .entry-content{
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-base);
  line-height: 1.7;
  color: var(--mm-ink-muted);
}

/* Card treatment for the default "Buscar" / "Recent Posts" widgets — the
   theme prints these as bare boxes with a thin rule; wrapping them the way
   every other panel on the site is wrapped keeps the sidebar from feeling
   like a leftover default. */
body.mm-soporte-post #sidebar .widget{
  padding: clamp(16px, 2vw, 22px);
  margin-bottom: clamp(16px, 2vw, 22px);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-sm);
}

body.mm-soporte-post #sidebar .widget-title{
  font-family: var(--mm-font-display) !important;
}

body.mm-soporte-post #sidebar input[type="submit"],
body.mm-soporte-post #sidebar .wp-block-search__button{
  background: var(--mm-accent-pastel) !important;
  border-color: var(--mm-accent-pastel) !important;
  color: var(--mm-ink) !important;
}

body.mm-soporte-post #sidebar input[type="submit"]:hover,
body.mm-soporte-post #sidebar .wp-block-search__button:hover{
  background: var(--mm-accent-pastel-hover) !important;
  border-color: var(--mm-accent-pastel-hover) !important;
}

/* ========================================================================
   10. RESPONSIVE
   ======================================================================== */
@media (max-width: 991px){
  body.mm-soporte-post .entry-content .wp-block-columns{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  body.mm-page-soporte .entry-content .wp-block-columns{
    display: block;
  }
  body.mm-soporte-post .entry-content .wp-block-columns{
    grid-template-columns: minmax(0, 1fr);
  }
  .mm-announce-card{
    flex-direction: column;
  }
  .mm-announce-card__date{
    flex-direction: row;
    gap: 6px;
    width: auto;
    height: auto;
    align-self: flex-start;
    padding: 4px 12px;
  }
}