.portfolio-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

.portfolio-card {
    background: var(--surface);
    border: .08rem solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.portfolio-image {
    aspect-ratio: 2.08 / 1;
    background: var(--line);
    line-height: 0;
    overflow: hidden;
    padding: .6rem;
}

.portfolio-image img {
    background: var(--surface);
    display: block;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

.portfolio-card-meta {
    padding: 1.5rem;
}

.portfolio-card-meta h2 {
    font-family: "Manrope", sans-serif;
    font-size: 1.15rem;
    line-height: 1.35;
    margin: 0 0 .5rem;
}

.portfolio-card-meta p {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: .04em;
    margin: 0;
    text-transform: uppercase;
}


/* Aclaración de que los proyectos son diseños de muestra */
.portfolio-intro {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 1rem 0 0;
    max-width: 38rem;
}

/* Cierre del portfolio: mismo recuadro que el resumen de Términos, debajo de las tarjetas */
.portfolio-cta {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* Los diseños van de a tres por fila en computadora, dos en tablet y uno en celular.
   La invitación a hablar va debajo, con el ancho de la columna de texto de las demás páginas. */
.portfolio-body .portfolio-cta {
    max-width: 46rem;
}

/* La imagen del diseño de muestra es un enlace a la demo navegable */
a.portfolio-image {
    display: block;
    transition: opacity .2s ease;
}

a.portfolio-image:hover,
a.portfolio-image:focus-visible {
    opacity: .85;
}

.portfolio-card-meta .portfolio-demo {
    margin-top: 1rem;
}

/* Inicio: miniaturas de los proyectos de muestra, después de los planes */
.samples-head {
    margin-bottom: 2.5rem;
}

.samples .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.samples .portfolio-card-meta h3 {
    font-family: "Manrope", sans-serif;
    font-size: 1.15rem;
    line-height: 1.35;
    margin: 0 0 .5rem;
}

.samples-more {
    display: inline-block;
    margin-top: 2rem;
}

/* Puntos y flechas de la fila: solo existen donde la fila se desliza (los muestra samples.js) */
.samples-controls {
    display: none;
}

/* Tablet y celular: las miniaturas van en una fila que se desliza, para no alargar el inicio.
   La barra de desplazamiento nativa se oculta: los puntos de abajo indican la posición. */
@media (max-width: 52rem) {
    .samples .portfolio-grid {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        /* La tarjeta que asoma se desvanece hacia el borde, para que no se lea texto cortado (samples.js ajusta cada lado) */
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-left, 0px), #000 calc(100% - var(--fade-right, 2.25rem)), transparent);
        mask-image: linear-gradient(to right, transparent, #000 var(--fade-left, 0px), #000 calc(100% - var(--fade-right, 2.25rem)), transparent);
    }

    .samples .portfolio-grid::-webkit-scrollbar {
        display: none;
    }

    /* Celular: una tarjeta entera y un asomo de la siguiente (cerca del 11 % del ancho) */
    .samples .portfolio-card {
        flex: 0 0 calc(89% - 1rem);
        scroll-snap-align: start;
    }

    .samples-controls:not([hidden]) {
        align-items: center;
        display: flex;
        gap: .5rem;
        justify-content: center;
        margin-top: .5rem;
    }

    .samples-dots {
        display: flex;
    }

    /* Cada punto tiene un área de toque de 44 x 44 px; el círculo visible es chico */
    .samples-dot {
        background: none;
        border: 0;
        cursor: pointer;
        display: grid;
        height: 2.75rem;
        padding: 0;
        place-items: center;
        width: 2.75rem;
    }

    .samples-dot::before {
        background: var(--field-border);
        border-radius: 50%;
        content: "";
        height: .6rem;
        transition: background .2s ease, transform .2s ease;
        width: .6rem;
    }

    .samples-dot[aria-current="true"]::before {
        background: var(--blue);
        transform: scale(1.35);
    }

    .samples-arrow {
        display: none;
    }

    .samples-more {
        margin-top: 1rem;
    }
}

/* Tablet (600 a 832 px): dos tarjetas enteras, un asomo de la tercera y flechas anterior / siguiente */
@media (min-width: 37.5rem) and (max-width: 52rem) {
    .samples .portfolio-card {
        flex-basis: calc((100% - 2rem) / 2.13);
    }

    .samples-arrow {
        align-items: center;
        background: var(--line);
        border: .08rem solid var(--text);
        border-radius: 50%;
        color: var(--text);
        cursor: pointer;
        display: inline-flex;
        font-family: "Manrope", sans-serif;
        font-size: 1rem;
        font-weight: 700;
        height: 2.75rem;
        justify-content: center;
        padding: 0;
        transition: background .2s ease, border-color .2s ease, color .2s ease;
        width: 2.75rem;
    }

    .samples-arrow:not(:disabled):hover,
    .samples-arrow:not(:disabled):focus-visible {
        background: var(--blue);
        border-color: var(--blue);
        color: var(--white);
    }

    :root[data-theme="dark"] .samples-arrow:not(:disabled):hover,
    :root[data-theme="dark"] .samples-arrow:not(:disabled):focus-visible {
        color: #100b1d;
    }

    .samples-arrow:disabled {
        cursor: default;
        opacity: .4;
    }
}

@media (max-width: 52rem) and (prefers-reduced-motion: reduce) {
    .samples-dot::before,
    .samples-arrow {
        transition: none;
    }
}