/* Migas de pan — primer elemento del hero de las páginas interiores, justo encima de la etiqueta (eyebrow).
   Misma posición y tamaño que el antiguo enlace «← Todas las soluciones»: .8rem, gris de textos secundarios, blanco al
   pasar el cursor. La página actual no se muestra (la etiqueta cumple esa función); su nombre va en data-current y
   docs/preparar-netlify.cjs lo usa para el BreadcrumbList (JSON-LD) del paquete de producción.
   Caja fija de 22px + 35px de separación = 57px: el valor que compensan las páginas que antes no tenían enlace. */
.breadcrumb{margin:0 0 35px;font-size:.8rem;line-height:22px}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}
.breadcrumb li{display:flex;align-items:center;min-height:22px}
.breadcrumb a{display:inline-flex;align-items:center;gap:6px;color:#94a3b9;text-decoration:none;transition:color .25s}
.breadcrumb a:focus-visible{outline:2px solid #00b0d1;outline-offset:4px;border-radius:4px}
.breadcrumb-home{flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.breadcrumb-sep{margin:0 10px;color:#697b98}
@media(hover:hover){.breadcrumb a:hover{color:#fff}}
/* Celular y tablet: área de toque de 44px sin cambiar la posición visual (el margen negativo absorbe el alto extra). */
@media(max-width:900px){.breadcrumb a{min-height:44px;margin-block:-11px}}

/* Transformación Digital: mismo alto y separación que tenía su enlace (.td-back, en línea dentro de una línea de 28px). */
.td-hero .breadcrumb{padding-top:4px;margin-bottom:38px}
@media(max-width:700px){.td-hero .breadcrumb{margin-bottom:30px}}

/* Soluciones, Sectores y Globalvoip no tenían enlace: la ruta no ocupa alto (margen superior de -57px), así que la
   etiqueta, el título y los botones quedan donde estaban; la ruta usa el espacio libre sobre ellos. */
.portfolio-hero-copy>.breadcrumb,.sx-hero .breadcrumb,.gv-about-hero-copy>.breadcrumb{margin-top:-57px}
/* Globalvoip en celular y tablet vertical: el texto nunca empieza sobre la banda de la foto (globalvoip-page.css), así
   que ahí la ruta sí ocupa su lugar y el texto baja lo necesario (hasta 57px). */
@media(max-width:700px),(max-width:1024px) and (orientation:portrait){.gv-about-hero-copy>.breadcrumb{margin-top:0}}

/* Hablemos: el texto y el formulario bajan juntos 57px (el formulario no está en el mismo bloque que la ruta). */
@media(min-width:1025px){.hb-hero-grid>.hb-panel{margin-top:57px}}

/* Entrada: la misma animación que la etiqueta de cada hero (Globalvoip y Hablemos; Soluciones, Sectores y las páginas
   de solución en interior-hero-motion.css; Transformación Digital en td-page.css). Sin .reveal (docs/movimiento.md). */
@media(prefers-reduced-motion:no-preference){
  .gv-about-hero-copy>.breadcrumb{animation:gv-hero-lift .8s cubic-bezier(.25,.8,.35,1) .15s backwards}
  .hb-hero-copy>.breadcrumb{animation:hb-lift .8s cubic-bezier(.25,.8,.35,1) .1s backwards}
}