/* ============================================================
   GRUPO COPRINCI — mantenimiento.css
   Componente propio de /mantenimiento-industrial (tras landing.css):
   tarjetas cross-sell a las otras 3 landings.
   (Toggle Preventivo/Correctivo, grids de íconos y stepper vienen
   de landing.css + landings.js — no requiere JS propio.)
   ============================================================ */

.crosssell { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.xcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; }
.xcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--azul); }
.xcard__ico { width: 34px; height: 38px; background: var(--grad-marca); -webkit-clip-path: var(--hex); clip-path: var(--hex); margin-bottom: .9rem; }
.xcard h3 { color: var(--marino); font-size: 1.2rem; margin-bottom: .4rem; }
.xcard p { color: var(--text-soft); font-size: .95rem; margin-bottom: .9rem; }
.xcard__link { color: var(--azul); font-family: var(--font-display); font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; align-self: flex-start; transition: gap .2s var(--ease); }
.xcard:hover .xcard__link { gap: .6rem; }
@media (max-width: 760px) { .crosssell { grid-template-columns: 1fr; } }


/* ============================================================
   DINAMISMO DE CONTENIDO (mantenimiento) — añadido tras auditoría 2026-06-22.
   Page-local; reduced-motion-safe; reusa data-reveal/.section--spot/.licon.
   ============================================================ */
/* ===== 1. Stagger interno SOLO en #sectores (su .carousel lleva data-reveal; #beneficios usa reveal por <li>) ===== */
.js #sectores .carousel[data-reveal] .cslide { opacity: 0; transform: translateY(18px); }
.js #sectores .carousel[data-reveal].in-view .carousel__slide:nth-child(1) .cslide { animation: cslideIn .55s var(--ease) both; animation-delay: 0s; }
.js #sectores .carousel[data-reveal].in-view .carousel__slide:nth-child(2) .cslide { animation: cslideIn .55s var(--ease) both; animation-delay: .06s; }
.js #sectores .carousel[data-reveal].in-view .carousel__slide:nth-child(3) .cslide { animation: cslideIn .55s var(--ease) both; animation-delay: .12s; }
.js #sectores .carousel[data-reveal].in-view .carousel__slide:nth-child(4) .cslide { animation: cslideIn .55s var(--ease) both; animation-delay: .18s; }
.js #sectores .carousel[data-reveal].in-view .carousel__slide:nth-child(n+5) .cslide { animation: cslideIn .55s var(--ease) both; animation-delay: .24s; }
@keyframes cslideIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ===== 2. Cascada cross-sell #otros ===== */
.js .crosssell[data-reveal] .xcard { opacity: 0; transform: translateY(20px); }
.js .crosssell[data-reveal].in-view .xcard { animation: xcardIn .55s var(--ease) both; }
.js .crosssell[data-reveal].in-view .xcard:nth-child(2) { animation-delay: .09s; }
.js .crosssell[data-reveal].in-view .xcard:nth-child(3) { animation-delay: .18s; }
@keyframes xcardIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ===== 3. Stagger de tags al activar un modo (reusa fadeUp de landing.css) ===== */
.js .mode-panel.is-active .tag { animation: fadeUp .4s var(--ease) both; }
.js .mode-panel.is-active .tag:nth-child(1) { animation-delay: .04s; }
.js .mode-panel.is-active .tag:nth-child(2) { animation-delay: .09s; }
.js .mode-panel.is-active .tag:nth-child(3) { animation-delay: .14s; }
.js .mode-panel.is-active .tag:nth-child(4) { animation-delay: .19s; }
.js .mode-panel.is-active .tag:nth-child(5) { animation-delay: .24s; }

/* ===== 4. Toggle direccional + naranja en correctivo (lee data-active de landings.js) ===== */
.js [data-toggle-modes][data-active="0"] .mode-panel.is-active { animation: modeInL .4s var(--ease) both; }
.js [data-toggle-modes][data-active="1"] .mode-panel.is-active { animation: modeInR .4s var(--ease) both; }
@keyframes modeInL { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes modeInR { from { opacity: 0; transform: translateX(18px);  } to { opacity: 1; transform: none; } }
[data-toggle-modes][data-active="1"] .toggle-modes button[aria-pressed="true"] { background: var(--naranja); }

/* ===== 5. Badge hex + micro-linea 'evitas' en #beneficios ===== */
.cslide--gain .cslide__cap { padding-bottom: 1.15rem; }
.cslide__badge { position: absolute; top: .8rem; left: .8rem; z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.8rem; background: var(--grad-marca); color: #fff; -webkit-clip-path: var(--hex); clip-path: var(--hex); box-shadow: 0 4px 14px rgba(10,26,51,.35); }
.cslide__badge .licon { width: 1.3rem; height: 1.3rem; }
.cslide__avoid { display: block; margin-top: .35rem; padding-top: .35rem; font: 600 .78rem var(--font-display); color: rgba(255,255,255,.92); border-top: 1px solid rgba(255,255,255,.22); }
.cslide__avoid b { color: var(--energia); font-weight: 700; }

/* ===== 6. Sweep especular en imagenes de carrusel (sectores + beneficios) ===== */
.cslide__img { position: relative; }
.cslide__img::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-130%); transition: transform .7s var(--ease); }
.cslide:hover .cslide__img::after, .cslide:focus-within .cslide__img::after { transform: translateX(130%); }
.cslide__cap { z-index: 2; }

/* ===== 7. Micro-feedback xcard (icono + hairline de acento) ===== */
.xcard { position: relative; overflow: hidden; }
.xcard__ico { transition: transform .3s var(--ease), background .3s var(--ease); }
.xcard:hover .xcard__ico, .xcard:focus-visible .xcard__ico { transform: rotate(-6deg) scale(1.08); background: var(--azul); }
.xcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--azul), var(--naranja) 70%); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.xcard:hover::before, .xcard:focus-visible::before { transform: scaleX(1); }

/* ===== 8. Toggle thumb deslizante (scoped, fallback color via :has) ===== */
.landing #servicios .toggle-modes { position: relative; isolation: isolate; }
.landing #servicios .toggle-modes button { position: relative; z-index: 1; transition: color .25s var(--ease); }
.landing #servicios .toggle-modes:has(button)::before { content: ""; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-pill); background: var(--azul); transition: transform .32s var(--ease); }
.landing #servicios .toggle-modes:has(button:last-child[aria-pressed="true"])::before { transform: translateX(100%); }
.landing #servicios .toggle-modes:has(button) button[aria-pressed="true"] { background: transparent; color: #fff; }

/* ===== 9. Tags #servicios: relleno azul barrido + hex que se enciende (scoped) ===== */
.landing #servicios .tag { position: relative; overflow: hidden; isolation: isolate; transition: transform .18s var(--ease), color .25s var(--ease), border-color .2s var(--ease); }
.landing #servicios .tag::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--azul); transform: translateY(101%); transition: transform .32s var(--ease); }
.landing #servicios .tag:hover { color: #fff; border-color: var(--azul); }
.landing #servicios .tag:hover::after { transform: translateY(0); }
.landing #servicios .tag:hover::before { background: var(--energia); }

/* ===== 10. CTA #cotiza + CTA-band: tarjeta reactiva + shine ===== */
#cotiza .estimator__card { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
#cotiza .estimator__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
#cotiza .estimator__card:hover .btn span[aria-hidden="true"] { transform: translateX(3px); }
#cotiza .estimator__card .btn span[aria-hidden="true"] { display: inline-block; transition: transform .2s var(--ease); }
#cotiza .btn--primary, .cta-band .btn--accent { position: relative; overflow: hidden; isolation: isolate; }
#cotiza .btn--primary::after, .cta-band .btn--accent::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%); transform: translateX(-130%); transition: transform .6s var(--ease); }
#cotiza .btn--primary:hover::after, .cta-band .btn--accent:hover::after { transform: translateX(130%); }
#cotiza .btn--primary span, .cta-band .btn--accent span { position: relative; z-index: 1; }

/* ===== 11. UN SOLO bloque reduced-motion para TODO lo anterior ===== */
@media (prefers-reduced-motion: reduce) {
  .js #sectores .carousel[data-reveal] .cslide { opacity: 1; transform: none; }
  .js #sectores .carousel[data-reveal].in-view .cslide { animation: none; }
  .js .crosssell[data-reveal] .xcard { opacity: 1; transform: none; }
  .js .crosssell[data-reveal].in-view .xcard { animation: none; }
  .js .mode-panel.is-active .tag { animation: none; }
  .js [data-toggle-modes][data-active="0"] .mode-panel.is-active,
  .js [data-toggle-modes][data-active="1"] .mode-panel.is-active { animation: none; }
  .cslide__img::after { display: none; }
  .xcard__ico { transition: none; } .xcard:hover .xcard__ico, .xcard:focus-visible .xcard__ico { transform: none; } .xcard::before { transition: none; }
  .landing #servicios .toggle-modes::before, .landing #servicios .toggle-modes button { transition: none; }
  .landing #servicios .tag, .landing #servicios .tag::after { transition: none; } .landing #servicios .tag:hover { transform: none; }
  #cotiza .estimator__card, #cotiza .estimator__card .btn span[aria-hidden="true"] { transition: none; } #cotiza .estimator__card:hover { transform: none; }
  #cotiza .btn--primary::after, .cta-band .btn--accent::after { display: none; }
}