/* Variante D · Inmersión con la gama de la variante E de los anillos (paleta «ventosa»), a petición de dirección (2026-10-12).
   Misma estructura y movimiento que A; cambian los tonos: Papel → Shallow → azul vivo → azul oscuro → morado, verde como acento.
   Estos tonos (morado #421E83, lila #6948B5, azules #084886 / #056EC1, verde #93BA5B) NO pertenecen a la rampa del Sistema de
   Diseño Digital: se usan aquí por indicación expresa de dirección. */
.vd { --vd-morado: #421E83; --vd-lila: #6948B5; --vd-azul-osc: #084886; --vd-azul-vivo: #056EC1; --vd-verde: #93BA5B; }
.va { background: var(--vd-morado); color: var(--paper); }
.va section { position: relative; overflow: hidden; }
.va .wrap { position: relative; z-index: 2; }
.va h2 { font-size: clamp(44px, 6.4vw, 92px); margin-bottom: .35em; max-width: 14ch; }
.va h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: .98; margin-bottom: .3em; }
.va p { max-width: 62ch; }
.va .se-marcador { background: transparent; color: inherit; outline: 1.5px dashed currentColor; outline-offset: 2px; padding: 0 3px; font-size: .9em; }

/* Olas: borde superior de cada banda, del color de la banda, que muerde la anterior */
.va-ola { position: absolute; top: -1px; left: 0; right: 0; height: clamp(40px, 7vw, 96px); z-index: 1; }
.va-ola svg { width: 100%; height: 100%; }
.va-ola--shallow path { fill: var(--shallow); }
.va-ola--tidal path { fill: var(--vd-azul-vivo); }
.va-ola--loch path { fill: var(--vd-azul-osc); }
.va-ola--deep path { fill: var(--vd-morado); }
/* Capas: una banda translúcida del tono siguiente, con borde ondulado, que deriva muy despacio al desplazarse */
.va-capa { position: absolute; left: -2%; right: -2%; bottom: -2px; height: clamp(90px, 16vw, 220px); z-index: 0; opacity: .22; will-change: transform; }
.va-capa svg { width: 100%; height: 100%; }
.va-capa--1 path { fill: var(--vd-azul-vivo); }
.va-capa--2 path { fill: var(--vd-azul-osc); }
.va-capa--3 path { fill: var(--vd-morado); }

/* ── Cabecera: superficie ── */
/* Dirección (2026-10-12): D empieza con fondo lila y el lockup de la conferencia en blanco */
.va-hero { background: var(--vd-lila); color: var(--paper); min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; padding: 84px 0 20px; }
.va-hero-in { display: grid; grid-template-columns: minmax(0, 760px) 1fr; }
.va-hero-in > * { grid-column: 1; }
.va-eyebrow { font: 500 15px/1.3 var(--text); letter-spacing: .04em; margin-bottom: 14px; }
.va-h1 { font-size: clamp(58px, 7.4vw, 112px); line-height: .9; max-width: 9ch; margin-bottom: .2em; }
.va-h1 .l { display: inline-block; }
.va-datos { font: 700 clamp(18px, 1.7vw, 23px)/1.4 var(--text);   /* negrita y algo más grande (dirección, 2026-10-12) */ margin-bottom: 14px; max-width: 40ch; }
.va-lead { font-size: clamp(17px, 1.3vw, 19px); max-width: 50ch; margin-bottom: 22px; }
.va-hero-foot { display: flex; align-items: center; gap: 20px; margin-top: auto; padding-top: 22px; flex-wrap: wrap; }
.va-hero .se-cta { background: var(--paper); color: var(--vd-morado); }
.va-hero .se-cta::after { background: var(--vd-morado); }
.va-hero .se-completo { color: var(--paper); background: rgba(66, 30, 131, .9); }
.va-hero .se-aviso { font-weight: 500; }
/* Los anillos nacen claros: el módulo pinta Papel de fondo y bandas Shallow/Tidal (configurado en a-inmersion.js) */
#va-anillos-hero { z-index: 0; }

/* ── Qué es: Shallow ── */
.va-que { background: var(--shallow); color: var(--vd-morado); padding: clamp(110px, 14vw, 180px) 0 clamp(80px, 10vw, 140px); }
.va-que .txt { columns: 1; max-width: 66ch; }
.va-que .txt p:first-child { font-size: clamp(20px, 1.8vw, 25px); line-height: 1.4; font-weight: 500; }

/* ── Programa: Tidal, el descenso por horas ── */
.va-programa { background: var(--vd-azul-vivo); color: var(--paper); padding: clamp(110px, 14vw, 180px) 0 clamp(80px, 10vw, 140px); }
.va-entradilla { font-size: clamp(17px, 1.3vw, 20px); max-width: 56ch; margin-bottom: 48px; }
.va-prog { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 0 24px; }
.va-rail { position: relative; }
.va-rail::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--paper); opacity: .9; transform-origin: top; }
.va-rail-l { position: absolute; left: 22px; font: 500 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.va-rail-l--sup { top: 0; }
.va-rail-l--fondo { bottom: 0; }
.va-franjas { list-style: none; margin: 0; padding: 0; }
.va-franja { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid rgba(244, 241, 234, .28); position: relative; }
.va-franja:last-child { border-bottom: 1px solid rgba(244, 241, 234, .28); }
.va-hora { font: 400 clamp(34px, 3.4vw, 48px)/1 var(--display); padding-left: 3px; }
.va-hora span { display: inline-block; transition: transform .35s var(--ease-out); }
.va-franja:hover .va-hora span { transform: translateX(6px); }
.va-franja--networking { background: rgba(143, 182, 191, .18); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.va-franja--networking h3 { font-family: var(--text); font-weight: 500; font-size: 20px; line-height: 1.3; }
.va-franja--networking .va-hora { opacity: .85; }
.va-cuerpo p { margin-bottom: .5em; }
.va-con { font-size: 15px; opacity: .85; }
.va-idioma { font-size: 15px; margin: 28px 0 36px; opacity: .85; }
.va-programa .se-cta { background: var(--paper); color: var(--vd-morado); }
.va-programa .se-cta::after { background: var(--vd-morado); }

/* ── Entidades: Loch ── */
.va-entidades { background: var(--vd-azul-osc); color: var(--paper); padding: clamp(110px, 14vw, 180px) 0 clamp(80px, 10vw, 140px); }
.va-ents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 48px; }
.va-ent h3 { margin: 0 0 28px; }   /* el h3 es el logotipo (sin nombre a la vista); 28 px hasta la bio (dirección, 2026-10-12). Esta regla, más específica, es la que manda sobre .va-ent-logo */
.va-ent p { font-size: 16px; margin-bottom: .5em; }
.va-mesa { color: var(--shallow); }
.va-mesa span { font-weight: 600; color: var(--paper); }
.va-mesa span::after { content: ":"; }

/* ── Campaña, inscripción, llegar, organiza, conferencia: Loch → Mar profundo ── */
.va-campana { background: var(--vd-azul-osc); color: var(--paper); padding: 0 0 clamp(80px, 10vw, 140px); }
.va-campana p { font-size: clamp(17px, 1.3vw, 20px); }
.va-inscripcion { background: var(--vd-morado); color: var(--paper); padding: clamp(110px, 14vw, 180px) 0 clamp(90px, 10vw, 150px); min-height: 90vh; display: flex; align-items: center; }
#va-anillos-fondo { z-index: 0; }
.va-inscripcion .wrap { max-width: var(--maxw); width: 100%; }
.va-inscripcion .lead { font-size: clamp(18px, 1.5vw, 22px); max-width: 50ch; }
.va-inscripcion h3 { font-family: var(--text); font-weight: 600; font-size: 17px; margin: 28px 0 10px; }
.va-inscripcion .pasos { max-width: 56ch; padding-left: 1.3em; margin: 0 0 20px; }
.va-inscripcion .pasos li { margin-bottom: .5em; }
.va-inscripcion .contacto { font-size: 16px; margin-bottom: 32px; }
.va-inscripcion .se-cta { background: var(--paper); color: var(--vd-morado); font-size: 19px; padding: 22px 32px; }
.va-inscripcion .se-cta::after { background: var(--vd-morado); }
.va-inscripcion .se-completo { background: rgba(66, 30, 131, .85); }
.va-llegar, .va-organiza, .va-conf { background: var(--vd-morado); color: var(--paper); padding: clamp(60px, 7vw, 100px) 0; border-top: 1px solid rgba(244, 241, 234, .16); }
.va-llegar .dir { font-size: 20px; max-width: 48ch; }
.va-llegar .lineas { list-style: none; padding: 0; margin: 0; max-width: 60ch; }
.va-llegar .lineas li { padding: 10px 0; border-top: 1px solid rgba(244, 241, 234, .16); }
.va-organiza .rot { font: 500 13px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin: 28px 0 14px; }
.va-organiza .logos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: center; }
.va-organiza .logos img { width: 160px; height: auto; display: block; }   /* mismo ancho para todos (dirección, 2026-10-12) */
.va-organiza .logos .txt { font: 400 28px/1 var(--display); }
.va-organiza .txt { margin-top: 28px; font-size: 16px; max-width: 70ch; }
.va-conf .enlace { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--shallow); text-decoration: none; border-bottom: 2px solid var(--shallow); padding-bottom: 2px; }

@media (max-width: 900px) {
  .va-ents { grid-template-columns: 1fr; }
  .va-prog { grid-template-columns: 1fr; }
  .va-rail { display: none; }
  .va-franja { grid-template-columns: 66px 1fr; gap: 12px; }   /* hora a la izquierda y texto a su derecha también en móvil (dirección, 2026-10-12) */
  .va-hora { font-size: 30px; }
}
@media (max-width: 720px) {
  .va-hero { padding-top: 100px; justify-content: flex-start; }
  .va-hero-in { grid-template-columns: 1fr; }
  .va-h1 { font-size: clamp(54px, 15.5vw, 76px); max-width: none; }
  .va-lead { font-size: 16px; margin-bottom: 20px; max-width: none; }
  .va-datos { font-size: 17px; }
  .va-hero-foot { padding-top: 20px; }
  .va-que, .va-programa, .va-entidades { padding-top: 90px; }
}

/* ── Acentos de la gama E: verde en el raíl, los subrayados y el botón de las bandas oscuras; lila en las capas ── */
.vd .va-rail::before { background: var(--vd-verde); }
.vd .va-rail-l { color: var(--vd-verde); opacity: 1; }
.vd .va-mesa { color: var(--vd-verde); }
.vd .va-capa--2 path { fill: var(--vd-lila); }
.vd .va-programa .se-cta, .vd .va-inscripcion .se-cta { background: var(--vd-verde); color: var(--vd-morado); }
.vd .va-programa .se-cta::after, .vd .va-inscripcion .se-cta::after { background: var(--vd-morado); }
.vd .va-conf .enlace { color: var(--vd-verde); border-bottom-color: var(--vd-verde); }
.vd .va-franja--networking { background: rgba(244, 241, 234, .14); }
.vd .se-marcador { outline-color: var(--vd-verde); }

.va-ent-logo { height: 60px; margin-bottom: 24px; }   /* dirección (2026-10-12): más aire hasta el texto */
.va-ent-logo img { height: 100%; width: auto; max-width: 155px; object-fit: contain; object-position: left center; }   /* ancho máximo = el de CMAS a 60 px (155 px), dirección 2026-10-12 */