/* ═══ Tarjetas de Inicio de Comunidad e Historias ═══
   Las dos pantallas comparten historias, ¿Qué estás buscando?,
   el feed de la semana y el banner de invitación. */
/* ── Fila 1: desafío + camino ── */
.fila1{display:grid;grid-template-columns:48.5% 1fr;gap:16px;margin-bottom:26px}

.desafio{position:relative;overflow:hidden;border-radius:16px;padding:22px 24px;background:linear-gradient(115deg,#2a1b52 0%,#231846 46%,#171029 100%);border:1px solid rgba(139,92,246,.28)}
.desafio .burb{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:118px;height:104px;pointer-events:none}
.desafio>*{position:relative;z-index:2}
.desafio .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.11em;color:#d8c9ff;margin-bottom:12px}
.desafio h2{font-size:20px;font-weight:800;line-height:1.28;letter-spacing:-.01em;max-width:62%}
.desafio p{font-size:12.5px;color:#b9aede;margin:9px 0 16px;max-width:62%}

.camino{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px 22px}
.camino h3{font-size:15.5px;font-weight:700;margin-bottom:20px}
.pasos{display:flex;justify-content:space-between;position:relative;margin-bottom:20px}
.pasos::before{content:'';position:absolute;left:8%;right:8%;top:19px;height:2px;background:var(--border);z-index:0}
.pasos .llena{position:absolute;left:8%;top:19px;height:2px;background:linear-gradient(90deg,#7c3aed,#a78bfa);z-index:1;border-radius:2px}
.paso{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;flex:1;min-width:0}
.paso .bola{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bg-card);border:2px solid var(--border);color:var(--text-mute)}
.paso .bola svg{width:16px;height:16px}
.paso.ok .bola{background:linear-gradient(140deg,#8b5cf6,#6d28d9);border-color:#a78bfa;color:#fff}
.paso.hoy .bola{background:linear-gradient(140deg,#8b5cf6,#6d28d9);border-color:#c4b5fd;color:#fff;box-shadow:0 0 0 4px rgba(139,92,246,.22)}
.paso span{font-size:11px;color:var(--text-mute);text-align:center;line-height:1.3}
.paso.hoy span{color:#c4b5fd;font-weight:700}
.paso.ok span{color:var(--text-dim)}

/* ── Historias ── */
.historias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hist{display:flex;min-height:156px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:.15s}
.hist:hover{border-color:#2a3650;transform:translateY(-2px)}
.hist .foto{position:relative;width:42%;flex-shrink:0;background-size:cover;background-position:center}
.hist .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(8,10,16,.72);border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;backdrop-filter:blur(2px)}
.hist .play svg{width:14px;height:14px;color:#fff;margin-left:2px}
.hist .cont{flex:1;min-width:0;padding:13px 14px;display:flex;flex-direction:column}
.hist .quien{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:8px}
.hist .quien i{font-style:normal;color:var(--text-mute);font-weight:500}
.hist q{display:block;quotes:'“' '”';font-size:12.5px;color:var(--text-dim);line-height:1.5}
.hist .marcas{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:11px;justify-content:flex-end}
.hist .marcas .chip{padding:4px 8px;font-size:11px}

/* ── ¿Qué estás buscando? ── */
.buscando{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}
.busc{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:15px 14px;display:flex;flex-direction:column;transition:.15s}
.busc:hover{border-color:#2a3650;transform:translateY(-2px)}
.busc .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;margin-bottom:10px}
.busc .ic svg{width:18px;height:18px}
.busc h4{font-size:13px;font-weight:700;line-height:1.28;margin-bottom:6px}
.busc p{font-size:11.5px;color:var(--text-mute);line-height:1.42;flex:1}
.busc .ir{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--purple);margin-top:10px}
.busc .ir svg{width:12px;height:12px}
.b1 .ic{background:rgba(59,130,246,.14);color:#60a5fa}
.b2 .ic{background:rgba(56,189,248,.14);color:#38bdf8}
.b3 .ic{background:rgba(236,72,153,.14);color:#f472b6}
.b4 .ic{background:rgba(52,211,153,.14);color:#34d399}
.b5 .ic{background:rgba(251,146,60,.14);color:#fb923c}
.b6 .ic{background:rgba(167,139,250,.16);color:#a78bfa}

/* ── Feed de la semana ── */
.feedwrap{position:relative}
.feed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.post{display:flex;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:.15s;cursor:pointer;min-height:140px}
.post:hover{border-color:#2a3650;transform:translateY(-2px)}
.post .lat{width:70px;flex-shrink:0;background-size:cover;background-position:center}
.post .cont{flex:1;min-width:0;padding:12px 13px;display:flex;flex-direction:column}
.post .top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.post .av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}
.post .quien b{display:block;font-size:11.5px;font-weight:700}
.post .quien i{font-style:normal;color:var(--text-mute);font-weight:500}
.post .quien span{font-size:10.5px;color:var(--text-mute)}
.post .top .tag{margin-left:auto;flex-shrink:0}
.post h4{font-size:13px;font-weight:700;line-height:1.32;margin-bottom:6px}
.post .txt{font-size:11.5px;color:var(--text-mute);line-height:1.45}
.post .pie{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:11px;font-size:11.5px;color:var(--text-mute);font-weight:600}
.post .pie span{display:inline-flex;align-items:center;gap:5px}
.post .pie svg{width:13px;height:13px}
.post .pie .cor{color:var(--red)}
.post .mini{width:74px;border-radius:8px;object-fit:cover;align-self:flex-end;margin-top:-34px;margin-left:auto;height:56px}
.feed-next{position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--bg-card-2);border:1px solid var(--border);color:var(--text-dim);display:grid;place-items:center;cursor:pointer}
.feed-next:hover{color:var(--text);border-color:#2a3650}
.feed-next svg{width:14px;height:14px}

/* ── Banner final ── */
.invita{display:flex;align-items:center;gap:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:18px 22px}
.invita .ic{width:44px;height:44px;border-radius:12px;background:rgba(124,58,237,.14);display:grid;place-items:center;flex-shrink:0}
.invita .ic svg{width:23px;height:23px;color:var(--purple)}
.invita b{display:block;font-size:15px;font-weight:700}
.invita p{font-size:12.5px;color:var(--text-mute);margin-top:3px}
.invita .btn{margin-left:auto;flex-shrink:0}

@media(max-width:1180px){
  .buscando{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feed{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feed-next{display:none}
}
@media(max-width:900px){
  .fila1{grid-template-columns:1fr}
  .desafio h2,.desafio p{max-width:100%}
  .desafio .burb{display:none}
  .historias{grid-template-columns:1fr}
  .buscando{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pasos .paso span{font-size:10px}
  .invita{flex-wrap:wrap}
  .invita .btn{margin-left:0;width:100%}
}
@media(max-width:560px){
  .feed{grid-template-columns:1fr}
  .ph{flex-wrap:wrap}
  .ph .der{margin-left:0;width:100%;text-align:left}
}