/* ============================================================
   BONA'LISSA — about.css (Sobre nosotros)
   ============================================================ */

.about-hero{
  background: var(--ink); color: var(--cream);
  padding: calc(var(--header-h) + 100px) 0 0;
  position: relative; overflow:hidden;
}
.about-hero .container{ position:relative; z-index:2; }
.about-hero .eyebrow{ color: var(--gold-bright); }
.about-hero h1{ font-size: clamp(40px,6.4vw,80px); font-weight:400; max-width:820px; }
.about-hero h1 em{ font-style: italic; color: var(--gold-bright); }
.about-hero-media{
  margin-top:70px; position:relative;
  height: 46vh; min-height:320px; max-height:520px;
  overflow:hidden;
}
.about-hero-media img{ width:100%; height:100%; object-fit:cover; object-position: center 30%; }
.about-hero-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(34,28,22,.15), rgba(34,28,22,.55));
}

/* -------- story split -------- */
.story-section{ background: var(--cream); }
.story-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:70px; align-items:center; }
.story-media{ position:relative; }
.story-media img{ width:100%; aspect-ratio: 4/5; object-fit:cover; }
.story-media .frame-deco{
  position:absolute; top:-22px; left:-22px; width:100%; height:100%;
  border: 1px solid var(--gold); z-index:-1;
}
.story-copy .eyebrow{ margin-bottom:20px; }
.story-copy h2{ font-size: clamp(28px,3.4vw,42px); font-weight:400; margin-bottom:24px; line-height:1.2; }
.story-copy p{ font-size:16px; line-height:1.85; color:var(--ink-soft); }
.story-copy p + p{ margin-top:16px; }
@media (max-width: 900px){ .story-grid{ grid-template-columns:1fr; gap:40px; } .story-media .frame-deco{ display:none; } }

/* -------- timeline -------- */
.timeline-section{ background: var(--cream-deep); }
.timeline{ position:relative; margin-top:60px; }
.timeline::before{
  content:''; position:absolute; left:20px; top:0; bottom:0; width:1px;
  background: var(--line-gold);
}
@media (min-width: 760px){ .timeline::before{ left:50%; transform:translateX(-50%); } }

.timeline-item{
  position:relative;
  padding: 0 0 60px 56px;
}
@media (min-width: 760px){
  .timeline-item{ width:50%; padding: 0 0 70px 0; }
  .timeline-item:nth-child(odd){ padding-right:60px; text-align:right; margin-left:0; }
  .timeline-item:nth-child(even){ padding-left:60px; margin-left:50%; }
}
.timeline-dot{
  position:absolute; left:14px; top:4px; width:12px; height:12px; border-radius:50%;
  background: var(--gold); box-shadow:0 0 0 5px var(--cream-deep);
}
@media (min-width: 760px){
  .timeline-item:nth-child(odd) .timeline-dot{ left:auto; right:-6.5px; }
  .timeline-item:nth-child(even) .timeline-dot{ left:-6.5px; }
}
.timeline-tag{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.timeline-item h3{ font-size:22px; font-weight:400; margin-bottom:10px; }
.timeline-item p{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); max-width:360px; }
@media (min-width: 760px){
  .timeline-item:nth-child(odd) p{ margin-left:auto; }
}

/* -------- gallery strip -------- */
.about-gallery{ background: var(--cream); }
.gallery-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:24px; }
.gallery-grid .g-main{ aspect-ratio: 4/3.1; overflow:hidden; }
.gallery-grid .g-side{ display:flex; flex-direction:column; gap:24px; }
.gallery-grid .g-side > div{ aspect-ratio: 4/2; overflow:hidden; flex:1; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.gallery-grid > div:hover img, .gallery-grid .g-side > div:hover img{ transform: scale(1.06); }
@media (max-width: 820px){ .gallery-grid{ grid-template-columns:1fr; } .gallery-grid .g-side{ flex-direction:row; } }

/* -------- values row -------- */
.values-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:40px; }
.value-card{ padding-top:26px; border-top:1px solid var(--line-gold); }
.value-card h3{ font-size:20px; font-weight:400; margin-bottom:12px; }
.value-card p{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); }
@media (max-width: 820px){ .values-row{ grid-template-columns:1fr; gap:32px; } }