/* =========================================
   YELOSE TECH — PÁGINA EQUIPO
   Estilos específicos de la página de equipo.
   ========================================= */

/* =========================================
   TRABAJO
   ========================================= */

body > main > section[data-section="trabajo"] {
    display: grid;
    padding: 8% var(--content-padding-inline);
    row-gap: 2rem;
    justify-items: center;
    text-align: center;
    background-color: var(--color-white);
}

body > main > section[data-section="trabajo"] > h3 {
    width: 100%;
    max-width: 55rem;
    font-weight: 200;
}

body > main > section[data-section="trabajo"] > div {
    display: grid;
    width: 100%;
    max-width: 65rem;
    row-gap: 1rem;
}

body > main > section[data-section="trabajo"] > div > p {
    font-weight: 300;
    line-height: 1.7;
    text-align: center;
}

body > main > section:first-of-type p {
    text-align: center;
}

/* =========================================
   EQUIPO — constelación tecnológica (contenido)
   ========================================= */

/* Menú Equipo: círculo activo = anillo (borde, centro transparente) */
body > nav > ul > li > a[aria-current="page"]::before {
    background-color: transparent;
    border-color: var(--color-secondary-500);
}

body > main > section[data-section="equipo"] {
    display: grid;
    position: relative;
    width: 100%;
    padding: calc(4% + 3.25rem) var(--content-padding-inline) calc(4% + 7.75rem);
    row-gap: 2.5rem;
    justify-items: center;
    text-align: center;
    color: var(--color-white);
    background-color: transparent;
    background-image: linear-gradient(var(--color-secondary-500),
            var(--color-secondary-500));
    background-repeat: no-repeat;
    background-size: 100% calc(100% - 15.25rem);
    background-position: center center;
}

body > main > section[data-section="equipo"] > h2 {
    position: relative;
    z-index: 4;
}

body > main > section[data-section="equipo"] > p[data-closing] {
    position: relative;
    z-index: 4;
    width: 100%;
    font-weight: 300;
    text-align: center;
    color: var(--color-white);
}

/* Conjunto Técnico + Comercial como un único bloque centrado */
body > main > section[data-section="equipo"] > div:not([data-wave]) {
    display: flex;
    position: relative;
    z-index: 4;
    flex-wrap: nowrap;
    justify-content: unsafe center;
    align-items: start;
    column-gap: 3.25rem;
    width: 100%;
    min-width: 0;
}

body > main > section[data-section="equipo"] [data-team] {
    display: grid;
    width: auto;
    flex: 0 0 auto;
    row-gap: 1.35rem;
    justify-items: center;
}

body > main > section[data-section="equipo"] [data-team] > h3 {
    font-weight: 200;
    color: var(--color-white);
}

/* Título → red de personas (sin conexiones desde el título) */
body > main > section[data-section="equipo"] [data-constellation] {
    display: grid;
    width: auto;
    justify-items: center;
    row-gap: 0.65rem;
}

/* Personas en horizontal — columnas al contenido, sin forzar 1fr */
body > main > section[data-section="equipo"] [data-members] {
    display: grid;
    width: auto;
    align-items: start;
    justify-items: center;
}

body > main > section[data-section="equipo"] [data-constellation="pair"] > [data-members] {
    grid-template-columns: auto auto auto;
    column-gap: 0.35rem;
}

body > main > section[data-section="equipo"] [data-constellation="network"] > [data-members] {
    grid-template-columns: auto auto auto auto auto;
    column-gap: 0.25rem;
}

body > main > section[data-section="equipo"] article {
    display: grid;
    row-gap: 0.6rem;
    justify-items: center;
}

body > main > section[data-section="equipo"] article img {
    display: block;
    width: 7.25rem;
    height: 7.25rem;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center top;
    background-color: var(--color-white);
    border: 0.125rem solid var(--color-white);
    border-radius: 50%;
    overflow: hidden;
}

body > main > section[data-section="equipo"] article .commercial-person-icon {
    display: block;
    width: 7.25rem;
    height: 7.25rem;
    aspect-ratio: 1;
    padding: 1.35rem;
    background-color: var(--color-white);
    border: 0.125rem solid var(--color-white);
    border-radius: 50%;
    overflow: hidden;
}

body > main > section[data-section="equipo"] article > h4 {
    font-weight: 200;
}

body > main > section[data-section="equipo"] article > p {
    max-width: 9rem;
    font-size: calc(var(--font-size) * 0.875);
    font-weight: 300;
    color: var(--color-white);
}

/* Enlace entre personas */
body > main > section[data-section="equipo"] [data-link] {
    display: block;
    position: relative;
    align-self: start;
    width: 4.5rem;
    height: 0.2rem;
    margin-top: calc(3.625rem - 0.1rem);
    /* Línea hasta el borde: solapa el trazo del anillo (no el hueco interior) */
    background-color: transparent;
    background-image: linear-gradient(var(--color-white), var(--color-white));
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(100% - 1rem) 100%;
}

body > main > section[data-section="equipo"] [data-constellation="network"] [data-link] {
    width: 2.6rem;
}

body > main > section[data-section="equipo"] [data-link]::before,
body > main > section[data-section="equipo"] [data-link]::after {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 0.35rem;
    height: 0.35rem;
    background-color: transparent;
    border: 0.2rem solid var(--color-white);
    border-radius: 50%;
    transform: translateY(-50%);
    content: "";
}

body > main > section[data-section="equipo"] [data-link]::before {
    left: -0.15rem;
}

body > main > section[data-section="equipo"] [data-link]::after {
    right: -0.15rem;
}

/* Comercial: Annabella / Dulce más abajo; nodos a media altura entre Olivia y laterales */
body > main > section[data-section="equipo"] [data-pos="a"],
body > main > section[data-section="equipo"] [data-pos="b"] {
    margin-top: 2rem;
}

body > main > section[data-section="equipo"] [data-link][data-dir="up"] {
    margin-top: calc(3.625rem + 1rem);
    transform: rotate(-28deg);
    transform-origin: right center;
}

body > main > section[data-section="equipo"] [data-link][data-dir="down"] {
    margin-top: calc(3.625rem + 1rem);
    transform: rotate(28deg);
    transform-origin: left center;
}

/* ARRIBA — capa clara */
body > main > section[data-section="equipo"] > div[data-wave="top"] {
    position: absolute;
    top: 1.5rem;
    bottom: auto;
    left: 0;
    z-index: 1;
    width: 112%;
    height: 8rem;
    background-color: var(--color-secondary-light);
    transform: translate(-7rem, -2.2rem);
    clip-path: var(--onda-superior-clara);
    pointer-events: none;
}

/* ARRIBA — capa oscura */
body > main > section[data-section="equipo"]::before {
    position: absolute;
    top: 1rem;
    bottom: auto;
    left: 0;
    z-index: 2;
    width: 105%;
    height: 8rem;
    background-color: var(--color-secondary-800);
    transform: translate(-2rem, -1.2rem);
    clip-path: var(--onda-superior-oscura-alargada);
    pointer-events: none;
    content: "";
}

/* ARRIBA — capa verde */
body > main > section[data-section="equipo"]::after {
    position: absolute;
    top: 1rem;
    bottom: auto;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 8.5rem;
    background-color: var(--color-secondary-500);
    transform: none;
    clip-path: var(--onda-superior-clara);
    pointer-events: none;
    content: "";
}

/* ABAJO — capa clara */
body > main > section[data-section="equipo"] > div[data-wave="bottom"] {
    position: absolute;
    bottom: 3rem;
    left: 0;
    z-index: 1;
    width: 112%;
    height: 8rem;
    background-color: var(--color-secondary-light);
    transform: translate(-7rem, 2rem);
    clip-path: var(--onda-inferior-clara);
    pointer-events: none;
}

/* ABAJO — capa oscura */
body > main > section[data-section="equipo"] > div[data-wave="bottom"]::before {
    position: absolute;
    bottom: 2rem;
    left: 0;
    z-index: 2;
    width: 105%;
    height: 8rem;
    background-color: var(--color-secondary-800);
    transform: translate(-2rem, 1rem);
    clip-path: var(--onda-inferior-oscura-alargada);
    pointer-events: none;
    content: "";
}

/* ABAJO — capa verde */
body > main > section[data-section="equipo"] > div[data-wave="bottom"]::after {
    position: absolute;
    bottom: 2rem;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 8.65rem;
    background-color: var(--color-secondary-500);
    clip-path: var(--onda-inferior-clara);
    pointer-events: none;
    content: "";
}

/* =========================================
   PROYECTO
   ========================================= */

body > main > section[data-section="proyecto"] {
    display: grid;
    padding: 8% var(--content-padding-inline);
    row-gap: 2rem;
    justify-items: center;
    text-align: center;
    background-color: var(--color-white);
}

body > main > section[data-section="proyecto"] > p:first-of-type {
    width: 100%;
    max-width: 65rem;
    font-weight: 300;
    line-height: 1.7;
}

body > main > section[data-section="proyecto"] > p:nth-of-type(2) {
    font-weight: 300;
}

body > main > section[data-section="proyecto"] > a {
    justify-self: center;
}

@media (max-width: 47.9375rem) {
    body {
        overflow-x: clip;
    }

    body > nav > button:is([aria-label="Abrir menú"], [aria-label="Cerrar menú"]) {
        right: 1.25rem;
    }

    body > main > section[data-section="equipo"] {
        overflow-x: clip;
        padding-block-start: 10.5rem;
        padding-block-end: calc(4% + 9.75rem);
        background-size: 100% calc(100% - 12.25rem);
        background-position: center 5rem;
    }

    body > main > section[data-section="equipo"] > div:not([data-wave]) {
        flex-direction: column;
        align-items: center;
        row-gap: 2.5rem;
    }

    body > main > section[data-section="equipo"] > div[data-wave="top"] {
        left: -1rem;
        width: calc(100% + 2rem);
        transform: translate(0, -1.6rem);
    }

    body > main > section[data-section="equipo"]::before {
        top: 1rem;
        left: -1rem;
        width: calc(100% + 2rem);
        height: 8rem;
        transform: translate(0, -0.85rem);
    }

    body > main > section[data-section="equipo"]::after {
        top: 1rem;
        left: -1rem;
        width: calc(100% + 2rem);
        height: 8.5rem;
        transform: none;
    }

    body > main > section[data-section="equipo"] > div[data-wave="bottom"] {
        bottom: 3rem;
        left: -1rem;
        width: calc(100% + 2rem);
        transform: translate(0, 2.2rem);
    }

    body > main > section[data-section="equipo"] > div[data-wave="bottom"]::before {
        bottom: 2rem;
        left: 0;
        width: 100%;
        transform: translate(0, 1.2rem);
    }

    body > main > section[data-section="equipo"] > div[data-wave="bottom"]::after {
        bottom: 2rem;
        left: 0;
        width: 100%;
        transform: none;
    }

    body > main > section[data-section="equipo"] [data-team="comercial"] {
        margin-top: 1.5rem;
    }

    body > main > section[data-section="equipo"] [data-constellation="pair"] [data-link] {
        background-size: calc(100% - 1.6rem) 100%;
    }

    body > main > section[data-section="equipo"] [data-constellation="pair"] [data-link]::before {
        left: 0;
    }

    body > main > section[data-section="equipo"] [data-constellation="pair"] [data-link]::after {
        right: 0;
    }

    body > main > section[data-section="equipo"] [data-team="comercial"] [data-pos="a"] {
        position: relative;
        z-index: 2;
        grid-column: 1;
        margin-top: 14rem;
        transform: translateX(4.5rem);
    }

    body > main > section[data-section="equipo"] [data-team="comercial"] [data-pos="center"] {
        position: relative;
        z-index: 2;
        grid-column: 3;
    }

    body > main > section[data-section="equipo"] [data-team="comercial"] [data-pos="b"] {
        position: relative;
        z-index: 2;
        grid-column: 5;
        margin-top: 14rem;
        transform: translateX(-4.5rem);
    }

    body > main > section[data-section="equipo"] [data-constellation="network"] > [data-members] {
        position: relative;
        column-gap: 0;
        grid-template-columns: 7.25rem 2.6rem 7.25rem 2.6rem 7.25rem;
    }

    body > main > section[data-section="equipo"] [data-constellation="network"] [data-link] {
        position: absolute;
        z-index: 1;
        height: 0.2rem;
        margin: 0;
        background-size: calc(100% - 0.72rem) 100%;
    }

    body > main > section[data-section="equipo"] [data-constellation="network"] [data-link]::before {
        left: -0.375rem;
        top: calc(50% - 0.375rem);
        width: 0.35rem;
        height: 0.35rem;
        border-radius: 50%;
        transform: none;
    }

    body > main > section[data-section="equipo"] [data-constellation="network"] [data-link]::after {
        right: -0.375rem;
        top: calc(50% - 0.375rem);
        width: 0.35rem;
        height: 0.35rem;
        border-radius: 50%;
        transform: none;
    }

    body > main > section[data-section="equipo"] [data-constellation="network"] [data-link][data-dir="up"] {
        left: 11.081rem;
        top: 11.464rem;
        width: 2.4rem;
        transform: rotate(134.7deg);
        transform-origin: left center;
    }

    body > main > section[data-section="equipo"] [data-constellation="network"] [data-link][data-dir="down"] {
        left: 15.869rem;
        top: 11.464rem;
        width: 2.4rem;
        transform: rotate(45.3deg);
        transform-origin: left center;
    }

    body > main > section[data-section="proyecto"] > p {
        text-align: justify;
    }

    body > main > section[data-section="proyecto"] {
        padding-block-end: calc(8% + 3rem);
    }
}

@media (min-width: 64rem) and (max-width: 80rem) and (orientation: landscape) {
    body > main > section[data-section="equipo"] {
        background-size: 100% calc(100% - 15.25rem + 2px);
        background-position: center calc(50% + 1px);
    }
}

@media (min-width: 48rem) and (max-width: 53.3125rem) and (orientation: portrait) {
    body > main > section[data-section="equipo"] {
        overflow-x: clip;
        background-size: calc(100% + 2px) calc(100% - 15.25rem);
    }

    body > main > section[data-section="equipo"] > div:not([data-wave]) {
        flex-direction: column;
        align-items: center;
        row-gap: 2.5rem;
    }

    body > main > section[data-section="equipo"] > div[data-wave="top"],
    body > main > section[data-section="equipo"] > div[data-wave="bottom"] {
        left: 0;
        width: calc(112% + 2rem);
    }

    body > main > section[data-section="equipo"]::before {
        left: 0;
        width: calc(105% + 1.5rem);
    }

    body > main > section[data-section="equipo"]::after {
        left: -2px;
        width: calc(100% + 4px);
    }

    body > main > section[data-section="equipo"] > div[data-wave="bottom"]::before {
        left: 0;
        width: calc(105% + 2rem);
    }

    body > main > section[data-section="equipo"] > div[data-wave="bottom"]::after {
        left: -2px;
        width: calc(100% + 4px);
    }
}

@media (min-width: 53.375rem) and (max-width: 80rem) and (orientation: portrait) {
    body > main > section[data-section="equipo"] > div:not([data-wave]) {
        flex-direction: column;
        align-items: stretch;
        row-gap: 1.5rem;
    }
}