/* Los documentos legales, con la misma cara que la aplicación. * * Van en un archivo aparte y no en cada página porque son dos páginas con el * mismo diseño, y porque la CSP del sitio permite hojas de estilo propias. * * Siguen el tema que la persona escogió en el simulador: /tema.js lee lo * guardado y le pone data-tema al antes de pintar. Alguien que usa la * app en oscuro y hace clic en "Privacidad" no debe recibir un fogonazo. */ :root { --papel: #E9ECF1; --tarjeta: #F4F6F8; --tinta: #0D1B2A; --suave: #5A6B7D; --canto: #D3D9E2; --sol: #B8801A; --verde: #2E7D32; } html[data-tema="oscuro"] { --papel: #0D1B2A; --tarjeta: #152536; --tinta: #F4F6F8; --suave: #8FA2B5; --canto: #27394D; --sol: #F5C542; --verde: #5FBF63; } html { background: var(--papel); } body { margin: 0; background: radial-gradient(1200px 600px at 78% -12%, rgba(196,114,10,.07) 0%, transparent 58%), radial-gradient(900px 620px at -12% 20%, rgba(15,115,85,.05) 0%, transparent 60%); color: var(--tinta); font-family: 'Montserrat', system-ui, -apple-system, sans-serif; line-height: 1.7; -webkit-font-smoothing: antialiased; } html[data-tema="oscuro"] body { background: radial-gradient(1200px 600px at 78% -12%, rgba(240,166,43,.09) 0%, transparent 58%), radial-gradient(900px 620px at -12% 20%, rgba(52,196,141,.06) 0%, transparent 60%); } .hoja { max-width: 680px; margin: 0 auto; padding: 34px 22px 70px; } header { display: flex; align-items: center; gap: 13px; margin-bottom: 34px; } header svg { height: 40px; width: auto; display: block; } header a { text-decoration: none; color: inherit; } .marca { font-weight: 800; font-size: 16px; letter-spacing: -.01em; } .volver { font-size: 12px; color: var(--suave); margin-top: 1px; } h1 { font-size: 29px; font-weight: 800; letter-spacing: -.025em; margin: 0 0 6px; line-height: 1.2; } .fecha { font-size: 12px; color: var(--suave); margin: 0 0 30px; font-family: 'IBM Plex Mono', ui-monospace, monospace; } /* El resumen de arriba. En un documento legal es la única parte que la gente lee de verdad, así que dice la verdad completa y no una versión bonita. */ .resumen { background: var(--tarjeta); border: 1px solid var(--canto); border-left: 3px solid var(--verde); border-radius: 11px; padding: 17px 19px; margin: 0 0 34px; } .resumen p:last-child { margin-bottom: 0; } h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--sol); margin: 38px 0 11px; } h3 { font-size: 15px; font-weight: 700; margin: 24px 0 7px; } p { font-size: 14.5px; margin: 0 0 13px; color: var(--suave); } .resumen p { color: var(--tinta); font-size: 14.5px; } strong { color: var(--tinta); font-weight: 600; } ul { padding-left: 0; list-style: none; margin: 0 0 15px; display: grid; gap: 8px; } li { font-size: 14px; color: var(--suave); padding-left: 18px; position: relative; } li::before { content: '·'; position: absolute; left: 3px; top: -1px; color: var(--verde); font-weight: 700; font-size: 20px; } code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; background: var(--tarjeta); border: 1px solid var(--canto); border-radius: 5px; padding: 1px 5px; color: var(--tinta); } a { color: var(--sol); } table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 13.5px; } th, td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--canto); vertical-align: top; } th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--sol); font-weight: 700; } td { color: var(--suave); } td:first-child { color: var(--tinta); font-weight: 600; white-space: nowrap; } .tabla { overflow-x: auto; } footer { margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--canto); font-size: 12.5px; color: var(--suave); } footer a { margin-right: 12px; }