/* ========================================================================== pantheonapps.org Un sistema, varias apps. El sitio es de Pantheon —índigo—, y cada app adopta su propio acento con `data-app` en , para que quien llega desde una aplicación reconozca su color. ========================================================================== */ :root{ --fondo:#F7F7FA; --papel:#FFFFFF; --papel-2:#EFF0F5; --tinta:#14161D; --tinta-2:#494D5C; --tinta-3:#787D8F; --linea:#DCDEE7; --linea-2:#BCBFCE; --acento:#3E4F7A; --acento-2:#2C3A5E; --acento-suave:#E7EBF5; --peligro:#9B2C1E; --peligro-suave:#FAE6E2; --sombra:0 1px 2px rgba(20,22,29,.05), 0 10px 28px -20px rgba(20,22,29,.4); color-scheme:light; } /* Crisol: el lima de la aplicación. */ :root[data-app="crisol"]{ --acento:#4F6B0B; --acento-2:#3A4E07; --acento-suave:#EDF4D6; } @media (prefers-color-scheme: dark){ :root{ --fondo:#0F1016; --papel:#171921; --papel-2:#1D202B; --tinta:#E9EAF0; --tinta-2:#B2B6C4; --tinta-3:#7F8496; --linea:#282C3A; --linea-2:#3D4256; --acento:#9DB2E0; --acento-2:#B8C7EA; --acento-suave:#1A2032; --peligro:#F0907E; --peligro-suave:#2B1714; --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -22px rgba(0,0,0,.9); color-scheme:dark; } :root[data-app="crisol"]{ --acento:#C4DF64; --acento-2:#D7ED8B; --acento-suave:#232A17; } } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--fondo); color:var(--tinta); font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } .franja{max-width:760px;margin:0 auto;padding:0 24px} .franja.ancha{max-width:1000px} /* ---------- Cabecera ---------- */ .cabecera{border-bottom:1px solid var(--linea);background:var(--papel)} .cabecera .franja{ display:flex;align-items:center;justify-content:space-between; gap:16px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap; } .logo{ font-family:"Oswald",sans-serif;font-weight:600;font-size:18px; letter-spacing:.14em;text-transform:uppercase;color:var(--tinta); text-decoration:none;display:inline-flex;align-items:center;gap:9px; } .logo .punto{width:9px;height:9px;border-radius:2px;background:var(--acento)} .menu{display:flex;gap:20px;flex-wrap:wrap} .menu a{color:var(--tinta-2);text-decoration:none;font-size:14.5px} .menu a:hover{color:var(--acento);text-decoration:underline} .menu a:focus-visible,.logo:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:2px} /* ---------- Texto ---------- */ main{padding:52px 0 80px} h1{ font-family:"Oswald",sans-serif;font-weight:600; font-size:clamp(2rem,5vw,2.9rem);line-height:1.08; letter-spacing:.01em;margin:0 0 14px;text-wrap:balance; } h2{ font-family:"Oswald",sans-serif;font-weight:500; font-size:clamp(1.22rem,2.6vw,1.5rem);line-height:1.2; margin:44px 0 12px;letter-spacing:.02em;text-wrap:balance; } h3{font-family:"Source Sans 3",sans-serif;font-weight:600;font-size:1.02rem;margin:26px 0 6px} p,li{max-width:68ch} p{margin:0 0 16px} ul,ol{padding-left:22px;margin:0 0 16px} li{margin-bottom:7px} a{color:var(--acento-2)} a:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:2px} strong{font-weight:600} .entradilla{font-size:1.12rem;color:var(--tinta-2);max-width:62ch} .menudo{font-size:14.5px;color:var(--tinta-3)} .fecha{ font-size:13.5px;color:var(--tinta-3);margin:0 0 34px;line-height:1.7; padding-bottom:22px;border-bottom:1px solid var(--linea); } /* ---------- Catálogo ---------- */ .portada{padding:20px 0 44px;border-bottom:1px solid var(--linea);margin-bottom:44px} .rotulo{ font-family:"Source Sans 3",sans-serif;font-size:12px;font-weight:600; letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-3); margin:0 0 18px; } .rejilla{display:grid;gap:18px;grid-template-columns:1fr} @media (min-width:720px){.rejilla{grid-template-columns:1fr 1fr}} .app{ display:block;text-decoration:none;color:inherit; background:var(--papel);border:1px solid var(--linea); border-radius:14px;padding:26px 26px 22px; border-top:3px solid var(--tono, var(--acento)); box-shadow:var(--sombra); } .app:hover{border-color:var(--linea-2)} .app:focus-visible{outline:2px solid var(--tono, var(--acento));outline-offset:3px} .app h3{ font-family:"Oswald",sans-serif;font-weight:600;font-size:1.5rem; margin:12px 0 8px;letter-spacing:.01em;color:var(--tinta); } .app p{font-size:15.3px;color:var(--tinta-2);margin:0 0 16px} .app .ir{font-size:14.5px;font-weight:600;color:var(--tono, var(--acento-2))} .app .ir::after{content:" →"} .app.crisol{--tono:#6E9210} .app.ambar{--tono:#8A5B12} .app.indigo{--tono:#3E4F7A} .app.turquesa{--tono:#0F6B6B} .app.granate{--tono:#8A2B3E} @media (prefers-color-scheme: dark){ .app.crisol{--tono:#C4DF64} .app.ambar{--tono:#E8B76A} .app.indigo{--tono:#9DB2E0} .app.turquesa{--tono:#6FD1CC} .app.granate{--tono:#E58CA0} } .estado{ display:inline-block;font-size:11.5px;font-weight:600; letter-spacing:.09em;text-transform:uppercase; padding:4px 10px;border-radius:99px;border:1px solid var(--linea-2); color:var(--tinta-3); } .estado.publicada{ border-color:transparent;background:var(--acento-suave);color:var(--acento-2); } /* ---------- Piezas ---------- */ .tarjeta{ background:var(--papel);border:1px solid var(--linea); border-radius:12px;padding:26px 28px;margin:26px 0;box-shadow:var(--sombra); } .tarjeta h2{margin-top:0} .tarjeta :last-child{margin-bottom:0} .aviso{ border-left:3px solid var(--acento);background:var(--acento-suave); padding:18px 22px;border-radius:0 10px 10px 0;margin:26px 0; } .aviso.fuerte{border-left-color:var(--peligro);background:var(--peligro-suave)} .aviso :last-child{margin-bottom:0} .aviso h3{margin-top:0} .tabla-envoltura{ overflow-x:auto;border:1px solid var(--linea); border-radius:10px;margin:22px 0;background:var(--papel); } table{border-collapse:collapse;width:100%;min-width:480px;font-size:15.3px} th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--linea);vertical-align:top} th{ background:var(--papel-2);font-weight:600;font-size:12.5px; text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3); } tr:last-child td{border-bottom:none} td p{margin:0} .boton{ display:inline-block;background:var(--acento);color:var(--papel); font-weight:600;text-decoration:none;padding:12px 22px;border-radius:8px; border:1px solid var(--acento);font-size:15.5px; } .boton:hover{background:var(--acento-2);border-color:var(--acento-2)} .boton:focus-visible{outline:2px solid var(--tinta);outline-offset:2px} .boton.hueco{background:transparent;color:var(--acento-2);border-color:var(--linea-2)} .boton.hueco:hover{background:var(--papel-2)} .botones{display:flex;gap:11px;flex-wrap:wrap;margin:26px 0} .pasos{counter-reset:paso;list-style:none;padding:0} .pasos li{counter-increment:paso;position:relative;padding-left:44px;margin-bottom:16px} .pasos li::before{ content:counter(paso);position:absolute;left:0;top:1px; width:28px;height:28px;border-radius:50%; background:var(--acento-suave);color:var(--acento-2); font-family:"Oswald",sans-serif;font-weight:500;font-size:14px; display:grid;place-items:center; } /* ---------- Pie ---------- */ .pie{ border-top:1px solid var(--linea);background:var(--papel); padding:30px 0;font-size:14.5px;color:var(--tinta-3); } .pie .franja{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .pie a{color:var(--tinta-2)} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}