From 5ff8919d5ed165d5ddcdefefafb19f36d5cc1a69 Mon Sep 17 00:00:00 2001
From: hacklab <hacklab@laenre.net>
Date: Tue, 7 Apr 2026 12:27:08 +0200
Subject: [PATCH] =?UTF-8?q?Quitar=20header=20sticky,=20t=C3=ADtulo=20en=20?=
 =?UTF-8?q?verde=20clarito,=20fuente=20Italiana,=20chips=20mejorados?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Eliminar topbar/nav del index (se añadirá cuando haya logo)
- Título principal en verde muy clarito (#b8de6a)
- Añadir @font-face Italiana y aplicar a body, input y chips de redes
- Chips de redes: más grandes, elevación 3D en hover, transición cúbica
- Topbar sin position:sticky (limpieza)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/index.css  | 69 ++++++++++++++++++++++++++++++-----------------
 public/index.html | 17 ------------
 2 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/public/index.css b/public/index.css
index 4deb36c..afd24c9 100644
--- a/public/index.css
+++ b/public/index.css
@@ -12,6 +12,14 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'Italiana';
+  src: url('fonts/Italiana-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 /* ── Variables ── */
 :root {
   --bg:        #f8f7f4;        /* blanco cálido */
@@ -58,7 +66,7 @@
 html { scroll-behavior: smooth; }
 
 body {
-  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-family: 'Italiana', 'Georgia', serif;
   background: var(--bg);
   color: var(--text);
   line-height: 1.65;
@@ -98,9 +106,6 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
   background: var(--surface);
   border-bottom: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
-  position: sticky;
-  top: 0;
-  z-index: 100;
 }
 
 .topbar-inner {
@@ -600,7 +605,7 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
 .main-title {
   font-family: 'Recion', 'Georgia', serif;
   font-size: clamp(2.8rem, 7vw, 5rem);
-  color: var(--text);
+  color: #b8de6a;
   letter-spacing: 0.02em;
   line-height: 1.1;
   margin-bottom: 0.6rem;
@@ -698,7 +703,7 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
   width: 100%;
   max-width: 500px;
   padding: 0.9rem 1.2rem;
-  font-size: 1.05rem;
+  font-size: 1.1rem;
   border: 2px solid var(--border);
   border-radius: 12px;
   background: var(--surface);
@@ -706,7 +711,8 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
   outline: none;
   box-shadow: var(--shadow-sm);
   transition: border-color 150ms ease, box-shadow 150ms ease;
-  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-family: 'Italiana', 'Georgia', serif;
+  letter-spacing: 0.03em;
 }
 .email-input:focus {
   border-color: var(--caoba);
@@ -743,64 +749,77 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; }
   margin-bottom: 0.25rem;
 }
 
-/* Chip base */
+/* Chip base — estilo botón con Italiana */
 .net-chip {
-  padding: 0.42rem 0.9rem;
-  border-radius: 8px;
-  font-size: 0.82rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
+  font-family: 'Italiana', 'Georgia', serif;
+  font-size: 1rem;
+  letter-spacing: 0.04em;
+  padding: 0.55rem 1.15rem;
+  border-radius: 10px;
   cursor: pointer;
   background: var(--surface);
   color: var(--text);
-  border: 1px solid var(--border);
-  box-shadow: 0 2px 0 0 var(--border-dark);
-  transition: all 120ms ease;
+  border: 1.5px solid var(--border);
+  box-shadow: 0 3px 0 0 var(--border-dark), 0 4px 10px rgba(26,23,20,0.07);
+  transition:
+    transform 130ms cubic-bezier(.2,.8,.4,1),
+    box-shadow 130ms ease,
+    background 130ms ease,
+    border-color 130ms ease,
+    color 130ms ease;
   user-select: none;
-  line-height: 1;
+  line-height: 1.2;
 }
 .net-chip:hover {
   border-color: var(--caoba);
   color: var(--caoba);
   background: var(--caoba-lt);
-  transform: translateY(-1px);
-  box-shadow: 0 3px 0 0 var(--border-dark);
+  transform: translateY(-3px);
+  box-shadow: 0 6px 0 0 var(--border-dark), 0 8px 18px rgba(123,63,46,0.13);
+}
+.net-chip:active {
+  transform: translateY(1px);
+  box-shadow: 0 1px 0 0 var(--border-dark), 0 2px 4px rgba(26,23,20,0.08);
 }
-.net-chip:active { transform: translateY(1px); box-shadow: 0 1px 0 0 var(--border-dark); }
 
 .net-chip.selected {
   background: var(--caoba);
   color: #fff;
   border-color: #5c2d1e;
-  box-shadow: 0 2px 0 0 #5c2d1e;
+  box-shadow: 0 3px 0 0 #5c2d1e, 0 4px 12px rgba(123,63,46,0.25);
 }
 .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);
+  transform: translateY(-3px);
 }
 
-/* Chips manuales (verde) */
+/* Chips manuales (verde salvia) */
 .net-chip--manual {
   background: var(--sage-lt);
   color: var(--sage);
   border-color: #c0d9c8;
-  box-shadow: 0 2px 0 0 #c0d9c8;
+  box-shadow: 0 3px 0 0 #c0d9c8, 0 4px 10px rgba(74,124,89,0.07);
 }
 .net-chip--manual:hover {
-  background: #d6edde;
+  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);
 }
 .net-chip--manual.selected {
   background: var(--sage);
   color: #fff;
   border-color: #3a6347;
-  box-shadow: 0 2px 0 0 #3a6347;
+  box-shadow: 0 3px 0 0 #3a6347, 0 4px 12px rgba(74,124,89,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);
+  transform: translateY(-3px);
 }
 
 /* Footer del form */
diff --git a/public/index.html b/public/index.html
index 42e7ab9..904039a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,23 +11,6 @@
 
 <body>
 
-<header class="topbar">
-  <div class="container topbar-inner">
-    <div class="brand">
-      <div class="brand-logo">R</div>
-      <div class="brand-text">
-        <div class="brand-name">RESETEA<span>.NET</span></div>
-        <div class="brand-tag">Privacidad sin custodios</div>
-      </div>
-    </div>
-    <nav class="nav" aria-label="Navegación principal">
-      <a class="nav-btn" href="tipos.html">Tipos de info</a>
-      <a class="nav-btn" href="concienciacion.html">Concienciación</a>
-      <a class="nav-btn" href="egosurfing.html">Egosurfing</a>
-      <a class="nav-btn nav-btn--primary" href="plantillas.html">Plantillas GDPR</a>
-    </nav>
-  </div>
-</header>
 
 <main>