/**
 * Mercado Mayor — "Recursos" section
 * ---------------------------------------------------------------------------
 * Covers all four pages under the Recursos menu:
 *
 *   aplica-para-vender          FluentForm #4 (brand / manufacturer application)
 *   aplica-para-comprar         FluentForm #5 (retailer application)
 *   emprende-con-mercado-mayor  block-editor landing card
 *   ferias                      block-editor card + benefit columns
 *
 * Scoped with `body.mm-recursos` / `body.mm-page-{slug}` — see
 * mercado_mayor_page_slug_body_class() in functions.php. Slug classes rather
 * than `page-id-N` so the CSS survives a page being recreated.
 *
 * TWO SOURCES OF !important HERE, both unavoidable:
 *
 *   1. The two landing pages were built in the block editor with everything
 *      written into `style="..."` attributes (padding, colours, font sizes,
 *      border radius). Inline styles outrank any stylesheet, so re-skinning
 *      them to the design system needs !important. The alternative would be
 *      rewriting the blocks and losing the client's ability to edit the copy.
 *   2. The typography customizer prints `body.ctypo p/h1/h2/h3 { font-family }`
 *      after every stylesheet — see the note at the top of page-hero.css.
 */

/* ========================================================================
   1. SHARED PAGE FRAME
   ========================================================================
 * A quiet backdrop so these pages stop reading as a form floating on blank
 * white. Three stacked layers, all cheap and all CSS — no image request:
 *
 *   1. a faint dot grid, the texture that does the actual work
 *   2. a soft accent glow bleeding down from the top edge
 *   3. a vertical wash from the off-white surface back to plain white
 *
 * It goes on <main> rather than <body> so the white header and the dark footer
 * are untouched, and it is full-bleed because <main> sits outside .container.
 */
/* The dot grid this replaces was texture for texture's sake: at 20px it read
 * as noise directly behind a form someone is trying to read, and it fought
 * the form's own card for attention. Two very faint colour pools over a
 * white-to-off-white wash do the same job — giving the page air and warmth
 * so the card floats rather than sits on a flat sheet — without putting
 * anything behind the text.
 *
 * Both pools are under 5% opacity and drawn from the brand's own palette
 * (the coral accent, and the warm sand that the surfaces are tinted with),
 * so the page reads as warm rather than as coloured. */
body.mm-recursos main.content-vw{
  position: relative;
  background-color: var(--mm-surface);
  background-image:
    radial-gradient(64% 52% at 10% 0%, rgba(210, 61, 45, .045), transparent 62%),
    radial-gradient(56% 48% at 94% 12%, rgba(180, 140, 90, .04), transparent 60%),
    linear-gradient(180deg, var(--mm-surface) 0%, var(--mm-surface-alt) 46%, var(--mm-surface) 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat;
  padding-bottom: clamp(24px, 3.2vw, 48px);
}

/* Fades the dot grid out towards the bottom so the texture does not run into
   the footer as a hard edge. Sits behind the content via a negative z-index on
   a positioned ancestor. */
body.mm-recursos main.content-vw::after{
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 180px;
  background: linear-gradient(180deg, transparent, var(--mm-surface));
  pointer-events: none;
}

/* Keeps the page content above the fade. */
body.mm-recursos main.content-vw > *{
  position: relative;
  z-index: 1;
}

/* b2b-marketplace.css §3 paints `.middle-align` solid white. That wrapper is
   1489px wide here, so it covered the backdrop above and left the texture
   showing only in two thin strips down the outer edges of the viewport. */
body.mm-recursos .middle-align{
  background-color: transparent;
}



/* The theme prints the page title as a bare left-aligned h1. Centred, on the
   display face, with the same short accent rule the other section headings
   use, so Recursos matches Carrera and Sobre Nosotros. */
body.mm-recursos .vw-page-title{
  max-width: 26ch;
  margin: 0 auto clamp(20px, 2.6vw, 36px);
  font-family: var(--mm-font-display) !important;
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  font-weight: 600 !important;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--mm-ink);
}

body.mm-recursos .vw-page-title::after{
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: var(--mm-accent);
}

/* The breadcrumb chips are decoration on these pages; keep them quiet. */
body.mm-recursos .bradcrumbs{
  margin-bottom: clamp(12px, 1.6vw, 22px);
}

/* ========================================================================
   2. FLUENTFORM — application forms
   ========================================================================
 * Structure FluentForm emits (v5):
 *   .fluentform > form.frm-fluent-form > fieldset
 *     > .ff-el-group.ff-el-section-break   (optional heading + <hr>)
 *     > .ff-el-group                       one per field
 *         > .ff-el-input--label > label (+ .ff-el-tooltip)
 *         > .ff-el-input--content > input.ff-el-form-control | textarea
 *     > .ff-el-group.ff_submit_btn_wrapper > button.ff-btn-submit
 */

/* -- Undo FluentForm's own card ------------------------------------------
 * The `ffs_default` skin styles the <form> element itself as a panel: white
 * background, 1px border, 40px padding. Wrapping that in a card of our own
 * produced two visibly nested boxes. The wrapper below owns the card; the form
 * is just layout. */
body.mm-recursos form.frm-fluent-form{
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* -- The form as a card --------------------------------------------------
 * 620px rather than 760: on a desktop the wider card read as a slab, and a
 * narrower measure is both calmer and closer to how the rest of the site is
 * proportioned. The two-up field grid still fits comfortably at this width.
 * A stronger shadow than elsewhere, because the card now has to lift off a
 * textured backdrop instead of plain white. */
body.mm-recursos .fluentform{
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(18px, 2.4vw, 32px);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-md);
  overflow: hidden;   /* clips the accent edge below to the rounded corners */
}

/* A hairline of brand colour along the top edge — the one flourish, enough to
   stop the card being a plain white rectangle. */
body.mm-recursos .fluentform::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mm-accent), #F87171);
}

/* -- Two-up field grid ---------------------------------------------------
 * The grid goes on the fieldset, not the form, because FluentForm wraps every
 * field in one. Short inputs pair up automatically; anything that needs the
 * full width opts out below. This is driven by what a field IS rather than by
 * its position, so reordering fields in the FluentForm builder cannot break it.
 * Hidden inputs are `display: none` in the UA stylesheet, so they never become
 * stray grid items. */
body.mm-recursos form.frm-fluent-form > fieldset{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  border: 0;
}

body.mm-recursos form.frm-fluent-form > fieldset > legend{
  grid-column: 1 / -1;
}

body.mm-recursos .ff-el-group{
  margin: 0;
  min-width: 0;   /* lets long placeholders shrink instead of forcing overflow */
}

/* Keep the inputs in a row on one line.
 * The grid already gives both cells in a row the same height; making the field
 * a column and pushing its control to the bottom means a label that wraps onto
 * two lines no longer drags its own input 40px below its neighbour's. The
 * heading and submit rows opt out — as flex columns they would stretch their
 * single child to the full width. */
body.mm-recursos .ff-el-group:not(.ff-el-section-break):not(.ff_submit_btn_wrapper){
  display: flex;
  flex-direction: column;
}

/* The explicit width is not redundant. FluentForm renders the textarea with
   `cols="2"`, which gives it a ~57px intrinsic width, and that propagated up to
   this wrapper instead of the wrapper filling its field — the description box
   ended up as a one-word-per-line sliver pinned to the right of its label.
   Sizing the wrapper and the control to 100% makes the field own the width
   regardless of the control's intrinsic size. */
body.mm-recursos .ff-el-group > .ff-el-input--content{
  width: 100%;
  min-width: 0;
  margin-top: auto;
}

/* Full-width rows: the section heading, any textarea, and the submit row. */
body.mm-recursos .ff-el-group.ff-el-section-break,
body.mm-recursos .ff-el-group.ff_submit_btn_wrapper,
body.mm-recursos .ff-el-group:has(textarea){
  grid-column: 1 / -1;
}

/* -- Section break (form heading) --------------------------------------- */
body.mm-recursos .ff-el-section-break{
  margin-bottom: 4px;
}

body.mm-recursos h3.ff-el-section-title{
  margin: 0 0 6px;
  font-family: var(--mm-font-display) !important;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--mm-ink);
}

body.mm-recursos .ff-section_break_desk{
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm);
  line-height: 1.6;
  color: var(--mm-ink-muted);
}

/* The builder emits a rule after the description; the card already separates
   the heading from the fields. */
body.mm-recursos .ff-el-section-break hr{
  margin: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--mm-border);
}

/* -- Labels ------------------------------------------------------------- */
body.mm-recursos .ff-el-input--label{
  margin-bottom: 5px;
  line-height: 1.4;
}

/* `display: inline` is the fix, and needs !important because FluentForm sets
   the label to `block`. As a block it filled the row, which pushed the
   inline-block tooltip icon onto a line of its own underneath. Inline lets the
   icon sit next to the last word, and long labels still wrap normally. */
body.mm-recursos .ff-el-input--label label{
  display: inline !important;
  margin: 0;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--mm-ink);
}

/* FluentForm appends the asterisk through the label's own markup. */
body.mm-recursos .ff-el-is-required label::after{
  color: var(--mm-accent);
  margin-left: 2px;
}

/* Optional fields read as optional rather than as an oversight. */
body.mm-recursos .ff-el-input--label:not(.ff-el-is-required) label::after{
  content: ' (opcional)';
  font-weight: 400;
  font-size: var(--mm-text-xs);
  color: var(--mm-ink-subtle);
}

/* Sits beside the label text rather than under it. FluentForm ships this icon
   in its own blue; muted grey keeps the accent reserved for actions. */
body.mm-recursos .ff-el-tooltip{
  display: inline-block;
  vertical-align: -2px;
  margin-left: 4px;
  color: var(--mm-ink-subtle) !important;
  line-height: 1;
}

body.mm-recursos .ff-el-tooltip svg{
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* -- Inputs ------------------------------------------------------------- */
/* Matches the site-wide field treatment in b2b-marketplace.css §6, which does
   not reach these because FluentForm uses its own control class. */
body.mm-recursos .ff-el-form-control{
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-base);
  line-height: 1.5;
  color: var(--mm-ink);
  background-color: var(--mm-surface);
  border: 1px solid var(--mm-border-strong);
  border-radius: var(--mm-radius-sm);
  padding: var(--mm-pad-control-y) var(--mm-pad-control-x);
  box-shadow: none;
  transition: border-color var(--mm-dur) var(--mm-ease),
              box-shadow var(--mm-dur) var(--mm-ease);
}

body.mm-recursos .ff-el-form-control:focus{
  outline: none;
  border-color: var(--mm-accent);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

body.mm-recursos .ff-el-form-control::placeholder{
  color: var(--mm-ink-subtle);
  opacity: 1;
}

body.mm-recursos textarea.ff-el-form-control{
  width: 100% !important;   /* beats the cols="2" intrinsic width */
  min-height: 118px;
  resize: vertical;
}

/* -- Submit -------------------------------------------------------------
 * Centred. The wrapper is deliberately left as a block (it opts out of the
 * flex-column rule above), so text-align is all it takes to centre the
 * inline-block button — and FluentForm's own `ff-text-left` alignment class has
 * to be overridden for it to land. */
body.mm-recursos .ff_submit_btn_wrapper{
  margin-top: 6px;
  text-align: center !important;
}

/* The colours carry !important because the `ffs_default` skin paints this
   button its own washed-out red (#f56c6c) at a specificity this cannot reach —
   the brand accent has to be forced or the primary action looks disabled. */
body.mm-recursos .ff-btn-submit{
  display: inline-block;
  width: auto;
  min-width: 190px;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-transform: none;
  text-align: center;
  color: var(--mm-ink) !important;
  background: var(--mm-accent-pastel) !important;
  background-image: none !important;
  border: 1px solid var(--mm-accent-pastel) !important;
  border-radius: var(--mm-radius);
  padding: var(--mm-pad-btn-y) calc(var(--mm-pad-btn-x) + 8px);
  box-shadow: var(--mm-shadow-sm);
  cursor: pointer;
  transition: background-color var(--mm-dur) var(--mm-ease),
              border-color var(--mm-dur) var(--mm-ease),
              box-shadow var(--mm-dur) var(--mm-ease),
              transform var(--mm-dur) var(--mm-ease);
}

body.mm-recursos .ff-btn-submit:hover,
body.mm-recursos .ff-btn-submit:focus-visible{
  background: var(--mm-accent-pastel-hover) !important;
  border-color: var(--mm-accent-pastel-hover) !important;
  color: var(--mm-ink) !important;
  box-shadow: var(--mm-shadow-accent);
  transform: translateY(-1px);
}

body.mm-recursos .ff-btn-submit:active{
  transform: translateY(0);
  box-shadow: var(--mm-shadow-sm);
}

/* -- Validation and response messages ----------------------------------- */
body.mm-recursos .ff-el-form-control.ff-el-is-error,
body.mm-recursos .ff-el-form-control:invalid:not(:placeholder-shown){
  border-color: var(--mm-accent);
}

body.mm-recursos .error.text-danger,
body.mm-recursos .ff-el-form-check-label .error{
  display: block;
  margin-top: 5px;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-xs);
  line-height: 1.45;
  color: var(--mm-accent);
}

body.mm-recursos .ff-message-success,
body.mm-recursos .ff_submit_success{
  margin: 0;
  padding: 16px 18px;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-base);
  line-height: 1.6;
  color: var(--mm-ink);
  background: var(--mm-surface-alt);
  border: 1px solid var(--mm-border);
  border-top: 2px solid var(--mm-accent);
  border-radius: var(--mm-radius);
}

body.mm-recursos .ff-errors-in-stack,
body.mm-recursos .ff_form_instance .text-danger{
  border-radius: var(--mm-radius-sm);
}

/* ========================================================================
   3. BLOCK-EDITOR LANDING CARDS — "Emprende" and "Ferias"
   ========================================================================
 * Everything in this block fights inline styles written by the editor, so the
 * !important flags are load-bearing rather than defensive.
 */

/* -- Outer card --------------------------------------------------------- */
body.mm-recursos .entry-content > .wp-block-group{
  padding: clamp(22px, 3.2vw, 44px) clamp(18px, 2.8vw, 40px) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius-lg) !important;
  box-shadow: var(--mm-shadow-sm) !important;
  background: var(--mm-surface) !important;
}

/* -- The pill above the headline ---------------------------------------- */
/* Targeted by its inline `text-transform:uppercase`, the one thing that
   distinguishes it from every other span in the content. */
body.mm-recursos .entry-content span[style*="uppercase"]{
  display: inline-block;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-2xs) !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  padding: 5px 12px !important;
  border-radius: var(--mm-radius-pill) !important;
  background-color: var(--mm-accent-soft) !important;
  color: var(--mm-accent) !important;
}

/* -- Headlines ----------------------------------------------------------
 * Deliberately no `color` here. The editor already writes a colour inline on
 * every heading and paragraph in these two pages, and it varies by context:
 * #111827 / #4B5563 inside the white cards, but #FFFFFF / #9CA3AF inside the
 * dark "¿Quieres que tu marca participe...?" call-to-action panel. Forcing the
 * ink token turned that panel's white heading near-black on a near-black
 * background. Typeface, size and rhythm are ours; colour stays the content's.
 */
body.mm-recursos .entry-content h1{
  margin: 14px 0 12px !important;
  font-family: var(--mm-font-display) !important;
  font-size: clamp(1.4375rem, 2.9vw, 2.125rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}

body.mm-recursos .entry-content h3{
  font-family: var(--mm-font-display) !important;
  font-size: var(--mm-text-lg) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
}

body.mm-recursos .entry-content p{
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-base) !important;
  line-height: 1.65 !important;
}

/* -- Call-to-action links ----------------------------------------------- */
/* The editor styles these as red blocks inline; this brings them onto the same
   button as the rest of the site. */
body.mm-recursos .entry-content a[style*="background-color"]{
  display: inline-block;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-sm) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  color: var(--mm-ink) !important;
  background-color: var(--mm-accent-pastel) !important;
  border: 1px solid var(--mm-accent-pastel) !important;
  border-radius: var(--mm-radius) !important;
  padding: var(--mm-pad-btn-y) calc(var(--mm-pad-btn-x) + 6px) !important;
  box-shadow: var(--mm-shadow-sm) !important;
  transition: background-color var(--mm-dur) var(--mm-ease),
              box-shadow var(--mm-dur) var(--mm-ease),
              transform var(--mm-dur) var(--mm-ease);
}

body.mm-recursos .entry-content a[style*="background-color"]:hover,
body.mm-recursos .entry-content a[style*="background-color"]:focus-visible{
  background-color: var(--mm-accent-pastel-hover) !important;
  border-color: var(--mm-accent-pastel-hover) !important;
  color: var(--mm-ink) !important;
  box-shadow: var(--mm-shadow-accent) !important;
  transform: translateY(-1px);
}

/* -- Benefit columns (Ferias) ------------------------------------------- */
/* Same treatment as the Carrera value cards: a real grid instead of the
   editor's flex row, so the columns collapse predictably. */
body.mm-recursos .entry-content .wp-block-columns{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  align-items: stretch;
  margin: 0 0 clamp(18px, 2.4vw, 30px);
}

body.mm-recursos .entry-content .wp-block-column{
  margin: 0 !important;
  padding: clamp(15px, 1.8vw, 22px) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  background-color: var(--mm-surface-alt) !important;
  transition: border-color var(--mm-dur) var(--mm-ease),
              box-shadow var(--mm-dur) var(--mm-ease),
              transform var(--mm-dur) var(--mm-ease);
}

body.mm-recursos .entry-content .wp-block-column:hover{
  border-color: var(--mm-border-strong) !important;
  box-shadow: var(--mm-shadow) !important;
  transform: translateY(-2px);
}

body.mm-recursos .entry-content .wp-block-column h3{
  margin: 0 0 6px !important;
  font-size: var(--mm-text-md) !important;
}

body.mm-recursos .entry-content .wp-block-column p{
  margin: 0 !important;
  font-size: var(--mm-text-sm) !important;
}

/* -- Icon chips --------------------------------------------------------- */
/* Matched on the inline flex centring the editor writes for them. */
body.mm-recursos .entry-content div[style*="border-radius:8px"][style*="flex"]{
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--mm-radius-sm) !important;
  background-color: var(--mm-accent-soft) !important;
  margin-bottom: 12px !important;
  flex: 0 0 auto;
}

body.mm-recursos .entry-content .wp-block-column svg,
body.mm-recursos .entry-content div[style*="border-radius:8px"] svg{
  width: 16px;
  height: 16px;
  stroke: var(--mm-accent);
}

/* -- Emprende: the card is a single centred column ----------------------- */
/* The block is written with `text-align:center` inline; the paragraph also
   carries an inline max-width that centres on its own. All this adds is a
   sensible cap on the card itself so the CTA does not sit adrift in 1560px. */
body.mm-page-emprende-con-mercado-mayor .entry-content > .wp-block-group{
  max-width: 860px;
  margin-inline: auto;
}

/* ========================================================================
   4. MEDIA BAND — the framed photo on Ferias and Emprende
   ========================================================================
 * Used by page-ferias.php and page-emprende-con-mercado-mayor.php. The photo
 * sits on a tinted panel with a visible margin all round, so the backdrop
 * frames it rather than the image running edge to edge. `aspect-ratio` plus
 * `object-fit: cover` keeps it a predictable letterbox at every width instead
 * of a 1400px-tall wall on a desktop.
 */
.mm-media-band{
  margin: 0 0 clamp(20px, 2.8vw, 38px);
  padding: clamp(10px, 1.2vw, 16px);
  border: 1px solid var(--mm-border);
  border-radius: calc(var(--mm-radius-lg) + 6px);
  background-color: var(--mm-surface);
  background-image:
    radial-gradient(70% 90% at 15% 0%, rgba(220, 38, 38, .07), transparent 65%),
    linear-gradient(140deg, var(--mm-surface-alt), var(--mm-surface-sunken));
  box-shadow: var(--mm-shadow-sm);
}

.mm-media-band__frame{
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--mm-radius-lg);
  background: var(--mm-surface-sunken);   /* holds the box while the file loads */
  box-shadow: var(--mm-shadow-md);
}

.mm-media-band__frame img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 440px;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center;
}

/* The `--collage` variant this file used to carry was removed with the Emprende
   redesign: that page no longer uses the wide band at all. Its photograph now
   closes the page in the small classic frame in §6. Only Ferias uses the band. */

@media (max-width: 599px){
  .mm-media-band{
    padding: 8px;
    border-radius: var(--mm-radius-lg);
  }
  .mm-media-band__frame{
    border-radius: var(--mm-radius);
  }
  .mm-media-band__frame img{
    aspect-ratio: 4 / 3;   /* a 16:7 strip is too thin to read on a phone */
    max-height: 280px;
  }
  .mm-plate__mat{
    padding: 10px;
  }
}

/* ========================================================================
   6. EMPRENDE — hero and closing plate
   ======================================================================== */

.mm-hero--emprende{
  min-height: clamp(290px, 32vw, 430px);
  margin-bottom: clamp(22px, 2.8vw, 40px);
}

/* The editor's own headline is demoted to <h2> on output (see the template), so
   the hero keeps the page's only <h1>. It still needs to read as the card's
   headline, which is what the h1 rule in §3 already describes. */
body.mm-page-emprende-con-mercado-mayor .entry-content > .wp-block-group h2{
  margin: 14px 0 12px !important;
  font-family: var(--mm-font-display) !important;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

/* -- Closing block: photograph + how it works ----------------------------
 * Centring the small frame on its own left a wide band of dead page down both
 * sides of it. Pairing it with the steps fills the row honestly — the picture
 * stays small, and the space beside it carries something worth reading.
 */
.mm-emprende-how{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  max-width: 1040px;
  margin: clamp(26px, 3.4vw, 48px) auto 0;
  padding-top: clamp(22px, 2.8vw, 38px);
  border-top: 1px solid var(--mm-border);
}

/* -- The framed print ----------------------------------------------------
 * A white mat with a hairline rule inset from its edge, the way a
 * passe-partout sits inside a frame. Small on purpose — the photograph
 * supports the offer, it is not the offer.
 */
.mm-plate{
  max-width: clamp(260px, 34vw, 400px);
  margin: 0;
  padding: 0;
}

.mm-plate__mat{
  position: relative;
  display: block;
  padding: clamp(12px, 1.4vw, 18px);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border-strong);
  box-shadow: var(--mm-shadow);
}

/* The inner rule — drawn as a border on a pseudo-element inset from the mat's
   edge, so it tracks the padding at every size without extra markup. */
.mm-plate__mat::before{
  content: '';
  position: absolute;
  inset: clamp(6px, .7vw, 9px);
  border: 1px solid var(--mm-border);
  pointer-events: none;
}

/* Square corners, not rounded: the rounded radius used elsewhere on the site
   reads as a UI card, and this is meant to read as a picture. Overrides the
   site-wide image radius from b2b-marketplace.css. */
.mm-plate__img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2704 / 1472;   /* the file's own ratio — no crop, no letterbox */
  object-fit: cover;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* -- "Cómo funciona" column --------------------------------------------- */
.mm-emprende-how__kicker{
  margin: 0 0 8px;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-2xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mm-accent);
}

/* `text-transform`/`text-align` are declared because style.css carries
   `section h2 { text-transform: uppercase; text-align: center }` and this sits
   inside a <section>. */
.mm-emprende-how__title{
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  font-family: var(--mm-font-display) !important;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem) !important;
  font-weight: 600 !important;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-transform: none;
  text-align: left;
  color: var(--mm-ink);
}

.mm-steps{
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  padding: 0;
  list-style: none;   /* the numbers are drawn below, so the marker is dropped */
  counter-reset: none;
}

.mm-step{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  padding: 0;
}

.mm-step:last-child{
  margin-bottom: 0;
}

/* A thin outlined disc rather than a filled one — quieter, and it matches the
   hairline language of the frame beside it. */
.mm-step__num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-xs);
  font-weight: 600;
  line-height: 1;
  color: var(--mm-accent);
  background: var(--mm-surface);
  border: 1px solid var(--mm-accent);
  border-radius: var(--mm-radius-pill);
}

.mm-step__title{
  margin: 0 0 3px !important;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-md) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  text-align: left;
  color: var(--mm-ink) !important;
}

.mm-step__text{
  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;
}

.mm-emprende-how__note{
  margin: 0 0 clamp(14px, 1.8vw, 20px) !important;
  font-family: var(--mm-font-ui) !important;
  font-size: var(--mm-text-xs) !important;
  line-height: 1.5 !important;
  color: var(--mm-ink-subtle) !important;
}

/* ========================================================================
   7. RESPONSIVE
   ======================================================================== */

/* Below this the two-up field grid would leave inputs too narrow to read the
   placeholder in, so it becomes a single stack. */
@media (max-width: 700px){
  body.mm-recursos form.frm-fluent-form > fieldset{
    grid-template-columns: minmax(0, 1fr);
  }

  body.mm-recursos .ff-btn-submit{
    width: 100%;
    min-width: 0;
  }
}

/* Below this the picture is too narrow to make out four panels beside a column
   of text, so the pair stacks and the frame centres itself again. */
@media (max-width: 860px){
  .mm-emprende-how{
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: left;
  }
  .mm-plate{
    max-width: clamp(260px, 62vw, 380px);
  }
  .mm-emprende-how__body{
    width: 100%;
    max-width: 520px;
  }
}

@media (max-width: 599px){
  body.mm-recursos .entry-content .wp-block-columns{
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-emprende-how .mm-btn{
    display: block;
    width: 100%;
    text-align: center;
  }

  /* The card border adds visual width without adding room; on a phone the
     content is better off using the screen. */
  body.mm-recursos .fluentform,
  body.mm-recursos .entry-content > .wp-block-group{
    border-radius: var(--mm-radius) !important;
  }

  body.mm-recursos .entry-content a[style*="background-color"]{
    display: block !important;
    text-align: center;
  }
}