/* ============================================================
   Tec-iNfo — capa "wow" para la HOME ESTÁTICA (sin React)
   Mejora progresiva: el contenido vive en el HTML; esto solo
   lo realza. Depende de los tokens de assets/styles.css.
   ============================================================ */

/* ---------- Hero refinado ---------- */
.hh { position: relative; overflow: hidden; }
.hh__art { position: relative; max-width: 980px; margin: clamp(36px,5vw,64px) auto 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -34px rgba(0,0,0,.28); }
.hh__art img { width: 100%; height: auto; display: block; will-change: transform; }
.hh__sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.45) 50%, transparent 68%); transform: translateX(-120%); }
.no-rm .hh__sheen { animation: hh-sheen 2.6s var(--ease) .6s 1; }
@keyframes hh-sheen { to { transform: translateX(120%); } }
.hh__badge { position: absolute; z-index: 2; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 10px 14px; box-shadow: 0 10px 30px -8px rgba(0,0,0,.22); display: flex; align-items: center; gap: 9px; }
.hh__badge b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; display: block; }
.hh__badge small { display: block; font-size: 12px; color: var(--text-3); }
.hh__badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(26,143,71,.16); }
.hh__badge--tl { top: 14px; left: 14px; }
.hh__badge--br { bottom: 14px; right: 14px; }
@media (max-width: 560px){ .hh__badge { display: none; } }

/* chips bajo el hero */
.hh__chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 24px; }
.hh__chip { font-size: 13.5px; font-weight: 500; color: var(--text); padding: 8px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--hairline); display: inline-flex; align-items: center; gap: 7px; }
.hh__chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* titular palabra a palabra (solo si JS añade .no-rm) */
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.no-rm .word > span { display: inline-block; transform: translateY(110%); animation: word-up .9s var(--ease) forwards; }
@keyframes word-up { to { transform: translateY(0); } }

/* contador (tabular para que no “salte”) */
.counting { font-variant-numeric: tabular-nums; }

/* ---------- Reveal (consolidado aquí) ---------- */
.reveal { opacity: 1; }
.no-rm .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.no-rm .reveal.in { opacity: 1; transform: none; }

/* ============================================================
   CARRUSEL (nativo scroll-snap + mejora con JS)
   ============================================================ */
.car__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.car__nav { display: flex; gap: 8px; }
.car__btn { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--hairline); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--text); transition: background .2s var(--ease), transform .2s var(--ease), opacity .2s; }
.car__btn:hover { background: rgba(0,0,0,.05); }
.car__btn:active { transform: scale(.94); }
.car__btn:disabled { opacity: .35; cursor: default; }
.car__btn svg { width: 18px; height: 18px; }
.car__vp { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; margin: 0 -6px; padding: 6px; scroll-padding-left: 6px; }
.car__vp::-webkit-scrollbar { display: none; }
.car__track { display: flex; gap: 16px; }
.car__track > * { scroll-snap-align: start; }
.car.dragging .car__vp { scroll-snap-type: none; }
.car.dragging .car__track { cursor: grabbing; }
.car__dots { display: flex; gap: 7px; justify-content: center; margin-top: 22px; }
.car__dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(0,0,0,.18); border: 0; cursor: pointer; padding: 0; transition: width .25s var(--ease), background .25s var(--ease); }
.car__dot.on { width: 22px; background: var(--blue); }

/* tarjeta de servicio */
.scard { flex: 0 0 auto; width: clamp(236px, 27vw, 290px); border-radius: 22px; background: #fff; border: 1px solid var(--hairline); padding: 26px 24px 28px; display: flex; flex-direction: column; min-height: 224px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); -webkit-user-drag: none; }
.scard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(0,0,0,.26); border-color: transparent; text-decoration: none; }
.scard__ico { width: 48px; height: 48px; display: grid; place-items: center; background: transparent !important; color: var(--a) !important; margin-bottom: 16px; }
.scard__ico svg { width: 30px; height: 30px; stroke-width: 1.5; }
.scard__t { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.scard__d { font-size: 14.5px; color: var(--text-2); margin-top: 8px; line-height: 1.45; flex: 1; }
.scard__l { font-size: 14px; font-weight: 500; color: var(--blue-link); margin-top: 16px; display: inline-flex; gap: 4px; }
.scard__l::after { content: "›"; transition: transform .2s var(--ease); }
.scard:hover .scard__l::after { transform: translateX(3px); }

/* opiniones */
.rev { flex: 0 0 auto; width: clamp(280px, 40vw, 430px); }
.rev__card { background: #fff; border: 1px solid var(--hairline); border-radius: 22px; padding: 30px 30px 26px; height: 100%; display: flex; flex-direction: column; }
.rev__stars { color: #f5a623; font-size: 16px; letter-spacing: 2px; }
.rev__q { font-size: clamp(17px,1.6vw,20px); line-height: 1.5; color: var(--text); margin-top: 14px; flex: 1; letter-spacing: -.01em; }
.rev__who { font-size: 14px; color: var(--text-2); margin-top: 18px; display: flex; align-items: center; gap: 8px; }
.rev__g { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--hairline); font-weight: 700; font-size: 13px; }

/* pasos */
.step { padding: 8px 4px; }
.step__n { font-size: 14px; font-weight: 600; color: var(--blue); letter-spacing: .04em; }
.step__t { font-size: clamp(22px,2.4vw,28px); font-weight: 600; letter-spacing: -.02em; margin-top: 10px; }
.step__d { font-size: 16px; color: var(--text-2); line-height: 1.5; margin-top: 10px; max-width: 30ch; }

/* iconos de línea en color de acento (sin caja) en toda la web */

@media (prefers-reduced-motion: reduce) {
  .hh__art img, .word > span, .reveal, .hh__sheen { animation: none !important; transform: none !important; opacity: 1 !important; }
}