/* Paso del oso a «Ejemplos por ámbito» (23-10-2026).
   El borde superior de Ejemplos ya no es una línea dura: un fundido de la imagen del oso al negro de la sección, en una
   franja de unos 28 vh con curva suave (16 paradas). Vive en #trabajos::after, por encima de la sección: solo se ve
   mientras Ejemplos sube sobre el hero; cuando la sección ocupa la pantalla queda fuera de la vista. Mismo ritmo, mismo
   título y mismas tarjetas. Con «reducir movimiento» es el mismo fundido, quieto. */
html body.home-page #trabajos {
  --pg-ejemplos-rgb: 11 13 15; /* el fondo de la sección en escritorio */
  border-top-color: transparent !important;
  box-shadow: none !important;
}
html body.home-page #trabajos::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(9rem, 28vh, 20rem);
  pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--pg-ejemplos-rgb) / 0.0000) 0%, rgb(var(--pg-ejemplos-rgb) / 0.0022) 6.25%, rgb(var(--pg-ejemplos-rgb) / 0.0161) 12.5%, rgb(var(--pg-ejemplos-rgb) / 0.0488) 18.75%, rgb(var(--pg-ejemplos-rgb) / 0.1035) 25%, rgb(var(--pg-ejemplos-rgb) / 0.1800) 31.25%, rgb(var(--pg-ejemplos-rgb) / 0.2752) 37.5%, rgb(var(--pg-ejemplos-rgb) / 0.3840) 43.75%, rgb(var(--pg-ejemplos-rgb) / 0.5000) 50%, rgb(var(--pg-ejemplos-rgb) / 0.6160) 56.25%, rgb(var(--pg-ejemplos-rgb) / 0.7248) 62.5%, rgb(var(--pg-ejemplos-rgb) / 0.8200) 68.75%, rgb(var(--pg-ejemplos-rgb) / 0.8965) 75%, rgb(var(--pg-ejemplos-rgb) / 0.9512) 81.25%, rgb(var(--pg-ejemplos-rgb) / 0.9839) 87.5%, rgb(var(--pg-ejemplos-rgb) / 0.9978) 93.75%, rgb(var(--pg-ejemplos-rgb) / 1.0000) 100%);
}
@media (max-width: 900px) {
  html body.home-page #trabajos {
    --pg-ejemplos-rgb: 13 15 16; /* el fondo de la sección en móvil */
    /* En móvil la sección recortaba en los dos ejes; ahora solo en horizontal (el carrusel de tarjetas), para que el
       fundido de encima se vea. */
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}