/* 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 */
        );
    }

    
    &.hero-groc--alt::before {
        clip-path: polygon(
            0   15%,  /* borde izq sup */
            50% 0,    /* pico superior */
            100% 15%, /* borde dcha sup */
            100% 85%, /* borde dcha inf */
            50% 60%, /* pico inferior */
            0   85%   /* borde izq inf */
        )
    }
    
}

.social-links {
    display: flex;
    gap: 10px;

    .social-link {
        color: var(--primary);
        font-size: 25px;
        transition: var(--transition);

        &:hover {
            color: var(--secondary);
        }
    }
}