/* ══════════════════════════════════════════════════════════════════
   v16-comunidad.css — solo para comunidad-v16.php. Clases con prefijo c16-.
   Se apoya en home-v16.css y v16-paginas.css. Solo transform/opacity en movimiento.
   ══════════════════════════════════════════════════════════════════ */

/* ── Entrada ── */
.c16-hero-foto { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.c16-hero-foto img { object-position: center 60%; }
.c16-hero-foto figcaption { font-size: .78rem; color: var(--h16-soft-dark-2); }
.c16-hero-foto { animation: h16fundido .9s var(--h16-ease) both; animation-delay: .2s; }
.c16-enlace-claro { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; font-weight: 700; font-size: .92rem; color: var(--white); text-decoration: none; border-bottom: 2px solid var(--mint); }
.c16-enlace-claro:hover { color: var(--mint); }

/* ── Qué encuentras en Skool ── */
#dentro:focus { outline: none; }
.c16-skool { padding-bottom: 56.25%; background: var(--mint-pale); }
.c16-dentro .p16-lista li strong { color: var(--ink); }
.c16-perfiles { margin: 0; max-width: 760px; font-size: 1rem; line-height: 1.7; color: var(--h16-text); padding-left: 14px; border-left: 2px solid var(--mint); }

/* ── Ágora ── */
.c16-agora { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.c16-formato { background: var(--white); border: 1.5px solid var(--line); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.c16-formato-tit { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; }
.c16-formato-tit span { font-weight: 600; color: var(--mid); }
.c16-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.c16-pasos li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; position: relative; padding-bottom: 18px; }
.c16-pasos li:last-child { padding-bottom: 0; }
/* Hilo vertical entre pasos */
.c16-pasos li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 2px; background: var(--mint-pale); }
.c16-paso-num { width: 34px; height: 34px; border-radius: 50%; background: var(--mint); color: var(--ink); font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.c16-pasos p { margin: 0; padding-top: 5px; font-size: .98rem; line-height: 1.55; color: var(--h16-text); }
.c16-temas { display: flex; flex-direction: column; gap: 14px; }
.c16-temas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.c16-temas-lista li { font-size: .85rem; font-weight: 600; padding: 8px 14px; border-radius: 50px; background: var(--white); border: 1px solid var(--h16-chip-line); color: var(--ink); }

/* ── Canvas ── */
.c16-canvas-img { position: relative; padding-bottom: 70.7%; border-radius: 16px; overflow: hidden; background: var(--off); border: 1px solid var(--line); margin: -8px -8px 4px; }
.c16-canvas-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.c16-canvas .h16-enlace { margin-top: auto; }

/* ── Encuentros ── */
.c16-encuentros .p16-card-titulo { display: block; color: var(--white); }
.c16-encuentros .p16-texto { display: block; }
.c16-encuentros .p16-card-img img { transition: transform .6s var(--h16-ease); }
.c16-encuentros a.p16-card:hover .p16-card-img img { transform: scale(1.03); }
.c16-leer { margin-top: auto; align-self: flex-start; font-weight: 700; font-size: .92rem; color: var(--white); border-bottom: 2px solid var(--mint); padding-bottom: 2px; }
.c16-canales { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--h16-soft-dark); }
.c16-canales a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--white); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; }
.c16-canales a:hover { color: var(--mint); border-bottom-color: var(--mint); }

/* ── Responsive ── */
@media (max-width: 860px) {
  .c16-agora { grid-template-columns: 1fr; gap: 36px; }
  .c16-hero-foto { order: 2; }
}
@media (max-width: 720px) {
  .c16-formato { padding: 24px; }
}

/* ── Movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  body:not(.h16-forzar-anim) .c16-hero-foto { animation: none !important; opacity: 1 !important; }
  body:not(.h16-forzar-anim) .c16-encuentros .p16-card-img img { transition: none; transform: none !important; }
}