/* ============================================================
   tecnologia.css — Landing "La Tecnología" (Impact as a Service)
   Molde de plataforma B2B (referentes Solaris / Celcoin).
   Piel de landing = marca PP (navy + ámbar, Poppins).
   Las pantallas del producto van en SU azul real (.ui-*).
   ============================================================ */

body.pg-tec {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  color: #101a24;
  background: #0b131c;
  -webkit-font-smoothing: antialiased;
}
body.pg-tec .wrap { width: min(1180px, 92vw); margin-inline: auto; }
body.pg-tec section { position: relative; }

/* Header sobre navy: variante clara */
body.pg-tec .site-header { background: #0b131c; border-bottom: 1px solid rgba(255,255,255,.08); }
body.pg-tec .site-nav a { color: #e7ebef; }
body.pg-tec .site-nav a:hover,
body.pg-tec .site-nav a[aria-current="page"] { color: #f3b53c; opacity: 1; }

/* ── HERO ─────────────────────────────────────────────────── */
body.pg-tec .thero {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(31,111,235,.32), transparent 60%),
    radial-gradient(760px 520px at 8% 8%, rgba(243,181,60,.10), transparent 62%),
    #0b131c;
  padding: clamp(2.4rem, 5vw, 4.2rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
/* ── HERO (foto + mensaje) ────────────────────────────────── */
body.pg-tec .thero {
  background:
    linear-gradient(90deg, rgba(8,15,23,.9) 0%, rgba(8,15,23,.66) 46%, rgba(8,15,23,.28) 100%),
    url('../img/tec/hero.jpg');
  background-size: cover; background-position: center right;
  padding: clamp(3.4rem, 10vh, 7rem) 0 clamp(3rem, 7vh, 5.5rem);
  min-height: calc(100vh - 100px); display: flex; align-items: center; overflow: hidden;
}
body.pg-tec .thero__inner { max-width: 44rem; }
body.pg-tec .thero__grid {
  display: grid; grid-template-columns: 1.02fr 1.18fr;
  gap: clamp(2rem, 4vw, 3.6rem); align-items: center;
}
body.pg-tec .thero__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  color: #f3b53c; font-size: .82rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1.2rem;
}
body.pg-tec .thero__kicker::before { content:""; width: 26px; height: 2px; background: #f3b53c; }
body.pg-tec .thero__title {
  color: #fff; font-weight: 700; letter-spacing: -.025em;
  line-height: 1.03; font-size: clamp(2.5rem, 5.4vw, 4.15rem); margin: 0 0 1.4rem;
}
body.pg-tec .thero__title em { font-style: normal; color: #f3b53c; }
body.pg-tec .thero__sub {
  color: #b9c2cc; font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.62; max-width: 34rem; margin: 0 0 2rem;
}
body.pg-tec .thero__cta { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
body.pg-tec .btn-amber {
  background: #f3b53c; color: #101a24; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 1rem;
  padding: .95rem 1.6rem; border-radius: 10px; text-decoration: none;
  display: inline-flex; align-items: center; gap: .6rem;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 14px 30px -12px rgba(243,181,60,.6);
}
body.pg-tec .btn-amber:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -12px rgba(243,181,60,.7); }
body.pg-tec .btn-ghost {
  color: #e7ebef; text-decoration: none; font-weight: 500; font-size: .98rem;
  display: inline-flex; align-items: center; gap: .5rem; padding: .95rem .4rem;
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
body.pg-tec .btn-ghost:hover { border-color: rgba(255,255,255,.4); }
body.pg-tec .thero__note { color: #8a95a1; font-size: .82rem; margin: 1.2rem 0 0; }

/* KPIs bajo el hero */
body.pg-tec .thero__stats {
  display: flex; gap: clamp(1.4rem, 3vw, 3rem); flex-wrap: wrap;
  margin-top: clamp(2.4rem, 4vw, 3.4rem); padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,.09);
}
body.pg-tec .thero__stat b { display: block; color: #fff; font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
body.pg-tec .thero__stat span { color: #94a0ac; font-size: .82rem; }

/* ── Marco de navegador / escritorio (mockups) ────────────── */
body.pg-tec .frame {
  border-radius: 13px; overflow: hidden; background: #f4f6fa;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
}
body.pg-tec .frame--float { transform: perspective(1600px) rotateY(-8deg) rotateX(2deg); }
body.pg-tec .frame__bar {
  display: flex; align-items: center; gap: 7px;
  background: #dfe3ea; padding: 9px 13px;
}
body.pg-tec .frame__bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
body.pg-tec .frame__url {
  margin-left: 10px; flex: 1; background: #fff; border-radius: 6px;
  padding: 5px 12px; font-size: 11.5px; color: #8a939c; max-width: 360px;
}
body.pg-tec .frame__url b { color: #1f2933; font-weight: 500; }
body.pg-tec .frame__img { display: block; width: 100%; height: auto; background: #f4f6fa; }
body.pg-tec .frame__crop { max-height: 430px; overflow: hidden; background: #f4f6fa; }
body.pg-tec .frame__crop .frame__img { width: 100%; }

/* ── App interna simulada (paleta REAL del producto) ──────── */
body.pg-tec .ui {
  --nvy:#030d63; --blu:#0085db; --grn:#4bd08b; --ind:#303f9f; --wrn:#fb8c00;
  --uline:#e6e9f2; --umut:#6b7492; --ubg:#f4f6fa;
  display: flex; background: var(--ubg); font-size: 12px; color: #1f2743;
}
body.pg-tec .ui__side {
  width: 62px; background: #fff; border-right: 1px solid var(--uline);
  display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 5px; flex-shrink: 0;
}
body.pg-tec .ui__logo {
  width: 30px; height: 30px; border-radius: 8px; margin-bottom: 10px;
  background: linear-gradient(135deg, var(--nvy), var(--blu));
  color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
body.pg-tec .ui__ico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; }
body.pg-tec .ui__ico svg { width: 17px; height: 17px; }
body.pg-tec .ui__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body.pg-tec .ui__top {
  height: 44px; background: #fff; border-bottom: 1px solid var(--uline);
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
}
body.pg-tec .ui__crumb { color: var(--umut); font-size: 11px; }
body.pg-tec .ui__crumb b { color: var(--nvy); }
body.pg-tec .ui__body { padding: 16px; overflow: hidden; }
body.pg-tec .ui h4 { margin: 0; color: var(--nvy); font-size: 15px; }
body.pg-tec .ui .umut { color: var(--umut); }
body.pg-tec .ucard { background: #fff; border: 1px solid var(--uline); border-radius: 11px; box-shadow: 0 6px 16px rgba(16,24,64,.05); }
body.pg-tec .uchip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
body.pg-tec .uchip--ok { background: #e7f6ec; color: #2e7d32; }
body.pg-tec .uchip--info { background: #e7f0fb; color: #1976d2; }
body.pg-tec .uchip--warn { background: #fff2e0; color: #b26a00; }
body.pg-tec .ubar { height: 6px; border-radius: 4px; background: #eef1f4; overflow: hidden; }
body.pg-tec .ubar > i { display: block; height: 100%; border-radius: 4px; background: var(--blu); }

/* ── Secciones claras / oscuras de la landing ─────────────── */
body.pg-tec .band { padding: clamp(3.4rem, 6vw, 6rem) 0; }
body.pg-tec .band--navy { background: #0b131c; }
body.pg-tec .band--deep { background: #071019; }
body.pg-tec .band--light { background: #f4f6f8; color: #101a24; }
body.pg-tec .eyebrow2 {
  color: #1f6feb; font-size: .8rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 1rem;
}
body.pg-tec .band--navy .eyebrow2, body.pg-tec .band--deep .eyebrow2 { color: #f3b53c; }
body.pg-tec .band__title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.12; margin: 0 0 1rem; color: inherit;
}
body.pg-tec .band--navy .band__title, body.pg-tec .band--deep .band__title { color: #fff; }
body.pg-tec .band__intro { font-size: 1.08rem; line-height: 1.6; max-width: 44rem; margin: 0; }
body.pg-tec .band--light .band__intro { color: #4a5661; }
body.pg-tec .band--navy .band__intro, body.pg-tec .band--deep .band__intro { color: #b9c2cc; }
body.pg-tec .band__head { max-width: 52rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }

/* ── Vista showcase estilo login del app (fondo verde + 6 cards + panel demo) ── */
body.pg-tec .schero { background: #0b1f4d; }
body.pg-tec .schero__bar {
  background: #0b1f4d; display: flex; align-items: center; gap: 14px;
  padding: 16px clamp(1.4rem, 4vw, 3.4rem); border-bottom: 1px solid rgba(255,255,255,.06);
}
body.pg-tec .schero__bar img { height: 30px; width: auto; }
body.pg-tec .schero__bar b { color: #fff; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
body.pg-tec .schero__stage {
  position: relative;
  background:
    radial-gradient(1100px 560px at 18% 0%, #1f6347, transparent 62%),
    radial-gradient(1000px 680px at 92% 108%, #0d3627, transparent 60%),
    linear-gradient(158deg, #17543c 0%, #0c2c21 100%);
  padding: clamp(1.8rem, 3.5vw, 3.4rem);
}
body.pg-tec .schero__grid {
  position: relative; display: grid; grid-template-columns: 2fr 1fr;
  gap: clamp(1.4rem, 2.5vw, 2.2rem); max-width: 1400px; margin: 0 auto; align-items: start;
}
body.pg-tec .sccards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 1.8vw, 1.5rem); }
body.pg-tec .sccard {
  background: #fff; border-radius: 18px; padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: 0 18px 40px -22px rgba(4,13,50,.55); position: relative;
}
body.pg-tec .sccard__ic { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
body.pg-tec .sccard__ic svg { width: 26px; height: 26px; }
body.pg-tec .sccard__tag {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-family: 'Poppins', monospace; font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  padding: 3px 10px; border-radius: 999px;
}
body.pg-tec .sccard h3 { margin: 0 0 .55rem; font-size: 1.28rem; font-weight: 600; color: #101a3a; letter-spacing: -.01em; }
body.pg-tec .sccard p { margin: 0; font-size: .95rem; line-height: 1.55; color: #4a5570; }
body.pg-tec .tag-blue { background: #e9ecfb; color: #3a53c5; }
body.pg-tec .tag-green { background: #e0f4ea; color: #1a9457; }
body.pg-tec .ic-blue { background: #e9ecfb; color: #3a53c5; }
body.pg-tec .ic-green { background: #e0f4ea; color: #1a9457; }

/* Panel derecho: CTA con 3 pasos (reemplaza el login) */
body.pg-tec .scpanel {
  background: #0e2450; border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  padding: clamp(1.7rem, 2.5vw, 2.3rem); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
body.pg-tec .scpanel__eye { font-family: 'Poppins', monospace; font-size: .72rem; font-weight: 600; letter-spacing: .18em; color: #7fb2ff; margin: 0 0 .8rem; }
body.pg-tec .scpanel__h { color: #fff; font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .6rem; }
body.pg-tec .scpanel__sub { color: #aeb9d6; font-size: .98rem; line-height: 1.5; margin: 0 0 1.6rem; }
body.pg-tec .scstep { display: flex; gap: .9rem; padding: .1rem 0 1.3rem; position: relative; }
body.pg-tec .scstep:last-of-type { padding-bottom: 1.5rem; }
body.pg-tec .scstep__n {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(47,95,224,.18); color: #7fb2ff; border: 1px solid rgba(127,178,255,.4);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem;
}
body.pg-tec .scstep__b { color: #fff; font-size: 1.02rem; font-weight: 600; margin: 4px 0 3px; }
body.pg-tec .scstep__t { color: #9fabca; font-size: .9rem; line-height: 1.45; margin: 0; }
body.pg-tec .scpanel .btn-amber { width: 100%; justify-content: center; }
body.pg-tec .scpanel__foot { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.1); color: #aab6dd; font-size: .84rem; text-align: center; }
@media (max-width: 980px) {
  body.pg-tec .schero__grid { grid-template-columns: 1fr; }
  body.pg-tec .scpanel { order: -1; }
}
@media (max-width: 620px) { body.pg-tec .sccards { grid-template-columns: 1fr; } }

/* ── Showcase 6 módulos (estilo home/login del app) ───────── */body.pg-tec .modgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: clamp(2.6rem, 5vw, 4.4rem); }
body.pg-tec .modgrid__card {
  background: #101d34; border: 1px solid rgba(255,255,255,.09); border-radius: 14px;
  padding: 1.3rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem;
  transition: transform .15s, border-color .15s, background .15s; text-decoration: none;
}
body.pg-tec .modgrid__card:hover { transform: translateY(-3px); border-color: rgba(243,181,60,.4); background: #13233f; }
body.pg-tec .modgrid__top { display: flex; align-items: center; gap: .7rem; }
body.pg-tec .modgrid__ic { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
body.pg-tec .modgrid__ic svg { width: 20px; height: 20px; }
body.pg-tec .modgrid__n { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: #5f6c7e; }
body.pg-tec .modgrid__name { color: #fff; font-size: 1.08rem; font-weight: 600; margin: 0; }
body.pg-tec .modgrid__desc { color: #9aa6b2; font-size: .9rem; line-height: 1.5; margin: 0; }
@media (max-width: 900px) { body.pg-tec .modgrid { grid-template-columns: 1fr; } }

/* ── Módulos ──────────────────────────────────────────────── */
body.pg-tec .mods { display: flex; flex-direction: column; gap: clamp(2.6rem, 5vw, 5rem); }
body.pg-tec .mod { display: grid; grid-template-columns: 1fr 1.28fr; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
body.pg-tec .mod:nth-child(even) .mod__txt { order: 2; }
body.pg-tec .mod__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(31,111,235,.14); color: #6ea8ff;
  font-weight: 700; font-size: 15px; margin-bottom: 1.1rem;
}
body.pg-tec .mod__name { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -.01em; margin: 0 0 .8rem; }
body.pg-tec .mod__desc { color: #aeb8c2; font-size: 1.02rem; line-height: 1.62; margin: 0 0 1.2rem; }
body.pg-tec .mod__feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
body.pg-tec .mod__feats li { color: #cfd6de; font-size: .95rem; display: flex; align-items: flex-start; gap: .6rem; }
body.pg-tec .mod__feats svg { width: 17px; height: 17px; color: #4bd08b; flex-shrink: 0; margin-top: 2px; }
body.pg-tec .mod__tag { display:inline-block; margin-top:1.1rem; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:#7c8794; }

/* ── Gancho (Kanban) ──────────────────────────────────────── */
body.pg-tec .hook { display: grid; grid-template-columns: .92fr 1.25fr; gap: clamp(2rem,4vw,3.6rem); align-items: center; }
body.pg-tec .kan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; background: #eef1f7; }
body.pg-tec .kan__col { background: #f7f9fc; border: 1px solid #e2e7f0; border-radius: 10px; padding: 10px; }
body.pg-tec .kan__h { font-size: 11px; font-weight: 700; color: #303f9f; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; }
body.pg-tec .kan__h span { background: #e3e8f7; color: #5560a8; border-radius: 999px; padding: 1px 7px; font-size: 10px; }
body.pg-tec .kan__card { background: #fff; border: 1px solid #e6e9f2; border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(16,24,64,.05); }
body.pg-tec .kan__card:last-child { margin-bottom: 0; }
body.pg-tec .kan__ttl { font-size: 12px; color: #1f2743; font-weight: 500; line-height: 1.3; }
body.pg-tec .kan__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
body.pg-tec .kan__ava { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ── White-label ──────────────────────────────────────────── */
body.pg-tec .wl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
body.pg-tec .wl__card {
  background: #fff; border: 1px solid #e6e9ee; border-radius: 14px;
  padding: 1.7rem 1.6rem; transition: transform .15s, box-shadow .15s;
}
body.pg-tec .wl__card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(16,26,36,.35); }
body.pg-tec .wl__ic {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 1.1rem;
  background: #101a24; color: #f3b53c; display: flex; align-items: center; justify-content: center;
}
body.pg-tec .wl__ic svg { width: 23px; height: 23px; }
body.pg-tec .wl__card h3 { margin: 0 0 .5rem; font-size: 1.15rem; color: #101a24; font-weight: 600; }
body.pg-tec .wl__card p { margin: 0; color: #55616c; font-size: .96rem; line-height: 1.55; }

/* ── Cómo funciona ────────────────────────────────────────── */
body.pg-tec .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); }
body.pg-tec .step { position: relative; }
body.pg-tec .step__n {
  font-size: 3rem; font-weight: 700; letter-spacing: -.03em;
  color: rgba(255,255,255,.14); line-height: 1; margin-bottom: .6rem;
}
body.pg-tec .step h3 { color: #fff; font-size: 1.2rem; font-weight: 600; margin: 0 0 .5rem; }
body.pg-tec .step p { color: #aeb8c2; font-size: .96rem; line-height: 1.55; margin: 0; }

/* ── Formulario de calificación (el corazón) ──────────────── */
body.pg-tec .lead {
  background:
    radial-gradient(700px 380px at 88% 0%, rgba(31,111,235,.3), transparent 62%),
    #0b131c;
  padding: clamp(3.4rem, 6vw, 6rem) 0;
}
body.pg-tec .lead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
body.pg-tec .lead__q { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.14; margin: 0 0 1.1rem; }
body.pg-tec .lead__q em { font-style: normal; color: #f3b53c; }
body.pg-tec .lead__p { color: #b9c2cc; font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.6rem; }
body.pg-tec .lead__perks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
body.pg-tec .lead__perks li { color: #cfd6de; font-size: .96rem; display: flex; align-items: center; gap: .7rem; }
body.pg-tec .lead__perks svg { width: 18px; height: 18px; color: #4bd08b; flex-shrink: 0; }

body.pg-tec .form {
  background: #fff; border-radius: 18px; padding: clamp(1.8rem, 3vw, 2.6rem);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
body.pg-tec .form h3 { margin: 0 0 .3rem; font-size: 1.3rem; color: #101a24; font-weight: 700; }
body.pg-tec .form__hint { margin: 0 0 1.5rem; color: #6b7480; font-size: .9rem; }
body.pg-tec .field { margin-bottom: 1rem; }
body.pg-tec .field label { display: block; font-size: .82rem; font-weight: 600; color: #3a4550; margin-bottom: .4rem; }
body.pg-tec .field input, body.pg-tec .field select {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: .96rem;
  padding: .8rem .9rem; border: 1px solid #d7dce2; border-radius: 10px; color: #101a24;
  background: #fbfcfd; transition: border-color .15s, box-shadow .15s;
}
body.pg-tec .field input:focus, body.pg-tec .field select:focus {
  outline: none; border-color: #1f6feb; box-shadow: 0 0 0 3px rgba(31,111,235,.14); background: #fff;
}
body.pg-tec .field--row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
body.pg-tec .form .btn-amber { width: 100%; justify-content: center; margin-top: .6rem; font-size: 1.02rem; padding: 1rem; }
body.pg-tec .form__legal { margin: 1rem 0 0; font-size: .76rem; color: #97a0aa; line-height: 1.5; text-align: center; }

/* ── Banda "Plataforma de Gestión Comunitaria" (frase 2/3 + mockup 1/3) ── */
body.pg-tec .scband {
  background:
    radial-gradient(1100px 560px at 82% 0%, rgba(31,111,235,.28), transparent 60%),
    #0b131c;
  padding: clamp(3.2rem, 6vw, 5.5rem) 0;
}
body.pg-tec .scband__grid { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
body.pg-tec .scband__eye { color: #f3b53c; font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1.1rem; }
body.pg-tec .scband__phrase { color: #fff; font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.04; margin: 0; }
body.pg-tec .scband__sub { color: #b9c2cc; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.6; max-width: 34rem; margin: 1.3rem 0 0; }
@media (max-width: 820px) { body.pg-tec .scband__grid { grid-template-columns: 1fr; } }

/* ── Mockup laptop (pantalla sobre objeto) ────────────────── */
body.pg-tec .laptop { width: 100%; max-width: 560px; margin: 0 auto; }
body.pg-tec .laptop__lid {
  background: #0f131b; border: 1px solid #262c38;
  border-radius: 15px 15px 6px 6px; padding: 12px 12px 14px;
  box-shadow: 0 34px 66px -30px rgba(0,0,0,.75);
}
body.pg-tec .laptop__cam { width: 5px; height: 5px; border-radius: 50%; background: #39414f; margin: 1px auto 8px; }
body.pg-tec .laptop__lid img { display: block; width: 100%; height: auto; border-radius: 4px; background: #f4f6fa; }
body.pg-tec .laptop__deck {
  position: relative; width: 118%; margin: -1px 0 0 -9%; height: 15px;
  background: linear-gradient(180deg, #d3d8e0, #a7aeba);
  border-radius: 2px 2px 12px 12px;
}
body.pg-tec .laptop__deck::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 20%; height: 5px; background: #8b93a3; border-radius: 0 0 7px 7px;
}

/* ── Acordeón de módulos (cerrado por defecto, fondo blanco) ── */
body.pg-tec .macc { display: flex; flex-direction: column; gap: 1rem; }
body.pg-tec .macc__item {
  border: 1px solid #e6e9ee; border-radius: 15px;
  background: #fff; overflow: hidden; transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 10px 28px -22px rgba(16,26,36,.4);
}
body.pg-tec .macc__item[open] { border-color: #cdd4dd; box-shadow: 0 18px 40px -24px rgba(16,26,36,.5); }
body.pg-tec .macc__sum {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 1.6rem;
}
body.pg-tec .macc__sum::-webkit-details-marker { display: none; }
body.pg-tec .macc__n { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: #aab2bb; flex-shrink: 0; }
body.pg-tec .macc__ic { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
body.pg-tec .macc__ic svg { width: 22px; height: 22px; }
body.pg-tec .macc__name { color: #101a24; font-size: 1.2rem; font-weight: 600; flex: 1; letter-spacing: -.01em; }
body.pg-tec .macc__tag { font-family: 'Poppins', monospace; font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
body.pg-tec .macc__chev { color: #98a1ab; flex-shrink: 0; transition: transform .2s; }
body.pg-tec .macc__item[open] .macc__chev { transform: rotate(180deg); }
body.pg-tec .macc__body {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 3vw, 2.6rem);
  align-items: center; padding: .2rem 1.6rem 1.9rem;
}
body.pg-tec .macc__desc { color: #55616c; font-size: 1.02rem; line-height: 1.6; margin: 0 0 1.1rem; }
body.pg-tec .macc__feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
body.pg-tec .macc__feats li { color: #3a4550; font-size: .95rem; display: flex; align-items: flex-start; gap: .6rem; }
body.pg-tec .macc__feats svg { width: 17px; height: 17px; color: #1f8a5b; flex-shrink: 0; margin-top: 2px; }
body.pg-tec .macc__body .laptop__lid { background: #eef1f5; border-color: #dde2e9; }
body.pg-tec .macc__body .laptop__deck { background: linear-gradient(180deg, #dbe0e8, #b3bac6); }
@media (max-width: 820px) { body.pg-tec .macc__body { grid-template-columns: 1fr; } }

/* ── Banda azul "orquesta datos" (texto + mockup) ─────────── */
body.pg-tec .qband {
  background:
    radial-gradient(900px 460px at 90% 0%, rgba(31,111,235,.4), transparent 60%),
    linear-gradient(135deg, #123a86 0%, #0d224f 100%);
  padding: clamp(3.2rem, 6vw, 5.5rem) 0;
}
body.pg-tec .qband__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
body.pg-tec .qband__eye { color: #f3b53c; font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1.1rem; }
body.pg-tec .qband__txt { color: #eaeff7; font-size: clamp(1.12rem, 1.9vw, 1.45rem); line-height: 1.58; margin: 0; font-weight: 400; }
body.pg-tec .qband__txt b { color: #fff; font-weight: 600; }
body.pg-tec .qband .laptop__lid { background: #0a1a3c; border-color: #21356b; }
body.pg-tec .qband .laptop__deck { background: linear-gradient(180deg, #b8c1d6, #8b96b2); }
@media (max-width: 820px) { body.pg-tec .qband__grid { grid-template-columns: 1fr; } }

/* ── Domo 180° · arquitectura de plataforma ───────────────── */
body.pg-tec .dome { width: min(1150px, 100vw); margin: clamp(1.4rem,3.5vw,2.6rem) auto 0; }
body.pg-tec .dome__svg { width: 100%; height: auto; display: block; }

/* ── Arquitectura circular · Core de Impacto + 6 módulos ──── */
body.pg-tec .arch { position: relative; width: min(680px, 94vw); aspect-ratio: 1; margin: clamp(1rem,3vw,2rem) auto 0; }
body.pg-tec .arch__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.pg-tec .arch__node {
  position: absolute; transform: translate(-50%, -50%);
  width: 25%; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
}
body.pg-tec .arch__ic {
  width: clamp(48px, 8vw, 62px); height: clamp(48px, 8vw, 62px); border-radius: 16px;
  display: flex; align-items: center; justify-content: center; background: #fff;
  border: 1px solid #e2e7ee; box-shadow: 0 12px 26px -14px rgba(16,26,54,.4);
}
body.pg-tec .arch__ic svg { width: 46%; height: 46%; }
body.pg-tec .arch__lbl { font-size: clamp(.72rem, 1.3vw, .86rem); font-weight: 600; color: #1f2a3a; line-height: 1.25; letter-spacing: -.01em; }
body.pg-tec .arch__n { font-size: .62rem; font-weight: 700; letter-spacing: .14em; color: #9aa3b0; }
body.pg-tec .arch__core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 31%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #1f4fb0, #0c1f4a 78%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  color: #fff; text-align: center; padding: 4%;
  box-shadow: 0 24px 54px -18px rgba(12,31,74,.7), 0 0 0 10px rgba(255,255,255,.55), 0 0 0 11px #e4e9f0;
}
body.pg-tec .arch__core-ic { width: clamp(30px,5vw,40px); height: clamp(30px,5vw,40px); color: #f3b53c; }
body.pg-tec .arch__core-ic svg { width: 100%; height: 100%; }
body.pg-tec .arch__core b { font-size: clamp(.92rem, 1.9vw, 1.28rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
body.pg-tec .arch__core span { font-size: clamp(.6rem, 1.1vw, .72rem); color: #aebde0; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 560px) {
  body.pg-tec .arch__lbl { font-size: .66rem; }
  body.pg-tec .arch__node { width: 30%; }
}

/* ── Grilla de 6 módulos (2 col × 3, estilo home del app) ──── */
body.pg-tec .hgrid__card {
  background: #fff; border: 1px solid #e6e9ee; border-radius: 15px;
  padding: 1.5rem 1.6rem; display: flex; gap: 1.1rem; align-items: flex-start;
  box-shadow: 0 10px 28px -22px rgba(16,26,36,.4);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
body.pg-tec .hgrid__card:hover { transform: translateY(-3px); border-color: #cdd4dd; box-shadow: 0 18px 40px -24px rgba(16,26,36,.5); }
body.pg-tec .hgrid__ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
body.pg-tec .hgrid__ic svg { width: 23px; height: 23px; }
body.pg-tec .hgrid__n { font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: #aab2bb; }
body.pg-tec .hgrid__name { color: #101a24; font-size: 1.12rem; font-weight: 600; margin: .15rem 0 .45rem; letter-spacing: -.01em; }
body.pg-tec .hgrid__desc { color: #55616c; font-size: .93rem; line-height: 1.5; margin: 0; }
@media (max-width: 720px) { body.pg-tec .hgrid { grid-template-columns: 1fr; } }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  body.pg-tec .thero__grid, body.pg-tec .mod, body.pg-tec .hook,
  body.pg-tec .lead__grid { grid-template-columns: 1fr; }
  body.pg-tec .mod:nth-child(even) .mod__txt { order: 0; }
  body.pg-tec .frame--float { transform: none; }
  body.pg-tec .wl, body.pg-tec .steps { grid-template-columns: 1fr; }
  body.pg-tec .field--row { grid-template-columns: 1fr; }
}

/* ==== Sistema de mockups + dome/lightbox — portado de preview inline ==== */
  /* ── Sistema de mockups aprobado (navegador + callouts + tilt + mapa + flujo) ── */
  .pg-tec .mk-stack{position:relative}
  .pg-tec .mk-browser{background:#fff;border-radius:13px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
  .pg-tec .mk-bar{display:flex;align-items:center;gap:12px;padding:11px 15px;background:#f3f5f9;border-bottom:1px solid #e6eaf1}
  .pg-tec .mk-dots{display:flex;gap:7px}
  .pg-tec .mk-dots i{width:11px;height:11px;border-radius:50%;display:block}
  .pg-tec .mk-dots i:nth-child(1){background:#ff5f57}.pg-tec .mk-dots i:nth-child(2){background:#febc2e}.pg-tec .mk-dots i:nth-child(3){background:#28c840}
  .pg-tec .mk-url{flex:1;background:#fff;border:1px solid #e2e6ee;border-radius:8px;padding:6px 13px;font-size:.78rem;color:#7480a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pg-tec .mk-browser img{display:block;width:100%;height:auto}
  .pg-tec .mk-callout{position:absolute;background:#fff;border-radius:13px;box-shadow:0 20px 44px -14px rgba(11,19,28,.45);padding:11px 15px;color:#0b1f4d;z-index:5}
  .pg-tec .mk-lab{font-size:.66rem;color:#8a93c2;font-weight:600;margin-bottom:3px;letter-spacing:.02em}
  .pg-tec .mk-big{font-size:1.4rem;font-weight:700;line-height:1}
  .pg-tec .mk-chip{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;padding:6px 13px;border-radius:20px}
  .pg-tec .mk-chip i{width:9px;height:9px;border-radius:50%;display:block}
  .pg-tec .mk-tilt{transform:perspective(1900px) rotateY(-12deg) rotateX(4deg);transform-origin:right center}
  .pg-tec .mk-tilt.left{transform:perspective(1900px) rotateY(12deg) rotateX(4deg);transform-origin:left center}
  body.pg-tec .scband__grid--trio{grid-template-columns:.72fr 1.7fr}
  body.pg-tec .scband__grid--trio .scband__txt{padding-top:1rem}
  .pg-tec .mk-cluster{position:relative;display:flex;align-items:center}
  .pg-tec .mk-cluster .c-main{width:58%;flex:none;z-index:3}
  .pg-tec .mk-side{width:48%;margin-left:-6%;display:flex;flex-direction:column;gap:18px;z-index:2}
  .pg-tec .mk-side .mk-browser{width:100%}
  .pg-tec .mk-cluster .mk-callout{position:absolute;bottom:9%;left:-4%;z-index:5}
  @media(max-width:820px){.pg-tec .scband__grid--trio{grid-template-columns:1fr}.pg-tec .mk-cluster{flex-direction:column}.pg-tec .mk-cluster .c-main,.pg-tec .mk-side{width:100%}.pg-tec .mk-side{margin-left:0;margin-top:18px}.pg-tec .mk-cluster .mk-callout{position:static;display:inline-block;margin-top:14px}}
  .pg-tec .mk-mapwrap{position:relative;line-height:0}
  .pg-tec .mk-pin{position:absolute;transform:translate(-50%,-50%);min-width:26px;height:26px;padding:0 6px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#20301a;box-shadow:0 3px 8px rgba(0,0,0,.35);border:2px solid #fff;z-index:2}
  .pg-tec .mk-pin.g{background:#8fd14f}.pg-tec .mk-pin.a{background:#f3c34a}
  .pg-tec .mk-flowband{background:linear-gradient(160deg,#eef1f5,#dbe1e9);padding:clamp(2.6rem,6vw,5rem) 0}
  .pg-tec .mk-flow-scene{position:relative;height:min(560px,64vw);overflow:hidden;border-radius:16px;background:linear-gradient(160deg,#e9edf2,#d6dce4);max-width:1200px;margin:2.2rem auto 0}
  .pg-tec .mk-flow{position:absolute;top:50%;left:50%;display:flex;gap:24px;transform:translate(-50%,-50%) rotate(-30deg) scale(1.55);transform-origin:center}
  .pg-tec .mk-flow .col{display:flex;flex-direction:column;gap:24px;width:300px}
  .pg-tec .mk-flow .col:nth-child(1){margin-top:-40px}.pg-tec .mk-flow .col:nth-child(2){margin-top:-220px}.pg-tec .mk-flow .col:nth-child(3){margin-top:-90px}.pg-tec .mk-flow .col:nth-child(4){margin-top:-300px}
  .pg-tec .mk-pscreen{border-radius:8px;overflow:hidden;box-shadow:22px 26px 40px -20px rgba(20,30,50,.5);border:1px solid rgba(255,255,255,.6);background:#fff}
  .pg-tec .mk-pscreen img{display:block;width:100%}
  @media(max-width:900px){.pg-tec .mk-tilt,.pg-tec .mk-tilt.left{transform:none}}
  .pg-tec .btn-white{background:#fff;color:#0b131c;text-decoration:none;font-weight:600;font-size:.98rem;display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 1.5rem;border-radius:10px;box-shadow:0 12px 28px -12px rgba(0,0,0,.5);transition:transform .2s,box-shadow .2s}
  .pg-tec .btn-white:hover{transform:translateY(-2px);box-shadow:0 20px 38px -12px rgba(0,0,0,.55)}
  .pg-tec .dome{width:min(862px,75vw)}
  body.pg-tec .dome{width:min(667px,57vw);position:relative;cursor:zoom-in}
  .pg-tec .wlc{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem 2.6rem;background:#fff;border:1px solid #e6e9ee;border-radius:18px;padding:1rem 2rem}
  .pg-tec .wlc__row{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:baseline;padding:1.4rem 0;border-bottom:1px solid #e2e6ec}
  .pg-tec .wlc__n{font-size:2.4rem;font-weight:700;line-height:1;color:var(--ac);opacity:.9}
  .pg-tec .wlc__row h3{margin:0 0 .4rem;font-size:1.12rem;color:#101a24;font-weight:600}
  .pg-tec .wlc__row p{margin:0;color:#55616c;font-size:.94rem;line-height:1.55}
  @media(max-width:720px){.pg-tec .wlc{grid-template-columns:1fr;gap:0}}
  .pg-tec .qmk{display:grid;grid-template-columns:1.55fr 1fr;gap:1.4rem;align-items:center;margin-top:clamp(1.6rem,3.5vw,2.6rem)}
  .pg-tec .qmk__side{display:flex;flex-direction:column;gap:1.4rem}
  @media(max-width:820px){.pg-tec .qmk{grid-template-columns:1fr}}
  .pg-tec .dome__zoom{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #d9e2ee;color:#14356a;font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:20px;box-shadow:0 6px 16px -8px rgba(20,53,106,.4);z-index:2}
  .pg-tec .dome-lb{position:fixed;inset:0;background:rgba(7,16,25,.9);display:none;align-items:center;justify-content:center;z-index:1000;padding:3vw}
  .pg-tec .dome-lb.open{display:flex}
  .pg-tec .dome-lb__inner{width:min(1400px,96vw);max-height:92vh}
  .pg-tec .dome-lb__inner svg{width:100%;height:auto;max-height:92vh}
  .pg-tec .dome-lb__close{position:absolute;top:20px;right:26px;width:44px;height:44px;border-radius:50%;background:#fff;border:0;color:#0b131c;font-size:1.5rem;cursor:pointer;display:grid;place-items:center;line-height:1}