.about{
  background:#f6f7f9;
  padding:80px 20px;
  text-align:center;
  position:relative;
  overflow:hidden;
  font-family:'Helvetica', sans-serif;
  font-style:italic;
}

/* Marca de agua con el logo (rutas absolutas desde /public) */
.bg-mark{
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
}
.bg-mark::before{
  content:"";
  position:absolute;
  right:25%;
  top:50%;
  transform: translateY(-40%);
  width: clamp(260px, 40vw, 900px);
  aspect-ratio: 1 / 1;
  background:#16325b;
  opacity:.07;
  -webkit-mask: url('../img/Logo/logo-blanco.png') center / contain no-repeat;
          mask: url('../img/Logo/logo-blanco.png') center / contain no-repeat;
}

.container{ position:relative; z-index:1; }

@media (max-width: 768px){
  .bg-mark::before{
    right:50%;
    transform: translate(50%, -30%);
    width: 70vw;
    opacity:.09;
  }
}

.title{
  font-family:'Saira', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-style:italic;
  font-size:clamp(32px, 5vw, 56px);
  color:#16325b;
  margin-bottom:24px;
}

.description{
  max-width:800px;
  margin:0 auto 60px;
  font-size:1.5rem;
  line-height:1.6;
  color:#222;
}

.values{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:20px;
  max-width:1000px;
  margin:0 auto;
}

.value-card{
  background:#848586;
  border-radius:12px;
  padding:24px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff;
}
.value-card h3{ margin:8px 0 0; font-size:18px; font-weight:600; font-style:italic; }