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; }
-
-
-
-
R
-
-
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 @@
-
-
-
-
R
-
-
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.
-
-
-
-
- " Matamos gente basándonos en metadatos."
- — Gen. Michael Hayden, ex-director de la NSA
-
-
- " 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."
- — Edward Snowden
-
-
- " El que controla los datos del presente controla el pasado. El que controla el pasado controla el futuro."
- — Inspirado en George Orwell, 1984
-
-
- " No somos los clientes de estas empresas. Somos el producto."
- — Richard Serra & Carlota Fay Schoolman, 1973
-
-
- " La vigilancia es el modelo de negocio de internet."
- — Bruce Schneier, criptógrafo y especialista en seguridad
-
-
-
+
+
+
+
+
+
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í.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
🧠
+
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 @@
-
-
-
-
-
-
-
-
-
0 acciones completadas
-
-
-
-
-
-
-
-
-
Google
-
-
-
-
-
Microsoft / Outlook
-
-
-
-
-
Apple ID
-
-
-
-
-
Amazon
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Instagram
-
-
-
-
-
Facebook
-
-
-
-
-
X / Twitter
-
-
-
-
-
LinkedIn
-
-
-
-
-
TikTok
-
-
-
-
-
Snapchat
-
-
-
-
-
Pinterest
-
-
-
-
-
Reddit
-
-
-
-
-
Discord
-
-
-
-
-
-
-
-
-
-
-
-
-
-
WhatsApp
-
-
-
-
-
Telegram
-
-
-
-
-
Gmail (correo)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Spotify
-
-
-
-
-
Netflix
-
-
-
-
-
Twitch
-
-
-
-
-
YouTube
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Google — Derecho al olvido (UE)
-
-
-
-
-
Google — Contenido obsoleto
-
-
-
-
-
Google — Info personal
-
-
-
-
-
Bing — Eliminación de contenido
-
-
-
-
-
Bing — Derecho al olvido
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Have I Been Pwned
-
-
-
-
-
DeleteMe (referencia)
-
-
-
-
-
-
-
-
-
-
-
-
@@ -566,6 +447,37 @@
+
+
+