/* 365Graficas — estilos de la página: sobre-mi.html */
.about-hero{padding-block:clamp(48px,7vw,96px) clamp(48px,6vw,80px)}
.about-hero .grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px 72px;align-items:end}
@media (max-width:860px){.about-hero .grid{grid-template-columns:1fr}}
.about-hero h1{margin-top:16px}
.about-hero h1 span{color:var(--verde-txt)}
.about-hero .lead{margin-top:24px}
.idcard{background:var(--ink);color:var(--bg);border-radius:20px;padding:28px;display:grid;gap:18px}
.idcard svg{width:52px;--sheet:var(--bg)}
.idcard dl{margin:0;display:grid;gap:14px}
.idcard dt{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.idcard dd{margin:3px 0 0;font-weight:600}
.tools-sec{background:var(--bg2)}
.toolgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.toolgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:grid;gap:8px;align-content:start}
.tool b{font-size:1.02rem}
.tool span{font-size:.86rem;color:var(--ink2)}
.tool .lvl{display:flex;gap:4px;margin-top:4px}
.tool .lvl i{width:22px;height:6px;border-radius:3px;background:var(--line)}
.tool .lvl i.on{background:var(--acc)}
.course-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:820px){.course-groups{grid-template-columns:1fr}}
.cg{border-top:2px solid var(--ink);padding-top:22px;display:grid;gap:14px;align-content:start}
.cg h3{display:flex;align-items:center;gap:10px}
.cg h3 i{width:12px;height:12px;border-radius:3px}
.cg ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cg li{padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink2);font-size:.95rem}
.next{margin-top:28px;font-size:.92rem;color:var(--ink2)}
.cta{padding-top:0}
.cta .box{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:clamp(28px,5vw,48px);border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.cta .box div{display:flex;gap:10px;flex-wrap:wrap}