/* =============================================================
   WEB PÚBLICA DE LA ONG — <slug>.cannis.<dominio> (PD-92)
   La página se arma con los bloques de Cannis OS › Mi web. Cada
   bloque es una <section class="sd-w-bloque sd-w-<tipo>">.
   ============================================================= */

.sd-w {
  background:
    radial-gradient(1200px 600px at 85% -10%, var(--sd-acento-luz), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, var(--sd-acento-tinte), transparent 60%),
    var(--sd-lienzo);
}

.sd-w-contenedor { width: min(var(--sd-ancho), 100% - 2rem); margin-inline: auto; }

/* ---------- Vista previa (Cannis OS) ---------- */
.sd-w-previa {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  background: var(--sd-alerta);
  color: var(--sd-lienzo);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

/* ---------- Barra superior ----------
   Transparente arriba de todo y, cuando se baja, vidrio con sombra (`es-desplazada`, lo pone public/js/sede/web.js). */
.sd-w-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.sd-w-nav.es-desplazada,
html:not(.sd-js) .sd-w-nav {
  backdrop-filter: saturate(160%) blur(16px);
  background: var(--sd-topbar-fondo);
  border-bottom-color: var(--sd-borde);
  box-shadow: 0 10px 30px -18px var(--sd-velo);
}
.sd-w-previa + .sd-w-nav { top: 38px; }
.sd-w-nav__fila { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 72px; }
.sd-w-nav__marca { display: flex; align-items: center; gap: 0.75rem; min-width: 0; color: var(--sd-tinta); font-weight: 760; }
.sd-w-nav__marca:hover { text-decoration: none; }
.sd-w-nav__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem; letter-spacing: -0.01em; }
.sd-w-nav__secciones { display: flex; gap: 0.25rem; padding: 0.3rem; border: 1px solid var(--sd-borde); border-radius: var(--sd-radio-pill); background: var(--sd-superficie); box-shadow: var(--sd-sombra-sm); }
.sd-w-nav__seccion { padding: 0.4rem 0.9rem; border-radius: var(--sd-radio-pill); color: var(--sd-tinta-suave); font-size: 0.88rem; font-weight: 620; white-space: nowrap; }
.sd-w-nav__seccion:hover { text-decoration: none; color: var(--sd-tinta); background: var(--sd-acento-tinte); }
.sd-w-nav__acciones { display: flex; gap: 0.5rem; flex: none; }
@media (max-width: 1020px) { .sd-w-nav__secciones { display: none; } }
@media (max-width: 560px) {
  .sd-w-nav__nombre { display: none; }
  .sd-w-nav .sd-btn { min-height: 40px; padding: 0.45rem 0.9rem; font-size: 0.88rem; }
}

/* Botón de vidrio: secundario sobre fondos con luz. */
.sd-w-btn-vidrio { background: var(--sd-superficie); border-color: var(--sd-borde-fuerte); box-shadow: var(--sd-sombra-sm); }
.sd-w-btn-vidrio:hover { background: var(--sd-superficie-2); }

/* ---------- Bloques ---------- */
.sd-w-bloque { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.sd-w-bloque + .sd-w-bloque { border-top: 1px solid var(--sd-borde); }
.sd-w-bloque--alterno { background: var(--sd-lienzo-alto); }

.sd-w-encabezado { max-width: 720px; margin-bottom: 2rem; }
.sd-w-encabezado--centro { margin-inline: auto; text-align: center; }
.sd-w-titulo { font-size: var(--sd-tipo-seccion); }
.sd-w-bajada { margin-top: 0.75rem; color: var(--sd-tinta-suave); font-size: 1.05rem; }
.sd-w-marcador {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.75rem;
  color: var(--sd-acento);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.sd-w-marcador::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }

/* Portada (vuelta 2): dos halos de luz del acento, trama, título con degradé y, sin foto, la tarjeta de identidad. */
.sd-w-portada { position: relative; padding-block: clamp(3rem, 1.5rem + 6vw, 7rem) clamp(3.5rem, 2rem + 6vw, 7.5rem); border-top: 0 !important; overflow: hidden; isolation: isolate; }
.sd-w-portada::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(var(--sd-trama) 1px, transparent 1px), linear-gradient(90deg, var(--sd-trama) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 60% 35%, var(--sd-tinta) 15%, transparent 72%);
}
.sd-w-portada__halo { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.sd-w-portada__halo--uno { width: 520px; height: 520px; top: -180px; right: -120px; background: var(--sd-acento-luz); }
.sd-w-portada__halo--dos { width: 380px; height: 380px; bottom: -160px; left: -140px; background: var(--sd-acento-tinte); }
@media (prefers-reduced-motion: no-preference) {
  .sd-w-portada__halo--uno { animation: sd-w-flota 14s ease-in-out infinite alternate; }
  .sd-w-portada__halo--dos { animation: sd-w-flota 18s ease-in-out infinite alternate-reverse; }
  @keyframes sd-w-flota { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 30px) scale(1.08); } }
}
.sd-w-portada__grilla { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .sd-w-portada__grilla { grid-template-columns: 1fr; } }
.sd-w-portada__sellos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.sd-w-portada__titulo {
  font-size: var(--sd-tipo-portada);
  line-height: 1.02;
  letter-spacing: -0.045em;
  max-width: 15ch;
  background: linear-gradient(120deg, var(--sd-tinta) 30%, var(--sd-acento) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.08em;
}
.sd-w-portada__bajada { max-width: 54ch; margin-top: 1.4rem; color: var(--sd-tinta-suave); font-size: clamp(1.05rem, 0.96rem + 0.45vw, 1.25rem); line-height: 1.6; }
.sd-w-portada__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

.sd-w-portada__imagen {
  position: relative;
  aspect-ratio: 4 / 4.4;
  border-radius: 32px;
  border: 1px solid var(--sd-borde);
  box-shadow: var(--sd-sombra-md), 0 40px 80px -40px var(--sd-acento-anillo);
  background: var(--sd-superficie-2);
  transform: rotate(1.2deg);
}
.sd-w-portada__imagen > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.sd-w-portada__sello-logo { position: absolute; left: -18px; bottom: -18px; width: 76px; height: 76px; border-radius: 22px; border: 4px solid var(--sd-lienzo); box-shadow: var(--sd-sombra-md); background: var(--sd-superficie); transform: rotate(-1.2deg); }
@media (max-width: 900px) { .sd-w-portada__imagen { transform: none; aspect-ratio: 4 / 3; } .sd-w-portada__sello-logo { left: 14px; } }

/* La tarjeta de identidad: la ONG en datos, como un carnet. */
.sd-w-identidad {
  position: relative;
  padding: 1.75rem;
  border-radius: 28px;
  border: 1px solid var(--sd-acento-anillo);
  background:
    radial-gradient(420px 220px at 100% 0%, var(--sd-acento-luz), transparent 70%),
    linear-gradient(180deg, var(--sd-superficie), var(--sd-superficie-2));
  box-shadow: var(--sd-sombra-md), 0 40px 80px -45px var(--sd-acento-anillo);
}
.sd-w-identidad::before {
  content: '';
  position: absolute;
  inset: 12px 12px auto auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px dashed var(--sd-acento-anillo);
}
.sd-w-identidad__cabecera { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--sd-borde); }
.sd-w-identidad__logo { box-shadow: 0 10px 30px -12px var(--sd-acento-anillo); }
.sd-w-identidad__nombre { display: block; font-size: 1.2rem; font-weight: 780; letter-spacing: -0.02em; line-height: 1.2; }
.sd-w-identidad__sub { display: block; margin-top: 0.2rem; color: var(--sd-tinta-tenue); font-size: 0.86rem; }
.sd-w-identidad__datos { display: grid; gap: 0.9rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.sd-w-identidad__datos li { display: flex; align-items: center; gap: 0.85rem; font-weight: 640; font-size: 0.95rem; }
.sd-w-identidad__icono { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--sd-acento-tinte); color: var(--sd-acento); }
.sd-w-identidad__icono svg { width: 19px; height: 19px; }
.sd-w-identidad__rotulo { display: block; color: var(--sd-tinta-tenue); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }

/* Texto */
.sd-w-texto__cuerpo { max-width: 72ch; display: grid; gap: 1rem; color: var(--sd-tinta-suave); font-size: 1.05rem; line-height: 1.75; }

/* Destacados (vuelta 2): número de fondo, ícono con luz y la tarjeta se levanta con un filo del acento. */
.sd-w-destacado { position: relative; padding: 1.75rem; height: 100%; overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.sd-w-destacado::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--sd-acento), transparent); opacity: 0; transition: opacity 0.2s ease; }
.sd-w-destacado:hover { transform: translateY(-4px); border-color: var(--sd-acento-anillo); box-shadow: var(--sd-sombra-md); }
.sd-w-destacado:hover::before { opacity: 1; }
.sd-w-destacado__numero { position: absolute; top: 0.9rem; right: 1.2rem; color: var(--sd-tinta-fantasma); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; opacity: 0.45; }
.sd-w-destacado__icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.15rem;
  border-radius: 16px;
  background: var(--sd-acento-tinte);
  color: var(--sd-acento);
  box-shadow: 0 10px 26px -14px var(--sd-acento-anillo);
}
.sd-w-destacado__icono svg { width: 26px; height: 26px; }
.sd-w-destacado__titulo { font-size: 1.12rem; font-weight: 740; }
.sd-w-destacado__texto { margin-top: 0.5rem; color: var(--sd-tinta-suave); }

/* Galería */
.sd-w-galeria__grilla { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.sd-w-galeria__foto {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--sd-radio-lg);
  overflow: hidden;
  background: var(--sd-superficie-2);
  border: 1px solid var(--sd-borde);
}
.sd-w-galeria__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sd-w-galeria__foto:hover img { transform: scale(1.04); }
.sd-w-galeria__foto:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 560px) { .sd-w-galeria__foto:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; } }

/* Membresías */
.sd-w-plan { display: flex; flex-direction: column; padding: 1.6rem; height: 100%; }
.sd-w-plan--destacado { border-color: var(--sd-acento); box-shadow: 0 0 0 1px var(--sd-acento), var(--sd-sombra-md); }
.sd-w-plan__nombre { font-size: 1.2rem; font-weight: 760; }
.sd-w-plan__descripcion { margin-top: 0.4rem; color: var(--sd-tinta-suave); }
.sd-w-plan__lista { display: grid; gap: 0.55rem; margin: 1.25rem 0 1.5rem; padding: 0; list-style: none; }
.sd-w-plan__item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.94rem; }
.sd-w-plan__item svg { width: 18px; height: 18px; flex: none; color: var(--sd-acento); }
.sd-w-plan__item--no { color: var(--sd-tinta-fantasma); text-decoration: line-through; }
.sd-w-plan__item--no svg { color: var(--sd-tinta-fantasma); }
.sd-w-plan .sd-btn { margin-top: auto; }

/* Preguntas */
.sd-w-preguntas__lista { display: grid; gap: 0.75rem; max-width: 820px; }
.sd-w-pregunta { padding: 0; overflow: hidden; }
.sd-w-pregunta summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  font-weight: 680;
  cursor: pointer;
  list-style: none;
}
.sd-w-pregunta summary::-webkit-details-marker { display: none; }
.sd-w-pregunta summary::after { content: '+'; color: var(--sd-acento); font-size: 1.4rem; font-weight: 500; line-height: 1; transition: transform 0.2s ease; }
.sd-w-pregunta[open] summary::after { transform: rotate(45deg); }
.sd-w-pregunta__respuesta { display: grid; gap: 0.75rem; padding: 0 1.35rem 1.25rem; color: var(--sd-tinta-suave); }

/* Contacto */
.sd-w-contacto__grilla { display: grid; gap: 1rem; grid-template-columns: 1.2fr 0.8fr; align-items: start; }
@media (max-width: 860px) { .sd-w-contacto__grilla { grid-template-columns: 1fr; } }
.sd-w-contacto__lista { display: grid; gap: 0.75rem; }
.sd-w-canal {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  color: var(--sd-tinta);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.sd-w-canal:hover { text-decoration: none; border-color: var(--sd-acento-anillo); transform: translateY(-1px); }
.sd-w-canal__icono { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--sd-acento-tinte); color: var(--sd-acento); }
.sd-w-canal__icono svg { width: 22px; height: 22px; }
.sd-w-canal__texto { flex: 1; min-width: 0; }
.sd-w-canal__etiqueta { display: block; color: var(--sd-tinta-tenue); font-size: 0.82rem; font-weight: 600; }
.sd-w-canal__valor { display: block; font-weight: 680; overflow-wrap: anywhere; }
.sd-w-canal__flecha { color: var(--sd-tinta-fantasma); width: 18px; height: 18px; }
.sd-w-horarios { padding: 1.35rem; }
.sd-w-horarios__titulo { display: flex; align-items: center; gap: 0.5rem; font-weight: 720; margin-bottom: 0.75rem; }
.sd-w-horarios__titulo svg { width: 20px; height: 20px; color: var(--sd-acento); }
.sd-w-horarios__texto { color: var(--sd-tinta-suave); white-space: pre-line; }
.sd-w-direcciones { display: grid; gap: 0.5rem; margin-top: 1rem; padding: 0; list-style: none; }
.sd-w-direcciones li { display: flex; gap: 0.5rem; color: var(--sd-tinta-suave); }
.sd-w-direcciones svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--sd-acento); }

/* Llamado */
.sd-w-llamado__caja {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border-radius: 28px;
  background:
    radial-gradient(600px 300px at 100% 0%, var(--sd-acento-luz), transparent 70%),
    var(--sd-superficie);
  border: 1px solid var(--sd-acento-anillo);
}
.sd-w-llamado__titulo { font-size: var(--sd-tipo-seccion); max-width: 22ch; }
.sd-w-llamado__texto { margin-top: 0.6rem; color: var(--sd-tinta-suave); max-width: 52ch; }

/* ---------- Pie (vuelta 2) ----------
   La ONG, sus accesos y su marco legal en columnas; abajo, el año y la firma de Cannis (el logo oficial solo, con
   «Desarrollado por» en su propio renglón: al costado de un logo de Cannis no va ninguna palabra). */
.sd-w-pie { position: relative; padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 1.75rem; border-top: 1px solid var(--sd-borde); background: var(--sd-lienzo-alto); color: var(--sd-tinta-tenue); font-size: 0.9rem; overflow: hidden; }
.sd-w-pie::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sd-acento), transparent); opacity: 0.7; }
.sd-w-pie__grilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 860px) { .sd-w-pie__grilla { grid-template-columns: 1fr 1fr; } .sd-w-pie__marca { grid-column: 1 / -1; } }
@media (max-width: 480px) { .sd-w-pie__grilla { grid-template-columns: 1fr; } }
.sd-w-pie__nombre { font-size: 1.1rem; font-weight: 780; letter-spacing: -0.01em; }
.sd-w-pie__descripcion { max-width: 42ch; margin-top: 0.9rem; color: var(--sd-tinta-suave); line-height: 1.6; }
.sd-w-pie__redes { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.sd-w-pie__red { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--sd-borde-fuerte); background: var(--sd-superficie); color: var(--sd-tinta-suave); transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.sd-w-pie__red:hover { color: var(--sd-acento); border-color: var(--sd-acento-anillo); transform: translateY(-2px); }
.sd-w-pie__red svg { width: 20px; height: 20px; }
.sd-w-pie__columna { display: flex; flex-direction: column; gap: 0.6rem; }
.sd-w-pie__columna a { color: var(--sd-tinta-suave); font-weight: 600; width: fit-content; }
.sd-w-pie__columna a:hover { color: var(--sd-acento); text-decoration: none; }
.sd-w-pie__rotulo { margin-bottom: 0.35rem; color: var(--sd-tinta); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.sd-w-pie__legal { max-width: 80ch; margin-top: 2.5rem; font-size: 0.84rem; line-height: 1.6; }
.sd-w-pie__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--sd-borde); font-size: 0.84rem; }

/* La firma: una cápsula con el crédito arriba y el logo oficial abajo, que se enciende con el acento al pasar. */
.sd-w-firma {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.6rem 1.25rem 0.5rem;
  border: 1px solid var(--sd-borde-fuerte);
  border-radius: 16px;
  background: var(--sd-superficie);
  box-shadow: var(--sd-sombra-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.sd-w-firma:hover { text-decoration: none; border-color: var(--sd-acento-anillo); box-shadow: 0 12px 30px -16px var(--sd-acento-anillo); transform: translateY(-2px); }
.sd-w-firma__rotulo { color: var(--sd-tinta-tenue); font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1; }
.sd-w-firma__logo { display: block; height: 40px; width: auto; margin-bottom: -4px; }
@media (max-width: 480px) { .sd-w-pie__base { flex-direction: column-reverse; align-items: flex-start; } }

/* ---------- Entrada suave ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sd-w-aparece { animation: sd-w-sube 0.6s ease both; }
  @keyframes sd-w-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ---------- Normativa provincial (PD-81): no es un bloque, la pone la página ---------- */
.sd-w-normativa { background: var(--sd-acento-tinte); border-bottom: 1px solid var(--sd-acento-anillo); }
.sd-w-normativa__fila { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.8rem; font-size: 0.95rem; }
.sd-w-normativa__icono { width: 22px; height: 22px; flex: none; color: var(--sd-acento); }
.sd-w-normativa strong { color: var(--sd-tinta); }
.sd-w-plan > .sd-pastilla { align-self: flex-start; margin-bottom: 0.6rem; }

/* ---------- Aparecer al bajar (vuelta 2) ----------
   Sólo si hay JS (`sd-js` en <html>, lo pone public/js/sede/web.js) y no se pidió menos movimiento: sin JS todo se ve. */
@media (prefers-reduced-motion: no-preference) {
  .sd-js .sd-w-bloque:not(.sd-w-portada) > .sd-w-contenedor { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .sd-js .sd-w-bloque.es-visible > .sd-w-contenedor { opacity: 1; transform: none; }
}

/* La firma lleva las dos variantes del logo oficial y se ve la del fondo de la página (el original sobre oscuro, la de tinta navy sobre claro). */
.sd-w-firma__logo--claro { display: none; }
:root[data-fondo="claro"] .sd-w-firma__logo--claro { display: block; }
:root[data-fondo="claro"] .sd-w-firma__logo--oscuro { display: none; }