/* IM3D Arquitectura — hoja de estilo del sitio estático */
:root {
  --fondo: #3c4a52;
  --texto: #ffffff;
  --hover: #3d3d3d;
  --acento: #ffe76e;
  --oscuro: #1a1a1a;
  --fuente: "PT Mono", monospace, sans-serif;
  --cabecera: 74px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 13px;
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--cabecera);
  padding: 9px 22px 9px 14px;
  background: var(--fondo);
}
.logo img { height: 50px; width: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.menu li { margin-left: 20px; }
.menu a {
  font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--texto); padding: 6px 0; transition: color .2s;
}
.menu a:hover { color: var(--hover); }
.menu a.activo { text-decoration: underline; text-underline-offset: 4px; }
.menu-btn { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-btn span { display: block; width: 24px; height: 2px; background: #f4f4f4; margin: 5px 0; transition: transform .25s, opacity .25s; }

/* ---------- Portadas (inicio / estudio) ---------- */
.portada {
  height: calc(100vh - var(--cabecera));
  height: calc(100svh - var(--cabecera));
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
@media (min-width: 900px) and (hover: hover) { .portada { background-attachment: fixed; } }

/* ---------- Colección de proyectos ---------- */
.coleccion {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  padding: 0 8px 20px;
}
.tarjeta {
  position: relative; display: block; aspect-ratio: 1.618;
  background-position: center; background-size: cover; overflow: hidden;
}
.tarjeta-titulo {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(60, 74, 82, .7); color: var(--acento);
  font-size: 15px; letter-spacing: -.25px; text-align: center; padding: 10px;
  opacity: 0; transition: opacity .3s;
}
.tarjeta:hover .tarjeta-titulo, .tarjeta:focus-visible .tarjeta-titulo { opacity: 1; }
@media (hover: none) { .tarjeta-titulo { opacity: 1; background: linear-gradient(transparent 55%, rgba(60,74,82,.85)); align-items: flex-end; } }

/* ---------- Página de proyecto ---------- */
.proyecto { padding: 0 0 20px; }
.ficha { padding: 66px 0 10px; }
.ficha p { margin: 0 0 8px; line-height: 1.3; }
.ficha .titulo { font-size: 28px; font-weight: bold; margin-bottom: 14px; }
.ficha .meta { color: #000; }
.ficha .meta strong { font-weight: bold; }
.ficha .meta-16 { font-size: 16px; }
.ficha .meta-14 { font-size: 14px; }
.ficha .meta > * , .ficha .meta { background: #fff; display: table; padding: 0 2px; }
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 12px; }
.foto { display: block; aspect-ratio: 2; overflow: hidden; background: #2f3b42; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.foto:hover img { opacity: .85; }

/* ---------- Contacto ---------- */
.contacto {
  background: var(--oscuro) center / cover no-repeat;
  padding: 129px 3% 90px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  min-height: calc(100vh - var(--cabecera));
}
.contacto-texto p { margin: 0 0 6px; font-size: 13px; }
.contacto-texto hr { border: 0; border-top: 1px solid #555; margin: 16px 0; max-width: 400px; }
.formulario { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.formulario label { display: flex; flex-direction: column; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; gap: 6px; }
.formulario input, .formulario textarea {
  font: 13px var(--fuente); color: var(--texto);
  background: transparent; border: 1px solid #555; padding: 10px; outline: none;
}
.formulario input:focus, .formulario textarea:focus { border-color: #fff; }
.formulario button {
  align-self: flex-start; font: 11px var(--fuente); letter-spacing: 3px; text-transform: uppercase;
  background: #fff; color: var(--oscuro); border: 0; padding: 12px 28px; cursor: pointer;
}
.formulario button:hover { background: var(--acento); }
.form-ok { color: var(--acento); }
.oculto { display: none !important; }

/* ---------- Redes y pie ---------- */
.redes { display: flex; justify-content: center; padding: 18px 0 6px; }
.redes a { color: #fff; opacity: .9; }
.redes a:hover { opacity: 1; }
.pie { text-align: center; font-size: 10px; padding: 8px 10px 26px; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(20, 26, 30, .96);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 94vw; max-height: 92vh; object-fit: contain; box-shadow: 0 0 40px rgba(0,0,0,.5); }
.lightbox button {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 44px; line-height: 1; padding: 10px 18px; opacity: .8;
}
.lightbox button:hover { opacity: 1; }
.lb-cerrar { top: 10px; right: 14px; font-size: 36px; }
.lb-prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 6px; top: 50%; transform: translateY(-50%); }

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .menu-btn { display: block; }
  .menu {
    position: fixed; top: var(--cabecera); left: 0; right: 0; bottom: 0;
    background: var(--fondo); transform: translateX(100%); transition: transform .3s;
    overflow: auto;
  }
  .menu.abierto { transform: none; }
  .menu ul { flex-direction: column; align-items: flex-start; padding: 24px 28px; }
  .menu li { margin: 0 0 22px; }
  .menu a { font-size: 13px; letter-spacing: 4px; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .coleccion { grid-template-columns: 1fr; gap: 14px; padding: 0 8px 14px; }
  .galeria { grid-template-columns: 1fr; }
  .ficha { padding: 36px 14px 6px; }
  .ficha .titulo { font-size: 20px; }
  .ficha .meta-16 { font-size: 14px; }
  .ficha .meta-14 { font-size: 12px; }
  .contacto { grid-template-columns: 1fr; padding: 60px 20px 60px; gap: 40px; }
}