/* Esta hoja de estilos define las reglas CSS generales para las páginas individuales del sitio web. */

/* Fila hero con fondo amarillo "en pico" */
.hero-groc {
	position: relative;
	z-index: 1;
	overflow: visible;      /* para que el pseudo elemento pueda sobresalir */

    /* La forma amarilla */
    &::before {
        content: "";
        position: absolute;
        width: 100%;
        top: -50px;
        height: clamp(600px, 31.25vw, 800px);
        background-color: #f2b20a; /* amarillo */
        z-index: -1;
        clip-path: polygon(
            100% 70%,  /* esquina dcha borde “medio” */
            50%  80%,  /* pico inferior */
            0   70%,  /* esquina izq borde “medio” */
            0   0,    /* sup. izq */
            50% 10%,  /* pico superior */
            100% 0    /* sup. dcha */
        );
    }
}