/* ============================================================
   JPM - CASCARA DE CIELO  ·  jpm-sky-shell.css
   ------------------------------------------------------------
   Hoja COMPARTIDA por las superficies activas que adoptan el
   lenguaje del atardecer. Existe para que no haya una tercera ni
   una cuarta variante visual: el cielo, la cinta de navegacion y
   el hero interior se declaran UNA vez.

   Se enlaza DESPUES de tokens/base/components/pages, de modo que
   gana la cascada por orden sin modificar ninguna hoja del sitio.
   Es opt-in: solo afecta a quien la enlaza.

   Valores de la cinta: tomados literalmente de
   lab/hero-atardecer/index.html (bloques lab-v11 y lab-v12).
   No se invento ningun rgba nuevo para el header.

   El motor de nubes vive aparte, en assets/js/jpm-cielo.js.

   ------------------------------------------------------------
   DOS VARIANTES, UN SISTEMA. Se declaran en el <body>:

     .jpm-shell--interior   pagina editorial.
                            EL CIELO PERTENECE AL HERO: se recorta
                            al terminar el hero y el contenido baja
                            sobre marfil solido de borde a borde.

     .jpm-shell--tool       herramienta.
                            El cielo es escenario continuo: queda
                            fijo al viewport durante toda la
                            herramienta, con el modulo solido
                            encima.

   HOME (lab/hero-atardecer) no necesita variante: su cielo ya vive
   dentro de .hero, que es position:relative con overflow:hidden, de
   modo que ya termina donde termina el hero. Esa pagina solo toma
   de aqui la cinta y su estado con scroll.
   ============================================================ */

/* -- 0 - DOCUMENTO -------------------------------------------
   Respaldo bajo el cielo. En la variante interior queda cubierto
   por el marfil opaco del body; en la de herramienta es lo que se
   ve si el degradado no llegara a pintarse: nunca se vuelve al
   crema plano de base.css. */
html{ background:#3F0835; }

/* Alto real de la cinta, para poder meter el hero por debajo de
   ella sin numeros magicos repartidos. Mismos valores del lab. */
:root{ --jpm-head-h:83px; }
@media(max-width:700px){ :root{ --jpm-head-h:73px; } }

/* -- 1 - CIELO ------------------------------------------------
   Aspecto comun. El POSICIONAMIENTO lo decide la variante. */
.jpm-sky{
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:linear-gradient(to top,#FFCF3D 0%,#EB7C48 32%,#9A2852 66%,#3F0835 100%);
}
.jpm-sky #arc-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* -- 2 - CONTENIDO SOBRE EL CIELO ----------------------------
   .site-header ya trae z-index:100 propio en components.css. */
body > main,
body > .site-footer,
#jpm-calc{ position:relative; z-index:2; }

/* -- 3 - CINTA DE NAVEGACION CIRUELA TRANSLUCIDA -------------
   Valores identicos a lab/hero-atardecer. Se conserva el
   position:sticky del sitio: la barra debe seguir disponible al
   hacer scroll en TODAS las superficies. */
.site-header{
  background:rgba(63,8,53,.35);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(251,248,243,.16);
  box-shadow:none;
}

/* ESTADO CON SCROLL. Dos cosas que corregir a la vez:

   1. components.css repinta .is-scrolled de blanco al 94%, que es el
      tratamiento del tema claro. Sobre el cielo devolveria la barra
      opaca a mitad de pagina. Queda descartado.

   2. La cinta es translucida: toma el color de lo que tiene detras.
      En el hero eso es el cielo y .35 funciona. Pero en HOME y en las
      paginas editoriales el cielo TERMINA con el hero, y a partir de
      ahi detras queda marfil: la misma cinta se vuelve un lila lavado
      y el texto crema cae a 2.20:1, por debajo del minimo de 4.5:1.

   Al desplazarse, la cinta se asienta en el MISMO ciruela con mas
   cuerpo: mismo color, mismo lenguaje, sin volver al blanco. A .86 el
   contraste sube a 10.61:1. components.css ya transiciona el fondo,
   de modo que es un asentamiento gradual y no un salto. */
.site-header.is-scrolled{
  background:rgba(63,8,53,.86);
  box-shadow:none;
}

.site-header .nav-link,
.site-header .caret{
  color:var(--jpm-cream);
  text-shadow:0 1px 10px rgba(42,10,34,.55);
}
.site-header .nav-link:hover{
  background:rgba(251,248,243,.10);
  color:var(--jpm-cream);
}
/* Estado activo: subrayado fino, no pastilla. La pastilla clara
   de components.css se lee como un recorte sucio sobre cristal. */
.site-header .nav-link[aria-current="page"]{
  background:transparent;
  color:var(--jpm-cream);
  box-shadow:inset 0 -2px 0 rgba(251,248,243,.9);
  border-radius:0;
}
.site-header .nav-link[aria-current="page"]:hover{
  background:rgba(251,248,243,.10);
}
.site-header .nav-link:focus-visible,
.site-header .menu-toggle:focus-visible{
  outline:2px solid rgba(251,248,243,.92);
  outline-offset:3px;
  border-radius:10px;
}
.site-header .menu-toggle{
  color:var(--jpm-cream);
  background:rgba(251,248,243,.14);
  border-color:rgba(251,248,243,.42);
  text-shadow:0 1px 10px rgba(42,10,34,.55);
}
.site-header .menu-toggle:hover{ background:rgba(251,248,243,.22); }

/* T11 · El desplegable y el menu movil YA NO SE DEFINEN AQUI.
   Esta hoja los pintaba a su manera, jpm-home-hero.css a la suya y
   components.css a la tercera. Ahora hay un solo componente, al
   final de components.css, gobernado por los tokens --nav-*.
   Para cambiar su aspecto se cambia el token, no esta hoja.

   Lo que si sigue siendo de aqui es la CINTA -- fondo, enlaces y
   foco de la barra sobre el cielo -- porque eso si es propio de
   estas paginas. */
.site-header .skip-link:focus{ color:var(--jpm-purple); }
/* De .brand solo se toca el color del descriptor institucional: sobre
   la cinta ciruela necesita el crema, no el morado del tema claro.
   El logotipo se conserva intacto. */
.site-header .brand-desc{ color:var(--jpm-cream); opacity:.8; }

/* ============================================================
   VARIANTE · HERRAMIENTA
   El cielo es el escenario de toda la pagina: fijo al viewport,
   no scrollea, y el modulo solido navega por encima.
   ============================================================ */
body.jpm-shell--tool{ background:transparent; }

/* La herramienta es la excepcion: su cielo NO termina, esta detras de
   la cinta a cualquier altura de scroll. Aqui .35 sigue siendo el
   valor correcto y la cinta no necesita asentarse. */
.jpm-shell--tool .site-header.is-scrolled{
  background:rgba(63,8,53,.35);
}
.jpm-shell--tool .jpm-sky{
  position:fixed;
  inset:0;
}

/* ============================================================
   VARIANTE · INTERIOR EDITORIAL
   El cielo pertenece al hero y termina con el. Debajo, marfil
   solido de borde a borde: la pagina NO es una tarjeta flotando
   sobre nubes.
   ============================================================ */
body.jpm-shell--interior{ background:var(--jpm-cream); }


/* La cinta es sticky y esta EN FLUJO, de modo que el hero
   arrancaria por debajo de ella y el cielo no llegaria al borde
   superior. Se sube el contenido el alto exacto de la cinta y se
   devuelve como relleno del hero: el cielo llega al pixel 0, la
   barra queda integrada en el, y nada de lo que va debajo se
   mueve de sitio. El margen negativo va en <main> y no en el
   hero para que no colapse con el del padre. */
.jpm-shell--interior > main{
  margin-top:calc(var(--jpm-head-h) * -1);
}
/* ALTURA FIJA Y COMPARTIDA.
   Antes el hero se dejaba medir por su texto: padding arriba, padding
   abajo y lo que ocupara el contenido en medio. Consecuencia: cada
   pagina interior tenia un hero distinto -- 325px las indice, 453px la
   ruta de servicio mas larga -- y el sistema no se leia como sistema.
   Ahora la altura la fija --jpm-hero-alto y el texto flota dentro,
   centrado en la banda que queda por debajo de la cinta de navegacion.
   El contenido ya no empuja el contenedor. */
:root{ --jpm-hero-alto:392px; }
@media(max-width:760px){ :root{ --jpm-hero-alto:380px; } }

.jpm-shell--interior .jpm-hero-interior{
  height:var(--jpm-hero-alto);
  box-sizing:border-box;
  display:flex;
  /* El contenedor de texto ocupa TODO el alto util del hero. Asi el
     gancho se apoya arriba y la minidescripcion baja sola con
     margin-top:auto, sin que ninguno de los dos toque la altura, que
     sigue congelada en --jpm-hero-alto. */
  align-items:stretch;
  /* El gancho sube: a 40px de la cinta caia sobre el tramo naranja y el
     blanco se quedaba en 2.89:1. Doce pixeles mas arriba se apoya en la
     magenta y pasa. Es espaciado interno -- ni la altura ni el fondo se
     tocan (DG-00 §2 y §3). */
  padding-top:calc(var(--jpm-head-h) + clamp(10px,1.2vw,18px));
  padding-bottom:var(--jpm-hero-base,34px);
}
.jpm-shell--interior .jpm-hero-interior > .wrap{
  width:100%;
  display:flex;
  flex-direction:column;
}

/* EL CORTE. El cielo es hijo del hero y el hero recorta: donde
   termina el hero, termina el cielo. Sin degradados de salida ni
   mascaras: un borde limpio. */
.jpm-hero-interior{ position:relative; overflow:hidden; }
.jpm-shell--interior .jpm-sky{ position:absolute; inset:0; }

/* CIELO DEL HERO INTERIOR - MAS CLARO.
   El hero comprime el degradado completo en ~360px, de modo que el
   ciruela profundo se comia la mitad superior y la franja se leia
   pesada. Se corre la paleta hacia el tramo calido: el ciruela queda
   reducido al filo de arriba, justo donde se apoya la cinta, y el
   naranja sube hasta la altura del texto. Mismos cuatro colores del
   lenguaje atardecer; solo cambian las paradas. */
.jpm-shell--interior .jpm-sky{
  /* CONGELADO POR DG-00 (D3.3). D3.2 corrio estas paradas a 12/56 para
     ganar contraste; el resultado se leia mas rojizo y menos luminoso y
     quedo descartado. Se restituyen los valores exactos previos a D3.2,
     recuperados del diff. A partir de aqui la variable de ajuste es el
     TEXTO, nunca el fondo. */
  background:linear-gradient(to top,#FFCF3D 0%,#EB7C48 55%,#9A2852 92%,#3F0835 100%);
}

/* CINTA TRAS EL TEXTO (patron de lab/hero-atardecer/.veladura).
   Antes habia una veladura sobre TODO el cielo. Sostenia el texto,
   pero apagaba tambien la parte del cielo donde no hay nada que
   sostener, y obligaba a elegir entre un hero luminoso y un hero
   legible. La cinta separa los dos problemas: cubre solo la franja
   del texto y deja el resto del cielo limpio, de modo que el gold
   puede quedarse a plena luz.
   Va a sangre completa (left/right:calc(50% - 50vw)) para leerse como
   cinta horizontal y no como tarjeta; el hero recorta, asi que no
   genera desbordamiento. Su z-index vive dentro del contexto de
   apilamiento de .wrap, por encima del cielo y por debajo del texto.
   Medido sobre el compuesto cinta+cielo, texto crema:
     eyebrow 4.64:1 · h1 4.06:1 · manifiesto 3.79:1
     acento 3.73:1 · entradilla 4.60:1
   El valor .28 no es estetico sino el unico tramo que satisface a la
   vez los dos extremos: mas opaca y el ciruela de la entradilla, que
   se apoya en el gold, baja del umbral; mas clara y el crema del
   eyebrow, que se apoya en la magenta, tambien. */
/* Sin cinta. La minidescripcion ya no se separa del gancho por un gap
   fijo, que los dejaba agrupados en el centro: baja al PIE del hero con
   margin-top:auto y deja en medio una respiracion deliberada. El
   padding-bottom del hero decide a que distancia del borde se detiene
   -- se probaron 22, 28 y 34px; 34 la deja proxima al borde sin
   parecer un pie de pagina.
   El minimo de gap evita que en las paginas de texto largo, donde el
   auto se agota, la mini termine pegada al gancho. */
.jpm-hero-interior .ed-hero-intro{
  margin-top:auto;
  padding-top:clamp(24px,3vw,44px);
}
.jpm-hero-interior > .wrap{ position:relative; z-index:1; }

/* -- HERO INTERIOR --------------------------------------------
   La portada es cinematografica y ocupa el viewport. El interior
   es editorial: mismo cielo y misma cinta, pero deliberadamente
   corto, para que el contenido empiece pronto. La diferencia con
   HOME viene de la jerarquia, no de comprimir el texto.
   El texto va centrado y sobre el cielo, con sombra suave que
   sostiene el contraste cuando pasa por detras la zona clara del
   ciclo de nubes. */
.jpm-hero-interior{
  text-align:center;
}
/* .page-hero::after dibuja un circulo difuminado pensado para
   fondo claro; sobre el cielo solo enturbia. */
.jpm-hero-interior::after{ display:none; }

.jpm-hero-interior .eyebrow{
  color:var(--jpm-cream);
  letter-spacing:.2em;
  font-size:.7rem;
  margin-bottom:clamp(10px,1.1vw,15px);
  text-shadow:0 1px 10px rgba(42,10,34,.55);
}
.jpm-hero-interior h1.ed-name{
  color:var(--jpm-cream);
  font-size:clamp(1.45rem,1.9vw,1.85rem);
  margin:0 0 clamp(8px,.9vw,12px);
  text-shadow:0 2px 18px rgba(42,10,34,.55);
}
.jpm-hero-interior .ed-manifesto{
  /* El gancho deja de vivir en una caja de 24ch. Se le da todo el
     ancho editorial para que en escritorio entre en una sola linea y
     el hero se lea de extremo a extremo, no encajonado. El margen va
     en forma abreviada CON auto: declararlo antes y un margin despues
     lo reiniciaba a 0 y el gancho se pegaba a la izquierda. */
  max-width:min(1240px,100%);
  color:#fff;
  font-size:clamp(1.9rem,2.9vw,2.85rem);
  line-height:1.06;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0 auto;
  text-shadow:0 2px 22px rgba(42,10,34,.6);
}
/* REMATE DEL GANCHO. La frase abre en blanco y cierra en calido: el
   cuerpo situa, el remate afirma. Se apaga el recorte del degradado de
   base.css, que dejaba el color en transparent.
   .gradient-text ya envolvia el remate en cuatro paginas; en las demas
   se envolvio a mano con .hero-hook-accent, sin tocar una palabra del
   copy. Ambas clases reciben el mismo tratamiento.

   COLOR: --jpm-purple #510B44, el ciruela institucional. Es la familia
   de la barra de navegacion, cuyo fondo es rgba(63,8,53,.35) sobre
   #3F0835; se toma el token de marca por ser el mas vivo de los dos,
   que es lo que pide un remate. No es un lila nuevo: es el que ya
   gobierna titulares y navegacion en todo el sitio. */
.jpm-hero-interior .gradient-text,
.jpm-hero-interior .hero-hook-accent{
  background-image:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:var(--jpm-remate,#510B44);
  -webkit-text-fill-color:var(--jpm-remate,#510B44);
}
.jpm-hero-interior .ed-hero-intro{
  max-width:none;
  align-items:center;
}
/* La jerarquia entre gancho y minidescripcion la sostienen tamano,
   peso, color y aire -- nunca una caja de fondo. El tono calido se
   declara en una variable propia para poder cambiarlo en un solo
   sitio mientras DG-00 elige variante (ver bloque de variantes). */
.jpm-hero-interior .ed-hero-intro .lead{
  max-width:min(1180px,100%);
  margin-inline:auto;
  text-align:center;
  text-align-last:center;
  /* Morado profundo: el ciruela exacto de la cinta de navegacion,
     #3F0835. Queda un escalon por debajo del remate (#510B44), de modo
     que la jerarquia se lee blanco -> ciruela vivo -> morado profundo
     sin que remate y mini compartan valor.
     En escritorio gana presencia: se probaron 20, 21 y 22px; 21px es
     el mayor que aprovecha el ancho sin convertirse en un segundo
     titular. En movil conserva su valor. */
  color:var(--jpm-mini-tono,#3F0835);
  font-size:21px;
  line-height:1.5;
  text-shadow:none;
}

/* Segundo nivel de lectura dentro de la minidescripcion: uno o dos
   fragmentos, nunca la frase entera. Se eligieron conceptos -- rutas,
   documentos, ambitos -- y nunca promesas, garantias ni cifras, para
   que el enfasis no altere el sentido juridico del texto. */
.jpm-hero-interior .ed-hero-intro .mini-em{
  color:#fff;
  font-weight:700;
}

/* -- TITULO DOCUMENTAL --------------------------------------
   El H1 real de la pagina sale del hero y abre el cuerpo. El hero
   pasa a ser introduccion; el titulo, documento. Sigue siendo el
   unico H1 de la pagina: el gancho nunca lo fue. */
.jpm-titulo{
  padding:clamp(34px,4.2vw,62px) 0 0;
}
.jpm-titulo .eyebrow{
  margin-bottom:clamp(10px,1.1vw,14px);
}
.jpm-titulo h1{
  max-width:none;
  margin:0;
  font-size:clamp(1.85rem,3vw,2.9rem);
  line-height:1.06;
  letter-spacing:-.025em;
  color:var(--jpm-purple);
}
.jpm-titulo .lead{
  margin:clamp(16px,1.8vw,24px) 0 0;
  max-width:78ch;
}
.jpm-titulo .lead + .lead{ margin-top:14px; }
.jpm-titulo .actions{ margin-top:clamp(20px,2.2vw,30px); }

/* La seccion que sigue traia su propio padding de apertura, pensado
   para cuando era ella la que abria el cuerpo. Ahora abre el titulo:
   se recorta ese aire para que titulo y contenido se lean como un
   mismo bloque y no como dos secciones separadas. */
.jpm-titulo + .section{
  padding-top:clamp(20px,2.4vw,34px);
}

/* .investor-hero pinta un degradado crema pensado para fondo claro;
   sobre el cielo lo taparia. */
.jpm-shell--interior .investor-hero{ background:transparent; }

/* -- MOVIL ----------------------------------------------------
   El hero se acorta por jerarquia, no recortando el texto. */
@media(max-width:760px){
  .jpm-hero-interior{ padding-bottom:16px; }
  .jpm-shell--interior .jpm-hero-interior{
    padding-top:calc(var(--jpm-head-h) + 16px);
  }
  .jpm-hero-interior .eyebrow{ margin-bottom:8px; }
  .jpm-hero-interior h1.ed-name{ font-size:1.28rem; margin-bottom:6px; }
  .jpm-hero-interior .ed-manifesto{
    font-size:clamp(1.5rem,6.4vw,2rem);
    margin-bottom:12px;
  }
  /* En movil la mini tambien busca el pie, pero el aire minimo cede
     antes que la altura: en las rutas de texto largo el auto se agota
     y la mini sube lo necesario. La altura no se toca (DG-00 §3). */
  .jpm-hero-interior .ed-hero-intro{ padding-top:18px; }
  .jpm-hero-interior .ed-hero-intro .lead{
    font-size:16px;
    line-height:1.5;
    /* En movil la linea baja a 40 caracteres: centrada se lee como
       poema. A la izquierda vuelve a ser lectura corrida. */
    text-align:left;
    text-align-last:left;
  }
  .jpm-titulo{ padding-top:30px; }
  .jpm-titulo h1{ font-size:clamp(1.5rem,6vw,2rem); }
}

/* -- MENOS MOVIMIENTO ----------------------------------------
   El motor ya retorna antes de pintar; ocultar el canvas deja el
   comportamiento declarado tambien en CSS. Queda el cielo
   estatico del degradado. */
@media(prefers-reduced-motion:reduce){
  #arc-canvas{ display:none; }
}