/* base.css */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--c-bg);
color: var(--c-ink);
font-family: var(--f-text);
font-size: var(--fs-0);
line-height: var(--lh-text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.sitio-contenido { flex: 1; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a {
color: var(--c-accent);
text-decoration-thickness: .08em;
text-underline-offset: .15em;
}
a:hover { text-decoration-thickness: .15em; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 {
font-family: var(--f-display);
font-weight: var(--fw-display-strong, 600);
line-height: var(--lh-tight);
letter-spacing: -.01em;
margin: 0 0 .5em;
text-wrap: balance;
}
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
html:not([data-movemento="si"]) { scroll-behavior: auto; }
html:not([data-movemento="si"]) *, html:not([data-movemento="si"]) *::before, html:not([data-movemento="si"]) *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
html[data-movemento="non"] { scroll-behavior: auto; }
html[data-movemento="non"] *, html[data-movemento="non"] *::before, html[data-movemento="non"] *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.contenedor { width: min(100% - 2rem, var(--w-max)); margin-inline: auto; }
.contenedor-lectura { width: min(100% - 2rem, var(--w-read)); margin-inline: auto; }
.saltar {
position: absolute; left: 1rem; top: -100px; z-index: 1000;
padding: .5rem 1rem; border-radius: var(--r-sm);
background: var(--c-accent); color: var(--c-accent-ink);
}
.saltar:focus { top: 1rem; }
.visualmente-oculto, .screen-reader-text {
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.boton {
display: inline-flex; align-items: center; gap: .5em;
padding: .7em 1.2em; border: 0; border-radius: var(--r-md); cursor: pointer;
background: var(--c-accent); color: var(--c-accent-ink);
font-weight: var(--fw-strong, 600); text-decoration: none; line-height: 1.2; white-space: nowrap;
transition: filter var(--motion-ms) var(--motion-ease), transform var(--motion-ms) var(--motion-ease);
}
.boton:hover { filter: brightness(1.08); }
.boton:active { transform: translateY(1px); }
.boton svg { width: 1.1em; height: 1.1em; }
.boton-secundario { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 2px var(--c-line); }
.boton-secundario:hover { box-shadow: inset 0 0 0 2px var(--c-ink); filter: none; }
.cabecera { border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.cabecera-int {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
min-height: 4.5rem; padding-block: .75rem;
}
.marca {
display: inline-flex; align-items: center; color: var(--c-ink); text-decoration: none;
font-family: var(--f-display); font-size: var(--fs-2); font-weight: var(--fw-display-strong, 600);
}
.marca svg { height: 2.75rem; width: auto; }
.menu-boton {
display: inline-flex; align-items: center; gap: .5rem;
background: none; border: 0; padding: .5rem; margin: -.5rem; cursor: pointer;
}
.menu-boton-icono { display: grid; gap: 4px; width: 22px; }
.cabecera-wa { display: none; margin-left: auto; padding: .5rem; color: var(--c-ink); }
.cabecera-wa svg { width: 24px; height: 24px; display: block; }
.menu-boton-icono span {
display: block; height: 2px; border-radius: 2px; background: currentColor;
transition: transform var(--motion-ms) var(--motion-ease), opacity var(--motion-ms);
}
[aria-expanded="true"] .menu-boton-icono span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .menu-boton-icono span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .menu-boton-icono span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-principal .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.menu-principal a { display: block; padding: .6rem .25rem; color: var(--c-ink); text-decoration: none; font-weight: 500; }
.menu-principal a:hover, .menu-principal .current-menu-item > a, .menu-principal .current-menu-ancestor > a { color: var(--c-accent); }
.menu-principal .sub-menu { list-style: none; margin: 0; padding: 0 0 0 1rem; }
.menu-principal .boton-cta { display: inline-flex; padding: .7em 1.2em; color: var(--c-accent-ink); font-weight: var(--fw-strong, 600); margin-top: .75rem; }
.menu-principal .boton-cta:hover { color: var(--c-accent-ink); }
@media (max-width: 55.99rem) {
.cabecera-int { flex-wrap: wrap; }
.cabecera-wa { display: inline-flex; }
.menu-boton { margin-left: 0; }
.js .menu-principal { display: none; width: 100%; padding-block: .5rem 1rem; }
.js .menu-principal.abierto { display: block; }
}
@media (min-width: 56rem) {
.menu-boton { display: none; }
.menu-principal { display: flex; align-items: center; gap: 1.5rem; }
.menu-principal .menu { flex-direction: row; gap: 1.25rem; }
.menu-principal .menu > li { position: relative; }
.menu-principal .sub-menu {
position: absolute; top: 100%; left: 0; z-index: 20; min-width: 12rem; display: none;
padding: .5rem; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.menu-principal li:hover > .sub-menu, .menu-principal li:focus-within > .sub-menu { display: block; }
.menu-principal .boton-cta { margin: 0; }
}
.pie {
border-top: 1px solid var(--c-line);
background: var(--c-surface, var(--c-bg));
color: var(--c-muted-text); font-size: var(--fs--1);
padding-block: 3rem 1.5rem;
}
.pie-int { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .pie-int { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }
.pie a { color: inherit; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-block: .4rem; }
.pie h2 { font: var(--fw-strong, 600) var(--fs-0) var(--f-text); color: var(--c-ink); margin-bottom: .75rem; }
.marca-pie svg { height: 2rem; }
.pie-descripcion { max-width: 34rem; }
.pie-contacto li { display: flex; align-items: flex-start; gap: .6rem; }
.pie-contacto svg { width: 20px; height: 20px; flex: none; margin-top: .1em; }
.pie-social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.pie-social a { display: inline-flex; padding: .45rem; border: 1px solid var(--c-line); border-radius: 50%; }
.pie-social a:hover { color: var(--c-accent); border-color: var(--c-accent); }
.pie-social svg { width: 20px; height: 20px; }
.pie-linea {
margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--c-line);
display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
.pie-linea p { margin: 0; }
.consent {
position: fixed; inset: auto 1rem 1rem; z-index: 900; max-width: 26rem; margin-inline: auto;
padding: 1rem 1.25rem; border: 1px solid var(--c-line); border-radius: var(--r-lg);
background: var(--c-bg); color: var(--c-ink); font-size: var(--fs--1);
box-shadow: 0 10px 40px rgb(0 0 0 / .15);
}
.consent p { margin: 0 0 .75rem; }
.consent-botones { display: flex; gap: .5rem; flex-wrap: wrap; }
/* prosa.css */
.prosa > * { margin-block: 0 1.25em; }
.prosa > :last-child { margin-bottom: 0; }
.prosa h2 { font-size: var(--fs-3); margin-top: 1.75em; }
.prosa h3 { font-size: var(--fs-2); margin-top: 1.5em; }
.prosa h4 { font-size: var(--fs-1); margin-top: 1.25em; }
.prosa p, .prosa li { max-width: var(--w-read); }
.prosa strong { font-weight: var(--fw-strong, 600); }
.prosa ul, .prosa ol { padding-left: 1.25em; }
.prosa li { margin-block: .35em; }
.prosa li > ul, .prosa li > ol { margin-block: .35em 0; }
.prosa blockquote, .prosa .wp-block-quote {
margin: 2em 0; padding: .25em 0 .25em 1.25em; border-left: 4px solid var(--c-accent);
font-family: var(--f-display); font-size: var(--fs-1); font-style: normal;
}
.prosa blockquote p { max-width: none; }
.prosa .wp-block-quote cite, .prosa blockquote cite {
display: block; margin-top: .5em; font: var(--fs--1) var(--f-text); color: var(--c-muted-text); font-style: normal;
}
.prosa .wp-block-pullquote { border-block: 2px solid var(--c-line); padding: 1.5em 0; text-align: center; }
.prosa figure { margin: 2em 0; }
.prosa figcaption { margin-top: .5em; font-size: var(--fs--1); color: var(--c-muted-text); text-align: center; }
.prosa img { border-radius: var(--r-md); }
.prosa .wp-block-image img { width: 100%; }
.prosa .alignwide { width: min(100vw - 2rem, var(--w-max)); margin-inline: calc(50% - min(100vw - 2rem, var(--w-max)) / 2); }
.prosa .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); }
.prosa .alignfull img { border-radius: 0; }
.prosa .alignleft { float: left; margin: .25em 1.5em 1em 0; max-width: 50%; }
.prosa .alignright { float: right; margin: .25em 0 1em 1.5em; max-width: 50%; }
.prosa .aligncenter { margin-inline: auto; }
.prosa .aligncenter img { margin-inline: auto; }
.prosa::after { content: ""; display: table; clear: both; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.prosa table { width: 100%; border-collapse: collapse; font-size: var(--fs--1); }
.prosa th, .prosa td { padding: .6em .5em; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.prosa th { font-weight: var(--fw-strong, 600); }
.prosa .wp-block-table { overflow-x: auto; }
.prosa code { font-family: var(--f-mono); font-size: .9em; padding: .1em .35em; border-radius: var(--r-sm); background: var(--c-surface, var(--c-line)); }
.prosa pre {
font-family: var(--f-mono); font-size: var(--fs--1); line-height: 1.5; overflow: auto;
padding: 1.25em; border-radius: var(--r-md); background: var(--c-ink); color: var(--c-bg);
}
.prosa pre code { background: none; padding: 0; color: inherit; }
.prosa hr, .prosa .wp-block-separator { border: 0; border-top: 1px solid var(--c-line); width: 6rem; margin: 3em auto; }
.prosa .wp-block-separator.is-style-wide { width: 100%; }
.prosa .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.prosa .wp-block-button__link {
display: inline-flex; align-items: center; padding: .7em 1.2em; border-radius: var(--r-md);
background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-strong, 600); text-decoration: none; line-height: 1.2;
}
.prosa .wp-block-button__link:hover { filter: brightness(1.08); }
.prosa .is-style-outline .wp-block-button__link { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 2px var(--c-line); }
.prosa .wp-block-columns { display: flex; flex-wrap: wrap; gap: 2rem; }
.prosa .wp-block-column { flex: 1 1 11rem; min-width: 0; }
.prosa .wp-block-column > :last-child { margin-bottom: 0; }
.prosa .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.prosa .wp-block-gallery figure { margin: 0; }
.prosa .wp-block-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prosa .wp-block-embed__wrapper, .prosa .wp-block-video { position: relative; }
.prosa .wp-block-video video { width: 100%; border-radius: var(--r-md); }
.prosa .wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 56.25%; }
.prosa .wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r-md); }
.prosa .wp-block-group.has-background { padding: 1.5rem; border-radius: var(--r-md); }
.prosa .wp-block-details { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: .75rem 1rem; }
.prosa .wp-block-details summary { cursor: pointer; font-weight: var(--fw-strong, 600); }
.has-fondo-color { color: var(--c-bg); }             .has-fondo-background-color { background-color: var(--c-bg); }
.has-tinta-color { color: var(--c-ink); }            .has-tinta-background-color { background-color: var(--c-ink); }
.has-suave-color { color: var(--c-muted); }          .has-suave-background-color { background-color: var(--c-muted); }
.has-linea-color { color: var(--c-line); }           .has-linea-background-color { background-color: var(--c-line); }
.has-acento-color { color: var(--c-accent); }        .has-acento-background-color { background-color: var(--c-accent); }
.has-acento-tinta-color { color: var(--c-accent-ink); } .has-acento-tinta-background-color { background-color: var(--c-accent-ink); }
.has-superficie-color { color: var(--c-surface, var(--c-line)); } .has-superficie-background-color { background-color: var(--c-surface, var(--c-line)); }
.has-pequeno-font-size { font-size: var(--fs--1); }
.has-normal-font-size { font-size: var(--fs-0); }
.has-grande-font-size { font-size: var(--fs-2); }
.has-enorme-font-size { font-size: var(--fs-4); }
.buscador { display: flex; gap: .5rem; max-width: 32rem; margin-block: 1rem; }
.buscador input {
flex: 1; min-width: 0; padding: .7em 1em; font: inherit; color: inherit;
border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg);
}
.buscador input:focus { border-color: var(--c-accent); }
/* editorial.css */
.pagina-cabecera { padding-block: 3rem 1.5rem; }
.pagina-cabecera h1 { font-size: var(--fs-5); margin: 0; }
.pagina-entradilla { color: var(--c-muted-text); font-size: var(--fs-1); margin: .5rem 0 0; }
.entrada-meta {
margin: 0 0 .5rem; font-size: var(--fs--1); color: var(--c-muted-text);
text-transform: uppercase; letter-spacing: .06em;
}
.entrada-meta a { color: inherit; text-decoration: none; }
.entrada-meta a:hover { color: var(--c-accent); }
.editorial { padding-block: 3rem 4rem; }
.editorial-cabecera { margin-bottom: 2rem; }
.editorial-titulo { font-size: var(--fs-5); margin: 0 0 .5rem; }
.editorial-entradilla { font-size: var(--fs-1); color: var(--c-muted-text); margin: 0; }
.destacada { margin: 0 auto 2.5rem; }
.destacada img { width: 100%; border-radius: var(--r-lg); }
.destacada figcaption { margin-top: .5rem; font-size: var(--fs--1); color: var(--c-muted-text); text-align: center; }
.contenedor-ancho { width: min(100% - 2rem, var(--w-max)); }
.editorial-pie { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--c-line); font-size: var(--fs--1); color: var(--c-muted-text); }
.paginas-entrada { margin-top: 2rem; }
.entradas-nav { padding-block: 2rem 4rem; }
.entradas-nav .nav-links { display: grid; gap: 1rem; }
@media (min-width: 40rem) {
.entradas-nav .nav-links { grid-template-columns: 1fr 1fr; }
.entradas-nav .nav-next { grid-column: 2; }
}
.entradas-nav a {
display: block; padding: 1rem; color: inherit; text-decoration: none;
border: 1px solid var(--c-line); border-radius: var(--r-md);
transition: border-color var(--motion-ms) var(--motion-ease);
}
.entradas-nav a:hover { border-color: var(--c-accent); }
.entradas-nav .nav-next { text-align: right; }
.nav-etiqueta { display: block; font-size: var(--fs--1); color: var(--c-muted-text); text-transform: uppercase; letter-spacing: .06em; }
.nav-titulo { font-family: var(--f-display); font-size: var(--fs-1); line-height: var(--lh-tight); }
.tarjetas { display: grid; gap: 2.5rem 2rem; padding-block: 1rem 3rem; }
@media (min-width: 40rem) { .tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .tarjetas { grid-template-columns: repeat(3, 1fr); } }
.tarjeta { display: flex; flex-direction: column; gap: .75rem; }
.tarjeta-imagen { display: block; overflow: hidden; border-radius: var(--r-md); background: var(--c-surface, var(--c-line)); }
.tarjeta-imagen img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--motion-ms) var(--motion-ease); }
.tarjeta:hover .tarjeta-imagen img { transform: scale(1.03); }
.tarjeta-cuerpo .entrada-meta { margin-bottom: .25rem; }
.tarjeta-titulo { font-size: var(--fs-2); margin: 0; }
.tarjeta-titulo a { color: inherit; text-decoration: none; }
.tarjeta-titulo a:hover { color: var(--c-accent); }
.tarjeta-extracto { margin: 0; color: var(--c-muted-text); }
.sin-resultados { padding-block: 2rem 4rem; }
.paginacion { padding-block: 1rem 3rem; }
.paginacion .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.paginacion .page-numbers {
display: inline-block; padding: .5em .9em; color: inherit; text-decoration: none;
border: 1px solid var(--c-line); border-radius: var(--r-sm);
}
.paginacion a.page-numbers:hover { border-color: var(--c-accent); color: var(--c-accent); }
.paginacion .current { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.paginacion .dots { border: 0; }
.etiquetas span { font-weight: var(--fw-strong, 600); }
.pagina-404 { padding-block: 4rem 6rem; }
.pagina-404 h1 { font-size: var(--fs-5); }
.pagina-404-simbolo svg { display: block; height: clamp(12rem, 38vh, 22rem); width: auto; margin: 0 0 2rem; color: var(--c-ink); }
.pagina-404-simbolo svg path { fill: currentColor; }
.pagina-404-propia .prosa { margin-top: 1rem; }
.pagina-404-propia .botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }