/* ============================================================================
 MR. FOX DIGITAL — v1.2.8, RECONSTRUCCIÓN EDITABLE DE LA PORTADA
 Referencia de composición: captura del usuario del 25/10/2026.
 ¡NO es una captura pegada! El auto es un recurso fotográfico autónomo;
 el título, CTA, categorías y enlaces tienen DOM y opciones independientes.
 Para ajustar sólo esta portada: modificar este archivo.
 ============================================================================ */

:root{--mf-fox-navy:#030817;--mf-cards-bg:#030d1b;--mf-card-cut:16%}

/* 1 — ESCENA (arte independiente, sin capas artificiales de luz) */
.mf-hero{
  height:auto!important;min-height:670px!important;
  overflow:hidden!important;isolation:isolate;
  position:relative;
  background:#020716!important;
}
.mf-hero-art{inset:0!important;overflow:hidden!important;z-index:-2}
.mf-hero-art img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:54% 52%!important;
  transform:none!important;animation:none!important;
  filter:saturate(1.045) contrast(1.025) brightness(.96)!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
.mf-hero::before{
  content:"";inset:0;position:absolute;z-index:-1;opacity:1;
  background:
    linear-gradient(90deg,rgba(2,6,19,.90) 0%,rgba(2,6,19,.85) 12%,rgba(2,6,19,.60) 27%,rgba(2,6,19,.17) 43%,transparent 64%),
    linear-gradient(0deg,rgba(2,5,13,.18),transparent 32%);
}
.mf-hero::after{display:none!important}
.mf-hero-atmosphere{display:none!important}
.mf-hero-bottom-line{display:none!important}
.mf-hero-inner{
  width:min(1272px,calc(100% - 160px))!important;
  min-height:670px!important;
  padding:67px 0 228px!important;
  display:flex;align-items:flex-start!important;
}
.mf-hero-copy{
  position:relative;z-index:5;
  width:clamp(440px,37.5vw,535px)!important;
  max-width:100%;
  transform:none!important;animation:none!important;
  text-shadow:0 3px 20px rgba(0,0,0,.55);
}
.mf-hero-kicker{
  font-size:clamp(.72rem,1.12vw,.9rem)!important;
  font-weight:650!important;
  letter-spacing:.36em!important;
  line-height:1.5!important;
  color:#f3f8ff!important;
  margin:0 0 1px!important;
}
.mf-hero-title-art{
  width:100%!important;max-width:510px!important;
  margin:0 0 13px!important;
  overflow:visible!important;
  transform:none!important;animation:none!important;
  filter:drop-shadow(0 0 3px rgba(234,77,231,.10))!important;
}
.mf-hero-title-art img{
  display:block;width:100%;height:auto;object-fit:contain;
  transform:none!important;animation:none!important;
}
/* Desactiva el barrido falso y el resplandor que invadía al zorro. */
.mf-hero-title-art::before,.mf-hero-title-art::after,
.mf-hero-art::before,.mf-hero-art::after{content:none!important;display:none!important;animation:none!important}
.mf-hero-summary{
  margin:0 0 22px!important;
  max-width:480px!important;
  font-size:clamp(.88rem,1.07vw,1.03rem)!important;
  line-height:1.42!important;
  letter-spacing:.025em!important;
  font-weight:650!important;
  text-transform:uppercase;
  text-wrap:pretty;
  color:#eef4ff!important;
}
.mf-hero-buttons{gap:17px!important;align-items:center}
.mf-hero-buttons .mf-button{min-height:46px!important;padding:11px 21px!important;border-radius:8px!important;font-size:.75rem!important}
.mf-hero-buttons .mf-button--primary{box-shadow:0 0 17px rgba(248,51,222,.22),0 4px 10px rgba(0,0,0,.22)!important}
.mf-hero-points{display:none!important}

/* 2 — CATEGORÍAS: siete tarjetas REALES, individualmente editables y clicables.
   El exceso visual anterior venía del recorte diagonal, no del gap del grid:
   ensanchamos cada tarjeta 32 px para compensar esa pérdida visual. */
.mf-categories{
  position:relative;z-index:7;
  margin-top:-62px!important;
  padding:0 0 14px!important;
  background:transparent!important;
}
.mf-categories .mf-wrap{
  width:min(1880px,calc(100% - 60px))!important;
  max-width:none!important;
  position:relative;
}
.mf-categories .mf-section-heading{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mf-category-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(176px,1fr))!important;
  column-gap:0!important;row-gap:8px!important;
  align-items:stretch!important;
}
.mf-category-card{
  position:relative;
  width:calc(100% + 32px)!important;
  margin-inline-start:-16px!important;
  min-height:156px!important;height:156px;
  padding:16px 15px 14px!important;
  border:0!important;
  border-radius:0!important;
  clip-path:polygon(var(--mf-card-cut) 0,100% 0,calc(100% - var(--mf-card-cut)) 100%,0 100%)!important;
  background:linear-gradient(167deg,rgba(3,18,33,.99) 0%,rgba(2,9,21,1) 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(18,34,58,.35)!important;
  overflow:hidden;
  display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;
  filter:none;
  transform:none;
  transition:transform .22s cubic-bezier(.2,.8,.25,1),filter .22s, box-shadow .22s ease;
}
.mf-category-card::before{content:none!important;display:none!important}
.mf-category-card::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse at 50% 10%,rgba(8,89,120,.10),transparent 66%);
  opacity:1!important;pointer-events:none;
}
.mf-category-card:is(:hover,:focus-within){
  transform:translateY(-7px)!important;
  box-shadow:inset 0 0 0 1.2px rgba(22,241,255,.92), inset 0 0 0 2.4px rgba(251,61,220,.28), 0 0 14px rgba(31,228,250,.16), 0 0 16px rgba(244,59,219,.14)!important;
  filter:drop-shadow(0 0 11px rgba(31,228,250,.12)) drop-shadow(0 0 12px rgba(244,59,219,.12))!important;
}
.mf-category-icon{
  height:64px!important;min-height:64px!important;
  margin:0 0 7px!important;
  width:100%;display:flex;align-items:center;justify-content:center;
  filter:none!important;
}
.mf-category-icon img{
  max-width:106px!important;
  max-height:64px!important;
  width:auto!important;height:auto!important;
  object-fit:contain;
  filter:drop-shadow(0 0 7px rgba(28,195,235,.17));
}
.mf-category-card h3{
  font-family:var(--mf-display);font-size:.84rem!important;
  line-height:1.18!important;letter-spacing:-.014em!important;
  margin:0 0 6px!important;
  font-weight:950!important;color:#fff!important;
  text-transform:uppercase;
}
.mf-category-card p{
  font-size:.63rem!important;line-height:1.35!important;
  max-width:175px;margin:0!important;
  color:#c0ccd8!important;
  text-wrap:balance;
}
.mf-category-card:is(:hover,:focus-within) .mf-category-icon{
  transform:translateY(-3px) scale(1.06)!important;
  filter:drop-shadow(0 0 8px rgba(241,51,221,.22))!important;
}
/* 3 — restablecer el flujo original por debajo sin tocar la tienda ni Contacto */
.mf-featured{padding-top:26px!important;background:#040a19!important}

/* El usuario puede activar título de texto REAL en Personalizar > Gráfica. */
.mf-hero--live-title .mf-hero-title-art{display:none!important}
.mf-hero--live-title .mf-hero-title{
  display:block!important;position:relative!important;
  width:100%!important;height:auto!important;clip-path:none!important;overflow:visible!important;
  font-size:clamp(2.45rem,4.7vw,5.3rem);
  line-height:.92;letter-spacing:-.065em;
  font-weight:1000;font-style:italic;
  margin:8px 0 16px!important;
}
.mf-hero--live-title .mf-hero-title span,
.mf-hero--live-title .mf-hero-title strong{
  display:block!important;width:100%;overflow:visible;
  white-space:nowrap!important;transform:skewX(-8deg) scaleX(.87);
  transform-origin:0 50%;
}
.mf-hero--live-title .mf-hero-title strong{
  margin-top:7px;
  background:linear-gradient(100deg,#0ef0ff 2%,#63ccff 30%,#c849fa 64%,#fd32ce 95%);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  font-size:1.08em;
}

/* TABLET: tarjetas reales acomodadas en cuatro columnas. */
@media(max-width:1150px){
  .mf-hero{min-height:630px!important}
  .mf-hero-inner{width:calc(100% - 86px)!important;min-height:630px!important;padding:70px 0 215px!important}
  .mf-hero-copy{width:min(490px,52%)!important}
  .mf-hero-title-art{max-width:475px!important}
  .mf-category-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;row-gap:10px!important}
  .mf-categories .mf-wrap{width:calc(100% - 45px)!important}
  .mf-category-card{width:calc(100% + 30px)!important;margin-inline-start:-15px!important}
}
@media(max-width:760px){
  .mf-hero{min-height:700px!important}
  .mf-hero-art{inset:210px -48% 0 -38%!important}
  .mf-hero-art img{object-position:59% 47%!important}
  .mf-hero::before{
    background:linear-gradient(180deg,#020716 0%,rgba(2,7,22,.95) 19%,rgba(2,7,22,.76) 42%,rgba(2,7,22,.10) 78%,rgba(2,7,22,.15));
  }
  .mf-hero-inner{min-height:700px!important;padding:31px 0 205px!important;width:calc(100% - 36px)!important}
  .mf-hero-copy{width:100%!important;max-width:520px!important}
  .mf-hero-kicker{font-size:.72rem!important}
  .mf-hero-title-art{max-width:490px!important;margin-bottom:11px!important}
  .mf-hero-summary{font-size:.78rem!important;max-width:450px!important;margin-bottom:18px!important}
  .mf-hero-buttons .mf-button{min-height:44px!important;padding:10px 12px!important;font-size:.65rem!important}
  .mf-categories{margin-top:-70px!important}
  .mf-categories .mf-wrap{width:calc(100% - 36px)!important}
  .mf-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:4px!important;row-gap:8px!important}
  .mf-category-card{width:calc(100% + 22px)!important;margin-inline-start:-11px!important;height:157px;min-height:157px!important;padding:17px 10px 12px!important}
  .mf-category-icon{height:65px!important;min-height:65px!important;margin-bottom:7px!important}
  .mf-category-card p{font-size:.62rem!important;max-width:145px}
  .mf-category-card h3{font-size:.80rem!important}
}
@media(max-width:480px){
  .mf-hero{min-height:650px!important}
  .mf-hero-inner{min-height:650px!important;padding:24px 0 182px!important}
  .mf-hero-art{inset:196px -52% 0 -54%!important}
  .mf-hero-art img{object-position:58% 50%!important}
  .mf-hero-title-art{max-width:360px!important}
  .mf-hero-kicker{font-size:.63rem!important}
  .mf-hero-summary{font-size:.72rem!important;max-width:350px!important}
  .mf-hero-buttons{gap:8px!important}
  .mf-hero-buttons .mf-button{font-size:.59rem!important;padding:9px 11px!important}
  .mf-categories{margin-top:-56px!important}
  .mf-categories .mf-wrap{width:calc(100% - 24px)!important}
  .mf-category-grid{column-gap:5px!important}
  .mf-category-card{height:151px;min-height:151px!important;width:calc(100% + 18px)!important;margin-inline-start:-9px!important}
  .mf-category-card h3{font-size:.73rem!important}
  .mf-category-card p{font-size:.59rem!important}
  .mf-hero--live-title .mf-hero-title{font-size:clamp(2.2rem,11.2vw,3.3rem)}
}
@media(prefers-reduced-motion:reduce){
  .mf-category-card:is(:hover,:focus-within){transform:none!important}
}