/* Memoria COVID - Universidad de Chile
   Sistema visual derivado del sitio de 2021.

   El turquesa #2ca2b8 era el color de los enlaces del tema antiguo y es
   ahora el color de marca. El coral #de6464 venia del plugin de busqueda:
   se conserva solo en el campo de busqueda, en ningun otro lugar.

   Este archivo se copia tal cual a sitio/assets/style.css en cada corrida
   del generador, igual que htaccess-plantilla. Editarlo aca, no alla:
   sitio/ se borra y se regenera. */

:root {
  --marca:      #2ca2b8;   /* wordmark, cifras, cuadrado de seccion */
  --enlace:     #12707f;   /* mismo tono, con contraste AA para texto */
  --coral:      #de6464;   /* solo el buscador */
  --tinta:      #1a1918;
  --tinta-70:   #43403d;
  --tinta-50:   #6b6764;
  --tinta-35:   #8d8884;
  --papel:      #fbfaf8;
  --papel-2:    #f2efea;   /* bloques destacados */
  --filete:     #e6e2dd;
  --filete-2:   #ddd8d2;
  --sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --margen: 72px;
  --ancho: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--enlace); text-decoration: none; }
a:hover { color: var(--marca); }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--marca); color: #fff; }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.limite { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }

/* Solo para lectores de pantalla */
.vo {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--tinta); color: var(--papel); padding: 10px 16px; font-size: 14px;
}
.saltar:focus { left: 0; color: var(--papel); }

/* ------------------------------------------------------------------ *
 * Banda institucional
 * ------------------------------------------------------------------ */

.banda {
  border-bottom: 1px solid var(--filete);
}
.banda .limite {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 52px;
}
.banda-marca {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta-50); font-weight: 500;
}
.banda-marca a { color: inherit; text-decoration: none; }
.banda-marca a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.banda-nav { display: flex; gap: 28px; font-size: 14px; }
.banda-nav a { color: var(--tinta-50); }
.banda-nav a:hover { color: var(--tinta); }

/* ------------------------------------------------------------------ *
 * Cabecera compacta (todo salvo la portada)
 * ------------------------------------------------------------------ */

.cabecera { border-bottom: 1px solid var(--filete); }
.cabecera .limite {
  display: flex; align-items: center; gap: 36px; min-height: 74px;
}
.marca-texto {
  font-size: 25px; font-weight: 600; letter-spacing: -0.035em;
  color: var(--marca); white-space: nowrap;
}
.marca-texto:hover { color: var(--enlace); }

.tipos-nav {
  display: flex; gap: 24px; flex-grow: 1; flex-wrap: wrap;
  font-size: 15px; list-style: none;
}
.tipos-nav a { color: var(--tinta-50); display: inline-block; padding: 2px 0; }
.tipos-nav a:hover { color: var(--tinta); }
.tipos-nav a[aria-current] {
  color: var(--tinta); font-weight: 600;
  border-bottom: 2px solid var(--marca);
}

/* ------------------------------------------------------------------ *
 * Buscador: la pildora coral heredada del sitio de 2021
 * ------------------------------------------------------------------ */

.buscador {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 18px; background: #fff;
  border: 1.5px solid var(--coral); border-radius: 999px;
}
.buscador svg { flex-shrink: 0; }
.buscador input {
  border: 0; background: none; outline: none; min-width: 0;
  font: inherit; font-size: 15px; color: var(--tinta); flex-grow: 1;
}
.buscador input::placeholder { color: var(--tinta-35); }
.buscador button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--coral); font-weight: 500;
}
.buscador-grande { width: 100%; max-width: 470px; padding: 13px 22px; }
.buscador-grande input { font-size: 16px; }

/* ------------------------------------------------------------------ *
 * Portada
 * ------------------------------------------------------------------ */

.portada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 668px;
  align-items: stretch;
  max-width: var(--ancho); margin: 0 auto;
}
.portada-texto {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; padding: 76px 60px 64px var(--margen);
}
.wordmark {
  font-size: 84px; line-height: 0.94; font-weight: 600;
  letter-spacing: -0.038em; color: var(--marca);
}
.wordmark a { color: inherit; }
.institucion {
  margin-top: 16px; font-size: 13px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--tinta-50); font-weight: 500;
}
.bajada {
  max-width: 470px; margin-top: 30px;
  font-family: var(--serif); font-size: 21px; line-height: 1.5;
  color: var(--tinta-70); text-wrap: pretty;
}
.portada-texto .buscador { margin-top: 34px; }
.portada-foto { background: var(--filete); overflow: hidden; }
.portada-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Navegacion por tipo con el peso real del archivo */
.tipos-cifras {
  border-top: 2px solid var(--tinta);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
}
.tipos-cifras li { border-right: 1px solid var(--filete); }
.tipos-cifras li:last-child { border-right: 0; }
.tipos-cifras a { display: block; padding: 22px 26px 26px 0; color: var(--tinta); }
.tipos-cifras li + li a { padding-left: 26px; }
.tipos-cifras a:hover .cifra { color: var(--enlace); }
.cifra {
  display: block;
  font-size: 44px; font-weight: 600; letter-spacing: -0.03em;
  line-height: 1; color: var(--marca);
}
.tipos-cifras .rotulo {
  display: block; margin-top: 8px; font-size: 15px; font-weight: 500;
}

/* Nota de cierre del archivo */
.cierre {
  margin-top: 56px; padding: 32px 36px; background: var(--papel-2);
  display: flex; align-items: flex-start; gap: 20px;
}
.cierre p {
  max-width: 900px; font-family: var(--serif); font-size: 20px;
  line-height: 1.55; color: var(--tinta-70); text-wrap: pretty;
}

.marca-cuadro {
  width: 22px; height: 22px; background: var(--marca); flex-shrink: 0;
}
.cierre .marca-cuadro { margin-top: 6px; }

/* ------------------------------------------------------------------ *
 * Secciones y rejillas
 * ------------------------------------------------------------------ */

.seccion { margin-top: 64px; }
.seccion-titulo {
  border-top: 2px solid var(--tinta); padding-top: 14px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.seccion-titulo h2 {
  font-size: 21px; font-weight: 600; letter-spacing: -0.01em;
  flex-grow: 1;
}
.seccion-titulo .ver-mas { font-size: 15px; font-weight: 500; }

.rejilla {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px; margin-top: 28px; list-style: none;
}
.ficha-enlace { display: block; color: var(--tinta); }
.ficha-enlace:hover { color: var(--tinta); }
.ficha-enlace:hover .ficha-titulo { color: var(--enlace); }
.ficha-imagen {
  aspect-ratio: 4 / 3; background: var(--filete); overflow: hidden;
}
.ficha-imagen img { width: 100%; height: 100%; object-fit: cover; }
.ficha-imagen.sin-imagen {
  display: flex; align-items: center; justify-content: center;
  color: var(--tinta-35); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Audio y video no tienen imagen: en vez de un hueco gris, el bloque dice
   que es el registro. En audio la cifra es la duracion real del mp3; en
   video, que el material esta en YouTube y no en este archivo. */
.ficha-medio {
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: var(--papel-2); border: 1px solid var(--filete);
  text-align: center; padding: 20px;
}
.medio-cifra {
  font-size: 40px; font-weight: 600; letter-spacing: -0.03em;
  line-height: 1; color: var(--marca);
  font-variant-numeric: tabular-nums;
}
.medio-icono { color: var(--marca); display: block; }
.medio-rotulo {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta-50); font-weight: 500;
}
.ficha-enlace:hover .ficha-medio { border-color: var(--tinta-35); }

/* Video: la miniatura viene de la API de YouTube y se guarda en el sitio.
   Va en 16:9, que es el formato real del material, con la duracion encima
   como en cualquier reproductor. */
.ficha-video {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--filete); overflow: hidden;
}
.ficha-video { line-height: 0; }
.ficha-video img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.ficha-video-sin {
  display: flex; align-items: center; justify-content: center;
  background: #f7f5f2;
}
.ficha-video-sin .medio-icono { color: var(--tinta-35); }
.video-duracion {
  position: absolute; right: 8px; bottom: 8px;
  padding: 3px 7px; border-radius: 3px;
  background: rgba(12, 11, 10, 0.85); color: #fff;
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.ficha-enlace-video:hover .ficha-video img { opacity: 0.88; }

/* Bloque de video dentro de la ficha del testimonio */
.video-bloque { margin: 0 0 26px; }
.texto .video-bloque img { margin: 0; }
.video-portada {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--filete); overflow: hidden;
  line-height: 0;   /* el salto de linea del HTML abria una banda arriba */
}
.video-portada img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  margin: 0;   /* .texto img pone 32px y aqui desplazaba la miniatura */
}
.video-portada .medio-icono {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: var(--tinta-35);
}
.video-jugar {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 11, 10, 0.78); color: #fff;
  padding-left: 3px;
  transition: background 0.15s, transform 0.15s;
}
.video-portada:hover .video-jugar {
  background: var(--marca);
  transform: translate(-50%, -50%) scale(1.06);
}
.video-bloque figcaption {
  margin-top: 12px; font-family: var(--sans);
  font-size: 14px; color: var(--tinta-50);
}
.video-bloque figcaption a { font-weight: 500; }

.ficha-fecha {
  margin-top: 14px; font-size: 12px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--tinta-35); font-weight: 500;
}
.ficha-titulo {
  margin-top: 7px; font-size: 18px; font-weight: 500; line-height: 1.32;
  letter-spacing: -0.01em; text-wrap: pretty;
}

/* Fichas sin imagen: el texto es el material */
.ficha-texto {
  display: block; padding: 26px 26px 28px; background: #fff;
  border: 1px solid var(--filete); color: var(--tinta); height: 100%;
}
.ficha-texto:hover { color: var(--tinta); border-color: var(--filete-2); }
.ficha-texto:hover .ficha-titulo { color: var(--enlace); }
.ficha-texto .ficha-fecha { margin-top: 0; }
.ficha-texto .ficha-titulo { margin-top: 10px; }
.ficha-extracto {
  margin-top: 14px; font-family: var(--serif); font-size: 17px;
  line-height: 1.55; color: var(--tinta-50); text-wrap: pretty;
}

/* ------------------------------------------------------------------ *
 * Listado por tipo
 * ------------------------------------------------------------------ */

.tipo-cabecera { padding-top: 52px; }
.tipo-cabecera-fila {
  border-bottom: 2px solid var(--tinta); padding-bottom: 22px;
}
.rotulo-menor {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinta-50); font-weight: 600;
}
.rotulo-menor .marca-cuadro { width: 18px; height: 18px; }
.rotulo-menor a:hover { color: var(--enlace) !important; }
.tipo-cabecera h1 {
  margin-top: 18px; font-size: 56px; line-height: 1;
  font-weight: 600; letter-spacing: -0.034em;
}
.filtros {
  margin-top: 26px; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; list-style: none;
}
.filtros-rotulo { font-size: 13px; color: var(--tinta-35); margin-right: 8px; }
.filtros a {
  display: flex; align-items: baseline; gap: 7px; padding: 7px 14px;
  border: 1px solid var(--filete-2); background: #fff; color: var(--tinta);
  border-radius: 2px; font-size: 14px;
}
.filtros a:hover { border-color: var(--tinta-35); color: var(--tinta); }
.filtros a .n { font-size: 12px; color: var(--tinta-35); }
.filtros a[aria-current] {
  background: var(--tinta); border-color: var(--tinta); color: var(--papel);
}
.filtros a[aria-current] .n { color: #9c9791; }

.rejilla-listado { margin-top: 38px; }

/* Paginacion */
.paginacion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--filete);
}
.paginacion-cuenta { font-size: 14px; color: var(--tinta-35); }
.paginacion-numeros { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; }
.paginacion-numeros a, .paginacion-numeros span {
  display: block; min-width: 38px; text-align: center; padding: 8px 10px;
  border: 1px solid var(--filete-2); background: #fff; color: var(--tinta);
  font-size: 14px; border-radius: 2px;
}
.paginacion-numeros a:hover { border-color: var(--tinta-35); color: var(--tinta); }
.paginacion-numeros [aria-current] {
  background: var(--tinta); border-color: var(--tinta); color: var(--papel);
  font-weight: 500;
}
.paginacion-numeros .puntos { border: 0; background: none; color: var(--tinta-35); }

/* ------------------------------------------------------------------ *
 * Testimonio
 * ------------------------------------------------------------------ */

.testimonio-cabecera { padding-top: 56px; }
.testimonio-cabecera h1 {
  margin-top: 22px; max-width: 1000px; font-size: 58px; line-height: 1.06;
  font-weight: 600; letter-spacing: -0.032em; text-wrap: pretty;
}
.testimonio-regla { margin-top: 26px; border-top: 2px solid var(--tinta); }

.testimonio-cuerpo {
  display: grid; grid-template-columns: 720px 300px;
  justify-content: space-between; gap: 60px; margin-top: 32px;
}

.nota-archivo {
  padding: 16px 20px; background: var(--papel-2);
  font-size: 14px; line-height: 1.55; color: var(--tinta-50);
}
.nota-archivo + .nota-archivo { margin-top: 8px; }

.texto {
  margin-top: 40px; font-family: var(--serif);
  font-size: 20px; line-height: 1.72; color: #26241f;
}
.texto p { margin-bottom: 26px; text-wrap: pretty; }
.texto p:last-child { margin-bottom: 0; }
.texto h2, .texto h3 {
  font-family: var(--sans); font-weight: 600; letter-spacing: -0.015em;
  margin: 36px 0 14px;
}
.texto h2 { font-size: 24px; }
.texto h3 { font-size: 20px; }
.texto ul, .texto ol { margin: 0 0 26px 1.2em; }
.texto li { margin-bottom: 8px; }
.texto figure { margin: 32px 0; }
.texto figure img { background: var(--filete); }
.texto figcaption {
  margin-top: 10px; font-family: var(--sans); font-size: 13px;
  line-height: 1.5; color: var(--tinta-35);
}
.texto img { margin: 32px 0; background: var(--filete); }
.texto audio { width: 100%; margin: 28px 0; }
.texto blockquote {
  margin: 32px 0; padding-left: 24px; border-left: 2px solid var(--marca);
  color: var(--tinta-70);
}
.texto a { text-decoration: underline; text-underline-offset: 2px; }
/* Bloque de archivo adjunto: WordPress emite dos enlaces hermanos, el
   nombre del documento y el boton de descarga. */
.texto .wp-block-file {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 28px 0;
}
.texto .wp-block-file a {
  font-family: var(--sans); font-size: 15px; text-decoration: none;
  padding: 11px 18px; background: #fff; border: 1px solid var(--filete);
}
.texto .wp-block-file a:hover { border-color: var(--tinta-35); }
.texto .wp-block-file a.wp-block-file__button {
  background: var(--tinta); border-color: var(--tinta); color: var(--papel);
  font-weight: 500;
}
.texto .wp-block-file a.wp-block-file__button:hover { background: #000; color: var(--papel); }

/* Ficha de archivo */
.ficha-archivo-titulo {
  border-top: 2px solid var(--tinta); padding-top: 14px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinta-35); font-weight: 600;
}
.ficha-datos {
  display: flex; flex-direction: column; gap: 16px; margin-top: 18px;
  list-style: none;
}
.ficha-datos dt, .ficha-datos .clave { font-size: 12px; color: var(--tinta-35); }
.ficha-datos dd, .ficha-datos .valor {
  margin: 3px 0 0; font-size: 15px; font-weight: 500;
}
.ficha-datos .registro { font-family: ui-monospace, Menlo, monospace; }
.ficha-datos .glosa {
  display: block; margin-top: 5px; font-size: 13px; line-height: 1.5;
  color: var(--tinta-35); font-weight: 400;
}
.como-citar {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--filete);
}
.como-citar h2 {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinta-35); font-weight: 600;
}
.como-citar p {
  margin-top: 10px; font-family: var(--serif); font-size: 15px;
  line-height: 1.55; color: var(--tinta-70); overflow-wrap: anywhere;
}

/* Anterior / siguiente */
.vecinos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px; margin-top: 60px;
}
.vecino {
  display: block; padding: 24px 26px; background: #fff;
  border: 1px solid var(--filete); color: var(--tinta);
}
.vecino:hover { color: var(--tinta); border-color: var(--filete-2); }
.vecino:hover .vecino-titulo { color: var(--enlace); }
.vecino-rotulo {
  display: block;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta-35); font-weight: 500;
}
.vecino-titulo {
  display: block; margin-top: 9px; font-size: 19px; font-weight: 500;
  letter-spacing: -0.012em; line-height: 1.3;
}
.vecino.siguiente { text-align: right; }
.vecinos .hueco { border: 0; background: none; }

/* ------------------------------------------------------------------ *
 * Paginas de texto (presentacion, terminos, proyectos)
 * ------------------------------------------------------------------ */

.pagina { padding-top: 56px; max-width: 760px; }
.pagina h1 {
  font-size: 52px; line-height: 1.06; font-weight: 600;
  letter-spacing: -0.032em; text-wrap: pretty;
}
.pagina .texto { margin-top: 26px; padding-top: 26px; border-top: 2px solid var(--tinta); }

/* ------------------------------------------------------------------ *
 * Buscador (pagina de resultados)
 * ------------------------------------------------------------------ */

.resultados { margin-top: 32px; list-style: none; }
.resultado {
  padding: 22px 0; border-bottom: 1px solid var(--filete);
}
.resultado:first-child { border-top: 1px solid var(--filete); }
.resultado-titulo {
  font-size: 20px; font-weight: 500; letter-spacing: -0.012em;
  line-height: 1.3;
}
.resultado-fecha {
  margin-top: 6px; font-size: 12px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--tinta-35); font-weight: 500;
}
.resultado-extracto {
  margin-top: 8px; font-family: var(--serif); font-size: 17px;
  line-height: 1.55; color: var(--tinta-50); text-wrap: pretty;
}
.resultado mark { background: #ffeeb8; color: inherit; padding: 0 2px; }
.estado-busqueda { margin-top: 20px; font-size: 15px; color: var(--tinta-50); }

/* ------------------------------------------------------------------ *
 * Pie
 * ------------------------------------------------------------------ */

.pie {
  margin-top: 76px; background: var(--tinta); color: #cfcbc6;
  padding: 44px 0 40px;
}
.pie-fila {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 60px; flex-wrap: wrap;
}
.pie-marca {
  font-size: 26px; font-weight: 600; letter-spacing: -0.03em;
  color: var(--marca);
}
.pie-marca a { color: inherit; }
.pie-sede {
  margin-top: 10px; max-width: 420px; font-size: 14px;
  line-height: 1.65; color: #98938d;
}
.pie-sede a { color: #98938d; text-decoration: underline; text-underline-offset: 3px; }
.pie-sede a:hover { color: var(--papel); }
.pie-licencia {
  max-width: 460px; font-family: var(--serif); font-size: 15px;
  line-height: 1.6; color: #98938d; text-wrap: pretty;
}
.pie-licencia a { color: #cfcbc6; text-decoration: underline; }
.pie-base {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid #35322f;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: #78736e;
}
.pie-base a { color: #98938d; text-decoration: underline; text-underline-offset: 3px; }
.pie-base a:hover { color: var(--papel); }

/* ------------------------------------------------------------------ *
 * Adaptable
 * ------------------------------------------------------------------ */

@media (max-width: 1180px) {
  :root { --margen: 40px; }
  .portada { grid-template-columns: minmax(0, 1fr) 46%; }
  .wordmark { font-size: 64px; }
  .testimonio-cuerpo { grid-template-columns: minmax(0, 1fr) 280px; gap: 44px; }
  .tipo-cabecera h1 { font-size: 46px; }
  .testimonio-cabecera h1 { font-size: 46px; }
}

@media (max-width: 900px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .tipos-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tipos-cifras li { border-bottom: 1px solid var(--filete); }
  .tipos-cifras li:nth-child(3n) { border-right: 0; }
  .tipos-cifras li:nth-last-child(-n+3) { border-bottom: 0; }
  .testimonio-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

@media (max-width: 720px) {
  :root { --margen: 20px; }

  .banda .limite { min-height: 46px; }
  .banda-marca { display: none; }
  .banda-nav { gap: 18px; font-size: 13px; }

  .cabecera .limite { gap: 16px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  .marca-texto { font-size: 21px; }
  .cabecera .buscador { order: 3; width: 100%; }
  .tipos-nav { order: 4; width: 100%; gap: 16px; font-size: 14px; }

  /* En telefono manda la imagen: la foto pasa arriba */
  .portada { display: flex; flex-direction: column; }
  .portada-foto { order: -1; height: 260px; }
  .portada-texto {
    align-items: flex-start; text-align: left;
    padding: 30px var(--margen) 0;
  }
  .wordmark { font-size: 40px; }
  .bajada { font-size: 20px; }
  .portada-texto .buscador { margin-top: 24px; }
  .buscador-grande { max-width: none; }

  .tipos-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tipos-cifras li:nth-child(3n) { border-right: 1px solid var(--filete); }
  .tipos-cifras li:nth-child(2n) { border-right: 0; }
  .tipos-cifras li:nth-last-child(-n+3) { border-bottom: 1px solid var(--filete); }
  .tipos-cifras li:nth-last-child(-n+2) { border-bottom: 0; }
  .tipos-cifras a { display: flex; align-items: baseline; gap: 10px; padding: 16px 0; }
  .tipos-cifras li + li a { padding-left: 18px; }
  .cifra { font-size: 30px; min-width: 46px; }
  .tipos-cifras .rotulo { margin-top: 0; }

  .cierre { margin-top: 28px; padding: 20px; gap: 14px; }
  .cierre p { font-size: 17px; }
  .cierre .marca-cuadro { width: 16px; height: 16px; margin-top: 4px; }

  .seccion { margin-top: 40px; }
  .rejilla { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .wordmark, .tipo-cabecera h1, .testimonio-cabecera h1, .pagina h1 { font-size: 34px; }
  .texto { font-size: 18px; }
  .vecinos { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vecino.siguiente { text-align: left; }

  .pie { margin-top: 44px; padding: 30px 0 26px; }
  .pie-fila { gap: 26px; }
  .pie-marca { font-size: 21px; }
}

/* La portada arranca sin margen superior porque el hero ya es el margen */
@media (min-width: 721px) {
  .tipos-cifras-envoltura { margin-top: 4px; }
}

@media print {
  .banda, .cabecera, .vecinos, .buscador, .pie-base { display: none; }
  body { background: #fff; }
  .testimonio-cuerpo { grid-template-columns: 1fr; }
}