/* Título de sección (centrado entre dos líneas naranjas que se desvanecen) y línea naranja. */

@layer componentes {
  .linea-acento {
    height: 1px;
    margin: var(--espacio-5) 0;
    border: 0;
    background: linear-gradient(to right, var(--color-acento-vivo), var(--color-acento), var(--color-acento-vivo));
  }

  .titulo-seccion {
    display: flex;
    gap: var(--espacio-5);
    align-items: center;
    margin-bottom: var(--espacio-6);
    text-align: center;
  }

  .titulo-seccion::before,
  .titulo-seccion::after {
    content: "";
    flex: 1;
    min-width: var(--espacio-5);
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-acento) 70%);
  }

  .titulo-seccion::after {
    background: linear-gradient(to right, var(--color-acento) 30%, transparent);
  }

  .titulo-seccion__texto {
    flex: 0 1 auto;
    margin: 0;
    color: var(--color-marino);
    font-size: var(--paso-3);
    font-weight: 600;
  }
}