/* =========================
   UZCATEGUI ARQUITECTOS
   ESTILOS GENERALES
   ========================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Playfair+Display:wght@400;500&display=swap');


/* ---------- RESET ---------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #f4f1eb;
    color: #171717;
    font-family: 'DM Sans', sans-serif;
}


/* ---------- ENCABEZADO ---------- */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 28px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    color: white;
}

.logo {
    color: white;
    font-size: 15px;
    letter-spacing: 1.5px;
    font-weight: 500;
    white-space: nowrap;
    display: block;
}

nav {
    display: flex;
    gap: 35px;
}

nav a {
    color: white;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* ---------- HERO ---------- */

.hero {
    height: 100vh;
    min-height: 700px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 50px;

    position: relative;
    overflow: hidden;

    color: white;

    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.25) 45%,
            rgba(0, 0, 0, 0.05) 100%
        ),
        url("Images/RESIDENCIAL/portada.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
}

.hero-small {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 25px;
}

.hero h1 {
    font-family: 'Playfair Display', serif;

    font-size: clamp(48px, 6vw, 92px);

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -3px;

    max-width: 750px;
}

.hero-description {
    max-width: 430px;

    margin-top: 28px;

    font-size: 14px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.9);
}

/* ---------- SECCIONES ---------- */

section {
    padding: 140px 50px;
}

.section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 50px;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(45px, 6vw, 90px);
    font-weight: 400;
    line-height: 1;
}


/* =========================================================
   SERVICIOS
   TRES PANELES EDITORIALES
   ========================================================= */

.services {

    width: 100%;

    height: 100vh;

    min-height: 650px;

    padding: 0;

    background: #111;

    overflow: hidden;

}


.services-panels {

    display: flex;

    width: 100%;

    height: 100%;

}


/* =========================================================
   PANEL
   ========================================================= */

.service-panel {

    position: relative;

    flex: 1;

    height: 100%;

    overflow: hidden;

    color: white;

    text-decoration: none;

    border-right: 1px solid rgba(255,255,255,0.35);

    transition:
        flex 0.8s cubic-bezier(0.22, 1, 0.36, 1);

}


.service-panel:last-child {

    border-right: none;

}



/* =========================================================
   IMÁGENES
   ========================================================= */

.service-background {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    transform: scale(1);

    transition:
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);

}


/* ARQUITECTURA */

.architecture-bg {

    background-image:
        url("Images/RESIDENCIAL/portada.jpg");

}


/* INTERIORISMO */

.interior-bg {

    background-image:
        url("Images/INTERIORISMO/PP86.jpg");

}


/* COMERCIAL */

.commercial-bg {

    background-image:
        url("Images/COMERCIAL/B780.jpg");

}



/* =========================================================
   OSCURECIMIENTO
   ========================================================= */

.service-dark {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.35),
            rgba(0,0,0,0.05) 45%,
            rgba(0,0,0,0.65)
        );

    transition:
        background 0.8s ease;

}



/* =========================================================
   INFORMACIÓN
   ========================================================= */

.service-info {

    position: absolute;

    inset: 0;

    z-index: 2;

    padding: 32px;

}


/* NOMBRE */

.service-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(28px, 3vw, 46px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -1px;

    text-transform: none;

}


/* NÚMERO */

.service-number {

    position: absolute;

    left: 32px;

    bottom: 35px;

    font-size: 10px;

    letter-spacing: 4px;

    opacity: 0.75;

}


/* DESCRIPCIÓN */

.service-description {

    position: absolute;

    right: 32px;

    bottom: 35px;

    font-size: 9px;

    letter-spacing: 2px;

    text-transform: uppercase;

    opacity: 0.7;

}



/* =========================================================
   FLECHA
   ========================================================= */

.service-arrow {

    position: absolute;

    right: 35px;

    bottom: 35px;

    z-index: 3;

    font-size: 20px;

    color: white;

    opacity: 0.8;

    transition:
        transform 0.5s ease;

}



/* =========================================================
   HOVER
   ========================================================= */

.services-panels:hover .service-panel {

    flex: 0.85;

}


.services-panels .service-panel:hover {

    flex: 1.3;

}


.service-panel:hover .service-background {

    transform: scale(1.08);

}


.service-panel:hover .service-dark {

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.15),
            rgba(0,0,0,0.0) 50%,
            rgba(0,0,0,0.55)
        );

}


.service-panel:hover .service-arrow {

    transform: translate(5px,-5px);

}



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

@media (max-width: 900px) {

    .services {

        min-height: 600px;

    }

    .service-info {

        padding: 25px;

    }

    .service-number {

        left: 25px;

        bottom: 30px;

    }

    .service-description {

        left: 55px;

        bottom: 30px;

    }

    .service-arrow {

        right: 25px;

        bottom: 25px;

    }

}



/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 650px) {

    .services {

        height: auto;

    }

    .services-panels {

        flex-direction: column;

    }

    .service-panel {

        flex: none !important;

        width: 100%;

        height: 65vh;

        min-height: 450px;

        border-right: none;

        border-bottom: 1px solid rgba(255,255,255,0.3);

    }

    .service-panel:last-child {

        border-bottom: none;

    }

}


/* ---------- PROYECTOS ---------- */

.projects {
    background-color: #171717;
    color: #f4f1eb;
}

.project-grid {
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px 30px;
}

.project-image {
    height: 600px;
    background-color: #333;
    overflow: hidden;
}

.project-info {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.project-name {
    font-family: 'Playfair Display', serif;
    font-size: 27px;
}

.project-category {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
}


/* ---------- ESTUDIO ---------- */

.studio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}

.studio-text {
    max-width: 550px;
}

.studio-text p {
    font-size: 18px;
    line-height: 1.8;
    margin-top: 35px;
}


/* ---------- CONTACTO ---------- */

.contact {
    background-color: #171717;
    color: #f4f1eb;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-email {
    font-family: 'Playfair Display', serif;
    font-size: clamp(35px, 6vw, 90px);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #777;
    padding-bottom: 15px;
    width: fit-content;
}


/* ---------- FOOTER ---------- */

footer {
    background-color: #171717;
    color: #aaa;
    padding: 30px 50px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 768px) {

    header {
        padding: 20px 18px;
        box-sizing: border-box;
        gap: 12px;
    }

}


    section {
        padding: 100px 25px;
    }

    .hero {
        padding: 25px;
    }

    .hero h1 {
        letter-spacing: -2px;
    }

    .project-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .project-image {
        height: 450px;
    }
.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.project:hover .project-image img {
    transform: scale(1.03);
}
    .studio {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    footer {
        padding: 25px;
        flex-direction: column;
        gap: 10px;
    }
}
/* Ajuste exclusivo para B780 */

.b780-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* =========================================
   CATEGORÍAS DE PROYECTOS
   ========================================= */

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    width: 100%;

    height: 70vh;
    min-height: 500px;

    margin-top: 55px;

    gap: 1px;

    background: rgba(255, 255, 255, 0.3);
}

.category-card {
    position: relative;

    height: 100%;

    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    color: white;
    text-decoration: none;

    overflow: hidden;

    background-size: cover;
    background-position: center;

    transition: background-size 0.6s ease;
}

/* IMAGEN DE CADA CATEGORÍA */

.category-card:nth-child(1) {
    background-image:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.05) 65%
        ),
        url("Images/RESIDENCIAL/portada.jpg");
}

.category-card:nth-child(2) {
    background-image:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.05) 65%
        ),
        url("Images/INTERIORISMO/PP86.jpg");
}

.category-card:nth-child(3) {
    background-image:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.05) 65%
        ),
        url("Images/COMERCIAL/B780.jpg");
}


/* TEXTO PEQUEÑO Y DISCRETO */

.category-number {
    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 2px;

    opacity: 0.7;

    margin-bottom: 7px;
}

.category-name {
    font-family: 'Playfair Display', serif;

    font-size: 22px;

    font-weight: 400;

    line-height: 1.1;
}

.category-arrow {
    position: absolute;

    right: 22px;
    bottom: 22px;

    font-size: 15px;

    opacity: 0.8;

    transition: transform 0.4s ease;
}


/* CAPA SUTIL SOBRE LAS IMÁGENES */

.category-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55),
        rgba(0, 0, 0, 0.05) 65%
    );

    pointer-events: none;
}


/* TEXTO POR ENCIMA DE LA IMAGEN */

.category-card .category-number,
.category-card .category-name,
.category-card .category-arrow {
    z-index: 2;
}


/* EFECTO AL PASAR EL MOUSE */

.category-card:hover {
    background-size: 105%;
}

.category-card:hover .category-arrow {
    transform: translate(4px, -4px);
}


/* EN PANTALLAS PEQUEÑAS */

@media (max-width: 800px) {

    .project-grid {
        grid-template-columns: 1fr;

        height: auto;
    }

    .category-card {
        height: 45vh;
        min-height: 300px;
    }

}

/* =========================================
   FORMULARIO DE CONTACTO
   ========================================= */

.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;

    padding: 140px 50px;

    min-height: 90vh;
}

.contact-intro {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.contact-text {
    max-width: 390px;

    margin-top: 35px;

    font-size: 14px;
    line-height: 1.7;

    color: #666;
}


/* FORMULARIO */

.contact-form {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 520px;
}


/* CAMPOS */

.form-field {
    display: flex;
    flex-direction: column;

    margin-bottom: 28px;
}

.form-field label {
    margin-bottom: 9px;

    font-size: 10px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #555;
}

.form-field input,
.form-field select,
.form-field textarea {

        width: 100%;

    padding: 14px 0;

    border: none;

    border-bottom: 1px solid #bdbdbd;

    background: transparent;

    font-family: Arial, sans-serif;

    font-size: 15px;

    color: #222;

    outline: none;

    border-radius: 0;
}

.form-field textarea {
    resize: vertical;

    min-height: 100px;
}


/* EFECTO AL SELECCIONAR UN CAMPO */

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

    border-bottom: 1px solid #222;
}


/* BOTÓN */

.form-button {

    align-self: flex-start;

    margin-top: 15px;

    padding: 14px 0;

    border: none;

    background: transparent;

    font-family: Arial, sans-serif;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 2px;

    color: #222;

    cursor: pointer;
}


.form-button span {

    display: inline-block;

    margin-left: 10px;

    transition: transform 0.3s ease;
}

.form-button:hover span {

    transform: translateX(5px);
}


/* AVISO */

.form-note {

    max-width: 390px;

    margin-top: 35px;

    font-size: 10px;

    line-height: 1.6;

    color: #999;
}


/* =========================================
   CONTACTO EN CELULAR
   ========================================= */

@media (max-width: 800px) {

    .contact {

        grid-template-columns: 1fr;

        gap: 60px;

        padding: 100px 25px;
    }

    .contact-form {

        max-width: none;
    }

}
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #777;
    opacity: 1;
}

/* TEXTO DEL FORMULARIO SOBRE FONDO OSCURO */

.contact-form input,
.contact-form select,
.contact-form textarea {
    color: #fff !important;
    background-color: transparent !important;
    caret-color: #fff;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    border-bottom-color: rgba(255, 255, 255, 0.45) !important;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-bottom-color: #fff !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1;
}

/* BOTÓN ENVIAR — MÁS VISIBLE */

.form-button {
    position: relative;

    padding: 12px 0;

    color: #fff !important;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 2px;

    background: transparent;

    border: none;

    cursor: pointer;

    opacity: 1;
}

.form-button::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 4px;

    width: 100%;
    height: 1px;

    background: rgba(255, 255, 255, 0.7);

    transition: width 0.3s ease;
}

.form-button:hover::after {
    width: 70%;
}

.form-button span {
    color: #fff;

    margin-left: 10px;

    transition: transform 0.3s ease;
}

.form-button:hover span {
    transform: translateX(5px);
}

/* =========================================
   PÁGINAS DE CATEGORÍAS
   ========================================= */


.category-header {
    max-width: 650px;
    margin-bottom: 70px;
}

.category-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(48px, 6vw, 85px);
    font-weight: 400;
    line-height: 0.95;
    margin-top: 20px;
}

.category-header p {
    max-width: 450px;
    margin-top: 25px;
    font-size: 14px;
    line-height: 1.7;
    color: #666;
}


/* GALERÍA DE MINIATURAS */

.project-gallery {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px 20px;

    width: 100%;
}


/* CADA PROYECTO */

.project-thumbnail {
    display: block;

    color: #222;

    text-decoration: none;
}


/* IMAGEN */

.project-thumbnail-image {
    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #ddd;
}

.project-thumbnail-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.7s ease;
}


/* INFORMACIÓN */

.project-thumbnail-info {
    display: flex;

    align-items: baseline;

    gap: 15px;

    padding-top: 13px;
}

.project-thumbnail-info span {
    font-family: Arial, sans-serif;

    font-size: 9px;

    letter-spacing: 1px;

    color: #888;
}

.project-thumbnail-info h2 {
    font-family: 'Playfair Display', serif;

    font-size: 19px;

    font-weight: 400;

    margin: 0;
}


/* EFECTO HOVER */

.project-thumbnail:hover
.project-thumbnail-image img {
    transform: scale(1.04);
}


/* CELULAR */

@media (max-width: 800px) {

    .category-page {
        padding: 120px 25px 70px;
    }

    .project-gallery {
        grid-template-columns: 1fr;
        gap: 45px;
    }

}

/* =========================================
   GALERÍA DE PROYECTOS — ARQUITECTURA
   ========================================= */



/* CUADRÍCULA */

.project-gallery {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 32px 18px;

    width: 100%;
}


/* MINIATURA */

.project-thumbnail {
    display: block;

    color: #222;

    text-decoration: none;
}


/* IMAGEN */

.project-thumbnail-image {
    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #ddd;
}

.project-thumbnail-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;
}


/* INFORMACIÓN DEL PROYECTO */

.project-thumbnail-info {
    display: flex;

    align-items: baseline;

    gap: 12px;

    padding-top: 9px;
}

.project-thumbnail-info span {
    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 1px;

    color: #888;
}

.project-thumbnail-info h2 {
    font-family: 'Playfair Display', serif;

    font-size: 17px;

    font-weight: 400;

    margin: 0;
}


/* EFECTO AL PASAR EL MOUSE */

.project-thumbnail:hover
.project-thumbnail-image img {
    transform: scale(1.03);
}


/* PANTALLAS MEDIANAS */

@media (max-width: 1000px) {

    .project-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* CELULAR */

@media (max-width: 600px) {

    .category-page {
        padding: 100px 20px 50px;
    }

    .project-gallery {
        grid-template-columns: 1fr;

        gap: 35px;
    }

}

/* =========================================
   GALERÍA ARQUITECTURA — PANTALLA COMPLETA
   ========================================= */


.project-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100vw;
    height: 100vh;
    gap: 0;
    margin: 0;
    padding: 0;
}

.project-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: white;
    text-decoration: none;
    background: #222;
}

.project-thumbnail-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.project-thumbnail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.project-thumbnail::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0) 55%
    );
    pointer-events: none;
}

.project-thumbnail-info {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.project-thumbnail-info span {
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
}

.project-thumbnail-info h2 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 400;
    color: white;
}

.project-thumbnail:hover .project-thumbnail-image img {
    transform: scale(1.06);
}


/* =========================================
   PÁGINAS INDIVIDUALES DE PROYECTOS
   ========================================= */

.project-page {
    margin: 0;
    background: #f5f3ef;
    color: #111;
}

/* INTRO DEL PROYECTO */

.project-detail {
    padding-top: 120px;
}

.project-intro {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 30px;
    padding: 70px 7vw 90px;
}

.project-intro-number {
    font-family: Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: #777;
}

.project-intro-content {
    max-width: 700px;
}

.project-category {
    margin: 0 0 20px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    color: #777;
}

.project-intro h1 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(60px, 9vw, 130px);
    font-weight: 400;
    line-height: 0.9;
}

.project-location {
    margin: 18px 0 35px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: #666;
}

.project-description {
    max-width: 480px;
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #444;
}


/* GALERÍA */

.project-images {
    width: 100%;
    padding: 0 5vw;
}

.project-image {
    width: 100%;
    margin-bottom: 5vw;
}

.project-image img {
    width: 100%;
    height: auto;
    display: block;
}

.project-image-large {
    width: 100%;
}


/* VOLVER */

.project-back {
    padding: 60px 7vw 100px;
}

.project-back a {
    color: #111;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
}

.project-back a:hover {
    opacity: 0.5;
}


/* FOOTER */

.project-page footer {
    display: flex;
    justify-content: space-between;
    padding: 30px 50px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    color: #777;
}

/* =========================================================
   GALERÍA CCY
========================================================= */

.ccy-page {
      background: #1c1c1c;
    color: #f4f1eb;
}

.ccy-gallery {
    width: 100%;
    padding: 110px 4vw 0;
    box-sizing: border-box;
}

/* Fotografías completas con marco fino */

/* Fotografías sin marco */

.ccy-gallery-image {
    width: 100%;
    margin: 0 auto 35px;
    padding: 0;
    box-sizing: border-box;

    border: none;
    background: transparent;
}

.ccy-gallery-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Volver a proyectos */

.ccy-back {
    padding: 35px 0 65px;
    text-align: center;
}

.ccy-back a {
    color: #f4f1eb;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 2px;
    transition: opacity 0.3s ease;
}

.ccy-back a:hover {
    opacity: 0.6;
}

/* Ajustes para celular */

@media (max-width: 768px) {

    .ccy-gallery {
        padding: 95px 4vw 0;
    }

    .ccy-gallery-image {
        margin-bottom: 18px;
        padding: 3px;
    }

    .ccy-back {
        padding: 28px 0 45px;
    }

}

/* =========================================
   FOOTER
   ========================================= */

.project-page footer {
    background: #e8e3da;
    color: #555;

    display: flex;
    justify-content: space-between;

    padding: 30px 40px;

    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
}

/* AJUSTE FINAL — PIE DE PROYECTO */

.project-page .project-images {
    padding-bottom: 0 !important;
}

.project-page .project-images .project-image {
    margin-bottom: 0 !important;
}

.project-page .project-back {
    margin: 0 !important;
    padding: 8px 10px 15px !important;
}

.project-page footer {
    margin: 0 !important;
    padding-top: 18px !important;
}

/* =========================================
   FINAL DE GALERÍA — VOLVER A PROYECTOS
   ========================================= */

.project-page .project-images {
    padding-bottom: 0 !important;
}

.project-page .project-images .project-image {
    margin-bottom: 0 !important;
}

.project-page .project-back {
    margin: 0 !important;
    padding: 18px 10px 12px !important;
    background: #e8e3da;
    text-align: center;
}

.project-page .project-back a {
    display: inline-block;
    color: #111;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
}

.project-page footer {
    margin: 0 !important;
    padding: 12px 40px 22px !important;
    background: #e8e3da;
}

.project-page .project-image-last {
    position: relative !important;
    margin-bottom: 0 !important;
    background: #e8e3da !important;
}

.project-page .project-image-last .project-back {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 10px 12px !important;
    margin: 0 !important;
    background: #e8e3da !important;
    text-align: center !important;
}

.project-page .project-image-last .project-back a {
    color: #111 !important;
}

.project-page .project-image-last .project-back {
    padding: 28px 10px 28px !important;
}

/* ---------- UBICACIÓN ---------- */

.contact-location {
    width: 100%;
    margin-top: 0;
    padding-top: 70px;

    display: grid;
    grid-template-columns: 0.8fr 2.2fr;
    gap: 60px;
    align-items: start;

    background-color: #171717;
    color: #f4f1eb;

    border-top: 1px solid rgba(244, 241, 235, 0.2);
}


.location-info {
    padding-top: 5px;
    background-color: #171717;
}

.location-info h3 {
    margin: 20px 0 18px;
    font-size: 28px;
    font-weight: 400;
    color: #f4f1eb;
}

.location-info p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #f4f1eb;
}

.location-map {
    width: 100%;
    height: 450px;
    overflow: hidden;
    background-color: #171717;
}

.location-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;

    filter: sepia(15%) saturate(65%) brightness(90%);
}


/* ---------- OCULTAR PIE DE PÁGINA ---------- */

footer {
    display: none;
}


/* ---------- MÓVIL ---------- */

@media (max-width: 768px) {

    .contact-location {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-top: 80px;
        padding-top: 50px;
    }

    .location-map {
        height: 380px;
    }

}

/* =========================================
   SERVICIOS — ESTILO EDITORIAL
   ========================================= */

.services {
    width: 100%;
    height: 100vh;
    min-height: 650px;
    padding: 0;
    background: #111;
    overflow: hidden;
}

.services-panels {
    display: flex;
    width: 100%;
    height: 100%;
}

.service-panel {
    position: relative;
    flex: 1;
    height: 100%;
    overflow: hidden;

    color: #f4f1eb;
    text-decoration: none;

    border-right: 1px solid rgba(255,255,255,0.15);

    transition: flex 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-panel:last-child {
    border-right: none;
}


/* ---------- IMAGEN ---------- */

.service-background {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center;

    transform: scale(1);

    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------- OSCURECIMIENTO ---------- */

.service-dark {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.28) 0%,
            rgba(0,0,0,0.05) 45%,
            rgba(0,0,0,0.60) 100%
        );
}


/* ---------- INFORMACIÓN ---------- */

.service-info {
    position: absolute;
    inset: 0;
    z-index: 2;

    padding: 135px 54px 50px;

    display: flex;
    flex-direction: column;
}


/* ---------- NÚMERO + LÍNEA ---------- */

.service-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-number {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 400;
    color: rgba(244,241,235,0.85);
}

.service-line {
    width: 55px;
    height: 1px;
    background: rgba(244,241,235,0.55);
}


/* ---------- CONTENIDO ---------- */

.service-content {
    margin-top: 25px;
    max-width: 300px;
}

.service-title {
    margin: 0;

    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 3vw, 46px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -1px;

    color: #f4f1eb;
}

.service-description {
    margin: 28px 0 0;

    max-width: 285px;

    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: rgba(244,241,235,0.78);
}


/* ---------- VER MÁS ---------- */

.service-more {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-top: 58px;

    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 3px;

    color: #f4f1eb;
}

.service-more span {
    font-size: 18px;
    letter-spacing: 0;

    transition: transform 0.4s ease;
}


/* ---------- HOVER ---------- */

.services-panels:hover .service-panel {
    flex: 0.9;
}

.services-panels .service-panel:hover {
    flex: 1.2;
}

.service-panel:hover .service-background {
    transform: scale(1.05);
}

.service-panel:hover .service-more span {
    transform: translateX(6px);
}


/* =========================================
   CELULAR
   ========================================= */

@media (max-width: 700px) {

    .services {
        height: auto;
        min-height: 0;
    }

    .services-panels {
        flex-direction: column;
    }

    .service-panel {
        flex: none !important;

        width: 100%;
        height: 82vh;
        min-height: 560px;

        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.18);
    }

    .service-panel:last-child {
        border-bottom: none;
    }

    .service-info {
        padding: 110px 28px 45px;
    }

    .service-content {
        margin-top: 24px;
        max-width: 330px;
    }

    .service-title {
        font-size: 38px;
    }

    .service-description {
        max-width: 310px;
        font-size: 14px;
        line-height: 1.7;
    }

    .service-more {
        margin-top: 45px;
    }

}



/* ========================================
   HOME — AJUSTES CONTACTO + UBICACIÓN
======================================== */

/* CONTACTO */
.contact {
    background: #171717;
    color: #f4f1eb;
    padding: 100px 50px;
    min-height: auto;
    margin: 0;
}

.contact-intro {
    margin-bottom: 45px;
}

.contact .section-title {
    margin-bottom: 25px;
}

.contact-text {
    color: #f4f1eb;
    max-width: 430px;
}


/* FORMULARIO */
.contact-form {
    width: 100%;
    max-width: 650px;
}

.contact-form .form-field {
    margin-bottom: 24px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    color: #f4f1eb;
    font-size: 10px;
    letter-spacing: 0.15em;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    color: #ffffff;
    border: none;
    border-bottom: 1px solid rgba(244, 241, 235, 0.45);
    border-radius: 0;
    padding: 11px 0;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-bottom-color: #f4f1eb;
}

.contact-form textarea {
    resize: vertical;
    min-height: 85px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(244, 241, 235, 0.5);
}

.contact-form select {
    color: #f4f1eb;
}

.contact-form select option {
    background: #171717;
    color: #f4f1eb;
}


/* BOTÓN */
.form-button {
    margin-top: 12px;
    padding: 14px 0;
    background: none;
    border: none;
    border-bottom: 1px solid #f4f1eb;
    color: #f4f1eb;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.15em;
    cursor: pointer;
}

.form-note {
    margin-top: 18px;
    color: rgba(244, 241, 235, 0.45);
    font-size: 10px;
}


/* ========================================
   UBICACIÓN
======================================== */

.contact-location {
    background: #171717;
    color: #f4f1eb;
    margin: 0;
    padding: 0 50px 90px;
    border-top: none;
}

.location-info {
    margin-bottom: 45px;
}

.location-info .section-label {
    color: #f4f1eb;
}

.location-info h2 {
    color: #f4f1eb;
    margin-bottom: 30px;
}

.location-info p,
.location-info address {
    color: rgba(244, 241, 235, 0.75);
}

.location-info address {
    font-style: normal;
    line-height: 1.7;
}

.location-map {
    width: 100%;
    height: 500px;
    background: #171717;
    overflow: hidden;
}

.location-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: none;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

    .contact {
        padding: 75px 22px 65px;
    }

    .contact-intro {
        margin-bottom: 38px;
    }

    .contact .section-title {
        font-size: clamp(38px, 11vw, 52px);
        line-height: 0.95;
        margin-bottom: 20px;
    }

    .contact-text {
        font-size: 14px;
        line-height: 1.5;
        max-width: 300px;
    }

    .contact-form {
        max-width: none;
    }

    .contact-form .form-field {
        margin-bottom: 19px;
    }

    .contact-form label {
        font-size: 9px;
        margin-bottom: 5px;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        font-size: 13px;
        padding: 9px 0;
    }

    .contact-form textarea {
        min-height: 65px;
    }

    .form-button {
        margin-top: 7px;
        padding: 11px 0;
        font-size: 10px;
    }

    .form-note {
        margin-top: 12px;
        font-size: 9px;
        line-height: 1.4;
    }


    /* UBICACIÓN */
    .contact-location {
        padding: 0 22px 55px;
        background: #171717;
    }

    .location-info {
        margin-bottom: 30px;
    }

    .location-info h2 {
        font-size: clamp(38px, 11vw, 52px);
        line-height: 0.95;
        margin-bottom: 24px;
    }

    .location-info p,
    .location-info address {
        font-size: 13px;
        line-height: 1.6;
    }

    .location-map {
        height: 350px;
    }
}

@media (max-width: 768px) {

    header nav {
        display: flex;
        gap: 12px;
        align-items: center;
        white-space: nowrap;
    }

    header nav a {
        font-size: 8px;
        letter-spacing: 0.7px;
    }

}

/* ========================================
   MENÚ MÓVIL
======================================== */

.menu-toggle {
    display: none;
}


/* MENÚ ABIERTO */

.mobile-menu {
    display: none;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

    /* Ocultar navegación normal */
    header .main-nav {
        display: none !important;
    }


    /* Botón hamburguesa */
    .menu-toggle {
        display: flex;
        width: 24px;
        height: 20px;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        z-index: 1100;
    }

    .menu-toggle span {
        display: block;
        width: 24px;
        height: 1px;
        background: white;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }


    /* MENÚ MÓVIL */

    .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 1050;

        background: #171717;

        display: flex;
        flex-direction: column;
        justify-content: center;

        padding: 30px;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity 0.35s ease,
            visibility 0.35s ease;
    }


    .mobile-menu a {
        color: #f4f1eb;
        text-decoration: none;

        font-family: inherit;
        font-size: clamp(38px, 12vw, 58px);
        line-height: 0.95;

        letter-spacing: -0.03em;

        margin-bottom: 22px;
    }


    /* MENÚ ACTIVO */

    .mobile-menu.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }


    /* HAMBURGUESA → X */

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(9.5px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-9.5px) rotate(-45deg);
    }

}

/* =========================================================
   ESTUDIO — NUEVA IDENTIDAD VISUAL
   Todo este bloque afecta únicamente a .studio-page
========================================================= */

.studio-page {
    background: #151515;
    color: #f4f1eb;
}


/* =========================================================
   HEADER
========================================================= */

.studio-page .site-header {
    color: #f4f1eb;
}

.studio-page .site-header .logo {
    color: #f4f1eb;
}

.studio-page .site-header .main-nav a {
    color: #f4f1eb;
}


/* =========================================================
   MANIFIESTO
========================================================= */

.studio-manifesto {
    min-height: 100vh;
    background: #151515;
    padding: 125px 50px 45px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.studio-topline {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #aaa7a0;
    border-bottom: 1px solid #3a3a3a;
    padding-bottom: 15px;
}

.studio-topline span:nth-child(2) {
    text-align: center;
}

.studio-topline span:nth-child(3) {
    text-align: right;
}

.manifesto-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-top: auto;
    margin-bottom: auto;
}

.manifesto-small {
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 1.8px;
    color: #aaa7a0;
}

.manifesto-main h1 {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: clamp(80px, 13vw, 190px);
    line-height: 0.82;
    font-weight: 500;
    letter-spacing: -0.075em;
    text-transform: uppercase;
    text-align: right;
}

.manifesto-main h1 em {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    letter-spacing: -0.055em;
}

.manifesto-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid #3a3a3a;
    padding-top: 18px;
}

.manifesto-bottom p {
    max-width: 390px;
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #c5c1ba;
}

.manifesto-arrow {
    font-size: 20px;
}


/* =========================================================
   DISCIPLINAS
========================================================= */

.studio-disciplines {
    background: #1c1c1c;
    padding: 100px 50px 120px;
    position: relative;
}

.studio-section-number {
    font-size: 10px;
    letter-spacing: 2px;
    color: #8e8b85;
    margin-bottom: 45px;
}

.disciplines-title {
    font-size: 10px;
    letter-spacing: 2px;
    color: #8e8b85;
    margin-bottom: 30px;
}

.disciplines-list {
    width: 70%;
    margin-left: auto;
    border-top: 1px solid #444;
}

.discipline {
    display: grid;
    grid-template-columns: 60px 1fr 30px;
    align-items: center;
    border-bottom: 1px solid #444;
    min-height: 125px;
    transition: padding 0.3s ease;
}

.discipline:hover {
    padding-left: 15px;
}

.discipline-number {
    font-size: 10px;
    color: #777;
    letter-spacing: 1px;
}

.discipline h2 {
    margin: 0;
    font-size: clamp(32px, 4.5vw, 65px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.045em;
}

.discipline-arrow {
    font-size: 20px;
    color: #aaa7a0;
    text-align: right;
}


/* =========================================================
   IMAGEN PRINCIPAL
========================================================= */

.studio-feature-image {
    height: 78vh;
    min-height: 500px;
    position: relative;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.05),
            rgba(0,0,0,0.55)
        ),
        url("Images/ESTUDIO/estudio.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.studio-image-overlay {
    position: absolute;
    left: 50px;
    right: 50px;
    bottom: 30px;

    display: flex;
    justify-content: space-between;

    font-size: 10px;
    letter-spacing: 1.5px;
    color: #f4f1eb;
}


/* =========================================================
   NÚMEROS — HECHOS
========================================================= */

.studio-numbers {
    background: #151515;
    padding: 110px 50px 130px;
    color: #f4f1eb;
}

.numbers-heading {
    font-size: 10px;
    letter-spacing: 2px;
    color: #8e8b85;

    margin-bottom: 45px;
}


/* =========================================================
   INTRO
========================================================= */

.numbers-intro {
    max-width: 520px;
    margin: 0 auto 100px;
    text-align: center;
}
.numbers-intro p {
    margin: 0;

    font-size: 16px;
    line-height: 1.65;

    color: #c5c1ba;
}


/* =========================================================
   NÚMEROS PRINCIPALES
========================================================= */

.numbers-feature {
    display: grid;

    grid-template-columns: 1fr 1fr;

    border-top: 1px solid #3a3a3a;
    border-bottom: 1px solid #3a3a3a;
}

.number-block {
    padding: 55px 0 60px;
}

.number-block + .number-block {
    border-left: 1px solid #3a3a3a;
    padding-left: 50px;
}

.number-value {
    font-size: clamp(150px, 22vw, 330px);

    line-height: 0.72;

    letter-spacing: -0.09em;

    font-weight: 500;
}

.number-value span {
    font-size: 0.32em;

    vertical-align: top;

    letter-spacing: -0.04em;
}

.number-label {
    margin-top: 45px;

    font-size: 10px;

    line-height: 1.5;

    letter-spacing: 1.7px;

    color: #8e8b85;
}


/* =========================================================
   FRASE FINAL
========================================================= */

.numbers-statement {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 60px;

    padding-top: 45px;
}

.numbers-statement > span {
    font-size: 10px;

    letter-spacing: 1.8px;

    color: #f4f1eb;
}

.numbers-statement p {
    max-width: 390px;

    margin: 0;

    font-size: 13px;

    line-height: 1.7;

    color: #8e8b85;
}

/* =========================================================
   ESTUDIO — MOBILE
========================================================= */

@media (max-width: 768px) {

    /* MANIFIESTO */

    .studio-manifesto {
        min-height: 100svh;
        padding: 95px 20px 30px;
    }

    .studio-topline {
        grid-template-columns: 1fr 1fr;
        font-size: 8px;
        letter-spacing: 1.2px;
    }

    .studio-topline span:nth-child(2) {
        display: none;
    }

    .studio-topline span:nth-child(3) {
        text-align: right;
    }

    .manifesto-main {
        display: block;
        margin-top: auto;
        margin-bottom: auto;
    }

    .manifesto-small {
        font-size: 8px;
        letter-spacing: 1.3px;
        margin-bottom: 35px;
    }

    .manifesto-main h1 {
        font-size: clamp(46px, 13vw, 72px);
        line-height: 0.86;
        text-align: left;
        letter-spacing: -0.065em;
    }

    .manifesto-bottom {
        padding-top: 15px;
    }

    .manifesto-bottom p {
        max-width: 270px;
        font-size: 10px;
        line-height: 1.5;
    }

    .manifesto-arrow {
        font-size: 17px;
    }


    /* DISCIPLINAS */

    .studio-disciplines {
        padding: 75px 20px 90px;
    }

    .studio-section-number {
        margin-bottom: 35px;
        font-size: 8px;
    }

    .disciplines-title {
        font-size: 8px;
        margin-bottom: 25px;
    }

    .disciplines-list {
        width: 100%;
        margin-left: 0;
    }

    .discipline {
        grid-template-columns: 35px 1fr 20px;
        min-height: 82px;
    }

    .discipline-number {
        font-size: 8px;
    }

    .discipline h2 {
        font-size: clamp(27px, 8vw, 45px);
        letter-spacing: -0.055em;
    }

    .discipline-arrow {
        font-size: 15px;
    }


    /* IMAGEN */

    .studio-feature-image {
        height: 62vh;
        min-height: 400px;
    }

    .studio-image-overlay {
        left: 20px;
        right: 20px;
        bottom: 20px;

        font-size: 8px;
        letter-spacing: 1px;
    }

}

/* =========================================================
   NÚMEROS — MOBILE
========================================================= */

@media (max-width: 768px) {

    .studio-numbers {
        padding: 75px 20px 90px;
    }

    .numbers-heading {
        font-size: 8px;

        margin-bottom: 35px;
    }

    .numbers-intro {
        max-width: 290px;

        margin-left: 0;

        margin-bottom: 70px;
    }

    .numbers-intro p {
        font-size: 13px;

        line-height: 1.65;
    }


    /* NÚMEROS */

    .numbers-feature {
        display: block;
    }

    .number-block {
        padding: 45px 0 50px;
    }

    .number-block + .number-block {
        border-left: none;

        border-top: 1px solid #3a3a3a;

        padding-left: 0;
    }

    .number-value {
        font-size: clamp(130px, 40vw, 230px);

        line-height: 0.72;
    }

    .number-label {
        margin-top: 30px;

        font-size: 8px;

        letter-spacing: 1.3px;
    }


    /* FRASE */

    .numbers-statement {
        display: block;

        padding-top: 35px;
    }

    .numbers-statement > span {
        display: block;

        font-size: 8px;

        letter-spacing: 1.3px;

        margin-bottom: 22px;
    }

    .numbers-statement p {
        max-width: 270px;

        font-size: 11px;

        line-height: 1.7;
    }

}

/* =========================================================
   QUIÉN ESTÁ DETRÁS — NICOLÁS UZCATEGUI
========================================================= */

.studio-page .studio-nico {
    background: #1c1c1c;
    color: #f4f1eb;
    padding: 110px 50px 130px;
    position: relative;
    box-sizing: border-box;
}

.studio-page .nico-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom: 1px solid #444;

    padding-bottom: 18px;
    margin-bottom: 70px;

    font-size: 10px;
    letter-spacing: 2px;
    color: #8e8b85;
}

.studio-page .nico-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 90px;

    align-items: start;

    max-width: 1350px;
    margin: 0 auto;
}


/* =========================================================
   FOTO
========================================================= */

.studio-page .nico-image {
    position: relative;

    min-height: 600px;

    overflow: hidden;

    background: #292929;
}

.studio-page .nico-image img {
    display: block;

    width: 100%;
    height: 600px;

    object-fit: cover;
    object-position: center;
}

.studio-page .nico-image-label {
    position: absolute;

    left: 25px;
    bottom: 22px;

    z-index: 2;

    font-size: 9px;
    letter-spacing: 1.8px;

    color: #f4f1eb;
}


/* =========================================================
   TEXTO
========================================================= */

.studio-page .nico-content {
    padding-top: 10px;

    max-width: 650px;
}

.studio-page .nico-content h2 {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: clamp(62px, 5.5vw, 88px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.045em;
}

.studio-page .nico-content h2 em {
    display: block;
    font-family: "Playfair Display", serif;
    font-size: 0.78em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

.studio-page .nico-role {
    font-size: 9px;
    letter-spacing: 1.8px;
    line-height: 1.6;
    color: #8e8b85;
    margin-top: 14px;
    margin-bottom: 0;
}

.studio-page .nico-content p {
    max-width: 520px;

    font-size: 14px;
    line-height: 1.75;

    color: #c5c1ba;

    margin: 0 0 28px;
}

.studio-page .nico-content .nico-lead {
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -0.035em;
    color: #f4f1eb;
    margin-top: 64px;
    margin-bottom: 52px;
}

/* =========================================================
   NICOLÁS — MOBILE
========================================================= */

@media (max-width: 768px) {

    .studio-page .studio-nico {
        padding: 75px 20px 90px;
    }

    .studio-page .nico-topline {
        font-size: 8px;
        letter-spacing: 1.2px;

        margin-bottom: 45px;
    }

    .studio-page .nico-topline span:last-child {
        display: none;
    }

    .studio-page .nico-grid {
        display: block;

        margin: 0;
    }


    /* FOTO */

    .studio-page .nico-image {
        min-height: 430px;

        margin-bottom: 50px;
    }

    .studio-page .nico-image img {
        height: 430px;
    }

    .studio-page .nico-image-label {
        left: 18px;
        bottom: 17px;

        font-size: 8px;
        letter-spacing: 1.3px;
    }


    /* TEXTO */

    .studio-page .nico-content {
        padding-top: 0;

        max-width: none;
    }

    .studio-page .nico-content h2 {
        font-size: clamp(62px, 17vw, 90px);

        line-height: 0.84;
        letter-spacing: -0.075em;

        margin-bottom: 22px;
    }
.studio-page .nico-role {
    font-size: 8px;
    letter-spacing: 1.2px;
    line-height: 1.6;
    margin-top: 12px;
    margin-bottom: 0;
}

    .studio-page .nico-content .nico-lead {
        font-size: 21px;
        line-height: 1.3;

        margin-bottom: 32px;
    }

    .studio-page .nico-content p {
        font-size: 13px;
        line-height: 1.7;

        margin-bottom: 24px;
    }

}

/* =========================================================
   CIERRE
========================================================= */

.studio-closing {
    min-height: 90vh;

    background: #151515;

    padding: 100px 50px 70px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.closing-number,
.closing-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: #8e8b85;
}

.studio-closing h2 {
    width: 100%;

    margin: auto 0;

    font-size: clamp(70px, 12vw, 180px);

    line-height: 0.82;

    letter-spacing: -0.08em;

    font-weight: 500;

    text-align: center;
}

.studio-closing h2 em {
    font-family: "Playfair Display", serif;
    font-weight: 400;
}

.studio-contact-link {
    align-self: flex-start;

    color: #f4f1eb;

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 1.5px;

    border-bottom: 1px solid #777;

    padding-bottom: 8px;

    transition: border-color 0.3s ease;
}

.studio-contact-link:hover {
    border-color: #f4f1eb;
}

/* =========================================================
   FOOTER ESTUDIO
========================================================= */

.studio-page footer {
    background: #151515;

    color: #8e8b85;

    border-top: 1px solid #303030;
}

.studio-closing h2 em {
    display: inline-block;
}

.studio-closing h2 em {
    font-family: "Playfair Display", serif;
    font-weight: 400;
}

.studio-contact-link {
    align-self: flex-start;

    color: #f4f1eb;
    text-decoration: none;

    font-size: 11px;
    letter-spacing: 1.5px;

    border-bottom: 1px solid #777;

    padding-bottom: 8px;

    transition: border-color 0.3s ease;
}

.studio-contact-link:hover {
    border-color: #f4f1eb;
}


/* =========================================================
   FOOTER ESTUDIO
========================================================= */

.studio-page footer {
    background: #151515;

    color: #8e8b85;

    border-top: 1px solid #303030;
}


/* =========================================================
   CIERRE — MOBILE
========================================================= */

@media (max-width: 768px) {

    .studio-closing {
        min-height: 85svh;

        padding: 75px 20px 40px;
    }

    .closing-number,
    .closing-label {
        font-size: 8px;
        letter-spacing: 1.3px;
    }

    .studio-closing h2 {
        font-size: clamp(60px, 16vw, 90px);

        line-height: 0.85;

        letter-spacing: -0.075em;
    }

    .studio-contact-link {
        font-size: 9px;

        letter-spacing: 1.2px;
    }

    .studio-page footer {
        padding: 25px 20px;

        font-size: 8px;
    }

}


/* =========================================================
   PÁGINAS DE CATEGORÍA — ARQUITECTURA / INTERIORISMO /
   CONSTRUCCIÓN / DESARROLLO
========================================================= */

.category-page {
    background: #151515;
    color: #f4f1eb;
}


/* =========================================================
   PÁGINAS DE CATEGORÍA — ARQUITECTURA
========================================================= */

body.category-page {
    margin: 0;
    padding: 0;
    background: #151515;
    color: #f4f1eb;
    overflow-x: hidden;
}

.category-page * {
    box-sizing: border-box;
}


/* =========================================================
   INTRO — ARQUITECTURA E INTERIORISMO
========================================================= */

.category-page .category-intro {
    min-height: 20vh;
    padding: 70px 50px 25px;
    box-sizing: border-box;
}

.category-page .category-topline {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    margin-bottom: 45px;

    font-size: 9px;
    letter-spacing: 1.8px;
    color: #8e8b85;

    border-bottom: 1px solid #3a3a3a;
    padding-bottom: 14px;
}

.category-page .category-topline span:nth-child(2) {
    text-align: center;
}

.category-page .category-topline span:nth-child(3) {
    text-align: right;
}


.category-page .category-heading {
    display: grid;

    grid-template-columns: 1fr 240px;

    align-items: end;

    gap: 40px;
}

.category-page .category-heading h1 {
    margin: 0;

    font-size: clamp(70px, 9vw, 135px);

    line-height: .78;

    letter-spacing: -.085em;

    font-weight: 500;
}

.category-page .category-heading p {
    margin: 0;

    max-width: 240px;

    font-size: 10px;

    line-height: 1.6;

    color: #aaa7a0;
}


/* =========================================================
   GALERÍA
========================================================= */

.category-page .category-projects {

    width: 100%;

    padding: 0 50px 100px;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

}


/* TARJETA */

.category-page .category-project {

    position: relative;

    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

    color: inherit;

    text-decoration: none;
}


/* IMAGEN */

.category-page .project-image {

    position: relative;

    width: 100%;

    aspect-ratio: 1.75 / 1;

    overflow: hidden;

    background: #292929;
}


/* FOTO */

.category-page .project-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}


/* DEGRADADO */

.category-page .project-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.62),
        transparent 58%
    );

    pointer-events: none;
}


/* NÚMERO */

.category-page .project-image > span {

    position: absolute;

    top: 12px;
    left: 14px;

    z-index: 3;

    font-size: 7px;

    letter-spacing: 1.5px;

    color: #f4f1eb;
}


/* =========================================================
   TEXTO SOBRE LA FOTO
========================================================= */

.category-page .project-info {

    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 13px;

    z-index: 4;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 0;

    margin: 0;

    border: none;
}


.category-page .project-info h2 {

    margin: 0;

    max-width: 75%;

    font-size: 18px;

    line-height: .95;

    letter-spacing: -.04em;

    font-weight: 500;

    color: #f4f1eb;
}


.category-page .project-info span {

    font-size: 6px;

    letter-spacing: 1.2px;

    color: #d2cec7;

    white-space: nowrap;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .category-page .category-project:hover
    .project-image img {

        transform: scale(1.035);

    }

}


/* =========================================================
   CIERRE
========================================================= */

.category-page .category-closing {

    min-height: 55vh;

    background: #1c1c1c;

    padding: 80px 50px 60px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .category-page .category-intro {
    min-height: 0;
    padding: 55px 20px 25px;
}


    .category-page .category-topline {

        grid-template-columns: 1fr 1fr;

        margin-bottom: 35px;

        font-size: 8px;

        letter-spacing: 1.1px;
    }


    .category-page .category-topline span:nth-child(2) {

        display: none;
    }


    .category-page .category-topline span:nth-child(3) {

        text-align: right;
    }


    .category-page .category-heading {

        display: block;
    }


    .category-page .category-heading h1 {

        font-size: clamp(52px, 14vw, 78px);

        line-height: .82;

        letter-spacing: -.075em;

        margin-bottom: 25px;
    }


    .category-page .category-heading p {

        max-width: 270px;

        margin: 0;

        font-size: 10px;

        line-height: 1.6;
    }


    /* GALERÍA MOBILE */

    .category-page .category-projects {

        display: flex;

        flex-direction: column;

        gap: 24px;

        padding: 0 20px 70px;
    }


    .category-page .project-image {

        aspect-ratio: 1.65 / 1;
    }


    .category-page .project-image > span {

        top: 11px;

        left: 12px;

        font-size: 7px;
    }


    .category-page .project-info {

        left: 12px;

        right: 12px;

        bottom: 11px;
    }


    .category-page .project-info h2 {

        font-size: 20px;
    }


    .category-page .project-info span {

        font-size: 6px;
    }

}

/* CIERRE */

.category-page .category-closing {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

    .category-page .category-heading {
        display: block;
    }

    .category-page .category-heading h1 {
        width: 100%;
        max-width: 100%;
        font-size: clamp(55px, 15vw, 90px);
        line-height: 0.82;
        letter-spacing: -0.075em;
        margin-bottom: 38px;
    }

    .category-page .category-heading p {
        width: 100%;
        max-width: 280px;
        font-size: 11px;
        line-height: 1.65;
    }

    .category-page .project-image {
        width: 100%;
        height: 58vh;
        min-height: 350px;
    }

    .category-page .project-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .category-page .project-info {
        width: 100%;
        max-width: 100%;
    }

    .category-page .project-info h2 {
        max-width: 75%;
        font-size: clamp(24px, 7vw, 40px);
    }

    .category-page .category-closing h2 {
        max-width: 100%;
    }

}

/* =========================================================
   GALERÍA DE PROYECTOS — ÍNDICE EDITORIAL
========================================================= */

body.category-page {
    overflow-x: hidden;
}


/* =========================================================
   PORTADA
========================================================= */

.category-page .category-intro {
    min-height: 48vh;
    padding: 125px 50px 55px;
}

.category-page .category-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: end;
    gap: 50px;
}

.category-page .category-heading h1 {
    margin: 0;
    font-size: clamp(75px, 11vw, 165px);
    line-height: .78;
    letter-spacing: -.085em;
}

.category-page .category-heading p {
    margin: 0 0 5px;
    max-width: 280px;
    font-size: 12px;
    line-height: 1.65;
    color: #aaa7a0;
}


/* =========================================================
   GALERÍA
========================================================= */

.category-page .category-projects {

    width: 100%;
    padding: 0 50px 120px;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 45px 22px;
}


/* PROYECTO */

.category-page .category-project {

    position: relative;

    display: block;

    width: 100%;
    margin: 0;

    color: inherit;
    text-decoration: none;

    overflow: hidden;
}


/* IMAGEN */

.category-page .project-image {

    position: relative;

    width: 100%;

    /*
       Formato rectangular horizontal
    */

    aspect-ratio: 1.45 / 1;

    min-height: 0;

    overflow: hidden;

    background: #292929;
}


/* FOTO */

.category-page .project-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .7s ease,
        filter .5s ease;
}


/* DEGRADADO PARA EL TEXTO */

.category-page .project-image::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 40%;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.55),
        transparent
    );

    pointer-events: none;
}


/* NÚMERO */

.category-page .project-image > span {

    position: absolute;

    top: 14px;
    left: 16px;

    z-index: 3;

    font-size: 8px;

    letter-spacing: 1.5px;

    color: #f4f1eb;
}


/* =========================================================
   INFORMACIÓN DENTRO DE LA FOTO
========================================================= */

.category-page .project-info {

    position: absolute;

    left: 16px;
    right: 16px;
    bottom: 15px;

    z-index: 4;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    padding: 0;

    border: none;
}


/* NOMBRE */

.category-page .project-info h2 {

    margin: 0;

    max-width: 75%;

    font-size: clamp(17px, 1.8vw, 28px);

    line-height: .95;

    letter-spacing: -.045em;

    font-weight: 500;

    color: #f4f1eb;
}


/* CATEGORÍA */

.category-page .project-info > span {

    font-size: 7px;

    letter-spacing: 1.3px;

    color: #d0ccc5;

    white-space: nowrap;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .category-page .category-project:hover
    .project-image img {

        transform: scale(1.035);

    }

}


/* =========================================================
   CIERRE
========================================================= */

.category-page .category-closing {

    min-height: 55vh;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {


    /* -----------------------------------------------------
       PORTADA
    ----------------------------------------------------- */

    .category-page .category-intro {
    min-height: 0;
    padding: 55px 20px 25px;
}


    .category-page .category-topline {

        margin-bottom: 38px;

        grid-template-columns: 1fr 1fr;

        font-size: 8px;

        letter-spacing: 1.1px;
    }


    .category-page .category-topline span:nth-child(2) {

        display: none;
    }


    .category-page .category-topline span:nth-child(3) {

        text-align: right;
    }


    .category-page .category-heading {

        display: block;
    }


    .category-page .category-heading h1 {

        font-size: clamp(52px, 14vw, 78px);

        line-height: .82;

        letter-spacing: -.075em;

        margin-bottom: 25px;
    }


    .category-page .category-heading p {

        max-width: 270px;

        margin: 0;

        font-size: 10px;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       GALERÍA MOBILE
    ----------------------------------------------------- */

    .category-page .category-projects {

        display: flex;

        flex-direction: column;

        gap: 28px;

        padding: 0 20px 75px;
    }


    .category-page .category-project {

        width: 100%;
    }


    /* FOTO MÁS COMPACTA */

    .category-page .project-image {

        width: 100%;

        aspect-ratio: 1.6 / 1;

        min-height: 0;

        height: auto;
    }


    /* NÚMERO */

    .category-page .project-image > span {

        top: 11px;

        left: 12px;

        font-size: 7px;
    }


    /* INFORMACIÓN */

    .category-page .project-info {

        left: 12px;

        right: 12px;

        bottom: 11px;
    }


    .category-page .project-info h2 {

        max-width: 72%;

        font-size: 20px;

        line-height: .95;
    }


    .category-page .project-info > span {

        font-size: 6px;

        letter-spacing: 1px;
    }


    /* DEGRADADO */

    .category-page .project-image::after {

        height: 45%;
    }


    /* CIERRE */

    .category-page .category-closing {

        min-height: 55vh;

        padding: 65px 20px 40px;
    }

}


/* =========================================
   CORRECCIÓN — ELIMINAR OSCURECIMIENTO
   DE LAS IMÁGENES DE PROYECTOS
========================================= */

.category-page .project-image::after {
    content: none !important;
    display: none !important;
}


/* GALERÍA: reducir espacio superior */
.category-page main {
    margin-top: 0;
    padding-top: 0;
}

.category-page .category-intro {
    margin-bottom: 0;
    padding-bottom: 0;
}

.category-page .category-projects {
    margin-top: 0;
}


/* =========================================================
   GALERÍAS: REDUCIR ESPACIO ANTES DE LAS FOTOGRAFÍAS ARQUITECTURA / INTERIORISMO 
========================================================= */

body.category-page .category-intro {
    min-height: 0 !important;
    height: auto !important;
    padding: 30px 50px 20px !important;
    margin: 0 !important;
}

body.category-page .category-projects {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* CELULAR */
@media (max-width: 768px) {
    body.category-page .category-intro {
        min-height: 0 !important;
        height: auto !important;
        padding: 25px 20px 18px !important;
    }
}



/* ENCABEZADO DE LAS PÁGINAS DE CATEGORÍAS */

body.category-page .site-header {
    color: #f4f1eb;
}

body.category-page .site-header .logo,
body.category-page .site-header .main-nav a,
body.category-page .site-header .main-nav a:link,
body.category-page .site-header .main-nav a:visited,
body.category-page .site-header .main-nav a:hover,
body.category-page .site-header .main-nav a:active {
    color: #f4f1eb !important;
    text-decoration: none !important;
}

/* =========================================================
   CIERRE DE CATEGORÍAS
========================================================= */

.category-page .category-closing a.closing-link {
    color: #f4f1eb;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.category-page .category-closing a.closing-link:hover {
    opacity: 0.65;
}


/* =========================================================
   CIERRE — CATEGORÍAS
========================================================= */

.category-page .category-closing {
    background: #1c1c1c;
    color: #f4f1eb;
    padding: 64px 4% 28px;
    margin-top: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

/* Línea superior */

.category-page .closing-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(244, 241, 235, 0.22);
}

.category-page .closing-brand {
    font-size: 14px;
    letter-spacing: 0.02em;
}

.category-page .closing-location {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: #bdb5a8;
}

/* Mensaje principal */

.category-page .closing-main {
    display: grid;
    grid-template-columns: 1.5fr 0.7fr;
    gap: 60px;
    align-items: end;
    padding: 68px 0 76px;
}

.category-page .closing-label {
    display: block;
    margin-bottom: 24px;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: #bdb5a8;
}

.category-page .closing-message h2 {
    margin: 0;
    max-width: 720px;
    font-size: clamp(30px, 4.2vw, 58px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -0.045em;
}

.category-page .closing-message h2 em {
    display: block;
    margin-top: 8px;
    font-weight: 400;
}

/* Contacto */

.category-page .closing-contact {
    padding-bottom: 6px;
}

.category-page .closing-contact p {
    margin: 0 0 20px;
    color: #bdb5a8;
    font-size: 13px;
    line-height: 1.6;
}

.category-page .category-closing a.closing-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: #f4f1eb;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 0.06em;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(244, 241, 235, 0.65);
    transition: opacity 0.3s ease;
}

.category-page .category-closing a.closing-link:hover {
    opacity: 0.6;
}

/* Línea inferior */

.category-page .closing-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(244, 241, 235, 0.22);
    color: #bdb5a8;
    font-size: 9px;
    letter-spacing: 0.1em;
    line-height: 1.8;
}

/* Adaptación a móvil */

@media (max-width: 700px) {

    .category-page .category-closing {
        padding: 38px 6% 22px;
    }

    .category-page .closing-top {
        align-items: flex-start;
    }

    .category-page .closing-brand {
        font-size: 11px;
    }

    .category-page .closing-location {
        font-size: 8px;
        text-align: right;
    }

    .category-page .closing-main {
        grid-template-columns: 1fr;
        gap: 38px;
        padding: 52px 0 48px;
    }

    .category-page .closing-label {
        margin-bottom: 18px;
        font-size: 9px;
    }

    .category-page .closing-message h2 {
        font-size: clamp(29px, 8vw, 42px);
        line-height: 1.12;
    }

    .category-page .closing-contact p {
        margin-bottom: 16px;
    }

    .category-page .closing-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: 8px;
    }
}

/* =========================================================
   CONSTRUCCIÓN — UZCATEGUI ARQUITECTOS
   Estilo editorial y minimalista
========================================================= */

.construction-page {
    --construction-bg: #151515;
    --construction-text: #f4f1eb;
    --construction-muted: rgba(244, 241, 235, 0.64);
    --construction-line: rgba(244, 241, 235, 0.22);
}


/* =========================================================
   PRESENTACIÓN
========================================================= */

.construction-page .construction-hero {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 7%;
    padding: 100px 7% 120px;
}

.construction-page .construction-hero-copy {
    max-width: 540px;
}

.construction-page .construction-eyebrow,
.construction-page .construction-section-number {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 1.8px;
    line-height: 1.7;
    color: var(--construction-muted);
}

.construction-page .construction-hero h1 {
    margin: 28px 0 34px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(46px, 6vw, 86px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -2px;
}

.construction-page .construction-hero h1 em,
.construction-page .construction-statement h2 em,
.construction-page .construction-transparency h2 em {
    font-weight: 400;
    color: var(--construction-muted);
}

.construction-page .construction-lead {
    max-width: 420px;
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.8;
}

.construction-page .construction-description {
    max-width: 420px;
    margin: 0;
    color: var(--construction-muted);
    font-size: 13px;
    line-height: 1.9;
}


/* IMAGEN PRINCIPAL */

.construction-page .construction-hero-image {
    position: relative;
    min-width: 0;
    margin: 0;
}

.construction-page .construction-hero-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: #242424;
}

.construction-page .construction-hero-image figcaption {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-top: 13px;
    color: var(--construction-muted);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 1.2px;
}


/* =========================================================
   DECLARACIÓN
========================================================= */

.construction-page .construction-statement {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 8%;
    padding: 70px 10% 100px;
    border-top: 1px solid var(--construction-line);
    border-bottom: 1px solid var(--construction-line);
}

.construction-page .construction-statement-content {
    max-width: 760px;
}

.construction-page .construction-statement h2 {
    margin: 0 0 26px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.7px;
}

.construction-page .construction-statement-content p {
    max-width: 500px;
    margin: 0;
    color: var(--construction-muted);
    font-size: 13px;
    line-height: 1.9;
}


/* =========================================================
   SERVICIOS
========================================================= */

.construction-page .construction-services {
    padding: 110px 7% 120px;
}

.construction-page .construction-services-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 65px;
}

.construction-page .construction-services-heading h2 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 3.8vw, 48px);
    font-weight: 400;
    line-height: 1.2;
}

.construction-page .construction-service {
    display: grid;
    grid-template-columns: 0.65fr 1fr 1.2fr;
    gap: 30px;
    align-items: start;
    padding: 30px 0 35px;
    border-top: 1px solid var(--construction-line);
}

.construction-page .construction-service:last-child {
    border-bottom: 1px solid var(--construction-line);
}

.construction-page .construction-service-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--construction-muted);
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 1.3px;
}

.construction-page .construction-service-top span:first-child {
    color: var(--construction-text);
    font-size: 13px;
}

.construction-page .construction-service h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(21px, 2.4vw, 29px);
    font-weight: 400;
    line-height: 1.3;
}

.construction-page .construction-service p {
    max-width: 470px;
    margin: 0;
    color: var(--construction-muted);
    font-size: 13px;
    line-height: 1.9;
}


/* =========================================================
   TRANSPARENCIA Y SEGUIMIENTO
========================================================= */

.construction-page .construction-transparency {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 9%;
    padding: 90px 10% 110px;
    background: #1b1b1b;
}

.construction-page .construction-transparency-image {
    min-width: 0;
}

.construction-page .construction-transparency-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: #242424;
}

.construction-page .construction-image-caption {
    display: block;
    padding-top: 14px;
    color: var(--construction-muted);
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 1.3px;
}

.construction-page .construction-transparency-copy h2 {
    margin: 25px 0 28px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(35px, 4.3vw, 57px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.8px;
}

.construction-page .construction-transparency-copy p {
    max-width: 460px;
    margin: 0 0 18px;
    color: var(--construction-muted);
    font-size: 13px;
    line-height: 1.9;
}

.construction-page .construction-transparency-copy p:first-of-type {
    color: var(--construction-text);
    font-size: 15px;
}


/* =========================================================
   PRINCIPIO DE CIERRE
========================================================= */

.construction-page .construction-principle {
    max-width: 900px;
    margin: 0 auto;
    padding: 105px 8%;
    text-align: center;
}

.construction-page .construction-principle span {
    display: block;
    margin-bottom: 27px;
    color: var(--construction-muted);
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 1.7px;
}

.construction-page .construction-principle p {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 3.5vw, 39px);
    font-weight: 400;
    line-height: 1.5;
}


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

@media (max-width: 900px) {

    .construction-page .construction-hero {
        grid-template-columns: 1fr 0.9fr;
        gap: 5%;
        padding: 80px 5% 90px;
    }

    .construction-page .construction-hero h1 {
        font-size: clamp(43px, 6vw, 62px);
    }

    .construction-page .construction-statement {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 70px 7%;
    }

    .construction-page .construction-services {
        padding: 85px 6%;
    }

    .construction-page .construction-service {
        grid-template-columns: 0.4fr 1fr 1.2fr;
        gap: 20px;
    }

    .construction-page .construction-transparency {
        gap: 6%;
        padding: 75px 6%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .construction-page .construction-hero {
        grid-template-columns: 1fr;
        gap: 42px;
        padding: 55px 6% 70px;
    }

    .construction-page .construction-hero h1 {
        margin: 23px 0 26px;
        font-size: clamp(45px, 12vw, 68px);
        letter-spacing: -1.5px;
    }

    .construction-page .construction-lead {
        font-size: 15px;
    }

    .construction-page .construction-description {
        font-size: 12px;
    }

    .construction-page .construction-hero-image img {
        aspect-ratio: 4 / 4.2;
    }

    .construction-page .construction-statement {
        gap: 28px;
        padding: 60px 6%;
    }

    .construction-page .construction-statement h2 {
        font-size: clamp(29px, 8vw, 42px);
    }

    .construction-page .construction-services {
        padding: 70px 6% 80px;
    }

    .construction-page .construction-services-heading {
        flex-direction: column;
        gap: 25px;
        margin-bottom: 40px;
    }

    .construction-page .construction-services-heading h2 {
        font-size: 34px;
    }

    .construction-page .construction-service {
        grid-template-columns: 42px 1fr;
        gap: 12px 18px;
        padding: 26px 0 30px;
    }

    .construction-page .construction-service-top {
        grid-row: 1 / span 2;
    }

    .construction-page .construction-service h3 {
        font-size: 24px;
    }

    .construction-page .construction-service p {
        grid-column: 2;
        font-size: 12px;
    }

    .construction-page .construction-transparency {
        grid-template-columns: 1fr;
        gap: 42px;
        padding: 65px 6% 75px;
    }

    .construction-page .construction-transparency-image img {
        aspect-ratio: 4 / 3.5;
    }

    .construction-page .construction-transparency-copy h2 {
        margin: 22px 0;
        font-size: clamp(36px, 10vw, 48px);
    }

    .construction-page .construction-principle {
        padding: 75px 7%;
    }

    .construction-page .construction-principle p {
        font-size: 26px;
        line-height: 1.45;
    }

}


/* =========================================================
   DESARROLLO INMOBILIARIO
   UZCÁTEGUI ARQUITECTOS
========================================================= */

.development-page {
    --dev-bg: #151515;
    --dev-text: #f4f1eb;
    --dev-muted: rgba(244, 241, 235, 0.68);
    --dev-line: rgba(244, 241, 235, 0.22);

    background: var(--dev-bg);
    color: var(--dev-text);
}

.development-page *,
.development-page *::before,
.development-page *::after {
    box-sizing: border-box;
}

.development-page h1,
.development-page h2,
.development-page h3,
.development-page p {
    margin-top: 0;
}

.development-page em {
    font-family: "Playfair Display", serif;
    font-weight: 400;
}

.development-page figure {
    margin: 0;
}

.development-page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ETIQUETAS */

.development-eyebrow {
    display: block;
    color: var(--dev-muted);
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.14em;
}


/* HERO */

.development-hero {
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    align-items: center;
    gap: 7%;

    padding: 75px 7% 100px;
}

.development-copy {
    max-width: 570px;
}

.development-copy h1 {
    margin: 27px 0 25px;

    font-family: "DM Sans", sans-serif;
    font-size: clamp(34px, 4.2vw, 58px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.055em;
}

.development-intro-text {
    max-width: 440px;
    margin-bottom: 28px;

    color: var(--dev-muted);
    font-size: 14px;
    line-height: 1.85;
}

.development-image {
    position: relative;
    min-width: 0;
    height: min(55vw, 600px);
    min-height: 390px;
    overflow: hidden;
}

.development-image img {
    object-fit: contain;
    object-position: center;
    background: #151515;
}

.development-image figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    padding: 15px 17px;

    background: rgba(21, 21, 21, 0.7);
    border-top: 1px solid var(--dev-line);

    color: var(--dev-text);
    font-size: 9px;
    letter-spacing: 0.13em;
}


/* BOTONES */

.development-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    min-height: 48px;
    padding: 13px 0;

    border-bottom: 1px solid var(--dev-text);

    color: var(--dev-text);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-decoration: none;

    transition: opacity 0.25s ease;
}

.development-button:hover {
    opacity: 0.65;
}

.development-button span {
    font-size: 17px;
}


/* PROCESO */

.development-process {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 8%;

    padding: 90px 7% 105px;

    border-top: 1px solid var(--dev-line);
}

.development-heading {
    max-width: 410px;
}

.development-heading h2,
.development-team-copy h2,
.development-contact h2 {
    margin: 25px 0;

    font-family: "DM Sans", sans-serif;
    font-size: clamp(32px, 3.7vw, 47px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.045em;
}

.development-heading > p {
    max-width: 370px;
    margin-bottom: 0;

    color: var(--dev-muted);
    font-size: 13px;
    line-height: 1.85;
}

.development-steps {
    border-top: 1px solid var(--dev-line);
}

.development-step {
    display: grid;
    grid-template-columns: 35px 1fr;
    column-gap: 18px;

    padding: 25px 0 27px;

    border-bottom: 1px solid var(--dev-line);
}

.development-step-number {
    padding-top: 4px;
    color: var(--dev-muted);
    font-size: 10px;
    letter-spacing: 0.1em;
}

.development-step h3 {
    margin: 0 0 9px;

    font-family: "Playfair Display", serif;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.3;
}

.development-step p {
    max-width: 470px;
    margin-bottom: 0;

    color: var(--dev-muted);
    font-size: 12px;
    line-height: 1.85;
}


/* EQUIPO MULTIDISCIPLINARIO */

.development-team {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    align-items: center;
    gap: 8%;

    padding: 30px 7% 110px;
}

.development-team-image {
    height: 470px;
    overflow: hidden;
}

.development-team-copy {
    max-width: 500px;
}

.development-team-copy h2 {
    font-size: clamp(30px, 3.5vw, 43px);
}

.development-team-copy p {
    margin-bottom: 16px;

    color: var(--dev-muted);
    font-size: 12px;
    line-height: 1.9;
}

.development-team-copy p:last-child {
    margin-bottom: 0;
}


/* CONTACTO */

.development-contact {
    padding: 80px 7% 95px;

    border-top: 1px solid var(--dev-line);
    border-bottom: 1px solid var(--dev-line);
}

.development-contact h2 {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: clamp(36px, 5vw, 61px);
}

.development-contact > p {
    max-width: 500px;
    margin-bottom: 27px;

    color: var(--dev-muted);
    font-size: 13px;
    line-height: 1.9;
}


/* FOOTER */

.development-page .site-footer {
    color: var(--dev-text);
}


/* TABLET */

@media (max-width: 900px) {

    .development-hero {
        gap: 5%;
        padding: 65px 5% 80px;
    }

    .development-copy h1 {
        font-size: clamp(31px, 4.5vw, 43px);
    }

    .development-image {
        min-height: 350px;
    }

    .development-process {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 5%;
        padding: 75px 5% 85px;
    }

    .development-team {
        gap: 5%;
        padding-right: 5%;
        padding-left: 5%;
    }

    .development-team-image {
        height: 400px;
    }

    .development-contact {
        padding-right: 5%;
        padding-left: 5%;
    }

}


/* MÓVIL */

@media (max-width: 600px) {

    .development-hero {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 42px 6% 65px;
    }

    .development-copy h1 {
        margin: 23px 0 20px;
        font-size: clamp(34px, 9vw, 46px);
        line-height: 1.13;
    }

    .development-intro-text {
        font-size: 13px;
        line-height: 1.8;
    }

    .development-image {
        height: 108vw;
        min-height: 320px;
        max-height: 470px;
    }

    .development-process {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 65px 6% 75px;
    }

    .development-heading h2 {
        margin: 22px 0;
        font-size: 34px;
    }

    .development-heading > p {
        font-size: 12px;
    }

    .development-step {
        grid-template-columns: 28px 1fr;
        column-gap: 12px;
        padding: 22px 0;
    }

    .development-step h3 {
        font-size: 22px;
    }

    .development-step p {
        font-size: 12px;
    }

    .development-team {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 15px 6% 75px;
    }

    .development-team-image {
        height: 100vw;
        min-height: 300px;
        max-height: 430px;
    }

    .development-team-copy h2 {
        margin: 22px 0;
        font-size: 33px;
    }

    .development-team-copy p {
        font-size: 12px;
    }

    .development-contact {
        padding: 65px 6% 75px;
    }

    .development-contact h2 {
        margin: 25px 0 20px;
        font-size: clamp(35px, 9vw, 47px);
    }

    .development-contact > p {
        font-size: 12px;
    }

}

/* =========================================================
   DESARROLLO — TIPOGRAFÍA
   MISMA IDENTIDAD QUE CONSTRUCCIÓN
========================================================= */

.development-page {
    font-family: Arial, sans-serif;
}

/* TÍTULOS PRINCIPALES */

.development-page .development-copy h1,
.development-page .development-heading h2,
.development-page .development-team-copy h2,
.development-page .development-contact h2 {
    font-family: "Playfair Display", serif;
    font-weight: 400;
    letter-spacing: normal;
}

/* TÍTULOS SECUNDARIOS */

.development-page .development-step h3 {
    font-family: "Playfair Display", serif;
    font-weight: 400;
}

/* ETIQUETAS, NÚMEROS Y TEXTOS PEQUEÑOS */

.development-page .development-eyebrow,
.development-page .development-step-number,
.development-page .development-button,
.development-page .development-image figcaption {
    font-family: Arial, sans-serif;
}

/* CUERPO DE TEXTO */

.development-page .development-intro-text,
.development-page .development-heading > p,
.development-page .development-step p,
.development-page .development-team-copy p,
.development-page .development-contact > p {
    font-family: Arial, sans-serif;
}

/* =========================================================
   DESARROLLO — PROCESO
========================================================= */

.development-page .development-process {
    display: block;
    padding: 100px 7% 110px;
    border-top: 1px solid var(--dev-line);
}

/* Encabezado centrado */

.development-page .development-heading {
    max-width: 680px;
    margin: 0 auto 65px;
    text-align: center;
}

.development-page .development-heading h2 {
    margin: 22px 0;
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.15;
}

.development-page .development-heading > p {
    max-width: 530px;
    margin: 0 auto;
    color: var(--dev-muted);
    font-size: 14px;
    line-height: 1.9;
}

/* Tres etapas en columnas equilibradas */

.development-page .development-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 35px;
    border-top: 1px solid var(--dev-line);
}

.development-page .development-step {
    display: block;
    min-width: 0;
    padding: 25px 0 0;
    border-bottom: none;
}

.development-page .development-step-number {
    display: block;
    margin-bottom: 28px;
    color: var(--dev-muted);
    font-size: 11px;
    letter-spacing: 0.12em;
}

.development-page .development-step h3 {
    margin: 0 0 14px;
    font-size: 23px;
    line-height: 1.35;
}

.development-page .development-step p {
    max-width: 340px;
    margin: 0;
    color: var(--dev-muted);
    font-size: 13px;
    line-height: 1.9;
}

/* TABLET Y MÓVIL */

@media (max-width: 700px) {

    .development-page .development-process {
        padding: 70px 6% 75px;
    }

    .development-page .development-heading {
        margin-bottom: 42px;
        text-align: left;
    }

    .development-page .development-heading h2 {
        font-size: 36px;
    }

    .development-page .development-heading > p {
        margin-left: 0;
        font-size: 13px;
    }

    .development-page .development-steps {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .development-page .development-step {
        display: grid;
        grid-template-columns: 35px minmax(0, 1fr);
        column-gap: 15px;
        padding: 25px 0;
        border-bottom: 1px solid var(--dev-line);
    }

    .development-page .development-step-number {
        grid-row: 1 / span 2;
        margin-bottom: 0;
        padding-top: 4px;
    }

    .development-page .development-step h3 {
        margin-bottom: 10px;
        font-size: 22px;
    }

    .development-page .development-step p {
        max-width: 440px;
        font-size: 13px;
    }
}

/* =========================================================
   DESARROLLO — PROCESO DE 4 ETAPAS
========================================================= */

.development-page .development-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    border-top: 1px solid var(--dev-line);
}

.development-page .development-step {
    display: block;
    min-width: 0;
    padding: 24px 0 0;
    border-bottom: none;
}

.development-page .development-step-number {
    display: block;
    margin-bottom: 24px;
}

.development-page .development-step h3 {
    font-size: 21px;
    line-height: 1.35;
    overflow-wrap: normal;
    word-break: normal;
}

.development-page .development-step p {
    font-size: 12px;
    line-height: 1.85;
}

/* TABLET: 2 COLUMNAS */

@media (max-width: 900px) {
    .development-page .development-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
        row-gap: 25px;
    }
}

/* MÓVIL: ETAPAS APILADAS */

@media (max-width: 600px) {
    .development-page .development-steps {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .development-page .development-step {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 14px;
        padding: 23px 0;
        border-bottom: 1px solid var(--dev-line);
    }

    .development-page .development-step-number {
        grid-row: 1 / span 2;
        margin-bottom: 0;
        padding-top: 4px;
    }

    .development-page .development-step h3 {
        margin-bottom: 10px;
        font-size: 22px;
    }

    .development-page .development-step p {
        max-width: 440px;
        font-size: 13px;
    }
}

/* =========================================================
   DESARROLLO — AJUSTE FINO PARA MÓVIL
========================================================= */

@media (max-width: 600px) {

    /* Más aire entre el menú y el contenido */

    .development-page .development-hero {
        padding-top: 78px;
        padding-bottom: 55px;
        gap: 22px;
    }

    /* Etiqueta de desarrollo inmobiliario */

    .development-page .development-eyebrow {
        font-size: 9px;
        letter-spacing: 0.12em;
        line-height: 1.8;
    }

    /* Título */

    .development-page .development-copy h1 {
        margin-top: 18px;
        margin-bottom: 18px;
        font-size: clamp(32px, 8.5vw, 40px);
        line-height: 1.16;
        letter-spacing: -0.035em;
    }

    /* Texto descriptivo */

    .development-page .development-intro-text {
        margin-bottom: 18px;
        font-size: 13px;
        line-height: 1.75;
    }

    /* Botón */

    .development-page .development-button {
        min-height: 42px;
    }

    /* Imagen rectangular: quitar altura excesiva */

    .development-page .development-image {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: 4 / 3;
        margin-top: 0;
    }

    .development-page .development-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

}

.studio-disciplines .discipline {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   PORTADA PRINCIPAL — UZCÁTEGUI ARQUITECTOS
========================================================= */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

/* Bloque principal */

.hero .hero-content {
    position: absolute;
    z-index: 2;

    left: clamp(24px, 3.2vw, 52px);
    right: clamp(24px, 3.2vw, 52px);
    bottom: clamp(32px, 4.5vh, 54px);

    max-width: 1100px;
}

/* Ubicación */

.hero .hero-eyebrow {
    margin: 0 0 20px;

    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .08em;
}

/* Titular */

.hero .hero-content h1 {
    margin: 0;
    max-width: 1000px;

    font-size: clamp(58px, 5.7vw, 88px);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 400;
}

/* Servicios */

.hero .hero-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin-top: 25px;
    gap: 0;
}

.hero .hero-bottom p {
    margin: 0;
    max-width: 520px;

    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0;
}

/* Indicador de desplazamiento */

.hero .hero-scroll {
    display: inline-block;

    margin-top: 19px;

    font-size: 9px;
    line-height: 1.5;
    letter-spacing: .14em;
}

/* =========================================================
   PORTADA — CELULAR
========================================================= */

@media (max-width: 768px) {

    .hero .hero-content {
        left: 22px;
        right: 22px;
        bottom: max(30px, env(safe-area-inset-bottom));

        max-width: none;
    }

    .hero .hero-eyebrow {
        margin-bottom: 17px;
        font-size: 10px;
    }

    .hero .hero-content h1 {
        max-width: 100%;

        font-size: clamp(43px, 9.5vw, 66px);
        line-height: 1;
        letter-spacing: -.045em;
    }

    .hero .hero-bottom {
        margin-top: 21px;
    }

    .hero .hero-bottom p {
        max-width: 310px;

        font-size: 11px;
        line-height: 1.7;
    }

    .hero .hero-scroll {
        margin-top: 17px;
        font-size: 9px;
    }
}

/* Celulares estrechos */

@media (max-width: 380px) {

    .hero .hero-content {
        left: 18px;
        right: 18px;
    }

    .hero .hero-content h1 {
        font-size: clamp(39px, 10vw, 44px);
    }

    .hero .hero-bottom p {
        font-size: 10px;
    }
}
.hero .hero-content h1 {
    color: #F7F6F2;
}


/* GALERÍA CV I — FONDO GRIS OSCURO */

body.cvi-page {
    background-color: #1c1c1c;
}

body.cvi-page .cvi-gallery {
    background-color: #1c1c1c;
}

body.cvi-page .cvi-gallery-image {
    background-color: #1c1c1c;
}


/* =========================================================
   GALERÍAS — ARQUITECTURA E INTERIORISMO
========================================================= */

body.category-page .category-intro {
    min-height: 0 !important;
    height: auto !important;
    padding: 70px 50px 25px !important;
    margin: 0 !important;
}

body.category-page .category-projects {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* MÓVIL */
@media (max-width: 768px) {
    body.category-page .category-intro {
        min-height: 0 !important;
        height: auto !important;
        padding: 55px 20px 25px !important;
    }
}

/* =========================================================
   AJUSTE FINAL — ARQUITECTURA E INTERIORISMO
========================================================= */

/* Reducir espacio entre la última imagen y el enlace de regreso */
body.category-page .category-projects {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ajustar el pie de ambas páginas */
body.category-page .ccy-back {
    margin-top: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 30px !important;
}

/* Ajustes para celular */
@media (max-width: 768px) {
    body.category-page .category-projects {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body.category-page .ccy-back {
        margin-top: 0 !important;
        padding-top: 18px !important;
        padding-bottom: 25px !important;
    }
}

/* =========================================================
   CONSTRUCCIÓN — ESPACIO ENTRE MENÚ Y CONTENIDO
========================================================= */

body.construction-page .category-intro {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* COMPUTADORA: conservar el ajuste anterior */
body.construction-page .construction-hero {
    margin-top: 0 !important;
    padding-top: 35px !important;
    box-sizing: border-box;
}

/* CELULAR: evitar que el texto invada el menú */
@media (max-width: 768px) {
    body.construction-page .construction-hero {
        margin-top: 0 !important;
        padding-top: 115px !important;
        box-sizing: border-box;
    }
}

/* CONSTRUCCIÓN — AJUSTE DE IMAGEN EN LAPTOP */
@media (min-width: 769px) {
    body.construction-page .construction-hero-image {
        margin-top: 25px;
        transform: scale(0.94);
        transform-origin: top center;
    }
}