/* Magoya — CSS de renderizado de slides. Compartido por index.html (app) y modules.html (catálogo). */

/* slide base */
.slide { width:100%; height:100%; padding:8% 8% 7%; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.slide.dark { background:var(--green-950); color:var(--cream-50); justify-content:center; }
.slide .kicker { font-family:var(--font-mono); font-size:clamp(10px,1.2vw,13px); letter-spacing:.12em; text-transform:uppercase; color:var(--gray-600); }
.slide.dark .kicker { color:#8FA396; }
.slide h2 { font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; line-height:1.05; }
.slide .body { color:var(--gray-600); margin-top:var(--space-3); max-width:46ch; font-size:clamp(13px,1.6vw,18px); }
.slide.dark .body { color:var(--cream-200); }
.green { color:var(--emerald-600); }
.slide.dark .green { color:var(--emerald-400); }
.num { position:absolute; top:5%; right:6%; font-family:var(--font-mono); font-size:12px; color:var(--gray-400); }
.slide.dark .num { color:#5d7468; }

.cover-motif { position:absolute; right:3%; top:14%; width:40%; max-width:360px; opacity:.95; }
.cover-foot { position:absolute; left:7%; bottom:6%; font-family:var(--font-mono); font-size:11px; color:#8FA396; }

.cols { display:grid; gap:var(--space-4); margin-top:auto; }
.col { border-top:3px solid var(--emerald-500); padding-top:var(--space-3); }
.col h4 { font-family:var(--font-display); font-weight:700; font-size:clamp(13px,1.5vw,18px); }
.col p { color:var(--gray-600); font-size:clamp(11px,1.2vw,14px); margin-top:6px; }

.logos { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-3); margin-top:auto; align-items:center; }
.logos .cell { background:#fff; border:1px solid var(--color-border,#e7e7e2); border-radius:var(--radius-md); height:84px; display:flex; align-items:center; justify-content:center; padding:14px; }
.logos .cell img { max-height:40px; max-width:100%; }
.proofstats { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); margin-top:auto; }
.proofstats div { background:var(--emerald-500); color:var(--ink-900); border-radius:var(--radius-md); padding:var(--space-4); font-family:var(--font-display); font-weight:700; font-size:clamp(13px,1.5vw,18px); }

.metric { margin-top:auto; }
.metric .hero { font-family:var(--font-display); font-weight:800; font-size:clamp(48px,11vw,110px); line-height:.85; letter-spacing:-.04em; }
.metric .hero .dot { color:var(--emerald-500); }
.metric .hlabel { color:var(--gray-600); font-size:clamp(12px,1.4vw,16px); margin-top:4px; }
.metric .sup { display:flex; gap:var(--space-5); margin-top:var(--space-4); flex-wrap:wrap; }
.metric .sup div b { font-family:var(--font-display); font-weight:800; font-size:clamp(16px,2vw,24px); }
.metric .sup div span { display:block; color:var(--gray-600); font-size:11px; }

.process { display:flex; align-items:stretch; gap:0; margin-top:auto; }
.process .step { flex:1; }
.process .step h4 { font-family:var(--font-display); font-weight:800; font-size:clamp(13px,1.5vw,19px); }
.process .step .out { display:inline-block; margin-top:8px; background:rgba(0,222,104,.16); color:var(--emerald-700); font-weight:600; font-size:11px; padding:.25em .7em; border-radius:var(--radius-full); }
.process .arrow { align-self:center; color:var(--emerald-500); font-size:20px; padding:0 10px; }

.cases { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); margin-top:auto; }
.case { border:1px solid var(--color-border,#e7e7e2); border-radius:var(--radius-md); padding:var(--space-4); }
.case .ct { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-500,#949494); }
.case h4 { font-family:var(--font-display); font-weight:700; font-size:clamp(12px,1.3vw,15px); margin:4px 0; }
.case p { color:var(--gray-600); font-size:11px; }
.case .res { color:var(--emerald-600); font-weight:700; font-size:13px; margin-top:6px; }

.cta-btn { align-self:flex-start; margin-top:var(--space-5); background:var(--ink-900); color:#fff; font-weight:600; border-radius:var(--radius-full); padding:.7em 1.4em; }

/* index / agenda */
.agenda { list-style:none; margin-top:var(--space-4); display:grid; gap:10px; }
.agenda li { display:flex; align-items:baseline; gap:14px; font-family:var(--font-display); font-weight:700; font-size:clamp(13px,1.9vw,22px); border-bottom:1px solid var(--color-border,#e7e7e2); padding-bottom:8px; }
.agenda li span { color:var(--emerald-600); font-family:var(--font-mono); font-size:12px; font-weight:400; }
/* split-media (foto B&N) */
.slide.split { padding:0; flex-direction:row; }
.slide.split .photo { width:42%; background:#cfcfca; filter:grayscale(1); display:flex; align-items:flex-end; justify-content:center; color:#7a7a74; font-family:var(--font-mono); font-size:12px; padding-bottom:18px; }
.slide.split .splitbody { width:58%; padding:7%; display:flex; flex-direction:column; justify-content:center; }
.slide.split .pill { align-self:flex-start; margin-top:var(--space-4); background:var(--emerald-500); color:var(--ink-900); font-weight:600; font-size:13px; padding:.4em 1em; border-radius:var(--radius-full); }
/* quote */
.bigquote { font-family:var(--font-display); font-weight:800; font-size:clamp(20px,3.4vw,40px); letter-spacing:-.02em; line-height:1.12; max-width:20ch; }
.qauthor { margin-top:var(--space-4); font-weight:700; }
.qauthor span { color:var(--gray-600); font-weight:400; }
/* map (Estratos) */
.mapwrap { margin-top:auto; }
.regions { display:grid; gap:8px; }
.region { color:var(--ink-900); font-weight:700; border-radius:var(--radius-full); padding:.4em 1.1em; font-size:clamp(12px,1.4vw,16px); background:var(--emerald-500); }
.region:nth-child(even){ background:var(--green-900); color:var(--cream-50); }
.markers { display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-3); color:var(--emerald-600); font-size:12px; font-family:var(--font-mono); }

/* --- composición / aires --- */
/* --- énfasis (.amp) — el bloque más importante --- */
.amp { transform:scale(1.06); transform-origin:left center; }
h2.amp { color:var(--emerald-600); }
.slide.dark h2.amp { color:var(--emerald-400); }
.metric .hero.amp { font-size:clamp(56px,13vw,140px); }
.body.amp { color:var(--ink-900); font-weight:600; }
.bigquote.amp { color:var(--emerald-700); }
/* --- variantes de template (data-tpl) --- */
.slide.split[data-tpl="split-right"] { flex-direction:row-reverse; }
.slide.split[data-tpl="split-centered"] { flex-direction:column; }
.slide.split[data-tpl="split-centered"] .photo { width:100%; height:42%; }
.slide.split[data-tpl="split-centered"] .splitbody { width:100%; padding:6% 8%; }
.slide[data-tpl="pillars-stack"] .cols { grid-template-columns:1fr !important; }
.slide[data-tpl$="-centered"] { align-items:center; text-align:center; }
.slide[data-tpl$="-centered"] .cols, .slide[data-tpl$="-centered"] .metric { text-align:left; }
.photo[style*="url"] { color:transparent; }