From d64da63bd81bc5a8c1b179d3ebd0d20705ad8e24 Mon Sep 17 00:00:00 2001
From: hacklab <hacklab@laenre.net>
Date: Tue, 7 Apr 2026 12:36:00 +0200
Subject: [PATCH] =?UTF-8?q?T=C3=ADtulo=20RESETEA=20negro,=20tagline=20?=
 =?UTF-8?q?=C3=A1cido,=20hover=20=C3=A1cido=20en=20chips=20y=20nav?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- h1 cambiado a "RESETEA" en negro, tagline a "Reduce tu huella digital." en --acid (#c8ff00)
- Tagline con text-shadow sutil verde ácido
- Botones de nav: hover con borde y fondo verde ácido
- Botón Plantillas GDPR: fondo ácido con texto negro como CTA diferenciado
- Chips de redes: hover en verde ácido (borde + fondo + texto)
- Chips acceso rápido: texto negro (no verde), mismos hovers ácidos
- Italiana: tamaño mayor + subpixel-antialiased para verla más gruesa

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/index.css  | 103 +++++++++++++++++++++++++---------------------
 public/index.html |   4 +-
 2 files changed, 57 insertions(+), 50 deletions(-)

diff --git a/public/index.css b/public/index.css
index afd24c9..27a6eb1 100644
--- a/public/index.css
+++ b/public/index.css
@@ -42,6 +42,10 @@
   --lime:      #96c21a;        /* verde lima */
   --lime-lt:   #f4fae0;        /* verde lima muy claro */
 
+  --acid:      #c8ff00;        /* verde ácido */
+  --acid-dark: #7aaa00;        /* verde ácido oscuro (texto sobre blanco) */
+  --acid-lt:   #f2ffe0;        /* verde ácido muy clarito (fondos) */
+
   --shadow-sm: 0 1px 3px rgba(26,23,20,0.08), 0 1px 2px rgba(26,23,20,0.06);
   --shadow-md: 0 4px 12px rgba(26,23,20,0.10), 0 2px 4px rgba(26,23,20,0.06);
   --shadow-lg: 0 8px 30px rgba(26,23,20,0.12), 0 4px 8px rgba(26,23,20,0.06);
@@ -604,20 +608,21 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
 
 .main-title {
   font-family: 'Recion', 'Georgia', serif;
-  font-size: clamp(2.8rem, 7vw, 5rem);
-  color: #b8de6a;
-  letter-spacing: 0.02em;
-  line-height: 1.1;
-  margin-bottom: 0.6rem;
+  font-size: clamp(3.2rem, 9vw, 6.5rem);
+  color: var(--text);
+  letter-spacing: 0.04em;
+  line-height: 1;
+  margin-bottom: 0.5rem;
 }
 
 .main-tagline {
   font-family: 'Recion', 'Georgia', serif;
-  font-size: clamp(1.05rem, 2.5vw, 1.5rem);
-  color: var(--lime);
+  font-size: clamp(1.1rem, 2.8vw, 1.7rem);
+  color: var(--acid);
   letter-spacing: 0.06em;
   font-weight: normal;
   margin-bottom: 2.2rem;
+  text-shadow: 0 0 20px rgba(200,255,0,0.25);
 }
 
 .landing-nav {
@@ -645,30 +650,31 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
 }
 
 .landing-nav-btn:hover {
-  background: var(--surface2);
-  border-color: var(--border-dark);
-  box-shadow: var(--btn-shadow-hover);
+  background: var(--acid-lt);
+  border-color: var(--acid);
+  box-shadow: 0 4px 0 0 #9dcc00, 0 8px 20px rgba(200,255,0,0.18);
   transform: translateY(-2px);
   text-decoration: none;
-  color: var(--text);
+  color: var(--acid-dark);
 }
 
 .landing-nav-btn:active {
-  box-shadow: var(--btn-shadow-active);
-  transform: translateY(3px);
+  box-shadow: 0 1px 0 0 #9dcc00;
+  transform: translateY(2px);
 }
 
 .landing-nav-btn--highlight {
-  background: var(--caoba);
-  color: #fff;
-  border-color: #5c2d1e;
-  box-shadow: var(--caoba-shadow);
+  background: var(--acid);
+  color: var(--text);
+  border-color: #9dcc00;
+  box-shadow: 0 4px 0 0 #7aaa00, 0 6px 16px rgba(200,255,0,0.25);
+  font-weight: 700;
 }
 .landing-nav-btn--highlight:hover {
-  background: var(--caoba-mid);
-  border-color: #4a2318;
-  box-shadow: var(--caoba-shadow-hover);
-  color: #fff;
+  background: #d4ff1a;
+  border-color: var(--acid-dark);
+  box-shadow: 0 6px 0 0 #6a9800, 0 10px 24px rgba(200,255,0,0.35);
+  color: var(--text);
 }
 
 /* ═══════════════════════════════════════════
@@ -740,7 +746,7 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
   margin-top: 1.2rem;
 }
 .networks-sublabel:first-child { margin-top: 0; }
-.networks-sublabel--manual { color: var(--sage); }
+.networks-sublabel--manual { color: var(--text); }
 
 .networks-grid {
   display: flex;
@@ -752,9 +758,9 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
 /* Chip base — estilo botón con Italiana */
 .net-chip {
   font-family: 'Italiana', 'Georgia', serif;
-  font-size: 1rem;
-  letter-spacing: 0.04em;
-  padding: 0.55rem 1.15rem;
+  font-size: 1.08rem;
+  letter-spacing: 0.05em;
+  padding: 0.6rem 1.2rem;
   border-radius: 10px;
   cursor: pointer;
   background: var(--surface);
@@ -769,17 +775,18 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
     color 130ms ease;
   user-select: none;
   line-height: 1.2;
+  -webkit-font-smoothing: subpixel-antialiased;
 }
 .net-chip:hover {
-  border-color: var(--caoba);
-  color: var(--caoba);
-  background: var(--caoba-lt);
+  border-color: var(--acid);
+  color: var(--acid-dark);
+  background: var(--acid-lt);
   transform: translateY(-3px);
-  box-shadow: 0 6px 0 0 var(--border-dark), 0 8px 18px rgba(123,63,46,0.13);
+  box-shadow: 0 6px 0 0 #9dcc00, 0 8px 20px rgba(200,255,0,0.20);
 }
 .net-chip:active {
   transform: translateY(1px);
-  box-shadow: 0 1px 0 0 var(--border-dark), 0 2px 4px rgba(26,23,20,0.08);
+  box-shadow: 0 1px 0 0 var(--border-dark);
 }
 
 .net-chip.selected {
@@ -791,34 +798,34 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
 .net-chip.selected:hover {
   background: var(--caoba-mid);
   color: #fff;
-  border-color: #4a2318;
-  box-shadow: 0 6px 0 0 #4a2318, 0 8px 20px rgba(123,63,46,0.30);
+  border-color: var(--acid);
+  box-shadow: 0 6px 0 0 #9dcc00, 0 8px 20px rgba(200,255,0,0.25);
   transform: translateY(-3px);
 }
 
-/* Chips manuales (verde salvia) */
+/* Chips manuales — texto negro, hover ácido */
 .net-chip--manual {
-  background: var(--sage-lt);
-  color: var(--sage);
-  border-color: #c0d9c8;
-  box-shadow: 0 3px 0 0 #c0d9c8, 0 4px 10px rgba(74,124,89,0.07);
+  background: var(--surface);
+  color: var(--text);
+  border-color: var(--border);
+  box-shadow: 0 3px 0 0 var(--border-dark), 0 4px 10px rgba(26,23,20,0.06);
 }
 .net-chip--manual:hover {
-  background: #d2eeda;
-  border-color: var(--sage);
-  color: var(--sage);
-  box-shadow: 0 6px 0 0 #c0d9c8, 0 8px 18px rgba(74,124,89,0.15);
+  background: var(--acid-lt);
+  border-color: var(--acid);
+  color: var(--acid-dark);
+  box-shadow: 0 6px 0 0 #9dcc00, 0 8px 20px rgba(200,255,0,0.20);
+  transform: translateY(-3px);
 }
 .net-chip--manual.selected {
-  background: var(--sage);
-  color: #fff;
-  border-color: #3a6347;
-  box-shadow: 0 3px 0 0 #3a6347, 0 4px 12px rgba(74,124,89,0.25);
+  background: var(--text);
+  color: var(--acid);
+  border-color: var(--text);
+  box-shadow: 0 3px 0 0 #000, 0 4px 12px rgba(26,23,20,0.25);
 }
 .net-chip--manual.selected:hover {
-  background: #3f6e50;
-  color: #fff;
-  box-shadow: 0 6px 0 0 #3a6347, 0 8px 20px rgba(74,124,89,0.30);
+  border-color: var(--acid);
+  box-shadow: 0 6px 0 0 #9dcc00, 0 8px 20px rgba(200,255,0,0.25);
   transform: translateY(-3px);
 }
 
diff --git a/public/index.html b/public/index.html
index 904039a..30bcbb4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,8 +19,8 @@
 ════════════════════════════════════════════ -->
 <section class="hero-landing">
   <div class="container hero-landing-inner">
-    <h1 class="main-title">Reduce tu huella digital.</h1>
-    <p class="main-tagline">Privacidad sin custodios.</p>
+    <h1 class="main-title">RESETEA</h1>
+    <p class="main-tagline">Reduce tu huella digital.</p>
     <div class="landing-nav">
       <a class="landing-nav-btn" href="tipos.html">Tipos de información</a>
       <a class="landing-nav-btn" href="concienciacion.html">Concienciación</a>