/* ===========================================================
   ATELMA — Estilos de componentes y secciones
   Propuesta B · "Editorial moderno"
   Prefijo de clases: .vb-  (visual-b)
   Prefijo de header/footer Atelma: .atelma-hd / .atelma-ft

a,
a:hover,
a:focus {
  text-decoration: none !important;
}
   =========================================================== */

/* ------------------------------------------------------------------ */
/*  HEADER                                                              */
/* ------------------------------------------------------------------ */

.atelma-hd {
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 16px 0;
  transition: transform .25s ease;
}

/* Al bajar por la página se oculta hacia arriba (navigation.js añade/quita
   esta clase según la dirección del scroll); al subir un poco —aunque
   estés muy abajo, sin tener que llegar arriba del todo— vuelve a
   aparecer. Con -130% (no -100%) se asegura que no se quede asomando ni
   la sombra de la píldora. */
.atelma-hd.is-hidden {
  transform: translateY(-130%);
}

/* Con el menú móvil abierto, la barra pasa de sticky a fixed: es un
   cinturón y tirantes junto al bloqueo de scroll del body en JS, para
   que en ningún caso (iOS incluido) se quede "flotando" a mitad de
   scroll mientras se navega por la lista larga de dentro del menú. */
body.nav-open .atelma-hd {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* El menú, si estaba oculto por scroll, siempre debe verse en cuanto se
   abre — si no, "Abrir menú" podría no hacer nada visible. */
body.nav-open .atelma-hd.is-hidden {
  transform: none;
}

.atelma-hd__bar {
  position: relative;
  width: min(1180px, calc(100% - 36px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 12px 10px 22px;
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

/* El cristal esmerilado va en una capa aparte (::before), no en la
   propia barra: un elemento con backdrop-filter se convierte en el
   "contenedor" de cualquier hijo position:fixed (spec CSS) — con el
   filtro aquí, el menú móvil (fixed, hijo de la barra) quedaría
   atrapado dentro de los límites de la barra en vez de cubrir toda
   la pantalla, en vez de necesitar quitarlo justo cuando se abre. */
.atelma-hd__bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.atelma-hd__logo {
  /* Debe quedar por encima del overlay del menú móvil (z-index: 800):
     al ser hermano de un elemento position:fixed con z-index, un
     elemento estático perdería el pulso aunque el header en su
     conjunto tenga z-index más alto (eso solo cuenta frente a OTROS
     bloques de la página, no entre hermanos dentro de la barra). */
  position: relative;
  z-index: 810;
}

.atelma-hd__logo img {
  height: 36px;
  width: auto;
}

.atelma-hd__nav {
  flex: 1;
}

.atelma-hd__nav ul:not(.sub-menu),
.atelma-hd__nav ul.atelma-hd__menu:not(.sub-menu) {
  display: flex !important;
  flex-direction: row !important;
  gap: 2px !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: static !important;
  border: none !important;
  box-shadow: none !important;
}

.atelma-hd__nav ul:not(.sub-menu) li,
.atelma-hd__nav ul.atelma-hd__menu:not(.sub-menu) li {
  display: list-item !important;
  float: none !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}
.atelma-hd__nav li.has-dropdown { position: relative !important; }

.atelma-hd__nav a,
.atelma-hd__nav ul li a,
.atelma-hd__nav ul.atelma-hd__menu li a {
  text-decoration: none !important;
  color: var(--ink) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: .94rem !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  display: block !important;
  transition: background .12s, color .12s !important;
  background: transparent !important;
  border: none !important;
  -webkit-tap-highlight-color: transparent;
  /* El .focus() por JS al abrir el menú no siempre cuenta como
     ":focus-visible" para el navegador (eso depende de un cálculo
     interno), así que había que quitar el contorno también en el
     ":focus" a secas — si no, a veces se quedaba puesto igual. */
  outline: none !important;
}

.atelma-hd__nav a:hover,
.atelma-hd__nav a:focus,
.atelma-hd__nav a:focus-visible,
.atelma-hd__nav ul li a:hover {
  background: var(--sky-100) !important;
  color: var(--navy) !important;
  /* El fondo de arriba ya sirve de indicador de foco visible — sin
     quitar el contorno por defecto del navegador, "La Asociación" (el
     primer enlace, al que se le da foco al abrir el menú) se veía con
     un recuadro alrededor además del fondo, con mal aspecto. */
  outline: none !important;
}

.atelma-hd__cta {
  padding: .7em 1.2em;
  flex-shrink: 0;
}

/* Copia del CTA dentro del menú móvil: oculta salvo cuando el menú
   está abierto (ver media query de abajo). En escritorio no se usa.
   Selector con dos clases + !important porque ".atelma-hd__nav a" ya
   tiene display:block !important y con menos especificidad no le gana
   (aunque también lleve !important) — el CTA se veía duplicado en
   escritorio. */
.atelma-hd__nav .atelma-hd__nav-cta {
  display: none !important;
}

/* Hamburger button */
.atelma-hd__burger {
  display: none;
  position: relative;
  z-index: 810; /* mismo motivo que .atelma-hd__logo: por encima del overlay */
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--navy);
  border-radius: 50%;
  /* Recorta al círculo cualquier aro/destello que un navegador pinte al
     tocar por su cuenta (ver .has-dropdown__toggle más abajo, mismo
     motivo) en vez de dejarlo asomar como una elipse. */
  overflow: hidden;
  transition: background .12s;
  flex-shrink: 0;
  /* Sin esto, al tocar en móvil el navegador pinta el botón con su
     color de "flash" al pulsar por defecto (amarillento en algunos).
     !important porque al recibir foco por JS (abrir/cerrar el menú)
     algunos navegadores le ponen su propio aro de foco por encima. */
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}
.atelma-hd__burger:focus,
.atelma-hd__burger:focus-visible {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.atelma-hd__burger:hover { background: var(--sky-100); }
.atelma-hd__burger svg { width: 24px; height: 24px; display: block; }


/* Mobile nav overlay */
.atelma-hd__nav.is-open {
  display: block !important;
  position: fixed;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 800;
  padding: 100px 28px 40px;
}

/* !important en todo lo que pisa una regla !important del menú
   compacto de escritorio (arriba) — si no, el override no aplica. */
.atelma-hd__nav.is-open ul {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 4px !important;
}

.atelma-hd__nav.is-open a {
  font-size: 1.4rem !important;
  padding: 12px 16px !important;
  width: 100%;
  border-radius: var(--r-md) !important;
}

.atelma-hd__nav.is-open .atelma-hd__nav-cta {
  display: flex !important;
  /* Sin esto ".atelma-hd__nav a{color:var(--ink);background:transparent!important}"
     deja el botón invisible: texto blanco sobre fondo transparente. */
  color: #fff !important;
  background: var(--navy) !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 20px;
  text-align: center;
}

.atelma-hd__cta-icon {
  display: none;
}

@media (max-width: 1020px) {
  /* Padding simétrico: con el logo centrado hace falta el mismo aire
     a ambos lados (en escritorio es asimétrico a propósito, más aire
     junto al logo que junto al CTA). */
  .atelma-hd__bar { padding: 10px 12px; }

  .atelma-hd__nav { display: none; }
  .atelma-hd__burger { display: grid; place-items: center; }

  /* El CTA de la barra no cabe junto al logo y la hamburguesa en
     móvil/tablet — sin esto, la barra se desborda y empuja el botón
     de abrir menú fuera de la pantalla (el menú "no funciona"). Se
     oculta aquí y reaparece como .atelma-hd__nav-cta dentro del menú. */
  .atelma-hd__cta { display: none; }

  /* Solo en móvil: hamburguesa a la izquierda, logo centrado, icono
     de "Hazte socio" a la derecha — mismo esquema que muchas cabeceras
     de comercio (ej. El Corte Inglés) para su barra móvil. En escritorio
     el orden natural (logo, nav, CTA) no se toca. */
  .atelma-hd__burger { order: 1; }
  .atelma-hd__logo   { order: 2; flex: 1; display: flex; justify-content: center; }
  .atelma-hd__nav    { order: 3; }

  .atelma-hd__cta-icon,
  .atelma-hd__cta-icon:visited {
    order: 4;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 810; /* por encima del overlay del menú, igual que logo/burger */
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--navy);
    background: var(--sky-100);
    transition: background .12s;
    -webkit-tap-highlight-color: transparent;
  }
  .atelma-hd__cta-icon:hover { background: var(--sky-200); color: var(--navy); }
  .atelma-hd__cta-icon svg { width: 20px; height: 20px; display: block; }
}

/* ── Dropdown servicios (hover) ── */
.atelma-hd__nav .sub-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  position: absolute;
  top: 100%;          /* sin gap — el padding crea el espacio visual */
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 260px;
  background: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 16px 48px rgba(15,46,69,.16), 0 2px 8px rgba(15,46,69,.06);
  border: 1px solid var(--line);
  border-top: none;
  padding: 12px 8px 8px;  /* padding-top crea el espacio sin romper el hover */
  margin: 0;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}


.atelma-hd__nav .has-dropdown.is-active .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Items */
.atelma-hd__nav .sub-menu li { position: static; display: list-item; }
.atelma-hd__nav .sub-menu li a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  text-decoration: none;
  color: var(--ink) !important;
  font-size: .87rem !important;
  font-weight: 600;
  background: transparent;
  transition: background .14s;
}
.atelma-hd__nav .sub-menu li a:hover { background: var(--sky-100) !important; }

.sub-menu__icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
}
.sub-menu__icon svg { width: 17px; height: 17px; }

.sub-menu__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sub-menu__text strong {
  font-family: var(--font-head);
  font-size: .87rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}
.sub-menu__text span {
  font-size: .74rem;
  color: var(--muted);
}

/* Móvil: plegado por defecto, se despliega al tocar el botón-flecha
   (.has-dropdown__toggle) en vez de aparecer siempre abierto. */
.has-dropdown__row {
  display: flex;
  align-items: center;
}
.atelma-hd__nav.is-open .has-dropdown__row a { flex: 1; }

.has-dropdown__toggle {
  display: none;
  place-items: center;
  /* Astra le mete su padding por defecto a cualquier <button> que no
     diga lo contrario (15px/28px) — comprobado con getComputedStyle en
     el propio botón: sin esto medía 56×44, no 44×44, y por eso se veía
     como una elipse en vez de un círculo (el mismo fallo de "botones
     circulares que Astra estira" que ya ha salido varias veces en este
     tema — la solución es siempre padding:0 explícito). !important
     porque la regla de Astra gana por orden si no se lo dejamos claro. */
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--navy);
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
  transition: background .12s, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.has-dropdown__toggle:hover { background: var(--sky-100); }
.has-dropdown__toggle svg { width: 20px; height: 20px; display: block; }
.has-dropdown.is-active .has-dropdown__toggle { transform: rotate(180deg); }

.atelma-hd__nav.is-open .sub-menu {
  position: static !important;
  transform: none !important;
  pointer-events: auto !important;
  box-shadow: none;
  border: none;
  background: var(--sky-100);
  border-radius: 12px;
  width: 100%;
  /* Plegado por defecto en móvil: altura 0 y oculto hasta is-active. */
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-height: 0;
  overflow: hidden;
  padding: 0 4px;
  margin-top: 0;
  transition: max-height .25s ease, padding .25s ease, margin-top .25s ease;
}
.atelma-hd__nav.is-open .has-dropdown.is-active .sub-menu {
  max-height: 600px;
  padding: 4px;
  margin-top: 4px;
}
.atelma-hd__nav.is-open .sub-menu::before { display: none; }
.atelma-hd__nav.is-open .sub-menu li a { padding: 10px 12px !important; gap: 14px; }
.atelma-hd__nav.is-open .sub-menu__text strong { font-size: 1rem; }
.atelma-hd__nav.is-open .sub-menu__text span { font-size: .8rem; }

@media (max-width: 1020px) {
  .has-dropdown__toggle { display: grid; }
}

/* ------------------------------------------------------------------ */
/*  FOOTER                                                              */
/* ------------------------------------------------------------------ */

.atelma-ft {
  background: var(--sky-100);
  color: var(--ink);
  padding: 64px 0 28px;
  position: relative;
  overflow: hidden;
}

/* Blobs decorativos del footer */
.atelma-ft__blob--1 {
  width: 380px; height: 380px;
  right: -100px; top: -140px;
  border-radius: 60% 40% 52% 48% / 48% 56% 44% 52%;
  background: #4d84b2;
}
.atelma-ft__blob--2 {
  width: 220px; height: 220px;
  left: -70px; bottom: -80px;
  border-radius: 44% 56% 60% 40% / 54% 46% 50% 50%;
  background: #1c3f6b;
}
.atelma-ft__blob--3 {
  width: 130px; height: 130px;
  left: 38%; top: 30px;
  border-radius: 55% 45% 42% 58% / 50% 60% 40% 50%;
  background: #3572a0;
}
.atelma-ft__blob--4 {
  width: 90px; height: 90px;
  right: 22%; bottom: 40px;
  border-radius: 40% 60% 55% 45% / 58% 42% 56% 44%;
  background: #20608f;
}

.atelma-ft a {
  color: var(--navy);
  text-decoration: none;
}

.atelma-ft a:hover { color: var(--sky); text-decoration: underline; }

/* Footer en 3 columnas: direcciones — marca (logo + redes, centrado) — enlaces */
.atelma-ft__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  position: relative;
}

/* Logo: al lado contrario de las direcciones, con un poco de aire
   respecto al borde izquierdo del footer. */
.atelma-ft__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-self: start;
  margin-left: clamp(0px, 4vw, 48px);
}

/* Columna central: iconos de redes + enlace, centrados */
.atelma-ft__col {
  text-align: center;
}

.atelma-ft__logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.atelma-ft__logo-row img {
  height: 54px;
  width: auto;
  flex-shrink: 0;
}

/* Columna de direcciones: una encima de la otra */
.atelma-ft__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  justify-self: end;
}

.atelma-ft__brand p {
  font-size: .92rem;
  line-height: 1.55;
  margin: 0;
  color: var(--muted);
  max-width: 30ch;
}

.atelma-ft__addr {
  font-size: .82rem !important;
  color: var(--muted) !important;
  margin: 0 !important;
}

.atelma-ft__addr svg {
  width: 19px;
  height: 19px;
  vertical-align: -4px;
}

.atelma-ft__social {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.atelma-ft__soc,
.atelma-ft__soc:visited {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--navy);
  display: grid;
  place-items: center;
  text-decoration: none !important;
  transition: background .12s, border-color .12s;
}

.atelma-ft__soc svg { width: 18px; height: 18px; }

.atelma-ft__soc:hover { background: var(--sky-100); border-color: var(--sky-200); color: var(--navy); }

/* Sin el contorno de foco al pulsar; con teclado se marca con el mismo
   fondo que el hover para no perder la indicación de foco. */
.atelma-ft__soc:focus,
.atelma-ft__soc:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.atelma-ft__soc:focus-visible { background: var(--sky-100); border-color: var(--sky-200); color: var(--navy); }

.atelma-ft__col ul,
.atelma-ft__col ul.atelma-ft__menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px 14px !important;
  background: transparent !important;
}

.atelma-ft__col ul li,
.atelma-ft__col ul.atelma-ft__menu li {
  display: list-item !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  position: static !important;
  border: none !important;
  background: transparent !important;
}

.atelma-ft__col a,
.atelma-ft__col ul li a,
.atelma-ft__col ul.atelma-ft__menu li a {
  font-size: .98rem !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  display: inline !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  transition: color .12s !important;
}

.atelma-ft__col a:hover,
.atelma-ft__col ul li a:hover {
  color: var(--navy) !important;
  text-decoration: underline !important;
}

.atelma-sponsors {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.atelma-sponsors__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: nowrap;
  padding-top: 32px;
  padding-bottom: 32px;
}

.atelma-sponsors__label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  white-space: nowrap;
}

.atelma-sponsors__item img {
  display: block;
  height: 72px;
  width: auto;
  opacity: .85;
}

.atelma-sponsors__item--sm img {
  height: 40px;
}

@media (max-width: 640px) {
  /* En una sola fila los 4 logos no caben bien en móvil — se reparten
     en dos filas de dos, cada uno centrado en su mitad. */
  .atelma-sponsors__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    row-gap: 28px;
    column-gap: 32px;
  }
  .atelma-sponsors__item img,
  .atelma-sponsors__item--sm img {
    height: 56px;
  }
}

.atelma-ft__legal {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--muted);
  position: relative;
}

@media (max-width: 900px) {
  .atelma-ft__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .atelma-ft__info,
  .atelma-ft__brand,
  .atelma-ft__col {
    justify-self: stretch;
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------ */
/*  PÁGINA DE INICIO: estilos generales                                */
/* ------------------------------------------------------------------ */

.vb { background: var(--paper); --radius: 26px; }
.vb h1, .vb h2, .vb h3 { letter-spacing: -.02em; }

/* Blob decorativo */
.vb-blob {
  position: absolute;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background: var(--sky);
  opacity: .5;
  filter: blur(2px);
  pointer-events: none;
}

.atelma-ft__blob--1 { opacity: .09; }
.atelma-ft__blob--2 { opacity: .10; }
.atelma-ft__blob--3 { opacity: .08; }
.atelma-ft__blob--4 { opacity: .08; }

/* Cabecera de sección centrada */
.vb-head {
  text-align: center;
  margin-bottom: 38px;
}
.vb-head h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 800;
  color: var(--navy);
}
.vb-head p {
  color: var(--muted);
  margin-top: 8px;
  font-size: 1.1rem;
}

/* ------------------------------------------------------------------ */
/*  HERO                                                                */
/* ------------------------------------------------------------------ */

.vb-hero {
  position: relative;
  overflow: hidden;
  padding: 70px 0 80px;
  background: radial-gradient(120% 120% at 80% -10%, var(--sky-200), var(--sky-50) 55%, var(--paper));
}

.vb-blob--1 { width: 340px; height: 340px; right: -80px; top: -90px; }
.vb-blob--2 { width: 180px; height: 180px; left: 42%; bottom: -60px; opacity: .35; }

.vb-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}

.vb-hero__copy {
  min-width: 0;
}

.vb-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .85rem;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

/* El texto del tag es lo que puede necesitar partirse en varias líneas
   en pantallas estrechas — sin esto, un hijo flex de texto largo no
   encoge (min-width:auto) y puede forzar el desbordamiento de toda la
   columna que lo contiene. */
.vb-tag__text {
  min-width: 0;
}

.vb-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sky);
  flex-shrink: 0;
}

.vb-hero h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 800;
  margin-top: 0;
  color: var(--navy);
}

.vb-hero h1 + .vb-tag { margin-top: 20px; }

.vb-hero__lead {
  font-size: 1.2rem;
  color: var(--muted);
  margin-top: 22px;
  max-width: 42ch;
}

.vb-hero__btns {
  display: flex;
  gap: 13px;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* Burbuja / bocadillo */
.vb-bubble { position: relative; }
.vb-bubble .ph { box-shadow: var(--shadow-lg); }


.vb-bubble__chip {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: #fff;
  border-radius: 14px;
  padding: 10px 15px;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-md);
}
.vb-bubble__chip svg { width: 20px; height: 20px; }

@media (max-width: 880px) {
  .vb-hero__grid { grid-template-columns: 1fr; }
  .vb-bubble { order: -1; }
}

/* ------------------------------------------------------------------ */
/*  BURBUJAS — ACCESO RÁPIDO                                           */
/* ------------------------------------------------------------------ */

.vb-qa { padding: 78px 0; }

.vb-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  align-items: center;
}

.vb-bubble-item,
.vb-bubble-item:visited {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 9px;
  padding: 18px;
  border: none;
  color: #fff;
  text-decoration: none;
  width: 158px;
  height: 158px;
  box-shadow: 0 6px 20px rgba(15, 46, 69, .18);
  transition: transform .22s ease, box-shadow .22s ease, filter .15s;
  border-radius: 60% 40% 55% 45% / 50% 58% 42% 50%;
  background: #4d84b2;
}

/* Tono y forma únicos por burbuja */
.vb-bubble-item:nth-child(2) {
  border-radius: 42% 58% 48% 52% / 56% 44% 60% 40%;
  width: 164px; height: 164px;
  background: #3572a0;
}
.vb-bubble-item:nth-child(3) {
  border-radius: 55% 45% 62% 38% / 40% 60% 46% 54%;
  width: 152px; height: 152px;
  background: #20608f;
}
.vb-bubble-item:nth-child(4) {
  border-radius: 38% 62% 44% 56% / 62% 38% 54% 46%;
  width: 166px; height: 166px;
  background: #3f7aaa;
}
.vb-bubble-item:nth-child(5) {
  border-radius: 52% 48% 36% 64% / 44% 58% 50% 50%;
  width: 156px; height: 156px;
  background: #265080;
}
.vb-bubble-item:nth-child(6) {
  border-radius: 44% 56% 60% 40% / 54% 46% 44% 56%;
  width: 162px; height: 162px;
  background: #1c3f6b;
}

.vb-bubble-item:hover {
  transform: translateY(-7px) scale(1.05);
  box-shadow: 0 14px 32px rgba(15, 46, 69, .14);
  filter: brightness(.94);
  color: #fff;
}

.vb-bubble-item__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.vb-bubble-item__icon svg { width: 24px; height: 24px; }

.vb-bubble-item__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .84rem;
  color: #fff;
  line-height: 1.2;
  max-width: 108px;
}

/* Descripción accesible pero invisible dentro del círculo */
.vb-bubble-item__desc {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .vb-bubble-item,
  .vb-bubble-item:nth-child(2),
  .vb-bubble-item:nth-child(3),
  .vb-bubble-item:nth-child(4),
  .vb-bubble-item:nth-child(5),
  .vb-bubble-item:nth-child(6) {
    width: 130px;
    height: 130px;
  }
  .vb-bubbles { gap: 14px; }
  /* "Gabinete Multidisciplinar" es el título más largo: 1px menos para que quepa bien en el círculo */
  .vb-bubble-item:first-child .vb-bubble-item__title { font-size: calc(.84rem - 1px); }
}

@media (max-width: 400px) {
  .vb-bubble-item,
  .vb-bubble-item:nth-child(2),
  .vb-bubble-item:nth-child(3),
  .vb-bubble-item:nth-child(4),
  .vb-bubble-item:nth-child(5),
  .vb-bubble-item:nth-child(6) {
    width: 112px;
    height: 112px;
  }
  .vb-bubble-item__title { font-size: .78rem; max-width: 88px; }
  .vb-bubble-item:first-child .vb-bubble-item__title { font-size: calc(.78rem - 1px); }
  .vb-bubble-item__icon { width: 42px; height: 42px; }
  .vb-bubble-item__icon svg { width: 20px; height: 20px; }
}

/* ------------------------------------------------------------------ */
/*  TEL — GRAN BOCADILLO                                               */
/* ------------------------------------------------------------------ */

.vb-tel { padding: 40px 0 78px; }

.vb-quote {
  position: relative;
  background: var(--sky-100);
  border: 1px solid var(--sky-200);
  border-radius: 34px;
  padding: 54px 56px;
  max-width: 920px;
  margin-inline: auto;
}

.vb-quote__tail {
  position: absolute;
  left: 64px;
  bottom: -22px;
  width: 48px;
  height: 48px;
  background: var(--sky-100);
  border-right: 1px solid var(--sky-200);
  border-bottom: 1px solid var(--sky-200);
  transform: rotate(45deg);
  border-bottom-right-radius: 12px;
}

.vb-quote__big {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.25;
  margin-top: 14px;
}
.vb-quote__big em { font-style: normal; color: #3f87b3; }

.vb-quote__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.vb-quote__foot span { color: var(--muted); font-style: italic; }

@media (max-width: 680px) {
  .vb-quote { padding: 36px 28px; }
}

/* ------------------------------------------------------------------ */
/*  PÁGINA CONTACTO                                                    */
/* ------------------------------------------------------------------ */

.vb-page-contact__hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding: 80px 0 64px;
  text-align: center;
}
/* El contenedor de texto debe quedar por encima de las burbujas decorativas (absolute) */
.vb-page-contact__hero .atelma-container { position: relative; z-index: 1; }
.vb-page-contact__hero .eyebrow { color: var(--sky); margin-bottom: 12px; }
.vb-page-contact__hero h1 { color: #fff; margin-bottom: 16px; }
.vb-page-contact__hero-sub {
  color: rgba(255,255,255,.75);
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 auto;
}

.vb-page-contact__body { padding: 64px 0 80px; }

.vb-page-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  align-items: start;
}

.vb-page-contact__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vb-contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}

.vb-contact-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--sky-100);
  color: var(--navy);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.vb-contact-card__icon svg { width: 26px; height: 26px; }
.vb-contact-card__icon--green { background: #e6f9f0; color: #25d366; }

.vb-contact-card__body h2 {
  font-size: 1.25rem;
  margin-bottom: 8px;
  color: var(--navy);
}
.vb-contact-card__body p {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
  margin-bottom: 20px;
}

.vb-page-contact__map-wrap { display: flex; flex-direction: column; gap: 24px; }

/* Misma sección de sedes, reutilizada en la home — aquí no comparte fila
   con las tarjetas de correo/WhatsApp, así que hay sitio de sobra para
   poner las dos sedes lado a lado en vez de apiladas. */
.vb-home-locations { padding: 64px 0 80px; }
.vb-home-locations .vb-page-contact__map-wrap {
  max-width: 1040px;
  margin: 0 auto;
  flex-direction: row;
  align-items: flex-start;
}
.vb-home-locations .vb-page-contact__map-wrap > .vb-contact-card--map { flex: 1 1 0; min-width: 0; }

@media (max-width: 760px) {
  .vb-home-locations .vb-page-contact__map-wrap { flex-direction: column; }
  /* En columna el eje principal pasa a ser vertical: sin este reset, el
     "flex: 1 1 0" de las tarjetas (pensado para repartirse el ancho en
     fila) se interpreta como alto y las tarjetas salen colapsadas. */
  .vb-home-locations .vb-page-contact__map-wrap > .vb-contact-card--map { flex: none; }
}

.vb-contact-card--map { padding-bottom: 0; overflow: hidden; }

.vb-contact-card__location {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
}

.vb-contact-card__fachada {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

.vb-contact-card__address {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vb-contact-card__address .vb-contact-card__body { padding: 0; }
.vb-contact-card__address .vb-contact-card__body p { margin-bottom: 0; }

.vb-contact-card__map {
  height: 300px;
  margin: 0 -32px;
  border-top: 1px solid var(--line);
}
.vb-contact-card__map iframe { display: block; }

.btn--whatsapp { background: #25d366; color: #fff; box-shadow: var(--shadow-md); }
.btn--whatsapp:hover { background: #1ebe5a; color: #fff; }

@media (max-width: 860px) {
  .vb-page-contact__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/*  PÁGINA ASOCIACIÓN — HERO                                           */
/* ------------------------------------------------------------------ */

.vb-page-asoc__hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding: 80px 0 64px;
  text-align: center;
}
/* El contenedor de texto debe quedar por encima de las burbujas decorativas (absolute) */
.vb-page-asoc__hero .atelma-container { position: relative; z-index: 1; }
.vb-page-asoc__hero .eyebrow { color: var(--sky); margin-bottom: 12px; }
.vb-page-asoc__hero h1 { color: #fff; margin-bottom: 16px; }
.vb-page-asoc__hero-sub {
  color: rgba(255,255,255,.75);
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 auto;
}
.vb-page-asoc__blob--1 {
  top: -80px; right: -60px;
  width: 340px; height: 340px;
  opacity: .12;
}
.vb-page-asoc__blob--2 {
  bottom: -60px; left: -40px;
  width: 260px; height: 260px;
  opacity: .08;
}

/* ------------------------------------------------------------------ */
/*  FAQ — Asociación                                                    */
/* ------------------------------------------------------------------ */

.vb-faq {
  padding: 64px 0;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}

.vb-faq__list {
  max-width: 820px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Variante a dos columnas: FAQ a la izquierda, barra lateral a la derecha */
.vb-faq__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}
.vb-faq__grid .vb-faq__list { max-width: none; margin-top: 0; }

@media (max-width: 900px) {
  .vb-faq__grid { grid-template-columns: 1fr; }
}

.vb-faq__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.vb-faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
}
.vb-faq__item > summary::-webkit-details-marker { display: none; }
.vb-faq__item > summary:hover { background: var(--sky-100); }

.vb-faq__arrow {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform .2s;
}
.vb-faq__arrow svg { width: 18px; height: 18px; }
.vb-faq__item[open] .vb-faq__arrow { transform: rotate(180deg); }

.vb-faq__body {
  padding: 0 24px 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.vb-faq__body p {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;
  margin: 0 0 14px;
}
.vb-faq__body p:last-child { margin-bottom: 0; }
.vb-faq__body a {
  color: var(--sky-700, #1479aa);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/*  CERTIFICACIONES                                                     */
/* ------------------------------------------------------------------ */

.vb-certs {
  padding: 64px 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.vb-certs__inner {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  border-radius: var(--radius);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 48px;
  padding: 32px 32px 32px 56px;
  min-height: 340px;
}

.vb-certs__blob--1 {
  top: -80px; right: -60px;
  width: 320px; height: 320px;
  opacity: .14;
  background: #4d84b2;
  border-radius: 60% 40% 52% 48% / 48% 56% 44% 52%;
}
.vb-certs__blob--2 {
  bottom: -60px; left: -40px;
  width: 240px; height: 240px;
  opacity: .10;
  background: #1c3f6b;
  border-radius: 44% 56% 60% 40% / 54% 46% 50% 50%;
}
.vb-certs__blob--3 {
  top: 20px; left: 38%;
  width: 140px; height: 140px;
  opacity: .10;
  background: #3572a0;
  border-radius: 55% 45% 42% 58% / 50% 60% 40% 50%;
}

.vb-certs__left {
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.vb-certs__logos {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 40px;
}

.vb-certs__iso-wrap { padding: 48px 0; }

.vb-certs__iso-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 150px;
}

.vb-certs__logo {
  height: 120px;
  width: auto;
  object-fit: contain;
}

.vb-certs__logo--sq {
  height: 276px;
  width: auto;
  min-width: 220px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  display: block;
}

.vb-certs__label {
  color: rgba(255,255,255,.7);
  font-size: .7rem;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.vb-certs__downloads {
  position: relative;
  width: 400px;
  height: 320px;
  flex-shrink: 0;
  z-index: 1;
  align-self: center;
}

.vb-certs__bubble,
.vb-certs__bubble:visited {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  width: 148px;
  height: 148px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  line-height: 1.3;
  padding: 18px;
  box-shadow: 0 6px 24px rgba(15,46,69,.35);
  transition: transform .22s ease, box-shadow .22s ease, filter .15s;
}
/* Cuadrícula 2×2 — dos arriba, dos abajo, en rectángulo (más ancho que
   alto): columna derecha más separada de la izquierda que de arriba a
   abajo (148px de burbuja + 104px de hueco horizontal = 400px de ancho,
   + 24px de hueco vertical = 320px de alto). */
.vb-certs__bubble:nth-child(1) {
  border-radius: 60% 40% 55% 45% / 50% 58% 42% 50%;
  background: #4d84b2;
  top: 0; left: 0;
}
.vb-certs__bubble:nth-child(2) {
  border-radius: 42% 58% 48% 52% / 56% 44% 60% 40%;
  background: #3572a0;
  top: 0; left: 252px;
}
.vb-certs__bubble:nth-child(3) {
  border-radius: 55% 45% 62% 38% / 40% 60% 46% 54%;
  background: #2e6399;
  top: 172px; left: 0;
}
.vb-certs__bubble:nth-child(4) {
  border-radius: 48% 52% 40% 60% / 58% 42% 56% 44%;
  background: #1c3f6b;
  top: 172px; left: 252px;
}
.vb-certs__bubble svg { width: 20px; height: 20px; flex-shrink: 0; }
.vb-certs__bubble:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 14px 32px rgba(15,46,69,.4);
  filter: brightness(1.1);
  color: #fff;
}

@media (max-width: 900px) {
  .vb-certs__inner { flex-direction: column; padding: 32px 24px; gap: 32px; }
  .vb-certs__left { flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
  /* En fila (como en escritorio) el logo cuadrado se salía de la pantalla:
     en columna, cada logo ocupa el ancho completo disponible. */
  .vb-certs__logos { flex-direction: column; align-items: center; width: 100%; gap: 24px; }
  .vb-certs__iso-wrap { padding: 0; max-width: 100%; }
  .vb-certs__logo--sq { height: 220px; width: 100%; border-radius: var(--radius) var(--radius) 0 0; }

  /* Las burbujas de descarga estaban colocadas con posiciones absolutas
     pensadas para el ancho de escritorio: en móvil la tercera se salía
     del contenedor. En su lugar, burbujas de verdad en fila que envuelven. */
  .vb-certs__downloads {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: auto;
    gap: 14px;
    margin: 0 0 8px;
  }
  .vb-certs__bubble,
  .vb-certs__bubble:nth-child(1),
  .vb-certs__bubble:nth-child(2),
  .vb-certs__bubble:nth-child(3),
  .vb-certs__bubble:nth-child(4) {
    position: static;
    width: 116px;
    height: 116px;
    padding: 12px;
    font-size: .72rem;
  }
}

/* ------------------------------------------------------------------ */
/*  LA ASOCIACIÓN                                                       */
/* ------------------------------------------------------------------ */

.vb-asoc { padding: 40px 0 78px; }

.vb-asoc__intro-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  margin-bottom: 48px;
}

.vb-asoc__photo {
  width: 380px;
  height: auto;
  border-radius: var(--radius);
  flex-shrink: 0;
  box-shadow: var(--shadow-lg);
}

.vb-asoc__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vb-asoc__intro p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}
.vb-asoc__intro p:first-child {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 1.2rem;
}

@media (max-width: 720px) {
  .vb-asoc__intro-wrap {
    grid-template-columns: 1fr;
  }
  .vb-asoc__photo {
    width: 100%;
    height: 240px;
    order: -1;
  }
}

.vb-asoc__join {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: var(--sky-100);
  border: 1px solid var(--sky-200);
  border-radius: var(--radius);
  padding: 48px;
}

.vb-asoc__join-photo { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vb-asoc__join-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.vb-asoc__join-photo img { width: 100%; height: 340px; object-fit: cover; object-position: center 30%; border-radius: var(--radius); }
.vb-asoc__join-cta { margin-top: 12px; }

.vb-asoc__fee {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
}
.vb-asoc__fee strong { color: var(--navy); }

.vb-asoc__benefits h3 { font-size: 1.25rem; margin-bottom: 18px; }

.vb-asoc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vb-asoc__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .96rem;
  color: var(--ink);
}
.vb-asoc__check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--navy);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.vb-asoc__check svg { width: 14px; height: 14px; }

@media (max-width: 820px) {
  .vb-asoc__join {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }
}

/* ------------------------------------------------------------------ */
/*  SPLIT — MANUAL + ESTADÍSTICAS                                      */
/* ------------------------------------------------------------------ */

.vb-split { padding: 56px 0 78px; }

.vb-split__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 20px;
}

.vb-manual {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  gap: 26px;
  align-items: center;
}
.vb-manual .ph {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .25);
  flex-shrink: 0;
}
/* El bloque de texto (h3 + form) necesita poder encogerse y ocupar el
   ancho disponible para que el input de email no desborde en flexbox. */
.vb-manual > div:last-child { min-width: 0; flex: 1 1 auto; }
.vb-manual h3 { color: #fff; font-size: 1.4rem; margin: 6px 0 4px; }

/* Mini-formulario de email del manual (home y "¿Qué es el TEL?") */
.vb-manual__desc { color: rgba(255, 255, 255, .78); font-size: .92rem; margin: 0 0 16px; }

.vb-manual-form__honeypot {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.vb-manual-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.vb-manual-form__row input[type="text"],
.vb-manual-form__row input[type="email"] {
  flex: 1 1 150px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: .95rem;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
}
.vb-manual-form__row input[type="text"]:focus,
.vb-manual-form__row input[type="email"]:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px var(--sky-100);
}
.vb-manual-form__row .btn { flex: 0 0 auto; white-space: nowrap; }

.vb-manual .vb-form-notice { margin: 0; max-width: none; text-align: left; }

@media (max-width: 480px) {
  .vb-manual-form__row { flex-direction: column; align-items: stretch; }
  /* En columna el eje principal pasa a ser vertical: sin este reset, el
     "150px" de flex-basis de los inputs (pensado como ancho mínimo en fila)
     se aplicaría como alto y los campos saldrían enormes. */
  .vb-manual-form__row input[type="text"],
  .vb-manual-form__row input[type="email"] { flex: 0 0 auto; width: 100%; }
  .vb-manual-form__row .btn { justify-content: center; }
}

.vb-stats {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 14px;
}

.vb-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 22px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.vb-stat strong {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
  font-size: 1.7rem;
  flex-shrink: 0;
}
.vb-stat span { color: var(--muted); font-size: .95rem; }

.vb-cursos-promo {
  background: linear-gradient(150deg, #1479aa 0%, #0d3f61 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.vb-cursos-promo__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .16);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.vb-cursos-promo__icon svg { width: 24px; height: 24px; }
.vb-cursos-promo h3 { color: #fff; font-size: 1.25rem; margin: 6px 0 10px; }
.vb-cursos-promo__desc {
  color: rgba(255, 255, 255, .8);
  font-size: .93rem;
  line-height: 1.55;
  margin: 0 0 20px;
}
.vb-cursos-promo .btn { margin-top: auto; }

@media (max-width: 820px) {
  .vb-split__grid { grid-template-columns: 1fr; }
  .vb-manual { flex-direction: column; text-align: center; align-items: center; }
  .vb-cursos-promo { align-items: center; text-align: center; }
}

/* ------------------------------------------------------------------ */
/*  SERVICIOS                                                           */
/* ------------------------------------------------------------------ */

.vb-svc {
  padding: 78px 0;
  background: var(--paper-2);
  border-block: 1px solid var(--line);
}

.vb-svc__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.vb-svc__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform .14s ease, box-shadow .14s ease;
}
.vb-svc__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.vb-svc__icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--sky-100);
  color: var(--navy);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.vb-svc__icon svg { width: 28px; height: 28px; }

.vb-svc__card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.vb-svc__card p { color: var(--muted); font-size: .94rem; }

@media (max-width: 920px) { .vb-svc__row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .vb-svc__row { grid-template-columns: 1fr; } }

/* Colores propios para las 4 burbujas de servicios */
.vb-svc .vb-bubble-item:nth-child(1) { background: #4d84b2; }
.vb-svc .vb-bubble-item:nth-child(2) { background: #265080; }
.vb-svc .vb-bubble-item:nth-child(3) { background: #3f7aaa; }
.vb-svc .vb-bubble-item:nth-child(4) { background: #1c3f6b; }

/* ------------------------------------------------------------------ */
/*  SERVICIOS — hero                                                    */
/* ------------------------------------------------------------------ */

.vb-svc-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  text-align: center;
  background: radial-gradient(120% 120% at 80% -10%, var(--sky-200), var(--sky-50) 55%, var(--paper));
  border-bottom: 1px solid var(--sky-200);
}
/* El contenedor de texto debe quedar por encima de las burbujas decorativas (absolute) */
.vb-svc-hero .atelma-container { position: relative; z-index: 1; }
.vb-svc-hero .eyebrow { display: block; margin-bottom: 10px; }
.vb-svc-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 900; }

.vb-svc-hero__lead {
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.vb-svc-hero__chips {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

.vb-svc-hero__chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------------ */
/*  SERVICIOS LANDING — bento oscuro                                    */
/* ------------------------------------------------------------------ */

.vb-svc-landing { padding: 64px 0 80px; }

.vb-svc-landing__bento {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(310px, auto);
  gap: 14px;
}

/* Alternado ancho ↔ estrecho por fila */
.vb-svc-card:nth-child(1) { grid-column: 1 / 4; }
.vb-svc-card:nth-child(2) { grid-column: 4 / 6; }
.vb-svc-card:nth-child(3) { grid-column: 1 / 3; }
.vb-svc-card:nth-child(4) { grid-column: 3 / 6; }

a.vb-svc-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }

.vb-svc-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 34px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.vb-svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 52px rgba(12, 38, 64, .32);
}

.vb-svc-card:nth-child(1) { background: linear-gradient(140deg, #18466a 0%, #0f2e45 100%); }
.vb-svc-card:nth-child(2) { background: linear-gradient(140deg, #265080 0%, #3f7aaa 100%); }
.vb-svc-card:nth-child(3) { background: linear-gradient(140deg, #3f7aaa 0%, #4d84b2 100%); }
.vb-svc-card:nth-child(4) { background: linear-gradient(140deg, #1c3f6b 0%, #143b59 100%); }

/* Número gigante decorativo */
.vb-svc-card__num {
  position: absolute;
  top: 12px;
  right: 20px;
  font-family: var(--font-head);
  font-size: 7rem;
  font-weight: 900;
  color: rgba(255, 255, 255, .06);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Blob de luz en la esquina */
.vb-svc-card__blob {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  filter: blur(4px);
  bottom: -80px;
  right: -60px;
  pointer-events: none;
}

/* Icono */
.vb-svc-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.vb-svc-card__icon svg { width: 28px; height: 28px; color: #fff; }

/* Título */
.vb-svc-card h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

/* Descripción */
.vb-svc-card > p {
  color: rgba(255, 255, 255, .72);
  font-size: .94rem;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* Tags */
.vb-svc-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.vb-svc-card__tag {
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: .77rem;
  font-weight: 600;
  letter-spacing: .03em;
}

/* CTA */
.vb-svc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
  font-size: .88rem;
  transition: color .15s, gap .15s;
}
.vb-svc-card__cta svg { width: 14px; height: 14px; }
.vb-svc-card:hover .vb-svc-card__cta { color: #fff; gap: 10px; }

/* Responsive */
@media (max-width: 860px) {
  .vb-svc-landing__bento {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .vb-svc-card:nth-child(1),
  .vb-svc-card:nth-child(2),
  .vb-svc-card:nth-child(3),
  .vb-svc-card:nth-child(4) {
    grid-column: auto;
    min-height: 260px;
  }
}

@media (max-width: 520px) {
  .vb-svc-landing__bento { grid-template-columns: 1fr; }
  .vb-svc-card { min-height: 240px; }
  .vb-svc-hero__chips { display: none; }
}

/* ------------------------------------------------------------------ */
/*  HAZTE SOCIO                                                         */
/* ------------------------------------------------------------------ */

.vb-socio { padding: 78px 0; }

.vb-socio__card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--navy), var(--navy-700));
  color: #fff;
  border-radius: 40px;
  padding: 64px 56px;
  text-align: center;
}

.vb-blob--3 {
  background: var(--sky);
  opacity: .3;
  width: 300px;
  height: 300px;
  right: -60px;
  top: -80px;
}

.vb-socio__card h2 {
  color: #fff;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 800;
  position: relative;
}
.vb-socio__card p {
  color: #cfe3f0;
  margin: 16px auto 28px;
  max-width: 46ch;
  font-size: 1.12rem;
  position: relative;
}
.vb-socio__btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

@media (max-width: 600px) {
  .vb-socio__card { padding: 48px 28px; }
}

/* ------------------------------------------------------------------ */
/*  SELLOS / CONFIANZA                                                  */
/* ------------------------------------------------------------------ */

.vb-sellos { padding: 0 0 80px; }

.vb-sellos__in {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.vb-pill {
  display: flex;
  align-items: center;
  gap: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 22px 12px 14px;
}

.vb-pill > span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sky-100);
  color: var(--navy);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.vb-pill svg { width: 24px; height: 24px; }
.vb-pill strong {
  display: block;
  font-family: var(--font-head);
  color: var(--navy);
  font-size: .96rem;
}
.vb-pill div span { color: var(--muted); font-size: .82rem; display: block; }

/* ------------------------------------------------------------------ */
/*  PÁGINA INTERNA — CABECERA                                           */
/* ------------------------------------------------------------------ */

.vb-pagehero {
  padding: 64px 0 56px;
  text-align: center;
  background: radial-gradient(120% 120% at 80% -10%, var(--sky-200), var(--sky-50) 55%, var(--paper));
}
.vb-pagehero .eyebrow { display: block; margin-bottom: 10px; }
.vb-pagehero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 900;
}
.vb-pagehero__lead {
  max-width: 680px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
}
.vb-pagehero__seal {
  max-width: 480px;
  margin: 28px auto 0;
  text-align: left;
}

/* ------------------------------------------------------------------ */
/*  GABINETE MULTIDISCIPLINAR — SERVICIOS                               */
/* ------------------------------------------------------------------ */

.vb-gab { padding: 72px 0; background: #fff; }

.vb-gab__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 20px;
  margin-top: 0;
}

.vb-gab__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.vb-gab__card:hover .vb-gab__blob { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }

.vb-gab__blob {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 20px 24px;
  border-radius: 20px;
  transition: transform .2s, box-shadow .2s;
}

/* Color por servicio — tonos de azul */
.vb-gab__card:nth-child(1) .vb-gab__blob { background: #0f3460; }
.vb-gab__card:nth-child(2) .vb-gab__blob { background: #1a5296; }
.vb-gab__card:nth-child(3) .vb-gab__blob { background: #1e6eb8; }
.vb-gab__card:nth-child(4) .vb-gab__blob { background: #2882cc; }
.vb-gab__card:nth-child(5) .vb-gab__blob { background: #1444a0; }
.vb-gab__card:nth-child(6) .vb-gab__blob { background: #2c60c0; }
.vb-gab__card:nth-child(7) .vb-gab__blob { background: #3878d8; }
.vb-gab__card:nth-child(8) .vb-gab__blob { background: #1a3a80; }
.vb-gab__card:nth-child(9) .vb-gab__blob { background: #4090e0; }

.vb-gab__icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.25);
  color: #fff;
  flex-shrink: 0;
}
.vb-gab__icon svg { width: 24px; height: 24px; }

.vb-gab__blob h3 { font-size: .97rem; color: #fff; margin: 0; line-height: 1.3; }

.vb-gab__card > p {
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.55;
  margin: 0;
  padding: 0 4px;
}

.vb-gab__mode {
  align-self: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy);
  background: var(--sky-100);
  border-radius: 999px;
  padding: 3px 10px;
}

.vb-gab__download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.vb-gab__download p { color: var(--muted); font-size: .95rem; max-width: 52ch; }

@media (max-width: 980px) { .vb-gab__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .vb-gab__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ */
/*  GABINETE MULTIDISCIPLINAR — FORMACIÓN                               */
/* ------------------------------------------------------------------ */

.vb-gab-form { padding: 72px 0; }

.vb-gab-form__card {
  background: linear-gradient(140deg, #0d2b45 0%, var(--navy) 55%, #1a5a8e 100%);
  border-radius: var(--radius);
  padding: 52px;
  overflow: hidden;
  position: relative;
}

.vb-gab-form__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.vb-gab-form__left .eyebrow { color: var(--sky-200); display: block; margin-bottom: 10px; }
.vb-gab-form__left h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  color: #fff;
  margin-top: 0;
}
.vb-gab-form__desc { color: rgba(255,255,255,.7); margin-top: 14px; font-size: .97rem; line-height: 1.6; }

.vb-gab-form__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.vb-gab-form__badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  color: #fff;
}
.vb-gab-form__badges span svg { width: 14px; height: 14px; }

.vb-gab-form__modules-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.45);
  margin-bottom: 14px;
}

.vb-gab-form__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: module-counter;
}
.vb-gab-form__list li {
  counter-increment: module-counter;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  font-size: .88rem;
  line-height: 1.45;
}
.vb-gab-form__list li::before {
  content: counter(module-counter, decimal-leading-zero);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: .75rem;
  color: rgba(255,255,255,.3);
  flex-shrink: 0;
  min-width: 24px;
}

@media (max-width: 860px) {
  .vb-gab-form__inner { grid-template-columns: 1fr; gap: 32px; }
  .vb-gab-form__card { padding: 36px 28px; }
}

/* ------------------------------------------------------------------ */
/*  PÁGINAS DE CONTENIDO (DiverTEL, etc.)                              */
/* ------------------------------------------------------------------ */

.vb-page__hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  background: radial-gradient(120% 120% at 70% -10%, var(--sky-200), var(--sky-50) 55%, var(--paper));
  border-bottom: 1px solid var(--sky-200);
}
/* El contenedor de texto debe quedar por encima de las burbujas decorativas (absolute) */
.vb-page__hero .atelma-container { position: relative; z-index: 1; }

/* Variante con insignia (logo IRPF) a la derecha del hero — DiverTEL, INCLUYETEL */
.vb-page__hero--with-badge .atelma-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}
.vb-page__hero-content { flex: 1 1 auto; min-width: 0; }
/* Cuando hay más de un logo (p.ej. DiverTEL + Comunidad de Madrid),
   cada uno va en su propia tarjeta — este envoltorio es el que hace de
   elemento flex junto al texto y las reparte en fila; con un solo logo
   (INCLUYETEL) no hace falta, .vb-page__hero-badge ya vale por sí sola. */
.vb-page__hero-badges { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
.vb-page__hero-badge {
  flex: 0 0 auto;
  background: #fff;
  border-radius: var(--r-md);
  padding: 14px 18px;
  box-shadow: var(--shadow-md);
}
.vb-page__hero-badge img { display: block; width: 140px; height: auto; }

@media (max-width: 860px) {
  .vb-page__hero--with-badge .atelma-container { flex-direction: column; align-items: flex-start; }
  .vb-page__hero-badges,
  .vb-page__hero-badge { align-self: center; margin-top: 8px; }
}

.vb-page__hero-btns {
  display: flex;
  gap: 13px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.vb-page__stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.vb-page__stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 20px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}

.vb-page__stat strong {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
  font-size: 1.3rem;
}

.vb-counter {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 2ch;
}

.vb-page__stat span {
  color: var(--muted);
  font-size: .88rem;
}

.vb-page__etapas {
  padding: 72px 0;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.vb-page__intro {
  padding: 64px 0;
}

.vb-page__intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}

.vb-page__intro-text p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.72;
  margin-bottom: 16px;
}

.vb-page__intro-text p:first-child {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 1.18rem;
}

.vb-page__intro-aside {
  background: var(--sky-100);
  border: 1px solid var(--sky-200);
  border-radius: var(--radius);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* PATIOS: aside — facts con fondo tintado sutil */
.vb-page__intro-aside--tinted {
  background: transparent;
  border: none;
  padding: 0;
  gap: 10px;
}
.vb-page__intro-aside--tinted .vb-page__fact {
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(24, 68, 106, .10);
  border: 1px solid rgba(24, 68, 106, .16);
  gap: 14px;
  align-items: center;
}
.vb-page__intro-aside--tinted .vb-page__fact:nth-child(2) {
  background: rgba(20, 90, 142, .11);
  border-color: rgba(20, 90, 142, .18);
}
.vb-page__intro-aside--tinted .vb-page__fact:nth-child(3) {
  background: rgba(20, 121, 170, .11);
  border-color: rgba(20, 121, 170, .18);
}
.vb-page__intro-aside--tinted .vb-page__fact:nth-child(4) {
  background: rgba(13, 143, 186, .11);
  border-color: rgba(13, 143, 186, .18);
}
.vb-page__intro-aside--tinted .vb-page__fact-icon {
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.vb-page__intro-aside--tinted .vb-page__fact:nth-child(1) .vb-page__fact-icon { color: var(--navy); }
.vb-page__intro-aside--tinted .vb-page__fact:nth-child(2) .vb-page__fact-icon { color: #1a5a8e; }
.vb-page__intro-aside--tinted .vb-page__fact:nth-child(3) .vb-page__fact-icon { color: #1479aa; }
.vb-page__intro-aside--tinted .vb-page__fact:nth-child(4) .vb-page__fact-icon { color: #0d8fba; }

/* DiverTEL: aside — cifras + foto + tiras de color apiladas */
.vb-intro-stats {
  margin-top: 0;
  gap: 22px;
  margin-bottom: 18px;
}
.vb-intro-stats .vb-page__stat {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  border-left: 3px solid var(--sky);
  padding: 2px 0 2px 14px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.vb-intro-stats .vb-page__stat strong { font-size: 1.5rem; color: var(--sky); }
.vb-intro-stats .vb-page__stat span {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.25;
  max-width: 9ch;
}

.vb-intro-photo {
  width: 100%;
  height: 250px;
  overflow: hidden;
  border-radius: var(--r-md);
  flex-shrink: 0;
}
.vb-intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vb-page__intro-aside--dark {
  background: transparent;
  border: none;
  padding: 0;
  gap: 4px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.vb-page__intro-aside--dark .vb-page__fact {
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--navy);
}
.vb-page__intro-aside--dark .vb-page__fact:nth-child(2) { background: #1a5a8e; }
.vb-page__intro-aside--dark .vb-page__fact:nth-child(3) { background: #1479aa; }
.vb-page__intro-aside--dark .vb-page__fact:nth-child(4) { background: #0d8fba; }
.vb-page__intro-aside--dark .vb-page__fact-icon {
  background: rgba(255,255,255,.18);
  color: #fff;
  box-shadow: none;
  flex-shrink: 0;
}
.vb-page__intro-aside--dark .vb-page__fact strong {
  color: #fff;
  font-size: .94rem;
}
.vb-page__intro-aside--dark .vb-page__fact span {
  color: rgba(255,255,255,.72);
  font-size: .86rem;
}

.vb-page__fact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.vb-page__fact-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.vb-page__fact-icon svg { width: 22px; height: 22px; }

.vb-page__fact strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
  font-size: .96rem;
  margin-bottom: 2px;
}

.vb-page__fact span { color: var(--muted); font-size: .88rem; line-height: 1.45; }

@media (max-width: 820px) {
  .vb-page__intro-grid { grid-template-columns: 1fr; }
}

.vb-page__hero .vb-tag { margin-bottom: 14px; }

.vb-page__hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  margin-top: 14px;
}

.vb-page__lead {
  font-size: 1.12rem;
  color: var(--muted);
  margin-top: 16px;
  max-width: 58ch;
  line-height: 1.65;
}

.vb-page__body { padding: 56px 0 78px; }

.vb-page__content {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vb-page__content p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.vb-page__content p:first-child {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 1.18rem;
}

.vb-page__closing {
  font-style: italic;
}

.vb-page__cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 48px auto 0;
  max-width: 760px;
}

/* ------------------------------------------------------------------ */
/*  OTROS PROGRAMAS — cards de navegación entre proyectos              */
/* ------------------------------------------------------------------ */

.vb-otros { padding: 64px 0; background: var(--paper-2); }

.vb-otros__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}

.vb-otros__card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none !important;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
}
.vb-otros__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.vb-otros__card--alt { background: var(--navy); border-color: var(--navy); color: #fff !important; }
.vb-otros__card--alt .eyebrow { color: var(--sky-200) !important; }
.vb-otros__card--alt .vb-otros__content p { color: rgba(255,255,255,.8) !important; }
.vb-otros__card--alt h3 { color: #fff !important; }

.vb-otros__blob--1 {
  position: absolute; top: -40px; right: -40px; width: 160px; height: 160px;
  background: var(--sky-200); border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; opacity: .35;
}
.vb-otros__blob--2 {
  position: absolute; bottom: -30px; left: -30px; width: 140px; height: 140px;
  background: var(--sky); border-radius: 54% 46% 42% 58% / 48% 56% 44% 52%; opacity: .2;
}

.vb-otros__icon {
  width: 44px; height: 44px;
  background: var(--sky-50);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  margin-bottom: 4px;
  position: relative;
}
.vb-otros__card--alt .vb-otros__icon { background: rgba(255,255,255,.15); color: #fff; }
.vb-otros__icon svg { width: 22px; height: 22px; }

.vb-otros__content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.vb-otros__content h3 { font-size: 1.3rem; margin: 0; }
.vb-otros__content p { font-size: .95rem; line-height: 1.6; color: var(--muted); margin: 0; }

.vb-otros__cta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 700;
  font-size: .9rem; color: var(--navy);
  margin-top: 12px; position: relative;
}
.vb-otros__card--alt .vb-otros__cta { color: var(--sky-200); }
.vb-otros__cta svg { width: 16px; height: 16px; }

@media (max-width: 640px) { .vb-otros__grid { grid-template-columns: 1fr; } }

/* Tarjeta de servicio convertida en enlace */
.vb-svc__card[href] {
  display: block;
  text-decoration: none;
  color: inherit;
}


/* ------------------------------------------------------------------ */
/*  TIRA NAVEGACIÓN ENTRE SERVICIOS — pie de cada página de servicio    */
/* ------------------------------------------------------------------ */

.vb-svc-nav {
  padding: 64px 0;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}

.vb-svc-nav__label {
  font-size: .76rem;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 32px;
  text-align: center;
}

/* Color y forma exactos por servicio — independiente de posición en DOM */
.vb-bubble-item[data-svc="gabinete-multidisciplinar"] {
  background: #4d84b2;
  border-radius: 60% 40% 55% 45% / 50% 58% 42% 50%;
  width: 158px; height: 158px;
}
.vb-bubble-item[data-svc="divertel"] {
  background: #3572a0;
  border-radius: 42% 58% 48% 52% / 56% 44% 60% 40%;
  width: 164px; height: 164px;
}
.vb-bubble-item[data-svc="incluyetel"] {
  background: #20608f;
  border-radius: 55% 45% 62% 38% / 40% 60% 46% 54%;
  width: 152px; height: 152px;
}
.vb-bubble-item[data-svc="proyecto-patios"] {
  background: #3f7aaa;
  border-radius: 38% 62% 44% 56% / 62% 38% 54% 46%;
  width: 166px; height: 166px;
}

@media (max-width: 480px) {
  .vb-svc-nav { padding: 48px 0; }
}

/* ------------------------------------------------------------------ */
/*  GALERÍA DE FOTOS — sección reutilizable                             */
/* ------------------------------------------------------------------ */

.vb-gallery { padding: 64px 0; }

/* Foto única que va rotando (Gabinete: "Fotos en terapia") — todas las
   imágenes apiladas en el mismo hueco, alternando opacidad por JS. */
.vb-photo-rotator__wrap { max-width: 460px; margin: 36px auto 0; }

.vb-photo-rotator__frame {
  position: relative;
  /* 3/4: la proporción real de las fotos (retrato) — así no se recorta
     ni arriba ni abajo como pasaba con un marco panorámico fijo. */
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--paper-2);
}
.vb-photo-rotator__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.vb-photo-rotator__img.is-active { opacity: 1; }

/* Barra de controles debajo del marco: flecha, puntos, flecha */
.vb-photo-rotator__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
}
/* Con una sola foto no hay nada que pasar — sin esto, el atributo
   "hidden" no basta para ocultar la barra: display:flex de arriba y el
   display:none que pone el navegador por defecto para [hidden] tienen
   la misma especificidad, y gana la nuestra por venir de la hoja de
   estilos del sitio. */
.vb-photo-rotator__controls[hidden] { display: none; }

/* Flechas de ir a la foto anterior/siguiente, fuera de la foto */
.vb-photo-rotator__nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.vb-photo-rotator__nav:hover { background: var(--sky-100); border-color: var(--sky); }
.vb-photo-rotator__nav svg { width: 18px; height: 18px; }
.vb-photo-rotator__nav--prev svg { transform: scaleX(-1); }

/* Puntos, para saltar directamente a una foto */
.vb-photo-rotator__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
}
.vb-photo-rotator__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--line);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.vb-photo-rotator__dot:hover { background: var(--sky); }
.vb-photo-rotator__dot.is-active { background: var(--navy); transform: scale(1.2); }

.vb-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 10px;
  margin-top: 36px;
}

.vb-gallery__item {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  position: relative;
}

.vb-gallery__item--wide { grid-column: span 2; }
.vb-gallery__item--tall { grid-row: span 2; }

.vb-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.vb-gallery__item:hover img { transform: scale(1.05); }

.vb-gallery__ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
  padding: 12px;
}

.vb-gallery__ph svg { width: 28px; height: 28px; opacity: .4; }

@media (max-width: 820px) {
  .vb-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .vb-gallery__item--wide { grid-column: span 2; }
  .vb-gallery__item--tall { grid-row: span 1; }
}

@media (max-width: 480px) {
  .vb-gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .vb-gallery__item--wide,
  .vb-gallery__item--tall { grid-column: span 1; grid-row: span 1; }
}

/* ── Galería DiverTEL: fondo oscuro + layout editorial ── */
.vb-gallery--dark {
  background: linear-gradient(140deg, #0d2b45 0%, var(--navy) 100%);
  padding: 72px 0 80px;
}
.vb-gallery--dark .vb-head h2 { color: #fff; }
.vb-gallery--dark .vb-head p  { color: rgba(255,255,255,.62); }
.vb-gallery--dark .vb-head h2::after { background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.15)); }

.vb-gallery--dark .vb-gallery__grid {
  grid-template-columns: repeat(3, 1fr);
  /* Antes tenía un alto de fila fijo pensado para exactamente 6 fotos.
     Con el panel del equipo la galería puede crecer indefinidamente, así
     que las filas se generan solas y "dense" rellena los huecos que deja
     la foto grande destacada en vez de dejarlos vacíos. */
  grid-auto-rows: 210px;
  grid-auto-flow: dense;
  gap: 8px;
  margin-top: 40px;
}

.vb-gallery__item--featured {
  grid-column: span 2;
  grid-row: span 2;
}

.vb-gallery--dark .vb-gallery__item {
  border-radius: var(--r-md);
  background: rgba(255,255,255,.07);
}

.vb-gallery--dark .vb-gallery__ph {
  border: none;
  background: transparent;
  color: rgba(255,255,255,.35);
}
.vb-gallery--dark .vb-gallery__ph svg { opacity: 1; color: rgba(255,255,255,.25); }

@media (max-width: 820px) {
  .vb-gallery--dark .vb-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
  }
  .vb-gallery__item--featured { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 480px) {
  .vb-gallery--dark .vb-gallery__grid { grid-template-columns: 1fr; }
  .vb-gallery__item--featured { grid-column: span 1; }
}

/* ------------------------------------------------------------------ */
/*  WOOCOMMERCE — soporte básico                                        */
/* ------------------------------------------------------------------ */

.woocommerce-page .atelma-container,
.woocommerce .atelma-container {
  padding-top: 40px;
  padding-bottom: 80px;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: var(--font-head);
  font-weight: 800;
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  padding: .8em 1.5em;
  border: none;
  transition: background .15s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--navy-800);
  color: #fff;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--navy);
}

.woocommerce ul.products li.product .price {
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 800;
}

/* ------------------------------------------------------------------ */
/*  FORMACIÓN — Página interna                                          */
/* ------------------------------------------------------------------ */

/* ── Hero ── */
.vb-form-hero {
  padding: 64px 0 72px;
  background: radial-gradient(120% 120% at 70% -20%, var(--sky-200), var(--sky-50) 55%, var(--paper));
}

.vb-form-hero .eyebrow { display: block; margin-bottom: 16px; }

.vb-form-hero__tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.vb-form-hero h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--navy);
  max-width: 22ch;
  line-height: 1.1;
}

.vb-form-hero__sub {
  color: var(--muted);
  font-size: 1.12rem;
  margin-top: 18px;
  max-width: 54ch;
  line-height: 1.65;
}

.vb-form-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* ── Programas ── */
.vb-form-progs { padding: 72px 0; }

.vb-form-progs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.vb-form-prog {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vb-form-prog .eyebrow { display: block; }

.vb-form-prog__ects {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 3rem;
  color: var(--navy);
  line-height: 1;
}

.vb-form-prog__ects small {
  font-size: 1.2rem;
  letter-spacing: .04em;
}

.vb-form-prog h3 { font-size: 1.45rem; }

.vb-form-prog > p {
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.6;
  flex: 1;
}

.vb-form-prog__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--navy);
  flex-wrap: wrap;
}

.vb-form-prog__price span {
  font-size: .9rem;
  font-weight: 400;
  color: var(--muted);
}

/* Tarjeta combinada — ancho completo */
.vb-form-prog--combo {
  grid-column: 1 / -1;
  background: var(--navy);
  border-color: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 0;
  flex-direction: row;
}

.vb-form-blob {
  position: absolute;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background: var(--sky);
  opacity: .25;
  filter: blur(2px);
  pointer-events: none;
  width: 320px;
  height: 320px;
  right: -60px;
  top: -80px;
}

.vb-form-prog__combo-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 38px 44px;
  position: relative;
  width: 100%;
}

.vb-form-prog--combo .eyebrow      { color: var(--sky); }
.vb-form-prog--combo .vb-form-prog__ects { color: var(--sky); }
.vb-form-prog--combo h3            { color: #fff; }
.vb-form-prog__combo-left p        { color: #bcd6e8; font-size: .97rem; line-height: 1.6; margin-top: 8px; }

.vb-form-prog__combo-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  flex-shrink: 0;
}

.vb-form-prog--combo .vb-form-prog__price       { color: #fff; }
.vb-form-prog--combo .vb-form-prog__price span  { color: #a8c8de; }

/* ── Detalles ── */
.vb-form-details { padding: 0 0 72px; }

.vb-form-details__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.vb-form-detail {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vb-form-detail__icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--sky-100);
  color: var(--navy);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}

.vb-form-detail__icon svg { width: 24px; height: 24px; }

.vb-form-detail__label {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}

.vb-form-detail__value {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.18rem;
  color: var(--navy);
  line-height: 1.25;
}

/* ── Módulos ── */
.vb-form-modules {
  padding: 72px 0;
  background: var(--paper-2);
  border-block: 1px solid var(--line);
}

.vb-form-modules .vb-head .eyebrow { display: block; margin-bottom: 8px; }

.vb-form-modules__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.vb-form-module {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 22px;
}

.vb-form-module__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sky-100);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .88rem;
  display: grid;
  place-items: center;
}

.vb-form-module h4 {
  font-size: 1rem;
  margin-bottom: 4px;
  line-height: 1.3;
}

.vb-form-module p { color: var(--muted); font-size: .86rem; }

/* ── Requisitos ── */
.vb-form-req { padding: 72px 0; }

.vb-form-req__box {
  max-width: 840px;
  margin: 0 auto;
  background: var(--sky-100);
  border: 1px solid var(--sky-200);
  border-radius: var(--radius);
  padding: 52px 56px;
  position: relative;
  overflow: hidden;
}

/* Checks más claritos dentro de la card */
.vb-form-req .vb-asoc__check {
  background: #fff;
  color: var(--sky);
}

/* Burbujas decorativas al fondo */
.vb-req-bubble {
  position: absolute;
  border-radius: 50%;
  background: var(--sky);
  filter: blur(2px);
  pointer-events: none;
}
.vb-req-bubble--a { width: 120px; height: 120px; bottom: -42px; right: 48px; opacity: .22; }
.vb-req-bubble--b { width: 70px; height: 70px; bottom: -16px; right: 158px; opacity: .14; }
.vb-req-bubble--c { width: 44px; height: 44px; bottom: 26px; right: 224px; opacity: .10; }
.vb-req-bubble--d { width: 90px; height: 90px; top: -32px; left: -24px; opacity: .16; }
.vb-req-bubble--e { width: 50px; height: 50px; top: 32px; left: 62px; opacity: .10; }

.vb-form-req__box .eyebrow { display: block; margin-bottom: 10px; }
.vb-form-req__box h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 18px; }

.vb-form-req__intro {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 24px;
}

.vb-form-req__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vb-form-req__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .97rem;
  color: var(--ink);
}

.vb-form-req__note {
  margin-top: 22px;
  color: var(--muted);
  font-size: .92rem;
  font-style: italic;
  line-height: 1.6;
}

/* ── Hub page hero ── */
.vb-form-hub-hero {
  position: relative; overflow: hidden;
  background: var(--navy); color: #fff;
  padding: 80px 0 72px; text-align: center;
}
.vb-form-hub-hero__blob--1 { width: 360px; height: 360px; right: -80px; top: -120px; opacity: .12; background: #4d84b2; border-radius: 60% 40% 52% 48% / 48% 56% 44% 52%; }
.vb-form-hub-hero__blob--2 { width: 220px; height: 220px; left: -60px; bottom: -80px; opacity: .09; background: #3572a0; border-radius: 44% 56% 60% 40% / 54% 46% 50% 50%; }
.vb-form-hub-hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 16px; }
.vb-form-hub-hero__sub { color: rgba(255,255,255,.7); font-size: 1.1rem; max-width: 560px; margin: 0 auto; }

/* ── Pick cards ── */
.vb-form-pick { padding: 64px 0 80px; background: var(--paper); }
.vb-form-pick__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.vb-form-pick__card,
.vb-form-pick__card:visited {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 52px 48px;
  border-radius: var(--radius);
  text-decoration: none; color: #fff;
  box-shadow: var(--shadow-lg);
  transition: transform .25s, box-shadow .25s;
}
/* color explícito: sin esto, la regla global de Astra "a:hover{color:...}"
   (más específica que ".vb-form-pick__card" a secas, por llevar también
   el selector de elemento "a") gana y pone el texto/icono morado al
   pasar el ratón por encima — pasaba tanto visitado como sin visitar. */
.vb-form-pick__card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(15,46,69,.22); color: #fff; }
.vb-form-pick__card--expertos { background: #1a5276; }
.vb-form-pick__card--cursos   { background: #2878a8; }
.vb-form-pick__blob--1 { width: 340px; height: 340px; right: -80px; top: -100px; opacity: .10; background: #4d84b2; border-radius: 60% 40% 52% 48% / 48% 56% 44% 52%; }
.vb-form-pick__blob--2 { width: 180px; height: 180px; left: -50px; bottom: -60px; opacity: .08; background: #1c3f6b; border-radius: 44% 56% 60% 40%; }
.vb-form-pick__blob--3 { width: 300px; height: 300px; right: -60px; top: -80px; opacity: .12; background: #fff; border-radius: 55% 45% 48% 52% / 50% 58% 42% 50%; }
.vb-form-pick__blob--4 { width: 160px; height: 160px; left: -40px; bottom: -50px; opacity: .09; background: #fff; border-radius: 42% 58% 60% 40%; }
.vb-form-pick__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 20px;
  max-width: 420px;
}
.vb-form-pick__icon {
  width: 64px; height: 64px;
  background: rgba(255,255,255,.15);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.vb-form-pick__icon svg { width: 32px; height: 32px; }
.vb-form-pick__card h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0; color: #fff; }
.vb-form-pick__card p { color: rgba(255,255,255,.8); font-size: 1rem; line-height: 1.6; margin: 0; }
.vb-form-pick__pills {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.vb-form-pick__pills li {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.15); border-radius: 99px;
  padding: 4px 14px; color: #fff;
}
.vb-form-pick__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  color: #fff; margin-top: 8px;
}
.vb-form-pick__cta svg { width: 18px; height: 18px; transition: transform .2s; }
.vb-form-pick__card:hover .vb-form-pick__cta svg { transform: translateX(4px); }

/* Desplegables dentro de Expertos */
.vb-form-pick__detail {
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: 4px;
}
.vb-form-pick__detail summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: #fff;
}
.vb-form-pick__detail summary::-webkit-details-marker { display: none; }
.vb-form-pick__detail-arrow { display: flex; transition: transform .2s; }
.vb-form-pick__detail-arrow svg { width: 18px; height: 18px; transform: rotate(90deg); }
.vb-form-pick__detail[open] .vb-form-pick__detail-arrow svg { transform: rotate(-90deg); }
.vb-form-pick__detail-body {
  padding: 4px 0 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.vb-form-pick__detail-body p { color: rgba(255,255,255,.75); font-size: .9rem; margin: 0; }

@media (max-width: 700px) {
  .vb-form-pick__grid { grid-template-columns: 1fr; }
  .vb-form-pick__card { padding: 40px 32px; }
}

/* ── Acceso al campus (debajo de Expertos/Cursos) ── */
.vb-form-access { padding: 0 0 80px; background: var(--paper); }
.vb-form-access__card {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 32px 36px; box-shadow: 0 4px 16px rgba(15,46,69,.05);
}
.vb-form-access__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--sky-100); color: var(--navy);
}
.vb-form-access__icon svg { width: 28px; height: 28px; }
.vb-form-access__text { flex: 1; min-width: 220px; }
.vb-form-access__text .eyebrow { margin-bottom: 4px; }
.vb-form-access__text h2 { font-size: 1.4rem; margin: 0 0 6px; color: var(--navy); }
.vb-form-access__text p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .95rem; }
.vb-form-access__btn { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 700px) {
  .vb-form-access { padding-bottom: 56px; }
  .vb-form-access__card { padding: 28px 24px; flex-direction: column; text-align: center; }
  .vb-form-access__text { min-width: 0; }
  .vb-form-access__btn { width: 100%; justify-content: center; }
}

/* ── Expertos pick (3 tarjetas en horizontal) ── */
.vb-exp-pick { padding: 48px 0 80px; background: var(--paper); }
.vb-exp-pick__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.vb-exp-pick__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 36px 32px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform .25s, box-shadow .25s;
}
.vb-exp-pick__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.vb-exp-pick__item--eval { background: #0d3b5e; border-radius: 28px 10px 24px 14px; }
.vb-exp-pick__item--int  { background: #1a5276; border-radius: 12px 26px 10px 28px; }
.vb-exp-pick__item--full { background: #2878a8; border-radius: 24px 14px 28px 10px; }

.vb-exp-pick__num {
  font-family: var(--font-head); font-weight: 900;
  font-size: 4rem; line-height: 1;
  color: rgba(255,255,255,.18);
}
.vb-exp-pick__title {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem); color: #fff; line-height: 1.25;
}
.vb-exp-pick__pills {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.vb-exp-pick__pills li {
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: rgba(255,255,255,.15); color: rgba(255,255,255,.9);
  border-radius: 99px; padding: 5px 13px;
}
.vb-exp-pick__item > p {
  color: rgba(255,255,255,.75); margin: 0; font-size: .95rem; line-height: 1.7;
  flex: 1;
}
.vb-exp-pick__item > .btn { margin-top: 8px; }

/* ── Calendario de módulos — cuadrícula mensual ── */
.vb-cal {
  padding: 64px 0; background: var(--paper);
  position: relative; overflow: hidden;
}

/* El container queda por encima de los blobs */
.vb-cal > .atelma-container { position: relative; }

/* Blobs de fondo de la sección */
.vb-cal__blob {
  position: absolute; pointer-events: none; z-index: 0;
}
.vb-cal__blob--1 {
  width: 340px; height: 340px;
  top: -100px; right: -80px;
  background: #4d84b2; opacity: .15;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
}
.vb-cal__blob--2 {
  width: 260px; height: 260px;
  bottom: -80px; left: -60px;
  background: #1a5276; opacity: .14;
  border-radius: 54% 46% 44% 56% / 42% 58% 48% 52%;
}
.vb-cal__blob--3 {
  width: 180px; height: 180px;
  top: 30%; right: 5%;
  background: #2878a8; opacity: .12;
  border-radius: 38% 62% 50% 50% / 55% 45% 58% 42%;
}
.vb-cal__blob--4 {
  width: 140px; height: 140px;
  top: 10%; left: 8%;
  background: #3572a0; opacity: .13;
  border-radius: 60% 40% 44% 56% / 48% 56% 44% 52%;
}
.vb-cal__blob--5 {
  width: 110px; height: 110px;
  bottom: 15%; right: 12%;
  background: #4d84b2; opacity: .14;
  border-radius: 44% 56% 62% 38% / 54% 44% 56% 46%;
}
.vb-cal__blob--6 {
  width: 160px; height: 160px;
  bottom: 10%; left: 35%;
  background: #1c3f6b; opacity: .10;
  border-radius: 52% 48% 40% 60% / 46% 54% 48% 52%;
}

/* Sección de detalles */
.vb-cal__details { margin-top: 0; }

/* Pestañas */
.vb-cal__tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 24px;
}
.vb-cal__tab {
  padding: 8px 18px; border-radius: 99px;
  border: 1.5px solid transparent;
  font-family: var(--font-head); font-size: .78rem; font-weight: 700;
  cursor: pointer; background: #f2f4f6; color: var(--muted);
  transition: background .15s, color .15s, border-color .15s;
}
.vb-cal__tab:hover { background: #e8ecf0; color: var(--ink); }
.vb-cal__tab--eval.is-active   { background: #0d3b5e; color: #fff; border-color: #0d3b5e; }
.vb-cal__tab--int.is-active    { background: #1a5276; color: #fff; border-color: #1a5276; }

/* Paneles */
.vb-cal__tab-panel { display: none; }
.vb-cal__tab-panel.is-active { display: block; }

/* Cards de módulo */
.vb-cal__entry {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(13,59,94,.06);
  margin-bottom: 12px;
  overflow: hidden;
  scroll-margin-top: 90px;
}
.vb-cal__entry--shared,
.vb-cal__entry--eval,
.vb-cal__entry--int    { border-top: none; }

.vb-cal__entry-hdr {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 24px;
}

/* Número badge */
.vb-cal__entry-num {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 900; font-size: 1.1rem;
  color: #fff; line-height: 1;
  background: rgba(255,255,255,.22);
}

.vb-cal__entry-main { flex: 1; min-width: 0; }
.vb-cal__title { display: block; font-weight: 700; font-size: 1rem; color: #fff; line-height: 1.35; margin-bottom: 4px; }
.vb-cal__ponente { font-size: .78rem; color: rgba(255,255,255,.78); margin: 0; }

.vb-cal__entry-aside { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.vb-cal__ects {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 99px; padding: 5px 13px; white-space: nowrap;
  color: #fff; background: rgba(255,255,255,.20);
}
/* En móvil se muestra la versión corta ("N ECTS") para dejar más hueco al título */
.vb-cal__ects--short { display: none; }

@media (max-width: 620px) {
  .vb-cal__ects--full  { display: none; }
  .vb-cal__ects--short { display: inline-block; }
}

/* Acento cromático por módulo — ciclo de 6 tonos, siempre visible */
.vb-cal__entry:nth-child(6n+1) { border-color: #4d84b2; }
.vb-cal__entry:nth-child(6n+1) .vb-cal__entry-hdr { background: linear-gradient(135deg, #3a6e9c 0%, #5a9ac4 100%); }

.vb-cal__entry:nth-child(6n+2) { border-color: #3572a0; }
.vb-cal__entry:nth-child(6n+2) .vb-cal__entry-hdr { background: linear-gradient(135deg, #265a8a 0%, #4888b4 100%); }

.vb-cal__entry:nth-child(6n+3) { border-color: #20608f; }
.vb-cal__entry:nth-child(6n+3) .vb-cal__entry-hdr { background: linear-gradient(135deg, #164e7c 0%, #367aaa 100%); }

.vb-cal__entry:nth-child(6n+4) { border-color: #3f7aaa; }
.vb-cal__entry:nth-child(6n+4) .vb-cal__entry-hdr { background: linear-gradient(135deg, #2e6494 0%, #5292bc 100%); }

.vb-cal__entry:nth-child(6n+5) { border-color: #265080; }
.vb-cal__entry:nth-child(6n+5) .vb-cal__entry-hdr { background: linear-gradient(135deg, #1a3e6c 0%, #3868a0 100%); }

.vb-cal__entry:nth-child(6n+6) { border-color: #1c3f6b; }
.vb-cal__entry:nth-child(6n+6) .vb-cal__entry-hdr { background: linear-gradient(135deg, #122e56 0%, #2c5688 100%); }

/* ── Cursos ── */
.vb-form-courses { padding: 72px 0; background: var(--paper); border-top: 1px solid var(--line); }
.vb-form-courses__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.vb-form-course {
  display: flex; gap: 20px; padding: 32px;
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.vb-form-course__icon { width: 44px; height: 44px; flex-shrink: 0; background: var(--sky-100); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--sky); }
.vb-form-course__icon svg { width: 22px; height: 22px; }
.vb-form-course__body { display: flex; flex-direction: column; gap: 8px; }
.vb-form-course__body h3 { font-size: 1.05rem; color: var(--navy); margin: 0; }
.vb-form-course__body p { color: var(--muted); font-size: .9rem; margin: 0; }
.vb-form-course__tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sky); background: var(--sky-100); border-radius: 99px; padding: 3px 10px; margin-top: 4px; }
.vb-form-courses__cta-text { margin-top: 48px; text-align: center; color: var(--muted); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }

@media (max-width: 820px) {
  .vb-form-hub__grid { grid-template-columns: 1fr; }
  .vb-form-courses__grid { grid-template-columns: 1fr; }
  .vb-exp-pick__grid { grid-template-columns: 1fr; }
}

/* ── Barra de info rápida ── */
.vb-info-bar {
  background: linear-gradient(135deg, #0a2e4a 0%, #0d3b5e 60%, #1a5276 100%);
  padding: 48px 0;
  position: relative;
  overflow: hidden;
}
.vb-info-bar::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(255,255,255,.03);
  top: -200px; right: -150px;
  pointer-events: none;
}
.vb-info-bar::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,.03);
  bottom: -120px; left: -80px;
  pointer-events: none;
}
.vb-info-bar__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.vb-info-bar__item {
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vb-info-bar__item:last-child { border-right: none; }
.vb-info-bar__icon {
  color: #7dc4e8;
  margin-bottom: 8px;
}
.vb-info-bar__icon svg { width: 22px; height: 22px; }
.vb-info-bar__label {
  font-family: var(--font-head);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.55);
  margin: 0;
}
.vb-info-bar__value {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.vb-info-bar__sub {
  font-size: .72rem;
  color: rgba(255,255,255,.50);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 820px) {
  /* 3 filas 2-2-1: fila 1 (Modalidad, Plazas), fila 2 (Créditos, Titulación), fila 3 (Períodos) estirada a todo el ancho */
  .vb-info-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .vb-info-bar__item { padding: 0 20px; border-right: 1px solid rgba(255,255,255,.12); }
  .vb-info-bar__item:nth-child(even) { border-right: none; }
  .vb-info-bar__item:nth-child(5) { grid-column: 1 / 3; border-right: none; }
}

@media (max-width: 560px) {
  .vb-info-bar__item { padding: 0 14px; }
  .vb-info-bar__value { font-size: 1rem; }
  .vb-info-bar__sub { font-size: .7rem; }
}

/* ── CTA ── */
.vb-form-cta { padding: 72px 0 80px; }

.vb-form-cta__card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--navy), var(--navy-700));
  color: #fff;
  border-radius: 40px;
  padding: 64px 56px;
  text-align: center;
}

.vb-form-cta__card .eyebrow { display: block; margin-bottom: 12px; }

.vb-form-cta__card h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  position: relative;
}

.vb-form-cta__card > p {
  color: #cfe3f0;
  margin: 16px auto 28px;
  max-width: 52ch;
  font-size: 1.1rem;
  position: relative;
  line-height: 1.6;
}

.vb-form-cta__btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ── Responsive ── */
@media (max-width: 820px) {
  .vb-form-progs__grid  { grid-template-columns: 1fr; }
  .vb-form-prog--combo  { grid-column: auto; }
  .vb-form-prog__combo-inner {
    grid-template-columns: 1fr;
  }
  .vb-form-prog__combo-right {
    align-items: flex-start;
  }
  .vb-form-details__grid { grid-template-columns: repeat(2, 1fr); }
  .vb-form-modules__grid { grid-template-columns: 1fr; }
  .vb-form-req__box      { padding: 36px 28px; }
  .vb-form-cta__card     { padding: 48px 28px; }
}

@media (max-width: 560px) {
  .vb-form-details__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/*  PÁGINA FORMACIÓN — secciones adicionales                           */
/* ------------------------------------------------------------------ */

/* ── Hero ── */
.vb-form-hero {
  padding: 80px 0 72px;
  background: radial-gradient(120% 120% at 80% -10%, var(--sky-200), var(--sky-50) 55%, var(--paper));
  color: var(--ink);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.vb-form-hero .eyebrow {
  color: var(--muted);
  display: block;
  margin-bottom: 10px;
}

.vb-form-hero h1 {
  color: var(--navy);
  font-size: clamp(1.7rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  max-width: 820px;
  margin: 16px auto 0;
}

.vb-form-hero .atelma-container { position: relative; }

.vb-form-hero__tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.vb-form-hero__ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Blobs decorativos del hero de formación */
.vb-form-hero__blob--1 {
  width: 320px; height: 320px;
  right: -80px; top: -100px;
  opacity: .45;
  border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
}
.vb-form-hero__blob--2 {
  width: 180px; height: 180px;
  left: -50px; bottom: -60px;
  opacity: .30;
  border-radius: 44% 56% 60% 40% / 54% 46% 50% 50%;
}
.vb-form-hero__blob--3 {
  width: 100px; height: 100px;
  left: 30%; top: 20px;
  opacity: .22;
  border-radius: 55% 45% 42% 58% / 50% 60% 40% 50%;
}

/* ── Descripción ── */
.vb-form-desc {
  padding: 72px 0;
  border-bottom: 1px solid var(--line);
}

.vb-form-desc__body {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vb-form-desc__body p {
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1.75;
}

/* ── Descargas ── */
.vb-form-downloads {
  padding: 56px 0;
  background: var(--paper-2);
  border-block: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.vb-form-downloads > .atelma-container { position: relative; z-index: 1; }
.vb-form-downloads__blob--1 {
  width: 280px; height: 280px;
  top: -100px; left: -80px;
  background: #4d84b2; opacity: .16;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
}
.vb-form-downloads__blob--2 {
  width: 220px; height: 220px;
  bottom: -90px; right: -60px;
  background: #1c3f6b; opacity: .14;
  border-radius: 54% 46% 44% 56% / 42% 58% 48% 52%;
}

/* Formulario "Solicita el programa completo" */
.vb-form-notice {
  max-width: 640px;
  margin: 0 auto 24px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-size: .92rem;
  text-align: center;
}
.vb-form-notice--ok { background: #e5f6ec; border: 1px solid #b7e4c7; color: #1e6b3a; }
.vb-form-notice--error { background: #fbeaea; border: 1px solid #f0bcbc; color: #a13333; }

.vb-program-form {
  position: relative;
  max-width: 640px;
  margin: 32px auto 0;
  background: linear-gradient(150deg, var(--navy) 0%, var(--sky) 130%);
  border-radius: var(--radius);
  padding: 40px 40px 36px;
  box-shadow: var(--shadow-md);
  text-align: center;
  overflow: hidden;
}
.vb-program-form::before,
.vb-program-form::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.vb-program-form::before { width: 220px; height: 220px; top: -100px; right: -70px; }
.vb-program-form::after  { width: 160px; height: 160px; bottom: -80px; left: -50px; }

.vb-program-form .vb-program-form__row,
.vb-program-form .vb-program-form__field { position: relative; text-align: left; }

.vb-program-form__honeypot {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.vb-program-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.vb-program-form__field { margin-bottom: 18px; }
.vb-program-form__row .vb-program-form__field { margin-bottom: 0; }

.vb-program-form label {
  position: relative;
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  margin-bottom: 6px;
}

.vb-program-form input[type="text"],
.vb-program-form input[type="email"],
.vb-program-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: .95rem;
  line-height: 1.3;
  color: var(--ink);
  font-family: inherit;
  background: #fff;
}
.vb-program-form select { line-height: normal; }
.vb-program-form input[type="text"]:focus,
.vb-program-form input[type="email"]:focus,
.vb-program-form select:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px var(--sky-100);
}

/* Select con flecha propia, a juego con el resto del sitio */
.vb-select { position: relative; }
.vb-program-form .vb-select select {
  appearance: none;
  -webkit-appearance: none;
  /* display:flex arregla el recorte del texto que dan los <select> nativos
     al combinarse con line-height/fuentes personalizadas */
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 42px;
  cursor: pointer;
}
.vb-program-form .vb-select select:invalid { color: var(--muted); }
.vb-select__icon {
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%);
  display: flex;
  color: var(--muted);
  pointer-events: none;
}
.vb-select__icon svg { width: 16px; height: 16px; }

.vb-program-form .btn { position: relative; margin-top: 10px; }

.vb-program-form__note {
  position: relative;
  margin: 14px 0 0;
  font-size: .78rem;
  color: rgba(255,255,255,.75);
  text-align: center;
}

@media (max-width: 640px) {
  .vb-program-form { padding: 28px 24px; }
  .vb-program-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ── Info grid (contact row) ── */
.vb-form-details__contact {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 14px 20px;
  background: var(--sky-100);
  border: 1px solid var(--sky-200);
  border-radius: var(--r-md);
  font-size: .95rem;
  color: var(--ink);
}

.vb-form-details__contact svg { width: 20px; height: 20px; color: var(--navy); flex-shrink: 0; }

.vb-form-details__contact a { color: var(--navy); font-weight: 700; text-decoration: none; }
.vb-form-details__contact a:hover { text-decoration: underline; }

.vb-form-detail__sub {
  font-size: .83rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Programa (acordeón) ── */
.vb-form-program {
  padding: 72px 0;
}

.vb-form-program--alt {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
}

.vb-form-program__head {
  margin-bottom: 36px;
}

.vb-form-program__head .eyebrow { display: block; margin-bottom: 8px; }

.vb-form-program__head h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 8px;
}

.vb-form-program__head > p { color: var(--muted); font-size: .95rem; }

/* ── Tarjetas acordeón ── */
.vb-form-mod {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
  margin-bottom: 10px;
  transition: box-shadow .2s;
}

.vb-form-mod:last-child { margin-bottom: 0; }

.vb-form-mod[open] {
  box-shadow: var(--shadow-sm);
}

.vb-form-mod > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 0;
}

.vb-form-mod > summary::-webkit-details-marker { display: none; }

.vb-form-mod__hdr {
  display: grid;
  grid-template-columns: 48px 1fr 28px;
  align-items: start;
  gap: 16px;
  padding: 20px 22px;
}

.vb-form-mod__num {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--sky-100);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .9rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.vb-form-mod__num svg { width: 20px; height: 20px; }

.vb-form-mod[open] .vb-form-mod__num {
  background: var(--navy);
  color: #fff;
}

/* Acento cromático por módulo — ciclo de 6 tonos del logo */
.vb-form-mod:nth-child(6n+1) { border-left: 4px solid #4d84b2; background: #f4f9fd; }
.vb-form-mod:nth-child(6n+1) .vb-form-mod__num { background: #dceef8; color: #4d84b2; }
.vb-form-mod[open]:nth-child(6n+1) .vb-form-mod__num { background: #4d84b2; color: #fff; }

.vb-form-mod:nth-child(6n+2) { border-left: 4px solid #3572a0; background: #eef5fb; }
.vb-form-mod:nth-child(6n+2) .vb-form-mod__num { background: #d3e8f5; color: #3572a0; }
.vb-form-mod[open]:nth-child(6n+2) .vb-form-mod__num { background: #3572a0; color: #fff; }

.vb-form-mod:nth-child(6n+3) { border-left: 4px solid #20608f; background: #e8f1f8; }
.vb-form-mod:nth-child(6n+3) .vb-form-mod__num { background: #c8e0f0; color: #20608f; }
.vb-form-mod[open]:nth-child(6n+3) .vb-form-mod__num { background: #20608f; color: #fff; }

.vb-form-mod:nth-child(6n+4) { border-left: 4px solid #3f7aaa; background: #f0f6fc; }
.vb-form-mod:nth-child(6n+4) .vb-form-mod__num { background: #d5ebf7; color: #3f7aaa; }
.vb-form-mod[open]:nth-child(6n+4) .vb-form-mod__num { background: #3f7aaa; color: #fff; }

.vb-form-mod:nth-child(6n+5) { border-left: 4px solid #265080; background: #eaf2f9; }
.vb-form-mod:nth-child(6n+5) .vb-form-mod__num { background: #cbe2f2; color: #265080; }
.vb-form-mod[open]:nth-child(6n+5) .vb-form-mod__num { background: #265080; color: #fff; }

.vb-form-mod:nth-child(6n+6) { border-left: 4px solid #1c3f6b; background: #e4eef6; }
.vb-form-mod:nth-child(6n+6) .vb-form-mod__num { background: #bfd8ec; color: #1c3f6b; }
.vb-form-mod[open]:nth-child(6n+6) .vb-form-mod__num { background: #1c3f6b; color: #fff; }

.vb-form-mod__hdr-info h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 8px;
}

.vb-form-mod__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vb-form-mod__tag {
  display: inline-block;
  background: var(--sky-100);
  border: 1px solid var(--sky-200);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .74rem;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
}

.vb-form-mod__arrow {
  display: grid;
  place-items: center;
  padding-top: 12px;
  transition: transform .25s;
  color: var(--muted);
}

.vb-form-mod__arrow svg { width: 18px; height: 18px; transform: rotate(90deg); }

.vb-form-mod[open] .vb-form-mod__arrow { transform: rotate(180deg); }

/* ── Cuerpo del acordeón ── */
.vb-form-mod__body {
  border-top: 1px solid var(--line);
  padding: 24px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vb-form-mod__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: var(--sky-100);
  border: 1px solid var(--sky-200);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: .9rem;
}

.vb-form-mod__meta strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 2px;
}

.vb-form-mod__meta p { color: var(--muted); margin: 0; }

/* ── Bloque dentro del módulo ── */
.vb-form-mod__bloque {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vb-form-mod__bloque-label {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.vb-form-mod__bloque h4 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0;
}

.vb-form-mod__bloque ul {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vb-form-mod__bloque li { font-size: .93rem; color: var(--ink); line-height: 1.55; }

/* Sub-ítem con sangría adicional */
.vb-form-subitem {
  padding-left: 16px;
  color: var(--muted) !important;
  list-style-type: circle !important;
}

.vb-form-mod__metod {
  font-size: .88rem;
  color: var(--muted);
  background: var(--paper-2);
  border-left: 3px solid var(--sky);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 12px 16px;
  line-height: 1.6;
  margin: 0;
}

/* ================================================================== */
/*  ESTILO PÁGINAS DE SERVICIO — mejoras visuales                      */
/* ================================================================== */

/* ── Acento decorativo bajo los títulos de sección ── */
.vb-page .vb-head h2,
.vb-gab .vb-head h2 {
  position: relative;
  padding-bottom: 18px;
}
.vb-page .vb-head h2::after,
.vb-gab .vb-head h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sky), var(--navy));
}

/* ── Tarjetas de grupos/etapas: borde superior de color ── */
.vb-page__etapas .vb-svc__card:nth-child(1) { border-top: 3px solid var(--navy); }
.vb-page__etapas .vb-svc__card:nth-child(2) { border-top: 3px solid #2e6898; }
.vb-page__etapas .vb-svc__card:nth-child(3) { border-top: 3px solid #4d84b2; }
.vb-page__etapas .vb-svc__card:nth-child(4) { border-top: 3px solid var(--sky); }

/* ── Destinatarios PATIOS: mismos bordes ── */
#destinatarios .vb-svc__card:nth-child(1) { border-top: 3px solid var(--navy); }
#destinatarios .vb-svc__card:nth-child(2) { border-top: 3px solid #2e6898; }
#destinatarios .vb-svc__card:nth-child(3) { border-top: 3px solid #4d84b2; }
#destinatarios .vb-svc__card:nth-child(4) { border-top: 3px solid var(--sky); }

/* ── Facts del aside: separador entre items ── */
.vb-page__fact:not(:last-child) {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--sky-200);
}


/* ── Callout de texto destacado ── */
.vb-callout {
  background: var(--sky-50);
  border-left: 4px solid var(--navy);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 20px 26px;
  margin: 4px 0 8px;
}
.vb-callout p {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 1.06rem;
  line-height: 1.58;
  margin: 0;
}
.vb-callout__hl { color: #1479aa; }

/* ── Grid de requisitos (INCLUYETEL) ── */
.vb-req-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 780px;
  margin: 0 auto;
}
.vb-req-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: box-shadow .15s;
}
.vb-req-card:hover { box-shadow: var(--shadow-sm); }
.vb-req-card__num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vb-req-card p { font-size: .93rem; color: var(--ink); line-height: 1.52; margin: 0; flex: 1; }
.vb-req-note {
  max-width: 780px;
  margin: 18px auto 0;
  text-align: center;
  font-style: italic;
  color: var(--muted);
  font-size: .92rem;
}
@media (max-width: 580px) { .vb-req-grid { grid-template-columns: 1fr; } }

/* ── Pasos numerados (PATIOS — Cómo funciona) ── */
.vb-steps { padding: 72px 0; background: var(--paper); }

.vb-steps__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  position: relative;
}
/* Línea conectora entre pasos */
.vb-steps__row::before {
  content: '';
  position: absolute;
  top: 25px;
  left: calc(16.66% + 8px);
  right: calc(16.66% + 8px);
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.vb-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 24px 28px;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: transform .15s, box-shadow .15s;
}
.vb-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vb-step__num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 4px 12px rgba(24, 70, 106, .35);
}
.vb-step h3 { font-size: 1.06rem; color: var(--navy); margin-bottom: 10px; }
.vb-step p  { font-size: .92rem; color: var(--muted); line-height: 1.58; }
@media (max-width: 680px) {
  .vb-steps__row { grid-template-columns: 1fr; }
  .vb-steps__row::before { display: none; }
}

/* Steps PATIOS — stepper horizontal claro */
.vb-steps .vb-steps__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  position: relative;
}
/* Línea conectora por encima de los iconos */
.vb-steps .vb-steps__row::before {
  content: '';
  position: absolute;
  top: 30px;
  left: calc(16.66% + 8px);
  right: calc(16.66% + 8px);
  height: 2px;
  background: linear-gradient(90deg, var(--navy), #1479aa, #0d8fba);
  z-index: 0;
}
.vb-steps .vb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 28px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
  z-index: 1;
}
.vb-steps .vb-step:hover { transform: none; box-shadow: none; }

.vb-steps .vb-step__icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-bottom: 20px;
  box-shadow: 0 0 0 6px var(--paper);
  position: relative; z-index: 1;
}
.vb-steps .vb-step:nth-child(2) .vb-step__icon { background: #1479aa; }
.vb-steps .vb-step:nth-child(3) .vb-step__icon { background: #0d8fba; }
.vb-steps .vb-step__icon svg { width: 26px; height: 26px; }

.vb-steps .vb-step__num {
  display: none;
}
.vb-steps .vb-step__text h3 { color: var(--navy); font-size: 1.06rem; margin: 0 0 8px; }
.vb-steps .vb-step__text p  { color: var(--muted); font-size: .9rem; line-height: 1.65; margin: 0; }

@media (max-width: 680px) {
  .vb-steps .vb-steps__row { grid-template-columns: 1fr; gap: 32px; }
  .vb-steps .vb-steps__row::before { display: none; }
  .vb-steps .vb-step__icon { box-shadow: 0 0 0 6px var(--paper); }
}

/* ── PATIOS: destinatarios — timeline vertical ── */
.vb-dest { padding: 72px 0; background: var(--paper-2); border-top: 1px solid var(--line); }
.vb-dest__list {
  position: relative;
  max-width: 680px;
  margin: 44px auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vb-dest__list::before {
  content: '';
  position: absolute;
  left: 25px;
  top: 4px;
  bottom: 32px;
  width: 2px;
  background: var(--line);
  z-index: 0;
}
.vb-dest__item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 36px;
  position: relative;
}
.vb-dest__item:last-child { padding-bottom: 0; }
.vb-dest__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--paper-2);
}
.vb-dest__item:nth-child(2) .vb-dest__icon { background: #1a5a8e; }
.vb-dest__item:nth-child(3) .vb-dest__icon { background: #1479aa; }
.vb-dest__item:nth-child(4) .vb-dest__icon { background: #0d8fba; }
.vb-dest__icon svg { width: 24px; height: 24px; }
.vb-dest__body { padding-top: 10px; }
.vb-dest__tag {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.vb-dest__body h3 { font-size: 1.12rem; color: var(--navy); margin: 0 0 6px; }
.vb-dest__body p  { font-size: .92rem; color: var(--muted); line-height: 1.62; margin: 0; }

/* ── SIO: aside con timeline vb-dest sobre fondo blanco ── */
.vb-sio__aside {
  position: relative;
  padding: 0;
  background: none;
  border: none;
  gap: 0; /* el espaciado lo da el padding-bottom de cada .vb-dest__item, no el gap del flex */
}
.vb-sio__aside::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 6px; bottom: 24px;
  width: 2px;
  background: linear-gradient(to bottom, var(--navy), var(--sky) 70%, transparent);
  z-index: 0;
}
.vb-sio__aside .vb-dest__item { padding-bottom: 22px; gap: 16px; }
.vb-sio__aside .vb-dest__item:last-child { padding-bottom: 0; }
.vb-sio__aside .vb-dest__icon {
  width: 42px; height: 42px;
  min-width: 42px;
  box-shadow: 0 0 0 4px #fff;
}
.vb-sio__aside .vb-dest__icon svg { width: 18px; height: 18px; }
.vb-sio__aside .vb-dest__tag { font-size: .68rem; margin-bottom: 2px; }
.vb-sio__aside .vb-dest__body { padding-top: 6px; }
.vb-sio__aside .vb-dest__body h3 { font-size: .95rem; margin-bottom: 4px; }
.vb-sio__aside .vb-dest__body p  { font-size: .82rem; }

/* ── INCLUYETEL: aside un poco más grande que SIO ── */
.vb-inclu__aside.vb-sio__aside { padding-left: 28px; }
.vb-inclu__aside.vb-sio__aside::before { left: 52px; }
.vb-inclu__aside.vb-sio__aside .vb-dest__item { padding-bottom: 26px; gap: 20px; }
.vb-inclu__aside.vb-sio__aside .vb-dest__icon { width: 48px; height: 48px; min-width: 48px; }
.vb-inclu__aside.vb-sio__aside .vb-dest__icon svg { width: 22px; height: 22px; }
.vb-inclu__aside.vb-sio__aside .vb-dest__tag { font-size: .72rem; }
.vb-inclu__aside.vb-sio__aside .vb-dest__body { padding-top: 8px; }
.vb-inclu__aside.vb-sio__aside .vb-dest__body h3 { font-size: 1.05rem; }
.vb-inclu__aside.vb-sio__aside .vb-dest__body p  { font-size: .88rem; }

/* ── DiverTEL: grupos por etapa (2×2 tarjetas visuales) ── */
.vb-grupos {
  padding: 72px 0;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.vb-grupos__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Grupo cards: tarjeta completamente coloreada */
.vb-grupo-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 32px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(140deg, #0d2b45, var(--navy));
  transition: transform .18s, box-shadow .18s;
}
.vb-grupo-card:nth-child(2) { background: linear-gradient(140deg, var(--navy), #1a5a8e); }
.vb-grupo-card:nth-child(3) { background: linear-gradient(140deg, #1a5a8e, #1479aa); }
.vb-grupo-card:nth-child(4) { background: linear-gradient(140deg, #1479aa, #0d8fba); }
.vb-grupo-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(13,43,69,.35); }

/* Watermark decorativo */
.vb-grupo-card::after {
  content: '';
  position: absolute;
  bottom: -24px; right: -24px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}

.vb-grupo-card__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.vb-grupo-card__icon svg { width: 28px; height: 28px; }

.vb-grupo-card__age {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.6);
}
.vb-grupo-card h3 {
  color: #fff;
  font-size: 1.2rem;
  margin: 0;
  line-height: 1.25;
}
.vb-grupo-card p {
  color: rgba(255,255,255,.75);
  font-size: .92rem;
  line-height: 1.62;
  margin: 0;
}

@media (max-width: 860px) {
  .vb-grupos__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .vb-grupos__grid { grid-template-columns: 1fr; }
}

/* Proyectos: tarjetas en una sola columna, centradas y con un ancho
   propio (si no, cada tarjeta ocuparía todo el ancho del contenedor). */
.vb-grupos__grid--vertical {
  grid-template-columns: 1fr;
  max-width: 920px;
  margin: 0 auto;
}
/* El contenido se queda a la izquierda, con un hueco libre a la derecha
   por si hace falta meter el logo del organismo más adelante. */
.vb-grupos__grid--vertical .vb-grupo-card {
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
.vb-grupos__grid--vertical .vb-grupo-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  max-width: 480px;
}
.vb-grupos__grid--vertical .vb-grupo-card__logo-slot {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Placa blanca detrás del logo: los logotipos vienen con fondo blanco,
   así se leen bien sobre el degradado azul de la tarjeta. */
.vb-grupo-card__logo-slot img {
  max-width: 230px;
  max-height: 140px;
  width: auto;
  height: auto;
  background: #fff;
  border-radius: var(--r-md);
  padding: 18px 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

@media (max-width: 720px) {
  .vb-grupos__grid--vertical .vb-grupo-card {
    flex-direction: column;
    align-items: stretch;
  }
  .vb-grupos__grid--vertical .vb-grupo-card__body { max-width: none; }
  /* En vertical (apilada) el logo ya no comparte fila con el texto, así
     que se queda centrado debajo, más pequeño que en escritorio. */
  .vb-grupos__grid--vertical .vb-grupo-card__logo-slot {
    flex: none;
    margin-top: 4px;
  }
  .vb-grupos__grid--vertical .vb-grupo-card__logo-slot img {
    max-width: 170px;
    max-height: 90px;
    padding: 14px 20px;
  }
}

/* SIO: 5 tarjetas — en vez de una rejilla fija con un hueco en la
   última fila, se reparten en flex-wrap para que la fila incompleta
   quede centrada (aquí, 3 arriba + 2 abajo centradas). En móvil, una
   sola columna como el resto de páginas que usan este componente. */
.vb-grupos__grid--sio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.vb-grupos__grid--sio .vb-grupo-card {
  flex: 1 1 300px;
  max-width: 340px;
}
/* A partir de la 5ª tarjeta el ciclo de colores del componente (pensado
   para 4) empezaría a repetirse con las primeras — se les da su propia
   tonalidad a estas cuatro para diferenciarlas. */
.vb-grupos__grid--sio .vb-grupo-card:nth-child(5) { background: linear-gradient(140deg, #4d84b2, #265080); }
.vb-grupos__grid--sio .vb-grupo-card:nth-child(6) { background: linear-gradient(140deg, #3f7aaa, #1c3f6b); }
.vb-grupos__grid--sio .vb-grupo-card:nth-child(7) { background: linear-gradient(140deg, #265080, #3f7aaa); }
.vb-grupos__grid--sio .vb-grupo-card:nth-child(8) { background: linear-gradient(140deg, #1c3f6b, #0d2b45); }
@media (max-width: 600px) {
  .vb-grupos__grid--sio .vb-grupo-card {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* ── SIO: calendario de reservas (Google Calendar, appointment schedule) ── */
.vb-sio-booking { padding: 64px 0 80px; }
.vb-sio-booking__frame {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.vb-sio-booking__frame iframe { display: block; width: 100%; height: 640px; }

@media (max-width: 640px) {
  /* En pantallas estrechas la vista de Google Calendar apila el mini
     calendario y la lista de horas, así que necesita más alto para no
     recortarse. */
  .vb-sio-booking__frame iframe { height: 820px; }
}

/* ── Formulario propio de reserva de cita (plugin Atelma Calendar Bridge) ── */
.atelma-gcal-form {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 36px 40px;
}
.atelma-gcal-form__honeypot {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.atelma-gcal-form__status {
  text-align: center;
  padding: 24px 8px;
  color: var(--muted);
}
.atelma-gcal-form__status--error { color: #a13333; font-weight: 600; margin-bottom: 16px; padding: 14px 18px; background: #fbeaea; border: 1px solid #f0bcbc; border-radius: var(--r-md); text-align: left; }
.atelma-gcal-form__status--ok { color: #1e6b3a; font-weight: 700; }

/* Dos columnas en pantallas anchas: día/hora a la izquierda, el resto
   de los datos a la derecha — así se estira en horizontal en vez de
   obligar a bajar tanto para llegar al botón de reservar. */
.atelma-gcal-form__cols { display: block; }
@media (min-width: 720px) {
  .atelma-gcal-form__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
}
.atelma-gcal-form__field { margin-bottom: 18px; position: relative; }
.atelma-gcal-form__field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  color: var(--navy);
  margin-bottom: 6px;
}
.atelma-gcal-form__field input[type="text"],
.atelma-gcal-form__field input[type="email"],
.atelma-gcal-form__field input[type="tel"],
.atelma-gcal-form__field select {
  width: 100%;
  /* Alto fijo + line-height igual (menos el borde) para que el texto se
     centre verticalmente sin cortarse — el theme padre pone su propia
     altura de 40px a los "select" y con el padding vertical anterior
     el texto no cabía y se veía recortado por la mitad. */
  height: 46px;
  padding: 0 14px;
  line-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: .95rem;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
}
.atelma-gcal-form__field input:focus,
.atelma-gcal-form__field select:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px var(--sky-100);
}
.atelma-gcal-form .vb-select select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }

/* Calendario de días para elegir cita (sustituye al <select> de días) */
.atelma-gcal-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.atelma-gcal-cal__month {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  text-transform: capitalize;
}
.atelma-gcal-cal__nav {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.atelma-gcal-cal__nav:hover:not(:disabled) { background: var(--sky-100); border-color: var(--sky); }
.atelma-gcal-cal__nav:disabled { opacity: .3; cursor: default; }
.atelma-gcal-cal__nav svg { width: 15px; height: 15px; }
.atelma-gcal-cal__nav--prev svg { transform: scaleX(-1); }

.atelma-gcal-cal__weekdays,
.atelma-gcal-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.atelma-gcal-cal__weekdays {
  margin-bottom: 4px;
  text-align: center;
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
}
.atelma-gcal-cal__day {
  aspect-ratio: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: .88rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.atelma-gcal-cal__day--empty { visibility: hidden; cursor: default; }
.atelma-gcal-cal__day:not(.is-disabled):not(.atelma-gcal-cal__day--empty):not(.is-selected) {
  border-color: var(--sky);
  color: var(--navy);
  font-weight: 700;
}
.atelma-gcal-cal__day:not(.is-disabled):not(.atelma-gcal-cal__day--empty):not(.is-selected):hover { background: var(--sky-100); }
.atelma-gcal-cal__day.is-selected { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.atelma-gcal-cal__day.is-disabled { color: var(--line); cursor: default; }

.atelma-gcal-form__slots { display: flex; flex-wrap: wrap; gap: 10px; }
.atelma-gcal-form__slot {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--sky);
  background: #fff;
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.atelma-gcal-form__slot:hover { background: var(--sky-100); }
.atelma-gcal-form__slot.is-selected { background: var(--navy); border-color: var(--navy); color: #fff; }

.atelma-gcal-form .btn { width: 100%; justify-content: center; margin-top: 8px; }
.atelma-gcal-form__note { text-align: center; font-size: .8rem; color: var(--muted); margin: 14px 0 0; }

@media (max-width: 640px) {
  .atelma-gcal-form { padding: 28px 22px; }
}

/* ── INCLUYETEL: métricas dashboard ── */

.vb-inclu__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 48px;
}

.vb-inclu__metric {
  padding: 32px 20px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius);
  transition: transform .18s, box-shadow .18s;
}
.vb-inclu__metric:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.vb-inclu__metric:nth-child(1) { background: #ddeeff; }
.vb-inclu__metric:nth-child(2) { background: #ccf5f7; }
.vb-inclu__metric:nth-child(3) { background: #d4edda; }
.vb-inclu__metric:nth-child(4) { background: #e2e0f8; }

.vb-inclu__metric strong {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  font-weight: 900;
  line-height: 1;
}
.vb-inclu__metric:nth-child(1) strong { color: #1565c0; }
.vb-inclu__metric:nth-child(2) strong { color: #0097a7; }
.vb-inclu__metric:nth-child(3) strong { color: #2e7d32; }
.vb-inclu__metric:nth-child(4) strong { color: #303f9f; }

.vb-inclu__metric span {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy);
  margin-top: 4px;
}

.vb-inclu__metric small {
  font-size: .81rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 4px;
}

@media (max-width: 680px) {
  .vb-inclu__metrics { grid-template-columns: repeat(2, 1fr); }
}

/* ── Dark heroes: estilos compartidos para todas las páginas de servicio ── */
.vb-page__hero--gabinete,
.vb-page__hero--divertel,
.vb-page__hero--incluyetel,
.vb-page__hero--sio,
.vb-page__hero--proyectos { border-bottom: none; }

.vb-page__hero--gabinete h1,   .vb-page__hero--divertel h1,
.vb-page__hero--incluyetel h1, .vb-page__hero--sio h1, .vb-page__hero--proyectos h1,
.vb-page__hero--gabinete .vb-page__hero-btns,   .vb-page__hero--divertel .vb-page__hero-btns,
.vb-page__hero--incluyetel .vb-page__hero-btns, .vb-page__hero--sio .vb-page__hero-btns,
.vb-page__hero--proyectos .vb-page__hero-btns { color: #fff; }

.vb-page__hero--gabinete .vb-page__lead,   .vb-page__hero--divertel .vb-page__lead,
.vb-page__hero--incluyetel .vb-page__lead, .vb-page__hero--sio .vb-page__lead,
.vb-page__hero--proyectos .vb-page__lead { color: rgba(255,255,255,.76); }

.vb-page__hero--gabinete .vb-tag,   .vb-page__hero--divertel .vb-tag,
.vb-page__hero--incluyetel .vb-tag, .vb-page__hero--sio .vb-tag,
.vb-page__hero--proyectos .vb-tag {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
}
.vb-page__hero--gabinete .vb-dot,   .vb-page__hero--divertel .vb-dot,
.vb-page__hero--incluyetel .vb-dot, .vb-page__hero--sio .vb-dot,
.vb-page__hero--proyectos .vb-dot { background: #7fd8ff; }

.vb-page__hero--gabinete .btn--primary,   .vb-page__hero--divertel .btn--primary,
.vb-page__hero--incluyetel .btn--primary, .vb-page__hero--sio .btn--primary,
.vb-page__hero--proyectos .btn--primary {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
}
.vb-page__hero--gabinete .btn--primary:hover,   .vb-page__hero--divertel .btn--primary:hover,
.vb-page__hero--incluyetel .btn--primary:hover, .vb-page__hero--sio .btn--primary:hover,
.vb-page__hero--proyectos .btn--primary:hover { background: var(--sky-100); color: var(--navy); }

.vb-page__hero--gabinete .btn--ghost,   .vb-page__hero--divertel .btn--ghost,
.vb-page__hero--incluyetel .btn--ghost, .vb-page__hero--sio .btn--ghost,
.vb-page__hero--proyectos .btn--ghost {
  border-color: rgba(255,255,255,.38);
  color: rgba(255,255,255,.92);
}
.vb-page__hero--gabinete .btn--ghost:hover,   .vb-page__hero--divertel .btn--ghost:hover,
.vb-page__hero--incluyetel .btn--ghost:hover, .vb-page__hero--sio .btn--ghost:hover,
.vb-page__hero--proyectos .btn--ghost:hover { background: rgba(255,255,255,.1); }

.vb-page__hero--gabinete .vb-page__stat,   .vb-page__hero--divertel .vb-page__stat,
.vb-page__hero--incluyetel .vb-page__stat, .vb-page__hero--sio .vb-page__stat,
.vb-page__hero--proyectos .vb-page__stat {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
}
.vb-page__hero--gabinete .vb-page__stat strong,   .vb-page__hero--divertel .vb-page__stat strong,
.vb-page__hero--incluyetel .vb-page__stat strong, .vb-page__hero--sio .vb-page__stat strong,
.vb-page__hero--proyectos .vb-page__stat strong { color: #fff; }
.vb-page__hero--gabinete .vb-page__stat span,   .vb-page__hero--divertel .vb-page__stat span,
.vb-page__hero--incluyetel .vb-page__stat span, .vb-page__hero--sio .vb-page__stat span,
.vb-page__hero--proyectos .vb-page__stat span { color: rgba(255,255,255,.62); }

/* Gradiente propio de cada servicio (igual que su card en /servicios/) */
.vb-page__hero--gabinete   { background: linear-gradient(140deg, #18466a 0%, #0f2e45 100%); }
.vb-page__hero--divertel   { background: linear-gradient(140deg, #265080 0%, #3f7aaa 100%); }
.vb-page__hero--incluyetel { background: linear-gradient(140deg, #3f7aaa 0%, #4d84b2 100%); }
.vb-page__hero--sio        { background: linear-gradient(140deg, #1c3f6b 0%, #143b59 100%); }
.vb-page__hero--proyectos  { background: linear-gradient(140deg, #4d84b2 0%, #18466a 100%); }

/* Círculo decorativo flotante */
.vb-hero-deco {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.055);
  border: 1.5px solid rgba(255,255,255,.13);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.vb-hero-deco svg { width: 100px; height: 100px; color: rgba(255,255,255,.25); }
@media (max-width: 900px) { .vb-hero-deco { display: none; } }

/* ── Responsive programa ── */
@media (max-width: 820px) {
  .vb-form-mod__hdr { grid-template-columns: 40px 1fr 24px; gap: 12px; padding: 16px 16px; }
  .vb-form-mod__body { padding: 18px 16px 22px; }
  .vb-form-hero { padding: 56px 0 48px; }
}

@media (max-width: 560px) {
  .vb-form-hero h1 { font-size: 1.55rem; }
  .vb-form-mod__tags { display: none; }
}

/* ------------------------------------------------------------------ */
/*  TIENDA · MERCHANDISING                                              */
/* ------------------------------------------------------------------ */

/* ── Hero tienda con imagen tendedero ── */
.vb-page__hero--tienda {
  padding: 72px 0 68px;
  min-height: 400px;
  display: flex;
  align-items: center;
  /* fondo: degradado sky ligeramente más rico en el lado derecho */
  background:
    radial-gradient(ellipse 60% 90% at 85% 50%, var(--sky-200) 0%, transparent 70%),
    radial-gradient(120% 120% at 20% -10%, var(--sky-100), var(--sky-50) 55%, var(--paper));
  overflow: hidden;
}

/* Texto: confinado a la mitad izquierda */
.vb-tienda-hero__content {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

.vb-tienda-hero__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--muted);
  font-size: .88rem;
}
.vb-tienda-hero__note svg { width: 16px; height: 16px; flex-shrink: 0; color: #1e6b3a; }

/* Imagen del tendedero: flota en la mitad derecha */
.vb-tienda-hero__img {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 54%;
  max-width: 800px;
  height: auto;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 12px 36px rgba(15,46,69,.12));
}

/* Responsive: apila texto arriba, imagen abajo */
@media (max-width: 900px) {
  .vb-page__hero--tienda {
    min-height: unset;
    padding: 56px 0 0;
    flex-direction: column;
    align-items: stretch;
  }
  .vb-tienda-hero__content {
    max-width: 100%;
    padding-bottom: 32px;
  }
  .vb-tienda-hero__img {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    display: block;
  }
}

/* Grid de productos */
.vb-tienda-grid {
  padding: 64px 0 80px;
}

.vb-tienda-grid__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Tarjeta ── */
a.vb-prod-card {
  color: inherit;
  text-decoration: none;
  display: flex;
}

.vb-prod-card {
  background: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(15,46,69,.04), 0 6px 20px rgba(15,46,69,.07);
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: box-shadow .28s ease, transform .28s ease, outline-color .18s;
  position: relative;
  border: 1px solid var(--line);
  outline: 2.5px solid transparent;
  outline-offset: 3px;
}

.vb-prod-card:hover {
  box-shadow: 0 14px 48px rgba(15,46,69,.13), 0 38px 76px rgba(15,46,69,.07);
  transform: translateY(-8px);
  outline-color: var(--sky);
}

/* ── Área imagen ── */
.vb-prod-card__img {
  padding: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sky-50) 0%, var(--sky-200) 55%, var(--sky-300) 100%);
}

/* Capa decorativa con círculo suave en esquina superior derecha */
.vb-prod-card__img::before {
  content: '';
  position: absolute;
  top: -28px; right: -28px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  pointer-events: none;
  z-index: 1;
}

.vb-prod-card__ph {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 0;
  min-height: unset;
  background: transparent;
  border: none;
}

/* Imagen real en recomendaciones */
.vb-prod-card__real-img {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
}
.vb-prod-card__real-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Badge de precio — flota en la esquina inferior derecha de la imagen */
.vb-prod-card__price {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.03em;
  background: var(--navy);
  border-radius: 999px;
  padding: 7px 15px;
  box-shadow: 0 3px 10px rgba(15,46,69,.28);
}

/* símbolo € pequeño y en sky */
.vb-prod-card__price small,
.vb-prod-card__price .woocommerce-Price-currencySymbol {
  font-size: .68rem;
  font-weight: 700;
  vertical-align: super;
  color: var(--sky-300);
  letter-spacing: 0;
}

/* WooCommerce price HTML dentro del badge */
.vb-prod-card__price .price,
.vb-prod-card__price .woocommerce-Price-amount {
  display: contents;
  font: inherit;
  color: inherit;
}

.vb-prod-card__icon-badge { display: none; }

/* ── Body ── */
.vb-prod-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.vb-prod-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.vb-prod-card__badge {
  font-size: .68rem;
  font-weight: 800;
  font-family: var(--font-head);
  background: var(--sky-100);
  color: var(--navy);
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid var(--sky-200);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.vb-prod-card h2 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--navy-900);
  line-height: 1.25;
  margin: 0;
}

.vb-prod-card p {
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}

/* ── Footer — solo CTA ── */
.vb-prod-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.vb-prod-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .8rem;
  color: var(--navy);
  background: var(--sky-100);
  border: 1.5px solid var(--sky-200);
  border-radius: 999px;
  padding: 8px 16px;
  transition: background .2s, border-color .2s, color .16s, gap .14s;
  white-space: nowrap;
}
.vb-prod-card__cta svg { width: 14px; height: 14px; transition: transform .16s; flex-shrink: 0; }
.vb-prod-card:hover .vb-prod-card__cta {
  background: var(--sky);
  border-color: var(--sky);
  gap: 9px;
}
.vb-prod-card:hover .vb-prod-card__cta svg { transform: translateX(4px); }

/* ── Responsive ── */
@media (max-width: 960px) {
  .vb-tienda-grid__items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .vb-tienda-grid { padding: 40px 0 56px; }
  .vb-tienda-grid__items { grid-template-columns: 1fr; }
}

/* ── Sección "Formación de Experto": mismo look de tarjeta, pero con el
   acento navy de las páginas de programa en vez del degradado sky del
   merchandising, para que se lea como algo distinto (un curso, no un
   regalo). ── */
.vb-tienda-grid--cursos { padding-top: 48px; padding-bottom: 8px; }
.vb-prod-card--curso .vb-prod-card__img {
  background: linear-gradient(135deg, var(--navy) 0%, #1a5276 60%, #2878a8 100%);
}
.vb-prod-card__ph--curso { gap: 10px; }
.vb-prod-card__ph--curso svg { width: 34px; height: 34px; color: #fff; }
.vb-prod-card__ph--curso span {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff;
}
.vb-prod-card--curso .vb-prod-card__price { background: #fff; color: var(--navy); }
.vb-prod-card--curso .vb-prod-card__price small { color: var(--navy); opacity: .55; }

/* Tarjetas sin foto (Tienda de Formación): sin hueco de imagen, el precio
   se mueve al pie junto al CTA en vez de flotar sobre una imagen que no
   existe. Un poco de color para que no se vean tan planas: franja superior
   + fondo con un leve degradado sky, y el precio como píldora navy en vez
   de texto suelto. */
.vb-prod-card--no-img {
  background: linear-gradient(160deg, var(--sky-200) 0%, var(--sky-50) 75%);
  border-top: 6px solid var(--navy);
}
.vb-prod-card--no-img .vb-prod-card__body { padding-top: 20px; }
.vb-prod-card--no-img h2 { color: var(--navy-900); }
.vb-prod-card__footer--price {
  justify-content: space-between;
  margin-top: auto;
  border-top-color: var(--sky-200);
}
.vb-prod-card__price-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
  background: var(--navy);
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: 0 3px 10px rgba(15,46,69,.22);
}
.vb-prod-card__price-inline small,
.vb-prod-card__price-inline .woocommerce-Price-currencySymbol {
  font-size: .64rem;
  font-weight: 700;
  vertical-align: super;
  color: var(--sky-200);
  letter-spacing: 0;
}
.vb-prod-card__price-inline .price,
.vb-prod-card__price-inline .woocommerce-Price-amount {
  display: contents;
  font: inherit;
  color: inherit;
}

/* ------------------------------------------------------------------ */
/*  WOOCOMMERCE — Página de producto individual                         */
/* ------------------------------------------------------------------ */

/* Carrito y checkout heredan .vb-wc-page del wrapper de woocommerce.php */
.vb-wc-page {
  padding: 40px 0 96px;
  background: var(--paper-2);
  min-height: 60vh;
}

/* Página de producto custom */
.vb-sp-page {
  padding: 40px 0 96px;
  background: var(--sky-50);
  min-height: 70vh;
}

/* Enlace volver */
.vb-wc-back,
.vb-wc-back:visited {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 28px;
  transition: color .14s, gap .14s;
}
.vb-wc-back:hover { color: var(--navy); gap: 10px; }
.vb-wc-back svg { transition: transform .14s; flex-shrink: 0; }

/* ── Panel principal: split galería / info ── */
.vb-sp {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  background: #fff;
  border-radius: var(--r-xl);
  border-top: 3px solid var(--navy);
  box-shadow: 0 4px 20px rgba(15,46,69,.08), 0 18px 52px rgba(15,46,69,.07);
  overflow: hidden;
  margin-bottom: 32px;
}

/* Columna galería */
.vb-sp__gallery {
  background: linear-gradient(145deg, var(--sky-200) 0%, var(--sky-100) 55%, var(--sky-50) 100%);
  padding: 44px 40px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

/* Blobs decorativos en galería */
.vb-blob--sp1 { width: 300px; height: 300px; right: -80px; top: -90px; opacity: .55; }
.vb-blob--sp2 { width: 160px; height: 160px; left: -45px; bottom: 30px; opacity: .3; background: var(--sky-400); }

.vb-sp__img-wrap {
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 16px rgba(15,46,69,.12);
  position: relative;
  z-index: 1;
}

.vb-sp__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Placeholder sin foto */
.vb-sp__img-wrap--ph {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vb-sp__img-wrap--ph img {
  width: 55%;
  opacity: .25;
  object-fit: contain;
}

/* Thumbnails */
.vb-sp__thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.vb-sp__thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2.5px solid var(--sky-200);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15,46,69,.1);
  transition: border-color .16s, transform .16s;
  flex-shrink: 0;
}
.vb-sp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-sp__thumb.is-active,
.vb-sp__thumb:hover { border-color: var(--navy); transform: translateY(-2px); }

/* Columna info */
.vb-sp__info {
  padding: 44px 52px 48px;
  display: flex;
  flex-direction: column;
}

/* Título */
.vb-sp__title {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0 0 18px;
}

/* Precio */
.vb-sp__price { margin: 0 0 24px; }
.vb-sp__price .price {
  display: inline-flex;
  align-items: baseline;
  background: var(--sky);
  border: none;
  border-radius: var(--r-md);
  padding: 10px 22px;
}
.vb-sp__price .amount,
.vb-sp__price bdi {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--navy-900);
  letter-spacing: -.04em;
  line-height: 1;
}
.vb-sp__price .woocommerce-Price-currencySymbol {
  font-size: 1.1rem;
  font-weight: 800;
  vertical-align: super;
  margin-right: 2px;
  color: var(--navy-800);
}

/* Descripción corta */
.vb-sp__short-desc {
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.72;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  flex: 1;
}
.vb-sp__short-desc p { margin: 0; }

/* Label cantidad */
.vb-sp__qty-label {
  display: block;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

/* Fila qty + botón */
.vb-sp__qty-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

/* Stepper */
.vb-sp__qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}

.vb-sp__qty-btn {
  width: 40px;
  height: 100%;
  border: none;
  background: var(--sky-50);
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .14s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.vb-sp__qty-btn:hover { background: var(--sky-100); }

.vb-sp__qty-input {
  width: 52px;
  border: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  padding: .65em 0;
  background: #fff;
  -moz-appearance: textfield;
  appearance: textfield;
}
.vb-sp__qty-input::-webkit-outer-spin-button,
.vb-sp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; }

/* Botón añadir al carrito */
.vb-sp__btn-cart {
  flex: 1;
  min-width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  padding: .75em 2em;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background .18s, transform .14s, box-shadow .18s;
  letter-spacing: 0;
}
.vb-sp__btn-cart svg { flex-shrink: 0; }
.vb-sp__btn-cart:hover {
  background: var(--sky);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Sin stock */
.vb-sp__no-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  padding: 14px 18px;
  background: var(--sky-50);
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  margin: 0;
}
.vb-sp__no-stock svg { flex-shrink: 0; }

/* Trust badges */
.vb-wc-trust {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.vb-wc-trust li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .84rem;
  color: var(--muted);
  font-family: var(--font-head);
  font-weight: 600;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.vb-wc-trust li:last-child { border-bottom: none; }
.vb-wc-trust li svg { width: 17px; height: 17px; color: var(--sky); flex-shrink: 0; opacity: 1; }

/* Descripción completa */
.vb-sp__ext-desc {
  background: #fff;
  border-radius: var(--r-xl);
  border: 1.5px solid var(--line);
  padding: 36px 48px 44px;
}
.vb-sp__ext-desc-title {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 16px;
}
.vb-sp__ext-desc-body {
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.78;
  max-width: 72ch;
}
.vb-sp__ext-desc-body p { margin: 0 0 1em; }
.vb-sp__ext-desc-body p:last-child { margin-bottom: 0; }

/* ── Variaciones (producto variable) ── */
.vb-sp__info .variations {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.vb-sp__info .variations tr { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.vb-sp__info .variations .label label {
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.vb-sp__info .variations .value { position: relative; }
.vb-sp__info .variations select {
  width: 100%;
  appearance: none;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  padding: .6em 2.4em .6em .9em;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318466a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
  cursor: pointer;
  transition: border-color .14s;
}
.vb-sp__info .variations select:focus { outline: none; border-color: var(--sky); }
.vb-sp__info .reset_variations {
  font-family: var(--font-head);
  font-size: .75rem;
  color: var(--muted);
  display: inline-block;
  margin-top: 4px;
}
.vb-sp__info .single_variation_wrap { margin-top: 4px; }
.vb-sp__info .woocommerce-variation-price { margin-bottom: 16px; }
.vb-sp__info .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}
.vb-sp__info .woocommerce-variation-add-to-cart .quantity .qty {
  border: 1.5px solid var(--line-strong) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-head) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  padding: .65em .9em !important;
  width: 72px !important;
  text-align: center !important;
}
.vb-sp__info .single_add_to_cart_button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  padding: .75em 2em !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-md) !important;
  transition: background .18s, transform .14s, box-shadow .18s !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.vb-sp__info .single_add_to_cart_button:hover {
  background: var(--sky) !important;
  color: var(--navy-900) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── Recomendaciones ── */
.vb-sp-related {
  margin-top: 56px;
}
.vb-sp-related__head {
  margin-bottom: 28px;
}
.vb-sp-related__head h2 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 4px;
  letter-spacing: -.02em;
}
.vb-sp-related__head p {
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
}
.vb-sp-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 960px) { .vb-sp-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .vb-sp-related__grid { grid-template-columns: 1fr 1fr; gap: 14px; } }

/* Ocultar breadcrumb de WC */
.vb-sp-page .woocommerce-breadcrumb,
.vb-wc-page .woocommerce-breadcrumb { display: none; }

/* Carrito y checkout */
.woocommerce-cart .vb-wc-page,
.woocommerce-checkout .vb-wc-page { padding-top: 40px; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .vb-sp { grid-template-columns: 1fr; }
  .vb-sp__gallery { padding: 32px 28px 24px; }
  .vb-sp__info { padding: 32px 28px 36px; }
  .vb-sp__ext-desc { padding: 28px 24px 32px; }
}
@media (max-width: 480px) {
  .vb-sp__info { padding: 24px 20px 28px; }
  .vb-sp__qty-row { flex-direction: column; }
  .vb-sp__btn-cart { width: 100%; min-width: 0; }
}

/* ------------------------------------------------------------------ */
/*  CURSOS TEL/TDL                                                      */
/* ------------------------------------------------------------------ */

/* ── Sección "Cómo funciona" ── */
.vb-cursos-how {
  padding: 72px 0 64px;
  background: var(--paper-2);
}

.vb-cursos-how__tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}

.vb-cursos-how__track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 30px;
  border-radius: var(--r-xl);
  border: none;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .22s, transform .22s;
}
.vb-cursos-how__track:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Un degradado por itinerario, con más contraste entre ambos */
.vb-cursos-how__track:nth-child(1) { background: linear-gradient(145deg, #0d3b5e 0%, #2e6a8e 100%); }
.vb-cursos-how__track:nth-child(2) { background: linear-gradient(145deg, #3572a0 0%, #4d84b2 100%); }

.vb-cursos-how__track-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,.18);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.vb-cursos-how__track-icon svg { width: 24px; height: 24px; }

.vb-cursos-how__track h3 {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
}

.vb-cursos-how__track p {
  font-size: .9rem;
  color: rgba(255,255,255,.8);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.vb-cursos-how__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
}
.vb-cursos-how__link svg { width: 14px; height: 14px; transition: transform .15s; }
.vb-cursos-how__track:hover .vb-cursos-how__link svg { transform: translateX(4px); }

/* ── Track section ── */
.vb-cursos-track {
  padding: 80px 0 32px;
  background: var(--paper);
}
.vb-cursos-track--alt {
  background: var(--sky-50);
}

.vb-cursos-track__hdr {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 40px;
}

.vb-cursos-track__icon {
  width: 60px; height: 60px;
  background: linear-gradient(145deg, #0d3b5e 0%, #2e6a8e 100%);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.vb-cursos-track__icon svg { width: 28px; height: 28px; }

.vb-cursos-track--alt .vb-cursos-track__icon {
  background: linear-gradient(145deg, #3572a0 0%, #4d84b2 100%);
}

.vb-cursos-track__hdr h2 {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0;
  line-height: 1.15;
}

/* Grid básico + avanzado */
.vb-cursos-track__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 24px;
}

/* ── Tarjeta de curso ── */
.vb-cursos-card {
  background: #fff;
  border-radius: var(--r-xl);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .22s, transform .22s;
}
.vb-cursos-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Franja superior de color */
.vb-cursos-card::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--sky);
}
.vb-cursos-card--adv::before {
  background: var(--navy);
}

.vb-cursos-card__top {
  padding: 24px 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vb-cursos-card__level {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--navy);
  background: var(--sky-100);
  border: 1px solid var(--sky-200);
  border-radius: 999px;
  padding: 4px 12px;
}
.vb-cursos-card__level--adv {
  background: var(--navy-900);
  border-color: var(--navy-800);
  color: #fff;
}

.vb-cursos-card__top h3 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
  margin: 0;
}

.vb-cursos-card__top p {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.vb-cursos-card__features {
  list-style: none;
  margin: 0;
  padding: 0 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.vb-cursos-card__features li {
  font-size: .87rem;
  color: var(--navy-800);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}
.vb-cursos-card__features li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sky);
  flex-shrink: 0;
}
.vb-cursos-card--adv .vb-cursos-card__features li::before {
  background: var(--navy);
}

.vb-cursos-card__prereq {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 28px 16px;
  padding: 10px 14px;
  background: var(--sky-50);
  border: 1px solid var(--sky-200);
  border-radius: var(--r-sm);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}
.vb-cursos-card__prereq svg { flex-shrink: 0; color: var(--navy); opacity: .6; }

.vb-cursos-card__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 28px 20px;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
}
.vb-cursos-card__meta svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .6; }

.vb-cursos-card__footer {
  padding: 18px 28px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--paper-2);
}

.vb-cursos-card__price {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -.04em;
  line-height: 1;
}
.vb-cursos-card__price small {
  font-size: .9rem;
  font-weight: 700;
  color: var(--sky);
  letter-spacing: 0;
  vertical-align: super;
  margin-right: 2px;
}

.vb-cursos-card__footer .btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.vb-cursos-card__footer .btn svg { width: 16px; height: 16px; }

/* ── Pack inline en cada track ── */
.vb-cursos-track__pack {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 22px 28px;
  background: linear-gradient(145deg, #0d3b5e 0%, #2e6a8e 100%);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}

.vb-cursos-track--alt .vb-cursos-track__pack {
  background: linear-gradient(145deg, #3572a0 0%, #4d84b2 100%);
}

.vb-cursos-track__pack::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(157,201,227,.07);
  pointer-events: none;
}

.vb-cursos-pack__save {
  position: absolute;
  top: -1px; left: 28px;
  background: #1479aa;
  color: #fff;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 1px 12px 2px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}

.vb-cursos-track--alt .vb-cursos-pack__save { background: #0d8fba; }

.vb-cursos-track__pack-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 180px;
}
.vb-cursos-track__pack-info strong {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
}
.vb-cursos-track__pack-info span {
  font-size: .82rem;
  color: var(--sky-200);
  font-family: var(--font-head);
}

.vb-cursos-track__pack-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.vb-cursos-track__pack-price del {
  font-family: var(--font-head);
  font-size: .95rem;
  color: var(--sky-200);
  opacity: .6;
  font-weight: 700;
}
.vb-cursos-track__pack-price strong {
  font-family: var(--font-head);
  font-size: 1.9rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1;
}

.vb-cursos-track__pack .btn--light {
  white-space: nowrap;
  flex-shrink: 0;
}
.vb-cursos-track__pack .btn--light svg { width: 15px; height: 15px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .vb-cursos-track__row { grid-template-columns: 1fr; gap: 20px; }
  .vb-cursos-how__tracks { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .vb-cursos-track { padding: 56px 0 24px; }
  .vb-cursos-track__hdr h2 { font-size: 1.3rem; }
  .vb-cursos-card__top { padding: 20px 20px 16px; }
  .vb-cursos-card__features { padding: 0 20px 16px; }
  .vb-cursos-card__footer { padding: 16px 20px 20px; flex-wrap: wrap; }
  .vb-cursos-card__footer .btn { flex: 1; justify-content: center; }
  .vb-cursos-track__pack { padding: 24px 20px 20px; gap: 14px; }
  .vb-cursos-track__pack-price strong { font-size: 1.5rem; }
}

/* ================================================================== */
/*  BURBUJAS CON LEYENDA FIJA (¿Por qué se detecta tarde?)             */
/*  La burbuja va siempre acompañada de su texto debajo, sin           */
/*  interacción de por medio.                                         */
/* ================================================================== */
#deteccion .vb-bubbles { align-items: flex-start; }

.vb-bubble-caption {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.vb-bubble-caption__text {
  margin: 12px 0 0;
  max-width: 190px;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.55;
  text-align: center;
}

/* Cada burbuja envuelta en .vb-bubble-caption pasa a ser el único hijo   */
/* de su contenedor, así que el ciclo de tonos se aplica al contenedor.  */
#deteccion .vb-bubble-caption:nth-child(1) .vb-bubble-item { background: #4d84b2; border-radius: 60% 40% 55% 45% / 50% 58% 42% 50%; width: 158px; height: 158px; }
#deteccion .vb-bubble-caption:nth-child(2) .vb-bubble-item { background: #3572a0; border-radius: 42% 58% 48% 52% / 56% 44% 60% 40%; width: 164px; height: 164px; }
#deteccion .vb-bubble-caption:nth-child(3) .vb-bubble-item { background: #20608f; border-radius: 55% 45% 62% 38% / 40% 60% 46% 54%; width: 152px; height: 152px; }
#deteccion .vb-bubble-caption:nth-child(4) .vb-bubble-item { background: #3f7aaa; border-radius: 38% 62% 44% 56% / 62% 38% 54% 46%; width: 166px; height: 166px; }
#deteccion .vb-bubble-caption:nth-child(5) .vb-bubble-item { background: #265080; border-radius: 52% 48% 36% 64% / 44% 58% 50% 50%; width: 156px; height: 156px; }

/* ================================================================== */
/*  LÍNEA DEL TIEMPO CON BURBUJAS DESPLEGABLES (signos de alerta)      */
/*  Vertical siempre: línea a la izquierda con las burbujas alineadas. */
/* ================================================================== */
.vb-timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.vb-timeline::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
  z-index: 0;
}

.vb-timeline__item {
  position: relative;
  z-index: 1;
  border: none;
  background: none;
  margin: 0;
}

.vb-timeline__item > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 12px 0;
}
.vb-timeline__item > summary::-webkit-details-marker { display: none; }

.vb-timeline__dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.vb-timeline__dot svg { width: 24px; height: 24px; }

.vb-timeline__item:nth-child(6n+1) .vb-timeline__dot { background: #4d84b2; }
.vb-timeline__item:nth-child(6n+2) .vb-timeline__dot { background: #3572a0; }
.vb-timeline__item:nth-child(6n+3) .vb-timeline__dot { background: #20608f; }
.vb-timeline__item:nth-child(6n+4) .vb-timeline__dot { background: #3f7aaa; }
.vb-timeline__item:nth-child(6n+5) .vb-timeline__dot { background: #265080; }
.vb-timeline__item:nth-child(6n+6) .vb-timeline__dot { background: #1c3f6b; }

.vb-timeline__info { flex: 1; min-width: 0; }

.vb-timeline__tag {
  display: inline-block;
  background: var(--sky-100);
  border: 1px solid var(--sky-200);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .72rem;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.vb-timeline__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.vb-timeline__arrow {
  display: grid;
  place-items: center;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .25s;
}
.vb-timeline__arrow svg { width: 18px; height: 18px; transform: rotate(90deg); }
.vb-timeline__item[open] .vb-timeline__arrow { transform: rotate(180deg); }

.vb-timeline__body { padding: 0 0 22px 72px; }
.vb-timeline__body ul {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vb-timeline__body li { font-size: .92rem; color: var(--ink); line-height: 1.55; }

/* ------------------------------------------------------------------ */
/*  NOTICIAS — página dinámica alimentada por las entradas de WP       */
/* ------------------------------------------------------------------ */

.vb-news-body { padding: 56px 0 30px; scroll-margin-top: 90px; }

/* ---------- Destacada ---------- */
.vb-news-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 44px;
  box-shadow: var(--shadow-sm);
}

.vb-news-featured__media {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 11;
}
.vb-news-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.vb-news-featured:hover .vb-news-featured__media img { transform: scale(1.03); }
.vb-news-featured__media .ph { height: 100%; border-radius: 0; }

.vb-news-featured__badge {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--navy); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: .76rem;
  padding: 6px 13px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.vb-news-featured__badge svg { width: 13px; height: 13px; }

.vb-news-featured__body { padding: 12px 24px 12px 4px; }

.vb-news-featured__body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 12px 0; }
.vb-news-featured__body h2 a { color: var(--navy); text-decoration: none !important; }
.vb-news-featured__body h2 a:hover { color: var(--sky); }

.vb-news-featured__body p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 18px;
}

.vb-news-featured__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: .86rem; color: var(--muted);
  margin-bottom: 6px;
}

.vb-news-featured__more,
.vb-news-featured__more:visited,
.vb-news-featured__more:hover {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 800; font-size: .92rem; color: var(--navy);
  text-decoration: none !important;
  margin-top: 6px;
}
.vb-news-featured__more svg { width: 16px; height: 16px; transition: transform .14s ease; }
.vb-news-featured:hover .vb-news-featured__more svg { transform: translateX(3px); }

/* ---------- Rejilla de tarjetas ---------- */
.vb-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.vb-news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.vb-news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sky); }

.vb-news-card__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sky-100); }
.vb-news-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.vb-news-card:hover .vb-news-card__thumb img { transform: scale(1.05); }
.vb-news-card__thumb .ph { height: 100%; border-radius: 0; border: none; }

.vb-news-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }

.vb-news-card__body h3 { font-size: 1.1rem; line-height: 1.35; margin-bottom: 8px; }
.vb-news-card__body h3 a { color: var(--navy); text-decoration: none !important; }
.vb-news-card__body h3 a:hover { color: var(--sky); }

.vb-news-card__body p { color: var(--muted); font-size: .92rem; line-height: 1.55; margin-bottom: 16px; }

.vb-news-card__foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .82rem;
}
.vb-news-card__date { color: var(--muted); }
.vb-news-card__more,
.vb-news-card__more:visited,
.vb-news-card__more:hover {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-head); font-weight: 800; color: var(--navy);
}
.vb-news-card__more svg { width: 14px; height: 14px; transition: transform .14s ease; }
.vb-news-card:hover .vb-news-card__more svg { transform: translateX(3px); }

/* ---------- Paginación ---------- */
.vb-news-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line);
}
.vb-news-pagination__btn,
.vb-news-pagination__btn:visited {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 800; font-size: .92rem;
  color: var(--navy); background: #fff; border: 1.5px solid var(--line-strong);
  border-radius: 999px; padding: 10px 20px; text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease;
}
.vb-news-pagination__btn:hover { background: var(--sky-100); border-color: var(--sky); color: var(--navy); }
.vb-news-pagination__btn svg { width: 15px; height: 15px; }
.vb-news-pagination__prev { transform: rotate(180deg); }
.vb-news-pagination__status { color: var(--muted); font-size: .88rem; }

/* ---------- Estado vacío ---------- */
.vb-news-empty {
  text-align: center;
  max-width: 480px;
  margin: 20px auto 40px;
  padding: 48px 32px;
  background: var(--paper-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.vb-news-empty__icon {
  width: 60px; height: 60px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--sky-100); color: var(--navy);
  display: grid; place-items: center;
}
.vb-news-empty__icon svg { width: 28px; height: 28px; }
.vb-news-empty h2 { font-size: 1.3rem; margin-bottom: 8px; }
.vb-news-empty p { color: var(--muted); font-size: .95rem; margin-bottom: 18px; }

@media (max-width: 980px) {
  .vb-news-grid { grid-template-columns: repeat(2, 1fr); }
  .vb-news-featured { grid-template-columns: 1fr; padding: 16px; }
  .vb-news-featured__body { padding: 4px 8px 8px; }
}

@media (max-width: 620px) {
  .vb-news-grid { grid-template-columns: 1fr; }
  .vb-news-pagination { flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* ------------------------------------------------------------------ */
/*  ENTRADA INDIVIDUAL — single.php                                    */
/* ------------------------------------------------------------------ */

.vb-single-hero {
  position: relative;
  overflow: hidden;
  padding: 40px 0 44px;
  background: radial-gradient(120% 120% at 70% -10%, var(--sky-200), var(--sky-50) 55%, var(--paper));
  border-bottom: 1px solid var(--sky-200);
}
/* El contenedor de texto debe quedar por encima de las burbujas decorativas (absolute) */
.vb-single-hero .atelma-container { position: relative; z-index: 1; }

.vb-single-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  color: var(--muted);
  margin-bottom: 20px;
}
.vb-single-breadcrumb a { color: var(--muted); text-decoration: none !important; }
.vb-single-breadcrumb a:hover { color: var(--navy); }
.vb-single-breadcrumb__sep { color: var(--line-strong); }

.vb-single-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  max-width: none;
  margin: 0 0 20px;
}

.vb-single-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
  color: var(--muted);
}
.vb-single-hero__dot { color: var(--line-strong); }

.vb-single-media { margin-top: -34px; position: relative; z-index: 1; }
.vb-single-media img,
.vb-single-media .ph {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: block;
}
.vb-single-media .ph { height: 320px; }

.vb-single-body { padding: 56px 0 20px; }

/* ---------- Tipografía del contenido (Gutenberg) ---------- */
.vb-single-content { color: var(--ink); }
.vb-single-content > * + * { margin-top: 1.3em; }
.vb-single-content p { font-size: 1.08rem; line-height: 1.8; color: var(--ink); }
.vb-single-content h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-top: 2em; }
.vb-single-content h3 { font-size: 1.3rem; margin-top: 1.6em; }
.vb-single-content h4 { font-size: 1.12rem; margin-top: 1.4em; color: var(--navy); }
.vb-single-content ul,
.vb-single-content ol { padding-left: 1.3em; font-size: 1.05rem; line-height: 1.75; color: var(--ink); }
.vb-single-content li + li { margin-top: .45em; }
.vb-single-content a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.vb-single-content a:hover { color: var(--sky); }
.vb-single-content strong { color: var(--navy); }
.vb-single-content blockquote {
  border-left: 4px solid var(--sky);
  background: var(--paper-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 18px 24px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  font-style: normal;
}
.vb-single-content blockquote p { font-size: inherit; line-height: 1.55; }
.vb-single-content figure { margin: 0; }
.vb-single-content img { border-radius: var(--r-md); width: 100%; height: auto; display: block; }
.vb-single-content figcaption { text-align: center; font-size: .84rem; color: var(--muted); margin-top: 8px; }
.vb-single-content hr { border: none; border-top: 1px solid var(--line); margin: 2.4em 0; }
.vb-single-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vb-single-content table th,
.vb-single-content table td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.vb-single-content table th { background: var(--paper-2); font-family: var(--font-head); color: var(--navy); }
.vb-single-content pre {
  background: var(--navy-900); color: var(--sky-100); padding: 18px 20px; border-radius: var(--r-md);
  overflow-x: auto; font-size: .9rem; line-height: 1.6;
}
.vb-single-content code { background: var(--sky-100); color: var(--navy-700); padding: .15em .4em; border-radius: 5px; font-size: .92em; }
.vb-single-content pre code { background: none; color: inherit; padding: 0; }
.vb-single-content .wp-block-embed iframe { width: 100%; border-radius: var(--r-md); aspect-ratio: 16 / 9; height: auto; }
.vb-single-content .wp-block-button__link { text-decoration: none !important; }
.vb-single-pages { font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--muted); }

.vb-single-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 2.4em; padding-top: 1.6em; border-top: 1px solid var(--line);
}
.vb-single-tags__item,
.vb-single-tags__item:visited {
  background: var(--sky-100); color: var(--navy); font-family: var(--font-head); font-weight: 700;
  font-size: .82rem; padding: 6px 13px; border-radius: 999px; text-decoration: none !important;
}
.vb-single-tags__item:hover { background: var(--sky-200); color: var(--navy); }

@media (max-width: 620px) {
  .vb-single-media { margin-top: -20px; }
  .vb-single-media img, .vb-single-media .ph { max-height: 260px; }
}

/* ---------- Navegación anterior / siguiente ---------- */
.vb-single-nav { padding: 40px 0; border-top: 1px solid var(--line); background: var(--paper-2); }
.vb-single-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vb-single-nav__link {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px;
  text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease;
}
.vb-single-nav__link:hover { border-color: var(--sky); box-shadow: var(--shadow-sm); }
.vb-single-nav__link--next { text-align: right; align-items: flex-end; }
.vb-single-nav__label {
  font-family: var(--font-head); font-weight: 800; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.vb-single-nav__title { color: var(--navy); font-weight: 700; font-size: .98rem; line-height: 1.4; }
@media (max-width: 620px) { .vb-single-nav__grid { grid-template-columns: 1fr; } }

/* ---------- Relacionadas (reutiliza .vb-news-grid / .vb-news-card) ---------- */
.vb-single-related { padding: 64px 0; }

/* ---------- Comentarios ----------
   comments.php lo aporta el tema padre (Astra); se sobrescriben aquí
   sus clases (.ast-comment-*) para que se vean parte de ATELMA. */
.vb-single-comments { padding: 20px 0 64px; }
.vb-single-comments .comments-title,
.vb-single-comments .comment-reply-title { font-family: var(--font-head); font-size: 1.4rem; color: var(--navy); margin-bottom: 24px; }
.vb-single-comments .comment-reply-title small a { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }

.vb-single-comments ol.ast-comment-list,
.vb-single-comments ol.children,
.vb-single-comments ul.children { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.vb-single-comments ol.children,
.vb-single-comments ul.children { margin: 18px 0 0; padding-left: 30px; }

.vb-single-comments .ast-comment {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px;
}
.vb-single-comments .ast-comment-info { display: flex; align-items: flex-start; gap: 12px; }
.vb-single-comments .ast-comment-avatar-wrap img { border-radius: 50%; display: block; }
.vb-single-comments .ast-comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.vb-single-comments .fn { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-style: normal; }
.vb-single-comments cite a { color: var(--navy); text-decoration: none; }
.vb-single-comments .ast-comment-time,
.vb-single-comments .ast-comment-time a { font-size: .8rem; color: var(--muted); }
.vb-single-comments .ast-comment-content p { font-size: .96rem; line-height: 1.6; margin-top: 8px; color: var(--ink); }
.vb-single-comments .comment-reply-link {
  display: inline-block; margin-top: 10px; font-family: var(--font-head); font-weight: 700; font-size: .84rem; color: var(--navy);
}

.vb-single-comments .comment-respond,
.vb-single-comments #respond {
  margin-top: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px;
}
.vb-single-comments .comment-form p { margin-top: 14px; }
.vb-single-comments .comment-form label:not(.screen-reader-text) {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--navy); margin-bottom: 6px;
}
.vb-single-comments .comment-form fieldset { border: none; padding: 0; margin: 0; }
.vb-single-comments .comment-form input[type="text"],
.vb-single-comments .comment-form input[type="email"],
.vb-single-comments .comment-form input[type="url"],
.vb-single-comments .comment-form textarea {
  width: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 12px 14px; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: #fff;
}
.vb-single-comments .comment-form textarea { min-height: 130px; resize: vertical; }
.vb-single-comments .comment-form input:focus,
.vb-single-comments .comment-form textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--navy); }
.vb-single-comments .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--muted); }
.vb-single-comments .form-submit { margin-top: 18px; }
.vb-single-comments .form-submit input[type="submit"] {
  font-family: var(--font-head); font-weight: 800; background: var(--navy); color: #fff; border: none;
  border-radius: 999px; padding: .92em 1.6em; cursor: pointer; transition: background .15s ease;
}
.vb-single-comments .form-submit input[type="submit"]:hover { background: var(--navy-800); }


/* ------------------------------------------------------------------ */
/*  PROGRAMA DE EXPERTO — páginas imprimibles (Evaluación /            */
/*  Intervención). Cada una fija su propio color de identidad con      */
/*  --accent / --accent-dark / --accent-tint; el resto del CSS de aquí */
/*  abajo bebe de esas variables, así que sirve para las dos páginas.  */
/* ------------------------------------------------------------------ */

/* Mismos colores que ya distinguen Evaluación/Intervención en /expertos/
   (.vb-exp-pick__item--eval/--int, .vb-cal__tab--eval/--int), no los
   naranja/ámbar de las portadas de los PDF originales. */
.vb-programa--eval { --accent: #0d3b5e; --accent-dark: #082a44; --accent-tint: #e6edf3; }
.vb-programa--int  { --accent: #1a5276; --accent-dark: #123a56; --accent-tint: #e7eef3; }

/* ---------- Portada ---------- */
.vb-programa__cover {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--accent) 0%, var(--navy) 72%);
  color: #fff; padding: 88px 0 56px; text-align: center;
}
.vb-programa__cover-blob { background: #fff; }
.vb-programa__cover-blob--1 { width: 320px; height: 320px; top: -110px; right: -80px; opacity: .12; border-radius: 60% 40% 52% 48% / 48% 56% 44% 52%; }
.vb-programa__cover-blob--2 { width: 220px; height: 220px; bottom: -90px; left: -60px; opacity: .10; border-radius: 44% 56% 60% 40% / 54% 46% 50% 50%; }
.vb-programa__cover-blob--3 { width: 140px; height: 140px; top: 30%; left: 8%; opacity: .10; border-radius: 55% 45% 42% 58% / 50% 60% 40% 50%; }

.vb-programa__cover-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.5);
  color: #fff; margin-bottom: 18px; position: relative;
}
.vb-programa__cover-badge svg { width: 30px; height: 30px; }

.vb-programa__cover-kicker {
  font-family: var(--font-head); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  font-size: .82rem; color: rgba(255,255,255,.85); margin-bottom: 10px; position: relative;
}
.vb-programa__cover h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); margin: 0 0 14px; position: relative; }
.vb-programa__cover-sub { color: rgba(255,255,255,.85); font-size: 1.05rem; line-height: 1.6; margin-bottom: 22px; max-width: 620px; margin-left: auto; margin-right: auto; position: relative; }
.vb-programa__cover-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; position: relative; }
.vb-programa__cover-tags .vb-tag { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.vb-programa__cover-tags .vb-dot { background: #fff; }
.vb-programa__print { margin: 0 auto; position: relative; }
.vb-programa__print svg { transform: rotate(180deg); }

/* Reutiliza .vb-info-bar (ya usado en /expertos/) pero con la línea
   superior/inferior teñida del color del programa. */
.vb-programa__info-bar::before, .vb-programa__info-bar::after { background: var(--accent) !important; }

.vb-programa__body { max-width: 900px; padding-top: 52px; padding-bottom: 84px; }

.vb-programa__section { margin-bottom: 56px; }
.vb-programa__section h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.5rem; color: var(--navy); margin-bottom: 22px;
}
.vb-programa__section h2 svg {
  width: 22px; height: 22px; flex-shrink: 0; padding: 8px; box-sizing: content-box;
  background: var(--accent-tint); color: var(--accent-dark); border-radius: 50%;
}
.vb-programa__section h3 { font-size: 1.15rem; color: var(--navy-800); margin: 28px 0 14px; }
.vb-programa__section h4 { color: var(--accent-dark); margin: 0 0 10px; text-transform: uppercase; letter-spacing: .03em; font-size: .82rem; }
.vb-programa__section p { line-height: 1.7; margin-bottom: 14px; color: var(--ink); }
.vb-programa__section > p:first-of-type { font-size: 1.05rem; }

/* ---------- Tarjetas de contacto / formato ---------- */
.vb-programa__cards { display: flex; flex-wrap: wrap; gap: 18px; margin: 20px 0 8px; }
.vb-programa__cards--3 > .vb-programa__card { flex: 1 1 220px; }
.vb-programa__card {
  flex: 1 1 260px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: var(--r-lg); padding: 20px 22px; box-shadow: 0 4px 16px rgba(15,46,69,.05);
}
.vb-programa__card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-dark);
  margin-bottom: 10px;
}
.vb-programa__card-icon svg { width: 18px; height: 18px; }
.vb-programa__card strong { display: block; font-family: var(--font-head); color: var(--navy); margin-bottom: 6px; }
.vb-programa__card p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.55; }

/* ---------- Precio destacado ---------- */
.vb-programa__price-grid { display: flex; flex-wrap: wrap; gap: 16px; margin: 18px 0 24px; }
.vb-programa__price-card {
  flex: 1 1 200px; text-align: center; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 18px;
}
.vb-programa__price-card--accent { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.03); }
.vb-programa__price-label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .8; margin-bottom: 8px; }
.vb-programa__price-value { display: block; font-family: var(--font-head); font-weight: 900; font-size: 1.7rem; }
.vb-programa__price-note { display: block; font-size: .8rem; opacity: .85; margin-top: 4px; }

/* ---------- Tablas ---------- */
.vb-programa__table-wrap { overflow-x: auto; margin-bottom: 8px; border-radius: var(--r-lg); }
.vb-programa__table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: .93rem; }
.vb-programa__table th, .vb-programa__table td { border: 1px solid var(--line); padding: 12px 16px; text-align: left; vertical-align: top; }
.vb-programa__table thead th { background: var(--accent); color: #fff; font-family: var(--font-head); }
.vb-programa__table tbody tr:nth-child(even) { background: var(--paper-2); }
.vb-programa__table tbody tr td:first-child { font-weight: 700; color: var(--navy); white-space: nowrap; }

.vb-programa__note { font-size: .9rem; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }

/* ---------- Objetivos / competencias en dos columnas ---------- */
.vb-programa__two-col { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 12px; }
.vb-programa__two-col > div { flex: 1 1 300px; }
.vb-programa__two-col .vb-form-req__list { gap: 10px; }
.vb-programa__two-col .vb-form-req__list li { align-items: flex-start; }
.vb-programa__two-col .vb-asoc__check { background: var(--accent-tint); color: var(--accent-dark); flex-shrink: 0; }

/* ---------- Requisitos de acceso (reutiliza .vb-form-req) ---------- */
.vb-programa__section--req { margin-bottom: 40px; }
.vb-programa__req-box { max-width: none; margin: 0; }
.vb-programa__req-box .vb-req-bubble { background: var(--accent); }
.vb-programa__req-box .vb-asoc__check { background: #fff; color: var(--accent-dark); }

/* ---------- Calendario real (rejilla mes a mes) ---------- */
.vb-programa__cal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: 20px 0 26px;
}
.vb-programa__cal-month {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 10px 16px;
}
.vb-programa__cal-month h4 {
  margin: 0 0 10px; font-size: .78rem; text-align: center; text-transform: uppercase;
  letter-spacing: .03em; color: var(--navy); font-family: var(--font-head); font-weight: 800;
}
.vb-programa__cal-dow, .vb-programa__cal-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.vb-programa__cal-dow span { font-size: .6rem; text-align: center; color: var(--muted); font-weight: 700; }
.vb-programa__cal-days span {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: .66rem; border-radius: 50%; color: var(--muted);
}
.vb-programa__cal-days span.is-empty { visibility: hidden; }
.vb-programa__cal-days span.is-class { color: #fff; font-weight: 800; }

.vb-programa__cal-c1 { background: #4d84b2; }
.vb-programa__cal-c2 { background: #3572a0; }
.vb-programa__cal-c3 { background: #20608f; }
.vb-programa__cal-c4 { background: #3f7aaa; }
.vb-programa__cal-c5 { background: #265080; }
.vb-programa__cal-c6 { background: #1c3f6b; }

.vb-programa__cal-note {
  font-size: .88rem; color: var(--muted); line-height: 1.6;
  background: var(--paper-2); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 12px 16px; margin-bottom: 20px;
}
.vb-programa__cal-note strong { color: var(--navy); }

.vb-programa__cal-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.vb-programa__cal-legend li { display: flex; align-items: baseline; gap: 12px; font-size: .9rem; }
.vb-programa__cal-dot {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 30px; height: 20px; padding: 0 6px; border-radius: 999px; color: #fff;
  font-size: .64rem; font-weight: 800; font-family: var(--font-head);
}
.vb-programa__cal-legend-title { font-weight: 700; color: var(--navy); flex: 1 1 160px; min-width: 0; }
.vb-programa__cal-legend-dates { color: var(--muted); font-size: .82rem; }

@media (max-width: 700px) {
  .vb-programa__cal-grid { grid-template-columns: repeat(2, 1fr); }
  .vb-programa__cal-legend li { flex-wrap: wrap; }
  .vb-programa__cal-legend-dates { flex-basis: 100%; margin-left: 42px; }
}

/* ---------- Personal académico ---------- */
.vb-programa__staff-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.vb-programa__staff-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px 8px 8px; font-size: .88rem; color: var(--navy); font-weight: 600;
}
.vb-programa__staff-chip svg {
  width: 26px; height: 26px; padding: 5px; box-sizing: content-box; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-dark); flex-shrink: 0;
}

.vb-programa__footnote { text-align: center; color: var(--muted); font-size: .86rem; margin-top: 40px; }

/* Los módulos usan tal cual el ciclo de 6 azules de .vb-form-mod ya
   definido para /expertos/ — misma estética, sin recolorear con el
   acento del programa. */

@media (max-width: 700px) {
  .vb-programa__price-card--accent { transform: none; }
}

/* ---------- Impresión / exportar a PDF ---------- */
@page { size: A4; margin: 16mm 14mm; }
@media print {
  .no-print,
  .atelma-hd, .atelma-ft, #a11y-toolbar, #ast-scroll-top { display: none !important; }

  .vb-programa__cover {
    background: var(--accent) !important; color: #fff !important;
    padding: 28px 0 22px !important;
  }
  .vb-programa__cover-blob { display: none !important; }
  .vb-blob:not(.vb-programa__cover-blob) { display: none !important; }

  body, .vb-programa { background: #fff !important; }
  /* La barra de datos rápidos lleva texto blanco sobre fondo azul marino:
     si se fuerza el fondo a blanco (como el resto de la página) el texto
     desaparece. Se mantiene su degradado oscuro también en impresión. */
  .vb-info-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .vb-info-bar::before, .vb-info-bar::after { display: none !important; }

  /* En impresión, flex/grid a veces cortan mal entre páginas — todo lo
     que pueda contener texto largo se apila en una sola columna. */
  .vb-programa__two-col, .vb-programa__cards, .vb-programa__price-grid,
  .vb-programa__staff-grid { display: block !important; }
  .vb-programa__two-col > div, .vb-programa__card, .vb-programa__price-card,
  .vb-programa__staff-chip { width: 100% !important; margin-bottom: 12px; transform: none !important; }

  /* La rejilla del calendario sí funciona bien en impresión, pero a 3
     columnas: a 4 queda muy apretada en el ancho real de una A4. */
  .vb-programa__cal-grid { grid-template-columns: repeat(3, 1fr) !important; }

  .vb-form-mod, .vb-programa__card, .vb-programa__price-card,
  .vb-programa__cal-month, .vb-form-req__list li, .vb-programa__cal-legend li, tr {
    break-inside: avoid;
  }
  .vb-programa__section h2 { break-after: avoid; }
  .vb-programa__section { margin-bottom: 30px; }
  a { color: var(--navy) !important; text-decoration: none !important; }
}

/* ------------------------------------------------------------------ */
/*  TEXTOS LEGALES — page-legal.php (aviso legal, privacidad)           */
/* ------------------------------------------------------------------ */

.vb-legal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.vb-legal-tabs__item {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--sky-200);
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none !important;
  transition: background .2s, color .2s, border-color .2s;
}
.vb-legal-tabs__item:hover { border-color: var(--navy); }
.vb-legal-tabs__item.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

.vb-legal__grid { display: grid; gap: 32px; }

/* Índice: arriba en móvil, columna fija a la izquierda en escritorio */
.vb-legal-toc {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 22px;
  align-self: start;
}
.vb-legal-toc__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.vb-legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: legal-toc; }
.vb-legal-toc li { counter-increment: legal-toc; display: flex; gap: 10px; font-size: .94rem; line-height: 1.4; }
.vb-legal-toc li + li { margin-top: 10px; }
.vb-legal-toc li::before {
  content: counter(legal-toc);
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sky-100);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .75rem;
  display: grid; place-items: center;
}
.vb-legal-toc a { color: var(--navy); text-decoration: none; }
.vb-legal-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vb-legal-toc__help {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .88rem;
}
.vb-legal-toc__help p { margin: 0 0 4px; color: var(--muted); }
.vb-legal-toc__help a { color: var(--navy); font-weight: 700; word-break: break-all; }

/* Texto */
.vb-legal__content { min-width: 0; max-width: 760px; }
.vb-legal__content h2 {
  scroll-margin-top: 110px; /* que la cabecera fija no tape el título al saltar desde el índice */
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
}
.vb-legal__content h2:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.vb-legal__content h3 { color: var(--navy); }
.vb-legal__content h5 { font-size: 1rem; color: var(--navy); margin-top: 1.2em; }
.vb-legal__content p,
.vb-legal__content ul { font-size: 1rem; }

/* "Información básica sobre Protección de Datos": ficha resumen */
.vb-legal__content ul.vb-legal-summary {
  list-style: none;
  margin-left: 0;
  margin-right: 0;
  padding: 6px 22px;
  background: var(--sky-50);
  border: 1px solid var(--sky-200);
  border-radius: var(--r-md);
}
.vb-legal__content .vb-legal-summary li { padding: 12px 0; margin: 0; }
.vb-legal__content .vb-legal-summary li + li { border-top: 1px solid var(--sky-200); }
.vb-legal__content .vb-legal-summary strong {
  display: block;
  font-family: var(--font-head);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

@media (min-width: 960px) {
  .vb-legal__grid { grid-template-columns: 280px minmax(0, 1fr); gap: 56px; }
  .vb-legal__grid--single { grid-template-columns: minmax(0, 1fr); }
  .vb-legal-toc { position: sticky; top: 110px; max-height: calc(100vh - 130px); overflow-y: auto; }
  .vb-legal__content .vb-legal-summary strong { display: inline; font-size: .8rem; margin-right: 6px; }
}