/* ============================================================
   GRUPO COPRINCI — cuadrillas.css
   Componentes propios de /cuadrillas-tecnicas (tras landing.css):
   especialidades expandibles, comparativo "con nosotros vs. directo",
   muro de capacitaciones/EPP. (Stepper y tags vienen de landing.css.)
   ============================================================ */

/* ---------- Especialidades expandibles (acordeón grid) ---------- */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: .9rem; align-items: start; }
.spec { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.spec__btn { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 1rem 1.2rem; display: flex; align-items: center; gap: .7rem; font: 600 1.05rem var(--font-display); color: var(--marino); }
/* Ícono distintivo por especialidad (.ibadge--hex). Tamaño compacto para el acordeón. */
.spec__btn .ibadge { width: 2.1rem; height: 2.35rem; }
.spec__btn .ibadge .licon { width: 1.15rem; height: 1.15rem; }
.spec__btn .plus { margin-left: auto; font-size: 1.4rem; line-height: 1; color: var(--azul); transition: transform .25s var(--ease); }
.spec__btn[aria-expanded="true"] .plus { transform: rotate(45deg); }
.spec__detalle p { padding: 0 1.2rem 1.1rem; color: var(--text-soft); }
/* sin JS: detalle visible. Con JS: colapsado salvo .is-open (progressive enhancement) */
.js .spec__detalle { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.js .spec.is-open .spec__detalle { max-height: 260px; }

/* ---------- "En qué te apoyamos": ícono distintivo por tag ---------- */
/* Reemplaza el hexágono genérico (.tag::before de landing.css) por el ícono Lucide inline. */
#servicios .tag::before { display: none; content: none; }
#servicios .tag .licon { width: 1.1rem; height: 1.1rem; color: var(--azul); }

/* ---------- Comparativo: con nosotros vs. directo ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.compare__col { border-radius: var(--r-lg); padding: clamp(1.3rem, 3vw, 1.8rem); }
.compare__col--us { background: var(--grad-marca); color: #fff; box-shadow: var(--shadow-md); }
.compare__col--them { background: #fff; border: 1px solid var(--border); }
.compare__col h3 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.compare__col--us h3 { color: #fff; }
.compare__col--them h3 { color: var(--marino); }
.compare__col ul { display: grid; gap: .7rem; }
.compare__col li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.35; }
.compare__col--us li { color: rgba(255,255,255,.95); }
.compare__col--them li { color: var(--text-soft); }
.compare__col--us li::before { content: "✓"; flex: 0 0 auto; color: var(--energia); font-weight: 700; }
.compare__col--them li::before { content: "✕"; flex: 0 0 auto; color: #c0392b; font-weight: 700; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* ---------- Muro de capacitaciones / EPP (badges) ---------- */
.badge-group + .badge-group { margin-top: 1.6rem; }
.badge-group h3 { font-size: 1.05rem; color: var(--marino); margin-bottom: .8rem; font-family: var(--font-display); }
.badge-wall { display: flex; flex-wrap: wrap; gap: .55rem; }
.badge { font: 600 .88rem var(--font-display); color: var(--marino); background: var(--cal); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .45rem .9rem; display: inline-flex; align-items: center; gap: .45rem; }
/* Ícono distintivo por badge (Lucide inline). Capacitaciones = teal de marca; EPP = naranja. */
.badge .licon { width: 1.05rem; height: 1.05rem; color: var(--fuerza); margin-right: .1rem; }
.badge--epp { background: #fff; }
.badge--epp .licon { color: var(--naranja); }

/* ---------- Placeholder de hero (mientras llega el set gpt-image-1) ---------- */
.ph-cuadrillas {
  background:
    radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.14), transparent 50%),
    linear-gradient(160deg, #1d3b5c 0%, #16232b 60%, #0a1a33 100%);
}


/* ============================================================
   DINAMISMO DE CONTENIDO (cuadrillas) — añadido tras auditoría 2026-06-22.
   Page-local; reduced-motion-safe; reusa data-reveal/.section--spot/.licon.
   ============================================================ */
/* ===== 1. Comparativo: check/cross en pastilla + entrada lateral (SOLO transform) + iconos h3 ===== */
.compare__col li { align-items: center; }
.compare__col--us li::before, .compare__col--them li::before { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: .85rem; line-height: 1; }
.compare__col--us li::before { content: "\2713"; background: rgba(255,255,255,.16); color: #fff; }
.compare__col--them li::before { content: "\2715"; background: rgba(192,57,43,.12); color: #c0392b; }
.js .compare__col--us li[data-reveal] { transform: translateX(-18px); transition: transform .6s var(--ease); }
.js .compare__col--them li[data-reveal] { transform: translateX(18px); transition: transform .6s var(--ease); }
.js .compare__col li[data-reveal].in-view { transform: none; }
.js .compare__col--us li[data-reveal].in-view::before { animation: cmpPop .45s var(--ease) both; }
@keyframes cmpPop { 0% { transform: scale(.4); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.compare__col h3 { display: inline-flex; align-items: center; gap: .55rem; }
.compare__col h3 .licon { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }
.compare__col--us h3 .licon { color: #fff; }
.compare__col--them h3 .licon { color: #c0392b; }

/* ===== 2. Stepper #modelo: linea trazada + numeros encendidos 1->4 ===== */
#modelo .stepper__item::before { background: var(--grad-marca); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
#modelo .stepper.in-view .stepper__item::before { transform: scaleX(1); }
#modelo .stepper.in-view .stepper__item:nth-child(2)::before { transition-delay: .15s; }
#modelo .stepper.in-view .stepper__item:nth-child(3)::before { transition-delay: .45s; }
#modelo .stepper.in-view .stepper__item:nth-child(4)::before { transition-delay: .75s; }
.js #modelo .stepper__num { background: var(--cal); color: var(--acero); transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.js #modelo .stepper.in-view .stepper__num { background: var(--grad-marca); color: #fff; animation: stepLight .5s var(--ease) both; }
.js #modelo .stepper.in-view .stepper__item:nth-child(1) .stepper__num { animation-delay: 0s; }
.js #modelo .stepper.in-view .stepper__item:nth-child(2) .stepper__num { animation-delay: .3s; }
.js #modelo .stepper.in-view .stepper__item:nth-child(3) .stepper__num { animation-delay: .6s; }
.js #modelo .stepper.in-view .stepper__item:nth-child(4) .stepper__num { animation-delay: .9s; }
@keyframes stepLight { 0% { transform: scale(.78); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* ===== 3. Stepper #modelo: paso reactivo al hover/focus (mejora #30) ===== */
#modelo .stepper__item { border-radius: var(--r-md); padding: .4rem .2rem; outline: none; transition: transform .22s var(--ease); }
#modelo .stepper__item h4 { transition: color .2s var(--ease); }
#modelo .stepper__item:hover, #modelo .stepper__item:focus-visible { transform: translateY(-3px); }
#modelo .stepper__item:hover .stepper__num, #modelo .stepper__item:focus-visible .stepper__num { transform: scale(1.1); box-shadow: 0 6px 18px rgba(0,96,241,.32); }
#modelo .stepper__item:hover h4, #modelo .stepper__item:focus-visible h4 { color: var(--azul); }
#modelo .stepper__item:focus-visible { box-shadow: 0 0 0 3px rgba(0,96,241,.22); }

/* ===== 4. Benefit: hex vacio -> tile con icono Lucide (mejora #22) ===== */
.benefit__ico { width: 2.6rem; height: 2.6rem; background: rgba(0,96,241,.10); -webkit-clip-path: none; clip-path: none; border-radius: var(--r-md); display: grid; place-items: center; color: var(--azul); transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease); }
.benefit__ico::after { content: none; }
.benefit__ico .licon { width: 1.4rem; height: 1.4rem; }
.benefit:hover .benefit__ico, .benefit:focus-within .benefit__ico { background: var(--azul); color: #fff; transform: scale(1.06); }
/* mejora #27: el hex (ya tile) confirma con rotacion al hover, scoped a benefits-grid */
.benefits-grid .benefit__ico { transition: transform .25s var(--ease), background .22s var(--ease), color .22s var(--ease), box-shadow .25s var(--ease); }
.benefits-grid .benefit:hover .benefit__ico { transform: scale(1.12) rotate(-4deg); box-shadow: 0 4px 14px rgba(0,96,241,.28); }

/* ===== 5. Badges muro: hover (relleno + lift + nudge icono) (mejora #28) ===== */
.badge { transition: transform .18s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.badge:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--fuerza) 45%, var(--border)); background: color-mix(in srgb, var(--fuerza) 7%, var(--cal)); box-shadow: var(--shadow-sm); }
.badge .licon { transition: transform .2s var(--ease); }
.badge:hover .licon { transform: scale(1.12); }
.badge--epp:hover { border-color: color-mix(in srgb, var(--naranja) 50%, var(--border)); background: color-mix(in srgb, var(--naranja) 8%, #fff); }

/* ===== 6. Tags #servicios: nudge del icono + barrido de brillo (mejora #29) ===== */
#servicios .tag { position: relative; overflow: hidden; }
#servicios .tag .licon { transition: transform .2s var(--ease); }
#servicios .tag:hover .licon { transform: translateX(2px); }
#servicios .tag::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(0,96,241,.14) 50%, transparent 65%); transform: translateX(-120%); transition: transform .55s var(--ease); }
#servicios .tag:hover::after { transform: translateX(120%); }

/* ===== 7. CTA #cotiza: foco del boton + aside reactivo (mejora #32) ===== */
#cotiza .estimator__card .btn:focus-visible { box-shadow: var(--shadow-md), 0 0 0 4px rgba(0,96,241,.28); outline: none; }
#cotiza .estimator__aside li { transition: transform .2s var(--ease), color .2s var(--ease); }
#cotiza .estimator__aside li::before { transition: transform .2s var(--ease); }
#cotiza .estimator__aside li:hover { color: var(--marino); transform: translateX(3px); }
#cotiza .estimator__aside li:hover::before { transform: scale(1.2); }

/* ===== 8. UN SOLO bloque reduced-motion (+ salvaguarda estado final stepper/compare) ===== */
@media (prefers-reduced-motion: reduce) {
  .js .compare__col li[data-reveal] { transform: none !important; }
  .js .compare__col--us li[data-reveal].in-view::before { animation: none; }
  #modelo .stepper__item::before { transform: none; }
  .js #modelo .stepper__num { background: var(--grad-marca); color: #fff; }
  .js #modelo .stepper.in-view .stepper__num { animation: none; }
  #modelo .stepper__item:hover, #modelo .stepper__item:focus-visible,
  #modelo .stepper__item:hover .stepper__num, #modelo .stepper__item:focus-visible .stepper__num { transform: none; }
  .benefit:hover .benefit__ico, .benefits-grid .benefit:hover .benefit__ico { transform: none; }
  .badge:hover { transform: none; } .badge:hover .licon { transform: none; }
  #servicios .tag:hover .licon { transform: none; } #servicios .tag::after { display: none; }
  #cotiza .estimator__aside li:hover { transform: none; } #cotiza .estimator__aside li:hover::before { transform: none; }
}