{"id":7,"date":"2026-05-23T03:47:06","date_gmt":"2026-05-23T03:47:06","guid":{"rendered":"https:\/\/elestudio.osidentity.com\/?page_id=7"},"modified":"2026-06-03T17:28:41","modified_gmt":"2026-06-03T17:28:41","slug":"elestudio-comunicacion-y-diseno","status":"publish","type":"page","link":"https:\/\/elestudio.osidentity.com\/","title":{"rendered":""},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n \r\n\r\n Elestudio - Dise\u00f1o y comunicaci\u00f3n<\/title>\r\n\r\n <!-- GOOGLE FONTS -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@300;400;500;600;700&family=Nunito:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/use.typekit.net\/zub6lpx.css\">\r\n\r\n <!-- BOOTSTRAP CSS -->\r\n <link\r\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.8\/dist\/css\/bootstrap.min.css\"\r\n rel=\"stylesheet\"\r\n \/>\r\n\r\n <!-- FONT AWESOME -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" \/>\r\n\r\n <!-- RESET -->\r\n <style>\r\n\r\n \/* FIX GLOBAL ELEMENTOR FULL WIDTH *\/\r\nhtml,\r\nbody {\r\n width: 100%;\r\n max-width: 100%;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n overflow-x: hidden !important;\r\n}\r\n\r\n.elementor-page-7 #site-header {\r\n display: none !important;\r\n}\r\n\r\n.elementor-page-7 .elementor,\r\n.elementor-page-7 .elementor-7,\r\n.elementor-page-7 .elementor-element-edca361,\r\n.elementor-page-7 .elementor-element-7957d88,\r\n.elementor-page-7 .elementor-widget-container {\r\n width: 100vw !important;\r\n max-width: 100vw !important;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n}\r\n\r\n.elementor-page-7 .elementor-element-edca361.e-con {\r\n --width: 100vw !important;\r\n --content-width: 100vw !important;\r\n --container-max-width: 100vw !important;\r\n --padding-top: 0px !important;\r\n --padding-right: 0px !important;\r\n --padding-bottom: 0px !important;\r\n --padding-left: 0px !important;\r\n --gap: 0px !important;\r\n}\r\n\r\n *{\r\n margin:0;\r\n padding:0;\r\n }\r\n\r\n html,\r\n body{\r\n width:100%;\r\n overflow-x:hidden;\r\n background:#f6f0e2;\r\n font-family:'Nunito', sans-serif;\r\n }\r\n\r\n @media(max-width:768px){\r\n body.elementor-page-7,\r\n .elementor-page-7 .elementor-element-edca361,\r\n.elementor-page-7 .elementor-element-7957d88,\r\n.elementor-page-7 .elementor-widget-html,\r\n.elementor-page-7 .elementor-widget-container {\r\n width:100%!important;\r\n max-width:none!important;\r\n margin:0!important;\r\n padding:0!important;\r\n }\r\n\r\n .elementor-page-7 .elementor-element-edca361.e-con {\r\n --padding-top:0px!important;\r\n --padding-right:0px!important;\r\n --padding-bottom:0px!important;\r\n --padding-left:0px!important;\r\n --padding-block-start:0px!important;\r\n --padding-block-end:0px!important;\r\n --padding-inline-start:0px!important;\r\n --padding-inline-end:0px!important;\r\n --gap:0px!important;\r\n gap:0!important;\r\n }\r\n }\r\n\r\n <\/style>\r\n<!-- ========================= -->\r\n<!-- NAVBAR CSS - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n:root{\r\n --mica-azul-claro:#d7dde0;\r\n --mica-gris-claro:#eef0ee;\r\n --mica-dorado:#c7a06c;\r\n --mica-hueso:#f7f3ec;\r\n --mica-oscuro:#121417;\r\n}\r\n\r\n#mainNav{\r\n width:100vw!important;\r\n padding:0;\r\n z-index:47!important;\r\n background:rgba(246,240,226,.08);\r\n backdrop-filter:blur(14px) saturate(120%);\r\n -webkit-backdrop-filter:blur(6px) saturate(120%);\r\n border-bottom:1px solid rgba(246,240,226,.20);\r\n box-shadow:0 8px 32px rgba(83,96,104,.06);\r\n transition:all .4s ease;\r\n}\r\n\r\n#mainNav::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n rgba(246,240,226,.22),\r\n rgba(204,215,221,.12)\r\n );\r\n pointer-events:none;\r\n z-index:-1;\r\n}\r\n\r\n#mainNav.scrolled{\r\n background:rgba(246,240,226,.72)!important;\r\n backdrop-filter:blur(18px) saturate(130%);\r\n -webkit-backdrop-filter:blur(18px) saturate(130%);\r\n border-bottom:1px solid rgba(219,181,139,.28);\r\n box-shadow:0 10px 34px rgba(83,96,104,.12);\r\n}\r\n\r\n#mainNav,\r\n#mainNav .nav-link,\r\n#mainNav .navbar-brand{\r\n font-family:\"Cormorant\", serif;\r\n font-weight:400;\r\n letter-spacing:.06em;\r\n text-transform:uppercase;\r\n}\r\n\r\n#mainNav .container-fluid{\r\n min-height:78px;\r\n padding:0 1.5rem;\r\n}\r\n\r\n#mainNav .navbar-nav .nav-item{\r\n margin:0 12px;\r\n}\r\n\r\n#mainNav .nav-link{\r\n position:relative;\r\n padding:8px 16px;\r\n color:var(--mica-oscuro)!important;\r\n font-size:1.2rem;\r\n font-weight:500!important;\r\n letter-spacing:.08em;\r\n text-shadow:0 4px 20px rgba(83,96,104,.26);\r\n transition:color .35s ease, text-shadow .35s ease;\r\n}\r\n\r\n#mainNav.scrolled .nav-link,\r\n#mainNav.scrolled .navbar-brand{\r\n color:var(--mica-oscuro)!important;\r\n text-shadow:none;\r\n}\r\n\r\n#mainNav .nav-link::after{\r\n content:\"\";\r\n position:absolute;\r\n bottom:0;\r\n left:50%;\r\n width:0%;\r\n height:1px;\r\n background-color:var(--mica-dorado);\r\n transition:all .3s ease;\r\n transform:translateX(-50%);\r\n}\r\n\r\n#mainNav .nav-link:hover::after{\r\n width:60%;\r\n}\r\n\r\n#mainNav .nav-link:hover{\r\n color:var(--mica-dorado)!important;\r\n}\r\n\r\n#mainNav.scrolled .nav-link:hover{\r\n color:var(--mica-dorado)!important;\r\n}\r\n\r\n#mainNav .nav-cta{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n min-height:38px;\r\n padding:8px 22px;\r\n border-radius:999px;\r\n background:rgba(83,96,104,.88);\r\n color:var(--mica-hueso)!important;\r\n box-shadow:0 12px 28px rgba(83,96,104,.16);\r\n}\r\n\r\n#mainNav .nav-cta::after{\r\n display:none;\r\n}\r\n\r\n#mainNav .nav-cta:hover,\r\n#mainNav.scrolled .nav-cta:hover{\r\n background:var(--mica-dorado)!important;\r\n color:var(--mica-oscuro)!important;\r\n}\r\n\r\n#mainNav.scrolled .nav-cta{\r\n color:var(--mica-hueso)!important;\r\n}\r\n\r\n.logo{\r\n width:170px;\r\n max-width:42vw;\r\n filter:drop-shadow(0 8px 22px rgba(83,96,104,.16));\r\n}\r\n\r\n.logo-dark{\r\n display:none;\r\n}\r\n\r\n#mainNav.scrolled .logo-light{\r\n display:none;\r\n}\r\n\r\n#mainNav.scrolled .logo-dark{\r\n display:inline;\r\n}\r\n\r\n.fixed-toggler{\r\n border:0!important;\r\n box-shadow:none!important;\r\n background:rgba(83,96,104,.88)!important;\r\n backdrop-filter:blur(12px);\r\n -webkit-backdrop-filter:blur(12px);\r\n border-radius:999px;\r\n color:var(--mica-hueso);\r\n font-size:1.7rem;\r\n padding:10px 14px;\r\n transition:all .35s ease;\r\n}\r\n\r\n#mainNav.scrolled .fixed-toggler{\r\n color:var(--mica-oscuro)!important;\r\n background:rgba(246,240,226,.48)!important;\r\n}\r\n\r\n[type=\"button\"]:hover,\r\n[type=\"submit\"]:hover,\r\nbutton:hover,\r\n[type=button]:focus,\r\n[type=submit]:focus,\r\nbutton:focus{\r\n background-color:rgba(246,240,226,.28)!important;\r\n outline:none!important;\r\n box-shadow:none!important;\r\n}\r\n\r\n.navbar-collapse .nav-link{\r\n color:var(--mica-hueso)!important;\r\n text-align:center;\r\n}\r\n\r\n#mainNav.scrolled .navbar-collapse .nav-link{\r\n color:var(--mica-oscuro)!important;\r\n}\r\n\r\n#mainNav.scrolled .navbar-collapse .nav-link.nav-cta{\r\n color:var(--mica-hueso)!important;\r\n}\r\n\r\n@media(max-width:999px){\r\n\r\n #mainNav{\r\n background:rgba(246,240,226,.72);\r\n backdrop-filter:blur(16px) saturate(125%);\r\n -webkit-backdrop-filter:blur(16px) saturate(125%);\r\n }\r\n\r\n #mainNav .container-fluid{\r\n height:74px;\r\n padding:0 1rem;\r\n }\r\n\r\n #mainNav .navbar-brand{\r\n display:flex;\r\n align-items:center;\r\n }\r\n\r\n .navbar-collapse{\r\n margin-top:8px;\r\n padding:1rem;\r\n border-radius:22px;\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n rgba(246,240,226,.92),\r\n rgba(232,236,239,.88)\r\n );\r\n backdrop-filter:blur(18px) saturate(130%);\r\n -webkit-backdrop-filter:blur(18px) saturate(130%);\r\n border:1px solid rgba(219,181,139,.22);\r\n box-shadow:0 18px 45px rgba(83,96,104,.13);\r\n opacity:0;\r\n filter:blur(10px);\r\n transform:translate3d(0,-10px,0);\r\n transition:\r\n height .36s ease,\r\n opacity .28s ease,\r\n filter .28s ease,\r\n transform .28s ease;\r\n }\r\n\r\n .navbar-collapse.show{\r\n opacity:1;\r\n filter:blur(0);\r\n transform:translate3d(0,0,0);\r\n }\r\n\r\n .navbar-collapse.collapsing{\r\n opacity:0;\r\n filter:blur(10px);\r\n transform:translate3d(0,-10px,0);\r\n }\r\n\r\n .navbar-collapse .nav-link,\r\n #mainNav.scrolled .navbar-collapse .nav-link{\r\n color:var(--mica-oscuro)!important;\r\n text-shadow:none;\r\n }\r\n\r\n #mainNav .nav-cta,\r\n #mainNav.scrolled .nav-cta{\r\n width:100%;\r\n margin-top:.35rem;\r\n color:var(--mica-hueso)!important;\r\n }\r\n\r\n .fixed-toggler{\r\n position:relative;\r\n top:auto;\r\n right:auto;\r\n }\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- NAVBAR CSS - FIN -->\r\n<!-- ========================= -->\r\n<!-- ========================= -->\r\n<!-- HERO CSS - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n:root{\r\n --azul-claro:#d7dde0;\r\n --gris-claro:#eef0ee;\r\n --beige-dorado:#c7a06c;\r\n --hueso:#f7f3ec;\r\n --gris-azulado-oscuro:#121417;\r\n\r\n --mica-texto:#121417;\r\n --mica-luz:#f7f3ec;\r\n --mica-dorado:#c7a06c;\r\n --mica-glass:rgba(247,243,236,.22);\r\n --mica-glass-border:rgba(247,243,236,.24);\r\n}\r\n\r\n.camila-hero-300vh *,\r\n.camila-hero-300vh *::before,\r\n.camila-hero-300vh *::after{\r\n box-sizing:border-box;\r\n}\r\n\r\n.camila-hero-300vh{\r\n position:relative;\r\n width:100%;\r\n}\r\n\r\n.camila-scroll-space{\r\n height:250vh;\r\n}\r\n\r\n.camila-hero-fixed{\r\n position:fixed;\r\n inset:0;\r\n width:100%;\r\n height:100vh;\r\n overflow:hidden;\r\n background:var(--hueso);\r\n opacity:1;\r\n visibility:visible;\r\n pointer-events:auto;\r\n transition:\r\n opacity 1.45s ease,\r\n visibility 1.45s ease;\r\n}\r\n\r\n.camila-hero-fixed.is-hidden{\r\n opacity:0;\r\n visibility:hidden;\r\n pointer-events:none;\r\n}\r\n\r\n\/* BACKGROUNDS *\/\r\n\r\n.camila-hero-bg{\r\n position:absolute;\r\n inset:0;\r\n background-size:cover;\r\n background-position:center center;\r\n will-change:opacity, transform;\r\n}\r\n\r\n.camila-bg-1{\r\n background-image:url('https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/hero.jpg');\r\n z-index:1;\r\n}\r\n\r\n.camila-bg-2{\r\n background-image:url('https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/hero1.jpg');\r\n z-index:2;\r\n opacity:0;\r\n}\r\n\r\n.camila-bg-3{\r\n background-image:url('https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/hero2.jpg');\r\n background-color:var(--hueso);\r\n z-index:3;\r\n opacity:0;\r\n}\r\n\r\n\/* OVERLAY *\/\r\n\r\n.camila-overlay{\r\n position:absolute;\r\n inset:0;\r\n z-index:4;\r\n background:\r\n radial-gradient(\r\n circle at 50% 20%,\r\n rgba(246,240,226,.18) 0%,\r\n transparent 38%\r\n ),\r\n radial-gradient(\r\n circle at 15% 80%,\r\n rgba(219,181,139,.16) 0%,\r\n transparent 34%\r\n ),\r\n linear-gradient(\r\n 180deg,\r\n rgba(246,240,226,.04) 0%,\r\n rgba(83,96,104,.24) 100%\r\n );\r\n}\r\n\r\n\/* SVG *\/\r\n\r\n.camila-flow-svg{\r\n position:absolute;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n z-index:5;\r\n pointer-events:none;\r\n margin-left:14vw;\r\n overflow:visible;\r\n}\r\n\r\n.camila-flow-bg{\r\n fill:none;\r\n stroke:rgba(0,0,0,.18);\r\n stroke-width:1.1;\r\n}\r\n\r\n.camila-flow-bg.secondary{\r\n stroke:rgba(0,0,0,.10);\r\n stroke-width:.9;\r\n filter:blur(.2px);\r\n}\r\n\r\n.camila-flow-active{\r\n fill:none;\r\n stroke:rgba(0,0,0,.92);\r\n stroke-width:2.1;\r\n stroke-linecap:round;\r\n stroke-linejoin:round;\r\n will-change:stroke-dashoffset;\r\n filter:drop-shadow(0 0 10px rgba(0,0,0,.18));\r\n}\r\n\r\n.secondary-active{\r\n stroke:rgba(0,0,0,.64);\r\n stroke-width:1.4;\r\n opacity:.75;\r\n filter:\r\n drop-shadow(0 0 12px rgba(0,0,0,.16))\r\n blur(.15px);\r\n}\r\n\r\n\/* CONTENT *\/\r\n\r\n.camila-hero-content{\r\n position:absolute;\r\n inset:0;\r\n z-index:10;\r\n display:flex;\r\n align-items:end;\r\n justify-content:start;\r\n padding:5vw;\r\n text-align:start;\r\n will-change:transform, opacity;\r\n}\r\n\r\n.camila-text-wrapper{\r\n \/*width:min(100%, 1200px);*\/\r\n max-width:1200px;\r\n transition:transform .08s linear;\r\n}\r\n\r\n.offset{\r\n transform:translateY(-35vh);\r\n}\r\n\r\n#heroTitle{\r\n max-width:980px;\r\n}\r\n\r\n.camila-mini-title{\r\n color:var(--gris-azulado-oscuro);\r\n font-family:'Nunito', sans-serif;\r\n text-transform:uppercase;\r\n letter-spacing:.18em;\r\n font-size:1.07rem;\r\n line-height:1.45;\r\n font-weight:700;\r\n margin-bottom:1.2rem;\r\n opacity:.94;\r\n text-shadow:0 4px 22px rgba(83,96,104,.22);\r\n}\r\n\r\n.camila-reading-text{\r\n display:flex;\r\n flex-direction:column;\r\n gap:.72rem;\r\n color:var(--gris-azulado-oscuro);\r\n font-family:'Cormorant Garamond', serif;\r\n font-weight:400;\r\n margin-top:1rem;\r\n line-height:.94;\r\n font-size:3rem;\r\n letter-spacing:0;\r\n text-shadow:0 8px 32px rgba(83,96,104,.24);\r\n text-wrap:balance;\r\n}\r\n\r\n.camila-line{\r\n display:block;\r\n max-width:100%;\r\n line-height:.87;\r\n}\r\n\r\n\/* GLASS PILLS *\/\r\n\r\n.pillBlur{\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n rgba(246,240,226,.90),\r\n rgba(204,215,221,.93)\r\n );\r\n\r\n backdrop-filter:blur(18px);\r\n -webkit-backdrop-filter:blur(18px);\r\n\r\n border:1px solid rgba(246,240,226,.22);\r\n box-shadow:\r\n 0 14px 46px rgba(83,96,104,.12),\r\n inset 0 1px 1px rgba(255,255,255,.20);\r\n\r\n border-radius:18px;\r\n padding:2.5rem 3rem;\r\n overflow:hidden;\r\n}\r\n\r\n.hero-title-card{\r\n margin-top:0;\r\n transform:translateY(120vh);\r\n opacity:0;\r\n visibility:hidden;\r\n pointer-events:none;\r\n will-change:transform, opacity;\r\n}\r\n\r\n#heroTitle.hero-title-card{\r\n transform:translateY(0);\r\n opacity:1;\r\n visibility:visible;\r\n pointer-events:auto;\r\n}\r\n\r\n.hero-title-left{\r\n margin-left:0;\r\n}\r\n\r\n.hero-title-right{\r\n margin-top:0;\r\n margin-left:50vw;\r\n}\r\n\r\n@media(min-width:1024px) and (max-width:1299px){\r\n .camila-hero-content{\r\n padding:4vw;\r\n }\r\n\r\n #heroTitle{\r\n max-width:820px;\r\n }\r\n\r\n .camila-mini-title{\r\n font-size:.96rem;\r\n margin-bottom:.9rem;\r\n }\r\n\r\n .camila-reading-text{\r\n gap:.56rem;\r\n font-size:2.42rem;\r\n line-height:.96;\r\n }\r\n\r\n .camila-line{\r\n font-size:2.42rem;\r\n }\r\n\r\n .pillBlur{\r\n padding:2rem 2.35rem;\r\n }\r\n\r\n .hero-title-right{\r\n margin-left:43vw;\r\n }\r\n}\r\n\r\n\/* WORD REVEAL OPCIONAL *\/\r\n\r\n.camila-word{\r\n opacity:.08;\r\n filter:blur(8px);\r\n transform:translateY(30px);\r\n display:inline-block;\r\n transition:\r\n opacity .6s ease,\r\n filter .6s ease,\r\n transform .6s ease;\r\n}\r\n\r\n.camila-word.active{\r\n opacity:1;\r\n filter:blur(0);\r\n transform:translateY(0);\r\n}\r\n\r\n\/* MOBILE *\/\r\n\r\n@media(max-width:768px){\r\n\r\n .camila-hero-content{\r\n padding:8vw;\r\n align-items:center;\r\n }\r\n\r\n .camila-reading-text{\r\n font-size:2.12rem;\r\n line-height:.98;\r\n }\r\n\r\n .camila-line{\r\n font-size:2.12rem;\r\n }\r\n\r\n .camila-mini-title{\r\n font-size:.95rem;\r\n letter-spacing:.16em;\r\n }\r\n\r\n .camila-flow-svg{\r\n transform:scale(1.4);\r\n margin-left:5vw;\r\n }\r\n\r\n .camila-bg-1{\r\n background-position-x:-65%;\r\n }\r\n\r\n .camila-bg-3{\r\n background-position:25% ;\r\n }\r\n\r\n .pillBlur{\r\n padding:1.6rem;\r\n }\r\n\r\n .hero-title-card{\r\n margin-left:0;\r\n }\r\n}\r\n\r\n@media(max-width:480px){\r\n .camila-reading-text{\r\n font-size:2.12rem;\r\n gap:.46rem;\r\n }\r\n\r\n .camila-line{\r\n font-size:2.12rem;\r\n }\r\n\r\n .camila-mini-title{\r\n font-size:1.5rem;\r\n letter-spacing:.13em;\r\n }\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- HERO CSS - FIN -->\r\n<!-- ========================= -->\r\n<!-- ========================= -->\r\n<!-- MAGNETIC CARDS CSS - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600&family=Nunito:wght@300;400;500&display=swap');\r\n\r\n:root{\r\n --mica-azul-claro:#d7dde0;\r\n --mica-gris-claro:#eef0ee;\r\n --mica-dorado:#c7a06c;\r\n --mica-hueso:#f7f3ec;\r\n --mica-oscuro:#121417;\r\n}\r\n\r\n.mica-magnetic-section{\r\n width:100%;\r\n padding:80px 2vw 48px;\r\n background-color:var(--mica-hueso);\r\n overflow:hidden;\r\n box-sizing:border-box;\r\n}\r\n\r\n.mica-section-head{\r\n max-width:760px;\r\n margin:0 auto 44px;\r\n text-align:center;\r\n color:var(--mica-oscuro);\r\n}\r\n\r\n.mica-section-head span{\r\n display:inline-block;\r\n margin-bottom:14px;\r\n font-family:'Nunito', sans-serif;\r\n font-size:.82rem;\r\n letter-spacing:.18em;\r\n text-transform:uppercase;\r\n color:var(--mica-dorado);\r\n}\r\n\r\n.mica-section-head h2{\r\n margin:0;\r\n font-family:'Cormorant Garamond', serif;\r\n font-size:clamp(2.8rem, 6vw, 5.8rem);\r\n font-weight:500;\r\n line-height:.9;\r\n letter-spacing:-.04em;\r\n color:var(--mica-oscuro);\r\n}\r\n\r\n.mica-section-head p{\r\n max-width:590px;\r\n margin:24px auto 0;\r\n font-family:'Nunito', sans-serif;\r\n font-size:1.05rem;\r\n line-height:1.75;\r\n color:rgba(83,96,104,.82);\r\n}\r\n\r\n.mica-magnetic-grid{\r\n width:100%;\r\n height:76vh;\r\n min-height:620px;\r\n padding:4%;\r\n display:flex;\r\n gap:16px;\r\n align-items:stretch;\r\n}\r\n\r\n.mica-card{\r\n position:relative;\r\n width:25%;\r\n height:100%;\r\n overflow:hidden;\r\n cursor:pointer;\r\n border-radius:6px;\r\n transform:translateZ(0);\r\n will-change:width;\r\n contain:layout paint;\r\n box-shadow:0 24px 70px rgba(83,96,104,.12);\r\n}\r\n\r\n.mica-card-bg{\r\n position:absolute;\r\n inset:0;\r\n background-size:cover;\r\n background-position:center;\r\n transform:scale(1.06);\r\n filter:saturate(.78) contrast(.94) brightness(1.05);\r\n will-change:transform;\r\n}\r\n\r\n.mica-card-overlay{\r\n position:absolute;\r\n inset:0;\r\n background:\r\n linear-gradient(to top, rgba(83,96,104,.78) 0%, rgba(83,96,104,.28) 48%, rgba(246,240,226,.18) 100%),\r\n radial-gradient(circle at 50% 25%, rgba(246,240,226,.55), transparent 34%);\r\n z-index:2;\r\n pointer-events:none;\r\n}\r\n\r\n.mica-card-content{\r\n position:relative;\r\n z-index:5;\r\n height:100%;\r\n display:flex;\r\n flex-direction:column;\r\n justify-content:space-between;\r\n padding:34px;\r\n box-sizing:border-box;\r\n pointer-events:none;\r\n}\r\n\r\n.mica-card-content h3{\r\n margin:0;\r\n color:var(--mica-hueso);\r\n font-family:'Cormorant Garamond', serif;\r\n font-size:clamp(2.35rem, 3.2vw, 3.8rem);\r\n font-weight:500;\r\n line-height:.9;\r\n letter-spacing:-.04em;\r\n text-shadow:0 10px 40px rgba(0,0,0,.18);\r\n will-change:transform;\r\n}\r\n\r\n.mica-card-content p{\r\n margin:0;\r\n max-width:360px;\r\n color:rgba(246,240,226,.92);\r\n font-family:'Nunito', sans-serif;\r\n font-size:1.4rem;\r\n line-height:1.7;\r\n opacity:.86;\r\n transform:translateY(12px);\r\n will-change:transform, opacity;\r\n}\r\n\r\n.mica-card-content span{\r\n width:9px;\r\n height:9px;\r\n border-radius:50%;\r\n background:var(--mica-dorado);\r\n display:block;\r\n box-shadow:0 0 22px rgba(219,181,139,.85);\r\n}\r\n\r\n@media(max-width:991px){\r\n .mica-magnetic-section{\r\n padding:58px 18px 38px;\r\n }\r\n\r\n .mica-magnetic-grid{\r\n width:100%;\r\n display:grid;\r\n grid-template-columns:1fr;\r\n height:auto;\r\n min-height:auto;\r\n gap:16px;\r\n padding:0;\r\n }\r\n\r\n .mica-card{\r\n width:100%;\r\n min-height:0;\r\n aspect-ratio:1 \/ .82;\r\n border-radius:8px;\r\n cursor:default;\r\n box-shadow:0 16px 42px rgba(83,96,104,.14);\r\n will-change:auto;\r\n }\r\n\r\n .mica-card-bg{\r\n transform:scale(1.02);\r\n filter:saturate(.82) contrast(.96) brightness(.98);\r\n will-change:auto;\r\n }\r\n\r\n .mica-card-overlay{\r\n background:\r\n linear-gradient(to top, rgba(45,54,59,.86) 0%, rgba(83,96,104,.52) 48%, rgba(246,240,226,.16) 100%),\r\n radial-gradient(circle at 50% 20%, rgba(246,240,226,.42), transparent 38%);\r\n }\r\n\r\n .mica-card-content{\r\n justify-content:flex-end;\r\n gap:18px;\r\n padding:24px;\r\n }\r\n\r\n .mica-card-content h3{\r\n font-size:clamp(2.2rem, 12vw, 3.15rem);\r\n line-height:.92;\r\n max-width:92%;\r\n }\r\n\r\n .mica-card-content p{\r\n max-width:92%;\r\n font-size:1rem;\r\n line-height:1.55;\r\n opacity:.94;\r\n transform:none;\r\n }\r\n\r\n .mica-card-content span{\r\n position:absolute;\r\n top:22px;\r\n right:22px;\r\n width:8px;\r\n height:8px;\r\n }\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- MAGNETIC CARDS CSS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- MI HISTORIA CSS - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n.philosophy-section{\r\n position:relative;\r\n height:260vh;\r\n background:\r\n radial-gradient(circle at 50% 20%, rgba(204,215,221,.55), transparent 34%),\r\n radial-gradient(circle at 20% 80%, rgba(219,181,139,.24), transparent 32%),\r\n linear-gradient(180deg, var(--mica-hueso) 0%, var(--mica-gris-claro) 58%, var(--mica-azul-claro) 100%);\r\n}\r\n\r\n.philosophy-section__inner{\r\n position:relative;\r\n top:0;\r\n height:100vh;\r\n width:100%;\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n justify-content:center;\r\n padding:4vw;\r\n overflow:hidden;\r\n}\r\n\r\n.philosophy-section__mini-top{\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n gap:12px;\r\n margin-bottom:20px;\r\n margin-top:10vh;\r\n}\r\n\r\n.philosophy-section__icon-wrap{\r\n color:var(--mica-dorado);\r\n opacity:.95;\r\n filter:drop-shadow(0 10px 26px rgba(219,181,139,.28));\r\n}\r\n\r\n.philosophy-section__mini-top span{\r\n font-family:'Nunito', sans-serif;\r\n font-size:13px;\r\n letter-spacing:2.5px;\r\n font-weight:700;\r\n color:var(--mica-oscuro);\r\n}\r\n\r\n.philosophy-section__reading-text{\r\n width:min(1200px,90%);\r\n margin:0 auto;\r\n text-align:center;\r\n line-height:1.05;\r\n font-family:'Cormorant Garamond', serif;\r\n font-weight:500;\r\n font-size:clamp(2.4rem,4vw,4rem);\r\n letter-spacing:-.035em;\r\n}\r\n\r\n.philosophy-section__reading-text > span{\r\n color:rgba(83,96,104,.42);\r\n will-change:color, opacity, filter;\r\n}\r\n\r\n.philosophy-section__reading-word{\r\n display:inline-block;\r\n color:rgba(83,96,104,.30);\r\n opacity:.42;\r\n filter:blur(5px);\r\n transform:translateY(.28em);\r\n will-change:color, opacity, filter, transform;\r\n}\r\n\r\n.philosophy-section__button{\r\n margin-top:30px;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:26px;\r\n padding:16px 24px;\r\n border-radius:999px;\r\n text-decoration:none;\r\n background:var(--mica-oscuro);\r\n color:var(--mica-hueso);\r\n font-family:'Nunito', sans-serif;\r\n font-size:13px;\r\n letter-spacing:1.4px;\r\n font-weight:700;\r\n transform:translateY(20px);\r\n opacity:0;\r\n box-shadow:0 18px 50px rgba(83,96,104,.22);\r\n transition:background .35s ease, color .35s ease, transform .35s ease;\r\n}\r\n\r\n.philosophy-section__button:hover{\r\n background:var(--mica-dorado);\r\n color:var(--mica-oscuro);\r\n transform:translateY(-2px);\r\n}\r\n\r\n.philosophy-section__button-dot{\r\n width:6px;\r\n height:6px;\r\n border-radius:50%;\r\n background:var(--mica-dorado);\r\n}\r\n\r\n.philosophy-section__button:hover .philosophy-section__button-dot{\r\n background:var(--mica-oscuro);\r\n}\r\n\r\n@media(max-width:768px){\r\n .philosophy-section{\r\n height:285vh;\r\n }\r\n\r\n .philosophy-section__inner{\r\n padding:10vw 6vw;\r\n }\r\n\r\n .philosophy-section__mini-top{\r\n margin-bottom:40px;\r\n }\r\n\r\n .philosophy-section__reading-text{\r\n width:100%;\r\n line-height:1.12;\r\n font-size:clamp(2.2rem,9vw,3.4rem);\r\n }\r\n\r\n .philosophy-section__button{\r\n margin-top:50px;\r\n padding:14px 18px;\r\n font-size:12px;\r\n }\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- MI HISTORIA CSS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- EDITORIAL STORY CSS - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n.editorial-story *{\r\n box-sizing:border-box;\r\n}\r\n\r\n.editorial-story{\r\n --title:#000;\r\n --text:#000;\r\n --accent:#000;\r\n\r\n background:#fff;\r\n\r\n width:100%;\r\n overflow:hidden;\r\n padding:100px 0;\r\n font-family:'Inter', 'Nunito', sans-serif;\r\n position:relative;\r\n}\r\n\r\n.editorial-story::before{\r\n content:none;\r\n position:absolute;\r\n inset:0;\r\n background:\r\n radial-gradient(circle at 18% 22%, rgba(219,181,139,.16), transparent 34%),\r\n radial-gradient(circle at 85% 18%, rgba(204,215,221,.42), transparent 38%);\r\n pointer-events:none;\r\n}\r\n\r\n.story-grid{\r\n width:min(1500px,92%);\r\n margin:auto;\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:60px;\r\n align-items:center;\r\n min-height:100vh;\r\n position:relative;\r\n z-index:2;\r\n}\r\n\r\n.story-content{\r\n max-width:640px;\r\n z-index:3;\r\n}\r\n\r\n.eyebrow{\r\n display:block;\r\n margin-bottom:42px;\r\n color:var(--accent);\r\n font-size:13px;\r\n letter-spacing:.24em;\r\n font-weight:700;\r\n text-transform:uppercase;\r\n}\r\n\r\n.story-title{\r\n margin:0;\r\n font-family:'Cormorant Garamond', serif;\r\n font-size:clamp(2.04rem,4.32vw,3.8rem);\r\n line-height:.98;\r\n font-weight:500;\r\n color:var(--title);\r\n letter-spacing:-.025em;\r\n}\r\n\r\n.story-text{\r\n margin-top:38px;\r\n max-width:600px;\r\n color:var(--text);\r\n font-size:1.1rem;\r\n line-height:1.9;\r\n font-weight:400;\r\n}\r\n\r\n.story-btn{\r\n margin-top:52px;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:28px;\r\n text-decoration:none;\r\n padding:18px 28px;\r\n border-radius:999px;\r\n font-size:13px;\r\n font-weight:700;\r\n letter-spacing:.14em;\r\n text-transform:uppercase;\r\n color:var(--hueso);\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n rgba(83,96,104,.94),\r\n rgba(83,96,104,.78)\r\n );\r\n backdrop-filter:blur(12px);\r\n -webkit-backdrop-filter:blur(12px);\r\n border:1px solid rgba(246,240,226,.18);\r\n box-shadow:0 14px 44px rgba(83,96,104,.14);\r\n transition:\r\n transform .45s ease,\r\n background .45s ease,\r\n box-shadow .45s ease;\r\n}\r\n\r\n.story-btn:hover{\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n rgba(219,181,139,.94),\r\n rgba(219,181,139,.78)\r\n );\r\n box-shadow:0 18px 50px rgba(219,181,139,.22);\r\n color:var(--gris-azulado-oscuro);\r\n}\r\n\r\n.story-btn .dot{\r\n width:6px;\r\n height:6px;\r\n border-radius:50%;\r\n background:currentColor;\r\n}\r\n\r\n.story-images{\r\n position:relative;\r\n height:860px;\r\n pointer-events:none;\r\n}\r\n\r\n.img-wrap{\r\n position:absolute;\r\n overflow:hidden;\r\n border-radius:26px;\r\n will-change:transform;\r\n transform:translate3d(0,0,0);\r\n}\r\n\r\n.img-wrap::after{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n rgba(246,240,226,.04),\r\n rgba(83,96,104,.12)\r\n );\r\n backdrop-filter:blur(1.5px);\r\n -webkit-backdrop-filter:blur(1.5px);\r\n pointer-events:none;\r\n}\r\n\r\n.img-wrap img{\r\n width:100%;\r\n height:112%;\r\n object-fit:cover;\r\n display:block;\r\n filter:saturate(.86) contrast(.96) brightness(1.04);\r\n transform:scale(1.08);\r\n will-change:transform;\r\n}\r\n\r\n.img-back{\r\n width:62%;\r\n height:92%;\r\n right:0;\r\n top:0;\r\n z-index:1;\r\n box-shadow:0 18px 60px rgba(83,96,104,.10);\r\n}\r\n\r\n.img-back img{\r\n opacity:.92;\r\n}\r\n\r\n.img-front{\r\n width:54%;\r\n height:72%;\r\n left:8%;\r\n bottom:-3%;\r\n z-index:2;\r\n box-shadow:0 30px 80px rgba(83,96,104,.14);\r\n}\r\n\r\n.img-front::before,\r\n.img-back::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n border:1px solid rgba(246,240,226,.22);\r\n border-radius:26px;\r\n z-index:2;\r\n pointer-events:none;\r\n}\r\n\r\n.gsap-float,\r\n.img-parallax{\r\n will-change:transform;\r\n}\r\n\r\n@media(max-width:1100px){\r\n .story-grid{\r\n grid-template-columns:1fr;\r\n gap:80px;\r\n }\r\n\r\n .story-content{\r\n max-width:100%;\r\n }\r\n\r\n .story-images{\r\n height:700px;\r\n }\r\n\r\n .img-back{\r\n width:70%;\r\n }\r\n\r\n .img-front{\r\n width:58%;\r\n }\r\n}\r\n\r\n@media(max-width:768px){\r\n .editorial-story{\r\n padding:72px 20px 88px;\r\n overflow:hidden;\r\n }\r\n\r\n .story-grid{\r\n width:min(100%,560px);\r\n min-height:auto;\r\n gap:42px;\r\n }\r\n\r\n .story-content{\r\n max-width:100%;\r\n }\r\n\r\n .editorial-story .gsap-float,\r\n .editorial-story .img-parallax{\r\n transform:none!important;\r\n rotate:0deg!important;\r\n will-change:auto;\r\n }\r\n\r\n .story-title{\r\n font-size:clamp(1.88rem,8.4vw,2.68rem);\r\n line-height:1;\r\n letter-spacing:-.015em;\r\n }\r\n\r\n .story-text{\r\n margin-top:24px;\r\n font-size:.98rem;\r\n line-height:1.7;\r\n }\r\n\r\n .story-images{\r\n display:grid;\r\n grid-template-columns:1fr;\r\n gap:18px;\r\n height:auto;\r\n width:min(100%,420px);\r\n margin:0 auto;\r\n }\r\n\r\n .img-wrap{\r\n position:relative;\r\n inset:auto;\r\n width:100%;\r\n height:auto;\r\n aspect-ratio:4 \/ 4.35;\r\n border-radius:18px;\r\n transform:none!important;\r\n }\r\n\r\n .img-wrap::after{\r\n background:linear-gradient(180deg, rgba(246,240,226,.02), rgba(83,96,104,.08));\r\n backdrop-filter:none;\r\n -webkit-backdrop-filter:none;\r\n }\r\n\r\n .img-back{\r\n width:62%;\r\n height:auto;\r\n right:auto;\r\n top:auto;\r\n justify-self:start;\r\n }\r\n\r\n .img-front{\r\n width:62%;\r\n height:auto;\r\n left:auto;\r\n bottom:auto;\r\n justify-self:end;\r\n margin-top:-24px;\r\n }\r\n\r\n .img-wrap img{\r\n height:100%;\r\n transform:none!important;\r\n }\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- EDITORIAL STORY CSS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- FLOATING PROCESS CSS - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n.floating-process{\r\n --bg:#fff;\r\n --verde:#000;\r\n --texto:#000;\r\n --gris:#000;\r\n --linea:#000;\r\n\r\n position:relative;\r\n background:var(--bg);\r\n font-family:'Inter', 'Nunito', sans-serif;\r\n overflow:hidden;\r\n}\r\n\r\n.floating-process *{\r\n box-sizing:border-box;\r\n}\r\n\r\n.fixed-bg{\r\n position:fixed;\r\n inset:0;\r\n width:100%;\r\n height:100vh;\r\n pointer-events:none;\r\n z-index:1;\r\n opacity:0;\r\n visibility:hidden;\r\n transition:\r\n opacity .8s cubic-bezier(.22,1,.36,1),\r\n visibility .8s cubic-bezier(.22,1,.36,1);\r\n}\r\n\r\n.fixed-bg.visible{\r\n opacity:1;\r\n visibility:visible;\r\n}\r\n\r\n.bg-lines{\r\n width:100%;\r\n height:100%;\r\n opacity:.16;\r\n will-change:transform;\r\n transition:transform .15s linear;\r\n}\r\n\r\n.bg-lines path{\r\n stroke:#000!important;\r\n}\r\n\r\n.process-wrapper{\r\n position:relative;\r\n z-index:2;\r\n}\r\n\r\n.process-card{\r\n position:relative;\r\n min-height:48vh;\r\n padding:80px 0;\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n align-items:center;\r\n width:min(1350px,90%);\r\n margin:auto;\r\n opacity:.18;\r\n transform:translateY(80px) scale(.97);\r\n transition:\r\n opacity 1.2s cubic-bezier(.22,1,.36,1),\r\n transform 1.2s cubic-bezier(.22,1,.36,1);\r\n will-change:transform, opacity;\r\n}\r\n\r\n.process-card.active{\r\n opacity:1;\r\n transform:translateY(0) scale(1);\r\n}\r\n\r\n.process-card .content{\r\n max-width:560px;\r\n transition:transform .2s linear;\r\n}\r\n\r\n.process-card .eyebrow{\r\n display:block;\r\n margin-bottom:22px;\r\n color:var(--verde);\r\n font-size:11px;\r\n font-weight:600;\r\n letter-spacing:3px;\r\n opacity:.9;\r\n}\r\n\r\n.process-card .content h2{\r\n margin:0;\r\n color:var(--verde);\r\n font-family:'Cormorant Garamond', serif;\r\n font-size:clamp(3.2rem,5vw,5.3rem);\r\n line-height:.95;\r\n font-weight:500;\r\n}\r\n\r\n.process-card .content p{\r\n margin-top:22px;\r\n max-width:520px;\r\n color:var(--gris);\r\n font-size:1.08rem;\r\n line-height:1.9;\r\n font-weight:400;\r\n}\r\n\r\n.process-card .number{\r\n --process-number-offset-y:0px;\r\n text-align:right;\r\n font-family:var(--font-primary);\r\n font-size:clamp(7rem,18vw,14rem);\r\n line-height:1;\r\n font-weight:400;\r\n color:var(--verde);\r\n opacity:.13;\r\n letter-spacing:-.03em;\r\n user-select:none;\r\n transition:transform .2s linear;\r\n}\r\n\r\n.floating-process a,\r\n.floating-process button{\r\n border:1px solid #000!important;\r\n color:#000!important;\r\n background:transparent!important;\r\n}\r\n\r\n@media(max-width:980px){\r\n .process-card{\r\n grid-template-columns:1fr;\r\n gap:28px;\r\n min-height:auto;\r\n padding:76px 0 58px;\r\n }\r\n\r\n .process-card .number{\r\n text-align:left;\r\n font-size:6rem;\r\n letter-spacing:-.02em;\r\n }\r\n}\r\n\r\n@media(max-width:768px){\r\n .process-card .content h2{\r\n font-size:3.3rem;\r\n }\r\n\r\n .process-card .content p{\r\n font-size:1rem;\r\n line-height:1.85;\r\n }\r\n\r\n .process-card .number{\r\n font-size:5rem;\r\n }\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- FLOATING PROCESS CSS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- CURVED REVEAL CSS - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n.curve-section{\r\n --bg:#efefee;\r\n --text:#2f3434;\r\n --green:#88a79d;\r\n --gray:#646464;\r\n\r\n position:relative;\r\n height:220vh;\r\n background:var(--bg);\r\n overflow:visible;\r\n font-family:'Inter', 'Nunito', sans-serif;\r\n}\r\n\r\n.curve-section *{\r\n box-sizing:border-box;\r\n}\r\n\r\n.curve-sticky{\r\n position:sticky;\r\n top:10vh;\r\n width:100%;\r\n height:100vh;\r\n overflow:hidden;\r\n}\r\n\r\n.curve-sticky.is-fixed{\r\n position:fixed;\r\n inset:0;\r\n width:100%;\r\n height:100vh;\r\n z-index:1;\r\n}\r\n\r\n.curve-sticky.is-ended{\r\n position:absolute;\r\n left:0;\r\n right:0;\r\n top:var(--curve-release-top, 0px);\r\n bottom:auto;\r\n width:100%;\r\n height:100vh;\r\n}\r\n\r\n.curve-content{\r\n position:absolute;\r\n top:0;\r\n left:0;\r\n width:100%;\r\n z-index:5;\r\n padding:\r\n clamp(40px,6vw,110px)\r\n clamp(24px,7vw,140px);\r\n display:grid;\r\n grid-template-columns:1.2fr .8fr;\r\n gap:90px;\r\n pointer-events:none;\r\n}\r\n\r\n.curve-title{\r\n margin-top:0;\r\n color:var(--text);\r\n font-family:'Cormorant Garamond', serif;\r\n font-size:clamp(3rem,5vw,5.5rem);\r\n line-height:1.02;\r\n font-weight:500;\r\n letter-spacing:-2px;\r\n max-width:850px;\r\n}\r\n\r\n.curve-title span{\r\n color:var(--bg);\r\n}\r\n\r\n.curve-title-dynamic{\r\n color:#100f0f;\r\n will-change:color;\r\n}\r\n\r\n.curve-title-static{\r\n color:whitesmoke!important;\r\n}\r\n\r\n.right-side{\r\n display:flex;\r\n justify-content:flex-end;\r\n}\r\n\r\n.right-side p{\r\n max-width:500px;\r\n color:var(--gray);\r\n font-size:1.12rem;\r\n line-height:1.95;\r\n font-weight:400;\r\n margin-top:10px;\r\n}\r\n\r\n.right-side span{\r\n display:block;\r\n margin-top:18px;\r\n color:var(--green);\r\n font-weight:500;\r\n}\r\n\r\n.curve-copy-dynamic,\r\n.curve-copy-accent{\r\n will-change:color;\r\n}\r\n\r\n.image-wrap{\r\n position:absolute;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n}\r\n\r\n.image-mask{\r\n position:absolute;\r\n left:50%;\r\n bottom:-10vh;\r\n width:120vw;\r\n height:62vh;\r\n background:#000;\r\n transform:translateX(-50%);\r\n overflow:hidden;\r\n border-radius:\r\n 50% 50% 0 0 \/\r\n 100% 100% 0 0;\r\n will-change:border-radius, width, height, transform;\r\n transition:border-radius .2s linear;\r\n}\r\n\r\n.hero-image{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n opacity:0;\r\n transform:scale(1.1);\r\n filter:\r\n brightness(.72)\r\n saturate(.95);\r\n will-change:transform;\r\n}\r\n\r\n.curve-section-mobile{\r\n --bg:#efefee;\r\n --text:#f6f0e2;\r\n --gray:rgba(246,240,226,.88);\r\n\r\n position:relative;\r\n min-height:70svh;\r\n padding:96px 22px 42px;\r\n display:flex!important;\r\n align-items:flex-end;\r\n overflow:hidden;\r\n background:\r\n linear-gradient(180deg, rgba(47,52,52,.18) 0%, rgba(47,52,52,.72) 100%),\r\n url('..\/hero2.jpg')\r\n center\/cover\r\n no-repeat;\r\n font-family:'Inter', 'Nunito', sans-serif;\r\n}\r\n\r\n.curve-section-mobile__content{\r\n position:relative;\r\n z-index:1;\r\n width:100%;\r\n}\r\n\r\n.curve-section-mobile .curve-title{\r\n margin:0;\r\n max-width:100%;\r\n color:var(--text);\r\n font-size:clamp(3rem,13vw,4.15rem);\r\n line-height:1.04;\r\n letter-spacing:-1px;\r\n}\r\n\r\n.curve-section-mobile .curve-title span{\r\n color:var(--text)!important;\r\n}\r\n\r\n.curve-section-mobile p{\r\n margin:24px 0 0;\r\n color:var(--gray);\r\n font-size:.98rem;\r\n line-height:1.72;\r\n}\r\n\r\n.curve-section-mobile p span{\r\n display:block;\r\n margin-top:18px;\r\n color:#f6f0e2;\r\n font-weight:500;\r\n}\r\n\r\n@media(min-width:992px){\r\n .curve-section-mobile.d-lg-none{\r\n display:none!important;\r\n }\r\n}\r\n\r\n.motion-path{\r\n position:absolute;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n z-index:3;\r\n pointer-events:none;\r\n opacity:.5;\r\n}\r\n\r\n@media(max-width:980px){\r\n .curve-content{\r\n grid-template-columns:1fr;\r\n gap:40px;\r\n }\r\n\r\n .curve-title{\r\n max-width:100%;\r\n }\r\n\r\n .right-side{\r\n justify-content:flex-start;\r\n }\r\n\r\n .right-side p{\r\n max-width:100%;\r\n font-size:1.02rem;\r\n line-height:1.85;\r\n }\r\n}\r\n\r\n@media(max-width:768px){\r\n .curve-section{\r\n height:320vh;\r\n }\r\n\r\n .curve-sticky{\r\n top:0;\r\n height:100svh;\r\n }\r\n\r\n .curve-title{\r\n font-size:2rem;\r\n line-height:1.08;\r\n letter-spacing:-1px;\r\n }\r\n\r\n .image-mask{\r\n left:50%;\r\n bottom:0;\r\n width:100vw;\r\n height:100svh;\r\n border-radius:0;\r\n }\r\n\r\n .hero-image{\r\n position:absolute;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n object-position:center;\r\n transform:none;\r\n }\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- CURVED REVEAL CSS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- ORGANIC EDITORIAL CARDS CSS - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n.organic-editorial *{\r\n box-sizing:border-box;\r\n}\r\n\r\n.organic-editorial{\r\n --azul-claro:#000;\r\n --gris-claro:#fff;\r\n --beige-dorado:#000;\r\n --hueso:#fff;\r\n --gris-azulado-oscuro:#000;\r\n --bg:#fff;\r\n --title:#000;\r\n --text:#000;\r\n --accent:#000;\r\n\r\n width:100%;\r\n overflow:hidden;\r\n background:var(--bg);\r\n padding:100px 0 120px;\r\n font-family:'Nunito',sans-serif;\r\n position:relative;\r\n}\r\n\r\n.organic-editorial::before{\r\n content:none;\r\n position:absolute;\r\n inset:0;\r\n background:\r\n radial-gradient(circle at 15% 20%, rgba(219,181,139,.18), transparent 32%),\r\n radial-gradient(circle at 82% 12%, rgba(204,215,221,.45), transparent 38%);\r\n pointer-events:none;\r\n}\r\n\r\n.organic-section-title{\r\n position:relative;\r\n z-index:2;\r\n margin:0 auto 76px;\r\n width:min(1500px,92%);\r\n color:var(--title);\r\n font-family:'Cormorant Garamond',serif;\r\n font-size:clamp(4rem,8vw,8rem);\r\n line-height:.9;\r\n font-weight:500;\r\n letter-spacing:-.04em;\r\n text-align:center;\r\n}\r\n\r\n.organic-grid{\r\n width:min(1500px,92%);\r\n margin:auto;\r\n display:grid;\r\n grid-template-columns:repeat(3,1fr);\r\n gap:70px;\r\n align-items:start;\r\n position:relative;\r\n z-index:2;\r\n}\r\n\r\n.organic-card{\r\n text-align:center;\r\n position:relative;\r\n}\r\n\r\n.center-card{\r\n margin-top:110px;\r\n}\r\n\r\n.blob-wrap{\r\n position:relative;\r\n width:100%;\r\n max-width:420px;\r\n margin:auto;\r\n aspect-ratio:1\/.78;\r\n will-change:transform;\r\n padding: 2%;\r\n}\r\n\r\n.blob-outline{\r\n position:absolute;\r\n width:92%;\r\n height:92%;\r\n left:7%;\r\n top:-6%;\r\n border:1px solid rgba(0,0,0,.22);\r\n border-radius:58% 42% 55% 45% \/ 42% 58% 38% 62%;\r\n transform:rotate(-9deg);\r\n z-index:1;\r\n}\r\n\r\n.blob-shape{\r\n position:absolute;\r\n inset:0;\r\n overflow:hidden;\r\n border-radius:58% 42% 55% 45% \/ 42% 58% 38% 62%;\r\n z-index:2;\r\n background:#fff;\r\n backdrop-filter:blur(12px);\r\n -webkit-backdrop-filter:blur(12px);\r\n border:1px solid rgba(0,0,0,.18);\r\n box-shadow:0 16px 48px rgba(0,0,0,.08);\r\n}\r\n\r\n.blob-shape::after{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10));\r\n backdrop-filter:blur(2px);\r\n -webkit-backdrop-filter:blur(2px);\r\n pointer-events:none;\r\n z-index:2;\r\n}\r\n\r\n.blob-dark{\r\n border-radius:45% 55% 40% 60% \/ 58% 40% 60% 42%;\r\n}\r\n\r\n.blob-dark img{\r\n filter:grayscale(1) brightness(.78) contrast(1.08);\r\n}\r\n\r\n.blob-shape img{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n display:block;\r\n transform:scale(0.4);\r\n filter:grayscale(1) brightness(1.02) contrast(1.04);\r\n will-change:transform;\r\n}\r\n\r\n.organic-title{\r\n margin:42px auto 0;\r\n max-width:420px;\r\n font-family:'Cormorant Garamond',serif;\r\n font-size:clamp(2.7rem,3vw,4rem);\r\n line-height:.94;\r\n font-weight:500;\r\n letter-spacing:-.04em;\r\n color:var(--title);\r\n}\r\n\r\n.organic-text{\r\n margin:28px auto 0;\r\n max-width:370px;\r\n color:var(--text);\r\n font-size:1.03rem;\r\n line-height:1.9;\r\n font-weight:400;\r\n}\r\n\r\n.organic-places{\r\n max-width:520px;\r\n}\r\n\r\n.organic-place-list{\r\n width:min(560px,100%);\r\n margin:26px auto 0;\r\n color:#000;\r\n font-size:.96rem;\r\n line-height:1.8;\r\n}\r\n\r\n.organic-place-list span{\r\n display:inline;\r\n}\r\n\r\n.organic-place-list span:not(:last-child)::after{\r\n content:\", \";\r\n color:var(--accent);\r\n}\r\n\r\n.organic-btn{\r\n margin-top:36px;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:28px;\r\n text-decoration:none;\r\n padding:16px 24px;\r\n border-radius:999px;\r\n font-size:12px;\r\n font-weight:700;\r\n letter-spacing:.16em;\r\n text-transform:uppercase;\r\n color:#000;\r\n background:transparent;\r\n backdrop-filter:blur(12px);\r\n -webkit-backdrop-filter:blur(12px);\r\n border:1px solid #000;\r\n box-shadow:none;\r\n transition:transform .35s ease, background .35s ease, box-shadow .35s ease;\r\n}\r\n\r\n.organic-btn:hover{\r\n transform:translateY(-4px);\r\n background:#000;\r\n color:#fff;\r\n box-shadow:0 18px 50px rgba(0,0,0,.12);\r\n}\r\n\r\n.organic-btn .dot{\r\n width:5px;\r\n height:5px;\r\n border-radius:50%;\r\n background:currentColor;\r\n}\r\n\r\n.blob-wrap,\r\n.blob-shape img{\r\n transition:transform .18s linear;\r\n}\r\n\r\n@media(max-width:1100px){\r\n .organic-grid{\r\n grid-template-columns:1fr;\r\n gap:120px;\r\n }\r\n\r\n .center-card{\r\n margin-top:0;\r\n }\r\n\r\n .blob-wrap{\r\n max-width:520px;\r\n }\r\n}\r\n\r\n@media(max-width:768px){\r\n .organic-editorial{\r\n padding:70px 0 90px;\r\n }\r\n\r\n .organic-grid{\r\n width:min(92%,560px);\r\n gap:90px;\r\n }\r\n\r\n .organic-title{\r\n font-size:3rem;\r\n }\r\n\r\n .organic-text{\r\n font-size:1rem;\r\n line-height:1.8;\r\n }\r\n\r\n .blob-wrap{\r\n max-width:100%;\r\n }\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- ORGANIC EDITORIAL CARDS CSS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- CONTACTO COMBINADO CSS - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n.mica-contact-combined{\r\n --mica-bg:#fff;\r\n --mica-card:#ffffff;\r\n --mica-text:#121417;\r\n --mica-soft:#000;\r\n --mica-gold:#000;\r\n --mica-gray:#000;\r\n --mica-white:#ffffff;\r\n\r\n width:100%;\r\n min-height:100vh;\r\n padding:120px 5vw 96px;\r\n background:#fff;\r\n font-family:\"Inter\", \"Nunito\", sans-serif;\r\n position:relative;\r\n overflow:hidden;\r\n isolation:isolate;\r\n}\r\n\r\n.mica-contact-bg{\r\n position:absolute;\r\n inset:-18vh 0;\r\n z-index:0;\r\n background:#fff;\r\n background-size:cover;\r\n background-position:center;\r\n will-change:transform;\r\n transform:translate3d(0,0,0) scale(1.12);\r\n}\r\n\r\n.mica-contact-combined::before{\r\n content:none;\r\n position:absolute;\r\n inset:0;\r\n background:\r\n radial-gradient(circle at 12% 18%, rgba(219,181,139,.24), transparent 30%),\r\n radial-gradient(circle at 78% 24%, rgba(246,240,226,.55), transparent 32%),\r\n linear-gradient(180deg, rgba(246,240,226,.18), rgba(83,96,104,.14));\r\n pointer-events:none;\r\n z-index:1;\r\n}\r\n\r\n.mica-contact-combined::after{\r\n content:none;\r\n position:absolute;\r\n left:50%;\r\n bottom:-6vh;\r\n width:138vw;\r\n height:64vh;\r\n transform:translateX(-50%);\r\n background:\r\n linear-gradient(180deg, rgba(246,240,226,.96) 0%, var(--mica-bg) 62%, rgba(232,236,239,.92) 100%);\r\n border-radius:50% 50% 0 0 \/ 100% 100% 0 0;\r\n pointer-events:none;\r\n z-index:1;\r\n}\r\n\r\n.mica-contact-combined *{\r\n box-sizing:border-box;\r\n}\r\n\r\n.mica-contact-grid{\r\n width:min(1320px,100%);\r\n margin:0 auto;\r\n display:grid;\r\n grid-template-columns:minmax(0,1.05fr) minmax(360px,500px);\r\n gap:clamp(32px,6vw,96px);\r\n align-items:center;\r\n min-height:calc(100vh - 216px);\r\n position:relative;\r\n z-index:3;\r\n}\r\n\r\n.mica-contact-info{\r\n display:flex;\r\n flex-direction:column;\r\n justify-content:center;\r\n max-width:820px;\r\n}\r\n\r\n.mica-contact-info h3,\r\n.mica-contact-form h2{\r\n margin:0 0 1.2rem;\r\n color:var(--mica-text);\r\n font-family:\"Cormorant Garamond\", serif;\r\n font-weight:500;\r\n line-height:.95;\r\n}\r\n\r\n.mica-contact-info h3{\r\n font-size:clamp(2.9rem,5vw,5.4rem);\r\n max-width:760px;\r\n letter-spacing:-.045em;\r\n text-wrap:balance;\r\n}\r\n\r\n.mica-contact-info p{\r\n max-width:690px;\r\n color:var(--mica-gray);\r\n font-size:clamp(1.02rem,1.25vw,1.22rem);\r\n line-height:1.85;\r\n margin:0 0 1.4rem;\r\n}\r\n\r\n.mica-contact-info ul{\r\n list-style:none;\r\n padding:0;\r\n margin:.4rem 0 2rem;\r\n display:grid;\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n gap:10px 14px;\r\n max-width:760px;\r\n}\r\n\r\n.mica-contact-info li{\r\n min-height:56px;\r\n display:grid;\r\n grid-template-columns:34px 1fr;\r\n align-items:start;\r\n gap:12px;\r\n padding:12px 14px;\r\n border-radius:16px;\r\n background:#fff;\r\n border:1px solid rgba(0,0,0,.18);\r\n backdrop-filter:blur(14px);\r\n -webkit-backdrop-filter:blur(14px);\r\n color:var(--mica-gray);\r\n font-size:.96rem;\r\n line-height:1.45;\r\n margin:0;\r\n}\r\n\r\n.mica-contact-info .contact-icon{\r\n width:34px;\r\n height:34px;\r\n display:grid;\r\n place-items:center;\r\n border-radius:50%;\r\n background:#fff;\r\n border:1px solid #000;\r\n color:var(--mica-text);\r\n font-size:1rem;\r\n line-height:1;\r\n}\r\n\r\n.mica-contact-info .contact-icon i{\r\n display:block;\r\n font-size:.95rem;\r\n line-height:1;\r\n}\r\n\r\n.mica-contact-info .contact-meta{\r\n display:flex;\r\n flex-direction:column;\r\n gap:2px;\r\n}\r\n\r\n.mica-contact-info strong{\r\n display:block;\r\n color:var(--mica-text);\r\n font-weight:600;\r\n font-size:.78rem;\r\n letter-spacing:.12em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.mica-contact-info .contact-meta span{\r\n color:var(--mica-gray);\r\n}\r\n\r\n.mica-contact-info em{\r\n color:var(--mica-text);\r\n font-size:1.1rem;\r\n line-height:1.7;\r\n}\r\n\r\n.mica-whatsapp-btn,\r\n.mica-contact-form .btn-hero{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n border-radius:999px;\r\n background:#fff;\r\n color:#000;\r\n border:1px solid #000;\r\n font-size:.82rem;\r\n font-weight:600;\r\n letter-spacing:1.6px;\r\n text-transform:uppercase;\r\n text-decoration:none;\r\n cursor:pointer;\r\n transition:\r\n transform .35s ease,\r\n background .35s ease,\r\n color .35s ease,\r\n box-shadow .35s ease;\r\n}\r\n\r\n.mica-whatsapp-btn{\r\n gap:14px;\r\n width:max-content;\r\n margin-top:.6rem;\r\n padding:15px 24px;\r\n}\r\n\r\n.mica-whatsapp-btn:hover,\r\n.mica-contact-form .btn-hero:hover{\r\n background:#000;\r\n color:#fff;\r\n transform:translateY(-3px);\r\n box-shadow:0 10px 20px rgba(0,0,0,.12);\r\n}\r\n\r\n.mica-whatsapp-btn span{\r\n width:6px;\r\n height:6px;\r\n border-radius:50%;\r\n background:currentColor;\r\n}\r\n\r\n.mica-contact-form{\r\n padding:2.5rem;\r\n background:#fff;\r\n border-radius:28px;\r\n box-shadow:0 24px 70px rgba(0,0,0,.08);\r\n border:1px solid rgba(0,0,0,.18);\r\n backdrop-filter:blur(22px) saturate(130%);\r\n -webkit-backdrop-filter:blur(22px) saturate(130%);\r\n transform:translateY(0);\r\n}\r\n\r\n.mica-contact-info,\r\n.mica-contact-form{\r\n opacity:0;\r\n animation:micaContactIn .9s cubic-bezier(.22,1,.36,1) forwards;\r\n}\r\n\r\n.mica-contact-form{\r\n animation-delay:.14s;\r\n}\r\n\r\n@keyframes micaContactIn{\r\n from{\r\n opacity:0;\r\n transform:translateY(28px);\r\n }\r\n\r\n to{\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n}\r\n\r\n.mica-contact-form h2{\r\n font-size:clamp(2.7rem,4vw,4rem);\r\n}\r\n\r\n.mica-contact-form p{\r\n color:var(--mica-gray);\r\n font-size:1rem;\r\n line-height:1.7;\r\n margin:0 0 2rem;\r\n text-align:left;\r\n}\r\n\r\n.mica-contact-form .form-group{\r\n text-align:left;\r\n margin-bottom:1.4rem;\r\n}\r\n\r\n.mica-contact-form label{\r\n display:block;\r\n font-weight:500;\r\n color:var(--mica-text);\r\n margin-bottom:.45rem;\r\n font-size:.9rem;\r\n letter-spacing:.5px;\r\n}\r\n\r\n.mica-contact-form input,\r\n.mica-contact-form textarea,\r\n.mica-contact-form select{\r\n width:100%;\r\n padding:.85rem 1rem;\r\n border-radius:14px;\r\n border:1px solid rgba(0,0,0,.28);\r\n background:#fff;\r\n font-family:\"Inter\", \"Nunito\", sans-serif;\r\n font-size:.95rem;\r\n color:var(--mica-text);\r\n transition:all .3s ease;\r\n resize:none;\r\n}\r\n\r\n.mica-contact-form input:focus,\r\n.mica-contact-form textarea:focus,\r\n.mica-contact-form select:focus{\r\n outline:none;\r\n border-color:#000;\r\n box-shadow:0 0 0 3px rgba(0,0,0,.10);\r\n}\r\n\r\n.mica-contact-form ::placeholder{\r\n color:rgba(0,0,0,.48);\r\n}\r\n\r\n.mica-contact-form .btn-hero{\r\n width:100%;\r\n margin-top:.5rem;\r\n padding:.95rem 1.4rem;\r\n border:1px solid #000;\r\n}\r\n\r\n@media(max-width:980px){\r\n .mica-contact-grid{\r\n grid-template-columns:1fr;\r\n min-height:auto;\r\n }\r\n\r\n .mica-contact-form{\r\n padding:2rem;\r\n }\r\n\r\n .mica-contact-info ul{\r\n grid-template-columns:1fr;\r\n }\r\n}\r\n\r\n@media(max-width:768px){\r\n .mica-contact-combined{\r\n min-height:auto;\r\n padding:92px 20px 76px;\r\n }\r\n\r\n .mica-contact-info h3{\r\n font-size:2.8rem;\r\n }\r\n\r\n .mica-contact-info p,\r\n .mica-contact-info li{\r\n font-size:.98rem;\r\n }\r\n\r\n .mica-contact-form h2{\r\n font-size:3rem;\r\n }\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- CONTACTO COMBINADO CSS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- FOOTER ELEGANTE CSS - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n.ethereal-footer *{\r\n box-sizing:border-box;\r\n}\r\n\r\n.ethereal-footer{\r\n --azul-claro:#000;\r\n --gris-claro:#fff;\r\n --beige-dorado:#000;\r\n --hueso:#fff;\r\n --gris-azulado-oscuro:#000;\r\n --text:#000;\r\n --muted:#000;\r\n --line:rgba(0,0,0,.18);\r\n\r\n position:relative;\r\n overflow:hidden;\r\n min-height:30vh;\r\n margin-top:-8vh;\r\n padding:96px 0 42px;\r\n color:var(--text);\r\n font-family:'Nunito',sans-serif;\r\n background:#fff;\r\n background-size:cover, cover, cover, cover, cover;\r\n background-position:center center;\r\n background-repeat:no-repeat;\r\n}\r\n\r\n.ethereal-footer::before{\r\n content:none;\r\n position:absolute;\r\n top:-76px;\r\n left:50%;\r\n width:150vw;\r\n height:210px;\r\n transform:translateX(-50%);\r\n background:\r\n linear-gradient(180deg, rgba(246,240,226,.98), rgba(246,240,226,.52) 56%, rgba(232,236,239,.12) 82%, transparent),\r\n radial-gradient(ellipse at 50% 0%, rgba(204,215,221,.66), transparent 72%);\r\n border-radius:0 0 50% 50% \/ 0 0 100% 100%;\r\n pointer-events:none;\r\n z-index:1;\r\n}\r\n\r\n.ethereal-footer::after{\r\n content:none;\r\n position:absolute;\r\n inset:0;\r\n background:\r\n linear-gradient(rgba(83,96,104,.06) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(83,96,104,.055) 1px, transparent 1px),\r\n linear-gradient(115deg, transparent 0 46%, rgba(219,181,139,.11) 46% 46.4%, transparent 46.4% 100%);\r\n background-size:72px 72px, 72px 72px, 100% 100%;\r\n mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);\r\n -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);\r\n pointer-events:none;\r\n opacity:.72;\r\n z-index:1;\r\n}\r\n\r\n.footer-aura{\r\n position:absolute;\r\n width:520px;\r\n height:520px;\r\n right:-140px;\r\n bottom:-160px;\r\n border-radius:50%;\r\n background:transparent;\r\n filter:blur(70px);\r\n pointer-events:none;\r\n z-index:1;\r\n}\r\n\r\n.footer-cursor-aura{\r\n position:absolute;\r\n left:0;\r\n top:0;\r\n width:420px;\r\n height:420px;\r\n border-radius:50%;\r\n pointer-events:none;\r\n z-index:1;\r\n opacity:0;\r\n transform:translate3d(-50%, -50%, 0);\r\n background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.12), transparent 70%);\r\n filter:blur(10px) saturate(1.25);\r\n mix-blend-mode:multiply;\r\n will-change:transform, opacity;\r\n transition:opacity .45s ease;\r\n}\r\n\r\n.footer-techline{\r\n position:absolute;\r\n top:58px;\r\n left:5vw;\r\n right:5vw;\r\n height:1px;\r\n z-index:2;\r\n background:linear-gradient(90deg, transparent, rgba(0,0,0,.72), transparent);\r\n opacity:.8;\r\n overflow:hidden;\r\n}\r\n\r\n.footer-techline::after{\r\n content:\"\";\r\n position:absolute;\r\n top:0;\r\n left:-20%;\r\n width:18%;\r\n height:100%;\r\n background:linear-gradient(90deg, transparent, #fff, transparent);\r\n animation:footerScan 4.8s ease-in-out infinite;\r\n}\r\n\r\n@keyframes footerScan{\r\n 0%{ transform:translateX(0); opacity:0; }\r\n 18%{ opacity:1; }\r\n 70%{ opacity:1; }\r\n 100%{ transform:translateX(680%); opacity:0; }\r\n}\r\n\r\n.footer-container{\r\n width:min(1420px,90%);\r\n margin:auto;\r\n display:grid;\r\n grid-template-columns:1.08fr .92fr;\r\n gap:64px;\r\n position:relative;\r\n z-index:2;\r\n padding:34px;\r\n border:1px solid rgba(0,0,0,.18);\r\n border-radius:34px;\r\n background:#fff;\r\n box-shadow:0 28px 90px rgba(0,0,0,.08);\r\n backdrop-filter:blur(18px) saturate(120%);\r\n -webkit-backdrop-filter:blur(18px) saturate(120%);\r\n}\r\n\r\n.footer-eyebrow,\r\n.sitemap-label{\r\n display:block;\r\n color:var(--beige-dorado);\r\n font-size:.78rem;\r\n letter-spacing:.24em;\r\n font-weight:700;\r\n text-transform:uppercase;\r\n margin-bottom:20px;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:12px;\r\n}\r\n\r\n.footer-eyebrow::before,\r\n.sitemap-label::before{\r\n content:\"\";\r\n width:34px;\r\n height:1px;\r\n background:linear-gradient(90deg, var(--beige-dorado), transparent);\r\n}\r\n\r\n.footer-title{\r\n margin:0;\r\n max-width:660px;\r\n font-family:'Cormorant Garamond',serif;\r\n font-size:clamp(3rem,3.6vw,5.6rem);\r\n line-height:.92;\r\n font-weight:500;\r\n letter-spacing:-.055em;\r\n color:var(--text);\r\n text-shadow:0 18px 55px rgba(83,96,104,.10);\r\n}\r\n\r\n.footer-text{\r\n margin-top:22px;\r\n max-width:560px;\r\n color:var(--muted);\r\n font-size:1.04rem;\r\n line-height:1.65;\r\n}\r\n\r\n.footer-whatsapp-form{\r\n margin-top:34px;\r\n display:flex;\r\n align-items:center;\r\n gap:18px;\r\n flex-wrap:wrap;\r\n}\r\n\r\n.footer-whatsapp-form input{\r\n width:350px;\r\n background:#fff;\r\n border:1px solid rgba(0,0,0,.28);\r\n border-radius:999px;\r\n padding:14px 20px;\r\n color:var(--text);\r\n font-size:1rem;\r\n outline:none;\r\n backdrop-filter:blur(14px);\r\n -webkit-backdrop-filter:blur(14px);\r\n box-shadow:none;\r\n}\r\n\r\n.footer-whatsapp-form input::placeholder{\r\n color:rgba(0,0,0,.48);\r\n}\r\n\r\n.footer-whatsapp-form button{\r\n border:1px solid #000;\r\n cursor:pointer;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:22px;\r\n background:#fff;\r\n color:#000;\r\n padding:14px 22px;\r\n border-radius:999px;\r\n font-size:.78rem;\r\n font-weight:700;\r\n letter-spacing:.16em;\r\n text-transform:uppercase;\r\n box-shadow:none;\r\n transition:.35s ease;\r\n}\r\n\r\n.footer-whatsapp-form button:hover{\r\n transform:translateY(-4px);\r\n background:#000;\r\n color:#fff;\r\n}\r\n\r\n.footer-whatsapp-form .dot{\r\n width:6px;\r\n height:6px;\r\n border-radius:50%;\r\n background:currentColor;\r\n}\r\n\r\n.footer-brand,\r\n.footer-contact-card,\r\n.privacy-text{\r\n display:none!important;\r\n}\r\n\r\n.footer-right{\r\n display:flex;\r\n flex-direction:column;\r\n align-items:flex-start;\r\n padding-top:16px;\r\n}\r\n\r\n.footer-links{\r\n display:grid;\r\n grid-template-columns:repeat(2,1fr);\r\n gap:44px;\r\n padding:22px;\r\n border-radius:20px;\r\n background:#fff;\r\n border:1px solid rgba(0,0,0,.18);\r\n backdrop-filter:blur(12px);\r\n -webkit-backdrop-filter:blur(12px);\r\n}\r\n\r\n.footer-col{\r\n display:flex;\r\n flex-direction:column;\r\n gap:18px;\r\n}\r\n\r\n.footer-col a{\r\n position:relative;\r\n color:var(--text);\r\n text-decoration:none;\r\n font-size:.98rem;\r\n font-weight:600;\r\n transition:.3s ease;\r\n}\r\n\r\n.footer-col a::before{\r\n content:\"\";\r\n position:absolute;\r\n left:-18px;\r\n top:50%;\r\n width:6px;\r\n height:6px;\r\n border-radius:50%;\r\n background:#000;\r\n opacity:0;\r\n transform:translateY(-50%) scale(.5);\r\n transition:.3s ease;\r\n}\r\n\r\n.footer-col a:hover{\r\n color:#000;\r\n transform:translateX(5px);\r\n}\r\n\r\n.footer-col a:hover::before{\r\n opacity:1;\r\n transform:translateY(-50%) scale(1);\r\n}\r\n\r\n.copyright{\r\n margin-top:28px;\r\n color:#000;\r\n font-size:.94rem;\r\n}\r\n\r\n@media(max-width:1100px){\r\n .footer-container{\r\n grid-template-columns:1fr;\r\n gap:42px;\r\n padding:30px;\r\n }\r\n}\r\n\r\n@media(max-width:768px){\r\n .ethereal-footer{\r\n margin-top:-5vh;\r\n padding:70px 0 34px;\r\n }\r\n\r\n .footer-container{\r\n width:min(90%,560px);\r\n padding:26px;\r\n border-radius:26px;\r\n }\r\n\r\n .footer-title{\r\n font-size:clamp(2.8rem,14vw,4rem);\r\n }\r\n\r\n .footer-text{\r\n font-size:.98rem;\r\n }\r\n\r\n .footer-whatsapp-form{\r\n flex-direction:column;\r\n align-items:stretch;\r\n }\r\n\r\n .footer-whatsapp-form input,\r\n .footer-whatsapp-form button{\r\n width:100%;\r\n justify-content:center;\r\n }\r\n\r\n .footer-links{\r\n grid-template-columns:1fr;\r\n gap:28px;\r\n }\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- FOOTER ELEGANTE CSS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- CREDIT BAR CSS - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n.credit-bar{\r\n width:100%;\r\n padding:12px 18px;\r\n background:#fff;\r\n color:#000;\r\n text-align:center;\r\n font-family:'Nunito', sans-serif;\r\n font-size:.72rem;\r\n font-weight:700;\r\n letter-spacing:.16em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.credit-bar a{\r\n color:#000;\r\n text-decoration:underline;\r\n text-underline-offset:3px;\r\n transition:color .25s ease, background .25s ease;\r\n}\r\n\r\n.credit-bar a:hover{\r\n background:#000;\r\n color:#fff;\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- CREDIT BAR CSS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- FLOATING WHATSAPP CSS - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n.floating-whatsapp{\r\n position:fixed;\r\n right:clamp(18px,3vw,42px);\r\n bottom:clamp(18px,3vw,38px);\r\n z-index:999999999;\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:12px;\r\n min-height:54px;\r\n padding:14px 20px;\r\n border-radius:999px;\r\n color:#000;\r\n background:#fff;\r\n border:1px solid #000;\r\n box-shadow:0 18px 42px rgba(0,0,0,.12);\r\n backdrop-filter:blur(14px) saturate(120%);\r\n -webkit-backdrop-filter:blur(14px) saturate(120%);\r\n font-family:'Nunito', sans-serif;\r\n font-size:.78rem;\r\n font-weight:700;\r\n letter-spacing:.14em;\r\n text-transform:uppercase;\r\n text-decoration:none;\r\n opacity:0;\r\n visibility:hidden;\r\n pointer-events:none;\r\n transform:translate3d(0, 120%, 0);\r\n transition:\r\n opacity .35s ease,\r\n visibility .35s ease,\r\n transform .45s cubic-bezier(.22,1,.36,1),\r\n background .35s ease,\r\n color .35s ease;\r\n}\r\n\r\n.floating-whatsapp.is-visible{\r\n opacity:1;\r\n visibility:visible;\r\n pointer-events:auto;\r\n transform:translate3d(0, 0, 0);\r\n}\r\n\r\n.floating-whatsapp:hover{\r\n color:#fff;\r\n background:#000;\r\n transform:translate3d(0, -4px, 0);\r\n}\r\n\r\n.floating-whatsapp i{\r\n font-size:1.22rem;\r\n line-height:1;\r\n}\r\n\r\n.floating-whatsapp__dot{\r\n width:6px;\r\n height:6px;\r\n border-radius:50%;\r\n background:currentColor;\r\n}\r\n\r\n@media(max-width:640px){\r\n .floating-whatsapp{\r\n right:16px;\r\n bottom:16px;\r\n min-width:54px;\r\n width:54px;\r\n height:54px;\r\n padding:0;\r\n gap:0;\r\n }\r\n\r\n .floating-whatsapp__label,\r\n .floating-whatsapp__dot{\r\n display:none;\r\n }\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- FLOATING WHATSAPP CSS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- MOBILE VISUAL OVERRIDES - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n@media(max-width:768px){\r\n html,\r\n body{\r\n max-width:100%;\r\n overflow-x:hidden;\r\n }\r\n\r\n #mainNav{\r\n width:100%!important;\r\n }\r\n\r\n #mainNav .container-fluid{\r\n min-height:68px;\r\n }\r\n\r\n .logo{\r\n width:138px;\r\n }\r\n\r\n #mainNav .nav-link{\r\n font-size:1.05rem;\r\n padding:10px 12px;\r\n }\r\n\r\n .camila-scroll-space{\r\n height:330vh;\r\n }\r\n\r\n .camila-hero-content{\r\n padding:24px;\r\n align-items:flex-end;\r\n }\r\n\r\n .camila-text-wrapper{\r\n max-width:100%;\r\n }\r\n\r\n #heroTitle{\r\n margin-top:-10vh;\r\n }\r\n\r\n .offset{\r\n transform:translateY(-18vh);\r\n }\r\n\r\n .camila-mini-title{\r\n font-size:.95rem;\r\n line-height:1.45;\r\n letter-spacing:.18em;\r\n margin-bottom:.75rem;\r\n }\r\n\r\n .camila-reading-text{\r\n gap:.46rem;\r\n font-size:2.12rem;\r\n line-height:.98;\r\n letter-spacing:0;\r\n }\r\n\r\n .camila-line{\r\n font-size:2.12rem;\r\n }\r\n\r\n .pillBlur{\r\n width:100%;\r\n padding:1.25rem;\r\n border-radius:14px;\r\n backdrop-filter:blur(6px);\r\n -webkit-backdrop-filter:blur(6px);\r\n box-shadow:\r\n 0 10px 24px rgba(83,96,104,.10),\r\n inset 0 1px 1px rgba(255,255,255,.14);\r\n }\r\n\r\n .hero-title-card{\r\n margin-left:0;\r\n max-width:100%;\r\n }\r\n\r\n .hero-title-card{\r\n margin-top:0;\r\n }\r\n\r\n .camila-flow-svg{\r\n margin-left:14vw;\r\n transform:scale(1.04);\r\n opacity:.62;\r\n }\r\n\r\n .mica-magnetic-section{\r\n padding:58px 18px 40px;\r\n }\r\n\r\n .mica-section-head{\r\n margin-bottom:30px;\r\n }\r\n\r\n .mica-section-head h2{\r\n font-size:clamp(2.55rem,12vw,3.8rem);\r\n line-height:.96;\r\n }\r\n\r\n .mica-section-head p{\r\n font-size:.98rem;\r\n line-height:1.65;\r\n margin-top:18px;\r\n }\r\n\r\n .mica-magnetic-grid{\r\n gap:16px;\r\n padding:0;\r\n }\r\n\r\n .mica-card{\r\n min-height:0;\r\n aspect-ratio:1 \/ .82;\r\n border-radius:8px;\r\n }\r\n\r\n .mica-card-content{\r\n padding:24px;\r\n }\r\n\r\n .mica-card-content h3{\r\n font-size:clamp(2.2rem,12vw,3.15rem);\r\n line-height:.92;\r\n }\r\n\r\n .mica-card-content p{\r\n font-size:1rem;\r\n line-height:1.55;\r\n }\r\n\r\n .philosophy-section{\r\n height:250vh;\r\n }\r\n\r\n .philosophy-section__inner{\r\n min-height:100svh;\r\n height:100svh;\r\n padding:82px 20px 36px;\r\n }\r\n\r\n .philosophy-section__mini-top{\r\n margin-top:-25px;\r\n margin-bottom:28px;\r\n gap:10px;\r\n }\r\n\r\n .philosophy-section__icon-wrap svg{\r\n width:42px;\r\n height:42px;\r\n }\r\n\r\n .philosophy-section__mini-top span{\r\n font-size:11px;\r\n letter-spacing:2px;\r\n }\r\n\r\n .philosophy-section__reading-text{\r\n font-size:clamp(1.82rem,7.4vw,2.65rem);\r\n line-height:1.12;\r\n letter-spacing:-.02em;\r\n }\r\n\r\n .philosophy-section__button{\r\n margin-top:34px;\r\n padding:13px 17px;\r\n gap:16px;\r\n font-size:11px;\r\n letter-spacing:1.1px;\r\n }\r\n\r\n .editorial-story{\r\n padding:64px 20px 82px;\r\n }\r\n\r\n .story-grid{\r\n width:100%;\r\n gap:42px;\r\n min-height:auto;\r\n }\r\n\r\n .eyebrow{\r\n margin-bottom:22px;\r\n font-size:11px;\r\n letter-spacing:.2em;\r\n }\r\n\r\n .story-title{\r\n font-size:clamp(1.88rem,8.4vw,2.68rem);\r\n line-height:1;\r\n letter-spacing:-.015em;\r\n }\r\n\r\n .story-text{\r\n margin-top:24px;\r\n font-size:.98rem;\r\n line-height:1.7;\r\n }\r\n\r\n .story-btn{\r\n margin-top:30px;\r\n padding:14px 18px;\r\n gap:16px;\r\n font-size:11px;\r\n }\r\n\r\n .story-images{\r\n height:430px;\r\n }\r\n\r\n .img-wrap,\r\n .img-wrap::before{\r\n border-radius:16px;\r\n }\r\n\r\n .floating-process{\r\n padding:18px 0;\r\n }\r\n\r\n .fixed-bg{\r\n display:none;\r\n }\r\n\r\n .process-card{\r\n width:min(100% - 36px,560px);\r\n padding:26px 0 21px;\r\n gap:20px;\r\n }\r\n\r\n .process-card .eyebrow{\r\n margin-bottom:14px;\r\n font-size:10px;\r\n letter-spacing:2px;\r\n }\r\n\r\n .process-card .content h2{\r\n font-size:clamp(2.65rem,12vw,3.35rem);\r\n line-height:1;\r\n }\r\n\r\n .process-card .content p{\r\n margin-top:14px;\r\n font-size:.96rem;\r\n line-height:1.6;\r\n }\r\n\r\n .process-card .number{\r\n font-size:4rem;\r\n letter-spacing:-.02em;\r\n margin-top:8px;\r\n --process-number-offset-y:18px;\r\n }\r\n\r\n .curve-section{\r\n height:245vh;\r\n }\r\n\r\n .curve-sticky{\r\n top:0;\r\n height:100svh;\r\n }\r\n\r\n .curve-content{\r\n padding:72px 20px 28px;\r\n gap:22px;\r\n }\r\n\r\n .curve-title{\r\n font-size:clamp(2.35rem,10vw,3rem);\r\n line-height:1.08;\r\n letter-spacing:-.02em;\r\n }\r\n\r\n .right-side p{\r\n font-size:.94rem;\r\n line-height:1.62;\r\n }\r\n\r\n .image-mask{\r\n width:155vw;\r\n height:44vh;\r\n }\r\n\r\n .organic-editorial{\r\n padding:62px 20px 76px;\r\n }\r\n\r\n .organic-grid{\r\n width:min(100%,560px);\r\n gap:72px;\r\n }\r\n\r\n .blob-wrap{\r\n max-width:360px;\r\n }\r\n\r\n .organic-title{\r\n margin-top:28px;\r\n font-size:clamp(2.35rem,11vw,3rem);\r\n line-height:1;\r\n }\r\n\r\n .organic-text{\r\n margin-top:18px;\r\n font-size:.96rem;\r\n line-height:1.65;\r\n }\r\n\r\n .organic-btn{\r\n margin-top:24px;\r\n padding:13px 18px;\r\n gap:16px;\r\n font-size:11px;\r\n }\r\n\r\n .mica-contact-combined{\r\n padding:70px 18px 58px;\r\n }\r\n\r\n .mica-contact-grid{\r\n gap:30px;\r\n }\r\n\r\n .mica-contact-info h3{\r\n font-size:clamp(2.55rem,11.5vw,3.35rem);\r\n line-height:1;\r\n }\r\n\r\n .mica-contact-info p{\r\n font-size:.97rem;\r\n line-height:1.66;\r\n margin-bottom:1rem;\r\n }\r\n\r\n .mica-contact-info ul{\r\n gap:10px;\r\n margin:0 0 1.35rem;\r\n }\r\n\r\n .mica-contact-info li{\r\n min-height:auto;\r\n padding:11px 12px;\r\n border-radius:12px;\r\n font-size:.92rem;\r\n }\r\n\r\n .mica-contact-form{\r\n padding:1.45rem;\r\n border-radius:20px;\r\n }\r\n\r\n .mica-contact-form p{\r\n margin-bottom:1.35rem;\r\n font-size:.96rem;\r\n }\r\n\r\n .mica-contact-form .form-group{\r\n margin-bottom:1rem;\r\n }\r\n\r\n .mica-contact-form input,\r\n .mica-contact-form textarea,\r\n .mica-contact-form select{\r\n border-radius:12px;\r\n font-size:.92rem;\r\n }\r\n\r\n .ethereal-footer{\r\n margin-top:-5vh;\r\n padding:58px 16px 28px;\r\n }\r\n\r\n .footer-techline,\r\n .footer-cursor-aura{\r\n display:none;\r\n }\r\n\r\n .footer-container{\r\n width:100%;\r\n padding:22px;\r\n border-radius:20px;\r\n gap:28px;\r\n }\r\n\r\n .footer-eyebrow,\r\n .sitemap-label{\r\n margin-bottom:14px;\r\n font-size:.68rem;\r\n letter-spacing:.18em;\r\n }\r\n\r\n .footer-title{\r\n font-size:clamp(2.4rem,11vw,3.35rem);\r\n line-height:1;\r\n letter-spacing:-.025em;\r\n }\r\n\r\n .footer-text{\r\n margin-top:16px;\r\n font-size:.94rem;\r\n line-height:1.55;\r\n }\r\n\r\n .footer-whatsapp-form{\r\n margin-top:22px;\r\n gap:10px;\r\n }\r\n\r\n .footer-whatsapp-form input,\r\n .footer-whatsapp-form button{\r\n min-height:44px;\r\n padding:12px 16px;\r\n }\r\n\r\n .footer-right{\r\n padding-top:0;\r\n }\r\n\r\n .footer-links{\r\n width:100%;\r\n gap:14px;\r\n padding:16px;\r\n border-radius:16px;\r\n }\r\n\r\n .footer-col{\r\n gap:12px;\r\n }\r\n\r\n .footer-col a{\r\n font-size:.94rem;\r\n }\r\n\r\n .copyright{\r\n margin-top:18px;\r\n font-size:.78rem;\r\n line-height:1.45;\r\n }\r\n}\r\n\r\n@media(max-width:420px){\r\n .camila-hero-content,\r\n .curve-content{\r\n padding-left:18px;\r\n padding-right:18px;\r\n }\r\n\r\n .camila-reading-text{\r\n font-size:2.12rem;\r\n line-height:1;\r\n gap:.42rem;\r\n }\r\n\r\n .camila-line{\r\n font-size:2.12rem;\r\n }\r\n\r\n .camila-mini-title{\r\n font-size:1.2rem;\r\n letter-spacing:.12em;\r\n }\r\n\r\n .mica-card{\r\n aspect-ratio:1 \/ .9;\r\n }\r\n\r\n .story-images{\r\n height:380px;\r\n }\r\n\r\n .footer-title br:nth-of-type(2){\r\n display:none;\r\n }\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- MOBILE VISUAL OVERRIDES - FIN -->\r\n<!-- ========================= -->\r\n<!-- ========================= -->\r\n<!-- SITE LOADER CSS - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n.site-loader{\r\n position:fixed;\r\n inset:0;\r\n width:100vw;\r\n height:100vh;\r\n min-height:100svh;\r\n z-index:2147483647!important;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n background:#000;\r\n opacity:1;\r\n visibility:visible;\r\n pointer-events:auto;\r\n transition:\r\n opacity .65s ease,\r\n visibility .65s ease;\r\n}\r\n\r\nbody.is-loading #mainNav{\r\n z-index:2147483646!important;\r\n}\r\n\r\n.site-loader.is-hidden{\r\n opacity:0;\r\n visibility:hidden;\r\n pointer-events:none;\r\n}\r\n\r\n.site-loader__inner{\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n justify-content:center;\r\n}\r\n\r\n.circle-wrapper2{\r\n position:relative;\r\n width:220px;\r\n height:220px;\r\n margin:auto;\r\n border-radius:50%;\r\n background:#fff;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n overflow:hidden;\r\n border:1px solid rgba(255,255,255,.32);\r\n backdrop-filter:blur(4px);\r\n -webkit-backdrop-filter:blur(4px);\r\n box-shadow:0 24px 70px rgba(255,255,255,.12);\r\n}\r\n\r\n.circle-wrapper2::after{\r\n content:\"\";\r\n position:absolute;\r\n inset:-45%;\r\n background:\r\n linear-gradient(\r\n 120deg,\r\n transparent 40%,\r\n rgba(0,0,0,.08) 50%,\r\n transparent 60%\r\n );\r\n animation:shineMove 7s linear infinite;\r\n pointer-events:none;\r\n}\r\n\r\n.circle-image2{\r\n position:absolute;\r\n width:72px;\r\n height:72px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n z-index:2;\r\n}\r\n\r\n.circle-image2 img{\r\n width:128px;\r\n max-width:none;\r\n height:auto;\r\n filter:grayscale(1) contrast(1.25) drop-shadow(0 10px 24px rgba(0,0,0,.18));\r\n}\r\n\r\n.circle-text-svg2{\r\n position:absolute;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n animation:rotateText 30s linear infinite;\r\n transform-origin:center;\r\n}\r\n\r\n.circle-text2{\r\n font-family:\"georgia-pro\", \"Georgia Pro\", Georgia, serif;\r\n font-size:12px;\r\n letter-spacing:5px;\r\n fill:#000;\r\n font-weight:300;\r\n text-transform:uppercase;\r\n}\r\n\r\n.site-loader__text{\r\n margin:25px 0 0;\r\n text-align:center;\r\n color:#fff;\r\n font-family:\"georgia-pro\", \"Georgia Pro\", Georgia, serif;\r\n font-size:.9rem;\r\n line-height:1.55;\r\n letter-spacing:.12em;\r\n text-transform:uppercase;\r\n}\r\n\r\n@keyframes rotateText{\r\n from{ transform:rotate(0deg); }\r\n to{ transform:rotate(360deg); }\r\n}\r\n\r\n@keyframes shineMove{\r\n 0%{\r\n transform:translateX(-100%) rotate(25deg);\r\n opacity:0;\r\n }\r\n\r\n 20%{ opacity:1; }\r\n\r\n 50%{\r\n transform:translateX(100%) rotate(25deg);\r\n opacity:.35;\r\n }\r\n\r\n 100%{\r\n transform:translateX(100%) rotate(25deg);\r\n opacity:0;\r\n }\r\n}\r\n\r\n@media(max-width:768px){\r\n .circle-wrapper2{\r\n width:180px;\r\n height:180px;\r\n }\r\n\r\n .circle-text2{\r\n font-size:13.5px;\r\n letter-spacing:4px;\r\n }\r\n\r\n .circle-image2{\r\n width:58px;\r\n height:58px;\r\n }\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- SITE LOADER CSS - FIN -->\r\n<!-- ========================= -->\r\n<!-- ========================= -->\r\n<!-- TYPOGRAPHY SYSTEM - INICIO -->\r\n<!-- ========================= -->\r\n<style>\r\n:root{\r\n --font-primary:\"georgia-pro\", \"Georgia Pro\", Georgia, serif;\r\n --font-secondary:\"georgia-pro\", \"Georgia Pro\", Georgia, serif;\r\n --font-feature:\"georgia-pro\", \"Georgia Pro\", Georgia, serif;\r\n --font-content:\"georgia-pro\", \"Georgia Pro\", Georgia, serif;\r\n}\r\n\r\nbody{\r\n font-family:var(--font-content);\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\n.camila-reading-text,\r\n.mica-section-head h2,\r\n.philosophy-section__reading-text,\r\n.story-title,\r\n.process-card .content h2,\r\n.process-card .number,\r\n.curve-title,\r\n.organic-title,\r\n.mica-contact-info h3,\r\n.mica-contact-form h2,\r\n.footer-title{\r\n font-family:var(--font-primary)!important;\r\n}\r\n\r\n#mainNav,\r\n#mainNav .nav-link,\r\n#mainNav .navbar-brand,\r\n.camila-mini-title,\r\n.mica-section-head span,\r\n.eyebrow,\r\n.process-card .eyebrow,\r\n.footer-eyebrow,\r\n.sitemap-label,\r\n.organic-btn,\r\n.mica-whatsapp-btn,\r\n.mica-contact-form .btn-hero,\r\n.floating-whatsapp,\r\n.philosophy-section__button,\r\n.story-btn,\r\n.footer-whatsapp-form button{\r\n font-family:var(--font-feature)!important;\r\n font-variation-settings:\"wdth\" 70, \"wght\" 300;\r\n}\r\n\r\np,\r\nli,\r\nlabel,\r\ninput,\r\ntextarea,\r\nselect,\r\nbutton,\r\n.organic-text,\r\n.organic-place-list,\r\n.story-text,\r\n.right-side p,\r\n.mica-section-head p,\r\n.mica-card-content p,\r\n.process-card .content p,\r\n.footer-text,\r\n.copyright{\r\n font-family:var(--font-content)!important;\r\n}\r\n\r\n.camila-mini-title,\r\n.mica-section-head span,\r\n.eyebrow,\r\n.process-card .eyebrow,\r\n.footer-eyebrow,\r\n.sitemap-label,\r\n.copyright{\r\n font-weight:300;\r\n}\r\n<\/style>\r\n<!-- ========================= -->\r\n<!-- TYPOGRAPHY SYSTEM - FIN -->\r\n<!-- ========================= -->\r\n<style>\r\n\/* ========================= *\/\r\n\/* GEORGIA PRO MOCK OVERRIDES *\/\r\n\/* ========================= *\/\r\nhtml,\r\nbody{\r\n background:#fff!important;\r\n font-family:\"georgia-pro\", \"Georgia Pro\", Georgia, serif!important;\r\n}\r\n\r\nbody,\r\na,\r\np,\r\nli,\r\nlabel,\r\ninput,\r\ntextarea,\r\nselect,\r\nbutton,\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\nspan{\r\n font-family:\"georgia-pro\", \"Georgia Pro\", Georgia, serif!important;\r\n letter-spacing:0;\r\n}\r\n\r\n#heroTitle,\r\n#heroTitle2,\r\n#heroTitle3{\r\n background:rgba(255,255,255,.92)!important;\r\n border:1px solid rgba(0,0,0,.16)!important;\r\n box-shadow:0 18px 44px rgba(0,0,0,.10)!important;\r\n}\r\n\r\n#heroTitle .camila-mini-title,\r\n#heroTitle2 .camila-mini-title,\r\n#heroTitle3 .camila-mini-title{\r\n color:#000!important;\r\n text-shadow:none!important;\r\n}\r\n\r\n#heroTitle .camila-reading-text,\r\n#heroTitle2 .camila-reading-text,\r\n#heroTitle3 .camila-reading-text,\r\n#heroTitle .camila-line,\r\n#heroTitle2 .camila-line,\r\n#heroTitle3 .camila-line{\r\n color:#000!important;\r\n text-shadow:none!important;\r\n}\r\n\r\n#mainNav{\r\n background:transparent!important;\r\n border:0!important;\r\n box-shadow:none!important;\r\n backdrop-filter:none!important;\r\n -webkit-backdrop-filter:none!important;\r\n transition:\r\n background-color .35s ease,\r\n backdrop-filter .35s ease,\r\n -webkit-backdrop-filter .35s ease,\r\n border-color .35s ease,\r\n box-shadow .35s ease;\r\n}\r\n\r\n#mainNav.scrolled{\r\n background:rgba(255,255,255,.72)!important;\r\n border-bottom:1px solid rgba(0,0,0,.08)!important;\r\n box-shadow:0 12px 34px rgba(0,0,0,.06)!important;\r\n backdrop-filter:blur(18px) saturate(145%)!important;\r\n -webkit-backdrop-filter:blur(18px) saturate(145%)!important;\r\n}\r\n\r\n#mainNav::before{ display:none; }\r\n\r\n#mainNav .container-fluid{\r\n min-height:172px;\r\n padding:27px 24px 0;\r\n display:flex;\r\n flex-direction:column;\r\n justify-content:flex-start;\r\n align-items:center;\r\n transition:\r\n min-height .9s cubic-bezier(.22,1,.36,1),\r\n padding .9s cubic-bezier(.22,1,.36,1),\r\n justify-content .9s cubic-bezier(.22,1,.36,1);\r\n}\r\n\r\n#mainNav.hero-ended .container-fluid{\r\n min-height:72px;\r\n padding:.85rem clamp(28px,5vw,82px)!important;\r\n flex-direction:row;\r\n justify-content:space-between;\r\n align-items:center;\r\n}\r\n\r\n#mainNav .navbar-brand{\r\n margin:0 0 19px!important;\r\n padding:0;\r\n color:#000!important;\r\n font-size:54px;\r\n font-weight:700;\r\n line-height:1;\r\n text-transform:none;\r\n text-decoration:none;\r\n letter-spacing:0;\r\n text-shadow:none;\r\n}\r\n\r\n#mainNav.hero-ended .navbar-brand{\r\n margin:0!important;\r\n font-size:clamp(36px,3.2vw,46px);\r\n line-height:.92;\r\n}\r\n\r\n#mainNav .navbar-collapse{\r\n width:auto;\r\n flex-basis:auto;\r\n flex-grow:0;\r\n}\r\n\r\n#mainNav.hero-ended .navbar-collapse{\r\n margin-left:auto;\r\n display:flex!important;\r\n justify-content:flex-end;\r\n align-items:center;\r\n}\r\n\r\n#mainNav .navbar-nav{\r\n gap:107px;\r\n align-items:center;\r\n}\r\n\r\n#mainNav.hero-ended .navbar-nav{\r\n gap:clamp(42px,6vw,96px);\r\n}\r\n\r\n#mainNav.hero-ended .nav-link{\r\n font-size:19px;\r\n line-height:1.1;\r\n}\r\n\r\n#mainNav .navbar-nav .nav-item{ margin:0; }\r\n\r\n#mainNav .nav-link,\r\n#mainNav.scrolled .nav-link{\r\n padding:0!important;\r\n color:#000!important;\r\n font-size:20px;\r\n font-weight:400!important;\r\n line-height:1;\r\n white-space:nowrap;\r\n text-transform:none;\r\n letter-spacing:0;\r\n text-shadow:none!important;\r\n}\r\n\r\n#mainNav .nav-link::after{ display:none; }\r\n\r\n.logo,\r\n.logo-light,\r\n.logo-dark{ display:none!important; }\r\n\r\n.mica-magnetic-section{\r\n width:100%;\r\n padding:106px 74px 0!important;\r\n background:#fff!important;\r\n overflow:visible;\r\n}\r\n\r\n.mica-section-head{\r\n max-width:none;\r\n margin:0 auto 106px!important;\r\n text-align:center;\r\n}\r\n\r\n.mica-section-head span,\r\n.mica-section-head p{ display:none!important; }\r\n\r\n.mica-section-head h2{\r\n margin:0;\r\n color:#000!important;\r\n font-family:\"georgia-pro\", \"Georgia Pro\", Georgia, serif!important;\r\n font-size:110px!important;\r\n font-weight:400!important;\r\n line-height:106px;\r\n letter-spacing:0!important;\r\n}\r\n\r\n.mica-magnetic-grid{\r\n width:100%;\r\n height:auto!important;\r\n min-height:0!important;\r\n padding:0!important;\r\n display:grid!important;\r\n grid-template-columns:repeat(3, minmax(0, 1fr));\r\n gap:32px 34px;\r\n align-items:start;\r\n}\r\n\r\n.mica-card{\r\n position:relative;\r\n width:100%!important;\r\n height:auto!important;\r\n min-height:0!important;\r\n aspect-ratio:535 \/ 350;\r\n border-radius:0!important;\r\n box-shadow:none!important;\r\n cursor:pointer;\r\n overflow:hidden;\r\n background:#eee;\r\n will-change:transform, filter;\r\n}\r\n\r\n.mica-card img{\r\n display:block;\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n transform:scale(1.02);\r\n will-change:transform, filter;\r\n}\r\n\r\n.mica-card::after{\r\n content:\"\";\r\n position:absolute;\r\n inset:0;\r\n border:1px solid rgba(0,0,0,0);\r\n pointer-events:none;\r\n transition:border-color .35s ease;\r\n}\r\n\r\n.mica-card:hover::after{\r\n border-color:rgba(0,0,0,.18);\r\n}\r\n\r\n.mica-card-bg,\r\n.mica-card-overlay,\r\n.mica-card-content{ display:none!important; }\r\n\r\n.mica-project-modal{\r\n --project-black:#000;\r\n --project-white:#fff;\r\n display:none;\r\n opacity:0;\r\n background:#fff;\r\n overflow:hidden;\r\n}\r\n\r\n.mica-project-modal.is-open{\r\n display:block;\r\n opacity:1;\r\n}\r\n\r\nbody.mica-project-modal-open{\r\n overflow:hidden;\r\n}\r\n\r\n.mica-project-modal .modal-dialog{\r\n margin:0;\r\n}\r\n\r\n.mica-project-modal .modal-content{\r\n min-height:100svh;\r\n max-height:100svh;\r\n border:0;\r\n border-radius:0;\r\n background:#fff;\r\n color:#000;\r\n overflow-y:auto;\r\n}\r\n\r\n.mica-project-modal__close{\r\n position:fixed;\r\n top:clamp(34px,4.5vw,58px);\r\n right:clamp(18px,3vw,34px);\r\n z-index:10;\r\n width:46px;\r\n height:46px;\r\n display:grid;\r\n place-items:center;\r\n border:1px solid #000;\r\n border-radius:50%;\r\n background:#fff;\r\n color:#000;\r\n font-size:1.2rem;\r\n transition:background .35s ease, color .35s ease, transform .35s ease;\r\n}\r\n\r\n.mica-project-modal__close:hover{\r\n background:#000!important;\r\n color:#fff;\r\n transform:translateY(-2px);\r\n}\r\n\r\n.mica-project-modal__grid{\r\n min-height:100svh;\r\n display:grid;\r\n grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);\r\n gap:clamp(28px,5vw,78px);\r\n padding:clamp(78px,8vw,122px) clamp(24px,6vw,92px);\r\n}\r\n\r\n.mica-project-modal__copy{\r\n align-self:center;\r\n max-width:620px;\r\n}\r\n\r\n.mica-project-modal__eyebrow{\r\n display:block;\r\n margin-bottom:24px;\r\n color:#000;\r\n font-size:.78rem;\r\n font-weight:700;\r\n letter-spacing:.22em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.mica-project-modal h2{\r\n margin:0;\r\n color:#000;\r\n font-family:\"Cormorant Garamond\", serif;\r\n font-size:clamp(3.8rem,8vw,8.5rem);\r\n font-weight:400;\r\n line-height:.86;\r\n letter-spacing:-.045em;\r\n}\r\n\r\n.mica-project-modal p{\r\n margin:clamp(24px,4vw,42px) 0 0;\r\n color:#000;\r\n font-size:clamp(1.02rem,1.25vw,1.24rem);\r\n font-weight:300;\r\n line-height:1.72;\r\n}\r\n\r\n.mica-project-modal__meta{\r\n display:grid;\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n gap:14px;\r\n margin:clamp(26px,4vw,44px) 0 0;\r\n}\r\n\r\n.mica-project-modal__meta div{\r\n border:1px solid rgba(0,0,0,.16);\r\n padding:14px 16px;\r\n}\r\n\r\n.mica-project-modal__meta dt{\r\n margin:0 0 6px;\r\n color:#000;\r\n font-size:.72rem;\r\n font-weight:700;\r\n letter-spacing:.16em;\r\n text-transform:uppercase;\r\n}\r\n\r\n.mica-project-modal__meta dd{\r\n margin:0;\r\n color:#000;\r\n font-size:.98rem;\r\n line-height:1.35;\r\n}\r\n\r\n.mica-project-modal__gallery{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:18px;\r\n align-content:center;\r\n}\r\n\r\n.mica-project-modal__gallery img{\r\n width:100%;\r\n height:100%;\r\n min-height:clamp(220px,28vw,420px);\r\n object-fit:cover;\r\n filter:grayscale(1) contrast(1.04);\r\n}\r\n\r\n.mica-project-modal__gallery img:first-child{\r\n grid-column:1 \/ -1;\r\n min-height:clamp(320px,42vw,560px);\r\n}\r\n\r\n@media(max-width:991px){\r\n .mica-project-modal__grid{\r\n grid-template-columns:1fr;\r\n padding:86px 22px 34px;\r\n }\r\n\r\n .mica-project-modal__copy{\r\n max-width:none;\r\n }\r\n\r\n .mica-project-modal__gallery{\r\n grid-template-columns:1fr;\r\n }\r\n\r\n .mica-project-modal__meta{\r\n grid-template-columns:1fr;\r\n }\r\n}\r\n\r\n.philosophy-section{\r\n height:240vh!important;\r\n margin-top:106px;\r\n background:#fff!important;\r\n}\r\n\r\n.philosophy-section__inner{\r\n height:100vh!important;\r\n min-height:100vh!important;\r\n padding:0 24px!important;\r\n justify-content:center!important;\r\n overflow:visible!important;\r\n}\r\n\r\n.philosophy-section__mini-top,\r\n.philosophy-section__button{\r\n display:none!important;\r\n}\r\n\r\n.philosophy-section__mock-title{\r\n margin:0;\r\n color:#000;\r\n font-size:110px!important;\r\n font-weight:400!important;\r\n line-height:106px;\r\n text-align:center;\r\n}\r\n\r\n.philosophy-section__reading-text{\r\n display:block;\r\n width:min(690px, 100%)!important;\r\n margin:58px auto 0!important;\r\n color:#000!important;\r\n font-size:24pt!important;\r\n font-weight:300!important;\r\n line-height:1.18!important;\r\n letter-spacing:0!important;\r\n text-align:left!important;\r\n}\r\n\r\n.philosophy-section__reading-text > span{\r\n display:inline!important;\r\n color:#000!important;\r\n}\r\n\r\n.philosophy-section__reading-word{\r\n display:inline-block!important;\r\n color:rgba(0,0,0,.22);\r\n opacity:.32;\r\n filter:blur(5px);\r\n transform:translateY(.35em);\r\n will-change:color, opacity, filter, transform;\r\n}\r\n\r\n.philosophy-section[data-mi-historia-ready=\"true\"] .philosophy-section__reading-word{\r\n color:rgba(0,0,0,.22);\r\n opacity:.32;\r\n filter:blur(5px);\r\n transform:translateY(.35em);\r\n}\r\n\r\n.philosophy-section[data-mi-historia-ready=\"true\"] .philosophy-section__reading-text > span{\r\n opacity:1!important;\r\n}\r\n\r\n.editorial-story .story-title,\r\n.philosophy-section__reading-text,\r\n.process-card .content h2,\r\n.organic-title,\r\n.mica-contact-info h3,\r\n.mica-contact-form h2,\r\n.footer-title{\r\n font-weight:400!important;\r\n}\r\n\r\n.story-text,\r\n.organic-text,\r\n.mica-contact-info p,\r\n.mica-contact-form p,\r\n.footer-text{\r\n font-weight:300!important;\r\n}\r\n\r\n.editorial-story{\r\n background:#fff!important;\r\n}\r\n\r\n.editorial-story .eyebrow,\r\n.editorial-story .story-title,\r\n.editorial-story .story-text{\r\n color:#000!important;\r\n}\r\n\r\n.editorial-story .story-btn{\r\n color:#fff!important;\r\n background:#000!important;\r\n border:1px solid #000!important;\r\n box-shadow:none!important;\r\n}\r\n\r\n.editorial-story .story-btn:hover{\r\n color:#000!important;\r\n background:#fff!important;\r\n}\r\n\r\n.floating-process{\r\n background:#fff!important;\r\n}\r\n\r\n.floating-process .process-card .eyebrow,\r\n.floating-process .process-card .content h2,\r\n.floating-process .process-card .content p,\r\n.floating-process .process-card .number{\r\n color:#000!important;\r\n}\r\n\r\n.floating-process a,\r\n.floating-process button{\r\n border:1px solid #000!important;\r\n color:#000!important;\r\n background:transparent!important;\r\n}\r\n\r\n.organic-editorial{\r\n background:#fff!important;\r\n}\r\n\r\n.organic-editorial .organic-section-title,\r\n.organic-editorial .organic-title,\r\n.organic-editorial .organic-text,\r\n.organic-editorial .organic-place-list{\r\n color:#000!important;\r\n}\r\n\r\n.organic-editorial .organic-btn{\r\n border:1px solid #000!important;\r\n color:#000!important;\r\n background:transparent!important;\r\n box-shadow:none!important;\r\n}\r\n\r\n.organic-editorial .organic-btn:hover{\r\n color:#fff!important;\r\n background:#000!important;\r\n}\r\n\r\n.mica-contact-combined{\r\n background:#fff!important;\r\n color:#000!important;\r\n}\r\n\r\n.mica-contact-combined .mica-contact-bg,\r\n.mica-contact-combined::before,\r\n.mica-contact-combined::after{\r\n background:#fff!important;\r\n}\r\n\r\n.mica-contact-combined h3,\r\n.mica-contact-combined h2,\r\n.mica-contact-combined p,\r\n.mica-contact-combined li,\r\n.mica-contact-combined strong,\r\n.mica-contact-combined span,\r\n.mica-contact-combined em,\r\n.mica-contact-combined label,\r\n.mica-contact-combined input,\r\n.mica-contact-combined textarea,\r\n.mica-contact-combined select{\r\n color:#000!important;\r\n}\r\n\r\n.mica-contact-combined .mica-contact-info li,\r\n.mica-contact-combined .mica-contact-form,\r\n.mica-contact-combined input,\r\n.mica-contact-combined textarea,\r\n.mica-contact-combined select{\r\n background:#fff!important;\r\n border-color:rgba(0,0,0,.28)!important;\r\n}\r\n\r\n.mica-contact-combined .contact-icon,\r\n.mica-contact-combined .mica-whatsapp-btn,\r\n.mica-contact-combined .btn-hero{\r\n background:#fff!important;\r\n border:1px solid #000!important;\r\n color:#000!important;\r\n}\r\n\r\n.mica-contact-combined .mica-whatsapp-btn:hover,\r\n.mica-contact-combined .btn-hero:hover{\r\n background:#000!important;\r\n color:#fff!important;\r\n}\r\n\r\n.ethereal-footer{\r\n background:#fff!important;\r\n color:#000!important;\r\n}\r\n\r\n.ethereal-footer::before,\r\n.ethereal-footer::after{\r\n content:none!important;\r\n}\r\n\r\n.ethereal-footer .footer-container,\r\n.ethereal-footer .footer-links,\r\n.ethereal-footer input{\r\n background:#fff!important;\r\n border-color:rgba(0,0,0,.28)!important;\r\n box-shadow:none!important;\r\n}\r\n\r\n.ethereal-footer .footer-eyebrow,\r\n.ethereal-footer .sitemap-label,\r\n.ethereal-footer .footer-title,\r\n.ethereal-footer .footer-text,\r\n.ethereal-footer .footer-col a,\r\n.ethereal-footer .copyright,\r\n.ethereal-footer input{\r\n color:#000!important;\r\n}\r\n\r\n.ethereal-footer .footer-whatsapp-form button{\r\n background:#fff!important;\r\n border:1px solid #000!important;\r\n color:#000!important;\r\n box-shadow:none!important;\r\n}\r\n\r\n.ethereal-footer .footer-whatsapp-form button:hover{\r\n background:#000!important;\r\n color:#fff!important;\r\n}\r\n\r\n.ethereal-footer .footer-techline{\r\n background:linear-gradient(90deg, transparent, #000, transparent)!important;\r\n}\r\n\r\n.philosophy-section__reading-text{\r\n font-weight:300!important;\r\n}\r\n\r\n@media(max-width:1199px){\r\n #mainNav .navbar-nav{ gap:54px; }\r\n #mainNav.hero-ended .navbar-nav{ gap:clamp(32px,5vw,64px); }\r\n #mainNav .nav-link{ font-size:20px; }\r\n #mainNav.hero-ended .nav-link{ font-size:18px; }\r\n .mica-magnetic-section{ padding:clamp(72px,7vw,106px) clamp(24px,5vw,74px) 0!important; }\r\n .mica-section-head{ margin-bottom:clamp(56px,7vw,106px)!important; }\r\n .mica-section-head h2,\r\n .philosophy-section__mock-title{\r\n font-size:clamp(76px,9vw,110px)!important;\r\n line-height:clamp(74px,8.8vw,106px);\r\n }\r\n .philosophy-section__reading-text{ font-size:clamp(22px,2.4vw,32px)!important; }\r\n}\r\n\r\n@media(max-width:991px){\r\n #mainNav .container-fluid{\r\n min-height:auto;\r\n padding:18px 18px 0;\r\n flex-direction:row;\r\n justify-content:space-between;\r\n }\r\n\r\n #mainNav.hero-ended .container-fluid{\r\n min-height:64px;\r\n padding:.7rem 18px!important;\r\n }\r\n\r\n #mainNav .navbar-brand{\r\n margin:0!important;\r\n font-size:clamp(38px,8vw,54px);\r\n }\r\n\r\n #mainNav.hero-ended .navbar-brand{\r\n font-size:clamp(34px,7vw,44px);\r\n }\r\n\r\n #mainNav .navbar-collapse{\r\n position:absolute;\r\n top:64px;\r\n left:18px;\r\n right:18px;\r\n width:auto;\r\n padding:20px 24px;\r\n background:rgba(255,255,255,.94)!important;\r\n border-radius:0!important;\r\n border:1px solid rgba(0,0,0,.08);\r\n box-shadow:0 18px 45px rgba(0,0,0,.08);\r\n }\r\n\r\n #mainNav .navbar-nav{ gap:18px; }\r\n #mainNav .nav-link{ font-size:20px; }\r\n\r\n .mica-magnetic-section{\r\n padding:82px 24px 0!important;\r\n }\r\n\r\n .mica-magnetic-grid{\r\n width:100%;\r\n height:auto!important;\r\n min-height:0!important;\r\n padding:0!important;\r\n display:grid!important;\r\n grid-template-columns:repeat(2, minmax(0, 1fr));\r\n gap:24px;\r\n }\r\n\r\n .mica-card{\r\n width:100%!important;\r\n height:auto!important;\r\n aspect-ratio:535 \/ 350;\r\n }\r\n}\r\n\r\n@media(max-width:640px){\r\n .mica-section-head h2{\r\n font-size:clamp(52px,17vw,76px)!important;\r\n line-height:clamp(52px,16vw,74px);\r\n }\r\n .mica-section-head{ margin-bottom:42px!important; }\r\n .mica-magnetic-grid{ grid-template-columns:1fr; gap:18px; }\r\n .philosophy-section{ margin-top:72px; }\r\n .philosophy-section__inner{ padding-bottom:96px!important; }\r\n .philosophy-section__mock-title{\r\n font-size:clamp(52px,17vw,76px)!important;\r\n line-height:clamp(52px,16vw,74px);\r\n }\r\n .philosophy-section__reading-text{ margin-top:34px!important; font-size:22px!important; }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n<body class=\"is-loading \"\r\n style=\"\r\n padding-left:0px!important;\r\n padding-right: 0px !important;\r\n \">\r\n\r\n <!-- ========================= -->\r\n <!-- SITE LOADER HTML - INICIO -->\r\n <!-- ========================= -->\r\n\r\n <div class=\"site-loader\" id=\"siteLoader\" aria-live=\"polite\" aria-label=\"Cargando sitio\">\r\n <div class=\"site-loader__inner\">\r\n <div class=\"circle-wrapper2\">\r\n <div class=\"circle-image2\" aria-hidden=\"true\">\r\n <img decoding=\"async\" src=\"https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/logoelestudio.png\" alt=\"\">\r\n <\/div>\r\n\r\n <svg class=\"circle-text-svg2\" viewBox=\"0 0 220 220\" aria-hidden=\"true\">\r\n <defs>\r\n <path\r\n id=\"circlePath2\"\r\n d=\"\r\n M 110,110\r\n m -82,0\r\n a 82,82 0 1,1 164,0\r\n a 82,82 0 1,1 -164,0\r\n \"\r\n \/>\r\n <\/defs>\r\n\r\n <text class=\"circle-text2\">\r\n <textPath href=\"#circlePath2\" startOffset=\"0%\">\r\n • ELESTUDIO • DISEÑO Y COMUNICACIÓN\r\n <\/textPath>\r\n <\/text>\r\n <\/svg>\r\n <\/div>\r\n\r\n <h5 class=\"site-loader__text\">\r\n • ELESTUDIO •<br>\r\n Cargando\r\n <\/h5>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ========================= -->\r\n <!-- SITE LOADER HTML - FIN -->\r\n <!-- ========================= -->\r\n\r\n <!-- ========================= -->\r\n <!-- NAVBAR HTML - INICIO -->\r\n <!-- ========================= -->\r\n\r\n <nav id=\"mainNav\" class=\"navbar navbar-expand-lg fixed-top\">\r\n <div class=\"container-fluid\">\r\n <div class=\"col-1 d-none d-lg-block\"><\/div>\r\n\r\n <a class=\"navbar-brand mt-3 mb-3\" href=\"#mainNav\">elestudio<\/a>\r\n\r\n <button\r\n class=\"navbar-toggler fixed-toggler\"\r\n type=\"button\"\r\n aria-controls=\"navbarNav\"\r\n aria-expanded=\"false\"\r\n aria-label=\"Toggle navigation\"\r\n >\r\n <i class=\"fas fa-bars\"><\/i>\r\n <\/button>\r\n\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\r\n <ul class=\"navbar-nav ms-auto\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#Proyectos\">proyectos.<\/a>\r\n <\/li>\r\n\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#Estudio\">acerca de.<\/a>\r\n <\/li>\r\n\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#Contacto\">contacto.<\/a>\r\n <\/li>\r\n <\/ul>\r\n\r\n <div class=\"col-1\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- ========================= -->\r\n <!-- NAVBAR HTML - FIN -->\r\n <!-- ========================= -->\r\n\r\n <!-- ========================= -->\r\n <!-- HERO HTML - INICIO -->\r\n <!-- ========================= -->\r\n\r\n <section class=\"camila-hero-300vh\">\r\n\r\n <div class=\"camila-scroll-space\"><\/div>\r\n\r\n <div class=\"camila-hero-fixed\" id=\"heroFixed\">\r\n\r\n <!-- BACKGROUNDS -->\r\n <div class=\"camila-hero-bg camila-bg-1\" id=\"bg1\"><\/div>\r\n <div class=\"camila-hero-bg camila-bg-2\" id=\"bg2\"><\/div>\r\n <div class=\"camila-hero-bg camila-bg-3\" id=\"bg3\"><\/div>\r\n\r\n <!-- OVERLAY -->\r\n <div class=\"camila-overlay\"><\/div>\r\n\r\n <!-- FLOW SVG -->\r\n <svg class=\"camila-flow-svg\" viewBox=\"0 0 1920 1200\" preserveAspectRatio=\"none\">\r\n\r\n <path\r\n class=\"camila-flow-bg\"\r\n d=\"M 568.5 0 C -446.766 669.726 420.757 754.867 688 543.5 C 955.243 332.133 149.225 460.324 381 1140\">\r\n <\/path>\r\n\r\n <path\r\n class=\"camila-flow-bg secondary\"\r\n d=\"M 610 -20 C -360 650 470 760 735 560 C 1000 360 210 500 430 1160\">\r\n <\/path>\r\n\r\n <path\r\n id=\"heroFlowPath\"\r\n class=\"camila-flow-active\"\r\n d=\"M 568.5 0 C -446.766 669.726 420.757 754.867 688 543.5 C 955.243 332.133 149.225 460.324 381 1140\">\r\n <\/path>\r\n\r\n <path\r\n id=\"heroFlowPath2\"\r\n class=\"camila-flow-active secondary-active\"\r\n d=\"M 610 -20 C -360 650 470 760 735 560 C 1000 360 210 500 430 1160\">\r\n <\/path>\r\n\r\n <\/svg>\r\n\r\n <!-- HERO 1 -->\r\n <div class=\"camila-hero-content camila-content-1 \">\r\n <div class=\"camila-text-wrapper hero-title-card hero-title-left pillBlur\" id=\"heroTitle\">\r\n\r\n <div class=\"camila-mini-title\">\r\n ELESTUDIO\r\n <\/div>\r\n\r\n <h1 class=\"camila-reading-text\">\r\n <span class=\"camila-line\">Diseño y comunicación<\/span>\r\n <span class=\"camila-line second-line\">para marcas con voz propia.<\/span>\r\n <\/h1>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- HERO 2 -->\r\n <div class=\"camila-hero-content camila-content-2\">\r\n <div class=\"camila-text-wrapper hero-title-card hero-title-right pillBlur\" id=\"heroTitle2\">\r\n\r\n <div class=\"camila-mini-title\">\r\n Creamos sistemas visuales<br class=\"d-lg-none\"> para <br class=\"d-none d-lg-block\">marcas, campañas,<br class=\"d-lg-none\"> contenidos y experiencias\r\n <\/div>\r\n\r\n <h2 class=\"camila-reading-text\">\r\n <span class=\"camila-line\">con mirada integral<\/span>\r\n <\/h2>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- HERO 3 -->\r\n <div class=\"camila-hero-content camila-content-3\">\r\n <div class=\"camila-text-wrapper hero-title-card hero-title-left pillBlur\" id=\"heroTitle3\">\r\n\r\n <div class=\"camila-mini-title\">\r\n Unimos concepto, diseño <br class=\"d-lg-none\"> y comunicación.\r\n <\/div>\r\n\r\n <h2 class=\"camila-reading-text\">\r\n\r\n <span class=\"camila-line\">\r\n Hacer visible\r\n <\/span>\r\n\r\n <span class=\"camila-line\">\r\n lo que tu marca quiere decir.\r\n <\/span>\r\n\r\n <\/h2>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- ========================= -->\r\n <!-- HERO HTML - FIN -->\r\n <!-- ========================= -->\r\n\r\n <!-- ========================= -->\r\n <!-- MAGNETIC CARDS HTML - INICIO -->\r\n <!-- ========================= -->\r\n\r\n <section class=\"mica-magnetic-section\" id=\"Proyectos\">\r\n\r\n <div class=\"mica-section-head\">\r\n <h2>proyectos.<\/h2>\r\n <\/div>\r\n\r\n <div class=\"mica-magnetic-grid\" aria-label=\"Proyectos destacados\">\r\n\r\n <article class=\"mica-card\" role=\"button\" tabindex=\"0\" data-project-index=\"0\" aria-label=\"Abrir proyecto Aura identidad\">\r\n <img decoding=\"async\" src=\"https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/aura.jpg\" alt=\"Proyecto de identidad visual\" loading=\"lazy\">\r\n <\/article>\r\n <article class=\"mica-card\" role=\"button\" tabindex=\"0\" data-project-index=\"1\" aria-label=\"Abrir proyecto Aura sistema visual\">\r\n <img decoding=\"async\" src=\"https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/aura.jpg\" alt=\"Proyecto de identidad visual\" loading=\"lazy\">\r\n <\/article>\r\n <article class=\"mica-card\" role=\"button\" tabindex=\"0\" data-project-index=\"2\" aria-label=\"Abrir proyecto Aura editorial\">\r\n <img decoding=\"async\" src=\"https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/aura.jpg\" alt=\"Proyecto de identidad visual\" loading=\"lazy\">\r\n <\/article>\r\n\r\n <article class=\"mica-card\" role=\"button\" tabindex=\"0\" data-project-index=\"3\" aria-label=\"Abrir proyecto Orbita\">\r\n <img decoding=\"async\" src=\"https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/orbita.jpg\" alt=\"Proyecto Orbita\" loading=\"lazy\">\r\n <\/article>\r\n\r\n <article class=\"mica-card\" role=\"button\" tabindex=\"0\" data-project-index=\"4\" aria-label=\"Abrir proyecto Paula\">\r\n <img decoding=\"async\" src=\"https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/proyect.jpg\" alt=\"Proyecto Paula\" loading=\"lazy\">\r\n <\/article>\r\n\r\n <article class=\"mica-card\" role=\"button\" tabindex=\"0\" data-project-index=\"5\" aria-label=\"Abrir proyecto Aura campana\">\r\n <img decoding=\"async\" src=\"https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/aura.jpg\" alt=\"Proyecto de identidad visual\" loading=\"lazy\">\r\n <\/article>\r\n\r\n <article class=\"mica-card\" role=\"button\" tabindex=\"0\" data-project-index=\"6\" aria-label=\"Abrir proyecto Orbita contenidos\">\r\n <img decoding=\"async\" src=\"https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/orbita.jpg\" alt=\"Proyecto Orbita\" loading=\"lazy\">\r\n <\/article>\r\n\r\n <article class=\"mica-card\" role=\"button\" tabindex=\"0\" data-project-index=\"7\" aria-label=\"Abrir proyecto Paula digital\">\r\n <img decoding=\"async\" src=\"https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/proyect.jpg\" alt=\"Proyecto Paula\" loading=\"lazy\">\r\n <\/article>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"modal fade mica-project-modal\" id=\"projectModal\" tabindex=\"-1\" aria-hidden=\"true\">\r\n <div class=\"modal-dialog modal-fullscreen\">\r\n <div class=\"modal-content\">\r\n <button type=\"button\" class=\"mica-project-modal__close\" aria-label=\"Cerrar proyecto\">\r\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"><\/i>\r\n <\/button>\r\n\r\n <div class=\"mica-project-modal__grid\">\r\n <aside class=\"mica-project-modal__copy\">\r\n <span class=\"mica-project-modal__eyebrow\" id=\"projectModalEyebrow\">Proyecto<\/span>\r\n <h2 id=\"projectModalTitle\">Proyecto<\/h2>\r\n <p id=\"projectModalDescription\"><\/p>\r\n\r\n <dl class=\"mica-project-modal__meta\" id=\"projectModalMeta\"><\/dl>\r\n <\/aside>\r\n\r\n <div class=\"mica-project-modal__gallery\" id=\"projectModalGallery\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ========================= -->\r\n <!-- MAGNETIC CARDS HTML - FIN -->\r\n <!-- ========================= -->\r\n\r\n <!-- ========================= -->\r\n <!-- MI HISTORIA HTML - INICIO -->\r\n <!-- =========================-->\r\n<div style=\"position: relative;transform:translateY(220px);\" id=\"Estudio\"><\/div>\r\n <section class=\"philosophy-section w-100\" id=\"Nosotros\" style=\"overflow-x: hidden!important;\">\r\n\r\n <div class=\"philosophy-section__inner\" >\r\n\r\n <div class=\"philosophy-section__mini-top\">\r\n <div class=\"philosophy-section__icon-wrap\">\r\n <svg width=\"54\" height=\"54\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M12 6.5C13.38 6.5 14.5 5.38 14.5 4C14.5 2.62 13.38 1.5 12 1.5C10.62 1.5 9.5 2.62 9.5 4C9.5 5.38 10.62 6.5 12 6.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n <path d=\"M8.5 14C9.5 15 10.7 15.5 12 15.5C13.3 15.5 14.5 15 15.5 14\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <path d=\"M6 19C7.5 20.3 9.5 21 12 21C14.5 21 16.5 20.3 18 19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <path d=\"M12 8.5C8.2 8.5 5 10.9 5 14C5 15.4 5.7 16.7 7 17.7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <path d=\"M12 8.5C15.8 8.5 19 10.9 19 14C19 15.4 18.3 16.7 17 17.7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <span>EL ESTUDIO<\/span>\r\n <\/div>\r\n\r\n <h2 class=\"philosophy-section__mock-title\">acerca de.<\/h2>\r\n\r\n <div class=\"philosophy-section__reading-text\" >\r\n <span>Somos Elestudio, un espacio de diseño y comunicación <\/span>\r\n <span>para marcas que quieren verse mejor y decir mejor.<\/span>\r\n <br>\r\n <span>Trabajamos identidad, estrategia visual y contenido con una mirada cercana, <\/span>\r\n <span>cuidada y funcional, para que cada proyecto tenga una presencia clara, <\/span>\r\n <span>contemporánea y fiel a lo que lo hace diferente.<\/span>\r\n <\/div>\r\n\r\n <a href=\"#MiHistoria\" class=\"philosophy-section__button\">\r\n CONOCER EL ENFOQUE\r\n <span class=\"philosophy-section__button-dot\"><\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- ========================= -->\r\n <!-- MI HISTORIA HTML - FIN -->\r\n <!-- ========================= -->\r\n\r\n <!-- ========================= -->\r\n <!-- EDITORIAL STORY HTML - INICIO -->\r\n <!-- ========================= -->\r\n\r\n <section class=\"editorial-story\" id=\"MiHistoria\">\r\n\r\n <div class=\"story-grid\">\r\n\r\n <div class=\"story-content gsap-float\" data-y=\"-45\" data-scrub=\"1.8\">\r\n\r\n <span class=\"eyebrow gsap-float\" data-y=\"-25\" data-scrub=\"1.2\">\r\n NUESTRA MIRADA\r\n <\/span>\r\n\r\n <h2 class=\"story-title gsap-float\" data-y=\"-70\" data-scrub=\"2.2\">\r\n Diseño con criterio, comunicación con intención\r\n <\/h2>\r\n\r\n <p class=\"story-text gsap-float\" data-y=\"-38\" data-scrub=\"1.6\">\r\n En Elestudio creemos que una marca no se construye solo con piezas lindas.\r\n Se construye con concepto, consistencia y una comunicación que pueda sostenerse\r\n en el tiempo. Por eso combinamos sensibilidad visual, pensamiento estratégico\r\n y ejecución cuidada para crear identidades, contenidos y sistemas que funcionan.\r\n <\/p>\r\n\r\n <a href=\"#Sesiones\" class=\"story-btn gsap-float\" data-y=\"-22\" data-scrub=\"1\">\r\n VER SERVICIOS\r\n <span class=\"dot\"><\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <div class=\"story-images\">\r\n\r\n <div class=\"img-wrap img-back gsap-float\" data-y=\"120\" data-scrub=\"2.8\" data-rotate=\"-2\">\r\n <img decoding=\"async\"\r\n class=\"img-parallax\"\r\n data-y=\"-80\"\r\n data-scrub=\"2\"\r\n src=\"..\/hero1.jpg\"\r\n \r\n alt=\"\"\r\n >\r\n <\/div>\r\n\r\n <div class=\"img-wrap img-front gsap-float\" data-y=\"-140\" data-scrub=\"2.4\" data-rotate=\"2\">\r\n <img decoding=\"async\"\r\n class=\"img-parallax\"\r\n data-y=\"90\"\r\n data-scrub=\"2\"\r\n src=\"..\/hero2.jpg\"\r\n alt=\"\"\r\n >\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- ========================= -->\r\n <!-- EDITORIAL STORY HTML - FIN -->\r\n <!-- ========================= -->\r\n\r\n <!-- ========================= -->\r\n <!-- FLOATING PROCESS HTML - INICIO -->\r\n <!-- ========================= -->\r\n\r\n <section class=\"floating-process\" id=\"Sesiones\">\r\n\r\n <div class=\"fixed-bg\">\r\n\r\n <svg class=\"bg-lines\" viewBox=\"0 0 1600 900\" fill=\"none\">\r\n\r\n <path\r\n d=\"M-80 610 C 180 420 330 360 520 455 C 700 545 830 640 1040 520 C 1230 412 1395 270 1680 330\"\r\n stroke=\"#d7dde0\"\r\n stroke-width=\"1\"\r\n \/>\r\n\r\n <path\r\n d=\"M-70 690 C 210 525 390 500 610 575 C 810 642 930 625 1110 475 C 1290 325 1420 195 1660 235\"\r\n stroke=\"#eceff1\"\r\n stroke-width=\"1\"\r\n \/>\r\n\r\n <\/svg>\r\n\r\n <\/div>\r\n\r\n <div class=\"process-wrapper\">\r\n\r\n <section class=\"process-card active\">\r\n\r\n <div class=\"content\">\r\n <span class=\"eyebrow\">BRANDING<\/span>\r\n\r\n <h2>Dar forma <br class=\"d-lg-none\">a una identidad<\/h2>\r\n\r\n <p>\r\n Creamos marcas desde su concepto: nombre visual, logotipo, paleta,\r\n tipografías, recursos gráficos y criterios de aplicación para\r\n que todo hable el mismo idioma.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"number\">01<\/div>\r\n\r\n <\/section>\r\n\r\n <section class=\"process-card\">\r\n\r\n <div class=\"content\">\r\n <span class=\"eyebrow\">ESTRATEGIA<\/span>\r\n\r\n <h2>Ordenar lo que querés decir<\/h2>\r\n\r\n <p>\r\n Definimos mensajes, tono, objetivos y arquitectura de comunicación\r\n para que la marca se exprese con claridad en redes, web, campañas\r\n y materiales comerciales.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"number\">02<\/div>\r\n\r\n <\/section>\r\n\r\n <section class=\"process-card\">\r\n\r\n <div class=\"content\">\r\n <span class=\"eyebrow\">CONTENIDO<\/span>\r\n\r\n <h2>Diseñar piezas\r\n <br class=\"d-lg-none\">\r\n que conectan<\/h2>\r\n\r\n <p>\r\n Desarrollamos publicaciones, campañas, presentaciones y recursos\r\n digitales con una línea visual reconocible y pensada para cada\r\n canal de comunicación.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"number\">03<\/div>\r\n\r\n <\/section>\r\n\r\n <section class=\"process-card\">\r\n\r\n <div class=\"content\">\r\n <span class=\"eyebrow\">ACOMPAÑAMIENTO<\/span>\r\n\r\n <h2>Hacer crecer la presencia de marca<\/h2>\r\n\r\n <p>\r\n Podemos trabajar por proyecto, por lanzamiento o como equipo externo\r\n de diseño y comunicación para sostener una presencia profesional\r\n mes a mes.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"number\">04<\/div>\r\n\r\n <\/section>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- ========================= -->\r\n <!-- FLOATING PROCESS HTML - FIN -->\r\n <!-- ========================= -->\r\n\r\n <!-- ========================= -->\r\n <!-- CURVED REVEAL HTML - INICIO -->\r\n <!-- ========================= -->\r\n\r\n <section class=\"curve-section d-none d-lg-block\">\r\n\r\n <div class=\"curve-sticky\">\r\n\r\n <div class=\"curve-content \">\r\n\r\n <div class=\"left-side\">\r\n\r\n <h2 class=\"curve-title pt-5\">\r\n <span class=\"curve-title-dynamic\">No diseñamos piezas aisladas,<\/span>\r\n\r\n <span style=\"color: whitesmoke !important;\">creamos sistemas para comunicar mejor.<\/span>\r\n <\/h2>\r\n\r\n <\/div>\r\n\r\n <div class=\"right-side\">\r\n\r\n <p class=\"curve-copy-dynamic\">\r\n Acompañamos marcas desde una mirada sensible e integral,\r\n donde estrategia, diseño y contenido trabajan juntos para\r\n construir una presencia clara, flexible y reconocible.\r\n\r\n <span class=\"curve-copy-accent\">\r\n Un proceso creativo con dirección, criterio y cuidado por el detalle.\r\n <\/span>\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"image-wrap\">\r\n\r\n <svg class=\"motion-path\" viewBox=\"0 0 1600 400\" preserveAspectRatio=\"none\">\r\n\r\n <path\r\n id=\"travelPath\"\r\n d=\"M 0 260\r\n C 300 140 600 80 820 120\r\n C 1120 180 1350 220 1600 80\"\r\n fill=\"none\"\r\n stroke=\"rgba(255,255,255,0.08)\"\r\n stroke-width=\"2\"\r\n stroke-dasharray=\"8 10\"\r\n \/>\r\n\r\n <\/svg>\r\n\r\n <div class=\"image-mask\">\r\n\r\n <img decoding=\"async\"\r\n class=\"hero-image\"\r\n src=\"..\/hero.jpg\"\r\n alt=\"\"\r\n \/>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <section class=\"curve-section-mobile d-block d-lg-none\">\r\n\r\n <div class=\"curve-section-mobile__content\">\r\n\r\n <h2 class=\"curve-title\">\r\n <span>No diseñamos piezas aisladas,<\/span>\r\n <span>creamos <br class=\"d-lg-block\">sistemas para comunicar mejor.<\/span>\r\n <\/h2>\r\n\r\n <p>\r\n Acompañamos marcas desde una mirada sensible e integral,\r\n donde estrategia, diseño y contenido trabajan juntos para\r\n construir una presencia clara, flexible y reconocible.\r\n\r\n <span>\r\n Un proceso creativo con dirección, criterio y cuidado por el detalle.\r\n <\/span>\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- ========================= -->\r\n <!-- CURVED REVEAL HTML - FIN -->\r\n <!-- ========================= -->\r\n\r\n <!-- ========================= -->\r\n <!-- ORGANIC EDITORIAL CARDS HTML - INICIO -->\r\n <!-- ========================= -->\r\n\r\n <section class=\"organic-editorial\">\r\n\r\n <h2 class=\"organic-section-title\">el equipo.<\/h2>\r\n\r\n <div class=\"organic-grid\">\r\n\r\n <article class=\"organic-card\">\r\n\r\n <div class=\"blob-wrap\" data-speed=\"0.05\">\r\n <div class=\"blob-outline\"><\/div>\r\n\r\n <div class=\"blob-shape\">\r\n <img decoding=\"async\"\r\n src=\"..\/hero.jpg\"\r\n alt=\"\"\r\n >\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"organic-title\">\r\n Alicia\r\n <\/h3>\r\n\r\n <p class=\"organic-text\">\r\n Diseñadora gráfica y comunicadora. Su superpoder: convertir ideas sueltas en identidades claras, elegantes y listas para salir al mundo sin pedir permiso.\r\n <\/p>\r\n\r\n <a href=\"#Contacto\" class=\"organic-btn\">\r\n CONOCER A ALICIA\r\n <span class=\"dot\"><\/span>\r\n <\/a>\r\n\r\n <\/article>\r\n\r\n <article class=\"organic-card center-card\">\r\n\r\n <div class=\"blob-wrap\" data-speed=\"0.1\">\r\n <div class=\"blob-outline\"><\/div>\r\n\r\n <div class=\"blob-shape blob-dark\">\r\n <img decoding=\"async\"\r\n src=\"..\/hero1.jpg\"\r\n alt=\"\"\r\n >\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"organic-title\">\r\n Emilia\r\n <\/h3>\r\n\r\n <p class=\"organic-text\">\r\n Diseñadora gráfica y comunicadora. Tiene radar creativo para detectar cuando una pieza necesita más voz, más orden o simplemente un poco de encanto visual bien aplicado.\r\n <\/p>\r\n\r\n <a href=\"#Contacto\" class=\"organic-btn\">\r\n CONOCER A EMILIA\r\n <span class=\"dot\"><\/span>\r\n <\/a>\r\n\r\n <\/article>\r\n\r\n <article class=\"organic-card\">\r\n\r\n <div class=\"blob-wrap\" data-speed=\"0.07\">\r\n <div class=\"blob-outline\"><\/div>\r\n\r\n <div class=\"blob-shape\">\r\n <img decoding=\"async\"\r\n src=\"..\/hero2.jpg\"\r\n alt=\"\"\r\n >\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"organic-title\">\r\n Agustín\r\n <\/h3>\r\n\r\n <p class=\"organic-text\">\r\n Publicista, editor y paid manager. Su superpoder: hacer que ideas, pauta y edición trabajen juntas sin entrar en reunión eterna.\r\n <\/p>\r\n\r\n <p class=\"organic-text organic-places\">\r\n Superpoderes:\r\n <\/p>\r\n\r\n <p class=\"organic-place-list\">\r\n <span>Ideas con timing<\/span>\r\n <span>Edición precisa<\/span>\r\n <span>Pauta con criterio<\/span>\r\n <span>Performance sin drama<\/span>\r\n <\/p>\r\n\r\n <a href=\"#Contacto\" class=\"organic-btn\">\r\n CONOCER A AGUSTÍN\r\n <span class=\"dot\"><\/span>\r\n <\/a>\r\n\r\n <\/article>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- ========================= -->\r\n <!-- ORGANIC EDITORIAL CARDS HTML - FIN -->\r\n <!-- ========================= -->\r\n\r\n <!-- ========================= -->\r\n <!-- CONTACTO COMBINADO HTML - INICIO -->\r\n <!-- ========================= -->\r\n\r\n <section class=\"mica-contact-combined\" id=\"Contacto\">\r\n\r\n <div class=\"mica-contact-bg\" aria-hidden=\"true\"><\/div>\r\n\r\n <div class=\"mica-contact-grid\">\r\n\r\n <article class=\"mica-contact-info\">\r\n\r\n <h3>\r\n Si tu marca necesita verse y comunicarse mejor, hablemos.\r\n <\/h3>\r\n\r\n <p>\r\n Contanos en qué etapa estás: si necesitás crear una identidad desde cero,\r\n ordenar la comunicación, diseñar contenido o preparar un lanzamiento.\r\n Podemos pensar una propuesta a medida para tu marca.\r\n <\/p>\r\n\r\n <ul>\r\n <li>\r\n <span class=\"contact-icon\">\r\n <i class=\"fa-solid fa-leaf\" aria-hidden=\"true\"><\/i>\r\n <\/span>\r\n <span class=\"contact-meta\">\r\n <strong>Modalidad<\/strong>\r\n <span>Trabajo remoto, reuniones online y seguimiento por proyecto<\/span>\r\n <\/span>\r\n <\/li>\r\n\r\n <li>\r\n <span class=\"contact-icon\">\r\n <i class=\"fa-solid fa-clock\" aria-hidden=\"true\"><\/i>\r\n <\/span>\r\n <span class=\"contact-meta\">\r\n <strong>Proceso<\/strong>\r\n <span>Brief, propuesta, diseño, ajustes y entrega final<\/span>\r\n <\/span>\r\n <\/li>\r\n\r\n <li>\r\n <span class=\"contact-icon\">\r\n <i class=\"fa-solid fa-star\" aria-hidden=\"true\"><\/i>\r\n <\/span>\r\n <span class=\"contact-meta\">\r\n <strong>Servicios<\/strong>\r\n <span>Branding, comunicación, redes, campañas y dirección creativa<\/span>\r\n <\/span>\r\n <\/li>\r\n\r\n <li>\r\n <span class=\"contact-icon\">\r\n <i class=\"fa-solid fa-mobile-screen-button\" aria-hidden=\"true\"><\/i>\r\n <\/span>\r\n <span class=\"contact-meta\">\r\n <strong>Contacto<\/strong>\r\n <span>Coordinación directa para conocer tu proyecto<\/span>\r\n <\/span>\r\n <\/li>\r\n <\/ul>\r\n\r\n <p class=\"mica-contact-quote \">\r\n <em>\r\n “Diseñar también es ordenar una idea para que pueda encontrarse con su público.”\r\n <\/em>\r\n <\/p>\r\n\r\n <a href=\"mailto:hola@elestudio.com?subject=Consulta%20desde%20la%20web\" class=\"mica-whatsapp-btn\">\r\n Enviar consulta\r\n <span><\/span>\r\n <\/a>\r\n\r\n <\/article>\r\n\r\n <article class=\"mica-contact-form\">\r\n\r\n <div class=\"form-container\">\r\n\r\n \r\n\r\n <p>\r\n Contanos qué necesita tu marca y armamos una primera respuesta para avanzar.\r\n <\/p>\r\n\r\n <form>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"nombre\">Nombre<\/label>\r\n <input type=\"text\" id=\"nombre\" placeholder=\"Tu nombre completo\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"email\">Correo electrónico<\/label>\r\n <input type=\"email\" id=\"email\" placeholder=\"tu@email.com\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"servicio\">Servicio de interés<\/label>\r\n <select id=\"servicio\">\r\n <option value=\"\">Seleccioná una opción<\/option>\r\n <option value=\"Identidad visual\">Identidad visual<\/option>\r\n <option value=\"Comunicación estratégica\">Comunicación estratégica<\/option>\r\n <option value=\"Contenido para redes\">Contenido para redes<\/option>\r\n <option value=\"Dirección creativa\">Dirección creativa<\/option>\r\n <option value=\"No estoy seguro, quiero consultar\">No estoy seguro, quiero consultar<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"mensaje\">Mensaje<\/label>\r\n <textarea id=\"mensaje\" rows=\"4\" placeholder=\"Contanos brevemente qué necesita tu marca...\"><\/textarea>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"btn-hero\" id=\"sendBtn\">\r\n Enviar consulta\r\n <\/button>\r\n\r\n <\/form>\r\n\r\n <\/div>\r\n\r\n <\/article>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- ========================= -->\r\n <!-- CONTACTO COMBINADO HTML - FIN -->\r\n <!-- ========================= -->\r\n\r\n <!-- ========================= -->\r\n <!-- FOOTER ELEGANTE HTML - INICIO -->\r\n <!-- ========================= -->\r\n\r\n <section class=\"ethereal-footer\" style=\"border-bottom-left-radius:16px;border-top-left-radius: 16px;\">\r\n\r\n <div class=\"footer-aura\"><\/div>\r\n <div class=\"footer-cursor-aura\" aria-hidden=\"true\"><\/div>\r\n <div class=\"footer-techline\" aria-hidden=\"true\"><\/div>\r\n\r\n <div class=\"footer-container\">\r\n\r\n <div class=\"footer-left\">\r\n\r\n <span class=\"footer-eyebrow\">\r\n ELESTUDIO\r\n <\/span>\r\n\r\n <h2 class=\"footer-title\">\r\n Diseñar una marca<br>\r\n también es<br> elegir cómo se la recuerda.\r\n <\/h2>\r\n\r\n <p class=\"footer-text\">\r\n Diseño, comunicación y dirección creativa para proyectos que\r\n necesitan una presencia visual más clara, cuidada y consistente.\r\n <\/p>\r\n\r\n <form class=\"footer-whatsapp-form\">\r\n\r\n <input\r\n type=\"text\"\r\n placeholder=\"Tu nombre\"\r\n id=\"footerName\"\r\n >\r\n\r\n <button type=\"submit\">\r\n Consultar\r\n <span class=\"dot\"><\/span>\r\n <\/button>\r\n\r\n <\/form>\r\n\r\n <\/div>\r\n\r\n <div class=\"footer-right\">\r\n\r\n <span class=\"sitemap-label\">\r\n Explorar\r\n <\/span>\r\n\r\n <div class=\"footer-links\">\r\n\r\n <div class=\"footer-col\">\r\n <a href=\"#mainNav\">Inicio<\/a>\r\n <a href=\"#Nosotros\">Estudio<\/a>\r\n <a href=\"#Sesiones\">Servicios<\/a>\r\n \r\n <\/div>\r\n\r\n <div class=\"footer-col\">\r\n \r\n <!--<a href=\"#testimonios\">Testimonios<\/a>-->\r\n <a href=\"#Contacto\">Contacto<\/a>\r\n <a href=\"#\" target=\"_blank\">Instagram<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"footer-brand\">\r\n\r\n <div class=\"brand-symbol\">\r\n ✦\r\n <\/div>\r\n\r\n <div class=\"brand-copy\">\r\n Elestudio<br>\r\n <strong>Diseño & comunicación<\/strong>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"copyright\">\r\n © 2026 Elestudio — Todos los derechos reservados.\r\n <\/div>\r\n\r\n <div class=\"footer-contact-card\">\r\n <span>Contacto<\/span>\r\n <strong>Diseño y comunicación<\/strong>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- ========================= -->\r\n <!-- FOOTER ELEGANTE HTML - FIN -->\r\n <!-- ========================= -->\r\n\r\n <div class=\"credit-bar\">\r\n CREATED BY:\r\n <a href=\"https:\/\/www.instagram.com\/elestudio.diseno\/\" target=\"_blank\" rel=\"noopener\">\r\n Elestudio\r\n <\/a>\r\n <\/div>\r\n\r\n<!-- ========================= -->\r\n<!-- HERO JS - INICIO -->\r\n<!-- Requiere Anime.js para suavizar el trazo. Si no carga, usa fallback. -->\r\n<!-- ========================= -->\r\n\r\n<script>\r\n(() => {\r\n const themeColor = '#536068';\r\n\r\n function ensureMeta(name, content){\r\n let meta = document.head.querySelector(`meta[name=\"${name}\"]`);\r\n\r\n if(!meta){\r\n meta = document.createElement('meta');\r\n meta.setAttribute('name', name);\r\n document.head.appendChild(meta);\r\n }\r\n\r\n meta.setAttribute('content', content);\r\n }\r\n\r\n ensureMeta('theme-color', themeColor);\r\n ensureMeta('apple-mobile-web-app-status-bar-style', 'black-translucent');\r\n})();\r\n<\/script>\r\n\r\n<!-- ANIME JS -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animejs\/3.2.1\/anime.min.js\"><\/script>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\r\n const bg1 = document.getElementById('bg1');\r\n const bg2 = document.getElementById('bg2');\r\n const bg3 = document.getElementById('bg3');\r\n\r\n const heroFixed = document.getElementById('heroFixed');\r\n const heroSection = document.querySelector('.camila-hero-300vh');\r\n\r\n const heroFlowPath = document.getElementById('heroFlowPath');\r\n const heroFlowPath2 = document.getElementById('heroFlowPath2');\r\n\r\n const heroTitle = document.getElementById('heroTitle');\r\n const heroTitle2 = document.getElementById('heroTitle2');\r\n const heroTitle3 = document.getElementById('heroTitle3');\r\n const heroTitles = [\r\n {\r\n element:heroTitle,\r\n startVh:0,\r\n initial:true\r\n },\r\n {\r\n element:heroTitle2,\r\n startVh:50\r\n },\r\n {\r\n element:heroTitle3,\r\n startVh:100\r\n }\r\n ];\r\n\r\n if(\r\n !bg1 || !bg2 || !bg3 ||\r\n !heroFixed || !heroSection ||\r\n !heroFlowPath || !heroFlowPath2\r\n ) return;\r\n\r\n let vh = window.innerHeight;\r\n\r\n let pathLength = 0;\r\n let pathLength2 = 0;\r\n\r\n let initialized = false;\r\n let currentOffset = 0;\r\n let currentOffset2 = 0;\r\n let lastScrollY = 0;\r\n let animation = null;\r\n let ticking = false;\r\n const heroMobileQuery = window.matchMedia('(max-width:768px)');\r\n let isHeroMobile = heroMobileQuery.matches;\r\n\r\n initFlowPaths();\r\n onScroll();\r\n\r\n window.addEventListener('scroll', requestHeroUpdate, { passive:true });\r\n\r\n window.addEventListener('resize', () => {\r\n vh = window.innerHeight;\r\n initFlowPaths();\r\n requestHeroUpdate();\r\n });\r\n\r\n if(heroMobileQuery.addEventListener){\r\n heroMobileQuery.addEventListener('change', event => {\r\n isHeroMobile = event.matches;\r\n requestHeroUpdate();\r\n });\r\n }\r\n\r\n function requestHeroUpdate(){\r\n if(ticking) return;\r\n\r\n ticking = true;\r\n\r\n requestAnimationFrame(() => {\r\n onScroll();\r\n ticking = false;\r\n });\r\n }\r\n\r\n function initFlowPaths(){\r\n\r\n pathLength = heroFlowPath.getTotalLength();\r\n pathLength2 = heroFlowPath2.getTotalLength();\r\n\r\n heroFlowPath.style.strokeDasharray = pathLength;\r\n heroFlowPath.style.strokeDashoffset = pathLength * 0.82;\r\n\r\n heroFlowPath2.style.strokeDasharray = pathLength2;\r\n heroFlowPath2.style.strokeDashoffset = pathLength2 * 0.74;\r\n\r\n }\r\n\r\n \r\n function onScroll(){\r\n\r\n const scrollY = window.scrollY;\r\n\r\n const heroStart = heroSection.offsetTop;\r\n const heroScrollLength = Math.max(heroSection.offsetHeight - vh, 1);\r\n const progress = clamp((scrollY - heroStart) \/ heroScrollLength, 0, 1);\r\n\r\n animateHero(scrollY - heroStart);\r\n updateFlowPaths(scrollY);\r\n updateTitles(scrollY);\r\n\r\n const heroEndMultiplier = isHeroMobile ? 1.18 : 1.10;\r\n const heroEnd = (heroStart + heroSection.offsetHeight - vh) * heroEndMultiplier;\r\n\r\n if(scrollY > heroEnd){\r\n heroFixed.classList.add('is-hidden');\r\n }else{\r\n heroFixed.classList.remove('is-hidden');\r\n }\r\n\r\n }\r\n\r\n function animateHero(localScrollY){\r\n\r\n const bgFadeLength = vh * 0.45;\r\n const bg2Progress = clamp((localScrollY - (vh * .5)) \/ bgFadeLength, 0, 1);\r\n const bg3Progress = clamp((localScrollY - vh) \/ bgFadeLength, 0, 1);\r\n\r\n bg1.style.opacity = 1 - bg2Progress;\r\n bg2.style.opacity = bg2Progress * (1 - bg3Progress);\r\n bg3.style.opacity = bg3Progress;\r\n\r\n }\r\n\r\n function updateFlowPaths(scrollY){\r\n\r\n const heroStart = heroSection.offsetTop;\r\n const heroHeight = heroSection.offsetHeight;\r\n\r\n let progress = 1.7 * (scrollY - heroStart) \/ heroHeight;\r\n progress = clamp(progress, 0, 1);\r\n\r\n const initialReveal1 = 0.18;\r\n const initialReveal2 = 0.26;\r\n\r\n const target1 =\r\n pathLength * (1 - initialReveal1) * (1 - progress);\r\n\r\n const target2 =\r\n pathLength2 * (1 - initialReveal2) * (1 - progress)\r\n + Math.sin(progress * 7) * 35;\r\n\r\n if(!initialized){\r\n currentOffset = target1;\r\n currentOffset2 = target2;\r\n initialized = true;\r\n }\r\n\r\n const goingUp = scrollY < lastScrollY;\r\n const duration = goingUp ? 700 : 1000;\r\n\r\n if(animation){\r\n animation.pause();\r\n }\r\n\r\n if(!isHeroMobile && window.anime){\r\n animation = anime({\r\n targets:{\r\n value1:currentOffset,\r\n value2:currentOffset2\r\n },\r\n value1:target1,\r\n value2:target2,\r\n duration:duration,\r\n easing:'easeOutQuad',\r\n update:function(anim){\r\n\r\n currentOffset = anim.animations[0].currentValue;\r\n currentOffset2 = anim.animations[1].currentValue;\r\n\r\n heroFlowPath.style.strokeDashoffset = currentOffset;\r\n heroFlowPath2.style.strokeDashoffset = currentOffset2;\r\n\r\n }\r\n });\r\n }else{\r\n currentOffset = target1;\r\n currentOffset2 = target2;\r\n heroFlowPath.style.strokeDashoffset = currentOffset;\r\n heroFlowPath2.style.strokeDashoffset = currentOffset2;\r\n }\r\n\r\n lastScrollY = scrollY;\r\n\r\n updateFlowColor(scrollY);\r\n\r\n }\r\n\r\n function updateFlowColor(scrollY){\r\n\r\n const flowStart = vh * 0;\r\n const flowEnd = vh * 2.9;\r\n\r\n let flowProgress = 1.2 * (scrollY - flowStart) \/ (flowEnd - flowStart);\r\n flowProgress = clamp(flowProgress, 0, 1);\r\n\r\n const startColor = {\r\n r:0,\r\n g:0,\r\n b:0\r\n };\r\n\r\n const endColor = {\r\n r:255,\r\n g:255,\r\n b:255\r\n };\r\n\r\n const r = Math.round(lerp(startColor.r, endColor.r, flowProgress));\r\n const g = Math.round(lerp(startColor.g, endColor.g, flowProgress));\r\n const b = Math.round(lerp(startColor.b, endColor.b, flowProgress));\r\n\r\n const flowColor = `rgb(${r}, ${g}, ${b})`;\r\n const glow = lerp(.5, 1.25, flowProgress);\r\n\r\n heroFlowPath.style.stroke = flowColor;\r\n heroFlowPath.style.filter = isHeroMobile\r\n ? 'none'\r\n : `\r\n drop-shadow(\r\n 0 0 ${8 * glow}px\r\n rgba(0,0,0,.18)\r\n )\r\n `;\r\n\r\n heroFlowPath2.style.stroke = flowColor;\r\n heroFlowPath2.style.filter = isHeroMobile\r\n ? 'none'\r\n : `\r\n drop-shadow(\r\n 0 0 ${10 * glow}px\r\n rgba(255,255,255,.28)\r\n )\r\n `;\r\n\r\n }\r\n\r\n function updateTitles(scrollY){\r\n\r\n const mobileTitleSpeed = isHeroMobile ? 1.2 : 1;\r\n const titleDuration = vh * 0.9;\r\n const titleEnterY = isHeroMobile ? 42 : 36;\r\n const titleReadY = 0;\r\n const titleExitY = -130;\r\n const enterEnd = 0.32;\r\n const fadeSize = 0.16;\r\n\r\n heroTitles.forEach(title => {\r\n if(!title.element) return;\r\n\r\n const startScroll = vh * (title.startVh \/ 100);\r\n const isBeforeStart = scrollY < startScroll;\r\n let progress = clamp(\r\n ((scrollY - startScroll) \/ titleDuration) * mobileTitleSpeed,\r\n 0,\r\n 1\r\n );\r\n\r\n const currentY = title.initial\r\n ? lerp(titleReadY, titleExitY, progress)\r\n : progress <= enterEnd\r\n ? lerp(titleEnterY, titleReadY, progress \/ enterEnd)\r\n : lerp(titleReadY, titleExitY, (progress - enterEnd) \/ (1 - enterEnd));\r\n\r\n const fadeIn = title.initial ? 1 : clamp(progress \/ fadeSize, 0, 1);\r\n const fadeOut = clamp((1 - progress) \/ fadeSize, 0, 1);\r\n const opacity = Math.min(fadeIn, fadeOut);\r\n const isActive = !isBeforeStart && progress < 1 && opacity > 0.01;\r\n\r\n title.element.style.transform = `translateY(${currentY}vh)`;\r\n title.element.style.opacity = opacity.toString();\r\n title.element.style.visibility = isActive ? 'visible' : 'hidden';\r\n title.element.style.pointerEvents = isActive ? 'auto' : 'none';\r\n });\r\n\r\n }\r\n\r\n function clamp(val, min, max){\r\n return Math.max(min, Math.min(max, val));\r\n }\r\n\r\n function lerp(start, end, t){\r\n return start + (end - start) * t;\r\n }\r\n\r\n});\r\n<\/script>\r\n\r\n<!-- ========================= -->\r\n<!-- HERO JS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- PROJECTS GSAP JS - INICIO -->\r\n<!-- Requiere GSAP para aparicion y hover de proyectos. -->\r\n<!-- ========================= -->\r\n\r\n<!-- GSAP -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\r\n if(!window.gsap) return;\r\n\r\n const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n const grid = document.querySelector('.mica-magnetic-grid');\r\n const cards = gsap.utils.toArray('.mica-card');\r\n\r\n if(!grid || !cards.length) return;\r\n if(window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);\r\n\r\n if(prefersReducedMotion){\r\n gsap.set(cards, { opacity:1, y:0, clearProps:'transform,filter' });\r\n return;\r\n }\r\n\r\n gsap.set(cards, {\r\n opacity:0,\r\n y:28,\r\n scale:.985,\r\n filter:'blur(6px)'\r\n });\r\n\r\n gsap.set('.mica-card img', {\r\n scale:1.035,\r\n filter:'grayscale(8%) contrast(.98)'\r\n });\r\n\r\n const revealConfig = {\r\n opacity:1,\r\n y:0,\r\n scale:1,\r\n filter:'blur(0px)',\r\n duration:1.15,\r\n stagger:{\r\n each:.12,\r\n from:'start'\r\n },\r\n ease:'power2.out',\r\n clearProps:'filter',\r\n delay:.05\r\n };\r\n\r\n if(window.ScrollTrigger){\r\n gsap.to(cards, {\r\n ...revealConfig,\r\n scrollTrigger:{\r\n trigger:grid,\r\n start:'top 78%',\r\n once:true\r\n }\r\n });\r\n\r\n gsap.to('.mica-card img', {\r\n scale:1.015,\r\n filter:'grayscale(0%) contrast(1)',\r\n duration:1.15,\r\n stagger:.08,\r\n ease:'power2.out',\r\n scrollTrigger:{\r\n trigger:grid,\r\n start:'top 78%',\r\n once:true\r\n }\r\n });\r\n\r\n cards.forEach((card, index) => {\r\n const image = card.querySelector('img');\r\n if(!image) return;\r\n\r\n gsap.fromTo(image,\r\n { yPercent:-2 },\r\n {\r\n yPercent:2,\r\n ease:'none',\r\n scrollTrigger:{\r\n trigger:card,\r\n start:'top bottom',\r\n end:'bottom top',\r\n scrub:true\r\n }\r\n }\r\n );\r\n\r\n gsap.to(card, {\r\n y:index % 2 === 0 ? -8 : 8,\r\n ease:'none',\r\n scrollTrigger:{\r\n trigger:card,\r\n start:'top bottom',\r\n end:'bottom top',\r\n scrub:true\r\n }\r\n });\r\n });\r\n\r\n }else{\r\n gsap.to(cards, revealConfig);\r\n gsap.to('.mica-card img', {\r\n scale:1.015,\r\n filter:'grayscale(0%) contrast(1)',\r\n duration:1.15,\r\n stagger:.08,\r\n ease:'power2.out'\r\n });\r\n }\r\n\r\n cards.forEach(card => {\r\n const image = card.querySelector('img');\r\n if(!image) return;\r\n\r\n const cardX = gsap.quickTo(card, 'x', { duration:.55, ease:'power3.out' });\r\n const cardY = gsap.quickTo(card, 'y', { duration:.55, ease:'power3.out' });\r\n const imageX = gsap.quickTo(image, 'x', { duration:.7, ease:'power3.out' });\r\n const imageY = gsap.quickTo(image, 'y', { duration:.7, ease:'power3.out' });\r\n\r\n card.addEventListener('mouseenter', () => {\r\n gsap.to(card, {\r\n scale:1.035,\r\n zIndex:3,\r\n boxShadow:'0 22px 54px rgba(0,0,0,.16)',\r\n duration:.55,\r\n ease:'power3.out',\r\n overwrite:true\r\n });\r\n\r\n gsap.to(image, {\r\n scale:1.11,\r\n filter:'grayscale(0%) contrast(1.06)',\r\n duration:.75,\r\n ease:'power3.out',\r\n overwrite:true\r\n });\r\n });\r\n\r\n card.addEventListener('mousemove', event => {\r\n const rect = card.getBoundingClientRect();\r\n const moveX = (event.clientX - rect.left - rect.width \/ 2) \/ 44;\r\n const moveY = (event.clientY - rect.top - rect.height \/ 2) \/ 44;\r\n\r\n cardX(moveX);\r\n cardY(moveY);\r\n imageX(moveX * -.72);\r\n imageY(moveY * -.72);\r\n });\r\n\r\n card.addEventListener('mouseleave', () => {\r\n cardX(0);\r\n cardY(0);\r\n imageX(0);\r\n imageY(0);\r\n\r\n gsap.to(card, {\r\n scale:1,\r\n zIndex:1,\r\n boxShadow:'0 0 0 rgba(0,0,0,0)',\r\n duration:.55,\r\n ease:'power3.out',\r\n overwrite:true\r\n });\r\n\r\n gsap.to(image, {\r\n scale:1.02,\r\n filter:'grayscale(0%) contrast(1)',\r\n duration:.65,\r\n ease:'power3.out',\r\n overwrite:true\r\n });\r\n });\r\n });\r\n\r\n});\r\n<\/script>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n const modalElement = document.getElementById('projectModal');\r\n const modalTitle = document.getElementById('projectModalTitle');\r\n const modalEyebrow = document.getElementById('projectModalEyebrow');\r\n const modalDescription = document.getElementById('projectModalDescription');\r\n const modalMeta = document.getElementById('projectModalMeta');\r\n const modalGallery = document.getElementById('projectModalGallery');\r\n const projectCards = document.querySelectorAll('.mica-card[data-project-index]');\r\n\r\n if(!modalElement || !modalTitle || !modalDescription || !modalMeta || !modalGallery || !projectCards.length) return;\r\n\r\n const projectImages = {\r\n aura:'https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/aura.jpg',\r\n orbita:'https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/orbita.jpg',\r\n paula:'https:\/\/elestudio.osidentity.com\/wp-content\/uploads\/2026\/05\/proyect.jpg'\r\n };\r\n\r\n const projects = [\r\n {\r\n title:'Aura',\r\n eyebrow:'Identidad visual',\r\n description:'Sistema visual para una marca sensible, precisa y contemporanea. Trabajamos una direccion grafica sobria, recursos editoriales y piezas capaces de sostener presencia sin levantar la voz.',\r\n images:[projectImages.aura, projectImages.orbita, projectImages.paula],\r\n meta:{ Servicio:'Branding', Rol:'Direccion visual', Entrega:'Sistema de marca' }\r\n },\r\n {\r\n title:'Aura editorial',\r\n eyebrow:'Comunicacion',\r\n description:'Una extension editorial de marca pensada para ordenar mensajes, jerarquias y ritmo visual. El resultado: piezas claras, elegantes y listas para convivir en distintos canales.',\r\n images:[projectImages.aura, projectImages.paula, projectImages.orbita],\r\n meta:{ Servicio:'Contenido', Rol:'Diseno y comunicacion', Entrega:'Piezas editoriales' }\r\n },\r\n {\r\n title:'Aura digital',\r\n eyebrow:'Sistema grafico',\r\n description:'Desarrollamos una familia de recursos para redes, presentaciones y comunicacion comercial. Una identidad flexible, con aire, contraste y criterio de aplicacion.',\r\n images:[projectImages.aura, projectImages.aura, projectImages.orbita],\r\n meta:{ Servicio:'Templates', Rol:'Sistema visual', Entrega:'Kit digital' }\r\n },\r\n {\r\n title:'Orbita',\r\n eyebrow:'Campana visual',\r\n description:'Proyecto construido alrededor de movimiento, sintesis y foco. Una comunicacion con pulso propio, pensada para que cada pieza parezca parte de una misma orbita.',\r\n images:[projectImages.orbita, projectImages.aura, projectImages.paula],\r\n meta:{ Servicio:'Campana', Rol:'Direccion creativa', Entrega:'Universo visual' }\r\n },\r\n {\r\n title:'Paula',\r\n eyebrow:'Presencia de marca',\r\n description:'Disenamos una presencia visual simple y reconocible, con foco en claridad, cercania y consistencia. Menos ruido, mas intencion: esa fue la busqueda.',\r\n images:[projectImages.paula, projectImages.orbita, projectImages.aura],\r\n meta:{ Servicio:'Marca digital', Rol:'Diseno grafico', Entrega:'Contenido y piezas' }\r\n },\r\n {\r\n title:'Aura campana',\r\n eyebrow:'Direccion de arte',\r\n description:'Un set de piezas para amplificar identidad sin perder delicadeza. Ajustamos tono, composicion e imagen para que la marca pudiera hablar con mas presencia.',\r\n images:[projectImages.aura, projectImages.paula, projectImages.aura],\r\n meta:{ Servicio:'Direccion de arte', Rol:'Comunicacion visual', Entrega:'Campana modular' }\r\n },\r\n {\r\n title:'Orbita contenidos',\r\n eyebrow:'Contenido digital',\r\n description:'Una serie de contenidos pensada para circular con coherencia: placas, recursos, imagenes y microdecisiones graficas que hacen que la marca se reconozca al toque.',\r\n images:[projectImages.orbita, projectImages.paula, projectImages.orbita],\r\n meta:{ Servicio:'Redes', Rol:'Contenido', Entrega:'Sistema de publicaciones' }\r\n },\r\n {\r\n title:'Paula digital',\r\n eyebrow:'Lanzamiento',\r\n description:'Piezas para presentar una marca con limpieza y caracter. Construimos una narrativa visual directa, ordenada y con suficiente personalidad para no pasar de largo.',\r\n images:[projectImages.paula, projectImages.aura, projectImages.orbita],\r\n meta:{ Servicio:'Lanzamiento', Rol:'Paid y editorial', Entrega:'Piezas digitales' }\r\n }\r\n ];\r\n\r\n const modalClose = modalElement.querySelector('.mica-project-modal__close');\r\n\r\n function renderProject(project){\r\n modalEyebrow.textContent = project.eyebrow;\r\n modalTitle.textContent = project.title;\r\n modalDescription.textContent = project.description;\r\n modalMeta.innerHTML = Object.entries(project.meta)\r\n .map(([term, description]) => `<div><dt>${term}<\/dt><dd>${description}<\/dd><\/div>`)\r\n .join('');\r\n modalGallery.innerHTML = project.images\r\n .map((src, index) => `<img decoding=\"async\" src=\"${src}\" alt=\"${project.title} imagen ${index + 1}\" loading=\"lazy\">`)\r\n .join('');\r\n }\r\n\r\n function animateModalIn(){\r\n if(!window.anime) return;\r\n\r\n anime.remove('.mica-project-modal .modal-content, .mica-project-modal__copy > *, .mica-project-modal__gallery img');\r\n anime.set('.mica-project-modal .modal-content', { opacity:0 });\r\n anime.set('.mica-project-modal__copy > *', { opacity:0, translateY:24 });\r\n anime.set('.mica-project-modal__gallery img', { opacity:0, translateY:34, scale:1.025 });\r\n\r\n anime({\r\n targets:'.mica-project-modal .modal-content',\r\n opacity:[0, 1],\r\n duration:420,\r\n easing:'easeOutQuad'\r\n });\r\n\r\n anime({\r\n targets:'.mica-project-modal__copy > *',\r\n opacity:[0, 1],\r\n translateY:[24, 0],\r\n delay:anime.stagger(70, { start:120 }),\r\n duration:780,\r\n easing:'cubicBezier(.22,1,.36,1)'\r\n });\r\n\r\n anime({\r\n targets:'.mica-project-modal__gallery img',\r\n opacity:[0, 1],\r\n translateY:[34, 0],\r\n scale:[1.025, 1],\r\n delay:anime.stagger(90, { start:180 }),\r\n duration:920,\r\n easing:'cubicBezier(.22,1,.36,1)'\r\n });\r\n }\r\n\r\n function openModal(){\r\n modalElement.classList.add('is-open');\r\n modalElement.removeAttribute('aria-hidden');\r\n document.body.classList.add('mica-project-modal-open');\r\n animateModalIn();\r\n }\r\n\r\n function closeModal(){\r\n if(window.anime){\r\n anime.remove('.mica-project-modal .modal-content');\r\n anime({\r\n targets:'.mica-project-modal .modal-content',\r\n opacity:[1, 0],\r\n translateY:[0, 10],\r\n duration:260,\r\n easing:'easeOutQuad',\r\n complete:() => {\r\n modalElement.classList.remove('is-open');\r\n modalElement.setAttribute('aria-hidden', 'true');\r\n document.body.classList.remove('mica-project-modal-open');\r\n anime.set('.mica-project-modal .modal-content', { opacity:1, translateY:0 });\r\n }\r\n });\r\n return;\r\n }\r\n\r\n modalElement.classList.remove('is-open');\r\n modalElement.setAttribute('aria-hidden', 'true');\r\n document.body.classList.remove('mica-project-modal-open');\r\n }\r\n\r\n projectCards.forEach(card => {\r\n const openProject = () => {\r\n const index = Number(card.dataset.projectIndex);\r\n const project = projects[index];\r\n if(!project) return;\r\n\r\n renderProject(project);\r\n\r\n openModal();\r\n };\r\n\r\n card.addEventListener('click', openProject);\r\n card.addEventListener('keydown', event => {\r\n if(event.key === 'Enter' || event.key === ' '){\r\n event.preventDefault();\r\n openProject();\r\n }\r\n });\r\n });\r\n\r\n if(modalClose){\r\n modalClose.addEventListener('click', closeModal);\r\n }\r\n\r\n modalElement.addEventListener('click', event => {\r\n if(event.target === modalElement){\r\n closeModal();\r\n }\r\n });\r\n\r\n document.addEventListener('keydown', event => {\r\n if(event.key === 'Escape' && modalElement.classList.contains('is-open')){\r\n closeModal();\r\n }\r\n });\r\n});\r\n<\/script>\r\n\r\n<!-- ========================= -->\r\n<!-- PROJECTS GSAP JS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- MI HISTORIA JS - INICIO -->\r\n<!-- Requiere GSAP + ScrollTrigger para revelar texto con scroll. -->\r\n<!-- ========================= -->\r\n\r\n<!-- SCROLLTRIGGER -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<script>\r\n(() => {\r\n\r\n let attempts = 0;\r\n\r\n function initMiHistoria(){\r\n attempts += 1;\r\n\r\n if(!window.gsap || !window.ScrollTrigger){\r\n if(attempts < 30){\r\n window.setTimeout(initMiHistoria, 100);\r\n }\r\n return;\r\n }\r\n\r\n const philosophySection = document.querySelector('.philosophy-section');\r\n const readingSpans = gsap.utils.toArray('.philosophy-section .philosophy-section__reading-text > span');\r\n const philosophyButton = document.querySelector('.philosophy-section .philosophy-section__button');\r\n\r\n if(!philosophySection || !readingSpans.length){\r\n if(attempts < 30){\r\n window.setTimeout(initMiHistoria, 100);\r\n }\r\n return;\r\n }\r\n\r\n if(philosophySection.dataset.miHistoriaReady === 'true') return;\r\n philosophySection.dataset.miHistoriaReady = 'true';\r\n\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n readingSpans.forEach(span => {\r\n const text = span.textContent;\r\n const parts = text.split(\/(\\s+)\/);\r\n const fragment = document.createDocumentFragment();\r\n\r\n parts.forEach(part => {\r\n if(!part) return;\r\n\r\n if(\/\\s+\/.test(part)){\r\n fragment.appendChild(document.createTextNode(part));\r\n return;\r\n }\r\n\r\n const word = document.createElement('span');\r\n word.className = 'philosophy-section__reading-word';\r\n word.textContent = part;\r\n fragment.appendChild(word);\r\n });\r\n\r\n span.textContent = '';\r\n span.appendChild(fragment);\r\n });\r\n\r\n const readingWords = gsap.utils.toArray('.philosophy-section .philosophy-section__reading-word');\r\n\r\n gsap.set(readingWords, {\r\n color:'rgba(0,0,0,.22)',\r\n opacity:.32,\r\n filter:'blur(5px)',\r\n y:18\r\n });\r\n\r\n const timeline = gsap.timeline({\r\n scrollTrigger:{\r\n trigger:philosophySection,\r\n start:'top top',\r\n end:() => `+=${Math.max(window.innerHeight * 1.6, philosophySection.offsetHeight - window.innerHeight)}`,\r\n pin:'.philosophy-section__inner',\r\n pinSpacing:false,\r\n anticipatePin:1,\r\n scrub:true,\r\n invalidateOnRefresh:true\r\n }\r\n });\r\n\r\n timeline.to(readingWords, {\r\n color:'#000',\r\n opacity:1,\r\n filter:'blur(0px)',\r\n y:0,\r\n duration:1,\r\n stagger:.08,\r\n ease:'none'\r\n });\r\n\r\n if(philosophyButton){\r\n timeline.to(philosophyButton, {\r\n opacity:1,\r\n y:0,\r\n duration:1,\r\n ease:'power2.out'\r\n }, '>');\r\n }\r\n\r\n timeline.to({}, { duration:.45 });\r\n\r\n ScrollTrigger.refresh();\r\n }\r\n\r\n if(document.readyState === 'loading'){\r\n document.addEventListener('DOMContentLoaded', initMiHistoria);\r\n }else{\r\n initMiHistoria();\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n if(window.ScrollTrigger) ScrollTrigger.refresh();\r\n });\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- ========================= -->\r\n<!-- MI HISTORIA JS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- EDITORIAL STORY JS - INICIO -->\r\n<!-- Requiere GSAP + ScrollTrigger para parallax editorial. -->\r\n<!-- ========================= -->\r\n\r\n<script>\r\n(() => {\r\n\r\n let attempts = 0;\r\n const editorialMobileQuery = window.matchMedia('(max-width: 768px)');\r\n\r\n function resetEditorialMobileStyles(){\r\n if(!editorialMobileQuery.matches) return;\r\n\r\n document\r\n .querySelectorAll('.editorial-story .gsap-float, .editorial-story .img-parallax')\r\n .forEach(el => {\r\n el.style.transform = '';\r\n el.style.rotate = '';\r\n el.style.scale = '';\r\n });\r\n }\r\n\r\n function initEditorialStoryGSAP(){\r\n attempts += 1;\r\n\r\n if(!window.gsap || !window.ScrollTrigger){\r\n if(attempts < 30){\r\n window.setTimeout(initEditorialStoryGSAP, 100);\r\n }\r\n return;\r\n }\r\n\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n const section = document.querySelector('.editorial-story');\r\n if(!section){\r\n if(attempts < 30){\r\n window.setTimeout(initEditorialStoryGSAP, 100);\r\n }\r\n return;\r\n }\r\n\r\n if(section.dataset.editorialReady === 'true') return;\r\n section.dataset.editorialReady = 'true';\r\n\r\n const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n const isMobile = window.matchMedia('(max-width: 768px)').matches;\r\n\r\n if(reduceMotion || isMobile){\r\n section.querySelectorAll('.gsap-float, .img-parallax').forEach(el => {\r\n el.style.transform = '';\r\n el.style.rotate = '';\r\n el.style.scale = '';\r\n });\r\n return;\r\n }\r\n\r\n const floats = section.querySelectorAll('.gsap-float');\r\n\r\n floats.forEach(el => {\r\n const y = Number(el.dataset.y || 0);\r\n const scrub = Number(el.dataset.scrub || 1.4);\r\n const rotate = Number(el.dataset.rotate || 0);\r\n\r\n gsap.fromTo(el,\r\n {\r\n y:y * -.45,\r\n rotate:rotate * -.4,\r\n force3D:true\r\n },\r\n {\r\n y:y,\r\n rotate:rotate,\r\n ease:'none',\r\n force3D:true,\r\n scrollTrigger:{\r\n trigger:section,\r\n start:'top bottom',\r\n end:'bottom top',\r\n scrub:scrub,\r\n invalidateOnRefresh:true\r\n }\r\n }\r\n );\r\n });\r\n\r\n const images = section.querySelectorAll('.img-parallax');\r\n\r\n images.forEach(img => {\r\n const y = Number(img.dataset.y || 0);\r\n const scrub = Number(img.dataset.scrub || 1.8);\r\n\r\n gsap.fromTo(img,\r\n {\r\n y:y * -.5,\r\n scale:1.12,\r\n force3D:true\r\n },\r\n {\r\n y:y,\r\n scale:1.08,\r\n ease:'none',\r\n force3D:true,\r\n scrollTrigger:{\r\n trigger:section,\r\n start:'top bottom',\r\n end:'bottom top',\r\n scrub:scrub,\r\n invalidateOnRefresh:true\r\n }\r\n }\r\n );\r\n });\r\n\r\n const button = section.querySelector('.story-btn');\r\n\r\n if(button){\r\n button.addEventListener('mouseenter', () => {\r\n gsap.to(button, {\r\n y:-4,\r\n scale:1.025,\r\n duration:.45,\r\n ease:'power3.out'\r\n });\r\n });\r\n\r\n button.addEventListener('mouseleave', () => {\r\n gsap.to(button, {\r\n y:0,\r\n scale:1,\r\n duration:.45,\r\n ease:'power3.out'\r\n });\r\n });\r\n }\r\n\r\n ScrollTrigger.refresh();\r\n }\r\n\r\n if(document.readyState === 'loading'){\r\n document.addEventListener('DOMContentLoaded', () => {\r\n resetEditorialMobileStyles();\r\n initEditorialStoryGSAP();\r\n });\r\n }else{\r\n resetEditorialMobileStyles();\r\n initEditorialStoryGSAP();\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n resetEditorialMobileStyles();\r\n window.setTimeout(initEditorialStoryGSAP, 300);\r\n if(window.ScrollTrigger) ScrollTrigger.refresh();\r\n });\r\n\r\n window.addEventListener('resize', resetEditorialMobileStyles);\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- ========================= -->\r\n<!-- EDITORIAL STORY JS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- FLOATING PROCESS JS - INICIO -->\r\n<!-- ========================= -->\r\n\r\n<script>\r\n(() => {\r\n\r\n const floatingProcess = document.querySelector('.floating-process');\r\n const fixedBg = document.querySelector('.floating-process .fixed-bg');\r\n const bgLines = document.querySelector('.floating-process .bg-lines');\r\n const cards = document.querySelectorAll('.floating-process .process-card');\r\n\r\n if(!floatingProcess || !fixedBg || !cards.length) return;\r\n\r\n const clamp = (value, min, max) => Math.min(Math.max(value, min), max);\r\n\r\n function getSectionProgress(){\r\n const rect = floatingProcess.getBoundingClientRect();\r\n const total = Math.max(rect.height - window.innerHeight, 1);\r\n return clamp(-rect.top \/ total, 0, 1);\r\n }\r\n\r\n function toggleSVG(){\r\n const rect = floatingProcess.getBoundingClientRect();\r\n\r\n const isVisible =\r\n rect.top < window.innerHeight &&\r\n rect.bottom > 0;\r\n\r\n fixedBg.classList.toggle('visible', isVisible);\r\n }\r\n\r\n function animateScroll(){\r\n const sectionProgress = getSectionProgress();\r\n\r\n if(bgLines){\r\n bgLines.style.transform = `\r\n translate3d(0, ${sectionProgress * -120}px, 0)\r\n scale(${1 + sectionProgress * .04})\r\n `;\r\n }\r\n\r\n cards.forEach(card => {\r\n const rect = card.getBoundingClientRect();\r\n const cardCenter = rect.top + rect.height \/ 2;\r\n const viewportCenter = window.innerHeight \/ 2;\r\n\r\n const distance = cardCenter - viewportCenter;\r\n const normalized = clamp(distance \/ window.innerHeight, -1, 1);\r\n\r\n const progress = clamp(\r\n 1 - Math.abs(distance) \/ (window.innerHeight * .65),\r\n 0,\r\n 1\r\n );\r\n\r\n const content = card.querySelector('.content');\r\n const number = card.querySelector('.number');\r\n\r\n card.style.opacity = 0.18 + progress * .82;\r\n card.style.transform = `\r\n translate3d(0, ${normalized * 90}px, 0)\r\n scale(${.96 + progress * .04})\r\n `;\r\n\r\n if(content){\r\n content.style.transform = `\r\n translate3d(0, ${normalized * -55}px, 0)\r\n `;\r\n }\r\n\r\n if(number){\r\n number.style.transform = `\r\n translate3d(0, calc(${normalized * 42}px + var(--process-number-offset-y, 0px)), 0)\r\n `;\r\n number.style.opacity = 0.08 + progress * .16;\r\n }\r\n\r\n card.classList.toggle('active', progress > .45);\r\n });\r\n\r\n toggleSVG();\r\n requestAnimationFrame(animateScroll);\r\n }\r\n\r\n animateScroll();\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- ========================= -->\r\n<!-- FLOATING PROCESS JS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- CURVED REVEAL JS - INICIO -->\r\n<!-- ========================= -->\r\n\r\n<script>\r\n(() => {\r\n\r\n const clamp = (value, min, max) => Math.min(Math.max(value, min), max);\r\n\r\n function initCurvedReveal(){\r\n const section = document.querySelector('.curve-section');\r\n if(!section) return;\r\n\r\n const sticky = section.querySelector('.curve-sticky');\r\n const content = section.querySelector('.curve-content');\r\n const mask = section.querySelector('.image-mask');\r\n const image = section.querySelector('.hero-image');\r\n const path = section.querySelector('#travelPath');\r\n const titleDynamic = section.querySelector('.curve-title-dynamic');\r\n const copyDynamic = section.querySelector('.curve-copy-dynamic');\r\n const copyAccent = section.querySelector('.curve-copy-accent');\r\n\r\n if(!sticky || !mask || !image || !path) return;\r\n if(section.dataset.curvedReady === 'true') return;\r\n\r\n section.dataset.curvedReady = 'true';\r\n\r\n const imageEndProgress = .72;\r\n const curveMobileQuery = window.matchMedia('(max-width: 768px)');\r\n\r\n function animate(){\r\n const rect = section.getBoundingClientRect();\r\n const total = Math.max(section.offsetHeight - window.innerHeight, 1);\r\n\r\n const rawProgress = -rect.top \/ total;\r\n const progress = clamp(rawProgress, 0, 1);\r\n const stickyProgress = clamp(progress \/ imageEndProgress, 0, 1);\r\n const easedProgress = 1 - Math.pow(1 - stickyProgress, 2.8);\r\n const isBefore = rect.top > 0;\r\n const isDuring = rect.top <= 0 && progress < 1;\r\n const isAfter = progress >= 1;\r\n const releaseTop = total;\r\n\r\n sticky.style.setProperty('--curve-release-top', `${releaseTop}px`);\r\n sticky.classList.toggle('is-fixed', isDuring);\r\n sticky.classList.toggle('is-ended', isAfter);\r\n\r\n if(isBefore){\r\n sticky.classList.remove('is-fixed', 'is-ended');\r\n }\r\n\r\n const width = 128 - easedProgress * 28;\r\n const height = 46 + easedProgress * 54;\r\n const radius = 50 - easedProgress * 50;\r\n const bottom = -70 + easedProgress * 70;\r\n const titleColorProgress = clamp((stickyProgress - .12) \/ .42, 0, 1);\r\n\r\n if(titleDynamic){\r\n if(window.gsap){\r\n const titleColor = gsap.utils.interpolate('#100f0f', '#ffffff', titleColorProgress);\r\n titleDynamic.style.setProperty('color', titleColor, 'important');\r\n }else{\r\n titleDynamic.style.setProperty(\r\n 'color',\r\n titleColorProgress > .5 ? '#ffffff' : '#100f0f',\r\n 'important'\r\n );\r\n }\r\n }\r\n\r\n if(copyDynamic){\r\n if(window.gsap){\r\n const copyColor = gsap.utils.interpolate('#646464', '#f6f0e2', titleColorProgress);\r\n const accentColor = gsap.utils.interpolate('#88a79d', '#f6f0e2', titleColorProgress);\r\n gsap.set(copyDynamic, { color:copyColor });\r\n if(copyAccent) gsap.set(copyAccent, { color:accentColor });\r\n }else{\r\n copyDynamic.style.color = titleColorProgress > .5 ? '#f6f0e2' : '#646464';\r\n if(copyAccent) copyAccent.style.color = titleColorProgress > .5 ? '#f6f0e2' : '#88a79d';\r\n }\r\n }\r\n\r\n if(content){\r\n content.style.opacity = 1;\r\n content.style.transform = 'translate3d(0, 0, 0)';\r\n }\r\n\r\n if(curveMobileQuery.matches){\r\n mask.style.width = '100vw';\r\n mask.style.height = '100svh';\r\n mask.style.bottom = '0';\r\n mask.style.borderRadius = '0';\r\n }else{\r\n mask.style.width = `${width}vw`;\r\n mask.style.height = `${height}vh`;\r\n mask.style.bottom = `${bottom}vh`;\r\n mask.style.borderRadius =\r\n `${radius}% ${radius}% 0 0 \/\r\n ${radius * 2}% ${radius * 2}% 0 0`;\r\n }\r\n\r\n image.style.transform =\r\n curveMobileQuery.matches\r\n ? 'none'\r\n : `scale(${1.1 + easedProgress * .08})\r\n translateY(${easedProgress * -40}px)`;\r\n\r\n requestAnimationFrame(animate);\r\n }\r\n\r\n animate();\r\n }\r\n\r\n if(document.readyState === 'loading'){\r\n document.addEventListener('DOMContentLoaded', initCurvedReveal);\r\n }else{\r\n initCurvedReveal();\r\n }\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- ========================= -->\r\n<!-- CURVED REVEAL JS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- ORGANIC EDITORIAL CARDS JS - INICIO -->\r\n<!-- ========================= -->\r\n\r\n<script>\r\n(() => {\r\n\r\n function initOrganicEditorial(){\r\n const section = document.querySelector('.organic-editorial');\r\n const wraps = document.querySelectorAll('.organic-editorial .blob-wrap');\r\n\r\n if(!section || !wraps.length) return;\r\n if(section.dataset.organicReady === 'true') return;\r\n\r\n section.dataset.organicReady = 'true';\r\n\r\n function animate(){\r\n wraps.forEach(wrap => {\r\n const speed = parseFloat(wrap.dataset.speed || 0);\r\n const rect = wrap.getBoundingClientRect();\r\n const center = window.innerHeight * .5;\r\n const distance = rect.top + rect.height * .5 - center;\r\n const floatY = distance * speed * -1.4;\r\n const img = wrap.querySelector('img');\r\n const imageOffset = distance * -.12;\r\n\r\n wrap.style.transform =\r\n `translate3d(0, ${floatY}px, 0)`;\r\n\r\n if(img){\r\n img.style.transform =\r\n `scale(1.18) translate3d(0, ${imageOffset}px, 0)`;\r\n }\r\n });\r\n\r\n requestAnimationFrame(animate);\r\n }\r\n\r\n animate();\r\n }\r\n\r\n if(document.readyState === 'loading'){\r\n document.addEventListener('DOMContentLoaded', initOrganicEditorial);\r\n }else{\r\n initOrganicEditorial();\r\n }\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- ========================= -->\r\n<!-- ORGANIC EDITORIAL CARDS JS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- CONTACTO COMBINADO JS - INICIO -->\r\n<!-- ========================= -->\r\n\r\n<script>\r\n(() => {\r\n\r\n function initContactForm(){\r\n const contactSection = document.querySelector('.mica-contact-combined');\r\n if(!contactSection) return;\r\n if(contactSection.dataset.contactReady === 'true') return;\r\n\r\n const form = contactSection.querySelector('form');\r\n if(!form) return;\r\n\r\n contactSection.dataset.contactReady = 'true';\r\n\r\n const bg = contactSection.querySelector('.mica-contact-bg');\r\n let currentY = 0;\r\n let targetY = 0;\r\n\r\n function calculateParallax(){\r\n if(!bg) return;\r\n\r\n const rect = contactSection.getBoundingClientRect();\r\n const sectionCenter = rect.top + rect.height \/ 2;\r\n const viewportCenter = window.innerHeight \/ 2;\r\n const distance = sectionCenter - viewportCenter;\r\n\r\n targetY = Math.max(-90, Math.min(90, distance * -0.12));\r\n }\r\n\r\n function renderParallax(){\r\n if(bg){\r\n currentY += (targetY - currentY) * .08;\r\n bg.style.transform =\r\n `translate3d(0, ${currentY}px, 0) scale(1.12)`;\r\n }\r\n\r\n requestAnimationFrame(renderParallax);\r\n }\r\n\r\n calculateParallax();\r\n renderParallax();\r\n window.addEventListener('scroll', calculateParallax, { passive:true });\r\n window.addEventListener('resize', calculateParallax);\r\n\r\n form.addEventListener('submit', event => {\r\n event.preventDefault();\r\n\r\n const nombre = contactSection.querySelector('#nombre').value.trim();\r\n const email = contactSection.querySelector('#email').value.trim();\r\n const servicio = contactSection.querySelector('#servicio').value.trim();\r\n const mensaje = contactSection.querySelector('#mensaje').value.trim();\r\n\r\n if(!nombre || !email || !servicio || !mensaje){\r\n alert('Por favor completá todos los campos.');\r\n return;\r\n }\r\n\r\n const contactoEmail = 'hola@elestudio.com';\r\n const texto =\r\n`Hola Elestudio, quisiera consultar por un proyecto.\r\n\r\nNombre: ${nombre}\r\nCorreo electrónico: ${email}\r\nServicio de interés: ${servicio}\r\n\r\nMensaje:\r\n${mensaje}\r\n\r\nEnviado desde el formulario web.`;\r\n\r\n const url = `mailto:${contactoEmail}?subject=${encodeURIComponent('Consulta desde la web')}&body=${encodeURIComponent(texto)}`;\r\n\r\n window.location.href = url;\r\n form.reset();\r\n });\r\n }\r\n\r\n if(document.readyState === 'loading'){\r\n document.addEventListener('DOMContentLoaded', initContactForm);\r\n }else{\r\n initContactForm();\r\n }\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- ========================= -->\r\n<!-- CONTACTO COMBINADO JS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- FOOTER ELEGANTE JS - INICIO -->\r\n<!-- ========================= -->\r\n\r\n<script>\r\n(() => {\r\n\r\n function initFooterWhatsapp(){\r\n const footer = document.querySelector('.ethereal-footer');\r\n const form = document.querySelector('.footer-whatsapp-form');\r\n\r\n if(!footer || !form) return;\r\n if(footer.dataset.footerReady === 'true') return;\r\n\r\n footer.dataset.footerReady = 'true';\r\n\r\n const cursorAura = footer.querySelector('.footer-cursor-aura');\r\n let auraX = 0;\r\n let auraY = 0;\r\n let targetAuraX = 0;\r\n let targetAuraY = 0;\r\n let auraVisible = false;\r\n\r\n function renderCursorAura(){\r\n if(cursorAura){\r\n auraX += (targetAuraX - auraX) * .12;\r\n auraY += (targetAuraY - auraY) * .12;\r\n\r\n cursorAura.style.opacity = auraVisible ? '1' : '0';\r\n cursorAura.style.transform =\r\n `translate3d(${auraX - 210}px, ${auraY - 210}px, 0)`;\r\n }\r\n\r\n requestAnimationFrame(renderCursorAura);\r\n }\r\n\r\n if(cursorAura){\r\n footer.addEventListener('pointermove', event => {\r\n const rect = footer.getBoundingClientRect();\r\n\r\n targetAuraX = event.clientX - rect.left;\r\n targetAuraY = event.clientY - rect.top;\r\n auraVisible = true;\r\n });\r\n\r\n footer.addEventListener('pointerleave', () => {\r\n auraVisible = false;\r\n });\r\n\r\n renderCursorAura();\r\n }\r\n\r\n form.addEventListener('submit', event => {\r\n event.preventDefault();\r\n\r\n const nameInput = footer.querySelector('#footerName');\r\n const name = nameInput ? nameInput.value.trim() : '';\r\n\r\n const text =\r\n`Hola Elestudio\r\n\r\nMi nombre es ${name || '___'} y quisiera recibir información para trabajar mi marca.`;\r\n\r\n const url =\r\n `mailto:hola@elestudio.com?subject=${encodeURIComponent('Consulta desde la web')}&body=${encodeURIComponent(text)}`;\r\n\r\n window.location.href = url;\r\n });\r\n }\r\n\r\n if(document.readyState === 'loading'){\r\n document.addEventListener('DOMContentLoaded', initFooterWhatsapp);\r\n }else{\r\n initFooterWhatsapp();\r\n }\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- ========================= -->\r\n<!-- FOOTER ELEGANTE JS - FIN -->\r\n<!-- ========================= -->\r\n\r\n<!-- ========================= -->\r\n<!-- CONTACTO + FOOTER GSAP APPEAR JS - INICIO -->\r\n<!-- ========================= -->\r\n\r\n<script>\r\n(() => {\r\n\r\n function initContactFooterAppear(){\r\n if(!window.gsap || !window.ScrollTrigger) return;\r\n\r\n const contactFooterContactSection = document.querySelector('.mica-contact-combined');\r\n const contactFooterFooterSection = document.querySelector('.ethereal-footer');\r\n\r\n if(!contactFooterContactSection && !contactFooterFooterSection) return;\r\n\r\n const contactFooterHasReadySection =\r\n contactFooterContactSection?.dataset.contactFooterAppearReady === 'true' ||\r\n contactFooterFooterSection?.dataset.contactFooterAppearReady === 'true';\r\n\r\n if(contactFooterHasReadySection) return;\r\n\r\n if(contactFooterContactSection) contactFooterContactSection.dataset.contactFooterAppearReady = 'true';\r\n if(contactFooterFooterSection) contactFooterFooterSection.dataset.contactFooterAppearReady = 'true';\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n const contactFooterTriggers = [];\r\n\r\n if(contactFooterContactSection){\r\n const contactFooterContactItems = [\r\n contactFooterContactSection.querySelector('.mica-contact-info h3'),\r\n contactFooterContactSection.querySelector('.mica-contact-info p'),\r\n contactFooterContactSection.querySelector('.mica-contact-info ul'),\r\n contactFooterContactSection.querySelector('.mica-contact-quote'),\r\n contactFooterContactSection.querySelector('.mica-whatsapp-btn'),\r\n contactFooterContactSection.querySelector('.mica-contact-form')\r\n ].filter(Boolean);\r\n\r\n gsap.set(contactFooterContactItems, {\r\n opacity:0,\r\n y:42,\r\n filter:'blur(10px)'\r\n });\r\n\r\n const contactFooterContactTimeline = gsap.timeline({\r\n scrollTrigger:{\r\n trigger:contactFooterContactSection,\r\n start:'top 68%',\r\n once:true\r\n }\r\n })\r\n .to(contactFooterContactItems, {\r\n opacity:1,\r\n y:0,\r\n filter:'blur(0px)',\r\n duration:1,\r\n stagger:.11,\r\n ease:'power3.out'\r\n });\r\n\r\n contactFooterTriggers.push(contactFooterContactTimeline.scrollTrigger);\r\n\r\n gsap.fromTo(\r\n contactFooterContactSection.querySelectorAll('.contact-icon'),\r\n { scale:.65, opacity:0, rotate:-18 },\r\n {\r\n scale:1,\r\n opacity:1,\r\n rotate:0,\r\n duration:.8,\r\n stagger:.08,\r\n ease:'back.out(1.8)',\r\n scrollTrigger:{\r\n trigger:contactFooterContactSection,\r\n start:'top 58%',\r\n once:true\r\n }\r\n }\r\n );\r\n }\r\n\r\n if(contactFooterFooterSection){\r\n const contactFooterFooterItems = [\r\n contactFooterFooterSection.querySelector('.footer-eyebrow'),\r\n contactFooterFooterSection.querySelector('.footer-title'),\r\n contactFooterFooterSection.querySelector('.footer-text'),\r\n contactFooterFooterSection.querySelector('.footer-whatsapp-form'),\r\n contactFooterFooterSection.querySelector('.privacy-text'),\r\n contactFooterFooterSection.querySelector('.sitemap-label'),\r\n contactFooterFooterSection.querySelector('.footer-links'),\r\n contactFooterFooterSection.querySelector('.footer-brand'),\r\n contactFooterFooterSection.querySelector('.copyright'),\r\n contactFooterFooterSection.querySelector('.footer-contact-card')\r\n ].filter(Boolean);\r\n\r\n gsap.set(contactFooterFooterItems, {\r\n opacity:0,\r\n y:46,\r\n filter:'blur(12px)'\r\n });\r\n\r\n gsap.fromTo(\r\n contactFooterFooterSection.querySelector('.footer-container'),\r\n {\r\n y:70,\r\n scale:.97,\r\n opacity:.72\r\n },\r\n {\r\n y:0,\r\n scale:1,\r\n opacity:1,\r\n duration:1.15,\r\n ease:'power3.out',\r\n scrollTrigger:{\r\n trigger:contactFooterFooterSection,\r\n start:'top 78%',\r\n once:true\r\n }\r\n }\r\n );\r\n\r\n const contactFooterFooterTimeline = gsap.timeline({\r\n scrollTrigger:{\r\n trigger:contactFooterFooterSection,\r\n start:'top 68%',\r\n once:true\r\n }\r\n })\r\n .to(contactFooterFooterItems, {\r\n opacity:1,\r\n y:0,\r\n filter:'blur(0px)',\r\n duration:.95,\r\n stagger:.08,\r\n ease:'power3.out'\r\n });\r\n\r\n contactFooterTriggers.push(contactFooterFooterTimeline.scrollTrigger);\r\n\r\n gsap.fromTo(\r\n contactFooterFooterSection.querySelectorAll('.footer-techline, .footer-node'),\r\n { opacity:0, scaleX:.4 },\r\n {\r\n opacity:1,\r\n scaleX:1,\r\n duration:1,\r\n stagger:.12,\r\n ease:'power2.out',\r\n scrollTrigger:{\r\n trigger:contactFooterFooterSection,\r\n start:'top 82%',\r\n once:true\r\n }\r\n }\r\n );\r\n }\r\n\r\n window.setTimeout(() => {\r\n contactFooterTriggers.forEach(trigger => {\r\n if(trigger) trigger.refresh();\r\n });\r\n }, 80);\r\n }\r\n\r\n if(document.readyState === 'loading'){\r\n document.addEventListener('DOMContentLoaded', () => {\r\n setTimeout(initContactFooterAppear, 250);\r\n });\r\n }else{\r\n setTimeout(initContactFooterAppear, 250);\r\n }\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- ========================= -->\r\n<!-- CONTACTO + FOOTER GSAP APPEAR JS - FIN -->\r\n<!-- ========================= -->\r\n\r\n <a\r\n href=\"https:\/\/wa.me\/5491164827391?text=Hola%20Elestudio%2C%20quiero%20hacer%20una%20consulta%20desde%20la%20web.\"\r\n class=\"floating-whatsapp\"\r\n id=\"floatingWhatsapp\"\r\n rel=\"noopener\"\r\n target=\"_blank\"\r\n aria-label=\"Contactar a Elestudio por WhatsApp\"\r\n >\r\n <i class=\"fa-brands fa-whatsapp\" aria-hidden=\"true\"><\/i>\r\n <span class=\"floating-whatsapp__label\">Contacto<\/span>\r\n <span class=\"floating-whatsapp__dot\"><\/span>\r\n <\/a>\r\n\r\n <!-- BOOTSTRAP JS -->\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.8\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n\r\n <!-- ========================= -->\r\n <!-- NAVBAR JS - INICIO -->\r\n <!-- ========================= -->\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n\r\n const navbar = document.getElementById('mainNav');\r\n if(!navbar) return;\r\n\r\n const heroSection = document.querySelector('.camila-hero-300vh');\r\n const navbarLogo = navbar.querySelector('.navbar-brand');\r\n const navbarToggler = navbar.querySelector('.navbar-toggler');\r\n const navbarCollapse = document.getElementById('navbarNav');\r\n const navLinks = document.querySelectorAll('#navbarNav .nav-link');\r\n const animatedNavbarItems = [\r\n navbar.querySelector('.navbar-brand'),\r\n navbar.querySelector('.navbar-collapse')\r\n ].filter(Boolean);\r\n let isHeroEnded = navbar.classList.contains('hero-ended');\r\n let hasNavbarStateInitialized = false;\r\n\r\n updateNavbarState();\r\n\r\n window.addEventListener('scroll', updateNavbarState, { passive:true });\r\n window.addEventListener('resize', updateNavbarState);\r\n\r\n if(navbarLogo){\r\n navbarLogo.addEventListener('click', event => {\r\n event.preventDefault();\r\n window.scrollTo({\r\n top:0,\r\n behavior:'smooth'\r\n });\r\n });\r\n }\r\n\r\n if(window.bootstrap && navbarToggler && navbarCollapse){\r\n const bsCollapse = bootstrap.Collapse.getOrCreateInstance(navbarCollapse, {\r\n toggle:false\r\n });\r\n\r\n navbarToggler.addEventListener('click', event => {\r\n event.preventDefault();\r\n bsCollapse.toggle();\r\n });\r\n\r\n navbarCollapse.addEventListener('shown.bs.collapse', () => {\r\n navbarToggler.setAttribute('aria-expanded', 'true');\r\n });\r\n\r\n navbarCollapse.addEventListener('hidden.bs.collapse', () => {\r\n navbarToggler.setAttribute('aria-expanded', 'false');\r\n });\r\n }\r\n\r\n navLinks.forEach(link => {\r\n link.addEventListener('click', () => {\r\n if(window.bootstrap && navbarCollapse){\r\n const bsCollapse = bootstrap.Collapse.getOrCreateInstance(navbarCollapse, {\r\n toggle:false\r\n });\r\n if(bsCollapse) bsCollapse.hide();\r\n }\r\n });\r\n });\r\n\r\n function updateNavbarState(){\r\n const heroEnd = heroSection\r\n ? heroSection.offsetTop + heroSection.offsetHeight - window.innerHeight\r\n : window.innerHeight;\r\n const scrollLimit = Math.max(heroEnd - 8, 0);\r\n\r\n const shouldEndHero = window.scrollY > scrollLimit;\r\n\r\n if(!hasNavbarStateInitialized){\r\n navbar.classList.toggle('scrolled', shouldEndHero);\r\n navbar.classList.toggle('hero-ended', shouldEndHero);\r\n isHeroEnded = shouldEndHero;\r\n hasNavbarStateInitialized = true;\r\n return;\r\n }\r\n\r\n if(shouldEndHero === isHeroEnded) return;\r\n\r\n animateNavbarLayoutChange(shouldEndHero);\r\n isHeroEnded = shouldEndHero;\r\n }\r\n\r\n function animateNavbarLayoutChange(shouldEndHero){\r\n const firstRects = animatedNavbarItems.map(item => item.getBoundingClientRect());\r\n\r\n navbar.classList.toggle('scrolled', shouldEndHero);\r\n navbar.classList.toggle('hero-ended', shouldEndHero);\r\n\r\n const lastRects = animatedNavbarItems.map(item => item.getBoundingClientRect());\r\n\r\n animatedNavbarItems.forEach((item, index) => {\r\n const first = firstRects[index];\r\n const last = lastRects[index];\r\n const deltaX = first.left - last.left;\r\n const deltaY = first.top - last.top;\r\n\r\n item.style.transform = `translate3d(${deltaX}px, ${deltaY}px, 0)`;\r\n item.style.transition = 'none';\r\n\r\n requestAnimationFrame(() => {\r\n item.style.transition = 'transform 1.35s cubic-bezier(.22,1,.36,1)';\r\n item.style.transform = 'translate3d(0, 0, 0)';\r\n });\r\n\r\n window.setTimeout(() => {\r\n item.style.transition = '';\r\n item.style.transform = '';\r\n }, 1400);\r\n });\r\n }\r\n\r\n });\r\n <\/script>\r\n\r\n <!-- ========================= -->\r\n <!-- NAVBAR JS - FIN -->\r\n <!-- ========================= -->\r\n\r\n <!-- ========================= -->\r\n <!-- FLOATING WHATSAPP JS - INICIO -->\r\n <!-- ========================= -->\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const floatingWhatsapp = document.getElementById('floatingWhatsapp');\r\n\r\n if(!floatingWhatsapp) return;\r\n\r\n let ticking = false;\r\n\r\n updateFloatingWhatsapp();\r\n\r\n window.addEventListener('scroll', requestFloatingWhatsappUpdate, { passive:true });\r\n window.addEventListener('resize', requestFloatingWhatsappUpdate);\r\n\r\n function requestFloatingWhatsappUpdate(){\r\n if(ticking) return;\r\n\r\n ticking = true;\r\n\r\n requestAnimationFrame(() => {\r\n updateFloatingWhatsapp();\r\n ticking = false;\r\n });\r\n }\r\n\r\n function updateFloatingWhatsapp(){\r\n floatingWhatsapp.classList.toggle(\r\n 'is-visible',\r\n window.scrollY > window.innerHeight\r\n );\r\n }\r\n });\r\n <\/script>\r\n\r\n <!-- ========================= -->\r\n <!-- FLOATING WHATSAPP JS - FIN -->\r\n <!-- ========================= -->\r\n\r\n <!-- ========================= -->\r\n <!-- SITE LOADER JS - INICIO -->\r\n <!-- ========================= -->\r\n\r\n <script>\r\n (() => {\r\n const loader = document.getElementById('siteLoader');\r\n if(!loader) return;\r\n\r\n let hidden = false;\r\n\r\n function hideLoader(){\r\n if(hidden) return;\r\n hidden = true;\r\n loader.classList.add('is-hidden');\r\n document.body.classList.remove('is-loading');\r\n\r\n window.setTimeout(() => {\r\n loader.remove();\r\n }, 800);\r\n }\r\n\r\n if(document.readyState === 'complete'){\r\n window.setTimeout(hideLoader, 2600);\r\n }else{\r\n window.addEventListener('load', () => {\r\n window.setTimeout(hideLoader, 2600);\r\n }, { once:true });\r\n }\r\n\r\n window.setTimeout(hideLoader, 7000);\r\n })();\r\n <\/script>\r\n\r\n <!-- ========================= -->\r\n <!-- SITE LOADER JS - FIN -->\r\n <!-- ========================= -->\r\n\r\n<\/body>\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Elestudio – Dise\u00f1o y comunicaci\u00f3n • ELESTUDIO • DISEÑO Y COMUNICACIÓN • ELESTUDIO • Cargando elestudio proyectos. acerca de. contacto. ELESTUDIO Diseño y comunicación para marcas con voz propia. Creamos sistemas visuales para marcas, campañas, contenidos y experiencias con mirada integral Unimos concepto, diseño y comunicación. Hacer visible lo que tu marca quiere decir. proyectos. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/elestudio.osidentity.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elestudio.osidentity.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elestudio.osidentity.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elestudio.osidentity.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elestudio.osidentity.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":5,"href":"https:\/\/elestudio.osidentity.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":53,"href":"https:\/\/elestudio.osidentity.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/53"}],"wp:attachment":[{"href":"https:\/\/elestudio.osidentity.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}