/* -------------------------------------------------------------------------
   Tercera ronda de cambios de la clienta (oct 2026)

   Se carga la última, después de cambios-sep26.css. Como en la ronda anterior,
   todo lo de esta ronda va aquí para verlo de un vistazo y poder deshacerlo.

   Qué cambió fuera de este archivo:
   · mycss.css: el velo oscuro de móvil «.swiper-wrapper:before» se acotó a la
     portada (.mySwiper). Caía también sobre la galería de proyecto y se comía
     el toque: en el móvil no se abrían las fotos.
   · tablet.css, cambios-sep26.css, proyectos-nav.css, proyectos-galeria.css:
     los cortes de tablet suben de 1024 a 1100 (vertical) y de 1366 a 1400
     (horizontal). El iPad Pro 13 de la clienta mide 1032 × 1376 y se quedaba
     fuera por ocho píxeles: veía la versión de escritorio.
   ------------------------------------------------------------------------- */

/* ------------------ 1. Portada: la foto entera en vertical ------------------ */

/* La clienta ve las fotos grandes de arriba recortadas en tablet y móvil, y
   pide verlas completas «como en el PC». En vertical el hero deja de medir la
   pantalla entera y mide lo que mide la foto (Swiper con autoHeight, en
   main.js). Ninguna foto se recorta; el escritorio y la tablet apaisada no
   cambian. */
/* La foto entera es el enlace al proyecto (antes lo era la etiqueta con el
   nombre, que la clienta ha quitado). home-slider.css lo tenía como flex para
   alinear la etiqueta; como contenedor de la foto tiene que ser bloque, si no
   la foto no llena el ancho (en escritorio se veía una franja gris). */
.mySwiper .hero-slide {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.mySwiper .hero-slide .styled-image {
    width: 100%;
    height: 100%;
}

@media (orientation: portrait) {
    .slider_home figure {
        height: auto;
        background-color: #fff;
    }

    /* .parallax-wrap lleva la clase .overlay (posición absoluta ocupando el
       100 %). Con el alto de la figura en auto, un hijo absoluto no mide nada y
       el hero se quedaba en 0 px. En vertical pasa a estar en el flujo. */
    .slider_home figure .parallax-wrap {
        position: relative;
        height: auto;
    }

    .swiper.mySwiper,
    .mySwiper .swiper-slide,
    .mySwiper .hero-slide,
    .swiper.mySwiper .styled-image,
    .mySwiper .hero-slide .styled-image {
        height: auto;
    }

    .mySwiper .swiper-slide img,
    .mySwiper .hero-slide_img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }

    /* 13 oct: la clienta veía saltar el texto de debajo en cada cambio de
       foto (el alto seguía a cada imagen). Caja fija 16:9, el formato de las
       fotos de Inicio: todas miden lo mismo y se ven enteras; una foto de otro
       formato se recorta un poco en vez de mover la página. */
    .mySwiper .hero-slide .styled-image {
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .mySwiper .hero-slide .styled-image img,
    .mySwiper .hero-slide_img {
        height: 100%;
        object-fit: cover;
    }
}

/* En móvil (y hasta 999 px) la cabecera es una barra blanca fija de 63 px.
   Con el hero a pantalla completa no importaba que tapase el borde de arriba
   de la foto; ahora que la foto se ve entera, sí: se le deja ese hueco. */
@media (max-width: 999px) and (orientation: portrait) {
    .home .slider_home figure {
        padding-top: 63px;
    }
}

/* --------------------------- 2. Inicio en móvil --------------------------- */

@media (max-width: 768px) {

    /* Sin el logo sobre las fotos destacadas: se queda solo el de la barra
       blanca de arriba a la izquierda. */
    .home .logo_hero {
        display: none;
    }

    /* Texto de presentación justificado (mycss lo fuerza a la izquierda con
       !important en este mismo rango; este archivo carga después). */
    .home .section-home-intro h2.split-words {
        text-align: justify !important;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

/* ------------------ 3. Carrusel de proyectos destacados ------------------ */

/* Antes: tres tarjetas en rejilla de tres columnas. Ahora: seis en carrusel,
   tres a la vista en escritorio (mismo tamaño que antes), dos en tablet
   vertical y una y pico en móvil. La tarjeta (.comun) conserva su CSS. */
.c-destacados {
    position: relative;
    overflow: hidden;
}

.c-destacados .swiper-slide {
    height: auto;
}

.c-destacados .comun a {
    display: block;
}

.c-destacados_flecha {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #111;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .3s ease, opacity .3s ease;
}

.c-destacados_flecha:hover {
    background: rgba(255, 255, 255, .95);
}

.c-destacados_flecha:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
}

.c-destacados_flecha svg {
    width: 17px;
    height: 17px;
}

.c-destacados_flecha--prev {
    left: 18px;
}

.c-destacados_flecha--prev svg {
    transform: rotate(180deg);
}

.c-destacados_flecha--next {
    right: 18px;
}

.c-destacados_flecha.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* En móvil se pasa con el dedo; las flechas estorban sobre la foto. */
@media (max-width: 768px) {
    .c-destacados_flecha {
        display: none;
    }
}

/* Video de la tarjeta: se enseña mientras el raton esta encima (main.js pone
   .is-video-activo y lo reproduce). Solo en pantallas con raton. */
@media (hover: hover) {
    .c-destacados .comun.is-video-activo .project-thumb-video {
        opacity: 1;
    }
}

/* ---- 4. Nombre del proyecto visible mientras la tarjeta está en pantalla ---- */

/* En pantallas táctiles no hay «pasar el ratón». main.js pone .is-en-pantalla
   a la tarjeta cuando entra en pantalla y se la quita cuando sale
   (initTitulosEnPantalla); aquí se enseña el nombre igual que al pasar el
   ratón en escritorio. Vale para el carrusel de Inicio y para el listado. */
@media (pointer: coarse) {
    .c-proyectos-inner .comun.is-en-pantalla h2.c-proyectos_title {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%);
        transition: all .8s cubic-bezier(.16, 1, .3, 1);
    }

    .c-proyectos-inner .comun.is-en-pantalla .project-thumb-image:before {
        opacity: 1;
        visibility: visible;
        transition: all .8s cubic-bezier(.16, 1, .3, 1);
    }
}

/* --------------------------- 5. Fotos de Estudio --------------------------- */

/* Se abren a pantalla completa al pulsar (proyectos-galeria.js, montarEstudio). */
.masonery-list li.estudio-foto--ampliable {
    cursor: pointer;
}

.masonery-list li.estudio-foto--ampliable:focus-visible {
    outline: 2px solid #111;
    outline-offset: -2px;
}

/* ------------------ 6. Revelado de imágenes al entrar en pantalla ------------------ */

/* El efecto de las fotos de Estudio (cortina de arriba abajo + la foto pasa de
   1,2 a su tamaño), llevado al listado y al carrusel de Inicio (en la ficha
   se probó y se quitó). Lo dispara assets/js/revela.js con IntersectionObserver.
   · El estado tapado solo existe con html.revela-on, que el JS pone solo si la
     animación se va a poder ver: sin esa clase, todo se ve normal.
   · La cortina va en los HIJOS de .revela, no en .revela: Chrome tiene en
     cuenta el clip-path del propio elemento vigilado y, tapado del todo, el
     observador lo daba por invisible y no lo descubría nunca. */
html.revela-on .revela > * {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
}

html.revela-on .revela:not(.revela--sin-zoom) img {
    transform: scale3d(1.2, 1.2, 1);
}

html.revela-on .revela.is-revelada > * {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
    transition: clip-path 1s cubic-bezier(0.645, 0.045, 0.355, 1) var(--revela-retardo, 0s),
        -webkit-clip-path 1s cubic-bezier(0.645, 0.045, 0.355, 1) var(--revela-retardo, 0s);
}

html.revela-on .revela.is-revelada:not(.revela--sin-zoom) img {
    transform: none;
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1) var(--revela-retardo, 0s);
}

/* Estudio: la foto va dentro de un marco que recorta el zoom. */
.revela-marco {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    html.revela-on .revela > *,
    html.revela-on .revela img {
        -webkit-clip-path: none !important;
                clip-path: none !important;
        transform: none !important;
    }
}

/* ------------------ 7. Ficha: la columna de texto a todo el ancho ------------------ */

/* La barra de la ficha (.sidebar-inner) es una rejilla de una columna que
   heredó justify-content: space-between de cuando era flex. Sin columna
   declarada, la columna medía lo que su texto: con una descripción corta
   («Proyecto de arquitectura.», Villa Emmy) la línea bajo el lugar y las
   flechas se quedaban más estrechas que en las demás fichas. */
.sidebar_proyectos .sidebar-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
}

/* ------------------ 8. Selector de idioma: EN y ES del mismo ancho ------------------ */

/* WPML pinta el nombre completo del idioma («Inglés», «Español») en gris casi
   blanco y a 10 px, y encima se superpone «EN»/«ES» con un ::before absoluto.
   Cada botón medía lo que su palabra oculta (31 y 43 px), así que EN y ES
   quedaban descentrados y en algunos fondos asomaba el «Español» fantasma.
   Aquí el nombre largo se oculta del todo (sigue en el HTML para lectores de
   pantalla y buscadores), EN/ES pasan a ser el texto real del botón y los dos
   botones miden lo mismo. */
.idioma_menu_fijo ul,
#menu_lateral_fijo .idioma_menu_fijo ul {
    justify-content: center;
    gap: 4px;
}

.idioma_menu_fijo li.wpml-ls-item {
    flex: 0 0 36px;
    width: 36px;
    margin: 0;
    text-align: center;
}

.idioma_menu_fijo li.wpml-ls-item a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 32px; /* zona de toque cómoda también en el menú desplegable */
}

/* Con #menu_lateral_fijo delante porque mycss.css fija ahí «Español» a 10 px
   con un id: invisible, pero ocupaba 64 px y empujaba al EN (solo en el menú
   de Proyectos, que es el que lleva ese id). */
.idioma_menu_fijo span.wpml-ls-display,
.idioma_menu_fijo span.wpml-ls-native,
#menu_lateral_fijo .idioma_menu_fijo span.wpml-ls-display,
#menu_lateral_fijo .idioma_menu_fijo span.wpml-ls-native {
    position: static;
    font-size: 0;
    color: transparent;
}

.idioma_menu_fijo .wpml-ls-item-en span::before,
.idioma_menu_fijo .wpml-ls-item-es span::before {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    font-size: 16px;
    line-height: 1;
}

/* ------------------ 9. Estudio en PC y tablet (13 oct) ------------------ */

/* Petición de la clienta: la foto del sofá con el logo a la izquierda, el
   texto en una columna a la derecha y las otras dos fotos debajo, enteras y a
   la misma altura. El texto se pinta dos veces en la plantilla: en su sección
   de siempre (solo móvil, que se queda como estaba) y como un elemento más de
   la galería (PC y tablet). Cada foto lleva su proporción en --ar: en la fila
   de abajo crecen en proporción a ella y así miden lo mismo de alto. */
.masonery-list--estudio .estudio-texto {
    display: none;
}

@media (min-width: 769px) {
    .estudio-intro--movil {
        display: none;
    }

    .page-template .section-nosotros-galeria {
        padding-top: 8rem;
    }

    .masonery-list.masonery-list--estudio {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .masonery-list--estudio li,
    .masonery-list--estudio li:nth-child(n) {
        flex: var(--ar, 1.5) 1 0%;
        min-width: 0;
        grid-row: auto;
        grid-column: auto;
    }

    .masonery-list--estudio li:first-child,
    .masonery-list--estudio li.estudio-texto {
        flex: 0 0 calc(50% - 5px);
    }

    /* La foto del sofá mide lo mismo de alto que el texto (petición de la
       clienta, 13 oct): si el texto es más alto, la foto se recorta por los
       lados; si es más bajo, la fila mide lo que la foto entera (aspect-ratio
       con su proporción). */
    .masonery-list--estudio li:first-child {
        position: relative;
        align-self: stretch;
        aspect-ratio: var(--ar, 1.78);
    }

    .masonery-list--estudio li:first-child .revela-marco {
        position: absolute;
        inset: 0;
        height: 100%;
    }

    .masonery-list--estudio li:first-child img {
        height: 100%;
        object-fit: cover;
    }

    .masonery-list--estudio li .revela-marco {
        display: block;
        width: 100%;
    }

    .masonery-list--estudio li img {
        width: 100%;
        height: auto;
        object-fit: initial;
    }

    .masonery-list--estudio .estudio-texto {
        display: flex;
        align-items: center;
        padding: 2rem 4rem;
        cursor: auto;
    }

    .masonery-list--estudio .estudio-texto p:last-child {
        margin-bottom: 0;
    }
}

/* ------------- 10. Inicio: los tres huecos de abajo iguales (13 oct) ------------- */

/* La clienta marcó tres huecos que no medían lo mismo: texto → carrusel,
   carrusel → cita y cita → email. Los tres pasan a medir lo que medía el más
   amplio: el relleno de sección (min(8vw, 8em)), nunca menos de 100 px. */
.home {
    --hueco-inicio: max(100px, var(--section-padding, min(8vw, 8em)));
}

/* .section, porque la portada (las fotos grandes) también se llama
   .section-home-intro y no debe llevar este hueco. */
.home .section-home-intro.section {
    padding-bottom: var(--hueco-inicio);
}

.home footer#colophon {
    padding-top: var(--hueco-inicio);
}

.home .footer-info-left {
    padding-bottom: var(--hueco-inicio);
    margin-bottom: 0; /* en el móvil llevaba 56 px más */
}

/* El carrusel llevaba 40 px de margen debajo en el móvil que se sumaban al
   hueco hasta la cita. */
.home .c-destacados {
    margin-bottom: 0;
}

/* ---------- 11. Proyectos en la tablet en vertical (13 oct) ---------- */

/* Lo que veía la clienta en su iPad:
   · En el listado, el menú lateral se quedaba abierto como una barra fija de
     340 px que tapaba un tercio de las fotos.
   · En la ficha, la franja blanca del botón del menú (48 px a la derecha)
     tapaba el borde de la foto y, con él, la flecha de «siguiente».
   · Miniaturas en vez de puntitos (tablet.css las forzaba, se cargaba antes).
   · El selector de idioma justo encima de la foto.
   Ojo: según el navegador, el iPad pide la web como ordenador (Safari: menú
   lateral, sin botón) o como móvil (Chrome: menú de móvil con la franja). Las
   reglas cubren los dos casos. */
.c-header--tablet,
.archivo-logo-tablet {
    display: none;
}

@media (min-width: 769px) and (max-width: 1100px) and (orientation: portrait) {

    /* Menú plegado en el listado y la ficha: se abre con el botón. */
    .archive .c-nav:not(.-open) .burguer_nav,
    .single-proyectos .c-nav:not(.-open) .burguer_nav {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    /* El botón, arriba a la derecha y sin franja blanca. */
    .archive .c-header,
    .single-proyectos .c-header {
        display: flex;
        top: 1.5rem;
        right: 4vw;
        bottom: auto;
        width: auto;
        height: auto;
        padding: 0;
        background: transparent;
        box-shadow: none;
        pointer-events: none;
    }

    .archive .c-header > *,
    .single-proyectos .c-header > * {
        display: none;
    }

    .archive .c-header .c-header_button,
    .single-proyectos .c-header .c-header_button {
        display: flex;
        background: #fff;
        pointer-events: auto;
    }

    body.admin-bar.archive .c-header,
    body.admin-bar.single-proyectos .c-header {
        top: calc(1.5rem + 32px);
    }

    /* Logo del listado (el del menú lateral ya no se ve). */
    .archivo-logo-tablet {
        display: block;
        width: 84px;
        margin: 44px auto 0;
    }

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

    .archive header.page-header {
        padding-top: 3rem;
    }

    /* Los tipos de proyecto, bajo el título (como en el móvil): el menú
       lateral que los llevaba va plegado. */
    .archive .page-header .filtros {
        display: flex;
        flex-wrap: wrap;
        gap: 0 1.5rem;
    }

    /* Galería: puntitos, como en el móvil. */
    .p-galeria_thumbs {
        display: none;
    }

    .p-galeria .p-galeria_puntos {
        display: flex;
    }
}

/* El selector de idioma sale del encabezado de la ficha (encima de la foto) en
   el móvil y la tablet en vertical: sigue en el menú desplegable. */
@media (max-width: 768px), (max-width: 1100px) and (orientation: portrait) {
    .sidebar_proyectos .idioma_menu_fijo {
        display: none;
    }
}

/* Flechas de la galería: una sombra suave para que se vean también cuando la
   foto no llena el hueco y la flecha cae sobre el fondo blanco. */
.p-galeria .p-galeria_flecha {
    box-shadow: 0 1px 8px rgba(0, 0, 0, .18);
}

@media (min-width: 769px) and (max-width: 1100px) {
    .masonery-list--estudio .estudio-texto {
        padding: 1rem 0 1rem 2.5rem;
    }
}

/* ---------------- 12. Últimos detalles de la clienta (13 oct, tarde) ---------------- */

/* Texto de Estudio justificado también en el móvil (el tema lo dejaba a la
   izquierda con .is-mobile). Con guiones para que no se abran huecos. */
#nosotros .t-justify p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Botón del menú: en el ordenador se redondea al pasar el ratón. En una
   pantalla táctil el «hover» se queda pegado tras tocarlo y el cuadrado no
   volvía a serlo. Sin ratón, siempre cuadrado. */
@media (hover: none) {
    .c-header_button:hover {
        border-radius: 0;
    }
}

/* Ficha y listado en la tablet en vertical: el logo a la izquierda, a la
   altura del de la barra que sale al ampliar una foto, y el botón del menú
   alineado con él. */
@media (min-width: 769px) and (max-width: 1100px) and (orientation: portrait) {
    sidebar.sidebar_proyectos .burguer_top_logo a {
        display: block;
        width: fit-content;
    }

    sidebar.sidebar_proyectos .burguer_top_logo a img {
        display: block;
        width: 56px;
        margin: 0;
    }

    .archivo-logo-tablet {
        width: 56px;
        margin: 2rem 0 0;
    }

    .archive .c-header,
    .single-proyectos .c-header {
        top: calc(2rem + 16px);
    }

    body.admin-bar.archive .c-header,
    body.admin-bar.single-proyectos .c-header {
        top: calc(2rem + 16px + 32px);
    }
}

/* ------- 13. Proyectos en el iPad: el botón del menú donde en el resto (14 oct) ------- */

/* La clienta quiere el botón plegado en el mismo sitio que en Inicio, Estudio
   y Contacto: una franja de 3rem a la derecha, con el botón centrado en
   vertical, y el contenido ajustado al espacio que queda a la izquierda. Al
   desplegarlo, el menú sí se pone encima, como ya hacía. Desde 1000 px, que es
   donde el resto de secciones usan esa franja (el iPad Pro de la clienta mide
   1032); por debajo se queda el botón arriba a la derecha. */
@media (min-width: 1000px) and (max-width: 1100px) and (orientation: portrait) {
    .archive .c-header,
    .single-proyectos .c-header,
    body.admin-bar.archive .c-header,
    body.admin-bar.single-proyectos .c-header {
        top: 0;
        right: 0;
        bottom: 0;
        width: 3rem;
        height: 100vh;
        justify-content: center;
        align-items: center;
        padding: 40px 0 0; /* a la misma altura que en Inicio y Estudio */
        background: transparent;
    }

    .archive .c-header .c-header_button,
    .single-proyectos .c-header .c-header_button {
        background: transparent;
    }

    .archive div.main-wrap-single,
    .single-proyectos section.main-wrap-single,
    .single-proyectos sidebar.sidebar_proyectos {
        width: calc(100% - 3rem);
    }
}