/* ==========================================================
   PROMOCIONES.CSS — Ficha de detalle y listados de promociones
   Usado por: index.html (#obra), paginas/obra-nueva.html,
   paginas/promocion.html, paginas/promociones-vendidas.html
   ========================================================== */

  /* El hueco superior de estas páginas lo da la clase compartida
     .page-offset (shared/brand/base.css), no una clase local. */

  .promo-section{
    background:var(--ink);
    color:var(--card);
    position:relative;
  }
  .promo-section .eyebrow{color:var(--brass);}
  .promo-section .eyebrow::before{background:var(--brass);}
  .promo-section h2{color:var(--card);}
  .promo-section p{color:rgba(251,248,241,0.75);}
  .obra-head{max-width:680px; margin-bottom:60px;}

  /* ---------- FICHA TÉCNICA (datos clave: precio, superficies, entrega...) ---------- */
  .specs-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:rgba(251,248,241,0.14);
    border:1px solid rgba(251,248,241,0.14);
    margin-bottom:60px;
  }
  .spec-item{
    background:var(--ink);
    padding:22px 16px;
    text-align:center;
  }
  .spec-value{
    font-family:'Fraunces', serif;
    font-size:1.25rem;
    color:var(--card);
    margin-bottom:6px;
  }
  .spec-label{
    font-family:'JetBrains Mono', monospace;
    font-size:0.64rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--brass);
  }

  .chalet-gallery{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:16px;
    margin-bottom:60px;
  }
  .chalet-gallery .img-slot{min-height:280px; background:linear-gradient(135deg, #8a7a58 0%, #4a4130 100%);}
  .chalet-gallery .stack{display:grid; gap:16px;}
  .chalet-gallery .stack .img-slot{aspect-ratio:16/9; min-height:auto;}

  .interior-strip{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:14px;
    margin-bottom:60px;
  }
  .interior-photo{
    aspect-ratio:3/4;
    background:#3a3626;
    margin-bottom:10px;
  }
  .interior-item p{
    font-family:'JetBrains Mono', monospace;
    font-size:0.66rem;
    letter-spacing:0.03em;
    color:rgba(251,248,241,0.55);
    text-transform:uppercase;
  }
  .feature-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:rgba(251,248,241,0.14);
    border:1px solid rgba(251,248,241,0.14);
    margin-bottom:60px;
  }
  .feature-cell{
    background:var(--ink);
    padding:32px 28px;
  }
  .feature-cell .icon{margin-bottom:16px;}
  .feature-cell h4{
    font-family:'Fraunces', serif;
    color:var(--card);
    font-size:1.02rem;
    margin-bottom:8px;
  }
  .feature-cell p{font-size:0.88rem; margin:0;}

  .location-banner{
    border:1px solid rgba(251,248,241,0.2);
    padding:30px 34px;
    margin-bottom:50px;
  }
  .location-banner.has-map{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:34px;
    align-items:stretch;
  }
  .location-map{
    min-height:220px;
    border:1px solid rgba(251,248,241,0.2);
    background:linear-gradient(135deg, #3a3626 0%, #232019 100%);
  }
  .location-banner .place{
    font-family:'Fraunces', serif;
    font-size:1.4rem;
    color:var(--card);
    margin-bottom:20px;
  }
  .location-banner .place span{color:var(--brass); font-style:italic;}
  .location-facts{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .location-facts li{
    font-family:'Work Sans', sans-serif;
    font-size:0.98rem;
    color:rgba(251,248,241,0.85);
    line-height:1.4;
    padding-left:18px;
    position:relative;
  }
  .location-facts li::before{
    content:"";
    position:absolute;
    left:0; top:0.55em;
    width:8px; height:1px;
    background:var(--brass);
  }
  .obra-ctas{display:flex; gap:16px; flex-wrap:wrap;}
  .obra-ctas .btn-dark-outline{
    color:var(--card);
    border-color:rgba(251,248,241,0.55);
  }
  .obra-ctas .btn-dark-outline:hover{
    background:rgba(251,248,241,0.12);
    color:var(--card);
  }

  /* ---------- Listados (obra-nueva.html, promociones-vendidas.html) ---------- */
  .promo-listing-head{max-width:680px; margin-bottom:50px;}
  .case-card a, a.case-card{color:inherit;}

  @media (max-width:900px){
    .interior-strip{grid-template-columns:repeat(2, 1fr);}
    .feature-grid{grid-template-columns:1fr;}
    .chalet-gallery{grid-template-columns:1fr;}
    .specs-grid{grid-template-columns:repeat(2, 1fr);}
    .location-banner.has-map{grid-template-columns:1fr; gap:24px;}
    .location-map{min-height:240px;}
  }