@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 650;
  font-display: swap;
  src: url(/assets/fonts/4983926d3a16544e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 650;
  font-display: swap;
  src: url(/assets/fonts/066710ce7ed235a3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 650;
  font-display: swap;
  src: url(/assets/fonts/a2930b27d13a228b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 650;
  font-display: swap;
  src: url(/assets/fonts/7234ed860a9cc830.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/34b9c504cab7a73e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/3100e775e8616cd2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/34b9c504cab7a73e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/3100e775e8616cd2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/34b9c504cab7a73e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/3100e775e8616cd2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
   Iglesia Bíblica Reflejo — diseño claro minimalista
   Tipografía protagonista: Fraunces (títulos) + Inter (cuerpo)
   ============================================================ */

:root {
  --ink: #191c22;
  --muted: #586579;
  --faint: #667085;
  --navy: #1e3a5f;
  --navy-deep: #142840;
  --gold: #b7791f;
  --gold-soft: #f5eeda;
  --bg: #ffffff;
  --bg-warm: #faf9f7;
  --hairline: #eaecf0;
  --radius: 1rem;
  --maxw: 1120px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  max-width: 100%;
  overflow-x: clip;
}
img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 550;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: var(--ink);
}
p { margin: 0 0 1em; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }
::selection { background: var(--navy); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* ---------- Movimiento: solo transform/opacity y siempre reducible ---------- */
html.js .reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.52s ease, transform 0.64s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}
html.js .reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { --reveal-delay: 0.06s; }
.reveal-delay-2 { --reveal-delay: 0.12s; }
.reveal-delay-3 { --reveal-delay: 0.18s; }

.ui-icon { width: 1.05em; height: 1.05em; flex: 0 0 auto; display: inline-block; overflow: visible; }
.btn .ui-icon { width: 1.1rem; height: 1.1rem; transition: transform 0.25s ease; }
.btn:hover .ui-icon-arrow { transform: translateX(3px); }

/* Fondo SVG ligero para los heroes principales. */
.hero-orbit {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(920px, 96vw); height: auto; left: 50%; top: 47%;
  transform: translate(-50%, -50%); opacity: 0.18;
}
.hero-orbit .orbit-a, .hero-orbit .orbit-b { transform-box: view-box; transform-origin: 400px 230px; }
.hero-orbit .orbit-a { animation: orbitSpin 28s linear infinite; }
.hero-orbit .orbit-b { animation: orbitSpinReverse 36s linear infinite; }
.hero-orbit .orbit-dot { transform-box: fill-box; transform-origin: center; animation: orbitPulse 3.8s ease-in-out infinite alternate; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitSpinReverse { to { transform: rotate(-360deg); } }
@keyframes orbitPulse { to { opacity: .32; transform: scale(1.35); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--hairline);
}
/* El blur vive en un pseudo-elemento: backdrop-filter directo en el header lo
   volvía containing block del menú móvil (position:fixed) y el panel colapsaba a 80px. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.65rem; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--ink); flex-shrink: 0; }
.brand img { height: 36px; width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(0.7rem, 1.6vw, 1.4rem); flex-shrink: 0; }
.nav-links a {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); padding: 0.4rem 0; position: relative; transition: color 0.2s ease;
  white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px;
  background: var(--gold); transition: right 0.25s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-cta {
  background: var(--navy); color: #fff !important; padding: 0.55rem 1.2rem !important;
  border-radius: 999px; letter-spacing: 0.09em;
  transition: background 0.2s ease, transform 0.15s ease !important;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--navy-deep); transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 6px 0; transition: 0.25s; }

@media (max-width: 1020px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 72px 0 0 0; background: #fff; flex-direction: column;
    align-items: flex-start; padding: 2.5rem 2rem; gap: 0.25rem;
    transform: translateX(100%); visibility: hidden; pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.3s;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav-links.open {
    transform: translateX(0); visibility: visible; pointer-events: auto;
    transition-delay: 0s;
  }
  .nav-links { box-shadow: 0 24px 40px -28px rgba(20,40,64,0.25) inset; }
  .nav-links a { width: 100%; padding: 1rem 0; border-bottom: 1px solid var(--hairline); font-size: 0.9rem; }
  .nav-links a:first-child {
    background: var(--gold-soft); color: var(--navy-deep);
    padding: 1rem 1.1rem; border-radius: 0.75rem; border-bottom: none;
    margin-bottom: 0.5rem; font-weight: 700;
  }
  .nav-links a:first-child::after { display: none; }
  .nav-cta { text-align: center; margin-top: 1rem; border-bottom: none !important; }
  body.menu-open { overflow: hidden; }
  .nav-toggle { min-width: 44px; min-height: 44px; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero { padding: 6.5rem 0 4rem; text-align: center; position: relative; overflow: hidden; isolation: isolate; }
.hero > .container, .hero > .hero-media { position: relative; z-index: 1; }
.hero .kicker {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.75rem; display: block;
}
.hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  font-weight: 480;
  max-width: 880px; margin: 0 auto 1.5rem;
}
.hero h1 em { font-style: italic; color: var(--navy); }
.hero .sub { font-size: 1.1rem; color: var(--muted); max-width: 560px; margin: 0 auto 2.25rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.85rem 1.9rem; border-radius: 999px; font-weight: 600; font-size: 0.92rem;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer; border: 1px solid transparent; font-family: var(--sans);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: -50% auto -50% -45%; width: 32%; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .5s cubic-bezier(.16,1,.3,1);
}
.btn:hover::before { left: 120%; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--ink); border-color: #d6dae1; }
.btn-outline:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.35); }
.btn-ghost:hover { background: rgba(255,255,255,0.24); }
.text-link {
  font-weight: 600; font-size: 0.92rem; color: var(--navy);
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.text-link:hover { border-bottom-color: var(--gold); }

/* Video frame under hero */
.hero-media { margin: 3.5rem auto 0; max-width: 980px; padding: 0 1.5rem; }
.hero-media .frame {
  border-radius: 1.4rem; overflow: hidden; position: relative;
  box-shadow: 0 40px 80px -40px rgba(20, 40, 64, 0.45);
}
.hero-media video { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; max-width: 680px; margin: 2.75rem auto 0; }
.stat { text-align: center; }
.stat .num { font-family: var(--serif); font-size: 2rem; font-weight: 550; color: var(--navy); line-height: 1.1; }
.stat .label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 0.3rem; }

/* ---------- Sections ---------- */
section { padding: 5.5rem 0; }
.section-warm { background: var(--bg-warm); }
.eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}
.section-head { max-width: 640px; margin: 0 auto 3.5rem; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 500; }
.section-head p { color: var(--muted); font-size: 1.04rem; margin-top: 0.75rem; }
.head-left { text-align: left; margin-left: 0; }

.rule-gold { width: 44px; height: 2px; background: var(--gold); border: none; margin: 1.4rem auto; }
.head-left .rule-gold { margin-left: 0; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 920px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; height: 100%;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease, box-shadow 0.35s ease;
}
.card:hover {
  transform: translateY(-5px); border-color: #d9dde3;
  box-shadow: 0 24px 48px -28px rgba(20,40,64,0.25);
}

/* Profundidad 3D de baja amplitud, activada por JS solo con puntero fino. */
.motion-tilt { --rx: 0deg; --ry: 0deg; --lift: 0px; transform-style: preserve-3d; }
.motion-tilt,
html.js .reveal.visible.motion-tilt {
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
}
.motion-tilt:hover { --lift: -4px; }
.motion-tilt.is-tilting { will-change: transform; }
.motion-tilt .card-body, .motion-tilt .sede-body { transform: translateZ(12px); }
.card .card-img { height: 200px; overflow: hidden; }
.card .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); filter: saturate(0.92); }
.card:hover .card-img img { transform: scale(1.05); }

/* Logos vectoriales de ministerios */
.ministry-logo {
  background: var(--bg-warm);
  display: flex; align-items: center; justify-content: center;
}
.ministry-logo img {
  object-fit: contain !important;
  filter: none !important;
  padding: 0;
  width: 100%; height: 100%;
}
.card .ministry-logo { height: 210px; }
.card:hover .ministry-logo img { transform: scale(1.03); }
article .ministry-logo {
  border-radius: 1.25rem;
  height: 280px;
  border: 1px solid var(--hairline);
  overflow: hidden;
}
article .ministry-logo img {
  border-radius: 1.25rem;
  width: 100%; height: 100%;
  object-fit: cover !important;
}
.card .card-body { padding: 1.5rem 1.6rem 1.7rem; flex: 1; display: flex; flex-direction: column; }
.card .card-body h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.card .card-body p { color: var(--muted); font-size: 0.93rem; flex: 1; margin-bottom: 1rem; }
.card .card-link { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.card .card-link::after { content: "→"; margin-left: 0.4rem; display: inline-block; transition: transform 0.25s ease; }
.card:hover .card-link::after { transform: translateX(5px); }
.feature-icon {
  width: 2.6rem; height: 2.6rem; border-radius: .8rem; margin-bottom: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--navy); background: var(--gold-soft); border: 1px solid rgba(183,121,31,.16);
}
.feature-icon .ui-icon { width: 1.25rem; height: 1.25rem; }

/* ---------- Tabs ---------- */
.tabs-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--hairline); margin-bottom: 2.5rem; }
.tab-btn {
  background: none; border: none; padding: 0.8rem 1.2rem; font-family: var(--sans);
  font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--navy); border-bottom-color: var(--gold); }
.tab-panel { display: none; animation: fadeUp 0.4s cubic-bezier(0.16,1,0.3,1); }
.tab-panel.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Misión / visión ---------- */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 700px) { .mv-grid { grid-template-columns: 1fr; } }
.mv-box { padding: 1.9rem 2rem; border: 1px solid var(--hairline); border-radius: var(--radius); background: #fff; }
.mv-box h3 { font-size: 1.15rem; color: var(--gold); margin-bottom: 0.5rem; }
.mv-box p { color: var(--ink); font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; margin: 0; }

.quote-block {
  margin: 2.5rem 0 0; padding: 2.75rem 3rem; background: var(--navy); color: #fff;
  border-radius: 1.25rem; position: relative;
}
.quote-block p {
  font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 450;
  font-style: italic; line-height: 1.55; margin-bottom: 1.1rem;
}
.quote-block p:last-child { margin-bottom: 0; }
.quote-block::before {
  content: "\201C"; font-family: var(--serif); font-size: 5rem; color: var(--gold);
  position: absolute; top: -1.4rem; left: 1.6rem; line-height: 1;
}
@media (max-width: 560px) { .quote-block { padding: 2rem 1.5rem; } }

/* ---------- Personas ---------- */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 760px) { .people-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .people-grid { grid-template-columns: 1fr; } }
.person { text-align: center; }
.person .avatar { aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin: 0 auto 1.1rem; max-width: 190px; border: 1px solid var(--hairline); }
.person .avatar img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); transition: transform 0.5s ease; }
.person:hover .avatar img { transform: scale(1.06); }
.person h4 { font-size: 1.08rem; margin-bottom: 0.15rem; }
.person .role { color: var(--gold); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.4rem; }
.person p.desc { font-size: 0.88rem; color: var(--muted); max-width: 260px; margin: 0 auto; }

/* ---------- Declaración de fe ---------- */
.belief-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .belief-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .belief-grid { grid-template-columns: 1fr; } }
.belief-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.4rem 1.5rem; transition: border-color 0.25s ease; }
.belief-card:hover { border-color: #d0d5dd; }
.belief-card .num { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 1.1rem; display: block; margin-bottom: 0.35rem; }
.belief-card h4 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.belief-card p { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.45rem; }
.belief-card .refs { font-size: 0.74rem; color: var(--faint); letter-spacing: 0.02em; }

/* ---------- Catecismo Heidelberg ---------- */
.catechism-hero {
  background: var(--navy); color: #fff; border-radius: 1.4rem; padding: 3.5rem 3rem; margin-bottom: 3.5rem;
}
@media (max-width: 620px) { .catechism-hero { padding: 2.25rem 1.5rem; } }
.catechism-hero .q-label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 700; display: block; margin-bottom: 1rem; }
.catechism-hero h3 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500; margin-bottom: 1.5rem; }
.catechism-hero .answer { font-family: var(--serif); font-size: clamp(1.02rem, 1.8vw, 1.18rem); line-height: 1.75; color: rgba(255,255,255,0.92); }
.catechism-hero .answer { font-family: var(--sans); line-height: 1.7; }
.catechism-hero .refs { margin-top: 1.5rem; font-size: 0.78rem; color: rgba(255,255,255,0.55); font-family: var(--sans); }

.part-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-bottom: 3.5rem; }
@media (max-width: 720px) { .part-band { grid-template-columns: 1fr; } }
.part-card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.6rem 1.7rem; background: var(--bg-warm); }
.part-card .part-num { font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--gold); line-height: 1; }
.part-card h4 { margin-top: 0.6rem; font-size: 1.12rem; }
.part-card p { font-size: 0.88rem; color: var(--muted); margin: 0; }
.part-card .range { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-top: 0.75rem; display: block; }

.qa-item { border-bottom: 1px solid var(--hairline); padding: 2.2rem 0; }
.qa-item:first-child { border-top: 1px solid var(--hairline); }
.qa-item .q-num { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 700; display: block; margin-bottom: 0.5rem; }
.qa-item h4 { font-size: 1.3rem; font-weight: 520; margin-bottom: 0.9rem; }
.qa-item .answer { font-size: 0.98rem; color: #333a45; line-height: 1.75; }
.qa-item .refs { font-size: 0.76rem; color: var(--faint); margin-top: 0.9rem; }

/* ---------- Steps discipulado ---------- */
.steps { display: flex; flex-direction: column; gap: 0; counter-reset: step; }
.step-card {
  display: grid; grid-template-columns: 96px 1fr; gap: 1.75rem; align-items: flex-start;
  padding: 2.5rem 0; border-bottom: 1px solid var(--hairline);
}
.step-card:first-child { border-top: 1px solid var(--hairline); }
.step-num {
  width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-weight: 550; font-size: 1.5rem; color: #fff;
}
.step-card h3 { font-size: 1.5rem; margin-bottom: 0.2rem; }
.step-card .tagline { font-style: italic; font-family: var(--serif); color: var(--gold); font-size: 1rem; margin-bottom: 0.8rem; }
.step-card p { color: #333a45; font-size: 0.96rem; }
.step-card ul { margin: 0.6rem 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.92rem; }
.step-card li { margin-bottom: 0.25rem; }
.step-card .verses { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); margin-top: 0.8rem; }
@media (max-width: 560px) { .step-card { grid-template-columns: 1fr; gap: 1rem; } .step-num { width: 52px; height: 52px; font-size: 1.15rem; } }

/* ---------- Eventos ---------- */
.events-toolbar-wrap { max-width: 760px; margin: 0 auto 1.5rem; }
.events-toolbar { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
.event-search {
  display: flex; align-items: center; gap: 0.65rem;
  border: 1px solid var(--hairline); border-radius: 999px; background: #fff;
  padding: 0.35rem 0.95rem; min-height: 48px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.event-search:focus-within {
  border-color: #c9d3e2;
  box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.08);
}
.event-search-icon { color: var(--faint); font-size: 1rem; line-height: 1; }
.event-search input {
  width: 100%; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 0.95rem; color: var(--ink); min-width: 0;
}
.event-search input::placeholder { color: #98a2b3; }
.filters, .filter-chips {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
}
.filters .btn, .filter-chips .btn {
  padding: 0.55rem 1rem; min-height: 44px; font-size: 0.78rem;
}
.events-meta {
  min-height: 1.2em; margin: 0; text-align: center;
  font-size: 0.8rem; color: var(--muted); letter-spacing: 0.02em;
}
.events-empty {
  text-align: center; padding: 2.5rem 1rem 1rem;
  border: 1px dashed var(--hairline); border-radius: 1rem; margin: 0.5rem 0 1.5rem;
}
.events-empty p { color: var(--muted); margin-bottom: 1rem; }
.month-block { border-bottom: 1px solid var(--hairline); }
.month-block:first-of-type { border-top: 1px solid var(--hairline); }
.month-head {
  width: 100%; text-align: left; padding: 1.35rem 0.25rem; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--serif); font-weight: 550; font-size: 1.25rem; color: var(--ink);
}
.month-head .chev { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.3s ease; color: var(--faint); font-size: 0.9rem; }
.month-block.open .month-head .chev { transform: rotate(180deg); }
.month-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1); }
.month-block.open .month-body { max-height: 1400px; }
.event-row { display: flex; gap: 1.25rem; align-items: baseline; padding: 0.7rem 0.25rem 0.7rem 1rem; }
.event-row .date { min-width: 92px; font-weight: 700; color: var(--gold); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.event-row .detail { font-size: 0.94rem; color: #333a45; }
.event-row .cat { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-left: auto; white-space: nowrap; padding-left: 0.75rem; }
@media (max-width: 560px) {
  .event-row { gap: 0.75rem; padding-left: 0.15rem; }
  .event-row .date { min-width: 72px; font-size: 0.76rem; }
  .event-row .cat {
    display: inline-block; margin-left: 0; padding-left: 0;
    width: 100%; order: 3; margin-top: 0.15rem;
  }
  .event-row { flex-wrap: wrap; }
  .filter-chips { justify-content: flex-start; }
  .filter-chips .btn { flex: 1 1 calc(50% - 0.5rem); min-width: calc(50% - 0.5rem); }
}

/* ---------- Ubicación ---------- */
.sede-card { border: 1px solid var(--hairline); border-radius: 1.25rem; overflow: hidden; background: #fff; transition: box-shadow 0.3s ease; }
.sede-card:hover { box-shadow: 0 24px 48px -30px rgba(20,40,64,0.3); }
.sede-card iframe { width: 100%; height: 250px; border: 0; filter: grayscale(0.35); transition: filter 0.4s ease; }
.sede-card:hover iframe { filter: grayscale(0); }
.sede-card .sede-body { padding: 1.75rem; }
.sede-card h3 { font-size: 1.4rem; }
.sede-card .addr { color: var(--muted); font-size: 0.92rem; margin-bottom: 1.25rem; }
.schedule-list { display: flex; flex-direction: column; gap: 0.55rem; }
.schedule-row { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.89rem; color: #333a45; }
.schedule-row .day { font-weight: 700; min-width: 84px; color: var(--navy); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 0.15rem; }

/* ---------- Predicaciones ---------- */
.video-frame { border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--hairline); background: #000; }
.video-frame iframe { width: 100%; aspect-ratio: 16/9; border: 0; }
.video-caption { font-size: 0.9rem; color: var(--muted); margin-top: 0.9rem; }
.video-caption b { color: var(--ink); font-weight: 600; }

.archive-card {
  display: flex; align-items: center; gap: 1.1rem;
  background: var(--bg-warm); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 1.5rem 1.75rem; transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.archive-card:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 20px 40px -30px rgba(20,40,64,0.35); }
.archive-card-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 999px; background: var(--navy); color: #fff; font-size: 1.05rem;
}
.archive-card b { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: 0.2rem; }
.archive-card > span > span { color: var(--muted); font-size: 0.88rem; }

/* ---------- Donar ---------- */
.donate-card { background: #fff; border: 1px solid var(--hairline); border-radius: 1.25rem; padding: 2.25rem; max-width: 480px; margin: 0 auto; }
.donate-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.35rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--hairline);
}
.donate-row:last-child { border-bottom: none; }
.donate-row .label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint);
  align-self: start; padding-top: 0.2rem;
}
.donate-row .value {
  font-weight: 600;
  font-family: "SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.donate-row .value:last-child { grid-column: 2 / -1; }
.donate-row .copy-btn { grid-column: 3; grid-row: 1; justify-self: end; }
.copy-btn {
  background: none; border: 1px solid #d6dae1; color: var(--ink); border-radius: 999px; padding: 0.32rem 0.85rem;
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.copy-btn:hover { border-color: var(--ink); }
.copy-btn.copied { background: #16a34a; border-color: #16a34a; color: #fff; }
@media (max-width: 480px) {
  .donate-card { padding: 1.4rem 1.15rem; }
  .donate-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label copy"
      "value value";
  }
  .donate-row .label { grid-area: label; padding-top: 0; align-self: center; }
  .donate-row .value { grid-area: value; font-size: 0.9rem; line-height: 1.45; }
  .donate-row .value:last-child { grid-column: auto; }
  .donate-row .copy-btn { grid-area: copy; }
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy); color: #fff; text-align: center; padding: 5.5rem 0; }
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 480; }
.cta-band p { color: rgba(255,255,255,0.75); max-width: 540px; margin: 0.75rem auto 2rem; }

/* ---------- Compartir ---------- */
.share-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 2.5rem; }
.share-row .share-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-right: 0.25rem; }
.share-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.45rem 1rem;
  font-size: 0.8rem; font-weight: 600; color: var(--muted); background: #fff; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.share-btn:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }

/* ---------- FAQ / detalles ---------- */
details.faq { border-bottom: 1px solid var(--hairline); }
details.faq:first-of-type { border-top: 1px solid var(--hairline); }
details.faq summary {
  cursor: pointer; list-style: none; padding: 1.3rem 0.25rem;
  font-family: var(--serif); font-size: 1.12rem; font-weight: 550;
  min-height: 52px; display: flex; justify-content: space-between; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--faint); font-size: 1.3rem; font-family: var(--sans); transition: transform 0.25s ease; }
details.faq[open] summary::after { transform: rotate(45deg); }
.icons-ready details.faq summary::after { display: none; }
.faq-icon { width: 44px; height: 44px; margin: -10px 0 -10px 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--faint); transition: transform .22s ease, color .22s ease; }
.faq-icon .ui-icon { width: 1.05rem; height: 1.05rem; }
details.faq[open] .faq-icon { transform: rotate(45deg); color: var(--gold); }
details.faq .faq-body { padding: 0 0.25rem 1.4rem; color: var(--muted); font-size: 0.95rem; }

/* ---------- Footer ---------- */
footer.site-footer { border-top: 1px solid var(--hairline); padding: 4rem 0 2rem; font-size: 0.9rem; color: var(--muted); background: var(--bg-warm); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { font-family: var(--sans); color: var(--ink); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 1.1rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-grid a { transition: color 0.2s ease; }
.footer-grid a:hover { color: var(--navy); }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.footer-brand img { height: 32px; }
.footer-brand span { font-family: var(--serif); color: var(--ink); font-weight: 600; }
.social-row { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.social-row a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.social-row .ui-icon { width: 1rem; height: 1rem; }
.social-row a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.footer-bottom { border-top: 1px solid var(--hairline); padding-top: 1.75rem; text-align: center; font-size: 0.78rem; color: var(--faint); }
.footer-verse { font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--muted); margin-top: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, .reveal { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .motion-tilt, html.js .reveal.visible.motion-tilt { transform: none !important; }
}

@media (max-width: 620px) {
  section { padding: 4.5rem 0; }
  .hero { padding: 4.75rem 0 3.25rem; }
  .hero-media { margin-top: 2.5rem; }
  .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin-top: 2rem; }
  .stat .num { font-size: clamp(1.25rem, 6vw, 1.6rem); white-space: nowrap; }
  .stat .label { font-size: .6rem; letter-spacing: .09em; }
  article.grid-2 > .card-img { order: 0 !important; }
  article.grid-2 > div:not(.card-img) { order: 1 !important; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .filters .btn { width: 100%; min-height: 44px; justify-content: center; padding-inline: .7rem; }
  .event-row { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: .15rem 1rem; align-items: start; padding: .8rem .25rem; }
  .event-row .date { min-width: 0; grid-row: 1 / span 2; }
  .event-row .cat { display: block; grid-column: 2; margin: .15rem 0 0; padding: 0; white-space: normal; color: var(--navy); opacity: .72; }
  .donate-card { padding: 1.5rem; }
  .donate-row { grid-template-columns: 48px minmax(0,1fr) auto; gap: .5rem; }
  .donate-row .value { font-size: clamp(.75rem, 3.35vw, .86rem); letter-spacing: -.015em; }
  .donate-row:last-child .label, .donate-row:last-child .value { grid-column: 1 / -1; }
  .donate-row:last-child .value { margin-top: .15rem; }
  .copy-btn { padding-inline: .65rem; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-grid h4 { margin-bottom: .8rem; }
}

/* ---------- Formulario de voluntarios ---------- */
.vol-form {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 2.25rem clamp(1.25rem, 4vw, 2.5rem);
  box-shadow: 0 30px 60px -40px rgba(20, 40, 64, 0.25);
}
.vol-field { margin-bottom: 1.4rem; }
.vol-field label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.vol-field .req { color: var(--gold); }
.vol-field input,
.vol-field select,
.vol-field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.96rem;
  color: var(--ink);
  background: var(--bg-warm);
  border: 1px solid var(--hairline);
  border-radius: 0.6rem;
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.vol-field textarea { resize: vertical; min-height: 5.5rem; }
.vol-field input:hover,
.vol-field select:hover,
.vol-field textarea:hover { border-color: #cfd5de; }
.vol-field input:focus,
.vol-field select:focus,
.vol-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}
.vol-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23586579' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem;
  padding-right: 2.4rem;
}
.vol-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}
@media (max-width: 640px) {
  .vol-grid-2 { grid-template-columns: 1fr; }
}
.vol-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vol-note { font-size: 0.82rem; color: var(--faint); margin: 0.5rem 0 1.5rem; }
.vol-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vol-status { font-size: 0.9rem; color: var(--muted); }
.vol-status.is-error { color: #b3413a; font-weight: 600; }
.vol-success {
  background: var(--gold-soft);
  border: 1px solid #e6d7ad;
  border-radius: var(--radius);
  padding: 2.25rem;
  text-align: center;
  margin-top: 1.5rem;
}
.vol-success h3 { margin-bottom: 0.4rem; }
.vol-success p { color: var(--muted); margin: 0; }

/* ---------- Tarjeta QR para imprimir/compartir ---------- */
.qr-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: 1.4rem;
  padding: 2rem 2.25rem 1.75rem;
  color: #fff;
  text-align: center;
}
.qr-card img { border-radius: 0.9rem; background: #fff; padding: 0.6rem; width: 220px; height: 220px; }
.qr-card .qr-title { font-family: var(--serif); font-size: 1.15rem; }
.qr-card .qr-sub { font-size: 0.8rem; color: rgba(255,255,255,0.72); letter-spacing: 0.04em; }

/* --- Sistema de listas de predicaciones -------------------------------- */
.pl-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.pl-img { position: relative; height: 168px; }
.pl-count {
  position: absolute; right: .6rem; bottom: .6rem;
  background: rgba(12,28,46,.86); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .22rem .5rem; border-radius: 4px;
}
.pl-img::after {
  content: "▶"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 1.6rem; text-shadow: 0 2px 12px rgba(0,0,0,.55);
  opacity: .92; transition: transform .3s ease;
}
.card:hover .pl-img::after { transform: scale(1.14); }
.pl-latest { margin-bottom: 2.6rem; }

/* September 2026: the Sunday invitation is the visual center. */
.nav-links a {letter-spacing:.02em;text-transform:none;font-size:.88rem}
.nav-links .nav-cta {order:5}
.welcome-hero,.visit-hero {max-width:1180px;margin:auto;display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:center;text-align:left;padding:4rem 1.5rem}
.welcome-hero > .container,.visit-hero > .container {padding:0;width:100%}
.welcome-hero h1 {font-size:clamp(2.5rem,4.8vw,4.25rem);max-width:650px;line-height:1.09;margin-bottom:1.25rem}
.welcome-hero .sub,.visit-hero .sub {margin-left:0;font-size:1.05rem}
.welcome-hero .hero-actions,.visit-hero .hero-actions {justify-content:flex-start}
.sunday-card {background:var(--navy-deep);color:white;padding:1.75rem 2rem;border-radius:1.25rem;box-shadow:0 18px 45px -30px #14284080;text-align:left}
.sunday-card > .eyebrow {color:#f3d391;font-size:.72rem;margin-bottom:1.4rem;display:block}
.sunday-card > a {display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;padding:1rem 0;border-top:1px solid #ffffff30}
.sunday-card > a > span:first-child {font-size:1.15rem;font-weight:600}
.sunday-card strong {font-family:var(--serif);font-size:1.75rem;grid-row:span 2;line-height:1.2}
.sunday-card small {font:600 .7rem var(--sans)}
.sunday-card a p {font-size:.8rem;color:#dbe3ed;margin:0;line-height:1.55}
.sunday-direction {font-size:.78rem;color:#f3d391;grid-column:1/-1}
.sunday-card a:hover .sunday-direction {text-decoration:underline}
.sunday-card .sunday-note {font-size:.78rem;margin:1rem 0 0;color:#dbe3ed;border-top:1px solid #ffffff30;padding-top:1rem}
.community-preview {display:grid;grid-template-columns:1fr 1.2fr;gap:2rem 4rem;align-items:start}
.community-preview h2 {font-size:clamp(1.8rem,3vw,2.5rem)}
.ministry-paths {display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}
.ministry-paths a {padding:1rem 0;display:flex;gap:.8rem;justify-content:space-between;border-bottom:1px solid var(--hairline);font-weight:600;font-size:.9rem}
.ministry-paths a span {color:var(--gold)}
.ministry-paths a:hover {color:var(--navy);border-color:var(--gold)}
.intro-video {grid-column:1/-1;font-size:.9rem}
.intro-video video {margin:1rem auto;max-height:440px;width:100%;background:var(--navy-deep)}
summary {cursor:pointer;min-height:44px;padding:.65rem 0}
.video-frame {position:relative;aspect-ratio:16/9}
.footer-brand img {width:32px;object-fit:contain;flex-shrink:0}
.video-facade {display:flex;flex-direction:column;gap:.8rem;justify-content:center;align-items:center;min-height:100%;position:absolute;inset:0;background:var(--navy-deep);color:white;text-align:center;padding:1.5rem}
.video-facade strong {font:500 clamp(1.4rem,3vw,2.3rem) var(--serif)}
.video-facade > span:last-child {font-size:.85rem;color:#f3d391}
.play-mark {border:1px solid #f3d391;color:#f3d391;width:56px;height:56px;border-radius:50%;display:grid;place-items:center}
.button-row {display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;align-items:center}
.button-row .btn {margin:0!important;white-space:normal;text-align:center}
.cta-band .eyebrow {color:#f3d391}
.cta-band .cta-alternative {margin:1.5rem auto 0;font-size:.85rem;color:#e0e8f0}
.form-extra,.qr-disclosure {border-top:1px solid var(--hairline);margin-top:1.5rem;padding-top:.5rem}
.form-extra summary,.qr-disclosure summary {color:var(--navy);font-weight:600}
.form-extra .vol-field {margin-top:1rem}
.qr-disclosure .qr-wrap {margin-top:1rem}
.card:focus-within {outline:2px solid var(--gold);outline-offset:4px}
@media(max-width:1020px){.nav-links .nav-cta{order:0}.welcome-hero,.visit-hero{gap:1.5rem}.sunday-card{padding:1.5rem}}
@media(max-width:700px){
 .welcome-hero,.visit-hero{grid-template-columns:1fr;padding:2rem 1.5rem;gap:1.75rem}
 .welcome-hero h1{font-size:2.3rem}.welcome-hero .kicker{font-size:.62rem;letter-spacing:.1em}
 .welcome-hero .sub{font-size:.95rem;margin-bottom:1.1rem}.welcome-hero .hero-actions{gap:.6rem}
 .welcome-hero .hero-actions .text-link{font-size:.8rem}.sunday-card{padding:1.1rem 1.3rem}
 .sunday-card > .eyebrow{margin-bottom:.65rem}.sunday-card > a{padding:.75rem 0}
 .sunday-card strong{font-size:1.5rem}.community-preview{grid-template-columns:1fr;gap:1rem}
 .ministry-paths{gap:0 1rem}.ministry-paths a{font-size:.8rem}.home section:not(.hero){padding-top:3rem;padding-bottom:3rem}
 .button-row{flex-direction:column;align-items:stretch}.button-row .btn{width:100%}
 .cta-band{padding:3rem 0}.vol-form{padding:1.5rem!important}.qr-card{max-width:260px;margin:auto}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}html.js .reveal{opacity:1;transform:none}}
@media print{html.js .reveal{opacity:1;transform:none}.nav-toggle{display:none}}


/* --- Cinta «Este domingo»: horarios en la primera pantalla --------------- */
.domingo {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden; margin: 1.75rem 0 2rem; max-width: 620px;
}
.domingo-sede {
  background: #fff; padding: 1rem 1.15rem 1.1rem;
  display: flex; flex-direction: column; gap: .1rem; text-align: left;
}
.domingo-sede .eyebrow { margin-bottom: .15rem; }
.domingo-hora {
  font-family: var(--serif, Fraunces), Georgia, serif;
  font-size: 1.45rem; font-weight: 600; color: var(--navy); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.domingo-lugar { font-size: .84rem; color: var(--muted); line-height: 1.35; }
.domingo-sede a {
  margin-top: .5rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--navy);
  text-decoration: none;
}
.domingo-sede a::after { content: " →"; }
.domingo-sede a:hover { text-decoration: underline; }
@media (max-width: 620px) { .domingo { grid-template-columns: 1fr; margin: 1.4rem 0 1.6rem; } }

/* Horarios entre semana: una linea por actividad, no una cadena corrida */
.schedule-row .acts { display: flex; flex-direction: column; gap: .18rem; }
.schedule-row .acts span { display: block; }
.schedule-row .acts b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy); }

/* Un nombre de banco no debe partirse en dos lineas */
.donate-card .value { white-space: nowrap; }

/* Keep the primary mobile navigation action at readable contrast. */
.nav-links a.nav-cta {background:var(--navy);color:#fff!important}

/* Area tactil de 44px en los enlaces de la cinta (WCAG 2.5.8) */
.domingo-sede a{display:inline-flex;align-items:center;min-height:44px;margin-top:.15rem}

/* --- Mosaico «La vida de Reflejo» -------------------------------------- */
.vida{padding:clamp(3rem,7vw,5rem) 0;background:var(--bg-warm,#faf7f2)}
.vida-cab{max-width:56ch;margin:0 auto clamp(1.6rem,3vw,2.4rem);text-align:center}
.vida-cab h2{margin-bottom:.5rem}
.vida-cab p{color:var(--muted)}
.mosaico{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(96px,13vw,150px);
  gap:clamp(8px,1vw,14px);
}
.mosaico figure{margin:0;position:relative;overflow:hidden;border-radius:14px;background:#e9eff4}
.mosaico img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.mosaico figure:hover img{transform:scale(1.06)}



/* La tesela de texto es lo que hace que el collage se lea como diseño
   y no como un montón de fotos apiladas. */
.m-lema{
  grid-column:span 2;grid-row:span 1;border-radius:14px;
  background:linear-gradient(135deg,var(--navy,#14304d),#0d2340);
  color:#fff;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1rem,2.4vw,1.6rem);gap:.35rem;
}
.m-lema span{font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold,#c9a227)}
.m-lema p{font-family:var(--serif,Fraunces),Georgia,serif;font-size:clamp(1rem,1.9vw,1.3rem);
  line-height:1.25;color:#fff;margin:0}
.mosaico figure::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(to top,rgba(12,28,46,.34),transparent);pointer-events:none}
.m-lema::after{display:none}
@media(max-width:760px){
  .mosaico{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(104px,26vw,150px)}
  .m-grande,.m-ancho,.m-lema{grid-column:span 2}
  
}

/* --- Franja a sangre con cita ------------------------------------------- */
.franja{position:relative;min-height:clamp(300px,44vw,430px);display:grid;
  place-items:center;overflow:hidden;background:var(--navy,#14304d)}
.franja img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.franja-txt{position:relative;text-align:center;color:#fff;max-width:26ch;
  padding:2rem 1.2rem}
.franja-txt p{font-family:var(--serif,Fraunces),Georgia,serif;
  font-size:clamp(1.35rem,3.4vw,2.2rem);line-height:1.22;color:#fff;margin:0 0 .6rem}
.franja-txt cite{font-style:normal;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold,#c9a227)}
/* Encuadre arriba en celda ancha */

/* Velo detras del texto: la foto tiene brazos alzados justo ahi y la cita
   perdia legibilidad sobre ellos. */
.franja::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 46% 62% at 50% 50%,rgba(10,24,40,.62),transparent 72%);
  pointer-events:none}
.franja-txt{text-shadow:0 1px 14px rgba(8,20,34,.55)}

/* --- Pasarela del banner ------------------------------------------------ */
.pasarela{position:absolute;inset:0;overflow:hidden;z-index:0;background:var(--navy,#14304d)}
.pasarela img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;will-change:opacity;
  animation:var(--pasa-nombre) 30s linear infinite;
}
.pasarela-velo{
  position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(9,22,38,.90) 0%,rgba(9,22,38,.74) 42%,rgba(9,22,38,.34) 100%);
}
@media(max-width:860px){
  .pasarela-velo{background:linear-gradient(180deg,rgba(9,22,38,.86) 0%,rgba(9,22,38,.80) 55%,rgba(9,22,38,.92) 100%)}
}
.pasarela img:nth-child(1){animation-name:pasa0}
.pasarela img:nth-child(2){animation-name:pasa1}
.pasarela img:nth-child(3){animation-name:pasa2}
.pasarela img:nth-child(4){animation-name:pasa3}
.pasarela img:nth-child(5){animation-name:pasa4}

@keyframes pasa0{
  0%,17.60%{opacity:1}
  20.00%,97.60%{opacity:0}
  100%{opacity:1}
}
@keyframes pasa1{
  0%,17.60%{opacity:0}
  22.40%,37.60%{opacity:1}
  40.00%,100%{opacity:0}
}
@keyframes pasa2{
  0%,37.60%{opacity:0}
  42.40%,57.60%{opacity:1}
  60.00%,100%{opacity:0}
}
@keyframes pasa3{
  0%,57.60%{opacity:0}
  62.40%,77.60%{opacity:1}
  80.00%,100%{opacity:0}
}
@keyframes pasa4{
  0%,77.60%{opacity:0}
  82.40%,97.60%{opacity:1}
  100.00%,100%{opacity:0}
}

/* Sin movimiento si el sistema lo pide: se queda la primera. */
@media(prefers-reduced-motion:reduce){
  .pasarela img{animation:none;opacity:0}
  .pasarela img:first-child{opacity:1}
}

/* El heroe pasa a ir sobre la pasarela: texto claro sobre foto oscurecida. */
.hero.welcome-hero{position:relative;isolation:isolate;color:#fff}
.hero.welcome-hero > .container{position:relative;z-index:1}
.hero.welcome-hero .kicker{color:var(--gold,#c9a227)}
.hero.welcome-hero h1{color:#fff;text-shadow:0 2px 22px rgba(6,16,28,.5)}
.hero.welcome-hero h1 em{color:#f0d9a3}
.hero.welcome-hero .sub{color:rgba(255,255,255,.86)}
.hero.welcome-hero .text-link{color:#fff}

/* --- Tipografia: Fraunces es variable; se le pide el tamaño optico -------- */
h1{font-variation-settings:"opsz" 110,"SOFT" 0,"WONK" 1;letter-spacing:-.021em}
h2{font-variation-settings:"opsz" 60,"WONK" 1;letter-spacing:-.014em}
h3,.card-body h3{font-variation-settings:"opsz" 24;letter-spacing:-.004em}
.hero.welcome-hero h1{font-size:clamp(2.3rem,5.4vw,4.05rem);line-height:1.02}
.hero.welcome-hero .sub{font-size:clamp(1.02rem,1.55vw,1.16rem);line-height:1.6;max-width:44ch}
h2{font-size:clamp(1.6rem,3.1vw,2.35rem);line-height:1.1}
.card-body h3{font-size:1.12rem;line-height:1.28}
.card-body p{font-size:.9rem;line-height:1.55}
.eyebrow,.kicker{font-size:.7rem;letter-spacing:.155em}

/* --- Accesos directos bajo los botones del heroe ------------------------- */
.atajos{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.15rem}
.atajos a{
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:.45rem .95rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.34);color:#fff;text-decoration:none;
  font-size:.84rem;font-weight:600;backdrop-filter:blur(3px);
  background:rgba(255,255,255,.07);transition:background .25s ease,border-color .25s ease;
}
.atajos a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}

/* --- Tarjetas de serie mas compactas ------------------------------------- */
.card .pl-img{height:150px}
@media(max-width:760px){.card .pl-img{height:172px}}
.card .card-body{padding:1.05rem 1.15rem 1.2rem}
.card .card-body p{margin-bottom:.75rem}

/* --- Correcciones de la pasarela ---------------------------------------- */
/* 1. La forma abreviada llevaba var(--pasa-nombre), que no existia: eso
      invalida toda la declaracion y deja la duracion en 0s, con lo que las
      cinco fotos se quedaban en opacidad 0. Se declara pieza por pieza. */
.pasarela img{
  animation-duration:30s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-fill-mode:both;
}
/* 2. El velo tapaba la foto hasta hacerla invisible. Se aclara y se apoya en
      un degradado lateral para que el texto siga legible. */
.pasarela-velo{
  background:linear-gradient(100deg,rgba(9,22,38,.86) 0%,rgba(9,22,38,.62) 38%,
    rgba(9,22,38,.22) 68%,rgba(9,22,38,.42) 100%);
}
@media(max-width:860px){
  .pasarela-velo{background:linear-gradient(180deg,rgba(9,22,38,.72) 0%,
    rgba(9,22,38,.58) 45%,rgba(9,22,38,.86) 100%)}
}
/* 3. La tarjeta de horarios es hermana del contenedor, no hija: sin z-index
      quedaba DEBAJO de la pasarela y no se veia. */
.hero.welcome-hero .sunday-card{position:relative;z-index:1}
.hero.welcome-hero .sunday-card,
.hero.welcome-hero .sunday-card a{color:#fff}
.hero.welcome-hero .sunday-card{
  background:rgba(9,22,38,.62);backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.16);
}

/* --- Tamaños: todo estaba demasiado grande ------------------------------ */
/* El heroe en movil medía 886 px, más que la pantalla entera, y la foto 16:9
   se escalaba al cuádruple dentro de una caja vertical. */
.pasarela picture{position:absolute;inset:0;display:block;opacity:0;
  animation-duration:30s;animation-timing-function:linear;
  animation-iteration-count:infinite;animation-fill-mode:both}
.pasarela picture img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:1;animation:none}
.pasarela picture:nth-child(1){animation-name:pasa0}
.pasarela picture:nth-child(2){animation-name:pasa1}
.pasarela picture:nth-child(3){animation-name:pasa2}
.pasarela picture:nth-child(4){animation-name:pasa3}
.pasarela picture:nth-child(5){animation-name:pasa4}
@media(prefers-reduced-motion:reduce){
  .pasarela picture{animation:none;opacity:0}
  .pasarela picture:first-child{opacity:1}
}

.hero.welcome-hero{min-height:0;padding-top:clamp(2.4rem,5vw,4rem);
  padding-bottom:clamp(2.4rem,5vw,4rem)}
@media(max-width:860px){
  .hero.welcome-hero{padding-top:2rem;padding-bottom:2.2rem}
}

/* Mosaico: filas más bajas y menos alto total */
.mosaico{grid-auto-rows:clamp(78px,10.5vw,124px);gap:clamp(6px,.8vw,10px)}
@media(max-width:760px){.mosaico{grid-auto-rows:clamp(84px,21vw,120px)}}
.vida{padding:clamp(2.2rem,5vw,3.4rem) 0}

/* Franja: más baja */
.franja{min-height:clamp(220px,30vw,320px)}

/* Tarjetas de serie: imagen más baja y cuerpo más apretado */
.card .pl-img{height:132px}
@media(max-width:760px){.card .pl-img{height:150px}}
.card .card-body{padding:.9rem 1rem 1.05rem}
.card .card-body h3{font-size:1.05rem}
.card .card-body p{font-size:.86rem;margin-bottom:.6rem}

/* Secciones: menos aire vertical en general */
section{padding-top:clamp(2.2rem,4.6vw,3.6rem);padding-bottom:clamp(2.2rem,4.6vw,3.6rem)}
.section-warm{padding-top:clamp(2.4rem,5vw,3.8rem);padding-bottom:clamp(2.4rem,5vw,3.8rem)}

/* --- El heroe va a sangre ------------------------------------------------ */
/* Tenía max-width:1180px y margin:0 50px, así que la foto quedaba metida en
   una caja con franjas blancas a los lados mientras la franja de abajo sí
   sangra. Ese desajuste era lo que hacía ver la portada como un banner pegado.
   El fondo pasa a ocupar todo el ancho; el contenido sigue alineado a la
   misma rejilla de 1180 px mediante el padding. */
.hero.welcome-hero{
  max-width:none;margin:0;
  --lado:max(24px,calc((100vw - 1180px) / 2 + 24px));
  padding-left:var(--lado);padding-right:var(--lado);
  border-radius:0;
}

/* --- La fachada del video tenía fondo liso: 400 px de vacío azul --------- */
.video-frame{overflow:hidden;border-radius:16px}
.video-facade{
  position:relative;isolation:isolate;
  background-image:linear-gradient(rgba(9,22,38,.62),rgba(9,22,38,.72)),
    image-set(url("/assets/optimized/ac094e3991ba-1280.webp") 1x);
  background-size:cover;background-position:50% 30%;
  min-height:clamp(230px,30vw,360px);
}
.video-facade .play-mark{
  background:rgba(255,255,255,.14);backdrop-filter:blur(4px);
  border:1.5px solid rgba(255,255,255,.6);
}
.video-facade:hover{background-position:50% 34%}

/* --- Alineación coherente ----------------------------------------------- */
.vida-cab-izq{text-align:left;margin-left:0;margin-right:0;max-width:60ch}

/* --- Mosaico: celdas menos aplastadas ----------------------------------- */
.mosaico{grid-auto-rows:clamp(92px,12vw,148px)}
@media(max-width:760px){.mosaico{grid-auto-rows:clamp(90px,23vw,132px)}}

/* --- Los seis ministerios, con su marca --------------------------------- */
.ministry-paths a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.85rem;
  padding:.7rem .9rem;border-radius:12px;min-height:56px;
  transition:background .22s ease,border-color .22s ease;
}
.ministry-paths a img{
  width:44px;height:44px;flex:none;object-fit:contain;
  background:var(--bg-warm,#faf7f2);border:1px solid var(--hairline,#e6e1d9);
  border-radius:10px;padding:5px;
}
.ministry-paths a:hover{background:var(--bg-warm,#faf7f2)}
.ministry-paths .mp-nom{font-weight:600}
@media(max-width:620px){
  .ministry-paths a img{width:38px;height:38px}
}

/* Los nombres partian en dos lineas al meter el logotipo: se le da mas sitio
   a la columna y se achica la marca. */
.community-preview{gap:clamp(1.6rem,4vw,3.2rem)}
.community-preview > div:first-child{max-width:34ch}
.ministry-paths a{gap:.7rem;padding:.6rem .75rem;min-height:52px}
.ministry-paths a img{width:38px;height:38px;border-radius:9px;padding:4px}
.ministry-paths .mp-nom{font-size:.95rem;line-height:1.25}
@media(min-width:960px){.ministry-paths .mp-nom{white-space:nowrap}}

/* El enlace del video quedaba como un triangulito suelto de <details>: parecia
   un resto de maquetacion, no un control. */
.community-preview details{margin-top:1.4rem}
.community-preview details > summary{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;
  min-height:44px;padding:.5rem 1.05rem;border-radius:999px;
  border:1px solid var(--hairline,#e6e1d9);background:#fff;
  font-size:.86rem;font-weight:600;color:var(--navy,#14304d);
  transition:background .2s ease,border-color .2s ease;
}
.community-preview details > summary::-webkit-details-marker{display:none}
.community-preview details > summary::before{content:"▶";font-size:.7rem;color:var(--gold,#c9a227)}
.community-preview details[open] > summary::before{content:"■"}
.community-preview details > summary:hover{background:var(--bg-warm,#faf7f2);border-color:#d9d2c6}

/* --- Mosaico rehecho: una sola proporcion ------------------------------- */
/* Antes las celdas mezclaban 1x1, 2x1 (3.6:1) y 2x2 mientras los recortes eran
   4:3, 1:1 y 3:1. `object-fit:cover` recorta por el centro, asi que en las
   celdas estrechas cortaba las cabezas. Ahora TODAS las celdas son 4:3 —una de
   2x2 tambien lo es— y todos los recortes se generan a 4:3. */
.mosaico{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,1vw,14px);grid-auto-rows:auto;align-items:stretch;
}
.mosaico figure,.mosaico .m-lema{margin:0;border-radius:14px;overflow:hidden;
  aspect-ratio:4/3;position:relative;background:#e9eff4}
.mosaico figure img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.mosaico figure:hover img{transform:scale(1.05)}
.m-feature{grid-column:span 2;grid-row:span 2}
.m-lema{
  background:linear-gradient(135deg,var(--navy,#14304d),#0d2340);color:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:clamp(1rem,2vw,1.5rem);
}
.m-lema span{font-size:.66rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold,#c9a227)}
.m-lema p{font-family:var(--serif,Fraunces),Georgia,serif;
  font-size:clamp(.98rem,1.5vw,1.22rem);line-height:1.28;color:#fff;margin:0}
.mosaico figure::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(to top,rgba(12,28,46,.28),transparent);pointer-events:none}
@media(max-width:760px){
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .m-feature{grid-column:span 2;grid-row:span 1}
}

/* La regla vieja `.m-lema{grid-column:span 2}` seguia activa y mi bloque nuevo
   no la anulaba: la tesela ocupaba dos columnas y descuadraba toda la rejilla. */
.mosaico .m-lema{grid-column:auto;grid-row:auto}
.mosaico .m-feature{grid-column:span 2;grid-row:span 2}
@media(max-width:760px){
  .mosaico .m-feature{grid-column:span 2;grid-row:span 1}
}

/* --- La tesela del lema se recortaba ------------------------------------ */
/* Llevaba `aspect-ratio:4/3` como las fotos, pero es texto: en movil el
   contenido medía 131 px dentro de una caja de 125 y `overflow:hidden` cortaba
   la ultima linea de la cita. Sin `aspect-ratio`, la rejilla ya le da la altura
   de la fila y, si el texto necesita mas, empuja en vez de recortar. */
.mosaico .m-lema{aspect-ratio:auto;overflow:visible;min-height:100%}
@media(max-width:760px){
  /* En dos columnas la cita cabia en cuatro lineas apretadas: a ancho completo
     se lee de una vez y da respiro al mosaico. */
  .mosaico .m-lema{grid-column:span 2;padding:1.15rem 1.25rem}
  .mosaico .m-lema p{font-size:1.02rem;line-height:1.32}
}

/* El fondo azul de la tesela lo estaba tapando mi propia regla: puse
   `.mosaico figure,.mosaico .m-lema{background:#e9eff4}` como color de espera
   para las fotos, y ese selector tiene mas especificidad que `.m-lema`, asi que
   ganaba al degradado. Resultado: texto blanco sobre gris claro, ilegible.
   Se repite el degradado con la misma especificidad. */
.mosaico .m-lema{
  background:linear-gradient(135deg,var(--navy,#1e3a5f),#0d2340);
  color:#fff;
}
.mosaico .m-lema p{color:#fff}
.mosaico .m-lema span{color:var(--gold,#b7791f)}