/* =========================================================
   Centro de Transformación Integral — estilos
   Mobile first: primero el celular, luego pantallas grandes.
   ========================================================= */

/* ---------- Colores y medidas (sacados del logo) ---------- */
:root {
  --azul: #0A2A4F;         /* azul noche del logo: base */
  --azul-hondo: #061A33;   /* fondos oscuros y pie */
  --oro: #C9A86A;          /* dorado del logo: acento */
  --oro-texto: #85662A;    /* dorado oscuro, legible sobre blanco */
  /* Comedor de Emmanuel: colores de su kit de marca */
  --com-azul: #0088CC;
  --com-magenta: #D81B60;
  --com-lima: #CDDC39;
  --com-naranja: #FF9800;
  --com-rojo: #E63946;
  --com-purpura: #8B3A8B;
  --comedor: var(--com-purpura);   /* fondo del bloque de Inicio (texto blanco legible) */
  --comedor-sol: var(--com-lima);  /* acento del bloque de Inicio */
  --blanco: #FFFFFF;
  --cielo: #E9EEF4;        /* azul muy pálido para alternar secciones */
  --tinta: #13223A;        /* color del texto */
  --tinta-suave: #4E5B6E;  /* texto secundario */
  --linea: #CFD7E2;        /* separadores finos */

  --titulos: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --texto: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --margen: clamp(1rem, 5vw, 4rem);   /* margen lateral de la página */
  --ancho: 76rem;                      /* ancho máximo del contenido */
  --seccion: clamp(4rem, 10vw, 8rem);  /* espacio vertical entre secciones */
  /* margen que centra el contenido en secciones con fondo de lado a lado */
  --lado: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen)));
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--titulos);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 0.5em;
  color: var(--azul);
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 9vw, 5.5rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 5.5vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); }

p { margin: 0 0 1em; max-width: 62ch; }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }

/* Lo oculto se oculta siempre, aunque otra regla le dé display */
[hidden] { display: none !important; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Enlace "Ir al contenido" para teclado */
.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.75rem 1rem; background: var(--azul); color: var(--blanco);
}
.saltar:focus { top: 1rem; }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.75rem 1.5rem;
  font: 600 1rem/1.2 var(--texto);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 999px;
  transition: background-color .2s, color .2s, border-color .2s;
}
.boton-oro { background: var(--oro); color: var(--azul-hondo); }
.boton-oro:hover { background: var(--blanco); border-color: var(--oro); }
.boton-linea { border-color: var(--azul); color: var(--azul); }
.boton-linea:hover { background: var(--azul); color: var(--blanco); }
.boton-claro { border-color: var(--oro); color: var(--blanco); }
.boton-claro:hover { background: var(--oro); color: var(--azul-hondo); }

/* La línea dorada es un fondo, para poder trazarla de nuevo al pasar el mouse */
.enlace {
  font-weight: 600; color: var(--azul);
  text-decoration: none; padding-bottom: 0.15em;
  background: linear-gradient(var(--oro), var(--oro)) 0 100% / 100% 2px no-repeat;
}
.enlace:hover { color: var(--oro-texto); }

/* ---------- Encabezado ---------- */
.encabezado {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem var(--margen);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.encabezado.con-sombra { border-bottom-color: var(--linea); }

.marca { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.marca img { width: 3rem; height: auto; }
.marca-nombre {
  font-family: var(--titulos); font-size: 1.05rem; line-height: 1.1; color: var(--azul);
  max-width: 11rem;
}
.marca-nombre em { font-style: italic; }

.boton-donar { min-height: 2.5rem; padding: 0.5rem 1.1rem; }

/* Botón hamburguesa (solo celular) */
.menu-boton {
  width: 2.75rem; height: 2.75rem; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--azul);
}
.menu-boton-lineas, .menu-boton-lineas::before, .menu-boton-lineas::after {
  display: block; width: 1.5rem; height: 2px; background: currentColor;
  transition: transform .25s, opacity .25s;
}
.menu-boton-lineas { position: relative; }
.menu-boton-lineas::before, .menu-boton-lineas::after { content: ""; position: absolute; left: 0; }
.menu-boton-lineas::before { top: -7px; }
.menu-boton-lineas::after { top: 7px; }
.menu-boton[aria-expanded="true"] .menu-boton-lineas { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton-lineas::before { transform: translateY(7px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton-lineas::after { transform: translateY(-7px) rotate(-45deg); }

/* Menú desplegable en celular */
.menu {
  position: fixed; inset: 4rem 0 0 0;
  background: var(--azul);
  padding: 2rem var(--margen);
  overflow-y: auto;
  visibility: hidden; opacity: 0;
  transition: opacity .25s, visibility .25s;
}
.menu.abierto { visibility: visible; opacity: 1; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block; padding: 0.6rem 0;
  font-family: var(--titulos); font-size: 2rem; color: var(--blanco); text-decoration: none;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--oro); }
.menu-idioma a { font-family: var(--texto); font-size: 1rem; margin-top: 1rem; color: var(--oro); }
body.menu-abierto { overflow: hidden; }

/* ---------- Portada ---------- */
.portada {
  display: grid; gap: 2.5rem;
  max-width: var(--ancho); margin: 0 auto;
  padding: 2.5rem var(--margen) var(--seccion);
}
.portada-intro { font-size: 1.2rem; color: var(--tinta-suave); max-width: 34ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* La puerta: marco dorado + foto con arco */
.portada-puerta {
  position: relative; margin: 0;
  width: min(100%, 26rem); justify-self: center;
  aspect-ratio: 400 / 520;
}
.puerta-marco {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
.puerta-marco path {
  fill: none; stroke: var(--oro); stroke-width: 3;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.puerta-foto {
  position: absolute; inset: 3.5% 4.5% 0 4.5%;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--cielo);
}
.puerta-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.portada-puerta figcaption {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  padding: 0.35rem 1rem; white-space: nowrap;
  font-size: 0.85rem; background: var(--azul); color: var(--blanco); border-radius: 999px;
}

/* Animación de entrada: el marco se dibuja, la puerta se abre, aparece el texto.
   Solo si la persona no pidió reducir el movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .puerta-marco path { stroke-dashoffset: 1; animation: dibujar 1.4s cubic-bezier(.6, 0, .2, 1) .1s forwards; }
  .puerta-foto { animation: abrir 1.1s cubic-bezier(.7, 0, .2, 1) .7s both; }
  .puerta-foto img { animation: acercar 2.2s cubic-bezier(.2, .6, .2, 1) .7s both; }
  .portada-puerta figcaption { animation: aparecer .6s ease 1.6s both; }
  .portada-texto > * { animation: subir .8s cubic-bezier(.2, .6, .2, 1) both; }
  .portada-texto > :nth-child(2) { animation-delay: .15s; }
  .portada-texto > :nth-child(3) { animation-delay: .3s; }
}
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes abrir {
  from { clip-path: inset(0 50% 0 50%); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes acercar { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }

/* ---------- Historia ---------- */
.historia {
  background: var(--cielo);
  padding: var(--seccion) var(--lado);
  display: grid; gap: 1.5rem;
}
.historia h2 { font-size: clamp(2.25rem, 7vw, 4.5rem); max-width: 14ch; margin: 0; }
.historia-texto p { font-size: 1.125rem; }

/* ---------- Programas ---------- */
.programas { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); }
.programas-cabeza { margin-bottom: 2.5rem; }
.programas-cabeza p { color: var(--tinta-suave); }

.programas-visor { display: none; }   /* en celular cada programa lleva su foto */

.programas-lista { list-style: none; margin: 0; padding: 0; }
.programa { border-top: 1px solid var(--linea); }
.programa:last-child { border-bottom: 1px solid var(--linea); }
.programa a { display: block; padding: 2rem 0; text-decoration: none; }
.programa-foto { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: 4px; margin-bottom: 1.25rem; }
.programa h3 { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.4rem; }
/* Flecha dibujada con CSS: indica que la fila lleva a otra página */
.programa h3::after {
  content: ""; flex: none; width: 0.55em; height: 0.55em; margin-left: auto;
  border-top: 2px solid var(--oro); border-right: 2px solid var(--oro);
  transform: rotate(45deg); transition: transform .25s;
}
.programa p { color: var(--tinta-suave); margin: 0; }
.programa a:hover h3::after, .programa a:focus-visible h3::after { transform: translateX(0.3em) rotate(45deg); }

/* ---------- Involúcrate ---------- */
.sumate {
  background: var(--azul); color: var(--blanco);
  padding: var(--seccion) var(--lado);
  display: grid; gap: 2.5rem;
}
.sumate h2, .sumate h3 { color: var(--blanco); }
.sumate-cabeza p { color: #C6D2E2; }
.sumate-formas { display: grid; gap: 2.5rem; }
.sumate-formas article { border-top: 2px solid var(--oro); padding-top: 1.5rem; }
.sumate-formas p { color: #DCE4EE; }
.sumate-fotos { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0.75rem; }
.sumate-fotos img { width: 100%; height: 100%; max-height: 22rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }

/* ---------- Comedor Emmanuel (con su propio color) ---------- */
.comedor {
  background: var(--comedor); color: var(--blanco);
  padding: var(--seccion) var(--lado);
  display: grid; gap: 3rem; align-items: center;
}
.comedor h2 { color: var(--blanco); font-size: clamp(2.5rem, 8vw, 4.75rem); margin-bottom: 0.4em; }
.comedor p { font-size: 1.125rem; color: #F6EAF6; max-width: 40ch; }
.comedor .comedor-lema { font-weight: 700; font-size: 1.125rem; color: var(--comedor-sol); margin-bottom: 0.75rem; }
.boton-sol { background: var(--comedor-sol); color: var(--azul-hondo); }
.boton-sol:hover { background: var(--blanco); }
.comedor .boton-claro { border-color: var(--comedor-sol); }
.comedor .boton-claro:hover { background: var(--comedor-sol); }
/* La foto ligeramente inclinada, como pegada en una cartelera */
.comedor-foto { margin: 0; padding: 0.75rem 0.75rem 0; background: var(--blanco); transform: rotate(-2deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.comedor-foto { position: relative; }
.comedor-foto picture img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
/* Logo del comedor como calcomanía sobre la esquina de la foto */
.comedor-foto .comedor-logo { position: absolute; z-index: 1; left: max(-1.25rem, -3vw); bottom: -1.75rem; width: clamp(6.5rem, 24vw, 9rem); height: auto; border-radius: 50%; background: var(--blanco); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45); transform: rotate(-6deg); }
.comedor-foto::after { content: ""; display: block; height: 2.5rem; }

/* ---------- Libros ---------- */
.libros { padding: var(--seccion) 0; max-width: var(--ancho); margin: 0 auto; }
.libros-cabeza, .noticias-cabeza {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem;
  padding: 0 var(--margen); margin-bottom: 2rem;
}
.libros-cabeza h2, .noticias-cabeza h2 { margin: 0; }

/* Carril deslizable en celular */
.libros-carril {
  list-style: none; margin: 0; padding: 0 var(--margen) 1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--margen);
  scrollbar-width: thin;
}
.libros-carril li { scroll-snap-align: start; }
.libros-carril a { display: block; text-decoration: none; }
.libros-carril img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 4px; margin-bottom: 1rem; transition: transform .35s cubic-bezier(.2, .6, .2, 1); }
.libros-carril a:hover img { transform: translateY(-6px); }
.libros-carril h3 { font-size: 1.375rem; margin-bottom: 0.25rem; }
.libros-carril p { font-size: 0.95rem; color: var(--tinta-suave); margin: 0 0 0.4rem; }
.libros-carril .precio { font-weight: 700; color: var(--oro-texto); }

/* ---------- Noticias ---------- */
.noticias { background: var(--cielo); padding: var(--seccion) calc(var(--lado) - var(--margen)); }
.noticias-lista { list-style: none; margin: 0 auto; padding: 0 var(--margen); }
.noticias-lista li { border-top: 1px solid var(--linea); }
.noticias-lista a {
  display: grid; gap: 0.35rem; padding: 1.5rem 0; text-decoration: none;
}
.noticia-categoria { font-size: 0.875rem; font-weight: 600; color: var(--oro-texto); }
.noticia-titulo { font-family: var(--titulos); font-size: clamp(1.4rem, 3vw, 1.875rem); line-height: 1.15; color: var(--azul); }
.noticias-lista a:hover .noticia-titulo { text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 0.2em; }
.noticias-lista time { font-size: 0.9rem; color: var(--tinta-suave); }

/* ---------- Pie ---------- */
.pie { background: var(--azul-hondo); color: #DCE4EE; padding: var(--seccion) var(--lado) 2rem; }
.pie h2 { color: var(--blanco); font-size: clamp(2.25rem, 7vw, 4.5rem); max-width: 14ch; }
.pie-invitacion p { font-size: 1.125rem; }
.pie-invitacion .boton { margin-top: 0.75rem; justify-self: start; }
.pie-datos {
  display: grid; gap: 2rem;
  margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid rgba(201, 168, 106, 0.4);
}
.pie h3 { font-family: var(--texto); font-size: 1rem; font-weight: 700; color: var(--oro); margin-bottom: 0.75rem; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 0.4rem; overflow-wrap: anywhere; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--oro); text-decoration: underline; }
.pie-legal { margin-top: 3rem; font-size: 0.875rem; color: #8D9BB0; }

/* =========================================================
   Pantallas medianas (tabletas)
   ========================================================= */
@media (min-width: 640px) {
  .libros-carril { grid-auto-columns: 42%; }
  .sumate-formas { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .pie-datos { grid-template-columns: 1.5fr 1.3fr 0.8fr; }
}

/* =========================================================
   Computador
   ========================================================= */
@media (min-width: 960px) {
  .menu-boton { display: none; }
  .marca img { width: 3.5rem; }
  .marca-nombre { max-width: none; font-size: 1.15rem; }

  /* Menú en línea */
  .menu { position: static; visibility: visible; opacity: 1; background: none; padding: 0; overflow: visible; }
  .menu ul { display: flex; align-items: center; gap: 1.5rem; }
  .menu a { font-family: var(--texto); font-size: 0.975rem; font-weight: 600; color: var(--tinta); padding: 0.5rem 0; }
  .menu a:hover, .menu a[aria-current="page"] { color: var(--oro-texto); }
  .menu-idioma a { margin: 0; color: var(--tinta-suave); font-weight: 400; }
  .encabezado { gap: 2rem; padding-block: 0.75rem; }

  /* Portada en dos columnas: texto y puerta */
  .portada { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 4rem; padding-top: 4rem; }
  .portada-puerta { width: 100%; max-width: 30rem; justify-self: end; }

  .historia { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 4rem; }

  /* Programas: foto grande fija a la izquierda, lista a la derecha */
  .programas-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .programas-visor {
    display: block; position: sticky; top: 7rem;
    aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--cielo);
  }
  .programas-visor img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.06);
    transition: opacity .5s ease, transform .9s cubic-bezier(.2, .6, .2, 1);
  }
  .programas-visor img.activa { opacity: 1; transform: none; }
  /* Encuadre de cada foto en el visor vertical */
  .programas-visor [data-programa="formacion"] { object-position: 32% center; }
  .programas-visor [data-programa="restauracion"] { object-position: 35% center; }
  .programa-foto { display: none; }
  .programa a { padding: 2.25rem 0; }
  .programa h3 { transition: color .25s; }
  .programa p { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s ease, margin .3s; }
  .programa.activo h3 { color: var(--oro-texto); }
  .programa.activo p { max-height: 10rem; opacity: 1; margin-top: 0.75rem; }

  .sumate { grid-template-columns: 1fr 1fr; column-gap: 4rem; }
  .sumate-cabeza, .sumate-formas { grid-column: 1 / -1; }
  .sumate-fotos { grid-column: 1 / -1; grid-row: 2; }

  .comedor { grid-template-columns: 1fr 1.1fr; gap: 5rem; }
  .comedor-foto { transform: rotate(2.5deg); }

  .libros-carril { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }

  .noticias-lista a { grid-template-columns: 9rem 1fr 11rem; align-items: baseline; gap: 2rem; padding: 1.75rem 0; }
  .noticias-lista time { text-align: right; }

  .pie-invitacion { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 4rem; align-items: end; }
  .pie-invitacion h2 { grid-row: span 2; margin: 0; }
}

/* =========================================================
   Páginas internas
   ========================================================= */

/* Cabeza de página: título grande alineado con el resto */
.pagina-cabeza { max-width: var(--ancho); margin: 0 auto; padding: 3rem var(--margen) 2.5rem; }
.pagina-cabeza h1 { font-size: clamp(2.5rem, 7.5vw, 4.75rem); max-width: 18ch; }
.pagina-intro { font-size: 1.2rem; color: var(--tinta-suave); max-width: 52ch; }

/* Foto a lo ancho, con su pie de foto */
.foto-ancha { margin: 0 auto; max-width: calc(var(--ancho) + 8rem); padding: 0 var(--margen); }
.foto-ancha img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.foto-ancha figcaption, .nos-historia-fotos figcaption { font-size: 0.875rem; color: var(--tinta-suave); margin-top: 0.6rem; }

/* ---------- Nosotros: historia ---------- */
.nos-historia { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); display: grid; gap: 3rem; }
.nos-historia-texto p { font-size: 1.125rem; }
.nos-historia-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.nos-historia-fotos figure { margin: 0; }
.nos-historia-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.nos-historia-fotos figure:nth-child(2) { grid-row: span 2; }
.nos-historia-fotos figure:nth-child(2) img { aspect-ratio: auto; height: calc(100% - 2rem); }

/* ---------- Nosotros: lo que nos mueve ---------- */
.mueve { background: var(--cielo); padding: var(--seccion) var(--lado); }
.mueve-lista { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2rem; }
.mueve-lista li { border-top: 2px solid var(--oro); padding-top: 1.25rem; }
.mueve-frase { font-family: var(--titulos); font-size: clamp(1.6rem, 3.6vw, 2.25rem); line-height: 1.15; color: var(--azul); margin-bottom: 0.6rem; }
.mueve-cita { font-weight: 600; color: var(--oro-texto); margin: 0; }

/* ---------- Nosotros: misión y visión ---------- */
.mision { background: var(--azul); color: #DCE4EE; padding: var(--seccion) var(--lado); display: grid; gap: 3.5rem; }
.mision h2 { color: var(--oro); font-size: clamp(1.75rem, 4vw, 2.5rem); }
.mision p { font-family: var(--titulos); font-size: clamp(1.4rem, 3vw, 1.875rem); line-height: 1.35; color: var(--blanco); max-width: 34ch; }

/* ---------- Nosotros: para qué existimos ---------- */
.existimos { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen) 0; display: grid; gap: 2.5rem; }
.existimos h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.existimos p { font-size: 1.125rem; }

/* ---------- Nosotros: equipo con retratos en arco (como la puerta) ---------- */
.equipo { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); }
.equipo-lista { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 1rem; }
.equipo-lista img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 999px 999px 4px 4px;
  margin-bottom: 1rem;
  outline: 2px solid transparent; outline-offset: 5px;
  transition: outline-color .3s;
}
.equipo-lista li:hover img { outline-color: var(--oro); }
.equipo-lista h3 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); margin-bottom: 0.2rem; }
.equipo-lista p { font-size: 0.95rem; color: var(--tinta-suave); margin: 0; }

/* ---------- Cierre de página ---------- */
.siguiente { background: var(--cielo); padding: var(--seccion) var(--lado); }
.siguiente h2 { margin-bottom: 0.25em; }

@media (min-width: 640px) {
  .mueve-lista { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .equipo-lista { grid-template-columns: repeat(3, 1fr); gap: 3rem 1.5rem; }
}
@media (min-width: 960px) {
  .pagina-cabeza { padding-top: 5rem; }
  .foto-ancha img { aspect-ratio: 21 / 9; object-position: center 60%; }
  .nos-historia { grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: start; }
  .nos-historia-texto { position: sticky; top: 7rem; }
  .mision { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .existimos { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .equipo-lista { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Programas: página general con bloques alternados ---------- */
.programas-bloques { max-width: var(--ancho); margin: 0 auto; padding: 1rem var(--margen) var(--seccion); display: grid; gap: 4rem; }
.programa-bloque { display: grid; gap: 1.5rem; }
.programa-bloque-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
.programa-bloque-foto { display: block; overflow: hidden; border-radius: 4px; }
.programa-bloque:hover .programa-bloque-foto img { transform: scale(1.04); }
.programa-bloque h2 a { text-decoration: none; }
.programa-bloque h2 a:hover { color: var(--oro-texto); }
.programa-bloque-servicios { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.programa-bloque-servicios li { padding: 0.5rem 0 0.5rem 1.25rem; border-bottom: 1px solid var(--linea); position: relative; }
.programa-bloque-servicios li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--oro); }

/* ---------- Página de cada programa ---------- */
.miga { margin-bottom: 1rem; font-size: 0.95rem; }
.servicios { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen) 0; display: grid; gap: 4rem; }
.servicio { border-top: 2px solid var(--oro); padding-top: 1.75rem; }
.servicio > p { font-size: 1.125rem; }
.servicio-para { color: var(--tinta-suave); }
.servicio-para strong { color: var(--azul); }

/* Niveles de la Escuela de Discipulado: sí son una secuencia, por eso van numerados */
.niveles-titulo { font-weight: 600; margin-bottom: 0.75rem; }
.niveles { list-style: none; counter-reset: nivel; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.5rem; }
.niveles li {
  counter-increment: nivel; display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem; background: var(--cielo); border-radius: 4px;
  font-family: var(--titulos); font-size: 1.3rem; color: var(--azul);
}
.niveles li::before {
  content: counter(nivel); flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--azul); color: var(--oro); font: 700 0.95rem/1 var(--texto);
}

.versiculo { margin: 1.5rem 0 0; padding-left: 1.25rem; border-left: 3px solid var(--oro); }
.versiculo p { font-family: var(--titulos); font-style: italic; font-size: clamp(1.25rem, 2.6vw, 1.5rem); line-height: 1.35; color: var(--azul); margin-bottom: 0.4rem; }
.versiculo cite { font-style: normal; font-weight: 600; color: var(--oro-texto); }

/* Galería: fotos que se amplían al tocarlas */
.galeria { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen) 0; }
.galeria-lista { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.galeria-foto { display: block; width: 100%; padding: 0; border: 0; background: var(--cielo); cursor: zoom-in; border-radius: 4px; overflow: hidden; }
.galeria-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s cubic-bezier(.2, .6, .2, 1); }
.galeria-foto:hover img { transform: scale(1.05); }

.visor { padding: 0; border: 0; background: transparent; max-width: min(92vw, 70rem); max-height: 92vh; overflow: visible; }
.visor::backdrop { background: rgba(6, 26, 51, 0.92); }
.visor img { max-width: 100%; max-height: 82vh; width: auto; margin: 0 auto; border-radius: 4px; }
.visor-cerrar { display: block; margin: 1rem auto 0; padding: 0.6rem 1.4rem; border: 2px solid var(--oro); border-radius: 999px; background: none; color: var(--blanco); font: 600 1rem var(--texto); cursor: pointer; }
.visor-cerrar:hover { background: var(--oro); color: var(--azul-hondo); }
@media (prefers-reduced-motion: no-preference) {
  .visor[open] { animation: aparecer .25s ease; }
}

/* Invitación a participar */
.participa { margin-top: var(--seccion); background: var(--azul); color: #DCE4EE; padding: var(--seccion) var(--lado); }
.participa h2 { color: var(--blanco); }
.participa p { font-size: 1.125rem; }

/* Enlaces a los otros programas */
.otros-programas { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); }
.otros-programas h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.otros-programas ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0; }
.otros-programas a { display: grid; gap: 0.25rem; padding: 1.25rem 0; border-top: 1px solid var(--linea); text-decoration: none; }
.otros-programas li:last-child a { border-bottom: 1px solid var(--linea); }
.otro-nombre { font-family: var(--titulos); font-size: 1.5rem; color: var(--azul); }
.otro-resumen { color: var(--tinta-suave); }
.otros-programas a:hover .otro-nombre { color: var(--oro-texto); }

@media (min-width: 640px) {
  .galeria-lista { grid-template-columns: repeat(3, 1fr); }
  .niveles { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .programa-bloque { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .programa-bloque:nth-child(even) .programa-bloque-foto { order: 2; }
  .servicio { display: grid; grid-template-columns: 1fr 1.4fr; column-gap: 4rem; }
  .servicio > h2 { grid-row: span 6; }
  .servicio > *:not(h2) { grid-column: 2; }
  .galeria-lista { grid-template-columns: repeat(4, 1fr); }
  .otros-programas ul { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .otros-programas li:last-child a { border-bottom: 0; }
}

/* ---------- Contacto ---------- */
.canales { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: grid; gap: 1rem; }
.canal { display: grid; gap: 0.25rem; align-content: start; padding: 1.5rem; border: 1px solid var(--linea); border-radius: 4px; text-decoration: none; }
.canal-nombre { font-weight: 700; color: var(--oro-texto); }
.canal-dato { font-family: var(--titulos); font-size: 1.5rem; color: var(--azul); text-decoration: none; overflow-wrap: anywhere; }
a.canal-dato:hover { color: var(--oro-texto); }
.canal-correo { font-family: var(--texto); font-size: 1rem; font-weight: 600; }
.canal-principal { background: var(--azul); border-color: var(--azul); transition: background-color .2s; }
.canal-principal .canal-nombre { color: var(--oro); }
.canal-principal .canal-dato { color: var(--blanco); font-size: 1.875rem; }
.canal-accion { margin-top: 0.75rem; justify-self: start; padding: 0.5rem 1.1rem; border-radius: 999px; background: var(--oro); color: var(--azul-hondo); font-weight: 600; }
.canal-principal:hover { background: var(--azul-hondo); }
/* WhatsApp del comedor: con su morado y su lima */
.canal-comedor { background: var(--com-purpura); border-color: var(--com-purpura); transition: background-color .2s; }
.canal-comedor .canal-nombre { color: var(--com-lima); }
.canal-comedor .canal-dato { color: var(--blanco); font-size: 1.875rem; }
.canal-comedor .canal-accion { background: var(--com-lima); color: var(--tinta); }
.canal-comedor:hover { background: #722F72; }

.contacto-cuerpo { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); display: grid; gap: 4rem; }
.formulario h2, .contacto-datos h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
.contacto-datos h2 { font-size: 1.5rem; margin-bottom: 0.4em; }
.contacto-datos { display: grid; gap: 2.5rem; align-content: start; }
.campo { display: grid; gap: 0.4rem; margin-bottom: 1.25rem; }
.campo label { font-weight: 600; }
.opcional { font-weight: 400; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem;
  font: inherit; color: var(--tinta); background: var(--blanco);
  border: 1.5px solid #9AA8BA; border-radius: 4px;
}
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.55); }
.campo-ayuda { font-size: 0.95rem; color: var(--tinta-suave); background: var(--cielo); padding: 0.75rem 1rem; border-radius: 4px; margin: 0.25rem 0 0; }
.formulario .boton { border: 0; cursor: pointer; }
.horario { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.5rem; margin: 0; }
.horario dt { font-weight: 600; }
.horario dd { margin: 0; }
.redes { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; }
.gracias { padding-bottom: var(--seccion); }

@media (min-width: 640px) {
  .campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (min-width: 960px) {
  .canales { grid-template-columns: 1fr 1fr; }
  .contacto-cuerpo { grid-template-columns: 1.5fr 1fr; gap: 6rem; }
}

/* ---------- Libros ---------- */
.compra-pasos { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.compra-pasos ol { list-style: none; counter-reset: paso; margin: 0; padding: 1.25rem 1.5rem; display: grid; gap: 0.75rem; background: var(--cielo); border-radius: 4px; }
.compra-pasos li { counter-increment: paso; display: flex; align-items: center; gap: 0.85rem; }
.compra-pasos li::before {
  content: counter(paso); flex: none; display: grid; place-items: center;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  background: var(--azul); color: var(--oro); font-weight: 700; font-size: 0.9rem;
}
.libros-lista { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); display: grid; gap: 5rem; }
.libro { display: grid; gap: 2rem; scroll-margin-top: 6rem; }
/* Portada con marco dorado desplazado, como el marco de la puerta */
.libro-portada { position: relative; max-width: 26rem; margin: 0 0.75rem 0.75rem 0; }
.libro-portada::before { content: ""; position: absolute; inset: 0.75rem -0.75rem -0.75rem 0.75rem; border: 2px solid var(--oro); border-radius: 4px; }
.libro-portada img { position: relative; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.libro h2 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.2em; }
.libro-subtitulo { font-size: 1.2rem; color: var(--tinta-suave); margin-bottom: 0.4rem; }
.libro-autor { font-weight: 600; margin-bottom: 1rem; }
.libro-precio { font-family: var(--titulos); font-size: 2rem; color: var(--oro-texto); margin-bottom: 1rem; }
.libro h3 { font-family: var(--texto); font-weight: 700; font-size: 1rem; color: var(--azul); margin: 1.5rem 0 0.5rem; }
.libro-contenido { margin: 0 0 1.25rem; padding-left: 1.2rem; }
.libro-contenido li { margin-bottom: 0.35rem; }
.libro-contenido li::marker { color: var(--oro); }
.libro-dato { margin-bottom: 0.6rem; }
.libro-dato strong { color: var(--azul); }
.libro .boton { margin-top: 1rem; }
/* Al llegar desde Inicio a un libro, se resalta un momento */
@media (prefers-reduced-motion: no-preference) {
  .libro:target .libro-portada::before { animation: resaltar 1.4s ease 2; }
}
@keyframes resaltar { 50% { inset: 1.25rem -1.25rem -1.25rem 1.25rem; border-color: var(--azul); } }

@media (min-width: 640px) {
  .compra-pasos ol { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
@media (min-width: 960px) {
  .libro { grid-template-columns: 1fr 1.25fr; gap: 5rem; align-items: start; }
  .libro-portada { position: sticky; top: 7rem; }
}

/* ---------- Noticias: listado ---------- */
.noticias-indice { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) var(--seccion); }
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filtro {
  min-height: 2.75rem; padding: 0.5rem 1.1rem;
  font: 600 0.95rem var(--texto); color: var(--azul);
  background: var(--blanco); border: 1.5px solid var(--linea); border-radius: 999px; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.filtro:hover { border-color: var(--azul); }
.filtro[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.filtro-cuenta { font-weight: 400; opacity: 0.7; }
.filtros-estado { font-size: 0.9rem; color: var(--tinta-suave); margin: 1rem 0 0; min-height: 1.4em; }

.noticias-todas { list-style: none; margin: 1rem 0 0; padding: 0; }
.noticias-todas li { border-top: 1px solid var(--linea); }
.noticias-todas li:last-child { border-bottom: 1px solid var(--linea); }
.noticias-todas a { display: grid; gap: 0.4rem; padding: 1.75rem 0; text-decoration: none; }
.noticias-todas .noticia-titulo { font-family: var(--titulos); font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.875rem); line-height: 1.15; color: var(--azul); margin: 0; }
.noticias-todas a:hover .noticia-titulo { text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 0.2em; }
.noticia-resumen { color: var(--tinta-suave); max-width: 65ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.noticias-todas time { font-size: 0.9rem; color: var(--tinta-suave); }
.ver-mas { margin-top: 2rem; }
.noticias-todas li[hidden] { display: none; }

/* ---------- Noticias: cada entrada ---------- */
.lectura-progreso {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px;
  background: var(--oro); transform-origin: 0 50%; transform: scaleX(0);
}
.articulo-cabeza h1 { font-size: clamp(2.25rem, 6vw, 4rem); max-width: 22ch; }
.articulo-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; color: var(--tinta-suave); font-size: 0.95rem; max-width: none; }
.articulo-categoria { padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--cielo); color: var(--azul); font-weight: 600; text-decoration: none; }
.articulo-categoria:hover { background: var(--oro); }

.articulo-cuerpo { max-width: var(--ancho); margin: 0 auto; padding: 1rem var(--margen) 0; display: grid; gap: 2.5rem; }
.articulo-cuerpo > * { min-width: 0; }
.articulo { max-width: 68ch; font-size: 1.125rem; line-height: 1.72; }
.articulo p { max-width: none; }
.articulo h2 { font-size: clamp(1.75rem, 4vw, 2.375rem); margin: 2.5rem 0 0.75rem; scroll-margin-top: 6rem; }
.articulo h3 { font-family: var(--texto); font-weight: 700; font-size: 1.2rem; color: var(--azul); margin: 2rem 0 0.5rem; }
.articulo ul, .articulo ol { padding-left: 1.3rem; margin: 0 0 1.25rem; }
.articulo li { margin-bottom: 0.5rem; }
.articulo li::marker { color: var(--oro-texto); }
.articulo a { color: var(--azul); text-decoration-color: var(--oro); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.articulo blockquote { margin: 1.75rem 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 3px solid var(--oro); color: var(--tinta-suave); font-size: 1.05rem; }
.articulo blockquote cite { display: block; font-size: 0.9rem; font-style: normal; font-weight: 600; color: var(--oro-texto); }
.tabla { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--linea); border-radius: 4px; }
.tabla table { width: 100%; border-collapse: collapse; font-size: 0.975rem; line-height: 1.5; min-width: 32rem; }
.tabla th { background: var(--azul); color: var(--blanco); text-align: left; font-weight: 600; }
.tabla th, .tabla td { padding: 0.7rem 0.9rem; vertical-align: top; }
.tabla tr:nth-child(even) td { background: var(--cielo); }
.compartir { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); }

.articulo-indice { align-self: start; padding: 1.25rem 1.5rem; background: var(--cielo); border-radius: 4px; }
.articulo-indice h2 { font-family: var(--texto); font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; }
.articulo-indice ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; font-size: 0.95rem; line-height: 1.4; }
.articulo-indice a { text-decoration: none; color: var(--tinta); }
.articulo-indice a:hover, .articulo-indice a.actual { color: var(--oro-texto); text-decoration: underline; }

.relacionadas { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); }
.relacionadas .noticia-titulo { font-size: clamp(1.3rem, 2.6vw, 1.6rem); }

@media (min-width: 960px) {
  .noticias-todas a { grid-template-columns: 11rem 1fr 10rem; grid-template-areas: "cat titulo fecha" ". resumen ."; column-gap: 2rem; align-items: baseline; }
  .noticias-todas .noticia-categoria { grid-area: cat; }
  .noticias-todas .noticia-titulo { grid-area: titulo; }
  .noticias-todas .noticia-resumen { grid-area: resumen; }
  .noticias-todas time { grid-area: fecha; text-align: right; }
  .articulo-cuerpo { grid-template-columns: 1fr 17rem; gap: 5rem; align-items: start; }
  .articulo-indice { order: 2; position: sticky; top: 7rem; max-height: calc(100vh - 9rem); overflow-y: auto; }
}

/* ---------- Involúcrate ---------- */
/* Accesos a cada forma de participar */
.caminos { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) 3rem; }
.caminos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.caminos li a {
  display: grid; gap: 0.2rem; padding: 1.1rem 0;
  border-top: 2px solid var(--oro); text-decoration: none;
}
.camino-nombre { font-family: var(--titulos); font-size: 1.6rem; line-height: 1.15; color: var(--azul); }
.camino-dato { color: var(--tinta-suave); font-size: 0.95rem; }
.caminos li a:hover .camino-nombre { color: var(--oro-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.caminos-dinero { margin: 1.25rem 0 0; color: var(--tinta-suave); }

/* Foto de grupo: se ve completa (sin recortar las caras de los lados) */
.foto-grupo img { aspect-ratio: 16 / 9; }

/* Voluntariado: áreas y cómo empezar */
.voluntariado { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); scroll-margin-top: 4rem; }
.voluntariado-cabeza p { font-size: 1.125rem; }
.areas { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 2.5rem; }
.areas li { border-top: 2px solid var(--oro); padding-top: 1.25rem; }
.areas p { margin-bottom: 0.75rem; }
.requisitos { margin-top: 4rem; padding: 2rem 1.5rem; background: var(--cielo); border-radius: 4px; }
.requisitos h3 { margin-bottom: 1rem; }
.requisitos-nota { margin: 1.5rem 0 0; }
.requisitos .boton { margin-top: 1.5rem; }
/* Pasos numerados (sí son una secuencia) */
.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.pasos li { counter-increment: paso; display: flex; align-items: center; gap: 0.85rem; font-size: 1.1rem; }
.pasos li::before {
  content: counter(paso); flex: none; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--azul); color: var(--oro); font-weight: 700; font-size: 0.95rem;
}

/* Donaciones en especie: lo que se recibe, en letra grande */
.especie { background: var(--azul); color: #DCE4EE; padding: var(--seccion) var(--lado); display: grid; gap: 2.5rem; scroll-margin-top: 4rem; }
.especie h2 { color: var(--blanco); }
.especie p { font-size: 1.125rem; }
.especie .boton { margin-top: 0.75rem; }
.especie-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.1em 0.6em; align-content: center; }
.especie-lista li { font-family: var(--titulos); font-size: clamp(2.25rem, 7vw, 4.25rem); line-height: 1.1; color: var(--blanco); }
.especie-lista li:nth-child(even) { color: var(--oro); }

/* Campañas: el mes es lo primero que se lee */
.campanas { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen) 0; scroll-margin-top: 4rem; }
.campanas > p { font-size: 1.125rem; }
.campanas-lista { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 3rem; }
.campana-mes {
  font-family: var(--titulos); font-size: clamp(3rem, 9vw, 5.5rem); line-height: 1;
  color: var(--oro-texto); margin-bottom: 0.75rem;
  padding-bottom: 0.75rem; border-bottom: 2px solid var(--oro);
}
.campanas-lista h3 { margin-bottom: 0.4rem; }

/* Alianzas */
.alianzas { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); display: grid; gap: 1rem 5rem; scroll-margin-top: 4rem; }
.alianzas-texto > p { font-size: 1.125rem; }
.alianzas-lista { margin: 0 0 1.75rem; padding-left: 1.2rem; }
.alianzas-lista li { margin-bottom: 0.5rem; font-size: 1.05rem; }
.alianzas-lista li::marker { color: var(--oro); }

/* Formulario: las opciones son botones que se marcan */
.sumarse { background: var(--cielo); padding: var(--seccion) var(--lado); scroll-margin-top: 4rem; }
.sumarse .formulario { max-width: 46rem; }
.opciones { border: 0; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.opciones legend { font-weight: 600; margin-bottom: 0.75rem; padding: 0; }
.opciones > label:not(.confirmar) {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.6rem 1.1rem;
  background: var(--blanco); border: 1.5px solid #9AA8BA; border-radius: 999px;
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.opciones > label:not(.confirmar):hover { border-color: var(--azul); }
.opciones > label:has(input:checked) { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.opciones > label:has(input:focus-visible) { outline: 3px solid var(--oro); outline-offset: 2px; }
.opciones input:is([type="radio"], [type="checkbox"]) { accent-color: var(--oro); width: 1.1rem; height: 1.1rem; margin: 0; }
.opciones-extra .campo { flex-basis: 100%; width: 100%; margin: 0.75rem 0 0; }
.opciones-extra .confirmar { display: flex; gap: 0.6rem; align-items: center; flex-basis: 100%; font-weight: 600; margin-top: 0.5rem; cursor: pointer; }
.opciones-extra .confirmar input { accent-color: var(--azul); width: 1.25rem; height: 1.25rem; }
/* Lo que aparece al elegir una opción entra con un movimiento corto */
@media (prefers-reduced-motion: no-preference) {
  .opciones-extra:not([hidden]) { animation: subir .35s cubic-bezier(.2, .6, .2, 1); }
}

@media (min-width: 640px) {
  .caminos ul { grid-template-columns: 1fr 1fr; gap: 0 2rem; }
  .areas { grid-template-columns: 1fr 1fr; gap: 3rem 2.5rem; }
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .campanas-lista { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
@media (min-width: 960px) {
  .caminos ul { grid-template-columns: repeat(4, 1fr); }
  .voluntariado { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0 5rem; }
  .voluntariado-cabeza { align-self: start; }
  .areas { margin-top: 0; }
  .requisitos { grid-column: 1 / -1; padding: 2.5rem 3rem; }
  .especie { grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: center; }
  .alianzas { grid-template-columns: 1fr 1.6fr; }
}

/* ---------- Versión en inglés ---------- */
/* Aviso discreto en los enlaces que llevan a páginas que siguen en español */
.en-espanol { font-weight: 400; font-size: 0.9em; opacity: 0.8; }
.boton .en-espanol { margin-left: 0.3em; }
.libros-nota { padding: 0 var(--margen); margin: -1rem 0 2rem; color: var(--tinta-suave); }

/* ---------- Donar ---------- */
.donar-formas { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) var(--seccion); display: grid; gap: 1.25rem; }
.donar-formas article { padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: 4px; }
.donar-formas h2 { font-size: clamp(1.9rem, 4vw, 2.5rem); }
.donar-linea { background: var(--azul); color: #DCE4EE; }
.donar-linea h2 { color: var(--blanco); }
.donar-linea p { font-size: 1.125rem; }
.donar-transferencia { border: 1px solid var(--linea); }
.cuenta { margin: 0; }
.cuenta div { padding: 0.75rem 0; border-top: 1px solid var(--linea); }
.cuenta dt { font-size: 0.95rem; font-weight: 600; color: var(--oro-texto); }
.cuenta dd { margin: 0; font-family: var(--titulos); font-size: 1.5rem; color: var(--azul); }
.cuenta-numero dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: clamp(1.6rem, 5vw, 2rem); letter-spacing: 0.02em; }
.copiar {
  padding: 0.4rem 1rem; border: 2px solid var(--oro); border-radius: 999px; background: none; cursor: pointer;
  font: 600 0.95rem var(--texto); color: var(--azul); transition: background-color .2s;
}
.copiar:hover { background: var(--oro); }
.copiar-estado { margin: 0.5rem 0 0; min-height: 1.6em; font-size: 0.95rem; color: var(--tinta-suave); }
.donar-comedor-logo { width: clamp(9rem, 30vw, 14rem); height: auto; justify-self: center; border-radius: 50%; background: var(--blanco); transform: rotate(-6deg); box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.5); }
/* Toda la página Donar va centrada */
.pagina-donar .pagina-cabeza, .pagina-donar .siguiente, .donar-formas article, .donar-comedor { text-align: center; }
.pagina-donar .arco { margin-inline: auto; }
.pagina-donar h1, .pagina-donar h2, .pagina-donar p { margin-inline: auto; }
.pagina-donar .acciones { justify-content: center; }
.donar-formas article { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cuenta { width: 100%; }
.cuenta-numero dd { justify-content: center; }
.donar-comedor { justify-items: center; }
.donar-comedor-logo { order: -1; }
@media (min-width: 960px) {
  .donar-formas { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .donar-comedor { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* =========================================================
   Comedor de Emmanuel: identidad propia (kit de marca del comedor)
   Fuentes Comfortaa y Roboto, solo dentro de .pagina-comedor
   ========================================================= */
.pagina-comedor { font-family: "Roboto", var(--texto); }
.pagina-comedor h1, .pagina-comedor h2, .pagina-comedor h3 { font-family: "Comfortaa", var(--texto); font-weight: 700; letter-spacing: -0.01em; }
.pagina-comedor h2 { font-size: clamp(1.9rem, 5vw, 3rem); color: var(--com-azul); }
.pagina-comedor h3 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); color: var(--tinta); }

/* Colores de apoyo: cada bloque toma uno del kit */
.color-azul { --c: var(--com-azul); --c-texto: var(--blanco); }
.color-magenta { --c: var(--com-magenta); --c-texto: var(--blanco); }
.color-lima { --c: var(--com-lima); --c-texto: var(--tinta); }
.color-naranja { --c: var(--com-naranja); --c-texto: var(--tinta); }
.color-rojo { --c: var(--com-rojo); --c-texto: var(--blanco); }
.color-purpura { --c: var(--com-purpura); --c-texto: var(--blanco); }

/* Botones del comedor */
.com-boton-magenta { background: var(--com-magenta); color: var(--blanco); }
.com-boton-magenta:hover { background: var(--com-purpura); }
.com-boton-linea { border-color: var(--com-azul); color: var(--tinta); }
.com-boton-linea:hover { background: var(--com-azul); color: var(--blanco); }
.com-boton-lima { background: var(--com-lima); color: var(--tinta); }
.com-boton-lima:hover { background: var(--blanco); }

/* Polaroid: foto con borde blanco, un poco inclinada y con cinta de color */
.polaroid { position: relative; margin: 0; padding: 0.6rem 0.6rem 2rem; background: var(--blanco); box-shadow: 0 1px 2px rgba(19, 34, 58, 0.18), 0 8px 24px -12px rgba(19, 34, 58, 0.35); }
.polaroid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid::before {
  content: ""; position: absolute; top: -0.7rem; left: 50%; width: 5.5rem; height: 1.5rem;
  transform: translateX(-50%) rotate(-3deg); background: var(--cinta, var(--com-lima)); opacity: 0.85;
}

/* ---------- Portada ---------- */
.com-portada { max-width: var(--ancho); margin: 0 auto; padding: 2.5rem var(--margen) var(--seccion); display: grid; gap: 3rem; align-items: center; }
.com-proyecto { font-size: 0.95rem; color: var(--tinta-suave); margin-bottom: 1rem; }
.com-proyecto a { color: var(--tinta); font-weight: 500; }
.com-portada h1 { font-size: clamp(2.6rem, 9vw, 5rem); line-height: 1.02; color: var(--com-azul); max-width: 11ch; margin-bottom: 0.3em; }
.com-lema { font-family: "Comfortaa", var(--texto); font-weight: 700; font-size: clamp(1.35rem, 3.5vw, 1.85rem); color: var(--com-magenta); margin-bottom: 1rem; }
.com-intro { font-size: 1.2rem; max-width: 40ch; }
.com-aviso { display: inline-block; margin: 1.75rem 0 0; padding: 0.6rem 1.1rem; border-radius: 999px; background: var(--com-lima); font-weight: 700; }
.com-portada-foto { width: min(85%, 26rem); justify-self: center; transform: rotate(2.5deg); --cinta: var(--com-naranja); }
.com-portada-foto img { aspect-ratio: 4 / 5; }

/* ---------- Qué es ---------- */
.com-datos { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) var(--seccion); }
.com-datos-intro { font-size: 1.15rem; max-width: 56ch; }
.com-fichas { margin: 2rem 0 0; display: grid; gap: 1rem; }
.ficha { background: var(--c); color: var(--c-texto); padding: 1.5rem; border-radius: 1.25rem; }
.ficha dt { font-weight: 500; margin-bottom: 0.25rem; }
.ficha dd { margin: 0; font-family: "Comfortaa", var(--texto); font-weight: 700; font-size: 1.4rem; line-height: 1.25; }

/* ---------- El nombre ---------- */
.com-nombre { background: var(--com-purpura); color: var(--blanco); padding: var(--seccion) var(--lado); text-align: center; }
.com-nombre h2 { color: var(--blanco); max-width: 20ch; margin: 0 auto 0.5em; font-size: clamp(2rem, 6vw, 3.75rem); }
.com-nombre p { margin: 0 auto; font-size: 1.25rem; color: var(--com-lima); font-weight: 500; }

/* ---------- Historia: línea de tiempo ---------- */
.com-historia { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); display: grid; gap: 2.5rem; }
.com-historia-cabeza p { font-size: 1.15rem; }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 2rem; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 0.55rem; top: 0.5rem; bottom: 0.5rem; width: 3px; border-radius: 3px; background: linear-gradient(var(--com-azul), var(--com-magenta), var(--com-naranja), var(--com-lima)); }
.hito { position: relative; padding-bottom: 2rem; }
.hito::before { content: ""; position: absolute; left: -2rem; top: 0.2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--c-hito); box-shadow: 0 0 0 4px var(--blanco); }
.hito-azul { --c-hito: var(--com-azul); } .hito-magenta { --c-hito: var(--com-magenta); } .hito-lima { --c-hito: var(--com-lima); }
.hito-naranja { --c-hito: var(--com-naranja); } .hito-rojo { --c-hito: var(--com-rojo); } .hito-purpura { --c-hito: var(--com-purpura); }
.hito-fecha { font-weight: 700; color: var(--tinta-suave); margin-bottom: 0.2rem; }
.hito h3 { margin-bottom: 0.3rem; }
.hito p:last-child { margin: 0; }

/* ---------- Actividades ---------- */
.com-actividades { background: #EAF5FB; padding: var(--seccion) var(--lado); }
.actividades { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 3rem 2rem; }
.actividad .polaroid { --cinta: var(--c); margin-bottom: 1.25rem; transform: rotate(-1.5deg); }
.actividad:nth-child(even) .polaroid { transform: rotate(1.75deg); }
.actividad h3 { color: var(--tinta); }
.actividad h3::after { content: ""; display: block; width: 2.5rem; height: 4px; border-radius: 4px; background: var(--c); margin-top: 0.5rem; }

/* ---------- Misión, visión y valores ---------- */
.com-mision { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); display: grid; gap: 2.5rem; }
.com-mision h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
.com-mision p { font-size: 1.1rem; }
.com-valores ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.com-valores li { background: var(--c); color: var(--c-texto); padding: 0.55rem 1.1rem; border-radius: 999px; font-weight: 500; }

/* ---------- Cartelera ---------- */
.cartelera { background: var(--com-azul); padding: var(--seccion) var(--lado); }
.cartelera h2 { color: var(--blanco); }
.cartelera > p { color: var(--blanco); font-weight: 500; font-size: 1.1rem; }
.cartelera-lista { list-style: none; margin: 2.5rem 0 0; padding: 0; columns: 2; column-gap: 1.25rem; }
.cartelera-lista li { break-inside: avoid; margin-bottom: 1.75rem; }
.cartelera-lista .polaroid { cursor: zoom-in; border: 0; width: 100%; border-radius: 0; overflow: visible; transition: transform .25s ease; }
.cartelera-lista .polaroid img { aspect-ratio: 4 / 3; transition: none; }
.cartelera-lista .alta .polaroid img { aspect-ratio: 3 / 4; }
.cartelera-lista li:nth-child(3n+1) .polaroid { transform: rotate(-2deg); --cinta: var(--com-lima); }
.cartelera-lista li:nth-child(3n+2) .polaroid { transform: rotate(1.5deg); --cinta: var(--com-naranja); }
.cartelera-lista li:nth-child(3n) .polaroid { transform: rotate(-0.75deg); --cinta: var(--com-magenta); }
.cartelera-lista .polaroid:hover, .cartelera-lista .polaroid:focus-visible { transform: rotate(0) scale(1.03); }
.cartelera-lista .polaroid:hover img { transform: none; }

/* ---------- Cómo ayudar ---------- */
.com-ayuda { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); }
.ayudas { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.ayudas li { border: 2px solid var(--c); border-top-width: 0.75rem; border-radius: 1.25rem; padding: 1.5rem; }
.ayudas p { margin-bottom: 1rem; }

/* ---------- Cierre ---------- */
.com-cierre { background: var(--com-magenta); color: var(--blanco); padding: var(--seccion) var(--lado); text-align: center; }
.com-cierre h2 { color: var(--blanco); }
.com-cierre p { margin: 0 auto 1.75rem; font-size: 1.2rem; }

@media (min-width: 640px) {
  .com-fichas { grid-template-columns: repeat(3, 1fr); }
  .actividades { grid-template-columns: 1fr 1fr; }
  .cartelera-lista { columns: 3; column-gap: 2rem; }
  .ayudas { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .com-portada { grid-template-columns: 1.2fr 1fr; gap: 4rem; padding-top: 4.5rem; }
  .com-historia { grid-template-columns: 1fr 1.4fr; gap: 5rem; align-items: start; }
  .com-historia-cabeza { position: sticky; top: 7rem; }
  .actividades { grid-template-columns: repeat(4, 1fr); gap: 3rem 1.75rem; }
  .com-mision { grid-template-columns: 1fr 1fr; gap: 3rem 5rem; }
  .com-valores { grid-column: 1 / -1; }
  .cartelera-lista { columns: 4; }
  .ayudas { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Tendedero: fotos colgadas con pinzas en un cordel ---------- */
.com-tendedero { padding: var(--seccion) 0; overflow-x: clip; }
.tendedero-cabeza { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: grid; gap: 0 2rem; }
.tendedero-cabeza p { font-size: 1.1rem; }
.com-tendedero h2 { --garabato: var(--com-lima); }
.tendedero-flechas { display: flex; gap: 0.75rem; }
.tendedero-flecha {
  width: 3rem; height: 3rem; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--com-azul); color: var(--blanco);
  transition: background-color .2s, scale .15s;
}
.tendedero-flecha:nth-child(2) { background: var(--com-magenta); }
.tendedero-flecha:hover { scale: 1.1; }
.tendedero-flecha svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tendedero {
  list-style: none; margin: 1.5rem 0 0; padding: 2.25rem var(--lado) 2.5rem;
  display: flex; align-items: flex-start; gap: 1.75rem;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--lado);
  scrollbar-width: thin; scrollbar-color: var(--com-lima) transparent;
  /* El cordel: una línea que se desplaza con las fotos */
  background: radial-gradient(ellipse 60% 100% at 50% 0, transparent 97%, var(--tinta-suave) 98%, var(--tinta-suave) 100%, transparent 101%) 0 1rem / 22rem 2.5rem repeat-x local;
}
.tendedero li { position: relative; flex: none; width: clamp(13rem, 60vw, 17rem); scroll-snap-align: start; transform-origin: 50% -1rem; rotate: var(--g); }
.tendedero .polaroid { display: block; width: 100%; border: 0; cursor: zoom-in; --cinta: transparent; }
.tendedero .polaroid::before { display: none; }
.tendedero .alta .polaroid img { aspect-ratio: 3 / 4; }
/* Pinza de color */
.tendedero li::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: -1.6rem; width: 0.9rem; height: 2.4rem;
  margin-left: -0.45rem; border-radius: 0.35rem; background: var(--pinza); box-shadow: 0 2px 0 rgba(19, 34, 58, 0.2);
}
.tendedero:focus-visible { outline-offset: -4px; }
@media (prefers-reduced-motion: no-preference) {
  .tendedero li { animation: mecer var(--d) ease-in-out infinite alternate; }
  .tendedero li:hover { animation-play-state: paused; }
}
@keyframes mecer { from { rotate: var(--g); } to { rotate: calc(var(--g) * -1); } }
@media (min-width: 960px) {
  .tendedero-cabeza { grid-template-columns: 1fr auto; align-items: end; }
  .tendedero-cabeza h2, .tendedero-cabeza p { grid-column: 1; }
  .tendedero-flechas { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-bottom: 1rem; }
}

/* ---------- Redes del comedor: píldoras de colores en una sola línea ---------- */
.com-redes { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) var(--seccion); }
.com-redes h2 { --garabato: var(--com-lima); }
.com-redes > p { font-size: 1.1rem; }
.redes-lista { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.redes-lista a {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem;
  border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 1rem;
  background: var(--c); color: var(--c-texto); box-shadow: 0 3px 0 rgba(19, 34, 58, 0.18);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.redes-lista a:hover, .redes-lista a:focus-visible { transform: translateY(-3px) rotate(-2deg); }
.redes-lista svg { flex: none; width: 1.15rem; height: 1.15rem; }

/* ---------- Toques infantiles: aro, olas y garabatos ---------- */
/* Título: el logo lineal del comedor. Al abrir la página entra con un saltico (un solo momento) */
.com-titulo { margin: 0 0 1.25rem; }
.com-titulo img { width: min(100%, 34rem); margin-left: -0.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .com-titulo img { animation: saltico .8s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
  .com-portada-visual::before { animation: girar 40s linear infinite; }
}
@keyframes saltico { from { opacity: 0; transform: scale(.85) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes girar { to { transform: rotate(1turn); } }

/* Aro de colores detrás de la foto, como el borde del logo */
.com-portada-visual { position: relative; display: grid; place-items: center; padding: 1.5rem 0; }
.com-portada-visual::before {
  content: ""; position: absolute; width: min(100%, 34rem); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--com-magenta) 0 16%, var(--com-naranja) 0 30%, #F6C700 0 44%, var(--com-lima) 0 62%, var(--com-azul) 0 86%, var(--com-magenta) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
}
.com-portada-visual .com-portada-foto { width: min(70%, 22rem); }

/* Aviso como calcomanía */
.com-aviso { transform: rotate(-2deg); box-shadow: 0 3px 0 rgba(19, 34, 58, 0.15); }

/* Garabato de color bajo los títulos */
.pagina-comedor h2::after {
  content: ""; display: block; width: 7rem; height: 0.7rem; margin-top: 0.35em;
  background: var(--garabato, var(--com-magenta));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 12'%3E%3Cpath d='M2 8c9-7 16-7 25 0s16 7 25 0 16-7 25 0 16 7 25 0' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 12'%3E%3Cpath d='M2 8c9-7 16-7 25 0s16 7 25 0 16-7 25 0 16 7 25 0' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.com-historia h2, .com-ayuda h2 { --garabato: var(--com-naranja); }
.com-actividades h2 { --garabato: var(--com-lima); }
.com-nombre h2::after, .com-cierre h2::after { margin-inline: auto; --garabato: var(--com-lima); }
.cartelera h2 { --garabato: var(--com-lima); }

/* Bordes ondulados en las secciones de color */
.con-olas, .con-ola-arriba { position: relative; }
.con-olas::before, .con-olas::after, .con-ola-arriba::before {
  content: ""; position: absolute; left: 0; right: 0; height: 1.25rem; background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V10C10 0 30 0 40 10S70 20 80 10V20Z'/%3E%3C/svg%3E") repeat-x bottom / 80px 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V10C10 0 30 0 40 10S70 20 80 10V20Z'/%3E%3C/svg%3E") repeat-x bottom / 80px 100%;
}
.con-olas::before, .con-ola-arriba::before { top: calc(-1.25rem + 1px); }
.con-olas::after { bottom: calc(-1.25rem + 1px); transform: scaleY(-1); z-index: 1; }

/* Fichas y tarjetas un poco torcidas, que se enderezan al pasar */
.ficha { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.ficha:nth-child(1) { transform: rotate(-1.5deg); }
.ficha:nth-child(2) { transform: rotate(1deg); }
.ficha:nth-child(3) { transform: rotate(-0.75deg); }
.ficha:hover, .ayudas li:hover { transform: rotate(0) translateY(-4px); }
.ayudas li { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); background: var(--blanco); }
.com-valores li:nth-child(odd) { transform: rotate(-1.5deg); }
.com-valores li:nth-child(even) { transform: rotate(1.5deg); }

/* =========================================================
   Movimiento: el sitio responde al bajar, sin perder la sobriedad.
   Todo queda quieto si la persona pidió reducir el movimiento.
   ========================================================= */

/* El arco de la puerta, en pequeño, sobre los títulos de sección.
   js/main.js lo agrega a los h2 con data-arco y lo dibuja al aparecer. */
.arco { display: block; width: 1.6rem; height: auto; margin-bottom: 0.9rem; overflow: visible; }
.arco path { fill: none; stroke: var(--oro); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.historia .arco, .pagina-cabeza .arco { width: 2rem; }

/* Fotos con profundidad: se desplazan despacio dentro de su marco al bajar */
.foto-marco { display: block; overflow: hidden; overflow: clip; border-radius: 4px; }
.comedor-foto picture, .foto-ancha picture { display: block; overflow: hidden; overflow: clip; border-radius: 4px; }
.comedor-foto picture { border-radius: 0; }
.programa-bloque-foto { overflow: clip; }

/* Botones: se levantan un poco al pasar el mouse y se hunden al tocarlos */
.boton { transition: background-color .2s, color .2s, border-color .2s, translate .2s, scale .1s; }

/* Encabezado que se compacta al bajar (en computador) */
.marca img { transition: width .3s ease; }
.encabezado.compacto .marca img { width: 2.5rem; }

/* Programas en el celular: se marca el que está en pantalla */
@media (max-width: 959px) {
  .programas-auto .programa-foto { filter: saturate(.55); transition: filter .5s ease; }
  .programas-auto .programa.activo .programa-foto { filter: none; }
  .programas-auto .programa h3 { transition: color .3s; }
  .programas-auto .programa.activo h3 { color: var(--oro-texto); }
  .programas-auto .programa.activo h3::after { transform: translateX(0.3em) rotate(45deg); }
}

@media (min-width: 960px) {
  /* Línea dorada bajo el enlace del menú al pasar el mouse y en la página actual */
  .menu a:not(.boton) { position: relative; }
  .menu a:not(.boton)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 2px;
    background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
  }
  .menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
  .encabezado { transition: border-color .3s, padding .3s ease; }
  .encabezado.compacto { padding-block: 0.4rem; }
  .encabezado.compacto .marca img { width: 2.75rem; }
}

@media (prefers-reduced-motion: no-preference) {
  /* El arco empieza sin dibujar y se traza cuando el título entra en pantalla */
  .js-mov .arco path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.6, 0, .2, 1) .1s; }
  .js-mov .visto .arco path { stroke-dashoffset: 0; }

  .boton:hover { translate: 0 -2px; }
  .boton:active { translate: 0; scale: .97; }

  .enlace:hover { animation: trazo .5s cubic-bezier(.6, 0, .2, 1); }

  /* Paso suave entre páginas: el contenido se funde y el encabezado se queda quieto */
  @view-transition { navigation: auto; }
  .encabezado { view-transition-name: encabezado; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
}
@keyframes trazo { from { background-size: 0 2px; } to { background-size: 100% 2px; } }

/* La profundidad usa la línea de tiempo del scroll del navegador (sin JavaScript).
   Donde no existe, las fotos simplemente quedan quietas. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .foto-mov, .foto-ancha picture img, .programa-bloque-foto img { scale: 1.12; animation: profundidad linear both; animation-timeline: view(); }
    .puerta-foto { overflow: clip; }
    .puerta-foto img {
      scale: 1.08;
      animation: acercar 2.2s cubic-bezier(.2, .6, .2, 1) .7s both, profundidad linear both;
      animation-timeline: auto, view();
    }
  }
}
@keyframes profundidad { from { translate: 0 -4%; } to { translate: 0 4%; } }

/* =========================================================
   Comedor: "un recreo en movimiento"
   Aquí sí hay rebotes y color: es un movimiento infantil.
   ========================================================= */

/* 1. Figuras de colores alrededor de la foto de portada */
.com-portada { overflow-x: clip; }
.com-figuras { position: absolute; inset: 0; pointer-events: none; }
.figura {
  position: absolute; left: var(--x); top: var(--y); width: var(--t); height: var(--t);
  margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2);
  color: var(--f); overflow: visible; rotate: var(--g);
  /* js/main.js mueve las figuras según el mouse y el scroll (más las de mayor profundidad) */
  translate: calc(var(--mx, 0) * var(--p) * 18px) calc(var(--my, 0) * var(--p) * 18px + var(--sy, 0) * var(--p) * -0.12px);
  transition: translate .25s ease-out;
}
.com-portada-foto { z-index: 1; }

/* 2. Aviso "¡Volvimos!" como banderín y confeti de bienvenida */
.com-aviso { transform-origin: 50% -2rem; }
.lluvia, .estallido { position: fixed; pointer-events: none; z-index: 60; }
.lluvia { inset: 0; overflow: hidden; }
.lluvia i {
  position: absolute; top: -2rem; left: var(--l); width: var(--s); height: calc(var(--s) * var(--a, 1));
  background: var(--c); border-radius: var(--b, 2px);
  animation: llover var(--d) cubic-bezier(.25, .4, .5, 1) var(--t) both;
}
@keyframes llover {
  from { transform: translate(0, 0) rotate(0); }
  to   { transform: translate(var(--x), 110vh) rotate(var(--r)); }
}
.estallido i {
  position: absolute; left: 0; top: 0; width: 0.55rem; height: 0.55rem; margin: -0.275rem;
  background: var(--c); border-radius: var(--b, 2px);
  animation: estallar .65s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes estallar {
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.5); opacity: 0; }
}

/* 3. Dos cintas de colores que se cruzan y corren en sentidos opuestos */
.com-cintas { position: relative; display: grid; padding: 4rem 0; margin-bottom: var(--seccion); overflow-x: clip; }
.cinta {
  grid-area: 1 / 1; width: 110%; margin-left: -5%; overflow: hidden;
  font-family: "Comfortaa", var(--texto); font-weight: 700; font-size: clamp(1.1rem, 2.6vw, 1.5rem);
}
.cinta-magenta { background: var(--com-magenta); color: var(--blanco); rotate: -2.5deg; translate: 0 -1.4rem; z-index: 1; --estrella: var(--com-lima); }
.cinta-lima { background: var(--com-lima); color: var(--tinta); rotate: 2deg; translate: 0 1.4rem; --estrella: var(--com-magenta); }
.cinta-pista { display: flex; align-items: center; gap: 1.25rem; width: max-content; padding: 0.8rem 0; }
.cinta-pista span { white-space: nowrap; }
.cinta-pista svg { width: 1.1em; height: 1.1em; fill: var(--estrella); flex: none; }

/* 4. Historia: un camino de puntos de colores que se dibuja al bajar */
.linea-tiempo { view-timeline: --camino block; }
.linea-tiempo::before {
  width: 6px; left: 0.45rem; border-radius: 0;
  background: linear-gradient(var(--com-azul), var(--com-magenta), var(--com-naranja), var(--com-lima));
  -webkit-mask: radial-gradient(circle, #000 2.6px, transparent 3.2px) center top / 6px 13px repeat-y;
          mask: radial-gradient(circle, #000 2.6px, transparent 3.2px) center top / 6px 13px repeat-y;
}

@media (prefers-reduced-motion: no-preference) {
  .figura { animation: flotar var(--d) ease-in-out infinite; }
  .com-aviso { animation: balanceo 3.2s ease-in-out infinite; }
  .cinta-pista { animation: correr 38s linear infinite; }
  .cinta-lima .cinta-pista { animation-direction: reverse; }

  /* 5 y 6. Lo que aparece al bajar: js/main.js marca con .visto y el orden con --i */
  .com-mov .aparece:not(.visto) { opacity: 0; }
  .com-mov .visto { animation: pegar .7s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i, 0) * 90ms) both; }
  .com-mov .actividad.visto, .com-mov .cartelera-lista li.visto { animation-name: lanzar; animation-duration: .8s; }
  .com-mov .com-valores li.visto { animation-name: rebote; }
  /* Al pasar el mouse o tocar una foto, se menea */
  .actividad .polaroid:hover, .cartelera-lista .polaroid:hover, .cartelera-lista .polaroid:active { animation: menear .5s ease-in-out; }

  /* 7. Botones gelatina */
  .pagina-comedor .boton:hover { animation: gelatina .7s ease; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .linea-tiempo::before { animation: trazar-camino linear both; animation-timeline: --camino; animation-range: entry 20% cover 60%; }
  }
}
@keyframes flotar { 50% { transform: translateY(-12px) rotate(10deg); } }
@keyframes balanceo { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes correr { to { transform: translateX(-33.333%); } }
@keyframes trazar-camino { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes pegar { from { opacity: 0; scale: .6; rotate: -8deg; } }
@keyframes lanzar { from { opacity: 0; translate: 0 -4rem; rotate: 14deg; scale: 1.15; } }
@keyframes rebote { from { opacity: 0; scale: 0; } }
@keyframes menear { 25% { rotate: -4deg; } 50% { rotate: 3deg; } 75% { rotate: -2deg; } }
@keyframes gelatina {
  30% { scale: 1.12 .88; } 45% { scale: .92 1.08; } 60% { scale: 1.05 .95; } 75% { scale: .98 1.02; }
}

/* Sin animaciones si la persona lo pidió */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}