en 8 articulos, 6 , 6
, 11
), pero aqui no habia una sola regla y salian con el
estilo de fabrica del navegador. */
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
background: #f2f5f7;
border: 1px solid var(--line);
border-radius: 4px;
padding: 1px 5px;
white-space: nowrap;
}
pre {
background: #f2f5f7;
border: 1px solid var(--line);
border-radius: 8px;
padding: 14px 16px;
margin: 20px 0 26px;
overflow-x: auto;
}
/* Dentro de un bloque el recuadro sobra, y ahi si tiene que poder partirse. */
pre code {
background: none;
border: 0;
padding: 0;
white-space: pre;
font-size: 14px;
}
blockquote {
margin: 20px 0;
padding: 4px 0 4px 18px;
border-left: 4px solid var(--band-btn);
color: #4a555e;
}
blockquote p { margin: 0 0 8px; }
blockquote p:last-child { margin-bottom: 0; }
hr {
border: 0;
border-top: 1px solid var(--line);
margin: 32px 0;
}
footer {
border-top: 1px solid var(--line);
margin-top: 48px;
padding: 18px 0 30px;
font-size: 14px;
color: #4a555e;
}
/* ---- Tabla de contenido ---- */
nav.toc { margin: 0 0 30px; }
nav.toc ul { margin: 0; padding-left: 20px; }
nav.toc li { margin: 3px 0; }
/* ---- Home ---- */
/* El fondo de garabatos y el color son los mismos del home en vivo: el patron
es un mosaico de 300x186 al 48% de opacidad sobre el celeste. Va en un
::before para que la opacidad no se le pegue al texto. */
.hero {
position: relative;
background: var(--hero);
padding: 62px 0 46px;
text-align: center;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: url(imagenes/patron-fondo.png) repeat;
opacity: 0.48;
pointer-events: none;
}
.hero .inner { position: relative; }
.hero .logo {
width: 250px;
max-width: 62%;
height: auto;
margin: 0 auto 16px;
display: block;
}
.hero h1 { margin: 0 0 6px; }
.hero p.lead {
margin: 0 auto 26px;
max-width: 640px;
font-size: 18px;
color: #3d4a52;
}
.buscador { max-width: 560px; margin: 0 auto; position: relative; }
.buscador input {
width: 100%;
font: inherit;
font-size: 17px;
padding: 14px 20px;
border: 1px solid var(--band-btn);
border-radius: var(--radio);
background: #ffffff;
color: var(--ink);
}
.buscador input:focus {
outline: 2px solid var(--section);
outline-offset: 1px;
}
.resultados {
list-style: none;
margin: 8px 0 0;
padding: 0;
text-align: left;
background: #ffffff;
border: 1px solid var(--card-line);
border-radius: 16px;
box-shadow: 0 6px 22px rgba(47, 57, 65, 0.14);
overflow: hidden;
max-height: 62vh;
overflow-y: auto;
position: absolute;
left: 0;
right: 0;
z-index: 5;
}
.resultados:empty { display: none; }
.resultados li { border-bottom: 1px solid var(--line); }
.resultados li:last-child { border-bottom: 0; }
.resultados a {
display: block;
padding: 11px 16px;
text-decoration: none;
color: var(--ink);
}
.resultados a:hover, .resultados a:focus {
background: var(--note-bg);
outline: none;
}
.resultados .r-titulo {
display: block;
font-family: Roboto, sans-serif;
font-weight: 600;
color: var(--section);
}
.resultados .r-donde {
display: block;
font-size: 14px;
line-height: 1.45;
color: #4a555e;
}
.resultados .r-donde + .r-donde { margin-top: 3px; }
.resultados mark { background: #ffe9a8; color: inherit; }
.sin-resultados { padding: 13px 16px; font-size: 15px; color: #4a555e; }
.grupo { margin: 46px 0 0; }
.grupo:first-of-type { margin-top: 30px; }
.grupo h2 {
margin: 0 0 20px;
text-align: center;
}
.tarjetas {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.tarjetas li { margin: 0; }
.tarjetas a {
display: flex;
align-items: center;
gap: 15px;
height: 100%;
padding: 20px;
border: 1px solid var(--card-line);
border-radius: var(--radio);
text-decoration: none;
color: var(--ink);
background: #ffffff;
transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.4s;
}
.tarjetas a:hover, .tarjetas a:focus-visible {
background: var(--card-hover);
border-color: var(--accent);
box-shadow: 0 6px 18px rgba(47, 57, 65, 0.10);
transform: translateY(-3px);
outline: none;
}
/* El titulo se pone azul al pasar por encima. En el sitio en vivo esta regla
existe pero apunta a --e-global-color-primary, que vale el mismo gris que ya
tiene el titulo, asi que alli no se nota. */
.t-icono {
flex: 0 0 50px;
width: 50px;
height: 50px;
color: var(--icono);
transition: color 0.3s;
}
.tarjetas a:hover .t-icono,
.tarjetas a:focus-visible .t-icono { color: var(--section); }
.t-texto { display: block; min-width: 0; }
/* Ojo con el interlineado: el 1.65 del body es para leer parrafos, no para dos
renglones dentro de una tarjeta. Aqui va el 1.2 y el 1.5 del home en vivo. */
.tarjetas .t-titulo {
font-family: Roboto, sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 1.2;
color: var(--heading);
display: block;
margin-bottom: 4px;
transition: color 0.3s;
}
.tarjetas a:hover .t-titulo,
.tarjetas a:focus-visible .t-titulo { color: var(--section); }
@media (prefers-reduced-motion: reduce) {
.tarjetas a { transition: none; }
.tarjetas a:hover, .tarjetas a:focus-visible { transform: none; }
}
/* El display:block no es cosmetico: siendo inline, cada renglon se estira al
interlineado del contenedor (17px x 1.65 = 28px) y el 1.5 de aqui no manda. */
.tarjetas .t-sub {
display: block;
font-family: Roboto, sans-serif;
font-size: 15px;
line-height: 1.5;
color: var(--heading);
}
@media (max-width: 640px) {
h1 { font-size: 32px; }
.hero { padding: 34px 0 30px; }
main { padding: 26px 20px 34px; }
/* Los tres bajan juntos a 20px, o el selector de idioma queda cuatro pixeles
corrido respecto a las tarjetas de abajo. */
.band .inner, .hero .inner, footer .inner { padding: 0 20px; }
/* Y con el hero mas bajo ya no hay espacio de donde subirlo. */
.hero .idiomas { margin: 0 0 10px; }
/* Una tabla de doce columnas (el CDR) empuja la pagina entera de lado en un
telefono. Que se desplace ella sola: el scroll queda dentro de la tabla. */
table { display: block; overflow-x: auto; }
}
/* Etiqueta que solo leen los lectores de pantalla. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}