/* Obras firmadas: tarjetas con varias fotos de cada obra y el panel desplegable del menú.
   Lo usan la portada y todas las páginas generadas por seo/generar.mjs. */

/* ---- Panel desplegable del menú: "Obras firmadas" con sus tipos de obra ---- */
.nav > li{display:flex;align-items:center}
.desplegable-obras{position:relative}
.desplegable-obras > a{display:inline-flex;align-items:center;gap:6px}
.desplegable-obras > a .flechita{width:10px;height:10px;transition:transform .25s cubic-bezier(.23,1,.32,1)}
.panel-obras{position:absolute;top:calc(100% + 14px);left:50%;z-index:70;width:min(520px,86vw);padding:14px;
  background:#151B1A;border:1px solid rgba(201,168,106,.3);border-radius:20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.75);
  opacity:0;visibility:hidden;transform:translate(-50%,-6px);
  transition:opacity .2s ease,transform .25s cubic-bezier(.23,1,.32,1),visibility 0s .25s}
/* Puente invisible para que el panel no se cierre al bajar el ratón */
.panel-obras::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.desplegable-obras:hover .panel-obras,.desplegable-obras:focus-within .panel-obras{opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .2s ease,transform .25s cubic-bezier(.23,1,.32,1),visibility 0s}
.desplegable-obras:hover > a .flechita,.desplegable-obras:focus-within > a .flechita{transform:rotate(180deg)}
.teselas{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0}
.nav .panel-obras a{padding:0;text-shadow:none}
.nav .panel-obras a::after{display:none}
.tesela{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;isolation:isolate;text-decoration:none;color:#fff}
.tesela img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.62) saturate(.9);transition:transform .6s cubic-bezier(.23,1,.32,1),filter .3s ease}
.tesela::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,14,13,.85),rgba(10,14,13,0) 65%)}
.tesela span{position:absolute;left:12px;right:12px;bottom:10px}
.tesela b{display:block;font-family:var(--serif);font-size:1.25rem;font-weight:500;line-height:1.1}
.tesela small{font-size:.75rem;font-weight:600;color:var(--laton-claro)}
.tesela:hover img,.tesela:focus-visible img{transform:scale(1.06);filter:brightness(.82) saturate(1)}
.nav .panel-obras .panel-todas{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:10px 6px 2px;font-size:.9rem;font-weight:600;color:var(--laton-claro);text-decoration:none}
.panel-todas svg{width:18px;height:18px;transition:transform .25s cubic-bezier(.23,1,.32,1)}
.panel-todas:hover svg{transform:translateX(4px)}

/* ---- Sección de obras (fondo oscuro) ---- */
.firmadas{padding:130px 0 120px;overflow:hidden;isolation:isolate;background:
  radial-gradient(55% 60% at 100% 0%,rgba(201,168,106,.16),transparent 64%),
  radial-gradient(50% 60% at 0% 100%,rgba(84,120,108,.24),transparent 66%),
  linear-gradient(170deg,#18201F 0%,#121817 60%,#0E1312 100%);color:var(--texto-claro)}
.firmadas::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.firmadas-cab{display:flex;justify-content:space-between;align-items:end;gap:28px 48px;flex-wrap:wrap;margin-bottom:48px}
.firmadas h2{color:#fff}
.firmadas .entradilla{color:var(--gris-claro)}
/* La "firma" en latón que se dibuja bajo el título */
.firma{display:block;width:min(320px,72%);height:auto;margin:8px 0 18px;overflow:visible}
.firma path{fill:none;stroke:var(--laton);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.firmadas-cab.visto .firma path,.firma.dibujada path{animation:firmar 1.8s .35s cubic-bezier(.77,0,.175,1) forwards}
@keyframes firmar{to{stroke-dashoffset:0}}
.filtros-obra{display:flex;flex-wrap:wrap;gap:8px}
.filtro-obra{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(201,168,106,.35);background:rgba(255,255,255,.03);color:var(--texto-claro);border-radius:999px;padding:9px 16px;font-size:.88rem;font-weight:600;text-decoration:none;transition:background .2s ease,border-color .2s ease,color .2s ease}
.filtro-obra small{font-size:.75rem;color:var(--gris-claro);font-variant-numeric:tabular-nums;transition:color .2s ease}
.filtro-obra:hover{border-color:var(--laton)}
.filtro-obra[aria-pressed="true"],.filtro-obra[aria-current="page"]{background:var(--laton);border-color:var(--laton);color:var(--noche)}
.filtro-obra[aria-pressed="true"] small,.filtro-obra[aria-current="page"] small{color:rgba(21,27,26,.7)}

/* ---- Tarjeta de obra ---- */
.proyectos{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 30px;margin:0;padding:0}
.pr-visor{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#0B0F0E;box-shadow:0 40px 80px -40px rgba(0,0,0,.85);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pr-visor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;-webkit-user-drag:none}
.pr-visor img.ver{opacity:1;z-index:1}
.pr-visor img.entra{opacity:1;z-index:2}
.pr-visor::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,14,13,.65) 0%,rgba(10,14,13,0) 34%),linear-gradient(180deg,rgba(10,14,13,.35),rgba(10,14,13,0) 22%)}
/* Línea de luz que acompaña al cambio de foto, como el borde de un telón */
.pr-linea{position:absolute;top:0;bottom:0;left:-1px;width:2px;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,var(--laton-claro) 18%,#FFF6DD 50%,var(--laton-claro) 82%,transparent);box-shadow:0 0 18px 2px rgba(226,200,147,.7)}
.pr-cat{position:absolute;left:16px;top:16px;z-index:5;font-size:.78rem;font-weight:700;color:var(--noche);background:var(--laton);border-radius:999px;padding:5px 12px;text-decoration:none;transition:background .2s ease}
a.pr-cat:hover{background:var(--laton-claro)}
.pr-controles{position:absolute;right:14px;bottom:14px;z-index:5;display:flex;align-items:center;gap:8px}
.pr-controles button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.42);background:rgba(21,27,26,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .16s ease-out}
.pr-controles button:hover{background:#fff;color:var(--noche);border-color:#fff}
.pr-controles button:active{transform:scale(.94)}
.pr-controles svg{width:18px;height:18px}
.pr-cuenta{font-size:.82rem;font-weight:700;color:#fff;min-width:3.4em;text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.pr-segmentos{position:absolute;left:12px;bottom:14px;z-index:5;display:flex}
.pr-segmentos button{width:34px;height:44px;padding:0 4px;border:0;background:none;display:flex;align-items:center;cursor:pointer}
.pr-segmentos button::before{content:"";width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.35);transition:background .3s ease}
.pr-segmentos button[aria-current="true"]::before{background:var(--laton-claro)}
.pr-texto{padding:22px 4px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:start}
.pr-texto h3{font-size:clamp(1.5rem,2.2vw,1.9rem);color:#fff}
.pr-texto h3 a{text-decoration:none;background:linear-gradient(var(--laton),var(--laton)) 0 100%/0 1px no-repeat;transition:background-size .4s cubic-bezier(.23,1,.32,1)}
.pr-texto h3 a:hover,.pr-texto h3 a:focus-visible{background-size:100% 1px}
.pr-lugar{grid-column:1;color:var(--laton-claro);font-size:.9rem;font-weight:600}
.pr-datos{grid-column:2;grid-row:1/3;display:flex;gap:20px;text-align:right;margin:0}
.pr-datos dt{font-size:.74rem;color:var(--gris-claro);font-weight:600}
.pr-datos dd{margin:0;font-family:var(--serif);font-size:1.3rem;font-weight:600;color:#fff;white-space:nowrap;font-variant-numeric:lining-nums}
.pr-desc{grid-column:1/-1;color:var(--gris-claro);font-size:.95rem;margin-top:8px;max-width:62ch}
.pr-ver{grid-column:1/-1;justify-self:start;margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;color:var(--laton-claro);text-decoration:none}
.pr-ver svg{width:18px;height:18px;transition:transform .25s cubic-bezier(.23,1,.32,1)}
.pr-ver:hover svg{transform:translateX(4px)}
.firmadas-pie{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:64px;padding-top:34px;border-top:1px solid rgba(255,255,255,.12)}
.firmadas-pie p{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.1;color:#fff;margin:0 auto 0 0}

/* ---- Página de una obra: visor grande en la portada ---- */
.visor-obra .pr-visor{aspect-ratio:4/3.2;border-radius:24px}

/* ---- Página de todas las obras: mosaico de tipos en la portada ---- */
.mosaico-tipos .teselas{gap:12px}
.mosaico-tipos .tesela{aspect-ratio:4/3.4;border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.mosaico-tipos .tesela b{font-size:clamp(1.4rem,2vw,1.8rem)}
.mosaico-tipos .tesela small{font-size:.85rem}
.mosaico-tipos .panel-todas{display:inline-flex;gap:8px;align-items:center;margin-top:14px;font-weight:600;color:var(--laton-claro);text-decoration:none}

/* ---- Página de una obra: qué hicimos ---- */
.detalle-obra{padding:120px 0;color:var(--noche);background:
  radial-gradient(50% 60% at 100% 0%,rgba(201,168,106,.2),transparent 66%),linear-gradient(180deg,#ECE9E2 0%,#E6E2D9 100%)}
.detalle-obra .envoltura{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:start}
.detalle-obra .resumen{font-size:1.12rem;line-height:1.65;color:var(--gris-osc);margin-top:22px;max-width:56ch}
.enlaces-obra{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.enlaces-obra .btn{min-height:48px;font-size:.92rem}
.hecho-lista{list-style:none;margin:0;padding:0;border-top:1px solid #CFC8BA}
.hecho-lista li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:baseline;padding:20px 0;border-bottom:1px solid #CFC8BA;font-family:var(--serif);font-size:1.4rem;line-height:1.25}
.hecho-lista li::before{content:"";width:9px;height:9px;transform:translateY(-3px) rotate(45deg);background:var(--laton)}

/* ---- En las páginas de servicio: enlace a las obras de ese tipo ---- */
.mas-obras{margin-top:22px}

/* ---- Menú de las páginas con una entrada más ---- */
@media (max-width:1400px) and (min-width:1101px){
  .cabecera .nav{gap:22px}
  .cabecera .nav a,.cabecera .nav .abre-menu{font-size:.9rem}
}
@media (max-width:1100px){
  .detalle-obra .envoltura{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:720px){
  .detalle-obra{padding:80px 0}
  .hecho-lista li{font-size:1.2rem}
  .mosaico-tipos .tesela b{font-size:1.3rem}
}

@media (max-width:860px){
  .proyectos{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:720px){
  .firmadas{padding:88px 0}
  .pr-texto{grid-template-columns:minmax(0,1fr)}
  .pr-datos{grid-column:1;grid-row:auto;text-align:left;margin-top:10px}
  .pr-controles button{width:40px;height:40px}
  .firmadas-pie{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){
  .firma path{stroke-dashoffset:0;animation:none}
  .panel-obras,.tesela img,.pr-texto h3 a{transition:none}
}