/* ====== PROYECTO-STYLE.CSS (scope: .project-page) ====== */

/* Variables locais —— podes duplicar ou herdar as do agencia-style */
.project-page { --accent: #3f5273; --accent-600:#33405a; --muted:#586070; --bg:#ffffff; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

/* Reset visual do contedor */
.project-page .container { width: min(1140px, 92%); margin-inline: auto; padding: 0 0.8rem; }

/* HEADER básico (herdado pero escopado por seguridade) */
.project-page .site-header{ position:relative; z-index:90; background:transparent; border-bottom:0; }
.project-page .header-inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.project-page .logo{ height:44px; width:auto; }

/* HERO */
.project-page .project-hero {
  padding: 72px 0 48px;
  background: linear-gradient(120deg,#fbfdff 0%, #f2f4f8 100%);
  border-bottom: 1px solid rgba(15,23,42,0.03);
  text-align: center;
  position: relative;
}
.project-page .project-hero .back-link {
  position: absolute; left: 2.2rem; top: 1.8rem; color:var(--accent); text-decoration:none; font-weight:600;
}
.project-page .project-title {
  font-family: "Playfair Display", serif; font-weight:700; font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 8px 0 6px; color:var(--accent-600);
}
.project-page .project-subtitle { color:var(--muted); margin-bottom: 0; font-size:1.05rem; }

/* CONTENT: estrutura flexible para imaxes e texto */
.project-page .project-content { padding: 64px 0 96px; background: #fff; }
.project-page .content-inner { max-width:1140px; margin:0 auto; }

/* Bloque grande: imaxe ancho completo */
.project-page .image-block { margin: 28px 0; }
.project-page .image-block > img { width:100%; height:auto; display:block; border-radius:14px; box-shadow: 0 18px 40px rgba(17,24,39,0.06); object-fit:cover; transition: transform .45s cubic-bezier(.2,.9,.3,1);}

/* Fila flexible de pequenas imaxes (2 por fila por defecto) */
.project-page .image-row {
  display:flex; flex-wrap:wrap; gap:1.25rem; align-items:flex-start; justify-content:flex-start;
  margin: 22px 0 28px;
}
.project-page .image-row > img {
  flex: 0 0 calc(50% - .625rem); /* 2 por fila */
  max-width: calc(50% - .625rem);
  width: calc(50% - .625rem);
  height: auto;
  display:block;
  border-radius:12px;
  box-shadow: 0 12px 30px rgba(17,24,39,0.06);
  object-fit:cover;
  transition: transform .45s cubic-bezier(.2,.9,.3,1);
}
.project-page .image-row.three > img {
  flex: 0 0 calc(33% - 0.83rem);
  max-width: calc(33% - 0.83rem);
}

/* Imaxe con texto ao lado (50/50) */
.project-page .image-text {
  display:flex; gap:2rem; align-items:center; flex-wrap:wrap; margin: 28px 0;
}
.project-page .image-text > img {
  flex: 0 0 48%; max-width:48%; width:48%; border-radius:12px; object-fit:cover;transition: transform .45s cubic-bezier(.2,.9,.3,1);
}
.project-page .image-text .text-block { flex:1; }

/* Texto e tipografía */
.project-page .text-block p, .project-page .content-inner p {
  color:var(--muted); line-height:1.6; font-size:1.03rem; margin-bottom:1rem;
}
.project-page h2 { color:var(--accent-600); margin:0 0 .6rem; font-size:1.5rem; }

/* Small screens: full width stacking */
@media (max-width: 860px) {
  .project-page .image-row > img,
  .project-page .image-text > img,
  .project-page .image-row.three > img {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .project-page .image-text { flex-direction:column; }
}

/* Microinteraction hover */
.project-page .image-row > img:hover,
.project-page .image-block > img:hover,
.project-page .image-text > img:hover { transform: scale(1.03); }

/* ensure container overflow visible to prevent cutting */
.project-page .content-inner,
.project-page .project-content { overflow: visible; }