/* ==========================================================================
   MediActiv - about.css - Pagina "Sobre MediActiv" (ES #108 / EN #798).
   Mismo lenguaje visual y misma retícula (1280 + gutter) que el resto de la web.
   ========================================================================== */

/* ---- Intro (hero): banda gris suave a todo el ancho, contenido centrado ---- */
.mc-about__intro{max-width:none;background:var(--mc-bg-2);padding-block:clamp(3.2rem,6vw,5rem) clamp(1.5rem,3vw,2.2rem)}
.mc-about__intro > *{max-width:820px;margin-left:auto;margin-right:auto}
/* main.css fija margin:.6rem 0 en el H1 y lo sacaba del centro: lo devolvemos al eje. */
.mc-about__intro .mc-h1{margin-inline:auto}

/* La banda del concepto continua la del hero: sin costura blanca entre ambas. */
.mc-about__intro + .mc-about__concept{margin-top:0;padding-top:clamp(2rem,4vw,3rem)}

/* ---- Nuestra historia: capitulos editoriales (los tres fundadores) ---- */
.mc-about__story{padding-block:clamp(3rem,6vw,5rem)}
.mc-about__story .mc-sechead{max-width:900px}
.mc-story__intro{max-width:680px;margin:0 auto clamp(2.5rem,5vw,4rem);padding-inline:var(--mc-gut);text-align:center;color:var(--mc-muted);line-height:1.8}
.mc-story__intro strong{color:var(--mc-ink)}

/* Cada capitulo = tarjeta (mismo componente que .mc-world / .mc-founder),
   sobre bandas de fondo alterno para romper el bloque de texto. */
.mc-story__list{display:flex;flex-direction:column}
.mc-story__band{padding:clamp(1.6rem,3vw,2.6rem) var(--mc-gut)}
.mc-story__band.is-alt{background:var(--mc-bg-2)}
.mc-story__card{max-width:780px;margin-inline:auto;background:var(--mc-bg-alt);border:1px solid var(--mc-line);border-radius:var(--mc-radius);padding:clamp(1.8rem,3vw,2.8rem)}
.mc-story__body{max-width:none}
.mc-story__body .mc-eyebrow{margin-bottom:.6rem}
.mc-story__title{font-family:var(--mc-serif);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.25;color:var(--mc-ink);margin:0 0 1.1rem}
.mc-story__body .mc-rte{color:var(--mc-muted);line-height:1.8}
.mc-story__body .mc-rte p{margin:0 0 1rem}
.mc-story__body .mc-rte p:last-child{margin-bottom:0}
.mc-story__body .mc-rte strong{color:var(--mc-ink)}

/* Con imagen: la tarjeta se parte en dos (imagen / texto). */
.mc-story__card.has-media{max-width:var(--mc-wrap);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
.mc-story__card.has-media .mc-story__body{max-width:none}
.mc-story__img{width:100%;height:auto;display:block;border-radius:var(--mc-radius)}

/* ---- Inspiracion: tres mundos (tarjetas, mismo patron que fundadores) ---- */
.mc-about__worlds{padding-block:clamp(3rem,6vw,5rem)}
.mc-about__worlds .mc-sechead{max-width:900px}
.mc-worlds__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.mc-world{background:var(--mc-bg-alt);border:1px solid var(--mc-line);border-radius:var(--mc-radius);padding:clamp(1.6rem,2.5vw,2.4rem)}
.mc-world__title{font-family:var(--mc-serif);font-weight:700;font-size:1.25rem;margin:0 0 .6rem;color:var(--mc-ink)}
.mc-world p{color:var(--mc-muted);font-size:.95rem;line-height:1.7;margin:0}

/* ---- Compromiso: cuatro pilares en tarjetas (mismo patron que .mc-world) ---- */
.mc-about__commit{padding-block:clamp(3rem,6vw,5rem)}
.mc-about__commit .mc-sechead{max-width:900px}
.mc-commit__intro{max-width:680px;margin:0 auto clamp(2rem,4vw,3rem);text-align:center;color:var(--mc-muted);line-height:1.8}
.mc-commit__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.mc-commit-card{background:var(--mc-bg-alt);border:1px solid var(--mc-line);border-radius:var(--mc-radius);padding:clamp(1.5rem,2.4vw,2.1rem)}
.mc-commit-card__title{font-family:var(--mc-serif);font-weight:700;font-size:1.1rem;line-height:1.3;color:var(--mc-ink);margin:0 0 .6rem}
.mc-commit-card p{color:var(--mc-muted);font-size:.95rem;line-height:1.7;margin:0}

/* ---- Cierre: banda gris centrada (mismo patron que mc-about__concept) ---- */
.mc-about__closing{text-align:center;background:var(--mc-bg-2);padding:clamp(2.8rem,5vw,4.5rem) var(--mc-gut);margin-top:clamp(2rem,4vw,3.5rem)}
.mc-about__closing-inner{max-width:680px;margin:0 auto;color:var(--mc-muted);line-height:1.75}
.mc-about__closing-inner strong{color:var(--mc-ink)}

@media(max-width:1024px){
	.mc-commit__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
	.mc-worlds__grid{grid-template-columns:1fr}
	.mc-story__card.has-media{grid-template-columns:1fr;gap:1.5rem}
}
@media(max-width:560px){
	.mc-commit__grid{grid-template-columns:1fr}
}