/* =========================
   TIPOGRAFÍA (alojada en la propia web)
   Manrope · licencia SIL OFL (ver fonts/OFL.txt)
   ========================= */

@font-face {
    font-family: 'Manrope';
    src: url('fonts/manrope-latin.woff') format('woff');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}


/* =========================
   CONFIGURACIÓN GENERAL
   ========================= */

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

body {
    font-family: 'Manrope', Helvetica, sans-serif;
    color: #12304a;
    background-color: #ffffff;
    line-height: 1.6;
}


/* =========================
   PORTADA
   ========================= */
/* =========================
   BARRA SUPERIOR
   ========================= */

.top-bar {
    background-color: #d7ebfa;
    color: #206e95;
    font-size: 16px;
}

.top-bar-content {
    max-width: 1400px;
    margin: 0 auto;
    min-height: 44px;
    padding: 0 7%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.top-bar-contact {
    display: flex;
    align-items: center;
    gap: 28px;
}

.top-bar a {
    color: #206e95;
    text-decoration: none;
    transition: color 0.3s ease;
}

.top-bar a:hover {
    color: hsl(200, 91%, 13%);
}

.instagram-icon {
    margin-right: 6px;
    font-size: 18px;
}

/* =========================
   BARRA SUPERIOR
   ========================= */

.top-bar {
    background-color: #d7ebfa;
    color: #536773;
    font-size: 16px;
}

.top-bar-content {
    max-width: 1400px;
    margin: 0 auto;
    min-height: 44px;
    padding: 0 7%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.top-bar-contact {
    display: flex;
    align-items: center;
    gap: 28px;
}

.top-bar a {
    color: #536773;
    text-decoration: none;
    transition: color 0.3s ease;
}

.top-bar a:hover {
    color: #206e95;
}

.instagram-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
    transform: translateY(4px);
}

.instagram-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.instagram-icon .instagram-dot {
    fill: currentColor;
    stroke: none;
}

.hero {
    background-color: #206e95;

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

    color: white;
    padding: 20px 7% 60px;
}


/* =========================
   NAVBAR
   ========================= */

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    width: 200px;
    transform: translateY(-60px);
}

.logo img {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================
   MENÚ
   ========================= */

.menu {
    display: flex;
    align-items: center;
    gap: 22px;
}

.menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: white;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 5px 0;
    transition: color 0.3s ease;
}


.menu a {
    transition: color 0.25s ease, transform 0.25s ease;
}

.menu a:hover {
    color: #bfeaf5;
    transform: scale(1.06);
}



/* BOTÓN DESTACADO DE PRESUPUESTO */

.menu a.menu-cta {
    padding: 11px 20px;
    border-radius: 30px;
    background-color: #ffffff;
    color: #206e95;
    font-weight: 600;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.menu a.menu-cta:hover {
    background-color: #e7f5fb;
    color: #206e95;
    transform: translateY(-2px);
    text-decoration: none;
}


.menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #7fd8ed;
    transition: width 0.3s ease;
}


.menu a:hover::after {
    width: 100%;
}

.menu a.menu-cta::after,
.menu a.menu-cta:hover::after {
    display: none;
}



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

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
}


/* =========================
   HERO PRINCIPAL
   ========================= */

.hero-main {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 60px;
    align-items: start;
    min-height: auto;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 0px;
}

.hero-content {
    max-width: 650px;
}

.hero-label {
    margin-bottom: 20px;
    font-size: 13px;
    letter-spacing: 3px;
    color: #7fd8ed;
}

h1 {
    margin-bottom: 25px;
    font-size: 54px;
    line-height: 1.05;
    letter-spacing: -2px;
}

.hero-content h1 {
    position: relative;
    top: -15px;
}


.hero-description {
    max-width: 570px;
    margin-bottom: 35px;
    font-size: 18px;
    color: #d6e8f2;
    position: relative;
    top: -10px;
}



/* =========================
   BOTONES
   ========================= */

.hero-buttons {
    display: flex;
    gap: 15px;
    position: relative;
    top: -10px;
}

.button {
    display: inline-block;
    padding: 15px 25px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button.primary {
    background-color: white;
    color: #206e95;
}

.button.secondary {
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
}


/* =========================
   IMAGEN HERO
   ========================= */

.hero-image {
    width: 100%;
    transform: translateY(-60px);
}

.hero-image img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    border-radius: 16px;
}


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

.services {
    padding: 120px 7% 40px;
    background-color: #ffffff;
}

.section-intro {
    max-width: 650px;
    margin-bottom: 60px;
}

.section-label {
    margin-bottom: 15px;
    font-size: 12px;
    letter-spacing: 3px;
    color: #168bb0;
    font-weight: 600;
}

.section-intro h2 {
    margin-bottom: 20px;
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -1px;
}

.section-intro > p:last-child {
    color: #5d7080;
    font-size: 17px;
}


/* =========================
   TARJETAS DE SERVICIOS
   ========================= */

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}


.service-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 220px;
    padding: 20px;
    background-color: #f3f8fa;
    border: 1px solid #e2edf1;
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
}



.service-card::before {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    opacity: 0.25;
    z-index: -1;
    background-image:
    linear-gradient(
        to bottom,
        #f3f8fa 0%,
        rgba(243, 248, 250, 0.75) 45%,
        rgba(243, 248, 250, 0.35) 100%
    ),
    var(--service-image);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    pointer-events: none;
}

.service-card:nth-child(1) {
    --service-image: url("images/aire-acondicionado.webp");
}

.service-card:nth-child(2) {
    --service-image: url("images/aerotermia.webp");
}

.service-card:nth-child(3) {
    --service-image: url("images/climatizacion.webp");
}

.service-card:nth-child(4) {
    --service-image: url("images/cargadores-electricos.webp");
}


.service-card {
    background-color: #f3f8fa;
    border: 1px solid #e2edf1;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(13, 56, 88, 0.04);
}


.service-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.service-card:nth-child(2) {
    transition-delay: 0.15s;
}

.service-card:nth-child(3) {
    transition-delay: 0.3s;
}

.service-card:nth-child(4) {
    transition-delay: 0.45s;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(13, 56, 88, 0.08);
}

.service-card:hover {
    border-color: #b9dbe9;
    background-color: #f7fbfc;
    box-shadow: 0 12px 28px rgba(13, 56, 88, 0.10);
}


.service-number {
    margin-bottom: 22px;
    font-size: 13px;
    color: #168bb0;
    letter-spacing: 2px;
}

.service-card h3 {
    margin-bottom: 15px;
    font-size: 20px;
    color: #206e95;
    text-decoration: none;
}

.service-card p {
    color: #647786;
    font-size: 13px;
}


.service-icon {
    position: absolute;
    right: 25px;
    bottom: 22px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #e1f0f8;
    font-size: 27px;
    color: #168bb0;
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.service-card:hover .service-icon {
    background-color: #d2eaf6;
    transform: translateY(-3px);
}



/* =========================
   TRABAJOS
   ========================= */


.works {
    padding: 0px 7% 120px;
    background-color: #ffffff;
}


.works-grid {
    display: flex;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 15px;
    cursor: grab;
    user-select: none;
}

.works-grid.dragging {
    cursor: grabbing;
}

.works-grid {
    scrollbar-width: thin;
    scrollbar-color: #b9d5df transparent;
}

.works-grid::-webkit-scrollbar {
    height: 5px;
}

.works-grid::-webkit-scrollbar-track {
    background: transparent;
}

.works-grid::-webkit-scrollbar-thumb {
    background-color: #b9d5df;
    border-radius: 999px;
}

.work-card {
    overflow: hidden;
    flex: 0 0 24%;
    background-color: #f3f8fa;
    border: 1px solid #e2edf1;
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.work-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.work-card:nth-child(2) {
    transition-delay: 0.2s;
}

.work-card img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.work-card img {
    -webkit-user-drag: none;
    user-drag: none;
}

.work-card .image-1 {
    object-position: 50% 35%;
}

.work-card .image-2 {
    object-position: 50% 20%;
}

.work-card .image-3 {
    object-position: 50% 35%;
}

.work-card:hover img {
    transform: scale(1.03);
}


/* =========================
   ZONAS
   ========================= */

.locations {
    padding: 120px 7%;
    background-color: #eef7fa;
}

.locations-content {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 80px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.locations-text h2 {
    margin-bottom: 20px;
    font-size: 58px;
    line-height: 1.05;
    letter-spacing: -1px;
}

.locations-intro {
    max-width: 550px;
    margin-bottom: 35px;
    color: #5d7080;
    font-size: 17px;
}


/* =========================
   BOTONES DE ZONAS
   ========================= */

.location-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.location-button {
    padding: 11px 22px;
    border: 1px solid #b9d5df;
    background-color: #ffffff;
    color: #12304a;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s ease;
}

.location-button:hover {
    border-color: #206e95;
    color: #206e95;
    transform: translateY(-1px);
}

.location-button.active {
    background-color: #206e95;
    color: white;
    border-color: #206e95;
}

.location-button.active:hover {
    transform: none;
}

.location-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(22, 139, 176, 0.25);
}


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

.location-info {
    min-height: 230px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #206e95;
    color: white;
    border-radius: 4px;
}

.location-map {
    height: 380px;
    border-radius: 4px;
    overflow: hidden;
}

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

.location-icon {
    margin-bottom: 25px;
    font-size: 32px;
}

.location-info h3 {
    margin-bottom: 15px;
    font-size: 34px;
}

.location-info p {
    margin-bottom: 30px;
    color: #c9dfe9;
}

.location-tag {
    align-self: flex-start;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 11px;
    letter-spacing: 2px;
}


/* =========================
   CONTACTO
   ========================= */

.contact {
    padding: 120px 7%;
    background-color: #ffffff;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-info h2 {
    margin-bottom: 20px;
    font-size: 58px;
    line-height: 1.05;
}

.contact-intro {
    max-width: 500px;
    margin-bottom: 40px;
    color: #5d7080;
    font-size: 17px;
}


/* =========================
   DATOS DE CONTACTO
   ========================= */

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #12304a;
    text-decoration: none;
}

.contact-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eef7fa;
    border-radius: 50%;
    font-size: 20px;
}

.contact-item div {
    display: flex;
    flex-direction: column;
}

.contact-item div span {
    font-size: 12px;
    color: #78909f;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-item strong {
    font-size: 16px;
}


/* =========================
   FORMULARIO
   ========================= */

.contact-form-container {
    padding: 20px;
    background-color: #f3f8fa;
    border: 1px solid #e2edf1;
    border-radius: 14px;
}

.contact-form-container h3 {
    margin-bottom: 30px;
    font-size: 27px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.form-group label {
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #36556a;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid #cbdde5;
    background-color: white;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #168bb0;
}

.form-group textarea {
    resize: vertical;
}


/* =========================
   BOTÓN FORMULARIO
   ========================= */

.form-button {
    width: 100%;
    padding: 15px;
    border: none;
    background-color: #206e95;
    color: white;
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.form-button:hover {
    background-color: #168bb0;
}


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

@media (max-width: 900px) {

    .hero {
        padding: 25px 6%;
    }

    .navbar {
        flex-direction: column;
        gap: 25px;
        align-items: flex-start;
    }

    .menu {
        width: 100%;
        gap: 15px;
        flex-wrap: wrap;
    }

    .menu a {
        font-size: 13px;
    }

    .hero-main {
        grid-template-columns: 1fr;
        gap: 50px;
        min-height: auto;
        padding: 80px 0;
    }

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

    h1 {
        font-size: 48px;
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-image img {
        height: 400px;
    }

    .services {
        padding: 80px 6% 30px;
    }

    .section-intro h2 {
        font-size: 42px;
    }

    .services-grid {
        grid-template-columns: 1fr 1fr;
    }

    .locations {
        padding: 80px 6%;
    }

    .locations-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .locations-text h2 {
        font-size: 48px;
    }

    .contact {
        padding: 80px 6%;
    }

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

    .contact-info h2 {
        font-size: 48px;
    }
}


/* =========================
   MÓVIL
   ========================= */

@media (max-width: 600px) {

    /* NAVBAR */

    .navbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: relative;
        gap: 0;
    }

    .menu-toggle {
        display: block;
    }

    .menu {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 0;
        padding-top: 20px;
    }

    .menu.menu-open {
        display: flex;
    }

    .menu a {
        padding: 12px 0;
        font-size: 15px;
    }


    /* HERO */

    h1 {
        font-size: 40px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .button {
        text-align: center;
    }

    .hero-image img {
        height: 320px;
    }


    /* SERVICIOS */

    .services-grid {
        grid-template-columns: 1fr;
    }

    .section-intro h2 {
        font-size: 38px;
    }


    /* TRABAJOS */

    .works-grid {
        gap: 15px;
    }

    .work-card {
        flex: 0 0 85%;
    }


    /* ZONAS */

    .locations-text h2 {
        font-size: 42px;
    }

    .location-info {
        min-height: 320px;
        padding: 35px;
    }

    .location-info h3 {
        font-size: 30px;
    }


    /* CONTACTO */

    .contact-info h2 {
        font-size: 42px;
    }

    .contact-form-container {
        padding: 30px 22px;
    }


    /* WHATSAPP */

    .whatsapp-floating {
        width: 55px;
        height: 55px;
        right: 18px;
        bottom: 18px;
    }
}


/* =========================
   GALERÍA DE IMÁGENES
   ========================= */

.lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background-color: rgba(0, 0, 0, 0.85);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
    z-index: 9999;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    border: none;
    background: none;
    color: white;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
}


/* =========================
   FLECHAS DE LA GALERÍA
   ========================= */

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 55px;
    height: 55px;

    border: none;
    border-radius: 50%;

    background-color: rgba(255, 255, 255, 0.15);
    color: white;

    font-size: 42px;
    line-height: 1;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.lightbox-arrow:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.lightbox-prev {
    left: 25px;
}

.lightbox-next {
    right: 25px;
}


/* =========================
   GALERÍA EN MÓVIL
   ========================= */

@media (max-width: 600px) {

    .lightbox {
        padding: 20px;
    }

    .lightbox-arrow {
        width: 45px;
        height: 45px;
        font-size: 34px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }
}

@media (max-width: 600px) {

    .top-bar-content {
        min-height: 40px;
        padding: 0 5%;
        gap: 15px;
    }

    .top-bar {
        font-size: 13px;
    }

    .top-bar-address {
        display: none;
    }

    .top-bar-contact {
        width: 100%;
        justify-content: flex-end;
        gap: 20px;
    }
}

/* =========================
   ANIMACIÓN DE ENTRADA
   ========================= */

.hero-content {
    animation: aparecerDesdeAbajo 0.8s ease forwards;
}

@keyframes aparecerDesdeAbajo {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.top-contact-icon {
    display: inline-block;
    margin-right: 5px;
    font-size: 16px;
    line-height: 1;
    vertical-align: -1px;
}


.menu a.menu-cta,
.menu a.menu-cta:hover,
.menu a.menu-cta:focus,
.menu a.menu-cta:active {
    text-decoration: none !important;
    border-bottom: none !important;
}



/* BOTÓN PARA VER TODOS LOS TRABAJOS */

.works-more {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.works-more-button {
    display: inline-block;
    padding: 13px 24px;
    border-radius: 30px;
    background-color: #206e95;
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.works-more-button:hover {
    background-color: #168bb0;
    transform: translateY(-2px);
}


/* =========================
   PÁGINA DE TODOS LOS TRABAJOS
========================= */

.gallery-top {
    background-color: #206e95;
    padding: 15px 7%;
}

.gallery-heading {
    max-width: 900px;
    margin: 0 auto;
    padding: 70px 24px 35px;
    text-align: center;
}

.gallery-eyebrow {
    color: #4a96bd;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.gallery-heading h1 {
    margin: 12px 0;
    color: #206e95;
    font-size: clamp(32px, 5vw, 52px);
}

.gallery-heading > p:not(.gallery-eyebrow) {
    max-width: 650px;
    margin: 0 auto;
    color: #555;
    line-height: 1.7;
}

.gallery-back {
    display: inline-block;
    margin-top: 22px;
    color: #206e95;
    text-decoration: none;
    font-weight: 600;
}

.gallery-back:hover {
    text-decoration: underline;
}

.gallery-content {
    padding: 20px 7% 90px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-grid .work-card {
    min-width: 0;
    opacity: 1;
    transform: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 12px;
}

.gallery-grid .work-image {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.gallery-grid .work-card:hover .work-image {
    transform: scale(1.04);
}

.gallery-footer {
    padding: 25px 7%;
    background-color: #206e95;
    color: white;
    text-align: center;
}

.gallery-footer a {
    color: white;
    text-decoration: underline;
}


/* TABLET */
@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .gallery-grid .work-image {
        height: 240px;
    }
}


/* MÓVIL */
@media (max-width: 600px) {
    .gallery-heading {
        padding: 45px 20px 25px;
    }

    .gallery-content {
        padding: 15px 5% 55px;
    }

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

    .gallery-grid .work-image {
        height: 260px;
    }
}


/* Mostrar la fotografía completa al ampliarla */
#lightbox #lightbox-image {
    width: auto;
    height: auto;
    max-width: 85vw;
    max-height: 85vh;
    object-fit: contain;
}


/* Ajustar el encuadre de las fotos de la galería */
.gallery-grid .work-image {
    object-fit: cover;
    object-position: center center;
}


/* =========================
   CABECERA DE TRABAJOS
========================= */

.gallery-top {
    padding: 12px 7%;
    background-color: #206e95;
}

.gallery-top .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-top .logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.gallery-top .logo img {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
}

.gallery-top .menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-top .menu li {
    list-style: none;
}

.gallery-top .menu a {
    color: white;
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
}

.gallery-top .menu a:hover {
    color: #d7ebfa;
}

.gallery-top .nav-cta {
    flex-shrink: 0;
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    border: 1px solid white;
    border-radius: 25px;
    padding: 11px 18px;
    transition: background-color 0.25s ease;
}

.gallery-top .nav-cta:hover {
    background-color: rgba(255, 255, 255, 0.15);
}


/* ADAPTACIÓN A PANTALLAS PEQUEÑAS */
@media (max-width: 900px) {
    .gallery-top {
        padding: 15px 5%;
    }

    .gallery-top .navbar {
        flex-wrap: wrap;
        gap: 15px;
    }

    .gallery-top .logo img {
        width: 190px;
    }

    .gallery-top .menu {
        gap: 14px;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .gallery-top .navbar {
        justify-content: space-between;
    }

    .gallery-top .menu-toggle {
        display: block;
    }

    .gallery-top .menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 15px 0;
    }

    .gallery-top .menu.menu-open {
        display: flex;
    }

    .gallery-top .nav-cta {
        display: inline-block;
    }
}


/* Icono de teléfono en la barra superior */
.top-bar-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.top-bar-phone svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* BOTÓN FLOTANTE DE WHATSAPP */
.whatsapp-floating {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25D366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-floating:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.whatsapp-floating svg {
    width: 38px;
    height: 38px;
}

@media (max-width: 600px) {
    .whatsapp-floating {
        width: 60px;
        height: 60px;
        right: 16px;
        bottom: 16px;
    }

    .whatsapp-floating svg {
        width: 40px;
        height: 40px;
    }
}


/* MENÚ DESPLEGABLE DE SERVICIOS */

.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dropdown-arrow {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    transform: none;
    margin: 0 0 0 4px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: 8px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
}


.dropdown-menu a {
    display: block;
    padding: 9px 12px;
    font-size: 13px;
    color: #206e95;
    text-decoration: none;
    border-radius: 6px;
    white-space: nowrap;
    transition: background 0.2s ease;
}


.dropdown-menu a:hover {
    background: #d7ebfa;
    color: #206e95;
}

/* Abrir al pasar el ratón */
@media (hover: hover) and (min-width: 769px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }

}


/* ANIMACIÓN ELEGANTE DEL MENÚ DE SERVICIOS */

.dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}

.dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-menu a {
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.dropdown:hover .dropdown-menu a {
    opacity: 1;
    transform: translateY(0);
}

.dropdown:hover .dropdown-menu a:nth-child(1) {
    transition-delay: 0.1s;
}

.dropdown:hover .dropdown-menu a:nth-child(2) {
    transition-delay: 0.22s;
}

.dropdown:hover .dropdown-menu a:nth-child(3) {
    transition-delay: 0.34s;
}

.dropdown:hover .dropdown-menu a:nth-child(4) {
    transition-delay: 0.46s;
}

/* Al cerrar el menú, no esperar para ocultar las opciones */
.dropdown:not(:hover) .dropdown-menu a {
    transition-delay: 0s;
}


/* UBICACIÓN EN CONTACTO */
.contact-location {
    cursor: default;
}

.contact-location-note {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: #71869a;
    font-weight: 400;
}


/* AJUSTE DEL BLOQUE DE UBICACIÓN */
.contact-location {
    align-items: flex-start;
}

.contact-location > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.contact-location-note {
    margin-top: 3px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #71869a;
    font-weight: 400;
}


/* =========================
   PIE DE PÁGINA
   ========================= */

.site-footer {
    background: #102b3b;
    color: #ffffff;
    padding: 55px 8% 20px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1.5fr;
    gap: 50px;
}

.footer-brand h2 {
    font-size: 23px;
    margin: 0 0 16px;
    color: #ffffff;
}

.footer-content h3 {
    font-size: 16px;
    margin: 0 0 12px;
    color: #ffffff;
}

.footer-brand p {
    max-width: 380px;
    line-height: 1.8;
    color: #c5d8e5;
    font-size: 14px;
    margin: 0;
}

.footer-links,
.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.footer-links a,
.footer-contact a {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #c5d8e5;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.6;
    transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
    color: #ffffff;
}

.footer-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #7ec5e8;
}

.footer-contact svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-bottom {
    max-width: 1200px;
    margin: 38px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(215, 235, 250, 0.2);
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    color: #c5d8e5;
    font-size: 13px;
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .site-footer {
        padding: 40px 6% 20px;
    }

    .footer-contact a {
        overflow-wrap: anywhere;
    }
}

.footer-logo {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 18px;
}

/* =========================
   PÁGINAS LEGALES
   Aviso legal, política de privacidad y política de cookies.
   Columna de lectura estrecha, alineada a la izquierda con el resto
   de la web (mismo borde que Trabajos).
   ========================= */

.legal-page {
    width: 86%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0 110px;
    color: #43586a;
}

.legal-back {
    display: inline-block;
    margin: 40px 0 52px;
    color: #206e95;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.legal-back:hover {
    text-decoration: underline;
}

.legal-head,
.legal-section {
    max-width: 760px;
}

.legal-head {
    margin-bottom: 4px;
    padding-bottom: 36px;
    border-bottom: 1px solid #dbe9f0;
}

.legal-eyebrow {
    margin: 0 0 15px;
    color: #168bb0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.legal-page h1 {
    margin: 0 0 20px;
    color: #12304a;
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
}

.legal-intro {
    margin: 0 0 14px;
    color: #5d7080;
    font-size: 17px;
    line-height: 1.7;
}

.legal-updated {
    margin: 0;
    color: #71869a;
    font-size: 13px;
}

.legal-section {
    padding-top: 36px;
}

.legal-page h2 {
    margin: 0 0 14px;
    color: #12304a;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.legal-page p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.75;
}

.legal-page p a,
.legal-data a {
    color: #206e95;
    text-underline-offset: 3px;
}

/* Datos identificativos: etiqueta a la izquierda y valor a la derecha */
.legal-data {
    margin: 0;
    border-top: 1px solid #e2edf1;
}

.legal-data > div {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e2edf1;
}

.legal-data dt {
    color: #12304a;
    font-size: 15px;
    font-weight: 600;
}

.legal-data dd {
    margin: 0;
    font-size: 16px;
}

@media (max-width: 900px) {
    .legal-back {
        margin: 28px 0 32px;
    }

    .legal-page {
        padding-bottom: 80px;
    }
}

@media (max-width: 600px) {
    .legal-page {
        width: 88%;
    }

    .legal-page h2 {
        font-size: 19px;
    }

    .legal-data > div {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 10px 0;
    }
}

.form-privacy {
    font-size: 11px;
    line-height: 1.5;
    color: #71869a;
    margin: 0 0 12px;
}

.form-privacy a {
    color: #206e95;
    text-decoration: underline;
}

/* CASA DE SERVICIOS */

.house-services {
    max-width: 850px;
    margin: 50px auto 0;
    padding: 0 20px;
}

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

/* PUNTOS INTERACTIVOS DE LA CASA */

.house-services {
    position: relative;
}

.house-point {
    position: absolute;
    width: 34px;
    height: 34px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background-color: #206e95;
    color: #ffffff;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: background-color 0.2s ease,
                transform 0.2s ease;
}

.house-point:hover,
.house-point:focus-visible {
    background-color: #174f6b;
    transform: translate(-50%, -50%) scale(1.12);
    outline: none;
}

/* Posición inicial de cada punto */

.point-aire {
    left: 40%;
    top: 29%;
}

.point-aerotermia {
    left: 65%;
    top: 65%;
}

.point-climatizacion {
    left: 10%;
    top: 72%;
}

.point-cargador {
    left: 91%;
    top: 65%;
}

/* DESCRIPCIONES DE LOS PUNTOS DE LA CASA */

.house-tooltip {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% - 1px);
    max-width: calc(100vw - 40px);
    transform: translateX(-50%);
    width: 210px;
    box-sizing: border-box;
    padding: 12px 14px;
    background-color: #ffffff;
    color: #334155;
    border: 1px solid #e2edf4;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(24, 65, 90, 0.14);
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    z-index: 30;
    cursor: default;
}

.house-tooltip strong {
    display: block;
    margin-bottom: 6px;
    color: #206e95;
    font-size: 15px;
}

.house-tooltip span {
    display: block;
}

/* Mostrar al pasar el ratón o al seleccionar el punto */

.house-point .house-tooltip {
    display: none;
}

.house-point:hover .house-tooltip,
.house-point:focus-visible .house-tooltip {
    display: block;
}

/* Ajustes para móviles */

/* AJUSTES DE LA CASA PARA MÓVILES */

@media (max-width: 600px) {
    .house-services {
        padding: 0 10px;
    }

    .house-tooltip {
        width: min(220px, 65vw);
        padding: 12px;
        font-size: 12px;
        line-height: 1.5;
    }

    .house-tooltip strong {
        font-size: 14px;
    }

    .house-tooltip span {
        font-size: 12px;
    }

    .house-point {
        width: 30px;
        height: 30px;
        font-size: 22px;
    }
}



/* SECCIÓN DE LA CASA INTERACTIVA */

.house-section {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: 1400px;
    margin: 20px auto 0;
    padding: 30px 35px 0;
    border-top: 1px solid #e2edf1;
}

/* Texto integrado arriba a la izquierda */
.house-section-text {
    position: relative;
    z-index: 2;
    width: 440px;
    max-width: 32%;
    justify-self: start;
    margin: 35px 0 -190px 45px;
    padding: 0;
    transform: none;
}

.house-section-text h2 {
    margin-bottom: 10px;
    font-size: 25px;
    line-height: 1.25;
    letter-spacing: -0.4px;
    color: #12304a;
}

.house-section-text > p:not(.section-label) {
    color: #5d7080;
    font-size: 13px;
    line-height: 1.6;
}

.house-section-text .house-section-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    color: #206e95;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.house-hint-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 28px;
    height: 34px;
    color: #206e95;
}

.house-hint-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Casa centrada */

.house-section .house-services {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    justify-self: center;
    transform: translateX(130px);
}


.house-section .house-services-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Tablet */
@media (max-width: 900px) {
    .house-section {
        padding: 25px 20px 0;
    }

    .house-section-text {
        width: 400px;
        max-width: 55%;
        margin: 20px 0 -100px 0;
    }

    .house-section .house-services {
        max-width: 850px;
    }
}

/* Móvil: texto encima de la casa */
@media (max-width: 600px) {
    .house-section {
        padding: 25px 15px 0;
    }

    .house-section-text {
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px;
    }

    .house-section-text h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .house-section-text > p:not(.section-label) {
        font-size: 14px;
        line-height: 1.7;
    }

    .house-section-text .house-section-hint {
        font-size: 12px;
    }

    .house-section .house-services {
        margin: 0 auto;
    }
}

/* INDICACIÓN DE NAVEGACIÓN EN TARJETAS DE SERVICIOS */
.service-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.service-card .service-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 18px;
    color: #206e95;
    font-size: 13px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.service-card .service-link span {
    display: inline-block;
    transition: transform 0.25s ease;
}

.service-card:hover .service-link span,
.service-card:focus-visible .service-link span {
    transform: translateX(4px);
}

.service-card:focus-visible {
    outline: 2px solid #206e95;
    outline-offset: 3px;
}

/* ENLACE DENTRO DE LOS BOCADILLOS DE LA CASA */
.house-tooltip-link {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: #206e95;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.house-tooltip-link:hover,
.house-tooltip-link:focus-visible {
    text-decoration: underline;
}

.house-tooltip-link span {
    display: inline-block;
    transition: transform 0.2s ease;
}

.house-tooltip-link:hover span {
    transform: translateX(3px);
}

.house-point {
    cursor: pointer;
}

.house-point:focus-visible {
    outline: 2px solid #206e95;
    outline-offset: 3px;
}


/* Mantener el bocadillo accesible al mover el ratón */
.house-point {
    cursor: pointer;
}

.house-point:hover,
.house-point:focus-visible {
    transform: translate(-50%, -50%);
}

.house-tooltip {
    bottom: calc(100% - 5px);
}

/* Mantener visible el bocadillo al entrar en él */
.house-point:hover .house-tooltip,
.house-point:focus-within .house-tooltip {
    display: block;
}


/* EFECTOS SUAVES EN LAS TARJETAS DE SERVICIOS */
.services-grid .service-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.services-grid .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(32, 110, 149, 0.10);
}

/* EFECTO SUAVE EN LOS BOTONES */
.button,
.menu-cta,
.works-more-button,
.form-button {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.button:hover,
.menu-cta:hover,
.works-more-button:hover,
.form-button:hover {
    transform: translateY(-2px);
}

/* RESPETAR A QUIEN PREFIERE MENOS ANIMACIONES */
@media (prefers-reduced-motion: reduce) {
    .services-grid .service-card,
    .button,
    .menu-cta,
    .works-more-button,
    .form-button {
        transition: none;
    }

    .services-grid .service-card:hover,
    .button:hover,
    .menu-cta:hover,
    .works-more-button:hover,
    .form-button:hover {
        transform: none;
    }
}


/* APARICIÓN SUAVE DE LAS SECCIONES */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Respetar la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* Punto de la unidad exterior de aire acondicionado */
.point-aire-exterior {
    left: 81%;
    top: 40%;
}


/* Punto del suelo radiante */
.point-suelo-radiante {
    left: 55%;
    top: 84%;
}

/* CENTRAR EL CONTENIDO DE LA PORTADA */
.hero .hero-main {
    grid-template-columns: 1fr;
    transform: translateY(-50px);
}

.hero .hero-content {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.hero .hero-description {
    margin-left: auto;
    margin-right: auto;
}

.hero .hero-buttons {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: -15px;
}

/* MENÚ EN LA PARTE SUPERIOR DE LA PORTADA */
.hero .navbar {
    align-items: flex-start;
    padding-top: 10px;
}

.hero .hero-label {
    color: #bfeaf5;
}

/* TÍTULO PRINCIPAL MÁS FINO */
.hero .hero-content h1 {
    font-weight: 400;
    letter-spacing: -2.2px;
}

/* Distribución exclusiva de la introducción de servicios */
.services-intro-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 100%;
    margin-bottom: 60px;
}

.services-intro-logo .section-intro-text {
    flex: 1;
    min-width: 0;
}

.services-intro-logo .services-logo {
    display: block;
    width: 250px;
    max-width: 30%;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .services-intro-logo {
        flex-direction: column;
        align-items: flex-start;
    }

    .services-intro-logo .services-logo {
        width: 200px;
        max-width: 70%;
        align-self: center;
    }
}

/* Limitar el tamaño del logo de servicios */
img.services-logo {
    width: 250px !important;
    max-width: 250px !important;
    height: auto !important;
    display: block;
    object-fit: contain;
}

.services-intro-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

.services-intro-logo .section-intro-text {
    flex: 0 1 650px;
    min-width: 0;
}

.services-intro-logo img.services-logo {
    width: 250px !important;
    max-width: 250px !important;
    height: auto !important;
    flex: 0 0 250px;
    object-fit: contain;
}

@media (max-width: 600px) {
    .services-intro-logo {
        flex-direction: column;
        align-items: flex-start;
    }

    .services-intro-logo img.services-logo {
        width: 200px !important;
        max-width: 70% !important;
        flex-basis: auto;
        align-self: center;
    }
}

/* Logo a la derecha, solo en la sección de servicios */
#servicios > .section-intro:has(.services-logo) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 100%;
}

#servicios > .section-intro:has(.services-logo) .section-intro-text {
    flex: 0 1 650px;
    min-width: 0;
}

#servicios > .section-intro:has(.services-logo) img.services-logo {
    display: block;
    width: 250px !important;
    max-width: 250px !important;
    height: auto !important;
    flex: 0 0 250px;
    object-fit: contain;
}

@media (max-width: 600px) {
    #servicios > .section-intro:has(.services-logo) {
        flex-direction: column;
        align-items: flex-start;
    }

    #servicios > .section-intro:has(.services-logo) img.services-logo {
        width: 200px !important;
        max-width: 70% !important;
        flex-basis: auto;
        align-self: center;
    }
}


/* =========================================================
   PORTADA Y MENÚ · V5
   Fondo claro, azul de marca y azul marino para el texto.
   (sustituye al bloque V4 anterior)
   ========================================================= */

html {
    scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

@keyframes heroImageIn {
    from { opacity: 0; transform: scale(1.08); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes heroSpin {
    to { transform: rotate(360deg); }
}


/* ---------- Menú: colores para fondo claro ----------
   (solo en la portada y en las páginas de servicio; la página de
   trabajos conserva su cabecera azul) */

.hero .logo {
    width: 260px;
}

.hero .logo img {
    mix-blend-mode: multiply;
}

:is(.hero, .site-header) .menu a {
    color: #12304a;
}

:is(.hero, .site-header) .menu a:hover {
    color: #206e95;
}

:is(.hero, .site-header) .menu a::after {
    background-color: #206e95;
}

:is(.hero, .site-header) .menu a.menu-cta {
    background-color: #206e95;
    color: #ffffff;
}

:is(.hero, .site-header) .menu a.menu-cta:hover {
    background-color: #175a7a;
    color: #ffffff;
}

:is(.hero, .site-header) .menu-toggle {
    color: #12304a;
}

:is(.hero, .site-header) .menu .dropdown-menu a {
    color: #206e95;
}

:is(.hero, .site-header) .menu .dropdown-menu a:hover {
    background: #d7ebfa;
    color: #206e95;
    transform: none;
}


/* ---------- Portada ---------- */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 7% 0;
    background: #eef7fa;
    border-bottom: 1px solid #dbe9f0;
    color: #12304a;
    overflow: hidden;
}

.hero .navbar {
    position: relative;
    width: 100%;
}

.hero .hero-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    width: 100%;
    max-width: 1280px;
    margin: -140px auto 0;
    padding: 0 0 92px;
    transform: none;
}

.hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0;
    text-align: left;
    animation: none;
}

/* Entrada escalonada del texto */
.hero .hero-content > * {
    animation: heroFadeUp 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero .hero-content > :nth-child(1) { animation-delay: 0.05s; }
.hero .hero-content > :nth-child(2) { animation-delay: 0.18s; }
.hero .hero-content > :nth-child(3) { animation-delay: 0.32s; }
.hero .hero-content > :nth-child(4) { animation-delay: 0.46s; }

.hero .hero-label {
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #168bb0;
}

/* Título: más contenido y repartido en dos líneas equilibradas */
.hero .hero-content h1 {
    position: static;
    margin-bottom: 24px;
    font-size: clamp(34px, 3.4vw, 54px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.035em;
    color: #12304a;
}

.hero .hero-content h1 .hero-h1-sub {
    display: block;
    font-weight: 500;
    color: #206e95;
    font-size: 0.75em;   /* NUEVO: 75% del tamaño del título */
    margin-top: 10px; 
}

.hero .hero-description {
    position: static;
    max-width: 500px;
    margin: 0 0 34px;
    font-size: 17px;
    line-height: 1.7;
    color: #5d7080;
}

/* Botones */

.hero .hero-buttons {
    position: static;
    margin-top: 0;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.hero .button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
}

.hero .button svg {
    width: 18px;
    height: 18px;
}

.hero .button.primary {
    background-color: #206e95;
    color: #ffffff;
}

.hero .button.primary:hover {
    background-color: #168bb0;
}

.hero .button.primary span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.hero .button.primary:hover span {
    transform: translateX(5px);
}

.hero .button.secondary {
    border: 1px solid #b9d5df;
    background: transparent;
    color: #12304a;
}

.hero .button.secondary:hover {
    border-color: #206e95;
    background: #ffffff;
    color: #206e95;
}

/* Foto: tratada para que encaje con la gama de la web
   (menos saturación + velo azul de marca) */

.hero .hero-image {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    transform: none;
    animation: none;
    border-radius: 20px;
    background: #cfe3ef;
}

.hero .hero-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(14, 52, 82, 0.14) 0%,
        rgba(32, 110, 149, 0.10) 50%,
        rgba(14, 52, 82, 0.28) 100%
    );
}

.hero .hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 30%;
    border-radius: 0;
    box-shadow: none;
    filter: saturate(0.78) contrast(1.05) brightness(1.02);
    scale: 1.08;
    translate: 0 var(--hero-shift, 0px);
    animation: heroImageIn 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Sello giratorio (solo en pantallas grandes) */

.hero-badge {
    display: none;
}


/* ---------- Escritorio: texto y foto sobre la misma rejilla ----------
   La foto termina justo donde termina el menú (mismo margen derecho)
   y el texto empieza donde empieza el contenido. */

@media (min-width: 1000px) {

    .hero {
        --hero-edge: max(7%, calc((100% - 1280px) / 2));
        --hero-width: min(1280px, 86%);
        min-height: min(100vh, 900px);
    }

    .hero .hero-content {
        max-width: calc(60% - 40px);
    }

    .hero .hero-image {
        position: absolute;
        top: 104px;
        right: var(--hero-edge);
        bottom: 40px;
        width: calc(var(--hero-width) * 0.4);
        height: auto;
        border-radius: 22px;
    }

    .hero-badge {
        position: absolute;
        z-index: 3;
        right: calc(var(--hero-edge) + var(--hero-width) * 0.4 - 60px);
        bottom: 17%;
        display: grid;
        place-items: center;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: #ffffff;
        color: #206e95;
        border: 1px solid #dbe9f0;
        box-shadow: 0 10px 24px -12px rgba(18, 48, 74, 0.28);
    }

    .hero-badge-ring {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        animation: heroSpin 28s linear infinite;
    }

    .hero-badge-ring text {
        font-family: 'Manrope', Helvetica, sans-serif;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.1em;
        fill: #12304a;
    }

    .hero-badge-flake {
        width: 34px;
        height: 34px;
    }
}

.hero-badge img.hero-badge-flake {
    width: 100px;
    height: 100px;
    object-fit: contain;
    transform: translateY(-2px);
}


/* ---------- Menú en escritorio: cápsula flotante clara ---------- */

@media (min-width: 901px) {

    :is(.hero, .site-header) .menu {
        position: fixed;
        top: 22px;
        right: max(7%, calc((100% - 1280px) / 2));
        z-index: 1000;

        gap: 2px;
        padding: 6px 6px 6px 12px;

        background: rgba(255, 255, 255, 0.88);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        backdrop-filter: blur(16px) saturate(160%);
        border: 1px solid rgba(18, 48, 74, 0.08);
        border-radius: 999px;
        box-shadow: 0 8px 26px -10px rgba(18, 48, 74, 0.22);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    /* Al bajar por la página, la cápsula se vuelve algo más sólida */
    :is(.hero, .site-header) .menu.is-scrolled {
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 10px 30px -10px rgba(18, 48, 74, 0.28);
    }

    :is(.hero, .site-header) .menu > a,
    :is(.hero, .site-header) .menu .dropdown-toggle {
        padding: 9px 15px;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.01em;
        transition: color 0.25s ease;
    }

    :is(.hero, .site-header) .menu > a:hover,
    :is(.hero, .site-header) .menu .dropdown:hover .dropdown-toggle {
        color: #206e95;
        transform: none;
    }

    /* Subrayado fino al pasar el ratón o en la sección actual */
    :is(.hero, .site-header) .menu > a::after,
    :is(.hero, .site-header) .menu .dropdown-toggle::after {
        left: 15px;
        bottom: 4px;
        height: 1px;
    }

    :is(.hero, .site-header) .menu > a:hover::after,
    :is(.hero, .site-header) .menu .dropdown:hover .dropdown-toggle::after,
    :is(.hero, .site-header) .menu a.is-active::after {
        width: calc(100% - 30px);
    }

    :is(.hero, .site-header) .menu a.is-active {
        color: #206e95;
    }

    :is(.hero, .site-header) .menu a.menu-cta {
        margin-left: 8px;
        padding: 11px 22px;
        font-size: 14px;
        font-weight: 600;
        border-radius: 999px;
    }

    :is(.hero, .site-header) .menu a.menu-cta:hover {
        transform: none;
    }

    /* Desplegable de servicios */
    :is(.hero, .site-header) .menu .dropdown-menu {
        top: calc(100% + 16px);
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(18, 48, 74, 0.18);
    }

    /* Puente invisible para que el desplegable no se cierre
       al mover el ratón desde "Servicios" hasta las opciones */
    :is(.hero, .site-header) .menu .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -18px;
        left: 0;
        right: 0;
        height: 18px;
    }
}


/* ---------- Tablet ---------- */

@media (max-width: 999px) {

    .hero .hero-main {
        margin-top: -100px;
        padding: 40px 0 90px;
        gap: 56px;
    }

}

@media (max-width: 900px) {

    .hero {
        padding: 25px 6% 0;
    }
}

/* Tablet: logo a la izquierda y enlaces a la derecha */
@media (min-width: 601px) and (max-width: 900px) {

    .hero .logo {
        width: 210px;
    }

    .hero .navbar {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
    }

    .hero .menu {
        width: auto;
        max-width: 62%;
        justify-content: flex-end;
        gap: 8px 16px;
        padding-top: 14px;
    }
}


/* ---------- Móvil ---------- */

@media (max-width: 600px) {

    .hero .logo {
        width: 200px;
    }

    .hero .hero-main {
        margin-top: -100px;
        padding: 24px 0 80px;
        gap: 44px;
    }

    .hero .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero .button {
        justify-content: center;
    }

    .hero .hero-image {
        height: 300px;
        border-radius: 16px;
    }

    /* Menú desplegado en móvil: tarjeta blanca */
    .hero .logo,
    .site-header .logo {
        flex-shrink: 0;
    }

    :is(.hero, .site-header) .menu.menu-open {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 30;
        width: auto;
        align-items: flex-start;
        margin-top: 10px;
        padding: 10px 22px 20px;
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 14px 34px rgba(18, 48, 74, 0.14);
    }

    :is(.hero, .site-header) .menu.menu-open a.menu-cta {
        margin-top: 10px;
    }

    /* En la portada el menú se abre justo debajo del botón de las tres rayas */
    .hero .menu.menu-open {
        top: 60px;
    }
}


/* ---------- Quien prefiere menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {

    .hero .hero-content > *,
    .hero .hero-image img,
    .hero-badge-ring {
        animation: none;
    }
}


/* =========================
   DESCRIPCIÓN DE LA ZONA
   Sin tarjeta: una línea fina bajo los botones, el nombre de la
   zona con su marcador y el texto con el mismo ancho que el párrafo
   de arriba. La altura mínima evita que el título salte al cambiar
   de zona.
   ========================= */

.location-description-box {
    max-width: 550px;
    min-height: 168px;
    margin-top: 32px;
    padding-top: 26px;
    border-top: 1px solid #cfe1e8;
}

.location-description-box h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: #12304a;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.location-description-box h3::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background-color: #206e95;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12zm0-9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12zm0-9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.location-description-box p {
    margin: 0;
    color: #5d7080;
    font-size: 16px;
    line-height: 1.7;
}

/* al cambiar de zona el texto aparece con un fundido suave */
.location-description-box.is-updating h3,
.location-description-box.is-updating p {
    animation: locationTextIn 0.45s ease both;
}

.location-description-box.is-updating p {
    animation-delay: 0.06s;
}

@keyframes locationTextIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .location-description-box.is-updating h3,
    .location-description-box.is-updating p {
        animation: none;
    }
}

@media (max-width: 600px) {
    .location-description-box {
        min-height: 190px;
        margin-top: 26px;
        padding-top: 22px;
    }

    .location-description-box h3 {
        font-size: 19px;
    }

    .location-description-box p {
        font-size: 15px;
    }
}


/* Movimiento suave de los puntos de la vivienda */

@keyframes housePointPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(32, 110, 149, 0.25);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(32, 110, 149, 0);
    }
}

.house-point.house-point-animated {
    animation: housePointPulse 2s ease-in-out var(--point-delay, 0s) 2;
}

@media (prefers-reduced-motion: reduce) {
    .house-point.house-point-animated {
        animation: none;
    }
}


/* =========================================================
   CÓMO TRABAJAMOS
   ========================================================= */

.process {
    padding: 110px 7% 120px;
    background: #f4f9fc;
}

.process-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.process-head {
    max-width: 640px;
    margin-bottom: 64px;
}

.process-head h2 {
    margin-bottom: 18px;
    font-size: 46px;
    line-height: 1.1;
    letter-spacing: -1px;
}

.process-head > p:last-child {
    color: #5d7080;
    font-size: 17px;
}

.process-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    list-style: none;
}

/* Línea que se dibuja al llegar a la sección */
.process-steps::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, #206e95 0%, rgba(32, 110, 149, 0.25) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
}

.process-steps.is-in::before {
    transform: scaleX(1);
}

.process-step {
    position: relative;
    padding-top: 72px;
}

.process-step-number {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #b9dbe9;
    color: #206e95;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition:
        background-color 0.5s ease,
        color 0.5s ease,
        border-color 0.5s ease;
}

.process-steps.is-in .process-step-number {
    background: #206e95;
    border-color: #206e95;
    color: #ffffff;
}

.process-steps.is-in .process-step:nth-child(1) .process-step-number { transition-delay: 0.3s; }
.process-steps.is-in .process-step:nth-child(2) .process-step-number { transition-delay: 0.6s; }
.process-steps.is-in .process-step:nth-child(3) .process-step-number { transition-delay: 0.9s; }
.process-steps.is-in .process-step:nth-child(4) .process-step-number { transition-delay: 1.2s; }

.process-step h3 {
    margin-bottom: 10px;
    font-size: 19px;
    line-height: 1.3;
    color: #206e95;
}

.process-step p {
    max-width: 250px;
    font-size: 15px;
    line-height: 1.65;
    color: #5d7080;
    text-align: justify;
}

/* Trabajos va después de esta sección, que ya tiene su propio espacio */
.process + .works {
    padding-top: 100px;
}

@media (max-width: 900px) {
    .process {
        padding: 80px 6% 90px;
    }

    .process-head h2 {
        font-size: 38px;
    }

    .process-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 44px 28px;
    }

    .process-steps::before {
        display: none;
    }

    .process + .works {
        padding-top: 80px;
    }
}

@media (max-width: 600px) {
    .process-head {
        margin-bottom: 44px;
    }

    .process-head h2 {
        font-size: 32px;
    }

    .process-steps {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /* En móvil la línea es vertical */
    .process-steps::before {
        display: block;
        top: 22px;
        bottom: 22px;
        left: 22px;
        right: auto;
        width: 1px;
        height: auto;
        transform: scaleY(0);
        transform-origin: center top;
    }

    .process-steps.is-in::before {
        transform: scaleY(1);
    }

    .process-step {
        min-height: 44px;
        padding: 0 0 0 68px;
    }

    .process-step p {
        max-width: none;
    }
}


/* =========================================================
   MOVIMIENTO SUAVE (lo activa script.js)
   ========================================================= */

/* Antes de aparecer, los elementos esperan ocultos.
   Si el visitante prefiere menos movimiento, esta clase no se añade. */
.js-reveal {
    opacity: 0;
}

/* Luz suave que sigue al ratón dentro de las tarjetas de servicio */
.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
        280px circle at var(--mx, 50%) var(--my, 50%),
        rgba(32, 110, 149, 0.10),
        rgba(32, 110, 149, 0) 65%
    );
    transition: opacity 0.35s ease;
}

.service-card:hover::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .process-steps::before {
        transform: none;
        transition: none;
    }

    .process-step-number {
        background: #206e95;
        border-color: #206e95;
        color: #ffffff;
        transition: none;
    }

    .service-card::after {
        display: none;
    }
}


/* =========================================================
   PÁGINAS DE SERVICIO: CABECERA Y PIE
   ========================================================= */

.site-header {
    position: relative;
    z-index: 50;
}

.site-header .navbar {
    max-width: 1280px;
    margin: 0 auto;
}

/* En escritorio el menú es la cápsula flotante; el nombre solo se
   muestra en tablet y móvil */
.site-wordmark {
    display: none;
    color: #206e95;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
}

@media (max-width: 900px) {
    .site-header {
        position: sticky;
        top: 0;
        padding: 12px 6%;
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(18, 48, 74, 0.08);
    }

    .site-header .navbar {
        gap: 10px;
    }

    .site-wordmark {
        display: block;
    }
}

@media (max-width: 600px) {
    .site-header .navbar {
        gap: 0;
    }
}

.dropdown-menu a[aria-current="page"] {
    background: #eef6fb;
    font-weight: 600;
}


/* =========================================================
   AJUSTES DE DESBORDE
   La casa de servicios se desplaza hasta 130px a la derecha para
   dejar sitio al texto. En pantallas estrechas ese desplazamiento
   se reduce solo (hasta 0) para que la página no se salga por la
   derecha, sobre todo en el móvil.
   ========================================================= */

body {
    overflow-x: clip;
}

.house-section .house-services {
    transform: translateX(clamp(0px, calc(50vw - 440px), 130px));
}


/* =========================
   TRABAJOS · CARRUSEL
   (solo la portada: la página trabajos.html usa .gallery-grid)
   ========================= */

/* Título a la izquierda y flechas a la derecha, en la misma fila */
.works-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    max-width: 1400px;
    margin: 0 auto 32px;
}

.works-head .section-intro {
    margin-bottom: 0;
}

@media (min-width: 901px) {
    /* menos aire arriba y abajo para que la sección entera quepa en pantalla */
    .process + .works {
        padding-top: 64px;
        padding-bottom: 96px;
    }
}

.works-grid {
    gap: 20px;
    padding-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.works-grid::-webkit-scrollbar {
    display: none;
}

.works-grid.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

/* La altura de las fotos se adapta a la altura de la pantalla:
   en un portátil caben título, fotos y botón sin tener que hacer scroll */
.works-grid .work-card {
    position: relative;
    flex: 0 0 auto;
    height: clamp(240px, calc(100vh - 410px), 460px);
    aspect-ratio: 4 / 5;
    border: 0;
    border-radius: 14px;
    background-color: #e6f0f5;
    scroll-snap-align: start;
    /* el recorte redondeado también durante la animación de la foto */
    isolation: isolate;
}

.works-grid .work-card img {
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.works-grid .work-card:hover img {
    transform: scale(1.04);
}

/* pequeño "+" que aparece al pasar el ratón: indica que la foto se amplía */
.works-grid .work-card::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:
        linear-gradient(#12304a, #12304a) center / 14px 1.6px no-repeat,
        linear-gradient(#12304a, #12304a) center / 1.6px 14px no-repeat,
        rgba(255, 255, 255, 0.92);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.works-grid .work-card:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.works-arrows {
    display: flex;
    flex: none;
    gap: 10px;
}

.works-arrow {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid #b9d5df;
    border-radius: 50%;
    background-color: #ffffff;
    color: #12304a;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.works-arrow svg {
    width: 18px;
    height: 18px;
}

.works-arrow:hover:not(:disabled) {
    border-color: #206e95;
    background-color: #206e95;
    color: #ffffff;
}

.works-arrow:focus-visible {
    outline: 2px solid #168bb0;
    outline-offset: 3px;
}

.works-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Barra de progreso + botón "Ver todos" en una sola fila */
.works-controls {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 1400px;
    margin: 24px auto 0;
}

.works-progress {
    position: relative;
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background-color: #dbe9f0;
    overflow: hidden;
}

.works-progress span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 28%;
    border-radius: 2px;
    background-color: #206e95;
}

.works-controls .works-more-button {
    flex: none;
}

@media (max-width: 900px) {
    .works-arrows {
        display: none;
    }

    .works-head {
        margin-bottom: 28px;
    }

    .works-grid .work-card {
        flex-basis: calc((100% - 20px) / 2.3);
        height: auto;
    }
}

@media (max-width: 600px) {
    .works-grid {
        gap: 14px;
    }

    .works-grid .work-card {
        flex-basis: 76%;
    }

    .works-controls {
        gap: 20px;
        margin-top: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .works-grid .work-card img,
    .works-grid .work-card::after {
        transition: none;
    }
}


/* =========================================================
   PÁGINA DE TODOS LOS TRABAJOS
   Misma cabecera y pie que las demás páginas; título y fotos con
   el mismo estilo que la sección "Trabajos" de la portada.
   ========================================================= */

.gallery-heading {
    width: 86%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0 40px;
    text-align: left;
}

/* el enlace de vuelta queda a la altura del menú flotante */
.gallery-back {
    display: inline-block;
    margin: 40px 0 52px;
    font-size: 14px;
    font-weight: 500;
    color: #206e95;
}

.gallery-eyebrow {
    margin: 0 0 15px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #168bb0;
}

.gallery-heading h1 {
    margin: 0 0 20px;
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    color: #12304a;
}

.gallery-heading > p:not(.gallery-eyebrow) {
    max-width: 650px;
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: #5d7080;
}

.gallery-content {
    padding: 0 7% 110px;
}

.gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.gallery-grid .work-card {
    position: relative;
    aspect-ratio: 4 / 5;
    border: 0;
    border-radius: 14px;
    background-color: #e6f0f5;
    isolation: isolate;
}

.gallery-grid .work-image {
    height: 100%;
    border-radius: 0;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gallery-grid .work-card:hover .work-image {
    transform: scale(1.04);
}

.gallery-grid .work-card::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:
        linear-gradient(#12304a, #12304a) center / 14px 1.6px no-repeat,
        linear-gradient(#12304a, #12304a) center / 1.6px 14px no-repeat,
        rgba(255, 255, 255, 0.92);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.gallery-grid .work-card:hover::after {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1100px) {
    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    /* en tablet y móvil la cabecera es una barra fija arriba */
    .gallery-back {
        margin: 28px 0 32px;
    }

    .gallery-content {
        padding-bottom: 80px;
    }
}

@media (max-width: 700px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .gallery-grid .work-card {
        border-radius: 12px;
    }

    /* sin ratón no hace falta el "+" */
    .gallery-grid .work-card::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-grid .work-image,
    .gallery-grid .work-card::after {
        transition: none;
    }
}


/* =========================================================
   CONTACTO · AFINADO
   Iconos en SVG (como los del pie), efecto al pasar el ratón,
   formulario con más aire y botón en píldora como el resto.
   ========================================================= */

.contact-icon {
    flex: 0 0 auto;
    color: #206e95;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.contact-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.contact-item strong {
    transition: color 0.25s ease;
}

a.contact-item:hover .contact-icon,
a.contact-item:focus-visible .contact-icon {
    background-color: #206e95;
    color: #ffffff;
}

a.contact-item:hover strong,
a.contact-item:focus-visible strong {
    color: #206e95;
}

a.contact-item:focus-visible {
    outline: none;
}

.contact-form-container {
    padding: 36px;
}

.contact-form-container h3 {
    margin-bottom: 26px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group input,
.form-group textarea {
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #168bb0;
    box-shadow: 0 0 0 4px rgba(22, 139, 176, 0.15);
}

.form-privacy {
    margin: 6px 0 20px;
    font-size: 12.5px;
    line-height: 1.6;
}

.form-button {
    padding: 16px 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
}

.form-button:hover {
    background-color: #185775;
}

/* campo trampa antispam: fuera de pantalla */
.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 600px) {
    .contact-form-container {
        padding: 28px 20px;
    }
}

/* el botón flotante de WhatsApp se aparta mientras se ve la sección de contacto */
.whatsapp-floating {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.whatsapp-floating.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================================
   MAPA DE LA ZONA DE TRABAJO
   ========================================================= */

.location-map {
    height: auto;
    min-height: 380px;
    border: 1px solid #cfe1e8;
    border-radius: 14px;
    background: #e6f2f7;
}

.location-map iframe {
    height: 380px;
}

.map-external-link {
    display: block;
    padding: 11px 18px;
    border-top: 1px solid #cfe1e8;
    background: #ffffff;
    color: #206e95;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    text-decoration: none;
}

.map-external-link:hover {
    text-decoration: underline;
}


/* =========================================================
   PÁGINAS DE ESTADO: "gracias" tras el formulario y error 404
   ========================================================= */

.status-page {
    width: 86%;
    max-width: 1400px;
    min-height: 62vh;
    margin: 0 auto;
    padding: 90px 0 130px;
}

.status-eyebrow {
    margin: 0 0 15px;
    color: #168bb0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.status-page h1 {
    max-width: 760px;
    margin: 0 0 22px;
    color: #12304a;
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -1.4px;
}

.status-text {
    max-width: 560px;
    margin: 0 0 34px;
    color: #5d7080;
    font-size: 17px;
    line-height: 1.75;
}

.status-text a {
    color: #206e95;
    font-weight: 600;
    text-decoration: underline;
}

.status-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
}

.status-button {
    display: inline-block;
    padding: 15px 28px;
    border-radius: 999px;
    background: #206e95;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.status-button:hover {
    background: #185775;
    transform: translateY(-2px);
}

.status-link {
    color: #206e95;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.status-link:hover {
    text-decoration: underline;
}

.status-services {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
}

.status-services a {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #b9d5df;
    border-radius: 999px;
    background: #ffffff;
    color: #12304a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.status-services a:hover {
    border-color: #206e95;
    color: #206e95;
}

@media (max-width: 600px) {
    .status-page {
        padding: 56px 0 90px;
    }
}


/* =========================
   PIE · CRÉDITO DE LA WEB
   ========================= */

.footer-bottom .footer-credit {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.75;
}


/* =========================
   TRANSICIÓN SUAVE ENTRE PÁGINAS
   Al pasar de una página a otra, la nueva aparece con un fundido corto.
   El menú y el botón de WhatsApp se quedan quietos mientras tanto.
   (Solo en navegadores que lo permiten, y se desactiva si la persona
   tiene activada la opción de reducir movimiento.)
   ========================= */

@media (prefers-reduced-motion: no-preference) {

    @view-transition {
        navigation: auto;
    }

    @media (min-width: 901px) {
        .menu {
            view-transition-name: site-menu;
        }
    }

    .whatsapp-floating {
        view-transition-name: site-whatsapp;
    }

    ::view-transition-old(root) {
        animation: 0.25s ease both vtFadeOut;
    }

    ::view-transition-new(root) {
        animation: 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both vtFadeIn;
    }
}

@keyframes vtFadeOut {
    to { opacity: 0; }
}

@keyframes vtFadeIn {
    from { opacity: 0; transform: translateY(10px); }
}


/* =========================================================
   PÁGINA "GRACIAS": EL TIC SE DIBUJA SOLO
   Sin animación (o con "reducir movimiento") se ve ya dibujado.
   ========================================================= */

.status-check {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 0 26px;
    overflow: visible;
}

.status-check circle,
.status-check path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.status-check-fondo {
    fill: #e3f2f8;
}

.status-check-aro {
    stroke: #168bb0;
    stroke-width: 2.4;
    stroke-dasharray: 151;
    transform: rotate(-90deg);
    transform-origin: 26px 26px;
}

.status-check-tic {
    stroke: #206e95;
    stroke-width: 3.8;
    stroke-dasharray: 36;
}

.status-check-onda {
    stroke: #168bb0;
    stroke-width: 1.6;
    opacity: 0;
    transform-origin: 26px 26px;
}

@media (max-width: 600px) {
    .status-check {
        width: 60px;
        height: 60px;
        margin-bottom: 22px;
    }
}

@media (prefers-reduced-motion: no-preference) {

    .status-check-fondo {
        animation: statusFondo 0.5s ease-out 0.15s both;
        transform-origin: 26px 26px;
    }

    .status-check-aro {
        animation: statusAro 0.75s cubic-bezier(0.55, 0.1, 0.25, 1) both;
    }

    .status-check-tic {
        animation: statusTic 0.45s cubic-bezier(0.5, 0, 0.2, 1) 0.6s both;
    }

    .status-check-onda {
        animation: statusOnda 0.9s ease-out 1s both;
    }

    .status-ok > .status-eyebrow,
    .status-ok > h1,
    .status-ok > .status-text,
    .status-ok > .status-actions {
        animation: statusTexto 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .status-ok > .status-eyebrow { animation-delay: 0.75s; }
    .status-ok > h1              { animation-delay: 0.85s; }
    .status-ok > .status-text    { animation-delay: 0.95s; }
    .status-ok > .status-actions { animation-delay: 1.05s; }
}

@keyframes statusAro {
    from { stroke-dashoffset: 151; }
    to   { stroke-dashoffset: 0; }
}

@keyframes statusTic {
    from { stroke-dashoffset: 36; }
    to   { stroke-dashoffset: 0; }
}

@keyframes statusFondo {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes statusOnda {
    from { opacity: 0.45; transform: scale(1); }
    to   { opacity: 0;    transform: scale(1.55); }
}

@keyframes statusTexto {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* =========================================================
   AVISO DE COOKIES (Google Analytics)
   Lo crea cookies.js; no se ve hasta que se pone el ID de Google.
   ========================================================= */

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 12px 32px;
    padding: 16px max(32px, calc((100% - 1200px) / 2));
    border-top: 1px solid #dbe9f0;
    background: #ffffff;
    box-shadow: 0 -10px 34px rgba(18, 48, 74, 0.12);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.cookie-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* El título sigue ahí para los lectores de pantalla, pero no se ve */
.cookie-banner-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cookie-banner-text {
    flex: 1;
    margin: 0;
    color: #5d7080;
    font-size: 14px;
    line-height: 1.55;
}

.cookie-banner-text strong {
    color: #12304a;
    font-weight: 600;
}

.cookie-banner-text a {
    color: #206e95;
    font-weight: 600;
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    flex: none;
    gap: 10px;
}

.cookie-banner-button {
    flex: none;
    padding: 10px 26px;
    border: 2px solid #206e95;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cookie-banner-accept {
    background: #206e95;
    color: #ffffff;
}

.cookie-banner-reject {
    background: #ffffff;
    color: #206e95;
}

.cookie-banner-accept:hover {
    background: #185775;
    border-color: #185775;
}

.cookie-banner-reject:hover {
    background: #eef7fa;
}

.cookie-banner-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(22, 139, 176, 0.3);
}

@media (max-width: 700px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        border-radius: 18px 18px 0 0;
    }

    .cookie-banner-text {
        font-size: 13px;
        line-height: 1.5;
    }

    .cookie-banner-button {
        flex: 1;
        padding: 11px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner {
        transform: none;
        transition: none;
    }
}

/* Tarjetas de servicios: sin imagen de fondo */
.service-card::before {
    display: none;
}

/* Portada: sin "Trabajos reales en Navarra" */
.hero .hero-works {
    display: none !important;
}

/* =========================================================
   TARJETAS DE SERVICIOS: colores de las historias de Instagram
   y una forma plana en cada una.
   Para volver a como estaba: borra este bloque (y la carpeta
   images/servicios si quieres).
   ========================================================= */
.services-grid .service-card {
    min-height: 0;
    padding: 16px 24px 28px;
    border: 0;
    border-radius: 18px;
    box-shadow: none;
    background-color: var(--sc-bg) !important;
    color: var(--sc-txt);
}

.services-grid .service-card:nth-child(1) { --sc-bg: #206e95; --sc-txt: #ffffff; --sc-img: url("images/servicios/aire-acondicionado.svg"); }
.services-grid .service-card:nth-child(2) { --sc-bg: #7ba5bd; --sc-txt: #0e2f44; --sc-img: url("images/servicios/aerotermia.svg"); }
.services-grid .service-card:nth-child(3) { --sc-bg: #c2d9eb; --sc-txt: #0e2f44; --sc-img: url("images/servicios/climatizacion.svg"); }
.services-grid .service-card:nth-child(4) { --sc-bg: #e9e4de; --sc-txt: #0e2f44; --sc-img: url("images/servicios/cargadores-electricos.svg"); }

.services-grid .service-card h3,
.services-grid .service-card p,
.services-grid .service-card .service-link {
    color: var(--sc-txt);
}

.services-grid .service-card h3 { font-size: 25px; line-height: 1.12; }
.services-grid .service-card p { font-size: 15px; line-height: 1.55; }

/* Se quitan el número, el icono de texto y la luz del ratón */
.services-grid .service-card .service-number,
.services-grid .service-card .service-icon,
.services-grid .service-card::after {
    display: none;
}

/* La ilustración ocupa el sitio de la imagen de fondo de antes */
.services-grid .service-card::before {
    content: "";
    display: block;
    position: static;
    inset: auto;
    z-index: auto;
    opacity: 1;
    width: min(60%, 200px);
    align-self: center;
    aspect-ratio: 300 / 210;
    margin: 0 0 14px;
    background: var(--sc-img) center / contain no-repeat;
}

.services-grid a.service-card:hover {
    transform: translateY(-6px);
    box-shadow: none;
}

/* Ordenador con ventana estrecha: cuatro columnas más ajustadas */
@media (min-width: 901px) and (max-width: 1180px) {
    .services-grid .service-card { padding: 14px 18px 24px; }
    .services-grid .service-card h3 { font-size: 21px; }
    .services-grid .service-card p { font-size: 14px; }
}

/* Móvil y tablet pequeña: tarjetas compactas, solo con el color */
@media (max-width: 900px) {
    .services-grid a.service-card {
        grid-template-columns: 1fr 20px;
        grid-template-areas:
            "titulo flecha"
            "texto  flecha";
        padding: 15px 16px;
        border-radius: 14px;
    }

    .services-grid a.service-card::before { display: none; }
    .services-grid a.service-card h3 { font-size: 17px; line-height: 1.25; }
    .services-grid a.service-card p { font-size: 12.5px; line-height: 1.45; }
    .services-grid a.service-card:hover { transform: none; }
}

/* Tarjetas de servicios: más pequeñas */
.services-grid .service-card {
    padding: 12px 20px 20px;
}

.services-grid .service-card::before {
    width: min(52%, 140px);
    margin-bottom: 10px;
}

.services-grid .service-card h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.services-grid .service-card p {
    font-size: 13px;
    line-height: 1.5;
}

.services-grid .service-card .service-link {
    font-size: 13px;
    padding-top: 14px;
}

/* Tarjetas de servicios: "Conoce el servicio" a la derecha */
.services-grid .service-card .service-link {
    align-self: flex-end;
}
/* Tarjetas de servicios: más pequeñas y finas (dibujo arriba a la derecha) */
@media (min-width: 901px) {
    .services-grid .service-card {
        padding: 18px 22px 16px;
        border-radius: 12px;
    }

    .services-grid .service-card::before {
        position: absolute;
        top: 14px;
        right: 16px;
        width: 84px;
        margin: 0;
    }

    .services-grid .service-card h3 {
        display: flex;
        align-items: center;
        min-height: 64px;
        margin: 0 0 6px;
        padding-right: 92px;
        font-size: 17px;
    }

    .services-grid .service-card p {
        font-size: 12.5px;
        line-height: 1.5;
    }

    .services-grid .service-card .service-link {
        padding-top: 12px;
        font-size: 12.5px;
    }

    .services-grid a.service-card:hover {
        transform: translateY(-4px);
    }
}

/* Ordenador con ventana estrecha: el dibujo va encima del título */
@media (min-width: 901px) and (max-width: 1180px) {
    .services-grid .service-card::before {
        position: static;
        width: 72px;
        margin: 0 0 8px;
    }

    .services-grid .service-card h3 {
        display: block;
        min-height: 0;
        padding-right: 0;
        font-size: 17px;
    }
}

/* Móvil: la flecha vuelve a quedar centrada */
@media (max-width: 900px) {
    .services-grid a.service-card .service-link {
        align-self: center;
    }
}

/* Tarjetas de servicios: título un pelín más grande */
@media (min-width: 1181px) {
    .services-grid .service-card::before { width: 78px; right: 14px; }
    .services-grid .service-card h3 { font-size: 19px; padding-right: 84px; }
}
@media (min-width: 901px) and (max-width: 1180px) {
    .services-grid .service-card h3 { font-size: 18px; }
}

/* Números de "Cómo trabajamos": colores de las historias destacadas */
.process-steps.is-in .process-step:nth-child(1) .process-step-number { background: #206e95; border-color: #206e95; color: #ffffff; }
.process-steps.is-in .process-step:nth-child(2) .process-step-number { background: #7ba5bd; border-color: #7ba5bd; color: #0e2f44; }
.process-steps.is-in .process-step:nth-child(3) .process-step-number { background: #c2d9eb; border-color: #c2d9eb; color: #0e2f44; }
.process-steps.is-in .process-step:nth-child(4) .process-step-number { background: #e9e4de; border-color: #ccc0b2; color: #0e2f44; }
@media (prefers-reduced-motion: reduce) {
    .process-step:nth-child(2) .process-step-number { background: #7ba5bd; border-color: #7ba5bd; color: #0e2f44; }
    .process-step:nth-child(3) .process-step-number { background: #c2d9eb; border-color: #c2d9eb; color: #0e2f44; }
    .process-step:nth-child(4) .process-step-number { background: #e9e4de; border-color: #ccc0b2; color: #0e2f44; }
}

.process-step p { text-align: left; }

.process-steps.is-in .process-step:nth-child(4) .process-step-number { border-color: #e9e4de; }
@media (prefers-reduced-motion: reduce) {
    .process-step:nth-child(4) .process-step-number { border-color: #e9e4de; }
}

/* Casita: la casa nunca tapa el texto; solo el bocadillo se pone por encima */
body .house-section .house-services,
body .house-section .house-services:has(.house-point:hover),
body .house-section .house-services:has(.house-point:focus-within) {
    z-index: auto;
    transform: none;
    left: clamp(0px, calc(50vw - 440px), 130px);
}
body .house-section .house-point:hover,
body .house-section .house-point:focus-within {
    z-index: 10;
}


/* =========================================================
   CÓMO TRABAJAMOS: el instalador camina por la línea y,
   al pasar, se van encendiendo los números
   (necesita images/instalador.svg)
   ========================================================= */

@media (min-width: 901px) {

    /* sitio para que quepa el dibujo por encima de la línea */
    .process-head { margin-bottom: 96px; }

    /* la línea se dibuja a la vez que él camina */
    .process-steps::before { transition-duration: 4.8s; transition-timing-function: linear; transition-delay: 0.3s; }

    .process-steps::after {
        content: "";
        position: absolute;
        z-index: 0;                 /* por detrás de los círculos */
        top: -87px;                 /* los pies quedan justo sobre la línea */
        left: -20px;
        width: 84px;
        height: 112px;
        background: url("images/instalador.svg") 0 0 / auto 112px no-repeat;
        opacity: 0;
        pointer-events: none;
    }

    .process-steps.is-in::after {
        opacity: 1;
        animation:
            instaladorCamina 4.8s linear 0.3s both,
            instaladorPasos 0.6s steps(8) 0.3s 8 both;
    }

    /* cada número se enciende cuando él llega */
    .process-steps.is-in .process-step:nth-child(1) .process-step-number { transition-delay: 0.1s; }
    .process-steps.is-in .process-step:nth-child(2) .process-step-number { transition-delay: 1.5s; }
    .process-steps.is-in .process-step:nth-child(3) .process-step-number { transition-delay: 2.9s; }
    .process-steps.is-in .process-step:nth-child(4) .process-step-number { transition-delay: 4.4s; }
}

@keyframes instaladorCamina {
    from { left: -20px; }
    to   { left: calc(75% + 87px); }
}
@keyframes instaladorPasos {
    from { background-position: 0 0; }
    to   { background-position: -672px 0; }
}

/* móvil y tablet: sin dibujo, solo se encienden los números */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    .process-steps::after { display: none; }
}
/* =========================================================
   CÓMO TRABAJAMOS: el instalador camina por la línea y,
   al pasar, se van encendiendo los números
   (necesita images/instalador.svg)
   ========================================================= */

@media (min-width: 901px) {

    /* sitio para que quepa el dibujo por encima de la línea */
    .process-head { margin-bottom: 120px; }

    /* la línea se dibuja a la vez que él camina */
    .process-steps::before { transition-duration: 4.8s; transition-timing-function: linear; transition-delay: 0.3s; }

    .process-steps::after {
        content: "";
        position: absolute;
        z-index: 0;                 /* por detrás de los círculos */
        top: -109px;                /* los pies quedan justo sobre la línea */
        left: -39px;
        width: 114px;
        height: 136px;
        background: url("images/instalador.svg") 0 0 / 1026px 136px no-repeat;
        opacity: 0;
        pointer-events: none;
    }

    .process-steps.is-in::after {
        opacity: 1;
        animation:
            instaladorCamina 4.8s linear 0.3s both,
            instaladorPasos 0.6s steps(8) 0.3s 8 both;
    }

    /* cada número se enciende cuando él llega */
    .process-steps.is-in .process-step:nth-child(1) .process-step-number { transition-delay: 0.1s; }
    .process-steps.is-in .process-step:nth-child(2) .process-step-number { transition-delay: 1.5s; }
    .process-steps.is-in .process-step:nth-child(3) .process-step-number { transition-delay: 2.9s; }
    .process-steps.is-in .process-step:nth-child(4) .process-step-number { transition-delay: 4.4s; }
}

@keyframes instaladorCamina {
    from { left: -39px; }
    to   { left: calc(75% + 68px); }
}
@keyframes instaladorPasos {
    from { background-position: 0 0; }
    to   { background-position: -912px 0; }
}

/* móvil y tablet: sin dibujo, solo se encienden los números */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    .process-steps::after { display: none; }
}

/* =========================================================
   CÓMO TRABAJAMOS: el instalador camina por la línea y,
   al pasar, se van encendiendo los números
   (necesita images/instalador.svg)
   ========================================================= */

@media (min-width: 901px) {

    /* sitio para que quepa el dibujo por encima de la línea */
    .process-head { margin-bottom: 96px; }

    /* la línea se dibuja a la vez que él camina */
    .process-steps::before { transition-duration: 5.6s; transition-timing-function: linear; transition-delay: 0.3s; }

    .process-steps::after {
        content: "";
        position: absolute;
        z-index: 0;                 /* por detrás de los círculos */
        top: -75px;                 /* los pies quedan justo sobre la línea */
        left: -23px;
        width: 84px;
        height: 100px;
        background: url("images/instalador.svg") 0 0 / 756px 100px no-repeat;
        opacity: 0;
        pointer-events: none;
    }

    .process-steps.is-in::after {
        opacity: 1;
        animation:
            instaladorCamina 5.6s linear 0.3s both,
            instaladorPasos 0.56s steps(8) 0.3s 10 both;
    }

    /* cada número se enciende cuando él llega */
    .process-steps.is-in .process-step:nth-child(1) .process-step-number { transition-delay: 0.1s; }
    .process-steps.is-in .process-step:nth-child(2) .process-step-number { transition-delay: 1.7s; }
    .process-steps.is-in .process-step:nth-child(3) .process-step-number { transition-delay: 3.4s; }
    .process-steps.is-in .process-step:nth-child(4) .process-step-number { transition-delay: 5.1s; }
}

@keyframes instaladorCamina {
    from { left: -23px; }
    to   { left: calc(75% + 84px); }
}
@keyframes instaladorPasos {
    from { background-position: 0 0; }
    to   { background-position: -672px 0; }
}

/* móvil y tablet: sin dibujo, solo se encienden los números */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    .process-steps::after { display: none; }
}


/* =========================================================
   CÓMO TRABAJAMOS: el instalador camina por la línea y,
   al pasar, se van encendiendo los números
   (necesita images/instalador.svg)
   ========================================================= */

@media (min-width: 901px) {

    /* sitio para que quepa el dibujo por encima de la línea */
    .process-head { margin-bottom: 96px; }

    /* la línea se dibuja a la vez que él camina */
    .process-steps::before { transition-duration: 5.6s; transition-timing-function: linear; transition-delay: 0.3s; }

    .process-steps::after {
        content: "";
        position: absolute;
        z-index: 0;                 /* por detrás de los círculos */
        top: -75px;                 /* los pies quedan justo sobre la línea */
        left: -23px;
        width: 84px;
        height: 100px;
        background: url("images/instalador.svg") 0 0 / 756px 100px no-repeat;
        opacity: 0;
        pointer-events: none;
    }

    .process-steps.is-in::after {
        opacity: 1;
        animation:
            instaladorCamina 5.6s linear 0.3s both,
            instaladorPasos 0.56s steps(8) 0.3s 10 both;
    }

    /* cada número se enciende cuando él llega */
    .process-steps.is-in .process-step:nth-child(1) .process-step-number { transition-delay: 0.1s; }
    .process-steps.is-in .process-step:nth-child(2) .process-step-number { transition-delay: 1.7s; }
    .process-steps.is-in .process-step:nth-child(3) .process-step-number { transition-delay: 3.4s; }
    .process-steps.is-in .process-step:nth-child(4) .process-step-number { transition-delay: 5.1s; }
}

@keyframes instaladorCamina {
    from { left: -23px; }
    to   { left: calc(75% + 84px); }
}
@keyframes instaladorPasos {
    from { background-position: 0 0; }
    to   { background-position: -672px 0; }
}

/* móvil y tablet: sin dibujo, solo se encienden los números */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    .process-steps::after { display: none; }
}


/* =========================================================
   CÓMO TRABAJAMOS: el instalador camina por la línea y,
   al pasar, se van encendiendo los números
   (necesita images/instalador.svg)
   ========================================================= */

@media (min-width: 901px) {

    /* sitio para que quepa el dibujo por encima de la línea */
    .process-head { margin-bottom: 96px; }

    /* la línea se dibuja a la vez que él camina */
    .process-steps::before { transition-duration: 5.6s; transition-timing-function: linear; transition-delay: 0.3s; }

    .process-steps::after {
        content: "";
        position: absolute;
        z-index: 0;                 /* por detrás de los círculos */
        top: -75px;                 /* los pies quedan justo sobre la línea */
        left: -23px;
        width: 84px;
        height: 100px;
        background: url("images/instalador.svg") 0 0 / 756px 100px no-repeat;
        opacity: 0;
        pointer-events: none;
    }

    .process-steps.is-in::after {
        opacity: 1;
        animation:
            instaladorCamina 5.6s linear 0.3s both,
            instaladorPasos 0.56s steps(8) 0.3s 10 both;
    }

    /* cada número se enciende cuando él llega */
    .process-steps.is-in .process-step:nth-child(1) .process-step-number { transition-delay: 0.1s; }
    .process-steps.is-in .process-step:nth-child(2) .process-step-number { transition-delay: 1.7s; }
    .process-steps.is-in .process-step:nth-child(3) .process-step-number { transition-delay: 3.4s; }
    .process-steps.is-in .process-step:nth-child(4) .process-step-number { transition-delay: 5.1s; }
}

@keyframes instaladorCamina {
    from { left: -23px; }
    to   { left: calc(75% + 84px); }
}
@keyframes instaladorPasos {
    from { background-position: 0 0; }
    to   { background-position: -672px 0; }
}

/* móvil y tablet: sin dibujo, solo se encienden los números */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    .process-steps::after { display: none; }
}
/* =========================================================
   LLEGADA: la furgoneta llega, el instalador se baja y mira el mapa
   (principio de «Dónde trabajamos»)
   ========================================================= */
.locations { overflow-x: clip; padding-top: 70px; }

.llegada {
    position: relative;
    width: 100vw;
    margin: 0 0 36px calc(50% - 50vw);
    overflow: hidden;
    pointer-events: none;
}

.llegada::after {                         /* línea del suelo */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 6.1%;
    height: 3px;
    background: #c4dbea;
}

.llegada-escena {
    position: relative;
    width: min(740px, 94%);
    margin: 0 auto;
    aspect-ratio: 1100 / 176;
}

/* --- furgoneta (4 capas) --- */
.llegada-furgo {
    position: absolute; z-index: 2;
    left: 26.4%; bottom: 0;
    width: 33.64%; aspect-ratio: 1030 / 430;
    opacity: 0;
}
.llegada-furgo img { position: absolute; display: block; }
.lf-fondo, .lf-carro { left: 0; top: 0; width: 100%; height: 100%; }
.lf-rueda { width: 12.04%; height: auto; top: 64.65%; }
.lf-rueda-t { left: 14.85%; }
.lf-rueda-d { left: 75.53%; }
.lf-carro { transform-origin: 20% 100%; }

/* --- instalador: caminando y luego con el mapa --- */
.llegada-caminante, .llegada-mapa {
    position: absolute; z-index: 1;
    left: 60.1%; bottom: 3.97%;
    opacity: 0;
}
.llegada-caminante {
    width: 8.71%; aspect-ratio: 570 / 680;
    background: url("images/instalador.svg") 0 0 / 900% 100% no-repeat;
}
.llegada-mapa {
    width: 10.7%; aspect-ratio: 700 / 680;
    background: url("images/instalador-mapa.svg") 0 0 / 400% 100% no-repeat;
}

/* --- secuencia (empieza al llegar a la sección) --- */
.llegada.is-in .llegada-furgo {
    animation: llViene 3.2s cubic-bezier(.18, .7, .3, 1) .2s both,
               llAparece .5s linear .2s both;
}
.llegada.is-in .lf-rueda {
    animation: llRueda 3.2s cubic-bezier(.18, .7, .3, 1) .2s both;
}
.llegada.is-in .lf-carro {
    animation: llFrena 1s ease-in-out 2.9s both;
}
.llegada.is-in .llegada-caminante {
    animation: llCamina .9s linear 3.6s both,
               llPasos .9s steps(8) 3.6s both,
               llCaminanteVis .9s linear 3.6s forwards;
}
.llegada.is-in .llegada-mapa {
    animation: llMapaFotogramas .9s steps(3) 4.5s both,
               llMapaVis .01s linear 4.5s forwards;
}

@keyframes llViene { from { transform: translateX(-300%); } to { transform: none; } }
@keyframes llAparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes llRueda { from { transform: rotate(-2902deg); } to { transform: none; } }
@keyframes llFrena { 0%, 100% { transform: none; } 35% { transform: rotate(.9deg); } }
@keyframes llCamina { from { transform: translateX(-110%); } to { transform: none; } }
@keyframes llPasos { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes llCaminanteVis { 0% { opacity: 0; } 12%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes llMapaFotogramas { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes llMapaVis { from { opacity: 0; } to { opacity: 1; } }

/* móvil: más grande (se ve la furgoneta y el instalador) */
@media (max-width: 700px) {
    .locations { padding-top: 50px; }
    .llegada { margin: 0 0 24px calc(50% - 50vw); }
    .llegada-escena { width: 150%; margin-left: -25%; }
}

/* sin movimiento: queda la escena final */
@media (prefers-reduced-motion: reduce) {
    .llegada *, .llegada *::before { animation: none !important; }
    .llegada-furgo { opacity: 1; }
    .llegada-caminante { display: none; }
    .llegada-mapa { opacity: 1; background-position: 100% 0; }
}

/* =========================================================
   «DÓNDE TRABAJAMOS» ENTRA ENTERA EN LA PANTALLA (ordenador)
   Todo se ajusta a la altura de la ventana: furgoneta, título,
   textos, botones y mapa.
   ========================================================= */
@media (min-width: 901px) {
    .locations {
        padding: clamp(72px, 10.3vh, 100px) 7% clamp(20px, 3.5vh, 50px);
    }

    .llegada { margin-bottom: clamp(6px, 1.6vh, 20px); }
    .llegada-escena { width: min(640px, 94%, 87vh); }

    .locations-text h2 {
        margin-bottom: clamp(8px, 1.9vh, 20px);
        font-size: clamp(34px, 7.3vh, 58px);
    }

    .locations-intro {
        margin-bottom: clamp(14px, 3.4vh, 35px);
        font-size: clamp(15px, 2.3vh, 17px);
    }

    .location-description-box {
        min-height: clamp(112px, 15vh, 168px);
        margin-top: clamp(16px, 3.8vh, 32px);
        padding-top: clamp(16px, 2.6vh, 26px);
    }

    .location-map { min-height: 0; }
    .location-map iframe { height: clamp(250px, 51vh, 380px); }
}

@media (min-width: 901px) {
    .location-description-box {
        position: relative;
        max-width: 550px;
        min-height: 0;
        margin-top: clamp(16px, 3vh, 26px);
        padding: clamp(16px, 2.6vh, 22px) 26px;
        border: 0;
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(32, 110, 149, .10);
    }
    /* flecha que apunta al botón activo */
    .location-description-box::before {
        content: "";
        position: absolute;
        top: -8px;
        left: var(--flecha, 70px);
        width: 18px;
        height: 18px;
        margin: 0;
        background: #fff;
        border-radius: 3px;
        transform: translateX(-50%) rotate(45deg);
        -webkit-mask: none;
        mask: none;
    }
    .location-description-box h3 {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        margin: 0; padding: 0;
    }
    .location-description-box p {
        margin: 0;
        color: #3f586c;
        font-size: 16px;
        line-height: 1.55;
    }
}

/* ===== Pie de página: enlaces legales abajo ===== */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 26px;
    margin-bottom: 14px;
}

.footer-legal a {
    color: #c5d8e5;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: #ffffff;
}

/* ===== "Ver todos los trabajos": el círculo se estira hasta ser un botón ===== */
.works-more-button {
    --ease: cubic-bezier(0.65, 0, 0.35, 1);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 48px;
    padding: 0 26px 0 0;
    border-radius: 999px;
    background: transparent;
    color: #12304a;
}

/* el círculo con borde, a la izquierda (se estira hacia la derecha al pasar el ratón) */
.works-more-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 48px;
    height: 100%;
    box-sizing: border-box;
    border: 1.5px solid #206e95;
    border-radius: 999px;
    background: transparent;
    transition: width 0.5s var(--ease), background-color 0.2s ease 0.45s;
}

.wmb-flecha {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    font-size: 18px;
    color: #206e95;
}

/* copia en blanco, recortada con la forma del botón */
.wmb-blanco {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(0 calc(100% - 48px) 0 0 round 999px);
    transition: clip-path 0.5s var(--ease), opacity 0.2s ease 0.45s;
}

.wmb-blanco .wmb-flecha {
    color: #ffffff;
}

.works-more-button:hover {
    background: transparent;
    transform: none;
}

.works-more-button:hover::before {
    width: 100%;
    background: #206e95;
    transition: width 0.5s var(--ease), background-color 0.15s ease;
}

.works-more-button:hover .wmb-blanco {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 999px);
    transition: clip-path 0.5s var(--ease), opacity 0.01s;
}

.works-more-button:focus-visible {
    outline: 2px solid #206e95;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .works-more-button::before,
    .wmb-blanco {
        transition: none !important;
    }
}

/* Títulos de sección con el espaciado más apretado */
.section-intro h2,
.locations-text h2 {
    letter-spacing: -0.03em;
}

/* =========================
   BOTONES DE LA PORTADA
   El círculo se estira hasta ser un botón al pasar el ratón
   ========================= */

.hero .hero-buttons .button {
    --ease: cubic-bezier(0.65, 0, 0.35, 1);
    --h: 48px;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: var(--h);
    padding: 0 28px 0 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #12304a;
    font-size: 14px;
    font-weight: 600;
}

/* el círculo (se estira hacia la derecha) */
.hero .hero-buttons .button::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: var(--h);
    height: 100%;
    box-sizing: border-box;
    border: 1.5px solid #206e95;
    border-radius: 999px;
    background: var(--reposo, transparent);
    transition:
        width 0.5s var(--ease),
        background-color 0.2s ease 0.45s,
        border-color 0.2s ease 0.45s;
}

.hero .hero-buttons .button span.bt-ico {
    display: grid;
    place-items: center;
    width: var(--h);
    height: var(--h);
    flex: none;
    font-size: 18px;
    line-height: 1;
    color: #206e95;
}

.hero .hero-buttons .button span.bt-ico svg {
    width: 20px;
    height: 20px;
}

/* copia en blanco, recortada con la forma del botón */
.hero .hero-buttons .button span.bt-blanco {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(0 calc(100% - var(--h)) 0 0 round 999px);
    transition: clip-path 0.5s var(--ease), opacity 0.2s ease 0.45s;
}

.hero .hero-buttons .button span.bt-blanco span.bt-ico {
    color: #ffffff;
}

/* Pide presupuesto: círculo azul con flecha */
.hero .hero-buttons .button.primary {
    --reposo: #206e95;
    --relleno: #206e95;
    background: transparent;
    color: #12304a;
}

.hero .hero-buttons .button.primary span.bt-ico {
    color: #ffffff;
}

/* WhatsApp: círculo con borde, se rellena en azul oscuro */
.hero .hero-buttons .button.secondary {
    --relleno: #12304a;
    border: 0;
    background: transparent;
    color: #12304a;
}

.hero .hero-buttons .button:hover,
.hero .hero-buttons .button.primary:hover,
.hero .hero-buttons .button.secondary:hover {
    background: transparent;
    border-color: transparent;
    transform: none;
}

.hero .hero-buttons .button:hover::before {
    width: 100%;
    background: var(--relleno);
    border-color: var(--relleno);
    transition: width 0.5s var(--ease), background-color 0.15s ease, border-color 0.15s ease;
}

.hero .hero-buttons .button:hover span.bt-blanco {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 999px);
    transition: clip-path 0.5s var(--ease), opacity 0.01s;
}

/* anula el desplazamiento antiguo de la flecha */
.hero .hero-buttons .button.primary:hover span {
    transform: none;
}

.hero .hero-buttons .button:focus-visible {
    outline: 2px solid #206e95;
    outline-offset: 4px;
}

@media (max-width: 600px) {
    .hero .hero-buttons {
        align-items: flex-start;
    }

    .hero .hero-buttons .button {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero .hero-buttons .button::before,
    .hero .hero-buttons .button span.bt-blanco {
        transition: none !important;
    }
}

.locations-intro {
    text-align: justify;
    hyphens: auto;
}

.hero .hero-description {
    color: #3b5568;      /* más oscuro y con más presencia */
    line-height: 1.5;
}

.hero .hero-description strong {
    color: #12304a;      /* azul marino de la marca */
}

/* Portada: logo y texto de la izquierda un poco más hacia el centro */
@media (min-width: 1000px) {
    .hero .logo { margin-left: 40px; }
    .hero .hero-main { padding-left: 40px; }
}



/* Casa: título y frase un pelín más grandes (solo en pantallas grandes) */
.house-section-text h2 {
    font-size: clamp(25px, 1.9vw, 29px);              /* antes 25px */
}

.house-section-text > p:not(.section-label) {
    font-size: clamp(13px, 0.98vw, 14px);             /* antes 13px */
    text-align: justify;
}


/* =========================================================
   CABECERA DE LAS PÁGINAS INTERIORES EN MÓVIL: SOLO LA PALABRA EGAIBAR DEL LOGO, EN VEZ DE TEXTO
   El enlace conserva su texto (para lectores de pantalla y buscadores)
   pero se ve el nombre con la tipografía del logotipo (sin las ondas ni el copo).
   ========================================================= */

@media (max-width: 900px) {
    .site-header .site-wordmark {
        display: block;
        width: 150px;
        height: 28px;
        font-size: 0;
        line-height: 0;
        color: transparent;
        overflow: hidden;
        background: url("images/logo_pie_azul.png") left center / contain no-repeat;
    }
}


/* =========================================================
   ENLACE "VOLVER": CAJITA REDONDEADA AZUL CLARITO, SIEMPRE VISIBLE
   Se queda fija arriba a la izquierda (a la altura del menú) aunque
   se baje por la página. El hueco que ocupaba se reserva para que
   el resto del contenido no se mueva.
   ========================================================= */

.ac-topbar .ac-back,
.gallery-heading .gallery-back {
    position: fixed;
    top: 29px;
    left: max(5%, calc((100% - 1120px) / 2));
    z-index: 900;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 10px 18px;
    background: #e8f2f9;
    border: 1px solid rgba(32, 110, 149, 0.12);
    border-radius: 999px;
    box-shadow: 0 6px 18px -8px rgba(18, 48, 74, 0.28);
    color: #206e95;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.gallery-heading .gallery-back {
    left: max(7%, calc((100% - 1400px) / 2));
}

.ac-topbar .ac-back:hover,
.gallery-heading .gallery-back:hover {
    background: #d9eaf5;
    text-decoration: none;
}

/* hueco que antes ocupaba el enlace */
.ac-topbar {
    height: 118px;
    margin: 0;
}

.gallery-heading::before {
    content: "";
    display: block;
    height: 114px;
}

@media (max-width: 900px) {
    /* en tablet y móvil queda justo debajo de la barra fija de arriba */
    .ac-topbar .ac-back,
    .gallery-heading .gallery-back {
        top: 70px;
        z-index: 40;
        padding: 7px 14px;
        font-size: 13px;
    }

    .ac-topbar {
        height: 74px;
    }

    .gallery-heading::before {
        height: 78px;
    }
}


/* =========================================================
   MENÚ DESPLEGADO EN MÓVIL: TARJETA PEQUEÑA A LA DERECHA
   Se abre justo bajo el botón de las tres rayas, ajustada a su
   contenido, en vez de ocupar todo el ancho.
   ========================================================= */

@media (max-width: 600px) {
    html :is(.hero, .site-header) .menu.menu-open {
        left: auto;
        right: 0;
        width: max-content;
        min-width: 210px;
        max-width: 100%;
        margin-top: 8px;
        padding: 6px 8px 8px;
        border-radius: 16px;
        box-shadow: 0 12px 30px -8px rgba(18, 48, 74, 0.28);
    }

    html :is(.hero, .site-header) .menu.menu-open > a,
    html :is(.hero, .site-header) .menu.menu-open .dropdown-toggle {
        padding: 10px 12px;
        font-size: 15px;
    }

    html :is(.hero, .site-header) .menu.menu-open a.menu-cta {
        align-self: stretch;
        margin: 6px 0 0;
        padding: 11px 16px;
        font-size: 14px;
        text-align: center;
    }
}


/* =========================================================
   VISOR DE trabajos.html: flechas iguales a las de la portada
   (solo afecta a los botones que no llevan la clase lightbox-arrow)
   ========================================================= */

#lightbox > .lightbox-prev:not(.lightbox-arrow),
#lightbox > .lightbox-next:not(.lightbox-arrow) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#lightbox > .lightbox-prev:not(.lightbox-arrow)::before,
#lightbox > .lightbox-next:not(.lightbox-arrow)::before {
    font-size: 42px;
    line-height: 1;
}

#lightbox > .lightbox-prev:not(.lightbox-arrow)::before {
    content: "\2039";
}

#lightbox > .lightbox-next:not(.lightbox-arrow)::before {
    content: "\203A";
}

#lightbox > .lightbox-prev:not(.lightbox-arrow):hover,
#lightbox > .lightbox-next:not(.lightbox-arrow):hover {
    background-color: rgba(255, 255, 255, 0.3);
}

#lightbox > .lightbox-prev:not(.lightbox-arrow) {
    left: 25px;
}

#lightbox > .lightbox-next:not(.lightbox-arrow) {
    right: 25px;
}

@media (max-width: 600px) {
    #lightbox > .lightbox-prev:not(.lightbox-arrow),
    #lightbox > .lightbox-next:not(.lightbox-arrow) {
        width: 45px;
        height: 45px;
    }

    #lightbox > .lightbox-prev:not(.lightbox-arrow)::before,
    #lightbox > .lightbox-next:not(.lightbox-arrow)::before {
        font-size: 34px;
    }

    #lightbox > .lightbox-prev:not(.lightbox-arrow) {
        left: 10px;
    }

    #lightbox > .lightbox-next:not(.lightbox-arrow) {
        right: 10px;
    }
}


/* El visor deja pasar el deslizamiento horizontal con el dedo (lo gestiona script.js) */
.lightbox {
    touch-action: pan-y pinch-zoom;
}


/* =========================================================
   CASITA EN EL MÓVIL
   - Los "+" son más pequeños (la zona para pulsar sigue siendo grande).
   - Al pulsar uno, se queda como un aro hueco para que se vea la animación.
   - El cuadro con la explicación sale debajo de la casa (lo coloca script.js).
   ========================================================= */

@media (max-width: 600px) {

    .house-services .house-point {
        width: 22px;
        height: 22px;
        border-width: 2px;
        font-size: 16px;
    }

    /* zona de toque ampliada, invisible */
    .house-services .house-point::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
    }

    /* punto seleccionado: aro transparente, se ve la animación a través */
    .house-services .house-point:hover,
    .house-services .house-point:focus-within {
        background-color: transparent;
        color: transparent;
        border-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 0 0 1.5px rgba(32, 110, 149, 0.75);
    }

    /* el texto del cuadro vuelve a su color (no hereda el transparente) */
    .house-services .house-tooltip {
        color: #334155;
        font-size: 13px;
    }
}


/* =========================================================
   CASITA EN PANTALLAS TÁCTILES (móvil y tableta)
   El "+" tocado se marca con .is-selected (lo controla script.js): solo uno a la vez,
   y se quita al tocar otro, al tocar fuera o al volver a tocarlo. Así el primero que
   se toca ya no se queda pulsado. En ordenador no cambia nada.
   ========================================================= */

@media (hover: none) {
    .house-services .house-point:hover,
    .house-services .house-point:focus-visible {
        background-color: #206e95;
    }

    .house-services .house-point:hover .house-tooltip,
    .house-services .house-point:focus-within .house-tooltip {
        display: none;
    }

    .house-services .house-point.is-selected {
        background-color: #174f6b;
    }

    .house-services .house-point.is-selected .house-tooltip {
        display: block;
    }

    body .house-section .house-point.is-selected {
        z-index: 10;
    }
}

@media (hover: none) and (max-width: 600px) {
    /* sin el aro hueco "pegado" del hover/foco */
    .house-services .house-point:hover,
    .house-services .house-point:focus-within {
        background-color: #206e95;
        color: #ffffff;
        border-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* punto seleccionado: aro transparente, se ve la animación a través */
    .house-services .house-point.is-selected {
        background-color: transparent;
        color: transparent;
        border-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 0 0 1.5px rgba(32, 110, 149, 0.75);
    }
}

/* Portada en móvil: al tocar un "+" sale una etiqueta pequeña a su lado, con el título
   del servicio y una flechita que lleva a su página (sin la descripción corta) */
@media (max-width: 600px) {
    .hero-content .house-tooltip > span {
        display: none;
    }

    .hero-content .house-services .house-point .house-tooltip {
        top: 50%;
        bottom: auto;
        left: calc(100% + 6px);
        right: auto;
        width: max-content;
        padding: 4px 4px 4px 10px;
        align-items: center;
        gap: 7px;
        border-radius: 16px;
        line-height: 1.25;
        text-align: left;
        transform: translateY(-50%);
    }

    .hero-content .house-services .house-point[data-lado="izq"] .house-tooltip {
        left: auto;
        right: calc(100% + 6px);
    }

    /* encima o debajo del "+" (cuando al lado taparía otro punto o la propia unidad) */
    .hero-content .house-services .house-point[data-lado^="encima"] .house-tooltip,
    .hero-content .house-services .house-point[data-lado^="debajo"] .house-tooltip {
        transform: none;
    }

    .hero-content .house-services .house-point[data-lado^="encima"] .house-tooltip {
        top: auto;
        bottom: calc(100% + 6px);
    }

    .hero-content .house-services .house-point[data-lado^="debajo"] .house-tooltip {
        top: calc(100% + 6px);
        bottom: auto;
    }

    .hero-content .house-services .house-point[data-lado$="-izq"] .house-tooltip {
        left: auto;
        right: -10px;
    }

    .hero-content .house-services .house-point[data-lado$="-der"] .house-tooltip {
        left: -10px;
        right: auto;
    }

    .hero-content .house-point.is-selected .house-tooltip {
        display: flex;
    }

    .hero-content .house-tooltip strong {
        display: block;
        margin: 0;
        flex: 0 1 auto;
        font-size: 12px;
        font-weight: 700;
        color: #206e95;
        text-wrap: balance;
    }

    /* la flechita: círculo azul; todo el cuadro es pulsable */
    .hero-content .house-tooltip-link {
        display: inline-flex !important;
        flex: none;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 21px;
        height: 21px;
        margin: 0;
        border-radius: 50%;
        background-color: #206e95;
        color: #ffffff;
        font-size: 0;
        text-decoration: none;
    }

    .hero-content .house-tooltip-link span {
        font-size: 12px;
        line-height: 1;
    }

    .hero-content .house-tooltip-link::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 16px;
    }
}