/* =========================================================
   MERTHERAPY - AJUSTE GALERÍA ESPACIO
   ========================================================= */

.mer-space-photo {
    position: relative;

    overflow: hidden;

    background-size: cover !important;
    background-repeat: no-repeat !important;

    background-color: #e9ded4;
}


/* SALA DE ESPERA - FOTO GRANDE */

.mer-space-photo-main {
    background-position: center center !important;
}


/* CONSULTORIO - MOSTRAR MÁS LA PARTE SUPERIOR */

.mer-space-photo-office {
    background-position: center 28% !important;
}


/* SALA DE TRATAMIENTO - BAJAR EL ENCUADRE */

.mer-space-photo-treatment {
    background-position: center 72% !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

    .mer-space-photo-main {
        background-position: center center !important;
    }

    .mer-space-photo-office {
        background-position: center 30% !important;
    }

    .mer-space-photo-treatment {
        background-position: center 68% !important;
    }

}

/* =========================================================
   MERTHERAPY - DIRECCIÓN MÉDICA
   AJUSTE FINAL
   ========================================================= */

/* Fondo cálido de la web y separación integrada,
   sin mostrar una franja blanca */
.mer-medical-director {
    width: 100%;

    margin-top: 0 !important;
    padding-top: 34px;

    background: #fcfaf7 !important;
}


/* =========================================================
   GRID PRINCIPAL
   ========================================================= */

.mer-medical-director-inner {
    width: 100%;
    min-height: 585px;

    display: grid;
    grid-template-columns: 42% 58%;

    background: #fcfaf7 !important;
}


/* =========================================================
   CONTENIDO IZQUIERDO
   ========================================================= */

.mer-medical-director-content {
    min-width: 0;

    padding:
        70px
        58px
        70px
        max(65px, calc((100vw - 1680px) / 2));

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

    background: #fcfaf7 !important;
}


/* =========================================================
   FOTO DIRECCIÓN MÉDICA
   ========================================================= */

.mer-medical-director-image {
    position: relative;

    width: 100%;
    min-height: 585px;

    overflow: hidden;

    background-size: cover !important;
    background-position: center 38% !important;
    background-repeat: no-repeat !important;

    background-color: #f7f2ec;
}


/* Degradado suave tipo hero para integrar texto y fotografía */

.mer-medical-director-image::before {
    content: "";

    position: absolute;
    z-index: 1;

    top: 0;
    bottom: 0;
    left: 0;

    width: 130px;

    background:
        linear-gradient(
            90deg,
            rgba(252,250,247,.92) 0%,
            rgba(252,250,247,.58) 28%,
            rgba(252,250,247,0) 100%
        );

    pointer-events: none;
}


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

@media (max-width: 1050px) {

    .mer-medical-director {
        margin-top: 0 !important;
        padding-top: 26px;

        background: #fcfaf7 !important;
    }

    .mer-medical-director-inner {
        min-height: 540px;

        grid-template-columns: 44% 56%;

        background: #fcfaf7 !important;
    }

    .mer-medical-director-content {
        padding: 55px 40px;

        background: #fcfaf7 !important;
    }

    .mer-medical-director-image {
        min-height: 540px;

        background-position: center 35% !important;
    }

    .mer-medical-director-image::before {
        width: 95px;
    }

}


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

@media (max-width: 767px) {

    .mer-medical-director {
        margin-top: 0 !important;
        padding-top: 18px;

        background: #fcfaf7 !important;
    }

    .mer-medical-director-inner {
        display: flex;
        flex-direction: column;

        min-height: auto;

        background: #fcfaf7 !important;
    }


    /* FOTO PRIMERO */

    .mer-medical-director-image {
        order: 1;

        width: 100%;

        min-height: 0;
        height: 390px;

        background-size: cover !important;
        background-position: center 30% !important;
    }

    .mer-medical-director-image::before {
        display: none;
    }


    /* TEXTO DESPUÉS */

    .mer-medical-director-content {
        order: 2;

        padding:
            48px
            24px
            55px;

        background: #fcfaf7 !important;
    }

}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

    .mer-medical-director {
        padding-top: 14px;
    }

    .mer-medical-director-image {
        height: 335px;

        background-position: center 28% !important;
    }

    .mer-medical-director-content {
        padding-left: 20px;
        padding-right: 20px;
    }

}

/* =========================================================
   MERTHERAPY - AJUSTE GALERÍA NOSOTROS
   ========================================================= */

/* La proporción anterior hacía las dos imágenes derechas
   demasiado panorámicas. Damos más ancho a la foto principal
   y más altura a las dos imágenes de detalle. */

.mer-about-gallery {
    display: grid;

    grid-template-columns: 1.8fr 1fr;
    grid-template-rows: 310px 310px;

    gap: 9px;
}


/* Todas las fotos */

.mer-about-gallery-main,
.mer-about-gallery-small {
    position: relative;

    overflow: hidden;

    background-size: cover !important;
    background-repeat: no-repeat !important;

    border-radius: 3px;

    background-color: #e9ded4;
}


/* Sala de espera:
   bajamos un poco el encuadre para mostrar más mobiliario */

.mer-about-gallery-main {
    grid-row: 1 / span 2;

    background-position: center 58% !important;
}


/* Consultorio:
   mostramos más la parte media/baja y menos techo */

.mer-about-gallery-office {
    background-position: center 62% !important;
}


/* Sala de tratamiento:
   bajamos bastante el foco para reducir cielo/ventana */

.mer-about-gallery-treatment {
    background-position: center 82% !important;
}


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

@media (max-width: 1050px) {

    .mer-about-gallery {
        grid-template-columns: 1.65fr 1fr;
        grid-template-rows: 280px 280px;
    }

    .mer-about-gallery-main {
        background-position: center 58% !important;
    }

    .mer-about-gallery-office {
        background-position: center 62% !important;
    }

    .mer-about-gallery-treatment {
        background-position: center 80% !important;
    }

}


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

@media (max-width: 767px) {

    .mer-about-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: none;

        gap: 8px;
    }

    .mer-about-gallery-main {
        grid-row: auto;

        height: 320px;

        background-position: center 58% !important;
    }

    .mer-about-gallery-small {
        height: 245px;
    }

    .mer-about-gallery-office {
        background-position: center 60% !important;
    }

    .mer-about-gallery-treatment {
        background-position: center 78% !important;
    }

}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

    .mer-about-gallery-main {
        height: 285px;
    }

    .mer-about-gallery-small {
        height: 220px;
    }

}

/* =========================================================
   MERTHERAPY - UBICACIÓN CONTACTO
   ========================================================= */

.mer-contact-location {
    width: 100%;

    padding: 95px 0;

    background: #fcfaf7;
}

.mer-contact-location-inner {
    width: calc(100% - 90px);
    max-width: 1680px;

    margin: 0 auto;
}


/* CABECERA */

.mer-contact-location-heading {
    margin-bottom: 45px;

    display: grid;
    grid-template-columns: 1fr .65fr;

    align-items: end;

    gap: 80px;
}

.mer-contact-location-heading h2 {
    max-width: 680px;

    margin: 0;

    color: #202936;

    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(48px, 4vw, 68px);
    font-weight: 500 !important;

    line-height: 1.02;
    letter-spacing: -0.02em !important;
}

.mer-contact-location-heading > p {
    max-width: 520px;

    margin: 0 0 7px;

    color: #5d6872;

    font-size: 17px;
    line-height: 1.65;
}


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

.mer-contact-location-visual {
    position: relative;

    width: 100%;
    min-height: 550px;

    overflow: hidden;

    background: #e9ded4;
}

.mer-contact-location-visual > img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

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

    transition: transform .7s ease;
}

.mer-contact-location-visual:hover > img {
    transform: scale(1.015);
}


/* =========================================================
   TARJETA SOBRE MAPA
   ========================================================= */

.mer-contact-location-card {
    position: absolute;

    z-index: 2;

    left: 45px;
    bottom: 45px;

    width: min(390px, calc(100% - 90px));

    padding: 35px 36px;

    background: rgba(252,250,247,.96);

    box-shadow:
        0 18px 55px rgba(47,42,40,.13);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.mer-contact-location-small {
    display: block;

    margin-bottom: 14px;

    color: #18c5d1;

    font-family: 'Manrope', Arial, sans-serif !important;
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
}

.mer-contact-location-card h3 {
    margin: 0 0 15px;

    color: #202936;

    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 35px;
    font-weight: 500 !important;

    line-height: 1.05;
}

.mer-contact-location-card p {
    margin: 0 0 25px;

    color: #66717b;

    font-size: 14px;
    line-height: 1.6;
}


/* BOTÓN */

.mer-contact-location-btn {
    min-height: 55px;

    padding: 0 23px;

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

    gap: 15px;

    background: #18c5d1;
    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition:
        background .25s ease,
        transform .25s ease;
}

.mer-contact-location-btn span:last-child {
    font-size: 18px;

    transition: transform .25s ease;
}

.mer-contact-location-btn:hover {
    background: #12b5c0;
    color: #ffffff;

    transform: translateY(-2px);
}

.mer-contact-location-btn:hover span:last-child {
    transform: translate(3px,-3px);
}


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

@media (max-width: 1050px) {

    .mer-contact-location {
        padding: 75px 0;
    }

    .mer-contact-location-inner {
        width: calc(100% - 60px);
    }

    .mer-contact-location-heading {
        gap: 45px;
    }

    .mer-contact-location-visual {
        min-height: 480px;
    }

}


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

@media (max-width: 767px) {

    .mer-contact-location {
        padding: 60px 0;
    }

    .mer-contact-location-inner {
        width: calc(100% - 36px);
    }

    .mer-contact-location-heading {
        display: block;

        margin-bottom: 32px;
    }

    .mer-contact-location-heading h2 {
        margin-bottom: 20px;

        font-size: 42px;
    }

    .mer-contact-location-heading h2 br {
        display: none;
    }

    .mer-contact-location-heading > p {
        max-width: none;

        font-size: 16px;
    }

    .mer-contact-location-visual {
        min-height: auto;

        overflow: visible;

        background: transparent;
    }

    .mer-contact-location-visual > img {
        position: relative;

        width: 100%;
        height: 330px;

        object-fit: cover;
    }

    .mer-contact-location-card {
        position: relative;

        left: auto;
        bottom: auto;

        width: 100%;

        padding: 30px 25px;

        box-shadow: none;

        background: #f7f2ec;
    }

    .mer-contact-location-card h3 {
        font-size: 32px;
    }

    .mer-contact-location-btn {
        width: 100%;
    }

}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

    .mer-contact-location-inner {
        width: calc(100% - 30px);
    }

    .mer-contact-location-heading h2 {
        font-size: 37px;
    }

    .mer-contact-location-visual > img {
        height: 285px;
    }

}

/* =========================================================
   MERTHERAPY - UBICACIÓN
   AJUSTE VISUAL CON PANEL CHOCOLATE
   ========================================================= */

.mer-contact-location {
    background: #f7f2ec !important;
}


/* CONTENEDOR DE LA FOTO */

.mer-contact-location-visual {
    position: relative;

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

    overflow: hidden;

    background: #403630 !important;
}


/* FOTO:
   dejamos visible el panel marrón del lado izquierdo */

.mer-contact-location-visual > img {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: auto;

    width: 78%;
    height: 100%;

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

    transition: transform .7s ease;
}


/* TARJETA */

.mer-contact-location-card {
    left: 48px;
    bottom: 48px;

    width: 390px;

    background: #fcfaf7;

    box-shadow:
        0 22px 55px rgba(25,20,18,.18);
}


/* pequeño detalle decorativo encima de la tarjeta */

.mer-contact-location-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 52px;
    height: 3px;

    background: #18c5d1;
}


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

@media (max-width: 1050px) {

    .mer-contact-location-visual {
        min-height: 500px;
    }

    .mer-contact-location-visual > img {
        width: 80%;
    }

    .mer-contact-location-card {
        left: 35px;
        bottom: 35px;

        width: 350px;
    }

}


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

@media (max-width: 767px) {

    .mer-contact-location {
        background: #f7f2ec !important;
    }

    .mer-contact-location-visual {
        min-height: auto;

        background: #403630 !important;

        padding: 0;
    }

    .mer-contact-location-visual > img {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        height: 330px;

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

    .mer-contact-location-card {
        position: relative;

        left: auto;
        bottom: auto;

        width: calc(100% - 34px);

        margin: -38px auto 0;

        padding: 30px 25px;

        background: #fcfaf7;

        box-shadow:
            0 16px 38px rgba(25,20,18,.16);

        z-index: 3;
    }

}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

    .mer-contact-location-visual > img {
        height: 285px;
    }

    .mer-contact-location-card {
        width: calc(100% - 24px);

        margin-top: -30px;
    }

}

/* MERTHERAPY - ELIMINAR FRANJA INFERIOR */
.site-footer > p.wp-block-paragraph:empty {
    display: none !important;
}