Integra commit inicial del repo

.gitignore

@@ -0,0 +1,6 @@
+chan.html
+feed.xml
+thumb_*.jpg
+avatar.jpg
+banner.jpg
+__pycache__/

Dockerfile

@@ -0,0 +1,11 @@
+FROM nginx:1.27-alpine
+RUN apk add --no-cache python3 py3-pillow
+COPY public/ /usr/share/nginx/html/
+COPY build.py /app/build.py
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+ENV SITE_DIR=/usr/share/nginx/html
+EXPOSE 80
+HEALTHCHECK --interval=30s --timeout=3s CMD wget -qO- http://127.0.0.1/ >/dev/null || exit 1
+ENTRYPOINT ["/entrypoint.sh"]

README.md

@@ -1,3 +1,7 @@
-# andaquenosabesna
+# andaquenosabesna.thax.es
 
-Web de Anda Que No Sabes Ná (andaquenosabesna.thax.es)
+Web estática de *Anda Que No Sabes Ná*. Un contenedor nginx regenera `index.html`
+cada 15 min leyendo el feed RSS de YouTube (`build.py`) y cachea las miniaturas en `img/`.
+
+- Local: `SITE_DIR=public python3 build.py && python3 -m http.server -d public 8000`
+- Contenedor: `docker build -t aqnsn-site . && docker run -p 8080:80 aqnsn-site`

build.py

@@ -0,0 +1,200 @@
+"""Genera index.html a partir del feed RSS del canal (se ejecuta cada 15 min en el contenedor)."""
+import html
+import os
+import shutil
+import sys
+import urllib.request
+import xml.etree.ElementTree as ET
+
+from PIL import Image, ImageStat
+
+OUT = os.environ.get('SITE_DIR', 'public')
+FEED = os.environ.get('FEED_URL', 'https://www.youtube.com/feeds/videos.xml?channel_id=UC8gVtzB3Lqm7nnfMhMvXGxQ')
+MAX_VIDEOS = 15
+NS = {'a': 'http://www.w3.org/2005/Atom', 'y': 'http://www.youtube.com/xml/schemas/2015'}
+MESES = ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic']
+YT = 'https://www.youtube.com/@andaquenosabesna'
+TT = 'https://www.tiktok.com/@andaquenosabesna'
+IG = 'https://www.instagram.com/andaquenosabesna'
+MAIL = 'andaquenosabesnada@gmail.com'
+
+
+def fetch(url, timeout=20):
+    req = urllib.request.Request(url, headers={'User-Agent': 'Mozilla/5.0 (aqnsn-site)'})
+    return urllib.request.urlopen(req, timeout=timeout).read()
+
+
+try:
+    root = ET.fromstring(fetch(FEED))
+except Exception as exc:  # sin red o feed caído: se conserva la web anterior
+    print('feed no disponible, se mantiene index.html:', exc, file=sys.stderr)
+    sys.exit(0)
+
+videos = []
+for e in root.findall('a:entry', NS)[:MAX_VIDEOS]:
+    d = e.find('a:published', NS).text[:10].split('-')
+    videos.append({
+        'id': e.find('y:videoId', NS).text,
+        'title': e.find('a:title', NS).text,
+        'date': f'{int(d[2])} {MESES[int(d[1]) - 1]} {d[0]}',
+    })
+
+def sync_thumbs(vids):
+    img_dir = os.path.join(OUT, 'img')
+    os.makedirs(img_dir, exist_ok=True)
+    keep = {'avatar.jpg', 'banner.jpg'}
+    ok = []
+    for v in vids:
+        path = os.path.join(img_dir, v['id'] + '.jpg')
+        if not os.path.exists(path):
+            try:
+                open(path, 'wb').write(fetch(f"https://i.ytimg.com/vi/{v['id']}/hqdefault.jpg"))
+            except Exception as exc:
+                print('miniatura no descargada', v['id'], exc, file=sys.stderr)
+                continue
+        keep.add(v['id'] + '.jpg')
+        ok.append(v)
+    for f in os.listdir(img_dir):
+        if f not in keep:
+            os.remove(os.path.join(img_dir, f))
+    return ok
+
+
+videos = sync_thumbs(videos)
+if not videos:
+    sys.exit(0)
+
+
+def is_short(vid):
+    """Los Shorts llevan barras laterales desenfocadas: poca textura en los laterales."""
+    im = Image.open(os.path.join(OUT, 'img', vid + '.jpg')).convert('L')
+    w, h = im.size
+    return ImageStat.Stat(im.crop((0, 0, int(w * .18), h))).stddev[0] < 25
+
+
+esc = html.escape
+featured, rest = videos[0], videos[1:]   # el feed viene del más nuevo al más antiguo
+
+
+def url(v):
+    return f"https://www.youtube.com/watch?v={v['id']}"
+
+
+def card(v, n):
+    return f'''
+      <a class="card reveal" style="--d:{(n % 3) * 70}ms" href="{url(v)}" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/{v['id']}.jpg" alt="" loading="lazy" width="480" height="360"{' class="short"' if is_short(v['id']) else ''}><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>{esc(v['date'])}</time><strong>{esc(v['title'])}</strong></span>
+      </a>'''
+
+
+cards = ''.join(card(v, i) for i, v in enumerate(rest))
+
+page = f'''<!doctype html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Anda Que No Sabes Ná · El programa nocturno 100% granaíno</title>
+<meta name="description" content="Anda Que No Sabes Ná: el programa nocturno 100% granaíno. Conversaciones sobre educación, Egipto, lenguas, religiones y mucho más.">
+<meta name="theme-color" content="#06080d">
+<meta property="og:title" content="Anda Que No Sabes Ná">
+<meta property="og:description" content="El programa nocturno 100% granaíno.">
+<meta property="og:image" content="https://andaquenosabesna.thax.es/img/banner.jpg">
+<meta property="og:type" content="website">
+<link rel="icon" href="img/avatar.jpg">
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<a class="skip" href="#programas">Saltar al contenido</a>
+
+<header class="top">
+  <a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a>
+  <nav aria-label="Principal">
+    <a href="#programas">Programas</a>
+    <a href="#programa">El programa</a>
+    <a href="#seguir">Seguir</a>
+  </nav>
+</header>
+
+<main>
+  <section class="hero">
+    <div class="hero-bg" aria-hidden="true"></div>
+    <div class="hero-inner">
+      <img class="neon" src="img/avatar.jpg" alt="Anda Que No Sabes Ná" width="220" height="220">
+      <p class="kicker">Directo desde Granada, de noche</p>
+      <h1>El programa nocturno<br><em>100% granaíno</em></h1>
+      <p class="lead">Charlas sin guion sobre lo que sabemos, lo que no, y lo que creemos saber.</p>
+      <div class="cta">
+        <a class="btn primary" href="{YT}" target="_blank" rel="noopener">Ver en YouTube</a>
+        <a class="btn" href="#programas">Últimos programas</a>
+      </div>
+    </div>
+    <a class="scroll" href="#destacado" aria-label="Bajar"><span></span></a>
+  </section>
+
+  <section id="destacado" class="featured wrap reveal">
+    <a class="feat" href="{url(featured)}" target="_blank" rel="noopener">
+      <span class="thumb"><img src="img/{featured['id']}.jpg" alt="" width="480" height="360"><span class="play big" aria-hidden="true"></span></span>
+      <span class="feat-text">
+        <span class="tag">Último vídeo</span>
+        <strong>{esc(featured['title'])}</strong>
+        <time>{esc(featured['date'])}</time>
+        <span class="go">Ver el programa <i aria-hidden="true">→</i></span>
+      </span>
+    </a>
+  </section>
+
+  <section id="programas" class="wrap">
+    <div class="sec-head reveal">
+      <h2>Últimos <em>vídeos</em></h2>
+      <a class="more" href="{YT}/videos" target="_blank" rel="noopener">Todos los vídeos →</a>
+    </div>
+    <div class="grid">{cards}
+    </div>
+  </section>
+
+  <section id="programa" class="about wrap reveal">
+    <h2>De qué va</h2>
+    <p>Un programa de noche, con tertulia y sin prisa. Cada semana entra gente distinta, con su oficio y su manía, y se habla de lo que sale: de cómo se educa a un adolescente, de la vida en las calles de El Cairo, de si el árabe es tan antiguo como dicen, de qué tienen en común las religiones o de cómo se hace un truco de cartas.</p>
+    <ul class="chips" aria-label="Temas">
+      <li>Educación</li><li>Egipto</li><li>Lengua árabe</li><li>Religiones</li><li>Magia</li><li>Cultura granaína</li><li>Entrevistas</li>
+    </ul>
+  </section>
+
+  <section id="seguir" class="follow wrap reveal">
+    <h2>Síguenos</h2>
+    <div class="socials">
+      <a href="{YT}" target="_blank" rel="noopener"><b>YouTube</b><span>@andaquenosabesna</span></a>
+      <a href="{TT}" target="_blank" rel="noopener"><b>TikTok</b><span>@andaquenosabesna</span></a>
+      <a href="{IG}" target="_blank" rel="noopener"><b>Instagram</b><span>@andaquenosabesna</span></a>
+    </div>
+  </section>
+</main>
+
+<footer>
+  <div class="wrap foot">
+    <p>© 2026 Anda Que No Sabes Ná · Granada</p>
+    <p class="links"><a href="privacidad.html">Política de privacidad</a><a href="terminos.html">Condiciones del servicio</a><a href="mailto:{MAIL}">Contacto</a></p>
+  </div>
+</footer>
+
+<script>
+(function () {{
+  var els = document.querySelectorAll('.reveal');
+  if (!('IntersectionObserver' in window) || matchMedia('(prefers-reduced-motion: reduce)').matches) {{
+    els.forEach(function (e) {{ e.classList.add('in'); }}); return;
+  }}
+  var io = new IntersectionObserver(function (items) {{
+    items.forEach(function (i) {{ if (i.isIntersecting) {{ i.target.classList.add('in'); io.unobserve(i.target); }} }});
+  }}, {{ threshold: 0.12 }});
+  els.forEach(function (e) {{ io.observe(e); }});
+}})();
+</script>
+</body>
+</html>
+'''
+tmp = os.path.join(OUT, 'index.html.tmp')
+open(tmp, 'w', encoding='utf-8').write(page)
+shutil.move(tmp, os.path.join(OUT, 'index.html'))
+print('index.html', len(page), 'bytes;', len(videos), 'videos; destacado:', featured['id'])

entrypoint.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+# Primer build al arrancar y después cada 15 minutos; si el feed falla se conserva la web anterior.
+python3 /app/build.py || true
+( while true; do sleep 900; python3 /app/build.py || true; done ) &
+exec nginx -g 'daemon off;'

nginx.conf

@@ -0,0 +1,13 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+    add_header X-Content-Type-Options nosniff;
+    add_header Referrer-Policy strict-origin-when-cross-origin;
+    location = /index.html { add_header Cache-Control "no-cache"; }
+    location = /            { add_header Cache-Control "no-cache"; }
+    location /img/          { expires 7d; add_header Cache-Control "public"; }
+    location ~* \.(css)$    { add_header Cache-Control "no-cache"; }
+    location / { try_files $uri $uri/ =404; }
+}

public/index.html

@@ -0,0 +1,159 @@
+<!doctype html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Anda Que No Sabes Ná · El programa nocturno 100% granaíno</title>
+<meta name="description" content="Anda Que No Sabes Ná: el programa nocturno 100% granaíno. Conversaciones sobre educación, Egipto, lenguas, religiones y mucho más.">
+<meta name="theme-color" content="#06080d">
+<meta property="og:title" content="Anda Que No Sabes Ná">
+<meta property="og:description" content="El programa nocturno 100% granaíno.">
+<meta property="og:image" content="https://andaquenosabesna.thax.es/img/banner.jpg">
+<meta property="og:type" content="website">
+<link rel="icon" href="img/avatar.jpg">
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<a class="skip" href="#programas">Saltar al contenido</a>
+
+<header class="top">
+  <a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a>
+  <nav aria-label="Principal">
+    <a href="#programas">Programas</a>
+    <a href="#programa">El programa</a>
+    <a href="#seguir">Seguir</a>
+  </nav>
+</header>
+
+<main>
+  <section class="hero">
+    <div class="hero-bg" aria-hidden="true"></div>
+    <div class="hero-inner">
+      <img class="neon" src="img/avatar.jpg" alt="Anda Que No Sabes Ná" width="220" height="220">
+      <p class="kicker">Directo desde Granada, de noche</p>
+      <h1>El programa nocturno<br><em>100% granaíno</em></h1>
+      <p class="lead">Charlas sin guion sobre lo que sabemos, lo que no, y lo que creemos saber.</p>
+      <div class="cta">
+        <a class="btn primary" href="https://www.youtube.com/@andaquenosabesna" target="_blank" rel="noopener">Ver en YouTube</a>
+        <a class="btn" href="#programas">Últimos programas</a>
+      </div>
+    </div>
+    <a class="scroll" href="#destacado" aria-label="Bajar"><span></span></a>
+  </section>
+
+  <section id="destacado" class="featured wrap reveal">
+    <a class="feat" href="https://www.youtube.com/watch?v=PxQHPd5YDLs" target="_blank" rel="noopener">
+      <span class="thumb"><img src="img/PxQHPd5YDLs.jpg" alt="" width="480" height="360"><span class="play big" aria-hidden="true"></span></span>
+      <span class="feat-text">
+        <span class="tag">Último vídeo</span>
+        <strong>La Tediosa Burocracia en la Educación</strong>
+        <time>19 oct 2026</time>
+        <span class="go">Ver el programa <i aria-hidden="true">→</i></span>
+      </span>
+    </a>
+  </section>
+
+  <section id="programas" class="wrap">
+    <div class="sec-head reveal">
+      <h2>Últimos <em>vídeos</em></h2>
+      <a class="more" href="https://www.youtube.com/@andaquenosabesna/videos" target="_blank" rel="noopener">Todos los vídeos →</a>
+    </div>
+    <div class="grid">
+      <a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=rLFSEqe77OY" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/rLFSEqe77OY.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>19 oct 2026</time><strong>¿Cómo dejas de comerte las uñas? El trauma útil de Palín</strong></span>
+      </a>
+      <a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=_-VaTy2fazY" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/_-VaTy2fazY.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>18 oct 2026</time><strong>DOMESTICAR ADOLESCENTES, PLANTAR TOMATES Y CONSTRUIR MINIATURAS | AQNSN Programa 3 - Galaxoide</strong></span>
+      </a>
+      <a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=jmV_Ao85RvI" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/jmV_Ao85RvI.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>14 oct 2026</time><strong>¿Cómo de antiguo es el Árabe?</strong></span>
+      </a>
+      <a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=DLcn8i9lV6Q" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/DLcn8i9lV6Q.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>13 oct 2026</time><strong>Todas las religiones son similares...</strong></span>
+      </a>
+      <a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=E_eULZSlWJs" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/E_eULZSlWJs.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>12 oct 2026</time><strong>La Vida de las Mujeres Egipcias en las zonas costeras</strong></span>
+      </a>
+      <a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=600_XwAHkv0" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/600_XwAHkv0.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>12 oct 2026</time><strong>Clases religiosas separadas, la política de las escuelas egipcias</strong></span>
+      </a>
+      <a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=XKSVhuk_lQI" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/XKSVhuk_lQI.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>11 oct 2026</time><strong>Poligamia en Egipto, de la antigüedad a la actualidad</strong></span>
+      </a>
+      <a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=voK4g7lIv4E" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/voK4g7lIv4E.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>11 oct 2026</time><strong>El Barrio Pijo de Egipto, Masr El Gedida, y sus tiendas de Oro</strong></span>
+      </a>
+      <a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=7zY2ey_ERlQ" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/7zY2ey_ERlQ.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>10 oct 2026</time><strong>Un Simple Teletransporte de Cartas...</strong></span>
+      </a>
+      <a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=yzTMyAKQnDQ" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/yzTMyAKQnDQ.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>10 oct 2026</time><strong>Las Franquicias se extienden en EGIPTO...</strong></span>
+      </a>
+      <a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=Q7qYQbvjMxQ" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/Q7qYQbvjMxQ.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>9 oct 2026</time><strong>El Mahshi y otras RECETAS EXÓTICAS de Egipto que PODRÍAN PERDERSE</strong></span>
+      </a>
+      <a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=DgTa9qX4xH0" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/DgTa9qX4xH0.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>9 oct 2026</time><strong>El barrio cristiano del Cairo que RECICLA BASURA</strong></span>
+      </a>
+      <a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=oAoEz2Kwmk8" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/oAoEz2Kwmk8.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>8 oct 2026</time><strong>Tiendas QUE NO CIERRAN en Egipto 🌇</strong></span>
+      </a>
+      <a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=mxP0dvn2HD4" target="_blank" rel="noopener">
+        <span class="thumb"><img src="img/mxP0dvn2HD4.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
+        <span class="meta"><time>6 oct 2026</time><strong>Árabe formal VS Árabe de la calle, ¿qué diferencias hay?</strong></span>
+      </a>
+    </div>
+  </section>
+
+  <section id="programa" class="about wrap reveal">
+    <h2>De qué va</h2>
+    <p>Un programa de noche, con tertulia y sin prisa. Cada semana entra gente distinta, con su oficio y su manía, y se habla de lo que sale: de cómo se educa a un adolescente, de la vida en las calles de El Cairo, de si el árabe es tan antiguo como dicen, de qué tienen en común las religiones o de cómo se hace un truco de cartas.</p>
+    <ul class="chips" aria-label="Temas">
+      <li>Educación</li><li>Egipto</li><li>Lengua árabe</li><li>Religiones</li><li>Magia</li><li>Cultura granaína</li><li>Entrevistas</li>
+    </ul>
+  </section>
+
+  <section id="seguir" class="follow wrap reveal">
+    <h2>Síguenos</h2>
+    <div class="socials">
+      <a href="https://www.youtube.com/@andaquenosabesna" target="_blank" rel="noopener"><b>YouTube</b><span>@andaquenosabesna</span></a>
+      <a href="https://www.tiktok.com/@andaquenosabesna" target="_blank" rel="noopener"><b>TikTok</b><span>@andaquenosabesna</span></a>
+      <a href="https://www.instagram.com/andaquenosabesna" target="_blank" rel="noopener"><b>Instagram</b><span>@andaquenosabesna</span></a>
+    </div>
+  </section>
+</main>
+
+<footer>
+  <div class="wrap foot">
+    <p>© 2026 Anda Que No Sabes Ná · Granada</p>
+    <p class="links"><a href="privacidad.html">Política de privacidad</a><a href="terminos.html">Condiciones del servicio</a><a href="mailto:andaquenosabesnada@gmail.com">Contacto</a></p>
+  </div>
+</footer>
+
+<script>
+(function () {
+  var els = document.querySelectorAll('.reveal');
+  if (!('IntersectionObserver' in window) || matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    els.forEach(function (e) { e.classList.add('in'); }); return;
+  }
+  var io = new IntersectionObserver(function (items) {
+    items.forEach(function (i) { if (i.isIntersecting) { i.target.classList.add('in'); io.unobserve(i.target); } });
+  }, { threshold: 0.12 });
+  els.forEach(function (e) { io.observe(e); });
+})();
+</script>
+</body>
+</html>

public/privacidad.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Política de privacidad · Anda Que No Sabes Ná</title>
+<meta name="description" content="Política de privacidad de Anda Que No Sabes Ná y de su aplicación de publicación en YouTube, TikTok e Instagram.">
+<meta name="theme-color" content="#06080d">
+<link rel="icon" href="img/avatar.jpg">
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<header class="top">
+  <a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a>
+  <nav aria-label="Principal"><a href="/">Inicio</a><a href="terminos.html">Condiciones</a></nav>
+</header>
+
+<main class="legal">
+  <h1>Política de privacidad</h1>
+  <p class="upd">Última actualización: 20 de octubre de 2026</p>
+
+  <h2>1. Quién somos</h2>
+  <p><strong>Anda Que No Sabes Ná</strong> es un programa de pódcast y vídeo producido en Granada (España). Esta política cubre la web <a href="https://andaquenosabesna.thax.es">andaquenosabesna.thax.es</a> y la aplicación privada que usamos para publicar nuestros propios vídeos en YouTube, TikTok e Instagram.</p>
+  <p>Contacto para cualquier asunto de privacidad: <a href="mailto:andaquenosabesnada@gmail.com">andaquenosabesnada@gmail.com</a>.</p>
+
+  <h2>2. Esta web</h2>
+  <p>La web es estática. <strong>No usa cookies, no tiene analítica, no tiene formularios ni cuentas de usuario</strong> y no carga scripts, fuentes ni imágenes de terceros: las miniaturas están alojadas en este mismo sitio.</p>
+  <p>Como cualquier servidor web, nuestro servidor puede registrar de forma temporal la dirección IP, la fecha y la página solicitada, únicamente por seguridad y para detectar abusos. No usamos esos registros para identificar a nadie ni los compartimos.</p>
+  <p>Los enlaces a YouTube, TikTok e Instagram llevan a servicios de terceros, que tienen sus propias políticas de privacidad.</p>
+
+  <h2>3. Nuestra aplicación de publicación</h2>
+  <p>Usamos una aplicación de gestión de redes sociales de código abierto (Postiz), instalada en un servidor propio, para programar y publicar el contenido del programa. La aplicación está pensada para uso interno: <strong>solo la utiliza el propietario de las cuentas</strong> y no está abierta al público.</p>
+  <p>Para funcionar, la aplicación solicita autorización a las cuentas del propio programa y accede a:</p>
+  <ul>
+    <li><strong>YouTube / Google:</strong> información básica del perfil y del canal, y permiso para subir y gestionar vídeos y consultar estadísticas del canal propio.</li>
+    <li><strong>TikTok:</strong> información básica del perfil y permiso para publicar vídeos en la cuenta propia.</li>
+    <li><strong>Instagram:</strong> información básica del perfil y permiso para publicar contenido en la cuenta propia.</li>
+  </ul>
+  <p>Los tokens de acceso se guardan en una base de datos de nuestro servidor. <strong>No vendemos, alquilamos ni compartimos estos datos con nadie, no los usamos para publicidad ni los transferimos a terceros.</strong> Usamos los datos solo para publicar y programar el contenido del programa en sus propias cuentas.</p>
+
+  <h2>4. Servicios de API de YouTube</h2>
+  <p>La aplicación usa los Servicios de API de YouTube. Al utilizarla, aceptas quedar sujeto a los <a href="https://www.youtube.com/t/terms" target="_blank" rel="noopener">Términos del Servicio de YouTube</a>. La política de privacidad de Google está disponible en <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">policies.google.com/privacy</a>.</p>
+  <p>El uso que hace la aplicación de la información recibida de las API de Google se ajusta a la <a href="https://developers.google.com/terms/api-services-user-data-policy" target="_blank" rel="noopener">Política de datos de usuario de los Servicios de API de Google</a>, incluidos los requisitos de uso limitado.</p>
+  <p>Puedes revocar en cualquier momento el acceso de la aplicación a tu cuenta de Google desde <a href="https://myaccount.google.com/connections" target="_blank" rel="noopener">myaccount.google.com/connections</a>.</p>
+
+  <h2>5. TikTok e Instagram</h2>
+  <p>El acceso a TikTok se rige también por los <a href="https://www.tiktok.com/legal/page/row/terms-of-service/es" target="_blank" rel="noopener">Términos del Servicio de TikTok</a> y su política de privacidad. El acceso a Instagram, por las condiciones y la política de datos de Meta. Puedes revocar el acceso de la aplicación desde la configuración de seguridad de cada plataforma.</p>
+
+  <h2>6. Conservación y eliminación</h2>
+  <p>Conservamos los tokens solo mientras la cuenta esté conectada. Si desconectamos una cuenta o revocas el acceso, el token deja de ser válido y se elimina de nuestra base de datos. Si quieres que borremos cualquier dato asociado a ti, escríbenos al correo de contacto.</p>
+
+  <h2>7. Tus derechos</h2>
+  <p>Conforme al Reglamento General de Protección de Datos (RGPD) y a la normativa española, puedes ejercer tus derechos de acceso, rectificación, supresión, oposición, limitación y portabilidad escribiendo a <a href="mailto:andaquenosabesnada@gmail.com">andaquenosabesnada@gmail.com</a>. También puedes reclamar ante la Agencia Española de Protección de Datos (<a href="https://www.aepd.es" target="_blank" rel="noopener">aepd.es</a>).</p>
+
+  <h2>8. Cambios</h2>
+  <p>Si cambiamos esta política, publicaremos la nueva versión en esta misma página con su fecha de actualización.</p>
+</main>
+</body>
+</html>

public/styles.css

@@ -0,0 +1,176 @@
+:root {
+  --bg: #06080d;
+  --bg2: #0b0f18;
+  --card: #0e1420;
+  --line: #1b2535;
+  --ink: #eaf6ff;
+  --muted: #8fa3b8;
+  --neon: #2ee6ff;
+  --neon-d: #12a9c2;
+  --amber: #ffb45a;
+  --radius: 16px;
+  --glow: 0 0 6px rgba(46, 230, 255, .8), 0 0 22px rgba(46, 230, 255, .45), 0 0 60px rgba(46, 230, 255, .25);
+}
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--ink);
+  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+img { max-width: 100%; display: block; }
+a { color: inherit; text-decoration: none; }
+.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
+.skip { position: absolute; left: -999px; top: 8px; background: var(--neon); color: #001; padding: 8px 14px; border-radius: 8px; z-index: 99; }
+.skip:focus { left: 8px; }
+:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 6px; }
+
+/* header */
+.top {
+  position: fixed; inset: 0 0 auto 0; z-index: 20;
+  display: flex; align-items: center; justify-content: space-between; gap: 16px;
+  padding: 10px max(16px, calc((100% - 1120px) / 2));
+  background: linear-gradient(#06080dd9, #06080d00);
+  backdrop-filter: blur(6px);
+}
+.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .02em; }
+.brand img { border-radius: 50%; box-shadow: 0 0 14px rgba(46, 230, 255, .5); }
+.top nav { display: flex; gap: 22px; font-size: .95rem; color: var(--muted); }
+.top nav a:hover { color: var(--neon); }
+@media (max-width: 640px) { .brand span { display: none; } .top nav { gap: 16px; } }
+
+/* hero */
+.hero {
+  position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center;
+  overflow: hidden; padding: 110px 16px 80px;
+}
+.hero-bg {
+  position: absolute; inset: 0;
+  background:
+    radial-gradient(60% 50% at 50% 38%, rgba(46, 230, 255, .16), transparent 70%),
+    linear-gradient(180deg, rgba(6, 8, 13, .78) 0%, rgba(6, 8, 13, .92) 65%, var(--bg) 100%),
+    url("img/banner.jpg") center / cover no-repeat;
+  filter: blur(2px) saturate(.9);
+  transform: scale(1.04);
+  animation: drift 18s ease-in-out infinite alternate;
+}
+@keyframes drift { to { transform: scale(1.1) translateY(-1.5%); } }
+.hero-inner { position: relative; max-width: 760px; }
+.neon {
+  width: clamp(130px, 22vw, 190px); margin: 0 auto 18px; border-radius: 50%;
+  border: 1px solid rgba(46, 230, 255, .35);
+  animation: flicker 6s infinite;
+}
+@keyframes flicker {
+  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; box-shadow: 0 0 22px rgba(46, 230, 255, .55), 0 0 70px rgba(46, 230, 255, .3); }
+  20%, 63% { opacity: .8; box-shadow: 0 0 8px rgba(46, 230, 255, .3), 0 0 24px rgba(46, 230, 255, .12); }
+}
+.kicker { margin: 0 0 10px; text-transform: uppercase; letter-spacing: .28em; font-size: .78rem; color: var(--amber); }
+h1 { margin: 0 0 18px; font-size: clamp(2rem, 6.4vw, 4rem); line-height: 1.08; letter-spacing: -.02em; }
+h1 em { font-style: normal; color: var(--neon); text-shadow: var(--glow); }
+.lead { margin: 0 auto 30px; max-width: 520px; color: #c3d3e3; font-size: 1.1rem; }
+.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+.btn {
+  padding: 13px 26px; border-radius: 999px; border: 1px solid var(--line); background: #0e1420b3;
+  font-weight: 600; transition: .25s;
+}
+.btn:hover { border-color: var(--neon); color: var(--neon); transform: translateY(-2px); }
+.btn.primary { background: var(--neon); color: #001a20; border-color: var(--neon); box-shadow: 0 0 24px rgba(46, 230, 255, .35); }
+.btn.primary:hover { color: #001a20; box-shadow: 0 0 38px rgba(46, 230, 255, .6); }
+.scroll { position: absolute; bottom: 24px; left: 50%; width: 26px; height: 42px; margin-left: -13px; border: 2px solid #ffffff55; border-radius: 14px; }
+.scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--neon); animation: wheel 1.8s infinite; }
+@keyframes wheel { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(14px); } }
+
+/* sections */
+section { padding-block: 56px; }
+h2 { margin: 0 0 22px; font-size: clamp(1.5rem, 3.6vw, 2.2rem); letter-spacing: -.01em; }
+h2 em { font-style: normal; color: var(--neon); text-shadow: 0 0 18px rgba(46, 230, 255, .5); }
+.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.more { color: var(--muted); font-size: .95rem; }
+.more:hover { color: var(--neon); }
+
+/* thumbs */
+.thumb { position: relative; display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9; background: #000; }
+.thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); transition: transform .5s; }
+.thumb img.short { --z: 2.15; transform-origin: 50% 32%; }
+.play {
+  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: .3s;
+  background: radial-gradient(circle, rgba(6, 8, 13, .1), rgba(6, 8, 13, .55));
+}
+.play::after {
+  content: ""; width: 54px; height: 54px; border-radius: 50%;
+  background: var(--neon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23001a20' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 60% no-repeat;
+  box-shadow: var(--glow);
+}
+.play.big::after { width: 76px; height: 76px; }
+
+/* featured */
+.feat {
+  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(18px, 4vw, 40px); align-items: center;
+  padding: clamp(14px, 2.4vw, 22px); border: 1px solid var(--line); border-radius: 22px;
+  background: linear-gradient(135deg, var(--card), var(--bg2));
+  box-shadow: 0 30px 80px -40px rgba(46, 230, 255, .25);
+}
+.feat-text { display: grid; gap: 10px; }
+.tag { justify-self: start; padding: 4px 12px; border-radius: 999px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #001a20; background: var(--amber); font-weight: 700; }
+.feat-text strong { font-size: clamp(1.25rem, 2.8vw, 1.9rem); line-height: 1.2; }
+.feat-text time, .meta time { color: var(--muted); font-size: .88rem; }
+.go { color: var(--neon); font-weight: 600; }
+.go i { display: inline-block; transition: transform .25s; font-style: normal; }
+.feat:hover .go i { transform: translateX(6px); }
+.feat:hover img, .card:hover img { transform: scale(calc(var(--z, 1) * 1.06)); }
+.feat:hover .play, .card:hover .play { opacity: 1; }
+@media (max-width: 760px) { .feat { grid-template-columns: 1fr; } }
+
+/* grid */
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
+.card {
+  display: grid; gap: 12px; padding: 10px 10px 16px; border-radius: var(--radius);
+  border: 1px solid transparent; transition: .3s; background: transparent;
+}
+.card:hover { background: var(--card); border-color: var(--line); transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(46, 230, 255, .35); }
+.meta { display: grid; gap: 4px; padding-inline: 4px; }
+.meta strong { font-size: 1rem; line-height: 1.3; font-weight: 600; }
+
+/* about */
+.about { max-width: 780px; }
+.about p { color: #c3d3e3; font-size: 1.1rem; }
+.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 26px 0 0; }
+.chips li { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: .92rem; transition: .25s; }
+.chips li:hover { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 16px rgba(46, 230, 255, .25); }
+
+/* follow */
+.socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
+.socials a {
+  display: grid; gap: 2px; padding: 22px 24px; border-radius: var(--radius);
+  border: 1px solid var(--line); background: linear-gradient(135deg, var(--card), var(--bg2)); transition: .3s;
+}
+.socials a:hover { border-color: var(--neon); transform: translateY(-4px); box-shadow: 0 0 28px rgba(46, 230, 255, .25); }
+.socials b { font-size: 1.15rem; }
+.socials span { color: var(--muted); font-size: .92rem; }
+
+/* footer */
+footer { margin-top: 40px; border-top: 1px solid var(--line); background: var(--bg2); padding-block: 28px; color: var(--muted); font-size: .92rem; }
+.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.foot p { margin: 0; }
+.links { display: flex; gap: 20px; flex-wrap: wrap; }
+.links a:hover { color: var(--neon); }
+
+/* reveal */
+.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease var(--d, 0ms), transform .7s ease var(--d, 0ms); }
+.reveal.in { opacity: 1; transform: none; }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+  .reveal { opacity: 1; transform: none; }
+  html { scroll-behavior: auto; }
+}
+
+/* páginas legales */
+.legal { max-width: 760px; margin: 0 auto; padding: 120px 16px 60px; }
+.legal h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); text-align: left; }
+.legal h2 { margin-top: 36px; font-size: 1.3rem; color: var(--neon); }
+.legal p, .legal li { color: #c3d3e3; }
+.legal a { color: var(--neon); text-decoration: underline; text-underline-offset: 3px; }
+.legal .upd { color: var(--muted); font-size: .9rem; }

public/terminos.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Condiciones del servicio · Anda Que No Sabes Ná</title>
+<meta name="description" content="Condiciones del servicio de Anda Que No Sabes Ná y de su aplicación de publicación.">
+<meta name="theme-color" content="#06080d">
+<link rel="icon" href="img/avatar.jpg">
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<header class="top">
+  <a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a>
+  <nav aria-label="Principal"><a href="/">Inicio</a><a href="privacidad.html">Privacidad</a></nav>
+</header>
+
+<main class="legal">
+  <h1>Condiciones del servicio</h1>
+  <p class="upd">Última actualización: 20 de octubre de 2026</p>
+
+  <h2>1. Objeto</h2>
+  <p>Estas condiciones regulan el uso de la web <a href="https://andaquenosabesna.thax.es">andaquenosabesna.thax.es</a>, del programa <strong>Anda Que No Sabes Ná</strong> y de la aplicación privada con la que publicamos nuestro contenido en YouTube, TikTok e Instagram. Al usar la web aceptas estas condiciones.</p>
+
+  <h2>2. La web</h2>
+  <p>La web es informativa: presenta el programa y enlaza a nuestros vídeos y redes sociales. No requiere registro y no ofrece servicios de pago. Intentamos que la información sea correcta, pero puede cambiar o contener errores.</p>
+
+  <h2>3. La aplicación de publicación</h2>
+  <p>La aplicación es una herramienta de uso interno, instalada en un servidor propio, que sirve para programar y publicar el contenido del programa en las cuentas del propio programa. <strong>No está abierta al público ni ofrece a terceros ninguna funcionalidad.</strong> El tratamiento de datos asociado se describe en la <a href="privacidad.html">política de privacidad</a>.</p>
+
+  <h2>4. Servicios de terceros</h2>
+  <p>La publicación se realiza a través de plataformas de terceros, cuyas condiciones se aplican además de estas:</p>
+  <ul>
+    <li><a href="https://www.youtube.com/t/terms" target="_blank" rel="noopener">Términos del Servicio de YouTube</a></li>
+    <li><a href="https://www.tiktok.com/legal/page/row/terms-of-service/es" target="_blank" rel="noopener">Términos del Servicio de TikTok</a></li>
+    <li>Condiciones de uso de Instagram (Meta)</li>
+  </ul>
+
+  <h2>5. Propiedad intelectual</h2>
+  <p>Los vídeos, textos, imágenes, el nombre y el logotipo de Anda Que No Sabes Ná pertenecen a sus autores y a las personas que participan en el programa. No está permitido reproducirlos, distribuirlos ni usarlos con fines comerciales sin autorización previa por escrito. Puedes compartir los enlaces a nuestros vídeos libremente.</p>
+
+  <h2>6. Enlaces externos</h2>
+  <p>La web contiene enlaces a sitios de terceros. No controlamos su contenido ni somos responsables de sus políticas o prácticas.</p>
+
+  <h2>7. Limitación de responsabilidad</h2>
+  <p>La web se ofrece «tal cual», sin garantías de disponibilidad continua. En la medida permitida por la ley, no seremos responsables de los daños derivados de su uso o de la imposibilidad de acceder a ella. Las opiniones expresadas en el programa son de quienes las dicen.</p>
+
+  <h2>8. Cambios</h2>
+  <p>Podemos actualizar estas condiciones. La versión vigente es la publicada en esta página, con su fecha de actualización.</p>
+
+  <h2>9. Ley aplicable y contacto</h2>
+  <p>Estas condiciones se rigen por la legislación española. Para cualquier duda, escríbenos a <a href="mailto:andaquenosabesnada@gmail.com">andaquenosabesnada@gmail.com</a>.</p>
+</main>
+</body>
+</html>