body.mtg-template-tm4 .tm4-home,
.tm4-home{
  --primary:#6c3bff;
  --secondary:#00c2ff;
  --pink:#ff4ecd;
  --text:#101828;
  --muted:#667085;
  --line:#e6e9f5;
  --bg:#f7f8ff;
  background:radial-gradient(circle at top left,rgba(108,59,255,.16),transparent 32%),radial-gradient(circle at top right,rgba(0,194,255,.16),transparent 30%),var(--bg);
  color:var(--text);
  overflow:hidden;
}

.tm4-home *{box-sizing:border-box}
.tm4-shell{width:90%;max-width:1720px;margin:0 auto}
.tm4-section{padding:72px 0}
.tm4-hero{padding:82px 0 72px}
.tm4-hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:54px;align-items:center}
.tm4-eyebrow,.tm4-head span{display:inline-flex;width:max-content;padding:8px 14px;border-radius:999px;background:rgba(108,59,255,.1);color:var(--primary);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.tm4-hero h1{margin:18px 0;font-size:clamp(42px,6vw,82px);line-height:.96;letter-spacing:-.06em;max-width:780px}
.tm4-hero p,.tm4-head p,.tm4-newsletter p,.tm4-final p{color:var(--muted);font-size:17px;line-height:1.7}
.tm4-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.tm4-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 22px;border-radius:999px;text-decoration:none;font-weight:900}
.tm4-btn-primary{color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 18px 38px rgba(108,59,255,.28)}
.tm4-btn-light{color:var(--text);background:#fff;border:1px solid var(--line)}
.tm4-mini-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px;max-width:620px}
.tm4-mini-benefits div{padding:16px;border-radius:22px;background:rgba(255,255,255,.75);border:1px solid rgba(108,59,255,.12)}
.tm4-mini-benefits strong{display:block;color:var(--primary);font-size:22px}
.tm4-mini-benefits span{font-size:13px;color:var(--muted);font-weight:800}
.tm4-hero-visual{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center}
.tm4-hero-visual:before{content:"";position:absolute;width:520px;height:520px;border-radius:42% 58% 55% 45%;background:linear-gradient(135deg,var(--primary),var(--secondary) 55%,var(--pink));filter:drop-shadow(0 34px 70px rgba(108,59,255,.3))}
.tm4-phone{position:relative;z-index:2;width:min(360px,90%);min-height:520px;padding:20px;border-radius:42px;background:#101828;box-shadow:0 34px 80px rgba(16,24,40,.35);transform:rotate(-4deg)}
.tm4-phone-top{display:flex;gap:6px;justify-content:center;margin-bottom:18px}
.tm4-phone-top i{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.35)}
.tm4-phone-screen{min-height:450px;border-radius:30px;padding:22px;background:linear-gradient(180deg,#fff,#eef3ff)}
.tm4-stat,.tm4-stat-row div{padding:18px;border-radius:24px;background:#fff;box-shadow:0 18px 44px rgba(16,24,40,.12)}
.tm4-stat span,.tm4-stat-row span{font-size:13px;font-weight:800;color:var(--muted)}
.tm4-stat strong{display:block;margin-top:6px;font-size:42px;color:var(--primary)}
.tm4-bars{display:flex;align-items:end;gap:12px;height:160px;margin:24px 0}
.tm4-bars i{flex:1;border-radius:999px 999px 10px 10px;background:linear-gradient(180deg,var(--secondary),var(--primary))}
.tm4-bars i:nth-child(1){height:42%}.tm4-bars i:nth-child(2){height:64%}.tm4-bars i:nth-child(3){height:50%}.tm4-bars i:nth-child(4){height:82%}.tm4-bars i:nth-child(5){height:70%}
.tm4-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tm4-stat-row b{display:block;margin-top:5px;font-size:24px}
.tm4-head{margin-bottom:34px}
.tm4-head.center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.tm4-head.center span{margin-left:auto;margin-right:auto}
.tm4-head.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);gap:24px;align-items:end}
.tm4-head h2,.tm4-newsletter h2,.tm4-final h2{margin:16px 0 0;font-size:clamp(30px,4vw,54px);line-height:1.02;letter-spacing:-.04em}
.tm4-service-grid,.tm4-benefits-grid,.tm4-platform-grid,.tm4-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tm4-service-grid article,.tm4-platform-grid article,.tm4-product-card{position:relative;border:1px solid rgba(108,59,255,.10);background:rgba(255,255,255,.88);border-radius:30px;box-shadow:0 18px 48px rgba(40,33,93,.08)}
.tm4-service-grid article{padding:26px}
.tm4-service-grid b,.tm4-platform-grid b{width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:20px;background:linear-gradient(135deg,rgba(108,59,255,.12),rgba(0,194,255,.14));color:var(--primary);font-size:25px}
.tm4-service-grid h3{margin:18px 0 8px;font-size:22px}
.tm4-service-grid p{margin:0;color:var(--muted);line-height:1.6}
.tm4-product-card{overflow:hidden;transition:.2s ease}
.tm4-product-card:hover{transform:translateY(-5px);box-shadow:0 26px 70px rgba(40,33,93,.15)}
.tm4-product-link{position:absolute;inset:0;z-index:2}
.tm4-product-media{height:230px;background:linear-gradient(135deg,rgba(108,59,255,.12),rgba(0,194,255,.12));display:flex;align-items:center;justify-content:center;overflow:hidden}
.tm4-product-media img{width:100%;height:100%;object-fit:cover}
.tm4-product-placeholder{width:92px;height:92px;border-radius:30px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:34px;background:linear-gradient(135deg,var(--primary),var(--secondary))}
.tm4-product-body{padding:22px}
.tm4-product-body span{display:inline-flex;margin-bottom:10px;color:var(--primary);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.tm4-product-body h3{min-height:52px;margin:0;font-size:21px;line-height:1.22}
.tm4-product-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px}
.tm4-product-bottom strong{font-size:19px}
.tm4-cart{position:relative;z-index:4;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;text-decoration:none}
.tm4-benefits{padding:38px 0}
.tm4-benefits-grid{background:#101828;border-radius:34px;padding:18px}
.tm4-benefits-grid article{padding:24px;border-radius:26px;background:rgba(255,255,255,.08);color:#fff}
.tm4-benefits-grid p{color:rgba(255,255,255,.68)}
.tm4-platform-grid article{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.tm4-platform-grid strong{font-size:20px}
.tm4-newsletter,.tm4-final{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:34px;align-items:center;padding:42px;border-radius:40px;background:linear-gradient(135deg,#fff,#eef3ff);border:1px solid rgba(108,59,255,.12);box-shadow:0 24px 70px rgba(44,37,97,.14)}
.tm4-newsletter form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
.tm4-newsletter input,.tm4-newsletter button{min-height:54px;border-radius:999px;border:1px solid var(--line);padding:0 18px;font-weight:800}
.tm4-newsletter button{border:0;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary))}
.tm4-final-points{display:grid;gap:14px}
.tm4-final-points div{padding:18px;border-radius:24px;background:#fff;border:1px solid var(--line);font-weight:900}
.tm4-footer{padding:32px 0 56px}
.tm4-footer .tm4-shell{padding:28px;border-radius:30px;background:#101828;color:#fff}
.tm4-footer p{color:rgba(255,255,255,.65)}
@media(max-width:1180px){.tm4-hero-grid,.tm4-head.split,.tm4-newsletter,.tm4-final{grid-template-columns:1fr}.tm4-service-grid,.tm4-benefits-grid,.tm4-platform-grid,.tm4-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.tm4-section{padding:48px 0}.tm4-hero{padding:46px 0}.tm4-hero h1{font-size:42px}.tm4-mini-benefits,.tm4-service-grid,.tm4-benefits-grid,.tm4-platform-grid{grid-template-columns:1fr}.tm4-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tm4-product-media{height:150px}.tm4-product-body{padding:14px}.tm4-product-body h3{font-size:15px;min-height:40px}.tm4-product-bottom strong{font-size:14px}.tm4-cart{width:38px;height:38px}.tm4-hero-visual{min-height:420px}.tm4-hero-visual:before{width:340px;height:340px}.tm4-phone{min-height:430px}.tm4-newsletter,.tm4-final{padding:24px}.tm4-newsletter form{grid-template-columns:1fr}}

/* TM4 FIX: si hay imagen hero, ocultar blob decorativo y dejar la imagen limpia */
.tm4-home--has-hero-image .tm4-hero-visual:before{
  display:none !important;
}

.tm4-home--has-hero-image .tm4-hero-visual{
  min-height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tm4-hero-img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  max-width:660px;
  height:auto;
  border-radius:28px;
  box-shadow:0 22px 60px rgba(40,33,93,.16);
}

/* TM4 FIX: ancho más amplio y hero menos encajonado */
.tm4-shell{
  width:90% !important;
  max-width:1720px !important;
}

.tm4-hero-grid{
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap:64px !important;
}

.tm4-hero-copy{
  max-width:720px;
}

.tm4-hero-visual{
  width:100%;
}

.tm4-home--has-hero-image .tm4-hero-img,
.tm4-hero-img{
  width:100% !important;
  max-width:760px !important;
  object-fit:cover;
}

@media(max-width:1180px){
  .tm4-shell{
    width:90% !important;
    max-width:100% !important;
  }

  .tm4-hero-grid{
    grid-template-columns:1fr !important;
    gap:36px !important;
  }

  .tm4-hero-copy{
    max-width:100%;
  }

  .tm4-home--has-hero-image .tm4-hero-img,
  .tm4-hero-img{
    max-width:100% !important;
  }
}

/* ==========================================================
   TM4 SOCIAL BOOST - POLISH VISUAL MOCKUP
   Fondo limpio, header blanco, tipografía y botones estilo mockup.
   ========================================================== */

body.mtg-template-tm4,
body.wp-theme-mtg-engine.mtg-template-tm4{
  background:
    radial-gradient(circle at 92% 22%, rgba(0, 194, 255, .13), transparent 28%),
    radial-gradient(circle at 6% 12%, rgba(108, 59, 255, .08), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 48%, #ffffff 100%) !important;
  color:#06142d !important;
  font-family: Inter, Montserrat, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
}

/* Evita fondos morados pesados heredados */
body.mtg-template-tm4 .site,
body.mtg-template-tm4 .site-main,
body.mtg-template-tm4 .content-area,
body.mtg-template-tm4 .site-content,
body.mtg-template-tm4 main.tm4-home{
  background:transparent !important;
}

/* Header global más blanco y limpio */
body.mtg-template-tm4 header,
body.mtg-template-tm4 .site-header,
body.mtg-template-tm4 .mtg-header,
body.mtg-template-tm4 .mtg-header-preset,
body.mtg-template-tm4 .mtg-main-header,
body.mtg-template-tm4 .mtg-commerce-header{
  background:#ffffff !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.045) !important;
}

/* Navegación */
body.mtg-template-tm4 .current-menu-item > a,
body.mtg-template-tm4 .current_page_item > a,
body.mtg-template-tm4 nav a[aria-current="page"]{
  background:linear-gradient(135deg,#6c3bff,#00a8ff) !important;
  color:#ffffff !important;
  border-radius:14px !important;
  box-shadow:0 10px 20px rgba(0,118,255,.18) !important;
}

/* Shell más parecido al mockup */
body.mtg-template-tm4 .tm4-shell{
  width:90% !important;
  max-width:1720px !important;
}

/* Hero limpio */
body.mtg-template-tm4 .tm4-hero{
  background:transparent !important;
  padding-top:64px !important;
  padding-bottom:42px !important;
  overflow:hidden;
}

body.mtg-template-tm4 .tm4-hero-grid{
  align-items:center !important;
  gap:72px !important;
}

/* Texto hero estilo mockup */
body.mtg-template-tm4 .tm4-eyebrow,
body.mtg-template-tm4 .tm4-hero-copy .tm4-eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  padding:9px 16px !important;
  border-radius:999px !important;
  background:#eaf2ff !important;
  color:#1677ff !important;
  font-size:14px !important;
  font-weight:900 !important;
  letter-spacing:.045em !important;
  text-transform:uppercase !important;
}

body.mtg-template-tm4 .tm4-hero-copy h1{
  color:#06142d !important;
  font-family: Inter, Montserrat, "Segoe UI", system-ui, sans-serif !important;
  font-size:clamp(48px,5.1vw,92px) !important;
  line-height:.98 !important;
  letter-spacing:-.06em !important;
  font-weight:1000 !important;
  margin:28px 0 24px !important;
  max-width:760px !important;
}

body.mtg-template-tm4 .tm4-hero-copy p{
  color:#68758f !important;
  font-size:clamp(17px,1.15vw,22px) !important;
  line-height:1.52 !important;
  max-width:660px !important;
  margin-bottom:30px !important;
}

/* Botones hero */
body.mtg-template-tm4 .tm4-actions{
  display:flex !important;
  gap:24px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}

body.mtg-template-tm4 .tm4-btn,
body.mtg-template-tm4 .tm4-actions a{
  min-height:58px !important;
  padding:0 34px !important;
  border-radius:16px !important;
  font-size:17px !important;
  font-weight:900 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease !important;
}

body.mtg-template-tm4 .tm4-btn:hover,
body.mtg-template-tm4 .tm4-actions a:hover{
  transform:translateY(-1px);
}

body.mtg-template-tm4 .tm4-btn-primary{
  background:linear-gradient(135deg,#006dff 0%,#00b8ff 52%,#9a37ff 100%) !important;
  color:#ffffff !important;
  border:0 !important;
  box-shadow:0 18px 34px rgba(0,118,255,.24) !important;
}

body.mtg-template-tm4 .tm4-btn-light{
  background:#ffffff !important;
  color:#1677ff !important;
  border:2px solid rgba(22,119,255,.55) !important;
  box-shadow:0 14px 26px rgba(15,23,42,.06) !important;
}

/* Mini beneficios más limpios */
body.mtg-template-tm4 .tm4-mini-benefits{
  margin-top:44px !important;
  gap:24px !important;
}

body.mtg-template-tm4 .tm4-mini-benefits > div{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.06) !important;
  border-radius:18px !important;
  padding:16px 18px !important;
  box-shadow:0 12px 30px rgba(15,23,42,.05) !important;
}

body.mtg-template-tm4 .tm4-mini-benefits strong{
  font-size:28px !important;
}

body.mtg-template-tm4 .tm4-mini-benefits span{
  color:#06142d !important;
  font-weight:900 !important;
}

body.mtg-template-tm4 .tm4-mini-benefits small{
  color:#7b8798 !important;
}

/* Imagen hero limpia: sin círculos/blobs encima */
body.mtg-template-tm4 .tm4-hero-visual{
  position:relative !important;
  background:transparent !important;
  min-height:auto !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

body.mtg-template-tm4 .tm4-hero-visual:before,
body.mtg-template-tm4 .tm4-hero-visual:after,
body.mtg-template-tm4 .tm4-phone:before,
body.mtg-template-tm4 .tm4-phone:after{
  display:none !important;
  content:none !important;
}

body.mtg-template-tm4 .tm4-hero-img{
  width:100% !important;
  max-width:760px !important;
  height:auto !important;
  display:block !important;
  object-fit:cover !important;
  border-radius:22px !important;
  box-shadow:0 22px 60px rgba(15,23,42,.10) !important;
  position:relative !important;
  z-index:2 !important;
}

/* Secciones: fondo blanco y tipografía más consistente */
body.mtg-template-tm4 .tm4-section{
  background:transparent !important;
  padding-top:48px !important;
  padding-bottom:48px !important;
}

body.mtg-template-tm4 .tm4-head h2{
  color:#06142d !important;
  font-weight:1000 !important;
  letter-spacing:-.045em !important;
}

body.mtg-template-tm4 .tm4-head p{
  color:#68758f !important;
}

/* Categorías parecidas al mockup */
body.mtg-template-tm4 .tm4-category-card,
body.mtg-template-tm4 .tm4-product-card{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 16px 40px rgba(15,23,42,.065) !important;
}

body.mtg-template-tm4 .tm4-category-card{
  border-radius:20px !important;
  overflow:hidden !important;
}

body.mtg-template-tm4 .tm4-category-img{
  background:#f8fbff !important;
}

body.mtg-template-tm4 .tm4-category-card h3{
  color:#ffffff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.22) !important;
}

/* Productos */
body.mtg-template-tm4 .tm4-product-card{
  border-radius:20px !important;
  overflow:hidden !important;
}

body.mtg-template-tm4 .tm4-product-body h3{
  color:#101828 !important;
  font-weight:900 !important;
}

body.mtg-template-tm4 .tm4-product-bottom strong{
  color:#06142d !important;
  font-weight:1000 !important;
}

body.mtg-template-tm4 .tm4-cart{
  background:#ff2f7d !important;
  color:#ffffff !important;
  border-radius:999px !important;
  box-shadow:0 12px 24px rgba(255,47,125,.24) !important;
}

/* Beneficios inferiores */
body.mtg-template-tm4 .tm4-benefits{
  background:transparent !important;
}

body.mtg-template-tm4 .tm4-benefits-grid{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.07) !important;
  border-radius:26px !important;
  box-shadow:0 18px 48px rgba(15,23,42,.06) !important;
  padding:28px !important;
}

body.mtg-template-tm4 .tm4-benefits-grid article{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

body.mtg-template-tm4 .tm4-benefits-grid h3{
  color:#06142d !important;
}

body.mtg-template-tm4 .tm4-benefits-grid p{
  color:#68758f !important;
}

/* Mobile */
@media(max-width:1180px){
  body.mtg-template-tm4 .tm4-hero{
    padding-top:38px !important;
  }

  body.mtg-template-tm4 .tm4-hero-grid{
    grid-template-columns:1fr !important;
    gap:38px !important;
  }

  body.mtg-template-tm4 .tm4-hero-copy h1{
    font-size:clamp(42px,10vw,68px) !important;
  }

  body.mtg-template-tm4 .tm4-hero-img{
    max-width:100% !important;
  }
}

@media(max-width:640px){
  body.mtg-template-tm4 .tm4-shell{
    width:90% !important;
  }

  body.mtg-template-tm4 .tm4-actions{
    gap:12px !important;
  }

  body.mtg-template-tm4 .tm4-btn,
  body.mtg-template-tm4 .tm4-actions a{
    width:100% !important;
  }

  body.mtg-template-tm4 .tm4-mini-benefits{
    grid-template-columns:1fr !important;
  }
}

/* ==========================================================
   TM4 FIX FINAL CATEGORIAS LIMPIAS
   La imagen ya trae el texto. No duplicar títulos ni hacer zoom feo.
   ========================================================== */

/* Grid de categorías */
body.mtg-template-tm4 .tm4-categories-grid,
body.mtg-template-tm4 .tm4-category-grid{
  gap:28px !important;
  align-items:stretch !important;
}

/* Card limpia, sin caja blanca interna ni overlay */
body.mtg-template-tm4 .tm4-category-card{
  position:relative !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  border-radius:20px !important;
  overflow:hidden !important;
  box-shadow:0 16px 34px rgba(15,23,42,.08) !important;
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:auto !important;
}

/* Quitar overlays creados por los parches anteriores */
body.mtg-template-tm4 .tm4-category-card::before,
body.mtg-template-tm4 .tm4-category-card::after{
  display:none !important;
  content:none !important;
}

/* La imagen es la card completa, sin zoom artificial */
body.mtg-template-tm4 .tm4-category-img,
body.mtg-template-tm4 .tm4-category-thumb,
body.mtg-template-tm4 .tm4-category-media{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:20px !important;
  overflow:hidden !important;
  background:transparent !important;
}

body.mtg-template-tm4 .tm4-category-img img,
body.mtg-template-tm4 .tm4-category-thumb img,
body.mtg-template-tm4 .tm4-category-media img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1.05 / 1 !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  border-radius:20px !important;
}

/* Ocultar textos externos porque la imagen ya tiene Likes/Seguidores/Views/Paquetes */
body.mtg-template-tm4 .tm4-category-card h3,
body.mtg-template-tm4 .tm4-category-card .tm4-category-title,
body.mtg-template-tm4 .tm4-category-card .tm4-category-body,
body.mtg-template-tm4 .tm4-category-card .tm4-category-content,
body.mtg-template-tm4 .tm4-category-card .tm4-category-inner,
body.mtg-template-tm4 .tm4-category-card p,
body.mtg-template-tm4 .tm4-category-card small,
body.mtg-template-tm4 .tm4-category-card .tm4-category-desc,
body.mtg-template-tm4 .tm4-category-card .tm4-category-text{
  display:none !important;
}

/* Link ocupa todo, si existe */
body.mtg-template-tm4 .tm4-category-card > a,
body.mtg-template-tm4 .tm4-category-card .tm4-category-link{
  display:block !important;
  width:100% !important;
  height:auto !important;
  text-decoration:none !important;
}

/* Hover suave, sin deformar */
body.mtg-template-tm4 .tm4-category-card:hover{
  transform:translateY(-2px);
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 20px 42px rgba(15,23,42,.10) !important;
}


/* MTG TM4 RESPONSIVE 50X50 V1 - START */

/*
 * TM4 mobile:
 * - Categorías 50/50
 * - Mini beneficios del hero 50/50
 * - Beneficios oscuros 50/50
 * - Plataformas/redes favoritas 50/50
 * - Productos mantienen 50/50
 */
@media (max-width: 780px){

    body.mtg-template-tm4 .tm4-shell{
        width:92% !important;
        max-width:430px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    body.mtg-template-tm4 .tm4-section{
        padding:40px 0 !important;
    }

    body.mtg-template-tm4 .tm4-hero{
        padding:26px 0 34px !important;
    }

    body.mtg-template-tm4 .tm4-hero-grid{
        display:flex !important;
        flex-direction:column-reverse !important;
        gap:16px !important;
        width:100% !important;
        min-height:0 !important;
    }

    body.mtg-template-tm4 .tm4-hero-copy{
        width:100% !important;
        text-align:center !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
    }

    body.mtg-template-tm4 .tm4-eyebrow,
    body.mtg-template-tm4 .tm4-head span{
        margin-left:auto !important;
        margin-right:auto !important;
        font-size:10.5px !important;
        padding:7px 13px !important;
        white-space:nowrap !important;
    }

    body.mtg-template-tm4 .tm4-hero-copy h1{
        max-width:360px !important;
        margin:12px auto 10px !important;
        font-size:clamp(30px, 8.5vw, 40px) !important;
        line-height:.96 !important;
        text-align:center !important;
    }

    body.mtg-template-tm4 .tm4-hero-copy p{
        max-width:350px !important;
        margin:0 auto !important;
        font-size:14px !important;
        line-height:1.45 !important;
        text-align:center !important;
    }

    body.mtg-template-tm4 .tm4-actions{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:9px !important;
        margin:14px auto 0 !important;
    }

    body.mtg-template-tm4 .tm4-btn,
    body.mtg-template-tm4 .tm4-actions a{
        width:100% !important;
        min-height:46px !important;
        height:46px !important;
        border-radius:16px !important;
        font-size:13px !important;
        padding:0 14px !important;
    }

    body.mtg-template-tm4 .tm4-hero-visual{
        width:100% !important;
        min-height:0 !important;
        height:auto !important;
        margin:0 !important;
        padding:0 !important;
        border-radius:26px !important;
        overflow:hidden !important;
    }

    body.mtg-template-tm4 .tm4-home--has-hero-image .tm4-hero-img,
    body.mtg-template-tm4 .tm4-hero-img{
        width:100% !important;
        height:310px !important;
        max-height:310px !important;
        object-fit:cover !important;
        object-position:center center !important;
        border-radius:26px !important;
        display:block !important;
    }

    /*
     * Mini cards del hero: Entrega rápida / Sin contraseñas / Soporte activo.
     * Pediste 50/50. Si son 3 cards, quedarán 2 arriba y 1 abajo.
     */
    body.mtg-template-tm4 .tm4-mini-benefits{
        width:100% !important;
        max-width:430px !important;
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:10px !important;
        margin:16px auto 0 !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits > div{
        min-width:0 !important;
        min-height:76px !important;
        padding:12px 8px !important;
        border-radius:18px !important;
        text-align:center !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits strong{
        font-size:18px !important;
        line-height:1 !important;
        margin:0 0 4px !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits span{
        font-size:11px !important;
        line-height:1.1 !important;
        font-weight:900 !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits small{
        font-size:9px !important;
        line-height:1.15 !important;
        margin-top:3px !important;
    }

    /*
     * Categorías: Compra crecimiento digital.
     */
    body.mtg-template-tm4 .tm4-service-grid,
    body.mtg-template-tm4 .tm4-category-grid,
    body.mtg-template-tm4 .tm4-categories-grid{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px !important;
        width:100% !important;
        max-width:430px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    body.mtg-template-tm4 .tm4-category-card,
    body.mtg-template-tm4 .tm4-service-grid article{
        width:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        padding:10px !important;
        border-radius:20px !important;
        text-align:center !important;
        overflow:hidden !important;
    }

    body.mtg-template-tm4 .tm4-category-img,
    body.mtg-template-tm4 .tm4-category-thumb,
    body.mtg-template-tm4 .tm4-category-media{
        width:100% !important;
        height:112px !important;
        max-height:112px !important;
        min-height:112px !important;
        border-radius:16px !important;
        margin:0 auto 8px !important;
        overflow:hidden !important;
    }

    body.mtg-template-tm4 .tm4-category-img img,
    body.mtg-template-tm4 .tm4-category-thumb img,
    body.mtg-template-tm4 .tm4-category-media img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center !important;
        display:block !important;
    }

    body.mtg-template-tm4 .tm4-category-card h3,
    body.mtg-template-tm4 .tm4-service-grid h3{
        font-size:14px !important;
        line-height:1.08 !important;
        margin:8px 0 4px !important;
        font-weight:950 !important;
        text-align:center !important;
    }

    body.mtg-template-tm4 .tm4-category-card p,
    body.mtg-template-tm4 .tm4-service-grid p{
        font-size:11px !important;
        line-height:1.24 !important;
        margin:0 !important;
        text-align:center !important;
    }

    body.mtg-template-tm4 .tm4-service-grid b,
    body.mtg-template-tm4 .tm4-platform-grid b{
        width:42px !important;
        height:42px !important;
        border-radius:15px !important;
        font-size:20px !important;
        margin:0 auto 8px !important;
    }

    /*
     * Beneficios oscuros: entrega rápida, compra segura, etc.
     */
    body.mtg-template-tm4 .tm4-benefits{
        padding:26px 0 !important;
    }

    body.mtg-template-tm4 .tm4-benefits-grid{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:10px !important;
        width:92% !important;
        max-width:430px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding:12px !important;
        border-radius:26px !important;
    }

    body.mtg-template-tm4 .tm4-benefits-grid article{
        min-width:0 !important;
        min-height:118px !important;
        padding:14px 9px !important;
        border-radius:20px !important;
        text-align:center !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
    }

    body.mtg-template-tm4 .tm4-benefits-grid b{
        font-size:18px !important;
        line-height:1 !important;
        margin:0 0 7px !important;
    }

    body.mtg-template-tm4 .tm4-benefits-grid h3{
        font-size:13px !important;
        line-height:1.08 !important;
        margin:0 0 5px !important;
        font-weight:950 !important;
    }

    body.mtg-template-tm4 .tm4-benefits-grid p{
        font-size:10px !important;
        line-height:1.25 !important;
        margin:0 !important;
    }

    /*
     * Impulso para tus redes favoritas.
     */
    body.mtg-template-tm4 .tm4-platform-grid{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px !important;
        width:100% !important;
        max-width:430px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    body.mtg-template-tm4 .tm4-platform-grid article{
        min-width:0 !important;
        min-height:112px !important;
        padding:14px 8px !important;
        border-radius:20px !important;
        text-align:center !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
    }

    body.mtg-template-tm4 .tm4-platform-grid strong{
        font-size:14px !important;
        line-height:1.08 !important;
        font-weight:950 !important;
    }

    /*
     * Productos, por si alguna capa los manda a 1 columna.
     */
    body.mtg-template-tm4 .tm4-product-grid{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px !important;
        width:100% !important;
        max-width:430px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    body.mtg-template-tm4 .tm4-product-media{
        height:145px !important;
    }

    body.mtg-template-tm4 .tm4-product-body{
        padding:10px !important;
    }

    body.mtg-template-tm4 .tm4-product-body h3{
        min-height:34px !important;
        font-size:13px !important;
        line-height:1.16 !important;
    }

    body.mtg-template-tm4 .tm4-product-bottom strong{
        font-size:12px !important;
    }

    body.mtg-template-tm4 .tm4-cart{
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        border-radius:11px !important;
    }
}

@media (max-width: 390px){

    body.mtg-template-tm4 .tm4-shell{
        width:94% !important;
    }

    body.mtg-template-tm4 .tm4-home--has-hero-image .tm4-hero-img,
    body.mtg-template-tm4 .tm4-hero-img{
        height:286px !important;
        max-height:286px !important;
        border-radius:23px !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits,
    body.mtg-template-tm4 .tm4-service-grid,
    body.mtg-template-tm4 .tm4-category-grid,
    body.mtg-template-tm4 .tm4-categories-grid,
    body.mtg-template-tm4 .tm4-benefits-grid,
    body.mtg-template-tm4 .tm4-platform-grid,
    body.mtg-template-tm4 .tm4-product-grid{
        gap:10px !important;
    }

    body.mtg-template-tm4 .tm4-category-card,
    body.mtg-template-tm4 .tm4-service-grid article{
        padding:9px !important;
        border-radius:18px !important;
    }

    body.mtg-template-tm4 .tm4-category-img,
    body.mtg-template-tm4 .tm4-category-thumb,
    body.mtg-template-tm4 .tm4-category-media{
        height:100px !important;
        min-height:100px !important;
        max-height:100px !important;
        border-radius:14px !important;
    }

    body.mtg-template-tm4 .tm4-benefits-grid article{
        min-height:108px !important;
        padding:12px 7px !important;
    }

    body.mtg-template-tm4 .tm4-platform-grid article{
        min-height:104px !important;
    }

    body.mtg-template-tm4 .tm4-product-media{
        height:132px !important;
    }
}

/* MTG TM4 RESPONSIVE 50X50 V1 - END */


/* MTG TM4 HERO CARD POLISH V1 - START */

/*
 * TM4 mobile:
 * Afinar el giro para que se vea contenido en un card premium,
 * similar a TM3: imagen arriba, copy abajo, botones y 3 mini-beneficios.
 */
@media (max-width: 780px){

    body.mtg-template-tm4 .tm4-hero{
        width:92% !important;
        max-width:430px !important;
        margin:18px auto 22px !important;
        padding:0 !important;
        border-radius:30px !important;
        background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 56%,#eaf5ff 100%) !important;
        border:1px solid rgba(37,99,235,.12) !important;
        box-shadow:0 18px 44px rgba(37,99,235,.10) !important;
        overflow:hidden !important;
    }

    body.mtg-template-tm4 .tm4-hero .tm4-shell{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
        padding:12px !important;
    }

    body.mtg-template-tm4 .tm4-hero-grid{
        width:100% !important;
        max-width:100% !important;
        display:flex !important;
        flex-direction:column-reverse !important;
        gap:14px !important;
        min-height:0 !important;
        padding:0 !important;
        border-radius:26px !important;
        background:transparent !important;
        box-shadow:none !important;
    }

    body.mtg-template-tm4 .tm4-hero-visual{
        width:100% !important;
        min-height:0 !important;
        height:auto !important;
        margin:0 !important;
        padding:0 !important;
        border-radius:24px !important;
        overflow:hidden !important;
        background:#ffffff !important;
        box-shadow:none !important;
    }

    body.mtg-template-tm4 .tm4-home--has-hero-image .tm4-hero-img,
    body.mtg-template-tm4 .tm4-hero-img{
        width:100% !important;
        height:310px !important;
        max-height:310px !important;
        min-height:0 !important;
        object-fit:cover !important;
        object-position:center center !important;
        display:block !important;
        border-radius:24px !important;
        box-shadow:none !important;
    }

    body.mtg-template-tm4 .tm4-hero-copy{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 4px 4px !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        text-align:center !important;
    }

    body.mtg-template-tm4 .tm4-hero-copy .tm4-eyebrow,
    body.mtg-template-tm4 .tm4-eyebrow{
        margin:0 auto 10px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:auto !important;
        max-width:92% !important;
        min-height:30px !important;
        padding:7px 16px !important;
        border-radius:999px !important;
        font-size:11px !important;
        line-height:1 !important;
        letter-spacing:.08em !important;
        font-weight:950 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        background:rgba(37,99,235,.10) !important;
        color:#2563eb !important;
    }

    body.mtg-template-tm4 .tm4-hero-copy h1{
        margin:0 auto 10px !important;
        max-width:350px !important;
        font-size:clamp(30px, 8.5vw, 40px) !important;
        line-height:.96 !important;
        letter-spacing:-.045em !important;
        text-align:center !important;
    }

    body.mtg-template-tm4 .tm4-hero-copy p{
        margin:0 auto 14px !important;
        max-width:340px !important;
        font-size:14px !important;
        line-height:1.45 !important;
        text-align:center !important;
        color:#64748b !important;
    }

    body.mtg-template-tm4 .tm4-actions{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:9px !important;
        margin:0 auto 12px !important;
        padding:0 !important;
    }

    body.mtg-template-tm4 .tm4-btn,
    body.mtg-template-tm4 .tm4-actions a{
        width:100% !important;
        min-height:46px !important;
        height:46px !important;
        border-radius:16px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        font-size:13px !important;
        font-weight:950 !important;
        padding:0 14px !important;
        white-space:nowrap !important;
    }

    /*
     * Los 3 mini-beneficios deben entrar en una sola fila:
     * Entrega rápida / Sin contraseñas / Soporte activo
     */
    body.mtg-template-tm4 .tm4-mini-benefits{
        width:100% !important;
        max-width:100% !important;
        display:grid !important;
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
        gap:7px !important;
        margin:0 !important;
        padding:0 !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits > div{
        min-width:0 !important;
        min-height:60px !important;
        padding:8px 5px !important;
        border-radius:15px !important;
        text-align:center !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        background:rgba(255,255,255,.82) !important;
        border:1px solid rgba(148,163,184,.20) !important;
        box-shadow:none !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits strong{
        display:block !important;
        font-size:16px !important;
        line-height:1 !important;
        margin:0 0 3px !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits span{
        display:block !important;
        font-size:9.5px !important;
        line-height:1.05 !important;
        font-weight:950 !important;
        margin:0 !important;
        color:#0f172a !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits small{
        display:block !important;
        font-size:8px !important;
        line-height:1.12 !important;
        font-weight:800 !important;
        margin-top:3px !important;
        color:#64748b !important;
    }
}

@media (max-width: 390px){

    body.mtg-template-tm4 .tm4-hero{
        width:94% !important;
        border-radius:26px !important;
    }

    body.mtg-template-tm4 .tm4-hero .tm4-shell{
        padding:10px !important;
    }

    body.mtg-template-tm4 .tm4-home--has-hero-image .tm4-hero-img,
    body.mtg-template-tm4 .tm4-hero-img{
        height:288px !important;
        max-height:288px !important;
        border-radius:22px !important;
    }

    body.mtg-template-tm4 .tm4-hero-copy h1{
        font-size:clamp(27px, 8vw, 34px) !important;
    }

    body.mtg-template-tm4 .tm4-hero-copy p{
        font-size:13px !important;
    }

    body.mtg-template-tm4 .tm4-btn,
    body.mtg-template-tm4 .tm4-actions a{
        min-height:43px !important;
        height:43px !important;
        font-size:12px !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits{
        gap:6px !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits > div{
        min-height:56px !important;
        padding:7px 4px !important;
        border-radius:14px !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits strong{
        font-size:14px !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits span{
        font-size:8.8px !important;
    }

    body.mtg-template-tm4 .tm4-mini-benefits small{
        font-size:7.5px !important;
    }
}

/* MTG TM4 HERO CARD POLISH V1 - END */