/* Hipatia STEM · hoja de las paginas legales. * * Un texto legal se lee, no se recorre: una columna estrecha, interlineado * generoso y titulares que dejan encontrar la seccion sin leerlo entero. * * POR QUE ESTA HOJA SE BASTA SOLA * * La landing guarda sus tokens y su tipografia en el CSS critico del * de index.html, no en estilos.css. Enlazar estilos.css desde aqui daba una * pagina sin fuente y sin colores —texto en serif del navegador sobre blanco— * porque las variables no existian. Se repiten los tokens a proposito: son * diez lineas y hacen que estas paginas no dependan de un fichero pensado * para otra cosa. Si la paleta cambia, cambia en los dos sitios, y por eso el * comentario de alla lo dice tambien. */ :root{ --indigo:#4F46E5; --indigo-claro:#A5B4FC; --cian:#22D3EE; --nocturno:#0F172A; --gris:#64748B; --fondo:#fff; --superficie:#F1F5F9; --texto:#0F172A; --texto-2:#64748B; --borde:#E2E8F0; --enlace:#4F46E5; --fuente:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } @media (prefers-color-scheme:dark){ :root{ --fondo:#0F172A; --superficie:#162032; --texto:#F8FAFC; --texto-2:#94A3B8; --borde:#1E293B; --enlace:#A5B4FC; } } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--fondo); color:var(--texto); font-family:var(--fuente); font-size:17px; line-height:1.6; } a{ color:var(--enlace); } :focus-visible{ outline:3px solid var(--indigo); outline-offset:2px; border-radius:4px; } @media (prefers-color-scheme:dark){ :focus-visible{ outline-color:var(--indigo-claro); } } .legal { max-width: 46rem; margin: 0 auto; padding: 2rem 1rem 4rem; } .legal-cabecera { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; justify-content: space-between; padding: 1rem 0 2rem; border-bottom: 1px solid var(--borde); margin-bottom: 2rem; } .legal h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; margin: 0 0 .5rem; } .legal h2 { font-size: 1.25rem; line-height: 1.3; margin: 2.5rem 0 .75rem; padding-top: 1.5rem; border-top: 1px solid var(--borde); } .legal h2:first-of-type { border-top: 0; padding-top: 0; } .legal h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; } .legal p, .legal li { line-height: 1.7; color: var(--texto-2); } .legal li { margin-bottom: .5rem; } .legal strong { color: var(--texto); } .legal .entrada { font-size: 1.05rem; color: var(--texto); } /* Bloque de identidad del responsable. */ .legal dl { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .5rem 1.5rem; margin: 1rem 0; padding: 1.25rem; background: var(--superficie); border-radius: 12px; } .legal dt { font-weight: 600; color: var(--texto); } .legal dd { margin: 0; color: var(--texto-2); } /* Un dato que falta se ve como lo que es: un hueco, no un valor. */ .sin-dato { font-style: italic; color: var(--gris); text-decoration: underline dotted; text-underline-offset: 3px; } /* Aviso de documento incompleto. Llamativo a proposito: esta pensado para que * moleste hasta que se rellene, no para poder convivir con el. */ .legal-incompleto { margin: 0 0 2rem; padding: 1rem 1.25rem; border-radius: 12px; border: 2px solid #D97706; background: rgba(217, 119, 6, .12); color: var(--texto); line-height: 1.6; font-size: .95rem; } .legal-pie { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--borde); font-size: .9rem; } .legal-pie a { color: var(--enlace); } .legal-idiomas { display: flex; gap: .25rem; } .legal-idiomas button { font: inherit; font-size: .85rem; padding: .4rem .75rem; min-height: 44px; border: 1px solid var(--borde); background: transparent; color: var(--texto-2); border-radius: 8px; cursor: pointer; } .legal-idiomas button[aria-pressed='true'] { background: var(--indigo); border-color: var(--indigo); color: #fff; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }