/* MAROMEC — efectos dinámicos compartidos (30/10/2026)
   Reglas de diseño:
   - Todo es progresivo: sin JavaScript (o con "reducir movimiento" activado) la página se ve completa y quieta.
   - Solo se animan transform y opacity (no mueven el diseño, no empeoran el rendimiento).
   - Lo que ya se ve al abrir la página nunca se esconde: solo entra con efecto lo que está más abajo. */

html{scroll-behavior:smooth}
section[id],footer[id],[id].mrm-anchor{scroll-margin-top:86px}

/* ── entrada del hero (CSS puro: arranca con el primer pintado, sin parpadeo) ── */
@keyframes mrmUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mrmUpSoft{from{transform:translateY(14px)}to{transform:none}}
@keyframes mrmIn{from{opacity:0;transform:translateX(26px) scale(.98)}to{opacity:1;transform:none}}
.hero .eyebrow,.hero-in > .badge,.hero-in > .hero-pill{animation:mrmUp .5s cubic-bezier(.2,.7,.2,1) 0s both}
.hero h1,.hero-in > h1{animation:mrmUpSoft .55s cubic-bezier(.2,.7,.2,1) .04s both}   /* sin opacidad: no demora el LCP */
.hero p.lead,.hero-in > p,.hero-in > .hero-sub{animation:mrmUp .5s cubic-bezier(.2,.7,.2,1) .1s both}
.hero .hero-ctas,.hero-in > .hero-ctas{animation:mrmUp .5s cubic-bezier(.2,.7,.2,1) .18s both}
.hero .hero-stats,.hero-in > .kpi-grid{animation:mrmUp .5s cubic-bezier(.2,.7,.2,1) .26s both}
.hero-visual{animation:mrmIn .7s cubic-bezier(.2,.7,.2,1) .15s both}

/* ── movimiento ambiente en el hero (muy suave) ── */
@keyframes mrmSpin{to{transform:rotate(360deg)}}
@keyframes mrmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero.mrm-spin::after{animation:mrmSpin 48s linear infinite}   /* solo el hero de la home (la clase la pone index.html) */
.hero-visual .mini-cat{animation:mrmFloat 6s ease-in-out infinite}
.hero-visual .mini-cat:nth-child(2){animation-delay:-1.5s}
.hero-visual .mini-cat:nth-child(3){animation-delay:-3s}
.hero-visual .mini-cat:nth-child(4){animation-delay:-4.5s}
.hero-visual .mini-cat:hover{animation-play-state:paused}

/* ── destello en los botones principales ── */
.hero-ctas .btn-primary,.alta-send,.wa-banner .btn{position:relative;overflow:hidden}
.hero-ctas .btn-primary::after,.wa-banner .btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.hero-ctas .btn-primary:hover::after,.wa-banner .btn:hover::after{left:130%}

/* ── aparición al bajar (lo agrega dinamico.js solo a lo que está fuera de pantalla) ── */
.rv{opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--rv-d,0ms);will-change:opacity,transform}
.rv.rv-in{opacity:1;transform:none;will-change:auto}

/* ── tarjetas: elevación + zoom de la foto ── */
.cat-card,.prod-card,.product-card,.segment-card,.benefit-card,.city-hub-card,.prov-card,.related-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease}
.prod-img img,.pc-img img{transition:transform .5s ease}
.prod-card:hover .prod-img img,.product-card:hover .pc-img img{transform:scale(1.07)}
.cat-card .ico{display:inline-block;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.cat-card:hover .ico{transform:scale(1.18) rotate(-6deg)}
.cat-card small{display:block;margin-top:5px;font-size:11px;font-weight:600;color:#8a8a8a;letter-spacing:.02em}
.benefit .ico{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.benefit:hover .ico{transform:rotate(-8deg) scale(1.1)}

/* ── cinta de marcas que se desplaza ── */
.mrm-ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mrm-track{display:flex;gap:44px;width:max-content;align-items:center;animation:mrmTick var(--tick-s,28s) linear infinite}
.mrm-ticker:hover .mrm-track{animation-play-state:paused}
@keyframes mrmTick{to{transform:translateX(-50%)}}

/* ── barra de avance de lectura ── */
#mrm-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,#FF6A00,#FFB347);transform-origin:0 50%;transform:scaleX(0)}

/* ── encabezado: sombra al bajar ── */
.mrm-scrolled{box-shadow:0 8px 26px rgba(0,0,0,.38)!important}
header.main{transition:padding .25s ease,box-shadow .25s ease}
header.main.mrm-scrolled{padding-top:9px;padding-bottom:11px}
header.main .logo-wrap img{transition:height .25s ease}
@media(min-width:701px){header.main.mrm-scrolled .logo-wrap img{height:38px}}

/* ── enlace activo del menú según la sección que se está viendo ── */
nav.mainnav a.is-active{color:var(--orange,#FF6A00);border-color:var(--orange,#FF6A00)}

/* ── WhatsApp flotante y "volver arriba" ── */
.mrm-wa{position:fixed;bottom:24px;right:24px;z-index:998;width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(37,211,102,.5);transition:transform .2s}
.mrm-wa:hover{transform:scale(1.1)}
.mrm-wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:mrmPulse 2.4s ease-out infinite}
@keyframes mrmPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}
.mrm-wa-tip{position:absolute;right:68px;white-space:nowrap;background:#111;color:#fff;font:700 12.5px/1 system-ui,Arial,sans-serif;
  padding:9px 12px;border-radius:8px;opacity:0;transform:translateX(6px);transition:.2s;pointer-events:none}
.mrm-wa:hover .mrm-wa-tip,.mrm-wa:focus-visible .mrm-wa-tip{opacity:1;transform:none}
.mrm-wa.mrm-left{right:auto;left:22px}
.mrm-wa.mrm-left .mrm-wa-tip{right:auto;left:68px}
.mrm-top{position:fixed;right:28px;bottom:96px;z-index:997;width:42px;height:42px;border-radius:50%;border:2px solid #FF6A00;
  background:#111;color:#FF6A00;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s,transform .25s,background .2s,color .2s}
.mrm-top.show{opacity:1;transform:none;pointer-events:auto}
.mrm-top:hover{background:#FF6A00;color:#fff}
.mrm-top.mrm-high{bottom:96px}
@media(max-width:700px){.mrm-wa{bottom:18px;right:16px;width:54px;height:54px}.mrm-wa.mrm-left{left:14px}.mrm-top{right:20px;bottom:86px}.mrm-wa-tip{display:none}}

/* ── menos movimiento / impresión: todo queda quieto y visible ── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1!important;transform:none!important}
  .mrm-track{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center}
}
@media print{.rv{opacity:1!important;transform:none!important}.mrm-wa,.mrm-top,#mrm-progress{display:none!important}}