.elementor-kit-600{--e-global-color-primary:#021F4B;--e-global-color-secondary:#FF5E10;--e-global-color-text:#000000;--e-global-color-accent:#FFFFFF;--e-global-color-59dccff:#F0F4F9;--e-global-typography-primary-font-family:"Teko";--e-global-typography-primary-font-size:16px;--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:1em;--e-global-typography-primary-letter-spacing:0px;--e-global-typography-secondary-font-family:"Rubik";--e-global-typography-secondary-font-size:16px;--e-global-typography-secondary-font-weight:bold;--e-global-typography-secondary-line-height:1em;--e-global-typography-secondary-letter-spacing:0px;--e-global-typography-text-font-family:"Rubik";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.9em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-5a503a8-font-family:"Rubik";--e-global-typography-5a503a8-font-size:16px;--e-global-typography-5a503a8-font-weight:500;--e-global-typography-5a503a8-text-transform:uppercase;--e-global-typography-5a503a8-line-height:1em;--e-global-typography-5a503a8-letter-spacing:3.2px;--e-global-typography-b0ffb91-font-family:"Teko";--e-global-typography-b0ffb91-font-size:87px;--e-global-typography-b0ffb91-font-weight:400;--e-global-typography-b0ffb91-text-transform:uppercase;--e-global-typography-b0ffb91-line-height:80px;--e-global-typography-b0ffb91-letter-spacing:0px;--e-global-typography-7e54d4a-font-family:"Teko";--e-global-typography-7e54d4a-font-size:20px;--e-global-typography-7e54d4a-font-weight:400;--e-global-typography-7e54d4a-text-transform:uppercase;--e-global-typography-7e54d4a-line-height:1em;--e-global-typography-7e54d4a-letter-spacing:0px;--e-global-typography-7fc9c91-font-family:"Teko";--e-global-typography-7fc9c91-font-size:28px;--e-global-typography-7fc9c91-font-weight:400;--e-global-typography-7fc9c91-text-transform:uppercase;--e-global-typography-7fc9c91-line-height:1.4em;--e-global-typography-7fc9c91-letter-spacing:0px;--e-global-typography-0bf0bfd-font-family:"Rubik";--e-global-typography-0bf0bfd-font-size:14px;--e-global-typography-0bf0bfd-font-weight:bold;--e-global-typography-0bf0bfd-line-height:1em;--e-global-typography-0bf0bfd-letter-spacing:0px;--e-global-typography-066ab7c-font-family:"Rubik";--e-global-typography-066ab7c-font-size:18px;--e-global-typography-066ab7c-font-weight:400;--e-global-typography-066ab7c-line-height:1.4em;--e-global-typography-066ab7c-letter-spacing:0px;--e-global-typography-d59858f-font-family:"Teko";--e-global-typography-d59858f-font-size:70px;--e-global-typography-d59858f-font-weight:400;--e-global-typography-d59858f-text-transform:uppercase;--e-global-typography-d59858f-line-height:1em;--e-global-typography-d59858f-letter-spacing:0px;--e-global-typography-05f62ac-font-family:"Teko";--e-global-typography-05f62ac-font-size:22px;--e-global-typography-05f62ac-font-weight:400;--e-global-typography-05f62ac-text-transform:uppercase;--e-global-typography-05f62ac-line-height:0.7em;--e-global-typography-05f62ac-letter-spacing:0px;--e-global-typography-8f7fae2-font-family:"Rubik";--e-global-typography-8f7fae2-font-size:15px;--e-global-typography-8f7fae2-font-weight:500;--e-global-typography-8f7fae2-text-transform:uppercase;--e-global-typography-8f7fae2-line-height:1em;--e-global-typography-8f7fae2-letter-spacing:0px;--e-global-typography-04d0bac-font-family:"Teko";--e-global-typography-04d0bac-font-size:24px;--e-global-typography-04d0bac-font-weight:400;--e-global-typography-04d0bac-text-transform:uppercase;--e-global-typography-04d0bac-line-height:1em;--e-global-typography-04d0bac-letter-spacing:0px;--e-global-typography-f833b34-font-family:"Rubik";--e-global-typography-f833b34-font-size:16px;--e-global-typography-f833b34-font-weight:bold;--e-global-typography-f833b34-text-transform:uppercase;--e-global-typography-f833b34-line-height:1em;--e-global-typography-f833b34-letter-spacing:0px;--e-global-typography-7b41834-font-family:"Teko";--e-global-typography-7b41834-font-size:22px;--e-global-typography-7b41834-font-weight:400;--e-global-typography-7b41834-text-transform:uppercase;--e-global-typography-7b41834-line-height:1.2em;--e-global-typography-7b41834-letter-spacing:0px;--e-global-typography-7078a19-font-family:"Teko";--e-global-typography-7078a19-font-size:20px;--e-global-typography-7078a19-font-weight:400;--e-global-typography-7078a19-text-transform:uppercase;--e-global-typography-7078a19-line-height:1em;--e-global-typography-7078a19-letter-spacing:0px;--e-global-typography-7da9021-font-family:"Rubik";--e-global-typography-7da9021-font-size:8px;--e-global-typography-7da9021-font-weight:300;--e-global-typography-7da9021-text-transform:uppercase;--e-global-typography-7da9021-line-height:1.9em;--e-global-typography-7da9021-letter-spacing:0px;--e-global-typography-fc173df-font-family:"Rubik";--e-global-typography-fc173df-font-size:10px;--e-global-typography-fc173df-font-weight:300;--e-global-typography-fc173df-line-height:1em;--e-global-typography-fc173df-letter-spacing:0px;--e-global-typography-914981f-font-family:"Teko";--e-global-typography-914981f-font-size:30px;--e-global-typography-914981f-font-weight:400;--e-global-typography-914981f-text-transform:uppercase;--e-global-typography-914981f-line-height:1.4em;--e-global-typography-914981f-letter-spacing:0px;--e-global-typography-b1a14f7-font-family:"Rubik";--e-global-typography-b1a14f7-font-size:18px;--e-global-typography-b1a14f7-font-weight:500;--e-global-typography-b1a14f7-line-height:1.9em;--e-global-typography-b1a14f7-letter-spacing:0px;--e-global-typography-c36fd80-font-family:"Teko";--e-global-typography-c36fd80-font-size:36px;--e-global-typography-c36fd80-font-weight:500;--e-global-typography-c36fd80-text-transform:none;--e-global-typography-c36fd80-line-height:1.4em;--e-global-typography-c36fd80-letter-spacing:0px;--e-global-typography-ec38463-font-family:"Rubik";--e-global-typography-ec38463-font-size:16px;--e-global-typography-ec38463-font-weight:500;--e-global-typography-ec38463-text-transform:none;--e-global-typography-ec38463-line-height:1.9em;--e-global-typography-ec38463-letter-spacing:0px;--e-global-typography-5c763cc-font-family:"Rubik";--e-global-typography-5c763cc-font-size:16px;--e-global-typography-5c763cc-font-weight:400;--e-global-typography-5c763cc-text-transform:none;--e-global-typography-5c763cc-line-height:1.9em;--e-global-typography-5c763cc-letter-spacing:0px;--e-global-typography-b4d8c13-font-family:"Rubik";--e-global-typography-b4d8c13-font-size:25px;--e-global-typography-b4d8c13-font-weight:500;--e-global-typography-b4d8c13-line-height:1.2em;--e-global-typography-b4d8c13-letter-spacing:0px;--e-global-typography-301dc88-font-family:"Teko";--e-global-typography-301dc88-font-size:32px;--e-global-typography-301dc88-font-weight:400;--e-global-typography-301dc88-text-transform:uppercase;--e-global-typography-301dc88-line-height:1.4em;--e-global-typography-301dc88-letter-spacing:0px;--e-global-typography-0867824-font-family:"Rubik";--e-global-typography-0867824-font-size:15px;--e-global-typography-0867824-font-weight:500;--e-global-typography-0867824-line-height:1em;--e-global-typography-0867824-letter-spacing:0px;--e-global-typography-e8f1a50-font-family:"Teko";--e-global-typography-e8f1a50-font-size:19px;--e-global-typography-e8f1a50-font-weight:400;--e-global-typography-e8f1a50-text-transform:uppercase;--e-global-typography-e8f1a50-line-height:1.4em;--e-global-typography-e8f1a50-letter-spacing:0px;--e-global-typography-8abb707-font-family:"Rubik";--e-global-typography-8abb707-font-size:14px;--e-global-typography-8abb707-font-weight:400;--e-global-typography-8abb707-text-transform:none;--e-global-typography-8abb707-line-height:1.9em;--e-global-typography-8abb707-letter-spacing:0px;--e-global-typography-6cb5a64-font-family:"Teko";--e-global-typography-6cb5a64-font-size:30px;--e-global-typography-6cb5a64-font-weight:500;--e-global-typography-6cb5a64-text-transform:none;--e-global-typography-6cb5a64-line-height:1em;--e-global-typography-6cb5a64-letter-spacing:0px;--e-global-typography-5fef4ac-font-family:"Rubik";--e-global-typography-5fef4ac-font-size:21px;--e-global-typography-5fef4ac-font-weight:400;--e-global-typography-5fef4ac-line-height:1.9em;--e-global-typography-5fef4ac-letter-spacing:0px;--e-global-typography-9e9a557-font-family:"Rubik";--e-global-typography-9e9a557-font-size:16px;--e-global-typography-9e9a557-font-weight:500;--e-global-typography-9e9a557-text-transform:uppercase;--e-global-typography-9e9a557-line-height:1em;--e-global-typography-9e9a557-letter-spacing:3.2px;color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-600 button,.elementor-kit-600 input[type="button"],.elementor-kit-600 input[type="submit"],.elementor-kit-600 .elementor-button{background-color:var( --e-global-color-secondary );font-family:var( --e-global-typography-8f7fae2-font-family ), Sans-serif;font-size:var( --e-global-typography-8f7fae2-font-size );font-weight:var( --e-global-typography-8f7fae2-font-weight );text-transform:var( --e-global-typography-8f7fae2-text-transform );line-height:var( --e-global-typography-8f7fae2-line-height );letter-spacing:var( --e-global-typography-8f7fae2-letter-spacing );color:var( --e-global-color-accent );border-style:solid;border-width:2px 2px 2px 2px;border-radius:0px 0px 0px 0px;padding:21px 38px 19px 30px;}.elementor-kit-600 button:hover,.elementor-kit-600 button:focus,.elementor-kit-600 input[type="button"]:hover,.elementor-kit-600 input[type="button"]:focus,.elementor-kit-600 input[type="submit"]:hover,.elementor-kit-600 input[type="submit"]:focus,.elementor-kit-600 .elementor-button:hover,.elementor-kit-600 .elementor-button:focus{background-color:#FF5E1000;color:var( --e-global-color-secondary );border-style:solid;border-color:var( --e-global-color-secondary );}.elementor-kit-600 e-page-transition{background-color:#FFBC7D;}.elementor-kit-600 h2{color:var( --e-global-color-primary );font-family:"Teko", Sans-serif;font-size:70px;font-weight:400;text-transform:uppercase;line-height:0.9em;letter-spacing:0px;}.elementor-kit-600 h3{color:var( --e-global-color-primary );font-family:"Teko", Sans-serif;font-size:50px;font-weight:400;text-transform:uppercase;line-height:0.9em;letter-spacing:0px;}.elementor-kit-600 h4{color:var( --e-global-color-primary );font-family:"Teko", Sans-serif;font-size:47px;font-weight:400;text-transform:uppercase;line-height:1.4em;letter-spacing:0px;}.elementor-kit-600 h6{color:var( --e-global-color-secondary );font-family:"Rubik", Sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;line-height:1em;letter-spacing:3.2px;}.elementor-kit-600 img{border-radius:0px 0px 0px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1170px;}.e-con{--container-max-width:1170px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-600{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-600 button,.elementor-kit-600 input[type="button"],.elementor-kit-600 input[type="submit"],.elementor-kit-600 .elementor-button{font-size:var( --e-global-typography-8f7fae2-font-size );line-height:var( --e-global-typography-8f7fae2-line-height );letter-spacing:var( --e-global-typography-8f7fae2-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-600{--e-global-typography-5a503a8-letter-spacing:2px;--e-global-typography-b0ffb91-font-size:40px;--e-global-typography-b0ffb91-line-height:1.3em;--e-global-typography-d59858f-font-size:40px;--e-global-typography-d59858f-line-height:1.3em;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-600 h2{font-size:60px;}.elementor-kit-600 button,.elementor-kit-600 input[type="button"],.elementor-kit-600 input[type="submit"],.elementor-kit-600 .elementor-button{font-size:var( --e-global-typography-8f7fae2-font-size );line-height:var( --e-global-typography-8f7fae2-line-height );letter-spacing:var( --e-global-typography-8f7fae2-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================================== ========================================================== WMP CERAMIC GLOBAL EFFECTS Web Media Powers ========================================================== SISTEMA DE TEXTO: Clase manual: wmp-ceramic-grid SISTEMA DE BOTONES: Automático. La cerámica está SIEMPRE visible. No requiere CSS Class. Compatible con: WMP Metallic Elementor Effects La textura cerámica NO reemplaza el fondo de los botones. Puede trabajar encima de colores normales o metalizados. ========================================================== ========================================================== */ /* ========================================================== 01. TEXTO CERÁMICO ========================================================== USO: Elementor > Advanced > CSS Classes wmp-ceramic-grid El color se continúa seleccionando normalmente desde Elementor. ========================================================== */ .wmp-ceramic-grid .elementor-heading-title, .wmp-ceramic-grid.elementor-widget-heading .elementor-heading-title { /* ====================================================== TEXTURA DE CERÁMICA ====================================================== */ background-image: /* Esmalte superior */ linear-gradient( 180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.09) 15%, rgba(255,255,255,.025) 30%, transparent 44% ), /* Curvas blancas */ repeating-radial-gradient( ellipse at 16% 16%, rgba(255,255,255,.20) 0 1px, transparent 1.4px 11px ), /* Curvas oscuras */ repeating-radial-gradient( ellipse at 82% 76%, rgba(0,0,0,.15) 0 1px, transparent 1.4px 12px ), /* Cuadrícula horizontal clara */ repeating-linear-gradient( 0deg, transparent 0 11px, rgba(255,255,255,.10) 11px 12px, transparent 12px 23px ), /* Cuadrícula vertical clara */ repeating-linear-gradient( 90deg, transparent 0 11px, rgba(255,255,255,.09) 11px 12px, transparent 12px 23px ), /* Cuadrícula oscura horizontal */ repeating-linear-gradient( 0deg, transparent 0 22px, rgba(0,0,0,.08) 22px 23px, transparent 23px 44px ), /* Cuadrícula oscura vertical */ repeating-linear-gradient( 90deg, transparent 0 22px, rgba(0,0,0,.07) 22px 23px, transparent 23px 44px ), /* Diagonales claras */ repeating-linear-gradient( 45deg, transparent 0 25px, rgba(255,255,255,.055) 25px 26px, transparent 26px 50px ), /* Diagonales oscuras */ repeating-linear-gradient( -45deg, transparent 0 25px, rgba(0,0,0,.05) 25px 26px, transparent 26px 50px ), /* Color base */ linear-gradient( 135deg, color-mix( in srgb, currentColor 97%, white ) 0%, currentColor 20%, currentColor 43%, color-mix( in srgb, currentColor 94%, black ) 63%, currentColor 80%, color-mix( in srgb, currentColor 92%, black ) 100% ); background-size: 100% 100%, 36px 34px, 42px 39px, 24px 24px, 24px 24px, 46px 46px, 46px 46px, 54px 54px, 54px 54px, 100% 100%; background-position: center, 0 0, 8px 6px, 0 0, 0 0, 4px 6px, 4px 6px, 0 0, 8px 5px, center; /* La textura queda dentro de las letras */ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Contorno cerámico */ -webkit-text-stroke: .30px color-mix( in srgb, currentColor 72%, black ); /* ====================================================== RELIEVE DEL TEXTO ====================================================== */ text-shadow: /* filo iluminado superior */ 0 -1px 0 rgba(255,255,255,.20), /* profundidad */ 0 1px 0 color-mix( in srgb, currentColor 76%, black ), 0 2px 0 color-mix( in srgb, currentColor 68%, black ), 0 3px 0 color-mix( in srgb, currentColor 61%, black ), 0 4px 1px color-mix( in srgb, currentColor 55%, black ), /* sombra exterior */ 0 6px 5px rgba(0,0,0,.18), 0 9px 13px rgba(0,0,0,.10); filter: saturate(1.04) contrast(1.025); transition: filter .35s ease, text-shadow .35s ease; } /* ========================================================== 02. HOVER DEL TEXTO CERÁMICO ========================================================== */ .wmp-ceramic-grid:hover .elementor-heading-title, .wmp-ceramic-grid.elementor-widget-heading:hover .elementor-heading-title { filter: saturate(1.08) contrast(1.04); text-shadow: 0 -1px 0 rgba(255,255,255,.28), 0 1px 0 color-mix( in srgb, currentColor 75%, black ), 0 2px 0 color-mix( in srgb, currentColor 67%, black ), 0 3px 0 color-mix( in srgb, currentColor 60%, black ), 0 5px 1px color-mix( in srgb, currentColor 53%, black ), 0 7px 6px rgba(0,0,0,.20), 0 11px 15px rgba(0,0,0,.11); } /* ========================================================== 03. TEXT EDITOR ========================================================== */ .wmp-ceramic-grid.elementor-widget-text-editor p, .wmp-ceramic-grid.elementor-widget-text-editor span, .wmp-ceramic-grid.elementor-widget-text-editor strong, .wmp-ceramic-grid.elementor-widget-text-editor b, .wmp-ceramic-grid.elementor-widget-text-editor em, .wmp-ceramic-grid.elementor-widget-text-editor a { background-image: linear-gradient( 180deg, rgba(255,255,255,.15), transparent 35% ), repeating-radial-gradient( ellipse at 20% 20%, rgba(255,255,255,.14) 0 1px, transparent 1.3px 10px ), repeating-radial-gradient( ellipse at 75% 70%, rgba(0,0,0,.11) 0 1px, transparent 1.3px 11px ), repeating-linear-gradient( 0deg, transparent 0 10px, rgba(255,255,255,.075) 10px 11px, transparent 11px 20px ), repeating-linear-gradient( 90deg, transparent 0 10px, rgba(0,0,0,.065) 10px 11px, transparent 11px 20px ), repeating-linear-gradient( 45deg, transparent 0 20px, rgba(255,255,255,.04) 20px 21px, transparent 21px 40px ), linear-gradient( 135deg, color-mix( in srgb, currentColor 97%, white ), currentColor 28%, color-mix( in srgb, currentColor 94%, black ) 58%, currentColor 82% ); background-size: 100% 100%, 32px 32px, 36px 36px, 20px 20px, 20px 20px, 40px 40px, 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 -1px 0 rgba(255,255,255,.14), 0 1px 0 color-mix( in srgb, currentColor 72%, black ), 0 2px 1px color-mix( in srgb, currentColor 62%, black ), 0 4px 5px rgba(0,0,0,.16); } /* ========================================================== ========================================================== 04. BOTONES CERÁMICOS ========================================================== AUTOMÁTICO. NO NECESITA CSS CLASS. CERÁMICA SIEMPRE ACTIVA. Compatible con botones normales y con: wmp-button-gold wmp-button-blue wmp-button-red wmp-button-cff103 wmp-button-66050d etc. El background original permanece intacto. ========================================================== ========================================================== */ /* ========================================================== 05. ESTRUCTURA DEL BOTÓN ========================================================== */ .elementor-widget-button .elementor-button { position: relative; overflow: hidden; isolation: isolate; transform: translateZ(0); /* Relieve siempre presente */ box-shadow: /* filo superior */ inset 0 2px 1px rgba(255,255,255,.25), /* borde izquierdo */ inset 1px 0 1px rgba(255,255,255,.12), /* profundidad inferior */ inset 0 -3px 3px rgba(0,0,0,.14), /* borde oscuro inferior */ inset 0 -1px 0 rgba(0,0,0,.12), /* sombra exterior */ 0 4px 8px rgba(0,0,0,.15); transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease; } /* ========================================================== 06. TEXTO E ICONOS ENCIMA ========================================================== */ .elementor-widget-button .elementor-button .elementor-button-content-wrapper { position: relative; z-index: 10; } .elementor-widget-button .elementor-button .elementor-button-text { position: relative; z-index: 10; } .elementor-widget-button .elementor-button .elementor-button-icon { position: relative; z-index: 10; } /* ========================================================== 07. TEXTURA CERÁMICA SIEMPRE VISIBLE ========================================================== IMPORTANTE: Esta capa NO contiene un color sólido. Solo contiene textura. Por eso trabaja encima de: - colores Elementor - gradientes Elementor - fondos metalizados WMP ========================================================== */ .elementor-widget-button .elementor-button::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; /* ====================================================== TEXTURA ====================================================== */ background-image: /* Brillo del esmalte */ linear-gradient( 180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.13) 14%, rgba(255,255,255,.035) 30%, transparent 45% ), /* Curvas blancas */ repeating-radial-gradient( ellipse at 15% 12%, rgba(255,255,255,.22) 0 1px, transparent 1.4px 11px ), /* Curvas negras */ repeating-radial-gradient( ellipse at 82% 78%, rgba(0,0,0,.16) 0 1px, transparent 1.4px 13px ), /* Cuadrícula clara horizontal */ repeating-linear-gradient( 0deg, transparent 0 11px, rgba(255,255,255,.11) 11px 12px, transparent 12px 23px ), /* Cuadrícula clara vertical */ repeating-linear-gradient( 90deg, transparent 0 11px, rgba(255,255,255,.095) 11px 12px, transparent 12px 23px ), /* Segunda cuadrícula oscura */ repeating-linear-gradient( 0deg, transparent 0 22px, rgba(0,0,0,.075) 22px 23px, transparent 23px 44px ), repeating-linear-gradient( 90deg, transparent 0 22px, rgba(0,0,0,.065) 22px 23px, transparent 23px 44px ), /* Diagonales claras */ repeating-linear-gradient( 45deg, transparent 0 21px, rgba(255,255,255,.055) 21px 22px, transparent 22px 42px ), /* Diagonales oscuras */ repeating-linear-gradient( -45deg, transparent 0 21px, rgba(0,0,0,.045) 21px 22px, transparent 22px 42px ), /* Esmalte translúcido */ linear-gradient( 135deg, rgba(255,255,255,.09), rgba(255,255,255,.015) 35%, rgba(0,0,0,.065) 68%, rgba(255,255,255,.07) ); background-size: 100% 100%, 35px 32px, 42px 38px, 24px 24px, 24px 24px, 45px 45px, 45px 45px, 43px 43px, 43px 43px, 100% 100%; background-position: center, 0 0, 6px 5px, 0 0, 0 0, 5px 5px, 5px 5px, 0 0, 8px 5px, center; /* Mezcla la textura con el fondo existente */ mix-blend-mode: soft-light; /* SIEMPRE VISIBLE */ opacity: .88; transition: opacity .35s ease, background-position .65s ease; } /* ========================================================== 08. ESMALTE / REFLEJO DEL BOTÓN SIEMPRE PRESENTE ========================================================== */ .elementor-widget-button .elementor-button::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: linear-gradient( 180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 20%, transparent 40%, transparent 70%, rgba(0,0,0,.09) 100% ); box-shadow: /* brillo superior */ inset 0 2px 1px rgba(255,255,255,.28), /* borde izquierdo */ inset 1px 0 1px rgba(255,255,255,.12), /* borde derecho */ inset -1px 0 1px rgba(0,0,0,.08), /* volumen inferior */ inset 0 -3px 3px rgba(0,0,0,.14); /* Siempre visible */ opacity: .82; transition: opacity .35s ease, background-position .35s ease; } /* ========================================================== 09. HOVER ========================================================== La cerámica YA está aplicada. Hover solo aumenta: - profundidad - brillo - sensación de esmalte - movimiento sutil de textura NO cambia el background del botón. ========================================================== */ .elementor-widget-button .elementor-button:hover { transform: translateY(-2px); box-shadow: /* brillo superior más pronunciado */ inset 0 3px 2px rgba(255,255,255,.34), /* lateral claro */ inset 1px 0 1px rgba(255,255,255,.15), /* volumen inferior */ inset 0 -4px 4px rgba(0,0,0,.17), /* borde inferior */ inset 0 -1px 0 rgba(0,0,0,.14), /* pieza elevada */ 0 7px 14px rgba(0,0,0,.19); } /* ========================================================== 10. TEXTURA EN HOVER ========================================================== */ .elementor-widget-button .elementor-button:hover::before { opacity: 1; background-position: center, 5px 3px, 10px 8px, 2px 2px, 2px 2px, 8px 7px, 8px 7px, 4px 2px, 11px 8px, center; } /* ========================================================== 11. ESMALTE EN HOVER ========================================================== */ .elementor-widget-button .elementor-button:hover::after { opacity: 1; background: linear-gradient( 180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.10) 19%, transparent 42%, transparent 67%, rgba(0,0,0,.11) 100% ); } /* ========================================================== 12. CLICK Pieza cerámica presionada ========================================================== */ .elementor-widget-button .elementor-button:active { transform: translateY(1px); box-shadow: inset 0 3px 5px rgba(0,0,0,.18), inset 0 -1px 1px rgba(255,255,255,.10), 0 2px 4px rgba(0,0,0,.12); } /* ========================================================== 13. FOCUS ========================================================== */ .elementor-widget-button .elementor-button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* ========================================================== 14. ACCESIBILIDAD ========================================================== */ @media (prefers-reduced-motion: reduce) { .wmp-ceramic-grid .elementor-heading-title, .elementor-widget-button .elementor-button, .elementor-widget-button .elementor-button::before, .elementor-widget-button .elementor-button::after { transition-duration: .01ms !important; } }/* End custom CSS */