/* Estilos para separadores diagonales */
.diagonal-separator {
  width: 100%;
  height: 120px;
  display: block;
  overflow: hidden;
  pointer-events: none; /* no intercepta eventos */
}

@media (max-width: 768px) {
  .diagonal-separator {
    height: 64px;
  }
}

/* Ajuste para que no cree espacios extra entre secciones */
.diagonal-separator svg {
  display: block;
}

.diagonal-separator--blue {
  /* Igual que el separador rojo para mayor presencia visual */
  height: 120px;
  /* Forzar full-bleed (extender desde el lado izquierdo al derecho del viewport)
     incluso si el elemento está dentro de un contenedor centrado. */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  z-index: 0;
}

.diagonal-separator--red { height: 120px; }

/* Ajustes finos para que no oculten contenido en móviles */
.diagonal-separator.responsive-hide-mobile { display: block; }
@media (max-width: 640px) {
  .diagonal-separator { height: 56px; }
  .diagonal-separator.responsive-hide-mobile { display: none; }
}

/* Degradados suaves y transición para que se integren mejor */
.diagonal-separator svg path {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.diagonal-separator--red svg path { fill: url(#grad-red); }
.diagonal-separator--blue svg path { fill: url(#grad-blue); }

/* Triángulo: no bloquear en móviles */
.decorative-triangle { transition: transform 0.4s ease, opacity 0.4s ease; }
@media (max-width: 640px) {
  .decorative-triangle { transform: scale(0.6) translateY(20px); opacity: 0.6; }
}

.decorative-triangle {
  width: 120px;
  height: 120px;
  overflow: hidden;
}

.decorative-triangle svg { display:block; }