/* Header / navigation */
.site-header{position:sticky;top:0;z-index:100;background:rgba(251,248,243,.82);border-bottom:1px solid rgba(81,11,68,.07);backdrop-filter:blur(18px);transition:background var(--motion-menu) var(--ease-state),box-shadow var(--motion-menu) var(--ease-state)}
.site-header.is-scrolled{background:rgba(255,255,255,.94);box-shadow:0 12px 36px -30px rgba(81,11,68,.8)}
.navbar{height:82px;display:flex;align-items:center;justify-content:space-between;gap:22px}.site-header .brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}.site-header .brand img{width:142px;height:auto}.desktop-nav{display:flex;align-items:center;gap:6px}.nav-item{position:relative}.nav-link{display:flex;align-items:center;gap:6px;border:0;background:transparent;text-decoration:none;color:#4A3545;padding:11px 9px;border-radius:10px;font:700 .82rem/1 "Rubik",ui-sans-serif,sans-serif;cursor:pointer}.nav-link:hover,.nav-link[aria-current="page"]{color:var(--jpm-purple);background:rgba(81,11,68,.05)}.caret{font-size:.68rem;opacity:.65}/* .submenu · ver el componente unico al final de este archivo */
.menu-toggle{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--jpm-line);background:#fff;color:var(--jpm-purple);cursor:pointer;font-size:1.25rem}.mobile-menu{display:none;position:fixed;inset:82px 0 0 0;background:rgba(251,248,243,.98);padding:24px;overflow:auto}.mobile-menu.open{display:block}.mobile-menu a{display:block;text-decoration:none;color:var(--jpm-purple);padding:13px 8px;border-bottom:1px solid var(--jpm-line);font:750 1rem/1.2 "Rubik",ui-sans-serif,sans-serif}.mobile-menu .mobile-sub{padding-left:16px}.mobile-menu .mobile-sub a{font-size:.9rem;color:var(--jpm-text)}
/* Hero */
.hero{position:relative;overflow:hidden;padding:clamp(72px,8vw,118px) 0 clamp(64px,8vw,100px)}.hero::before{content:"";position:absolute;inset:-45% -20% auto -20%;height:720px;background:radial-gradient(circle at 22% 55%,rgba(236,197,69,.37),transparent 43%),radial-gradient(circle at 76% 48%,rgba(81,11,68,.2),transparent 42%),radial-gradient(circle at 50% 35%,rgba(204,101,75,.22),transparent 38%);filter:blur(8px);animation:ambientShift 22s ease-in-out infinite alternate;pointer-events:none}.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,78px);align-items:center}.hero-copy p{font-size:clamp(1.08rem,1.65vw,1.3rem);color:var(--jpm-text);max-width:700px}.hero-note{font-size:.84rem;color:var(--jpm-muted);max-width:680px;margin-top:18px}.hero-panel{min-height:520px;border-radius:var(--radius-xl);background:linear-gradient(145deg,var(--jpm-purple),#8B405E 55%,#D59A52);color:#fff;padding:34px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.hero-panel::before,.hero-panel::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.18);border-radius:50%;width:330px;height:330px;right:-120px;bottom:-150px;box-shadow:0 0 0 46px rgba(255,255,255,.045),0 0 0 92px rgba(255,255,255,.025)}.hero-panel .panel-kicker{font:800 .73rem/1 "Rubik",sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.78}.hero-panel h2{font-size:clamp(2rem,3.8vw,4.2rem);color:#fff;max-width:10ch;margin:20px 0}.hero-panel footer{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;position:relative;z-index:2;color:rgba(255,255,255,.78);font-size:.82rem}.hero-panel footer strong{display:block;color:#fff;font-family:"Rubik",sans-serif;font-size:1rem}
/* Service cards */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-card{display:flex;flex-direction:column;min-height:300px;padding:28px;border:1px solid var(--jpm-line);border-radius:26px;background:#fff;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform var(--motion-micro) var(--ease-state),box-shadow var(--motion-micro) var(--ease-state),border-color var(--motion-micro) var(--ease-state);position:relative;overflow:hidden}.service-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:var(--jpm-arc)}.service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(81,11,68,.18)}.service-card .service-type{font:800 .7rem/1 "Rubik",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--jpm-orange);margin-bottom:auto}.service-card h3{margin-top:54px}.service-card p{color:var(--jpm-muted)}.service-card .learn{margin-top:18px;font:800 .82rem "Rubik",sans-serif;color:var(--jpm-purple)}
/* Editorial band */
.editorial-band{background:var(--jpm-arc);color:#fff;border-radius:var(--radius-lg);padding:clamp(28px,5vw,52px);display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;box-shadow:var(--shadow-md)}.editorial-band h3{color:#fff;font-size:clamp(1.8rem,3.6vw,3.4rem);max-width:13ch;margin:0}.editorial-band p{margin:0;color:rgba(255,255,255,.9)}
/* Media/testimony */
.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.media-card{min-height:260px;border-radius:24px;padding:24px;background:linear-gradient(180deg,#fff,#FCF8F6);border:1px solid var(--jpm-line);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.media-card::before{content:"";height:4px;position:absolute;left:0;right:0;top:0;background:var(--jpm-arc)}.media-card .archive{font:800 .68rem/1 "Rubik",sans-serif;letter-spacing:.13em;color:var(--jpm-muted)}.media-card .play{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--jpm-purple);color:#fff}.testimony-card{grid-column:span 4}.testimony-card.featured{grid-column:span 6;background:linear-gradient(145deg,#fff,#F7EEF2)}.testimony-card blockquote{font-family:"Rubik",sans-serif;font-size:1.15rem;font-weight:650;line-height:1.48;margin:0 0 24px;color:var(--jpm-purple)}
/* Page hero / facts */
.page-hero{padding:86px 0 66px;position:relative;overflow:hidden}.page-hero::after{content:"";position:absolute;right:-190px;top:-240px;width:540px;height:540px;border-radius:50%;background:var(--jpm-arc-soft);filter:blur(6px)}.page-hero h1{font-size:clamp(3rem,6vw,6rem);max-width:12ch}.breadcrumbs{font-size:.78rem;color:var(--jpm-muted);margin-bottom:24px}.breadcrumbs a{text-decoration:none}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.fact{border-radius:22px;border:1px solid var(--jpm-line);background:#fff;padding:24px}.fact strong{display:block;font-family:"Rubik",sans-serif;color:var(--jpm-purple);font-size:1.05rem;margin-bottom:8px}.fact p{margin:0;color:var(--jpm-muted);font-size:.94rem}
/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.contact-card{display:block;padding:28px;border-radius:24px;background:#fff;border:1px solid var(--jpm-line);text-decoration:none;box-shadow:var(--shadow-sm)}.contact-card span{display:block;font:800 .7rem "Rubik",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--jpm-orange);margin-bottom:8px}.contact-card strong{font:750 clamp(1.1rem,2vw,1.45rem) "Rubik",sans-serif;color:var(--jpm-purple);overflow-wrap:anywhere}
/* Footer */
.site-footer{background:#3F0835;color:rgba(255,255,255,.72);padding:58px 0 26px;position:relative}.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--jpm-arc)}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}.footer-grid img{width:145px;opacity:.96}.footer-title{font:800 .72rem/1 "Rubik",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#F1CC71;margin-bottom:14px}.footer-links{display:grid;gap:8px}.footer-links a{color:rgba(255,255,255,.77);text-decoration:none;font-size:.87rem}.footer-links a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;margin-top:38px;font-size:.76rem}
.floating-cta{position:fixed;right:clamp(14px,2.2vw,28px);bottom:calc(18px + env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;gap:10px;padding:9px 11px 9px 15px;border-radius:999px;background:rgba(255,255,255,.95);border:1px solid rgba(81,11,68,.12);box-shadow:0 22px 55px -22px rgba(81,11,68,.58);text-decoration:none;color:var(--jpm-purple);backdrop-filter:blur(14px)}.floating-cta small{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--jpm-orange)}.floating-cta strong{font:800 .88rem "Rubik",sans-serif}.float-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--jpm-arc);font-weight:900}
@media(max-width:1080px){.desktop-nav{display:none}.menu-toggle{display:grid;place-items:center}.hero-grid{grid-template-columns:1fr}.hero-panel{min-height:420px}.service-grid{grid-template-columns:repeat(2,1fr)}.media-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}}
@media(max-width:700px){.navbar{height:72px}.mobile-menu{inset:72px 0 0}.site-header .brand img{width:128px}.hero{padding-top:60px}.hero-panel{min-height:360px;padding:26px}.service-grid,.media-grid,.facts,.contact-grid{grid-template-columns:1fr}.editorial-band{grid-template-columns:1fr}.testimony-card,.testimony-card.featured{grid-column:span 1}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.floating-cta{min-width:0}.floating-cta .float-copy{display:none}}
/* WEB_JPM v0.9 · Global shell */
.site-header{
  z-index:1000;
  isolation:isolate;
}

.mobile-menu{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  bottom:auto;
  height:calc(100dvh - 82px);
  z-index:1001;
  background:#FBF8F3;
  padding:18px 24px calc(36px + env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
  border-top:1px solid rgba(81,11,68,.08);
}

.site-header .brand{
  background:var(--jpm-arc);
  background-size:160% 160%;
  padding:8px 12px;
  border-radius:14px;
  box-shadow:0 8px 24px -18px rgba(81,11,68,.65);
}

.site-header.is-scrolled{
  background:rgba(251,248,243,.98);
}

@media(max-width:1180px){
  .desktop-nav{
    display:none;
  }

  .menu-toggle{
    display:grid;
    place-items:center;
  }
}

@media(max-width:700px){
  .mobile-menu{
    height:calc(100dvh - 72px);
    padding:12px 18px calc(32px + env(safe-area-inset-bottom));
  }

  .site-header .brand{
    padding:7px 10px;
    border-radius:12px;
  }
}
/* ============================================================
   WEB_JPM · FASE 2 (20260824) · Submenus desktop estables
   ------------------------------------------------------------
   Problema: .submenu abria en top:calc(100% + 10px), dejando un
   hueco fisico de 10px entre el trigger y el panel. Al cruzarlo,
   el puntero salia de .nav-item, se perdia :hover y el submenu
   se cerraba antes de alcanzar cualquier opcion.

   Solucion: se extiende el area sensible de .nav-item 10px hacia
   abajo con padding, y se compensa con margin negativo para no
   alterar el layout ni el centrado vertical del navbar. El panel
   pasa a top:100%, que ahora equivale exactamente a la misma
   posicion visual de antes (36px + 10px de padding).

   No se usa pseudo-elemento puente. No hay artefactos visibles.
   ============================================================ */
@media(min-width:1181px){
  .desktop-nav .nav-item{
    padding-bottom:10px;
    margin-bottom:-10px;
  }

  .desktop-nav .submenu{
    top:100%;
    z-index:200;
  }

  /* .is-open lo gobierna site.js y aporta la tolerancia de cierre */
  .desktop-nav .nav-item.is-open>.submenu{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
}

/* ============================================================
   WEB_JPM · Legibilidad del menu de escritorio · DG-00 2026-10-01
   ------------------------------------------------------------
   El menu se leia pequeno (13px). Crece por tramos y SIEMPRE en
   una sola linea. Los tramos salen de medir el ancho que necesita
   el menu contra el que deja la unidad de marca, en el peor caso
   (Rubik cargada, como en /calculadoras/): cada uno conserva al
   menos 9px de holgura. Corrige ademas el salto a dos lineas que
   ya existia a 1181px.
   El menu movil (<=1180px) no se toca.
   ============================================================ */
@media(min-width:1181px){
  .desktop-nav{gap:2px}
  .desktop-nav .nav-link{
    font-size:14px;
    font-weight:500;
    line-height:1.2;
    min-height:44px;
    padding:12px 6px;
    white-space:nowrap;
  }
}
@media(min-width:1280px){
  .desktop-nav .nav-link{font-size:16px;padding:12px 5px}
}
@media(min-width:1366px){
  .desktop-nav .nav-link{font-size:17px;padding:12px 7px}
}
@media(min-width:1440px){
  .desktop-nav{gap:6px}
  .desktop-nav .nav-link{padding:12px 10px}
}


/* ============================================================
   WEB_JPM · Banda audiovisual (entrevistas / testimonios)
   FASE 5-6 (20260824)
   ------------------------------------------------------------
   Cuatro piezas horizontales en desktop, cada una llenando el
   100% de su celda con object-fit:cover y gap:0, para que el
   conjunto lea como una superficie audiovisual continua y no
   como cuatro tarjetas flotantes.

   El titulo usa un contenedor diagonal (clip-path) con el texto
   en horizontal: no se rotan las letras.

   El componente esta PREPARADO para recibir material real. Para
   activar una pieza basta insertar <video> o <img> dentro de
   .av-piece-media y retirar la clase .is-pending. Mientras no
   exista pieza con participacion, medio, fecha y derecho de
   publicacion verificados, .is-pending conserva el estado
   editorial sin simular material ni ofrecer reproduccion.
   ============================================================ */
.av-band{margin-top:clamp(24px,2.8vw,38px)}

.av-band-head{
  position:relative;
  z-index:2;
  background:var(--jpm-arc);
  color:#fff;
  padding:clamp(24px,2.6vw,38px) clamp(24px,2.8vw,46px) clamp(48px,4.4vw,70px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 38px),0 100%);
}
.av-band-eyebrow{
  margin-bottom:10px;
  font:800 .7rem/1.2 "Rubik",ui-sans-serif,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.av-band-head h2{margin:0;color:#fff;max-width:24ch}
.av-band-head p{margin:12px 0 0;max-width:68ch;color:rgba(255,255,255,.88)}

.av-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:-38px;
}

.av-piece{
  position:relative;
  margin:0;
  aspect-ratio:4/5;
  overflow:hidden;
  isolation:isolate;
  background:#2E0726;
}
.av-piece-media{position:absolute;inset:0;z-index:1}
.av-piece-media>video,
.av-piece-media>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.av-piece-scrim{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(18,4,15,.06) 30%,rgba(18,4,15,.80) 100%);
}
.av-piece-meta{
  position:absolute;
  z-index:3;
  inset:auto 0 0 0;
  padding:clamp(16px,1.4vw,22px);
  color:#fff;
}
.av-piece-meta .archive{display:block;margin-bottom:8px;color:rgba(255,255,255,.7)}
.av-piece-meta h3{margin:0;color:#fff;font-size:clamp(1rem,1.15vw,1.18rem);line-height:1.22}
.av-piece-meta .muted{margin:6px 0 0;color:rgba(255,255,255,.76);font-size:.82rem}
.av-piece-state{
  display:inline-block;
  margin-top:12px;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.26);
  font:700 .64rem/1 "Rubik",ui-sans-serif,sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#fff;
}

/* Sin material verificado: superficie institucional, no un video falso */
.av-piece.is-pending{
  background:
    radial-gradient(circle at 72% 20%,rgba(244,182,63,.18),transparent 58%),
    linear-gradient(168deg,#4A0A3E 0%,#2E0726 62%,#210419 100%);
}
.av-piece.is-pending .av-piece-scrim{background:none}

/* Tablet: dos columnas, nunca cuatro */
@media(max-width:1080px){
  .av-grid{grid-template-columns:repeat(2,1fr)}
  .av-piece{aspect-ratio:4/3}
}

/* Movil: una columna, lectura y control tactil por delante */
@media(max-width:700px){
  .av-band-head{
    padding-bottom:34px;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),0 100%);
  }
  .av-grid{grid-template-columns:1fr;margin-top:-18px}
  .av-piece{aspect-ratio:16/10}
}

@media(prefers-reduced-motion:reduce){
  .av-piece-media>video{animation:none!important}
}


/* ============================================================
   WEB_JPM · Visual de servicio
   FASE 7 (20260824)
   ------------------------------------------------------------
   Espacio audiovisual de cada una de las seis rutas. La imagen
   ocupa TODO el segmento superior de su tarjeta, sangrando
   contra el padding de la tarjeta; no es una miniatura flotante.
   El recorte lo da el overflow:hidden y el radio de la tarjeta.

   El contenedor esta vacio a proposito: mientras no exista un
   activo real, :empty lo oculta y la tarjeta se ve exactamente
   como hoy. Para activar una ruta basta insertar dentro:

     <img src="../assets/img/servicios/<slug>.webp"
          alt="<descripcion util del contenido de la imagen>"
          loading="lazy" decoding="async" width="1600" height="900">

   object-fit:cover se aplica solo aqui, nunca de forma global,
   para no afectar logos, iconos ni activos no editoriales.
   Si la imagen fuese meramente decorativa, usar alt="".
   ============================================================ */
.service-media{
  position:relative;
  margin:-28px -28px 22px;
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(168deg,#4A0A3E 0%,#2E0726 100%);
}
.service-media:empty{display:none}
.service-media>img,
.service-media>video{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

@media(max-width:700px){
  .service-media{margin:-22px -22px 18px}
}


/* ============================================================
   WEB_JPM · Banda de audio editorial (radio)
   FRENTE B (20260824)
   ------------------------------------------------------------
   Las piezas de radio son audio-only (MP3 320 kbps verificado por
   cabecera), por lo que NO se presentan como <video>: usan
   <audio controls>. Sin autoplay. preload="none" para que nada se
   descargue hasta que la persona pulse reproducir.
   Alrededor del reproductor va tratamiento editorial estatico.
   ============================================================ */
.av-audio-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
}
.av-audio-piece{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(22px,2.2vw,32px);
  color:#fff;
  background:
    radial-gradient(circle at 78% 16%,rgba(244,182,63,.16),transparent 60%),
    linear-gradient(168deg,#4A0A3E 0%,#2E0726 64%,#210419 100%);
}
.av-audio-piece .archive{color:rgba(255,255,255,.7)}
.av-audio-piece h3{margin:0;color:#fff;font-size:clamp(1.02rem,1.15vw,1.2rem);line-height:1.22}
.av-audio-piece .muted{margin:0;color:rgba(255,255,255,.76);font-size:.82rem}
.av-audio-piece .av-piece-state{align-self:flex-start;margin-top:0}
.av-audio-piece audio{
  width:100%;
  margin-top:auto;
  padding-top:6px;
}

@media(max-width:700px){
  .av-audio-grid{grid-template-columns:1fr}
}


/* ============================================================
   WEB_JPM · Catálogo audiovisual de testimonios
   FRENTE B (20260824)
   ------------------------------------------------------------
   Variante de .av-band para piezas con material real y controles.

   Celda 9/16: las piezas verticales del catálogo miden 0.55-0.562 de
   ratio, de modo que en esta celda entran con recorte practicamente
   nulo y llenan el 100% de su superficie (object-fit:cover).

   Las piezas apaisadas usan object-fit:contain por decision de DG: se
   ven integras sobre el fondo institucional, conservando su orientacion
   original, sin deformar y sin cortar rostros. La superficie sigue
   leyendose continua porque el fondo es el mismo en todas.

   Los metadatos se colocan ARRIBA para no estorbar la barra de
   controles nativa del video, que vive abajo. Ni el velo ni los
   metadatos capturan el puntero.
   ============================================================ */
.av-band--catalogo .av-piece{
  aspect-ratio:9/16;
  background:#210419;
}
.av-band--catalogo .av-piece-media>video{
  object-fit:cover;
}
.av-band--catalogo .av-piece--apaisada .av-piece-media>video{
  object-fit:contain;
}
.av-band--catalogo .av-piece-scrim{
  background:linear-gradient(180deg,
    rgba(18,4,15,.74) 0%,
    rgba(18,4,15,.20) 32%,
    rgba(18,4,15,0) 54%);
}
.av-band--catalogo .av-piece-meta{
  inset:0 0 auto 0;
  pointer-events:none;
}
.av-band--catalogo .av-piece-meta .av-piece-state{
  margin-top:10px;
}

/* Movil: una pieza por ancho de viewport, conservando el formato
   vertical del material. Controles tactiles nativos. */
@media(max-width:700px){
  .av-band--catalogo .av-piece{aspect-ratio:9/16}
}

/* Tablet: dos columnas, nunca cuatro */
@media(max-width:1080px){
  .av-band--catalogo .av-piece{aspect-ratio:9/16}
}


/* ============================================================
   WEB_JPM · Carga bajo demanda y carrusel movil
   DIRECTRIZ DG v1.1 (20260824) secciones 10 y 12
   ------------------------------------------------------------
   Al entrar, la pagina solo pide posters: los <video>/<audio>
   llevan preload="none" y el src real vive en data-src hasta que
   la persona interactua (site.js). Ningun master entra al
   navegador y ninguna pieza se descarga sola.
   ============================================================ */
.av-piece-media>video[data-src]:not([src]){
  background:transparent;
}

/* Movil: carrusel con scroll-snap. Una pieza dominante por
   viewport (88vw), controles tactiles, y el desplazamiento vive
   DENTRO del carril: el body nunca desborda. */
@media(max-width:700px){
  .av-band--catalogo .av-grid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:88vw;
    gap:10px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
    /* La barra nativa se oculta VISUALMENTE. El desplazamiento sigue
       intacto: tactil, trackpad, rueda, programatico, teclado y
       scroll-snap. Asi queda un unico indicador de posicion, el de JPM,
       en lugar de dos superpuestos. */
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .av-band--catalogo .av-grid::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }
  .av-band--catalogo .av-piece{
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
}

/* Nota editorial de seguridad (seccion 13) */
.av-band-nota{
  margin:14px 0 0;
  font-size:.79rem;
  line-height:1.5;
  color:var(--jpm-muted);
  max-width:80ch;
}

@media(prefers-reduced-motion:reduce){
  .av-band--catalogo .av-grid{scroll-behavior:auto}
}


/* ============================================================
   WEB_JPM · Pieza de audio dentro de una banda audiovisual
   DIRECTRIZ DG v1.1 seccion 4 (slot RADIO) y seccion 12
   ------------------------------------------------------------
   El slot de radio ocupa una celda de la banda como cualquier
   otra pieza, pero con tratamiento editorial estatico alrededor
   del reproductor. Sin autoplay; el src llega por data-src.
   ============================================================ */
.av-piece--audio{
  display:flex;
  background:
    radial-gradient(circle at 78% 16%,rgba(244,182,63,.16),transparent 60%),
    linear-gradient(168deg,#4A0A3E 0%,#2E0726 64%,#210419 100%);
}
.av-piece-audio-body{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:9px;
  width:100%;
  padding:clamp(18px,1.6vw,26px);
  color:#fff;
}
.av-piece-audio-body .archive{color:rgba(255,255,255,.7)}
.av-piece-audio-body h3{margin:0;color:#fff;font-size:clamp(1rem,1.15vw,1.18rem);line-height:1.22}
.av-piece-audio-body .muted{margin:0;color:rgba(255,255,255,.76);font-size:.82rem}
.av-piece-audio-body .av-piece-state{align-self:flex-start;margin-top:2px}
.av-piece-audio-body audio{width:100%;margin-top:8px}


/* ============================================================
   D1 · Utilidades editoriales (Directriz v1.1 secciones 4, 9, 13, 20)
   ============================================================ */

/* --- Full-bleed controlado (seccion 13) ------------------------
   Rompe el wrap sin producir scroll horizontal. El guardian vive
   en base.css (overflow-x:clip en html/body), que no crea
   contenedor de scroll: header sticky y CTA fijo siguen vivos. */
.u-fullbleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
}
/* Recupera el gutter interior cuando el contenido es texto */
.u-fullbleed>.wrap{width:var(--wrap);margin-inline:auto}

/* --- Sistema de velos (overlay localizado) ---------------------
   Solo para legibilidad. Nunca captura el puntero. */
.u-veil{position:absolute;inset:0;z-index:2;pointer-events:none}
.u-veil--bottom{background:var(--veil-bottom)}
.u-veil--top{background:var(--veil-top)}
.u-veil--left{background:var(--veil-left)}
.u-veil--flat{background:var(--veil-ink-soft)}
.u-veil--cream{background:var(--veil-cream-bottom)}

/* --- Medio editorial (seccion 9) -------------------------------
   La imagen ocupa su caja y tiene argumento, no relleno.
   object-fit se declara aqui, nunca de forma global. */
.ed-media{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#210419;
}
.ed-media>img,
.ed-media>video{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ed-media--contain>img,
.ed-media--contain>video{object-fit:contain}
.ed-media__body{
  position:relative;
  z-index:3;
  color:#fff;
  padding:clamp(var(--space-sm),2.4vw,var(--space-lg));
}

/* --- Tipografia como arquitectura (seccion 4.2) ----------------
   No compite con h1/h2 del shell: es una clase opcional para las
   aperturas que deben leerse como elemento constructivo. */
.ed-eyebrow{
  font-family:"Rubik",ui-sans-serif,system-ui,sans-serif;
  font-weight:800;
  font-size:.72rem;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--jpm-orange);
  margin-bottom:var(--space-sm);
}
.ed-title{
  font-family:"Rubik",ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(2.6rem,6.2vw,6rem);
  line-height:.92;
  letter-spacing:-.045em;
  color:var(--jpm-purple);
  margin:0;
  text-wrap:balance;
}
.ed-title--display{font-size:clamp(3.2rem,8.4vw,8.2rem);line-height:.88;letter-spacing:-.055em}
.ed-title em{font-style:normal;display:block}
.ed-lead{
  font-size:clamp(1.02rem,1.5vw,1.22rem);
  line-height:1.62;
  color:var(--jpm-text);
  max-width:62ch;
  margin:var(--space-sm) 0 0;
}

/* --- Ritmo vertical editorial ----------------------------------
   No sustituye .section del shell; se usa en bloques nuevos. */
.ed-section{padding-block:clamp(var(--space-xl),8vw,var(--space-2xl))}
.ed-section--tight{padding-block:clamp(var(--space-lg),5vw,var(--space-xl))}
.ed-section--wide{padding-block:clamp(var(--space-2xl),11vw,var(--space-3xl))}

/* --- Foco visible de respaldo (seccion 20) ---------------------
   :where() tiene especificidad 0, de modo que NO pisa los focos ya
   definidos para .btn, .nav-link, submenu y menu movil. Solo cubre
   lo que hasta ahora se quedaba sin indicador. */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid rgba(204,101,75,.62);
  outline-offset:3px;
  border-radius:6px;
}


/* ============================================================
   WEB_JPM · Navegacion de carrusel audiovisual
   ------------------------------------------------------------
   Aparece solo donde el carril realmente se desplaza. Discreta,
   con el lenguaje de la marca y sin aspecto de dashboard. Las
   flechas solo mueven el carril: no reproducen nada.
   ============================================================ */
.av-nav{
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  margin-top:var(--space-xs);
}
.av-nav[hidden]{display:none}

.av-nav-btn{
  flex:0 0 auto;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--jpm-line);
  border-radius:999px;
  background:#fff;
  color:var(--jpm-purple);
  font:700 1rem/1 "Rubik",ui-sans-serif,sans-serif;
  cursor:pointer;
  transition:border-color var(--motion-fast) var(--ease-state),
             background var(--motion-fast) var(--ease-state),
             opacity var(--motion-fast) var(--ease-state);
}
.av-nav-btn:hover:not(:disabled){border-color:rgba(81,11,68,.34);background:var(--jpm-cream)}
.av-nav-btn:disabled{opacity:.32;cursor:default}
.av-nav-btn:focus-visible{outline:3px solid rgba(236,197,69,.72);outline-offset:3px}

/* Indicador de posicion: dice cuanto del carril se esta viendo */
.av-nav-pista{
  position:relative;
  flex:1 1 auto;
  height:3px;
  border-radius:999px;
  background:var(--jpm-line);
  overflow:hidden;
}
.av-nav-pulgar{
  position:absolute;
  top:0;
  bottom:0;
  min-width:12%;
  border-radius:999px;
  background:var(--jpm-arc);
  transition:left var(--motion-fast) var(--ease-state);
}

@media(max-width:700px){
  .av-nav{
    gap:var(--space-2xs);
    margin-top:var(--space-2xs);
    /* El CTA fijo -Agenda tu cita- vive anclado a la esquina inferior
       derecha del viewport y flota sobre todo. Se reserva ese carril
       para que los controles nunca queden debajo de el: la franja de
       navegacion se queda a la izquierda y el centro. */
    padding-right:112px;
  }
  .av-nav-btn{width:36px;height:36px}
}

@media(prefers-reduced-motion:reduce){
  .av-nav-btn,.av-nav-pulgar{transition:none}
}


/* ============================================================
   WEB_JPM · Carrusel audiovisual de la portada
   DG-00 2026-09-30
   ------------------------------------------------------------
   Solo la portada lleva .av-band--carrusel. /medios/ y
   /testimonios/ conservan la banda de catalogo tal como estaba.

   UNA pieza visible por vez, en todos los anchos. El carril es
   scroll-snap nativo (100% por pieza, sin gap): el swipe es el del
   navegador y nunca asoma la pieza siguiente. site.js solo pinta
   flechas, N / total y puntos, y pausa la pieza que se va.

   Escenario comun con object-fit:contain: vertical, apaisada y
   cuadrada se ven integras, sin recorte. El <video> toma la
   proporcion de sus atributos width/height, de modo que la barra
   de controles nativa mide lo que mide la imagen.

   La diagonal del encabezado se conserva: el escenario sube bajo
   ella, pero esa franja es fondo, no video. El encabezado ya no
   queda encima de ninguna superficie interactiva.
   ============================================================ */
.av-band--carrusel{
  --av-diagonal:38px;
  --av-escenario:clamp(300px,70vh,760px);
}
@supports(height:1svh){
  .av-band--carrusel{--av-escenario:clamp(300px,70svh,760px)}
}
.av-band.av-band--carrusel .av-carrusel{
  position:relative;
  z-index:1;
  margin-top:calc(var(--av-diagonal) * -1);
  padding-top:var(--av-diagonal);
  background:linear-gradient(#210419,#210419) top/100% calc(var(--av-diagonal) + 1px) no-repeat;
}
.av-band.av-band--carrusel .av-grid{
  display:grid;
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  gap:0;
  margin-top:0;
  padding:0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  /* Barra nativa oculta solo a la vista: tactil, trackpad, rueda,
     teclado y scroll-snap siguen intactos. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.av-band.av-band--carrusel .av-grid::-webkit-scrollbar{width:0;height:0;display:none}
.av-band.av-band--carrusel .av-grid:focus-visible{
  outline:3px solid rgba(236,197,69,.72);
  outline-offset:-3px;
}
.av-band.av-band--carrusel .av-piece{
  aspect-ratio:auto;
  height:var(--av-escenario);
  min-width:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:
    radial-gradient(circle at 78% 16%,rgba(244,182,63,.12),transparent 60%),
    #210419;
}
.av-band.av-band--carrusel .av-piece-media{
  display:flex;
  align-items:center;
  justify-content:center;
}
.av-band.av-band--carrusel .av-piece .av-piece-media>video{
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  background:transparent;
}
.av-band.av-band--carrusel .av-piece--audio{
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 78% 16%,rgba(244,182,63,.16),transparent 60%),
    linear-gradient(168deg,#4A0A3E 0%,#2E0726 64%,#210419 100%);
}
.av-band.av-band--carrusel .av-piece-audio-body{
  justify-content:center;
  max-width:560px;
  margin:auto;
}

/* Flechas: SOBRE el escenario, a media altura, flanqueando la pieza
   (site.js publica en --av-media-ancho el ancho real del video o del
   bloque de radio activo). Sobre el fondo oscuro del escenario van en
   dorado con la flecha en morado: se leen como mando, no como adorno.
   Sin destino no se atenuan: desaparecen ([hidden]). */
.av-band--carrusel{--av-flecha:64px;--av-flecha-icono:30px}
.av-carrusel-flecha{
  position:absolute;
  z-index:5;
  top:calc(var(--av-diagonal) + var(--av-escenario) / 2);
  width:var(--av-flecha);
  height:var(--av-flecha);
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--jpm-yellow);
  color:var(--jpm-purple);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.65),0 0 0 1px rgba(81,11,68,.18);
  cursor:pointer;
  transform:translateY(-50%);
  transition:transform var(--motion-fast) var(--ease-state),box-shadow var(--motion-fast) var(--ease-state);
}
.av-carrusel-flecha svg{width:var(--av-flecha-icono);height:var(--av-flecha-icono)}
.av-carrusel-flecha--prev{
  left:max(12px,calc(50% - var(--av-media-ancho,100%) / 2 - var(--av-flecha) - 24px));
}
.av-carrusel-flecha--next{
  right:max(12px,calc(50% - var(--av-media-ancho,100%) / 2 - var(--av-flecha) - 24px));
}
.av-carrusel-flecha:hover{
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.7),0 0 0 1px rgba(81,11,68,.22);
}
.av-carrusel-flecha:focus-visible{
  outline:3px solid var(--jpm-cream);
  outline-offset:3px;
}
.av-carrusel-flecha[hidden]{display:none}

/* Ampliar: arriba a la derecha DENTRO de la imagen, lejos de la barra
   de controles nativa (que vive abajo). Por encima del velo y de los
   metadatos, que no capturan el puntero. */
.av-ampliar{
  position:absolute;
  z-index:4;
  top:14px;
  right:max(14px,calc(50% - var(--av-media-ancho,100%) / 2 + 12px));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:48px;
  height:48px;
  padding:0 16px 0 13px;
  border:1px solid rgba(251,248,243,.55);
  border-radius:999px;
  background:rgba(33,4,25,.72);
  color:var(--jpm-cream);
  font:600 .9rem/1 "Rubik",ui-sans-serif,sans-serif;
  letter-spacing:.02em;
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:background var(--motion-fast) var(--ease-state);
}
.av-ampliar svg{width:20px;height:20px;flex:0 0 auto}
.av-ampliar:hover{background:rgba(81,11,68,.88)}
.av-ampliar:focus-visible{outline:3px solid var(--jpm-yellow);outline-offset:2px}

/* Navegacion de posicion: bajo el escenario. Las flechas explican la
   accion; contador y puntos, el progreso. El CTA fijo vive en la
   esquina inferior derecha; en movil se le reserva su carril.
   Todo objetivo tactil mide 44x44 como minimo. */
.av-carrusel-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  padding-top:12px;
}
.av-carrusel-contador{
  margin:0;
  min-width:3.4em;
  font:700 .84rem/1 "Rubik",ui-sans-serif,sans-serif;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:var(--jpm-purple);
}
.av-carrusel-puntos{display:flex}
.av-carrusel-punto{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.av-carrusel-punto::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(81,11,68,.24);
  transition:width var(--motion-fast) var(--ease-state),background var(--motion-fast) var(--ease-state);
}
.av-carrusel-punto[aria-current="true"]::before{width:22px;background:var(--jpm-purple)}
.av-carrusel-punto:focus-visible{outline:3px solid rgba(236,197,69,.72);outline-offset:-6px;border-radius:999px}
.av-carrusel-sr{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

@media(max-width:700px){
  .av-band--carrusel{--av-diagonal:18px;--av-flecha:54px;--av-flecha-icono:26px}
  .av-carrusel-nav{padding-right:76px}
  .av-carrusel-flecha--prev{left:6px}
  .av-carrusel-flecha--next{right:6px}
  .av-ampliar{
    top:10px;
    right:max(10px,calc(50% - var(--av-media-ancho,100%) / 2 + 8px));
    min-width:44px;
    width:44px;
    height:44px;
    padding:0;
  }
  .av-ampliar-texto{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
}

@media(prefers-reduced-motion:reduce){
  .av-carrusel-punto::before{transition:none}
  .av-carrusel-flecha,.av-ampliar{transition:none}
  .av-carrusel-flecha:hover{transform:translateY(-50%)}
}

/* ============================================================
   WEB_JPM · Visor ampliado de video (portada)
   ------------------------------------------------------------
   <dialog> modal a pantalla completa. El tamano del video lo fija
   site.js en pixeles a partir de su proporcion real (nunca cover,
   nunca deformado); aqui solo se compone la escena.
   ============================================================ */
.av-visor{
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
          max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  border:0;
  background:transparent;
  color:var(--jpm-cream);
  overflow:hidden;
}
.av-visor[open]{display:grid;place-items:center}
.av-visor::backdrop{background:rgba(14,3,12,.9)}
.av-visor-escena{display:grid;place-items:center;max-width:100%;max-height:100%}
.av-visor-escena video{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  background:#000;
  border-radius:6px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
}
.av-visor-cerrar{
  position:fixed;
  z-index:2;
  top:max(14px,env(safe-area-inset-top));
  right:max(14px,env(safe-area-inset-right));
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--jpm-yellow);
  color:var(--jpm-purple);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.7);
  cursor:pointer;
}
.av-visor-cerrar svg{width:26px;height:26px}
.av-visor-cerrar:focus-visible{outline:3px solid var(--jpm-cream);outline-offset:3px}
@media(max-width:700px){
  .av-visor-cerrar{width:48px;height:48px}
}
@media(prefers-reduced-motion:no-preference){
  .av-visor[open]{animation:av-visor-entra 180ms var(--ease-state)}
  @keyframes av-visor-entra{from{opacity:0}to{opacity:1}}
}


/* ============================================================
   WEB_JPM · Linea de cierre editorial
   ------------------------------------------------------------
   Cierra un argumento y debe leerse con jerarquia propia, por
   encima del parrafo pero por debajo del titulo. Ninguna clase
   existente lo resolvia: .lead la igualaria al cuerpo y .badge,
   .status o .callout la convertirian en etiqueta o en caja, que
   es justo lo que la directriz prohibe.
   Es tipografia, no componente: sin caja, sin borde, sin icono.
   ============================================================ */
.ed-cierre{
  margin:var(--space-md) 0 0;
  font-family:"Rubik",ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.12rem,1.9vw,1.5rem);
  line-height:1.32;
  letter-spacing:-.022em;
  color:var(--jpm-purple);
  max-width:34ch;
  text-wrap:balance;
}


/* ============================================================
   WEB_JPM · Retícula editorial de páginas interiores
   ------------------------------------------------------------
   OPT-IN mediante .ed-page en <main>. HOME no se ve afectada.

   Diagnóstico que resuelve: base.css limita h1 a 10ch y h2 a 16ch.
   Es una medida pensada para los titulares cortos de la home, pero
   en las páginas interiores —donde los títulos son frases— obliga a
   romper en cuatro o cinco líneas aunque sobre ancho de pantalla.
   De ahí las zonas vacías accidentales.

   La corrección no es ensanchar los párrafos: es componer. El texto
   narrativo conserva una medida de lectura cómoda y el espacio se
   aprovecha distribuyendo el contenido en columnas.
   ============================================================ */
.ed-page{
  --ed-wrap:min(1460px,calc(100% - 72px));
}
.ed-page .wrap{width:var(--ed-wrap)}

/* --- Titulares de sección: un escalón por debajo del H1 --- */
/* La regla global acota h2 a 16ch. En las interiores eso volvía a partir
   titulares largos en cinco líneas con la columna medio vacía, el mismo
   defecto que el h1 tenía a 10ch. Se libera la medida y se fija la escala
   del titular de sección, que además compite con el H1 si hereda el
   tamaño global. Quedan fuera el cuerpo de texto y las tarjetas, que
   tienen su propia escala. */
.ed-page h2{max-width:none}
.ed-page .section > .wrap > h2,
.ed-page .section > .wrap > div:not(.prose) > h2{
  font-size:clamp(2.1rem,3.4vw,3.3rem);
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}

/* --- Medida de lectura: el párrafo no se ensancha --- */
.ed-page .prose{max-width:none}
.ed-page .prose p,
.ed-page .prose li{max-width:68ch}
.ed-page .prose h2{max-width:none}
.ed-page .prose h3{max-width:34ch}

/* --- Cuerpo de servicio: 7 / 5 --- */
.ed-page .service-detail-grid{
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px,4vw,72px);
  align-items:start;
}
.ed-page .service-detail-grid .prose p,
.ed-page .service-detail-grid .prose li{max-width:72ch}

/* El apoyo acompaña la lectura en lugar de dejar la columna muerta. */
.ed-page .service-side{
  position:sticky;
  top:calc(83px + 24px);
  align-self:start;
}

/* --- Proceso: los pasos aprovechan el ancho de su área --- */
.ed-steps{
  display:grid;
  gap:14px;
  margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr));
}
.ed-steps .step{margin:0}

/* --- Cierre: banda editorial, no tarjeta a media pantalla --- */
.ed-page .section.deep .reveal{
  display:flex;
  flex-wrap:wrap;
  column-gap:clamp(28px,4vw,72px);
  row-gap:18px;
  align-items:center;
}
.ed-page .section.deep .eyebrow{flex:1 0 100%}
.ed-page .section.deep h2{
  flex:1 1 400px;
  max-width:none;
  margin-bottom:0;
  font-size:clamp(2.1rem,3.4vw,3.3rem);
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.ed-page .section.deep .lead{flex:1 1 420px;max-width:58ch;margin:0}
.ed-page .section.deep .actions{flex:1 0 100%;margin-top:4px}

/* --- Tablet: la retícula se reduce con naturalidad --- */
@media(max-width:1080px){
  .ed-page .service-detail-grid{grid-template-columns:1fr}
  .ed-page .service-side{position:static}
}

/* --- Móvil: una columna, sin columnas estrechas artificiales --- */
@media(max-width:760px){
  .ed-page{--ed-wrap:min(100% - 28px,1200px)}
  .ed-page .prose p,
  .ed-page .prose li,
  .ed-page .prose h3{max-width:none}
  .ed-steps{grid-template-columns:1fr}
}


/* ============================================================
   WEB_JPM · Header editorial horizontal (.ed-page-hero-wide)
   ------------------------------------------------------------
   El hero deja de repartirse en columnas. El nombre de la página,
   la declaración editorial y la introducción se leen en un solo
   eje vertical sobre una superficie ancha.

   Jerarquía: eyebrow < nombre (h1) < declaración. El nombre lleva
   el peso institucional; la declaración, la escala. Así el título
   semántico sigue siendo el nombre real de la página sin que la
   frase editorial parezca un segundo h1.

   La altura es consecuencia del texto: no hay min-height ni
   centrado vertical.
   ============================================================ */
.ed-page-hero-wide .wrap{
  display:block;
  width:var(--ed-wrap,min(1460px,calc(100% - 72px)));
}

/* --- Nombre de la página --- */
/* El nombre del servicio adopta el degradado institucional. La regla de
   color de abajo es mas especifica que .gradient-text, asi que se declara
   la excepcion en lugar de tocar el tratamiento compartido. */
.ed-page-hero-wide h1.ed-name.gradient-text{
  color:transparent;
  width:fit-content;
  max-width:100%;
  background-size:100% 100%;
}
.ed-page-hero-wide h1.ed-name{
  max-width:none;
  font-size:clamp(1.7rem,2.5vw,2.5rem);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 clamp(14px,1.6vw,22px);
  color:var(--jpm-purple);
}

/* --- Declaración editorial --- */
.ed-page-hero-wide .ed-manifesto{
  max-width:none;
  width:100%;
  font-family:"Rubik",ui-sans-serif,sans-serif;
  font-weight:700;
  font-size:clamp(2.35rem,4.4vw,4.5rem);
  line-height:.98;
  letter-spacing:-.042em;
  text-wrap:balance;
  color:var(--jpm-ink,var(--jpm-purple));
  margin:0 0 clamp(22px,2.6vw,38px);
}

/* --- Introducción: apilada, nunca al costado --- */
/* --- Entradilla: aprovecha el ancho, no se concentra a la izquierda ---
   La medida anterior (92ch) ocupaba el 55 % del ancho editorial y dejaba
   media pantalla vacia a la derecha. Se ensancha al 86 % y se compensa
   con una escala menor y mas interlineado. La justificacion cierra el
   bloque como una sola entradilla. */
.ed-page-hero-wide .ed-hero-intro{
  display:flex;
  flex-direction:column;
  gap:22px;
  width:100%;
  max-width:1240px;
}
.ed-page-hero-wide .ed-hero-intro .lead{
  max-width:none;
  margin:0;
  font-size:18.5px;
  line-height:1.66;
  text-align:justify;
  text-align-last:left;
  text-justify:inter-word;
  hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}
.ed-page-hero-wide .actions{margin-top:clamp(22px,2.6vw,34px)}

@media(max-width:760px){
  .ed-page-hero-wide h1.ed-name{font-size:clamp(1.45rem,5.6vw,1.9rem)}
  .ed-page-hero-wide .ed-manifesto{
    font-size:clamp(2rem,8.6vw,2.9rem);
    letter-spacing:-.036em;
    line-height:1.02;
  }
  .ed-page-hero-wide .ed-hero-intro{max-width:none;gap:18px}
  /* En movil la linea baja a 41-46 caracteres: por debajo del umbral en
     que la justificacion abre rios entre palabras. Prevalece la lectura. */
  .ed-page-hero-wide .ed-hero-intro .lead{
    font-size:16.5px;
    line-height:1.66;
    text-align:left;
    hyphens:none;
  }
}


/* ============================================================
   WEB_JPM · NAVEGACION SECUNDARIA · REACTIVADA (DG-00)
   ------------------------------------------------------------
   D3 §3 ordeno ocultar desplegables, submenus y chevrons; se
   ejecuto en bcfee5d con un display:none sobre .submenu,
   .mobile-sub y .caret, mas un reseteo del padding que anulaba
   el puente trigger->panel de FASE 2.

   DG-00 revierte esa parte -- y solo esa parte -- de D3 §3. El
   bloque se retira entero: la implementacion historica (CSS del
   panel, apertura por hover y focus-within, puente FASE 2,
   tolerancia de cierre en site.js) nunca se toco y vuelve a
   gobernar sola. No hay nada que reconstruir aqui.
   ============================================================ */


/* ============================================================
   WEB_JPM · DESCRIPTOR INSTITUCIONAL EN EL NAVBAR (DG-00 · D3)
   ------------------------------------------------------------
   La marca institucional se repetia como eyebrow en el hero de
   cada pagina interior. Sube UNA vez al navbar global, pegada al
   logotipo, y deja de ocupar la primera linea de cada hero.

   Va DENTRO de .brand, que ya es un flex con align-items:center:
   asi logo y descriptor se comportan como una sola unidad de
   marca y el descriptor nunca cae debajo del logo.

   No engorda la barra: .navbar conserva su altura fija (82px
   escritorio / 72px movil) y el descriptor se compone dentro de
   ella. Es deliberadamente subordinado -- cuerpo pequeno,
   versalitas, peso medio y opacidad por debajo del logotipo --
   para que se lea como descriptor y no como un segundo logo.
   ============================================================ */
/* El descriptor NO va dentro de .brand: ese ancla es la pildora
   degradada del logotipo, y meterlo ahi lo convertia en un segundo
   logo. Va fuera, y ambos se agrupan en una unidad de marca que ocupa
   en el navbar el mismo lugar que ocupaba el ancla sola. */
.site-header .brand-unit{
  display:flex;
  align-items:center;
  gap:clamp(9px,1vw,14px);
  flex:0 1 auto;
  min-width:0;
}
.site-header .brand-desc{
  display:block;
  /* 250px y no 200: el descriptor mide 197px y se quedaba a tres
     pixeles de romper a dos lineas en cuanto la fuente cargaba. */
  max-width:250px;
  font:600 .56rem/1.3 "Rubik",ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--jpm-purple);
  opacity:.72;
}

/* Movil: el descriptor sigue A LA DERECHA del logo, nunca debajo.
   Se le permite componerse en dos lineas porque el alto del logo ya
   las admite: la barra no crece por ello. */
@media(max-width:700px){
  .site-header .brand-desc{
    max-width:132px;
    font-size:.47rem;
    letter-spacing:.09em;
    line-height:1.28;
  }
}
@media(max-width:380px){
  .site-header .brand-desc{
    max-width:112px;
    font-size:.44rem;
    letter-spacing:.07em;
  }
}


/* ══════════════════════════════════════════════════════════════
   WEB_JPM · T11 · DESPLEGABLE DE NAVEGACION · IMPLEMENTACION UNICA
   --------------------------------------------------------------
   DG-00 T11 §1. Antes vivia en tres sitios y se veia distinto en
   cada uno. En la home el panel salia oscuro con el texto del tema
   claro: items casi ilegibles hasta pasar el raton.

   Esta es la unica. Las hojas de pagina NO vuelven a opinar sobre
   el desplegable: si hace falta cambiarlo, se cambian los tokens.

   El panel es el MISMO en toda la web, tenga la cinta el fondo que
   tenga. Un componente que cambia de aspecto segun la pagina no es
   un componente: son varios con el mismo nombre.
   ══════════════════════════════════════════════════════════════ */

.desktop-nav .nav-link[data-tiene-panel]{ cursor:pointer; }

.submenu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:var(--nav-panel-ancho);
  display:flex;
  flex-direction:column;
  gap:var(--nav-panel-gap);
  padding:var(--nav-panel-padding);
  background:var(--nav-panel-bg);
  border:1px solid var(--nav-panel-borde);
  border-radius:var(--nav-panel-radio);
  box-shadow:var(--nav-panel-sombra);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity var(--motion-menu) var(--ease-enter),
             transform var(--motion-menu) var(--ease-enter);
}

.nav-item:hover>.submenu,
.nav-item:focus-within>.submenu,
.nav-item.is-open>.submenu{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.submenu a{
  display:block;
  padding:var(--nav-item-padding);
  border-radius:var(--nav-item-radio);
  text-decoration:none;
  /* ESTADO NORMAL, no hover. Que un item solo se lea al apuntarlo
     obliga a barrer el menu con el raton para saber que dice. */
  color:var(--nav-texto);
  font-size:.86rem;
  line-height:1.35;
  transition:background var(--motion-micro,.14s) var(--ease-state),
             color var(--motion-micro,.14s) var(--ease-state);
}

.submenu a:hover,
.submenu a:focus-visible,
.submenu a[aria-current="page"]{
  background:var(--nav-fondo-activo);
  color:var(--nav-texto-activo);
}

.submenu a:focus-visible{
  outline:2px solid var(--nav-texto);
  outline-offset:2px;
}

/* ── menu movil · el mismo lenguaje ──
   DG-00 pide comportamiento consistente entre escritorio y movil.
   Tambien vivia en tres sitios. */
.mobile-menu{
  background:var(--nav-panel-bg);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.mobile-menu a{
  color:var(--nav-texto);
  border-bottom-color:var(--nav-panel-borde);
}
.mobile-menu a:hover,
.mobile-menu a:focus-visible,
.mobile-menu a[aria-current="page"]{
  background:var(--nav-fondo-activo);
  color:var(--nav-texto-activo);
}
.mobile-menu a:focus-visible{
  outline:2px solid var(--nav-texto);
  outline-offset:-2px;
}
.mobile-menu .mobile-sub a{
  color:var(--nav-texto);
  opacity:.92;
  font-size:.9rem;
}
.mobile-menu .mobile-sub a:hover,
.mobile-menu .mobile-sub a:focus-visible{
  opacity:1;
  color:var(--nav-texto-activo);
}