/* ============================================================
   MAXX247 — Rediseño 2026 (v2: brand-forward, alto impacto)
   Paleta: blanco, negro, rojo maxx247 (#D51515) como color dominante
   Tipografía: Lato (display) · Montserrat (cuerpo) · IBM Plex Mono (datos)
   ============================================================ */

:root{
  --paper:      #ffffff;
  --paper-soft: #f6f3ef;
  --ink:        #120e0c;
  --ink-2:      #1c1613;
  --text:       #18130f;
  --text-dim:   #6b6259;
  --rojo:       #d51515;
  --rojo-bright:#ff4433;
  --rojo-deep:  #8c0e0e;
  --rojo-glow:  rgba(213,21,21,.45);
  --line:       rgba(18,14,12,.09);
  --line-strong:rgba(18,14,12,.16);
  --on-dark-dim:rgba(247,244,240,.62);

  --f-display: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:    'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --container: 1180px;
  --radius: 4px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- base ---------- */
.mx *{ box-sizing: border-box; }
.mx{
  font-family: var(--f-body);
  color: var(--text-dim);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
.mx a{ text-decoration:none; }
.mx img{ max-width:100%; display:block; }
.mx :focus-visible{ outline: 2px solid var(--rojo); outline-offset: 3px; }

.mx-container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }

.mx-eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rojo); font-weight:600;
}
.mx-eyebrow::before{
  content:''; width:8px; height:8px; border-radius:50%;
  background: var(--rojo); box-shadow: 0 0 12px var(--rojo-glow);
  animation: mx-blink 1.8s ease-in-out infinite;
}
@keyframes mx-blink{ 0%,100%{opacity:1} 50%{opacity:.3} }

.mx-h2{
  font-family: var(--f-display); font-weight: 900; color: var(--text);
  font-size: clamp(30px, 4vw, 48px); line-height: 1.04; letter-spacing: -.015em;
  margin: 14px 0 0;
}
.mx-lead{ font-size: 16.5px; line-height: 1.7; color: var(--text-dim); max-width: 46em; margin: 16px 0 0; }

.mx-section{ position: relative; padding: 120px 0; background: var(--paper); overflow:hidden; }
.mx-section--alt{ background: var(--paper-soft); }
.mx-section--dark{ background: var(--ink); }
.mx-section--dark .mx-lead{ color: var(--on-dark-dim); }
.mx-section-header{ margin-bottom: 58px; }
.mx-section-header.mx-center{ text-align:center; }
.mx-section-header.mx-center .mx-lead{ margin-left:auto; margin-right:auto; }

.mx-grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events:none;
}

.mx-reg{ position:absolute; width:22px; height:22px; pointer-events:none; opacity:.5; }
.mx-reg::before,.mx-reg::after{ content:''; position:absolute; background:var(--text-dim); }
.mx-reg::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.mx-reg::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
.mx-reg--tl{ top:24px; left:24px; } .mx-reg--tr{ top:24px; right:24px; }
.mx-reg--bl{ bottom:24px; left:24px; } .mx-reg--br{ bottom:24px; right:24px; }
.mx-coords{ position:absolute; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color: var(--text-dim); opacity:.6; }

.mx-reveal{ opacity:0; transform: translateY(30px) scale(.98); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.mx-reveal.mx-in{ opacity:1; transform:none; }
.mx-stagger-item{ transition-delay: calc(var(--i,0) * 90ms); }

/* animated gradient blobs */
.mx-blob{
  position:absolute; border-radius:50%; filter: blur(70px); pointer-events:none;
  opacity:.55; will-change: transform;
}
.mx-blob--a{ width:560px; height:560px; top:-160px; right:-120px; background: radial-gradient(circle, var(--rojo-bright), var(--rojo) 60%, transparent 72%); animation: mx-float-a 16s ease-in-out infinite; }
.mx-blob--b{ width:420px; height:420px; bottom:-140px; left:-100px; background: radial-gradient(circle, #ffb199, var(--rojo-deep) 60%, transparent 72%); opacity:.35; animation: mx-float-b 20s ease-in-out infinite; }
@keyframes mx-float-a{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-40px,50px) scale(1.12); } }
@keyframes mx-float-b{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(50px,-30px) scale(1.08); } }

/* ============================================================
   NAV
   ============================================================ */
.mx-nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 20px 0;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line);
  transition: padding .35s var(--ease), box-shadow .35s var(--ease);
}
.mx-nav.mx-scrolled{ padding: 12px 0; box-shadow: 0 8px 30px -18px rgba(18,14,12,.35); }
.mx-nav-row{ display:flex; align-items:center; justify-content:space-between; }
.mx-logo{ font-family: var(--f-display); font-weight:900; font-size:23px; letter-spacing:-.02em; color: var(--text); }
.mx-logo b{ color: var(--rojo); }
.mx-logo i{ color: var(--text); font-style:normal; opacity:.55; }

.mx-menu{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
.mx-menu a{
  font-family: var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--text-dim); position:relative; padding-bottom:4px;
}
.mx-menu a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background: var(--rojo); transform: scaleX(0); transform-origin:right;
  transition: transform .35s var(--ease);
}
.mx-menu a:hover{ color: var(--text); }
.mx-menu a:hover::after{ transform: scaleX(1); transform-origin:left; }
.mx-menu a.mx-cta{
  font-family: var(--f-body); font-weight:800; text-transform:none; letter-spacing:0; color: #fff;
  background: linear-gradient(135deg, var(--rojo-bright), var(--rojo)); padding:10px 20px; border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mx-menu a.mx-cta::after{ display:none; }
.mx-menu a.mx-cta:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px -8px var(--rojo-glow); }

/* login group — dos accesos, un solo control visual */
.mx-login-group{ display:flex; align-items:stretch; box-shadow: 0 10px 24px -10px rgba(18,14,12,.28); border-radius: var(--radius); }
.mx-login-group .mx-cta{ border-radius:0; box-shadow:none !important; }
.mx-login-group .mx-cta:first-child{ border-radius: var(--radius) 0 0 var(--radius); }
.mx-login-group .mx-cta:first-child:hover{ transform:none; }
.mx-menu a.mx-cta.mx-cta-v2{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--ink); color:#fff;
  border-left: 1px solid rgba(255,255,255,.2);
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: background .25s ease;
}
.mx-menu a.mx-cta.mx-cta-v2:hover{ background: var(--ink-2); }
.mx-cta-v2-dot{
  width:7px; height:7px; border-radius:50%; background: var(--rojo-bright);
  box-shadow: 0 0 8px var(--rojo-glow); animation: mx-blink 1.8s ease-in-out infinite;
}

.mx-burger{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.mx-hero{
  position: relative; min-height: 100svh; display:flex; align-items:center;
  overflow:hidden; background: var(--paper);
}
.mx-hero-word{
  position:absolute; right:-3%; top:50%; transform:translateY(-50%);
  font-family: var(--f-display); font-weight:900; font-size: clamp(220px, 34vw, 620px);
  line-height:1; letter-spacing:-.04em; color: transparent;
  background: linear-gradient(155deg, var(--rojo-bright) 10%, var(--rojo) 55%, var(--rojo-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  opacity:.14; pointer-events:none; user-select:none; white-space:nowrap;
  animation: mx-word-pulse 9s ease-in-out infinite;
}
@keyframes mx-word-pulse{ 0%,100%{ opacity:.14; } 50%{ opacity:.22; } }
.mx-hero-content{ position:relative; z-index:2; padding-top: 90px; }
.mx-hero h1{
  font-family: var(--f-display); font-weight:900; color: var(--text);
  font-size: clamp(40px, 6.6vw, 88px); line-height: .98; letter-spacing:-.02em;
  margin: 18px 0 0; max-width: 16ch;
}
.mx-hero h1 em{
  font-style:normal; color: transparent; background: linear-gradient(135deg, var(--rojo-bright), var(--rojo));
  -webkit-background-clip:text; background-clip:text;
}
.mx-hero-sub{ font-family: var(--f-body); font-weight:500; color: var(--text-dim); font-size: clamp(15.5px,1.6vw,19px); max-width: 42ch; margin: 22px 0 0; line-height:1.6; }
.mx-hero-actions{ display:flex; align-items:center; gap:22px; margin-top:42px; flex-wrap:wrap; }

.mx-btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px;
  font-family: var(--f-body); font-weight:800; font-size:14.5px; letter-spacing:.01em; color:#fff;
  background: linear-gradient(135deg, var(--rojo-bright), var(--rojo));
  padding: 17px 32px; border-radius: var(--radius); border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
}
.mx-btn::before{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.mx-btn:hover{ box-shadow: 0 16px 34px -10px var(--rojo-glow); }
.mx-btn:hover::before{ left:130%; }
.mx-btn--ghost{ background: transparent; color: var(--text); border-color: var(--line-strong); }
.mx-btn--ghost:hover{ border-color: var(--rojo); color: var(--rojo); box-shadow:none; }

/* ---------- 3D panel carousel (perspective real, no libs) ---------- */
.mx-3d-stack{
  position:absolute; right:6%; top:54%;
  transform: translateY(-50%) rotateX(var(--sy,0deg)) rotateY(var(--sx,0deg));
  transition: transform .3s var(--ease);
  width:320px; height:320px; perspective: 1500px; z-index:1; pointer-events:none;
}
.mx-3d-stack-inner{
  position:relative; width:100%; height:100%; transform-style: preserve-3d;
  animation: mx-3d-spin 24s linear infinite;
  will-change: transform;
}
@keyframes mx-3d-spin{
  from{ transform: rotateY(0deg) rotateX(10deg); }
  to{ transform: rotateY(360deg) rotateX(10deg); }
}
.mx-3d-panel{
  position:absolute; inset:0; margin:auto; width:216px; height:136px;
  border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background: linear-gradient(150deg, rgba(255,255,255,.82), rgba(255,255,255,.42));
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 24px 50px -18px rgba(18,14,12,.4);
  font-family: var(--f-display); font-weight:800; font-size:13px; letter-spacing:.05em; color: var(--text);
  backface-visibility: hidden;
}
.mx-3d-panel i{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:17px;
  background: linear-gradient(135deg, var(--rojo-bright), var(--rojo));
  box-shadow: 0 10px 22px -8px var(--rojo-glow);
}
.mx-3d-panel--1{ transform: rotateY(0deg)   translateZ(150px); }
.mx-3d-panel--2{ transform: rotateY(120deg) translateZ(150px); }
.mx-3d-panel--3{ transform: rotateY(240deg) translateZ(150px); }

.mx-scroll-cue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  font-family: var(--f-mono); font-size:10px; letter-spacing:.2em; color: var(--text-dim);
  display:flex; flex-direction:column; align-items:center; gap:10px; opacity:.7; z-index:2;
}
.mx-scroll-cue span{ width:1px; height:34px; background: linear-gradient(var(--rojo), transparent); animation: mx-scrolldown 1.8s var(--ease) infinite; }
@keyframes mx-scrolldown{ 0%{ transform: scaleY(0); transform-origin:top; opacity:0;} 40%{transform:scaleY(1); transform-origin:top; opacity:1;} 60%{transform:scaleY(1); transform-origin:bottom; opacity:1;} 100%{transform:scaleY(0); transform-origin:bottom; opacity:0;} }

/* ============================================================
   MARQUEE — franja de impacto
   ============================================================ */
.mx-marquee{ background: var(--ink); overflow:hidden; padding: 18px 0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }
.mx-marquee-track{ display:flex; width:max-content; animation: mx-marquee 26s linear infinite; }
.mx-marquee:hover .mx-marquee-track{ animation-play-state: paused; }
.mx-marquee-track span{
  font-family: var(--f-display); font-weight:900; font-size:22px; letter-spacing:-.01em;
  color: var(--paper); padding: 0 28px; white-space:nowrap;
}
.mx-marquee-track span.mx-dot{ color: var(--rojo); font-family: var(--f-body); padding:0 6px; }
@keyframes mx-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ============================================================
   ABOUT / NOSOTROS
   ============================================================ */
.mx-about-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:64px; align-items:center; }
.mx-checklist{ list-style:none; margin: 30px 0 0; padding:0; display:flex; flex-direction:column; gap:22px; }
.mx-checklist li{ display:flex; gap:16px; align-items:flex-start; }
.mx-tag-ok{
  flex:none; font-family: var(--f-mono); font-size:10px; letter-spacing:.05em; font-weight:700;
  color:#fff; background: var(--rojo); border-radius: var(--radius); padding: 3px 7px; margin-top:2px;
}
.mx-checklist h4{ font-family: var(--f-display); font-weight:800; color: var(--text); font-size:17px; margin:0 0 6px; }
.mx-checklist p{ margin:0; font-size:14.5px; line-height:1.65; }

.mx-frame{ position:relative; padding: 18px; background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.mx-frame::before,.mx-frame::after,
.mx-frame > .mx-frame-inner::before, .mx-frame > .mx-frame-inner::after{
  content:''; position:absolute; width:28px; height:28px; border: 3px solid var(--rojo);
  transition: width .35s var(--ease), height .35s var(--ease);
}
.mx-frame::before{ top:-3px; left:-3px; border-right:none; border-bottom:none; }
.mx-frame::after{ top:-3px; right:-3px; border-left:none; border-bottom:none; }
.mx-frame-inner{ position:relative; overflow:hidden; border-radius: 2px; box-shadow: 0 30px 60px -30px rgba(18,14,12,.35); }
.mx-frame-inner::before{ bottom:-3px; left:-3px; border-right:none; border-top:none; }
.mx-frame-inner::after{ bottom:-3px; right:-3px; border-left:none; border-top:none; }
.mx-frame:hover::before,.mx-frame:hover::after,
.mx-frame:hover .mx-frame-inner::before,.mx-frame:hover .mx-frame-inner::after{ width:42px; height:42px; }
.mx-frame img{ transition: transform .6s var(--ease); }
.mx-frame:hover img{ transform: scale(1.06); }

.mx-media-block{ margin-top: 64px; }
.mx-media-block video{ width:100%; border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(18,14,12,.35); }
.mx-media-cta{ text-align:center; margin-top:26px; }

/* ---------- clientes / curadurías ---------- */
.mx-clients{ margin-top: 84px; text-align:center; }
.mx-clients-label{
  font-family: var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--text-dim); margin: 0 0 30px;
}
.mx-clients-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.mx-client-logo{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 18px 16px; height:96px; display:flex; align-items:center; justify-content:center;
  transition: box-shadow .3s ease, transform .3s var(--ease), border-color .3s ease;
}
.mx-client-logo:hover{ box-shadow: 0 20px 40px -22px rgba(18,14,12,.28); transform: translateY(-4px); border-color: var(--line-strong); }
.mx-client-logo img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; }

/* ============================================================
   SERVICIOS / MÓDULOS — tilt 3D
   ============================================================ */
.mx-modules-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.mx-module{
  position:relative; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 30px 24px 26px; transition: box-shadow .35s ease, border-color .3s ease;
  transform: perspective(800px) rotateX(var(--ry,0)) rotateY(var(--rx,0)); transform-style: preserve-3d;
  will-change: transform;
}
.mx-module:hover{ border-color: var(--line-strong); box-shadow: 0 26px 50px -24px rgba(18,14,12,.28); }
.mx-mod-code{
  display:inline-block; font-family: var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.08em;
  color:#fff; background: linear-gradient(135deg, var(--rojo-bright), var(--rojo)); padding:3px 8px; border-radius: var(--radius);
}
.mx-module figure{ margin: 18px 0 20px; overflow:hidden; border-radius: 3px; }
.mx-module img{ width:100%; height:150px; object-fit:cover; transition: transform .5s var(--ease); }
.mx-module:hover img{ transform: scale(1.08); }
.mx-module h4{ font-family: var(--f-display); font-weight:800; color: var(--text); font-size:16.5px; margin: 0 0 6px; }
.mx-module span{ font-family: var(--f-mono); font-size:11px; letter-spacing:.08em; color: var(--rojo); text-transform:uppercase; font-weight:600; }

/* ============================================================
   NUEVA PLATAFORMA V2 — teaser de acceso anticipado
   ============================================================ */
.mx-v2-panel{
  position:relative; overflow:hidden; border-radius: 8px; background: var(--ink);
  padding: 64px; box-shadow: 0 40px 80px -40px rgba(18,14,12,.5);
}
.mx-v2-grid{ position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center; }
.mx-v2-badge{
  display:inline-flex; align-items:center; gap:.6em; font-family: var(--f-mono); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background: linear-gradient(135deg, var(--rojo-bright), var(--rojo)); padding:7px 14px; border-radius: 999px;
  margin-bottom:18px;
}
.mx-v2-copy .mx-btn{ margin-top:32px; }

.mx-v2-mock{
  border-radius:12px; overflow:hidden; background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px -30px rgba(0,0,0,.6);
  transform: perspective(1200px) rotateY(-8deg) rotateX(4deg);
  transition: transform .4s var(--ease);
}
.mx-v2-mock:hover{ transform: perspective(1200px) rotateY(-3deg) rotateX(2deg); }
.mx-v2-mock-bar{ display:flex; align-items:center; gap:7px; padding:14px 16px; background: rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.1); }
.mx-v2-mock-bar span{ width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.22); }
.mx-v2-mock-bar span:first-child{ background: var(--rojo); }
.mx-v2-mock-url{
  margin-left:10px; font-family: var(--f-mono); font-size:11px; color: var(--on-dark-dim);
  background: rgba(255,255,255,.06); border-radius:6px; padding:4px 12px;
}
.mx-v2-mock-body{ display:grid; grid-template-columns: 76px 1fr; gap:16px; padding:22px; }
.mx-v2-mock-side{ display:flex; flex-direction:column; gap:12px; }
.mx-v2-mock-chip{ width:32px; height:32px; border-radius:8px; background: linear-gradient(135deg, var(--rojo-bright), var(--rojo)); margin-bottom:6px; }
.mx-v2-mock-line{ height:8px; width:85%; border-radius:4px; background: rgba(255,255,255,.14); }
.mx-v2-mock-main{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.mx-v2-mock-card{ height:70px; border-radius:8px; background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.1); position:relative; overflow:hidden; }
.mx-v2-mock-card::after{
  content:''; position:absolute; inset:0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.14) 50%, transparent 80%);
  background-size:200% 100%; animation: mx-shimmer 3.2s ease-in-out infinite;
}
.mx-v2-mock-card--wide{ grid-column: 1 / -1; height:56px; }
@keyframes mx-shimmer{ 0%{ background-position: 160% 0; } 100%{ background-position: -60% 0; } }

/* ============================================================
   PLANES / PRECIOS (loop PHP en vivo) — sección de impacto
   ============================================================ */
.mx-plans-panel{
  position:relative; border-radius: 6px; background: var(--ink); padding: 50px;
  box-shadow: 0 40px 80px -40px rgba(18,14,12,.5); overflow:hidden;
}
.mx-plans-head{ position:relative; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:32px; }
.mx-plans-head h3{ font-family: var(--f-display); font-weight:900; color:#fff; font-size:22px; margin:6px 0 0; }
.mx-plans-grid{ position:relative; display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; }
.mx-plan-card{
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius: var(--radius);
  padding: 22px 20px; position:relative; transition: background .3s ease, transform .3s var(--ease), border-color .3s ease;
}
.mx-plan-card:hover{ background: rgba(255,255,255,.08); transform: translateY(-4px); border-color: var(--rojo); }
.mx-plan-card .mx-plan-check{ color: var(--rojo-bright); font-size:13px; margin-right:6px; }
.mx-plan-card h5{ font-family: var(--f-display); font-weight:700; color:#fff; font-size:14.5px; margin: 0 0 8px; letter-spacing:.01em; }
.mx-plan-card p{ font-size:13px; line-height:1.6; margin:0; color: var(--on-dark-dim); }
.mx-plans-foot{ position:relative; text-align:center; margin-top: 36px; }
.mx-plans-foot .mx-lead{ color: var(--on-dark-dim) !important; }

/* ============================================================
   POR QUÉ ESCOGERNOS
   ============================================================ */
.mx-why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:34px; }
.mx-why-card{
  padding: 32px 28px; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  transition: box-shadow .3s ease, transform .3s var(--ease);
  transform: perspective(800px) rotateX(var(--ry,0)) rotateY(var(--rx,0)); transform-style:preserve-3d; will-change:transform;
}
.mx-why-card:hover{ box-shadow: 0 26px 50px -26px rgba(18,14,12,.28); }
.mx-why-icon{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:19px; margin-bottom:22px;
  background: linear-gradient(135deg, var(--rojo-bright), var(--rojo));
  box-shadow: 0 12px 26px -10px var(--rojo-glow);
}
.mx-why-grid h4{ font-family: var(--f-display); font-weight:800; color: var(--text); font-size:17.5px; margin:0 0 10px; }
.mx-why-grid p{ font-size:14px; line-height:1.65; margin:0; }

/* ============================================================
   PREGUNTAS FRECUENTES
   ============================================================ */
.mx-faq{ max-width: 820px; margin: 0 auto; display:flex; flex-direction:column; gap:14px; }
.mx-faq-item{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 6px 26px; transition: border-color .25s ease, box-shadow .25s ease;
}
.mx-faq-item[open]{ border-color: var(--line-strong); box-shadow: 0 20px 40px -26px rgba(18,14,12,.25); }
.mx-faq-item summary{
  list-style:none; cursor:pointer; padding: 20px 32px 20px 0; position:relative;
  font-family: var(--f-display); font-weight:800; font-size:16.5px; color: var(--text);
}
.mx-faq-item summary::-webkit-details-marker{ display:none; }
.mx-faq-item summary::after{
  content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:400; color: var(--rojo); border:1px solid var(--line-strong);
  transition: transform .3s var(--ease), background .3s ease, color .3s ease;
}
.mx-faq-item[open] summary::after{ content:'−'; background: var(--rojo); color:#fff; border-color: var(--rojo); }
.mx-faq-item p{ margin:0; padding: 0 0 22px; font-size:14.5px; line-height:1.7; color: var(--text-dim); }

/* ============================================================
   CONTACTO
   ============================================================ */
.mx-contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 10px; }
.mx-contact-col{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 40px; box-shadow: 0 26px 50px -30px rgba(18,14,12,.2); }
.mx-actions-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mx-action-btn{
  display:flex; align-items:center; gap:12px; width:100%;
  font-family: var(--f-body); font-weight:700; font-size:13.5px; color: var(--text);
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px; cursor:pointer; text-align:left;
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.mx-action-btn i{ color: var(--rojo); font-size:15px; }
.mx-action-btn:hover{ border-color: var(--rojo); background:#fff; transform: translateY(-2px); box-shadow: 0 14px 26px -14px var(--rojo-glow); }

.mx-coord-readout{ font-family: var(--f-mono); font-size:12px; color: var(--text-dim); border-top: 1px dashed var(--line-strong); margin-top:26px; padding-top:18px; line-height:2; }
.mx-coord-readout b{ color: var(--text); }

.mx-map-frame #map{ height: 320px; width:100%; border-radius: 3px; }

/* modal (bootstrap) restyle */
.mx .modal-content{ background: #fff; border:1px solid var(--line-strong); border-radius: var(--radius); color: var(--text-dim); }
.mx .modal-header{ border-bottom: 1px solid var(--line); }
.mx .modal-header h3{ font-family: var(--f-display); color: var(--text); font-size:18px; }
.mx .modal-header .close{ color: var(--text); opacity:.7; }
.mx .modal-body .input{
  width:100%; background: var(--paper-soft); border:1px solid var(--line-strong); color: var(--text);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom:12px; font-family: var(--f-body); font-size:14px;
}
.mx .modal-body .input:focus{ border-color: var(--rojo); outline:none; }
.mx .modal-body button#Enviar{ background: var(--rojo); border:none; border-radius: var(--radius); }

/* ============================================================
   FOOTER
   ============================================================ */
.mx-footer{ background: var(--ink); padding: 54px 0 30px; }
.mx-footer-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 24px; }
.mx-footer-logo img{ height: 32px; width:auto; filter: brightness(0) invert(1); }
.mx-footer-legal{ font-family: var(--f-mono); font-size:11px; letter-spacing:.05em; color: var(--on-dark-dim); display:flex; gap:22px; flex-wrap:wrap; }
.mx-footer-legal a{ color: var(--on-dark-dim); }
.mx-footer-legal a:hover{ color: var(--rojo-bright); }
.mx-social{ display:flex; gap:10px; list-style:none; margin:0; padding:0; }
.mx-social a{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.16); border-radius:50%; color: var(--on-dark-dim);
  transition: border-color .25s ease, color .25s ease, transform .25s ease, background .25s ease;
}
.mx-social a:hover{ border-color: var(--rojo); color:#fff; background: var(--rojo); transform: translateY(-2px); }
.mx-footer-bottom{ text-align:center; margin-top:34px; font-size:11.5px; color: var(--on-dark-dim); opacity:.8; }
.mx-footer-bottom a{ color: var(--on-dark-dim); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .mx-about-grid{ grid-template-columns:1fr; }
  .mx-modules-grid{ grid-template-columns: repeat(2,1fr); }
  .mx-contact-grid{ grid-template-columns:1fr; }
  .mx-why-grid{ grid-template-columns:1fr; }
  .mx-clients-grid{ grid-template-columns: repeat(3, 1fr); }
  .mx-hero-word{ font-size: clamp(160px, 44vw, 420px); opacity:.1; }
  .mx-3d-stack{ display:none; }
  .mx-v2-panel{ padding:44px; }
  .mx-v2-grid{ grid-template-columns:1fr; gap:40px; }
  .mx-v2-mock{ transform:none; }
}
@media (max-width: 720px){
  .mx-menu{
    position:fixed; top:0; right:0; bottom:0; width:78%; max-width:320px;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px; padding: 0 34px; background: #fff; border-left:1px solid var(--line-strong);
    transform: translateX(100%); transition: transform .4s var(--ease);
    box-shadow: -20px 0 50px -20px rgba(18,14,12,.3);
  }
  .mx-nav.mx-open .mx-menu{ transform: translateX(0); }
  .mx-burger{ display:flex; flex-direction:column; gap:5px; width:26px; z-index:600; background:none; border:none; padding:6px; cursor:pointer; }
  .mx-burger span{ height:2px; background:var(--text); width:100%; transition: transform .3s ease, opacity .3s ease; }
  .mx-nav.mx-open .mx-burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .mx-nav.mx-open .mx-burger span:nth-child(2){ opacity:0; }
  .mx-nav.mx-open .mx-burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .mx-modules-grid{ grid-template-columns:1fr; }
  .mx-actions-grid{ grid-template-columns:1fr; }
  .mx-clients-grid{ grid-template-columns: repeat(2, 1fr); }
  .mx-contact-col{ padding: 28px 22px; }
  .mx-section{ padding: 84px 0; }
  .mx-v2-panel{ padding:30px 22px; }
  .mx-v2-mock-body{ grid-template-columns: 56px 1fr; padding:16px; }
  .mx-v2-mock-main{ grid-template-columns: 1fr; }
  .mx-hero-word{ font-size: clamp(120px, 60vw, 300px); opacity:.09; }
  .mx-blob--a, .mx-blob--b{ width:300px; height:300px; }
}