/* ============================================================
   Nubimetrics MCP — estilos de página
   Portado del wireframe. Namespaced bajo `.mcp` para no colisionar
   con el CSS global del sitio (bootstrap/global/layout) que se
   carga para el footer heredado.
   Tokens (:root) y dark-mode quedan globales (solo son variables).
   ============================================================ */

/* ---------- Fuentes (variables, extraídas del wireframe) ---------- */
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/fonts/Montserrat-variable.woff2') format('woff2'); }
@font-face{ font-family:'Roboto'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/fonts/Roboto-variable.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/fonts/Inter-variable.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root{
  --primary:#3DA9FE; --primary-dark:#1976D2; --primary-deep:#1565C0; --on-primary:#ffffff;
  --brand-violet:#A812FF; --corporate-ink:#131B26;
  --canvas:#E2E2E2; --canvas-alt:#CFCFCF; --canvas-plain:#ffffff; --surface:#ffffff; --header-bg:#ffffff;
  --hairline:#E0E0E0;
  --text-title:#1A1A1A; --text-body:#4D4D4D; --text-muted:#757575; --wordmark:#595959;
  --positive:#8CC63F; --negative:#FF4701;
  --menu-negocio:#9DC561; --menu-academia:#5F539E;
  --grad-brand:linear-gradient(90deg,#B600FF 0%,#00FFFF 100%);
  --grad-ia:linear-gradient(90deg,#9626F8 0%,#189FBF 100%);
  --shadow-1:0 1px 3px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06);
  --shadow-4:0 4px 12px rgba(0,0,0,.14);
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:9999px;
  --sp-xs:4px; --sp-sm:8px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px; --sp-xxl:48px; --sp-xxxl:80px;
  --font-display:'Inter',system-ui,sans-serif;
  --font-title:'Montserrat',system-ui,sans-serif;
  --font-body:'Roboto',system-ui,sans-serif;
}
/* El sitio Nubimetrics es solo-claro (no hay dark mode): palette única en :root. */

/* ---------- Base (scoped) ---------- */
.mcp{
  background:var(--canvas); color:var(--text-body); font-family:var(--font-body);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
/* font-family directo en cada descendiente para ganarle al `*{font-family:Nexa}`
   de global.css (que se carga para el footer). Los headings lo sobreescriben. */
.mcp *{ box-sizing:border-box; font-family:var(--font-body); }
.mcp img,.mcp svg{ max-width:100%; display:block; }
.mcp .icon{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
/* Íconos rellenos (Material): usan fill en vez de stroke, tomando el color actual */
.mcp .icon-fill{ fill:currentColor; stroke:none; }
.mcp a{ color:inherit; }
.mcp :focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .mcp *{ animation:none !important; transition:none !important; } }

.mcp .wrap{ max-width:1080px; margin:0 auto; padding:0 var(--sp-lg); }
@media (max-width:640px){ .mcp .wrap{ padding:0 var(--sp-md); } }

/* ---------- Header ---------- */
.mcp .site-header{
  background:rgba(0,0,0,.88); border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky; top:0; z-index:20;
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
}
.mcp .site-header .wrap{ max-width:1200px; display:flex; align-items:center; gap:var(--sp-lg); height:64px; }
.mcp .logo{ height:42px; width:auto; flex-shrink:0; }
.mcp .crumb{ font-size:12px; color:rgba(255,255,255,.7); }
.mcp .crumb b{ color:#fff; font-weight:500; }
.mcp .spacer{ flex:1; }
.mcp .nav-link{ font-size:13px; color:var(--text-body); text-decoration:none; margin-right:var(--sp-lg); }
.mcp .nav-link:hover{ color:var(--primary-dark); }

/* ---------- Selector de idioma ---------- */
.mcp .lang-switch{ position:relative; flex-shrink:0; }
.mcp .lang-toggle{
  display:inline-flex; align-items:center; gap:6px;
  height:44px; padding:0 12px; border-radius:var(--r-sm);
  background:transparent; border:1px solid rgba(255,255,255,.2); color:#fff;
  font-family:var(--font-body); font-size:14px; font-weight:500; line-height:1; cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.mcp .lang-toggle:hover{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.06); }
.mcp .lang-globe{ width:18px; height:18px; flex-shrink:0; }
.mcp .lang-caret{ width:12px; height:12px; opacity:.75; transition:transform .18s ease; }
.mcp .lang-switch.open .lang-caret{ transform:rotate(180deg); }
.mcp .lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  min-width:170px; margin:0; padding:6px; list-style:none;
  background:#141414; border:1px solid rgba(255,255,255,.12); border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.mcp .lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.mcp .lang-menu a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px;
  color:rgba(255,255,255,.82); text-decoration:none; font-size:14px; white-space:nowrap;
}
.mcp .lang-menu a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.mcp .lang-menu a[aria-current="true"]{ color:#fff; font-weight:600; }
.mcp .lang-menu a[aria-current="true"]::after{ content:""; width:6px; height:6px; margin-left:auto; border-radius:50%; background:var(--primary); }
@media (max-width:720px){
  .mcp .site-header .wrap{ gap:10px; height:56px; }
  .mcp .logo{ height:30px; }
  .mcp .crumb{ display:none; }
  .mcp .lang-toggle{ padding:0 10px; }
  .mcp .site-header .btn{ height:40px; padding:0 16px; font-size:12px; }
}
@media (max-width:380px){ .mcp .lang-current{ display:none; } }

/* ---------- Buttons ---------- */
.mcp .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-size:14px; font-weight:500; letter-spacing:.2px; text-transform:uppercase;
  height:44px; padding:0 26px; border-radius:var(--r-sm); border:none; cursor:pointer; text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
  white-space:nowrap;
}
.mcp .btn:hover{ transform:scale(1.03); }
.mcp .btn:active{ transform:scale(0.99); }
.mcp .btn-primary{ background:var(--primary); color:var(--on-primary); }
.mcp .btn-primary:hover{ background:var(--primary-dark); }
.mcp .btn-outline{ background:transparent; color:var(--primary-dark); border:1.5px solid var(--primary-dark); }
.mcp .btn-outline:hover{ background:rgba(61,169,254,.08); }
.mcp .btn-on-brand{ background:var(--on-primary); color:#1a0033; }
.mcp .btn-on-brand:hover{ background:#f0f0f0; }

/* ---------- Section rhythm ---------- */
.mcp section{ padding:var(--sp-xxxl) 0; }
.mcp .eyebrow{
  font-family:var(--font-body); font-size:16px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--primary-dark); margin:0 0 var(--sp-md);
}
.mcp h1,.mcp h2,.mcp h3{ margin:0; color:var(--text-title); text-wrap:balance; }
.mcp h1{ font-family:var(--font-display); font-weight:700; font-size:44px; line-height:1.12; letter-spacing:-.5px; }
.mcp h2{ font-family:var(--font-title); font-weight:700; font-size:32px; line-height:1.2; }
.mcp h3{ font-family:var(--font-body); font-weight:500; font-size:17px; line-height:1.35; }
.mcp .lede{ font-size:18px; line-height:1.6; color:var(--text-body); max-width:60ch; }
.mcp p{ margin:0; }
.mcp .section-head{ max-width:640px; margin:0 0 var(--sp-xl); }
.mcp .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- HERO ---------- */
/* Fondo hero dark (paleta Enterprise) */
:root{ --ink-950:#080b14; --ink-900:#0a0e1a; --ink-850:#0d1220; --hero-stroke:rgba(255,255,255,.07); --handoff:#CFCFCF; }
.mcp .hero{
  position:relative; overflow:hidden; padding-top:var(--sp-xxxl); padding-bottom:80px;
  background:var(--ink-900);
  min-height:calc(100vh - 64px);
  display:flex; flex-direction:column; justify-content:center;
}
/* Hero: copy con ancho suficiente para 3 líneas del H1 (min 576px) y la chat-card
   recuperando su tamaño (~420px), con un gap mínimo entre ambos. Todo dentro del
   1080 para no romper el alineado con las secciones de abajo. */
.mcp .hero .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1.4fr 1fr; gap:var(--sp-lg); align-items:stretch; }
@media (max-width:900px){ .mcp .hero .wrap{ grid-template-columns:1fr; } }

/* Capas de fondo del hero */
.mcp .hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 8%, var(--ink-850) 0%, var(--ink-900) 45%, var(--ink-950) 100%); }
.mcp .hero-bg::before{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(38% 55% at 78% 42%, rgba(124,58,237,.38), transparent 70%),
    radial-gradient(30% 40% at 88% 60%, rgba(56,189,248,.16), transparent 70%); }
.mcp .hero-bg::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(34% 45% at 14% 18%, rgba(56,102,241,.20), transparent 72%); }
.mcp .hero-grid{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.4px);
  background-size:34px 34px; opacity:.05;
  -webkit-mask-image:radial-gradient(90% 80% at 50% 30%, #000 30%, transparent 78%);
          mask-image:radial-gradient(90% 80% at 50% 30%, #000 30%, transparent 78%); }
.mcp .hero-geo{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.mcp .hero-geo i{ position:absolute; border:1px solid var(--hero-stroke); display:block; }
.mcp .hero-geo .c{ width:340px; height:340px; border-radius:50%; top:-90px; right:-70px; }
.mcp .hero-geo .s{ width:190px; height:190px; border-radius:26px; bottom:120px; left:-60px; transform:rotate(8deg); }
.mcp .hero-grain{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mcp .hero-melt{ display:none; }
@media (prefers-reduced-motion:no-preference){ .mcp .hero-bg::before{ animation:heroDrift 16s ease-in-out infinite alternate; } }
@keyframes heroDrift{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-1.4%,1.8%,0)} }

/* Texto del hero sobre fondo oscuro */
.mcp .hero .eyebrow{ color:#7cc4ff; }
.mcp .hero h1{ color:#F3F3F3; }
.mcp .hero .lede{ color:rgba(255,255,255,.72); }
.mcp .hero .lede strong{ color:#fff; }
.mcp .hero .compat-label, .mcp .hero .compat-note{ color:rgba(255,255,255,.55); }
.mcp .hero .compat-chip{ background:#fff; border-color:#fff; color:#1A1A1A; }
.mcp .hero .btn-outline{ color:#fff; border-color:rgba(255,255,255,.45); }
.mcp .hero .btn-outline:hover{ background:rgba(255,255,255,.08); }
.mcp .hero h1{ margin-bottom:var(--sp-md); }
.mcp .hero .lede{ max-width:55ch; margin-bottom:var(--sp-xl); }
/* CTAs: ocupan el ancho de la bajada y se reparten el espacio (flex fill) */
.mcp .hero-ctas{ display:flex; gap:var(--sp-md); flex-wrap:wrap; margin-bottom:var(--sp-xl); max-width:60ch; }
.mcp .hero-ctas .btn{ flex:1 1 0; }

.mcp .compat-strip{ display:flex; align-items:center; gap:var(--sp-md); flex-wrap:wrap; }
.mcp .compat-label{ font-size:12px; color:var(--text-muted); }
.mcp .compat-chip{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px;
  border:1px solid var(--hairline); border-radius:var(--r-pill); background:var(--surface);
  font-size:13px; color:var(--text-body); font-weight:500;
}
.mcp .compat-chip .icon{ width:16px; height:16px; color:var(--text-muted); }
/* Logos de marca en los chips: <img> para conservar sus colores propios */
.mcp .compat-chip .chip-logo{ width:16px; height:16px; object-fit:contain; }
.mcp .compat-note{ width:100%; font-size:12px; color:var(--text-muted); margin-top:2px; }

/* hero mock chat card */
/* Tilt 3D de la card: inclinada en reposo, se endereza al hover.
   Va en el wrapper (no en la card) para no pisar el transform del reveal. */
.mcp .hero-visual{
  position:relative; display:flex;
  transform: perspective(1400px) rotateY(-14deg) rotateX(5deg);
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.mcp .hero-visual:hover{ transform: perspective(1400px) rotateY(0deg) rotateX(0deg); }
@media (max-width:900px){ .mcp .hero-visual{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .mcp .hero-visual{ transition:none; } }
.mcp .chat-card{
  background:linear-gradient(140deg, #A487E6 0%, #82C4E9 100%);
  border-radius:var(--r-lg); box-shadow:var(--shadow-4);
  padding:var(--sp-lg); position:relative; z-index:1;
  flex:1; display:flex; flex-direction:column;
}
/* Header de la card: logo MCP blanco + título (MCP en bold) */
.mcp .chat-card-head{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:var(--sp-xxl); }
.mcp .chat-card-logo{ width:44px; height:44px; display:block; flex-shrink:0; }
.mcp .chat-card-title{ font-size:22px; line-height:1; color:#fff; font-weight:400; letter-spacing:.2px; }
.mcp .chat-card-title strong{ font-weight:700; }
.mcp .chat-row{ display:flex; gap:10px; margin-bottom:var(--sp-md); align-items:flex-start; }
.mcp .chat-row:last-child{ margin-bottom:0; }
/* Avatares: SVG autocontenidos (traen su propio círculo), sin fondo extra */
.mcp .chat-avatar{ width:44px; height:44px; flex-shrink:0; display:block; }
.mcp .chat-bubble{ border-radius:var(--r-md); padding:10px 14px; font-size:13.5px; color:#1A1A1A; max-width:100%; }
.mcp .chat-row.user .chat-bubble{ background:rgba(255,255,255,.72); }
.mcp .chat-row.ai .chat-bubble{ background:#fff; }
.mcp .chat-stat{ display:flex; align-items:baseline; gap:8px; margin-top:8px; padding-top:8px; border-top:1px dashed rgba(0,0,0,.15); }
.mcp .chat-stat b{ font-family:var(--font-body); font-variant-numeric:tabular-nums; font-size:20px; font-weight:700; color:#1A1A1A; }
.mcp .chat-stat .delta{ display:inline-flex; align-items:center; gap:2px; color:#5FA800; font-size:13px; font-weight:500; }
.mcp .chat-stat .delta .icon{ width:13px; height:13px; }

/* ---------- Problem ---------- */
/* Gris más oscuro: es la sección que sigue al hero, para que el hero despegue */
.mcp .problem{ background:var(--canvas-alt); position:relative; }
/* Costura suave hero(navy) → Problema(gris), en el arranque de la sección (bajo el fold) */
.mcp .problem::before{ content:''; position:absolute; top:0; left:0; right:0; height:120px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, var(--ink-900) 0%, var(--canvas-alt) 100%); }
.mcp .problem .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:0.85fr 1.15fr; column-gap:var(--sp-xxl); row-gap:var(--sp-md); align-items:center; }
@media (max-width:900px){ .mcp .problem .wrap{ grid-template-columns:1fr; } }
/* Bajada más angosta en desktop → más aire entre el bloque de texto y el gráfico */
@media (min-width:901px){ .mcp .problem .lede{ max-width:34ch; } }

/* Cruces rojas: fila full-width abajo (no respeta columnas), dentro de un
   contenedor con borde (radius 8, sin fondo), pegado al gráfico de arriba */
.mcp .problem .bullet-list{
  grid-column:1 / -1; list-style:none; margin:0;
  background:#E4E4E4; border:1px solid rgba(0,0,0,.14); border-radius:var(--r-sm); padding:var(--sp-lg);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-lg);
}
.mcp .problem .bullet-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--text-body); }
.mcp .problem .bullet-list .cmp-ic{ width:16px; height:16px; margin-top:1px; flex-shrink:0; }
@media (max-width:760px){ .mcp .problem .bullet-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .mcp .problem .bullet-list{ grid-template-columns:1fr; } }

/* ---------- Cycle diagram (la rutina que se repite) ---------- */
.mcp .loop-diagram{ text-align:center; }
.mcp .cycle{ position:relative; width:100%; max-width:440px; margin:0 auto var(--sp-md); aspect-ratio:1; }
.mcp .cycle-ring{
  position:absolute; top:50%; left:50%; width:48%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%;
  background:conic-gradient(from 135deg, #16B8A6, #3B82F6, #7C3AED, #A855F7, #16B8A6);
  -webkit-mask:radial-gradient(circle, #0000 60%, #000 62%);
          mask:radial-gradient(circle, #0000 60%, #000 62%);
}
.mcp .cycle-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:29%; aspect-ratio:1; border-radius:50%; background:#fff; box-shadow:var(--shadow-4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px;
}
.mcp .cycle-center .icon{ width:24px; height:24px; color:#1A1A1A; }
.mcp .cycle-center span{ font-family:var(--font-body); font-weight:700; font-size:13px; line-height:1.15; color:#1A1A1A; }
.mcp .cycle-node{
  position:absolute; width:13%; aspect-ratio:1; border-radius:50%; background:#fff;
  box-shadow:var(--shadow-1); display:flex; align-items:center; justify-content:center;
  transform:translate(-50%,-50%); z-index:2;
}
.mcp .cycle-node .icon{ width:46%; height:46%; stroke-width:2; }
.mcp .cycle-node.n-export{ left:50%; top:26%; border:2px solid #3B82F6; }
.mcp .cycle-node.n-export .icon{ color:#3B82F6; }
.mcp .cycle-node.n-consolidar{ left:74%; top:50%; border:2px solid #7C3AED; }
.mcp .cycle-node.n-consolidar .icon{ color:#7C3AED; }
.mcp .cycle-node.n-analizar{ left:50%; top:74%; border:2px solid #A855F7; }
.mcp .cycle-node.n-analizar .icon{ color:#A855F7; }
.mcp .cycle-node.n-decidir{ left:26%; top:50%; border:2px solid #16B8A6; }
.mcp .cycle-node.n-decidir .icon{ color:#16B8A6; }
.mcp .cycle-label{ position:absolute; font-size:14px; line-height:1.35; }
.mcp .cycle-label b{
  display:inline-block; white-space:nowrap; font-weight:700; margin-bottom:8px;
  color:#fff; padding:3px 12px; border-radius:var(--r-pill); font-size:14px;
}
.mcp .cycle-label span{ display:block; color:var(--text-muted); font-size:14px; }
.mcp .cycle-label.l-export{ top:13%; left:58%; text-align:left; max-width:42%; }
.mcp .cycle-label.l-consolidar{ top:50%; left:83%; transform:translateY(-50%); text-align:left; max-width:32%; }
.mcp .cycle-label.l-analizar{ top:88%; left:50%; transform:translateX(-50%); text-align:center; max-width:70%; }
.mcp .cycle-label.l-decidir{ top:50%; right:83%; transform:translateY(-50%); text-align:right; max-width:48%; }
.mcp .cycle-label.l-export b{ background:#3B82F6; }
.mcp .cycle-label.l-consolidar b{ background:#7C3AED; }
.mcp .cycle-label.l-analizar b{ background:#A855F7; }
.mcp .cycle-label.l-decidir b{ background:#16B8A6; }
/* Analizar: 1 línea en desktop (el texto es más largo pero hay lugar abajo) */
@media (min-width:901px){ .mcp .cycle-label.l-analizar span{ white-space:nowrap; } }
/* Consolidar / Decidir tarde: exactamente 2 líneas (el <br> es el único corte) */
.mcp .cycle-label.l-consolidar span, .mcp .cycle-label.l-decidir span{ white-space:nowrap; }
.mcp .loop-caption{ font-size:12px; color:var(--text-muted); font-weight:700; }

/* ---------- What is MCP — flow ---------- */
.mcp .flow{ display:flex; align-items:center; gap:var(--sp-md); margin:var(--sp-xl) 0; }
@media (max-width:760px){ .mcp .flow{ flex-direction:column; } }
.mcp .flow-node{
  flex:1; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:var(--sp-lg); text-align:center; box-shadow:var(--shadow-1);
}
.mcp .flow-node.center{ border:none; background:var(--grad-brand); color:#fff; padding:44px 36px; flex:1.2; }
.mcp .flow-node.center .flow-icon{ background:rgba(255,255,255,.18); color:#fff; }
.mcp .flow-node.center h3{ color:#fff; font-size:19px; }
.mcp .flow-node.center p{ color:rgba(255,255,255,.9); margin-top:14px; }
.mcp .flow-icon{
  width:44px; height:44px; border-radius:var(--r-md); background:var(--canvas); color:var(--primary-dark);
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-sm);
}
.mcp .flow-node p{ font-size:13px; color:var(--text-muted); margin-top:4px; }
/* Logo MCP en la card central (reemplaza el ícono) */
.mcp .flow-logo{ width:88px; height:auto; display:block; margin:0 auto var(--sp-sm); }
/* Ícono inline (16px) antes del texto, en la misma línea */
.mcp .flow-node .p-icon{ display:inline-block; width:16px; height:16px; vertical-align:-3px; margin-right:6px; }
.mcp .flow-arrow{ color:var(--text-muted); flex-shrink:0; }
@media (max-width:760px){ .mcp .flow-arrow{ transform:rotate(90deg); } }

/* ---------- How it works ---------- */
.mcp .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin-top:var(--sp-xl); }
@media (max-width:900px){ .mcp .steps{ grid-template-columns:1fr; gap:var(--sp-lg); } }
.mcp .step{ position:relative; padding:0 var(--sp-md); text-align:center; }
.mcp .step-num{
  width:80px; height:80px; border-radius:50%; background:var(--grad-ia); color:#fff;
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-md);
}
.mcp .step-num .step-ic{ width:44px; height:44px; fill:#fff; }
.mcp .step h3{ margin-bottom:6px; }
.mcp .step p{ font-size:13.5px; color:var(--text-muted); }
@media (min-width:901px){
  .mcp .steps::before{
    content:''; position:absolute; top:40px; left:12.5%; right:12.5%; height:2px;
    background:linear-gradient(90deg, var(--hairline), var(--hairline));
    z-index:0;
  }
}

/* ---------- Prompt cards ---------- */
.mcp .segment-toggle-label{
  font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--text-muted);
  margin:var(--sp-md) 0 var(--sp-sm);
}
.mcp .segment-toggle{
  display:inline-flex; gap:4px; padding:4px; background:var(--canvas); border:1px solid var(--hairline);
  border-radius:var(--r-pill);
}
.mcp .segment-toggle button{
  border:none; background:transparent; padding:10px 24px; border-radius:var(--r-pill);
  font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--text-muted);
  cursor:pointer; transition:background-color .15s ease, color .15s ease;
}
.mcp .segment-toggle button.active{ background:var(--grad-ia); color:#fff; }
.mcp .prompt-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-md); margin-top:var(--sp-xl); }
@media (max-width:760px){ .mcp .prompt-grid{ grid-template-columns:1fr; } }
.mcp .prompt-card{
  background:#fff; border:1.5px solid rgba(150,38,248,.5); border-radius:var(--r-md);
  padding:var(--sp-md) var(--sp-lg); display:flex; gap:14px; align-items:center; box-shadow:var(--shadow-1);
}
.mcp .prompt-ic{ width:26px; height:26px; flex-shrink:0; fill:#9626F8; }
.mcp .prompt-card p{ font-size:15px; color:#1A1A1A; }

/* ---------- Compare table ---------- */
.mcp .compare-table{ margin-top:var(--sp-xl); border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.mcp .compare-row{ display:grid; grid-template-columns:1fr 1fr; }
.mcp .compare-row + .compare-row{ border-top:1px solid var(--hairline); }
.mcp .compare-head{ font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.6px; text-transform:uppercase; padding:14px var(--sp-lg); }
.mcp .compare-head.antes{ color:var(--text-muted); }
.mcp .compare-head.ahora{ color:var(--primary-dark); background:rgba(61,169,254,.06); }
.mcp .compare-cell{ padding:16px var(--sp-lg); font-size:14px; display:flex; align-items:flex-start; gap:10px; }
.mcp .compare-cell.antes{ color:var(--text-muted); }
.mcp .compare-cell.ahora{ color:var(--text-body); background:rgba(61,169,254,.04); font-weight:500; }
.mcp .compare-cell .icon{ width:16px; height:16px; margin-top:2px; flex-shrink:0; }
.mcp .compare-cell .cmp-ic{ width:18px; height:18px; margin-top:1px; flex-shrink:0; }
.mcp .compare-cell.antes .icon{ color:var(--negative); }
.mcp .compare-cell.ahora .icon{ color:var(--positive); }
@media (max-width:640px){ .mcp .compare-row{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.mcp .faq-list{ margin-top:var(--sp-xl); display:grid; gap:10px; }
.mcp .faq-item{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden; transition:border-color .15s ease; }
.mcp .faq-item:hover{ border-color:rgba(61,169,254,.4); }
.mcp .faq-item summary{
  list-style:none; cursor:pointer; padding:var(--sp-md) var(--sp-lg); display:flex; align-items:center; justify-content:space-between;
  font-size:14.5px; font-weight:500; color:var(--text-title); gap:var(--sp-md);
  transition:background-color .15s ease;
}
.mcp .faq-item summary:hover{ background:rgba(61,169,254,.05); }
.mcp .faq-item summary::-webkit-details-marker{ display:none; }
.mcp .faq-item summary .icon{ transition:transform .18s ease, color .15s ease; color:var(--text-muted); }
.mcp .faq-item summary:hover .icon{ color:var(--primary-dark); }
.mcp .faq-item[open] summary .icon{ transform:rotate(180deg); }
.mcp .faq-item .faq-body{ padding:0 var(--sp-lg) var(--sp-lg); font-size:14px; color:var(--text-body); max-width:70ch; }

/* ---------- Final CTA ---------- */
.mcp .final-cta{ background:var(--grad-brand); text-align:center; padding:var(--sp-xxxl) 0; }
.mcp .final-cta h2{ color:#fff; margin-bottom:var(--sp-sm); }
/* bajada del cierre: sin tope de 60ch → 1 línea en desktop (la limita .wrap),
   y en tablet/mobile envuelve sola al angostarse el contenedor */
.mcp .final-cta .lede{ color:rgba(255,255,255,.9); max-width:none; margin:0 auto var(--sp-xl); }

/* ---------- Scroll reveal (appear in view) ----------
   Solo activo si <html> tiene .js-reveal (lo agrega el head si hay IntersectionObserver).
   Sin JS/soporte, todo queda visible. .reveal = un elemento; .reveal-group = cascada de hijos. */
.js-reveal .mcp .reveal,
.js-reveal .mcp .reveal-group > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.js-reveal .mcp .reveal.is-visible,
.js-reveal .mcp .reveal-group.is-visible > *{ opacity:1; transform:none; }
.js-reveal .mcp .reveal.d2{ transition-delay:.12s; }
.js-reveal .mcp .reveal-group.is-visible > *:nth-child(2){ transition-delay:.07s; }
.js-reveal .mcp .reveal-group.is-visible > *:nth-child(3){ transition-delay:.14s; }
.js-reveal .mcp .reveal-group.is-visible > *:nth-child(4){ transition-delay:.21s; }
.js-reveal .mcp .reveal-group.is-visible > *:nth-child(5){ transition-delay:.28s; }
@media (prefers-reduced-motion: reduce){
  .js-reveal .mcp .reveal,
  .js-reveal .mcp .reveal-group > *{ opacity:1 !important; transform:none !important; transition:none !important; }
}