/* WEB_JPM v0.9 · Hero audiovisual */
.hero-v09{
  position:relative;
  overflow:hidden;
  padding:clamp(64px,8vw,112px) 0 clamp(72px,9vw,124px);
  background:
    radial-gradient(circle at 86% 18%,rgba(244,182,63,.14),transparent 28%),
    radial-gradient(circle at 74% 76%,rgba(234,96,55,.10),transparent 32%),
    linear-gradient(180deg,#fff 0%,#fbf8f3 100%);
}
.hero-v09::before{
  content:"";
  position:absolute;
  inset:auto -12vw -34% 48%;
  height:72%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(81,11,68,.10),transparent 68%);
  pointer-events:none;
}
.hero-v09-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  grid-template-areas:"copy media";
  gap:clamp(38px,5vw,76px);
  align-items:center;
}
.hero-v09-copy{grid-area:copy;min-width:0;max-width:650px}
.hero-v09-media{grid-area:media;min-width:0}
.hero-v09 .hero-v09-eyebrow{
  margin-bottom:18px;
  font:800 .78rem/1.2 "Rubik",sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#6f5d68;
}
.hero-v09 h1{
  max-width:9.5ch;
  margin:0;
  font-size:clamp(4rem,5.5vw,6.4rem);
  line-height:.91;
  letter-spacing:-.055em;
}
.hero-v09-gradient{
  background:var(--jpm-arc,linear-gradient(105deg,#f4ba3f 0%,#e86536 45%,#510b44 100%));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-v09-lead{
  max-width:610px;
  margin:28px 0 0;
  font-size:clamp(1.05rem,1.35vw,1.28rem);
  line-height:1.58;
  color:#382f35;
}
.hero-v09-support{
  max-width:590px;
  margin:14px 0 0;
  font-size:.96rem;
  line-height:1.58;
  color:#746872;
}
.hero-v09-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:30px;
}
.hero-v09-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 20px;
  border-radius:999px;
  font:800 .86rem/1.1 "Rubik",sans-serif;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.hero-v09-btn:hover{transform:translateY(-1px)}
.hero-v09-btn:focus-visible{outline:3px solid rgba(234,96,55,.34);outline-offset:3px}
.hero-v09-btn-primary{
  color:#fff;
  background:var(--jpm-arc,linear-gradient(105deg,#f4ba3f 0%,#e86536 45%,#510b44 100%));
  box-shadow:0 16px 36px -22px rgba(81,11,68,.75);
}
.hero-v09-btn-secondary{
  color:#510b44;
  background:#fff;
  border:1px solid rgba(81,11,68,.16);
}
.hero-v09-link{
  display:inline-flex;
  margin-top:18px;
  color:#510b44;
  font:800 .84rem/1.2 "Rubik",sans-serif;
  text-decoration:none;
}
.hero-v09-link:hover{text-decoration:underline;text-underline-offset:4px}
.hero-v09-note{
  margin-top:22px;
  max-width:590px;
  font-size:.79rem;
  line-height:1.55;
  color:#827780;
}
.hero-v09-media-frame{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:clamp(22px,2.2vw,34px);
  background:#e9e2dc;
  box-shadow:0 34px 80px -42px rgba(51,13,43,.58);
  isolation:isolate;
}
.hero-v09-media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
  border-radius:inherit;
}
.hero-v09-video,.hero-v09-poster,.hero-v09-poster img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero-v09-poster{z-index:1;margin:0;transition:opacity .5s ease}
.hero-v09-poster img{display:block;object-fit:cover}
.hero-v09-video{z-index:2;display:block;object-fit:cover;opacity:0;transition:opacity .55s ease}
.hero-v09-media-frame.is-video-ready .hero-v09-video{opacity:1}
.hero-v09-media-frame.is-video-ready .hero-v09-poster{opacity:0}
.hero-v09-scrim{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(20,8,17,.02) 36%,rgba(38,8,31,.44) 100%);
}
.hero-v09-media-label{
  position:absolute;
  z-index:5;
  left:22px;
  right:22px;
  bottom:18px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-end;
  color:#fff;
  font:700 .68rem/1.25 "Rubik",sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-shadow:0 1px 16px rgba(0,0,0,.4);
}
.hero-v09-media-label strong{font-size:.78rem;letter-spacing:.14em}

/* ============================================================
   WEB_JPM · Hero v0.9 — bloques responsivos consolidados
   FASE 1 (20260824): se fusionaron los bloques duplicados de
   @media(max-width:700px) y @media(min-width:1081px). Sólo se
   conservan las declaraciones ganadoras de la cascada previa.
   Resultado computado idéntico al estado aprobado por DG.
   Referencia del estado anterior: tools/fase1_ref/
   ============================================================ */

/* --- Tablet / laptop angosto --- */
@media(max-width:980px){
  .hero-v09{padding-top:52px}
  .hero-v09-grid{
    grid-template-columns:1fr;
    grid-template-areas:"media" "copy";
    gap:34px;
  }
  .hero-v09-copy{max-width:760px}
  .hero-v09 h1{font-size:clamp(3.65rem,9vw,5.5rem);max-width:10ch}
  .hero-v09-media{width:min(100%,820px)}
}

/* --- Movil: el video ES la superficie; el texto flota encima --- */
/* DIRECTRIZ DG 20260824 (FRENTE A). Sustituye al criterio anterior.
   El video sangra al ancho REAL del dispositivo (100vw), no al --wrap
   movil. El bloque de texto no es una seccion posterior: se superpone
   fisicamente desde ~50% de la altura audiovisual, sin tarjeta y sin
   caja beige, fundiendose con el video por degradado + desenfoque.
   Desktop (>=1081px) queda congelado: aqui no se toca ninguna regla. */
@media(max-width:700px){

  /* Permite el sangrado a 100vw sin generar scroll horizontal cuando el
     navegador reserva barra clasica. `clip` no crea contenedor de scroll,
     de modo que el header sticky y el CTA fijo siguen funcionando. */
  html,body{overflow-x:clip}

  .hero-v09{
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:0 0 52px;
  }

  /* El hero ignora el gutter global: de borde a borde */
  .hero-v09 .wrap{
    width:100%;
    max-width:none;
    margin-inline:0;
  }

  .hero-v09-grid{
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "media"
      "copy";
    gap:0;
  }

  .hero-v09-media{
    grid-area:media;
    position:relative;
    z-index:1;
    width:100%;
    min-width:0;
    transform:none;
  }

  /* Presencia vertical fuerte: practicamente el viewport bajo el header
     movil (72px). La primera declaracion es respaldo para navegadores
     sin svh; la segunda gana donde svh existe. */
  .hero-v09-media-frame{
    width:100%;
    height:clamp(430px,calc(100vh - 72px),920px);
    height:clamp(430px,calc(100svh - 72px),920px);
    aspect-ratio:auto;
    border-radius:0;
    box-shadow:none;
  }

  .hero-v09-media-frame::after{
    background:none;
    box-shadow:none;
    border-radius:0;
  }

  .hero-v09-media-label{
    display:none;
  }

  /* Superpuesto desde ~50% de la altura audiovisual: el solape es la
     mitad del alto del video, expresado con la misma formula. */
  .hero-v09-copy{
    grid-area:copy;
    position:relative;
    z-index:6;
    width:100%;
    max-width:none;
    margin-inline:0;
    margin-bottom:0;
    margin-top:calc(0px - min(calc(50vh - 36px),460px));
    margin-top:calc(0px - min(calc(50svh - 36px),460px));
    padding:58px 20px 26px;
    background:none;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  /* Capa de legibilidad. Permanece TRANSLUCIDA mientras cubre el video y
     solo llega a opaca cerca del final, ya fuera de la superficie
     audiovisual: por eso no se percibe una caja beige. La mascara elimina
     el borde donde arranca el desenfoque. Pinta bajo el texto y sobre el
     video (z-index negativo dentro del contexto de .hero-v09-copy). */
  .hero-v09-copy::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg,
      rgba(251,248,243,0) 0%,
      rgba(251,248,243,.44) 9%,
      rgba(251,248,243,.68) 24%,
      rgba(251,248,243,.80) 45%,
      rgba(251,248,243,.90) 66%,
      #fbf8f3 88%);
    -webkit-backdrop-filter:blur(20px) saturate(115%);
    backdrop-filter:blur(20px) saturate(115%);
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 9%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 9%);
  }

  .hero-v09 .hero-v09-eyebrow{
    margin-bottom:10px;
  }

  .hero-v09 h1{
    max-width:none;
    font-size:clamp(2.85rem,12.5vw,3.65rem);
    line-height:.90;
  }

  /* Mismo tratamiento que desktop: descendentes completas de la "g" */
  .hero-v09-gradient{
    display:block;
    line-height:1;
    padding-bottom:.10em;
    overflow:visible;
  }

  .hero-v09-lead,
  .hero-v09-support,
  .hero-v09-note{
    max-width:none;
    text-align:justify;
    text-align-last:left;
    hyphens:auto;
  }

  .hero-v09-lead{
    margin-top:16px;
    font-size:1rem;
    line-height:1.46;
  }

  .hero-v09-support{
    margin-top:10px;
    font-size:.9rem;
    line-height:1.46;
  }

  .hero-v09-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:18px;
  }

  .hero-v09-btn{
    width:100%;
  }

  .hero-v09-link{
    margin-top:10px;
  }

  .hero-v09-note{
    margin-top:10px;
    line-height:1.4;
  }
}

/* --- Desktop: video como superficie audiovisual de fondo (APROBADO DG) --- */
@media(min-width:1081px){

  .hero-v09{
    padding-top:14px;
    padding-bottom:38px;
  }

  .hero-v09 .wrap{
    width:calc(100% - 72px);
    max-width:none;
    margin-left:36px;
    margin-right:36px;
  }

  .hero-v09-grid{
    position:static;
    display:block;
    min-height:clamp(620px,72vh,760px);
  }

  .hero-v09-copy{
    position:relative;
    z-index:6;
    width:600px;
    max-width:600px;
    min-height:clamp(620px,72vh,760px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-left:0;
    padding-top:16px;
    margin-left:0;
  }

  .hero-v09-media{
    position:absolute;
    z-index:1;
    top:-18px;
    right:-18px;
    bottom:-18px;
    left:37vw;
    width:auto;
    min-width:0;
    transform:none;
    pointer-events:none;
  }

  .hero-v09-media-frame{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    overflow:hidden;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .hero-v09-media-frame::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    border-radius:0;
    box-shadow:none;
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.90) 0%,
        rgba(255,255,255,.68) 7%,
        rgba(255,255,255,.34) 15%,
        rgba(255,255,255,.10) 24%,
        rgba(255,255,255,0) 34%
      );
  }

  .hero-v09-media-label{
    display:none;
  }

  .hero-v09 .hero-v09-eyebrow{
    margin-top:0;
    margin-bottom:14px;
  }

  /* overflow:visible evita el recorte de descendentes como la "g" */
  .hero-v09 h1{
    max-width:none;
    font-size:clamp(4.2rem,5.4vw,6.35rem);
    line-height:.90;
    margin:0 0 32px;
    overflow:visible;
  }

  .hero-v09-gradient{
    display:block;
    line-height:1;
    padding-bottom:.10em;
    overflow:visible;
  }

  .hero-v09-lead,
  .hero-v09-support,
  .hero-v09-note{
    max-width:620px;
    text-align:justify;
    text-align-last:left;
    hyphens:auto;
  }

  .hero-v09-lead{
    margin-top:0;
    margin-bottom:22px;
    font-size:1.02rem;
    line-height:1.72;
  }

  .hero-v09-support{
    margin-top:0;
    margin-bottom:26px;
    font-size:.95rem;
    line-height:1.72;
  }

  /* Conocer JPM queda antes del cierre comercial */
  .hero-v09-link{
    order:3;
    margin-top:18px;
  }

  /* Los CTA se empujan hacia el fondo */
  .hero-v09-actions{
    order:4;
    margin-top:auto;
    margin-bottom:0;
  }

  /* Nota legal pegada al fondo, inmediatamente bajo los CTA */
  .hero-v09-note{
    order:5;
    width:100%;
    max-width:540px;
    margin-top:14px;
    margin-bottom:8px;
    line-height:1.5;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-v09-btn,.hero-v09-video,.hero-v09-poster{transition:none!important}
  .hero-v09-btn:hover{transform:none}
}