Rediseño de la enredadera y páginas nuevas

Portada
- La bajada del título pasa de un trazo de grosor constante a dos cintas
  trenzadas que se afilan, con la punta rematada en zarcillo. El viewBox es
  1000x72 y la caja mide el 7.2% del ancho de la rejilla, así que la escala
  sale uniforme y el dibujo no se deforma en ninguna pantalla.
- El giro de la esquina es una Bézier cúbica de salida vertical y la franja
  entra también vertical: radio mínimo 26 unidades en vez de 15.
- La franja entera pasa de trazos a cintas. La cola deja de ser un lazo y
  abre un bucle afilado que remata una espiral logarítmica verde, con centro
  y sentido derivados de la tangente del tallo.
- El rabillo de la hoja pasa de 24 a 42 unidades (recuadro 100x132) para que
  el limbo no cruce la raíz. Con él, el origen del giro (1.52%) y la etiqueta
  (62%), que se miden sobre ese alto.
- Letra de las etiquetas un 10% mayor. "La Enre" a 164 grados y tamaño 1.16;
  "Calendario", a 1.00.

Móvil
- El tallo pasa de una recta a una onda de coseno, media vuelta por celda, en
  un recuadro cuadrado para que la escala sea uniforme. Tres dibujos: la onda,
  su espejo para las celdas pares y el remate en espiral de la última.
- Las seis hojas entran sin deslizar de 320x568 en adelante: la celda reparte
  el alto disponible en vez de medir lo que mide la hoja, --ancho-hoja se mide
  contra las dos dimensiones y la cabecera baja de 104 a 68px.
- El abanico de REDES se recoloca (centro -0.25r, apertura 0.50r) para caber
  en el hueco nuevo.

Páginas
- colectivos.html, calendario.html, eventos.html, tatus.html, panel.html y
  404.html.
- El calendario semanal esconde la semana entera vacía que dibujaba de más.

Comprobado con qa.py: 0 fallos y 0 avisos en 150 mediciones (10 páginas por
15 pantallas), con contraste, foco, brotes y HTML roto incluidos.
This commit is contained in:
sito 2026-09-09 00:34:53 +02:00
parent f3823c4c53
commit 8bcaf1644c
17 changed files with 3812 additions and 1385 deletions

View file

@ -4,379 +4,178 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Enredadera de Tetuán</title>
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf">
<meta name="description" content="CSO La Enredadera de Tetuán. Centro Social Autogestionado en la Calle de la Coruña 5, Madrid. Haciendo barrio desde 2009.">
<!-- Vista previa al compartir el enlace (Mastodon, Telegram, WhatsApp). -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="CSO La Enredadera de Tetuán">
<meta property="og:locale" content="es_ES">
<meta property="og:title" content="La Enredadera de Tetuán">
<meta property="og:description" content="CSO La Enredadera de Tetuán. Centro Social Autogestionado en la Calle de la Coruña 5, Madrid. Haciendo barrio desde 2009.">
<meta property="og:image" content="/INFO/cso_laenre.jpeg">
<meta property="og:image:alt" content="Fachada del CSO La Enredadera: el cartel «La Enredadera» pintado a mano letra a letra sobre la puerta, y encima el mural «El último tesoro que le queda a la ciudad, es el barrio»">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Rock+Salt&display=swap">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="stylesheet" href="/index.css">
<!-- Web component gancio-calendar (CSO La Rosa) https://framagit.org/rosa/gancio-calendar -->
<script type="module" src="https://rosa.frama.io/gancio-calendar/gancio-calendar.js"></script>
</head>
<body>
<!-- Menú lateral: checkbox + label, sin una línea de JavaScript -->
<input type="checkbox" id="nav-toggle" class="sr-only">
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir/cerrar menú">☰</label>
<label for="nav-toggle" class="sb-toggle" aria-label="Abrir o cerrar el menú">☰</label>
<label for="nav-toggle" class="sb-overlay" aria-hidden="true"></label>
<!-- ==========================================================
LA FORMA DE LA HOJA. Se define una sola vez por página y
cada hoja la reutiliza con <use>. Los colores salen de las
variables --limbo, --borde y --nervio, que pone el CSS.
========================================================== -->
<svg class="defs" aria-hidden="true" focusable="false" width="0" height="0">
<symbol id="hoja-forma" viewBox="0 0 100 132">
<!-- Volteada: el rabillo queda arriba y la hoja cuelga. Así el punto por
el que se agarra a la raíz es la esquina superior del recuadro, y el
giro no depende de ningún porcentaje. -->
<g transform="translate(0,132) scale(1,-1)" fill="none" stroke-linejoin="round" stroke-linecap="round">
<!-- Rabillo, en marrón: es la parte leñosa que engancha con el tallo.
Mide 42 y no 24: con el corto, el limbo nacía pegado a la raíz y
la cruzaba. El recuadro crece con él (114 -> 132) para que la caja
siga midiendo lo que se dibuja; el limbo no cambia de tamaño. -->
<path stroke="var(--rabillo)" stroke-width="3.2" d="M50 88 L50 130"/>
<!-- Zarcillo verde. Sale solo en algunas hojas: el CSS enciende
--zarcillo en una de cada tres para que no salgan calcadas. -->
<path stroke="var(--nervio)" stroke-width="1.9" stroke-opacity="var(--zarcillo,0)"
d="M50 100 C38 98 32 90 36 84 C39 80 45 82 44 88 C43 94 36 96 30 92"/>
<!-- Contorno de hoja de hiedra, en rosa -->
<path stroke="var(--trazo)" stroke-width="2.7"
d="M50 5 C56 20 61 36 65 48 C76 44 89 40 96 45 C96 62 84 74 70 80 C62 84 56 83 50 88 C44 83 38 84 30 80 C16 74 4 62 4 45 C11 40 24 44 35 48 C39 36 44 20 50 5 Z"/>
<!-- Nervadura palmada, en verde: los cinco nervios salen del rabillo -->
<g stroke="var(--nervio)" stroke-width="1.5">
<path d="M50 86 L50 13"/>
<path d="M50 86 C59 72 78 56 90 48"/>
<path d="M50 86 C41 72 22 56 10 48"/>
<path d="M50 86 C57 84 65 81 71 77"/>
<path d="M50 86 C43 84 35 81 29 77"/>
</g>
</g>
</symbol>
</svg>
<div class="container">
<div class="vertical-marquee left-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
NI DIOS NI AMO, NI PATRIA NI ESTADO -0->
</marquee>
</div>
<div class="vertical-marquee right-marquee">
<marquee behavior="scroll" direction="up" scrollamount="2">
OKUPA RESISTE 1312 <3
</marquee>
</div>
<aside id="sidebar" class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="Logo de La Enredadera" class="logo">
<h2>La Enredadera</h2>
<p>Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav">
<aside class="sidebar">
<img src="/INFO/logo_enre_negro.png" alt="" class="logo" width="96" height="96">
<!-- Es la marca del panel, no un encabezado de sección: como el panel
va ANTES del <main>, un <h2> aquí hacía que el primer encabezado
del documento fuera de nivel 2 y el <h1> viniera después. -->
<p class="sb-marca">La Enredadera</p>
<p class="lema">Centro Social Autogestionado en Tetuán. Haciendo barrio desde 2009.</p>
<nav class="sidebar-nav" aria-label="Secciones">
<ul>
<li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li>
<li><a href="/colectivos.html">Colectivos</a></li>
<li><a href="/calendario.html">Calendario</a></li>
<li><a href="/eventos.html">Eventos</a></li>
<li><a href="/subdir/campa.html">Campañas</a></li>
<li><a href="/subdir/sobre_nosotrxs.html">La Enre</a></li>
<li><a href="/subdir/contacto.html">Contacto</a></li>
<li><a href="https://okupanel.laenre.net">Actividades</a></li>
<li><a href="/convocala.html">Eventos</a></li>
<li><a href="comunicados.html">Comunicados</a></li>
<li><a href="mailto:enredadera@riseup.net">Contacto</a></li>
<li><a href="https://www.instagram.com/la_enredadera_de_tetuan/">Instagram</a></li>
<li><a href="https://masto.es/@csolaenre">Mastodon</a></li>
</ul>
</nav>
</aside>
<main class="main-content">
<header>
<h1>CSO LA ENREDADERA DE TETUÁN</h1>
<nav class="top-nav">
<ul>
<li><a href="/index.html#feminismos">feminismos tetuan</a></li>
<li><a href="/subdir/campa.html">campañas</a></li>
<li><a href="/index.html#fridays">fridays for future</a></li>
<li><a href="/index.html#ovt">organizacion vivienda tetuan</a></li>
<li><a href="/index.html#circo">circo</a></li>
<li><a href="https://hacklab.laenre.net">hacklab la raiz</a></li>
<li><a href="/index.html#tienda-gratis">tienda gratis</a></li>
<li><a href="/index.html#biblioteka">biblioteka</a></li>
<li><a href="/index.html#warawas">warawas</a></li>
<li><a href="/index.html#hongos">hongos</a></li>
<li><a href="/index.html#fermentos">fermentos</a></li>
<li><a href="/index.html#bicilab">bicilab</a></li>
</ul>
</nav>
<main class="main">
<header class="cabecera">
<h1>La Enredadera</h1>
<!-- El espacio antes de cada «·» es duro: sin esto, al partir en dos
líneas la segunda empezaba por el separador. -->
<p class="sub">Centro social autogestionado&nbsp;· Tetuán, Madrid&nbsp;· desde 2009</p>
</header>
<!-- ======================================================
LA ENREDADERA.
Para añadir una hoja: copia un <li> entero y cambia el
href y el texto. La posición y el ángulo salen solos.
====================================================== -->
<div class="enredadera-wrap">
<ul class="enredadera">
<!-- CALENDARIO: gancio-calendar embebido desde mad.convoca.la -->
<section id="agenda" class="panel" aria-label="Calendario de eventos">
<li>
<a class="hoja" href="/colectivos.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Colectivos</span>
</a>
</li>
<!--
places="286" = ID de CSO La Enredadera en mad.convoca.la
https://mad.convoca.la/place/CSO%20La%20Enredadera
-->
<gancio-calendar
baseurl="https://mad.convoca.la"
title="Agenda de La Enredadera de Tetuán"
instance_name="mad.convoca.la"
instance_description="Agenda activista y cultural de Tetuán"
locale="es-ES"
places="42"
accent_color="#ff00aa"
theme="light">
</gancio-calendar>
<li>
<a class="hoja" href="/calendario.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Calendario</span>
</a>
</li>
</section>
<li>
<a class="hoja" href="/eventos.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Eventos</span>
</a>
</li>
<!-- REDES: al pulsarla brotan tres hojas con las redes. Todo con un
checkbox y CSS, ni una línea de JavaScript. -->
<li class="li-redes">
<input type="checkbox" id="redes-toggle" class="sr-only">
<label class="hoja" for="redes-toggle">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Redes</span>
</label>
<ul class="brotes">
<li>
<a class="hoja hoja-brote" href="https://masto.es/@csolaenre" rel="me">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Mastodon</span>
</a>
</li>
<li>
<a class="hoja hoja-brote" href="https://t.me/laenredadera">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Telegram</span>
</a>
</li>
<li>
<a class="hoja hoja-brote" href="https://www.instagram.com/la_enredadera_de_tetuan/">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Instagram</span>
</a>
</li>
</ul>
</li>
<li>
<a class="hoja" href="/subdir/campa.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">Campañas</span>
</a>
</li>
<li>
<a class="hoja" href="/subdir/sobre_nosotrxs.html">
<svg class="hoja-svg" viewBox="0 0 100 132" aria-hidden="true"><use href="#hoja-forma"></use></svg>
<span class="hoja-txt">La Enre</span>
</a>
</li>
</ul>
</div>
<!-- CALENDARIO SEMANAL DE COLECTIVOS -->
<section id="agenda-semanal" aria-label="Horarios semanales de colectivos">
<h2>Horarios Semanales</h2>
<div class="cal-controls" id="semanal-controls" role="group" aria-label="Navegación de mes">
<button class="button semanal-prev" type="button" aria-label="Mes anterior">&larr;</button>
<div class="cal-title semanal-title" aria-live="polite"></div>
<button class="button semanal-next" type="button" aria-label="Mes siguiente">&rarr;</button>
</div>
<div class="cal" id="semanal-root"></div>
<div class="cal-legend" id="semanal-legend-root"></div>
<script>
(function () {
const monthNames = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
const weekdayNames = ['L','M','X','J','V','S','D'];
const ENRE_EVENTS_URL = 'https://mad.convoca.la/place/42/CSO%20La%20Enredadera';
const COLORS = {
hacklab: { bg:'#39FF14', fg:'#000', label:'Hacklab' },
artlab: { bg:'#39FF14', fg:'#ff00aa', label:'Art-Lab' },
feminismos: { bg:'#6A0DAD', fg:'#fff', label:'Feminismos' },
vivienda: { bg:'#000000', fg:'#ff00aa', label:'Vivienda' },
bicilab: { bg:'#FF7A00', fg:'#000', label:'Bicilab' },
autodefensa: { bg:'#00BCD4', fg:'#fff', label:'Autodefensa' },
fridays: { bg:'#2E8B57', fg:'#fff', label:'Fridays for Future' },
euskera: { bg:'#FF0000', fg:'#00ff00', label:'Euskera' },
asamblea_enre: { bg:'#ff00ff', fg:'#fff', label:'Asamblea Enre' },
asamblea_externas: { bg:'#fff', fg:'#ff00ff', label:'Asamblea ext.' },
montana: { bg:'#8B4513', fg:'#fff', label:'Montaña' },
teatro: { bg:'#4169E1', fg:'#fff', label:'Teatro' }
};
const WEEKLY = [
{ group:'asamblea_externas', dow:0, start:'19:00' },
{ group:'asamblea_enre', dow:0, start:'20:00' },
{ group:'autodefensa', dow:1, start:'20:00' },
{ group:'teatro', dow:2, start:'11:00' },
{ group:'autodefensa', dow:2, start:'20:00' },
{ group:'euskera', dow:2, start:'18:15' },
{ group:'vivienda', dow:3, start:'19:00' },
{ group:'feminismos', dow:3, start:'20:00' },
{ group:'bicilab', dow:6, start:'19:00' },
{ group:'montana', dow:6, start:'10:00' }
];
function createPill(text, bg, fg) {
const pill = document.createElement('div');
pill.className = 'cal-pill';
pill.style.setProperty('--bg', bg);
pill.style.setProperty('--fg', fg);
pill.textContent = text;
pill.setAttribute('role', 'link');
pill.setAttribute('tabindex', '0');
pill.addEventListener('click', () => { window.location.href = ENRE_EVENTS_URL; });
pill.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); window.location.href = ENRE_EVENTS_URL; }
});
return pill;
}
function renderWeeklyPills(cell, wd) {
const todays = WEEKLY.filter(e => e.dow === wd);
if (!todays.length) return;
const wrap = document.createElement('div');
wrap.className = 'cal-pills';
todays.forEach(e => {
const c = COLORS[e.group] || { bg:'#eee', fg:'#000', label: e.group };
wrap.appendChild(createPill(c.label + (e.start ? ' ' + e.start : ''), c.bg, c.fg));
});
cell.appendChild(wrap);
}
const root = document.getElementById('semanal-root');
const legend = document.getElementById('semanal-legend-root');
const title = document.querySelector('.semanal-title');
const btnPrev = document.querySelector('.semanal-prev');
const btnNext = document.querySelector('.semanal-next');
const today = new Date();
let view = new Date();
view.setDate(1);
function buildCalendar(date) {
root.innerHTML = '';
const year = date.getFullYear();
const month = date.getMonth();
title.textContent = monthNames[month] + ' ' + year;
const startIndex = (new Date(year, month, 1).getDay() + 6) % 7;
const daysInMonth = new Date(year, month + 1, 0).getDate();
const fridays = [];
for (let d = 1; d <= daysInMonth; d++) {
if ((new Date(year, month, d).getDay() + 6) % 7 === 4) fridays.push(d);
}
const secondFri = fridays[1];
const lastFri = fridays[fridays.length - 1];
const head = document.createElement('div');
head.className = 'cal-row cal-head';
weekdayNames.forEach(w => {
const cell = document.createElement('div');
cell.className = 'cal-cell cal-head-cell';
cell.textContent = w;
head.appendChild(cell);
});
root.appendChild(head);
let day = 1 - startIndex;
for (let r = 0; r < 6; r++) {
const row = document.createElement('div');
row.className = 'cal-row';
for (let c = 0; c < 7; c++) {
const cell = document.createElement('div');
cell.className = 'cal-cell';
if (day >= 1 && day <= daysInMonth) {
if (year === today.getFullYear() && month === today.getMonth() && day === today.getDate())
cell.classList.add('cal-today');
const num = document.createElement('span');
num.className = 'cal-daynum';
num.textContent = day;
cell.appendChild(num);
const wd = (new Date(year, month, day).getDay() + 6) % 7;
if (wd === 4) {
const wrap = document.createElement('div');
wrap.className = 'cal-pills';
if (day === secondFri)
wrap.appendChild(createPill('Art-Lab', COLORS.artlab.bg, COLORS.artlab.fg));
else
wrap.appendChild(createPill('Hacklab', COLORS.hacklab.bg, COLORS.hacklab.fg));
if (day === secondFri || day === lastFri)
wrap.appendChild(createPill('Fridays 🌱', COLORS.fridays.bg, COLORS.fridays.fg));
cell.appendChild(wrap);
} else {
renderWeeklyPills(cell, wd);
}
} else {
cell.classList.add('cal-empty');
}
row.appendChild(cell);
day++;
}
root.appendChild(row);
}
}
function buildLegend() {
legend.innerHTML = '';
['hacklab','artlab','feminismos','vivienda','bicilab','autodefensa','fridays','euskera','asamblea_enre','montana','teatro']
.forEach(key => {
const c = COLORS[key];
if (!c) return;
const item = document.createElement('div');
item.className = 'cal-legend-item';
const dot = document.createElement('span');
dot.className = 'cal-legend-dot';
dot.style.background = c.bg;
if (c.bg === '#fff') dot.style.border = '1px solid #ff00aa';
const txt = document.createElement('span');
txt.textContent = c.label;
item.appendChild(dot);
item.appendChild(txt);
legend.appendChild(item);
});
}
btnPrev.addEventListener('click', () => { view.setMonth(view.getMonth() - 1); buildCalendar(view); });
btnNext.addEventListener('click', () => { view.setMonth(view.getMonth() + 1); buildCalendar(view); });
buildCalendar(view);
buildLegend();
})();
</script>
</section>
<section id="feminismos">
<h2>Feminismos</h2>
<p><strong>Feminismo Tetuán</strong> es una asamblea de barrio que nace a raíz del movimiento del <strong>8M</strong>.</p>
<a class="colectivo-img-link" href="https://www.instagram.com/feminismostetuan" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/feminismos_tetuan.jpg" alt="Feminismos Tetuán">
</a>
<a class="colectivo-btn" href="https://linktr.ee/FeminismosTetuan?utm_source=ig&utm_medium=social&utm_content=link_in_bio&fbclid=PAZXh0bgNhZW0CMTEAc3J0YwZhcHBfaWQMMjU2MjgxMDQwNTU4AAGnRoxnOqEyhqJxFoRTPlDSH8zvge2GNvrAQDn4Ou98RwCysuYT0AABDgbbFWw_aem_tbCIw3s5HlsIgRoH4D4p1A" target="_blank" rel="noopener">LinkTree</a>
<a class="colectivo-btn" href="https://www.instagram.com/feminismostetuan/" target="_blank" rel="noopener">Instagram</a>
<p>Es una asamblea abierta no mixta transinclusiva. <strong>Nos reunimos los jueves a las 20</strong> en el CSO La Enredadera.</p>
<p>Uno de los temas que más trabajamos es el derecho a la libre intervención del embarazo, ya que en nuestro barrio se encuentra la clínica Dator, la primera clínica en realizar abortos en España.</p>
</section>
<section id="fridays">
<h2>Fridays for Future</h2>
<p>Somos parte del movimiento global juvenil por la Justicia Climática.</p>
<a class="colectivo-img-link" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/photo_5913560549843653631_y.jpg" alt="Fridays for Future Madrid">
</a>
<a class="colectivo-img-link" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/fridays_madrid.jpg" alt="Fridays for Future Madrid">
</a>
<a class="colectivo-btn" href="https://linktr.ee/fridaysforfuturemadrid" target="_blank" rel="noopener">LinkTree</a>
<a class="colectivo-btn" href="https://www.instagram.com/fridaysformadrid/" target="_blank" rel="noopener">Instagram</a>
</section>
<section id="ovt">
<h2>Colectivo de Vivienda</h2>
<p>Asamblea abierta desde donde defendemos que la vivienda es para quien la habita y no un negocio.</p>
<a class="colectivo-img-link" href="https://www.instagram.com/organizacionviviendatetuan/" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/ovt.jpg" alt="Organización Vivienda Tetuán">
</a>
<a class="colectivo-btn" href="https://www.instagram.com/organizacionviviendatetuan/" target="_blank" rel="noopener">Instagram</a>
</section>
<section id="circo">
<h2>Circo</h2>
<p>Información próximamente.</p>
</section>
<section id="hacklab">
<h2>Hacklab</h2>
<a class="colectivo-img-link" href="https://hacklab.laenre.net" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/hacklab.jpeg" alt="Hacklab La Raíz">
</a>
<a class="colectivo-img-link" href="https://hacklab.laenre.net/eventos.html" target="_blank" rel="noopener">
<img class="colectivo-img" src="/INFO/teclado_negro_planta.jpg" alt="">
</a>
<a class="colectivo-btn" href="https://hacklab.laenre.net" target="_blank" rel="noopener">hacklab.laenre.net</a>
</section>
<section id="tienda-gratis">
<h2>Tienda Gratis</h2>
<p>Información próximamente.</p>
</section>
<section id="biblioteka">
<h2>Biblioteca Libre</h2>
<p>Accede a libros, fanzines y documentos sobre activismo, agroecología, tecnología libre y feminismos.</p>
<a class="colectivo-btn" href="/archivos/biblioteca.pdf">Mas información</a>
</section>
<section id="warawas">
<h2>Warawas</h2>
<p>Información próximamente.</p>
</section>
<section id="hongos">
<h2>Hongos</h2>
<p>Información próximamente.</p>
</section>
<section id="fermentos">
<h2>Fermentos</h2>
<p>Información próximamente.</p>
</section>
<section id="bicilab">
<h2>BICILAB</h2>
<p>Bocata de espaguetis todos los domingos a las 17:00 nos engrasamos las manos y recuperamos tu bicicleta!</p>
<a class="colectivo-btn" href="/archivos/asamblea.pdf">Descargar Actas</a>
</section>
<footer>
<p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
<p>📌 Calle de la Coruña nº5, Madrid</p>
<p>⚡ Mastodon: <a href="https://masto.es/@csolaenre">@csolaenre</a></p>
</footer>
</main>
</div>
</body>
</html>