/* ====== COAC Cañar: Página Nosotros ====== */
:root{
  --brand:#2FA443;
  --brand-600:#228a39;
  --ink:#1b2520;
  --muted:#5e6b64;
  --bg:#f6faf7;
  --card:#ffffff;
  --ring:rgba(47,164,67,.25);
  --shadow:0 12px 28px rgba(0,0,0,.10);
}

html,body{ margin:0; padding:0; background:#fafafa; color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif; }

/* ====== Contenedor principal ====== */
.about{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:56px 5%;
  background: var(--bg);
  position:relative;
}
.about::before,.about::after{
  content:""; position:absolute; border-radius:50%; filter:blur(60px); opacity:.25; z-index:0;
}
.about::before{ width:420px;height:420px;left:-140px;top:-120px;
  background:radial-gradient(closest-side,#e8f9ef,transparent 70%);}
.about::after{ width:520px;height:520px;right:-180px;bottom:-160px;
  background:radial-gradient(closest-side,#dff7e7,transparent 70%);}

/* ====== Lista -> Grid ====== */
.about > ul.about-list{
  list-style:none; margin:0; padding:0; position:relative; z-index:1;
  display:grid; gap:22px; grid-template-columns:repeat(12,1fr);
}

/* Tarjeta base */
.about li{
  background:var(--card); border:1px solid rgba(0,0,0,.05);
  border-radius:18px; box-shadow:var(--shadow); overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.about li:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.14); }

/* Media (imagen) */
.about .media{
  width:100%; height:230px; overflow:hidden; position:relative;
}
.about .media img{ width:100%; height:100%; object-fit:cover; display:block; }
.about .tag{
  position:absolute; left:14px; top:14px; z-index:2;
  background:#ffffffea; color:var(--brand-600); border:1px solid #e7f4ea;
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:.9rem;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

/* Contenido de la tarjeta */
.about .inner{ padding:22px; }
.about li h1{ margin:0 0 10px; font-size: clamp(1.35rem,1.1rem + 1.2vw,1.75rem); color:var(--brand-600); }
.about li p{ margin:10px 0; color:var(--muted); line-height:1.75; font-size:1.02rem; }

/* ====== Distribución en grid ====== */
.about li:nth-child(1){ grid-column: span 12; } /* Historia ancho completo */
.about li:nth-child(2){ grid-column: span 12; } /* Misión ancho completo */
.about li:nth-child(3){ grid-column: span 12; } /* Visión ancho completo */
.about li:nth-child(4){ grid-column: span 7; }  /* Valores */
.about li:nth-child(5){ grid-column: span 5; }  /* Objetivo */

/* Historia con borde de énfasis */
.about li.is-history .inner{ border-left:6px solid var(--brand); }

/* “Split” para Misión y Visión (imagen + texto) */
.about li.split{
  display:grid; grid-template-columns: 1.05fr 1.25fr;
}
.about li.split .media{ height:auto; min-height:240px; }
.about li.split .inner{ padding:24px; }

/* Valores en chips, sin tocar tu texto */
.about li.values .inner p{
  display:inline-block; margin:6px 8px 0 0; padding:8px 12px;
  background:#eef9f1; border:1px solid #d8f1df; border-radius:999px;
  color:var(--brand-600); font-weight:600; line-height:1;
}

/* Objetivo destacado */
.about li.goal .inner{ border-left:6px solid var(--brand); }

/* Responsivo */
@media (max-width: 960px){
  .about > ul.about-list{ grid-template-columns:repeat(12,1fr); }
  .about li:nth-child(1),
  .about li:nth-child(2),
  .about li:nth-child(3),
  .about li:nth-child(4),
  .about li:nth-child(5){ grid-column: span 12; }
  .about li.split{ grid-template-columns: 1fr; }
}