/* Los cuadernos de Mañungo — estilos
   Colores y tipografías tomados del sitio original en Squarespace. */

:root {
  --texto: #4a4a4a;          /* texto corrido: contraste 8,9:1 sobre blanco */
  --naranjo: #ff400a;
  --azul: #2483e6;
  --azul-oscuro: #0c2c4d;
  --rosado: #ffcbbd;
  --gris: #e2e3e4;
  --blanco: #ffffff;
  --casi-blanco: #f6f9fc;

  --serif: "EB Garamond", Garamond, Georgia, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --margen: 3vw;
  --fila: 2.02vw;          /* alto de fila de la grilla (como en Squarespace) */
  --hueco: 11px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font-family: var(--sans);
  font-size: clamp(14px, 1.49vw, 16px);
  line-height: 1.5;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3, .t2, .t3, .t4, .cita {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 .6em;
}
h2 { font-size: clamp(32px, 5.2vw, 64px); line-height: 1.22; }
h3, .t3 { font-size: clamp(26px, 3.53vw, 44px); line-height: 1.3; }
h1.t2, .t2 { font-size: clamp(32px, 5.2vw, 64px); line-height: 1.22; }
p  { margin: 0 0 1em; }

.naranjo { color: var(--naranjo); }
.azul { color: var(--azul); }
.azul-oscuro { color: var(--azul-oscuro); }
.chico { font-size: 14px; line-height: 1.5; }
.centro { text-align: center; }
.derecha { text-align: right; }

.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--blanco); padding: 8px 12px; z-index: 100;
}
.saltar:focus { left: 8px; top: 8px; }

/* ---------- Encabezado ---------- */

.encabezado {
  position: sticky; top: 0; z-index: 50;
  background: var(--blanco);
  border-bottom: 1px solid #eee;
  padding: 10px var(--margen) 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.encabezado .redes { justify-self: start; display: flex; gap: 14px; }
.encabezado .redes svg { width: 18px; height: 18px; fill: var(--texto); }
.encabezado .centro-enc { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.logo img { width: 145px; height: auto; }

.nav { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav > li { position: relative; }
.nav a, .nav button {
  font: inherit; font-size: 15px; color: var(--texto);
  text-decoration: none; background: none; border: 0; padding: 2px 0; cursor: pointer;
  letter-spacing: .02em;
}
.nav a[aria-current="page"] { border-bottom: 1px solid currentColor; }
.nav a:hover, .nav button:hover { opacity: .65; }

.submenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 190px; margin: 0; padding: 12px 0;
  list-style: none; background: var(--blanco);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden; transition: opacity .2s;
}
.submenu a { display: block; padding: 5px 20px; font-size: 14px; white-space: nowrap; }
.nav li:hover > .submenu,
.nav li:focus-within > .submenu,
.nav li.abierto > .submenu { opacity: 1; visibility: visible; }

.boton-menu { display: none; justify-self: end; background: none; border: 0; padding: 8px; cursor: pointer; }
.boton-menu span { display: block; width: 26px; height: 2px; background: var(--texto); margin: 5px 0; }

.menu-movil {
  position: fixed; inset: 0; z-index: 60; background: var(--blanco);
  padding: 80px 28px 40px; overflow-y: auto; display: none;
}
.menu-movil.abierto { display: block; }
.menu-movil .cerrar { position: absolute; top: 18px; right: 18px; background: none; border: 0; font-size: 34px; line-height: 1; color: var(--texto); cursor: pointer; }
.menu-movil details { border-bottom: 1px solid #eee; }
.menu-movil summary, .menu-movil > a {
  display: block; padding: 14px 0; font-family: var(--serif); font-size: 26px;
  color: var(--texto); text-decoration: none; cursor: pointer; list-style: none;
}
.menu-movil > a { border-bottom: 1px solid #eee; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil details a { display: block; padding: 6px 0 6px 12px; text-decoration: none; }
.menu-movil details div { padding-bottom: 14px; }

/* ---------- Grilla tipo Squarespace ---------- */
/* 26 columnas: la 1 y la 26 son márgenes. Las áreas usan fila/columna como el original. */

.grilla {
  display: grid;
  grid-template-columns: repeat(26, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--fila), auto);
  column-gap: var(--hueco);
  row-gap: var(--hueco);
  padding: 3vw 0;
}
.grilla > * { min-width: 0; }
.relleno { width: 100%; height: 100%; object-fit: cover; }
.contener { width: 100%; height: 100%; object-fit: contain; }

hr.linea { border: 0; border-top: 1px solid #808080; margin: 10px 0; }

/* ---------- Portada con video ---------- */

.portada {
  position: relative; min-height: calc(100svh - 100px);
  background: var(--gris); overflow: hidden;
  display: flex; align-items: flex-end;
}
.portada video, .portada .poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.portada::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 55%);
}
.portada .texto {
  position: relative; z-index: 1;
  padding: 0 var(--margen) 6vw; max-width: 520px;
}
.portada h1 { color: var(--rosado); margin-bottom: .5em; }
.portada p { color: var(--casi-blanco); font-size: clamp(16px, 1.97vw, 22px); margin: 0; }

/* ---------- Mañungo ---------- */

.manungo .linea     { grid-area: 3 / 5 / 4 / 13; align-self: center; }
.manungo .retrato   { grid-area: 4 / 6 / 9 / 12; }
.manungo .bio       { grid-area: 9 / 5 / 18 / 13; }
.manungo .bitacora  { grid-area: 3 / 16 / 20 / 24; margin: 0; }
.manungo .bitacora figcaption { margin-top: 10px; }
.manungo .bitacora img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Mapa de las 12 iglesias ---------- */

.iglesias {
  grid-auto-rows: minmax(2.23vw, auto);
  row-gap: 2px; column-gap: 2.5vw;
}
.iglesia-nombre { font-size: 15px; text-align: center; margin: 0; align-self: end; }
.iglesia-nombre a { text-decoration: none; }
.iglesia-nombre a:hover { color: var(--naranjo); }

.carrusel { position: relative; overflow: hidden; }
.carrusel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
}
.carrusel img.activa { opacity: 1; }

.las-12 { align-self: center; }
.las-12 .t3 { text-align: right; margin: 0; }
.las-12 a { color: var(--azul); text-decoration: none; }
.las-12 a:hover { text-decoration: underline; }

/* ---------- Los cuadernos ---------- */

.cuadernos {
  background: var(--gris) url("../fotos/sitio-fondo-blanco-gris-2.jpg") center / cover no-repeat;
}
.cuadernos .linea   { grid-area: 1 / 5 / 2 / 13; align-self: center; }
.cuadernos .camara  { grid-area: 2 / 7 / 6 / 11; }
.cuadernos .texto   { grid-area: 6 / 5 / 16 / 13; }
.cuadernos .album   { grid-area: 1 / 14 / 16 / 24; }
.cuadernos .pie     { grid-area: 16 / 18 / 17 / 24; }
.cuadernos .accion  { grid-area: 16 / 6 / 18 / 11; justify-self: center; align-self: start; }

.boton {
  display: inline-block; background: var(--texto); color: var(--blanco);
  font-family: var(--serif); font-size: 18px; text-decoration: none;
  padding: 10px 22px; transition: background .2s;
}
.boton:hover { background: var(--naranjo); }

/* ---------- Carrete de cuadernos ---------- */

.abrir { background: var(--gris); padding: 1vw var(--margen) 0; }
.abrir .t3 { text-align: right; color: var(--azul-oscuro); margin: 0; }

.carrete {
  background: var(--gris); position: relative; padding: 2vw 0 3vw;
}
.carrete .pista {
  display: flex; gap: 1.5vw; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--margen); scrollbar-width: none;
}
.carrete .pista::-webkit-scrollbar { display: none; }
.carrete .pista a { flex: 0 0 auto; scroll-snap-align: start; transition: transform .3s; }
.carrete .pista a:hover { transform: translateY(-6px); }
.carrete .pista img { height: clamp(220px, 30vw, 420px); width: auto; }
.carrete .flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.85); color: var(--texto); font-size: 22px; cursor: pointer;
}
.carrete .flecha:hover { background: var(--blanco); color: var(--naranjo); }
.carrete .izq { left: 12px; }
.carrete .der { right: 12px; }

@media (max-width: 767px) {
  .carrete .flecha { width: 34px; height: 34px; font-size: 16px; }
  .carrete .pista { scroll-padding-left: var(--margen); gap: 8px; }
  .carrete .pista a { width: auto; }
}

/* ---------- Foto de cierre ---------- */

.foto-grande { background: var(--gris); padding-top: 3vw; }
.foto-grande img { width: 100%; height: auto; }

/* ---------- La grandeza de las 12 pequeñas iglesias ---------- */

.grandeza { background: var(--rosado); padding: 1vw var(--margen) 0; text-align: center; }
.grandeza h2 { margin: 0; }
.polaroids {
  background: var(--rosado); padding: 3vw 0 6vw;
  display: flex; flex-direction: column; align-items: center;
}
.polaroids a { width: min(64vw, 720px); display: block; transition: transform .35s; }
.polaroids a:hover { transform: rotate(-1deg) scale(1.01); }
.polaroids img { width: 100%; height: auto; }

/* ---------- Pie de página ---------- */



/* ---------- Páginas interiores (pendientes) ---------- */

.pendiente { max-width: 680px; margin: 0 auto; padding: 12vh var(--margen); text-align: center; }
.pendiente h1 { font-size: clamp(36px, 6vw, 64px); color: var(--naranjo); }

/* ---------- Animación de entrada ---------- */

.aparece { opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; }
.aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .aparece { opacity: 1; transform: none; transition: none; }
  .carrusel img { transition: none; }
}

/* ---------- Tablet y móvil ---------- */

@media (max-width: 900px) {
  .nav { display: none; }
  .boton-menu { display: block; }
  .encabezado { padding: 12px 16px; }
}

@media (max-width: 767px) {
  :root { --margen: 16px; }

  .grilla {
    display: flex; flex-direction: column; gap: 18px;
    padding: 40px var(--margen);
  }
  .manungo .retrato { width: 60%; align-self: center; }
  .manungo .bitacora img { height: auto; }
  .manungo .pie, .cuadernos .pie { text-align: right; }
  .cuadernos .camara { width: 45%; align-self: center; }
  .cuadernos .accion { align-self: center; }

  /* Las iglesias pasan a una grilla de 2 columnas */
  .iglesias { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .iglesias > * { grid-area: auto !important; }
  .iglesias .carrusel { aspect-ratio: 1; }
  .iglesias .las-12 { grid-column: 1 / -1 !important; order: 99; margin-top: 16px; }
  .iglesias .las-12 .t3 { text-align: center; }

  .polaroids a { width: 88vw; }


}

/* Cada iglesia agrupa nombre + fotos; en escritorio sus hijos se ubican en la grilla. */
.iglesia { display: contents; margin: 0; }
.iglesia .carrusel { aspect-ratio: 1; align-self: start; }
@media (max-width: 767px) {
  .iglesia { display: flex; flex-direction: column-reverse; gap: 6px; }
  .iglesia .carrusel { align-self: stretch; }
  .iglesia-nombre { align-self: center; }
}

/* =========================================================
   Páginas interiores (cuadernos, iglesias y el proyecto)
   ========================================================= */

.seccion {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  background-color: var(--fondo, transparent);
  background-size: cover; background-position: center;
  overflow: hidden;
}
.seccion.arriba { justify-content: flex-start; }
.seccion.abajo  { justify-content: flex-end; }
.seccion.alto-small  { min-height: 33vh; }
.seccion.alto-medium { min-height: 66vh; }
.seccion.alto-large  { min-height: calc(100svh - 100px); }
.seccion.foto-fondo  { background-attachment: scroll; }
@media (hover: none) { .seccion.foto-fondo { background-attachment: scroll; } }
.seccion.foto-fondo.vacia { min-height: 50vw; max-height: 100vh; }
.seccion > .grilla { padding: 0; width: 100%; }

/* Diseño clásico de Squarespace: filas de 12 columnas */
.clasico { width: 100%; margin: 0 auto; padding: 0 var(--margen); }
.clasico.ancho-narrow { max-width: 50vw; }
.clasico.ancho-medium { max-width: 75vw; }
.clasico.ancho-wide   { max-width: 100%; }
.clasico.izq { margin-left: 0; }
.fila-c { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2.2vw; align-items: start; }
.fila-c > .col-c { display: flex; flex-direction: column; gap: 17px; }
.fila-c img { width: 100%; height: auto; }
.fila-c + .fila-c { margin-top: 17px; }

/* Bloques */
.bloque { min-width: 0; position: relative; }
.bloque.texto { align-self: start; }
.bloque .foto { width: 100%; height: 100%; }
.bloque .foto.cover { object-fit: cover; }
.bloque .foto.contain { object-fit: contain; }
.bloque figcaption, .pie-foto { font-size: 14px; margin-top: 8px; color: var(--texto); }
.grande { font-size: 1.3em; line-height: 1.5; }
h4, .t4, .cita { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.4; margin: 0 0 .6em; letter-spacing: 0; }
blockquote { margin: 0; padding: 0; }
blockquote h4, .cita { font-style: normal; }
.bloque p:last-child, .bloque h3:last-child, .bloque h4:last-child, .bloque .t3:last-child, .bloque .t4:last-child { margin-bottom: 0; }

/* Presentación de fotos con flechas */
.presentacion { position: relative; overflow: hidden; background: #f3f1ec; height: 100%; min-height: 220px; }
.clasico .presentacion { height: auto; aspect-ratio: 3 / 2; }
.presentacion img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s ease;
}
.presentacion img.activa { opacity: 1; }
.presentacion button {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.75); color: #333; font-size: 22px; cursor: pointer;
}
.presentacion button:hover { background: #fff; }
.presentacion .ant { left: 10px; }
.presentacion .sig { right: 10px; }
.presentacion .leyenda {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 8px 12px; font-size: 13px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.5), transparent);
}
.presentacion .leyenda:empty { display: none; }

/* Presentación a pantalla completa (sección) */
.pantalla { position: relative; width: 100%; overflow: hidden; }
.pantalla img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.pantalla img.activa { opacity: 1; }

/* Galería en cuadrícula con visor */
.cuadricula {
  display: grid; gap: 35px;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  padding: 4vw var(--margen);
}
.cuadricula button { padding: 0; border: 0; background: none; cursor: zoom-in; aspect-ratio: 1; overflow: hidden; }
.cuadricula img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cuadricula button:hover img { transform: scale(1.04); }

.visor {
  position: fixed; inset: 0; z-index: 90; background: rgba(20,20,20,.94);
  display: none; align-items: center; justify-content: center;
}
.visor.abierto { display: flex; }
.visor img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.visor button { position: absolute; background: none; border: 0; color: #fff; font-size: 40px; cursor: pointer; padding: 12px 18px; }
.visor .cerrar-v { top: 8px; right: 12px; }
.visor .ant { left: 8px; top: 50%; transform: translateY(-50%); }
.visor .sig { right: 8px; top: 50%; transform: translateY(-50%); }

/* Mapa (gris, vía Leaflet: ver .mapa[data-lat] en js/main.js) */
.mapa { width: 100%; height: 100%; min-height: 300px; position: relative; background: #e5e3df; }
.mapa .leaflet-container { width: 100%; height: 100%; font: inherit; background: #e5e3df; }
.mapa .leaflet-tile-pane { filter: grayscale(1) contrast(1.05) brightness(1.05); }
.mapa-activar {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1000; margin: 0; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(20, 20, 20, .1);
}
.mapa-activar span {
  font-family: var(--sans); font-size: 14px; color: #fff; background: rgba(0, 0, 0, .6);
  padding: 8px 16px; border-radius: 20px;
}
.mapa-activar:hover { background: rgba(20, 20, 20, .18); }

/* Video */
.video { margin: 0; }
.video video { width: 100%; height: auto; display: block; background: #000; aspect-ratio: 16 / 9; object-fit: cover; }
.bloque.video-b { align-self: start; }

/* Formulario de contacto */
.formulario { display: grid; gap: 14px; }
.formulario .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulario label { display: grid; gap: 4px; font-size: 14px; }
.formulario input, .formulario textarea {
  font: inherit; padding: 10px 12px; border: 1px solid #bbb; background: #fff; color: #333; width: 100%;
}
.formulario textarea { min-height: 130px; resize: vertical; }
.formulario button { justify-self: start; }

@media (max-width: 767px) {
  .seccion.foto-fondo.vacia { min-height: 70vw; }
  .clasico, .clasico.ancho-narrow, .clasico.ancho-medium { max-width: 100%; padding: 0 var(--margen); }
  .fila-c { display: flex; flex-direction: column; gap: 17px; }
  .fila-c > .col-c:empty { display: none; }
  .cuadricula { --cols: 2 !important; gap: 12px; }
  .presentacion { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
  .mapa { min-height: 280px; aspect-ratio: 1; }
  .bloque .foto { height: auto; }
  .seccion.alto-medium { min-height: 0; }
  .formulario .dos { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .seccion > .grilla { padding: 24px var(--margen); }
  .seccion { padding-top: 0 !important; padding-bottom: 0 !important; }
  .seccion > .clasico { padding-top: 24px; padding-bottom: 24px; }
  .seccion.alto-large { min-height: 70svh; }
}
.formulario label { color: inherit; }

/* Video de fondo en bucle (si no está el archivo, queda la foto de la sección) */
.seccion.con-video { position: relative; }
.video-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.seccion.con-video > :not(.video-fondo) { position: relative; z-index: 1; }

/* Videos de YouTube: portada con botón, el reproductor se carga al pulsar */
.video .yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; }
.video .yt img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.video .yt:hover img { opacity: .85; }
.video .play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(0,0,0,.55); }
.video .play::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.video { width: 100%; }
.video iframe { width: 100%; height: auto; }

/* ---------- Respetar la proporción original de las fotos ---------- */
/* Carruseles: toman la forma de sus fotos (la JS fija --ratio) y nunca recortan */
.presentacion,
.clasico .presentacion {
  height: auto; min-height: 0;
  aspect-ratio: var(--ratio, 1);
  background: transparent;
  align-self: start;
}
.presentacion img { object-fit: contain; }
@media (max-width: 767px) {
  .presentacion { aspect-ratio: var(--ratio, 1); }
}
/* Imágenes sueltas: completas, sin recorte */
.bloque .foto, .bloque .foto.cover { height: 100%; object-fit: contain; }
@media (max-width: 767px) { .bloque .foto, .bloque .foto.cover { height: auto; } }
/* Portada: el mapa de la bitácora completo */
.manungo .bitacora { align-self: start; }
.manungo .bitacora img { height: auto; object-fit: contain; }

/* Continuación de los relatos: mismo ancho que el texto principal (columnas 9–19 de la grilla) */
.relato-grilla { padding: 0; grid-auto-rows: auto; }
.relato { grid-column: 9 / 20; display: flex; flex-direction: column; gap: 17px; }
.relato img.foto { width: 100%; height: auto; }
.relato figure { margin: 0; }
@media (max-width: 767px) {
  .relato-grilla { padding: 24px var(--margen); }
}

/* Mapas cuadrados, con su texto debajo */
.bloque.mapa { align-self: start; }
.mapa-fig { margin: 0; }
.mapa-fig .mapa { aspect-ratio: 1; height: auto; min-height: 0; display: block; }
.mapa-fig figcaption { margin-top: 10px; }
.mapa-fig figcaption p { margin: 0; }

/* Fotos lado a lado: misma altura, centradas */
.pareja { grid-column: 5 / 23; display: flex; gap: 2.2vw; align-items: flex-start; }
.pareja > div { min-width: 0; }
.pareja img.foto { width: 100%; height: auto; display: block; }
@media (max-width: 767px) { .pareja { flex-direction: column; gap: 17px; } }
/* Los carruseles ocupan todo el ancho de su columna (sin esto, en columnas flexibles medían 0) */
.presentacion { width: 100%; }

/* ---------- Ritmo compacto para lectura fluida ---------- */
:root { --aire: clamp(16px, 2vw, 28px); }
.seccion.compacta { padding: var(--aire) 0; min-height: 0; }
/* separadores (solo una línea): casi sin margen */
.seccion.compacta:has(> .grilla > .bloque.linea:only-child) { padding: 8px 0; }
.bloque.imagen { align-self: start; }
.bloque.imagen .foto { width: 100%; height: 100%; }
/* título de cada persona un poco más cerca de su texto */
.bloque.texto h3, .bloque.texto .t3 { margin-bottom: .4em; }
.relato-grilla { row-gap: 0; }
@media (max-width: 767px) {
  .seccion.compacta { padding: 0; }
  .bloque.imagen { aspect-ratio: auto !important; }
}

/* Foto o carrusel junto a un texto: el texto centrado verticalmente respecto a la imagen (como en el original) */
.fila-c:has(> .col-c .presentacion, > .col-c img, > .col-c .video) { align-items: center; }
/* Imagen que hace de fondo con texto encima: llena su espacio con su encuadre original */
.bloque .foto.como-fondo { width: 100%; height: 100%; object-fit: cover; }
.bloque.imagen:has(.como-fondo) { align-self: stretch; }
@media (max-width: 767px) { .bloque .foto.como-fondo { height: 60vh; } }

/* ---------- Ajustes tras comparar con el original ---------- */
h4, .t4, .cita { font-size: clamp(18px, 1.81vw, 26px); }
/* textos sobre fondo azul oscuro: rosados, como en el original */
.seccion.oscura figcaption, .seccion.oscura .pie-foto { color: var(--rosado); }

/* formulario de contacto como en el original */
.formulario { color: #fff; gap: 16px; }
.formulario .grupo { margin: 0; font-size: 15px; }
.formulario label { font-size: 15px; letter-spacing: .03em; }
.formulario label span { opacity: .6; }
.formulario input, .formulario textarea { border: 1px solid #fff; background: rgba(255,255,255,.95); color: #333; }
.formulario .enviar { display: flex; justify-content: flex-end; }
.formulario .enviar button {
  background: #fff; color: var(--naranjo); border: 0; padding: 12px 34px; cursor: pointer;
  font-family: var(--sans); font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
}
.formulario .enviar button:hover { background: var(--rosado); }
.formulario .enviar button[disabled] { opacity: .6; cursor: wait; }
.formulario .estado { margin: 0; min-height: 1.4em; font-size: 15px; }
.formulario .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Teléfono: las columnas se apilan a todo el ancho (sin esto, algunos carruseles medían 0) */
@media (max-width: 767px) {
  .fila-c, .fila-c:has(> .col-c .presentacion, > .col-c img, > .col-c .video) { align-items: stretch; }
}

/* Fondos enmarcados (como en el original): la foto o el video no llegan al borde */
.seccion.enmarcada { background-image: none !important; }
.seccion.enmarcada::before {
  content: ""; position: absolute; inset: 2.97vw; z-index: 0;
  background: var(--img) var(--pos, center) / cover no-repeat;
}
.seccion.enmarcada > * { position: relative; z-index: 1; }
.seccion.enmarcada > .video-fondo { position: absolute; inset: 2.97vw; width: auto; height: auto; z-index: 0; }
@media (max-width: 767px) {
  .seccion.enmarcada::before, .seccion.enmarcada > .video-fondo { inset: 10px; }
}

/* Fotos en pareja: tamaño y separación del original */
.pareja { grid-column: 1 / -1; justify-content: center; gap: 17.8vw; }
.pareja > div { flex: 0 0 auto; width: calc(27.6vw * var(--r, 1)); }
@media (max-width: 767px) { .pareja > div { width: 100%; } }
/* Pie de foto pegado a su imagen */
figure.con-pie { margin: 0; }
figure.con-pie figcaption { margin-top: 10px; }
figure.con-pie figcaption p { margin: 0; }
.bloque.imagen:has(figure.con-pie) { aspect-ratio: auto !important; }
.bloque.imagen figure.con-pie .foto { height: auto; }
.bloque.galeria { align-self: start; }
.formulario label { display: block; }
.formulario label input, .formulario label textarea { display: block; margin-top: 4px; }

/* Franjas con solo una foto o un video: completos, sin efecto fijo, con su proporción real */
.foto-completa { background: var(--fondo, transparent); }
.foto-completa .medio-completo { display: block; width: 100%; height: auto; }
.foto-completa.con-marco { padding: 2.97vw; }
@media (max-width: 767px) { .foto-completa.con-marco { padding: 10px; } }
/* Mapas con la proporción del original (alto = 69,35 % del ancho, ~3:2) */
.mapa-fig .mapa { aspect-ratio: 100 / 69.35; }
/* Teléfono: todos los bloques ocupan el ancho completo al apilarse */
@media (max-width: 767px) {
  .grilla > .bloque { align-self: stretch !important; width: 100%; }
  .grilla > .bloque.imagen img.foto { height: auto; }
}
/* Teléfono: los fondos enmarcados conservan su marco en los cuatro lados (como el original: 11px) */
@media (max-width: 767px) {
  .seccion.foto-completa.con-marco { padding: 11px !important; }
}
/* Teléfono: retratos y dibujos pequeños con el mismo tamaño y recorte que en el ordenador, centrados */
@media (max-width: 767px) {
  .grilla > .bloque.imagen.retrato {
    width: min(var(--w), 45vw) !important; aspect-ratio: var(--ar) !important;
    align-self: center !important; margin: 0 auto -8px;
  }
  .grilla > .bloque.imagen.retrato img.foto { width: 100%; height: 100%; object-fit: contain; }
}
@media (max-width: 767px) {
  .grilla > .bloque.imagen.retrato { position: relative; min-height: 0; }
  .grilla > .bloque.imagen.retrato img.foto { position: absolute; inset: 0; }
}
@media (max-width: 767px) {
  .grilla > .bloque.imagen.retrato { width: min(calc(var(--w) * 1.6), 62vw) !important; }
}

/* Teléfono: texto continuo, con separación de lectura normal entre párrafos */
@media (max-width: 767px) {
  main p { margin-bottom: 0.7em; line-height: 1.6; }
  main .grilla { gap: 10px; }
  main .grilla > .bloque.texto + .bloque.texto { margin-top: -2px; }
  main .fila-c, main .fila-c > .col-c { gap: 10px; }
  main .relato { gap: 10px; }
  main .bloque.texto p:last-child, main .col-c p:last-child { margin-bottom: 0; }
  main h3, main .t3 { margin-bottom: .35em; }
}
@media (max-width: 767px) {
  main .relato, main .fila-c > .col-c { gap: 0; }
  main .relato > :is(img, figure, .presentacion, hr, .video),
  main .col-c > :is(img, figure, .presentacion, hr, .video, .fila-c) { margin: 10px 0; }
}

/* Citas: sangría y aire como en el original (40px a cada lado, 28px arriba y abajo) */
blockquote { margin: 0 40px; }
blockquote h4, blockquote .cita { margin: 28px 0; line-height: 1.37; }


@media (max-width: 767px) {
  blockquote { margin: 0 20px; }
  blockquote .cita { margin: 18px 0; }
}

/* Columnas de texto como flujo normal: los márgenes se combinan (no se suman) y las citas quedan con 28px exactos */
.relato, .fila-c > .col-c { display: block; }
.relato > :is(img, figure, .presentacion, .pareja, hr, .video, .fila-c, .mapa-fig),
.fila-c > .col-c > :is(img, figure, .presentacion, hr, .video, .fila-c, .mapa-fig) { margin-top: 17px; margin-bottom: 17px; }
.relato > :first-child, .fila-c > .col-c > :first-child { margin-top: 0; }
.relato > :last-child, .fila-c > .col-c > :last-child { margin-bottom: 0; }
blockquote { margin: 28px 40px; }
blockquote h4, blockquote .cita { margin: 0; }
blockquote .cita + * { margin-top: 1em; }
@media (max-width: 767px) {
  .relato > :is(img, figure, .presentacion, .pareja, hr, .video, .fila-c, .mapa-fig),
  .fila-c > .col-c > :is(img, figure, .presentacion, hr, .video, .fila-c, .mapa-fig) { margin-top: 10px; margin-bottom: 10px; }
  blockquote { margin: 18px 20px; }
}

/* Ordenador: lectura más cómoda en los relatos (interlineado algo mayor, párrafos continuos) */
@media (min-width: 768px) {
  main .bloque.texto p, main .relato p, main .col-c p { line-height: 1.7; margin-bottom: 0.85em; }
  main .bloque.texto p:last-child, main .relato > p:last-child, main .col-c > p:last-child { margin-bottom: 0; }
}


/* ================= Rediseño (encargo de mejoras) ================= */

/* Títulos con aspecto conservado */
.titulo-cuaderno .antetitulo { display: block; font-family: var(--sans); margin-bottom: .2em; }
.titulo-cuaderno .nombre { font-style: italic; }
h1 em, h2 em { font-style: italic; }

/* Imágenes: el alto sale de width/height del HTML (sin saltos al cargar) */
img { height: auto; }

/* A. Polaroids en mosaico */
.polaroids {
  display: grid; grid-template-columns: repeat(4, minmax(0, 290px));
  justify-content: center; gap: clamp(20px, 3vw, 44px) clamp(16px, 2.5vw, 36px);
  padding: 3vw var(--margen) 6vw; align-items: start;
}
.polaroids a.polaroid {
  width: auto; position: relative; display: block; text-decoration: none;
  transform: rotate(var(--giro, 0deg)); transition: transform .3s ease;
}
.polaroids a.polaroid:nth-child(4n+1) { --giro: -2.5deg; }
.polaroids a.polaroid:nth-child(4n+2) { --giro: 1.8deg; }
.polaroids a.polaroid:nth-child(4n+3) { --giro: -1.2deg; }
.polaroids a.polaroid:nth-child(4n)   { --giro: 2.8deg; }
.polaroids a.polaroid:nth-child(8n+5) { --giro: 2.2deg; }
.polaroids a.polaroid:nth-child(8n+6) { --giro: -2.8deg; }
.polaroids a.polaroid:nth-child(8n+7) { --giro: 1.4deg; }
.polaroids a.polaroid:nth-child(8n)   { --giro: -1.8deg; }
.polaroids a.polaroid:hover, .polaroids a.polaroid:focus-visible { transform: rotate(0deg) translateY(-6px); }
.polaroids a.polaroid:focus-visible { outline: 3px solid var(--naranjo); outline-offset: 6px; }
.polaroids a.polaroid img { width: 100%; height: auto; }
/* rótulo: etiqueta de papel pegada sobre el borde inferior del marco, escrita a mano */
.polaroid .rotulo {
  position: absolute; left: 50%; bottom: 1.5%; transform: translateX(-50%) rotate(-1.5deg);
  background: #fbf7ec; box-shadow: 0 1px 2px rgba(0,0,0,.18);
  padding: 2px 14px 3px; white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.35vw, 19px); color: #333;
}
@media (max-width: 1024px) { .polaroids { grid-template-columns: repeat(3, minmax(0, 290px)); } }
@media (max-width: 600px)  { .polaroids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } .polaroid .rotulo { font-size: 14px; padding: 1px 8px 2px; } }

/* B6. Foto grande apaisada */
.foto-grande img { aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 62%; }
@media (max-width: 767px) { .foto-grande img { aspect-ratio: 4 / 3; } }

/* B7. Sin animación si ya está en pantalla o con movimiento reducido */
.aparece.sin-anim { transition: none; }

/* B8. Miniaturas de la grilla de iglesias: mínimo 120 px en escritorio */
@media (min-width: 1100px) { .iglesias .carrusel { min-width: 120px; } }
/* Tablet: 4 columnas parejas (el mosaico irregular no cabe con miniaturas de 120 px) */
@media (min-width: 768px) and (max-width: 1099px) {
  .iglesias.grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 14px 22px; padding: 48px var(--margen); }
  .iglesias > * { grid-area: auto !important; }
  .iglesia { display: flex; flex-direction: column-reverse; gap: 6px; }
  .iglesia .carrusel { aspect-ratio: 1; align-self: stretch; }
  .iglesia-nombre { align-self: center; }
  .iglesias .las-12 { grid-column: 1 / -1 !important; order: 99; margin-top: 12px; }
  .iglesias .las-12 .t3 { text-align: center; }
}
.iglesias .carrusel:focus-visible { outline: 3px solid var(--naranjo); outline-offset: 3px; }

/* B10. Barra de progreso de lectura bajo el encabezado */
.encabezado { position: sticky; }
.progreso { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; pointer-events: none; }
.progreso span { display: block; height: 100%; width: 0; background: var(--naranjo); transition: width .1s linear; }

/* B10. Navegación entre cuadernos / atributos */
.entre-paginas {
  display: flex; justify-content: space-between; gap: 20px;
  max-width: 1100px; margin: 0 auto; padding: 40px var(--margen) 44px;
  border-top: 1px solid #ddd;
}
.entre-paginas a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--texto); max-width: 48%; }
.entre-paginas a.sig { text-align: right; margin-left: auto; }
.entre-paginas span { font-size: 14px; letter-spacing: .04em; }
.entre-paginas strong { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(22px, 2.4vw, 32px); color: var(--naranjo); }
.entre-paginas a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.entre-paginas a:focus-visible { outline: 3px solid var(--naranjo); outline-offset: 6px; }

/* B11. Volver arriba */
.subir {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ccc;
  background: rgba(255,255,255,.92); color: var(--texto); font-size: 20px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); opacity: 0; transform: translateY(8px);
  transition: opacity .25s, transform .25s;
}
.subir.ver { opacity: 1; transform: none; }
.subir.oculto { opacity: 0 !important; pointer-events: none; }
.subir:hover { color: var(--naranjo); }
.subir:focus-visible { outline: 3px solid var(--naranjo); outline-offset: 3px; }

/* C13 / 22. Voces: narración en Montserrat; diálogos en Garamond con sangría y filete */
main :is(.bloque.texto, .relato, .col-c, .bio, .cuadernos .texto) p:not(.chico):not(.grande):not(.cita):not(.dialogo) {
  font-family: var(--sans); font-size: 17.5px; line-height: 1.65; letter-spacing: 0; max-width: 64ch;
}
main p.dialogo {
  font-family: var(--serif); font-size: 19.5px; line-height: 1.6; letter-spacing: 0; max-width: 60ch;
  margin-left: 1.5em; padding-left: .9em; border-left: 2px solid var(--naranjo);
}
@media (max-width: 767px) {
  main :is(.bloque.texto, .relato, .col-c, .bio, .cuadernos .texto) p:not(.chico):not(.grande):not(.cita):not(.dialogo) { font-size: 17px; }
  main p.dialogo { font-size: 18.5px; margin-left: .75em; padding-left: .75em; }
}

/* D17. Foco visible en controles */
.presentacion button:focus-visible, .carrete .flecha:focus-visible, .boton:focus-visible,
.formulario button:focus-visible, .video .yt:focus-visible, .cuadricula button:focus-visible, .visor button:focus-visible,
.nav a:focus-visible, .boton-menu:focus-visible { outline: 3px solid var(--naranjo); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .polaroids a.polaroid, .subir, .progreso span { transition: none; }
}
/* Título de cuaderno: "El cuaderno de" pequeño (como antes) y el nombre grande */
h1.titulo-cuaderno .antetitulo { font-size: clamp(16px, 1.97vw, 22px); line-height: 1.5; letter-spacing: .02em; }
h1.titulo-cuaderno .nombre { display: block; }
.polaroid picture { display: block; }

/* ===== Segunda ronda: recorrido de los cuadernos ===== */

/* E2 / 20. Portada del cuaderno: "cuaderno N de 12" y señal de scroll */
.numero-cuaderno {
  margin: .2em 0 0; color: var(--rosado); font-family: var(--sans);
  font-size: clamp(12px, 1.1vw, 15px); letter-spacing: .14em; text-transform: lowercase;
}
.senal-scroll {
  position: absolute; left: 50%; bottom: 18px; z-index: 2; width: 1px; height: 54px;
  background: rgba(255, 255, 255, .35); overflow: hidden; pointer-events: none;
}
.senal-scroll::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: #fff; animation: bajar 2.2s ease-in-out infinite;
}
@keyframes bajar { to { top: 100%; } }

/* 16. Navegación entre cuadernos con la tapa */
.entre-paginas a { flex-direction: row; align-items: center; gap: 16px; }
.entre-paginas a.sig { flex-direction: row-reverse; }
.entre-paginas .txt { display: flex; flex-direction: column; gap: 4px; }
.entre-paginas a img {
  width: clamp(56px, 6vw, 84px); height: auto; flex: 0 0 auto;
  box-shadow: 0 3px 10px rgba(0,0,0,.18); transform: rotate(-2deg); transition: transform .3s;
}
.entre-paginas a.sig img { transform: rotate(2deg); }
.entre-paginas a:hover img { transform: none; }

/* 17. Carrete: el cuaderno actual */
.carrete .pista a { position: relative; }
.carrete .pista a.actual img { opacity: .45; }
.carrete .pista a.actual:hover { transform: none; }
.carrete .aqui {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%) rotate(-2deg);
  background: #fff; padding: 2px 12px 3px; white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--naranjo);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* 18. Índice de capítulos */
[id^="cap-"] { scroll-margin-top: 96px; }
.indice { display: none; }
@media (min-width: 1200px) {
  .indice {
    display: block; position: fixed; left: 14px; top: 50%; transform: translateY(-50%); z-index: 30;
    transition: opacity .25s, visibility .25s;
  }
  .indice.oculto { opacity: 0; pointer-events: none; }
  .indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .indice a { position: relative; display: block; text-decoration: none; }
  .indice img {
    width: 50px; height: 50px; object-fit: contain; background: #fff; padding: 3px;
    border: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0,0,0,.08); transition: border-color .2s, transform .2s;
  }
  .indice a:hover img, .indice a:focus-visible img { transform: scale(1.06); }
  .indice a[aria-current="true"] img { border: 2px solid var(--naranjo); padding: 2px; }
  .indice span {
    position: absolute; left: 62px; top: 50%; transform: translateY(-50%) rotate(-1.5deg);
    background: #fff; padding: 2px 12px 3px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.15);
    font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--texto);
    opacity: 0; visibility: hidden; transition: opacity .2s;
  }
  .indice a:hover span, .indice a:focus-visible span { opacity: 1; visibility: visible; }
  .indice a[aria-current="true"] span { color: var(--naranjo); }
  .indice a:focus-visible { outline: none; }
  .indice a:focus-visible img { outline: 3px solid var(--naranjo); outline-offset: 2px; }
}
/* teléfono y tablet: nombre del capítulo junto a la barra de progreso */
.progreso .capitulo {
  position: absolute; right: var(--margen); top: 3px; display: none;
  background: rgba(255,255,255,.94); padding: 1px 10px 3px; border-radius: 0 0 4px 4px;
  font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--texto);
  box-shadow: 0 2px 4px rgba(0,0,0,.06); white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 1199px) { .progreso .capitulo:not(:empty) { display: block; } }

/* 19. Menú "Los 12 cuadernos": grilla de tapas */
.submenu.tapas {
  display: grid; grid-template-columns: repeat(4, 96px); gap: 14px 12px; padding: 18px 20px; min-width: 0;
}
.submenu.tapas a { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; white-space: normal; text-align: center; }
.submenu.tapas img { width: 72px; height: auto; box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: transform .2s; }
.submenu.tapas a:hover img, .submenu.tapas a:focus-visible img { transform: translateY(-3px); }
.submenu.tapas span { font-size: 13px; line-height: 1.25; }
.submenu.tapas a[aria-current="page"] img { outline: 2px solid var(--naranjo); outline-offset: 3px; }
.submenu.tapas a[aria-current="page"] span { color: var(--naranjo); }
.submenu.tapas a:hover { opacity: 1; }
.submenu.tapas a:hover span { color: var(--naranjo); }

/* 24. Videos: control de pausa y reproducción */
.control-video {
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.8); color: var(--texto); font-size: 13px; line-height: 38px; padding: 0;
  opacity: .75; transition: opacity .2s;
}
.control-video:hover, .control-video:focus-visible { opacity: 1; }
.control-video:focus-visible { outline: 3px solid var(--naranjo); outline-offset: 2px; }
.foto-completa { position: relative; }

/* 26. Pies de foto: un solo estilo */
main .seccion figure:not(.mapa-fig) > figcaption {
  font-family: var(--sans); font-size: 14px; line-height: 1.45; letter-spacing: .01em;
  color: var(--texto); text-align: left; margin-top: 10px; font-style: normal;
}
main .seccion figure:not(.mapa-fig) > figcaption :is(p, span) {
  color: inherit !important; text-align: left !important; font-size: inherit; margin: 0;
}
main .seccion.oscura figure:not(.mapa-fig) > figcaption { color: var(--rosado); }
.presentacion .leyenda { font-family: var(--sans); font-size: 14px; }

/* 27. Carruseles: contador y teclado */
.presentacion .contador {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  background: rgba(255,255,255,.85); color: var(--texto); border-radius: 10px;
  padding: 1px 9px; font-size: 12px; letter-spacing: .06em; pointer-events: none;
}
.presentacion:focus-visible { outline: 3px solid var(--naranjo); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .senal-scroll::after { animation: none; top: 30%; }
  .indice, .indice span, .indice img, .entre-paginas a img, .submenu.tapas img { transition: none; }
}
.seccion.con-video > .control-video, .portada > .control-video { position: absolute; z-index: 5; }
h1.titulo-cuaderno { margin-bottom: .1em; }
.submenu.tapas a[aria-current="page"] { border-bottom: 0; }
@media (min-width: 1200px) { .indice li.oscura img { background: var(--azul-oscuro); border-color: var(--azul-oscuro); } .indice li.oscura a[aria-current="true"] img { border-color: var(--naranjo); } }

/* Las 12 iglesias: nombre bajo cada foto (mismo estilo que los nombres de la portada) y pie en el visor */
.foto-iglesia { margin: 0; min-width: 0; }
.foto-iglesia button { display: block; width: 100%; }
.foto-iglesia .iglesia-nombre { margin-top: 10px; }
.visor-foto { margin: 0; display: flex; flex-direction: column; align-items: center; }
.visor-foto img { max-height: 82vh; }
.visor-foto figcaption { font-size: 15px; margin-top: 10px; color: var(--rosado); }

/* Atributos: navegación también en el bloque azul (mismo componente, en salmón) */
.entre-paginas.en-entrada { max-width: none; margin: 1.5em 0 0; padding: 20px 0 0; border-top-color: rgba(255, 203, 189, .35); }
.entre-paginas.en-entrada a, .entre-paginas.en-entrada strong { color: var(--rosado); }
/* Mosaico: la polaroid del atributo actual, atenuada y sin enlace */
.polaroids a.polaroid[aria-current="page"] { opacity: .45; cursor: default; }
.polaroids a.polaroid[aria-current="page"]:hover { transform: rotate(var(--giro)); }
/* Visor: controles de al menos 44 × 44 px, flechas separadas del borde */
.visor button { min-width: 44px; min-height: 44px; }
.visor .ant { left: var(--margen); }
.visor .sig { right: var(--margen); }

/* Atributos: texto de entrada en dos columnas (usa la mitad derecha, antes vacía) */
@media (min-width: 1000px) {
  .entrada-atributo .clasico > .fila-c > .col-c:first-child { grid-column: 1 / -1 !important; }
  .entrada-atributo .clasico > .fila-c > .col-c:empty { display: none; }
  .entrada-atributo .bloque.texto { grid-column: 5 / 23 !important; grid-row: 1 / -1 !important; }
  .entrada-atributo :is(.col-c, .bloque.texto):has(> h1) { column-count: 2; column-gap: 48px; }
  .entrada-atributo :is(h1, .entre-paginas) { column-span: all; }
  .entrada-atributo :is(.col-c, .bloque.texto):has(> h1) > p { max-width: none; }
}

/* Pie de página: una franja de tres zonas, igual en todo el sitio */
.pie-pagina {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 40px;
  background: var(--blanco); border-top: 1px solid #ddd; padding: 32px var(--margen);
}
.pie-pagina .logo-pie { justify-self: start; }
.pie-pagina .logo-pie img { width: 150px; }
.pie-pagina .pie-centro { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pie-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; list-style: none; margin: 0; padding: 0; }
.pie-nav a { font-size: 15px; color: var(--texto); text-decoration: none; letter-spacing: .02em; }
.pie-nav a:hover { opacity: .65; }
.pie-pagina .redes svg { width: 18px; height: 18px; fill: var(--texto); display: block; }
.pie-pagina .financiamiento { justify-self: end; display: flex; align-items: flex-start; gap: 16px; }
.pie-pagina .fondo { width: 300px; margin: 0; }
.pie-pagina .mincap { width: 190px; height: auto; flex: 0 0 auto; }
.pie-pagina a:focus-visible { outline: 3px solid var(--naranjo); outline-offset: 3px; }
@media (max-width: 1199px) {
  .pie-pagina { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pie-pagina .logo-pie, .pie-pagina .financiamiento { justify-self: center; }
}
@media (max-width: 599px) {
  .pie-pagina .financiamiento { flex-direction: column; align-items: center; }
  .pie-pagina .fondo { width: auto; max-width: 320px; }
}

/* ===== El proyecto ===== */
/* Portada: sin franja de color bajo la foto */
.portada-proyecto { padding-bottom: 0 !important; }
/* Cita de entrada: blockquote con el mismo aspecto que el antiguo título */
blockquote.entrada { margin: 0; }
blockquote.entrada .cita { font-size: clamp(18px, 1.81vw, 26px); line-height: 1.4 !important; }
/* Capítulos: subtítulo como los de los cuadernos, alineado con el texto; imágenes al lado */
.capitulo .subtitulo { text-align: left; margin-top: .4em; }
.capitulo .bloque.imagenes { display: flex; flex-direction: column; gap: 28px; }
.capitulo .bloque.imagenes .foto { height: auto; }
.capitulo figcaption, .capitulo figcaption p { font-family: var(--sans); font-size: 14px; color: var(--texto); text-align: right; }
/* Créditos: ficha en dos columnas, a la derecha */
.ficha-creditos { font-size: 14px; line-height: 1.5; }
.ficha-creditos h2 { font-family: var(--sans); font-size: 14px; line-height: 1.5; letter-spacing: .02em; text-align: right; margin: 0 0 1.2em; }
.ficha-creditos dl { display: grid; grid-template-columns: fit-content(15em) max-content; justify-content: end; column-gap: 16px; row-gap: 0; margin: 0; }
.ficha-creditos dl > div { display: contents; }
.ficha-creditos dt { grid-column: 1; grid-row: span var(--n, 1); text-align: right; color: var(--texto); padding-top: .9em; }
.ficha-creditos dd { grid-column: 2; margin: 0; color: var(--azul-oscuro); }
.ficha-creditos dl > div > dt + dd { padding-top: .9em; }
.ficha-creditos dl > div:first-child > dt, .ficha-creditos dl > div:first-child > dt + dd { padding-top: 0; }
@media (max-width: 767px) {
  .ficha-creditos h2 { text-align: left; }
  .ficha-creditos dl { grid-template-columns: 1fr; justify-content: start; }
  .ficha-creditos dt, .ficha-creditos dd { grid-column: 1; grid-row: auto; text-align: left; }
  .ficha-creditos dl > div > dt + dd { padding-top: 0; }
}
/* Formulario: velo azul marino para que se lean los rótulos */
.seccion.con-velo::before { content: ""; position: absolute; inset: 0; background: rgba(12, 44, 77, .35); pointer-events: none; }
.seccion.con-velo > .grilla { position: relative; z-index: 1; }
.formulario .campo { display: grid; gap: 4px; }
.formulario input:focus-visible, .formulario textarea:focus-visible { outline: 3px solid var(--naranjo); outline-offset: 2px; }
main .seccion.capitulo figure > figcaption, main .seccion.capitulo figure > figcaption :is(p, span) { text-align: right !important; }

/* Retratos de personaje en los cuadernos: misma altura visual que el retrato de
   Mañungo en la portada (~245px), ancho automático, tope de 420px. Independiente
   de la grilla. No aplica al retrato de Mañungo (id="cap-1", la fachada del
   inicio de cada cuaderno). */
section:not(#cap-1) > .grilla > .bloque.imagen.retrato {
  grid-column: 1 / -1 !important; grid-row: auto !important;
  width: auto !important; aspect-ratio: auto !important; height: 245px !important;
  justify-self: center !important; margin: 0 0 20px !important; position: static !important;
}
section:not(#cap-1) > .grilla > .bloque.imagen.retrato img.foto {
  width: auto !important; height: 100% !important; max-width: 420px !important;
  object-fit: contain !important; position: static !important;
}
@media (max-width: 767px) {
  section:not(#cap-1) > .grilla > .bloque.imagen.retrato { height: 196px !important; }
}

/* B6. Zonas táctiles de al menos 44×44 px, sin cambiar el aspecto visible (relleno invisible) */
.pie-nav a, .nav a, .encabezado .redes a, .pie-pagina .redes a, .iglesia-nombre a,
.foto-iglesia .iglesia-nombre a, .menu-movil .cerrar {
  position: relative;
}
.pie-nav a::before, .nav a::before, .encabezado .redes a::before, .pie-pagina .redes a::before,
.iglesia-nombre a::before, .foto-iglesia .iglesia-nombre a::before, .menu-movil .cerrar::before {
  content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: max(44px, 100%); height: max(44px, 100%);
}

/* B8. Menú móvil: flecha que indica que "Los 12 cuadernos" y "Las 12 iglesias" se despliegan.
   La flecha va con position:absolute (no flex), para que "transform: rotate()" funcione siempre:
   dentro de un contenedor flex, un pseudo-elemento pasa a "block" y algunos navegadores
   dejan de aplicarle transform. */
.menu-movil summary { position: relative; padding-right: 28px; list-style: none; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary::after {
  content: "▾"; position: absolute; right: 2px; top: 50%; font-size: 18px; color: currentColor;
  transform: translateY(-50%); transition: transform .2s;
}
.menu-movil details[open] summary::after { transform: translateY(-50%) rotate(180deg); }

/* B9. Bloque azul de entrada de los atributos: márgenes mínimos en celular */
@media (max-width: 767px) {
  .entrada-atributo { padding: 24px var(--margen) !important; }
  .entrada-atributo h1 { margin-bottom: .4em; }
}

/* ============================================================
   PORTADA (rediseño)
   ============================================================ */

/* A. Señal de scroll en la portada con video (mismo componente que en los cuadernos) */
.portada { position: relative; }
.portada .senal-scroll { bottom: 28px; }

/* B. Mañungo — texto unificado, una sola columna */
.manungo-solo {
  max-width: 600px; margin: 0 auto; padding: 56px var(--margen) 40px; text-align: center;
}
.manungo-solo .retrato-manungo { width: 189px; margin: 0 auto 6px; display: block; }
.manungo-solo h2.naranjo { margin: 0 0 8px; font-size: 44px; text-align: center; }
.manungo-solo .bio { text-align: left; }
.manungo-solo .bio p.subtitulo-manungo {
  font-family: var(--serif) !important; font-style: italic; font-size: 19px !important; color: #4a4a4a;
  text-align: center; margin: 0 0 16px;
}
.manungo-solo .bio p {
  font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--texto); margin: 0 0 .8em;
}
.manungo-solo .bio p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .manungo-solo { padding: 40px var(--margen) 30px; }
  .manungo-solo .retrato-manungo { width: 144px; }
}

/* C. "~ los 12 cuadernos": mapa con índice */
.mapa-indice {
  background: linear-gradient(to bottom, #fff 0, var(--gris) 180px);
  padding: 48px var(--margen) 56px;
}
.mapa-indice .titulo-mapa {
  text-align: right; color: var(--naranjo); margin: 0 0 32px; max-width: 1100px; margin-left: auto; margin-right: auto;
}
.mapa-indice-cont {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 440px 1fr; align-items: center; gap: 80px;
}
.mapa-bitacora { margin: 0; }
.mapa-marco { position: relative; }
.mapa-marco picture, .mapa-marco img { display: block; width: 100%; height: auto; }
.mapa-bitacora figcaption { margin-top: 10px; font-family: var(--sans); font-size: 14px; color: var(--texto); }
.mapa-marco .marcas { position: absolute; inset: 0; }
.mapa-marco .marca {
  position: absolute; width: 40px; height: 40px; transform: translate(-50%, -50%); display: block;
}
.mapa-marco .marca span {
  position: absolute; inset: 6px; border-radius: 50%; border: 2px solid transparent; transition: border-color .2s;
}
.lista-pueblos { list-style: none; margin: 0; padding: 0; }
.lista-pueblos li { border-bottom: 1px solid #cfd0d1; }
.lista-pueblos li:first-child { border-top: 1px solid #cfd0d1; }
.lista-pueblos a {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 4px; text-decoration: none;
  color: var(--texto); transition: color .2s, transform .2s;
}
.lista-pueblos .n { font-family: var(--sans); font-size: 11px; color: #999; flex: 0 0 auto; }
.lista-pueblos .nombre { font-family: var(--serif); font-size: 19px; }
.lista-pueblos .flecha { margin-left: auto; opacity: 0; transition: opacity .2s; color: var(--naranjo); }
@media (max-width: 1024px) {
  .mapa-indice-cont { grid-template-columns: 360px 1fr; gap: 40px; }
}
@media (max-width: 767px) {
  .mapa-indice-cont { grid-template-columns: 1fr; gap: 28px; }
  .mapa-bitacora { max-width: 320px; margin: 0 auto; }
  .lista-pueblos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .lista-pueblos .nombre { font-size: 17px; }
  .lista-pueblos .flecha { display: none; }
}
.mapa-indice-cont:has(.lista-pueblos li:nth-child(1) a:hover) .marcas .marca:nth-child(1) span,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(1) a:focus-visible) .marcas .marca:nth-child(1) span,
.mapa-indice-cont:has(.marcas .marca:nth-child(1):hover) .marcas .marca:nth-child(1) span { border-color: var(--naranjo); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(1) a:hover) .lista-pueblos li:nth-child(1) a,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(1) a:focus-visible) .lista-pueblos li:nth-child(1) a,
.mapa-indice-cont:has(.marcas .marca:nth-child(1):hover) .lista-pueblos li:nth-child(1) a { color: var(--naranjo); transform: translateX(6px); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(1) a:hover) .lista-pueblos li:nth-child(1) .flecha,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(1) a:focus-visible) .lista-pueblos li:nth-child(1) .flecha,
.mapa-indice-cont:has(.marcas .marca:nth-child(1):hover) .lista-pueblos li:nth-child(1) .flecha { opacity: 1; }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(2) a:hover) .marcas .marca:nth-child(2) span,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(2) a:focus-visible) .marcas .marca:nth-child(2) span,
.mapa-indice-cont:has(.marcas .marca:nth-child(2):hover) .marcas .marca:nth-child(2) span { border-color: var(--naranjo); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(2) a:hover) .lista-pueblos li:nth-child(2) a,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(2) a:focus-visible) .lista-pueblos li:nth-child(2) a,
.mapa-indice-cont:has(.marcas .marca:nth-child(2):hover) .lista-pueblos li:nth-child(2) a { color: var(--naranjo); transform: translateX(6px); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(2) a:hover) .lista-pueblos li:nth-child(2) .flecha,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(2) a:focus-visible) .lista-pueblos li:nth-child(2) .flecha,
.mapa-indice-cont:has(.marcas .marca:nth-child(2):hover) .lista-pueblos li:nth-child(2) .flecha { opacity: 1; }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(3) a:hover) .marcas .marca:nth-child(3) span,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(3) a:focus-visible) .marcas .marca:nth-child(3) span,
.mapa-indice-cont:has(.marcas .marca:nth-child(3):hover) .marcas .marca:nth-child(3) span { border-color: var(--naranjo); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(3) a:hover) .lista-pueblos li:nth-child(3) a,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(3) a:focus-visible) .lista-pueblos li:nth-child(3) a,
.mapa-indice-cont:has(.marcas .marca:nth-child(3):hover) .lista-pueblos li:nth-child(3) a { color: var(--naranjo); transform: translateX(6px); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(3) a:hover) .lista-pueblos li:nth-child(3) .flecha,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(3) a:focus-visible) .lista-pueblos li:nth-child(3) .flecha,
.mapa-indice-cont:has(.marcas .marca:nth-child(3):hover) .lista-pueblos li:nth-child(3) .flecha { opacity: 1; }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(4) a:hover) .marcas .marca:nth-child(4) span,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(4) a:focus-visible) .marcas .marca:nth-child(4) span,
.mapa-indice-cont:has(.marcas .marca:nth-child(4):hover) .marcas .marca:nth-child(4) span { border-color: var(--naranjo); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(4) a:hover) .lista-pueblos li:nth-child(4) a,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(4) a:focus-visible) .lista-pueblos li:nth-child(4) a,
.mapa-indice-cont:has(.marcas .marca:nth-child(4):hover) .lista-pueblos li:nth-child(4) a { color: var(--naranjo); transform: translateX(6px); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(4) a:hover) .lista-pueblos li:nth-child(4) .flecha,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(4) a:focus-visible) .lista-pueblos li:nth-child(4) .flecha,
.mapa-indice-cont:has(.marcas .marca:nth-child(4):hover) .lista-pueblos li:nth-child(4) .flecha { opacity: 1; }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(5) a:hover) .marcas .marca:nth-child(5) span,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(5) a:focus-visible) .marcas .marca:nth-child(5) span,
.mapa-indice-cont:has(.marcas .marca:nth-child(5):hover) .marcas .marca:nth-child(5) span { border-color: var(--naranjo); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(5) a:hover) .lista-pueblos li:nth-child(5) a,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(5) a:focus-visible) .lista-pueblos li:nth-child(5) a,
.mapa-indice-cont:has(.marcas .marca:nth-child(5):hover) .lista-pueblos li:nth-child(5) a { color: var(--naranjo); transform: translateX(6px); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(5) a:hover) .lista-pueblos li:nth-child(5) .flecha,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(5) a:focus-visible) .lista-pueblos li:nth-child(5) .flecha,
.mapa-indice-cont:has(.marcas .marca:nth-child(5):hover) .lista-pueblos li:nth-child(5) .flecha { opacity: 1; }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(6) a:hover) .marcas .marca:nth-child(6) span,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(6) a:focus-visible) .marcas .marca:nth-child(6) span,
.mapa-indice-cont:has(.marcas .marca:nth-child(6):hover) .marcas .marca:nth-child(6) span { border-color: var(--naranjo); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(6) a:hover) .lista-pueblos li:nth-child(6) a,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(6) a:focus-visible) .lista-pueblos li:nth-child(6) a,
.mapa-indice-cont:has(.marcas .marca:nth-child(6):hover) .lista-pueblos li:nth-child(6) a { color: var(--naranjo); transform: translateX(6px); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(6) a:hover) .lista-pueblos li:nth-child(6) .flecha,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(6) a:focus-visible) .lista-pueblos li:nth-child(6) .flecha,
.mapa-indice-cont:has(.marcas .marca:nth-child(6):hover) .lista-pueblos li:nth-child(6) .flecha { opacity: 1; }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(7) a:hover) .marcas .marca:nth-child(7) span,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(7) a:focus-visible) .marcas .marca:nth-child(7) span,
.mapa-indice-cont:has(.marcas .marca:nth-child(7):hover) .marcas .marca:nth-child(7) span { border-color: var(--naranjo); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(7) a:hover) .lista-pueblos li:nth-child(7) a,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(7) a:focus-visible) .lista-pueblos li:nth-child(7) a,
.mapa-indice-cont:has(.marcas .marca:nth-child(7):hover) .lista-pueblos li:nth-child(7) a { color: var(--naranjo); transform: translateX(6px); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(7) a:hover) .lista-pueblos li:nth-child(7) .flecha,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(7) a:focus-visible) .lista-pueblos li:nth-child(7) .flecha,
.mapa-indice-cont:has(.marcas .marca:nth-child(7):hover) .lista-pueblos li:nth-child(7) .flecha { opacity: 1; }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(8) a:hover) .marcas .marca:nth-child(8) span,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(8) a:focus-visible) .marcas .marca:nth-child(8) span,
.mapa-indice-cont:has(.marcas .marca:nth-child(8):hover) .marcas .marca:nth-child(8) span { border-color: var(--naranjo); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(8) a:hover) .lista-pueblos li:nth-child(8) a,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(8) a:focus-visible) .lista-pueblos li:nth-child(8) a,
.mapa-indice-cont:has(.marcas .marca:nth-child(8):hover) .lista-pueblos li:nth-child(8) a { color: var(--naranjo); transform: translateX(6px); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(8) a:hover) .lista-pueblos li:nth-child(8) .flecha,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(8) a:focus-visible) .lista-pueblos li:nth-child(8) .flecha,
.mapa-indice-cont:has(.marcas .marca:nth-child(8):hover) .lista-pueblos li:nth-child(8) .flecha { opacity: 1; }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(9) a:hover) .marcas .marca:nth-child(9) span,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(9) a:focus-visible) .marcas .marca:nth-child(9) span,
.mapa-indice-cont:has(.marcas .marca:nth-child(9):hover) .marcas .marca:nth-child(9) span { border-color: var(--naranjo); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(9) a:hover) .lista-pueblos li:nth-child(9) a,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(9) a:focus-visible) .lista-pueblos li:nth-child(9) a,
.mapa-indice-cont:has(.marcas .marca:nth-child(9):hover) .lista-pueblos li:nth-child(9) a { color: var(--naranjo); transform: translateX(6px); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(9) a:hover) .lista-pueblos li:nth-child(9) .flecha,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(9) a:focus-visible) .lista-pueblos li:nth-child(9) .flecha,
.mapa-indice-cont:has(.marcas .marca:nth-child(9):hover) .lista-pueblos li:nth-child(9) .flecha { opacity: 1; }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(10) a:hover) .marcas .marca:nth-child(10) span,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(10) a:focus-visible) .marcas .marca:nth-child(10) span,
.mapa-indice-cont:has(.marcas .marca:nth-child(10):hover) .marcas .marca:nth-child(10) span { border-color: var(--naranjo); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(10) a:hover) .lista-pueblos li:nth-child(10) a,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(10) a:focus-visible) .lista-pueblos li:nth-child(10) a,
.mapa-indice-cont:has(.marcas .marca:nth-child(10):hover) .lista-pueblos li:nth-child(10) a { color: var(--naranjo); transform: translateX(6px); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(10) a:hover) .lista-pueblos li:nth-child(10) .flecha,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(10) a:focus-visible) .lista-pueblos li:nth-child(10) .flecha,
.mapa-indice-cont:has(.marcas .marca:nth-child(10):hover) .lista-pueblos li:nth-child(10) .flecha { opacity: 1; }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(11) a:hover) .marcas .marca:nth-child(11) span,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(11) a:focus-visible) .marcas .marca:nth-child(11) span,
.mapa-indice-cont:has(.marcas .marca:nth-child(11):hover) .marcas .marca:nth-child(11) span { border-color: var(--naranjo); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(11) a:hover) .lista-pueblos li:nth-child(11) a,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(11) a:focus-visible) .lista-pueblos li:nth-child(11) a,
.mapa-indice-cont:has(.marcas .marca:nth-child(11):hover) .lista-pueblos li:nth-child(11) a { color: var(--naranjo); transform: translateX(6px); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(11) a:hover) .lista-pueblos li:nth-child(11) .flecha,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(11) a:focus-visible) .lista-pueblos li:nth-child(11) .flecha,
.mapa-indice-cont:has(.marcas .marca:nth-child(11):hover) .lista-pueblos li:nth-child(11) .flecha { opacity: 1; }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(12) a:hover) .marcas .marca:nth-child(12) span,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(12) a:focus-visible) .marcas .marca:nth-child(12) span,
.mapa-indice-cont:has(.marcas .marca:nth-child(12):hover) .marcas .marca:nth-child(12) span { border-color: var(--naranjo); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(12) a:hover) .lista-pueblos li:nth-child(12) a,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(12) a:focus-visible) .lista-pueblos li:nth-child(12) a,
.mapa-indice-cont:has(.marcas .marca:nth-child(12):hover) .lista-pueblos li:nth-child(12) a { color: var(--naranjo); transform: translateX(6px); }
.mapa-indice-cont:has(.lista-pueblos li:nth-child(12) a:hover) .lista-pueblos li:nth-child(12) .flecha,
.mapa-indice-cont:has(.lista-pueblos li:nth-child(12) a:focus-visible) .lista-pueblos li:nth-child(12) .flecha,
.mapa-indice-cont:has(.marcas .marca:nth-child(12):hover) .lista-pueblos li:nth-child(12) .flecha { opacity: 1; }

/* D. Foto del hombre de espaldas: se funde con el gris del bloque anterior */
.foto-espaldas { position: relative; height: 560px; overflow: hidden; }
.foto-espaldas img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.foto-espaldas::before {
  content: ""; position: absolute; inset: 0; height: 65%;
  background: linear-gradient(to bottom, var(--gris), transparent); pointer-events: none;
}
@media (max-width: 767px) { .foto-espaldas { height: 300px; } }

/* E. "La grandeza de doce pequeñas iglesias": 12 carruseles */
.grandeza-carruseles { background: var(--rosado); padding: 1vw var(--margen) 48px; }
.grandeza-carruseles h2 { margin: 30px auto 32px; max-width: 1200px; text-align: right; }
.grandeza-carruseles h2 .azul, .grandeza-carruseles h2 .azul-oscuro { color: var(--texto); }
.grilla-carruseles {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 26px;
}
@media (max-width: 1100px) { .grilla-carruseles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .grilla-carruseles { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; } }

.carrusel-iglesia { outline: none; }
.carrusel-iglesia .marco {
  position: relative; aspect-ratio: 1; background: var(--blanco);
  border: 0; overflow: hidden;
}
.carrusel-iglesia .marco img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s;
}
.carrusel-iglesia .marco img.activa { opacity: 1; }
.carrusel-iglesia .contador {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: rgba(255,255,255,.85); color: var(--texto); font-size: 12px; padding: 1px 8px; border-radius: 10px;
}
.carrusel-iglesia .ant, .carrusel-iglesia .sig {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.6); color: var(--texto); font-size: 18px;
  opacity: 0; transition: opacity .2s, background .2s;
}
.carrusel-iglesia .ant { left: 8px; } .carrusel-iglesia .sig { right: 8px; }
.carrusel-iglesia:hover .ant, .carrusel-iglesia:hover .sig,
.carrusel-iglesia:focus-within .ant, .carrusel-iglesia:focus-within .sig { opacity: 1; }
.carrusel-iglesia .ant:hover, .carrusel-iglesia .sig:hover { background: var(--blanco); color: var(--naranjo); }
.carrusel-iglesia:focus-visible { outline: 3px solid var(--naranjo); outline-offset: 3px; }
.pie-carrusel {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 10px 0 0;
}
.pie-carrusel .pueblo { font-family: var(--serif); font-size: 21px; color: var(--texto); text-decoration: none; }
.pie-carrusel .pueblo:hover { color: var(--naranjo); }
.pie-carrusel .atributo { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--texto); text-decoration: none; }
.pie-carrusel .atributo:hover { color: var(--naranjo); }
@media (max-width: 767px) {
  .carrusel-iglesia .ant, .carrusel-iglesia .sig { opacity: 1; }
  .pie-carrusel { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .portada .senal-scroll::after { animation: none; }
  .carrusel-iglesia .marco img { transition: none; }
}

/* G. Anclas del menú en la portada: no quedan tapadas por el encabezado fijo */
#cuadernos, #iglesias { scroll-margin-top: 96px; }

/* ============================================================
   H1. Cabecera de revista: los dos primeros bloques de un cuaderno
   ("Mañungo en [pueblo]" y el bloque de texto + mapa), aplicado a
   los 12 cuadernos bajo .revista-cabecera. El resto del diseño de
   revista (capítulos de personas, citas, video, fotos) sigue solo
   en Caulín, bajo .cuaderno-revista, más abajo.
   ============================================================ */
.revista-cabecera { --cuadrado: 480px; }
.revista-cabecera #cap-1 > .grilla { row-gap: 0 !important; }
.revista-cabecera #cap-1 > .grilla,
.revista-cabecera #cap-1 + section > .grilla { max-width: 1440px; margin: 0 auto; }
.revista-cabecera #cap-1 .bloque.texto h2 { margin: 0 0 16px !important; }
.revista-cabecera #cap-1 .bloque.imagen.retrato { margin-bottom: 6px !important; }
.revista-cabecera #cap-1 .bloque.galeria { align-self: center !important; }
.revista-cabecera #cap-1 .presentacion {
  width: min(var(--cuadrado), 100%) !important; aspect-ratio: 1 !important; height: auto !important; margin: 0 auto;
}
.revista-cabecera .pie-carrusel { width: min(var(--cuadrado), 100%); margin: 10px auto 0; justify-content: center; }
.revista-cabecera #cap-1 .pie-carrusel { justify-content: flex-end; align-items: flex-end; }
.revista-cabecera #cap-1 .pie-carrusel .atributo { color: #fff; font-size: 18px; line-height: 1.3; }
.revista-cabecera #cap-1 + section .bloque.mapa {
  width: min(var(--cuadrado), 100%) !important; aspect-ratio: auto !important; height: auto !important; min-height: 0 !important;
  align-self: center !important;
}
.revista-cabecera #cap-1 + section .bloque.texto { align-self: center !important; }
/* Solo cuando el bloque siguiente al de texto+mapa es el capítulo de una persona
   (retrato y título), no cuando es una foto a todo el ancho u otro contenido. */
.revista-cabecera #cap-1 + section + .seccion.compacta:has(> .grilla > .bloque.imagen.retrato) {
  padding-top: 64px !important;
}
.revista-cabecera #cap-1 + section + .seccion.compacta:has(> .grilla > .bloque.linea) {
  padding: 0 !important;
}
.revista-cabecera #cap-1 + section + .seccion.compacta:has(> .grilla > .bloque.linea) > .grilla {
  padding: 0 !important;
}
.revista-cabecera #cap-1 + section + .seccion.compacta:has(> .grilla > .bloque.linea) + .seccion.compacta:has(> .grilla > .bloque.imagen.retrato) {
  padding-top: 43px !important;
}
@media (max-width: 800px) {
  .revista-cabecera #cap-1 .bloque.galeria { order: 1; margin-top: 24px !important; margin-bottom: 24px !important; flex-direction: column; }
  .revista-cabecera #cap-1 .presentacion { width: min(var(--cuadrado), calc(100vw - 40px)) !important; }
  .revista-cabecera #cap-1 .pie-carrusel { width: min(var(--cuadrado), 100%) !important; flex: none; margin: 10px auto 0 !important; }
  .revista-cabecera #cap-1 + section .bloque.mapa { margin: 24px auto 0 !important; }
  .revista-cabecera #cap-1 + section + .seccion.compacta:has(> .grilla > .bloque.imagen.retrato) {
    padding-top: 24px !important;
  }
  /* Cuando hay un divisor (hr) entre el bloque de texto+mapa y el capítulo, se descuenta
     su alto y el padding propio de ambos bloques, para dejar 64/24 px netos en total. */
  .revista-cabecera #cap-1 + section:has(+ .seccion.compacta > .grilla > .bloque.linea) > .grilla {
    padding-bottom: 0 !important;
  }
  .revista-cabecera #cap-1 + section + .seccion.compacta:has(> .grilla > .bloque.linea) + .seccion.compacta:has(> .grilla > .bloque.imagen.retrato) {
    padding-top: 3px !important;
  }
  .revista-cabecera #cap-1 + section + .seccion.compacta:has(> .grilla > .bloque.linea) + .seccion.compacta:has(> .grilla > .bloque.imagen.retrato) > .grilla {
    padding-top: 0 !important;
  }
}
/* ============================================================
   H. Cuaderno-revista (prueba: solo Caulín). Disposición tipo
   revista, según maqueta-cuaderno-caulin.html. No afecta a los
   otros cuadernos: todo va bajo .cuaderno-revista.
   ============================================================ */
.cuaderno-revista .cap-apertura,
.cuaderno-revista .cap-apertura h2 { text-align: center; }
.cuaderno-revista .cap-apertura { align-self: center !important; width: 100%; }
.cuaderno-revista .cap-apertura h2,
.cuaderno-revista #cap-1 .bloque.texto h2 { margin: 0 0 16px !important; }
.cuaderno-revista #cap-1 > .grilla { row-gap: 0 !important; }
.cuaderno-revista #cap-1 > .grilla,
.cuaderno-revista:not(.revista-cabecera) .seccion.arriba > .grilla { max-width: 1440px; margin: 0 auto; }
.cuaderno-revista #cap-1 .bloque.imagen.retrato { margin-bottom: 6px !important; }
.cuaderno-revista #cap-1 .bloque.galeria { align-self: center !important; }
.cuaderno-revista .grilla:has(> .bloque.texto.cap-apertura) {
  display: flex !important; flex-direction: column; align-items: center; gap: 0 !important;
}
.cuaderno-revista section:not(#cap-1) > .grilla > .bloque.imagen.retrato {
  margin: 0 0 6px !important; align-self: center !important;
}
.cuaderno-revista #cap-2.seccion.compacta,
.cuaderno-revista #cap-3.seccion.compacta,
.cuaderno-revista #cap-4.seccion.compacta,
.cuaderno-revista #cap-5.seccion.compacta { padding-bottom: 0 !important; }
.cuaderno-revista .col { max-width: 560px; margin: 0 auto; padding: 0 20px; }
.cuaderno-revista .col > p:last-child { margin-bottom: 0; }
.cuaderno-revista .col p { font-family: var(--sans); font-size: 17.5px; line-height: 1.65; }
.cuaderno-revista p.cita-grande {
  font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.4;
  color: var(--naranjo); max-width: 560px; margin: 28px auto 28px; padding: 0 20px;
}
.cuaderno-revista p.cita-grande.larga { color: var(--texto); font-size: 21px; line-height: 1.55; }
.cuaderno-revista .seccion.foto-completa { margin: 36px auto 0; }
.cuaderno-revista .seccion.foto-completa .medio-completo { height: min(72vh, 680px); object-fit: cover; }
.cuaderno-revista:not(.revista-cabecera) .pantalla { margin-top: 36px; height: min(72vh, 680px); }
.cuaderno-revista:not(.revista-cabecera) .pantalla img { object-position: 50% 42%; }
.cuaderno-revista .lado {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  max-width: 1100px; margin: 56px auto; padding: 0 24px;
}
.cuaderno-revista .marco { border: 0; background: none; }
.cuaderno-revista .lado img { width: 100%; height: auto; display: block; }
.cuaderno-revista .lado blockquote { margin: 1em 0; }
.cuaderno-revista { --cuadrado: 480px; }
.cuaderno-revista .presentacion,
.cuaderno-revista .marco {
  width: min(var(--cuadrado), 100%) !important; aspect-ratio: 1 !important; height: auto !important;
  margin: 0 auto;
}
.cuaderno-revista .pie-carrusel { width: min(var(--cuadrado), 100%); margin: 10px auto 0; justify-content: center; }
.cuaderno-revista #cap-1 .pie-carrusel { justify-content: flex-end; align-items: flex-end; }
.cuaderno-revista #cap-1 .pie-carrusel .atributo { color: #fff; font-size: 18px; line-height: 1.3; }
.cuaderno-revista .foto-nolfa { text-align: center; margin-top: 56px !important; margin-bottom: 56px !important; }
.cuaderno-revista:not(.revista-cabecera) .bloque.mapa { grid-row-end: auto !important; width: min(var(--cuadrado), 100%) !important; aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; }
.cuaderno-revista:not(.revista-cabecera) .seccion.arriba .bloque.mapa { grid-row-end: 9 !important; align-self: center !important; }
.cuaderno-revista:not(.revista-cabecera) .seccion.arriba { padding-bottom: 0 !important; padding-top: 32px !important; }
.cuaderno-revista #cap-2.seccion.compacta { padding-top: 64px !important; }
.cuaderno-revista :is(#cap-2, #cap-3, #cap-4, #cap-5) > hr.linea { position: absolute; left: 50%; transform: translateX(-50%); width: 34.05vw; margin: 0; top: 14px; z-index: 2; }
.cuaderno-revista #cap-2 > hr.linea { top: 32px; }
@media (max-width: 800px) {
  .cuaderno-revista:not(.revista-cabecera) h2,
  .cuaderno-revista.revista-cabecera :is(section:not(#cap-1), .abrir) h2 { font-size: 36px; }
  .cuaderno-revista p.cita-grande { font-size: 23px; }
  .cuaderno-revista .col p { font-size: 17.5px; }
  .cuaderno-revista .lado { grid-template-columns: 1fr; gap: 24px; padding: 0 20px; margin: 36px auto; }
  .cuaderno-revista:not(.revista-cabecera) .pantalla { height: auto; }
  .cuaderno-revista:not(.revista-cabecera) .pantalla img { position: static; opacity: 1; width: 100%; height: auto; object-fit: unset; }
  .cuaderno-revista #cap-2.seccion.compacta { padding-top: 24px !important; }
  .cuaderno-revista :is(#cap-2, #cap-3, #cap-4, #cap-5) > hr.linea { width: calc(100% - 32px); top: 12px; }
  .cuaderno-revista #cap-1 .bloque.galeria { order: 1; margin-top: 24px !important; margin-bottom: 24px !important; flex-direction: column; }
  .cuaderno-revista #cap-1 .pie-carrusel { width: min(var(--cuadrado), 100%) !important; flex: none; margin: 10px auto 0 !important; }
  .cuaderno-revista #cap-1 .presentacion { width: min(var(--cuadrado), calc(100vw - 40px)) !important; }
  .cuaderno-revista .seccion > .grilla:has(> .bloque.texto.cap-apertura) { padding: 0 !important; }
  .cuaderno-revista:not(.revista-cabecera) .seccion.arriba > .grilla { padding: 0 var(--margen) !important; }
  .cuaderno-revista .bloque.mapa { margin: 24px auto 0 !important; }
  .cuaderno-revista #cap-3.seccion.compacta > .grilla > .bloque.imagen.retrato,
  .cuaderno-revista #cap-4.seccion.compacta > .grilla > .bloque.imagen.retrato,
  .cuaderno-revista #cap-5.seccion.compacta > .grilla > .bloque.imagen.retrato {
    margin-top: 24px !important;
  }
  .cuaderno-revista .presentacion,
  .cuaderno-revista .marco {
    width: min(var(--cuadrado), calc(100vw - 40px)) !important;
    height: min(var(--cuadrado), calc(100vw - 40px)) !important;
    margin: 0 auto !important;
  }
}

/* ============================================================
   Chullec: ajustes de texto bajo las fotos de Mañungo (banda azul,
   Doña Berta y don Bernardo, diálogos y carrusel). Solo .ch-ajuste.
   ============================================================ */
.ch-ajuste .banda-col > .grilla { display: block; width: 100%; max-width: 560px; margin: 0 auto; padding: 0 20px; }
.ch-ajuste .banda-col .bloque.texto { grid-area: auto !important; }
@media (min-width: 801px) { .ch-ajuste .banda-col { min-height: 41.74vw; } }
.ch-ajuste #cap-2 > .grilla { row-gap: 6px !important; }
.ch-ajuste section#cap-2 > .grilla > .bloque.imagen.retrato { margin: 0 !important; }
.ch-ajuste #cap-2 .cap-apertura { align-self: center; }
.ch-ajuste #cap-2 .cap-apertura h2 { margin: 0 !important; text-align: center; }
.ch-ajuste #cap-2 .col { max-width: 560px; margin: 16px auto 0; padding: 0 20px; }
.ch-ajuste #cap-2 .col > p:last-child { margin-bottom: 0; }
.ch-ajuste #cap-2 .col p { font-family: var(--sans); font-size: 17.5px; line-height: 1.65; }
.ch-ajuste p.dialogo, main.ch-ajuste p.dialogo {
  font-family: var(--sans); font-size: 17.5px; line-height: 1.65; color: #4a4a4a;
  margin-left: 0; padding-left: 0; border-left: 0;
}
.ch-ajuste .banda-carrusel .presentacion { width: min(436px, 100%) !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
@media (max-width: 800px) {
  .ch-ajuste .banda-col > .grilla { padding: 0 20px; }
  .ch-ajuste #cap-2 > .grilla { padding-bottom: 0 !important; }
  .ch-ajuste #cap-2 .col p { font-size: 17.5px; }
  .ch-ajuste p.dialogo, main.ch-ajuste p.dialogo { font-size: 17.5px; margin-left: 0; padding-left: 0; }
}

/* ============================================================
   Huyar Bajo: tipografía estándar, columnas de 560 px, banda azul,
   carrusel, video y fotos en pareja. Solo .hb-ajuste.
   ============================================================ */
.hb-ajuste .hb-col .bloque.texto { grid-column: 1 / -1 !important; width: 100%; max-width: 560px; justify-self: center; padding: 0 20px; box-sizing: border-box; }
.hb-ajuste .relato { grid-column: 1 / -1; width: 100%; max-width: 560px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.hb-ajuste .hb-col .bloque.texto p:not(.cita-grande),
.hb-ajuste .relato p:not(.cita-grande) { font-family: var(--sans); font-size: 17.5px !important; line-height: 1.65 !important; color: #4a4a4a; }
.hb-ajuste p.cita-grande {
  font-family: var(--serif) !important; font-weight: 400; font-size: 26px !important; line-height: 1.4 !important;
  color: var(--naranjo); max-width: 560px; margin: 28px auto; padding: 0 20px;
}
.hb-ajuste p.cita-grande.larga { color: #4a4a4a; font-size: 21px !important; line-height: 1.55 !important; }
.hb-ajuste .hb-col .bloque.texto p.cita-grande, .hb-ajuste .relato p.cita-grande {
  font-family: var(--serif) !important; font-weight: 400; font-size: 26px !important; line-height: 1.4 !important; color: var(--naranjo);
  padding: 0; margin: 28px 0; max-width: none;
}
.hb-ajuste .hb-col .bloque.texto p.cita-grande.larga, .hb-ajuste .relato p.cita-grande.larga { color: #4a4a4a; font-size: 21px !important; line-height: 1.55 !important; }
.hb-ajuste .hb-carrusel p.cita-grande { font-family: var(--serif) !important; font-weight: 400; font-size: 26px !important; line-height: 1.4 !important; color: var(--naranjo); }
.hb-ajuste .hb-col blockquote, .hb-ajuste .relato blockquote { margin: 0; }
.hb-ajuste p.dialogo { margin-left: 0; padding-left: 0; border-left: 0; }
/* carrusel de don Armando */
.hb-ajuste .hb-carrusel .fila-c { align-items: start; }
.hb-ajuste .hb-carrusel .presentacion { width: min(436px, 100%) !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
.hb-ajuste .hb-carrusel blockquote { margin: 0; }
.hb-ajuste .hb-carrusel p.cita-grande { margin: 0; padding: 0; max-width: none; }
/* banda azul */
.hb-ajuste .banda-hb { min-height: 0; }
/* fotos de doña Estelvina */
.hb-ajuste .hb-pareja .pareja { grid-column: 1 / -1; justify-content: center; align-items: flex-start; }
.hb-ajuste .hb-pareja .par-item { flex: 0 0 auto; width: min(var(--cuadrado), 100%); margin: 0; }
.hb-ajuste .hb-pareja .marco { border: 0; background: none; width: 100%; aspect-ratio: 5 / 4; box-sizing: border-box; }
.hb-ajuste .hb-pareja .marco img.foto { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; display: block; }
@media (max-width: 800px) {
  .hb-ajuste .hb-carrusel .fila-c, .hb-ajuste .hb-carrusel .col-c { width: 100%; }
  .hb-ajuste .relato { padding: 0; }
  .hb-ajuste .hb-col .bloque.texto { padding: 0; }
  .hb-ajuste p.cita-grande, .hb-ajuste .hb-col .bloque.texto p.cita-grande, .hb-ajuste .relato p.cita-grande, .hb-ajuste .hb-carrusel p.cita-grande { font-size: 23px !important; }
  .hb-ajuste p.cita-grande.larga, .hb-ajuste .hb-col .bloque.texto p.cita-grande.larga, .hb-ajuste .relato p.cita-grande.larga { font-size: 21px !important; }
  .hb-ajuste .banda-hb > .grilla { padding-top: 0; padding-bottom: 0; }
  .hb-ajuste .banda-hb { padding-top: 42px !important; padding-bottom: 42px !important; }
  .hb-ajuste .hb-pareja .pareja { flex-direction: column; align-items: center; gap: 24px; }
}

/* Teupa: módulo de Doña Tita y cita junto al carrusel. Solo .tp-ajuste. */
.tp-ajuste .tp-tita { align-items: center; }
.tp-ajuste .tp-modulo { display: flex; align-items: center; justify-content: center; gap: 60px; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.tp-ajuste .tp-car { flex: 0 0 436px; width: 436px; }
.tp-ajuste .tp-car .presentacion { width: 436px !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
.tp-ajuste .tp-txt { flex: 0 0 386px; width: 386px; }
.tp-ajuste .tp-txt p, .tp-ajuste .tp-col p:not(.cita-grande) { font-family: var(--sans); font-size: 17.5px !important; line-height: 1.65 !important; color: #4a4a4a; margin: 0 0 .85em; }
.tp-ajuste .tp-txt p:last-child, .tp-ajuste .tp-col > p:last-child { margin-bottom: 0; }
.tp-ajuste .tp-col { width: 100%; max-width: 560px; margin: 51px auto 0; padding: 0 20px; box-sizing: border-box; }
.tp-ajuste .tp-cita blockquote { margin: 0; }
.tp-ajuste .tp-cita p.cita-grande { font-family: var(--serif) !important; font-weight: 400; font-size: 26px !important; line-height: 1.4 !important; color: var(--naranjo); margin: 0; padding: 0; max-width: none; }
@media (max-width: 800px) {
  .tp-ajuste .tp-modulo { flex-direction: column; gap: 24px; padding: 0 20px; }
  .tp-ajuste .tp-car { flex: none; width: 100%; max-width: 436px; }
  .tp-ajuste .tp-car .presentacion { width: 100% !important; }
  .tp-ajuste .tp-txt { flex: none; width: 100%; }
  .tp-ajuste .tp-col { margin-top: 51px; padding: 0 20px; }
  .tp-ajuste .tp-cita p.cita-grande { font-size: 23px !important; }
}

/* Compu: Romance, retratos, carrusel y banda salmón. Solo .hb-ajuste. */
.hb-ajuste .hb-romance > .grilla { display: flex !important; flex-direction: column; align-items: center; gap: 0 !important; }
.hb-ajuste .hb-romance .bloque { grid-area: auto !important; width: auto; max-width: none; margin: 0; align-self: center !important; }
.hb-ajuste .hb-romance .ro-tit { margin-bottom: 24px; }
.hb-ajuste .hb-romance .ro-ret { width: 138px; margin-bottom: 24px; height: auto !important; }
.hb-ajuste .hb-romance .ro-cols { display: flex; justify-content: center; align-items: flex-start; gap: 64px; }
.hb-ajuste .hb-romance .ro-col { width: max-content; max-width: 300px; }
.hb-ajuste .hb-romance .ro-col p { font-family: var(--sans); font-size: 17.5px !important; line-height: 1.65 !important; color: #4a4a4a; text-align: left; white-space: nowrap; margin: 0; }
.hb-ajuste .hb-romance .ro-firma { margin-top: 24px; width: max-content; max-width: none; }
.hb-ajuste .hb-romance .ro-firma p { text-align: center !important; white-space: nowrap; margin: 0; }
/* retrato → título 6 px, título → texto 16 px */
.hb-ajuste .hb-cap > .grilla { grid-auto-rows: auto !important; row-gap: 6px !important; }
.hb-ajuste .hb-cap:not(#x) > .grilla > .bloque.imagen.retrato { margin: 0 !important; grid-row: 1 !important; }
.hb-ajuste .hb-cap > .grilla > .bloque.texto { grid-row: 2 !important; }
.hb-ajuste .hb-cap .bloque.texto h2 { margin: 0 0 16px !important; }
/* carrusel de 9 fotos */
.hb-ajuste .hb-car > .clasico { max-width: max(75vw, 1000px); }
.hb-ajuste .hb-car .presentacion { width: min(436px, 100%) !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
/* banda salmón */
.hb-ajuste .hb-bcompu > .grilla { display: flex; justify-content: center; align-items: center; gap: 60px; width: 100%; padding: 0; }
.hb-ajuste .hb-bcompu .bc-img { flex: 0 0 585px; width: 585px; aspect-ratio: auto !important; margin: 0; }
.hb-ajuste .hb-bcompu .bc-img figure { margin: 0; }
.hb-ajuste .hb-bcompu .bc-txt { flex: 0 0 386px; width: 386px; margin: 0; }
.hb-ajuste .hb-bcompu .bc-txt blockquote { margin: 0; }
.hb-ajuste .hb-bcompu .bc-txt p.cita-grande { font-family: var(--serif) !important; font-weight: 400; font-size: 21px !important; line-height: 1.55 !important; color: #4a4a4a !important; margin: 0; padding: 0; max-width: none; }
@media (max-width: 800px) {
  .hb-ajuste .hb-romance .ro-cols { flex-direction: column; align-items: center; gap: 16px; }
  .hb-ajuste .hb-car .fila-c, .hb-ajuste .hb-car .col-c { width: 100%; }
  .hb-ajuste .hb-bcompu > .grilla { flex-direction: column; gap: 24px; padding: 0 var(--margen); box-sizing: border-box; }
  .hb-ajuste .hb-bcompu .bc-img, .hb-ajuste .hb-bcompu .bc-txt { flex: none; width: 100%; }
}

/* Llingua: módulos de dos columnas (.hb-lado) y columnas de texto. Solo .hb-ajuste. */
.hb-ajuste .hb-lado { display: flex; justify-content: center; align-items: center; gap: 60px; width: 100%; padding: 0 20px; box-sizing: border-box; margin: 51px 0; }
.hb-ajuste .hb-lado.arriba { align-items: flex-start; }
.hb-ajuste .hb-lado-car { flex: 0 0 var(--car); width: var(--car); }
.hb-ajuste .hb-lado-car .presentacion { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
.hb-ajuste .hb-lado-txt { flex: 0 0 386px; width: 386px; }
.hb-ajuste .hb-lado-txt p:not(.cita-grande), .hb-ajuste .hb-colx p:not(.cita-grande) { font-family: var(--sans); font-size: 17.5px !important; line-height: 1.65 !important; color: #4a4a4a; margin: 0 0 .85em; }
.hb-ajuste .hb-lado-txt > :last-child, .hb-ajuste .hb-colx > :last-child { margin-bottom: 0; }
.hb-ajuste .hb-lado-txt blockquote, .hb-ajuste .hb-colx blockquote { margin: 0; }
.hb-ajuste .hb-colx { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.hb-ajuste .hb-lado-txt p.cita-grande, .hb-ajuste .hb-colx p.cita-grande {
  font-family: var(--serif) !important; font-weight: 400; font-size: 26px !important; line-height: 1.4 !important;
  color: var(--naranjo); margin: 28px 0; padding: 0; max-width: none;
}
.hb-ajuste .hb-lado-txt p.cita-grande { margin: 0; }
.hb-ajuste .hb-lado-txt p.cita-grande.larga, .hb-ajuste .hb-colx p.cita-grande.larga { color: #4a4a4a; font-size: 21px !important; line-height: 1.55 !important; }
.hb-ajuste .hb-bblue .hb-lado { margin: 0 0 51px; }
.hb-ajuste .hb-irene .hb-lado { margin: 0; }
@media (max-width: 800px) {
  .hb-ajuste .hb-lado { flex-direction: column; gap: 24px; padding: 0 20px; }
  .hb-ajuste .hb-lado-car { flex: none; width: min(var(--car), 100%); }
  .hb-ajuste .hb-lado-txt { flex: none; width: 100%; }
  .hb-ajuste .hb-colx { padding: 0 20px; }
  .hb-ajuste .hb-lado-txt p.cita-grande, .hb-ajuste .hb-colx p.cita-grande { font-size: 23px !important; }
  .hb-ajuste .hb-lado-txt p.cita-grande.larga, .hb-ajuste .hb-colx p.cita-grande.larga { font-size: 21px !important; }
}
.hb-ajuste .hb-hugo { padding-top: 0 !important; }
.hb-ajuste .hb-pre-hugo { padding-bottom: 0 !important; }
.hb-ajuste .hb-pre-hugo .bloque.texto > :last-child { margin-bottom: 0 !important; }
/* Quehui: módulo invertido (texto | carrusel) con el carrusel sobre el texto en móvil */
@media (max-width: 800px) { .hb-ajuste .hb-lado.rev { flex-direction: column-reverse; } }

.hb-ajuste .hb-colx > :last-child, .hb-ajuste .hb-lado-txt > :last-child { margin-bottom: 0 !important; }

/* Quehui: carrusel de 6 fotos y línea centrados en la página */
.hb-ajuste .hb-centro .bloque { grid-column: 1 / -1 !important; justify-self: center; width: min(436px, 100%); }

/* Apiao: utilidades de espaciado y cita de 23 px */
.hb-ajuste .hb-pb0 { padding-bottom: 0 !important; }
.hb-ajuste .hb-pb0 .relato > :last-child { margin-bottom: 0 !important; }
.hb-ajuste .hb-pt0 { padding-top: 0 !important; }
.hb-ajuste .hb-lado-car:only-child { margin: 0 auto; }
.hb-ajuste .hb-col .bloque.texto p.cita-grande.cita-23, .hb-ajuste .relato p.cita-grande.cita-23, .hb-ajuste .hb-colx p.cita-grande.cita-23, .hb-ajuste .hb-lado-txt p.cita-grande.cita-23 { font-size: 23px !important; line-height: 1.5 !important; }
.hb-ajuste .hb-lado-txt blockquote > * + * { margin-top: 12px; }
.hb-ajuste .hb-colx > :first-child { margin-top: 0 !important; }
.hb-ajuste .hb-colx > blockquote:first-child > :first-child { margin-top: 0 !important; }
.hb-ajuste .hb-colx > blockquote:last-child > :last-child { margin-bottom: 0 !important; }

/* Textos largos: sin margen sobrante al inicio ni al final de cada columna (.hb-tight) */
.hb-ajuste.hb-tight .relato > :first-child, .hb-ajuste.hb-tight .relato > blockquote:first-child > :first-child { margin-top: 0 !important; }
.hb-ajuste.hb-tight .relato > :last-child, .hb-ajuste.hb-tight .relato > blockquote:last-child > :last-child,
.hb-ajuste.hb-tight .hb-col .bloque.texto > :last-child, .hb-ajuste.hb-tight .hb-col .bloque.texto > blockquote:last-child > :last-child { margin-bottom: 0 !important; }

/* Puchilco: fotos sueltas dentro de .hb-lado y secciones contiguas */
.hb-ajuste .hb-lado-car > img { width: 100%; display: block; height: auto; }
.hb-ajuste .hb-lado-car > img.cuad { aspect-ratio: 1 / 1; object-fit: cover; }
.hb-ajuste .hb-lado-car > img.prop { object-fit: contain; }

/* Pies de foto dentro de .relato: conservan su tamaño original (14 px) */
.hb-ajuste .relato figcaption p, .hb-ajuste .relato p.chico { font-size: 14px !important; line-height: 1.5 !important; }

/* San Javier: diálogo largo en banda azul (.cita-grande.larga dentro de columna de carrusel) */
.cuaderno-revista .col-c p.cita-grande.larga { font-family: var(--serif) !important; font-size: 21px !important; line-height: 1.55 !important; padding: 0 !important; max-width: 560px; margin: 0 auto; }

/* Puchilco: corte transversal más ancho que la columna de texto */
@media (min-width: 801px) { .hb-ajuste .relato > figure.con-pie.ancha { width: 720px; max-width: calc(100vw - 40px); position: relative; left: 50%; transform: translateX(-50%); } }


/* Teupa: la banda gris del video de la escuela nace desde el blanco del texto (también en móvil) */
@media (max-width: 767px) { .hb-ajuste .hb-fade-top { padding-top: 120px !important; } }

/* Huyar Bajo: pie de foto pegado a la imagen en las fotos de Doña Estelvina */
.hb-ajuste .hb-pareja figure.con-pie figcaption { margin-top: 6px; }

/* San Javier: el gris del texto y el mapa continúa tras el video del dron y se desvanece a blanco bajo él */
.cuaderno-revista .seccion.foto-completa.sj-fade { margin-top: 0 !important; padding-bottom: 51px !important; background-color: var(--gris); background-image: linear-gradient(to bottom, var(--gris) 0, var(--gris) calc(100% - 51px), #fff 100%); }

/* Matao: carrusel de 8 fotos al tamaño estándar (436 px, o el ancho disponible en pantallas chicas) */
.cuaderno-revista .hb-centro .bloque.galeria { grid-column: 1 / -1 !important; justify-self: center; align-self: center !important; width: min(436px, 100%); }
.cuaderno-revista .hb-centro .presentacion { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; }

/* ===== Tablet / teléfono horizontal (801–1100 px): los carruseles no se achican ===== */
@media (min-width: 768px) and (max-width: 1100px) {
  main .fila-c:has(.presentacion) { display: flex; flex-direction: column; gap: 17px; }
  main .fila-c:has(.presentacion) > .col-c:empty { display: none; }
  main .fila-c:has(.presentacion) > .col-c { width: 100%; }
  main :is(.col-c, .bloque.galeria) .presentacion { width: min(436px, 100%) !important; height: auto !important; aspect-ratio: 1 / 1 !important; margin-left: auto; margin-right: auto; }
  main :not(#cap-1) > .grilla > .bloque.galeria:only-child { grid-column: 1 / -1 !important; justify-self: center; width: min(436px, 100%); }
}
/* Módulos de dos columnas: se apilan antes de que se salgan de la pantalla */
@media (min-width: 801px) and (max-width: 940px) {
  .hb-ajuste .hb-lado, .hb-ajuste .tp-modulo { flex-direction: column; gap: 24px; padding: 0 20px; }
  .hb-ajuste .hb-lado.rev { flex-direction: column-reverse; }
  .hb-ajuste .hb-lado-car, .hb-ajuste .tp-car { flex: none; width: min(var(--car, 436px), 100%); }
  .hb-ajuste .hb-lado-txt, .hb-ajuste .tp-txt { flex: none; width: min(100%, 560px); }
  .hb-ajuste .hb-lado-car .presentacion, .hb-ajuste .tp-car .presentacion { width: 100% !important; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  main :not(#cap-1) > .grilla:has(> .bloque.galeria):not(:has(> .bloque.imagen.retrato)) { display: flex !important; flex-direction: column; align-items: center; gap: 24px !important; padding: 0 20px !important; }
  main :not(#cap-1) > .grilla:has(> .bloque.galeria):not(:has(> .bloque.imagen.retrato)) > .bloque { grid-area: auto !important; width: min(560px, 100%); margin: 0; align-self: center !important; }
  main :not(#cap-1) > .grilla:has(> .bloque.galeria):not(:has(> .bloque.imagen.retrato)) > .bloque.galeria { width: min(436px, 100%); }
}

/* Matao: banda salmón del carrusel de 6 fotos y la cita naranja (módulo estándar) */
.cuaderno-revista .mt-banda > .grilla { display: flex !important; justify-content: center; align-items: center; gap: 60px; width: 100%; padding: 0 20px; box-sizing: border-box; }
.cuaderno-revista .mt-banda .bloque { grid-area: auto !important; margin: 0; }
.cuaderno-revista .mt-banda .bloque.texto { order: 1; flex: 0 0 386px; width: 386px; align-self: center !important; }
.cuaderno-revista .mt-banda .bloque.galeria { order: 2; flex: 0 0 436px; width: 436px; align-self: center !important; }
.cuaderno-revista .mt-banda .presentacion { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
.cuaderno-revista .mt-banda blockquote { margin: 0; }
.cuaderno-revista .mt-banda p.cita-grande { font-family: var(--serif) !important; font-weight: 400; font-size: 26px !important; line-height: 1.4 !important; color: var(--naranjo); margin: 0; padding: 0; max-width: none; }
@media (max-width: 940px) {
  .cuaderno-revista .mt-banda > .grilla { flex-direction: column; gap: 24px; }
  .cuaderno-revista .mt-banda .bloque.galeria { order: 1; flex: none; width: min(436px, 100%); }
  .cuaderno-revista .mt-banda .bloque.texto { order: 2; flex: none; width: min(560px, 100%); }
  .cuaderno-revista .mt-banda p.cita-grande { font-size: 23px !important; }
}

/* Móvil ancho (≤800 px): los carruseles siempre quedan centrados */
@media (max-width: 800px) {
  main :not(#cap-1) .presentacion { margin-left: auto !important; margin-right: auto !important; max-width: 100%; }
  main :not(#cap-1) > .grilla > .bloque.galeria, main :not(#cap-1) .hb-lado-car, main :not(#cap-1) .tp-car { align-self: center !important; }
  main :not(#cap-1) .fila-c > .col-c:has(> .presentacion), main :not(#cap-1) .fila-c > .col-c:has(> .fila-c > .col-c > .presentacion) { align-items: center; }
}

/* Carrusel solo en su fila: centrado en la página en cualquier ancho (la grilla de 26 columnas lo dejaba 25 px a la derecha) */
@media (min-width: 768px) {
  main :not(#cap-1) > .grilla > .bloque.galeria:only-child { grid-column: 1 / -1 !important; justify-self: center; align-self: center; width: min(436px, 100%); }
  main :not(#cap-1) > .grilla > .bloque.galeria:only-child .presentacion { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; margin-left: auto; margin-right: auto; }
}


/* Primer bloque (texto a la izquierda, mapa a la derecha): ambos parten desde el mismo borde superior */
@media (min-width: 768px) {
  #contenido .grilla:has(> .bloque.texto):has(> .bloque.mapa) > .bloque.texto,
  #contenido .grilla:has(> .bloque.texto):has(> .bloque.mapa) > .bloque.mapa { align-self: start !important; }
}

/* Caulín: banda salmón con carrusel de 3 fotos y diálogo largo (módulo estándar) */
.cuaderno-revista .cv-lado { display: flex; justify-content: center; align-items: center; gap: 60px; width: 100%; padding: 0 20px; box-sizing: border-box; }
.cuaderno-revista .cv-lado-car { flex: 0 0 436px; width: 436px; }
.cuaderno-revista .cv-lado-car .presentacion { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
.cuaderno-revista .cv-lado-txt { flex: 0 0 386px; width: 386px; }
.cuaderno-revista .cv-lado-txt p.cita-grande { font-family: var(--serif) !important; font-weight: 400; font-size: 21px !important; line-height: 1.55 !important; color: #4a4a4a !important; margin: 0; padding: 0; max-width: none; }
@media (max-width: 940px) {
  .cuaderno-revista .cv-lado { flex-direction: column; gap: 24px; }
  .cuaderno-revista .cv-lado-car { flex: none; width: min(436px, 100%); }
  .cuaderno-revista .cv-lado-txt { flex: none; width: min(560px, 100%); }
}

/* Caulín: texto junto a la foto (.lado .txt) con la tipografía estándar */
.cuaderno-revista .lado .txt p:not(.cita-grande) { font-family: var(--sans); font-size: 17.5px !important; line-height: 1.65 !important; color: #4a4a4a; margin: 0 0 .85em; }
.cuaderno-revista .lado .txt p.cita-grande { font-family: var(--serif) !important; font-weight: 400; font-size: 26px !important; line-height: 1.4 !important; color: var(--naranjo); margin: 28px 0; padding: 0; max-width: none; }
.cuaderno-revista .lado .txt blockquote { margin: 0; }
.cuaderno-revista .lado .txt > :last-child { margin-bottom: 0 !important; }
@media (max-width: 800px) { .cuaderno-revista .lado .txt p.cita-grande { font-size: 23px !important; } }

/* Citas/respuestas naranjas que seguían la letra fluida (18 px en tablet y teléfono): tamaño estándar */
.hb-ajuste .hb-lado-txt h3.t4 { font-family: var(--serif) !important; font-weight: 400; font-size: 26px !important; line-height: 1.4 !important; color: var(--naranjo); margin: 12px 0 0; }
.ch-ajuste .banda-carrusel p.cita { font-family: var(--serif) !important; font-size: 26px !important; line-height: 1.4 !important; }
@media (max-width: 800px) {
  .hb-ajuste .hb-lado-txt h3.t4, .ch-ajuste .banda-carrusel p.cita { font-size: 23px !important; }
}

/* Bandas de color en teléfono: margen de 42 px arriba y abajo, como el estándar de las otras bandas */
@media (max-width: 767px) {
  .cuaderno-revista .cv-lado { padding: 42px 20px; }
  .cuaderno-revista .mt-banda > .grilla { padding: 42px 20px; }
}

/* San Javier: la foto del mapa de Canarias, en tablet y teléfono, con proporción 3:2 (4:3 en teléfono), centrada en las islas, en vez de una franja de 3:1 */
@media (max-width: 1100px) {
  .cuaderno-revista .sj-mapa img.medio-completo { height: auto !important; aspect-ratio: 3 / 2; width: 100%; object-fit: cover; object-position: 53% 50%; }
}
@media (max-width: 600px) {
  .cuaderno-revista .sj-mapa img.medio-completo { aspect-ratio: 4 / 3; }
}

/* Chullec en tablet: las columnas de relato (texto de la cocina, diálogos) usan la columna estándar de 560 px, centrada */
@media (min-width: 768px) {
  .ch-ajuste .relato { grid-column: 1 / -1; width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; padding: 0 20px; box-sizing: border-box; }
}

/* Chullec, banda azul del texto «El poblado de Chullec…»: en teléfono, 42 px de azul arriba y abajo (el estándar de las bandas) */
@media (max-width: 767px) {
  .ch-ajuste .banda-col { padding-top: 42px !important; padding-bottom: 42px !important; }
}

/* Huyar Bajo: la foto del caserío (5:4) en tablet y teléfono conserva su proporción, sin franjas blancas arriba y abajo */
.hb-ajuste .banda-hb figure.con-pie .presentacion { aspect-ratio: 5 / 4 !important; height: auto !important; }

/* Foto sola en su fila (tablet): tamaño estándar de 436 px, centrada, en vez de la columna estrecha de la grilla */
@media (min-width: 768px) and (max-width: 1100px) {
  main :not(#cap-1) > .grilla > .bloque.imagen:not(.retrato):only-child { grid-column: 1 / -1 !important; justify-self: center; width: min(436px, 100%); }
}

/* Foto con pie junto a una columna de texto estándar: misma columna de 560 px, centrada (antes quedaba corrida a la derecha y chica en tablet) */
@media (min-width: 768px) {
  .hb-col > .grilla > .bloque.imagen:not(.retrato):not(:only-child) { grid-column: 1 / -1 !important; justify-self: center; width: min(560px, 100%); }
}

/* Teléfono: el video final de cada cuaderno (antes del menú de cuadernos) en proporción 4:3 (más ancho que alto) */
@media (max-width: 767px) {
  .seccion.foto-completa:has(+ nav.entre-paginas) .medio-completo { aspect-ratio: 4 / 3; height: auto !important; width: 100%; object-fit: cover; object-position: 50% 50%; }
}

/* Centrado: en teléfono ancho (601–767 px) la columna de texto de cada capítulo queda centrada, no pegada a la izquierda */
.hb-ajuste .hb-col .bloque.texto { margin-left: auto; margin-right: auto; }
@media (max-width: 767px) {
  .hb-ajuste .hb-col .bloque.texto { align-self: center !important; }
}
/* Líneas grises: centradas en la página (la grilla de 26 columnas las dejaba medio paso a la derecha) */
@media (min-width: 768px) {
  .grilla > .bloque.linea { grid-column: 1 / -1 !important; justify-self: center; width: 34.05vw; }
}

/* Centrado de columnas que seguían la grilla asimétrica de 26 columnas */
@media (min-width: 768px) {
  .cuaderno-revista .relato { grid-column: 1 / -1; width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; padding: 0 20px; box-sizing: border-box; }
  .cuaderno-revista .bloque.video-b { grid-column: 1 / -1 !important; justify-self: center; width: 57.2vw; }
  .ch-ajuste #cap-2 .cap-apertura { grid-column: 1 / -1 !important; justify-self: center; width: 100%; max-width: 560px; }
}
@media (max-width: 767px) {
  .ch-ajuste .relato { align-self: center; width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
  hr.linea { margin-left: auto; margin-right: auto; }
  .grilla > .bloque.linea { align-self: center; }
}
.hb-centro > .grilla > .bloque { margin-left: auto; margin-right: auto; align-self: center; }

/* Compu, banda salmón del corte longitudinal: se apila antes de que el dibujo y el texto se salgan del margen */
@media (max-width: 1130px) {
  .hb-ajuste .hb-bcompu > .grilla { flex-direction: column; gap: 24px; padding: 0 20px; box-sizing: border-box; }
  .hb-ajuste .hb-bcompu .bc-img { flex: none; width: min(585px, 100%); }
  .hb-ajuste .hb-bcompu .bc-txt { flex: none; width: min(560px, 100%); }
}
@media (min-width: 768px) and (max-width: 1130px) {
  .hb-ajuste .hb-bcompu { padding-top: 42px !important; padding-bottom: 42px !important; }
}
.hb-ajuste .hb-bcompu .bc-img, .hb-ajuste .hb-bcompu .bc-txt { align-self: center !important; }

/* Teléfono: todo el texto corrido con el mismo ancho (20 px de margen a cada lado, como las columnas estándar) */
@media (max-width: 767px) {
  .hb-ajuste .hb-col .bloque.texto, .hb-ajuste .relato, .ch-ajuste .relato { padding-left: 4px; padding-right: 4px; box-sizing: border-box; }
}
@media (max-width: 767px) {
  .hb-ajuste .clasico, .ch-ajuste .clasico, .cuaderno-revista .clasico { padding-left: 20px; padding-right: 20px; }
  .hb-ajuste .banda-hb > .grilla { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 767px) {
  .ch-ajuste .banda-carrusel blockquote, .cuaderno-revista .col-c blockquote { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Quehui, sección gris de Doña Marta: en teléfono, 42 px de aire después del último texto */
@media (max-width: 767px) { .hb-ajuste .qh-fin { padding-bottom: 42px !important; } }

/* Quehui: el carrusel de fotos a pantalla completa lleva margen a los costados y abajo (se separa del video y de los bordes) */
.hb-ajuste .qh-pantalla { width: 100%; margin: 0; border: solid var(--gris); border-width: 0 20px 24px; box-sizing: border-box; background: var(--gris); }
@media (max-width: 1100px) {
  .hb-ajuste .qh-pantalla { height: auto !important; aspect-ratio: 4 / 3; }
}

/* Teléfono y teléfono ancho: columna de texto unificada (350 px a 390 px de pantalla; 520 px de texto con 560 px de columna en pantallas más anchas), también en los dos primeros bloques */
@media (max-width: 767px) {
  .hb-ajuste .hb-col .bloque.texto, .hb-ajuste .relato, .ch-ajuste .relato,
  #contenido #cap-1 .bloque.texto, #contenido #cap-1 + section .bloque.texto {
    width: 100%; max-width: none; box-sizing: border-box;
    padding-left: max(4px, calc((100% - 520px) / 2)); padding-right: max(4px, calc((100% - 520px) / 2));
  }
}
@media (max-width: 800px) {
  .hb-ajuste .hb-lado-txt, .hb-ajuste .tp-txt, .cuaderno-revista .cv-lado-txt { max-width: 520px; }
}
@media (max-width: 940px) {
  .hb-ajuste .hb-lado.arriba { align-items: center; }
}

/* Apiao: en teléfono, 42 px de aire entre el video de la cocina y el carrusel que sigue */
@media (max-width: 767px) { .hb-ajuste .ap-tras-video { padding-top: 42px !important; } }

/* Apiao, carrusel de 6 fotos tras «…un lugar al que cuidar.»: en teléfono 51 px desde el texto y 42 px antes del video final */
@media (max-width: 767px) {
  .hb-ajuste .hb-pt0 .hb-lado { margin-top: 27px !important; }
  .hb-ajuste .hb-pt0 { padding-bottom: 42px !important; }
}

/* Teléfono: ritmo uniforme entre textos (párrafos, diálogos y citas): 20 px entre bloques de texto consecutivos */
@media (max-width: 767px) {
  .hb-ajuste :is(.hb-colx, .hb-lado-txt, .tp-col, .tp-txt, .relato, .hb-col .bloque.texto, #cap-1 + section .bloque.texto) > :is(p, blockquote),
  .ch-ajuste .relato > :is(p, blockquote),
  .cuaderno-revista .col > p { margin: 0 0 20px !important; }
  .hb-ajuste :is(.hb-colx, .hb-lado-txt, .tp-col, .tp-txt, .relato, .hb-col .bloque.texto, #cap-1 + section .bloque.texto) > blockquote > :is(p, h3),
  .ch-ajuste .relato > blockquote > :is(p, h3) { margin: 0 0 20px !important; }
  .hb-ajuste :is(.hb-colx, .hb-lado-txt, .tp-col, .tp-txt, .relato, .hb-col .bloque.texto, #cap-1 + section .bloque.texto) > :last-child,
  .hb-ajuste :is(.hb-colx, .hb-lado-txt, .tp-col, .tp-txt, .relato, .hb-col .bloque.texto, #cap-1 + section .bloque.texto) > blockquote:last-child > :last-child,
  .ch-ajuste .relato > :last-child, .cuaderno-revista .col > p:last-child { margin-bottom: 0 !important; }
  .cuaderno-revista p.cita-grande { margin-top: 20px; margin-bottom: 20px; }
}
@media (max-width: 767px) {
  main .bloque.texto > :is(p, blockquote), main .col-c > :is(p, blockquote),
  .cuaderno-revista .lado .txt > :is(p, blockquote) { margin: 0 0 20px !important; }
  main .bloque.texto > blockquote > :is(p, h3), main .col-c > blockquote > :is(p, h3),
  .cuaderno-revista .lado .txt > blockquote > :is(p, h3) { margin-top: 0 !important; margin-bottom: 20px !important; }
  main .bloque.texto > :is(p, blockquote):last-child, main .col-c > :is(p, blockquote):last-child,
  main .bloque.texto > blockquote:last-child > :last-child, main .col-c > blockquote:last-child > :last-child,
  .cuaderno-revista .lado .txt > :last-child, .cuaderno-revista .lado .txt > blockquote:last-child > :last-child { margin-bottom: 0 !important; }
}
@media (max-width: 767px) {
  .ch-ajuste #cap-2 .col > p { margin: 0 0 20px !important; }
  .ch-ajuste #cap-2 .col > p:last-child { margin-bottom: 0 !important; }
  .cuaderno-revista .col-c blockquote > p.cita-grande { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* Teléfono: módulo (carrusel + texto) y el texto que sigue: 24 px entre ambos; los cierres de sección con texto dejan 42 px de aire */
@media (max-width: 767px) {
  .hb-ajuste .hb-lado:has(+ .hb-colx) { margin-bottom: 24px !important; }
  .hb-ajuste .hb-colx + .hb-lado { margin-top: 24px !important; }
  .hb-ajuste .seccion:has(> .hb-colx:last-child) { padding-bottom: 42px !important; }
}

/* Lincay: el video tras «…especialmente acordeón y guitarra.» en teléfono en 4:3 (no apaisado) */
@media (max-width: 767px) {
  .hb-ajuste .li-video .medio-completo { aspect-ratio: 4 / 3; height: auto !important; width: 100%; object-fit: cover; }
}
/* Teléfono: una sección que termina en texto y va seguida de otra sección de relato no suma el aire de cierre (queda el margen normal de 24 px) */
@media (max-width: 767px) {
  .hb-ajuste .seccion:has(> .hb-colx:last-child):has(+ .seccion > .relato-grilla) { padding-bottom: 0 !important; }
}

/* Teléfono: fotos en pareja (una sobre otra): tamaño estándar de foto (ancho de la columna), con 24 px entre ellas */
@media (max-width: 767px) {
  main :not(#cap-1) > .grilla:has(> .bloque.imagen:not(.retrato) ~ .bloque.imagen:not(.retrato)):not(:has(> .bloque.texto)) { gap: 24px !important; align-items: center; }
  main :not(#cap-1) > .grilla:has(> .bloque.imagen:not(.retrato) ~ .bloque.imagen:not(.retrato)):not(:has(> .bloque.texto)) > .bloque.imagen:not(.retrato) { width: 100%; align-self: center !important; margin: 0 auto; }
}

/* Atributos en tablet y teléfono ancho (600–999 px): el texto de entrada en dos columnas, no en una línea larga ni en una columna angosta */
@media (min-width: 600px) and (max-width: 999px) {
  .entrada-atributo .bloque.texto { grid-column: 1 / -1 !important; grid-row: auto !important; width: calc(100% - 80px); max-width: none; margin-left: auto; margin-right: auto; }
  .entrada-atributo :is(.col-c, .bloque.texto):has(> h1) { column-count: 2; column-gap: 40px; }
  .entrada-atributo :is(h1, .entre-paginas) { column-span: all; }
  .entrada-atributo :is(.col-c, .bloque.texto):has(> h1) > p { max-width: none; }
}

/* Atributos, tablet apaisada (1000–1199 px): el texto en dos columnas usa casi todo el ancho de la página */
@media (min-width: 1000px) and (max-width: 1199px) {
  .entrada-atributo .bloque.texto { grid-column: 1 / -1 !important; width: calc(100% - 80px); margin-left: auto; margin-right: auto; }
}

/* Atributos con la estructura de columnas (clasico): en tablet el texto también usa todo el ancho de la página, en dos columnas */
@media (min-width: 600px) and (max-width: 1199px) {
  .entrada-atributo .clasico { max-width: none; width: calc(100% - 80px); padding-left: 0; padding-right: 0; }
  .entrada-atributo .clasico > .fila-c > .col-c:first-child { grid-column: 1 / -1 !important; width: 100%; }
  .entrada-atributo .clasico > .fila-c > .col-c:empty { display: none; }
  .entrada-atributo .clasico :is(.col-c):has(> h1) { column-count: 2; column-gap: 40px; width: 100%; }
  .entrada-atributo .clasico :is(h1, .entre-paginas) { column-span: all; }
  .entrada-atributo .clasico .col-c:has(> h1) > p { max-width: none; }
}

/* El proyecto: texto de apertura al formato de la web (cita naranja de 26 px y nota en texto normal de 17,5 px) */
.ep-entrada blockquote.entrada p.cita.t4 { font-family: var(--serif) !important; font-weight: 400; font-size: 26px !important; line-height: 1.4 !important; }
.ep-entrada .bloque.texto > p.chico { font-family: var(--sans); font-size: 17.5px !important; line-height: 1.65 !important; font-style: italic; margin-top: 20px !important; }
@media (max-width: 800px) { .ep-entrada blockquote.entrada p.cita.t4 { font-size: 23px !important; } }
/* El proyecto: las tres fotos con pie (cuaderno, álbum, bitácora) un poco más chicas */
.bloque.imagenes figure.con-pie { width: 85%; margin-left: auto; margin-right: 0; }
@media (max-width: 767px) { .bloque.imagenes figure.con-pie { width: 82%; margin: 0 auto; } }
/* El proyecto: 51 px entre la nota «Mañungo es el personaje…» y el título que sigue */
@media (min-width: 768px) { .ep-entrada { padding-bottom: max(0px, calc(51px - 3.44vw)) !important; } }
@media (max-width: 767px) { .ep-entrada > .grilla { padding-bottom: 17px; } }

/* El proyecto, tablet (768–1100 px): texto en columna de lectura y fotos debajo, a un tamaño cómodo */
@media (min-width: 768px) and (max-width: 1100px) {
  .capitulo > .grilla { display: flex !important; flex-direction: column; align-items: center; gap: 32px !important; padding: 0 40px !important; }
  .capitulo > .grilla > .bloque { grid-area: auto !important; width: 100%; }
  .capitulo > .grilla > .bloque.texto { max-width: 700px; }
  .capitulo > .grilla > .bloque.imagenes { display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .bloque.imagenes figure.con-pie { width: min(420px, 62%); margin: 0 auto; }
  .bloque.imagenes figure.con-pie:has(img[height="1217"]) { width: min(320px, 48%); }
}
@media (min-width: 768px) and (max-width: 1100px) { .capitulo > .grilla > .bloque { align-self: center !important; } }

/* El proyecto, portada en teléfono: la foto ocupa toda la portada, siempre mostrando el lado derecho (donde está Mañungo), y el título va encima, sin marco naranja */
@media (max-width: 767px) {
  .portada-proyecto { position: relative; padding: 0 !important; min-height: 66svh; background: #8b8d90; }
  .portada-proyecto > .grilla { display: block !important; padding: 0 !important; width: 100%; min-height: 66svh; }
  .portada-proyecto .bloque.imagen { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; aspect-ratio: auto !important; }
  .portada-proyecto .bloque.imagen img.foto { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 100% 100% !important; }
  .portada-proyecto .bloque.texto { position: relative; z-index: 2; padding: 28px 20px 0 !important; }
}

/* El proyecto, escritorio (1101 px o más): una sola composición continua. Columna de texto de 560 px a la izquierda y una columna de fotos (o de créditos) de 400 px a su lado, siempre desde el mismo borde superior y con el mismo ritmo entre capítulos */
@media (min-width: 1101px) {
  .ep-entrada { padding-top: 3vw !important; padding-bottom: 2vw !important; }
  .ep-entrada > .grilla { display: block !important; max-width: 1100px; margin: 0 auto; padding: 0 40px !important; }
  .ep-entrada .bloque.texto { max-width: 640px; }
  .capitulo { padding-top: 2.4vw !important; padding-bottom: 2.4vw !important; }
  .capitulo > .grilla { display: grid !important; grid-template-columns: minmax(0, 560px) minmax(0, 400px) !important; grid-auto-rows: auto !important; column-gap: 80px !important; row-gap: 0 !important; justify-content: center; align-items: start; max-width: 1100px; margin: 0 auto; padding: 0 40px !important; }
  .capitulo > .grilla > .bloque { grid-area: auto !important; width: 100%; align-self: start; }
  .capitulo > .grilla > .bloque.texto:first-child { grid-column: 1; grid-row: 1; }
  .capitulo > .grilla > .bloque:not(.texto:first-child) { grid-column: 2; grid-row: 1; }
  .capitulo > .grilla > .bloque.imagenes { display: flex; flex-direction: column; gap: 28px; padding-top: 0.4em; }
  .capitulo .bloque.imagenes figure.con-pie { width: 100%; margin: 0; }
  .capitulo .bloque.imagenes figure.con-pie:has(img[height="1217"]) { width: 76%; margin: 0 auto; }
  .capitulo .bloque.imagenes figcaption p { text-align: center !important; }
  .capitulo .ficha-creditos { margin-top: 0.4em; }
}