/* ============================================================
   JPM - HERO DE PORTADA "ATARDECER"  ·  jpm-home-hero.css
   ------------------------------------------------------------
   Promocion a la raiz de staging de la composicion aprobada en
   lab/hero-atardecer. Los valores son los del laboratorio: no se
   redisenio nada.

   TODO va scoped bajo .hero-atardecer o body.home-atardecer. El
   laboratorio podia permitirse selectores desnudos -- h1, .btn,
   .reveal, un reset con * -- porque era una pagina de una sola
   pieza. En la portada real esos selectores chocarian con
   base.css y components.css: .reveal del sitio se muestra con
   .is-visible y la del lab con .in, de modo que copiarla tal cual
   habria dejado invisible medio HOME. De ahi el scope.

   El cielo vive DENTRO del hero (.hero-atardecer es relative con
   overflow:hidden), asi que termina donde termina el hero y las
   seis secciones de contenido conservan su fondo. Por eso esta
   hoja NO toca body ni html.

   Motor de nubes: assets/js/jpm-cielo.js, el compartido.
   ============================================================ */

/* -- 1 - CINTA DE NAVEGACION ---------------------------------
   fixed y no sticky: el hero arranca en el pixel 0 y el cielo
   pasa por detras de la barra. Mismos valores de la cinta que en
   el resto del sitio. */
body.home-atardecer .site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  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;
}
/* Pasado el hero, detras de la barra queda el marfil del cuerpo y
   la cinta al 35% se lava. Mismo criterio y mismo valor que en las
   paginas interiores. */
body.home-atardecer .site-header.is-scrolled{
  background:rgba(63,8,53,.86);
  box-shadow:none;
}
body.home-atardecer .site-header .nav-link{
  color:var(--jpm-cream);
  text-shadow:0 1px 10px rgba(42,10,34,.55);
}
body.home-atardecer .site-header .nav-link:hover{
  background:rgba(251,248,243,.10);
  color:var(--jpm-cream);
}
body.home-atardecer .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;
}
body.home-atardecer .site-header .nav-link:focus-visible,
body.home-atardecer .site-header .menu-toggle:focus-visible{
  outline:2px solid rgba(251,248,243,.92);
  outline-offset:3px;
  border-radius:10px;
}
body.home-atardecer .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);
}
body.home-atardecer .site-header .menu-toggle:hover{ background:rgba(251,248,243,.22); }
body.home-atardecer .site-header .brand-desc{ color:var(--jpm-cream); opacity:.8; }
/* T11 · AQUI ESTABA EL DEFECTO QUE VIO DG.
   Esta hoja ponia el panel oscuro y NO tocaba el color del texto,
   de modo que en la home los items del desplegable heredaban el
   texto oscuro del tema claro de components.css y quedaban casi
   ilegibles. En las paginas interiores no pasaba porque
   jpm-sky-shell.css si corregia el color: el mismo componente, dos
   resultados distintos segun la pagina.

   El desplegable y el menu movil ya no se definen aqui. Hay un
   solo componente al final de components.css. */
body.home-atardecer .site-header .skip-link:focus{ color:var(--jpm-purple); }

/* -- 2 - COMPOSICION DEL HERO --------------------------------
   Tres zonas repartidas con dos margenes automaticos, como en el
   laboratorio: el grupo eyebrow+liston cae en el centro optico y
   los CTA bajan hasta el borde de la franja del indicador. */
.hero-atardecer{
  --jpm-head-h:83px;
  --hint-zone:130px;
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  padding:var(--jpm-head-h) 0 var(--hint-zone);
}
@media(max-width:700px){
  .hero-atardecer{ --jpm-head-h:73px; --hint-zone:124px; }
}

.hero-atardecer .hero-fallback{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,#FFCF3D 0%,#EB7C48 32%,#9A2852 66%,#3F0835 100%);
}
.hero-atardecer #arc-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* -- 3 - TEXTO ------------------------------------------------ */
.hero-atardecer .eyebrow-cielo{
  position:relative;
  z-index:2;
  margin-top:auto;
  margin-bottom:22px;
  text-align:center;
}
.hero-atardecer .eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:3px;
  color:rgba(255,249,244,.92);
  text-transform:uppercase;
}
.hero-atardecer .veladura{
  position:relative;
  z-index:2;
  width:100%;
  padding:22px 16px;
  background:rgba(42,10,34,.34);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  text-align:center;
}
.hero-atardecer h1{
  font-family:"Rubik",ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(30px,4.6vw,58px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:#FFF9F4;
  max-width:none;
  margin:0 0 10px;
  text-shadow:0 2px 24px rgba(42,10,34,.45);
  white-space:nowrap;
}
.hero-atardecer h1 .arc{
  background:linear-gradient(100deg,#FFCF3D,#ffe9a8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-atardecer .entradilla{
  margin:0 auto;
  font-size:clamp(10px,1.12vw,16px);
  line-height:1.7;
  color:rgba(255,249,244,.94);
  text-shadow:0 1px 14px rgba(42,10,34,.5);
}
.hero-atardecer .entradilla .linea{ white-space:nowrap; }
/* Las dos notas de alcance del HOME anterior no se pierden: bajan
   de cuerpo y quedan al pie de la veladura, que es donde el ojo
   las espera despues de la entradilla. */
.hero-atardecer .nota-hero{
  margin:12px auto 0;
  max-width:78ch;
  font-size:12.5px;
  line-height:1.6;
  color:rgba(255,249,244,.8);
  text-shadow:0 1px 12px rgba(42,10,34,.5);
}

/* -- 4 - LLAMADAS A LA ACCION -------------------------------- */
.hero-atardecer .ctas{
  position:relative;
  z-index:2;
  margin-top:auto;
  margin-bottom:0;
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.hero-atardecer .btn-hero{
  font-family:"Nunito Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:600;
  font-size:16px;
  padding:14px 30px;
  border-radius:999px;
  text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease;
}
.hero-atardecer .btn-hero:hover{ transform:translateY(-2px); }
.hero-atardecer .btn-primario{
  color:#fff;
  background:linear-gradient(100deg,#510B44,#9A2852);
  box-shadow:0 12px 28px -14px rgba(81,11,68,.7);
}
.hero-atardecer .btn-secundario{
  color:#510B44;
  background:rgba(255,249,244,.94);
  border:1.5px solid rgba(81,11,68,.25);
}
.hero-atardecer .enlace-hero{
  color:rgba(255,249,244,.92);
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  text-shadow:0 1px 12px rgba(42,10,34,.5);
  border-bottom:1px solid rgba(255,249,244,.4);
  padding-bottom:2px;
}
.hero-atardecer .enlace-hero:hover{ color:#fff; border-bottom-color:#fff; }

/* -- 5 - INDICADOR DE DESPLAZAMIENTO ------------------------- */
.hero-atardecer .scroll-hint{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  color:rgba(255,249,244,.85);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.hero-atardecer .scroll-hint::after{
  content:"";
  width:1.5px;
  height:34px;
  background:rgba(255,249,244,.7);
}

/* -- 6 - MOVIL ------------------------------------------------ */
@media(max-width:700px){
  .hero-atardecer h1{ white-space:normal; font-size:clamp(28px,7.5vw,38px); }
  .hero-atardecer .entradilla{ font-size:15px; }
  .hero-atardecer .entradilla .linea{ white-space:normal; }
  .hero-atardecer .nota-hero{ font-size:12px; }
}

/* -- 7 - MENOS MOVIMIENTO ------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .hero-atardecer #arc-canvas{ display:none; }
  .hero-atardecer .btn-hero{ transition:none; }
}