/* HOME DE VERNE (index.html) · Sistema visual aprobado el 15-10-2026
   Se carga después de css/home.css y del hero (css/hero-modular.css), solo en index.html: no afecta a las internas.

   Principios:
   · lienzo claro continuo y salas oscuras enmarcadas (Verne Space, Testimonios) entre dos extremos navy
     a sangre (hero y cierre): los cambios de tono son decisiones de composición, no franjas añadidas;
   · los módulos del hero (punto y cápsulas 2u/3u/5u) construyen el contenido: en Servicios las
     especialidades son las cápsulas y la composición explica cada servicio (convergencia, expansión, sistema);
   · retícula editorial asimétrica alineada con la cabecera común;
   · titulares en Poppins Bold 700, subtítulos y controles en 500–600, párrafos en Regular 400;
   · movimiento escaso: el hero, la formación de cada servicio al entrar y el cambio de foto en Formación. */

:root {
  /* paleta documentada (skill verne-web-design + credenciales Verne 2026) */
  --v-navy:#25283D;          --v-navy-90:#1F2236;  --v-navy-95:#191B2B;   /* navy y sus fondos oscuros (hsl 232 24% 8–14%) */
  --v-purple:#6D4ABE;        --v-purple-dk:#5B3AA0;                       /* acción y hover */
  --v-lavender:#C0B0F4;                                                    /* acentos sobre oscuro */
  --v-mist:#F5F4FA;          --v-mist-2:#EDE8FB;   --v-line:#D8D4EA;      /* tintes claros de las credenciales */
  --v-ink-2:#5A5D72;                                                       /* texto secundario sobre claro (credenciales) */
  --v-white:#FFFFFF;
  --hx-pad:24px;                                                           /* mismo margen que la cabecera común */
  --hx-sec:clamp(96px, 12vw, 152px);                                       /* aire vertical de sección */
  --hx-ease:cubic-bezier(.22,.61,.36,1);
}

/* ── hero aprobado con el titular en Poppins Bold ──
   El Bold ocupa ~2 % más que el 500: el cuerpo baja un poco para conservar el mismo peso visual y las dos líneas.
   Las zonas de exclusión de los módulos se miden en vivo sobre el texto (js/hero-modular.js), así que se recalculan solas. */
.hm-title { font-weight:700; font-size:clamp(34px, 4.3vw, 60px); line-height:1.1; }
@media (max-width:700px){
  /* «Comunicación Digital» mide 11,18 × el cuerpo en Bold; 4 % de margen para que nunca desborde */
  .hm-title { font-size:min(clamp(30px, 8.4vw, 36px), calc((100vw - 48px) / 11.65)); }
}

/* ── base del Home ── */
.hx-wrap { max-width:1200px; margin:0 auto; padding-inline:var(--hx-pad); position:relative; }
.hx-eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 22px; font-size:13px; font-weight:500; line-height:1.4; letter-spacing:0; color:var(--v-purple); }
.hx-h2 { margin:0; font-size:clamp(32px, 3.4vw, 50px); font-weight:700; line-height:1.08; letter-spacing:0; color:var(--v-navy); text-wrap:balance; }
.hx-h3 { margin:0; font-size:clamp(24px, 2.2vw, 32px); font-weight:600; line-height:1.16; letter-spacing:0; text-wrap:balance; }
.hx-h4 { margin:0; font-size:clamp(20px, 1.6vw, 24px); font-weight:600; line-height:1.25; letter-spacing:0; color:var(--v-navy); }
.hx-display { margin:0; font-size:clamp(36px, 3.8vw, 54px); font-weight:700; line-height:1.06; letter-spacing:0; color:var(--v-white); text-wrap:balance; }
.hx-display span { color:var(--v-lavender); }
.hx-deck { margin:0; max-width:52ch; font-size:17px; line-height:1.7; font-weight:400; color:var(--v-ink-2); text-wrap:pretty; }
.hx-meta { margin:0; font-size:13px; line-height:1.5; font-weight:500; color:var(--v-ink-2); }
.hx-head .hx-h2 + .hx-deck { margin-top:24px; }

/* ── módulo del sistema: una sola definición geométrica para todo el Home ──
   alto = diámetro del punto = --d · largo = --len × --d (punto 1, cápsulas 2 / 3 / 5) · extremos semicirculares.
   Nunca se comprimen (flex:none) ni se estiran con scaleX: las transiciones cambian posición, opacidad
   o un recorte redondeado (clip-path con «round»), de modo que el alto y los extremos no cambian nunca.
   (Los módulos del hero siguen la misma regla en css/hero-modular.css: alto u, largo n·u, radio 999px.) */
.hx-mark i, .hx-prog-mod i, .hx-fld i, .hx-field i { display:block; flex:none; height:var(--d); width:calc(var(--d) * var(--len, 1)); border-radius:calc(var(--d) / 2); }
.hx-fld i.c2, .hx-field i.c2 { --len:2; }
.hx-fld i.c3, .hx-field i.c3 { --len:3; }

/* marca de sección: punto · cápsula 3 · punto */
.hx-mark { --d:6px; display:inline-flex; align-items:center; gap:4px; flex:none; }
.hx-mark i { background:currentColor; }
.hx-mark i:nth-child(2) { --len:3; opacity:.55; }

/* enlaces de texto y botones (cápsula; un solo color de acción) */
.hx-link { display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:500; color:var(--v-purple); text-decoration:none; padding:6px 0; }
.hx-link svg { transition:transform .2s var(--hx-ease); }
.hx-link:hover svg, .hx-link:focus-visible svg { transform:translateX(3px); }
.hx-link:focus-visible, .hx-btn:focus-visible, .hx-h3 a:focus-visible, .hx-piece:focus-visible, .hx-foot a:focus-visible { outline:2px solid var(--v-purple); outline-offset:4px; border-radius:6px; }
.hx-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 26px; border-radius:999px; font-size:14.5px; font-weight:500; letter-spacing:0; text-decoration:none; cursor:pointer; border:0; transition:background .2s ease, transform .16s cubic-bezier(.23,1,.32,1), border-color .2s ease; }
.hx-btn:active { transform:scale(.97); }
.hx-btn.vcta { padding:0 22px 0 26px; gap:12px; }

/* CTA principal (hero, Verne Space, formulario, agradecimiento): mismo símbolo de módulos que se convierte en flecha.
   La cápsula no se estira: se desvanece mientras se dibuja el trazo; el punto entra y desaparece.
   Flecha con foco de teclado siempre; con el cursor solo en punteros finos; en táctil la flecha está fija
   (un solo toque abre el enlace). Variantes de caja según el fondo: .hm-btn (degradado sobre el hero),
   .hx-btn-primary (morado), .hx-btn-ghost (contorno sobre oscuro). */
.vcta { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.vcta-i { flex:none; width:26px; height:14px; overflow:visible; }
.vcta-i .vi-dot, .vcta-i .vi-cap { fill:currentColor; transition:transform .24s cubic-bezier(.23,1,.32,1), opacity .18s ease; }
.vcta-i .vi-shaft, .vcta-i .vi-head { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.vcta-i .vi-shaft { stroke-dasharray:12; stroke-dashoffset:12; transition:stroke-dashoffset .24s cubic-bezier(.23,1,.32,1), opacity .12s ease; }
.vcta-i .vi-head { stroke-dasharray:14; stroke-dashoffset:14; transition:stroke-dashoffset .24s cubic-bezier(.23,1,.32,1) .04s, opacity .12s ease; }
.vcta:focus-visible .vi-dot { transform:translateX(8px); opacity:0; }
.vcta:focus-visible .vi-cap { opacity:0; }
.vcta:focus-visible .vi-shaft, .vcta:focus-visible .vi-head { stroke-dashoffset:0; opacity:1; }
@media (hover:hover) and (pointer:fine){
  .vcta:hover .vi-dot { transform:translateX(8px); opacity:0; }
  .vcta:hover .vi-cap { opacity:0; }
  .vcta:hover .vi-shaft, .vcta:hover .vi-head { stroke-dashoffset:0; opacity:1; }
}
@media (hover:none){
  .vcta .vi-dot { transform:translateX(8px); opacity:0; }
  .vcta .vi-cap { opacity:0; }
  .vcta .vi-shaft, .vcta .vi-head { stroke-dashoffset:0; opacity:1; }
}
/* enviando: el símbolo vuelve a sus módulos, que laten despacio; el botón no admite otra pulsación */
.hx-form[data-state="sending"] .vcta { cursor:progress; }
.hx-form[data-state="sending"] .vcta .vi-dot, .hx-form[data-state="sending"] .vcta .vi-cap { transform:none; opacity:1; animation:vcta-wait 1s ease-in-out infinite alternate; }
.hx-form[data-state="sending"] .vcta .vi-cap { animation-delay:-.5s; }
.hx-form[data-state="sending"] .vcta .vi-shaft, .hx-form[data-state="sending"] .vcta .vi-head { opacity:0; }
.hx-form[data-state="sending"] .hx-btn-primary { background:var(--v-purple-dk); }
@keyframes vcta-wait { from { opacity:1; } to { opacity:.35; } }
.hx-btn-primary { background:var(--v-purple); color:var(--v-white); }
.hx-btn-primary:hover { background:var(--v-purple-dk); }
.hx-btn-ghost { background:transparent; color:var(--v-white); box-shadow:inset 0 0 0 1px hsl(0 0% 100% / .28); }
.hx-btn-ghost:hover { box-shadow:inset 0 0 0 1px var(--v-lavender); }
/* navegación sobre claro (ver más contenido): contorno navy; el morado queda para las acciones de conversión */
.hx-btn-line { background:transparent; color:var(--v-navy); box-shadow:inset 0 0 0 1px hsl(232 24% 19% / .3); }
.hx-btn-line:hover { box-shadow:inset 0 0 0 1px var(--v-navy); }

/* listas de especialidades: separadas por el punto del sistema */
.hx-tags { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:15px; line-height:1.55; color:var(--v-ink-2); }
.hx-tags li { position:relative; padding-left:14px; }
.hx-tags li::before { content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:999px; background:var(--v-purple); opacity:.7; }

/* retícula editorial: encabezado (5) · contenido (7) */
.hx-split { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px, 6vw, 96px); align-items:start; }
.hx-sticky { position:sticky; top:120px; }

/* lienzo y salas: el fondo claro es continuo; las secciones oscuras son salas enmarcadas sobre él.
   Sin costuras ni franjas: el borde redondeado y el margen blanco marcan que se entra en otro espacio. */
:root { --room-m:clamp(6px, .9vw, 12px); --room-r:clamp(18px, 2vw, 28px); }
.hx-roomwrap { background:var(--v-white); padding-inline:var(--room-m); }
.hx-room { position:relative; border-radius:var(--room-r); overflow:hidden; }
/* final del recorrido: Testimonios, Contacto y pie son salas consecutivas del mismo ancho, separadas por el margen del marco */
.hx-roomwrap--contacto { padding-top:0; }
/* Testimonios y Contacto comparten una sola sala oscura: Testimonios abre (radios superiores), Contacto cierra
   (radios inferiores), el navy continúa sin corte y una línea fina alineada con el contenido marca el cambio de tema.
   Cada lado conserva la mitad del aire de sección: continuidad sin amontonar. */
.hx-roomwrap--casos .hx-room { border-radius:var(--room-r) var(--room-r) 0 0; }
.hx-roomwrap--casos .hx-voices { padding-bottom:clamp(56px, 6vw, 88px); }
.hx-roomwrap--contacto .hx-room { border-radius:0 0 var(--room-r) var(--room-r); }
.hx-roomwrap--contacto .hx-contact { padding-top:0; }
.hx-roomwrap--contacto .hx-contact > .hx-wrap { padding-top:clamp(56px, 6vw, 88px); }
.hx-roomwrap--contacto .hx-contact > .hx-wrap::before { content:""; position:absolute; top:0; left:var(--hx-pad); right:var(--hx-pad); height:1px; background:hsl(0 0% 100% / .12); }
.hx-footwrap { background:var(--v-white); padding:calc(var(--room-m) * 2) var(--room-m) var(--room-m); }

/* ── 1 · Organizaciones: muro de logos bajo el hero ──
   Retícula de 6 × 3 sin líneas ni bordes: celdas de igual alto centran cada logo y equilibran la distribución.
   Escala por peso visual, no por ancho: la altura de cada logo (--h) se calculó con su caja visible, la densidad de
   tinta y el tono, de modo que los logos densos u oscuros se reducen y los ligeros crecen. Escala de grises con
   CSS (conserva las relaciones tonales de cada marca); solo los logos transparentes demasiado claros se oscurecen
   un poco (--b). Los fondos blancos opacos siguen blancos. Los archivos no se modifican. */
.hx-clients { background:var(--v-white); padding-block:clamp(48px, 5.5vw, 76px) clamp(56px, 6vw, 88px); }
/* «Confían en Verne» es el título de la sección (h2): con 13 px gris parecía otra letra junto a los logos */
.hx-clients-t { margin:0 0 clamp(24px, 2.8vw, 36px); font-size:clamp(20px, 1.7vw, 24px); font-weight:600; line-height:1.25; color:var(--v-navy); }
.hx-logos { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); overflow:hidden; }
.hx-logos li { display:flex; align-items:center; justify-content:center; height:clamp(92px, 8.4vw, 116px); padding:0 clamp(12px, 1.6vw, 24px);
}
.hx-logos img { display:block; height:var(--h, 28px); width:auto; max-width:100%; object-fit:contain; filter:grayscale(1) brightness(var(--b, 1)); }
/* archivos con fondo opaco casi blanco: un leve contraste lleva ese fondo al blanco de la página sin tocar el logo */
.hx-logos li[data-bg="opaco"] img { filter:grayscale(1) contrast(1.12) brightness(1.05); }

/* ── 2 · Servicios de consultoría: las especialidades son los módulos ──
   Cada servicio tiene su composición con la geometría del hero (alto de la cápsula = diámetro del punto = u):
   · Reputación → convergencia: la voz se agrupa alrededor de sus dos especialidades;
   · Visibilidad → expansión: las especialidades se abren hacia los bordes;
   · IA → sistema: capacidades alineadas como un índice.
   El texto de las cápsulas existe también como lista accesible (.v-sr); la composición es aria-hidden. */
.hx-services { background:var(--v-white); padding-block:var(--hx-sec) clamp(64px, 7vw, 104px); }
.hx-services-head { margin-bottom:clamp(36px, 4vw, 56px); }
.hx-svc { list-style:none; margin:0; padding:0; }
.hx-svc-item { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px, 5vw, 80px); align-items:center; padding:clamp(40px, 4.4vw, 64px) 0; border-top:1px solid var(--v-line); }
.hx-svc-item:last-child { border-bottom:1px solid var(--v-line); }
.hx-svc-txt { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.hx-num { margin:0; font-size:14px; font-weight:600; color:var(--v-purple); }
/* enlace sin subrayado: con el cursor el título pasa al morado de acción y la flecha de «Ver información» avanza; nada se desplaza */
.hx-svc-item .hx-h3 a { color:var(--v-navy); text-decoration:none; transition:color .2s ease; border-radius:6px; }
.hx-svc-item .hx-h3 a:hover { color:var(--v-purple); }
.hx-svc-item:has(.hx-h3 a:hover) .hx-link svg { transform:translateX(3px); }
.hx-svc-item .hx-link { margin-top:4px; }

.hx-fld { --u:44px; --d:var(--u); --g:calc(var(--u) * .3); display:flex; flex-direction:column; gap:var(--g); min-width:0; }
.hx-fld .r { display:flex; align-items:center; gap:var(--g); }
.hx-fld i { background:var(--v-mist-2); }
.hx-fld i.l { background:hsl(252 74% 82% / .55); }
/* rótulo informativo: navy (y una especialidad por servicio en morado), texto centrado, sin icono ni estados de cursor.
   Los botones se distinguen por el símbolo de módulos → flecha, el relleno asimétrico y la respuesta al pasar o pulsar. */
.hx-fld b { flex:none; display:inline-flex; align-items:center; height:var(--d); border-radius:calc(var(--d) / 2); padding:0 calc(var(--d) * .5); background:var(--v-navy); color:var(--v-white); font-size:15px; font-weight:500; line-height:1; white-space:nowrap; cursor:default; }
/* convergencia: filas centradas y apretadas, desplazadas medio módulo */
.hx-fld--conv { align-items:center; }
.hx-fld--conv .r { transform:translateX(calc(var(--u) * var(--x, 0))); }
/* expansión: cada fila se abre a todo el ancho con márgenes distintos */
.hx-fld--exp .r { justify-content:space-between; padding-left:calc(var(--u) * var(--pl, 0)); padding-right:calc(var(--u) * var(--pr, 0)); }
/* sistema: índice alineado a la izquierda */
.hx-fld--sys { --g:calc(var(--u) * .24); }
/* asignación cromática de la consultoría: navy como base y morado en la especialidad de acento */
.hx-fld--sys .r:nth-child(2n) b, .hx-fld--conv .r:nth-child(2) b, .hx-fld--exp .r:nth-child(3) b { background:var(--v-purple); }
/* estado previo a la formación (solo con JS y movimiento permitido: lo añade js/home-sistema.js) */
.hx-fld.is-pre i, .hx-fld.is-pre b { opacity:0; }

/* ── 3 · Formación para empresas: índice tipográfico + fotografía protagonista ── */
.hx-academy { background:var(--v-white); padding-block:clamp(72px, 8vw, 120px) var(--hx-sec); }
.hx-academy-head { align-items:end; margin-bottom:clamp(40px, 5vw, 64px); }
.hx-academy-body { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px, 5vw, 80px); align-items:start; }
.hx-programs-col { display:flex; flex-direction:column; align-items:flex-start; }
.hx-programs { list-style:none; margin:0; padding:0; align-self:stretch; }
.hx-academy-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hx-prog { position:relative; padding:28px 0 30px; border-top:1px solid var(--v-line); cursor:default; }
.hx-prog:last-child { border-bottom:1px solid var(--v-line); }
.hx-prog-img { display:none; }
.hx-prog-n { display:flex; align-items:center; gap:12px; margin:0 0 12px; font-size:14px; font-weight:600; color:var(--v-ink-2); transition:color .25s ease; }
/* marcador del índice: punto · punto → cápsula 2 · punto. La cápsula aparece recortando con extremos redondos
   (clip-path inset … round), el punto siguiente se desplaza un diámetro: el alto y los extremos no cambian nunca. */
.hx-prog-mod { --d:10px; --gap:4px; position:relative; display:block; flex:none; width:calc(var(--d) * 3 + var(--gap)); height:var(--d); }
.hx-prog-mod i { position:absolute; top:0; left:0; }
.hx-prog-mod .m-a { --len:2; background:var(--v-line); clip-path:inset(0 var(--d) 0 0 round calc(var(--d) / 2)); transition:clip-path .35s cubic-bezier(.23,1,.32,1), background-color .25s ease; }
.hx-prog-mod .m-b { left:calc(var(--d) + var(--gap)); background:var(--v-mist-2); transition:transform .35s cubic-bezier(.23,1,.32,1), background-color .25s ease; }
.hx-prog[aria-current="true"] .hx-prog-n { color:var(--v-purple); }
.hx-prog[aria-current="true"] .m-a { background:var(--v-purple); clip-path:inset(0 0 0 0 round calc(var(--d) / 2)); }
.hx-prog[aria-current="true"] .m-b { background:var(--v-lavender); transform:translateX(var(--d)); }
.hx-prog .hx-h4 { font-size:clamp(22px, 1.9vw, 27px); }
.hx-prog .hx-tags { margin-top:12px; font-size:14.5px; flex-direction:column; gap:4px; }   /* una viñeta por línea: todas con la misma jerarquía */
.hx-prog-photo { position:sticky; top:110px; aspect-ratio:4/3;   /* proporción natural de las fotos: sin cortar a nadie */ border-radius:22px; overflow:hidden; background:var(--v-mist); }
.hx-prog-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s cubic-bezier(.22,.61,.36,1); }
.hx-prog-photo img.is-on { opacity:1; }

/* ── 4 · Verne Space ── */
.hx-space { background:linear-gradient(180deg, #2E3150 0%, var(--v-navy) 38%); color:var(--v-white); padding-block:var(--hx-sec); }
.hx-space .hx-eyebrow, .hx-voices .hx-eyebrow, .hx-contact .hx-eyebrow { color:var(--v-lavender); }
.hx-space .hx-h2, .hx-voices .hx-h2 { color:var(--v-white); }
.hx-space .hx-deck { color:hsl(0 0% 100% / .78); }
.hx-space .hx-h4 { color:var(--v-white); }
.hx-space .hx-meta { color:hsl(0 0% 100% / .66); }
.hx-space-intro { padding-top:4px; }
.hx-gallery { margin-top:clamp(48px, 6vw, 80px); }
.hx-stage-photo { aspect-ratio:16/8 !important; border-radius:20px; background:var(--v-navy-95); }
.hx-stage-photo .hx-nav { opacity:1; background:hsl(232 24% 8% / .55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hx-stage-photo .hx-nav:hover { background:var(--v-purple); }
.hx-stage-photo .hx-nav:focus-visible { outline:2px solid var(--v-white); outline-offset:3px; }
.hx-photo-cap { position:absolute; left:24px; bottom:22px; z-index:2; display:flex; flex-direction:column; gap:2px; pointer-events:none; }
.hx-photo-cap span:first-child { font-size:13px; font-weight:500; color:var(--v-lavender); }
.hx-photo-cap span:last-child { font-size:14px; color:hsl(0 0% 100% / .9); }
.hx-stage-photo::after { content:""; position:absolute; inset:auto 0 0 0; height:40%; z-index:1; pointer-events:none; background:linear-gradient(0deg, hsl(232 24% 8% / .72), transparent); }
.hx-open { align-items:flex-start; }
.hx-open span { display:inline-flex; align-items:center; font-size:13px; font-weight:500; color:var(--v-white); padding:9px 15px; border-radius:999px; background:hsl(232 24% 8% / .55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:opacity .25s ease; }
.hx-stage-photo:hover .hx-open span, .hx-open:focus-visible span { opacity:1; }
.hx-open:focus-visible { outline:2px solid var(--v-white); outline-offset:-6px; border-radius:20px; }
.hx-thumbs { margin-top:14px; gap:10px; }
.hx-thumb { width:112px; height:70px; border-radius:10px; opacity:.5; }
.hx-thumb[aria-current="true"] { transform:none; }
.hx-thumb[aria-current="true"]::after { border-radius:10px; box-shadow:inset 0 0 0 2px var(--v-lavender); }
.hx-thumb:focus-visible { outline:2px solid var(--v-white); outline-offset:2px; box-shadow:none; }
.hx-space-foot { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px; margin-top:44px; padding-top:32px; border-top:1px solid hsl(0 0% 100% / .12); }
.hx-last { display:flex; flex-direction:column; gap:8px; }

/* ── 5 · Verne Insights: pieza destacada + lista ── */
.hx-insights { position:relative; background:var(--v-white); padding-block:var(--hx-sec); }
.hx-insights-intro { display:flex; flex-direction:column; align-items:flex-start; gap:24px; padding-top:4px; }
.hx-news { margin-top:clamp(48px, 6vw, 72px); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-rows:auto auto; gap:24px clamp(32px, 4vw, 56px); }
.hx-piece { display:grid; gap:20px; text-decoration:none; color:inherit; border-radius:18px; }
.hx-piece:first-child { grid-row:1 / span 2; }
.hx-piece:not(:first-child) { grid-template-columns:150px minmax(0,1fr); gap:22px; align-items:start; padding-bottom:24px; border-bottom:1px solid var(--v-line); border-radius:0; }   /* línea recta: el radio del enlace curvaba el divisor */
.hx-piece:last-child { border-bottom:0; padding-bottom:0; }
.hx-piece-img { display:block; overflow:hidden; border-radius:16px; background:var(--v-mist-2); aspect-ratio:16/10; }
.hx-piece:not(:first-child) .hx-piece-img { aspect-ratio:4/3; border-radius:12px; }
.hx-piece-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--hx-ease); }
.hx-piece:hover .hx-piece-img img { transform:scale(1.03); }
.hx-piece-body { display:flex; flex-direction:column; gap:10px; }
.hx-piece-title { font-size:20px; font-weight:600; line-height:1.3; color:var(--v-navy); }
.hx-piece:first-child .hx-piece-title { font-size:clamp(24px, 2.2vw, 30px); line-height:1.2; }
.hx-piece-deck { font-size:15px; line-height:1.6; color:var(--v-ink-2); }
.hx-piece .hx-meta { color:var(--v-purple); }
.hx-piece:hover .hx-piece-title { color:var(--v-purple); }

/* ── 6 · Testimonios (carrusel manual existente, reencuadrado) ── */
.hx-voices { background:linear-gradient(180deg, #2E3150 0%, var(--v-navy) 38%); padding-block:var(--hx-sec); }
.hx-voices-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(36px, 4vw, 56px); }
.hx-tv { --tv-photo:188px; }
.hx-tv .tv-viewport { padding-top:calc(var(--tv-photo) / 2 + 8px); }   /* el aro de 6 px de la foto ya no se recorta arriba */
.hx-tv-controls { margin:0; }
/* dentro de la sala las voces no van en tarjetas: foto, identidad y cita sobre el mismo fondo */
.tv-card.hx-voice { background:none; border:0; border-radius:0; padding:calc(var(--tv-photo) / 2 + 26px) 12px 8px; }
.hx-voice .tv-id { padding-bottom:22px; border-bottom:1px solid hsl(0 0% 100% / .1); margin-bottom:22px; }
.hx-voice .tv-name { font-size:18px; font-weight:600; }
.hx-voice .tv-role { color:hsl(0 0% 100% / .72); }
.hx-voice .tv-quote { font-size:15.5px; line-height:1.7; color:hsl(0 0% 100% / .86); }
.hx-voice .tv-quote::before { content:"“"; display:block; height:28px; margin-bottom:4px; font-size:44px; line-height:1; font-weight:500; color:var(--v-lavender); }
.hx-tv .tv-btn:focus-visible { outline:2px solid var(--v-white); outline-offset:3px; }
.tv-scene.hx-tv:focus-visible { outline:2px solid var(--v-lavender); outline-offset:10px; border-radius:16px; }   /* el carrusel recibe foco (flechas del teclado): home.css le quitaba el anillo */

/* ── 7 · Contacto: cierre con campo disperso de módulos ── */
.hx-contact { background:radial-gradient(ellipse 60% 50% at 30% 40%, rgba(109,74,190,.30) 0%, rgba(109,74,190,0) 70%), linear-gradient(180deg, var(--v-navy) 0%, var(--v-navy-95) 100%); padding-block:var(--hx-sec); color:var(--v-white); }
.hx-field { position:absolute; inset:0; pointer-events:none; }
.hx-field { --d:13px; }
.hx-field i { position:absolute; background:var(--v-white); opacity:.22; }
.hx-field i.l { background:var(--v-lavender); opacity:.34; }
.hx-contact-in { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px, 6vw, 96px); align-items:start; }
.hx-contact-copy { position:sticky; top:120px; display:flex; flex-direction:column; gap:26px; }
.hx-contact-copy .hx-eyebrow { margin:0; }
.hx-contact .hx-deck { color:hsl(0 0% 100% / .78); }
.hx-form { display:flex; flex-direction:column; gap:18px; padding:clamp(28px, 3vw, 40px); border-radius:22px; background:hsl(232 24% 100% / .04); border:1px solid hsl(0 0% 100% / .1); }
.hx-form-note { margin:0; font-size:13px; color:hsl(0 0% 100% / .7); }
.hx-form-demo { margin:0; padding:14px 16px; border-radius:12px; background:hsl(252 74% 82% / .1); box-shadow:inset 0 0 0 1px hsl(252 74% 82% / .35); font-size:14px; line-height:1.55; color:hsl(0 0% 100% / .86); }
.hx-form-demo b { font-weight:600; color:var(--v-lavender); }
.hx-fs { border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:18px; }
.hx-fs:disabled { opacity:.5; }
.hx-fs:disabled input, .hx-fs:disabled select, .hx-fs:disabled textarea, .hx-fs:disabled label { cursor:not-allowed; }
.hx-form .hx-btn:disabled { opacity:.55; cursor:not-allowed; pointer-events:none; }
/* error de campo: borde y mensaje en el rojo de los avisos del Home (aclarado para leerse sobre navy) */
.hx-err { font-size:13px; font-weight:500; line-height:1.45; color:hsl(0 72% 76%); }
.hx-err:empty { display:none; }
.hx-form [aria-invalid="true"]:not([type=checkbox]) { border-color:hsl(0 72% 64%); }
.hx-check input[aria-invalid="true"] { outline:2px solid hsl(0 72% 64%); outline-offset:2px; }
.hx-check-wrap { display:flex; flex-direction:column; gap:6px; }
.hx-check-wrap .hx-err { padding-left:32px; }
.hx-form[data-state="invalid"] .hx-form-status { color:var(--v-white); padding-left:14px; border-left:2px solid hsl(0 72% 64%); }
.hx-hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.hx-row2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.hx-field-l { display:flex; flex-direction:column; gap:8px; font-size:13.5px; font-weight:500; color:hsl(0 0% 100% / .88); }
.hx-field-l b, .hx-check b { color:var(--v-lavender); font-weight:500; }
.hx-form input:not([type=checkbox]), .hx-form select, .hx-form textarea { width:100%; min-height:48px; padding:12px 14px; border-radius:12px; border:1px solid hsl(0 0% 100% / .2); background:hsl(232 24% 8% / .45); color:var(--v-white); font:inherit; font-size:15px; font-weight:400; letter-spacing:0; transition:border-color .2s ease, box-shadow .2s ease; }
.hx-form textarea { resize:vertical; min-height:110px; }
.hx-form select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C0B0F4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.hx-form select option { color:var(--v-navy); }
.hx-form input:focus-visible, .hx-form select:focus-visible, .hx-form textarea:focus-visible { outline:none; border-color:var(--v-lavender); box-shadow:0 0 0 3px hsl(252 74% 82% / .35); }
.hx-check { display:flex; align-items:flex-start; gap:12px; font-size:13.5px; line-height:1.55; color:hsl(0 0% 100% / .78); }
.hx-check input { width:20px; height:20px; margin:1px 0 0; accent-color:var(--v-purple); flex:0 0 auto; }
.hx-check input:focus-visible { outline:2px solid var(--v-lavender); outline-offset:2px; }
.hx-check a { color:var(--v-lavender); }
.hx-form-send { display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:6px; }
.hx-form-status { flex:1 1 240px; margin:0; font-size:14px; line-height:1.55; color:hsl(0 0% 100% / .8); }
.hx-form[data-state="error"] .hx-form-status { color:var(--v-white); padding-left:14px; border-left:2px solid var(--v-lavender); }
.hx-form .hx-btn[aria-disabled="true"] { pointer-events:none; }

/* ── 8 · Pie: sala final ──
   Tres niveles: marca (logo y descripción) con las redes a la derecha; navegación en cuatro columnas; línea legal.
   Las redes solo aparecen cuando js/verne-config.js tiene sus URL oficiales. */
.hx-foot { background:var(--v-navy-95); color:hsl(0 0% 100% / .74); padding-block:clamp(56px, 6vw, 80px) 28px; border-radius:var(--room-r); }
.hx-foot-top { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px; padding-bottom:clamp(32px, 4vw, 48px); border-bottom:1px solid hsl(0 0% 100% / .1); }
.hx-foot-brand { display:flex; flex-direction:column; gap:16px; max-width:34ch; }
.hx-foot-logo { display:inline-block; width:max-content; border-radius:6px; }
.hx-foot-logo img { width:120px; height:auto; display:block; }
.hx-foot-brand p { margin:0; font-size:15px; line-height:1.6; color:hsl(0 0% 100% / .74); }
.hx-foot .hx-social { list-style:none; margin:0; padding:0; display:flex; flex-direction:row; gap:10px; }
.hx-foot .hx-social a { padding:0; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:999px; color:var(--v-white); box-shadow:inset 0 0 0 1px hsl(0 0% 100% / .22); transition:box-shadow .2s ease, color .2s ease; }
.hx-social a:hover { box-shadow:inset 0 0 0 1px var(--v-lavender); color:var(--v-lavender); }
.hx-social a:focus-visible, .hx-foot-logo:focus-visible { outline:2px solid var(--v-lavender); outline-offset:3px; }
.hx-foot-nav { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; padding-block:clamp(32px, 4vw, 48px); }
.hx-foot-h { margin:0 0 14px; font-size:13px; font-weight:600; color:var(--v-lavender); }
.hx-foot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.hx-foot li > a, .hx-foot li > span { display:inline-block; padding:6px 0; font-size:14.5px; line-height:1.4; color:hsl(0 0% 100% / .8); text-decoration:none; }
.hx-foot li > a:hover { color:var(--v-white); }
.hx-foot li > a:focus-visible, .hx-foot-legal a:focus-visible { outline:2px solid var(--v-lavender); outline-offset:3px; border-radius:4px; }
.hx-foot-legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-top:22px; border-top:1px solid hsl(0 0% 100% / .1); font-size:13px; color:hsl(0 0% 100% / .62); }
.hx-foot-legal p { margin:0; }
.hx-foot-legal a { font-size:13px; color:hsl(0 0% 100% / .74); text-decoration:none; }
.hx-foot-legal a:hover { color:var(--v-white); }

/* ── cierre continuo + pie (propuesta en revisión) ──
   Principio: el último tramo es un solo plano oscuro a sangre (mensaje → formulario → pie), como el hero en el
   otro extremo; sin cápsula ni radios que lo aíslen. El pie funciona como índice y firma: logo grande, cuatro
   columnas y línea legal. Las redes solo aparecen con su URL oficial en js/verne-config.js. */
.vx-close { background:radial-gradient(ellipse 55% 70% at 12% 0%, rgba(109,74,190,.30) 0%, rgba(109,74,190,0) 70%), var(--v-navy); color:var(--v-white); padding-block:var(--hx-sec) clamp(64px, 7vw, 96px); }
.vx-close-t { margin:0 0 clamp(40px, 5vw, 64px); max-width:38ch; font-size:clamp(28px, 3vw, 42px); font-weight:700; line-height:1.12; letter-spacing:0; color:var(--v-white); text-wrap:balance; }
.vx-close-t span { color:var(--v-lavender); }
.vx-close .hx-deck { color:hsl(0 0% 100% / .8); margin:-24px 0 clamp(40px, 5vw, 56px); }
.vx-form .hx-fs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px 20px; }
.vx-form .hx-row2 { display:contents; }
.vx-form .hx-form-note, .vx-form .hx-check-wrap { grid-column:1 / -1; }
.vx-form .hx-field-l:has(textarea) { grid-column:span 2; }
.vx-form textarea { min-height:48px; height:100%; }
.vx-foot { background:linear-gradient(180deg, var(--v-navy) 0%, var(--v-navy-95) 160px); color:hsl(0 0% 100% / .74); padding-bottom:28px; }
.vx-foot > .hx-wrap { padding-top:clamp(48px, 5vw, 72px); }
.vx-foot > .hx-wrap::before { content:""; position:absolute; top:0; left:var(--hx-pad); right:var(--hx-pad); height:1px; background:hsl(0 0% 100% / .14); }
.vx-foot-main { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:clamp(32px, 5vw, 80px); padding-bottom:clamp(40px, 5vw, 64px); }
.vx-foot-sign { display:flex; flex-direction:column; gap:18px; }
.vx-foot-logo { display:inline-block; width:max-content; border-radius:6px; }
.vx-foot-logo img { width:152px; height:auto; display:block; }
.vx-foot-sign p { margin:0; max-width:30ch; font-size:15px; line-height:1.6; }
.vx-foot-nav { display:grid; grid-template-columns:1.25fr 1.25fr 1fr 1fr; gap:28px; }
.vx-foot-h { margin:0 0 14px; font-size:13px; font-weight:600; line-height:1.4; color:var(--v-lavender); }
.vx-foot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.vx-foot li > a, .vx-foot li > span { display:inline-block; padding:6px 0; font-size:14.5px; line-height:1.4; color:hsl(0 0% 100% / .82); text-decoration:none; }
.vx-foot li > a:hover { color:var(--v-white); }
.vx-foot a:focus-visible { outline:2px solid var(--v-lavender); outline-offset:3px; border-radius:4px; }
.vx-foot .vx-social { flex-direction:row; flex-wrap:wrap; gap:8px; margin-top:16px; }
.vx-foot .vx-social a, .vx-foot .vx-social span { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border-radius:50%; color:var(--v-white); box-shadow:inset 0 0 0 1px hsl(0 0% 100% / .24); }
.vx-social a:hover { color:var(--v-lavender); box-shadow:inset 0 0 0 1px var(--v-lavender); }
.vx-foot-legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-top:22px; border-top:1px solid hsl(0 0% 100% / .1); font-size:13px; color:hsl(0 0% 100% / .62); }
.vx-foot-legal p { margin:0; }
.vx-foot-legal a { font-size:13px; color:hsl(0 0% 100% / .74); text-decoration:none; }
.vx-foot-legal a:hover { color:var(--v-white); }
.vx-review-note { margin:18px 0 0; max-width:24ch; font-size:12px; font-weight:600; line-height:1.4; color:var(--v-lavender); }   /* solo en la maqueta de revisión */

/* ── adaptación ── */
@media (max-width:1023px){
  .vx-foot-main { grid-template-columns:minmax(0,1fr); }
  .vx-form .hx-fs { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .vx-form .hx-field-l:has(textarea) { grid-column:1 / -1; }
  .hx-split, .hx-services-in, .hx-contact-in { grid-template-columns:minmax(0,1fr); }
  .hx-sticky, .hx-contact-copy { position:static; }
  .hx-svc-item { grid-template-columns:minmax(0,1fr); gap:28px; }
  .hx-fld { --u:38px; }
  .hx-academy-body { grid-template-columns:minmax(0,1fr); }
  .hx-prog-photo { display:none; }
  .hx-prog { padding:0 0 36px; border-top:0; }
  .hx-prog:last-child { border-bottom:0; padding-bottom:0; }
  .hx-prog + .hx-prog { padding-top:8px; }
  .hx-prog-img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:18px; margin-bottom:22px; background:var(--v-mist); }
  .hx-prog-n { color:var(--v-purple); }
  .hx-prog .m-a { background:var(--v-purple); clip-path:inset(0 0 0 0 round calc(var(--d) / 2)); }
  .hx-prog .m-b { background:var(--v-lavender); transform:translateX(var(--d)); }
  .hx-logos { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .hx-news { grid-template-columns:minmax(0,1fr); }
  .hx-piece:first-child { grid-row:auto; }
  .hx-foot-nav { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hx-space-head, .hx-insights-head { gap:28px; }
  /* sin margen lateral libre: los módulos laterales se retiran y las bandas superior e inferior
     se fijan en el padding de la sección, lejos del texto y del formulario */
  .hx-field i:nth-child(-n+4), .hx-field i:nth-child(n+9):nth-child(-n+11) { display:none; }
  .hx-field i:nth-child(n+5):nth-child(-n+8) { top:34px !important; }
  .hx-field i:nth-child(n+12) { top:auto !important; bottom:34px; }
}
@media (max-width:700px){
  .vx-foot-nav { grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 20px; }
  .vx-form .hx-fs { grid-template-columns:minmax(0,1fr); }
  :root { --hx-pad:22px; --hx-sec:88px; }
  .hx-logos { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .hx-logos li { height:76px; padding:0 10px; }
  .hx-logos img { height:calc(var(--h, 26px) * .72); }
  .hx-fld { --u:32px; }
  .hx-fld b { font-size:13.5px; }
  .hx-fld .h { display:none; }
  .hx-fld--conv .r { transform:translateX(calc(var(--u) * var(--x, 0) * .5)); }
  .hx-fld--exp .r { padding-left:calc(var(--u) * var(--pl, 0) * .4); padding-right:calc(var(--u) * var(--pr, 0) * .4); }
  .hx-prog-img { aspect-ratio:16/10; object-position:50% 22%; border-radius:14px; margin-bottom:18px; }   /* recorte inferior: las cabezas quedan completas */
  .hx-prog { padding-bottom:30px; }
  .hx-stage-photo { aspect-ratio:4/3 !important; }
  .hx-thumb { width:84px; height:56px; }
  .hx-piece:not(:first-child) { grid-template-columns:104px minmax(0,1fr); gap:16px; }
  .hx-voices-head { align-items:flex-start; flex-direction:column; }
  .hx-row2 { grid-template-columns:minmax(0,1fr); }
  .hx-foot-nav { grid-template-columns:minmax(0,1fr); gap:28px; }
  .hx-foot-top { align-items:flex-start; }
  }
@media (prefers-reduced-motion: reduce){
  .hx-form[data-state="sending"] .vcta .vi-dot, .hx-form[data-state="sending"] .vcta .vi-cap { animation:none; }
  .hx-btn:active { transform:none; }
  .hx-link svg, .hx-prog-mod i, .hx-prog-photo img, .vcta-i *, .hx-piece-img img, .hx-btn, .hx-svc-item .hx-h3 a { transition:none !important; }
}