.elementor-358 .elementor-element.elementor-element-6be4aa4{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-358 .elementor-element.elementor-element-6be4aa4.e-con{--align-self:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-358 .elementor-element.elementor-element-821213d{width:var( --container-widget-width, 29.36% );max-width:29.36%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:29.36%;--container-widget-flex-grow:0;text-align:end;}.elementor-358 .elementor-element.elementor-element-821213d.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-358 .elementor-element.elementor-element-821213d img{width:39%;}.elementor-358 .elementor-element.elementor-element-627107d{width:var( --container-widget-width, 41.45% );max-width:41.45%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:41.45%;--container-widget-flex-grow:0;text-align:center;}.elementor-358 .elementor-element.elementor-element-627107d.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-358 .elementor-element.elementor-element-627107d img{width:24%;}.elementor-358 .elementor-element.elementor-element-827e46e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}.elementor-358 .elementor-element.elementor-element-827e46e img{width:48%;}.elementor-358 .elementor-element.elementor-element-117c990{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--margin-top:0px;--margin-bottom:-100px;--margin-left:0px;--margin-right:0px;}.elementor-358 .elementor-element.elementor-element-6526b7d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-358 .elementor-element.elementor-element-6526b7d.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-358 .elementor-element.elementor-element-fa436d8{width:var( --container-widget-width, 38.431% );max-width:38.431%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:38.431%;--container-widget-flex-grow:0;}.elementor-358 .elementor-element.elementor-element-fa436d8.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-358 .elementor-element.elementor-element-fa436d8 img{width:100%;}.elementor-358 .elementor-element.elementor-element-e5d2852{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-358 .elementor-element.elementor-element-c90fd67{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-358 .elementor-element.elementor-element-fb23e21 .e-off-canvas__overlay{background-color:rgba(0,0,0,.8);}.elementor-358 .elementor-element.elementor-element-fb23e21{--e-off-canvas-justify-content:flex-start;--e-off-canvas-align-items:center;--e-off-canvas-width:50%;--e-off-canvas-height:fit-content;--e-off-canvas-content-overflow:initial;--e-off-canvas-animation-duration:1.5s;--e-off-canvas-overlay-opacity:1;}.elementor-358 .elementor-element.elementor-element-acb76ff{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-358 .elementor-element.elementor-element-19776f7{--display:flex;--justify-content:flex-end;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:25px;--padding-right:25px;}.elementor-358 .elementor-element.elementor-element-19776f7:not(.elementor-motion-effects-element-type-background), .elementor-358 .elementor-element.elementor-element-19776f7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://chronosfantasy.com/wp-content/uploads/2026/07/ChatGPT-Image-8-jul-2026-20_40_43.webp");background-position:center center;background-repeat:no-repeat;background-size:100% auto;}.elementor-358 .elementor-element.elementor-element-19776f7.e-con{--align-self:center;}.elementor-358 .elementor-element.elementor-element-91ce728{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -40px) 0px;}.elementor-358 .elementor-element.elementor-element-91ce728 img{width:81%;}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-358 .elementor-element.elementor-element-66f0e62{--display:flex;}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products{--products-title-color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.products-heading-show .related-products > h2, .elementor-widget-woocommerce-products.products-heading-show .upsells > h2, .elementor-widget-woocommerce-products.products-heading-show .cross-sells > h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products ul.products li.product{text-align:center;--button-align-display:flex;--button-align-direction:column;--button-align-justify:space-between;}.elementor-358 .elementor-element.elementor-element-6741099 > .elementor-widget-container{padding:0px 60px 20px 60px;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-element{--align-self:center;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products ul.products{grid-column-gap:7px;grid-row-gap:36px;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products .attachment-woocommerce_thumbnail{margin-bottom:0px;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:#00FFE1;margin-bottom:1px;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:#00FFE1;margin-bottom:1px;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:"Roboto", Sans-serif;font-size:15px;font-weight:600;letter-spacing:0.2px;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products ul.products li.product .star-rating{font-size:0.1em;margin-bottom:1px;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products ul.products li.product .price{color:#0CFF0B;font-family:"Road Rage", Sans-serif;font-size:23px;font-weight:600;line-height:4px;letter-spacing:1.1px;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products ul.products li.product .price ins{color:#0CFF0B;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products ul.products li.product .price ins .amount{color:#0CFF0B;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products ul.products li.product .button{font-family:"Roboto", Sans-serif;font-size:12px;font-weight:500;margin-top:2px;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products .added_to_cart{color:#02010100;margin-inline-start:1px;}.elementor-358 .elementor-element.elementor-element-37bccfd{--display:flex;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products ul.products li.product{text-align:center;--button-align-display:flex;--button-align-direction:column;--button-align-justify:space-between;}.elementor-358 .elementor-element.elementor-element-43bdf4b > .elementor-widget-container{padding:20px 60px 20px 60px;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-element{--align-self:center;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products ul.products{grid-column-gap:7px;grid-row-gap:36px;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products .attachment-woocommerce_thumbnail{margin-bottom:0px;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:#00FFE1;margin-bottom:1px;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:#00FFE1;margin-bottom:1px;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:"Roboto", Sans-serif;font-size:15px;font-weight:600;letter-spacing:0.2px;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products ul.products li.product .star-rating{font-size:0.1em;margin-bottom:1px;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products ul.products li.product .price{color:#0CFF0B;font-family:"Road Rage", Sans-serif;font-size:23px;font-weight:600;line-height:4px;letter-spacing:1.1px;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products ul.products li.product .price ins{color:#0CFF0B;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products ul.products li.product .price ins .amount{color:#0CFF0B;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products ul.products li.product .button{font-family:"Roboto", Sans-serif;font-size:12px;font-weight:500;margin-top:2px;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products .added_to_cart{color:#02010100;margin-inline-start:1px;}.elementor-358 .elementor-element.elementor-element-bcde1f0{--n-tabs-direction:column-reverse;--n-tabs-heading-direction:row;--n-tabs-heading-width:initial;--n-tabs-title-flex-basis:content;--n-tabs-title-flex-shrink:0;--n-tabs-heading-justify-content:center;--n-tabs-title-width:initial;--n-tabs-title-height:initial;--n-tabs-title-align-items:center;--n-tabs-title-flex-grow:0;--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;}.elementor-358 .elementor-element.elementor-element-876eeb4{--spacer-size:83px;}.elementor-358 .elementor-element.elementor-element-3c938d2{--display:flex;--justify-content:flex-end;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:25px;--padding-right:25px;}.elementor-358 .elementor-element.elementor-element-3c938d2:not(.elementor-motion-effects-element-type-background), .elementor-358 .elementor-element.elementor-element-3c938d2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://chronosfantasy.com/wp-content/uploads/2026/07/ChatGPT-Image-8-jul-2026-20_40_43.webp");background-position:center center;background-repeat:no-repeat;background-size:100% auto;}.elementor-358 .elementor-element.elementor-element-3c938d2.e-con{--align-self:center;}.elementor-358 .elementor-element.elementor-element-f5b109f{--spacer-size:1px;}.elementor-358 .elementor-element.elementor-element-f72c4e9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -40px) 0px;}.elementor-358 .elementor-element.elementor-element-f72c4e9 img{width:81%;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products ul.products li.product{text-align:center;--button-align-display:flex;--button-align-direction:column;--button-align-justify:space-between;}.elementor-358 .elementor-element.elementor-element-49c303f > .elementor-widget-container{padding:20px 60px 20px 60px;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-element{--align-self:center;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products ul.products{grid-column-gap:7px;grid-row-gap:36px;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products .attachment-woocommerce_thumbnail{margin-bottom:0px;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:#00FFE1;margin-bottom:1px;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:#00FFE1;margin-bottom:1px;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:"Roboto", Sans-serif;font-size:15px;font-weight:600;letter-spacing:0.2px;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products ul.products li.product .star-rating{font-size:0.1em;margin-bottom:1px;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products ul.products li.product .price{color:#0CFF0B;font-family:"Road Rage", Sans-serif;font-size:23px;font-weight:600;line-height:4px;letter-spacing:1.1px;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products ul.products li.product .price ins{color:#0CFF0B;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products ul.products li.product .price ins .amount{color:#0CFF0B;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products ul.products li.product .button{font-family:"Roboto", Sans-serif;font-size:12px;font-weight:500;margin-top:2px;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products .added_to_cart{color:#02010100;margin-inline-start:1px;}.elementor-358 .elementor-element.elementor-element-580ac74{--spacer-size:109px;}.elementor-358 .elementor-element.elementor-element-eeb7750{--display:flex;--justify-content:flex-end;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:25px;--padding-right:25px;}.elementor-358 .elementor-element.elementor-element-eeb7750:not(.elementor-motion-effects-element-type-background), .elementor-358 .elementor-element.elementor-element-eeb7750 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://chronosfantasy.com/wp-content/uploads/2026/07/ChatGPT-Image-8-jul-2026-20_40_43.webp");background-position:center center;background-repeat:no-repeat;background-size:100% auto;}.elementor-358 .elementor-element.elementor-element-eeb7750.e-con{--align-self:center;}.elementor-358 .elementor-element.elementor-element-c034363{--spacer-size:1px;}.elementor-358 .elementor-element.elementor-element-b52c04d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -40px) 0px;}.elementor-358 .elementor-element.elementor-element-b52c04d img{width:81%;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products ul.products li.product{text-align:center;--button-align-display:flex;--button-align-direction:column;--button-align-justify:space-between;}.elementor-358 .elementor-element.elementor-element-1c8c69e > .elementor-widget-container{padding:20px 60px 20px 60px;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-element{--align-self:center;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products ul.products{grid-column-gap:7px;grid-row-gap:36px;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products .attachment-woocommerce_thumbnail{margin-bottom:0px;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:#00FFE1;margin-bottom:1px;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:#00FFE1;margin-bottom:1px;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:"Roboto", Sans-serif;font-size:15px;font-weight:600;letter-spacing:0.2px;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products ul.products li.product .star-rating{font-size:0.1em;margin-bottom:1px;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products ul.products li.product .price{color:#0CFF0B;font-family:"Road Rage", Sans-serif;font-size:23px;font-weight:600;line-height:4px;letter-spacing:1.1px;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products ul.products li.product .price ins{color:#0CFF0B;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products ul.products li.product .price ins .amount{color:#0CFF0B;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products ul.products li.product .button{font-family:"Roboto", Sans-serif;font-size:12px;font-weight:500;margin-top:2px;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products .added_to_cart{color:#02010100;margin-inline-start:1px;}.elementor-358 .elementor-element.elementor-element-8aebed6{--spacer-size:35px;}.elementor-358 .elementor-element.elementor-element-5650014{--spacer-size:83px;}body.elementor-page-358:not(.elementor-motion-effects-element-type-background), body.elementor-page-358 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://chronosfantasy.com/wp-content/uploads/2026/09/ChatGPT-Image-2-sept-2026-06_40_47-p.m.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-358 .elementor-element.elementor-element-6be4aa4{--width:100%;}.elementor-358 .elementor-element.elementor-element-117c990{--content-width:1530px;}.elementor-358 .elementor-element.elementor-element-6526b7d{--width:100%;}.elementor-358 .elementor-element.elementor-element-e5d2852{--width:59%;}.elementor-358 .elementor-element.elementor-element-acb76ff{--width:100%;}}@media(min-width:1025px){body.elementor-page-358:not(.elementor-motion-effects-element-type-background), body.elementor-page-358 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}@media(max-width:1024px){.elementor-358 .elementor-element.elementor-element-c90fd67{--grid-auto-flow:row;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-358 .elementor-element.elementor-element-6be4aa4{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-358 .elementor-element.elementor-element-821213d.elementor-element{--align-self:center;}.elementor-358 .elementor-element.elementor-element-821213d{text-align:center;}.elementor-358 .elementor-element.elementor-element-821213d img{width:70%;}.elementor-358 .elementor-element.elementor-element-827e46e img{width:100%;}.elementor-358 .elementor-element.elementor-element-fa436d8 img{width:100%;}.elementor-358 .elementor-element.elementor-element-c90fd67{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-358 .elementor-element.elementor-element-66f0e62{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-358 .elementor-element.elementor-element-66f0e62.e-con{--align-self:center;}.elementor-358 .elementor-element.elementor-element-6741099 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-358 .elementor-element.elementor-element-6741099.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-358 .elementor-element.elementor-element-43bdf4b > .elementor-widget-container{padding:0px 0px 10px 0px;}.elementor-358 .elementor-element.elementor-element-43bdf4b.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:41px;}.elementor-358 .elementor-element.elementor-element-bcde1f0{--n-tabs-direction:column;--n-tabs-heading-direction:row;--n-tabs-heading-width:initial;--n-tabs-title-flex-basis:content;--n-tabs-title-flex-shrink:0;--n-tabs-title-justify-content:center;--n-tabs-title-align-items:center;--n-tabs-title-text-align:center;}.elementor-358 .elementor-element.elementor-element-49c303f > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-358 .elementor-element.elementor-element-49c303f.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-358 .elementor-element.elementor-element-1c8c69e > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-358 .elementor-element.elementor-element-1c8c69e.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for wc-elements, class: .elementor-element-7d47e89 *//* ========================================================= CHRONOS FANTASY OFF CANVAS — CARRITO DE PERSONALIZA TU EXPERIENCIA V2.2 — TOTALES ACTIVOS / ENVÍO OCULTO ========================================================= */ /* ========================================================= 1. PANEL LATERAL ========================================================= */ #off-canvas-fb23e21 .e-off-canvas__main { width: 520px !important; max-width: 90vw !important; background: radial-gradient( circle at 50% 0%, rgba(111, 68, 148, 0.20), transparent 42% ), linear-gradient( 180deg, rgba(12, 8, 17, 0.97) 0%, rgba(5, 4, 8, 0.98) 100% ) !important; border-left: 1px solid rgba(201, 164, 76, 0.55); box-shadow: -10px 0 35px rgba(0, 0, 0, 0.65), inset 1px 0 0 rgba(255, 220, 130, 0.08); box-sizing: border-box; } /* ========================================================= 2. OVERLAY ========================================================= */ #off-canvas-fb23e21 .e-off-canvas__overlay { background: rgba(0, 0, 0, 0.55) !important; } /* ========================================================= 3. CONTENIDO DEL OFF CANVAS ========================================================= */ #off-canvas-fb23e21 .e-off-canvas__content { width: 100% !important; max-width: none !important; box-sizing: border-box; background: transparent !important; } /* ========================================================= 4. CONTENEDOR WOOCOMMERCE ========================================================= */ #off-canvas-fb23e21 .woocommerce { width: 100%; background: transparent !important; color: #eee4ce; } /* ========================================================= 5. TABLA DEL CARRITO ========================================================= */ #off-canvas-fb23e21 .woocommerce-cart-form__contents { width: 100% !important; border-collapse: separate; border-spacing: 0 8px; background: transparent !important; } /* ========================================================= 6. CABECERA ========================================================= */ #off-canvas-fb23e21 .woocommerce-cart-form__contents thead { background: transparent !important; } #off-canvas-fb23e21 .woocommerce-cart-form__contents thead th { padding: 8px 5px; border: none !important; background: transparent !important; color: #c9a44c !important; font-family: Georgia, "Times New Roman", serif; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); } /* ========================================================= 7. FILAS DE PRODUCTOS ========================================================= */ #off-canvas-fb23e21 .woocommerce-cart-form__cart-item { background: linear-gradient( 135deg, rgba(31, 22, 42, 0.95), rgba(12, 8, 17, 0.98) ) !important; box-shadow: inset 0 0 0 1px rgba(201, 164, 76, 0.13), 0 4px 14px rgba(0, 0, 0, 0.35); transition: box-shadow 0.2s ease, transform 0.2s ease; } #off-canvas-fb23e21 .woocommerce-cart-form__cart-item:hover { transform: translateX(-2px); box-shadow: inset 0 0 0 1px rgba(201, 164, 76, 0.32), 0 6px 18px rgba(0, 0, 0, 0.5); } /* ========================================================= 8. CELDAS ========================================================= */ #off-canvas-fb23e21 .woocommerce-cart-form__cart-item td { padding: 11px 5px; border: none !important; background: transparent !important; color: #eee4ce; vertical-align: middle; } /* ========================================================= 9. IMAGEN ========================================================= */ #off-canvas-fb23e21 .product-thumbnail { width: 76px; } #off-canvas-fb23e21 .product-thumbnail img { display: block; width: 58px !important; height: 58px !important; object-fit: cover; background: #09070c; border: 1px solid rgba(201, 164, 76, 0.45); box-shadow: 0 0 10px rgba(201, 164, 76, 0.12); } /* ========================================================= 10. NOMBRE DEL PRODUCTO ========================================================= */ #off-canvas-fb23e21 .ast-product-name { margin: 0; } #off-canvas-fb23e21 .ast-product-name a { color: #f3d98b !important; font-family: Georgia, "Times New Roman", serif; font-size: 13px; font-weight: 700; line-height: 1.3; text-decoration: none !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); transition: color 0.2s ease; } #off-canvas-fb23e21 .ast-product-name a:hover { color: #ffe9a8 !important; } /* ========================================================= 11. PRECIO ========================================================= */ #off-canvas-fb23e21 .product-price, #off-canvas-fb23e21 .product-subtotal { color: #f7e7b0 !important; font-family: Georgia, "Times New Roman", serif; font-size: 12px; font-weight: 700; white-space: nowrap; } /* ========================================================= 12. CANTIDAD ========================================================= */ #off-canvas-fb23e21 .product-quantity { white-space: nowrap; } #off-canvas-fb23e21 .quantity.buttons_added { display: inline-flex !important; align-items: center; justify-content: center; width: auto; margin: 0; padding: 0; border: 1px solid rgba(201, 164, 76, 0.45); background: rgba(5, 4, 8, 0.90); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.55); } /* ========================================================= 13. BOTONES + / - ========================================================= */ #off-canvas-fb23e21 .quantity .minus, #off-canvas-fb23e21 .quantity .plus { display: flex !important; align-items: center; justify-content: center; width: 27px !important; height: 27px !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; color: #d6b65b !important; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none !important; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } #off-canvas-fb23e21 .quantity .minus:hover, #off-canvas-fb23e21 .quantity .plus:hover { background: rgba(201, 164, 76, 0.14) !important; color: #ffe9a8 !important; } /* ========================================================= 14. NÚMERO DE CANTIDAD ========================================================= */ #off-canvas-fb23e21 .quantity .qty { width: 29px !important; height: 27px !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; color: #f5e8c5 !important; text-align: center; font-size: 12px; font-weight: 700; box-shadow: none !important; appearance: textfield; } /* Ocultar flechas del input */ #off-canvas-fb23e21 .quantity .qty::-webkit-inner-spin-button, #off-canvas-fb23e21 .quantity .qty::-webkit-outer-spin-button { margin: 0; appearance: none; } /* ========================================================= 15. SALAS — CANTIDAD OCULTA ========================================================= */ #off-canvas-fb23e21 .quantity input[type="hidden"] { display: none !important; } /* ========================================================= 16. BOTÓN ELIMINAR ========================================================= */ #off-canvas-fb23e21 .product-remove { width: 28px; } #off-canvas-fb23e21 .product-remove .remove { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: rgba(220, 180, 100, 0.55) !important; font-size: 17px; text-decoration: none !important; transition: color 0.2s ease, transform 0.2s ease; } #off-canvas-fb23e21 .product-remove .remove:hover { color: #ff5c5c !important; transform: scale(1.15); } /* ========================================================= 17. VARIACIONES ========================================================= */ #off-canvas-fb23e21 .variation { margin: 5px 0 0; padding: 0; } #off-canvas-fb23e21 .variation dt { display: inline; margin: 0; color: #a89572 !important; font-size: 9px; font-weight: 600; } #off-canvas-fb23e21 .variation dd { display: inline; margin: 0 0 2px 3px; color: #ddd1b7 !important; font-size: 9px; } #off-canvas-fb23e21 .variation p { display: inline; margin: 0; } /* ========================================================= 18. ÁREA DE ACCIONES ========================================================= */ #off-canvas-fb23e21 .woocommerce-cart-form .actions { padding: 12px 5px !important; border: none !important; background: transparent !important; } /* ========================================================= 19. CUPÓN ========================================================= */ #off-canvas-fb23e21 .coupon { display: flex; align-items: center; gap: 6px; margin: 5px 0 0; } #off-canvas-fb23e21 .coupon .input-text { width: 125px; min-width: 0; height: 36px; padding: 0 9px !important; border: 1px solid rgba(201, 164, 76, 0.30) !important; border-radius: 0 !important; background: rgba(8, 6, 11, 0.90) !important; color: #eee4ce !important; font-size: 11px; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.45); } #off-canvas-fb23e21 .coupon .input-text::placeholder { color: #8f836c !important; } #off-canvas-fb23e21 .coupon button { height: 36px; padding: 0 12px !important; border: 1px solid rgba(201, 164, 76, 0.55) !important; border-radius: 0 !important; background: linear-gradient( 135deg, #8e6a27, #c9a44c ) !important; color: #120d07 !important; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } #off-canvas-fb23e21 .coupon button:hover { background: linear-gradient( 135deg, #c9a44c, #e0c36c ) !important; color: #08060a !important; } /* ========================================================= 20. OCULTAR ACTUALIZAR CARRITO ========================================================= */ #off-canvas-fb23e21 button[name="update_cart"] { display: none !important; } /* ========================================================= 21. MOSTRAR CONTENEDOR DE TOTALES ========================================================= */ #off-canvas-fb23e21 .cart-collaterals { display: block !important; width: 100% !important; margin-top: 0 !important; padding: 0 !important; box-sizing: border-box; } /* ========================================================= 22. TOTALES DEL CARRITO ========================================================= */ #off-canvas-fb23e21 .cart_totals { display: block !important; width: 100% !important; margin-top: 15px !important; padding: 15px 8px !important; box-sizing: border-box; background: linear-gradient( 135deg, rgba(31, 22, 42, 0.95), rgba(12, 8, 17, 0.98) ) !important; border-top: 1px solid rgba(201, 164, 76, 0.35) !important; border-bottom: 1px solid rgba(201, 164, 76, 0.20) !important; box-shadow: inset 0 0 0 1px rgba(201, 164, 76, 0.08), 0 4px 14px rgba(0, 0, 0, 0.35); } /* ========================================================= 23. OCULTAR COMPLETAMENTE ENVÍO ========================================================= */ /* * Oculta: * - Métodos de envío * - Recoger en Calle 63 * - Recoger en Cota * - Envío contraentrega * - Dirección * - Cambiar dirección * - Calculadora de envío */ #off-canvas-fb23e21 .cart_totals .woocommerce-shipping-totals.shipping { display: none !important; } /* Protección adicional por si WooCommerce cambia estructura */ #off-canvas-fb23e21 .cart_totals tr.shipping { display: none !important; } /* ========================================================= 24. TÍTULO TOTALES DEL CARRITO ========================================================= */ #off-canvas-fb23e21 .cart_totals h2 { margin: 0 0 12px !important; padding: 0 !important; color: #c9a44c !important; background: transparent !important; font-family: Georgia, "Times New Roman", serif; font-size: 14px !important; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); } /* ========================================================= 25. TABLA DE TOTALES ========================================================= */ #off-canvas-fb23e21 .cart_totals table { width: 100% !important; margin: 0 !important; border-collapse: collapse !important; background: transparent !important; } #off-canvas-fb23e21 .cart_totals th { padding: 8px 5px !important; color: #a89572 !important; font-family: Georgia, "Times New Roman", serif; font-size: 11px !important; font-weight: 600; text-align: left; border: none !important; background: transparent !important; } #off-canvas-fb23e21 .cart_totals td { padding: 8px 5px !important; color: #f3d98b !important; font-family: Georgia, "Times New Roman", serif; font-size: 13px !important; font-weight: 700; text-align: right; border: none !important; background: transparent !important; } /* ========================================================= 26. SUBTOTAL ========================================================= */ #off-canvas-fb23e21 .cart_totals .cart-subtotal { display: table-row !important; border-bottom: 1px solid rgba(201, 164, 76, 0.12) !important; } /* ========================================================= 27. TOTAL FINAL ========================================================= */ #off-canvas-fb23e21 .cart_totals .order-total { display: table-row !important; border-top: 1px solid rgba(201, 164, 76, 0.30) !important; } #off-canvas-fb23e21 .cart_totals .order-total th, #off-canvas-fb23e21 .cart_totals .order-total td { padding-top: 13px !important; padding-bottom: 13px !important; color: #f7d66d !important; font-size: 16px !important; font-weight: 700; } #off-canvas-fb23e21 .cart_totals .order-total td strong { color: #f7d66d !important; } /* ========================================================= 28. BOTÓN FINALIZAR COMPRA ========================================================= */ #off-canvas-fb23e21 .cart_totals .wc-proceed-to-checkout { padding: 12px 0 0 !important; margin: 0 !important; } #off-canvas-fb23e21 .cart_totals .checkout-button { display: block !important; width: 100% !important; margin: 0 !important; padding: 13px 15px !important; box-sizing: border-box; border: 1px solid rgba(201, 164, 76, 0.65) !important; border-radius: 0 !important; background: linear-gradient( 135deg, #8e6a27, #c9a44c ) !important; color: #120d07 !important; font-family: Georgia, "Times New Roman", serif; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .8px; text-align: center; text-transform: uppercase; text-decoration: none !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.40); transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } #off-canvas-fb23e21 .cart_totals .checkout-button:hover { background: linear-gradient( 135deg, #c9a44c, #e0c36c ) !important; color: #08060a !important; transform: translateY(-1px); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.55); } /* ========================================================= 29. SCROLL INTERNO ========================================================= */ #off-canvas-fb23e21 .e-off-canvas__content { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(201, 164, 76, 0.45) rgba(0, 0, 0, 0.20); } /* Chrome / Edge */ #off-canvas-fb23e21 .e-off-canvas__content::-webkit-scrollbar { width: 5px; } #off-canvas-fb23e21 .e-off-canvas__content::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.20); } #off-canvas-fb23e21 .e-off-canvas__content::-webkit-scrollbar-thumb { background: rgba(201, 164, 76, 0.45); border-radius: 0; } #off-canvas-fb23e21 .e-off-canvas__content::-webkit-scrollbar-thumb:hover { background: rgba(201, 164, 76, 0.70); } /* ========================================================= 30. RESPONSIVE — TABLET ========================================================= */ @media (max-width: 767px) { #off-canvas-fb23e21 .e-off-canvas__main { width: 430px !important; max-width: 92vw !important; } } /* ========================================================= 31. RESPONSIVE — MÓVIL ========================================================= */ @media (max-width: 480px) { #off-canvas-fb23e21 .e-off-canvas__main { width: 100% !important; max-width: 100vw !important; } #off-canvas-fb23e21 .woocommerce-cart-form__contents thead th { font-size: 8px; letter-spacing: .6px; } #off-canvas-fb23e21 .product-thumbnail { width: 62px; } #off-canvas-fb23e21 .product-thumbnail img { width: 50px !important; height: 50px !important; } #off-canvas-fb23e21 .ast-product-name a { font-size: 12px; } #off-canvas-fb23e21 .product-price, #off-canvas-fb23e21 .product-subtotal { font-size: 10px; } #off-canvas-fb23e21 .quantity .minus, #off-canvas-fb23e21 .quantity .plus { width: 24px !important; height: 25px !important; } #off-canvas-fb23e21 .quantity .qty { width: 25px !important; height: 25px !important; } #off-canvas-fb23e21 .coupon .input-text { width: 105px; } #off-canvas-fb23e21 .coupon button { padding: 0 9px !important; font-size: 9px; } #off-canvas-fb23e21 .cart_totals { padding: 12px 5px !important; } #off-canvas-fb23e21 .cart_totals .order-total th, #off-canvas-fb23e21 .cart_totals .order-total td { font-size: 14px !important; } } /* ========================================================= OCULTAR BOTÓN FINALIZAR COMPRA ========================================================= */ #off-canvas-fb23e21 .cart_totals .wc-proceed-to-checkout { display: none !important; } #off-canvas-fb23e21 .cart_totals .checkout-button { display: none !important; } ```css /* ========================================================== CHRONOS FANTASY CARRITO VACÍO - DISEÑO MEDIEVAL STEAMPUNK ========================================================== */ /* 1. OCULTAR COMPLETAMENTE VOLVER A LA TIENDA */ .woocommerce-cart .return-to-shop { display: none !important; } /* 2. CONTENEDOR DEL MENSAJE */ .woocommerce-cart .wc-empty-cart-message { max-width: 520px !important; width: calc(100% - 30px) !important; margin: 35px auto !important; padding: 0 !important; position: relative; box-sizing: border-box; } /* 3. MENSAJE PRINCIPAL */ .woocommerce-cart .cart-empty.woocommerce-info { position: relative; display: flex !important; align-items: center; justify-content: center; flex-direction: column; gap: 16px; box-sizing: border-box; width: 100% !important; min-height: 180px; margin: 0 !important; padding: 38px 25px !important; background: radial-gradient( circle at 50% 0%, rgba(119, 43, 145, 0.20), transparent 65% ), linear-gradient( 145deg, #17111e 0%, #09080d 55%, #171019 100% ) !important; border: 1px solid #96703b !important; border-radius: 3px !important; color: #e9d7ae !important; text-align: center !important; font-family: inherit; font-size: 16px !important; font-weight: 500; line-height: 1.7; box-shadow: inset 0 0 0 4px rgba(171, 128, 59, 0.07), inset 0 0 25px rgba(132, 64, 160, 0.08), 0 0 18px rgba(121, 47, 151, 0.12) !important; overflow: hidden; } /* 4. ELIMINAR EL ICONO ORIGINAL DE WOOCOMMERCE */ .woocommerce-cart .cart-empty.woocommerce-info::before { display: none !important; content: none !important; } /* 5. SÍMBOLO MÁGICO SUPERIOR */ .woocommerce-cart .cart-empty.woocommerce-info::after { content: "✧"; order: -1; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: #d8ad62; font-size: 38px; line-height: 1; text-shadow: 0 0 8px rgba(216, 173, 98, 0.65), 0 0 20px rgba(143, 65, 183, 0.45); } /* 6. ESQUINAS ORNAMENTALES */ .woocommerce-cart .wc-empty-cart-message::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(180, 137, 67, 0.28); pointer-events: none; z-index: 1; } /* 7. EVITAR ESPACIOS RESIDUALES DEL BOTÓN */ .woocommerce-cart p.return-to-shop { display: none !important; } /* 8. AJUSTES PARA MÓVILES */ @media (max-width: 767px) { .woocommerce-cart .wc-empty-cart-message { width: calc(100% - 24px) !important; margin: 22px auto !important; } .woocommerce-cart .cart-empty.woocommerce-info { min-height: 155px; padding: 28px 18px !important; font-size: 14px !important; gap: 12px; } .woocommerce-cart .cart-empty.woocommerce-info::after { width: 40px; height: 40px; font-size: 32px; } } ```/* End custom CSS */ /* Start custom CSS for nested-tabs, class: .elementor-element-bcde1f0 *//*========================================== PESTAÑAS CHRONOS FANTASY ==========================================*/ /* Ambos botones */ #cap63, #capcot{ min-width:120px; height:42px; border-radius:8px; border:2px solid #5A3A15; background: linear-gradient( 180deg, #352417 0%, #20150E 100% ); color:#D6B06A !important; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.5px; transition:.30s; box-shadow: inset 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.35); } /* Hover */ #cap63:hover, #capcot:hover{ border-color:#D6A84F; color:#F8E5B6 !important; transform:translateY(-2px); } /* ACTIVO */ #cap63.elementor-active, #capcot.elementor-active{ background: linear-gradient( 180deg, #FFF1BE 0%, #E5BF67 45%, #B98328 100% ) !important; color:#2B1A0D !important; border:2px solid #F5D27B; box-shadow: inset 0 1px rgba(255,255,255,.55), 0 0 15px rgba(214,168,79,.45); } /* Quitar borde del contenido */ .elementor-tab-content{ border:none!important; background:transparent!important; padding:0!important; } /*========================================= PESTAÑA ACTIVA =========================================*/ #cap63[aria-selected="true"], #capcot[aria-selected="true"]{ background: linear-gradient( 180deg, #FFF3C9 0%, #F0D27C 20%, #D6A84F 55%, #A97118 100% ) !important; color:#2B1A0B !important; border:1px solid #FFD982 !important; box-shadow: inset 0 1px rgba(255,255,255,.60), 0 0 12px rgba(214,168,79,.45); text-shadow:none; }/* End custom CSS */ /* Start custom CSS *//* ========================================================== CHRONOS FANTASY PRODUCTOS / SALAS V12 — STEAMPUNK NEON / GLASS / MAGIC METAL ========================================================== GEOMETRÍA CONSERVADA: - Desktop 2 columnas - Tablet 2 columnas - Mobile 1 tarjeta + scroll - Safe area - Márgenes - Alturas - Clip superior/inferior - Tamaños de imágenes - Fix Elementor - Botones de productos: AZUL → ROSA - Botones superiores: #cf-skip = ROSA → AZUL #cf-next = AZUL → ROSA - ::before de botones superiores CONSERVADO ========================================================== */ /* ========================================================== CONTENEDOR PRINCIPAL ========================================================== */ .salas { position: relative; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* ========================================================== GRID DE PRODUCTOS — ESCRITORIO ========================================================== */ .salas ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: calc(100% - 50px); max-width: calc(100% - 50px); margin: 0 auto !important; padding: 18px 6px 22px; box-sizing: border-box; max-height: 600px; overflow-y: auto; overflow-x: hidden; background: linear-gradient( 180deg, rgba(10,7,14,.10), rgba(18,8,28,.18), rgba(4,8,14,.10) ); scrollbar-width: thin; scrollbar-color: #b77cff rgba(18,8,30,.65); } /* ========================================================== FIX WOOCOMMERCE ========================================================== */ .salas ul.products::before, .salas ul.products::after { display: none !important; content: none !important; } /* ========================================================== SCROLLBAR ========================================================== */ .salas ul.products::-webkit-scrollbar { width: 5px; } .salas ul.products::-webkit-scrollbar-track { background: linear-gradient( 180deg, rgba(5,4,9,.82), rgba(31,12,44,.55), rgba(5,4,9,.82) ); border-radius: 20px; box-shadow: inset 0 0 7px rgba(0,0,0,.85); } .salas ul.products::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, #f5d77b 0%, #c486ff 45%, #702db5 100% ); border-radius: 20px; border: 1px solid rgba(255,226,135,.70); box-shadow: 0 0 6px rgba(181,96,255,.80), inset 0 1px 1px rgba(255,255,255,.35); } .salas ul.products::-webkit-scrollbar-thumb:hover { background: linear-gradient( 180deg, #fff1a5 0%, #dc9cff 45%, #9348e0 100% ); box-shadow: 0 0 12px rgba(206,117,255,.95); } /* ========================================================== TARJETA DEL PRODUCTO ========================================================== */ .salas li.product { position: relative; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 10px; box-sizing: border-box; border-radius: 9px; background: linear-gradient( 180deg, rgba(255,255,255,.095) 0%, rgba(255,255,255,.025) 8%, transparent 25% ), linear-gradient( 135deg, rgba(55,31,19,.90), rgba(20,12,22,.94) 46%, rgba(7,14,20,.94) ), rgba(19,11,25,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(225,178,76,.52); box-shadow: 0 8px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(205,145,52,.08), inset 0 1px 0 rgba(255,235,170,.18), inset 0 0 22px rgba(143,61,201,.13), inset 0 -10px 18px rgba(0,0,0,.25); overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; } /* ========================================================== ORNAMENTO SUPERIOR DE LA TARJETA ========================================================== */ .salas li.product::before { content: ""; position: absolute; top: 0; left: 7%; width: 86%; height: 2px; background: linear-gradient( 90deg, transparent 0%, #8e5b22 12%, #f5d77b 28%, #fff0a6 40%, #b977ff 50%, #fff0a6 60%, #f5d77b 72%, #8e5b22 88%, transparent 100% ); box-shadow: 0 0 5px rgba(255,211,101,.75), 0 0 12px rgba(179,91,255,.55); pointer-events: none; z-index: 5; } /* ========================================================== HALO INTERIOR / CRISTAL ========================================================== */ .salas li.product::after { content: ""; position: absolute; inset: 1px; border-radius: 8px; pointer-events: none; background: radial-gradient( circle at 50% -10%, rgba(194,107,255,.18), transparent 38% ), radial-gradient( circle at 100% 100%, rgba(40,180,210,.045), transparent 35% ); box-shadow: inset 0 0 15px rgba(153,74,213,.08); z-index: 1; } /* ========================================================== HOVER TARJETA ========================================================== */ .salas li.product:hover { transform: translateY(-4px); border-color: rgba(246,205,105,.95); background: linear-gradient( 180deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 12%, transparent 28% ), linear-gradient( 135deg, rgba(72,39,22,.94), rgba(35,15,48,.96) 48%, rgba(6,17,23,.96) ); box-shadow: 0 0 0 1px rgba(244,194,83,.28), 0 12px 28px rgba(0,0,0,.65), 0 0 22px rgba(168,75,255,.28), 0 0 34px rgba(48,174,205,.08), inset 0 0 28px rgba(175,79,245,.14), inset 0 1px 0 rgba(255,242,183,.28); } /* ========================================================== IMAGEN DEL PRODUCTO ========================================================== */ .salas li.product img { display: block !important; width: 100% !important; max-width: 100% !important; height: 145px !important; min-height: 145px !important; max-height: 145px !important; object-fit: contain !important; aspect-ratio: auto !important; box-sizing: border-box; margin: 0 auto; border-radius: 8px; background: linear-gradient( 135deg, rgba(255,255,255,.075), rgba(89,48,116,.13) 45%, rgba(0,0,0,.30) ); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 1px solid rgba(226,181,88,.38); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 0 15px rgba(0,0,0,.38), 0 0 8px rgba(153,77,218,.08); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease; } /* ========================================================== HOVER IMAGEN ========================================================== */ .salas li.product:hover img { transform: scale(1.035); border-color: rgba(247,207,110,.72); box-shadow: inset 0 0 15px rgba(0,0,0,.28), 0 0 12px rgba(177,81,255,.25), 0 0 3px rgba(255,214,114,.45); filter: saturate(1.05); } /* ========================================================== NOMBRE DEL PRODUCTO ========================================================== */ .salas .woocommerce-loop-product__title { margin: 10px 2px 0; padding: 0; text-align: center; color: #f8e9bd !important; font-size: 17px; font-weight: 700; line-height: 1.2; word-break: normal; overflow-wrap: break-word; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 5px rgba(207,123,255,.20); transition: color .3s ease, text-shadow .3s ease; } /* ========================================================== HOVER NOMBRE ========================================================== */ .salas li.product:hover .woocommerce-loop-product__title { color: #fff0c5 !important; text-shadow: 0 1px 2px rgba(0,0,0,1), 0 0 7px rgba(211,128,255,.55); } /* ========================================================== PRECIO ========================================================== */ .salas .price { display: block; margin: 6px 0 0; padding: 0; text-align: center; color: #ffd45e !important; font-size: 18px; font-weight: 800; line-height: 1.15; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 5px rgba(255,187,53,.50), 0 0 10px rgba(211,133,43,.16); } /* ========================================================== BOTONES DE PRODUCTO NORMAL = 🔵 AZUL NEÓN HOVER = 🩷 ROSA NEÓN ========================================================== */ .salas .button { position: relative !important; z-index: 10 !important; isolation: isolate; display: block; width: 100% !important; max-width: 100% !important; box-sizing: border-box; margin-top: auto; padding: 9px 8px; border-radius: 8px; background: linear-gradient( 180deg, #8fffff 0%, #25e9ff 25%, #008cff 60%, #004ac7 100% ) !important; color: #ffffff !important; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.1; border: 1px solid rgba(210,255,255,.90) !important; box-shadow: 0 4px 10px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.60), inset 0 -2px 0 rgba(0,38,110,.35), 0 0 8px rgba(0,220,255,.70), 0 0 18px rgba(0,150,255,.40); text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 5px rgba(255,255,255,.40); transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease; } /* ========================================================== FIX ELEMENTOR SOLO BOTONES DE PRODUCTOS ========================================================== */ .salas .button::before, .salas .button::after { display: none !important; content: none !important; } /* ========================================================== TEXTO DEL BOTÓN DE PRODUCTO ========================================================== */ .salas .button, .salas .button span, .salas .button .elementor-button-text { color: #ffffff !important; opacity: 1 !important; visibility: visible !important; } /* ========================================================== HOVER BOTÓN PRODUCTO AZUL → ROSA ========================================================== */ .salas .button:hover { background: linear-gradient( 180deg, #ffd9fb 0%, #ff8cf1 25%, #ff20c9 60%, #c70088 100% ) !important; color: #ffffff !important; transform: translateY(-2px); border-color: #fff0ff !important; box-shadow: 0 6px 14px rgba(0,0,0,.55), 0 0 8px rgba(255,255,255,.55), 0 0 18px rgba(255,40,235,.95), 0 0 35px rgba(255,0,185,.60), inset 0 1px 0 rgba(255,255,255,.65); text-shadow: 0 0 5px rgba(255,255,255,.90), 0 0 10px rgba(255,190,255,.70); } /* ========================================================== LINKS ========================================================== */ .salas li.product a { text-decoration: none !important; } /* ========================================================== TABLET 601px — 900px ========================================================== */ @media (max-width: 900px) { .salas ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% - 36px); max-width: calc(100% - 36px); gap: 14px; max-height: 580px; padding: 15px 5px 20px; } .salas li.product { padding: 9px; } .salas li.product img { height: 135px !important; min-height: 135px !important; max-height: 135px !important; } .salas .woocommerce-loop-product__title { font-size: 16px; } .salas .price { font-size: 17px; } } /* ========================================================== 📱 MÓVIL UNA TARJETA POR VEZ MARCO SEGURO + RECORTE 10% ========================================================== */ @media (max-width: 600px) { .salas ul.products { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; width: calc(100% - 96px) !important; max-width: calc(100% - 96px) !important; min-width: 0 !important; margin: 48px auto 55px !important; height: 540px !important; max-height: 540px !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 8px 4px 18px !important; gap: 14px !important; box-sizing: border-box !important; clip-path: inset(10% 0 10% 0); background: linear-gradient( 180deg, rgba(10,6,14,.12), rgba(28,10,38,.16), rgba(5,10,14,.12) ); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); scrollbar-width: thin; scrollbar-color: #b77cff rgba(18,8,30,.65); } /* ====================================================== TARJETA MÓVIL ====================================================== */ .salas ul.products li.product { flex: 0 0 auto !important; flex-shrink: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 8px !important; box-sizing: border-box !important; overflow: hidden !important; border-radius: 9px; background: linear-gradient( 180deg, rgba(255,255,255,.10), rgba(255,255,255,.025) 10%, transparent 27% ), linear-gradient( 135deg, rgba(60,33,20,.92), rgba(32,15,43,.95) 50%, rgba(6,14,19,.95) ); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(225,178,76,.52); box-shadow: 0 7px 16px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,240,180,.16), inset 0 0 20px rgba(146,60,203,.12); } /* ====================================================== IMAGEN MÓVIL ====================================================== */ .salas ul.products li.product img { display: block !important; width: 100% !important; max-width: 100% !important; height: 125px !important; min-height: 125px !important; max-height: 125px !important; object-fit: contain !important; aspect-ratio: auto !important; margin: 0 auto !important; box-sizing: border-box !important; border: 1px solid rgba(226,181,88,.40); background: linear-gradient( 135deg, rgba(255,255,255,.06), rgba(75,37,100,.12), rgba(0,0,0,.28) ); box-shadow: inset 0 0 12px rgba(0,0,0,.40), 0 0 7px rgba(161,75,221,.10); } /* ====================================================== NOMBRE MÓVIL ====================================================== */ .salas ul.products .woocommerce-loop-product__title { display: block !important; width: 100% !important; margin: 7px 0 0 !important; padding: 0 !important; text-align: center !important; color: #f7e6b7 !important; font-size: 16px !important; line-height: 1.15 !important; overflow-wrap: break-word !important; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 6px rgba(191,103,255,.25); } /* ====================================================== PRECIO MÓVIL ====================================================== */ .salas ul.products .price { display: block !important; width: 100% !important; margin: 5px 0 0 !important; padding: 0 !important; text-align: center !important; color: #ffd45e !important; font-size: 17px !important; line-height: 1.15 !important; text-shadow: 0 0 7px rgba(255,185,54,.42); } /* ====================================================== BOTÓN MÓVIL ====================================================== */ .salas ul.products .button { display: block !important; position: relative !important; z-index: 10 !important; width: 100% !important; max-width: 100% !important; margin: 7px 0 0 !important; padding: 9px 6px !important; box-sizing: border-box !important; color: #ffffff !important; font-size: 12px !important; line-height: 1.1 !important; border-radius: 7px; } /* ====================================================== SCROLLBAR MÓVIL ====================================================== */ .salas ul.products::-webkit-scrollbar { width: 5px; } .salas ul.products::-webkit-scrollbar-track { background: rgba(6,4,10,.58); border-radius: 20px; } .salas ul.products::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, #f5d77b, #c486ff 45%, #702db5 ); border-radius: 20px; border: 1px solid rgba(255,220,130,.60); box-shadow: 0 0 8px rgba(181,96,255,.70); } } /* ========================================================== 📱 TELÉFONOS MUY PEQUEÑOS HASTA 380px ========================================================== */ @media (max-width: 380px) { .salas ul.products { width: calc(100% - 82px) !important; max-width: calc(100% - 82px) !important; height: 470px !important; max-height: 470px !important; margin: 40px auto 45px !important; padding: 7px 4px 14px !important; gap: 12px !important; clip-path: inset(10% 0 10% 0); } .salas ul.products li.product { padding: 7px !important; } .salas ul.products li.product img { height: 115px !important; min-height: 115px !important; max-height: 115px !important; } .salas ul.products .woocommerce-loop-product__title { font-size: 15px !important; } .salas ul.products .price { font-size: 16px !important; } .salas ul.products .button { font-size: 11px !important; padding: 8px 5px !important; } } ```css /* ================================================================ ================================================================ CHRONOS FANTASY BOTONES SUPERIORES — MAGIC METAL / MEDIEVAL FANTASY ================================================================ BOTÓN 01 #cf-skip "RESERVAR SIN PRODUCTOS" • METAL OSCURO • TEXTO ORO • BORDE BRONCE • GLOW ROSA • HOVER: ORO + GLOW AZUL BOTÓN 02 #cf-next "CONTINUAR CON MI EXPERIENCIA" • METAL OSCURO • TEXTO ORO • BORDE BRONCE • GLOW AZUL • HOVER: ORO + GLOW ROSA ================================================================ FILOSOFÍA VISUAL ================================================================ El botón NO debe parecer un botón neón. El METAL MEDIEVAL es el elemento principal. El NEÓN funciona únicamente como energía mágica alrededor del botón. Resultado: METAL OSCURO + ORO + ENERGÍA NEÓN ================================================================ ESTRUCTURA HTML ================================================================ Reservar Sin Productos Continuar Con Mi Experiencia El ::before se conserva como CAPA VISUAL para no interferir con la estructura actual de Elementor. ================================================================ ================================================================ */ /* ================================================================ ================================================================ 01 — CARGA DE TIPOGRAFÍA CINZEL — ESTILO MEDIEVAL / FANTASY ================================================================ ================================================================ */ /* Cinzel es la fuente principal de los botones. Se carga directamente para evitar que Elementor sustituya la tipografía por la fuente global del sitio. */ @import url( 'https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&display=swap' ); /* ================================================================ ================================================================ 02 — TIPOGRAFÍA CHRONOS FANTASY APLICA AL BOTÓN Y A TODOS SUS ELEMENTOS INTERNOS ================================================================ ================================================================ */ #cf-skip, #cf-skip *, #cf-next, #cf-next * { font-family: "Cinzel", Georgia, "Times New Roman", serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .5px !important; text-transform: uppercase !important; text-align: center !important; } /* ================================================================ ================================================================ 03 — ESTRUCTURA GENERAL DE AMBOS BOTONES ================================================================ ================================================================ */ #cf-skip, #cf-next { position: relative !important; z-index: 20 !important; isolation: isolate; overflow: hidden !important; /* ------------------------------------------------------------ CENTRADO ------------------------------------------------------------ */ display: flex !important; align-items: center !important; justify-content: center !important; /* ------------------------------------------------------------ MODELO DE CAJA ------------------------------------------------------------ */ box-sizing: border-box !important; /* ------------------------------------------------------------ TAMAÑO MISMA LÓGICA QUE LAS PESTAÑAS CHRONOS ------------------------------------------------------------ */ min-width: 120px !important; height: 42px !important; padding: 0 18px !important; /* ------------------------------------------------------------ FORMA ------------------------------------------------------------ */ border-radius: 8px !important; /* ------------------------------------------------------------ EL FONDO REAL LO GENERA ::BEFORE ------------------------------------------------------------ */ background: transparent !important; /* ------------------------------------------------------------ COLOR BASE ORO ENVEJECIDO ------------------------------------------------------------ */ color: #D6B06A !important; /* ------------------------------------------------------------ BORDE BRONCE MEDIEVAL ------------------------------------------------------------ */ border: 2px solid #5A3A15 !important; /* ------------------------------------------------------------ ELIMINAR DECORACIONES DE ENLACE ------------------------------------------------------------ */ text-decoration: none !important; /* ------------------------------------------------------------ TRANSICIÓN ------------------------------------------------------------ */ transition: transform .30s ease, box-shadow .30s ease, border-color .30s ease, color .30s ease !important; } /* ================================================================ ================================================================ 04 — TEXTO INTERNO PROTECCIÓN CONTRA ELEMENTOR ================================================================ ================================================================ */ #cf-skip, #cf-skip span, #cf-skip strong, #cf-skip b, #cf-skip em, #cf-skip i, #cf-skip .elementor-button-text, #cf-skip .elementor-button-content-wrapper, #cf-next, #cf-next span, #cf-next strong, #cf-next b, #cf-next em, #cf-next i, #cf-next .elementor-button-text, #cf-next .elementor-button-content-wrapper { font-family: "Cinzel", Georgia, "Times New Roman", serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .5px !important; text-transform: uppercase !important; text-decoration: none !important; color: #D6B06A !important; } /* ================================================================ ================================================================ 05 — CF-SKIP RESERVAR SIN PRODUCTOS ESTADO NORMAL ================================================================ IDENTIDAD: METAL + ORO + GLOW ROSA ================================================================ ================================================================ */ #cf-skip { border-color: #5A3A15 !important; /* ------------------------------------------------------------ GLOW ROSA SOLO COMO ENERGÍA EXTERIOR ------------------------------------------------------------ */ box-shadow: 0 4px 10px rgba(0,0,0,.55), 0 0 7px rgba(255,40,220,.80), 0 0 16px rgba(255,0,190,.55), 0 0 30px rgba(210,0,145,.30), inset 0 1px 0 rgba(255,255,255,.10); /* ------------------------------------------------------------ TEXTO ------------------------------------------------------------ */ text-shadow: 0 1px 2px rgba(0,0,0,.85); } /* ================================================================ ================================================================ 06 — CF-SKIP CAPA VISUAL ::BEFORE METAL MEDIEVAL OSCURO ================================================================ ================================================================ */ #cf-skip::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; /* ------------------------------------------------------------ DIMENSIONES ------------------------------------------------------------ */ display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; /* ------------------------------------------------------------ METAL CHRONOS FANTASY ------------------------------------------------------------ */ background: linear-gradient( 180deg, #352417 0%, #2B1B11 38%, #20150E 72%, #160D08 100% ) !important; /* ------------------------------------------------------------ ESTRUCTURA ------------------------------------------------------------ */ border: 0 !important; border-radius: inherit !important; /* ------------------------------------------------------------ VISIBILIDAD ------------------------------------------------------------ */ opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: none !important; /* ------------------------------------------------------------ ACABADO METÁLICO ------------------------------------------------------------ */ box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 0 rgba(0,0,0,.50); transition: background .30s ease, opacity .30s ease !important; } /* ================================================================ ================================================================ 07 — CF-SKIP HOVER ================================================================ BASE: METAL OSCURO HOVER: METAL ILUMINADO + ORO + GLOW AZUL ================================================================ ================================================================ */ #cf-skip:hover { color: #F8E5B6 !important; border-color: #D6A84F !important; transform: translateY(-2px) !important; /* ------------------------------------------------------------ GLOW AZUL ------------------------------------------------------------ */ box-shadow: 0 6px 14px rgba(0,0,0,.60), 0 0 8px rgba(255,255,255,.70), 0 0 18px rgba(0,230,255,1), 0 0 35px rgba(0,130,255,.80), 0 0 52px rgba(0,70,255,.45), inset 0 1px 0 rgba(255,255,255,.80); text-shadow: 0 1px 2px rgba(0,0,0,.90); } /* ================================================================ 08 — CF-SKIP HOVER — TEXTO INTERNO ================================================================ */ #cf-skip:hover, #cf-skip:hover span, #cf-skip:hover strong, #cf-skip:hover b, #cf-skip:hover em, #cf-skip:hover i, #cf-skip:hover .elementor-button-text, #cf-skip:hover .elementor-button-content-wrapper { color: #F8E5B6 !important; font-family: "Cinzel", Georgia, "Times New Roman", serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .5px !important; } /* ================================================================ ================================================================ 09 — CF-SKIP HOVER — METAL ILUMINADO ================================================================ ================================================================ */ #cf-skip:hover::before { background: linear-gradient( 180deg, #4A3422 0%, #382519 38%, #281A11 72%, #1B100A 100% ) !important; opacity: 1 !important; visibility: visible !important; } /* ================================================================ ================================================================ 10 — CF-SKIP FOCUS / ACTIVE ================================================================ ================================================================ */ #cf-skip:focus, #cf-skip:active { color: #F8E5B6 !important; outline: none !important; } #cf-skip:focus *, #cf-skip:active * { color: #F8E5B6 !important; } #cf-skip:focus::before, #cf-skip:active::before { opacity: 1 !important; visibility: visible !important; } /* ================================================================ ================================================================ 11 — CF-NEXT CONTINUAR CON MI EXPERIENCIA ESTADO NORMAL ================================================================ IDENTIDAD: METAL + ORO + GLOW AZUL ================================================================ ================================================================ */ #cf-next { border-color: #5A3A15 !important; /* ------------------------------------------------------------ GLOW AZUL ------------------------------------------------------------ */ box-shadow: 0 4px 10px rgba(0,0,0,.55), 0 0 7px rgba(0,220,255,.80), 0 0 16px rgba(0,150,255,.55), 0 0 30px rgba(0,100,255,.30), inset 0 1px 0 rgba(255,255,255,.10); /* ------------------------------------------------------------ TEXTO ------------------------------------------------------------ */ text-shadow: 0 1px 2px rgba(0,0,0,.85); } /* ================================================================ ================================================================ 12 — CF-NEXT CAPA VISUAL ::BEFORE METAL MEDIEVAL OSCURO ================================================================ ================================================================ */ #cf-next::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; /* ------------------------------------------------------------ DIMENSIONES ------------------------------------------------------------ */ display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; /* ------------------------------------------------------------ METAL CHRONOS FANTASY ------------------------------------------------------------ */ background: linear-gradient( 180deg, #352417 0%, #2B1B11 38%, #20150E 72%, #160D08 100% ) !important; border: 0 !important; border-radius: inherit !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: none !important; /* ------------------------------------------------------------ ACABADO METÁLICO ------------------------------------------------------------ */ box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 0 rgba(0,0,0,.50); transition: background .30s ease, opacity .30s ease !important; } /* ================================================================ ================================================================ 13 — CF-NEXT HOVER ================================================================ BASE: METAL OSCURO HOVER: METAL ILUMINADO + ORO + GLOW ROSA ================================================================ ================================================================ */ #cf-next:hover { color: #F8E5B6 !important; border-color: #D6A84F !important; transform: translateY(-2px) !important; /* ------------------------------------------------------------ GLOW ROSA ------------------------------------------------------------ */ box-shadow: 0 6px 14px rgba(0,0,0,.60), 0 0 8px rgba(255,255,255,.70), 0 0 18px rgba(255,40,235,1), 0 0 35px rgba(255,0,185,.80), 0 0 52px rgba(210,0,145,.45), inset 0 1px 0 rgba(255,255,255,.80); text-shadow: 0 1px 2px rgba(0,0,0,.90); } /* ================================================================ 14 — CF-NEXT HOVER — TEXTO INTERNO ================================================================ */ #cf-next:hover, #cf-next:hover span, #cf-next:hover strong, #cf-next:hover b, #cf-next:hover em, #cf-next:hover i, #cf-next:hover .elementor-button-text, #cf-next:hover .elementor-button-content-wrapper { color: #F8E5B6 !important; font-family: "Cinzel", Georgia, "Times New Roman", serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .5px !important; } /* ================================================================ ================================================================ 15 — CF-NEXT HOVER — METAL ILUMINADO ================================================================ ================================================================ */ #cf-next:hover::before { background: linear-gradient( 180deg, #4A3422 0%, #382519 38%, #281A11 72%, #1B100A 100% ) !important; opacity: 1 !important; visibility: visible !important; } /* ================================================================ ================================================================ 16 — CF-NEXT FOCUS / ACTIVE ================================================================ ================================================================ */ #cf-next:focus, #cf-next:active { color: #F8E5B6 !important; outline: none !important; } #cf-next:focus *, #cf-next:active * { color: #F8E5B6 !important; } #cf-next:focus::before, #cf-next:active::before { opacity: 1 !important; visibility: visible !important; } /* ================================================================ ================================================================ 17 — PROTECCIÓN FINAL CONTRA ELEMENTOR NO PERMITIR QUE LA TIPOGRAFÍA GLOBAL DEL SITIO SOBRESCRIBA LOS BOTONES ================================================================ ================================================================ */ #cf-skip, #cf-skip *, #cf-next, #cf-next * { font-family: "Cinzel", Georgia, "Times New Roman", serif !important; font-style: normal !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.2 !important; letter-spacing: .5px !important; text-transform: uppercase !important; } /* ================================================================ ================================================================ 18 — PROTECCIÓN FINAL DEL COLOR ESTADO NORMAL ================================================================ ================================================================ */ #cf-skip, #cf-skip span, #cf-skip strong, #cf-skip b, #cf-skip .elementor-button-text, #cf-skip .elementor-button-content-wrapper, #cf-next, #cf-next span, #cf-next strong, #cf-next b, #cf-next .elementor-button-text, #cf-next .elementor-button-content-wrapper { color: #D6B06A !important; } /* ================================================================ ================================================================ 19 — PROTECCIÓN FINAL DEL COLOR ESTADO HOVER ================================================================ ================================================================ */ #cf-skip:hover, #cf-skip:hover span, #cf-skip:hover strong, #cf-skip:hover b, #cf-skip:hover .elementor-button-text, #cf-skip:hover .elementor-button-content-wrapper, #cf-next:hover, #cf-next:hover span, #cf-next:hover strong, #cf-next:hover b, #cf-next:hover .elementor-button-text, #cf-next:hover .elementor-button-content-wrapper { color: #F8E5B6 !important; } /* ================================================================ ================================================================ 20 — ACCESIBILIDAD REDUCIR ANIMACIONES ================================================================ ================================================================ */ @media (prefers-reduced-motion: reduce) { #cf-skip, #cf-next, #cf-skip::before, #cf-next::before { transition: none !important; } #cf-skip:hover, #cf-next:hover { transform: none !important; } } /* ================================================================ ================================================================ FIN CHRONOS FANTASY — MAGIC METAL BUTTONS ================================================================ ================================================================ */ ```/* End custom CSS */