From 06274b89bfe62f9feba425e543aadef7b294535a Mon Sep 17 00:00:00 2001
From: giarf <gabriel@giarf.cl>
Date: Wed, 1 Apr 2026 03:30:59 -0300
Subject: [PATCH] feat: V3 landing page

---
 src/pages/index.astro |  15 +++++
 src/styles/global.css | 124 ++++++++++++++++++++++++++----------------
 2 files changed, 93 insertions(+), 46 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8a35c9f..bb16a86 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -313,6 +313,21 @@ const avoids = [
             Slaksis puede participar en los componentes que normalmente quedan dispersos entre varios actores. Eso reduce
             pérdida de contexto y mejora la continuidad técnica.
           </p>
+
+          <article class="backup-note">
+            <img
+              class="backup-note__icon"
+              src="https://cdn.jsdelivr.net/gh/selfhst/icons@main/png/cloudflare.png"
+              alt="Cloudflare"
+              loading="lazy"
+              width="40"
+              height="40"
+            />
+            <div>
+              <strong>Respaldos con Cloudflare R2</strong>
+              <p>Se pueden implementar backups sobre Cloudflare R2 para reforzar continuidad, resguardo y recuperación.</p>
+            </div>
+          </article>
         </div>
 
         <ul class="coverage__list">
diff --git a/src/styles/global.css b/src/styles/global.css
index 973d186..84983dd 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -73,14 +73,14 @@ img {
 }
 
 .hero {
-  padding: max(20px, env(safe-area-inset-top)) 0 4rem;
+  padding: max(18px, env(safe-area-inset-top)) 0 3rem;
   color: var(--text-inverse);
   border-bottom: 1px solid var(--line-inverse);
 }
 
 .hero__inner {
-  min-height: calc(100svh - 4rem);
-  min-height: calc(100dvh - 4rem);
+  min-height: calc(100svh - 3rem);
+  min-height: calc(100dvh - 3rem);
   display: grid;
   grid-template-rows: auto 1fr;
 }
@@ -90,7 +90,7 @@ img {
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 1.5rem;
-  padding: 0.15rem 0 1.5rem;
+  padding: 0.1rem 0 1rem;
 }
 
 .brand {
@@ -159,9 +159,9 @@ img {
 .hero__grid {
   display: grid;
   grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.78fr);
-  gap: clamp(2rem, 4vw, 4rem);
+  gap: clamp(1.5rem, 3.6vw, 3rem);
   align-items: end;
-  padding: clamp(3rem, 9vh, 6rem) 0 0;
+  padding: clamp(2rem, 7vh, 4rem) 0 0;
 }
 
 .eyebrow {
@@ -188,10 +188,10 @@ img {
 
 .hero__lead {
   max-width: 60ch;
-  margin-top: 1.35rem;
+  margin-top: 1rem;
   color: rgba(233, 240, 245, 0.8);
   font-size: clamp(1rem, 1.15vw, 1.1rem);
-  line-height: 1.82;
+  line-height: 1.72;
 }
 
 .hero__actions,
@@ -202,15 +202,15 @@ img {
 }
 
 .hero__actions {
-  margin-top: 1.8rem;
+  margin-top: 1.35rem;
 }
 
 .hero__microcopy {
   max-width: 58ch;
-  margin-top: 1rem;
+  margin-top: 0.75rem;
   color: rgba(233, 240, 245, 0.68);
   font-size: 0.95rem;
-  line-height: 1.72;
+  line-height: 1.62;
 }
 
 .button {
@@ -259,7 +259,7 @@ img {
 }
 
 .hero__aside {
-  padding: 1.75rem 0 0 2rem;
+  padding: 1.2rem 0 0 1.6rem;
   border-left: 1px solid rgba(233, 240, 245, 0.16);
 }
 
@@ -281,22 +281,22 @@ img {
 }
 
 .aside__body {
-  margin-top: 1rem;
+  margin-top: 0.75rem;
   color: rgba(233, 240, 245, 0.76);
-  line-height: 1.8;
+  line-height: 1.68;
 }
 
 .aside__details {
   display: grid;
   gap: 0;
-  margin-top: 1.6rem;
+  margin-top: 1.15rem;
   border-top: 1px solid rgba(233, 240, 245, 0.12);
 }
 
 .aside__details div {
   display: grid;
   gap: 0.35rem;
-  padding: 1rem 0;
+  padding: 0.8rem 0;
   border-bottom: 1px solid rgba(233, 240, 245, 0.12);
 }
 
@@ -315,7 +315,7 @@ img {
 }
 
 .section {
-  padding: clamp(4.5rem, 9vw, 7rem) 0;
+  padding: clamp(3.3rem, 6.5vw, 5rem) 0;
   background: rgba(255, 255, 255, 0.98);
   border-bottom: 1px solid var(--line);
 }
@@ -338,7 +338,7 @@ img {
 
 .section-intro {
   max-width: 780px;
-  margin-bottom: 2.8rem;
+  margin-bottom: 2rem;
 }
 
 .section-intro h2,
@@ -355,9 +355,9 @@ img {
 .coverage__content p:last-child,
 .institutional__block p:last-child,
 .cta p {
-  margin-top: 1.1rem;
+  margin-top: 0.85rem;
   color: var(--text-soft);
-  line-height: 1.8;
+  line-height: 1.72;
 }
 
 .section-intro p:last-child,
@@ -383,7 +383,7 @@ img {
 .institutional,
 .simple-grid {
   display: grid;
-  gap: 1.2rem;
+  gap: 0.95rem;
 }
 
 .value-grid,
@@ -415,11 +415,11 @@ img {
 
 .info-card,
 .service-card {
-  padding: 1.45rem;
+  padding: 1.2rem;
 }
 
 .simple-card {
-  padding: 1.15rem 1.2rem;
+  padding: 1rem 1.05rem;
 }
 
 .simple-card--strong {
@@ -429,7 +429,7 @@ img {
 .info-card h3,
 .service-card h3,
 .process-card h3 {
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.55rem;
   font-size: 1.08rem;
   font-weight: 750;
   letter-spacing: -0.02em;
@@ -446,7 +446,7 @@ img {
 .site-footer__copy,
 .site-footer__meta span {
   color: var(--text-soft);
-  line-height: 1.75;
+  line-height: 1.66;
 }
 
 .service-grid {
@@ -454,7 +454,7 @@ img {
 }
 
 .project-item {
-  padding: 1.15rem 1.2rem;
+  padding: 0.95rem 1rem;
 }
 
 .simple-card p,
@@ -467,14 +467,14 @@ img {
 .process-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 1.2rem;
+  gap: 0.95rem;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
 .process-card {
-  padding: 1.4rem;
+  padding: 1.15rem;
 }
 
 .process-card__step {
@@ -489,7 +489,7 @@ img {
 .coverage {
   display: grid;
   grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
-  gap: 1.5rem;
+  gap: 1.1rem;
   align-items: start;
 }
 
@@ -501,11 +501,43 @@ img {
   max-width: 58ch;
 }
 
+.backup-note {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.85rem;
+  align-items: start;
+  margin-top: 1rem;
+  padding: 0.9rem 1rem;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: var(--shadow-soft);
+}
+
+.backup-note__icon {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.backup-note strong {
+  display: block;
+  color: var(--text);
+  font-size: 0.98rem;
+  font-weight: 800;
+}
+
+.backup-note p {
+  margin-top: 0.3rem;
+  color: var(--text-soft);
+  font-size: 0.94rem;
+  line-height: 1.58;
+}
+
 .coverage__item {
   display: flex;
   align-items: center;
-  min-height: 88px;
-  padding: 1rem 1.15rem;
+  min-height: 76px;
+  padding: 0.9rem 1rem;
   font-weight: 700;
 }
 
@@ -514,7 +546,7 @@ img {
 }
 
 .institutional__block {
-  padding: 1.8rem;
+  padding: 1.45rem;
 }
 
 .institutional__block--accent {
@@ -530,7 +562,7 @@ img {
 .cta {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.82fr);
-  gap: 1.5rem;
+  gap: 1.1rem;
   align-items: start;
 }
 
@@ -545,7 +577,7 @@ img {
 }
 
 .cta__panel {
-  padding: 1.6rem;
+  padding: 1.3rem;
   background: rgba(255, 255, 255, 0.05);
   border-color: rgba(233, 240, 245, 0.14);
   box-shadow: none;
@@ -560,15 +592,15 @@ img {
 }
 
 .cta__panel p {
-  margin-top: 0.95rem;
+  margin-top: 0.75rem;
 }
 
 .cta__actions {
-  margin-top: 1.4rem;
+  margin-top: 1.05rem;
 }
 
 .site-footer {
-  padding: 1.5rem 0 2rem;
+  padding: 1.15rem 0 1.5rem;
   background: #f2f6f9;
   border-top: 1px solid rgba(19, 35, 52, 0.08);
 }
@@ -638,11 +670,11 @@ img {
   }
 
   .hero__grid {
-    padding-top: 2.5rem;
+    padding-top: 2rem;
   }
 
   .hero__aside {
-    padding: 1.5rem 0 0;
+    padding: 1.2rem 0 0;
     border-left: 0;
     border-top: 1px solid rgba(233, 240, 245, 0.16);
   }
@@ -663,12 +695,12 @@ img {
 
 @media (min-width: 981px) and (max-height: 920px) {
   .hero {
-    padding-bottom: 2.5rem;
+    padding-bottom: 2rem;
   }
 
   .hero__inner {
-    min-height: calc(100svh - 2.5rem);
-    min-height: calc(100dvh - 2.5rem);
+    min-height: calc(100svh - 2rem);
+    min-height: calc(100dvh - 2rem);
   }
 
   .site-header {
@@ -676,7 +708,7 @@ img {
   }
 
   .hero__grid {
-    padding-top: 2rem;
+    padding-top: 1.5rem;
     gap: 2rem;
   }
 
@@ -709,7 +741,7 @@ img {
   }
 
   .hero {
-    padding-bottom: 2.5rem;
+    padding-bottom: 1.75rem;
   }
 
   .hero__inner {
@@ -718,7 +750,7 @@ img {
 
   .hero__grid {
     gap: 1.75rem;
-    padding-top: 2rem;
+    padding-top: 1.35rem;
   }
 
   .hero h1 {
@@ -728,7 +760,7 @@ img {
 
   .section-intro,
   .coverage__content {
-    margin-bottom: 2rem;
+    margin-bottom: 1.5rem;
   }
 
   .value-grid,