body { font-size: 1rem; color: var(--tinta); background: var(--fondo); }
@media (min-width: 900px) { body { font-size: 1.0625rem; } }
h1, h2, h3 { font-family: var(--fuente-display), Georgia, serif; font-weight: 600; letter-spacing: 0; color: var(--azul); }
h1 { font-size: clamp(1.75rem, 2.2vw + 1rem, 2.75rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 1.25rem; text-wrap: balance; }
h2 { font-size: clamp(1.45rem, 1.4vw + 0.95rem, 2.05rem); line-height: 1.2; margin: 0 0 0.5rem; }
h3 { font-size: 1.1rem; margin: 0 0 0.35rem; }
p { margin: 0 0 1rem; }
a { color: var(--azul); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.enlace-fuerte { font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--chocolate); outline-offset: 3px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.65rem 1.25rem; border-radius: var(--radio); font-weight: 600; font-size: 0.975rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva); }
.btn--azul { background: var(--azul); color: var(--blanco); }
.btn--azul:hover { background: var(--azul-claro); }
.btn--chocolate { background: var(--chocolate); color: var(--blanco); }
.btn--chocolate:hover { background: #55351d; }
.btn--borde { border-color: var(--chocolate); color: var(--chocolate); background: transparent; }
.btn--borde:hover { background: var(--crema); }
.btn svg { width: 18px; height: 18px; }

/* Barra */
.barra { position: sticky; top: 0; z-index: 50; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.barra__interior { max-width: var(--medida); margin: 0 auto; padding: 0.6rem var(--espacio); display: flex; align-items: center; gap: 1rem; }
.barra__marca { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--azul); min-width: 0; }
.barra__marca img { width: 46px; height: 46px; }
.barra__nombre { font-family: var(--fuente-display), Georgia, serif; font-weight: 600; font-size: 1rem; line-height: 1.1; }
.barra__enlaces { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; }
.barra__enlaces a { padding: 0.5rem 0.55rem; font-size: 0.9rem; font-weight: 600; text-decoration: none; color: var(--tinta); border-radius: var(--radio); }
.barra__enlaces a:hover { color: var(--azul); background: var(--crema); }
.barra__menu { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: auto; background: transparent; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--azul); cursor: pointer; }
.barra__cta { padding-inline: 0.9rem; }
@media (min-width: 0px) {
  .barra__enlaces { display: none; }
  .barra__menu { display: inline-flex; }
  .barra__interior { position: relative; }
  .barra__enlaces.abierto { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--fondo); border-bottom: 1px solid var(--linea); box-shadow: 0 1px 2px rgba(36,29,24,0.08), 0 12px 28px -18px rgba(36,29,24,0.45); padding: 0.25rem var(--espacio) 0.75rem; }
  .barra__enlaces.abierto a { min-height: 48px; display: flex; align-items: center; font-size: 1rem; border-bottom: 1px solid var(--linea); border-radius: 0; }
}
@media (max-width: 520px) { .barra__intl { display: none; } .barra__cta span { display: none; } .barra__cta { padding: 0; width: 44px; } }

/* Portada */
.portada { position: relative; overflow: hidden; border-bottom: 1px solid var(--linea); }
.portada__fondo { position: absolute; inset: 0; }
.portada__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.portada__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251, 249, 245, 0.86) 0%, rgba(251, 249, 245, 0.55) 45%, rgba(251, 249, 245, 0.62) 72%, rgba(251, 249, 245, 0.95) 94%, var(--fondo) 100%); }
.portada__cuerpo { position: relative; max-width: var(--medida); margin: 0 auto; padding: clamp(2.25rem, 4.5vw, 3.75rem) var(--espacio) clamp(1.75rem, 3vw, 2.5rem); }
.portada__lugar { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chocolate); margin-bottom: 0.75rem; }
.portada__frase { margin: 0 0 1.75rem; max-width: 46ch; border: 0; padding: 0; }
.portada__frase p { font-family: var(--fuente-display), Georgia, serif; font-size: clamp(1.1rem, 0.9vw + 0.9rem, 1.35rem); line-height: 1.5; color: var(--tinta); margin-bottom: 0.4rem; }
.portada__frase cite { font-style: normal; font-size: 0.9rem; font-weight: 600; color: var(--chocolate); }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.portada__proxima { margin: 1.5rem 0 0; font-weight: 600; font-size: 0.95rem; color: var(--azul); border-top: 1px solid var(--linea); padding-top: 1rem; max-width: 42ch; }

/* Secciones */
main > section { max-width: var(--medida); margin: 0 auto; padding: clamp(2.25rem, 4vw, 3.5rem) var(--espacio); }
.seccion__titulo { max-width: 52ch; margin-bottom: 1.75rem; }
.seccion__titulo h2::before { content: ""; display: block; width: 44px; height: 2px; background: var(--chocolate); margin-bottom: 0.9rem; }
.seccion__titulo p { color: var(--tinta-suave); margin: 0; }

/* Lo que encuentras */
.ofrece { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.ofrece__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ofrece__lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .ofrece__lista { grid-template-columns: repeat(4, 1fr); } }
.ofrece__lista li { border-top: 1px solid var(--linea); padding-top: 1rem; }
.ofrece__lista svg { width: 22px; height: 22px; color: var(--chocolate); margin-bottom: 0.5rem; }
.ofrece__lista p { margin: 0; font-size: 0.95rem; color: var(--tinta-suave); }

/* Quiénes somos */
.nosotros__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .nosotros__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3rem; } }
.nosotros__retrato { margin: 0; background: var(--crema); padding: 0.75rem; border-radius: var(--radio-lg); }
.nosotros__retrato img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: var(--radio); display: block; }
.nosotros__retrato figcaption { font-size: 0.875rem; color: var(--tinta-suave); padding: 0.75rem 0.25rem 0.25rem; }
.nosotros__texto p { max-width: 62ch; }
.nosotros__hitos { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.nosotros__hitos li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: baseline; border-top: 1px solid var(--linea); padding-top: 0.6rem; font-size: 0.95rem; }
.nosotros__hitos span { font-family: var(--fuente-display), Georgia, serif; font-weight: 700; color: var(--chocolate); font-variant-numeric: tabular-nums; }

/* Horarios */
.horarios__lista { list-style: none; margin: 0; padding: 0; }
.horarios__fila { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.15rem 1.25rem; padding: 1rem 1rem 1rem 0; border-top: 1px solid var(--linea); align-items: baseline; }
@media (min-width: 760px) { .horarios__fila { grid-template-columns: 7.5rem 9rem 1fr auto; align-items: center; padding-inline: 1rem; } }
.horarios__hora { font-family: var(--fuente-display), Georgia, serif; font-weight: 700; font-size: 1.15rem; color: var(--azul); font-variant-numeric: tabular-nums; }
.horarios__dia { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--chocolate); }
.horarios__que { grid-column: 1 / -1; }
@media (min-width: 760px) { .horarios__que { grid-column: auto; } }
.horarios__que strong { display: block; font-weight: 600; }
.horarios__nota { font-size: 0.9rem; color: var(--tinta-suave); }
.horarios__enlace { grid-column: 1 / -1; justify-self: start; font-weight: 600; font-size: 0.925rem; text-decoration: underline; text-underline-offset: 0.25em; }
@media (min-width: 760px) { .horarios__enlace { grid-column: auto; justify-self: end; } }
.horarios__fila--virtual { background: transparent; }
.horarios__fila--principal { background: var(--crema-hondo); border-radius: var(--radio); }
.horarios__fila.es-hoy .horarios__dia::after { content: "hoy"; display: inline-block; margin-left: 0.5rem; padding: 0 0.45rem; border: 1px solid var(--chocolate); border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.04em; }

/* Prédicas */
.predicas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.predicas__lista li { border-top: 1px solid var(--linea); }
.predicas__lista a { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.9rem; align-items: center; padding: 0.95rem 0.25rem; text-decoration: none; color: inherit; min-height: 44px; }
.predicas__lista a:hover .predicas__titulo { text-decoration: underline; text-underline-offset: 0.25em; }
.predicas__lista svg { width: 22px; height: 22px; color: var(--chocolate); grid-row: span 2; }
.predicas__titulo { font-family: var(--fuente-display), Georgia, serif; font-weight: 600; color: var(--azul); }
.predicas__quien { font-size: 0.9rem; color: var(--tinta-suave); }
.predicas__pie { margin: 1.25rem 0 0; }

/* Eventos */
.eventos__proximo { background: var(--crema); border-radius: var(--radio-lg); padding: clamp(1.25rem, 2vw, 2rem); max-width: 60ch; }
.eventos__etiqueta { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chocolate); margin-bottom: 0.4rem; }
.eventos__fecha { font-family: var(--fuente-display), Georgia, serif; font-size: 1.3rem; font-weight: 700; color: var(--azul); margin-bottom: 0.75rem; }
.eventos__collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 1.5rem; }
@media (min-width: 560px) { .eventos__collage { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .eventos__collage { grid-template-columns: repeat(6, 1fr); } .eventos__collage figure:nth-child(2), .eventos__collage figure:nth-child(4) { grid-column: span 2; } }
.eventos__collage figure { margin: 0; }
.eventos__collage img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radio); display: block; }
@media (min-width: 760px) { .eventos__collage figure:nth-child(2) img, .eventos__collage figure:nth-child(4) img { aspect-ratio: 16 / 10; } }
.eventos__nota { margin: 0.9rem 0 0; font-size: 0.875rem; color: var(--tinta-suave); }

/* Soy nuevo */
.visitanos { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .visitanos { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.visitanos__aviso { font-size: 0.9rem; color: var(--tinta-suave); max-width: 46ch; }
.formulario { display: grid; gap: 0.9rem; background: var(--crema); padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--radio-lg); }
.formulario > label, .formulario__par label { display: grid; gap: 0.3rem; font-size: 0.9rem; font-weight: 600; color: var(--tinta); }
.formulario input[type="text"], .formulario input[type="tel"], .formulario textarea { font-family: inherit; font-size: 1rem; padding: 0.6rem 0.7rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); color: var(--tinta); min-height: 44px; }
.formulario textarea { resize: vertical; }
.formulario__par { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .formulario__par { grid-template-columns: 1fr 1fr; } }
.formulario__grupo { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.formulario__grupo legend { font-size: 0.9rem; font-weight: 600; padding: 0; margin-bottom: 0.4rem; }
.formulario__opcion { display: flex; align-items: center; gap: 0.4rem; min-height: 44px; }
.formulario__resultado { margin: 0; font-size: 0.9rem; color: var(--chocolate); min-height: 1.2em; }
.formulario__resultado:empty { min-height: 0; }

/* Ofrendas */
.ofrendas__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .ofrendas__grid { grid-template-columns: 1.15fr 0.85fr; gap: 3rem; } }
.ofrendas__grid p { max-width: 58ch; }
.ofrendas__pendiente { font-size: 0.95rem; color: var(--tinta-suave); }
.ofrendas__testimonio { background: var(--crema); border-radius: var(--radio-lg); padding: clamp(1.25rem, 2vw, 1.75rem); }
.ofrendas__testimonio p { font-size: 0.95rem; }

/* Contacto */
.contacto__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .contacto__grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.contacto__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.contacto__lista li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; padding: 1rem 0; border-top: 1px solid var(--linea); align-items: start; min-width: 0; }
.contacto__lista svg { width: 20px; height: 20px; color: var(--chocolate); margin-top: 0.25rem; }
.contacto__lista strong { display: block; font-size: 0.95rem; }
.contacto__lista a { display: inline-block; font-weight: 600; overflow-wrap: anywhere; }
.contacto__lista span { display: block; font-size: 0.875rem; color: var(--tinta-suave); }
.contacto__lista address { font-style: normal; font-size: 0.95rem; color: var(--tinta-suave); margin-bottom: 0.3rem; }
.contacto__mapa { border-radius: var(--radio-lg); overflow: hidden; border: 1px solid var(--linea); background: var(--crema); }
.contacto__mapa iframe { display: block; width: 100%; height: 380px; border: 0; }

/* Pie */
.pie { background: var(--crema); color: var(--tinta); margin-top: clamp(2rem, 4vw, 3rem); }
.pie a { color: var(--azul); text-decoration: none; }
.pie a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.pie__interior { max-width: var(--medida); margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) var(--espacio); display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pie__interior { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; } }
.pie__marca img { width: 96px; height: 96px; }
.pie__nombre { font-family: var(--fuente-display), Georgia, serif; font-weight: 600; font-size: 1.05rem; margin: 0.75rem 0 0.4rem; }
.pie__frase { font-size: 0.925rem; color: var(--tinta-suave); max-width: 34ch; margin: 0; }
.pie__columna { display: grid; gap: 0.5rem; align-content: start; }
.pie__columna h2 { font-size: 0.95rem; color: var(--azul); margin: 0 0 0.35rem; letter-spacing: 0.04em; }
.pie__columna a { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; min-height: 32px; }
.pie__columna svg { width: 18px; height: 18px; }
.pie__legal { border-top: 1px solid var(--linea); }
.pie__legal p { max-width: var(--medida); margin: 0 auto; padding: 0.4rem var(--espacio); font-size: 0.85rem; color: var(--tinta-suave); }
.pie__legal p:first-child { padding-top: 1.25rem; }
.pie__legal p:last-child { padding-bottom: 1.5rem; }

/* Que nada se desborde en 375 px */
.barra__interior > *, .portada__cuerpo > *, .ofrece__lista li, .horarios__fila, .predicas__lista a, .eventos__proximo,
.formulario, .contacto__lista li, .pie__interior > * { min-width: 0; }
h1, h2, h3, p, a, li, strong, address, cite { overflow-wrap: break-word; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media (max-width: 520px) {
  .barra__interior { padding-block: 0.4rem; gap: 0.5rem; }
  .barra__marca img { width: 34px; height: 34px; }
  .barra__nombre { font-size: 0.8rem; line-height: 1.1; }
}

.horarios__pie, .predicas__pie { margin: 1.1rem 0 0; font-size: 0.925rem; color: var(--tinta-suave); }
.horarios__pie strong { color: var(--tinta); }

.redes { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.redes__boton { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--azul); background: var(--azul); color: var(--blanco); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 4px rgba(36, 29, 24, 0.12), 0 14px 30px -18px rgba(36, 29, 24, 0.6); }
.redes__boton svg { width: 24px; height: 24px; }
.redes__boton[aria-expanded='true'] { background: var(--chocolate); border-color: var(--chocolate); }
.redes__panel[hidden] { display: none; }
.redes__panel { display: grid; gap: 0.15rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-lg); padding: 0.5rem; min-width: 15rem; box-shadow: 0 2px 4px rgba(36, 29, 24, 0.1), 0 18px 36px -20px rgba(36, 29, 24, 0.55); }
.redes__panel a { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.65rem; min-height: 44px; font-size: 0.95rem; font-weight: 600; color: var(--tinta); text-decoration: none; border-radius: var(--radio); }
.redes__panel a:hover { background: var(--crema); color: var(--azul); }
.redes__panel svg { width: 18px; height: 18px; color: var(--chocolate); }

/* Sello de la iglesia detrás del nombre (lo pidió la Pastora: «que se vea el logo de fondo atrás») */
/* El sello ya viene impreso en la foto de la congregación, como pidió la Pastora:
   se encuadra para que caiga al lado del texto, no encima. */
.portada__fondo img { object-position: 62% 32%; }
@media (max-width: 720px) { .portada__fondo img { object-position: center 38%; } }

/* La cita de la Pastora, tratada como cita impresa */
.portada__frase { padding-left: 0.6em; }
.portada__frase p { text-indent: -0.55em; }
.portada__frase cite { font-variant-caps: all-small-caps; letter-spacing: 0.08em; font-size: 1rem; }

/* Prédicas con la carátula real de cada vídeo */
.predicas__lista { gap: 1.25rem 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 400px) { .predicas__lista { gap: 1rem 0.75rem; } .predicas__titulo { font-size: 0.95rem; } .predicas__quien { font-size: 0.8rem; } }
@media (min-width: 620px) { .predicas__lista { grid-template-columns: 1fr 1fr; } }
.predicas__lista li { border-top: 0; }
.predicas__lista a { grid-template-columns: 1fr; gap: 0.2rem; padding: 0; align-items: start; }
.predicas__miniatura { margin: 0 0 0.6rem; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--crema); }
.predicas__miniatura img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.predicas__lista a:hover .predicas__miniatura { border-color: var(--chocolate); }

/* Nota del mapa */
.contacto__mapa-nota { margin: 0; padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--tinta-suave); border-bottom: 1px solid var(--linea); background: var(--crema); }

/* Historia plegable, para no dejar once pantallas en el teléfono */
.nosotros__mas summary { cursor: pointer; font-weight: 600; color: var(--azul); padding: 0.5rem 0; min-height: 44px; display: flex; align-items: center; }
.nosotros__mas[open] summary { margin-bottom: 0.5rem; }

/* Un solo acceso flotante: en móvil manda el botón de abajo */
@media (max-width: 520px) { .barra__cta { display: none; } }

/* Pie: dos columnas en el teléfono, como su página anterior */
@media (max-width: 560px) { .pie__interior { grid-template-columns: 1fr 1fr; } .pie__marca { grid-column: 1 / -1; } }

/* Las fotos que hay son de 640-1080 px: se sirven a su medida y no se estiran en pantallas grandes */
.portada { max-width: none; background: var(--crema); }
.portada__fondo { max-width: 1440px; margin-inline: auto; }
.portada__fondo img { image-rendering: auto; }
@media (min-width: 1200px) { .portada__fondo img { object-position: 58% 30%; } }
@media (min-width: 721px) and (max-width: 1199px) { .portada__fondo img { object-position: center 45%; } }
.eventos__collage img { background: var(--crema); }

.portada__fondo picture, .portada__fondo picture img { display: block; width: 100%; height: 100%; }
.portada__fondo picture img { object-fit: cover; }

/* El sello, ahora limpio y con transparencia, como marca de agua donde la foto no lo trae impreso */
.portada__sello { position: absolute; right: -8%; bottom: 4%; width: min(62vw, 340px); height: auto; opacity: 0.16; z-index: 1; pointer-events: none; }
.portada__sello { display: block; }
@media (max-width: 720px) { .portada__sello { right: -22%; bottom: -6%; width: 56vw; opacity: 0.14; } }
.portada__cuerpo { position: relative; z-index: 2; }

/* Marcas de redes reales (Simple Icons, CC0) en vez de iconos genéricos */
.marca { flex-shrink: 0; }
.marca--grande { width: 24px; height: 24px; }
.pie__columna a .marca, .redes__panel a .marca { color: var(--chocolate); }
.barra__cta .marca, .redes__boton .marca { color: currentColor; }

/* Lo que encuentras aquí: la foto manda, el icono desaparece */
.ofrece__lista li { border-top: 0; padding-top: 0; }
.ofrece__foto { margin: 0 0 0.9rem; border-radius: var(--radio); overflow: hidden; background: var(--crema); aspect-ratio: 4 / 3; }
.ofrece__foto img { width: 100%; height: 100%; object-fit: cover; }
.ofrece__lista h3 { margin-bottom: 0.25rem; }

/* Los pocos iconos que quedan: dentro de un círculo crema con filete dorado */
.contacto__lista svg:not(.marca) { width: 18px; height: 18px; box-sizing: content-box; padding: 0.55rem; border: 1px solid var(--linea); border-radius: 50%; background: var(--crema); margin-top: 0; }

/* Visor de fotos */
.visor { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1000px); max-height: 92vh; overflow: visible; }
.visor::backdrop { background: rgba(36, 29, 24, 0.86); }
.visor img { width: 100%; height: auto; max-height: 86vh; object-fit: contain; border-radius: var(--radio); background: var(--fondo); }
.visor__cerrar { position: absolute; top: -2.75rem; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(253, 252, 250, 0.4); background: transparent; color: var(--blanco); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.visor__cerrar:hover { background: rgba(253, 252, 250, 0.12); }
.eventos__collage[data-galeria] figure { cursor: zoom-in; }

/* La portada se lee siempre: velo lateral bajo el texto, la foto respira a la derecha */
.portada__fondo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(251, 249, 245, 0.95) 0%, rgba(251, 249, 245, 0.86) 34%, rgba(251, 249, 245, 0.45) 62%, rgba(251, 249, 245, 0.28) 100%); }
@media (max-width: 720px) { .portada__fondo::before { background: linear-gradient(180deg, rgba(251, 249, 245, 0.82) 0%, rgba(251, 249, 245, 0.72) 55%, rgba(251, 249, 245, 0.9) 100%); } }

/* Cuenta para ofrendas */
.cuenta { background: var(--crema); border: 1px solid var(--linea); border-radius: var(--radio-lg); padding: clamp(1.1rem, 2vw, 1.5rem); max-width: 30rem; }
.cuenta__banco { margin: 0 0 0.15rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chocolate); }
.cuenta__numero { margin: 0 0 1rem; font-family: var(--fuente-display), Georgia, serif; font-weight: 700; font-size: clamp(1.6rem, 2.2vw + 1rem, 2.1rem); letter-spacing: 0.02em; color: var(--azul); font-variant-numeric: tabular-nums; }
.cuenta__numero:has(+ .cuenta__titular) { margin-bottom: 0.2rem; }
.cuenta__titular { margin: 0 0 1rem; color: var(--tinta-suave); }
.cuenta__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cuenta__aviso { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--chocolate); min-height: 1.2em; }
.cuenta__aviso:empty { margin: 0; min-height: 0; }

/* Encuadre de cada foto: que no corte cabezas ni caras */
.ofrece__foto img[data-foco="predicacion"] { object-position: 50% 12%; }
.ofrece__foto img[data-foco="oracion"] { object-position: 50% 22%; }
.ofrece__foto img[data-foco="evangelismo"] { object-position: 50% 40%; }

/* Fila principal del horario: el fondo crema necesita aire a la izquierda en todos los anchos */
.horarios__fila--principal { padding-left: 1rem; margin-block: 0.25rem; }

/* Galería en dos filas llenas: afiche · escenario (ancha) · oración / equipo (ancha) · niños · afiche */
@media (min-width: 760px) {
  .eventos__collage { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 21vw, 290px); }
  .eventos__collage figure { height: 100%; }
  .eventos__collage figure:nth-child(2), .eventos__collage figure:nth-child(4) { grid-column: span 2; }
  .eventos__collage img, .eventos__collage figure:nth-child(2) img, .eventos__collage figure:nth-child(4) img { aspect-ratio: auto; height: 100%; }
  .eventos__collage figure:nth-child(1) img, .eventos__collage figure:nth-child(6) img { object-position: 50% 20%; }
}

/* Formulario: dos columnas que nunca se salen de la tarjeta */
.formulario__par { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .formulario__par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.formulario input[type="text"], .formulario input[type="tel"], .formulario textarea { width: 100%; min-width: 0; }

/* Contacto: el icono de WhatsApp en su círculo, igual que los demás */
.contacto__lista li > svg { width: 18px; height: 18px; box-sizing: content-box; padding: 0.55rem; border: 1px solid var(--linea); border-radius: 50%; background: var(--crema); margin-top: 0; color: var(--chocolate); }

/* Botones Sí/No: del tamaño del texto y en el azul de la marca */
.formulario__opcion input[type="radio"] { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--azul); flex: none; }
.formulario__opcion { font-weight: 400; }

/* Portada con la foto que mandó la Pastora: el logo de la foto queda al lado del texto, no debajo */
.portada__fondo img { object-position: 50% 50%; }
@media (max-width: 720px) { .portada__fondo img { object-position: 72% 50%; } }
@media (min-width: 1200px) { .portada__fondo img { object-position: 60% 50%; } }
.horarios__oficina { margin: 1.1rem 0 0; font-size: 0.95rem; color: var(--tinta-suave); }
.horarios__oficina strong { color: var(--tinta); }

/* Barra: cada enlace y el nombre de la iglesia en una sola línea */
.barra__enlaces a, .barra__marca span, .barra__marca strong { white-space: nowrap; }

/* El enlace «Nuestros inicios» no puede quedar debajo de la barra pegajosa */
#inicios { scroll-margin-top: 5.5rem; }

.ofrece__foto img[data-foco="musica"] { object-position: 50% 6%; }
.ofrece__foto img[data-foco="equipo"] { object-position: 50% 45%; }
#mas { scroll-margin-top: 5rem; }

/* El panel del menú, en pantallas grandes, no ocupa todo el ancho: cae bajo el botón */
@media (min-width: 1081px) {
  .barra__enlaces.abierto { left: auto; right: var(--espacio); width: min(20rem, 60vw); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
  .barra__enlaces.abierto a { padding-inline: 1rem; }
  .barra__enlaces.abierto a:last-child { border-bottom: 0; }
  .barra__menu { margin-left: auto; }
}

/* Atención de oficina: es otra cosa que los servicios, y se ve que es otra cosa */
.oficina { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--crema); max-width: 34rem; }
.oficina__que { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chocolate); }
.oficina__cuando { margin: 0.2rem 0 0; font-family: var(--fuente-display), Georgia, serif; font-weight: 700; font-size: 1.1rem; color: var(--azul); }
.oficina__nota { margin: 0.35rem 0 0; font-size: 0.925rem; color: var(--tinta-suave); }
