/* Ekklesia — hoja de estilo del sitio.
 *
 * Vivia dentro de <style> en index.html. Se saco aqui el 2026-11-03 al dejar
 * de ser un sitio de una sola pagina: las paginas de ministerio comparten los
 * tokens, la barra, los botones y el pie.
 *
 * El simbolo de la marca vivia aqui dentro, en base64: 47 KB de los 94 que
 * pesaba esta hoja, y esta hoja BLOQUEA EL PINTADO de todas las paginas. Ahora
 * es `/marca.png`, que el navegador se baja aparte y cachea aparte. Y como
 * solo se usa como mascara —nunca como imagen—, el PNG guarda gris+alfa en vez
 * de color+alfa: 14 KB en lugar de 35, con el alfa identico pixel a pixel.
 *
 * Al estar fuera, el navegador se lo guarda una vez y las demas paginas no lo
 * vuelven a bajar.
 */
:root{
    --ink:#0C0B09; --bone:#FDFCF8; --acc:#0E9F6E; --deep:#0A6B4C; --mist:#E3F5EC;
    --char:#3E3B34; --soft:#6B675E; --line:#E9E5DC;
    --cob:#4F74FF; --cobT:#E5EAFD; --cobL:#0B1C4D;
    --vio:#8B5CF6; --vioT:#EFE9FB; --vioL:#2A1259;
    --cor:#F0532D; --corT:#FCEAE3; --corL:#5C1A05;
    --accL:#073B2A;
    --mono:'Geist Mono',ui-monospace,monospace;
    --swoop:cubic-bezier(.4,0,.1,1);
    --mark:url('/marca.png');
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scrollbar-color:#57534A #DFDACD}
  body{font-family:'Manrope',sans-serif;background:var(--bone);color:var(--ink);
      -webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--acc);color:var(--ink)}
  ::-webkit-scrollbar{width:11px}
  ::-webkit-scrollbar-track{background:#DFDACD}
  ::-webkit-scrollbar-thumb{background:#57534A;border-radius:99px;border:3px solid #DFDACD}
  ::-webkit-scrollbar-thumb:hover{background:var(--deep)}
  :focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:6px}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px}

  .glyph{display:inline-block;aspect-ratio:596/588;background:var(--ink);
    -webkit-mask:var(--mark) center/contain no-repeat;
    mask:var(--mark) center/contain no-repeat}

  /* ── Nav ─────────────────────────────────────────────── */
  nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,border-color .3s;
      border-bottom:1px solid transparent}
  nav.scrolled{background:rgba(253,252,248,.9);backdrop-filter:blur(16px);border-color:var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
  .brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:21px;letter-spacing:-.02em}
  .brand .bmark{width:31px;background:var(--ink);flex-shrink:0}
  .nav-links{display:flex;gap:24px;font-weight:600;font-size:14.5px;color:var(--soft)}
  .nav-links a{transition:color .2s}
  .nav-links a:hover{color:var(--deep)}
  @media(max-width:860px){.nav-links{display:none}}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;font-size:15px;
      padding:13px 24px;border-radius:13px;cursor:pointer;border:none;
      transition:transform .15s,box-shadow .25s,background .2s,border-color .2s,color .2s}
  .btn:active{transform:scale(.97)}
  .btn-acc{background:var(--acc);color:var(--ink)}
  .btn-acc:hover{background:#10B27C;box-shadow:0 10px 24px -8px rgba(14,159,110,.5)}
  .btn-ink{background:var(--ink);color:var(--bone)}
  .btn-ink:hover{background:#292620}
  .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
  .btn-ghost:hover{border-color:var(--deep);color:var(--deep)}
  .btn-oink{background:transparent;color:var(--ink);border:1.5px solid rgba(12,11,9,.35)}
  .btn-oink:hover{border-color:var(--ink)}

  /* ── Hero ────────────────────────────────────────────── */
  .hero{position:relative;min-height:96svh;display:flex;flex-direction:column;justify-content:center;
      text-align:center;padding:clamp(104px,13vh,134px) 0 0;overflow:hidden}
  /* El héroe tiene que caber en una pantalla CON los teléfonos dentro: si no,
     el visitante ve el titular, baja, y se encuentra media app flotando sobre
     el bloque oscuro. Por eso el relleno de abajo se lo come el escaparate,
     que ya se sale por su cuenta. */
  .hero::before{content:"";position:absolute;inset:0;
      background-image:linear-gradient(rgba(12,11,9,.03) 1px,transparent 1px),
                       linear-gradient(90deg,rgba(12,11,9,.03) 1px,transparent 1px);
      background-size:76px 76px;
      -webkit-mask-image:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 80%);
      mask-image:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 80%)}
  .hero .wrap{position:relative;z-index:1}
  h1{font-weight:800;font-size:clamp(38px,5vw,72px);line-height:1.06;letter-spacing:-.03em;
      max-width:19ch;margin:0 auto;text-wrap:balance}
  h1 .w{white-space:nowrap}
  h1 .a1{color:var(--acc)}
  h1 .a2{color:var(--cor)}
  h1 .a3{color:var(--vio)}
  h1 .a4{color:var(--cob)}
  .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:44px}
  .hero-note{margin-top:18px;font-size:13.5px;color:var(--soft)}
  /* Donde se crea la cuenta. Desde que iOS no puede dar de alta una
     organizacion (App Review 3.1.1, 2026-11-02), esta web es la unica
     puerta y hay que decirlo antes de que alguien baje la app.
     OJO: se dice «desde esta pagina», no «desde la computadora». El alta
     funciona igual en el navegador del telefono —el candado es de la app,
     no del aparato— y mandar a un pastor a buscar una laptop seria
     friccion inventada. */
  .hero-where{margin:14px auto 0;max-width:540px;font-size:14.5px;line-height:1.55;color:var(--char)}
  .hero-where b{color:var(--deep);font-weight:700}
  .rise{opacity:0;transform:translateY(22px);animation:rise .8s cubic-bezier(.2,.8,.25,1) both}
  @keyframes rise{to{opacity:1;transform:none}}

  /* ── Encabezados de sección ──────────────────────────── */
  /* Lo único que queda del mosaico 3D que se armaba con el scroll. Su
     bloque traía de paso los encabezados de sección, y los usa media
     portada; el resto —`.conv`, `.mosaic`, `.tile`, `.persp`, `.cdot`,
     `.cskip` y los gestos de las siete fichas— se fue con él cuando el
     carrusel de cartas ocupó su sitio. Eran 179 líneas que seguían
     bajándose en cada página sin pintar nada. */
  h2.title{font-weight:800;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
  .sub{font-size:16.5px;color:var(--soft);max-width:600px;margin:12px auto 0;line-height:1.55}

  /* Los puestos de cada ministerio, en una línea. */
  .roles{display:flex;flex-wrap:wrap;gap:8px}
  /* ── Statement ───────────────────────────────────────── */
  .statement{padding:120px 0}
  .statement p{font-weight:800;font-size:clamp(26px,3.6vw,48px);line-height:1.18;letter-spacing:-.02em;
      max-width:26ch;margin:0 auto;text-align:center;text-wrap:balance}
  .statement .s1{color:var(--acc)}
  .statement .s2{color:var(--vio)}
  .statement .s3{color:var(--cor)}
  .statement .foot{text-align:center;margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--soft)}

  /* ── Precios ─────────────────────────────────────────── */
  .band{padding:0 0 110px}
  .center{text-align:center}
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px;align-items:stretch}
  @media(max-width:880px){.pgrid{grid-template-columns:1fr}}
  .price{background:#fff;border-radius:20px;padding:34px;border:1.5px solid var(--line);display:flex;flex-direction:column}
  .pname{font-weight:800;font-size:20px}
  .pamt{font-weight:800;font-size:46px;letter-spacing:-.02em;margin:14px 0 2px}
  .pamt span{font-size:16px;font-weight:600;color:var(--soft)}
  .plim{font-family:var(--mono);font-size:11.5px;color:var(--soft);margin-bottom:22px}
  .price ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px}
  .price li{display:flex;gap:10px;font-size:14.5px;color:var(--char)}
  .price li svg{flex-shrink:0;margin-top:2px}
  .price .btn{margin-top:auto;width:100%}
  .price.feat{background:var(--acc);border-color:var(--acc);position:relative}
  .price.feat .pname,.price.feat .pamt{color:var(--ink)}
  .price.feat .pamt span{color:rgba(12,11,9,.6)}
  .price.feat .plim{color:rgba(12,11,9,.65)}
  .price.feat li{color:var(--ink);font-weight:600}
  .price.feat .tag{position:absolute;top:-13px;left:34px;background:var(--ink);color:var(--bone);
      font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 13px;border-radius:8px;font-weight:800}
  .netline{margin-top:30px;font-size:16.5px;color:var(--char);text-align:center;
    font-weight:700}
  .netsub{margin-top:9px;font-size:14.5px;font-weight:400;color:var(--soft);
    max-width:52ch;margin-inline:auto;line-height:1.55}
  .netsub b{color:var(--char);font-weight:700}
  .netline a{color:var(--deep);font-weight:700}
  .netline a:hover{text-decoration:underline;text-underline-offset:3px}

  /* ── FAQ ─────────────────────────────────────────────── */
  .faq{padding:0 0 110px}
  .faq-list{max-width:760px;margin:44px auto 0;border-top:1px solid var(--line)}
  .faq-list details{border-bottom:1px solid var(--line)}
  .faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
      padding:20px 4px;font-weight:700;font-size:17px}
  .faq-list summary::-webkit-details-marker{display:none}
  .faq-list summary .ic{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);
      display:grid;place-items:center;font-weight:800;color:var(--deep);transition:transform .35s var(--swoop),background .3s}
  .faq-list details[open] summary .ic{transform:rotate(45deg);background:var(--mist);border-color:var(--mist)}
  .faq-list .ans{padding:0 40px 22px 4px;font-size:15.5px;line-height:1.65;color:var(--char);max-width:66ch}
  .faq-list .ans a{color:var(--deep);font-weight:700}

  /* ── Contacto ────────────────────────────────────────── */
  /* El título estaba centrado encima de una rejilla de dos columnas, así que
     no pertenecía a ninguna de las dos y la columna izquierda se quedaba a
     media altura con un socavón debajo. Ahora el título ENTRA en su columna y
     el bloque entero se alinea con el formulario. */
  .contact{padding:clamp(76px,9vh,104px) 0 clamp(88px,10vh,116px)}
  .cgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;
    align-items:center}
  @media(max-width:880px){.cgrid{grid-template-columns:1fr;gap:32px;
    align-items:start}}
  .cinfo .title{text-align:left;margin:0 0 16px;max-width:none}
  .cinfo p{font-size:16.5px;line-height:1.65;color:var(--char);max-width:44ch}
  /* El correo, en una tarjeta: era un enlace suelto y es la salida rápida
     para quien no quiere rellenar cuatro campos. */
  .cinfo .mail{display:inline-flex;align-items:center;gap:11px;margin-top:24px;
    font-weight:800;font-size:17px;color:var(--deep);background:var(--bone);
    border:1.5px solid var(--line);border-radius:14px;padding:13px 18px;
    transition:border-color .2s,background .2s,transform .2s var(--swoop)}
  .cinfo .mail:hover{border-color:var(--acc);background:#fff;
    transform:translateY(-2px)}
  .cinfo .hint{margin-top:22px;font-size:13.5px;color:var(--soft);max-width:42ch;
    line-height:1.6;border-left:2px solid var(--line);padding-left:14px}
  .cform{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:30px}
  .cform label{display:block;font-weight:700;font-size:13.5px;margin:16px 0 7px}
  .cform label:first-of-type{margin-top:0}
  .cform input,.cform textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);
      border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;background:var(--bone);
      transition:border-color .2s}
  .cform input:focus,.cform textarea:focus{outline:none;border-color:var(--acc)}
  .cform textarea{min-height:110px;resize:vertical}
  .cform .btn{width:100%;margin-top:22px}
  .cform .legal{font-size:12px;color:var(--soft);margin-top:12px;line-height:1.5}
  .cform .legal a{color:var(--deep);font-weight:700}
  .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

  /* ── Avisos (mismo lenguaje que la app) ───────────────── */
  /* Anclados arriba. El host no captura clics; solo la tarjeta. */
  /* 70px es el alto de .nav-in: el aviso va por DEBAJO de la barra, no dentro. */
  .toasts{position:fixed;top:0;left:0;right:0;z-index:999;display:flex;
    flex-direction:column;align-items:center;gap:8px;padding:76px 14px 0;
    pointer-events:none}
  .toast{pointer-events:auto;display:flex;align-items:center;gap:11px;
    width:100%;max-width:460px;box-sizing:border-box;
    background:#fff;border:1px solid var(--line);border-radius:16px;
    padding:11px 14px 11px 12px;box-shadow:0 8px 24px rgba(12,11,9,.10);
    font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);
    cursor:pointer;
    animation:toast-in .26s cubic-bezier(.2,.8,.2,1) both}
  .toast.out{animation:toast-out .18s ease-in both}
  .toast .chip{flex:none;width:30px;height:30px;border-radius:10px;
    display:grid;place-items:center;font-size:15px;font-weight:800}
  .toast.ok  .chip{background:var(--mist);color:var(--deep)}
  .toast.err .chip{background:#F6EAE6;color:#A34A31}
  @keyframes toast-in{from{opacity:0;transform:translateY(-14px)}
    to{opacity:1;transform:none}}
  @keyframes toast-out{to{opacity:0;transform:translateY(-10px)}}
  @media (prefers-reduced-motion:reduce){
    .toast,.toast.out{animation:none}
  }

  /* ── Cierre ──────────────────────────────────────────── */
  /* Era un rectángulo verde plano de borde a borde. Ahora tiene luz arriba y
     peso abajo —el relleno esmeralda del manual, pero con volumen— y dos
     anillos muy tenues que salen del símbolo, como los de la portada de un
     servicio en la app. */
  .finale{position:relative;overflow:hidden;color:var(--ink);text-align:center;
    padding:clamp(88px,11vh,124px) 28px;
    background:
      radial-gradient(64% 58% at 50% -4%,#13B983 0%,transparent 60%),
      radial-gradient(130% 90% at 50% 118%,rgba(7,59,42,.42),transparent 62%),
      var(--acc)}
  /* Los anillos son decoración: fuera del alcance de quien lee con lector. */
  .finale::before,.finale::after{content:"";position:absolute;left:50%;
    border-radius:50%;border:1px solid rgba(12,11,9,.07);pointer-events:none;
    transform:translateX(-50%)}
  .finale::before{width:520px;height:520px;top:-178px}
  .finale::after{width:860px;height:860px;top:-348px}
  .finale > *{position:relative;z-index:1}

  /* El medallón: el símbolo deja de flotar suelto sobre el verde. */
  .finale .medalla{width:112px;height:112px;margin:0 auto;border-radius:50%;
    display:grid;place-items:center;background:rgba(253,252,248,.14);
    box-shadow:0 0 0 1px rgba(12,11,9,.09),
               inset 0 1px 0 rgba(253,252,248,.45),
               0 18px 40px -22px rgba(7,59,42,.75)}
  .finale .glyph{width:58px;background:var(--ink)}

  .finale h2{font-weight:800;font-size:clamp(34px,5.2vw,64px);
    letter-spacing:-.032em;line-height:1.01;margin:30px auto 0;max-width:15ch;
    text-wrap:balance}
  .finale p{color:rgba(12,11,9,.78);font-size:18px;font-weight:600;
    margin:20px auto 0;max-width:480px;line-height:1.6}
  /* La letra pequeña, como letra pequeña. Nada de píldoras. */
  .finale .finale-where{margin:22px auto 0;max-width:46ch;font-size:14px;
    font-weight:600;color:rgba(12,11,9,.62);line-height:1.6}
  .finale .finale-where b{font-weight:800;color:rgba(12,11,9,.82)}
  .finale .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
    margin-top:34px}
  .finale .cta .btn{transition:transform .2s var(--swoop),box-shadow .25s,
    background .2s,border-color .2s,color .2s}
  .finale .cta .btn:hover{transform:translateY(-2px)}
  .finale .cta .btn-ink:hover{box-shadow:0 14px 30px -14px rgba(7,59,42,.9)}
  .finale .cta .btn-oink{border-color:rgba(12,11,9,.3);
    background:rgba(253,252,248,.18)}
  .finale .cta .btn-oink:hover{background:rgba(253,252,248,.42);
    border-color:rgba(12,11,9,.5)}
  @media(max-width:640px){
    .finale .medalla{width:92px;height:92px}
    .finale .glyph{width:48px}
    .finale::after{display:none}
  }

  footer{background:var(--bone);border-top:1px solid var(--line);padding:44px 0 36px;color:var(--soft);font-size:14px}
  .foot-top{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:26px}
  .foot-brand{display:flex;align-items:center;gap:11px;font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
  .foot-brand .bmark{width:26px;background:var(--ink)}
  .foot-cols{display:flex;gap:56px;flex-wrap:wrap}
  .fcol{display:flex;flex-direction:column;gap:10px;min-width:130px}
  .fcol b{color:var(--ink);font-size:13px;font-weight:800;margin-bottom:2px}
  .fcol a{transition:color .2s}
  .fcol a:hover{color:var(--deep)}
  .foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:34px;padding-top:20px;
      border-top:1px solid var(--line);font-size:13px}

  /* Powered by VCL Software — el guiño a la empresa detrás del producto.
     Discreto en reposo y vivo al pasar: el pie no es sitio para gritar. */
  .vcl{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--soft);
      font-weight:700;text-decoration:none;position:relative;padding:2px 0}
  .vcl-lead{opacity:.72;transition:opacity .35s var(--swoop)}
  .vcl-name{position:relative;display:inline-block;color:var(--char);
      transition:color .35s var(--swoop),transform .35s var(--swoop)}
  .vcl-line{position:absolute;left:0;right:0;bottom:-3px;height:1.5px;border-radius:2px;
      background:linear-gradient(90deg,var(--acc),var(--vio),var(--cor));
      transform:scaleX(0);transform-origin:left;transition:transform .45s var(--swoop)}
  .vcl-spark{width:6px;height:6px;border-radius:50%;background:var(--acc);
      opacity:0;transform:scale(.4);transition:opacity .35s var(--swoop),transform .35s var(--swoop)}
  .vcl:hover .vcl-lead,.vcl:focus-visible .vcl-lead{opacity:1}
  .vcl:hover .vcl-name,.vcl:focus-visible .vcl-name{color:var(--ink);transform:translateY(-1px)}
  .vcl:hover .vcl-line,.vcl:focus-visible .vcl-line{transform:scaleX(1)}
  .vcl:hover .vcl-spark,.vcl:focus-visible .vcl-spark{opacity:1;transform:scale(1);
      animation:vclPulse 1.6s ease-in-out infinite}
  @keyframes vclPulse{0%,100%{box-shadow:0 0 0 0 rgba(14,159,110,.45)}50%{box-shadow:0 0 0 5px rgba(14,159,110,0)}}

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .rise{opacity:1;transform:none}
    .vcl-line{transform:scaleX(1)}
    .vcl-spark{opacity:1;transform:scale(1)}
  }

/* ════════════════════════════════════════════════════════════════════
   PAGINAS DE MINISTERIO  (/ministerios/…)
   Añadido el 2026-11-03, al dejar de ser un sitio de una sola pagina.
   Cada ministerio lleva su color: musica esmeralda, media violeta,
   audio azul. El acento se pone en <body data-min="…">.
   ════════════════════════════════════════════════════════════════════ */
  body[data-min="musica"]{--m:var(--acc);  --mT:var(--mist); --mD:var(--accL)}
  body[data-min="media"] {--m:var(--vio);  --mT:var(--vioT); --mD:var(--vioL)}
  body[data-min="audio"] {--m:var(--cob);  --mT:var(--cobT); --mD:var(--cobL)}
  body[data-min="hub"]   {--m:var(--acc);  --mT:var(--mist); --mD:var(--accL)}

  /* La barra es position:fixed y mide 70px: el primer bloque de cada pagina
     tiene que dejarle sitio o se le mete debajo. Pasaba en movil, donde las
     migas de pan quedaban pisadas por el logo. */
  /* En las paginas de ministerio la barra lleva fondo SIEMPRE. La landing
     se lo pone con JS al bajar (nav.scrolled) y estas paginas no cargan ese
     script: sin esto el contenido se le metia por debajo al hacer scroll y
     el logo quedaba encima del texto. Ademas aqui no hay heroe a sangre que
     justifique la transparencia. */
  body[data-min] nav{background:rgba(253,252,248,.92);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-color:var(--line)}

  .mhero{padding:104px 0 54px;text-align:center}
  .crumbs + .mhero{padding-top:26px}
  /* Aqui habia una pastilla —«● MINISTERIO · MÚSICA», fondo tintado, mono en
     mayusculas, borde redondo entero— encima de cada titulo. Kevin la vetó en
     cuanto la vio: es el adorno que delata una pagina hecha por una maquina, y
     no decia nada que no dijeran ya las migas de pan y el propio titular.
     No volver a ponerla, ni en esta forma ni en la de etiqueta dentro de las
     tarjetas, que era la misma idea en pequeño. */
  .mhero h1{font-size:clamp(34px,4.6vw,62px);max-width:16ch}
  .mhero .sub{font-size:18px;color:var(--char);max-width:620px;margin-top:18px}

  .puestos{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;
    margin-top:30px;max-width:680px;margin-left:auto;margin-right:auto}
  .puesto{background:var(--bone);border:1.5px solid var(--line);
    border-radius:11px;padding:8px 14px;font-size:13.5px;font-weight:600}
  .puesto b{color:var(--mD)}

  .sect{padding:52px 0}
  .sect.alt{background:var(--sheet,#FBFAF5);border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)}
  .sect-head{text-align:center;margin-bottom:34px}
  /* De lado, no centrado. Tres secciones seguidas con el titulo y la bajada
     apilados al medio se leen como la misma seccion repetida; girar una a la
     izquierda le devuelve el ritmo a la pagina. El enlace cae a la derecha
     porque es la salida natural del parrafo, no un boton suelto. */
  .sect-head.lado{text-align:left;display:grid;align-items:end;gap:14px 52px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sect-head.lado .sub{margin:0;max-width:48ch}
  .sect-head.lado .mas{display:inline-flex;align-items:center;gap:8px;
    margin-top:14px;font-size:14.5px;font-weight:700;color:var(--deep);
    transition:gap .2s var(--swoop)}
  .sect-head.lado .mas:hover{gap:13px}
  @media(max-width:860px){
    .sect-head.lado{grid-template-columns:1fr;align-items:start;gap:12px}
  }

  .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
    gap:16px}
  .fcard{background:var(--bone);border:1px solid var(--line);border-radius:17px;
    padding:22px 22px 24px}
  .fcard .ic{width:38px;height:38px;border-radius:11px;background:var(--mT);
    display:flex;align-items:center;justify-content:center;font-size:19px;
    margin-bottom:13px}
  .fcard h3{font-size:16.5px;font-weight:800;letter-spacing:-.015em;margin:0 0 6px}
  .fcard p{font-size:14px;color:var(--soft);line-height:1.6;margin:0}

  /* El encaje entre ministerios: lo que sale de aqui y llega alla. */
  /* En pareja cuando hay sitio: apiladas, dos barras anchas debajo de tres
     tarjetas se leían como un pie de página perdido. */
  .flow{display:grid;gap:14px;margin-top:26px}
  @media(min-width:980px){.flow{grid-template-columns:1fr 1fr}}
  .link{display:flex;gap:16px;align-items:flex-start;background:var(--bone);
    border:1px solid var(--line);border-left:4px solid var(--lc,var(--m));
    border-radius:15px;padding:19px 22px}
  .link .ar{font-size:22px;line-height:1.2;flex:0 0 auto;color:var(--lc,var(--m))}
  .link h3{font-size:15.5px;font-weight:800;margin:0 0 5px;letter-spacing:-.01em}
  .link h3 em{font-style:normal;color:var(--lc,var(--m))}
  .link p{font-size:14px;color:var(--soft);margin:0;line-height:1.6}
  .link.musica{--lc:var(--acc)} .link.media{--lc:var(--vio)}
  .link.audio{--lc:var(--cob)}

  /* Las tarjetas del indice de ministerios. */
  .mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:18px}
  /* En columna y con el enlace empujado abajo: los tres textos tienen largos
     distintos y los «Ver lo que hace…» quedaban a tres alturas. */
  .mtile{display:flex;flex-direction:column;background:var(--bone);
    border:1px solid var(--line);
    border-radius:20px;padding:26px 25px 24px;transition:transform .18s var(--swoop),
    border-color .2s,box-shadow .25s}
  .mtile:hover{transform:translateY(-3px);border-color:var(--tc);
    box-shadow:0 14px 34px rgba(12,11,9,.07)}
  .mtile .ic{width:46px;height:46px;border-radius:14px;background:var(--tt);
    display:flex;align-items:center;justify-content:center;font-size:23px;
    margin-bottom:15px}
  .mtile h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 7px}
  .mtile p{font-size:14.5px;color:var(--soft);line-height:1.6;margin:0 0 14px}
  /* Fichas, no un renglón con puntos: así ninguna palabra se queda huérfana
     al final de la línea y se ve de un vistazo cuántos puestos hay. */
  .mtile .roles{gap:6px}
  .mtile .roles span{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
    text-transform:uppercase;color:var(--td);background:var(--tt);
    border-radius:7px;padding:5px 9px;line-height:1.15}
  /* El enlace, en esmeralda en los tres. El color del ministerio ya lo lleva
     el icono y las fichas; pintar también la acción daba tres verbos de tres
     colores y el manual deja un solo color para actuar. */
  .mtile .go{margin-top:auto;padding-top:18px;font-weight:700;font-size:14px;
    color:var(--deep)}
  .mtile.musica{--tc:var(--acc);--tt:var(--mist);--td:var(--accL)}
  .mtile.media {--tc:var(--vio);--tt:var(--vioT);--td:var(--vioL)}
  .mtile.audio {--tc:var(--cob);--tt:var(--cobT);--td:var(--cobL)}

  /* Ejemplo literal de lo que se comparte por WhatsApp. */
  /* Los emojis de este bloque NO son decoracion: reproducen el texto que la
     app manda de verdad por WhatsApp (ver _buildShareTextForMinistry).
     'Apple Color Emoji' va ANTES del resto para que en Mac, iPhone y iPad se
     dibujen con el juego de iOS. Geist Mono no tiene emojis, asi que el texto
     normal sigue en monoespaciada y solo los emojis caen a la siguiente
     fuente. En Windows y Android no hay nada que hacer: el juego de Apple es
     suyo y no se puede servir desde una web. */
  .chat{background:#0C0B09;border-radius:18px;padding:22px 24px;color:#E8E5DE;
    font-family:'Geist Mono','Apple Color Emoji',ui-monospace,monospace;
    font-size:13px;line-height:1.85;white-space:pre-wrap;overflow-x:auto}
  .chat b{color:var(--m);font-weight:600}

  .mcta{text-align:center;padding:58px 0 66px}
  .mcta h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.025em;
    margin:0 0 12px}
  .mcta .cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;
    margin-top:24px}

  .crumbs{font-size:13px;color:var(--soft);padding:92px 0 0}
  .crumbs a{color:var(--soft)} .crumbs a:hover{color:var(--ink)}

  @media(max-width:620px){
    .mhero{padding:88px 0 40px}
    .sect{padding:40px 0}
    .link{flex-direction:column;gap:9px;padding:17px 18px}
  }

  /* ── Iconos ────────────────────────────────────────────────────────
     Van como mascara, no como <svg> suelto: asi heredan el color del
     ministerio con background y no hay que repetir el trazo en cada
     pagina. Trazo 1.9 y puntas redondas, igual que los checks de la
     tabla de precios. Antes aqui habia emojis y chocaban con todo. */
  .i{display:block;width:19px;height:19px;background:var(--mD,var(--ink));
    -webkit-mask:var(--i) center/contain no-repeat;
    mask:var(--i) center/contain no-repeat}
  .mtile .i{width:23px;height:23px;background:var(--td)}
  .link .i{width:21px;height:21px;background:var(--lc,var(--m))}
  .i-nota{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2018V5l12-2v13'/%3E%3Ccircle%20cx='6'%20cy='18'%20r='3'/%3E%3Ccircle%20cx='18'%20cy='16'%20r='3'/%3E%3C/svg%3E")}
  .i-pantalla{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='3'%20width='20'%20height='14'%20rx='2'/%3E%3Cpath%20d='M8%2021h8M12%2017v4'/%3E%3C/svg%3E")}
  .i-faders{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2021v-7M4%2010V3M12%2021v-9M12%208V3M20%2021v-5M20%2012V3M1.5%2014h5M9.5%208h5M17.5%2016h5'/%3E%3C/svg%3E")}
  .i-grados{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%209h16M4%2015h16M10%203%208%2021M16%203l-2%2018'/%3E%3C/svg%3E")}
  .i-tono{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203v18M7%208l5-5%205%205M7%2016l5%205%205-5'/%3E%3C/svg%3E")}
  .i-reloj{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3%202'/%3E%3C/svg%3E")}
  .i-enlace{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%2013a5%205%200%200%200%207.5.5l3-3a5%205%200%200%200-7-7l-1.7%201.7'/%3E%3Cpath%20d='M14%2011a5%205%200%200%200-7.5-.5l-3%203a5%205%200%200%200%207%207l1.7-1.7'/%3E%3C/svg%3E")}
  .i-ojo{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012s3.6-7%2010-7%2010%207%2010%207-3.6%207-10%207-10-7-10-7Z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E")}
  .i-ojo-no{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012s3.6-7%2010-7%2010%207%2010%207-3.6%207-10%207-10-7-10-7Z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='M3%203l18%2018'/%3E%3C/svg%3E")}
  .i-bloques{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202%202%207l10%205%2010-5-10-5Z'/%3E%3Cpath%20d='m2%2017%2010%205%2010-5'/%3E%3Cpath%20d='m2%2012%2010%205%2010-5'/%3E%3C/svg%3E")}
  .i-apunte{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z'/%3E%3Cpath%20d='M14%202v6h6'/%3E%3Cpath%20d='M8%2013h8M8%2017h5'/%3E%3C/svg%3E")}
  .i-play{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M10.2%208.4v7.2L16%2012z'/%3E%3C/svg%3E")}
  .i-check{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='m8.4%2012.4%202.6%202.6%204.6-5.2'/%3E%3C/svg%3E")}
  .i-relevo{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17%202l4%204-4%204'/%3E%3Cpath%20d='M3%206h18'/%3E%3Cpath%20d='M7%2022l-4-4%204-4'/%3E%3Cpath%20d='M21%2018H3'/%3E%3C/svg%3E")}
  .i-campana{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%208a6%206%200%200%200-12%200c0%207-3%209-3%209h18s-3-2-3-9'/%3E%3Cpath%20d='M13.7%2021a2%202%200%200%201-3.4%200'/%3E%3C/svg%3E")}
  .i-lista{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206h12M9%2012h12M9%2018h12'/%3E%3Ccircle%20cx='4'%20cy='6'%20r='1.3'/%3E%3Ccircle%20cx='4'%20cy='12'%20r='1.3'/%3E%3Ccircle%20cx='4'%20cy='18'%20r='1.3'/%3E%3C/svg%3E")}
  .i-copiar{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='9'%20width='12'%20height='12'%20rx='2'/%3E%3Cpath%20d='M5%2015H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h9a2%202%200%200%201%202%202v1'/%3E%3C/svg%3E")}
  .i-agenda{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M8%203v4M16%203v4M3%2011h18'/%3E%3C/svg%3E")}
  .i-chat{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2011.5a8.4%208.4%200%200%201-9%208.4%208.9%208.9%200%200%201-4-.9L3%2021l1.9-4.6A8.4%208.4%200%200%201%204%2011.5%208.4%208.4%200%200%201%2012.5%203%208.4%208.4%200%200%201%2021%2011.5Z'/%3E%3C/svg%3E")}
  .i-camisa{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.4%206.3%2016%204a4%204%200%200%201-8%200L3.6%206.3a1%201%200%200%200-.5%201.2l1.2%203.6a1%201%200%200%200%201%20.7H7v8a1%201%200%200%200%201%201h8a1%201%200%200%200%201-1v-8h1.7a1%201%200%200%200%201-.7l1.2-3.6a1%201%200%200%200-.5-1.2Z'/%3E%3C/svg%3E")}
  .i-camara{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14.5%204h-5L8%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-4l-1.5-3Z'/%3E%3Ccircle%20cx='12'%20cy='13'%20r='3.4'/%3E%3C/svg%3E")}
  .i-telefono{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='6'%20y='2'%20width='12'%20height='20'%20rx='2.5'/%3E%3Cpath%20d='M11%2018.5h2'/%3E%3C/svg%3E")}
  .i-iglesia{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202v6M9.2%205h5.6'/%3E%3Cpath%20d='m4%2012%208-4%208%204'/%3E%3Cpath%20d='M6%2021V12M18%2021V12M2.5%2021h19'/%3E%3Cpath%20d='M10%2021v-4a2%202%200%200%201%204%200v4'/%3E%3C/svg%3E")}
  .i-va{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012h15M13%206l6%206-6%206'/%3E%3C/svg%3E")}
  .i-viene{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2012H5M11%206l-6%206%206%206'/%3E%3C/svg%3E")}
  .i-ambos{--i:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012h18M7%207l-4%205%204%205M17%207l4%205-4%205'/%3E%3C/svg%3E")}

/* ════════════════════════════════════════════════════════════════════
   MAQUETAS DE PRODUCTO EN LAS PÁGINAS DE MINISTERIO
   ════════════════════════════════════════════════════════════════════
   Por qué existe este bloque: la portada ENSEÑA el producto (la hoja de
   acordes, el chat, las tarjetas de reunión) y las páginas de ministerio lo
   DESCRIBÍAN en rejillas de tarjetitas con un icono. Mismo fondo y misma
   tipografía, pero otro género — y por eso al lado de la portada parecían
   una plantilla.

   Dos diferencias con las maquetas de la portada, a propósito:

   1. Se tiñen con --m / --mT / --mD, el acento del ministerio que ya pone
      body[data-min], en vez de llevar el color cosido a cada clase.
   2. NO dependen del hover: arrancan solas al entrar en pantalla y se
      detienen en cuanto el visitante toca un control, porque esta página se
      lee en el teléfono y ahí no hay cursor que pasar por encima.
   ════════════════════════════════════════════════════════════════════ */

  /* ── Entrada al hacer scroll ──────────────────────────────────────
     La portada la tiene; estas páginas no tenían ni una línea de JS. El
     estado visible se aplica también cuando no hay JS (html.no-js), para no
     esconder nunca contenido que luego nadie pueda volver a mostrar. */
  /* OJO con el nombre: `reveal` ya la usa el guion de la portada para las
     piezas del mosaico 3D. Una regla suelta `.reveal{opacity:0}` se las habria
     comido todas. De ahi `entra`. */
  .entra{opacity:0;transform:translateY(18px);
      transition:opacity .62s var(--swoop),transform .62s var(--swoop)}
  .entra.in{opacity:1;transform:none}
  html.no-js .entra{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){
    .entra{opacity:1;transform:none;transition:none}
  }

  /* ── El marco ─────────────────────────────────────────────────────
     Un solo contenedor para las tres maquetas: así las tres pesan igual en la
     página y se leen como partes del mismo producto. */
  .demo{max-width:720px;margin:0 auto;background:var(--bone);
      border:1px solid var(--line);border-radius:22px;padding:10px;
      box-shadow:0 1px 2px rgba(12,11,9,.04),0 18px 44px -28px rgba(12,11,9,.22)}
  .demo-top{display:flex;align-items:center;gap:10px;padding:8px 12px 12px}
  .demo-top .dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
      text-transform:uppercase;color:var(--soft)}
  .demo-top .dpill{margin-left:auto;font-family:var(--mono);font-size:10.5px;
      font-weight:600;color:var(--mD);background:var(--mT);
      border-radius:7px;padding:5px 11px;white-space:nowrap}
  .demo-note{text-align:center;font-size:13.5px;color:var(--soft);
      margin:14px auto 0;max-width:58ch;line-height:1.6}
  .demo-note b{color:var(--char);font-weight:700}

  /* ── Música: la hoja de acordes, transponible de verdad ───────────
     Los acordes NO están escritos en el HTML: se guardan en grados y se
     calculan, igual que en la app. Es la única forma honesta de enseñar que
     transponer no rompe la canción. Escritos a mano esto sería el dibujo de
     una función, no la función. */
  .hoja{background:#fff;border-radius:15px;padding:18px 20px 16px}
  .hoja .ln{line-height:2.5;margin:0}
  .hoja .wd{font-size:15px;color:var(--char);font-weight:500;position:relative;
      padding-top:17px;display:inline-block;white-space:pre}
  .hoja .wd i{position:absolute;top:0;left:0;font-style:normal;
      font-family:var(--mono);font-size:11px;font-weight:600;color:var(--m);
      transition:opacity .2s var(--swoop),transform .3s var(--swoop)}
  .hoja.cambia .wd i{opacity:0;transform:translateY(-6px)}

  .mandos{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
      padding:14px 4px 4px}
  .mbtn{width:36px;height:36px;border-radius:11px;border:1.5px solid var(--line);
      background:var(--bone);display:grid;place-items:center;font-weight:800;
      font-size:17px;color:var(--mD);cursor:pointer;line-height:1;
      transition:transform .18s var(--swoop),background .25s,border-color .25s}
  .mbtn:hover{transform:scale(1.09);background:var(--mT);border-color:var(--m)}
  .mbtn:active{transform:scale(.96)}
  /* El latido marca el botón justo antes de que la demo se mueva sola. Sin
     esto el cambio parece un fallo de la página, no una pulsación. */
  .mbtn.late{background:var(--mT);border-color:var(--m);transform:scale(1.12)}
  .mtono{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--mD);
      background:var(--mT);border-radius:11px;padding:9px 15px;min-width:96px;
      text-align:center}
  .mnash{margin-left:auto;font-size:11px;font-weight:800;color:var(--mD);
      border:1.5px solid color-mix(in srgb,var(--m) 45%,transparent);
      border-radius:9px;padding:6px 13px;white-space:nowrap}

  /* ── Media: la pantalla de proyección ─────────────────────────────
     En negro porque es literalmente lo que la congregación ve proyectado. La
     letra va sin acordes: ese es el argumento de la página. */
  .pantalla{background:#0C0B09;border-radius:15px;padding:32px 26px;
      min-height:214px;display:flex;flex-direction:column;
      justify-content:center;position:relative;overflow:hidden}
  .pantalla .secc{position:absolute;top:14px;left:18px;font-family:var(--mono);
      font-size:10px;letter-spacing:.14em;color:var(--m);font-weight:600;
      transition:opacity .4s var(--swoop)}
  .pantalla .letra{font-size:clamp(19px,2.9vw,28px);font-weight:700;
      letter-spacing:-.02em;line-height:1.4;color:#F6F4EF;text-align:center;
      margin:0;transition:opacity .4s var(--swoop),transform .4s var(--swoop)}
  .pantalla.cambia .letra{opacity:0;transform:translateY(10px)}
  .pantalla.cambia .secc{opacity:0}
  .pantalla .prox{position:absolute;bottom:13px;left:0;right:0;text-align:center;
      font-size:12px;color:#6F6A61;transition:opacity .4s var(--swoop)}
  .pantalla.cambia .prox{opacity:0}

  .opnota{display:flex;gap:11px;align-items:flex-start;background:var(--mT);
      border-radius:13px;padding:13px 15px;margin-top:10px}
  .opnota .q{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
      color:var(--mD);font-weight:700;flex:0 0 auto;padding-top:3px}
  .opnota p{margin:0;font-size:13.5px;color:var(--char);line-height:1.55}

  /* ── Audio: el mismo setlist, dos vistas ──────────────────────────
     El conmutador es el argumento entero de la página: un solo dato, dos
     lecturas. Enseñar lo que Audio NO recibe explica el filtro mejor que
     cualquier párrafo. */
  .vistas{display:flex;gap:6px;background:var(--mT);border-radius:12px;
      padding:4px;width:fit-content;margin:0 auto 12px}
  /* El que NO esta elegido va en gris: con los dos en el color del ministerio
     no se distinguia cual estaba activo de un vistazo. */
  .vbtn{border:none;background:transparent;font:inherit;font-size:12.5px;
      font-weight:700;color:var(--soft);border-radius:9px;padding:7px 15px;
      cursor:pointer;transition:background .25s,color .25s}
  .vbtn:hover{color:var(--mD)}
  .vbtn[aria-pressed="true"]{background:var(--bone);color:var(--ink);
      box-shadow:0 1px 3px rgba(12,11,9,.1)}

  .setl{background:#fff;border-radius:15px;padding:6px}
  .setl .fila{display:flex;align-items:baseline;gap:12px;padding:12px 14px}
  .setl .fila + .fila{border-top:1px solid var(--line)}
  .setl .nu{font-family:var(--mono);font-size:11px;color:var(--soft);
      flex:0 0 auto;width:14px}
  .setl .tit{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.4}
  .setl .est{display:block;font-family:var(--mono);font-size:10.5px;
      color:var(--soft);letter-spacing:.03em;margin-top:5px;font-weight:400}
  /* Lo que solo existe en la vista de Música. Se encoge en alto al cambiar
     para que se vea que DESAPARECE, no que nunca estuvo. */
  .setl .solomus{margin-left:auto;flex:0 0 auto;text-align:right;
      font-family:var(--mono);font-size:11.5px;color:var(--m);font-weight:600;
      max-height:40px;opacity:1;overflow:hidden;white-space:nowrap;
      transition:opacity .32s var(--swoop),max-height .42s var(--swoop)}
  .setl.audio .solomus{opacity:0;max-height:0}

  @media(max-width:620px){
    .demo{padding:8px;border-radius:18px}
    .hoja{padding:15px 15px 13px}
    .hoja .wd{font-size:14px}
    .mnash{margin-left:0;width:100%;text-align:center}
    .pantalla{padding:26px 18px;min-height:180px}
    .setl .fila{flex-wrap:wrap}
  }

  /* La palabra con el acento del ministerio en el titular. La portada hace lo
     mismo con .a1-.a4; aquí basta una porque cada página tiene un solo color. */
  .mhero h1 em{font-style:normal;color:var(--m)}