3ebcc3e405
- Nuevo comunidad.html con sección de participación en el proyecto y 14 alternativas de software libre organizadas por categoría (navegadores, buscadores, correo, mensajería, almacenamiento, redes sociales, VPN/DNS) - Slider principal ampliado de 3 a 5 diapositivas: slides 4 (jardín japonés) y 5 (bosque aéreo) con layout split texto+botón; slide 2 reemplazada con foto Times Square aérea - CTAs ácido-verde en slides 1-3 enlazando a salud-digital#ciencia, egosurfing y salud-digital#derechos - Sección confirm-section sustituida por botón grande "Derechos" que despliega 8 botones verbales (Conocer/Corregir/Borrar/Limitar/Exportar/Oponerse/Decidir/Reclamar) con right-cards RGPD expandibles - Fondos fotográficos con overlay oscuro en las 4 study cards (estudio-brain, atención, sueño, datos) - 7 fotos nuevas descargadas en img/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1190 lines
55 KiB
HTML
1190 lines
55 KiB
HTML
<!doctype html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>RESETEA.NET · La información es poder, quitémosles poder</title>
|
||
<meta name="description"
|
||
content="Envía cartas GDPR y elimina tus datos de redes sociales, buscadores y data brokers. Sin guardar información. Enlace oficiales y textos RGPD.">
|
||
<link rel="stylesheet" href="index.css">
|
||
<style>
|
||
/* ── Study card slider ── */
|
||
.study-slider-outer { position: relative; overflow: hidden; margin-top: 2rem; }
|
||
.study-slides-track {
|
||
display: flex;
|
||
transition: transform 420ms cubic-bezier(.4,0,.2,1);
|
||
}
|
||
.study-slide {
|
||
min-width: 100%;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1rem;
|
||
padding: 0 0.25rem;
|
||
}
|
||
@media (max-width: 700px) {
|
||
.study-slide { grid-template-columns: 1fr; }
|
||
}
|
||
.study-nav {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 0.8rem;
|
||
margin-top: 1.4rem;
|
||
align-items: center;
|
||
}
|
||
.study-nav-btn {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
color: var(--muted);
|
||
width: 34px; height: 34px;
|
||
border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
transition: all 130ms ease;
|
||
}
|
||
.study-nav-btn:hover { background: var(--caoba-lt); border-color: var(--caoba); color: var(--caoba); }
|
||
.study-dots { display: flex; gap: 0.35rem; align-items: center; }
|
||
.study-dot {
|
||
width: 7px; height: 7px;
|
||
border-radius: 50%;
|
||
background: var(--border-dark);
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background 200ms ease, transform 200ms ease;
|
||
}
|
||
.study-dot.active { background: var(--caoba); transform: scale(1.4); }
|
||
|
||
/* ── Email-confirmation mini-section ── */
|
||
.confirm-section {
|
||
padding: 2.2rem 0;
|
||
background: var(--surface2);
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.confirm-inner {
|
||
max-width: 780px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
.confirm-inner .confirm-icon { font-size: 2rem; margin-bottom: 0.6rem; }
|
||
.confirm-inner h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
|
||
.confirm-inner p { font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
|
||
.confirm-steps {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 0;
|
||
margin-top: 1.6rem;
|
||
flex-wrap: wrap;
|
||
row-gap: 0.8rem;
|
||
}
|
||
.confirm-step {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 0.79rem;
|
||
color: var(--muted);
|
||
width: 130px;
|
||
text-align: center;
|
||
line-height: 1.35;
|
||
}
|
||
.cs-num {
|
||
width: 52px; height: 52px;
|
||
border-radius: 50%;
|
||
background: var(--caoba);
|
||
color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.35rem; font-weight: 800;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 3px 0 0 rgba(123,63,46,0.35);
|
||
}
|
||
.cs-arrow {
|
||
font-size: 1.3rem;
|
||
color: var(--border-dark);
|
||
padding: 0 0.2rem;
|
||
margin-bottom: 1.6rem;
|
||
flex-shrink: 0;
|
||
}
|
||
@media (max-width: 620px) {
|
||
.cs-arrow { display: none; }
|
||
.confirm-step { width: 110px; }
|
||
.cs-num { width: 44px; height: 44px; font-size: 1.1rem; }
|
||
}
|
||
|
||
/* ── Steps flow — cómo funciona ── */
|
||
.steps-flow {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
margin-top: 2rem;
|
||
max-width: 860px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.step-item-wrap { display: flex; flex-direction: column; }
|
||
.step-bubble {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
width: 100%;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-top: none;
|
||
cursor: pointer;
|
||
padding: 0.65rem 1.2rem 0.65rem 0.65rem;
|
||
text-align: left;
|
||
-webkit-tap-highlight-color: transparent;
|
||
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
|
||
transition: background 120ms ease;
|
||
}
|
||
.step-item-wrap:first-child .step-bubble {
|
||
border-top: 1px solid var(--border);
|
||
border-radius: 14px 14px 0 0;
|
||
}
|
||
.step-item-wrap:last-child .step-bubble:not(.active) { border-radius: 0 0 14px 14px; }
|
||
.step-bubble:hover { background: var(--surface2); }
|
||
.step-bubble.active {
|
||
background: var(--acid-lt);
|
||
border-color: var(--acid-dark);
|
||
border-top: 1px solid var(--acid-dark);
|
||
}
|
||
.sb-num {
|
||
width: 62px; height: 62px;
|
||
border-radius: 50%;
|
||
background: var(--acid);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.7rem; font-weight: 900;
|
||
color: #1a1714;
|
||
flex-shrink: 0;
|
||
transition: all 180ms ease;
|
||
box-shadow: 0 3px 0 0 var(--acid-dark);
|
||
}
|
||
.step-bubble.active .sb-num { background: #1a1714; color: var(--acid); box-shadow: 0 3px 0 0 #000; }
|
||
.sb-label {
|
||
flex: 1;
|
||
font-family: 'Recion', Georgia, serif;
|
||
font-size: 1.05rem;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
transition: color 150ms ease;
|
||
}
|
||
.step-bubble.active .sb-label { color: var(--acid-dark); }
|
||
.sb-chevron {
|
||
font-size: 1rem; color: var(--muted);
|
||
transition: transform 200ms ease; flex-shrink: 0;
|
||
}
|
||
.step-bubble.active .sb-chevron { transform: rotate(90deg); color: var(--acid-dark); }
|
||
.step-panel {
|
||
width: 100%;
|
||
background: var(--surface);
|
||
border: 1px solid var(--acid-dark);
|
||
border-top: none;
|
||
padding: 1.1rem 1.4rem;
|
||
animation: spFade 200ms ease;
|
||
}
|
||
.step-item-wrap:last-child .step-panel { border-radius: 0 0 14px 14px; }
|
||
@keyframes spFade {
|
||
from { opacity: 0; transform: translateY(-4px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.sp-title {
|
||
font-family: 'Recion', Georgia, serif;
|
||
font-size: 1.05rem; font-weight: 700;
|
||
color: var(--text); margin-bottom: 0.5rem;
|
||
}
|
||
.sp-body { font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
|
||
.sp-body p { margin-bottom: 0.5rem; }
|
||
.sp-body p:last-child { margin-bottom: 0; }
|
||
.sp-body strong { color: var(--text); }
|
||
.sp-note {
|
||
background: var(--acid-lt);
|
||
border: 1px solid var(--border);
|
||
border-left: 3px solid var(--acid-dark);
|
||
border-radius: 0 6px 6px 0;
|
||
padding: 0.45rem 0.9rem;
|
||
margin-top: 0.7rem;
|
||
font-size: 0.8rem; color: var(--muted);
|
||
}
|
||
.sub-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.8rem; }
|
||
@media (max-width: 600px) {
|
||
.sb-num { width: 52px; height: 52px; font-size: 1.4rem; }
|
||
.sb-label { font-size: 0.92rem; }
|
||
.sub-paths { grid-template-columns: 1fr; }
|
||
}
|
||
.sub-path {
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 1.1rem 1.2rem;
|
||
}
|
||
.sub-path-title {
|
||
font-size: 0.88rem;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.sub-path-desc {
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
margin-bottom: 0.7rem;
|
||
line-height: 1.4;
|
||
}
|
||
.sub-path-steps {
|
||
list-style: none;
|
||
padding: 0; margin: 0;
|
||
}
|
||
.sub-path-steps li {
|
||
font-size: 0.81rem;
|
||
color: var(--muted);
|
||
padding: 0.28rem 0 0.28rem 1.4rem;
|
||
position: relative;
|
||
border-top: 1px solid var(--border);
|
||
line-height: 1.4;
|
||
}
|
||
.sub-path-steps li:first-child { border-top: none; }
|
||
.sub-path-steps li::before {
|
||
content: attr(data-n);
|
||
position: absolute;
|
||
left: 0;
|
||
font-size: 0.68rem;
|
||
font-weight: 800;
|
||
color: #2d6a4f;
|
||
top: 0.3rem;
|
||
}
|
||
|
||
/* ── Dopamina banner standalone ── */
|
||
.dopamina-section {
|
||
padding: 2rem 0;
|
||
background: var(--bg);
|
||
}
|
||
|
||
/* ── Study card backgrounds ── */
|
||
.study-card--brain {
|
||
background: linear-gradient(rgba(26,23,20,0.62), rgba(26,23,20,0.62)), url('img/study-brain.jpg') center/cover;
|
||
}
|
||
.study-card--attention {
|
||
background: linear-gradient(rgba(26,23,20,0.62), rgba(26,23,20,0.62)), url('img/study-attention.jpg') center/cover;
|
||
}
|
||
.study-card--sleep {
|
||
background: linear-gradient(rgba(26,23,20,0.62), rgba(26,23,20,0.62)), url('img/study-sleep.jpg') center/cover;
|
||
}
|
||
.study-card--data {
|
||
background: linear-gradient(rgba(26,23,20,0.62), rgba(26,23,20,0.62)), url('img/study-data.jpg') center/cover;
|
||
}
|
||
|
||
/* ── Slide CTA buttons ── */
|
||
.slide-cta-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0.7rem 1.3rem;
|
||
border-radius: 12px;
|
||
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
|
||
font-size: 0.92rem;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
background: var(--acid);
|
||
color: #1a1714;
|
||
border: 1.5px solid #9dcc00;
|
||
box-shadow: 0 4px 0 0 #5a8800, 0 6px 18px rgba(200,255,0,0.20);
|
||
transition: transform 90ms ease, box-shadow 90ms ease;
|
||
white-space: nowrap;
|
||
}
|
||
.slide-cta-btn:hover {
|
||
color: #1a1714;
|
||
text-decoration: none;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 0 0 #4a7200, 0 10px 24px rgba(200,255,0,0.30);
|
||
}
|
||
.slide-cta-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 0 #5a8800; }
|
||
.slide-cta-btn--intext { margin-top: 1.2rem; }
|
||
|
||
/* ── Split layout for slides 4 & 5 ── */
|
||
.psi--split {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 2rem;
|
||
}
|
||
.psi--split .psi-text { flex: 1; }
|
||
.psi--split .psi-action { flex-shrink: 0; padding-bottom: 0.2rem; }
|
||
@media (max-width: 700px) {
|
||
.psi--split { flex-direction: column; gap: 1rem; }
|
||
}
|
||
|
||
/* ── Derechos section ── */
|
||
.derechos-section {
|
||
padding: 3rem 0;
|
||
background: var(--surface2);
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.derechos-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 2rem;
|
||
}
|
||
.btn-derechos-toggle {
|
||
font-family: 'Recion', Georgia, serif;
|
||
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
||
letter-spacing: 0.14em;
|
||
background: var(--acid);
|
||
color: #1a1714;
|
||
padding: 1rem 4.5rem;
|
||
border-radius: 14px;
|
||
border: 2px solid #9dcc00;
|
||
box-shadow: 0 6px 0 0 #5a8800, 0 10px 28px rgba(200,255,0,0.22);
|
||
cursor: pointer;
|
||
transition: transform 90ms ease, box-shadow 90ms ease;
|
||
}
|
||
.btn-derechos-toggle:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 9px 0 0 #4a7200, 0 16px 36px rgba(200,255,0,0.32);
|
||
}
|
||
.btn-derechos-toggle:active {
|
||
transform: translateY(4px);
|
||
box-shadow: 0 2px 0 0 #5a8800;
|
||
}
|
||
.derechos-content { width: 100%; }
|
||
.derechos-verbs-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 0.65rem;
|
||
max-width: 720px;
|
||
margin: 0 auto 1.8rem;
|
||
}
|
||
@media (max-width: 600px) {
|
||
.derechos-verbs-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.btn-derechos-toggle { padding: 0.9rem 2.5rem; }
|
||
}
|
||
.derecho-verb-btn {
|
||
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
|
||
font-size: 0.92rem;
|
||
font-weight: 700;
|
||
padding: 0.75rem 0.5rem;
|
||
border-radius: 10px;
|
||
background: var(--acid);
|
||
color: #1a1714;
|
||
border: 1.5px solid #9dcc00;
|
||
box-shadow: 0 3px 0 0 #5a8800;
|
||
cursor: pointer;
|
||
transition: transform 90ms ease, box-shadow 90ms ease, background 120ms ease;
|
||
}
|
||
.derecho-verb-btn:hover {
|
||
background: #d4ff1a;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 0 0 #4a7200;
|
||
}
|
||
.derecho-verb-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 0 #5a8800; }
|
||
.derecho-verb-btn.active {
|
||
background: #1a1714;
|
||
color: var(--acid);
|
||
border-color: var(--acid);
|
||
box-shadow: 0 3px 0 0 #000;
|
||
}
|
||
.drc-cards-wrap {
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.8rem;
|
||
}
|
||
.right-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
padding: 1.4rem;
|
||
animation: spFade 200ms ease;
|
||
}
|
||
.right-card .art {
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
color: var(--acid);
|
||
text-transform: uppercase;
|
||
margin-bottom: 0.4rem;
|
||
}
|
||
.right-card h3 { margin-bottom: 0.6rem; font-size: 1rem; color: var(--text); }
|
||
.right-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.55; }
|
||
.right-card .tag {
|
||
display: inline-block;
|
||
margin-top: 0.8rem;
|
||
padding: 0.2rem 0.55rem;
|
||
font-size: 0.72rem;
|
||
border-radius: 6px;
|
||
background: rgba(200,255,0,0.12);
|
||
color: var(--acid-dark);
|
||
border: 1px solid rgba(200,255,0,0.25);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="page-dark">
|
||
|
||
<main>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
HERO — TÍTULO + NAV
|
||
════════════════════════════════════════════ -->
|
||
<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="egosurfing.html">Egosurfing</a>
|
||
<a class="landing-nav-btn landing-nav-btn--highlight" href="plantillas.html">Resetea</a>
|
||
<a class="landing-nav-btn" href="comunidad.html">Comunidad</a>
|
||
<a class="landing-nav-btn" href="salud-digital.html">Salud digital</a>
|
||
</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>
|
||
<a class="slide-cta-btn slide-cta-btn--intext" href="salud-digital.html#ciencia">Ver la ciencia →</a>
|
||
</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>
|
||
<a class="slide-cta-btn slide-cta-btn--intext" href="egosurfing.html">Descubre tu huella →</a>
|
||
</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>
|
||
<a class="slide-cta-btn slide-cta-btn--intext" href="salud-digital.html#derechos">Tus 8 derechos →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="photo-slide photo-slide--4">
|
||
<div class="photo-slide-inner psi--split">
|
||
<div class="psi-text">
|
||
<span class="photo-slide-label">Libertad digital</span>
|
||
<h2 class="photo-slide-headline">Siéntete libre<br>al navegar.</h2>
|
||
<p class="photo-slide-sub">La privacidad no es un lujo. Con las herramientas correctas recuperas el control de tu vida digital.</p>
|
||
</div>
|
||
<div class="psi-action">
|
||
<a class="slide-cta-btn" href="salud-digital.html">Salud digital</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="photo-slide photo-slide--5">
|
||
<div class="photo-slide-inner psi--split">
|
||
<div class="psi-text">
|
||
<span class="photo-slide-label">Software libre</span>
|
||
<h2 class="photo-slide-headline">Conoce las<br>alternativas libres.</h2>
|
||
<p class="photo-slide-sub">Herramientas de código abierto que respetan tu privacidad. Sin rastreo, sin venta de datos.</p>
|
||
</div>
|
||
<div class="psi-action">
|
||
<a class="slide-cta-btn" href="comunidad.html#alternativas">Ver alternativas</a>
|
||
</div>
|
||
</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>
|
||
<button class="slider-dot" aria-label="Diapositiva 4" data-slide="3"></button>
|
||
<button class="slider-dot" aria-label="Diapositiva 5" data-slide="4"></button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
DOPAMINA BANNER
|
||
════════════════════════════════════════════ -->
|
||
<section class="dopamina-section">
|
||
<div class="container">
|
||
<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>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
ESTUDIOS — Lo que dice la ciencia (slider)
|
||
════════════════════════════════════════════ -->
|
||
<section class="studies-section" id="estudios">
|
||
<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="study-slider-outer">
|
||
<div class="study-slides-track" id="study-track">
|
||
|
||
<!-- Slide 1: dos primeras tarjetas -->
|
||
<div class="study-slide">
|
||
<div class="study-card study-card--brain">
|
||
|
||
<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-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>
|
||
|
||
<!-- Slide 2: dos últimas tarjetas -->
|
||
<div class="study-slide">
|
||
<div class="study-card study-card--sleep">
|
||
|
||
<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-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>
|
||
|
||
</div><!-- /study-slides-track -->
|
||
|
||
<div class="study-nav">
|
||
<button class="study-nav-btn" id="study-prev" aria-label="Anterior">‹</button>
|
||
<div class="study-dots">
|
||
<button class="study-dot active" data-slide="0" aria-label="Página 1"></button>
|
||
<button class="study-dot" data-slide="1" aria-label="Página 2"></button>
|
||
</div>
|
||
<button class="study-nav-btn" id="study-next" aria-label="Siguiente">›</button>
|
||
</div>
|
||
|
||
</div><!-- /study-slider-outer -->
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
DERECHOS RGPD — expandible
|
||
════════════════════════════════════════════ -->
|
||
<section class="derechos-section" id="derechos-index">
|
||
<div class="container">
|
||
<div class="derechos-wrap">
|
||
|
||
<button class="btn-derechos-toggle" id="btn-derechos" aria-expanded="false" aria-controls="derechos-content">
|
||
Derechos
|
||
</button>
|
||
|
||
<div class="derechos-content" id="derechos-content" hidden>
|
||
<div class="derechos-verbs-grid">
|
||
<button class="derecho-verb-btn" data-card="drc-0">Conocer</button>
|
||
<button class="derecho-verb-btn" data-card="drc-1">Corregir</button>
|
||
<button class="derecho-verb-btn" data-card="drc-2">Borrar</button>
|
||
<button class="derecho-verb-btn" data-card="drc-3">Limitar</button>
|
||
<button class="derecho-verb-btn" data-card="drc-4">Exportar</button>
|
||
<button class="derecho-verb-btn" data-card="drc-5">Oponerse</button>
|
||
<button class="derecho-verb-btn" data-card="drc-6">Decidir</button>
|
||
<button class="derecho-verb-btn" data-card="drc-7">Reclamar</button>
|
||
</div>
|
||
<div class="drc-cards-wrap">
|
||
<div class="right-card drc-card" id="drc-0" hidden>
|
||
<div class="art">Art. 15 RGPD</div>
|
||
<h3>Derecho de acceso — Conocer</h3>
|
||
<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>
|
||
<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 class="right-card drc-card" id="drc-1" hidden>
|
||
<div class="art">Art. 16 RGPD</div>
|
||
<h3>Derecho de rectificación — Corregir</h3>
|
||
<p>Si tus datos son inexactos o están incompletos, tienes derecho a que se corrijan sin demora. Incluye datos inferidos o desactualizados.</p>
|
||
<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 class="right-card drc-card" id="drc-2" hidden>
|
||
<div class="art">Art. 17 RGPD</div>
|
||
<h3>Derecho al olvido — Borrar</h3>
|
||
<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>
|
||
<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 class="right-card drc-card" id="drc-3" hidden>
|
||
<div class="art">Art. 18 RGPD</div>
|
||
<h3>Derecho a la limitación — Limitar</h3>
|
||
<p>Mientras se resuelve una disputa sobre tus datos puedes pedir que congelen su tratamiento: los conservan pero no los usan ni comparten.</p>
|
||
<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 class="right-card drc-card" id="drc-4" hidden>
|
||
<div class="art">Art. 20 RGPD</div>
|
||
<h3>Derecho a la portabilidad — Exportar</h3>
|
||
<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>
|
||
<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 class="right-card drc-card" id="drc-5" hidden>
|
||
<div class="art">Art. 21 RGPD</div>
|
||
<h3>Derecho de oposición — Oponerse</h3>
|
||
<p>Puedes oponerte a que procesen tus datos para marketing directo o perfilado publicitario. No necesitas justificación: es un derecho absoluto.</p>
|
||
<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 class="right-card drc-card" id="drc-6" hidden>
|
||
<div class="art">Art. 22 RGPD</div>
|
||
<h3>No a decisiones automatizadas — Decidir</h3>
|
||
<p>Derecho a no ser sometido a decisiones basadas solo en tratamiento automatizado (scoring, algoritmos) que produzcan efectos significativos sobre ti.</p>
|
||
<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 class="right-card drc-card" id="drc-7" hidden>
|
||
<div class="art">Art. 77 RGPD</div>
|
||
<h3>Derecho a reclamar — Reclamar</h3>
|
||
<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>
|
||
<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>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
CÓMO FUNCIONA — step flow
|
||
════════════════════════════════════════════ -->
|
||
<section id="como" class="info">
|
||
<div class="container">
|
||
<h2>Cómo funciona</h2>
|
||
<p style="color:var(--muted);font-size:0.9rem;">
|
||
Un proceso diseñado para mejorar tu bienestar digital y recuperar el control
|
||
de tu huella paso a paso. Pulsa cada número para descubrir el detalle.
|
||
</p>
|
||
|
||
<div class="steps-flow" id="steps-flow">
|
||
|
||
<div class="step-item-wrap">
|
||
<button class="step-bubble" data-idx="0" aria-expanded="false" aria-controls="sp-0">
|
||
<span class="sb-num">1</span>
|
||
<span class="sb-label">Evalúa tu huella digital</span>
|
||
<span class="sb-chevron" aria-hidden="true">›</span>
|
||
</button>
|
||
<div class="step-panel" id="sp-0" hidden>
|
||
<div class="sp-title">Evalúa tu huella digital</div>
|
||
<div class="sp-body">
|
||
<p>Antes de actuar, necesitas saber dónde estás. El <strong>egosurfing</strong> — buscar tu nombre, alias, email o teléfono en la web — revela qué información tuya está expuesta públicamente: en redes sociales, directorios, foros, data brokers y registros públicos.</p>
|
||
<p>Usa la herramienta de <a href="egosurfing.html" style="color:var(--caoba);font-weight:600;">Egosurfing de RESETEA</a> para hacer una primera auditoría. Descubrirás fuentes de exposición que probablemente desconocías.</p>
|
||
<div class="sp-note">Este paso no implica eliminar nada. Solo entender tu situación actual — la base para cualquier decisión que tomes después.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-item-wrap">
|
||
<button class="step-bubble" data-idx="1" aria-expanded="false" aria-controls="sp-1">
|
||
<span class="sb-num">2</span>
|
||
<span class="sb-label">Cuida tu bienestar digital</span>
|
||
<span class="sb-chevron" aria-hidden="true">›</span>
|
||
</button>
|
||
<div class="step-panel" id="sp-1" hidden>
|
||
<div class="sp-title">Cuida tu bienestar digital</div>
|
||
<div class="sp-body">
|
||
<p>La exposición de datos no es el único problema. El diseño adictivo de las plataformas impacta directamente en tu atención, tu sueño y tu salud mental. Recuperar el control empieza por <strong>decisiones conscientes</strong> sobre cómo interactúas con la tecnología.</p>
|
||
<p>Configura la privacidad de tus cuentas, desactiva notificaciones no esenciales, establece límites de tiempo y revisa qué permisos tienen las apps. La ciencia demuestra que pequeños cambios producen mejoras medibles en bienestar en pocas semanas.</p>
|
||
<div class="sp-note">Consulta la sección <a href="salud-digital.html" style="color:var(--caoba);font-weight:600;">Salud Digital</a> para evidencia científica sobre el impacto neurológico del uso intensivo y estrategias con respaldo experimental.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-item-wrap">
|
||
<button class="step-bubble" data-idx="2" aria-expanded="false" aria-controls="sp-2">
|
||
<span class="sb-num">3</span>
|
||
<span class="sb-label">Respalda tus datos</span>
|
||
<span class="sb-chevron" aria-hidden="true">›</span>
|
||
</button>
|
||
<div class="step-panel" id="sp-2" hidden>
|
||
<div class="sp-title">Respalda tus datos</div>
|
||
<div class="sp-body">
|
||
<p>Antes de tomar cualquier decisión sobre tus cuentas, <strong>descarga una copia de toda tu información</strong>. Es tu derecho legal (Art. 20 RGPD — portabilidad de datos) y tu red de seguridad: una vez que actúas, puede que no haya vuelta atrás.</p>
|
||
<p>La mayoría de plataformas tienen una opción "Descargar mis datos" en los ajustes de privacidad. El archivo puede tardar horas o días en generarse. Guárdalo en un lugar seguro antes de continuar al siguiente paso.</p>
|
||
<div class="sp-note"><strong>Tip:</strong> si quieres una copia más completa (incluyendo datos inferidos), usa la carta GDPR Art. 15 (derecho de acceso) + Art. 20 (portabilidad) antes de cualquier acción.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-item-wrap">
|
||
<button class="step-bubble" data-idx="3" aria-expanded="false" aria-controls="sp-3">
|
||
<span class="sb-num">4</span>
|
||
<span class="sb-label">Decide tu camino</span>
|
||
<span class="sb-chevron" aria-hidden="true">›</span>
|
||
</button>
|
||
<div class="step-panel" id="sp-3" hidden>
|
||
<div class="sp-title">Decide tu camino — dos opciones</div>
|
||
<div class="sp-body">
|
||
<p>Con tu copia de seguridad lista, puedes elegir entre dos caminos. <strong>No son lo mismo</strong> y cada uno tiene sus propios pasos:</p>
|
||
<div class="sub-paths">
|
||
<div class="sub-path">
|
||
<div class="sub-path-title">Resetear la cuenta</div>
|
||
<p class="sub-path-desc">Mantener la cuenta activa pero empezar de cero. Útil cuando no quieres perder el acceso pero sí reducir tu huella.</p>
|
||
<ol class="sub-path-steps">
|
||
<li data-n="1">Elimina manualmente contenido antiguo (posts, fotos, comentarios)</li>
|
||
<li data-n="2">Reconfigura privacidad: perfil privado, audiencia mínima, sin indexación por buscadores</li>
|
||
<li data-n="3">Desactiva perfilado publicitario y sincronización de contactos</li>
|
||
<li data-n="4">Envía carta GDPR (Art. 17) para supresión de datos históricos procesados sin base legal</li>
|
||
</ol>
|
||
</div>
|
||
<div class="sub-path">
|
||
<div class="sub-path-title">Solicitar supresión completa</div>
|
||
<p class="sub-path-desc">Borrado completo de cuenta y datos. La opción que mayor reducción de huella produce.</p>
|
||
<ol class="sub-path-steps">
|
||
<li data-n="1">Envía carta GDPR de supresión (Art. 17) via RESETEA — <em>antes</em> de cerrar la cuenta</li>
|
||
<li data-n="2">Usa el enlace oficial de cierre de la plataforma (RESETEA incluye accesos directos)</li>
|
||
<li data-n="3">Espera el período de gracia (7–30 días según plataforma) — aún puedes cancelar</li>
|
||
<li data-n="4">Confirma recepción y guarda el número de referencia GDPR como prueba</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-item-wrap">
|
||
<button class="step-bubble" data-idx="4" aria-expanded="false" aria-controls="sp-4">
|
||
<span class="sb-num">5</span>
|
||
<span class="sb-label">Confirma y haz seguimiento</span>
|
||
<span class="sb-chevron" aria-hidden="true">›</span>
|
||
</button>
|
||
<div class="step-panel" id="sp-4" hidden>
|
||
<div class="sp-title">Confirma y haz seguimiento</div>
|
||
<div class="sp-body">
|
||
<p>Por cada solicitud GDPR enviada recibirás un <strong>número de referencia</strong> — guárdalo. Es tu prueba legal de que la solicitud existe y de que el plazo legal ha empezado a correr.</p>
|
||
<p>Las plataformas tienen <strong>30 días naturales</strong> para responder y ejecutar la supresión (Art. 12 RGPD). En casos complejos pueden ampliarlo hasta 90 días, pero deben notificártelo dentro de los primeros 30. El silencio ya es una infracción.</p>
|
||
<div class="sp-note">Si no responden o deniegan sin justificación, presenta una reclamación gratuita ante la <strong>AEPD</strong> (sedeagpd.gob.es) adjuntando el número de referencia. La AEPD puede imponer multas de hasta 20 M€.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
FORMULARIO PRINCIPAL — EMAIL + REDES
|
||
════════════════════════════════════════════ -->
|
||
<section class="erase-form-section" id="panel">
|
||
<div class="container">
|
||
<div class="erase-form-wrap">
|
||
|
||
<div class="form-two-col">
|
||
|
||
<!-- ── Columna izquierda: email ── -->
|
||
<div class="form-col-email">
|
||
<div class="form-step-badge">1</div>
|
||
<h2 class="form-col-title">Tu correo electrónico</h2>
|
||
<p class="form-col-sub">Solo lo usamos para enviarte la carta GDPR. No lo guardamos ni lo compartimos.</p>
|
||
<input type="email" id="gdpr-email" class="email-input"
|
||
placeholder="tu@correo.com" autocomplete="email">
|
||
<ul class="form-privacy-list">
|
||
<li>Sin cookies ni tracking</li>
|
||
<li>No almacenamos tu correo</li>
|
||
<li>Carta enviada al DPO directamente</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- ── Columna derecha: redes ── -->
|
||
<div class="form-col-networks">
|
||
<div class="form-col-networks-header">
|
||
<div class="form-step-badge">2</div>
|
||
<h2 class="form-col-title">Elige las redes</h2>
|
||
<button class="btn-select-all" id="btn-select-all" type="button">Seleccionar todas</button>
|
||
</div>
|
||
|
||
<p class="networks-group-label">Envío automático de carta GDPR</p>
|
||
<div class="networks-grid" id="networks-grid">
|
||
<button class="net-chip" data-provider="instagram" data-type="api"><img class="chip-icon" src="https://cdn.simpleicons.org/instagram/1a1714" alt=""><span class="chip-label">Instagram</span></button>
|
||
<button class="net-chip" data-provider="facebook" data-type="api"><img class="chip-icon" src="https://cdn.simpleicons.org/facebook/1a1714" alt=""><span class="chip-label">Facebook</span></button>
|
||
<button class="net-chip" data-provider="twitter_x" data-type="api"><img class="chip-icon" src="https://cdn.simpleicons.org/x/1a1714" alt=""><span class="chip-label">X / Twitter</span></button>
|
||
<button class="net-chip" data-provider="linkedin" data-type="api"><img class="chip-icon" src="https://cdn.simpleicons.org/linkedin/1a1714" alt=""><span class="chip-label">LinkedIn</span></button>
|
||
<button class="net-chip" data-provider="tiktok" data-type="api"><img class="chip-icon" src="https://cdn.simpleicons.org/tiktok/1a1714" alt=""><span class="chip-label">TikTok</span></button>
|
||
<button class="net-chip" data-provider="snapchat" data-type="api"><img class="chip-icon" src="https://cdn.simpleicons.org/snapchat/1a1714" alt=""><span class="chip-label">Snapchat</span></button>
|
||
<button class="net-chip" data-provider="discord" data-type="api"><img class="chip-icon" src="https://cdn.simpleicons.org/discord/1a1714" alt=""><span class="chip-label">Discord</span></button>
|
||
<button class="net-chip" data-provider="reddit" data-type="api"><img class="chip-icon" src="https://cdn.simpleicons.org/reddit/1a1714" alt=""><span class="chip-label">Reddit</span></button>
|
||
<button class="net-chip" data-provider="microsoft" data-type="api"><img class="chip-icon" src="https://cdn.simpleicons.org/microsoft/1a1714" alt=""><span class="chip-label">Microsoft</span></button>
|
||
<button class="net-chip" data-provider="apple" data-type="api"><img class="chip-icon" src="https://cdn.simpleicons.org/apple/1a1714" alt=""><span class="chip-label">Apple</span></button>
|
||
<button class="net-chip" data-provider="google" data-type="form"
|
||
data-form-url="https://support.google.com/policies/contact/sar_data_protection"><img class="chip-icon" src="https://cdn.simpleicons.org/google/1a1714" alt=""><span class="chip-label">Google</span></button>
|
||
<button class="net-chip" data-provider="amazon" data-type="form"
|
||
data-form-url="https://www.amazon.es/hz/contact-us/privacy-disclosure/"><img class="chip-icon" src="https://cdn.simpleicons.org/amazon/1a1714" alt=""><span class="chip-label">Amazon</span></button>
|
||
</div>
|
||
|
||
<p class="networks-group-label networks-group-label--manual">Acceso directo — clic abre el enlace oficial</p>
|
||
<p class="networks-manual-note">Estas plataformas no permiten solicitud automática. Clic en el botón abre su página oficial directamente.</p>
|
||
<div class="networks-grid networks-grid--manual">
|
||
<button class="net-chip net-chip--manual" data-provider="whatsapp"
|
||
data-link="https://faq.whatsapp.com/1306557496340600"><img class="chip-icon" src="https://cdn.simpleicons.org/whatsapp/1a1714" alt=""><span class="chip-label">WhatsApp</span> <span class="chip-arrow">↗</span></button>
|
||
<button class="net-chip net-chip--manual" data-provider="telegram"
|
||
data-link="https://my.telegram.org/auth"><img class="chip-icon" src="https://cdn.simpleicons.org/telegram/1a1714" alt=""><span class="chip-label">Telegram</span> <span class="chip-arrow">↗</span></button>
|
||
<button class="net-chip net-chip--manual" data-provider="spotify"
|
||
data-link="https://support.spotify.com/es/article/close-account/"><img class="chip-icon" src="https://cdn.simpleicons.org/spotify/1a1714" alt=""><span class="chip-label">Spotify</span> <span class="chip-arrow">↗</span></button>
|
||
<button class="net-chip net-chip--manual" data-provider="youtube"
|
||
data-link="https://support.google.com/youtube/answer/55759"><img class="chip-icon" src="https://cdn.simpleicons.org/youtube/1a1714" alt=""><span class="chip-label">YouTube</span> <span class="chip-arrow">↗</span></button>
|
||
<button class="net-chip net-chip--manual" data-provider="netflix"
|
||
data-link="https://help.netflix.com/es/node/100624"><img class="chip-icon" src="https://cdn.simpleicons.org/netflix/1a1714" alt=""><span class="chip-label">Netflix</span> <span class="chip-arrow">↗</span></button>
|
||
<button class="net-chip net-chip--manual" data-provider="twitch"
|
||
data-link="https://www.twitch.tv/user/delete-account"><img class="chip-icon" src="https://cdn.simpleicons.org/twitch/1a1714" alt=""><span class="chip-label">Twitch</span> <span class="chip-arrow">↗</span></button>
|
||
<button class="net-chip net-chip--manual" data-provider="pinterest"
|
||
data-link="https://help.pinterest.com/es/article/deactivate-or-close-your-account"><img class="chip-icon" src="https://cdn.simpleicons.org/pinterest/1a1714" alt=""><span class="chip-label">Pinterest</span> <span class="chip-arrow">↗</span></button>
|
||
</div>
|
||
|
||
<div class="form-counter" id="form-counter">0 redes seleccionadas</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ── Fila de envío ── -->
|
||
<div class="form-send-row">
|
||
<button class="btn primary btn--send-main" id="gdpr-send" disabled>
|
||
Enviar solicitudes GDPR
|
||
</button>
|
||
<p class="form-note">
|
||
No guardamos tu correo. Las cartas se envían directamente a los DPOs de cada plataforma.<br>
|
||
Las redes de "acceso directo" abren su página oficial al instante, sin necesidad de enviar nada.
|
||
</p>
|
||
</div>
|
||
|
||
<div id="gdpr-results" class="results-wrap" hidden></div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
PLANTILLAS
|
||
════════════════════════════════════════════ -->
|
||
<section id="plantillas" class="info alt">
|
||
<div class="container">
|
||
<h2>Plantillas legales</h2>
|
||
<p>
|
||
Cartas pre-redactadas para el <strong>derecho de supresión (Art. 17)</strong>,
|
||
<strong>acceso (Art. 15)</strong>, <strong>portabilidad (Art. 20)</strong>
|
||
y <strong>oposición al perfilado (Art. 21)</strong>.
|
||
</p>
|
||
<p style="margin-top:1rem;">
|
||
El generador funciona íntegramente en tu navegador: tus datos nunca salen de tu dispositivo.
|
||
</p>
|
||
<div class="hero-actions" style="margin-top:1.5rem;">
|
||
<a class="btn primary" href="plantillas.html">Abrir generador de cartas</a>
|
||
<a class="btn ghost" href="salud-digital.html">Entender mis derechos</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
LEGAL
|
||
════════════════════════════════════════════ -->
|
||
<section id="legal" class="info">
|
||
<div class="container">
|
||
<h2>Aviso legal</h2>
|
||
<p>
|
||
Esta herramienta no ofrece asesoramiento legal. Los enlaces y plantillas son orientativos.
|
||
El éxito de las solicitudes depende de cada plataforma y de la legislación aplicable.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
CITAS — sección al pie
|
||
════════════════════════════════════════════ -->
|
||
<section class="quotes-footer-section">
|
||
<div class="container">
|
||
<p class="quotes-footer-label">Voces que importan</p>
|
||
<div class="quotes-footer-carousel" id="quote-carousel">
|
||
<blockquote class="hero-quote active">
|
||
<span class="q-mark">"</span>Matamos gente basándonos en metadatos.<span class="q-mark">"</span>
|
||
<cite>— Gen. Michael Hayden, ex-director de la NSA</cite>
|
||
</blockquote>
|
||
<blockquote class="hero-quote">
|
||
<span class="q-mark">"</span>Decir que la privacidad no te importa porque no tienes nada que ocultar es como decir que la libertad de expresión no importa porque no tienes nada que decir.<span class="q-mark">"</span>
|
||
<cite>— Edward Snowden</cite>
|
||
</blockquote>
|
||
<blockquote class="hero-quote">
|
||
<span class="q-mark">"</span>El que controla los datos del presente controla el pasado. El que controla el pasado controla el futuro.<span class="q-mark">"</span>
|
||
<cite>— Inspirado en George Orwell, <em>1984</em></cite>
|
||
</blockquote>
|
||
<blockquote class="hero-quote">
|
||
<span class="q-mark">"</span>No somos los clientes de estas empresas. Somos el producto.<span class="q-mark">"</span>
|
||
<cite>— Richard Serra & Carlota Fay Schoolman, 1973</cite>
|
||
</blockquote>
|
||
<blockquote class="hero-quote">
|
||
<span class="q-mark">"</span>La vigilancia es el modelo de negocio de internet.<span class="q-mark">"</span>
|
||
<cite>— Bruce Schneier, criptógrafo y especialista en seguridad</cite>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<p>RESETEA.NET · Software estático · Sin tracking · Sin cookies · Sin almacenamiento de datos</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
'use strict';
|
||
|
||
/* ── Photo slider ────────────────────────────── */
|
||
(function () {
|
||
const slider = document.getElementById('photo-slider');
|
||
if (!slider) return;
|
||
const slides = slider.querySelectorAll('.photo-slide');
|
||
const dots = slider.querySelectorAll('.slider-dot');
|
||
let current = 0;
|
||
let timer;
|
||
|
||
function goTo(n) {
|
||
slides[current].classList.remove('active');
|
||
dots[current].classList.remove('active');
|
||
current = (n + slides.length) % slides.length;
|
||
slides[current].classList.add('active');
|
||
dots[current].classList.add('active');
|
||
}
|
||
|
||
function start() { timer = setInterval(function() { goTo(current + 1); }, 5500); }
|
||
function stop() { clearInterval(timer); }
|
||
|
||
dots.forEach(function(dot) {
|
||
dot.addEventListener('click', function() {
|
||
stop(); goTo(+this.dataset.slide); start();
|
||
});
|
||
});
|
||
|
||
start();
|
||
})();
|
||
|
||
/* ── Study card slider ───────────────────────── */
|
||
(function () {
|
||
const track = document.getElementById('study-track');
|
||
if (!track) return;
|
||
const slides = track.querySelectorAll('.study-slide');
|
||
const dots = document.querySelectorAll('.study-dot');
|
||
const prevBtn = document.getElementById('study-prev');
|
||
const nextBtn = document.getElementById('study-next');
|
||
let current = 0;
|
||
let timer;
|
||
|
||
function goTo(n) {
|
||
current = (n + slides.length) % slides.length;
|
||
track.style.transform = `translateX(-${current * 100}%)`;
|
||
dots.forEach((d, i) => d.classList.toggle('active', i === current));
|
||
}
|
||
|
||
function start() { timer = setInterval(function() { goTo(current + 1); }, 7000); }
|
||
function stop() { clearInterval(timer); }
|
||
|
||
prevBtn.addEventListener('click', function() { stop(); goTo(current - 1); start(); });
|
||
nextBtn.addEventListener('click', function() { stop(); goTo(current + 1); start(); });
|
||
dots.forEach(function(dot) {
|
||
dot.addEventListener('click', function() { stop(); goTo(+this.dataset.slide); start(); });
|
||
});
|
||
|
||
start();
|
||
})();
|
||
|
||
/* ── Steps flow ──────────────────────────────── */
|
||
(function () {
|
||
const flow = document.getElementById('steps-flow');
|
||
if (!flow) return;
|
||
flow.querySelectorAll('.step-bubble').forEach(function(btn) {
|
||
btn.addEventListener('click', function() {
|
||
const panel = document.getElementById('sp-' + this.dataset.idx);
|
||
if (!panel) return;
|
||
const isOpen = !panel.hidden;
|
||
panel.hidden = isOpen;
|
||
this.classList.toggle('active', !isOpen);
|
||
this.setAttribute('aria-expanded', String(!isOpen));
|
||
});
|
||
});
|
||
})();
|
||
|
||
/* ── Chips de redes ─────────────────────────── */
|
||
const chips = document.querySelectorAll('.net-chip:not(.net-chip--manual)');
|
||
const manualChips = document.querySelectorAll('.net-chip--manual');
|
||
const sendBtn = document.getElementById('gdpr-send');
|
||
const emailIn = document.getElementById('gdpr-email');
|
||
const results = document.getElementById('gdpr-results');
|
||
const counter = document.getElementById('form-counter');
|
||
const selectAllBtn = document.getElementById('btn-select-all');
|
||
|
||
chips.forEach(chip => {
|
||
chip.addEventListener('click', () => {
|
||
chip.classList.toggle('selected');
|
||
syncBtn();
|
||
});
|
||
});
|
||
|
||
manualChips.forEach(chip => {
|
||
chip.addEventListener('click', () => {
|
||
window.open(chip.dataset.link, '_blank', 'noopener noreferrer');
|
||
chip.classList.add('chip--opened');
|
||
setTimeout(() => chip.classList.remove('chip--opened'), 1200);
|
||
});
|
||
});
|
||
|
||
emailIn.addEventListener('input', syncBtn);
|
||
|
||
selectAllBtn.addEventListener('click', () => {
|
||
const allSelected = [...chips].every(c => c.classList.contains('selected'));
|
||
chips.forEach(c => c.classList.toggle('selected', !allSelected));
|
||
selectAllBtn.textContent = allSelected ? 'Seleccionar todas' : 'Deseleccionar todas';
|
||
syncBtn();
|
||
});
|
||
|
||
function validEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); }
|
||
|
||
function syncBtn() {
|
||
const selected = [...chips].filter(c => c.classList.contains('selected'));
|
||
const count = selected.length;
|
||
counter.textContent = count === 0 ? '0 redes seleccionadas'
|
||
: count === 1 ? '1 red seleccionada'
|
||
: count + ' redes seleccionadas';
|
||
const allSel = count === chips.length;
|
||
selectAllBtn.textContent = allSel ? 'Deseleccionar todas' : 'Seleccionar todas';
|
||
const ok = validEmail(emailIn.value) && count > 0;
|
||
sendBtn.disabled = !ok;
|
||
sendBtn.textContent = ok
|
||
? `Enviar cartas GDPR (${count})`
|
||
: 'Enviar cartas GDPR';
|
||
}
|
||
|
||
/* ── Envío ──────────────────────────────────── */
|
||
sendBtn.addEventListener('click', async () => {
|
||
const email = emailIn.value.trim();
|
||
const selected = [...chips].filter(c => c.classList.contains('selected'));
|
||
|
||
sendBtn.disabled = true;
|
||
sendBtn.textContent = 'Enviando…';
|
||
results.hidden = false;
|
||
results.innerHTML = '';
|
||
|
||
for (const chip of selected) {
|
||
const provider = chip.dataset.provider;
|
||
const type = chip.dataset.type;
|
||
const name = chip.querySelector('.chip-label')?.textContent.trim() || chip.textContent.trim();
|
||
|
||
if (type === 'form') {
|
||
window.open(chip.dataset.formUrl, '_blank', 'noopener noreferrer');
|
||
addResult(name, 'form', 'Formulario oficial abierto — rellénalo para completar la solicitud.');
|
||
continue;
|
||
}
|
||
|
||
try {
|
||
const res = await fetch('/api/erase', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ provider, email })
|
||
});
|
||
const data = await res.json();
|
||
|
||
if (data.status === 'ok') {
|
||
addResult(name, 'ok', `Carta GDPR enviada correctamente. Ref: <code>${data.reference}</code>`);
|
||
} else if (data.status === 'use_form') {
|
||
window.open(data.formUrl, '_blank', 'noopener noreferrer');
|
||
addResult(name, 'form', 'Este proveedor requiere formulario oficial (abierto en nueva pestaña).');
|
||
} else {
|
||
addResult(name, 'error', data.error || 'Error desconocido.');
|
||
}
|
||
} catch {
|
||
addResult(name, 'error', 'Error de red. Inténtalo de nuevo o usa el formulario oficial.');
|
||
}
|
||
}
|
||
|
||
sendBtn.textContent = 'Solicitudes enviadas ✓';
|
||
setTimeout(() => { syncBtn(); }, 4000);
|
||
});
|
||
|
||
function addResult(name, type, msg) {
|
||
const div = document.createElement('div');
|
||
div.className = `result-item result-${type}`;
|
||
div.innerHTML = `<strong>${name}</strong> — ${msg}`;
|
||
results.appendChild(div);
|
||
}
|
||
|
||
/* ── Derechos RGPD toggle ───────────────────── */
|
||
(function () {
|
||
var btnMain = document.getElementById('btn-derechos');
|
||
var content = document.getElementById('derechos-content');
|
||
if (!btnMain || !content) return;
|
||
|
||
btnMain.addEventListener('click', function () {
|
||
var isOpen = !content.hidden;
|
||
content.hidden = isOpen;
|
||
this.setAttribute('aria-expanded', String(!isOpen));
|
||
});
|
||
|
||
content.querySelectorAll('.derecho-verb-btn').forEach(function (btn) {
|
||
btn.addEventListener('click', function () {
|
||
var card = document.getElementById(this.dataset.card);
|
||
if (!card) return;
|
||
var isOpen = !card.hidden;
|
||
card.hidden = isOpen;
|
||
this.classList.toggle('active', !isOpen);
|
||
});
|
||
});
|
||
})();
|
||
|
||
/* ── Carrusel de citas — rota cada 6 s ── */
|
||
(function () {
|
||
const quotes = document.querySelectorAll('.hero-quote');
|
||
if (!quotes.length) return;
|
||
let current = 0;
|
||
setInterval(() => {
|
||
quotes[current].classList.remove('active');
|
||
current = (current + 1) % quotes.length;
|
||
quotes[current].classList.add('active');
|
||
}, 6000);
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|