/* 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(--naranjo); 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 { display: none; }
  .carrete .pista { scroll-padding-left: var(--margen); }
  .carrete .pista a { width: 82%; }
}

/* ---------- 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 */
.mapa { width: 100%; height: 100%; min-height: 300px; border: 0; filter: grayscale(1) contrast(.95); touch-action: pan-y; }

/* 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: la franja rosada se mantiene, ahora sin texto */
.portada-proyecto { padding-bottom: calc(clamp(16px, 1.97vw, 22px) * 1.5 - 2px) !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 16px; font-size: 44px; text-align: center; }
.manungo-solo .bio { text-align: left; }
.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: 4px solid #efe6cf; 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; }

/* ============================================================
   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 .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 .pantalla { margin-top: 36px; height: min(72vh, 680px); }
.cuaderno-revista .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 .lado .marco { border: 8px solid #efe6cf; background: #fff; }
.cuaderno-revista .lado img { width: 100%; height: auto; display: block; }
.cuaderno-revista .lado blockquote { margin: 1em 0; }
@media (max-width: 800px) {
  .cuaderno-revista h2 { font-size: 36px; }
  .cuaderno-revista p.cita-grande { font-size: 23px; }
  .cuaderno-revista .col p { font-size: 16.5px; }
  .cuaderno-revista .lado { grid-template-columns: 1fr; gap: 24px; padding: 0 20px; margin: 36px auto; }
  .cuaderno-revista .pantalla { height: auto; }
  .cuaderno-revista .pantalla img { position: static; opacity: 1; width: 100%; height: auto; object-fit: unset; }
}