/* Base: reinicio, tipografía y elementos comunes (rediseño 2026). */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente);
  font-size: var(--texto-base);
  font-weight: var(--peso-ligero);
  line-height: var(--interlineado);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, iframe { max-width: 100%; }
img { height: auto; vertical-align: middle; border: 0; }

a { color: var(--color-tinta); text-decoration: none; transition: color .2s, opacity .2s; }
a:hover { color: var(--color-rojo); }
::selection { background: var(--color-tinta); color: #fff; }

p { margin: 0; padding-bottom: 1em; }
p:not(.has-background):last-of-type { padding-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding-bottom: 12px;
  color: var(--color-tinta);
  font-weight: var(--peso-normal);
  line-height: var(--titulo-interlineado);
  letter-spacing: -.01em;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }

strong, b { font-weight: var(--peso-negrita); }

blockquote {
  margin: 20px 0 30px;
  padding-left: 20px;
  border-left: 2px solid var(--color-tinta);
}
blockquote p { padding-bottom: 0; }

ul, ol { margin: 0; }
hr { border: 0; border-top: 1px solid var(--color-linea); margin: 0 0 1em; }
figure { margin: 0; }
table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
td, th { padding: 10px 24px; border-top: 1px solid var(--color-linea); text-align: left; }

button { font: inherit; color: inherit; cursor: pointer; }

/* Contenedor general */
.contenedor {
  position: relative;
  width: 100%;
  max-width: calc(var(--ancho-max) + 2 * var(--margen-lateral));
  margin: 0 auto;
  padding: 0 var(--margen-lateral);
}

.pagina { position: relative; overflow-x: clip; }

/* Etiqueta en versalitas (menú, antetítulos, pie) */
.etiqueta {
  display: block;
  color: var(--color-suave);
  font-size: var(--etiqueta);
  font-weight: var(--peso-normal);
  letter-spacing: var(--espaciado-etiqueta);
  line-height: 1.4;
  text-transform: uppercase;
}

/* Accesibilidad */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 1000000;
  background: var(--color-tinta); color: #fff; padding: 8px 16px;
}
.saltar:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 3px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Iconos SVG en línea */
.icono { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }

/* Imagen ausente: hueco gris con la proporción de la original */
.img-hueco { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--color-hueco); }

/* Páginas de contenido clásico (sin constructor) */
.clasico { padding: var(--seccion) 0; }
.clasico ul, .clasico ol { padding: 0 0 23px 1em; line-height: 1.7; }
.clasico ul { list-style-type: disc; }

/* Volver arriba */
.volver-arriba {
  position: fixed; right: 24px; bottom: 24px; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--color-linea); border-radius: 50%;
  background: var(--color-fondo); color: var(--color-tinta); font-size: 16px; line-height: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .4s, background-color .2s, color .2s;
}
.volver-arriba.visible { opacity: 1; pointer-events: auto; }
.volver-arriba:hover { background: var(--color-tinta); color: #fff; }

/* Aparición al desplazarse (solo con JS; sitio.js añade .visto) */
.js .aparece { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .aparece.visto { opacity: 1; transform: none; }

@media only screen and (max-width: 767px) {
  body { font-size: 16px; }
  h4 { font-size: 18px; }
  h5 { font-size: 16px; }
  h6 { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .aparece { opacity: 1; transform: none; }
}