diff --git a/infra/nginx-resetea.conf b/infra/nginx-resetea.conf index 41812e9..0e6919e 100644 --- a/infra/nginx-resetea.conf +++ b/infra/nginx-resetea.conf @@ -31,7 +31,7 @@ server { add_header X-Content-Type-Options "nosniff" 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 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; # ── Proxy al backend Node.js ────────────────────────────────────── diff --git a/public/concienciacion.html b/public/concienciacion.html index b8b055e..839a6af 100644 --- a/public/concienciacion.html +++ b/public/concienciacion.html @@ -15,7 +15,7 @@ margin-top: 1.5rem; } .right-card { - background: var(--panel); + background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem; @@ -24,7 +24,7 @@ font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; - color: var(--accent); + color: var(--caoba); text-transform: uppercase; margin-bottom: 0.4rem; } @@ -37,7 +37,7 @@ font-size: 0.72rem; border-radius: 6px; background: rgba(255,61,0,0.12); - color: var(--accent); + color: var(--caoba); border: 1px solid rgba(255,61,0,0.25); } .timeline { @@ -52,12 +52,12 @@ left: -1.9rem; top: 0.3rem; width: 10px; height: 10px; border-radius: 50%; - background: var(--accent); + background: var(--caoba); } .timeline-item h4 { font-size: 0.95rem; margin-bottom: 0.3rem; } .timeline-item p { font-size: 0.85rem; color: var(--muted); } .myth-block { - background: var(--panel); + background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem 1.4rem; @@ -69,7 +69,7 @@ margin-bottom: 0.3rem; } .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); } .platform-table { width: 100%; border-collapse: collapse; @@ -90,32 +90,36 @@ display: inline-block; padding: 0.15rem 0.45rem; 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-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; } } + .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; } -
-
-
- -
-
RESETEA.NET
-
Privacidad sin custodios
-
+
+ -
+
@@ -170,6 +174,7 @@

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.

Descarga tu historial + Ver Art. 15 RGPD →
@@ -178,6 +183,7 @@

Si tus datos son inexactos o están incompletos, tienes derecho a que se corrijan sin demora. Incluye datos inferidos o desactualizados.

Corrige errores + Ver Art. 16 RGPD →
@@ -186,6 +192,7 @@

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.

El más usado + Ver Art. 17 RGPD →
@@ -194,6 +201,7 @@

Mientras se resuelve una disputa sobre tus datos puedes pedir que congelen su tratamiento: los conservan pero no los usan ni comparten.

Pausa temporal + Ver Art. 18 RGPD →
@@ -202,6 +210,7 @@

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.

Descarga antes de irte + Ver Art. 20 RGPD →
@@ -210,6 +219,7 @@

Puedes oponerte a que procesen tus datos para marketing directo o perfilado publicitario. En ese caso no necesitas justificación: es un derecho absoluto.

Anti-publicidad + Ver Art. 21 RGPD →
@@ -218,6 +228,7 @@

Derecho a no ser sometido a decisiones basadas solo en tratamiento automatizado (scoring, algoritmos) que produzcan efectos significativos sobre ti.

Anti-algoritmo + Ver Art. 22 RGPD →
@@ -226,6 +237,7 @@

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.

Escala a la AEPD + Ver AEPD →
diff --git a/public/egosurfing.html b/public/egosurfing.html index 869d55e..d91ad96 100644 --- a/public/egosurfing.html +++ b/public/egosurfing.html @@ -363,24 +363,19 @@ -
-
-
- -
-
RESETEA.NET
-
Privacidad sin custodios
-
+
+ -
+
diff --git a/public/img/crowd-phones.jpg b/public/img/crowd-phones.jpg new file mode 100644 index 0000000..84d0b14 Binary files /dev/null and b/public/img/crowd-phones.jpg differ diff --git a/public/img/legal-action.jpg b/public/img/legal-action.jpg new file mode 100644 index 0000000..836d087 Binary files /dev/null and b/public/img/legal-action.jpg differ diff --git a/public/img/phone-glow.jpg b/public/img/phone-glow.jpg new file mode 100644 index 0000000..782497a Binary files /dev/null and b/public/img/phone-glow.jpg differ diff --git a/public/img/phone-night.jpg b/public/img/phone-night.jpg new file mode 100644 index 0000000..877c532 Binary files /dev/null and b/public/img/phone-night.jpg differ diff --git a/public/img/studies-banner.jpg b/public/img/studies-banner.jpg new file mode 100644 index 0000000..cdf8d4c Binary files /dev/null and b/public/img/studies-banner.jpg differ diff --git a/public/img/surveillance.jpg b/public/img/surveillance.jpg new file mode 100644 index 0000000..6baf61f Binary files /dev/null and b/public/img/surveillance.jpg differ diff --git a/public/index.css b/public/index.css index f461fcd..fb708b5 100644 --- a/public/index.css +++ b/public/index.css @@ -3,6 +3,8 @@ Paleta: blanco / negro / gris / caoba / verde salvia ═══════════════════════════════════════════ */ +@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap'); + @font-face { font-family: 'Recion'; src: url('fonts/RECION.otf') format('opentype'), @@ -70,7 +72,7 @@ html { scroll-behavior: smooth; } body { - font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1.05rem; font-weight: 400; background: var(--bg); @@ -100,8 +102,8 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; } .container { width: 100%; - max-width: 1200px; - padding: 0 1.5rem; + max-width: 1440px; + padding: 0 clamp(1rem, 4vw, 4rem); margin: 0 auto; } @@ -380,7 +382,9 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; } ═══════════════════════════════════════════ */ .panel { padding: 3.5rem 0 4rem; - background: var(--bg); + background: linear-gradient(150deg, #f2ead8 0%, #e5efe8 45%, #ede4d5 78%, #e8f0e6 100%); + background-size: 300% 300%; + animation: heroGradientShift 24s ease infinite 4s; border-top: 1px solid var(--border); } @@ -695,11 +699,15 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; } .info { padding: 3.5rem 0; border-top: 1px solid var(--border); - background: var(--bg); + background: linear-gradient(150deg, #f2ead8 0%, #e5efe8 45%, #ede4d5 78%, #e8f0e6 100%); + background-size: 300% 300%; + animation: heroGradientShift 26s ease infinite 6s; } .info.alt { - background: var(--surface2); + background: linear-gradient(150deg, #f2ead8 0%, #e5efe8 45%, #ede4d5 78%, #e8f0e6 100%); + background-size: 300% 300%; + animation: heroGradientShift 26s ease infinite 6s; } .info h2 { margin-bottom: 1rem; } @@ -750,17 +758,19 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ -@media (max-width: 1000px) { +@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, 1fr); } + .intro-inner { gap: 2.5rem; } } @media (max-width: 720px) { .hero-inner { grid-template-columns: 1fr; } .grid { grid-template-columns: 1fr; } - .main-title { font-size: 2.4rem; } - .main-tagline { font-size: 1rem; } + .main-title { font-size: clamp(2.2rem, 11vw, 3.2rem); margin-bottom: 0.85rem; } .email-input { font-size: 1rem; } .btn--lg { width: 100%; justify-content: center; } + .landing-nav { gap: 0.45rem; } + .landing-nav-btn { padding: 0.55rem 1rem; font-size: 0.95rem; } .topbar-inner { flex-direction: column; @@ -778,12 +788,21 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; } } /* ═══════════════════════════════════════════ - HERO LANDING — título + lema + nav buttons + HERO LANDING — título + nav buttons (compacto) ═══════════════════════════════════════════ */ .hero-landing { - padding: 1.8rem 0 2.2rem; - background: var(--bg); + padding: 2rem 0 2.2rem; + background: linear-gradient(135deg, #4a8a00 0%, #c8ff00 35%, #7b3f2e 65%, #a0522d 100%); + background-size: 300% 300%; + animation: heroGradientShift 9s ease infinite; text-align: center; + border-bottom: 1px solid rgba(255,255,255,0.10); +} + +@keyframes heroGradientShift { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } } .hero-landing-inner { @@ -795,73 +814,91 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; } .main-title { font-family: 'Recion', 'Georgia', serif; - font-size: clamp(3.2rem, 9vw, 6.5rem); - color: var(--text); + font-size: clamp(2.8rem, 8vw, 5.5rem); + color: #f8f7f4; letter-spacing: 0.04em; line-height: 1; - margin-bottom: 0.5rem; -} - -.main-tagline { - font-family: 'Recion', 'Georgia', serif; - font-size: clamp(1.05rem, 2.6vw, 1.6rem); - color: var(--acid); - letter-spacing: 0.05em; - font-weight: normal; - margin-bottom: 1.4rem; - text-shadow: 0 0 20px rgba(200,255,0,0.25); - line-height: 1.4; -} - -/* ── Carrusel de citas ── */ -.quotes-strip { - width: 100%; - max-width: 680px; - margin: 0 auto 2rem; - min-height: 4.5rem; - display: flex; - align-items: center; - justify-content: center; -} - -.quote-carousel { - position: relative; - width: 100%; - text-align: center; + margin-bottom: 1rem; + text-shadow: 0 2px 20px rgba(0,0,0,0.30); } +/* ── Carrusel de citas — ahora en sección footer ── */ .hero-quote { display: none; flex-direction: column; - gap: 0.35rem; - font-size: clamp(0.78rem, 1.6vw, 0.92rem); - color: var(--muted); + gap: 0.4rem; + font-size: clamp(0.88rem, 1.8vw, 1.05rem); + color: rgba(248,247,244,0.72); font-style: italic; - line-height: 1.55; - padding: 0 0.5rem; + line-height: 1.6; + padding: 0 1rem; animation: quoteIn 600ms ease; + text-align: center; + max-width: 72ch; + margin: 0 auto; } .hero-quote.active { display: flex; } @keyframes quoteIn { - from { opacity: 0; transform: translateY(6px); } + from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .q-mark { font-family: 'Recion', Georgia, serif; - font-size: 1.1em; - color: var(--sage); + font-size: 1.2em; + color: var(--acid); font-style: normal; line-height: 1; } .hero-quote cite { - font-size: 0.75rem; + font-size: 0.78rem; font-style: normal; font-weight: 600; - color: var(--subtle); - letter-spacing: 0.03em; + color: rgba(248,247,244,0.38); + letter-spacing: 0.04em; +} + +/* ── Sección de citas al pie ── */ +.quotes-footer-section { + padding: 3.5rem 0; + background: linear-gradient(180deg, #1a1714 0%, #22190f 100%); + border-top: 1px solid rgba(255,255,255,0.06); + text-align: center; + position: relative; + overflow: hidden; +} +.quotes-footer-section::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(123,63,46,0.12) 0%, transparent 65%); + pointer-events: none; +} +.quotes-footer-section .container { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; +} + +.quotes-footer-label { + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + color: rgba(248,247,244,0.28); +} + +.quotes-footer-carousel { + width: 100%; + min-height: 5rem; + display: flex; + align-items: center; + justify-content: center; } .landing-nav { @@ -875,16 +912,16 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; } display: inline-flex; align-items: center; justify-content: center; - padding: 0.8rem 1.8rem; + padding: 0.65rem 1.5rem; border-radius: 12px; - font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; + font-family: 'Recion', 'Georgia', serif; font-size: 1.05rem; - font-weight: 500; - letter-spacing: 0.02em; - color: var(--text); - background: var(--surface); - border: 1.5px solid var(--border); - box-shadow: 0 4px 0 0 var(--border-dark), 0 6px 14px rgba(26,23,20,0.08); + font-weight: normal; + letter-spacing: 0.05em; + color: #f8f7f4; + background: rgba(255,255,255,0.12); + border: 1.5px solid rgba(255,255,255,0.22); + box-shadow: 0 4px 0 0 rgba(0,0,0,0.20), 0 6px 14px rgba(0,0,0,0.14); text-decoration: none; transition: transform 140ms cubic-bezier(.2,.8,.4,1), @@ -893,15 +930,16 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; } border-color 140ms ease, color 140ms ease; user-select: none; + backdrop-filter: blur(4px); } .landing-nav-btn:hover { - background: #ede0cf; - border-color: #c4a07a; - box-shadow: 0 6px 0 0 #b8906a, 0 10px 24px rgba(139,94,60,0.18); + background: rgba(255,255,255,0.22); + border-color: rgba(255,255,255,0.40); + box-shadow: 0 6px 0 0 rgba(0,0,0,0.25), 0 10px 24px rgba(0,0,0,0.18); transform: translateY(-3px); text-decoration: none; - color: var(--caoba); + color: #f8f7f4; } .landing-nav-btn:active { @@ -929,7 +967,9 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; } ═══════════════════════════════════════════ */ .erase-form-section { padding: 3rem 0 4rem; - background: var(--surface2); + background: linear-gradient(150deg, #f2ead8 0%, #e5efe8 45%, #ede4d5 78%, #e8f0e6 100%); + background-size: 300% 300%; + animation: heroGradientShift 22s ease infinite 2s; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } @@ -1272,3 +1312,1123 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; } .text-caoba { color: var(--caoba); } .text-sage { color: var(--sage); } .text-muted { color: var(--muted); } + +/* ═══════════════════════════════════════════ + SECCIÓN INTRO — salud digital / por qué resetear +═══════════════════════════════════════════ */ +.intro-section { + padding: 4rem 0 4.5rem; + background: linear-gradient(150deg, #f2ead8 0%, #e5efe8 45%, #ede4d5 78%, #e8f0e6 100%); + background-size: 300% 300%; + animation: heroGradientShift 20s ease infinite; + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); + position: relative; + overflow: hidden; +} + +.intro-section::before { + content: ''; + position: absolute; + inset: 0; + background: + radial-gradient(ellipse 55% 50% at 8% 50%, rgba(123,63,46,0.07) 0%, transparent 60%), + radial-gradient(ellipse 45% 55% at 92% 30%, rgba(26,122,74,0.06) 0%, transparent 60%); + pointer-events: none; +} + +.intro-inner { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: start; +} + +.intro-left .intro-label { + display: inline-flex; + align-items: center; + gap: 0.45rem; + padding: 0.3rem 0.9rem; + border-radius: 20px; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + background: var(--sage-lt); + color: var(--sage); + border: 1px solid #a8d4bc; + margin-bottom: 1.2rem; +} + +.intro-left .intro-label::before { + content: '●'; + font-size: 0.5rem; + animation: pulse-dot 2s infinite; +} + +@keyframes pulse-dot { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} + +.intro-title { + font-family: 'Recion', 'Georgia', serif; + font-size: clamp(1.8rem, 3.5vw, 2.8rem); + color: var(--text); + line-height: 1.15; + letter-spacing: 0.02em; + margin-bottom: 1.1rem; +} + +.intro-title em { + font-style: normal; + color: var(--caoba); +} + +.intro-desc { + font-size: 1.02rem; + color: var(--muted); + line-height: 1.7; + max-width: 52ch; + margin-bottom: 2rem; +} + +.intro-bullets { + list-style: none; + padding: 0; + margin: 0 0 2.2rem; + display: flex; + flex-direction: column; + gap: 0.85rem; +} + +.intro-bullets li { + display: flex; + align-items: flex-start; + gap: 0.8rem; + font-size: 0.96rem; + color: var(--text); + line-height: 1.5; +} + +.intro-bullets li .bullet-icon { + flex-shrink: 0; + width: 28px; + height: 28px; + border-radius: 8px; + display: grid; + place-items: center; + font-size: 0.9rem; + margin-top: 0.05rem; +} + +.bullet-icon--caoba { background: var(--caoba-lt); border: 1px solid #e0c4b8; } +.bullet-icon--sage { background: var(--sage-lt); border: 1px solid #a8d4bc; } +.bullet-icon--acid { background: var(--lime-lt); border: 1px solid #c8dd80; } +.bullet-icon--blue { background: #e8ecff; border: 1px solid #b8c4f8; } + +.intro-bullets li strong { + color: var(--text); + font-weight: 600; +} + +.intro-ctas { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; +} + +.intro-btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.85rem 1.6rem; + border-radius: 12px; + font-family: 'Plus Jakarta Sans', system-ui, sans-serif; + font-size: 0.95rem; + font-weight: 600; + letter-spacing: 0.01em; + text-decoration: none; + transition: + transform 140ms cubic-bezier(.2,.8,.4,1), + box-shadow 140ms ease, + background 140ms ease, + border-color 140ms ease; + user-select: none; + cursor: pointer; +} + +.intro-btn--primary { + background: var(--acid); + color: #1a1714; + border: 1.5px solid #9dcc00; + box-shadow: 0 4px 0 0 #6a9800, 0 6px 20px rgba(200,255,0,0.25); +} +.intro-btn--primary:hover { + background: #d4ff1a; + transform: translateY(-3px); + box-shadow: 0 7px 0 0 #5a8800, 0 12px 28px rgba(200,255,0,0.35); + text-decoration: none; + color: #1a1714; +} +.intro-btn--primary:active { transform: translateY(1px); box-shadow: 0 1px 0 0 #6a9800; } + +.intro-btn--ghost { + background: var(--surface); + color: var(--text); + border: 1.5px solid var(--border); + box-shadow: var(--btn-shadow); +} +.intro-btn--ghost:hover { + background: var(--surface2); + border-color: var(--border-dark); + transform: translateY(-3px); + box-shadow: var(--btn-shadow-hover); + text-decoration: none; + color: var(--text); +} +.intro-btn--ghost:active { transform: translateY(1px); box-shadow: var(--btn-shadow-active); } + +.intro-btn--caoba { + background: var(--caoba); + color: #fff; + border: 1.5px solid #5c2d1e; + box-shadow: 0 4px 0 0 #4a1e10, 0 6px 18px rgba(123,63,46,0.30); +} +.intro-btn--caoba:hover { + background: var(--caoba-mid); + transform: translateY(-3px); + box-shadow: 0 7px 0 0 #3a150a, 0 12px 26px rgba(123,63,46,0.38); + text-decoration: none; + color: #fff; +} +.intro-btn--caoba:active { transform: translateY(1px); box-shadow: 0 1px 0 0 #4a1e10; } + +/* Cards del lado derecho del intro */ +.intro-right { + display: flex; + flex-direction: column; + gap: 1rem; + padding-top: 0.5rem; +} + +.intro-stat-card { + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: 16px; + padding: 1.4rem 1.6rem; + box-shadow: 0 2px 0 0 var(--border-dark), var(--shadow-sm); + transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease; +} +.intro-stat-card:hover { + background: #faf8f4; + border-color: var(--caoba); + box-shadow: 0 3px 0 0 var(--caoba), var(--shadow-md); +} + +.intro-stat-card .stat-row { + display: flex; + align-items: flex-start; + gap: 1rem; +} + +.intro-stat-card .stat-icon { + font-size: 1.6rem; + line-height: 1; + flex-shrink: 0; + margin-top: 0.1rem; +} + +.intro-stat-card .stat-val { + font-family: 'Recion', 'Georgia', serif; + font-size: 2rem; + color: var(--caoba); + line-height: 1; + letter-spacing: 0.02em; +} + +.intro-stat-card .stat-desc { + font-size: 0.88rem; + color: var(--muted); + line-height: 1.45; + margin-top: 0.2rem; +} + +.intro-stat-card .stat-source { + font-size: 0.72rem; + color: var(--subtle); + margin-top: 0.5rem; + font-style: italic; +} + +/* Responsive intro */ +@media (max-width: 860px) { + .intro-inner { + grid-template-columns: 1fr; + gap: 2.5rem; + } + .intro-right { padding-top: 0; } +} + +@media (max-width: 480px) { + .intro-ctas { flex-direction: column; } + .intro-btn { justify-content: center; text-align: center; } +} + +/* ═══════════════════════════════════════════ + ARTÍCULO — layout para salud-digital.html +═══════════════════════════════════════════ */ +.article-hero { + padding: 4rem 0 3rem; + background: linear-gradient(160deg, #1a1714 0%, #2a1a10 60%, #1a2b20 100%); + text-align: center; + position: relative; + overflow: hidden; +} +.article-hero::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(26,122,74,0.15) 0%, transparent 60%); + pointer-events: none; +} + +.article-hero-inner { position: relative; z-index: 1; } + +.article-label { + display: inline-flex; + align-items: center; + gap: 0.45rem; + padding: 0.3rem 0.9rem; + border-radius: 20px; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + background: rgba(26,122,74,0.20); + color: #6de8a2; + border: 1px solid rgba(26,122,74,0.35); + margin-bottom: 1.2rem; +} + +.article-title { + font-family: 'Recion', 'Georgia', serif; + font-size: clamp(2rem, 5vw, 3.4rem); + color: #f8f7f4; + line-height: 1.15; + letter-spacing: 0.02em; + margin-bottom: 1rem; + max-width: 18ch; + margin-left: auto; + margin-right: auto; +} +.article-title em { font-style: normal; color: var(--acid); } + +.article-subtitle { + font-size: 1.1rem; + color: rgba(248,247,244,0.65); + max-width: 60ch; + margin: 0 auto 2rem; + line-height: 1.65; +} + +.article-meta { + display: flex; + align-items: center; + justify-content: center; + gap: 1.5rem; + flex-wrap: wrap; + font-size: 0.8rem; + color: rgba(248,247,244,0.40); + letter-spacing: 0.03em; +} +.article-meta span { display: flex; align-items: center; gap: 0.35rem; } + +/* Cuerpo del artículo */ +.article-body { + padding: 3.5rem 0 5rem; + background: var(--bg); +} + +.article-layout { + display: grid; + grid-template-columns: 1fr 280px; + gap: 3.5rem; + align-items: start; +} + +.article-content h2 { + font-size: clamp(1.3rem, 2.8vw, 1.75rem); + margin-top: 2.5rem; + margin-bottom: 0.75rem; + padding-top: 2rem; + border-top: 1px solid var(--border); + color: var(--text); +} +.article-content h2:first-child { border-top: none; padding-top: 0; margin-top: 0; } + +.article-content h3 { + font-size: 1.1rem; + margin-top: 1.6rem; + margin-bottom: 0.55rem; + color: var(--caoba); +} + +.article-content p { + color: var(--muted); + font-size: 1.02rem; + line-height: 1.72; + margin-bottom: 1rem; + max-width: 72ch; +} + +.article-content ul, .article-content ol { + padding-left: 1.5rem; + margin-bottom: 1rem; + color: var(--muted); + font-size: 1rem; + line-height: 1.7; +} +.article-content li { margin-bottom: 0.4rem; } + +.article-content strong { color: var(--text); font-weight: 600; } + +/* Callout boxes */ +.callout { + margin: 1.8rem 0; + padding: 1.2rem 1.4rem; + border-radius: 14px; + font-size: 0.96rem; + line-height: 1.6; +} +.callout--sage { + background: var(--sage-lt); + border-left: 3px solid var(--sage); + color: #0f4a2a; +} +.callout--caoba { + background: var(--caoba-lt); + border-left: 3px solid var(--caoba); + color: #5c2d1e; +} +.callout--acid { + background: var(--acid-lt); + border-left: 3px solid var(--acid-dark); + color: #4a5a00; +} +.callout--dark { + background: #1a1714; + border-left: 3px solid var(--acid); + color: rgba(248,247,244,0.80); +} +.callout p { color: inherit; margin-bottom: 0; font-size: inherit; max-width: 100%; } +.callout strong { color: inherit; font-weight: 700; } + +/* Paper card — cita académica */ +.paper-card { + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: 14px; + padding: 1.2rem 1.4rem; + margin: 0.6rem 0; + box-shadow: var(--shadow-sm); + transition: box-shadow 200ms ease, border-color 200ms ease; +} +.paper-card:hover { + border-color: var(--caoba); + box-shadow: var(--shadow-md); +} +.paper-card .paper-label { + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--sage); + margin-bottom: 0.4rem; +} +.paper-card .paper-title { + font-size: 0.93rem; + font-weight: 600; + color: var(--text); + line-height: 1.4; + margin-bottom: 0.3rem; +} +.paper-card .paper-meta { + font-size: 0.78rem; + color: var(--muted); + margin-bottom: 0.6rem; +} +.paper-card .paper-finding { + font-size: 0.88rem; + color: var(--muted); + line-height: 1.55; + border-top: 1px solid var(--border); + padding-top: 0.6rem; + margin-top: 0.4rem; +} +.paper-card a { + font-size: 0.78rem; + font-weight: 600; + color: var(--sage); +} +.paper-card a:hover { color: var(--caoba); } + +/* Stat highlights */ +.stat-highlight { + display: flex; + align-items: center; + gap: 1.1rem; + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: 14px; + padding: 1.1rem 1.3rem; + margin: 0.5rem 0; + box-shadow: var(--shadow-sm); +} +.stat-highlight .sh-val { + font-family: 'Recion', 'Georgia', serif; + font-size: 2.2rem; + color: var(--caoba); + line-height: 1; + flex-shrink: 0; + letter-spacing: 0.02em; +} +.stat-highlight .sh-text { + font-size: 0.88rem; + color: var(--muted); + line-height: 1.45; +} +.stat-highlight .sh-text strong { color: var(--text); } + +/* Sidebar del artículo */ +.article-sidebar { + position: sticky; + top: 2rem; + display: flex; + flex-direction: column; + gap: 1.2rem; +} + +.sidebar-card { + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: 16px; + padding: 1.4rem 1.5rem; + box-shadow: var(--shadow-sm); +} + +.sidebar-card h4 { + font-family: 'Recion', 'Georgia', serif; + font-size: 0.95rem; + letter-spacing: 0.04em; + margin-bottom: 0.9rem; + color: var(--text); +} + +.sidebar-card ul { + list-style: none; + padding: 0; + margin: 0; +} +.sidebar-card ul li { + font-size: 0.87rem; + color: var(--muted); + padding: 0.45rem 0; + border-bottom: 1px solid var(--surface2); + line-height: 1.4; +} +.sidebar-card ul li:last-child { border-bottom: none; } +.sidebar-card ul li a { + font-weight: 600; + font-size: 0.87rem; +} + +.sidebar-card .toc-link { + display: block; + font-size: 0.87rem; + color: var(--muted); + padding: 0.4rem 0; + border-bottom: 1px solid var(--surface2); + text-decoration: none; + transition: color 130ms ease, padding-left 130ms ease; +} +.sidebar-card .toc-link:hover { + color: var(--caoba); + padding-left: 0.4rem; + text-decoration: none; +} +.sidebar-card .toc-link:last-child { border-bottom: none; } + +.sidebar-action-btn { + 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, background 130ms ease; + margin-top: 0.5rem; +} +.sidebar-action-btn--primary { + background: var(--caoba); + color: #fff; + border: 1.5px solid #5c2d1e; + box-shadow: 0 3px 0 0 #4a1e10; +} +.sidebar-action-btn--primary:hover { + background: var(--caoba-mid); + transform: translateY(-2px); + box-shadow: 0 5px 0 0 #3a150a; + text-decoration: none; + color: #fff; +} + +/* Tip list */ +.tips-list { + list-style: none; + padding: 0; + margin: 1rem 0; + display: flex; + flex-direction: column; + gap: 0.7rem; +} +.tips-list li { + display: flex; + gap: 0.75rem; + align-items: flex-start; + font-size: 0.97rem; + color: var(--muted); + line-height: 1.5; +} +.tips-list li .tip-num { + flex-shrink: 0; + width: 24px; + height: 24px; + border-radius: 6px; + background: var(--caoba); + color: #fff; + font-size: 0.72rem; + font-weight: 700; + display: grid; + place-items: center; + box-shadow: 0 2px 0 0 #5c2d1e; + margin-top: 0.1rem; +} +.tips-list li strong { color: var(--text); } + +/* References section */ +.references-section { + margin-top: 2.5rem; + padding-top: 2rem; + border-top: 2px solid var(--border); +} +.references-section h2 { border-top: none; padding-top: 0; margin-top: 0; } +.ref-list { + list-style: none; + padding: 0; + margin: 1rem 0; + display: flex; + flex-direction: column; + gap: 0.75rem; +} +.ref-list li { + font-size: 0.86rem; + color: var(--muted); + line-height: 1.55; + padding: 0.7rem 1rem; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 10px; + display: flex; + gap: 0.75rem; + align-items: flex-start; +} +.ref-list li .ref-num { + font-weight: 700; + color: var(--caoba); + font-size: 0.82rem; + flex-shrink: 0; + margin-top: 0.05rem; +} +.ref-list a { font-weight: 600; color: var(--sage); font-size: 0.82rem; } +.ref-list a:hover { color: var(--caoba); } + +/* Responsive article */ +@media (max-width: 900px) { + .article-layout { grid-template-columns: 1fr; } + .article-sidebar { position: static; } +} + +/* Article back nav */ +.article-backnav { + padding: 1.2rem 0; + border-bottom: 1px solid var(--border); + background: var(--surface); +} +.article-backnav a { + font-size: 0.87rem; + font-weight: 600; + color: var(--muted); + display: inline-flex; + align-items: center; + gap: 0.35rem; +} +.article-backnav a:hover { color: var(--caoba); text-decoration: none; } + +/* ═══════════════════════════════════════════ + STUDIES SECTION — Lo que dice la ciencia +═══════════════════════════════════════════ */ +.studies-section { + padding: 4.5rem 0 5rem; + background: var(--bg); + border-top: 1px solid var(--border); +} + +.studies-header { + text-align: center; + max-width: 65ch; + margin: 0 auto 3rem; +} + +.studies-eyebrow { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.3rem 0.9rem; + border-radius: 20px; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + background: var(--sage-lt); + color: var(--sage); + border: 1px solid #a8d4bc; + margin-bottom: 1rem; +} + +.studies-title { + font-family: 'Recion', 'Georgia', serif; + font-size: clamp(1.8rem, 3.5vw, 2.5rem); + color: var(--text); + margin-bottom: 0.75rem; +} + +.studies-subtitle { + font-size: 1rem; + color: var(--muted); + line-height: 1.65; + margin: 0; +} + +.studies-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.2rem; + margin-bottom: 2.5rem; +} + +.study-card { + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: 18px; + padding: 1.8rem 1.4rem 1.5rem; + box-shadow: var(--shadow-sm); + display: flex; + flex-direction: column; + gap: 0.6rem; + transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; +} +.study-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } + +.study-card--brain { border-top: 3px solid var(--caoba); } +.study-card--attention { border-top: 3px solid var(--acid-dark); } +.study-card--sleep { border-top: 3px solid #6b7eff; } +.study-card--data { border-top: 3px solid var(--sage); } + +.study-card-icon { font-size: 1.8rem; line-height: 1; } + +.study-card-stat { + font-family: 'Recion', serif; + font-size: 2.3rem; + line-height: 1; + color: var(--caoba); + letter-spacing: 0.02em; +} +.study-card--attention .study-card-stat { color: var(--acid-dark); } +.study-card--sleep .study-card-stat { color: #6b7eff; } +.study-card--data .study-card-stat { color: var(--sage); } + +.study-card-title { + font-family: 'Recion', serif; + font-size: 1.05rem; + color: var(--text); + letter-spacing: 0.02em; + margin: 0; +} + +.study-card-text { + font-size: 0.86rem; + color: var(--muted); + line-height: 1.55; + flex: 1; +} + +.study-card-source { + font-size: 0.70rem; + color: var(--subtle); + font-style: italic; + margin-top: auto; + padding-top: 0.4rem; + border-top: 1px solid var(--surface2); +} + +.studies-banner { + display: grid; + grid-template-columns: 400px 1fr; + border-radius: 20px; + overflow: hidden; + border: 1.5px solid var(--border); + box-shadow: var(--shadow-md); +} + +.studies-banner-photo { + background-image: url('img/studies-banner.jpg'); + background-size: cover; + background-position: center; + background-color: #1a1714; + position: relative; + min-height: 300px; +} + +.studies-banner-photo-inner { + position: absolute; + inset: 0; + padding: 2.2rem; + display: flex; + flex-direction: column; + justify-content: flex-end; + gap: 0.5rem; + background: linear-gradient(to top, rgba(26,23,20,0.95) 0%, rgba(26,23,20,0.40) 60%, rgba(26,23,20,0.20) 100%); +} + +.sbp-label { + font-size: 0.65rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--acid); +} + +.sbp-stat { + font-family: 'Recion', serif; + font-size: 2.2rem; + color: #f8f7f4; + line-height: 1; +} + +.sbp-desc { + font-size: 0.85rem; + color: rgba(248,247,244,0.52); + line-height: 1.45; + max-width: 26ch; +} + +.studies-banner-text { + padding: 2.5rem 2.8rem; + background: var(--surface); + display: flex; + flex-direction: column; + justify-content: center; + gap: 1rem; +} + +.studies-banner-text h3 { + font-family: 'Recion', serif; + font-size: 1.45rem; + color: var(--text); + letter-spacing: 0.02em; + margin: 0; +} + +.studies-banner-text p { + font-size: 0.95rem; + color: var(--muted); + line-height: 1.65; + max-width: 60ch; + margin: 0; +} + +.studies-banner-text em { font-style: italic; color: var(--caoba); } + +@media (max-width: 1100px) { + .studies-grid { grid-template-columns: repeat(2, 1fr); } +} +@media (max-width: 860px) { + .studies-banner { grid-template-columns: 1fr; } + .studies-banner-photo { min-height: 200px; } + .studies-banner-text { padding: 2rem; } +} +@media (max-width: 600px) { + .studies-grid { grid-template-columns: 1fr 1fr; } +} +@media (max-width: 400px) { + .studies-grid { grid-template-columns: 1fr; } +} + +/* ═══════════════════════════════════════════ + DARK THEME — index.html (body.page-dark) +═══════════════════════════════════════════ */ +.page-dark { + --bg: #1a1714; + --surface: #221f1b; + --surface2: #2a2620; + --border: rgba(248,247,244,0.09); + --border-dark: rgba(248,247,244,0.16); + --text: #f8f7f4; + --muted: rgba(248,247,244,0.55); + --subtle: rgba(248,247,244,0.32); + --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30); + --shadow-md: 0 4px 12px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.30); + --shadow-lg: 0 8px 30px rgba(0,0,0,0.65), 0 4px 8px rgba(0,0,0,0.30); + --btn-shadow: 0 4px 0 0 #090806, 0 6px 16px rgba(0,0,0,0.40); + --btn-shadow-hover: 0 6px 0 0 #090806, 0 10px 24px rgba(0,0,0,0.50); + --btn-shadow-active:0 1px 0 0 #090806, 0 2px 6px rgba(0,0,0,0.30); +} + +.page-dark h2, +.page-dark h3 { color: var(--acid); } + +/* Override hardcoded light gradients */ +.page-dark .intro-section, +.page-dark .erase-form-section, +.page-dark .info, +.page-dark .info.alt { + background: var(--surface2); + animation: none; +} +.page-dark .intro-section::before { + background: + radial-gradient(ellipse 55% 50% at 8% 50%, rgba(200,255,0,0.04) 0%, transparent 60%), + radial-gradient(ellipse 45% 55% at 92% 30%, rgba(26,122,74,0.07) 0%, transparent 60%); +} + +/* Hero-landing on index: same dark gradient, nav buttons become white pills with dark text */ +.page-dark .landing-nav-btn { + color: #1a1714; + background: rgba(248,247,244,0.88); + border-color: rgba(248,247,244,0.60); + box-shadow: 0 4px 0 0 rgba(248,247,244,0.35), 0 6px 14px rgba(0,0,0,0.22); + backdrop-filter: none; +} +.page-dark .landing-nav-btn:hover { + color: #1a1714; + background: rgba(248,247,244,0.96); + border-color: rgba(248,247,244,0.80); + box-shadow: 0 6px 0 0 rgba(248,247,244,0.50), 0 10px 24px rgba(0,0,0,0.28); +} +.page-dark .landing-nav-btn--highlight, +.page-dark .landing-nav-btn--highlight:hover { color: #1a1714; } + +/* Pill badges */ +.page-dark .intro-left .intro-label, +.page-dark .studies-eyebrow { + background: rgba(26,122,74,0.14); + border-color: rgba(26,122,74,0.28); +} + +/* Stat cards */ +.page-dark .intro-title em { color: var(--acid); } +.page-dark .intro-stat-card .stat-val { color: var(--acid); } +.page-dark .intro-stat-card:hover { + background: #2e2a24; + border-color: var(--acid); + box-shadow: 0 3px 0 0 var(--acid-dark), var(--shadow-md); +} + +/* ─── Photo slider separator ─────────────────── */ +.photo-slider { + position: relative; + min-height: 440px; + overflow: hidden; +} +.photo-slide { + position: absolute; + inset: 0; + opacity: 0; + transition: opacity 900ms ease; + background-size: cover; + background-position: center 35%; + display: flex; + align-items: flex-end; +} +.photo-slide.active { opacity: 1; z-index: 1; } +.photo-slide::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient( + to bottom, + rgba(26,23,20,0.10) 0%, + rgba(26,23,20,0.62) 52%, + rgba(26,23,20,0.94) 100% + ); +} +.photo-slide--1 { background-image: url('img/crowd-phones.jpg'); } +.photo-slide--2 { background-image: url('img/surveillance.jpg'); background-position: center center; } +.photo-slide--3 { background-image: url('img/legal-action.jpg'); background-position: center 30%; } + +.photo-slide-inner { + position: relative; + z-index: 2; + max-width: 1200px; + width: 100%; + margin: 0 auto; + padding: 2.5rem 3rem 4rem; +} +.photo-slide-label { + display: block; + font-size: 0.70rem; + font-weight: 700; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--acid); + margin-bottom: 0.65rem; +} +.photo-slide-headline { + font-family: 'Recion', 'Georgia', serif; + font-size: clamp(1.8rem, 3.5vw, 3rem); + color: #f8f7f4; + line-height: 1.2; + max-width: 22ch; + margin: 0 0 0.8rem; + letter-spacing: 0.02em; +} +.page-dark .photo-slide-headline { color: #f8f7f4; } +.photo-slide-sub { + font-size: 1rem; + color: rgba(248,247,244,0.65); + max-width: 54ch; + line-height: 1.65; + margin: 0; +} + +.slider-dots { + position: absolute; + bottom: 1.4rem; + right: 3rem; + z-index: 3; + display: flex; + gap: 0.5rem; + align-items: center; +} +.slider-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: rgba(248,247,244,0.30); + border: none; + cursor: pointer; + padding: 0; + transition: background 250ms ease, transform 250ms ease; +} +.slider-dot.active { + background: var(--acid); + transform: scale(1.35); +} + +@media (max-width: 700px) { + .photo-slider { min-height: 340px; } + .photo-slide-inner { padding: 2rem 1.5rem 3.5rem; } + .slider-dots { right: 1.5rem; } +} + +/* ─── RESETEA hero CTA ───────────────────────── */ +.intro-cta-hero { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.9rem; + padding: 3rem 1rem 1rem; + grid-column: 1 / -1; +} +.btn-resetea-hero { + font-family: 'Recion', 'Georgia', serif; + font-size: clamp(2rem, 4.5vw, 3.4rem); + letter-spacing: 0.18em; + background: var(--acid); + color: #1a1714; + padding: 1rem 4.5rem; + border-radius: 14px; + text-decoration: none; + border: 2px solid #9dcc00; + box-shadow: 0 8px 0 0 #5a8800, 0 14px 36px rgba(200,255,0,0.22); + transition: transform 90ms ease, box-shadow 90ms ease; + display: inline-block; +} +.btn-resetea-hero:hover { + color: #1a1714; + text-decoration: none; + transform: translateY(-4px); + box-shadow: 0 12px 0 0 #4a7200, 0 20px 48px rgba(200,255,0,0.30); +} +.btn-resetea-hero:active { + color: #1a1714; + transform: translateY(5px); + box-shadow: 0 3px 0 0 #5a8800, 0 4px 12px rgba(200,255,0,0.12); +} +.btn-resetea-sub { + font-size: 0.88rem; + color: var(--muted); + text-align: center; +} + +/* ─── Study card source link ─────────────────── */ +.study-card-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + padding: 0.38rem 0.75rem; + border-radius: 8px; + font-size: 0.73rem; + font-weight: 600; + letter-spacing: 0.02em; + color: var(--subtle); + border: 1px solid var(--border); + text-decoration: none; + margin-top: 0.6rem; + align-self: flex-start; + transition: color 140ms ease, border-color 140ms ease, background 140ms ease; +} +.study-card--brain .study-card-link:hover { color: var(--caoba); border-color: var(--caoba); background: var(--caoba-lt); text-decoration: none; } +.study-card--attention .study-card-link:hover { color: var(--acid-dark); border-color: var(--acid-dark); background: var(--acid-lt); text-decoration: none; } +.study-card--sleep .study-card-link:hover { color: #4b5eff; border-color: #6b7eff; background: rgba(107,126,255,0.08); text-decoration: none; } +.study-card--data .study-card-link:hover { color: var(--sage); border-color: var(--sage); background: var(--sage-lt); text-decoration: none; } + +/* ─── Right-card source link (concienciacion.html) ── */ +.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; +} diff --git a/public/index.html b/public/index.html index 4aff8b3..087f025 100644 --- a/public/index.html +++ b/public/index.html @@ -9,7 +9,7 @@ - +
@@ -20,43 +20,272 @@

RESETEA

-

La información es poder.
Quitémosles poder.

- -
- -
+ +
+
+ +
+ Salud digital + +

+ ¿Por qué
+ resetear
+ tu huella digital? +

+ +

+ 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. +

+ +
    +
  • + 🧠 + Dopamina secuestrada. Los algoritmos de recompensa variable activan + los mismos circuitos cerebrales que las máquinas tragaperras, generando dependencia involuntaria. +
  • +
  • + ⏱️ + Atención fragmentada. 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. +
  • +
  • + 🕵️ + Perfil sin consentimiento. 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. +
  • +
  • + 🔒 + Derecho al olvido. La ley europea te da el poder de exigir que + borren tus datos. Solo hace falta saber cómo ejercerlo. +
  • +
  • + 🌙 + Sueño interrumpido. El uso nocturno de pantallas suprime la melatonina + y activa el FOMO, reduciendo la calidad del sueño entre un 20 y un 40 %. +
  • +
  • + 😰 + Ansiedad social amplificada. Limitar redes a 30 minutos/día + redujo significativamente la soledad y la depresión en 3 semanas frente al grupo control. +
  • +
+ + +
+ +
+ +
+
+ 📱 +
+
6h 37m
+
tiempo medio diario frente a pantallas en adultos españoles
+
Informe Digital 2024 · DataReportal
+
+
+ Ver informe → +
+ +
+
+ 🧪 +
+
+61 %
+
más riesgo de depresión en adolescentes con uso diario intensivo de redes sociales
+
Twenge et al. (2018) · JAMA Pediatrics
+
+
+ Ver estudio → +
+ +
+
+ 🧠 +
+
40+
+
estudios neurológicos documentan reducción de materia gris en el córtex prefrontal de usuarios intensivos
+
Revisión sistemática · PMC 2024
+
+
+
+ +
+
+ 🛡️ +
+
30 días
+
plazo legal máximo que tienen las plataformas para ejecutar tu solicitud de borrado GDPR
+
Art. 12 RGPD
+
+
+
+ +
+
+ +
+
23 min
+
tiempo medio para recuperar la concentración plena tras una interrupción digital. Cada notificación reinicia el reloj
+
Gloria Mark, UC Irvine · CHI 2008
+
+
+
+ +
+
+ 🕵️ +
+
87M
+
perfiles cosechados sin consentimiento por Cambridge Analytica para manipulación política
+
Testimonio Zuckerberg · Senado EE.UU. 2018
+
+
+
+ +
+ +
+ RESETEA + Ejerce tu derecho al olvido — gratis, sin abogado, en minutos +
+ +
+
+ + +
+ +
+
+ Tu atención, tu tiempo +

4 horas al día en pantallas.
¿Cuántas decides tú?

+

Recuperar el control no es dejar la tecnología. Es decidir conscientemente quién tiene acceso a ti.

+
+
+ +
+
+ Vigilancia constante +

Te observan aunque
no estés mirando.

+

Cámaras, sensores, algoritmos. Tu rastro digital viaja solo las 24 horas. Tienes derecho a saber quién lo tiene y a recuperarlo.

+
+
+ +
+
+ Tu derecho, tu poder +

30 días. El plazo legal
para borrar tus datos.

+

El RGPD te da herramientas concretas y exigibles. Ejercerlas es gratis, no requiere abogado y empieza aquí.

+
+
+ +
+ + + +
+ +
+ + +
+
+ +
+ Evidencia científica +

Lo que dice la ciencia

+

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.

+
+ +
+ +
+
🧠
+
40+
+

Cambios estructurales

+

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.

+ Revisión sistemática · PMC 2024 + Ver estudio → +
+ +
+
⏱️
+
47 seg
+

Atención fragmentada

+

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.

+ Gloria Mark · UC Irvine · CHI 2008 + Ver estudio → +
+ +
+
🌙
+
−40%
+

Sueño interrumpido

+

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.

+ Hysing et al. (2015) · BMJ Open + Ver estudio → +
+ +
+
🕵️
+
5.000+
+

Datos como mercancía

+

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.

+ FTC Data Broker Report · 2014 + Ver informe → +
+ +
+ + +
+
+
+
El circuito de la adicción
+
Dopamina
+
Los likes activan los mismos circuitos cerebrales que las máquinas tragaperras
+
+
+
+

El diseño deliberado de la adicción

+

Las plataformas de redes sociales no son neutrales. Sus equipos de ingeniería trabajan activamente para maximizar el engagement mediante patrones de recompensa variable — el mismo mecanismo que hace adictivo el juego de azar.

+

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 "una vulnerabilidad en la psicología humana".

+ Ver todos los estudios → +
+
+ +
+
+ @@ -147,354 +376,6 @@ - -
-
- -
-

Panel de acciones completo

-

- Marca cada acción completada para seguir tu progreso. Todos los enlaces apuntan a páginas oficiales. - Recuerda: descarga primero tus datos antes de eliminar nada. -

-
- -
-
- 0 acciones completadas -
- - -
-
- Cuentas base - -
-
- - - -
- - -
- - - - - -
- -
- - -
-
- Redes sociales - -
-
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- - - -
- - -
- -
- -
- - -
-
- Mensajería - -
-
- -
- - -
- -
- - -
- -
- -
- Gestionar -
-
- -
- -
- - -
-
- Streaming - -
-
- -
- - -
- - - - - -
- - -
- -
- -
- - -
-
- Buscadores - -
-
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- -
- - -
-
- Data brokers - -
-
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- -
- Sede AEPD -
-
- -
- -
- -
-
- @@ -566,6 +447,37 @@ + + +