inicio-servicios finish
This commit is contained in:
@@ -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>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
+6
-6
@@ -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>
|
||||
|
||||
|
||||
+113
-8
@@ -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 -->
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
+609
-116
@@ -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;
|
||||
@@ -483,33 +526,39 @@ ul {
|
||||
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);
|
||||
}
|
||||
@@ -578,7 +636,6 @@ ul {
|
||||
}
|
||||
}
|
||||
|
||||
/* 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);
|
||||
@@ -630,3 +684,442 @@ main section h2 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user