/* ==========================================================================
   Omega Motion & Polish — V22
   Capa aditiva. NO redefine la paleta: solo usa los tokens ya existentes
   (--navy #031A3D, --navy2 #062B63, grises, blanco, negro).
   Cárgala SIEMPRE después de la hoja de la página.
   ========================================================================== */

:root{
  /* Tiempos: cortos = se siente rápido; nunca por encima de 700ms. */
  --mo-fast: 170ms;
  --mo-base: 380ms;
  --mo-slow: 620ms;
  /* Curvas: salida suave, sin rebote. El rebote se ve barato en corporativo. */
  --mo-out: cubic-bezier(.22,.61,.36,1);
  --mo-soft: cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------- 1. Regla de progreso
   Línea fina arriba de todo. Metáfora de cinta métrica: precisión, no adorno. */
.mo-progress{
  position:fixed; inset:0 auto auto 0;
  height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--navy,#031A3D),var(--navy2,#062B63) 45%,#8E99A8);
  z-index:200; pointer-events:none;
  will-change:transform;
}

/* ---------------------------------------------------------------- 2. Barra de navegación
   Se compacta al bajar. Es el detalle que más "sube el precio" de un sitio. */
.nav{
  transition:height var(--mo-base) var(--mo-out),
             box-shadow var(--mo-base) var(--mo-out),
             background-color var(--mo-base) var(--mo-out),
             border-color var(--mo-base) var(--mo-out);
}
.nav.mo-scrolled{
  height:64px;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 30px rgba(3,26,61,.09);
  border-bottom-color:rgba(3,26,61,.10);
}
.nav .brand-icon,
.nav .brand-symbol{
  transition:width var(--mo-base) var(--mo-out),
             height var(--mo-base) var(--mo-out),
             border-radius var(--mo-base) var(--mo-out);
}
.nav.mo-scrolled .brand-icon,
.nav.mo-scrolled .brand-symbol{ width:40px; height:40px; border-radius:11px }
.nav.mo-scrolled .brand-copy span{ opacity:0; height:0; margin-top:0; overflow:hidden }
.nav .brand-copy span{ transition:opacity var(--mo-fast) var(--mo-out) }

/* Subrayado de enlaces que crece desde el centro */
.nav-links a::before,
.links a::before{
  content:""; position:absolute; left:50%; right:50%; bottom:-6px;
  height:2px; border-radius:99px; background:currentColor; opacity:.45;
  transition:left var(--mo-fast) var(--mo-out), right var(--mo-fast) var(--mo-out);
}
.nav-links a, .links a{ position:relative }
.nav-links a:hover::before,
.links a:hover::before{ left:0; right:0 }

/* Enlace de vuelta al grupo desde una división */
.nav-parent{
  padding:5px 11px; border-radius:99px;
  border:1px solid rgba(3,26,61,.16);
  font-size:.78rem !important;
}
.nav-parent:hover{ border-color:var(--navy2,#062B63); background:rgba(3,26,61,.04) }
.nav-parent::before{ display:none }

/* ---------------------------------------------------------------- 3. Revelado al hacer scroll
   Solo opacidad y transform: el navegador lo resuelve en GPU y va fluido
   incluso en gama baja. Escalonado con --mo-i. */
.mo-r{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity var(--mo-slow) var(--mo-soft),
             transform var(--mo-slow) var(--mo-soft);
  transition-delay:calc(var(--mo-i,0) * 70ms);
  will-change:opacity,transform;
}
.mo-r.mo-in{ opacity:1; transform:none; will-change:auto }

.mo-r[data-mo="left"]{ transform:translate3d(-26px,0,0) }
.mo-r[data-mo="right"]{ transform:translate3d(26px,0,0) }
.mo-r[data-mo="fade"]{ transform:none }
.mo-r[data-mo="scale"]{ transform:translate3d(0,18px,0) scale(.975) }

/* ---------------------------------------------------------------- 4. Entrada de portada
   Secuencia orquestada al cargar: kicker → título → texto → botones → confianza.
   Una sola secuencia bien hecha vale más que diez efectos sueltos. */
@keyframes moRise{ from{opacity:0;transform:translate3d(0,26px,0)} to{opacity:1;transform:none} }
.mo-hero > *{ animation:moRise 700ms var(--mo-soft) backwards }
.mo-hero > *:nth-child(1){ animation-delay:60ms }
.mo-hero > *:nth-child(2){ animation-delay:150ms }
.mo-hero > *:nth-child(3){ animation-delay:240ms }
.mo-hero > *:nth-child(4){ animation-delay:330ms }
.mo-hero > *:nth-child(5){ animation-delay:420ms }
.mo-hero > *:nth-child(6){ animation-delay:510ms }

/* ---------------------------------------------------------------- 5. Tarjetas
   Elevación contenida + el borde toma el azul de la casa. Nada de escalado. */
.card, .branch-card, .project-card, .content-panel,
.price-card, .contact-box, .step, .feature{
  transition:transform var(--mo-base) var(--mo-out),
             box-shadow var(--mo-base) var(--mo-out),
             border-color var(--mo-base) var(--mo-out);
}
.card:hover, .branch-card:hover, .project-card:hover,
.price-card:hover, .contact-box:hover{
  transform:translate3d(0,-5px,0);
  border-color:rgba(6,43,99,.34);
  box-shadow:0 22px 50px rgba(3,26,61,.13);
}
.step:hover, .feature:hover{
  transform:translate3d(3px,0,0);
  border-color:rgba(6,43,99,.26);
}
.card-icon, .step-num, .capability-icon, .tag-icon{
  transition:transform var(--mo-base) var(--mo-out),
             box-shadow var(--mo-base) var(--mo-out);
}
.card:hover .card-icon,
.step:hover .step-num{ transform:translate3d(0,-3px,0) rotate(-3deg) }

/* Flecha del enlace de tarjeta que avanza */
.card-link i, .card-link svg{ transition:transform var(--mo-fast) var(--mo-out) }
.card:hover .card-link i,
.card-link:hover i{ transform:translate3d(4px,0,0) }

/* ---------------------------------------------------------------- 6. Botones
   Barrido de luz muy tenue. Se nota sin gritar. */
.btn{ position:relative; overflow:hidden; isolation:isolate }
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transform:translate3d(-120%,0,0);
  transition:transform var(--mo-slow) var(--mo-out);
}
.btn:hover::after{ transform:translate3d(120%,0,0) }
.btn-outline::after{ background:linear-gradient(120deg,transparent 20%,rgba(6,43,99,.09) 50%,transparent 80%) }
.btn i{ transition:transform var(--mo-fast) var(--mo-out) }
.btn:hover i.ti-arrow-right{ transform:translate3d(4px,0,0) }
.btn:active{ transform:translate3d(0,1px,0) }

/* ---------------------------------------------------------------- 7. Encabezados de sección
   La regla se dibuja al entrar: referencia directa a un plano acotado. */
.eyebrow::before{
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--mo-slow) var(--mo-soft) 120ms;
}
.mo-in .eyebrow::before,
.eyebrow.mo-in::before{ transform:scaleX(1) }

/* ---------------------------------------------------------------- 8. Cifras animadas
   Para las estadísticas reales cuando tengás los números. */
.mo-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px; margin-top:36px;
}
.mo-stat{
  border-top:2px solid var(--navy2,#062B63);
  padding-top:16px;
}
.mo-stat b{
  display:block;
  font-family:Manrope,sans-serif; font-weight:800;
  font-size:clamp(1.9rem,4vw,2.7rem); letter-spacing:-.045em;
  line-height:1; color:var(--ink,#0B1730);
  font-variant-numeric:tabular-nums;
}
.mo-stat span{ display:block; margin-top:8px; font-size:.79rem; color:var(--muted,#6D7890) }
@media(max-width:820px){ .mo-stats{ grid-template-columns:repeat(2,1fr) } }

/* ---------------------------------------------------------------- 9. Galería de obra / capturas
   Listo para las fotos. Sin fotos todavía muestra un marcador discreto,
   no una caja rota. */
.mo-gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
@media(max-width:900px){ .mo-gallery{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:600px){ .mo-gallery{ grid-template-columns:1fr } }

.mo-shot{
  position:relative; overflow:hidden;
  border:1px solid var(--line,#DDE4EC); border-radius:20px;
  background:linear-gradient(145deg,#F2F4F7,#E4E8ED);
  aspect-ratio:4/3;
}
.mo-shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--mo-slow) var(--mo-out), filter var(--mo-slow) var(--mo-out);
}
.mo-shot:hover img{ transform:scale(1.045) }
.mo-shot figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:38px 18px 16px; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(2,15,36,.82));
  font-size:.83rem; font-weight:700;
  transform:translate3d(0,8px,0); opacity:.92;
  transition:transform var(--mo-base) var(--mo-out), opacity var(--mo-base) var(--mo-out);
}
.mo-shot figcaption small{ display:block; font-weight:500; opacity:.78; margin-top:3px }
.mo-shot:hover figcaption{ transform:none; opacity:1 }

/* Marcador mientras no hay foto */
.mo-shot[data-pending]::after{
  content:attr(data-pending);
  position:absolute; inset:0; display:grid; place-content:center;
  text-align:center; padding:20px;
  color:#8A93A0; font-size:.78rem; font-weight:700; letter-spacing:.02em;
}
.mo-shot[data-pending]{
  background-image:
    linear-gradient(rgba(6,43,99,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,43,99,.05) 1px,transparent 1px);
  background-size:26px 26px;
}

/* ---------------------------------------------------------------- 10. Antes / después
   Lo que más convierte en construcción. Arrastrable, sin librerías. */
.mo-ba{
  position:relative; overflow:hidden; border-radius:20px;
  border:1px solid var(--line,#DDE4EC); aspect-ratio:16/10;
  cursor:ew-resize; user-select:none; touch-action:pan-y;
  background:#E4E8ED;
}
.mo-ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.mo-ba .mo-ba-after{ clip-path:inset(0 0 0 var(--mo-split,50%)) }
.mo-ba-handle{
  position:absolute; top:0; bottom:0; left:var(--mo-split,50%);
  width:2px; background:#fff; box-shadow:0 0 0 1px rgba(3,26,61,.28);
  pointer-events:none;
}
.mo-ba-handle::after{
  content:"↔"; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%;
  background:#fff; color:var(--navy,#031A3D);
  display:grid; place-items:center; font-size:1rem; font-weight:800;
  box-shadow:0 6px 18px rgba(3,26,61,.25);
}
.mo-ba-tag{
  position:absolute; top:12px; padding:5px 10px; border-radius:99px;
  font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(2,15,36,.72); color:#fff; backdrop-filter:blur(6px);
}
.mo-ba-tag.is-before{ left:12px }
.mo-ba-tag.is-after{ right:12px }

/* ---------------------------------------------------------------- 11. Detalles finos */
.footer-links a{ transition:color var(--mo-fast) var(--mo-out), transform var(--mo-fast) var(--mo-out) }
.footer-links a:hover{ transform:translate3d(3px,0,0) }

.hero-aside{ transition:transform var(--mo-slow) var(--mo-out), box-shadow var(--mo-slow) var(--mo-out) }
.hero-aside:hover{ transform:translate3d(0,-4px,0); box-shadow:0 26px 60px rgba(3,26,61,.13) }

details{ transition:border-color var(--mo-fast) var(--mo-out) }
details[open]{ border-color:rgba(6,43,99,.28) }
details summary:after{ transition:transform var(--mo-fast) var(--mo-out) }
details[open] summary:after{ transform:rotate(180deg) }

/* Botón flotante de WhatsApp: acceso directo en móvil, que es donde llega la gente */
.mo-wa{
  position:fixed; right:16px; bottom:16px; z-index:150;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 17px; border-radius:99px;
  background:var(--navy,#031A3D); color:#fff;
  font-size:.82rem; font-weight:800;
  box-shadow:0 14px 34px rgba(3,26,61,.32);
  transform:translate3d(0,90px,0); opacity:0;
  transition:transform var(--mo-base) var(--mo-out), opacity var(--mo-base) var(--mo-out),
             background-color var(--mo-fast) var(--mo-out);
}
.mo-wa.mo-in{ transform:none; opacity:1 }
.mo-wa:hover{ background:var(--navy2,#062B63) }
.mo-wa svg{ flex:none }
@media(max-width:600px){ .mo-wa span{ display:none } .mo-wa{ padding:14px; right:14px; bottom:14px } }

/* ---------------------------------------------------------------- 12. Accesibilidad
   Quien pidió menos movimiento, recibe cero movimiento. No es opcional. */
@media(prefers-reduced-motion:reduce){
  .mo-r, .mo-hero > *{ opacity:1 !important; transform:none !important; animation:none !important; transition:none !important }
  .mo-progress{ display:none }
  .btn::after{ display:none }
  .eyebrow::before{ transform:scaleX(1) !important }
  .mo-wa{ transform:none; opacity:1 }
  *{ scroll-behavior:auto !important }
}

/* ==========================================================================
   13. Refinamientos tipográficos y de contraste — V22
   Añadidos al final para que ganen en cascada sin tocar las hojas originales.
   Si querés revertir algo, se borra solo este bloque.
   ========================================================================== */

/* El titular de portada estaba desbordado en escritorio: seis líneas de 80px
   ocupaban toda la pantalla. Se acota el máximo y se ensancha la medida. */
@media (min-width:1100px){
  .group-hero-copy h1,
  .software-hero-copy h1,
  .construction-hero-copy h1,
  .pos-hero-copy h1,
  .webs-hero-copy h1{
    font-size:clamp(2.75rem,3.45vw,3.7rem) !important;
    max-width:22ch;
    line-height:1.04;
    text-wrap:balance;
  }
  .page-hero h1{ font-size:clamp(2.6rem,3.7vw,3.9rem) }
}

/* Aire vertical más generoso entre secciones: la elegancia vive en el espacio. */
@media (min-width:1100px){
  .section{ padding:104px 0 }
  .section-head{ align-items:flex-start }
  .section-head + *{ margin-top:52px }
}

/* Números tabulares en los pasos numerados: alineación perfecta de columnas. */
.step-num, .service-number, .mo-stat b{ font-variant-numeric:tabular-nums }

/* El botón flotante desaparecía sobre el hero oscuro. Anillo claro para que
   se lea sobre cualquier fondo, claro u oscuro. */
.mo-wa{
  box-shadow:0 0 0 1px rgba(255,255,255,.28), 0 14px 34px rgba(3,26,61,.38);
}
.mo-wa:hover{
  box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 18px 42px rgba(3,26,61,.45);
}

/* Foco visible y consistente en toda la familia Omega. */
a:focus-visible, button:focus-visible, .mo-ba:focus-visible{
  outline:3px solid rgba(6,43,99,.55);
  outline-offset:3px;
  border-radius:6px;
}

/* Selección de texto en los colores de la casa. */
::selection{ background:rgba(6,43,99,.92); color:#fff }


/* Comparador antes/después sin fotos todavía: cuadrícula de plano y aviso,
   nunca una caja gris que parezca un error de carga. */
.mo-ba-empty{
  cursor:default;
  background-image:
    linear-gradient(rgba(6,43,99,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,43,99,.06) 1px,transparent 1px);
  background-size:28px 28px;
}
.mo-ba-empty img,
.mo-ba-empty .mo-ba-handle,
.mo-ba-empty .mo-ba-tag{ display:none }
.mo-ba-empty::after{
  content:"== EDITAR: subí la foto de antes y la de después con el mismo ángulo ==";
  position:absolute; inset:0; display:grid; place-content:center;
  padding:28px; text-align:center;
  color:#8A93A0; font-size:.83rem; font-weight:700;
}

/* Las etiquetas de división se cortaban en pantallas angostas: que envuelvan. */
@media (max-width:520px){
  .group-division-tags a strong,
  .group-division-tags a small{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .group-division-tags a{ align-items:flex-start }
}