From 5ad94f08cb29953854fe3e87dd1297c20f654ae2 Mon Sep 17 00:00:00 2001 From: CodeAriCos28 Date: Sat, 7 Mar 2026 18:52:28 -0400 Subject: [PATCH 1/4] mejora de la ruta del logo --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index f8608a5..30eb38d 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ DerejSoft - Innovación en Desarrollo de Software - + Date: Sat, 7 Mar 2026 18:52:35 -0400 Subject: [PATCH 2/4] mejora de la ruta del logo --- nosotros2.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nosotros2.html b/nosotros2.html index 84b0716..f4a6e26 100644 --- a/nosotros2.html +++ b/nosotros2.html @@ -4,7 +4,7 @@ Nosotros - DerejSoft - + Date: Sat, 7 Mar 2026 19:23:30 -0400 Subject: [PATCH 3/4] mejora del responsive tabla de contenido y centrar el h1 --- Documentos_Legales/politica_privacidad.html | 1034 ++++--------------- 1 file changed, 180 insertions(+), 854 deletions(-) diff --git a/Documentos_Legales/politica_privacidad.html b/Documentos_Legales/politica_privacidad.html index 16e36b7..7e47fd9 100644 --- a/Documentos_Legales/politica_privacidad.html +++ b/Documentos_Legales/politica_privacidad.html @@ -2,7 +2,7 @@ - + Política de Privacidad - DerejSoft @@ -37,19 +37,6 @@ display: inline-block; } - /* Clase para lectores de pantalla */ - .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; - } - :root { /* Paleta de colores Premium */ --bg-dark: #0f172a; @@ -60,7 +47,6 @@ --primary-glow: rgba(99, 102, 241, 0.5); --secondary: #ec4899; --accent: #10b981; - --warning: #f59e0b; /* Gradientes */ --gradient-main: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); @@ -92,18 +78,16 @@ --ease-fluid: cubic-bezier(0.4, 0, 0.2, 1); } - html { - font-size: 16px; - } - body { font-family: var(--font-body); background: var(--bg-dark); color: var(--text-main); line-height: 1.7; overflow-x: hidden; - width: 100%; - min-height: 100vh; + } + + /* Fondo animado fluido */ + body { background-color: var(--bg-dark); background-image: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.08), transparent 25%), @@ -117,7 +101,6 @@ padding: var(--container-padding); position: relative; z-index: 2; - width: 100%; } .gradient-text { @@ -133,7 +116,6 @@ opacity: 0; transform: translateY(30px); animation: fadeInUp 0.8s var(--ease-fluid) forwards; - animation-play-state: paused; } @keyframes fadeInUp { @@ -154,7 +136,6 @@ z-index: 1000; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-light); } @@ -166,7 +147,6 @@ padding: 0 24px; max-width: var(--container-width); margin: 0 auto; - width: 100%; } .logo { @@ -178,8 +158,6 @@ font-size: 1.5rem; color: var(--text-main); text-decoration: none; - z-index: 1001; - flex-shrink: 0; } .logo-img { @@ -187,14 +165,12 @@ height: 42px; filter: drop-shadow(0 0 8px var(--primary-glow)); } - .logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; color: var(--text-main); } - .logo-text span { color: var(--primary); } @@ -244,43 +220,26 @@ border: none; cursor: pointer; gap: 6px; - z-index: 1001; - padding: 10px; - margin-right: -10px; } - .menu-toggle span { width: 28px; height: 2px; background: var(--text-main); border-radius: 2px; - transition: all 0.3s ease; - } - - .menu-toggle.active span:nth-child(1) { - transform: rotate(45deg) translate(6px, 6px); - } - - .menu-toggle.active span:nth-child(2) { - opacity: 0; - } - - .menu-toggle.active span:nth-child(3) { - transform: rotate(-45deg) translate(6px, -6px); } /* WhatsApp Float */ .whatsapp-float { position: fixed; - bottom: 20px; - right: 20px; + bottom: 30px; + right: 30px; z-index: 999; } .whatsapp-float a { display: flex; - width: 56px; - height: 56px; + width: 60px; + height: 60px; background: #25d366; border-radius: 50%; align-items: center; @@ -294,9 +253,8 @@ transform: scale(1.1) rotate(10deg); box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6); } - .whatsapp-float i { - font-size: 28px; + font-size: 32px; color: white; text-decoration: none; } @@ -305,7 +263,7 @@ HERO SECTION ========================================= */ .hero-modern { - min-height: 50vh; + min-height: 60vh; display: flex; align-items: center; justify-content: center; @@ -340,19 +298,20 @@ height: 100%; overflow: hidden; z-index: 0; - mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%); - -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%); + mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%); + -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%); } .tech-icon { position: absolute; - font-size: 2rem; + font-size: 2.5rem; bottom: -100px; animation: floatUp 20s linear infinite; filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.4)); opacity: 0.3; } + /* Posiciones aleatorias */ .tech-icon:nth-child(odd) { left: 10%; animation-duration: 25s; } .tech-icon:nth-child(even) { left: 80%; animation-duration: 18s; } .tech-icon:nth-child(3n) { left: 45%; animation-duration: 22s; color: #10b981; } @@ -369,8 +328,6 @@ max-width: 800px; z-index: 2; position: relative; - padding: 0 20px; - width: 100%; } .hero-badge { @@ -381,59 +338,52 @@ background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 100px; - font-size: 0.85rem; + font-size: 0.9rem; color: #34d399; margin-bottom: 24px; backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); } .hero-title { font-family: var(--font-heading); - font-size: clamp(1.75rem, 5vw, 3.5rem); + font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; - line-height: 1.15; + line-height: 1.1; margin-bottom: 24px; } .hero-subtitle { - font-size: clamp(0.95rem, 2vw, 1.1rem); + font-size: 1.1rem; color: var(--text-muted); margin-bottom: 30px; - line-height: 1.6; } /* ========================================= - PRIVACY LAYOUT + PRIVACY LAYOUT (GRID SIDEBAR + CONTENT) ========================================= */ .privacy-layout { display: grid; grid-template-columns: 280px 1fr; gap: 40px; position: relative; - margin-top: 40px; - width: 100%; } /* Sidebar Sticky */ .sticky-sidebar { position: sticky; - top: calc(var(--header-height) + 20px); + top: calc(var(--header-height) + 40px); height: fit-content; background: var(--bg-card); backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-glass); - max-height: calc(100vh - var(--header-height) - 40px); - overflow-y: auto; } .sidebar-title { font-family: var(--font-heading); - font-size: 1.1rem; + font-size: 1.2rem; margin-bottom: 20px; color: var(--text-main); border-bottom: 1px solid var(--border-light); @@ -445,14 +395,14 @@ } .toc-list li { - margin-bottom: 4px; + margin-bottom: 8px; } .toc-list a { display: block; color: var(--text-muted); text-decoration: none; - font-size: 0.85rem; + font-size: 0.9rem; padding: 8px 12px; border-radius: 8px; transition: all 0.3s ease; @@ -469,19 +419,16 @@ .privacy-content { display: flex; flex-direction: column; - gap: 32px; - width: 100%; - min-width: 0; + gap: 40px; } .last-updated { font-size: 0.9rem; color: var(--text-muted); - margin-bottom: 10px; + margin-bottom: 20px; display: flex; align-items: center; gap: 8px; - flex-wrap: wrap; } /* Section Styling */ @@ -489,11 +436,10 @@ background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); - padding: 32px; + padding: 40px; position: relative; - transition: 0.4s var(--ease-fluid); - width: 100%; overflow: hidden; + transition: 0.4s var(--ease-fluid); } .privacy-section:hover { @@ -501,6 +447,7 @@ box-shadow: 0 10px 40px rgba(0,0,0,0.2); } + /* Decorative gradient line for sections */ .privacy-section::before { content: ''; position: absolute; @@ -519,24 +466,21 @@ .privacy-section h2 { font-family: var(--font-heading); - font-size: clamp(1.25rem, 3vw, 1.6rem); + font-size: 1.8rem; margin-bottom: 20px; color: var(--text-main); display: flex; align-items: center; gap: 12px; - word-wrap: break-word; - line-height: 1.3; } .privacy-section h2 i { color: var(--accent); - font-size: 1.3rem; - flex-shrink: 0; + font-size: 1.4rem; } .privacy-section h3 { - font-size: 1.1rem; + font-size: 1.2rem; color: var(--primary); margin: 20px 0 10px; } @@ -545,11 +489,6 @@ color: var(--text-muted); margin-bottom: 15px; text-align: justify; - word-wrap: break-word; - overflow-wrap: break-word; - hyphens: auto; - font-size: clamp(0.9rem, 2vw, 1rem); - line-height: 1.7; } .privacy-section ul, .privacy-section ol { @@ -561,14 +500,13 @@ .privacy-section li { margin-bottom: 8px; padding-left: 8px; - font-size: clamp(0.9rem, 2vw, 1rem); } .privacy-section strong { color: #e2e8f0; } - /* Internal Sub-Cards */ + /* Sub-cards */ .sub-card { background: rgba(255,255,255,0.05); border: 1px solid var(--border-light); @@ -600,7 +538,6 @@ display: flex; align-items: center; gap: 8px; - flex-wrap: wrap; } .highlight-box p { @@ -626,7 +563,6 @@ margin: 20px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; - width: 100%; border-radius: 12px; border: 1px solid var(--border-light); } @@ -637,12 +573,6 @@ min-width: 500px; } - thead, tbody, tr { - display: table; - width: 100%; - table-layout: fixed; - } - th, td { padding: 14px 12px; text-align: left; @@ -659,10 +589,6 @@ letter-spacing: 0.05em; } - tr { - transition: background 0.2s; - } - tr:hover { background-color: rgba(255, 255, 255, 0.02); } @@ -671,26 +597,23 @@ border-bottom: none; } - /* Contact Section */ + /* Contact Section Styling */ .contact-grid { display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 15px; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; margin-top: 20px; } .contact-card { background: rgba(255,255,255,0.05); - padding: 20px 15px; + padding: 20px; border-radius: 16px; text-align: center; transition: 0.3s; border: 1px solid var(--border-light); text-decoration: none; - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; + display: block; color: white; } @@ -700,18 +623,15 @@ } .contact-card i { - font-size: 1.75rem; - } - - .contact-card span { - font-size: 0.85rem; + font-size: 2rem; + margin-bottom: 10px; + display: block; } .contact-card.whatsapp { color: #25d366; } .contact-card.instagram { background: linear-gradient(45deg, rgba(228,64,95,0.2), rgba(188,24,136,0.2)); border-color: rgba(228,64,95,0.3); - color: #e4405f; } .contact-card.linkedin { color: #0077b5; } .contact-card.email { color: #ea4335; } @@ -725,8 +645,8 @@ ========================================= */ footer { background: linear-gradient(180deg, #0f172a 0%, rgba(10, 10, 25, 0.98) 100%); - padding: 60px 0 30px; - margin-top: 60px; + padding: 80px 0 30px; + margin-top: 80px; border-top: 1px solid var(--border-light); position: relative; } @@ -771,16 +691,14 @@ font-weight: 700; color: white; } - .footer-logo-text span { color: var(--primary); } .footer-links { display: flex; - gap: 24px; + gap: 30px; flex-wrap: wrap; - justify-content: center; } .footer-link { @@ -807,7 +725,6 @@ .footer-link:hover { color: white; } - .footer-link:hover::after { width: 100%; } @@ -816,7 +733,7 @@ display: flex; flex-direction: column; align-items: center; - gap: 15px; + gap: 20px; } .footer-social-title { @@ -828,7 +745,9 @@ .redes ul { display: flex; - gap: 12px; + gap: 15px; + } + .redes li { list-style: none; } @@ -849,7 +768,7 @@ } .social-icon i { - font-size: 1.2rem; + font-size: 1.3rem; color: var(--text-muted); transition: all 0.4s ease; position: relative; @@ -867,13 +786,10 @@ color: white; } + /* Colores hover especificos */ .social-icon.instagram:hover { border-color: #e4405f; } .social-icon.instagram::before { - content: ""; - position: absolute; - inset: 0; - opacity: 0; - transition: 0.4s; + content: ""; position: absolute; inset: 0; opacity: 0; transition: 0.4s; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .social-icon.instagram:hover::before { opacity: 1; } @@ -881,12 +797,8 @@ .social-icon.facebook:hover { border-color: #1877f2; background: #1877f2; } .social-icon.tiktok:hover { border-color: #00f2ea; background: #000; } .social-icon.tiktok::before { - content: ""; - position: absolute; - inset: 0; - opacity: 0; - transition: 0.4s; - background: linear-gradient(45deg, #00f2ea, #ff0050); + content: ""; position: absolute; inset: 0; opacity: 0; transition: 0.4s; + background: linear-gradient(45deg, #00f2ea, #ff0050); } .social-icon.tiktok:hover::before { opacity: 1; } @@ -896,635 +808,119 @@ color: rgba(255, 255, 255, 0.3); font-size: 0.85rem; margin-top: 30px; - flex-wrap: wrap; - gap: 15px; } /* ========================================= - RESPONSIVE - TABLETS (768px - 1024px) + RESPONSIVE (IGUAL QUE TÉRMINOS Y CONDICIONES) ========================================= */ - @media (max-width: 1024px) { - :root { - --header-height: 70px; - } - - .privacy-layout { - grid-template-columns: 240px 1fr; - gap: 30px; - } - - .sticky-sidebar { - padding: 20px; - } - - .toc-list a { - font-size: 0.8rem; - padding: 6px 10px; - } - - .privacy-section { - padding: 28px; - } - - .contact-grid { - grid-template-columns: repeat(2, 1fr); - } - - .footer-top { - flex-direction: column; - text-align: center; - } - - .footer-links { - justify-content: center; - } - - .footer-social { - width: 100%; - } - } - - /* ========================================= - RESPONSIVE - TABLETS SMALL (max-width: 900px) - ========================================= */ - @media (max-width: 900px) { + @media (max-width: 992px) { .privacy-layout { grid-template-columns: 1fr; - gap: 24px; } - + .sticky-sidebar { position: relative; top: 0; - max-height: none; - margin-bottom: 10px; + margin-bottom: 30px; } .toc-list { display: flex; flex-wrap: wrap; - gap: 8px; + gap: 10px; } - + .toc-list li { margin-bottom: 0; } .toc-list a { background: rgba(255, 255, 255, 0.05); - font-size: 0.75rem; - white-space: nowrap; - padding: 8px 12px; - } - - .toc-list a:hover, - .toc-list a.active { - transform: translateX(0) translateY(-2px); + font-size: 0.8rem; } } - /* ========================================= - RESPONSIVE - MÓVILES (max-width: 768px) - ========================================= */ @media (max-width: 768px) { - :root { - --header-height: 64px; - } - - html { - font-size: 15px; - } - .nav-links { display: none; } - .menu-toggle { display: flex; } .nav-links.active { display: flex; - position: fixed; + position: absolute; top: var(--header-height); left: 0; width: 100%; - height: calc(100vh - var(--header-height)); - height: calc(100dvh - var(--header-height)); - background: rgba(15, 23, 42, 0.98); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); + background: rgba(15, 23, 42, 0.95); flex-direction: column; - padding: 30px 20px; - gap: 0; - overflow-y: auto; - animation: slideDown 0.3s ease; - } - - @keyframes slideDown { - from { - opacity: 0; - transform: translateY(-20px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - .nav-links.active li { + padding: 20px; border-bottom: 1px solid var(--border-light); } - .nav-links.active a { - display: block; - padding: 16px 0; - font-size: 1.1rem; - } - - nav { - padding: 0 16px; - } - - .container { - padding: 0 16px; - } - - .privacy-layout { - gap: 20px; - margin-top: 24px; - } - - .hero-modern { - min-height: 45vh; - padding-top: calc(var(--header-height) + 30px); - padding-bottom: 40px; - } - - .hero-content { - padding: 0 10px; - } - - .hero-badge { - padding: 6px 14px; - font-size: 0.75rem; - } - - .hero-badge span { - display: inline; - } - - /* Sidebar como acordeón en móvil */ - .sticky-sidebar { - padding: 16px; - } - - .sidebar-title { - font-size: 1rem; - margin-bottom: 16px; - } - - .toc-list a { - font-size: 0.7rem; - padding: 6px 10px; - } - - /* Secciones */ .privacy-section { - padding: 20px 16px; - border-radius: 16px; + padding: 25px; } .privacy-section h2 { - flex-direction: row; - align-items: flex-start; - gap: 10px; - } - - .privacy-section h2 i { - margin-top: 4px; - font-size: 1.1rem; + font-size: 1.5rem; } .sub-card { padding: 16px; - margin-top: 12px; - margin-bottom: 12px; } .highlight-box { padding: 16px; } - /* Tabla responsiva */ - .table-container { - margin: 16px 0; - } - - table { - min-width: 450px; - } - - th, td { - padding: 10px 8px; - font-size: 0.8rem; - } - - th { - font-size: 0.65rem; - } - - /* Contacto */ .contact-grid { grid-template-columns: repeat(2, 1fr); - gap: 12px; - } - - .contact-card { - padding: 16px 12px; - } - - .contact-card i { - font-size: 1.5rem; - } - - .contact-card span { - font-size: 0.8rem; - } - - /* Footer */ - footer { - padding: 40px 0 24px; - margin-top: 40px; } .footer-top { flex-direction: column; - align-items: flex-start; - gap: 24px; - } - - .footer-links { - gap: 16px; - justify-content: flex-start; - } - - .footer-link { - font-size: 0.85rem; - } - - .footer-social { - align-items: flex-start; - width: 100%; - } - - .redes ul { - gap: 10px; - } - - .social-icon { - width: 40px; - height: 40px; + text-align: center; } - .social-icon i { - font-size: 1rem; - } - .footer-bottom { flex-direction: column; text-align: center; - align-items: center; - gap: 10px; - font-size: 0.8rem; - } - - /* WhatsApp button */ - .whatsapp-float { - bottom: 16px; - right: 16px; - } - - .whatsapp-float a { - width: 50px; - height: 50px; - } - - .whatsapp-float i { - font-size: 24px; - } - } - - /* ========================================= - RESPONSIVE - MÓVILES PEQUEÑOS (max-width: 480px) - ========================================= */ - @media (max-width: 480px) { - html { - font-size: 14px; - } - - .container { - padding: 0 12px; - } - - .logo-text { - font-size: 1.25rem; - } - - .logo-img { - width: 36px; - height: 36px; - } - - .hero-badge { - padding: 5px 12px; - font-size: 0.7rem; - } - - .hero-badge i { - font-size: 0.8rem; - } - - .hero-title { - font-size: 1.5rem; - } - - .hero-subtitle { - font-size: 0.9rem; - } - - .sticky-sidebar { - padding: 14px; - } - - .toc-list a { - font-size: 0.65rem; - padding: 5px 8px; - } - - .privacy-section { - padding: 16px 14px; - } - - .privacy-section h2 { - font-size: 1.15rem; - } - - .privacy-section h2 i { - font-size: 1rem; - } - - .privacy-section h3 { - font-size: 1rem; - } - - .privacy-section p, - .privacy-section li { - font-size: 0.85rem; - text-align: left; - } - - .privacy-section ul, - .privacy-section ol { - margin-left: 16px; - } - - .sub-card { - padding: 14px; - } - - .sub-card h3 { - font-size: 0.95rem; - } - - .highlight-box { - padding: 14px; - } - - .highlight-box h3 { - font-size: 0.95rem; - } - - .highlight-box p, - .highlight-box li { - font-size: 0.85rem; - } - - /* Tabla más compacta */ - table { - min-width: 380px; - } - - th, td { - padding: 8px 6px; - font-size: 0.75rem; - } - - th { - font-size: 0.6rem; - } - - /* Contacto 2x2 grid */ - .contact-grid { - grid-template-columns: repeat(2, 1fr); gap: 10px; } - - .contact-card { - padding: 14px 10px; - border-radius: 12px; - } - - .contact-card i { - font-size: 1.25rem; - } - - .contact-card span { - font-size: 0.75rem; - } - - /* Footer compacto */ - .footer-logo-text { - font-size: 1.25rem; - } - - .footer-logo-img { - width: 32px; - height: 32px; - } - - .footer-links { - gap: 12px; - } - - .footer-link { - font-size: 0.8rem; - } - - .social-icon { - width: 38px; - height: 38px; - } - - .footer-bottom { - font-size: 0.75rem; - } - } - - /* ========================================= - RESPONSIVE - MÓVILES MUY PEQUEÑOS (max-width: 360px) - ========================================= */ - @media (max-width: 360px) { - .container { - padding: 0 10px; - } - - .hero-badge span { - font-size: 0.65rem; - } - - .toc-list { - gap: 6px; - } - - .toc-list a { - font-size: 0.6rem; - padding: 4px 6px; - } - - .contact-grid { - grid-template-columns: 1fr 1fr; - gap: 8px; - } - - .contact-card { - padding: 12px 8px; - } - - .contact-card i { - font-size: 1.1rem; - } - - .contact-card span { - font-size: 0.7rem; - } - - table { - min-width: 320px; - } - - th, td { - padding: 6px 4px; - font-size: 0.7rem; - } - } - - /* ========================================= - LANDSCAPE MODE FIXES - ========================================= */ - @media (max-height: 500px) and (orientation: landscape) { - .hero-modern { - min-height: auto; - padding-top: calc(var(--header-height) + 20px); - padding-bottom: 30px; - } - - .nav-links.active { - padding: 20px; - } - - .nav-links.active a { - padding: 12px 0; - } - } - - /* ========================================= - PRINT STYLES - ========================================= */ - @media print { - header, - .whatsapp-float, - .sticky-sidebar, - .tech-icons, - footer { - display: none !important; - } - - body { - background: white; - color: black; - } - - .privacy-layout { - grid-template-columns: 1fr; - } - - .privacy-section { - background: white; - border: 1px solid #ddd; - page-break-inside: avoid; - } - - .privacy-section h2, - .privacy-section h3 { - color: black; - } - - .privacy-section p, - .privacy-section li { - color: #333; - } - } - - /* ========================================= - ACCESSIBILITY - REDUCED MOTION - ========================================= */ - @media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } - - .fade-in-up { - opacity: 1; - transform: none; - } - - .tech-icon { - display: none; - } }
- +
+ +
- - + +
@@ -1533,7 +929,7 @@
- -
-

Derechos y opciones del usuario

+
+

Derechos y opciones del usuario

Dependiendo de su ubicación, puede tener ciertos derechos con respecto a su información personal:

@@ -1792,11 +1185,11 @@

Cómo ejercer sus derechos

Preferencias de comunicación

Puede optar por no recibir comunicaciones de marketing siguiendo las instrucciones de cancelación incluidas en dichas comunicaciones.

-
+
-
-

Seguridad de datos

+
+

Seguridad de datos

Implementamos medidas de seguridad técnicas, administrativas y físicas diseñadas para proteger su información personal.

@@ -1811,11 +1204,11 @@

Nuestras medidas incluyen:

No podemos garantizar una seguridad absoluta. En caso de violación de datos, nos comprometemos a notificarle de acuerdo con la ley.

-
+ -
-

Retención de información

+
+

Retención de información

Conservamos su información personal solo durante el tiempo necesario para cumplir con los fines para los que la recopilamos.

Los criterios incluyen:

    @@ -1824,55 +1217,55 @@

    Retención de informaciónNecesidades legales (litigios o investigaciones)

Cuando ya no sea necesario, eliminaremos o anonimizaremos su información de forma segura.

-
+ -
-

Transferencias internacionales

+
+

Transferencias internacionales

DerejSoft opera globalmente y puede transferir, almacenar y procesar su información en países distintos al suyo. Cuando transferimos información desde el EEE, Reino Unido o Suiza a países no reconocidos como seguros, implementamos salvaguardas como cláusulas contractuales estándar.

-
+ -
-

Privacidad de menores

+
+

Privacidad de menores

Nuestros Servicios no están dirigidos a personas menores de 16 años. Si descubrimos que hemos recopilado información personal de un niño menor de 16 años sin verificación del consentimiento parental, tomaremos medidas para eliminarla.

-
+ -
-

Enlaces a terceros

+
+

Enlaces a terceros

Nuestros Servicios pueden contener enlaces a sitios web de terceros. No tenemos control sobre las prácticas de privacidad de terceros.

Le recomendamos revisar las políticas de privacidad de cualquier sitio web de terceros que visite.

-
+ -
-

Cambios en la política

+
+

Cambios en la política

Podemos actualizar esta Política de Privacidad. Si realizamos cambios materiales, le notificaremos a través de un aviso en nuestro sitio web o por correo electrónico.

-
+ - -
-

Información de contacto

+ +
+

Información de contacto

Si tiene preguntas o inquietudes, puede contactarnos a través de:

- - + + WhatsApp - - + + Instagram - - + + TikTok
@@ -1881,7 +1274,7 @@

Información de

Delegado de Protección de Datos (DPO)

Hemos designado un Delegado de Protección de Datos. Puede contactar con nuestro DPO en derejsoft2003@gmail.com.

-
+
@@ -1909,21 +1302,18 @@

Delegado de Protección de Datos (DPO)

@@ -1933,23 +1323,22 @@

Delegado de Protección de Datos (DPO)

© 2025 DerejSoft. Todos los derechos reservados.
-
Hecho con en República Dominicana
+
Hecho con en República Dominicana
From e231dd0e99966ec86dbee440b23e9a55b4732ed4 Mon Sep 17 00:00:00 2001 From: CodeAriCos28 Date: Sat, 7 Mar 2026 20:17:53 -0400 Subject: [PATCH 4/4] documentacion v1.0.0 --- README.md | 349 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 239 insertions(+), 110 deletions(-) diff --git a/README.md b/README.md index 79581b5..7593ecb 100644 --- a/README.md +++ b/README.md @@ -1,120 +1,249 @@ -# ![DerejSoft Logo](/logos/derejdoc.png) - - -# Documentación del Proyecto WebDerej - -## Índice -- [](#) -- [Documentación del Proyecto WebDerej](#documentación-del-proyecto-webderej) - - [Índice](#índice) - - [Descripción General](#descripción-general) - - [Estructura de Carpetas](#estructura-de-carpetas) - - [Tecnologías Utilizadas](#tecnologías-utilizadas) - - [Estructura de los Archivos HTML](#estructura-de-los-archivos-html) - - [Accesibilidad y Buenas Prácticas](#accesibilidad-y-buenas-prácticas) - - [Responsive Design](#responsive-design) - - [Componentes Clave](#componentes-clave) - - [Personalización y Estilos](#personalización-y-estilos) - - [Despliegue y Uso](#despliegue-y-uso) - - [Mantenimiento y Actualizaciones](#mantenimiento-y-actualizaciones) - - [Contacto y Créditos](#contacto-y-créditos) +

+ Logo DerejSoft +

+ +

WebDerej

+ +

+ Plataforma web corporativa de DerejSoft para presentar servicios, + proyectos, contenido de valor y documentación legal en una experiencia moderna, + accesible y responsiva. +

+ +

+ Estado + Stack + Arquitectura +

--- -## Descripción General -WebDerej es una web corporativa para la empresa DerejSoft, orientada a mostrar servicios, proyectos, artículos y documentos legales, con enfoque en accesibilidad, diseño moderno y adaptabilidad a dispositivos. +## Tabla de contenido + +1. [Resumen del proyecto](#resumen-del-proyecto) +2. [Objetivo y alcance](#objetivo-y-alcance) +3. [Mapa completo del sitio](#mapa-completo-del-sitio) +4. [Estructura del repositorio](#estructura-del-repositorio) +5. [Arquitectura frontend](#arquitectura-frontend) +6. [Tecnologías y recursos externos](#tecnologías-y-recursos-externos) +7. [Funcionalidades clave](#funcionalidades-clave) +8. [Accesibilidad y buenas prácticas](#accesibilidad-y-buenas-prácticas) +9. [Responsive design](#responsive-design) +10. [Ejecución local](#ejecución-local) +11. [Despliegue](#despliegue) +12. [Guía de mantenimiento](#guía-de-mantenimiento) +13. [Checklist de calidad](#checklist-de-calidad) +14. [Contacto](#contacto) -## Estructura de Carpetas -``` -blog.html -index.html -nosotros2.html -alticulos/ - arti.html - arti2.html - arti3.html -Documentos_Legales/ - politica_privacidad.html - termino_servicio.html -imagenes/ -logos/ -null/ - login.html -proyectos/ - derejfinance.html - derejmotium.html - derejpress.html - derejstorage.html - proye1.html +--- + +## Resumen del proyecto + +**WebDerej** es la web institucional de DerejSoft. El sistema está orientado a: + +- Comunicar la propuesta de valor y servicios de la marca. +- Exponer proyectos y productos desarrollados. +- Publicar artículos y contenido informativo. +- Mostrar documentos legales obligatorios (privacidad y términos). + +La solución está construida con frontend puro (`HTML`, `CSS`, `JavaScript`), optimizada para carga rápida y despliegue simple en hosting estático. + +## Objetivo y alcance + +### Objetivo + +Consolidar una presencia web profesional y confiable para clientes, aliados y visitantes, con navegación clara, estética moderna y contenido corporativo estructurado. + +### Alcance actual + +- Landing principal con secciones de negocio. +- Página institucional "Nosotros". +- Sección de blog y artículos individuales. +- Sección de proyectos con páginas dedicadas. +- Documentación legal publicada en páginas propias. +- Recursos multimedia organizados por carpetas. + +## Mapa completo del sitio + +### Páginas raíz + +- `index.html`: portada principal de la marca. +- `nosotros2.html`: presentación institucional y cultura de empresa. +- `blog.html`: índice general del blog. + +### Artículos + +- `alticulos/arti.html` +- `alticulos/arti2.html` +- `alticulos/arti3.html` + +### Proyectos + +- `proyectos/proye1.html` +- `proyectos/derejfinance.html` +- `proyectos/derejmotium.html` +- `proyectos/derejpress.html` +- `proyectos/derejstorage.html` + +### Documentos legales + +- `Documentos_Legales/politica_privacidad.html` +- `Documentos_Legales/termino_servicio.html` + +## Estructura del repositorio + +```text +webderej/ +|-- index.html +|-- nosotros2.html +|-- blog.html +|-- README.md +|-- alticulos/ +| |-- arti.html +| |-- arti2.html +| |-- arti3.html +|-- Documentos_Legales/ +| |-- politica_privacidad.html +| |-- termino_servicio.html +|-- proyectos/ +| |-- proye1.html +| |-- derejfinance.html +| |-- derejmotium.html +| |-- derejpress.html +| |-- derejstorage.html +|-- imagenes/ +|-- imgproye/ +| |-- derejfinance/ +| |-- derejmotium/ +| |-- derejpress/ +| |-- derejstorange/ +|-- logos/ ``` -- **index.html**: Página principal. -- **nosotros2.html**: Sobre la empresa. -- **alticulos/**: Artículos y blog. -- **Documentos_Legales/**: Políticas y términos legales. -- **proyectos/**: Descripción de proyectos desarrollados. -- **imagenes/**, **logos/**: Recursos gráficos. -- **null/login.html**: Acceso (en desarrollo o placeholder). - -## Tecnologías Utilizadas -- **HTML5** y **CSS3** (con variables y custom properties) -- **FontAwesome** y **Devicon** para iconos -- **Google Fonts** (Outfit, Plus Jakarta Sans) -- **JavaScript** (para animaciones, menú móvil, scroll, paginación, etc.) -- **No frameworks JS pesados** (todo es vanilla JS) - -## Estructura de los Archivos HTML -- **Header**: Menú fijo, logo, navegación accesible. -- **Hero Section**: Presentación visual con fondo animado e iconos flotantes. -- **Contenido Principal**: Secciones de servicios, proyectos, artículos, contacto, etc. -- **Footer**: Logo, enlaces legales, redes sociales accesibles, copyright. -- **Documentos legales**: Sidebar con tabla de contenidos, contenido legal estructurado. - -## Accesibilidad y Buenas Prácticas -- Uso de `aria-label`, `title` y `.sr-only` para accesibilidad en enlaces de redes. -- Contraste de colores revisado para cumplir estándares WCAG. -- Navegación por teclado y foco visible. -- Etiquetas semánticas (`
`, `
`, `