/* v10 · Desafíos conectados a los nueve casos reales.
   Composición de card fotográfica vertical: titular a todo el ancho de la cabecera, fotografía
   estrecha a la izquierda estirada hasta la base del CTA, contenido canónico a la derecha.
   Los nueve bloques comparten una sola atmósfera de fondo (canvas WebGL sticky).
   Origen: workspace/laboratorio-desafios-card-vertical-v01. */

.desafios-lista {
  position:relative;
  isolation:isolate;
  padding:0;
  background:linear-gradient(180deg,#10122a 0,#090b20 70rem);
}

/* En escritorio la portada termina a la misma altura que Cómo ayudamos. El titular de
   Desafíos es más compacto, así que necesita este aire final explícito; en móvil el
   texto se quiebra naturalmente y conserva la altura que necesita para leerse. */
@media (min-width:641px) {
  body[data-section="desafios"] .editorial-hero {
    padding-bottom:calc(clamp(4rem,8vh,7rem) + 2.9rem);
  }
}

/* El titular de Desafíos pasó a una oración larga en tres líneas (2026-09-22): el contraste
   outline/solid alternado y la segunda línea alineada a la derecha, pensados para dos líneas
   cortas, se veían desordenados con tanto texto. Todas las líneas quedan en color sólido y
   alineadas a la izquierda. */
body[data-section="desafios"] .editorial-hero-title .editorial-title-line {
  align-self:flex-start;
}
body[data-section="desafios"] .editorial-hero-title .editorial-title-outline > span,
body[data-section="desafios"] .editorial-hero-title .editorial-title-solid > span {
  color:#fff;
  -webkit-text-stroke:0;
  -webkit-text-fill-color:#fff;
  mix-blend-mode:normal;
  text-shadow:none;
}
.desafio-bloque { position:relative; z-index:2; background:transparent; padding:clamp(4.5rem,9vw,8rem) 0; scroll-margin-top:7rem; }
.desafio-bloque + .desafio-bloque { border-top:1px solid rgba(255,255,255,.1); }
/* El primer desafío entra en el mismo eje visual que los módulos iniciales de Cómo ayudamos y
   Experiencia. Los siguientes conservan su separación editorial más amplia. */
@media (min-width:641px) {
  .desafio-bloque:first-of-type { padding-top:clamp(3rem,5.7vw,5rem); }
}

/* Atmósfera compartida: el canvas queda pegado al viewport y los nueve bloques pasan por encima,
   de modo que la niebla es continua y no se recrea un contexto WebGL por bloque.
   El margen negativo lo saca del flujo: ocupa alto sin empujar la lista. */
.desafios-atmosfera,
.desafios-atmosfera-velo {
  /* `display:block` es obligatorio: el velo es un <span> y, como inline, ignora `height:100vh`.
     Sin esto el degradado se aplasta a la altura de una línea de texto y deja un corte visible
     justo bajo el hero, en vez de cerrar la atmósfera contra el fondo. */
  display:block;
  position:sticky;
  top:0;
  z-index:0;
  width:100%;
  height:100vh;
  margin-bottom:-100vh;
  pointer-events:none;
}
.desafios-atmosfera { opacity:.9; }
.desafios-atmosfera-velo {
  z-index:1;
  background:
    linear-gradient(180deg,rgba(16,18,42,.96) 0%,rgba(9,11,32,.08) 14%,transparent 34%,transparent 72%,rgba(9,11,32,.72) 100%),
    radial-gradient(ellipse at 50% 48%,transparent 8%,rgba(9,11,32,.08) 58%,rgba(9,11,32,.5) 100%);
}

.desafio-bloque-grid {
  display:grid;
  grid-template-columns:clamp(220px,18vw,270px) minmax(0,1fr);
  gap:clamp(2.8rem,5vw,5.5rem);
  row-gap:clamp(1.8rem,3vw,2.6rem);
  align-items:stretch;
}

/* El titular cruza toda la cabecera, del eje izquierdo de la card al extremo derecho del bloque,
   y se apoya en su base para que la fotografía arranque a la altura de la bajada. */
.desafio-bloque-grid > h2 {
  grid-column:1/-1;
  grid-row:1;
  align-self:end;
  width:100%;
  max-width:none;
  margin:0;
  font-size:clamp(1.9rem,2.75vw,2.9rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.035em;
}
/* Único titular corto de los nueve: sin este freno ocupa una línea y su card queda mucho más
   baja que el resto de la lista. */
#bupa-executive-brand .desafio-bloque-grid > h2 { padding-right:52%; }

.desafio-foto {
  /* NO usa la clase `.desafio-card`: esa ya existe en base.css para las tarjetas de desafío del
     Home, y como esta figura es el segundo hijo del grid hacía match con
     `.desafio-card:nth-child(3n+2)::before` —más específica que la regla local—, que reemplazaba
     la veladura de color por una barrita magenta de 36×2 px. De paso arrastraba padding,
     min-height:250px y un hover que levanta la tarjeta. Ninguno pertenece a este componente.

     Es un enlace al mismo caso que el CTA «Ver caso»: la fotografía también lleva al caso.
     `display:block` porque un <a> es inline por defecto. El cursor personalizado ya la trata
     como pieza «Ver» —está en VIEW_TARGETS de cursor.js—, así que la señal de clic existe. */
  display:block;
  text-decoration:none;
  color:inherit;
  grid-column:1;
  grid-row:2;
  position:relative;
  isolation:isolate;
  align-self:stretch;
  min-height:0;
  margin:0;
  overflow:hidden;
  border:0;
  border-radius:22px;
  background:#15172d;
  box-shadow:0 30px 70px rgba(0,0,0,.25);
}
/* La veladura acompaña la identidad Good sin homogeneizar las paletas documentales de cada toma. */
.desafio-foto::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(145deg,rgba(105,52,183,.32),rgba(105,52,183,.08) 42%,rgba(221,0,127,.13) 73%,rgba(82,206,191,.14)),
    radial-gradient(circle at 78% 18%,rgba(82,206,191,.12),transparent 34%),
    linear-gradient(0deg,rgba(45,46,62,.22),transparent 48%);
  mix-blend-mode:normal;
  opacity:.22;
}
.desafio-foto img {
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:none;
  transform:scale(1.01);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
#bupa-employer-branding .desafio-foto img { object-position:center 44%; }
#bupa-executive-brand .desafio-foto img { object-position:center 20%; }
#bupa-future-health .desafio-foto img { object-position:center 20%; }

.desafio-foto-num {
  position:absolute;
  left:clamp(1.25rem,2vw,1.8rem);
  bottom:clamp(1rem,1.8vw,1.5rem);
  z-index:3;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.9);
  font-size:clamp(4.2rem,5.7vw,5.8rem);
  font-weight:800;
  line-height:.78;
  letter-spacing:-.07em;
  text-shadow:0 8px 30px rgba(0,0,0,.35);
  transition:-webkit-text-stroke-color .35s ease,transform .55s cubic-bezier(.2,.8,.2,1);
}
.desafio-foto-num::after {
  content:"";
  display:inline-block;
  width:.55rem;
  height:.55rem;
  margin-left:.55rem;
  border-radius:50%;
  background:var(--magenta);
  box-shadow:0 0 14px rgba(221,0,127,.5);
}
.desafio-foto:hover img,
.desafio-foto:focus-visible img { transform:scale(1.055); }
.desafio-foto:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.desafio-foto:hover .desafio-foto-num,
.desafio-foto:focus-visible .desafio-foto-num { -webkit-text-stroke-color:var(--cyan); transform:translateY(-4px); }

.desafio-bloque-contenido {
  grid-column:2;
  grid-row:2;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);
  column-gap:clamp(2.5rem,7vw,7.5rem);
  row-gap:0;
  max-width:none;
  padding-top:0;
}
.desafio-bloque-bajada {
  grid-column:1/-1;
  grid-row:1;
  max-width:62ch;
  margin:0 0 clamp(2.2rem,4vw,3.4rem);
  color:var(--muted);
  font-size:clamp(.95rem,1.25vw,1.08rem);
  line-height:1.7;
}
.desafio-bloque-bajada::after {
  content:"";
  display:inline-block;
  width:.58rem;
  height:.58rem;
  margin-left:.55rem;
  border-radius:50%;
  background:var(--magenta);
  box-shadow:0 0 12px rgba(221,0,127,.3);
}
.desafio-bloque-label {
  margin:0 0 .65rem;
  color:var(--cyan);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.desafio-bloque-label:nth-of-type(2) { grid-column:1; grid-row:2; }
.desafio-bloque-label:nth-of-type(4) { grid-column:2; grid-row:2; }
.desafio-bloque-trabajamos,
.desafio-bloque-objetivo { margin:0; font-size:clamp(.9rem,1.05vw,1rem); line-height:1.78; }
.desafio-bloque-trabajamos { grid-column:1; grid-row:3; }
.desafio-bloque-objetivo { grid-column:2; grid-row:3; color:var(--muted); }
.desafio-bloque-trabajamos em { color:var(--magenta); }

/* ---------------------------------------------------------------------------------------------
   Variante "epígrafe sobre el titular" (2026-09-22)
   ---------------------------------------------------------------------------------------------
   Un desafío adopta esta variante con solo mover su `.desafio-bloque-bajada` fuera de
   `.desafio-bloque-contenido`, como hijo directo del grid y antes del <h2>, y poner "Objetivo del
   cliente" delante de "Cómo lo trabajamos" dentro del contenido. Nada de esto se engancha por id:
   `:has()` reconoce la estructura, así que el siguiente bloque que la adopte no necesita CSS nuevo.

   La bajada pasa a encabezar la sección completa (arranca en el eje izquierdo del bloque, el mismo
   del titular y de la card) y el orden de las columnas se invierte: Objetivo a la izquierda, Cómo
   lo trabajamos a la derecha. */
.desafio-bloque-grid:has(> .desafio-bloque-bajada) > .desafio-bloque-bajada {
  grid-column:1/-1;
  grid-row:1;
  justify-self:start;
  max-width:62ch;
  margin:0;
  color:var(--muted);
  font-size:clamp(.95rem,1.25vw,1.08rem);
  line-height:1.7;
}
/* Epígrafe y titular son una unidad: el aire entre ellos tiene que ser MENOR que el `row-gap` del
   bloque, que es el que los separa del contenido de abajo. Con el gap solo (41.6px en escritorio,
   más que los 42px que bajan hasta la card) el epígrafe quedaba flotando a media distancia. El
   margen negativo recorta ese gap hasta ~30px sin tocar el ritmo del resto de la grilla. */
.desafio-bloque-grid:has(> .desafio-bloque-bajada) > h2 {
  grid-row:2;
  margin-top:clamp(-.7rem,-1.1vw,-.45rem);
}
.desafio-bloque-grid:has(> .desafio-bloque-bajada) > .desafio-foto,
.desafio-bloque-grid:has(> .desafio-bloque-bajada) > .desafio-bloque-contenido {
  grid-row:3;
}
@media (min-width:701px) {
  .desafio-bloque-grid:has(> .desafio-bloque-bajada) { grid-template-rows:auto auto 1fr; }
}
/* Los párrafos traen columna fija por clase, así que el intercambio va a mano. Los labels no se
   pueden apuntar con el `nth-of-type` de la regla general —cuenta sobre TODOS los <p> del
   contenedor, y aquí ya no está la bajada ocupando el primero—, de modo que cada uno se identifica
   por el párrafo que le sigue. */
.desafio-bloque-grid:has(> .desafio-bloque-bajada) .desafio-bloque-objetivo,
.desafio-bloque-grid:has(> .desafio-bloque-bajada) .desafio-bloque-label:has(+ .desafio-bloque-objetivo) {
  grid-column:1;
  grid-row:auto;
}
.desafio-bloque-grid:has(> .desafio-bloque-bajada) .desafio-bloque-label:has(+ .desafio-bloque-objetivo) { grid-row:2; }
.desafio-bloque-grid:has(> .desafio-bloque-bajada) .desafio-bloque-objetivo { grid-row:3; }
.desafio-bloque-grid:has(> .desafio-bloque-bajada) .desafio-bloque-trabajamos,
.desafio-bloque-grid:has(> .desafio-bloque-bajada) .desafio-bloque-label:has(+ .desafio-bloque-trabajamos) {
  grid-column:2;
}
.desafio-bloque-grid:has(> .desafio-bloque-bajada) .desafio-bloque-label:has(+ .desafio-bloque-trabajamos) { grid-row:2; }
.desafio-bloque-grid:has(> .desafio-bloque-bajada) .desafio-bloque-trabajamos { grid-row:3; }
@media (max-width:900px) {
  /* Apilado: todo a la columna 1. Dejar un ítem en `grid-column:2` cuando el contenedor declara
     una sola pista le crea una columna implícita y parte el apilado en dos. */
  .desafio-bloque-grid:has(> .desafio-bloque-bajada) .desafio-bloque-label:has(+ .desafio-bloque-objetivo) { grid-column:1; grid-row:2; margin-top:0; }
  .desafio-bloque-grid:has(> .desafio-bloque-bajada) .desafio-bloque-objetivo { grid-column:1; grid-row:3; }
  .desafio-bloque-grid:has(> .desafio-bloque-bajada) .desafio-bloque-label:has(+ .desafio-bloque-trabajamos) { grid-column:1; grid-row:4; margin-top:2rem; }
  .desafio-bloque-grid:has(> .desafio-bloque-bajada) .desafio-bloque-trabajamos { grid-column:1; grid-row:5; }
}
@media (max-width:640px) {
  /* Misma proporción que en escritorio: el epígrafe pegado a su titular, no a medio camino entre
     el titular y lo que viene antes. El `row-gap` de 32px ya da el aire necesario. */
  .desafio-bloque-grid:has(> .desafio-bloque-bajada) > .desafio-bloque-bajada {
    margin-bottom:-.5rem;
  }
}

.desafio-caso-link {
  grid-column:1/-1;
  grid-row:4;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  margin-top:clamp(2rem,3.5vw,3rem);
  padding:.9rem 1.2rem;
  border-radius:999px;
  background:var(--magenta);
  color:var(--white);
  text-decoration:none;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.desafio-caso-link:hover {
  transform:translateY(-2px);
  background:#f0008d;
  box-shadow:0 10px 26px rgba(221,0,127,.25);
}
.desafio-caso-link:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.desafio-caso-link span { position:relative; }
.desafio-caso-link span::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.2rem;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.desafio-caso-link:hover span::after,
.desafio-caso-link:focus-visible span::after { transform:scaleX(1); }
.desafio-caso-link i {
  font-size:1rem;
  font-style:normal;
  transition:transform .35s ease;
}
.desafio-caso-link:hover i,
.desafio-caso-link:focus-visible i { transform:translate(3px,-3px); }

@media (max-width:900px) {
  .desafio-bloque-grid { grid-template-columns:minmax(180px,28vw) minmax(0,1fr); gap:2rem; }
  .desafio-bloque-contenido { grid-template-columns:1fr; }
  .desafio-bloque-label:nth-of-type(2) { grid-column:1; grid-row:2; }
  .desafio-bloque-trabajamos { grid-column:1; grid-row:3; }
  .desafio-bloque-label:nth-of-type(4) { grid-column:1; grid-row:4; margin-top:2rem; }
  .desafio-bloque-objetivo { grid-column:1; grid-row:5; }
  .desafio-caso-link { grid-column:1; grid-row:6; }
}

@media (max-width:700px) {
  /* El reveal parte cada carácter 24px a la derecha. Con el titular a ancho completo, la última
     letra de algunas líneas sobresale medio píxel mientras dura el scrub. `clip` lo contiene sin
     crear un contenedor de scroll, así que el canvas sticky de la atmósfera —que cuelga de
     .desafios-lista, no de aquí— sigue anclado al viewport. */
  .desafio-bloque { overflow-x:clip; }
  .desafio-bloque-grid { grid-template-columns:1fr; gap:2rem; }
  .desafio-bloque-grid > h2 { grid-column:1; grid-row:1; }
  #bupa-executive-brand .desafio-bloque-grid > h2 { padding-right:0; }
  /* La card deja de estirarse contra el CTA: sin segunda columna, toma un recorte apaisado. */
  .desafio-foto { width:100%; aspect-ratio:16/10; align-self:auto; border-radius:18px; }
  .desafio-foto img { object-position:center; }
  #bupa-employer-branding .desafio-foto img { object-position:center 38%; }
  .desafio-foto-num { font-size:4.6rem; }
  .desafio-bloque-contenido { grid-column:1; grid-row:3; }
  /* La variante con epígrafe suma una fila por encima del título (ver bloque de escritorio más
     arriba): sin esto, hereda `h2 { grid-row:1 }` de la regla general y ambos se superponen. */
  .desafio-bloque-grid:has(> .desafio-bloque-bajada) > .desafio-bloque-bajada { grid-column:1; grid-row:1; }
  .desafio-bloque-grid:has(> .desafio-bloque-bajada) > h2 { grid-row:2; margin-top:0; }
  .desafio-bloque-grid:has(> .desafio-bloque-bajada) > .desafio-foto { grid-row:3; }
  .desafio-bloque-grid:has(> .desafio-bloque-bajada) > .desafio-bloque-contenido { grid-row:4; }
}

@media (max-width:560px) {
  .desafios-lista { padding-top:1rem; }
  .desafio-bloque { padding:4rem 0; scroll-margin-top:5.5rem; }
  .desafio-bloque-grid > h2 { font-size:clamp(1.7rem,7.2vw,2rem); line-height:1.12; }
  .desafio-bloque-bajada { margin-bottom:2.2rem; }
}

@media (prefers-reduced-motion:reduce) {
  .desafio-foto img,
  .desafio-foto-num,
  .desafio-caso-link,
  .desafio-caso-link span::after,
  .desafio-caso-link i { transition:none; }
  .desafio-caso-link:hover { transform:none; }
}

/* Cierre de página: conserva su función de navegación, con la misma composición ambiental de
   Profundiza para abrir el paso desde los desafíos hacia las capacidades. */
.desafios-siguiente { position:relative; isolation:isolate; display:grid; align-items:center;
  min-height:clamp(500px,68vh,680px); padding:clamp(5rem,8vw,8rem) max(4vw,24px);
  overflow:hidden; color:var(--white); background:#10122a; }
.desafios-siguiente-bg { position:absolute; z-index:-4; inset:-22% -10%; overflow:hidden;
  transform-origin:50% 50%; will-change:transform; }
.desafios-siguiente-bg img { width:100%; height:100%; object-fit:cover; object-position:center 48%;
  filter:saturate(1.18) contrast(1.16) brightness(.58); transform:scale(1.16); will-change:transform; }
.desafios-siguiente-velo { position:absolute; z-index:-3; inset:-4% 0; background:
  linear-gradient(90deg,rgba(8,10,34,.62) 0%,rgba(19,14,58,.26) 46%,rgba(7,9,31,.64) 100%),
  radial-gradient(circle at 78% 18%,rgba(82,206,191,.15),transparent 31%),
  radial-gradient(circle at 24% 84%,rgba(221,0,127,.2),transparent 38%);
  -webkit-backdrop-filter:blur(19px); backdrop-filter:blur(19px); will-change:transform; }
.desafios-siguiente-grano { position:absolute; z-index:-2; inset:0; pointer-events:none;
  background:url('../assets/brand/noise.png') center/cover no-repeat; }
.desafios-siguiente-grid { position:relative; width:min(1100px,92vw); margin:auto; display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(300px,.58fr); gap:clamp(3rem,9vw,9rem); align-items:end;
  will-change:transform; }
.desafios-siguiente-copy { min-width:0; }
.desafios-siguiente-copy .kicker { margin:0 0 1.6rem; color:var(--cyan); font-size:clamp(.9rem,1.1vw,1.05rem);
  font-weight:600; line-height:1.45; letter-spacing:.24em; }
.desafios-siguiente-copy h2 { max-width:13ch; margin:0; font-size:clamp(2.7rem,4.8vw,5.2rem);
  font-weight:400; line-height:1; letter-spacing:-.045em; }
.desafios-siguiente-actions { display:flex; flex-direction:column; align-items:flex-start; padding-bottom:.35rem; }
.desafios-siguiente-link { position:relative; display:inline-flex; align-items:center; gap:.65rem; padding-bottom:.45rem;
  color:var(--cyan); text-decoration:none; font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.desafios-siguiente-link::after { content:''; position:absolute; right:0; bottom:0; left:0; height:1px; background:var(--magenta);
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.desafios-siguiente-link i { font-size:1rem; font-style:normal; transition:transform .35s ease; }
.desafios-siguiente-link:hover::after, .desafios-siguiente-link:focus-visible::after { transform:scaleX(1); }
.desafios-siguiente-link:hover i, .desafios-siguiente-link:focus-visible i { transform:translate(4px,-4px); }

@media (max-width:900px) {
  .desafios-siguiente-grid { grid-template-columns:1fr; gap:2.5rem; }
  .desafios-siguiente-copy h2 { max-width:16ch; }
}
@media (max-width:640px) {
  .desafios-siguiente { min-height:0; padding:5rem 6vw; }
  .desafios-siguiente-bg { inset:-18% -26%; }
  .desafios-siguiente-bg img { filter:saturate(1.15) contrast(1.13) brightness(.56); }
  .desafios-siguiente-grid { width:100%; gap:2.25rem; }
  .desafios-siguiente-copy h2 { font-size:clamp(2.45rem,12vw,3.8rem); }
}
@media (prefers-reduced-motion:reduce) {
  .desafios-siguiente-bg, .desafios-siguiente-bg img, .desafios-siguiente-velo, .desafios-siguiente-grid { will-change:auto; }
  .desafios-siguiente-link::after, .desafios-siguiente-link i { transition:none; }
}