Actualiza web: secciones, estilos e imágenes

index.css

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
 
 /* Fuente local Code462W Pink */
 @font-face {
@@ -10,8 +11,11 @@
 }
 
 :root{
-  --sidebar-w: 250px;    /* ancho completo */
+  --sidebar-w: 250px;
-  --sidebar-rail: 56px;  /* “raíl” visible en modo plegado */
+  --sidebar-rail: 56px;
+
+  /* “Impact” consistente: Anton (Google) + fallback a Impact */
+  --impact: 'Anton', Impact, Haettenschweiler, 'Arial Black', sans-serif;
 }
 
 /* Ocultar visualmente el checkbox */
@@ -41,7 +45,7 @@ body {
     background: url('/img/fondo.jpg') no-repeat center center fixed;
     background-size: cover;
     color: #000;
-    font-family: 'Rock Salt', cursive;
+    font-family: 'Rock Salt';
     margin: 0;
     padding: 0;
     display: flex;
@@ -68,7 +72,7 @@ body {
 
 .sidebar{
   width: var(--sidebar-w);
-  background: #222;
+  background: #000;
   color: #fff;
   padding: 20px;
   text-align: center;
@@ -79,35 +83,66 @@ body {
   transition: transform .25s ease, width .25s ease;
 }
 
-.sidebar h3 {
+.sidebar h2,
-    font-family: 'Rock Salt', cursive;
+.sidebar h3{
-    font-size: 1.8em;
+  font-family: Impact, 'Anton', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+  font-weight: 1000;
+  font-size: 2em;
   margin-top: 10px;
 }
 
 .sidebar p {
     font-size: 0.9em;
-    color: #ccc;
+    color: #ff00aa;
+}
+/* Título sidebar (en tu HTML es h2, no h3) */
+.sidebar h2{
+  font-family: Impact, 'Anton', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+  font-weight: 900;
 }
 
-.sidebar-nav {
+/* NAV sidebar: los puntos están en el UL, no en el NAV */
-    margin-top: 20px;
+.sidebar .sidebar-nav ul{
-    display: flex;
+  list-style: none;          /* QUITA LOS PUNTOS */
+  padding: 0;
+  margin: 50px 0 0;
+
+  display: flex;             /* columna real */
   flex-direction: column;
+  gap: 10px;
 }
 
-.sidebar-nav a {
+.sidebar .sidebar-nav li{
-    color: white;
+  margin: 0;
+  padding: 0;
+}
+
+/* Links tipo “caja” */
+.sidebar .sidebar-nav a{
+  display: block;
+
+  font-family: Impact, 'Anton', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+  font-weight: 1200;
+  letter-spacing: .6px;
+  font-size: 1.2rem;
+  color: #fff;
   text-decoration: none;
-    padding: 10px;
+
-    border-radius: 5px;
+  padding: 12px 12px;
-    transition: background 0.1s;
+  border-radius: 8px;
+  border: 2px solid rgba(255,0,170,.95);
+  background: rgba(255,255,255,.04);
+
+  transition: background .15s ease, transform .12s ease, color .15s ease;
 }
 
-.sidebar-nav a:hover {
+.sidebar .sidebar-nav a:hover{
   background: #ff00aa;
+  color: #000;
+  transform: translateY(-1px);
 }
 
+
 main {
     margin-left: var(--sidebar-w);
     transition: margin-left .25s ease;
@@ -125,13 +160,13 @@ header {
 }
 
 header h1 {
-  font-family: 'Code462WPink', 'Rock Salt', cursive;
+  font-family: 'Code462WPink', 'Rock Salt';
   letter-spacing: 1px;
 }
 
 .top-nav a,
 .top-nav.second a {
-  font-family:  'Rock Salt', cursive;
+  font-family:  'Rock Salt';
   letter-spacing: 3px;
   font-size: 0.5em;
 }
@@ -209,6 +244,7 @@ section{
   background: #fff;                 /* fondo blanco */
   color: #111;                      /* texto negro */
   padding: 18px 20px;
+  padding-left: 50px;
   margin: 16px auto;
   max-width: 6mv;                
   border: 2px solid #ff00aa;        /* borde rosa */
@@ -217,6 +253,12 @@ section{
   line-height: 1.6;
 } 
 
+section#feminismos{
+  padding-left: 16px;
+  padding-right: 16px;
+  box-sizing: border-box;
+}
+
 /* Título de cada sección: rosa con fondo negro */
 section h2{
   margin: 0 0 12px;
@@ -239,6 +281,7 @@ section h2:hover{
 section p{
   color: #222;
   margin: .6rem 0;
+  padding-left: 20px;
 }
 
 
@@ -258,6 +301,42 @@ button:hover {
 }
 
 
+/* Imagen de colectivo centrada y responsive */
+.colectivo-img-link{
+  display: block;
+  width: 100%;
+  text-align: center;
+  margin: 12px 0;
+}
+
+.colectivo-img{
+  display: inline-block;
+  max-width: min(520px, 92%);
+  height: auto;
+  border-radius: 12px;
+  border: 2px solid #ff00aa;
+  box-shadow: 0 8px 18px rgba(0,0,0,.12);
+}
+
+/* Botón como link */
+.colectivo-btn{
+  display: inline-block;
+  margin-top: 10px;
+  padding: 10px 14px;
+  border-radius: 10px;
+  border: 2px solid #ff00aa;
+  background: #fff;
+  color: #000;
+  text-decoration: none;
+  font-weight: 800;
+}
+
+.colectivo-btn:hover{
+  background: #ff00aa;
+  color: #fff;
+}
+
+
 /* Contenedor centrado y con buen ritmo de lectura */
 .content-page.readable{
   background:#fff;
@@ -330,7 +409,7 @@ button:hover {
   margin: 6px 0 12px;
 }
 .cal-title{
-  min-width: 220px;
+  min-width: 300px;
   text-align: center;
   font-weight: bold;
   color: pink;
@@ -365,7 +444,7 @@ button:hover {
 .cal-daynum{
   position: absolute;
   top: 6px; left: 20px;
-  font-size: 0.95rem;
+  font-size: 1.2rem;
   color: var(--muted);
   z-index: 2;
 }
@@ -449,7 +528,7 @@ button:hover {
   z-index: 3;                         /* por encima de ::before/::after */
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 7px;
   margin-top: 15px;
 }
 
@@ -461,7 +540,7 @@ button:hover {
   border-radius: 6px;
   padding: 3px 6px;
   font-weight: 700;
-  font-size: 12px;
+  font-size: 16px;
   line-height: 1.1;
   box-shadow: 0 0 6px rgba(0,0,0,.06);
   white-space: nowrap;
@@ -474,6 +553,7 @@ button:hover {
   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 */
@@ -482,14 +562,13 @@ button:hover {
   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; }
+  header{ padding: 16px 12px; padding-left:20px; 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;
   }
@@ -498,16 +577,32 @@ button:hover {
     content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999;
   }
 
-  /* Nav superior como chips */
+  /* Nav superior: 2 filas, botones más compactos */
   .top-nav ul, .top-nav.second ul{
-    display:flex; flex-wrap:wrap; justify-content:center;
+    display:flex;
-    gap:6px; padding:0 6px; margin:10px 0 0;
+    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;
+    margin:0;
+    width:auto;
+    flex:0 0 auto;
   }
-  .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;
+    display:inline-block;
-    border:1px solid #ff00aa; border-radius:18px;
+    padding:5px 9px;          /* más pequeño */
-    background:#fff; color:#000; text-decoration:none;
+    font-size:.8em;           /* más pequeño */
+    line-height:1.1;
+    border:1px solid #ff00aa;
+    border-radius:16px;       /* un poco más compacto */
+    background:#fff;
+    color:#000;
+    text-decoration:none;
+    white-space:nowrap;       /* evita que se partan dentro del botón */
   }
 
   /* Secciones y contenido */
@@ -521,12 +616,24 @@ button:hover {
   .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-daynum{ font-size:1rem; top:6px; left:6px; z-index:2; }
   .cal-pills{ gap:7px; margin-top:6px; }
-  .cal-pill{ font-size:.4rem; padding:2px 4px; }
+  .cal-pill{ font-size:.72rem; padding:2px 4px; line-height:1.3; }
-  .cal-head .cal-head-cell{ padding:6px 0; font-size:.9rem; }
+  .cal-head .cal-head-cell{ padding:6px 0; font-size:1.1rem; }
 }
 
+
+
+
+/* ====== FUENTE “IMPACT” SOLO PARA EL CALENDARIO ====== */
+.cal,
+.cal *{
+  font-family: var(--impact) !important;
+}
+
+
+
+
 /* ========== MÓVILES / TABLETS VERTICALES (481px–768px) ========== */
 @media (min-width: 481px) and (max-width: 768px){
 
@@ -539,7 +646,7 @@ button:hover {
   .sidebar{
     position: fixed; left:0; top:0; bottom:0;
     width: min(78vw, 320px);
-    background:#222; color:#fff;
+    background:#000; color:#fff;
     transform: translateX(-100%);
     z-index:1000; overflow-y:auto; padding:20px;
   }
@@ -572,7 +679,7 @@ button:hover {
   .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-pill{ font-size:4px; padding:3px 5px; }
   .cal-head .cal-head-cell{ padding:8px 0; font-size:1rem; }
 }
 
@@ -586,7 +693,7 @@ button:hover {
   .sidebar{
     position: fixed; left:0; top:0; bottom:0;
     width: var(--sidebar-w);
-    background:#222; color:#fff;
+    background:#000; color:#fff;
     transform: translateX(calc(-100% + var(--sidebar-rail)));
     z-index:1000; overflow-y:auto; padding:20px;
   }
@@ -610,9 +717,9 @@ button:hover {
   .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-daynum{ font-size:2rem; }
   .cal-pills{ margin-top:8px; gap:6px; }
-  .cal-pill{ font-size:12px; }
+  .cal-pill{ font-size:4px; }
 }
 
 

index.html

@@ -48,17 +48,16 @@
           <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="/index.html#ovt">organizacion vivienda tetuan</a></li>
-            <li><a href="/#circo/">circo</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="/#tienda_gratis/">tienda gratis</a></li>
+            <li><a href="/index.html#tienda_gratis/">tienda gratis</a></li>
-            <li><a href="/#biblioteka/">biblioteka</a></li>
+            <li><a href="/index.html#biblioteka/">biblioteka</a></li>
-            <li><a href="/#Warawas/">warawas</a></li>
+            <li><a href="/index.html#Warawas/">warawas</a></li>
-            <li><a href="/#Hongos/">hongos</a></li>
+            <li><a href="/index.html#Hongos/">hongos</a></li>
-            <li><a href="/#Fermentos/">fermentos</a></li>
+            <li><a href="/index.html#Fermentos/">fermentos</a></li>
-            <li><a href="/#bicilab/">bicilab</a></li>
+            <li><a href="/index.html#bicilab/">bicilab</a></li>
 
           </ul>
         </nav>
@@ -79,12 +78,13 @@
 	  <!-- 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)
 
+                  const ENRE_EVENTS_URL = 'https://mad.convoca.la/place/42/CSOA%20La%20Enredadera%20de%20Tetu%C3%A1n';
+
                   // Paleta por colectivo
                   const COLORS = {
                         hacklab:      { bg:'#39FF14', fg:'#000' },   // verde neón + negro (original)
@@ -93,19 +93,26 @@
                         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
+                        fridays:      { bg:'#2E8B57', fg:'#fff' },    // verde oscuro + blanco
+                        euskera:      { bg:'#FF0000', fg:'#00ff00' },    // rojo + verde
+                        asamblea_enre:      { bg:'#ff00ff', fg:'#fff' },    // rosa + blanco
+                        asamblea_externas:      { bg:'#FFF', fg:'#ff00ff' }    // rosa + blanco   
                   };
 
                   // Horarios semanales (sin viernes: se gestionan aparte)
                   const WEEKLY = [
-                            { group:'vivienda',    dow:3, start:'19:00', end:'21:00' }, // jueves
+                      { group:'asamblea_externas',  dow:0, start:'19:00', end:''}, // lunes
-                            { group:'circo',       dow:0, start:'18:00', end:'21:00' }, // lunes
+                      { group:'asamblea_enre',dow:0, start:'20:00', end:'' }, // lunes
-                            { group:'circo',       dow:2, start:'18:00', end:'21:00' }, // miércoles
+                      { group:'teatro',             dow:2, start:'11:00', end:'12:30' }, // 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
+                      { group:'autodefensa',        dow:2, start:'20:00', end:'22:00' }, // miércoles
-                            
+                      { group:'euskera',            dow:2, start:'18:15', end:'21:00' }, // miércoles
+                      { group:'vivienda',           dow:3, start:'19:00', end:'21:30' }, // jueves
+                      { group:'feminismos',         dow:3, start:'20:00', end:'21:30' }, // jueves
+                      { group:'fridays',            dow:4, start:'19:00', end:'21:00' }, // viernes
+                      { group:'hacklab',            dow:4, start:'18:00', end:'23:00' }, // viernes
+                      { group:'bicilab',            dow:6, start:'19:00', end:'20:30' }, // domingo
+                      { group:'montana',            dow:6, start:'10:00', end:'14:00' }  // domingo
                 ];
 
                   function createPill(text, bg, fg) {
@@ -114,19 +121,38 @@
                         pill.style.setProperty('--bg', bg);
                         pill.style.setProperty('--fg', fg);
                         pill.textContent = text;
+
+                        pill.setAttribute('role', 'link');
+                        pill.setAttribute('tabindex', '0');
+                        pill.style.cursor = 'pointer';
+
+                        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 { 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);
                   }
 
@@ -148,7 +174,7 @@
                         // 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();
+                        const daysInMonth = new Date(year, month + 1, 0).getDate();
 
                         // localizar viernes del mes
                         const fridays = [];
@@ -174,6 +200,7 @@
                         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';
@@ -192,11 +219,13 @@
                                                 // 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
@@ -232,73 +261,155 @@
 
       </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.
+          <br>
+          <strong>Nos reunimos los jueves a las 20</strong> en el CSO La Enredadera,
+          donde organizamos acciones, debates.
+        </p>
+
+        <p>
+          <strong>Uno de los temas que más trabajamos</strong> 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. Esta clínica está
+          bajo el ataque constant>
+        </p>
+
+        <p>
+          También realizamos debates y otras acciones, como salir a la plaza una vez al
+          mes para visibilizar las violencias que sufren las mujeres en la sociedad
+          patriarcal, o debates sobre temas como la pronografía, la prostitución, etc.
+        </p>
+
+        <p>
+          <strong>Queremos mantener viva la lucha</strong> contra la sociedad patriarcal
+          y lo vemos como algo muy necesario en el momento actual, en el que la extrema
+          derecha está atacando los derechos de las mujeres y personas trans. De ahí
+          que sigamos con nues>
+        </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>
-        <button <a href="https://okupanel.laenre.net">Twitter</button>
+
+        <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="yoga">
+      <section id="circo">
-        <h2> Colectivo de Yoga</h2>
+        <h2> Circo</h2>
-        <p>Sesiones abiertas y gratuitas de yoga, meditación y respiración consciente. Espacio de bienestar colectivo.</p>
+        <p>Información próximamente.</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>
+        <a class="colectivo-img-link" href="html://hacklab.laenre.net" target="_blank" rel="noopener">
+          <img class="colectivo-img" src="/INFO/hacklab.jpeg" alt="">
+        </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="musica_andina">
+      <section id="tienda-gratis">
-        <h2>🎶Colectivo de Música Andina</h2>
+        <h2> Tienda Gratis</h2>
-        <p>Preservamos y difundimos la música tradicional andina como herramienta de resistencia cultural.</p>
+        <p>Información próximamente.</p>
-        <button onclick="window.location.href='/archivos/musica_andina.pdf'">📥 Descargar Cancionero</button>
       </section>
 
-      <section id="tatus">
+      <section id="biblioteka">
-        <h2>🖋️Tatus circus</h2>
+        <h2> Biblioteca Libre</h2>
-        <p>Tatuajes artesanales con simbología política, tribal y de resistencia callejera.</p>
+        <p>Accede a libros, fanzines y documentos sobre activismo, agroecología, tecnología libre y feminismos.</p>
-        <button onclick="window.location.href='/archivos/tatus_warrix.pdf'">📥 Descargar Portafolio</button>
+
+        <a class="colectivo-btn" href="/archivos/biblioteca.pdf">
+          Mas información
+        </a>
       </section>
 
-      <section id="artistico">
+      <section id="warawas">
-        <h2> Colectivo Artístico</h2>
+        <h2> Warawas</h2>
-        <p>Muralismo, arte urbano, intervenciones visuales y talleres de creación colaborativa.</p>
+        <p>Información próximamente.</p>
-        <button onclick="window.location.href='/archivos/artistico.pdf'">📥 Descargar Dossier</button>
+      </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>
-        <button onclick="window.location.href='/archivos/asamblea.pdf'">📥 Descargar Actas</button>
-      </section>
 
-      <section id="biblioteca">
+        <a class="colectivo-btn" href="/archivos/asamblea.pdf">
-        <h2>📚 Biblioteca Libre</h2>
+          Descargar Actas
-        <p>Accede a libros, fanzines y documentos sobre activismo, agroecología, tecnología libre y feminismos.</p>
+        </a>
-        <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>📌 Calle de la coruña numero 5, Madrid</p>
-        <p>⚡ Mastodon: <a href="https://mastodon.social/@laenre">@laenre@mastodon.social</a></p>
+        <p>⚡ Mastodon: <a href="masto.es/@csolaenre">@csolaenre</a></p>
       </footer>
     </main>
   </div>