/* ============================================================
   ChurchYada — hoja de estilos
   Marca: violeta profundo + fucsia, con ámbar para los acentos cálidos.
   Estructura hermana del sitio de EduYada; los componentes propios de
   ChurchYada (maquetas de la app, pantalla de proyección, semana, orden
   del culto) están al final.
   ============================================================ */

:root {
  --ink-900: #140A2E;
  --ink-800: #1B0F3B;
  --ink-700: #2A1857;
  --ink-600: #4C2A93;
  --ink:      #221B33;
  --slate:    #61587A;
  --muted:    #8C85A0;

  --violet-600: #6D28D9;
  --violet-500: #7C3AED;
  --violet-400: #A78BFA;
  --fuchsia-500:#C026D3;
  --amber-500:  #E8A13A;

  --bg:        #FFFFFF;
  --bg-soft:   #F7F5FD;
  --bg-line:   #EAE6F6;

  /* tokens que cambian con el tema */
  --ink-c:        var(--ink);
  --heading:      var(--ink-800);
  --card:         #FFFFFF;
  --header-bg:    rgba(255,255,255,.78);
  --header-line:  rgba(234,230,246,.9);
  --btn-ghost-bg: rgba(255,255,255,.7);
  --border-strong:#ded6f4;
  --logo-radius:  11px;

  --grad-brand: linear-gradient(135deg, #8B5CF6 0%, #C026D3 100%);
  --grad-hero: radial-gradient(60% 55% at 78% 12%, rgba(192,38,211,.16), transparent 60%),
               radial-gradient(50% 45% at 15% 20%, rgba(124,58,237,.18), transparent 60%);

  --shadow-sm: 0 1px 2px rgba(27,15,59,.06), 0 4px 12px rgba(27,15,59,.05);
  --shadow-md: 0 8px 24px rgba(27,15,59,.09);
  --shadow-lg: 0 24px 60px rgba(27,15,59,.18);

  --radius:    18px;
  --radius-lg: 26px;
  --maxw:      1160px;

  --font-head: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- Tema oscuro ---------- */
:root[data-theme="dark"] {
  --ink:          #E4DFF2;
  --slate:        #ADA3C4;
  --muted:        #8B82A6;

  --bg:           #0F0A1E;
  --bg-soft:      #160F2B;
  --bg-line:      rgba(255,255,255,.10);

  --heading:      #F2EDFF;
  --card:         #1B1235;
  --header-bg:    rgba(15,10,30,.82);
  --header-line:  rgba(255,255,255,.08);
  --btn-ghost-bg: rgba(255,255,255,.06);
  --border-strong:rgba(255,255,255,.20);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; color: var(--heading); letter-spacing: -.02em; overflow-wrap: break-word; }
h1 { hyphens: auto; overflow-wrap: anywhere; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  padding: .72rem 1.3rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 22px rgba(124,58,237,.35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(124,58,237,.45); }
.btn-ghost { background: var(--btn-ghost-bg); color: var(--heading); border-color: var(--bg-line); }
.btn-ghost:hover { background: var(--card); border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-sm { padding: .55rem 1rem; font-size: .88rem; }
.btn-lg { padding: .9rem 1.7rem; font-size: 1rem; }
.btn-block { width: 100%; margin-top: auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--header-line);
}
/* La marca no se encoge y el menú toma el resto: "ChurchYada" es más largo que
   el nombre de la app hermana y se montaba encima del primer enlace. */
/* La cabecera usa más ancho que el resto de la página: marca + 6 enlaces + un
   botón no caben en los 1160px del contenido. */
.site-header .container { max-width: 1300px; }
/* Altura mínima, no fija: al abrir el menú del teléfono la cabecera crece con él
   (el menú son filas más abajo, no una capa colocada a mano). */
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.brand-mark { border-radius: 11px; }
.brand-text { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--heading); letter-spacing: -.03em; }
.brand-text .accent { color: var(--violet-500); }
.brand--light .brand-text { color: #fff; }
.brand--light .brand-text .accent { color: var(--violet-400); }

.nav { display: flex; gap: 1.25rem; flex: 1 1 auto; justify-content: center; min-width: 0; }
.nav a { font-weight: 500; color: var(--slate); font-size: .95rem; position: relative; white-space: nowrap; }
.nav a:hover { color: var(--heading); }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--grad-brand); border-radius: 2px; transition: width .22s ease;
}
.nav a:hover::after { width: 100%; }

.header-tools { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.header-actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }

/* Botones de herramientas (idioma / tema) */
.tool-btn {
  display: inline-flex; align-items: center; gap: .35rem; height: 40px; padding: 0 .7rem;
  background: var(--btn-ghost-bg); border: 1px solid var(--bg-line); border-radius: 999px;
  color: var(--slate); cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: .85rem;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.tool-btn:hover { color: var(--heading); border-color: var(--border-strong); }
.tool-btn .ico, .tool-btn .ico-chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool-btn .ico-chev { width: 14px; height: 14px; opacity: .7; }
.theme-toggle { width: 40px; justify-content: center; padding: 0; }

.ico-sun { display: none; }
.ico-moon { display: block; }
:root[data-theme="dark"] .ico-sun { display: block; }
:root[data-theme="dark"] .ico-moon { display: none; }

/* Menú de idioma */
.lang { position: relative; }
.lang-btn .ico-chev { transition: transform .2s ease; }
.lang.is-open .ico-chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px; list-style: none;
  background: var(--card); border: 1px solid var(--bg-line); border-radius: 14px; padding: .35rem;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60;
}
.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu button {
  width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; cursor: pointer;
  padding: .55rem .75rem; font-family: var(--font-body); font-size: .92rem; color: var(--slate); transition: .15s;
}
.lang-menu button:hover { background: var(--bg-soft); color: var(--heading); }
.lang-menu button.is-active { color: var(--violet-500); font-weight: 600; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--heading); border-radius: 2px; transition: .25s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: 72px; padding-bottom: 40px; background: var(--bg-soft); overflow: hidden; }
.hero-glow { position: absolute; inset: 0; background: var(--grad-hero); pointer-events: none; }
.hero-inner {
  position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center;
  padding-block: 20px 40px;
}
.hero-inner > * { min-width: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 600;
  font-size: .82rem; color: var(--violet-600); background: var(--card); border: 1px solid var(--bg-line);
  padding: .4rem .85rem; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad-brand); }
.hero-copy h1 { font-size: clamp(1.9rem, 6.2vw, 3.5rem); font-weight: 800; margin: 1.1rem 0; }
.grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 1.12rem; color: var(--slate); max-width: 34rem; }
.hero-cta { display: flex; gap: .8rem; margin: 1.7rem 0 1.3rem; flex-wrap: wrap; }
.hero-points { list-style: none; display: flex; gap: 1.4rem; flex-wrap: wrap; color: var(--slate); font-size: .92rem; font-weight: 500; }
.hero-points li { display: inline-flex; align-items: center; gap: .45rem; }
.ico-check { width: 18px; height: 18px; fill: none; stroke: #12A05C; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.hero-visual { position: relative; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.float-card {
  position: absolute; background: var(--card); border: 1px solid var(--bg-line); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: .8rem 1rem; display: flex; align-items: center; gap: .7rem; z-index: 3;
}
/* Las tarjetas flotan sobre la maqueta, pero nunca sobre su título ni sobre el
   texto de las filas: se apoyan en los bordes. */
.float-card--live { top: 32%; left: -40px; animation: floaty 6s ease-in-out infinite .4s; }
.fc-live { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-head); font-weight: 700; font-size: .8rem; color: #12A05C; }
.fc-live i { width: 9px; height: 9px; border-radius: 50%; background: #12A05C; box-shadow: 0 0 0 4px rgba(18,160,92,.16); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(18,160,92,0); } }
.fc-label { font-size: .72rem; color: var(--muted); font-weight: 500; }
.float-card--next { bottom: -14px; right: -18px; max-width: 235px; align-items: flex-start; animation: floaty 6.5s ease-in-out infinite .8s; }
.float-card--next strong { display: block; font-size: .85rem; color: var(--heading); }
.float-card--next span { font-size: .76rem; color: var(--muted); }
.fc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grad-brand); flex-shrink: 0; box-shadow: 0 0 0 4px rgba(124,58,237,.15); margin-top: .3rem; }

/* ---------- Trust ---------- */
.trust { text-align: center; padding-top: 22px; border-top: 1px solid var(--bg-line); margin-top: 10px; }
.trust > span { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.trust-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2rem; margin-top: 1rem; }
.trust-logos span { font-family: var(--font-head); font-weight: 700; color: var(--muted); font-size: 1.02rem; opacity: .85; }

/* ---------- Secciones ---------- */
.section { padding: 92px 0; }
.section-alt { background: var(--bg-soft); }
.section-head { max-width: 40rem; margin: 0 auto 3rem; text-align: center; }
.kicker { font-family: var(--font-head); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--violet-500); }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; margin: .7rem 0 .8rem; }
.section-head p { color: var(--slate); font-size: 1.06rem; }

/* ---------- Características ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.feature {
  background: var(--card); border: 1px solid var(--bg-line); border-radius: var(--radius); padding: 1.8rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.feature-ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(192,38,211,.12)); margin-bottom: 1.1rem;
}
.feature-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--violet-500); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.feature p { color: var(--slate); font-size: .96rem; }

/* ---------- Tabs / Módulos ---------- */
.tab-buttons { display: inline-flex; flex-wrap: wrap; gap: .3rem; background: var(--card); border: 1px solid var(--bg-line); border-radius: 999px; padding: .35rem; margin: 0 auto 2rem; box-shadow: var(--shadow-sm); }
.tabs { text-align: center; }
.tab-btn { font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--slate); background: none; border: 0; padding: .6rem 1.3rem; border-radius: 999px; cursor: pointer; transition: .2s; }
.tab-btn:hover { color: var(--heading); }
.tab-btn.is-active { background: var(--grad-brand); color: #fff; box-shadow: 0 6px 16px rgba(124,58,237,.3); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none; } }
.tab-content {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; text-align: left;
  background: var(--card); border: 1px solid var(--bg-line); border-radius: var(--radius-lg); padding: 2.6rem; box-shadow: var(--shadow-sm);
}
.tab-content h3 { font-size: 1.6rem; margin-bottom: .8rem; }
.tab-content > div > p { color: var(--slate); margin-bottom: 1.2rem; }

.check-list { list-style: none; display: grid; gap: .65rem; }
.check-list li { position: relative; padding-left: 1.9rem; color: var(--ink); font-size: .98rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 6px;
  background: rgba(124,58,237,.12);
}
.check-list li::after {
  content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 5px;
  border-left: 2px solid var(--violet-500); border-bottom: 2px solid var(--violet-500); transform: rotate(-45deg);
}

/* ---------- Pasos ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.step { position: relative; background: var(--card); border: 1px solid var(--bg-line); border-radius: var(--radius); padding: 2rem 1.8rem; }
.step-num {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--grad-brand); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem;
  margin-bottom: 1.1rem; box-shadow: 0 8px 18px rgba(124,58,237,.3);
}
.step h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.step p { color: var(--slate); font-size: .96rem; }

/* ---------- Franja de estadísticas ---------- */
.stats-band { background: var(--ink-800); color: #fff; padding: 64px 0; position: relative; overflow: hidden; }
.stats-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 120% at 85% 0%, rgba(192,38,211,.3), transparent 60%); }
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; background: linear-gradient(120deg,#fff,#D8B4FE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: #BDB2D6; font-size: .95rem; }

/* ---------- Cita / origen ---------- */
.quote { max-width: 46rem; margin: 0 auto; text-align: center; position: relative; }
.quote-mark { font-family: var(--font-head); font-size: 5rem; line-height: .6; color: var(--violet-400); opacity: .55; }
.quote blockquote { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.3rem,2.6vw,1.8rem); color: var(--heading); margin: .5rem 0 1.6rem; letter-spacing: -.01em; }
.quote figcaption { display: inline-flex; align-items: center; gap: .8rem; }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font-family: var(--font-head); font-weight: 700; }
.quote figcaption span:last-child { text-align: left; }
.quote figcaption strong { display: block; color: var(--heading); }
.quote figcaption em { font-style: normal; color: var(--muted); font-size: .9rem; }

/* ---------- Preguntas frecuentes ---------- */
.faq { max-width: 48rem; margin: 0 auto; display: grid; gap: .8rem; }
.faq-item { background: var(--card); border: 1px solid var(--bg-line); border-radius: 16px; padding: .2rem 1.3rem; transition: border-color .2s ease, box-shadow .2s ease; }
.faq-item[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: 1.04rem; color: var(--heading);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: .2rem; top: 1.45rem; width: 10px; height: 10px;
  border-right: 2px solid var(--violet-500); border-bottom: 2px solid var(--violet-500);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item p { color: var(--slate); font-size: .98rem; padding-bottom: 1.2rem; }

/* ---------- Precios ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.price-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--bg-line); border-radius: var(--radius-lg); padding: 2rem 1.8rem; }
.price-card h3 { font-size: 1.3rem; }
.price-desc { color: var(--slate); font-size: .92rem; margin: .4rem 0 1.2rem; min-height: 2.6em; }
.price { font-family: var(--font-head); font-weight: 800; font-size: 3rem; color: var(--heading); margin-bottom: 1.4rem; letter-spacing: -.03em; }
.price .cur { font-size: 1.4rem; vertical-align: super; margin-right: .1rem; }
.price .per { font-size: 1rem; font-weight: 500; color: var(--muted); }
.price--custom { font-size: 2rem; }
.price-card .check-list { margin-bottom: 1.6rem; }
.price-card--featured {
  border: 1.5px solid transparent; background:
    linear-gradient(var(--card),var(--card)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: var(--shadow-lg); position: relative; transform: translateY(-8px);
}
.badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad-brand); color: #fff; font-family: var(--font-head); font-weight: 600;
  font-size: .74rem; padding: .35rem .9rem; border-radius: 999px; box-shadow: 0 6px 16px rgba(124,58,237,.35);
}
.price-note { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 1.4rem; }

/* ---------- CTA ---------- */
.cta { padding: 92px 0; }
.cta-inner {
  position: relative; overflow: hidden; text-align: center;
  background: var(--ink-800); color: #fff; border-radius: 32px; padding: 4rem 2rem;
}
.cta-glow { position: absolute; inset: 0; background: radial-gradient(50% 90% at 50% 0%, rgba(192,38,211,.38), transparent 60%); }
.cta-inner > * { position: relative; }
.cta-inner h2 { color: #fff; font-size: clamp(1.8rem,3.4vw,2.6rem); }
.cta-inner p { color: #C9BFE0; max-width: 38rem; margin: 1rem auto 2rem; }
.cta-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; max-width: 640px; margin: 0 auto; }
.cta-input {
  width: 100%; min-width: 0; padding: .9rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #fff; font-family: var(--font-body); font-size: .95rem;
}
.cta-input--full { grid-column: 1 / -1; }
.cta-input::placeholder { color: #A99FC2; }
.cta-input:focus { outline: none; border-color: var(--violet-400); background: rgba(255,255,255,.14); }
.cta-form textarea.cta-input { border-radius: 22px; min-height: 7rem; resize: vertical; line-height: 1.55; }
.cta-form select.cta-input {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23A99FC2' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 12px 8px;
}
.cta-form select.cta-input option { background: var(--ink-800); color: #fff; }
.cta-form button[disabled] { opacity: .6; cursor: progress; transform: none; }
/* Honeypot: fuera de la vista pero rellenable por un bot */
.cta-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cta-status { min-height: 1.25rem; margin: .1rem 0 0; font-size: .9rem; text-align: center; }
.cta-status.is-sending { color: #C9BFE0; }
.cta-status.is-ok { color: #7BE0A8; }
.cta-status.is-error { color: #FF9EC4; }
.cta-note { display: block; margin-top: 1rem; color: #A99FC2; font-size: .85rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-900); color: #B7ADCE; padding: 68px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-brand p { margin-top: 1rem; font-size: .95rem; max-width: 22rem; }
.footer-c4m { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.3rem; color: #9C92B8; font-size: .82rem; transition: color .2s ease, opacity .2s ease; }
.footer-c4m:hover { color: #fff; }
.footer-c4m-logo { height: 20px; width: auto; opacity: .9; transition: opacity .2s ease; }
.footer-c4m:hover .footer-c4m-logo { opacity: 1; }
.footer-note { display: block; color: #8C82A8; font-size: .85rem; line-height: 1.5; margin-bottom: .7rem; }
.footer-col h4 { color: #fff; font-size: .95rem; margin-bottom: 1rem; }
.footer-col a { display: block; padding: .32rem 0; color: #9C92B8; font-size: .93rem; transition: color .2s; }
.footer-col a:hover { color: var(--violet-400); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; color: #8C82A8; }
.footer-bottom a { color: var(--violet-400); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-visual .browser-frame, .float-card { animation: none !important; }
}

/* ============================================================
   Componentes propios: marco de navegador y maquetas de la app
   ============================================================ */

.browser-frame {
  background: var(--card); border: 1px solid var(--bg-line); border-radius: 16px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.bf-bar {
  display: flex; align-items: center; gap: .6rem; height: 40px; padding: 0 .9rem;
  background: var(--bg-soft); border-bottom: 1px solid var(--bg-line);
}
.bf-dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.bf-dots i { width: 11px; height: 11px; border-radius: 50%; background: #D8D2EA; }
.bf-dots i:nth-child(1) { background: #FF5F57; }
.bf-dots i:nth-child(2) { background: #FEBC2E; }
.bf-dots i:nth-child(3) { background: #28C840; }
.bf-url {
  font-family: var(--font-body); font-size: .78rem; color: var(--muted);
  background: var(--card); border: 1px solid var(--bg-line); border-radius: 8px;
  padding: .18rem .9rem; margin-inline: auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.browser-frame > img { display: block; width: 100%; height: auto; }
.hero-visual .browser-frame { animation: floaty 7s ease-in-out infinite; }

/* ---------- Recorrido (filas alternadas) ---------- */
.showcase { display: grid; gap: 5rem; }
.show-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center; }
.show-row--rev .show-copy { order: 2; }
.show-row--rev .show-visual { order: 1; }
.show-kicker { font-family: var(--font-head); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--violet-500); }
.show-copy h3 { font-size: clamp(1.45rem, 2.6vw, 2rem); margin: .6rem 0 .9rem; }
.show-copy > p { color: var(--slate); font-size: 1.05rem; margin-bottom: 1.4rem; }
.show-visual { position: relative; }
.show-visual .browser-frame { transition: transform .3s ease, box-shadow .3s ease; }
.show-row:hover .show-visual .browser-frame { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(27,15,59,.22); }

/* ---------- Maquetas de la aplicación ----------
   Dibujos de la interfaz en HTML/CSS (no son capturas). Todo se escala con
   --mk, así que la misma maqueta sirve en el hero y dentro de una pestaña. */
.mk { --mk: 1; font-family: var(--font-body); background: var(--card); color: var(--ink);
      font-size: calc(12px * var(--mk)); line-height: 1.45; }
.mk--sm { --mk: .86; }

.mk-app { display: grid; grid-template-columns: calc(132px * var(--mk)) 1fr; min-height: calc(300px * var(--mk)); }
.mk-side { background: var(--ink-900); color: #B9AEDA; padding: calc(12px * var(--mk)); display: flex; flex-direction: column; gap: calc(3px * var(--mk)); }
.mk-brand { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: calc(13px * var(--mk)); margin-bottom: calc(8px * var(--mk)); }
.mk-brand span { color: var(--violet-400); }
.mk-group { font-size: calc(8.5px * var(--mk)); letter-spacing: .09em; text-transform: uppercase; color: #6F6491; margin: calc(9px * var(--mk)) 0 calc(3px * var(--mk)); font-weight: 700; }
.mk-item { display: flex; align-items: center; gap: calc(7px * var(--mk)); padding: calc(4px * var(--mk)) calc(6px * var(--mk)); border-radius: calc(7px * var(--mk)); white-space: nowrap; }
.mk-item i { width: calc(6px * var(--mk)); height: calc(6px * var(--mk)); border-radius: 2px; background: currentColor; opacity: .55; flex: none; }
.mk-item.is-on { background: rgba(124,58,237,.28); color: #fff; }

.mk-main { padding: calc(14px * var(--mk)); display: flex; flex-direction: column; gap: calc(10px * var(--mk)); min-width: 0; background: var(--card); }
.mk-bar { display: flex; align-items: center; gap: calc(8px * var(--mk)); }
.mk-title { font-family: var(--font-head); font-weight: 700; color: var(--heading); font-size: calc(15px * var(--mk)); }
.mk-chip { font-size: calc(9.5px * var(--mk)); padding: calc(2px * var(--mk)) calc(8px * var(--mk)); border-radius: 999px; background: rgba(124,58,237,.12); color: var(--violet-600); white-space: nowrap; }
.mk-chip--amber { background: rgba(232,161,58,.16); color: #9A6410; }
.mk-chip--green { background: rgba(18,160,92,.14); color: #0B7A45; }
.mk-btn { margin-left: auto; font-family: var(--font-head); font-weight: 600; font-size: calc(10px * var(--mk));
  padding: calc(5px * var(--mk)) calc(11px * var(--mk)); border-radius: 999px; background: var(--grad-brand); color: #fff; white-space: nowrap; }

.mk-rows { display: flex; flex-direction: column; gap: calc(6px * var(--mk)); }
.mk-row { display: flex; align-items: center; gap: calc(9px * var(--mk)); padding: calc(7px * var(--mk)) calc(9px * var(--mk));
  border: 1px solid var(--bg-line); border-radius: calc(9px * var(--mk)); background: var(--card); }
.mk-row.is-live { border-color: var(--violet-500); box-shadow: 0 0 0 calc(2px * var(--mk)) rgba(124,58,237,.14); }
.mk-num { width: calc(16px * var(--mk)); font-family: var(--font-head); font-weight: 700; color: var(--violet-500); text-align: right; flex: none; }
.mk-kind { font-size: calc(8.5px * var(--mk)); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); width: calc(52px * var(--mk)); flex: none; }
.mk-name { font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-sub { color: var(--muted); font-size: calc(10px * var(--mk)); margin-left: auto; white-space: nowrap; }
.mk-note { margin-top: calc(3px * var(--mk)); font-size: calc(10px * var(--mk)); color: #8A5A00;
  border-left: calc(2px * var(--mk)) solid var(--amber-500); background: rgba(232,161,58,.10);
  padding: calc(3px * var(--mk)) calc(7px * var(--mk)); border-radius: 0 calc(5px * var(--mk)) calc(5px * var(--mk)) 0; }
.mk-stack { display: flex; flex-direction: column; min-width: 0; flex: 1; }

/* Pantalla de proyección */
.mk-screen { position: relative; aspect-ratio: 16/9; border-radius: calc(10px * var(--mk)); overflow: hidden;
  background: radial-gradient(90% 120% at 20% 0%, #3B1D6E 0%, #150B2D 60%, #0B0618 100%);
  display: grid; place-items: center; text-align: center; padding: calc(18px * var(--mk)); }
.mk-screen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 90%, rgba(192,38,211,.35), transparent 65%); }
.mk-lyric { position: relative; z-index: 1; font-family: var(--font-head); font-weight: 700; color: #fff;
  font-size: calc(19px * var(--mk)); line-height: 1.35; text-shadow: 0 calc(2px * var(--mk)) calc(14px * var(--mk)) rgba(0,0,0,.5); }
.mk-lyric small { display: block; margin-top: calc(9px * var(--mk)); font-family: var(--font-body); font-weight: 500;
  font-size: calc(10.5px * var(--mk)); color: #CBB8F5; letter-spacing: .04em; }
.mk-live { position: absolute; top: calc(9px * var(--mk)); left: calc(9px * var(--mk)); z-index: 2;
  display: inline-flex; align-items: center; gap: calc(5px * var(--mk)); font-size: calc(9px * var(--mk)); font-weight: 700;
  color: #fff; background: rgba(0,0,0,.35); border-radius: 999px; padding: calc(3px * var(--mk)) calc(8px * var(--mk)); }
.mk-live i { width: calc(6px * var(--mk)); height: calc(6px * var(--mk)); border-radius: 50%; background: #FF4D6D; }

/* Semana (weekplanning) */
.mk-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(5px * var(--mk)); }
.mk-day { border: 1px solid var(--bg-line); border-radius: calc(8px * var(--mk)); padding: calc(6px * var(--mk)) calc(5px * var(--mk));
  min-height: calc(76px * var(--mk)); background: var(--card); }
.mk-day.is-today { border-color: var(--violet-500); }
.mk-dayname { font-size: calc(8.5px * var(--mk)); font-weight: 700; color: var(--muted); text-transform: capitalize; margin-bottom: calc(4px * var(--mk)); }
.mk-act { border-left: calc(3px * var(--mk)) solid var(--c, var(--violet-500)); background: var(--bg-soft);
  border-radius: 0 calc(5px * var(--mk)) calc(5px * var(--mk)) 0; padding: calc(4px * var(--mk)) calc(5px * var(--mk)); margin-bottom: calc(4px * var(--mk)); }
.mk-act b { display: block; font-size: calc(9px * var(--mk)); color: var(--heading); font-weight: 700; }
.mk-act span { display: block; font-size: calc(8.5px * var(--mk)); color: var(--muted); }

/* Equipos / ministerios */
.mk-people { display: flex; flex-direction: column; gap: calc(5px * var(--mk)); }
.mk-person { display: flex; align-items: center; gap: calc(8px * var(--mk)); padding: calc(5px * var(--mk)) calc(7px * var(--mk));
  border-radius: calc(8px * var(--mk)); background: var(--bg-soft); }
.mk-ava { width: calc(20px * var(--mk)); height: calc(20px * var(--mk)); border-radius: 50%; display: grid; place-items: center;
  background: rgba(124,58,237,.16); color: var(--violet-600); font-weight: 700; font-size: calc(8.5px * var(--mk)); flex: none; }
.mk-person b { font-weight: 600; color: var(--heading); font-size: calc(11px * var(--mk)); }
.mk-role { margin-left: auto; font-size: calc(9.5px * var(--mk)); color: var(--muted); }

/* Hoja del orden del culto */
.mk-sheet { background: #fff; color: #221B33; border: 1px solid var(--bg-line); border-radius: calc(8px * var(--mk));
  padding: calc(12px * var(--mk)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.01); }
.mk-sheet-h { display: flex; align-items: baseline; gap: calc(8px * var(--mk)); border-bottom: 1px solid #E7E2F3; padding-bottom: calc(6px * var(--mk)); margin-bottom: calc(8px * var(--mk)); }
.mk-sheet-h b { font-family: var(--font-head); font-size: calc(13px * var(--mk)); color: #1B0F3B; }
.mk-sheet-h span { font-size: calc(9.5px * var(--mk)); color: #8C85A0; margin-left: auto; }
.mk-sheet .mk-row { border: 0; padding: calc(4px * var(--mk)) 0; border-bottom: 1px dashed #EFEAF9; border-radius: 0; }

:root[data-theme="dark"] .mk-sheet { background: #16112A; color: var(--ink); border-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] .mk-sheet-h b { color: var(--heading); }
:root[data-theme="dark"] .mk-sheet .mk-row { border-bottom-color: rgba(255,255,255,.07); }

/* ---------- Ofrendas: el registro y el comprobante ----------
   Una columna de importes tiene que leerse como una columna: mismo sitio,
   alineada a la derecha y sin partirse en dos líneas. Dentro de la hoja
   (.mk-sheet) los colores se heredan, porque esa hoja cambia con el tema. */
.mk-amount { margin-left: auto; font-family: var(--font-head); font-weight: 700;
  font-size: calc(11.5px * var(--mk)); color: var(--heading); white-space: nowrap; }
.mk-sheet .mk-amount { color: inherit; }
/* Deja que el reparto se lea entero: que una colecta se divida entre tres
   ofrendas es justo lo que esta fila tiene que contar, así que envuelve en vez
   de cortarse con puntos suspensivos. */
.mk-split { margin-top: calc(2px * var(--mk)); font-size: calc(9.5px * var(--mk)); color: var(--muted); line-height: 1.35; }
.mk-sheet-total { display: flex; align-items: baseline; gap: calc(8px * var(--mk));
  margin-top: calc(8px * var(--mk)); padding-top: calc(6px * var(--mk)); border-top: 1px solid #E7E2F3; }
.mk-sheet-total span { font-family: var(--font-head); font-size: calc(9.5px * var(--mk));
  text-transform: uppercase; letter-spacing: .06em; color: #8C85A0; }
.mk-sheet-total b { margin-left: auto; font-family: var(--font-head); font-size: calc(15px * var(--mk)); color: var(--violet-600); }
/* El importe en letras: lo que convierte un papel en un comprobante. */
.mk-words { margin-top: calc(8px * var(--mk)); font-size: calc(9px * var(--mk)); letter-spacing: .02em;
  padding: calc(5px * var(--mk)) calc(8px * var(--mk)); border: 1px solid #E7E2F3;
  border-radius: calc(5px * var(--mk)); background: rgba(124,58,237,.05); }
:root[data-theme="dark"] .mk-sheet-total { border-top-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] .mk-sheet-total span { color: var(--muted); }
:root[data-theme="dark"] .mk-words { border-color: rgba(255,255,255,.08); background: rgba(167,139,250,.08); }

/* ---------- Módulos por rol: maqueta dentro del marco ---------- */
.tab-visual { min-width: 0; }
.browser-frame--sm { width: 100%; }

/* ---------- Catálogo de módulos ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cat-item { display: flex; gap: .8rem; align-items: flex-start; background: var(--card); border: 1px solid var(--bg-line); border-radius: 14px; padding: 1rem 1.1rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cat-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.cat-ico { font-size: 1.5rem; line-height: 1.1; flex-shrink: 0; }
.cat-item strong { display: block; font-family: var(--font-head); font-size: .98rem; color: var(--heading); margin-bottom: .15rem; }
.cat-item span { font-size: .82rem; color: var(--slate); line-height: 1.4; }

/* ---------- Capacidades transversales ---------- */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.cap-card { background: var(--card); border: 1px solid var(--bg-line); border-radius: var(--radius); padding: 1.8rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cap-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.cap-ico { font-size: 2rem; display: block; margin-bottom: .8rem; line-height: 1; }
.cap-card h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.cap-card p { color: var(--slate); font-size: .94rem; }

/* ============================================================
   Responsive
   ============================================================ */
/* La cabecera, de ancho a estrecho:
   - hasta 1240px caben los seis enlaces tal cual;
   - entre 1240 y 1080 se aprietan un poco;
   - por debajo de 1080 se van al botón de menú. Ese es el punto en el que el
     enlace más largo del idioma más largo (español) ya se montaba encima de la
     marca y del selector de idioma, porque los enlaces no parten palabra.
   La barra conserva idioma, tema y el botón de demo: lo único que se pliega es
   la navegación. */
@media (max-width: 1240px) {
  .nav { gap: 1rem; }
  .nav a { font-size: .9rem; }
}

@media (max-width: 1080px) {
  .header-inner { flex-wrap: wrap; }
  .nav { display: none; }
  .nav-toggle { display: flex; }
  /* Sin el menú en medio, el reparto automático dejaba los botones desperdigados
     por toda la barra: se agrupan a la derecha. */
  .header-tools { margin-left: auto; }
  /* El menú abierto es una fila más de la cabecera (order + base 100%), así que
     su altura la pone el contenido y no un cálculo fijo. */
  .site-header.nav-open .nav {
    display: flex; flex-direction: column; order: 3; flex-basis: 100%;
    gap: .2rem; padding: .6rem 0 1.1rem; border-top: 1px solid var(--bg-line);
  }
  .site-header.nav-open .nav a { padding: .5rem 0; font-size: .98rem; }
  /* El subrayado del enlace no tiene sentido en una lista vertical. */
  .site-header.nav-open .nav a::after { display: none; }
}

/* Más abajo la barra va cediendo lo que ya no cabe al lado de la marca, y cada
   pieza reaparece como una fila del menú abierto. En el teléfono estrecho quedan
   solo la marca y el botón de menú, que es lo que cabe de verdad. */
@media (max-width: 680px) {
  .header-actions { display: none; }
  .site-header.nav-open .header-actions {
    display: flex; order: 5; flex-basis: 100%; padding-bottom: 1.2rem;
  }
  .site-header.nav-open .header-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .header-tools { display: none; }
  .site-header.nav-open .header-tools {
    display: flex; order: 4; flex-basis: 100%; margin-left: 0; padding-bottom: 1rem;
  }
}

@media (max-width: 960px) {
  .feature-grid, .steps, .stats-grid, .price-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-visual { max-width: 560px; margin-inline: auto; }
  .tab-content { grid-template-columns: 1fr; }
  .tab-visual { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .price-card--featured { transform: none; }
  .showcase { gap: 3rem; }
  .show-row, .show-row--rev { grid-template-columns: 1fr; gap: 1.6rem; }
  .show-row--rev .show-copy { order: 2; }
  .show-row--rev .show-visual { order: 1; }
  .show-visual { max-width: 620px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .section { padding: 66px 0; }
  .feature-grid, .steps, .stats-grid, .price-grid, .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  /* En el teléfono la maqueta ya es pequeña: las tarjetas flotantes taparían
     justo lo que hay que leer. */
  .float-card { display: none; }
  .cat-grid, .cap-grid { grid-template-columns: 1fr; }
  .bf-url { display: none; }
  /* La maqueta pierde la barra lateral: en el teléfono estorba más de lo que cuenta. */
  .mk-app { grid-template-columns: 1fr; }
  .mk-side { display: none; }
  .mk-week { grid-template-columns: repeat(3, 1fr); }
  .mk-week .mk-day:nth-child(n+7) { display: none; }
}