/* =========================================================================== LA GRAN TRANSFERENCIA DEL ALQUILER — estilos (ver README.md para la documentación completa del proyecto) HTML plano para CMS: sin ni reset global (el box-sizing va inline en el HTML). TODAS las clases/ids llevan el prefijo `grantrans-` para no colisionar con los estilos del CMS. Aquí está TODO el CSS del proyecto (sankey + scroll + barras); no hay estilos inline en los HTML. =========================================================================== */ /* =========================================================================== BLOQUE 1 — SCROLLYTELLING (scopeado bajo #grantrans-scrolly) =========================================================================== */ #grantrans-scrolly { position: relative; } #grantrans-scrolly figure { position: absolute; top: 0; left: 0; width: 100%; margin: 0; background: #fff; overflow: hidden; z-index: 0; /* position y top los gestiona el JS (actualizarFigure) para emular sticky cuando el CMS pone overflow-x:hidden en el body, que rompe position:sticky */ } /* El solapamiento de los textos sobre el gráfico lo da el figure fijado por JS: NO se usa margin-top negativo en el article. */ #grantrans-scrolly article { position: relative; z-index: 10; pointer-events: none; } #grantrans-scrolly .grantrans-step { margin: 12% 4%; /* izquierda/derecha reducidos para que la caja sea más grande */ /* un step por pantalla (nunca dos a la vez). svh = small viewport height: altura ESTABLE en móvil → la sección no cambia de alto al mostrarse/ocultarse la barra de URL, así el contenido de abajo no se mueve. 100vh = fallback. */ min-height: 100vh; min-height: 100svh; display: flex; align-items: center; opacity: 0.2; transition: opacity 0.4s ease; pointer-events: none; } /* Alineación del step a la derecha */ #grantrans-scrolly .grantrans-step--derecha { justify-content: flex-end; } /* Alineación al centro */ #grantrans-scrolly .grantrans-step--centro { justify-content: center; } #grantrans-scrolly .grantrans-step.grantrans-active { opacity: 1; } #grantrans-scrolly .grantrans-step-inner { pointer-events: auto; border-left: 3px solid #c51b7d; padding: 14px 16px; background: #fff; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.08); max-width: 400px; font-family: 'Encode Sans', sans-serif; } #grantrans-scrolly .grantrans-step--derecha .grantrans-step-inner { border-left: none; border-right: 3px solid #c51b7d; } #grantrans-scrolly .grantrans-step-num { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #c51b7d; margin-bottom: 8px; } #grantrans-scrolly .grantrans-step-text { font-size: 14px; line-height: 1.65; text-align: left; color: #333; } /* =========================================================================== TÍTULOS / SUBTÍTULOS / FUENTE (comunes a sankeys y barras) =========================================================================== */ .grantrans-titulo { font-family: 'Encode Sans', sans-serif; font-size: 22px; font-weight: 700; color: #000; line-height: 1.3; margin: 28px 0 6px; text-align: left; padding: 0; } .grantrans-subtitulo { font-family: 'Encode Sans', sans-serif; font-size: 14px; color: #555; line-height: 20px; margin: 0 0 12px; max-width: 820px; text-align: left; padding: 0; } .grantrans-fuente { font-family: 'Encode Sans', sans-serif; font-size: 12px; color: #181818; margin: 6px 0 0; text-align: left; padding: 0; } /* =========================================================================== SANKEY — botón "Ver la transferencia" + tooltip (los nodos/bandas se estilan inline desde el JS) =========================================================================== */ .grantrans-boton-play { margin: 0 0 12px 0; display: inline-block; background: #8e0152; color: #fff; padding: 7px 18px; border: none; border-radius: 3px; cursor: pointer; font-family: 'Encode Sans', sans-serif; font-size: 13px; font-weight: 600; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15); user-select: none; white-space: nowrap; } .grantrans-tooltip { position: fixed; pointer-events: none; display: none; background: #fff; border-radius: 0; /* recto, sin esquinas redondeadas */ padding: 8px 11px; font-family: 'Encode Sans', sans-serif; font-size: 12px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.14); max-width: 190px; z-index: 9999; line-height: 1.55; } .grantrans-tooltip-titulo { font-weight: 700; font-size: 13px; margin-bottom: 3px; } .grantrans-tooltip-importe { color: #1a1a1a; font-weight: 600; } .grantrans-tooltip-pct { color: #888; font-size: 11px; } /* =========================================================================== BARRAS APILADAS (evolución por año) =========================================================================== */ .grantrans-barras-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 6px; padding-left: 62px; /* alinea con el área del gráfico (= margen izquierdo del SVG) */ } .grantrans-barras-li { display: flex; align-items: center; gap: 5px; font-family: 'Encode Sans', sans-serif; font-size: 12px; color: #444; cursor: pointer; transition: opacity 0.15s; user-select: none; } .grantrans-barras-li--atenuado { opacity: 0.25; } .grantrans-barras-li--destacado { font-weight: 600; } .grantrans-barras-li-color { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; } .grantrans-barras-tooltip { position: absolute; display: none; background: #fff; border-radius: 0; /* mismo estilo que el tooltip del sankey (recto, sin borde) */ padding: 8px 11px; pointer-events: none; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.14); z-index: 9999; min-width: 160px; } .grantrans-barras-tt-año { font-family: 'Encode Sans', sans-serif; font-size: 13px; font-weight: 700; color: #1a1a1a; margin: 0 0 2px; } .grantrans-barras-tt-cat { font-family: 'Encode Sans', sans-serif; font-size: 12px; font-weight: 600; margin: 0 0 7px; } .grantrans-barras-tt-tabla { font-family: 'Encode Sans', sans-serif; font-size: 12px; border-collapse: collapse; width: 100%; } .grantrans-barras-tt-tabla td { padding: 2px 0; color: #444; } .grantrans-barras-tt-tabla td:last-child { text-align: right; padding-left: 12px; color: #1a1a1a; white-space: nowrap; } .grantrans-barras-tt-sep td { border-top: 1px solid #eee; padding-top: 5px; margin-top: 3px; } /* =========================================================================== MÓVIL =========================================================================== */ @media (max-width: 650px) { #grantrans-scrolly .grantrans-step-inner { max-width: 90vw; } } @media (max-width: 640px) { .grantrans-barras-leyenda { padding-left: 0; gap: 5px 10px; } }