/* ============================================================
   theme.css — Sistema visual compartido · Adoria Sostemove
   FUENTE ÚNICA del sistema pp- (secciones, kicker, h2, lead, grid,
   texturas de banda oscura, fondos lavados) y del hero canónico.

   Un cambio aquí = todo el sitio. NO duplicar estas reglas en el
   <style> inline de las páginas. Cada página solo define lo SUYO
   (componentes propios con prefijo de página, reglas por #id).

   Orden de carga en cada página:
     1) styles.css        (tokens :root + base global)
     2) theme.css         (este archivo, sistema pp- compartido)
     3) <style> inline     (solo lo específico de la página)
   ============================================================ */

/* — tokens de acabado (sombra/hover/radio/ease coherentes) — */
:root{
  --sv-r:20px;
  --sv-shadow:0 1px 2px rgba(35,54,46,.05),0 14px 34px -18px rgba(35,54,46,.28);
  --sv-shadow-h:0 2px 4px rgba(35,54,46,.06),0 24px 48px -20px rgba(35,54,46,.4);
  --sv-border:rgba(35,54,46,.1);
  --sv-border-h:rgba(205,225,79,.55);
  --sv-ease:cubic-bezier(.22,1,.36,1);
}

/* — base de secciones — */
.pp-sec{padding:clamp(72px,10vw,130px) 0}
.pp-paper{background:var(--paper)}
.pp-warm{background:var(--warm-white)}
.pp-forest{background:var(--forest);color:var(--warm-white);clip-path:polygon(0 3vw,100% 0,100% 100%,0 100%)}
.pp-petrol{background:var(--petrol);color:var(--warm-white);clip-path:polygon(0 0,100% 3vw,100% calc(100% - 3vw),0 100%)}
.pp-forest h1,.pp-forest h2,.pp-forest h3,.pp-petrol h2,.pp-petrol h3{color:var(--warm-white)}
.pp-forest p,.pp-petrol p{color:rgba(239,238,225,.86)}
.pp-kicker{font-family:var(--prosa);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--petrol)}
.pp-forest .pp-kicker,.pp-petrol .pp-kicker{color:var(--lime)}
.pp-kicker .tramo{width:30px;height:6px;background:var(--lime);display:inline-block;flex:none;clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.pp-h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.8vw,44px);line-height:1.06;letter-spacing:-.022em;margin:0 0 20px}
.pp-lead{font-family:var(--prosa);font-size:clamp(16px,1.7vw,18px);line-height:1.62;max-width:58ch}
.pp-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5.5vw,76px);align-items:start}
.pp-body p{font-family:var(--prosa);font-size:16px;line-height:1.68;margin:0 0 16px;max-width:62ch}
.pp-tit-sticky{position:sticky;top:104px}
.pp-ctas{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:18px}
.pp-statement{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.4vw,27px);line-height:1.28;color:var(--forest);margin:0 0 26px}

/* — hero canónico: tipografía única para ambos arquetipos — */
.pp-hero h1,.pp-hero-solo h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,5vw,50px);line-height:1.18;letter-spacing:-.03em;margin:0 0 22px;text-wrap:balance}
.pp-hero h1 .hl,.pp-hero-solo h1 .hl{-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.02em .1em;border-radius:3px}
/* hero de una columna (servicios, detalle de servicio, sobre, partners) */
.pp-hero-solo{max-width:900px}
.pp-hero-solo .pp-lead{color:rgba(239,238,225,.9);margin:0 0 16px;max-width:60ch;line-height:1.62}
/* hero partido con widget lateral (plan-pmst) */
.pp-hero{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(32px,5vw,68px);align-items:center}
.pp-hero .pp-lead{color:rgba(239,238,225,.9);margin:0 0 16px}

/* — profundidad/textura en bandas oscuras (firma del hero) — */
.pp-forest,.pp-petrol{position:relative;isolation:isolate}
.pp-forest::before,.pp-petrol::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;clip-path:inherit;background:radial-gradient(120% 90% at 50% 30%,transparent 40%,rgba(8,16,13,.28) 100%),linear-gradient(100deg,rgba(35,54,46,.42) 0%,rgba(35,54,46,0) 55%)}
.pp-petrol::before{background:radial-gradient(120% 90% at 50% 30%,transparent 42%,rgba(8,16,13,.24) 100%),linear-gradient(100deg,rgba(42,73,82,.4) 0%,rgba(42,73,82,0) 55%)}
.pp-forest>.contenedor,.pp-petrol>.contenedor{position:relative;z-index:1}

/* — imágenes de fondo lavadas en bandas oscuras — */
.pp-forest .pp-bg,.pp-petrol .pp-bg{position:absolute;inset:0;z-index:0;pointer-events:none;clip-path:inherit;overflow:hidden}
.pp-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 42%;filter:grayscale(.22) brightness(.8) contrast(1.07) saturate(.9);opacity:.32}
.pp-forest .pp-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(19,35,29,.95) 0%,rgba(35,54,46,.66) 50%,rgba(35,54,46,.92) 100%),linear-gradient(to top,rgba(19,35,29,.82) 0%,rgba(19,35,29,0) 44%)}

/* ───── Destacado lateral del hero (unifica con la tarjeta de Plan PMST) ───── */
.pp-aside{position:relative;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:6px 0 6px 28px}
.pp-aside::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1.5px;background:linear-gradient(var(--lime),rgba(205,225,79,.08))}
.pp-aside-tag{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(239,238,225,.6);display:inline-flex;align-items:center;gap:9px;margin:0}
.pp-aside-tag .pp-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none;animation:ppPulse 2.6s infinite}
@keyframes ppPulse{50%{opacity:.35}}
.pp-aside-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;width:100%;max-width:350px}
.pp-aside-item{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.pp-aside-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(205,225,79,.12);color:var(--lime);flex:none}
.pp-aside-ico svg{width:19px;height:19px}
.pp-aside-item b{display:block;font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--warm-white);margin-bottom:3px;letter-spacing:-.01em}
.pp-aside-item span{font-family:var(--prosa);font-size:13.5px;line-height:1.46;color:rgba(239,238,225,.72)}
.pp-aside-pasos{list-style:none;margin:0;padding:0;width:100%;max-width:350px}
.pp-aside-paso{position:relative;display:grid;grid-template-columns:30px 1fr;gap:15px;padding-bottom:22px}
.pp-aside-paso:last-child{padding-bottom:0}
.pp-aside-paso::before{content:"";position:absolute;left:14px;top:32px;bottom:2px;width:1.5px;background:rgba(205,225,79,.3)}
.pp-aside-paso:last-child::before{display:none}
.pp-aside-paso-num{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--lime);color:var(--lime);font-family:var(--mono);font-size:12px;font-weight:500;display:grid;place-items:center;flex:none;background:var(--forest)}
.pp-aside-paso b{display:block;font-family:var(--display);font-weight:600;font-size:16px;color:var(--warm-white);margin-bottom:3px;letter-spacing:-.01em;padding-top:4px}
.pp-aside-paso span{font-family:var(--prosa);font-size:13.5px;line-height:1.46;color:rgba(239,238,225,.72)}

/* variante cifras del destacado (sobre) */
.pp-aside-cifras{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;width:100%;max-width:300px}
.pp-aside-cifras li{padding:15px 0;border-top:1px solid rgba(239,238,225,.14)}
.pp-aside-cifras li:first-child{border-top:none;padding-top:0}
.pp-aside-cifras li:last-child{padding-bottom:0}
.pp-aside-cifras b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(40px,4.4vw,56px);line-height:1;letter-spacing:-.03em;color:var(--lime);font-variant-numeric:tabular-nums;margin-bottom:8px}
.pp-aside-cifras span{display:block;font-family:var(--prosa);font-size:14px;line-height:1.45;color:rgba(239,238,225,.82)}
.pp-aside-pie{margin:16px 0 0;font-family:var(--prosa);font-size:13px;line-height:1.5;color:rgba(239,238,225,.62);max-width:300px}
.pp-aside-pie b{color:rgba(239,238,225,.82);font-weight:600}

/* — responsive base — */
@media(max-width:900px){
  .pp-hero,.pp-grid{grid-template-columns:1fr}
  .pp-tit-sticky{position:static}
  .pp-bg img{object-position:55% 40%;opacity:.22}
  .pp-aside{padding-left:24px;margin-top:4px}
}

/* ---------- Páginas legales (privacidad, aviso legal, cookies) ----------
   Antes repetido en línea en las tres páginas. */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: clamp(120px, 14vw, 150px) 24px clamp(56px, 9vw, 96px); }
.legal-kicker { font-family: var(--prosa); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--petrol); display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.legal-wrap h1 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 5vw, 44px); line-height: 1.08; color: var(--forest); letter-spacing: -0.01em; margin: 0 0 12px; }
.legal-fecha { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 0 0 36px; }
.legal-wrap h2 { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 2.6vw, 23px); line-height: 1.2; color: var(--forest); margin: 40px 0 12px; }
.legal-wrap p, .legal-wrap li { font-size: 15.5px; line-height: 1.7; color: var(--ink); max-width: 66ch; }
.legal-wrap p { margin: 0 0 14px; }
.legal-wrap ul { margin: 0 0 14px; padding-left: 20px; }
.legal-wrap li { margin: 0 0 8px; }
.legal-wrap a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.legal-wrap a:hover { color: var(--petrol); }
.legal-wrap strong { color: var(--forest); font-weight: 600; }
.legal-wrap table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.legal-wrap th, .legal-wrap td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.legal-dato { background: var(--warm-white); border: 1px solid rgba(35, 54, 46, 0.16); border-radius: 14px; padding: 20px 22px; margin: 0 0 14px; }
.legal-dato p { margin: 0 0 6px; font-size: 15px; }
.legal-dato p:last-child { margin: 0; }

/* — foto recortada en diagonal (antes duplicada en plan-pmst y partners) — */
.pp-foto{border-radius:var(--sv-r);overflow:hidden;clip-path:polygon(0 0,100% 4%,100% 100%,0 96%);aspect-ratio:4/5;margin:0}
.pp-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:scale .45s var(--sv-ease)}
.pp-foto:hover img{scale:1.03}
@media(max-width:900px){.pp-foto{aspect-ratio:16/10}}

/* — miga de pan en héroes oscuros (páginas, guías y blog) — */
.art-migas ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0 0 16px;padding:0;font-size:13.5px}
.art-migas li{display:inline-flex;align-items:center}
.art-migas li{color:rgba(239,238,225,.7)}
.art-migas li+li::before{content:"/";margin-right:6px;color:rgba(239,238,225,.4)}
.art-migas a{color:rgba(239,238,225,.86);text-decoration:none;display:inline-block;padding:6px 0}
.art-migas a:hover{color:var(--lime);text-decoration:underline}
/* antetítulo y frase destacada dentro del cuerpo: no heredan el tamaño del párrafo */
.pp-body .pp-kicker{font-size:12.5px}