/* =========================================================
   Roble Sistemas SRL - Microsoft-like (Azure vibe)
========================================================= */

:root{
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --bg: #ffffff;
  --surface: rgba(255,255,255,.70);
  --surface-solid: #ffffff;

  --text: #0b1220;
  --muted: #4b5565;
  --muted-2: #64748b;

  --border: rgba(15, 23, 42, 0.10);
  --shadow: 0 14px 34px rgba(2, 6, 23, 0.08);

  /* ✅ Microsoft blue / azure */
  --accent: #0ea5e9;       /* sky-500 */
  --accent-2: #2563eb;     /* blue-600 */
  --accent-soft: rgba(14,165,233,.14);

  --container: 1120px;
  --radius: 18px;
  --radius-sm: 14px;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 72px;

  --focus: 0 0 0 4px rgba(14,165,233,.22);
}

html{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

body{ line-height: 1.55; }

.container{
  width: min(var(--container), calc(100% - 32px));
  margin-inline: auto;
}

.section{ padding: var(--space-7) 0; }

.section-soft{
  background:
    radial-gradient(900px 340px at 20% 0%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(900px 340px at 80% 10%, rgba(14,165,233,.10), transparent 60%),
    linear-gradient(to bottom, rgba(2,6,23,.02), rgba(2,6,23,0));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

h1{
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.07;
  letter-spacing: -0.03em;
  font-weight: 750;
}

h2{
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: var(--space-4);
}

h3{
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin-bottom: var(--space-1);
}

p{ color: var(--muted); }

a:focus-visible, button:focus-visible{
  outline: none;
  box-shadow: var(--focus);
  border-radius: 12px;
}

/* =========================================================
   Header / Nav
========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-3);
  padding: 14px 0;
}

.logo img{ height: 74px; width:auto; }

.main-nav ul{
  display:flex;
  align-items:center;
  gap: 18px;
}

.main-nav a{
  font-size: 14px;
  color: rgba(15,23,42,.78);
  padding: 10px 10px;
  border-radius: 12px;
  transition: background 160ms ease, color 160ms ease;
}

.main-nav a:hover{
  background: rgba(2,6,23,.04);
  color: rgba(15,23,42,.92);
}

/* =========================================================
   Buttons
========================================================= */
.btn-primary,.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 650;
  font-size: 14px;
  border: 1px solid transparent;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
  user-select:none;
}

.btn-primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#fff;
  box-shadow: 0 14px 28px rgba(37,99,235,.18);
}

.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(37,99,235,.22);
}

.btn-secondary{
  background: rgba(255,255,255,.65);
  color: rgba(15,23,42,.86);
  border-color: var(--border);
}

.btn-secondary:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.92);
}

/* =========================================================
   Hero
========================================================= */
.hero{
  padding: calc(var(--space-7) - 12px) 0 var(--space-7);
  background:
    radial-gradient(1200px 420px at 20% 0%, rgba(37,99,235,.10), transparent 62%),
    radial-gradient(900px 340px at 80% 10%, rgba(14,165,233,.12), transparent 60%),
    linear-gradient(to bottom, rgba(2,6,23,.02), rgba(2,6,23,0));
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  align-items: center;
}

.kicker{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
  margin-bottom: 10px;
}

.hero-lead{
  font-size: 16px;
  margin-top: var(--space-3);
  max-width: 58ch;
}

.hero-actions{
  margin-top: var(--space-4);
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* badges */
.hero-badges{
  margin-top: var(--space-4);
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.badge{
  font-size: 12px;
  font-weight: 650;
  color: rgba(15,23,42,.78);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.62);
  padding: 8px 12px;
  border-radius: 999px;
}

/* =========================================================
   Manifest Card (derecha)
========================================================= */
.manifest-card{
  position: relative;
  border-radius: 26px;
  padding: 18px 18px 16px;
  border: 6px solid rgb(236 240 249);
  box-shadow: var(--shadow);
  overflow: visible; /* ✅ permite que el robot grande salga */
}

.manifest-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 26px;
  pointer-events:none;
  background-color: #fff,transparent 60%;
  mask: linear-gradient(#000, transparent 70%);
  opacity: .95;
}

.manifest-hero{
  position: relative;
  border-radius: 20px;
  overflow:hidden;

  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 26px rgba(2,6,23,.07);
  padding: 18px 14px 10px;
  min-height: 210px;
}

.manifest-hero-img{
  position:absolute;
  width: 50%;
  height: auto;
  right: 0px;
  transform: translateZ(0);
  image-rendering: auto;
}

/* Pills */
.manifest-top{
  display:flex;
  gap: 10px;
  margin-top: 14px;
}

.pill{
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(14,165,233,.28);
  background: rgba(14,165,233,.10);
  color: rgba(15,23,42,.82);
}

.pill.ghost{
  border-color: rgba(15,23,42,.10);
  background: rgba(255,255,255,.62);
  color: rgba(15,23,42,.70);
}

.manifest-title{
  margin: 14px 0 8px;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.92);
}

.manifest-text{
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 12px;
}

/* List mini cards */
.manifest-list{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}

.mini{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.68);
  border-radius: 16px;
  padding: 12px 12px;
}

.mini-k{
  font-size: 13px;
  font-weight: 750;
  color: rgba(15,23,42,.86);
}

.mini-v{
  margin-top: 3px;
  font-size: 13px;
  color: rgba(71,85,105,.92);
}

/* ERP highlight */
.manifest-erp{
  margin-top: 12px;
  border-radius: 18px;
  padding: 12px 12px;
  border: 1px solid rgba(37,99,235,.18);
  background: linear-gradient(180deg, rgba(37,99,235,.10), rgba(14,165,233,.08));
}

.erp-title{
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,.90);
}

.erp-text{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(71,85,105,.92);
}

.manifest-cta{
  display:inline-flex;
  margin-top: 12px;
  font-weight: 750;
  color: rgba(37,99,235,.92);
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 12px;
}

.manifest-cta:hover{
  background: rgba(37,99,235,.08);
}

/* =========================================================
   ✅ Robot overlay (lado) - FIX definitivo
   Anclado a la CARD, no al grid. Así no se “desacomoda”.
========================================================= */
.hero-robot-overlay{
  position:absolute;
  z-index: 6;
  pointer-events:none;
  user-select:none;

  /* ✅ sale hacia la izquierda, pero controlado */
  left: clamp(-220px, -18vw, -120px);

  /* ✅ centrado vertical respecto a la card */
  top: 50%;
  transform: translateY(-50%);

  /* ✅ tamaño consistente */
  width: clamp(420px, 46vw, 660px);
  height: auto;

  filter: drop-shadow(0 22px 40px rgba(2,6,23,.16));
}

/* =========================================================
   Cards / Products
========================================================= */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.card{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 10px 24px rgba(2,6,23,.05);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 34px rgba(2,6,23,.08);
}

.card p{ color: var(--muted-2); font-size: 14px; }

/* =========================================================
   Features list
========================================================= */
.features{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: var(--space-4);
  padding: 0;
}

.features li{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.62);
  color: rgba(15,23,42,.82);
  font-weight: 650;
  font-size: 14px;
  position: relative;
  padding-left: 40px;
}

.features li::before{
  content:"";
  position:absolute;
  left: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(14,165,233,.14);
  border: 1px solid rgba(14,165,233,.26);
  box-shadow: 0 10px 18px rgba(14,165,233,.10);
}

/* =========================================================
   Footer
========================================================= */
.site-footer{
  border-top: 1px solid var(--border);
  background: linear-gradient(to bottom, rgba(2,6,23,.02), rgba(2,6,23,0));
  padding: var(--space-6) 0 var(--space-4);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-5);
  align-items:start;
}

.site-footer h4{
  margin-bottom: 10px;
  font-size: 14px;
  color: rgba(15,23,42,.85);
}

.site-footer p, .site-footer a{
  font-size: 14px;
  color: var(--muted);
}

.site-footer a:hover{
  color: rgba(15,23,42,.92);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bottom{
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  text-align:center;
  font-size: 13px;
  color: rgba(71,85,105,.85);
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }

  /* ✅ el robot grande pasa arriba/detrás suave */
  .hero-robot-overlay{
    left: 50%;
    top: -26px;
    transform: translateX(-50%);
    width: min(520px, 92vw);
    opacity: .28;
    z-index: 1;
    filter: drop-shadow(0 16px 26px rgba(2,6,23,.12));
  }

  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr; }

  .main-nav{ display:none; }
}

@media (max-width: 560px){
  .cards-grid{ grid-template-columns: 1fr; }
  .features{ grid-template-columns: 1fr; }
  .btn-primary,.btn-secondary{ width: 100%; }
}








.hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(56,189,248,.18), transparent 62%),
    radial-gradient(820px 520px at 75% 10%, rgba(37,99,235,.16), transparent 62%),
    linear-gradient(to bottom, rgba(2,6,23,.02), rgba(2,6,23,0));
}

/* Grid ultra sutil */
.hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .16;
  mask-image: radial-gradient(70% 60% at 30% 30%, #000 0%, transparent 70%);
  pointer-events:none;
}

/* Noise fino para sacar el “plano” */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity: .06;
  mix-blend-mode: soft-light;
  pointer-events:none;
}
.hero-brand{
  position: relative;
}

.hero-brand::before{
  content:"";
  position:absolute;
  left: 18%;
  top: 18%;
  width: 72%;
  height: 72%;
  background: radial-gradient(circle, rgba(56,189,248,.28), transparent 60%);
  filter: blur(22px);
  z-index: 0;
}

.hero-brand-img{
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 22px 50px rgba(2,6,23,.18));
}
:root{
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Manrope", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

h1,h2{
  font-family: var(--font-display);
  letter-spacing: -0.04em;
}
.hero-title{
  margin: 0;
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 800;
  font-size: clamp(36px, 4.8vw, 62px);
}

.hero-title .line-1,
.hero-title .line-2{
  display: block;
}

.hero-title .line-2{
  margin-top: 10px;
  font-weight: 750;
  font-size: clamp(26px, 3.2vw, 44px);
  letter-spacing: -0.03em;
}

/* azul/celeste “Microsoft” */
.hero-title .accent{
  background: linear-gradient(90deg, #1d4ed8, #38bdf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-title .vos{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(56, 189, 248, .16);
  border: 1px solid rgba(56, 189, 248, .28);
  box-shadow: 0 10px 22px rgba(29, 78, 216, .10);
  transform: translateY(-2px);
}

.hero-title .strong{
  text-decoration: underline;
  text-decoration-thickness: 6px;
  text-underline-offset: 8px;
  text-decoration-color: rgba(56, 189, 248, .35);
}
.manifest-title{
  margin: 8px 0 10px;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: rgba(15,23,42,.94);
}

.manifest-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(71,85,105,.92);
  max-width: 52ch;
}

/* opcional: resaltar palabras clave */
.manifest-text strong{
  color: rgba(15,23,42,.92);
  font-weight: 700;
}



/* =========================================================
   ERP Inteligente (Sección Premium)
========================================================= */

:root{
  /* Microsoft-like blue/cyan */
  --accent: #2563eb;      /* blue-600 */
  --accent-2: #0ea5e9;    /* sky-500 */
  --accent-soft: rgba(37, 99, 235, 0.12);
  --focus: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

.section-soft{
  background:
    radial-gradient(900px 340px at 20% 0%, rgba(37, 99, 235, 0.10), transparent 60%),
    radial-gradient(900px 340px at 80% 10%, rgba(14, 165, 233, 0.10), transparent 60%),
    linear-gradient(to bottom, rgba(2, 6, 23, 0.02), rgba(2, 6, 23, 0.00));
}

/* Layout */
.erp-section{
  position: relative;
  overflow: hidden;
}

.erp-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  align-items: start;
}

.erp-copy .kicker{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.55);
  margin-bottom: 10px;
}

.erp-h2{
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--text);
}

.erp-h2 .accent{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.erp-lead{
  font-size: 16px;
  color: rgba(71, 85, 105, 0.92);
  max-width: 62ch;
}

.erp-quote{
  margin-top: 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.06);
  padding: 16px 16px;
}

.erp-quote-title{
  font-size: 13px;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.78);
  margin-bottom: 6px;
}

.erp-quote-body{
  color: rgba(71, 85, 105, 0.92);
  font-size: 14px;
  line-height: 1.5;
}

.erp-bullets{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}

.erp-bullets li{
  position: relative;
  padding-left: 34px;
  color: rgba(15, 23, 42, 0.78);
  font-size: 14px;
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  padding: 12px 12px 12px 40px;
}

.erp-bullets li::before{
  content:"";
  position:absolute;
  left: 14px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(37, 99, 235, 0.26);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.erp-actions{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Panel derecha */
.erp-panel{
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.08);
  padding: 18px;
}

.erp-panel-top{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.erp-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.erp-robust{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.08), rgba(14, 165, 233, 0.06));
  padding: 14px;
}

.erp-robust-title{
  font-weight: 900;
  font-size: 13px;
  color: rgba(15,23,42,0.80);
  margin-bottom: 6px;
}

.erp-robust-text{
  font-size: 13.5px;
  color: rgba(71, 85, 105, 0.94);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 980px){
  .erp-grid{
    grid-template-columns: 1fr;
  }
  .erp-actions .btn-primary,
  .erp-actions .btn-secondary{
    width: 100%;
  }
}


/* ===== ERP Showcase (imagen + copy con impacto) ===== */
.erp-showcase{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: center;

  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
  overflow: hidden;
}

.erp-visual{
  position: relative;
  border-radius: 16px;
  overflow: hidden;

  background:
    radial-gradient(900px 380px at 10% 15%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(700px 360px at 85% 40%, rgba(37,99,235,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.35));
  border: 1px solid rgba(2,6,23,.08);
}

.erp-visual-img{
  width: 100%;
  height: auto;
  display: block;
  transform: translateZ(0);
  filter: drop-shadow(0 18px 26px rgba(2,6,23,.10));
}

.erp-copy{
  border-radius: 16px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(255,255,255,.78);
}

.erp-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.18);
  background: rgba(56,189,248,.14);
  color: rgba(15,23,42,.78);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.erp-headline{
  margin: 10px 0 8px;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.95);
}

.erp-accent{
  color: #2563eb; /* azul microsoft */
}

.erp-desc{
  margin: 0 0 12px;
  font-size: 14px;
  color: rgba(71,85,105,.95);
}

.erp-points{
  list-style: none;
  padding: 0;
  margin: 0 0 12px;

  display: grid;
  gap: 10px;
}

.erp-points li{
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;

  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(255,255,255,.70);
  color: rgba(15,23,42,.82);
  font-size: 13.5px;
}

.erp-points .dot{
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border-radius: 999px;
  background: rgba(37,99,235,.18);
  border: 1px solid rgba(37,99,235,.35);
  box-shadow: 0 10px 18px rgba(37,99,235,.10);
}

.erp-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 12px;
}

.erp-link:hover{
  background: rgba(37,99,235,.08);
}

/* Responsive */
@media (max-width: 980px){
  .erp-showcase{
    grid-template-columns: 1fr;
  }
  .erp-copy{
    padding: 14px;
  }
}
.erp-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.erp-card{
  display:flex;
  gap: 14px;
  align-items:flex-start;

  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  padding: 16px;

  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.erp-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.9);
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.08);
}

.erp-card-icon{
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.12));
}

.erp-card-body{
  min-width: 0;
}

.erp-card-k{
  font-weight: 750;
  letter-spacing: -0.01em;
  color: rgba(15, 23, 42, 0.92);
  font-size: 15px;
  line-height: 1.15;
}

.erp-card-v{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(71, 85, 105, 0.95);
}

/* Responsive */
@media (max-width: 720px){
  .erp-cards{ grid-template-columns: 1fr; }
  .erp-card-icon{ width: 52px; height: 52px; flex-basis: 52px; }
}

.company-grid {
  display: grid;
  gap: 64px;
}

.company-content h2 {
  font-size: 2.4rem;
  margin-bottom: 24px;
}

.company-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 32px;
}

.company-content h3 {
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.company-offices h3,
.company-contact h3 {
  margin-bottom: 20px;
}

.offices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.office-card {
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  text-align: center;
}

.office-card img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  margin-bottom: 12px;
}

.office-info h4 {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.office-info p {
  font-size: 0.9rem;
  color: #555;
}

.contact-list {
  list-style: none;
  padding: 0;
}

.contact-list li {
  margin-bottom: 8px;
  font-size: 0.95rem;
}
/* =========================
   Empresa (mejorada)
========================= */

.company {
  display: grid;
  gap: 34px;
}

.company-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

.company-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.company-logo {
  width: 110px;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.06));
}

.company-kicker {
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(15, 23, 42, .55);
  margin: 0 0 6px;
}

.company-title {
  margin: 0;
}

.company-subtitle {
  margin: 10px 0 0;
  max-width: 62ch;
  color: rgba(71, 85, 105, .92);
}

.company-highlights {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.chip {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 10px 12px;
  min-width: 92px;
  box-shadow: 0 10px 24px rgba(2,6,23,.05);
}

.chip-k {
  font-size: 12px;
  color: rgba(71, 85, 105, .9);
}

.chip-v {
  font-weight: 750;
  letter-spacing: -0.01em;
  color: rgba(15, 23, 42, .92);
}

.company-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items: start;
}

.company-lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(71, 85, 105, .95);
}

.company-cards {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.company-card {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 16px 16px;
  box-shadow: 0 10px 24px rgba(2,6,23,.05);
}

.company-card h3 {
  margin: 0 0 8px;
}

.company-card p {
  margin: 0;
  color: rgba(71, 85, 105, .92);
}

.company-aside {
  position: relative;
}

.company-contact-card {
  background:
    radial-gradient(600px 260px at 20% 0%, rgba(0, 120, 212, 0.10), transparent 60%),
    rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 16px 34px rgba(2,6,23,.07);
}

.company-contact-card h3 {
  margin: 0 0 12px;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.contact-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.72);
}

.contact-list li span {
  font-size: 12px;
  color: rgba(71,85,105,.9);
}

.company-contact-cta {
  margin-top: 14px;
  width: 100%;
  justify-content: center;
}

/* Oficinas */
.company-offices {
  margin-top: 6px;
  display: grid;
  gap: 14px;
}

.company-offices-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.company-offices-head p {
  margin: 0;
  color: rgba(71,85,105,.9);
}

.offices-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.office-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.office-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 36px rgba(2,6,23,.10);
}

.office-card img {
  width: 100%;
  height: 190px;
  object-fit: contain;
  display: block;
  margin-bottom: 10px;
}

.office-info h4 {
  margin: 0 0 6px;
}

.office-info p {
  margin: 0;
  color: rgba(71,85,105,.92);
  font-size: 14px;
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 980px) {
  .company-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .company-grid {
    grid-template-columns: 1fr;
  }

  .company-highlights {
    justify-content: flex-start;
  }

  .offices-grid {
    grid-template-columns: 1fr;
  }

  .office-card img {
    height: 210px;
  }
}
/* =========================================================
   FaceVision (Sección Premium)
========================================================= */

.fv-section{ position: relative; overflow: hidden; }

.fv-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  align-items: start;
}

.fv-h2{
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--text);
}

.fv-h2 .accent{
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fv-lead{
  font-size: 16px;
  color: rgba(71, 85, 105, 0.92);
  max-width: 62ch;
}

.fv-points{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}

.fv-points li{
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;

  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,0.08);
  background: rgba(255,255,255,0.70);
  color: rgba(15,23,42,0.82);
  font-size: 13.5px;
}

.fv-points .dot{
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border-radius: 999px;
  background: rgba(14,165,233,0.18);
  border: 1px solid rgba(14,165,233,0.35);
  box-shadow: 0 10px 18px rgba(14,165,233,0.10);
}

.fv-ctas{
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(15,23,42,0.12);
}

.btn.primary{
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  color: white;
  border-color: rgba(14,165,233,0.25);
  box-shadow: 0 14px 34px rgba(2,6,23,0.12);
}

.btn.ghost{
  background: rgba(255,255,255,0.75);
  color: rgba(15,23,42,0.88);
}

.btn:hover{ transform: translateY(-1px); }

.fv-mini{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fv-mini .mini{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 10px 24px rgba(2,6,23,0.06);
}

.fv-mini .mini-k{
  font-weight: 850;
  color: rgba(15,23,42,0.84);
  font-size: 13px;
  margin-bottom: 4px;
}

.fv-mini .mini-v{
  color: rgba(71,85,105,0.92);
  font-size: 13px;
  line-height: 1.4;
}

.fv-panel{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(2,6,23,0.08);
  padding: 16px;
}

.fv-panel-top{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.fv-hero{
  display: grid;
  place-items: center;
  padding: 8px 6px 2px;
}

.fv-hero-img{
  width: min(420px, 100%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,0.12));
}

.fv-steps{
  margin-top: 12px;
  border-top: 1px solid rgba(15,23,42,0.08);
  padding-top: 12px;
}

.fv-steps-title{
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,0.86);
  font-size: 13px;
  margin-bottom: 10px;
}

.fv-steps-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.fv-steps-list li{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,0.08);
  background: rgba(255,255,255,0.70);
}

.fv-steps-list .n{
  font-weight: 950;
  font-size: 12px;
  color: rgba(37,99,235,0.88);
}

.fv-steps-list .t{
  font-size: 13.5px;
  color: rgba(15,23,42,0.82);
}

.fv-dev{
  margin-top: 12px;
  border-top: 1px solid rgba(15,23,42,0.08);
  padding-top: 12px;
}

.fv-dev-title{
  font-weight: 900;
  color: rgba(15,23,42,0.86);
  font-size: 13px;
  margin-bottom: 8px;
}

.fv-code{
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,0.10);
  background: rgba(2,6,23,0.03);
  overflow: auto;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(15,23,42,0.88);
}

.fv-dev-foot{
  margin-top: 8px;
  font-size: 12.5px;
  color: rgba(71,85,105,0.92);
}

@media (max-width: 980px){
  .fv-grid{ grid-template-columns: 1fr; }
  .fv-mini{ grid-template-columns: 1fr; }
}









/* =========================================================
   Asistentes Inteligentes (Sección Premium)
   Pegar al final de main.css
========================================================= */

.ai-section { position: relative; overflow: hidden; }

.ai-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  align-items: start;
}

.ai-h2{
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--text);
}

.ai-h2 .accent{
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ai-lead{
  font-size: 16px;
  color: rgba(71, 85, 105, 0.92);
  max-width: 64ch;
}

.ai-points{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}

.ai-points li{
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;

  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,0.08);
  background: rgba(255,255,255,0.70);
  color: rgba(15,23,42,0.82);
  font-size: 13.5px;
}

.ai-points .dot{
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border-radius: 999px;
  background: rgba(14,165,233,0.18);
  border: 1px solid rgba(14,165,233,0.35);
  box-shadow: 0 10px 18px rgba(14,165,233,0.10);
}

.ai-ctas{
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* Botones (por si no existen globalmente) */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(15,23,42,0.12);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn.primary{
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  color: #fff;
  border-color: rgba(14,165,233,0.25);
  box-shadow: 0 14px 34px rgba(2,6,23,0.12);
}

.btn.ghost{
  background: rgba(255,255,255,0.75);
  color: rgba(15,23,42,0.88);
}

.btn:hover{ transform: translateY(-1px); }

.ai-mini{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ai-mini .mini{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 10px 24px rgba(2,6,23,0.06);
}

.ai-mini .mini-k{
  font-weight: 850;
  color: rgba(15,23,42,0.84);
  font-size: 13px;
  margin-bottom: 4px;
}

.ai-mini .mini-v{
  color: rgba(71,85,105,0.92);
  font-size: 13px;
  line-height: 1.4;
}

/* Panel derecho */
.ai-panel{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(2,6,23,0.08);
  padding: 16px;
}

.ai-panel-top{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Pills (si no están globales) */
.pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 850;
  font-size: 12px;
  color: rgba(15,23,42,0.86);
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.75);
}

.pill.ghost{
  color: rgba(71,85,105,0.92);
  background: rgba(255,255,255,0.55);
}

/* Imagen hero transparente */
.ai-hero{
  display: grid;
  place-items: center;
  padding: 8px 6px 2px;
}

.ai-hero-img{
  width: min(420px, 100%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,0.12));
}

/* Steps */
.ai-steps{
  margin-top: 12px;
  border-top: 1px solid rgba(15,23,42,0.08);
  padding-top: 12px;
}

.ai-steps-title{
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,0.86);
  font-size: 13px;
  margin-bottom: 10px;
}

.ai-steps-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.ai-steps-list li{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,0.08);
  background: rgba(255,255,255,0.70);
}

.ai-steps-list .n{
  font-weight: 950;
  font-size: 12px;
  color: rgba(37,99,235,0.88);
}

.ai-steps-list .t{
  font-size: 13.5px;
  color: rgba(15,23,42,0.82);
}

/* Cards */
.ai-cards{
  margin-top: 12px;
  border-top: 1px solid rgba(15,23,42,0.08);
  padding-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ai-card{
  border: 1px solid rgba(2,6,23,0.08);
  background: rgba(255,255,255,0.70);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 10px 24px rgba(2,6,23,0.05);
}

.ai-card-h{
  font-weight: 950;
  color: rgba(15,23,42,0.86);
  font-size: 13px;
  margin-bottom: 6px;
}

.ai-card-p{
  color: rgba(71,85,105,0.92);
  font-size: 13px;
  line-height: 1.45;
}

.ai-card-p code{
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid rgba(2,6,23,0.10);
  background: rgba(2,6,23,0.03);
  color: rgba(15,23,42,0.86);
}

/* Dev / Code */
.ai-dev{
  margin-top: 12px;
  border-top: 1px solid rgba(15,23,42,0.08);
  padding-top: 12px;
}

.ai-dev-title{
  font-weight: 900;
  color: rgba(15,23,42,0.86);
  font-size: 13px;
  margin-bottom: 8px;
}

.ai-code{
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,0.10);
  background: rgba(2,6,23,0.03);
  overflow: auto;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(15,23,42,0.88);
}

.ai-dev-foot{
  margin-top: 8px;
  font-size: 12.5px;
  color: rgba(71,85,105,0.92);
}

/* Responsive */
@media (max-width: 980px){
  .ai-grid{ grid-template-columns: 1fr; }
  .ai-mini{ grid-template-columns: 1fr; }
}







/* =========================================================
   Reality Break (franja real / fotográfica)
========================================================= */

.reality-break{
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 4vw, 60px) 0;
}

.reality-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.reality-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.03);
  transform: scale(1.02);
}

/* Overlay premium para que no “rompa” la estética Roble */
.reality-break::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(1200px 520px at 18% 40%, rgba(255,255,255,0.78), rgba(255,255,255,0.22) 60%, rgba(255,255,255,0.06) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.75), rgba(255,255,255,0.20));
}

.reality-break::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(900px 360px at 70% 45%, rgba(14,165,233,0.10), rgba(14,165,233,0.00) 60%),
    radial-gradient(900px 360px at 20% 70%, rgba(34,197,94,0.08), rgba(34,197,94,0.00) 60%);
  mix-blend-mode: multiply;
  pointer-events:none;
}

.reality-inner{
  position: relative;
  z-index: 2;
}

.reality-title{
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: rgba(15,23,42,0.92);
  margin: 8px 0 10px;
}

.reality-title .accent{
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.reality-lead{
  color: rgba(71,85,105,0.92);
  max-width: 70ch;
  margin: 0;
}

.reality-cards{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.reality-card{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 14px 34px rgba(2,6,23,0.10);
  overflow: hidden;
}

.reality-thumb{
  height: 150px;
  background: rgba(2,6,23,0.04);
}

.reality-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reality-meta{
  padding: 12px 12px 14px;
}

.reality-k{
  font-weight: 950;
  color: rgba(15,23,42,0.86);
  font-size: 13px;
  margin-bottom: 4px;
}

.reality-v{
  color: rgba(71,85,105,0.92);
  font-size: 13px;
  line-height: 1.45;
}

.reality-card.stats{
  display: grid;
  align-content: start;
}

.reality-stats{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.reality-stats .s{
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,0.08);
  background: rgba(255,255,255,0.70);
  padding: 10px 10px;
  text-align: center;
}

.reality-stats .n{
  display:block;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(37,99,235,0.90);
}

.reality-stats .t{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(71,85,105,0.92);
}

@media (max-width: 980px){
  .reality-cards{ grid-template-columns: 1fr; }
  .reality-thumb{ height: 170px; }
}
/* =========================
   REALITY BREAK (look pro)
========================= */

.reality-break{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 0;
}

/* Background photo layer */
.reality-break .reality-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.reality-break .reality-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  filter: blur(8px) saturate(0.95) contrast(1.02) brightness(1.08);
  opacity: 0.28;
}

/* Soft overlays (para estilo Microsoft + legibilidad) */
.reality-break::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(80,120,255,.14), transparent 60%),
    radial-gradient(800px 420px at 80% 35%, rgba(0,210,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}

.reality-break::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.90) 100%);
}

/* Content above bg */
.reality-break .reality-inner{
  position: relative;
  z-index: 1;
}

/* Cards */
.reality-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 22px;
}

@media (min-width: 920px){
  .reality-cards{
    grid-template-columns: 1fr 1fr 1fr;
    align-items: stretch;
  }
}

.reality-card{
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,40,80,.10);
  box-shadow: 0 14px 40px rgba(20,30,60,.10);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.reality-thumb{
  height: 170px;
  background: rgba(240,244,255,.6);
}

.reality-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reality-meta{
  padding: 16px 16px 18px;
}

.reality-k{
  font-weight: 700;
  color: rgba(18,24,40,.92);
  margin-bottom: 6px;
}

.reality-v{
  color: rgba(18,24,40,.70);
  line-height: 1.45;
}

/* Stats card */
.reality-card.stats{
  display: flex;
}

.reality-card.stats .reality-meta{
  width: 100%;
}

.reality-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.reality-stats .s{
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(20,40,80,.10);
  padding: 12px 10px;
  text-align: center;
}

.reality-stats .n{
  display:block;
  font-weight: 800;
  color: rgba(45,110,255,.95);
  font-size: 18px;
  margin-bottom: 2px;
}

.reality-stats .t{
  display:block;
  font-size: 12px;
  color: rgba(18,24,40,.70);
}



/* =========================
   Real Hero (foto full-width)
========================= */
.real-hero{
  width: 100%;
  height: clamp(220px, 34vw, 440px);
  overflow: hidden;
  border-top: 1px solid rgba(15,23,42,0.06);
  border-bottom: 1px solid rgba(15,23,42,0.06);
  background: #fff;
}

.real-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.02) contrast(1.03);
}

/* =========================
   Reality break (contenido)
   ya sin foto de fondo
========================= */
.reality-break{
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(80,120,255,.10), transparent 60%),
    radial-gradient(800px 420px at 80% 35%, rgba(0,210,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  padding: 64px 0;
}

.reality-card{
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 50px rgba(20,30,60,.12);
}
.reality-thumb{ height: 190px; }
@media (max-width: 980px){ .reality-thumb{ height: 220px; } }

/* =========================
   Motion (IntersectionObserver)
   - Se activa solo si JS agrega la clase .js al <html>
========================= */
.js [data-animate]{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(2px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(.2,.8,.2,1),
    filter 700ms ease;
  will-change: opacity, transform, filter;
}

.js [data-animate].in-view{
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Variantes */
.js [data-animate="fade"]{ transform: none; filter: none; }
.js [data-animate="fade"].in-view{ opacity: 1; }

.js [data-animate="fade-up"]{ transform: translate3d(0, 22px, 0); }
.js [data-animate="fade-down"]{ transform: translate3d(0, -22px, 0); }
.js [data-animate="fade-left"]{ transform: translate3d(22px, 0, 0); }
.js [data-animate="fade-right"]{ transform: translate3d(-22px, 0, 0); }

.js [data-animate="scale"]{ transform: scale(.96); }

@media (prefers-reduced-motion: reduce){
  .js [data-animate]{
    opacity: 1;
    transform: none;
    filter: none;
    transition: none !important;
  }
}
/* ===== Premium micro-interactions (append) ===== */
.site-header.is-scrolled{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 30px rgba(15,23,42,.10);
}

.main-nav a.is-active{
  color: var(--accent, #1e7aff);
  position: relative;
}
.main-nav a.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-10px;
  height:2px;
  border-radius:999px;
  background: currentColor;
  opacity:.35;
}

/* Tilt */
.has-tilt{
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease;
}
.has-tilt.tilting{
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px);
  box-shadow: 0 18px 55px rgba(2, 6, 23, .14);
}
.has-tilt::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(30,122,255,.10), transparent 45%);
  opacity: 0;
  transition: opacity .25s ease;
}
.has-tilt.tilting::before{ opacity: 1; }

/* Magnetic buttons */
.magnetic{ will-change: transform; }

/* Stats pulse */
.pulse-once{
  animation: pulseOnce .55s ease;
}
@keyframes pulseOnce{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}

/* Stagger: si tu reveal usa transición, esto escalona */
.cards-grid .card,
.reality-cards .reality-card,
.erp-cards .erp-card,
.ai-cards .ai-card,
.offices-grid .office-card{
  transition-delay: var(--stagger, 0ms);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .has-tilt, .magnetic{ transition: none !important; }
  .pulse-once{ animation: none !important; }
}
/* =========================
   Real hero FX (composición por capas)
========================= */
.real-hero--fx{
  position: relative;
  height: clamp(260px, 34vw, 520px);
  overflow: hidden;
  border-top: 1px solid rgba(15,23,42,0.06);
  border-bottom: 1px solid rgba(15,23,42,0.06);
  background: #fff;
}

.real-hero--fx .real-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(1.04) contrast(1.05);
  will-change: transform;
}

/* overlay “Microsoft vibe”: glow + degradé para continuidad */
.real-hero--fx .real-hero-overlay{
  position:absolute;
  inset:-20%;
  /* background:
    radial-gradient(600px 320px at 20% 30%, rgba(30,122,255,.20), transparent 60%),
    radial-gradient(520px 320px at 78% 40%, rgba(0,210,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.12) 32%, rgba(255,255,255,.96)); */
  pointer-events:none;
}

/* robot flotando */
.real-hero--fx .real-hero-robot{
  position:absolute;
  left: clamp(14px, 4vw, 60px);
  bottom: clamp(-16px, -1.6vw, 8px);
  width: clamp(180px, 20vw, 360px);
  height: auto;
  filter: drop-shadow(0 28px 50px rgba(2,6,23,.18));
  transform: translate3d(var(--rx,0px), var(--ry,0px), 0);
  will-change: transform;
}

/* banner como “card” (si lo querés PNG, reemplazalo por <img>) */
.real-hero--fx .real-hero-banner{
  position:absolute;
  right: clamp(14px, 4vw, 60px);
  bottom: clamp(18px, 4vw, 50px);
  width: min(520px, 56vw);
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 20px 60px rgba(2,6,23,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translate3d(var(--bx,0px), var(--by,0px), 0);
  will-change: transform;
}

/* tipografía / jerarquía */
.real-hero--fx .rb-k{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 12px;
  opacity: .75;
  text-transform: uppercase;
}
.real-hero--fx .rb-t{
  font-weight: 800;
  font-size: clamp(18px, 2.1vw, 26px);
  margin-top: 6px;
}
.real-hero--fx .rb-s{
  margin-top: 8px;
  font-size: 14px;
  opacity: .75;
}

/* movimiento “loco” pero elegante */
@media (prefers-reduced-motion: no-preference){
  .real-hero--fx .real-hero-robot{
    animation: floaty 6.8s ease-in-out infinite;
  }
  .real-hero--fx .real-hero-banner{
    animation: floaty2 7.6s ease-in-out infinite;
  }
}
@keyframes floaty{
  0%,100%{ transform: translate3d(var(--rx,0px), calc(var(--ry,0px) + 0px), 0); }
  50%{ transform: translate3d(var(--rx,0px), calc(var(--ry,0px) - 10px), 0); }
}
@keyframes floaty2{
  0%,100%{ transform: translate3d(var(--bx,0px), calc(var(--by,0px) + 0px), 0); }
  50%{ transform: translate3d(var(--bx,0px), calc(var(--by,0px) - 6px), 0); }
}
/* =========================
   Real hero FX — Validación (FaceVision)
========================= */
.real-hero--vida{
  position: relative;
  height: clamp(260px, 34vw, 520px);
  overflow: hidden;
  background: #fff;
}

/* overlay específico: un poco más “biometría” */
.real-hero--vida .real-hero-overlay{
  position:absolute;
  inset:-20%;
  /* background:
    radial-gradient(650px 340px at 22% 30%, rgba(30,122,255,.20), transparent 62%),
    radial-gradient(520px 340px at 74% 36%, rgba(0,210,255,.14), transparent 62%),
    radial-gradient(420px 260px at 68% 72%, rgba(16,185,129,.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.72) 72%, rgba(255,255,255,.96)); */
  pointer-events:none;
}

/* robot: para validación lo ponemos del lado derecho (queda “presentando” el banner) */
.real-hero--vida .real-hero-robot{
  left: auto;
  right: clamp(14px, 3.6vw, 60px);
  bottom: clamp(-18px, -1.8vw, 6px);
  width: clamp(180px, 20vw, 360px);
  filter: drop-shadow(0 28px 50px rgba(2,6,23,.18));
  transform: translate3d(var(--rx,0px), var(--ry,0px), 0);
}

/* banner del lado izquierdo */
.real-hero--vida .real-hero-banner{
  left: clamp(14px, 4vw, 60px);
  right: auto;
  bottom: clamp(18px, 4vw, 50px);
  width: min(560px, 58vw);
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 20px 60px rgba(2,6,23,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translate3d(var(--bx,0px), var(--by,0px), 0);
}

.real-hero--vida .rb-k{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 12px;
  opacity: .78;
  text-transform: uppercase;
}
.real-hero--vida .rb-t{
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 28px);
  margin-top: 6px;
}
.real-hero--vida .rb-s{
  margin-top: 8px;
  font-size: 14px;
  opacity: .75;
}

/* chips */
.real-hero--vida .rb-chips{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
.real-hero--vida .chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(30,122,255,.08);
  border: 1px solid rgba(30,122,255,.18);
  color: rgba(2,6,23,.82);
}
/* =========================
   Real hero FX — ERP
========================= */
.real-hero--erp{
  position: relative;
  height: clamp(260px, 34vw, 520px);
  overflow: hidden;
  background: #fff;
}

/* overlay más sobrio: operación / administración */
.real-hero--erp .real-hero-overlay{
  position:absolute;
  inset:-20%;
  /* background:
    radial-gradient(640px 320px at 18% 32%, rgba(99,102,241,.14), transparent 62%),
    radial-gradient(520px 320px at 78% 34%, rgba(30,122,255,.16), transparent 64%),
    radial-gradient(420px 280px at 58% 78%, rgba(16,185,129,.08), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.72) 72%, rgba(255,255,255,.96)); */
  pointer-events:none;
}

/* robot: lado izquierdo para “darle la entrada” al ERP */
.real-hero--erp .real-hero-robot{
  left: clamp(14px, 3.6vw, 60px);
  right: auto;
  bottom: clamp(-18px, -1.8vw, 6px);
  width: clamp(180px, 20vw, 360px);
  filter: drop-shadow(0 28px 50px rgba(2,6,23,.18));
  transform: translate3d(var(--rx,0px), var(--ry,0px), 0);
}

/* banner del lado derecho */
.real-hero--erp .real-hero-banner{
  right: clamp(14px, 4vw, 60px);
  left: auto;
  bottom: clamp(18px, 4vw, 50px);
  width: min(620px, 60vw);
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 20px 60px rgba(2,6,23,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translate3d(var(--bx,0px), var(--by,0px), 0);
}

.real-hero--erp .rb-k{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 12px;
  opacity: .78;
  text-transform: uppercase;
}
.real-hero--erp .rb-t{
  font-weight: 900;
  font-size: clamp(18px, 2.15vw, 28px);
  margin-top: 6px;
}
.real-hero--erp .rb-s{
  margin-top: 8px;
  font-size: 14px;
  opacity: .75;
}

/* chips sobrios */
.real-hero--erp .rb-chips{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
.real-hero--erp .chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.10);
  color: rgba(2,6,23,.82);
}
/* =========================
   Robot FX permanente (idle)
========================= */
.real-hero--fx .real-hero-robot{
  will-change: transform, filter;
  transform: translate3d(var(--rx,0px), var(--ry,0px), 0);
}

/* Idle: flotación + micro inclinación + respiración */
@media (prefers-reduced-motion: no-preference){
  .real-hero--fx .real-hero-robot{
    animation: robotIdle 6.8s ease-in-out infinite;
  }

  /* Glow suave que acompaña (queda premium) */
  .real-hero--fx .real-hero-robot{
    filter:
      drop-shadow(0 26px 55px rgba(2,6,23,.18))
      drop-shadow(0 0 22px rgba(30,122,255,.18));
  }

  /* Si querés aún más, el banner también late levemente */
  .real-hero--fx .real-hero-banner{
    animation: bannerIdle 7.6s ease-in-out infinite;
  }
}

@keyframes robotIdle{
  0%,100%{
    transform:
      translate3d(var(--rx,0px), calc(var(--ry,0px) + 0px), 0)
      rotate(-0.6deg)
      scale(1);
  }
  50%{
    transform:
      translate3d(var(--rx,0px), calc(var(--ry,0px) - 10px), 0)
      rotate(0.8deg)
      scale(1.01);
  }
}

@keyframes bannerIdle{
  0%,100%{
    transform: translate3d(var(--bx,0px), calc(var(--by,0px) + 0px), 0);
  }
  50%{
    transform: translate3d(var(--bx,0px), calc(var(--by,0px) - 6px), 0);
  }
}
/* =========================
   Robot “Zoom + Multi-Bounce”
========================= */
.real-hero--fx .real-hero-robot{
  transform-origin: 50% 65%;
  will-change: transform, filter;
}

/* Trigger: zoom + rebote múltiple */
.real-hero--fx.is-zoom-bounce .real-hero-robot{
  animation:
    robotIdle 6.8s ease-in-out infinite,
    robotZoomBounce 1800ms ease-in-out 1; /* antes 1150ms */
}

/* Halo pop durante el bounce (se nota mucho) */
.real-hero--fx.is-zoom-bounce::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(420px 260px at 22% 72%, rgba(30,122,255,.22), transparent 70%),
    radial-gradient(380px 220px at 30% 68%, rgba(0,210,255,.14), transparent 72%);
  animation: haloPopBounce 1050ms ease-out 1;
}
@keyframes robotZoomBounce{
  0%{
    transform: translate3d(var(--rx,0px), var(--ry,0px), 0) scale(1);
  }

  /* ZOOM FUERTE y rápido (200%) */
  14%{
    transform: translate3d(var(--rx,0px), calc(var(--ry,0px) - 26px), 0) scale(2);
  }

  /* rebote 1 (baja) */
  30%{
    transform: translate3d(var(--rx,0px), calc(var(--ry,0px) + 10px), 0) scale(1.70);
  }

  /* rebote 2 (sube) */
  44%{
    transform: translate3d(var(--rx,0px), calc(var(--ry,0px) - 18px), 0) scale(1.88);
  }

  /* rebote 3 (baja) */
  58%{
    transform: translate3d(var(--rx,0px), calc(var(--ry,0px) + 8px), 0) scale(1.73);
  }

  /* rebote 4 (sube leve) */
  74%{
    transform: translate3d(var(--rx,0px), calc(var(--ry,0px) - 10px), 0) scale(1.80);
  }

  /* vuelve a normal */
  100%{
    transform: translate3d(var(--rx,0px), var(--ry,0px), 0) scale(1);
  }
}

@keyframes haloPopBounce{
  0%{ opacity: 0; transform: scale(.98); }
  20%{ opacity: .95; transform: scale(1.02); }
  60%{ opacity: .35; transform: scale(1.04); }
  100%{ opacity: 0; transform: scale(1.06); }
}

.real-hero--fx.is-zoom-bounce .real-hero-robot{
  animation:
    robotIdle 6.8s ease-in-out infinite,
    robotZoomBounce 1150ms cubic-bezier(.12,.92,.18,1) 1;
}
.real-hero--fx.is-zoom-bounce .real-hero-banner{
  animation: bannerShock 420ms ease-out 1;
}
@keyframes bannerShock{
  0%{ transform: translate3d(var(--bx,0px), var(--by,0px), 0) scale(1); }
  40%{ transform: translate3d(var(--bx,0px), calc(var(--by,0px) + 2px), 0) scale(0.98); }
  100%{ transform: translate3d(var(--bx,0px), var(--by,0px), 0) scale(1); }
}
/* WRAP: solo posición (NO escala) */
.real-hero--fx .real-hero-robot-wrap{
  position:absolute;
  z-index: 6;               /* arriba del fondo y cards */
  left: var(--robot-left, clamp(14px, 4vw, 60px));
  right: var(--robot-right, auto);
  bottom: var(--robot-bottom, clamp(-18px, -1.8vw, 6px));
  width: clamp(180px, 20vw, 360px);
  transform: translate3d(var(--rX,0px), var(--rY,0px), 0);
  transform-origin: 50% 70%;
  will-change: transform;
}

/* IMG: acá vive el zoom (3x) */
.real-hero--fx .real-hero-robot{
  position: relative;
  z-index: 1;
  width:100%;
  height:auto;
  display:block;
  transform: translate3d(0,0,0) scale(var(--zoom, 1));
  transform-origin: 50% 70%;
  will-change: transform, filter;
  filter: drop-shadow(0 26px 55px rgba(2,6,23,.18)) drop-shadow(0 0 18px rgba(30,122,255,.16));
}

/* OJOS: siempre arriba del IMG y con tamaño en px/clamp (no % de altura) */
.real-hero--fx .robot-eyes{
  position:absolute;
  z-index: 2;               /* arriba del img */
  pointer-events:none;

  /* ✅ tamaño estable (no se vuelve gigante) */
  width: clamp(34px, 4.2vw, 62px);
  height: clamp(10px, 1.2vw, 18px);

  /* ✅ posición sobre la cara (AJUSTABLE) */
  left: 52%;
  top: 36%;
  transform: translate(-50%, -50%) scaleY(1);
  opacity: .70;

  background:
    radial-gradient(circle at 28% 55%, rgba(0,0,0,.78) 0 38%, transparent 40%),
    radial-gradient(circle at 72% 55%, rgba(0,0,0,.78) 0 38%, transparent 40%),
    radial-gradient(circle at 30% 36%, rgba(255,255,255,.55) 0 10%, transparent 12%),
    radial-gradient(circle at 74% 36%, rgba(255,255,255,.55) 0 10%, transparent 12%);
}

/* Blink cómplice */
@media (prefers-reduced-motion: no-preference){
  .real-hero--fx .robot-eyes{ animation: robotBlink 6.2s infinite; }
}
@keyframes robotBlink{
  0%, 92%{ transform: translate(-50%,-50%) scaleY(1); opacity:.70; }
  93%{ transform: translate(-50%,-50%) scaleY(.08); opacity:.60; }
  94%{ transform: translate(-50%,-50%) scaleY(1); opacity:.70; }
  96%{ transform: translate(-50%,-50%) scaleY(.06); opacity:.60; }
  97%{ transform: translate(-50%,-50%) scaleY(1); opacity:.70; }
}

/* Para que no se corte durante el zoom */
.real-hero--fx.is-zoom-lock{ overflow: visible; }

/* Animación: entra y vuelve sola */
.real-hero--fx.is-zoom-lock .real-hero-robot-wrap{
  animation: robotCenterPop 980ms cubic-bezier(.10,.92,.16,1) 1;
}
.real-hero--fx.is-zoom-lock .real-hero-robot{
  animation: robotZoomPop300 980ms cubic-bezier(.10,.92,.16,1) 1;
}

@keyframes robotCenterPop{
  0%{
    transform: translate3d(var(--rX,0px), var(--rY,0px), 0);
  }
  18%{
    transform: translate3d(
      calc(var(--rX,0px) + var(--lock-dx, 90px)),
      calc(var(--rY,0px) + var(--lock-dy, -10px)),
      0
    );
  }
  60%{
    transform: translate3d(
      calc(var(--rX,0px) + var(--lock-dx, 90px)),
      calc(var(--rY,0px) + var(--lock-dy, -10px)),
      0
    );
  }
  100%{
    transform: translate3d(var(--rX,0px), var(--rY,0px), 0);
  }
}

@keyframes robotZoomPop300{
  0%{ transform: translate3d(0,0,0) scale(1); }
  18%{ transform: translate3d(0,0,0) scale(3); }
  60%{ transform: translate3d(0,0,0) scale(3); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}

/* zoom 3x */
@keyframes robotZoomIn{
  to{ transform: translate3d(0,0,0) scale(3); }
}
.real-hero--asis{ --lock-dx: 110px; --lock-dy: -10px; }
.real-hero--vida{ --lock-dx: -120px; --lock-dy: -8px; }
.real-hero--erp { --lock-dx: 95px;  --lock-dy: -10px; }
/* Base: NO decidir left/right acá, lo decide cada sección con variables */
.real-hero--fx .real-hero-robot-wrap{
  position:absolute;
  z-index: 6;
  left: var(--robot-left, auto);
  right: var(--robot-right, auto);
  bottom: var(--robot-bottom, clamp(-18px, -1.8vw, 6px));
  width: clamp(180px, 20vw, 360px);
  transform: translate3d(var(--rX,0px), var(--rY,0px), 0);
  transform-origin: 50% 70%;
  will-change: transform;
}

.real-hero--fx .real-hero-robot{
  width:100%;
  height:auto;
  display:block;
  transform: translate3d(0,0,0) scale(1);
  transform-origin: 50% 70%;
  will-change: transform, filter;
  filter: drop-shadow(0 26px 55px rgba(2,6,23,.18)) drop-shadow(0 0 18px rgba(30,122,255,.16));
}

/* 👇 POSICIÓN POR SECCIÓN */
.real-hero--erp{
  --robot-left: clamp(14px, 3.6vw, 60px);
  --robot-right: auto;
  --lock-dx: 110px;
  --lock-dy: -10px;
}

.real-hero--asis{
  --robot-left: clamp(14px, 3.6vw, 60px);
  --robot-right: auto;
  --lock-dx: 120px;
  --lock-dy: -10px;
}

.real-hero--vida{
  --robot-left: auto;
  --robot-right: clamp(14px, 3.6vw, 60px);
  --lock-dx: -140px; /* hacia el centro desde la derecha */
  --lock-dy: -8px;
}



/* ✅ Zoom configurable (en vez de scale(3) fijo) */
.real-hero--fx{
  --zoom-lock-scale: 1.7; /* default (170%) */
  --zoom-lock-ms: 2400ms;
}

/* por sección si querés */
.real-hero--erp  { --zoom-lock-scale: 1.6; }
.real-hero--vida { --zoom-lock-scale: 1.5; }
.real-hero--asis { --zoom-lock-scale: 1.7; }

.real-hero--fx.is-zoom-lock .real-hero-robot-wrap{
  animation: robotCenterPop var(--zoom-lock-ms) ease-in-out 1;
}

.real-hero--fx.is-zoom-lock .real-hero-robot{
  animation: robotZoomLock var(--zoom-lock-ms) ease-in-out 1;
}

@keyframes robotZoomLock{
  0%   { transform: translate3d(0,0,0) scale(1); }
  65%  { transform: translate3d(0,0,0) scale(var(--zoom-lock-scale)); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
/* ==========================
   Mobile: cards abajo + menos texto
   - En pantallas chicas el card tapa el fondo.
   - Dejamos SOLO el nombre de la sección.
   - ERP y Asistentes: alineado a la derecha.
   ========================== */
@media (max-width: 560px) {
  /* base: bajar el banner y hacerlo ancho */
  .real-hero--fx .real-hero-banner{
    top: auto;
    bottom: 12px;
    left: 14px;
    right: 14px;
    max-width: none;
    width: auto;
    transform: none;
    padding: 10px 12px;
    border-radius: 16px;
  }

  /* en mobile dejamos SOLO el nombre de sección */
  .real-hero--fx .rb-t,
  .real-hero--fx .rb-s{
    display: none !important;
  }

  /* ====== alineación derecha SOLO para ERP ====== */
  .real-hero--erp .real-hero-banner{
    left: auto;
    right: 14px;
    text-align: right;
    align-items: flex-end;
  }

  /* ====== alineación derecha SOLO para ASISTENTES ======
     (sin tocar el HTML, lo targeteamos por aria-label) */
  .real-hero[aria-label="Asistentes Inteligentes"] .real-hero-banner{
    left: auto;
    right: 14px;
    text-align: right;
    align-items: flex-end;
  }

  /* (opcional) si querés que VIDA siga izquierda explícito */
  .real-hero--vida .real-hero-banner{
    left: 14px;
    right: auto;
    text-align: left;
    align-items: flex-start;
  }
}


/* =========================================
   MOBILE FIX FINAL – HERO CARD
   ========================================= */
@media (max-width: 640px){

  /* el hero debe ocupar ancho real */
  .real-hero--fx{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* CARD: ancho completo real */
  .real-hero--fx .real-hero-banner{
    position: absolute;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;

    margin: 0 !important;
    padding: 12px 16px !important;

    border-radius: 18px 18px 0 0;

    transform: none !important;
  }

  /* alineación derecha SOLO en ERP y Asistentes */
  .real-hero--erp .real-hero-banner,
  .real-hero[aria-label="Asistentes Inteligentes"] .real-hero-banner{
    text-align: right;
    align-items: flex-end;
  }

  /* dejamos SOLO el título */
  .real-hero--fx .rb-t,
  .real-hero--fx .rb-s,
  .real-hero--fx .rb-chips{
    display: none !important;
  }

  /* título limpio */
  .real-hero--fx .rb-k{
    font-size: 12px;
    font-weight: 600;
    opacity: .9;
  }
}
/* =========================
   AZURE SECTION (clone ERP style)
   - No toca estilos globales
   - Responsive: en móvil el panel baja y queda prolijo
========================= */

/* ===== HERO modifier ===== */
.real-hero--azure .real-hero-overlay{
  /* si ya tenés overlay global, esto solo ajusta el “feeling” */
  opacity: .55;
}

/* ===== Layout ===== */
.azure-section{
  position: relative;
}

.azure-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(18px, 3vw, 28px);
  align-items: start;
}

/* ===== Text styles ===== */
.azure-h2{
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.1;
  margin: 10px 0 10px;
  letter-spacing: -0.02em;
}

.azure-copy{
  margin-top: 12px;
}

.azure-headline{
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.2;
  margin: 10px 0 10px;
}

.azure-accent{
  color: var(--accent, #6ea8ff);
}

.azure-desc{
  font-size: 1.03rem;
  line-height: 1.55;
  opacity: .95;
  margin: 0 0 14px;
}

.azure-points{
  list-style: none;
  padding: 0;
  margin: 14px 0 16px;
  display: grid;
  gap: 10px;
}

.azure-points li{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  opacity: .98;
}

.azure-points .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 7px;
  background: var(--accent, #6ea8ff);
  box-shadow: 0 0 0 3px rgba(110,168,255,.15);
}

/* ===== Robust blocks ===== */
.azure-robust{
  border-radius: 16px;
  padding: 14px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.azure-robust-title{
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 6px;
}

.azure-robust-text{
  font-size: .98rem;
  line-height: 1.5;
  opacity: .95;
}

/* ===== Panel (right column) ===== */
.azure-panel{
  position: relative;
  border-radius: 22px;
  padding: 14px;
  background: rgba(252, 252, 252, 0.28);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}

.azure-panel::before{
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(500px 180px at 20% 0%, rgba(110,168,255,.22), transparent 60%),
    radial-gradient(500px 180px at 80% 0%, rgba(124,255,218,.16), transparent 60%);
  pointer-events: none;
  opacity: .9;
}

.azure-panel-top{
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 4px 12px;
}

.azure-panel .pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 600;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}

.azure-panel .pill.ghost{
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.10);
  opacity: .9;
}

/* ===== Cards list ===== */
.azure-cards{
  position: relative;
  display: grid;
  gap: 10px;
  padding: 8px 4px 6px;
}

.azure-card{
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.azure-card:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
}

.azure-card-icon{
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
}

.azure-card-k{
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 0;
}

.azure-card-body{
  display: grid;
  gap: 2px;
}

.azure-card-v{
  margin-top: -2px;
  margin-left: 8px;
  padding: 8px 12px 10px;
  border-left: 2px solid rgba(110,168,255,.35);
  font-size: .95rem;
  line-height: 1.45;
  opacity: .95;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .azure-grid{
    grid-template-columns: 1fr;
  }
  .azure-panel{
    order: 2;
  }
}

/* Móvil: panel abajo, cards compactas, texto legible */
@media (max-width: 640px){
  .azure-grid{
    gap: 16px;
  }

  .azure-desc{
    font-size: 1rem;
  }

  .azure-panel{
    border-radius: 18px;
    padding: 12px;
  }

  .azure-panel-top{
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .azure-card{
    grid-template-columns: 34px 1fr;
    padding: 10px 10px;
    border-radius: 14px;
  }

  .azure-card-icon{
    width: 32px;
    height: 32px;
  }

  .azure-card-v{
    margin-left: 6px;
    font-size: .93rem;
    padding: 8px 10px 9px;
  }
}

/* Extra small: evita “aplastado” */
@media (max-width: 420px){
  .azure-card{
    gap: 8px;
  }
  .azure-card-v{
    border-left-width: 2px;
  }
}