/* ═══════════════════════════════════════════════════════════════════════
   HEKA · Home rediseñada (2026-10)
   Clases nuevas con prefijo "px-" para no tocar nada de heka.css, que
   comparten contacto.html, sobre-heka.html y trabaja.html. Usa los mismos
   tokens de siempre (--azul, --negro, --font-title, --font-body).
   ═══════════════════════════════════════════════════════════════════════ */

.px-section{position:relative;padding:150px 7%;overflow:hidden;isolation:isolate}
.px-section.px-tight{padding:110px 7%}
.px-eyebrow{display:block;font-size:.6rem;letter-spacing:4px;text-transform:uppercase;font-weight:700;color:var(--azul);margin-bottom:22px}
.px-eyebrow.on-dark{color:#6cb8ec}
.px-h2{font-family:var(--font-title);font-weight:800;line-height:.98;letter-spacing:-.04em;margin:0}
.px-h2 em{font-style:italic;color:var(--azul)}
.px-lead{font-size:1.05rem;line-height:1.75;font-weight:300}

/* Fondo con dos fotos (parallax + blur progresivo al bajar, ver js/index-parallax.js) */
.px-stage{position:absolute;inset:0;z-index:-2;overflow:hidden;will-change:transform,filter}
.px-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.px-stage.px-single img{position:static}
.px-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none}
@media(prefers-reduced-motion:reduce){.px-stage{filter:none!important;transform:none!important}}

/* Hero, foto doble con cross-fade lento */
.px-hero{position:relative;height:100vh;min-height:680px;display:flex;align-items:center;overflow:hidden;isolation:isolate}
@keyframes pxZoom{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes pxFadeA{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes pxFadeB{0%,45%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}
.px-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.px-hero-bg.a{animation:pxZoom 24s var(--ease) infinite alternate,pxFadeA 16s ease-in-out infinite}
.px-hero-bg.b{animation:pxZoom 24s var(--ease) infinite alternate-reverse,pxFadeB 16s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.px-hero-bg.a{opacity:1;animation:none}.px-hero-bg.b{opacity:0;animation:none}}
.px-hero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 46%,rgba(0,0,0,.26) 86%)}
.px-hero h1{font-family:var(--font-title);font-weight:800;font-size:clamp(3.2rem,7.2vw,6.6rem);line-height:.98;letter-spacing:-.045em;color:#fff;max-width:11ch;margin:0 0 36px}
.px-hero h1 em{font-style:italic;color:var(--azul)}
.px-scrollcue{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);color:#fff;opacity:.75;animation:pxCue 2.2s ease-in-out infinite}
@keyframes pxCue{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@media(prefers-reduced-motion:reduce){.px-scrollcue{animation:none}}

/* Botones (reusa la forma píldora ya establecida en el sitio) */
.px-btn{display:inline-flex;align-items:center;gap:10px;padding:17px 36px;background:var(--azul);color:#fff;border:none;border-radius:999px;font-family:var(--font-body);font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.3,.64,1),background .2s,box-shadow .25s}
.px-btn:hover{background:#3ba0e6;transform:translateY(-2px);box-shadow:0 14px 32px -14px rgba(37,141,214,.8)}
.px-btn:active{transform:scale(.97)}
.px-btn.sm{padding:12px 24px;font-size:.84rem}

/* Cifras, solo tipografía, sin cajas */
.px-stats{display:flex;flex-wrap:wrap;gap:64px 56px;margin-top:64px}
.px-stat-num{font-family:var(--font-title);font-weight:800;font-size:clamp(3rem,6.5vw,5.4rem);letter-spacing:-.045em;line-height:1;color:#fff}
.px-stat-num small{color:var(--azul)}
.px-stat-label{font-size:.95rem;color:rgba(255,255,255,.6);margin-top:8px}

/* Reconocida por */
.px-badges{display:flex;justify-content:center;align-items:center;gap:56px;flex-wrap:wrap}
.px-badge{background:#fff;border-radius:16px;padding:18px 24px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(16,24,32,.04),0 8px 24px rgba(16,24,32,.06);transition:transform .3s cubic-bezier(.34,1.3,.64,1)}
.px-badge:hover{transform:translateY(-4px)}
.px-badge img{height:84px;width:84px;object-fit:contain}

/* Pilares */
.px-pillars{display:flex;flex-wrap:wrap;gap:60px;margin-top:70px}
.px-pillar{flex:1;min-width:220px}
.px-pillar-ico{font-size:1.6rem;color:var(--azul);margin-bottom:16px}
.px-pillar h3{font-family:var(--font-title);font-weight:700;font-size:1.3rem;margin:0 0 10px;color:#fff}
.px-pillar p{font-size:.92rem;line-height:1.7;color:rgba(255,255,255,.68);margin:0;max-width:34ch}

/* Áreas de práctica: lista + foto */
.px-areas-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.px-area-row{display:flex;align-items:center;justify-content:space-between;padding:19px 2px;border-bottom:1px solid rgba(255,255,255,.14);transition:padding-left .25s var(--ease)}
.px-area-row:first-child{border-top:1px solid rgba(255,255,255,.2)}
.px-area-row:hover{padding-left:14px}
.px-area-row span:first-child{font-family:var(--font-title);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;color:#fff}
.px-area-idx{font-size:.78rem;color:rgba(255,255,255,.5);font-weight:500}

/* Líneas de negocio, cinco paneles a sangre */
.px-lineas-wrap{display:flex;flex-wrap:wrap}
.px-linea{position:relative;flex:1;min-width:220px;min-height:360px;isolation:isolate;overflow:hidden;text-decoration:none;display:block;transition:transform .35s cubic-bezier(.34,1.3,.64,1)}
.px-linea:hover{transform:translateY(-6px)}
.px-linea img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.px-linea-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.42) 100%)}
.px-linea-body{position:absolute;left:0;right:0;bottom:0;padding:32px 30px}
.px-linea-ico{font-size:1.7rem;color:var(--azul);margin-bottom:14px}
.px-linea h3{font-family:var(--font-title);font-weight:700;font-size:1.15rem;color:#fff;margin:0 0 8px}
.px-linea p{font-size:.85rem;line-height:1.5;color:rgba(255,255,255,.68);margin:0}

/* Equipo: grilla de retratos en blanco y negro, igual que /equipo */
.px-eq-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:70px}
.px-eq-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--borde)}
.px-eq-card{position:relative;display:block;overflow:hidden;background:#fff;height:0;padding-top:112.5%;box-shadow:0 10px 28px -20px rgba(8,8,8,.45);transition:box-shadow .4s;text-decoration:none;color:inherit}
.px-eq-card:hover{box-shadow:0 20px 40px -18px rgba(8,8,8,.55)}
.px-eq-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;filter:grayscale(1);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.px-eq-card:hover .px-eq-img{transform:scale(1.04)}
.px-eq-panel{position:absolute;left:14px;right:14px;bottom:14px;color:#fff;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;z-index:1;background:rgba(8,10,12,.86);border-radius:14px;padding:16px 18px}
.px-eq-card:hover .px-eq-panel{opacity:1;transform:none}
.px-eq-role{font-size:.78rem;font-weight:500;color:#fff;margin-bottom:5px}
.px-eq-name{font-family:var(--font-title);font-size:1.08rem;font-weight:700;line-height:1.15;letter-spacing:-.02em;color:#fff}
.px-eq-area{margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.28);font-size:.7rem;font-weight:400;line-height:1.6;color:#fff}
.px-eq-vermas{margin-top:12px;font-size:.55rem;letter-spacing:2.8px;text-transform:uppercase;font-weight:700;color:#fff;opacity:.9}

/* Testimonios: una cita, rotación automática con puntos reales */
.px-testi-wrap{max-width:880px;margin:0 auto;text-align:center}
.px-testi-slide{display:none}
.px-testi-slide.on{display:block;animation:pxUp .6s var(--ease) both}
@keyframes pxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.px-testi-quote{font-family:var(--font-title);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.28;letter-spacing:-.02em;color:#fff;margin:0 0 30px}
.px-testi-cite{color:rgba(255,255,255,.55);font-size:.92rem}
.px-testi-dots{display:flex;justify-content:center;gap:10px;margin-top:44px}
.px-testi-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);border:none;padding:0;cursor:pointer;transition:background .25s,transform .25s}
.px-testi-dot.on{background:var(--azul);transform:scale(1.3)}

/* Contacto: tarjeta blanca flotando sobre la foto */
.px-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.px-contact-info{display:flex;gap:40px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.18);padding-top:26px;margin-top:40px}
.px-contact-info div span{display:block;font-size:.76rem;color:rgba(255,255,255,.55);margin-bottom:6px}
.px-contact-info div b{color:#fff;font-weight:600}
.px-contact-card{position:relative;z-index:1;background:#fff;border-radius:28px;padding:46px;box-shadow:0 26px 70px rgba(0,0,0,.4)}
.px-contact-card .form-group{margin-bottom:0}
.px-contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.px-contact-card .form-group label{color:var(--ink2,#4a5257);letter-spacing:2px}
.px-contact-card .form-inp{border:1px solid var(--line,#e6eaed);border-radius:12px;background:#f2f8fd;padding:14px 16px;border-bottom:1px solid var(--line,#e6eaed)}
.px-contact-card .form-inp:focus{border-color:var(--azul);background:#fff;box-shadow:0 0 0 4px rgba(37,141,214,.12)}
.px-contact-card .px-btn{width:100%;justify-content:center;margin-top:6px}

/* Cobranza / DEBITURA, misma idea de foto a sangre + tarjeta de rasgos */
.px-cob-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.px-cob-logo{background:#060606;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:80px 7%;min-height:480px}
.px-cob-logo img{width:min(68%,360px);height:auto;object-fit:contain}
.px-cob-content{background:var(--negro);color:#fff;padding:90px 7%;display:flex;flex-direction:column;justify-content:center}
.px-cob-feats{display:flex;flex-direction:column;margin:32px 0 36px}
.px-cob-feat{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.px-cob-feat:first-child{border-top:1px solid rgba(255,255,255,.08)}
.px-cob-feat b{color:#fff}
.px-cob-feat span{font-size:.85rem;font-weight:300;line-height:1.5;color:rgba(255,255,255,.65)}

@media(max-width:1000px){
  .px-areas-grid,.px-contact-grid,.px-cob-grid{grid-template-columns:1fr}
  .px-eq-grid{grid-template-columns:repeat(3,1fr)}
  .px-contact-fields{grid-template-columns:1fr}
  .px-section{padding:100px 7%}
}
@media(max-width:640px){
  .px-eq-grid{grid-template-columns:repeat(2,1fr)}
  .px-stats{gap:40px 36px}
  .px-contact-card{padding:30px}
}