{"id":51,"date":"2026-04-20T17:13:15","date_gmt":"2026-04-20T17:13:15","guid":{"rendered":"https:\/\/stoa.cl\/?page_id=51"},"modified":"2026-04-28T20:27:35","modified_gmt":"2026-04-28T20:27:35","slug":"home","status":"publish","type":"page","link":"https:\/\/stoa.cl\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"51\" class=\"elementor elementor-51\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a033baa e-con-full e-flex e-con e-parent\" data-id=\"4a033baa\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-555da238 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"555da238\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/stoa.cl\/\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"308\" src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Logo-Transparente-Tostado-Premium-e1776630788801-1024x394.png\" class=\"attachment-large size-large wp-image-10\" alt=\"\" srcset=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Logo-Transparente-Tostado-Premium-e1776630788801-1024x394.png 1024w, https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Logo-Transparente-Tostado-Premium-e1776630788801-300x116.png 300w, https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Logo-Transparente-Tostado-Premium-e1776630788801-768x296.png 768w, https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Logo-Transparente-Tostado-Premium-e1776630788801-1536x591.png 1536w, https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Logo-Transparente-Tostado-Premium-e1776630788801.png 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b1c88ab elementor-widget elementor-widget-ekit-nav-menu\" data-id=\"3b1c88ab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ekit-nav-menu.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<nav class=\"ekit-wid-con ekit_menu_responsive_tablet\"\n\t\t\tdata-hamburger-icon=\"\"\n\t\t\tdata-hamburger-icon-type=\"icon\"\n\t\t\tdata-responsive-breakpoint=\"1024\">\n\t\t\t            <button class=\"elementskit-menu-hamburger elementskit-menu-toggler\"  type=\"button\" aria-label=\"hamburger-icon\">\n                                    <span class=\"elementskit-menu-hamburger-icon\"><\/span><span class=\"elementskit-menu-hamburger-icon\"><\/span><span class=\"elementskit-menu-hamburger-icon\"><\/span>\n                            <\/button>\n            <div id=\"ekit-megamenu-menu-principal-stoa\" class=\"elementskit-menu-container elementskit-menu-offcanvas-elements elementskit-navbar-nav-default ekit-nav-menu-one-page-no ekit-nav-dropdown-hover\"><ul id=\"menu-menu-principal-stoa\" class=\"elementskit-navbar-nav elementskit-menu-po-center submenu-click-on-icon\"><li id=\"menu-item-36\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-36 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"#portafolio\" class=\"ekit-menu-nav-link\">Portafolio<\/a><\/li>\n<li id=\"menu-item-37\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-37 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"#servicios\" class=\"ekit-menu-nav-link\">Servicios<\/a><\/li>\n<li id=\"menu-item-38\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-38 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"#nosotros\" class=\"ekit-menu-nav-link\">Nosotros<\/a><\/li>\n<li id=\"menu-item-39\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-39 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"#contacto\" class=\"ekit-menu-nav-link\">Cotizar<\/a><\/li>\n<\/ul><div class=\"elementskit-nav-identity-panel\"><button class=\"elementskit-menu-close elementskit-menu-toggler\" type=\"button\">X<\/button><\/div><\/div>\n\t\t\t<div class=\"elementskit-menu-overlay elementskit-menu-offcanvas-elements elementskit-menu-toggler ekit-nav-menu--overlay\"><\/div>        <\/nav>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d44e346 e-con-full e-flex e-con e-parent\" data-id=\"d44e346\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f77886d elementor-widget elementor-widget-html\" data-id=\"f77886d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     APERTURA STOA \u2014 HERO + ESTAD\u00cdSTICAS + PILARES\n     v2 \u2014 Replanteo editorial premium\n     \u00b7 Hero: Montserrat light + Dancing Script\n     \u00b7 Estad\u00edsticas: editorial claro (sin negro)\n     \u00b7 Pilares: tarjeta de cierre que reemplaza el slot vac\u00edo\n     \u00b7 L\u00ednea transicional animada con scroll\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display:ital,wght@0,400;1,400&family=Dancing+Script:wght@400;500;600&family=Montserrat:wght@200;300;400;500;600&display=swap');\n\n.stoa-apertura * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.stoa-apertura {\n  --negro: #0A0A0A;\n  --tostado: #D1BAA6;\n  --arena: #C1B8B4;\n  --musgo: #827E7A;\n  --blanco: #F5F5F5;\n  --blanco-puro: #FFFFFF;\n  font-family: 'Montserrat', sans-serif;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   SECCI\u00d3N 1 \u2014 HERO CINEMATOGR\u00c1FICO\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.stoa-hero {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  min-height: 680px;\n  overflow: hidden;\n  background: var(--negro);\n}\n\n.stoa-hero-img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n  background-position: center;\n  animation: stoaKenBurns 24000ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate;\n}\n\n@keyframes stoaKenBurns {\n  0%   { transform: scale(1) translate(0, 0); }\n  100% { transform: scale(1.12) translate(-1%, -1%); }\n}\n\n.stoa-hero-overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    135deg,\n    rgba(10,10,10,0.5) 0%,\n    rgba(10,10,10,0.3) 50%,\n    rgba(10,10,10,0.6) 100%\n  );\n}\n\n\/* Marca editorial superior izquierda *\/\n.stoa-hero-marca {\n  position: absolute;\n  top: 36px;\n  left: 8vw;\n  z-index: 3;\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.stoa-hero-marca::before {\n  content: '';\n  display: inline-block;\n  width: 32px;\n  height: 1px;\n  background: var(--tostado);\n}\n\n\/* Contenido central *\/\n.stoa-hero-contenido {\n  position: relative;\n  z-index: 2;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  padding: 0 8vw;\n}\n\n.stoa-hero-slide {\n  position: absolute;\n  width: 100%;\n  max-width: 1100px;\n  padding: 0 8vw;\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 1200ms cubic-bezier(0.25, 0.1, 0.25, 1),\n              transform 1200ms cubic-bezier(0.25, 0.1, 0.25, 1);\n  pointer-events: none;\n}\n\n.stoa-hero-slide.activo {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: all;\n}\n\n\/* T\u00cdTULOS \u2014 Montserrat light + Dancing Script en palabras clave *\/\n.stoa-hero-titulo {\n  font-family: 'Montserrat', sans-serif;\n  font-weight: 200;\n  font-size: clamp(32px, 4.6vw, 64px);\n  line-height: 1.15;\n  color: var(--blanco-puro);\n  letter-spacing: 0.5px;\n  margin-bottom: 28px;\n}\n\n.stoa-hero-titulo em {\n  font-family: 'Dancing Script', cursive;\n  font-style: normal;\n  font-weight: 500;\n  color: var(--tostado);\n  font-size: 1.15em;\n  letter-spacing: 0;\n  line-height: 1;\n  display: inline-block;\n  padding: 0 4px;\n}\n\n\/* Subt\u00edtulo con fondo sutil para legibilidad *\/\n.stoa-hero-subtitulo-wrap {\n  display: inline-block;\n  margin-bottom: 44px;\n}\n\n.stoa-hero-subtitulo {\n  font-family: 'Montserrat', sans-serif;\n  font-weight: 300;\n  font-size: clamp(13px, 1.1vw, 15px);\n  color: var(--blanco-puro);\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  line-height: 1.6;\n  display: inline-block;\n  padding: 10px 22px;\n  background: rgba(10,10,10,0.35);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  border: 1px solid rgba(209,186,166,0.25);\n}\n\n.stoa-hero-cta,\n.stoa-hero-cta:link,\n.stoa-hero-cta:visited {\n  display: inline-flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px 32px !important;\n  font-family: 'Montserrat', sans-serif !important;\n  font-size: 12px !important;\n  font-weight: 600 !important;\n  letter-spacing: 3.5px !important;\n  text-transform: uppercase !important;\n  color: var(--negro) !important;\n  text-decoration: none !important;\n  position: relative;\n  transition: background 500ms ease, color 500ms ease, letter-spacing 500ms ease;\n  background: var(--tostado) !important;\n  border: 1px solid var(--tostado) !important;\n}\n\n.stoa-hero-cta:hover {\n  background: transparent !important;\n  color: var(--tostado) !important;\n  letter-spacing: 4.5px !important;\n}\n\n.stoa-hero-cta-arrow {\n  display: inline-block;\n  transition: transform 500ms cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n.stoa-hero-cta:hover .stoa-hero-cta-arrow {\n  transform: translateX(10px);\n}\n\n\/* Dots *\/\n.stoa-hero-dots {\n  position: absolute;\n  bottom: 48px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  gap: 12px;\n  z-index: 3;\n}\n\n.stoa-hero-dot {\n  width: 32px;\n  background: transparent;\n  cursor: pointer;\n  border: none;\n  padding: 8px 0;\n  position: relative;\n}\n\n.stoa-hero-dot::before {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: 1px;\n  background: rgba(245,245,245,0.3);\n  transform: translateY(-50%);\n  transition: background 400ms ease;\n}\n\n.stoa-hero-dot.activo::before {\n  background: var(--tostado);\n}\n\n\/* Indicador scroll *\/\n.stoa-hero-scroll {\n  position: absolute;\n  bottom: 36px;\n  right: 8vw;\n  z-index: 3;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  opacity: 0.7;\n  animation: stoaScrollFloat 2400ms ease-in-out infinite;\n}\n\n.stoa-hero-scroll-text {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  color: var(--blanco-puro);\n  writing-mode: vertical-rl;\n  transform: rotate(180deg);\n}\n\n.stoa-hero-scroll-linea {\n  width: 1px;\n  height: 40px;\n  background: var(--tostado);\n}\n\n@keyframes stoaScrollFloat {\n  0%, 100% { transform: translateY(0); }\n  50%      { transform: translateY(8px); }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   SECCI\u00d3N 2 \u2014 ESTAD\u00cdSTICAS EDITORIAL CLARO\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.stoa-stats {\n  background: var(--blanco);\n  padding: 140px 0;\n  position: relative;\n}\n\n.stoa-stats-grid {\n  display: grid;\n  grid-template-columns: 38fr 62fr;\n  gap: 100px;\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: 0 8vw;\n  align-items: start;\n}\n\n\/* Lado izquierdo \u2014 texto introductorio *\/\n.stoa-stats-intro {\n  position: sticky;\n  top: 100px;\n}\n\n.stoa-stats-eyebrow {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 3.5px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-bottom: 32px;\n  display: inline-block;\n  padding-left: 56px;\n  position: relative;\n}\n\n.stoa-stats-eyebrow::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 40px;\n  height: 1px;\n  background: var(--tostado);\n}\n\n.stoa-stats-titulo {\n  font-family: 'Dancing Script', cursive;\n  font-weight: 400;\n  font-size: clamp(38px, 4.5vw, 56px);\n  color: var(--negro);\n  line-height: 1.15;\n  margin-bottom: 32px;\n}\n\n.stoa-stats-subtitulo {\n  font-family: 'Montserrat', sans-serif;\n  font-weight: 300;\n  font-size: 15px;\n  color: var(--musgo);\n  line-height: 1.8;\n  letter-spacing: 0.2px;\n  max-width: 380px;\n}\n\n\/* Lado derecho \u2014 lista vertical de stats *\/\n.stoa-stats-lista {\n  display: flex;\n  flex-direction: column;\n}\n\n.stoa-stat {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 48px;\n  align-items: center;\n  padding: 40px 0;\n  border-bottom: 1px solid rgba(10,10,10,0.08);\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 900ms ease, transform 900ms ease;\n}\n\n.stoa-stat.visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.stoa-stat:first-child {\n  padding-top: 0;\n  border-top: 1px solid rgba(10,10,10,0.08);\n  padding-top: 40px;\n}\n\n.stoa-stat:last-child {\n  border-bottom: none;\n}\n\n\/* N\u00famero grande *\/\n.stoa-stat-numero {\n  font-family: 'DM Serif Display', serif;\n  font-weight: 400;\n  font-size: clamp(64px, 7vw, 110px);\n  color: var(--tostado);\n  line-height: 0.9;\n  letter-spacing: -2px;\n  min-width: 180px;\n  text-align: left;\n}\n\n\/* Stat ancla (el primero) \u2014 m\u00e1s grande *\/\n.stoa-stat:first-child .stoa-stat-numero {\n  font-size: clamp(80px, 9vw, 140px);\n}\n\n.stoa-stat-numero-simbolo {\n  font-size: 0.45em;\n  opacity: 0.85;\n  vertical-align: top;\n  margin-left: 4px;\n}\n\n\/* Texto del stat *\/\n.stoa-stat-info {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.stoa-stat-label {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  color: var(--tostado);\n}\n\n.stoa-stat-desc {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--negro);\n  line-height: 1.7;\n  letter-spacing: 0.2px;\n  max-width: 480px;\n}\n\n.stoa-stat-desc strong {\n  font-weight: 500;\n  color: var(--negro);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   SECCI\u00d3N 3 \u2014 PILARES EDITORIALES\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.stoa-pilares {\n  background: var(--blanco);\n  padding: 80px 0 100px 0;\n  position: relative;\n}\n\n.stoa-pilares-intro {\n  max-width: 900px;\n  margin: 0 auto 80px auto;\n  padding: 0 40px;\n  text-align: center;\n}\n\n.stoa-pilares-eyebrow {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-bottom: 28px;\n  display: inline-block;\n}\n\n.stoa-pilares-eyebrow::before,\n.stoa-pilares-eyebrow::after {\n  content: '';\n  display: inline-block;\n  width: 32px;\n  height: 1px;\n  background: var(--tostado);\n  vertical-align: middle;\n  margin: 0 16px;\n}\n\n.stoa-pilares-titulo {\n  font-family: 'Dancing Script', cursive;\n  font-weight: 400;\n  font-size: clamp(38px, 5vw, 60px);\n  color: var(--negro);\n  line-height: 1.1;\n  margin-bottom: 24px;\n}\n\n.stoa-pilares-subtitulo {\n  font-family: 'Montserrat', sans-serif;\n  font-weight: 500;\n  font-size: 17px;\n  color: var(--negro);\n  line-height: 1.7;\n  max-width: 640px;\n  margin: 0 auto;\n}\n\n\/* Grid 4x2 \u2014 7 pilares + 1 tarjeta de cierre *\/\n.stoa-pilares-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 0;\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: 0 6vw;\n}\n\n.stoa-pilar {\n  padding: 48px 32px;\n  border-right: 1px solid rgba(10,10,10,0.08);\n  border-bottom: 1px solid rgba(10,10,10,0.08);\n  position: relative;\n  transition: background 500ms ease;\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n.stoa-pilar.visible {\n  opacity: 1;\n  transform: translateY(0);\n  transition: opacity 800ms ease, transform 800ms ease, background 500ms ease;\n}\n\n.stoa-pilar:nth-child(4n) {\n  border-right: none;\n}\n\n.stoa-pilar:nth-child(n+5) {\n  border-bottom: none;\n}\n\n.stoa-pilar:hover:not(.stoa-pilar-cierre) {\n  background: var(--blanco-puro);\n}\n\n.stoa-pilar-numero {\n  font-family: 'DM Serif Display', serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--tostado);\n  letter-spacing: 1px;\n  margin-bottom: 18px;\n  display: block;\n}\n\n.stoa-pilar-titulo {\n  font-family: 'DM Serif Display', serif;\n  font-weight: 400;\n  font-size: clamp(22px, 2vw, 28px);\n  color: var(--negro);\n  line-height: 1.1;\n  margin-bottom: 16px;\n  letter-spacing: -0.3px;\n}\n\n.stoa-pilar-linea {\n  width: 32px;\n  height: 1px;\n  background: var(--tostado);\n  margin-bottom: 20px;\n  transition: width 500ms ease;\n}\n\n.stoa-pilar:hover .stoa-pilar-linea {\n  width: 64px;\n}\n\n.stoa-pilar-desc {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 13px;\n  font-weight: 300;\n  color: var(--musgo);\n  line-height: 1.7;\n  letter-spacing: 0.2px;\n}\n\n\/* Tarjeta de cierre \u2014 reemplaza el 8\u00ba slot vac\u00edo *\/\n.stoa-pilar-cierre {\n  background: var(--negro);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-decoration: none !important;\n  transition: background 500ms ease;\n  cursor: pointer;\n}\n\n.stoa-pilar-cierre:hover {\n  background: #1a1a1a;\n}\n\n.stoa-pilar-cierre .stoa-pilar-numero {\n  color: var(--tostado);\n}\n\n.stoa-pilar-cierre-titulo {\n  font-family: 'DM Serif Display', serif;\n  font-style: italic;\n  font-weight: 400;\n  font-size: clamp(20px, 1.7vw, 24px);\n  color: var(--blanco-puro);\n  line-height: 1.3;\n  margin-bottom: 24px;\n  letter-spacing: -0.3px;\n}\n\n.stoa-pilar-cierre-cta {\n  display: inline-flex;\n  align-items: center;\n  gap: 14px;\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-top: auto;\n}\n\n.stoa-pilar-cierre-arrow {\n  display: inline-block;\n  transition: transform 500ms cubic-bezier(0.25, 0.1, 0.25, 1);\n  font-size: 14px;\n}\n\n.stoa-pilar-cierre:hover .stoa-pilar-cierre-arrow {\n  transform: translateX(10px);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   L\u00cdNEA TRANSICIONAL ANIMADA\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.stoa-transicion {\n  background: var(--blanco);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 60px 0 0 0;\n  position: relative;\n}\n\n.stoa-transicion-linea-wrap {\n  position: relative;\n  width: 1px;\n  height: 140px;\n  background: rgba(209,186,166,0.15);\n}\n\n.stoa-transicion-linea {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  background: var(--tostado);\n  height: 25%;\n  transition: height 200ms linear;\n  box-shadow: 0 0 8px rgba(209,186,166,0.4);\n}\n\n\/* Punto que se desplaza con la l\u00ednea *\/\n.stoa-transicion-punto {\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  transform: translate(-50%, 50%);\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tostado);\n  box-shadow: 0 0 12px rgba(209,186,166,0.5);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MOBILE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media (max-width: 900px) {\n  .stoa-hero {\n    height: 90vh;\n    min-height: 560px;\n  }\n\n  .stoa-hero-marca {\n    top: 24px;\n    left: 24px;\n  }\n\n  .stoa-hero-scroll {\n    display: none;\n  }\n\n  .stoa-stats {\n    padding: 80px 0;\n  }\n\n  .stoa-stats-grid {\n    grid-template-columns: 1fr;\n    gap: 60px;\n    padding: 0 24px;\n  }\n\n  .stoa-stats-intro {\n    position: static;\n  }\n\n  .stoa-stat {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .stoa-stat-numero {\n    min-width: 0;\n    font-size: clamp(56px, 14vw, 80px);\n  }\n\n  .stoa-pilares {\n    padding: 60px 0 80px 0;\n  }\n\n  .stoa-pilares-intro {\n    margin-bottom: 48px;\n    padding: 0 24px;\n  }\n\n  .stoa-pilares-grid {\n    grid-template-columns: 1fr;\n    padding: 0 24px;\n  }\n\n  .stoa-pilar {\n    border-right: none !important;\n    border-bottom: 1px solid rgba(10,10,10,0.08) !important;\n    padding: 36px 24px;\n  }\n\n  .stoa-pilar:last-child {\n    border-bottom: none !important;\n  }\n\n  .stoa-transicion-linea-wrap {\n    height: 100px;\n  }\n}\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     HTML\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<div class=\"stoa-apertura\">\n\n  <!-- \u2550\u2550\u2550 SECCI\u00d3N 1 \u2014 HERO \u2550\u2550\u2550 -->\n  <section class=\"stoa-hero\" id=\"stoaHero\">\n\n    <div class=\"stoa-hero-img\"\n         style=\"background-image: url('https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/prueba1.jpg');\"><\/div>\n    <div class=\"stoa-hero-overlay\"><\/div>\n\n    <span class=\"stoa-hero-marca\">STOA \u00b7 Estudio de Arquitectura<\/span>\n\n    <div class=\"stoa-hero-contenido\">\n\n      <!-- SLIDE 1 -->\n      <div class=\"stoa-hero-slide activo\" data-slide=\"0\">\n        <h1 class=\"stoa-hero-titulo\">Dise\u00f1amos espacios <em>que no se olvidan.<\/em><\/h1>\n        <div class=\"stoa-hero-subtitulo-wrap\">\n          <p class=\"stoa-hero-subtitulo\">Arquitectura, interiores y construcci\u00f3n bajo una sola visi\u00f3n<\/p>\n        <\/div>\n        <br>\n        <a href=\"#servicios\" class=\"stoa-hero-cta\">\n          Descubre STOA\n          <span class=\"stoa-hero-cta-arrow\">\u2192<\/span>\n        <\/a>\n      <\/div>\n\n      <!-- SLIDE 2 -->\n      <div class=\"stoa-hero-slide\" data-slide=\"1\">\n        <h1 class=\"stoa-hero-titulo\">Cada proyecto cuenta una historia. <em>La tuya.<\/em><\/h1>\n        <div class=\"stoa-hero-subtitulo-wrap\">\n          <p class=\"stoa-hero-subtitulo\">Dise\u00f1amos espacios irrepetibles porque cada cliente lo es<\/p>\n        <\/div>\n        <br>\n        <a href=\"#portafolio\" class=\"stoa-hero-cta\">\n          Ver proyectos\n          <span class=\"stoa-hero-cta-arrow\">\u2192<\/span>\n        <\/a>\n      <\/div>\n\n      <!-- SLIDE 3 -->\n      <div class=\"stoa-hero-slide\" data-slide=\"2\">\n        <h1 class=\"stoa-hero-titulo\">El primer estudio en Chile pensado para <em>c\u00f3mo te har\u00e1 sentir<\/em> tu espacio.<\/h1>\n        <div class=\"stoa-hero-subtitulo-wrap\">\n          <p class=\"stoa-hero-subtitulo\">No solo c\u00f3mo se ver\u00e1<\/p>\n        <\/div>\n        <br>\n        <a href=\"#contacto\" class=\"stoa-hero-cta\">\n          Conversemos\n          <span class=\"stoa-hero-cta-arrow\">\u2192<\/span>\n        <\/a>\n      <\/div>\n\n    <\/div>\n\n    <!-- Dots -->\n    <div class=\"stoa-hero-dots\" id=\"stoaHeroDots\">\n      <button class=\"stoa-hero-dot activo\" data-dot=\"0\" aria-label=\"Slide 1\"><\/button>\n      <button class=\"stoa-hero-dot\" data-dot=\"1\" aria-label=\"Slide 2\"><\/button>\n      <button class=\"stoa-hero-dot\" data-dot=\"2\" aria-label=\"Slide 3\"><\/button>\n    <\/div>\n\n    <!-- Indicador scroll -->\n    <div class=\"stoa-hero-scroll\">\n      <span class=\"stoa-hero-scroll-text\">Scroll<\/span>\n      <span class=\"stoa-hero-scroll-linea\"><\/span>\n    <\/div>\n\n  <\/section>\n\n  <!-- \u2550\u2550\u2550 SECCI\u00d3N 2 \u2014 ESTAD\u00cdSTICAS EDITORIAL \u2550\u2550\u2550 -->\n  <section class=\"stoa-stats\">\n\n    <div class=\"stoa-stats-grid\">\n\n      <!-- Izquierda: intro -->\n      <div class=\"stoa-stats-intro\">\n        <span class=\"stoa-stats-eyebrow\">La ciencia lo confirma<\/span>\n        <h2 class=\"stoa-stats-titulo\">El espacio s\u00ed afecta tu cerebro.<\/h2>\n        <p class=\"stoa-stats-subtitulo\">Cada decisi\u00f3n de dise\u00f1o genera una respuesta medible en tu cerebro. En STOA lo sabemos, lo estudiamos y lo aplicamos en cada proyecto.<\/p>\n      <\/div>\n\n      <!-- Derecha: lista de stats -->\n      <div class=\"stoa-stats-lista\">\n\n        <div class=\"stoa-stat\" data-num=\"90\">\n          <div class=\"stoa-stat-numero\"><span class=\"stoa-stat-num-anim\">0<\/span><span class=\"stoa-stat-numero-simbolo\">%<\/span><\/div>\n          <div class=\"stoa-stat-info\">\n            <span class=\"stoa-stat-label\">de tu vida<\/span>\n            <p class=\"stoa-stat-desc\">La pasas en espacios construidos. Por eso el dise\u00f1o de tu hogar y tu oficina <strong>importa m\u00e1s de lo que crees.<\/strong><\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"stoa-stat\" data-num=\"15\" data-prefix=\"+\">\n          <div class=\"stoa-stat-numero\"><span class=\"stoa-stat-numero-simbolo\">+<\/span><span class=\"stoa-stat-num-anim\">0<\/span><span class=\"stoa-stat-numero-simbolo\">%<\/span><\/div>\n          <div class=\"stoa-stat-info\">\n            <span class=\"stoa-stat-label\">m\u00e1s productivo<\/span>\n            <p class=\"stoa-stat-desc\">Te vuelves cuando tu espacio de trabajo est\u00e1 bien dise\u00f1ado. Un buen ambiente no es un gasto, <strong>es una inversi\u00f3n.<\/strong><\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"stoa-stat\" data-num=\"18\">\n          <div class=\"stoa-stat-numero\"><span class=\"stoa-stat-num-anim\">0<\/span><span class=\"stoa-stat-numero-simbolo\">%<\/span><\/div>\n          <div class=\"stoa-stat-info\">\n            <span class=\"stoa-stat-label\">menos estr\u00e9s<\/span>\n            <p class=\"stoa-stat-desc\">Sienten las personas que trabajan con luz natural. La luz correcta <strong>cambia tu estado de \u00e1nimo<\/strong> sin que lo notes.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"stoa-stat\" data-num=\"67\">\n          <div class=\"stoa-stat-numero\"><span class=\"stoa-stat-num-anim\">0<\/span><span class=\"stoa-stat-numero-simbolo\">%<\/span><\/div>\n          <div class=\"stoa-stat-info\">\n            <span class=\"stoa-stat-label\">de las personas<\/span>\n            <p class=\"stoa-stat-desc\">Se siente m\u00e1s feliz en espacios con luz natural y materiales c\u00e1lidos. <strong>La felicidad tambi\u00e9n se dise\u00f1a.<\/strong><\/p>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n  <!-- \u2550\u2550\u2550 SECCI\u00d3N 3 \u2014 PILARES \u2550\u2550\u2550 -->\n  <section class=\"stoa-pilares\" id=\"stoaPilares\">\n\n    <div class=\"stoa-pilares-intro\">\n      <span class=\"stoa-pilares-eyebrow\">Nuestra metodolog\u00eda<\/span>\n      <h2 class=\"stoa-pilares-titulo\">Los 7 pilares de la neuroarquitectura.<\/h2>\n      <p class=\"stoa-pilares-subtitulo\">Siete principios que aplicamos en cada proyecto. La estructura invisible detr\u00e1s de cada espacio que dise\u00f1amos.<\/p>\n    <\/div>\n\n    <div class=\"stoa-pilares-grid\">\n\n      <div class=\"stoa-pilar\">\n        <span class=\"stoa-pilar-numero\">\u2116 01<\/span>\n        <h3 class=\"stoa-pilar-titulo\">Iluminaci\u00f3n<\/h3>\n        <div class=\"stoa-pilar-linea\"><\/div>\n        <p class=\"stoa-pilar-desc\">Estudiamos la orientaci\u00f3n solar y el recorrido lum\u00ednico para priorizar la luz natural en cada proyecto. Una buena iluminaci\u00f3n protege tu sue\u00f1o, eleva tu energ\u00eda y transforma c\u00f3mo se siente tu espacio a cada hora del d\u00eda.<\/p>\n      <\/div>\n\n      <div class=\"stoa-pilar\">\n        <span class=\"stoa-pilar-numero\">\u2116 02<\/span>\n        <h3 class=\"stoa-pilar-titulo\">Espacialidad<\/h3>\n        <div class=\"stoa-pilar-linea\"><\/div>\n        <p class=\"stoa-pilar-desc\">Un buen espacio no se mide, se habita. Trabajamos cada altura, proporci\u00f3n y recorrido para que moverte por tu proyecto sea una experiencia arm\u00f3nica, fluida y correcta desde que entras.<\/p>\n      <\/div>\n\n      <div class=\"stoa-pilar\">\n        <span class=\"stoa-pilar-numero\">\u2116 03<\/span>\n        <h3 class=\"stoa-pilar-titulo\">Materialidad<\/h3>\n        <div class=\"stoa-pilar-linea\"><\/div>\n        <p class=\"stoa-pilar-desc\">Cada material se selecciona por su durabilidad, nobleza y respuesta sensorial. En STOA nada es solo decoraci\u00f3n: es decoraci\u00f3n con sentido, pensada para mejorar tu d\u00eda a d\u00eda.<\/p>\n      <\/div>\n\n      <div class=\"stoa-pilar\">\n        <span class=\"stoa-pilar-numero\">\u2116 04<\/span>\n        <h3 class=\"stoa-pilar-titulo\">Entorno<\/h3>\n        <div class=\"stoa-pilar-linea\"><\/div>\n        <p class=\"stoa-pilar-desc\">Estudiamos el terreno, el clima, la geograf\u00eda y el contexto urbano antes del primer trazo. Cada obra debe integrarse con su entorno, respetar su car\u00e1cter y sumar a su paisaje.<\/p>\n      <\/div>\n\n      <div class=\"stoa-pilar\">\n        <span class=\"stoa-pilar-numero\">\u2116 05<\/span>\n        <h3 class=\"stoa-pilar-titulo\">Biofilia<\/h3>\n        <div class=\"stoa-pilar-linea\"><\/div>\n        <p class=\"stoa-pilar-desc\">Integramos cada espacio con su entorno natural desde el dise\u00f1o arquitect\u00f3nico: vegetaci\u00f3n, vistas, ventilaci\u00f3n cruzada y materiales org\u00e1nicos que conectan tu proyecto con lo que tu cerebro realmente necesita.<\/p>\n      <\/div>\n\n      <div class=\"stoa-pilar\">\n        <span class=\"stoa-pilar-numero\">\u2116 06<\/span>\n        <h3 class=\"stoa-pilar-titulo\">Prop\u00f3sito<\/h3>\n        <div class=\"stoa-pilar-linea\"><\/div>\n        <p class=\"stoa-pilar-desc\">En STOA cada espacio se dise\u00f1a desde c\u00f3mo vas a vivirlo: tu rutina, tus momentos, tus necesidades reales. Un proyecto bien dise\u00f1ado es el que te hace la vida m\u00e1s f\u00e1cil todos los d\u00edas.<\/p>\n      <\/div>\n\n      <div class=\"stoa-pilar\">\n        <span class=\"stoa-pilar-numero\">\u2116 07<\/span>\n        <h3 class=\"stoa-pilar-titulo\">Identidad<\/h3>\n        <div class=\"stoa-pilar-linea\"><\/div>\n        <p class=\"stoa-pilar-desc\">Tu proyecto debe contar tu historia, no la nuestra. Desde la neuroarquitectura traducimos qui\u00e9n eres, c\u00f3mo vives y qu\u00e9 te mueve, en un espacio irrepetible. Si tu proyecto pudiera ser de cualquiera, no es tuyo.<\/p>\n      <\/div>\n\n      <!-- Tarjeta de cierre \u2014 reemplaza el slot 8 vac\u00edo -->\n      <a href=\"#servicios\" class=\"stoa-pilar stoa-pilar-cierre\">\n        <span class=\"stoa-pilar-numero\">\u2116 08<\/span>\n        <h3 class=\"stoa-pilar-cierre-titulo\">Estos son nuestros principios. Descubre c\u00f3mo los aplicamos en cada proyecto.<\/h3>\n        <span class=\"stoa-pilar-cierre-cta\">\n          Ver servicios\n          <span class=\"stoa-pilar-cierre-arrow\">\u2192<\/span>\n        <\/span>\n      <\/a>\n\n    <\/div>\n\n  <\/section>\n\n  <!-- \u2550\u2550\u2550 L\u00cdNEA TRANSICIONAL ANIMADA \u2550\u2550\u2550 -->\n  <div class=\"stoa-transicion\" id=\"stoaTransicion\">\n    <div class=\"stoa-transicion-linea-wrap\">\n      <div class=\"stoa-transicion-linea\" id=\"stoaTransicionLinea\">\n        <div class=\"stoa-transicion-punto\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<!-- \u2550\u2550\u2550 JAVASCRIPT \u2550\u2550\u2550 -->\n<script>\n(function() {\n\n  \/* \u2500\u2500 HERO SLIDER \u2500\u2500 *\/\n  const slides = document.querySelectorAll('.stoa-hero-slide');\n  const dots   = document.querySelectorAll('.stoa-hero-dot');\n  let activo = 0;\n  let intervalo = null;\n\n  function mostrarSlide(idx) {\n    slides.forEach((s, i) => s.classList.toggle('activo', i === idx));\n    dots.forEach((d, i) => d.classList.toggle('activo', i === idx));\n    activo = idx;\n  }\n\n  function siguiente() {\n    mostrarSlide((activo + 1) % slides.length);\n  }\n\n  function iniciarAuto() {\n    intervalo = setInterval(siguiente, 6500);\n  }\n\n  function reiniciarAuto() {\n    if (intervalo) clearInterval(intervalo);\n    iniciarAuto();\n  }\n\n  dots.forEach((dot, i) => {\n    dot.addEventListener('click', () => {\n      mostrarSlide(i);\n      reiniciarAuto();\n    });\n  });\n\n  iniciarAuto();\n\n  \/* \u2500\u2500 ESTAD\u00cdSTICAS \u2014 counter animation \u2500\u2500 *\/\n  const stats = document.querySelectorAll('.stoa-stat');\n\n  function animarNumero(el, destino, duracion) {\n    const numEl = el.querySelector('.stoa-stat-num-anim');\n    if (!numEl) return;\n    const inicio = performance.now();\n\n    function paso(ahora) {\n      const avance = Math.min((ahora - inicio) \/ duracion, 1);\n      const valor = Math.floor(avance * destino);\n      numEl.textContent = valor;\n      if (avance < 1) requestAnimationFrame(paso);\n      else numEl.textContent = destino;\n    }\n    requestAnimationFrame(paso);\n  }\n\n  const obsStats = new IntersectionObserver((entries) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        const idx = Array.from(stats).indexOf(entry.target);\n        setTimeout(() => {\n          entry.target.classList.add('visible');\n          const destino = parseInt(entry.target.dataset.num, 10);\n          animarNumero(entry.target, destino, 1800);\n        }, idx * 180);\n        obsStats.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.3 });\n\n  stats.forEach(s => obsStats.observe(s));\n\n  \/* \u2500\u2500 PILARES \u2014 animaci\u00f3n entrada stagger \u2500\u2500 *\/\n  const pilares = document.querySelectorAll('.stoa-pilar');\n  const obsPilares = new IntersectionObserver((entries) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        const idx = Array.from(pilares).indexOf(entry.target);\n        setTimeout(() => entry.target.classList.add('visible'), idx * 100);\n        obsPilares.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.15 });\n\n  pilares.forEach(p => obsPilares.observe(p));\n\n  \/* \u2500\u2500 L\u00cdNEA TRANSICIONAL \u2014 scroll progress \u2500\u2500 *\/\n  const transicion = document.getElementById('stoaTransicion');\n  const lineaTrans = document.getElementById('stoaTransicionLinea');\n\n  function actualizarLinea() {\n    if (!transicion || !lineaTrans) return;\n    const rect = transicion.getBoundingClientRect();\n    const vh = window.innerHeight;\n\n    \/\/ Empieza a animar cuando el contenedor est\u00e1 a 80% de la pantalla\n    \/\/ y termina cuando ya pas\u00f3 el 20% superior\n    const inicio = vh * 0.85;\n    const fin = vh * 0.15;\n\n    let progress = (inicio - rect.top) \/ (inicio - fin);\n    progress = Math.min(Math.max(progress, 0), 1);\n\n    \/\/ De 25% a 100%\n    const altura = 25 + progress * 75;\n    lineaTrans.style.height = altura + '%';\n  }\n\n  let ticking = false;\n  window.addEventListener('scroll', () => {\n    if (!ticking) {\n      requestAnimationFrame(() => {\n        actualizarLinea();\n        ticking = false;\n      });\n      ticking = true;\n    }\n  }, { passive: true });\n\n  actualizarLinea();\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-713a064 e-con-full e-flex e-con e-parent\" data-id=\"713a064\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d93f28a elementor-widget elementor-widget-html\" data-id=\"d93f28a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SECCI\u00d3N DE SERVICIOS \u2014 STOA GROUP\n     v2 \u2014 Con DM Serif Display + text shadow para legibilidad\n     Pegar en widget HTML de Elementor (sin DOCTYPE\/html\/head\/body)\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<style>\n\/* \u2500\u2500\u2500 FUENTES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display:ital,wght@0,400;1,400&family=Dancing+Script:wght@400;500&family=Montserrat:wght@300;400;500;600&display=swap');\n\n\/* \u2500\u2500\u2500 RESET LOCAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-servicios * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.stoa-servicios {\n  --negro: #0A0A0A;\n  --tostado: #D1BAA6;\n  --arena: #C1B8B4;\n  --musgo: #827E7A;\n  --gris-plata: #C0BEBE;\n  --blanco: #F5F5F5;\n  --blanco-puro: #FFFFFF;\n\n  background: var(--blanco);\n  padding: 120px 0 0 0;\n  font-family: 'Montserrat', sans-serif;\n  overflow: hidden;\n}\n\n\/* \u2500\u2500\u2500 INTRO DE LA SECCI\u00d3N \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-servicios-intro {\n  max-width: 900px;\n  margin: 0 auto;\n  padding: 0 40px 100px 40px;\n  text-align: center;\n}\n\n.stoa-servicios-eyebrow {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-bottom: 28px;\n  display: inline-block;\n  position: relative;\n}\n\n.stoa-servicios-eyebrow::before,\n.stoa-servicios-eyebrow::after {\n  content: '';\n  display: inline-block;\n  width: 32px;\n  height: 1px;\n  background: var(--tostado);\n  vertical-align: middle;\n  margin: 0 16px;\n}\n\n.stoa-servicios-titulo {\n  font-family: 'Dancing Script', cursive;\n  font-weight: 400;\n  font-size: clamp(38px, 5vw, 60px);\n  color: var(--negro);\n  line-height: 1.1;\n  margin-bottom: 32px;\n}\n\n.stoa-servicios-subtitulo {\n  font-family: 'Montserrat', sans-serif;\n  font-weight: 500;\n  font-style: normal;\n  font-size: 20px;\n  color: #0A0A0A;\n  line-height: 1.7;\n  max-width: 720px;\n  margin: 0 auto;\n}\n\n\/* \u2500\u2500\u2500 CONTENEDOR DE BLOQUES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-servicios-bloques {\n  display: flex;\n  flex-direction: column;\n}\n\n\/* \u2500\u2500\u2500 BLOQUE INDIVIDUAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-servicio-bloque {\n  position: relative;\n  width: 100%;\n  height: 85vh;\n  min-height: 620px;\n  overflow: hidden;\n  cursor: pointer;\n  display: block;\n  text-decoration: none;\n  color: inherit;\n}\n\n.stoa-servicio-imagen {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n  background-position: center;\n  transition: transform 2000ms cubic-bezier(0.25, 0.1, 0.25, 1);\n  will-change: transform;\n}\n\n.stoa-servicio-bloque:hover .stoa-servicio-imagen {\n  transform: scale(1.06);\n}\n\n.stoa-servicio-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1);\n  pointer-events: none;\n}\n\n\/* Overlay por tema *\/\n.stoa-servicio-bloque[data-tema=\"oscuro\"] .stoa-servicio-overlay {\n  background: linear-gradient(\n    135deg,\n    rgba(10, 10, 10, 0.75) 0%,\n    rgba(10, 10, 10, 0.55) 50%,\n    rgba(10, 10, 10, 0.35) 100%\n  );\n  opacity: 0.85;\n}\n\n.stoa-servicio-bloque[data-tema=\"oscuro\"]:hover .stoa-servicio-overlay {\n  opacity: 0.55;\n}\n\n.stoa-servicio-bloque[data-tema=\"claro\"] .stoa-servicio-overlay {\n  background: linear-gradient(\n    135deg,\n    rgba(245, 245, 245, 0.45) 0%,\n    rgba(193, 184, 180, 0.35) 50%,\n    rgba(130, 126, 122, 0.25) 100%\n  );\n  opacity: 0.9;\n}\n\n.stoa-servicio-bloque[data-tema=\"claro\"]:hover .stoa-servicio-overlay {\n  opacity: 0.6;\n}\n\n\/* \u2500\u2500\u2500 CONTENIDO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-servicio-contenido {\n  position: relative;\n  z-index: 2;\n  height: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  align-items: center;\n  padding: 80px 8vw;\n  max-width: 1600px;\n  margin: 0 auto;\n}\n\n.stoa-servicio-contenido-inner {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 80px;\n  align-items: start;\n  max-width: 1100px;\n}\n\n\/* N\u00famero gigante \u2014 AHORA CON DM SERIF DISPLAY *\/\n.stoa-servicio-numero {\n  font-family: 'DM Serif Display', serif;\n  font-weight: 400;\n  font-size: clamp(90px, 11vw, 160px);\n  line-height: 0.9;\n  letter-spacing: -2px;\n  opacity: 0.9;\n  transition: opacity 800ms ease, transform 800ms ease;\n}\n\n.stoa-servicio-bloque:hover .stoa-servicio-numero {\n  opacity: 1;\n  transform: translateX(-8px);\n}\n\n.stoa-servicio-bloque[data-tema=\"oscuro\"] .stoa-servicio-numero {\n  color: var(--tostado);\n  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);\n}\n\n.stoa-servicio-bloque[data-tema=\"claro\"] .stoa-servicio-numero {\n  color: var(--negro);\n  text-shadow: 0 2px 20px rgba(255, 255, 255, 0.4);\n}\n\n\/* L\u00ednea separadora animada *\/\n.stoa-servicio-linea {\n  width: 60px;\n  height: 1px;\n  margin: 30px 0;\n  transition: width 800ms cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n.stoa-servicio-bloque[data-tema=\"oscuro\"] .stoa-servicio-linea {\n  background: var(--tostado);\n  box-shadow: 0 0 12px rgba(209, 186, 166, 0.4);\n}\n\n.stoa-servicio-bloque[data-tema=\"claro\"] .stoa-servicio-linea {\n  background: var(--negro);\n}\n\n.stoa-servicio-bloque:hover .stoa-servicio-linea {\n  width: 120px;\n}\n\n\/* Texto principal *\/\n.stoa-servicio-texto {\n  padding-top: 20px;\n}\n\n.stoa-servicio-etiqueta {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 3.5px;\n  text-transform: uppercase;\n  margin-bottom: 20px;\n  opacity: 0.9;\n}\n\n.stoa-servicio-bloque[data-tema=\"oscuro\"] .stoa-servicio-etiqueta {\n  color: var(--tostado);\n  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);\n}\n\n.stoa-servicio-bloque[data-tema=\"claro\"] .stoa-servicio-etiqueta {\n  color: var(--negro);\n  text-shadow: none;\n}\n\n\/* T\u00edtulo del servicio \u2014 AHORA DM SERIF DISPLAY *\/\n.stoa-servicio-titulo {\n  font-family: 'DM Serif Display', serif;\n  font-weight: 400;\n  font-size: clamp(48px, 6.5vw, 88px);\n  line-height: 1;\n  letter-spacing: -1px;\n  margin-bottom: 8px;\n  transition: letter-spacing 800ms ease;\n}\n\n.stoa-servicio-bloque:hover .stoa-servicio-titulo {\n  letter-spacing: 0px;\n}\n\n.stoa-servicio-bloque[data-tema=\"oscuro\"] .stoa-servicio-titulo {\n  color: var(--blanco);\n  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7), 0 2px 10px rgba(0, 0, 0, 0.5);\n}\n\n.stoa-servicio-bloque[data-tema=\"claro\"] .stoa-servicio-titulo {\n  color: var(--negro);\n  text-shadow: 0 2px 20px rgba(255, 255, 255, 0.5);\n}\n\n\/* Descripci\u00f3n *\/\n.stoa-servicio-descripcion {\n  font-family: 'DM Serif Display', serif;\n  font-style: italic;\n  font-weight: 400;\n  font-size: clamp(15px, 1.3vw, 18px);\n  line-height: 1.6;\n  max-width: 580px;\n  margin-top: 32px;\n  margin-bottom: 44px;\n}\n\n.stoa-servicio-bloque[data-tema=\"oscuro\"] .stoa-servicio-descripcion {\n  color: var(--blanco);\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n\n.stoa-servicio-bloque[data-tema=\"claro\"] .stoa-servicio-descripcion {\n  color: var(--negro);\n  text-shadow: none;\n}\n\n\/* Lista de entregables *\/\n.stoa-servicio-entregables {\n  list-style: none;\n  margin-bottom: 48px;\n  max-width: 480px;\n}\n\n.stoa-servicio-entregables li {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  letter-spacing: 1.8px;\n  text-transform: uppercase;\n  padding: 14px 0;\n  border-top: 1px solid;\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.stoa-servicio-entregables li:last-child {\n  border-bottom: 1px solid;\n}\n\n.stoa-servicio-bloque[data-tema=\"oscuro\"] .stoa-servicio-entregables li {\n  border-color: rgba(209, 186, 166, 0.35);\n  color: var(--blanco);\n  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);\n}\n\n.stoa-servicio-bloque[data-tema=\"claro\"] .stoa-servicio-entregables li {\n  border-color: rgba(10, 10, 10, 0.25);\n  color: var(--negro);\n  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.5);\n}\n\n.stoa-servicio-entregables li::before {\n  content: '\u2014';\n  font-weight: 400;\n}\n\n.stoa-servicio-bloque[data-tema=\"oscuro\"] .stoa-servicio-entregables li::before {\n  color: var(--tostado);\n}\n\n.stoa-servicio-bloque[data-tema=\"claro\"] .stoa-servicio-entregables li::before {\n  color: var(--musgo);\n}\n\n\/* CTA *\/\n.stoa-servicio-cta {\n  display: inline-flex;\n  align-items: center;\n  gap: 18px;\n  padding: 18px 0;\n  margin-bottom: 60px;\n  font-family: 'Montserrat', sans-serif;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 3.5px;\n  text-transform: uppercase;\n  position: relative;\n  transition: all 500ms ease;\n}\n\n.stoa-servicio-cta::after {\n  content: '';\n  position: absolute;\n  bottom: 10px;\n  left: 0;\n  width: 100%;\n  height: 1px;\n  transition: width 600ms cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n.stoa-servicio-bloque[data-tema=\"oscuro\"] .stoa-servicio-cta {\n  color: var(--blanco);\n  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);\n}\n\n.stoa-servicio-bloque[data-tema=\"oscuro\"] .stoa-servicio-cta::after {\n  background: var(--tostado);\n  box-shadow: 0 0 10px rgba(209, 186, 166, 0.3);\n}\n\n.stoa-servicio-bloque[data-tema=\"claro\"] .stoa-servicio-cta {\n  color: var(--negro);\n  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.5);\n}\n\n.stoa-servicio-bloque[data-tema=\"claro\"] .stoa-servicio-cta::after {\n  background: var(--negro);\n}\n\n.stoa-servicio-cta-arrow {\n  display: inline-block;\n  transition: transform 500ms cubic-bezier(0.25, 0.1, 0.25, 1);\n  font-size: 16px;\n}\n\n.stoa-servicio-bloque:hover .stoa-servicio-cta-arrow {\n  transform: translateX(12px);\n}\n\n\/* Esquina tipogr\u00e1fica (\u00edndice editorial) *\/\n.stoa-servicio-indice {\n  position: absolute;\n  top: 40px;\n  right: 8vw;\n  z-index: 3;\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 2.5px;\n  text-transform: uppercase;\n  opacity: 0.7;\n}\n\n.stoa-servicio-bloque[data-tema=\"oscuro\"] .stoa-servicio-indice {\n  color: var(--arena);\n  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);\n}\n\n.stoa-servicio-bloque[data-tema=\"claro\"] .stoa-servicio-indice {\n  color: var(--negro);\n  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.5);\n}\n\n\/* Animaci\u00f3n de entrada al scroll *\/\n.stoa-servicio-contenido-inner {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 1000ms ease, transform 1000ms ease;\n}\n\n.stoa-servicio-bloque.in-view .stoa-servicio-contenido-inner {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n\/* \u2500\u2500\u2500 MOBILE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@media (max-width: 768px) {\n  .stoa-servicios {\n    padding: 80px 0 0 0;\n  }\n\n  .stoa-servicios-intro {\n    padding: 0 24px 60px 24px;\n  }\n\n  .stoa-servicios-eyebrow::before,\n  .stoa-servicios-eyebrow::after {\n    width: 20px;\n    margin: 0 10px;\n  }\n\n  .stoa-servicio-bloque {\n    height: auto;\n    min-height: 620px;\n  }\n\n  .stoa-servicio-contenido {\n    padding: 80px 32px;\n  }\n\n  .stoa-servicio-contenido-inner {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n\n  .stoa-servicio-numero {\n    font-size: 90px;\n  }\n\n  .stoa-servicio-linea {\n    display: none;\n  }\n\n  .stoa-servicio-titulo {\n    font-size: 48px;\n  }\n\n  .stoa-servicio-descripcion {\n    margin-top: 24px;\n    margin-bottom: 32px;\n  }\n\n  .stoa-servicio-entregables {\n    margin-bottom: 32px;\n  }\n\n  .stoa-servicio-indice {\n    top: 24px;\n    right: 24px;\n  }\n}\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     HTML DE LA SECCI\u00d3N\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<section class=\"stoa-servicios\" id=\"servicios\">\n\n  <!-- INTRO -->\n  <div class=\"stoa-servicios-intro\">\n    <span class=\"stoa-servicios-eyebrow\">Nuestros servicios<\/span>\n    <h2 class=\"stoa-servicios-titulo\">Tres formas de trabajar con STOA.<\/h2>\n    <p class=\"stoa-servicios-subtitulo\">\n      Cada proyecto es \u00fanico y cada cliente tambi\u00e9n. Por eso combinamos los componentes que tu proyecto realmente necesita sin paquetes r\u00edgidos ni soluciones gen\u00e9ricas.\n    <\/p>\n  <\/div>\n\n  <!-- BLOQUES -->\n  <div class=\"stoa-servicios-bloques\">\n\n    <!-- \u2550\u2550\u2550 01 ARQUITECTURA \u2550\u2550\u2550 -->\n    <a href=\"#contacto\" class=\"stoa-servicio-bloque\" data-tema=\"oscuro\">\n      <div class=\"stoa-servicio-imagen\" style=\"background-image: url('https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/prueba1.jpg');\"><\/div>\n      <div class=\"stoa-servicio-overlay\"><\/div>\n\n      <span class=\"stoa-servicio-indice\">01 \/ 03 \u00b7 A<\/span>\n\n      <div class=\"stoa-servicio-contenido\">\n        <div class=\"stoa-servicio-contenido-inner\">\n\n          <div class=\"stoa-servicio-numero\">01<\/div>\n\n          <div class=\"stoa-servicio-texto\">\n            <span class=\"stoa-servicio-etiqueta\">Servicio<\/span>\n            <h3 class=\"stoa-servicio-titulo\">Arquitectura<\/h3>\n            <div class=\"stoa-servicio-linea\"><\/div>\n            <p class=\"stoa-servicio-descripcion\">\n              Dise\u00f1amos tu proyecto desde el primer trazo hasta la obtenci\u00f3n del permiso municipal. Cada decisi\u00f3n arquitect\u00f3nica nace del estudio del terreno, de tu forma de vivir y de los principios de la neuroarquitectura.\n            <\/p>\n            <ul class=\"stoa-servicio-entregables\">\n              <li>Anteproyecto completo<\/li>\n              <li>Proyecto definitivo<\/li>\n              <li>Renders fotorrealistas<\/li>\n              <li>Tramitaci\u00f3n DOM<\/li>\n            <\/ul>\n            <span class=\"stoa-servicio-cta\">\n              Cotizar este servicio\n              <span class=\"stoa-servicio-cta-arrow\">\u2192<\/span>\n            <\/span>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/a>\n\n    <!-- \u2550\u2550\u2550 02 DISE\u00d1O DE INTERIORES \u2550\u2550\u2550 -->\n    <a href=\"#contacto\" class=\"stoa-servicio-bloque\" data-tema=\"claro\">\n      <div class=\"stoa-servicio-imagen\" style=\"background-image: url('https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/prueba2.jpg');\"><\/div>\n      <div class=\"stoa-servicio-overlay\"><\/div>\n\n      <span class=\"stoa-servicio-indice\">02 \/ 03 \u00b7 I<\/span>\n\n      <div class=\"stoa-servicio-contenido\">\n        <div class=\"stoa-servicio-contenido-inner\">\n\n          <div class=\"stoa-servicio-numero\">02<\/div>\n\n          <div class=\"stoa-servicio-texto\">\n            <span class=\"stoa-servicio-etiqueta\">Servicio<\/span>\n            <h3 class=\"stoa-servicio-titulo\">Dise\u00f1o de Interiores<\/h3>\n            <div class=\"stoa-servicio-linea\"><\/div>\n            <p class=\"stoa-servicio-descripcion\">\n              Transformamos tus espacios interiores con criterio de neuroarquitectura. Desde la conceptualizaci\u00f3n hasta la entrega del espacio terminado \u2014 con resultado garantizado cuando STOA tambi\u00e9n implementa.\n            <\/p>\n            <ul class=\"stoa-servicio-entregables\">\n              <li>Concepto y moodboard<\/li>\n              <li>Planos y materialidad<\/li>\n              <li>Renders por ambiente<\/li>\n              <li>Gesti\u00f3n e implementaci\u00f3n<\/li>\n            <\/ul>\n            <span class=\"stoa-servicio-cta\">\n              Cotizar este servicio\n              <span class=\"stoa-servicio-cta-arrow\">\u2192<\/span>\n            <\/span>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/a>\n\n    <!-- \u2550\u2550\u2550 03 PROYECTOS A MEDIDA \u2550\u2550\u2550 -->\n    <a href=\"#contacto\" class=\"stoa-servicio-bloque\" data-tema=\"oscuro\">\n      <div class=\"stoa-servicio-imagen\" style=\"background-image: url('https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/prueba3.jpg');\"><\/div>\n      <div class=\"stoa-servicio-overlay\"><\/div>\n\n      <span class=\"stoa-servicio-indice\">03 \/ 03 \u00b7 A\u00b7I\u00b7C\u00b7P<\/span>\n\n      <div class=\"stoa-servicio-contenido\">\n        <div class=\"stoa-servicio-contenido-inner\">\n\n          <div class=\"stoa-servicio-numero\">03<\/div>\n\n          <div class=\"stoa-servicio-texto\">\n            <span class=\"stoa-servicio-etiqueta\">Servicio estrella<\/span>\n            <h3 class=\"stoa-servicio-titulo\">Proyectos a Medida<\/h3>\n            <div class=\"stoa-servicio-linea\"><\/div>\n            <p class=\"stoa-servicio-descripcion\">\n              La modalidad m\u00e1s completa de STOA. Combinamos los componentes que tu proyecto necesita \u2014 arquitectura, interiores, construcci\u00f3n y paisajismo \u2014 bajo un solo equipo y una sola visi\u00f3n. Del primer plano al \u00faltimo \u00e1rbol del jard\u00edn.\n            <\/p>\n            <ul class=\"stoa-servicio-entregables\">\n              <li>Arquitectura integral<\/li>\n              <li>Dise\u00f1o de interiores<\/li>\n              <li>Construcci\u00f3n llave en mano<\/li>\n              <li>Paisajismo y exteriores<\/li>\n            <\/ul>\n            <span class=\"stoa-servicio-cta\">\n              Conversemos de tu proyecto\n              <span class=\"stoa-servicio-cta-arrow\">\u2192<\/span>\n            <\/span>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/a>\n\n  <\/div>\n\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     JAVASCRIPT \u2014 Animaci\u00f3n al entrar en viewport\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n(function() {\n  const bloques = document.querySelectorAll('.stoa-servicio-bloque');\n\n  const observer = new IntersectionObserver((entries) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('in-view');\n      }\n    });\n  }, {\n    threshold: 0.25,\n    rootMargin: '0px 0px -100px 0px'\n  });\n\n  bloques.forEach(bloque => observer.observe(bloque));\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-aead0b4 e-con-full e-flex e-con e-parent\" data-id=\"aead0b4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9fdf577 elementor-widget elementor-widget-html\" data-id=\"9fdf577\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SECCI\u00d3N PORTAFOLIO \u2014 STOA GROUP\n     v2 \u2014 Edici\u00f3n sublime: filtros con l\u00ednea deslizante + contador +\n          stagger animation + numeraci\u00f3n editorial + cursor custom +\n          l\u00ednea vertical reveal en hover\n     Pegar en widget HTML de Elementor (sin DOCTYPE\/html\/head\/body)\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display:ital,wght@0,400;1,400&family=Dancing+Script:wght@400;500&family=Montserrat:wght@300;400;500;600&display=swap');\n\n.stoa-port * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.stoa-port {\n  --negro: #0A0A0A;\n  --tostado: #D1BAA6;\n  --arena: #C1B8B4;\n  --musgo: #827E7A;\n  --gris-plata: #C0BEBE;\n  --blanco: #F5F5F5;\n  --blanco-puro: #FFFFFF;\n  background: var(--blanco);\n  padding: 120px 0 140px 0;\n  font-family: 'Montserrat', sans-serif;\n  position: relative;\n}\n\n\/* \u2500\u2500\u2500 INTRO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-port-intro {\n  max-width: 900px;\n  margin: 0 auto;\n  padding: 0 40px 80px 40px;\n  text-align: center;\n}\n\n.stoa-port-eyebrow {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-bottom: 28px;\n  display: inline-block;\n}\n\n.stoa-port-eyebrow::before,\n.stoa-port-eyebrow::after {\n  content: '';\n  display: inline-block;\n  width: 32px;\n  height: 1px;\n  background: var(--tostado);\n  vertical-align: middle;\n  margin: 0 16px;\n}\n\n.stoa-port-titulo {\n  font-family: 'Dancing Script', cursive;\n  font-weight: 400;\n  font-size: clamp(38px, 5vw, 60px);\n  color: var(--negro);\n  line-height: 1.1;\n  margin-bottom: 32px;\n}\n\n.stoa-port-subtitulo {\n  font-family: 'Montserrat', sans-serif;\n  font-weight: 500;\n  font-size: 20px;\n  color: var(--negro);\n  line-height: 1.7;\n  max-width: 680px;\n  margin: 0 auto;\n}\n\n\/* \u2500\u2500\u2500 FILTROS CON L\u00cdNEA DESLIZANTE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-port-filtros-wrap {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 72px;\n  padding: 0 40px;\n}\n\n.stoa-port-filtros {\n  position: relative;\n  display: flex;\n  gap: 64px;\n}\n\n.stoa-port-filtro {\n  font-family: 'Montserrat', sans-serif !important;\n  font-size: 12px !important;\n  font-weight: 500 !important;\n  letter-spacing: 3px !important;\n  text-transform: uppercase !important;\n  color: var(--musgo) !important;\n  cursor: pointer !important;\n  padding: 0 0 14px 0 !important;\n  position: relative;\n  border: none !important;\n  background: none !important;\n  background-color: transparent !important;\n  border-radius: 0 !important;\n  box-shadow: none !important;\n  transition: color 400ms ease !important;\n  display: flex;\n  align-items: baseline;\n  gap: 6px;\n}\n\n.stoa-port-filtro:hover,\n.stoa-port-filtro:focus,\n.stoa-port-filtro:active {\n  color: var(--negro) !important;\n  background: none !important;\n  background-color: transparent !important;\n  box-shadow: none !important;\n  outline: none !important;\n}\n\n.stoa-port-filtro.activo {\n  color: var(--negro) !important;\n}\n\n\/* Contador editorial al lado del filtro *\/\n.stoa-port-filtro-num {\n  font-family: 'DM Serif Display', serif !important;\n  font-size: 10px !important;\n  font-weight: 400 !important;\n  letter-spacing: 0 !important;\n  color: var(--tostado) !important;\n  vertical-align: super;\n  opacity: 0.9;\n  text-transform: none !important;\n}\n\n\/* L\u00ednea deslizante *\/\n.stoa-port-filtro-linea {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 1px;\n  background: var(--tostado);\n  box-shadow: 0 0 8px rgba(209,186,166,0.3);\n  transition: left 500ms cubic-bezier(0.65, 0, 0.35, 1),\n              width 500ms cubic-bezier(0.65, 0, 0.35, 1);\n  pointer-events: none;\n}\n\n\/* \u2500\u2500\u2500 MOSAICO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-port-grid {\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  grid-auto-rows: 80px;\n  gap: 6px;\n  padding: 0 6px;\n  max-width: 1800px;\n  margin: 0 auto;\n  transition: all 600ms ease;\n}\n\n\/* Layout cuando hay TODOS (9 items) *\/\n.stoa-port-grid[data-layout=\"todos\"] .stoa-port-item:nth-child(1) { grid-column: 1 \/ 8;  grid-row: 1 \/ 7;  }\n.stoa-port-grid[data-layout=\"todos\"] .stoa-port-item:nth-child(2) { grid-column: 8 \/ 13; grid-row: 1 \/ 5;  }\n.stoa-port-grid[data-layout=\"todos\"] .stoa-port-item:nth-child(3) { grid-column: 8 \/ 13; grid-row: 5 \/ 7;  }\n.stoa-port-grid[data-layout=\"todos\"] .stoa-port-item:nth-child(4) { grid-column: 1 \/ 5;  grid-row: 7 \/ 11; }\n.stoa-port-grid[data-layout=\"todos\"] .stoa-port-item:nth-child(5) { grid-column: 5 \/ 9;  grid-row: 7 \/ 11; }\n.stoa-port-grid[data-layout=\"todos\"] .stoa-port-item:nth-child(6) { grid-column: 9 \/ 13; grid-row: 7 \/ 12; }\n.stoa-port-grid[data-layout=\"todos\"] .stoa-port-item:nth-child(7) { grid-column: 1 \/ 5;  grid-row: 11 \/ 16;}\n.stoa-port-grid[data-layout=\"todos\"] .stoa-port-item:nth-child(8) { grid-column: 5 \/ 9;  grid-row: 11 \/ 15;}\n.stoa-port-grid[data-layout=\"todos\"] .stoa-port-item:nth-child(9) { grid-column: 9 \/ 13; grid-row: 12 \/ 16;}\n\n\/* Layout filtrado (3 items) \u2014 cada categor\u00eda tiene su propio ritmo *\/\n.stoa-port-grid[data-layout=\"filtrado\"] {\n  grid-template-columns: repeat(12, 1fr);\n  grid-auto-rows: 100px;\n}\n\n.stoa-port-grid[data-layout=\"filtrado\"] .stoa-port-item[data-posicion=\"1\"] { grid-column: 1 \/ 8;  grid-row: 1 \/ 6; }\n.stoa-port-grid[data-layout=\"filtrado\"] .stoa-port-item[data-posicion=\"2\"] { grid-column: 8 \/ 13; grid-row: 1 \/ 4; }\n.stoa-port-grid[data-layout=\"filtrado\"] .stoa-port-item[data-posicion=\"3\"] { grid-column: 8 \/ 13; grid-row: 4 \/ 6; }\n\n\/* \u2500\u2500\u2500 ITEM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-port-item {\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  background: var(--negro);\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 800ms cubic-bezier(0.25, 0.1, 0.25, 1),\n              transform 800ms cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n.stoa-port-item.visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.stoa-port-item.oculto {\n  display: none !important;\n}\n\n.stoa-port-item-img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 2000ms cubic-bezier(0.25, 0.1, 0.25, 1);\n  will-change: transform;\n}\n\n.stoa-port-item:hover .stoa-port-item-img {\n  transform: scale(1.08);\n}\n\n\/* Numeraci\u00f3n editorial *\/\n.stoa-port-item-numero {\n  position: absolute;\n  top: 22px;\n  left: 24px;\n  z-index: 3;\n  font-family: 'DM Serif Display', serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--blanco-puro);\n  letter-spacing: 1px;\n  opacity: 0.55;\n  transition: opacity 500ms ease, color 500ms ease;\n  text-shadow: 0 2px 10px rgba(0,0,0,0.6);\n}\n\n.stoa-port-item:hover .stoa-port-item-numero {\n  opacity: 1;\n  color: var(--tostado);\n}\n\n\/* L\u00ednea vertical reveal *\/\n.stoa-port-item-linea-vert {\n  position: absolute;\n  top: -10%;\n  left: 32px;\n  width: 1px;\n  height: 120%;\n  background: linear-gradient(to bottom,\n    transparent 0%,\n    var(--tostado) 20%,\n    var(--tostado) 80%,\n    transparent 100%);\n  transform: scaleY(0);\n  transform-origin: top;\n  transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1);\n  opacity: 0.7;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.stoa-port-item:hover .stoa-port-item-linea-vert {\n  transform: scaleY(1);\n  transition-delay: 150ms;\n}\n\n\/* Overlay hover *\/\n.stoa-port-item-overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    to top,\n    rgba(10,10,10,0.88) 0%,\n    rgba(10,10,10,0.5) 45%,\n    rgba(10,10,10,0.1) 100%\n  );\n  opacity: 0;\n  transition: opacity 600ms ease;\n  z-index: 1;\n}\n\n.stoa-port-item:hover .stoa-port-item-overlay {\n  opacity: 1;\n}\n\n\/* Info sobre hover *\/\n.stoa-port-item-info {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 28px 28px 28px 56px;\n  transform: translateY(16px);\n  opacity: 0;\n  transition: opacity 600ms ease 200ms, transform 600ms ease 200ms;\n  z-index: 3;\n}\n\n.stoa-port-item:hover .stoa-port-item-info {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.stoa-port-item-categoria {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-bottom: 10px;\n  display: block;\n}\n\n.stoa-port-item-nombre {\n  font-family: 'DM Serif Display', serif;\n  font-weight: 400;\n  font-size: clamp(22px, 2.4vw, 32px);\n  color: var(--blanco-puro);\n  line-height: 1.1;\n  margin-bottom: 10px;\n  display: block;\n}\n\n.stoa-port-item-linea {\n  width: 40px;\n  height: 1px;\n  background: var(--tostado);\n  margin-bottom: 12px;\n  transition: width 600ms ease;\n}\n\n.stoa-port-item:hover .stoa-port-item-linea {\n  width: 72px;\n}\n\n.stoa-port-item-meta {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 300;\n  letter-spacing: 1.5px;\n  color: var(--arena);\n  display: flex;\n  gap: 16px;\n}\n\n\/* Contador fotos esquina superior derecha *\/\n.stoa-port-item-fotos {\n  position: absolute;\n  top: 22px;\n  right: 24px;\n  z-index: 3;\n  opacity: 0;\n  transition: opacity 500ms ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-family: 'Montserrat', sans-serif;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 1.5px;\n  color: var(--blanco-puro);\n  text-shadow: 0 2px 8px rgba(0,0,0,0.6);\n}\n\n.stoa-port-item:hover .stoa-port-item-fotos {\n  opacity: 0.85;\n}\n\n\/* \u2500\u2500\u2500 CURSOR PERSONALIZADO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-port-cursor {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 72px;\n  height: 72px;\n  border: 1px solid var(--tostado);\n  border-radius: 50%;\n  background: rgba(10,10,10,0.5);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  color: var(--blanco-puro);\n  font-family: 'Montserrat', sans-serif;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 2.5px;\n  text-transform: uppercase;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  z-index: 9999;\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(0.5);\n  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);\n  mix-blend-mode: difference;\n}\n\n.stoa-port-cursor.activo {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n}\n\n@media (hover: none), (pointer: coarse) {\n  .stoa-port-cursor { display: none !important; }\n}\n\n\/* \u2500\u2500\u2500 LIGHTBOX \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-lb {\n  position: fixed;\n  inset: 0;\n  z-index: 99999;\n  background: rgba(10,10,10,0.97);\n  display: flex;\n  flex-direction: column;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 400ms ease;\n}\n\n.stoa-lb.abierto {\n  opacity: 1;\n  pointer-events: all;\n}\n\n.stoa-lb-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 28px 48px;\n  flex-shrink: 0;\n}\n\n.stoa-lb-proyecto-info {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stoa-lb-categoria {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 3.5px;\n  text-transform: uppercase;\n  color: var(--tostado);\n}\n\n.stoa-lb-nombre {\n  font-family: 'DM Serif Display', serif;\n  font-size: clamp(22px, 2.5vw, 32px);\n  font-weight: 400;\n  color: var(--blanco-puro);\n}\n\n.stoa-lb-contador {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 400;\n  letter-spacing: 2px;\n  color: var(--musgo);\n}\n\n.stoa-lb-cerrar {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--arena);\n  font-size: 28px;\n  line-height: 1;\n  padding: 8px;\n  transition: color 300ms ease, transform 300ms ease;\n  font-family: 'Montserrat', sans-serif;\n  font-weight: 300;\n}\n\n.stoa-lb-cerrar:hover {\n  color: var(--blanco-puro);\n  transform: rotate(90deg);\n}\n\n.stoa-lb-stage {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  overflow: hidden;\n  padding: 0 80px;\n}\n\n.stoa-lb-img {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  transition: opacity 300ms ease, transform 300ms ease;\n}\n\n.stoa-lb-img.transicion {\n  opacity: 0;\n  transform: scale(0.97);\n}\n\n.stoa-lb-flecha {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: 1px solid rgba(193,184,180,0.3);\n  color: var(--arena);\n  width: 52px;\n  height: 52px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  font-size: 18px;\n  transition: all 400ms ease;\n  z-index: 2;\n}\n\n.stoa-lb-flecha:hover {\n  border-color: var(--tostado);\n  color: var(--blanco-puro);\n  background: rgba(209,186,166,0.1);\n}\n\n.stoa-lb-flecha.prev { left: 20px; }\n.stoa-lb-flecha.next { right: 20px; }\n\n.stoa-lb-flecha:disabled {\n  opacity: 0.2;\n  cursor: default;\n}\n\n.stoa-lb-thumbs {\n  display: flex;\n  justify-content: center;\n  gap: 10px;\n  padding: 20px 48px 28px;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n.stoa-lb-thumb {\n  width: 72px;\n  height: 48px;\n  object-fit: cover;\n  cursor: pointer;\n  opacity: 0.45;\n  border: 1px solid transparent;\n  transition: opacity 300ms ease, border-color 300ms ease;\n  flex-shrink: 0;\n}\n\n.stoa-lb-thumb:hover {\n  opacity: 0.8;\n}\n\n.stoa-lb-thumb.activo {\n  opacity: 1;\n  border-color: var(--tostado);\n}\n\n\/* \u2500\u2500\u2500 MOBILE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@media (max-width: 768px) {\n  .stoa-port {\n    padding: 80px 0 80px 0;\n  }\n\n  .stoa-port-intro {\n    padding: 0 24px 48px 24px;\n  }\n\n  .stoa-port-filtros {\n    gap: 28px;\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .stoa-port-grid,\n  .stoa-port-grid[data-layout=\"todos\"],\n  .stoa-port-grid[data-layout=\"filtrado\"] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    padding: 0 6px;\n  }\n\n  .stoa-port-grid[data-layout=\"todos\"] .stoa-port-item,\n  .stoa-port-grid[data-layout=\"filtrado\"] .stoa-port-item {\n    grid-column: unset;\n    grid-row: unset;\n    height: 260px;\n  }\n\n  .stoa-port-item-overlay {\n    opacity: 1;\n  }\n\n  .stoa-port-item-info {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .stoa-lb-stage {\n    padding: 0 50px;\n  }\n\n  .stoa-lb-header {\n    padding: 20px 24px;\n  }\n\n  .stoa-lb-thumbs {\n    padding: 12px 24px 20px;\n  }\n}\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     HTML\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<section class=\"stoa-port\" id=\"portafolio\">\n\n  <!-- INTRO -->\n  <div class=\"stoa-port-intro\">\n    <span class=\"stoa-port-eyebrow\">Nuestro portafolio<\/span>\n    <h2 class=\"stoa-port-titulo\">Proyectos que hablan por s\u00ed solos.<\/h2>\n    <p class=\"stoa-port-subtitulo\">Cada proyecto nace de una historia \u00fanica. Aqu\u00ed est\u00e1n algunos de los espacios que hemos tenido el privilegio de dise\u00f1ar. \u00bfEmpezamos el tuyo?<\/p>\n  <\/div>\n\n  <!-- FILTROS -->\n  <div class=\"stoa-port-filtros-wrap\">\n    <div class=\"stoa-port-filtros\" id=\"stoaFiltros\">\n      <button class=\"stoa-port-filtro activo\" data-filtro=\"todos\">\n        Todos <span class=\"stoa-port-filtro-num\">09<\/span>\n      <\/button>\n      <button class=\"stoa-port-filtro\" data-filtro=\"arquitectura\">\n        Arquitectura <span class=\"stoa-port-filtro-num\">03<\/span>\n      <\/button>\n      <button class=\"stoa-port-filtro\" data-filtro=\"interiores\">\n        Interiores <span class=\"stoa-port-filtro-num\">03<\/span>\n      <\/button>\n      <button class=\"stoa-port-filtro\" data-filtro=\"medida\">\n        Proyectos a Medida <span class=\"stoa-port-filtro-num\">03<\/span>\n      <\/button>\n      <span class=\"stoa-port-filtro-linea\" id=\"stoaFiltroLinea\"><\/span>\n    <\/div>\n  <\/div>\n\n  <!-- MOSAICO -->\n  <div class=\"stoa-port-grid\" id=\"stoaPortGrid\" data-layout=\"todos\">\n\n    <!-- P1 \u2014 ARQUITECTURA -->\n    <div class=\"stoa-port-item\" data-categoria=\"arquitectura\"\n         data-nombre=\"Casa Serena\"\n         data-cat-label=\"Arquitectura\"\n         data-fotos='[\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Diseno-sin-titulo.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Diseno-sin-titulo1.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Diseno-sin-titulo3.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Diseno-sin-titulo4.jpg\"]'>\n      <img decoding=\"async\" class=\"stoa-port-item-img\" src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Diseno-sin-titulo.jpg\" alt=\"Casa Serena\" loading=\"lazy\">\n      <span class=\"stoa-port-item-numero\">\u2116 01<\/span>\n      <span class=\"stoa-port-item-linea-vert\"><\/span>\n      <div class=\"stoa-port-item-overlay\"><\/div>\n      <div class=\"stoa-port-item-fotos\">\u229e 4<\/div>\n      <div class=\"stoa-port-item-info\">\n        <span class=\"stoa-port-item-categoria\">Arquitectura<\/span>\n        <span class=\"stoa-port-item-nombre\">Casa Serena<\/span>\n        <div class=\"stoa-port-item-linea\"><\/div>\n        <div class=\"stoa-port-item-meta\"><span>280 m\u00b2<\/span><span>Las Condes, Santiago<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- P2 \u2014 ARQUITECTURA -->\n    <div class=\"stoa-port-item\" data-categoria=\"arquitectura\"\n         data-nombre=\"Casa Horizonte\"\n         data-cat-label=\"Arquitectura\"\n         data-fotos='[\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/2.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/3.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/4.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/1.jpg\"]'>\n      <img decoding=\"async\" class=\"stoa-port-item-img\" src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/2.jpg\" alt=\"Casa Horizonte\" loading=\"lazy\">\n      <span class=\"stoa-port-item-numero\">\u2116 02<\/span>\n      <span class=\"stoa-port-item-linea-vert\"><\/span>\n      <div class=\"stoa-port-item-overlay\"><\/div>\n      <div class=\"stoa-port-item-fotos\">\u229e 4<\/div>\n      <div class=\"stoa-port-item-info\">\n        <span class=\"stoa-port-item-categoria\">Arquitectura<\/span>\n        <span class=\"stoa-port-item-nombre\">Casa Horizonte<\/span>\n        <div class=\"stoa-port-item-linea\"><\/div>\n        <div class=\"stoa-port-item-meta\"><span>340 m\u00b2<\/span><span>Vitacura, Santiago<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- P3 \u2014 ARQUITECTURA -->\n    <div class=\"stoa-port-item\" data-categoria=\"arquitectura\"\n         data-nombre=\"Casa Calma\"\n         data-cat-label=\"Arquitectura\"\n         data-fotos='[\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/5.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/6.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/7.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/8.jpg\"]'>\n      <img decoding=\"async\" class=\"stoa-port-item-img\" src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/5.jpg\" alt=\"Casa Calma\" loading=\"lazy\">\n      <span class=\"stoa-port-item-numero\">\u2116 03<\/span>\n      <span class=\"stoa-port-item-linea-vert\"><\/span>\n      <div class=\"stoa-port-item-overlay\"><\/div>\n      <div class=\"stoa-port-item-fotos\">\u229e 4<\/div>\n      <div class=\"stoa-port-item-info\">\n        <span class=\"stoa-port-item-categoria\">Arquitectura<\/span>\n        <span class=\"stoa-port-item-nombre\">Casa Calma<\/span>\n        <div class=\"stoa-port-item-linea\"><\/div>\n        <div class=\"stoa-port-item-meta\"><span>195 m\u00b2<\/span><span>Lo Barnechea, Santiago<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- P4 \u2014 INTERIORES -->\n    <div class=\"stoa-port-item\" data-categoria=\"interiores\"\n         data-nombre=\"Apartamento N\u00f3rdico\"\n         data-cat-label=\"Dise\u00f1o de Interiores\"\n         data-fotos='[\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/10.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/9.jpg\"]'>\n      <img decoding=\"async\" class=\"stoa-port-item-img\" src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/10.jpg\" alt=\"Apartamento N\u00f3rdico\" loading=\"lazy\">\n      <span class=\"stoa-port-item-numero\">\u2116 04<\/span>\n      <span class=\"stoa-port-item-linea-vert\"><\/span>\n      <div class=\"stoa-port-item-overlay\"><\/div>\n      <div class=\"stoa-port-item-fotos\">\u229e 2<\/div>\n      <div class=\"stoa-port-item-info\">\n        <span class=\"stoa-port-item-categoria\">Dise\u00f1o de Interiores<\/span>\n        <span class=\"stoa-port-item-nombre\">Apartamento N\u00f3rdico<\/span>\n        <div class=\"stoa-port-item-linea\"><\/div>\n        <div class=\"stoa-port-item-meta\"><span>110 m\u00b2<\/span><span>Providencia, Santiago<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- P5 \u2014 INTERIORES -->\n    <div class=\"stoa-port-item\" data-categoria=\"interiores\"\n         data-nombre=\"Penthouse C\u00e1lido\"\n         data-cat-label=\"Dise\u00f1o de Interiores\"\n         data-fotos='[\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/11.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/12.jpg\"]'>\n      <img decoding=\"async\" class=\"stoa-port-item-img\" src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/11.jpg\" alt=\"Penthouse C\u00e1lido\" loading=\"lazy\">\n      <span class=\"stoa-port-item-numero\">\u2116 05<\/span>\n      <span class=\"stoa-port-item-linea-vert\"><\/span>\n      <div class=\"stoa-port-item-overlay\"><\/div>\n      <div class=\"stoa-port-item-fotos\">\u229e 2<\/div>\n      <div class=\"stoa-port-item-info\">\n        <span class=\"stoa-port-item-categoria\">Dise\u00f1o de Interiores<\/span>\n        <span class=\"stoa-port-item-nombre\">Penthouse C\u00e1lido<\/span>\n        <div class=\"stoa-port-item-linea\"><\/div>\n        <div class=\"stoa-port-item-meta\"><span>90 m\u00b2<\/span><span>\u00d1u\u00f1oa, Santiago<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- P6 \u2014 INTERIORES -->\n    <div class=\"stoa-port-item\" data-categoria=\"interiores\"\n         data-nombre=\"Oficina Zen\"\n         data-cat-label=\"Dise\u00f1o de Interiores\"\n         data-fotos='[\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/15.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/14.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/13.jpg\"]'>\n      <img decoding=\"async\" class=\"stoa-port-item-img\" src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/15.jpg\" alt=\"Oficina Zen\" loading=\"lazy\">\n      <span class=\"stoa-port-item-numero\">\u2116 06<\/span>\n      <span class=\"stoa-port-item-linea-vert\"><\/span>\n      <div class=\"stoa-port-item-overlay\"><\/div>\n      <div class=\"stoa-port-item-fotos\">\u229e 3<\/div>\n      <div class=\"stoa-port-item-info\">\n        <span class=\"stoa-port-item-categoria\">Dise\u00f1o de Interiores<\/span>\n        <span class=\"stoa-port-item-nombre\">Oficina Zen<\/span>\n        <div class=\"stoa-port-item-linea\"><\/div>\n        <div class=\"stoa-port-item-meta\"><span>75 m\u00b2<\/span><span>Las Condes, Santiago<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- P7 \u2014 PROYECTOS A MEDIDA -->\n    <div class=\"stoa-port-item\" data-categoria=\"medida\"\n         data-nombre=\"Proyecto Aura\"\n         data-cat-label=\"Proyecto a Medida\"\n         data-fotos='[\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/17.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/16.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/18.jpg\"]'>\n      <img decoding=\"async\" class=\"stoa-port-item-img\" src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/17.jpg\" alt=\"Proyecto Aura\" loading=\"lazy\">\n      <span class=\"stoa-port-item-numero\">\u2116 07<\/span>\n      <span class=\"stoa-port-item-linea-vert\"><\/span>\n      <div class=\"stoa-port-item-overlay\"><\/div>\n      <div class=\"stoa-port-item-fotos\">\u229e 3<\/div>\n      <div class=\"stoa-port-item-info\">\n        <span class=\"stoa-port-item-categoria\">Proyecto a Medida<\/span>\n        <span class=\"stoa-port-item-nombre\">Proyecto Aura<\/span>\n        <div class=\"stoa-port-item-linea\"><\/div>\n        <div class=\"stoa-port-item-meta\"><span>420 m\u00b2<\/span><span>Chicureo, Santiago<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- P8 \u2014 PROYECTOS A MEDIDA -->\n    <div class=\"stoa-port-item\" data-categoria=\"medida\"\n         data-nombre=\"Residencia Lumina\"\n         data-cat-label=\"Proyecto a Medida\"\n         data-fotos='[\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/24.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/23.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/25.jpg\"]'>\n      <img decoding=\"async\" class=\"stoa-port-item-img\" src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/24.jpg\" alt=\"Residencia Lumina\" loading=\"lazy\">\n      <span class=\"stoa-port-item-numero\">\u2116 08<\/span>\n      <span class=\"stoa-port-item-linea-vert\"><\/span>\n      <div class=\"stoa-port-item-overlay\"><\/div>\n      <div class=\"stoa-port-item-fotos\">\u229e 3<\/div>\n      <div class=\"stoa-port-item-info\">\n        <span class=\"stoa-port-item-categoria\">Proyecto a Medida<\/span>\n        <span class=\"stoa-port-item-nombre\">Residencia Lumina<\/span>\n        <div class=\"stoa-port-item-linea\"><\/div>\n        <div class=\"stoa-port-item-meta\"><span>510 m\u00b2<\/span><span>La Dehesa, Santiago<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <!-- P9 \u2014 PROYECTOS A MEDIDA -->\n    <div class=\"stoa-port-item\" data-categoria=\"medida\"\n         data-nombre=\"Casa Nomada\"\n         data-cat-label=\"Proyecto a Medida\"\n         data-fotos='[\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/20.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/19.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/22.jpg\",\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/21.jpg\"]'>\n      <img decoding=\"async\" class=\"stoa-port-item-img\" src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/20.jpg\" alt=\"Casa Nomada\" loading=\"lazy\">\n      <span class=\"stoa-port-item-numero\">\u2116 09<\/span>\n      <span class=\"stoa-port-item-linea-vert\"><\/span>\n      <div class=\"stoa-port-item-overlay\"><\/div>\n      <div class=\"stoa-port-item-fotos\">\u229e 4<\/div>\n      <div class=\"stoa-port-item-info\">\n        <span class=\"stoa-port-item-categoria\">Proyecto a Medida<\/span>\n        <span class=\"stoa-port-item-nombre\">Casa Nomada<\/span>\n        <div class=\"stoa-port-item-linea\"><\/div>\n        <div class=\"stoa-port-item-meta\"><span>380 m\u00b2<\/span><span>Zapallar, V Regi\u00f3n<\/span><\/div>\n      <\/div>\n    <\/div>\n\n  <\/div><!-- \/grid -->\n\n<\/section>\n\n<!-- Cursor personalizado -->\n<div class=\"stoa-port-cursor\" id=\"stoaCursor\">Ver<\/div>\n\n<!-- \u2550\u2550\u2550 LIGHTBOX \u2550\u2550\u2550 -->\n<div class=\"stoa-lb\" id=\"stoaLb\" role=\"dialog\" aria-modal=\"true\">\n  <div class=\"stoa-lb-header\">\n    <div class=\"stoa-lb-proyecto-info\">\n      <span class=\"stoa-lb-categoria\" id=\"stoaLbCat\"><\/span>\n      <span class=\"stoa-lb-nombre\" id=\"stoaLbNombre\"><\/span>\n    <\/div>\n    <div style=\"display:flex;align-items:center;gap:32px;\">\n      <span class=\"stoa-lb-contador\" id=\"stoaLbContador\"><\/span>\n      <button class=\"stoa-lb-cerrar\" id=\"stoaLbCerrar\" aria-label=\"Cerrar\">\u2715<\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"stoa-lb-stage\">\n    <button class=\"stoa-lb-flecha prev\" id=\"stoaLbPrev\" aria-label=\"Anterior\">\u2190<\/button>\n    <img decoding=\"async\" class=\"stoa-lb-img\" id=\"stoaLbImg\" src=\"\" alt=\"\">\n    <button class=\"stoa-lb-flecha next\" id=\"stoaLbNext\" aria-label=\"Siguiente\">\u2192<\/button>\n  <\/div>\n\n  <div class=\"stoa-lb-thumbs\" id=\"stoaLbThumbs\"><\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550 JAVASCRIPT \u2550\u2550\u2550 -->\n<script>\n(function() {\n\n  const items      = document.querySelectorAll('.stoa-port-item');\n  const filtros    = document.querySelectorAll('.stoa-port-filtro');\n  const lineaFilt  = document.getElementById('stoaFiltroLinea');\n  const grid       = document.getElementById('stoaPortGrid');\n  const cursor     = document.getElementById('stoaCursor');\n\n  \/* \u2500\u2500 Animaci\u00f3n inicial stagger \u2500\u2500 *\/\n  const obs = new IntersectionObserver((entries) => {\n    entries.forEach((e, i) => {\n      if (e.isIntersecting) {\n        const delay = parseInt(e.target.dataset.staggerIdx || '0') * 80;\n        setTimeout(() => e.target.classList.add('visible'), delay);\n        obs.unobserve(e.target);\n      }\n    });\n  }, { threshold: 0.1 });\n\n  items.forEach((el, i) => {\n    el.dataset.staggerIdx = i;\n    obs.observe(el);\n  });\n\n  \/* \u2500\u2500 L\u00ednea deslizante filtros \u2500\u2500 *\/\n  function moverLinea(btn) {\n    const rect = btn.getBoundingClientRect();\n    const parent = btn.parentElement.getBoundingClientRect();\n    lineaFilt.style.left  = (rect.left - parent.left) + 'px';\n    lineaFilt.style.width = rect.width + 'px';\n  }\n\n  \/\/ Posici\u00f3n inicial\n  window.addEventListener('load', () => {\n    const activo = document.querySelector('.stoa-port-filtro.activo');\n    if (activo) moverLinea(activo);\n  });\n\n  \/* \u2500\u2500 Filtros \u2500\u2500 *\/\n  filtros.forEach(btn => {\n    btn.addEventListener('click', () => {\n      filtros.forEach(b => b.classList.remove('activo'));\n      btn.classList.add('activo');\n      moverLinea(btn);\n\n      const filtro = btn.dataset.filtro;\n\n      \/\/ Layout\n      grid.dataset.layout = (filtro === 'todos') ? 'todos' : 'filtrado';\n\n      \/\/ Fade out de todos\n      items.forEach(item => {\n        item.classList.remove('visible');\n      });\n\n      \/\/ Esperar, ocultar\/mostrar, luego reaparecer con stagger\n      setTimeout(() => {\n        let visibleIdx = 0;\n        items.forEach(item => {\n          const cat = item.dataset.categoria;\n          const mostrar = (filtro === 'todos') || (cat === filtro);\n          if (mostrar) {\n            item.classList.remove('oculto');\n            visibleIdx++;\n            item.dataset.posicion = visibleIdx;\n            setTimeout(() => {\n              item.classList.add('visible');\n            }, (visibleIdx - 1) * 100 + 50);\n          } else {\n            item.classList.add('oculto');\n            item.removeAttribute('data-posicion');\n          }\n        });\n      }, 350);\n    });\n  });\n\n  \/\/ Reajustar l\u00ednea en resize\n  window.addEventListener('resize', () => {\n    const activo = document.querySelector('.stoa-port-filtro.activo');\n    if (activo) moverLinea(activo);\n  });\n\n  \/* \u2500\u2500 Cursor personalizado \u2500\u2500 *\/\n  let cursorX = 0, cursorY = 0;\n  let targetX = 0, targetY = 0;\n\n  document.addEventListener('mousemove', (e) => {\n    targetX = e.clientX;\n    targetY = e.clientY;\n  });\n\n  function animarCursor() {\n    cursorX += (targetX - cursorX) * 0.18;\n    cursorY += (targetY - cursorY) * 0.18;\n    cursor.style.left = cursorX + 'px';\n    cursor.style.top  = cursorY + 'px';\n    requestAnimationFrame(animarCursor);\n  }\n  animarCursor();\n\n  items.forEach(item => {\n    item.addEventListener('mouseenter', () => cursor.classList.add('activo'));\n    item.addEventListener('mouseleave', () => cursor.classList.remove('activo'));\n  });\n\n  \/* \u2500\u2500 Lightbox \u2500\u2500 *\/\n  const lb        = document.getElementById('stoaLb');\n  const lbImg     = document.getElementById('stoaLbImg');\n  const lbNombre  = document.getElementById('stoaLbNombre');\n  const lbCat     = document.getElementById('stoaLbCat');\n  const lbCounter = document.getElementById('stoaLbContador');\n  const lbThumbs  = document.getElementById('stoaLbThumbs');\n  const lbPrev    = document.getElementById('stoaLbPrev');\n  const lbNext    = document.getElementById('stoaLbNext');\n  const lbCerrar  = document.getElementById('stoaLbCerrar');\n\n  let fotos = [];\n  let idx   = 0;\n\n  function abrirLb(item) {\n    fotos   = JSON.parse(item.dataset.fotos);\n    idx     = 0;\n    lbNombre.textContent = item.dataset.nombre;\n    lbCat.textContent    = item.dataset.catLabel;\n    renderLb();\n    lb.classList.add('abierto');\n    document.body.style.overflow = 'hidden';\n    cursor.classList.remove('activo');\n  }\n\n  function renderLb() {\n    lbImg.classList.add('transicion');\n    setTimeout(() => {\n      lbImg.src = fotos[idx];\n      lbImg.classList.remove('transicion');\n    }, 280);\n    lbCounter.textContent = (idx + 1) + ' \/ ' + fotos.length;\n    lbPrev.disabled = idx === 0;\n    lbNext.disabled = idx === fotos.length - 1;\n\n    lbThumbs.innerHTML = '';\n    fotos.forEach((url, i) => {\n      const t = document.createElement('img');\n      t.className = 'stoa-lb-thumb' + (i === idx ? ' activo' : '');\n      t.src = url;\n      t.alt = '';\n      t.addEventListener('click', () => { idx = i; renderLb(); });\n      lbThumbs.appendChild(t);\n    });\n  }\n\n  function cerrarLb() {\n    lb.classList.remove('abierto');\n    document.body.style.overflow = '';\n  }\n\n  items.forEach(item => {\n    item.addEventListener('click', () => abrirLb(item));\n  });\n\n  lbCerrar.addEventListener('click', cerrarLb);\n  lbPrev.addEventListener('click', () => { if (idx > 0) { idx--; renderLb(); } });\n  lbNext.addEventListener('click', () => { if (idx < fotos.length - 1) { idx++; renderLb(); } });\n\n  lb.addEventListener('click', (e) => {\n    if (e.target === lb) cerrarLb();\n  });\n\n  document.addEventListener('keydown', (e) => {\n    if (!lb.classList.contains('abierto')) return;\n    if (e.key === 'Escape')      cerrarLb();\n    if (e.key === 'ArrowLeft'  && idx > 0)                  { idx--; renderLb(); }\n    if (e.key === 'ArrowRight' && idx < fotos.length - 1)   { idx++; renderLb(); }\n  });\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fe027b7 e-con-full e-flex e-con e-parent\" data-id=\"fe027b7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a26a3a5 elementor-widget elementor-widget-html\" data-id=\"a26a3a5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SECCI\u00d3N NOSOTROS \u2014 STOA GROUP\n     v2 \u2014 Formato editorial 3 actos: Apertura cinematogr\u00e1fica +\n          Split asim\u00e9trico con acordeones + Equipo + Cierre negro\n     Pegar en widget HTML de Elementor (sin DOCTYPE\/html\/head\/body)\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display:ital,wght@0,400;1,400&family=Dancing+Script:wght@400;500&family=Montserrat:wght@300;400;500;600&display=swap');\n\n.stoa-nos * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.stoa-nos {\n  --negro: #0A0A0A;\n  --tostado: #D1BAA6;\n  --arena: #C1B8B4;\n  --musgo: #827E7A;\n  --blanco: #F5F5F5;\n  --blanco-puro: #FFFFFF;\n  font-family: 'Montserrat', sans-serif;\n  background: var(--blanco);\n  overflow: hidden;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ACTO 1 \u2014 APERTURA CINEMATOGR\u00c1FICA\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.stoa-nos-apertura {\n  position: relative;\n  width: 100%;\n  height: 92vh;\n  min-height: 640px;\n  overflow: hidden;\n  background: var(--negro);\n}\n\n.stoa-nos-apertura-img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  transform: scale(1.05);\n  transition: transform 12000ms cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n.stoa-nos-apertura.in-view .stoa-nos-apertura-img {\n  transform: scale(1);\n}\n\n.stoa-nos-apertura-overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    to bottom,\n    rgba(10,10,10,0.2) 0%,\n    rgba(10,10,10,0.45) 60%,\n    rgba(10,10,10,0.85) 100%\n  );\n}\n\n.stoa-nos-apertura-contenido {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 0 8vw 80px 8vw;\n  z-index: 2;\n}\n\n.stoa-nos-apertura-eyebrow {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-bottom: 24px;\n  display: inline-block;\n  padding-left: 60px;\n  position: relative;\n}\n\n.stoa-nos-apertura-eyebrow::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 44px;\n  height: 1px;\n  background: var(--tostado);\n}\n\n.stoa-nos-apertura-titulo {\n  font-family: 'DM Serif Display', serif;\n  font-weight: 400;\n  font-size: clamp(36px, 5.5vw, 76px);\n  line-height: 1.05;\n  color: var(--blanco-puro);\n  max-width: 900px;\n  letter-spacing: -1px;\n}\n\n.stoa-nos-apertura-titulo span {\n  font-style: italic;\n  color: var(--tostado);\n}\n\n\/* Indicador scroll *\/\n.stoa-nos-scroll-ind {\n  position: absolute;\n  bottom: 32px;\n  right: 8vw;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  opacity: 0.6;\n  animation: stoaScrollFloat 2400ms ease-in-out infinite;\n}\n\n.stoa-nos-scroll-ind-text {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 2.5px;\n  text-transform: uppercase;\n  color: var(--blanco-puro);\n  writing-mode: vertical-rl;\n  transform: rotate(180deg);\n}\n\n.stoa-nos-scroll-ind-linea {\n  width: 1px;\n  height: 40px;\n  background: var(--tostado);\n}\n\n@keyframes stoaScrollFloat {\n  0%, 100% { transform: translateY(0); opacity: 0.6; }\n  50%      { transform: translateY(8px); opacity: 1; }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ACTO 2 \u2014 SPLIT ASIM\u00c9TRICO CON ACORDEONES\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.stoa-nos-manifiesto {\n  background: var(--blanco);\n  padding: 140px 0 140px 0;\n  position: relative;\n}\n\n.stoa-nos-manifiesto-grid {\n  display: grid;\n  grid-template-columns: 40fr 60fr;\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: 0 8vw;\n  gap: 80px;\n  align-items: start;\n}\n\n\/* Lado izquierdo \u2014 palabra ancla *\/\n.stoa-nos-ancla {\n  position: sticky;\n  top: 100px;\n  padding-top: 20px;\n}\n\n.stoa-nos-ancla-eyebrow {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 3.5px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-bottom: 32px;\n  display: block;\n  padding-left: 56px;\n  position: relative;\n}\n\n.stoa-nos-ancla-eyebrow::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 40px;\n  height: 1px;\n  background: var(--tostado);\n}\n\n.stoa-nos-ancla-palabra {\n  font-family: 'Dancing Script', cursive;\n  font-weight: 400;\n  font-size: clamp(60px, 7vw, 110px);\n  color: var(--negro);\n  line-height: 0.95;\n  margin-bottom: 32px;\n  display: block;\n}\n\n.stoa-nos-ancla-firma {\n  font-family: 'DM Serif Display', serif;\n  font-style: italic;\n  font-size: 16px;\n  color: var(--musgo);\n  line-height: 1.5;\n  max-width: 320px;\n}\n\n.stoa-nos-ancla-firma::before {\n  content: '';\n  display: block;\n  width: 32px;\n  height: 1px;\n  background: var(--tostado);\n  margin-bottom: 16px;\n}\n\n\/* Lado derecho \u2014 acordeones *\/\n.stoa-nos-acordeones {\n  display: flex;\n  flex-direction: column;\n}\n\n.stoa-nos-acord {\n  border-bottom: 1px solid rgba(10,10,10,0.1);\n  position: relative;\n}\n\n.stoa-nos-acord:first-child {\n  border-top: 1px solid rgba(10,10,10,0.1);\n}\n\n.stoa-nos-acord-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 32px 0;\n  cursor: pointer;\n  transition: padding 400ms ease;\n}\n\n.stoa-nos-acord.abierto .stoa-nos-acord-header {\n  padding-bottom: 12px;\n}\n\n.stoa-nos-acord-num-titulo {\n  display: flex;\n  align-items: baseline;\n  gap: 24px;\n  flex: 1;\n}\n\n.stoa-nos-acord-num {\n  font-family: 'DM Serif Display', serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--tostado);\n  letter-spacing: 1px;\n  flex-shrink: 0;\n}\n\n.stoa-nos-acord-titulo {\n  font-family: 'DM Serif Display', serif;\n  font-weight: 400;\n  font-size: clamp(20px, 2vw, 28px);\n  color: var(--negro);\n  line-height: 1.2;\n  transition: color 400ms ease;\n}\n\n.stoa-nos-acord.abierto .stoa-nos-acord-titulo {\n  color: var(--negro);\n}\n\n.stoa-nos-acord-icon {\n  width: 32px;\n  height: 32px;\n  position: relative;\n  flex-shrink: 0;\n  margin-left: 24px;\n}\n\n.stoa-nos-acord-icon::before,\n.stoa-nos-acord-icon::after {\n  content: '';\n  position: absolute;\n  background: var(--negro);\n  transition: all 500ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.stoa-nos-acord-icon::before {\n  top: 50%;\n  left: 0;\n  width: 100%;\n  height: 1px;\n  transform: translateY(-50%);\n}\n\n.stoa-nos-acord-icon::after {\n  top: 0;\n  left: 50%;\n  width: 1px;\n  height: 100%;\n  transform: translateX(-50%);\n}\n\n.stoa-nos-acord.abierto .stoa-nos-acord-icon::before {\n  background: var(--tostado);\n}\n\n.stoa-nos-acord.abierto .stoa-nos-acord-icon::after {\n  transform: translateX(-50%) rotate(90deg);\n  opacity: 0;\n}\n\n.stoa-nos-acord-contenido {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 700ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.stoa-nos-acord.abierto .stoa-nos-acord-contenido {\n  max-height: 600px;\n}\n\n.stoa-nos-acord-contenido-inner {\n  padding: 0 0 36px 38px;\n}\n\n.stoa-nos-acord-contenido p {\n  font-family: 'Montserrat', sans-serif;\n  font-style: normal;\n  font-weight: 300;\n  font-size: clamp(13px, 1vw, 15px);\n  line-height: 1.8;\n  color: var(--musgo);\n  margin-bottom: 16px;\n  letter-spacing: 0.2px;\n}\n\n.stoa-nos-acord-contenido p:last-child {\n  margin-bottom: 0;\n}\n\n.stoa-nos-acord-contenido p.firma {\n  font-family: 'DM Serif Display', serif;\n  font-style: italic;\n  font-weight: 400;\n  font-size: clamp(15px, 1.2vw, 18px);\n  color: var(--negro);\n  margin-top: 0;\n  letter-spacing: 0.3px;\n  line-height: 1.6;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ACTO 3 \u2014 EQUIPO\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.stoa-nos-equipo {\n  background: var(--blanco);\n  padding: 0 0 140px 0;\n}\n\n.stoa-nos-equipo-titulo {\n  text-align: center;\n  margin-bottom: 80px;\n}\n\n.stoa-nos-equipo-titulo span {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  display: inline-block;\n}\n\n.stoa-nos-equipo-titulo span::before,\n.stoa-nos-equipo-titulo span::after {\n  content: '';\n  display: inline-block;\n  width: 32px;\n  height: 1px;\n  background: var(--tostado);\n  vertical-align: middle;\n  margin: 0 16px;\n}\n\n.stoa-nos-equipo-grid {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 80px;\n  padding: 0 40px;\n  max-width: 1100px;\n  margin: 0 auto;\n}\n\n.stoa-nos-socio {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  width: 280px;\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 900ms ease, transform 900ms ease;\n}\n\n.stoa-nos-socio.visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.stoa-nos-foto-wrap {\n  position: relative;\n  width: 240px;\n  height: 300px;\n  margin-bottom: 32px;\n  overflow: hidden;\n}\n\n.stoa-nos-foto-wrap::before {\n  content: '';\n  position: absolute;\n  top: -8px;\n  left: -8px;\n  right: 8px;\n  bottom: 8px;\n  border: 1px solid var(--tostado);\n  opacity: 0;\n  transition: opacity 600ms ease;\n  z-index: 0;\n  pointer-events: none;\n}\n\n.stoa-nos-socio:hover .stoa-nos-foto-wrap::before {\n  opacity: 0.6;\n}\n\n.stoa-nos-foto {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center top;\n  filter: grayscale(100%) brightness(0.92) contrast(1.05);\n  transition: filter 800ms cubic-bezier(0.25, 0.1, 0.25, 1),\n              transform 1800ms cubic-bezier(0.25, 0.1, 0.25, 1);\n  position: relative;\n  z-index: 1;\n}\n\n.stoa-nos-socio:hover .stoa-nos-foto {\n  filter: grayscale(0%) brightness(1) contrast(1);\n  transform: scale(1.04);\n}\n\n.stoa-nos-socio-linea {\n  width: 32px;\n  height: 1px;\n  background: var(--tostado);\n  margin-bottom: 20px;\n  transition: width 600ms ease;\n}\n\n.stoa-nos-socio:hover .stoa-nos-socio-linea {\n  width: 64px;\n}\n\n.stoa-nos-socio-nombre {\n  font-family: 'DM Serif Display', serif;\n  font-weight: 400;\n  font-size: clamp(20px, 1.8vw, 24px);\n  color: var(--negro);\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\n.stoa-nos-socio-cargo {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 2.5px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-bottom: 16px;\n}\n\n.stoa-nos-socio-desc {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 13px;\n  font-weight: 300;\n  color: var(--musgo);\n  line-height: 1.6;\n  letter-spacing: 0.3px;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CIERRE \u2014 CINTA NEGRA\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.stoa-nos-cierre {\n  background: var(--negro);\n  padding: 100px 8vw;\n  text-align: center;\n  position: relative;\n  overflow: hidden;\n}\n\n.stoa-nos-cierre::before {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 100px;\n  height: 1px;\n  background: linear-gradient(to right, transparent, var(--tostado));\n  opacity: 0.4;\n}\n\n.stoa-nos-cierre::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  right: 0;\n  width: 100px;\n  height: 1px;\n  background: linear-gradient(to left, transparent, var(--tostado));\n  opacity: 0.4;\n}\n\n.stoa-nos-cierre-eyebrow {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 3.5px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-bottom: 24px;\n  display: inline-block;\n}\n\n.stoa-nos-cierre-texto {\n  font-family: 'Dancing Script', cursive;\n  font-size: clamp(32px, 4vw, 56px);\n  color: var(--blanco-puro);\n  line-height: 1.2;\n  margin-bottom: 44px;\n  display: block;\n}\n\n.stoa-nos-cierre-cta,\n.stoa-nos-cierre-cta:link,\n.stoa-nos-cierre-cta:visited,\n.stoa-nos-cierre-cta:hover,\n.stoa-nos-cierre-cta:active,\n.stoa-nos-cierre-cta:focus {\n  display: inline-flex;\n  align-items: center;\n  gap: 18px;\n  padding: 18px 0;\n  font-family: 'Montserrat', sans-serif !important;\n  font-size: 12px !important;\n  font-weight: 600 !important;\n  letter-spacing: 3.5px !important;\n  text-transform: uppercase !important;\n  color: #D1BAA6 !important;\n  text-decoration: none !important;\n  position: relative;\n  transition: all 500ms ease;\n  background: none !important;\n  background-color: transparent !important;\n  border: none !important;\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n.stoa-nos-cierre-cta-arrow {\n  color: #D1BAA6 !important;\n}\n\n.stoa-nos-cierre-cta::after {\n  content: '';\n  position: absolute;\n  bottom: 10px;\n  left: 0;\n  width: 100%;\n  height: 1px;\n  background: var(--tostado);\n  transition: width 600ms cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n.stoa-nos-cierre-cta:hover::after {\n  width: 0;\n}\n\n.stoa-nos-cierre-cta-arrow {\n  display: inline-block;\n  transition: transform 500ms cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n.stoa-nos-cierre-cta:hover .stoa-nos-cierre-cta-arrow {\n  transform: translateX(10px);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MOBILE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media (max-width: 900px) {\n  .stoa-nos-manifiesto-grid {\n    grid-template-columns: 1fr;\n    gap: 48px;\n  }\n\n  .stoa-nos-ancla {\n    position: relative;\n    top: 0;\n  }\n\n  .stoa-nos-ancla-palabra {\n    font-size: 64px;\n  }\n}\n\n@media (max-width: 768px) {\n  .stoa-nos-apertura {\n    height: 80vh;\n    min-height: 520px;\n  }\n\n  .stoa-nos-apertura-contenido {\n    padding: 0 24px 60px 24px;\n  }\n\n  .stoa-nos-apertura-eyebrow {\n    padding-left: 40px;\n    margin-bottom: 18px;\n  }\n\n  .stoa-nos-apertura-eyebrow::before {\n    width: 28px;\n  }\n\n  .stoa-nos-scroll-ind {\n    display: none;\n  }\n\n  .stoa-nos-manifiesto {\n    padding: 80px 0;\n  }\n\n  .stoa-nos-manifiesto-grid {\n    padding: 0 24px;\n  }\n\n  .stoa-nos-equipo-grid {\n    flex-direction: column;\n    align-items: center;\n    gap: 56px;\n    padding: 0 24px;\n  }\n\n  .stoa-nos-socio {\n    width: 100%;\n    max-width: 280px;\n  }\n\n  .stoa-nos-foto-wrap {\n    width: 220px;\n    height: 280px;\n  }\n\n  .stoa-nos-equipo {\n    padding-bottom: 80px;\n  }\n\n  .stoa-nos-cierre {\n    padding: 80px 24px;\n  }\n}\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     HTML\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<section class=\"stoa-nos\" id=\"nosotros\">\n\n  <!-- \u2550\u2550\u2550 ACTO 1 \u2014 APERTURA \u2550\u2550\u2550 -->\n  <div class=\"stoa-nos-apertura\" id=\"stoaNosApertura\">\n    <img decoding=\"async\" class=\"stoa-nos-apertura-img\"\n         src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Firefly_Gemini-Flash_estas-haciendo-la-chica-de-la-izquierda-muy-nina-debes-hacerla-como-la-de-la-imagen-685964.png\"\n         alt=\"Equipo STOA en su estudio\">\n    <div class=\"stoa-nos-apertura-overlay\"><\/div>\n\n    <div class=\"stoa-nos-apertura-contenido\">\n      <span class=\"stoa-nos-apertura-eyebrow\">Qui\u00e9nes somos<\/span>\n      <h2 class=\"stoa-nos-apertura-titulo\">El estudio detr\u00e1s de <span>cada espacio.<\/span><\/h2>\n    <\/div>\n\n    <div class=\"stoa-nos-scroll-ind\">\n      <span class=\"stoa-nos-scroll-ind-text\">Scroll<\/span>\n      <span class=\"stoa-nos-scroll-ind-linea\"><\/span>\n    <\/div>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550 ACTO 2 \u2014 MANIFIESTO \u2550\u2550\u2550 -->\n  <div class=\"stoa-nos-manifiesto\">\n    <div class=\"stoa-nos-manifiesto-grid\">\n\n      <!-- Lado izquierdo: palabra ancla -->\n      <div class=\"stoa-nos-ancla\">\n        <span class=\"stoa-nos-ancla-eyebrow\">Nuestra filosof\u00eda<\/span>\n        <span class=\"stoa-nos-ancla-palabra\">Visi\u00f3n.<\/span>\n        <p class=\"stoa-nos-ancla-firma\">No dise\u00f1amos por moda ni por cat\u00e1logo. Dise\u00f1amos desde una certeza: cada espacio puede transformar a quien lo habita.<\/p>\n      <\/div>\n\n      <!-- Lado derecho: acordeones -->\n      <div class=\"stoa-nos-acordeones\">\n\n        <!-- ACORDE\u00d3N 1 -->\n        <div class=\"stoa-nos-acord abierto\">\n          <div class=\"stoa-nos-acord-header\">\n            <div class=\"stoa-nos-acord-num-titulo\">\n              <span class=\"stoa-nos-acord-num\">\u2116 01<\/span>\n              <h3 class=\"stoa-nos-acord-titulo\">El punto de partida<\/h3>\n            <\/div>\n            <span class=\"stoa-nos-acord-icon\"><\/span>\n          <\/div>\n          <div class=\"stoa-nos-acord-contenido\">\n            <div class=\"stoa-nos-acord-contenido-inner\">\n              <p>La mayor\u00eda de los proyectos empiezan por la forma. Nosotros empezamos por algo que casi nadie se detiene a pensar: lo que sentir\u00e1 quien viva ese espacio cada d\u00eda.<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- ACORDE\u00d3N 2 -->\n        <div class=\"stoa-nos-acord\">\n          <div class=\"stoa-nos-acord-header\">\n            <div class=\"stoa-nos-acord-num-titulo\">\n              <span class=\"stoa-nos-acord-num\">\u2116 02<\/span>\n              <h3 class=\"stoa-nos-acord-titulo\">La diferencia<\/h3>\n            <\/div>\n            <span class=\"stoa-nos-acord-icon\"><\/span>\n          <\/div>\n          <div class=\"stoa-nos-acord-contenido\">\n            <div class=\"stoa-nos-acord-contenido-inner\">\n              <p>Esa diferencia, sutil en apariencia pero radical en consecuencia, define cada proyecto de STOA. Porque un volumen bien resuelto puede ser hermoso, pero solo un espacio concebido desde la experiencia humana logra algo m\u00e1s dif\u00edcil: quedarse contigo.<\/p>\n              <p>Somos el primer estudio en Chile que asume esa responsabilidad con rigor. No dise\u00f1amos metros cuadrados, dise\u00f1amos la vida que va a suceder dentro de ellos. Una casa, una oficina, un restaurante, un hotel, una cl\u00ednica: la escala var\u00eda. El compromiso con tu visi\u00f3n, nunca.<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- ACORDE\u00d3N 3 -->\n        <div class=\"stoa-nos-acord\">\n          <div class=\"stoa-nos-acord-header\">\n            <div class=\"stoa-nos-acord-num-titulo\">\n              <span class=\"stoa-nos-acord-num\">\u2116 03<\/span>\n              <h3 class=\"stoa-nos-acord-titulo\">La promesa<\/h3>\n            <\/div>\n            <span class=\"stoa-nos-acord-icon\"><\/span>\n          <\/div>\n          <div class=\"stoa-nos-acord-contenido\">\n            <div class=\"stoa-nos-acord-contenido-inner\">\n              <p class=\"firma\">Eso es lo que construimos. Espacios que no se habitan. Se viven.<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550 ACTO 3 \u2014 EQUIPO \u2550\u2550\u2550 -->\n  <div class=\"stoa-nos-equipo\">\n    <div class=\"stoa-nos-equipo-titulo\">\n      <span>El equipo<\/span>\n    <\/div>\n\n    <div class=\"stoa-nos-equipo-grid\">\n\n      <!-- LADYMAR -->\n      <div class=\"stoa-nos-socio\">\n        <div class=\"stoa-nos-foto-wrap\">\n          <img decoding=\"async\" class=\"stoa-nos-foto\"\n               src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Foto_Ladymar_Ochoa.jpg\"\n               alt=\"Ladymar Ochoa D\u00edaz\">\n        <\/div>\n        <div class=\"stoa-nos-socio-linea\"><\/div>\n        <span class=\"stoa-nos-socio-nombre\">Ladymar Ochoa D\u00edaz<\/span>\n        <span class=\"stoa-nos-socio-cargo\">Directora Creativa<\/span>\n        <span class=\"stoa-nos-socio-desc\">Psic\u00f3loga. Neuroarquitectura, innovaci\u00f3n y gesti\u00f3n.<\/span>\n      <\/div>\n\n      <!-- NINO \u2014 centro -->\n      <div class=\"stoa-nos-socio\">\n        <div class=\"stoa-nos-foto-wrap\">\n          <img decoding=\"async\" class=\"stoa-nos-foto\"\n               src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Foto_Nino_Angulo.jpg\"\n               alt=\"Nino Jos\u00e9 Angulo\">\n        <\/div>\n        <div class=\"stoa-nos-socio-linea\"><\/div>\n        <span class=\"stoa-nos-socio-nombre\">Nino Jos\u00e9 Angulo<\/span>\n        <span class=\"stoa-nos-socio-cargo\">Director de Proyectos<\/span>\n        <span class=\"stoa-nos-socio-desc\">Ingeniero industrial. Obra y control de calidad.<\/span>\n      <\/div>\n\n      <!-- MARY -->\n      <div class=\"stoa-nos-socio\">\n        <div class=\"stoa-nos-foto-wrap\">\n          <img decoding=\"async\" class=\"stoa-nos-foto\"\n               src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Foto_Mary_Angulo2.jpg\"\n               alt=\"Mary Carolina Angulo\">\n        <\/div>\n        <div class=\"stoa-nos-socio-linea\"><\/div>\n        <span class=\"stoa-nos-socio-nombre\">Mary Carolina Angulo<\/span>\n        <span class=\"stoa-nos-socio-cargo\">Directora de Dise\u00f1o<\/span>\n        <span class=\"stoa-nos-socio-desc\">Arquitecta. Dise\u00f1o arquitect\u00f3nico e interiorismo.<\/span>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550 CIERRE \u2014 CINTA NEGRA \u2550\u2550\u2550 -->\n  <div class=\"stoa-nos-cierre\">\n    <span class=\"stoa-nos-cierre-eyebrow\">Hagamos algo extraordinario<\/span>\n    <span class=\"stoa-nos-cierre-texto\">\u00bfEmpezamos tu proyecto?<\/span>\n    <a href=\"#contacto\" class=\"stoa-nos-cierre-cta\">\n      Conversemos\n      <span class=\"stoa-nos-cierre-cta-arrow\">\u2192<\/span>\n    <\/a>\n  <\/div>\n\n<\/section>\n\n<!-- \u2550\u2550\u2550 JAVASCRIPT \u2550\u2550\u2550 -->\n<script>\n(function() {\n\n  \/* \u2500\u2500 Apertura: zoom suave al entrar \u2500\u2500 *\/\n  const apertura = document.getElementById('stoaNosApertura');\n  if (apertura) {\n    const obsApertura = new IntersectionObserver((entries) => {\n      entries.forEach(e => {\n        if (e.isIntersecting) {\n          e.target.classList.add('in-view');\n          obsApertura.unobserve(e.target);\n        }\n      });\n    }, { threshold: 0.1 });\n    obsApertura.observe(apertura);\n  }\n\n  \/* \u2500\u2500 Acordeones \u2500\u2500 *\/\n  const acords = document.querySelectorAll('.stoa-nos-acord');\n  acords.forEach(acord => {\n    const header = acord.querySelector('.stoa-nos-acord-header');\n    header.addEventListener('click', () => {\n      acord.classList.toggle('abierto');\n    });\n  });\n\n  \/* \u2500\u2500 Equipo: stagger animation \u2500\u2500 *\/\n  const socios = document.querySelectorAll('.stoa-nos-socio');\n  const obsSocios = new IntersectionObserver((entries) => {\n    entries.forEach((entry, i) => {\n      if (entry.isIntersecting) {\n        const idx = Array.from(socios).indexOf(entry.target);\n        setTimeout(() => entry.target.classList.add('visible'), idx * 150);\n        obsSocios.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.2 });\n\n  socios.forEach(socio => obsSocios.observe(socio));\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4a22c93 e-con-full e-flex e-con e-parent\" data-id=\"4a22c93\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a4d871 elementor-widget elementor-widget-html\" data-id=\"5a4d871\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SECCI\u00d3N CONTACTO \u2014 STOA GROUP\n     v3 \u2014 FormSubmit + Info contacto + Formas de pago\n     Pegar en UN SOLO widget HTML de Elementor\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display:ital,wght@0,400;1,400&family=Dancing+Script:wght@400;500&family=Montserrat:wght@300;400;500;600&display=swap');\n\n.stoa-contacto * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.stoa-contacto {\n  --negro: #0A0A0A;\n  --tostado: #D1BAA6;\n  --arena: #C1B8B4;\n  --musgo: #827E7A;\n  --blanco: #F5F5F5;\n  --blanco-puro: #FFFFFF;\n  background: var(--blanco);\n  padding: 120px 0 140px 0;\n  font-family: 'Montserrat', sans-serif;\n}\n\n\/* \u2500\u2500\u2500 INTRO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-contacto-intro {\n  max-width: 900px;\n  margin: 0 auto;\n  padding: 0 40px 80px 40px;\n  text-align: center;\n}\n\n.stoa-contacto-eyebrow {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-bottom: 28px;\n  display: inline-block;\n}\n\n.stoa-contacto-eyebrow::before,\n.stoa-contacto-eyebrow::after {\n  content: '';\n  display: inline-block;\n  width: 32px;\n  height: 1px;\n  background: var(--tostado);\n  vertical-align: middle;\n  margin: 0 16px;\n}\n\n.stoa-contacto-titulo {\n  font-family: 'Dancing Script', cursive;\n  font-weight: 400;\n  font-size: clamp(38px, 5vw, 60px);\n  color: var(--negro);\n  line-height: 1.1;\n  margin-bottom: 24px;\n}\n\n.stoa-contacto-subtitulo {\n  font-family: 'Montserrat', sans-serif;\n  font-weight: 300;\n  font-size: 16px;\n  color: var(--musgo);\n  line-height: 1.7;\n  max-width: 560px;\n  margin: 0 auto;\n}\n\n\/* \u2500\u2500\u2500 GRID PRINCIPAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-contacto-grid {\n  display: grid;\n  grid-template-columns: 38fr 62fr;\n  gap: 80px;\n  max-width: 1300px;\n  margin: 0 auto;\n  padding: 0 8vw;\n  align-items: start;\n}\n\n\/* \u2500\u2500\u2500 COLUMNA IZQUIERDA \u2014 INFO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-contacto-info {\n  display: flex;\n  flex-direction: column;\n}\n\n.stoa-contacto-info-bloque {\n  padding: 24px 0;\n  border-bottom: 1px solid rgba(10,10,10,0.08);\n}\n\n.stoa-contacto-info-bloque:first-child {\n  padding-top: 0;\n}\n\n.stoa-contacto-info-label {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-bottom: 10px;\n  display: block;\n}\n\n.stoa-contacto-info-link,\n.stoa-contacto-info-link:link,\n.stoa-contacto-info-link:visited,\n.stoa-contacto-info-link:hover,\n.stoa-contacto-info-link:active {\n  font-family: 'Montserrat', sans-serif !important;\n  font-weight: 400 !important;\n  font-size: 14px !important;\n  color: var(--negro) !important;\n  text-decoration: none !important;\n  display: inline-block;\n  letter-spacing: 0.3px;\n  transition: color 300ms ease;\n  background: none !important;\n  border: none !important;\n}\n\n.stoa-contacto-info-link:hover {\n  color: var(--musgo) !important;\n}\n\n\/* Formas de pago *\/\n.stoa-contacto-pagos {\n  padding: 32px 0 0 0;\n}\n\n.stoa-contacto-pagos-label {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-bottom: 24px;\n  display: block;\n}\n\n.stoa-contacto-pago-item {\n  display: flex;\n  flex-direction: column;\n  padding: 14px 0;\n  border-bottom: 1px solid rgba(10,10,10,0.06);\n}\n\n.stoa-contacto-pago-item:last-child {\n  border-bottom: none;\n}\n\n.stoa-contacto-pago-metodo {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--negro);\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.stoa-contacto-pago-metodo::before {\n  content: '';\n  display: inline-block;\n  width: 20px;\n  height: 1px;\n  background: var(--tostado);\n  flex-shrink: 0;\n}\n\n.stoa-contacto-pago-detalle {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 300;\n  color: var(--musgo);\n  letter-spacing: 0.3px;\n  line-height: 1.6;\n  padding-left: 30px;\n}\n\n\/* \u2500\u2500\u2500 FORMULARIO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-form-wrap {\n  background: var(--blanco-puro);\n  padding: 48px 44px;\n  box-shadow: 0 2px 60px rgba(10,10,10,0.06);\n}\n\n.stoa-form {\n  display: flex;\n  flex-direction: column;\n  gap: 22px;\n}\n\n.stoa-form-fila {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 22px;\n}\n\n.stoa-campo {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.stoa-campo label {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  color: var(--negro);\n}\n\n.stoa-campo input,\n.stoa-campo select,\n.stoa-campo textarea {\n  width: 100%;\n  background: var(--blanco-puro);\n  border: 1px solid rgba(10,10,10,0.15);\n  border-radius: 0;\n  padding: 14px 16px;\n  font-family: 'Montserrat', sans-serif;\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--negro);\n  outline: none;\n  box-shadow: none;\n  -webkit-appearance: none;\n  appearance: none;\n  transition: border-color 300ms ease;\n}\n\n.stoa-campo input:focus,\n.stoa-campo select:focus,\n.stoa-campo textarea:focus {\n  border-color: var(--tostado);\n  outline: none;\n  box-shadow: none;\n}\n\n.stoa-campo input::placeholder,\n.stoa-campo textarea::placeholder {\n  color: var(--arena);\n  font-weight: 300;\n}\n\n\/* Select con flechita custom *\/\n.stoa-campo select {\n  cursor: pointer;\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23827E7A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 16px center;\n  padding-right: 40px;\n}\n\n.stoa-campo textarea {\n  min-height: 110px;\n  max-height: 110px;\n  resize: none;\n  line-height: 1.5;\n}\n\n\/* Bot\u00f3n submit *\/\n.stoa-form-submit {\n  width: 100%;\n  background: var(--negro);\n  color: var(--blanco-puro);\n  border: none;\n  border-radius: 0;\n  padding: 22px 32px;\n  font-family: 'Montserrat', sans-serif;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  cursor: pointer;\n  margin-top: 14px;\n  transition: background 400ms ease, letter-spacing 400ms ease;\n}\n\n.stoa-form-submit:hover {\n  background: var(--musgo);\n  letter-spacing: 5px;\n}\n\n.stoa-form-submit:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n\/* Mensaje de \u00e9xito *\/\n.stoa-form-mensaje {\n  display: none;\n  text-align: center;\n  padding: 60px 20px;\n}\n\n.stoa-form-mensaje.activo {\n  display: block;\n}\n\n.stoa-form-mensaje-icono {\n  width: 60px;\n  height: 60px;\n  margin: 0 auto 24px;\n  border: 1px solid var(--tostado);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'DM Serif Display', serif;\n  font-size: 28px;\n  color: var(--tostado);\n}\n\n.stoa-form-mensaje-titulo {\n  font-family: 'DM Serif Display', serif;\n  font-size: 24px;\n  color: var(--negro);\n  margin-bottom: 12px;\n}\n\n.stoa-form-mensaje-texto {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--musgo);\n  line-height: 1.6;\n  max-width: 360px;\n  margin: 0 auto;\n}\n\n\/* \u2500\u2500\u2500 MOBILE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .stoa-contacto-grid {\n    grid-template-columns: 1fr;\n    gap: 60px;\n    padding: 0 24px;\n  }\n\n  .stoa-form-fila {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 768px) {\n  .stoa-contacto {\n    padding: 80px 0 80px 0;\n  }\n\n  .stoa-contacto-intro {\n    padding: 0 24px 60px 24px;\n  }\n\n  .stoa-form-wrap {\n    padding: 36px 24px;\n  }\n}\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     HTML\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<section class=\"stoa-contacto\" id=\"contacto\">\n\n  <!-- INTRO -->\n  <div class=\"stoa-contacto-intro\">\n    <span class=\"stoa-contacto-eyebrow\">Contacto<\/span>\n    <h2 class=\"stoa-contacto-titulo\">Hablemos de tu proyecto.<\/h2>\n    <p class=\"stoa-contacto-subtitulo\">Cu\u00e9ntanos tu idea. Nosotros nos encargamos de convertirla en el espacio que merece ser.<\/p>\n  <\/div>\n\n  <!-- GRID -->\n  <div class=\"stoa-contacto-grid\">\n\n    <!-- IZQUIERDA \u2014 INFO + PAGOS -->\n    <div class=\"stoa-contacto-info\">\n\n      <div class=\"stoa-contacto-info-bloque\">\n        <span class=\"stoa-contacto-info-label\">Escr\u00edbenos<\/span>\n        <a class=\"stoa-contacto-info-link\" href=\"mailto:hola@stoa.cl\">hola@stoa.cl<\/a>\n      <\/div>\n\n      <!-- FORMAS DE PAGO -->\n      <div class=\"stoa-contacto-pagos\">\n        <span class=\"stoa-contacto-pagos-label\">Formas de pago<\/span>\n\n        <div class=\"stoa-contacto-pago-item\">\n          <span class=\"stoa-contacto-pago-metodo\">Transferencia bancaria<\/span>\n          <span class=\"stoa-contacto-pago-detalle\">Chile \u00b7 Estados Unidos \u00b7 Europa \u00b7 Reino Unido (GBP)<\/span>\n        <\/div>\n\n        <div class=\"stoa-contacto-pago-item\">\n          <span class=\"stoa-contacto-pago-metodo\">Latinoam\u00e9rica<\/span>\n          <span class=\"stoa-contacto-pago-detalle\">Per\u00fa \u00b7 Colombia \u00b7 Argentina \u00b7 Brasil \u00b7 Costa Rica \u00b7 Paraguay<\/span>\n        <\/div>\n\n        <div class=\"stoa-contacto-pago-item\">\n          <span class=\"stoa-contacto-pago-metodo\">Tarjeta cr\u00e9dito \/ d\u00e9bito<\/span>\n          <span class=\"stoa-contacto-pago-detalle\">Visa \u00b7 Mastercard \u00b7 American Express<\/span>\n        <\/div>\n\n        <div class=\"stoa-contacto-pago-item\">\n          <span class=\"stoa-contacto-pago-metodo\">Criptomonedas<\/span>\n          <span class=\"stoa-contacto-pago-detalle\">Bitcoin \u00b7 Ethereum \u00b7 USDT<\/span>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n    <!-- DERECHA \u2014 FORMULARIO -->\n    <div class=\"stoa-form-wrap\">\n\n      <form class=\"stoa-form\" id=\"stoaForm\"\n            action=\"https:\/\/formsubmit.co\/hola@stoa.cl\"\n            method=\"POST\">\n\n        <!-- Configuraci\u00f3n FormSubmit -->\n        <input type=\"hidden\" name=\"_subject\" value=\"Nuevo proyecto STOA\">\n        <input type=\"hidden\" name=\"_template\" value=\"table\">\n        <input type=\"hidden\" name=\"_captcha\" value=\"false\">\n        <input type=\"hidden\" name=\"_next\" value=\"https:\/\/stoa.cl\/?enviado=ok\">\n        <input type=\"text\" name=\"_honey\" style=\"display:none\">\n\n        <div class=\"stoa-form-fila\">\n          <div class=\"stoa-campo\">\n            <label for=\"stoa-nombre\">Nombre<\/label>\n            <input type=\"text\" id=\"stoa-nombre\" name=\"Nombre\" placeholder=\"Tu nombre\" required>\n          <\/div>\n          <div class=\"stoa-campo\">\n            <label for=\"stoa-email\">Email<\/label>\n            <input type=\"email\" id=\"stoa-email\" name=\"Email\" placeholder=\"email@dominio.cl\" required>\n          <\/div>\n        <\/div>\n\n        <div class=\"stoa-form-fila\">\n          <div class=\"stoa-campo\">\n            <label for=\"stoa-tel\">Tel\u00e9fono<\/label>\n            <input type=\"tel\" id=\"stoa-tel\" name=\"Tel\u00e9fono\" placeholder=\"+56 9 .... ....\">\n          <\/div>\n          <div class=\"stoa-campo\">\n            <label for=\"stoa-tipo\">Tipo de proyecto<\/label>\n            <select id=\"stoa-tipo\" name=\"Tipo de proyecto\" required>\n              <option value=\"Arquitectura\">Arquitectura<\/option>\n              <option value=\"Dise\u00f1o de Interiores\">Dise\u00f1o de Interiores<\/option>\n              <option value=\"Proyecto a Medida\">Proyecto a Medida<\/option>\n              <option value=\"Otro\">Otro<\/option>\n            <\/select>\n          <\/div>\n        <\/div>\n\n        <div class=\"stoa-campo\">\n          <label for=\"stoa-msg\">Cu\u00e9ntanos sobre tu proyecto<\/label>\n          <textarea id=\"stoa-msg\" name=\"Mensaje\"\n                    placeholder=\"Superficie, ubicaci\u00f3n, plazos, rango presupuestario...\"><\/textarea>\n        <\/div>\n\n        <button type=\"submit\" class=\"stoa-form-submit\">Enviar mensaje \u2192<\/button>\n\n      <\/form>\n\n      <!-- Mensaje de \u00e9xito (se muestra al volver con ?enviado=ok) -->\n      <div class=\"stoa-form-mensaje\" id=\"stoaMensajeOk\">\n        <div class=\"stoa-form-mensaje-icono\">\u2713<\/div>\n        <h3 class=\"stoa-form-mensaje-titulo\">Gracias por escribirnos<\/h3>\n        <p class=\"stoa-form-mensaje-texto\">Hemos recibido tu mensaje. Te responderemos a la brevedad para conversar sobre tu proyecto.<\/p>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n<!-- \u2550\u2550\u2550 JAVASCRIPT \u2550\u2550\u2550 -->\n<script>\n(function() {\n  \/\/ Si la URL trae ?enviado=ok mostramos el mensaje de \u00e9xito\n  if (window.location.search.indexOf('enviado=ok') !== -1) {\n    const form = document.getElementById('stoaForm');\n    const msg  = document.getElementById('stoaMensajeOk');\n    if (form && msg) {\n      form.style.display = 'none';\n      msg.classList.add('activo');\n      \/\/ Hacemos scroll al contacto\n      document.getElementById('contacto').scrollIntoView({ behavior: 'smooth' });\n    }\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-71cb48a e-flex e-con-boxed e-con e-parent\" data-id=\"71cb48a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a97a474 elementor-widget elementor-widget-html\" data-id=\"a97a474\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     BOTONES FLOTANTES \u2014 STOA GROUP\n     WhatsApp + Back to top\n     Pegar en widget HTML de Elementor (puede ir en cualquier secci\u00f3n,\n     se recomienda al final de la p\u00e1gina)\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<style>\n.stoa-flotantes {\n  position: fixed;\n  bottom: 36px;\n  right: 32px;\n  z-index: 9990;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n}\n\n\/* Bot\u00f3n base *\/\n.stoa-btn-flotante {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none !important;\n  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),\n              opacity 400ms ease;\n}\n\n.stoa-btn-flotante svg {\n  width: 18px;\n  height: 18px;\n  flex-shrink: 0;\n}\n\n\/* WhatsApp *\/\n.stoa-btn-wa {\n  background: #0A0A0A;\n  border: 1px solid rgba(209,186,166,0.4);\n}\n\n.stoa-btn-wa svg {\n  fill: #D1BAA6;\n}\n\n.stoa-btn-wa:hover {\n  transform: translateY(-4px) scale(1.05);\n  border-color: #D1BAA6;\n}\n\n\/* Back to top \u2014 oculto por defecto *\/\n.stoa-btn-top {\n  background: #0A0A0A !important;\n  border: 1px solid rgba(209,186,166,0.4) !important;\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(10px);\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n.stoa-btn-top.visible {\n  opacity: 1;\n  pointer-events: all;\n  transform: translateY(0);\n}\n\n.stoa-btn-top:hover {\n  transform: translateY(-4px) scale(1.05);\n  border-color: #D1BAA6 !important;\n  background: #0A0A0A !important;\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n.stoa-btn-top:focus,\n.stoa-btn-top:active,\n.stoa-btn-top:focus-visible {\n  background: #0A0A0A !important;\n  border-color: rgba(209,186,166,0.4) !important;\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n.stoa-btn-top svg {\n  fill: none;\n  stroke: #D1BAA6;\n  stroke-width: 1.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n\/* Tooltip *\/\n.stoa-btn-flotante::before {\n  content: attr(data-tooltip);\n  position: absolute;\n  right: 60px;\n  background: #0A0A0A;\n  color: #D1BAA6;\n  font-family: 'Montserrat', sans-serif;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  padding: 6px 12px;\n  white-space: nowrap;\n  border: 1px solid rgba(209,186,166,0.3);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 300ms ease;\n}\n\n.stoa-btn-flotante:hover::before {\n  opacity: 1;\n}\n\n@media (max-width: 768px) {\n  .stoa-flotantes {\n    bottom: 24px;\n    right: 20px;\n  }\n\n  .stoa-btn-flotante::before {\n    display: none;\n  }\n}\n<\/style>\n\n<!-- \u2550\u2550\u2550 HTML \u2550\u2550\u2550 -->\n<div class=\"stoa-flotantes\">\n\n  <!-- BACK TO TOP -->\n  <button class=\"stoa-btn-flotante stoa-btn-top\"\n          id=\"stoaBtnTop\"\n          data-tooltip=\"Volver arriba\"\n          aria-label=\"Volver arriba\">\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <polyline points=\"18 15 12 9 6 15\"><\/polyline>\n    <\/svg>\n  <\/button>\n\n  <!-- WHATSAPP -->\n  <a class=\"stoa-btn-flotante stoa-btn-wa\"\n     href=\"https:\/\/wa.me\/56942808090?text=Hola%20STOA%2C%20me%20gustar%C3%ADa%20conocer%20m%C3%A1s%20sobre%20sus%20servicios.\"\n     target=\"_blank\"\n     rel=\"noopener\"\n     data-tooltip=\"WhatsApp\"\n     aria-label=\"Contactar por WhatsApp\">\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/>\n    <\/svg>\n  <\/a>\n\n<\/div>\n\n<!-- \u2550\u2550\u2550 JAVASCRIPT \u2550\u2550\u2550 -->\n<script>\n(function() {\n  const btnTop = document.getElementById('stoaBtnTop');\n\n  \/\/ Mostrar\/ocultar back to top seg\u00fan scroll\n  window.addEventListener('scroll', () => {\n    if (window.scrollY > 400) {\n      btnTop.classList.add('visible');\n    } else {\n      btnTop.classList.remove('visible');\n    }\n  }, { passive: true });\n\n  \/\/ Scroll suave al top\n  btnTop.addEventListener('click', () => {\n    window.scrollTo({ top: 0, behavior: 'smooth' });\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a5298b1 e-con-full e-flex e-con e-parent\" data-id=\"a5298b1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-465ca03 elementor-widget elementor-widget-html\" data-id=\"465ca03\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     FOOTER \u2014 STOA GROUP\n     v1 \u2014 Fondo negro, logo tostado, redes, aviso legal\n     Pegar en widget HTML de Elementor\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display:ital,wght@0,400;1,400&family=Montserrat:wght@300;400;500;600&display=swap');\n\n.stoa-footer * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.stoa-footer {\n  --negro: #0A0A0A;\n  --tostado: #D1BAA6;\n  --arena: #C1B8B4;\n  --musgo: #827E7A;\n  --blanco: #F5F5F5;\n  background: var(--negro);\n  font-family: 'Montserrat', sans-serif;\n}\n\n\/* \u2500\u2500\u2500 CUERPO PRINCIPAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-footer-body {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  align-items: start;\n  gap: 60px;\n  max-width: 1300px;\n  margin: 0 auto;\n  padding: 80px 8vw 64px 8vw;\n}\n\n\/* \u2500\u2500\u2500 COLUMNA IZQUIERDA \u2014 CONTACTO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-footer-col-label {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  color: var(--tostado);\n  margin-bottom: 20px;\n  display: block;\n}\n\n.stoa-footer-contacto-item {\n  display: block;\n  font-family: 'Montserrat', sans-serif;\n  font-size: 13px;\n  font-weight: 300;\n  color: var(--arena);\n  letter-spacing: 0.3px;\n  line-height: 1.5;\n  margin-bottom: 8px;\n  text-decoration: none !important;\n  transition: color 300ms ease;\n}\n\n.stoa-footer-contacto-item:hover {\n  color: var(--tostado) !important;\n}\n\n.stoa-footer-contacto-item:last-child {\n  margin-bottom: 0;\n}\n\n\/* \u2500\u2500\u2500 COLUMNA CENTRO \u2014 LOGO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-footer-logo-wrap {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 28px;\n}\n\n.stoa-footer-logo {\n  width: 120px;\n  height: auto;\n  opacity: 0.95;\n}\n\n\/* Redes sociales *\/\n.stoa-footer-redes {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.stoa-footer-red,\n.stoa-footer-red:link,\n.stoa-footer-red:visited {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: 1px solid rgba(209,186,166,0.3);\n  color: var(--arena) !important;\n  text-decoration: none !important;\n  transition: border-color 400ms ease, color 400ms ease, transform 400ms ease;\n}\n\n.stoa-footer-red:hover {\n  border-color: var(--tostado) !important;\n  color: var(--tostado) !important;\n  transform: translateY(-2px);\n}\n\n.stoa-footer-red svg {\n  width: 15px;\n  height: 15px;\n  fill: currentColor;\n}\n\n\/* \u2500\u2500\u2500 COLUMNA DERECHA \u2014 AVISO LEGAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-footer-legal-texto {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 300;\n  color: var(--musgo);\n  line-height: 1.7;\n  letter-spacing: 0.2px;\n}\n\n\/* \u2500\u2500\u2500 SEPARADOR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-footer-sep {\n  width: 100%;\n  height: 1px;\n  background: rgba(209,186,166,0.12);\n  max-width: 1300px;\n  margin: 0 auto;\n}\n\n\/* \u2500\u2500\u2500 BARRA INFERIOR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.stoa-footer-bottom {\n  max-width: 1300px;\n  margin: 0 auto;\n  padding: 24px 8vw;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 20px;\n}\n\n.stoa-footer-copyright {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 300;\n  color: var(--musgo);\n  letter-spacing: 0.3px;\n}\n\n.stoa-footer-firma {\n  font-family: 'Montserrat', sans-serif;\n  font-size: 11px;\n  font-weight: 300;\n  color: var(--musgo);\n  letter-spacing: 0.3px;\n  font-style: italic;\n}\n\n\/* \u2500\u2500\u2500 MOBILE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@media (max-width: 900px) {\n  .stoa-footer-body {\n    grid-template-columns: 1fr;\n    gap: 48px;\n    padding: 60px 24px 48px 24px;\n    text-align: center;\n  }\n\n  .stoa-footer-logo-wrap {\n    order: -1;\n  }\n\n  .stoa-footer-redes {\n    justify-content: center;\n  }\n\n  .stoa-footer-bottom {\n    flex-direction: column;\n    text-align: center;\n    padding: 20px 24px;\n    gap: 8px;\n  }\n}\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     HTML\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<footer class=\"stoa-footer\">\n\n  <div class=\"stoa-footer-body\">\n\n    <!-- IZQUIERDA \u2014 CONTACTO -->\n    <div class=\"stoa-footer-contacto\">\n      <span class=\"stoa-footer-col-label\">Cont\u00e1ctanos<\/span>\n      <a class=\"stoa-footer-contacto-item\" href=\"mailto:hola@stoa.cl\">hola@stoa.cl<\/a>\n      <span class=\"stoa-footer-contacto-item\">Badajoz 100, Of. 1014<\/span>\n      <span class=\"stoa-footer-contacto-item\">Las Condes, Santiago<\/span>\n    <\/div>\n\n    <!-- CENTRO \u2014 LOGO + REDES -->\n    <div class=\"stoa-footer-logo-wrap\">\n      <img decoding=\"async\" class=\"stoa-footer-logo\"\n           src=\"https:\/\/stoa.cl\/wp-content\/uploads\/2026\/04\/Logo-Transparente-Tostado-Premium-e1776630788801.png\"\n           alt=\"STOA Group\">\n\n      <div class=\"stoa-footer-redes\">\n\n        <!-- Instagram -->\n        <a class=\"stoa-footer-red\"\n           href=\"https:\/\/www.instagram.com\/stoa.cl?igsh=MWMzNGpjN3F6cWE2cQ%3D%3D&utm_source=qr\"\n           target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/>\n          <\/svg>\n        <\/a>\n\n        <!-- TikTok -->\n        <a class=\"stoa-footer-red\"\n           href=\"https:\/\/www.tiktok.com\/@stoa.cl?_r=1&_t=ZS-95tzI4LMyfM\"\n           target=\"_blank\" rel=\"noopener\" aria-label=\"TikTok\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.76a4.85 4.85 0 01-1.01-.07z\"\/>\n          <\/svg>\n        <\/a>\n\n        <!-- Pinterest -->\n        <a class=\"stoa-footer-red\"\n           href=\"https:\/\/pin.it\/4v06Jjae1\"\n           target=\"_blank\" rel=\"noopener\" aria-label=\"Pinterest\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z\"\/>\n          <\/svg>\n        <\/a>\n\n        <!-- LinkedIn -->\n        <a class=\"stoa-footer-red\"\n           href=\"https:\/\/www.linkedin.com\/company\/stoa-group-servicios-de-arquitectura\/about\/?viewAsMember=true\"\n           target=\"_blank\" rel=\"noopener\" aria-label=\"LinkedIn\">\n          <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\/>\n          <\/svg>\n        <\/a>\n\n      <\/div>\n    <\/div>\n\n    <!-- DERECHA \u2014 AVISO LEGAL -->\n    <div class=\"stoa-footer-legal\">\n      <span class=\"stoa-footer-col-label\">Aviso legal<\/span>\n      <p class=\"stoa-footer-legal-texto\">Todo el contenido de este sitio es propiedad exclusiva de STOA Group SpA y est\u00e1 protegido por la Ley N\u00b0 17.336 de Propiedad Intelectual. Queda prohibida su reproducci\u00f3n o uso sin autorizaci\u00f3n expresa.<\/p>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"stoa-footer-sep\"><\/div>\n\n  <!-- BARRA INFERIOR -->\n  <div class=\"stoa-footer-bottom\">\n    <span class=\"stoa-footer-copyright\">\u00a9 2026 STOA Group SpA \u00b7 Todos los derechos reservados.<\/span>\n    <span class=\"stoa-footer-firma\">Vis\u00edtanos en stoa.cl<\/span>\n  <\/div>\n\n<\/footer>\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>Portafolio Servicios Nosotros Cotizar X STOA \u00b7 Estudio de Arquitectura Dise\u00f1amos espacios que no se olvidan. Arquitectura, interiores y construcci\u00f3n bajo una sola visi\u00f3n Descubre STOA \u2192 Cada proyecto cuenta una historia. La tuya. Dise\u00f1amos espacios irrepetibles porque cada cliente lo es Ver proyectos \u2192 El primer estudio en Chile pensado para c\u00f3mo te har\u00e1 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":17,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-51","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stoa.cl\/index.php?rest_route=\/wp\/v2\/pages\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stoa.cl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stoa.cl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stoa.cl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stoa.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=51"}],"version-history":[{"count":82,"href":"https:\/\/stoa.cl\/index.php?rest_route=\/wp\/v2\/pages\/51\/revisions"}],"predecessor-version":[{"id":246,"href":"https:\/\/stoa.cl\/index.php?rest_route=\/wp\/v2\/pages\/51\/revisions\/246"}],"up":[{"embeddable":true,"href":"https:\/\/stoa.cl\/index.php?rest_route=\/wp\/v2\/pages\/17"}],"wp:attachment":[{"href":"https:\/\/stoa.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}