@charset "UTF-8";

/* assets/css/index.css */
@import url(https://use.fontawesome.com/releases/v5.8.2/css/all.css);.accordion,.bmd-form-group,.gallery-detail,.img-gallery:hover>div.info-complement,ul#cajaGaleria{position:relative}#check-authorize a,.a-compl{text-decoration:underline!important}*,li{list-style:none}.icon0,[class*=" icon-"],[class^=icon-]{font-style:normal;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.carrusel-item-text a,.main-olvidaste-contrasena .sct_olv-contr form .content-btn-oc a.registrarse-:last-child,.nts-ins a{text-decoration:underline}*{box-sizing:border-box;padding:0;margin:0;font-size:16px}.color-orange-dulce,.detail-detail span,.icon-icon-wsap.icontws:before,.inicio-productos-banner-txt a{color:#ffb466}.color-terciario,.sct-compra-realizada .description-datos-cr,.sct-compra-realizada .precio-total-cr{color:#591b15}.gallery-complement,.text-grande{color:#6f5844}.color-beige{color:#f9d5b3}.font-mellifret{font-family:mellifret}.font-playlist{font-family:playlist}#empresas .contenedor>.container-fluid .row:not(form) .col:not(.form-group):not(.form-check) b,.content-Attention h1,.font-brandonB,.info-cards h1,.inicio-productos-banner-txt b,.inicio-productos-banner-txt strong{font-family:brandon_grotesquebold}#inicio-testimonios-carrusel a,.btn-pagar,.content-products-img-home:hover .precio-prd,.content-products-img:hover .precio-prd,.font-principal,.img-gallery:hover .prc-compl,.main-buscador,.main-carrito,.main-contactenos,.main-mensaje-b,.main-mensaje-cnt,.marron,.select select:focus,.select select:hover{color:#796857}.has-success [class*=" bmd-label"],.has-success [class^=bmd-label],.is-focused [class*=" bmd-label"],.is-focused [class^=bmd-label],.text-two-oscuro{color:#ad856a}.sct-formulario-empresas .container-fluid .row .col .h2,.text-two,.title-products-index .h1{color:#ffc999}.rotar{-webkit-transform:rotate(-7deg);transform:rotate(-7deg)}.font-form-a{color:#796857;font-size:14px}.padding-repeat{padding-top:2rem}.mt-repeat{margin-top:5.9rem}.width-img{width:25%!important}.color-gris,.detail-detail p,.detail-detail ul li,.detail-detail ul span,.main-libroreclamos input,.main-libroreclamos textarea,.select.select-detail select,.two-text-contc{color:#4c4c4c}.fondo-login{background:#fdd7aa}.carousel-fade .carousel-inner .item{transition-property:opacity}.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right,.carousel-fade .carousel-inner .item{opacity:0}.carousel-fade .carousel-inner .active,.carousel-fade .carousel-inner .next.left,.carousel-fade .carousel-inner .prev.right,.gallery-detail ul#cajaGaleria li div#galeria00,.regal.active{opacity:1}.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right,.carousel-fade .carousel-inner .next,.carousel-fade .carousel-inner .prev{left:0;transform:translate3d(0,0,0)}.carousel-fade .carousel-control,.description-products-index{z-index:2}.icon-arrow-right{border:solid #fff;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.icon-arrow-left{border:solid #fff;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.datepicker table tr td span.active,.datepicker table tr td span.active.disabled,.datepicker table tr td span.active.disabled:hover,.datepicker table tr td span.active:hover,.datepicker tfoot tr:first-child th:hover,.datepicker thead tr:first-child th:hover,.modal-content{background:#fbf9ec!important}.datepicker thead tr:first-child th.next:hover,.datepicker thead tr:first-child th.prev:hover{background:#ad856a!important}.iconsvg{height:65px;width:65px;padding:9px;display:block;margin:auto}.bmd-form-group.is-filled .bmd-label-placeholder,.checked-repeat.comprobant-pago.bol input[type=radio]:checked .datos-factura,.gallery-detail ul#cajaGaleria li input,.iconsvg.ocult,.nav-link:hover .iconsvg.ver,.nav-phone-mobile,.ripple-container{display:none}.btn-comprar-detail,.info-complement ul{display:-webkit-box;display:-ms-flexbox}.checked-repeat.comprobant-pago.fact input[type=radio]:checked .datos-factura,.containers input:checked~.checkmark:after,.img-gallery:hover>div.hovers,.nav-link:hover .iconsvg.ocult{display:block}.nav>li>a:hover{color:#8e674d!important;-webkit-animation:.3s ease-out slide-y;-moz-animation:.3s ease-out slide-y}.accordion-content a:hover:focus,.navbar-nav .active>.nav-link,.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev{color:#ffb466!important}.navbar-nav .active>.nav-link .iconsvg.ocult{display:block!important}.navbar-nav .active>.nav-link .iconsvg.ver{display:none!important}@font-face{font-family:mellifret;src:url("../../fonts/MELLIFRET.TTF")}@font-face{font-family:playlist;src:url("../../fonts/PLAYLIST_CAPS.OTF")}@font-face{font-family:brandon_grotesquebold;src:url("../../fonts/brandon_bld_0-webfont.woff2") format("woff2"),url("../../fonts/brandon_bld_0-webfont.woff") format("woff");font-weight:400;font-style:normal}@font-face{font-family:brandon_grotesque_regularRg;src:url("../../fonts/brandon_reg_0-webfont.woff2") format("woff2"),url("../../fonts/brandon_reg_0-webfont.woff") format("woff");font-weight:400;font-style:normal}@font-face{font-family:icomoon;src:url("../../fonts/icomoon.eot?oj6mvn");src:url("../../fonts/icomoon.eot?oj6mvn#iefix") format("embedded-opentype"),url("../../fonts/icomoon.ttf?oj6mvn") format("truetype"),url("../../fonts/icomoon.woff?oj6mvn") format("woff"),url("../../fonts/icomoon.svg?oj6mvn#icomoon") format("svg");font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:none;font-weight:400;text-transform:none;line-height:1}.datos-comprador h1,.detail-detail h1,.icons-como-comprar h1,.info-formasdepago .row h1,.sct-content-table,.sct-description-reclamo h1,h3.title-filter{font-family:brandon_grotesquebold}.btn-comprar,.search-btn{text-transform:uppercase}.icon-hojas2:before{content:""}.icon-hojas1:before{content:""}.icon-icono10:before{content:""}.icon-icono8:before{content:""}.icon-icono9:before{content:""}.icon-lapiz:before{content:""}.icon-check:before{content:""}.icon-detalle:before{content:""}.icon-icono-x:before{content:""}.icon-wa2:before{content:""}.icon-cart2:before{content:""}.icon-phone2:before{content:""}.icon-icon-cart:before{content:""}.icon-icon-lupa:before{content:""}.icon-icon-telf:before{content:""}.icon-icon-wsap:before{content:""}.icon-icono-facebook:before{content:""}.icon-icono-instagram:before{content:""}.icon-icono-libro:before{content:""}.icon-icono-pinterest:before{content:""}.sct-detail-product{padding-top:55px;margin-bottom:3rem}.gallery-detail{width:100%}.gallery-detail ul#cajaGaleria li div{width:75%!important;height:inherit!important;position:absolute;opacity:0;top:0;left:15%!important;-o-transition:.2s ease-out;transition:.2s ease-out;-webkit-transition:.2s ease-out;-moz-transition:.2s ease-out}.gallery-detail ul#cajaGaleria li label{position:relative;z-index:3;width:65px;height:65px;margin:2px 0;cursor:pointer}input#btn01:checked~#galeria01,input#btn02:checked~#galeria02,input#btn03:checked~#galeria03{opacity:1;z-index:1}#empresas #empresas-funciona li,.content-info-empresas,.gallery-img{text-align:center}.gallery-img img{width:100%;-o-object-fit:cover;object-fit:cover;height:100%;max-width:650px}.content-products-img img,.content-products-img-home img,.gallery-img-pequena{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.detail-detail ul li{list-style:inside;line-height:1.2}.detail-detail p{border-top:1px dashed #ffb466;padding-top:25px;margin-top:10px}.detail-detail h1{font-size:23px;margin-bottom:0}.sol{font-size:31px}.detail-detail span span{font-size:30px}.detail-detail span a{font-size:16px;color:#ffb466}.detail-detail span a:hover{color:#796857;text-decoration:none}.info-complement+.containers.btn-agregar,.select.select-detail{margin-top:15px}.content-compra{height:42px}.content-compra input{width:100%;height:100%;font-size:2rem;padding-top:.9rem;text-align:center;border:1.3px solid #796857;color:#796857;margin-right:1rem}#empresas #empresas-personaliza .col>.parrafos,.list-a li{text-align:justify}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.content-compra input:focus{-webkit-box-shadow:none!important;box-shadow:none!important;border:1.3px solid #796857!important}.content-compra label{background:0 0;top:auto;font-size:11px;color:#796857}.btn-comprar-detail{width:100%;height:100%;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#796857!important;border-radius:inherit!important;color:#fff}.btn-comprar-detail:focus,.btn-comprar-detail:hover{-webkit-box-shadow:none!important;box-shadow:none!important;background-color:#f9d5b3!important;color:#796857!important;-o-transition:.15s linear;transition:.15s linear;-webkit-transition:.15s linear;-moz-transition:.15s linear}.btn-primary,.form-control:focus,.form-group .form-control,input:focus{box-shadow:none!important}#check-authorize a:hover,.btn-comprar-detail:hover .icon-icon-cart{color:#796857!important}.content-compra .icon-icon-cart{color:#fff!important;font-size:1.5rem;margin-left:19px}.title-complement{margin-bottom:3rem;text-align:center}.title-complement h1{line-height:.5}.title-complement i{font-size:1.7rem!important}.title-complement .select_arrow{position:relative;right:0;top:-21px;width:46px;height:46px;border-radius:0 10% 10% 0;border-width:0 5px 5px 0;border-color:#ffb466}.img-gallery{height:auto;margin-bottom:4rem;position:relative}.content-products-img .img-prod,.content-products-img-home .img-prod,.img-gallery img{-webkit-transition:.4s ease-in-out;-o-transition:.4s ease-in-out;transition:.4s ease-in-out}#empresas #empresas-personaliza .col .container-fluid,.content-Attention.container-fluid,.content-formulario.container-fluid,.gallery-complement.container-fluid,.main-mi-perfil .mi-perfil .container-fluid{width:100%!important}#empresas .contenedor,#inicio-instagram,#inicio-testimonios,.carridrop .bmd-form-group,.content-carriocult>.row,.content-hora-pedido .btn-group,.content-product-index .av-container.av-visible,.fotos-celebracion.container-fluid .av-container.av-visible,.gallery-complement .row .img-gallery figure,.hovers,.img-compmob>.row,.sct-formulario-empresas .container-fluid .row .col img,.sct-slider-index{width:100%}.gallery-complement .row .img-gallery figure img{width:70%;height:100%;-o-object-fit:contain;object-fit:contain;margin:auto}.info-complement ul{min-height:50px;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;border-bottom:1px dashed rgba(111,88,68,.3)}.info-complement ul .title-prod-cmpl{text-transform:uppercase;font-size:14px;line-height:1.4;margin-bottom:10px}.description-products-index span,.info-complement span,.main-mi-perfil .form-perfil h1,.sct-compra-realizada .content-description-cr .h1,.sct-compra-realizada .content-description-cr .subtotal,.sct-compra-realizada .content-description-cr .subtotal .h1,.sct-compra-realizada .content-description-cr h1,.sct-compra-realizada .precio-total-cr .h1,.sct_title_buscador p{font-size:1.5rem}.hovers{background:rgba(255,253,237,.7);position:absolute;height:calc(100% - 100px);left:0;top:0;margin:auto;right:0;opacity:.7;display:none;z-index:1}.img-gallery:focus .containers,.img-gallery:hover .containers{background:#796857;color:#fff}.img-gallery:focus .checkmark,.img-gallery:hover .checkmark{border:1px solid #fff}.content-products-img-home:hover .img-prod,.content-products-img:hover .img-prod,.img-gallery:hover img{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}.info-complement{z-index:1}label.containers{display:block;padding:.5rem 2rem 0 3rem;cursor:pointer;font-size:17px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#fff;position:absolute;bottom:0;top:95%;left:23%;height:35px;color:#8e674d;-o-transition:.15s linear;transition:.15s linear;-webkit-transition:.15s linear;-moz-transition:.15s linear}.containers input,.radio input{position:absolute;opacity:0;cursor:pointer}.checkmark{position:absolute;top:6px;left:18px;height:25px;width:25px;border-radius:50%;border:1px solid #796857;background:0 0}.containers input:checked~.checkmark,.containers:hover input~.checkmark,.table-striped .datepicker table tr td,.table-striped .datepicker table tr th{background-color:transparent}.checkmark:after,.checkround:after{content:"";position:absolute;display:none}.containers .checkmark:after{top:4px;left:4px;width:15px;height:15px;border-radius:50%;background:#f9d5b3}.complement-pedido{margin-top:4rem}.regal{opacity:.4}.galeripe{padding-left:2em;padding-right:2em}.btn-agregar.btnagre{top:92%}.main-nosotros{margin:9.2rem 0 5rem;color:#4c4c4c}.sct-content-img-nosotros{margin-bottom:5.5rem!important}.sct-intro-nosotros{margin-bottom:2rem}.sct-intro-nosotros h1{margin-bottom:0!important;font-size:2.25rem}.sct-intro-nosotros div:last-child .h1{font-size:40px;line-height:1;padding-bottom:1rem}.sct-intro-nosotros p{margin-top:2rem;padding:0 12rem}.sct-description-nosotros .row .img-celebration-nosotros{border:1px solid #f9d5b3;border-radius:10px;padding:2.5rem 2rem 1rem;position:relative}.sct-description-nosotros .row .img-celebration-nosotros img{width:100%;margin-bottom:1rem}.sct-description-nosotros .row .img-celebration-nosotros div div{width:35px;height:35px;border-radius:50%;border:1px solid #f9d5b3;margin:auto}.img-gif-1ns{position:absolute;bottom:230px;left:0;right:0;margin:auto}.gifs{left:0;right:0;margin:auto}.sct-formulario-empresas.form-contactenos{background:url(../../images/banner-contacto.jpg) center/cover}.sct-formulario-empresas.form-contactenos .info-contact-form{padding-top:12rem;padding-bottom:3rem}.sct-formulario-empresas.form-contactenos .info-contact-form .div-one{padding-top:1rem}#inicio-instagram-lista .col,.content-fomulario.container-fluid{padding-left:0;padding-right:0}.content-Attention,.info-cards .payment-form,.info-cards .providers,.info-cards .shipping-cost{border:1px solid #ffb466;border-radius:13px}.content-Attention{padding:2rem 10px;margin-top:3rem}.content-Attention h1,.content-Attention p{margin-bottom:auto!important}.content-Attention p{font-size:.9rem;line-height:1}.content-Attention h1{font-size:1.12rem}.info-cards .payment-form,.info-cards .providers,.info-cards .shipping-cost{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;height:280px;margin-bottom:3rem;padding:10px}.info-cards .payment-form img,.info-cards .providers img,.info-cards .shipping-cost img{width:11.25rem}.bmd-form-group .checkbox label,.bmd-form-group .radio label,.bmd-form-group label,.content-info-delivery div h2.textto,.info-cards h1,.main-mi-perfil .title-perfil p,h4.textto{font-size:.9rem}.info-cards p{color:#4c4c4c;line-height:1.3}.call-us .icon-icon-wsap,.main-olvidaste-contrasena .sct_olv-contr .h1,.main-olvidaste-contrasena .sct_olv-contr h1,.sct_title_buscador .h1,.sct_title_buscador h1{font-size:2rem}input[type=checkbox]{display:block!important;z-index:2;opacity:0}.icon-hojas1 .iho1,.icon-hojas1.hojafp1{margin-right:0!important}.icon-hojas2 .iho2,.icon-hojas2.hojafp2{margin-left:0!important}.sct-empresas{margin-top:12rem}.content-info-empresas h1{font-size:6rem}.content-info-empresas p,.info-formasdepago,.info-formasdepago ul li span,.main-mi-perfil .content-detalle div,.sct-description-costosdeenvio ul span{color:#5b5b5b}.fotos-celebracion{width:100%;height:auto;position:relative}.fotos-celebracion.container-fluid{width:100%!important;padding:0 3rem}.fotos-celebracion .content-img{width:43%;border:1px solid #f9d5b3;padding:1rem;border-radius:10px}.fotos-celebracion .content-img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.fotos-celebracion .content-img:first-child{width:38%;position:absolute;bottom:-17px;right:0;margin:auto;left:0;border:none;padding:0}.fotos-celebracion .content-img .vacio{width:94%;height:92%;position:absolute;border:1px solid #f9d5b3;top:0;left:0;bottom:0;right:0;margin:auto}.gif-empr{position:relative;left:50%;right:0}.empr-2{position:relative;top:227px}.carrusel-item-text p,.fotos-celebracion.container-fluid>.row{width:100%;margin:0}.sct-busqueda{margin:14rem 0 3rem}.hovers-busqueda,.hovers-busqueda img{margin:auto;position:absolute;top:0;left:0;right:0;bottom:0}.row.content-busqueda{border-bottom:1px dashed #ffb466;padding-bottom:.5rem}h3.title-filter{font-size:18px;background:url(../../images/icono-filtro.svg) left center/contain no-repeat;padding-left:64px}.content-busqueda .title-busqueda{color:#8e674d;position:relative;width:100%;margin:-50px 0 0!important;text-align:center}.hovers-busqueda{background:rgba(255,253,237,0);width:90%;height:100%;display:none;z-index:1}.content-products-img,.content-products-img-home{height:auto!important;-webkit-box-orient:vertical;-webkit-box-direction:normal}.hovers-busqueda img{width:111px!important;height:100px!important}.content-products-img{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;position:relative}.content-products-img-home:hover .hovers-busqueda,.content-products-img:hover .hovers-busqueda{display:block;opacity:1;background:rgba(255,253,237,.6)!important;position:absolute!important}.content-products-img-home:hover .btn-comprar,.content-products-img:hover .btn-comprar{background:#796857!important;color:#fff!important;z-index:2;-o-transition:.15s linear;transition:.15s linear;-webkit-transition:.15s linear;-moz-transition:.15s linear}.content-products-img-home:hover .icon-icon-cart,.content-products-img:hover .icon-icon-cart{color:#fff!important}.content-products-img-home:hover>div.description-products-index,.content-products-img:hover>div.description-products-index{bottom:0!important;position:relative!important;width:98%!important}.content-products-img div,.content-products-img-home div{width:98%;height:auto;float:left;position:relative}.content-products-img .icon-icon-cart,.content-products-img-home .icon-icon-cart{font-size:25px;color:#796857;margin-left:12%}.content-products-img-home{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;margin-bottom:5.5rem;position:relative}.content-products-img-home div:nth-child(2){height:340px;overflow:hidden}.description-products-index ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;border-bottom:1px dashed}.btn-comprar,.sct-buscar-distrito div:last-child{display:-webkit-box;display:-ms-flexbox;-webkit-box-pack:center}.btn-comprar{position:absolute;bottom:-22px;height:42px;border-radius:inherit!important;background:#f9d5b3!important;border:none!important;color:#796857!important;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:57%!important;font-weight:700;letter-spacing:2px}.nform,label{background:#fff}.banner-repeat .title-banner-repeat i,.btn-comprar:hover .icon-icon-cart,.search-box.search-elem button.submit[disabled]{color:#fff}.title-dcpt-product{font-size:15px}.banner-repeat{width:100%;height:27.25rem;position:relative;margin-bottom:3rem}.banner-repeat img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:bottom;object-position:bottom}.banner-repeat .title-banner-repeat{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:#fff}.banner-repeat .title-banner-repeat .h1,.banner-repeat .title-banner-repeat h1{font-size:7rem;line-height:.7;text-align:center}.content-products-img.prod-ofertas:before{content:"OFERTA";background:#796857;position:absolute;top:0;left:6px;z-index:9;padding:.2rem .9rem;color:#fff;font-family:brandon_grotesquebold;letter-spacing:5px;transition:.3s ease-out}.info-formasdepago .row h1{color:#6f5844;font-size:1.5rem}.info-formasdepago .row div:last-child ul li{list-style:inside}.info-formasdepago .row .content-img-credito .img-creditos{width:16%}.content-img-bancos img{width:25%}.content-img-bancos div:last-child img{width:31%}.content-img-bancos div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.accordion.accordion-preguntas .accordion-content,.content-img-bancos div:last-child{padding-left:3rem}.content-img-bancos div h4{text-align:left;font-size:1.1rem}.content-img-bancos div h4 span,.sct-compra-realizada .description-datos-cr h3{font-size:.8rem}.gif-fdp{position:relative;top:-89px}.gif-aal,.gif-ccp{position:absolute}.p-tfdp{margin-top:3rem;padding:0 35rem}.sct-buscar-distrito{color:#796857;margin-bottom:8rem}.sct-buscar-distrito .select_arrow{top:-6px}.sct-buscar-distrito div:last-child{display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.sct-buscar-distrito button{margin-top:1.3rem;width:100%}.sct-buscar-distrito .row div:first-child{border-right:1.5px dashed #ffb466}.sct-buscar-distrito .row div:first-child h4,.sct-text-medio p{font-size:18px}.content-hora-pedido .dropdown-menu li a:hover,.main-buscador .sct-filter .container,.sct-buscar-distrito .row div table thead{background:#fbf9ec}.sct-buscar-distrito .row div table thead th{padding:.5rem}.sct-buscar-distrito .row div table thead th h3{font-size:24px}.sct-buscar-distrito .row div table thead th:last-child h3{border-left:1px solid}.sct-buscar-distrito .row div table h4{margin-top:2rem!important;font-size:16px}.sct-buscar-distrito .row div table span{font-size:2.3rem}#empresas #empresas-personaliza .col .container-fluid .row .parrafos ul li,.sct-description-costosdeenvio ul li{list-style:initial}.navbar-toggler,.table td,.table th,.table thead th{border:none!important}.img-cst-car{width:100px}ul.costolist li{line-height:1!important}ul.costolist li br.br2{line-height:1.5!important;display:block;margin:10px 0;content:""}div.select.costen{display:inline-block!important}.main-mi-perfil .content-detalle div.tel2 a span,div.select.costen select#idDistrito{font-size:16px!important}.accordion dd,.accordion__panel{font-size:1em;line-height:1.5em;margin-bottom:0!important}.accordion dd ul li{list-style:inside;padding-left:2rem;color:#4c4c4c}.accordion p{padding:1em 2em 0;margin-bottom:0!important}.accordion .accordionTitle,.accordion .accordion__Heading{text-align:left;font-weight:700;padding:.8rem;display:block;text-decoration:none;color:#796857;-webkit-transition:background-color .5s ease-in-out;-o-transition:background-color .5s ease-in-out;transition:background-color .5s ease-in-out}.accordion .accordionTitle:before,.accordion .accordion__Heading:before{content:"+";font-size:1.5em;line-height:.5em;float:left;-webkit-transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;-o-transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out;padding-right:.5rem;color:#ffb466}.accordion .accordionTitle:hover,.accordion .accordion__Heading:hover{color:#ffb466;text-decoration:underline}.accordion .accordionTitle.is-expanded:before,.accordion .accordionTitleActive:before,.accordion.accordion-preguntas .accordionTitle-ayuda.is-expanded::after,.accordion.accordion-preguntas .accordionTitle-ayudaActive::after{content:"-";font-size:3em;line-height:.2em}.accordionItem{height:auto;overflow:hidden;max-height:50em;-webkit-transition:max-height 1s;-o-transition:max-height 1s;transition:max-height 1s}@media screen and (min-width:48em){.accordionItem{max-height:15em;-webkit-transition:max-height .5s;-o-transition:max-height .5s;transition:max-height .5s}}.accordionItem.is-collapsed{height:0}.no-js .accordionItem.is-collapsed{height:auto}.animateIn{-webkit-animation:.45s ease-in-out both accordionIn;animation:.45s ease-in-out both accordionIn}.animateOut{-webkit-animation:.45s ease-in-out alternate both accordionOut;animation:.45s ease-in-out alternate both accordionOut}@-webkit-keyframes accordionIn{0%{opacity:0;-webkit-transform:scale(.9) rotateX(-60deg);transform:scale(.9) rotateX(-60deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes accordionIn{0%{opacity:0;-webkit-transform:scale(.9) rotateX(-60deg);transform:scale(.9) rotateX(-60deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes accordionOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(.9) rotateX(-60deg);transform:scale(.9) rotateX(-60deg)}}@keyframes accordionOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(.9) rotateX(-60deg);transform:scale(.9) rotateX(-60deg)}}.sct-text-medio{margin-bottom:15rem}.sct-text-medio .content-text img{width:18%}.container.content-acordeon-ayuda{padding:0 10rem}.accordion.accordion-preguntas .accordionTitle-ayuda,.accordion.accordion-preguntas .accordion__Heading-ayuda{font-weight:700;padding:.8rem;display:block;text-decoration:none;color:#796857;-webkit-transition:background-color .5s ease-in-out;-o-transition:background-color .5s ease-in-out;transition:background-color .5s ease-in-out}.accordion.accordion-preguntas .accordionTitle-ayuda::after,.accordion.accordion-preguntas .accordion__Heading-ayuda::after{content:"+";font-size:1.5em;line-height:.5em;-webkit-transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;-o-transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out;color:#ffb466}.accordion.accordion-preguntas dl{border-left:1px dashed #ffb466;padding-left:2rem}.accordion.accordion-preguntas .accordion-content,.accordion.accordion-preguntas .accordion-content a{color:#5b5b5b!important;text-decoration:none}.accordion.accordion-preguntas .accordion-content ul li,.carrusel-item-text b,.carrusel-item-text strong{font-weight:700}.gif-aal{left:0;right:0;margin:auto}.icons-como-comprar .icon-icono10,.icons-como-comprar .icon-icono8,.icons-como-comprar .icon-icono9{font-size:10rem}.icons-como-comprar div{margin:2.5rem 0 0}.icons-como-comprar div:last-child{margin:0!important}.icons-como-comprar div p{color:#5b5b5b;padding:0 8rem}.icons-como-comprar h1{font-size:1.4rem}.icons-como-comprar .av-container.av-visible{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;margin-top:0}.gif-ccp{bottom:4%;left:34%}.gif-ccp-2{position:relative!important;left:32%!important}.icon-hojas2.hojacc2{margin-left:6px}.title-reclamos{padding-bottom:2rem;border-bottom:1px dashed #ffc999;color:#4c4c4c}.title-reclamos h1{font-size:3.5rem}.title-reclamos .icon-hojas1,.title-reclamos .icon-hojas2{font-size:34px}.sct-description-reclamo{margin-bottom:5rem}.sct-description-reclamo h1{margin-bottom:2rem;font-size:1.5rem;color:#796857}.main-libroreclamos{margin-top:8rem}.main-libroreclamos label{color:#4c4c4c;font-size:.85rem}.form-check-detail.check-repeat{position:relative;left:0;right:0;bottom:0;margin-bottom:2rem;padding-left:2rem;margin:inherit}.check-repeat.comprobante-pago .checkround,.sct-description-reclamo .checkround{height:20px;width:20px}.sct-description-reclamo .radio{padding-left:33px}.sct-description-reclamo .radio .checkround:after{left:3px;top:3px;background:#ffb466}.nform{border-radius:0;border:none;height:40px;color:#fff}.icox,.icox2{top:18%;color:#ffb466;position:absolute;float:right}input#date{cursor:pointer;color:#fff}label{position:absolute;z-index:1;top:7px;left:27px;-webkit-transition:.2s;-o-transition:.2s;transition:.2s;-webkit-transform-origin:0% 100%;-ms-transform-origin:0% 100%;transform-origin:0% 100%;color:#796857;font-weight:400}label a{color:#796857;cursor:pointer}input[type=date]::-webkit-inner-spin-button{opacity:0}input[type=date]::-webkit-calendar-picker-indicator{color:transparent;opacity:0}input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:.8}.sct-two-reclamo .select_arrow{right:34px;border:solid #796857;border-width:0 2px 2px 0}.sct-two-reclamo .btn-buscar{margin-left:1rem;height:39px}.sct-two-reclamo .container-fluid{width:100%!important;padding:0!important}.sct-two-reclamo .select_arrow .lr{bottom:17px}h1 .select_arrow{z-index:-1!important}h1.titulorecla{margin-bottom:1.2rem!important;margin-left:-8px!important}.icox{right:3%}.icox2{right:6%}.tooltip-inner{background-color:#796857}.main-carrito .form-control{border:1px solid #ced4da!important}.sct-content-table{margin:16rem 0 8rem}.form-control,.main,.main-repeat{font-family:brandon_grotesque_regularRg}#header_detail_shop{background:#f9d5b3;padding:1rem 0}#header_detail_shop li{font-size:16px;border-right:1px solid;padding:0!important}#header_detail_shop li:last-child{border-right:none}.datos-comprador h1{font-size:1.1rem;margin:1rem 0}.select.select-delivery select{font-size:15px;height:35px}.select.select-delivery .select_arrow{right:24px}.content-info-delivery{border-top:1px dashed #ffb466;border-bottom:1px dashed #ffb466;margin-bottom:1rem}.content-info-delivery div h2,.prec-cont .tdcrs{font-size:16px}.form-group{margin-bottom:0!important}.tdcrs{color:#6f5844;font-size:14px}.total-general{margin-bottom:3.7rem}.fdqueja .select_arrow{top:-19px;bottom:0;right:25px}.content-cod-promocion,.content-cod-promocion .btn-primary,.content-cod-promocion input{width:100%;height:100%}.content-cod-promocion .btn-primary{background:#796857;color:#fff;border:none!important}.btn-pagar:hover,.content-cod-promocion .btn-primary.btn-borrar{background:#f9d5b3!important}.content-cod-promocion label{top:-28px}.content-cod-promocion input{border:1px solid #ffb466}.content-cod-promocion table td span{width:0!important}.bootstrap-timepicker-widget table td input{width:38px!important}.bootstrap-timepicker-widget table td:not(.separator){min-width:71px!important}.bootstrap-timepicker-widget table td a{border:none!important;padding:0!important}.nts-ins,.nts-ins a{font-size:13px;color:#ffb466;line-height:.1}.check-repeat.comprobante-pago label{color:#5b5b5b;font-size:13px}.check-repeat.comprobante-pago .radio .checkround:after,.check-repeat.form-pago .radio .checkround:after{left:3px;top:4px;width:11px;height:11px}.check-repeat.form-pago label{color:#796857;font-size:.75rem;line-height:.7;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.check-repeat.form-pago .checkround{height:20px;width:20px;top:15px}.check-repeat.form-pago img{width:60px}.form-pago-car div{width:19%}.content-total-pagar{margin-top:60px}.btn-pagar{width:100%!important;height:41px!important;border-radius:inherit!important;background:#796857!important;border:none;font-weight:700;color:#fbf9ec;-o-transition:.15s linear;transition:.15s linear;-webkit-transition:.15s linear;-moz-transition:.15s linear}.btn-pagar:hover{color:#796857!important}.total-pago span:first-child{font-size:.8rem;font-weight:700;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.total-pago span:last-child{font-size:1.4rem;font-weight:700}.total-pago span h1{font-size:2rem;margin:0!important}.content-btn-pagar{width:50%!important}.datos-factura.container-fluid{width:100%!important;margin:1rem}.content-table{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.header-car{display:-webkit-box;display:-ms-flexbox;display:flex}.selc-cant{width:55px;border:none}.a-compl{color:#796857}.content-hora-pedido .select_arrow{position:absolute;top:-17px}.content-hora-pedido .dropdown-menu{width:230px;min-width:260px}.content-hora-pedido .dropdown-menu li a{color:#8e674d;text-decoration:none;padding:0 3rem}textarea.form-control{height:118px!important}.diay{margin-left:-8px!important}.note{font-size:10px!important}.list-a i.icon-check{color:#ffb466;float:left;font-size:11px;margin-top:12px}.list-a li{margin-left:20px;line-height:1.2;padding-top:10px}[class*=" bmd-label"],[class^=bmd-label]{color:rgba(0,0,0,.4)}.custom-file-control:disabled,.disabled.custom-file-control,.form-control.disabled,.form-control:disabled,.form-control[disabled],[disabled].custom-file-control,fieldset[disabled][disabled] .custom-file-control,fieldset[disabled][disabled] .form-control{background-image:linear-gradient(90deg,rgba(0,0,0,.26) 0,rgba(0,0,0,.26) 30%,transparent 0,transparent);background-repeat:repeat-x;background-size:3px 1px}.is-focused .valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:rgba(0,0,0,.26)}.is-focused .valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.5rem;margin-top:.1rem;font-size:.875rem;line-height:1;color:#fff;background-color:rgba(0,0,0,.8);border-radius:.2rem}.is-focused .custom-select.is-valid,.is-focused .form-control.is-valid,.is-focused .is-valid.custom-file-control,.was-validated .is-focused .custom-file-control:valid,.was-validated .is-focused .custom-select:valid,.was-validated .is-focused .form-control:valid{border-color:rgba(0,0,0,.26)}.is-focused .custom-select.is-valid:focus,.is-focused .form-control.is-valid:focus,.is-focused .is-valid.custom-file-control:focus,.was-validated .is-focused .custom-file-control:valid:focus,.was-validated .is-focused .custom-select:valid:focus,.was-validated .is-focused .form-control:valid:focus{border-color:rgba(0,0,0,.26);box-shadow:0 0 0 .2rem rgba(0,0,0,.25)}.is-focused .custom-control-input.is-valid:focus~.custom-control-label:before,.was-validated .is-focused .custom-control-input:valid:focus~.custom-control-label:before{box-shadow:0 0 0 1px #fafafa,0 0 0 .2rem rgba(0,0,0,.25)}.is-focused .custom-file-input.is-valid~.custom-file-label,.was-validated .is-focused .custom-file-input:valid~.custom-file-label{border-color:rgba(0,0,0,.26)}.is-focused .custom-file-input.is-valid~.custom-file-label:before,.was-validated .is-focused .custom-file-input:valid~.custom-file-label:before{border-color:inherit}.is-focused .custom-file-input.is-valid~.valid-feedback,.is-focused .custom-file-input.is-valid~.valid-tooltip,.was-validated .is-focused .custom-file-input:valid~.valid-feedback,.was-validated .is-focused .custom-file-input:valid~.valid-tooltip{display:block}.is-focused .custom-file-input.is-valid:focus~.custom-file-label,.was-validated .is-focused .custom-file-input:valid:focus~.custom-file-label{box-shadow:0 0 0 .2rem rgba(0,0,0,.25)}.is-focused .bmd-label-placeholder{color:rgba(0,0,0,.26)}.is-focused .custom-file-control,.is-focused .form-control{border-color:rgba(0,0,0,.26)}.is-focused .bmd-help{color:rgba(0,0,0,.54)}.bmd-form-group [class*=" bmd-label"],.bmd-form-group [class^=bmd-label]{position:absolute;pointer-events:none;transition:.3s}.bmd-form-group [class*=" bmd-label"].bmd-label-floating,.bmd-form-group [class^=bmd-label].bmd-label-floating{will-change:left,top,contents}.bmd-form-group.bmd-collapse-inline{display:flex;align-items:center;padding:0;min-height:2.1em}.bmd-form-group.bmd-collapse-inline .collapse{flex:1;display:none}#menuToggle,.bmd-form-group.bmd-collapse-inline .collapse.show,.bmd-form-group.bmd-collapse-inline .collapsing,.bmd-form-group.bmd-collapse-inline .width:not(.collapse),.datepicker.days div.datepicker-days,.datepicker.months div.datepicker-months,.datepicker.years div.datepicker-years,.dropdown:hover>.dropdown-menu,.main-mi-perfil .form-perfil input[type=checkbox],.radio input:checked~.checkround:after{display:block}.bmd-form-group.bmd-collapse-inline .collapse.show{max-width:1200px}.bmd-form-group.bmd-collapse-inline .collapsing{transition-duration:.2s;transition-timing-function:cubic-bezier(0.4,0,0.2,1)}.bmd-form-group .custom-file-control,.bmd-form-group .form-control,.bmd-form-group input::placeholder,.bmd-form-group label{line-height:1.1}.bmd-form-group .checkbox label,.bmd-form-group .radio label,.bmd-form-group .switch label,.bmd-form-group label.checkbox-inline,.bmd-form-group label.radio-inline{line-height:1.5}.bmd-form-group input::placeholder{font-size:1rem}.bmd-form-group .bmd-label-floating,.bmd-form-group .bmd-label-placeholder{bottom:13px;top:10px;left:16px;background:0 0}.bmd-form-group .bmd-label-static,.bmd-form-group .is-filled .bmd-label-floating,.bmd-form-group .is-focused .bmd-label-floating,.bmd-form-group.is-filled .bmd-label-floating,.bmd-form-group.is-focused .bmd-label-floating{top:1px!important;left:16px;font-size:.7rem;background:0 0}.bmd-form-group .bmd-help{margin-top:0;font-size:.75rem}.form-group .form-control{border:1px solid #ced4da!important}.main-buscador .sct-filter{background:0 0;margin-bottom:1rem}.sct_title_buscador{padding:14rem 0 2rem}#idCategoria,#idDestinatario,#idOcasion,#idPrecio{opacity:.5}.icon-icon-wsap.icontws{line-height:.6;width:26px;color:#ffb466}.main-olvidaste-contrasena{color:#796857;margin-bottom:5rem;margin-top:15rem}.main-olvidaste-contrasena .sct_olv-contr{height:calc(85vh - 20rem)}.main-mi-perfil .content-detalle h1,.main-olvidaste-contrasena .sct_olv-contr p{font-size:1.2rem}.main-olvidaste-contrasena .sct_olv-contr form input{width:100%;border:1px solid #ad856a;height:40px;padding:0 .5rem}.main-olvidaste-contrasena .sct_olv-contr form .content-btn-oc{padding:1rem .5rem}.main-olvidaste-contrasena .sct_olv-contr form .content-btn-oc a{text-decoration:none}.main-mensaje-b .sct-mdb .btn,.main-mensaje-b .sct-mdc .btn,.main-mensaje-cnt .sct-mdb .btn,.main-mensaje-cnt .sct-mdc .btn,.main-olvidaste-contrasena .sct_olv-contr form .content-btn-oc .btn-enviar-cntr .btn{background:#796857!important;padding:.5rem 2rem;border-radius:0;color:#fbf9ec}.formulario .form-group .btn-enviar:hover,.main-mensaje-b .sct-mdb .btn:hover,.main-mensaje-b .sct-mdc .btn:hover,.main-mensaje-cnt .sct-mdb .btn:hover,.main-mensaje-cnt .sct-mdc .btn:hover,.main-mi-perfil .form-perfil .btn:hover,.main-olvidaste-contrasena .sct_olv-contr form .content-btn-oc .btn-enviar-cntr .btn:hover,.sct-compra-realizada .btn-sc .btn:hover{background-color:#f9d5b3!important;color:#796857}.main-mi-perfil{padding:14rem 0 7.5rem;color:#796857}.main-mi-perfil .nav-pills .nav-link{padding:.3rem 1rem;color:#ad856a;font-size:1.5rem}.main-mi-perfil .nav-pills .nav-link:last-child{padding:.3rem 1.6rem .3rem 0}.main-mi-perfil .nav-pills .nav-link.active,.main-mi-perfil .nav-pills .show>.nav-link{color:#591b15;background-color:#fbf9ec}.main-mi-perfil .form-perfil .btn{background:#796857!important;border-radius:0;color:#fbf9ec;font-size:.8rem}.main-mensaje-cnt .sct-mdc .h1,.main-mensaje-cnt .sct-mdc h1,.main-mi-perfil .title-perfil .h1,.main-mi-perfil .title-perfil h1,.sct-compra-realizada .precio-total-cr .h4{font-size:1.8rem}.main-mi-perfil .title-perfil h2{font-size:1.4rem}.main-mi-perfil .content-detalle div img{height:auto;width:100%;max-width:450px;margin:15px 0}.main-mi-perfil .content-d-miperfil:hover{box-shadow:0 0 13px -3px rgba(173,173,173,.884)}.arrow_perfil{position:absolute;top:0;bottom:0;left:24px;margin:auto;width:11px;height:11px;border:solid #796857;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.main-mensaje-b .sct-mdb .row,.main-mensaje-cnt .sct-mdb .row{padding-top:3.5rem}.main-mensaje-b .sct-mdb,.main-mensaje-b .sct-mdc,.main-mensaje-cnt .sct-mdb,.main-mensaje-cnt .sct-mdc{height:85vh}.main-mensaje-b .sct-mdb p,.main-mensaje-b .sct-mdc p,.main-mensaje-cnt .sct-mdb p,.main-mensaje-cnt .sct-mdc p{font-size:1.1rem}.main-mensaje-cnt .sct-mdc p{line-height:1.1}.tn-inicio .font-brandonB .btn22{padding:.5rem 1.5rem}.text22{margin-bottom:2em}.sct-compra-realizada{padding-top:13rem}.sct-compra-realizada p{color:#591b15;font-size:.95rem}.sct-compra-realizada .content-title-cr{background:#591b15;padding:.25rem 0}.sct-compra-realizada .content-title-cr h1{font-size:.9rem;color:#fff}.sct-compra-realizada .menu-tabla h1{font-size:1.2rem;color:#591b15}.sct-compra-realizada .content-description-cr{border-bottom:1px solid #eaeaea}.sct-compra-realizada .content-description-cr h2,.sct-compra-realizada .description-datos-cr .h1,.sct-compra-realizada .description-datos-cr h1,.sct-compra-realizada .precio-total-cr h1,.sct-compra-realizada .precio-total-cr h2{font-size:1rem}.sct-compra-realizada .content-description-cr .title-pr-dcp{color:#591b15;font-size:.8rem}.sct-compra-realizada .description-datos-cr p,.sct-compra-realizada .description-datos-cr span{font-size:14px}.sct-compra-realizada .precio-total-cr .total-cr{border-top:1px solid #eaeaea}.sct-compra-realizada .btn-sc{margin-bottom:6rem}.sct-compra-realizada .btn-sc .btn{background:#796857!important;padding:.5rem 1rem;border-radius:0;color:#fbf9ec;font-size:.7rem}@media (min-width:320px) and (max-width:767px){.libro-reclamos-footer,.nav>li>a{display:-webkit-box;display:-ms-flexbox}.content-Attention,.content-img-bancos div,.navbar-collapse{-webkit-box-orient:vertical;-webkit-box-direction:normal}.content-credits .form-pago-footer,.personaje,.pilares{display:none}.img-cst-car{width:65px}.sct-empresas{margin-top:8rem}.sct-mdb,.sct-mdc,.sct_olv-contr{height:76vh!important}.sct-mdb .h1,.sct-mdb h1,.sct-mdc .h1,.sct-mdc h1,.sct_olv-contr .h1,.sct_olv-contr h1{font-size:1.3rem!important}.sct-mdb p,.sct-mdc p,.sct_olv-contr p{font-size:.95rem!important}h3.text1,h3.text2{font-size:30px;text-align:center}.sct-mdb{height:60vh!important}.content-hora-pedido,.nav-movil.container,.sct-intro-nosotros p{padding:0}h3.text1{line-height:16px}.icons-como-comprar div{margin:0}.btn-validar{font-size:.8rem}.sct-description-reclamo{margin-bottom:1rem}.title-complement{margin-bottom:0;margin-top:80px}h2.text3{text-align:center;margin-top:45px}.text3>img{width:50%;margin-top:18px}.txt-carrera>h1{font-size:45px}.txt-carrera>h1>span{font-size:22px}.txt-carrera>p{margin-bottom:19px}.txt-carrera{margin-top:23px;text-align:center}.total-general h4{font-size:1.2rem}.form{position:relative;right:0;margin-top:35px}.cont-form>p{font-size:25px}.cont-footer{padding:15px 0}.align-der,.align-izq{text-align:center}.formulario{width:95%}.nav>li{border-bottom:1.2px solid #ad856a;width:100%}.nav#der>li:last-child{border:none}.nav>li>a{padding-left:0;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.container-fluid,.nav-link{padding:0!important}.cabeceramenu{height:89px;width:100vw}.navbar-top{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-ms-flex-align:end;align-items:end}.log{padding:0 35px}.searchbar:hover>.search_input{margin-left:5px}#izq{padding-top:3rem}#der,#izq{float:none;margin:0 auto!important;width:96%}.container{max-width:100%!important}.bgblanco-top{position:relative;bottom:-89px}.navbar-collapse{position:relative;top:89px;display:inline;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;background:#fbf9ec}.bgblanco-top,.bgcrema{background:rgba(251,249,236,.9)}.nav-link i{font-size:3rem;padding-right:1rem}#izq>li:nth-child(2){padding-left:65px}#der>li:last-child{padding-right:65px}.sct-formulario-empresas .container-fluid .row .col .h2,.sct-formulario-empresas .container-fluid .row .col h2{font-size:3rem!important}.icon-hojas1,.icon-hojas2{font-size:1.2rem!important}.icon-hojas1{margin-right:1.5vmin}.icon-hojas2{margin-left:1.5vmin}input[type=checkbox]+label span{width:16px;height:16px}.form-check-input{width:17px;height:17px}.formulario .form-group{display:flex;justify-content:center}.formulario .form-group .btn-enviar{position:relative;bottom:0}.row.creditos p{font-size:.6rem;text-align:center;color:#796857}.row.creditos p a{font-size:.7rem;color:#796857}.menu-footer{overflow:scroll!important;white-space:nowrap;padding:0}.menu-footer ul{float:none!important;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.menu-footer ul li a{font-size:.7rem;padding-right:.8rem}footer ul{border:none!important}.libro-reclamos-footer{display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:.8rem 0;border:none}.sct-busqueda{margin:3rem 0 0!important}.content-info-empresas i{font-size:2rem!important}.content-info-empresas h1{font-size:4rem}.fotos-celebracion{position:inherit}.content-img:last-child,.content-img:nth-child(2),.fotos-celebracion .content-img:first-child{width:95%;height:260px;top:0;display:block;border:1px solid #ffb466;padding:1rem;position:relative}.content-img img{width:100%;height:100%}.content-img-bancos,.fotos-celebracion.container-fluid{margin-bottom:0}.content-formulario{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.content-formulario .row{margin-left:0!important;margin-bottom:2rem}.content-Attention{width:100%;-ms-flex-direction:column;flex-direction:column}.content-Attention .call-us,.content-Attention .time-Attention{width:100%;padding:0 .8rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.content-Attention .time-Attention{margin-bottom:1.5rem}.content-Attention h1,.sct-compra-realizada .content-description-cr .h1,.sct-compra-realizada .content-description-cr h1{font-size:1rem}.content-Attention p{font-size:.7rem}.sct-intro-nosotros div:last-child .h1,.sct-intro-nosotros div:last-child h1{font-size:1.8rem}.main-nosotros{margin:5.7rem 0 3rem}.banner-repeat{width:100vw;height:15.25rem;margin-bottom:1rem!important}.banner-repeat .title-banner-repeat .h1,.banner-repeat .title-banner-repeat h1{font-size:4rem!important}.sct-img-formas-de-pago.banner-repeat .title-banner-repeat .h1,.sct-img-formas-de-pago.banner-repeat .title-banner-repeat h1{font-size:3.5rem!important}.content-img-bancos div{padding-left:0;-ms-flex-direction:column;flex-direction:column}.content-img-bancos div h4{padding:0!important;text-align:center}.sct-buscar-distrito .row div table thead th h3{font-size:20px}.sct-buscar-distrito .row div table h4{margin-top:1rem!important;font-size:14px}.sct-buscar-distrito .row div table span{font-size:2rem}.content-products-img{margin-bottom:2.5rem}.content-compra label{top:0!important;left:14px}.select.select-delivery .select_arrow{right:21px;top:0}.content-cod-promocion{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.content-cod-promocion .btn-primary{width:100%}.carridrop .select_arrow{top:0}.prec-cont2{right:-15px}#header_detail_shop{padding:.5rem 0}.img-prod-cdc{width:70px!important}.sct-text-medio p{font-size:16px}.padding-repeat{padding-top:2.5rem}.tform{margin-top:70px}.title-products-index .h1,.title-products-index h1{font-size:2.9rem}.sct-formulario-empresas{margin-top:10px!important}.sct-compra-realizada{padding-top:8rem;height:auto}.sct-compra-realizada .btn{padding:.5rem}.sct-compra-realizada .precio-total-cr,.sct-compra-realizada .precio-total-cr h1{text-align:right}.title-client .h1,.title-client h1{font-size:1.5rem}.sct-filter .container-fluid{width:100%!important}.sct-filter .container-fluid>.row{width:100%;margin:0}.main.main-repeat{margin:7rem 0 1rem!important}.info-complement ul{align-items:center}.info-complement ul.lista-app{min-height:92px}.main-libroreclamos .icon-hojas1,.main-libroreclamos .icon-hojas2{font-size:1.2rem!important}.img-gallery.img-g2{height:auto}span.title-pr-dcp{float:left;width:100%;text-align:center;line-height:10px}label.containers.btn-agregar{width:125%!important;float:left;z-index:1}}@media (min-width:320px) and (max-width:991px){.main-mi-perfil{padding:3rem 0 7.5rem}.main-mi-perfil .cont-btn-act-contraseña{display:flex;justify-content:center}.main-mi-perfil .title-perfil{margin-top:1rem}.sct-formulario-empresas.form-contactenos{background:0 0}.icons-como-comprar div p,.sct-intro-nosotros p{padding:0}.libro-reclamos-footer{padding:1rem 0}.fotos-celebracion.container-fluid .av-container.av-visible{z-index:0;padding-bottom:6em}.datos-comprador h1{font-size:1rem}label,label a strong{font-size:.8rem}.form-pago-car{-ms-flex-wrap:wrap;flex-wrap:wrap}.form-pago-car div .radio{padding-left:37px}.content-btn-pagar{width:100%!important}.check-repeat.form-pago img{width:44px}.check-repeat.form-pago label{font-size:.5rem;line-height:9px!important}.total-pago h2{font-size:2.5rem!important}.form-group{margin-bottom:0!important}#header_detail_shop li{font-size:18px}.sct-content-table{margin:10rem 0 1rem}.accordion dd ul li,.accordion dt a,.accordion.accordion-preguntas .accordion-content a,.accordion.accordion-preguntas .accordion-content ul li,.content-info-empresas p,.info-formasdepago p,.sct-formulario-empresas p:first-child{font-size:14px}.sct-text-medio{margin-bottom:4rem}.sct-formulario-empresas.form-contactenos .info-contact-form{padding-top:0}.sct-buscar-distrito .row div:first-child{border-right:none}.content-products-img div:nth-child(2){height:176px}.font-form-a,.font-form-a strong,.title-dcpt-product{font-size:11px}.content-products-img .btn-comprar{height:34px;font-size:10px;width:85%!important}.img-gallery{height:241px}label.containers{left:20%;right:20%;font-size:16px;display:block;text-align:center}.checkmark{height:20px;width:20px}.containers .checkmark:after{top:4px;left:4px;width:10px;height:10px}.gallery-detail ul#cajaGaleria li label{margin:2px -50px}.content-products-img .icon-icon-cart{margin-left:3%}.description-products-index ul{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.title-products-index{padding:2rem .5rem 0!important}.gallery-detail ul#cajaGaleria li div{left:25%!important}.carousel-item{height:165px!important}.carousel-caption h3{font-size:3.5rem!important}.carousel-caption .h1{font-size:3.9rem!important}.carousel-caption{bottom:18%!important;left:34%!important}.carousel-control-next-icon,.carousel-control-prev-icon{background-size:35%}.title-reclamos h1{font-size:1.7rem;line-height:.8}.content-img-bancos div h4 strong,.info-cards p,.info-formasdepago ul li span,.title-reclamos p{font-size:12px}.sct-description-reclamo h1{font-size:.9rem;margin-bottom:.8rem}.form-check-detail.check-repeat{margin:.8rem 0}.main-libroreclamos textarea{height:122px}.main-contactenos{margin-top:8rem}.sct-formulario-empresas p{padding:0!important;font-size:12px}.content-Attention{margin-top:5rem}.sct-formulario-empresas{margin-bottom:1rem!important}.info-cards .payment-form,.info-cards .providers,.info-cards .shipping-cost{height:auto}.info-cards .payment-form img,.info-cards .providers img,.info-cards .shipping-cost img{width:6.25rem}.icons-como-comprar div p,.main-nosotros p{font-size:13px}.firma{width:100px}.icons-como-comprar .icon-icono10,.icons-como-comprar .icon-icono8,.icons-como-comprar .icon-icono9{font-size:6rem}.icons-como-comprar h1{font-size:1.2rem}.banner-repeat{margin-bottom:1rem}.info-formasdepago .row div{margin-bottom:25px}.info-formasdepago .row div h1{font-size:20px}.info-formasdepago .row div.content-fdps-{margin:0}.info-formasdepago .row .content-img-credito .img-creditos{width:13%}.content-img-bancos{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.content-img-bancos div h4 span{font-size:10px}.content-img-bancos div:last-child{padding-left:0}.tfdps{position:relative;top:43px}.title-p{margin-top:.5rem!important;padding:0 1rem!important;font-size:13.5px}.content-img-bancos .img-bancos{width:80%!important}.sct-buscar-distrito{margin-bottom:3rem}.accordion.accordion-preguntas dl{padding-left:.5rem}.accordion.accordion-preguntas .accordion-content{padding-left:1rem}.sct-buscar-distrito button{margin-top:.1rem}}@media (min-width:320px) and (max-width:575px){.main-mi-perfil .mi-perfil .container-fluid{width:92%!important}.gallery-complement .row .img-gallery figure img{width:90%}.main-mi-perfil .nav-pills .nav-link{font-size:1rem;padding:0}.main-mi-perfil .form-perfil .btn{width:100%}.main-mi-perfil .form-check{padding-top:2rem}.navbar-brand{width:95px;left:0;top:31px;bottom:0;position:fixed;margin:-23px auto 0;display:table}.navbar-toggler{position:absolute;top:5px;left:0}.navbar-top{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal;position:relative;top:-15px}.tel>a,.tel>i{left:60px}.cart{border-left:none}.cabeceramenu .container-fluid{width:95%!important}.reg-log{padding:9px 0!important;background:#fdd7aa}.tel2 a span{font-size:18px}.reg-log .log{padding:0;width:50%}.reg-log .log:first-child{border-right:1px solid #796857}.reg-log .log:last-child{border-right:none}#izq{padding-top:1rem}.text-adicional{font-size:.6rem;margin-bottom:10px}.prec-cont{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.cdp{position:absolute;top:-33px!important;left:6px;font-size:11px!important}.btn-comprar.btn-comprar-detail{font-size:13px}.content-products-img.prod-ofertas:before{content:"OFERTA";position:absolute;top:21px;padding:.2rem .4rem;font-size:.6rem}.nts-ins,.nts-ins a{font-size:11px;line-height:1}}@media (min-width:576px){.main-mi-perfil .content-detalle div img{margin:0}.sct-formulario-empresas{padding:3px!important}.content-formulario{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.cabeceramenu .container-fluid{width:100%}}@media (min-width:576px) and (max-width:767px){.navbar-brand{left:67px}.bgblanco-top{top:32px}.navbar-collapse{top:43px!important}}@media (min-width:768px) and (max-width:991px){.fotos-celebracion.container-fluid{padding-top:11em;padding-bottom:2em}.img-formulario-repeat{display:none}.img-oc-one{top:17%!important;left:10%!important}.img-oc-two{left:10%!important;right:10%!important}.img-oc-three{top:17%!important;right:10%!important}.sct-empresas{margin-top:9rem}.seguro img{width:86px}.cder p,.cizq p{font-size:.7rem}.nav>li{border-bottom:1.2px solid #ad856a;width:100%}.libro-reclamos-footer,.nav#der>li:last-child{border:none}.content-fdps-{display:flex;flex-direction:column}.nav>li>a{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.nav-link{padding:0!important}.cabeceramenu{height:70px}.cabeceramenu .container-fluid{width:inherit!important}.navbar-top{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-ms-flex-align:end;align-items:end}.sct-two-reclamo .btn-enviar{position:relative;margin:auto}.sct-description-reclamo{margin-bottom:2rem}.log{padding:0 5px}.searchbar:hover>.search_input{margin-left:5px}#der,#izq{float:none;margin-right:0!important;width:96%}.container{max-width:100%!important}.bgblanco-top{position:relative;bottom:-70px}.main{margin:6.7rem 0 5rem!important}.title-reclamos>.banner-repeat{padding-top:0}.title-reclamos h1{font-size:3.7rem}.navbar-collapse{position:relative;top:43px!important;display:inline;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#fbf9ec}.nav-movil.container{padding:0}.bgblanco-top,.bgcrema{background:rgba(251,249,236,.9)}.banner-repeat{height:20.25rem}.nav-link i{font-size:3rem;padding-right:1rem}#izq>li:nth-child(2){padding-left:65px}#der>li:last-child{padding-right:65px}.fotos-celebracion{position:inherit}.content-img:last-child,.content-img:nth-child(2),.fotos-celebracion .content-img:first-child{width:95%;height:260px;top:-140px;display:block;border:1px solid #ffb466;padding:1rem;position:relative}.content-img img{width:100%;height:100%}.main-nosotros{margin:5rem 0}.bancos ul,.fdp ul,.seguro ul{display:-webkit-box;display:-ms-flexbox;display:flex}.bancos ul img,.fdp ul img{width:70px}.fdp,.seguros{padding:1.2rem 0}.menu-footer{overflow:scroll!important;white-space:nowrap;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.menu-footer ul{float:none!important;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.menu-footer ul li a{font-size:.7rem;padding-right:.8rem}.body_detail_shop .img-prod-cdc{width:100px}.navbar-brand{left:88px;width:105px}}@media (min-width:768px) and (max-width:820px){h3.title-filter{background-size:38%}}@media (min-width:992px) and (max-width:1030px){.sct-busqueda{margin:12rem 0 3rem}.content-compra,.select.select-detail{width:100%}.libro-reclamos-footer{border:none}.main-nosotros{margin:6.9rem 0 0}.time-Attention{padding-right:1rem!important}.title-p{padding:0 6rem!important}.navbar-brand{top:0;bottom:0;margin:auto}.sct-buscar-distrito{margin-bottom:1rem}.creditos p{font-size:.7rem}.icons-como-comprar div p{padding:0}.nav>li{padding:0 20px}.icono-menu{font-size:2.3rem}.navbar-light .navbar-nav .nav-link{font-size:.9rem}.main{margin:5.9rem 0 5rem!important}.bancos,.bancos ul,.fdp ul,.seguro ul{display:-webkit-box;display:-ms-flexbox;display:flex}.bancos ul img,.fdp ul img{width:70px}.fdp,.seguros{padding:1.2rem 0}.menu-footer{overflow:scroll!important;white-space:nowrap;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.menu-footer ul{float:none!important;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.menu-footer ul li a{font-size:.7rem;padding-right:.8rem}}@media (min-width:1031px) and (max-width:1179px){.sct-busqueda{margin:12rem 0 3rem}.navbar-brand{top:0;bottom:0;margin:auto;width:135px}.nav>li{padding:0 20px}.icono-menu{font-size:2.3rem}.navbar-light .navbar-nav .nav-link{font-size:.9rem}.main{margin:5.9rem 0 5rem!important}.menu-footer{white-space:nowrap;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.menu-footer ul{float:none!important;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important}.menu-footer ul li a{font-size:.7rem;padding-right:.8rem}}@media (min-width:1200px) and (max-width:1460px){.bmd-form-group .bmd-label-static,.bmd-form-group .is-filled .bmd-label-floating,.bmd-form-group .is-focused .bmd-label-floating,.bmd-form-group.is-filled .bmd-label-floating,.bmd-form-group.is-focused .bmd-label-floating{left:20px}.description-products-index{margin-bottom:30px}.sct-busqueda{margin:12rem 0 3rem}#header_detail_shop li{font-size:17px}.img-fondo{width:131px;z-index:-1}.sct-empresas,.sct_olv-contr{margin-top:10rem}.sct-content-img-nosotros{margin-bottom:12.5rem!important}#header_detail_shop{padding:.5rem 0}.sct-content-table{margin:12rem 0 6rem}.title-dcpt-product{font-size:12px}.content-products-img{margin-bottom:3.5rem}.sct-formulario-empresas .container-fluid .row .col .h2,.sct-formulario-empresas .container-fluid .row .col h2{font-size:67px!important}.sct-formulario-empresas .container-fluid .row .col .h2{font-size:73px!important}.sct-products{margin-bottom:3rem}.select select{padding:5px 12px!important}.img-gif-1ns{bottom:230px}.btn-buscar-select{height:40px!important;font-size:14px}.detail-detail h1,.erp,.info-formasdepago .row h1,.sct-buscar-distrito .row div table thead th h3{font-size:20px}.accordion dd ul li,.accordion.accordion-preguntas .accordion-content,.accordion.accordion-preguntas .accordion-content a,.accordion.accordion-preguntas .accordion-content ul li,.content-img-bancos div h4 span,.content-img-bancos div h4 strong,.form-control,.info-formasdepago li span,.info-formasdepago p,.main-nosotros p,.main-nosotros p strong,.sct-description-nosotros strong,.sct-formulario-empresas p,.sct-formulario-empresas p strong,.sct-formulario-empresas p:first-child,.title-banner-repeat p,label.containers{font-size:14px}.accordion .accordionTitle,.accordion .accordion__Heading,.accordion.accordion-preguntas .accordionTitle-ayuda,.accordion.accordion-preguntas .accordion__Heading-ayuda,.select.select-detail select,.tdcrs{font-size:13px}.detail-detail span a{font-size:15px}.detail-detail p,.detail-detail ul span{font-size:14px!important}.title-complement h1{font-size:28px}.title-complement .select_arrow{width:38px;height:38px;border-width:0 4px 4px 0}.form-check label,.form-check label strong{font-size:13px!important}.checkmark{width:22px;height:22px}.containers .checkmark:after{top:5px;left:5px;width:11px;height:11px}.tdcrs{line-height:.8}.prec-car-,.selc-cant{font-size:18px}.prc-h1{font-size:25px}.form-group{padding:0 8px}.form-control{height:calc(30px + 1vmin)}.content-info-empresas h1{font-size:4.8rem;padding:0 7px}.padding-repeat{padding-top:9rem}.content-info-empresas p{font-size:13.5px;padding:0 5.5rem;line-height:1.3}.content-info-empresas p strong{font-size:13.5px}.info-cards p,.two-text-contc{font-size:11px;color:#4c4c4c}.main-libroreclamos{margin-top:0}.info-cards p strong{font-size:11px}.info-cards .payment-form,.info-cards .providers,.info-cards .shipping-cost{height:300px}.sct-intro-nosotros div:last-child h1{font-size:31px}.title-reclamos h1{font-size:2.5rem}.title-reclamos p{font-size:11.8px}.sct-one-reclamo h1,.sct-two-reclamo{font-size:1.1rem}.text-adicional{font-size:.7rem!important}.banner-repeat .title-banner-repeat .h1,.banner-repeat .title-banner-repeat h1{font-size:4.5rem}.firma{width:129px}.main,.main-nosotros{margin:1.9rem 0 1rem!important}.banner-repeat .title-banner-repeat{top:95px}.gif-ccp{bottom:8%;height:304px;left:36%}.icons-como-comprar div p{padding:0 4rem;font-size:13px}.carousel-caption{top:36%!important;left:20%!important}.gif-fdp{top:-16px}.img-cst-car{width:60px}.sct-buscar-distrito .row div:first-child h4{font-size:16px}.sct-buscar-distrito .row div table span{font-size:2rem}.sct-description-costosdeenvio ul span{font-size:.8rem}.title-p{margin-top:0!important;padding:0 19rem!important;font-size:14px}.sct-text-medio p{font-size:14.5px}.accordion.accordion-preguntas .accordion-content,.accordion.accordion-preguntas dl{padding-left:1rem}.sct-detail-product{padding-top:133px}.select.select-detail .select_arrow{right:22px}.carousel-item{height:374px!important}.carousel-item img{-o-object-position:top;object-position:top}.carousel-control-next,.carousel-control-prev{top:100px}.title-products-index .h1,.title-products-index h1{font-size:2.7rem!important}.title-products-index .icon-hojas1,.title-products-index .icon-hojas2{font-size:2rem!important}.content-products-img div:nth-child(2){height:232px}h3.title-filter{line-height:.6}.content-compra label{left:26px}.content-compra{height:36px}.title-complement{margin-bottom:0}}@media (min-width:1720px){.main{margin:9rem 0 5rem!important}#header_detail_shop li{font-size:22px}}@media (min-width:1420px) and (max-width:1719px){.sct-busqueda{margin:12rem 0 3rem}}@media (min-width:992px){.tel2.one-search{display:block!important}.tel2.two-search{display:none}}@media (max-width:767px) and (min-width:680px){.regalb{position:absolute;bottom:-100px}.detail-detail{margin-top:10rem}}@media (max-width:679px) and (min-width:500px){.regalb{position:absolute;bottom:-90px}.detail-detail{margin-top:8rem}}@media (max-width:501px){.regalb{position:absolute;bottom:-70px}.detail-detail{margin-top:6rem}}@media (max-width:1600px) and (min-width:1200px){.complement-pedido{margin-top:5rem}}@media (max-width:1022px){.select_arrow{bottom:19px!important}}@media (max-width:420px) and (min-width:320px){label.containers{left:1%;right:1%}.canti{padding-right:0}.content-compra label{left:20px}.content-compra input{width:135%}.compreg{padding-bottom:15px}}@media (max-width:1719px) and (min-width:990px){.iconsvg{height:50px;width:50px}}@media (max-width:991px) and (min-width:320px){.iconsvg{height:50px;width:50px;margin:0}}@media (max-width:1199px) and (min-width:992px){#header_detail_shop li{font-size:1em}}@media (min-width:1200px){.main-mi-perfil .content-detalle div img{min-width:300px}.cont1{width:20%}.cont2{width:30%}}@media (max-width:991px) and (min-width:768px){.cont1{width:17%}.cont2{width:25%}}@media (max-width:767px) and (min-width:320px){.bmd-form-group.bmd-label-floating{top:10px!important}.bmd-form-group .bmd-label-floating,.bmd-form-group .bmd-label-placeholder,.bmd-form-group .bmd-label-static,.bmd-form-group .is-filled .bmd-label-floating,.bmd-form-group .is-focused .bmd-label-floating,.bmd-form-group.is-filled .bmd-label-floating,.bmd-form-group.is-focused .bmd-label-floating{left:12px}.cont1{width:60px}.cont2{width:67px}}.container-fluid{width:92%!important}.main{margin:9rem 0 5rem}.main.main-repeat{margin:16.7rem 0 7rem}.main,.main-repeat{color:#796857}#menuToggle{position:relative;top:0;z-index:1;-webkit-user-select:none;user-select:none}#menuToggle input{display:block;width:40px;height:32px;position:absolute;top:-7px;left:-5px;cursor:pointer;opacity:0;z-index:2;-webkit-touch-callout:none}.sct-filter,.select{position:relative;width:100%}#menuToggle span,.tel2.cart a:hover~.content-carrito-prev{display:block;z-index:1}#menuToggle span{width:33px;height:2px;margin-bottom:5px;position:relative;background:#796857;border-radius:3px;transform-origin:6px 0px;transition:transform .5s cubic-bezier(.77, .2, .05, 1),background .5s cubic-bezier(.77, .2, .05, 1),opacity .55s}#menuToggle span:first-child{transform-origin:0% 0%}#menuToggle span:last-child(2){transform-origin:0% 100%}#menuToggle input:checked~span{opacity:1;transform:rotate(45deg) translate(-6px,-7px);background:#796857}#menuToggle input:checked~span:nth-child(2){opacity:0;transform:rotate(0) scale(.2,.2)}#menuToggle input:checked~span:last-child{transform:rotate(-45deg) translate(0,-2px)}.carousel-item{width:100%;height:390px}.carousel-item img{width:100%;object-fit:cover}.carousel-caption h3{font-size:5rem;line-height:.4}.carousel-caption .h1{font-size:6.8rem;line-height:.8}.carousel-caption{top:27%;right:0;left:17%}.carousel-control-next-icon{background-image:url("../../images/next.svg")!important}.carousel-control-prev-icon{background-image:url("../../images/prev-.svg")!important}.carousel-control-next-icon,.carousel-control-prev-icon{width:83px!important;height:100px!important;background-repeat:no-repeat}.carousel-control-next,.carousel-control-prev{opacity:1!important}.sct-filter{background:#fbf9ec}.checkround,.radio input:checked~.checkround{background-color:#fff}.content-filter{display:flex;justify-content:center;align-items:center}.select,.select select,.select_arrow{display:inline-block}.jfilter{padding:9px 0}.select select{width:100%;cursor:pointer;padding:6px 8px;outline:0;border:1px solid #796857;border-radius:0;color:#796857;background:0 0;appearance:none;-webkit-appearance:none;-moz-appearance:none;margin-bottom:1rem;font-size:14px}.select select::-ms-expand{display:none}.select select:disabled{opacity:.5;pointer-events:none}.select_arrow{position:absolute;top:0;bottom:6px;right:24px;margin:auto;width:10px;height:10px;border:solid #796857;border-width:0 1px 1px 0;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.select select:focus~.select_arrow,.select select:hover~.select_arrow{border-color:#000}.select select:disabled~.select_arrow{border-top-color:#ccc}.btn-buscar-select{width:100%;height:40px;border:none!important;border-radius:inherit!important}.title-products-index{width:100%;padding:3rem 0 0}.title-products-index .h1,.title-products-index h1{font-size:3.5rem;line-height:.7}.main-empresas .sct-formulario-empresas{margin-top:18rem}.sct-formulario-empresas{width:100%;margin-bottom:5rem}.sct-formulario-empresas p:first-child{color:#5b5b5b;line-height:1.3}.sct-formulario-empresas .container-fluid .row .col .h2,.sct-formulario-empresas .container-fluid .row .col h2{font-size:76px;text-align:center;line-height:.6}.sct-formulario-empresas .container-fluid .row .col .h2{font-size:85px}.sct-formulario-empresas .icon-hojas2{position:relative;top:-22px}.tform{margin-bottom:45px}.lineadashed{border-top:1.8px dashed #ffb466;width:30%;position:relative;right:0;left:0;margin:auto;padding:1rem}.form-control{border-radius:inherit!important;margin-bottom:1rem;color:#4c4c4c;padding-top:4px;padding-bottom:0}.formulario .form-group .btn-enviar{width:100%;height:43px;border:none;border-radius:inherit;background:#796857}.formulario input:active:focus,.formulario input:focus,.formulario input:hover,.formulario textarea:active:focus,.formulario textarea:focus,.formulario textarea:hover,.formulario-car input:active:focus,.formulario-car input:focus,.formulario-car input:hover,.formulario-car textarea:active:focus,.formulario-car textarea:focus,.formulario-car textarea:hover,.formulario-libro input:active:focus,.formulario-libro input:focus,.formulario-libro input:hover,.formulario-libro textarea:active:focus,.formulario-libro textarea:focus,.formulario-libro textarea:hover{color:#796857;outline:0;border-bottom:1px solid #ffb466}.form-check{padding-left:42px!important}#btnBuscar,.nav-link{padding:0}.form-check-input{width:23px;height:23px;border:2px solid #fff}input[type=checkbox]+label span{display:inline-block;width:20px;height:20px;margin:-1px 4px 0 0;vertical-align:middle;background:0 0;cursor:pointer;border:1px solid #796857}input[type=checkbox]:checked+label span{border:1px solid #796857;background:url("../../images/icons/checkmark.svg") 0 0/100%}.btn-primary{border-radius:inherit!important}#check-authorize a{color:#796857!important}.img-formulario-repeat,body.search-open{overflow:hidden}.img-formulario-repeat img{width:139%!important;margin-left:-14%}.title-products-index .icon-hojas1,.title-products-index .icon-hojas2{font-size:2.5rem}.icon-hojas1,.icon-hojas2{font-size:42px;color:#796857}.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{background-color:#796857!important;border-color:none!important}.dropdown>.dropdown-toggle:active{pointer-events:none}.numb{bottom:0!important;right:-16px!important}.datepicker>div,.dropdown-toggle::after,.tel2.one-search{display:none}.nav-link{display:table}.figura{float:left}.figura img{width:54px;height:auto}.cont-txt-cart{float:left;width:100px}.dropdown-menu{width:335px;min-width:320px;right:-20px;left:inherit;padding:25px}.texto_producto{float:left;font-size:13px;width:100%}.texto_precio{float:left;width:100%}.sct-content-img-comocomprar .h1,.sct-content-img-comocomprar h1{font-size:5rem}.title-p{margin-top:4rem;padding:0 3rem}.form-check-detail{position:absolute;left:55px;right:55px;bottom:-20px;margin:auto;padding-left:3rem}.radio{display:block;position:relative;top:5px;padding-left:42px;margin-bottom:12px;cursor:pointer;font-size:15px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.close,.modal-header .close span{font-size:3rem}.checkround{position:absolute;top:0;left:0;height:28px;width:28px;border:1px solid #4c4c4c;border-radius:50%}.close,.close:hover{background:0 0}.radio .checkround:after{left:7px;top:7px;width:12px;height:12px;border-radius:50%;background:#f9d5b3}.close{position:absolute;top:2rem;right:2rem;border:0;font-weight:700;display:block;cursor:pointer;color:#000;padding:1rem 1.25rem;border-radius:50%;outline:0}.search-box.search-elem{margin:0;position:fixed;top:0;left:0;width:100%;height:100vh;z-index:100;background:rgba(249,213,179,.9);transition:.3s ease-in-out;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.search-box.search-elem .inner{width:100vw;position:relative;top:50%;bottom:0;left:0;right:0;margin:auto;transform:translateY(-50%)}.search-box.search-elem label{color:#796857;font-weight:300}.search-box.search-elem button.submit{outline:0;height:50px;font-size:2rem;color:#fff;margin-top:1rem;background:#796857;border:none!important}.search-box.search-elem input[type=text]{width:100%;height:72px;font-size:1.5rem;border:none;transition:border .3s;border-radius:0}.search-box.search-elem input[type=text]:focus{box-shadow:none}.search-box.search-elem label.placeholder{position:absolute;top:9px!important;left:2rem;font-size:32px;transition:.3s;background:0 0}.search-box.search-elem label.placeholder.move-up{top:-40px!important;color:#796857;font-size:1.5rem}.search-box.search-elem.search-open{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.search-btn{font-size:.875rem;display:inline-block}.search-btn:hover{color:#00a896}.modal-body{display:flex;flex-direction:column}.modal-body .btn-comprar{justify-content:center}.modal-header{border-bottom:none}.modal-header .close{padding:0!important;margin:-2.3rem -1rem -1rem auto!important}.btn-buscar,.btn-buscar-modal,.btn-buscar-modal:focus,.btn-buscar-select{background:#796857;color:#fff;border:#796857;transition:.15s linear;-webkit-transition:.15s linear;-moz-transition:.15s linear}.btn-buscar-modal:hover,.btn-buscar-select:focus,.btn-buscar-select:hover,.btn-buscar:hover{background:#f9d5b3;color:#796857}.text-adicional{font-size:.8rem;opacity:.6;line-height:1}.img-fondo,.img-oc-five,.img-oc-four,.img-oc-one,.img-oc-six,.img-oc-three,.img-oc-two{z-index:-1}.img-oc-one{top:22%;left:25%}.img-oc-two{left:25%;bottom:25%}.img-oc-three{top:22%;right:25%}.img-oc-four{right:25%;bottom:25%}.img-oc-five{top:46%;left:29%}.img-oc-six{top:46%;right:29%}.sct-compra-realizada .img-oc-two{left:18%}.sct-compra-realizada .img-oc-four{right:18%}.datepicker{padding:4px;margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;direction:ltr;color:#ad856a}.datepicker-inline{width:220px}.datepicker.datepicker-rtl{direction:rtl}.datepicker.datepicker-rtl table tr td span{float:right}.datepicker-dropdown{top:0;left:0}.datepicker-dropdown:before{content:"";display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid rgba(0,0,0,.2);position:absolute;top:-7px;left:6px}.datepicker-dropdown:after{content:"";display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:7px}.datepicker table{margin:0;width:100%}.datepicker td,.datepicker th{text-align:center;width:20px;height:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:none}.datepicker table tr td.day:hover{background:#eee;cursor:pointer}.datepicker table tr td span.old,.datepicker table tr td.new,.datepicker table tr td.old{color:#999}.datepicker table tr td span.disabled,.datepicker table tr td span.disabled:hover,.datepicker table tr td.disabled,.datepicker table tr td.disabled:hover{background:0 0;color:#999;cursor:default}.datepicker table tr td.today,.datepicker table tr td.today.disabled,.datepicker table tr td.today.disabled:hover,.datepicker table tr td.today:hover{background-color:#fde19a;background-image:-moz-linear-gradient(top,#fdd49a,#fdf59a);background-image:-ms-linear-gradient(top,#fdd49a,#fdf59a);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fdd49a),to(#fdf59a));background-image:-webkit-linear-gradient(top,#fdd49a,#fdf59a);background-image:-o-linear-gradient(top,#fdd49a,#fdf59a);background-image:linear-gradient(top,#fdd49a,#fdf59a);background-repeat:repeat-x;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25)}.datepicker table tr td.today.active,.datepicker table tr td.today.disabled,.datepicker table tr td.today.disabled.active,.datepicker table tr td.today.disabled.disabled,.datepicker table tr td.today.disabled:active,.datepicker table tr td.today.disabled:hover,.datepicker table tr td.today.disabled:hover.active,.datepicker table tr td.today.disabled:hover.disabled,.datepicker table tr td.today.disabled:hover:active,.datepicker table tr td.today.disabled:hover:hover,.datepicker table tr td.today.disabled:hover[disabled],.datepicker table tr td.today.disabled[disabled],.datepicker table tr td.today:active,.datepicker table tr td.today:hover,.datepicker table tr td.today:hover.active,.datepicker table tr td.today:hover.disabled,.datepicker table tr td.today:hover:active,.datepicker table tr td.today:hover:hover,.datepicker table tr td.today:hover[disabled],.datepicker table tr td.today[disabled]{background-color:#fdf59a}.datepicker table tr td.active,.datepicker table tr td.active.disabled,.datepicker table tr td.active.disabled:hover,.datepicker table tr td.active:hover{color:#ad856a;font-weight:700;border:1px solid #ad856a;background:#fbf9ec}.datepicker table tr td.active.active,.datepicker table tr td.active.disabled,.datepicker table tr td.active.disabled.active,.datepicker table tr td.active.disabled.disabled,.datepicker table tr td.active.disabled:active,.datepicker table tr td.active.disabled:hover,.datepicker table tr td.active.disabled:hover.active,.datepicker table tr td.active.disabled:hover.disabled,.datepicker table tr td.active.disabled:hover:active,.datepicker table tr td.active.disabled:hover:hover,.datepicker table tr td.active.disabled:hover[disabled],.datepicker table tr td.active.disabled[disabled],.datepicker table tr td.active:active,.datepicker table tr td.active:hover,.datepicker table tr td.active:hover.active,.datepicker table tr td.active:hover.disabled,.datepicker table tr td.active:hover:active,.datepicker table tr td.active:hover:hover,.datepicker table tr td.active:hover[disabled],.datepicker table tr td.active[disabled]{color:#ad856a;font-weight:700;border:1px solid #ad856a;background:#fbf9ec}.datepicker table tr td.active.active,.datepicker table tr td.active.disabled.active,.datepicker table tr td.active.disabled:active,.datepicker table tr td.active.disabled:hover.active,.datepicker table tr td.active.disabled:hover:active,.datepicker table tr td.active:active,.datepicker table tr td.active:hover.active,.datepicker table tr td.active:hover:active{color:#ad856a;font-weight:700;border:1px solid #ad856a;background:#fbf9ec}.datepicker table tr td span{display:block;width:23%;height:54px;line-height:54px;float:left;margin:1%;cursor:pointer;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.datepicker table tr td span:hover,.datepicker tfoot tr:first-child th:hover,.datepicker thead tr:first-child th:hover{background:#eee}.datepicker table tr td span.active,.datepicker table tr td span.active.disabled,.datepicker table tr td span.active.disabled:hover,.datepicker table tr td span.active:hover{color:#ad856a;font-weight:700;border:1px solid #ad856a;background:#fbf9ec}.datepicker table tr td span.active.active,.datepicker table tr td span.active.disabled,.datepicker table tr td span.active.disabled.active,.datepicker table tr td span.active.disabled.disabled,.datepicker table tr td span.active.disabled:active,.datepicker table tr td span.active.disabled:hover,.datepicker table tr td span.active.disabled:hover.active,.datepicker table tr td span.active.disabled:hover.disabled,.datepicker table tr td span.active.disabled:hover:active,.datepicker table tr td span.active.disabled:hover:hover,.datepicker table tr td span.active.disabled:hover[disabled],.datepicker table tr td span.active.disabled[disabled],.datepicker table tr td span.active:active,.datepicker table tr td span.active:hover,.datepicker table tr td span.active:hover.active,.datepicker table tr td span.active:hover.disabled,.datepicker table tr td span.active:hover:active,.datepicker table tr td span.active:hover:hover,.datepicker table tr td span.active:hover[disabled],.datepicker table tr td span.active[disabled]{background-color:#04c}.datepicker th.switch{width:135px;background:#fbf9ec}.datepicker tfoot tr:first-child th,.datepicker thead tr:first-child th{cursor:pointer}.input-append.date .add-on i,.input-prepend.date .add-on i{display:block;cursor:pointer;width:16px;height:16px}.table-condensed .next,.table-condensed .prev{background:#ad856a}select{-moz-appearance:none;-webkit-appearance:none;appearance:none;display:flex;align-items:flex-end}.iconsvg .con{width:46px;height:34px}.iconsvg .emp{height:42px;width:45px}.iconsvg .ofe{height:52px;width:52px}.iconsvg .des{height:67px;width:63px}.modal-lg,.modal-xl{max-width:900px}.info-complement ul.lista-app{min-height:56px;text-align:left}.info-complement ul.lista-app .title-prod-cmpl{font-size:13px;line-height:1.2}.mb-10{margin-bottom:10px}@media (max-width:1024px) and (min-width:320px){.form-control{height:calc(2.25rem + 6px)}.bmd-form-group .bmd-label-floating{top:15px}}@media (max-width:1460px) and (min-width:1200px){.select.select-delivery select{height:28px}.prec-cont .tdcrs{font-size:14px}}.bmd-form-group>.form-control{margin-top:.5rem!important}.bmd-form-group+.containers.btn-agregar,body>.main-carrito .sct-content-table{margin-top:0!important}.img-gallery label.containers{position:relative!important;bottom:0!important;top:0!important}@media (max-width:575.98px){.title-prod-cmpl{min-height:57px}}.form-control.input-taza,.input-group-text.span-taza{border:1px solid #796857!important}@font-face{font-family:icomoon0;src:url('../../fonts/icomoon0.eot?qcq2mh');src:url('../../fonts/icomoon0.eot?qcq2mh#iefix') format('embedded-opentype'),url('../../fonts/icomoon0.ttf?qcq2mh') format('truetype'),url('../../fonts/icomoon0.woff?qcq2mh') format('woff'),url('../../fonts/icomoon0.svg?qcq2mh#icomoon') format('svg');font-weight:400;font-style:normal;font-display:block}.icon0{font-family:icomoon0!important;speak:never;font-weight:400;text-transform:none;line-height:1}.icon0-correo:before{content:'\e900'}.icon0-telefono:before{content:'\e901'}.icon0-whatsapp:before{content:'\e902'}@font-face{font-family:'Calibri Light';src:url('../../fonts/Calibri-Light.woff2') format('woff2'),url('../../fonts/Calibri-Light.woff') format('woff'),url('../../fonts/Calibri-Light.ttf') format('truetype')}@font-face{font-family:'Calibri Regular';src:url('../../fonts/Calibri-Regular.woff2') format('woff2'),url('../../fonts/Calibri-Regular.woff') format('woff'),url('../../fonts/Calibri-Regular.ttf') format('truetype')}@font-face{font-family:'Calibri Bold';src:url('../../fonts/Calibri-Bold.woff2') format('woff2'),url('../../fonts/Calibri-Bold.woff') format('woff'),url('../../fonts/Calibri-Bold.ttf') format('truetype')}.calibri-light{font-family:'Calibri Light',sans-serif}.calibri-regular{font-family:'Calibri Regular',sans-serif}#empresas #empresas-funciona li h3 b,#empresas #empresas-presupuesto .col-lg b,.calibri-bold{font-family:'Calibri Bold',sans-serif}#empresas *,.description-products-index .title-dcpt-product *{font-size:inherit}#empresas .contenedor>.container-fluid{padding-bottom:40px;padding-top:40px}#empresas .contenedor>.container-fluid .row:not(form):first-child{margin-top:-20px}#empresas .contenedor>.container-fluid .row:not(form):last-child{margin-bottom:-20px}#empresas .contenedor>.container-fluid .row:not(form):only-child{height:calc(100% + 40px)}#empresas .contenedor>.container-fluid .row:not(form) .col:not(.form-group):not(.form-check){padding-bottom:0;padding-top:20px;margin-bottom:0}#empresas .contenedor>.container-fluid .row:not(form) .col:not(.form-group):not(.form-check) h2{color:#bd9a5f;font-size:calc(10px + 2vmin)!important;width:100%;margin-bottom:0;margin-top:20px;padding-bottom:10px;text-transform:uppercase}#empresas .contenedor>.container-fluid .row:not(form) .col:not(.form-group):not(.form-check) h2 b{font-size:1em;position:relative}#empresas .contenedor>.container-fluid .row:not(form) .col:not(.form-group):not(.form-check) h2 b:before{content:'';display:block;height:2px;width:100vw;position:absolute;bottom:-5px;right:0}#empresas .contenedor>.container-fluid .row:not(form) .col:not(.form-group):not(.form-check) h2:not(:last-child),.content-img-credito:last-child{margin-bottom:calc(10px + 3vmin)}#empresas .contenedor>.container-fluid .row:not(form) .col:not(.form-group):not(.form-check) .parrafos{color:#5b5b5b;font-family:'Calibri Regular',sans-serif;font-size:16px;width:100%}#empresas .contenedor>.container-fluid .row:not(form) .col:not(.form-group):not(.form-check) .parrafos :last-child{margin-bottom:0}#empresas .contenedor>.container-fluid .row:not(form) .col:not(.form-group):not(.form-check) .figura{background:center center/cover no-repeat;height:0;width:100%;margin-bottom:0}#empresas #empresas-contenedor i{font-size:4.2vmin}#empresas #empresas-contenedor h1{font-size:calc(12px + 6.3vmin);text-align:center;line-height:35px}#empresas #empresas-contenedor div.row div.col .figura{padding-bottom:75%}#empresas #empresas-contenedor div.row div.col ul{height:calc(100% + 10px);margin:-5px}#empresas #empresas-contenedor div.row div.col ul li{padding:5px}#empresas #empresas-contenedor div.row div.col ul li a{background:#ffec8d;color:#bd9a5f;display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:5px}#empresas #empresas-contenedor div.row div.col ul li a b{font-size:calc(10px + 1vw);text-align:center;text-transform:uppercase}#empresas #empresas-funciona h2 b:before{background:#bd9a5f}#empresas #empresas-funciona img{display:block;height:auto;width:66.66%;margin:0 auto 3vmin}#empresas #empresas-funciona li h3{color:#522a16;font-size:calc(10px + 2vmin);width:100%;margin-bottom:3vmin}#empresas #empresas-personaliza .col h2 b:before{background:#f3bd48}#empresas #empresas-personaliza .col .container-fluid .row .figura{padding-bottom:100%}#empresas #empresas-personaliza .col .container-fluid .row .parrafos{font-size:calc(10px + .75vw)}#empresas #empresas-personaliza .col .container-fluid .row .parrafos ul{list-style:initial;padding-left:20px}#empresas #empresas-personaliza .col .container-fluid .row .parrafos ul li::marker{color:#fab061;font-weight:700}#empresas #empresas-personaliza .col .owl-nav{color:#6a4f37;display:flex;align-items:center;justify-content:space-between;font-size:15vmin;height:0;margin:0;padding:0;position:absolute;left:0;top:30%;z-index:0!important}.owl-carousel .owl-nav button.owl-prev{margin-left:-13px!important}.owl-carousel .owl-nav button.owl-next{margin-right:-13px!important}#empresas #empresas-presupuesto h2{text-align:left}#empresas #empresas-presupuesto h2 b:before{background:#ffd600}#empresas #empresas-presupuesto .col-lg-6 .form-control{margin-bottom:10px;margin-top:0!important}#empresas #empresas-presupuesto .col-lg-6 .bmd-label-floating span{color:red}#empresas #empresas-presupuesto .col-lg h3{color:#f3bd48;font-size:calc(10px + 1.5vmin);width:100%;margin-bottom:calc(10px + 2vmin);text-transform:uppercase}#empresas #empresas-presupuesto .col-lg p{color:#522a16;font-size:calc(10px + 1vmin);width:100%;margin-bottom:calc(10px + 1vmin)}#empresas #empresas-presupuesto .col-lg address{display:flex;align-items:center;margin-bottom:10px}#empresas #empresas-presupuesto .col-lg address .icon0{color:#999;flex:0 0 1em;font-size:calc(20px + 1vmin);font-weight:600;width:1em;max-width:1em;margin-right:calc(10px + .5vmin)}#empresas #empresas-presupuesto .col-lg address b{color:#522a16;flex:1 1 auto;font-size:calc(10px + 1vmin);width:auto;max-width:100%}#empresas #empresas-presupuesto .col-lg address b a{color:inherit}.owl-theme .owl-nav button.owl-next span,.owl-theme .owl-nav button.owl-prev span{font-size:2em!important}@media(min-width:1200px){#empresas #empresas-contenedor div.row div.col.order-md-2{flex:0 0 25%;width:25%;max-width:25%}#empresas #empresas-contenedor div.row div.col.col-sm-6{flex:0 0 37.5%;width:37.5%;max-width:37.5%}}.owl-theme.owl2 .owl-nav button.owl-next span,.owl-theme.owl2 .owl-nav button.owl-prev span{font-size:5em!important}.owl-theme.owl2 .owl-nav{margin-top:-24.1em!important}.owl-carousel.owl2 .owl-nav button.owl-prev{margin-left:-25px!important}.owl-carousel.owl2 .owl-nav button.owl-next{margin-right:-25px!important}@media(max-width:1199.98px){body>.main-carrito{margin-top:7em!important}body>.main-carrito .sct-content-table .container-fluid .tdcrs.a-compl{display:block;position:relative;top:-15px}body>.main-carrito .sct-content-table .container-fluid .cantMob,body>.main-carrito .sct-content-table .container-fluid .tdcrs.cantidad_producto,body>.main-carrito .sct-content-table .container-fluid .tdcrs.prec-car-,body>.main-carrito .sct-content-table .container-fluid .tdcrs.prec-car- .prc-h1,body>.main-carrito .sct-content-table .container-fluid .tdcrs.prec-car- .prc-h1 span{font-size:16px}body>.main-carrito .sct-content-table .container-fluid .tdcrs.prec-car-{text-align:left}}@media(max-width:767px){.row.content-busqueda{border-bottom:none}}.inicio-testimonios-estrellas li,img{filter:contrast(1.01)}.cabeceramenu{height:150px!important}#carrito .cabeceramenu{height:90px!important}#cabecera-carrusel{background:#796857;width:100%;height:60px}#cabecera-carrusel .container-fluid,#carrusel-cabecera .carousel-inner{height:100%}#carrusel-cabecera{width:100%;height:100%;padding:0 40px}#carouselExampleControls,#carouselExampleControls .carousel-inner,#carouselExampleControls .carousel-item,#carrusel-cabecera .carousel-item{height:100%!important}.carrusel-item-text,.carrusel-item-text *{font-family:helvetica!important;font-size:calc(12px + .3vmin)!important}.carrusel-item-text{display:flex;align-content:center;align-items:center;width:100%;height:100%}.carrusel-item-text div{color:#fff;width:100%;max-width:100%;flex:0 0 100%;line-height:1em;margin:0;text-align:center}.carrusel-item-text a{color:#fff}.carrusel-flecha{width:40px;height:100%;bottom:auto!important;top:0!important}.carrusel-flecha-icon{font-size:20px;width:1em!important;max-width:1em;height:1em!important;flex:0 0 1em}#cartCantidad{font-size:13px}.main.animatedParent,body>.main{margin-bottom:calc(30px + 3vmin)!important;margin-top:150px!important}.form-pago-footer{margin-left:-15px;margin-right:-15px;padding-left:0;padding-right:0}.form-pago-footer>.col{padding-left:15px;padding-right:15px}.bancos li img,.seguro li img{max-width:100%}.title-products-index{padding-left:0!important;padding-right:0!important;padding-top:0!important}.title-products-index .h1,.title-products-index h1,.title-products-index h2{font-size:calc(20px + 3.8vmin)}.title-products-index div{margin-bottom:20px!important;margin-top:30px!important}.title-products-index div>.h1,.title-products-index div>h1,.title-products-index div>h2{width:auto;max-width:60%;flex:0 0 auto;line-height:1em;margin:0 calc(10px + .5vw)}.title-products-index .icon-hojas1{margin-right:0!important;padding-right:0!important}.title-products-index .icon-hojas2{margin-left:0!important;padding-left:0!important}.content-products-img{margin-bottom:6vmin}.content-products-img img{object-fit:cover}.content-products-img div:nth-child(2){overflow:hidden;height:0;padding:0 0 98%}.content-products-img div:nth-child(2) img{position:absolute;left:0;top:0}.description-products-index{margin-bottom:0;margin-top:10px}.description-products-index ul{border-bottom:none!important;flex-direction:column;padding-bottom:10px;text-align:center}.description-products-index .title-dcpt-product{font-size:calc(10px + .6vmin);margin-bottom:3px}.content-img-credito:not(:last-child),.inicio-productos-banner-art{margin-bottom:calc(10px + 7vmin)}.description-products-index .precio-prd{font-size:calc(10px + .6vmin);line-height:1.6em}.detal.btn-primary{white-space:nowrap}.sct-slider-index{height:106.64vw}#carouselExampleControls .carousel-item a,.inicio-testimonios-img img{display:block;width:100%;height:100%}.inicio-productos-banner-art{display:block;width:100%;padding:0 2vw}.inicio-productos-banner-img{width:100%;margin-bottom:calc(10px + 1vmin)}.inicio-productos-banner-img img{display:block;width:100%;object-fit:cover}.inicio-productos-banner-txt{color:#796857;font-size:calc(15px + .5vmin);width:100%;line-height:1.2em;margin:0}#inicio-instagram .container-fluid{padding-bottom:20px;width:100%!important}#inicio-instagram-titulo{color:#796857;font-size:calc(10px + 1vmin);width:100%;margin-bottom:5px;text-align:center}#inicio-instagram-titulo a{display:inline-block;width:auto;margin-left:5px;vertical-align:middle}#inicio-instagram-titulo img{display:block;height:40px;width:145px}#inicio-instagram-arroba{color:#796857;display:block;font-size:calc(10px + 1.2vmin);width:100%;margin-bottom:calc(10px + 1vmin);text-align:center}#inicio-instagram-lista{flex-wrap:nowrap}#inicio-instagram-lista a{display:block;width:100%;height:50vw}#inicio-instagram-lista img{display:block;width:100%;height:100%;object-fit:cover}#inicio-testimonios .title-products-index{margin:calc(10px + 1vmin) 0}#inicio-testimonios-carrusel{margin-left:-5vw;margin-right:-5vw}#inicio-testimonios-carrusel .owl-nav{margin-top:0!important;padding:5vmin 0 0;top:0}#inicio-testimonios-carrusel .owl-next,#inicio-testimonios-carrusel .owl-prev{width:30px;margin:0!important}#inicio-testimonios-carrusel .owl-next span,#inicio-testimonios-carrusel .owl-prev span{color:#796857;font-family:system-ui;font-weight:100;display:block;width:100%;transform:scaleY(.8)}#inicio-testimonios-carrusel .item{padding:calc(10px + 1vmin) 5vw}.inicio-testimonios-img{font-size:80px;width:1em;height:1em;margin:0 auto calc(10px + .5vmin)}.inicio-testimonios-estrellas{display:flex;align-items:center;justify-content:center;font-size:18px;width:100%;margin-bottom:calc(10px + .5vmin)}.inicio-testimonios-estrellas li{background:url(../../sources/icon-estrella.jpg) center center/cover no-repeat;width:1em;max-width:1em;height:1em;flex:0 0 1em}.inicio-testimonios-txt{font-size:calc(10px + .8vmin);width:100%;line-height:1.2em;margin-bottom:calc(10px + 1vmin)}.inicio-testimonios-nombre{font-family:brandon_grotesquebold;font-size:calc(10px + .4vmin);width:100%;margin:0;text-transform:uppercase}.info-formasdepago .row h2{color:#6f5844;font-size:1.5rem;font-family:brandon_grotesquebold;margin-bottom:calc(10px + 1vmin)}.content-img-credito img{margin:0 calc(10px + 1.5vmin)}.sct-busqueda{margin-top:120px!important}@media(max-width:1179.98px){.bancos,.fdp,.seguro{padding-bottom:.6rem;padding-top:.6rem}.bancos ul img,.fdp ul img,.seguro li img{width:auto;max-width:70px;max-height:45px}}@media(max-width:991.98px){main{overflow:hidden}.navbar-brand{position:absolute;left:0;right:0;top:0;z-index:1}.menu-footer{justify-content:flex-start;padding-left:15px;padding-right:15px}.menu-footer ul li a{display:block;padding:10px .4rem}.rs ul{margin-bottom:10px}#inicio-testimonios-carrusel .owl-carousel{padding:0 30px}#inicio-testimonios-carrusel .owl-nav{width:100%;left:0}}@media(max-width:767.98px){.form-pago-footer{display:flex!important}.pie-pago-titulo{text-align:center}.bancos ul,.fdp ul,.seguro ul{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.bancos li,.fdp li,.seguro li{width:70px;max-width:70px;flex:0 0 70px}.bancos li img,.bancos ul,.fdp li img,.seguro li img{width:100%}}@media(max-width:575.98px){#products_container{margin-left:-5px;margin-right:-5px}.content-products-img{padding-left:5px;padding-right:5px}}@media(min-width:576px) and (max-width:991.98px){.bgblanco-top.min-phon{top:32px;z-index:1}.navbar-top{justify-content:space-between}.tel>a,.tel>i{left:60px}.log{border-right:none}.cart{border-left:none}.navbar-brand{width:105px;margin:-28px auto 0}}@media(min-width:576px){#empresas #empresas-contenedor div.row div.col ul li a b{font-size:calc(10px + .5vw)}#empresas #empresas-personaliza .col .container-fluid .row{align-items:center}.cabeceramenu{height:130px!important}#carrito .cabeceramenu{height:90px!important}#cabecera-carrusel{height:40px}.main.animatedParent,body>.main{margin-top:130px!important}.sct-slider-index{height:24.5vw}#inicio-instagram-lista a{height:25vw}.sct-busqueda{margin-top:100px!important}}@media(min-width:768px){.form-pago-footer{align-items:flex-end}.fdp span,.seguro span{margin-top:1.2vmin}#inicio-instagram-lista a{height:16.66vw}.sct-busqueda{margin-top:80px!important}}@media(min-width:992px){.container-fluid{width:82%!important}#empresas #empresas-contenedor div.row div.col ul{height:calc(100% + 2vmin);margin:-1vmin}#empresas #empresas-contenedor div.row div.col ul li{padding:1vmin}#empresas #empresas-contenedor div.row div.col ul li a{transition:background-color .4s,color .4s}#empresas #empresas-contenedor div.row div.col ul li a:hover{background-color:#f9d5b3;color:#796857}#empresas #empresas-personaliza .col .container-fluid .row{justify-content:center}#empresas #empresas-personaliza .col .container-fluid .row figure{margin-right:3vw}#empresas #empresas-presupuesto .col-lg-6 .container-fluid{padding-left:0;padding-right:0}#empresas #empresas-presupuesto .col-lg-auto:before{content:'';background:#a6a8ab;display:block;height:265px;width:1px;margin:0 15px;opacity:.5}#empresas #empresas-presupuesto .col-lg address b a:not([href*='tel:']){transition:color .4s}#empresas #empresas-presupuesto .col-lg address b a:not([href*='tel:']):hover{color:#f3bd48}#empresas #empresas-personaliza .col .owl-nav{top:50%}.owl-theme .owl-nav button.owl-next span,.owl-theme .owl-nav button.owl-prev span{font-size:1em!important}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev{color:inherit!important}body>.main-carrito .sct-content-table .container-fluid{/*min-width:992px*/}.cabeceramenu{height:150px!important}#cabecera-carrusel .container-fluid{max-width:950px}#carrusel-cabecera .carousel-item a:hover,#inicio-instagram-arroba:hover,#inicio-testimonios-carrusel .owl-next:hover span,#inicio-testimonios-carrusel .owl-prev:hover span{color:#ffb466}.main.animatedParent,body>.main{margin-top:150px!important}#carrito .cabeceramenu{height:110px!important}#carrito .main.animatedParent,#carrito body>.main{margin-top:110px!important}.bancos li img,.fdp li img,.seguro li img{width:auto;max-width:70px;max-height:40px}.bancos{border-right:none}.bancos li{width:auto;max-width:100%;flex:0 0 auto}.seguro{width:100%;max-width:100%;flex:0 0 100%}.seguro ul{width:auto!important;max-width:100%!important;flex:0 0 auto!important}#inicio-instagram-lista a,.inicio-productos-banner-art .inicio-productos-banner-img{background:rgba(251,249,236,.96);overflow:hidden}#inicio-instagram-lista img,.inicio-productos-banner-art .inicio-productos-banner-img img{transition:transform .6s ease-out}#inicio-instagram-lista a:hover img,.inicio-productos-banner-art:hover .inicio-productos-banner-img img{opacity:.5;transform:scale(1.05)}.inicio-productos-banner-txt a:hover{text-decoration:underline}#inicio-testimonios .container-fluid{overflow:hidden}#inicio-testimonios-carrusel .item:before{content:'';background:#242424;display:block;font-size:10vw;width:1px;height:1em;margin-top:-.5em;opacity:.2;position:absolute;right:0;top:50%}body>.main-carrito .sct-content-table .container-fluid #header_detail_shop{margin-top:30px!important}.sct-busqueda{margin-top:200px!important}}@media(min-width:1180px){.cabeceramenu{height:180px!important}.main.animatedParent{margin-top:180px!important}#carrito .cabeceramenu{height:140px!important}#carrito .main.animatedParent{margin-top:140px!important}html>body>.main-ayudaalcliente,html>body>.main-como-comprar,html>body>.main-costodeenvio,html>body>.main-formasdepago,html>body>.main-terminos-y-condiciones{margin-top:80px!important}.bancos li,.fdp li,.seguro li{margin-left:.5vw;margin-right:.5vw}.bancos li img,.fdp li img,.seguro li img{width:auto;max-width:80px;max-height:45px}.banner-repeat .title-banner-repeat{padding-top:50px!important}.banner-repeat .title-banner-repeat h1{margin-top:5%!important}.sct-busqueda{margin-top:240px!important}}@media(min-width:1720px){.cabeceramenu{height:190px!important}.main.animatedParent{margin-top:190px!important}#carrito .cabeceramenu{height:150px!important}#carrito .main.animatedParent{margin-top:150px!important}.sct-busqueda{margin-top:260px!important}}
/*2024-01*/
@font-face{font-family:icomoon1;src:url('../../fonts/icomoon1.eot?9tb9xr');src:url('../../fonts/icomoon1.eot?9tb9xr#iefix') format('embedded-opentype'),url('../../fonts/icomoon1.ttf?9tb9xr') format('truetype'),url('../../fonts/icomoon1.woff?9tb9xr') format('woff'),url('../../fonts/icomoon1.svg?9tb9xr#icomoon') format('svg');font-weight:400;font-style:normal}
[class*=" icon1-"],[class^=icon1-]{font-family:icomoon1!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon1-icono-linkedin:before{content:"\e900";font-size:0.9em}
#carouselExampleControls .carousel-item,
#carouselExampleControls .carousel-item.active{display:block!important;width:100%!important;height:100%!important;margin-bottom:0!important;margin-left:0!important;margin-right:0!important;margin-top:0!important;position:absolute!important;bottom:auto!important;left:0!important;right:auto!important;top:0!important;transition-delay:0s!important;transition-duration:0.5s!important;transition-property:opacity!important}
@media(max-width:767px){
    .gallery-detail.col-md-7 .col-12.col-md-10{padding-left:0}
}
.sct-empresas,
#empresas .contenedor>.container-fluid .row:not(form):first-child{margin-top:0!important}
/*2024-04*/
.img-gallery .info-complement ul{flex-direction:column!important}
.img-gallery .info-complement .title-prod-cmpl{min-height:30px;margin-bottom:5px!important;padding-left:5px;padding-right:5px}
.img-gallery .btn-agregar{margin-top:5!important}
.btn-agregar-modal{position: sticky;width: 100%;z-index: 2;bottom: 0;margin: auto;background-color: #ffffff}
.btn-agregar-modal .btn-agregar-complemento{margin: 15px}
@media(min-width:1200px) {
    .bgcrema .cont-foot{min-width:1060px}
}
/* ============================================================
   Precio con descuento - contraste y jerarquia (Etapa 2)
   El precio anterior usaba el mismo naranja (#ffb466) que el
   precio vigente, asi que el tachado pasaba desapercibido.
   Ahora el anterior pasa al marron de la paleta (#796857)
   atenuado y el vigente conserva el naranja de marca.
   No se agranda ningun precio: solo cambian color, grosor del
   tachado y la alineacion horizontal de ambos.
   ============================================================ */

/* --- Listados: los dos precios en una sola linea ---
   El UL de la tarjeta es un flex en columna, por eso los precios
   quedaban uno debajo del otro. Se pasa a fila con wrap y el titulo
   ocupa el ancho completo, asi solo los precios comparten linea.
   Las tarjetas sin descuento no cambian: tienen un solo precio. */
.description-products-index ul {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
}

.description-products-index ul > .title-dcpt-product {
    flex: 0 0 100%;
}

.description-products-index ul > .precio-prd {
    flex: 0 0 auto;
}

.description-products-index .precio-antes {
    color: #796857;
    opacity: .6;
    text-decoration: line-through;
    text-decoration-color: #796857;
    text-decoration-thickness: 2px;
    margin-right: 10px;
}

/* --- Ficha de producto (detalle-producto.php) --- */
.preciodetal .h3-prctotl.price-normal {
    color: #796857;
    opacity: .6;
    text-decoration: line-through;
    text-decoration-color: #796857;
    text-decoration-thickness: 2px;
    margin-right: 12px;
}


/* assets/css/animations.css */
.lightSpeedOutRight.goAway,.wiggle.go{-webkit-animation-timing-function:ease-in}.flip.go,.flipInX.go{-webkit-backface-visibility:visible!important}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.slow,.slower{-webkit-animation-fill-mode:both}.slow{-webkit-animation-duration:1.5s;animation-duration:1.5s;animation-fill-mode:both}.slower{-webkit-animation-duration:2s;animation-duration:2s;animation-fill-mode:both}.slowest{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.delay-250{-webkit-animation-delay:.25s;-moz-animation-delay:.25s;-o-animation-delay:.25s;animation-delay:.25s}.delay-500{-webkit-animation-delay:.5s;-moz-animation-delay:.5s;-o-animation-delay:.5s;animation-delay:.5s}.delay-750{-webkit-animation-delay:.75s;-moz-animation-delay:.75s;-o-animation-delay:.75s;animation-delay:.75s}.delay-1000{-webkit-animation-delay:1s;-moz-animation-delay:1s;-o-animation-delay:1s;animation-delay:1s}.delay-1250{-webkit-animation-delay:1.25s;-moz-animation-delay:1.25s;-o-animation-delay:1.25s;animation-delay:1.25s}.delay-1500{-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;-o-animation-delay:1.5s;animation-delay:1.5s}.delay-1750{-webkit-animation-delay:1.75s;-moz-animation-delay:1.75s;-o-animation-delay:1.75s;animation-delay:1.75s}.delay-2000{-webkit-animation-delay:2s;-moz-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s}.delay-2500{-webkit-animation-delay:2.5s;-moz-animation-delay:2.5s;-o-animation-delay:2.5s;animation-delay:2.5s}.delay-3000{-webkit-animation-delay:3s;-moz-animation-delay:3s;-o-animation-delay:3s;animation-delay:3s}.delay-3500{-webkit-animation-delay:3.5s;-moz-animation-delay:3.5s;-o-animation-delay:3.5s;animation-delay:3.5s}.bounceInDown,.bounceInLeft,.bounceInRight,.bounceInUp,.fadeInDown,.fadeInLeft,.fadeInRight,.fadeInUp,.lightSpeedInLeft,.lightSpeedInRight{opacity:0;-webkit-transform:translateX(400px);transform:translateX(400px)}.fadeIn,.flipInX,.flipInY,.rollIn,.rotateDownUpRight,.rotateIn,.rotateInDownLeft,.rotateInUpLeft,.rotateInUpRight{opacity:0}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05)}70%{-webkit-transform:scale(.9)}100%{-webkit-transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}}.bounceIn.go{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(400px)}60%{-webkit-transform:translateX(-30px)}80%{-webkit-transform:translateX(10px)}100%{opacity:1;-webkit-transform:translateX(0)}}@keyframes bounceInRight{0%{opacity:0;transform:translateX(400px)}60%{transform:translateX(-30px)}80%{transform:translateX(10px)}100%{opacity:1;transform:translateX(0)}}.bounceInRight.go{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-400px)}60%{-webkit-transform:translateX(30px)}80%{-webkit-transform:translateX(-10px)}100%{opacity:1;-webkit-transform:translateX(0)}}@keyframes bounceInLeft{0%{opacity:0;transform:translateX(-400px)}60%{transform:translateX(30px)}80%{transform:translateX(-10px)}100%{opacity:1;transform:translateX(0)}}.bounceInLeft.go{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(400px)}60%{-webkit-transform:translateY(-30px)}80%{-webkit-transform:translateY(10px)}100%{opacity:1;-webkit-transform:translateY(0)}}@keyframes bounceInUp{0%{opacity:0;transform:translateY(400px)}60%{transform:translateY(-30px)}80%{transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}.bounceInUp.go{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-400px)}60%{-webkit-transform:translateY(30px)}80%{-webkit-transform:translateY(-10px)}100%{opacity:1;-webkit-transform:translateY(0)}}@keyframes bounceInDown{0%{opacity:0;transform:translateY(-400px)}60%{transform:translateY(30px)}80%{transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}.bounceInDown.go{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1;display:block}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1;display:block}}.fadeIn.go{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes growIn{0%{-webkit-transform:scale(.2);opacity:0}50%{-webkit-transform:scale(1.2)}100%{-webkit-transform:scale(1);opacity:1}}@keyframes growIn{0%{transform:scale(.2);opacity:0}50%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}.growIn{-webkit-transform:scale(.2);transform:scale(.2);opacity:0}.growIn.go{-webkit-animation-name:growIn;animation-name:growIn}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px)}}@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}.shake.go{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes shakeUp{0%,100%{-webkit-transform:translateY(0)}10%,30%,50%,70%,90%{-webkit-transform:translateY(-10px)}20%,40%,60%,80%{-webkit-transform:translateY(10px)}}@keyframes shakeUp{0%,100%{transform:translateY(0)}10%,30%,50%,70%,90%{transform:translateY(-10px)}20%,40%,60%,80%{transform:translateY(10px)}}.shakeUp.go{-webkit-animation-name:shakeUp;animation-name:shakeUp}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-400px)}50%{opacity:.3}100%{opacity:1;-webkit-transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-400px)}50%{opacity:.3}100%{opacity:1;transform:translateX(0)}}.fadeInLeft{opacity:0;-webkit-transform:translateX(-400px);transform:translateX(-400px)}.fadeInLeft.go{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(400px)}50%{opacity:.3}100%{opacity:1;-webkit-transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(400px)}50%{opacity:.3}100%{opacity:1;transform:translateX(0)}}.fadeInRight.go{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(400px)}50%{opacity:.3}100%{opacity:1;-webkit-transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(400px)}50%{opacity:.3}100%{opacity:1;transform:translateY(0)}}.fadeInUp{opacity:0;-webkit-transform:translateY(400px);transform:translateY(400px)}.fadeInUp.go{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-400px)}50%{opacity:.3}100%{opacity:1;-webkit-transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-400px)}50%{opacity:.3}100%{opacity:1;transform:translateY(0)}}.fadeInDown{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.fadeInDown.go{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}}@keyframes rotateIn{0%{transform-origin:center center;transform:rotate(-200deg);opacity:0}100%{transform-origin:center center;transform:rotate(0);opacity:1}}.rotateIn.go{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}100%{transform-origin:left bottom;transform:rotate(0);opacity:1}}.rotateInUpLeft.go{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}100%{transform-origin:left bottom;transform:rotate(0);opacity:1}}.rotateInDownLeft.go{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}100%{transform-origin:right bottom;transform:rotate(0);opacity:1}}.rotateInUpRight.go{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}100%{transform-origin:right bottom;transform:rotate(0);opacity:1}}.rotateInDownRight.go{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0) rotate(0)}}@keyframes rollIn{0%{opacity:0;transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}.rollIn.go{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes wiggle{0%{-webkit-transform:skewX(9deg)}10%{-webkit-transform:skewX(-8deg)}20%{-webkit-transform:skewX(7deg)}30%{-webkit-transform:skewX(-6deg)}40%{-webkit-transform:skewX(5deg)}50%{-webkit-transform:skewX(-4deg)}60%{-webkit-transform:skewX(3deg)}70%{-webkit-transform:skewX(-2deg)}80%{-webkit-transform:skewX(1deg)}100%,90%{-webkit-transform:skewX(0)}}@keyframes wiggle{0%{transform:skewX(9deg)}10%{transform:skewX(-8deg)}20%{transform:skewX(7deg)}30%{transform:skewX(-6deg)}40%{transform:skewX(5deg)}50%{transform:skewX(-4deg)}60%{transform:skewX(3deg)}70%{transform:skewX(-2deg)}80%{transform:skewX(1deg)}100%,90%{transform:skewX(0)}}.wiggle.go{-webkit-animation-name:wiggle;animation-name:wiggle;animation-timing-function:ease-in}@-webkit-keyframes swing{100%,20%,40%,60%,80%{-webkit-transform-origin:top center}20%{-webkit-transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg)}100%{-webkit-transform:rotate(0)}}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0)}}.swing.go{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0)}}@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}.tada.go{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%,100%{-webkit-transform:translateX(0)}15%{-webkit-transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg)}}@keyframes wobble{0%,100%{transform:translateX(0)}15%{transform:translateX(-25%) rotate(-5deg)}30%{transform:translateX(20%) rotate(3deg)}45%{transform:translateX(-15%) rotate(-3deg)}60%{transform:translateX(10%) rotate(2deg)}75%{transform:translateX(-5%) rotate(-1deg)}}.wobble.go{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes pulse{0%,100%{-webkit-transform:scale(1)}50%{-webkit-transform:scale(1.1)}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}.pulse.go{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes lightSpeedInRight{0%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0) skewX(0);opacity:1}}@keyframes lightSpeedInRight{0%{transform:translateX(100%) skewX(-30deg);opacity:0}60%{transform:translateX(-20%) skewX(30deg);opacity:1}80%{transform:translateX(0) skewX(-15deg);opacity:1}100%{transform:translateX(0) skewX(0);opacity:1}}.lightSpeedInRight.go{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedInLeft{0%{-webkit-transform:translateX(-100%) skewX(30deg);opacity:0}60%{-webkit-transform:translateX(20%) skewX(-30deg);opacity:1}80%{-webkit-transform:translateX(0) skewX(15deg);opacity:1}100%{-webkit-transform:translateX(0) skewX(0);opacity:1}}@keyframes lightSpeedInLeft{0%{transform:translateX(-100%) skewX(30deg);opacity:0}60%{transform:translateX(20%) skewX(-30deg);opacity:1}80%{transform:translateX(0) skewX(15deg);opacity:1}100%{transform:translateX(0) skewX(0);opacity:1}}.lightSpeedInLeft.go{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in}}@keyframes flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in}80%{transform:perspective(400px) rotateY(360deg) scale(.95);animation-timing-function:ease-in}100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in}}.flip.go{-webkit-animation-name:flip;backface-visibility:visible!important;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0}40%{transform:perspective(400px) rotateX(-10deg)}70%{transform:perspective(400px) rotateX(10deg)}100%{transform:perspective(400px) rotateX(0);opacity:1}}.flipInX.go{-webkit-animation-name:flipInX;backface-visibility:visible!important;animation-name:flipInX}.flipInY.go,.flipOutX.goAway{-webkit-backface-visibility:visible!important}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);opacity:0}40%{transform:perspective(400px) rotateY(-10deg)}70%{transform:perspective(400px) rotateY(10deg)}100%{transform:perspective(400px) rotateY(0);opacity:1}}.flipInY.go{-webkit-animation-name:flipInY;backface-visibility:visible!important;animation-name:flipInY}@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1)}25%{-webkit-transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3)}}@keyframes bounceOut{0%{transform:scale(1)}25%{transform:scale(.95)}50%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(.3)}}.bounceOut.goAway{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px)}}@keyframes bounceOutUp{0%{transform:translateY(0)}20%{opacity:1;transform:translateY(20px)}100%{opacity:0;transform:translateY(-2000px)}}.bounceOutUp.goAway{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px)}}@keyframes bounceOutDown{0%{transform:translateY(0)}20%{opacity:1;transform:translateY(-20px)}100%{opacity:0;transform:translateY(2000px)}}.bounceOutDown.goAway{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px)}}@keyframes bounceOutLeft{0%{transform:translateX(0)}20%{opacity:1;transform:translateX(20px)}100%{opacity:0;transform:translateX(-2000px)}}.bounceOutLeft.goAway{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px)}}@keyframes bounceOutRight{0%{transform:translateX(0)}20%{opacity:1;transform:translateX(-20px)}100%{opacity:0;transform:translateX(2000px)}}.bounceOutRight.goAway{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut.goAway{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px)}}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-2000px)}}.fadeOutUp.goAway{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px)}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(2000px)}}.fadeOutDown.goAway{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-2000px)}}.fadeOutLeft.goAway{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px)}}@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(2000px)}}.fadeOutRight.goAway{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{transform:perspective(400px) rotateX(0);opacity:1}100%{transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX.goAway{-webkit-animation-name:flipOutX;animation-name:flipOutX;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{transform:perspective(400px) rotateY(0);opacity:1}100%{transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-webkit-animation-name:flipOutY;backface-visibility:visible!important;animation-name:flipOutY}@-webkit-keyframes lightSpeedOutRight{0%{-webkit-transform:translateX(0) skewX(0);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0}}@keyframes lightSpeedOutRight{0%{transform:translateX(0) skewX(0);opacity:1}100%{transform:translateX(100%) skewX(-30deg);opacity:0}}.lightSpeedOutRight.goAway{-webkit-animation-name:lightSpeedOutRight;animation-name:lightSpeedOutRight;animation-timing-function:ease-in}@-webkit-keyframes lightSpeedOutLeft{0%{-webkit-transform:translateX(0) skewX(0);opacity:1}100%{-webkit-transform:translateX(-100%) skewX(30deg);opacity:0}}@keyframes lightSpeedOutLeft{0%{transform:translateX(0) skewX(0);opacity:1}100%{transform:translateX(-100%) skewX(30deg);opacity:0}}.lightSpeedOutLeft.goAway{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{transform-origin:center center;transform:rotate(0);opacity:1}100%{transform-origin:center center;transform:rotate(200deg);opacity:0}}.rotateOut.goAway{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1}100%{-transform-origin:left bottom;-transform:rotate(-90deg);opacity:0}}.rotateOutUpLeft.goAway{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1}100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}}.rotateOutDownLeft.goAway{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1}100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}.rotateOutUpRight.goAway{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0) rotate(0)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg)}}@keyframes rollOut{0%{opacity:1;transform:translateX(0) rotate(0)}100%{opacity:0;transform:translateX(100%) rotate(120deg)}}.rollOut.goAway{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes fadeInUpShort{0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@keyframes fadeInUpShort{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.fadeInUpShort{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}.fadeInUpShort.go{-webkit-animation-name:fadeInUpShort;animation-name:fadeInUpShort}@-webkit-keyframes fadeInDownShort{0%{opacity:0;-webkit-transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@keyframes fadeInDownShort{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}.fadeInDownShort{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}.fadeInDownShort.go{-webkit-animation-name:fadeInDownShort;animation-name:fadeInDownShort}@-webkit-keyframes fadeInRightShort{0%{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@keyframes fadeInRightShort{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}.fadeInRightShort{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}.fadeInRightShort.go{-webkit-animation-name:fadeInRightShort;animation-name:fadeInRightShort}@-webkit-keyframes fadeInLeftShort{0%{opacity:0;-webkit-transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@keyframes fadeInLeftShort{0%{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)}}.fadeInLeftShort{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}.fadeInLeftShort.go{-webkit-animation-name:fadeInLeftShort;animation-name:fadeInLeftShort}

/* assets/fancybox/jquery.fancybox.css */
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */.fancybox-image,.fancybox-inner,.fancybox-nav,.fancybox-nav span,.fancybox-outer,.fancybox-skin,.fancybox-tmp,.fancybox-wrap,.fancybox-wrap iframe,.fancybox-wrap object{padding:0;margin:0;border:0;outline:0;vertical-align:top}.fancybox-wrap{position:absolute;top:0;left:0;z-index:8020}.fancybox-inner,.fancybox-outer,.fancybox-skin{position:relative}.fancybox-skin{background:#f9f9f9;color:#444;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.fancybox-opened{z-index:8030}.fancybox-opened .fancybox-skin{-webkit-box-shadow:0 10px 25px rgba(0,0,0,.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,.5);box-shadow:0 10px 25px rgba(0,0,0,.5)}.fancybox-inner{overflow:hidden}.fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch}.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:15px;white-space:nowrap}.fancybox-iframe,.fancybox-image{display:block;width:100%;height:100%}.fancybox-close,.fancybox-nav span{width:36px;cursor:pointer;z-index:8040;position:absolute}.fancybox-image{max-width:100%;max-height:100%}#fancybox-loading,.fancybox-close,.fancybox-next span,.fancybox-prev span{background-image:url('../../fancybox/fancybox_sprite.png')}#fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-22px;margin-left:-22px;background-position:0 -108px;opacity:.8;cursor:pointer;z-index:8060}#fancybox-loading div{width:44px;height:44px;background:url('../../fancybox/fancybox_loading.gif') center center no-repeat}.fancybox-close{top:-18px;right:-18px;height:36px}.fancybox-nav{position:absolute;top:0;width:40%;height:100%;cursor:pointer;text-decoration:none;background:url('../../fancybox/blank.gif');-webkit-tap-highlight-color:transparent;z-index:8040}.fancybox-prev{left:0}.fancybox-next{right:0}.fancybox-nav span{top:50%;height:34px;margin-top:-18px;visibility:hidden}.fancybox-prev span{left:10px;background-position:0 -36px}.fancybox-next span{right:10px;background-position:0 -72px}.fancybox-nav:hover span,.fancybox-opened .fancybox-title{visibility:visible}.fancybox-tmp{position:absolute;top:-99999px;left:-99999px;visibility:hidden;max-width:99999px;max-height:99999px;overflow:visible!important}.fancybox-lock,.fancybox-lock body{overflow:hidden!important}.fancybox-lock{width:auto}.fancybox-lock-test{overflow-y:hidden!important}.fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:8010;background:url('../../fancybox/fancybox_overlay.png')}.fancybox-overlay-fixed{position:fixed;bottom:0;right:0}.fancybox-lock .fancybox-overlay{overflow:auto;overflow-y:scroll}.fancybox-title{visibility:hidden;font:13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:8050}.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:8050;text-align:center}.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;padding:2px 20px;background:rgba(0,0,0,.8);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 2px #222;color:#fff;font-weight:700;line-height:24px;white-space:nowrap}.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}.fancybox-title-inside-wrap{padding-top:10px}.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;padding:10px;background:rgba(0,0,0,.8)}@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5){#fancybox-loading,.fancybox-close,.fancybox-next span,.fancybox-prev span{background-image:url('../../fancybox/fancybox_sprite@2x.png');background-size:44px 152px}#fancybox-loading div{background-image:url('../../fancybox/fancybox_loading@2x.gif');background-size:24px 24px}}

/* assets/css/etapa2.css */
/* ==========================================================================
   Dulce Sorpresa Peru - Segunda etapa de mejoras
   Hoja de estilos adicional. Se carga despues de index.css, por lo que sus
   reglas tienen prioridad. Cada bloque debe indicar a que item del plan
   corresponde para poder revertirlo de forma aislada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bloque 3 - Catalogo a todo el ancho de la pantalla
   Las paginas de catalogo (categoria, ocasion, buscador y ofertas) llevan la
   clase .catalogo-full en su etiqueta <main>. Sin esa clase el sitio conserva
   el ancho original, de modo que el resto de vistas no se ve afectado.

   Ancho original: .container-fluid queda en 92% en movil y 82% desde 992px.
   Aqui se libera a 100% solo en escritorio y se compensa con un margen
   lateral fijo para que las tarjetas no queden pegadas al borde.
   En movil no se toca nada: se mantiene el 92% heredado.

   La portada usa la segunda clase, .catalogo-full-grid, que va directamente
   sobre el contenedor de la grilla. La portada no es una pagina de catalogo:
   ensanchar su <main> entero estiraria tambien el filtro de ocasiones y los
   testimonios, que se leen mejor en la caja angosta.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .catalogo-full .container-fluid,
    .container-fluid.catalogo-full-grid {
        width: 100% !important;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* A partir de 1600px las cuatro columnas de Bootstrap (col-xl-3) darian
   tarjetas demasiado grandes, asi que se pasa a cinco columnas.

   Ojo: estos dos tramos son solo para el catalogo, NO para la portada. La
   grilla de la portada intercala dos banners de media fila despues del cuarto
   producto (productos.php, condicion $oo == 3), asi que ese primer grupo tiene
   exactamente cuatro tarjetas. Con cinco columnas quedaria un hueco visible
   justo arriba de todo. La portada se queda en cuatro columnas a cualquier
   ancho, que es lo unico que encaja con esa maquetacion. */
@media (min-width: 1600px) {
    .catalogo-full .content-product-index > .row > .col-xl-3 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* En monitores muy anchos se pasa a seis columnas para que la tarjeta se
   mantenga en un tamano parecido al original (unos 400px). */
@media (min-width: 2400px) {
    .catalogo-full .content-product-index > .row > .col-xl-3 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

/* --------------------------------------------------------------------------
   Bloque 2.1 (parte) - El carrito no debe desbordar horizontalmente en movil

   Esto NO es el rediseno del carrito. Es solo el defecto: elementos que se
   salen del ancho de la pantalla. La jerarquia, los tamanos de letra y el
   orden no se tocan aqui, porque eso necesita una maqueta aprobada.

   Sintoma que reporto la clienta: en el movil los textos aparecen cortados por
   la izquierda ("ADJUNTAR IMAGEN...", "ATOS DEL COMPRADOR"). No se podia
   arrastrar para verlos: el documento mide exactamente el ancho de la pantalla
   (scrollWidth == clientWidth) y lo que sobresale queda recortado, no
   desplazado. Por eso se ve como texto mutilado y no como una pagina ancha.

   Causa de fondo, repetida en varias formas: margenes y desplazamientos
   laterales negativos que no tienen nada que cancelar. El .row de Bootstrap
   trae margin-left y margin-right de -15px, pensados para compensar el relleno
   de la columna que lo contiene; cuando esa columna lleva px-0, o cuando el
   contenedor no es una columna, el bloque se sale por los dos lados.

   Medido con una sonda que cuenta los elementos cuyo borde queda fuera del
   ancho por causa propia, no por heredarlo del padre, en un viewport de 390px
   con un producto y el complemento FOTO en el carrito:
       antes: 33 elementos
       despues: 0

   Todo va acotado a #carrito, que es el id que el header pone en <body> solo
   en la pagina del carrito, y a menos de 768px. Fuera de ahi no cambia nada.

   Las dos filas de plantilla de las lineas del carrito no se arreglan aqui
   sino con mx-0 en carrito-de-compras.php: son un caso puntual y hacerlo en la
   vista evita depender de :has(), que no existe en los moviles mas viejos, que
   son justamente los que peor sufren el problema.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Filas que cuelgan de un contenedor sin relleno lateral. */
    #carrito .px-0 > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Filas que ademas son columna y se declaran sin relleno lateral.
       Un .row que trae px-0 en si mismo no puede querer sangrar hacia afuera. */
    #carrito .row.px-0 {
        margin-left: 0;
        margin-right: 0;
    }

    /* Una .row anidada directamente dentro de otra .row. En Bootstrap el hijo
       de una fila debe ser una columna, nunca otra fila, asi que sus margenes
       negativos no tienen nada que cancelar. */
    #carrito .row > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Titulos de seccion con margen negativo fijo (.diay, -8px). */
    #carrito .diay {
        margin-left: 0 !important;
    }

    /* El aviso del cupon se corria 20px hacia la izquierda por un right:20px
       heredado de un @media (min-width:320px) de la propia vista. */
    #carrito .content-cupon {
        right: 0;
    }

    /* Etiquetas flotantes de los campos: son position:absolute con el ancho
       completo de su columna y ademas desplazadas, asi que sobresalian por la
       derecha. Se limita el ancho, no la posicion. */
    #carrito .formulario-car .form__label {
        max-width: calc(100% - 2rem);
    }

    /* Radios de comprobante y forma de pago: mismo caso, con un left:27px
       fijo sobre un ancho del 100%. */
    #carrito .check-repeat .radio {
        max-width: calc(100% - 30px);
    }

    /* Casilla de verificacion con margin-left negativo fijo. */
    #carrito .form-check-input {
        margin-left: 0;
    }
}


/* --------------------------------------------------------------------------
   Bloque 3.1 - Distintivos de producto

   Sellos que van ENCIMA de la foto, arriba a la izquierda, tal como los mostro
   la clienta en sus cuatro referencias: "Personalizalo", "Producto exclusivo",
   "Producto nuevo" y un sello de campana.

   Cada distintivo se pinta de una de dos formas:
     - con imagen: un PNG de 400x400 transparente
     - sin imagen: el nombre sobre un color, que es el respaldo mientras la
       clienta no mande los archivos. Nunca queda un hueco.

   Las dos formas se miden distinto a proposito:

   La IMAGEN lleva un ancho fijo en pixeles. Es una proporcion conocida, 400x400,
   y un tamano fijo se comporta igual en toda la grilla, que segun el ancho de
   pantalla da tarjetas de entre 288 y 430 px.

   El TEXTO se mide con un maximo en porcentaje de la foto y puede partirse en
   varias lineas. No lleva ancho fijo porque los nombres no miden igual: "Nuevo"
   y "Apto celiacos" no caben en la misma caja, y el respaldo tiene que seguir
   siendo legible con cualquier nombre que ella escriba, sin salirse de la foto.
   -------------------------------------------------------------------------- */

.content-products-foto,
#v-pills-tabContent {
    position: relative;
}

.distintivos {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Sin ancho propio: se ajusta al sello mas ancho, con el tope de abajo. */
    max-width: 60%;
    /* No debe tapar el enlace que cubre la tarjeta ni el hover de "VER DETALLE". */
    pointer-events: none;
}

.distintivo {
    display: block;
    line-height: 0;
    margin-bottom: 6px;
    max-width: 100%;
}

.distintivo-img {
    display: block;
    height: auto;
    max-width: 100%;
}

/*
 * En el listado el sello vive dentro de `.content-products-img`, y index.css
 * le da a TODA imagen de ahi `height:100%` y `object-fit:cover` (0,1,1 de
 * especificidad, mas que `.distintivo-img`). El alto se calculaba contra la
 * caja de los sellos, que no tiene alto propio, y el SVG de la clienta salia
 * de 76 x 6 px: una tira naranja recortada. Con dos clases gana esta regla.
 */
.distintivos .distintivo-img {
    height: auto;
    object-fit: contain;
}

.distintivo-texto {
    display: inline-block;
    max-width: 100%;
    border-radius: 999px;
    font-family: brandon_grotesquebold, sans-serif;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
    /* Se parte en varias lineas antes que salirse de la foto. */
    white-space: normal;
    overflow-wrap: break-word;
}

/*
 * Tarjeta del catalogo y de la portada.
 *
 * El sello del catalogo va del MISMO tamaño y a la misma distancia del borde
 * que en la portada: 46 px a 12 px de la esquina (32 px en movil). Asi lo pidio
 * la clienta el 06/10/2026, cuando subio sus SVG: con 76 px el sello del
 * catalogo se veia el doble que el de la portada en la misma foto.
 */
.distintivos--listado {
    margin: 12px 0 0 12px;
}

.distintivos--listado .distintivo-img {
    width: 46px;
}

.distintivos--listado .distintivo-texto {
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: .02em;
}

/*
 * La portada usa la misma clase, pero su caja de sellos recorta al 60 % y el
 * tamaño que se ve alli -46 px, 32 px en movil- sale de 76 y 54. Se dejan esos
 * valores en la portada para que no cambie al ajustar el catalogo.
 */
.rd-regalo__marcas .distintivos--listado .distintivo-img {
    width: 76px;
}

@media (max-width: 767.98px) {
    .rd-regalo__marcas .distintivos--listado .distintivo-img {
        width: 54px;
    }
}

/* Ficha de producto: la foto es mas grande, el sello tambien. */
.distintivos--ficha {
    margin: 12px 0 0 12px;
}

.distintivos--ficha .distintivo-img {
    width: 104px;
}

.distintivos--ficha .distintivo-texto {
    padding: 7px 14px;
    font-size: 12px;
}

@media (max-width: 767.98px) {
    /* En movil la tarjeta baja a unos 180 px de ancho. */
    .distintivos--listado {
        margin: 12px 0 0 12px;
    }

    .distintivos--listado .distintivo-img {
        width: 32px;
    }

    .distintivos--listado .distintivo-texto {
        padding: 4px 8px;
        font-size: 9px;
    }

    .distintivos--ficha .distintivo-img {
        width: 72px;
    }
}


/* --------------------------------------------------------------------------
   Bloques 3.2 y 3.3 - Iconos de confianza y aviso de entrega el mismo dia

   Punto 19: "agregar estos iconos en la parte inferior del home". Su
   referencia es una fila de tarjetas con el icono a la izquierda y titulo mas
   una linea de apoyo a la derecha.

   Punto 28: lo mismo dentro de la ficha, junto al boton de comprar, con la
   etiqueta "insignias de promesa", mas un aviso de cuanto queda para pedir con
   entrega hoy.

   Mientras no lleguen los PNG de 300x300 el icono es la inicial del titulo
   dentro de un circulo. La tarjeta se ve completa igual.
   -------------------------------------------------------------------------- */

.confianza {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.confianza-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    /* El sitio pone list-style a los li dentro de varios contenedores, asi que
       hace falta quitarlo tambien en el elemento y no solo en la lista. */
    list-style: none;
}

.confianza-icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
}

.confianza-icono img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.confianza-icono--inicial {
    font-family: brandon_grotesquebold, sans-serif;
    line-height: 1;
}

.confianza-texto {
    display: block;
}

.confianza-titulo {
    display: block;
    font-family: brandon_grotesquebold, sans-serif;
    color: #522a16;
    line-height: 1.2;
}

.confianza-descripcion {
    display: block;
    color: #796857;
    line-height: 1.35;
}

/* --- Home: fila de tarjetas al final de la portada --- */

.sct-confianza {
    padding: 2.5rem 0 3rem;
}

.confianza--home {
    gap: 2rem;
    justify-content: center;
}

.confianza--home .confianza-item {
    flex: 1 1 260px;
    max-width: 360px;
}

.confianza--home .confianza-icono {
    width: 64px;
    height: 64px;
    font-size: 26px;
}

.confianza--home .confianza-titulo {
    font-size: 16px;
}

.confianza--home .confianza-descripcion {
    font-size: 14px;
    margin-top: 4px;
}

/* --- Ficha: insignias debajo del boton de comprar --- */

.confianza--ficha {
    flex-direction: column;
    gap: 12px;
    margin-top: 1.2rem;
}

.confianza--ficha .confianza-item {
    flex: 1 1 auto;
    gap: 10px;
}

.confianza--ficha .confianza-icono {
    width: 40px;
    height: 40px;
    font-size: 17px;
}

.confianza--ficha .confianza-titulo {
    font-size: 14px;
}

.confianza--ficha .confianza-descripcion {
    font-size: 13px;
}

/* --- Aviso de entrega el mismo dia --- */

/* Sin caja, sin fondo y sin barra de color.
 *
 * La version anterior era un recuadro verde con borde izquierdo grueso y
 * esquinas redondeadas: el patron de "alerta" de cualquier libreria de
 * componentes. En esta ficha desentonaba por dos motivos. Uno, no hay ni una
 * sola superficie de color en toda la columna salvo el boton COMPRAR, asi que
 * el bloque verde se leia como un elemento pegado de otro sitio. Dos, esto no
 * es una alerta: es un dato de servicio, del mismo rango que "Podras cambiarla
 * en el carrito antes de pagar".
 *
 * Se adopta el idioma que la propia ficha ya usa para sus datos: icono de
 * Font Awesome mas texto en el gris calido #796857, igual que "¿Cuando quieres
 * que llegue?" y el campo de personalizacion. Lo unico que se separa del resto
 * es el tiempo restante, que es el dato por el que existe el aviso. */
/* El selector va acompanado de .detail-detail p a proposito, no por gusto de
 * escribir de mas. La columna de la ficha ya trae dos reglas para sus parrafos:
 * index.css les pone un borde superior punteado naranja y main.min.css se lo
 * quita otra vez con div.detail-detail p, que pesa mas que una clase suelta.
 * Sin subir la especificidad aqui, el borde y el color de este aviso los decide
 * el CSS antiguo y no este archivo. */
.aviso-entrega,
.detail-detail p.aviso-entrega {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: .9rem 0 0;
    padding-top: .6rem;
    border-top: 1px solid #e6ddd2;
    font-size: 14px;
    line-height: 1.45;
    color: #796857;
}

/* El texto va dentro de un <span> y ese <span> hereda el naranja #ffb466 de la
   ficha si no se le dice lo contrario. */
.aviso-entrega > span,
.detail-detail p.aviso-entrega > span {
    color: inherit;
}

.aviso-entrega .fa,
.detail-detail p.aviso-entrega .fa {
    flex: 0 0 auto;
    color: #b8935f;
    font-size: 13px;
}

/* El numero se repinta cada minuto. Sin cifras de ancho fijo la frase se
   desplaza sola mientras el cliente la esta leyendo. */
.aviso-entrega-cuenta {
    color: #8c6239;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* "las próximas" / "los próximos" va en su propio <span> desde el 12/10, para
   que la cuenta atras lo cambie. En la ficha queda como span dentro de span, y
   index.css tiene .detail-detail span span { font-size: 30px } y el naranja de
   .detail-detail span: el articulo salia gigante y naranja, mas grande que la
   cifra (13/10/2026, la clienta). Es texto corriente de la frase. */
.aviso-entrega .aviso-entrega-art,
.detail-detail p.aviso-entrega .aviso-entrega-art {
    font-size: inherit;
    color: inherit;
}

/* Cuando ya no hay entrega para hoy el aviso NO se esconde ni cambia de tono
   alarmante: sigue siendo informacion util, solo que otra. Mismo tratamiento,
   un paso mas apagado. */
.aviso-entrega--cerrado {
    color: #8a7768;
}

.aviso-entrega--cerrado .fa {
    color: #c8b5a0;
}

@media (max-width: 767.98px) {
    .confianza--home {
        gap: 1.4rem;
    }

    .confianza--home .confianza-item {
        flex: 1 1 100%;
        max-width: none;
    }

    .confianza--home .confianza-icono {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }

    .sct-confianza {
        padding: 1.8rem 0 2rem;
    }
}


/* --------------------------------------------------------------------------
   Bloque 3.5 - Cabecera editable de catalogo y de ocasion

   Punto 24: "he visto que varias paginas tienen el titulo pero ademas un texto
   y un banner (a veces) en la parte superior de cada catalogo u ocasion".

   Su referencia pone el titulo grande a la izquierda y el parrafo a la
   derecha, separados por una linea vertical, y debajo una franja ancha con la
   imagen. Aqui se reutiliza la fila que ya existe en la barra de busqueda, asi
   que el titulo sigue siendo el mismo <h1> de siempre y el parrafo se le pone
   al lado.

   Todo esto solo aparece cuando hay algo escrito. Sin configurar nada, estas
   reglas no tienen a que aplicarse y la pagina se ve igual que antes.
   -------------------------------------------------------------------------- */

.cabecera-cat-texto-col {
    display: flex;
    align-items: center;
}

.cabecera-cat-texto {
    color: #796857;
    font-size: 15px;
    line-height: 1.5;
}

/* La linea que separa el titulo del texto, como en la referencia. Solo desde
   992px: apilados en movil, una linea vertical no separa nada. */
@media (min-width: 992px) {
    .cabecera-cat-texto-col {
        border-left: 1px solid #e3d7c9;
        padding-left: 1.6rem;
    }
}

/* Version centrada, para las paginas de ocasion, donde el titulo va centrado
   entre las dos hojas y no alineado a la izquierda. */
.cabecera-cat-texto-centrado {
    max-width: 760px;
    margin: .6rem auto 0;
    color: #796857;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    /* La seccion de ocasiones lleva la tipografia decorativa para su titulo.
       Un parrafo de tres lineas con esa letra no se lee, y este parrafo esta
       para leerse: es lo que describe la seccion y lo que indexa Google. */
    font-family: inherit;
}

.title-products-index .cabecera-cat-texto-centrado {
    font-family: brandon_grotesque, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Cabecera en dos columnas: banner a la izquierda, texto a la derecha

   Correccion de la revision de la clienta. La primera version metia el titulo
   y el parrafo en la misma fila que el filtro de busqueda -select 3 columnas,
   titulo 5, parrafo 4- y dejaba el banner debajo a lo ancho. Con las tres
   cosas repartidas en doce columnas el titulo manuscrito se comia su hueco y
   el parrafo quedaba en una tira estrecha, encima de un banner gigante.

   Lo pidio asi: banner a la izquierda, texto a la derecha separados por la
   rayita, y el filtro DEBAJO.
   -------------------------------------------------------------------------- */

.sct-cabecera-catalogo {
    padding: 1.4rem 0 .4rem;
}

.cabecera-cat-fila {
    row-gap: 1rem;
}

.cabecera-cat-banner-col img {
    display: block;
    width: 100%;
    height: auto;
    /* El banner es una imagen que sube la clienta y puede venir cuadrada o muy
       alta. Sin tope, un logo cuadrado ocupa una pantalla entera y empuja los
       productos fuera de la vista, que es justo lo que pasaba. */
    max-height: 260px;
    object-fit: contain;
    object-position: left center;
}

.cabecera-cat-info h1 {
    margin: 0 0 .6rem;
}

/* La rayita. Solo desde 992px: apilados en movil una linea vertical no separa
   nada, y ahi pasa a ser un filete horizontal. */
@media (min-width: 992px) {
    .cabecera-cat-info--separada {
        border-left: 1px solid #e3d7c9;
        padding-left: 2rem;
    }
}

@media (max-width: 991.98px) {
    .cabecera-cat-info--separada {
        border-top: 1px solid #e3d7c9;
        padding-top: 1rem;
        margin-top: .2rem;
    }

    .cabecera-cat-banner-col img {
        max-height: 200px;
        object-position: center;
        margin: 0 auto;
    }

    .cabecera-cat-info {
        text-align: center;
    }
}

/* El filtro queda debajo de la cabecera, ya no compartiendo fila con ella.
 *
 * `.sct-busqueda` arrastra un margin-top enorme -de 3rem a 14rem segun el
 * ancho, repartido en siete reglas de index.css- porque era lo primero del
 * <main> y ese margen le hacia sitio bajo la cabecera fija. Ahora tiene la
 * seccion de cabecera delante y ese hueco queda en medio de la pagina: 240px
 * de vacio entre el texto y el filtro.
 *
 * Se anula SOLO cuando va precedida de la cabecera nueva, sin tocar index.css
 * -que esta minificada y con finales de linea mezclados-.
 *
 * Lleva !important porque las siete reglas de index.css lo llevan: ahi esta
 * escrito `.sct-busqueda{margin-top:240px!important}`. Contra un !important no
 * basta con tener mas especificidad, hace falta otro !important. Con los dos
 * en juego, gana el selector mas especifico, que es este.
 *
 * Sin cabecera configurada el selector no casa y esas paginas conservan su
 * margen tal cual.
 */
.sct-cabecera-catalogo + .sct-busqueda {
    margin-top: 0 !important;
    padding-top: .2rem;
}

/* --- El banner --- */

.cabecera-cat-banner {
    margin: 0 0 1.5rem;
}

.cabecera-cat-banner img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .cabecera-cat-texto,
    .cabecera-cat-texto-centrado {
        font-size: 14px;
    }

    .cabecera-cat-texto-col {
        margin-top: .8rem;
    }

    .cabecera-cat-banner {
        margin-bottom: 1rem;
    }
}


/* --------------------------------------------------------------------------
   Bloque 1.2 (defecto) - Imagenes dentro del texto de la franja superior

   index.css trae `.carousel-item img { width:100%; object-fit:cover }`, escrita
   para los banners del carrusel de portada. El problema es que tambien alcanza
   a cualquier imagen que entre en el TEXTO de la franja superior.

   Como aparecio: el editor del panel tiene un boton de emoticones que inserta
   <img src=".../smiley-cool.gif">, de 18x18 px. Al caer bajo esa regla se
   estiraba al ancho completo del carrusel -unos 840 px de alto- y empujaba el
   resto de la portada fuera de la pantalla. La pagina quedaba en blanco por
   debajo del menu.

   El plugin de emoticones ya se cambio por uno que inserta el caracter Unicode
   en vez de una imagen (mgr/js/plugins/tinymce/plugins/emoticons/). Esta regla
   es la segunda defensa: cubre lo que ya este guardado con la imagen dentro y
   cualquier otra imagen que alguien pegue ahi mas adelante.

   Se acota a .carrusel-item-text, que es el bloque de texto de la franja. Los
   banners del carrusel no se tocan.
   -------------------------------------------------------------------------- */
.carrusel-item-text img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    /* A la altura de la linea, como se comporta un emoji de texto. */
    height: 1.15em;
    max-height: 1.15em;
    -o-object-fit: contain;
    object-fit: contain;
    vertical-align: -.18em;
    margin: 0 .1em;
}


/* --------------------------------------------------------------------------
   Bloque 2.1 - Cabecera del checkout aislado

   Durante el pago solo se pinta la marca. La primera version reusaba
   .bgblanco-top, que trae `height: 38px` fija -es la barra delgada del
   escritorio-. El logo salia a 150x100 px, el contenido medía 124 px y se
   derramaba fuera del contenedor: en movil el logo caia encima de la cabecera
   de la tabla y tapaba la palabra "PRODUCTOS".

   Con clase propia el alto lo manda el contenido, y el logo se dimensiona por
   altura -no por un width fijo- para que se adapte a cada pantalla.
   -------------------------------------------------------------------------- */
.checkout-marca {
    display: block;
    width: 100%;
    background: #fdfaf3;
    padding: 12px 16px;
    text-align: center;
    /* Sin altura fija: la define el logo mas el relleno. */
    line-height: 0;
}

.checkout-marca img {
    display: inline-block;
    width: auto;
    height: 58px;
    max-width: 70%;
    -o-object-fit: contain;
    object-fit: contain;
}

@media (min-width: 768px) {
    .checkout-marca {
        padding: 16px;
    }

    .checkout-marca img {
        height: 76px;
        max-width: 45%;
    }
}

/*
 * El contenedor de la cabecera y el margen superior del contenido estan
 * calculados para el menu completo: .cabeceramenu llega a fijar entre 90 y
 * 190 px segun el ancho, y body > .main-carrito arrastra `margin-top: 7em`.
 *
 * En el checkout solo va el logo, asi que esos numeros dejan una franja crema
 * vacia entre la marca y la tabla de productos. Aqui el alto lo decide el
 * contenido.
 */
/*
 * Va con #carrito por delante porque index.css trae
 * `#carrito .cabeceramenu { height: 90px !important }` y variantes por ancho:
 * con un solo nombre de clase el ID gana y la altura fija sobrevive.
 */
#carrito .cabeceramenu-checkout,
.cabeceramenu.cabeceramenu-checkout {
    height: auto !important;
    min-height: 0 !important;
}

/* --------------------------------------------------------------------------
   Bloque 2.2 - Carrito en movil: bloques pegados al borde y calendario suelto

   Mismo patron que el del complemento FOTO: el formulario del carrito cuelga de
   una `.row` con `margin: 0 -15px`, que en Bootstrap se cancela con el
   `padding: 15px` de las columnas. De las 39 columnas de esa fila, 17 tienen el
   padding en cero -unas por `px-0`, otras por estilos propios-, asi que el
   margen negativo no encuentra nada que lo cancele y el contenido queda pegado
   al borde de la pantalla.

   Las columnas afectadas y visibles son cuatro: el calendario, la hora de
   entrega, el comprobante y las formas de pago. Las otras trece son campos de
   locacion que solo aparecen segun el tipo de entrega, y un modal.

   Se corrige devolviendo el padding en lugar de quitarle el margen negativo a
   la fila: las otras 22 columnas si tienen su padding y ya estan bien puestas,
   y tocar la fila las desplazaria a todas.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .formulario-car > .row > .fdqueja,
    .formulario-car > .row > .content-hora-pedido,
    .formulario-car > .row > .comprobante-pago-car,
    .formulario-car > .row > .form-pago-car,
    .formulario-car > .row > .row.col-md-6 {
        /* !important porque .px-0 de Bootstrap lo trae y si no, gana el suyo. */
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/*
 * El calendario mide 299 px fijos y quedaba alineado a la izquierda dentro de
 * una columna de ~358 px, con todo el aire sobrante a la derecha.
 */
.fdqueja .datepicker-inline,
.fdqueja .datepicker {
    margin-left: auto;
    margin-right: auto;
}

/*
 * "ADJUNTAR IMAGEN DEL COMPLEMENTO" arrancaba exactamente donde terminaba el
 * bloque del codigo de promocion: separacion medida, 0 px. El titulo quedaba
 * pegado al input de arriba.
 *
 * Es el unico <legend class="row mx-0"> de la vista del carrito -comprobado en
 * el DOM-, y vive fuera de .formulario-car, asi que el selector no lleva ese
 * prefijo.
 */
legend.row.mx-0 {
    margin-top: 12px;
}


/*
 * La cabecera es `position: fixed`, asi que el contenido tiene que compensarla
 * con un margen equivalente a su alto; si no, se le mete debajo.
 *
 * ACTUALIZADO 03/09/2026. Los numeros anteriores (82 y 108) se calcularon
 * cuando la cabecera de pago solo llevaba el logo. Ahora lleva ademas la linea
 * fina del artboard -"COMPRA SEGURA", logo y telefono en una fila-, asi que el
 * alto es otro.
 *
 * El alto ya no se mide: se CONSTRUYE en assets/css/carrito.css, que le fija a
 * esa cabecera el padding y al logo su altura. De ahi salen estas dos sumas, y
 * por eso son exactas y no aproximadas:
 *
 *     movil:      12 + 44 + 12 + 1 de filete =  69
 *
 * ACTUALIZADO 04/09/2026. En movil el sumando de en medio dejo de ser el alto
 * del logo (que ahora es 38) y paso a ser el del recuadro del WhatsApp (44):
 * desde el ajuste de la cabecera es el elemento mas alto de la fila, y el alto
 * lo manda el mayor de los dos.
 *     escritorio: 18 + 52 + 18 + 1 de filete =  89
 *
 * SI CAMBIA cualquiera de esos cuatro valores en carrito.css (el padding de
 * .cabeceramenu-checkout o el height de su .checkout-marca img), hay que mover
 * estos dos numeros. Es la unica dependencia entre las dos hojas y esta anotada
 * en los dos lados.
 *
 * Va por hermano general y no como `body > .main-carrito`, que alcanzaria
 * tambien al carrito con la cabecera completa y le quitaria el margen que ahi
 * si hace falta.
 */
/*
 * LA COMPENSACION ALCANZA A DOS ENVOLTORIOS, NO A UNO.
 *
 * El carrito es .main-carrito, pero las pantallas de RESPUESTA del pago
 * -compra-realizada.php, que sirve visa/gracias y pago-tarjeta/gracias, y
 * deposito-bancario.php- no llevan <main>: abren directamente con
 * <section class="dsp-detalle">. Las tres encienden $checkout_aislado y por
 * tanto la misma cabecera fija, pero solo el carrito estaba compensado: en las
 * otras dos la cabecera se comia el principio del texto, o sea justo la linea
 * que dice si el pago paso o no.
 *
 * Los dos selectores comparten los numeros a proposito: es la misma cabecera y
 * el mismo hueco que tapar.
 */
.cabeceramenu-checkout ~ .main-carrito,
.cabeceramenu-checkout ~ .dsp-detalle {
    margin-top: 69px !important;
}

@media (min-width: 768px) {
    .cabeceramenu-checkout ~ .main-carrito,
    .cabeceramenu-checkout ~ .dsp-detalle {
        margin-top: 89px !important;
    }
}

/* --- Cabecera minima del checkout aislado --- */

/*
 * Autonoma a proposito. No hereda de .bgblanco-top / .min-phon / .navbar-top,
 * que llevan offsets escritos a mano (bottom:-89px, top:32px, top:-15px) y
 * hacian que el logo cayera sobre la barra PRODUCTOS.
 */
.cabeceramenu--pago {
    position: static;
}

/*
 * .main-carrito lleva margin-top:7em !important para librar la cabecera cuando
 * es fixed. Con la cabecera ya en el flujo ese margen se cuenta dos veces y
 * deja un hueco vacio entre el logo y la barra PRODUCTOS. Se anula solo aqui.
 */
.cabeceramenu--pago ~ main {
    margin-top: 0 !important;
}

.checkout-marca {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(251, 249, 236, .9);
    padding: 14px 16px;
    margin: 0;
}

.checkout-marca img {
    display: block;
    width: 150px;
    max-width: 55%;
    height: auto;
}

@media (max-width: 767.98px) {
    .checkout-marca {
        padding: 10px 16px;
    }

    .checkout-marca img {
        width: 120px;
    }
}

/* --------------------------------------------------------------------------
   Defecto encontrado al comprobar el catalogo a todo el ancho, no cotizado

   Entre 1720 y 1749 px de ancho el menu superior se parte en tres filas y
   "REGALOS CORPORATIVOS" queda encima del titulo de la pagina.

   La causa no es el ancho del menu ni el tamano de los iconos, que fue la
   primera sospecha y era falsa. Es el salto de letra: main.min.css sube
   .nav>li>a de 13px a 16px justo en 1720px. Medido enlace por enlace, ese
   salto anade 114px a la lista de la derecha:

       CUMPLEANOS            103.6 -> 123.8
       PERSONALIZADO         122.3 -> 146.9
       OCASIONES              90.1 -> 107.3
       REGALOS CORPORATIVOS  176.3 -> 213.2

   El contenedor de esa lista es el 50% de la barra, que a su vez es el 80% de
   la pantalla: crece 4px por cada 10px de viewport. Necesita hasta ~1746px
   para absorber los 114px de golpe, y mientras tanto la lista, que lleva
   flex-wrap: wrap, se parte.

       1710   contenido 567  contenedor 669   entra
       1720   contenido 681  contenedor 673   NO entra
       1740   contenido 681  contenedor 681   empate, tampoco entra
       1750   contenido 681  contenedor 685   entra

   El arreglo es retrasar el salto hasta donde hay sitio, no encoger nada ni
   poner nowrap: a partir de 1750px la letra de 16px entra sola y el menu se ve
   como estaba pensado. Solo se toca la franja rota.
   -------------------------------------------------------------------------- */
@media (min-width: 1720px) and (max-width: 1749.98px) {
    .nav > li > a {
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------
   Punto 3 - Botones de cantidad en el carrito

   La clienta lo reporto asi: "no puedo agregar cantidades como deberia ser, no
   me aparece un boton para aumentar las cantidades". Habia solo un campo
   numerico suelto: en movil el teclado no ofrece flechas y en escritorio las
   del navegador son de unos 8px y aparecen solo al pasar el raton.

   El grupo se dibuja como una sola pieza, con el mismo trazo fino y las
   esquinas rectas de la caja CANT. de la ficha, para que no parezca un widget
   pegado de otro sitio. El campo pierde las flechas nativas: teniendo botones
   de verdad, duplicarlas solo estrecha el numero.
   -------------------------------------------------------------------------- */
.cant-grupo {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #d9c9b6;
    background: #fff;
    line-height: 1;
}

.cant-grupo .selc-cant {
    width: 44px;
    border: 0;
    border-left: 1px solid #e6ddd2;
    border-right: 1px solid #e6ddd2;
    background: transparent;
    padding: 6px 2px;
    font-size: 15px;
    color: #4c4c4c;
    -moz-appearance: textfield;
}

/* Sin flechas nativas: ya hay botones. */
.cant-grupo .selc-cant::-webkit-outer-spin-button,
.cant-grupo .selc-cant::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cant-boton {
    border: 0;
    background: transparent;
    color: #8c6239;
    font-size: 16px;
    line-height: 1;
    width: 30px;
    padding: 0;
    cursor: pointer;
    transition: background-color .15s ease;
}

.cant-boton:hover { background-color: #f6efe7; }
.cant-boton:active { background-color: #eadfd2; }

/* El foco tiene que verse: estos botones se usan con teclado. */
.cant-boton:focus-visible {
    outline: 2px solid #8c6239;
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .cant-boton { transition: none; }
}

/* En movil la fila es estrecha y el grupo comparte sitio con el precio. */
@media (max-width: 767.98px) {
    .cant-grupo .selc-cant { width: 38px; font-size: 14px; }
    .cant-boton { width: 28px; }
}

/* --------------------------------------------------------------------------
   Banners de la portada - proporcion en vez de altura fija

   La clienta lo dijo asi el 02/09: "ahora que ha crecido el tamano de las
   fotos, estos dos banners se ven muy gigantes". Es consecuencia directa del
   catalogo a todo el ancho.

   La caja .inicio-productos-banner-img tenia height:500px fijo y la imagen la
   rellenaba con object-fit:cover. Al ensanchar la grilla la caja crecio a lo
   ancho pero el alto no se movio, asi que el banner dejo de ser proporcional:

       ventana 1440   banner 607x500   foto de producto 311 de ancho
       ventana 1920   banner 828x500   foto de producto 429 de ancho

   A 1920 un banner medida casi el doble de ancho que un producto y seguia con
   500 de alto. Eso es lo que se ve gigante.

   Se cambia por la proporcion de las piezas nuevas que ella va a subir,
   1024x500. Asi la caja crece y encoge con su ancho:

       ventana 1440   607 de ancho -> 296 de alto
       ventana 1920   828 de ancho -> 404 de alto

   Se mantiene object-fit:cover para que un archivo con otra proporcion siga
   rellenando sin deformarse. La altura fija se anula con !important porque la
   regla original vive en index.css y pesa lo mismo que esta.
   -------------------------------------------------------------------------- */
.inicio-productos-banner-img {
    height: auto !important;
    aspect-ratio: 1024 / 500;
}

.inicio-productos-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   Punto 18 - Tarjeta de fecha y hora en la ficha

   Maqueta de la clienta del 02/09/2026: una tarjeta con el aviso arriba y dos
   campos debajo, "Escoge una fecha de entrega" y "Seleccione horario de
   entrega", cada uno con su icono a la derecha.

   El calendario deja de estar siempre desplegado y se abre al pulsar el campo.
   Ocupaba media columna de forma permanente y empujaba el boton de comprar
   fuera de la pantalla en portatiles.

   Los dos campos comparten exactamente la misma caja para que se lean como un
   par y no como dos controles distintos que casualmente estan juntos.
   -------------------------------------------------------------------------- */
.entrega-caja {
    border: 1px solid #e6ddd2;
    border-radius: 10px;
    padding: 18px 18px 16px;
    background: #fff;
    /* Bloque contenedor del calendario, que se cuelga de esta caja
       (container: '#ficha-fecha-entrega' en detalle-producto.php).

       Sin esto la libreria lo mete en el <body> y, al calcular la posicion, le
       resta la del <body> dando por hecho que es un bloque contenedor. Ese
       <body> es `position: static`, asi que la resta no la compensa nadie y el
       calendario aparecia 190 pixeles por encima del campo, sobre la
       descripcion del producto. */
    position: relative;
}

/* El aviso vive aqui dentro como titulo, asi que pierde el filete superior y
   el icono que llevaba cuando iba suelto al lado del boton. */
.entrega-caja .entrega-titulo .aviso-entrega {
    display: block;
    border-top: 0;
    padding-top: 0;
    margin: 0 0 14px;
    text-align: center;
    font-size: 15px;
    color: #796857;
}

.entrega-caja .entrega-titulo .aviso-entrega .fa {
    display: none;
}

.entrega-campo {
    position: relative;
    margin-bottom: 12px;
}

.entrega-campo:last-of-type {
    margin-bottom: 0;
}

.entrega-input {
    width: 100%;
    border: 1px solid #e6ddd2;
    border-radius: 8px;
    background: #fdfbf9;
    padding: 13px 44px 13px 14px;
    font-size: 15px;
    color: #4c4c4c;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.entrega-input::placeholder { color: #9a8f85; }

.entrega-input:disabled {
    background: #f7f4f0;
    color: #9a8f85;
    cursor: default;
}

.entrega-input:focus {
    outline: none;
    border-color: #b8935f;
    background: #fff;
}

/* El icono no debe robar el clic: el campo entero es la zona pulsable. */
.entrega-icono {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #8c6239;
    font-size: 16px;
    pointer-events: none;
}

/* El calendario emergente se alinea con el ancho del campo.

   Cuelga de .entrega-caja, no de .entrega-campo: la libreria lo mueve al
   elemento que se le pasa en `container`. Si este selector vuelve a
   .entrega-campo, el calendario se queda sin borde ni sombra. */
.entrega-caja .datepicker {
    border: 1px solid #e6ddd2;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(140, 98, 57, .12);
}

/* --------------------------------------------------------------------------
   Carrito: fecha y hora dejan de estar una a cada lado

   La clienta, 02/09/2026: "a nivel diseno no se ve bien el poner de un lado a
   otro la fecha y hora". En el carrito la fecha ocupa una columna a la
   izquierda con el calendario desplegado y la hora otra columna a la derecha,
   separadas por todo el ancho de la pagina.

   Esto NO es el rediseno del carrito, que necesita maqueta aprobada. Es solo
   juntar las dos: se apilan en una columna estrecha, una debajo de otra, con el
   mismo aire que la tarjeta de la ficha. La estructura y el calendario no se
   tocan, asi que el dia que llegue la maqueta esto se revierte borrando este
   bloque.

   El maximo de 420px es el ancho que necesita el calendario desplegado; sin el,
   al pasar a una sola columna se estiraria a toda la pagina.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

    /* Ocupan la fila entera para que la segunda caiga debajo y no al lado. Con
       un max-width en la columna las dos seguian cabiendo en la misma linea. */
    #carrito .fdqueja,
    #carrito .content-hora-pedido {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* El ancho se limita por dentro, no en la columna: 420px es lo que necesita
       el calendario desplegado. */
    #carrito .fdqueja > .form-group,
    #carrito .fdqueja #datepicker-container,
    #carrito .fdqueja #chk_recordar,
    #carrito .content-hora-pedido > .form-group {
        max-width: 420px;
    }

    /* La hora venia con un margen superior pensado para ir al lado, no debajo. */
    #carrito .content-hora-pedido.mt-2pc {
        margin-top: 14px !important;
    }
}

/* El titulo de la hora igualado al de la fecha: iban con tamanos distintos
   porque uno era cabecera de seccion y el otro de columna. */
#carrito .content-hora-pedido .diay {
    padding-left: 0;
}

/* --------------------------------------------------------------------------
   Punto 21 en la portada - cinco y seis columnas

   La portada se habia quedado en cuatro columnas a proposito: los dos banners
   iban intercalados detras del cuarto producto, asi que la primera fila tenia
   exactamente cuatro tarjetas y con cinco quedaba un hueco vacio arriba del
   todo, en el sitio mas visible.

   El punto 20 saco los banners de la grilla, asi que ese motivo ya no existe y
   la portada puede escalar como el resto de catalogos. Mismos tramos.
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    .container-fluid.catalogo-full-grid > .row > .col-xl-3 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 2400px) {
    .container-fluid.catalogo-full-grid > .row > .col-xl-3 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

/* --------------------------------------------------------------------------
   Punto 25 - Testimonios: comprador verificado y producto comprado

   La referencia que mando la clienta anade dos cosas a lo que ya habia: el
   sello de comprador verificado junto al nombre, y al pie el producto que
   compro con su miniatura y su precio.

   Ninguna de las dos necesito campo nuevo: el testimonio ya guardaba el enlace
   al producto y el id es el ultimo segmento de la URL.

   El sello se pinta SOLO si hay producto detras. Ponerlo en todos por defecto
   seria decir "verificado" sin nada que lo respalde.
   -------------------------------------------------------------------------- */
.inicio-testimonios-verificado {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .3px;
    text-transform: none;
    color: #7a8b76;
    white-space: nowrap;
}

.inicio-testimonios-verificado .fa {
    font-size: 10px;
}

.inicio-testimonios-producto {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e6ddd2;
    text-align: left;
}

.inicio-testimonios-producto img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 44px;
}

.inicio-testimonios-producto-datos {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

/* El nombre del producto puede ser largo: se corta con puntos suspensivos en
   vez de partir la tarjeta o empujar el precio fuera. */
.inicio-testimonios-producto-nombre {
    font-size: 12px;
    color: #796857;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inicio-testimonios-producto-precio {
    font-size: 13px;
    font-weight: 600;
    color: #8c6239;
}

/* --------------------------------------------------------------------------
   Punto 12 - Aviso de cookies

   Barra inferior, no ventana modal a pantalla completa: la persona puede seguir
   viendo la web mientras decide. Una modal que tapa todo obliga a responder para
   poder mirar, y eso presiona hacia el "aceptar".

   Los dos botones pesan lo mismo a proposito. El de aceptar lleva el marron de
   marca y el de rechazar el mismo trazo sin relleno, pero identico tamano y
   tipografia: rechazar tiene que costar lo mismo que aceptar.
   -------------------------------------------------------------------------- */
.aviso-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    background: #fff;
    border-top: 1px solid #e6ddd2;
    box-shadow: 0 -4px 18px rgba(140, 98, 57, .10);
}

.aviso-cookies-texto {
    flex: 1 1 380px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #4c4c4c;
}

.aviso-cookies-texto strong {
    display: block;
    margin-bottom: 3px;
    color: #8c6239;
    font-size: 14px;
}

.aviso-cookies-texto p { margin: 0; }

.aviso-cookies-botones {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.aviso-cookies-boton {
    border: 1px solid #8c6239;
    background: transparent;
    color: #8c6239;
    padding: 9px 22px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.aviso-cookies-boton--si {
    background: #8c6239;
    color: #fff;
}

.aviso-cookies-boton:hover { background: #f6efe7; color: #8c6239; }
.aviso-cookies-boton--si:hover { background: #75512f; color: #fff; }

.aviso-cookies-boton:focus-visible {
    outline: 2px solid #8c6239;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .aviso-cookies-boton { transition: none; }
}

/* En movil los botones pasan a ocupar la fila entera, mitad y mitad, para que
   ninguno quede mas a mano que el otro. */
@media (max-width: 575.98px) {
    .aviso-cookies { padding: 14px 16px; }
    .aviso-cookies-botones { flex: 1 1 100%; }
    .aviso-cookies-boton { flex: 1 1 50%; padding: 11px 10px; }
}


/* --------------------------------------------------------------------------
   LA EQUIS DE CERRAR MEDIA 48 PIXELES EN TODOS LOS MODALES DEL SITIO

   modalsearch, modalregistro, modallogin y Detalleproducto pintaban el boton
   de cerrar a 23x48 px. La equis acababa pesando mas que el titulo del modal
   al que pertenece.

   DOS REGLAS DISTINTAS, Y LA SEGUNDA ES LA QUE MANDA. Conviene dejarlo escrito
   porque el diagnostico de partida senalaba a la equivocada:

   1. index.css:  `.close, .modal-header .close span { font-size: 3rem }`
      El trozo `.modal-header .close span` NO alcanza a estos modales: ninguno
      de los cuatro tiene `.modal-header` en su marcado (comprobado en QA con
      close.closest('.modal-header'), que devuelve null). Lo que si les llega
      es `.close` a secas, y de ahi salen los 48px del BOTON.

   2. main.min.css:  `.form-reg .close span { font-size: 3rem }`
      Esta es la que viste el SPAN, y es la que de verdad decide lo que se ve,
      porque el glifo lo dibuja el span y no el boton. Bajar solo el boton no
      cambiaba nada: medido en QA, el boton se quedaba en 20px y el span
      seguia a 48. Por eso hacen falta las dos reglas de abajo.

   Tampoco hay ningun desbordamiento que arreglar, aunque lo parezca: el span
   mide 68,5px de alto contra los 48 del boton, pero es un elemento EN LINEA y
   esa cifra es la caja de contenido de la fuente (48 x 1,425), no una caja que
   se salga. Con 20px la proporcion es identica. El unico problema real era el
   tamano.

   Se baja a 20px, que es el mismo tamano de glifo que ya usa la equis del
   modal del carrito redisenado (.car-modal, en carrito.css), para que cerrar
   un modal se vea igual en todo el sitio.

   Va acotada a `.modal` -y no a `.close` suelto- porque `.close` es una clase
   de Bootstrap que tambien visten las alertas descartables. Ahi 48px no
   molesta a nadie y no hay motivo para tocarlo.

   Especificidad, que aqui es lo delicado:
     - `.modal .close` (0,2,0) le gana a `.close` (0,1,0).
     - `.modal .close span` (0,2,1) EMPATA con `.form-reg .close span` (0,2,1),
       asi que decide el orden de carga. Sale bien porque etapa2.css va en la
       linea 116 de includes/header.php y main.min.css en la 110.
   Si algun dia se mueve el orden de las hojas, esto se rompe en silencio.
   -------------------------------------------------------------------------- */
.modal .close {
    font-size: 20px;
    line-height: 1;

    /* Bajar el glifo a 20px dejaba el boton en 9,6 x 20 px: se lee bien pero
       es un blanco de toque diminuto, por debajo de los 24x24 que pide WCAG
       2.2. Se le da caja de 34x34, que es la misma que usa la equis del modal
       del carrito. El glifo sigue a 20px; lo que crece es el area pulsable.

       Va con width/height y no con padding a proposito: main.min.css declara
       `.form-reg .close { padding: 0 !important }`, y a un !important no se le
       gana con un padding normal. */
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* El line-height va tambien aqui y no solo heredado: `line-height: 1` es un
   numero sin unidad, asi que lo que se hereda es el 1, no los 20px, y el span
   lo multiplicaba por SU tamano de letra. */
.modal .close span {
    font-size: inherit;
    line-height: 1;
}

/* ==========================================================================
   Observaciones del 06/10/2026 (catalogo, ficha y complementos)
   ========================================================================== */

/*
 * 1. Tarjeta del catalogo: precio pegado al nombre, iconos mas arriba y menos
 * aire entre filas ("juntar un poco mas el precio al nombre, subir un poco los
 * iconos y acortar el espacio entre filas"). Solo catalogo y ocasiones
 * (main.catalogo-full); la tarjeta de la portada es otra.
 */
main.catalogo-full .content-products-img {
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
}
main.catalogo-full .description-products-index ul {
    gap: 0 !important;
}
main.catalogo-full .description-products-index .precio-prd,
main.catalogo-full .description-products-index .precio-prd span {
    line-height: 1.2 !important;
}
main.catalogo-full .description-products-index .rd-tarjeta-rasgos {
    margin-top: 4px !important;
}

/*
 * 2. Telefono: el nombre en UNA linea ("se va en dos lineas y no se ve bien").
 * Letra algo mas chica; si aun asi no cabe, termina en puntos suspensivos en
 * vez de saltar de linea.
 */
@media (max-width: 767.98px) {
    main.catalogo-full .content-products-img {
        margin-bottom: 6px !important;
        padding-bottom: 4px !important;
    }
    main.catalogo-full .description-products-index .title-dcpt-product {
        max-width: 100%;
        min-width: 0;
    }
    main.catalogo-full .description-products-index .title-dcpt-product a {
        display: block;
        font-size: 18px !important; /* 14 -> 18 el 07/10: "solo de los nombres en los catalogos" */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    main.catalogo-full .description-products-index .precio-prd,
    main.catalogo-full .description-products-index .precio-prd span {
        font-size: 16px !important;
    }
}

/*
 * Titulo del catalogo o la ocasion cuando NO hay banner: salia a 57 px y "se
 * ve un poquito tosco". Con banner el titulo va en la cabecera y no cambia.
 */
.sct-busqueda h1.title-busqueda {
    font-size: 40px !important;
    line-height: 1.15 !important;
}
@media (max-width: 767.98px) {
    .sct-busqueda h1.title-busqueda {
        font-size: 30px !important;
    }
}

/*
 * 4. Ficha: la lista de la descripcion mas junta ("hay mucha separacion entre
 * ellos"). Cada punto llevaba 6 px de margen, 6 de hueco y un alto de linea
 * de 1.7.
 */
.rd-ficha .detail-detail .rd-descripcion ul {
    gap: 2px !important;
}
.rd-ficha .detail-detail .rd-descripcion ul li {
    margin-bottom: 0 !important;
    line-height: 1.45 !important;
}

/*
 * 5. Complementos: la descripcion en la tarjeta va en UNA linea y termina en
 * puntos suspensivos si es larga; completa se lee al abrir el complemento.
 */
body .complement-pedido .title-prod-cmpl small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * 3. Texto del icono al tocarlo en el telefono. En el catalogo el icono esta
 * dentro de `.description-products-index`, y main.min.css pone a todo span de
 * ahi `font-size:1.8rem !important`: la nota salia a 24 px. Se devuelve a su
 * tamaño, el mismo que en la portada.
 */
.description-products-index span.rd-regalo__rasgo-nota {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

/*
 * Color del nombre en la tarjeta del catalogo como en la web actual (07/10/2026,
 * "podria mantenerse en ese color?... el del nombre"): #796857, medido en
 * dulcesorpresaperu.com/desayunos. El rediseno lo habia dejado en #3e2a20.
 * El precio se queda como esta.
 */
main.catalogo-full .description-products-index .title-dcpt-product a {
    color: #796857 !important;
}

/*
 * Menu: PACKS se metia debajo del logo entre 1441 y 1919 px (12/10/2026, "a la
 * administradora le sale asi el menu"). 1536 es una pantalla de 1920 con el zoom
 * de Windows al 125 %, la mas comun en oficina.
 *
 * El logo va en absolute, centrado sobre la barra. Hasta 1440 main.min.css le da
 * a la barra el 94 % del ancho; desde 1441 esa regla se acaba, la barra vuelve a
 * su ancho normal (1135 px a 1456) y el menu, con letra mas grande, mide 1302:
 * se desborda a la derecha, sus dos mitades ya no quedan bajo el centro del logo
 * y la izquierda se le monta. Se estira el 94 % hasta 1919. Desde 1920 el menu ya
 * cabe y no se toca, ni tampoco nada por debajo de 1441.
 */
@media (min-width: 1441px) and (max-width: 1919.98px) {
    .cabeceramenu .container {
        width: 94% !important;
        max-width: none !important;
    }
}

/*
 * Iconos de producto subidos desde el panel (12/10/2026, "Incluye flores").
 * Van como <img> dentro del mismo circulo que los cuatro fijos, que son SVG
 * de 17 px (15 en el telefono). La imagen se ajusta a ese mismo cuadro.
 */
.rd-regalo__rasgo img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    display: block;
}
@media (max-width: 991.98px) {
    .description-products-index .rd-tarjeta-rasgos .rd-regalo__rasgo img {
        width: 15px;
        height: 15px;
    }
}

/* =============================================================================
 * TEXTO INFERIOR DEL CATALOGO Y DE LA OCASION (SEO, 17/10/2026)
 *
 * Lo escribe la clienta en el panel (pestaña «Texto inferior») y
 * pie_seo_html() le da la forma:
 *
 *   - cada h2 es una fila: titulo grande en la serif a la izquierda y el texto
 *     a la derecha, separados por la misma linea vertical de la cabecera del
 *     catalogo. La primera fila es la presentacion y va mas grande;
 *   - las preguntas frecuentes van en una banda crema calida, con el titulo y
 *     la salida a WhatsApp fijos a la izquierda y un acordeon <details> a la
 *     derecha.
 *
 * rediseno.css se carga DESPUES de esta hoja y fuerza la letra con !important
 * (sans en todo, serif en h1-h3). Por eso los selectores llevan
 * `body .pie-seo` delante: con mas especificidad ganan aun yendo antes.
 * -------------------------------------------------------------------------- */
.pie-seo {
    margin-top: 40px;
    color: var(--rd-ink-2, #6B5346);
}
/* El .main deja calc(30px + 3vmin) de margen sobre el pie, con !important
   (index.css, `body > .main`); con la banda de preguntas al final quedaba una
   franja blanca entre la banda y el pie. Es lo mismo que hace la portada. */
body > .main:has(> .pie-seo:last-child) {
    margin-bottom: 0 !important;
}

/* --- Filas: titulo | texto ------------------------------------------------- */

.pie-seo-filas {
    max-width: 1120px;
    margin: 0 auto;
    padding: 64px 0 40px;
    border-top: 1px solid var(--rd-line-2, #E4D8CE);
}
.pie-seo-fila {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    padding: 36px 0;
}
.pie-seo-fila + .pie-seo-fila {
    border-top: 1px solid var(--rd-line, #EFE3D9);
}
body .pie-seo .pie-seo-titulo {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: clamp(28px, 2.4vw, 38px);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--rd-ink, #3E2A20);
    margin: 0;
    text-wrap: balance;
}
body .pie-seo .pie-seo-fila:first-child .pie-seo-titulo {
    font-size: clamp(34px, 3.4vw, 52px);
    line-height: 1.06;
}
.pie-seo-texto {
    border-left: 1px solid var(--rd-line-2, #E4D8CE);
    padding-left: 40px;
    max-width: 64ch;
    font-size: 17px;
    line-height: 1.7;
}
.pie-seo-texto p,
.pie-seo-texto ul,
.pie-seo-texto ol {
    margin: 0 0 14px;
}
.pie-seo-texto > :last-child {
    margin-bottom: 0;
}
/* La primera linea de la presentacion se lee como entrada. */
.pie-seo-fila:first-child .pie-seo-texto > p:first-child {
    font-size: 20px;
    line-height: 1.55;
    color: var(--rd-ink, #3E2A20);
}

/* --- Preguntas frecuentes ---------------------------------------------------- */

.pie-faq {
    background: var(--rd-bg-warm, #F7E9E2);
    padding: 88px 0 96px;
    margin-top: 32px;
}
.pie-faq-rejilla {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 72px;
    align-items: start;
}
/* El titulo acompaña al leer las preguntas; la cabecera fija mide ~130px. */
.pie-faq-lado {
    position: sticky;
    top: 150px;
}
.pie-faq-intro {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.65;
}
.pie-faq-ayuda {
    margin: 20px 0 24px;
    font-size: 16px;
    line-height: 1.6;
    max-width: 30ch;
}
.pie-faq-wa {
    gap: 10px;
}
.pie-faq-wa svg {
    flex: none;
}

.pie-faq-lista {
    background: var(--rd-white, #fff);
    border-radius: 16px;
    padding: 6px 36px;
    box-shadow: 0 18px 40px -28px rgba(62, 42, 32, .35);
}
.pie-faq-item + .pie-faq-item {
    border-top: 1px solid var(--rd-line, #EFE3D9);
}
.pie-faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    cursor: pointer;
}
.pie-faq-item summary::-webkit-details-marker {
    display: none;
}
.pie-faq-item summary:focus-visible {
    outline: 2px solid var(--rd-accent, #B4462F);
    outline-offset: 4px;
    border-radius: 6px;
}
body .pie-seo .pie-faq-pregunta {
    font-family: var(--rd-serif) !important;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--rd-ink, #3E2A20);
    transition: color .2s ease;
}
.pie-faq-item summary:hover .pie-faq-pregunta,
.pie-faq-item[open] .pie-faq-pregunta {
    color: var(--rd-accent-dark, #8E3522);
}

/* El signo: una cruz que gira y se llena al abrir. */
.pie-faq-signo {
    position: relative;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--rd-accent-line, #EFC9BB);
    transition: background .25s ease, border-color .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.pie-faq-signo::before,
.pie-faq-signo::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    margin: -.75px 0 0 -6px;
    background: var(--rd-accent, #B4462F);
    border-radius: 1px;
    transition: background .25s ease;
}
.pie-faq-signo::after {
    transform: rotate(90deg);
}
.pie-faq-item[open] .pie-faq-signo {
    background: var(--rd-accent, #B4462F);
    border-color: var(--rd-accent, #B4462F);
    transform: rotate(45deg);
}
.pie-faq-item[open] .pie-faq-signo::before,
.pie-faq-item[open] .pie-faq-signo::after {
    background: #fff;
}

.pie-faq-respuesta {
    padding: 0 58px 26px 0;
    font-size: 16px;
    line-height: 1.7;
}
.pie-faq-respuesta p {
    margin: 0 0 10px;
}
.pie-faq-respuesta > :last-child {
    margin-bottom: 0;
}
.pie-faq-respuesta a,
.pie-seo-texto a {
    color: var(--rd-accent, #B4462F);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pie-faq-item[open] .pie-faq-respuesta {
    animation: pieFaqAbre .4s cubic-bezier(.16, 1, .3, 1);
}
@keyframes pieFaqAbre {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pie-faq-item[open] .pie-faq-respuesta { animation: none; }
    .pie-faq-signo { transition: none; }
}

/* La banda de ventajas de la portada, entre la presentacion y las preguntas:
   pegada a la banda de preguntas para que las dos se lean como un bloque. */
.pie-seo-ventajas {
    margin-top: 24px;
}
.pie-seo-ventajas + .pie-faq {
    margin-top: 0;
}

/* Sin forma (HTML que no se pudo leer): al menos una columna legible. */
.pie-seo-libre {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 0;
    font-size: 16px;
    line-height: 1.7;
}

@media (max-width: 991.98px) {
    .pie-seo-fila {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 28px 0;
    }
    .pie-seo-texto {
        border-left: 0;
        padding-left: 0;
    }
    .pie-faq-rejilla {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .pie-faq-lado {
        position: static;
    }
}
@media (max-width: 767.98px) {
    .pie-seo-filas {
        padding: 40px 0 16px;
    }
    .pie-seo-texto {
        font-size: 16px;
    }
    .pie-seo-fila:first-child .pie-seo-texto > p:first-child {
        font-size: 18px;
    }
    .pie-faq {
        padding: 56px 0 64px;
    }
    .pie-faq-lista {
        padding: 2px 20px;
        border-radius: 14px;
    }
    .pie-faq-item summary {
        padding: 20px 0;
        gap: 16px;
    }
    body .pie-seo .pie-faq-pregunta {
        font-size: 18px;
    }
    .pie-faq-signo {
        width: 30px;
        height: 30px;
    }
    .pie-faq-respuesta {
        padding-right: 0;
    }
}

/* --- Texto del pie en corto (19/10/2026) ------------------------------------
   La clienta vio las filas grandes debajo de los productos y dijo que era
   demasiado texto. Ahora cierra la pagina, despues de las preguntas, en la
   misma banda crema: titulo chico, un parrafo y el resto tras "Leer mas".
   -------------------------------------------------------------------------- */
.pie-seo-resumen {
    background: var(--rd-bg-warm, #F7E9E2);
    padding: 48px 0 72px;
}
.pie-faq:has(+ .pie-seo-resumen) {
    padding-bottom: 56px;
}
.pie-seo-caja {
    max-width: 1120px;
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid var(--rd-line-2, #E4D8CE);
}
.pie-seo-caja > * {
    max-width: 760px;
}
body .pie-seo .pie-seo-resumen .pie-seo-titulo,
body .pie-seo .pie-seo-resumen .pie-seo-subtitulo {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--rd-ink, #3E2A20);
    margin: 0 0 10px;
}
body .pie-seo .pie-seo-resumen .pie-seo-subtitulo {
    font-size: 18px;
    margin-top: 24px;
}
.pie-seo-resumen .pie-seo-texto {
    border-left: 0;
    padding-left: 0;
    max-width: 760px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--rd-ink-2, #6B5346);
}
.pie-seo-resumen .pie-seo-texto p {
    margin: 0 0 10px;
}
.pie-seo-mas > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rd-accent, #B4462F);
    cursor: pointer;
}
.pie-seo-mas > summary::-webkit-details-marker {
    display: none;
}
.pie-seo-mas > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}
.pie-seo-mas[open] > summary::after {
    transform: translateY(2px) rotate(-135deg);
}
.pie-seo-mas > summary:focus-visible {
    outline: 2px solid var(--rd-accent, #B4462F);
    outline-offset: 4px;
    border-radius: 4px;
}
.pie-seo-mas-cerrar,
.pie-seo-mas[open] .pie-seo-mas-abrir {
    display: none;
}
.pie-seo-mas[open] .pie-seo-mas-cerrar {
    display: inline;
}
.pie-seo-mas[open] > .pie-seo-texto:first-of-type {
    margin-top: 10px;
}
@media (prefers-reduced-motion: reduce) {
    .pie-seo-mas > summary::after { transition: none; }
}
@media (max-width: 767.98px) {
    .pie-seo-resumen {
        padding: 32px 0 48px;
    }
    .pie-faq:has(+ .pie-seo-resumen) {
        padding-bottom: 40px;
    }
    .pie-seo-caja {
        padding-top: 28px;
    }
}


/* --------------------------------------------------------------------------
   BUSCADOR (22/10/2026)

   Marcado en includes/cierre.php (#modalsearch.busq). Era una caja crema con
   un input y un boton marron centrada en la pantalla; la lista de resultados
   se pintaba en el body, por detras del modal, y no se veia.

   Celular: hoja a pantalla completa, campo arriba con «Cerrar», atajos a
   categorias y los resultados con foto dentro de la misma hoja.
   Computadora: el mismo contenido en un panel de 640px arriba al centro.

   Todo va acotado a #modalsearch para no tocar los otros modales.
   -------------------------------------------------------------------------- */
#modalsearch.busq { padding: 0 !important; z-index: 100000 !important; } /* una seccion de la portada quedaba por encima */
#modalsearch .busq-dialog {
    max-width: 640px;
    margin: 8vh auto 24px;
    font-family: 'Karla', system-ui, sans-serif;
}
#modalsearch .busq-hoja {
    border: 0;
    border-radius: 16px;
    background: #FBF6F1 !important; /* .modal-content del sitio lo pintaba amarillento */
    box-shadow: 0 24px 60px -12px rgba(62, 42, 32, .35);
    overflow: hidden;
}
#modalsearch .busq-barra {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
    background: #FBF6F1;
}
#modalsearch .busq-campo {
    position: static !important; /* un label suelto de index.css lo dejaba absolute y de 120px */
    width: auto !important;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 16px;
    height: 52px;
    background: #FFFFFF;
    border: 1.5px solid #E4D8CE;
    border-radius: 999px;
    color: #8A7466;
    cursor: text;
    transition: border-color .15s, box-shadow .15s;
}
#modalsearch .busq-campo:focus-within {
    border-color: #B4462F;
    box-shadow: 0 0 0 4px rgba(180, 70, 47, .12);
    color: #B4462F;
}
#modalsearch .busq-lupa { flex: none; }
#modalsearch .busq-input {
    flex: 1;
    min-width: 0;
    width: 100% !important; /* algo heredado lo dejaba en 55px y cortaba el texto de ayuda */
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0;
    font: 400 17px/1.2 'Karla', system-ui, sans-serif; /* 16px o mas: iOS no hace zoom */
    color: #3E2A20;
    -webkit-appearance: none;
    appearance: none;
}
#modalsearch .busq-input::placeholder { color: #8A7466; opacity: 1; }
#modalsearch .busq-input::-webkit-search-cancel-button { -webkit-appearance: none; }
#modalsearch .busq-cerrar {
    flex: none;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    font: 600 15px 'Karla', system-ui, sans-serif;
    color: #3E2A20;
    cursor: pointer;
}
#modalsearch .busq-cerrar:hover,
#modalsearch .busq-cerrar:focus-visible { color: #B4462F; text-decoration: underline; }
#modalsearch .busq-cuerpo {
    padding: 8px 20px 24px;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#modalsearch .busq-titulo {
    margin: 12px 0 14px;
    font: 500 26px/1.15 'Newsreader', Georgia, serif;
    font-family: 'Newsreader', Georgia, serif !important; /* rediseno.css fuerza Karla con !important */
    letter-spacing: -.02em;
    color: #3E2A20;
}
#modalsearch .busq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#modalsearch .busq-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #E4D8CE;
    border-radius: 999px;
    background: #FFFFFF;
    font: 600 15px 'Karla', system-ui, sans-serif;
    color: #3E2A20;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
#modalsearch .busq-chips a:hover,
#modalsearch .busq-chips a:focus-visible { border-color: #B4462F; color: #B4462F; background: #FFFFFF; }

/* Lista del autocompletado (jQuery UI). Se pinta dentro de la hoja: se
   anula la posicion absoluta y el ancho que calcula jQuery UI. */
#modalsearch .busq-resultados .ui-autocomplete {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    list-style: none;
}
#modalsearch .busq-resultados .ui-menu-item {
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #EFE3D9;
    background: transparent !important;
}
#modalsearch .busq-resultados .ui-menu-item:last-child { border-bottom: 0; }
#modalsearch .busq-resultados .itemList { margin: 0; padding: 0; border: 0; background: transparent !important; }
#modalsearch .busq-resultados .itemList a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 4px;
    color: #3E2A20 !important; /* jquery-ui pintaba el activo en naranja claro */
    text-decoration: none;
}
#modalsearch .busq-resultados .itemList img {
    flex: none;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
    background: #F3EAE1;
}
#modalsearch .busq-resultados .texto_1 { flex: 1; min-width: 0; }
#modalsearch .busq-resultados .texto_1 b {
    display: block;
    text-transform: none !important;
    letter-spacing: normal !important;
    font: 600 16px/1.3 'Karla', system-ui, sans-serif;
    color: #3E2A20;
}
#modalsearch .busq-resultados .itemList a::after {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-top: 1.8px solid #A08D80;
    border-right: 1.8px solid #A08D80;
    transform: rotate(45deg);
}
#modalsearch .busq-resultados .ui-state-active,
#modalsearch .busq-resultados .ui-menu-item:hover .itemList a {
    margin: 0;
    border: 0;
    background: #F7E9E2;
    border-radius: 12px;
}
#modalsearch .busq-resultados .itemList .texto_1 b { color: #3E2A20 !important; } /* un :hover viejo lo pintaba naranja claro */
#modalsearch .busq-resultados .ui-menu-item .ui-state-active .texto_1 b,
#modalsearch .busq-resultados .ui-menu-item:hover .itemList .texto_1 b { color: #B4462F !important; }
#modalsearch .busq-vacio {
    margin: 16px 0 4px;
    font-size: 15px;
    line-height: 1.5;
    color: #6B5346;
}
#modalsearch .busq-ver {
    display: block;
    width: 100%;
    min-height: 52px;
    margin-top: 16px;
    border: 0;
    border-radius: 999px;
    background: #B4462F;
    font: 700 16px 'Karla', system-ui, sans-serif;
    color: #FFFFFF;
    cursor: pointer;
    transition: background .15s;
}
#modalsearch .busq-ver:hover,
#modalsearch .busq-ver:focus-visible { background: #8E3522; }
#modalsearch [hidden] { display: none !important; }

/* Celular: hoja a pantalla completa que baja desde arriba. */
@media (max-width: 767px) {
    #modalsearch .busq-dialog {
        max-width: none;
        width: 100%;
        height: 100%;
        margin: 0;
    }
    #modalsearch .busq-hoja {
        height: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
    }
    #modalsearch .busq-barra {
        padding: max(12px, env(safe-area-inset-top)) 16px 12px;
        border-bottom: 1px solid #EFE3D9;
    }
    #modalsearch .busq-cuerpo { flex: 1; max-height: none; padding: 8px 16px 32px; }
    #modalsearch.fade .busq-dialog { transform: translateY(-16px); transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
    #modalsearch.show .busq-dialog { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    #modalsearch.fade .busq-dialog { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   POPUP DE EMBLUE EN EL CELULAR (22/10/2026)

   El popup de promociones (el de Halloween, por ejemplo) no es de la web: lo
   inyecta el script de emBlue como un <w-div> fijo de 540px con dos columnas.
   En un celular de 390px quedaba corrido 200px a la izquierda y cortado.

   Sus reglas van con #id y !important, y el id cambia en cada campana. Para
   ganarles sin saber el id se usa :is(w-div, #x#x): :is() toma la
   especificidad de su argumento mas fuerte (dos ids) aunque ese argumento no
   exista. Aqui se apila: texto arriba, imagen abajo, dentro de la pantalla.
   Lo ideal igual es armar la version movil en emBlue.

   23/10/2026: Joseph vio que el fondo naranja no llegaba a los bordes: quedaban
   12px a cada lado y 65px abajo (el bottom de emBlue) con la pagina asomando.
   Ahora es una hoja pegada abajo, de borde a borde, y la foto llena su franja
   en vez de flotar chica en una esquina.
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    body > :is(w-div, #emblue#movil)[id] {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 16px 16px 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        max-height: calc(100vh - 24px) !important;
        overflow-y: auto !important;
    }
    body > :is(w-div, #emblue#movil)[id] > div {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    body > :is(w-div, #emblue#movil)[id] > div > div {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body > :is(w-div, #emblue#movil)[id] > div > div div { width: auto !important; max-width: 100% !important; }
    /* La franja de la foto: todo el ancho, sin el padding de su columna. */
    body > :is(w-div, #emblue#movil)[id] > div > div:has(img),
    body > :is(w-div, #emblue#movil)[id] > div > div:has(img) div {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body > :is(w-div, #emblue#movil)[id] img {
        display: block !important;
        width: 100% !important;
        height: 180px !important;
        max-width: none !important;
        object-fit: cover !important;
        margin: 0 !important;
    }
    body > :is(w-div, #emblue#movil)[id] > span {
        left: auto !important;
        right: 6px !important;
    }
}


/* --------------------------------------------------------------------------
   BUSCADOR DE LA BARRA DE ARRIBA EN COMPUTADORA (22/10/2026)

   #buscar_producto (header.php) usa el mismo autocompletado, pero jQuery UI
   pinta su lista suelta en el <body> y no tenia estilos: cada resultado salia
   con la foto a tamano completo (650px). Se le da el mismo diseño de filas
   que al buscador del celular. La lista del modal vive dentro de
   #busq-resultados, asi que `body > ul.ui-autocomplete` solo alcanza a esta.
   -------------------------------------------------------------------------- */
body > ul.ui-autocomplete {
    z-index: 1060 !important;
    min-width: 380px;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    margin: 8px 0 0 !important;
    padding: 8px !important;
    list-style: none;
    background: #FBF6F1 !important;
    border: 1px solid #E4D8CE !important;
    border-radius: 16px;
    box-shadow: 0 18px 40px -12px rgba(62, 42, 32, .3);
    font-family: 'Karla', system-ui, sans-serif;
}
body > ul.ui-autocomplete .ui-menu-item,
body > ul.ui-autocomplete .itemList {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
}
body > ul.ui-autocomplete .itemList a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 0 !important;
    border-radius: 12px;
    color: #3E2A20 !important;
    text-decoration: none;
}
body > ul.ui-autocomplete .itemList img {
    flex: none;
    width: 56px !important;
    height: 56px !important;
    max-width: none;
    object-fit: cover;
    border-radius: 10px;
    background: #F3EAE1;
}
body > ul.ui-autocomplete .texto_1 { flex: 1; min-width: 0; }
body > ul.ui-autocomplete .texto_1 b {
    display: block;
    font: 600 15px/1.3 'Karla', system-ui, sans-serif;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #3E2A20 !important;
}
body > ul.ui-autocomplete .ui-state-active,
body > ul.ui-autocomplete .ui-menu-item:hover .itemList a {
    margin: 0;
    background: #F7E9E2 !important;
}
body > ul.ui-autocomplete .ui-state-active b,
body > ul.ui-autocomplete .ui-menu-item:hover b { color: #B4462F !important; }

/* La lista del modal: jquery-ui le pone fondo blanco (.ui-widget-content). */
#modalsearch .busq-resultados .ui-autocomplete,
#modalsearch .busq-resultados .ui-widget-content { background: transparent !important; }


/* --------------------------------------------------------------------------
   DESCRIPCION DE LA FICHA: SIN ESTILOS PEGADOS (22/10/2026)

   Lo que se pega en el editor del panel llega con
   <span style="font-family: arial; color: #000000"> en cada linea. En la ficha
   eso pintaba la lista en negro y con mas alto de linea que la de los demas
   productos (Desayuno Escorpio, Desayuno Libra). Aqui la descripcion siempre
   usa la letra, el color y el alto de linea de la web. Lo que se guarda desde
   ahora ya llega limpio (helpers/detalle_helper.php); esto cubre lo anterior.
   -------------------------------------------------------------------------- */
#rd-descripcion span,
#rd-descripcion font {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    background: transparent !important;
}


/* assets/css/rediseno.css */
/* =============================================================================
 * REDISEÑO 2026 — hoja base
 *
 * Traduce el prototipo de Claude Design (home1) a CSS real. Se carga LA ULTIMA
 * en el head, despues de carrito.css, para poder ganarle a las hojas viejas
 * sin tener que tocarlas.
 *
 * Dos partes bien separadas:
 *
 *   1. TIPOGRAFIA Y PALETA GLOBAL. Afecta todo el sitio, cabecera y pie
 *      incluidos. Es lo unico que el cliente pidio cambiar del header y del
 *      footer: la estructura y las funciones (login, registro, carrito,
 *      megamenu, buscador) no se tocan.
 *
 *   2. BLOQUES NUEVOS DE LA PORTADA Y DEL DETALLE, con prefijo .rd-. Son
 *      marcado nuevo, asi que aqui no hace falta pelear especificidad.
 *
 * El !important solo aparece en font-family y en un punado de colores de la
 * cabecera. Las hojas viejas declaran la fuente en catorce sitios distintos y
 * varias con !important; sin el, la mitad del sitio se quedaria en Brandon.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 0. LAS DOS FUENTES, Y EL RELEVO DE LAS VIEJAS
 *
 * Karla y Newsreader van servidas desde el propio dominio (assets/fonts/
 * rediseno) y no desde Google: una peticion menos a un tercero y una cosa
 * menos que se pueda caer.
 *
 * El relevo de las familias viejas NO se hace redeclarando @font-face con su
 * mismo nombre: se probó y el navegador no lo aplica. Cuando dos @font-face
 * comparten familia no se pisan, se suman como dos variantes de la misma, y
 * Chrome se queda con la primera que encaja, que es la de Brandon. Medido en
 * QA: el texto seguía saliendo en Brandon con el relevo puesto.
 *
 * Se hace abajo, en el bloque 1, con una regla de barrido.
 * -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../fonts/rediseno/karla-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../fonts/rediseno/karla-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../fonts/rediseno/newsreader-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../fonts/rediseno/newsreader-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Tinta */
    --rd-ink: #3E2A20;
    --rd-ink-2: #6B5346;
    --rd-ink-3: #8A7466;
    --rd-ink-4: #A08D80;

    /* Fondos */
    --rd-bg: #F3EAE1;
    --rd-bg-soft: #FBF6F1;
    --rd-bg-warm: #F7E9E2;
    --rd-bg-warm-2: #F4EBE3;
    --rd-white: #FFFFFF;

    /* Filetes */
    --rd-line: #EFE3D9;
    --rd-line-2: #E4D8CE;
    --rd-line-3: #D8BCAE;

    /* Acento */
    --rd-accent: #B4462F;
    --rd-accent-dark: #8E3522;
    --rd-accent-line: #EFC9BB;
    --rd-accent-dot: #EFA48D;

    /* Apoyos */
    --rd-gold: #E9A93A;
    --rd-green: #59B36B;
    --rd-brown: #8B5E34;

    --rd-serif: 'Newsreader', Georgia, serif;
    --rd-sans: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --rd-gutter: 48px;
}

/* -----------------------------------------------------------------------------
 * 1. TIPOGRAFIA GLOBAL
 *
 * Las hojas viejas usan cuatro familias: brandon_grotesque_regularRg para el
 * cuerpo, brandon_grotesquebold para lo destacado, y mellifret y playlist para
 * los titulos con caracter. El rediseno solo trae dos: Karla para todo el
 * cuerpo y Newsreader para los titulos. El mapeo es ese.
 * -------------------------------------------------------------------------- */

/*
 * Barrido: TODO lo que no sea un icono pasa a Karla.
 *
 * La alternativa era perseguir las catorce reglas que nombran Brandon,
 * Mellifret y Playlist entre main.min.css, index.css y etapa2.css. Se hizo, y
 * el pie de pagina se quedaba igual: hay reglas como `footer ul li a` que
 * ganan a cualquier lista de clases razonable.
 *
 * El barrido se escribe con la MINIMA especificidad posible -0,0,1- y las
 * excepciones (titulares e iconos) se declaran despues con una clase o un
 * elemento mas. El primer intento excluia los iconos con `:not()` dentro del
 * propio barrido y salio al reves: cada `:not()` suma la especificidad de lo
 * que lleva dentro, la regla acabo en 0,5,1 y se comio hasta los titulares
 * serif. Medido en QA: toda la portada salia en Karla.
 */
/*
 * Las pantallas que YA tenian su propio rediseno quedan fuera del barrido.
 *
 * El carrito (.car-carrito), la landing corporativa (.corp) y la pagina de
 * gracias (.dsp-*) se entregaron antes con Jost, Inter y Fraunces, y la
 * clienta las aprobo asi. El barrido les pisaba la fuente y los rotulos del
 * carrito -"TU PEDIDO", "ENTREGA"- salian en serif con mucho espaciado. Lo
 * reporto ella el 2026-09-10.
 *
 * La exclusion va dentro de :where() porque :where() NO suma especificidad:
 * el selector entero sigue valiendo 0,0,1 y las excepciones de mas abajo
 * -titulares serif, iconos- le siguen ganando con un elemento mas. Con un
 * :not() normal, cada argumento habria sumado y la regla se habria comido
 * hasta los titulares, que es justo el error que ya se cometio una vez.
 */
body,
body :not(:where(
    .car-carrito, .car-carrito *,
    .corp, .corp *,
    [class^="dsp-"], [class^="dsp-"] *,
    [class^="icon-"], [class*=" icon-"],
    .fa, .fas, .far, .fab, .glyphicon
)) {
    font-family: var(--rd-sans) !important;
}

.font-brandonB,
b, strong {
    font-weight: 700;
}

/* Los titulos con caracter pasan a la serif del rediseno. */
/*
 * Van con `body` delante a proposito: el barrido de arriba es `body *` y
 * lleva !important, asi que un `h1` a secas empataria en especificidad y
 * ganaria el que se declarara despues. Con `body h1` no hay empate.
 */
body :is(h1, h2, h3, .h1, .h2, .h3, .font-mellifret, .font-playlist,
         .title-products-index, .title-filter):not(:where(
    .car-carrito, .car-carrito *,
    .corp, .corp *,
    [class^="dsp-"], [class^="dsp-"] *
)) {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    letter-spacing: -.01em;
}

/*
 * Los iconos quedan fuera del barrido por la lista de :where() de arriba, asi
 * que conservan la familia de simbolos que les da su propia hoja. Aqui solo se
 * repite el icomoon de los pseudoelementos, que el barrido no toca pero que
 * alguna hoja vieja declara con una especificidad rara.
 */
body [class^="icon-"]:before,
body [class*=" icon-"]:before {
    font-family: 'icomoon' !important;
}

body {
    background: var(--rd-bg);
    color: var(--rd-ink);
}

/* -----------------------------------------------------------------------------
 * 2. PALETA DE CABECERA Y PIE
 *
 * Misma estructura, colores del rediseno. Sin esto la cabecera se queda con su
 * blanco y su naranja viejos y choca con el crema del cuerpo nuevo.
 * -------------------------------------------------------------------------- */

header .sct-barrita,
.sct-barrita,
#barrita,
.barrita {
    background: var(--rd-ink) !important;
    color: var(--rd-bg-warm) !important;
    font-family: var(--rd-sans) !important;
    font-size: 13.5px;
    letter-spacing: .01em;
}
.sct-barrita a,
#barrita a,
.barrita a {
    color: var(--rd-bg-warm) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* La cabecera del sitio. El `header` a secas es necesario -en las paginas
   normales la cabecera es un <header> sin clase ni id-, pero alcanzaba
   TAMBIEN a los <header> de dentro del carrito: los rotulos de paso
   («1 TU PEDIDO», «4 FORMA DE PAGO») son <header class="car-paso-cab">, y les
   pintaba encima una banda rosada que el diseno aprobado no tiene. Se excluyen
   por clase en vez de bajar el selector porque son los unicos <header> que hay
   fuera de la cabecera, comprobado pagina por pagina. */
header:not(.car-paso-cab),
.sct-header,
.header-index {
    background: var(--rd-bg-warm);
}

/* Menu de categorias: mismas ocho entradas, tipografia y color nuevos. */
.megamenu > li > a,
.nav-categorias a,
.sct-menu a {
    font-family: var(--rd-sans) !important;
    letter-spacing: .06em;
    color: var(--rd-ink);
}
.megamenu > li > a:hover,
.nav-categorias a:hover {
    color: var(--rd-accent);
}

a {
    color: var(--rd-accent);
}
a:hover, a:focus {
    color: var(--rd-accent-dark);
}
::selection {
    background: #F6D9CE;
}

footer,
.sct-footer,
#footer {
    background: var(--rd-bg-warm);
    color: var(--rd-ink);
    font-family: var(--rd-sans) !important;
}
footer a,
.sct-footer a {
    color: var(--rd-ink);
}
footer a:hover,
.sct-footer a:hover {
    color: var(--rd-accent);
}

/* -----------------------------------------------------------------------------
 * 3. UTILES DEL REDISENO
 * -------------------------------------------------------------------------- */

.rd-wrap {
    padding-left: var(--rd-gutter);
    padding-right: var(--rd-gutter);
}

.rd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    font-family: var(--rd-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 15px 30px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
    text-decoration: none;
}
.rd-btn--primary {
    background: var(--rd-accent);
    color: #fff;
}
.rd-btn--primary:hover,
.rd-btn--primary:focus {
    background: var(--rd-accent-dark);
    color: #fff;
}
.rd-btn--ghost {
    background: transparent;
    color: var(--rd-ink);
    border: 1px solid var(--rd-line-3);
    padding: 15px 26px;
    font-weight: 500;
}
.rd-btn--ghost:hover {
    background: var(--rd-bg-soft);
    color: var(--rd-ink);
}
.rd-btn--ink {
    background: var(--rd-ink);
    color: #fff;
    padding: 14px 28px;
    font-size: 14px;
}
.rd-btn--ink:hover {
    background: #2C1D16;
    color: #fff;
}

.rd-kicker {
    display: block;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--rd-accent);
}

.rd-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rd-ink-4);
    margin-bottom: 7px;
}

.rd-field {
    width: 100%;
    border: 1px solid var(--rd-line);
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 14px;
    font-family: var(--rd-sans);
    color: var(--rd-ink);
    background: var(--rd-bg-soft);
}

.rd-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 26px;
    gap: 20px;
}
.rd-head h2 {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 34px;
    margin: 0;
    letter-spacing: -.01em;
}
.rd-head a {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 * 4. PORTADA — HERO
 * -------------------------------------------------------------------------- */

.rd-hero {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    background: var(--rd-bg-warm);
}
.rd-hero__text {
    padding: 84px 64px 84px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rd-hero__text .rd-kicker {
    margin-bottom: 22px;
}
.rd-hero h1 {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 64px;
    line-height: 1.04;
    margin: 0 0 22px;
    letter-spacing: -.02em;
    text-wrap: pretty;
}
.rd-hero p {
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--rd-ink-2);
    margin: 0 0 34px;
    max-width: 430px;
    text-wrap: pretty;
}
.rd-hero__cta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.rd-hero__notes {
    display: flex;
    gap: 26px;
    margin-top: 30px;
    font-size: 13.5px;
    color: var(--rd-ink-3);
    flex-wrap: wrap;
}
.rd-hero__media {
    position: relative;
    /*
     * 640 y no 560: la clienta pidio el banner "un poquito mas alto" (punto 1
     * de Diseño WEB.docx). Sube 80px, que es lo que hacia falta para que la
     * foto respire sin empujar el resto de la portada fuera de la primera
     * pantalla en un portatil de 1440x900.
     */
    min-height: 640px;
    overflow: hidden;
}
.rd-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* -----------------------------------------------------------------------------
 * HERO DE SOLO FOTO
 *
 * Los banners que sube la clienta YA traen dentro su titular, su bajada y su
 * boton. El hero de dos columnas los partia por la mitad -texto la izquierda,
 * foto recortada la derecha- y el titular dibujado se iba por el borde, que es
 * justo lo que reporto: subio la foto y el texto seguia ahi.
 *
 * Marcando "Hero · solo la foto" en el panel, el hero deja de ser una rejilla
 * de dos y pasa a ser la imagen entera.
 *
 * El object-fit vuelve a su valor inicial A PROPOSITO. La regla de arriba
 * recorta con `cover` para rellenar una columna de alto fijo; aqui no hay alto
 * que rellenar y recortar significaria comerse justo el texto que el banner
 * trae dibujado. La imagen manda su propia proporcion.
 * -------------------------------------------------------------------------- */
.rd-hero--solo-foto {
    display: block;
    background: var(--rd-bg-warm);
}
.rd-hero--solo-foto .rd-hero__media {
    position: relative;
    min-height: 0;
    overflow: hidden;
}
/* Cuando la foto viene de "Banners de la pagina" llega envuelta en un <a> -el
   que lleva el enlace y la medicion de clics- y en un <picture>. Los dos son
   ELEMENTOS EN LINEA: dejados asi, el width:100% de la imagen se mide contra
   una caja que se encoge con su contenido, y ademas la linea de texto anade
   por debajo el hueco del trazo descendente. Se pasan a bloque. */
.rd-hero--solo-foto .rd-hero__media > a,
.rd-hero--solo-foto .rd-hero__media picture {
    display: block;
    width: 100%;
}
.rd-hero--solo-foto .rd-hero__media img {
    width: 100%;
    height: auto;
    object-fit: initial;
}
/* Sin texto encima no hay nada que hacer legible: el velo solo ensuciaria la
   foto. Se apaga aqui tambien por si la casilla del velo quedo marcada. */
.rd-hero--solo-foto .rd-hero__media:after {
    display: none;
}

/* -----------------------------------------------------------------------------
 * 5. PORTADA — BUSCADOR EN TRES RESPUESTAS
 *
 * Es el filtro que ya existia (ocasion / destinatario / rango de precio), con
 * la ropa nueva. El formulario sigue apuntando al mismo sitio.
 * -------------------------------------------------------------------------- */

.rd-finder {
    padding: 0 var(--rd-gutter);
    /*
     * EL BUSCADOR YA NO SE MONTA SOBRE EL BANNER.
     *
     * Aqui habia -38px: la caja subia y tapaba los ultimos 38px de la foto. La
     * clienta lo reporto en el punto 3 de Diseño WEB.docx -"que no tape el
     * banner principal"-, y con la sombra que lleva la caja el solape se notaba
     * mucho.
     *
     * En movil ya se habia anulado por el mismo motivo (ver el bloque "EL
     * BUSCADOR NO SE COME EL BANNER" del final de la hoja); ahora vale para
     * todos los tamaños. Se deja un respiro de 28px en vez de pegarlo al borde.
     */
    margin-top: 28px;
    position: relative;
    z-index: 5;
}
.rd-finder__box {
    background: var(--rd-white);
    border: 1px solid var(--rd-line);
    border-radius: 18px;
    padding: 22px 26px;
    box-shadow: 0 18px 44px rgba(62, 42, 32, .1);
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr auto;
    gap: 18px;
    align-items: center;
}
.rd-finder__title {
    padding-right: 22px;
    border-right: 1px solid var(--rd-line);
}
.rd-finder__title strong {
    display: block;
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
}
.rd-finder__title span {
    display: block;
    font-size: 12px;
    color: var(--rd-ink-4);
    margin-top: 3px;
}
/*
 * Las hojas viejas ponen `label { position:absolute }` y `select { display:flex }`
 * para su propio buscador. Sin devolverlos a su sitio, las tres preguntas se
 * amontonan encima del titulo. El min-width:0 es para que una opcion larga no
 * infle la columna: sin el, la reticula se pasa del ancho y el boton se queda
 * en cero.
 */
.rd-finder__box > * {
    min-width: 0;
}
.rd-finder__box label {
    display: block;
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}
.rd-finder__box select.rd-field {
    display: block;
    width: 100%;
    height: auto;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238A7466' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.rd-finder__box .rd-btn {
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 * 6. PORTADA — VENTAJAS
 * -------------------------------------------------------------------------- */

/*
 * LOS SELLOS VAN EN LA BARRA MARRON.
 *
 * Lo pidio la clienta al ver la portada: "creeria que los sellos de confianza
 * pueden verse bien en esta barrita marron, si puedes lo pruebas porfa",
 * señalando la de "Como llega tu sorpresa".
 *
 * Funciona porque los iconos que ella subio son marron -#6B4423- pero van
 * dentro de un DISCO BLANCO: el disco se queda blanco sobre el marron y el
 * dibujo se sigue leyendo igual. Lo unico que hay que aclarar es el texto.
 *
 * Se usa el mismo marron que .rd-steps -var(--rd-ink)- y no uno nuevo, para
 * que las dos barras se lean como la misma familia y no como dos marrones que
 * no acaban de casar.
 */
.rd-perks {
    padding: 54px 0 0;
}
.rd-perks__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 44px;
    background: var(--rd-ink);
    color: var(--rd-bg-warm);
    padding: 52px var(--rd-gutter);
}
/*
 * El titular y la bajada se aclaran. Van con el mismo color que usa la barra
 * de los pasos, que es la que ella señalo.
 */
.rd-perks__grid .rd-perk strong,
.rd-perks__grid .rd-perk span:not(.rd-perk__icon) {
    color: var(--rd-bg-warm);
}

/* --------------------------------------------------------------------------
   SELLO GRANDE: EL ICONO ARRIBA, NO AL COSTADO

   Hasta el 14/09/2026 el icono iba a la izquierda del texto. Con cuatro
   columnas cada celda mide unos 300px, asi que el ANCHO era el techo del
   dibujo: no podia crecer sin comerse la linea de texto. Y los iconos que
   mando la clienta llevan texto dentro -«20 AÑOS», «FRESCO 100 % NATURAL»-,
   que a ese tamaño no se leia.

   Poniendolo encima y centrado, el limite deja de ser el ancho de la celda y
   el dibujo sube a 66px dentro de un disco de 112. La franja pasa de 116 a
   unos 230px de alto: es lo que cuesta, y se decidio asumirlo.
   -------------------------------------------------------------------------- */
.rd-perk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    min-width: 0;
}
/* EL SELECTOR LLEVA DOS CLASES A PROPOSITO.

   Mas abajo hay `.rd-perk span { display: block }` para la bajada, y el disco
   TAMBIEN es un <span>: con `.rd-perk__icon` a secas -una clase- perdia la
   especificidad contra `.rd-perk span` -clase + etiqueta- y el disco se
   quedaba en block. Con display:block el `align-items:center` no hace nada,
   asi que el dibujo se pegaba arriba a la izquierda en vez de centrarse.

   Venia de antes: con el disco de 56 y el icono de 26 se notaba poco, pero
   estaba descentrado igual. Al subir a 112 quedo a la vista. */
.rd-perk > .rd-perk__icon {
    width: 112px;
    height: 112px;
    flex: none;
    border-radius: 50%;
    background: var(--rd-white);
    border: 1px solid var(--rd-line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Los 26px son la medida de los iconos DE RESPALDO, los cuatro trazos que
   dibuja index.php cuando la fila no tiene imagen: estan hechos sobre un
   viewBox de 24 y a ese tamaño se leen bien. */
.rd-perk__icon svg {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

/* Los que sube la clienta desde el panel se llevan el disco entero: 66 de 112,
   que deja aire suficiente para que el borde no toque el trazo. Es el tamaño
   en el que se lee el texto que llevan dentro. */
.rd-perk__icon img {
    width: 66px;
    height: 66px;
    object-fit: contain;
    display: block;
}
/* El titulo pasa a la serif de la portada -la misma variable que usan el heroe
   y los demas titulares-, para que la franja no quede con una tipografia que
   no sale en ninguna otra parte de la pagina.

   El `!important` no es por gusto: arriba de esta misma hoja hay una regla
   global -`body :not(:where(...))`- que impone `--rd-sans` con !important a
   todo el documento. Sin repetirlo aqui, el titulo salia en Karla. Es el mismo
   apaño que ya usan los otros dos titulares serif del archivo. */
.rd-perk strong {
    display: block;
    font-family: var(--rd-serif) !important;
    font-size: 20px;
    font-weight: 500;
    color: var(--rd-ink);
    line-height: 1.25;
    letter-spacing: -.005em;
    margin-bottom: 7px;
}
.rd-perk span {
    display: block;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--rd-ink-2);
    text-wrap: pretty;
}

/* -----------------------------------------------------------------------------
 * 8 bis. PORTADA — PASTILLAS DE CATEGORIA EN "LOS MAS REGALADOS"
 *
 * La activa va en marron LLENO y las demas en crema con filete: es lo que hace
 * que se lea de un vistazo cual esta puesta, que es donde fallan casi todos
 * estos filtros. El numero de al lado es cuantos productos tiene ese catalogo.
 *
 * En movil la fila se arrastra de lado y ninguna pastilla se parte en dos
 * lineas, que es justo el defecto que la clienta reporto en el menu con
 * "REGALOS CORPORATIVOS".
 * -------------------------------------------------------------------------- */

.rd-pastillas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rd-line-2, #E4D8CE);
}
.rd-pastilla {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--rd-line-2, #E4D8CE);
    background: var(--rd-bg-soft, #FBF6F1);
    color: var(--rd-ink-2, #6B5346);
    border-radius: 999px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.rd-pastilla:hover {
    border-color: var(--rd-brown, #8B5E34);
    color: var(--rd-ink, #3E2A20);
}
.rd-pastilla.is-activa {
    background: var(--rd-brown, #8B5E34);
    border-color: var(--rd-brown, #8B5E34);
    color: #fff;
}
.rd-pastilla__n {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: #EFE5DB;
    color: var(--rd-ink-3, #8A7466);
}
.rd-pastilla.is-activa .rd-pastilla__n {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
/* Mientras llegan las tarjetas, la rejilla se atenua en vez de dar un salto. */
.rd-pastillas--cargando + #products_container,
.rd-pastillas--cargando ~ #rd-productos-filtrado {
    opacity: .45;
    transition: opacity .15s ease;
}
.rd-pastillas__pie {
    margin: 6px 0 0;
    text-align: center;
}
.rd-pastillas__pie a {
    font-size: 14.5px;
    font-weight: 600;
}
.rd-pastillas__vacio {
    width: 100%;
    border: 1px dashed var(--rd-line-2, #E4D8CE);
    border-radius: 16px;
    padding: 46px 24px;
    text-align: center;
    color: var(--rd-ink-3, #8A7466);
}

/* -----------------------------------------------------------------------------
 * 6 bis. PORTADA — DESCUBRE NUESTROS CATALOGOS
 *
 * Punto 14 de Diseño WEB.docx. La referencia que mando la clienta -una captura
 * de enviaflores.com- tiene tres rasgos que el texto no menciona y que son los
 * que le dan el aire: la foto es VERTICAL, el nombre va DENTRO de la foto en
 * blanco, y la fila es un CARRUSEL, no una rejilla fija.
 *
 * Se resuelve con scroll-snap y no con una libreria: la fila ya se arrastra con
 * el dedo en movil y con el trackpad en escritorio sin una linea de JavaScript,
 * y las flechas solo se encienden cuando de verdad hay algo que desplazar. Si
 * el JS fallara, la seccion sigue siendo usable.
 * -------------------------------------------------------------------------- */

.rd-catalogos {
    position: relative;
    padding: 64px var(--rd-gutter) 0;
}
.rd-head--centrado {
    display: block;
    text-align: center;
}
.rd-catalogos__pista {
    /*
     * FLEX Y NO GRID, y no es preferencia.
     *
     * Esto empezo con `display:grid` + `grid-auto-flow:column` +
     * `grid-auto-columns:minmax(230px,1fr)`. Se veia bien y la caja declaraba
     * el desbordamiento correcto -scrollWidth 968 contra clientWidth 560-, pero
     * NO SE PODIA DESPLAZAR: ni las flechas, ni scrollBy(), ni asignar
     * scrollLeft a mano. Se descarto que fuera el scroll-snap y los ancestros;
     * medido en el navegador, con grid la caja no generaba area desplazable.
     * Cambiado a flex, el mismo scrollBy salta a 246 -el anclaje de la segunda
     * tarjeta- a la primera.
     */
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* Edge viejo */
    padding-bottom: 4px;
}
/*
 * La barra de scroll nativa se esconde. En la propia maqueta la clienta marco
 * que se veia fea en la fila de ocasiones, asi que aqui no se repite.
 */
.rd-catalogos__pista::-webkit-scrollbar {
    display: none;
}
.rd-catalogo {
    position: relative;
    display: block;
    /*
     * TRES Y PICO A LA VISTA, A PROPOSITO.
     *
     * Antes era `flex: 1 0 230px`: las tarjetas crecian hasta repartirse todo
     * el ancho, asi que con cuatro catalogos cabian las cuatro, la fila no se
     * desbordaba y la flecha NUNCA aparecia. La clienta la pidio expresamente
     * -"la flechita a la derecha para que puedan ver los demas catalogos"-, y
     * una flecha que no sale no sirve de nada.
     *
     * Con 30% entran tres enteras y la cuarta asoma, que es justo lo que hace
     * el ejemplo que ella mando: se ve que la fila sigue y la flecha tiene
     * sentido. En cuanto haya mas de tres catalogos, la flecha esta ahi.
     */
    flex: 0 0 30%;
    scroll-snap-align: start;
    border-radius: 16px;
    overflow: hidden;
    background: var(--rd-bg-soft, #FBF6F1);
    text-decoration: none;
}
.rd-catalogo__img {
    display: block;
    /*
     * CUADRADA. Lo pidio la clienta: "esta parte debe ser asi tambien, con las
     * fotos cuadradas". Estaba en 3/4 -vertical-, leyendo el recorte de la
     * captura que mando; ella aclaro que las queria cuadradas.
     */
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.rd-catalogo__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.rd-catalogo:hover .rd-catalogo__img img {
    transform: scale(1.04);
}
/*
 * El nombre va DENTRO de la foto, arriba a la izquierda. El degradado es lo que
 * lo hace legible sobre cualquier foto: sin el, un nombre blanco sobre una caja
 * de desayuno clara no se lee.
 */
.rd-catalogo::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 46%;
    background: linear-gradient(to bottom, rgba(38, 24, 17, .55), rgba(38, 24, 17, 0));
    pointer-events: none;
}
.rd-catalogo__name {
    position: absolute;
    top: 18px;
    left: 20px;
    right: 20px;
    z-index: 1;
    color: #fff;
    font-family: var(--rd-serif);
    font-size: 25px;
    line-height: 1.15;
    text-shadow: 0 1px 12px rgba(38, 24, 17, .45);
}
.rd-catalogos__flecha {
    position: absolute;
    top: calc(50% + 26px);
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--rd-line, #E4D8CE);
    background: #fff;
    color: var(--rd-ink, #3E2A20);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(62, 42, 32, .16);
}
.rd-catalogos__flecha:hover {
    background: var(--rd-bg-soft, #FBF6F1);
}
.rd-catalogos__flecha[hidden] {
    display: none;
}
.rd-catalogos__flecha--izq { left: calc(var(--rd-gutter) - 14px); }
.rd-catalogos__flecha--der { right: calc(var(--rd-gutter) - 14px); }

/* -----------------------------------------------------------------------------
 * 7. PORTADA — REGALA POR OCASION
 * -------------------------------------------------------------------------- */

.rd-occasions {
    padding: 64px var(--rd-gutter) 0;
}
.rd-occasions__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.rd-occasion {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--rd-line);
    color: var(--rd-ink);
    transition: border-color .18s ease;
}
.rd-occasion:hover {
    border-color: var(--rd-line-3);
    color: var(--rd-ink);
}
.rd-occasion__img {
    display: block;
    height: 170px;
    overflow: hidden;
    background: var(--rd-bg-warm);
}
.rd-occasion__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rd-occasion__name {
    display: block;
    padding: 14px 16px;
    font-size: 14.5px;
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
 * 8. PORTADA / CATALOGO — TARJETA DE PRODUCTO
 *
 * El marcado es el de siempre (productos.php), compartido con el catalogo y
 * con el scroll infinito. Aqui solo se le cambia la ropa.
 * -------------------------------------------------------------------------- */

.rd-products {
    padding: 72px var(--rd-gutter) 0;
}

/*
 * La tarjeta blanca se dibuja con un ::before y no con un contenedor.
 *
 * El marcado no tiene donde ponerla: dentro de la columna cuelgan tres
 * hermanos sueltos (la capa de hover, la foto y los datos) y ningun envoltorio
 * comun. Meterlo obligaria a tocar productos.php, que lo comparten la portada,
 * el catalogo, el buscador y el scroll infinito. Un ::before metido por el
 * relleno de la columna hace de tarjeta sin tocar una etiqueta.
 */
.content-products-img {
    position: relative;
    padding: 0 10px 20px;
}
.content-products-img:before {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    bottom: 20px;
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: 16px;
    transition: box-shadow .2s ease;
}
.content-products-img:hover:before {
    box-shadow: 0 14px 34px rgba(62, 42, 32, .1);
}
.content-products-img > *{
    position: relative;
}

.content-products-foto {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--rd-bg-warm);
    position: relative;
    border-radius: 15px 15px 0 0;
}
.content-products-foto img.img-prod{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.description-products-index {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.description-products-index,
.description-products-index ul{
    text-align: left;
}
.description-products-index ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}
.title-dcpt-product a{
    font-family: var(--rd-serif) !important;
    font-size: 20px;
    line-height: 1.25;
    color: var(--rd-ink);
    text-transform: none;
    font-weight: 400;
}
.precio-prd {
    font-size: 17px;
    font-weight: 700;
    color: var(--rd-ink);
}
.precio-antes {
    font-size: 14px;
    font-weight: 400;
    color: var(--rd-ink-4);
    text-decoration: line-through;
    margin-top: auto;
}
.precio-ahora {
    color: var(--rd-ink) !important;
}
.precio-prd:not(.precio-antes){
    margin-top: auto;
    padding-top: 14px;
}

/* El "Regalar" del diseno. Va dentro del mismo li que el precio. */
.precio-ahora {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.rd-pill-regalar {
    font-size: 13px;
    font-weight: 600;
    color: var(--rd-accent);
    border: 1px solid var(--rd-accent-line);
    border-radius: 999px;
    padding: 7px 15px;
    white-space: nowrap;
}
a:hover > .rd-pill-regalar,
.content-products-img:hover .rd-pill-regalar {
    background: var(--rd-accent);
    color: #fff;
    border-color: var(--rd-accent);
}

/* -----------------------------------------------------------------------------
 * 9. PORTADA — COMO LLEGA TU SORPRESA
 * -------------------------------------------------------------------------- */

.rd-steps {
    margin: 80px 0 0;
    background: var(--rd-ink);
    color: var(--rd-bg-warm);
    padding: 66px var(--rd-gutter);
}
.rd-steps__inner {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 60px;
    align-items: start;
}
.rd-steps h2 {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 36px;
    margin: 0 0 16px;
    line-height: 1.15;
    color: var(--rd-bg-warm);
}
.rd-steps__intro {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(247, 233, 226, .72);
    margin: 0;
}
.rd-steps__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.rd-step__n {
    font-family: var(--rd-serif) !important;
    font-size: 15px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(247, 233, 226, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.rd-step__t {
    font-size: 16.5px;
    font-weight: 600;
    margin-bottom: 8px;
}
.rd-step__d {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(247, 233, 226, .66);
}

/* -----------------------------------------------------------------------------
 * 10. PORTADA — TESTIMONIOS
 * -------------------------------------------------------------------------- */

/*
 * LA ULTIMA SECCION NO SE PEGA AL PIE.
 *
 * Todas las secciones de la portada cierran con padding-bottom 0 y se apoyan
 * en el margen superior de la siguiente. La ultima no tiene siguiente, asi que
 * quedaba pegada al pie: al mover los testimonios al final -el orden que pidio
 * la clienta- sus tarjetas blancas quedaron cortadas por el crema del pie.
 *
 * Se resuelve por POSICION y no dandole margen a los testimonios: asi vale
 * para la que quede ultima el dia que se vuelva a reordenar, que en esta
 * portada ya ha pasado dos veces.
 */
.rd-home > section:last-child {
    padding-bottom: 80px;
}

.rd-reviews {
    padding: 72px var(--rd-gutter) 0;
}
.rd-reviews > h2 {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 34px;
    margin: 0 0 30px;
    text-align: center;
}
.rd-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.rd-review {
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: 16px;
    padding: 26px 24px;
}
.rd-review__stars {
    display: flex;
    gap: 5px;
    margin-bottom: 16px;
}
.rd-review__stars i {
    width: 8px;
    height: 8px;
    background: var(--rd-gold);
    border-radius: 50%;
    display: block;
}
.rd-review p {
    font-family: var(--rd-serif) !important;
    font-size: 18.5px;
    line-height: 1.55;
    margin: 0 0 18px;
    text-wrap: pretty;
}
.rd-review__who {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rd-ink-4);
}

/* -----------------------------------------------------------------------------
 * 11. PORTADA — INSTAGRAM
 * -------------------------------------------------------------------------- */

.rd-ig {
    padding: 72px 0 0;
}
.rd-ig__head {
    text-align: center;
    margin-bottom: 22px;
}
.rd-ig__head h2 {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 30px;
    margin: 0 0 6px;
}
.rd-ig__head a {
    font-size: 14px;
}
.rd-ig__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.rd-ig__grid li {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.rd-ig__grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* -----------------------------------------------------------------------------
 * 12. RESPONSIVE
 *
 * El prototipo trae una pantalla movil aparte. Aqui se resuelve con puntos de
 * corte sobre la misma retícula: menos codigo que mantener y el contenido es
 * el mismo.
 * -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    :root { --rd-gutter: 32px; }
    .rd-hero h1 { font-size: 52px; }
    .rd-occasions__grid { grid-template-columns: repeat(3, 1fr); }
    .rd-ig__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
    .rd-hero { grid-template-columns: 1fr; }
    .rd-hero__text { padding: 56px 32px; }
    .rd-hero__media { min-height: 340px; }
    .rd-finder__box {
        grid-template-columns: 1fr 1fr;
    }
    .rd-finder__title {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: 1px solid var(--rd-line);
        padding: 0 0 14px;
    }
    .rd-finder .rd-btn { grid-column: 1 / -1; }
    .rd-perks__grid { grid-template-columns: repeat(2, 1fr); }
    .rd-steps__inner { grid-template-columns: 1fr; gap: 34px; }
    .rd-steps__list { grid-template-columns: 1fr; gap: 24px; }
    .rd-reviews__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    :root { --rd-gutter: 18px; }
    .rd-hero h1 { font-size: 38px; }
    .rd-hero p { font-size: 16px; }
    .rd-hero__text { padding: 40px 18px; }
    .rd-finder { margin-top: -24px; }
    .rd-finder__box { grid-template-columns: 1fr; padding: 18px; }
    .rd-perks__grid { grid-template-columns: 1fr; gap: 18px; }
    .rd-occasions__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .rd-occasion__img { height: 130px; }
    .rd-head h2, .rd-reviews > h2 { font-size: 27px; }
    .rd-ig__grid { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------------------------------------
 * 13. FICHA DE PRODUCTO
 *
 * El marcado es el de siempre: la galeria con sus pestanas, el calendario, los
 * complementos y el formulario que envia al carrito no se tocaron. Lo unico
 * nuevo en la ficha es la dedicatoria y el bloque de "Suele regalarse junto
 * con"; todo lo demas de aqui es ropa.
 *
 * La galeria cambia de forma sin cambiar de marcado: el diseno pone la foto
 * grande arriba y las miniaturas debajo, y el marcado las tenia en una
 * columna a la izquierda. Con `order` y un ancho del 100% se dan la vuelta.
 * -------------------------------------------------------------------------- */

.rd-ficha {
    padding: 34px var(--rd-gutter) 0;
    background: var(--rd-bg);
}

.rd-ficha > .row {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    margin: 0;
}

/*
 * El `min-width: 0` no es opcional. Un hijo de rejilla arranca con
 * min-width:auto, o sea que NO puede encogerse por debajo del ancho minimo de
 * su contenido: en un telefono estas dos columnas se quedaban en 432px dentro
 * de una pista de 359 y el texto salia cortado por la derecha. No se veia
 * barra horizontal porque <main> lleva overflow-x:hidden, que recorta en vez
 * de dejar desplazar: por eso medir scrollWidth daba cero y la pagina estaba
 * rota igual.
 */
.rd-ficha .gallery-detail,
.rd-ficha .detail-detail {
    max-width: none;
    flex: none;
    width: auto;
    min-width: 0;
    padding: 0;
}
.rd-ficha .detail-detail > .col,
.rd-ficha .detail-detail .cam1,
.rd-ficha .detail-detail .cam2 {
    min-width: 0;
}

/* --- Galeria: foto grande arriba, miniaturas debajo --- */
.rd-ficha .gallery-detail > .row {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.rd-ficha .gallery-detail .regalb {
    order: 2;
    max-width: 100%;
    flex: none;
    width: 100%;
    padding: 0;
    margin-top: 10px;
}
.rd-ficha .gallery-detail > .row > .col-12.col-md-10 {
    order: 1;
    max-width: 100%;
    flex: none;
    width: 100%;
    padding: 0 !important;
}
.rd-ficha .gallery-detail .tab-content .tab-pane img,
.rd-ficha .gallery-detail .tab-content .gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rd-ficha .gallery-detail .tab-content {
    border-radius: 18px;
    overflow: hidden;
    background: var(--rd-bg-warm);
    aspect-ratio: 1 / 1;
}
.rd-ficha .gallery-detail .tab-content .tab-pane {
    height: 100%;
}

/* Las miniaturas pasan de columna a fila de cuatro. */
/*
 * La tira de miniaturas es una `.row` de Bootstrap, asi que trae los margenes
 * negativos de -15px a cada lado: se salia 23px por la derecha y la cuarta
 * miniatura quedaba cortada contra el borde de la pantalla.
 *
 * `auto-fill` en vez de cuatro columnas fijas: con cinco fotos la quinta baja
 * a una segunda fila alineada con las de arriba, en vez de dejar el hueco
 * descuadrado.
 */
.rd-ficha .gallery-detail #v-pills-tab {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 10px;
    margin: 0 !important;
    padding: 0;
    width: 100%;
    max-width: 100%;
}
.rd-ficha .gallery-detail #v-pills-tab .nav-link {
    max-width: 100%;
    flex: none;
    width: auto;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    aspect-ratio: 1 / 1;
    background: var(--rd-bg-warm);
}
.rd-ficha .gallery-detail #v-pills-tab .nav-link.active {
    border-color: var(--rd-accent);
    background: var(--rd-bg-warm);
}
.rd-ficha .gallery-detail #v-pills-tab .nav-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Columna de datos --- */
.rd-ficha .detail-detail > .col {
    padding: 6px 0 0;
}
.rd-ficha .detail-detail > .col > .font-brandonB:first-of-type,
.rd-ficha .detail-detail span.font-brandonB:first-of-type {
    display: block;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rd-accent);
    margin-bottom: 14px;
}
.rd-ficha .detail-detail > .col > .font-brandonB:first-of-type a {
    color: var(--rd-accent);
}
/*
 * El !important no es pereza: index.css le da al h1 de la ficha 12px y
 * versales desde `.detail-detail .col h1`, y ese selector pesa mas que
 * cualquier cosa razonable que se escriba aqui.
 */
.rd-ficha .detail-detail h1 {
    font-family: var(--rd-serif) !important;
    font-weight: 400 !important;
    font-size: 44px !important;
    line-height: 1.08 !important;
    margin: 0 0 12px !important;
    letter-spacing: -.015em !important;
    color: var(--rd-ink) !important;
    text-transform: none !important;
}

/*
 * Las hojas viejas ponen `label { position:absolute }` para su propio
 * formulario. La dedicatoria es un label, asi que sin esto se despega de la
 * tarjeta y se monta encima del campo de fecha.
 */
.rd-personaliza label,
.rd-dedicatoria {
    position: static !important;
    width: 100%;
    max-width: none;
}
.rd-ficha .preciodetal {
    gap: 14px;
    margin-bottom: 20px;
}
.rd-ficha .h3-prctotl {
    font-family: var(--rd-sans) !important;
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    color: var(--rd-ink);
}
.rd-ficha .rd-nota-precio {
    display: block;
    font-size: 13px;
    color: var(--rd-ink-3);
    margin: -14px 0 20px;
}
.rd-ficha .h3-prctotl.price-normal {
    font-size: 18px;
    font-weight: 400;
    color: var(--rd-ink-4);
    text-decoration: line-through;
}

/* La descripcion administrada hace de parrafo y de lista "Incluye". */
.rd-ficha .detail-detail ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 20px;
    list-style: none;
    margin: 0 0 20px;
    padding: 18px 0 0;
    border-top: 1px solid var(--rd-line);
}
/*
 * La lista de "Incluye" traia un bullet.png de fondo con 23px de sangria. Se
 * quita: el punto ahora es el circulo del diseno, y si se dejan los dos cada
 * linea sale con dos vinetas.
 */
/*
 * El punto va posicionado, no como elemento flex.
 *
 * Con `display:flex` en el li, cada <span> que la clienta escribe dentro de la
 * descripcion se convertia en una columna aparte: la linea de la taza salia
 * partida en tres bloques uno al lado del otro. Con el punto absoluto y una
 * sangria, el contenido del li fluye como texto normal, que es lo que es.
 */
.rd-ficha .detail-detail ul li {
    position: relative;
    padding-left: 16px !important;
    font-size: 14.5px;
    line-height: 1.5;
    background-image: none !important;
}
.rd-ficha .detail-detail ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    background: var(--rd-accent-dot);
    border-radius: 50%;
}
.rd-ficha .detail-detail p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--rd-ink-2);
}

/* --- Tarjeta "Personaliza la entrega" --- */
.rd-personaliza {
    background: var(--rd-white);
    border: 1px solid var(--rd-line);
    border-radius: 16px;
    padding: 22px;
    margin: 18px 0 22px !important;
}
.rd-personaliza__titulo {
    font-family: var(--rd-serif) !important;
    font-size: 20px;
    margin-bottom: 16px;
}
.rd-personaliza .entrega-campo {
    margin-bottom: 12px;
}
.rd-personaliza .entrega-input,
.rd-personaliza select,
.rd-personaliza input[type="text"],
.rd-personaliza textarea {
    width: 100%;
    border: 1px solid var(--rd-line);
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 14px;
    font-family: var(--rd-sans);
    background: var(--rd-bg-soft);
    color: var(--rd-ink);
}
.rd-personaliza .select-detail {
    margin-top: 12px;
}
.rd-personaliza .input-group {
    margin-top: 12px !important;
    flex-wrap: nowrap;
}
.rd-personaliza .input-group .span-taza {
    background: var(--rd-bg-warm);
    border: 1px solid var(--rd-line);
    border-right: none;
    border-radius: 10px 0 0 10px;
    padding: 0 12px;
    display: flex;
    align-items: center;
}
.rd-personaliza .input-group .input-taza {
    border-radius: 0 10px 10px 0;
    border-left: none;
}

.rd-dedicatoria {
    display: block;
    margin: 14px 0 0;
    width: 100%;
}
/* El color va forzado: las hojas viejas pintan de naranja todos los label. */
.rd-personaliza .rd-dedicatoria .rd-dedicatoria__label {
    display: block;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--rd-ink-4) !important;
    margin-bottom: 6px;
    letter-spacing: 0;
    text-transform: none;
}
.rd-dedicatoria textarea {
    min-height: 76px;
    resize: vertical;
}
.rd-dedicatoria__contador,
.rd-dedicatoria__contador span {
    display: inline;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--rd-ink-4) !important;
    line-height: 1.4;
}
.rd-dedicatoria__contador {
    display: block;
    margin-top: 6px;
}

/*
 * El bloque de la derecha va dentro de un `.col-xl-9`, o sea al 75% de la
 * columna. En el diseno ocupa el ancho entero: la tarjeta de personalizacion y
 * el boton se quedaban estrechos y el texto del boton se partia en tres lineas.
 */
.rd-ficha .detail-detail .cam2,
.rd-ficha .detail-detail .cam1 {
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
}

/* --- Cantidad y comprar --- */
.rd-ficha .rd-compra-fila {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
    margin: 0;
}

.rd-cantidad {
    display: flex;
    align-items: center;
    border: 1px solid var(--rd-line-3);
    border-radius: 999px;
    overflow: hidden;
    flex: none;
    background: #fff;
}
.rd-cantidad__btn {
    border: none;
    background: transparent;
    padding: 13px 16px;
    font-size: 16px;
    line-height: 1;
    color: var(--rd-ink);
    text-decoration: none;
    user-select: none;
}
.rd-cantidad__btn:hover {
    color: var(--rd-accent);
}
.rd-cantidad input {
    width: 40px;
    border: none !important;
    background: transparent;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--rd-ink);
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}
.rd-cantidad input::-webkit-outer-spin-button,
.rd-cantidad input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rd-compra-boton {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

/*
 * El !important no es opcional: index.css declara
 * `.btn-comprar-detail { background:#796857!important; border-radius:inherit }`.
 * Sin repetirlo, el boton se queda marron y cuadrado, que es como lo vio la
 * clienta el 2026-09-10.
 */
.rd-ficha .btn-comprar-detail {
    background: var(--rd-accent) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 16px 30px !important;
    font-size: 15.5px !important;
    font-weight: 600;
    color: #fff !important;
    width: 100%;
    height: auto !important;
    gap: 10px;
    white-space: nowrap;
    /*
     * Sin esto el texto sale espaciado letra a letra -index.css le pone
     * letter-spacing al boton- y no cabe: se veia "gar al carrito", cortado.
     */
    letter-spacing: .01em !important;
    text-indent: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 !important;
    float: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-ficha .btn-comprar-detail .icon-icon-cart,
.rd-ficha .btn-comprar-detail span {
    color: #fff !important;
}
.rd-ficha .btn-comprar-detail .icon-icon-cart {
    font-size: 18px;
    line-height: 1;
}
.rd-ficha .btn-comprar-detail:hover,
.rd-ficha .btn-comprar-detail:focus {
    background: var(--rd-accent-dark) !important;
    color: #fff !important;
}

/*
 * Los dos sellos de la zona "ficha" no llevan icono cargado, y el helper de
 * confianza pinta entonces la inicial dentro de un circulo: salian una "T" y
 * una "P" sueltas. El diseno los quiere como dos lineas de texto a secas.
 */
.rd-ficha .sct-confianza,
.rd-ficha [class*="confianza--ficha"],
.rd-ficha [class*="confianza"] {
    display: flex;
    gap: 26px;
    margin-top: 20px;
    font-size: 13.5px;
    color: var(--rd-ink-3);
    flex-wrap: wrap;
    background: none;
    border: none;
    padding: 0;
}
/*
 * BOTON Y CANTIDAD A LA MISMA ALTURA (02/10/2026).
 *
 * El boton salia de 77px y la cantidad de 44: "se ve gigante". La causa es
 * index.css, `.detail-detail span span { font-size: 30px }`, que alcanza al
 * precio de dentro del boton (#rd-total-compra) y lo infla. El precio vuelve
 * al cuerpo del texto, en negrita, y los dos controles miden 52px.
 */
.rd-ficha .btn-comprar-detail span {
    font-size: inherit !important;
}
.rd-ficha .btn-comprar-detail #rd-total-compra {
    font-weight: 700;
}
.rd-ficha .btn-comprar-detail {
    height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.rd-ficha .rd-cantidad {
    height: 52px;
}
.rd-ficha [class*="confianza"] [class*="icono"],
.rd-ficha [class*="confianza"] [class*="inicial"],
.rd-ficha [class*="confianza"] i,
.rd-ficha [class*="confianza"] svg,
.rd-ficha [class*="confianza"] li:before,
.rd-ficha [class*="confianza"] [class*="item"]:before {
    display: none !important;
    content: none !important;
}
.rd-ficha [class*="confianza"] > * {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
}
.rd-ficha [class*="confianza"] [class*="titulo"] {
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: var(--rd-ink-3) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* -----------------------------------------------------------------------------
 * 14. COMPLEMENTA TU SORPRESA
 *
 * El bloque que el diseno no traia y que aqui se conserva porque vende: son
 * dieciocho complementos con foto, precio y casilla. Solo cambia la ropa.
 * -------------------------------------------------------------------------- */

.complement-pedido {
    padding: 56px 0 0;
    background: var(--rd-bg);
}
/*
 * El carrusel llevaba las tarjetas pegadas a los dos bordes de la pantalla.
 * El aire va en el contenedor y no en las tarjetas, para que owl siga
 * calculando bien los anchos.
 */
.complement-pedido .gallery-complement {
    padding-left: var(--rd-gutter);
    padding-right: var(--rd-gutter);
}
/*
 * La .row de dentro trae los margenes negativos de Bootstrap (-15px a cada
 * lado) y se comia el aire que acabamos de poner: las tarjetas volvian a
 * tocar el borde de la pantalla.
 */
.complement-pedido .gallery-complement > .row {
    margin-left: 0;
    margin-right: 0;
}
.complement-pedido .gallery-complement > .row > * {
    padding-left: 0;
    padding-right: 0;
}

/*
 * FLECHAS DEL CARRUSEL (02/10/2026). index.css coloca .owl-nav con un `top`
 * fijo de ~455px y las flechas son el caracter ‹ › a 80px: quedaban en el
 * tercio de arriba, y la izquierda montada sobre la primera tarjeta. Ahora son
 * los mismos circulos blancos de "Descubre nuestros Catalogos", centrados en
 * la altura de la tarjeta y por fuera del carrusel, en el aire del gutter.
 */
.complement-pedido .owl-carousel .owl-nav {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none;
}
.complement-pedido .owl-carousel .owl-nav button.owl-prev,
.complement-pedido .owl-carousel .owl-nav button.owl-next {
    position: absolute !important;
    top: 0 !important;
    transform: translateY(-50%);
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--rd-line, #E4D8CE) !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(62, 42, 32, .16);
    color: var(--rd-ink, #3E2A20) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 3;
}
.complement-pedido .owl-carousel .owl-nav button.owl-prev { left: -54px !important; }
.complement-pedido .owl-carousel .owl-nav button.owl-next { right: -54px !important; }
/* Selector largo a proposito: index.css trae
 * `.owl-theme.owl2 .owl-nav button.owl-next span { font-size: 5em !important }`
 * y solo se le gana con mas especificidad. */
.complement-pedido .owl-theme.owl2 .owl-nav button.owl-prev span,
.complement-pedido .owl-theme.owl2 .owl-nav button.owl-next span {
    font-size: 26px !important;
    line-height: 1 !important;
    height: auto !important;
    margin-top: -3px;
    color: inherit !important;
}
.complement-pedido .owl-carousel .owl-nav button:hover {
    background: var(--rd-bg-soft, #FBF6F1) !important;
}
/* La flecha que no lleva a ningun lado (al inicio o al final) se oculta en
 * vez de verse de otro tono: dos flechas distintas parecian dos botones
 * distintos. */
.complement-pedido .owl-carousel .owl-nav button.disabled {
    visibility: hidden !important;
}

/*
 * El nombre y la medida se limitan a dos lineas y una.
 *
 * Todas las tarjetas miden lo que la mas alta -es un carrusel, y desiguales
 * quedan peor-, asi que un complemento con nombre largo estiraba a las demas
 * y dejaba un palmo de blanco debajo del precio.
 */
.complement-pedido .title-prod-cmpl {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.complement-pedido .title-prod-cmpl small {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.complement-pedido .title-complement {
    transform: none !important;
    text-align: left;
    padding: 0 var(--rd-gutter);
    margin-bottom: 22px;
}
.complement-pedido .title-complement h2 {
    font-family: var(--rd-serif) !important;
    font-weight: 400 !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
    color: var(--rd-ink) !important;
    transform: none !important;
    margin: 0 !important;
    letter-spacing: -.01em;
}

/*
 * Las tarjetas del carrusel se cortaban por abajo: se perdian el precio y el
 * boton AGREGAR.
 *
 * Owl fija a mano la altura de .owl-stage-outer con la medida que tomo al
 * arrancar, cuando las fotos todavia no ocupaban lo suyo. En el telefono
 * dejaba 305px para tarjetas de casi 400. Se le devuelve la altura al
 * contenido y se estiran los items para que todas midan igual.
 */
.complement-pedido .owl-stage-outer {
    height: auto !important;
}
.complement-pedido .owl-stage {
    display: flex;
    align-items: stretch;
}
.complement-pedido .owl-item {
    height: auto !important;
    display: flex;
}
/*
 * La tarjeta ocupa TODO el alto del item. Sin el height:100%, owl estira el
 * item hasta la altura de la tarjeta mas alta y la nuestra se quedaba en 339
 * dentro de 403: 64px de hueco muerto debajo de cada una.
 */
.complement-pedido .owl-item > .item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.complement-pedido .owl-dots {
    margin-top: 18px;
}
/*
 * La tarjeta CRECE con su contenido.
 *
 * Las hojas viejas le fijan la altura a .img-gallery y con `overflow:hidden`
 * -que pusimos aqui para redondear las esquinas- el recorte se comia el
 * precio y el boton AGREGAR: la caja media 241px y el contenido 326. Se
 * suelta la altura y el redondeo pasa a la foto, que es la unica que lo
 * necesita.
 */
/*
 * `height: 100%` y no `auto`: la altura la manda el item del carrusel, que
 * owl iguala al mas alto. Con `auto` la tarjeta se quedaba en 356 dentro de
 * un hueco de 420 y dejaba 64px en blanco debajo. El !important es para
 * ganarle a la altura fija que le pone la hoja vieja.
 */
.complement-pedido .item.img-gallery {
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: 14px;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible;
    padding-bottom: 14px;
}
/*
 * La foto va a sangre, pegada a los tres bordes de arriba, como en las
 * tarjetas de producto y en las de "Suele regalarse junto con". Antes llevaba
 * un marco blanco de 9px por dentro que la dejaba flotando.
 */
.complement-pedido .item.img-gallery figure {
    border-radius: 13px 13px 0 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    aspect-ratio: 1 / 1;
    background: var(--rd-bg-warm);
}
.complement-pedido .item.img-gallery figure img {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    display: block;
    padding: 0 !important;
    margin: 0 !important;
}

/*
 * La FOTO absorbe la diferencia de altura, no el texto.
 *
 * Todas las tarjetas del carrusel miden lo que la mas alta. Si el hueco
 * sobrante se lo queda el bloque de texto, a las de nombre corto les aparece
 * un palmo de blanco entre el precio y el boton, que es lo que se veia. Con
 * la foto en flex:1 y object-fit:cover, la de al lado simplemente se ve un
 * poco mas alta y no queda ningun vacio.
 */
.complement-pedido .item.img-gallery figure {
    flex: 1;
    min-height: 150px;
}
.complement-pedido .info-complement {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 0;
    margin: 0 !important;
    text-align: left;
}
/* -----------------------------------------------------------------------------
 * Pie de la tarjeta de complemento: precio + accion en una fila
 *
 * Opcion A del lienzo de diseno, elegida por la clienta el 2026-09-10.
 * -------------------------------------------------------------------------- */

/*
 * La fila se PARTE cuando no cabe.
 *
 * En una tarjeta de 183px quedan 157 utiles: el precio pide unos 60 y la
 * pastilla 90, con 8 de aire. Con un precio de cuatro cifras o un idioma mas
 * largo no entra, y `space-between` no encoge a nadie: la pastilla se salia
 * entre 4 y 9px por la derecha. Con wrap, en ese caso baja a su linea en vez
 * de desbordar.
 */
.complement-pedido .rd-compl-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 10px;
    padding-bottom: 2px;
}
.complement-pedido .rd-compl-pie > * {
    min-width: 0;
}
.complement-pedido .rd-compl-pie .prc-compl {
    margin: 0 !important;
    white-space: nowrap;
}

/*
 * El circulo se va. La casilla SE QUEDA -es la que envia el complemento en el
 * formulario- pero sin pintar: dos controles para una sola accion, y el texto
 * quedaba centrado en el hueco del circulo en vez de en el boton.
 */
.complement-pedido .rd-compl-pie .checkmark {
    display: none !important;
}
.complement-pedido .rd-compl-pie input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.complement-pedido .rd-compl-pie .btn-agregar {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    width: auto !important;
    max-width: none;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    float: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    background: transparent !important;
    border: 1px solid var(--rd-accent-line);
    border-radius: 999px;
    color: var(--rd-accent) !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0 !important;
    line-height: 1.2;
    white-space: nowrap;
    flex: 0 1 auto;
    cursor: pointer;
    transition: background .15s linear, color .15s linear, border-color .15s linear;
}

/*
 * El texto va forzado a 12: sin esto el "Agregar" heredaba los 17px de
 * `.containers` y salia mas grande que el "Anadido", que se pinta con un
 * ::after que si trae su tamano.
 */
.complement-pedido .rd-compl-txt {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.2;
}

/* El check solo aparece cuando esta puesto. */
.complement-pedido .rd-compl-check {
    display: none;
    flex: none;
}

/*
 * --- Puesto ---
 *
 * Dos etiquetas y se muestra una. El primer intento escondia "Agregar" con
 * font-size:0 y sacaba "Anadido" con un ::after; en cuanto hubo que forzar el
 * tamano del texto -heredaba 17px de .containers- el truco se rompio y se leia
 * "AgregarAnadido".
 */
.complement-pedido .rd-compl-txt--on {
    display: none;
}
.complement-pedido .rd-compl-pie input:checked ~ .rd-compl-check,
.complement-pedido .rd-compl-pie input:checked ~ .rd-compl-txt--on {
    display: block;
}
.complement-pedido .rd-compl-pie input:checked ~ .rd-compl-txt--off {
    display: none;
}
.complement-pedido .rd-compl-pie .btn-agregar:has(input:checked) {
    background: var(--rd-accent) !important;
    border-color: var(--rd-accent);
    color: #fff !important;
}
/*
 * El borde de la tarjeta tambien se tine: asi se ve de lejos cuales ya
 * estan puestos sin leer boton por boton. :has() no lo entienden los
 * navegadores viejos; ahi el boton relleno sigue diciendolo.
 */
.complement-pedido .item.img-gallery:has(input:checked) {
    border-color: var(--rd-accent);
}

/* Toda la tarjeta es pulsable, no solo la pastilla. */
.complement-pedido .item.img-gallery {
    cursor: pointer;
}
.complement-pedido .item.img-gallery:hover .btn-agregar {
    border-color: var(--rd-accent);
}
/*
 * index.css le pone a esta lista `border-bottom: 1px dashed` y un
 * `min-height:50px`: por eso la tarjeta salia partida en dos por un filete
 * punteado naranja debajo del precio.
 */
.complement-pedido .info-complement ul {
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 2px;
    min-height: 0 !important;
    border-bottom: none !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}
.complement-pedido .title-prod-cmpl small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--rd-ink-3);
    text-transform: none;
}
.complement-pedido .prc-compl {
    margin-top: 6px;
    font-size: 15px !important;
}
.complement-pedido .prc-compl span {
    font-size: 15px !important;
}

/* El filete punteado que partia la tarjeta en dos, fuera. */
.complement-pedido .item.img-gallery hr,
.complement-pedido .info-complement + hr,
.complement-pedido .item.img-gallery [class*="separador"] {
    display: none !important;
}

/*
 * El AGREGAR se salia de la tarjeta por la derecha.
 *
 * Dos reglas viejas se juntaban:
 *
 *   .containers.btn-agregar      { width: 125% !important }
 *   label.containers.btn-agregar { width: 10em; transform: scale(.8) }
 *
 * El 125% de una tarjeta de 183px son 229, y el scale(.8) lo dibujaba a 181
 * pero DESPLAZADO: el borde derecho caia 11px fuera de la tarjeta. Encima el
 * transform hace que lo que se ve y lo que mide el navegador no coincidan
 * -offsetWidth 157 y rectangulo 126-, asi que medir sin mirar la captura
 * enganaba.
 *
 * Se le quita el transform y se le da el ancho de la tarjeta menos los
 * margenes. El selector lleva `label` delante para empatar en especificidad
 * con la regla vieja y ganar por orden, que esta hoja va la ultima.
 */
/*
 * Queda por si alguna otra pantalla usa .btn-agregar fuera del pie: le quita
 * el transform:scale(.8) y el width:125% que traen las hojas viejas.
 */
.complement-pedido .btn-agregar {
    transform: none !important;
    box-sizing: border-box;
}
.complement-pedido .title-prod-cmpl {
    font-size: 13.5px;
    font-weight: 700;
    text-transform: none;
    color: var(--rd-ink);
}
.complement-pedido .prc-compl {
    color: var(--rd-ink) !important;
    font-weight: 700;
}
.complement-pedido .btn-agregar {
    border-radius: 999px;
    color: var(--rd-accent);
    border: 1px solid var(--rd-accent-line);
}

/* -----------------------------------------------------------------------------
 * 15. SUELE REGALARSE JUNTO CON
 * -------------------------------------------------------------------------- */

.rd-relacionados {
    padding: 70px var(--rd-gutter) 0;
    background: var(--rd-bg);
}
.rd-relacionados h2 {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 30px;
    margin: 0 0 22px;
}
.rd-relacionados__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.rd-relacionado {
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    color: var(--rd-ink);
}
.rd-relacionado:hover {
    color: var(--rd-ink);
    border-color: var(--rd-line-3);
}
.rd-relacionado__img {
    width: 74px;
    height: 74px;
    border-radius: 10px;
    overflow: hidden;
    flex: none;
    display: block;
}
.rd-relacionado__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rd-relacionado__nombre {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 5px;
}
.rd-relacionado__precio {
    display: block;
    font-size: 14px;
    color: var(--rd-ink-3);
}

@media (max-width: 991px) {
    .rd-ficha > .row { grid-template-columns: 1fr; gap: 28px; }
    .rd-ficha .detail-detail h1 { font-size: 34px; }
    .rd-relacionados__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .rd-ficha .detail-detail ul { grid-template-columns: 1fr; }
    .rd-relacionados__grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
 * 16. MOVIL
 *
 * Tres cosas que en escritorio no se ven y en un telefono saltan a la vista:
 *
 *   1. La cabecera es fija y se come el titulo de la seccion a la que saltas.
 *      Se resuelve con scroll-margin-top, no con relleno: el hueco solo hace
 *      falta cuando el navegador desplaza hasta un ancla.
 *   2. Los cuerpos de texto del diseno estan pensados para una columna ancha.
 *      A 390px el nombre del producto a 20px y el precio a 17px no caben en la
 *      misma linea que el "Regalar", y la tarjeta se descuadra.
 *   3. La foto del hero es un banner apaisado con texto dentro. Recortada a
 *      560px de alto en vertical no se lee nada. Se le baja el alto y se
 *      encuadra por arriba, que es donde esos banners llevan el mensaje.
 * -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /*
     * Las pastillas de categoria se ARRASTRAN de lado, no se parten.
     *
     * En escritorio van con flex-wrap y caben; a 390px, con cuatro catalogos y
     * su numero, se partirian en dos o tres lineas y el bloque empezaria con
     * un muro de botones. Es el mismo defecto que la clienta reporto en el
     * menu con "REGALOS CORPORATIVOS".
     *
     * El relleno lateral negativo hace que la fila sangre hasta el borde de la
     * pantalla: asi se ve que hay mas a la derecha, en vez de cortarse dentro
     * del margen y parecer que ahi se acaba.
     */
    .rd-pastillas {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-left: calc(var(--rd-gutter) * -1);
        margin-right: calc(var(--rd-gutter) * -1);
        padding-left: var(--rd-gutter);
        padding-right: var(--rd-gutter);
    }
    .rd-pastillas::-webkit-scrollbar {
        display: none;
    }
    .rd-pastilla {
        flex: 0 0 auto;
        padding: 10px 16px;
        font-size: 13px;
    }

    .rd-home section,
    .rd-ficha,
    .rd-relacionados,
    .complement-pedido {
        scroll-margin-top: 180px;
    }

    /* -------------------------------------------------------------------------
     * Hero: la foto DEBAJO del texto, no al lado
     *
     * Mismo tratamiento que el heroe de /empresas en movil, que es el que la
     * clienta pidio: la foto ocupa el fondo entero, un velo oscuro de arriba
     * abajo la apaga lo justo, y el texto se apoya en la parte baja.
     *
     * Antes se apilaba -bloque de texto y, debajo, una tira de foto de 268px-:
     * el hero medía 824px, la foto salía recortada por la mitad y el titular
     * llegaba sin imagen detrás.
     * ---------------------------------------------------------------------- */
    .rd-hero {
        position: relative;
        display: block;
        min-height: 78vh;
        background: var(--rd-ink);
    }
    .rd-hero__media {
        position: absolute;
        inset: 0;
        min-height: 0;
        aspect-ratio: auto;
    }
    .rd-hero__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 35%;
    }
    /* El velo: sin el, el texto blanco no se lee sobre una foto clara. */
    .rd-hero__media:after {
        content: "";
        position: absolute;
        inset: 0;
        /*
         * El velo carga arriba a proposito. Los banners que hoy alimentan el
         * hero llevan su propio titular DIBUJADO DENTRO de la foto ("Feliz
         * temporada de cumpleanos..."), y con el texto nuevo encima se leian
         * los dos a la vez. Apagando la mitad de arriba, el titular pintado
         * pasa a fondo y manda el de verdad.
         *
         * Lo correcto es subir al panel una foto de hero SIN texto: el campo
         * "Hero · foto de respaldo" esta justo para eso.
         */
        background: linear-gradient(180deg,
            rgba(44, 29, 22, .72) 0%,
            rgba(44, 29, 22, .58) 30%,
            rgba(44, 29, 22, .74) 62%,
            rgba(44, 29, 22, .93) 100%);
    }
    /*
     * Velo apagado desde el panel. Sin el, el titular necesita una sombra
     * suave o desaparece en cuanto la foto tiene una zona clara. No sustituye
     * al velo: es el minimo para que el texto siga siendo legible.
     */
    .rd-hero--sin-velo .rd-hero__media:after {
        display: none;
    }

    /*
     * SOLO FOTO, EN MOVIL.
     *
     * Aqui el hero normal es una caja de 78vh con la foto de fondo ABSOLUTA y
     * el texto encima. Sin texto, esa caja no tiene contenido que le de alto:
     * con la foto sacada del flujo, el hero colapsaria a 78vh de fondo y la
     * imagen saldria recortada por arriba y por abajo.
     *
     * Asi que la foto vuelve al flujo y es ella la que pone el alto. El banner
     * se ve entero, que es de lo que se trata.
     */
    .rd-hero--solo-foto {
        position: static;
        display: block;
        min-height: 0;
        background: var(--rd-bg-warm);
    }
    .rd-hero--solo-foto .rd-hero__media {
        position: relative;
        inset: auto;
        min-height: 0;
    }
    .rd-hero--solo-foto .rd-hero__media img {
        width: 100%;
        height: auto;
        object-fit: initial;
        /* El encuadre del hero normal baja la foto un 35% para dejar ver la
           cara; aqui no se recorta nada, asi que no hay nada que encuadrar. */
        object-position: 50% 50%;
    }
    .rd-hero--solo-foto .rd-hero__media:after {
        display: none;
    }

    /*
     * EL BUSCADOR NO SE COME EL BANNER.
     *
     * .rd-finder sube 38px para montarse sobre el hero: con un hero de 78vh
     * eso es un detalle bonito. Pero un banner apaisado -el de la clienta mide
     * 2000x498- baja a 103px de alto en un telefono de 414, y esos mismos 38px
     * se comen el 37% de la foto, justo la franja de abajo donde va dibujado
     * el boton "VER REGALOS".
     *
     * ACTUALIZADO 21-09-2026: ese -38px ya no existe. La clienta pidio que el
     * buscador no tapara el banner en NINGUN tamaño (punto 3 de Diseño
     * WEB.docx), asi que la regla base pasó a +28px y el solape desaparecio de
     * raiz. Esta regla se queda solo para apretar un poco el hueco en movil,
     * donde 28px sobre un banner apaisado deja demasiado aire muerto.
     */
    .rd-hero--solo-foto + .rd-finder {
        margin-top: 14px;
    }
    .rd-hero--sin-velo .rd-hero h1,
    .rd-hero--sin-velo h1,
    .rd-hero--sin-velo p,
    .rd-hero--sin-velo .rd-kicker,
    .rd-hero--sin-velo .rd-hero__notes {
        text-shadow: 0 1px 14px rgba(44, 29, 22, .55);
    }

    .rd-hero__text {
        position: relative;
        z-index: 2;
        min-height: 78vh;
        justify-content: flex-end;
        padding: 90px 22px 28px;
    }
    .rd-hero .rd-kicker {
        color: #E8B98A;
        margin-bottom: 12px;
    }
    .rd-hero h1 {
        color: #FFFFFF;
        font-size: clamp(28px, 8.5vw, 36px);
        margin-bottom: 14px;
        overflow-wrap: break-word;
    }
    .rd-hero p {
        color: rgba(255, 255, 255, .90);
        font-size: 15.5px;
        margin-bottom: 22px;
        max-width: none;
    }
    .rd-hero__cta {
        flex-wrap: wrap;
        gap: 10px;
    }
    .rd-hero__cta .rd-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
    .rd-hero__cta .rd-btn--ghost {
        color: #FFFFFF;
        border-color: rgba(255, 255, 255, .45);
    }
    .rd-hero__notes {
        gap: 4px 20px;
        margin-top: 18px;
        color: rgba(255, 255, 255, .72);
        font-size: 12.5px;
    }

    /* --- Tarjeta de producto --- */
    .content-products-img {
        padding: 0 6px 14px;
    }
    .content-products-img:before {
        left: 6px;
        right: 6px;
        bottom: 14px;
        border-radius: 13px;
    }
    .content-products-foto {
        border-radius: 12px 12px 0 0;
    }
    .description-products-index {
        padding: 12px 12px 14px;
    }
    .description-products-index ul{
        gap: 5px;
    }
    .title-dcpt-product a{
        font-size: 15px !important;
        line-height: 1.25;
    }
    .precio-prd,
    .precio-prd span{
        font-size: 14px !important;
    }
    .precio-antes {
        font-size: 12px !important;
    }
    .precio-ahora {
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 8px;
    }
    .rd-pill-regalar {
        font-size: 11px;
        padding: 5px 11px;
    }

    /* --- Ocasiones --- */
    .rd-occasion__img {
        height: 112px;
    }
    .rd-occasion__name {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* --- Titulares de seccion --- */
    .rd-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 18px;
    }
    .rd-head h2,
    .rd-reviews > h2,
    .rd-relacionados h2 {
        font-size: 25px !important;
    }
    .rd-steps h2 {
        font-size: 27px !important;
    }
    .rd-ig__head h2 {
        font-size: 23px !important;
    }

    /* --- Ficha --- */
    .rd-ficha {
        padding-top: 20px;
    }

    /*
     * La tira de miniaturas estaba FUERA del flujo.
     *
     * Por debajo de 501px, index.css la deja `position:absolute; bottom:-70px`
     * -el apano del diseno viejo, cuando la galeria era una columna-. Al no
     * participar del flujo, `.gallery-detail` no crecia con ella y la tira
     * quedaba colgada del borde de abajo de la caja:
     *
     *   con 3 fotos  -> pisaba 18px de la foto grande
     *   con 5 fotos  -> como ancla por ABAJO, la segunda fila sube en vez de
     *                   bajar, y se comia 115px de la foto
     *
     * El `order: 2` del rediseno no pintaba nada: un absoluto no entra en el
     * reparto del flex.
     *
     * En `static` la tira vuelve al flujo, la caja crece con ella y las filas
     * que hagan falta caen debajo. En escritorio no cambia nada -alli la regla
     * de index.css no aplica y `.regalb` ya era `relative`-: verificado a
     * 1280px, mismos rectangulos con y sin esta regla.
     */
    .rd-ficha .gallery-detail .regalb {
        position: static;
        bottom: auto;
    }

    /*
     * index.css separaba el bloque de datos 6rem (96px) de la galeria: era el
     * hueco que le hacia sitio a la tira absoluta. Sin ella sobra, y dejaba un
     * vacio de 124px antes del nombre del producto.
     */
    .rd-ficha .detail-detail {
        margin-top: 22px;
    }
    .rd-ficha .detail-detail h1 {
        font-size: 28px !important;
    }
    .rd-ficha .h3-prctotl {
        font-size: 22px;
    }
    .rd-personaliza {
        padding: 16px;
    }

    /*
     * La fila de cantidad + comprar va `nowrap` en escritorio para que el
     * boton quede al lado de la pildora. A 390px no caben: el boton se salia
     * de la pantalla. Aqui se parte en dos lineas.
     */
    .rd-ficha .rd-compra-fila {
        flex-wrap: wrap !important;
    }
    .rd-ficha .rd-compra-boton {
        flex: 1 0 100%;
    }
    .rd-ficha .btn-comprar-detail {
        white-space: normal !important;
        padding: 14px 18px !important;
        font-size: 14.5px !important;
    }
    .rd-relacionado__nombre {
        font-size: 13.5px;
    }

    /*
     * En el telefono la tarjeta del complemento mide 183px y quedan 157
     * utiles: el precio pide unos 60 y la pastilla 113. No caben en una
     * linea, asi que el precio va arriba y la pastilla debajo a todo el
     * ancho -mas facil de acertar con el pulgar que una pildora de 113px-.
     * En escritorio la tarjeta es mas ancha y se quedan en la misma fila,
     * como en el diseno.
     */
    .complement-pedido .rd-compl-pie {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .complement-pedido .rd-compl-pie .btn-agregar {
        width: 100% !important;
        justify-content: center;
        padding: 9px 12px !important;
    }
}

/* -----------------------------------------------------------------------------
 * 17. CARRITO — código de promoción plegado
 *
 * Lo pidió la clienta el 2026-09-10: «debería estar cerrado, solo si tiene
 * código que le dé click y que se abra ese input». Y de paso el campo y el
 * botón iban pegados sin aire, con el rótulo encima en versales.
 *
 * Es la ÚNICA parte del carrito que esta hoja toca. El resto del carrito
 * queda fuera del rediseño a propósito —conserva su Jost y su maqueta—, así
 * que aquí no se hereda nada: los colores se escriben enteros.
 * -------------------------------------------------------------------------- */

.car-promo-caja {
    display: block;
}

.car-promo-abrir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #8B5E34;
    padding: 6px 0;
    user-select: none;
}
/* La flecha nativa del <summary>, fuera: se dibuja una propia. */
.car-promo-abrir::-webkit-details-marker { display: none; }
.car-promo-abrir::marker { content: ""; }

.car-promo-abrir::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #D8BCAE;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
}
.car-promo-caja[open] .car-promo-abrir::before {
    content: "–";
}
.car-promo-abrir:hover {
    color: #B4462F;
}

/* El rótulo de arriba sobra: el propio enlace ya dice qué es. */
.car-promo > .car-rotulo {
    display: none;
}

.car-promo-caja[open] .car-promo-fila {
    margin-top: 10px;
}

/*
 * El campo y el botón dejan de ir pegados como una sola pieza. Separados y
 * con el botón redondeado se lee como lo que es: algo opcional.
 */
.car-promo-fila {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 420px;
}
.car-promo-fila .car-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #E4D8CE !important;
    border-radius: 8px !important;
    padding: 10px 12px;
    font-size: 14px;
}
.car-promo-fila .car-boton {
    flex: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 13px;
    letter-spacing: .04em;
}

@media (max-width: 600px) {
    .car-promo-fila {
        max-width: none;
    }
}

/* ==========================================================================
   LAS ESTAMPAS DE FONDO SE VEIAN COMO RECUADROS BLANCOS

   Las cuatro figuras decorativas de las pantallas de cuenta -donuts, regalo,
   regalo2 y osito- son JPG, y el JPG no tiene transparencia. Sobre el crema
   del sitio, rgb(243,234,225), cada una se dibujaba dentro de su propio
   rectangulo blanco.

   multiply resuelve el blanco sin tocar los archivos: blanco por el fondo da
   el fondo, asi que el rectangulo desaparece y el trazo se queda. Se prefiere
   a redibujar los cuatro JPG como PNG porque no toca ningun binario y sigue
   sirviendo si manana cambia el color del fondo.

   Va en las seis clases, no solo en las cuatro de estas pantallas: las mismas
   estampas se usan en compra-realizada con los sufijos five y six.
   ========================================================================== */
.img-oc-one,
.img-oc-two,
.img-oc-three,
.img-oc-four,
.img-oc-five,
.img-oc-six {
    mix-blend-mode: multiply;
}


/* =============================================================================
 * PORTADA — DISEÑO WEB.DOCX, REVISIÓN DEL 27/09/2026
 *
 * Cada bloque dice qué imagen del documento de la clienta reproduce. Las
 * medidas salen de la maqueta que ella aprobó (home1/banners.html), no de
 * ojo. Todo va con clases propias (rd-slider, rd-regalados, rd-regalo,
 * rd-promos, rd-feed, rd-opiniones) para no tocar el catálogo ni la ficha,
 * que comparten otras clases de esta hoja.
 * ========================================================================== */

/* --- CABECERA (imágenes 10 a 13) ------------------------------------------
 * El fondo del menú pasa al crema de la maqueta, #FBF6EF: el de antes,
 * rgba(251,249,236), tiraba a amarillo. Y el carrito se dibuja como la
 * «carterita» que eligió la clienta (la de asa alta, imagen 10). */
.cabeceramenu.bgcrema {
    background: #FBF6EF !important;
}
.cart .icon-cart2:before {
    content: "" !important;
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12.2a1 1 0 0 1-1 .8H7.2a1 1 0 0 1-1-.8L5 8z'/%3E%3Cpath d='M9 10V6.5a3 3 0 0 1 6 0V10'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12.2a1 1 0 0 1-1 .8H7.2a1 1 0 0 1-1-.8L5 8z'/%3E%3Cpath d='M9 10V6.5a3 3 0 0 1 6 0V10'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- BANNER: CARRUSEL (imagen 1) ------------------------------------------
 * A todo el ancho y «un poquito más alto»: los banners miden 2000x498
 * (4,02:1); aquí la caja es 3,6:1, o sea 400 px de alto a 1440 en vez de
 * 358. La foto se recorta un 5 % por cada lado, que en los banners de la
 * clienta es margen vacío: el texto dibujado no se toca.
 *
 * Las diapositivas se apilan en la misma celda de la rejilla y se funden;
 * así la caja toma la altura de la foto sin fijarla a mano. */
.rd-slider {
    position: relative;
    background: var(--rd-bg-warm);
    overflow: hidden;
}
.rd-slider__pista {
    display: grid;
}
.rd-slider__slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}
.rd-slider__slide.is-activa {
    opacity: 1;
    visibility: visible;
    transition: opacity .6s ease, visibility 0s;
}
.rd-slider__slide a,
.rd-slider__slide picture {
    display: block;
}
.rd-slider__slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 36 / 10;
    object-fit: cover;
    object-position: center;
}
.rd-slider__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--rd-ink);
    box-shadow: 0 4px 16px rgba(62, 42, 32, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.rd-slider__flecha:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.rd-slider__flecha--izq { left: 24px; }
.rd-slider__flecha--der { right: 24px; }
.rd-slider__puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.rd-slider__punto {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 0 0 1px rgba(62, 42, 32, .15);
    cursor: pointer;
    transition: width .3s, background .3s;
}
.rd-slider__punto.is-activo {
    width: 36px;
    background: var(--rd-accent);
    box-shadow: none;
}

/* --- LOS MÁS REGALADOS POR OCASIÓN (imágenes 3 y 4) ---------------------- */
.rd-regalados {
    margin-top: 56px;
    background: #FBF6EF;
    border-top: 1px solid #F1E7DC;
    border-bottom: 1px solid #F1E7DC;
    padding: 60px var(--rd-gutter, 48px) 66px;
}
.rd-regalados__cabeza {
    text-align: center;
    margin-bottom: 30px;
}
.rd-regalados__rotulo {
    display: block;
    font-family: var(--rd-sans);
    font-size: 11.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #C08A63;
}
.rd-regalados__cabeza h2 {
    font-family: var(--rd-serif);
    font-weight: 400;
    font-size: 38px;
    letter-spacing: -.015em;
    color: var(--rd-ink);
    margin: 12px 0 0;
}
.rd-regalados__pastillas {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 5px 2px;
    max-width: 100%;
    width: max-content;
    margin: 0 auto 14px;
    scrollbar-width: thin;
}
.rd-regalados .rd-pastilla {
    flex: none;
    cursor: pointer;
    font-family: var(--rd-sans);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid #EFE3D9;
    background: #FFFFFF;
    color: #6B5346;
    transition: background .2s, color .2s, border-color .2s;
}
.rd-regalados .rd-pastilla:hover { border-color: #C08A63; }
.rd-regalados .rd-pastilla.is-activa {
    background: var(--rd-accent);
    border-color: var(--rd-accent);
    color: #fff;
}
.rd-regalados__pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 22px;
    font-family: var(--rd-sans);
    font-size: 13.5px;
    color: #8A7466;
}
.rd-regalados__pie a {
    flex: none;
    font-weight: 700;
    color: var(--rd-accent);
}
.rd-regalados__rejilla {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    transition: opacity .2s;
}
.rd-regalados__rejilla.is-cargando { opacity: .45; }
.rd-regalados__vacio {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 0;
    color: #8A7466;
}

/* La tarjeta (imagen 4, sin las estrellitas). */
.rd-regalo {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    color: var(--rd-ink);
    text-decoration: none !important;
    box-shadow: 0 1px 0 rgba(62, 42, 32, .06);
    transition: transform .25s, box-shadow .25s;
}
.rd-regalo:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 42px rgba(62, 42, 32, .14);
}
.rd-regalo__foto {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #F5EDE5;
}
.rd-regalo__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rd-regalo__marcas {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.rd-regalo__marcas .distintivos {
    position: static !important;
    margin: 0 !important;
}
.rd-regalo__top {
    background: rgba(255, 255, 255, .94);
    color: #8E3522;
    font-family: var(--rd-sans);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    padding: 6px 10px;
    border-radius: 999px;
}
.rd-regalo__dscto {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--rd-accent);
    color: #fff;
    font-family: var(--rd-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 8px 12px;
    border-radius: 0 0 0 10px;
}
.rd-regalo__cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 16px 16px;
}
.rd-regalo__nombre {
    font-family: var(--rd-serif);
    font-size: 19px;
    line-height: 1.25;
    min-height: 24px;
}
.rd-regalo__precio {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    font-family: var(--rd-sans);
}
.rd-regalo__ahora {
    font-size: 19px;
    font-weight: 700;
    color: var(--rd-ink);
}
.rd-regalo__antes {
    font-size: 13px;
    color: #D2A45C;
    text-decoration: line-through;
}
.rd-regalo__boton {
    display: block;
    margin-top: 20px;
    text-align: center;
    font-family: var(--rd-sans);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rd-accent);
    border: 1.5px solid #EFC9BB;
    border-radius: 999px;
    padding: 9px 0;
    transition: background .2s, color .2s, border-color .2s;
}
.rd-regalo:hover .rd-regalo__boton {
    background: var(--rd-accent);
    border-color: var(--rd-accent);
    color: #fff;
}
.rd-regalo__rasgos {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.rd-regalo__rasgo {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #EFDFD2;
    color: #C08A63;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
/* El nombre del rasgo aparece al pasar el mouse, como en la maqueta. */
.rd-regalo__rasgo:after {
    content: attr(data-texto);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: var(--rd-ink);
    color: #fff;
    font-family: var(--rd-sans);
    font-size: 11px;
    line-height: 1.35;
    padding: 6px 10px;
    border-radius: 7px;
    width: max-content;
    max-width: 150px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    z-index: 20;
}
.rd-regalo__rasgo:hover:after { opacity: 1; }
.rd-regalo__rasgo:hover { border-color: #C08A63; }

/* --- BANNERS (imagen 5) ---------------------------------------------------- */
.rd-promos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 56px var(--rd-gutter, 48px) 0;
}
.rd-promo {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background: #F5EDE5;
}
.rd-promo picture,
.rd-promo img {
    display: block;
    width: 100%;
}
.rd-promo img {
    height: auto;
    transition: transform .5s ease;
}
.rd-promo:hover img { transform: scale(1.03); }
.rd-promo--con-texto img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.rd-promo__texto {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding: 0 42px;
    background: linear-gradient(to right, rgba(255, 250, 245, .92) 0%, rgba(255, 250, 245, .78) 38%, rgba(255, 250, 245, 0) 64%);
}
.rd-promo__titulo {
    font-family: var(--rd-serif);
    font-size: 36px;
    line-height: 1.12;
    color: var(--rd-ink);
    max-width: 260px;
}
.rd-promo__boton {
    background: #FFFFFF;
    color: var(--rd-ink);
    font-family: var(--rd-sans);
    font-size: 14px;
    font-weight: 700;
    padding: 13px 26px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(62, 42, 32, .14);
    transition: background .2s, color .2s;
}
.rd-promo:hover .rd-promo__boton { background: var(--rd-ink); color: #fff; }

/* --- EL FEED MÁS DULCE (imagen 8) ------------------------------------------ */
.rd-feed {
    padding: 72px 0 0;
}
.rd-feed__titulo {
    text-align: center;
    font-family: var(--rd-sans) !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rd-ink);
    margin: 0 16px 26px;
}
.rd-feed__titulo a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.rd-feed__titulo a:hover { color: var(--rd-accent); }
.rd-feed__marco {
    position: relative;
}
.rd-feed__pista {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.rd-feed__pista::-webkit-scrollbar { display: none; }
.rd-feed__pista li {
    flex: 0 0 20%;
    scroll-snap-align: start;
}
.rd-feed__pista a,
.rd-feed__pista picture {
    display: block;
}
.rd-feed__pista img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.rd-feed__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(40, 30, 25, .72);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.rd-feed__flecha[hidden] { display: none; }
.rd-feed__flecha--izq { left: 16px; }
.rd-feed__flecha--der { right: 16px; }

/* --- LO QUE DICEN NUESTROS DULCES CLIENTES (imagen 9) --------------------- */
.rd-opiniones {
    padding: 72px var(--rd-gutter, 48px) 72px;
}
.rd-opiniones h2 {
    text-align: center;
    font-family: var(--rd-serif);
    font-weight: 400;
    font-size: 38px;
    color: var(--rd-ink);
    margin: 0 0 40px;
}
.rd-opiniones__fila {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.rd-opinion {
    margin: 0;
    padding: 0 26px;
    text-align: center;
    border-left: 1px solid #D9CABD;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rd-opinion:first-child { border-left: 0; }
.rd-opinion__foto {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin-bottom: 26px;
}
.rd-opinion__estrellas {
    display: flex;
    gap: 4px;
    color: var(--rd-ink);
    margin-bottom: 14px;
}
.rd-opinion blockquote {
    margin: 0 0 10px;
    font-family: var(--rd-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--rd-ink);
    border: 0;
    padding: 0;
}
.rd-opinion figcaption {
    font-family: var(--rd-sans);
    font-weight: 700;
    font-size: 16px;
    color: var(--rd-ink);
}

/* --- TABLETA ---------------------------------------------------------------- */
@media (max-width: 1100px) {
    .rd-regalados__rejilla { grid-template-columns: repeat(3, 1fr); }
    .rd-opiniones__fila { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .rd-opinion:nth-child(3) { border-left: 0; }
    .rd-feed__pista li { flex-basis: 25%; }
    .rd-promo__titulo { font-size: 28px; }
}

/* --- TELÉFONO ------------------------------------------------------------- */
@media (max-width: 767px) {
    /* La foto para teléfono de cada banner llega por <source> y trae su
       propia proporción: aquí no se recorta. */
    .rd-slider__slide img { aspect-ratio: auto; }
    .rd-slider__flecha { width: 38px; height: 38px; }
    .rd-slider__flecha--izq { left: 10px; }
    .rd-slider__flecha--der { right: 10px; }
    .rd-slider__puntos { bottom: 10px; }

    .rd-regalados { margin-top: 36px; padding: 40px 16px 44px; }
    .rd-regalados__cabeza h2 { font-size: 28px; }
    .rd-regalados__pastillas { width: auto; margin: 0 -16px 10px; padding: 5px 16px; }
    .rd-regalados__pie { flex-direction: column; gap: 6px; }
    .rd-regalados__rejilla { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .rd-regalo { border-radius: 14px; }
    .rd-regalo__cuerpo { padding: 10px 10px 12px; }
    .rd-regalo__nombre { font-size: 15.5px; }
    .rd-regalo__ahora { font-size: 16px; }
    .rd-regalo__boton { margin-top: 12px; }
    .rd-regalo__rasgo { width: 30px; height: 30px; }
    .rd-regalo__dscto { font-size: 9.5px; padding: 6px 8px; }

    .rd-promos { grid-template-columns: 1fr; gap: 12px; padding: 32px 16px 0; }
    .rd-promo__texto { padding: 0 22px; gap: 12px; }
    .rd-promo__titulo { font-size: 24px; max-width: 190px; }
    .rd-promo__boton { padding: 10px 18px; font-size: 13px; }

    .rd-feed { padding-top: 48px; }
    .rd-feed__titulo { font-size: 17px !important; letter-spacing: .1em; }
    .rd-feed__titulo a { display: block; margin-top: 4px; }
    .rd-feed__pista li { flex-basis: 50%; }
    .rd-feed__flecha { width: 38px; height: 38px; }

    .rd-opiniones { padding: 48px 16px; }
    .rd-opiniones h2 { font-size: 27px; margin-bottom: 28px; }
    .rd-opiniones__fila { grid-template-columns: 1fr; row-gap: 34px; }
    .rd-opinion { border-left: 0; padding: 0 8px; }
    .rd-opinion__foto { width: 120px; height: 120px; margin-bottom: 18px; }
}


/* --- Ajustes tras revisar la portada al píxel (27/09/2026) ----------------
 * La hoja tiene dos reglas globales con !important: «todo en la sin serifa»
 * y «todos los h2 en la serifa». Aquí se ganan con más especificidad, y solo
 * dentro de los bloques nuevos. */
body .rd-regalo .rd-regalo__nombre,
body .rd-promo .rd-promo__titulo,
body .rd-regalados .rd-regalados__cabeza h2,
body .rd-opiniones > h2 {
    font-family: var(--rd-serif) !important;
}
body .rd-feed h2.rd-feed__titulo,
body .rd-feed h2.rd-feed__titulo a {
    font-family: var(--rd-sans) !important;
}

/* Las tarjetas alinean fila con fila: el nombre reserva dos líneas y la fila
   de iconos reserva su alto aunque el producto no tenga ninguno. */
.rd-regalo__nombre { min-height: 48px; }
.rd-regalo__precio { margin-top: 0; padding-top: 10px; }
.rd-regalo__rasgos { min-height: 36px; }

/* Los distintivos del panel («Nuevo», «Más vendido») caben en una línea. */
.rd-regalo__marcas .distintivo {
    white-space: nowrap;
    width: auto !important;
    max-width: none !important;
    writing-mode: horizontal-tb !important;
}

/* Cuantos testimonios haya, centrados: con tres no queda una cuarta columna
   vacía. */
.rd-opiniones__fila {
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    max-width: calc(var(--n, 4) * 330px);
    margin: 0 auto;
}
@media (max-width: 767px) {
    .rd-regalo__nombre { min-height: 40px; }
    .rd-regalo__rasgos { min-height: 30px; }
    .rd-opiniones__fila { grid-template-columns: 1fr; max-width: none; }
}


/* Banner con título: la foto ocupa la derecha y el título va sobre el crema
   de la izquierda, fundido hacia la foto. Así una foto cuadrada de producto
   no queda tapada a medias por el texto. */
.rd-promo--con-texto {
    aspect-ratio: 16 / 10;
    background: #FFFAF5;
}
.rd-promo--con-texto picture {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 62%;
}
.rd-promo--con-texto img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}
.rd-promo--con-texto .rd-promo__texto {
    background: linear-gradient(to right, #FFFAF5 0%, #FFFAF5 40%, rgba(255, 250, 245, .85) 46%, rgba(255, 250, 245, 0) 62%);
}


/* El buscador tampoco se monta sobre el banner en el teléfono. Quedaba una
   regla vieja con margin-top:-24px que tapaba el borde de abajo del banner y
   sus puntos, justo lo que la clienta pidió evitar («que no tape el banner
   principal»). */
@media (max-width: 767px) {
    body .rd-home .rd-finder { margin-top: 16px !important; }
}


/* --- BANNER IGUAL A LA MAQUETA APROBADA (home1/banners.html) — 27/09/2026 --
 * Medido en la maqueta a 1440 px: caja 1440 x 497 (aspect-ratio 2.9/1),
 * flechas de 44 px a 18 px del borde con blanco al 78 %, puntos de 7 px
 * (el activo de 26 px, terracota; los demás marrón al 28 %) a 16 px del
 * borde de abajo, y la diapositiva DESLIZA en .65 s, no se funde. */
.rd-slider__pista {
    display: flex;
    width: 100%;
    transition: transform .65s cubic-bezier(.4, 0, .2, 1);
}
.rd-slider__slide,
.rd-slider__slide.is-activa {
    grid-area: auto;
    flex: 0 0 100%;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transition: none;
}
/* La caja toma la forma de los banners que sube la clienta (2000 x 498):
   con 2,9:1 el cover les cortaba el texto dibujado por los lados. */
.rd-slider__slide img {
    aspect-ratio: 2000 / 498;
    object-fit: cover;
    object-position: center;
}
.rd-slider__flecha {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .78);
}
.rd-slider__flecha svg { width: 18px; height: 18px; }
.rd-slider__flecha:hover { background: #fff; transform: translateY(-50%); }
.rd-slider__flecha--izq { left: 18px; }
.rd-slider__flecha--der { right: 18px; }
.rd-slider__puntos { bottom: 16px; }
.rd-slider__punto {
    width: 7px;
    height: 7px;
    background: rgba(62, 42, 32, .28);
    box-shadow: none;
}
.rd-slider__punto.is-activo {
    width: 26px;
    background: var(--rd-accent);
}
@media (max-width: 767px) {
    .rd-slider__slide img { aspect-ratio: auto; }
    .rd-slider__flecha { width: 36px; height: 36px; }
    .rd-slider__flecha--izq { left: 10px; }
    .rd-slider__flecha--der { right: 10px; }
    .rd-slider__puntos { bottom: 10px; }
    /* En el teléfono cada foto trae su alto: la pista se alinea arriba. */
    .rd-slider__pista { align-items: flex-start; }
}

/* Buscador a 30 px del banner, como la maqueta (margin-top:30px). */
@media (min-width: 768px) {
    body .rd-home .rd-finder { margin-top: 30px !important; }
}

/* Respaldo sin JavaScript: el menu mide 180 px desde 1180 de ancho y el
   banner no debe quedar debajo (ver el script de index.php). */
@media (min-width: 1180px) {
    body > main.main.rd-home { margin-top: 180px !important; }
}

/* Feed: el atributo height="600" del <img> ganaba al aspect-ratio y las fotos
   salian de 288 x 600, alargadas. Cuadradas, como la maqueta. */
.rd-feed__pista img { height: auto !important; aspect-ratio: 1 / 1; }


/* --- BUSCADOR DELGADO (observaciones 01/10/2026) ---------------------------
 * Sin rótulos: el nombre del campo es la primera opción. Una sola fila baja.
 * En el teléfono va plegado: título, guiones y BUSCAR; al tocarlo se abren
 * las preguntas. */
body .rd-home .rd-finder__box {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
}
.rd-finder__title { flex: none; }
.rd-finder__title strong { font-size: 19px !important; }
.rd-finder__campos {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: center;
}
.rd-finder__campos select.rd-field {
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 600;
    color: var(--rd-ink);
}
.rd-finder__guion,
.rd-finder__abrir { display: none; }

@media (max-width: 767px) {
    body .rd-home .rd-finder__box {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 16px;
    }
    .rd-finder__title {
        border-right: 0 !important;
        border-bottom: 0 !important;
        padding: 0 !important;
        grid-column: auto !important;
    }
    .rd-finder__guion {
        display: block;
        flex: 1;
        min-width: 24px;
        border-top: 2px dashed #CBB8A6;
    }
    .rd-finder__abrir {
        display: block;
        flex: none;
        border: 0;
        border-radius: 4px;
        background: #7A5E4C;
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: .14em;
        text-transform: uppercase;
        padding: 12px 18px;
        cursor: pointer;
        min-height: 44px;
    }
    .rd-finder__campos {
        display: none;
        flex-basis: 100%;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .rd-finder__box.is-abierto .rd-finder__campos { display: grid; }
    .rd-finder__box.is-abierto .rd-finder__abrir { background: var(--rd-ink); }
    .rd-finder__campos .rd-btn { width: 100%; }
}


/* --- Observaciones 01/10/2026 --------------------------------------------- */
/* Tarjeta: el precio justo debajo del nombre (había mucho aire). */
.rd-regalo__nombre { min-height: 0 !important; }
.rd-regalo__precio { margin-top: 6px !important; padding-top: 0 !important; }
.rd-regalo__boton { margin-top: 14px; }
.rd-regalo__cuerpo { padding-bottom: 14px; }

/* Feed: la tipografía de antes (serif, sin mayúsculas forzadas), icono de
   Instagram al lado, y la cuenta debajo en el mismo color y en minúscula. */
body .rd-feed h2.rd-feed__titulo,
body .rd-feed h2.rd-feed__titulo span {
    font-family: var(--rd-serif) !important;
    font-weight: 400 !important;
    font-size: 34px !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
}
.rd-feed__titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 16px 6px !important;
    color: var(--rd-ink);
}
/*
 * 02/10/2026, la clienta: "he alineado el logo de IG que estaba un poquito
 * mas abajo, y juntado un poco mas ambos textos".
 *
 * El icono estaba centrado con la CAJA de la linea, no con las letras: en
 * Newsreader las mayusculas van altas dentro de la linea. Medido a 1440px:
 * centro del icono 449.9, centro de las mayusculas 445.9. Sube esos 4px.
 * Y la cuenta se pega al titulo: 6px de margen + el interlineado de 40.8px
 * dejaban ~10px de aire visible; ahora la linea va a 1.05.
 */
body .rd-feed h2.rd-feed__titulo {
    line-height: 1.05 !important;
    margin-bottom: 2px !important;
}
.rd-feed__ig { flex: none; transform: translateY(-4px); }
.rd-feed__cuenta {
    display: block;
    text-align: center;
    margin: 0 0 24px;
    font-size: 15px;
    color: var(--rd-ink) !important;
    text-transform: lowercase;
    text-decoration: none;
}
.rd-feed__cuenta:hover { text-decoration: underline; }

@media (max-width: 767px) {
    /* Sin «Regalar» en el teléfono: la tarjeta entera ya es el enlace. */
    .rd-regalo__boton { display: none; }
    body .rd-feed h2.rd-feed__titulo,
    body .rd-feed h2.rd-feed__titulo span { font-size: 25px !important; }
    .rd-feed__ig { width: 24px; height: 24px; }
}

/* Teléfono: sin «Regalar», una fila de iconos vacía no deja hueco. */
@media (max-width: 767px) {
    .rd-regalo__rasgos:not(:has(.rd-regalo__rasgo)) { display: none; }
    .rd-regalo__rasgos { margin-top: 10px; }
}

/* -----------------------------------------------------------------------------
 * VISTA PREVIA DE LOS FONDOS DE LA BARRA DE SELLOS (01/10/2026)
 *
 * Solo con ?sellos=opciones (index.php pone .rd-perks--opciones). La barra
 * rota entre las cuatro opciones que eligio la clienta del lienzo de diseño:
 * A rosa empolvado, B blanco con filete, C terracota y D caramelo suave.
 * Sin el parametro nada de esto aplica y la barra sigue marron.
 * -------------------------------------------------------------------------- */
.rd-perks__opcion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1440px;
    margin: 0 auto 18px;
    padding: 0 var(--rd-gutter);
}
body .rd-perks .rd-perks__opcion-nombre {
    font-family: var(--rd-serif) !important;
    font-size: 26px;
    color: var(--rd-ink);
}
.rd-perks__opcion-puntos { display: flex; align-items: center; gap: 10px; }
.rd-perks__opcion-puntos button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(62, 42, 32, .25);
    cursor: pointer;
    transition: width .3s, background-color .3s;
}
.rd-perks__opcion-puntos button.is-activo { width: 34px; background: #A8432C; }

.rd-perks--opciones .rd-perks__grid { transition: background-color .7s ease; }
.rd-perks--opciones .rd-perks__grid .rd-perk strong,
.rd-perks--opciones .rd-perks__grid .rd-perk span:not(.rd-perk__icon),
.rd-perks--opciones .rd-perk > .rd-perk__icon { transition: color .7s ease, background-color .7s ease, border-color .7s ease; }

/* A · Rosa empolvado */
.rd-perks--a .rd-perks__grid { background: #F2D7CC; }
.rd-perks--a .rd-perks__grid .rd-perk strong { color: #3E2A20; }
.rd-perks--a .rd-perks__grid .rd-perk span:not(.rd-perk__icon) { color: #5E4436; }
.rd-perks--a .rd-perk > .rd-perk__icon { background: #FFFFFF; border-color: #FFFFFF; }

/* B · Blanco con filete */
.rd-perks--b .rd-perks__grid { background: #FFFFFF; box-shadow: inset 0 1px 0 #E4D8CE, inset 0 -1px 0 #E4D8CE; }
.rd-perks--b .rd-perks__grid .rd-perk strong { color: #3E2A20; }
.rd-perks--b .rd-perks__grid .rd-perk span:not(.rd-perk__icon) { color: #6B5346; }
.rd-perks--b .rd-perk > .rd-perk__icon { background: #F7E9E2; border-color: #F7E9E2; }

/* C · Terracota */
.rd-perks--c .rd-perks__grid { background: #A8432C; }
.rd-perks--c .rd-perks__grid .rd-perk strong { color: #FFFFFF; }
.rd-perks--c .rd-perks__grid .rd-perk span:not(.rd-perk__icon) { color: #FBE9E2; }
.rd-perks--c .rd-perk > .rd-perk__icon { background: #FFFFFF; border-color: #FFFFFF; }

/* D · Caramelo suave */
.rd-perks--d .rd-perks__grid { background: #EBCFA6; }
.rd-perks--d .rd-perks__grid .rd-perk strong { color: #3E2A20; }
.rd-perks--d .rd-perks__grid .rd-perk span:not(.rd-perk__icon) { color: #4F3A2D; }
.rd-perks--d .rd-perk > .rd-perk__icon { background: #FFFFFF; border-color: #FFFFFF; }

/*
 * E · Terracota sin circulo (02/10/2026). La clienta, sobre la C: "sacando
 * esos circulos y solo usando el dibujito, crecerlo un poco mas".
 *
 * Sin el disco, el dibujo queda directo sobre la terracota. Los svg del panel
 * son marron macizo (#6B4423) y sobre #A8432C casi no se ven, asi que se
 * pasan a blanco con filter: es una sola tinta, brightness(0) la lleva a
 * negro e invert(1) a blanco, sin tocar los archivos.
 *
 * Sube de 66 a 96px: el disco ya no limita, y es lo que hace falta para que
 * el texto que llevan dentro -"20 AÑOS", "FRESCO 100% NATURAL"- se lea.
 */
.rd-perks--e .rd-perks__grid { background: #A8432C; }
.rd-perks--e .rd-perks__grid .rd-perk strong { color: #FFFFFF; }
.rd-perks--e .rd-perks__grid .rd-perk span:not(.rd-perk__icon) { color: #FBE9E2; }
.rd-perks--e .rd-perk > .rd-perk__icon {
    width: 104px;
    height: 104px;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    overflow: visible;
}
.rd-perks--e .rd-perk__icon img {
    width: 96px;
    height: 96px;
    filter: brightness(0) invert(1);
}
.rd-perks--e .rd-perk__icon svg {
    width: 44px;
    height: 44px;
    filter: brightness(0) invert(1);
}

/*
 * Ajuste del 02/10/2026 sobre la maqueta de la clienta: "he juntado textos e
 * icono y adelgazado un poco esa parte". Medido sobre su captura y llevado a
 * 1366px: la franja baja de ~300 a ~266px de alto, el dibujo queda a 12px
 * del titulo, titulo y bajada casi pegados, y la bajada con interlineado
 * corto y un punto mas de peso, que en su maqueta se lee mas firme.
 */
.rd-perks--e .rd-perks__grid { padding-top: 46px; padding-bottom: 46px; }
.rd-perks--e .rd-perk { gap: 12px; }
.rd-perks--e .rd-perk > .rd-perk__icon { width: 100px; height: 100px; }
.rd-perks--e .rd-perk__icon img { width: 100px; height: 100px; }
.rd-perks--e .rd-perk strong { margin-bottom: 2px; }
.rd-perks--e .rd-perks__grid .rd-perk span:not(.rd-perk__icon) {
    line-height: 1.3;
    font-weight: 500;
}

@media (max-width: 767px) {
    body .rd-perks .rd-perks__opcion-nombre { font-size: 20px; }
}

/* -----------------------------------------------------------------------------
 * BUSCADOR: AJUSTES DEL 01/10/2026 (TARDE)
 *
 * 1. «El regalo perfecto» y «en tres respuestas» más juntos.
 * 2. Los nombres de los campos sin negrita y en un marrón más bajito: «jala
 *    mucho la vista».
 * 3. El mismo aire abajo que arriba: el banner queda a 30 px de la caja y la
 *    sección siguiente arrancaba a 56. Se iguala a 30.
 * -------------------------------------------------------------------------- */
body .rd-home .rd-finder__title strong { line-height: 1.05 !important; }
body .rd-home .rd-finder__title span { margin-top: 2px !important; line-height: 1.2; }

body .rd-home .rd-finder__campos select.rd-field {
    font-weight: 400 !important;
    color: var(--rd-ink-3) !important;
}

@media (min-width: 768px) {
    body .rd-home .rd-finder + .rd-regalados { margin-top: 30px !important; }
}

/* La bajada con el mismo grosor que el título (01/10/2026). */
body .rd-home .rd-finder__title span { font-weight: 700 !important; }

/* -----------------------------------------------------------------------------
 * TARJETA MÁS CORTA (01/10/2026, audio de la clienta)
 *
 * Al juntar nombre y precio esperaba que la tarjeta se acortara, y casi no se
 * notaba: el cuerpo seguía en 189 px porque los iconos van en una fila propia
 * debajo del botón. En computadora los iconos pasan a la derecha del precio,
 * en la misma línea, y el cuerpo baja a unos 135 px. La foto no cambia:
 * sigue cuadrada.
 *
 * En el teléfono no: la tarjeta mide ~170 px y cuatro iconos no caben al lado
 * del precio. Allí ya se quitó «Regalar».
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    body .rd-home .rd-regalo__cuerpo {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        align-items: center;
        align-content: start;
    }
    body .rd-home .rd-regalo__nombre { grid-column: 1 / -1; grid-row: 1; }
    body .rd-home .rd-regalo__precio { grid-column: 1; grid-row: 2; }
    /*
     * 02/10/2026: los iconos VUELVEN ABAJO, debajo de «Regalar», como en el
     * diseño. La clienta: con precio en oferta y los cuatro iconos activos,
     * al lado del precio no caben. Se queda lo otro: nombre y precio juntos.
     */
    body .rd-home .rd-regalo__boton { grid-column: 1 / -1; grid-row: 3; margin-top: 12px !important; }
    body .rd-home .rd-regalo__rasgos {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 10px !important;
        min-height: 0 !important;
    }
}

/* Sin el borde negro del foco al pulsar una pastilla (01/10/2026). */
body .rd-home .rd-pastilla,
body .rd-home .rd-pastilla:focus,
body .rd-home .rd-pastilla:focus-visible,
body .rd-home .rd-pastilla:active { outline: none !important; }

/* Teléfono: el texto del icono se abre al tocarlo (index.php), no con :hover,
   que en pantallas táctiles se queda pegado. */
.rd-regalo__rasgo.is-abierto:after { opacity: 1; }
.rd-regalo__rasgo.is-abierto { border-color: #C08A63; }
@media (hover: none) {
    .rd-regalo__rasgo:hover:not(.is-abierto):after { opacity: 0; }
}

/* En el teléfono el texto no va en globito -encima tapaba el precio, debajo
   lo recortaba la tarjeta-: index.php lo escribe como una línea dentro de la
   tarjeta, bajo los iconos (.rd-regalo__rasgo-nota). */
@media (hover: none) {
    .rd-regalo__rasgo:after { display: none; }
    .rd-regalo__rasgos { flex-wrap: wrap; }
}
.rd-regalo__rasgo-nota {
    flex: 1 0 100%;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--rd-ink-2);
}

/* (02/10/2026) Quitado el globito alineado a la derecha: los iconos ya no van
   al lado del precio sino debajo, a la izquierda, como en el resto del sitio. */

/* -----------------------------------------------------------------------------
 * ADORNOS LATERALES (.cont-parallax): SIN EL RECUADRO BLANCO (02/10/2026)
 *
 * El oso, la caja de regalo, etc. de la ficha de producto -y de nosotros,
 * ocasiones, trabaja-con-nosotros- son JPG con fondo blanco, hechos para la
 * pagina blanca de antes. Sobre el beige del rediseño se veian como cajas.
 *
 * multiply deja el blanco del archivo transparente y conserva el trazo. Donde
 * el fondo sigue siendo blanco el resultado es identico, asi que no hace falta
 * acotarlo a la ficha.
 *
 * Va en el CONTENEDOR y no en el <img>: .cont-parallax lleva z-index:-1, que
 * abre su propio contexto de apilamiento, y dentro de el la imagen solo se
 * mezcla con el vacio. Probado en el img: computaba multiply y seguia blanco.
 * -------------------------------------------------------------------------- */
.cont-parallax {
    mix-blend-mode: multiply;
}

/* =============================================================================
 * CATALOGO, OBSERVACIONES DEL DOCX "DISENO WEB" (02/10/2026)
 *
 * Etapa 3 de informe/diseno-web-docx/PLAN.md. Escritorio primero: el
 * responsive no esta aprobado, solo se cuida que no se rompa.
 * ========================================================================== */

/* --- 1. Banner con aire arriba; titulo sin serif y en mayusculas ----------
 * "La imagen debe tener un poquito de margen arriba, esta muy pegada al menu."
 * El titulo, como su referencia (Cheryl's): palo seco, mayusculas, pesado.
 * El color se queda: "el color esta bien como esta actualmente". */
/* La cabecera fija mide 180px y el <main> arranca en 148 (margin-top:150 de
 * index.css, pensado para la cabecera vieja): 32px del banner quedaban debajo
 * del menu. 72 = esos 32 + 40 de aire de verdad. */
.sct-cabecera-catalogo {
    /* 03/10/2026, mockup de la clienta: menos margen arriba y abajo del
     * banner. 32px quedan bajo la cabecera fija; se ven 14. */
    padding-top: 46px !important;
    padding-bottom: 0 !important;
}
.sct-cabecera-catalogo + .sct-busqueda {
    padding-top: 16px !important;
    margin-bottom: 22px !important;
}
.sct-cabecera-catalogo .cabecera-cat-banner {
    margin-bottom: 0 !important;
}
.sct-cabecera-catalogo .cabecera-cat-info h1,
.sct-cabecera-catalogo h1.title-busqueda {
    font-family: var(--rd-sans) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: clamp(24px, 2.3vw, 34px) !important;
    line-height: 1.15 !important;
}

/* --- 2. Buscador: el campo con la forma de los de la web --------------- */
.sct-busqueda .select select#idOcasion {
    border: 1px solid var(--rd-line-2) !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    color: var(--rd-ink-2) !important;
    font-family: var(--rd-sans) !important;
    letter-spacing: .02em !important;
}
.sct-busqueda .select select#idOcasion:focus {
    border-color: var(--rd-accent) !important;
    outline: none;
}

/* --- 3. TARJETA CLASICA DEL CATALOGO (03/10/2026, docx imagen 18) ------
 * La clienta: "No usar este formato que tiene un recuadro blanco abajo. Usar
 * el clasico de foto y abajo nombre y debajo precio" (referencia: Cheryl's /
 * enviaflores). Sin caja: foto redondeada, nombre en palo seco y el precio
 * debajo. "Regalar" aparece sobre la foto al pasar el mouse. Aplica a todos
 * los listados que usan productos.php (catalogo, ocasion, buscador, ofertas).
 * La tarjeta de la portada no cambia. */
.content-products-img:before {
    display: none !important;
}
.content-products-foto {
    border-radius: 16px !important;
}
.description-products-index {
    padding: 12px 2px 6px !important;
}
.description-products-index ul {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 4px !important;
    height: auto !important;
    flex: 0 0 auto !important;
}
.description-products-index .title-dcpt-product {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    /* Otra regla le daba flex-basis 100%: en columna eso lo estiraba a todo
     * el alto y dejaba ~45px entre nombre y precio. */
    flex: 0 0 auto !important;
}
.title-dcpt-product a {
    font-family: var(--rd-sans) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--rd-ink) !important;
}
.description-products-index .precio-prd {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    gap: .3em; /* en flex se pierde el espacio de "S/ 87" */
}
.precio-prd,
.precio-prd span {
    font-family: var(--rd-sans) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--rd-ink) !important;
}
.precio-prd.precio-antes,
.precio-prd.precio-antes span {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--rd-ink-3) !important;
    text-decoration: line-through;
}
.description-products-index .rd-regalo__boton--listado {
    display: none !important;
}

/* "Regalar" sobre la foto, al pasar el mouse (en el telefono, siempre). */
.content-products-foto .rd-pill-regalar--foto {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translate(-50%, 8px);
    z-index: 6;
    background: #fff;
    color: var(--rd-accent);
    border-radius: 999px;
    padding: 9px 26px;
    font-family: var(--rd-sans);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(62, 42, 32, .18);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease, background .2s, color .2s;
}
.content-products-img:hover .rd-pill-regalar--foto {
    opacity: 1;
    transform: translate(-50%, 0);
}
.content-products-foto .rd-pill-regalar--foto:hover {
    background: var(--rd-accent);
    color: #fff;
}
@media (hover: none) {
    .content-products-foto .rd-pill-regalar--foto {
        opacity: 1;
        transform: translate(-50%, 0);
        padding: 7px 18px;
        font-size: 13px;
        bottom: 10px;
    }
}

/* El velo viejo de index.css (fondo claro + "VER DETALLE") no sale; el
 * enlace transparente se queda para que toda la foto lleve a la ficha. */
.content-products-img:hover {
    background: transparent !important;
}
.content-products-img .hovers-busqueda {
    background: transparent !important;
    opacity: 0 !important;
}
.content-products-img .hovers-busqueda .detal {
    display: none !important;
}
/* index.css encogia la foto al 90% al pasar el mouse. */
.content-products-img .content-products-foto img.img-prod {
    transition: transform .45s ease !important;
}
.content-products-img:hover .content-products-foto img.img-prod {
    transform: scale(1.04) !important;
}

/* =============================================================================
 * FICHA DE PRODUCTO, OBSERVACIONES DEL DOCX "DISENO WEB" (02/10/2026)
 *
 * Etapa 4 de informe/diseno-web-docx/PLAN.md, con la lectura corregida de la
 * imagen 27: lo que pide "mas chico y discreto" es la miga de pan.
 * ========================================================================== */

/* --- 1. Fondo blanco --------------------------------------------------- */
body:has(.rd-ficha),
body:has(.rd-ficha) .rd-ficha,
body:has(.rd-ficha) .complement-pedido,
body:has(.rd-ficha) .rd-relacionados {
    background: #fff !important;
}

/* --- 3. Miga de pan chica y discreta ----------------------------------- */
.rd-ficha .rd-miga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    font-family: var(--rd-sans);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rd-ink-3);
}
.rd-ficha .rd-miga a {
    color: var(--rd-ink-3) !important;
    font-size: 13px !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--rd-line-3);
}
.rd-ficha .rd-miga a:hover {
    color: var(--rd-ink) !important;
}
.rd-ficha .rd-miga span {
    font-size: 13px !important;
    color: var(--rd-ink-3);
}

/* --- 6. Titulo mas chico y sin serif; descripcion mas grande -----------
 * Referencia 1800flowers: palo seco, peso medio-alto, y el cuerpo a 17px con
 * interlineado amplio. */
.rd-ficha .detail-detail h1 {
    /* docx: "un poco mas chico y en una letra sin serif" (ref. 1800flowers). */
    font-family: var(--rd-sans) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -.01em;
    color: var(--rd-ink) !important;
    margin: 0 0 10px !important;
}
.rd-ficha .rd-descripcion,
.rd-ficha .rd-descripcion p,
.rd-ficha .rd-descripcion li,
.rd-ficha .rd-descripcion span {
    font-size: 17px !important;
    line-height: 1.7 !important;
    color: var(--rd-ink-2);
}

/*
 * CABECERA DE LA FICHA: RITMO (02/10/2026). Miga, titulo, precio y nota
 * quedaban con huecos desiguales (14 / 10 / pegada) y una linea punteada
 * naranja cortando entre el precio y su nota. Ahora es un solo bloque con
 * escalones regulares: miga 12, titulo 8, precio 8, nota; y la separacion
 * con la descripcion la da un filete fino DEBAJO de la nota.
 */
.rd-ficha .rd-miga { margin-bottom: 12px !important; }
.rd-ficha .detail-detail h1 { margin-bottom: 8px !important; }
.rd-ficha .preciodetal {
    border-bottom: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    width: auto !important;
    align-items: baseline !important;
}
.rd-ficha .preciodetal h3 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
.rd-ficha .preciodetal .price-normal {
    font-size: 17px !important;
    font-weight: 400 !important;
    color: var(--rd-ink-3) !important;
}
.rd-ficha .rd-nota-precio {
    display: block;
    margin: 0 0 0 !important;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rd-line);
    font-size: 13px !important;
    color: var(--rd-ink-3) !important;
}
.rd-ficha .rd-descripcion { margin-top: 20px !important; }

/* Con oferta, el precio actual primero y el anterior tachado despues, en el
 * mismo orden que las tarjetas de producto. */
.rd-ficha .preciodetal .price-desc { order: 1; }
.rd-ficha .preciodetal .price-normal { order: 2; margin-left: 10px; }

/* --- 2. Intro + "Ver descripcion" -------------------------------------- */
.rd-ficha .rd-descripcion {
    position: relative;
    max-height: 9.5em;
    overflow: hidden;
    margin-top: 18px;
}
.rd-ficha .rd-descripcion:not(.is-abierta):after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.4em;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}
.rd-ficha .rd-descripcion.is-abierta {
    max-height: none;
}
.rd-ficha .rd-descripcion__ver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 4px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--rd-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--rd-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}
/* Sin el anillo azul del navegador al pulsarlo, y el texto en terracota: una
 * regla vieja pintaba los <span> de la ficha en naranja #FFB466. */
.rd-ficha .rd-descripcion__ver,
.rd-ficha .rd-descripcion__ver:focus,
.rd-ficha .rd-descripcion__ver:active {
    outline: none !important;
    box-shadow: none !important;
}
.rd-ficha .rd-descripcion__ver span,
.rd-ficha .rd-descripcion__ver svg {
    color: var(--rd-accent) !important;
    font-size: 15px !important;
}
.rd-ficha .rd-descripcion__ver[hidden] {
    display: none;
}
.rd-ficha .rd-descripcion__ver svg {
    transition: transform .2s ease;
}
.rd-ficha .rd-descripcion__ver[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* --- 4. Boton solo "Agregar al carrito", a todo el ancho --------------- */
.rd-ficha .rd-compra-boton {
    flex: 1 1 100%;
}

/* --- 7. Sellos con icono bajo el boton --------------------------------- */
.rd-ficha .rd-sellos {
    list-style: none;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--rd-line);
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
}
/* .detail-detail ul li:before pinta la viñeta rosada de "Que incluye". */
.rd-ficha .rd-sellos li:before {
    display: none !important;
    content: none !important;
}
.rd-ficha .rd-sello {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 170px;
}
.rd-ficha .rd-sello__icono {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rd-bg-warm);
    color: var(--rd-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rd-ficha .rd-sello__icono svg,
.rd-ficha .rd-sello__icono img {
    width: 21px;
    height: 21px;
    display: block;
}
.rd-ficha .rd-sello__txt {
    font-family: var(--rd-sans);
    font-size: 14px !important;
    line-height: 1.35;
    color: var(--rd-ink-2) !important;
}

/* --- 5. Complementos: fotos cuadradas, titulo con bajada, clic = grande - */
.complement-pedido .title-complement h2 {
    margin-bottom: 2px !important;
}
.complement-pedido .rd-compl-bajada {
    margin: 0 0 18px;
    font-family: var(--rd-sans);
    font-size: 15px;
    color: var(--rd-ink-3);
}
.complement-pedido .item.img-gallery figure {
    aspect-ratio: 1 / 1;
    height: auto !important;
    /* Una regla anterior le daba flex:1 para llenar la tarjeta: con todas las
     * tarjetas a la altura de la mas alta, la foto salia vertical. */
    flex: none !important;
    min-height: 0 !important;
    overflow: hidden;
    cursor: zoom-in;
    margin: 0;
}
.complement-pedido .item.img-gallery figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform .4s ease;
}
/* Un <div class="hovers"> vacio, de la version vieja, cubre la foto y se
 * quedaba con el clic: la foto grande no se abria nunca. Que lo deje pasar. */
.complement-pedido .item.img-gallery .hovers {
    pointer-events: none !important;
}
/* Las tarjetas se igualaban a la mas alta -la de taza personalizada, con su
 * campo de nombre- y a las demas les quedaban ~135px en blanco bajo el
 * precio. Ahora cada una mide lo que su contenido; como foto, nombre y precio
 * miden lo mismo en todas, la fila se sigue leyendo alineada. */
.complement-pedido .owl-stage {
    align-items: flex-start !important;
}
.complement-pedido .owl-item,
.complement-pedido .item.img-gallery {
    height: auto !important;
}
.complement-pedido .item.img-gallery figure:hover img {
    transform: scale(1.04);
}

/* margin:auto e inset:0 a mano: index.css pone `* { margin: 0 }` y eso le
 * quita al <dialog> el centrado que trae el navegador. */
.rd-compl-dlg {
    position: fixed;
    inset: 0;
    margin: auto !important;
    height: fit-content;
    max-height: calc(100vh - 32px);
    width: min(760px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(62, 42, 32, .28);
    overflow: hidden;
}
.rd-compl-dlg[open] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.rd-compl-dlg::backdrop {
    background: rgba(44, 29, 22, .45);
}
.rd-compl-dlg__foto {
    aspect-ratio: 1 / 1;
    background: var(--rd-bg-warm);
}
.rd-compl-dlg__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rd-compl-dlg__datos {
    padding: 40px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--rd-sans);
}
body .rd-compl-dlg h3.rd-compl-dlg__nombre,
.rd-compl-dlg__nombre {
    margin: 0;
    font-family: var(--rd-sans) !important;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rd-ink);
    text-transform: none;
}
.rd-compl-dlg__desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--rd-ink-2);
}
.rd-compl-dlg__precio {
    margin: 6px 0 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--rd-ink);
}
.rd-compl-dlg__elegir {
    margin-top: auto;
    height: 50px;
    border: 0;
    border-radius: 999px;
    background: var(--rd-accent);
    color: #fff;
    font-family: var(--rd-sans);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.rd-compl-dlg__elegir:hover {
    background: var(--rd-accent-dark);
}
.rd-compl-dlg__elegir.is-elegido {
    background: #fff;
    color: var(--rd-accent);
    box-shadow: inset 0 0 0 1.5px var(--rd-accent-line);
}
.rd-compl-dlg__cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(62, 42, 32, .15);
    font-size: 22px;
    line-height: 1;
    color: var(--rd-ink);
    cursor: pointer;
}
@media (max-width: 640px) {
    .rd-compl-dlg[open] {
        grid-template-columns: 1fr;
    }
    .rd-compl-dlg__datos {
        padding: 22px 20px 20px;
    }
}

/* -----------------------------------------------------------------------------
 * COMPLEMENTO = MISMA TARJETA QUE LA DE PRODUCTO (02/10/2026)
 *
 * Mismo componente que .rd-regalo de la portada y el listado: tarjeta blanca
 * de radio 20 sin borde, nombre en Newsreader en caja normal, precio en Karla
 * con el mismo formato ("S/ 3.50", "S/ 15"), y la accion debajo a todo el
 * ancho como pildora de contorno. Aqui la accion dice "Agregar" porque marca
 * el complemento; al elegirlo se rellena en terracota y dice "Elegido".
 * -------------------------------------------------------------------------- */
.complement-pedido .item.img-gallery {
    border: 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 0 rgba(62, 42, 32, .06), 0 0 0 1px var(--rd-line);
    overflow: hidden;
}
.complement-pedido .item.img-gallery:has(input:checked) {
    box-shadow: 0 0 0 1.5px var(--rd-accent);
}
.complement-pedido .item.img-gallery figure {
    border-radius: 0 !important;
}
.complement-pedido .info-complement {
    padding: 14px 16px 16px !important;
}
body .complement-pedido .title-prod-cmpl {
    font-family: var(--rd-serif) !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    color: var(--rd-ink) !important;
}
body .complement-pedido .title-prod-cmpl small {
    margin-top: 2px;
    font-family: var(--rd-sans) !important;
    font-size: 13px !important;
    color: var(--rd-ink-3) !important;
}
.complement-pedido .rd-compl-pie {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 6px !important;
}
body .complement-pedido .rd-compl-pie .prc-compl,
body .complement-pedido .rd-compl-pie .prc-compl span {
    font-family: var(--rd-sans) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--rd-ink) !important;
}
body .complement-pedido .rd-compl-pie .btn-agregar {
    width: 100% !important;
    justify-content: center !important;
    padding: 9px 0 !important;
    border: 1.5px solid var(--rd-accent-line) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--rd-accent) !important;
    font-family: var(--rd-sans) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}
body .complement-pedido .rd-compl-pie .btn-agregar .rd-compl-txt {
    font-size: 12.5px !important;
    color: inherit !important;
}
body .complement-pedido .item.img-gallery:hover .rd-compl-pie .btn-agregar,
body .complement-pedido .rd-compl-pie .btn-agregar:has(input:checked) {
    background: var(--rd-accent) !important;
    border-color: var(--rd-accent) !important;
    color: #fff !important;
}

/* -----------------------------------------------------------------------------
 * FOTO DE LA FICHA ENTRE ~770 Y 991px (02/10/2026)
 *
 * Una regla anterior le pone max-width:650px a la foto, y la caja .gallery-img
 * tiene 650 de alto fijo. En esas medidas la columna mide 690-848px: la foto
 * se quedaba en 650x650 arrimada a la izquierda y se veia el fondo rosado a
 * la derecha y abajo. La foto llena siempre su caja cuadrada.
 * -------------------------------------------------------------------------- */
.rd-ficha .gallery-detail .tab-content .gallery-img {
    width: 100% !important;
    height: 100% !important;
}
.rd-ficha .gallery-detail .tab-content .gallery-img img {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* -----------------------------------------------------------------------------
 * SIN CONTORNO DE FOCO EN TODA LA WEB (02/10/2026, pedido explicito)
 *
 * El aro azul del navegador -y el box-shadow de foco de Bootstrap- salia al
 * pulsar enlaces y botones, y en las ventanas (dialog) sobre la X, porque el
 * navegador le pasa el foco al abrir. Se quita en enlaces, botones, campos de
 * seleccion y etiquetas. Los campos de texto conservan su borde de foco
 * propio (cambia el color del borde), que no es este contorno.
 * -------------------------------------------------------------------------- */
a, a:focus, a:active, a:focus-visible,
button, button:focus, button:active, button:focus-visible,
[role="button"], [role="button"]:focus, [role="button"]:focus-visible,
label:focus, label:focus-within, summary:focus, summary:focus-visible,
select:focus, select:focus-visible,
input[type="checkbox"]:focus, input[type="radio"]:focus,
.btn:focus, .btn:active, .btn:focus-visible,
dialog:focus, dialog *:focus {
    outline: none !important;
}
/* Solo el anillo de Bootstrap (.btn): otros botones usan box-shadow como
 * borde a proposito y se quedarian sin el al pulsarlos. */
.btn:focus, .btn:active:focus, .btn.focus {
    box-shadow: none !important;
}

/* -----------------------------------------------------------------------------
 * FICHA: MINI FOTOS A LA IZQUIERDA EN PC (docx "Diseño WEB", producto, imagen
 * 24, 03/10/2026). "En PC las mini fotos a la izquierda. Debemos usar el
 * espacio de la pagina." Como enviaflores: columna de miniaturas a la
 * izquierda y la foto grande a su lado ocupando el resto de la columna. En el
 * telefono se quedan debajo de la foto.
 * -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* La seccion medía el 82% de la pantalla (1181 de 1440px) por una regla
     * vieja de container-fluid: a los lados quedaban 130px vacios. */
    .sct-detail-product.rd-ficha {
        width: 100% !important;
        max-width: 1600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .rd-ficha > .row {
        grid-template-columns: 1.2fr .8fr;
        gap: 56px;
    }
    .rd-ficha .gallery-detail > .row {
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }
    .rd-ficha .gallery-detail .regalb {
        order: 0;
        grid-column: 1;
        grid-row: 1;
        margin-top: 0;
        width: 92px;
    }
    .rd-ficha .gallery-detail > .row > .col-12.col-md-10 {
        grid-column: 2;
        grid-row: 1;
    }
    .rd-ficha .gallery-detail #v-pills-tab {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* -----------------------------------------------------------------------------
 * MENU: MISMA SEPARACION A LOS DOS LADOS DEL LOGO (docx, imagen 13, 03/10/2026)
 * "Algunos se ven mas separados que otros." Cada mitad es una lista con
 * space-between que reparte su sobrante por su cuenta; la derecha tiene textos
 * mas largos (455px contra 410), asi que le tocaban huecos de 33px y a la
 * izquierda de 44. Ahora el hueco es fijo e igual, y cada mitad se arrima al
 * logo. "REGALOS CORPORATIVOS" sigue en una linea.
 * -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    #navbarSupportedContent > ul.navbar-nav {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: clamp(10px, calc(4.2vw - 24px), 36px);
    }
    #navbarSupportedContent > ul.navbar-nav:first-child {
        justify-content: flex-end !important;
    }
    #navbarSupportedContent > ul.navbar-nav > li.nav-item > a.nav-link {
        white-space: nowrap;
    }
}

/* -----------------------------------------------------------------------------
 * FLECHAS PARA PASAR FOTOS EN EL LISTADO (docx, catalogo punto 4, 03/10/2026)
 * Los mismos circulos blancos de las flechas de los carruseles. Solo en PC
 * (con raton) y al pasar sobre la tarjeta; en el telefono no se ven.
 * -------------------------------------------------------------------------- */
.content-products-foto .rd-foto-flecha {
    display: none;
}
@media (hover: hover) and (min-width: 992px) {
    .content-products-foto .rd-foto-flecha {
        position: absolute;
        top: 50%;
        z-index: 7;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .94);
        color: var(--rd-ink);
        box-shadow: 0 4px 14px rgba(62, 42, 32, .18);
        cursor: pointer;
        opacity: 0;
        transform: translateY(-50%);
        transition: opacity .2s ease, background .2s ease;
    }
    .content-products-foto .rd-foto-flecha--izq { left: 12px; }
    .content-products-foto .rd-foto-flecha--der { right: 12px; }
    .content-products-img:hover .content-products-foto .rd-foto-flecha {
        opacity: 1;
    }
    .content-products-foto .rd-foto-flecha:hover {
        background: #fff;
    }
}


/* =============================================================================
 * OBSERVACIONES DE CATALOGO Y PRODUCTO (05/10/2026)
 *
 * Tres paginas de capturas con comentarios de la clienta. Cada bloque cita el
 * pedido. Va al final para ganar a las reglas del 02-03/10 sin tocarlas.
 * ========================================================================== */

/* --- CATALOGO 1. "Debe estar sobre fondo blanco mejor" ------------------- */
body:has(main.catalogo-full),
main.catalogo-full,
main.catalogo-full .sct-cabecera-catalogo,
main.catalogo-full .sct-busqueda,
main.catalogo-full .sct-products {
    background-color: #fff !important;
}

/* --- CATALOGO 2. Fotos en una tira: el dedo en el telefono, flechas en PC - */
/* Absoluta: con height:100% contra el aspect-ratio de la caja medía 0 de alto
 * y el navegador no la dejaba desplazar. */
.content-products-foto .rd-fotos__pista {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-radius: inherit;
}
.content-products-foto .rd-fotos__pista::-webkit-scrollbar {
    display: none;
}
.content-products-foto .rd-fotos__foto {
    flex: 0 0 100%;
    height: 100%;
    display: block;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
}
.content-products-foto .rd-fotos__foto picture {
    display: block;
    height: 100%;
}
/* Una regla vieja deja la foto en absolute: sin esto las fotos de la tira se
 * apilaban en la misma esquina y se veia la ultima, mas angosta que la caja. */
.content-products-foto .rd-fotos__foto {
    position: relative;
}
.content-products-foto .rd-fotos__foto img.img-prod {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover;
}

/* "Usar una transicion mas suave cuando aparezcan las flechas" (enviaflores):
 * aparecen con un fundido mas lento y entrando desde el borde, no de golpe. */
@media (hover: hover) and (min-width: 992px) {
    .content-products-foto .rd-foto-flecha {
        transition: opacity .45s cubic-bezier(.22, .61, .36, 1),
                    transform .45s cubic-bezier(.22, .61, .36, 1),
                    background .2s ease !important;
    }
    .content-products-foto .rd-foto-flecha--izq {
        transform: translate(-10px, -50%) !important;
    }
    .content-products-foto .rd-foto-flecha--der {
        transform: translate(10px, -50%) !important;
    }
    .content-products-img:hover .content-products-foto .rd-foto-flecha {
        transform: translate(0, -50%) !important;
    }
}

/* Puntos: solo donde no hay flechas (telefono y tablet). */
.content-products-foto .rd-fotos__puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 6;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
}
.content-products-foto .rd-fotos__puntos i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 0 0 .5px rgba(62, 42, 32, .18);
    transition: width .25s ease, background .25s ease;
}
.content-products-foto .rd-fotos__puntos i.is-activo {
    width: 16px;
    background: #fff;
}
@media (hover: hover) and (min-width: 992px) {
    .content-products-foto .rd-fotos__puntos {
        display: none;
    }
}

/* --- CATALOGO 3. Nombre y precio mas cerca de la foto -------------------- */
.content-products-img .description-products-index {
    margin-top: 0 !important;
    padding: 8px 2px 4px !important;
}
.content-products-img .description-products-index ul {
    gap: 2px !important;
}

/* --- CATALOGO 4. Precio al lado del tachado, y el S/ pegado y mas chico --- */
.description-products-index .precio-prd.precio-ahora {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: baseline !important;
    gap: 2px 9px !important;
}
.description-products-index .precio-prd .rd-precio-actual {
    display: inline-flex;
    align-items: baseline;
}
.description-products-index .precio-prd span.precio-antes,
.description-products-index .precio-prd span.precio-antes span {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--rd-ink-4) !important;
    text-decoration: line-through;
}
/* "Se puede cambiar el simbolo de soles? Siento que esta muy separado" (como
 * en su web actual: s/159.00). Va pegado al numero, en minuscula y mas chico. */
.rd-soles,
.description-products-index .precio-prd span.rd-soles,
body .complement-pedido .prc-compl span.rd-soles {
    font-size: .72em !important;
    font-weight: 600 !important;
    text-transform: lowercase;
    letter-spacing: 0;
    margin-right: 1px;
}
.description-products-index .precio-prd span.precio-antes span.rd-soles {
    font-size: 11px !important;
}

/* --- CATALOGO 5. Iconos al pasar el mouse, como en la portada ------------- */
.description-products-index .rd-tarjeta-rasgos {
    margin-top: 10px;
}
@media (hover: hover) and (min-width: 992px) {
    .description-products-index .rd-tarjeta-rasgos {
        opacity: 0;
        transform: translateY(4px);
        transition: opacity .35s ease, transform .35s ease;
    }
    .content-products-img:hover .description-products-index .rd-tarjeta-rasgos {
        opacity: 1;
        transform: none;
    }
}
@media (max-width: 991.98px) {
    .description-products-index .rd-tarjeta-rasgos {
        margin-top: 6px;
        gap: 6px;
    }
    .description-products-index .rd-tarjeta-rasgos .rd-regalo__rasgo {
        width: 28px;
        height: 28px;
    }
    .description-products-index .rd-tarjeta-rasgos .rd-regalo__rasgo svg {
        width: 15px;
        height: 15px;
    }
}

/* --- CATALOGO 6. Banner en el telefono ------------------------------------
 * "En responsive el banner no se ve bien" (referencia: 1800flowers). A todo
 * el ancho y bajo, con el titulo pegado debajo y el texto chico. La foto que
 * se ve es el "Banner movil" de la categoria (panel, Categorias); si fuera
 * cuadrada, se recorta al centro para no ocupar la pantalla entera. */
@media (max-width: 767.98px) {
    .sct-cabecera-catalogo {
        padding-top: 22px !important;
    }
    .sct-cabecera-catalogo .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    .sct-cabecera-catalogo .cabecera-cat-fila {
        row-gap: 0 !important;
    }
    .sct-cabecera-catalogo .cabecera-cat-banner {
        margin: 0 !important;
    }
    .sct-cabecera-catalogo .cabecera-cat-banner-col img {
        width: 100%;
        height: auto;
        max-height: 58vw;
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
    }
    .sct-cabecera-catalogo .cabecera-cat-info--separada {
        border-top: 0 !important;
        margin-top: 0 !important;
        padding-top: 12px !important;
    }
    .sct-cabecera-catalogo .cabecera-cat-info h1,
    .sct-cabecera-catalogo h1.title-busqueda {
        font-size: 21px !important;
        letter-spacing: .05em !important;
        margin: 0 0 4px !important;
    }
    .sct-cabecera-catalogo .cabecera-cat-texto,
    .sct-cabecera-catalogo .cabecera-cat-texto p {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        margin-bottom: 0 !important;
    }
    .sct-cabecera-catalogo + .sct-busqueda {
        padding-top: 12px !important;
        margin-bottom: 14px !important;
    }
}

/* --- FICHA 1. El texto mas arriba, la lista en una columna ---------------- */
.rd-ficha .rd-descripcion {
    margin-top: 14px !important;
}
.rd-ficha .detail-detail .rd-descripcion ul {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
}

/* --- FICHA 2. Caja de fecha y hora como la maqueta ------------------------ */
.rd-personaliza .entrega-titulo {
    margin-top: 0 !important;
}

/* --- FICHA 3. Complementos: mas cerca del producto, mas anchos ----------- */
.complement-pedido {
    padding-top: 8px !important;
    /* Aire antes del pie: los botones «Agregar» quedaban a 34 px de la banda
       oscura (observacion de Joseph, 17/10/2026). */
    padding-bottom: 72px !important;
}
@media (max-width: 767px) {
    .complement-pedido { padding-bottom: 48px !important; }
}
.complement-pedido > .container-fluid {
    width: 100% !important;
    max-width: 1340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.complement-pedido .title-complement {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.complement-pedido .title-complement h2 {
    margin: 0 !important;
}
.complement-pedido .rd-compl-bajada {
    margin: 0 0 16px !important;
    line-height: 1.3;
}
/* Por debajo de 1200 el carrusel iba de borde a borde de la pantalla. */
@media (max-width: 1199.98px) {
    .complement-pedido .gallery-complement {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}
/* 56px a cada lado es el sitio de las flechas, que solo salen desde 1200. */
@media (min-width: 1200px) {
    .complement-pedido .title-complement {
        padding-left: 56px !important;
    }
    .complement-pedido .gallery-complement {
        padding-left: 56px !important;
        padding-right: 56px !important;
    }
}

/* --- FICHA 4. Tarjeta de complemento sin bordes, Agregar al final --------
 * "Hay que usar este formato, sin bordes, con el boton agregar debajo del
 * nombre a personalizar". Foto, nombre, medida y precio centrados; el campo
 * de la taza (si lo lleva) y debajo "Agregar". */
.complement-pedido .item.img-gallery,
.complement-pedido .item.img-gallery:has(input:checked) {
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}
.complement-pedido .item.img-gallery figure {
    border-radius: 14px !important;
}
.complement-pedido .info-complement {
    padding: 12px 4px 4px !important;
    text-align: center;
}
.complement-pedido .info-complement ul,
.complement-pedido .info-complement li {
    text-align: center !important;
}
body .complement-pedido .title-prod-cmpl {
    cursor: zoom-in;
}
.complement-pedido .rd-compl-pie {
    align-items: center !important;
}
.complement-pedido .rd-compl-pie .prc-compl {
    align-self: center !important;
}
.complement-pedido .rd-compl-taza {
    width: 100%;
    margin: 0 !important;
    flex-wrap: nowrap;
}
.complement-pedido .rd-compl-taza .span-taza {
    background: var(--rd-bg-soft);
    border: 1px solid var(--rd-line-2);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    padding: 0 10px;
}
.complement-pedido .rd-compl-taza .input-taza {
    height: 36px;
    border: 1px solid var(--rd-line-2);
    border-left: 0;
    border-radius: 0 999px 999px 0 !important;
    font-family: var(--rd-sans);
    font-size: 12.5px;
    color: var(--rd-ink);
    box-shadow: none !important;
}
/* En el telefono el :hover se queda pegado tras un toque y la pastilla
 * parecia elegida sin estarlo: el relleno al pasar el mouse, solo con mouse. */
@media (hover: none) {
    body .complement-pedido .item.img-gallery:hover .rd-compl-pie .btn-agregar:not(:has(input:checked)) {
        background: transparent !important;
        border-color: var(--rd-accent-line) !important;
        color: var(--rd-accent) !important;
    }
}

/* Cada tarjeta traia 64px de margen abajo (index.css, 4rem): con "Suele
 * regalarse junto con" debajo quedaban 130px de vacio entre las dos. */
.complement-pedido .owl-item .item.img-gallery {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* Centrado de verdad: la lista es flex y encogia cada linea a su texto. */
.complement-pedido .info-complement ul {
    align-items: stretch !important;
    padding: 0 !important;
}
body .complement-pedido .title-prod-cmpl {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Nombre + una linea de medida: los que no traen medida (Empanada) no
     * suben el precio y el boton respecto de sus vecinos. */
    min-height: 44px !important;
}
body .complement-pedido .title-prod-cmpl small {
    display: block;
    margin: 2px 0 0 !important;
    padding: 0 !important;
}
.complement-pedido .info-complement,
.complement-pedido .item.img-gallery:hover .info-complement {
    background: transparent !important;
}
.complement-pedido .rd-compl-pie {
    padding-bottom: 0 !important;
}
/* El velo crema de la version vieja (div.hovers) cubria media tarjeta al
 * pasar el mouse; sin bordes se notaba como una mancha. */
.complement-pedido .item.img-gallery .hovers {
    display: none !important;
}
/* El s/ de la ficha toma el color del precio, no el naranja de la hoja vieja. */
.rd-ficha .preciodetal .rd-soles,
.rd-relacionado__precio .rd-soles {
    color: inherit !important;
}

/* --- FICHA 5. "Suele regalarse junto con" mas arriba ---------------------- */
.rd-relacionados {
    padding-top: 28px !important;
}
.rd-relacionados h2 {
    margin-bottom: 16px !important;
}

/* =============================================================================
 * OBSERVACIONES DE LA FICHA EN EL TELEFONO (05/10/2026, segunda tanda)
 * La clienta revisando desde su celular. Ver informe/catalogo-ficha-0510.
 * ========================================================================== */
@media (max-width: 767.98px) {
    /* "La foto principal debe verse en todo el ancho, como mi web actual":
     * de borde a borde de la pantalla, sin esquinas redondeadas. La seccion
     * mide el 92% con 4% de margen a cada lado (container-fluid viejo). Desde
     * 768 la galeria ya es una columna y no se toca. */
    .rd-ficha .gallery-detail .tab-content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: -4vw !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
    }
}
@media (max-width: 991.98px) {

    /* "Las 5 fotos deben poder verse en una sola linea": cinco columnas fijas.
     * Con menos fotos quedan del mismo tamano, alineadas a la izquierda. */
    .rd-ficha .gallery-detail #v-pills-tab {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    /* "Quitar ese resaltado de la foto": sin borde rojo en la activa, y las
     * demas sin el velo blanco que las dejaba al 40%. */
    .rd-ficha .gallery-detail #v-pills-tab .nav-link,
    .rd-ficha .gallery-detail #v-pills-tab .nav-link.active {
        border-color: transparent !important;
        border-width: 0 !important;
        opacity: 1 !important;
    }

    /* "Aqui hay que acortar la distancia entre los textos y la foto": eran
     * 56px entre las miniaturas y la miga (hueco de la rejilla + margenes). */
    .rd-ficha > .row {
        row-gap: 0 !important;
        gap: 0 !important;
    }
    .rd-ficha .detail-detail {
        margin-top: 18px !important;
    }
    .rd-ficha .detail-detail > .col {
        padding-top: 0 !important;
    }
}

/* --- Sellos bajo "Agregar al carrito" ---------------------------------------
 * "Estos iconos pueden ser sin fondo y mas pequenos? Como este (Magia.pe).
 * Incluso tienen una rayita que los separa." Y "en responsive que se vea en
 * una linea, no en 2". Icono de trazo sin circulo, en una fila centrada, con
 * una linea vertical entre sello y sello. Vale para PC y telefono. */
/* La regla de la lista "Que incluye" (.detail-detail ul) le ganaba y la
 * dejaba en rejilla, que bajo 600px es de una columna: dos lineas. */
.rd-ficha .detail-detail ul.rd-sellos {
    display: flex !important;
    grid-template-columns: none !important;
}
.rd-ficha .rd-sellos {
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    gap: 0 !important;
}
.rd-ficha .rd-sello {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    gap: 7px !important;
    padding: 0 18px;
}
.rd-ficha .rd-sello + .rd-sello {
    border-left: 1px solid var(--rd-line-2);
}
.rd-ficha .rd-sello__icono {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--rd-ink-2) !important;
}
.rd-ficha .rd-sello__icono svg,
.rd-ficha .rd-sello__icono img {
    width: 20px !important;
    height: 20px !important;
}
.rd-ficha .rd-sello__txt {
    font-size: 13.5px !important;
    white-space: nowrap;
}
@media (max-width: 991.98px) {
    .rd-ficha .rd-sello {
        padding: 0 12px;
        gap: 6px !important;
    }
    .rd-ficha .rd-sello__txt {
        font-size: 12.5px !important;
    }
    .rd-ficha .rd-sello__icono svg,
    .rd-ficha .rd-sello__icono img {
        width: 18px !important;
        height: 18px !important;
    }
}

/*
 * FICHA EN MOVIL: PRECIO PEGADO AL NOMBRE (07/10/2026, pedido de la clienta).
 * Entre nombre y precio sumaban 8px de margen mas el interlineado de 33px del
 * precio; debajo del precio, ~40px: 14 de margen del bloque mas 10 de margen
 * y 10 de relleno del primer parrafo, que viene pegado del editor.
 */
@media (max-width: 767px) {
  .rd-ficha .detail-detail h1 { margin-bottom: 2px !important; }
  .rd-ficha .detail-detail .preciodetal { line-height: 1.15 !important; margin-bottom: 0 !important; }
  .rd-ficha .detail-detail .rd-descripcion { margin-top: 10px !important; }
  .rd-ficha .detail-detail .rd-descripcion > p:first-child { margin-top: 0 !important; padding-top: 0 !important; }
}

/*
 * FICHA EN MOVIL: "Hazlo extra especial" a 3px del borde (07/10/2026). La fila
 * del titulo trae el margin:-15px de .row y el .container-fluid no tiene
 * relleno que lo compense; las tarjetas de debajo si van a 16px.
 */
@media (max-width: 767px) {
  .complement-pedido > .container-fluid > .row:has(> .title-complement) { margin-left: 0 !important; margin-right: 0 !important; }
  .complement-pedido .title-complement { padding-left: 16px !important; padding-right: 16px !important; }
}

/*
 * FICHA: el nombre a personalizar (y el globo) fuera de la caja de fecha y hora
 * (07/10/2026). Mismo aspecto que los campos de la caja, y la esquina derecha
 * redondeada como la izquierda: Bootstrap y las hojas viejas la dejaban recta.
 */
.rd-personaliza-extra:not(:has(*)) { display: none; } /* sin globo ni nombre: solo queda espacio en blanco */
.rd-personaliza-extra { margin: 0 0 22px; }
.rd-personaliza-extra .select-detail { margin-top: 0; }
.rd-personaliza-extra .input-group { margin-top: 0 !important; flex-wrap: nowrap; }
.rd-personaliza-extra .input-group .span-taza {
    background: var(--rd-bg-warm);
    border: 1px solid var(--rd-line) !important;
    border-right: none !important;
    border-radius: 10px 0 0 10px !important;
    padding: 0 12px;
    display: flex;
    align-items: center;
}
.rd-personaliza-extra .input-group .input-taza {
    height: auto;
    border: 1px solid var(--rd-line) !important;
    border-left: none !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 11px 12px;
    font-size: 14px;
    font-family: var(--rd-sans);
    background: var(--rd-bg-soft);
    color: var(--rd-ink);
    box-shadow: none !important;
}

/*
 * PRECIO TACHADO CON UNA SOLA RAYA (07/10/2026). Con text-decoration, el "S/"
 * mas chico y el numero se tachan cada uno a su altura (Safari en iPhone) y
 * salen dos rayas: "deberia ser una sola raya que tache todo". Se apaga el
 * tachado del texto y se dibuja una linea encima de toda la caja.
 */
.precio-antes,
.precio-prd.precio-antes,
.description-products-index .precio-prd span.precio-antes,
.rd-ficha .h3-prctotl.price-normal,
.rd-regalo__antes,
.car-linea-antes {
    text-decoration: none !important;
    position: relative;
}
.precio-antes *,
.rd-ficha .h3-prctotl.price-normal *,
.rd-regalo__antes *,
.car-linea-antes * {
    text-decoration: none !important;
}
.precio-antes::after,
.precio-prd.precio-antes::after,
.description-products-index .precio-prd span.precio-antes::after,
.rd-ficha .h3-prctotl.price-normal::after,
.rd-regalo__antes::after,
.car-linea-antes::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 55%;
    border-top: 1px solid currentColor;
    pointer-events: none;
}

/*
 * DESCRIPCION SIN LA RAYA ENCIMA DE "INCLUYE" (07/10/2026): "esta raya en la
 * descripcion, se puede quitar mejor? asi sube un poco mas el texto". Era el
 * borde superior de la lista mas 18px de relleno. Los sellos (.rd-sellos)
 * conservan su filete.
 */
.rd-ficha .detail-detail ul:not(.rd-sellos) {
    border-top: 0 !important;
    padding-top: 4px !important;
}


/* =============================================================================
 * PORTADA — OBSERVACIONES DEL 07/10/2026
 *
 * Cinco puntos del correo de la clienta. Van al final de la hoja a proposito:
 * cada uno pisa reglas que ya existian mas arriba (la variante E de los
 * sellos, la rejilla de testimonios, la franja de los pasos), y asi se gana
 * por orden sin subir la especificidad mas de lo necesario.
 * ========================================================================== */

/* --- 1. DESCUBRE NUESTROS CATALOGOS ---------------------------------------
 * "habria que poner sobre un fondo mas claro sutilmente como para marcar la
 * diferencia con lo que hay debajo que es Instagram". Toda la seccion va
 * sobre el crema claro de las tarjetas (--rd-bg-soft) y cierra con su propio
 * aire abajo, asi la banda se lee como un bloque y el feed arranca despues.
 */
.rd-catalogos {
    background: var(--rd-bg-soft, #FBF6F1);
    margin-top: 48px;
    padding-top: 44px;
    padding-bottom: 48px;
}
.rd-catalogos .rd-catalogos__flecha {
    top: calc(50% + 18px);
}

/* --- 4. LA BARRA DE SELLOS, MAS DELGADA EN LA PC ---------------------------
 * "En PC hay que adelgazar un poco mas esta barra". Se quita aire arriba y
 * abajo y el dibujo baja de 100 a 84 px: el texto de dentro ("20 AÑOS",
 * "FRESCO 100% NATURAL") se sigue leyendo a ese tamaño. Pasa de 266 a unos
 * 210 px de alto.
 */
.rd-perks.rd-perks--e .rd-perks__grid {
    padding-top: 30px;
    padding-bottom: 30px;
}
.rd-perks.rd-perks--e .rd-perk {
    gap: 8px;
}
.rd-perks.rd-perks--e .rd-perk > .rd-perk__icon,
.rd-perks.rd-perks--e .rd-perk__icon img {
    width: 84px;
    height: 84px;
}
.rd-perks.rd-perks--e .rd-perk strong {
    font-size: 19px;
}

/* --- 5. TESTIMONIOS: UNA FILA QUE PASA ------------------------------------
 * "tal vez 2 por pagina y que vayan pasando". La rejilla pasa a ser una pista
 * con desplazamiento horizontal, como el feed: cuatro a la vista en la PC
 * (o los que haya, si son menos) y dos en el telefono. index.php pone las
 * flechas y el avance automatico.
 *
 * Y "sobre un fondo un poquito mas claro, como para marcar una diferencia con
 * lo que esta arriba": el mismo crema claro de los catalogos.
 */
.rd-opiniones {
    background: var(--rd-bg-soft, #FBF6F1);
    margin-top: 56px;
}
.rd-opiniones__marco {
    position: relative;
    max-width: calc(var(--n, 4) * 330px);
    margin: 0 auto;
}
.rd-opiniones .rd-opiniones__fila {
    display: flex;
    max-width: none;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.rd-opiniones .rd-opiniones__fila::-webkit-scrollbar {
    display: none;
}
.rd-opiniones .rd-opiniones__fila .rd-opinion {
    flex: 0 0 calc(100% / var(--n, 4));
    min-width: 0;
    scroll-snap-align: start;
}
.rd-opinion__enlace {
    display: block;
    border-radius: 50%;
    margin-bottom: 26px;
}
.rd-opinion__enlace .rd-opinion__foto {
    margin-bottom: 0;
    transition: transform .3s ease, box-shadow .3s ease;
}
.rd-opinion__enlace:hover .rd-opinion__foto,
.rd-opinion__enlace:focus-visible .rd-opinion__foto {
    transform: scale(1.04);
    box-shadow: 0 8px 22px rgba(62, 42, 32, .18);
}
.rd-opiniones__flecha {
    position: absolute;
    top: 75px;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--rd-line-2, #E4D8CE);
    background: #fff;
    color: var(--rd-ink, #3E2A20);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(62, 42, 32, .14);
}
.rd-opiniones__flecha[hidden] { display: none; }
.rd-opiniones__flecha--izq { left: -6px; }
.rd-opiniones__flecha--der { right: -6px; }

/* --- 6. COMO COMPRAR, MAS DELGADO EN LA PC ---------------------------------
 * "En PC podria ser un poco mas delgado". Menos aire arriba y abajo, el
 * titulo un punto mas chico y los numeros mas cerca de su titulo.
 */
.rd-steps {
    padding-top: 44px;
    padding-bottom: 44px;
}
body .rd-steps h2 {
    font-size: 31px !important;
    margin-bottom: 10px;
}
.rd-steps .rd-steps__intro {
    font-size: 15px;
    line-height: 1.6;
}
.rd-steps .rd-step__n {
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
}
.rd-steps .rd-step__t {
    margin-bottom: 4px;
}

/* --- TELEFONO ------------------------------------------------------------- */

@media (max-width: 767px) {

    /* 1. "En responsive, Desayunos se lee cortado". La tarjeta media 112 px
       con el nombre a 25 px: "Desayunos" no entraba. Dos tarjetas y media a
       la vista y el nombre a 17 px, que es lo que deja entero el mas largo. */
    /* El margen izquierdo va en la fila y no en la seccion: puesto en la
       seccion, el titulo centrado quedaba 8 px corrido a la derecha. */
    .rd-catalogos {
        margin-top: 32px;
        padding: 30px 0;
    }
    .rd-catalogos .rd-catalogo {
        flex-basis: 40%;
        border-radius: 12px;
    }
    .rd-catalogos .rd-catalogo__name {
        top: 10px;
        left: 11px;
        right: 8px;
        font-size: 17px;
        overflow-wrap: normal;
        word-break: normal;
    }
    .rd-catalogos .rd-catalogos__pista {
        padding-left: 16px;
        padding-right: 16px;
        scroll-padding-left: 16px;
        gap: 10px;
    }

    /* 2. "bajar un poquito el FEED MAS..." Con la banda clara de los
       catalogos cerrando arriba, el feed arranca con su propio aire. */
    .rd-feed {
        padding-top: 34px;
    }

    /* 3. "esta parte es muy larga ... puede ser 2 arriba y 2 abajo". Pasaba
       de 840 px a unos 400: dos columnas, el dibujo a 60 px, y la bajada mas
       chica pero entera. */
    .rd-perks.rd-perks--e {
        padding-top: 32px;
    }
    .rd-perks.rd-perks--e .rd-perks__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 14px;
        padding: 28px 14px;
    }
    .rd-perks.rd-perks--e .rd-perk {
        gap: 6px;
    }
    .rd-perks.rd-perks--e .rd-perk > .rd-perk__icon,
    .rd-perks.rd-perks--e .rd-perk__icon img {
        width: 60px;
        height: 60px;
    }
    .rd-perks.rd-perks--e .rd-perk strong {
        font-size: 16px;
        line-height: 1.2;
        margin-bottom: 3px;
    }
    .rd-perks.rd-perks--e .rd-perks__grid .rd-perk span:not(.rd-perk__icon) {
        font-size: 12px;
        line-height: 1.35;
    }

    /* 5. Dos testimonios a la vista. */
    .rd-opiniones {
        margin-top: 36px;
        padding: 38px 12px 40px;
    }
    .rd-opiniones__marco {
        max-width: none;
    }
    .rd-opiniones .rd-opiniones__fila .rd-opinion {
        flex-basis: 50%;
        padding: 0 10px;
        border-left: 1px solid #D9CABD;
    }
    .rd-opiniones .rd-opiniones__fila .rd-opinion:first-child {
        border-left: 0;
    }
    .rd-opiniones .rd-opinion__foto {
        width: 104px;
        height: 104px;
    }
    .rd-opinion__enlace {
        margin-bottom: 14px;
    }
    .rd-opiniones .rd-opinion__estrellas {
        margin-bottom: 8px;
    }
    .rd-opiniones .rd-opinion__estrellas svg {
        width: 14px;
        height: 14px;
    }
    .rd-opiniones .rd-opinion blockquote {
        font-size: 13.5px;
        line-height: 1.5;
    }
    .rd-opiniones .rd-opinion figcaption {
        font-size: 13px;
    }
    .rd-opiniones__flecha {
        top: 52px;
        width: 34px;
        height: 34px;
    }
    .rd-opiniones__flecha--izq { left: -4px; }
    .rd-opiniones__flecha--der { right: -4px; }

    /* 6. "En responsive lo siento muy largo". Como en la opcion que ella
       dibujo: el numero al lado del titulo, en la misma linea, y la
       explicacion debajo. Pasa de 777 a unos 480 px. */
    .rd-steps {
        margin-top: 48px;
        padding: 34px 18px 34px;
    }
    body .rd-steps h2 {
        font-size: 25px !important;
        margin-bottom: 6px;
    }
    .rd-steps .rd-steps__inner {
        gap: 20px;
    }
    .rd-steps .rd-steps__intro {
        font-size: 14px;
    }
    .rd-steps .rd-steps__list {
        gap: 16px;
    }
    .rd-steps .rd-step {
        display: grid;
        grid-template-columns: 30px 1fr;
        column-gap: 12px;
        align-items: center;
    }
    .rd-steps .rd-step__n {
        width: 30px;
        height: 30px;
        margin: 0;
        font-size: 13px;
    }
    .rd-steps .rd-step__t {
        margin: 0;
        font-size: 15.5px;
    }
    .rd-steps .rd-step__d {
        grid-column: 1 / -1;
        margin-top: 6px;
        font-size: 13.5px;
    }
}

/* -----------------------------------------------------------------------------
 * MENU: EL CONJUNTO CENTRADO EN LA PAGINA (13/10/2026, la clienta: "esta como
 * tirado a la derecha el menu")
 * El logo iba en position:absolute, centrado en la pagina, y cada mitad del
 * menu ocupaba el 50%. La derecha tiene textos mas largos ("REGALOS
 * CORPORATIVOS") y no cabia: su hueco junto al logo se encogia de 75 a 65px y
 * el ultimo enlace quedaba mas pegado al borde (a 1920px, 254px a la izquierda
 * contra 207 a la derecha). Ahora el logo entra en la fila entre las dos
 * listas y se centra la fila entera: mismo margen a los dos lados y mismo
 * hueco a los dos lados del logo, que queda centrado entre ambas mitades.
 * height:0 hace que el logo no cuente para el alto de la barra, igual que
 * cuando era absoluto: la cabecera mide lo mismo a todos los anchos.
 * -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .cabeceramenu nav.navbar {
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(10px, calc(4.2vw - 24px), 36px);
    }
    .cabeceramenu #navbarSupportedContent {
        display: contents !important;
    }
    .cabeceramenu nav.navbar > .navbar-brand {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        order: 1;
        flex: 0 0 auto;
        align-self: flex-start;
        height: 0;
        margin: 0 !important;
    }
    .cabeceramenu #navbarSupportedContent > ul.navbar-nav {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }
    .cabeceramenu #navbarSupportedContent > ul.navbar-nav:first-child {
        order: 0;
    }
    .cabeceramenu #navbarSupportedContent > ul.navbar-nav:last-child {
        order: 2;
    }
    .cabeceramenu #navbarSupportedContent .nav-item.item-vacio {
        display: none !important;
    }
}