/* ==================================================
   TABLET
   ================================================== */

@media (min-width: 768px) {

    .hero-container {
        grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
        grid-template-areas: "contenido fotografia";
        align-items: center;
        align-content: center;
        gap: clamp(2.5rem, 6vw, 5rem);
    }


    /* Contenido */

    .hero-content {
        grid-area: contenido;
    }

    .hero-title {
        max-width: none;
        font-size: clamp(2.25rem, 3vw, 2.8rem);
    }

    .hero-statement {
        max-width: 42rem;
        font-size: 1.2rem;
    }

    .hero-description {
        max-width: 42rem;
        font-size: 1.05rem;
    }


    /* Botones */

    .hero-actions {
        width: max-content;
    }

    .button {
        flex: none;
        min-width: 160px;
        padding-inline: 1.25rem;
    }


    /* Redes profesionales */

    .hero-socials {
        justify-content: flex-start;
    }


    /* Fotografía */

    .hero-visual {
        grid-area: fotografia;
        width: min(100%, 360px);
        margin-inline: auto;
    }


    /* Sobre mí — tableta y escritorio */

    .sobre-mi {
        padding-block: clamp(3rem, 7vh, 5rem);
    }

    .encabezado-seccion {
        margin-bottom: 1.75rem;
    }

    .sobre-mi-contenido {
        gap: 2rem;
    }

    .sobre-mi-texto {
        gap: 1rem;
    }

    .sobre-mi-texto p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .sobre-mi-texto .sobre-mi-introduccion {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .sobre-mi-indicadores {
        gap: 0.75rem;
    }

    .sobre-mi-indicador {
        grid-template-columns: 88px 1fr;
        gap: 1rem;
        min-height: 82px;
        padding: 1rem;
    }

    .sobre-mi-indicador strong {
        font-size: 2rem;
    }

    .sobre-mi-indicador span {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    /* Workflow — tableta y escritorio */
    .descripcion-seccion {
        max-width: none;
    }

    /* Proyectos — dos tarjetas visibles */
    .project-card {
        flex-basis: calc((100% - 1.25rem) / 2);
    }


    /* ========================
       PROJECT DIALOG
       ======================== */
    .project-dialog {
        width: calc(100% - 4rem);
        max-height: calc(100dvh - 4rem);
        border-radius: 1.5rem;
    }

    .project-dialog-container {
        max-height: calc(100dvh - 4rem);
    }

    .project-dialog-close {
        top: 1.5rem;
        margin:
            1.5rem
            1.5rem
            -4.25rem
            auto;
    }


    /* ==================================================
       PROJECT CASE HEADER
       ================================================== */

    .project-dialog-content {
        padding: 2rem;
    }

    .project-dialog-title {
        font-size: clamp(2.1rem, 5vw, 2.75rem);
    }

    .project-case-header {
        gap: 2rem;
        padding-bottom: 2rem;
    }

    .project-case-heading {
        padding-top: 0.5rem;
        padding-right: 4rem;
    }

    .project-dialog-image img {
        aspect-ratio: 16 / 9;
    }


    /* ==================================================
       PROJECT CASE METADATA
       ================================================== */

    .project-case-metadata {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 2rem;
        padding-block: 2rem;
    }

    /* ==================================================
       PROJECT CASE MAP
       ================================================== */
    .project-case-map {
        padding-block: 2rem;
    }

    .project-case-map-header {
        margin-bottom: 1.25rem;
    }

    .project-dialog-map {
        height: 24rem;
    }

    /* ==================================================
       PROJECT CASE NARRATIVE
       ================================================== */

    .project-case-narrative {
        padding-block: 2rem;
    }

    .project-case-section {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        align-items: start;
        gap: 1.5rem;

        padding-block: 2rem;
    }

    /*
    Desde tablet se restaura el contenedor interno,
    recuperando la sangría editorial.
    */
    .project-case-section > div {
        display: block;
        min-width: 0;
    }

    .project-case-number {
        align-self: start;

        padding-top: 0.2rem;

        font-size: 1.25rem;
    }

    .project-case-section h3 {
        grid-column: auto;
        align-self: auto;

        margin: 0 0 0.75rem;

        font-size: 1.6rem;
    }

    .project-case-section p:not(.project-case-number),
    .project-case-solution {
        grid-column: auto;
    }

    .project-case-section p:not(.project-case-number),
    .project-case-solution li {
        font-size: 1rem;
    }

    /* ==================================================
       PROJECT CASE TECHNOLOGIES
       ================================================== */
    .project-case-technologies {
        grid-template-columns: minmax(10rem, 0.3fr) minmax(0, 1fr);
        align-items: center;
        gap: 2rem;

        padding: 2rem;
    }

    .project-case-technologies ul {
        justify-content: center;
    }

    /* ==================================================
       CONTACT
       ================================================== */

    .contact-section {
        padding-inline: 2rem;
    }

    .contact-container {
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(0, 1.15fr);
        align-items: center;
        gap: 3rem;
    }

    .contact-intro {
        align-self: center;
    }

    .contact-form {
        padding: 1.75rem;
    }


    /* Footer */

    .footer-container {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;

        text-align: left;
    }

    .footer-copy {
        justify-self: center;
    }

    .footer-top-link {
        justify-self: end;
    }
}


/* ==================================================
   DESKTOP
   ================================================== */

@media (min-width: 1024px) {

    /* Encabezado */

    .header-container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 0.75rem;
    }

    .site-logo {
        grid-column: 1;
        font-size: 1.5rem;
    }

    .main-navigation {
        position: static;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;

        width: auto;
        padding: 0;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .navigation-list {
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
    }

    .navigation-link {
        padding: 0.6rem 0.7rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .header-actions {
        grid-column: 3;
        grid-row: 1;
    }

    .menu-toggle {
        display: none;
    }

    .theme-toggle:hover {
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    /* Proyectos — tres tarjetas visibles */
    .project-card {
        flex-basis: calc((100% - 2.5rem) / 3);
    }

    /* PROJECT CASE HEADER */
    .project-case-header {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: stretch;
    }

    .project-case-heading {
        display: flex;
        flex-direction: column;
        justify-content: center;

        padding-right: 0;
    }

    .project-dialog-title {
        font-size: clamp(2.25rem, 3.5vw, 3.25rem);
    }

    .project-dialog-tagline {
        font-size: 1.075rem;
    }

    .project-dialog-image {
        min-height: 25rem;
    }

    .project-dialog-image img {
        height: 100%;
        aspect-ratio: auto;
    }

    /* PROJECT CASE METADATA */
    .project-case-metadata {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* PROJECT CASE MAP */
    .project-dialog-map {
        height: 28rem;
    }

    /* ==================================================
       CONTACT
       ================================================== */
    .contact-section {
        min-height: calc(
            100svh
            - var(--header-height)
            - var(--footer-height)
        );

        padding-block: 3rem;
    }

    .contact-container {
        gap: 5rem;
    }

    .contact-description {
        max-width: 28rem;

        font-size: 1.05rem;
    }

    .contact-form {
        padding: 2rem;
    }

    /* Footer */

    .site-footer {
        height: var(--footer-height);
    }

    .footer-container {
        height: 100%;
        padding-block: 1.5rem;
    }
}

/* ==================================================
   PANTALLAS GRANDES
   ================================================== */

@media (min-width: 1280px) {

    /* Proyectos — cuatro tarjetas visibles */

    .project-card {
        flex-basis: calc((100% - 3.75rem) / 4);
    }

    /* ==================================================
       CONTACT
       ================================================== */
    .contact-container {
        max-width: 72rem;
        gap: 6rem;
    }
}