/* Inicio: franja "No necesitás saber de webs para tener una" (entre "Sobre mí" y los planes) */
/* Va después de "Sobre mí", que ya deja su espacio abajo.
   "Qué te garantizo" usa la misma separación: va después de "Proyectos de muestra", con el mismo fondo */
.why.section-shell,
.guarantee.section-shell {
    padding-top: 0;
}

/* Aire arriba: el cambio de fondo (franja alternada) ya las separa de la sección anterior, sin línea */
.why-head,
.guarantee-head {
    padding-top: clamp(3rem, 5vw, 4.5rem);
}

/* Arriba de la línea de "Qué te garantizo" queda el mismo espacio que abajo
   (medio rem más, porque el enlace "Ver todo el portfolio" ocupa parte de ese espacio con su área de toque) */
.samples.section-shell {
    padding-bottom: calc(clamp(3rem, 5vw, 4.5rem) + .5rem);
}

.why-head h2 {
    max-width: 16ch;
}

.why-head p:not(.eyebrow) {
    color: var(--muted);
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    margin: 1.25rem 0 0;
    max-width: 36rem;
}

.why-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
}

.why-item {
    background: var(--surface);
    border: .08rem solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.5rem;
}

.why-icon {
    color: var(--blue);
    height: 1.7rem;
    width: 1.7rem;
}

.why-item h3 {
    font-family: "Manrope", sans-serif;
    font-size: 1.15rem;
    margin: .2rem 0 0;
}

.why-item p {
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}

.why-item .text-link {
    align-self: flex-start;
    margin-top: auto;
    padding-top: .4rem;
}

@media (max-width: 52rem) {
    .why-grid {
        grid-template-columns: 1fr;
    }
}


/* Computadora: la franja también ocupa una pantalla completa, con el contenido centrado */
@media (min-width: 52.01rem) {
    .why.section-shell {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
        min-height: 100svh;
    }
}

/* Inicio: "Qué te garantizo" (entre los planes y la disponibilidad): cuatro compromisos en tarjetas */
.guarantee-head h2 {
    max-width: 18ch;
}

.guarantee-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 64rem) {
    .guarantee-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 35rem) {
    .guarantee-grid {
        grid-template-columns: 1fr;
    }
}

/* Celulares: tarjetas más compactas, con el ícono al lado del título */
@media (max-width: 35rem) {
    .why-item {
        column-gap: .7rem;
        display: grid;
        grid-template-columns: auto 1fr;
        padding: 1.1rem 1.15rem;
        row-gap: .4rem;
    }

    .why-item h3 {
        align-self: center;
        margin: 0;
    }

    .why-item > :not(.why-icon):not(h3) {
        grid-column: 1 / -1;
    }

    .why-icon {
        height: 1.4rem;
        width: 1.4rem;
    }

    .why-grid {
        gap: .75rem;
        margin-top: 1.75rem;
    }
}

/* Inicio, solo en celulares: "Cómo te acompaño" y "Qué te garantizo" pasan a carrusel. Se ve un pedacito de la
   tarjeta siguiente para que se note que hay más; se desliza con el dedo o se toca la tarjeta (cards-carousel.js) */
.carousel-dots {
    display: none;
}

@media (max-width: 35rem) {
    .page-home .why-grid {
        display: flex;
        gap: .75rem;
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding: 0 1.25rem;
        scroll-padding: 0 1.25rem;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .page-home .why-grid::-webkit-scrollbar {
        display: none;
    }

    .page-home .why-grid .why-item {
        align-content: start;
        cursor: pointer;
        flex: 0 0 82%;
        scroll-snap-align: start;
        transition: background-color .25s ease, border-color .25s ease, opacity .3s ease, transform .3s ease;
        -webkit-tap-highlight-color: transparent;
    }

    /* Efecto leve: la tarjeta del frente se ve plena y las de los costados, más tenues y apenas más chicas */
    .page-home .why-grid .why-item:not(.is-active) {
        opacity: .55;
        transform: scale(.96);
    }

    .carousel-dots {
        display: flex;
        gap: .25rem;
        justify-content: center;
        margin-top: .5rem;
    }

    /* Área de toque de 44 px con el punto chico en el centro */
    .carousel-dot {
        align-items: center;
        background: none;
        border: 0;
        cursor: pointer;
        display: inline-flex;
        height: 2.75rem;
        justify-content: center;
        padding: 0;
        width: 1.75rem;
    }

    .carousel-dot::before {
        background: var(--rule);
        border-radius: 1rem;
        content: "";
        height: .5rem;
        transition: background-color .2s ease, width .2s ease;
        width: .5rem;
    }

    .carousel-dot[aria-current]::before {
        background: var(--blue);
        width: 1.4rem;
    }
}

@media (max-width: 35rem) and (prefers-reduced-motion: reduce) {
    .carousel-dot::before,
    .page-home .why-grid .why-item {
        transition: none;
    }

    .page-home .why-grid .why-item:not(.is-active) {
        transform: none;
    }
}