From c7083e65923ff9d37c2f502efa5b83606a6ca81d Mon Sep 17 00:00:00 2001
From: Administrator <tecnica@eldia.com>
Date: Tue, 2 Dec 2025 15:09:12 +0000
Subject: [PATCH] docs: update home

---
 home.html | 114 +++++++++++++++++++++++++++---------------------------
 1 file changed, 56 insertions(+), 58 deletions(-)

diff --git a/home.html b/home.html
index a1cbe52..cc67190 100644
--- a/home.html
+++ b/home.html
@@ -2,62 +2,57 @@
 title: Home
 description: Inicio
 published: true
-date: 2025-12-02T15:06:06.184Z
+date: 2025-12-02T15:09:11.430Z
 tags: 
 editor: code
 dateCreated: 2025-12-01T16:00:56.996Z
 -->
 
-<div style="font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #444; padding: 40px 20px;">
+<div style="font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #444; padding: 20px; max-width: 1100px; margin: 0 auto;">
 
-    <!-- ENCABEZADO -->
-    <div style="text-align: center; margin-bottom: 60px;">
+    <!-- ENCABEZADO COMPACTO -->
+    <div style="text-align: center; margin-bottom: 35px;">
         <!-- Título con gradiente -->
-        <h1 style="font-size: 3.5rem; font-weight: 800; margin: 0; letter-spacing: -1px; line-height: 1.2;">
+        <h1 style="font-size: 3rem; font-weight: 800; margin: 0; letter-spacing: -1px; line-height: 1.1;">
             <span style="background: -webkit-linear-gradient(45deg, #1976d2, #42a5f5); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Hola.</span>
             Te damos la bienvenida.
         </h1>
         
-        <div style="width: 80px; height: 6px; background: #e3f2fd; margin: 20px auto; border-radius: 10px;"></div>
+        <!-- Línea decorativa más fina y pegada -->
+        <div style="width: 60px; height: 5px; background: #e3f2fd; margin: 15px auto; border-radius: 10px;"></div>
         
-        <p style="font-size: 1.3rem; color: #777; max-width: 600px; margin: 0 auto; font-weight: 300;">
-            Estás en el centro de conocimiento de <strong>El Día</strong>. <br>
+        <p style="font-size: 1.15rem; color: #777; max-width: 600px; margin: 0 auto; font-weight: 300; line-height: 1.4;">
+            Estás en el centro de conocimiento de <strong>El Día</strong>.
             Todo lo que necesitás saber, en un solo lugar.
         </p>
     </div>
 
     <!-- CONTENEDOR DE TARJETAS -->
-    <div style="text-align: center; padding: 40px 20px; font-family: sans-serif;">
+    <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;">
 
-    <h1 style="font-size: 2.8rem; color: #333; margin-bottom: 10px;">Hola, Te damos la bienvenida.</h1>
-    <p style="font-size: 1.2rem; color: #777; margin-bottom: 60px;">Estás en la Wiki interna de El Día.</p>
-
-    <!-- 3 COLUMNAS DE CARACTERÍSTICAS (SIN ENLACES) -->
-    <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;">
-
-        <!-- COLUMNA 1 -->
-        <div style="flex: 1; min-width: 250px; max-width: 300px; padding: 20px;">
-            <div style="font-size: 50px; margin-bottom: 20px;">🔍</div>
-            <h3 style="color: #1976d2; margin-bottom: 10px;">Buscá</h3>
-            <p style="color: #666; line-height: 1.5;">
+        <!-- TARJETA 1 -->
+        <div class="info-card">
+            <div class="icon-circle">🔍</div>
+            <h3 class="card-title">Buscá</h3>
+            <p class="card-text">
                 Encontrá rápidamente manuales, IPs, configuraciones y guías usando el buscador superior.
             </p>
         </div>
 
-        <!-- COLUMNA 2 -->
-        <div style="flex: 1; min-width: 250px; max-width: 300px; padding: 20px; border-left: 1px solid #eee; border-right: 1px solid #eee;">
-            <div style="font-size: 50px; margin-bottom: 20px;">📖</div>
-            <h3 style="color: #1976d2; margin-bottom: 10px;">Aprendé</h3>
-            <p style="color: #666; line-height: 1.5;">
+        <!-- TARJETA 2 -->
+        <div class="info-card">
+            <div class="icon-circle">📖</div>
+            <h3 class="card-title">Aprendé</h3>
+            <p class="card-text">
                 Accedé a documentación detallada sobre Sistemas, Redacción y Técnica para resolver dudas.
             </p>
         </div>
 
-        <!-- COLUMNA 3 -->
-        <div style="flex: 1; min-width: 250px; max-width: 300px; padding: 20px;">
-            <div style="font-size: 50px; margin-bottom: 20px;">🚀</div>
-            <h3 style="color: #1976d2; margin-bottom: 10px;">Mejorá</h3>
-            <p style="color: #666; line-height: 1.5;">
+        <!-- TARJETA 3 -->
+        <div class="info-card">
+            <div class="icon-circle">🚀</div>
+            <h3 class="card-title">Mejorá</h3>
+            <p class="card-text">
                 Optimizamos nuestros flujos de trabajo manteniendo la información accesible y estandarizada.
             </p>
         </div>
@@ -66,57 +61,60 @@ dateCreated: 2025-12-01T16:00:56.996Z
 
 </div>
 
-<!-- Ajuste para móviles (quita los bordes en pantallas chicas) -->
-<style>
-    @media (max-width: 800px) {
-        div[style*="border-left"] { border: none !important; }
-    }
-</style>
-
-    </div>
-
-</div>
-
-<!-- ESTILOS CSS AVANZADOS -->
+<!-- ESTILOS CSS (Optimizados para menos espacio) -->
 <style>
     /* Diseño de las tarjetas */
     .info-card {
         flex: 1;
-        min-width: 280px;
+        min-width: 260px;
         max-width: 320px;
         background: white;
-        padding: 40px 30px;
-        border-radius: 20px;
+        padding: 25px 20px; /* Padding reducido para compactar */
+        border-radius: 16px;
         text-align: center;
-        /* Sombra suave y elegante */
-        box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
-        border: 1px solid rgba(0,0,0,0.02);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
+        border: 1px solid rgba(0,0,0,0.03);
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
     }
 
     /* Efecto al pasar el mouse */
     .info-card:hover {
-        transform: translateY(-10px);
-        box-shadow: 0 20px 40px rgba(25, 118, 210, 0.15);
+        transform: translateY(-5px);
+        box-shadow: 0 15px 30px rgba(25, 118, 210, 0.12);
     }
 
     /* Círculo detrás de los iconos */
     .icon-circle {
-        font-size: 40px;
-        width: 80px;
-        height: 80px;
-        line-height: 80px;
-        background: #e3f2fd; /* Azul muy clarito */
+        font-size: 32px; /* Icono ajustado */
+        width: 60px;     /* Círculo más chico */
+        height: 60px;
+        line-height: 60px;
+        background: #e3f2fd; 
         border-radius: 50%;
-        margin: 0 auto 20px auto;
+        margin: 0 auto 15px auto; /* Menos margen abajo */
         display: flex;
         align-items: center;
         justify-content: center;
         user-select: none;
     }
 
+    .card-title {
+        color: #222;
+        font-size: 1.25rem;
+        margin: 0 0 10px 0;
+        font-weight: 700;
+    }
+
+    .card-text {
+        color: #666; 
+        line-height: 1.5; 
+        margin: 0; 
+        font-size: 0.95rem;
+    }
+
     /* Ajuste para móviles */
     @media (max-width: 600px) {
-        .info-card { margin-bottom: 20px; max-width: 100%; }
+        .info-card { margin-bottom: 15px; max-width: 100%; }
+        h1 { font-size: 2.5rem !important; }
     }
 </style>
\ No newline at end of file