Merge pull request 'Develop' (#1) from develop into main

Reviewed-on: #1
This commit was merged in pull request #1.
This commit is contained in:
2026-07-21 17:43:52 +00:00
7 changed files with 1755 additions and 488 deletions
+11
View File
@@ -32,6 +32,12 @@
<link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="css/styles.css?v=1.1" /> <link rel="stylesheet" href="css/styles.css?v=1.1" />
<script
defer
src="https://stats.itziarzameza.dev/script.js"
data-website-id="8d8d648f-4a0c-4315-b287-5983ffedc8c4"
data-domains="www.itziarzameza.dev"
></script>
</head> </head>
<body <body
class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300" class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300"
@@ -324,6 +330,11 @@
href="https://github.com/itziarZG" href="https://github.com/itziarZG"
>GitHub</a >GitHub</a
> >
<a
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"
href="privacidad.html"
>Privacidad</a
>
</div> </div>
</div> </div>
</div> </div>
+412 -208
View File
File diff suppressed because it is too large Load Diff
+399 -219
View File
File diff suppressed because it is too large Load Diff
+241 -56
View File
@@ -29,12 +29,42 @@
}, },
}; };
</script> </script>
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/index.html" /> <link
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/index-ca.html" /> rel="alternate"
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/index-en.html" /> hreflang="es"
<link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin /> href="https://www.itziarzameza.dev/index.html"
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin /> />
<link
rel="alternate"
hreflang="ca"
href="https://www.itziarzameza.dev/index-ca.html"
/>
<link
rel="alternate"
hreflang="en"
href="https://www.itziarzameza.dev/index-en.html"
/>
<link
rel="preload"
href="fonts/material-symbols-outlined.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="fonts/space/space-grotesk-v22-latin-regular.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link rel="stylesheet" href="css/styles.css?v=1.1" /> <link rel="stylesheet" href="css/styles.css?v=1.1" />
<script
defer
src="https://stats.itziarzameza.dev/script.js"
data-website-id="8d8d648f-4a0c-4315-b287-5983ffedc8c4"
data-domains="www.itziarzameza.dev"
></script>
</head> </head>
<body <body
class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300" class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300"
@@ -97,12 +127,24 @@
</nav> </nav>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<!-- Language Switcher --> <!-- Language Switcher -->
<div class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold"> <div
class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold"
>
<span class="text-primary">ES</span> <span class="text-primary">ES</span>
<span class="text-slate-300 dark:text-slate-700">|</span> <span class="text-slate-300 dark:text-slate-700">|</span>
<a href="index-ca.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="Català">CA</a> <a
href="index-ca.html"
class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors"
title="Català"
>CA</a
>
<span class="text-slate-300 dark:text-slate-700">|</span> <span class="text-slate-300 dark:text-slate-700">|</span>
<a href="index-en.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="English">EN</a> <a
href="index-en.html"
class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors"
title="English"
>EN</a
>
</div> </div>
<button <button
class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors" class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors"
@@ -268,9 +310,9 @@
<p <p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4" class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
> >
Optimizar el consumo de recursos, minimizando la transferencia Optimizar el consumo de recursos, minimizando la
de datos y la huella de carbono de las aplicaciones web que transferencia de datos y la huella de carbono de las
desarrollo. aplicaciones web que desarrollo.
</p> </p>
</div> </div>
<a <a
@@ -279,9 +321,13 @@
rel="noopener noreferrer" rel="noopener noreferrer"
class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2" class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2"
> >
<span class="material-symbols-outlined text-base">verified</span> <span class="material-symbols-outlined text-base"
>verified</span
>
<span>Green Software Practitioner</span> <span>Green Software Practitioner</span>
<span class="material-symbols-outlined text-xs ml-auto">open_in_new</span> <span class="material-symbols-outlined text-xs ml-auto"
>open_in_new</span
>
</a> </a>
</div> </div>
@@ -645,18 +691,11 @@
Servidor Navidrome Servidor Navidrome
</h4> </h4>
</div> </div>
<p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
>
Instancia personal autohospedada de música en Hetzner
para recuperar la soberanía sobre mis archivos de
audio y evitar algoritmos corporativos de streaming.
</p>
</div> </div>
<div class="flex items-center justify-between mt-4"> <div class="flex items-center justify-between mt-4">
<span <span
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded" class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
>Operativo</span >En el roadmap</span
> >
<span class="text-xs text-slate-400" <span class="text-xs text-slate-400"
>Docker • Hetzner</span >Docker • Hetzner</span
@@ -688,8 +727,8 @@
</div> </div>
<div class="flex items-center justify-between mt-4"> <div class="flex items-center justify-between mt-4">
<span <span
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded" class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
>Operativo</span >En el roadmap</span
> >
<span class="text-xs text-slate-400" <span class="text-xs text-slate-400"
>n8n • Ollama • Whisper</span >n8n • Ollama • Whisper</span
@@ -711,18 +750,11 @@
Contribución Open Source Contribución Open Source
</h4> </h4>
</div> </div>
<p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
>
Colaboración activa y corrección de bugs en
herramientas y frameworks de código abierto que
utilizamos en el día a día.
</p>
</div> </div>
<div class="flex items-center justify-between mt-4"> <div class="flex items-center justify-between mt-4">
<span <span
class="text-[10px] uppercase font-bold tracking-wider text-primary bg-primary/10 px-2 py-1 rounded" class="text-[10px] uppercase font-bold tracking-wider text-slate-500 bg-slate-500/10 px-2 py-1 rounded"
>Constante</span >Sin iniciar</span
> >
<span class="text-xs text-slate-400" <span class="text-xs text-slate-400"
>Forgejo • GitHub</span >Forgejo • GitHub</span
@@ -755,13 +787,47 @@
<div class="flex items-center justify-between mt-4"> <div class="flex items-center justify-between mt-4">
<span <span
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded" class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
>En Desarrollo</span >Migración pendiente (actualmente en Vercel)</span
> >
<span class="text-xs text-slate-400" <span class="text-xs text-slate-400"
>HTML5 • JS • D3.js</span >HTML5 • JS • D3.js</span
> >
</div> </div>
</div> </div>
<!-- Cases Tancades -->
<div
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
>
<div>
<div class="flex items-center gap-3 mb-3">
<span
class="material-symbols-outlined text-primary text-2xl"
>query_stats</span
>
<h4 class="font-bold text-lg dark:text-white">
Cases Tancades
</h4>
</div>
<p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
>
Diagnóstico abierto de la vivienda en Balears: cruza
datos oficiales del INE, Airbnb y registros HUT del
Govern para mostrar cuántos pisos están vacíos frente
a la presión del alquiler turístico.
</p>
</div>
<div class="flex items-center justify-between mt-4">
<span
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
>Operativo</span
>
<span class="text-xs text-slate-400"
>Next.js · Datos abiertos INE/Govern Balear</span
>
</div>
</div>
</div> </div>
</div> </div>
@@ -855,6 +921,135 @@
digital sin pretensiones de sentar cátedra. digital sin pretensiones de sentar cátedra.
</p> </p>
<!-- Nota 1: Green Software Practitioner -->
<article
class="p-6 glass rounded-2xl border border-white/10 space-y-4"
>
<div class="flex items-center justify-between">
<span
class="text-xs text-slate-400 dark:text-slate-500 font-mono"
>20 de Julio, 2026</span
>
<span
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full flex items-center gap-1"
>
<span class="material-symbols-outlined text-xs"
>verified</span
>
Green Software
</span>
</div>
<h4 class="font-bold dark:text-white text-xl text-primary">
Green Software Practitioner — 5 ideas que me llevo
</h4>
<div
class="space-y-4 text-sm text-slate-700 dark:text-slate-300 leading-relaxed"
>
<div>
<h5
class="font-bold text-slate-900 dark:text-white mb-1"
>
¿Por qué hice esta certificación?
</h5>
<p>
Porque quiero construir tecnología que tenga en cuenta
su impacto ambiental y social.
</p>
</div>
<div>
<h5
class="font-bold text-slate-900 dark:text-white mb-2"
>
Cinco ideas que me llevo:
</h5>
<ol class="list-decimal list-inside space-y-2.5 pl-1">
<li>
<strong class="text-slate-900 dark:text-white"
>La mejor energía es la que no se consume.</strong
>
<p
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
>
Optimizar no es solo hacer la web más rápida.
También significa consumir menos recursos.
</p>
</li>
<li>
<strong class="text-slate-900 dark:text-white"
>La eficiencia empieza en el diseño.</strong
>
<p
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
>
Elegir una arquitectura sencilla suele ser mejor
que optimizar después.
</p>
</li>
<li>
<strong class="text-slate-900 dark:text-white"
>Medir antes de mejorar.</strong
>
<p
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
>
No podemos reducir aquello que no medimos.
</p>
</li>
<li>
<strong class="text-slate-900 dark:text-white"
>El software también tiene huella de
carbono.</strong
>
<p
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
>
Cada transferencia de datos, proceso o
almacenamiento tiene un coste.
</p>
</li>
<li>
<strong class="text-slate-900 dark:text-white"
>Green Software no consiste solo en consumir
menos.</strong
>
<p
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
>
También implica diseñar productos que ayuden a
reducir el impacto ambiental de las personas y las
organizaciones.
</p>
</li>
</ol>
</div>
<div>
<h5
class="font-bold text-slate-900 dark:text-white mb-1"
>
¿Y ahora qué?
</h5>
<p>
Estoy leyendo <em>Soberanía Tecnológica</em> porque
creo que la sostenibilidad no depende solo del consumo
energético, sino también de quién controla la
infraestructura y el software que utilizamos.
</p>
</div>
</div>
<!-- Frase fija al final de la nota -->
<div
class="pt-3 border-t border-slate-200 dark:border-slate-800 text-xs italic text-slate-500 dark:text-slate-400"
>
Estas son notas de aprendizaje, no guías definitivas. Si
ves algo que se pueda mejorar, me encantará escucharte.
</div>
</article>
<article class="p-6 glass rounded-2xl border border-white/10"> <article class="p-6 glass rounded-2xl border border-white/10">
<span <span
class="text-xs text-slate-400 dark:text-slate-500 font-mono" class="text-xs text-slate-400 dark:text-slate-500 font-mono"
@@ -883,29 +1078,14 @@
>arrow_right_alt</span >arrow_right_alt</span
> >
</a> </a>
<div
class="pt-3 border-t border-slate-200 dark:border-slate-800 text-xs italic text-slate-500 dark:text-slate-400 mt-4"
>
Estas son notas de aprendizaje, no guías definitivas. Si
ves algo que se pueda mejorar, me encantará escucharte.
</div>
</article> </article>
<article class="p-6 glass rounded-2xl border border-white/10">
<span
class="text-xs text-slate-400 dark:text-slate-500 font-mono"
>2 de Junio, 2026</span
>
<h4
class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer"
>
Migrando mi código: De GitHub a Forgejo en mi propio VPS
</h4>
<p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
>
Primeros pasos configurando Forgejo mediante Docker.
Detalle de consumo de memoria RAM (spoiler: consume menos
de 100MB en repositorios medianos) y facilidad de uso...
</p>
<span class="text-xs text-slate-400 mt-4 block"
>Próximamente</span
>
</article>
</div> </div>
</div> </div>
</div> </div>
@@ -941,7 +1121,7 @@
> >
<a <a
class="bg-slate-900 dark:bg-slate-800 text-white px-10 py-5 rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 dark:hover:bg-slate-700 transition-colors shadow-2xl" class="bg-slate-900 dark:bg-slate-800 text-white px-10 py-5 rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 dark:hover:bg-slate-700 transition-colors shadow-2xl"
href="mailto:itziar.zameza@gmail.com" href="mailto:itziar.zameza.dev@gmail.com"
> >
<span class="material-symbols-outlined">mail</span> <span class="material-symbols-outlined">mail</span>
Enviar un Email Enviar un Email
@@ -976,6 +1156,11 @@
href="https://www.linkedin.com/in/itziarzamezagarcia" href="https://www.linkedin.com/in/itziarzamezagarcia"
>LinkedIn</a >LinkedIn</a
> >
<a
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"
href="privacidad.html"
>Privacidad</a
>
</div> </div>
</div> </div>
</div> </div>
+229
View File
@@ -0,0 +1,229 @@
<!doctype html>
<html lang="ca">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Política de Privacitat | Itziar ZG</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#8c2bee",
"background-light": "#f7f6f8",
"background-dark": "#191022",
},
fontFamily: {
display: ["Space Grotesk", "sans-serif"],
serif: ["Instrument Serif", "serif"],
},
borderRadius: {
DEFAULT: "0.5rem",
lg: "1rem",
xl: "1.5rem",
full: "9999px",
},
},
},
};
</script>
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="css/styles.css?v=1.1" />
<script
defer
src="https://stats.itziarzameza.dev/script.js"
data-website-id="8d8d648f-4a0c-4315-b287-5983ffedc8c4"
data-domains="www.itziarzameza.dev"
></script>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300">
<div class="relative min-h-screen overflow-hidden iridescent-bg flex flex-col justify-between">
<div class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50 pointer-events-none"></div>
<div class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40 pointer-events-none"></div>
<div class="layout-container flex h-full grow flex-col relative z-10">
<header class="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between">
<a href="index-ca.html" class="flex items-center gap-2 group cursor-pointer">
<div class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-2xl">auto_awesome</span>
</div>
<h2 class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white">Itziar ZG</h2>
</a>
<nav class="hidden md:flex items-center gap-10 glass px-8 py-3 rounded-full">
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index-ca.html">Inici</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index-ca.html#manifiesto">Manifest</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index-ca.html#laboratori">Laboratori</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="huella.html">Emprenta</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="#contact">Contacte</a>
</nav>
<div class="flex items-center gap-3">
<div class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold">
<a href="privacidad.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="Castellano">ES</a>
<span class="text-slate-300 dark:text-slate-700">|</span>
<span class="text-primary">CA</span>
<span class="text-slate-300 dark:text-slate-700">|</span>
<a href="privacidad-en.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="English">EN</a>
</div>
<button class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors" id="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
<span class="material-symbols-outlined text-xl dark:hidden">dark_mode</span>
<span class="material-symbols-outlined text-xl hidden dark:block text-yellow-200">light_mode</span>
</button>
<a class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md shadow-primary/25 flex items-center justify-center" href="index-ca.html#contact">
Parlem
</a>
</div>
</header>
<main class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<div class="mb-8">
<a href="index-ca.html" class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined text-sm">arrow_back</span>
Tornar a l'inici
</a>
</div>
<div class="mb-16">
<h1 class="text-4xl md:text-6xl font-serif italic mb-6 text-slate-900 dark:text-white leading-tight">
Política de<br />
<span class="text-primary not-italic font-display font-black tracking-tighter">Privacitat</span>
</h1>
<p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
Com es recullen, emmagatzemen i utilitzen les dades en aquest lloc web, en compliment del Reglament General de Protecció de Dades (RGPD).
</p>
<p class="text-xs text-slate-500 dark:text-slate-500 mt-4 italic">
Última actualització: 21 de Juliol, 2026
</p>
</div>
<section class="space-y-8 mb-16">
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">1. Responsable del tractament</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 space-y-2 text-slate-700 dark:text-slate-300 leading-relaxed">
<p><strong>Identitat:</strong> Itziar Zameza García</p>
<p><strong>Correu de contacte:</strong> <a href="mailto:itziar.zameza.dev@gmail.com" class="text-primary hover:underline">itziar.zameza.dev@gmail.com</a></p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">2. Quines dades tractem?</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 space-y-3 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Aquest lloc utilitza <strong>Umami</strong>, una eina d'analítica web de codi obert allotjada al meu propi servidor. Les dades que es recullen són:</p>
<ul class="list-disc list-inside space-y-1 ml-4">
<li>Pàgines visitades i temps de permanència</li>
<li>Adreça IP (anonimitzada i truncada per Umami)</li>
<li>Tipus de navegador i sistema operatiu (User-Agent)</li>
<li>Lloc web de procedència (referrer)</li>
<li>País d'origen (derivat de la IP, no a nivell de ciutat)</li>
</ul>
<p class="pt-2"><strong>No es recullen:</strong> dades identificatives personals (nom, correu, telèfon), ni es realitza fingerprinting, ni s'utilitzen cookies.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">3. Finalitat</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Les dades s'utilitzen exclusivament per analitzar de forma agregada l'ús del lloc web i orientar millores de contingut i rendiment. <strong>No s'elaboren perfils comercials</strong> i les dades no es cedeixen ni es venen a tercers.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">4. Base jurídica</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>El tractament es basa en l'<strong>interès legítim</strong> de la responsable (article 6.1.f del RGPD): conèixer l'ús real del lloc per millorar-lo. En no utilitzar cookies ni identificadors persistents, no es requereix consentiment previ segons la normativa espanyola (LSSI-CE).</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">5. Destinataris i transferències</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Les dades <strong>no es comuniquen a tercers</strong>. Tot el processament passa al servidor privat (VPS) de la responsable, ubicat a la Unió Europea. No es realitzen transferències internacionals.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">6. Conservació</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Les dades agregades es conserven durant un màxim de <strong>12 mesos</strong> i s'eliminen automàticament. No s'elaboren perfils d'usuari.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">7. Els teus drets</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 space-y-3 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Pots exercir en qualsevol moment els drets RGPD:</p>
<ul class="list-disc list-inside space-y-1 ml-4">
<li><strong>Accés</strong> — saber quines dades tinc teves</li>
<li><strong>Rectificació</strong> — corregir dades inexactes</li>
<li><strong>Supressió</strong> — sol·licitar l'eliminació</li>
<li><strong>Oposició</strong> — oposar-te al tractament</li>
<li><strong>Limitació</strong> — restringir el processament</li>
<li><strong>Portabilitat</strong> — rebre les teves dades en format estàndard</li>
</ul>
<p>Per exercir-los, escriu a <a href="mailto:itziar.zameza.dev@gmail.com" class="text-primary hover:underline">itziar.zameza.dev@gmail.com</a>.</p>
<p class="pt-2">També pots presentar una reclamació davant l'autoritat de control:</p>
<ul class="list-disc list-inside space-y-1 ml-4">
<li>Espanya — <a href="https://www.aepd.es" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Agència Espanyola de Protecció de Dades (AEPD)</a></li>
<li>Catalunya — <a href="https://apdcat.gencat.cat" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Autoritat Catalana de Protecció de Dades (APDCAT)</a></li>
</ul>
</div>
</article>
<article>
<div class="border-l-4 border-emerald-500 pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">8. Cookies</h2>
</div>
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl text-slate-700 dark:text-slate-300 leading-relaxed flex items-start gap-3">
<span class="material-symbols-outlined text-emerald-500 mt-1 shrink-0">verified</span>
<p><strong>Aquest lloc web no utilitza cookies</strong> de cap mena (ni pròpies ni de tercers). El sistema d'analítica (Umami) és cookieless per disseny.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">9. Canvis en aquesta política</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Aquesta política pot actualitzar-se per reflectir canvis legals o tècnics. La data de l'última actualització s'indica a l'inici del document.</p>
</div>
</article>
</section>
</main>
<footer class="pb-12" id="contact">
<div class="mx-auto max-w-6xl px-6">
<div class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm">
<p>© 2026 Itziar ZG.</p>
<div class="flex gap-8">
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="https://www.linkedin.com/in/itziarzamezagarcia">LinkedIn</a>
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="https://github.com/itziarZG">GitHub</a>
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="privacidad-ca.html">Privacitat</a>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
+229
View File
@@ -0,0 +1,229 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Privacy Policy | Itziar ZG</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#8c2bee",
"background-light": "#f7f6f8",
"background-dark": "#191022",
},
fontFamily: {
display: ["Space Grotesk", "sans-serif"],
serif: ["Instrument Serif", "serif"],
},
borderRadius: {
DEFAULT: "0.5rem",
lg: "1rem",
xl: "1.5rem",
full: "9999px",
},
},
},
};
</script>
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="css/styles.css?v=1.1" />
<script
defer
src="https://stats.itziarzameza.dev/script.js"
data-website-id="8d8d648f-4a0c-4315-b287-5983ffedc8c4"
data-domains="www.itziarzameza.dev"
></script>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300">
<div class="relative min-h-screen overflow-hidden iridescent-bg flex flex-col justify-between">
<div class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50 pointer-events-none"></div>
<div class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40 pointer-events-none"></div>
<div class="layout-container flex h-full grow flex-col relative z-10">
<header class="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between">
<a href="index-en.html" class="flex items-center gap-2 group cursor-pointer">
<div class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-2xl">auto_awesome</span>
</div>
<h2 class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white">Itziar ZG</h2>
</a>
<nav class="hidden md:flex items-center gap-10 glass px-8 py-3 rounded-full">
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index-en.html">Home</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index-en.html#manifiesto">Manifesto</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index-en.html#laboratorio">Lab</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="huella.html">Footprint</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="#contact">Contact</a>
</nav>
<div class="flex items-center gap-3">
<div class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold">
<a href="privacidad.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="Español">ES</a>
<span class="text-slate-300 dark:text-slate-700">|</span>
<a href="privacidad-ca.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="Català">CA</a>
<span class="text-slate-300 dark:text-slate-700">|</span>
<span class="text-primary">EN</span>
</div>
<button class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors" id="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
<span class="material-symbols-outlined text-xl dark:hidden">dark_mode</span>
<span class="material-symbols-outlined text-xl hidden dark:block text-yellow-200">light_mode</span>
</button>
<a class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md shadow-primary/25 flex items-center justify-center" href="index-en.html#contact">
Let's talk
</a>
</div>
</header>
<main class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<div class="mb-8">
<a href="index-en.html" class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined text-sm">arrow_back</span>
Back to home
</a>
</div>
<div class="mb-16">
<h1 class="text-4xl md:text-6xl font-serif italic mb-6 text-slate-900 dark:text-white leading-tight">
Privacy<br />
<span class="text-primary not-italic font-display font-black tracking-tighter">Policy</span>
</h1>
<p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
How data is collected, stored and used on this website, in compliance with the General Data Protection Regulation (GDPR).
</p>
<p class="text-xs text-slate-500 dark:text-slate-500 mt-4 italic">
Last updated: July 21, 2026
</p>
</div>
<section class="space-y-8 mb-16">
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">1. Data Controller</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 space-y-2 text-slate-700 dark:text-slate-300 leading-relaxed">
<p><strong>Identity:</strong> Itziar Zameza García</p>
<p><strong>Contact email:</strong> <a href="mailto:itziar.zameza.dev@gmail.com" class="text-primary hover:underline">itziar.zameza.dev@gmail.com</a></p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">2. What data do we process?</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 space-y-3 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>This site uses <strong>Umami</strong>, an open-source web analytics tool self-hosted on my own server. Data collected includes:</p>
<ul class="list-disc list-inside space-y-1 ml-4">
<li>Pages visited and time spent</li>
<li>IP address (anonymized and truncated by Umami)</li>
<li>Browser type and operating system (User-Agent)</li>
<li>Referring website (referrer)</li>
<li>Country of origin (derived from IP, not at city level)</li>
</ul>
<p class="pt-2"><strong>Not collected:</strong> personally identifying data (name, email, phone), no fingerprinting, no cookies of any kind.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">3. Purpose</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Data is used exclusively to analyze aggregate website usage and guide content and performance improvements. <strong>No commercial profiles are built</strong> and data is not shared with or sold to third parties.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">4. Legal basis</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Processing is based on the <strong>legitimate interest</strong> of the data controller (Article 6.1.f GDPR): understanding actual site usage to improve it. Since no cookies or persistent identifiers are used, prior consent is not required under Spanish law (LSSI-CE).</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">5. Recipients and transfers</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Data is <strong>not shared with third parties</strong>. All processing occurs on the controller's private server (VPS), located in the European Union. No international transfers are performed.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">6. Retention</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Aggregated data is retained for a maximum of <strong>12 months</strong> and then automatically deleted. No user profiles are built.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">7. Your rights</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 space-y-3 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>You can exercise your GDPR rights at any time:</p>
<ul class="list-disc list-inside space-y-1 ml-4">
<li><strong>Access</strong> — know what data I have about you</li>
<li><strong>Rectification</strong> — correct inaccurate data</li>
<li><strong>Erasure</strong> — request deletion</li>
<li><strong>Objection</strong> — object to processing</li>
<li><strong>Restriction</strong> — restrict processing</li>
<li><strong>Portability</strong> — receive your data in a standard format</li>
</ul>
<p>To exercise them, write to <a href="mailto:itziar.zameza.dev@gmail.com" class="text-primary hover:underline">itziar.zameza.dev@gmail.com</a>.</p>
<p class="pt-2">You may also lodge a complaint with the supervisory authority:</p>
<ul class="list-disc list-inside space-y-1 ml-4">
<li>Spain — <a href="https://www.aepd.es" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Spanish Data Protection Agency (AEPD)</a></li>
<li>Catalonia — <a href="https://apdcat.gencat.cat" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Catalan Data Protection Authority (APDCAT)</a></li>
</ul>
</div>
</article>
<article>
<div class="border-l-4 border-emerald-500 pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">8. Cookies</h2>
</div>
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl text-slate-700 dark:text-slate-300 leading-relaxed flex items-start gap-3">
<span class="material-symbols-outlined text-emerald-500 mt-1 shrink-0">verified</span>
<p><strong>This website does not use any cookies</strong> (neither first-party nor third-party). The analytics system (Umami) is cookieless by design.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">9. Changes to this policy</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>This policy may be updated to reflect legal or technical changes. The date of the last update is shown at the top of the document.</p>
</div>
</article>
</section>
</main>
<footer class="pb-12" id="contact">
<div class="mx-auto max-w-6xl px-6">
<div class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm">
<p>© 2026 Itziar ZG.</p>
<div class="flex gap-8">
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="https://www.linkedin.com/in/itziarzamezagarcia">LinkedIn</a>
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="https://github.com/itziarZG">GitHub</a>
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="privacidad-en.html">Privacy</a>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
+229
View File
@@ -0,0 +1,229 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Política de Privacidad | Itziar ZG</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#8c2bee",
"background-light": "#f7f6f8",
"background-dark": "#191022",
},
fontFamily: {
display: ["Space Grotesk", "sans-serif"],
serif: ["Instrument Serif", "serif"],
},
borderRadius: {
DEFAULT: "0.5rem",
lg: "1rem",
xl: "1.5rem",
full: "9999px",
},
},
},
};
</script>
<link rel="alternate" hreflang="es" href="https://www.itziarzameza.dev/privacidad.html" />
<link rel="alternate" hreflang="ca" href="https://www.itziarzameza.dev/privacidad-ca.html" />
<link rel="alternate" hreflang="en" href="https://www.itziarzameza.dev/privacidad-en.html" />
<link rel="preload" href="fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="css/styles.css?v=1.1" />
<script
defer
src="https://stats.itziarzameza.dev/script.js"
data-website-id="8d8d648f-4a0c-4315-b287-5983ffedc8c4"
data-domains="www.itziarzameza.dev"
></script>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300">
<div class="relative min-h-screen overflow-hidden iridescent-bg flex flex-col justify-between">
<div class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50 pointer-events-none"></div>
<div class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40 pointer-events-none"></div>
<div class="layout-container flex h-full grow flex-col relative z-10">
<header class="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between">
<a href="index.html" class="flex items-center gap-2 group cursor-pointer">
<div class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-2xl">auto_awesome</span>
</div>
<h2 class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white">Itziar ZG</h2>
</a>
<nav class="hidden md:flex items-center gap-10 glass px-8 py-3 rounded-full">
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index.html">Inicio</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index.html#manifiesto">Manifiesto</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="index.html#laboratorio">Laboratorio</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="huella.html">Huella</a>
<a class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300" href="#contact">Contacto</a>
</nav>
<div class="flex items-center gap-3">
<div class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold">
<span class="text-primary">ES</span>
<span class="text-slate-300 dark:text-slate-700">|</span>
<a href="privacidad-ca.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="Català">CA</a>
<span class="text-slate-300 dark:text-slate-700">|</span>
<a href="privacidad-en.html" class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" title="English">EN</a>
</div>
<button class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors" id="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
<span class="material-symbols-outlined text-xl dark:hidden">dark_mode</span>
<span class="material-symbols-outlined text-xl hidden dark:block text-yellow-200">light_mode</span>
</button>
<a class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md shadow-primary/25 flex items-center justify-center" href="index.html#contact">
Hablemos
</a>
</div>
</header>
<main class="mx-auto max-w-4xl px-6 py-12 md:py-20 grow">
<div class="mb-8">
<a href="index.html" class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined text-sm">arrow_back</span>
Volver al inicio
</a>
</div>
<div class="mb-16">
<h1 class="text-4xl md:text-6xl font-serif italic mb-6 text-slate-900 dark:text-white leading-tight">
Política de<br />
<span class="text-primary not-italic font-display font-black tracking-tighter">Privacidad</span>
</h1>
<p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
Cómo se recogen, almacenan y utilizan los datos en este sitio web, en cumplimiento del Reglamento General de Protección de Datos (RGPD).
</p>
<p class="text-xs text-slate-500 dark:text-slate-500 mt-4 italic">
Última actualización: 21 de Julio, 2026
</p>
</div>
<section class="space-y-8 mb-16">
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">1. Responsable del tratamiento</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 space-y-2 text-slate-700 dark:text-slate-300 leading-relaxed">
<p><strong>Identidad:</strong> Itziar Zameza García</p>
<p><strong>Correo de contacto:</strong> <a href="mailto:itziar.zameza.dev@gmail.com" class="text-primary hover:underline">itziar.zameza.dev@gmail.com</a></p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">2. ¿Qué datos tratamos?</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 space-y-3 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Este sitio utiliza <strong>Umami</strong>, una herramienta de analítica web de código abierto autoalojada en mi propio servidor. Los datos que se recogen son:</p>
<ul class="list-disc list-inside space-y-1 ml-4">
<li>Páginas visitadas y tiempo de permanencia</li>
<li>Dirección IP (anonimizada y truncada por Umami)</li>
<li>Tipo de navegador y sistema operativo (User-Agent)</li>
<li>Sitio web de procedencia (referrer)</li>
<li>País de origen (derivado de la IP, no a nivel de ciudad)</li>
</ul>
<p class="pt-2"><strong>No se recogen:</strong> datos identificativos personales (nombre, email, teléfono), ni se realiza fingerprinting, ni se utilizan cookies.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">3. Finalidad</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Los datos se utilizan exclusivamente para analizar de forma agregada el uso del sitio web y orientar mejoras de contenido y rendimiento. <strong>No se elaboran perfiles comerciales</strong> y los datos no se ceden ni venden a terceros.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">4. Base jurídica</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>El tratamiento se basa en el <strong>interés legítimo</strong> del responsable (artículo 6.1.f del RGPD): conocer el uso real del sitio para mejorarlo. Al no utilizar cookies ni identificadores persistentes, no se requiere consentimiento previo según la normativa española (LSSI-CE).</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">5. Destinatarios y transferencias</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Los datos <strong>no se comunican a terceros</strong>. Todo el procesamiento ocurre en el servidor privado (VPS) de la responsable, ubicado en la Unión Europea. No se realizan transferencias internacionales.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">6. Conservación</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Los datos agregados se conservan durante un máximo de <strong>12 meses</strong> y se eliminan automáticamente. No se elaboran perfiles de usuario.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">7. Tus derechos</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 space-y-3 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Puedes ejercer en cualquier momento los derechos RGPD:</p>
<ul class="list-disc list-inside space-y-1 ml-4">
<li><strong>Acceso</strong> — saber qué datos tengo tuyos</li>
<li><strong>Rectificación</strong> — corregir datos inexactos</li>
<li><strong>Supresión</strong> — solicitar eliminación</li>
<li><strong>Oposición</strong> — oponerte al tratamiento</li>
<li><strong>Limitación</strong> — restringir el procesamiento</li>
<li><strong>Portabilidad</strong> — recibir tus datos en formato estándar</li>
</ul>
<p>Para ejercerlos, escribe a <a href="mailto:itziar.zameza.dev@gmail.com" class="text-primary hover:underline">itziar.zameza.dev@gmail.com</a>.</p>
<p class="pt-2">También puedes presentar una reclamación ante la autoridad de control:</p>
<ul class="list-disc list-inside space-y-1 ml-4">
<li>España — <a href="https://www.aepd.es" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Agencia Española de Protección de Datos (AEPD)</a></li>
<li>Cataluña — <a href="https://apdcat.gencat.cat" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">Autoritat Catalana de Protecció de Dades (APDCAT)</a></li>
</ul>
</div>
</article>
<article>
<div class="border-l-4 border-emerald-500 pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">8. Cookies</h2>
</div>
<div class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl text-slate-700 dark:text-slate-300 leading-relaxed flex items-start gap-3">
<span class="material-symbols-outlined text-emerald-500 mt-1 shrink-0">verified</span>
<p><strong>Este sitio web no utiliza cookies</strong> de ningún tipo (ni propias ni de terceros). El sistema de analítica (Umami) es cookieless por diseño.</p>
</div>
</article>
<article>
<div class="border-l-4 border-primary pl-6 mb-4">
<h2 class="text-2xl md:text-3xl font-serif italic dark:text-white">9. Cambios en esta política</h2>
</div>
<div class="p-6 glass rounded-2xl border border-white/10 text-slate-700 dark:text-slate-300 leading-relaxed">
<p>Esta política puede actualizarse para reflejar cambios legales o técnicos. La fecha de la última actualización se indica al inicio del documento.</p>
</div>
</article>
</section>
</main>
<footer class="pb-12" id="contact">
<div class="mx-auto max-w-6xl px-6">
<div class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm">
<p>© 2026 Itziar ZG.</p>
<div class="flex gap-8">
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="https://www.linkedin.com/in/itziarzamezagarcia">LinkedIn</a>
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="https://github.com/itziarZG">GitHub</a>
<a class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" href="privacidad.html">Privacidad</a>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>