/* ==========================================================================
   /servicios/px-arch — estilos propios de la página.
   Se carga DESPUÉS de industrias.css, que aporta las variables base
   (--ink, --ink-soft, --line, --muted, fuentes), reset, header, nav y footer.
   Aquí solo va lo que no existía: namespace .px-*.

   ACENTO — regla de marca: solo cuatro lugares en toda la página.
     1. CTA primario (.px-btn--primary; se usa en el hero y en el cierre)
     2. Borde de la columna Core en los niveles (.px-tier--core)
     3. (libre; la etiqueta del hero se eliminó)
     4. Línea conectora de los pasos (.px-steps__line / __rail)
   Los tres elementos que el brief también pedía "con acento" (arcos del hero,
   línea-bisagra del planteamiento, borde de PxArch en la comparación) usan
   tokens neutrales para no romper el límite. Para volverlos lima, basta
   cambiar estos tres valores a var(--px-accent):
   ========================================================================== */
:root{
  --px-accent:#b6f542;
  --px-accent-hover:#c8ff5c;
  --px-arcs:#f4f5f7;
  --px-hinge:#ffffff;
  --px-compare-hl:#f4f5f7;

  --px-faint:#8a90a0;
  --px-max:1400px;
  --px-header-h:68px;
  --px-gutter:clamp(20px,4.5vw,72px);
  --px-section-y:clamp(64px,9vw,112px);
}

.px-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Foco visible en contenido de la página: blanco, para no gastar el acento */
.px-main a:focus-visible,
.px-main summary:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
.px-skip{position:absolute;left:12px;top:-60px;z-index:60;background:#fff;color:var(--ink);font-family:var(--font-mono);font-size:12px;padding:10px 14px;border-radius:2px}
.px-skip:focus{top:12px;outline:2px solid #fff;outline-offset:2px}

.px-wrap{max-width:var(--px-max);margin:0 auto;padding:0 var(--px-gutter)}
.px-section{padding:var(--px-section-y) 0}
.px-h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.6vw,46px);line-height:1.12;letter-spacing:-.01em;color:var(--paper);max-width:20ch}
.px-lede{margin:20px 0 0;max-width:62ch;font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:var(--muted)}
.px-mono{font-family:var(--font-mono)}
.px-note{margin:20px 0 0;font-family:var(--font-mono);font-size:12px;line-height:1.6;letter-spacing:.02em;color:var(--px-faint);max-width:80ch}

/* ---------- Botones ---------- */
.px-btn{display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;padding:17px 28px;border-radius:2px;transition:background .2s ease-out,border-color .2s ease-out,color .2s ease-out}
.px-btn--primary{color:var(--ink);background:var(--px-accent)}
.px-btn--primary:hover{background:var(--px-accent-hover);color:var(--ink)}
.px-btn--ghost{color:#fff;border:1px solid rgba(255,255,255,.35)}
.px-btn--ghost:hover{border-color:#fff;color:#fff}

/* ---------- 1. Hero ----------
   Tres capas: imagen (<img>) · scrim (dos gradientes) · contenido.
   Valores de opacidad del scrim, ajustables aquí: */
.px-hero{
  --px-scrim-global:.35;   /* oscurecimiento uniforme sobre toda la imagen */
  --px-scrim-grad:.9;      /* gradiente desde la esquina inferior izquierda (sólido hasta 50% del radio) */
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--px-header-h) + 24px) 0 10vh;
  background:var(--ink);
}
.px-hero__bg{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:center}
.px-hero.is-parallax{--px-par-extra:35%}  /* debe coincidir con el factor 0.35 de px-arch.js */
.px-hero.is-parallax .px-hero__bg{top:calc(var(--px-par-extra) * -1);height:calc(100% + var(--px-par-extra));will-change:transform}
.px-hero__scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 95% 115% at 0% 100%,
      rgba(24,26,34,var(--px-scrim-grad)) 0%,
      rgba(24,26,34,var(--px-scrim-grad)) 50%,
      rgba(24,26,34,calc(var(--px-scrim-grad) * .55)) 80%,
      rgba(24,26,34,0) 100%),
    rgba(24,26,34,var(--px-scrim-global));
}
.px-hero__logo{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,calc(-50% - 80px));width:min(38vw,620px);height:auto;animation:px-hero-logo .35s ease-out both}
.px-hero__content{position:relative;z-index:1;width:100%;animation:px-hero-rise .38s ease-out .05s both}
.px-h1{margin:0;max-width:16ch;font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.4vw,60px);line-height:1.1;letter-spacing:-.01em;color:#fff}
.px-hero__sub{margin:24px 0 0;max-width:62ch;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:#fff}
.px-hero__cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}
.px-hero .px-btn{border-radius:6px}
.px-hero .px-btn--ghost{border-color:#fff}

@keyframes px-hero-logo{from{opacity:0}}
@keyframes px-hero-rise{from{opacity:0;transform:translateY(14px)}}

/* ---------- 2. Barra de sectores ---------- */
.px-sectors{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.px-sectors__list{margin:0 auto;max-width:var(--px-max);padding:18px var(--px-gutter);list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--px-faint)}
.px-sectors__item{display:flex;align-items:center}
.px-sectors__item + .px-sectors__item::before{content:'·';padding:0 14px}
/* Para sustituir por logos de cliente: reemplaza el <span class="px-sectors__name">
   por <img class="px-sectors__logo" src="…" alt="Cliente">. Los separadores se conservan. */
.px-sectors__logo{display:block;height:20px;width:auto;opacity:.6}

/* ---------- 3. Planteamiento ---------- */
.px-plan__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.px-plan__body p{margin:0 0 1.2em;font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:var(--muted);max-width:62ch}
.px-plan__body .px-plan__hinge{margin:clamp(28px,4vw,48px) 0 0;padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line);font-family:var(--font-sans);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.2;letter-spacing:-.02em;color:var(--px-hinge);max-width:22ch}
.px-plan__x{color:#6bf400}
.px-plan__after{margin:24px 0 0 !important}

/* ---------- 4. Comparación ---------- */
.px-compare{margin-top:clamp(32px,4.5vw,56px)}
.px-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.px-table th,.px-table td{padding:20px 24px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}
.px-table thead th{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--px-faint);border-bottom:1px solid var(--line);padding-top:24px;padding-bottom:16px}
.px-table tbody th{font-family:var(--font-sans);font-weight:500;color:#fff;width:28%}
.px-table td{color:var(--muted)}
.px-table .px-table__px{color:#fff;background:rgba(255,255,255,.03);border-left:1px solid var(--px-compare-hl);border-right:1px solid var(--px-compare-hl)}
.px-table thead .px-table__px{color:#fff;border-top:1px solid var(--px-compare-hl);border-radius:6px 6px 0 0}
.px-table tbody tr:last-child .px-table__px{border-bottom:1px solid var(--px-compare-hl);border-radius:0 0 6px 6px}

/* ---------- 5. Qué incluye ---------- */
.px-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(32px,4.5vw,56px)}
.px-card{background:var(--ink-soft);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.px-card__media{aspect-ratio:4/5;overflow:hidden;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.px-card__media svg,.px-card__media img{display:block;width:100%;height:100%}
.px-card__media img{object-fit:cover}
/* Parallax de las imágenes de las cards: la imagen es 20% más alta que el marco y px-arch.js la desplaza con el scroll. */
.px-cards.is-parallax .px-card__media{position:relative}
.px-cards.is-parallax .px-card__media img{position:absolute;left:0;top:-10%;height:120%;will-change:transform}
.px-ill{fill:none;stroke:var(--px-arcs);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.px-ill *{vector-effect:non-scaling-stroke}
.px-ill__f{fill:var(--px-arcs);stroke:none}
.px-ill__dim{stroke-opacity:.4}
.px-ill__pulse{stroke-opacity:.75}
.px-card__body{padding:clamp(24px,2.6vw,36px)}
.px-card__n{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--px-faint)}
.px-card h3{margin:18px 0 0;font-family:var(--font-display);font-weight:700;font-size:clamp(20px,1.8vw,24px);line-height:1.2;color:var(--paper)}
.px-card p{margin:14px 0 0;font-size:15.5px;line-height:1.65;color:var(--muted)}

/* ---------- 6. Cómo funciona ---------- */
.px-steps-wrap{position:relative;margin-top:clamp(32px,4.5vw,56px)}
.px-steps{position:relative;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
/* Línea conectora: dos arcos que salvan el vano entre los pasos, como el arco del hero */
.px-steps__line{position:absolute;left:0;top:0;width:100%;height:84px;overflow:visible;pointer-events:none}
.px-steps__line path{fill:none;stroke:var(--px-accent);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.px-step{position:relative;padding:104px clamp(12px,2vw,32px) 0;text-align:center}
.px-step::before{content:'';position:absolute;left:50%;top:76px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--px-accent)}
.px-step__n{display:block;font-family:var(--font-mono);font-weight:500;font-size:clamp(44px,5.2vw,72px);line-height:1;letter-spacing:-.02em;color:#fff}
.px-step h3{margin:22px 0 0;font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.5vw,20px);line-height:1.25;color:var(--paper)}
.px-step p{margin:12px auto 0;max-width:34ch;font-size:15.5px;line-height:1.65;color:var(--muted)}

/* ---------- 7. Niveles ---------- */
.px-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(6,auto);column-gap:20px;margin-top:clamp(32px,4.5vw,56px)}
.px-tier{grid-row:1 / span 6;display:grid;grid-template-rows:subgrid;background:var(--ink-soft);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.px-tier--core{border-color:var(--px-accent);box-shadow:0 0 0 1px var(--px-accent)}
.px-tier__head{padding:clamp(24px,2.4vw,32px);border-bottom:1px solid var(--line)}
.px-tier__name{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2vw,28px);line-height:1.1;color:#fff}
.px-tier__badge{font-family:var(--font-mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:2px;padding:4px 8px}
.px-tier__price{margin:22px 0 0;font-family:var(--font-mono);font-weight:500;font-size:clamp(32px,3.2vw,42px);line-height:1;letter-spacing:-.02em;color:#fff}
.px-tier__price small{display:block;margin-top:10px;font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--px-faint)}
.px-tier__list{display:contents;margin:0}
.px-tier__row{margin:0;padding:16px clamp(24px,2.4vw,32px);border-bottom:1px solid var(--line)}
.px-tier__row:last-child{border-bottom:0}
.px-tier__row dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--px-faint)}
.px-tier__row dd{margin:6px 0 0;font-size:17px;line-height:1.4;color:#fff}

/* ---------- 8. Preguntas frecuentes ---------- */
.px-faq{margin-top:clamp(32px,4.5vw,56px);border-top:1px solid var(--line);max-width:860px}
.px-faq details{border-bottom:1px solid var(--line)}
.px-faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;list-style:none;font-size:clamp(17px,1.5vw,20px);font-weight:500;line-height:1.4;color:#fff}
.px-faq summary::-webkit-details-marker{display:none}
.px-faq summary:hover{color:var(--paper)}
.px-faq__icon{flex:none;position:relative;width:14px;height:14px;transition:transform .2s ease-out}
.px-faq__icon::before,.px-faq__icon::after{content:'';position:absolute;background:currentColor}
.px-faq__icon::before{left:0;right:0;top:6px;height:2px}
.px-faq__icon::after{top:0;bottom:0;left:6px;width:2px}
.px-faq details[open] .px-faq__icon{transform:rotate(45deg)}
.px-faq__a{margin:0;padding:0 clamp(0px,4vw,48px) 26px 0;font-size:16.5px;line-height:1.7;color:var(--muted);max-width:66ch}

/* ---------- 9. Cierre ---------- */
.px-close{border-top:1px solid var(--line)}
.px-close__inner{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px 56px}
.px-close__text{flex:1 1 460px}
.px-close__text .px-lede{color:rgba(255,255,255,.72)}

/* ---------- Responsive ---------- */
@media (max-width:1023.98px){
  .px-plan__grid{grid-template-columns:1fr}
  .px-cards{grid-template-columns:1fr}
}

/* < 768px: las dos tablas dejan de ser tabla y pasan a tarjetas apiladas */
@media (max-width:767.98px){
  /* Comparación */
  .px-table,.px-table tbody,.px-table tr,.px-table th,.px-table td{display:block;width:auto}
  .px-table thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
  .px-table tr{margin-bottom:16px;background:var(--ink-soft);border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .px-table tbody th{width:auto;padding:16px 20px 12px;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--px-faint)}
  .px-table td{display:flex;justify-content:space-between;gap:20px;padding:14px 20px;border-bottom:0;text-align:right}
  .px-table td::before{content:attr(data-label);flex:none;max-width:45%;text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--px-faint)}
  .px-table .px-table__px{border-left:0;border-right:0;border-top:1px solid var(--px-compare-hl);border-radius:0;background:rgba(255,255,255,.04)}
  .px-table tbody tr:last-child .px-table__px{border-bottom:0;border-radius:0}

  /* Niveles: Core primero */
  .px-tiers{display:flex;flex-direction:column;gap:16px}
  .px-tier{display:block}
  .px-tier--core{order:-1}

  /* Pasos: línea vertical */
  .px-steps{grid-template-columns:1fr;padding-left:36px}
  .px-steps__line{display:none}
  .px-steps::before{content:'';position:absolute;left:4px;top:8px;bottom:8px;width:1.5px;background:var(--px-accent)}
  .px-step{padding:0 0 36px;text-align:left}
  .px-step:last-child{padding-bottom:0}
  .px-step::before{left:-36px;top:calc(clamp(44px,5.2vw,72px) / 2 - 4px);margin-left:0}
  .px-step p{margin-left:0}

  .px-close__inner{align-items:flex-start}
}

@media (max-width:767.98px){
  .px-hero{--px-scrim-global:.5;--px-scrim-grad:.93;padding-bottom:6vh}
  .px-hero__logo{top:33%;width:70vw}
  .px-hero.is-parallax{--px-par-extra:25%}  /* factor 0.25 de px-arch.js en móvil */
  .px-h1{font-size:clamp(28px,8vw,40px)}
  .px-hero__cta{flex-direction:column}
  .px-hero .px-btn{width:100%;text-align:center}
}

@media (max-width:520px){
  .px-sectors__list{justify-content:flex-start;font-size:10.5px}
  .px-btn{width:100%;text-align:center}
}

@media (prefers-reduced-motion: reduce){
  .px-hero__logo,.px-hero__content{animation:none}
  .px-btn,.px-faq__icon{transition:none}
}