/* ==========================================================================
   Componentes y páginas del sitio público · Carbón y oro (tokens en app.css)
   ========================================================================== */

/* Mosaico de ícono: el mismo en tarjetas, contacto y estados vacíos */
.icon-tile { display: inline-grid; place-items: center; flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 14px; color: var(--gold-text); background: var(--gold-tint); }
.icon-tile .icon { width: 1.4rem; height: 1.4rem; }
.icon-tile-dark { color: var(--gold-light); background: var(--ink); }

/* Inicio: portada --------------------------------------------------------- */
.home-hero { position: relative; overflow: hidden; padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 8vw, 6rem); background: var(--bg); }
.home-hero::before { content: ""; position: absolute; inset: auto -10% -45% auto; width: 38rem; height: 38rem; border-radius: 50%; background: radial-gradient(circle, rgb(184 145 58 / 10%), transparent 65%); pointer-events: none; }
.home-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: center; gap: clamp(2.5rem, 6vw, 5rem); }
.home-hero h1 { max-width: 15ch; }
.home-hero h1 em { color: var(--gold-text); font-style: italic; }
.welcome-card { position: relative; padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--soft); text-align: center; }
.welcome-card::before { content: ""; position: absolute; inset: .6rem; border: 1px solid rgb(184 145 58 / 28%); border-radius: calc(var(--radius-lg) - .5rem); pointer-events: none; }
.hero-logo { display: block; width: min(100%, 19rem); height: auto; margin: .5rem auto 1.5rem; border-radius: var(--radius); mix-blend-mode: multiply; }
.welcome-card .eyebrow { justify-content: center; }
.welcome-card .eyebrow::before { display: none; }
.welcome-card h2 { margin-bottom: .75rem; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.welcome-card > p:not(.eyebrow) { margin: 0 auto; max-width: 22rem; color: var(--muted); font-size: .98rem; }
.welcome-location { position: relative; display: flex; align-items: center; justify-content: center; gap: .85rem; margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; text-align: left; text-decoration: none; }
.welcome-location .icon { width: 1.3rem; height: 1.3rem; color: var(--gold-text); }
.welcome-location strong { color: var(--ink); }
.welcome-location:hover strong { color: var(--gold-text); }

/* Inicio: accesos rápidos */
.quick-strip { border-block: 1px solid var(--line); background: var(--bg); }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quick-item { display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 1.6rem 1.5rem; color: inherit; text-decoration: none; transition: background .2s var(--ease); }
.quick-item + .quick-item { border-left: 1px solid var(--line); }
.quick-item:hover { background: var(--soft); }
.quick-item span:last-child { display: grid; gap: .15rem; min-width: 0; }
.quick-item small { color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.quick-item strong { overflow-wrap: anywhere; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.35; }

/* Misión ----------------------------------------------------------------- */
.mission-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.mission-layout h2 { max-width: 14ch; margin-bottom: 1.5rem; }
.mission-layout p { margin-top: 0; color: var(--muted); font-size: 1.1rem; }
.mission-quote { position: relative; margin: 2rem 0 0; padding: 1.75rem 0 0; border-top: 1px solid var(--line-strong); color: var(--ink); font: italic 400 clamp(1.3rem, 2.2vw, 1.6rem)/1.45 var(--font-display); }
.mission-quote .icon { display: block; width: 1.75rem; height: 1.75rem; margin-bottom: .75rem; color: var(--gold); }

/* Tarjetas de contenido ---------------------------------------------------- */
.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.content-card { position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.content-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.content-card-image { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft-2); }
.content-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.content-card:hover .content-card-image img { transform: scale(1.04); }
.content-card-body { flex: 1; display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.6rem; }
.content-card-body h3 { margin-bottom: .6rem; font: 500 1.4rem/1.25 var(--font-display); }
.content-card h3 a { color: var(--ink); text-decoration: none; }
.content-card h3 a::after { content: ""; position: absolute; inset: 0; }
.content-card .text-link, .content-card-image { position: relative; z-index: 1; }
.content-card-body > p:not(.card-kicker) { margin: 0 0 1rem; color: var(--muted); font-size: .97rem; }
.content-card-body > .text-link { margin-top: auto; padding-top: .5rem; align-self: flex-start; }
.card-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .85rem; color: var(--gold-text); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.card-kicker .icon { width: .95rem; height: .95rem; }
.card-location { display: flex; align-items: flex-start; gap: .5rem; color: var(--muted); font-size: .92rem; }
.card-location .icon { width: 1rem; height: 1rem; margin-top: .22rem; color: var(--gold-text); }

/* Fecha sobre la imagen de un evento */
.date-badge { position: absolute; top: 1rem; left: 1rem; display: grid; justify-items: center; min-width: 3.6rem; padding: .45rem .6rem .5rem; border-radius: 12px; color: var(--ink); background: rgb(255 255 255 / 94%); box-shadow: 0 4px 14px rgb(0 0 0 / 12%); line-height: 1; }
.date-badge b { font: 600 1.5rem/1 var(--font-display); }
.date-badge small { margin-top: .2rem; color: var(--gold-text); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.event-card-banner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 16 / 10; padding: 1.5rem; overflow: hidden; color: var(--on-dark); background: var(--ink); text-decoration: none; }
.event-card-banner::before { content: ""; position: absolute; inset: auto -3rem -5rem auto; width: 14rem; height: 14rem; border: 1px solid rgb(216 182 112 / 30%); border-radius: 50%; }
.event-card-banner > span:first-child { color: var(--gold-light); font: 500 4rem/.9 var(--font-display); }
.event-card-banner > span:nth-child(2) { margin-top: .5rem; color: var(--on-dark-muted); font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.event-card-banner > .icon { position: absolute; top: 1.4rem; right: 1.4rem; width: 1.6rem; height: 1.6rem; color: var(--gold-light); }

/* Ministerios -------------------------------------------------------------- */
.ministry-card { position: relative; scroll-margin-top: 8rem; min-width: 0; display: flex; flex-direction: column; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.ministry-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.ministry-card:target { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint); }
.ministry-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; }
.ministry-card .card-number { margin: 0; color: var(--line-strong); font: 500 1.6rem/1 var(--font-display); }
.ministry-card h2, .ministry-card h3 { margin-bottom: .65rem; font: 500 1.5rem/1.2 var(--font-display); }
.ministry-card p:not(.card-kicker) { margin: 0 0 1.25rem; color: var(--muted); }
.ministry-card .text-link { margin-top: auto; align-self: flex-start; }

/* Nosotros ----------------------------------------------------------------- */
.history-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.history-layout p { color: var(--muted); font-size: 1.08rem; }
.history-year { position: relative; display: grid; justify-items: center; gap: .6rem; padding: 3.5rem 2rem; overflow: hidden; border-radius: var(--radius-lg); color: var(--on-dark-muted); background: var(--ink); text-align: center; }
.history-year::before { content: ""; position: absolute; inset: .75rem; border: 1px solid rgb(216 182 112 / 25%); border-radius: calc(var(--radius-lg) - .6rem); }
.history-year strong { color: var(--gold-light); font: 500 clamp(4rem, 9vw, 6.5rem)/1 var(--font-display); }
.history-year span { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.purpose-card { display: flex; flex-direction: column; padding: 2.25rem 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.purpose-card .card-number { display: block; margin-bottom: 1.5rem; color: var(--gold); font: 500 1.6rem/1 var(--font-display); }
.purpose-card h2 { margin-bottom: .75rem; font-size: 1.8rem; }
.purpose-card p { margin: 0; color: var(--muted); }
.institutional-quote { max-width: 46rem; margin: 3.5rem auto 0; color: var(--ink); font: italic 400 clamp(1.4rem, 3vw, 2rem)/1.45 var(--font-display); text-align: center; }
.institutional-quote::before, .institutional-quote::after { content: ""; display: block; width: 3rem; height: 1px; margin: 0 auto 1.5rem; background: var(--gold); }
.institutional-quote::after { margin: 1.5rem auto 0; }
.values-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; border-top: 1px solid var(--line); }
.values-grid article { position: relative; padding: 1.5rem 0 1.5rem 2.25rem; border-bottom: 1px solid var(--line); }
.values-grid h3 { margin-bottom: .35rem; font: 500 1.3rem/1.3 var(--font-display); }
.values-grid p { margin: 0; color: var(--muted); font-size: .97rem; }
.value-dot { position: absolute; top: 2rem; left: 0; width: .55rem; height: .55rem; background: var(--gold); transform: rotate(45deg); }

/* Encabezado de páginas internas ------------------------------------------- */
.page-heading { position: relative; overflow: hidden; padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem); border-bottom: 1px solid var(--line); background: var(--soft); }
.page-heading::after { content: ""; position: absolute; top: -40%; right: -8%; width: 30rem; height: 30rem; border: 1px solid rgb(184 145 58 / 22%); border-radius: 50%; pointer-events: none; }
.page-heading .container { position: relative; z-index: 1; }
.page-heading h1 { max-width: 20ch; margin-bottom: 1.1rem; font-size: clamp(2.3rem, 5vw, 3.75rem); }
.page-intro { max-width: 42rem; margin: 0; color: var(--muted); font-size: 1.12rem; }

/* Filtros, vacíos, paginación --------------------------------------------- */
.section-tabs { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 2.5rem; padding: .3rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--soft); }
.section-tabs a { padding: .6rem 1.2rem; border-radius: var(--pill); color: var(--muted); font-size: .92rem; font-weight: 600; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
.section-tabs a:hover { color: var(--ink); }
.section-tabs a[aria-current="page"] { color: var(--bg); background: var(--ink); }
.public-empty { padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--soft); text-align: center; }
.public-empty-icon { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; margin: 0 auto 1.25rem; border-radius: 16px; color: var(--gold-text); background: var(--gold-tint); }
.public-empty-icon .icon { width: 1.6rem; height: 1.6rem; }
.public-empty h3 { margin-bottom: .5rem; font: 500 1.5rem/1.25 var(--font-display); }
.public-empty p { max-width: 34rem; margin: 0 auto; color: var(--muted); }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; margin-top: 3rem; color: var(--muted); font-size: .92rem; }
.pagination a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .5rem 1.15rem; border: 1px solid var(--line-strong); border-radius: var(--pill); color: var(--ink); font-weight: 600; text-decoration: none; }
.pagination a:hover { border-color: var(--ink); }

/* Detalle de evento y noticia ---------------------------------------------- */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 4rem); }
.detail-cover { display: block; width: 100%; height: auto; margin-bottom: 2.25rem; border-radius: var(--radius); }
.prose { overflow-wrap: anywhere; color: var(--text); font-size: 1.1rem; line-height: 1.75; }
.prose h2 { margin-top: 0; font-size: 1.9rem; }
.prose p { margin: 0 0 1.4rem; }
.prose > .text-link { margin-top: 1rem; }
.detail-sidebar { position: sticky; top: 7rem; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.detail-sidebar h2 { margin-bottom: 1.25rem; font-size: 1.6rem; }
.detail-sidebar dl { margin: 0; }
.detail-sidebar dt { display: flex; align-items: center; gap: .45rem; margin-top: 1.1rem; color: var(--gold-text); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.detail-sidebar dt .icon { width: .95rem; height: .95rem; }
.detail-sidebar dd { margin: .3rem 0 0; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.detail-sidebar .button { width: 100%; margin-top: 1.75rem; }
.article-width { max-width: 46rem; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
.article-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.article-meta .icon { width: 1rem; height: 1rem; color: var(--gold-text); }

/* Galería ------------------------------------------------------------------ */
.album-cover { aspect-ratio: 4 / 3; }
.album-placeholder { height: 100%; display: grid; place-items: center; color: var(--line-strong); }
.album-placeholder .icon { width: 3rem; height: 3rem; }
.photo-count { position: absolute; right: .9rem; bottom: .9rem; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: var(--pill); color: var(--bg); background: rgb(17 17 17 / 78%); backdrop-filter: blur(4px); font-size: .78rem; font-weight: 600; }
.photo-count .icon { width: .9rem; height: .9rem; }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.photo-grid figure { min-width: 0; margin: 0; }
.photo-link { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--soft-2); }
.photo-link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.photo-link:hover img { transform: scale(1.04); }
.photo-zoom { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1.5rem 1rem .9rem; color: var(--bg); background: linear-gradient(transparent, rgb(0 0 0 / 70%)); font-size: .82rem; font-weight: 600; opacity: 0; transition: opacity .25s var(--ease); }
.photo-link:hover .photo-zoom, .photo-link:focus-visible .photo-zoom { opacity: 1; }
.photo-zoom .icon { width: 1rem; height: 1rem; }
.photo-grid figcaption { margin-top: .65rem; color: var(--muted); font-size: .88rem; }
.photo-viewer { max-width: min(94vw, 72rem); max-height: 94vh; padding: 3.25rem 1rem 1rem; border: 0; border-radius: var(--radius); color: var(--on-dark); background: var(--ink); }
.photo-viewer::backdrop { background: rgb(0 0 0 / 88%); }
.photo-viewer figure { margin: 0; text-align: center; }
.photo-viewer img { display: block; max-width: 100%; max-height: 74vh; margin: auto; border-radius: var(--radius-sm); object-fit: contain; }
.photo-viewer figcaption { margin-top: 1rem; color: var(--on-dark-muted); }
.photo-viewer-close { position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line-dark); border-radius: 50%; color: var(--on-dark); background: transparent; cursor: pointer; }
.photo-viewer-close:hover { border-color: var(--gold); color: var(--gold-light); }
.photo-viewer-close .icon { width: 1.2rem; height: 1.2rem; }

/* Franja de invitación ----------------------------------------------------- */
.invitation-band { position: relative; overflow: hidden; padding: clamp(3.5rem, 7vw, 5rem) 0; color: var(--on-dark-muted); background: var(--ink); }
.invitation-band::before { content: ""; position: absolute; left: -6rem; bottom: -12rem; width: 26rem; height: 26rem; border: 1px solid rgb(216 182 112 / 22%); border-radius: 50%; }
.invitation-band .eyebrow { color: var(--gold-light); }
.invitation-layout { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.invitation-layout h2 { margin-bottom: .75rem; color: var(--on-dark); font-size: clamp(2rem, 3.6vw, 2.9rem); }
.invitation-layout p:last-child { margin: 0; font-size: 1.08rem; }
.invitation-layout .button { flex: 0 0 auto; }
.invitation-band :focus-visible { outline-color: var(--gold-light); }

/* Responsivo --------------------------------------------------------------- */
@media (max-width: 64rem) {
  .home-hero-grid, .mission-layout, .history-layout, .detail-layout { grid-template-columns: 1fr; }
  .welcome-card { max-width: 34rem; width: 100%; }
  .content-grid, .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invitation-layout { flex-direction: column; align-items: flex-start; }
  .detail-sidebar { position: static; }
}
@media (max-width: 48rem) {
  .quick-grid { grid-template-columns: 1fr; }
  .quick-item + .quick-item { border-left: 0; border-top: 1px solid var(--line); }
  .quick-item { padding: 1.15rem 0; }
  .quick-item:hover { background: transparent; }
}
@media (max-width: 40rem) {
  .content-grid, .values-grid, .photo-grid { grid-template-columns: 1fr; }
  .values-grid { gap: 0; }
  .invitation-layout .button { width: 100%; }
  .section-tabs { display: flex; }
  .section-tabs a { flex: 1; text-align: center; }
  .photo-zoom { opacity: 1; }
}
@media (hover: none) { .photo-zoom { opacity: 1; } }

/* Horarios de culto ------------------------------------------------------- */
.schedule-section { border-bottom: 1px solid var(--line); }
.schedule-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.schedule-intro > p:not(.eyebrow) { margin: 0 0 1.75rem; color: var(--muted); }
.next-service { display: grid; gap: .2rem; margin-bottom: 1.75rem; padding: 1.25rem 1.4rem; border-radius: var(--radius); color: var(--on-dark-muted); background: var(--ink); }
.next-service strong { color: var(--on-dark); font: 500 1.45rem/1.25 var(--font-display); }
.next-service-label { display: inline-flex; align-items: center; gap: .5rem; color: var(--gold-light); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #5fd38a; box-shadow: 0 0 0 0 rgb(95 211 138 / 60%); animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse { to { box-shadow: 0 0 0 .6rem rgb(95 211 138 / 0%); } }
.schedule-list, .schedule-list ul { margin: 0; padding: 0; list-style: none; }
.schedule-list { border-top: 1px solid var(--line-strong); }
.schedule-day { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.schedule-day-name { color: var(--ink); font: 500 1.3rem/1.3 var(--font-display); }
.schedule-day ul { display: grid; gap: .75rem; }
.schedule-item { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; padding: .35rem .6rem; margin: -.35rem -.6rem; border-radius: var(--radius-sm); }
.schedule-item.is-next { background: var(--gold-tint); }
.schedule-time { display: inline-flex; align-items: center; gap: .45rem; color: var(--gold-text); font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.schedule-time .icon { width: 1rem; height: 1rem; }
.schedule-copy strong { display: block; color: var(--ink); font-weight: 600; }
.schedule-copy span { display: block; color: var(--muted); font-size: .9rem; }
@media (max-width: 64rem) { .schedule-layout { grid-template-columns: 1fr; } }
@media (max-width: 40rem) {
  .schedule-day { grid-template-columns: 1fr; gap: .5rem; }
  .schedule-item { grid-template-columns: 1fr; gap: .15rem; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Guardar y compartir un evento */
.event-save, .event-share { display: grid; gap: .75rem; margin-top: 1.75rem; }
.event-share { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.event-save .eyebrow, .event-share .eyebrow { margin: 0; }
.event-save .button { width: 100%; }
.event-share-links { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.event-share-links .button { padding-inline: 1rem; }
.detail-sidebar > .text-link:last-child { margin-top: 1.5rem; }