/* ===== About ===== */
.about { margin-top: 1rem; }
.about__grid{
  display:grid; gap:2rem;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
}
@media (max-width: 960px){
  .about__grid{ grid-template-columns: 1fr; }
}

.about__kicker{
  font-size:.85rem; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; margin-bottom:.6rem;
}
.about__title{
  margin:0 0 .6rem 0;
  font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  line-height:1.15; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.about__lead{
  color:#e6f0ee; margin:0 0 1rem 0;
  max-width:60ch;
}
.about__bullets{
  margin:0; padding-left:1.1rem; color:#cfe7e4;
}
.about__bullets li{ margin:.35rem 0; }

.about__ctas{ display:flex; gap:.6rem; align-items:center; margin-top:1rem; }

/* Stats */
.about__stats{
  display:flex; gap:1rem; margin:1rem 0 0 0; flex-wrap:wrap;
}
.stat{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:.7rem .9rem;
  min-width:120px; text-align:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.stat__num{
  display:block; font-weight:900; font-size:1.3rem; color: var(--gold);
}
.stat__label{
  display:block; font-size:.8rem; color:#9ecac6;
}

/* Media con marco geométrico (maya/azteca sutil) */
.about__media{
  position:relative; margin:0;
  border-radius:16px; overflow:hidden;
  background: radial-gradient(600px 380px at 70% 20%, rgba(31,142,140,.18), transparent 60%),
              linear-gradient(180deg, rgba(12,18,24,.25), rgba(12,18,24,.55));
  border: 1px solid rgba(65,140,143,.45);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  transform: translateZ(0);
}
.about__media img{ display:block; width:100%; height:auto; mix-blend-mode: normal; }

/* Ornamento escalonado dorado en la esquina */
.about__media::after{
  content:""; position:absolute; right:-1px; bottom:-1px; width:120px; height:24px;
  background: linear-gradient(180deg, rgba(212,175,55,.28), rgba(31,142,140,.12));
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'>\
    <path d='M0 24h12v-6h12v-6h12v-6h12V0h12v6h12v6h12v6h12v6h12v-6h12v-6h12v-6h12V0h12v24H0z' fill=\"black\"/>\
  </svg>") right/cover no-repeat;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'>\
    <path d='M0 24h12v-6h12v-6h12v-6h12V0h12v6h12v6h12v6h12v6h12v-6h12v-6h12v-6h12V0h12v24H0z' fill=\"black\"/>\
  </svg>") right/cover no-repeat;
  opacity:.85;
}

/* Placa/badge */
.about__badge{
  position:absolute; left:12px; bottom:12px;
  display:inline-block; padding:.35rem .6rem; border-radius:12px;
  background: linear-gradient(180deg, rgba(8,12,16,.40), rgba(8,12,16,.28));
  color:#f3f6f7; font-size:.85rem; letter-spacing:.3px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* Micro-animaciones */
.about__media:hover{ transform: translateY(-2px); transition: transform .25s ease; }
.about__ctas .btn:hover{ transform: translateY(-1px) scale(1.02); }