/* Y mañana, ¿qué? · azul grisáceo, para que el logo negro se lea */

html:has(.evento) {
  background-color: #C5D0D8;
}

body:has(.evento) {
  --bg: #C5D0D8;
  --bg-hueco: #B4C0C9;
  --ink: #1A2228;
  --cuerpo: #3E4A52;
  --muted: #5C6A73;
  --line: #A3B0BA;
  background: transparent;
  isolation: isolate;
}

/* WP · el cielo cuelga de .evento, no de body.
   El multiply de .ev-marca se funde con el fondo de su contexto de
   apilamiento mas cercano, y entre la marca y body Salient interpone
   .container-wrap (z-index 10) y .row_col_wrap_12 (z-index 10). Quitarles el
   z-index arreglaba el multiply pero dejaba al .row-bg de Salient —una capa
   absoluta transparente con pointer-events auto— por encima del contenido:
   se comia los clics del articulo y tapaba el contenido del pie.
   Poniendo el cielo en .evento con isolation:isolate, el articulo es su
   propio grupo de fusion y Salient conserva sus z-index intactos. */
.evento { isolation: isolate; }

.evento::before,
.evento::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.evento::before {
  background-color: #C5D0D8;
  background-image:
    radial-gradient(70% 48% at 50% 28%, #DCE3E8 0%, transparent 62%),
    radial-gradient(90% 50% at 50% 100%, #A8B6C0 0%, transparent 58%),
    linear-gradient(180deg, #A9B7C1 0%, #C0CBD3 38%, #CDD5DB 100%);
}
.evento::after {
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

@media (prefers-color-scheme: dark) {
  html:has(.evento) { background-color: #1A2228; }
  body:has(.evento) {
    --bg: #1A2228;
    --bg-hueco: #242C32;
    --ink: #E8EEF0;
    --cuerpo: #9AA6AE;
    --muted: #7A868E;
    --line: #2A343C;
  }
  .evento::before {
    background-color: #1A2228;
    background-image:
      radial-gradient(90% 55% at 50% 18%, #2A343C 0%, transparent 58%),
      linear-gradient(180deg, #151B20 0%, #1A2228 50%, #222A30 100%);
  }
}

.evento .k-head {
  min-height: calc(100svh - var(--casa-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  padding-top: 28px;
  padding-bottom: 36px;
  overflow: visible;
}

/* El fade de .k-head crea un stacking context y el multiply deja de
   fundirse con el cielo: se ve un recuadro blanco y el logo cortado. */
.evento .k-head > .ev-marca {
  opacity: 1;
  transform: none;
  transition: none;
}

.ev-marca {
  position: relative;
  width: min(280px, 76vw);
  aspect-ratio: 2.35 / 1;
  height: auto;
  margin: 0 auto 18px;
  background: transparent;
  mix-blend-mode: multiply;
}
.ev-marca-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ev-marca img,
.ev-marca video {
  pointer-events: none;
  background: #fff;
}
.ev-marca img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}
.ev-marca video {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 220%;
  width: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  visibility: hidden;
}
.ev-marca.is-on video { visibility: visible; }
.ev-marca.is-on img { visibility: hidden; }

@media (prefers-color-scheme: dark) {
  .ev-marca { background: #C5D0D8; }
}

/* fj-v2.css alinea a la izquierda los antetitulos de .k-cap con
     .articulo:not(.termino) .k-cap .k-kicker  →  text-align: left   (0,4,0)
   que le gana al `.k-cap .k-kicker { text-align: center }` (0,2,0) de la
   linea 514. Es la regla del articulo estandar, donde cada acto va alineado
   a la izquierda de la columna; en las landings el antetitulo va centrado.
   `.evento.articulo` empata en (0,4,0) y esta hoja carga despues, asi que
   gana por orden y no hace falta !important. */
.evento.articulo .k-cap > .k-kicker {
  text-align: center;
}

.evento .k-cap h2 {
  max-width: 28ch;
}
.evento .k-head h1 {
  max-width: 12ch;
  margin-bottom: 14px;
}
.evento .k-head h1 em {
  font-style: italic;
  font-weight: 300;
}

.ev-cuando {
  text-align: center;
  margin: 0 auto;
}
.ev-cuando .k-meta {
  margin: 0;
}
.ev-cuando .k-meta + .k-meta {
  margin-top: 7px;
}
.ev-maps {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 92%;
  transition: color .3s var(--ease);
}
.ev-maps:hover {
  color: var(--ink);
}

.ev-count {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 16px 0 0;
}
.ev-count div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ev-count b {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.625rem, 1.25rem + 1.1vw, 2.125rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ev-count span {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-height: 740px) {
  .evento .k-head {
    min-height: 0;
    padding-top: 32px;
    padding-bottom: 28px;
  }
}

.ev-cal {
  display: inline-flex;
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 10px 0 8px;
  cursor: pointer;
  text-decoration: none;
}
.ev-cal.ok { color: var(--muted); border-bottom-color: var(--line); }

.ev-despues-cal {
  text-align: center;
  padding: clamp(48px, 6vw, 72px) 24px 0;
}

#rsvp { scroll-margin-top: calc(var(--casa-h) + 16px); }

.ev-invita {
  font-size: 16px;
  line-height: 1.55;
  color: var(--cuerpo);
  text-align: center;
  text-wrap: pretty;
  max-width: 62ch;
  margin: 0 auto;
  padding: 0 24px;
}

.ev-form {
  width: min(calc(100% - 48px), var(--col-narrow));
  max-width: var(--col-narrow);
  min-width: 0;
  margin: clamp(12px, 2vw, 24px) auto 0;
  background: transparent;
}
.ev-form iframe {
  display: block;
  width: 100%;
  min-height: 1180px;
  border: 0;
  background: var(--bg);
}
.ev-form-alt {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
}
.ev-form-alt a {
  color: var(--ink);
}

.evento .k-fin {
  max-width: var(--col-wide);
  width: min(calc(100% - 48px), var(--col-wide));
}

.ev-fin-lede {
  font-size: 16px;
  line-height: 26px;
  color: var(--cuerpo);
  text-align: center;
  text-wrap: pretty;
  max-width: 46ch;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.evento .ac-volumen {
  grid-column: auto;
  margin-bottom: 0;
  padding: 28px 0 8px;
}
.evento .ev-glos {
  margin-top: clamp(40px, 5.4vw, 72px);
  padding-top: 28px;
}

.evento .ac-serie a.is-ultima {
  color: var(--ink);
  border-bottom-color: var(--rama, var(--ink));
}

.ev-glos-lista .gl-row:first-child { border-top-color: var(--rama, var(--ink)); }

.ev-glos-mas {
  display: inline-block;
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
}

@media (max-width: 720px) {
  .ev-count { gap: 22px; }
  .ev-form iframe { min-height: 1280px; }
}

/* ==========================================================================
   WP · el cielo tiene que llegar hasta arriba, header incluido
   ==========================================================================
   En el prototipo el degradado de body::before solo tenia html y body por
   encima. En WordPress hay tres capas opacas de crema en medio:

     fji-mapa-v2-layout.css   #ajax-content-wrap                  #f6f4ee !important
     fji-mapa-v2-layout.css   #ajax-content-wrap .container-wrap  #f6f4ee
     CSS adicional (Customizer)  body.material .ocm-effect-wrap   #f6f4ee !important

   fji-mapa-v2-layout.css se encola porque el slug esta en la lista blanca del
   mapa v2 (es lo que evita el radar antiguo). Y el Customizer se imprime en
   wp_head:101, despues de esta hoja, asi que aqui no basta con !important:
   hace falta ganar tambien por especificidad.

   #header-outer ya es transparente (fji-site-chrome.css) con su placa de
   cristal en ::before, asi que en cuanto estas tres se apagan el cielo se ve
   por debajo del header, que es el efecto buscado.

   Solo en las paginas del encuentro: cuelga de body:has(.evento).            */

html body:has(.evento) #ajax-content-wrap,
html body:has(.evento) #header-space,
html body.material:has(.evento) .ocm-effect-wrap,
html body.material:has(.evento) .ocm-effect-wrap #ajax-content-wrap .container-wrap {
  background: transparent !important;
}

/* #header-space es el separador que Salient inserta para reservar la altura
   del header fijo. salient-dynamic-styles.css lo pinta con
   `.material #header-space` (1,1,0). Sin apagarlo queda una banda crema de
   86 px entre el borde superior y el cielo. */

/* El multiply de .ev-marca solo se funde con el fondo de su propio contexto
   de apilamiento, y Salient crea dos por el camino:
     .container-wrap    z-index:10  (style.css) / 11 (responsive.css)
     .row_col_wrap_12   z-index:10  (.wpb_row > .span_12, style.css)
   Con ellos en medio la marca se funde contra nada y se ve el recuadro
   blanco del video. Quitando el z-index (position:relative sin z-index no
   crea contexto) el grupo de fusion vuelve a ser body, que es donde vive el
   cielo de ::before. Solo en las paginas del encuentro. */
/* (la regla de z-index sobre .container-wrap y .row_col_wrap_12 se ha
   retirado: rompia el .row-bg de Salient. Ver la nota del cielo arriba.) */

/* La tercera lleva .material y .ocm-effect-wrap en medio a proposito: el CSS
   adicional del Customizer usa
     body.material .ocm-effect-wrap #ajax-content-wrap .container-wrap
   con !important, que es (1,3,1). Sin esos dos eslabones esta regla se queda
   en (1,2,2) y pierde por numero de clases. Asi es (1,4,2). */

/* ==========================================================================
   WP · movil: deshacer el recuadro de fji-mapa-v2-layout.css
   ==========================================================================
   Esa hoja, dentro de @media (max-width: 767px), pone a
   `.container.main-content` (0,2,0) fondo #f6f4ee, max-width y padding
   0 30px. Resultado: la pieza queda en un recuadro crema de 440 px metido
   30 px por cada lado, con el cielo asomando solo por los bordes, y el hero
   deja de ser a sangre.

   En /futuros/ no pasa porque esa pagina lleva la clase fj-con-mapa y la
   propia hoja tiene reglas para ese caso. Las landings del encuentro no
   llevan el shortcode, asi que caen en la regla generica.

   Solo por debajo de 767 px y solo con .evento: el layout de escritorio
   (max-width 1425 y padding 40) se queda como esta.                        */

@media only screen and (max-width: 767px) {
  html body:has(.evento) .container.main-content {
    background: transparent !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   WP · el pie, por delante del cielo
   ==========================================================================
   .container-wrap de Salient es `position:relative; z-index:10`, y el cielo
   —.evento::before, fixed, z-index:-1— vive dentro de ese contexto. Con la
   seccion global en la localizacion "Footer" el pie se imprime FUERA, como
   hermano de .container-wrap dentro de #ajax-content-wrap y con z-index:auto,
   asi que el contexto z-10 entero se pinta por encima y se come el fondo
   #1D1D1B de sus filas. Se veia el texto blanco sobre el azulado.
   z-index:11 lo sube por delante de ese 10, e isolation:isolate le da su
   propio contexto para que sus .row-bg absolutos se queden dentro.
   Sin !important: no hay ninguna regla de Salient poniendo z-index aqui.
   Acotado con :has(.evento): solo estas dos paginas tienen cielo fijo. */
html body:has(.evento) .nectar-global-section {
  position: relative;
  z-index: 11;
  isolation: isolate;
}