html, body { margin: 0; background: #FAF8F3; }
.lienzo { box-sizing: border-box; width: 1200px; height: 1200px; padding: 58px 60px 40px; display: flex; flex-direction: column; background: #FAF8F3; }
.lienzo.ancho { height: 1000px; }
h1 { font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; font-size: 52px; line-height: 1.08; letter-spacing: -0.4px; margin: 0 0 16px; color: #1A1A1A; }
.sub { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-weight: 400; font-size: 31px; line-height: 1.25; color: #4A4A4A; margin: 0 0 26px; }
#plot { flex: 1; position: relative; min-height: 0; }
#plot svg { display: block; }
.pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; margin-top: 20px; border-top: 1.5px solid #E0DCC8; padding-top: 16px; }
.nota { font-family: 'Source Sans 3', sans-serif; font-size: 20px; line-height: 1.3; color: #8A8579; }
.nota b { color: #4A4A4A; font-weight: 700; }
.firma { text-align: right; font-family: 'Source Sans 3', sans-serif; color: #BE5D32; line-height: 1.04; white-space: nowrap; }
.firma b { display: block; font-size: 34px; font-weight: 700; }
.firma span { display: block; font-size: 27px; font-weight: 600; }

/* ---- versión web ---- */
body.web { background: #FAF8F3; min-height: 100vh; }
.web .barra { max-width: 1200px; margin: 0 auto; padding: 16px 0 10px; font-family: 'Source Sans 3', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .14em; }
.web .barra a { color: #1A1A1A; text-decoration: none; }
.web .marco { margin: 0 auto; overflow: hidden; }
.web .lienzo { transform-origin: 0 0; }
.web .acciones { max-width: 1200px; margin: 12px auto 40px; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between; font-family: 'Source Sans 3', sans-serif; }
.web .boton { background: #1A1A1A; color: #FFFFFF; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 11px 18px; border-radius: 3px; }
.web .todos { color: #BE5D32; font-weight: 600; font-size: 16px; text-decoration: none; }
.web [data-tip] { cursor: pointer; }
.web [data-tip]:hover { opacity: .82; }
.web path[data-c]:hover { stroke: #1A1A1A; stroke-width: 1.4; }
.tooltip { position: fixed; z-index: 10; display: none; pointer-events: none; max-width: 280px; background: #1A1A1A; color: #FFFFFF; font-family: 'Source Sans 3', sans-serif; font-size: 14px; line-height: 1.35; padding: 8px 11px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.tooltip b { font-weight: 700; }