/* ============================================================
   másfollowers — catalog-pages.css
   Editorial Premium for catalog-style pages:
     · /servicios            (catalog index)
     · /servicios/{network}  (network landing)
     · /packs                (bundle catalog)
     · /pack/{slug}          (bundle detail + checkout)
   Mobile-first. Tokens from theme_style.css.
   Preserves JS contracts (services.js + bundle form).
   ============================================================ */

.mf-page{
  background:var(--mf-surface);
  color:var(--mf-ink);
  font-family:var(--mf-font);
}
.mf-page *{box-sizing:border-box;}
.mf-page img,.mf-page svg{display:block;max-width:100%;}

/* =========================================================
   PAGE HERO (shared by /servicios, /packs, /servicios/x)
   ========================================================= */
.mf-page-hero{
  padding:48px 0 32px;
  background:var(--mf-surface);
  border-bottom:1px solid var(--mf-line-soft);
}
@media (min-width:640px){
  .mf-page-hero{padding:64px 0 48px;}
}
@media (min-width:900px){
  .mf-page-hero{padding:88px 0 64px;}
}

.mf-page-hero-inner{
  max-width:var(--mf-container);
  margin:0 auto;
  padding:0 var(--mf-pad);
  display:flex;flex-direction:column;
  gap:18px;
}

.mf-page-hero h1{
  font-size:clamp(34px, 6vw, 64px);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:600;
  color:var(--mf-ink);
  margin:0;
  max-width:18ch;
}
.mf-page-hero h1 em,
.mf-page-hero h1 .ed{
  font-family:var(--mf-font-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.02em;
}
.mf-page-hero h1 .accent{color:var(--mf-accent);}

.mf-page-hero p.lede{
  font-size:16px;line-height:1.55;
  color:var(--mf-ink-soft);
  max-width:54ch;
  margin:0;
  font-weight:400;
}
@media (min-width:640px){.mf-page-hero p.lede{font-size:17px;}}

.mf-page-hero-meta{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  margin-top:6px;
  font-size:13px;font-weight:500;
  color:var(--mf-ink-muted);
}
.mf-page-hero-meta b{color:var(--mf-ink);font-weight:600;}
.mf-page-hero-meta .star{color:var(--mf-gold);}
.mf-page-hero-meta .sep{
  display:inline-block;width:3px;height:3px;border-radius:50%;
  background:var(--mf-line-strong);
}

/* =========================================================
   /SERVICIOS — toolbar (search + filters + sort + view)
   Static — does not stick on scroll; scrolls away with the page.
   Editorial flat: thin paper line, no glassmorphism/blur.
   ========================================================= */
.mf-cat-toolbar{
  position:relative;z-index:1;
  background:#FFFFFF;
  border-top:1px solid var(--mf-line-soft);
  border-bottom:1px solid var(--mf-line);
  padding:18px 0;
}
@media (min-width:900px){.mf-cat-toolbar{padding:22px 0;}}

.mf-cat-toolbar-inner{
  max-width:var(--mf-container);
  margin:0 auto;
  padding:0 var(--mf-pad);
  display:flex;flex-direction:column;gap:10px;
}
@media (min-width:900px){
  .mf-cat-toolbar-inner{flex-direction:row;align-items:center;gap:14px;}
}

/* Search input */
.mf-cat-search{
  position:relative;flex:1;min-width:0;
}
.mf-cat-search .search-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--mf-ink-muted);
  pointer-events:none;
}
.mf-cat-search .search-input{
  width:100%;
  height:42px;
  background:var(--mf-surface-3);
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-pill);
  padding:0 40px 0 42px;
  font:500 14px/1 var(--mf-font);
  color:var(--mf-ink);
  letter-spacing:-.005em;
  transition:border-color .15s ease, box-shadow .15s ease;
  outline:none;
}
.mf-cat-search .search-input::placeholder{color:var(--mf-ink-muted);}
.mf-cat-search .search-input:focus{
  border-color:var(--mf-accent);
  box-shadow:0 0 0 3px var(--mf-accent-glow);
}
.mf-cat-search .clear-search{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:0;border-radius:50%;
  background:var(--mf-line-soft);color:var(--mf-ink-soft);
  display:none;align-items:center;justify-content:center;cursor:pointer;
}
.mf-cat-search .clear-search:hover{background:var(--mf-ink);color:#fff;}
.mf-cat-search .clear-search[style*="display: inline"],
.mf-cat-search .clear-search[style*="display:inline"]{display:inline-flex !important;}

/* Filter chips (horizontal scroll on mobile) */
.mf-cat-filters{
  position:relative;
  display:flex;align-items:center;gap:6px;
  min-width:0;
}
.mf-cat-filters .scroll-button{
  display:none;
  flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--mf-surface-3);border:1px solid var(--mf-line);
  color:var(--mf-ink);cursor:pointer;
  align-items:center;justify-content:center;
}
.mf-cat-filters .scroll-button:hover{background:var(--mf-ink);color:#fff;border-color:var(--mf-ink);}
@media (min-width:900px){
  .mf-cat-filters .scroll-button{display:inline-flex;}
}

.mf-cat-filters .filters-scroll{
  display:flex;gap:6px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:2px 2px;
  scroll-behavior:smooth;
}
.mf-cat-filters .filters-scroll::-webkit-scrollbar{display:none;}

.mf-cat-filters .filter-btn{
  flex:none;
  display:inline-flex;align-items:center;gap:8px;
  height:36px;
  padding:0 14px;
  background:var(--mf-surface-3);
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-pill);
  font:500 13px/1 var(--mf-font);
  color:var(--mf-ink-soft);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
  white-space:nowrap;
  letter-spacing:-.005em;
}
.mf-cat-filters .filter-btn:hover{
  color:var(--mf-ink);
  border-color:var(--mf-line-strong);
}
.mf-cat-filters .filter-btn.active{
  background:var(--mf-ink);
  color:#fff;
  border-color:var(--mf-ink);
}
.mf-cat-filters .filter-btn .filter-count{
  font-family:var(--mf-font-mono);
  font-size:11px;font-weight:500;
  padding:1px 6px;
  background:var(--mf-line-soft);
  border-radius:var(--mf-r-pill);
  color:var(--mf-ink-muted);
  letter-spacing:0;
}
.mf-cat-filters .filter-btn.active .filter-count{
  background:rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);
}

/* Sort + view toggles */
.mf-cat-controls{display:flex;align-items:center;gap:8px;flex:none;}
.mf-cat-controls .sort-select{
  height:36px;
  padding:0 32px 0 14px;
  background:var(--mf-surface-3) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237A7F77' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-pill);
  font:500 13px/1 var(--mf-font);
  color:var(--mf-ink);
  cursor:pointer;
  appearance:none;-webkit-appearance:none;
}
.mf-cat-controls .sort-select:focus{
  outline:none;border-color:var(--mf-accent);
  box-shadow:0 0 0 3px var(--mf-accent-glow);
}

.mf-cat-controls .view-toggle{
  display:none;
  align-items:center;
  background:var(--mf-surface-3);
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-pill);
  padding:3px;
}
@media (min-width:640px){.mf-cat-controls .view-toggle{display:inline-flex;}}
.mf-cat-controls .view-btn{
  width:32px;height:30px;
  border:0;background:transparent;
  border-radius:var(--mf-r-pill);
  color:var(--mf-ink-muted);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.mf-cat-controls .view-btn.active{
  background:var(--mf-ink);
  color:#fff;
}

/* =========================================================
   /SERVICIOS — listing
   ========================================================= */
.mf-cat-list{
  background:#FFFFFF;
  padding:40px 0 80px;
}
@media (min-width:900px){.mf-cat-list{padding:56px 0 112px;}}

.mf-cat-list-inner{
  max-width:var(--mf-container);
  margin:0 auto;
  padding:0 var(--mf-pad);
}

/* =========================================================
   /SERVICIOS — Editorial Premium service cards
   New approach: each service card is a 2-row "ticket" with a
   bold gradient platform icon at the top, the service title in
   editorial type, a big mono price, and a forest CTA pill that
   takes over on hover. Real contrast against the warm-gray page.
   ========================================================= */
.mf-cat-network{
  margin-bottom:56px;
  scroll-margin-top:24px;
}
@media (min-width:900px){.mf-cat-network{margin-bottom:72px;}}
.mf-cat-network + .mf-cat-network{
  /* Editorial section divider — a thin paper line between networks */
  border-top:1px solid var(--mf-line-soft);
  padding-top:48px;
}
@media (min-width:900px){
  .mf-cat-network + .mf-cat-network{ padding-top:64px; }
}

/* ==== Network header — flat editorial, no big tile, no pill ==== */
.mf-cat-network-head{
  display:flex;align-items:flex-end;gap:14px;
  margin-bottom:22px;
}
.mf-cat-network-icon{
  width:32px;height:32px;border-radius:8px;
  background:transparent;
  border:0;
  display:grid;place-items:center;
  flex:none;overflow:hidden;
  box-shadow:none;
}
.mf-cat-network-icon img{width:26px;height:26px;object-fit:contain;}
.mf-cat-network-name{
  font:600 22px/1.1 var(--mf-font, 'Inter', sans-serif);
  letter-spacing:-.02em;
  color:var(--mf-ink);
  margin:0;
  flex:1;min-width:0;
}
@media (min-width:900px){.mf-cat-network-name{ font-size:26px; }}
.mf-cat-network-name a{color:inherit;text-decoration:none !important;}
.mf-cat-network-name a:hover{color:var(--mf-accent);}

.mf-cat-network-link{
  display:inline-flex;align-items:center;gap:4px;
  padding:0;
  background:transparent;
  border:0;
  font:500 13px/1 var(--mf-font, 'Inter', sans-serif);
  color:var(--mf-ink-muted);
  flex:none;
  text-decoration:none !important;
  box-shadow:none;
  transition:color .15s ease;
}
.mf-cat-network-link:hover{
  color:var(--mf-accent);
  background:transparent;
  border:0;
  transform:none;
}

/* ==== Grid layout — 4 columns on desktop, fills the row ==== */
.mf-cat-network .services-wrapper,
.services-grid[data-view="grid"] .services-wrapper{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width:479px){
  .mf-cat-network .services-wrapper,
  .services-grid[data-view="grid"] .services-wrapper{
    grid-template-columns:1fr;
  }
}
@media (min-width:780px){
  .mf-cat-network .services-wrapper,
  .services-grid[data-view="grid"] .services-wrapper{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
  }
}
@media (min-width:1080px){
  .mf-cat-network .services-wrapper,
  .services-grid[data-view="grid"] .services-wrapper{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
  }
}

/* ==== Service card — editorial flat ====
   No gold gleam, no green pulse pill, no transform on hover. Just a
   clean white tile with editorial type, mono price, and a forest
   underline that reveals on hover. Reads as catalogue, not gimmick. */
.service-card{
  position:relative;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:14px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.service-card:hover{
  border-color:var(--mf-ink-muted);
  box-shadow:0 6px 18px -10px rgba(27,31,26,.16);
}

.service-card.collapsed{display:none;}
.service-card.show-after-expand{display:block;}
.service-card.hidden{display:none !important;}

.service-card .service-card-inner{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px 18px 16px;
  text-decoration:none !important;
  color:inherit;
  height:100%;
}
@media (min-width:1080px){
  .service-card .service-card-inner{ padding:20px 20px 18px; gap:16px; }
}

.service-card .service-content{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}

/* Platform icon — flat tile with a 1px line, no glow, no gradient */
.service-card .service-icon{
  width:34px;height:34px;
  border-radius:9px;
  background:var(--mf-surface-3, #F8F7F4);
  border:1px solid var(--mf-line);
  display:grid;place-items:center;
  overflow:hidden;flex:none;
}
.service-card .service-icon img{ width:20px;height:20px;object-fit:contain; }

/* Eyebrow tag — small mono-uppercase platform label, no green dot */
.service-card .service-pulse{
  display:inline-flex;align-items:center;
  font:600 10px/1 var(--mf-font-mono, ui-monospace, monospace);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mf-ink-muted);
  background:transparent;
  border:0;
  padding:0;
  border-radius:0;
}
.service-card .service-pulse::before{ content:none; }

/* Title — Inter, tight, 2 lines max */
.service-card .service-info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:0;
}
.service-card .service-info h3{
  font:600 15.5px/1.3 var(--mf-font, 'Inter', sans-serif);
  letter-spacing:-.015em;
  color:var(--mf-ink);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* Bottom row: price + arrow chevron */
.service-card .service-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding-top:12px;
  margin-top:auto;
  border-top:1px solid var(--mf-line-soft);
}

.service-card .service-meta .price{
  display:inline-flex;align-items:baseline;gap:4px;
  font:500 11px/1 var(--mf-font, 'Inter', sans-serif);
  color:var(--mf-ink-muted);
  letter-spacing:0;
  text-transform:none;
}
.service-card .service-meta .price-value{
  font-family:var(--mf-font-mono, ui-monospace, monospace);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  font:600 17px/1 var(--mf-font-mono, ui-monospace, monospace);
  color:var(--mf-ink);
  letter-spacing:-.015em;
  transition:color .18s ease;
}
.service-card:hover .service-meta .price-value{ color:var(--mf-accent); }

/* Minimal arrow chevron — no pill, just a forest arrow */
.service-card .service-meta::after{
  content:"→";
  font:500 14px/1 var(--mf-font, 'Inter', sans-serif);
  color:var(--mf-ink-muted);
  flex:none;
  transition:color .18s ease, transform .18s ease;
  align-self:center;
}
.service-card:hover .service-meta::after{
  color:var(--mf-accent);
  transform:translateX(3px);
}

/* ===== List view — flat horizontal row ===== */
.services-grid[data-view="list"] .services-wrapper{
  grid-template-columns:1fr !important;
  gap:10px;
}
.services-grid[data-view="list"] .service-card{ border-radius:14px; }
.services-grid[data-view="list"] .service-card .service-card-inner{
  flex-direction:row;
  align-items:center;
  padding:14px 18px;
  gap:16px;
}
.services-grid[data-view="list"] .service-card .service-content{
  flex-direction:row;
  align-items:center;
  gap:14px;
  flex:1;
}
.services-grid[data-view="list"] .service-card .service-icon{
  width:42px;height:42px;
}
.services-grid[data-view="list"] .service-card .service-icon img{
  width:26px;height:26px;
}
.services-grid[data-view="list"] .service-card .service-pulse{ display:none; }
.services-grid[data-view="list"] .service-card .service-meta{
  flex:none;
  border-top:0;
  padding-top:0;
  margin-top:0;
  gap:14px;
}

/* Compact view */
.services-grid[data-view="compact"] .services-wrapper{
  grid-template-columns:1fr !important;
  gap:0;
}
.services-grid[data-view="compact"] .service-card{
  border-radius:0;
  border-left:0;
  border-right:0;
  border-top:0;
  margin-bottom:-1px;
}
.services-grid[data-view="compact"] .service-card:first-child{border-top:1px solid var(--mf-line);}
.services-grid[data-view="compact"] .service-card .service-card-inner{padding:12px 4px;}

/* Show more button — pill ghost matched with the network "Ver todo" link */
.show-more-container{
  grid-column:1 / -1;
  display:flex;justify-content:center;
  margin-top:18px;
}
.show-more-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;
  background:var(--mf-accent);
  border:1px solid var(--mf-accent);
  border-radius:var(--mf-r-pill);
  font:600 13px/1 var(--mf-font);
  color:#FFFFFF;
  cursor:pointer;
  letter-spacing:-.005em;
  box-shadow:0 12px 24px -10px rgba(14,92,58,.45);
  transition:background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.show-more-btn:hover{
  background:var(--mf-accent-deep);
  border-color:var(--mf-accent-deep);
  color:#FFFFFF;
  transform:translateY(-1px);
  box-shadow:0 18px 32px -12px rgba(14,92,58,.55);
}
.show-more-btn svg{stroke:#FFFFFF;}
.show-more-btn svg{transition:transform .15s ease;}
.show-more-btn.expanded svg{transform:rotate(180deg);}

/* Empty state */
.empty-state{
  text-align:center;
  padding:72px 24px;
  background:var(--mf-surface-3);
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-lg);
}
.empty-state svg{color:var(--mf-ink-muted);margin:0 auto 18px;}
.empty-state h3{font-size:18px;font-weight:600;margin:0 0 6px;color:var(--mf-ink);}
.empty-state p{font-size:14px;color:var(--mf-ink-soft);margin:0 0 20px;}
.btn-reset-filters{
  display:inline-flex;align-items:center;
  padding:10px 18px;
  background:var(--mf-ink);color:#fff;
  border:0;border-radius:var(--mf-r-pill);
  font:600 13px/1 var(--mf-font);
  cursor:pointer;
}
.btn-reset-filters:hover{background:#000;}

/* Skeleton */
.skeleton-loader{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;margin-top:16px;
}
.skeleton-card{
  background:var(--mf-surface-3);
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r);
  padding:16px;
  height:88px;
  position:relative;overflow:hidden;
}
.skeleton-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation:mf-shimmer 1.4s linear infinite;
}
@keyframes mf-shimmer{
  from{transform:translateX(-100%);}
  to{transform:translateX(100%);}
}

/* Scroll-to-top */
.scroll-to-top{
  position:fixed;bottom:20px;right:20px;z-index:50;
  width:42px;height:42px;border-radius:50%;
  background:var(--mf-ink);color:#fff;border:0;cursor:pointer;
  box-shadow:var(--mf-shadow-3);
  display:none;align-items:center;justify-content:center;
  transition:transform .15s ease;
}
.scroll-to-top.visible{display:inline-flex;}
.scroll-to-top:hover{transform:translateY(-2px);background:var(--mf-accent);}

/* =========================================================
   /PACKS — bundle catalog
   ========================================================= */
.mf-pk-trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;
  padding:24px 0 8px;
  font-size:13px;color:var(--mf-ink-soft);font-weight:500;
}
.mf-pk-trust-item{display:inline-flex;align-items:center;gap:8px;}
.mf-pk-trust-item svg{color:var(--mf-accent);flex:none;}
.mf-pk-trust-item b{color:var(--mf-ink);font-weight:600;}

.mf-pk-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:640px){.mf-pk-grid{grid-template-columns:repeat(2,1fr);gap:18px;}}
@media (min-width:1100px){.mf-pk-grid{grid-template-columns:repeat(3,1fr);}}

.mf-pk-card{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--mf-surface-3);
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-lg);
  overflow:hidden;
  transition:border-color .18s ease, transform .15s ease, box-shadow .18s ease;
}
.mf-pk-card:hover{
  transform:translateY(-3px);
  border-color:var(--mf-line-strong);
  box-shadow:var(--mf-shadow-3);
}

.mf-pk-card-img{
  background:var(--mf-surface);
  aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--mf-line-soft);
  text-decoration:none !important;
}
.mf-pk-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.mf-pk-card-img .pk-icon-fallback{
  width:56px;height:56px;color:var(--mf-accent);opacity:.45;
}
.mf-pk-badge{
  position:absolute;top:12px;left:12px;
  display:inline-flex;align-items:center;
  background:var(--mf-ink);color:#fff;
  padding:5px 11px;border-radius:var(--mf-r-pill);
  font:700 10.5px/1 var(--mf-font-mono);
  letter-spacing:.06em;text-transform:uppercase;
}
.mf-pk-badge--gold{background:var(--mf-gold);color:#1B1F1A;}
.mf-pk-badge--accent{background:var(--mf-accent);color:#fff;}

.mf-pk-card-body{
  padding:20px 22px 0;
  flex:1;display:flex;flex-direction:column;
}
.mf-pk-card-title{
  font-size:18px;font-weight:600;
  letter-spacing:-.015em;
  color:var(--mf-ink);
  margin:0 0 6px;line-height:1.3;
}
.mf-pk-card-title a{color:inherit;text-decoration:none !important;}
.mf-pk-card-title a:hover{color:var(--mf-accent);}
.mf-pk-card-desc{
  font-size:13.5px;line-height:1.5;
  color:var(--mf-ink-soft);
  margin:0 0 14px;
}

.mf-pk-items{
  list-style:none;padding:0;margin:0 0 14px;
}
.mf-pk-items li{
  display:flex;align-items:center;gap:10px;
  padding:6px 0;
  font-size:13.5px;
  color:var(--mf-ink-soft);
  border-bottom:1px dashed var(--mf-line-soft);
  letter-spacing:-.005em;
}
.mf-pk-items li:last-child{border-bottom:0;}
.mf-pk-items li .check{color:var(--mf-accent);flex:none;}
.mf-pk-items li b{
  color:var(--mf-ink);
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-weight:600;
  margin-right:4px;
  letter-spacing:-.01em;
}
.mf-pk-items-extra{font-size:12px;color:var(--mf-ink-muted);font-style:italic;}

.mf-pk-card-footer{
  padding:16px 22px 22px;
  border-top:1px solid var(--mf-line-soft);
  background:var(--mf-surface);
}
.mf-pk-price-row{
  display:flex;align-items:baseline;gap:8px;
  margin-bottom:14px;flex-wrap:wrap;
}
.mf-pk-price-old{
  color:var(--mf-ink-muted);
  text-decoration:line-through;
  font-family:var(--mf-font-mono);
  font-size:14px;font-weight:500;
}
.mf-pk-price-new{
  color:var(--mf-ink);
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-size:24px;font-weight:600;
  letter-spacing:-.02em;line-height:1;
}
.mf-pk-savings{
  display:inline-block;
  padding:3px 9px;border-radius:var(--mf-r-pill);
  background:var(--mf-accent-soft);color:var(--mf-accent);
  font-size:11px;font-weight:600;letter-spacing:.04em;
  font-family:var(--mf-font-mono);
}
.mf-pk-cta{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;
  padding:12px 16px;
  background:var(--mf-ink) !important;
  color:#fff !important;
  border:0;border-radius:var(--mf-r);
  font:600 14px/1 var(--mf-font);
  text-decoration:none !important;
  cursor:pointer;
  transition:background .15s ease, transform .12s ease;
  letter-spacing:-.005em;
}
.mf-pk-cta:hover{background:var(--mf-accent) !important;color:#fff !important;transform:translateY(-1px);}

/* Empty state for /packs */
.mf-pk-empty{
  text-align:center;padding:72px 24px;
  background:var(--mf-surface-3);
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-lg);
}
.mf-pk-empty svg{color:var(--mf-ink-muted);margin:0 auto 18px;}
.mf-pk-empty h3{font-size:18px;font-weight:600;margin:0 0 6px;color:var(--mf-ink);}
.mf-pk-empty p{margin:0 0 20px;color:var(--mf-ink-soft);}

/* =========================================================
   /PACK/{slug} — bundle detail
   ========================================================= */
.pkd-page{background:var(--mf-surface);}

/* /pack/{slug} hero now uses the shared mf-page-hero · mf-hero-2col
   composition from heroes.css. The old .pkd-hero / .pkd-hero-grid /
   .pkd-eyebrow / .pkd-title / .pkd-lead / .pkd-features /
   .pkd-image-wrap / .pkd-image-tag rules were removed because they
   diverged from the rest of the site. */

/* Pack purchase card */
.pkd-buy-wrap{
  padding:24px 0 56px;
}
@media (min-width:900px){.pkd-buy-wrap{padding:48px 0 96px;}}
.pkd-buy{
  max-width:760px;
  margin:0 auto;
  padding:0 var(--mf-pad);
}
.pkd-buy-card{
  background:var(--mf-surface-3);
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-lg);
  padding:20px;
  box-shadow:var(--mf-shadow-2);
}
@media (min-width:640px){.pkd-buy-card{padding:28px;}}

.pkd-buy-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:14px;
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:1px solid var(--mf-line-soft);
  flex-wrap:wrap;
}
.pkd-buy-head h2{
  font-size:14px;font-weight:600;letter-spacing:.02em;
  color:var(--mf-ink);margin:0;
}
.pkd-buy-head .pkd-price-display{
  display:flex;align-items:baseline;gap:8px;
}
.pkd-buy-head .pkd-price-display .old{
  font-family:var(--mf-font-mono);
  font-size:14px;color:var(--mf-ink-muted);
  text-decoration:line-through;
}
.pkd-buy-head .pkd-price-display .new{
  font-family:var(--mf-font-mono);
  font-size:24px;font-weight:600;color:var(--mf-accent);
  letter-spacing:-.02em;line-height:1;
}

/* Form fields for each service link */
.pkd-form-group{margin-bottom:14px;}
.pkd-form-group label{
  display:block;
  font-size:12.5px;font-weight:600;
  color:var(--mf-ink);
  margin-bottom:6px;
  letter-spacing:-.005em;
}
.pkd-form-group label .qty{
  font-family:var(--mf-font-mono);
  color:var(--mf-accent);
  font-weight:600;
}
.pkd-form-group input[type="email"],
.pkd-form-group input[type="text"],
.pkd-form-group input[type="url"]{
  width:100%;
  height:42px;
  padding:0 14px;
  background:var(--mf-surface);
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r);
  font:500 14px/1 var(--mf-font);
  color:var(--mf-ink);
  letter-spacing:-.005em;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pkd-form-group input:focus{
  border-color:var(--mf-accent);
  box-shadow:0 0 0 3px var(--mf-accent-glow);
}
.pkd-form-group .helper{
  font-size:11.5px;color:var(--mf-ink-muted);margin-top:4px;
}

.pkd-agree{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px;
  background:var(--mf-surface);
  border:1px solid var(--mf-line-soft);
  border-radius:var(--mf-r);
  font-size:12.5px;color:var(--mf-ink-soft);line-height:1.45;
  margin:6px 0 16px;
}
.pkd-agree input[type="checkbox"]{
  margin:2px 0 0;flex:none;
  accent-color:var(--mf-accent);
}
.pkd-agree a{color:var(--mf-accent);text-decoration:underline !important;}

.pkd-error{
  display:none;
  margin:0 0 14px;
  padding:10px 12px;
  background:rgba(217,56,56,.06);
  border:1px solid rgba(217,56,56,.20);
  border-radius:var(--mf-r);
  color:#9a1f1f;font-size:13px;
}
.pkd-error.show{display:block;}

#pkd-cta{
  display:flex;width:100%;
  align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;
  background:var(--mf-accent) !important;
  color:#fff !important;
  font:600 15px/1 var(--mf-font);
  border:0;border-radius:var(--mf-r);
  cursor:pointer;
  text-decoration:none !important;
  transition:background .15s ease, transform .12s ease;
}
#pkd-cta:hover{background:var(--mf-accent-deep) !important;transform:translateY(-1px);}
#pkd-cta:disabled{
  background:var(--mf-line-strong) !important;
  color:rgba(255,255,255,.7) !important;
  cursor:not-allowed;transform:none;
}

.pkd-pay-line{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;
  font-size:11.5px;color:var(--mf-ink-muted);
}
.pkd-pay-line svg{color:var(--mf-ink-muted);}

/* Mobile bottom bar for the bundle detail */
#pkd-mbar-cta{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:12px 16px;
  background:rgba(255,255,255,.95);
  border-top:1px solid var(--mf-line);
  backdrop-filter:blur(12px);
}
@media (max-width:899px){
  #pkd-mbar-cta.show{display:flex;align-items:center;gap:12px;}
  body.pkd-has-mbar{padding-bottom:80px;}
}
#pkd-mbar-cta .pkd-mbar-price{
  font-family:var(--mf-font-mono);
  font-size:18px;font-weight:600;color:var(--mf-accent);
  letter-spacing:-.02em;
}
#pkd-mbar-cta button{
  margin-left:auto;
  padding:10px 18px;
  background:var(--mf-accent);color:#fff;
  border:0;border-radius:var(--mf-r);
  font:600 13px/1 var(--mf-font);cursor:pointer;
}

/* PKD bands */
.pkd-section{
  padding:48px 0;
  background:var(--mf-surface);
}
.pkd-section.alt{background:var(--mf-surface-2);}
@media (min-width:900px){.pkd-section{padding:80px 0;}}
.pkd-section-inner{
  max-width:var(--mf-container);
  margin:0 auto;
  padding:0 var(--mf-pad);
}
.pkd-section-head{
  text-align:left;max-width:560px;margin-bottom:28px;
}
.pkd-section-head .pkd-eyebrow{margin-bottom:12px;}
.pkd-section-head h2{
  font-size:clamp(22px, 3.4vw, 32px);
  line-height:1.1;letter-spacing:-.02em;
  font-weight:600;color:var(--mf-ink);margin:0 0 10px;
}
.pkd-section-head h2 em{font-family:var(--mf-font-serif);font-style:italic;font-weight:400;}
.pkd-section-head p{font-size:14.5px;color:var(--mf-ink-soft);margin:0;line-height:1.55;}

/* PKD steps */
.pkd-steps{
  display:grid;grid-template-columns:1fr;gap:24px;
}
@media (min-width:640px){.pkd-steps{grid-template-columns:repeat(3,1fr);gap:18px;}}
.pkd-step .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--mf-ink);color:#fff;
  font:600 12px/1 var(--mf-font-mono);
  margin-bottom:14px;
}
.pkd-step h3{
  font-size:16px;font-weight:600;letter-spacing:-.01em;
  margin:0 0 6px;color:var(--mf-ink);
}
.pkd-step p{
  font-size:14px;line-height:1.5;color:var(--mf-ink-soft);margin:0;
}

/* PKD FAQ — flat dividers */
.pkd-faq{display:flex;flex-direction:column;}
.pkd-faq details{
  border-bottom:1px solid var(--mf-line);
  background:transparent;
}
.pkd-faq details:first-child{border-top:1px solid var(--mf-line);}
.pkd-faq summary{
  list-style:none;cursor:pointer;
  padding:18px 0;
  font:500 15px/1.4 var(--mf-font);
  color:var(--mf-ink);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  letter-spacing:-.005em;
}
.pkd-faq summary::-webkit-details-marker{display:none;}
.pkd-faq summary:hover{color:var(--mf-accent);}
.pkd-faq summary::after{
  content:"+";font-size:22px;font-weight:300;
  color:var(--mf-ink-muted);
  transition:transform .2s ease, color .15s ease;
}
.pkd-faq details[open] summary::after{transform:rotate(45deg);color:var(--mf-accent);}
.pkd-faq details > div{
  padding:0 0 18px;
  font-size:14px;line-height:1.65;color:var(--mf-ink-soft);
}
.pkd-faq details p{margin:0 0 10px;}
.pkd-faq details p strong{color:var(--mf-ink);font-weight:600;}

/* PKD final CTA */
/* =========================================================
   /PACKS — Final CTA (rebuilt from scratch)
   Light editorial band on warm gray surface. Two columns:
   text on the left, ink stats panel on the right. No more
   ghost button against the dark card — primary is solid
   forest, secondary is a clean text link.
   ========================================================= */
.pkd-final{
  background:var(--mf-surface-2);
  border-top:1px solid var(--mf-line);
  padding:64px var(--mf-pad);
}
@media (min-width:900px){
  .pkd-final{ padding:96px var(--mf-pad); }
}

.pkd-final-inner{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  align-items:center;
}
@media (min-width:900px){
  .pkd-final-inner{
    grid-template-columns:1.3fr 1fr;
    gap:64px;
  }
}

/* ==== Text column ==== */
.pkd-final-text{
  display:flex;
  flex-direction:column;
  gap:0;
}

.pkd-final-eyebrow{
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--mf-ink-soft) !important;
  margin:0 0 12px !important;
}

.pkd-final-title{
  font-size:clamp(28px, 4.4vw, 44px) !important;
  line-height:1.05 !important;
  letter-spacing:-.03em !important;
  font-weight:600 !important;
  color:var(--mf-ink) !important;
  margin:0 0 18px !important;
  max-width:18ch;
}
.pkd-final-title em{
  font-family:var(--mf-font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--mf-accent) !important;
}

.pkd-final-lede{
  font-size:15.5px !important;
  line-height:1.6 !important;
  color:var(--mf-ink-soft) !important;
  margin:0 0 28px !important;
  max-width:50ch;
  font-weight:400 !important;
}
@media (min-width:640px){
  .pkd-final-lede{ font-size:16.5px !important; }
}

/* Actions: solid forest pill + plain link */
.pkd-final-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 24px;
}
.pkd-final-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:600 14.5px/1 var(--mf-font);
  letter-spacing:-.005em;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.pkd-final-btn--primary{
  padding:15px 26px;
  border-radius:999px;
  background:var(--mf-accent);
  color:#FFFFFF;
  box-shadow:0 14px 30px -10px rgba(14,92,58,.45);
}
.pkd-final-btn--primary:hover{
  background:var(--mf-accent-deep);
  color:#FFFFFF;
  transform:translateY(-1px);
  box-shadow:0 18px 36px -10px rgba(14,92,58,.55);
}
.pkd-final-btn--link{
  padding:6px 0;
  color:var(--mf-ink) !important;
  font-weight:600;
  border-bottom:1px solid var(--mf-line-strong);
  border-radius:0;
}
.pkd-final-btn--link:hover{
  color:var(--mf-accent) !important;
  border-bottom-color:var(--mf-accent);
}

/* ==== Stats column (ink panel) ==== */
.pkd-final-stats{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.pkd-final-stat{
  position:relative;
  padding:32px 28px;
  background:var(--mf-surface-ink);
  color:#FFFFFF;
  border-radius:var(--mf-r-xl);
  overflow:hidden;
  isolation:isolate;
}
.pkd-final-stat::before{
  content:"";
  position:absolute;
  right:-80px; bottom:-80px;
  width:280px; height:280px;
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(232,199,150,.20), rgba(14,92,58,.10) 40%, transparent 70%);
  filter:blur(20px);
  pointer-events:none;
  z-index:-1;
}
.pkd-final-stat .v{
  display:block;
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  font-size:56px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.04em;
  color:#E8C796;
  margin-bottom:10px;
}
@media (min-width:1100px){
  .pkd-final-stat .v{ font-size:64px; }
}
.pkd-final-stat .l{
  display:block;
  font-size:13px;
  line-height:1.4;
  color:rgba(255,255,255,.72);
  font-weight:500;
}

.pkd-final-stat-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.pkd-final-mini{
  padding:20px 18px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-lg);
}
.pkd-final-mini .v{
  display:block;
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  font-size:22px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--mf-ink);
  margin-bottom:6px;
}
.pkd-final-mini .l{
  display:block;
  font-size:11.5px;
  line-height:1.4;
  color:var(--mf-ink-muted);
  font-weight:500;
}

/* =========================================================
   /SERVICIOS/{network} — network landing
   ========================================================= */
.mf-snet{
  background:var(--mf-surface);
  /* Required so the .mf-snet-hero / .mf-snet-list 100vw breakout
     never spawns a horizontal scrollbar even when the parent wrapper
     is narrower than the viewport. */
  overflow-x:hidden;
}

/* HERO — guaranteed full-bleed using the 100vw escape trick.
   This works even when a parent wrapper (legacy Bootstrap .page,
   .container, etc.) caps width: we widen via vw + negative margin so
   the green band breaks out of any container and reaches the viewport
   edges, while the inner 2-col grid stays capped at --mf-container. */
.mf-snet-hero{
  position:relative !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding:40px 0 32px !important;
  /* Avoid horizontal scroll caused by the breakout (scrollbar width). */
  box-sizing:border-box;
}
@media (min-width:640px){ .mf-snet-hero{ padding:56px 0 40px !important; } }
@media (min-width:900px){ .mf-snet-hero{ padding:88px 0 64px !important; } }

/* The 2-col grid inside the hero is the new container: capped and padded. */
.mf-snet-hero.mf-hero-2col,
.mf-snet-hero > .mf-hero-2col{
  max-width:var(--mf-container) !important;
  margin:0 auto !important;
  padding-left:max(var(--mf-pad), 24px) !important;
  padding-right:max(var(--mf-pad), 24px) !important;
  width:100%;
  box-sizing:border-box;
}
@media (min-width:640px){
  .mf-snet-hero.mf-hero-2col,
  .mf-snet-hero > .mf-hero-2col{
    padding-left:max(var(--mf-pad), 36px) !important;
    padding-right:max(var(--mf-pad), 36px) !important;
  }
}
@media (min-width:900px){
  .mf-snet-hero.mf-hero-2col,
  .mf-snet-hero > .mf-hero-2col{
    padding-left:max(var(--mf-pad), 48px) !important;
    padding-right:max(var(--mf-pad), 48px) !important;
  }
}

/* Text column aligned left (overrides any centered default) */
.mf-snet-hero.mf-hero-2col .mf-hero-2col__text{
  align-items:flex-start;
  text-align:left;
}

/* Network logo chip — light glass on the dark canvas */
.mf-snet-logo{
  position:relative; z-index:1;
  width:64px;height:64px;border-radius:16px;
  background:#FFFFFF;
  border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;overflow:hidden;
  margin-bottom:18px;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.45);
}
.mf-snet-logo img{width:42px;height:42px;object-fit:contain;}

/* Hero typography on dark canvas — !important defeats theme_style.css
   .mf-page h1/h2 default-ink colouring. */
.mf-snet-hero h1{
  font-size:clamp(34px, 5.4vw, 56px) !important;
  line-height:1.02 !important;letter-spacing:-.03em !important;
  font-weight:600 !important;
  color:#FFFFFF !important;
  margin:0 0 14px !important;
  max-width:18ch;
}
.mf-snet-hero h1 em{
  font-family:var(--mf-font-serif) !important;
  font-style:italic !important;
  font-weight:400 !important;
  color:#E8C796 !important;
}
.mf-snet-hero p.lede{
  font-size:16px !important;
  line-height:1.55 !important;
  color:rgba(255,255,255,.82) !important;
  max-width:54ch;
  margin:0 !important;
}
.mf-snet-hero .mf-content-eyebrow{
  color:rgba(232,199,150,.92) !important;
}
.mf-snet-hero .mf-content-eyebrow em{
  color:#E8C796 !important;
}
.mf-snet-hero .mf-page-hero-meta{
  color:rgba(255,255,255,.72) !important;
}
.mf-snet-hero .mf-page-hero-meta b{
  color:#FFFFFF !important;
  font-weight:600;
}
.mf-snet-hero .mf-page-hero-meta .star{ color:#E8C796 !important; }
.mf-snet-hero .mf-page-hero-meta .sep{
  background:rgba(255,255,255,.30) !important;
}

/* SERVICES LIST — editorial band wrapping the grid (full-bleed) */
.mf-snet-list{
  position:relative !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  background:linear-gradient(180deg, var(--mf-surface) 0%, var(--mf-surface-2) 100%);
  border-top:1px solid var(--mf-line-soft);
  padding:48px 0 80px !important;
  box-sizing:border-box;
}
@media (min-width:900px){
  .mf-snet-list{ padding:72px 0 112px !important; }
}

/* Vertical paper-rail (same DNA as the hero/CTA bands) */
.mf-snet-list::before{
  content:"";
  position:absolute; inset:0;
  background-image:linear-gradient(90deg, rgba(27,31,26,.04) 1px, transparent 1px);
  background-size:88px 100%; background-position:24px 0;
  pointer-events:none;
  mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

.mf-snet-list-inner{
  position:relative; z-index:1;
  max-width:var(--mf-container);
  margin:0 auto;
  padding:0 var(--mf-pad);
}

/* Section header for the services grid */
.mf-snet-list-head{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:32px;
  text-align:center;
}
@media (min-width:900px){
  .mf-snet-list-head{
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    text-align:left;
    margin-bottom:40px;
  }
}
.mf-snet-list-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  align-self:center;
  font:600 11.5px/1 var(--mf-font);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mf-accent-deep);
  margin:0;
}
@media (min-width:900px){ .mf-snet-list-eyebrow{ align-self:flex-start; } }
.mf-snet-list-eyebrow::before{
  content:""; width:24px; height:1px; background:var(--mf-accent);
}
.mf-snet-list-title-wrap{ flex:1 1 auto; min-width:0; }
.mf-snet-list-title{
  font:600 clamp(26px, 4vw, 36px)/1.1 var(--mf-font);
  letter-spacing:-.025em;
  color:var(--mf-ink);
  margin:0;
  max-width:22ch;
  margin-inline:auto;
}
@media (min-width:900px){ .mf-snet-list-title{ margin-inline:0; } }
.mf-snet-list-title em{
  font-family:var(--mf-font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--mf-accent);
}
.mf-snet-list-count{
  display:inline-flex;
  align-items:center;
  align-self:center;
  font:600 12.5px/1 var(--mf-font);
  letter-spacing:.04em;
  color:var(--mf-ink-muted);
  background:var(--mf-surface);
  border:1px solid var(--mf-line);
  border-radius:999px;
  padding:8px 14px;
  white-space:nowrap;
}
.mf-snet-list-count b{
  color:var(--mf-accent-deep);
  font-weight:700;
  margin-right:4px;
}

/* Grid */
.mf-snet-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:520px){ .mf-snet-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (min-width:1100px){ .mf-snet-grid{ grid-template-columns:repeat(3,1fr); gap:18px; } }

/* Card */
.mf-snet-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:18px;
  padding:22px 22px 20px;
  text-decoration:none !important;
  color:var(--mf-ink) !important;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.mf-snet-card::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:3px;
  background:linear-gradient(90deg, var(--mf-accent) 0%, var(--mf-gold) 100%);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .25s ease;
}
.mf-snet-card:hover{
  transform:translateY(-3px);
  border-color:var(--mf-accent);
  box-shadow:0 22px 40px -20px rgba(14,92,58,.30);
}
.mf-snet-card:hover::after{ transform:scaleX(1); }

.mf-snet-card-name{
  font:600 16px/1.3 var(--mf-font);
  letter-spacing:-.005em;
  color:var(--mf-ink);
  margin:0 0 4px;
}
.mf-snet-card-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-size:12.5px;
  color:var(--mf-ink-muted);
  margin-top:auto;
  padding-top:16px;
  border-top:1px dashed var(--mf-line-soft);
}
.mf-snet-card-meta .price{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-size:15px;
  font-weight:600;
  color:var(--mf-accent);
  letter-spacing:-.01em;
}
.mf-snet-card-meta .price-prefix{
  font-family:var(--mf-font);
  font-size:11px;
  font-weight:500;
  color:var(--mf-ink-muted);
  text-transform:uppercase;
  letter-spacing:.10em;
  margin-right:4px;
}
.mf-snet-card-meta .arr{
  color:var(--mf-accent-deep);
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-weight:600;
  transition:transform .18s ease;
}
.mf-snet-card:hover .mf-snet-card-meta .arr{ transform:translateX(3px); }

/* Popular ribbon — gold pill, top-right */
.mf-snet-card-badge{
  position:absolute;
  top:14px; right:14px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 9px;
  background:var(--mf-gold);
  color:#5A4416;
  font:700 10px/1 var(--mf-font);
  letter-spacing:.10em;
  text-transform:uppercase;
  border-radius:999px;
  z-index:1;
}

@media (prefers-reduced-motion: reduce){
  .mf-snet-card,
  .mf-snet-card::after,
  .mf-snet-card-meta .arr{ transition:none; }
}

/* =========================================================
   Helpers
   ========================================================= */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================================================
   /SERVICIOS — 2026 editorial rewrite (sv-* namespace).
   Self-contained: doesn't share class names with the legacy
   services.css so nothing fights us.
   ============================================================ */

[hidden]{display:none !important;}

/* ----- Toolbar (static, scrolls with page) ----- */
.sv-toolbar{
  position:relative;z-index:1;
  background:#FFFFFF;
  border-top:1px solid var(--mf-line-soft);
  border-bottom:1px solid var(--mf-line);
  padding:18px 0;
}
@media (min-width:900px){.sv-toolbar{padding:22px 0;}}

.sv-toolbar-inner{
  max-width:var(--mf-container);
  margin:0 auto;
  padding:0 var(--mf-pad);
  display:flex;flex-direction:column;gap:10px;
}
@media (min-width:900px){
  .sv-toolbar-inner{flex-direction:row;align-items:center;gap:14px;}
}

/* ----- Search ----- */
.sv-search{position:relative;flex:1;min-width:0;}
.sv-search-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--mf-ink-muted);pointer-events:none;
}
.sv-search-input{
  width:100%;height:42px;
  background:var(--mf-surface-3);
  border:1px solid var(--mf-line);
  border-radius:999px;
  padding:0 40px 0 42px;
  font:500 14px/1 var(--mf-font);
  color:var(--mf-ink);
  letter-spacing:-.005em;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.sv-search-input::placeholder{color:var(--mf-ink-muted);}
.sv-search-input:focus{
  border-color:var(--mf-accent);
  box-shadow:0 0 0 3px var(--mf-accent-glow);
}
.sv-search-clear{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:0;border-radius:50%;
  background:var(--mf-line-soft);color:var(--mf-ink-soft);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.sv-search-clear[hidden]{display:none !important;}
.sv-search-clear:hover{background:var(--mf-ink);color:#fff;}

/* ----- Filters (chips) ----- */
.sv-filters{
  display:flex;align-items:center;gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:2px 2px;
  flex:1;min-width:0;
}
.sv-filters::-webkit-scrollbar{display:none;}

.sv-filter{
  flex:none;
  display:inline-flex;align-items:center;gap:8px;
  height:36px;
  padding:0 14px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:999px;
  font:500 13px/1 var(--mf-font);
  color:var(--mf-ink-soft);
  cursor:pointer;
  letter-spacing:-.005em;
  white-space:nowrap;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.sv-filter:hover{
  color:var(--mf-ink);
  border-color:var(--mf-line-strong);
}
.sv-filter.is-active{
  background:var(--mf-ink);
  color:#FFFFFF;
  border-color:var(--mf-ink);
}
.sv-filter-count{
  font-family:var(--mf-font-mono, ui-monospace, monospace);
  font-size:11px;font-weight:500;
  padding:1px 7px;
  background:var(--mf-line-soft);
  border-radius:999px;
  color:var(--mf-ink-muted);
  letter-spacing:0;
}
.sv-filter.is-active .sv-filter-count{
  background:rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);
}

/* ----- Sort + view controls ----- */
.sv-controls{display:flex;align-items:center;gap:8px;flex:none;}
.sv-sort{
  height:36px;padding:0 32px 0 14px;
  background:#FFFFFF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237A7F77' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center;
  border:1px solid var(--mf-line);
  border-radius:999px;
  font:500 13px/1 var(--mf-font);
  color:var(--mf-ink);
  cursor:pointer;
  appearance:none;-webkit-appearance:none;
}
.sv-sort:focus{
  outline:none;border-color:var(--mf-accent);
  box-shadow:0 0 0 3px var(--mf-accent-glow);
}

.sv-results{
  font-size:13px;color:var(--mf-ink-soft);
}

/* ----- Listing layout ----- */
.sv-listing{
  background:#FFFFFF;
  padding:40px 0 80px;
}
@media (min-width:900px){.sv-listing{padding:56px 0 112px;}}

.sv-listing-inner{
  max-width:var(--mf-container);
  margin:0 auto;
  padding:0 var(--mf-pad);
}

.sv-network{
  margin-bottom:56px;
  scroll-margin-top:24px;
}
@media (min-width:900px){.sv-network{margin-bottom:72px;}}
.sv-network + .sv-network{
  border-top:1px solid var(--mf-line-soft);
  padding-top:48px;
}
@media (min-width:900px){
  .sv-network + .sv-network{padding-top:64px;}
}

/* ----- Network header (editorial flat) ----- */
.sv-network-head{
  display:flex;align-items:flex-end;gap:14px;
  margin-bottom:22px;
}
.sv-network-icon{
  width:32px;height:32px;border-radius:8px;
  display:grid;place-items:center;flex:none;overflow:hidden;
}
.sv-network-icon img{width:24px;height:24px;object-fit:contain;}
.sv-network-name{
  font:600 22px/1.1 var(--mf-font);
  letter-spacing:-.02em;color:var(--mf-ink);
  margin:0;flex:1;min-width:0;
}
@media (min-width:900px){.sv-network-name{font-size:26px;}}
.sv-network-name a{color:inherit;text-decoration:none !important;}
.sv-network-name a:hover{color:var(--mf-accent);}

.sv-network-all{
  display:inline-flex;align-items:center;gap:4px;
  padding:0;background:transparent;border:0;
  font:500 13px/1 var(--mf-font);
  color:var(--mf-ink-muted);
  flex:none;
  text-decoration:none !important;
  transition:color .15s ease;
}
.sv-network-all:hover{color:var(--mf-accent);}

/* ----- Grid ----- */
.sv-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width:479px){.sv-grid{grid-template-columns:1fr;}}
@media (min-width:780px){.sv-grid{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px;}}
@media (min-width:1080px){.sv-grid{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px;}}

/* ----- Service card (editorial flat) ----- */
.sv-card{
  display:flex;flex-direction:column;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:14px;
  padding:18px 18px 16px;
  text-decoration:none !important;
  color:inherit;
  min-height:160px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
@media (min-width:1080px){
  .sv-card{padding:20px 20px 18px;}
}
.sv-card:hover{
  border-color:var(--mf-ink-muted);
  box-shadow:0 6px 18px -10px rgba(27,31,26,.16);
}

.sv-card-head{
  display:flex;align-items:center;
  margin-bottom:8px;
}
.sv-card-platform{
  font:600 10px/1 var(--mf-font-mono, ui-monospace, monospace);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mf-ink-muted);
}

.sv-card-title{
  flex:1;
  font:600 15.5px/1.3 var(--mf-font);
  letter-spacing:-.015em;
  color:var(--mf-ink);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

.sv-card-foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-top:14px;
  margin-top:auto;
  border-top:1px solid var(--mf-line-soft);
}

.sv-card-price{
  display:inline-flex;align-items:baseline;gap:5px;
  font:500 11px/1 var(--mf-font);
  color:var(--mf-ink-muted);
}
.sv-card-price-from{
  font-size:11px;font-weight:500;color:var(--mf-ink-muted);
  letter-spacing:.02em;
}
.sv-card-price-value{
  font-family:var(--mf-font-mono, ui-monospace, monospace);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  font:600 17px/1 var(--mf-font-mono, ui-monospace, monospace);
  color:var(--mf-ink);
  letter-spacing:-.015em;
  transition:color .18s ease;
}
.sv-card:hover .sv-card-price-value{color:var(--mf-accent);}

.sv-card-arrow{
  font:500 14px/1 var(--mf-font);
  color:var(--mf-ink-muted);
  flex:none;
  transition:color .18s ease, transform .18s ease;
  align-self:center;
}
.sv-card:hover .sv-card-arrow{
  color:var(--mf-accent);
  transform:translateX(3px);
}

/* ----- "Ver más servicios" — solid forest CTA -----
   Defensive: every non-trivial property uses !important because legacy
   rules (button{} resets, framework button styles, services.css, etc.)
   keep flipping the background back to white. This class is unique
   and used only here, so the !important is safe. */
.sv-expand-wrap{
  display:flex;justify-content:center;
  margin-top:18px;
}
button.sv-expand{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:12px 22px !important;
  background:#0E5C3A !important;
  background-color:#0E5C3A !important;
  background-image:none !important;
  color:#FFFFFF !important;
  border:1px solid #0E5C3A !important;
  border-radius:999px !important;
  font:600 13px/1 'Inter', sans-serif !important;
  letter-spacing:-.005em !important;
  cursor:pointer !important;
  box-shadow:0 12px 24px -10px rgba(14,92,58,.45) !important;
  transition:background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
  text-decoration:none !important;
  text-shadow:none !important;
  min-height:44px;
}
button.sv-expand:hover,
button.sv-expand:focus,
button.sv-expand:active{
  background:#0A4A2E !important;
  background-color:#0A4A2E !important;
  border-color:#0A4A2E !important;
  color:#FFFFFF !important;
  transform:translateY(-1px) !important;
  box-shadow:0 18px 32px -12px rgba(14,92,58,.55) !important;
}
button.sv-expand .sv-expand__txt{
  color:#FFFFFF !important;
  font-weight:600 !important;
  letter-spacing:-.005em !important;
}
button.sv-expand .sv-expand__chev{
  stroke:#FFFFFF !important;
  color:#FFFFFF !important;
  transition:transform .2s ease !important;
}
button.sv-expand.is-expanded .sv-expand__chev{
  transform:rotate(180deg) !important;
}

/* ----- Empty state ----- */
.sv-empty{
  text-align:center;
  padding:64px 24px;
  background:var(--mf-surface-3);
  border:1px solid var(--mf-line);
  border-radius:18px;
}
.sv-empty h3{
  font:600 20px/1.2 var(--mf-font);
  letter-spacing:-.02em;
  color:var(--mf-ink);
  margin:0 0 8px;
}
.sv-empty p{
  font-size:14px;color:var(--mf-ink-soft);
  margin:0 0 20px;
}
.sv-reset{
  display:inline-flex;align-items:center;
  padding:11px 22px;
  background:var(--mf-accent);
  color:#FFFFFF;
  border:1px solid var(--mf-accent);
  border-radius:999px;
  font:600 13px/1 var(--mf-font);
  cursor:pointer;
  box-shadow:0 12px 24px -10px rgba(14,92,58,.45);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sv-reset:hover{
  background:var(--mf-accent-deep);
  transform:translateY(-1px);
  box-shadow:0 18px 32px -12px rgba(14,92,58,.55);
}