:root {
    --gap: 10px;
    --duration: 35s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
}
#loop-bg {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
}


.project-detail-mobile {
    display: none;
}







.toggle-arrow.visible {
    display: block;
}











/*.nav-bar .desktop-nav .dropdown-links:hover .dropdown-menu-content {
    animation: DropDownMenuHide 0.5s ease-in-out;
} */























/* Atenuado de las marcas que no son la abierta (invariante 7). Venia de un `style` inline. */

/* Atenuado de las tarjetas de servicio que no son la abierta (invariante 7). Igual que el de
   marcas, venia de un `style` inline y aplicaba en todo ancho, no solo en mobile. */









.title-text {
    z-index: 3;
    text-align: start;
    font-size: 64px;
}
.title-text.text-big {
    font-size: 104px;
    letter-spacing: 0.01em;
}
.title-text.text-medium {
    font-size: 24px;
    letter-spacing: 0.01em;
    font-weight: 300;
}
.title-text.text-condensed {
    line-height: 1;
}
.title-text span {
    font-family: "Gotham", sans-serif;
}


































/*--*/














/* reconocimientos */

































/* reconocimientos end */
/* casos de exito */
.cases {
    position: relative;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}
.cases .title-text.text-big {
    font-size: 84px;
}

.cases-content-container {
    width: 60%;
    display: flex;
    justify-content: space-around;
    gap: 40px;
}



.cases-content-container .case {
    width: 30%;
    height: 500px;
    transition: width 0.5s ease-in-out;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.cases-content-container .case.active {
    width: 100%;
}
.cases-content-container .case .case-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.5s ease-in-out;
}
.case .case-text-container {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 1.2), rgba(0, 0, 0, 0));
    color: #fff;
    padding: 20px 0;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
/* .case.show-text .case-text-container {
    display: block;
    opacity: 1;
} */
.case .case-text-container.visible {
    opacity: 1;
}
.case-logo {
    max-width: 150px;
    width: 90%;
    height: auto;
    margin-top: 10px;
    opacity: 40%;
}
.case-text-description,
.case-text-cliente {
    padding: 0 30px;
}
/* cases end */
/*  sixteen-years */








/* Swiper Navigation Overrides */
#clients-desktop {
    --swiper-navigation-color: #ffffff;
    --swiper-navigation-size: 44px;
    max-width: 750px;
    margin-left: auto;
}
#clients-desktop .swiper-button-next,
#clients-desktop .swiper-button-prev {
    color: #ffffff;
    margin-left: 0;
}
#clients-desktop .swiper-button-next.swiper-button-next.swiper-button-next,
#clients-desktop .swiper-button-prev.swiper-button-prev.swiper-button-prev {
    top: 50%;
    bottom: auto;
    margin-top: calc(0px - var(--swiper-navigation-size) / 2);
}
#clients-desktop .swiper-button-prev {
}
#clients-desktop .swiper-button-prev.swiper-button-prev.swiper-button-prev {
    left: 0;
    right: auto;
}
#clients-desktop .swiper-button-next {
}
#clients-desktop .swiper-button-next.swiper-button-next.swiper-button-next {
    right: 0;
    left: auto;
}
#clients-desktop .swiper-button-next svg,
#clients-desktop .swiper-button-prev svg {
    fill: none;
    stroke: currentColor;
}












/* sixteen-years end */
/* footer */




/* footer end */
/* proposal */
#typed-text-proposal-2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
}
#typed-text-proposal {
    text-align: left;
    width: 100%;
}
/* proposal end */
/* history */



.text-history {
    font-size: 18px;
    letter-spacing: 0.05em;
    max-width: 60%;
    margin-bottom: 0;
    text-wrap: pretty;
}




/* history end */
/* projects */

.projects-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 650px;
    gap: 15px;
}
.project-item {
    --card-width: 250px;
    width: var(--card-width);
    min-width: 30px;
    position: relative;
    overflow: hidden;
    transition:
        min-width 0.5s ease,
        width 0.5s ease,
        height 0.5s ease,
        opacity 0.5s ease-in-out,
        transform 0.5s ease-in-out;
    /* backdrop-filter: blur(100px); */
    background-color: #1b1364;
    border-radius: 6px;
    opacity: 0;
}
.project-item.home-page {
    opacity: 0;
    transform: translatey(20px);
    height: 500px;
}
.project-item.home-page.animate-in {
    opacity: 1;
    transform: translatey(0);
}

.project-item.home-page:nth-child(1) {
    transition-delay: 0s, 0s, 0s, 0.2s, 0.2s;
}
.project-item.home-page:nth-child(2) {
    transition-delay: 0s, 0s, 0s, 0.4s, 0.4s;
}
.project-item.home-page:nth-child(3) {
    transition-delay: 0s, 0s, 0s, 0.6s, 0.6s;
}
.project-item.home-page:nth-child(4) {
    transition-delay: 0s, 0s, 0s, 0.8s, 0.8s;
}

.project-item.animated {
    opacity: 1;
    transform: translatey(0);
}
.project-item.animating-in.loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    z-index: -1;
    border-radius: 6px;
}
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
.project-item.animating-in img,
.project-item.animating-in video,
.project-item.animating-in .project-item-overlay {
    z-index: 1000;
}
.project-item:hover {
    width: 600px;
    min-width: var(--card-width);
    cursor: pointer;
}
.project-item h5,
.project-item-gallery h5 {
    display: block;
    background-color: #e4212f;
    width: fit-content;
    max-width: calc(100% - 10px);
    padding: 5px 10px;
    padding-left: 20px;
    margin: 0;
    font-weight: bold;
    font-size: 1.2rem;
    transform: translate3d(-10px, 0, 0);
    transition: all 0.4s ease;
    transition-delay: 0s;
}
.project-item:hover h5,
.project-item-gallery:hover h5 {
    transform: translate3d(0, 0, 0);
    transition-delay: 0.3s;
}
.project-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.project-item img[alt="Ogilvy"] {
    max-width: 125px;
}
.project-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    transition: opacity 0.5s ease;
    /* Encuadre por proyecto, que viene de la base. Va en la propiedad `scale` y no en
       `transform` para que el video sin zoom quede exactamente como estaba: `scale: none` es el
       valor inicial, mientras que `transform: scale(1)` le crearia un contexto de apilado. */
    scale: var(--preview-zoom, none);
    transform-origin: var(--preview-align, center);
}
.project-item-overlay-content-company-logo {
    width: 100%;
    max-width: 80px;
    object-fit: contain;
    object-position: center;
    opacity: 0.5;
    transition: opacity 0.5s ease;
}
.project-item-overlay-content-company-logo[alt="Ogilvy"] {
    max-width: 127px;
}
.project-item-overlay-content-company-logo[alt="punto_ogilvy"] {
    max-width: 127px;
}
.projects-container.hover .project-item video {
    opacity: 0.5;
}
.projects-container.hover .project-item:hover video {
    opacity: 1;
}
.project-item-overlay {
    display: flex;
    align-items: flex-end;
    justify-content: start;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    min-width: var(--card-width);
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity 0.5s ease;
    transition-delay: 0.3s;
}
.project-item:hover .project-item-overlay,
.project-item-gallery:hover .project-item-overlay {
    opacity: 1;
}
.project-item:not(:hover) .project-item-overlay,
.project-item-gallery:not(:hover) .project-item-overlay {
    opacity: 0;
    transition-delay: 0s;
}
.project-item-overlay-content {
    width: var(--card-width);
    color: #fff;
    text-align: start;
    padding-bottom: 50px;
}
.project-item-gallery .project-item-overlay-content {
    padding-bottom: 20px;
}
.project-item-overlay-content p {
    padding: 10px 0;
    text-align: start;
    font-size: 16px;
}
.project-item-overlay-content h3,
.project-item-overlay-content p {
    margin: 0;
}
.project-item-overlay-content p,
.project-item-overlay-content img {
    padding-left: 20px;
}
.project-item-overlay-content img {
    opacity: 0.5;
}
.project-item:nth-child(1) {
    height: 400px;
}
.project-item:nth-child(2) {
    height: 450px;
}
.project-item:nth-child(3) {
    height: 500px;
}
.project-item:nth-child(4) {
    height: 550px;
}
.project-item:nth-child(5) {
    height: 600px;
}
.project-item:nth-child(6) {
    height: 600px;
}
.project-item:nth-child(7) {
    height: 550px;
}
.project-item:nth-child(8) {
    height: 500px;
}
.project-item:nth-child(9) {
    height: 450px;
}
.project-item:nth-child(10) {
    height: 400px;
}
.home-container .cases-content-container .project-item {
}
.home-container .cases-content-container .project-item.project-item.project-item {
    height: 500px;
}
























.project-item-gallery {
    width: 400px;
    height: 300px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 6px;
}
.project-item-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 0.4s ease;
}

.home-container {
    display: block;
    position: relative;
    /* `100%`, no `100vw`: la unidad de viewport ignora el ancho de la barra de scroll y deja al
       contenedor mas ancho que el area visible. */
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    /* `clip` (not `hidden`) so the container does not become a scroll container and swallow the
       window's vertical scroll-snap; still clips horizontal rails (e.g. the team profiles row). */
    overflow-x: clip;
    touch-action: auto;
    z-index: 10;
}
.home-swiper .swiper-wrapper {
    height: auto;
}
.home-swiper .swiper-slide {
    height: auto;
}
.home-section {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
    touch-action: auto;
}
.home-section > .container {
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.scroll-snap-container {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 10;
    touch-action: auto;
    pointer-events: auto;
}
.scroll-snap-container .swiper-slide {
    height: auto;
}

.scroll-snap-section {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
    touch-action: auto;
}

.scroll-snap-section > .container {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* --- ESTILOS PARA NAVEGACIÓN LATERAL (DOTS) --- */








.gallery-projects-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1322px;
}
.project-item-gallery {
    --card-width: 380px;
    flex: 1 1 380px;
    max-width: var(--card-width);
    max-height: var(--card-width);
    aspect-ratio: 1;
    box-sizing: border-box;
    margin: 0;
    opacity: 1;
    background-color: #1b1364;
}
.project-item-gallery.placeholder {
    pointer-events: none;
    visibility: hidden;
}
.project-item-gallery.placeholder.placeholder.placeholder {
    opacity: 0;
}
.gallery-projects-container.hover .project-item-gallery img {
    opacity: 0.5;
}
.gallery-projects-container.hover .project-item-gallery:hover img {
    opacity: 1;
}
.gallery-projects-container
    .project-item-gallery
    img.project-item-overlay-content-company-logo,
.gallery-projects-container
    .project-item-gallery:hover
    img.project-item-overlay-content-company-logo {
    opacity: 0.5;
}








.arrow-prev,
.arrow-next {
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}
.arrow-prev.disabled {
    opacity: 0.5;
    pointer-events: none;
}
/* projects end */
/* news */









/* news end */
/* team */


/* Cabeceras de Equipo. Eran atributos `style` en el markup legacy (team.html:2 y :12).
   `pointer-events: none` es lo que deja pasar el tap a las cards de la primera slide. */




/* team end */
/* culture */
.scroll-snap-container .section.culture-1 {
    padding-top: 22vh;
}
#steps-culture .home-section {
    padding-top: 0;
}




.culture-values-list h2 {
    font-size: 4rem;
}








/* Parent wrapper */
.bento-group-three-imgs,
.bento-group-two-imgs {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.bento-group-three-imgs .group-child,
.bento-group-two-imgs .group-child {
    display: flex;
    min-height: 0;
}
.bento-group-three-imgs img,
.bento-group-two-imgs img {
    object-fit: cover;
    object-position: center;
}

/* culture end */
/* team */
















































.section.section-group .container {
    height: auto;
    min-height: auto;
    padding-top: 10vh;
    padding-bottom: 8vh;
}
.section.section-group .group-wrapper .logo-gptw {
    position: absolute;
    display: block;
    top: 0;
    right: 90px;
    width: 100px;
    height: 141px;
    background-image: url(../images/logo-GPTW23.avif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* team end */
/* contact */






/* El legacy apagaba el `outline` y compensaba con `border-bottom-color` al enfocar, pero la
   regla base declara `border: none`: no hay borde que colorear, asi que tabular por el
   formulario no mostraba absolutamente nada.
   En campos de texto `:focus-visible` matchea con foco de teclado Y de mouse (la spec asume
   que se va a escribir), asi que el anillo tambien aparece al hacer click: es el
   comportamiento por defecto del navegador para inputs, y es el unico estado del refactor que
   cambia algo visible a proposito. */













/* contact end */
@media (max-height: 900px) {
    
    
    
    
    
    
    .title-text.text-medium {
        font-size: 20px;
    }
    
    
    
    .section.section-group .group-wrapper .logo-gptw {
        right: 70px;
        height: 101px;
    }
    
    
    
}






@media (max-width: 1024px) {
    
    .title-text {
        font-size: 4rem;
    }
    
    
    
    .cases-content-container .case {
        height: 600px;
        max-width: 600px;
    }
    
    .cases-content-container {
        width: 60%;
        gap: 40px;
    }
    .culture-gallery {
        gap: 20px;
        grid-template-columns: repeat(3, 1fr);
    }
    
    
    
    
    
}
@media (max-width: 992px) {
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* .menu-toggle:checked + .hamburger-icon .hamburger-icon-line:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }

        .menu-toggle:checked + .hamburger-icon .hamburger-icon-line:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle:checked + .hamburger-icon .hamburger-icon-line:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

        .menu-toggle:checked ~ .mobile-nav {
            max-height: max-content;
            opacity: 1;
            transform: translateY(0);
        } */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .title-text {
        font-size: 4rem;
    }
    
    .cases-content-container .case {
        height: 500px;
    }
    
    .cases-content-container {
        width: 65%;
        gap: 20px;
    }
    
    .text-history {
        font-size: 16px;
    }
    
    
    .scroll-snap-section {
        height: auto;
        padding-bottom: 20px;
        padding-top: 20px;
    }
    
    
    
    
    .home-container .cases-content-container .project-item {
        width: 140px;
    }
    .home-container .cases-content-container .project-item.project-item.project-item {
        height: 180px;
    }
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    .container.culture-title .title-text {
        font-size: 84px;
    }
}
@media (max-width: 768px) {
    /* Sin padding propio: el `.container` ya trae el suyo (90px arriba, que despejan el header
       fijo). Sumarlo hacia dentro de `min-height: 100dvh` deja cada seccion 50px mas alta que la
       pantalla, y con scroll-snap mandatory ese sobrante solo se alcanza peleandole al iman. */
    .home-section,
    .scroll-snap-section {
        padding-top: 0;
        padding-bottom: 0;
    }
    .home-section.home-section.home-section,
    .scroll-snap-section.scroll-snap-section.scroll-snap-section {
        height: auto;
        min-height: 100dvh;
    }
    /* El alto de pantalla lo fija la seccion. Si el `.container` ademas pide 100dvh se suma al
       padding de la seccion y cada una queda mas alta que el viewport: ese excedente es
       inalcanzable con scroll-snap mandatory (rebota al inicio). Que ocupe lo que la seccion
       le deja. */
    .home-section > .container,
    .scroll-snap-section > .container {
        align-self: stretch;
        min-height: 0;
    }
    #steps-culture .home-section {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    #steps-culture .home-section.home-section.home-section {
        min-height: 100dvh;
    }
    
    .mobile {
    }
    .mobile.mobile.mobile {
        display: flex;
    }
    
    
    
    
    
    
    
    
    
    .title-text {
        font-size: 28px;
    }
    .title-text.text-big,
    .cases .title-text.text-big {
        font-size: 32px;
    }
    .title-text.text-big {
        font-size: 35px;
    }
    
    /* [data-anchor="cases"] .title-text.text-big span { */
    /*     font-size: 32px; */
    /*     display: inline; */
    /*     margin-right: 0.25em; */
    /* } */
    .container {
        padding-top: 90px;
        padding-bottom: 40px;
        min-width: 100%;
        min-height: 100dvh;
        height: auto;
    }
    .container.container.container {
        justify-content: center;
    }
    .culture-gallery {
        gap: 20px;
        grid-template-columns: repeat(2, 1fr);
    }
    
    
    
    
    
    
    
    
    
    .cases-content-container {
        width: 100%;
        flex-wrap: wrap;
        margin: 50px 0;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* El titulo era un `<p>` y ahora es un `<span>` dentro del `<button>` del acordeon (dentro
       de un boton solo va contenido de frase). `display: block` repone el comportamiento de
       bloque que tenia el `<p>`, para que el salto de linea no cambie. */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .swiper {
        width: 100%;
        padding: 20px 0;
    }
    
    #clients-mobile .swiper-slide {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    .cases-content-container {
        max-width: 400px;
    }
    
    .gallery-projects-container {
        gap: 8px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0 10px;
    }
    .project-item-gallery {
        --card-width: 100%;
        flex: unset;
        max-width: unset;
        max-height: unset;
        aspect-ratio: 1;
    }
    .projects-container {
        min-height: unset;
        flex-wrap: wrap;
        width: auto;
        gap: 8px;
        height: 100%;
    }
    .projects-container .project-item {
        height: 150px;
        width: 150px;
    }
    .project-item .project-item-overlay,
    .project-item-gallery .project-item-overlay,
    .project-item:hover .project-item-overlay,
    .project-item-gallery:hover .project-item-overlay {
        display: none;
        opacity: 0;
    }
    .project-item:hover {
        min-width: unset;
    }
    .projects-container.hover .project-item video {
        opacity: 1;
    }
    .project-item h5,
    .project-item-gallery h5 {
        font-size: 14px;
    }
    .project-item-overlay-content p {
        font-size: 12px;
    }
    
    
    
    
    
    
    

    
    
    
    
    
    .project-item-gallery {
        flex: 1 1 150px;
        max-width: 150px;
        max-height: 140px;
    }
    
    /* `.scroll-snap-section` es flex row; en la primera slide de equipo conviven el header
       mobile y las cards, asi que en mobile tienen que apilarse en lugar de ir uno al lado
       del otro. */
    #steps-team .scroll-snap-section {
        flex-direction: column;
        align-items: center;
    }
    
    
    
    
    
    
    .container.culture-title .title-text {
        font-size: 64px;
    }
    
    
    
    
    
    
    
    
}
html.no-scroll,
body.no-scroll {
    overflow: hidden;
    touch-action: none;
}

@media (max-width: 600px) {
    .container {
        flex-direction: column;
        padding: 0 30px;
        padding-top: 90px;
        padding-bottom: 20px;
        min-height: 100dvh;
        height: auto;
    }
    
    
    
    
}
/* dots */
/* Navigation bullets */
/* Hover state */
/* Active state */
/* dots end */


@media (max-width: 768px) {
    #clients-mobile {
    }
    #clients-mobile#clients-mobile#clients-mobile {
        height: auto;
    }
    #clients-mobile .swiper-wrapper {
    }
    #clients-mobile .swiper-wrapper.swiper-wrapper.swiper-wrapper {
        height: auto;
    }
}

/* Aire al final de las secciones que no entran en la pantalla de un telefono.
   En Safari iOS el area util de un iPhone 15 Pro es ~648pt (852 menos la barra de estado y la
   barra inferior, que no se colapsa porque el scroller es `.home-container` y no la raiz), asi
   que la mayoria de las secciones scrollean. Sin esto el ultimo item queda al ras del borde y
   se lee como cortado en vez de como "hay mas abajo".
   Las secciones que SI entran no cambian: su alto lo fija `min-height`, que absorbe el padding.
   Acotado por `max-height` para no alterar viewports altos.
   Cultura queda afuera a proposito: su `.out__of__office__container` tiene `height` fijo, asi
   que el padding no agregaria aire sino que le quitaria espacio al contenido. */
@media (max-width: 768px) and (max-height: 720px) {
    .home-section > .container,
    .scroll-snap-section > .container {
        padding-bottom: 40px;
    }
}

/* Segundo punto de snap al final de las secciones altas.
   Con `mandatory` el navegador siempre descansa en un punto de snap. Si la seccion alta solo
   tiene uno (su inicio), un scroll corto vuelve ahi: la cola queda inalcanzable con gestos
   suaves. Alineando el final del contenido al final del scrollport se crea un segundo punto,
   asi la seccion alta se recorre en dos "paginas" sin perder el imantado entre secciones.
   Verificado en Simulador: con esto un swipe corto dentro de una seccion alta avanza en vez de
   rebotar, y el imantado seccion-a-seccion sigue siendo exacto. La alternativa que se descarto
   fue `scroll-snap-type: proximity`, que resuelve el rebote pero degrada a scroll normal: deja
   la pagina parada entre dos secciones. */
@media (max-width: 768px) and (max-height: 720px) {
    .home-section > .container > *:last-child {
        scroll-snap-align: end;
    }
}

/* Control de las tarjetas de proyecto. La tarjeta sigue siendo un `div` y el boton va
   superpuesto, en vez de convertir la tarjeta entera: un `<button>` aplana su contenido a un
   nombre accesible, asi que el `<h5>` del overlay desapareceria del arbol de accesibilidad y se
   perderia la navegacion por encabezados. Va ultimo en el DOM, por lo que pinta sobre el
   overlay sin necesidad de z-index (ninguno de los dos declara uno).
   No se envuelve la tarjeta en otro nodo a proposito: `.project-item:nth-child(N)` y
   `.project-item.home-page:nth-child(N)` fijan alturas y `transition-delay`, y un wrapper las
   rompe en silencio. Agregar un hijo es inocuo. */
.project-item-trigger,
.project-item-gallery .project-item-trigger {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Las tarjetas tienen `overflow: hidden`, que recortaria un anillo dibujado hacia afuera: se
   dibuja hacia adentro. */
.project-item-trigger:focus-visible,
.project-item-gallery .project-item-trigger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}