commit web inicial

index.css

@@ -0,0 +1,618 @@
+@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
+
+/* Fuente local Code462W Pink */
+@font-face {
+  font-family: 'Code462WPink';
+  src: url('/Code462WPink-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root{
+  --sidebar-w: 250px;    /* ancho completo */
+  --sidebar-rail: 56px;  /* “raíl” visible en modo plegado */
+}
+
+/* Ocultar visualmente el checkbox */
+.sr-only{
+  position: absolute !important;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0,0,0,0);
+  border: 0;
+}
+
+/* Botón ☰ (solo se muestra en tablet/móvil) */
+.sb-toggle{
+  position: fixed; inset: 8px auto auto 8px;
+  width: 40px; height: 40px;
+  display: none; /* se activa en media queries */
+  align-items: center; justify-content: center;
+  border-radius: 10px;
+  background: #ff00aa; color: #000; font-weight: 800;
+  z-index: 1001;
+  box-shadow: 0 2px 10px rgba(0,0,0,.25);
+  cursor: pointer; user-select: none;
+}
+
+
+body {
+    background: url('/img/fondo.jpg') no-repeat center center fixed;
+    background-size: cover;
+    color: #000;
+    font-family: 'Rock Salt', cursive;
+    margin: 0;
+    padding: 0;
+    display: flex;
+}
+
+.container {
+    display: flex;
+    width: 100%;
+    position: relative;
+}
+
+
+.logo {
+    width: 100%;
+    max-width: 180px;
+    border-radius: 10px;
+}
+
+.imagen {
+    width: 100%;
+    border-radius: 10px;
+
+}
+
+.sidebar{
+  width: var(--sidebar-w);
+  background: #222;
+  color: #fff;
+  padding: 20px;
+  text-align: center;
+  min-height: 100vh;
+  position: fixed; left: 0; top: 0;
+  z-index: 1000;
+  overflow-y: auto;
+  transition: transform .25s ease, width .25s ease;
+}
+
+.sidebar h3 {
+    font-family: 'Rock Salt', cursive;
+    font-size: 1.8em;
+    margin-top: 10px;
+}
+
+.sidebar p {
+    font-size: 0.9em;
+    color: #ccc;
+}
+
+.sidebar-nav {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-nav a {
+    color: white;
+    text-decoration: none;
+    padding: 10px;
+    border-radius: 5px;
+    transition: background 0.1s;
+}
+
+.sidebar-nav a:hover {
+    background: #ff00aa;
+}
+
+main {
+    margin-left: var(--sidebar-w);
+    transition: margin-left .25s ease;
+    flex-grow: 1;
+    padding: 0px 0px;
+    text-align: center;
+    font-size: 0.9em;
+}
+
+header {
+    background: #ff00aa;
+    color: white;
+    padding: 1px;
+    font-size: 2em;
+}
+
+header h1 {
+  font-family: 'Code462WPink', 'Rock Salt', cursive;
+  letter-spacing: 1px;
+}
+
+.top-nav a,
+.top-nav.second a {
+  font-family:  'Rock Salt', cursive;
+  letter-spacing: 3px;
+  font-size: 0.5em;
+}
+
+
+.vertical-marquee {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 20px;
+  writing-mode: vertical-rl;
+  font-family: 'VT323', monospace;
+  font-size: 1em;
+  color: #ff00aa;
+  background-color: transparent;
+  z-index: 999;
+  text-align: center;
+  pointer-events: none;
+}
+
+.left-marquee {
+  left: 0;
+  writing-mode: vertical-lr;
+  transform: rotate(180deg);
+}
+
+.right-marquee {
+  right: 0;
+}
+
+.top-nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap; /* Permite que haya varias filas si no caben */
+  justify-content: center;
+  gap: 5px; /* Espacio entre enlaces */
+}
+
+.top-nav li {
+  margin: 0;
+}
+
+.top-nav a {
+  text-decoration: none;
+  background-color: white;
+  color: black;
+  font-weight: bold;
+  padding: 15px 15px;
+  border-radius: 20px;
+  transition: background 0.3s, color 0.3s;
+  font-size: 0.5em;
+  display: inline-block;
+}
+
+.top-nav a:hover {
+  background: white;
+  color: #ff00aa;
+  text-decoration: none;
+  background-color: white;
+  border: 2px solid #ff00aa;
+  box-shadow: 4px 8px black;
+  border-radius: 12px;
+  padding: clamp(20px, 2vw, 24px);
+  text-align: center;
+  user-select: none;
+
+  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
+
+}
+
+/* Secciones del index: fondo blanco, borde rosa, texto negro */
+section{
+  background: #fff;                 /* fondo blanco */
+  color: #111;                      /* texto negro */
+  padding: 18px 20px;
+  margin: 16px auto;
+  max-width: 6mv;                
+  border: 2px solid #ff00aa;        /* borde rosa */
+  border-radius: 12px;
+  box-shadow: 0 6px 18px rgba(0,0,0,.08);
+  line-height: 1.6;
+}
+
+/* Título de cada sección: rosa con fondo negro */
+section h2{
+  margin: 0 0 12px;
+  display: inline-block;
+  background: #000;                 /* fondo negro */
+  color: #ff00aa;                   /* texto rosa */
+  padding: 8px 12px;
+  border-radius: 8px;
+  letter-spacing: .3px;
+  transition: transform .2s ease, box-shadow .25s ease;
+}
+
+/* Efecto suave al pasar el ratón */
+section h2:hover{
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 4px rgba(255,0,127,.15);
+}
+
+/* Texto de párrafo un poco más legible */
+section p{
+  color: #222;
+  margin: .6rem 0;
+}
+
+
+button {
+    background: #ff00aa;
+    color: black;
+    font-weight: bold;
+    padding: 8px 15px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+button:hover {
+    background: #ff00aa;
+}
+
+
+/* Contenedor centrado y con buen ritmo de lectura */
+.content-page.readable{
+  background:#fff;
+  color:var(--ink);
+  max-width: 860px;
+  margin: 24px auto 64px;   /* centrado */
+  padding: 28px 26px;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.07);
+  line-height: 1.75;
+  font-size: 1.05rem;
+  font-family: 'Quicksand', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  text-align: left;         /* párrafo legible */
+  hyphens: auto;
+  overflow-wrap: anywhere;
+}
+
+/* Títulos centrados, mismo color y un hover elegante */
+.content-page.readable h2,
+.content-page.readable h3{
+  color: var(--accent-2);
+  text-align: center;       /* centrados */
+  margin: 0 0 1rem;
+  letter-spacing: .2px;
+
+  /* subrayado animado con el color actual */
+  background-image: linear-gradient(currentColor, currentColor);
+  background-size: 0% 2px;
+  background-position: left calc(100% - 2px);
+  background-repeat: no-repeat;
+  transition: background-size .35s ease, color .25s ease, transform .2s ease;
+}
+
+.content-page.readable h2{ font-size: 2rem; margin-top: .2rem; }
+.content-page.readable h3{ font-size: 1.25rem; margin-top: 1.6rem; color: var(--accent); }
+
+.content-page.readable h2:hover,
+.content-page.readable h3:hover{
+  background-size: 100% 2px;     /* aparece la línea bonita */
+  transform: translateY(-1px);   /* micro-animación */
+}
+
+/* Párrafos con buen contraste y separación */
+.content-page.readable p{
+  color: var(--ink-soft);
+  margin: .7rem 0;
+}
+
+
+
+
+̣
+
+/* ====== CALENDARIO ====== */
+.cal { 
+  display: grid;
+  gap: 8px;
+  background: #FFFFFF;
+  border: 1px solid rgba(0,255,255,0.18);
+  border-radius: 12px;
+  padding: 10px;
+  box-shadow: 0 0 20px rgba(0,255,255,0.05);
+}
+
+.cal-controls{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin: 6px 0 12px;
+}
+.cal-title{
+  min-width: 220px;
+  text-align: center;
+  font-weight: bold;
+  color: pink;
+  text-shadow: 0 0 8px rgba(0,255,255,0.25);
+}
+
+.cal-row{
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0,1fr));
+  gap: 8px;
+}
+.cal-cell{
+  position: relative;
+  background: #FFFFFF;
+  border: 1px solid rgba(255,0,171,1); /* líneas rosas */
+  border-radius: 8px;
+  min-height: 90px;
+  overflow: hidden;
+  padding-top:28px;
+}
+.cal-head{
+  opacity: 0.9;
+}
+.cal-head-cell{
+  background: #FFFFFFF
+  border: 1px solid rgba(255,0,171,1);
+  text-align: center;
+  font-weight: bold;
+  padding: 8px 0;
+  border: 1px solid rgba(255,0,171,1);
+}
+.cal-daynum{
+  position: absolute;
+  top: 6px; left: 20px;
+  font-size: 0.95rem;
+  color: var(--muted);
+  z-index: 2;
+}
+.cal-empty{
+  background: ;
+  border-style: dashed;
+  opacity: 0.5;
+}
+
+/* celdas con evento: fondo con imagen + overlay oscuro */
+.cal-event{
+  background: ;
+}
+.cal-event::before{
+  content: "";
+  position: absolute; inset: 0;
+  background-image: var(--bgimg);
+  background-size: cover;
+  background-position: center;
+  filter: contrast(1.05) saturate(1.05);
+  opacity: 0.9;
+  transition: transform .25s ease, opacity .2s ease;
+}
+.cal-event::after{
+  content: "";
+  position: absolute; inset: 0;
+  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.6));
+  pointer-events: none;
+}
+.cal-event .cal-label{
+  position: absolute;
+  left: 8px; bottom: 16px;
+  z-index: 2;
+  display: inline-block;
+  background: var(--green);
+  color: #000;
+  border: 1px solid #0f0;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-weight: 700;
+  box-shadow: 0 0 8px rgba(0,255,0,0.35);
+}
+
+.cal-event:hover::before{
+  transform: scale(1.04);
+  opacity: 1;
+}
+
+/* badge leyenda */
+.cal-legend{
+  margin-top: 10px;
+  color: var(--muted);
+}
+.badge{
+  display: inline-block;
+  border: 1px solid rgba(0,255,0,0.5);
+  color: var(--green);
+  padding: 2px 6px;
+  border-radius: 6px;
+  margin-right: 6px;
+}
+
+/* --- Corrección de typo existente --- */
+.cal-head-cell{
+  background: #FFFFFF;                /* antes tenías #FFFFFFF */
+  border: 1px solid rgba(255,0,171,1);
+  text-align: center;
+  font-weight: bold;
+  padding: 8px 0;
+}
+
+/* --- Ajustes de celda para que quepan las tiras --- */
+.cal-cell{
+  min-height: 110px;                  /* un poco más alta */
+  padding-top: 22px;                  /* deja hueco al número del día */
+}
+
+/* Contenedor vertical de tiras */
+.cal-pills{
+  position: relative;
+  z-index: 3;                         /* por encima de ::before/::after */
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 15px;
+}
+
+/* Tira (pill) de cada colectivo */
+.cal-pill{
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid rgba(0,0,0,.15);
+  border-radius: 6px;
+  padding: 3px 6px;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 1.1;
+  box-shadow: 0 0 6px rgba(0,0,0,.06);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cal-pill:hover{
+  filter: brightness(1.05);
+  box-shadow: 0 0 10px rgba(0,0,0,.12);
+}
+
+/* ========== TELÉFONOS PEQUEÑOS (<= 480px) ========== */
+@media (max-width: 480px){
+  html{ font-size: 9px; }              /* baja toda la escala */
+  body{ overflow-x: hidden; }
+ .vertical-marquee{ display:none !important; }
+  body{ flex-direction: column; overflow-x: hidden; }
+  .container{ width:100%; position: relative; }
+  main{ margin-left: 0 !important;  font-size: 1rem; }
+  header{ padding: 16px 12px; font-size: 1.05em; }
+
+  /* Hamburguesa + sidebar superpuesta */
+  .sb-toggle{ display:flex; }
+  .sidebar{
+    position: fixed; left: 0; top: 0; bottom: 0;
+    width: min(82vw, 300px);
+    background: #222; color:#fff;
+    transform: translateX(-100%);
+    z-index: 1000; overflow-y:auto; padding:20px;
+  }
+  #nav-toggle:checked ~ .container .sidebar{ transform: translateX(0); }
+  #nav-toggle:checked ~ .container::before{
+    content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999;
+  }
+
+  /* Nav superior como chips */
+  .top-nav ul, .top-nav.second ul{
+    display:flex; flex-wrap:wrap; justify-content:center;
+    gap:6px; padding:0 6px; margin:10px 0 0;
+  }
+  .top-nav li, .top-nav.second li{ list-style:none; }
+  .top-nav a, .top-nav.second a, .top-nav2 a{
+    display:block; padding:6px 10px; font-size:.9em;
+    border:1px solid #ff00aa; border-radius:18px;
+    background:#fff; color:#000; text-decoration:none;
+  }
+
+  /* Secciones y contenido */
+  section{ margin:12px 0; padding:12px; border-radius:10px; }
+  section h2{ font-size:2rem; }
+  .content-page.readable{ max-width:100%; margin:16px auto 36px; padding:14px; font-size:1rem; line-height:1.7; }
+  button{ font-size:.9em; padding:8px 12px; }
+  footer{ font-size:.85em; padding:14px 0; }
+
+  /* ====== CALENDARIO (sin scroll lateral) ====== */
+  .cal{ width:100%; padding:8px; gap:4px; border-radius:10px; }
+  .cal-row{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
+  .cal-cell{ min-height:56px; padding-top:18px; }
+  .cal-daynum{ font-size:.15rem; top:6px; left:6px; z-index:2; }
+  .cal-pills{ gap:7px; margin-top:6px; }
+  .cal-pill{ font-size:.4rem; padding:2px 4px; }
+  .cal-head .cal-head-cell{ padding:6px 0; font-size:.9rem; }
+}
+
+/* ========== MÓVILES / TABLETS VERTICALES (481px–768px) ========== */
+@media (min-width: 481px) and (max-width: 768px){
+
+  .vertical-marquee{ display:none !important; }
+  main{ margin-left:0 !important; font-size:1rem; }
+  header{ font-size:1.2em; }
+
+  /* Hamburguesa + sidebar superpuesta */
+  .sb-toggle{ display:flex; }
+  .sidebar{
+    position: fixed; left:0; top:0; bottom:0;
+    width: min(78vw, 320px);
+    background:#222; color:#fff;
+    transform: translateX(-100%);
+    z-index:1000; overflow-y:auto; padding:20px;
+  }
+  #nav-toggle:checked ~ .container .sidebar{ transform: translateX(0); }
+  #nav-toggle:checked ~ .container::before{
+    content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999;
+  }
+
+  /* Nav superior */
+  .top-nav ul, .top-nav.second ul{
+    display:flex; flex-wrap:wrap; justify-content:center;
+    gap:8px; padding:0; margin:12px 0 0;
+  }
+  .top-nav li, .top-nav.second li{ list-style:none; }
+  .top-nav a, .top-nav.second a, .top-nav2 a{
+    display:block; padding:8px 12px; font-size:.95em;
+    border:1px solid #ff00aa; border-radius:20px;
+    background:#fff; color:#000; text-decoration:none;
+  }
+
+  section{ max-width:100%; margin:14px 0; padding:14px; border-radius:12px; }
+  section h2{ font-size:1.1rem; }
+  .content-page.readable{ max-width:92vw; margin:18px auto 48px; padding:18px; font-size:1.02rem; line-height:1.75; }
+  button{ font-size:1em; padding:10px 16px; }
+  footer{ font-size:.95em; padding:16px 0; }
+
+  /* Calendario fluido (sin scroll lateral) */
+  .cal{ width:100%; padding:10px; gap:6px; border-radius:12px; }
+  .cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
+  .cal-cell{ min-height:70px; padding-top:20px; }
+  .cal-daynum{ font-size:1rem; top:6px; left:8px; z-index:2; }
+  .cal-pills{ gap:5px; margin-top:8px; }
+  .cal-pill{ font-size:11px; padding:3px 5px; }
+  .cal-head .cal-head-cell{ padding:8px 0; font-size:1rem; }
+}
+
+/* ========== TABLETS HORIZONTALES / PORTÁTILES PEQUEÑOS (769px–1024px) ========== */
+@media (min-width: 769px) and (max-width: 1024px){
+
+  .vertical-marquee{ display:none !important; }
+
+  /* Sidebar en “raíl” por defecto + hamburguesa */
+  .sb-toggle{ display:flex; }
+  .sidebar{
+    position: fixed; left:0; top:0; bottom:0;
+    width: var(--sidebar-w);
+    background:#222; color:#fff;
+    transform: translateX(calc(-100% + var(--sidebar-rail)));
+    z-index:1000; overflow-y:auto; padding:20px;
+  }
+  main{ margin-left: var(--sidebar-rail) !important; }
+  #nav-toggle:checked ~ .container .sidebar{ transform: translateX(0); }
+  #nav-toggle:checked ~ .container main{ margin-left: var(--sidebar-w) !important; }
+
+  header{ font-size:1.4em; padding:24px; }
+
+  .top-nav ul, .top-nav.second ul{
+    display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:0;
+  }
+  .top-nav li, .top-nav.second li{ list-style:none; }
+  .top-nav a, .top-nav.second a{ font-size:1em; padding:10px 15px; }
+
+  section{ padding:20px; max-width:90%; margin:12px auto; }
+  button{ font-size:1em; padding:12px 22px; }
+  footer{ font-size:1em; padding:22px; }
+
+  /* Calendario (compacto, sin desbordes) */
+  .cal{ width:100%; padding:10px; gap:6px; border-radius:12px; }
+  .cal-row{ grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
+  .cal-cell{ min-height:84px; padding-top:22px; }
+  .cal-daynum{ font-size:1rem; }
+  .cal-pills{ margin-top:8px; gap:6px; }
+  .cal-pill{ font-size:12px; }
+}
+
+

index.html

@@ -0,0 +1,306 @@
+
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <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">
+  <link rel="stylesheet" href="/index.css">
+</head>
+<body>
+ <input type="checkbox" id="nav-toggle" class="sr-only">
+ <label for="nav-toggle" class="sb-toggle" aria-label="Abrir/cerrar menú">☰</label>
+  <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">
+        <ul>
+          <li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li>
+          <li><a href="https://okupanel.laenre.net">Actividades</a></li>
+          <li><a href="https://mad.convoca.la/place/CSO%20La%20Enredadera">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#yoga">yoga</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="/#circo/">circo</a></li>
+            <li><a href="https://hacklab.laenre.net">hacklab la raiz</a></li>
+            <li><a href="/#tienda_gratis/">tienda gratis</a></li>
+            <li><a href="/#biblioteka/">biblioteka</a></li>
+            <li><a href="/#Warawas/">warawas</a></li>
+            <li><a href="/#Hongos/">hongos</a></li>
+            <li><a href="/#Fermentos/">fermentos</a></li>
+            <li><a href="/#bicilab/">bicilab</a></li>
+
+          </ul>
+        </nav>
+      </header>
+      
+
+
+      <!-- CALENDARIO MENSUAL (AUTO) -->
+      <section id="agenda" class="panel" aria-label="Calendario mensual">
+        <h2>Calendario</h2>
+        <div class="cal-controls" role="group" aria-label="Navegación de mes">
+          <button class="button cal-prev" type="button" aria-label="Mes anterior">&larr;</button>
+          <div class="cal-title" aria-live="polite"></div>
+          <button class="button cal-next" type="button" aria-label="Mes siguiente">&rarr;</button>
+        </div>
+
+	<div class="cal" id="cal-root">
+	  <!-- Aquí el JS pintará el calendario -->
+	</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']; // lunes primero (ES)
+
+                     // Paleta por colectivo
+                     const COLORS = {
+                            hacklab:      { bg:'#39FF14', fg:'#000' },   // verde neón + negro (original)
+                            feminismos:   { bg:'#6A0DAD', fg:'#fff' },   // morado + blanco
+                            vivienda:     { bg:'#000000', fg:'#ff00aa' },// negro + rosa
+                            circo:        { bg:'#FFD400', fg:'#000' },   // amarillo + negro
+                            bicilab:      { bg:'#FF7A00', fg:'#000' },   // naranja + negro
+                            autodefensa:  { bg:'#00BCD4', fg:'#fff' },   // cian + blanco
+                            fridays:      { bg:'#2E8B57', fg:'#fff' }    // verde oscuro + blanco
+                     };
+
+                     // Horarios semanales (sin viernes: se gestionan aparte)
+                     const WEEKLY = [
+                            { group:'vivienda',    dow:3, start:'19:00', end:'21:00' }, // jueves
+                            { group:'circo',       dow:0, start:'18:00', end:'21:00' }, // lunes
+                            { group:'circo',       dow:2, start:'18:00', end:'21:00' }, // miércoles
+                            { group:'feminismos',  dow:2, start:'19:30', end:'21:30' }, // miércoles
+                            { group:'bicilab',     dow:6, start:'17:00', end:'20:00' }, // domingo
+                            { group:'autodefensa', dow:1, start:'20:00', end:'22:00' }, // martes
+                            { group:'autodefensa', dow:2, start:'20:00', end:'22:00' }  // miércoles
+                            
+                     ];
+
+                     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;
+                            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 { bg, fg } = COLORS[e.group] || { bg:'#eee', fg:'#000' };
+                                   const name = e.group.charAt(0).toUpperCase() + e.group.slice(1);
+                                   wrap.appendChild(createPill(`${name} ${e.start}-${e.end}`, bg, fg));
+                            });
+                            cell.appendChild(wrap);
+                     }
+
+                     const root    = document.getElementById('cal-root');
+                     const title   = document.querySelector('.cal-title');
+                     const btnPrev = document.querySelector('.cal-prev');
+                     const btnNext = document.querySelector('.cal-next');
+
+                     let view = new Date(); // hoy
+                     view.setDate(1);       // primer día del mes
+
+                     function buildCalendar(date){
+                            root.innerHTML = '';
+
+                            const year  = date.getFullYear();
+                            const month = date.getMonth();
+                            title.textContent = monthNames[month] + ' ' + year;
+
+                            // semanas empiezan en lunes
+                            const first = new Date(year, month, 1);
+                            let startIndex   = (first.getDay() + 6) % 7;
+                            const daysInMonth= new Date(year, month + 1, 0).getDate();
+
+                            // localizar viernes del mes
+                            const fridays = [];
+                            for (let d = 1; d <= daysInMonth; d++){
+                                   const wd = (new Date(year, month, d).getDay() + 6) % 7;
+                                   if (wd === 4) fridays.push(d);
+                            }
+                            const secondFri = fridays[1]; // 2º viernes
+
+                            // cabecera
+                            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);
+
+                            // grid 6x7
+                            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){
+                                                 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; // lunes=0
+
+                                                 if (wd === 4){
+                                                        // VIERNES: por defecto en blanco
+                                                        // 2º viernes -> ART-LAB (neón + rosa)
+                                                        // 1º/3º/4º/5º -> HACKLAB (neón + negro)
+                                                        const wrap = document.createElement('div');
+                                                        wrap.className = 'cal-pills';
+                                                        if (day === secondFri){
+                                                               wrap.appendChild(createPill('ART-LAB', '#39FF14', '#ff00aa'));
+                                                        } else {
+                                                               wrap.appendChild(createPill('HACKLAB', '#39FF14', '#000'));
+                                                        }
+                                                        cell.appendChild(wrap);
+                                                 } else {
+                                                        // Resto: semanales normales con sus colores
+                                                        renderWeeklyPills(cell, wd);
+                                                 }
+                                          } else {
+                                                 cell.classList.add('cal-empty');
+                                          }
+
+                                          row.appendChild(cell);
+                                          day++;
+                                   }
+                                   root.appendChild(row);
+                            }
+                     }
+
+                     function shiftMonth(delta){
+                            view.setMonth(view.getMonth() + delta);
+                            buildCalendar(view);
+                     }
+
+                     btnPrev.addEventListener('click', () => shiftMonth(-1));
+                     btnNext.addEventListener('click', () => shiftMonth(1));
+
+                     buildCalendar(view);
+              })();
+       </script>
+
+
+
+
+
+
+      </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>
+        <button <a href="https://okupanel.laenre.net">Twitter</button>
+      </section>
+
+      <section id="yoga">
+        <h2> Colectivo de Yoga</h2>
+        <p>Sesiones abiertas y gratuitas de yoga, meditación y respiración consciente. Espacio de bienestar colectivo.</p>
+      </section>
+
+      <section id="feminismos">
+        <h2> Feminismos</h2>
+        <p>Organizamos talleres, círculos de lectura y encuentros de autodefensa. Un espacio para el debate y la acción feminista autónoma.</p>
+      </section>
+
+      <section id="fridays">
+        <h2>Fridays for Future</h2>
+        <p>Movilización climática juvenil, asambleas abiertas y acciones directas para la justicia ambiental y el decrecimiento.</p>
+      </section>
+
+
+      <section id="hacklab">
+        <h2> Hacklab</h2>
+        <p>Espacio de tecnología libre, hacking ético y ciberseguridad. Nos reunimos semanalmente para compartir conocimientos sobre privacidad digital, redes descentralizadas y criptografía.</p>
+        <button onclick=https://hacklab.laenre.net>hacklab.laenre.net</button>
+      </section>
+
+      <section id="musica_andina">
+        <h2>🎶Colectivo de Música Andina</h2>
+        <p>Preservamos y difundimos la música tradicional andina como herramienta de resistencia cultural.</p>
+        <button onclick="window.location.href='/archivos/musica_andina.pdf'">📥 Descargar Cancionero</button>
+      </section>
+
+      <section id="tatus">
+        <h2>🖋️Tatus circus</h2>
+        <p>Tatuajes artesanales con simbología política, tribal y de resistencia callejera.</p>
+        <button onclick="window.location.href='/archivos/tatus_warrix.pdf'">📥 Descargar Portafolio</button>
+      </section>
+
+      <section id="artistico">
+        <h2> Colectivo Artístico</h2>
+        <p>Muralismo, arte urbano, intervenciones visuales y talleres de creación colaborativa.</p>
+        <button onclick="window.location.href='/archivos/artistico.pdf'">📥 Descargar Dossier</button>
+      </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>
+        <button onclick="window.location.href='/archivos/asamblea.pdf'">📥 Descargar Actas</button>
+      </section>
+
+      <section id="biblioteca">
+        <h2>📚 Biblioteca Libre</h2>
+        <p>Accede a libros, fanzines y documentos sobre activismo, agroecología, tecnología libre y feminismos.</p>
+        <button onclick="window.location.href='/archivos/biblioteca.pdf'">Mas información</button>
+      </section>
+
+      <footer>
+        <p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
+        <p>📌 Plaza de la Resistencia, Local 3, Madrid</p>
+        <p>⚡ Mastodon: <a href="https://mastodon.social/@laenre">@laenre@mastodon.social</a></p>
+      </footer>
+    </main>
+  </div>
+</body>
+</html>

info.txt

@@ -0,0 +1,13 @@
+Font: Code 462W/Pink -Regular
+
+Hi! Thank you for downloading this font. My fonts are free for personal use. 
+If you want to use one of my fonts for your commercial project, you can buy 
+the commercial license by sending me 25€ / 25$ through Paypal 
+to address: junkohanhero@gmail.com  
+You can also use the Donate button on 1001 Fonts or Dafont. 
+Regular donations are also welcome. 
+
+
+instagram.com/junkohanhero
+tiktok.com/@junkohanhero
+facebook.com/junkohanhero

subdir/campa.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>La Enredadera de Tetuán — Campañas</title>
+  <link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf">
+  <link rel="stylesheet" href="/index.css">
+</head>
+<body>
+  <div class="container">
+    <!-- Marquesinas laterales -->
+    <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>
+
+    <!-- Sidebar -->
+    <aside 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">
+        <ul>
+          <li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li>
+          <li><a href="https://okupanel.laenre.net">Actividades</a></li>
+          <li><a href="https://mad.convoca.la/place/CSO%20La%20Enredadera">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://twitter.com/Laenredadera">Twitter</a></li>
+        </ul>
+      </nav>
+    </aside>
+
+    <!-- Contenido principal -->
+    <main class="main-content">
+      <header>
+        <h1>CSO LA ENREDADERA DE TETUÁN</h1>
+
+        <!-- Respeto tu último nav tal cual -->
+        <nav class="top-nav">
+          <ul>
+            <li><a href="/campa.html/">CAMPAÑAS</a></li>
+            <li><a href="/">Inicio</a></li>
+            <li><a href="https://hacklab.laenre.net">Hacklab</a></li>
+            <li><a href="/index.html#yoga">Yoga</a></li>
+            <li><a href="/index.html#feminismo">Feminismos</a></li>
+            <li><a href="/index.html#fridays">F.F.F</a></li>
+            <li><a href="/index.html#OVT">OVt</a></li>
+          </ul>
+        </nav>
+        <nav class="top-nav second">
+          <ul>
+            <li><a href="/#musica_andina/">Música Andina</a></li>
+            <li><a href="/#biblioteka/">Biblioteka</a></li>
+            <li><a href="/#Warawas/">Warawas</a></li>
+            <li><a href="/#felines/">Felines</a></li>
+            <li><a href="/#Hongos/">Hongos</a></li>
+            <li><a href="/#Fermentos/">Fermentos</a></li>
+            <li><a href="/#bicilab/">Bicilab</a></li>
+          </ul>
+        </nav>
+      </header>
+
+      <!-- Intro campañas -->
+      <section id="presentacion">
+        <h2>📣 Campañas</h2>
+        <p>
+          Aquí reunimos las campañas que impulsamos desde La Enredadera y con el barrio:
+          defensa de vivienda, espacios comunes, apoyo mutuo y cultura libre.
+          Súmate, difunde y participa en las asambleas abiertas.
+        </p>
+      </section>
+
+      <!-- Campañas activas -->
+      <section id="activas">
+        <h2>🔥 Activas</h2>
+
+        <h3>Stop Desahucios Tetuán</h3>
+        <p>
+          Red de apoyo vecinal para frenar desahucios, acompañar a familias y presionar por soluciones reales.
+        </p>
+        <p>
+          <button onclick="window.location.href='#'">🗓️ Próximas convocatorias</button>
+          <button onclick="window.location.href='#'">📥 Cartelería / materiales</button>
+        </p>
+
+        <h3>Barrios Vivos: Espacio Público para la Gente</h3>
+        <p>
+          Recuperar plazas y calles para la vida social, el juego, la cultura y el encuentro, frente a la especulación y el coche.
+        </p>
+        <p>
+          <button onclick="window.location.href='#'">📝 Propuestas ciudadanas</button>
+          <button onclick="window.location.href='#'">📥 Dossier de campaña</button>
+        </p>
+
+        <h3>Red de Cuidados y Apoyo Mutuo</h3>
+        <p>
+          Red comunitaria para acompañamiento a mayores, comedores vecinales, ropero y banco de alimentos.
+        </p>
+        <p>
+          <button onclick="window.location.href='#'">🤝 Cómo sumarte</button>
+          <button onclick="window.location.href='#'">📥 Recursos y guías</button>
+        </p>
+      </section>
+
+      <!-- Campañas pasadas / histórico -->
+      <section id="historico">
+        <h2>📚 Histórico</h2>
+        <ul>
+          <li>Defensa de Centros Sociales (2009–2024)</li>
+          <li>Escuela Pública y de Barrio</li>
+          <li>Huertos Urbanos Comunitarios</li>
+          <li>Cultura Libre y Fiestas Populares</li>
+        </ul>
+        <p>
+          Si quieres consultar materiales antiguos, escríbenos a
+          <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a>.
+        </p>
+      </section>
+
+      <footer>
+        <p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
+        <p>📌 Plaza de la Resistencia, Local 3, Madrid</p>
+        <p>⚡ Mastodon: <a href="https://mastodon.social/@laenre">@laenre@mastodon.social</a></p>
+      </footer>
+    </main>
+  </div>
+</body>
+</html>

subdir/contacto.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <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">
+  <link rel="stylesheet" href="/index.css">
+</head>
+<body>
+  <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 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">
+        <ul>
+          <li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li>
+          <li><a href="https://okupanel.laenre.net">Actividades</a></li>
+          <li><a href="https://mad.convoca.la/place/CSO%20La%20Enredadera">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="/subdir/campa.html">campañas</a></li>
+            <li><a href="/">inicio</a></li>
+            <li><a href="https://hacklab.laenre.net">hacklab</a></li>
+            <li><a href="/index.html#yoga">yoga</a></li>
+            <li><a href="/index.html#feminismos">feminismos tetuan</a></li>
+            <li><a href="/index.html#fridays">f.f.f</a></li>
+            <li><a href="/index.html#OVT">ovt</a></li>
+          </ul>
+        </nav>
+        <nav class="top-nav second">
+          <ul>
+            <li><a href="/#circo/"></a>circo</li>
+            <li><a href="/#circo/"></a>Tienda Gratis</li>
+            <li><a href="/#biblioteka/">biblioteka</a></li>
+            <li><a href="/#Warawas/">warawas</a></li>
+            <li><a href="/#Hongos/">hongos</a></li>
+            <li><a href="/#Fermentos/">fermentos</a></li>
+            <li><a href="/#bicilab/">bicilab</a></li>
+          </ul>
+        </nav>
+      </header>
+
+
+      <footer>
+        <p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
+        <p>📌 Calle de la coruña nº5</p>
+        <p>⚡ Mastodon: <a href="https://mastodon.social/@laenre">@laenre@mastodon.social</a></p>
+      </footer>
+    </main>
+  </div>
+</body>
+</html>
+

subdir/contacto.html.save

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <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">
+  <link rel="stylesheet" href="/index.css">
+</head>
+<body>
+  <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 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">
+        <ul>
+          <li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li>
+          <li><a href="https://okupanel.laenre.net">Actividades</a></li>
+          <li><a href="https://mad.convoca.la/place/CSO%20La%20Enredadera">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="/subdir/campa.html">campañas</a></li>
+            <li><a href="/">inicio</a></li>
+            <li><a href="https://hacklab.laenre.net">hacklab</a></li>
+            <li><a href="/index.html#yoga">yoga</a></li>
+            <li><a href="/index.html#feminismos">feminismos tetuan</a></li>
+            <li><a href="/index.html#fridays">f.f.f</a></li>
+            <li><a href="/index.html#OVT">ovt</a></li>
+          </ul>
+        </nav>
+        <nav class="top-nav second">
+          <ul>
+            <li><a href="/#circo/"></a>circo</li>
+            <li><a href="/#circo/"></a>Tienda Gratis</li>
+            <li><a href="/#biblioteka/">biblioteka</a></li>
+            <li><a href="/#Warawas/">warawas</a></li>
+            <li><a href="/#Hongos/">hongos</a></li>
+            <li><a href="/#Fermentos/">fermentos</a></li>
+            <li><a href="/#bicilab/">bicilab</a></li>
+          </ul>
+        </nav>
+      </header>
+
+      <section id="ovt">
+        <h2> Ven a conocernos!</h2>
+        <p>Asamblea externos los lunes a las 19:00 - 20:00 </p>
+        <button <a href="https://okupanel.laenre.net">ACTIVIDADES COLECTIVES</button>
+        <button <a href="https://www.laenre.net/subdir/sobre_nosotrxs.html">SOBRE NOSOTRES</button>
+        <button <a href="https://www.laenre.net/#calendario">EVENTOS</button>
+        <button <a href="https://www.laenre.net/valores.html">CARTA DE VALORES</button>
+      </section>
+
+
+      <footer>
+        <p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
+        <p>📌 Calle de la coruña nº5</p>
+        <p>⚡ Mastodon: <a href="https://mastodon.social/@laenre">@laenre@mastodon.social</a></p>
+      </footer>
+    </main>
+  </div>
+</body>
+</html>
+

subdir/sobre_nosotrxs.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>La Enredadera de Tetuán — Sobre Nosotrxs</title>
+
+  <!-- Fuentes/estilos globales del sitio -->
+  <link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf" crossorigin>
+  <link rel="stylesheet" href="/index.css" />
+</head>
+<body>
+  <div class="container">
+    <!-- Marquesinas laterales -->
+    <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 &lt;3
+      </marquee>
+    </div>
+
+    <aside 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">
+        <ul>
+          <li><a href="/subdir/sobre_nosotrxs.html">Sobre Nosotrxs</a></li>
+          <li><a href="https://okupanel.laenre.net">Actividades</a></li>
+          <li><a href="https://t.me/laenredadera">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://twitter.com/Laenredadera">Twitter</a></li>
+        </ul>
+      </nav>
+    </aside>
+
+    <!-- Contenido principal -->
+    <main class="main-content">
+      <header>
+        <h1>CSO LA ENREDADERA DE TETUÁN</h1>
+
+        <nav class="top-nav">
+          <ul>
+            <li><a href="/">Inicio</a></li>
+            <li><a href="/CAMPAÑAS/">Campañas</a></li>
+            <li><a href="/colectivos/">Colectivos</a></li>
+            <li><a href="/feminismos/">Feminismos</a></li>
+            <li><a href="/hacklab/">Hacklab</a></li>
+            <li><a href="/OVT/">O.v.t</a></li>
+            <li><a href="/yoga/">Yoga</a></li>
+            <li><a href="/fridays/">Fridays for Future</a></li>
+          </ul>
+        </nav>
+
+        <nav class="top-nav second">
+          <ul>
+            <li><a href="/Musica_andina/">Música Andina</a></li>
+            <li><a href="/biblioteka/">Biblioteka</a></li>
+            <li><a href="/Warawas/">Warawas</a></li>
+            <li><a href="/felines/">Felines</a></li>
+            <li><a href="/Hongos/">Hongos</a></li>
+            <li><a href="/Fermentos/">Fermentos</a></li>
+            <li><a href="/Bicilab/">Bicilab</a></li>
+          </ul>
+        </nav>
+      </header>
+
+      <!-- Página: Sobre Nosotrxs -->
+      <article class="content-page readable">
+        <h2>Sobre Nosotrxs</h2>
+
+        <h3>QUIÉNES SOMOS</h3>
+        <p>Somos un grupo muy diverso de vecinxs de Tetuán.</p>
+        <p>Algunxs vivimos en el barrio desde hace muchos años, otrxs hemos llegado recientemente o simplemente venimos de visita de vez en cuando, porque Tetuán es un buen «barrio de acogida«.</p>
+        <p>Algunxs somos jóvenes, otrxs ya tenemos alguna edad aunque conservamos un corazón joven aún.</p>
+        <p>Algunxs somos de España, otrxs muchxs venimos de otros países: de Latinoamérica, de Asia, del norte de África, de otros países de Europa o de otros rincones del planeta.</p>
+        <p>Algunxs tenemos un trabajo, otrxs estamos paradxs y buscamos empleo.</p>
+        <p>Algunxs participamos en alguna asociación del barrio, otrxs no lo hacemos, pero nos gusta comunicarnos, conocer qué está pasando en nuestro barrio y no quedarnos quietxs.</p>
+        <p>Eso es lo que somos: un grupo muy diverso de personas que se encuentran, comparten ideas, piensan, sienten, reflexionan, se organizan, aprenden, crecen, se empoderan y por supuesto, sueñan y bailan.</p>
+        <p>Un montón de gente muy diferente, pero conectadas unas con otras, con la intención de acercarse, re-conocerse y construir un barrio más justo y solidario.</p>
+        <p>Entendemos La Enredadera como un espacio para la transformación social, donde aprendemos a relacionarnos de manera diferente, eliminando las relaciones de poder y donde damos pasos para construirnos como seres más libres. Intentamos generar herramientas para cambiar verdades inamovibles de nuestra vida y de nuestra sociedad, cambiar un sistema que nos oprime, basado en desigualdades y en la explotación del planeta.</p>
+        <p>¿No te dan ganas de conocernos? 🙂</p>
+
+        <h3>CÓMO EMPEZÓ TODO ESTO</h3>
+        <p>Esa es una buena pregunta… seguramente todas las personas que participamos en la Enredadera podríamos contar una historia diferente de cuándo pisamos la Enre por primera vez. O de quién nos contó acerca de ella, o qué estaba ocurriendo el primer día que asomamos la cabeza por la puerta. Como en casi todo, aquí cada unx tiene su historia!</p>
+        <p>Pero podemos contarles sobre cómo surgió la idea de okupar un Centro Social para el Barrio.</p>
+        <p>Durante el final de 2007 y todo el año 2008, un grupo de vecinas y vecinos de la zona de Bellas Vistas habían estado, durante meses, organizando y disfrutando actividades en plena calle. La intención era recuperar el espacio público, recordarnos que la calle es de todos y todas y que merece la pena habitarla y encontrarnos con otrxs vecinxs en ella. En esa época entre cada vez más vecinxs, organizamos varios Mercadillos de Trueque, en la plaza de la calle Tenerife esq. San Raimundo, y también juegos callejeros, dos Pasacalles por un Barrio Mestizo y Solidario y, para culminar, todo un verano de sesiones de cine nocturno en plena calle.</p>
+        <p>En ese entonces, terminando el verano de 2008, el grupo de gente que ya nos íbamos conociendo más, empezamos a ver que el otoño se acercaba y que se hacía necesario encontrar un lugar donde seguir reuniéndonos, charlando, jugando, viendo cine y pensando cómo podríamos hacer de Tetuán un barrio más habitable.</p>
+        <p>Y fue así que, pensando, esas personas decidimos okupar un edificio abandonado en el barrio de Tetuán, para que el mal tiempo no fuese un problema para todo el entusiasmo y la ilusión que teníamos en nuestro proyecto. Y durante la navidad de 2008, con mucho frío, algunas personas entramos en el edificio que ahora conocemos, que entonces aún no se llamaba Enredadera, y que estaba realmente en mal estado, porque los edificios que se dejan abandonados, como quizás ya sabrán, se llenan pronto de basura, ratas, goteras, humedades, y escombros. Pero como teníamos muchas ganas de utilizar ese espacio, trabajamos durante varios meses y en Junio de 2009, oficialmente, abrió las puertas La Enredadera, con una bonita fiesta de inauguración en la que armamos un pequeño taller de radio en plena calle, samba, payasos y hasta un dragón chino que vino desde China para apoyarnos!</p>
+        <p>Y desde entonces… pues han pasado muchas cosas! Mucha gente nos hemos ido acercando y conociendo, y muchas actividades, muchos aprendizajes y muchas cosas que nos hemos enseñado unxs a otrxs…. y hasta un desalojo judicial, en Febrero de 2010! Y una amenaza de precinto iniciada en verano de 2016 por parte del Ayuntamiento de Madrid! Pero, como advertíamos, La Enre No Se Toca y aquí seguimos, llevando a cabo todo aquello que no hemos dejado de soñar ni por un minuto!</p>
+
+        <h3>CÓMO VEMOS NUESTRO BARRIO</h3>
+        <p>Tetuán es un barrio muy diverso, ¿no creen?</p>
+        <p>En sus calles se encuentran personas de muchos países diferentes, que hablan lenguas muy distintas; hay jóvenes y no tan jóvenes, hay diferentes rostros, diferentes modas, diferentes peinados y muchas formas distintas de vestir, cantar, reír, bailar…</p>
+        <p>Sí, ¿verdad? Nuestro barrio es muy variado! Hay calles que parecen ser de un pequeño pueblito y hay grandes avenidas que van llenas de coches… demasiados coches, es cierto, en nuestro barrio el tráfico es bien cansado, aunque ya mucha gente se decide a coger la bici porque tanto coche hace que el aire sea difícil de respirar.</p>
+        <p>¿Pero por donde íbamos? ¡ah, sí! En nuestro barrio, que es muy variado, todavía quedan personas mayores que viven aquí desde hace muchos años, cuando Tetuán era – dicen – un pueblo humilde a las afueras de Madrid. Esta gente nos cuenta que antes, en Tetuán (o Tetuán de las Victorias, como se llamaba), era habitual que los niños y las niñas jugasen en la calle, tranquilos, porque apenas había tráfico de coches; sólo a veces cruzaban las carretas de los traperos, que abundaban entonces en nuestras calles. También nos cuentan que era muy frecuente que la gente sacase sus sillas a la puerta, para charlar con lxs demás vecinxs; como si la calle fuese una sala más de sus casas; como si compartiesen un «salón» grande con el resto del vecindario, y charlar, y comer, y tomar el sol si es que sol había.</p>
+        <p>Eso es algo que ahora no encontramos mucho en Tetuán. La calle no es fácil de habitar en estos días, apenas hay espacios abiertos y tranquilos, como parques o plazas, más bien abundan las avenidas y los coches, que pasan sin parar (como sucede a lo largo de Bravo Murillo, General Yagüe, Lope de Haro… ¿ya vieron?). Con ese panorama, mucha gente opta por refugiarse en sus casas, sin hacer mucha vida en la calle y, por tanto, sin poder conocer a otra gente del barrio. Pero eso nos parece un poco triste, porque desde tu salón es más difícil encontrarse con otras personas del barrio, ¿no creen?</p>
+        <p>Además, por si no fuera suficiente con el tráfico, en el barrio, como en todo Madrid, hay muchísima policía! ¿para qué tanta? Dicen que supuestamente para «controlar la delincuencia», pero en realidad los agentes se pasean por la calle con sus carros, armados e intimidando a un montón de gente humilde y callejera, a veces molestando a las personas que juegan dominó en la plaza del Poeta Leopoldo de Luis, a menudo pidiendo la documentación a la gente del barrio que pasa por la calle, en la Glorieta de Bravo Murillo, en Plaza de Castilla, con la intención de detener a nuestros vecinos y vecinas que no tienen documentos…. ¿¡qué delito es no tener papeles!?</p>
+        <p>Y la misma policía también saca a veces por la fuerza a personas que okupan casas o edificios de gente rica y que llevan abandonados muchos años, para reutilizarlos y darles un uso, porque ya saben que la vivienda está muy muy cara en Tetuán, como en Madrid. Y hay gente que ya dice que «ya es suficiente» y se mete en una casa abandonada para arreglarla y hacerla su hogar, pero la policía les molesta y les echa a la calle, y eso nos parece injusto, porque es una injusticia que con la necesidad de viviendas que hay, haya casas vacías en el barrio porque a sus propietarios ricos les apetece especular con ellas.</p>
+        <p>Esto es más o menos un conjunto de ideas de cómo vemos el barrio. Todo esto y muchas cosas más ocurren a diario en Tetuán; lo que ocurre es que a veces no nos enteramos porque caminamos por la calle cansad@s o no prestamos mucha atención a lo que vemos en la calle, porque tenemos ganas de regresar a casa a descansar. O porque creemos que lo que vemos en la calle «no es nuestro problema», porque a veces todavía se nos olvida que lo que les ocurre a nuestrxs vecinxs, podría ocurrirnos a nosotrxs mismxs, y que si no nos cuidamos entre nosotrxs, que somos la gente del barrio, nadie nos va a cuidar jamás.</p>
+        <p>Nuestro barrio, como decíamos, es un barrio muy variado. Hay de todo, y eso es una suerte, porque habiendo tanta variedad, podemos tener muchos puntos de vista y muchas ideas diferentes para trabajar juntxs en un barrio mejor. Pero aun así, todavía ocurre, según observamos, algunos vivimos muy separados de otros; por eso, ya desde hace un tiempo, estamos intentando crear una red de todos los vecinos y vecinas, para que así ya no seamos más desconocidos ni extraños y que nos reconozcamos, nos saludemos y nos preocupamos los unos de las otras, las unas de los otros. Esa es la forma más bonita y real de solidaridad que conocemos. Y queremos ponerla en práctica!</p>
+      </article>
+
+      <footer>
+        <p>📩 Contacto: <a href="mailto:enredadera@riseup.net">enredadera@riseup.net</a></p>
+        <p>📌 Plaza de la Resistencia, Local 3, Madrid</p>
+        <p>⚡ Mastodon: <a href="https://mastodon.social/@laenre">@laenre@mastodon.social</a></p>
+      </footer>
+    </main>
+  </div>
+</body>
+</html>