/* Comunidad Wiri · muro y blog simplificado (solo la página /comunidad).
   Va aparte de wiri.css para no tocar las demás páginas. Usa los mismos colores y letras. */

.com-portada { padding-bottom: 70px; }

.com-muro {
	display: grid;
	grid-template-columns: 210px minmax(0, 660px) 300px;
	gap: 36px;
	justify-content: center;
	padding: 64px 56px 110px;
	background: var(--fondo-2);
}

/* izquierda: secciones del muro */
.com-nav { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.com-nav-t { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--texto-3); padding: 0 14px 10px; }
.com-nav button {
	text-align: left; font: 500 15px var(--cuerpo); padding: 10px 14px; border-radius: 12px;
	background: none; border: 0; color: var(--texto-2); cursor: pointer; position: relative;
	transition: background .15s ease, color .15s ease; white-space: nowrap;
}
.com-nav button:hover { color: var(--carbon); background: rgba(29,29,32,0.04); }
.com-nav button.on { color: var(--carbon); background: var(--tarjeta); box-shadow: 0 6px 18px rgba(20,22,30,0.06); }
.com-nav button.on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--fucsia); }
.com-nav-a { font-family: var(--mono); font-size: 13px; color: var(--texto-2); padding: 14px 14px 0; }
.com-nav-a:hover { color: var(--carbon); }

/* centro: el muro */
.com-feed { display: grid; gap: 22px; align-content: start; min-width: 0; }

.com-escribir, .com-post, .com-tarjeta {
	background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 20px;
}
.com-escribir { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px 18px; }
.com-avatar { width: 40px; height: 40px; border-radius: 50%; display: block; flex: none; }
.com-avatar.tu { display: grid; place-items: center; background: var(--fondo); color: var(--texto-2); font: 600 12px var(--mono); }
.com-caja {
	width: 100%; text-align: left; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 999px;
	padding: 12px 18px; color: var(--texto-3); font: 15px var(--cuerpo); cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.com-caja:hover { border-color: var(--borde-2); color: var(--texto-2); }
.com-nota { grid-column: 1 / -1; display: grid; gap: 12px; padding: 6px 2px 2px; }
.com-nota[hidden] { display: none; }
.com-nota p { margin: 0; font-size: 15px; color: var(--texto-2); }

.com-post { display: grid; gap: 14px; padding: 22px; scroll-margin-top: 96px; }
.com-post.oculto { display: none; }
.com-cab { display: flex; gap: 12px; align-items: center; }
.com-quien { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 8px; line-height: 1.3; }
.com-quien b { font-family: var(--titular); font-size: 16px; letter-spacing: -0.01em; color: var(--carbon); }
.com-quien .capsula { margin: 0; }
.com-quien small { flex-basis: 100%; font-family: var(--mono); font-size: 12px; color: var(--texto-3); }
.com-post h3 { margin: 0; font-family: var(--titular); font-size: 25px; letter-spacing: -0.025em; line-height: 1.12; color: var(--carbon); }
.com-post p { margin: 0; font-size: 16px; color: var(--texto-2); }

.com-rejilla { display: grid; gap: 8px; }
.com-rejilla.dos { grid-template-columns: 1fr; }
.com-rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.com-rejilla.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.com-rejilla.cuatro.ancha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.com-rejilla figure { margin: 0; position: relative; min-width: 0; }
.com-rejilla img, .com-rejilla video { width: 100%; height: auto; display: block; border-radius: 12px; background: var(--oscuro); object-fit: cover; }
.com-rejilla.cuatro:not(.ancha) video { aspect-ratio: 3 / 4; }
.com-rejilla figcaption {
	position: absolute; left: 8px; bottom: 8px; font: 11px var(--mono); letter-spacing: 0.03em;
	background: rgba(5,6,9,0.66); color: #fff; padding: 3px 9px; border-radius: 999px;
}
.com-video video { width: 100%; height: auto; display: block; border-radius: 12px; background: var(--oscuro); }

.com-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.com-cifras div { background: var(--fondo-2); border-radius: 14px; padding: 14px 14px 12px; display: grid; gap: 4px; }
.com-cifras b { font-family: var(--titular); font-size: 36px; letter-spacing: -0.04em; line-height: 1; color: var(--carbon); }
.com-cifras span { font-family: var(--mono); font-size: 11.5px; line-height: 1.35; color: var(--texto-2); }

.com-mas summary { cursor: pointer; font: 600 14px var(--cuerpo); color: var(--fucsia-texto); list-style: none; width: max-content; }
.com-mas summary::-webkit-details-marker { display: none; }
.com-mas summary::after { content: " ↓"; }
.com-mas[open] summary::after { content: " ↑"; }
.com-mas p { margin-top: 8px; }

.com-pie { display: flex; gap: 10px 18px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--borde); padding-top: 14px; font-size: 14px; }
.com-pie a { font-weight: 600; color: var(--carbon); }
.com-pie a:hover { color: var(--fucsia-texto); }
.com-pie button {
	background: none; border: 1px solid var(--borde-2); border-radius: 999px; padding: 6px 14px;
	font: 500 13px var(--cuerpo); color: var(--texto-2); cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.com-pie button:hover { color: var(--carbon); border-color: var(--carbon); }
.com-pie button.copiado { color: var(--fucsia-texto); border-color: var(--fucsia-texto); }
.com-pronto { margin-left: auto; font: 11px var(--mono); letter-spacing: 0.04em; color: var(--texto-3); }

.com-vacio { background: transparent; border: 1.5px dashed var(--borde-2); text-align: center; justify-items: center; padding: 38px 24px; }
.com-vacio .mas, .com-hueco .mas { width: 48px; height: 48px; border-radius: 50%; background: var(--carbon); color: #fff; font-size: 26px; line-height: 46px; text-align: center; }
.com-vacio p { max-width: 460px; }

.boton.chico { padding: 10px 18px; font-size: 14px; justify-self: start; }
.com-vacio .boton.chico { justify-self: center; }

/* derecha: destacados, entrar y espacio para marcas */
.com-lado { position: sticky; top: 92px; align-self: start; display: grid; gap: 16px; min-width: 0; }
.com-tarjeta { padding: 18px; display: grid; gap: 12px; }
.com-tarjeta p { margin: 0; font-size: 14.5px; color: var(--texto-2); }
.com-tarjeta > a:not(.boton):not(.com-hueco) { font-weight: 600; font-size: 14px; color: var(--carbon); }
.com-tarjeta > a:not(.boton):not(.com-hueco):hover { color: var(--fucsia-texto); }
.com-hueco {
	border: 1.5px dashed var(--borde-2); border-radius: 14px; aspect-ratio: 16 / 10;
	display: grid; place-content: center; justify-items: center; gap: 10px; transition: border-color .15s ease;
}
.com-hueco:hover { border-color: var(--fucsia); }
.com-hueco .mas { width: 40px; height: 40px; font-size: 22px; line-height: 38px; }
.com-hueco b { font-family: var(--titular); font-size: 17px; letter-spacing: -0.01em; color: var(--carbon); }
.com-marcas { background: radial-gradient(260px 160px at 100% 0%, rgba(255,47,166,0.10), transparent 70%), var(--tarjeta); }

/* el titular de «Lo que estamos construyendo» sigue debajo con el estilo de siempre */
.com-muro + .rutas-sec { background: var(--fondo); }

/* pantallas medianas: las secciones pasan arriba en una fila */
@media (max-width: 1180px) {
	.com-muro { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px 28px; padding: 48px 32px 90px; }
	.com-nav {
		grid-column: 1 / -1; position: static; flex-direction: row; align-items: center; gap: 4px;
		overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
	}
	.com-nav::-webkit-scrollbar { display: none; }
	.com-nav-t { padding: 0 10px 0 0; }
	.com-nav button { padding: 9px 14px; border-radius: 999px; }
	.com-nav button.on::before { display: none; }
	.com-nav button.on { background: var(--carbon); color: #fff; box-shadow: none; }
	.com-nav-a { padding: 9px 14px; white-space: nowrap; }
}

/* móvil: una sola columna */
@media (max-width: 860px) {
	.com-muro { grid-template-columns: minmax(0, 1fr); padding: 32px 16px 70px; }
	.com-lado { position: static; }
	.com-post { padding: 18px 16px; }
	.com-post h3 { font-size: 21px; }
	.com-rejilla.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.com-cifras b { font-size: 28px; }
	.com-cifras span { font-size: 10.5px; }
	.com-pronto { margin-left: 0; width: 100%; }
}
@media (max-width: 420px) {
	.com-cifras { grid-template-columns: 1fr; }
	.com-rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}

/* COMUNIDAD ÚNICA (20-oct): publicaciones reales de la Comunidad (lo público de la cuenta oficial) */
.com-real .com-inicial { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--carbon, #2e2f34); color: #fff; font-weight: 700; font-size: 16px; flex: none; }
.com-real-texto { white-space: pre-wrap; color: var(--carbon, #1d1d20) !important; }
.com-real-medios { display: grid; gap: 8px; }
.com-real-medios.n2, .com-real-medios.n4 { grid-template-columns: 1fr 1fr; }
.com-real-medios.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.com-real-medios img, .com-real-medios video { width: 100%; border-radius: 12px; background: #000; max-height: 560px; object-fit: cover; display: block; }
.com-real-medios.n1 img, .com-real-medios.n1 video { object-fit: contain; }
.com-real .com-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--fondo, #e9eaed); }