From d387dd0ceacc4b1e1d374990a2ec9ddae26e9c9e Mon Sep 17 00:00:00 2001
From: Francisco Anfuso <franciscoanfuso@hotmail.com>
Date: Tue, 15 Sep 2026 03:41:01 -0300
Subject: [PATCH] inicio-servicios finish

---
 assets/iconos/ad_hoc.svg           |  15 +
 assets/iconos/automatizaciones.svg |  15 +
 assets/iconos/branding.svg         |  15 +
 assets/iconos/paid_media.svg       |  15 +
 assets/iconos/redes_sociales.svg   |  13 +
 assets/iconos/web.svg              |  15 +
 includes/menu.html                 |  12 +-
 inicio.html                        | 121 ++++-
 scripts/main.js                    |  66 +++
 style/main.css                     | 731 ++++++++++++++++++++++++-----
 10 files changed, 885 insertions(+), 133 deletions(-)
 create mode 100644 assets/iconos/ad_hoc.svg
 create mode 100644 assets/iconos/automatizaciones.svg
 create mode 100644 assets/iconos/branding.svg
 create mode 100644 assets/iconos/paid_media.svg
 create mode 100644 assets/iconos/redes_sociales.svg
 create mode 100644 assets/iconos/web.svg

diff --git a/assets/iconos/ad_hoc.svg b/assets/iconos/ad_hoc.svg
new file mode 100644
index 0000000..60e03c5
--- /dev/null
+++ b/assets/iconos/ad_hoc.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="32px" height="24px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 6.14 4.58"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_2056581987872">
+   <path fill="#EAF0EE" d="M0.45 2.16l0.61 -0.51 0 2.93 -0.45 0 0 -0.59 -0.16 0 0 -1.83zm0.9 -0.76l0.8 -0.67 0 3.85 -0.18 0 0 -0.82c0,-0.12 -0.1,-0.22 -0.22,-0.22l0 0c-0.12,0 -0.22,0.1 -0.22,0.22l0 0.82 -0.18 0 0 -3.18zm1.09 -0.91l0.42 -0.35 0.01 -0.01c0.2,-0.17 0.2,-0.17 0.4,0l0.43 0.36 -0.01 0 0 4.09 -0.29 0 0 -1.22c0,-0.18 -0.15,-0.32 -0.33,-0.32 -0.18,0 -0.33,0.14 -0.33,0.32l0 1.22 -0.29 0 0 -4.09 -0.01 0zm1.55 0.24l0.8 0.67 0 3.18 -0.18 0 0 -0.82c0,-0.12 -0.1,-0.22 -0.22,-0.22l0 0c-0.12,0 -0.22,0.1 -0.22,0.22l0 0.82 -0.18 0 0 -3.85zm1.09 0.92l0.61 0.51 0 1.83 -0.16 0 0 0.59 -0.45 0 0 -2.93zm0.31 1.17c0.12,0 0.22,0.09 0.22,0.22 0,0.12 -0.1,0.22 -0.22,0.22 -0.12,0 -0.22,-0.1 -0.22,-0.22 0,-0.13 0.1,-0.22 0.22,-0.22zm-1 -0.83l0 0c0.12,0 0.22,0.1 0.22,0.22l0 0.83 -0.44 0 0 -0.83c0,-0.12 0.1,-0.22 0.22,-0.22zm-1.32 0c0.12,0 0.22,0.1 0.22,0.22 0,0.13 -0.1,0.23 -0.22,0.23 -0.12,0 -0.22,-0.1 -0.22,-0.23 0,-0.12 0.1,-0.22 0.22,-0.22zm0 -1.38l0 0c0.12,0 0.22,0.1 0.22,0.22l0 0.83 -0.44 0 0 -0.83c0,-0.12 0.1,-0.22 0.22,-0.22zm-1.32 1.38l0 0c0.12,0 0.22,0.1 0.22,0.22l0 0.83 -0.44 0 0 -0.83c0,-0.12 0.1,-0.22 0.22,-0.22zm-1 0.83c0.13,0 0.23,0.09 0.23,0.22 0,0.12 -0.1,0.22 -0.23,0.22 -0.12,0 -0.22,-0.1 -0.22,-0.22 0,-0.13 0.1,-0.22 0.22,-0.22z"/>
+   <path fill="#EAF0EE" fill-opacity="0.501961" d="M5.84 1.02l0.14 0.15 0 2.82 0.16 0 0 0.59 -0.16 0 -0.29 0 -0.16 0 0 -0.59 0.16 0 0 -2.82 0.15 -0.15zm-5.54 0l0.15 0.15 0 2.82 0.16 0 0 0.59 -0.16 0 -0.29 0 -0.16 0 0 -0.59 0.16 0 0 -2.82 0.14 -0.15zm0 -0.35l0 0c0.02,0 0.04,0.02 0.04,0.04l0 0.23c0,0.02 -0.02,0.03 -0.04,0.03l0 0c-0.02,0 -0.03,-0.01 -0.03,-0.03l0 -0.23c0,-0.02 0.01,-0.04 0.03,-0.04zm0.91 0.35l0.14 0.15 0 3.41 -0.29 0 0 -3.41 0.15 -0.15zm0 -0.35l0 0c0.01,0 0.03,0.02 0.03,0.04l0 0.23c0,0.02 -0.02,0.03 -0.03,0.03l0 0c-0.02,0 -0.04,-0.01 -0.04,-0.03l0 -0.23c0,-0.02 0.02,-0.04 0.04,-0.04zm1.09 -0.32l0.15 0.14 0 4.09 -0.3 0 0 -4.09 0.15 -0.14zm0 -0.35l0 0c0.02,0 0.03,0.02 0.03,0.04l0 0.23c0,0.02 -0.01,0.03 -0.03,0.03l0 0c-0.02,0 -0.04,-0.01 -0.04,-0.03l0 -0.23c0,-0.02 0.02,-0.04 0.04,-0.04zm1.54 0.35l0.15 0.14 0 4.09 -0.3 0 0 -4.09 0.15 -0.14zm0 -0.35l0 0c0.02,0 0.04,0.02 0.04,0.04l0 0.23c0,0.02 -0.02,0.03 -0.04,0.03l0 0c-0.02,0 -0.03,-0.01 -0.03,-0.03l0 -0.23c0,-0.02 0.01,-0.04 0.03,-0.04zm1.09 1.02l0.15 0.15 0 3.41 -0.29 0 0 -3.41 0.14 -0.15zm0 -0.35l0 0c0.02,0 0.03,0.02 0.03,0.04l0 0.23c0,0.02 -0.01,0.03 -0.03,0.03l0 0c-0.02,0 -0.04,-0.01 -0.04,-0.03l0 -0.23c0,-0.02 0.02,-0.04 0.04,-0.04zm0.9 0l0 0c0.02,0 0.04,0.02 0.04,0.04l0 0.23c0,0.02 -0.02,0.03 -0.04,0.03l0 0c-0.02,0 -0.03,-0.01 -0.03,-0.03l0 -0.23c0,-0.02 0.01,-0.04 0.03,-0.04z"/>
+  </g>
+ </g>
+</svg>
diff --git a/assets/iconos/automatizaciones.svg b/assets/iconos/automatizaciones.svg
new file mode 100644
index 0000000..30656bd
--- /dev/null
+++ b/assets/iconos/automatizaciones.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="32px" height="17px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 19 10.14"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_2056448900048">
+   <path fill="#EAF0EE" d="M4.6 5.23l0 -2.37 -1.23 0 0 2.37 1.23 0zm3.68 0l0 -2.37 -1.23 0 0 2.37 1.23 0zm3.68 0l0 -2.37 -1.22 0 0 2.37 1.22 0zm3.69 0l0 -2.37 -1.23 0 0 2.37 1.23 0zm-15.35 0l0 -2.37 0.61 0 0 2.37 -0.61 0zm18.42 -2.37l0 2.37 -0.62 0 0 -2.37 0.62 0zm-18.42 -2.54l18.42 0 0 2.31 -0.62 0 0 -0.27c0,-0.67 -0.55,-1.23 -1.22,-1.23 -0.68,0 -1.23,0.56 -1.23,1.23l0 0.26 -1.23 0 0 -0.26c0,-0.67 -0.55,-1.23 -1.23,-1.23 -0.67,0 -1.23,0.56 -1.23,1.23l0 0.26 -1.22 0 0 -0.26c0,-0.67 -0.56,-1.23 -1.23,-1.23 -0.68,0 -1.23,0.56 -1.23,1.23l0 0.26 -1.23 0 0 -0.26c0,-0.67 -0.55,-1.23 -1.23,-1.23 -0.67,0 -1.22,0.56 -1.22,1.23l0 0.26 -1.23 0 0 -0.26c0,-0.67 -0.55,-1.23 -1.23,-1.23 -0.67,0 -1.23,0.56 -1.23,1.23l0 0.27 -0.61 0 0 -2.31zm4.3 9.82l0 -2.37 -1.23 0 0 2.37 1.23 0zm3.68 0l0 -2.37 -1.23 0 0 2.37 1.23 0zm3.68 0l0 -2.37 -1.22 0 0 2.37 1.22 0zm3.69 0l0 -2.37 -1.23 0 0 2.37 1.23 0zm-15.35 0l0 -2.37 0.61 0 0 2.37 -0.61 0zm18.42 -2.37l0 2.37 -0.62 0 0 -2.37 0.62 0zm0 -2.23l0 2 -0.62 0 0 -0.27c0,-0.67 -0.55,-1.22 -1.22,-1.22 -0.68,0 -1.23,0.55 -1.23,1.22l0 0.27 -1.23 0 0 -0.27c0,-0.67 -0.55,-1.22 -1.23,-1.22 -0.67,0 -1.23,0.55 -1.23,1.22l0 0.27 -1.22 0 0 -0.27c0,-0.67 -0.56,-1.22 -1.23,-1.22 -0.68,0 -1.23,0.55 -1.23,1.22l0 0.27 -1.23 0 0 -0.27c0,-0.67 -0.55,-1.22 -1.23,-1.22 -0.67,0 -1.22,0.55 -1.22,1.22l0 0.27 -1.23 0 0 -0.27c0,-0.67 -0.55,-1.22 -1.23,-1.22 -0.67,0 -1.23,0.55 -1.23,1.22l0 0.27 -0.61 0 0 -2 18.42 0z"/>
+   <path fill="#EAF0EE" fill-opacity="0.501961" d="M0 5.23l19 0 0 0.31 -19 0 0 -0.31zm14.39 2.31l1.27 0c0.07,0 0.12,0.05 0.12,0.11l0 0c0,0.07 -0.05,0.12 -0.12,0.12l-1.27 0c-0.06,0 -0.12,-0.05 -0.12,-0.12l0 0c0,-0.06 0.06,-0.11 0.12,-0.11zm-3.68 0l1.27 0c0.06,0 0.12,0.05 0.12,0.11l0 0c0,0.07 -0.06,0.12 -0.12,0.12l-1.27 0c-0.07,0 -0.12,-0.05 -0.12,-0.12l0 0c0,-0.06 0.05,-0.11 0.12,-0.11zm-3.69 0l1.27 0c0.07,0 0.12,0.05 0.12,0.11l0 0c0,0.07 -0.05,0.12 -0.12,0.12l-1.27 0c-0.06,0 -0.11,-0.05 -0.11,-0.12l0 0c0,-0.06 0.05,-0.11 0.11,-0.11zm-3.68 0l1.27 0c0.06,0 0.12,0.05 0.12,0.11l0 0c0,0.07 -0.06,0.12 -0.12,0.12l-1.27 0c-0.06,0 -0.12,-0.05 -0.12,-0.12l0 0c0,-0.06 0.06,-0.11 0.12,-0.11zm14.74 0l0.65 0c0.06,0 0.12,0.05 0.12,0.11l0 0c0,0.07 -0.06,0.12 -0.12,0.12l-0.65 0c-0.07,0 -0.12,-0.05 -0.12,-0.12l0 0c0,-0.06 0.05,-0.11 0.12,-0.11zm-17.81 0l0.65 0c0.07,0 0.12,0.05 0.12,0.11l0 0c0,0.07 -0.05,0.12 -0.12,0.12l-0.65 0c-0.06,0 -0.11,-0.05 -0.11,-0.12l0 0c0,-0.06 0.05,-0.11 0.11,-0.11zm-0.27 -7.54l19 0 0 0.32 -19 0 0 -0.32zm0.27 2.63l0.65 0c0.07,0 0.12,0.05 0.12,0.11l0 0c0,0.07 -0.05,0.12 -0.12,0.12l-0.65 0c-0.06,0 -0.11,-0.05 -0.11,-0.12l0 0c0,-0.06 0.05,-0.11 0.11,-0.11zm17.81 0l0.65 0c0.06,0 0.12,0.05 0.12,0.11l0 0c0,0.07 -0.06,0.12 -0.12,0.12l-0.65 0c-0.07,0 -0.12,-0.05 -0.12,-0.12l0 0c0,-0.06 0.05,-0.11 0.12,-0.11zm-14.74 -0.01l1.27 0c0.06,0 0.12,0.06 0.12,0.12l0 0c0,0.07 -0.06,0.12 -0.12,0.12l-1.27 0c-0.06,0 -0.12,-0.05 -0.12,-0.12l0 0c0,-0.06 0.06,-0.12 0.12,-0.12zm3.68 0l1.27 0c0.07,0 0.12,0.06 0.12,0.12l0 0c0,0.07 -0.05,0.12 -0.12,0.12l-1.27 0c-0.06,0 -0.11,-0.05 -0.11,-0.12l0 0c0,-0.06 0.05,-0.12 0.11,-0.12zm3.69 0l1.27 0c0.06,0 0.12,0.06 0.12,0.12l0 0c0,0.07 -0.06,0.12 -0.12,0.12l-1.27 0c-0.07,0 -0.12,-0.05 -0.12,-0.12l0 0c0,-0.06 0.05,-0.12 0.12,-0.12zm3.68 0l1.27 0c0.07,0 0.12,0.06 0.12,0.12l0 0c0,0.07 -0.05,0.12 -0.12,0.12l-1.27 0c-0.06,0 -0.12,-0.05 -0.12,-0.12l0 0c0,-0.06 0.06,-0.12 0.12,-0.12z"/>
+  </g>
+ </g>
+</svg>
diff --git a/assets/iconos/branding.svg b/assets/iconos/branding.svg
new file mode 100644
index 0000000..cfa6ebb
--- /dev/null
+++ b/assets/iconos/branding.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="32px" height="23px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 15.89 11.21"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_2056448998976">
+   <path fill="#EAF0EE" d="M11.41 10.11c0.39,0.77 0.39,1.01 0,1.01 -0.48,0.03 -0.96,0.05 -1.45,0.06 0,-0.01 0,-0.02 0,-0.03l0 -1.4c0,-0.38 -0.31,-0.69 -0.69,-0.69l0 0c-0.38,0 -0.69,0.31 -0.69,0.69l0 1.4c0,0.02 0,0.04 0,0.06 -0.34,0 -0.69,0 -1.04,0 0,-0.02 0,-0.04 0,-0.06l0 -1.4c0,-0.38 -0.31,-0.69 -0.69,-0.69l0 0c-0.38,0 -0.69,0.31 -0.69,0.69l0 1.4c0,0.01 0,0.03 0,0.04 -0.37,-0.01 -0.74,-0.02 -1.11,-0.04l0 -1.44c0,-0.35 -0.28,-0.64 -0.63,-0.64l0 0c-0.35,0 -0.64,0.29 -0.64,0.64l0 1.38c-0.38,-0.02 -0.77,-0.04 -1.15,-0.06l0 -1.37c0,-0.32 -0.26,-0.58 -0.59,-0.58l0 0c-0.32,0 -0.58,0.26 -0.58,0.58l0 1.29c-0.12,-0.01 -0.24,-0.02 -0.36,-0.03 -0.79,-0.13 -1.01,-0.18 -0.97,-0.61l0.09 -0.9 0.03 -0.39c-0.15,-0.08 -0.25,-0.25 -0.25,-0.44 0,-0.23 0.14,-0.42 0.33,-0.47l0.15 -1.97c-0.12,-0.08 -0.21,-0.24 -0.21,-0.41 0,-0.2 0.12,-0.38 0.28,-0.45l0.26 -3.29c0.13,-0.99 1.96,-1.46 4.21,-1.94 0.84,-0.17 1.3,0.11 1.53,0.66l4.86 9.4zm-9.14 -3.99l0 0c0.31,0 0.57,0.26 0.57,0.57l0 1.13c-0.38,0.03 -0.76,0.07 -1.14,0.1l0 -1.23c0,-0.31 0.25,-0.57 0.57,-0.57zm2.26 -0.29l0 0c0.32,0 0.57,0.25 0.57,0.57l0 1.27c-0.38,0.02 -0.76,0.04 -1.14,0.07l0 -1.34c0,-0.32 0.26,-0.57 0.57,-0.57zm2.32 -0.14l0 0c0.31,0 0.57,0.26 0.57,0.57l0 1.35c-0.38,0 -0.76,0.01 -1.14,0.02l0 -1.37c0,-0.31 0.26,-0.57 0.57,-0.57zm-4.42 -2.57l0 0c0.28,0 0.51,0.23 0.51,0.51l0 1.04c-0.34,0.02 -0.68,0.05 -1.01,0.09l0 -1.13c0,-0.28 0.22,-0.51 0.5,-0.51zm2.23 -0.38l0 0c0.28,0 0.51,0.22 0.51,0.5l0 1.29c-0.34,0.01 -0.68,0.03 -1.01,0.05l0 -1.34c0,-0.28 0.22,-0.5 0.5,-0.5z"/>
+   <path fill="#EAF0EE" fill-opacity="0.501961" d="M11.84 5.95l0 0c0.32,0 0.57,0.25 0.57,0.57l0 1.25c-0.38,-0.03 -0.76,-0.05 -1.14,-0.08l0 -1.17c0,-0.32 0.26,-0.57 0.57,-0.57zm2.12 0.29l0 0c0.31,0 0.57,0.26 0.57,0.57l0 1.18c-0.38,-0.05 -0.76,-0.09 -1.14,-0.13l0 -1.05c0,-0.31 0.25,-0.57 0.57,-0.57zm1.6 1.84c0.19,0.06 0.33,0.25 0.33,0.47 0,0.2 -0.11,0.37 -0.27,0.45l0.13 1.7c-0.32,0.05 -0.64,0.09 -0.96,0.13l0 -1.14c0,-0.33 -0.27,-0.59 -0.59,-0.59l0 0c-0.32,0 -0.59,0.26 -0.59,0.59l0 1.27c-0.31,0.03 -0.62,0.06 -0.93,0.08l0 -1.36c0,-0.35 -0.28,-0.64 -0.63,-0.64l0 0c-0.23,0 -0.43,0.13 -0.55,0.31l-2.25 -4.46c-0.14,-0.32 -0.31,-0.5 0.37,-0.47 1.54,-0.01 3.16,0.12 4.91,0.56 0.54,0.13 0.83,0.4 0.88,1.08l0.15 2.02z"/>
+  </g>
+ </g>
+</svg>
diff --git a/assets/iconos/paid_media.svg b/assets/iconos/paid_media.svg
new file mode 100644
index 0000000..b5c6f59
--- /dev/null
+++ b/assets/iconos/paid_media.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="32px" height="25px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 18.68 14.77"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_2056614048976">
+   <path fill="#EAF0EE" d="M18.33 0.48l0 3.67 -17.98 0 0 -3.67 17.98 0zm-16.84 0.3l1.8 0 0 3.11 -1.8 0 0 -3.11zm2.19 0l1.8 0 0 3.11 -1.8 0 0 -3.11zm9.52 0l1.8 0 0 3.11 -1.8 0 0 -3.11zm2.19 0l1.8 0 0 3.11 -1.8 0 0 -3.11zm2.94 3.85l0 10.14 -0.37 0 0 -10.14 0.37 0zm-0.95 10.14l-0.49 0 0 -4.11c0,-0.97 -0.8,-1.77 -1.77,-1.77l0 0c-0.97,0 -1.77,0.8 -1.77,1.77l0 4.11 -0.34 0 0 -10.14 4.37 0 0 10.14zm-4.95 0l-0.46 0 0 -5.88c0,-1.51 -1.18,-2.74 -2.63,-2.74l0 0c-1.45,0 -2.63,1.23 -2.63,2.74l0 5.88 -0.46 0 0 -10.14 6.18 0 0 10.14zm-6.76 0l-0.34 0 0 -4.11c0,-0.97 -0.8,-1.77 -1.77,-1.77l0 0c-0.97,0 -1.77,0.8 -1.77,1.77l0 4.11 -0.49 0 0 -10.14 4.37 0 0 10.14zm-4.95 0l-0.37 0 0 -10.14 0.37 0 0 10.14zm15.57 -9.21c0.32,0 0.59,0.27 0.59,0.59 0,0.32 -0.27,0.59 -0.59,0.59 -0.32,0 -0.59,-0.27 -0.59,-0.59 0,-0.32 0.27,-0.59 0.59,-0.59zm-2.19 0c0.33,0 0.59,0.27 0.59,0.59 0,0.32 -0.26,0.59 -0.59,0.59 -0.32,0 -0.58,-0.27 -0.58,-0.59 0,-0.32 0.26,-0.59 0.58,-0.59zm-9.52 0c0.32,0 0.58,0.27 0.58,0.59 0,0.32 -0.26,0.59 -0.58,0.59 -0.33,0 -0.59,-0.27 -0.59,-0.59 0,-0.32 0.26,-0.59 0.59,-0.59zm-2.19 0c0.32,0 0.59,0.27 0.59,0.59 0,0.32 -0.27,0.59 -0.59,0.59 -0.32,0 -0.59,-0.27 -0.59,-0.59 0,-0.32 0.27,-0.59 0.59,-0.59z"/>
+   <path fill="#EAF0EE" fill-opacity="0.501961" d="M17.96 4.63l0 10.14 -0.58 0 0 -10.14 -4.37 0 0 10.14 -0.58 0 0 -10.14 -6.18 0 0 10.14 -0.58 0 0 -10.14 -4.37 0 0 10.14 -0.58 0 0 -10.14 -0.72 0 0 -0.48 18.68 0 0 0.48 -0.72 0zm-16.47 -3.85l1.8 0 0 3.11 -1.8 0 0 -3.11zm2.19 0l1.8 0 0 3.11 -1.8 0 0 -3.11zm9.52 0l1.8 0 0 3.11 -1.8 0 0 -3.11zm2.19 0l1.8 0 0 3.11 -1.8 0 0 -3.11zm-15.39 -0.78l18.68 0 0 0.48 -18.68 0 0 -0.48zm16.89 14.77l0 -4.11c0,-0.97 -0.8,-1.77 -1.77,-1.77l0 0c-0.97,0 -1.77,0.8 -1.77,1.77l0 4.11 3.54 0zm-0.35 0l0.01 -4.18c0,-0.78 -0.64,-1.43 -1.43,-1.43l0 0c-0.79,0 -1.43,0.65 -1.43,1.43l-0.01 4.18 2.86 0zm-11.21 0l0 -4.11c0,-0.97 -0.8,-1.77 -1.77,-1.77l0 0c-0.97,0 -1.77,0.8 -1.77,1.77l0 4.11 3.54 0zm-0.34 0c0,-0.06 0,-0.11 0,-0.11l0 -4.07c0,-0.78 -0.64,-1.43 -1.43,-1.43l0 0c-0.79,0 -1.43,0.65 -1.43,1.43l0 4.07c0,0 -0.01,0.05 -0.01,0.11l2.87 0zm6.98 0l0 -5.88c0,-1.51 -1.18,-2.74 -2.63,-2.74l0 0c-1.45,0 -2.63,1.23 -2.63,2.74l0 5.88 5.26 0zm-0.41 0l0 -5.98c0,-1.22 -1,-2.22 -2.22,-2.22l0 0c-1.22,0 -2.22,1 -2.22,2.22l0 5.98 4.44 0z"/>
+  </g>
+ </g>
+</svg>
diff --git a/assets/iconos/redes_sociales.svg b/assets/iconos/redes_sociales.svg
new file mode 100644
index 0000000..6ee75c6
--- /dev/null
+++ b/assets/iconos/redes_sociales.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="32px" height="16px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 15.34 7.81"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path fill="#EAF0EE" fill-opacity="0.501961" d="M1.29 6.02l0.63 -0.25 0 -1.02c0,-0.26 0.21,-0.47 0.46,-0.47l0 0c0.26,0 0.47,0.21 0.47,0.47l0 0.65 0.47 -0.19 0 -1.04c0,-0.25 0.21,-0.46 0.47,-0.46l0 0c0.25,0 0.46,0.21 0.46,0.46l0 0.67 0.43 -0.17 0 -1.06c0,-0.26 0.21,-0.47 0.47,-0.47l0 0c0.25,0 0.46,0.21 0.46,0.47l0 0.69 0.47 -0.19 0 -1.83 -4.79 1.79 0 1.95zm8.37 -1.75l0 -0.66c0,-0.26 0.21,-0.47 0.47,-0.47l0 0c0.25,0 0.46,0.21 0.46,0.47l0 1.03 0.43 0.17 0 -0.64c0,-0.25 0.21,-0.46 0.47,-0.46l0 0c0.25,0 0.46,0.21 0.46,0.46l0 1.01 0.48 0.19 0 -0.62c0,-0.26 0.2,-0.47 0.46,-0.47l0 0c0.26,0 0.47,0.21 0.47,0.47l0 0.99 0.7 0.28 0 -1.95 -0.64 -0.23 -0.97 -0.37 -3.19 -1.19 0 1.83 0.4 0.16z"/>
+  <path fill="#EAF0EE" d="M6.08 0.63l1.59 -0.63 1.59 0.63 0 0.94 3.35 1.22c0.42,0.15 0.81,0.36 0.81,0.81l0 0.24 -4.16 -1.56 0 1.83 6.08 2.43 0 1.27 -3.4 0c-0.59,-1.57 -2.28,-2.69 -4.27,-2.69 -1.99,0 -3.68,1.12 -4.27,2.69l-3.4 0 0 -1.27 6.08 -2.43 0 -1.83 -4.09 1.53 0 -0.21c0,-0.45 0.39,-0.66 0.81,-0.81l3.28 -1.21 0 -0.95zm0.74 1.62l0 1.86 1.7 0 0 -1.86 0 -0.04c0,-0.47 -0.38,-0.85 -0.85,-0.85 -0.47,0 -0.85,0.38 -0.85,0.85l0 0.04z"/>
+ </g>
+</svg>
diff --git a/assets/iconos/web.svg b/assets/iconos/web.svg
new file mode 100644
index 0000000..16a31a3
--- /dev/null
+++ b/assets/iconos/web.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="32px" height="25px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 17.78 13.68"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_2056696021696">
+   <path fill="#EAF0EE" d="M8.89 0c3.32,0 6.11,1.82 6.87,4.28l-6.87 -2.14 -6.86 2.14c0.75,-2.46 3.54,-4.28 6.86,-4.28zm0 0.26c0.6,0 1.08,0.11 1.08,0.24 0,0.13 -0.48,0.24 -1.08,0.24 -0.59,0 -1.08,-0.11 -1.08,-0.24 0,-0.13 0.49,-0.24 1.08,-0.24zm-7.69 12.86l15.47 0 0 0 -0.96 0 0 -0.27c0,-0.09 0.07,-0.16 0.16,-0.16l0.21 0 0 -6.08 -0.21 0c-0.09,0 -0.16,-0.07 -0.16,-0.16l0 -0.27 -13.64 0 0 0.27c0,0.09 -0.07,0.16 -0.16,0.16l-0.21 0 0 6.08 0.21 0c0.09,0 0.16,0.07 0.16,0.16l0 0.27 -0.87 0 0 0zm13.92 0l0 -3.14c0,-0.93 -0.76,-1.69 -1.69,-1.69l0 0c-0.93,0 -1.69,0.76 -1.69,1.69l0 3.14 3.38 0zm-4.1 0l0 -3.81c0,-1.17 -0.96,-2.13 -2.13,-2.13 -1.17,0 -2.13,0.96 -2.13,2.13l0 3.81 4.26 0zm-4.97 0l0 -3.14c0,-0.93 -0.77,-1.69 -1.7,-1.69l0 0c-0.93,0 -1.69,0.76 -1.69,1.69l0 3.14 3.39 0z"/>
+   <path fill="#EAF0EE" fill-opacity="0.501961" d="M0.33 6.18l1.74 0 0 0.27c0,0.09 -0.07,0.16 -0.16,0.16l-0.21 0 0 6.08 0.21 0c0.09,0 0.16,0.07 0.16,0.16l0 0.27 -1.74 0 0 -0.27c0,-0.09 0.07,-0.16 0.16,-0.16l0.21 0 0 -6.08 -0.21 0c-0.09,0 -0.16,-0.07 -0.16,-0.16l0 -0.27zm-0.33 6.94l17.78 0 0 0.56 -17.78 0 0 -0.56zm15.71 -6.94l1.74 0 0 0.27c0,0.09 -0.07,0.16 -0.16,0.16l-0.21 0 0 6.08 0.21 0c0.09,0 0.16,0.07 0.16,0.16l0 0.27 -1.74 0 0 -0.27c0,-0.09 0.07,-0.16 0.16,-0.16l0.21 0 0 -6.08 -0.21 0c-0.09,0 -0.16,-0.07 -0.16,-0.16l0 -0.27zm-15.38 0l17.12 0 0 -0.5 -17.12 0 0 0.5zm-0.33 -1.27l8.89 -2.77 8.89 2.77 0 0.77 -17.78 0 0 -0.77zm7.32 -1.17l0 0c0.15,0 0.27,0.12 0.27,0.27l0 0.41c0,0.15 -0.12,0.27 -0.27,0.27l0 0c-0.15,0 -0.27,-0.12 -0.27,-0.27l0 -0.41c0,-0.15 0.12,-0.27 0.27,-0.27zm1.57 -0.45l0 0c0.22,0 0.4,0.18 0.4,0.4l0 0.6c0,0.22 -0.18,0.4 -0.4,0.4l0 0c-0.22,0 -0.39,-0.18 -0.39,-0.4l0 -0.6c0,-0.22 0.17,-0.4 0.39,-0.4zm1.57 0.45l0 0c0.15,0 0.27,0.12 0.27,0.27l0 0.41c0,0.15 -0.12,0.27 -0.27,0.27l0 0c-0.15,0 -0.27,-0.12 -0.27,-0.27l0 -0.41c0,-0.15 0.12,-0.27 0.27,-0.27z"/>
+  </g>
+ </g>
+</svg>
diff --git a/includes/menu.html b/includes/menu.html
index e26a245..9f13dcd 100644
--- a/includes/menu.html
+++ b/includes/menu.html
@@ -35,7 +35,7 @@
     <div class="menu-column">
       <h3>Inicio</h3>
       <ul>
-        <li><a href="inicio.html#section-1">Sección 1</a></li>
+        <li><a href="inicio.html#hero">Inicio</a></li>
         <li><a href="inicio.html#section-2">Sección 2</a></li>
         <li><a href="inicio.html#section-3">Sección 3</a></li>
         <li><a href="inicio.html#section-4">Sección 4</a></li>
@@ -65,18 +65,18 @@
       <div class="menu-contact-info">
         <p class="contact-item">
           <span class="contact-icon icon-email" aria-hidden="true"></span>
-          <span>info@agencia.com</span>
+          <span>info@amoryroma.com.ar</span>
         </p>
 
         <p class="contact-item">
           <span class="contact-icon icon-phone" aria-hidden="true"></span>
-          <span>+34 123 456 789</span>
+          <span>+54 388 611-8304</span>
         </p>
         
         <div class="menu-social">
-          <a href="https://instagram.com" target="_blank" rel="noopener"><i class="fa-brands fa-instagram"></i> Instagram</a>
-          <a href="https://facebook.com" target="_blank" rel="noopener"><i class="fa-brands fa-facebook"></i> Facebook</a>
-          <a href="https://linkedin.com" target="_blank" rel="noopener"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a>
+          <a href="https://www.instagram.com/amoryroma.creativo" target="_blank" rel="noopener"><i class="fa-brands fa-instagram"></i> Instagram</a>
+          <a href="https://web.facebook.com/amoryroma.creativo/" target="_blank" rel="noopener"><i class="fa-brands fa-facebook"></i> Facebook</a>
+          <a href="https://www.linkedin.com/company/amoryroma-estudiocreativo/about/" target="_blank" rel="noopener"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a>
         </div>
       </div>
 
diff --git a/inicio.html b/inicio.html
index 87fbb27..9bd33f8 100644
--- a/inicio.html
+++ b/inicio.html
@@ -12,16 +12,121 @@
   <div id="menu-container"></div>
 
   <main>
-    <!-- Sección 1 -->
-    <section id="inicio-section-1">
-      <h2>Sección 1</h2>
-      <p>Contenido pendiente de definir.</p>
+    <!-- Sección Hero -->
+    <section id="hero" class="hero-section">
+      <div class="hero-content">
+        <h1 class="hero-title">Marcas con esencia, construidas con estrategia.</h1>
+        <p class="hero-subtitle">Tenemos las disciplinas que los negocios necesitan para crecer sin perder lo que los hace únicos.</p>
+        <div class="hero-cta-group">
+          <a href="#" class="btn btn-primary hero-cta-primary">Hablemos</a>
+          <a href="inicio.html#servicios" class="btn btn-secondary hero-cta-secondary">Conocé más</a>
+        </div>
+      </div>
     </section>
 
-    <!-- Sección 2 -->
-    <section id="inicio-section-2">
-      <h2>Sección 2</h2>
-      <p>Contenido pendiente de definir.</p>
+    <!-- Sección 2: Servicios -->
+    <section id="servicios" class="servicios-section">
+      <div class="servicios-container">
+        <!-- Columna Izquierda: Texto introductorio -->
+        <div class="servicios-intro">
+          <h2 class="servicios-title">¿Qué necesita hoy tu negocio?</h2>
+          <p class="servicios-subtitle">Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.</p>
+          <a href="servicios.html" class="btn btn-secondary">Ver todos los servicios</a>
+        </div>
+
+        <!-- Columna Derecha: Acordeón interactivo -->
+        <div class="servicios-accordion" id="servicios-accordion">
+          <!-- Item 1 -->
+          <div class="servicio-item" data-index="0">
+            <div class="servicio-header">
+              <img src="assets/iconos/branding.svg" alt="Icono Estrategia" class="servicio-icon">
+              <h3 class="servicio-title-short">Construir una marca</h3>
+            </div>
+            <div class="servicio-content">
+              <img src="assets/iconos/branding.svg" alt="Icono Estrategia" class="servicio-icon-large">
+              <h3 class="servicio-title-long">Construcción de Identidad Estratégica</h3>
+              <p class="servicio-description">Definimos el ADN de tu marca, su posicionamiento y el camino para conectar con tu audiencia ideal de manera auténtica y memorable.</p>
+              <a href="servicios.html#estrategia" class="btn btn-primary">Conocer más</a>
+              <button class="servicio-close" aria-label="Cerrar">✕</button>
+            </div>
+          </div>
+
+          <!-- Item 2 -->
+          <div class="servicio-item" data-index="1">
+            <div class="servicio-header">
+              <img src="assets/iconos/redes_sociales.svg" alt="Icono Redes" class="servicio-icon">
+              <h3 class="servicio-title-short">Mejorar presencia digital</h3>
+            </div>
+            <div class="servicio-content">
+              <img src="assets/iconos/redes_sociales.svg" alt="Icono Redes" class="servicio-icon-large">
+              <h3 class="servicio-title-long">Comunidades que Convierten</h3>
+              <p class="servicio-description">Creamos contenido de valor y gestionamos tus redes para construir una comunidad activa, fiel y comprometida con tu marca.</p>
+              <a href="servicios.html#redes" class="btn btn-primary">Conocer más</a>
+              <button class="servicio-close" aria-label="Cerrar">✕</button>
+            </div>
+          </div>
+
+          <!-- Item 3 -->
+          <div class="servicio-item" data-index="2">
+            <div class="servicio-header">
+              <img src="assets/iconos/web.svg" alt="Icono Digital" class="servicio-icon">
+              <h3 class="servicio-title-short">Generar Contenido</h3>
+            </div>
+            <div class="servicio-content">
+              <img src="assets/iconos/web.svg" alt="Icono Digital" class="servicio-icon-large">
+              <h3 class="servicio-title-long">Experiencias Digitales Impactantes</h3>
+              <p class="servicio-description">Diseñamos y desarrollamos sitios web y plataformas digitales que no solo se ven bien, sino que generan resultados tangibles.</p>
+              <a href="servicios.html#digital" class="btn btn-primary">Conocer más</a>
+              <button class="servicio-close" aria-label="Cerrar">✕</button>
+            </div>
+          </div>
+
+          <!-- Item 4 -->
+          <div class="servicio-item" data-index="3">
+            <div class="servicio-header">
+              <img src="assets/iconos/automatizaciones.svg" alt="Icono Contenido" class="servicio-icon">
+              <h3 class="servicio-title-short">Automatizar procesos</h3>
+            </div>
+            <div class="servicio-content">
+              <img src="assets/iconos/automatizaciones.svg" alt="Icono Contenido" class="servicio-icon-large">
+              <h3 class="servicio-title-long">Historias que Enamoran</h3>
+              <p class="servicio-description">Producimos contenido audiovisual y gráfico de alta calidad que cuenta la historia de tu marca y cautiva a tu audiencia.</p>
+              <a href="servicios.html#contenido" class="btn btn-primary">Conocer más</a>
+              <button class="servicio-close" aria-label="Cerrar">✕</button>
+            </div>
+          </div>
+
+          <!-- Item 5 -->
+          <div class="servicio-item" data-index="4">
+            <div class="servicio-header">
+              <img src="assets/iconos/paid_media.svg" alt="Icono Pauta" class="servicio-icon">
+              <h3 class="servicio-title-short">Conseguir más clientes</h3>
+            </div>
+            <div class="servicio-content">
+              <img src="assets/iconos/paid_media.svg" alt="Icono Pauta" class="servicio-icon-large">
+              <h3 class="servicio-title-long">Campañas que Escalan Resultados</h3>
+              <p class="servicio-description">Gestionamos campañas de paid media en Meta, Google y LinkedIn para maximizar tu ROI y alcanzar a los clientes correctos.</p>
+              <a href="servicios.html#pauta" class="btn btn-primary">Conocer más</a>
+              <button class="servicio-close" aria-label="Cerrar">✕</button>
+            </div>
+          </div>
+
+          <!-- Item 6 -->
+          <div class="servicio-item" data-index="5">
+            <div class="servicio-header">
+              <img src="assets/iconos/ad_hoc.svg" alt="Icono Consultoría" class="servicio-icon">
+              <h3 class="servicio-title-short">Consultoría de Marketing</h3>
+            </div>
+            <div class="servicio-content">
+              <img src="assets/iconos/ad_hoc.svg" alt="Icono Consultoría" class="servicio-icon-large">
+              <h3 class="servicio-title-long">Asesoramiento Estratégico Integral</h3>
+              <p class="servicio-description">Te acompañamos en la toma de decisiones clave, optimizando tus recursos y alineando tu marketing con los objetivos de tu negocio.</p>
+              <a href="servicios.html#consultoria" class="btn btn-primary">Conocer más</a>
+              <button class="servicio-close" aria-label="Cerrar">✕</button>
+            </div>
+          </div>
+        </div>
+      </div>
     </section>
 
     <!-- Sección 3 -->
diff --git a/scripts/main.js b/scripts/main.js
index 2a1aa37..bed7f7d 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -79,6 +79,70 @@ function closeMenu() {
   }
 }
 
+
+/* ============================================
+   ACORDEÓN DE SERVICIOS
+   ============================================ */
+function initServiciosAccordion() {
+  const accordion = document.getElementById('servicios-accordion');
+  if (!accordion) {
+    console.log('Acordeón no encontrado');
+    return;
+  }
+
+  const items = accordion.querySelectorAll('.servicio-item');
+  console.log('Items encontrados:', items.length);
+
+  // Función para activar un item
+  function activateItem(item) {
+    if (item.classList.contains('is-active')) return;
+    
+    accordion.classList.add('has-active');
+    items.forEach(i => i.classList.remove('is-active'));
+    item.classList.add('is-active');
+  }
+
+  // Función para cerrar (volver al estado inicial)
+  function closeAll() {
+    accordion.classList.remove('has-active');
+    items.forEach(i => i.classList.remove('is-active'));
+  }
+
+  // Click en cada item para expandirlo
+  items.forEach((item, index) => {
+    console.log(`Agregando listener al item ${index}`);
+    
+    item.addEventListener('click', (e) => {
+      console.log('Click en item:', index);
+      
+      // Si el click fue en el botón cerrar o en un botón CTA, no activar
+      if (e.target.closest('.servicio-close')) {
+        console.log('Click en cerrar');
+        return;
+      }
+      if (e.target.closest('.btn')) {
+        console.log('Click en botón CTA');
+        return;
+      }
+      
+      activateItem(item);
+    });
+  });
+
+  // Click en los botones de cerrar
+  const closeButtons = accordion.querySelectorAll('.servicio-close');
+  closeButtons.forEach((btn, index) => {
+    console.log(`Agregando listener al botón cerrar ${index}`);
+    
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      console.log('Botón cerrar clicked');
+      closeAll();
+    });
+  });
+}
+
 /* ============================================
    INICIALIZACIÓN
    ============================================ */
@@ -119,4 +183,6 @@ document.addEventListener('DOMContentLoaded', async () => {
   // Año dinámico en el footer
   const yearEl = document.getElementById('current-year');
   if (yearEl) yearEl.textContent = new Date().getFullYear();
+
+  initServiciosAccordion();
 });
\ No newline at end of file
diff --git a/style/main.css b/style/main.css
index adfdb41..343a97f 100644
--- a/style/main.css
+++ b/style/main.css
@@ -1,7 +1,6 @@
 /* ============================================
    FUENTES DE MARCA
    ============================================ */
-
 @import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=Windsong&display=swap');
 
 /* ============================================
@@ -47,11 +46,12 @@
   --font-family-base: var(--font-body);
   --font-size-base: 16px;
 
-  /* Espaciados - se completarán */
+  /* Espaciados */
   --spacing-xs: 0.5rem;
   --spacing-sm: 1rem;
   --spacing-md: 2rem;
   --spacing-lg: 4rem;
+  --header-height: 72px;
 }
 
 /* Modo oscuro */
@@ -104,37 +104,29 @@ body {
   flex-direction: column;
   transition: background-color 0.3s ease, color 0.3s ease;
 }
-/* Títulos principales */
-h1,
-h2,
-h3 {
+
+h1, h2, h3 {
   font-family: var(--font-title);
   font-style: italic;
   font-weight: 700;
 }
 
-/* Subtítulos */
-h4,
-h5,
-h6 {
+h4, h5, h6 {
   font-family: var(--font-subtitle);
   font-style: italic;
   font-weight: 400;
 }
 
-/* Textos pequeños */
 small {
   font-family: var(--font-small);
 }
 
-/* Botones */
 button,
 .btn,
 [class*="btn-"] {
   font-family: var(--font-small);
 }
 
-/* Firmas / textos manuscritos */
 .signature,
 .firma {
   font-family: var(--font-signature);
@@ -166,7 +158,7 @@ ul {
 }
 
 /* ============================================
-   HEADER Y NAVEGACIÓN
+   HEADER Y LOGOS
    ============================================ */
 .site-header {
   background-color: var(--bg-surface);
@@ -186,7 +178,6 @@ ul {
   margin: 0 auto;
 }
 
-/* Logo */
 .logo {
   display: flex;
   align-items: center;
@@ -214,17 +205,15 @@ ul {
 }
 
 /* ============================================
-   ESTILOS DE BARRA DE NAVEGACIÓN (BOTONES)
+   BOTONES DE NAVEGACIÓN (HEADER)
    ============================================ */
-
-/* Contenedor general de acciones */
 .nav-actions {
   display: flex;
   gap: var(--spacing-sm);
   align-items: center;
 }
 
-/* Base común para botones (menú y tema) */
+/* Botón Menú */
 .menu-toggle {
   background: none;
   border: 1px solid var(--border);
@@ -233,21 +222,11 @@ ul {
   cursor: pointer;
   font-size: 0.95rem;
   font-weight: 500;
-  border-radius: 24px; /* Bordes redondeados modernos */
+  border-radius: 24px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem; /* Separación entre el icono y el texto */
-  transition: all 0.3s ease;
-}
-.theme-toggle {
-  background: none;
-  border: 1px solid var(--border);
-  color: var(--text-primary);
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  font-size: 1rem;
-  border-radius: 4px;
+  gap: 0.5rem;
   transition: all 0.3s ease;
 }
 
@@ -255,10 +234,6 @@ ul {
   background-color: var(--bg-surface-elevated);
   border-color: var(--text-primary);
 }
-.theme-toggle:hover {
-  background-color: var(--bg-surface-elevated);
-  border-color: var(--text-primary);
-}
 
 .menu-icon {
   width: 18px;
@@ -272,73 +247,67 @@ ul {
   transform: scale(1.08);
 }
 
-/* ============================================
-   SWITCH DE TEMA (ESPECÍFICO CON ANIMACIÓN)
-   ============================================ */
-
-/* Ajustes del botón contenedor para que sea relativo y un círculo */
+/* Botón Switch Tema (Circular) */
 .theme-toggle {
-  padding: 0; /* Removemos el padding para controlar el centrado */
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  padding: 0;
   width: 40px;
   height: 40px;
+  cursor: pointer;
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%; /* Es más estético como un círculo */
-  overflow: hidden; /* Mantiene la rotación dentro del botón */
-  position: relative; /* Esencial para superponer los iconos */
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.theme-toggle:hover {
+  background-color: var(--bg-surface-elevated);
+  border-color: var(--text-primary);
 }
 
-/* Estilos base para los iconos SVG */
 .theme-icon {
   width: 20px;
   height: 20px;
   display: block;
-  position: absolute; /* Superponemos los iconos uno encima del otro */
-  
-  /* === EL EFECTO: Transiciones suaves de opacidad y rotación === */
+  position: absolute;
   transition: transform 0.5s ease, opacity 0.5s ease;
 }
 
-/* --- LÓGICA DE VISIBILIDAD Y ANIMACIÓN CON DATA-THEME --- */
-
-/* 1. MODO CLARO (POR DEFECTO) O INICIAL */
-
-/* Sol (oculto en modo claro, rotado 180 grados y transparente) */
+/* Animación Switch Modo Claro */
 [data-theme="light"] .icon-sun,
 :root:not([data-theme="dark"]) .icon-sun {
   opacity: 0;
   transform: rotate(180deg);
-  pointer-events: none; /* No interactuable */
+  pointer-events: none;
 }
 
-/* Luna (visible en modo claro, posición normal y opaca) */
 [data-theme="light"] .icon-moon,
 :root:not([data-theme="dark"]) .icon-moon {
   opacity: 1;
   transform: rotate(0deg);
-  pointer-events: auto; /* Interactuable */
+  pointer-events: auto;
 }
 
-
-/* 2. MODO OSCURO */
-
-/* Sol (visible en modo oscuro, posición normal y opaco) */
+/* Animación Switch Modo Oscuro */
 [data-theme="dark"] .icon-sun {
   opacity: 1;
   transform: rotate(0deg);
-  pointer-events: auto; /* Interactuable */
+  pointer-events: auto;
 }
 
-/* Luna (oculta en modo oscuro, rotada negativamente y transparente) */
 [data-theme="dark"] .icon-moon {
   opacity: 0;
-  transform: rotate(-180deg); /* Rota en dirección opuesta al sol */
-  pointer-events: none; /* No interactuable */
+  transform: rotate(-180deg);
+  pointer-events: none;
 }
 
 /* ============================================
-   MENÚ DESPLEGABLE (desde abajo)
+   MENÚ DESPLEGABLE (CON EFECTO AURORA)
    ============================================ */
 .menu-overlay {
   position: fixed;
@@ -346,8 +315,9 @@ ul {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(34, 23, 40, 0.9);
-  backdrop-filter: blur(4px);
+  background-color: rgba(34, 23, 40, 0.55);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
@@ -364,24 +334,62 @@ ul {
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 52vh; /* Mitad del alto en desktop */
+  height: 52vh;
   background-color: var(--bg-surface);
+  border-top: 1px solid var(--border);
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   transform: translateY(100%);
-  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
   z-index: 999;
-  overflow-y: auto;
-  padding: var(--spacing-md) var(--spacing-lg);
-  box-shadow: 0 -10px 40px -5px rgba(0, 0, 0, 0.15);
+  overflow: hidden; /* Clave para contener los destellos de la aurora */
+  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
+  box-shadow: 0 -10px 40px -5px rgba(0, 0, 0, 0.2);
+  isolation: isolate;
 }
 
 .fullscreen-menu.is-open {
   transform: translateY(0);
 }
 
+/* --- CAPA 1 AURORA: Onda Esmeralda / Salvia --- */
+.fullscreen-menu::before {
+  content: "";
+  position: absolute;
+  top: -40%;
+  left: -20%;
+  width: 140%;
+  height: 180%;
+  pointer-events: none;
+  z-index: -2;
+  filter: blur(55px);
+  border-radius: 50%;
+  opacity: 0.35;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(0, 168, 140, 0.32) 0%,
+    rgba(0, 63, 82, 0.12) 45%,
+    transparent 70%
+  );
+  will-change: transform;
+}
+
+/* Aurora en Modo Oscuro */
+[data-theme="dark"] .fullscreen-menu::before {
+  opacity: 0.42;
+  mix-blend-mode: screen;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(0, 220, 160, 0.35) 0%,
+    rgba(11, 80, 102, 0.28) 45%,
+    transparent 70%
+  );
+}
+
+/* Botón de cierre */
 .menu-close {
   position: absolute;
+  z-index: 3;
   top: var(--spacing-sm);
   right: var(--spacing-md);
   background: none;
@@ -404,13 +412,18 @@ ul {
   transform: rotate(90deg);
 }
 
+/* Contenedor y columnas internas */
 .menu-content {
+  position: relative;
+  z-index: 2;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--spacing-lg);
   max-width: 1200px;
   margin: 0 auto;
   padding-top: 0.5rem;
+  max-height: 100%;
+  overflow-y: auto;
 }
 
 .menu-column h3 {
@@ -445,10 +458,9 @@ ul {
   transform: translateX(4px);
 }
 
-/* Columna 3 - Contacto y botones */
+/* Columna 3 - Info de Contacto */
 .menu-contact-info {
   margin-bottom: var(--spacing-sm);
-  
 }
 
 .menu-contact-info p {
@@ -457,6 +469,36 @@ ul {
   font-size: 0.9rem;
 }
 
+.contact-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  color: var(--text-primary);
+}
+
+.contact-icon {
+  width: 20px;
+  height: 16px;
+  display: inline-block;
+  background-color: currentColor;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+.icon-email {
+  -webkit-mask-image: url("../assets/iconos/buzon.svg");
+  mask-image: url("../assets/iconos/buzon.svg");
+}
+
+.icon-phone {
+  -webkit-mask-image: url("../assets/iconos/contacto.svg");
+  mask-image: url("../assets/iconos/contacto.svg");
+}
+
 .menu-social {
   display: flex;
   gap: var(--spacing-sm);
@@ -469,6 +511,7 @@ ul {
   color: var(--text-secondary);
 }
 
+/* Botones del Menú */
 .menu-buttons {
   display: flex;
   flex-direction: column;
@@ -479,37 +522,43 @@ ul {
   display: block;
   padding: 0.65rem 1.2rem;
   text-align: center;
-  border-radius: 999px; 
+  border-radius: 999px;
   font-weight: 600;
   font-size: 0.9rem;
   transition: all 0.25s ease;
+  transform: none !important; /* Evita heredar el translateX de los links */
 }
 
-.btn-menu-primary {
-  background-color: var(--btn-primary-bg);
+/* Botón 1: Sólido Primario */
+.menu-buttons .btn-menu-primary {
+  background-color: var(--btn-primary-bg) !important;
   color: var(--text-on-accent) !important;
   border: 1.5px solid var(--btn-primary-bg);
   box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35);
 }
 
-.btn-menu-primary:hover {
-  background-color: var(--btn-primary-hover);
+.menu-buttons .btn-menu-primary:hover {
+  background-color: var(--btn-primary-hover) !important;
   border-color: var(--btn-primary-hover);
-  transform: translateY(-1px);
+  color: var(--text-on-accent) !important;
+  transform: translateY(-1px) !important;
 }
 
-.btn-menu-secondary {
-  background-color: transparent;
+/* Botón 2: Outline Secundario */
+.menu-buttons .btn-menu-secondary {
+  background-color: transparent !important;
   border: 1.5px solid var(--text-secondary);
-  color: var(--text-primary);
+  color: var(--text-primary) !important;
 }
 
-.btn-menu-secondary:hover {
-  background-color: var(--bg-surface-elevated);
+.menu-buttons .btn-menu-secondary:hover {
+  background-color: var(--bg-surface-elevated) !important;
   border-color: var(--btn-primary-bg);
-  color: var(--btn-primary-bg);
-  transform: translateY(-1px);
+  color: var(--btn-primary-bg) !important;
+  transform: translateY(-1px) !important;
 }
+
+/* Logo en el menú (alineado a la derecha) */
 .menu-brand {
   margin-top: 1.75rem;
   display: flex;
@@ -528,38 +577,47 @@ ul {
 .menu-brand img:hover {
   opacity: 1;
 }
-.contact-item {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  color: var(--text-primary);
+
+/* ============================================
+   KEYFRAMES (ONDAS DE AURORA BOREAL)
+   ============================================ */
+@keyframes aurora-stream-1 {
+  0% {
+    transform: translate(0, 0) rotate(0deg) scale(1);
+  }
+  50% {
+    transform: translate(7%, 8%) rotate(10deg) scale(1.1);
+  }
+  100% {
+    transform: translate(-5%, -6%) rotate(-6deg) scale(0.96);
+  }
 }
 
-.contact-icon {
-  width: 24px;
-  height: 16px;
-  display: inline-block;
-  background-color: currentColor;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-size: contain;
-  mask-size: contain;
+@keyframes aurora-stream-2 {
+  0% {
+    transform: translate(0, 0) rotate(0deg) scale(1);
+  }
+  50% {
+    transform: translate(-8%, -5%) rotate(-12deg) scale(1.14);
+  }
+  100% {
+    transform: translate(6%, 7%) rotate(8deg) scale(0.94);
+  }
 }
 
-.icon-email {
-  -webkit-mask-image: url("../assets/iconos/buzon.svg");
-  mask-image: url("../assets/iconos/buzon.svg");
+@media (prefers-reduced-motion: reduce) {
+  .fullscreen-menu::before,
+  .fullscreen-menu::after {
+    animation: none;
+  }
 }
-.icon-phone {
-  -webkit-mask-image: url("../assets/iconos/contacto.svg");
-  mask-image: url("../assets/iconos/contacto.svg");
-}
-/* Responsive - Mobile */
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
 @media (max-width: 768px) {
   .fullscreen-menu {
-    height: 85vh; /* En mobile ocupa más espacio */
+    height: 85vh;
     padding: var(--spacing-md);
     padding-bottom: var(--spacing-lg);
   }
@@ -568,17 +626,16 @@ ul {
     grid-template-columns: 1fr;
     gap: var(--spacing-md);
   }
-  
+
   .menu-column h3 {
     font-size: 1.1rem;
   }
-  
+
   .menu-column a {
     font-size: 1rem;
   }
 }
 
-/* Pantallas muy pequeñas */
 @media (max-width: 480px) {
   .fullscreen-menu {
     height: 90vh;
@@ -586,7 +643,7 @@ ul {
 }
 
 /* ============================================
-   SECCIONES BÁSICAS
+   SECCIONES Y FOOTER
    ============================================ */
 main section {
   padding: var(--spacing-md) var(--spacing-sm);
@@ -598,9 +655,6 @@ main section h2 {
   font-size: 1.5rem;
 }
 
-/* ============================================
-   FOOTER
-   ============================================ */
 .site-footer {
   border-top: 1px solid var(--border);
   padding: var(--spacing-md) var(--spacing-sm);
@@ -629,4 +683,443 @@ main section h2 {
   text-align: center;
   font-size: 0.875rem;
   color: var(--text-muted);
+}
+
+/* ============================================
+   SECCION HERO
+   ============================================ */
+
+.hero-section {
+  min-height: calc(100vh - var(--header-height));
+  background-color: var(--bg-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-lg) var(--spacing-md);
+  text-align: center;
+}
+
+.hero-content {
+  max-width: 900px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+/* Título */
+.hero-title {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-weight: 700;
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  line-height: 1.15;
+  color: var(--text-primary);
+  opacity: 0;
+  transform: translateY(30px);
+  animation: fadeInUp 0.9s ease-out 0.2s forwards;
+}
+
+/* Subtítulo */
+.hero-subtitle {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-weight: 400;
+  font-size: clamp(1rem, 2vw, 1.25rem);
+  line-height: 1.5;
+  color: var(--text-muted);
+  max-width: 700px;
+  opacity: 0;
+  transform: translateY(30px);
+  animation: fadeInUp 0.9s ease-out 0.5s forwards;
+}
+
+/* Grupo de botones */
+.hero-cta-group {
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: var(--spacing-sm);
+  opacity: 0;
+  transform: translateY(30px);
+  animation: fadeInUp 0.9s ease-out 0.8s forwards;
+}
+/* ============================================
+   BOTONES (reutilizables)
+   ============================================ */
+.btn {
+  display: inline-block;
+  padding: 0.85rem 2rem;
+  border-radius: 999px;
+  font-family: var(--font-small);
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+}
+
+/* Botón Primario (sólido) */
+.btn-primary {
+  background-color: var(--btn-primary-bg);
+  color: var(--text-on-accent);
+  border: 1.5px solid var(--btn-primary-bg);
+  box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35);
+}
+
+.btn-primary:hover {
+  background-color: var(--btn-primary-hover);
+  border-color: var(--btn-primary-hover);
+  color: var(--text-on-accent);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px -3px rgba(186, 18, 77, 0.45);
+}
+
+/* Botón Secundario (outline) */
+.btn-secondary {
+  background-color: transparent;
+  color: var(--text-primary);
+  border: 1.5px solid var(--text-secondary);
+}
+
+.btn-secondary:hover {
+  background-color: var(--bg-surface-elevated);
+  border-color: var(--btn-primary-bg);
+  color: var(--btn-primary-bg);
+  transform: translateY(-2px);
+}
+
+/* ============================================
+   ANIMACIONES
+   ============================================ */
+
+/* Fade-in hacia arriba (entrada escalonada) */
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Shake sutil para llamar la atención (cada 6s) */
+@keyframes attentionShake {
+  0%, 85%, 100% {
+    transform: translateX(0) rotate(0deg);
+  }
+  87% {
+    transform: translateX(-4px) rotate(-1deg);
+  }
+  89% {
+    transform: translateX(4px) rotate(1deg);
+  }
+  91% {
+    transform: translateX(-3px) rotate(-0.5deg);
+  }
+  93% {
+    transform: translateX(3px) rotate(0.5deg);
+  }
+  95% {
+    transform: translateX(0) rotate(0deg);
+  }
+}
+
+.hero-cta-primary {
+  animation: attentionShake 6s ease-in-out infinite;
+}
+
+/* Pausar shake en hover para no interferir con la interacción */
+.hero-cta-primary:hover {
+  animation-play-state: paused;
+}
+
+/* Respetar preferencia de movimiento reducido */
+@media (prefers-reduced-motion: reduce) {
+  .hero-title,
+  .hero-subtitle,
+  .hero-cta-group {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+  .hero-cta-primary {
+    animation: none;
+  }
+}
+
+
+/* ============================================
+   RESPONSIVE HERO
+   ============================================ */
+@media (max-width: 768px) {
+  .hero-section {
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+  
+  .hero-cta-group {
+    flex-direction: column;
+    width: 100%;
+    max-width: 320px;
+  }
+  
+  .btn {
+    width: 100%;
+  }
+}
+
+/* ============================================
+   SECCIÓN SERVICIOS (ACORDEÓN INTERACTIVO)
+   ============================================ */
+.servicios-section {
+  padding: var(--spacing-lg) var(--spacing-md);
+  background-color: var(--bg-base);
+}
+
+.servicios-container {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr;
+  gap: var(--spacing-lg);
+  max-width: 1400px;
+  margin: 0 auto;
+  align-items: center;
+  min-height: 600px;
+}
+
+/* Columna Izquierda */
+.servicios-intro {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  align-items: flex-start;
+}
+
+.servicios-title {
+  font-size: clamp(2rem, 4vw, 3rem);
+  color: var(--text-primary);
+  line-height: 1.1;
+}
+
+.servicios-subtitle {
+  font-size: 1.1rem;
+  color: var(--text-muted);
+  max-width: 400px;
+  line-height: 1.6;
+}
+
+.servicios-intro .btn {
+  margin-top: var(--spacing-sm);
+}
+
+/* Columna Derecha: Acordeón */
+.servicios-accordion {
+  position: relative;
+  width: 100%;
+  height: 600px;
+  background-color: var(--bg-surface);
+  border-radius: 16px;
+  padding: var(--spacing-md);
+  box-shadow: var(--shadow);
+  border: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  overflow: hidden;
+}
+
+/* Items del acordeón */
+.servicio-item {
+  flex: 1;
+  background-color: var(--bg-surface-elevated);
+  border-radius: 12px;
+  padding: var(--spacing-sm) var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+  border: 1px solid var(--border);
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  position: relative;
+  min-height: 0;
+}
+
+.servicio-item:hover:not(.is-active) {
+  background-color: var(--bg-surface);
+  border-color: var(--text-secondary);
+  transform: translateX(4px);
+}
+
+/* Estado activo (expandido) */
+.servicio-item.is-active {
+  flex: 10;
+  background-color: var(--bg-surface-elevated);
+  box-shadow: 0 8px 30px -5px rgba(0, 0, 0, 0.1);
+  border-color: var(--btn-primary-bg);
+}
+
+/* Items colapsados (cuando hay uno activo) */
+.servicios-accordion.has-active .servicio-item:not(.is-active) {
+  flex: 0;
+  min-height: 0;
+  padding: 0 var(--spacing-md);
+  opacity: 0;
+  pointer-events: none;
+  border-color: transparent;
+}
+
+/* Header del item (contraído) */
+.servicio-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  transition: opacity 0.3s ease;
+}
+
+.servicio-icon {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.servicio-title-short {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: 1.1rem;
+  color: var(--text-primary);
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+/* Contenido del item (expandido) */
+.servicio-content {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  max-width: 500px;
+  height: 100%;
+  padding: var(--spacing-md);
+  opacity: 0;
+  transform: translateY(10px);
+  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
+}
+
+.servicio-item.is-active .servicio-header {
+  display: none;
+}
+
+.servicio-item.is-active .servicio-content {
+  display: flex;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.servicio-icon-large {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+  margin-bottom: var(--spacing-xs);
+}
+
+.servicio-title-long {
+  font-family: var(--font-title);
+  font-style: italic;
+  font-size: clamp(1.5rem, 2.5vw, 2rem);
+  color: var(--text-primary);
+  font-weight: 700;
+  line-height: 1.2;
+  text-align: center;
+}
+
+.servicio-description {
+  font-family: var(--font-body);
+  font-size: 1rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+  text-align: center;
+  max-width: 450px;
+}
+
+.servicio-content .btn {
+  margin-top: var(--spacing-xs);
+}
+
+/* Botón cerrar */
+.servicio-close {
+  position: absolute;
+  top: var(--spacing-sm);
+  right: var(--spacing-sm);
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 1.2rem;
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.25s ease;
+  z-index: 5;
+}
+
+.servicio-close:hover {
+  color: var(--btn-primary-bg);
+  background-color: var(--bg-surface);
+  border-color: var(--btn-primary-bg);
+  transform: rotate(90deg);
+}
+
+/* ============================================
+   RESPONSIVE SERVICIOS
+   ============================================ */
+@media (max-width: 968px) {
+  .servicios-container {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-md);
+    min-height: auto;
+  }
+  
+  .servicios-accordion {
+    height: 500px;
+  }
+  
+  .servicios-intro {
+    text-align: center;
+    align-items: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .servicios-accordion {
+    height: 450px;
+    padding: var(--spacing-sm);
+  }
+  
+  .servicio-title-short {
+    font-size: 0.95rem;
+  }
+  
+  .servicio-title-long {
+    font-size: 1.3rem;
+  }
+  
+  .servicio-icon-large {
+    width: 48px;
+    height: 48px;
+  }
 }
\ No newline at end of file