/* ============================================================
   másfollowers — heroes.css
   Editorial forest-on-white hero system. ONE shared block
   makes every hero pop against the rest of the (pure white)
   site, but each page gets its own ornament so they don't
   feel cookie-cutter.

   Loaded AFTER the page-specific CSS so it wins the cascade.
   Depends on theme_style.css for tokens.

   Hero hooks (existing markup, no rename needed):
     .mf-hero          → homepage
     .mf-page-hero     → services index, packs index
     .mf-snet-hero     → social-network category page
     .mf-svc-hero      → service detail
     .mf-content-hero  → faq, contact, blog index
     .mf-misc-hero     → about, tools, legal
     .mf-article-hero  → blog detail (image hero — left untouched)
   ============================================================ */

/* =========================================================
   1. SHARED FOREST CANVAS
   Apply to every hero block above.
   ========================================================= */
.mf-hero,
.mf-page-hero,
.mf-snet-hero,
.mf-svc-hero,
.mf-content-hero,
.mf-misc-hero{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(200,160,107,.10), transparent 55%),
    radial-gradient(80% 60% at 0% 100%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #0A4A2E 0%, #0E5C3A 55%, #0C5234 100%);
  color:#FFFFFF;
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

/* Editorial scaffolding — vertical guide rail + paper grain */
.mf-hero::before,
.mf-page-hero::before,
.mf-snet-hero::before,
.mf-svc-hero::before,
.mf-content-hero::before,
.mf-misc-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:88px 100%;
  background-position:24px 0;
  pointer-events:none;
  z-index:0;
  mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

/* Soft grain — fakes letterpress on a colour ground */
.mf-hero::after,
.mf-page-hero::after,
.mf-snet-hero::after,
.mf-svc-hero::after,
.mf-content-hero::after,
.mf-misc-hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
  background-size:3px 3px, 3px 3px;
  background-position:0 0, 1.5px 1.5px;
  opacity:.5;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:0;
}

/* Lift inner content above the layers */
.mf-hero > *,
.mf-page-hero > *,
.mf-snet-hero > *,
.mf-svc-hero > *,
.mf-content-hero > *,
.mf-misc-hero > *{
  position:relative; z-index:1;
}

/* =========================================================
   2. SHARED TYPOGRAPHY ON FOREST
   Override the white-surface variants where needed.
   ========================================================= */
.mf-hero h1,
.mf-page-hero h1,
.mf-snet-hero h1,
.mf-svc-hero h1,
.mf-content-hero h1,
.mf-misc-hero h1,
.mf-misc-hero-inner h1{
  color:#FFFFFF;
}
.mf-hero h1 em, .mf-hero h1 .ed,
.mf-page-hero h1 em, .mf-page-hero h1 .ed,
.mf-snet-hero h1 em, .mf-snet-hero h1 .ed,
.mf-svc-hero h1 em, .mf-svc-hero h1 .ed,
.mf-content-hero h1 em, .mf-content-hero h1 .ed,
.mf-misc-hero h1 em, .mf-misc-hero h1 .ed,
.mf-misc-hero-inner h1 em, .mf-misc-hero-inner h1 .ed{
  color:#E8C796;            /* warm gold serif italic — pops on forest */
}
.mf-hero h1 .accent,
.mf-page-hero h1 .accent,
.mf-snet-hero h1 .accent,
.mf-svc-hero h1 .accent,
.mf-content-hero h1 .accent,
.mf-misc-hero h1 .accent{
  color:#E8C796;            /* keep "accent" span visible — was forest, would vanish */
}

.mf-hero p.lede,
.mf-page-hero p.lede,
.mf-snet-hero p.lede,
.mf-svc-hero p.lede,
.mf-content-hero p.lede,
.mf-misc-hero p.lede,
.mf-misc-hero-inner p.lede{
  color:rgba(255,255,255,.78);
}

/* Eyebrow */
.mf-hero .mf-eyebrow,
.mf-hero .mf-hero-eyebrow,
.mf-page-hero .mf-content-eyebrow,
.mf-snet-hero .mf-content-eyebrow,
.mf-svc-hero .mf-svc-hero-eyebrow,
.mf-content-hero .mf-content-eyebrow,
.mf-misc-hero .mf-content-eyebrow,
.mf-misc-hero-inner .mf-content-eyebrow{
  color:rgba(232,199,150,.92);
  letter-spacing:.18em;
}
.mf-hero .mf-eyebrow em,
.mf-hero .mf-hero-eyebrow em,
.mf-page-hero .mf-content-eyebrow em,
.mf-snet-hero .mf-content-eyebrow em,
.mf-svc-hero .mf-svc-hero-eyebrow em,
.mf-content-hero .mf-content-eyebrow em,
.mf-misc-hero .mf-content-eyebrow em,
.mf-misc-hero-inner .mf-content-eyebrow em{
  color:#E8C796;
}
.mf-misc-hero-inner .mf-content-eyebrow::before{
  background:#E8C796;
}

/* Trust meta lines (homepage / services / etc.) */
.mf-hero-meta,
.mf-page-hero-meta,
.mf-svc-hero-meta{
  color:rgba(255,255,255,.70);
}
.mf-hero-meta b,
.mf-page-hero-meta b,
.mf-svc-hero-meta b{
  color:#FFFFFF;
}
.mf-hero-meta .star,
.mf-svc-hero-meta .star{ color:#E8C796; }
.mf-hero-meta .sep,
.mf-page-hero-meta .sep,
.mf-svc-hero-meta .sep{
  background:rgba(255,255,255,.30);
}

/* Buttons inside heroes — rebalance contrast */
.mf-hero .mf-btn-primary,
.mf-page-hero .mf-btn-primary,
.mf-snet-hero .mf-btn-primary,
.mf-svc-hero .mf-btn-primary,
.mf-content-hero .mf-btn-primary,
.mf-misc-hero .mf-btn-primary{
  background:#FFFFFF !important;
  color:#0A4A2E !important;
  border-color:#FFFFFF !important;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.45);
}
.mf-hero .mf-btn-primary:hover,
.mf-page-hero .mf-btn-primary:hover,
.mf-snet-hero .mf-btn-primary:hover,
.mf-svc-hero .mf-btn-primary:hover,
.mf-content-hero .mf-btn-primary:hover,
.mf-misc-hero .mf-btn-primary:hover{
  background:#F4E9D6 !important;
  border-color:#F4E9D6 !important;
}
.mf-hero .mf-btn-ghost,
.mf-hero .mf-btn-outline,
.mf-page-hero .mf-btn-ghost,
.mf-page-hero .mf-btn-outline,
.mf-snet-hero .mf-btn-ghost,
.mf-snet-hero .mf-btn-outline,
.mf-svc-hero .mf-btn-ghost,
.mf-svc-hero .mf-btn-outline,
.mf-content-hero .mf-btn-ghost,
.mf-content-hero .mf-btn-outline,
.mf-misc-hero .mf-btn-ghost,
.mf-misc-hero .mf-btn-outline{
  color:#FFFFFF !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.30) !important;
  box-shadow:none !important;
}
.mf-hero .mf-btn-ghost:hover,
.mf-page-hero .mf-btn-ghost:hover,
.mf-svc-hero .mf-btn-ghost:hover,
.mf-content-hero .mf-btn-ghost:hover,
.mf-misc-hero .mf-btn-ghost:hover{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.55) !important;
}

/* =========================================================
   3. UNIQUE ORNAMENTS — one per hero variant.
   These are absolutely positioned editorial decorations
   that prevent the "all heroes look the same" feeling.
   ========================================================= */

/* ---- 3.A HOMEPAGE — big serif "M" watermark + dotted compass corner ---- */
.mf-hero{
  padding:64px 0 72px !important;
}
@media (min-width:900px){
  .mf-hero{ padding:96px 0 112px !important; }
}
.mf-hero .mf-wrap{position:relative; z-index:1;}
.mf-hero .mf-wrap::after{
  /* Dotted compass cross in the corner */
  content:"";
  position:absolute;
  top:8px; right:0;
  width:120px; height:120px;
  background:
    radial-gradient(circle at center, transparent 0 38%, rgba(255,255,255,.18) 38% 39%, transparent 39% 100%),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255,255,255,.18) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(0deg,  transparent calc(50% - 0.5px), rgba(255,255,255,.18) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  pointer-events:none;
  display:none;
}
@media (min-width:1100px){
  .mf-hero .mf-wrap::after{ display:block; }
}

/* Big watermark "m" (subtle) */
.mf-hero::before{
  /* combine guide grid (already there) with watermark */
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:88px 100%;
}

/* Hero card (right-column visual) — flip to glass-on-forest */
.mf-hero-card{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.45) !important;
  color:#FFFFFF;
}
.mf-hero-card-head{
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}
.mf-hero-card-head .label{
  color:rgba(255,255,255,.62) !important;
}
.mf-hero-card-head .pulse{
  color:rgba(255,255,255,.85) !important;
}
.mf-hero-card-head .pulse::before{
  background:#3DD68C !important;
  box-shadow:0 0 0 4px rgba(61,214,140,.22) !important;
  animation:mfPulse 1.6s ease-in-out infinite;
}
@keyframes mfPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(61,214,140,.22); }
  50%   { box-shadow:0 0 0 7px rgba(61,214,140,.10); }
}
.mf-hero-card-row{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
.mf-hero-card-row__icon{
  background:rgba(255,255,255,.10) !important;
}
.mf-hero-card-row__name{ color:#FFFFFF !important; }
.mf-hero-card-row__sub{  color:rgba(255,255,255,.56) !important; }
.mf-hero-card-row__num{  color:#7FE6B0 !important; }   /* mint green for live deltas */

/* Decorative "Activación instantánea" + "Sin contraseña" tags */
.mf-hero-tag{
  background:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.0) !important;
  color:#0A4A2E !important;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.50) !important;
}
.mf-hero-tag em{ color:#0E5C3A !important; }
.mf-hero-tag.tl{ top:-14px !important; left:0 !important; }
.mf-hero-tag.br{ bottom:-14px !important; right:0 !important; }
@media (min-width:900px){
  .mf-hero-tag.tl{ top:-20px !important; left:-12px !important; }
  .mf-hero-tag.br{ bottom:-20px !important; right:-12px !important; }
}

/* ---- 3.B SERVICES + PACKS — index pages: vertical "01·02·03" rail ---- */
.mf-page-hero{
  padding:64px 0 72px !important;
}
@media (min-width:900px){
  .mf-page-hero{ padding:88px 0 96px !important; }
}
.mf-page-hero-inner{
  position:relative;
}
.mf-page-hero-inner::before{
  /* Editorial section number 01/06 chip top-right */
  content:"";
  position:absolute;
  left:0; top:0;
  width:2px; height:48px;
  background:linear-gradient(180deg, #E8C796, transparent);
  border-radius:2px;
  display:none;
}
@media (min-width:900px){
  .mf-page-hero-inner::before{ display:block; }
}
.mf-page-hero-inner > .mf-content-eyebrow{
  padding-left:0;
}

/* Floating editorial "section badge" — pure CSS, no markup change */
.mf-page-hero::before{
  /* Reuse base; keep grid */
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 100%;
}

/* ---- 3.C CATEGORIES (social_frontend) — diagonal slash + platform mark ---- */
/* Note: existing markup uses .mf-snet-hero as the inner content container
   with horizontal padding. Convert it to full-width forest band, while
   recreating an inner column for the content.
   When .mf-hero-2col is also applied, content becomes a 2-col grid. */
.mf-snet-hero{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:56px 24px 64px !important;
}
.mf-snet-hero:not(.mf-hero-2col){
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
@media (min-width:900px){
  .mf-snet-hero{ padding:88px 24px 96px !important; }
}
/* Re-apply max-width to direct text children only — keep them centered */
.mf-snet-hero:not(.mf-hero-2col) > h1,
.mf-snet-hero:not(.mf-hero-2col) > p.lede,
.mf-snet-hero:not(.mf-hero-2col) > .mf-snet-logo,
.mf-snet-hero:not(.mf-hero-2col) > .mf-page-hero-meta{
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
}
/* Inside 2-col, snet-logo sits left-aligned above the H1 inside the text col */
.mf-snet-hero.mf-hero-2col .mf-snet-logo{
  margin-left:0 !important;
  margin-right:0 !important;
  margin-bottom:18px !important;
}
.mf-snet-hero::before{
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      rgba(255,255,255,.04) 14px 15px
    );
  background-size:auto;
}
/* Platform logo card — flip to white pill that pops on forest */
.mf-snet-logo{
  background:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.35) !important;
  margin-bottom:22px !important;
}

/* ---- 3.D SERVICE DETAIL — bold serif initial ornament ---- */
.mf-svc-hero{
  padding:64px 0 80px !important;
}
@media (min-width:900px){
  .mf-svc-hero{ padding:96px 0 112px !important; }
}
.mf-svc-hero::after{
  /* Disable shared grain to make room for big ornament */
  display:none;
}
.mf-svc-hero::before{
  /* Replace base with a colour gradient + giant serif "S" mark */
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:88px 100%;
}

/* Big floating service initial - decorative */
.mf-svc-hero .mf-container{
  position:relative;
}
.mf-svc-hero .mf-container::before{
  content:"§";
  position:absolute;
  top:-24px; right:24px;
  font-family:'Instrument Serif', Georgia, serif;
  font-style:italic;
  font-size:200px;
  line-height:1;
  color:rgba(232,199,150,.10);
  pointer-events:none;
  z-index:0;
  display:none;
}
@media (min-width:900px){
  .mf-svc-hero .mf-container::before{ display:block; font-size:280px; top:-40px; right:60px; }
}

/* Hide the giant § watermark when the 2-col layout is active —
   the glass card already provides the right-column visual. */
.mf-svc-hero:has(.mf-hero-2col) .mf-container::before{ display:none !important; }

/* Likewise, hide the gold rail / L-bracket ornaments on the page-hero
   and content-hero when 2-col is active — the glass card is the focal
   point and the vertical rail competes with it visually. */
.mf-page-hero-inner.mf-hero-2col::before,
.mf-content-hero-inner.mf-hero-2col::before{ display:none !important; }

/* Platform badge — keep white card but rotate it more dramatic */
.mf-svc-hero-badge{
  box-shadow:0 14px 30px -10px rgba(0,0,0,.50) !important;
}

/* H1 prefix line (small) */
.mf-svc-hero-h1-prefix{
  color:rgba(255,255,255,.62) !important;
}

/* Hand-drawn underline on the service title — recolor to gold so it shows on forest */
.mf-svc-hero h1 strong::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'><path d='M2 5 Q 50 1, 100 4 T 198 3' stroke='%23E8C796' stroke-width='2.8' fill='none' stroke-linecap='round'/></svg>") !important;
}

/* Subtitle */
.mf-svc-hero .subtitle{
  color:rgba(255,255,255,.78) !important;
}

/* Eyebrow horizontal line */
.mf-svc-hero-eyebrow::before{
  background:rgba(232,199,150,.55) !important;
}

/* ---- 3.E CONTENT (blog index, faq, contact) — typographic frame ---- */
.mf-content-hero{
  padding:48px 0 56px !important;
}
@media (min-width:640px){
  .mf-content-hero{ padding:64px 0 72px !important; }
}
@media (min-width:900px){
  .mf-content-hero{ padding:88px 0 96px !important; }
}
.mf-content-hero-inner{
  position:relative;
  text-align:left;
  max-width:880px;
}

/* Typographic top-left bracket (only on desktop) */
.mf-content-hero-inner::before{
  content:"";
  position:absolute;
  left:-22px; top:-8px;
  width:14px; height:48px;
  border-left:1.5px solid rgba(232,199,150,.55);
  border-top:1.5px solid rgba(232,199,150,.55);
  pointer-events:none;
  display:none;
}
@media (min-width:900px){
  .mf-content-hero-inner::before{ display:block; }
}

/* ---- 3.F MISC (about, tools, legal) — center-aligned classic editorial ---- */
.mf-misc-hero{
  padding:56px 0 64px !important;
}
@media (min-width:900px){
  .mf-misc-hero{ padding:96px 0 96px !important; }
}
.mf-misc-hero-inner{
  text-align:center;
  max-width:760px;
  margin:0 auto;
}
.mf-misc-hero-inner h1{
  margin-left:auto; margin-right:auto;
}
.mf-misc-hero-inner p.lede{
  margin-left:auto; margin-right:auto;
}

/* Misc-pages stat row (about / tools) — flip to glass on forest */
.mf-misc-stats{
  margin-top:32px;
  display:flex; flex-wrap:wrap; gap:24px 36px;
  justify-content:center;
}
.mf-misc-stats .stat-item{
  display:flex; flex-direction:column; align-items:center;
}
.mf-misc-stats .stat-value{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  font-size:24px;
  font-weight:600;
  color:#FFFFFF;
  letter-spacing:-.02em;
}
@media (min-width:640px){
  .mf-misc-stats .stat-value{ font-size:30px; }
}
.mf-misc-stats .stat-label{
  font-size:11.5px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin-top:4px;
}

/* =========================================================
   4. BREADCRUMBS — when rendered just above a forest hero,
   the contrast is fine (breadcrumbs sit on white). No rule.
   ========================================================= */

/* =========================================================
   5. SAFETY: bordering elements right after a forest hero
   ========================================================= */
.mf-hero + .mf-strip,
.mf-page-hero + .mf-strip{
  border-top:0;       /* hero already provides separation */
}

/* =========================================================
   6. UNIFIED COMPACT HERO LAYOUT (homepage-style for the rest)
   When a .mf-hero-mini-card is placed inside one of the
   inner-hero containers, the hero becomes a 2-column grid
   (text + glass card) on desktop, mirroring the homepage.
   On mobile it stacks: text first, card under (or hidden).
   ========================================================= */
.mf-hero-2col{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:center;
}
@media (min-width:900px){
  .mf-hero-2col{
    grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
    gap:48px;
  }
}

/* Default: hide the visual on small screens (keeps the hero short),
   show it from 700px+. Pages can opt-in to "always show" by adding
   .mf-hero-2col--mobile on the wrapper. */
.mf-hero-2col__visual{ display:none; }
@media (min-width:700px){ .mf-hero-2col__visual{ display:block; } }
.mf-hero-2col--mobile .mf-hero-2col__visual{ display:block; }

/* Glass mini-card — the white card that sits in the right column */
.mf-hero-mini-card{
  position:relative;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  padding:18px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.45);
  color:#FFFFFF;
  max-width:380px;
  margin:0 auto;
}
@media (min-width:900px){
  .mf-hero-mini-card{ padding:22px; }
}

.mf-hero-mini-card__head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:12px;
}
.mf-hero-mini-card__label{
  font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.mf-hero-mini-card__pulse{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:500;
  color:rgba(255,255,255,.85);
}
.mf-hero-mini-card__pulse::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#3DD68C;
  box-shadow:0 0 0 4px rgba(61,214,140,.22);
  animation:mfPulse 1.6s ease-in-out infinite;
}

.mf-hero-mini-card__rows{
  display:flex; flex-direction:column; gap:6px;
}
.mf-hero-mini-card__row{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
}
.mf-hero-mini-card__row .ic{
  width:26px; height:26px; flex:none;
  border-radius:7px;
  background:rgba(255,255,255,.10);
  display:grid; place-items:center;
  overflow:hidden;
}
.mf-hero-mini-card__row .ic img{
  width:18px; height:18px; object-fit:contain;
}
.mf-hero-mini-card__row .ic svg{ color:#FFFFFF; }
.mf-hero-mini-card__row .name{
  font-size:12.5px; font-weight:600;
  color:#FFFFFF; line-height:1.2;
}
.mf-hero-mini-card__row .sub{
  font-size:11px; color:rgba(255,255,255,.56);
  line-height:1.2; margin-top:2px;
}
.mf-hero-mini-card__row .num{
  margin-left:auto;
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  font-size:13px; font-weight:600;
  color:#7FE6B0;
  letter-spacing:-.01em;
}
.mf-hero-mini-card__row .num--gold{ color:#E8C796; }
.mf-hero-mini-card__row .num--white{ color:#FFFFFF; }

/* Single-line big stat variant (e.g. service-detail price tag) */
.mf-hero-mini-card__stat{
  display:flex; align-items:baseline; gap:8px;
  margin:8px 0 4px;
}
.mf-hero-mini-card__stat .v{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  font-size:34px; font-weight:600;
  letter-spacing:-.03em; line-height:1;
  color:#E8C796;
}
.mf-hero-mini-card__stat .u{
  font-size:13px; font-weight:500;
  color:rgba(255,255,255,.62);
}

.mf-hero-mini-card__foot{
  margin-top:10px;
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:rgba(255,255,255,.62);
}
.mf-hero-mini-card__foot .dot{
  width:5px; height:5px; border-radius:50%;
  background:#7FE6B0;
}

/* Floating tags — same as homepage Activación / Sin contraseña */
.mf-hero-2col__visual{ position:relative; }
.mf-hero-tag-mini{
  position:absolute;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 11px;
  background:#FFFFFF;
  border-radius:10px;
  color:#0A4A2E;
  font-size:11.5px; font-weight:600;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.50);
}
.mf-hero-tag-mini em{
  font-family:var(--mf-font-serif); font-style:italic; font-weight:400;
  color:#0E5C3A;
}
.mf-hero-tag-mini.tl{ top:-12px; left:-8px; transform:rotate(-3deg); }
.mf-hero-tag-mini.br{ bottom:-12px; right:-8px; transform:rotate(2deg); }
@media (min-width:900px){
  .mf-hero-tag-mini.tl{ top:-16px; left:-14px; }
  .mf-hero-tag-mini.br{ bottom:-16px; right:-14px; }
}

/* When 2-col layout is active inside .mf-page-hero / .mf-content-hero
   / .mf-svc-hero, override the default centered flow of the inner. */
.mf-page-hero-inner.mf-hero-2col,
.mf-content-hero-inner.mf-hero-2col,
.mf-svc-hero-inner.mf-hero-2col{
  text-align:left;
  align-items:center;
  display:grid;
  max-width:1180px !important;   /* widen so 2 cols breathe */
}
.mf-svc-hero .mf-container{ max-width:1180px !important; }

/* Slightly tighter padding for the shared secondary heroes
   (homepage stays bigger). */
.mf-page-hero,
.mf-content-hero{
  padding:48px 0 56px !important;
}
@media (min-width:900px){
  .mf-page-hero,
  .mf-content-hero{ padding:80px 0 88px !important; }
}

.mf-svc-hero{ padding:48px 0 64px !important; }
@media (min-width:900px){
  .mf-svc-hero{ padding:80px 0 96px !important; }
}

.mf-snet-hero{ padding:44px 24px 56px !important; }
@media (min-width:900px){
  .mf-snet-hero{ padding:72px 24px 88px !important; }
}

/* Categories hero needs special handling: it acts as both section AND
   inner. We wrap content into .mf-hero-2col below; reset the centering. */
.mf-snet-hero.mf-hero-2col{
  display:grid;
  text-align:left;
  align-items:center;
}
.mf-snet-hero.mf-hero-2col > .mf-hero-2col__text{
  max-width:none;
}

/* Smaller h1 in shared secondary heroes (vs the big homepage one) */
.mf-page-hero h1,
.mf-content-hero h1,
.mf-svc-hero h1,
.mf-snet-hero h1{
  font-size:clamp(30px, 5vw, 52px) !important;
  line-height:1.04 !important;
  margin-top:10px;
}

/* Eyebrow above H1 in secondary heroes */
.mf-hero-2col .mf-content-eyebrow,
.mf-hero-2col .mf-svc-hero-eyebrow{
  margin-bottom:6px;
}