/* Portfolio de obras: /obras/ y la ficha de cada obra.
   Va aparte de styles.css a propósito: son pantallas nuevas y no tienen por
   qué engordar la hoja que carga la home. */

.migas {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.2rem clamp(1.5rem, 6vw, 4rem) 0;
    font-size: .85rem;
    color: var(--color-muted);
}

/* Subrayado y no sólo color: las migas son links dentro de un bloque de
   texto, y distinguirlos únicamente por el color falla WCAG 1.4.1. */
.migas a { color: var(--color-text); text-decoration: underline; text-underline-offset: .2em; }
.migas a:hover { color: var(--color-dark); }
.migas span[aria-hidden] { margin: 0 .35rem; color: var(--color-border); }
.migas span[aria-current] { color: var(--color-dark); }

/* ---------- Ficha de obra: portada ---------- */

.obra-hero {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: flex-end;
    padding: 0 clamp(1.5rem, 6vw, 4rem) clamp(2.5rem, 5vw, 4rem);
    background: #111;
    overflow: hidden;
}

.obra-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Degradé y no opacidad sobre la foto: bajarle la opacidad a toda la imagen
   apaga la obra, que es lo único que vino a ver el visitante. El velo va sólo
   donde apoya el texto, y ahí el blanco queda arriba de 7:1. */
.obra-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 38%, rgba(0, 0, 0, 0) 70%);
    z-index: 1;
}

.obra-hero-txt {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.obra-hero-tag {
    display: block;
    font-size: .7rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: .9rem;
}

.obra-hero h1 {
    font-size: clamp(2.1rem, 5.5vw, 3.6rem);
    font-weight: 200;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-bottom: .6rem;
}

.obra-hero p {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, .9);
}

.obra-hero p i { color: var(--color-accent); font-size: 1.1rem; }

/* ---------- Ficha de obra: texto y datos ---------- */

.obra-cuerpo {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 6vw, 4rem);
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
}

.obra-texto p {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--color-text);
    margin-bottom: 1.2rem;
}

.obra-aviso {
    font-size: .9rem;
    color: var(--color-muted);
    border-left: 2px solid var(--color-border);
    padding-left: 1rem;
}

.obra-cta-inline {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .4rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--color-accent-text);
    border-bottom: 1px solid currentColor;
    padding-bottom: .2rem;
}

.obra-cta-inline:hover { color: var(--color-dark); }

.obra-aside h2 {
    font-size: .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 500;
    margin-bottom: 1.1rem;
}

.obra-datos > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-top: 1px solid var(--color-border);
}

.obra-datos dt {
    font-size: .9rem;
    color: var(--color-muted);
}

.obra-datos dd {
    font-size: .95rem;
    color: var(--color-dark);
    text-align: right;
}

.obra-aside-cta {
    margin-top: 1.8rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--color-border);
}

.obra-aside-cta > p {
    font-size: .95rem;
    color: var(--color-text);
}

.obra-aside-cta .obra-btn-wa { margin-top: .9rem; }

.obra-aside-form {
    margin-top: .9rem;
    font-size: .88rem;
}

.obra-aside-form a {
    color: var(--color-accent-text);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.obra-aside-form a:hover { color: var(--color-dark); }

/* ---------- Bloques de relato ---------- */

.obra-bloques {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 6vw, 4rem);
    display: grid;
    gap: clamp(3rem, 8vw, 5.5rem);
}

.obra-bloque {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    padding-top: clamp(2rem, 5vw, 3rem);
    border-top: 1px solid var(--color-border);
}

.obra-bloque:first-child { border-top: 0; padding-top: 0; }

.obra-bloque-rotulo {
    display: block;
    font-size: .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--color-accent-text);
    font-weight: 500;
    margin-bottom: .9rem;
}

.obra-bloque-txt h2 {
    font-size: clamp(1.45rem, 4vw, 2.1rem);
    font-weight: 300;
    line-height: 1.25;
    color: var(--color-dark);
    margin-bottom: 1.3rem;
}

.obra-bloque-destacado {
    font-size: clamp(1.05rem, 2.4vw, 1.25rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-dark);
    border-left: 2px solid var(--color-accent);
    padding-left: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: 1.5rem;
}

.obra-bloque-txt p {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--color-text);
    margin-bottom: 1.2rem;
}

.obra-bloque-txt p:last-child { margin-bottom: 0; }

.obra-bloque-fotos {
    display: grid;
    gap: clamp(.6rem, 1.5vw, 1rem);
}

/* ---------- Antes y después ---------- */

/* Las dos mitades de un par nunca vienen con la misma relación de aspecto: el
   "antes" es una foto de obra del celular —vertical o panorámica— y el
   "después" es la del fotógrafo. Escalarlas para que entren juntas deforma una
   de las dos, así que las fotos se recortan al mismo encuadre antes de subirse
   y acá sólo se declara ese encuadre; el object-fit es la red por si alguna
   entra con la relación cambiada.

   Van de a dos desde el celular y no apiladas: el argumento es la comparación,
   y una foto arriba de la otra a 300 px de distancia deja de ser comparación.
   Quien quiera el detalle toca y abre el visor, que ya existe. */
.obra-comparativa {
    display: grid;
    gap: clamp(1.2rem, 3vw, 2rem);
    margin: 0;
}

.obra-comparativa-par {
    margin: 0;
    display: grid;
    gap: .7rem;
}

.obra-comparativa-fotos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.35rem, 1.2vw, .7rem);
}

.obra-comparativa-lado {
    position: relative;
    display: block;
}

.obra-comparativa-lado .obra-foto img {
    aspect-ratio: var(--comparativa-encuadre, 1);
    height: 100%;
    object-fit: cover;
}

/* Sobre una foto de obra el chip cae lo mismo sobre cielo blanco que sobre
   ladrillo oscuro: el fondo sólido es lo único que garantiza el contraste en
   las dos. Negro sobre blanco da 17.4:1. */
.obra-comparativa-rotulo {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .4rem .7rem;
    background: rgba(17, 17, 17, .82);
    color: #fff;
    pointer-events: none;
}

.obra-comparativa-rotulo b {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.obra-comparativa-fecha {
    font-size: .74rem;
    font-weight: 300;
    color: rgba(255, 255, 255, .82);
}

.obra-comparativa-par figcaption {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* La portada de cada landing se elige por la obra que muestra, no por lo clara
   o lo oscura que sea la foto. Medido sobre el píxel real: el subtítulo caía a
   2,6:1 y la volanta a 1,2:1 contra AA, y ya venía fallando antes de cambiar
   las fotos. El velo va en degradado y sólo abajo, que es donde está el texto:
   arriba la foto se sigue viendo entera. Con el velo el título llega a 4,5:1 y
   el subtítulo a 8,5:1. */
.lp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent 18%,
        rgba(17, 17, 17, .45) 48%,
        rgba(17, 17, 17, .82) 100%);
}

/* La volanta es el único texto del hero que el velo no alcanza: queda arriba,
   es chica y es dorada, y contra una pared blanca se quedaba en 2:1. Ningún
   degradado que deje ver la foto la salva —haría falta tapar el 70% de la
   imagen—, así que se lleva su propio fondo, igual que el rótulo del
   antes/después. Sobre #111 al 88% el dorado da 6,7:1 con cualquier foto.

   Los tres selectores no son decoración: cada landing define
   `.lp-hero .lp-eyebrow` en un <style> propio, que va después de este archivo
   y le gana con la misma especificidad. */
.lp-hero .lp-hero-inner .lp-eyebrow {
    display: inline-block;
    padding: .35rem .7rem;
    background: rgba(17, 17, 17, .88);
}

/* ---------- Galería ---------- */

.obra-galeria {
    padding: 0 clamp(1.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem);
    max-width: 1200px;
    margin: 0 auto;
}

/* Columnas y no grilla: las fotos vienen apaisadas y verticales mezcladas. En
   una grilla hay que recortarlas para que la fila cierre, y el recorte se come
   justo lo que el arquitecto quiere mostrar; en columnas cada foto entra
   entera y no quedan huecos. */
.obra-galeria-grid {
    columns: 1;
    column-gap: clamp(.6rem, 1.5vw, 1rem);
}

.obra-foto {
    display: block;
    width: 100%;
    margin-bottom: clamp(.6rem, 1.5vw, 1rem);
    padding: 0;
    border: 0;
    background: #eceae5;
    cursor: zoom-in;
    overflow: hidden;
    break-inside: avoid;
}

.obra-foto img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .5s ease;
}

.obra-foto:hover img { transform: scale(1.03); }

/* ---------- Otras obras + listado ---------- */

/* El menú del sitio nace transparente porque en la home y en las fichas cae
   sobre una foto oscura. El listado arranca con fondo claro: sin esto el
   nombre del estudio, los links y el botón del menú quedan blancos sobre
   crema (1.07:1) e invisibles hasta que el visitante scrollea. */
.navbar.navbar-solida {
    background: rgba(248, 247, 244, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
}

.navbar.navbar-solida .nav-logo,
.navbar.navbar-solida .nav-toggle { color: var(--color-dark); }
.navbar.navbar-solida .nav-links a { color: var(--color-text); }
.navbar.navbar-solida .nav-links a:hover { color: var(--color-dark); }

.obras-head {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--nav-height) + 1.5rem) clamp(1.5rem, 6vw, 4rem) 0;
}

.obras-head .migas { padding-left: 0; padding-right: 0; }

.obras-head h1 {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    font-weight: 200;
    color: var(--color-dark);
    letter-spacing: -.02em;
    margin: .6rem 0 1rem;
}

.obras-head p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text);
    max-width: 640px;
}

.obras-listado {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem);
}

.obras-grid {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.8rem);
}

.obra-card { display: block; }

.obra-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eceae5;
}

.obra-card-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.obra-card:hover .obra-card-foto { transform: scale(1.04); }

.obra-tag {
    position: absolute;
    top: .8rem;
    left: .8rem;
    background: rgba(17, 17, 17, .82);
    color: #fff;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .35rem .7rem;
}

.obra-card-txt { padding: .9rem .1rem 0; }

.obra-card-txt h2 {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--color-dark);
    letter-spacing: -.01em;
    margin-bottom: .25rem;
}

.obra-card-txt p {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .88rem;
    color: var(--color-muted);
}

.obra-card-txt p i { color: var(--color-accent-text); }

/* El bloque de obras dentro de las landings de zona. */
.obras-en-landing {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 6vw, 6rem);
}

.obras-en-landing > h2 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 200;
    color: var(--color-dark);
    letter-spacing: -.02em;
    margin-bottom: .7rem;
}

.obras-en-landing > p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text);
    max-width: 620px;
    margin-bottom: 2rem;
}

.obra-otras {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 6vw, 4rem);
}

.obra-otras > h2 {
    font-size: 1.4rem;
    font-weight: 200;
    color: var(--color-dark);
    margin-bottom: 1.5rem;
}

.obra-otras-todas {
    margin-top: 1.8rem;
    font-size: .95rem;
}

.obra-otras-todas a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--color-accent-text);
    font-weight: 500;
}

.obra-otras-todas a:hover { color: var(--color-dark); }

/* ---------- Contacto ---------- */

.obra-contacto {
    background: #fff;
    border-top: 1px solid var(--color-border);
}

/* Texto casi negro sobre el verde de WhatsApp: en blanco da 1.98:1. */
.obra-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.4rem;
    padding: .9rem 1.5rem;
    border-radius: 8px;
    background: #25d366;
    color: #111;
    font-size: .95rem;
    font-weight: 500;
    transition: transform .15s;
}

.obra-btn-wa:hover { transform: translateY(-2px); }
.obra-btn-wa i { font-size: 1.2rem; }

/* ---------- Visor de fotos ---------- */

.visor {
    border: 0;
    padding: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, .96);
    overflow: hidden;
}

.visor::backdrop { background: rgba(10, 10, 10, .9); }

.visor img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: clamp(.5rem, 3vw, 2.5rem);
}

.visor-cerrar {
    position: absolute;
    top: .8rem;
    right: .8rem;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
}

.visor-cerrar:hover { background: rgba(255, 255, 255, .25); }

/* ---------- Escritorio ---------- */

@media (min-width: 640px) {
    .obras-grid { grid-template-columns: repeat(2, 1fr); }
    .obra-galeria-grid { columns: 2; }
    /* Con una sola foto el bloque la muestra entera y a todo el ancho; con
       varias van de a dos, que es lo que deja comparar el antes y el después
       sin hacer scroll entre una y otra. */
    .obra-bloque-fotos:not([data-fotos="1"]) { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .obra-cuerpo { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
    .obra-aside { border-left: 1px solid var(--color-border); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
    .obra-datos > div:first-child { border-top: 0; padding-top: 0; }
    /* El texto a la izquierda y las fotos a la derecha: la lectura del relato
       no se corta cada vez que aparece una foto. */
    .obra-bloque { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
    .obra-bloque-txt { position: sticky; top: 6rem; }
}

@media (min-width: 1000px) {
    .obras-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .obra-foto img,
    .obra-card-foto { transition: none; }
    .obra-foto:hover img,
    .obra-card:hover .obra-card-foto { transform: none; }
}