/* ===================================================================== DCC CLIMATE CONTROL — SISTEMA DE DISEÑO v5 (Brilla SEO Local) Todas las transiciones duran 0.3s. Estilo: limpio, neutro, inspirado en Untitled UI / coss ui. Cada bloque tiene título "EFECTO:". Para quitar un efecto, borra su bloque completo. Para cambiar colores, edita los valores del bloque. --------------------------------------------------------------------- 01 BASE 02 EFECTO: Degradado de fondo (secciones) 03 EFECTO: Overlay degradado para imagen de fondo (oscuro / claro) 04 EFECTO: Botones (luz + brillo + flecha + foco) 05 EFECTO: Tarjetas (íconos al pasar el mouse) 06 EFECTO: Imagen zoom + destello cortina 07 EFECTO: Enlaces subrayados 08 EFECTO: Burbujas flotantes del hero 09 ICONOS SVG (biblioteca de medios) 10 EFECTO: Barra de app móvil (crece y empuja a las demás) 11 EFECTO: Aparición al hacer scroll (solo CSS) 12 ACCESIBILIDAD: movimiento reducido ===================================================================== */ /* ---------- 01 BASE ---------- */ html{scroll-behavior:smooth} html,body{overflow-x:clip} body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3{text-wrap:balance} p{text-wrap:pretty} :focus-visible{outline:.125rem solid #18181B;outline-offset:.1875rem;border-radius:.375rem} /* ---------- 02 EFECTO: Degradado de fondo (secciones) ---------- Cambia los colores de cada degradado aquí. */ .elementor .dcc-hero{background: radial-gradient(48rem 34rem at 0% 0%,#FFEBDD 0%,rgba(255,235,221,0) 62%), radial-gradient(40rem 30rem at 100% 10%,#FFF5EC 0%,rgba(255,245,236,0) 60%), radial-gradient(36rem 26rem at 70% 105%,#EFF6F0 0%,rgba(239,246,240,0) 60%), #FFFCF9} .elementor .dcc-bg-cream{background:linear-gradient(180deg,#FFF9F3 0%,#FFFFFF 100%)} .elementor .dcc-bg-warm{background: radial-gradient(42rem 30rem at 100% 0%,#FFF0E5 0%,rgba(255,240,229,0) 60%), radial-gradient(36rem 26rem at 0% 100%,#F2F7F2 0%,rgba(242,247,242,0) 60%), #FFFDFB} .elementor .dcc-bg-surface{background:linear-gradient(180deg,#FFFFFF 0%,#FAF8F5 100%)} /* ---------- 03 EFECTO: Overlay degradado para imagen de fondo ---------- Pon la imagen de fondo en un flexbox y agrégale la clase: · dcc-overlay-dark → negro a transparente (para imágenes claras / texto blanco) · dcc-overlay-light → blanco a transparente (para imágenes oscuras / texto oscuro) El degradado se desvanece a la mitad de la pantalla. En móvil va de abajo hacia arriba. */ .elementor .dcc-overlay-dark::before,.elementor .dcc-overlay-light::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit} .elementor .dcc-overlay-dark::before{background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 30%,rgba(0,0,0,0) 55%)} .elementor .dcc-overlay-light::before{background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.7) 30%,rgba(255,255,255,0) 55%)} @media (max-width:47.9375rem){ .elementor .dcc-overlay-dark::before{background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 40%,rgba(0,0,0,0) 70%)} .elementor .dcc-overlay-light::before{background:linear-gradient(0deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.7) 40%,rgba(255,255,255,0) 70%)} } /* ---------- 04 EFECTO: Botones (luz desde abajo + brillo + flecha + foco) ---------- Colores del botón: en las clases dcc-btn--solid / dcc-btn--outline (Elementor). */ .elementor .dcc-btn{position:relative;overflow:hidden;isolation:isolate;text-decoration:none!important;-webkit-tap-highlight-color:transparent} .elementor .dcc-btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 140% at 50% 130%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 60%);opacity:0;transition:opacity .3s} .elementor .dcc-btn--outline::before{background:radial-gradient(120% 140% at 50% 130%,rgba(24,24,27,.08) 0%,rgba(24,24,27,0) 60%)} .elementor .dcc-btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-110%);transition:transform .3s cubic-bezier(.22,1,.36,1)} .elementor .dcc-btn--outline::after{background:linear-gradient(105deg,transparent 30%,rgba(24,24,27,.06) 50%,transparent 70%)} .elementor .dcc-btn:hover::before{opacity:1} .elementor .dcc-btn:hover::after{transform:translateX(110%)} .elementor .dcc-btn:active{transform:scale(.97)} .elementor .dcc-btn:focus-visible{outline:none;box-shadow:0 0 0 .25rem rgba(24,24,27,.14)} .elementor .dcc-btn svg{transition:transform .3s cubic-bezier(.22,1,.36,1)} .elementor .dcc-btn:hover svg:last-child{transform:translateX(.25rem)} /* ---------- 05 EFECTO: Tarjetas (íconos al pasar el mouse) ---------- Subida y sombra están en la clase dcc-card (Elementor). Aquí solo el ícono. */ .elementor .dcc-card .dcc-icon-badge{transition:transform .3s cubic-bezier(.22,1,.36,1)} .elementor .dcc-card:hover .dcc-icon-badge{transform:scale(1.06) rotate(-4deg)} /* ---------- 06 EFECTO: Imagen zoom + destello cortina ---------- Se aplica a las clases dcc-img, dcc-hero-media y dcc-fx-shine. */ .elementor .dcc-img,.elementor .dcc-fx-shine{overflow:hidden} .elementor .dcc-img::after,.elementor .dcc-fx-shine::after,.elementor .dcc-hero-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%) no-repeat;background-size:250% 100%;background-position:150% 0;transition:background-position .3s cubic-bezier(.22,1,.36,1)} .elementor .dcc-hero-media::after{inset:.5rem;border-radius:1.5rem} .elementor .dcc-img:hover::after,.elementor .dcc-fx-shine:hover::after,.elementor .dcc-hero-media:hover::after{background-position:-50% 0} .elementor .dcc-img img,.elementor .dcc-fx-shine img{transition:transform .3s cubic-bezier(.22,1,.36,1)} .elementor .dcc-img:hover img,.elementor .dcc-fx-shine:hover img{transform:scale(1.04)} /* ---------- 07 EFECTO: Enlaces subrayados ---------- */ .elementor .dcc-cta a,.elementor .dcc-text a,.elementor .dcc-faq-a a,.elementor .dcc-lead a{color:#18181B;font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% .0625rem no-repeat;transition:background-size .3s} .elementor .dcc-cta a:hover,.elementor .dcc-text a:hover,.elementor .dcc-faq-a a:hover,.elementor .dcc-lead a:hover{background-size:100% .125rem} .elementor .dcc-cta a::after{content:"\00a0\2192";display:inline-block;transition:transform .3s} .elementor .dcc-cta a:hover::after{transform:translateX(.25rem)} .elementor .dcc-link a,.elementor .dcc-chip a{color:inherit!important;text-decoration:none} .elementor .dcc-chip{position:relative;cursor:pointer} .elementor .dcc-chip a::before{content:"";position:absolute;inset:0;border-radius:inherit} /* ---------- 08 EFECTO: Burbujas flotantes del hero ---------- */ .elementor .dcc-float{z-index:3;animation:dcc-float 6s ease-in-out infinite} .elementor .dcc-float--br{animation-delay:-3s} .elementor .dcc-float--tr{animation-delay:-1.5s} @keyframes dcc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-.4rem)}} @media (max-width:47.9375rem){ .elementor .dcc-float{padding:.4rem .75rem .4rem .4rem!important;gap:.5rem!important} .elementor .dcc-float .dcc-float__ico{width:2rem!important;height:2rem!important} .elementor .dcc-float-text{font-size:.75rem!important} .elementor .dcc-float--tl{left:.6rem!important;top:auto!important;bottom:.9rem} .elementor .dcc-float--br{right:.6rem!important;bottom:auto!important;top:.9rem} } /* ---------- 09 ICONOS SVG (biblioteca de medios) ---------- Los íconos de línea se dibujan solo con trazo. Para un ícono relleno (estrella, WhatsApp) agrega la clase dcc-svg--fill. El color se cambia en Elementor. */ .elementor .e-svg-base svg{fill:none!important;stroke:currentColor} .elementor .dcc-svg--fill svg{fill:currentColor!important} .elementor .dcc-faq-item:hover .dcc-featured-icon{transform:translateY(-.125rem);box-shadow:0 .5rem 1rem -.5rem rgba(10,13,18,.2)} /* ---------- 10 EFECTO: Barra de app móvil (crece y empuja a las demás) ---------- La barra es un flexbox con la clase dcc-appbar (solo visible en móvil). */ .elementor .dcc-appbar__item{will-change:transform;transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .3s} .elementor .dcc-appbar__item:hover,.elementor .dcc-appbar__item:active{transform:translateY(-.25rem) scale(1.12);background-color:#F4F4F5} .elementor .dcc-appbar:has(.dcc-appbar__item:hover) .dcc-appbar__item:not(:hover){transform:scale(.94)} @media (max-width:47.9375rem){body:has(.dcc-appbar){padding-bottom:5.75rem}} /* ---------- 11 EFECTO: Aparición al hacer scroll (100% CSS, sin JavaScript) ---------- Se aplica solo a los bloques dentro de secciones con la clase dcc-section. Usa "translate" y "opacity" para no chocar con el hover de las tarjetas. Navegadores sin soporte simplemente muestran el contenido. */ @supports (animation-timeline:view()){ .elementor .dcc-section .dcc-container-narrow,.elementor .dcc-section .dcc-col,.elementor .dcc-section .dcc-img,.elementor .dcc-section .dcc-cards>*{animation:dcc-in linear both;animation-timeline:view();animation-range:entry 0% entry 35%} } @keyframes dcc-in{from{opacity:0;translate:0 1.5rem}to{opacity:1;translate:0 0}} .elementor-editor-active .dcc-section *{animation:none!important} /* ---------- 12 ACCESIBILIDAD: movimiento reducido ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }