/* -------------------------------------------------------------------------
   Segunda ronda de cambios de la clienta (sep 2026)

   Se carga la última, después de tablet.css, y aquí van todos los ajustes de
   esta ronda en vez de repartirlos por mycss.css: así se ve de un vistazo qué
   cambió y se puede deshacer entero.
   ------------------------------------------------------------------------- */

/* ------------------------- 1. Texto de Inicio ------------------------- */

/* Antes: clamp(18px, 2.14vw, 26px), peso 300. La clienta lo quiere del tamaño
   del texto de proyectos/estudio (16px). Un punto más, porque es el primer
   párrafo de la web y con peso 300 a 16px se queda pálido. */
.home h2.split-words {
    font-size: clamp(17px, 1.25vw, 18px);
    line-height: 1.65;
    font-weight: 400;
}

/* --------------------- 2. Citas del pie de Inicio --------------------- */

/* Todas las citas van apiladas en la misma celda: la caja mide lo que la
   más larga y la página no salta al cambiar. El fundido es CSS puro sobre
   una clase; sin JS se ve la primera. */
.pie-citas {
    display: grid;
    max-width: 46rem;
    margin: 0 auto;
}

.pie-cita {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    pointer-events: none;
}

.pie-cita.is-activa {
    opacity: 1;
    pointer-events: auto;
}

.pie-cita blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.55;
    text-align: center;
    color: #111;
}

.pie-cita blockquote::before {
    content: "\201C";
}

.pie-cita blockquote::after {
    content: "\201D";
}

.pie-cita figcaption {
    margin-top: 0.75em;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #666;
}

/* El h3 en mayúsculas que había antes llevaba este margen; la cita, algo
   menos, que ya no es un titular. */
.footer-info-left {
    padding-bottom: 2.5rem;
}

/* ------------------- 3. Iconos de redes (pie y Contacto) ------------------- */

.soma-redes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.soma-redes li {
    margin: 0;
}

.soma-redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #111;
    transition: opacity .3s ease;
}

.soma-redes a:hover {
    opacity: .5;
}

.soma-redes svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.footer-info-redes {
    margin-top: 1.25rem;
}

/* Contacto: email, teléfono y redes en la cabecera, encima del mapa. El
   bloque es .styled-content, que pinta las listas con guion y en columna:
   hay que pisar esas reglas con la misma especificidad o más. */
.section-contacto-intro .soma-redes,
.styled-content ul.soma-redes {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.styled-content ul.soma-redes li {
    margin: 0;
    padding: 0;
}

.styled-content ul.soma-redes li::before {
    content: none;
}

/* Pie sin bloque de contacto (todas las páginas menos Inicio): el borde
   superior de la fila legal quedaba pegado al contenido. */
.footer--solo-legal .pie-inner {
    margin-top: 0;
}

/* ---------------- 4. Barra lateral: menú visible sin scroll ---------------- */

/* Los elementos del menú lateral (Inicio, Proyectos, filtros, Estudio,
   Contacto) llevan .u-anim: arrancan en opacidad 0 y solo aparecen cuando el
   motor de scroll les pone .is-inview al contenedor. En la tablet de la
   clienta eso no llegaba a pasar y la barra se quedaba en blanco con el logo
   solo. Aquí el menú aparece por sí mismo con una animación CSS, que no
   depende de nadie; el escalonado se mantiene. */
/* La causa real del banner en blanco en la tablet: main.js pone .is-mobile
   en el <html> en cualquier pantalla tactil (iPad incluido, aunque cargue la
   plantilla de escritorio) y mycss.css tiene «.is-mobile .c-nav .c-ul_list li
   { opacity: 0 }», pensado para el menu desplegable del movil, que solo
   enciende los elementos al abrirse (.c-nav.-open). La barra lateral fija
   nunca se «abre», asi que en la tablet se quedaba con el logo solo. */
#menu_lateral_fijo .c-nav .c-ul_list li,
.is-mobile #menu_lateral_fijo .c-nav .c-ul_list li {
    opacity: 1;
    transform: none;
}

#menu_lateral_fijo .u-anim {
    opacity: 1;
    transform: none;
    animation: soma-entrar .9s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

#menu_lateral_fijo .u-anim.-delay-1 {
    animation-delay: .10s;
}

#menu_lateral_fijo .u-anim.-delay-2 {
    animation-delay: .18s;
}

#menu_lateral_fijo .u-anim.-delay-3 {
    animation-delay: .26s;
}

#menu_lateral_fijo .u-anim.-delay-4 {
    animation-delay: .34s;
}

#menu_lateral_fijo .u-anim.-delay-5 {
    animation-delay: .42s;
}

#menu_lateral_fijo .u-anim.-delay-6 {
    animation-delay: .50s;
}

#menu_lateral_fijo .u-anim.-delay-7 {
    animation-delay: .58s;
}

#menu_lateral_fijo .u-anim.-delay-8 {
    animation-delay: .66s;
}

@keyframes soma-entrar {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #menu_lateral_fijo .u-anim {
        animation: none;
    }
}

/* Sin iconos de redes en la barra lateral, el selector de idioma se queda
   solo en la fila: a la derecha, como estaba. */
#menu_lateral_fijo .social_header,
div.social_header {
    justify-content: flex-end;
}

/* --------- 5. Menú plegado fuera de Inicio y Proyectos (body.menu-plegado) --------- */

/* Estudio, Contacto y páginas legales cargan el mismo menú que Inicio: el
   botón cuadrado con el punto a la derecha y el menú desplegable detrás. Las
   reglas del tema para ese comportamiento están atadas a .home; aquí se
   repiten para .menu-plegado. */
.menu-plegado .burguer_nav {
    visibility: hidden;
    opacity: 0;
    transition: all .2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.menu-plegado .c-nav.-open .burguer_nav {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.menu-plegado .c-header {
    background-color: transparent;
}

@media (min-width: 1000px) {

    .menu-plegado .main-wrap,
    .menu-plegado .main-wrap-single,
    .menu-plegado section.main-wrap-single {
        width: calc(100% - 3rem);
    }
}

@media (min-width: 769px) and (max-width: 999px) {

    /* En este rango la cabecera plegada es una barra horizontal arriba
       (misma regla que Inicio); el contenido ocupa todo el ancho. */
    .menu-plegado .main-wrap,
    .menu-plegado .main-wrap-single,
    .menu-plegado section.main-wrap-single {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .menu-plegado .c-header {
        background-color: #fff;
        box-shadow: 0 0 30px rgba(0, 0, 0, .15);
    }
}

/* ------------------ 6. Portada del proyecto en tablet ------------------ */

/* La clienta ve la portada recortada en la tablet (punto 1 del correo). La
   causa: la galería mide 100svh y la foto lo rellena con object-fit: cover,
   así que en un hueco casi cuadrado (tablet apaisada, 840×820) una foto de 3:2
   enseña dos tercios de su anchura. En tablet la galería pasa a medir lo que
   le corresponde a una foto de 3:2 —el formato de casi todas las del
   estudio— y la foto se ve entera (contain). Una foto vertical queda centrada
   con blanco a los lados; ninguna se recorta. El escritorio con ratón no
   cambia: la condición «pointer: coarse» deja fuera a los portátiles. */

/* Tablet apaisada, pantalla táctil. */
@media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) {
    .p-galeria {
        --galeria-ajuste: contain;
        --galeria-fondo: #fff;
        --galeria-alto: min(100svh, calc((100vw - 340px) * 0.6667));
    }

    body.admin-bar .p-galeria {
        --galeria-alto: min(calc(100svh - 32px), calc((100vw - 340px) * 0.6667));
    }

    /* Centrada en vertical: si no, quedaba pegada arriba con el hueco debajo. */
    .p-galeria {
        margin-top: max(0px, calc((100svh - var(--galeria-alto)) / 2));
    }
}

/* Tablet vertical (tablet.css ya apila la barra lateral encima de la foto). */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .p-galeria {
        --galeria-ajuste: contain;
        --galeria-fondo: #fff;
        --galeria-alto: calc(100vw * 0.6667);
    }

    body.admin-bar .p-galeria {
        --galeria-alto: calc(100vw * 0.6667);
    }

    /* La barra apilada se llevaba unos 850px antes de la foto: logo de 140px,
     título, texto, y una fila de flechas que ya está repetida en la barra
     fija de abajo. Se compacta para que la foto entre en la primera pantalla. */
    sidebar.sidebar_proyectos {
        padding-top: 2rem;
    }

    sidebar.sidebar_proyectos .burguer_top_logo a img {
        width: 84px;
    }

    sidebar.sidebar_proyectos footer.sidebar_footer.sidebar_footer_escritorio {
        display: none;
    }
}