/* =========================================
   PROYECTOS · BASE (Template único)
   ========================================= */

:root{
  --ink:#1c1c1e;
  --azul:#31506b;
  --vino:#7a5b66;
  --negro:#0b0b0d;

  /* altura del zócalo (para compensar fixed) */
  --proy-header-h: 72px;
}

.page-proyecto{
  background:#fff;
  color:var(--ink);
}

/* como el header es fixed, empujamos el contenido */
.proyecto-main{
  padding-top: var(--proy-header-h);
}

/* =========================================
   ZÓCALO (FIXED + modo scroll)
   ========================================= */

.proyecto-header{
  position: fixed;          /* NO SE DESAPARECE JAMÁS */
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  transition: background .20s ease, box-shadow .20s ease, border-color .20s ease;
}

.proyecto-header.scrolled{
  background: var(--negro);
  border-bottom-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.proyecto-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  min-height: var(--proy-header-h);
  box-sizing: border-box;
}

/* Logo: ✅ NO fondo blanco, ✅ no filtro, ✅ se mantiene tal cual */
.proyecto-logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.proyecto-logo img{
  height: 36px;
  display:block;
}

/* Botón Volver: siempre fondo blanco para verse sobre negro */
.btn-volver{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  text-decoration:none;
  padding:8px 16px;
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  border:1px solid rgba(0,0,0,.15);
  transition: background .18s ease, transform .18s ease;
  white-space:nowrap;
}

.btn-volver:hover{
  background:#f2f2f2;
  transform: translateY(-1px);
}

/* En modo negro, el botón sigue blanco  */
.proyecto-header.scrolled .btn-volver{
  background:#fff;
  color:var(--ink);
  border-color: rgba(255,255,255,.35);
}

/* =========================================
   HERO (imagen de fondo + overlay ORES)
   ========================================= */

.proyecto-hero{
  position:relative;
  color:#fff;
  overflow:hidden;
  padding: 88px 0 72px;
}

.proyecto-hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(122,91,102,.72) 0%,
      rgba(49,80,107,.86) 100%
    ),
    var(--hero-img);
  background-size: cover;
  background-position: center;
  filter: saturate(1.02) contrast(1.04);
  transform: scale(1.02);
}

.proyecto-hero-inner{
  position:relative;
  z-index:2;
  max-width: 980px;
}

.proyecto-kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:.14em;
  font-weight:800;
  text-transform:uppercase;
  opacity:.92;
  margin-bottom:10px;
}

.proyecto-hero h1{
  font-size:clamp(34px,4vw,56px);
  line-height:1.08;
  margin: 0 0 10px;
  font-weight:800;
  text-shadow: 0 10px 26px rgba(0,0,0,.24);
}

.proyecto-subtitle{
  max-width:820px;
  font-size:16px;
  line-height:1.7;
  opacity:.96;
  margin: 0;
}

/* =========================================
   CONTENIDO
   ========================================= */

.proyecto-contenido{
  padding: 70px 0;
}

.contenido-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items:start;
}

.proyecto-texto h2{
  margin: 0 0 10px;
  font-size: 20px;
  color: var(--azul);
}

.proyecto-texto p,
.proyecto-texto li{
  line-height: 1.75;
  font-size: 15px;
}

.proyecto-texto p{
  margin: 0 0 18px;
}

.proyecto-texto ul{
  margin: 0 0 22px;
  padding-left: 18px;
}

/* Media */
.proyecto-media figure{
  margin: 0 0 28px;
}

.proyecto-media img{
  width: 100%;
  border-radius: 12px;
  display:block;
}

.proyecto-media figcaption{
  font-size: 13px;
  opacity: .72;
  margin-top: 8px;
}

/* Responsive */
@media(max-width: 900px){
  :root{ --proy-header-h: 66px; }

  .contenido-grid{
    grid-template-columns: 1fr;
  }

  .btn-volver{
    padding: 8px 12px;
  }

  .proyecto-logo img{
    height: 34px;
  }
}

/* botenes para ver el articulo*/

.btn-leer-articulo{
  display:inline-block;
  margin-top:12px;
  padding:10px 18px;
  font-size:0.9rem;
  font-weight:600;
  color:#7A5B66;          /* vino ORES */
  border:1.5px solid #7A5B66;
  border-radius:24px;
  text-decoration:none;
  transition:all .25s ease;
}

.btn-leer-articulo:hover{
  background:#7A5B66;
  color:#fff;
}