hacklab/resetea.net
1
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: rediseño visual completo — slider, dark theme, hero unificado

Browse source 
- Dark theme en index (class=page-dark): fondo #1a1714, títulos ácido, botones nav crema
- Hero-landing con gradiente animado ácido→caoba aplicado a los 7 htmls
- Slider 3 slides (crossfade CSS + JS): crowd-phones / surveillance / legal-action
- Imágenes descargadas localmente (CSP img-src 'self')
- Botón RESETEA hero: verde ácido, fuente Recion, tipografía grande centrada
- Cards de estudios con enlaces a fuente original
- CSP ampliada: img-src añade cdn.simpleicons.org para chips de redes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hacklab 2026-04-26 23:34:41 +02:00
parent d49da56e87
commit 467820b8b3
15 changed files with 2552 additions and 566 deletions
Download patch file Download diff file Expand all files Collapse all files

724
public/index.html
View file

@ -9,7 +9,7 @@
<link rel="stylesheet" href="index.css">
</head>
<body>
<body class="page-dark">
<main>
@ -20,43 +20,272 @@
<section class="hero-landing">
<div class="container hero-landing-inner">
<h1 class="main-title">RESETEA</h1>
<p class="main-tagline">La información es poder.<br>Quitémosles poder.</p>
<div class="quotes-strip">
<div class="quote-carousel" id="quote-carousel">
<blockquote class="hero-quote active">
<span class="q-mark">"</span>Matamos gente basándonos en metadatos.<span class="q-mark">"</span>
<cite>— Gen. Michael Hayden, ex-director de la NSA</cite>
</blockquote>
<blockquote class="hero-quote">
<span class="q-mark">"</span>Decir que la privacidad no te importa porque no tienes nada que ocultar es como decir que la libertad de expresión no importa porque no tienes nada que decir.<span class="q-mark">"</span>
<cite>— Edward Snowden</cite>
</blockquote>
<blockquote class="hero-quote">
<span class="q-mark">"</span>El que controla los datos del presente controla el pasado. El que controla el pasado controla el futuro.<span class="q-mark">"</span>
<cite>— Inspirado en George Orwell, <em>1984</em></cite>
</blockquote>
<blockquote class="hero-quote">
<span class="q-mark">"</span>No somos los clientes de estas empresas. Somos el producto.<span class="q-mark">"</span>
<cite>— Richard Serra &amp; Carlota Fay Schoolman, 1973</cite>
</blockquote>
<blockquote class="hero-quote">
<span class="q-mark">"</span>La vigilancia es el modelo de negocio de internet.<span class="q-mark">"</span>
<cite>— Bruce Schneier, criptógrafo y especialista en seguridad</cite>
</blockquote>
</div>
</div>
<div class="landing-nav">
<a class="landing-nav-btn" href="tipos.html">Tipos de información</a>
<a class="landing-nav-btn" href="concienciacion.html">Concienciación</a>
<a class="landing-nav-btn" href="egosurfing.html">Egosurfing</a>
<a class="landing-nav-btn landing-nav-btn--highlight" href="plantillas.html">Plantillas GDPR</a>
<a class="landing-nav-btn landing-nav-btn--highlight" href="plantillas.html">Resetea</a>
<a class="landing-nav-btn" href="stats.html">Estadísticas</a>
<a class="landing-nav-btn" href="salud-digital.html">🧠 Salud digital</a>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════
INTRO — salud digital / por qué importa
════════════════════════════════════════════ -->
<section class="intro-section">
<div class="container intro-inner">
<div class="intro-left">
<span class="intro-label">Salud digital</span>
<h2 class="intro-title">
¿Por qué<br>
<em>resetear</em><br>
tu huella digital?
</h2>
<p class="intro-desc">
Cada clic, cada like, cada segundo de scroll alimenta sistemas diseñados
para mantenerte conectado. La ciencia lo confirma: el uso excesivo de redes sociales
altera la química cerebral, fragmenta la atención y deteriora el bienestar mental.
Recuperar el control empieza por entender lo que está en juego.
</p>
<ul class="intro-bullets">
<li>
<span class="bullet-icon bullet-icon--caoba">🧠</span>
<span><strong>Dopamina secuestrada.</strong> Los algoritmos de recompensa variable activan
los mismos circuitos cerebrales que las máquinas tragaperras, generando dependencia involuntaria.</span>
</li>
<li>
<span class="bullet-icon bullet-icon--acid">⏱️</span>
<span><strong>Atención fragmentada.</strong> Los usuarios de TikTok e Instagram cambian de
tarea cada 47&nbsp;segundos. La capacidad de concentración sostenida se deteriora con el uso crónico.</span>
</li>
<li>
<span class="bullet-icon bullet-icon--sage">🕵️</span>
<span><strong>Perfil sin consentimiento.</strong> Tu comportamiento en línea construye un perfil
vendido a miles de data brokers para influir en tus decisiones de consumo, políticas y vitales.</span>
</li>
<li>
<span class="bullet-icon bullet-icon--caoba">🔒</span>
<span><strong>Derecho al olvido.</strong> La ley europea te da el poder de exigir que
borren tus datos. Solo hace falta saber cómo ejercerlo.</span>
</li>
<li>
<span class="bullet-icon bullet-icon--blue">🌙</span>
<span><strong>Sueño interrumpido.</strong> El uso nocturno de pantallas suprime la melatonina
y activa el FOMO, reduciendo la calidad del sueño entre un 20&nbsp;y un 40&nbsp;%.</span>
</li>
<li>
<span class="bullet-icon bullet-icon--acid">😰</span>
<span><strong>Ansiedad social amplificada.</strong> Limitar redes a 30&nbsp;minutos/día
redujo significativamente la soledad y la depresión en 3&nbsp;semanas frente al grupo control.</span>
</li>
</ul>
<div class="intro-ctas">
<a class="intro-btn intro-btn--primary" href="salud-digital.html">
Leer el artículo científico →
</a>
<a class="intro-btn intro-btn--ghost" href="concienciacion.html">
Conoce tus derechos GDPR
</a>
</div>
</div>
<div class="intro-right">
<div class="intro-stat-card">
<div class="stat-row">
<span class="stat-icon">📱</span>
<div>
<div class="stat-val">6h 37m</div>
<div class="stat-desc">tiempo medio diario frente a pantallas en adultos españoles</div>
<div class="stat-source">Informe Digital 2024 · DataReportal</div>
</div>
</div>
<a class="study-card-link" style="margin-top:0.7rem;" href="https://datareportal.com/reports/digital-2024-global-overview-report" target="_blank" rel="noopener">Ver informe →</a>
</div>
<div class="intro-stat-card">
<div class="stat-row">
<span class="stat-icon">🧪</span>
<div>
<div class="stat-val">+61&nbsp;%</div>
<div class="stat-desc">más riesgo de depresión en adolescentes con uso diario intensivo de redes sociales</div>
<div class="stat-source">Twenge et al. (2018) · JAMA Pediatrics</div>
</div>
</div>
<a class="study-card-link" style="margin-top:0.7rem;" href="https://jamanetwork.com/journals/jamapediatrics/fullarticle/2737309" target="_blank" rel="noopener">Ver estudio →</a>
</div>
<div class="intro-stat-card">
<div class="stat-row">
<span class="stat-icon">🧠</span>
<div>
<div class="stat-val">40+</div>
<div class="stat-desc">estudios neurológicos documentan reducción de materia gris en el córtex prefrontal de usuarios intensivos</div>
<div class="stat-source">Revisión sistemática · PMC 2024</div>
</div>
</div>
</div>
<div class="intro-stat-card">
<div class="stat-row">
<span class="stat-icon">🛡️</span>
<div>
<div class="stat-val">30 días</div>
<div class="stat-desc">plazo legal máximo que tienen las plataformas para ejecutar tu solicitud de borrado GDPR</div>
<div class="stat-source">Art. 12 RGPD</div>
</div>
</div>
</div>
<div class="intro-stat-card">
<div class="stat-row">
<span class="stat-icon">⏰</span>
<div>
<div class="stat-val">23 min</div>
<div class="stat-desc">tiempo medio para recuperar la concentración plena tras una interrupción digital. Cada notificación reinicia el reloj</div>
<div class="stat-source">Gloria Mark, UC Irvine · CHI 2008</div>
</div>
</div>
</div>
<div class="intro-stat-card">
<div class="stat-row">
<span class="stat-icon">🕵️</span>
<div>
<div class="stat-val">87M</div>
<div class="stat-desc">perfiles cosechados sin consentimiento por Cambridge Analytica para manipulación política</div>
<div class="stat-source">Testimonio Zuckerberg · Senado EE.UU. 2018</div>
</div>
</div>
</div>
</div>
<div class="intro-cta-hero">
<a class="btn-resetea-hero" href="#panel">RESETEA</a>
<span class="btn-resetea-sub">Ejerce tu derecho al olvido — gratis, sin abogado, en minutos</span>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════
PHOTO SLIDER — imagen editorial
════════════════════════════════════════════ -->
<div class="photo-slider" id="photo-slider">
<div class="photo-slide photo-slide--1 active">
<div class="photo-slide-inner">
<span class="photo-slide-label">Tu atención, tu tiempo</span>
<h2 class="photo-slide-headline">4 horas al día en pantallas.<br>¿Cuántas decides tú?</h2>
<p class="photo-slide-sub">Recuperar el control no es dejar la tecnología. Es decidir conscientemente quién tiene acceso a ti.</p>
</div>
</div>
<div class="photo-slide photo-slide--2">
<div class="photo-slide-inner">
<span class="photo-slide-label">Vigilancia constante</span>
<h2 class="photo-slide-headline">Te observan aunque<br>no estés mirando.</h2>
<p class="photo-slide-sub">Cámaras, sensores, algoritmos. Tu rastro digital viaja solo las 24 horas. Tienes derecho a saber quién lo tiene y a recuperarlo.</p>
</div>
</div>
<div class="photo-slide photo-slide--3">
<div class="photo-slide-inner">
<span class="photo-slide-label">Tu derecho, tu poder</span>
<h2 class="photo-slide-headline">30 días. El plazo legal<br>para borrar tus datos.</h2>
<p class="photo-slide-sub">El RGPD te da herramientas concretas y exigibles. Ejercerlas es gratis, no requiere abogado y empieza aquí.</p>
</div>
</div>
<div class="slider-dots" role="tablist" aria-label="Diapositivas">
<button class="slider-dot active" aria-label="Diapositiva 1" data-slide="0"></button>
<button class="slider-dot" aria-label="Diapositiva 2" data-slide="1"></button>
<button class="slider-dot" aria-label="Diapositiva 3" data-slide="2"></button>
</div>
</div>
<!-- ══════════════════════════════════════════
ESTUDIOS — Lo que dice la ciencia
════════════════════════════════════════════ -->
<section class="studies-section">
<div class="container">
<div class="studies-header">
<span class="studies-eyebrow">Evidencia científica</span>
<h2 class="studies-title">Lo que dice la ciencia</h2>
<p class="studies-subtitle">Más de 40 estudios académicos publicados en revistas especializadas documentan el impacto neurológico y psicológico del uso intensivo de redes sociales.</p>
</div>
<div class="studies-grid">
<div class="study-card study-card--brain">
<div class="study-card-icon">🧠</div>
<div class="study-card-stat">40+</div>
<h3 class="study-card-title">Cambios estructurales</h3>
<p class="study-card-text">Estudios neurológicos documentan reducción de materia gris en el córtex prefrontal de usuarios intensivos — la zona responsable del autocontrol y la toma de decisiones.</p>
<span class="study-card-source">Revisión sistemática · PMC 2024</span>
<a class="study-card-link" href="https://pmc.ncbi.nlm.nih.gov/articles/PMC10912019/" target="_blank" rel="noopener">Ver estudio →</a>
</div>
<div class="study-card study-card--attention">
<div class="study-card-icon">⏱️</div>
<div class="study-card-stat">47 seg</div>
<h3 class="study-card-title">Atención fragmentada</h3>
<p class="study-card-text">Los usuarios de TikTok e Instagram cambian de tarea cada 47 segundos. La capacidad de concentración sostenida se deteriora con el uso crónico de feeds infinitos.</p>
<span class="study-card-source">Gloria Mark · UC Irvine · CHI 2008</span>
<a class="study-card-link" href="https://dl.acm.org/doi/10.1145/1357054.1357072" target="_blank" rel="noopener">Ver estudio →</a>
</div>
<div class="study-card study-card--sleep">
<div class="study-card-icon">🌙</div>
<div class="study-card-stat">−40%</div>
<h3 class="study-card-title">Sueño interrumpido</h3>
<p class="study-card-text">El uso nocturno de pantallas suprime la melatonina y activa el FOMO, reduciendo la calidad del sueño entre un 20 y un 40% según el tipo de dispositivo y hora de uso.</p>
<span class="study-card-source">Hysing et al. (2015) · BMJ Open</span>
<a class="study-card-link" href="https://bmjopen.bmj.com/content/5/2/e006748" target="_blank" rel="noopener">Ver estudio →</a>
</div>
<div class="study-card study-card--data">
<div class="study-card-icon">🕵️</div>
<div class="study-card-stat">5.000+</div>
<h3 class="study-card-title">Datos como mercancía</h3>
<p class="study-card-text">Más de 5.000 data brokers comercian con tu perfil conductual. Los datos de comportamiento en redes se venden en tiempo real a anunciantes, aseguradoras y gobiernos.</p>
<span class="study-card-source">FTC Data Broker Report · 2014</span>
<a class="study-card-link" href="https://www.ftc.gov/reports/data-brokers" target="_blank" rel="noopener">Ver informe →</a>
</div>
</div>
<!-- Banner editorial — dopamina / adicción -->
<div class="studies-banner">
<div class="studies-banner-photo">
<div class="studies-banner-photo-inner">
<div class="sbp-label">El circuito de la adicción</div>
<div class="sbp-stat">Dopamina</div>
<div class="sbp-desc">Los likes activan los mismos circuitos cerebrales que las máquinas tragaperras</div>
</div>
</div>
<div class="studies-banner-text">
<h3>El diseño deliberado de la adicción</h3>
<p>Las plataformas de redes sociales no son neutrales. Sus equipos de ingeniería trabajan activamente para maximizar el <em>engagement</em> mediante patrones de recompensa variable — el mismo mecanismo que hace adictivo el juego de azar.</p>
<p>El ex presidente de Facebook Sean Parker admitió en 2017 que la plataforma fue diseñada explícitamente para "consumir tanto de tu tiempo y atención consciente como sea posible" explotando <em>"una vulnerabilidad en la psicología humana"</em>.</p>
<a class="intro-btn intro-btn--ghost" href="salud-digital.html">Ver todos los estudios →</a>
</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════
FORMULARIO PRINCIPAL — EMAIL + REDES
════════════════════════════════════════════ -->
@ -147,354 +376,6 @@
</div>
</section>
<!-- ══════════════════════════════════════════
PANEL DE ACCIONES COMPLETO (checklist)
════════════════════════════════════════════ -->
<section class="panel">
<div class="container">
<div class="panel-global-header">
<h2 class="panel-title">Panel de acciones completo</h2>
<p class="section-desc">
Marca cada acción completada para seguir tu progreso. Todos los enlaces apuntan a páginas oficiales.
Recuerda: <strong>descarga primero tus datos</strong> antes de eliminar nada.
</p>
</div>
<div class="progress-track">
<div class="progress-bar"><div class="progress-fill" id="progress-fill" style="width:0%"></div></div>
<span class="progress-label" id="progress-text">0 acciones completadas</span>
</div>
<!-- ── Cuentas base ── -->
<div class="panel-section">
<div class="panel-section-header">
<span class="panel-section-badge">Cuentas base</span>
<button class="btn-mark-section" type="button" data-section="cuentas-base">Marcar todas</button>
</div>
<div class="pitem-grid" id="psec-cuentas-base">
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/google/1a1714" alt=""> Google</span></label>
<div class="actions">
<a href="https://myaccount.google.com/data-and-privacy" target="_blank" rel="noopener">Descarga datos</a>
<a href="https://myaccount.google.com/delete-services-or-account" target="_blank" rel="noopener">Eliminar cuenta</a>
<a href="plantillas.html" target="_blank">Carta GDPR</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/microsoft/1a1714" alt=""> Microsoft / Outlook</span></label>
<div class="actions">
<a href="https://account.microsoft.com/account/privacy" target="_blank" rel="noopener">Privacidad</a>
<a href="https://account.live.com/closeaccount.aspx" target="_blank" rel="noopener">Cerrar cuenta</a>
<a href="plantillas.html" target="_blank">Carta GDPR</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/apple/1a1714" alt=""> Apple ID</span></label>
<div class="actions">
<a href="https://privacy.apple.com/" target="_blank" rel="noopener">Portal privacidad</a>
<a href="https://support.apple.com/es-es/111001" target="_blank" rel="noopener">Eliminar cuenta</a>
<a href="plantillas.html" target="_blank">Carta GDPR</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/amazon/1a1714" alt=""> Amazon</span></label>
<div class="actions">
<a href="https://www.amazon.es/gp/help/customer/display.html?nodeId=GX7NJQ4ZB8MHFRNJ" target="_blank" rel="noopener">Política privacidad</a>
<a href="https://www.amazon.es/gp/help/customer/display.html?nodeId=GXPU3YPMBDQWWHGZ" target="_blank" rel="noopener">Cerrar cuenta</a>
<a href="plantillas.html" target="_blank">Carta GDPR</a>
</div>
</div>
</div>
<div class="panel-section-footer">
<button class="btn ghost btn--section-send" type="button" data-section="cuentas-base">✓ Marcar sección completada</button>
</div>
</div>
<!-- ── Redes sociales ── -->
<div class="panel-section">
<div class="panel-section-header">
<span class="panel-section-badge">Redes sociales</span>
<button class="btn-mark-section" type="button" data-section="redes-sociales">Marcar todas</button>
</div>
<div class="pitem-grid" id="psec-redes-sociales">
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/instagram/1a1714" alt=""> Instagram</span></label>
<div class="actions">
<a href="https://www.instagram.com/download/request/" target="_blank" rel="noopener">Descarga datos</a>
<a href="https://www.instagram.com/accounts/remove/request/permanent/" target="_blank" rel="noopener">Eliminar cuenta</a>
<a href="plantillas.html" target="_blank">Carta GDPR</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/facebook/1a1714" alt=""> Facebook</span></label>
<div class="actions">
<a href="https://www.facebook.com/dyi/" target="_blank" rel="noopener">Descarga datos</a>
<a href="https://www.facebook.com/help/delete_account" target="_blank" rel="noopener">Eliminar cuenta</a>
<a href="plantillas.html" target="_blank">Carta GDPR</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/x/1a1714" alt=""> X / Twitter</span></label>
<div class="actions">
<a href="https://x.com/settings/download_your_data" target="_blank" rel="noopener">Descarga datos</a>
<a href="https://x.com/settings/deactivate" target="_blank" rel="noopener">Desactivar cuenta</a>
<a href="plantillas.html" target="_blank">Carta GDPR</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/linkedin/1a1714" alt=""> LinkedIn</span></label>
<div class="actions">
<a href="https://www.linkedin.com/mypreferences/d/data-export" target="_blank" rel="noopener">Descarga datos</a>
<a href="https://www.linkedin.com/mypreferences/d/close-your-account" target="_blank" rel="noopener">Cerrar cuenta</a>
<a href="plantillas.html" target="_blank">Carta GDPR</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/tiktok/1a1714" alt=""> TikTok</span></label>
<div class="actions">
<a href="https://www.tiktok.com/setting/privacy?settingPage=privacy" target="_blank" rel="noopener">Privacidad</a>
<a href="https://support.tiktok.com/es/safety-hic/account-and-user-safety/account-deletion" target="_blank" rel="noopener">Eliminar cuenta</a>
<a href="plantillas.html" target="_blank">Carta GDPR</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/snapchat/1a1714" alt=""> Snapchat</span></label>
<div class="actions">
<a href="https://accounts.snapchat.com/accounts/downloadmydata" target="_blank" rel="noopener">Descarga datos</a>
<a href="https://accounts.snapchat.com/accounts/delete_account" target="_blank" rel="noopener">Eliminar cuenta</a>
<a href="plantillas.html" target="_blank">Carta GDPR</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/pinterest/1a1714" alt=""> Pinterest</span></label>
<div class="actions">
<a href="https://www.pinterest.es/settings/privacy/" target="_blank" rel="noopener">Privacidad</a>
<a href="https://help.pinterest.com/es/article/deactivate-or-close-your-account" target="_blank" rel="noopener">Eliminar cuenta</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/reddit/1a1714" alt=""> Reddit</span></label>
<div class="actions">
<a href="https://www.reddit.com/settings/data-request" target="_blank" rel="noopener">Descarga datos</a>
<a href="https://www.reddit.com/settings/account" target="_blank" rel="noopener">Eliminar cuenta</a>
<a href="plantillas.html" target="_blank">Carta GDPR</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/discord/1a1714" alt=""> Discord</span></label>
<div class="actions">
<a href="https://discord.com/privacy" target="_blank" rel="noopener">Privacidad</a>
<a href="https://support.discord.com/hc/es/articles/212500837" target="_blank" rel="noopener">Eliminar cuenta</a>
<a href="plantillas.html" target="_blank">Carta GDPR</a>
</div>
</div>
</div>
<div class="panel-section-footer">
<button class="btn ghost btn--section-send" type="button" data-section="redes-sociales">✓ Marcar sección completada</button>
</div>
</div>
<!-- ── Mensajería ── -->
<div class="panel-section">
<div class="panel-section-header">
<span class="panel-section-badge">Mensajería</span>
<button class="btn-mark-section" type="button" data-section="mensajeria">Marcar todas</button>
</div>
<div class="pitem-grid" id="psec-mensajeria">
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/whatsapp/1a1714" alt=""> WhatsApp</span></label>
<div class="actions">
<a href="https://faq.whatsapp.com/1180414079177245" target="_blank" rel="noopener">Solicitar datos</a>
<a href="https://faq.whatsapp.com/1306557496340600" target="_blank" rel="noopener">Eliminar cuenta</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/telegram/1a1714" alt=""> Telegram</span></label>
<div class="actions">
<a href="https://my.telegram.org/auth" target="_blank" rel="noopener">Eliminar cuenta</a>
<a href="https://telegram.org/privacy" target="_blank" rel="noopener">Política privacidad</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/gmail/1a1714" alt=""> Gmail (correo)</span></label>
<div class="actions">
<a href="https://myaccount.google.com/deleteaccount" target="_blank" rel="noopener">Gestionar</a>
</div>
</div>
</div>
<div class="panel-section-footer">
<button class="btn ghost btn--section-send" type="button" data-section="mensajeria">✓ Marcar sección completada</button>
</div>
</div>
<!-- ── Streaming ── -->
<div class="panel-section">
<div class="panel-section-header">
<span class="panel-section-badge">Streaming</span>
<button class="btn-mark-section" type="button" data-section="streaming">Marcar todas</button>
</div>
<div class="pitem-grid" id="psec-streaming">
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/spotify/1a1714" alt=""> Spotify</span></label>
<div class="actions">
<a href="https://www.spotify.com/es/account/privacy/" target="_blank" rel="noopener">Privacidad</a>
<a href="https://support.spotify.com/es/article/close-account/" target="_blank" rel="noopener">Cerrar cuenta</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/netflix/1a1714" alt=""> Netflix</span></label>
<div class="actions">
<a href="https://help.netflix.com/es/node/407" target="_blank" rel="noopener">Cancelar suscripción</a>
<a href="https://help.netflix.com/es/node/100624" target="_blank" rel="noopener">Eliminar perfil</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/twitch/1a1714" alt=""> Twitch</span></label>
<div class="actions">
<a href="https://www.twitch.tv/user/delete-account" target="_blank" rel="noopener">Eliminar cuenta</a>
<a href="https://www.twitch.tv/p/es-es/legal/privacy-notice/" target="_blank" rel="noopener">Política privacidad</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/youtube/1a1714" alt=""> YouTube</span></label>
<div class="actions">
<a href="https://myaccount.google.com/data-and-privacy" target="_blank" rel="noopener">Gestionar datos</a>
<a href="https://support.google.com/youtube/answer/55759" target="_blank" rel="noopener">Cerrar canal</a>
</div>
</div>
</div>
<div class="panel-section-footer">
<button class="btn ghost btn--section-send" type="button" data-section="streaming">✓ Marcar sección completada</button>
</div>
</div>
<!-- ── Buscadores ── -->
<div class="panel-section">
<div class="panel-section-header">
<span class="panel-section-badge">Buscadores</span>
<button class="btn-mark-section" type="button" data-section="buscadores">Marcar todas</button>
</div>
<div class="pitem-grid" id="psec-buscadores">
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/google/1a1714" alt=""> Google — Derecho al olvido (UE)</span></label>
<div class="actions">
<a href="https://reportcontent.google.com/forms/rtbf" target="_blank" rel="noopener">Formulario RTBF</a>
<a href="plantillas.html" target="_blank">Carta GDPR</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/google/1a1714" alt=""> Google — Contenido obsoleto</span></label>
<div class="actions">
<a href="https://search.google.com/search-console/remove-outdated-content" target="_blank" rel="noopener">Herramienta eliminación</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/google/1a1714" alt=""> Google — Info personal</span></label>
<div class="actions">
<a href="https://support.google.com/websearch/troubleshooter/9685456" target="_blank" rel="noopener">Solicitar eliminación</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/microsoftbing/1a1714" alt=""> Bing — Eliminación de contenido</span></label>
<div class="actions">
<a href="https://www.bing.com/webmasters/tools/content-removal" target="_blank" rel="noopener">Formulario Bing</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/microsoftbing/1a1714" alt=""> Bing — Derecho al olvido</span></label>
<div class="actions">
<a href="https://www.microsoft.com/es-es/concern/bing" target="_blank" rel="noopener">Solicitud Bing</a>
</div>
</div>
</div>
<div class="panel-section-footer">
<button class="btn ghost btn--section-send" type="button" data-section="buscadores">✓ Marcar sección completada</button>
</div>
</div>
<!-- ── Data brokers ── -->
<div class="panel-section">
<div class="panel-section-header">
<span class="panel-section-badge">Data brokers</span>
<button class="btn-mark-section" type="button" data-section="data-brokers">Marcar todas</button>
</div>
<div class="pitem-grid" id="psec-data-brokers">
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name">Acxiom — Opt-out</span></label>
<div class="actions">
<a href="https://isapps.acxiom.com/optout/optout.aspx" target="_blank" rel="noopener">Opt-out oficial</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name">Epsilon — Opt-out</span></label>
<div class="actions">
<a href="https://www.epsilon.com/us/privacy-policy" target="_blank" rel="noopener">Política y opt-out</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name"><img class="pitem-icon" src="https://cdn.simpleicons.org/haveibeenpwned/1a1714" alt=""> Have I Been Pwned</span></label>
<div class="actions">
<a href="https://haveibeenpwned.com/" target="_blank" rel="noopener">Verificar email</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name">DeleteMe (referencia)</span></label>
<div class="actions">
<a href="https://joindeleteme.com/sites-we-remove-from/" target="_blank" rel="noopener">Lista de brokers</a>
</div>
</div>
<div class="pitem-card">
<label class="pitem-label"><input type="checkbox" class="progress-cb"><span class="pitem-name">AEPD — Reclamación</span></label>
<div class="actions">
<a href="https://sedeagpd.gob.es/sede-electronica-web/" target="_blank" rel="noopener">Sede AEPD</a>
</div>
</div>
</div>
<div class="panel-section-footer">
<button class="btn ghost btn--section-send" type="button" data-section="data-brokers">✓ Marcar sección completada</button>
</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════
CÓMO FUNCIONA
════════════════════════════════════════════ -->
@ -566,6 +447,37 @@
</div>
</section>
<!-- ══════════════════════════════════════════
CITAS — sección al pie
════════════════════════════════════════════ -->
<section class="quotes-footer-section">
<div class="container">
<p class="quotes-footer-label">Voces que importan</p>
<div class="quotes-footer-carousel" id="quote-carousel">
<blockquote class="hero-quote active">
<span class="q-mark">"</span>Matamos gente basándonos en metadatos.<span class="q-mark">"</span>
<cite>— Gen. Michael Hayden, ex-director de la NSA</cite>
</blockquote>
<blockquote class="hero-quote">
<span class="q-mark">"</span>Decir que la privacidad no te importa porque no tienes nada que ocultar es como decir que la libertad de expresión no importa porque no tienes nada que decir.<span class="q-mark">"</span>
<cite>— Edward Snowden</cite>
</blockquote>
<blockquote class="hero-quote">
<span class="q-mark">"</span>El que controla los datos del presente controla el pasado. El que controla el pasado controla el futuro.<span class="q-mark">"</span>
<cite>— Inspirado en George Orwell, <em>1984</em></cite>
</blockquote>
<blockquote class="hero-quote">
<span class="q-mark">"</span>No somos los clientes de estas empresas. Somos el producto.<span class="q-mark">"</span>
<cite>— Richard Serra &amp; Carlota Fay Schoolman, 1973</cite>
</blockquote>
<blockquote class="hero-quote">
<span class="q-mark">"</span>La vigilancia es el modelo de negocio de internet.<span class="q-mark">"</span>
<cite>— Bruce Schneier, criptógrafo y especialista en seguridad</cite>
</blockquote>
</div>
</div>
</section>
</main>
<footer class="footer">
@ -577,6 +489,35 @@
<script>
'use strict';
/* ── Photo slider ────────────────────────────── */
(function () {
const slider = document.getElementById('photo-slider');
if (!slider) return;
const slides = slider.querySelectorAll('.photo-slide');
const dots = slider.querySelectorAll('.slider-dot');
let current = 0;
let timer;
function goTo(n) {
slides[current].classList.remove('active');
dots[current].classList.remove('active');
current = (n + slides.length) % slides.length;
slides[current].classList.add('active');
dots[current].classList.add('active');
}
function start() { timer = setInterval(function() { goTo(current + 1); }, 5500); }
function stop() { clearInterval(timer); }
dots.forEach(function(dot) {
dot.addEventListener('click', function() {
stop(); goTo(+this.dataset.slide); start();
});
});
start();
})();
/* ── Chips de redes ─────────────────────────── */
/* Solo chips seleccionables (auto + form) — los manuales tienen acción directa */
const chips = document.querySelectorAll('.net-chip:not(.net-chip--manual)');
@ -684,37 +625,6 @@ function addResult(name, type, msg) {
results.appendChild(div);
}
/* ── Panel checklist ────────────────────────── */
const cbs = document.querySelectorAll('.progress-cb');
const fill = document.getElementById('progress-fill');
const label = document.getElementById('progress-text');
function updateProgress() {
const done = [...cbs].filter(c => c.checked).length;
const pct = Math.round((done / cbs.length) * 100);
fill.style.width = pct + '%';
label.textContent = done + ' / ' + cbs.length + ' acciones completadas (' + pct + '%)';
}
cbs.forEach(cb => cb.addEventListener('change', updateProgress));
updateProgress();
/* ── Marcar sección completa ─────────────────── */
document.querySelectorAll('.btn-mark-section, .btn--section-send').forEach(btn => {
btn.addEventListener('click', () => {
const grid = document.getElementById('psec-' + btn.dataset.section);
if (!grid) return;
const boxes = grid.querySelectorAll('.progress-cb');
const allDone = [...boxes].every(cb => cb.checked);
boxes.forEach(cb => { cb.checked = !allDone; });
updateProgress();
/* Actualizar texto del botón "Marcar todas" de esta sección */
const secHeader = grid.closest('.panel-section').querySelector('.btn-mark-section');
if (secHeader) secHeader.textContent = allDone ? 'Marcar todas' : 'Desmarcar todas';
const secFooter = grid.closest('.panel-section').querySelector('.btn--section-send');
if (secFooter) secFooter.textContent = allDone ? '✓ Marcar sección completada' : '↩ Desmarcar sección';
});
});
/* ── Carrusel de citas — rota cada 6 s ── */
(function () {
const quotes = document.querySelectorAll('.hero-quote');