/* ==========================================================================
   SITIO PÚBLICO — que se sienta invitación, no trámite.

   Diseñado primero a 380 px: el 90% de la gente llega escaneando un QR con el
   celular, de pie, en el stand, con alguien esperando detrás.

   La tesis de la portada no es un eslogan: es el hecho concreto de que esta
   iglesia se reúne en casas de toda la ciudad. Por eso el héroe lleva el mapa
   como fondo y el primer botón lleva al mapa, no a un formulario.
   ========================================================================== */

body.publico{ background:#FAF8F4; }

.contenedor{ width:100%; max-width:1000px; margin:0 auto; padding:0 1.15rem; }
.contenedor-s{ max-width:640px; }

/* ------------------------------------------------------------ CABECERA --- */

.cab{ background:var(--marca); color:#fff; padding:.8rem 0; }
.cab .contenedor{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.cab-marca{
  display:flex; align-items:center; gap:.6rem; color:#fff;
  font-family:var(--display); font-weight:800; font-size:1.02rem; letter-spacing:-.012em;
}
.cab-marca:hover{ text-decoration:none; opacity:.9; }
.cab-logo{
  width:33px; height:33px; border-radius:8px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16);
  display:grid; place-items:center; font-size:.78rem; font-weight:800; letter-spacing:.02em; flex:none;
}
.cab-logo.con-imagen{ background:#fff; border-color:rgba(255,255,255,.5); padding:2px; }
.cab-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.cab a.cab-link{ color:rgba(255,255,255,.82); font-size:.88rem; font-weight:600; }
.cab a.cab-link:hover{ color:#fff; }

/* --------------------------------------------------------------- HERO ---- */
/* El fondo es un plano de calles dibujado en SVG: sugiere la ciudad sin
   pretender ser un mapa real, y no cuesta una petición extra. */

.hero{
  position:relative; overflow:hidden; color:#fff;
  background:var(--marca);
  padding:2.6rem 0 3rem;
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 62px, rgba(255,255,255,.5) 62px 63px),
    repeating-linear-gradient(0deg,  transparent 0 62px, rgba(255,255,255,.5) 62px 63px),
    repeating-linear-gradient(28deg, transparent 0 150px, rgba(255,255,255,.45) 150px 152px);
  mask-image:radial-gradient(120% 90% at 78% 10%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 78% 10%, #000 0%, transparent 72%);
}
.hero > .contenedor{ position:relative; }
.hero .eyebrow{
  display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; color:rgba(255,255,255,.62); margin-bottom:.5rem;
}
.hero h1{
  color:#fff; font-size:clamp(1.85rem, 5.5vw, 2.7rem); margin-bottom:.45rem;
  font-weight:800; letter-spacing:-.028em;
}
.hero p{ color:rgba(255,255,255,.84); font-size:1.05rem; max-width:33ch; margin-bottom:0; }
.hero-acciones{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.35rem; }
.hero-acciones .btn-2{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28); }
.hero-acciones .btn-2:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); }

/* ------------------------------------------------- FILTROS DEL CATÁLOGO --- */

.filtros-pub{
  background:#fff; border:1px solid var(--borde); border-radius:var(--r);
  padding:1.1rem; margin:-1.9rem 0 1.6rem; box-shadow:var(--sombra-m);
  position:relative; z-index:2;
}
.filtros-pub h2{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--suave);
  font-family:var(--fuente); font-weight:700; margin-bottom:.7rem;
}
.filtros-grid{ display:grid; gap:.8rem; grid-template-columns:1fr; }
@media(min-width:640px){ .filtros-grid{ grid-template-columns:1fr 1fr auto; align-items:end; } }
.filtros-pub .campo{ margin-bottom:0; }

.chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.chip{
  display:inline-block; padding:.35rem .72rem; border-radius:99px; border:1px solid var(--borde);
  background:#fff; font-size:.83rem; font-weight:600; color:var(--suave); cursor:pointer;
}
.chip:hover{ border-color:var(--marca-claro); color:var(--marca); text-decoration:none; }
.chip.on{ background:var(--marca); border-color:var(--marca); color:#fff; }

.resultado-linea{
  color:var(--suave); font-size:.95rem; margin-bottom:1rem;
}
.resultado-linea b{ color:var(--tinta); }

/* ------------------------------------------------------ LISTA DE GRUPOS -- */

.grupos{ display:grid; gap:1.1rem; grid-template-columns:1fr; padding-bottom:2.5rem; }
@media(min-width:640px){ .grupos{ grid-template-columns:1fr 1fr; } }
@media(min-width:940px){ .grupos{ grid-template-columns:1fr 1fr 1fr; } }

.gcard{
  background:#fff; border:1px solid var(--borde); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sombra);
  transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.gcard:hover{ box-shadow:var(--sombra-m); border-color:var(--marca-borde); transform:translateY(-2px); }
.gcard-img{ aspect-ratio:16/9; background:var(--marca-suave); position:relative; overflow:hidden; }
.gcard-img img{ width:100%; height:100%; object-fit:cover; }
/* Sin foto, las iniciales sobre el verde de marca: identifica el grupo sin
   fingir una imagen que no existe. */
.gcard-img .sinfoto{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); color:var(--marca); opacity:.28;
  font-size:2.6rem; font-weight:800; letter-spacing:-.03em;
}
.gcard-body{ padding:1rem 1.05rem 1.05rem; flex:1; display:flex; flex-direction:column; gap:.45rem; }
.gcard h3{ font-size:1.1rem; margin:0; }
.gcard .cuando{
  font-size:.9rem; font-weight:600; color:var(--marca); font-variant-numeric:tabular-nums;
}
.gcard .meta{ font-size:.85rem; color:var(--suave); line-height:1.5; }
.gcard p{ font-size:.9rem; color:var(--suave); flex:1; margin:0; }
.gcard .btn{ margin-top:.35rem; }
.gcard.sugerido{ border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave); }
.tag-sugerido{
  align-self:flex-start; background:var(--acento); color:#fff; font-size:.68rem;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:.16rem .5rem; border-radius:4px;
}

/* ---------------------------------------------------------- FICHA GRUPO -- */

.ficha-portada{ height:200px; background:var(--marca); position:relative; overflow:hidden; }
.ficha-portada img{ width:100%; height:100%; object-fit:cover; }
.ficha-portada.sin-foto::before{
  content:""; position:absolute; inset:0; opacity:.2;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.5) 54px 55px),
    repeating-linear-gradient(0deg,  transparent 0 54px, rgba(255,255,255,.5) 54px 55px);
}
@media(min-width:640px){ .ficha-portada{ height:290px; } }

.ficha-head{ background:#fff; border-bottom:1px solid var(--borde); padding:0 0 1.3rem; }
.ficha-head .contenedor{ display:flex; gap:1rem; align-items:flex-end; }
.ficha-logo{
  width:78px; height:78px; border-radius:16px; background:#fff; border:3px solid #fff;
  box-shadow:var(--sombra-m); margin-top:-39px; flex:none; overflow:hidden;
  display:grid; place-items:center; font-family:var(--display);
  color:var(--marca); font-weight:800; font-size:1.55rem; letter-spacing:-.03em;
}
.ficha-logo img{ width:100%; height:100%; object-fit:cover; }
.ficha-titulo h1{ margin-bottom:.12rem; font-size:clamp(1.35rem, 4.5vw, 1.75rem); }
/* El horario, en el verde de marca y con cifras tabulares: es lo primero que
   se lee después del nombre, igual que en las tarjetas del catálogo. */
.ficha-titulo .cuando{
  color:var(--marca); font-weight:700; font-size:1rem;
  font-variant-numeric:tabular-nums; margin-bottom:.1rem;
}
.ficha-titulo .sub{ color:var(--suave); font-size:.9rem; }

.bloque{ background:#fff; border:1px solid var(--borde); border-radius:var(--r); padding:1.25rem; margin-bottom:1rem; }
.bloque h2{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--suave);
  font-family:var(--fuente); font-weight:700; margin-bottom:.75rem;
}
.bloque .historia{ font-size:1.02rem; line-height:1.7; white-space:pre-line; color:var(--texto); }

.datos{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media(min-width:560px){ .datos{ grid-template-columns:1fr 1fr; } }
.dato .k{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tenue); font-weight:700; }
.dato .v{ font-size:1rem; color:var(--tinta); font-weight:600; line-height:1.4; }

#mapa{ height:270px; border-radius:var(--r-s); border:1px solid var(--borde); background:var(--borde-f); }

.cta-fija{
  position:sticky; bottom:0; background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-top:1px solid var(--borde); z-index:20;
  padding:.8rem 0 calc(.8rem + env(safe-area-inset-bottom));
  box-shadow:0 -6px 18px rgba(20,28,26,.06);
}

/* ---------------------------------------------------------- FORMULARIO --- */

.form-pub{ background:#fff; border:1px solid var(--borde); border-radius:var(--r); padding:1.4rem; margin:1.4rem 0 2rem; }
.form-pub h1{ font-size:1.4rem; margin-bottom:.25rem; }
.form-pub .paso{
  display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--acento); font-weight:700; margin-bottom:.3rem;
}
/* Tarjeta del grupo elegido, arriba del formulario. Verde de marca, no acento:
   el acento está reservado para el botón que envía. */
.elegido{
  display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:var(--marca-suave); border:1px solid var(--marca-borde);
  border-radius:var(--r-s); padding:.8rem .95rem; margin:1rem 0 1.2rem;
}
.elegido .cuando{
  font-weight:700; color:var(--marca); font-variant-numeric:tabular-nums; font-size:.98rem;
}
.elegido .donde{ font-size:.86rem; color:#3D5F59; }
.elegido .cambiar{ font-size:.85rem; font-weight:600; color:var(--marca); white-space:nowrap; }

.fila2{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media(min-width:520px){ .fila2{ grid-template-columns:1fr 1fr; } }

/* -------------------------------------------- FICHA "MI PRIMERA VISITA" --- */
/* Cerrada por defecto. Quien se anota de pie en el stand termina en cuatro
   campos; quien llena la ficha sentado la abre y la completa entera. */

.mas-datos{
  border:1px solid var(--borde); border-radius:var(--r-s);
  padding:0 .9rem; margin-bottom:1rem; background:#FCFBF9;
}
.mas-datos > summary{
  list-style:none; cursor:pointer; padding:.8rem 0; font-weight:600;
  color:var(--marca); display:flex; align-items:center; gap:.5rem;
}
.mas-datos > summary::-webkit-details-marker{ display:none; }
.mas-datos > summary::before{
  content:"+"; display:grid; place-items:center; width:22px; height:22px; flex:none;
  border:1px solid var(--marca-borde); border-radius:6px; color:var(--marca);
  font-weight:700; line-height:1;
}
.mas-datos[open] > summary::before{ content:"−"; }
.mas-datos > summary small{ color:var(--suave); font-weight:400; }
.mas-datos[open] > summary{ border-bottom:1px solid var(--borde-f); margin-bottom:.9rem; }
.mas-datos .campo:last-child{ margin-bottom:.9rem; }

/* El rotulo de un grupo de opciones no es un <label>: no apunta a un control
   solo, describe a los tres de abajo. */
.rot{ display:block; font-size:.82rem; font-weight:600; color:var(--texto); margin-bottom:.4rem; }

.sino{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.sino .check{ margin:0; }
.sino .cuantos{ width:7rem; }
.sino .cual{ flex:1 1 12rem; min-width:0; }

#bloque-menor{
  background:var(--acento-suave); border:1px solid var(--acento-borde);
  border-radius:var(--r-s); padding:1.05rem; margin-bottom:1rem;
}
#bloque-menor h3{ font-size:.98rem; color:#8A5210; margin-bottom:.15rem; }

#sugerencia{
  background:var(--marca-suave); border:1px solid var(--marca-borde);
  border-radius:var(--r-s); padding:.75rem .9rem; font-size:.9rem; margin-bottom:1rem;
  color:#153B36;
}
#sugerencia a{ color:var(--marca); }

.consent{ background:var(--fondo); border:1px solid var(--borde); border-radius:var(--r-s); padding:1rem; font-size:.85rem; color:var(--suave); }
.consent .check{ font-size:.92rem; color:var(--texto); font-weight:500; }

/* --------------------------------------------------------- CONFIRMACIÓN -- */

.gracias{ text-align:center; padding:2.2rem 0 1rem; }
.gracias .tick{
  width:72px; height:72px; margin:0 auto 1.1rem; border-radius:50%;
  background:#E4F0E8; color:var(--ok); display:grid; place-items:center;
}
.gracias .tick svg{ width:34px; height:34px; }
.gracias h1{ font-size:clamp(1.4rem, 5vw, 1.75rem); }
.gracias .cuando{
  font-family:var(--display); font-size:1.2rem; color:var(--marca);
  font-weight:700; margin:.7rem 0 .2rem; letter-spacing:-.015em;
}
.acciones-grandes{ display:grid; gap:.7rem; margin:1.6rem 0; }
.wa-linea{ color:var(--wa); border-color:#B7DED6; }
.wa-linea:hover{ background:#EAF7F4; border-color:var(--wa); }
.wa{ background:var(--wa); border-color:var(--wa); }
.wa:hover{ background:var(--wa-hover); border-color:var(--wa-hover); }

/* --------------------------------------------------------------- PIE ----- */

.pie{ padding:2.5rem 0 3rem; color:var(--tenue); font-size:.83rem; text-align:center; border-top:1px solid var(--borde); margin-top:2rem; }
.pie a{ color:var(--suave); }
.pie p{ max-width:52ch; margin:0 auto; }