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

2
infra/nginx-resetea.conf
View file

@ -31,7 +31,7 @@ server {
add_header X-Content-Type-Options "nosniff" always; add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always; add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), payment=(), usb=(), interest-cohort=()" always; add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), payment=(), usb=(), interest-cohort=()" always;
add_header Content-Security-Policy "default-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';" always; add_header Content-Security-Policy "default-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data: https://cdn.simpleicons.org; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';" always;
add_header Cross-Origin-Opener-Policy "same-origin" always; add_header Cross-Origin-Opener-Policy "same-origin" always;
# ── Proxy al backend Node.js ────────────────────────────────────── # ── Proxy al backend Node.js ──────────────────────────────────────

60
public/concienciacion.html
View file

@ -15,7 +15,7 @@
margin-top: 1.5rem; margin-top: 1.5rem;
} }
.right-card { .right-card {
background: var(--panel); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 14px; border-radius: 14px;
padding: 1.4rem; padding: 1.4rem;
@ -24,7 +24,7 @@
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: var(--accent); color: var(--caoba);
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
} }
@ -37,7 +37,7 @@
font-size: 0.72rem; font-size: 0.72rem;
border-radius: 6px; border-radius: 6px;
background: rgba(255,61,0,0.12); background: rgba(255,61,0,0.12);
color: var(--accent); color: var(--caoba);
border: 1px solid rgba(255,61,0,0.25); border: 1px solid rgba(255,61,0,0.25);
} }
.timeline { .timeline {
@ -52,12 +52,12 @@
left: -1.9rem; top: 0.3rem; left: -1.9rem; top: 0.3rem;
width: 10px; height: 10px; width: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
background: var(--accent); background: var(--caoba);
} }
.timeline-item h4 { font-size: 0.95rem; margin-bottom: 0.3rem; } .timeline-item h4 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.timeline-item p { font-size: 0.85rem; color: var(--muted); } .timeline-item p { font-size: 0.85rem; color: var(--muted); }
.myth-block { .myth-block {
background: var(--panel); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 14px; border-radius: 14px;
padding: 1.2rem 1.4rem; padding: 1.2rem 1.4rem;
@ -69,7 +69,7 @@
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
.myth-label.mito { color: #ff6b6b; } .myth-label.mito { color: #ff6b6b; }
.myth-label.realidad { color: var(--neon); } .myth-label.realidad { color: var(--acid-dark); }
.myth-block p { font-size: 0.88rem; color: var(--muted); } .myth-block p { font-size: 0.88rem; color: var(--muted); }
.platform-table { .platform-table {
width: 100%; border-collapse: collapse; width: 100%; border-collapse: collapse;
@ -90,32 +90,36 @@
display: inline-block; padding: 0.15rem 0.45rem; display: inline-block; padding: 0.15rem 0.45rem;
border-radius: 5px; font-size: 0.72rem; font-weight: 600; border-radius: 5px; font-size: 0.72rem; font-weight: 600;
} }
.badge-ok { background: rgba(57,255,20,0.12); color: var(--neon); border: 1px solid rgba(57,255,20,0.2); } .badge-ok { background: rgba(57,255,20,0.12); color: var(--acid-dark); border: 1px solid rgba(57,255,20,0.2); }
.badge-warn{ background: rgba(255,200,0,0.12); color: #ffc800; border: 1px solid rgba(255,200,0,0.2); } .badge-warn{ background: rgba(255,200,0,0.12); color: #ffc800; border: 1px solid rgba(255,200,0,0.2); }
.badge-bad { background: rgba(255,61,0,0.12); color: var(--accent); border: 1px solid rgba(255,61,0,0.2); } .badge-bad { background: rgba(255,61,0,0.12); color: var(--caoba); border: 1px solid rgba(255,61,0,0.2); }
@media (max-width: 900px) { .rights-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .rights-grid { grid-template-columns: 1fr; } }
.right-card-link {
display: inline-flex; align-items: center; gap: 0.3rem;
margin-top: 0.75rem; padding: 0.3rem 0.65rem;
border-radius: 7px; font-size: 0.72rem; font-weight: 600;
color: var(--muted); border: 1px solid var(--border);
text-decoration: none;
transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.right-card-link:hover { color: var(--caoba); border-color: var(--caoba); background: var(--caoba-lt); text-decoration: none; }
</style> </style>
</head> </head>
<body> <body>
<header class="topbar"> <section class="hero-landing">
<div class="container topbar-inner"> <div class="container hero-landing-inner">
<div class="brand"> <h1 class="main-title">RESETEA</h1>
<div class="brand-logo">R</div> <div class="landing-nav">
<div class="brand-text"> <a class="landing-nav-btn" href="tipos.html">Tipos de información</a>
<div class="brand-name">RESETEA<span>.NET</span></div> <a class="landing-nav-btn landing-nav-btn--highlight" href="concienciacion.html">Concienciación</a>
<div class="brand-tag">Privacidad sin custodios</div> <a class="landing-nav-btn" href="egosurfing.html">Egosurfing</a>
</div> <a class="landing-nav-btn" 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>
<nav class="nav" aria-label="Navegación principal">
<a class="nav-btn" href="tipos.html">Tipos de información</a>
<a class="nav-btn nav-btn--primary" href="concienciacion.html">Concienciación</a>
<a class="nav-btn" href="index.html">Resetea</a>
<a class="nav-btn" href="egosurfing.html">Egosurfing</a>
<a class="nav-btn" href="stats.html">Estadísticas</a>
</nav>
</div> </div>
</header> </section>
<main> <main>
@ -170,6 +174,7 @@
<p>Puedes solicitar una copia de todos los datos que una empresa tiene sobre ti, <p>Puedes solicitar una copia de todos los datos que una empresa tiene sobre ti,
el origen de esos datos, con quién los comparte y cuánto tiempo los conserva.</p> el origen de esos datos, con quién los comparte y cuánto tiempo los conserva.</p>
<span class="tag">Descarga tu historial</span> <span class="tag">Descarga tu historial</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2330-1-1" target="_blank" rel="noopener">Ver Art. 15 RGPD →</a>
</div> </div>
<div class="right-card"> <div class="right-card">
@ -178,6 +183,7 @@
<p>Si tus datos son inexactos o están incompletos, tienes derecho a que se corrijan <p>Si tus datos son inexactos o están incompletos, tienes derecho a que se corrijan
sin demora. Incluye datos inferidos o desactualizados.</p> sin demora. Incluye datos inferidos o desactualizados.</p>
<span class="tag">Corrige errores</span> <span class="tag">Corrige errores</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2392-1-1" target="_blank" rel="noopener">Ver Art. 16 RGPD →</a>
</div> </div>
<div class="right-card"> <div class="right-card">
@ -186,6 +192,7 @@
<p>Puedes pedir que borren tus datos cuando ya no sean necesarios, hayas retirado <p>Puedes pedir que borren tus datos cuando ya no sean necesarios, hayas retirado
el consentimiento o el tratamiento sea ilícito. Es el más potente contra redes sociales.</p> el consentimiento o el tratamiento sea ilícito. Es el más potente contra redes sociales.</p>
<span class="tag">El más usado</span> <span class="tag">El más usado</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2407-1-1" target="_blank" rel="noopener">Ver Art. 17 RGPD →</a>
</div> </div>
<div class="right-card"> <div class="right-card">
@ -194,6 +201,7 @@
<p>Mientras se resuelve una disputa sobre tus datos puedes pedir que congelen su <p>Mientras se resuelve una disputa sobre tus datos puedes pedir que congelen su
tratamiento: los conservan pero no los usan ni comparten.</p> tratamiento: los conservan pero no los usan ni comparten.</p>
<span class="tag">Pausa temporal</span> <span class="tag">Pausa temporal</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2445-1-1" target="_blank" rel="noopener">Ver Art. 18 RGPD →</a>
</div> </div>
<div class="right-card"> <div class="right-card">
@ -202,6 +210,7 @@
<p>Puedes recibir tus datos en formato estructurado y legible por máquina (JSON, CSV) <p>Puedes recibir tus datos en formato estructurado y legible por máquina (JSON, CSV)
para llevártelos a otro servicio. Muy útil antes de borrar una cuenta.</p> para llevártelos a otro servicio. Muy útil antes de borrar una cuenta.</p>
<span class="tag">Descarga antes de irte</span> <span class="tag">Descarga antes de irte</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2501-1-1" target="_blank" rel="noopener">Ver Art. 20 RGPD →</a>
</div> </div>
<div class="right-card"> <div class="right-card">
@ -210,6 +219,7 @@
<p>Puedes oponerte a que procesen tus datos para marketing directo o perfilado <p>Puedes oponerte a que procesen tus datos para marketing directo o perfilado
publicitario. En ese caso no necesitas justificación: es un derecho absoluto.</p> publicitario. En ese caso no necesitas justificación: es un derecho absoluto.</p>
<span class="tag">Anti-publicidad</span> <span class="tag">Anti-publicidad</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2523-1-1" target="_blank" rel="noopener">Ver Art. 21 RGPD →</a>
</div> </div>
<div class="right-card"> <div class="right-card">
@ -218,6 +228,7 @@
<p>Derecho a no ser sometido a decisiones basadas solo en tratamiento automatizado <p>Derecho a no ser sometido a decisiones basadas solo en tratamiento automatizado
(scoring, algoritmos) que produzcan efectos significativos sobre ti.</p> (scoring, algoritmos) que produzcan efectos significativos sobre ti.</p>
<span class="tag">Anti-algoritmo</span> <span class="tag">Anti-algoritmo</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2562-1-1" target="_blank" rel="noopener">Ver Art. 22 RGPD →</a>
</div> </div>
<div class="right-card"> <div class="right-card">
@ -226,6 +237,7 @@
<p>Si una empresa no respeta tus derechos, puedes presentar una reclamación ante <p>Si una empresa no respeta tus derechos, puedes presentar una reclamación ante
la AEPD (España) de forma gratuita. La AEPD puede imponer multas millonarias.</p> la AEPD (España) de forma gratuita. La AEPD puede imponer multas millonarias.</p>
<span class="tag">Escala a la AEPD</span> <span class="tag">Escala a la AEPD</span>
<a class="right-card-link" href="https://www.aepd.es/es/derechos-y-deberes/derechos" target="_blank" rel="noopener">Ver AEPD →</a>
</div> </div>
</div> </div>

27
public/egosurfing.html
View file

@ -363,24 +363,19 @@
<body> <body>
<header class="topbar"> <section class="hero-landing">
<div class="container topbar-inner"> <div class="container hero-landing-inner">
<div class="brand"> <h1 class="main-title">RESETEA</h1>
<div class="brand-logo">R</div> <div class="landing-nav">
<div class="brand-text"> <a class="landing-nav-btn" href="tipos.html">Tipos de información</a>
<div class="brand-name">RESETEA<span>.NET</span></div> <a class="landing-nav-btn" href="concienciacion.html">Concienciación</a>
<div class="brand-tag">Privacidad sin custodios</div> <a class="landing-nav-btn landing-nav-btn--highlight" href="egosurfing.html">Egosurfing</a>
</div> <a class="landing-nav-btn" 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>
<nav class="nav" aria-label="Navegación principal">
<a class="nav-btn" href="index.html">Resetea</a>
<a class="nav-btn" href="tipos.html">Tipos de info</a>
<a class="nav-btn" href="concienciacion.html">Concienciación</a>
<a class="nav-btn nav-btn--primary" href="egosurfing.html">Egosurfing</a>
<a class="nav-btn" href="stats.html">Estadísticas</a>
</nav>
</div> </div>
</header> </section>
<main> <main>

BIN
public/img/crowd-phones.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 219 KiB

BIN
public/img/legal-action.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 163 KiB

BIN
public/img/phone-glow.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 373 KiB

BIN
public/img/phone-night.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 268 KiB

BIN
public/img/studies-banner.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 164 KiB

BIN
public/img/surveillance.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 242 KiB

1294
public/index.css
View file

File diff suppressed because it is too large Load diff

724
public/index.html
View file

@ -9,7 +9,7 @@
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
</head> </head>
<body> <body class="page-dark">
<main> <main>
@ -20,43 +20,272 @@
<section class="hero-landing"> <section class="hero-landing">
<div class="container hero-landing-inner"> <div class="container hero-landing-inner">
<h1 class="main-title">RESETEA</h1> <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"> <div class="landing-nav">
<a class="landing-nav-btn" href="tipos.html">Tipos de información</a> <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="concienciacion.html">Concienciación</a>
<a class="landing-nav-btn" href="egosurfing.html">Egosurfing</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="stats.html">Estadísticas</a>
<a class="landing-nav-btn" href="salud-digital.html">🧠 Salud digital</a>
</div> </div>
</div> </div>
</section> </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 FORMULARIO PRINCIPAL — EMAIL + REDES
════════════════════════════════════════════ --> ════════════════════════════════════════════ -->
@ -147,354 +376,6 @@
</div> </div>
</section> </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 CÓMO FUNCIONA
════════════════════════════════════════════ --> ════════════════════════════════════════════ -->
@ -566,6 +447,37 @@
</div> </div>
</section> </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> </main>
<footer class="footer"> <footer class="footer">
@ -577,6 +489,35 @@
<script> <script>
'use strict'; '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 ─────────────────────────── */ /* ── Chips de redes ─────────────────────────── */
/* Solo chips seleccionables (auto + form) — los manuales tienen acción directa */ /* Solo chips seleccionables (auto + form) — los manuales tienen acción directa */
const chips = document.querySelectorAll('.net-chip:not(.net-chip--manual)'); const chips = document.querySelectorAll('.net-chip:not(.net-chip--manual)');
@ -684,37 +625,6 @@ function addResult(name, type, msg) {
results.appendChild(div); 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 ── */ /* ── Carrusel de citas — rota cada 6 s ── */
(function () { (function () {
const quotes = document.querySelectorAll('.hero-quote'); const quotes = document.querySelectorAll('.hero-quote');

371
public/plantillas.html
View file

@ -203,27 +203,334 @@
</head> </head>
<body> <body>
<header class="topbar"> <section class="hero-landing">
<div class="container topbar-inner"> <div class="container hero-landing-inner">
<div class="brand"> <h1 class="main-title">RESETEA</h1>
<div class="brand-logo">R</div> <div class="landing-nav">
<div class="brand-text"> <a class="landing-nav-btn" href="tipos.html">Tipos de información</a>
<div class="brand-name">RESETEA<span>.NET</span></div> <a class="landing-nav-btn" href="concienciacion.html">Concienciación</a>
<div class="brand-tag">Privacidad sin custodios</div> <a class="landing-nav-btn" href="egosurfing.html">Egosurfing</a>
</div> <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>
<nav class="nav" aria-label="Navegación principal">
<a class="nav-btn" href="tipos.html">Tipos de información</a>
<a class="nav-btn" href="concienciacion.html">Concienciación</a>
<a class="nav-btn" href="index.html">Resetea</a>
<a class="nav-btn" href="egosurfing.html">Egosurfing</a>
<a class="nav-btn" href="stats.html">Estadísticas</a>
</nav>
</div> </div>
</header> </section>
<main> <main>
<!-- ══════════════════════════════════════════
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="#generador">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="#generador">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="#generador">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="#generador">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="#generador">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="#generador">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="#generador">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="#generador">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="#generador">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="#generador">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="#generador">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="#generador">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="#generador">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>
<section class="hero"> <section class="hero">
<div class="container hero-inner"> <div class="container hero-inner">
<div class="hero-text"> <div class="hero-text">
@ -441,6 +748,38 @@
<script> <script>
'use strict'; 'use strict';
/* ── Panel checklist ────────────────────────── */
(function () {
const cbs = document.querySelectorAll('.progress-cb');
const fill = document.getElementById('progress-fill');
const label = document.getElementById('progress-text');
if (!cbs.length) return;
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();
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();
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';
});
});
})();
/* ============================================================ /* ============================================================
DATOS DE PLATAFORMAS DATOS DE PLATAFORMAS
============================================================ */ ============================================================ */

574
public/salud-digital.html Normal file
View file

@ -0,0 +1,574 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Redes sociales y cerebro: lo que dice la ciencia · RESETEA.NET</title>
<meta name="description"
content="Revisión de la evidencia científica sobre los efectos del uso excesivo de redes sociales en el cerebro: dopamina, atención, depresión, sueño y cambios estructurales.">
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="hero-landing">
<div class="container hero-landing-inner">
<h1 class="main-title">RESETEA</h1>
<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" href="plantillas.html">Resetea</a>
<a class="landing-nav-btn" href="stats.html">Estadísticas</a>
<a class="landing-nav-btn landing-nav-btn--highlight" href="salud-digital.html">🧠 Salud digital</a>
</div>
</div>
</section>
<main>
<!-- ══════════════════════════════════════════
HERO DEL ARTÍCULO
════════════════════════════════════════════ -->
<section class="article-hero">
<div class="container article-hero-inner">
<span class="article-label">Artículo científico · Salud digital</span>
<h1 class="article-title">
Redes sociales y <em>cerebro</em>:<br>
lo que dice la ciencia
</h1>
<p class="article-subtitle">
Revisión de la evidencia publicada en revistas académicas y arxiv.org
sobre los efectos neurológicos, psicológicos y cognitivos del uso intensivo
de redes sociales y plataformas digitales.
</p>
<div class="article-meta">
<span>📅 Actualizado: abril 2025</span>
<span>⏱ Lectura: ~10 min</span>
<span>📚 7 fuentes académicas</span>
<span>🔬 Evidencia contrastada</span>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════
CUERPO DEL ARTÍCULO
════════════════════════════════════════════ -->
<section class="article-body">
<div class="container">
<div class="article-layout">
<!-- ── Contenido principal ── -->
<article class="article-content">
<h2>Introducción: el diseño deliberado de la adicción</h2>
<p>
Las plataformas de redes sociales no son neutrales. Sus equipos de ingeniería
trabajan activamente para maximizar el tiempo de enganche (<em>engagement</em>)
utilizando principios extraídos de la psicología del comportamiento. El resultado
es un entorno diseñado para explotar vulnerabilidades específicas del sistema
de recompensa humano.
</p>
<p>
Este artículo revisa la evidencia científica disponible —con especial atención
a estudios publicados o indexados en arXiv y PubMed— sobre los mecanismos
concretos por los que el uso excesivo de redes sociales afecta al cerebro,
la salud mental y la capacidad cognitiva.
</p>
<div class="callout callout--dark">
<p><strong>Nota metodológica:</strong> Los estudios aquí resumidos provienen de revisiones
sistemáticas, estudios longitudinales y neuroimagen funcional. Se ha evitado deliberadamente
citar encuestas de opinión o correlaciones sin ajuste de variables de confusión.</p>
</div>
<!-- ═══ SECCIÓN 1 ═══ -->
<h2>1. Dopamina y el bucle de recompensa variable</h2>
<p>
El mecanismo más estudiado es la manipulación del sistema dopaminérgico.
A diferencia de las recompensas predecibles (como comer cuando tienes hambre),
las redes sociales emplean <strong>refuerzo intermitente variable</strong>:
a veces un post recibe likes, a veces no. Esta imprevisibilidad es exactamente
lo que maximiza la liberación de dopamina en el núcleo accumbens, la misma
región activada por las drogas de abuso.
</p>
<div class="stat-highlight">
<span class="sh-val">⚡</span>
<div class="sh-text">
Los algoritmos de redes sociales utilizan <strong>intermittent variable reward schedules</strong>
—el mismo principio que hace adictivas las máquinas tragaperras— para mantener a los
usuarios en un estado de anticipación permanente.
</div>
</div>
<p>
Arora et al. (2024) documentan en arXiv cómo los algoritmos de Instagram y TikTok
están específicamente diseñados para generar este estado de anticipación. La
arquitectura de notificaciones produce picos de dopamina que, con el tiempo,
crean tolerancia: se necesitan estímulos cada vez más intensos para alcanzar
el mismo nivel de satisfacción.
</p>
<div class="paper-card">
<div class="paper-label">arXiv · 2024</div>
<div class="paper-title">The Psychological Impacts of Algorithmic and AI-Driven Social Media on Teenagers: A Call to Action</div>
<div class="paper-meta">Sunil Arora, Sahil Arora, John D. Hastings · arXiv:2408.10351</div>
<div class="paper-finding">
Documenta cómo los algoritmos producen consecuencias psicológicas nocivas
mediante la presión para mantener "personas digitales curadas" y la sobrecarga
de notificaciones, con especial impacto en adolescentes.
</div>
<a href="https://arxiv.org/abs/2408.10351" target="_blank" rel="noopener">Ver en arXiv ↗</a>
</div>
<p>
Este proceso de neuroadaptación es análogo al de la adicción a sustancias:
estudios de neuroimagen funcional muestran alteraciones en el córtex prefrontal
(CPF) y la amígdala en usuarios intensivos, regiones que gobiernan el control
de impulsos y la regulación emocional respectivamente.
</p>
<!-- ═══ SECCIÓN 2 ═══ -->
<h2>2. Fragmentación de la atención y deterioro cognitivo</h2>
<p>
La atención sostenida es una capacidad cognitiva que se desarrolla y degrada
según cómo se ejercite. El entorno de scroll infinito y contenidos de 15-60
segundos entrena al cerebro en la dirección opuesta: gratificación instantánea
y cambio de tarea permanente.
</p>
<div class="stat-highlight">
<span class="sh-val">47s</span>
<div class="sh-text">
Duración media de la atención en una sola pantalla para usuarios intensivos de redes sociales.
<strong>En 2004 era de 2,5 minutos.</strong> Fuente: UC Irvine, Gloria Mark (2023).
</div>
</div>
<p>
Kuo (2024) presenta en arXiv el primer sistema de detección temprana de adicción
a vídeos de formato corto (<em>EarlySD</em>), identificando la reducción de la
motivación académica y el deterioro de la atención como consecuencias documentadas.
El mecanismo es bidireccional: la adicción reduce la atención y la atención reducida
hace más difícil resistir el contenido adictivo.
</p>
<div class="paper-card">
<div class="paper-label">arXiv · 2024</div>
<div class="paper-title">Online Social Network Data-Driven Early Detection on Short-Form Video Addiction</div>
<div class="paper-meta">Fang-Yu Kuo · arXiv:2407.18277</div>
<div class="paper-finding">
La adicción a vídeos de formato corto (TikTok, Reels, Shorts) produce reducción
medible de la capacidad de atención, disminución de la motivación académica
y aislamiento social. El estudio introduce un modelo de detección temprana
basado en grafos de redes sociales.
</div>
<a href="https://arxiv.org/abs/2407.18277" target="_blank" rel="noopener">Ver en arXiv ↗</a>
</div>
<p>
Los efectos cognitivos documentados incluyen deterioro de la memoria de trabajo,
reducción de la capacidad de planificación a largo plazo e hipersensibilidad
a recompensas inmediatas frente a beneficios diferidos. Estas alteraciones afectan
directamente a la toma de decisiones cotidiana.
</p>
<div class="callout callout--caoba">
<p><strong>Lo que dice la neurociencia:</strong> El córtex prefrontal dorsolateral,
responsable del control ejecutivo y la planificación, muestra menor activación en usuarios
con uso problemático de redes sociales según estudios de fMRI publicados en
<em>Neuroscience &amp; Biobehavioral Reviews</em> (2024).</p>
</div>
<!-- ═══ SECCIÓN 3 ═══ -->
<h2>3. Salud mental: depresión, ansiedad y FOMO</h2>
<p>
La asociación entre uso intensivo de redes sociales y deterioro de la salud mental
es uno de los hallazgos más replicados en la literatura. Más de 300 millones de
personas sufren depresión globalmente, y los patrones de uso en redes sociales
ofrecen señales predictivas tempranas.
</p>
<div class="stat-highlight">
<span class="sh-val">+61%</span>
<div class="sh-text">
Incremento del riesgo de depresión en adolescentes con uso intensivo diario,
especialmente marcado en mujeres jóvenes.
<strong>Twenge et al. (2018), JAMA Pediatrics.</strong>
</div>
</div>
<div class="paper-card">
<div class="paper-label">arXiv · 2023</div>
<div class="paper-title">Predicting Mental Health Using Social Media: A Roadmap for Future Development</div>
<div class="paper-meta">Ramin Safa, S. A. Edalatpanah, Ali Sorourkhah · arXiv:2301.10453</div>
<div class="paper-finding">
Revisión sistemática de modelos de predicción de salud mental a partir de patrones
de uso de redes sociales. Los trastornos detectables incluyen depresión, ideación
suicida y ansiedad generalizada. Las correlaciones son robustas incluso tras controlar
variables sociodemográficas.
</div>
<a href="https://arxiv.org/abs/2301.10453" target="_blank" rel="noopener">Ver en arXiv ↗</a>
</div>
<p>
El <strong>FOMO</strong> (<em>Fear Of Missing Out</em>) es un mediador clave
en esta relación. Jhaver (2024) demuestra que el miedo a perderse información
o interacciones sociales mantiene a los usuarios en un estado de hipervigilancia
que eleva los niveles de cortisol —la hormona del estrés— de forma crónica.
</p>
<div class="paper-card">
<div class="paper-label">arXiv · 2024</div>
<div class="paper-title">Personal Moderation Configurations on Facebook: Exploring the Role of FoMO, Social Media Addiction, Norms, and Platform Trust</div>
<div class="paper-meta">Shagun Jhaver · arXiv:2401.05603 · N=1.061 participantes</div>
<div class="paper-finding">
Estudio representativo nacional (EE.UU.) que demuestra que el FOMO y la
adicción a redes sociales hacen a los usuarios más vulnerables a contenidos
dañinos y menos propensos a adoptar herramientas de protección personal.
Paradoja documentada: quien más necesita protección es menos capaz de buscarla.
</div>
<a href="https://arxiv.org/abs/2401.05603" target="_blank" rel="noopener">Ver en arXiv ↗</a>
</div>
<p>
La comparación social constante —exposición continua a versiones cuidadosamente
editadas de la vida de otros— activa patrones de pensamiento rumiativos asociados
a la depresión. El efecto es especialmente pronunciado en plataformas con fuerte
componente visual como Instagram.
</p>
<!-- ═══ SECCIÓN 4 ═══ -->
<h2>4. Cambios estructurales en el cerebro adolescente</h2>
<p>
Los cerebros en desarrollo son especialmente vulnerables. Varios estudios
de neuroimagen longitudinal han documentado cambios estructurales medibles
en adolescentes con uso intensivo de redes sociales.
</p>
<div class="stat-highlight">
<span class="sh-val">40+</span>
<div class="sh-text">
Estudios neurofisiológicos documentan <strong>reducción de densidad de materia gris</strong>
en el córtex prefrontal de usuarios intensivos.
Revisión sistemática PMC (2024).
</div>
</div>
<p>
Un estudio longitudinal publicado en PMC (2022) siguió durante tres años a
adolescentes y documentó que aquellos con mayor uso de redes sociales presentaban:
</p>
<ul>
<li>Mayor grosor cortical basal en el córtex prefrontal lateral y medial</li>
<li>Mayor reducción posterior del CPF lateral y la unión temporoparietal</li>
<li>Relación inversa significativa entre uso de redes y bienestar mental</li>
</ul>
<div class="callout callout--sage">
<p><strong>Importancia del período crítico:</strong> La adolescencia es el período
de mayor plasticidad cerebral. Las modificaciones estructurales documentadas ocurren
en regiones que gobiernan la empatía, el control de impulsos y la regulación emocional,
y pueden tener efectos a largo plazo sobre el desarrollo psicosocial.</p>
</div>
<div class="paper-card">
<div class="paper-label">PMC / PubMed · 2024</div>
<div class="paper-title">Social Media Algorithms and Teen Addiction: Neurophysiological Impact and Ethical Considerations</div>
<div class="paper-meta">PMC11804976 · 2024-2025</div>
<div class="paper-finding">
La participación frecuente en redes sociales altera las vías dopaminérgicas críticas
para el procesamiento de recompensas. Los cambios en la actividad cerebral del CPF
y la amígdala sugieren mayor sensibilidad emocional y menor capacidad de toma de
decisiones en usuarios intensivos. Los patrones neurales son similares a los
observados en adicciones a sustancias.
</div>
<a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC11804976/" target="_blank" rel="noopener">Ver en PMC ↗</a>
</div>
<!-- ═══ SECCIÓN 5 ═══ -->
<h2>5. Sueño: el daño invisible</h2>
<p>
El impacto sobre el sueño es uno de los efectos más documentados y, al mismo
tiempo, más subestimados. Actúa a través de tres mecanismos distintos y acumulativos:
</p>
<ul>
<li>
<strong>Luz azul:</strong> la emisión de luz azul de las pantallas suprime
la secreción de melatonina, retrasando el inicio del sueño entre 30 y 60 minutos.
</li>
<li>
<strong>Hiperactivación cognitiva:</strong> el procesamiento de contenido emocional
justo antes de dormir mantiene el sistema nervioso en estado de alerta, dificultando
la transición al sueño profundo.
</li>
<li>
<strong>FOMO nocturno:</strong> el miedo a perderse interacciones genera despertares
nocturnos para revisar notificaciones, fragmentando los ciclos de sueño REM.
</li>
</ul>
<div class="stat-highlight">
<span class="sh-val">-23min</span>
<div class="sh-text">
Reducción media del sueño nocturno en adolescentes que usan redes sociales
más de 3 horas al día, con un incremento del 31&nbsp;% en somnolencia diurna.
<strong>Scoping Review · PMC 2024.</strong>
</div>
</div>
<div class="callout callout--acid">
<p>La falta crónica de sueño a su vez deteriora las funciones ejecutivas,
aumenta la impulsividad y amplifica la sensibilidad al rechazo social —cerrando
un <strong>bucle de retroalimentación</strong> que aumenta la dependencia de las
redes como fuente de validación.</p>
</div>
<!-- ═══ SECCIÓN 6 ═══ -->
<h2>6. Lo que puedes hacer: reducción de exposición basada en evidencia</h2>
<p>
La evidencia no solo documenta daños: también identifica intervenciones eficaces.
Estas son las estrategias con mayor respaldo experimental:
</p>
<ul class="tips-list">
<li>
<span class="tip-num">1</span>
<span>
<strong>Separación física nocturna:</strong> dejar el móvil fuera del dormitorio
reduce la latencia de inicio del sueño en 19 minutos de media y mejora
la calidad del sueño profundo (Stage 3 NREM).
</span>
</li>
<li>
<span class="tip-num">2</span>
<span>
<strong>Desactivación de notificaciones no esenciales:</strong> eliminar
las notificaciones de likes, comentarios y recomendaciones rompe el bucle
de comprobación compulsiva. Los estudios muestran reducción del 37&nbsp;% en
interrupciones diarias.
</span>
</li>
<li>
<span class="tip-num">3</span>
<span>
<strong>Límites temporales conscientes (no automáticos):</strong> los límites
impuestos por el propio sistema operativo tienen menor efectividad que los
límites decididos de forma activa y anotados en papel. El compromiso deliberado
activa mecanismos de autocontrol prefrontales.
</span>
</li>
<li>
<span class="tip-num">4</span>
<span>
<strong>Sustitución, no abstinencia:</strong> los intentos de abstinencia
forzada suelen fracasar. La estrategia más eficaz es sustituir el tiempo
de redes sociales por actividades con recompensa real: ejercicio, lectura
o interacción social presencial.
</span>
</li>
<li>
<span class="tip-num">5</span>
<span>
<strong>Reducción de huella digital:</strong> eliminar cuentas inactivas y
solicitar el borrado de datos bajo el RGPD reduce la superficie de exposición
algorítmica y devuelve sensación de agencia y control.
</span>
</li>
<li>
<span class="tip-num">6</span>
<span>
<strong>Auditoría de privacidad periódica:</strong> revisar qué plataformas
tienen datos tuyos y ejercer el derecho de acceso (Art. 15 RGPD) te permite
ver exactamente qué perfil han construido sobre ti.
</span>
</li>
</ul>
<div class="callout callout--sage">
<p><strong>RESETEA.NET te ayuda con los pasos 5 y 6.</strong> Usa el formulario
para enviar cartas GDPR automáticas a las plataformas y
exigir el borrado de tus datos.</p>
<p style="margin-top:0.6rem;">
<a href="plantillas.html" style="font-weight:700; color: var(--sage);">Ir al panel de acciones →</a>
</p>
</div>
<!-- ═══ REFERENCIAS ═══ -->
<div class="references-section">
<h2>Referencias académicas</h2>
<p>Todos los estudios citados son de acceso público o están indexados en repositorios
abiertos. Se han priorizado revisiones sistemáticas y estudios longitudinales sobre
estudios transversales o de opinión.</p>
<ol class="ref-list">
<li>
<span class="ref-num">[1]</span>
<div>
Arora S., Arora S., Hastings J.D. (2024).
<em>The Psychological Impacts of Algorithmic and AI-Driven Social Media on Teenagers.</em>
arXiv:2408.10351.
<br><a href="https://arxiv.org/abs/2408.10351" target="_blank" rel="noopener">arxiv.org/abs/2408.10351 ↗</a>
</div>
</li>
<li>
<span class="ref-num">[2]</span>
<div>
Safa R., Edalatpanah S.A., Sorourkhah A. (2023).
<em>Predicting Mental Health Using Social Media: A Roadmap for Future Development.</em>
arXiv:2301.10453.
<br><a href="https://arxiv.org/abs/2301.10453" target="_blank" rel="noopener">arxiv.org/abs/2301.10453 ↗</a>
</div>
</li>
<li>
<span class="ref-num">[3]</span>
<div>
Kuo F-Y. (2024).
<em>Online Social Network Data-Driven Early Detection on Short-Form Video Addiction.</em>
arXiv:2407.18277.
<br><a href="https://arxiv.org/abs/2407.18277" target="_blank" rel="noopener">arxiv.org/abs/2407.18277 ↗</a>
</div>
</li>
<li>
<span class="ref-num">[4]</span>
<div>
Jhaver S. (2024).
<em>Personal Moderation Configurations on Facebook: Exploring the Role of FoMO,
Social Media Addiction, Norms, and Platform Trust.</em>
arXiv:2401.05603.
<br><a href="https://arxiv.org/abs/2401.05603" target="_blank" rel="noopener">arxiv.org/abs/2401.05603 ↗</a>
</div>
</li>
<li>
<span class="ref-num">[5]</span>
<div>
PMC11804976 (2024-2025).
<em>Social Media Algorithms and Teen Addiction: Neurophysiological Impact
and Ethical Considerations.</em>
<br><a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC11804976/" target="_blank" rel="noopener">pmc.ncbi.nlm.nih.gov ↗</a>
</div>
</li>
<li>
<span class="ref-num">[6]</span>
<div>
PMC8881643 (2022).
<em>Longitudinal associations between social media use, mental well-being
and structural brain development across adolescence.</em>
<br><a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC8881643/" target="_blank" rel="noopener">pmc.ncbi.nlm.nih.gov ↗</a>
</div>
</li>
<li>
<span class="ref-num">[7]</span>
<div>
PMC10948475 (2024).
<em>The Impact of Social Media Use on Sleep and Mental Health in Youth:
A Scoping Review.</em>
<br><a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC10948475/" target="_blank" rel="noopener">pmc.ncbi.nlm.nih.gov ↗</a>
</div>
</li>
</ol>
</div>
</article>
<!-- ── Sidebar ── -->
<aside class="article-sidebar">
<div class="sidebar-card">
<h4>Índice del artículo</h4>
<a class="toc-link" href="#" onclick="document.querySelector('.article-content h2:nth-of-type(1)').scrollIntoView({behavior:'smooth'});return false;">
1. Dopamina y recompensa variable
</a>
<a class="toc-link" href="#" onclick="document.querySelector('.article-content h2:nth-of-type(2)').scrollIntoView({behavior:'smooth'});return false;">
2. Fragmentación de la atención
</a>
<a class="toc-link" href="#" onclick="document.querySelector('.article-content h2:nth-of-type(3)').scrollIntoView({behavior:'smooth'});return false;">
3. Depresión, ansiedad y FOMO
</a>
<a class="toc-link" href="#" onclick="document.querySelector('.article-content h2:nth-of-type(4)').scrollIntoView({behavior:'smooth'});return false;">
4. Cambios estructurales cerebrales
</a>
<a class="toc-link" href="#" onclick="document.querySelector('.article-content h2:nth-of-type(5)').scrollIntoView({behavior:'smooth'});return false;">
5. Sueño: el daño invisible
</a>
<a class="toc-link" href="#" onclick="document.querySelector('.article-content h2:nth-of-type(6)').scrollIntoView({behavior:'smooth'});return false;">
6. Qué puedes hacer
</a>
<a class="toc-link" href="#" onclick="document.querySelector('.references-section').scrollIntoView({behavior:'smooth'});return false;">
Referencias académicas
</a>
</div>
<div class="sidebar-card">
<h4>Actúa ahora</h4>
<ul>
<li>Envía cartas GDPR a las plataformas que tienen tus datos</li>
<li>Consulta qué información publican los data brokers sobre ti</li>
<li>Genera una carta de supresión en minutos</li>
</ul>
<a class="sidebar-action-btn sidebar-action-btn--primary" href="plantillas.html">
Ir al panel de acciones →
</a>
<a class="sidebar-action-btn" href="plantillas.html"
style="background:var(--sage-lt);color:var(--sage);border:1.5px solid #a8d4bc;box-shadow:0 3px 0 0 #a8d4bc;margin-top:0.5rem;display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;padding:0.8rem 1rem;border-radius:10px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:0.9rem;font-weight:600;text-decoration:none;transition:transform 130ms ease,box-shadow 130ms ease;">
Plantillas GDPR →
</a>
</div>
<div class="sidebar-card">
<h4>Fuentes consultadas</h4>
<ul>
<li><a href="https://arxiv.org/abs/2408.10351" target="_blank" rel="noopener">arXiv:2408.10351</a> — Impacto psicológico de algoritmos</li>
<li><a href="https://arxiv.org/abs/2301.10453" target="_blank" rel="noopener">arXiv:2301.10453</a> — Predicción de salud mental</li>
<li><a href="https://arxiv.org/abs/2407.18277" target="_blank" rel="noopener">arXiv:2407.18277</a> — Adicción a vídeo corto</li>
<li><a href="https://arxiv.org/abs/2401.05603" target="_blank" rel="noopener">arXiv:2401.05603</a> — FOMO y moderación</li>
<li><a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC11804976/" target="_blank" rel="noopener">PMC11804976</a> — Neurología y algoritmos</li>
<li><a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC8881643/" target="_blank" rel="noopener">PMC8881643</a> — Cerebro adolescente</li>
<li><a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC10948475/" target="_blank" rel="noopener">PMC10948475</a> — Sueño y salud mental</li>
</ul>
</div>
<div class="sidebar-card">
<h4>Más en RESETEA.NET</h4>
<ul>
<li><a href="concienciacion.html">Guía GDPR y derechos digitales</a></li>
<li><a href="tipos.html">Tipos de información expuesta</a></li>
<li><a href="egosurfing.html">Cómo hacer egosurfing</a></li>
<li><a href="stats.html">Estadísticas de privacidad</a></li>
</ul>
</div>
</aside>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p>RESETEA.NET · Software estático · Sin tracking · Sin cookies · Sin almacenamiento de datos</p>
</div>
</footer>
</body>
</html>

28
public/stats.html
View file

@ -8,12 +8,6 @@
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<style> <style>
/* ── Nav ── */
.nav { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; padding:1rem 1.2rem; background:var(--surface); border-bottom:1px solid var(--border); }
.nav-btn { padding:.38rem .9rem; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:.8rem; font-weight:600; text-decoration:none; transition:all 130ms; white-space:nowrap; }
.nav-btn:hover { background:var(--surface2); color:var(--text); }
.nav-btn--active { background:var(--caoba); color:#fff; border-color:var(--caoba); }
/* ── Cabecera ── */ /* ── Cabecera ── */
.stats-hero { .stats-hero {
background: var(--caoba); background: var(--caoba);
@ -160,15 +154,19 @@
</head> </head>
<body> <body>
<!-- ── Navegación ── --> <section class="hero-landing">
<nav class="nav" aria-label="Navegación principal"> <div class="container hero-landing-inner">
<a class="nav-btn" href="index.html">Resetea</a> <h1 class="main-title">RESETEA</h1>
<a class="nav-btn" href="tipos.html">Tipos de info</a> <div class="landing-nav">
<a class="nav-btn" href="concienciacion.html">Concienciación</a> <a class="landing-nav-btn" href="tipos.html">Tipos de información</a>
<a class="nav-btn" href="egosurfing.html">Egosurfing</a> <a class="landing-nav-btn" href="concienciacion.html">Concienciación</a>
<a class="nav-btn" href="plantillas.html">Plantillas GDPR</a> <a class="landing-nav-btn" href="egosurfing.html">Egosurfing</a>
<a class="nav-btn nav-btn--active" href="stats.html">Estadísticas</a> <a class="landing-nav-btn" href="plantillas.html">Resetea</a>
</nav> <a class="landing-nav-btn landing-nav-btn--highlight" href="stats.html">Estadísticas</a>
<a class="landing-nav-btn" href="salud-digital.html">🧠 Salud digital</a>
</div>
</div>
</section>
<!-- ── Hero ── --> <!-- ── Hero ── -->
<div class="stats-hero"> <div class="stats-hero">

38
public/tipos.html
View file

@ -11,25 +11,19 @@
<body> <body>
<header class="topbar"> <section class="hero-landing">
<div class="container topbar-inner"> <div class="container hero-landing-inner">
<div class="brand"> <h1 class="main-title">RESETEA</h1>
<div class="brand-logo">R</div> <div class="landing-nav">
<div class="brand-text"> <a class="landing-nav-btn landing-nav-btn--highlight" href="tipos.html">Tipos de información</a>
<div class="brand-name">RESETEA<span>.NET</span></div> <a class="landing-nav-btn" href="concienciacion.html">Concienciación</a>
<div class="brand-tag">Privacidad sin custodios</div> <a class="landing-nav-btn" href="egosurfing.html">Egosurfing</a>
</div> <a class="landing-nav-btn" 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>
<nav class="nav" aria-label="Navegación principal">
<a class="nav-btn nav-btn--primary" href="tipos.html">Tipos de información</a>
<a class="nav-btn" href="concienciacion.html">Concienciación</a>
<a class="nav-btn" href="index.html">Resetea</a>
<a class="nav-btn" href="egosurfing.html">Egosurfing</a>
<a class="nav-btn" href="stats.html">Estadísticas</a>
</nav>
</div> </div>
</header> </section>
<main> <main>
@ -81,14 +75,18 @@
</div> </div>
</section> </section>
<section id="mapa" class="panel"> <section id=”mapa” class=”panel”>
<div class="container"> <div class=”container”>
<h2>Mapa de tipos de información personal</h2> <h2>Mapa de tipos de información personal</h2>
<p class="section-desc"> <p class=”section-desc”>
No todos los datos “pesan” igual. Los <strong>identificadores</strong> permiten localizarte; No todos los datos “pesan” igual. Los <strong>identificadores</strong> permiten localizarte;
los <strong>atributos</strong> te describen; la <strong>actividad</strong> te perfila. los <strong>atributos</strong> te describen; la <strong>actividad</strong> te perfila.
Los ecosistemas publicitarios y los data brokers suelen unirlo todo por correlación. Los ecosistemas publicitarios y los data brokers suelen unirlo todo por correlación.
</p> </p>
<p class=”section-desc” style=”margin-top:0.5rem;font-size:0.82rem;”>
Marco legal: <a href=”https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e1489-1-1” target=”_blank” rel=”noopener” style=”color:var(--caoba);”>RGPD Art. 4 — Definiciones de dato personal →</a>
· <a href=”https://www.ftc.gov/reports/data-brokers” target=”_blank” rel=”noopener” style=”color:var(--caoba);”>FTC Data Broker Report →</a>
</p>
<div class="grid"> <div class="grid">