fanfuso/ayr2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mejoras en el blog

Browse Source
This commit is contained in:
fanfuso
2026-09-22 21:21:19 -03:00
parent 0a88f4df20
commit 28cce9a68c
14 changed files with 427 additions and 734 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/img/icono.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

assets/img/logo_blog.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

assets/img/logo_blog_dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

assets/img/logoblog_claro.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

assets/img/logoblog_oscuro.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

assets/logos/facebook.svg
+15
View File
@@ -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="64px" height="64px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 5.34 5.31"
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="_2347189464160">
<path fill="#221728" fill-opacity="0.250980" d="M2.67 0c1.47,0 2.67,1.19 2.67,2.65 0,1.47 -1.2,2.66 -2.67,2.66 -1.47,0 -2.67,-1.19 -2.67,-2.66 0,-1.46 1.2,-2.65 2.67,-2.65z"/>
<path fill="#221728" d="M0.24 3.79c0.29,0.65 0.98,1.28 1.78,1.46l0 -1.77 -0.55 0 -0.01 -0.83 0.55 0.01c0.06,-0.62 -0.02,-1.13 0.4,-1.44 0.39,-0.27 0.98,-0.27 1.5,-0.18l-0.01 0.75c-0.78,-0.05 -0.96,0.06 -0.9,0.87l0.86 -0.01 -0.16 0.83 -0.71 0.01 0 1.82c0.92,-0.08 1.72,-0.74 2.08,-1.47 0.29,-0.61 0.35,-1.32 0.15,-1.96 -0.14,-0.43 -0.36,-0.82 -0.66,-1.11 -1.06,-1.03 -2.83,-1.04 -3.86,0.05 -0.73,0.78 -0.9,2 -0.46,2.97z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

assets/logos/instagram.svg
+17
View File
@@ -0,0 +1,17 @@
<?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="64px" height="64px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 7.24 7.24"
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="_2346936265280">
<path fill="#221728" d="M2.1 0.58c0.23,-0.02 0.51,0 0.75,0 0.51,0 1.01,0 1.52,0 0.25,0 0.52,-0.01 0.76,0 0.83,0.04 1.48,0.69 1.53,1.51 0.01,0.24 0,0.52 0,0.76l0 1.52c0,0.25 0.01,0.52 0,0.76 -0.04,0.83 -0.69,1.48 -1.52,1.53 -0.23,0.01 -0.51,0 -0.75,0l-1.52 0c-0.25,0 -0.52,0.01 -0.76,0 -0.83,-0.04 -1.48,-0.69 -1.53,-1.52 -0.02,-0.23 0,-0.51 0,-0.75l0 -1.52c0,-0.53 -0.06,-0.91 0.15,-1.37 0.23,-0.51 0.75,-0.88 1.37,-0.92zm-0.02 -0.57c-1.02,0.06 -1.77,0.77 -2,1.62 -0.08,0.28 -0.08,0.51 -0.08,0.82l0 1.81c0,0.29 -0.01,0.61 0.01,0.9 0.05,1.01 0.78,1.78 1.61,2 0.29,0.07 0.52,0.07 0.83,0.07 0.6,0 1.2,0 1.81,0 0.29,0 0.61,0.02 0.9,0 1.01,-0.05 1.77,-0.77 2,-1.62 0.07,-0.28 0.07,-0.51 0.07,-0.82l0 -1.81c0,-0.29 0.01,-0.61 0,-0.9 -0.06,-1.01 -0.78,-1.78 -1.62,-2 -0.28,-0.08 -0.51,-0.07 -0.82,-0.07l-1.81 0c-0.29,0 -0.62,-0.02 -0.9,0z"/>
<path fill="#221728" d="M3.53 2.29c0.27,-0.02 0.58,0.06 0.8,0.2 0.1,0.07 0.1,0.07 0.18,0.14 0.11,0.09 0.22,0.23 0.29,0.38 0.21,0.41 0.2,0.93 -0.05,1.32 -0.07,0.11 -0.07,0.09 -0.14,0.18 -0.1,0.11 -0.25,0.23 -0.38,0.3 -0.16,0.07 -0.32,0.12 -0.52,0.14 -0.77,0.05 -1.37,-0.54 -1.42,-1.24 -0.01,-0.21 0.02,-0.41 0.09,-0.58 0.07,-0.18 0.14,-0.27 0.25,-0.41 0.21,-0.25 0.56,-0.4 0.9,-0.43zm-0.01 -0.57c-1.02,0.06 -1.86,0.92 -1.8,2 0.05,1.01 0.92,1.86 2,1.8 1.01,-0.06 1.86,-0.92 1.8,-2.01 -0.06,-1 -0.92,-1.85 -2,-1.79z"/>
<path fill="#221728" fill-opacity="0.250980" d="M3.53 2.29c-0.34,0.03 -0.69,0.18 -0.9,0.43 -0.11,0.14 -0.18,0.23 -0.25,0.41 -0.07,0.17 -0.1,0.37 -0.09,0.58 0.05,0.7 0.65,1.29 1.42,1.24 0.2,-0.02 0.36,-0.07 0.52,-0.14 0.13,-0.07 0.28,-0.19 0.38,-0.3 0.07,-0.09 0.07,-0.07 0.14,-0.18 0.25,-0.39 0.26,-0.91 0.05,-1.32 -0.07,-0.15 -0.18,-0.29 -0.29,-0.38 -0.08,-0.07 -0.08,-0.07 -0.18,-0.14 -0.22,-0.14 -0.53,-0.22 -0.8,-0.2zm-0.01 -0.57c1.08,-0.06 1.94,0.79 2,1.79 0.06,1.09 -0.79,1.95 -1.8,2.01 -1.08,0.06 -1.95,-0.79 -2,-1.8 -0.06,-1.08 0.78,-1.94 1.8,-2zm1.95 -0.38c0.22,-0.03 0.4,0.13 0.43,0.32 0.03,0.22 -0.13,0.41 -0.32,0.43 -0.23,0.04 -0.41,-0.13 -0.44,-0.32 -0.03,-0.23 0.14,-0.4 0.33,-0.43zm-3.37 -0.76c-0.62,0.04 -1.14,0.41 -1.37,0.92 -0.21,0.46 -0.15,0.84 -0.15,1.37l0 1.52c0,0.24 -0.02,0.52 0,0.75 0.05,0.83 0.7,1.48 1.53,1.52 0.24,0.01 0.51,0 0.76,0l1.52 0c0.24,0 0.52,0.01 0.75,0 0.83,-0.05 1.48,-0.7 1.52,-1.53 0.01,-0.24 0,-0.51 0,-0.76l0 -1.52c0,-0.24 0.01,-0.52 0,-0.76 -0.05,-0.82 -0.7,-1.47 -1.53,-1.51 -0.24,-0.01 -0.51,0 -0.76,0 -0.51,0 -1.01,0 -1.52,0 -0.24,0 -0.52,-0.02 -0.75,0z"/>
<path fill="#221728" d="M5.47 1.34c-0.19,0.03 -0.36,0.2 -0.33,0.43 0.03,0.19 0.21,0.36 0.44,0.32 0.19,-0.02 0.35,-0.21 0.32,-0.43 -0.03,-0.19 -0.21,-0.35 -0.43,-0.32z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

assets/logos/linkedin.svg
+15
View File
@@ -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="64px" height="64px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 4.52 4.52"
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="_2346933204656">
<polygon fill="#221728" fill-opacity="0.250980" stroke="#373435" stroke-width="0.02" stroke-miterlimit="22.9256" stroke-opacity="0.250980" points="0.28,0.35 4.19,0.35 4.19,4.2 0.28,4.2 "/>
<path fill="#221728" d="M0.7 1.72l0.67 0c0.01,0.16 0,0.37 0,0.54l0 1.49c0,0.02 0,0.05 0,0.07 0,0.03 0.01,0.03 -0.01,0.05l-0.66 0 0 -2.15zm1.73 0.29c0.05,-0.03 0.06,-0.14 0.26,-0.25 0.31,-0.18 0.87,-0.13 1.06,0.24 0.13,0.26 0.12,0.55 0.12,0.87 0,0.33 0,0.67 0,1l-0.67 0c0,-0.33 0,-0.67 0,-1 0,-0.32 0,-0.63 -0.37,-0.62 -0.35,0.02 -0.38,0.31 -0.38,0.63 0,0.33 0,0.66 0,0.99l-0.66 0 0 -2.15 0.64 0 0 0.29zm-1.45 -1.36c0.22,-0.03 0.41,0.13 0.44,0.33 0.07,0.51 -0.69,0.61 -0.77,0.12 -0.04,-0.24 0.13,-0.42 0.33,-0.45zm-0.4 -0.64c-0.3,0.04 -0.54,0.26 -0.57,0.56 -0.02,0.15 -0.01,2.5 -0.01,2.82 0,0.16 -0.01,0.4 0.01,0.55 0.03,0.3 0.27,0.53 0.56,0.57 0.15,0.01 2.49,0 2.82,0 0.16,0 0.4,0.02 0.55,0 0.3,-0.04 0.53,-0.27 0.57,-0.57 0.01,-0.14 0,-2.49 0,-2.81 0,-0.16 0.02,-0.4 0,-0.56 -0.04,-0.29 -0.27,-0.53 -0.57,-0.56 -0.14,-0.02 -2.49,-0.01 -2.81,-0.01 -0.16,0 -0.4,-0.01 -0.55,0.01z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

assets/logos/whatsapp.svg
+16
View File
@@ -0,0 +1,16 @@
<?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="40px" height="40px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 10.64 10.63"
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="_2348118537696">
<path fill="#221728" d="M3.3 2.99c-0.45,0.32 -0.61,0.87 -0.5,1.4 0.19,1 1.46,2.29 2.19,2.7 0.09,0.05 0.24,0.11 0.32,0.17l0.63 0.27c0.2,0 0.52,0.22 0.99,0.11 0.21,-0.04 0.44,-0.14 0.6,-0.27 0.17,-0.16 0.34,-0.37 0.37,-0.61 0.02,-0.14 0,-0.23 -0.04,-0.29 -0.1,-0.18 -0.78,-0.61 -1.09,-0.63 -0.2,-0.01 -0.25,-0.01 -0.36,0.12 -0.02,0.05 -0.14,0.2 -0.21,0.31 -0.06,0.1 -0.12,0.24 -0.28,0.23 -0.6,-0.11 -1.43,-0.9 -1.76,-1.42 -0.09,-0.15 -0.1,-0.24 0,-0.37 0.11,-0.15 0.25,-0.26 0.31,-0.5 0.02,-0.3 -0.22,-0.88 -0.41,-1.12 -0.06,-0.07 -0.11,-0.12 -0.21,-0.16 -0.04,-0.02 -0.08,-0.03 -0.12,-0.03 -0.14,-0.02 -0.16,-0.03 -0.27,0.02l-0.16 0.07z"/>
<path fill="#221728" fill-opacity="0.250980" stroke="#373435" stroke-width="0.03" stroke-miterlimit="22.9256" stroke-opacity="0.250980" d="M1.2 4.14c0.04,-0.15 0.15,-0.53 0.2,-0.58 0.11,-0.44 0.86,-1.29 1.14,-1.53 0.48,-0.39 1.09,-0.71 1.75,-0.89 1.46,-0.42 3.02,0.07 4.09,1.13 0.17,0.17 0.33,0.36 0.48,0.58 0.25,0.35 0.54,0.9 0.62,1.33 0.1,0.22 0.15,0.85 0.15,1.14 0,0.17 -0.02,0.44 -0.07,0.73 -0.09,0.61 -0.25,0.99 -0.56,1.51 -0.05,0.09 -0.16,0.25 -0.23,0.34 -1.27,1.7 -3.59,2.24 -5.52,1.17 -0.06,-0.03 -0.19,-0.09 -0.22,-0.14 -0.18,-0.06 -0.53,0.1 -0.73,0.14 -0.06,0.03 -0.45,0.13 -0.51,0.12 -0.06,0.06 -0.38,0.12 -0.45,0.13 0.02,-0.14 0.1,-0.37 0.11,-0.4l0.02 -0.03c-0.01,-0.08 0.24,-1 0.28,-1.1 0.01,-0.1 -0.01,-0.09 -0.04,-0.17 -0.05,-0.04 -0.24,-0.4 -0.28,-0.5 -0.41,-0.58 -0.46,-1.92 -0.33,-2.61 0.01,-0.07 0.07,-0.28 0.1,-0.37zm2.1 -1.15c-0.45,0.32 -0.61,0.87 -0.5,1.4 0.19,1 1.46,2.29 2.19,2.7 0.09,0.05 0.24,0.11 0.32,0.17l0.63 0.27c0.2,0 0.52,0.22 0.99,0.11 0.21,-0.04 0.44,-0.14 0.6,-0.27 0.17,-0.16 0.34,-0.37 0.37,-0.61 0.02,-0.14 0,-0.23 -0.04,-0.29 -0.1,-0.18 -0.78,-0.61 -1.09,-0.63 -0.2,-0.01 -0.25,-0.01 -0.36,0.12 -0.02,0.05 -0.14,0.2 -0.21,0.31 -0.06,0.1 -0.12,0.24 -0.28,0.23 -0.6,-0.11 -1.43,-0.9 -1.76,-1.42 -0.09,-0.15 -0.1,-0.24 0,-0.37 0.11,-0.15 0.25,-0.26 0.31,-0.5 0.02,-0.3 -0.22,-0.88 -0.41,-1.12 -0.06,-0.07 -0.11,-0.12 -0.21,-0.16 -0.04,-0.02 -0.08,-0.03 -0.12,-0.03 -0.14,-0.02 -0.16,-0.03 -0.27,0.02l-0.16 0.07z"/>
<path fill="#221728" d="M1.2 4.14c0.04,-0.15 0.15,-0.53 0.2,-0.58 0.11,-0.44 0.86,-1.29 1.14,-1.53 0.48,-0.39 1.09,-0.71 1.75,-0.89 1.46,-0.42 3.02,0.07 4.09,1.13 0.17,0.17 0.33,0.36 0.48,0.58 0.25,0.35 0.54,0.9 0.62,1.33 0.1,0.22 0.15,0.85 0.15,1.14 0,0.17 -0.02,0.44 -0.07,0.73 -0.09,0.61 -0.25,0.99 -0.56,1.51 -0.05,0.09 -0.16,0.25 -0.23,0.34 -1.27,1.7 -3.59,2.24 -5.52,1.17 -0.06,-0.03 -0.19,-0.09 -0.22,-0.14 -0.18,-0.06 -0.53,0.1 -0.73,0.14 -0.06,0.03 -0.45,0.13 -0.51,0.12 -0.06,0.06 -0.38,0.12 -0.45,0.13 0.02,-0.14 0.1,-0.37 0.11,-0.4l0.02 -0.03c-0.01,-0.08 0.24,-1 0.28,-1.1 0.01,-0.1 -0.01,-0.09 -0.04,-0.17 -0.05,-0.04 -0.24,-0.4 -0.28,-0.5 -0.41,-0.58 -0.46,-1.92 -0.33,-2.61 0.01,-0.07 0.07,-0.28 0.1,-0.37zm0.59 -2.77c-0.42,0.4 -0.74,0.73 -1.05,1.28 -0.06,0.1 -0.11,0.2 -0.16,0.3 -0.06,0.11 -0.1,0.2 -0.15,0.32l-0.09 0.25c-0.03,0.07 -0.01,0.04 -0.05,0.08 0,0.09 -0.13,0.49 -0.16,0.64 -0.05,0.23 -0.08,0.47 -0.09,0.71 -0.06,0.81 0.1,1.3 0.1,1.5 0.04,0.04 0.08,0.26 0.09,0.33 0.04,0.13 0.08,0.23 0.11,0.35 0.04,0.05 0.14,0.33 0.18,0.41 0.05,0.11 0.18,0.28 0.15,0.41 -0.02,0.09 -0.23,0.9 -0.25,0.92 -0.03,0.13 -0.07,0.25 -0.1,0.37 -0.01,0.07 -0.06,0.29 -0.1,0.34 -0.32,1.01 -0.35,1.14 0.35,0.99 0.03,-0.02 0.48,-0.13 0.54,-0.13l0.64 -0.18c0.04,-0.03 0.47,-0.14 0.53,-0.14 0.01,0 0.01,-0.01 0.04,-0.02 0.03,-0.01 0.04,-0.01 0.08,-0.02 0.08,-0.03 0.21,-0.05 0.31,-0.08 0.12,-0.04 0.17,0.01 0.28,0.07 0.14,0.07 0.48,0.19 0.56,0.24 0.11,0.02 0.21,0.07 0.32,0.1 0.25,0.06 0.45,0.12 0.72,0.15 0.14,0.02 0.27,0.04 0.41,0.05 0.28,0.01 0.63,0.01 0.9,-0.03 0.95,-0.15 2.17,-0.61 2.88,-1.24 0.06,-0.06 0.02,-0.03 0.09,-0.06 0.02,-0.04 0.04,-0.05 0.08,-0.09 0.04,-0.03 0.06,-0.05 0.1,-0.09 0.55,-0.56 1.28,-1.87 1.46,-2.62 0.27,-1.19 0.02,-1.89 0.04,-2.19 -0.04,-0.05 -0.03,-0.09 -0.05,-0.18 -0.05,-0.22 -0.12,-0.38 -0.16,-0.56 -0.02,-0.03 -0.21,-0.5 -0.21,-0.54 -0.05,-0.03 -0.06,-0.08 -0.08,-0.13 -0.06,-0.08 -0.09,-0.17 -0.14,-0.25 -0.05,-0.07 -0.11,-0.16 -0.14,-0.24 -0.1,-0.11 -0.19,-0.28 -0.33,-0.43 -0.07,-0.07 -0.12,-0.14 -0.18,-0.21 -0.12,-0.15 -0.45,-0.45 -0.57,-0.55 -0.54,-0.46 -1.49,-0.87 -2.19,-1.07 -0.53,-0.09 -0.99,-0.17 -1.55,-0.11 -0.27,0.02 -0.48,0.04 -0.73,0.1 -0.51,0.11 -0.91,0.26 -1.32,0.48 -0.41,0.21 -0.78,0.45 -1.11,0.77z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

blog.html
+13 -145
View File
@@ -4,9 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Blog de Amor y Roma. Estrategia, branding, desarrollo web y marketing digital con esencia y solidez.">
<title>Blog | Amor y Roma — Recursos y Estrategias</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
<link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
<title>Blog | Amor y Roma — Recursos y Estrategias</title>
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/blog.css">
</head>
@@ -80,144 +79,29 @@
</div>
</section>
<!-- DESTACADOS -->
<section class="featured-posts" id="featured-posts">
<!-- DESTACADOS (Se llena dinámicamente con JS) -->
<section class="featured-posts" id="featured-posts" style="display: none;">
<div class="section-header">
<h2 class="section-title">Más leídos</h2>
<p class="section-subtitle">Los artículos que más están ayudando a marcas como la tuya.</p>
</div>
<div class="featured-grid">
<!-- Artículo Destacado 1 -->
<article class="featured-card" data-categories="branding" data-featured="true">
<div class="featured-image">
<img src="assets/blog/logo-marca.jpg" alt="Tu logo no es tu marca">
<span class="featured-badge">Destacado</span>
</div>
<div class="featured-content">
<div class="featured-meta">
<span class="category-tag branding">Branding</span>
<time datetime="2024-01-18">10 Jun 2026</time>
</div>
<h3 class="featured-title">Tu logo no es tu marca (y por qué importa)</h3>
<p class="featured-excerpt">
Muchos emprendedores confunden el símbolo con la sustancia. Tener un logo bonito no es tener una marca.
</p>
<div class="featured-footer">
<span class="reading-time">⏱ 6 min de lectura</span>
<a href="articulos/to-logo-no-es-tu-marca.html" class="btn-read">Leer artículo →</a>
</div>
</div>
</article>
<!-- Artículo Destacado 2 -->
<article class="featured-card" data-categories="web" data-featured="true">
<div class="featured-image">
<img src="assets/blog/landing-page.jpg" alt="Landing pages que convierten">
<span class="featured-badge">Destacado</span>
</div>
<div class="featured-content">
<div class="featured-meta">
<span class="category-tag web">Web</span>
<time datetime="2024-01-10">15 Jul 2026</time>
</div>
<h3 class="featured-title">Landing pages que convierten: 7 principios probados</h3>
<p class="featured-excerpt">
No es magia, es método. Una landing page efectiva no depende de la suerte ni de tendencias pasajeras.
</p>
<div class="featured-footer">
<span class="reading-time"> 8 min de lectura</span>
<a href="articulos/landing-pages-que-convierten.html" class="btn-read">Leer artículo →</a>
</div>
</div>
</article>
<!-- Artículo Destacado 3 -->
<article class="featured-card" data-categories="automatizaciones" data-featured="true">
<div class="featured-image">
<img src="assets/blog/automatizacion.jpg" alt="Automatizaciones en Instagram">
<span class="featured-badge">Destacado</span>
</div>
<div class="featured-content">
<div class="featured-meta">
<span class="category-tag automatizaciones">Automatizaciones</span>
<time datetime="2024-01-05">12 Ago 2026</time>
</div>
<h3 class="featured-title">Automatizaciones en Instagram: de 0 a 100 leads/mes</h3>
<p class="featured-excerpt">
Responder el mismo mensaje 50 veces al día no es escalable. Las automatizaciones bien hechas te permiten captar prospectos.
</p>
<div class="featured-footer">
<span class="reading-time">⏱ 9 min de lectura</span>
<a href="articulos/automatizaciones-instagram.html" class="btn-read">Leer artículo →</a>
</div>
</div>
</article>
<div class="featured-grid" id="featured-grid">
<!-- JS inyecta las tarjetas aquí -->
</div>
</section>
<!-- GRID DE ARTÍCULOS
<!-- GRID DE ARTÍCULOS (Se llena dinámicamente con JS) -->
<section class="blog-grid-section">
<div class="section-header">
<h2 class="section-title" id="grid-section-title">Ideas frescas</h2>
<p class="section-subtitle">Encontrá nuestros últimos articulos de vanguardia.</p>
</div>
<div class="blog-grid" id="blog-grid">
<article class="blog-card" data-categories="branding" data-featured="true">
<div class="card-image">
<img src="assets/blog/logo-marca.jpg" alt="Tu logo no es tu marca">
<span class="card-category branding">Branding</span>
</div>
<div class="card-content">
<div class="card-meta">
<time datetime="2024-01-18">18 Ene 2024</time>
<span class="reading-time-mini">6 min</span>
</div>
<h3 class="card-title">Tu logo no es tu marca (y por qué importa)</h3>
<p class="card-excerpt">
Muchos emprendedores confunden el símbolo con la sustancia. Tener un logo bonito no es tener una marca.
</p>
<a href="articulos/tu-logo-no-es-tu-marca.html" class="card-link">Leer artículo</a>
</div>
</article>
<article class="blog-card" data-categories="web" data-featured="true">
<div class="card-image">
<img src="assets/blog/landing-page.jpg" alt="Landing pages que convierten">
<span class="card-category web">Web</span>
</div>
<div class="card-content">
<div class="card-meta">
<time datetime="2024-01-10">10 Ene 2024</time>
<span class="reading-time-mini">8 min</span>
</div>
<h3 class="card-title">Landing pages que convierten: 7 principios probados</h3>
<p class="card-excerpt">
No es magia, es método. Una landing page efectiva no depende de la suerte.
</p>
<a href="articulos/landing-pages-que-convierten.html" class="card-link">Leer artículo</a>
</div>
</article>
<article class="blog-card" data-categories="automatizaciones" data-featured="true">
<div class="card-image">
<img src="assets/blog/automatizacion.jpg" alt="Automatizaciones en Instagram">
<span class="card-category automatizaciones">Automatizaciones</span>
</div>
<div class="card-content">
<div class="card-meta">
<time datetime="2024-01-05">5 Ene 2024</time>
<span class="reading-time-mini">9 min</span>
</div>
<h3 class="card-title">Automatizaciones en Instagram: de 0 a 100 leads/mes</h3>
<p class="card-excerpt">
Responder el mismo mensaje 50 veces al día no es escalable.
</p>
<a href="articulos/automatizaciones-instagram.html" class="card-link">Leer artículo</a>
</div>
</article>
<!-- JS inyecta las tarjetas aquí -->
</div>
<div class="empty-state" id="empty-state" style="display: none;">
<div class="empty-icon"></div>
<div class="empty-icon">🔍</div>
<h3>No encontramos artículos con esos filtros</h3>
<p>Probá con otros términos o limpiá los filtros para ver todo el contenido.</p>
<button class="btn btn-primary" id="empty-reset">Ver todos los artículos</button>
@@ -226,23 +110,7 @@
<div class="load-more-container">
<button class="btn btn-secondary" id="load-more">Cargar más artículos</button>
</div>
</section> -->
<!-- NEWSLETTER
<section class="newsletter-section">
<div class="newsletter-card">
<div class="newsletter-content">
<h2 class="newsletter-title">Ideas frescas en tu inbox</h2>
<p class="newsletter-subtitle">
Suscribite y recibí nuestras mejores estrategias de branding, web y marketing digital.
</p>
</div>
<form class="newsletter-form" id="newsletter-form">
<input type="email" placeholder="Tu email profesional" required>
<button type="submit" class="btn btn-primary">Suscribirme</button>
</form>
</div>
</section> -->
</section>
</main>
<div id="footer-container"></div>
contacto.html
+7
View File
@@ -76,6 +76,13 @@
<a href="https://www.linkedin.com/company/amoryroma-estudiocreativo/" target="_blank" rel="noopener">Amor & Roma - Estudio creativo</a>
</div>
</li>
<li class="canal-item">
<span class="canal-icono canal-facebook"></span>
<div class="canal-contenido">
<strong>Facebook</strong>
<a href="https://web.facebook.com/amoryroma.creativo/" target="_blank" rel="noopener">Amor & Roma - Estudio creativo</a>
</div>
</li>
</ul>
<div class="contacto-horario">
scripts/blog.js
+226 -84
View File
@@ -1,110 +1,252 @@
document.addEventListener('DOMContentLoaded', () => {
const searchInput = document.getElementById('blog-search');
const searchClear = document.getElementById('search-clear');
const categoryBtns = document.querySelectorAll('.category-btn');
const filterBtns = document.querySelectorAll('.filter-btn');
const resetBtn = document.getElementById('reset-filters');
document.addEventListener('DOMContentLoaded', async () => {
const GHOST_API_URL = 'https://blog.amoryroma.com.ar';
const GHOST_API_KEY = '82450ba91ca6b5b9628006eec4';
// Elementos del DOM
const featuredSection = document.getElementById('featured-posts');
const featuredGrid = document.getElementById('featured-grid');
const blogGrid = document.getElementById('blog-grid');
const loadMoreBtn = document.getElementById('load-more');
const resultsCount = document.getElementById('results-count');
const emptyState = document.getElementById('empty-state');
const gridSectionTitle = document.getElementById('grid-section-title');
const gridSectionSubtitle = document.getElementById('grid-section-subtitle');
const allCards = document.querySelectorAll('.blog-card, .featured-card');
let activeCategory = 'all';
let activeFilter = 'all';
let searchQuery = '';
// Estado de los filtros
let posts = [];
let state = {
category: 'all',
filter: 'all', // 'all' o 'destacados'
search: '',
sort: 'recent'
};
function filterArticles() {
let visibleCount = 0;
// Cargar artículos desde Ghost API
async function loadPosts() {
try {
const response = await fetch(`${GHOST_API_URL}/ghost/api/content/posts/?key=${GHOST_API_KEY}&limit=all&include=tags,authors`);
const data = await response.json();
allCards.forEach(card => {
const categories = card.dataset.categories || '';
const isFeatured = card.dataset.featured === 'true';
const title = card.querySelector('.featured-title, .card-title')?.textContent.toLowerCase() || '';
const excerpt = card.querySelector('.featured-excerpt, .card-excerpt')?.textContent.toLowerCase() || '';
posts = data.posts.map(post => ({
id: post.id,
slug: post.slug,
titulo: post.title,
extracto: post.excerpt,
categoria: post.primary_tag ? post.primary_tag.name.toLowerCase() : 'general',
tags: post.tags ? post.tags.map(t => t.name.toLowerCase()) : [],
imagen: post.feature_image || 'assets/blog/default.jpg',
fecha: post.published_at,
tiempo_lectura: Math.ceil(post.reading_time) || 5,
destacado: post.featured
}));
// 1. Filtro de categoría
const matchCategory = activeCategory === 'all' || categories.includes(activeCategory);
// 2. Filtro de tipo (Todos / Destacados)
const matchFilter = activeFilter === 'all' || (activeFilter === 'destacados' && isFeatured);
// 3. Filtro de búsqueda
const matchSearch = searchQuery === '' || title.includes(searchQuery) || excerpt.includes(searchQuery);
if (matchCategory && matchFilter && matchSearch) {
card.style.display = 'flex';
visibleCount++;
} else {
card.style.display = 'none';
renderPosts();
setupEventListeners();
} catch (error) {
console.error('Error cargando posts de Ghost:', error);
if(emptyState) {
emptyState.style.display = 'block';
emptyState.querySelector('h3').textContent = 'Error al cargar el blog';
emptyState.querySelector('p').textContent = 'Por favor, recarga la página.';
}
}
}
function formatDate(dateString) {
const options = { day: '2-digit', month: 'short', year: 'numeric' };
return new Date(dateString).toLocaleDateString('es-AR', options);
}
function createCard(post, isFeatured = false) {
const catFormatted = post.categoria.charAt(0).toUpperCase() + post.categoria.slice(1);
const cardClass = isFeatured ? 'featured-card' : 'blog-card';
const badge = isFeatured && post.destacado ? '<span class="featured-badge">Destacado</span>' : '';
const metaClass = isFeatured ? 'featured-meta' : 'card-meta';
const titleClass = isFeatured ? 'featured-title' : 'card-title';
const excerptClass = isFeatured ? 'featured-excerpt' : 'card-excerpt';
const linkClass = isFeatured ? 'btn-read' : 'card-link';
const linkText = isFeatured ? 'Leer artículo →' : 'Leer artículo';
return `
<article class="${cardClass}" data-categories="${post.categoria}" data-featured="${post.destacado}">
<div class="${isFeatured ? 'featured-image' : 'card-image'}">
<img src="${post.imagen}" alt="${post.titulo}" loading="lazy">
${!isFeatured ? `<span class="card-category ${post.categoria}">${catFormatted}</span>` : ''}
${badge}
</div>
<div class="${isFeatured ? 'featured-content' : 'card-content'}">
<div class="${metaClass}">
<span class="category-tag ${post.categoria}">${catFormatted}</span>
<time datetime="${post.fecha}">${formatDate(post.fecha)}</time>
</div>
<h3 class="${titleClass}">${post.titulo}</h3>
<p class="${excerptClass}">${post.extracto}</p>
<div class="${isFeatured ? 'featured-footer' : ''}">
${isFeatured ? `<span class="reading-time">⏱ ${post.tiempo_lectura} min</span>` : `<span class="reading-time-mini">${post.tiempo_lectura} min</span>`}
<a href="${GHOST_API_URL}/${post.slug}/" class="${linkClass}" target="_blank">${linkText}</a>
</div>
</div>
</article>
`;
}
function renderPosts() {
// 1. FILTRAR
let filtered = posts.filter(post => {
const matchCategory = state.category === 'all' || post.categoria === state.category;
const matchFilter = state.filter === 'all' || (state.filter === 'destacados' && post.destacado);
const q = state.search.toLowerCase();
const matchSearch = !q ||
post.titulo.toLowerCase().includes(q) ||
post.extracto.toLowerCase().includes(q) ||
post.tags.some(tag => tag.includes(q));
return matchCategory && matchFilter && matchSearch;
});
// Actualizar contador y estado vacío
if (resultsCount) {
resultsCount.innerHTML = `Mostrando <strong>${visibleCount}</strong> artículo${visibleCount !== 1 ? 's' : ''}`;
// 2. ORDENAR
if (state.sort === 'recent') {
filtered.sort((a, b) => new Date(b.fecha) - new Date(a.fecha));
} else if (state.sort === 'popular') {
// Como la API pública de Ghost no expone "vistas", simulamos popularidad poniendo los destacados primero
filtered.sort((a, b) => (b.destacado === a.destacado) ? 0 : b.destacado ? 1 : -1);
}
if (emptyState) {
emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
// 3. DECIDIR VISTA: ¿Es la vista por defecto (sin filtros)?
const isDefaultView = state.category === 'all' && state.filter === 'all' && state.search === '';
if (isDefaultView) {
// VISTA POR DEFECTO: Mostrar Destacados + Últimos 3
if (featuredSection) featuredSection.style.display = 'block';
if (gridSectionTitle) gridSectionTitle.textContent = 'Últimos artículos';
if (gridSectionSubtitle) gridSectionSubtitle.textContent = 'Lo más nuevo y a la vanguardia.';
if (loadMoreBtn) {
loadMoreBtn.style.display = 'inline-block';
loadMoreBtn.textContent = 'Ver todos los artículos en el Blog';
loadMoreBtn.onclick = () => window.location.href = `${GHOST_API_URL}/`;
}
const featuredPosts = filtered.filter(p => p.destacado).slice(0, 3);
const latestPosts = filtered.slice(0, 3);
if (featuredGrid) featuredGrid.innerHTML = featuredPosts.map(p => createCard(p, true)).join('');
if (blogGrid) blogGrid.innerHTML = latestPosts.map(p => createCard(p, false)).join('');
if (resultsCount) resultsCount.innerHTML = `Mostrando los <strong>últimos 3</strong> artículos`;
if (emptyState) emptyState.style.display = 'none';
} else {
// VISTA FILTRADA: Ocultar Destacados, mostrar TODOS los resultados en la grilla principal
if (featuredSection) featuredSection.style.display = 'none';
if (loadMoreBtn) loadMoreBtn.style.display = 'none'; // Ocultamos "cargar más" porque ya mostramos todos los filtrados
// Actualizar títulos según el filtro
if (gridSectionTitle) {
if (state.search) gridSectionTitle.textContent = `Resultados de búsqueda`;
else if (state.category !== 'all') gridSectionTitle.textContent = `Artículos de ${state.category.charAt(0).toUpperCase() + state.category.slice(1)}`;
else if (state.filter === 'destacados') gridSectionTitle.textContent = `Artículos Destacados`;
}
if (gridSectionSubtitle) gridSectionSubtitle.textContent = `Se encontraron ${filtered.length} artículo${filtered.length !== 1 ? 's' : ''}`;
if (blogGrid) {
if (filtered.length === 0) {
blogGrid.innerHTML = '';
if (emptyState) {
emptyState.style.display = 'block';
emptyState.querySelector('h3').textContent = 'No encontramos artículos con esos filtros';
}
} else {
if (emptyState) emptyState.style.display = 'none';
// Mostramos TODOS los artículos que coinciden con el filtro, no solo 3
blogGrid.innerHTML = filtered.map(p => createCard(p, false)).join('');
}
}
if (resultsCount) {
resultsCount.innerHTML = `Mostrando <strong>${filtered.length}</strong> artículo${filtered.length !== 1 ? 's' : ''}`;
}
}
}
function setupEventListeners() {
// 1. Botones de Categoría
document.querySelectorAll('.category-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
e.target.classList.add('active');
state.category = e.target.dataset.category;
renderPosts();
});
});
// 2. Botones de Filtro (Todos / Destacados)
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
e.target.classList.add('active');
state.filter = e.target.dataset.filter;
renderPosts();
});
});
// 3. Buscador
const searchInput = document.getElementById('blog-search');
const searchClear = document.getElementById('search-clear');
if (searchInput) {
searchInput.addEventListener('input', (e) => {
state.search = e.target.value;
if (searchClear) searchClear.classList.toggle('visible', state.search.length > 0);
renderPosts();
});
}
// Mostrar/ocultar botón de limpiar búsqueda
if (searchClear) {
searchClear.classList.toggle('visible', searchQuery.length > 0);
searchClear.addEventListener('click', () => {
if (searchInput) {
searchInput.value = '';
state.search = '';
searchClear.classList.remove('visible');
searchInput.focus();
renderPosts();
}
});
}
}
// Event Listeners
if (searchInput) {
searchInput.addEventListener('input', (e) => {
searchQuery = e.target.value.toLowerCase().trim();
filterArticles();
});
}
// 4. Ordenamiento
const sortSelect = document.getElementById('sort-select');
if (sortSelect) {
sortSelect.addEventListener('change', (e) => {
state.sort = e.target.value;
renderPosts();
});
}
if (searchClear) {
searchClear.addEventListener('click', () => {
searchInput.value = '';
searchQuery = '';
searchInput.focus();
filterArticles();
});
}
// 5. Botón Limpiar Filtros
const resetBtn = document.getElementById('reset-filters');
const emptyReset = document.getElementById('empty-reset');
categoryBtns.forEach(btn => {
btn.addEventListener('click', () => {
categoryBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
activeCategory = btn.dataset.category;
filterArticles();
});
});
function resetAll() {
state = { category: 'all', filter: 'all', search: '', sort: 'recent' };
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
filterBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
activeFilter = btn.dataset.filter;
filterArticles();
});
});
// Resetear UI
document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
document.querySelector('.category-btn[data-category="all"]').classList.add('active');
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
document.querySelector('.filter-btn[data-filter="all"]').classList.add('active');
if (resetBtn) {
resetBtn.addEventListener('click', () => {
activeCategory = 'all';
activeFilter = 'all';
searchQuery = '';
if (searchInput) searchInput.value = '';
if (searchClear) searchClear.classList.remove('visible');
if (sortSelect) sortSelect.value = 'recent';
categoryBtns.forEach(b => b.classList.remove('active'));
document.querySelector('.category-btn[data-category="all"]')?.classList.add('active');
renderPosts();
}
filterBtns.forEach(b => b.classList.remove('active'));
document.querySelector('.filter-btn[data-filter="all"]')?.classList.add('active');
filterArticles();
});
if (resetBtn) resetBtn.addEventListener('click', resetAll);
if (emptyReset) emptyReset.addEventListener('click', resetAll);
}
// Ejecutar al inicio
filterArticles();
// Iniciar
await loadPosts();
});
style/blog.css
+96 -487
View File
@@ -54,13 +54,12 @@
}
/* ============================================
SECCIÓN FILTROS Y BUSCADOR (INTEGRADOS, NO STICKY)
SECCIÓN FILTROS Y BUSCADOR
============================================ */
.blog-filters-section {
padding: var(--spacing-md) var(--spacing-md);
background-color: var(--bg-surface-t0);
border-bottom: 1px solid var(--border);
position: relative; /* Sin sticky, fluye normal */
position: relative;
z-index: 1;
}
@@ -73,7 +72,6 @@
gap: var(--spacing-sm);
}
/* Fila superior: Buscador + Filtros principales */
.filters-top-row {
display: flex;
gap: var(--spacing-sm);
@@ -82,7 +80,6 @@
flex-wrap: wrap;
}
/* Buscador con forma redondeada (pill) */
.search-wrapper-compact {
flex: 1;
min-width: 280px;
@@ -92,7 +89,7 @@
align-items: center;
background-color: var(--bg-base);
border: 1.5px solid var(--border);
border-radius: 999px; /* Forma redondeada como los botones */
border-radius: 999px;
padding: 0.5rem 0.5rem 0.5rem 1.1rem;
transition: all 0.3s ease;
}
@@ -150,7 +147,6 @@
justify-content: center;
}
/* Filtros principales (Todos / Destacados) */
.filter-group-compact {
display: flex;
gap: 0.5rem;
@@ -182,10 +178,9 @@
color: var(--text-on-accent);
}
/* Fila inferior: Categorías + Ordenamiento */
.filters-bottom-row {
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
gap: var(--spacing-sm);
flex-wrap: wrap;
@@ -197,7 +192,7 @@
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
flex: 1;
justify-content: center;
}
.category-btn {
@@ -249,7 +244,6 @@
border-color: var(--brand-teal);
}
/* Info de resultados */
.results-info-compact {
display: flex;
justify-content: center;
@@ -279,7 +273,7 @@
}
/* ============================================
TAGS CON MEJOR CONTRASTE (UNIFICADO)
TAGS DE CATEGORÍAS
============================================ */
.category-tag {
font-family: var(--font-small);
@@ -293,89 +287,16 @@
transition: all 0.2s ease;
}
/* Branding */
.category-tag.branding {
background-color: var(--brand-crimson);
color: #ffffff;
border-color: var(--brand-crimson);
}
[data-theme="dark"] .category-tag.branding {
background-color: rgba(186, 18, 77, 0.95);
color: #ffffff;
border-color: rgba(186, 18, 77, 1);
}
.category-tag.branding { background-color: var(--brand-crimson); color: #ffffff; border-color: var(--brand-crimson); }
.category-tag.web { background-color: var(--brand-teal); color: #ffffff; border-color: var(--brand-teal); }
.category-tag.automatizaciones { background-color: var(--brand-plum); color: #ffffff; border-color: var(--brand-plum); }
.category-tag.redes { background-color: #00a88c; color: #ffffff; border-color: #00a88c; }
.category-tag.paid { background-color: #6b4c9a; color: #ffffff; border-color: #6b4c9a; }
.category-tag.estrategia { background-color: #d97706; color: #ffffff; border-color: #d97706; }
.category-tag.casos { background-color: #475569; color: #ffffff; border-color: #475569; }
/* Web */
.category-tag.web {
background-color: var(--brand-teal);
color: #ffffff;
border-color: var(--brand-teal);
}
[data-theme="dark"] .category-tag.web {
background-color: rgba(0, 63, 82, 0.95);
color: #ffffff;
border-color: rgba(0, 63, 82, 1);
}
/* Automatizaciones */
.category-tag.automatizaciones {
background-color: var(--brand-plum);
color: #ffffff;
border-color: var(--brand-plum);
}
[data-theme="dark"] .category-tag.automatizaciones {
background-color: rgba(23, 12, 29, 0.95);
color: var(--brand-sage-light);
border-color: rgba(23, 12, 29, 1);
}
/* Redes */
.category-tag.redes {
background-color: #00a88c;
color: #ffffff;
border-color: #00a88c;
}
[data-theme="dark"] .category-tag.redes {
background-color: rgba(5, 104, 87, 0.95);
color: #ffffff;
border-color: rgba(0, 168, 140, 1);
}
/* Paid Media */
.category-tag.paid {
background-color: #6b4c9a;
color: #ffffff;
border-color: #6b4c9a;
}
[data-theme="dark"] .category-tag.paid {
background-color: rgba(107, 76, 154, 0.95);
color: #ffffff;
border-color: rgba(107, 76, 154, 1);
}
/* Estrategia */
.category-tag.estrategia {
background-color: #d97706;
color: #ffffff;
border-color: #d97706;
}
[data-theme="dark"] .category-tag.estrategia {
background-color: rgba(217, 119, 6, 0.95);
color: #ffffff;
border-color: rgba(217, 119, 6, 1);
}
/* Casos */
.category-tag.casos {
background-color: #475569;
color: #ffffff;
border-color: #475569;
}
[data-theme="dark"] .category-tag.casos {
background-color: rgba(71, 85, 105, 0.95);
color: #ffffff;
border-color: rgba(71, 85, 105, 1);
}
[data-theme="dark"] .category-tag.automatizaciones { background-color: rgba(23, 12, 29, 0.95); color: var(--brand-sage-light); border-color: rgba(23, 12, 29, 1); }
[data-theme="dark"] .category-tag.redes { background-color: rgba(5, 104, 87, 0.95); color: #ffffff; border-color: rgba(0, 168, 140, 1); }
.category-tag:hover {
transform: translateY(-1px);
@@ -383,7 +304,7 @@
}
/* ============================================
ARTÍCULOS DESTACADOS (VERSIÓN SIMÉTRICA)
ARTÍCULOS DESTACADOS
============================================ */
.featured-posts {
padding: var(--spacing-lg) var(--spacing-md);
@@ -414,7 +335,7 @@
.featured-posts .section-title {
font-family: var(--font-title);
font-style: italic;
font-size: clamp(2rem, 4vw, 2.8rem);
font-size: clamp(1.2rem, 2vw, 1.8rem);
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
line-height: 1.2;
@@ -447,24 +368,16 @@
position: relative;
display: flex;
flex-direction: column;
min-height: 480px;
min-height: 250px !important;
}
/* Glow sutil para destacar en hover */
.featured-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 20px;
padding: 2px;
background: linear-gradient(135deg,
rgba(186, 18, 77, 0.3) 0%,
rgba(0, 63, 82, 0.3) 50%,
rgba(186, 18, 77, 0.3) 100%
);
background: linear-gradient(135deg, rgba(186, 18, 77, 0.3) 0%, rgba(0, 63, 82, 0.3) 50%, rgba(186, 18, 77, 0.3) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
@@ -478,9 +391,7 @@
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}
.featured-card:hover::before {
opacity: 1;
}
.featured-card:hover::before { opacity: 1; }
.featured-badge {
position: absolute;
@@ -502,7 +413,7 @@
.featured-image {
position: relative;
overflow: hidden;
aspect-ratio: 16/10;
aspect-ratio: 16/8;
flex-shrink: 0;
}
@@ -513,9 +424,7 @@
transition: transform 0.5s ease;
}
.featured-card:hover .featured-image img {
transform: scale(1.05);
}
.featured-card:hover .featured-image img { transform: scale(1.05); }
.featured-content {
padding: var(--spacing-md);
@@ -535,18 +444,27 @@
.featured-title {
font-family: var(--font-title);
font-style: italic;
font-size: 1.3rem;
font-size: 1.1rem;
color: var(--text-primary);
line-height: 1.3;
line-height: 1.2;
margin-bottom: var(--spacing-xs);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.featured-excerpt {
font-family: var(--font-body);
font-size: 0.95rem;
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.6;
line-height: 1.5;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0.3rem !important;
}
.featured-footer {
@@ -586,9 +504,45 @@
============================================ */
.blog-grid-section {
padding: var(--spacing-lg) var(--spacing-md);
background-color: var(--bg-surface);
background-color: var(--bg-surface-t3);
}
.blog-grid-section .section-header {
max-width: 1400px;
margin: 0 auto var(--spacing-lg);
text-align: left;
padding-left: var(--spacing-sm);
position: relative;
}
.blog-grid-section .section-header::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 60px;
background: linear-gradient(180deg, var(--brand-teal) 0%, var(--brand-crimson) 100%);
border-radius: 2px;
}
.blog-grid-section .section-title {
font-family: var(--font-title);
font-style: italic;
font-size: clamp(1.2rem, 2vw, 1.8rem);
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
line-height: 1.2;
padding-left: var(--spacing-md);
}
.blog-grid-section .section-subtitle {
font-family: var(--font-body);
font-size: 1.1rem;
color: var(--text-muted);
line-height: 1.6;
padding-left: var(--spacing-md);
max-width: 600px;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
@@ -626,9 +580,7 @@
transition: transform 0.5s ease;
}
.blog-card:hover .card-image img {
transform: scale(1.08);
}
.blog-card:hover .card-image img { transform: scale(1.08); }
.card-category {
position: absolute;
@@ -662,9 +614,7 @@
color: var(--text-muted);
}
.reading-time-mini {
font-weight: 600;
}
.reading-time-mini { font-weight: 600; }
.card-title {
font-family: var(--font-title);
@@ -683,23 +633,6 @@
flex: 1;
}
.card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: var(--spacing-xs);
}
.tag {
font-family: var(--font-small);
font-size: 0.75rem;
padding: 0.25rem 0.7rem;
background-color: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-secondary);
}
.card-link {
font-family: var(--font-small);
font-size: 0.9rem;
@@ -726,12 +659,6 @@
display: none;
}
.empty-icon {
font-size: 4rem;
margin-bottom: var(--spacing-sm);
opacity: 0.5;
}
.empty-state h3 {
font-family: var(--font-title);
font-style: italic;
@@ -753,358 +680,40 @@
margin-top: var(--spacing-lg);
}
/* ============================================
NEWSLETTER
============================================ */
.newsletter-section {
padding: var(--spacing-lg) var(--spacing-md);
background-color: transparent;
}
.newsletter-card {
max-width: 900px;
margin: 0 auto;
background-color: var(--brand-teal);
border-radius: 24px;
padding: var(--spacing-lg) var(--spacing-md);
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--spacing-lg);
align-items: center;
position: relative;
overflow: hidden;
}
.newsletter-card::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, var(--brand-crimson) 0%, transparent 70%);
opacity: 0.3;
filter: blur(60px);
}
.newsletter-content {
position: relative;
z-index: 1;
}
.newsletter-title {
font-family: var(--font-title);
font-style: italic;
font-size: clamp(1.8rem, 3vw, 2.5rem);
color: #ffffff;
margin-bottom: var(--spacing-xs);
}
.newsletter-subtitle {
font-family: var(--font-body);
font-size: 1rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
}
.newsletter-form {
display: flex;
gap: var(--spacing-sm);
position: relative;
z-index: 1;
justify-content: center;
}
.newsletter-form input {
flex: 1;
max-width: 320px; /* Limitar ancho para que parezca botón */
padding: 0.85rem 1.5rem;
border: 1.5px solid rgba(255, 255, 255, 0.3);
border-radius: 999px;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
background-color: rgba(255, 255, 255, 0.15); /* Fondo sutil tipo botón */
color: #ffffff; /* ← CLAVE: Texto blanco siempre visible */
backdrop-filter: blur(4px);
transition: all 0.3s ease;
}
.newsletter-form input::placeholder {
color: var(--text-muted);
}
.newsletter-form .btn {
white-space: nowrap;
background-color: var(--brand-crimson);
color: var(--text-on-accent);
border: 1.5px solid var(--brand-crimson);
}
.newsletter-form .btn:hover {
background-color: #ffffff;
color: var(--brand-teal);
border-color: #ffffff;
}
/* ============================================
PÁGINA DE ARTÍCULO INDIVIDUAL (articulo.php)
============================================ */
.articulo-header {
max-width: 900px;
margin: 0 auto;
padding: calc(var(--spacing-lg) + 2rem) var(--spacing-md) var(--spacing-md);
text-align: center;
}
.articulo-header .badge-filosofia {
display: inline-block;
padding: 0.4rem 1rem;
border-radius: 999px;
background-color: var(--badge-bg);
color: var(--badge-text);
font-family: var(--font-small);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: var(--spacing-sm);
}
.articulo-header h1 {
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);
margin-bottom: var(--spacing-md);
}
.articulo-meta {
display: flex;
justify-content: center;
gap: var(--spacing-md);
color: var(--text-muted);
font-family: var(--font-small);
font-size: 0.9rem;
margin-bottom: var(--spacing-md);
flex-wrap: wrap;
}
.articulo-imagen {
width: 100%;
max-height: 500px;
object-fit: cover;
border-radius: 16px;
margin-top: var(--spacing-md);
box-shadow: var(--shadow);
}
.articulo-contenido {
max-width: 800px;
margin: 0 auto;
padding: var(--spacing-lg) var(--spacing-md);
font-family: var(--font-body);
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-primary);
}
.articulo-contenido h2,
.articulo-contenido h3 {
font-family: var(--font-title);
font-style: italic;
color: var(--text-primary);
margin-top: 2.5rem;
margin-bottom: 1rem;
}
.articulo-contenido p {
margin-bottom: 1.5rem;
}
.articulo-contenido ul,
.articulo-contenido ol {
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
.articulo-contenido li {
margin-bottom: 0.5rem;
}
.articulo-contenido img {
max-width: 100%;
height: auto;
border-radius: 12px;
margin: 2rem 0;
box-shadow: var(--shadow);
}
.articulo-contenido blockquote {
border-left: 4px solid var(--brand-crimson);
padding-left: var(--spacing-md);
font-style: italic;
color: var(--text-secondary);
margin: 2rem 0;
font-size: 1.2rem;
}
.volver-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--brand-crimson);
text-decoration: none;
font-family: var(--font-small);
font-weight: 600;
font-size: 0.95rem;
margin-bottom: var(--spacing-md);
transition: all 0.2s ease;
}
.volver-link:hover {
color: var(--brand-teal);
gap: 0.7rem;
}
/* ============================================
RESPONSIVE BLOG
============================================ */
@media (max-width: 1024px) {
.blog-grid,
.featured-grid {
grid-template-columns: repeat(2, 1fr);
}
.featured-card {
min-height: 420px;
}
.blog-grid, .featured-grid { grid-template-columns: repeat(2, 1fr); }
.featured-card { min-height: 420px; }
}
@media (max-width: 768px) {
.articulo-header {
padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
}
.articulo-contenido {
padding: var(--spacing-md) var(--spacing-sm);
font-size: 1rem;
}
.articulo-meta {
flex-direction: column;
gap: 0.5rem;
}
.blog-hero-compact {
padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
}
.blog-filters-section {
padding: var(--spacing-sm);
}
.filters-top-row {
flex-direction: column;
align-items: stretch;
}
.search-wrapper-compact {
max-width: 100%;
min-width: 100%;
}
.filter-group-compact {
justify-content: center;
}
.filters-bottom-row {
flex-direction: column;
align-items: stretch;
}
.blog-hero-compact { padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-md); }
.blog-filters-section { padding: var(--spacing-sm); }
.filters-top-row { flex-direction: column; align-items: stretch; }
.search-wrapper-compact { max-width: 100%; min-width: 100%; }
.filter-group-compact { justify-content: center; }
.filters-bottom-row { flex-direction: column; align-items: stretch; }
.filter-categories-compact {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}
.filter-categories-compact::-webkit-scrollbar {
display: none;
}
.category-btn {
flex-shrink: 0;
}
.filter-secondary-compact {
align-self: flex-end;
}
.blog-grid,
.featured-grid {
grid-template-columns: 1fr;
max-width: 500px;
}
.featured-card {
min-height: auto;
}
.newsletter-card {
grid-template-columns: 1fr;
text-align: center;
}
.newsletter-form {
flex-direction: column;
align-items: center;
}
.newsletter-form input {
max-width: 100%;
width: 100%;
}
.newsletter-form .btn {
width: 100%;
max-width: 320px;
overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
scrollbar-width: none; padding-bottom: 4px;
}
.filter-categories-compact::-webkit-scrollbar { display: none; }
.category-btn { flex-shrink: 0; }
.filter-secondary-compact { align-self: flex-end; }
.blog-grid, .featured-grid { grid-template-columns: 1fr; max-width: 500px; }
.featured-card { min-height: auto; }
}
@media (max-width: 480px) {
.blog-hero-compact .hero-compact-title {
font-size: 2rem;
}
.search-wrapper-compact {
padding: 0.4rem 0.4rem 0.4rem 1rem;
}
.search-wrapper-compact input {
font-size: 0.9rem;
}
.filter-btn {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
.featured-title,
.card-title {
font-size: 1.2rem;
}
.blog-hero-compact .hero-compact-title { font-size: 2rem; }
.search-wrapper-compact { padding: 0.4rem 0.4rem 0.4rem 1rem; }
.search-wrapper-compact input { font-size: 0.9rem; }
.filter-btn { font-size: 0.8rem; padding: 0.4rem 0.8rem; }
.featured-title, .card-title { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
.blog-card,
.featured-card,
.filter-btn,
.category-btn,
.search-wrapper-compact,
.category-tag {
transition: none;
}
.blog-card, .featured-card, .filter-btn, .category-btn, .search-wrapper-compact, .category-tag { transition: none; }
}
style/contacto.css
+16 -12
View File
@@ -95,8 +95,7 @@
width: 40px;
height: 40px;
flex-shrink: 0;
background-color: var(--brand-crimson);
border-radius: 10px;
border-radius: 1px;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
@@ -108,22 +107,27 @@
.canal-email {
-webkit-mask-image: url("../assets/iconos/buzon.svg");
mask-image: url("../assets/iconos/buzon.svg");
background-color: var(--brand-teal);
background-color: var(--brand-teal-contraste);
}
.canal-whatsapp {
-webkit-mask-image: url("../assets/vectores/whatsapp.svg");
mask-image: url("../assets/vectores/whatsapp.svg");
background-color: #25D366;
-webkit-mask-image: url("../assets/logos/whatsapp.svg");
mask-image: url("../assets/logos/whatsapp.svg");
background-color: var(--brand-teal-contraste);
}
.canal-instagram {
-webkit-mask-image: url("../assets/vectores/insta.svg");
mask-image: url("../assets/vectores/insta.svg");
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
-webkit-mask-image: url("../assets/logos/instagram.svg");
mask-image: url("../assets/logos/instagram.svg");
background-color: var(--brand-teal-contraste);
}
.canal-linkedin {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
background-color: #0A66C2;
-webkit-mask-image: url("../assets/logos/linkedin.svg");
mask-image: url("../assets/logos/linkedin.svg");
background-color: var(--brand-teal-contraste);
}
.canal-facebook {
-webkit-mask-image: url("../assets/logos/facebook.svg");
mask-image: url("../assets/logos/facebook.svg");
background-color: var(--brand-teal-contraste);
}
.canal-contenido {