/* ============================================================================
   Megacity — Landing "Software a la medida"
   Sistema: Trust & Authority · navy #0F172A + CTA #0369A1 + acento industrial
   Tipografia: Lexend (titulos) + Source Sans 3 (texto)
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root{
  /* color */
  --mc-ink:#020617;
  --mc-navy:#0F172A;
  --mc-navy-2:#16233b;
  --mc-slate:#334155;
  --mc-muted-fg:#5B6B80;
  --mc-bg:#F8FAFC;
  --mc-card:#FFFFFF;
  --mc-muted:#EEF2F7;
  --mc-border:#E2E8F0;
  --mc-accent:#0369A1;
  --mc-accent-2:#0284C7;
  /* Hover de botones SOLIDOS. Aclarar a --mc-accent-2 dejaba el texto
     blanco en 4.10:1, por debajo del minimo de 4.5:1. Este da 7.6:1. */
  --mc-accent-hover:#075985;
  --mc-accent-soft:#E0F2FE;
  --mc-sky:#38BDF8;
  --mc-signal:#EA580C;
  --mc-ok:#059669;

  /* espaciado (density 4/10 — estandar) */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px;

  /* radios y sombras */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  --sh-1:0 1px 2px rgba(2,6,23,.06), 0 1px 3px rgba(2,6,23,.04);
  --sh-2:0 4px 12px rgba(2,6,23,.06), 0 12px 28px rgba(2,6,23,.06);
  --sh-3:0 18px 48px rgba(2,6,23,.12), 0 2px 8px rgba(2,6,23,.06);

  /* tipografia */
  --f-title:'Lexend','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-body:'Source Sans 3','Segoe UI',system-ui,-apple-system,sans-serif;

  /* layout */
  --wrap:1200px;
  --nav-h:72px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--f-body);font-size:17px;line-height:1.65;
  color:var(--mc-slate);background:var(--mc-bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block}
a{color:var(--mc-accent);text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-title);color:var(--mc-ink);margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:600}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* accesibilidad: foco siempre visible */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--mc-accent-2);outline-offset:3px;border-radius:6px;
}
.mc-skip{
  position:absolute;left:-9999px;top:0;z-index:2000;background:var(--mc-navy);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:600;
}
.mc-skip:focus{left:0}
.mc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Utilidades ───────────────────────────────────────────────────────────── */
.mc-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.mc-sec{padding-block:var(--sp-7)}
@media (max-width:768px){.mc-sec{padding-block:var(--sp-6)}}

.mc-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--f-title);
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mc-accent);margin-bottom:var(--sp-2);
}
.mc-eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px}

.mc-h2{font-size:clamp(30px,4.2vw,46px);max-width:22ch}
.mc-h2.is-wide{max-width:30ch}
.mc-lead{font-size:clamp(17px,1.6vw,20px);color:var(--mc-muted-fg);max-width:62ch;margin-top:var(--sp-2)}

.mc-sec-head{margin-bottom:var(--sp-5);max-width:760px}
.mc-sec-head.is-center{margin-inline:auto;text-align:center}
/* Centrado, la rayita NO se esconde: se pasa DEBAJO del texto. Delante de un
   título centrado descuadra la línea —el texto queda 34px a la derecha del eje
   real— y por eso estaba apagada; abajo y centrada hace de subrayado y le da
   un pie al bloque. */
.mc-sec-head.is-center .mc-eyebrow{flex-direction:column;gap:10px}
.mc-sec-head.is-center .mc-eyebrow::before{order:2;width:34px}
.mc-sec-head.is-center .mc-h2,.mc-sec-head.is-center .mc-lead{margin-inline:auto}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.mc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  font-family:var(--f-title);font-weight:600;font-size:16px;letter-spacing:-.01em;
  cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
  text-align:center;
}
.mc-btn svg{width:19px;height:19px;flex:0 0 auto}
.mc-btn--primary{background:var(--mc-accent);color:#fff;box-shadow:0 6px 18px rgba(3,105,161,.28)}
.mc-btn--primary:hover{background:var(--mc-accent-hover);transform:translateY(-2px);box-shadow:0 12px 26px rgba(3,105,161,.34)}
.mc-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.mc-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.mc-btn--dark{background:var(--mc-navy);color:#fff}
.mc-btn--dark:hover{background:var(--mc-navy-2);transform:translateY(-2px);box-shadow:var(--sh-2)}
.mc-btn--outline{background:#fff;color:var(--mc-navy);border-color:var(--mc-border)}
.mc-btn--outline:hover{border-color:var(--mc-navy);transform:translateY(-2px);box-shadow:var(--sh-2)}
.mc-btn--wide{width:100%}
.mc-btn[disabled]{opacity:.6;cursor:not-allowed;transform:none!important}

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.mc-nav{
  position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--nav-h);
  display:flex;align-items:center;
  /* Nace CLARA. Antes era transparente con el texto en blanco porque flotaba
     sobre un hero navy a sangre; con el hero claro ese texto quedaba blanco
     sobre blanco — invisible hasta que alguien hacía scroll 40px. */
  background:rgba(248,250,252,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.mc-nav.is-open,
.mc-nav.is-stuck{background:rgba(248,250,252,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--mc-border);box-shadow:0 2px 16px rgba(2,6,23,.06)}
.mc-nav__in{display:flex;align-items:center;gap:var(--sp-3);width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
/* La marca es el logo REAL, no un cuadro con degradado y el nombre escrito.
   Se fue con él la regla `.mc-nav.is-stuck .mc-brand{color}`: existía porque el
   nombre era texto y tenía que pasar de blanco a tinta sobre el hero navy. */
.mc-brand{display:flex;align-items:center;gap:11px}
.mc-brand__logo{height:36px;width:auto;display:block;flex:0 0 auto}
/* «Software» dice en qué parte de Megacity está parado el visitante: el logo
   ya no lo puede decir. La raya lo separa de la marca en vez de pegarlo. */
.mc-brand__sub{
  font-family:var(--f-body);font-weight:400;font-size:13.5px;letter-spacing:0;
  color:var(--mc-muted-fg);padding-left:11px;border-left:1px solid var(--mc-border);
  line-height:1.2;
}
.mc-foot .mc-brand__sub{color:#94A3B8;border-left-color:rgba(255,255,255,.16)}
@media (max-width:420px){.mc-brand__logo{height:31px}}
.mc-nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.mc-nav__links a{
  padding:9px 14px;border-radius:9px;font-size:15.5px;font-weight:500;color:var(--mc-slate);
  transition:background .18s var(--ease),color .18s var(--ease);
}
/* El `:not(.mc-nav__cta)` NO es adorno: sin el, `.mc-nav__links a:hover`
   (0,2,1) le gana a `.mc-nav__cta:hover` (0,2,0) y le borra el fondo azul,
   pero el texto sigue blanco por el !important de abajo — el boton
   desaparecia al pasar el raton. */
.mc-nav__links a:not(.mc-nav__cta):hover{background:var(--mc-muted);color:var(--mc-ink)}
.mc-nav.is-stuck .mc-nav__links a:not(.mc-nav__cta){color:var(--mc-slate)}
.mc-nav.is-stuck .mc-nav__links a:not(.mc-nav__cta):hover{background:var(--mc-muted);color:var(--mc-ink)}
.mc-nav__cta{
  margin-left:10px;min-height:44px;padding:10px 20px;border-radius:999px;
  background:var(--mc-accent);color:#fff!important;font-family:var(--f-title);font-weight:600;font-size:15px;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.mc-nav__cta:hover{background:var(--mc-accent-hover);transform:translateY(-1px)}
.mc-nav__burger{
  display:none;margin-left:auto;width:46px;height:46px;border:0;border-radius:12px;
  background:rgba(255,255,255,.14);color:#fff;place-items:center;
}
.mc-nav.is-open .mc-nav__burger,
.mc-nav.is-stuck .mc-nav__burger{background:var(--mc-muted);color:var(--mc-ink)}
.mc-nav__burger svg{width:24px;height:24px}
@media (max-width:1024px){
  .mc-nav__links{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--mc-card);border-bottom:1px solid var(--mc-border);padding:12px 24px 22px;
    box-shadow:var(--sh-3);transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease);
  }
  .mc-nav__links.is-open{opacity:1;transform:none;pointer-events:auto}
  .mc-nav__links a:not(.mc-nav__cta){color:var(--mc-slate)!important;padding:15px 6px;border-bottom:1px solid var(--mc-border);border-radius:0}
  .mc-nav__cta{margin:16px 0 0;text-align:center;border-bottom:0!important}
  .mc-nav__burger{display:grid}
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.mc-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(1080px 560px at 76% 14%, #E8F3FD 0%, rgba(232,243,253,0) 64%),
    linear-gradient(180deg,#fff 0%, var(--mc-bg) 100%);
}

/* La ilustración: `background-image` DENTRO de un media query, no un <img>.
   Su texto va dibujado en el archivo, así que por debajo de ~1280px deja de
   leerse; y como background en una consulta que no aplica, el navegador ni
   siquiera la descarga en celular — de donde llega casi todo el tráfico de
   campaña. Un <img> con `display:none` sí se baja igual. */
.mc-hero__art{display:none}

.mc-hero__in{
  position:relative;z-index:1;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:calc(var(--nav-h) + 56px) 24px var(--sp-5);
}
.mc-hero__copy{max-width:640px}

.mc-hero__badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px 9px 13px;border-radius:999px;
  background:var(--mc-card);border:1px solid var(--mc-border);box-shadow:var(--sh-1);
  font-size:14.5px;font-weight:500;color:var(--mc-slate);
}
.mc-hero__badge svg{width:19px;height:19px;color:var(--mc-accent);flex:0 0 auto}
.mc-hero__badge i{font-style:normal;color:var(--mc-border);margin-inline:1px}

.mc-hero h1{
  font-family:var(--f-title);font-weight:700;
  font-size:clamp(38px,5.4vw,66px);line-height:1.05;letter-spacing:-.035em;
  color:var(--mc-ink);margin-top:var(--sp-3);text-wrap:balance;
}
.mc-hero h1 em{font-style:normal;color:var(--mc-accent-2)}
.mc-hero h1 b{font-weight:700;color:var(--mc-signal)}

.mc-hero__sub{
  color:var(--mc-muted-fg);font-size:clamp(16.5px,1.5vw,19px);
  max-width:56ch;margin-top:var(--sp-3);line-height:1.65;
}
.mc-hero__sub em{font-style:normal;color:var(--mc-accent);font-weight:600}

.mc-hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--sp-4)}

/* Barra de confianza ------------------------------------------------------- */
.mc-hero__barwrap{
  position:relative;z-index:1;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 24px var(--sp-4);
}
.mc-hero__bar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--mc-card);border:1px solid var(--mc-border);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;
}
.mc-hero__bar li{
  display:flex;align-items:flex-start;gap:12px;
  padding:19px 20px;border-left:1px solid var(--mc-border);min-width:0;
}
.mc-hero__bar li:first-child{border-left:0}
.mc-hero__bar svg{width:22px;height:22px;color:var(--mc-accent);flex:0 0 auto;margin-top:1px}
.mc-hero__bar span{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  font-size:12.5px;color:var(--mc-muted-fg);line-height:1.35;
}
.mc-hero__bar b{
  font-family:var(--f-title);font-weight:600;font-size:15.5px;
  color:var(--mc-ink);line-height:1.25;letter-spacing:-.01em;
}

/* La ilustración solo donde su texto todavía se lee. */
@media (min-width:1000px){
  .mc-hero__art{
    display:block;position:absolute;z-index:0;
    top:var(--nav-h);right:0;
    width:min(56vw,920px);aspect-ratio:3/2;
    background:url("/software/assets/img/hero-software.v4.webp") center right/cover no-repeat;
    /* El borde izquierdo se disuelve en el fondo: sin esto queda un corte recto
       a media foto que delata que es una imagen pegada. Solo el 16%: más allá
       empieza a comerse la silla y la persona, que en el mockup van enteras. */
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%);
    mask-image:linear-gradient(to right,transparent 0,#000 16%);
  }
  /* El texto termina DENTRO de la zona difuminada del arte, nunca sobre la
     foto opaca: por eso el ancho se ata al viewport y no a un % del contenedor. */
  .mc-hero__copy{max-width:min(46vw,560px)}
  .mc-hero__in{padding-block:calc(var(--nav-h) + 72px) var(--sp-6)}
}

@media (max-width:900px){
  .mc-hero__bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mc-hero__bar li:nth-child(odd){border-left:0}
  .mc-hero__bar li:nth-child(n+3){border-top:1px solid var(--mc-border)}
}
@media (max-width:520px){
  .mc-hero__bar{grid-template-columns:1fr}
  .mc-hero__bar li{border-left:0}
  .mc-hero__bar li+li{border-top:1px solid var(--mc-border)}
  .mc-hero__btns .mc-btn{width:100%}
}

/* ── Sectores ─────────────────────────────────────────────────────────────── */
/* (la franja de sectores se rehizo como .mc-sect, más abajo en este archivo) */

/* ── Franja de metricas ───────────────────────────────────────────────────── */
/* ── Métricas: tarjetas de dato ───────────────────────────────────────────
   Antes eran cuatro cifras en fila separadas por líneas de 1px al 10% de
   blanco, que sobre el navy prácticamente no se veían. Ahora cada dato tiene
   su tarjeta de vidrio: la profundidad hace el trabajo que las líneas no
   podían, y el icono le da un ancla visual a cada cifra. */
.mc-stats{background:var(--mc-navy);position:relative;overflow:hidden;padding-block:var(--sp-6)}
.mc-stats::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 70% at 8% 0%,rgba(3,105,161,.34),transparent 62%),
    radial-gradient(48% 62% at 94% 100%,rgba(56,189,248,.16),transparent 66%);
}
.mc-stats__in{position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.mc-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.mc-stat{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:22px 20px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease);
}
.mc-stat:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);border-color:rgba(56,189,248,.42)}

.mc-stat__ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:rgba(56,189,248,.14);color:var(--mc-sky);margin-bottom:16px;
  transition:background .22s var(--ease),color .22s var(--ease);
}
.mc-stat__ico svg{width:22px;height:22px}
.mc-stat:hover .mc-stat__ico{background:var(--mc-sky);color:var(--mc-navy)}

.mc-stat__n{
  font-family:var(--f-title);font-size:clamp(34px,3.4vw,46px);font-weight:600;
  color:#fff;letter-spacing:-.035em;line-height:1;
}
.mc-stat__n span{color:var(--mc-sky)}
.mc-stat__l{
  font-family:var(--f-title);font-weight:600;font-size:16px;color:#fff;
  margin-top:12px;line-height:1.3;letter-spacing:-.01em;
}
/* #94A3B8 sobre el vidrio se quedaba en 3.8:1 — no alcanza para 14px. */
.mc-stat__d{font-size:14px;color:#CBD5E1;margin-top:5px;line-height:1.45}

@media (max-width:900px){
  .mc-stats__grid{grid-template-columns:repeat(2,1fr);gap:12px}
  /* Con el icono ENCIMA del número la sección se iba a 566px de alto. Puesto
     a su lado se recupera una fila entera por tarjeta sin perder el ancla
     visual; la etiqueta y el detalle siguen a todo el ancho. */
  .mc-stat{
    display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"ico num" "etq etq" "det det";
    align-items:center;column-gap:11px;padding:16px 14px;
  }
  .mc-stat__ico{grid-area:ico;width:38px;height:38px;border-radius:11px;margin-bottom:0}
  .mc-stat__ico svg{width:19px;height:19px}
  .mc-stat__n{grid-area:num;font-size:clamp(30px,8vw,38px)}
  .mc-stat__l{grid-area:etq;font-size:15px;margin-top:12px}
  .mc-stat__d{grid-area:det;font-size:13.5px}
}
@media (max-width:400px){
  .mc-stats__grid{gap:10px}
  .mc-stat{padding:16px 13px}
}

@media (prefers-reduced-motion:reduce){.mc-stat:hover{transform:none}}

/* ── Dolores / problema → solucion ────────────────────────────────────────── */
/* ── Dolores ──────────────────────────────────────────────────────────────── */

/* Encabezado a dos columnas: el texto manda y la ilustración acompaña. */
.mc-pain-head{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.mc-pain-head__copy{min-width:0}
.mc-pain-head__copy .mc-h2{max-width:20ch}
.mc-pain-head__copy .mc-lead{max-width:52ch}
.mc-pain-head .mc-h2 em{font-style:normal;color:var(--mc-accent-2)}
/* `multiply` en vez de exigir PNG con transparencia: la ilustración viene
   sobre BLANCO y el fondo del sitio es #F8FAFC, así que pegada tal cual deja
   un rectángulo blanco con su costura visible. Multiplicando, el blanco se
   vuelve el fondo exacto y el dibujo azul queda igual — y todo eso funciona
   con un JPG, que pesa la mitad que un PNG de este tamaño. */
.mc-pain-head__art{width:100%;height:auto;display:block;mix-blend-mode:multiply}

@media (min-width:900px){
  .mc-pain-head{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);align-items:center;gap:var(--sp-5)}
  /* El <br> del título solo manda donde hay sitio: en móvil el salto forzado
     dejaba un renglón de dos palabras y otro larguísimo. */
  .mc-pain-head .mc-h2 br{display:inline}
}
@media (max-width:899px){
  .mc-pain-head .mc-h2 br{display:none}
  .mc-pain-head__art{max-width:560px;margin-inline:auto}
}

/* ── Dolores: la foto habla, el texto remata ──────────────────────────────
   Antes cada tarjeta cargaba ~34 palabras (cita + título + párrafo). El
   párrafo explicaba el «cómo», que es justo lo que hace la sección de
   Servicios 200px más abajo. Aquí el trabajo es que el visitante se
   reconozca, así que queda la foto del problema, la cita y una respuesta de
   una línea: 11 palabras por tarjeta. */
.mc-pain{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-3)}

.mc-pain__card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--mc-card);border:1px solid var(--mc-border);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease);
}
.mc-pain__card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:#CBD5E1}

.mc-pain__shot{position:relative;margin:0;overflow:hidden;isolation:isolate}
.mc-pain__shot img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform .6s var(--ease);
}
.mc-pain__card:hover .mc-pain__shot img{transform:scale(1.06)}
/* El degradado NO es adorno: la cita va en blanco encima de fotos que van de
   un escritorio claro a un cuarto oscuro. Sin él, sobre la foto del papeleo
   el texto se perdía. */
.mc-pain__shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,6,23,.06) 0%,rgba(2,6,23,.5) 42%,rgba(2,6,23,.9) 100%);
}
.mc-pain__quote{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:18px 18px 16px;color:#fff;
  font-family:var(--f-title);font-weight:600;font-size:17.5px;
  line-height:1.32;letter-spacing:-.015em;text-wrap:balance;
}

.mc-pain__fix{
  display:flex;align-items:center;gap:11px;
  padding:16px 18px;margin:0;
}
.mc-pain__fix svg{width:21px;height:21px;color:var(--mc-ok);flex:0 0 auto}
.mc-pain__fix b{
  font-family:var(--f-title);font-weight:600;font-size:16px;
  color:var(--mc-ink);line-height:1.3;letter-spacing:-.01em;
}

@media (max-width:560px){
  .mc-pain{grid-template-columns:1fr}
  .mc-pain__quote{font-size:16.5px;padding:15px 15px 13px}
  .mc-pain__fix{padding:14px 15px}
  .mc-pain__fix b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .mc-pain__card:hover{transform:none}
  .mc-pain__card:hover .mc-pain__shot img{transform:none}
}

.mc-pain-bar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:var(--sp-4);
  background:var(--mc-card);border:1px solid var(--mc-border);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;
}
.mc-pain-bar li{display:flex;align-items:flex-start;gap:13px;padding:20px 22px;min-width:0}
.mc-pain-bar__i{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  display:grid;place-items:center;background:var(--mc-accent-soft);color:var(--mc-accent);
}
.mc-pain-bar__i svg{width:21px;height:21px}
.mc-pain-bar span{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:13px;color:var(--mc-muted-fg);line-height:1.45}
.mc-pain-bar b{font-family:var(--f-title);font-weight:600;font-size:15.5px;color:var(--mc-ink);line-height:1.25;letter-spacing:-.01em}

@media (max-width:980px){
  .mc-pain-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mc-pain-bar li:nth-child(n+3){border-top:1px solid var(--mc-border)}
  .mc-pain-bar li:nth-child(even){border-left:1px solid var(--mc-border)}
}
@media (max-width:560px){
  .mc-pain-bar{grid-template-columns:1fr}
  .mc-pain-bar li{border-left:0!important}
  .mc-pain-bar li+li{border-top:1px solid var(--mc-border)}
}

/* ── Servicios ────────────────────────────────────────────────────────────── */
/* ── Servicios ────────────────────────────────────────────────────────────── */
/* El degradado vivía en un `style=` dentro del HTML. Aquí no estorbaba a nadie,
   pero un fondo de sección es CSS y en el HTML no se puede versionar ni cambiar
   sin tocar el marcado. */
.mc-srv-sec{background:linear-gradient(180deg,#fff,var(--mc-bg))}

/* Cabecera con las dos ilustraciones flanqueando el texto. */
.mc-srv-head{display:grid;justify-items:center;margin-bottom:var(--sp-5)}
.mc-srv-head .mc-sec-head{margin-bottom:0}
.mc-srv-head .mc-h2 em{font-style:normal;color:var(--mc-accent-2)}
.mc-srv-head__art{display:none}

@media (min-width:1100px){
  .mc-srv-head{grid-template-columns:224px minmax(0,1fr) 224px;align-items:center;gap:var(--sp-4)}
  .mc-srv-head__art{
    display:block;width:100%;aspect-ratio:4/3;
    background-position:center;background-size:contain;background-repeat:no-repeat;
    /* Mismo trato que la ilustración de «dolores»: vienen sobre blanco y el
       fondo aquí es un degradado, así que multiplicando desaparecen sin pedir
       PNG con transparencia. */
    mix-blend-mode:multiply;
  }
  .mc-srv-head__art.is-left{background-image:url("/software/assets/img/servicios-izq.v4.webp")}
  .mc-srv-head__art.is-right{background-image:url("/software/assets/img/servicios-der.v4.webp")}
}
/* Por debajo de 1100 el título manda solo: metidas en columna, las dos
   ilustraciones empujaban el texto a la mitad de la pantalla. */
@media (max-width:1099px){
  .mc-srv-head .mc-h2 br{display:none}
}

/* Cuatro por renglón. `auto-fit` con 250px de mínimo da 4 en escritorio,
   3 a los ~900, 2 a los ~620 y 1 en teléfono, sin un media query por paso. */
.mc-srv{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-3)}
.mc-srv__card{
  position:relative;display:flex;flex-direction:column;
  background:var(--mc-card);border:1px solid var(--mc-border);border-radius:var(--r-lg);
  padding:var(--sp-3);overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.mc-srv__card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--mc-accent),var(--mc-sky));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.mc-srv__card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:#CBD5E1}
.mc-srv__card:hover::before{transform:scaleX(1)}
.mc-srv__ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--mc-accent-soft);color:var(--mc-accent);margin-bottom:var(--sp-2);
  position:relative;z-index:1;
}
.mc-srv__ico svg{width:23px;height:23px}
/* La tipografía baja de tamaño porque la tarjeta pasó de ~370px a ~270px:
   dejarla igual convertía cada título en tres renglones. */
/* `text-wrap:balance` reparte las palabras entre los renglones en vez de
   dejar una sola colgando: «Integraciones e IoT / industrial» pasa a
   «Integraciones / e IoT industrial». En un título de dos renglones se nota. */
.mc-srv__card h3{
  font-size:17.5px;line-height:1.3;margin-bottom:8px;
  text-wrap:balance;position:relative;z-index:1;
}
.mc-srv__card p{
  font-size:14.5px;color:var(--mc-muted-fg);line-height:1.6;
  margin-bottom:var(--sp-3);position:relative;z-index:1;
}
/* `margin-top:auto` empuja la raya al fondo de la tarjeta. Sin esto cada raya
   caía justo donde terminaba SU descripción —cinco renglones en una tarjeta,
   tres en la de al lado— y la fila se leía torcida aunque las tarjetas
   midieran exactamente lo mismo. El `margin-bottom` del párrafo garantiza el
   aire mínimo cuando la descripción es larga y no sobra espacio que repartir. */
.mc-srv__sep{height:1px;background:var(--mc-border);margin-top:auto}
.mc-srv__list{margin-top:var(--sp-3);display:grid;gap:9px;position:relative;z-index:1}
.mc-srv__list li{display:flex;gap:9px;font-size:13.5px;color:var(--mc-slate);line-height:1.5}
.mc-srv__list svg{width:15px;height:15px;color:var(--mc-accent);flex:0 0 auto;margin-top:3px}

/* La marca de agua: el propio icono de la tarjeta, grande y al fondo. Es una
   REGLA y no una elección por tarjeta — ni ocho decisiones que discutir ni
   ocho archivos que subir, versionar y volver a generar. */
/* Va DENTRO de la tarjeta, no colgando del borde. Sangrada se leía como un
   dibujo cortado por error —medio teléfono, medio monitor— en vez de como una
   marca de agua. Más chica y más tenue: acompaña, no compite. */
.mc-srv__deco{
  position:absolute;right:15px;bottom:15px;z-index:0;
  width:74px;height:74px;color:var(--mc-accent);opacity:.05;pointer-events:none;
  transition:opacity .22s var(--ease);
}
.mc-srv__card:hover .mc-srv__deco{opacity:.09}

/* ── Industrias ───────────────────────────────────────────────────────────── */
/* ── Industrias ───────────────────────────────────────────────────────────── */

/* Encabezado a dos columnas: el texto a la izquierda y el mapa acompañando.
   No lleva `is-center` a propósito — es el único encabezado de la página que
   se lee en diagonal junto a una figura, y centrado pelearía con ella. */
.mc-ind-head{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.mc-ind-head__copy{min-width:0}
.mc-ind-head__copy .mc-h2{max-width:19ch}
.mc-ind-head .mc-h2 em{font-style:normal;color:var(--mc-accent-2)}
.mc-ind-head__map{display:none}

@media (min-width:1000px){
  .mc-ind-head{grid-template-columns:minmax(0,1fr) minmax(0,.72fr);align-items:center}
  .mc-ind-head__map{
    display:block;width:100%;aspect-ratio:16/9;
    background:url("/software/assets/img/mapa-mundi.v7.webp") center/contain no-repeat;
    mix-blend-mode:multiply;
  }
}

.mc-ind{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-3)}
.mc-ind__card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:300px;
  /* Columna con el icono ARRIBA y el cuerpo ABAJO. Antes era `align-items:
     flex-end` a secas, que pega todo al fondo: metido ahí, el icono habría
     quedado encima del título en vez de en su esquina. */
  display:flex;flex-direction:column;justify-content:space-between;
  isolation:isolate;background:var(--mc-navy);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.mc-ind__card:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.mc-ind__card img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.mc-ind__card:hover img{transform:scale(1.06)}
.mc-ind__card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(2,6,23,.12) 0%,rgba(2,6,23,.62) 52%,rgba(2,6,23,.94) 100%);
}

/* El cuadro del icono va BLANCO y opaco, no translúcido: encima de una foto
   cualquiera, un cuadro de vidrio cambia de contraste con cada imagen y en la
   de almacén —que es clara— desaparecía. */
.mc-ind__ico{
  width:52px;height:52px;border-radius:15px;flex:0 0 auto;
  display:grid;place-items:center;margin:var(--sp-3) 0 0 var(--sp-3);
  background:#fff;color:var(--mc-accent);box-shadow:0 6px 18px rgba(2,6,23,.28);
}
.mc-ind__ico svg{width:26px;height:26px}

.mc-ind__body{padding:var(--sp-3);color:#fff;width:100%}
.mc-ind__body h3{color:#fff;font-size:21px;margin-bottom:7px;text-wrap:balance}
.mc-ind__body p{font-size:15px;color:#CBD5E1;line-height:1.5}
.mc-ind__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.mc-ind__tags span{
  font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);color:#E2E8F0;
}

/* La salida para quien no se vio en ninguna tarjeta. Seis sectores dejan fuera
   a la mayoría, y sin esto esa persona cierra la página: la lista se lee como
   «no trabajan con lo mío» en vez de como ejemplos. */
.mc-ind__cta{
  display:flex;align-items:center;justify-content:center;gap:13px;
  margin:var(--sp-4) auto 0;max-width:max-content;
  padding:14px 26px;border-radius:999px;
  background:var(--mc-card);border:1px solid var(--mc-border);box-shadow:var(--sh-1);
  color:var(--mc-slate);font-size:15.5px;line-height:1.35;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.mc-ind__cta:hover{border-color:var(--mc-accent);box-shadow:var(--sh-2);transform:translateY(-2px)}
.mc-ind__cta b{font-family:var(--f-title);font-weight:600;color:var(--mc-accent)}
.mc-ind__cta-i{
  width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  display:grid;place-items:center;background:var(--mc-accent-soft);color:var(--mc-accent);
}
.mc-ind__cta-i svg{width:18px;height:18px}
.mc-ind__cta-f{width:18px;height:18px;color:var(--mc-accent);flex:0 0 auto;transition:transform .2s var(--ease)}
.mc-ind__cta:hover .mc-ind__cta-f{transform:translateX(4px)}
@media (max-width:520px){
  .mc-ind__cta{max-width:100%;text-align:left}
}

/* ── Casos ────────────────────────────────────────────────────────────────── */
.mc-cases{background:var(--mc-navy);color:#CBD5E1;position:relative;overflow:hidden}
.mc-cases::before{
  content:"";position:absolute;inset:auto -10% -30% -10%;height:70%;
  background:radial-gradient(60% 100% at 50% 100%,rgba(3,105,161,.34),transparent 70%);pointer-events:none;
}
.mc-cases .mc-h2{color:#fff}
.mc-cases .mc-lead{color:#94A3B8}
.mc-cases .mc-eyebrow{color:var(--mc-sky)}
.mc-cases .mc-h2 em{font-style:normal;color:var(--mc-accent-2)}

/* Encabezado a dos columnas: el texto a la izquierda y las tres fases a la
   derecha, que es espacio que antes quedaba vacío en escritorio. */
.mc-cases-head{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-5);position:relative}
.mc-cases-head__copy{min-width:0}
.mc-cases-head__copy .mc-h2{max-width:16ch}
.mc-cases-head__copy .mc-lead{max-width:50ch}
.mc-cases-head__fases{display:grid;gap:var(--sp-3)}
.mc-cases-head__fases li{display:grid;gap:7px;align-content:start;min-width:0}
.mc-cases-head__fases b{font-family:var(--f-title);font-weight:600;font-size:15.5px;color:#fff;letter-spacing:-.01em}
.mc-cases-head__fases span:last-child{font-size:13.5px;color:#94A3B8;line-height:1.5}
.mc-cases-head__i{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.26);color:var(--mc-sky);
}
.mc-cases-head__i svg{width:20px;height:20px}

@media (min-width:1000px){
  .mc-cases-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-5);align-items:center}
  .mc-cases-head__fases{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  /* La raya separa las fases sin encerrarlas en cajas: son tres momentos de
     una misma línea de tiempo, no tres tarjetas sueltas. */
  .mc-cases-head__fases li{padding:0 var(--sp-3);border-left:1px solid rgba(255,255,255,.12)}
  .mc-cases-head__fases li:first-child{border-left:0;padding-left:0}
}

.mc-caselist{display:grid;gap:var(--sp-3);position:relative}
.mc-case{
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-5);align-items:center;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-xl);padding:var(--sp-4);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.mc-case:hover{border-color:rgba(56,189,248,.4);background:rgba(255,255,255,.07)}
.mc-case:nth-child(even) .mc-case__shot{order:-1}
.mc-case__sector{
  display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mc-sky);margin-bottom:14px;
}
/* El icono en su cuadro. Suelto y a 14px se perdía dentro de un renglón de
   versalitas espaciadas: se leía como un adorno del texto, no como su marca. */
.mc-case__sector-i{
  width:30px;height:30px;border-radius:10px;flex:0 0 auto;
  display:grid;place-items:center;font-style:normal;
  background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.26);
}
.mc-case__sector-i svg{width:16px;height:16px}
.mc-case h3{color:#fff;font-size:clamp(24px,2.6vw,31px);margin-bottom:10px}
.mc-case__desc{color:#94A3B8;font-size:16.5px;max-width:52ch}
.mc-case__sep{height:1px;background:rgba(255,255,255,.12);margin-top:var(--sp-3)}
.mc-case__facts{display:grid;gap:12px;margin:var(--sp-3) 0}
.mc-case__facts li{display:flex;gap:11px;font-size:15.5px;color:#CBD5E1}
.mc-case__facts svg{width:18px;height:18px;color:var(--mc-sky);flex:0 0 auto;margin-top:4px}
.mc-case__stack{display:flex;flex-wrap:wrap;gap:7px}
.mc-case__stack{margin-top:var(--sp-3)}
.mc-case__stack span{
  font-size:13px;font-weight:600;padding:7px 14px;border-radius:9px;
  background:rgba(56,189,248,.11);border:1px solid rgba(56,189,248,.24);color:#BAE6FD;
}
.mc-case__shot{
  border-radius:var(--r-md);overflow:hidden;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(2,6,23,.55);background:#0b1220;
}
.mc-case__shot img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top center}
.mc-case__link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-2);color:var(--mc-sky);font-weight:600;font-size:15.5px}
.mc-case__link svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.mc-case__link:hover svg{transform:translateX(4px)}
@media (max-width:900px){
  .mc-case{grid-template-columns:1fr;gap:var(--sp-3);padding:var(--sp-3)}
  .mc-case:nth-child(even) .mc-case__shot{order:0}
}

/* ── Proceso ──────────────────────────────────────────────────────────────── */
.mc-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3);position:relative;counter-reset:paso}
.mc-steps::before{
  content:"";position:absolute;top:26px;left:6%;right:6%;height:2px;
  background:repeating-linear-gradient(90deg,var(--mc-border) 0 8px,transparent 8px 16px);
}
.mc-step{position:relative;counter-increment:paso}
.mc-step__n{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--mc-card);border:2px solid var(--mc-border);color:var(--mc-accent);
  font-family:var(--f-title);font-weight:700;font-size:19px;margin-bottom:var(--sp-3);
  position:relative;z-index:1;transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.mc-step:hover .mc-step__n{background:var(--mc-accent);border-color:var(--mc-accent);color:#fff}
.mc-step__n::before{content:"0" counter(paso)}
.mc-step h3{font-size:18.5px;margin-bottom:8px}
.mc-step p{font-size:15.5px;color:var(--mc-muted-fg)}
.mc-step__meta{display:inline-block;margin-top:11px;font-size:13px;font-weight:600;color:var(--mc-accent);background:var(--mc-accent-soft);padding:3px 11px;border-radius:999px}
@media (max-width:1024px){
  .mc-steps{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
  .mc-steps::before{display:none}
}
@media (max-width:560px){.mc-steps{grid-template-columns:1fr}}

/* ── Diferenciadores + stack ──────────────────────────────────────────────── */
.mc-why{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:center}
@media (max-width:900px){.mc-why{grid-template-columns:1fr;gap:var(--sp-4)}}
.mc-why__list{display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
.mc-why__item{display:flex;gap:16px}
.mc-why__item svg{width:24px;height:24px;color:var(--mc-accent);flex:0 0 auto;margin-top:4px}
.mc-why__item h3{font-size:18.5px;margin-bottom:5px}
.mc-why__item p{font-size:15.5px;color:var(--mc-muted-fg)}
.mc-why__media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3)}
.mc-why__media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.mc-why__chip{
  position:absolute;left:20px;bottom:20px;right:20px;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-radius:var(--r-md);padding:16px 20px;box-shadow:var(--sh-2);
}
.mc-why__chip b{display:block;font-family:var(--f-title);color:var(--mc-ink);font-size:16.5px}
.mc-why__chip span{font-size:14.5px;color:var(--mc-muted-fg)}

.mc-stack{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-4)}
.mc-stack li{
  font-size:14.5px;font-weight:600;color:var(--mc-slate);background:var(--mc-card);
  border:1px solid var(--mc-border);border-radius:999px;padding:8px 17px;
  transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.mc-stack li:hover{border-color:var(--mc-accent);color:var(--mc-accent);transform:translateY(-2px)}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.mc-faq{display:grid;gap:12px;max-width:860px;margin-inline:auto}
.mc-faq details{
  background:var(--mc-card);border:1px solid var(--mc-border);border-radius:var(--r-md);
  overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.mc-faq details[open]{border-color:#CBD5E1;box-shadow:var(--sh-2)}
.mc-faq summary{
  list-style:none;cursor:pointer;padding:19px 58px 19px 22px;position:relative;
  font-family:var(--f-title);font-weight:600;font-size:17.5px;color:var(--mc-ink);line-height:1.4;
}
.mc-faq summary::-webkit-details-marker{display:none}
.mc-faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--mc-accent);border-bottom:2px solid var(--mc-accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);
}
.mc-faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.mc-faq summary:hover{background:var(--mc-muted)}
.mc-faq__a{padding:0 22px 21px;color:var(--mc-muted-fg);font-size:16.5px}
.mc-faq__a a{font-weight:600}

/* ── Contacto ─────────────────────────────────────────────────────────────── */
.mc-contact{background:var(--mc-navy);position:relative;overflow:hidden}
.mc-contact::before{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:120%;
  background:radial-gradient(50% 60% at 22% 30%,rgba(3,105,161,.4),transparent 68%),
             radial-gradient(46% 56% at 88% 76%,rgba(56,189,248,.2),transparent 66%);
  pointer-events:none;
}
.mc-contact__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sp-6);position:relative;align-items:start}
@media (max-width:960px){.mc-contact__grid{grid-template-columns:1fr;gap:var(--sp-4)}}
.mc-contact__aside .mc-eyebrow{color:var(--mc-sky)}
.mc-contact__aside .mc-h2{color:#fff}
.mc-contact__aside .mc-lead{color:#94A3B8}
.mc-contact__pts{display:grid;gap:var(--sp-2);margin-top:var(--sp-4)}
.mc-contact__pts li{display:flex;gap:12px;color:#CBD5E1;font-size:16px}
.mc-contact__pts svg{width:19px;height:19px;color:var(--mc-sky);flex:0 0 auto;margin-top:4px}
.mc-contact__direct{
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.14);
  display:grid;gap:12px;
}
.mc-contact__direct a{display:inline-flex;align-items:center;gap:11px;color:#E2E8F0;font-size:16px;font-weight:500}
.mc-contact__direct a:hover{color:var(--mc-sky)}
.mc-contact__direct svg{width:19px;height:19px;color:var(--mc-sky);flex:0 0 auto}

.mc-form{
  background:var(--mc-card);border-radius:var(--r-xl);padding:var(--sp-5);box-shadow:var(--sh-3);
}
@media (max-width:560px){.mc-form{padding:var(--sp-3)}}
.mc-form h3{font-size:24px;margin-bottom:6px}
.mc-form__hint{font-size:15.5px;color:var(--mc-muted-fg);margin-bottom:var(--sp-4)}
.mc-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-3)}
@media (max-width:640px){.mc-fgrid{grid-template-columns:1fr}}
.mc-field{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--sp-2)}
.mc-field--full{grid-column:1/-1}
.mc-field label{font-size:14.5px;font-weight:600;color:var(--mc-slate);font-family:var(--f-title)}
.mc-field label .req{color:var(--mc-signal)}
.mc-field input,.mc-field select,.mc-field textarea{
  width:100%;min-height:50px;padding:13px 15px;font-family:var(--f-body);font-size:16px;color:var(--mc-ink);
  background:var(--mc-bg);border:1.5px solid var(--mc-border);border-radius:var(--r-sm);
  transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
  color-scheme:light;
}
.mc-field textarea{min-height:118px;resize:vertical;line-height:1.55}
.mc-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235B6B80' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;
}
.mc-field input:hover,.mc-field select:hover,.mc-field textarea:hover{border-color:#CBD5E1}
.mc-field input:focus,.mc-field select:focus,.mc-field textarea:focus{
  outline:none;border-color:var(--mc-accent);background:#fff;box-shadow:0 0 0 4px rgba(3,105,161,.13);
}
.mc-field small{font-size:13.5px;color:var(--mc-muted-fg)}
.mc-field.has-error input,.mc-field.has-error select,.mc-field.has-error textarea{border-color:#DC2626;background:#FEF2F2}
.mc-field__err{display:none;font-size:13.5px;color:#B91C1C;font-weight:600}
.mc-field.has-error .mc-field__err{display:block}
.mc-hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0;pointer-events:none}

.mc-check{display:flex;gap:12px;align-items:flex-start;margin:var(--sp-2) 0 var(--sp-3)}
.mc-check input{width:22px;height:22px;min-height:0;flex:0 0 auto;margin-top:2px;accent-color:var(--mc-accent);cursor:pointer}
.mc-check label{font-size:14.5px;color:var(--mc-muted-fg);font-weight:400;line-height:1.5;font-family:var(--f-body)}
.mc-form__note{display:flex;gap:9px;align-items:center;justify-content:center;margin-top:14px;font-size:13.5px;color:var(--mc-muted-fg)}
.mc-form__note svg{width:15px;height:15px;color:var(--mc-ok)}

.mc-alert{display:none;gap:12px;padding:16px 18px;border-radius:var(--r-sm);margin-bottom:var(--sp-3);font-size:15.5px;align-items:flex-start}
.mc-alert.is-on{display:flex}
.mc-alert svg{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.mc-alert--ok{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46}
.mc-alert--err{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.mc-spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:mcspin .7s linear infinite;display:none}
.is-sending .mc-spin{display:block}
@keyframes mcspin{to{transform:rotate(360deg)}}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.mc-foot{background:#020617;color:#94A3B8;padding-block:var(--sp-6) var(--sp-4);font-size:15px}
.mc-foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-5)}
@media (max-width:840px){.mc-foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.mc-foot__grid{grid-template-columns:1fr}}
.mc-foot h4{color:#fff;font-size:15px;margin-bottom:16px;letter-spacing:.02em}
.mc-foot a{color:#94A3B8;display:inline-block;padding:4px 0}
.mc-foot a:hover{color:var(--mc-sky)}
.mc-foot__brand p{margin-top:14px;max-width:38ch;line-height:1.6}
.mc-foot__soc{display:flex;gap:10px;margin-top:18px}
.mc-foot__soc a{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;padding:0;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);color:#CBD5E1;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.mc-foot__soc a:hover{background:var(--mc-accent);color:#fff;transform:translateY(-2px)}
.mc-foot__soc svg{width:19px;height:19px}
.mc-foot__bar{
  border-top:1px solid rgba(255,255,255,.1);padding-top:var(--sp-3);
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;font-size:14px;
}

/* ── Reveal on scroll ─────────────────────────────────────────────────────── */
.js .mc-rv{opacity:0;transform:translateY(22px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .mc-rv.is-in{opacity:1;transform:none}
.js .mc-rv-stagger>*{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js .mc-rv-stagger.is-in>*{opacity:1;transform:none}
.js .mc-rv-stagger.is-in>*:nth-child(1){transition-delay:.03s}
.js .mc-rv-stagger.is-in>*:nth-child(2){transition-delay:.09s}
.js .mc-rv-stagger.is-in>*:nth-child(3){transition-delay:.15s}
.js .mc-rv-stagger.is-in>*:nth-child(4){transition-delay:.21s}
.js .mc-rv-stagger.is-in>*:nth-child(5){transition-delay:.27s}
.js .mc-rv-stagger.is-in>*:nth-child(6){transition-delay:.33s}
.js .mc-rv-stagger.is-in>*:nth-child(7){transition-delay:.39s}
.js .mc-rv-stagger.is-in>*:nth-child(8){transition-delay:.45s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .mc-rv,.mc-rv-stagger>*{opacity:1!important;transform:none!important}
}

/* ── Área táctil mínima (44px) en enlaces de texto ────────────────────────── */
.mc-case__link{padding-block:9px}
.mc-contact__direct a{padding-block:9px}
.mc-foot a{padding:10px 0}
.mc-foot__soc a{padding:0}
.mc-faq__a a{display:inline-block;padding-block:8px}
.mc-check input{width:24px;height:24px}
.mc-brand{padding-block:4px}

/* ══════════════════════════════════════════════════════════════════════════
   BANDAS "COTIZAR" — un empujón cada dos secciones
   Alternan claro/oscuro segun el fondo de la seccion que las precede, para
   que corten el scroll en vez de fundirse con el.
   ═════════════════════════════════════════════════════════════════════════ */
.mc-ctaband{position:relative;overflow:hidden}
.mc-ctaband__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:var(--sp-5) 24px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-4);
}
.mc-ctaband__txt{flex:1 1 380px;min-width:0}
.mc-ctaband__t{
  font-family:var(--f-title);font-weight:600;font-size:clamp(21px,2.4vw,29px);
  line-height:1.25;letter-spacing:-.02em;margin:0;
}
.mc-ctaband__s{font-size:16.5px;margin-top:9px;line-height:1.55}
.mc-ctaband__btns{display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto}

/* Variante oscura — sobre fondo claro */
.mc-ctaband--dark{background:var(--mc-navy)}
.mc-ctaband--dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 130% at 88% 50%,rgba(3,105,161,.42),transparent 62%);
}
.mc-ctaband--dark .mc-ctaband__in{position:relative}
.mc-ctaband--dark .mc-ctaband__t{color:#fff}
.mc-ctaband--dark .mc-ctaband__s{color:#94A3B8}

/* Variante clara — sobre fondo oscuro (seccion de casos) */
.mc-ctaband--light{background:var(--mc-accent-soft);border-block:1px solid #BAE6FD}
.mc-ctaband--light .mc-ctaband__t{color:var(--mc-ink)}
.mc-ctaband--light .mc-ctaband__s{color:var(--mc-muted-fg)}

/* Enlace secundario de WhatsApp dentro de la banda */
.mc-ctaband__wa{
  display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:14px 22px;
  border-radius:999px;font-family:var(--f-title);font-weight:600;font-size:16px;
  transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),border-color .18s var(--ease);
}
.mc-ctaband__wa svg{width:19px;height:19px}
.mc-ctaband--dark .mc-ctaband__wa{color:#E2E8F0;border:1.5px solid rgba(255,255,255,.34)}
.mc-ctaband--dark .mc-ctaband__wa:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;transform:translateY(-2px)}
.mc-ctaband--light .mc-ctaband__wa{color:var(--mc-navy);border:1.5px solid #7DD3FC}
.mc-ctaband--light .mc-ctaband__wa:hover{background:#fff;border-color:var(--mc-accent);transform:translateY(-2px)}

@media (max-width:700px){
  .mc-ctaband__in{flex-direction:column;align-items:flex-start;padding-block:var(--sp-4)}
  /* En columna, `flex-basis:380px` se mide en VERTICAL y abria un hueco de
     380px entre el texto y los botones. Aqui el bloque solo ocupa lo suyo. */
  .mc-ctaband__txt{flex:0 0 auto;width:100%}
  .mc-ctaband__btns{width:100%}
  .mc-ctaband__btns>*{flex:1 1 auto;justify-content:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTÓN FLOTANTE DE WHATSAPP
   Aparece al salir del hero (para no encimarse con el control del video) y se
   esconde cuando el formulario ya esta en pantalla: ahi el CTA es el formulario.
   ═════════════════════════════════════════════════════════════════════════ */
.mc-fab{
  position:fixed;right:20px;bottom:20px;z-index:1040;
  display:inline-flex;align-items:center;gap:11px;
  height:58px;padding:0 20px 0 17px;border-radius:999px;
  background:#25D366;color:#0B3D22;
  font-family:var(--f-title);font-weight:600;font-size:15.5px;letter-spacing:-.01em;
  box-shadow:0 8px 24px rgba(37,211,102,.4),0 2px 6px rgba(2,6,23,.2);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.94);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s,
             background .18s var(--ease),box-shadow .18s var(--ease);
}
.mc-fab.is-on{opacity:1;visibility:visible;transform:none}
.mc-fab:hover{background:#1FBE5A;box-shadow:0 12px 30px rgba(37,211,102,.5),0 2px 8px rgba(2,6,23,.24);transform:translateY(-3px)}
.mc-fab:active{transform:translateY(-1px)}
.mc-fab svg{width:27px;height:27px;flex:0 0 auto}
.mc-fab__txt{white-space:nowrap}

/* Latido discreto la primera vez, para que la vista lo encuentre */
.mc-fab.is-on::after{
  content:"";position:absolute;inset:0;border-radius:999px;
  border:2px solid #25D366;animation:mcfab 2.6s var(--ease) 3;
}
@keyframes mcfab{
  0%{transform:scale(1);opacity:.7}
  55%,100%{transform:scale(1.32);opacity:0}
}

/* En movil solo el icono: la etiqueta taparia media pantalla */
@media (max-width:640px){
  .mc-fab{height:56px;width:56px;padding:0;justify-content:center;right:16px;bottom:16px}
  .mc-fab__txt{display:none}
}

/* No estorbar la barra de gestos de iOS */
@supports (padding:max(0px)){
  .mc-fab{bottom:max(20px,env(safe-area-inset-bottom))}
  @media (max-width:640px){.mc-fab{bottom:max(16px,env(safe-area-inset-bottom))}}
}

@media (prefers-reduced-motion:reduce){
  .mc-fab{transition:opacity .01ms,visibility .01ms;transform:none!important}
  .mc-fab.is-on::after{animation:none;display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   SPOT — «Qué podemos hacer en Megacity»
   Carátula grande con play; el video pesa 20 MB y NO se toca hasta el clic.
   ═════════════════════════════════════════════════════════════════════════ */
.mc-spot{background:var(--mc-navy);position:relative;overflow:hidden}
.mc-spot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 76% at 16% 12%,rgba(3,105,161,.44),transparent 62%),
    radial-gradient(52% 70% at 88% 88%,rgba(56,189,248,.2),transparent 66%);
}
.mc-spot__in{position:relative;display:grid;grid-template-columns:.86fr 1.14fr;gap:var(--sp-6);align-items:center}
@media (max-width:980px){.mc-spot__in{grid-template-columns:1fr;gap:var(--sp-4)}}

.mc-spot__copy .mc-eyebrow{color:var(--mc-sky)}
.mc-spot__copy .mc-h2{color:#fff}
.mc-spot__copy .mc-lead{color:#94A3B8}
.mc-spot__pts{display:grid;gap:12px;margin-top:var(--sp-4)}
.mc-spot__pts li{display:flex;gap:11px;color:#CBD5E1;font-size:16px}
.mc-spot__pts svg{width:19px;height:19px;color:var(--mc-sky);flex:0 0 auto;margin-top:4px}

/* ── La carátula ─────────────────────────────────────────────────────────── */
.mc-spot__card{
  position:relative;width:100%;padding:0;border:0;background:none;
  border-radius:var(--r-xl);overflow:hidden;cursor:pointer;display:block;
  box-shadow:0 30px 70px rgba(2,6,23,.6),0 0 0 1px rgba(255,255,255,.13);
  transition:transform .34s var(--ease),box-shadow .34s var(--ease);
}
.mc-spot__card:hover{transform:translateY(-6px);box-shadow:0 40px 90px rgba(2,6,23,.68),0 0 0 1px rgba(56,189,248,.5)}
.mc-spot__card img{width:100%;height:auto;aspect-ratio:217/120;object-fit:cover;display:block;transition:transform .6s var(--ease),filter .34s var(--ease)}
.mc-spot__card:hover img{transform:scale(1.045);filter:saturate(1.08)}
.mc-spot__card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,23,.1) 0%,rgba(2,6,23,.18) 55%,rgba(2,6,23,.72) 100%);
}

/* Botón de play — el foco visible va aquí, no en la tarjeta entera */
.mc-spot__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.96);color:var(--mc-accent);
  box-shadow:0 12px 40px rgba(2,6,23,.5);
  transition:transform .3s var(--ease),background .22s var(--ease);
}
.mc-spot__play svg{width:34px;height:34px;margin-left:5px}
.mc-spot__card:hover .mc-spot__play{transform:translate(-50%,-50%) scale(1.1);background:#fff}
.mc-spot__card:focus-visible{outline:3px solid var(--mc-sky);outline-offset:4px}

/* Halo que late para que la vista lo encuentre */
.mc-spot__play::before{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);animation:mcspotpulse 2.8s var(--ease) infinite;
}
@keyframes mcspotpulse{
  0%{transform:scale(.92);opacity:.85}
  70%,100%{transform:scale(1.32);opacity:0}
}

.mc-spot__meta{
  position:absolute;left:20px;bottom:18px;right:20px;z-index:2;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  color:#fff;text-align:left;
}
.mc-spot__meta b{font-family:var(--f-title);font-size:18px;font-weight:600;letter-spacing:-.015em}
.mc-spot__dur{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  background:rgba(2,6,23,.62);border:1px solid rgba(255,255,255,.24);
  padding:5px 12px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.mc-spot__dur svg{width:14px;height:14px}
@media (max-width:560px){
  .mc-spot__play{width:70px;height:70px}
  .mc-spot__play svg{width:26px;height:26px}
  .mc-spot__meta b{font-size:15.5px}
}

/* ── Disparador discreto del hero ────────────────────────────────────────── */
/* El hero es CLARO (degradado blanco/azul). Este disparador toma prestado el
   lenguaje de `.mc-hero__badge`: tarjeta blanca con borde, no cristal sobre
   oscuro. Con el estilo de cristal el texto quedaba gris claro sobre blanco. */
.mc-hero__spot{
  display:inline-flex;align-items:center;gap:12px;margin-top:var(--sp-3);
  min-height:52px;padding:8px 20px 8px 8px;border-radius:999px;
  background:var(--mc-card);border:1px solid var(--mc-border);box-shadow:var(--sh-1);
  color:var(--mc-slate);font-family:var(--f-title);font-weight:600;font-size:15.5px;
  cursor:pointer;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease),color .2s var(--ease);
}
.mc-hero__spot:hover{
  border-color:var(--mc-accent);color:var(--mc-ink);
  box-shadow:var(--sh-2);transform:translateY(-2px);
}
.mc-hero__spot span.ico{
  width:36px;height:36px;border-radius:50%;background:var(--mc-accent);color:#fff;
  display:grid;place-items:center;flex:0 0 auto;
  transition:background .2s var(--ease);
}
.mc-hero__spot:hover span.ico{background:var(--mc-accent-hover)}
.mc-hero__spot span.ico svg{width:15px;height:15px;margin-left:2px}
.mc-hero__spot small{color:var(--mc-muted-fg);font-size:13.5px;font-weight:400}

/* ══════════════════════════════════════════════════════════════════════════
   VISOR DEL SPOT (modal)
   ═════════════════════════════════════════════════════════════════════════ */
.mc-lb{
  position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px;
  background:rgba(2,6,23,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.mc-lb.is-open{opacity:1;visibility:visible}
/* `display:grid` de arriba le gana al `hidden` del navegador, asi que hay que
   decirlo a mano — si no, el video queda alcanzable con el tabulador aun
   estando cerrado. */
.mc-lb[hidden]{display:none}
.mc-lb__box{
  position:relative;width:min(1180px,100%);border-radius:var(--r-lg);overflow:hidden;
  background:#000;box-shadow:0 40px 100px rgba(0,0,0,.7);
  transform:scale(.95) translateY(12px);transition:transform .34s var(--ease);
}
.mc-lb.is-open .mc-lb__box{transform:none}
.mc-lb__box video{width:100%;height:auto;max-height:82vh;display:block;background:#000}
.mc-lb__close{
  position:absolute;top:12px;right:12px;z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.26);
  background:rgba(2,6,23,.62);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.mc-lb__close:hover{background:rgba(220,38,38,.9);transform:rotate(90deg)}
.mc-lb__close svg{width:22px;height:22px}

/* Debajo del video, la salida hacia el formulario */
.mc-lb__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;background:var(--mc-navy);border-top:1px solid rgba(255,255,255,.1);
}
.mc-lb__foot p{color:#CBD5E1;font-size:15.5px;margin:0}
.mc-lb__foot b{color:#fff;font-family:var(--f-title)}
@media (max-width:640px){
  .mc-lb{padding:12px}
  .mc-lb__foot{flex-direction:column;align-items:stretch;text-align:center}
  .mc-lb__foot .mc-btn{width:100%;justify-content:center}
}

/* Con el visor abierto, la página de atrás no se mueve ni compite */
body.mc-lb-open{overflow:hidden}
body.mc-lb-open .mc-fab{opacity:0;visibility:hidden}

@media (prefers-reduced-motion:reduce){
  .mc-spot__play::before{animation:none;display:none}
  .mc-spot__card:hover{transform:none}
  .mc-spot__card:hover img{transform:none}
  .mc-lb,.mc-lb__box{transition:opacity .01ms,visibility .01ms}
  .mc-lb__box{transform:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO CON VIDEO DE FONDO  (2026-08-26)
   Invierte el hero claro a oscuro. Va al final del archivo a propósito: así
   pisa las reglas de arriba sin tener que editarlas ni subirles especificidad,
   y si algún día se quita el video basta con borrar este bloque.
   ═════════════════════════════════════════════════════════════════════════ */
.mc-hero{
  background:var(--mc-navy);
  min-height:min(96svh,900px);
  display:flex;flex-direction:column;justify-content:flex-end;
}

/* El arte anterior ya no se usa: lo tapaba el video. */
.mc-hero__art{display:none!important}

.mc-hero__media{position:absolute;inset:0;z-index:-2;background:var(--mc-navy)}
.mc-hero__media img,
.mc-hero__media video{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.mc-hero__media video{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.mc-hero__media img,
.mc-hero__media video{filter:brightness(1.06) saturate(1.04)}
.mc-hero__media video.is-on{opacity:1}

/* El scrim carga con el peso: el video es 736x400 y se estira mucho, así que
   el degradado no solo da contraste, también disimula el escalado. */
.mc-hero__scrim{
  position:absolute;inset:0;z-index:-1;
  /* Las capas NO se suman, se multiplican: con .94 y .72 encima solo pasaba el
     1.7% del video y el hero se veia negro. Estos valores dejan pasar ~16% en
     la columna del texto y mas de la mitad en la derecha, donde no hay letras. */
  background:
    linear-gradient(100deg,rgba(2,6,23,.78) 0%,rgba(2,6,23,.68) 40%,rgba(2,6,23,.34) 72%,rgba(2,6,23,.18) 100%),
    linear-gradient(180deg,rgba(2,6,23,.37) 0%,rgba(2,6,23,.06) 34%,rgba(2,6,23,.14) 70%,rgba(2,6,23,.62) 100%),
    radial-gradient(78% 60% at 14% 30%,rgba(3,105,161,.28),transparent 66%);
}

/* ── Texto en claro ──────────────────────────────────────────────────────── */
.mc-hero__badge{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);
  color:#E2E8F0;box-shadow:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.mc-hero__badge svg{color:var(--mc-sky)}
.mc-hero__badge i{color:rgba(255,255,255,.34)}

.mc-hero h1{color:#fff}
.mc-hero h1 em{color:var(--mc-sky)}
.mc-hero h1 b{color:#FB923C}          /* el naranja de marca se aclara: #EA580C sobre navy queda apagado */

.mc-hero__sub{color:#CBD5E1}
.mc-hero__sub em{color:var(--mc-sky)}

/* El disparador del spot vuelve al cristal, ahora que el fondo es oscuro */
.mc-hero__spot{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);
  color:#E2E8F0;box-shadow:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.mc-hero__spot:hover{
  background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55);
  color:#fff;box-shadow:none;
}
.mc-hero__spot span.ico{background:var(--mc-sky);color:var(--mc-navy)}
.mc-hero__spot:hover span.ico{background:#fff}
.mc-hero__spot small{color:#94A3B8}

/* ── Barra de confianza, en vidrio ───────────────────────────────────────── */
.mc-hero__barwrap{padding-bottom:var(--sp-5)}
.mc-hero__bar{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);
  box-shadow:0 20px 50px rgba(2,6,23,.5);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.mc-hero__bar li{border-left-color:rgba(255,255,255,.13)}
.mc-hero__bar svg{color:var(--mc-sky)}
.mc-hero__bar span{color:#94A3B8}
.mc-hero__bar b{color:#fff}
@media (max-width:900px){
  .mc-hero__bar li:nth-child(n+3){border-top-color:rgba(255,255,255,.13)}
}
@media (max-width:520px){
  .mc-hero__bar li+li{border-top-color:rgba(255,255,255,.13)}
}

/* ── Control del video ───────────────────────────────────────────────────── */
.mc-hero__vidbtn{
  position:absolute;right:22px;top:calc(var(--nav-h) + 18px);z-index:3;
  display:none;align-items:center;gap:8px;
  min-height:40px;padding:8px 15px;border-radius:999px;
  background:rgba(2,6,23,.55);border:1px solid rgba(255,255,255,.24);color:#E2E8F0;
  font-family:var(--f-title);font-size:13.5px;font-weight:600;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.mc-hero__vidbtn.is-on{display:inline-flex}
.mc-hero__vidbtn:hover{background:rgba(2,6,23,.82);color:#fff}
.mc-hero__vidbtn svg{width:15px;height:15px}
@media (max-width:640px){
  .mc-hero__vidbtn{right:14px;padding:8px 12px}
  .mc-hero__vidbtn span{display:none}
}

/* Ancho del texto: ya no hay que esquivar la ilustración de la derecha */
@media (min-width:1000px){
  .mc-hero__copy{max-width:min(60vw,700px)}
}

@media (prefers-reduced-motion:reduce){
  .mc-hero__media video{display:none}
}

/* ── La navbar vuelve a flotar sobre el hero ─────────────────────────────── */
/* Con el video de fondo, una barra clara a tope corta el hero en dos. Nace
   transparente otra vez y se vuelve clara al hacer scroll. El logo cambia con
   ella: dos archivos, no un filtro — invertir el color con `filter` le arruina
   el naranja de la marca. */
.mc-nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

.mc-brand__logo--color{display:none}
.mc-nav.is-stuck .mc-brand__logo--claro,
.mc-nav.is-open  .mc-brand__logo--claro{display:none}
.mc-nav.is-stuck .mc-brand__logo--color,
.mc-nav.is-open  .mc-brand__logo--color{display:block}

.mc-nav .mc-brand__sub{color:#94A3B8;border-left-color:rgba(255,255,255,.26)}
.mc-nav.is-stuck .mc-brand__sub,
.mc-nav.is-open  .mc-brand__sub{color:var(--mc-muted-fg);border-left-color:var(--mc-border)}

.mc-nav__links a:not(.mc-nav__cta){color:rgba(255,255,255,.88)}
.mc-nav__links a:not(.mc-nav__cta):hover{background:rgba(255,255,255,.14);color:#fff}

.mc-nav__burger{background:rgba(255,255,255,.14);color:#fff}

@media (prefers-reduced-motion:no-preference){
  .mc-brand__logo{transition:opacity .2s var(--ease)}
}

/* ── El fondo del hero en celular ────────────────────────────────────────── */
/* Con `cover` a pantalla completa, el zoom lo fija el ALTO del viewport:
   844/400 = 2.1x, y solo se ve el 25% central del cuadro. Recortar el archivo
   no arregla eso. Lo que sí: bajarle la altura al video y fundirlo al navy.
   A ~510px de alto el corte 4:5 entra casi entero y el zoom baja a 1.3x. */
@media (max-width:640px){
  .mc-hero__media{
    inset:0 0 auto 0;
    height:clamp(490px,62vh,620px);
  }
  .mc-hero__media::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
    background:linear-gradient(180deg,rgba(2,6,23,0) 0%,rgba(2,6,23,.55) 45%,var(--mc-navy) 100%);
  }
  /* El scrim ya no tiene que oscurecer el pie: ahí abajo solo hay navy. */
  .mc-hero__scrim{
    background:
      linear-gradient(180deg,rgba(2,6,23,.5) 0%,rgba(2,6,23,.12) 26%,rgba(2,6,23,.28) 52%,rgba(2,6,23,0) 72%);
  }
}

/* ── Manto de la navbar sobre el video ───────────────────────────────────── */
/* El video tiene la pared blanca de la oficina justo detrás de la marca: ahí
   «Software» quedaba en 1.9:1, ilegible. Un degradado propio de la barra lo
   resuelve en cualquier fotograma sin oscurecer el resto del hero. */
.mc-nav::before{
  content:"";position:absolute;left:0;right:0;top:0;height:170%;z-index:-1;
  background:linear-gradient(180deg,rgba(2,6,23,.85) 0%,rgba(2,6,23,.5) 52%,rgba(2,6,23,0) 100%);
  pointer-events:none;transition:opacity .3s var(--ease);
}
.mc-nav.is-stuck::before,
.mc-nav.is-open::before{opacity:0}

/* Con el manto encima, el gris del subtítulo se aclara para pasar de 4:1 a 7:1 */
.mc-nav .mc-brand__sub{color:#CBD5E1}

/* ── En celular el control del video necesita su propia franja ───────────── */
/* Arriba a la derecha se montaba sobre la insignia «Fábrica de software». */
@media (max-width:640px){
  .mc-hero__in{padding-top:calc(var(--nav-h) + 104px)}
  .mc-hero__vidbtn{top:calc(var(--nav-h) + 14px);right:14px}
}

/* En celular la insignia se sienta justo sobre el logo de la pared: menos
   fondo y menos desenfoque para que se siga viendo a través de ella. */
@media (max-width:640px){
  .mc-hero__badge{
    /* Lo que tapaba el logo era el `blur(10px)`, no el relleno. Con 2px de
       desenfoque se ve a través; el relleno sube a .45 y el texto a blanco
       puro para no bajar de 5:1 sobre el punto más claro del video. */
    background:rgba(2,6,23,.45);
    border-color:rgba(255,255,255,.28);
    color:#fff;
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTORES — rejilla de acceso  (reemplaza a .mc-sectores, 2026-08-26)
   Antes era una fila que se partía en 5+1 y dejaba un huérfano descentrado.
   Rejilla fija de 3x2 (2x3 en celular): sin huérfanos y con los iconos
   alineados, que en la lista centrada anterior bailaban en cada renglón.
   ═════════════════════════════════════════════════════════════════════════ */
.mc-sect{
  position:relative;
  background:linear-gradient(180deg,var(--mc-bg) 0%,#fff 55%,var(--mc-bg) 100%);
  padding-block:var(--sp-6);
}
.mc-sect__in{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

.mc-sect__head{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--sp-4);text-align:center}
.mc-sect__eyebrow{
  font-family:var(--f-title);font-weight:600;font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mc-accent);
}
.mc-sect__hint{font-size:15.5px;color:var(--mc-muted-fg)}

.mc-sect__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.mc-sect__card{
  position:relative;display:flex;align-items:center;gap:14px;height:100%;
  padding:18px 46px 18px 18px;border-radius:var(--r-md);
  background:var(--mc-card);border:1px solid var(--mc-border);box-shadow:var(--sh-1);
  color:var(--mc-slate);overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
/* Filo de color que crece desde la izquierda: da el "algo pasó" sin mover texto */
.mc-sect__card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--mc-sky),var(--mc-accent));
  transform:scaleY(0);transform-origin:center;transition:transform .26s var(--ease);
}
.mc-sect__card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#CBD5E1}
.mc-sect__card:hover::before{transform:scaleY(1)}

.mc-sect__ico{
  width:48px;height:48px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;
  background:var(--mc-accent-soft);color:var(--mc-accent);
  transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease);
}
.mc-sect__ico svg{width:24px;height:24px}
.mc-sect__card:hover .mc-sect__ico{background:var(--mc-accent);color:#fff;transform:scale(1.06)}

.mc-sect__txt{display:flex;flex-direction:column;line-height:1.28;font-size:14.5px;min-width:0}
.mc-sect__txt b{
  font-family:var(--f-title);font-weight:600;font-size:16.5px;color:var(--mc-ink);
  letter-spacing:-.015em;
}
.mc-sect__go{
  position:absolute;right:16px;top:50%;width:18px;height:18px;
  color:var(--mc-accent);opacity:0;transform:translate(-6px,-50%);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.mc-sect__card:hover .mc-sect__go{opacity:1;transform:translate(0,-50%)}

@media (max-width:900px){
  .mc-sect__grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .mc-sect__card{padding:16px 14px;flex-direction:column;align-items:flex-start;gap:11px}
  .mc-sect__txt{font-size:13.5px}
  .mc-sect__txt b{font-size:15.5px}
  /* La flecha se guarda: en táctil no hay hover que la dispare y sin él
     solo sería un adorno robando ancho al nombre del sector. */
  .mc-sect__go{display:none}
  .mc-sect__card{padding-right:14px}
}
@media (max-width:360px){
  .mc-sect__ico{width:42px;height:42px;border-radius:12px}
  .mc-sect__ico svg{width:21px;height:21px}
}

/* Al llegar desde la rejilla, la tarjeta de destino se anuncia sola */
.mc-ind__card{scroll-margin-top:calc(var(--nav-h) + 24px)}
/* Dura 3.4s y no 2.2s a propósito: el desplazamiento suave hasta Industrias
   recorre ~8.500px y tarda ~1.5s. Con la animación arrancando de golpe, el
   visitante llegaba cuando el destello ya se había ido. Los fotogramas
   mantienen el anillo apagado el primer tercio y lo encienden al aterrizar. */
.mc-ind__card.is-target{animation:mcTarget 3.4s var(--ease) 1}
.mc-ind__card.is-target::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 3px var(--mc-sky);
  animation:mcTargetRing 3.4s var(--ease) 1;
}
@keyframes mcTarget{
  0%,40%{transform:none}
  50%{transform:translateY(-6px)}
  62%,100%{transform:none}
}
@keyframes mcTargetRing{
  0%,34%{opacity:0}
  44%,78%{opacity:1}
  100%{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .mc-sect__card:hover{transform:none}
  .mc-ind__card.is-target{animation:none}
  .mc-ind__card.is-target::before{animation:none;opacity:1}
}

/* La rejilla ganó aspecto pero en celular pasó de 393px a 649px de alto.
   Estos ajustes la devuelven a ~520 sin quitarle las tarjetas ni el área
   táctil (siguen bien por encima de 44px). */
@media (max-width:900px){
  .mc-sect{padding-block:var(--sp-5)}
  .mc-sect__head{margin-bottom:var(--sp-3);gap:4px}
  .mc-sect__eyebrow{font-size:12px;letter-spacing:.08em}
  .mc-sect__hint{font-size:14.5px}
  .mc-sect__card{padding:13px 12px;gap:8px}
  .mc-sect__ico{width:40px;height:40px;border-radius:12px}
  .mc-sect__ico svg{width:21px;height:21px}
  .mc-sect__txt{font-size:13px;line-height:1.22}
  .mc-sect__txt b{font-size:15px}
}

/* ══════════════════════════════════════════════════════════════════════════
   BITMÉDICO — vertical de salud
   Usa un acento propio (verde clínico) para que se lea como OTRO producto
   dentro de la página, sin salirse del sistema: mismos tokens de espacio,
   radios y tipografía.
   ═════════════════════════════════════════════════════════════════════════ */
.mc-med{
  --med:#0E7C6B;            /* verde clínico, 4.9:1 sobre blanco */
  --med-soft:#E6F4F1;
  --med-ink:#064138;
  position:relative;overflow:hidden;padding-block:var(--sp-7);
  background:linear-gradient(180deg,#fff 0%,var(--med-soft) 42%,#fff 100%);
}
.mc-med::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 54% at 88% 22%,rgba(14,124,107,.1),transparent 68%);
}
.mc-med__in{
  position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:var(--sp-6);align-items:center;
}
@media (max-width:960px){.mc-med__in{grid-template-columns:1fr;gap:var(--sp-4)}}

.mc-med__tag{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px 8px 12px;border-radius:999px;
  background:#fff;border:1px solid rgba(14,124,107,.24);
  color:var(--med-ink);font-family:var(--f-title);font-weight:600;font-size:14px;
  box-shadow:var(--sh-1);
}
.mc-med__tag svg{width:18px;height:18px;color:var(--med)}
.mc-med .mc-h2{margin-top:var(--sp-3)}
.mc-med .mc-h2 em{font-style:normal;color:var(--med)}
.mc-med .mc-lead b{color:var(--mc-ink);font-weight:600}

.mc-med__list{display:grid;gap:14px;margin-top:var(--sp-4)}
.mc-med__list li{display:flex;gap:14px;align-items:flex-start}
.mc-med__ico{
  width:42px;height:42px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;
  background:var(--med-soft);color:var(--med);border:1px solid rgba(14,124,107,.16);
}
.mc-med__ico svg{width:21px;height:21px}
.mc-med__list b{
  display:block;font-family:var(--f-title);font-weight:600;font-size:16.5px;
  color:var(--mc-ink);line-height:1.3;letter-spacing:-.015em;
}
.mc-med__list span{display:block;margin-top:3px;font-size:15px;color:var(--mc-muted-fg);line-height:1.5}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.mc-med__acc{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-4);align-items:center}
.mc-med .mc-btn--primary{background:var(--med);box-shadow:0 6px 18px rgba(14,124,107,.3)}
.mc-med .mc-btn--primary:hover{background:var(--med-ink);box-shadow:0 12px 26px rgba(14,124,107,.36)}
.mc-med__share{
  display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 22px;
  border-radius:999px;border:1.5px solid #25D366;background:#fff;color:#0B3D22;
  font-family:var(--f-title);font-weight:600;font-size:16px;
  transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.mc-med__share svg{width:20px;height:20px;color:#25D366}
.mc-med__share:hover{background:#25D366;color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,211,102,.34)}
.mc-med__share:hover svg{color:#fff}

/* ── Carátula: marco de teléfono ─────────────────────────────────────────
   El video es 480x882 (vertical, formato reel). Metido en la tarjeta 8:5 que
   había antes se veía con dos franjas negras a los lados; en un teléfono se
   ve intencional, y encima es donde el médico va a usar bitMédico. */
.mc-med__media{display:flex;flex-direction:column;align-items:center}
.mc-med__phone{
  position:relative;display:block;padding:10px;border:0;cursor:pointer;
  width:min(300px,78vw);border-radius:38px;
  background:linear-gradient(160deg,#1f2937,#0b1220 60%,#1f2937);
  box-shadow:0 30px 70px rgba(6,65,56,.34),0 0 0 1px rgba(255,255,255,.1) inset,
             0 2px 4px rgba(255,255,255,.16) inset;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.mc-med__phone:hover{transform:translateY(-6px);box-shadow:0 40px 90px rgba(6,65,56,.4),0 0 0 1px rgba(255,255,255,.12) inset}
.mc-med__phone:focus-visible{outline:3px solid var(--med);outline-offset:5px}
.mc-med__phone img{
  display:block;width:100%;height:auto;aspect-ratio:480/882;object-fit:cover;
  border-radius:29px;background:#000;
}
.mc-med__notch{
  position:absolute;top:19px;left:50%;transform:translateX(-50%);z-index:3;
  width:34%;height:20px;border-radius:0 0 14px 14px;background:#0b1220;
}
.mc-med__phone::after{
  content:"";position:absolute;inset:10px;border-radius:29px;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,65,56,0) 55%,rgba(6,65,56,.5) 100%);
}
.mc-med__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.96);color:var(--med);box-shadow:0 12px 34px rgba(6,65,56,.45);
  transition:transform .3s var(--ease);
}
.mc-med__play svg{width:27px;height:27px;margin-left:4px}
.mc-med__phone:hover .mc-med__play{transform:translate(-50%,-50%) scale(1.1)}
.mc-med__play::before{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid rgba(255,255,255,.6);animation:mcmedpulse 2.8s var(--ease) infinite;
}
@keyframes mcmedpulse{0%{transform:scale(.94);opacity:.8}70%,100%{transform:scale(1.3);opacity:0}}
.mc-med__dur{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:5px 12px;border-radius:999px;
  background:rgba(2,6,23,.66);border:1px solid rgba(255,255,255,.24);color:#fff;
  font-family:var(--f-title);font-weight:600;font-size:12.5px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.mc-med__dur svg{width:13px;height:13px}

.mc-med__acc .mc-btn--primary small{
  font-family:var(--f-body);font-weight:400;font-size:13.5px;opacity:.85;margin-left:2px;
}

/* ── Sellos y nota ───────────────────────────────────────────────────────── */
.mc-med__sellos{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-3);justify-content:center}
.mc-med__sellos li{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;background:#fff;border:1px solid rgba(14,124,107,.2);
  font-family:var(--f-title);font-weight:600;font-size:13px;color:var(--med-ink);
}
.mc-med__sellos svg{width:15px;height:15px;color:var(--med)}

.mc-med__nota{
  display:flex;gap:11px;align-items:flex-start;margin-top:var(--sp-3);
  padding:14px 16px;border-radius:var(--r-md);
  background:#fff;border:1px solid rgba(14,124,107,.18);
  font-size:14.5px;color:var(--mc-muted-fg);line-height:1.5;
}
.mc-med__nota svg{width:19px;height:19px;color:var(--med);flex:0 0 auto;margin-top:2px}
.mc-med__nota b{color:var(--med-ink);font-weight:600}
.mc-med__nota a{color:var(--med);font-weight:600;white-space:nowrap}

@media (max-width:560px){
  .mc-med{padding-block:var(--sp-6)}
  .mc-med__play{width:66px;height:66px}
  .mc-med__play svg{width:25px;height:25px}
  .mc-med__acc>*{flex:1 1 100%;justify-content:center}
  .mc-med__list li{gap:12px}
  .mc-med__ico{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  .mc-med__play::before{animation:none;display:none}
  .mc-med__card:hover{transform:none}
  .mc-med__card:hover img{transform:none}
}

/* Cuando el archivo de video no está, el visor mostraba un rectángulo negro
   mudo. Este aviso lo explica. */
.mc-lb__error{
  margin:0;padding:16px 20px;background:#7F1D1D;color:#FEE2E2;
  font-size:15px;text-align:center;line-height:1.5;
}

/* El visor nació para el spot, que es horizontal. Con un video vertical el
   `width:100%` del recuadro lo estiraba hasta salirse de la pantalla; con esta
   clase (la pone mc.js al leer las dimensiones reales) manda el alto. */
.mc-lb__box.is-vertical{width:auto;max-width:min(440px,94vw)}
/* `width:auto` en el video, no 100%: con 100% el elemento se estiraba al ancho
   de la caja y el video quedaba con franjas a los lados. Así el alto manda y
   la caja se ciñe a lo que ocupa realmente. */
.mc-lb__box.is-vertical video{max-height:74vh;width:auto;max-width:100%;display:block;margin-inline:auto}