/* Articulos de Perspectivas (/perspectivas/<slug>). Solo paginas publicas.

   Las cinco perspectivas usaban la plantilla generica de redesign.css: hero
   oscuro con el texto en la mitad izquierda y la derecha vacia, un hueco en
   blanco debajo, y la foto encogida dentro de una columna de 620px. Ninguna
   paso por el rediseno que si tuvieron el resto de paginas (servicios, SOC,
   como trabajamos, nosotros...), de ahi que rompieran la estetica del sitio.

   Esta hoja aplica el mismo sistema que method-reference.css: Roboto, hero
   partido con la foto a sangre, ambar para el acento del titular, y la misma
   paleta. Todo va acotado a .perspective-reference para no cambiar la
   tipografia ni el ancho de la cabecera y el footer, que son comunes. */

@font-face{font-family:RobotoPerspective;src:url('roboto-services-v18-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

.perspective-reference{--pr-gutter:clamp(20px,5vw,74px);--pr-ink:#07142d;--pr-ink-2:#09203e;--pr-text:#3d5677;--pr-muted:#50698d;--pr-eyebrow:#476591;--pr-line:#e1e8f1;--pr-blue:#3587ff;--pr-amber:#ffb020;font-family:RobotoPerspective,Arial,sans-serif;color:var(--pr-ink);background:#fff}
.perspective-reference .container{width:min(1430px,calc(100% - var(--pr-gutter)*2))}
.perspective-reference em{color:var(--pr-amber);font-style:normal}

/* ---------- hero: texto a la izquierda, foto a sangre a la derecha ---------- */
.pr-hero{position:relative;background:#fff;min-height:clamp(340px,35vw,520px);display:flex;align-items:center;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--pr-line)}
.pr-hero-image{position:absolute;inset:0 0 0 50%;z-index:-1;background:#0b1930}
.pr-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.pr-hero-image small{position:absolute;bottom:8px;right:18px;font-size:clamp(8px,.9vw,13px);color:#e1e9f4;text-shadow:0 1px 4px #07162e}
.pr-hero-copy{width:45%;padding:clamp(30px,3.4vw,52px) 0}
.pr-back{display:inline-flex;align-items:center;gap:8px;font-size:clamp(13px,1vw,15px);font-weight:600;color:var(--pr-muted);margin-bottom:clamp(20px,2.2vw,32px);transition:color .2s ease}
.pr-back:hover{color:var(--pr-ink)}
.pr-eyebrow{font-size:clamp(11px,1.05vw,15px);font-weight:600;line-height:1.3;letter-spacing:.09em;color:var(--pr-eyebrow)!important;margin-bottom:clamp(12px,1.3vw,18px)}
.pr-hero h1{font-size:clamp(36px,4.15vw,62px);line-height:.98;letter-spacing:-.035em;font-weight:800;color:var(--pr-ink);text-wrap:balance}
.pr-lead{font-size:clamp(18px,1.6vw,23px);line-height:1.32;color:var(--pr-ink-2)!important;margin-top:clamp(14px,1.5vw,22px)!important;max-width:34ch}

/* ---------- cuerpo: indice a la izquierda, texto con medida de lectura ---------- */
.pr-body{padding:clamp(52px,5.6vw,92px) 0 clamp(60px,6vw,100px)}
.pr-grid{display:grid;grid-template-columns:minmax(200px,.7fr) minmax(0,2fr);gap:clamp(40px,6vw,110px);align-items:start}

.pr-rail{position:sticky;top:118px}
.pr-rail-title{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pr-eyebrow)!important;margin-bottom:14px}
.pr-rail ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--pr-line)}
.pr-rail li,.pr-rail li+li{margin:0}
.pr-rail a{display:block;padding:9px 0 9px 18px;margin-left:-1px;border-left:2px solid transparent;font-size:15px;line-height:1.35;color:var(--pr-muted);transition:color .2s ease,border-color .2s ease}
.pr-rail a:hover{color:var(--pr-ink);border-left-color:var(--pr-amber)}

.pr-prose{max-width:46rem;min-width:0}
.pr-prose section+section{margin-top:clamp(40px,4vw,58px);padding-top:clamp(40px,4vw,58px);border-top:1px solid var(--pr-line)}
.pr-prose h2{font-size:clamp(26px,2.5vw,37px);line-height:1.08;letter-spacing:-.03em;font-weight:800;color:var(--pr-ink);margin-bottom:18px;text-wrap:balance}
.pr-prose p{font-size:clamp(17px,1.22vw,19px);line-height:1.68;color:var(--pr-text)}
.pr-prose p+p{margin-top:16px}

/* Las listas repiten los puntos azul/ambar de la metodologia de Como trabajamos */
.pr-prose ul{list-style:none;padding:0;margin:24px 0 0}
.pr-prose li{position:relative;padding-left:30px;font-size:clamp(17px,1.22vw,19px);line-height:1.55;color:var(--pr-ink-2)}
.pr-prose li+li{margin-top:13px}
.pr-prose li:before{content:"";position:absolute;left:5px;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--pr-blue)}
.pr-prose li:nth-child(even):before{background:var(--pr-amber)}

.pr-end{margin-top:clamp(44px,4.4vw,64px);padding-top:28px;border-top:1px solid var(--pr-line)}
.pr-end .text-link{font-size:16px;font-weight:600}

/* ---------- movil: una columna, la foto debajo del texto ---------- */
@media (max-width:900px){
 .pr-hero{flex-direction:column;align-items:stretch;min-height:0}
 .pr-hero>.container{order:0}
 .pr-hero-copy{width:100%;padding:30px 0 32px}
 .pr-hero-image{position:relative;inset:auto;order:1;height:clamp(220px,56vw,380px)}
 .pr-hero h1{font-size:clamp(31px,7.4vw,44px);line-height:1.04}
 .pr-lead{max-width:none}
 .pr-grid{grid-template-columns:1fr}
 .pr-rail{display:none}
}

@media (prefers-reduced-motion:reduce){
 .pr-back,.pr-rail a{transition:none}
}