@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;
    }
}


/* assets/css/importado-carrito.css */
/* ==========================================================================
   HOJA IMPORTADA DE CLAUDE DESIGN — GENERADA, NO SE EDITA A MANO

   Cada regla de aqui lleva un selector REAL del carrito y, dentro, las
   declaraciones que pinta el artboard. Ni un valor esta escrito a ojo.

   COMO SE REHACE
   --------------
     1. python3 -m http.server 8899   en la carpeta del diseno
     2. abrir el .dc.html en el navegador (lo pinta su propio support.js)
     3. volcar el estilo CALCULADO de cada seccion a un .json
     4. python3 docs/rediseno-carrito/aplicar.py ...

   El paso 3 usa el estilo calculado y no el atributo style porque el motor de
   Claude Design guarda parte de las declaraciones en una hoja propia: volcando
   el outerHTML se pierde la mitad.

   DONDE VAN LOS AJUSTES
   ---------------------
   Aqui NO. Este archivo se reescribe entero en cada importacion. Lo que haya
   que corregir -porque en la pagina hay datos reales y en el artboard no- va
   en carrito.css, que se carga despues y gana.
   ========================================================================== */

/* ---------- paso-pedido ---------- */

.car-paso {
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: flex;
    flex-direction: column;
    font-family: Jost, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    gap: 18px;
}

.car-paso-cab {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    gap: 14px;
    height: 28px;
}

.car-paso-num {
    align-items: center;
    background-color: rgb(140, 98, 57);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: flex;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    height: 28px;
    justify-content: center;
}

.car-paso-tit {
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2.52px;
    text-transform: uppercase;
}

.car-paso-filete {
    background-color: rgb(230, 221, 210);
    box-sizing: border-box;
    display: block;
    flex: 1 1 0%;
    font-size: 16px;
    height: 1px;
}

.car-linea {
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: block;
    font-size: 16px;
}

.car-linea-foto {
    background-image: url("http://127.0.0.1:8899/assets/pack-happy.jpg");
    box-sizing: border-box;
    display: block;
    font-size: 16px;
    height: 88px;
}

.car-linea-nom {
    box-sizing: border-box;
    display: block;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.34px;
    line-height: 20.4px;
}

.car-linea-cod {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 12px;
    letter-spacing: 1.2px;
}

.car-cant {
    align-items: center;
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    height: 40px;
}

.car-cant-boton {
    background-color: rgb(250, 246, 241);
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    cursor: pointer;
    display: block;
    flex: 0 0 auto;
    font-size: 18px;
    height: 38px;
    padding: 1px 6px;
    text-align: center;
}

.car-cant-campo {
    box-sizing: border-box;
    display: block;
    flex: 1 1 0%;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.car-linea-precio {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 3px;
    text-align: right;
}

.car-linea-antes {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 13px;
    text-decoration-line: line-through;
}

.car-linea-ahora {
    box-sizing: border-box;
    color: rgb(255, 180, 102);
    display: block;
    font-size: 20px;
    font-weight: 600;
}

.car-linea-total-cifra {
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    display: block;
    font-size: 20px;
    font-weight: 600;
    text-align: right;
}

.car-linea-quitar {
    align-items: center;
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    cursor: pointer;
    display: flex;
    font-size: 13.3333px;
    height: 34px;
    justify-content: center;
    padding: 1px 6px;
    text-align: center;
}

.car-comps {
    background-color: rgb(250, 246, 241);
    border-top: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: block;
    font-size: 16px;
    padding: 18px 24px 20px;
}

.car-comps-tit {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.98px;
    margin: 0px 0px 14px;
    text-transform: uppercase;
}

.car-linea-comp {
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: grid;
    font-size: 16px;
    gap: 18px;
    padding: 12px 14px;
}

.car-linea-comp-nom {
    box-sizing: border-box;
    display: block;
    font-size: 14.5px;
    font-weight: 500;
}

.car-linea-comp-uni {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 12px;
}

.car-cant--comp {
    align-items: center;
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    height: 34px;
}

.car-cant--comp .car-cant-boton {
    background-color: rgb(250, 246, 241);
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    cursor: pointer;
    display: block;
    flex: 0 0 auto;
    font-size: 16px;
    height: 32px;
    padding: 1px 6px;
    text-align: center;
}

.car-cant--comp .car-cant-campo {
    box-sizing: border-box;
    display: block;
    flex: 1 1 0%;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.car-linea-comp-total {
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    display: block;
    font-size: 15px;
    font-weight: 600;
    text-align: right;
}

.car-linea-comp-quitar {
    align-items: center;
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    cursor: pointer;
    display: flex;
    font-size: 13.3333px;
    height: 30px;
    justify-content: center;
    padding: 1px 6px;
    text-align: center;
}

.car-linea-toggle {
    align-items: center;
    background-color: rgb(250, 246, 241);
    border-top: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    cursor: pointer;
    display: flex;
    font-size: 12.5px;
    font-weight: 600;
    gap: 10px;
    letter-spacing: 1.75px;
    padding: 16px 24px;
    text-align: center;
    text-transform: uppercase;
}

.car-promo {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    gap: 14px;
}

.car-promo > *:first-child {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    font-size: 16px;
    gap: 7px;
}

.car-rotulo {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11px;
    font-weight: 600;
    height: 16px;
    letter-spacing: 1.98px;
    text-transform: uppercase;
}

.car-promo-fila {
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
}

.car-promo-fila .car-input {
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(230, 221, 210);
    border-left: 1px solid rgb(230, 221, 210);
    border-top: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    cursor: text;
    display: block;
    font-size: 14.5px;
    height: 44px;
    overflow: clip;
    padding: 0px 14px;
}

.car-promo-fila .car-boton {
    background-color: rgb(140, 98, 57);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    height: 44px;
    letter-spacing: 2px;
    padding: 0px 26px;
    text-align: center;
}

.car-promo-pie .car-enlace {
    box-sizing: border-box;
    color: rgb(121, 104, 87);
    cursor: pointer;
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

/* ---------- paso-entrega ---------- */

.car-paso .car-panel {
    background-color: rgb(250, 246, 241);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 22px;
    padding: 24px;
}

.car-entrega-fila {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    gap: 20px;
}

.car-entrega-campo {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    font-size: 16px;
    gap: 8px;
}

.car-select {
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    cursor: default;
    display: block;
    font-size: 14.5px;
    height: 46px;
    overflow: clip;
    padding: 0px 12px;
    white-space: pre;
}

.car-entrega-campo--costo {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    font-size: 16px;
    gap: 8px;
    padding: 2px 0px 0px;
}

.car-envio-costo {
    align-items: center;
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    display: flex;
    font-size: 20px;
    font-weight: 600;
}

.car-filete {
    background-color: rgb(230, 221, 210);
    box-sizing: border-box;
    display: block;
    font-size: 16px;
    height: 1px;
}

.aviso-entrega {
    box-sizing: border-box;
    display: block;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.car-fechahora {
    align-items: flex-start;
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    gap: 14px;
}

.car-picker {
    bottom: 0px;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 0px;
    flex-direction: column;
    font-size: 16px;
    gap: 6px;
    left: 0px;
    position: relative;
    right: 0px;
    top: 0px;
}

.car-picker-campo {
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    cursor: pointer;
    display: flex;
    font-size: 15px;
    height: 52px;
    padding: 0px 46px 0px 16px;
    text-align: left;
}

.car-picker-hora {
    bottom: 0px;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 0px;
    flex-direction: column;
    font-size: 16px;
    gap: 6px;
    left: 0px;
    position: relative;
    right: 0px;
    top: 0px;
}

.car-hora-campo {
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    cursor: pointer;
    display: flex;
    font-size: 15px;
    height: 52px;
    padding: 0px 46px 0px 16px;
    text-align: left;
}

.car-paso .car-panel > .car-rotulo {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.98px;
    text-transform: uppercase;
}

.car-campos {
    box-sizing: border-box;
    display: grid;
    font-size: 16px;
    gap: 14px;
}

.car-campo {
    box-sizing: border-box;
    cursor: default;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 6px;
    grid-column: span 1;
}

.car-input {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    cursor: text;
    display: block;
    font-size: 14.5px;
    height: 46px;
    overflow: clip;
    padding: 0px 14px;
}

.car-campo--ancho {
    box-sizing: border-box;
    cursor: default;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 6px;
    grid-column: span 2;
}

.car-campo .car-select {
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: block;
    font-size: 14.5px;
    height: 46px;
    overflow: clip;
    padding: 0px 12px;
    white-space: pre;
}

/* ---------- paso-pago ---------- */

.car-pagos {
    box-sizing: border-box;
    display: grid;
    font-size: 16px;
    gap: 14px;
}

.car-pago.is-activa {
    align-items: flex-start;
    background-color: rgb(250, 246, 241);
    border: 1px solid rgb(140, 98, 57);
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    cursor: pointer;
    display: flex;
    font-size: 13.3333px;
    gap: 14px;
    padding: 20px;
    text-align: left;
}

.car-pago.is-activa .car-opcion-dot {
    align-items: center;
    border: 1px solid rgb(140, 98, 57);
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    font-size: 13.3333px;
    justify-content: center;
    margin: 2px 0px 0px;
}

.car-pago.is-activa .car-opcion-dot::after {
    background-color: rgb(255, 180, 102);
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    font-size: 13.3333px;
}

.car-pago-txt {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 13.3333px;
    gap: 5px;
}

.car-pago-tit {
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: block;
    font-size: 14.5px;
    font-weight: 600;
}

.car-pago-desc {
    box-sizing: border-box;
    color: rgb(121, 104, 87);
    display: block;
    font-size: 12.5px;
    line-height: 18.75px;
}

.car-pago {
    align-items: flex-start;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    cursor: pointer;
    display: flex;
    font-size: 13.3333px;
    gap: 14px;
    padding: 20px;
    text-align: left;
}

.car-pago .car-opcion-dot {
    align-items: center;
    border: 1px solid rgb(230, 221, 210);
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    font-size: 13.3333px;
    justify-content: center;
    margin: 2px 0px 0px;
}

.car-pago .car-opcion-dot::after {
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    font-size: 13.3333px;
}

/* ---------- resumen ---------- */

.car-resumen {
    background-color: rgb(250, 246, 241);
    border-left: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: flex;
    flex-direction: column;
    font-family: Jost, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    gap: 20px;
    padding: 36px 32px 40px;
    position: sticky;
    top: 0px;
}

.car-resumen-tit {
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.car-resumen-filas {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 12px;
}

.car-resumen-fila {
    align-items: baseline;
    box-sizing: border-box;
    color: rgb(121, 104, 87);
    display: flex;
    font-size: 14.5px;
    gap: 12px;
}

.car-resumen-fila > span:first-child {
    box-sizing: border-box;
    display: block;
    font-size: 14.5px;
}

.car-resumen-fila > span:last-child {
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}

.car-resumen .car-filete {
    background-color: rgb(230, 221, 210);
    box-sizing: border-box;
    display: block;
    font-size: 16px;
    height: 1px;
}

.car-resumen-total {
    align-items: flex-end;
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    gap: 12px;
    justify-content: space-between;
}

.car-resumen-total .car-rotulo {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.car-resumen-total-cifra {
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    display: block;
    font-size: 34px;
    font-weight: 600;
    line-height: 34px;
}

.car-resumen-entrega {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 9px;
    padding: 14px 16px;
}

.car-resumen-entrega .car-rotulo {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.76px;
    text-transform: uppercase;
}

.car-resumen-entrega-dato {
    box-sizing: border-box;
    display: block;
    font-size: 14px;
    line-height: 20.3px;
}

.car-resumen-entrega-dest {
    box-sizing: border-box;
    color: rgb(121, 104, 87);
    display: block;
    font-size: 13px;
    line-height: 18.85px;
}

.car-terminos {
    align-items: flex-start;
    box-sizing: border-box;
    color: rgb(121, 104, 87);
    cursor: pointer;
    display: flex;
    font-size: 12.5px;
    gap: 10px;
    line-height: 18.75px;
}

.car-terminos input {
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    cursor: default;
    display: block;
    flex: 0 0 auto;
    font-size: 13.3333px;
    margin: 2px 0px 0px;
}

.car-boton-pagar {
    background-color: rgb(140, 98, 57);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    font-size: 14px;
    font-weight: 600;
    height: 56px;
    letter-spacing: 3.36px;
    padding: 1px 6px;
    text-align: center;
}

.car-nota {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 12px;
    line-height: 18px;
}

/* ---------- calendario ---------- */

.datepicker.datepicker-dropdown {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(140, 98, 57);
    box-shadow: rgba(76, 76, 76, 0.12) 0px 10px 30px 0px;
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: flex;
    flex-direction: column;
    font-family: Jost, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    gap: 14px;
    padding: 18px;
    width: 322px;
    z-index: 20;
}

.datepicker.datepicker-dropdown thead tr:first-child {
    box-sizing: border-box;
    font-size: 16px;
}

.datepicker.datepicker-dropdown thead th.prev, .datepicker.datepicker-dropdown thead th.next {
    background-color: rgb(250, 246, 241);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    cursor: pointer;
    font-size: 15px;
    line-height: 15px;
    padding: 1px 6px;
    text-align: center;
}

.datepicker.datepicker-dropdown thead th.datepicker-switch {
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.12px;
    text-align: center;
    text-transform: uppercase;
}

.datepicker.datepicker-dropdown thead th.dow {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.63px;
    text-transform: uppercase;
}

.datepicker.datepicker-dropdown td.day.today {
    background-color: rgb(250, 246, 241);
    border: 1px solid rgb(255, 180, 102);
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 1px 6px;
    text-align: center;
}

.datepicker.datepicker-dropdown td.day {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    padding: 1px 6px;
    text-align: center;
}

.datepicker.datepicker-dropdown td.day.old, .datepicker.datepicker-dropdown td.day.new {
    border: 1px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    cursor: default;
    font-size: 14px;
    padding: 1px 6px;
    text-align: center;
}

.datepicker.datepicker-dropdown td.day.disabled {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(214, 204, 192);
    cursor: not-allowed;
    font-size: 14px;
    padding: 1px 6px;
    text-align: center;
}

.datepicker.datepicker-dropdown .car-cal-pie {
    border-top: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    display: flex;
    font-size: 16px;
    gap: 8px;
    padding: 12px 0px 0px;
}

.datepicker.datepicker-dropdown .car-cal-atajo {
    background-color: rgb(250, 246, 241);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(140, 98, 57);
    cursor: pointer;
    display: block;
    flex: 1 1 0%;
    font-size: 12px;
    font-weight: 600;
    height: 38px;
    letter-spacing: 1.2px;
    padding: 1px 6px;
    text-align: center;
    text-transform: uppercase;
}

.datepicker.datepicker-dropdown .car-cal-nota {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11.5px;
    line-height: 16.675px;
}

/* ---------- horas ---------- */

.car-hora-panel {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(140, 98, 57);
    box-shadow: rgba(76, 76, 76, 0.12) 0px 10px 30px 0px;
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: flex;
    flex-direction: column;
    font-family: Jost, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    gap: 10px;
    left: 0px;
    padding: 18px;
    position: absolute;
    top: 58px;
    width: 322px;
    z-index: 20;
}

.car-hora-cab {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.76px;
    text-transform: uppercase;
}

.car-hora-franja {
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(230, 221, 210);
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    cursor: pointer;
    display: flex;
    font-size: 13.3333px;
    gap: 12px;
    padding: 12px 14px;
    text-align: left;
}

.car-hora-franja-txt {
    box-sizing: border-box;
    color: rgb(76, 76, 76);
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.car-hora-franja-tag {
    box-sizing: border-box;
    color: rgb(168, 149, 127);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- mov-pedido ---------- */

@media (max-width: 991.98px) {

    .car-paso-num {
        background-color: rgb(140, 98, 57);
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        font-size: 12.5px;
        font-weight: 600;
        height: 24px;
    }

    .car-paso-tit {
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .car-linea {
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        font-size: 16px;
        gap: 14px;
        padding: 14px;
    }

    .car-linea-foto {
        background-image: url("blob:null/d2475189-d40b-40f4-832f-03a4d562f393");
        box-sizing: border-box;
        font-size: 16px;
        height: 64px;
    }

    .car-linea-nom {
        box-sizing: border-box;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.3px;
        line-height: 18px;
    }

    .car-linea-cod {
        box-sizing: border-box;
        color: rgb(168, 149, 127);
        font-size: 11.5px;
        letter-spacing: 0.92px;
    }

    .car-linea-precio {
        align-items: baseline;
        box-sizing: border-box;
        display: flex;
        font-size: 16px;
        gap: 8px;
    }

    .car-linea-antes {
        box-sizing: border-box;
        color: rgb(168, 149, 127);
        font-size: 12px;
        text-decoration-line: line-through;
    }

    .car-linea-ahora {
        box-sizing: border-box;
        color: rgb(255, 180, 102);
        font-size: 16px;
        font-weight: 600;
    }

    .car-linea-quitar {
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        color: rgb(168, 149, 127);
        cursor: pointer;
        font-size: 13.3333px;
        height: 34px;
        padding: 1px 6px;
        text-align: center;
    }

    .car-linea .car-cant {
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        font-size: 16px;
        height: 44px;
    }

    .car-linea .car-cant-boton {
        background-color: rgb(250, 246, 241);
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        cursor: pointer;
        font-size: 18px;
        height: 42px;
        padding: 1px 6px;
        text-align: center;
    }

    .car-linea-total .car-rotulo {
        box-sizing: border-box;
        color: rgb(168, 149, 127);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 1.47px;
        text-transform: uppercase;
    }

    .car-linea-total-cifra {
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        font-size: 19px;
        font-weight: 600;
    }

    .car-linea-toggle {
        background-color: rgb(250, 246, 241);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        cursor: pointer;
        font-size: 12.5px;
        font-weight: 600;
        gap: 9px;
        height: 44px;
        letter-spacing: 1px;
        padding: 1px 6px;
        text-align: center;
    }

}

/* ---------- mov-entrega ---------- */

@media (max-width: 991.98px) {

    .car-paso-num {
        background-color: rgb(140, 98, 57);
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        font-size: 12.5px;
        font-weight: 600;
        height: 24px;
    }

    .car-paso-tit {
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .car-paso .car-panel {
        background-color: rgb(250, 246, 241);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        font-size: 16px;
        gap: 16px;
        padding: 14px;
    }

    .car-entrega-campo .car-rotulo {
        box-sizing: border-box;
        color: rgb(168, 149, 127);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 1.68px;
        text-transform: uppercase;
    }

    .car-select {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        cursor: default;
        font-size: 14.5px;
        height: 46px;
        overflow: clip;
        padding: 0px 10px;
        white-space: pre;
    }

    .car-panel > .car-rotulo {
        box-sizing: border-box;
        color: rgb(168, 149, 127);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 1.68px;
        text-transform: uppercase;
    }

    .car-input {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        cursor: text;
        font-size: 14.5px;
        height: 46px;
        overflow: clip;
        padding: 0px 12px;
    }

    .car-campo .car-select {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        cursor: default;
        font-size: 14.5px;
        height: 46px;
        overflow: clip;
        padding: 0px 10px;
        white-space: pre;
    }

    .car-filete {
        background-color: rgb(230, 221, 210);
        box-sizing: border-box;
        font-size: 16px;
        height: 1px;
    }

    .car-mensaje-cab, .car-mensaje .car-rotulo {
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        cursor: pointer;
        font-size: 10.5px;
        font-weight: 600;
        gap: 9px;
        letter-spacing: 1.68px;
        text-align: center;
        text-transform: uppercase;
    }

}

/* ---------- mov-datos ---------- */

@media (max-width: 991.98px) {

    .car-campos .car-input {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        cursor: text;
        font-size: 14.5px;
        height: 46px;
        overflow: clip;
        padding: 0px 12px;
    }

    .car-opciones .car-opcion.is-activa {
        background-color: rgb(250, 246, 241);
        border: 1px solid rgb(140, 98, 57);
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        height: 46px;
        letter-spacing: 1.44px;
        padding: 1px 6px;
        text-align: center;
    }

    .car-opciones .car-opcion {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        color: rgb(121, 104, 87);
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        height: 46px;
        letter-spacing: 1.44px;
        padding: 1px 6px;
        text-align: center;
    }

}

/* ---------- mov-pago ---------- */

@media (max-width: 991.98px) {

    .car-pago.is-activa {
        background-color: rgb(250, 246, 241);
        border: 1px solid rgb(140, 98, 57);
        box-sizing: border-box;
        color: rgb(0, 0, 0);
        cursor: pointer;
        font-size: 13.3333px;
        gap: 12px;
        padding: 16px;
        text-align: left;
    }

    .car-pago-tit {
        box-sizing: border-box;
        color: rgb(76, 76, 76);
        font-size: 14px;
        font-weight: 600;
    }

    .car-pago-desc {
        box-sizing: border-box;
        color: rgb(121, 104, 87);
        font-size: 12px;
        line-height: 18px;
    }

    .car-pago {
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        color: rgb(0, 0, 0);
        cursor: pointer;
        font-size: 13.3333px;
        gap: 12px;
        padding: 16px;
        text-align: left;
    }

}

/* ---------- mov-resumen ---------- */

@media (max-width: 991.98px) {

    .car-resumen {
        background-color: rgb(250, 246, 241);
        border: 1px solid rgb(230, 221, 210);
        box-sizing: border-box;
        color: rgb(76, 76, 76);
        font-family: Jost, system-ui, sans-serif;
        font-size: 16px;
        font-weight: 400;
        gap: 12px;
        padding: 16px;
    }

    .car-resumen-tit {
        box-sizing: border-box;
        color: rgb(140, 98, 57);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 1.89px;
        text-transform: uppercase;
    }

    .car-resumen-fila {
        box-sizing: border-box;
        color: rgb(121, 104, 87);
        font-size: 13.5px;
        gap: 10px;
    }

    .car-resumen-fila > span:first-child {
        box-sizing: border-box;
        font-size: 13.5px;
    }

    .car-resumen-fila > span:last-child {
        box-sizing: border-box;
        color: rgb(76, 76, 76);
        font-size: 13.5px;
        font-weight: 600;
        white-space: nowrap;
    }

    .car-resumen .car-filete {
        background-color: rgb(230, 221, 210);
        box-sizing: border-box;
        font-size: 16px;
        height: 1px;
    }

}


/* ----------------------------------------------------------------------
   DEL DISENO Y TODAVIA SIN SITIO EN LA PAGINA

   Aspectos del artboard que ningun selector del carrito reclama en
   mapa.json. Agrupados por aspecto y no por elemento: un componente
   que se repite -las celdas de un mes, las fichas de complemento-
   cuenta una vez, con el numero de veces que sale entre parentesis.

     calendario     0>1              <span>                                  box-sizing, display, font-size, gap, grid-template-columns, height
     calendario     0>1>0>0          <span> Do                               box-sizing, display, font-size, height (x7)
     calendario     0>1>10>0         <span> 2                                box-sizing, display, font-size (x30)
     calendario     0>1>7>0          <span>                                  box-sizing, display, font-size, height (x2)
     horas          0>2>1            <span>                                  box-sizing, color, display, font-size, font-weight, height, letter-spa
     mov-datos      0                <div>                                  box-sizing, color, display, flex-direction, font-family, font-size, fo
     mov-datos      0>6              <span>                                  box-sizing, display, font-size, gap, height
     mov-entrega    0                <div>                                  box-sizing, color, display, flex-direction, font-family, font-size, fo
     mov-entrega    0>1>1>1          <span>                                  align-items, box-sizing, display, font-size, gap, height
     mov-entrega    0>1>1>1>0        <span>                                  bottom, box-sizing, display, flex, flex-direction, font-size, gap, hei (x2)
     mov-entrega    0>1>1>1>0>0      <button>                                  align-items, background-color, border, box-sizing, color, cursor, disp (x2)
     mov-entrega    0>1>1>1>0>0>0    <span> Escoge la fecha                  box-sizing, display, font-size (x2)
     mov-entrega    0>1>3            <span>                                  box-sizing, display, flex-direction, font-size, gap, height
     mov-entrega    0>1>3>1          <label>                                  box-sizing, cursor, display, flex-direction, font-size, gap, height (x10)
     mov-pago       0                <div>                                  box-sizing, color, display, flex-direction, font-family, font-size, fo
     mov-pago       0>1>1            <span>                                  box-sizing, display, flex-direction, font-size, gap (x2)
     mov-pedido     0                <div>                                  box-sizing, color, display, flex-direction, font-family, font-size, fo
     mov-pedido     0>0              <span>                                  align-items, box-sizing, display, font-size, gap, height (x4)
     mov-pedido     0>1>0            <span>                                  align-items, box-sizing, display, font-size, gap, height
     mov-pedido     0>1>0>1          <span>                                  box-sizing, display, flex, flex-direction, font-size, gap, height
     mov-pedido     0>1>1            <span>                                  align-items, box-sizing, display, font-size, gap
     mov-pedido     0>1>1>0>1        <span>                                  box-sizing, display, font-size, font-weight, height, text-align
     mov-pedido     0>1>1>1          <span>                                  box-sizing, display, flex-direction, font-size, gap, text-align
     mov-pedido     0>1>1>1>1>0      <span> S/ 1,131.00                      box-sizing, font-size
     mov-pedido     0>1>3>0          <span>                                  background-color, border, box-sizing, display, flex-direction, font-si (x3)
     mov-pedido     0>1>3>0>0        <span>                                  align-items, box-sizing, display, font-size, gap (x3)
     mov-pedido     0>1>3>0>0>0      <span>                                  box-sizing, display, font-size, font-weight (x3)
     mov-pedido     0>1>3>0>0>1      <span>                                  box-sizing, color, display, font-size, white-space (x3)
     mov-pedido     0>1>3>0>1        <span>                                  align-items, box-sizing, display, font-size, gap, height (x3)
     mov-pedido     0>1>3>0>1>0      <span>                                  align-items, background-color, border, box-sizing, display, flex, font (x3)
     mov-pedido     0>1>3>0>1>0>0    <button> −                                background-color, box-sizing, color, cursor, display, font-size, heigh (x6)
     mov-pedido     0>1>3>0>1>0>1    <span>                                  box-sizing, display, font-size, font-weight, text-align (x4)
     mov-pedido     0>1>3>0>1>1      <span>                                  box-sizing, color, display, font-size, font-weight (x3)
     mov-pedido     0>2              <span>                                  box-sizing, display, flex-direction, font-size, gap, height (x2)
     mov-pedido     0>2>1            <span>                                  box-sizing, display, font-size, height
     mov-pedido     0>2>1>0          <input>                                  background-color, border-bottom, border-left, border-top, box-sizing, 
     mov-pedido     0>2>1>1          <button> VALIDAR                          background-color, box-sizing, color, cursor, display, flex, font-size,
     mov-resumen    0>1>0>0          <span> Productos (13)                   box-sizing, font-size (x6)
     mov-resumen    0>5              <span>                                  box-sizing, display, font-size, line-height
     mov-resumen    0>6              <span>                                  box-sizing, color, display, font-size, line-height
     paso-entrega   0>1>0>0>1>0      <option> Seleccionar distrito             align-items, box-sizing, display, font-size, gap, min-height, min-widt (x26)
     paso-entrega   0>1>0>1>1>0      <span> —                                box-sizing, display, font-size, height
     paso-entrega   0>1>2            <span>                                  box-sizing, display, flex-direction, font-size, gap
     paso-entrega   0>1>2>1>0>0>0    <span> Escoge una fecha de entrega      box-sizing, display, font-size (x2)
     paso-entrega   0>1>4            <span>                                  box-sizing, display, flex-direction, font-size, gap, height
     paso-entrega   0>1>6            <span>                                  box-sizing, display, flex-direction, font-size, gap, height
     paso-entrega   0>1>6>0          <button> Mensaje en la tarjeta            align-items, box-sizing, color, cursor, display, font-size, font-weigh
     paso-entrega   0>1>6>0>0        <span>                                  box-sizing, color, display, font-size, font-weight, height, letter-spa
     paso-entrega   0>1>6>0>0>0      <span> opcional                         box-sizing, font-size (x7)
     paso-pago      0>1>0>1>1>0      <span> Visa, Mastercard, Amex y Diners. Confirm box-sizing, font-size (x3)
     paso-pedido    0>1>0            <div>                                  align-items, box-sizing, display, font-size, gap, grid-template-column
     paso-pedido    0>1>0>1          <span>                                  box-sizing, display, flex-direction, font-size, gap
     paso-pedido    0>1>0>2>1>0      <span> 13                               box-sizing, font-size (x3)
     paso-pedido    0>1>0>4>0        <span> S/ 1,131.00                      box-sizing, font-size
     paso-pedido    0>1>1>1          <div>                                  box-sizing, display, flex-direction, font-size, gap (x3)
     paso-pedido    0>1>1>1>0>0      <span>                                  box-sizing, display, flex-direction, font-size, gap (x3)
     paso-pedido    0>1>1>1>0>0>0>0  <span> Globo metálico feliz cumpleaños  box-sizing, font-size (x33)
     paso-pedido    0>1>1>1>0>0>1>0  <span> S/ 12.00 c/u                     box-sizing, font-size (x12)
     paso-pedido    0>1>1>1>0>1>1>0  <span> 1                                box-sizing, font-size (x13)
     paso-pedido    0>1>1>1>0>2>0    <span> S/ 12.00                         box-sizing, font-size (x11)
     paso-pedido    0>1>2>0          <span>                                  box-sizing, display, font-size, height, line-height
     paso-pedido    0>1>2>1          <span> Complementos (1)                 box-sizing, display, font-size, height (x2)
     resumen        0>3>1>0          <span> S/ 1,143.00                      box-sizing, font-size
     resumen        0>4>2>0          <span> Falta quién recibe               box-sizing, font-size (x2)
   ---------------------------------------------------------------------- */


/* assets/css/carrito.css */
/* ==========================================================================
   Dulce Sorpresa Peru - Carrito redisenado (etapa 2)
   Hoja propia del carrito. Se carga DESPUES de index.css y de etapa2.css.

   Sobre los comentarios: sin acentos, igual que etapa2.css. La hoja viaja por
   FTP y pasa por herramientas que no siempre respetan UTF-8; el codigo si
   lleva los acentos donde hacen falta (content), los comentarios no arriesgan.

   Valores tomados de los artboards 1a (escritorio 1280) y 1b (movil 390) de
   "Dulce Sorpresa - Carrito y Detalle.dc.html". No estan estimados: son los
   mismos numeros del marcado del diseno.

   Tres cosas del sitio que condicionan TODA la hoja:

   1. index.css trae el reset "* { box-sizing:border-box; padding:0; margin:0;
      font-size:16px }". El font-size:16px cae sobre CADA elemento, no solo
      sobre body. Por eso aqui todo tamano de letra va explicito y en px: un
      em o un rem heredaria 16px de cualquier padre y no del que se cree.
      El box-sizing global si nos sirve: los height de 46px o 52px ya incluyen
      borde y padding y no hay que restar nada.

   2. La tipografia es Jost, la misma del artboard, cargada en el header antes
      de esta hoja. Se declara una sola vez, en .car-carrito, y la hereda todo
      el subarbol; el resto del sitio sigue con la suya.

      Jost SI tiene eje de peso real (300-700), asi que los pesos van con
      font-weight y nada mas. Esto no era asi hasta ahora: el sitio usaba
      Brandon Grotesque, que son DOS familias sueltas
      (brandon_grotesque_regular y brandon_grotesquebold) sin eje de peso, y
      habia que cambiar de FAMILIA para engordar. Se han quitado los 30 cambios
      de familia que existian por ese motivo.

      Los pesos son los del artboard, no una escala inventada: alli casi todo
      lo destacado es 600 y un par de cosas son 500. No se usa 700 en ningun
      sitio, incluidas las cifras grandes del TOTAL, que en el artboard son
      600. Si se quiere mas contraste en esas cifras, se sube ahi y en ningun
      otro lado.

      Los tamanos y el letter-spacing NO hay que retocarlos por el cambio de
      fuente: estaban tomados de ese mismo artboard, que ya estaba compuesto en
      Jost.

   3. Bootstrap esta cargado en la pagina. Todo lo de esta hoja va con prefijo
      car- para no cruzarse con .col-*, .form-control ni .form__input.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables y raiz
   Los colores de la identidad en un solo sitio. No es cosmetica: el marron y
   el filete se repiten mas de treinta veces en la hoja y la clienta ya pidio
   ajustes de tono una vez.
   -------------------------------------------------------------------------- */
.car-carrito {
    --car-marron: #8c6239;
    --car-marron-hover: #6d4a29;
    --car-naranja: #ffb466;
    --car-crema: #faf6f1;
    --car-filete: #e6ddd2;
    --car-texto: #4c4c4c;
    --car-texto-2: #796857;
    --car-texto-3: #a8957f;
    --car-error: #c0522f;
    --car-error-fondo: #fbeee9;
    --car-error-filete: #e9c9be;
    --car-blanco: #ffffff;

    /* Alto de la barra fija de movil. Se usa dos veces: para dimensionar la
       barra y para reservar hueco al final de la pagina. Una sola fuente de
       verdad evita que el ultimo campo quede tapado si manana cambia el alto. */
    --car-barra-alto: 76px;

    /* Fondo de pagina. #EFE9E2 es el color del lienzo del .dc.html, o sea el
       fondo sobre el que estan posados los artboards, no el del carrito: el
       carrito en el artboard es la tarjeta BLANCA con filete que se ve encima.
       La clienta pidio ese crema para la pagina, asi que se reparte igual que
       en la maqueta: crema aqui, blanco en la tarjeta (.car-grid). */
    background: #EFE9E2;
    color: var(--car-texto);
    /* Jost, cargada en el header antes de esta hoja. Se declara SOLO aqui:
       todo el subarbol la hereda y el resto del sitio no se entera. */
    font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* Aqui hubo un padding-top que compensaba la cabecera fija. Se quita: la
       compensacion ya existia en etapa2.css colgando de .main-carrito, esa
       clase se habia perdido al montar la vista nueva y ya se devolvio. Con
       las dos cosas puestas el hueco se sumaba. */
}

/* La queja original de la clienta es que en movil el contenido se sale y se
   corta sin poder arrastrar. La causa habitual no es un ancho fijo suelto sino
   un hijo de flex o de grid que se niega a encogerse por debajo de su
   contenido: por defecto min-width vale auto. Se fuerza a 0 en todos los
   descendientes de la vista y el desborde deja de ser posible por esa via. */
.car-carrito *,
.car-carrito *::before,
.car-carrito *::after {
    min-width: 0;
}

.car-carrito img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   LA ETIQUETA FLOTANTE DE index.css

   index.css trae una regla sobre el elemento LABEL pelado, sin ninguna clase:

     label { position:absolute; z-index:1; top:7px; left:27px;
             transition:.2s; transform-origin:0% 100%;
             color:#796857; font-weight:400 }

   Es el resto del formulario flotante viejo, esas etiquetas que se encogian y
   subian al escribir. Alcanza a TODOS los <label> del sitio, y por tanto a
   todos los de esta pantalla.

   El efecto es demoledor y no da ningun error: cada label sale del flujo, asi
   que .car-campos se queda con 0 de alto teniendo dieciocho hijos dentro, y
   los dieciocho se amontonan en el mismo top:7px, uno encima de otro. Ninguno
   se ve, pero los veintisiete campos estan en el HTML.

   Lo mismo le pasa a .car-entrega-campo, .car-opcion, .car-pago y
   .car-terminos, que tambien son labels. El sintoma que se noto primero fue
   que el rotulo "Distrito de envio" no aparecia mientras que "Costo de envio"
   si: el primero va dentro de un <label> y el segundo dentro de un <div>.

   Un <label> tiene que seguir siendo un label: es lo que hace que al tocar el
   texto se enfoque su campo, y en las opciones de comprobante y de pago es lo
   que permite marcar el radio con el teclado. Asi que no se cambia el marcado,
   se anula la regla.

   Se anulan SOLO las propiedades de posicion. El color y el font-weight se
   dejan pasar a proposito: cada clase car- que los necesite ya los declara, y
   una clase (0,1,0) le gana al selector de elemento (0,0,1). Si los pusieramos
   aqui, este selector (0,1,1) ganaria a todas esas clases y habria que ir
   repitiendo el color en cada una.
   -------------------------------------------------------------------------- */
/* RELATIVE Y NO STATIC. Aqui puse static y fue un error grave, no un matiz.

   Varias piezas de esta pantalla son <label> Y ADEMAS contenedores de hijos
   absolutos: .car-opcion y .car-pago esconden dentro un <input> estirado por
   encima de toda la etiqueta para conservar el foco de teclado, y .car-campo y
   .car-picker llevan iconos colocados. Todos declaran su position:relative,
   pero este selector pesa (0,1,1) y el de la clase (0,1,0), asi que les ganaba
   y los devolvia a static.

   Un absoluto sin ancestro posicionado se coloca contra la PAGINA. Medido: el
   radio invisible de la forma de pago ocupaba 1440x997 y tapaba la pantalla
   entera. Los clics llegaban -a el-, asi que no salia un solo error en
   consola: simplemente ni la papelera, ni el mas, ni VALIDAR, ni el
   desplegable de distrito hacian nada.

   Con relative se arregla de raiz y sin pelear especificidad: un elemento
   relative con las tres coordenadas en auto ocupa EXACTAMENTE el mismo sitio
   que uno static -no se desplaza- y ademas hace de contenedor para sus hijos
   absolutos, que es justo lo que hacia falta. */
.car-carrito label {
    /* FONDO. index.css trae ".nform, label { background: #fff }", otra regla de
       elemento que alcanza a todos los label del sitio. Aqui pinta de blanco
       la etiqueta ENTERA, que es la fila completa: por eso "DISTRITO DE ENVIO"
       salia sobre una banda blanca que se estiraba mucho mas alla del
       desplegable, y lo mismo el "Acepto los terminos" del resumen.

       La etiqueta es un envoltorio, no una superficie: el fondo lo tienen que
       poner las piezas que SI son una superficie. .car-opcion y .car-pago
       declaran el suyo, asi que no les afecta. */
    background: none;
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
    /* La transicion de .2s va sin propiedad, o sea que anima TODO. Con ella,
       el cambio de fondo al marcar una opcion arrastra tambien el borde y el
       color y se ve como un parpadeo. */
    transition: none;
    transform-origin: 50% 50%;
}

/* Un input, un select, un textarea y un button NO heredan font-family del
   padre: los navegadores les dan la suya. Sin esto, la mitad de la pantalla
   saldria en Jost y los campos y botones en la fuente del sistema.
   Ojo, esto arregla ademas un fallo que venia de antes y no se habia notado:
   .car-cant-boton y .car-linea-quitar nunca declararon familia, asi que sus
   simbolos se estaban dibujando con la fuente por defecto del navegador. */
.car-carrito input,
.car-carrito select,
.car-carrito textarea,
.car-carrito button {
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   Piezas compartidas
   -------------------------------------------------------------------------- */

/* Rotulo en mayusculas. Aparece en el diseno unas quince veces con el mismo
   tratamiento (CODIGO DE PROMOCION, DISTRITO DE ENVIO, QUIEN RECIBE Y DONDE,
   COMPROBANTE, ENTREGA, TOTAL...). Una sola clase en vez de quince nombres.
   El tracking de .16em no es decorativo: a 10.5px y en mayusculas, sin separar
   las letras el rotulo se lee como un bloque. */
.car-rotulo {
    display: block;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--car-texto-3);
    line-height: 1.3;
}

/* Filete horizontal. Va como elemento y no como border-top del bloque
   siguiente porque en el diseno separa grupos hermanos dentro de un mismo
   panel, y con border-top habria que ir quitandolo del primero de cada grupo. */
.car-filete {
    display: block;
    height: 1px;
    background: var(--car-filete);
    border: 0;
    margin: 0;
}

/* Panel crema con filete: el bloque de ENTREGA y, en movil, el resumen. */
.car-panel {
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Campos de formulario. No se toca .form__input ni .form-control: esas clases
   las comparten otras pantallas y cambiarlas moveria el registro y el
   contacto. Estas son nuevas y solo viven en el carrito. */
.car-input,
.car-select,
.car-textarea {
    width: 100%;
    border: 1px solid var(--car-filete);
    background: var(--car-blanco);
    font-size: 14.5px;
    color: var(--car-texto);
    border-radius: 0;
}

.car-input,
.car-select {
    height: 46px;
    padding: 0 12px;
}

.car-textarea {
    padding: 12px;
    /* vertical y no both: en movil el arrastre horizontal de un textarea es
       justo lo que empuja el contenido fuera de los 390px. */
    resize: vertical;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   LA OTRA REGLA PELADA DE index.css

     select { appearance:none; display:flex; align-items:flex-end }

   Tambien sin clase, tambien sobre todos los <select> del sitio. Hace dos
   destrozos:

   1. appearance:none le quita al desplegable la flecha del navegador. Por eso
      la vista vieja iba sembrada de <div class="select_arrow">: eran flechas
      dibujadas a mano para reponer la que esta regla habia quitado. Al montar
      el marcado nuevo se quitaron esos divs, asi que los desplegables se
      quedaron sin ninguna senal de que se pueden desplegar: parecen campos de
      texto vacios.
   2. display:flex sobre un <select> no esta definido en ninguna parte. Un
      select es un elemento reemplazado y cada motor hace una cosa distinta con
      el alto y el texto interior.

   No se puede revertir appearance:none con appearance:auto y esperar la flecha
   nativa: hay motores que ya no la vuelven a pintar una vez suprimida. Se
   dibuja aqui, en el marron de la marca, con un SVG en linea. Va en background
   y no en un pseudoelemento porque un <select> no admite ::after.
   -------------------------------------------------------------------------- */
.car-select,
.car-picker-hora select {
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238c6239' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px 7px;
    /* Hueco a la derecha para la flecha: sin el, una opcion larga le pasa por
       debajo. */
    padding-right: 32px;
    /* Medido: line-height 16px dentro de una caja de 46, con el texto pegado
       arriba. Viene de bootstrap.min.css, que pone select { line-height:
       inherit } y hereda un valor calculado de un ancestro. Con 'normal' el
       navegador vuelve a centrar el texto del desplegable el solo, que es lo
       que hace de fabrica; combinado con el display:block de aqui arriba,
       tambien deja de aplicarse el align-items:flex-end de index.css que lo
       empujaba abajo. */
    line-height: normal;
}

/* EL TEXTO DE LOS DESPLEGABLES SE IBA AL FONDO DE LA CAJA.

   index.css trae "select { align-items: flex-end }". Un <select> se maqueta
   por dentro como una caja flexible, asi que esa linea manda su texto al borde
   inferior: "Seleccionar hora" quedaba pegado abajo mientras "Escoge una fecha
   de entrega", que es un <input> y no le afecta, salia centrado al lado.

   Se corrige donde esta el problema -la alineacion- y no compensando con
   relleno o con line-height, que es lo que parece funcionar hasta que cambia
   el alto del campo. */
.car-carrito select {
    align-items: center;
}

.car-input:focus,
.car-select:focus,
.car-textarea:focus {
    outline: none;
    border-color: var(--car-marron);
}

/* Estado de error del campo. Clase y no un selector por id: los id
   msg-error-* del carrito los mueve el JS y colgarse de ellos ataria la hoja
   a esa implementacion. */
.car-input.is-error,
.car-select.is-error,
.car-textarea.is-error {
    border-color: var(--car-error);
}

.car-error {
    display: block;
    font-size: 12px;
    color: var(--car-error);
    line-height: 1.4;
}

/* Boton macizo de marca. Sin radio y sin sombra: es la linea de la casa. */
/* EL GLOBO DE WHATSAPP TAPABA EL BOTÓN DE PAGAR.
   Vive en includes/footer.php con `position:fixed;bottom:30px;right:10px` en
   línea, es global y está aprobado en el resto del sitio, así que no se toca
   ahí. Medido a 414px: el globo ocupa x 340-404 / y 802-866 y PAGAR x 178-398 /
   y 832-884; se pisan en la esquina derecha del botón y encima tapan la línea
   de "Precios en soles con IGV incluido...", que además es lo último de la
   página y no se puede desplazar más para verla.

   Sólo en el carrito, el globo sube por encima de esa zona. Va con :has() sobre
   el body porque el enlace NO es hijo de .car-carrito -cuelga del body-, y
   lleva !important porque compite contra un estilo en línea. :has() va en una
   regla SOLA, nunca dentro de una lista de selectores: ahí un navegador que no
   lo entienda tiraría el grupo entero. */
body:has(.car-carrito) a[href*="api.whatsapp.com"][style*="fixed"] {
    bottom: 104px !important;
}

.car-boton,
a.car-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: var(--car-marron, #8c6239);
    color: var(--car-blanco, #ffffff);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease;
}

.car-boton:hover,
.car-boton:focus,
a.car-boton:hover,
a.car-boton:focus {
    background: var(--car-marron-hover, #6d4a29);
    color: var(--car-blanco, #ffffff);
}

/* --------------------------------------------------------------------------
   VALIDAR: gris ilegible sobre el marron

   Medido: color #4c4c4c sobre fondo #8c6239, contraste 1.9:1. La causa esta en
   el reboot de bootstrap.min.css:

     a:not([href]):not([tabindex]) { color: inherit; text-decoration: none }

   Un :not() no suma por si mismo, pero SU ARGUMENTO si, y [href] y [tabindex]
   pesan como una clase cada uno. O sea (0,2,1): dos de clase y uno de
   elemento. Le gana a .car-boton (0,1,0) y tambien a a.car-boton (0,1,1), que
   es por lo que el primer intento no cambio nada.

   El color heredado que impone ese 'inherit' es el de .car-carrito, #4c4c4c,
   que es exactamente lo medido. Y encaja con lo unico raro del caso: VALIDAR
   es el unico .car-boton que es un <a>, y ademas un <a> SIN href, que es justo
   lo que ese selector busca. PAGAR es un <button> y por eso se lee.

   Aqui se empata a (0,2,1) y se gana por orden, porque carrito.css se carga
   despues de bootstrap. No se usa !important: el dia que alguien reordene las
   hojas, un !important habria escondido el problema en vez de avisarlo.

   ESTO NO ES EL ARREGLO DE VERDAD. Un <a> sin href no es un enlace ni un
   boton: no lo alcanza el tabulador y un lector de pantalla no lo anuncia como
   pulsable, asi que VALIDAR hoy no se puede usar con teclado. Lo correcto es
   que sea <button type="button">, y entonces esta regla sobra. Queda anotado
   para la sesion que lleva D-cupon.txt.
   -------------------------------------------------------------------------- */
.car-carrito a.car-boton {
    color: var(--car-blanco, #ffffff);
}

.car-carrito a.car-boton:hover,
.car-carrito a.car-boton:focus {
    color: var(--car-blanco, #ffffff);
}

/* Enlace secundario en mayusculas (SEGUIR COMPRANDO). */
.car-enlace {
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--car-texto-2);
    text-decoration: none;
}

.car-enlace:hover,
.car-enlace:focus {
    color: var(--car-marron);
    text-decoration: none;
}

/* El foco visible se define aparte y con offset negativo: los bloques van
   pegados al filete y un outline por fuera se comeria el borde del vecino.
   No se elimina el foco en ningun sitio: el formulario se recorre con Tab. */
.car-carrito a:focus-visible,
.car-carrito button:focus-visible,
.car-carrito input:focus-visible,
.car-carrito select:focus-visible,
.car-carrito textarea:focus-visible {
    outline: 2px solid var(--car-marron);
    outline-offset: -2px;
}

/* SALVO LOS CAMPOS, QUE YA SE SENALAN SOLOS.

   .car-input/.car-select/.car-textarea marcan el foco poniendo su propio borde
   en marron. Sumarles encima el contorno de 2px con offset -2 dibujaba una
   segunda linea marron justo por dentro de la primera: el campo aparecia con
   un borde grueso y sucio, como si estuviera en error.

   Se les quita el contorno y se deja el borde, que ya es la senal. No se
   pierde accesibilidad: el cambio de color del borde es igual de visible y se
   recorre igual con Tab. Los enlaces y los botones si conservan el contorno,
   porque no tienen borde propio que cambiar. */
.car-carrito .car-input:focus-visible,
.car-carrito .car-select:focus-visible,
.car-carrito .car-textarea:focus-visible,
.car-carrito .car-picker-campo:focus-visible,
.car-carrito .car-picker-hora select:focus-visible {
    outline: none;
}

/* --------------------------------------------------------------------------
   Rejilla general: contenido + resumen
   Movil es el estado base (columna unica). La division en dos columnas entra
   en un solo @media mas abajo.
   -------------------------------------------------------------------------- */
.car-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    /* La tarjeta blanca del artboard: 1280px es el ancho exacto del artboard
       1a, medido en su marcado. Sin el tope, en una pantalla ancha la fila de
       producto se estira hasta el borde y el nombre queda a medio metro del
       precio. */
    max-width: 1280px;
    margin: 0 auto;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
}

.car-col {
    padding: 20px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* --------------------------------------------------------------------------
   car-progreso - indicador de avance en movil
   OJO: NO son pestanas. El contenido del carrito es un scroll continuo, los
   cuatro pasos estan uno debajo de otro en la misma pagina. Por eso aqui no
   hay cursor:pointer, ni :hover, ni aspecto de boton: si pareciera pulsable,
   el cliente lo pulsaria y no pasaria nada. Es un marcador de posicion, como
   la barra de progreso de una lectura.
   El marcado correcto es una lista (ol) con aria-current en el paso activo.
   Si algun dia se quisiera navegacion real habria que rehacerlo con enlaces
   ancla y entonces si darle afordancia de pulsable.
   -------------------------------------------------------------------------- */
.car-progreso {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    /* Comparte ancho y borde con .car-grid para que los dos se lean como una
       sola tarjeta: este cierra por arriba y aquel por abajo. */
    max-width: 1280px;
    margin: 0 auto;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    border-bottom: 1px solid var(--car-filete);
}

.car-progreso-paso {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
}

.car-progreso-barra {
    display: block;
    height: 3px;
    background: var(--car-filete);
}

.car-progreso-txt {
    display: block;
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--car-texto-3);
    line-height: 1.2;
    /* A 390px las cuatro etiquetas se reparten unos 84px cada una. ENTREGA
       entra justa y DATOS sobra, pero una palabra mas larga tiene que poder
       partirse: sin esto empuja la columna y reaparece el desborde. */
    overflow-wrap: break-word;
}

/* Paso recorrido y paso actual. Se distinguen por color de barra y de texto,
   no por tamano, para que las cuatro columnas midan siempre igual. */
.car-progreso-paso.is-hecho .car-progreso-barra,
.car-progreso-paso.is-activo .car-progreso-barra {
    background: var(--car-marron);
}

.car-progreso-paso.is-activo .car-progreso-txt {
    color: var(--car-marron);
}

.car-progreso-paso.is-hecho .car-progreso-txt {
    color: var(--car-texto-2);
}

/* --------------------------------------------------------------------------
   car-paso - los cuatro bloques numerados
   -------------------------------------------------------------------------- */
.car-paso {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.car-paso-cab {
    display: flex;
    align-items: center;
    gap: 10px;
}

.car-paso-num {
    flex: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--car-marron);
    color: var(--car-blanco);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1;
}

.car-paso-tit {
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--car-marron);
}

/* La linea que remata la cabecera solo existe en escritorio: a 390px no sobra
   ancho y el diseno movil la quita. Se declara aqui oculta y se enciende en el
   @media, no al contrario, para que el estado base sea el estrecho. */
.car-paso-filete {
    display: none;
}

/* --------------------------------------------------------------------------
   car-linea - linea de producto
   En movil el diseno apila: foto + textos + papelera arriba, cantidad y total
   abajo, y el desplegable de complementos al final. En escritorio pasa a una
   rejilla de seis columnas. Se escribe apilado primero.
   -------------------------------------------------------------------------- */
/* La clienta pidio la tarjeta de producto en crema. Es una desviacion del
   artboard 1a, donde la linea es blanca con filete sobre tarjeta blanca; con
   el fondo de pagina ahora en crema oscuro queda una escala de tres tonos:
   pagina #EFE9E2, tarjeta blanca, linea #faf6f1. Si la clienta la queria
   blanca, se borra esta linea de background y vuelve al artboard. */
.car-linea {
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.car-linea-cab {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.car-linea-foto {
    flex: none;
    width: 64px;
    height: 64px;
    display: block;
    background-size: cover;
    background-position: center;
    background-color: var(--car-crema);
}

.car-linea-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.car-linea-nom {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .02em;
    color: var(--car-texto);
    line-height: 1.2;
    /* Los nombres de producto vienen de la base y hay algunos largos de verdad
       ("ARREGLO FLORAL CON CHOCOLATES Y PELUCHE"). Sin esto, una palabra sin
       espacios revienta la caja a 390px. */
    overflow-wrap: break-word;
}

.car-linea-cod {
    font-size: 11.5px;
    letter-spacing: .08em;
    color: var(--car-texto-3);
}

.car-linea-precio {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}

.car-linea-antes {
    font-size: 12px;
    color: var(--car-texto-3);
    text-decoration: line-through;
}

.car-linea-ahora {
    font-weight: 600;
    font-size: 16px;
    color: var(--car-naranja);
}

/* Boton de quitar. 34px de lado en el diseno. Queda por debajo de los 44px que
   se recomiendan como minimo tactil, pero es una accion destructiva y
   agrandarla invita al toque accidental; se respeta el diseno y se compensa
   con el espacio libre alrededor. */
.car-linea-quitar {
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--car-filete);
    border-radius: 0;
    color: var(--car-texto-3);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.car-linea-quitar:hover,
.car-linea-quitar:focus {
    border-color: var(--car-marron);
    color: var(--car-marron);
}

.car-linea-quitar svg {
    width: 15px;
    height: 15px;
    display: block;
}

.car-linea-pie {
    display: flex;
    align-items: center;
    gap: 12px;
}

.car-linea-total {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}

.car-linea-total .car-rotulo {
    letter-spacing: .14em;
}

.car-linea-total-cifra {
    font-weight: 600;
    font-size: 19px;
    color: var(--car-marron);
    /* El importe nunca parte: "S/ 1,087.00" cortado en dos lineas se lee mal y
       es el dato que el cliente revisa. */
    white-space: nowrap;
}

/* Boton que abre los complementos. En movil el diseno lo saca a una barra
   propia de ancho completo y 44px de alto: es un toque frecuente y merece area
   tactil de sobra. */
.car-linea-toggle {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    border-radius: 0;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .08em;
    color: var(--car-marron);
    cursor: pointer;
}

.car-linea-toggle svg {
    width: 14px;
    height: 14px;
    flex: none;
    display: block;
    transition: transform .2s ease;
}

/* El chevron gira al abrir. El estado lo pone el JS sobre el boton, no sobre
   el icono, para que baste una clase. */
.car-linea-toggle.is-abierto svg {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   car-linea-comp - complementos de una linea
   -------------------------------------------------------------------------- */
.car-comps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Blanco, y no crema como antes: la linea que lo contiene ya es crema y dos
   cremas iguales uno dentro de otro no dejan ver donde acaba cada complemento.
   En escritorio ya era blanco; ahora lo es tambien en movil. */
.car-linea-comp {
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.car-linea-comp-cab {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.car-linea-comp-nom {
    font-size: 14px;
    color: var(--car-texto);
    overflow-wrap: break-word;
}

.car-linea-comp-uni {
    margin-left: auto;
    font-size: 12px;
    color: var(--car-texto-3);
    white-space: nowrap;
}

.car-linea-comp-pie {
    display: flex;
    align-items: center;
    gap: 12px;
}

.car-linea-comp-total {
    margin-left: auto;
    font-weight: 600;
    font-size: 15px;
    color: var(--car-marron);
    white-space: nowrap;
}

/* car-comps-anadir - anadir complementos, dentro del panel abierto.

   El marcado ya lo pone en el sitio bueno: DENTRO de .car-comps y al final,
   detras de los complementos que ya hay. Es lo que tiene sentido -"estos son
   tus complementos, anade otro"- y deja la linea de producto con un solo
   control, .car-linea-toggle, como en el artboard.

   Sin estilo salia como un <button> pelado: 776px de ancho, fondo gris del
   navegador y borde de 2px, o sea una barra que partia la tarjeta en dos.
   Dos cosas lo arreglan:

   - align-self: flex-start. .car-comps es una columna flex, y por defecto sus
     hijos se estiran a todo el ancho. De ahi los 776px. Con esto el boton mide
     lo que mide su texto y deja de parecer una barra.
   - fondo y borde propios, que es lo que quita el aspecto de sistema.

   Es una accion secundaria y se ve como tal: sin fondo macizo, filete fino y
   texto en marron. El unico boton macizo de esta pantalla es PAGAR, y conviene
   que siga siendo el unico.

   El + lo dibuja la hoja y no el marcado: es un adorno del control, no texto
   que un lector de pantalla deba leer, y el <button> ya dice "Anadir
   complementos". */
.car-comps-anadir {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    background: transparent;
    border: 1px solid var(--car-filete);
    border-radius: 0;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--car-marron);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.car-comps-anadir::before {
    content: "+";
    font-size: 15px;
    line-height: 1;
}

.car-comps-anadir:hover,
.car-comps-anadir:focus {
    background: var(--car-blanco);
    border-color: var(--car-marron);
}

/* --------------------------------------------------------------------------
   car-cant - grupo menos / campo / mas
   Sustituye a .cant-grupo y .cant-boton, que viven en etapa2.css y no se
   pueden editar desde aqui. Hay que RETIRAR las clases viejas del marcado: si
   un elemento lleva las dos, etapa2.css y esta hoja pelean por el mismo borde
   y el resultado depende del orden de carga.
   Diferencias con el grupo viejo, y no son gusto: 44px de lado en movil (el
   viejo tenia 30px, por debajo del minimo tactil comodo) y fondo crema en los
   botones para que se lean como botones y no como parte del campo.
   -------------------------------------------------------------------------- */
.car-cant {
    flex: none;
    display: inline-flex;
    align-items: stretch;
    height: 44px;
    border: 1px solid var(--car-filete);
    background: var(--car-blanco);
    line-height: 1;
}

.car-cant-boton {
    flex: none;
    width: 44px;
    border: 0;
    border-radius: 0;
    background: var(--car-crema);
    color: var(--car-marron);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: background-color .15s ease;
}

.car-cant-boton:hover {
    background: #f2e8dc;
}

.car-cant-boton:active {
    background: #eadfd2;
}

.car-cant-boton[disabled] {
    color: var(--car-texto-3);
    cursor: default;
}

/* Medido: el campo salia de 23px de alto dentro de un grupo de 40, y 28px de
   ancho. Los dos botones si se estiraban (38px = 40 menos los dos filetes),
   asi que el align-items:stretch del grupo funciona; lo que no se estiraba era
   el input. Se le fuerza el alto en vez de confiar en el estirado: height:100%
   se resuelve contra la caja de contenido del grupo, que tiene alto definido
   (44px en movil, 40px desde 768), asi que es determinista.
   El ancho tambien va fijo: 28px aprieta el numero, y con dos digitos y las
   flechas nativas ya suprimidas no hay razon para que sea tan estrecho. */
.car-cant-campo {
    align-self: stretch;
    height: 100%;
    width: 46px;
    flex: 0 0 46px;
    border: 0;
    background: transparent;
    text-align: center;
    line-height: normal;
    font-weight: 600;
    font-size: 16px;
    color: var(--car-texto);
    padding: 0 2px;
    /* Fuera las flechas nativas del input number: ya hay dos botones de verdad
       al lado, y las nativas miden unos 8px y solo estrechan el numero. */
    -moz-appearance: textfield;
    appearance: textfield;
}

/* --------------------------------------------------------------------------
   FILETES VERTICALES DENTRO DEL GRUPO

   Ojo, esto NO sale del artboard: alli los dos botones llevan `border:none` y
   no hay ninguna linea entre las tres celdas. Y alli funciona, porque la
   tarjeta de producto es BLANCA: los botones crema se recortan contra ese
   blanco y el conjunto se lee como un control con dos extremos y un centro.

   Nuestra tarjeta es crema, que es la desviacion que pidio la clienta. Con eso
   la logica de color se da la vuelta: los botones crema pasan a confundirse
   con el fondo de la tarjeta y lo que resalta es el centro blanco, o sea que
   el control se lee como una caja partida con un trozo flotando en medio. El
   sintoma que se reporto es exactamente ese.

   Como el contraste ya no puede hacer el trabajo, lo hace un filete. Es
   ademas lo que hacia la implementacion anterior del sitio (etapa2.css le
   ponia border-left y border-right al campo).

   SI LA TARJETA VUELVE A SER BLANCA, estas dos lineas sobran y conviene
   quitarlas: sin ellas el grupo queda igual que el artboard.

   Los simbolos se quedan en 18px, que es el valor del artboard. Se ven
   pequenos dentro de una celda de 40, pero es lo aprobado; subirlos seria
   desviarse por gusto. */
.car-cant-campo {
    border-left: 1px solid var(--car-filete);
    border-right: 1px solid var(--car-filete);
}

.car-cant-campo::-webkit-outer-spin-button,
.car-cant-campo::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Variante pequena para la fila de complemento (40px en el diseno). */
.car-cant--comp {
    height: 40px;
}

.car-cant--comp .car-cant-boton {
    width: 40px;
    font-size: 16px;
    /* LA RAYA BLANCA DEBAJO DEL - Y EL +

       `importado-carrito.css` -la hoja que volco el importador del artboard-
       trae `.car-cant--comp .car-cant-boton { height: 32px }`, pero la caja
       mide 40px y con sus dos bordes deja 38 de hueco. Los 6px que sobraban
       no quedaban vacios: se veia el `background` BLANCO de .car-cant por
       debajo de los dos botones crema, o sea una raya blanca pegada al borde
       inferior. Lo reporto la clienta el 12/09/2026.

       Se pone auto en vez de un numero para que el boton lo estire el
       `align-items: stretch` de .car-cant: asi llena lo que haya, y si manana
       cambia el alto de la fila no vuelve a abrirse el hueco. */
    height: auto;
}

.car-cant--comp .car-cant-campo {
    width: 40px;
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Codigo de promocion
   -------------------------------------------------------------------------- */
.car-promo {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.car-promo-fila {
    display: flex;
}

/* El campo y el boton VALIDAR forman una sola pieza: el input pierde el borde
   derecho para que no se vea doble filete en la juntura. */
.car-promo-fila .car-input {
    flex: 1 1 auto;
    height: 46px;
    border-right: 0;
}

.car-promo-fila .car-boton {
    flex: none;
    height: 46px;
    padding: 0 18px;
}

.car-promo-msg {
    font-size: 12px;
    line-height: 1.4;
    color: var(--car-texto-2);
}

.car-promo-msg.is-ok {
    color: #2f7d55;
}

.car-promo-msg.is-error {
    color: var(--car-error);
}

/* --------------------------------------------------------------------------
   Paso 2 - Entrega
   -------------------------------------------------------------------------- */
/* 8px, que es lo que separa rotulo y campo en el artboard. */
.car-entrega-campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.car-envio-costo {
    height: 46px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 20px;
    color: var(--car-marron);
}

/* "Gratis!" cuando hay cupon de delivery. Va en el naranja de los precios,
   que es el color que el sitio ya usa para lo que abarata. */
.car-envio-gratis {
    font-weight: 600;
    font-size: 15px;
    color: var(--car-naranja);
}

/* Aviso informativo: restricciones del distrito, o la explicacion de por que
   caduco la fecha que venia de la ficha. Ambar y no rojo: no es un error del
   cliente, es una condicion del servicio. */
.car-aviso-restriccion {
    background: #fdf6e8;
    border: 1px solid #e8d9b8;
    padding: 10px 12px;
    margin: 0;
    font-size: 12.5px;
    color: #7a5f2a;
    line-height: 1.5;
}

/* Aviso de bloqueo: la compra no puede seguir. Rojo, y reutiliza los colores
   de la caja de error del diseno. */
.car-aviso-bloqueo {
    background: var(--car-error-fondo);
    border: 1px solid var(--car-error-filete);
    padding: 12px 14px;
    font-size: 12.5px;
    color: var(--car-error);
    line-height: 1.5;
}

/* Interrogante de ayuda con tooltip de Bootstrap. Discreto a proposito: es
   una aclaracion, no una accion. */
.car-ayuda {
    color: var(--car-texto-3);
    font-size: 13px;
    text-decoration: none;
    margin-left: 4px;
}

.car-ayuda:hover,
.car-ayuda:focus {
    color: var(--car-marron);
    text-decoration: none;
}

/* "Pide hoy, entregamos hasta las 10 p. m." Centrado y en negrita porque en el
   diseno hace de titulo del par fecha/hora, no de nota al pie. */
/* El aviso lo genera aviso_entrega_hoy_html(), que devuelve un
   <p class="aviso-entrega"> ya vestido para la ficha de producto: alli va
   debajo de otra cosa y por eso trae border-top y margenes propios. Aqui es un
   titulo centrado entre dos filetes, asi que se le quitan.
   Y no basta con text-align: ese <p> es display:flex, o sea que a sus hijos no
   les llega; hay que centrarlos con justify-content. */
.car-entrega-aviso .aviso-entrega {
    justify-content: center;
    margin: 0;
    padding-top: 0;
    border-top: 0;
    font-size: 14px;
    color: var(--car-texto);
}

.car-entrega-aviso {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--car-texto);
    text-align: center;
    line-height: 1.4;
}

/* Fecha y hora, uno al lado del otro incluso a 390px: son dos datos que se
   leen juntos y apilarlos alarga mas un formulario que ya es largo. Cada uno
   se queda con unos 175px, de ahi que la letra baje a 13px y el texto se
   recorte con overflow en vez de partirse. */
.car-fechahora {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.car-picker {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    /* 6px, como el artboard. */
    gap: 6px;
}

.car-picker-campo {
    height: 50px;
    width: 100%;
    border: 1px solid var(--car-filete);
    border-radius: 0;
    background: var(--car-blanco);
    /* El padding derecho de 32px reserva el hueco del icono: sin el, un texto
       largo pasa por debajo del calendario y se lee mal. */
    padding: 0 32px 0 12px;
    font-size: 13px;
    color: var(--car-texto);
    text-align: left;
    line-height: 1.25;
    overflow: hidden;
    cursor: pointer;
}

/* Esta regla se escribio pensando en un <button> y llevaba display:flex con
   align-items:center. El elemento real es un <input type="text" readonly> con
   el datepicker encima, y un input es un elemento reemplazado: display:flex
   sobre el no esta definido y cada navegador hace una cosa. Se quita; un input
   con height y line-height ya centra su texto solo. */

/* Estado vacio. Dos formas de llegar a el: la clase, que pone el JS, y el
   placeholder del input, que es como se ve antes de elegir fecha. */
.car-picker-campo.is-vacio {
    color: var(--car-texto-3);
}

.car-picker-campo::placeholder {
    color: var(--car-texto-3);
    opacity: 1;
}

/* Segunda linea bajo el campo: la fecha en palabras (#diaSeleccionado) y la
   nota del horario. Existe para que las dos columnas de .car-fechahora tengan
   el mismo numero de lineas y sus campos queden alineados. */
.car-picker-nota {
    display: block;
    font-size: 11.5px;
    color: var(--car-texto-3);
    line-height: 1.4;
}

/* El desplegable de horarios NO puede llevar clase propia: el servidor
   devuelve el <select> entero y el JS lo mete con
   $('#html_envio_hora').html(...), asi que cualquier clase que pusieramos en
   el marcado desaparece en el primer repintado. Se estiliza desde el
   contenedor, que si sobrevive.
   El alto iguala al del campo de fecha (50px, 52px desde 768px) para que los
   dos campos de la fila queden a la misma altura. */
.car-picker-hora select {
    width: 100%;
    height: 50px;
    border: 1px solid var(--car-filete);
    border-radius: 0;
    /* background-color y no el atajo background: el atajo borraria el
       background-image de la flecha que se dibuja mas arriba. */
    background-color: var(--car-blanco);
    padding: 0 32px 0 12px;
    font-size: 13px;
    color: var(--car-texto);
}

.car-picker-hora select:focus {
    outline: none;
    border-color: var(--car-marron);
}

/* El servidor mete ademas un <input type="hidden" id="bloquear"> dentro del
   contenedor. No estorba, pero conviene que el div no lo cuente como caja. */
.car-picker-hora {
    display: block;
}

.car-picker-campo.is-error {
    border-color: var(--car-error);
}

.car-picker-icono {
    position: absolute;
    right: 11px;
    top: 16px;
    width: 17px;
    height: 17px;
    display: block;
    color: var(--car-marron);
    /* Sin esto, el clic sobre el icono no abre el campo que hay debajo. */
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Quien recibe y donde
   -------------------------------------------------------------------------- */
.car-campos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.car-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* car-locacion - campo condicional de locacion (7 locaciones, 11 campos).
   CUIDADO, esto es lo mas fragil de la hoja: el JS del carrito muestra y
   oculta estos bloques con .css("display","block") y .css("display","none"),
   es decir con estilo EN LINEA, que gana a cualquier regla de aqui.
   Por eso esta clase NO declara display. Si lo declarara seria letra muerta en
   el estado visible, y encima nos pelearia con el JS. El display lo manda el
   JS; nosotros solo ponemos lo de dentro.
   Y por eso lo de dentro tiene que funcionar como BLOQUE, no como flex: el JS
   fuerza display:block y un gap de flex no se aplicaria. La separacion entre
   la etiqueta y el campo va con margin.
   Como hijo de una rejilla, display:block no rompe nada: sigue siendo item de
   la rejilla. */
.car-locacion > .car-rotulo {
    margin-bottom: 6px;
}

.car-locacion > .car-error {
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   car-mensaje - mensaje de la tarjeta
   -------------------------------------------------------------------------- */
.car-mensaje {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.car-mensaje-toggle {
    align-self: flex-start;
    background: transparent;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--car-marron);
    cursor: pointer;
    text-align: left;
}

/* Pista con el estado ("12 caracteres escritos"). En minusculas y sin tracking
   a proposito: si compartiera el tratamiento del rotulo, el ojo leeria las dos
   partes como un solo titulo. */
/* 500 y no 400: es el peso que le da el artboard. Distingue la pista del
   texto corriente sin llegar al 600 del rotulo que tiene al lado. */
.car-mensaje-hint {
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--car-texto-3);
}

.car-mensaje-toggle svg {
    width: 15px;
    height: 15px;
    flex: none;
    display: block;
    transition: transform .2s ease;
}

.car-mensaje-toggle.is-abierto svg {
    transform: rotate(180deg);
}

.car-mensaje-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
}

.car-mensaje-campo {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.car-chars {
    font-size: 11.5px;
    color: var(--car-texto-3);
}

/* --------------------------------------------------------------------------
   car-sugerencias - dedicatorias de ejemplo
   En el diseno de movil (1b) este bloque NO aparece; en escritorio (1a) es una
   columna al lado del textarea. Decision propia: se conserva tambien en movil,
   pero debajo del campo y a una columna. Quitarlo dejaria al cliente de movil
   sin la ayuda justo donde mas cuesta escribir, y son tres lineas de texto: no
   estorba.
   -------------------------------------------------------------------------- */
.car-sugerencias {
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    padding: 14px 16px;
}

.car-sugerencias .car-rotulo {
    letter-spacing: .14em;
    margin-bottom: 8px;
}

/* La lista crece con su propio scroll, no empujando la página.
   Aniversario trae siete frases y medía 588px: al abrirla, la página crecía de
   2141 a 2688 y el contenido de abajo -forma de pago- se iba al fondo. Con el
   tope, la lista mide siempre lo mismo y lo que hay debajo no se mueve.
   overscroll-behavior corta el encadenado: al llegar al final de la lista la
   rueda deja de arrastrar la página detrás, que es la otra mitad de la
   sensación de que el carrito se va solo. */
.car-sugerencias-lista {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Sitio para la barra: sin esto el texto queda pegado a ella. */
    padding-right: 6px;
}

/* Cada sugerencia rellena el textarea al pulsarla: es un boton de verdad, no
   un parrafo. Se le quita el aspecto de boton pero se le deja el cursor y el
   alineado a la izquierda, que un button trae centrado por defecto. */
.car-sugerencia {
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    font-size: 13px;
    color: var(--car-texto-2);
    line-height: 1.45;
    cursor: pointer;
}

.car-sugerencia:hover,
.car-sugerencia:focus {
    color: var(--car-marron);
}

/* --------------------------------------------------------------------------
   Paso 3 - Comprobante (BOLETA / FACTURA)
   -------------------------------------------------------------------------- */
.car-opciones {
    display: flex;
    gap: 8px;
}

/* Son radios de verdad por debajo. El input real se deja accesible al lector
   de pantalla y al teclado en vez de display:none, que lo saca del orden de
   tabulacion: se estira invisible sobre la etiqueta y el foco se pinta en
   esta con :focus-within. */
.car-opcion {
    flex: 1 1 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 46px;
    padding: 0 12px;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--car-texto-2);
    cursor: pointer;
}

.car-opcion input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    cursor: pointer;
}

.car-opcion-dot {
    flex: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--car-filete);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El punto interior existe siempre y solo cambia de color. Si apareciera y
   desapareciera, el circulo saltaria un pixel al marcarlo. */
.car-opcion-dot::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
    display: block;
}

.car-opcion.is-activa,
.car-opcion:has(input:checked) {
    background: var(--car-crema);
    border-color: var(--car-marron);
    color: var(--car-marron);
}

.car-opcion.is-activa .car-opcion-dot,
.car-opcion:has(input:checked) .car-opcion-dot {
    border-color: var(--car-marron);
}

.car-opcion.is-activa .car-opcion-dot::after,
.car-opcion:has(input:checked) .car-opcion-dot::after {
    background: var(--car-marron);
}

/* :has() no llega a navegadores viejos. La clase is-activa la pone el JS y
   hace el mismo trabajo, asi que la parte con :has() es mejora progresiva y no
   requisito: el marcado debe seguir poniendo is-activa. */
.car-opcion:focus-within {
    outline: 2px solid var(--car-marron);
    outline-offset: -2px;
}

/* Campo apagado: no hace falta rellenarlo con la locación elegida.
   Hoy lo pone assets/js/carrito-recojo-campos.js sobre Dirección, Referencia y
   el selector de locación cuando el pedido se recoge en el taller.

   Es una clase propia y no una regla sobre [readonly] o :disabled a secas: en
   el carrito hay otros campos que nacen deshabilitados por motivos distintos
   -los once condicionales de locación, que ademas estan ocultos- y atenuarlos
   todos por igual pintaria de gris cosas que nadie ha apagado.

   No se baja la opacidad del texto por debajo de lo legible: el campo sigue
   diciendo lo que la persona escribio antes de cambiar a recojo, y tiene que
   poder leerlo para saber que no se ha perdido. */
.car-input.car-campo--apagado,
.car-select.car-campo--apagado {
    /* El crema solo (#faf6f1) no se distingue del blanco del formulario: se
       probó en pantalla y el campo seguía pareciendo normal, que es
       exactamente lo que se venía a arreglar. Con el filete de fondo y el
       borde en el mismo tono, el campo se lee apagado de un vistazo. */
    background: var(--car-filete);
    border-color: var(--car-filete);
    color: var(--car-texto-2);
    cursor: not-allowed;
}

.car-input.car-campo--apagado::placeholder {
    color: var(--car-texto-2);
    opacity: .65;
}

.car-select.car-campo--apagado {
    opacity: 1; /* Chrome atenua los select deshabilitados hasta hacerlos ilegibles. */
}

/* Campos de factura (RUC y razon social). */
.car-factura {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --------------------------------------------------------------------------
   Paso 4 - Forma de pago
   -------------------------------------------------------------------------- */
.car-pagos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.car-pago {
    position: relative;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    cursor: pointer;
}

.car-pago input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    cursor: pointer;
}

.car-pago .car-opcion-dot {
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.car-pago .car-opcion-dot::after {
    width: 8px;
    height: 8px;
}

.car-pago-icono {
    flex: none;
    width: 26px;
    height: 26px;
    display: block;
    color: var(--car-marron);
}

.car-pago-txt {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.car-pago-tit {
    font-weight: 600;
    font-size: 14px;
    color: var(--car-texto);
}

.car-pago-desc {
    font-size: 12px;
    color: var(--car-texto-2);
    line-height: 1.5;
}

.car-pago.is-activa,
.car-pago:has(input:checked) {
    background: var(--car-crema);
    border-color: var(--car-marron);
}

.car-pago.is-activa .car-opcion-dot,
.car-pago:has(input:checked) .car-opcion-dot {
    border-color: var(--car-marron);
}

.car-pago.is-activa .car-opcion-dot::after,
.car-pago:has(input:checked) .car-opcion-dot::after {
    background: var(--car-marron);
}

.car-pago:focus-within {
    outline: 2px solid var(--car-marron);
    outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   car-resumen - resumen del pedido
   En movil es un panel mas al final del scroll. En escritorio se convierte en
   la columna derecha pegajosa (ver el @media de 992px).
   -------------------------------------------------------------------------- */
.car-resumen {
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.car-resumen-tit {
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--car-marron);
}

.car-resumen-filas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.car-resumen-fila {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13.5px;
    color: var(--car-texto-2);
}

/* El importe de cada fila va a 500, como en el artboard: destaca sobre el
   concepto de la izquierda sin competir con el TOTAL, que es lo unico a 600
   en esta columna. */
.car-resumen-fila > span:last-child {
    margin-left: auto;
    font-weight: 500;
    color: var(--car-texto);
    white-space: nowrap;
}

/* El rotulo de esta caja lleva .16em y no los .18em del rotulo generico. Es el
   valor del artboard, comprobado: en el 1a hay DOS textos "Entrega" y son
   distintos a proposito. El del paso 2 es un titulo de bloque -14px, .18em, en
   el marron de marca- y este es el rotulo de una caja dentro del resumen
   -11px, .16em, en el marron claro-. Con menos tamano, dos centesimas menos de
   tracking mantienen la misma sensacion de separacion entre letras. */
.car-resumen-entrega > .car-rotulo {
    letter-spacing: .16em;
}

/* Caja blanca con la fecha y el destino ya elegidos. */
.car-resumen-entrega {
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    padding: 14px 16px;
}

.car-resumen-entrega-dato {
    font-size: 14px;
    color: var(--car-texto);
    line-height: 1.45;
}

.car-resumen-entrega-dest {
    font-size: 13px;
    color: var(--car-texto-2);
    line-height: 1.45;
}

/* car-resumen-falta - lo que queda por completar (fecha, horario, quien
   recibe). Este bloque NO esta en el diseno: el artboard solo trae una caja de
   error generica. Se anade porque el carrito valida al enviar y hoy el cliente
   solo se entera de que falta algo cuando ya pulso PAGAR, con los campos
   repartidos por cuatro pasos. La lista se lo dice antes.
   Reutiliza los colores de la caja de error del diseno para no inventar
   paleta. */
.car-resumen-falta {
    background: var(--car-error-fondo);
    border: 1px solid var(--car-error-filete);
    padding: 12px 14px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: var(--car-error);
    line-height: 1.5;
}

/* La caja se pinta siempre porque el <ul> esta en el marcado desde el
   principio y lo rellena el JS. Cuando no falta nada se quedaba una banda rosa
   de 26px sin texto.
   :empty aqui es exacto y no aproximado: el marcado emite <ul ...></ul> sin
   NADA dentro, ni un salto de linea, y :empty solo casa si no hay hijos ni
   nodos de texto. En cuanto el JS mete el primer <li>, deja de casar y la caja
   aparece sola. Si algun dia el marcado deja un espacio ahi dentro, :empty
   dejaria de funcionar: entonces lo correcto es que el PHP no emita el <ul> o
   que el JS ponga el atributo hidden. */
.car-resumen-falta:empty {
    display: none;
}

/* EL TAMANO SE DECLARA AQUI, EN EL <li>, Y NO SOLO EN EL <ul>.

   El 12.5px del contenedor llegaba al li solo por HERENCIA, e index.css trae
   un "* { font-size: 16px }" que alcanza a cada li DIRECTAMENTE. Una regla
   directa gana siempre a un valor heredado, por floja que sea su
   especificidad: el universal no compite contra el .car-resumen-falta, compite
   contra "nada". Resultado: los items salian a 16 y cantaban al lado del 14.5
   del resumen y el 13 de la caja de entrega. */
.car-resumen-falta li {
    list-style: none;
    display: flex;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}

/* Vineta dibujada con ::before: el reset de index.css pone list-style:none
   sobre todos los li del sitio, asi que un list-style aqui no se veria. */
.car-resumen-falta li::before {
    content: "\00B7";
    flex: none;
}

/* Los enlaces de la lista llevan al campo que falta. */
.car-resumen-falta a {
    color: var(--car-error);
    text-decoration: underline;
}

/* car-resumen-total - el TOTAL grande del artboard 1a.
   Va justo despues del filete y ANTES de la caja de entrega y de los terminos,
   que es el orden que aprobo la clienta. Es distinto del total de la barra:
   ver el comentario largo de .car-barra.
   Oculto en movil, donde el total vive en la barra fija. */
.car-resumen-total {
    display: none;
}

.car-resumen-total-cifra {
    font-weight: 600;
    font-size: 34px;
    line-height: 1;
    color: var(--car-marron);
    white-space: nowrap;
}

/* main.js repinta el total con
     $(".valor_total").html('S/<h1 class="prc-h1">87</h1>.00')
   y ese <h1> aparece en caliente, en cuanto el cliente cambia una cantidad.
   (Desde el 2026-09-11 el handler del COMPLEMENTO si recarga al terminar, para
   que el precio de su linea deje de mentir; pero el <h1> se inyecta antes de la
   recarga, y el de PRODUCTO sigue repintando sin recargar, asi que esto hace
   falta igual.)
   Un h1 es display:block, asi que parte el importe en tres lineas: "S/", el
   numero y ".00". Ademas arrastra el font-size de .prc-h1 desde index.css
   (25px, rebajado a 16px por una regla posterior), que no es el tamano de
   ninguna de las dos cifras de aqui.
   No se puede tocar el JS desde una hoja de estilos, y .valor_total tiene que
   seguir en el marcado porque es el asidero del repintado. Se neutraliza el
   h1 inyectado. */
.car-barra-cifra h1,
.car-resumen-total-cifra h1 {
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    display: inline;
}

.car-terminos {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: var(--car-texto-2);
    line-height: 1.5;
    cursor: pointer;
}

.car-terminos input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--car-marron);
}

.car-nota {
    font-size: 12px;
    color: var(--car-texto-3);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   car-barra - total y PAGAR
   AQUI ESTA LA DECISION MAS GORDA DE LA HOJA.

   El problema: en movil el resumen baja al final, detras de un formulario de
   veintitantos campos. Si PAGAR vive solo ahi, el cliente que ya termino de
   rellenar tiene que seguir bajando para encontrarlo, y el que quiere ver el
   total mientras rellena tiene que bajar y volver a subir.

   Descartado: sticky. Un position:sticky solo pega mientras su contenedor esta
   en pantalla; con el resumen al final del scroll, la barra apareceria justo
   cuando ya se ve el resumen, o sea cuando ya no hace falta.

   Elegido: la MISMA pieza cambia de papel segun el ancho.
   - En movil va fija abajo (position:fixed): total y PAGAR siempre a mano,
     desde el primer campo. Se reserva hueco al final de la pagina con
     padding-bottom para que no tape el ultimo campo.
   - Desde 768px deja de ser fija y se queda como un bloque normal dentro de la
     columna del resumen, que desde 992px ya es pegajosa de por si.

   Asi hay UN SOLO boton PAGAR en el marcado. Dos botones (uno en la barra y
   otro en el resumen) obligarian a duplicar el submit y a mantener los dos
   sincronizados.

   POR QUE EL TOTAL SI ESTA DOS VECES Y EL BOTON NO.

   El artboard 1a intercala: filete, TOTAL, caja de entrega, avisos, terminos,
   PAGAR. O sea que en escritorio el total y el boton NO son vecinos: entre
   ellos hay tres bloques. Un solo envoltorio que los contuviera a los dos
   tendria que arrastrar tambien esos tres bloques, y en movil la barra fija
   acabaria midiendo media pantalla.

   Asi que se separan: .car-resumen-total es el TOTAL de escritorio, en su
   sitio del artboard, y .car-barra-total es el de la barra fija de movil.
   Cada uno se muestra donde toca y el otro se oculta; nunca se ven los dos.

   Duplicar el total es barato y no hay que mantenerlo: main.js repinta con
   $(".valor_total"), un selector de CLASE, que actualiza todas las copias a la
   vez. Basta con que las dos cifras lleven esa clase.

   Duplicar el boton no seria barato: son dos submit del mismo formulario y
   cualquier estado (deshabilitado mientras se envia, texto de "procesando")
   habria que llevarlo a los dos. Por eso el boton sigue siendo uno, colocado
   despues de los terminos, que es donde lo pone el artboard.

   DOS AVISOS PARA EL MARCADO:
   1. position:fixed se calcula respecto al elemento que contiene, y no
      respecto a la ventana, si algun padre tiene transform, filter o
      perspective. car-barra no puede ir dentro de un contenedor animado.
   2. La casilla de terminos se queda arriba, en car-resumen, no en la barra.
      Si el cliente pulsa PAGAR sin aceptarlos, la validacion que ya existe lo
      avisa; meter la casilla en la barra fija la haria demasiado alta.
   -------------------------------------------------------------------------- */
.car-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Por encima del contenido pero por debajo de modales y del aviso de
       cookies. Si el aviso de cookies tapara la barra, es el aviso el que debe
       ir mas alto: se cierra y desaparece, la barra no. */
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--car-barra-alto);
    padding: 12px 16px;
    background: var(--car-crema);
    border-top: 1px solid var(--car-filete);
}

.car-barra-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.car-barra-cifra {
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    color: var(--car-marron);
    white-space: nowrap;
}

.car-boton-pagar {
    margin-left: auto;
    flex: 1 1 auto;
    /* Tope de ancho: en una tableta en vertical un PAGAR de 500px de largo se
       ve roto. */
    max-width: 220px;
    height: 52px;
    font-size: 13px;
    letter-spacing: .2em;
}

/* Hueco al final para que la barra fija no tape el ultimo elemento. Va sobre
   la raiz de la vista y no sobre body: body es del sitio entero y esta hoja
   solo manda en el carrito. */
.car-carrito {
    padding-bottom: calc(var(--car-barra-alto) + 16px);
}

/* --------------------------------------------------------------------------
   Desde 768px - se ensancha la tipografia y las lineas se ponen en fila
   Aun a una columna: el resumen sigue abajo hasta 992px, porque los 372px de
   la columna derecha no caben antes sin estrujar el contenido.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

    .car-col {
        padding: 36px 40px 44px;
        gap: 38px;
    }

    .car-paso {
        gap: 18px;
    }

    .car-paso-cab {
        gap: 14px;
    }

    .car-paso-num {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .car-paso-tit {
        font-size: 14px;
        letter-spacing: .18em;
    }

    /* Ahora si hay ancho para la linea que remata la cabecera. */
    .car-paso-filete {
        display: block;
        flex: 1 1 auto;
        height: 1px;
        background: var(--car-filete);
    }

    .car-rotulo {
        font-size: 11px;
        letter-spacing: .18em;
    }

    .car-panel {
        padding: 24px;
        gap: 22px;
    }

    .car-input {
        padding: 0 14px;
    }

    /* Artboard: el desplegable lleva 12px a la izquierda, dos menos que los
       campos de texto. El hueco de 32px a la derecha no sale del artboard: es
       el sitio de la flecha que dibuja esta hoja, porque index.css se la quita
       a todos los <select> del sitio con appearance:none. */
    .car-select {
        padding: 0 32px 0 12px;
    }

    .car-textarea {
        padding: 13px 14px;
    }

    /* La linea de producto pasa a una rejilla de seis columnas. Las cinco
       columnas fijas llevan ancho propio y solo la de textos es elastica
       (minmax(0,1fr)): el 0 del minmax es lo que le permite encogerse en vez
       de empujar a las demas. */
    .car-linea {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr) 136px 116px 128px 40px;
        gap: 18px;
        align-items: center;
        padding: 22px 24px;
    }

    /* Los agrupadores que hacian falta en movil se disuelven: sus hijos pasan a
       ser items directos de la rejilla. display:contents es justo eso. */
    .car-linea-cab,
    .car-linea-pie {
        display: contents;
    }

    .car-linea-foto {
        width: 88px;
        height: 88px;
    }

    .car-linea-info {
        gap: 7px;
    }

    /* Alto minimo de dos lineas.
       Un nombre largo parte en dos ("BOX COFFEE / LOVERS") y su tarjeta crece,
       asi que la lista de productos pierde el ritmo: unas tarjetas altas y
       otras bajas sin motivo visible.
       Se reserva el alto de dos lineas SIEMPRE, en vez de recortar el nombre
       con puntos suspensivos. Recortar esconderia parte del nombre del
       producto justo en la pantalla donde el cliente confirma que esta
       comprando, y ahi el nombre completo vale mas que la simetria.
       41px = 17px de letra por 1.2 de interlineado, dos veces.
       Solo en escritorio: en movil las tarjetas van una debajo de otra a
       ancho completo y reservar alto solo dejaria un hueco. */
    .car-linea-nom {
        font-size: 17px;
        min-height: 41px;
    }

    .car-linea-cod {
        font-size: 12px;
        letter-spacing: .1em;
    }

    /* En escritorio el precio tiene columna propia, alineado a la derecha y en
       dos lineas (antes / ahora), no en linea como en movil. */
    .car-linea-precio {
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
        margin-top: 0;
        text-align: right;
    }

    .car-linea-antes {
        font-size: 13px;
    }

    .car-linea-ahora {
        font-size: 20px;
    }

    /* El total de linea pierde su rotulo: en la rejilla, la posicion y el
       alineado a la derecha ya dicen que es. */
    .car-linea-total {
        margin-left: 0;
    }

    .car-linea-total .car-rotulo {
        display: none;
    }

    .car-linea-total-cifra {
        font-size: 20px;
    }

    .car-linea-quitar {
        justify-self: end;
    }

    .car-linea-quitar svg {
        width: 16px;
        height: 16px;
    }

    .car-cant {
        height: 40px;
        width: 126px;
    }

    .car-cant-boton {
        width: 40px;
    }

    .car-cant-campo {
        flex: 1 1 auto;
        width: auto;
        min-width: 40px;
    }

    /* La barra de progreso es el indicador de scroll de movil y el artboard 1a
       no la lleva: en escritorio los cuatro pasos se ven de una sola pasada y
       no hay nada que indicar. (Era el defecto 4 que quedaba abierto.) */
    .car-progreso {
        display: none;
    }

    /* El desplegable de complementos vuelve a ser un enlace discreto dentro de
       la celda de textos, no una barra de ancho completo: en escritorio no hay
       problema de punteria y una barra ahi partiria la rejilla. */
    /* Valores del artboard: hueco 7px, letter-spacing .06em y margin-top 3px.
       Alli este control es el TERCER HIJO de la columna de textos, debajo del
       codigo. Aqui el marcado lo pone como hijo directo de .car-linea, asi que
       la rejilla lo manda a una segunda fila y eso suma el hueco de la rejilla
       (18px) mas su alto: unos 37px de mas POR CADA PRODUCTO.
       No se fuerza con grid-row:1 + align-self:end porque entonces comparte
       celda con los textos y se solapan en cuanto el nombre ocupa dos lineas,
       que pasa a menudo. El arreglo es mover una linea en A-productos.txt y
       meter el boton DENTRO de .car-linea-info; esta regla vale igual en las
       dos posiciones. Anotado en docs/rediseno-carrito/diferencias.md. */
    .car-linea-toggle {
        grid-column: 2;
        justify-self: start;
        align-self: start;
        height: auto;
        margin-top: 3px;
        gap: 7px;
        background: transparent;
        border: 0;
        padding: 0;
        letter-spacing: .06em;
    }

    /* El panel de complementos ocupa las seis columnas y se pega al borde de la
       caja con margenes negativos que compensan el padding de la linea. Asi el
       filete superior llega de lado a lado, como en el diseno. */
    /* El artboard separa 14px el rotulo de la primera fila. .car-comps es una
       columna flex con gap 10, asi que faltan 4. */
    .car-comps > .car-rotulo {
        margin-bottom: 4px;
    }

    .car-comps {
        grid-column: 1 / -1;
        margin: 0 -24px -22px;
        padding: 18px 24px 20px;
        background: var(--car-crema);
        border-top: 1px solid var(--car-filete);
        gap: 10px;
    }

    /* Cada complemento tambien pasa a rejilla. */
    .car-linea-comp {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 126px 96px 34px;
        gap: 18px;
        align-items: center;
        background: var(--car-blanco);
        padding: 12px 14px;
    }

    .car-linea-comp-cab {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .car-linea-comp-nom {
        font-size: 14.5px;
        font-weight: 500;
    }

    .car-linea-comp-uni {
        margin-left: 0;
    }

    .car-linea-comp-pie {
        display: contents;
    }

    .car-linea-comp-total {
        margin-left: 0;
        text-align: right;
    }

    /* En el artboard la papelera del complemento es mas pequena que la de la
       linea de producto: 30x30 con icono de 14. Reutilizaba la grande, que
       entraba justa en la columna de 34px y sin holgura. */
    .car-linea-comp .car-linea-quitar {
        width: 30px;
        height: 30px;
    }

    .car-linea-comp .car-linea-quitar svg,
    .car-linea-comp .car-linea-quitar img {
        width: 14px;
        height: 14px;
    }

    .car-cant--comp {
        height: 34px;
    }

    .car-cant--comp .car-cant-boton {
        width: 34px;
    }

    /* Promocion: el campo recupera su ancho fijo del diseno y la fila deja de
       ocupar todo el ancho disponible. */
    .car-promo-fila .car-input {
        flex: 0 0 230px;
        height: 44px;
    }

    .car-promo-fila .car-boton {
        height: 44px;
        padding: 0 26px;
        font-size: 12.5px;
        letter-spacing: .16em;
    }

    .car-promo-msg {
        font-size: 12.5px;
        max-width: 330px;
    }

    /* Promocion y "seguir comprando" comparten fila. El enlace se empuja a la
       derecha y baja un poco para alinearse con el campo, no con su rotulo. */
    .car-promo-pie {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 14px;
    }

    .car-promo-pie .car-enlace {
        margin-left: auto;
        padding-top: 26px;
    }

    /* Distrito y costo, uno al lado del otro. */
    .car-entrega-fila {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: flex-start;
    }

    .car-entrega-fila .car-entrega-campo {
        flex: 1 1 260px;
        gap: 8px;
    }

    .car-entrega-fila .car-entrega-campo--costo {
        flex: 0 0 auto;
        padding-top: 2px;
    }

    .car-entrega-aviso {
        font-size: 15px;
    }

    .car-fechahora {
        gap: 14px;
    }

    .car-picker-campo {
        height: 52px;
        padding: 0 46px 0 16px;
        font-size: 15px;
    }

    /* El icono va con `.car-carrito` delante, y no suelto como el resto del
       bloque, por un motivo concreto:

       El calendario del fondo lo declara `.car-picker-campo` a 17px y 12px,
       una regla SIN media que vive mas abajo en esta misma hoja (busca
       "el icono deja de ser un elemento posicionado"). Las dos son (0,1,0),
       porque envolver una regla en @media NO le suma especificidad, asi que
       en el empate ganaba la que va despues en el fichero: la de 17px, tambien
       en escritorio.

       Medido en QA a 1440px antes de tocarlo: la fecha salia a 17px y 12px
       mientras el reloj de al lado -.car-hora-campo, que no tiene ninguna
       regla que lo pise- salia a 19px y 16px. Los dos iconos de la misma fila
       con dos tamanos distintos.

       Con `.car-carrito` delante son (0,2,0) y el empate desaparece, sin
       depender de en que orden queden los bloques.

       Artboard: icono de 19px a 16px del borde. En movil se queda en 17 y 12,
       que es lo que pide el ancho estrecho. */
    .car-carrito .car-picker-campo {
        background-position: right 16px center;
        background-size: 19px 19px;
    }

    /* El desplegable de horarios sigue al campo de fecha para que la fila no
       quede desnivelada. */
    .car-picker-hora select {
        height: 52px;
        padding: 0 32px 0 16px;
        font-size: 15px;
    }

    .car-picker-nota {
        font-size: 12px;
    }

    .car-picker-icono {
        right: 16px;
        top: 17px;
        width: 19px;
        height: 19px;
    }

    /* Los datos del destinatario pasan a dos columnas. Los modificadores
       --ancho son para los campos que ocupan la fila entera (direccion,
       referencia). */
    .car-campos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .car-campo--ancho,
    .car-locacion--ancho {
        grid-column: 1 / -1;
    }

    /* Mensaje y sugerencias, en paralelo. El textarea manda (flex 1 1 380px) y
       las sugerencias se conforman con 260px. */
    .car-mensaje-cuerpo {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .car-mensaje-campo {
        flex: 1 1 380px;
    }

    .car-sugerencias {
        flex: 0 1 260px;
    }

    .car-mensaje-toggle {
        font-size: 11px;
        letter-spacing: .18em;
        gap: 10px;
    }

    .car-chars {
        font-size: 12px;
    }

    /* Comprobante: pastillas de ancho propio en fila, no dos botones
       estirados. */
    .car-opciones {
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .car-opcion {
        flex: 0 0 auto;
        height: 42px;
        padding: 0 18px;
        font-size: 12.5px;
    }

    /* EL HUECO EN BLANCO DE FACTURA ERA ESTA LÍNEA.
       Aquí había un `flex: 1 1 320px`, escrito pensando que 320px sería el
       ANCHO de la fila de campos. Pero .car-factura no es hijo de .car-opciones:
       es hijo de .car-paso, que es display:flex con flex-direction:column. En un
       contenedor en columna el flex-basis es la ALTURA, así que el bloque medía
       320px de alto para tres campos de 42, y el flex-grow:1 encima le daba el
       espacio sobrante del paso. De ahí el vacío que aparecía debajo al elegir
       FACTURA. No se sustituye por nada: sin declarar flex, el bloque mide lo
       que miden sus campos. */
    .car-factura {
        flex-direction: row;
        gap: 10px;
    }

    /* Los campos se reparten el ancho. El flex va en el envoltorio y no en el
       input porque bootstrap-material envuelve cada input en un
       span.bmd-form-group al cargar: el hijo directo de la fila —y por tanto el
       item flexible— es ese span, no el input. Se nombran los dos para que la
       regla siga valiendo si algún día el envoltorio deja de aparecer. */
    .car-factura > .bmd-form-group,
    .car-factura > .car-input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .car-factura .car-input {
        height: 42px;
        width: 100%;
    }

    /* El RUC son once dígitos: no necesita el mismo ancho que la razón social.
       Se limita el input y no su envoltorio para no depender de :has(), que en
       una lista de selectores tumbaría la regla entera donde no exista. */
    .car-factura .car-input--ruc {
        max-width: 150px;
    }

    /* EL HUECO ANTES DE "DIRECCIÓN FISCAL" SALÍA DE LA REGLA DE ARRIBA.
       Capar el input a 150px no encoge el span.bmd-form-group que lo envuelve:
       ese span sigue siendo un item flexible con `flex: 1 1 auto` y se lleva su
       tercio del ancho igual que los otros dos. Medido a 1280px: envoltorios de
       273 / 261 / 273, con el input del RUC ocupando 150 de sus 261. Los 111px
       sobrantes, más los 10 del gap, son los 121px de vacío que la clienta veía
       entre el RUC y la dirección fiscal.

       Se encoge el ENVOLTORIO, que es el item que reparte. Va por posición y no
       por :has(#comprobante_ruc) para no depender de esa pseudoclase: el orden
       de los tres campos —razón social, RUC, dirección— está fijado en
       carrito-de-compras.php:2099-2104, justo uno debajo de otro. */
    .car-factura > *:nth-child(2) {
        flex: 0 0 auto;
    }

    .car-pagos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .car-pago {
        gap: 14px;
        padding: 20px;
    }

    .car-pago-tit {
        font-size: 14.5px;
    }

    .car-pago-desc {
        font-size: 12.5px;
    }

    /* La barra deja de ser fija en cuanto hay pantalla: a partir de aqui el
       formulario ya no obliga a un scroll tan largo y una barra fija solo
       robaria alto. Se quita tambien el hueco reservado. */
    /* La barra deja de ser fija en cuanto hay pantalla: a partir de aqui el
       formulario ya no obliga a un scroll tan largo y una barra fija solo
       robaria alto. Se queda con el boton y nada mas, en su sitio del
       artboard: despues de los terminos. Se quita tambien el hueco
       reservado al final de la pagina. */
    .car-barra {
        position: static;
        z-index: auto;
        min-height: 0;
        padding: 0;
        background: transparent;
        border-top: 0;
        display: block;
    }

    .car-carrito {
        padding-bottom: 0;
    }

    /* El total de la barra desaparece: en escritorio manda
       .car-resumen-total, que va mas arriba. */
    .car-barra-total {
        display: none;
    }

    /* Y aqui aparece el TOTAL del artboard, entre el filete y la caja de
       entrega. align-items:flex-end asienta el rotulo pequeno sobre la linea
       de base de la cifra grande en vez de centrarlo contra ella. */
    .car-resumen-total {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
    }

    .car-resumen-total .car-rotulo {
        font-size: 12px;
        letter-spacing: .2em;
    }

    .car-boton-pagar {
        display: flex;
        width: 100%;
        margin-left: 0;
        max-width: none;
        height: 56px;
        font-size: 14px;
        letter-spacing: .24em;
    }
}

/* --------------------------------------------------------------------------
   Desde 992px - dos columnas y resumen pegajoso
   372px es el ancho del diseno para la columna derecha. A 992px deja unos
   620px para el contenido, lo justo para que la rejilla de seis columnas de la
   linea de producto no se estruje.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

    .car-grid {
        grid-template-columns: minmax(0, 1fr) 372px;
    }

    /* La columna se pega arriba mientras el formulario pasa por debajo. Tres
       detalles que no son obvios:
       - align-self:start es imprescindible. Por defecto un item de rejilla se
         estira a todo el alto de la fila, y un elemento estirado nunca tiene
         nada que "pegar": el sticky no hace efecto.
       - top:0 vale porque el sitio no lleva cabecera fija. Si algun dia se fija
         el menu, este 0 hay que subirlo al alto de esa cabecera.
       - la altura maxima y el overflow no son adorno: si el resumen creciera
         mas que la pantalla (con la lista de lo que falta abierta, por
         ejemplo), su final quedaria inalcanzable, porque un sticky que se sale
         por abajo no se puede desplazar. Asi se desplaza por dentro. */
    .car-resumen {
        position: sticky;
        top: 0;
        align-self: start;
        max-height: 100vh;
        overflow-y: auto;
        background: var(--car-crema);
        border: 0;
        border-left: 1px solid var(--car-filete);
        padding: 36px 32px 40px;
        gap: 20px;
    }

    .car-resumen-tit {
        font-size: 12px;
        letter-spacing: .2em;
    }

    .car-resumen-fila {
        font-size: 14.5px;
        gap: 12px;
    }
}

/* --------------------------------------------------------------------------
   Preferencias del usuario
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .car-carrito *,
    .car-carrito *::before,
    .car-carrito *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Al imprimir el pedido no sirven de nada la barra de progreso ni los botones;
   el resumen si. */
@media print {
    .car-progreso,
    .car-barra,
    .car-linea-quitar,
    .car-linea-toggle,
    .car-sugerencias {
        display: none;
    }

    .car-carrito {
        padding-bottom: 0;
    }

    .car-resumen {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ==========================================================================
   CABECERA FINA DEL PAGO
   Solo se pinta en el checkout aislado. El artboard 1a la resuelve en una
   linea: "COMPRA SEGURA" a la izquierda, el logo al centro y el telefono a la
   derecha, repartidos a los extremos.

   El marcado no los tiene como hermanos: "compra segura" y el telefono van
   dentro de .car-cabecera-fina, y el logo (.checkout-marca) es un hermano de
   ese div, no un hijo. Con display:contents el div desaparece a efectos de
   layout y sus dos hijos pasan a ser items directos del flex de la cabecera,
   junto al logo. Luego se ordenan con 'order', que es lo que permite meter el
   logo EN MEDIO de dos elementos que en el HTML van seguidos.

   EL ALTO ES DELIBERADAMENTE FIJO, y de ahi sale el arreglo del hueco de 63px
   que quedaba bajo la cabecera. etapa2.css compensa la cabecera fija con
   `.cabeceramenu-checkout ~ .main-carrito { margin-top: 82px/108px }`, unos
   numeros calculados cuando la cabecera solo llevaba el logo. Al anadir esta
   linea el alto real cambio y los dos numeros dejaron de cuadrar.
   En vez de medir otra vez y volver a apuntar un numero que caduca al
   siguiente cambio, aqui el alto se CONSTRUYE: padding + alto del logo, las
   dos cosas fijadas mas abajo. Y la compensacion se declara con esa misma
   suma. Si manana cambia el padding o el logo, se cambian los dos numeros que
   estan uno al lado del otro y no hay nada que medir.

     escritorio: 18 + 52 + 18 + 1 de filete = 89
     movil:      12 + 44 + 12 + 1 de filete = 69

   OJO CON EL SUMANDO DE EN MEDIO EN MOVIL: ya NO es el alto del logo. Desde
   que el WhatsApp es un recuadro de 44x44 -medida del artboard, y minimo de un
   area que se pulsa con el dedo-, el elemento mas alto de la fila es ese
   recuadro y no el logo, que mide 38. Manda el mayor de los dos.
   ========================================================================== */
.cabeceramenu.cabeceramenu-checkout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #faf6f1;
    border-bottom: 1px solid #e6ddd2;
    font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* El div se disuelve y sus dos hijos suben a ser items del flex de arriba. */
.car-cabecera-fina {
    display: contents;
}

/* "COMPRA SEGURA". En movil desaparece: a 390px no caben las tres cosas en
   una linea, y de las tres es la unica que no se puede tocar ni pulsar. El
   artboard movil (1b) tambien la quita y deja solo logo y WhatsApp. */
.car-cabecera-seguro {
    display: none;
    order: 1;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #a8957f;
}

/* El logo, en medio. El alto va fijo porque de el depende el alto total de la
   cabecera y, por tanto, la compensacion de mas abajo. */
/*
 * LA CAJA DEL LOGO SE ESTIRABA DE LADO A LADO.
 *
 * etapa2.css trae un diseno anterior de esta cabecera en el que la marca era
 * una banda propia: "width: 100%" y un fondo "rgba(251,249,236,.9)". Aqui la
 * cabecera pasa a ser una fila de tres cosas y la marca solo tiene que ceñir
 * al logo, pero al reordenarla no se le devolvio el ancho ni se le quito el
 * fondo.
 *
 * Medido a 1440px: la caja media 1056px con un logo de 78 dentro, o sea un
 * rectangulo palido cruzando la cabecera entera. Se ve en el carrito y en las
 * pantallas de respuesta del pago, que comparten esta cabecera.
 *
 * flex:none es lo que impide que vuelva a crecer o encogerse con el reparto
 * del flex; width:auto deshace el 100% heredado.
 */
.cabeceramenu-checkout .checkout-marca {
    order: 2;
    flex: none;
    width: auto;
    background: none;
    padding: 0;
    margin: 0;
}

.cabeceramenu-checkout .checkout-marca img {
    display: block;
    /* 38px medidos en el artboard movil (el logo sale de 57x38). */
    height: 38px;
    width: auto;
    max-width: none;
}

/* El telefono. El icono en el verde de WhatsApp, que es el unico color de
   fuera de la paleta que el artboard admite aqui: se reconoce antes por el
   color que por la forma. */
.car-cabecera-tel {
    order: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: #796857;
    text-decoration: none;
    white-space: nowrap;
}

.car-cabecera-tel:hover,
.car-cabecera-tel:focus {
    color: #8c6239;
    text-decoration: none;
}

.car-cabecera-tel svg,
.car-cabecera-tel img,
.car-cabecera-tel i {
    flex: none;
    width: 17px;
    height: 17px;
    display: block;
    color: #25D366;
}

/* --------------------------------------------------------------------------
   EN MOVIL EL WHATSAPP ES UN RECUADRO, NO UNA LINEA DE TEXTO

   Medido en el artboard movil: el numero NO se ensena; queda un cuadrado
   blanco de 44x44 con filete de 1px y el icono de 22px dentro. El numero
   completo solo sale en escritorio, donde si cabe al lado del logo.

   No es solo estetica: 44x44 es la medida minima de algo que se pulsa con el
   dedo. Tal como estaba, el area util eran los 17px del icono.

   El numero se esconde con display:none y no se borra del marcado: el enlace
   sigue siendo el mismo wa.me y el lector de pantalla sigue leyendolo.
   -------------------------------------------------------------------------- */
.cabeceramenu-checkout .car-cabecera-tel {
    /* La cabecera es un flex y el enlace se encogia a 38px por el reparto:
       flex:none le dice que respete los 44 y no ceda ancho. */
    flex: none;
    width: 44px;
    height: 44px;
    justify-content: center;
    gap: 0;
    background: #ffffff;
    border: 1px solid #e6ddd2;
}

.car-cabecera-tel-num {
    display: none;
}

.cabeceramenu-checkout .car-cabecera-tel i {
    width: 22px;
    height: 22px;
    font-size: 22px;
    line-height: 1;
}

/* La compensacion de la cabecera fija NO esta aqui: vive en etapa2.css, en el
   bloque .cabeceramenu-checkout ~ .main-carrito, que es donde estaba desde el
   principio. Se corrigieron alli los dos numeros (65 y 89) con la suma que se
   explica arriba, en vez de dejar dos reglas peleandose con !important.
   Si cambia el padding o el alto del logo de esta cabecera, hay que ir a
   etapa2.css. */

@media (min-width: 768px) {

    .cabeceramenu.cabeceramenu-checkout {
        gap: 24px;
        padding: 18px 40px;
    }

    .car-cabecera-seguro {
        display: block;
    }

    .cabeceramenu-checkout .checkout-marca img {
        height: 52px;
    }

    /* En escritorio se deshace el recuadro: vuelve a ser icono + numero en
       linea, que es lo que dibuja el artboard de escritorio. */
    .cabeceramenu-checkout .car-cabecera-tel {
        width: auto;
        height: auto;
        background: none;
        border: 0;
        gap: 9px;
    }

    .car-cabecera-tel-num {
        display: inline;
    }

    .car-cabecera-tel {
        font-size: 13px;
        gap: 9px;
    }

    .car-cabecera-tel svg,
    .car-cabecera-tel img,
    .cabeceramenu-checkout .car-cabecera-tel i {
        width: 19px;
        height: 19px;
        font-size: 19px;
    }

}


/* --------------------------------------------------------------------------
   Casilla de terminos: se veia el texto pero NO la casilla

   El input llevaba opacity:0. Ese patron es correcto cuando se dibuja una
   casilla propia encima -es lo que hacemos en .car-opcion y .car-pago, donde
   el input invisible cubre la etiqueta y el punto lo pinta .car-opcion-dot-,
   pero aqui no habia nada que lo sustituyera: quedaba el texto suelto y ningun
   cuadrito que marcar.

   Como el navegador ya dibuja una casilla perfectamente buena, se deja la suya
   y se le da el color de la marca con accent-color. Menos codigo y sin perder
   el foco de teclado ni el estado indeterminado.
   -------------------------------------------------------------------------- */
.car-terminos input[type="checkbox"] {
    opacity: 1;
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 16px;
    height: 16px;
    /* Sin margen a la derecha: el label ya es flex con gap:10px, asi que el
       margen se SUMABA al hueco y separaba el texto 20px de su casilla. El
       diseno aprobado pone `margin:2px 0 0` y deja la separacion al gap. Los
       2px de arriba son los que centran la casilla contra la primera linea. */
    margin: 2px 0 0;
    flex: 0 0 16px;
    accent-color: #8c6239;
    cursor: pointer;
}

/* El texto va dentro de un <span>, y `index.css` trae un `* { font-size: 16px }`
   que le gana a la herencia: el label pide 12.5px y el span se plantaba en 16,
   con su line-height de 24px. Eso es lo que descuadraba el texto respecto de la
   casilla, ademas del margen de arriba. Heredar lo devuelve al tamaño aprobado.

   Va tambien el <a>: «Acepto los términos y condiciones» lleva el enlace DENTRO
   de la frase, asi que arreglar solo el span dejaba media linea a 12.5px y la
   otra media a 16px, con dos tamaños en la misma oracion.

   Se excluye .car-ayuda porque no es texto: es el interrogante de FontAwesome,
   y su font-size es lo que le da el tamaño al icono. */
.car-terminos span,
.car-terminos a:not(.car-ayuda) {
    font-size: inherit;
    line-height: inherit;
}

/* Subrayado en el enlace. Antes se distinguia del resto de la frase porque era
   mas grande -por el `* { font-size: 16px }`-, no porque estuviera marcado. Al
   igualar el tamaño se quedaba sin ninguna señal de que era pulsable: mismo
   cuerpo y mismo color que el texto de al lado. */
.car-terminos a:not(.car-ayuda) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.car-terminos {
    align-items: flex-start;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   EL ICONO DEL CALENDARIO: se deja de posicionar, se dibuja en el campo

   El diagnostico de partida era correcto: el icono estaba anclado a
   .car-picker, que mide 76px porque incluye el rotulo, mientras que el campo
   empieza 19px mas abajo y solo mide 52. Con top:17px caia sobre el filete.

   Un primer arreglo lo anclo desde abajo (bottom:17px) en vez de desde arriba.
   Eso NO vale, y ademas es de las cosas que hoy parecen funcionar y se rompen
   sin avisar: por debajo del campo hay mas cosas dentro de .car-picker -el
   #diaSeleccionado, el aviso de error y el de fecha caducada-. Ahora mismo el
   #diaSeleccionado esta vacio y no ocupa alto, asi que "abajo del contenedor"
   y "abajo del campo" coinciden por casualidad. En cuanto el cliente elige una
   fecha, ese span se llena con la fecha en palabras, crece, y el icono se va
   con el: acabaria flotando sobre el texto. Y con el error visible, otro tanto.

   Se quita el problema de raiz: el icono deja de ser un elemento posicionado y
   pasa a ser el fondo del propio campo. Anclado al campo por construccion, sin
   nada que medir y sin nada arriba ni abajo que lo pueda mover. Es lo mismo
   que ya se hace con la flecha de los desplegables unas lineas mas arriba.

   Por eso el <i class="fa fa-calendar"> se retiro de J-fecha.txt: ya no pinta
   nada. La regla que lo escondia se queda por si alguna copia del marcado lo
   conserva.
   -------------------------------------------------------------------------- */
.car-picker-campo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c6239' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 17px 17px;
}

.car-picker .car-picker-icono,
.car-picker > i.fa-calendar {
    display: none;
}

/* --------------------------------------------------------------------------
   Los dos campos vacios se leian distinto

   El de fecha ensenaba su placeholder en gris claro y el de horario ensenaba
   "SELECCIONAR HORA" en mayusculas y oscuro, con pinta de campo ya relleno.
   Los dos estan vacios y tienen que leerse igual.

   No se puede resolver con una clase: el AJAX reemplaza el contenido de
   #html_envio_hora entero al cambiar la fecha o el distrito y se la llevaria
   por delante. Tiene que ser una regla sobre el select.
   -------------------------------------------------------------------------- */
/* El text-transform necesita !important y no es un capricho: las mayusculas
   no las pone el select, las pone la clase .text-uppercase que trae el
   marcado, y bootstrap.min.css la declara asi:

     .text-uppercase { text-transform: uppercase !important }

   A un !important solo se le gana con otro. Sin el, la regla de aqui abajo
   cambiaba el color pero "SELECCIONAR HORA" seguia gritando en mayusculas.
   Va sobre el select entero y no solo sobre el estado vacio: una vez elegida
   la hora, "07:30 a 08:30" tampoco gana nada en mayusculas. */
.car-picker-hora select,
#envio_hora {
    text-transform: none !important;
}

#envio_hora:has(option[value="0"]:checked),
.car-picker-hora select:has(option[value="0"]:checked) {
    color: var(--car-texto-3);
    font-weight: 400;
}

/* Respaldo sin :has(), que no llega a los navegadores mas viejos y ahi el
   campo volveria a leerse como relleno.
   La clase va en el CONTENEDOR y nunca en el select: el AJAX reemplaza el
   contenido de #html_envio_hora entero al cambiar la fecha o el distrito, asi
   que una clase puesta en el select desaparece en el primer repintado y una
   puesta en el div sobrevive.
   Queda escrita para que la sesion del JavaScript solo tenga que alternarla
   segun si el valor es "0". */
.car-picker-hora.is-vacio select {
    color: var(--car-texto-3);
    font-weight: 400;
}

/* ==========================================================================
   MODAL DE COMPLEMENTOS

   EL ARTBOARD NO DIBUJA ESTE MODAL. No hay nada que copiar, asi que lo de aqui
   son decisiones tomadas aplicando la linea del resto de la pantalla. Cada una
   va explicada, porque cuando la clienta lo vea preguntara de donde sale.
   El detalle esta en docs/rediseno-carrito/diferencias.md.

   TODO VA COLGADO DE .car-modal, una clase que hay que anadir al <div class=
   "modal fade ..."> de A2-modal-complementos.txt. No se cuelga de .modc ni de
   .modal-complemento, que son las clases que el marcado ya tiene, porque esas
   dos viven TAMBIEN en la vista vieja del carrito: engancharse a ellas
   redecoraria de paso una pagina que nadie ha pedido tocar.

   Las variables se redeclaran aqui: el modal se emite despues de </main>, o
   sea FUERA de .car-carrito, asi que no hereda ninguna.
   ========================================================================== */
.car-modal {
    --car-marron: #8c6239;
    --car-marron-hover: #6d4a29;
    --car-naranja: #ffb466;
    --car-crema: #faf6f1;
    --car-filete: #e6ddd2;
    --car-texto: #4c4c4c;
    --car-texto-2: #796857;
    --car-texto-3: #a8957f;
    --car-blanco: #ffffff;
    font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    color: var(--car-texto);
}

.car-modal .modal-content,
.car-modal .modc {
    border: 1px solid var(--car-filete);
    border-radius: 0;
}

/* --- La cabecera deja de ser una banda naranja ---------------------------
   Decision: fuera el fondo #ffb466 a todo el ancho. Dos razones.
   Una, en el rediseno ningun bloque se titula con una banda de color: se
   titulan con un rotulo pequeno en mayusculas con tracking, y este modal es un
   bloque mas.
   Dos, y es la de fondo: el naranja de la marca esta reservado a los PRECIOS.
   Es el unico sitio donde aparece en toda la pantalla, y eso es lo que hace
   que el ojo lo encuentre. Gastarlo en el fondo de una cabecera le quita ese
   significado en la unica pantalla donde el precio importa.
   Queda como el panel de entrega: crema con filete. */
.car-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px !important;
    background: var(--car-crema);
    border-bottom: 1px solid var(--car-filete);
    border-radius: 0;
}

.car-modal .head-form {
    width: auto;
    background-color: transparent;
    padding: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--car-marron);
}

/* --- Cerrar -------------------------------------------------------------
   UNA SOLA REGLA. Habia dos: una colgada de .close, que es la clase de
   Bootstrap 4, y otra de .car-modal-cerrar, que es la nueva. El sitio carga
   Bootstrap 5, donde .close ya no existe, asi que la primera sobra; y con las
   dos puestas era imposible saber cual mandaba.

   Se queda EN EL FLUJO, como segundo hijo del flex de la cabecera, y no
   absoluto. El absoluto no daba tamano porque el boton no tenia nada dentro
   con lo que medirse: el marcado de Bootstrap 5 pinta la X con un fondo, no
   con el caracter, asi que sin ancho y alto propios el elemento se quedaba en
   0x0. En el flujo y con medidas explicitas eso no puede pasar, y ademas la
   cabecera ya lo coloca a la derecha ella sola con justify-content.

   Es el mismo recuadro de 34px con filete de .car-linea-quitar, que es el
   unico control de "quitar" del rediseno. Mismo gesto, misma pinta. El unico
   boton macizo del modal sigue siendo ANADIR.
   -------------------------------------------------------------------------- */
.car-modal .car-modal-cerrar,
.car-modal .modal-header .close {
    position: static;
    flex: none;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--car-filete);
    border-radius: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: var(--car-texto-3);
    opacity: 1;
    text-shadow: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.car-modal .car-modal-cerrar:hover,
.car-modal .car-modal-cerrar:focus,
.car-modal .modal-header .close:hover,
.car-modal .modal-header .close:focus {
    border-color: var(--car-marron);
    color: var(--car-marron);
    opacity: 1;
}

.car-modal .car-modal-cerrar:focus-visible {
    outline: 2px solid var(--car-marron);
    outline-offset: -2px;
}

.car-modal .modal-body {
    padding: 24px;
    background: var(--car-blanco);
}

/* --- Tarjeta de complemento ---------------------------------------------
   Decision: cada complemento pasa a ser una tarjeta seleccionable con el mismo
   trato que .car-opcion y .car-pago -filete fino, y al elegirla fondo crema y
   filete marron-. Es el patron que la pantalla ya usa para todo lo que se
   elige, asi que no hay que aprender nada nuevo. */
.car-modal .img-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    height: auto;
}

.car-modal .img-gallery figure {
    margin: 0;
}

.car-modal .img-gallery figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* Fuera el velo oscuro del hover, que oscurecia la foto entera. */
.car-modal .hovers {
    display: none;
}

/* --- Separadores --------------------------------------------------------
   Decision: fuera el `1px dashed rgba(111,88,68,.3)` de index.css. En el
   rediseno no hay una sola linea de puntos: los separadores son filetes finos
   continuos del color del filete de marca. */
.car-modal .info-complement ul,
.car-modal .info-complement ul.lista-app {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 0;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--car-filete);
}

.car-modal .info-complement ul .title-prod-cmpl {
    margin-bottom: 0;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: none;
    color: var(--car-texto);
}

/* --- Precio -------------------------------------------------------------
   Decision: el naranja de marca, #ffb466, y el mismo peso y tamano que el
   precio de la linea de producto ajustado a la tarjeta. Antes lo cambiaba
   .img-gallery:hover .prc-compl, que lo ponia marron al pasar el raton: el
   precio no cambia porque el cursor pase por encima. */
.car-modal .prc-compl,
.car-modal .img-gallery:hover .prc-compl {
    font-size: 16px;
    font-weight: 600;
    color: var(--car-naranja);
}

.car-modal .info-complement span {
    font-size: inherit;
}

/* --- El campo de la taza personalizada ---------------------------------- */
.car-modal .input-taza {
    height: 46px;
    border: 1px solid var(--car-filete);
    border-radius: 0;
    background: var(--car-blanco);
    padding: 0 12px;
    font-size: 14.5px;
    color: var(--car-texto);
}

.car-modal .input-taza:focus {
    outline: none;
    border-color: var(--car-marron);
    box-shadow: none;
}

.car-modal .span-taza {
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    border-right: 0;
    border-radius: 0;
}

/* --- AGREGAR ------------------------------------------------------------
   Decision: se queda como <label> con su casilla dentro, que es lo correcto
   -asi se puede marcar con el teclado y el area pulsable es toda la fila-,
   pero se viste como .car-opcion: recuadro con filete, punto a la izquierda y
   texto en mayusculas con tracking.
   El .checkmark que ya trae el marcado hace de punto: pasa de 25px a 16px, el
   tamano del punto de .car-pago, y del gris al marron.
   Se anula ademas .img-gallery:hover .containers de index.css, que ponia la
   etiqueta entera en marron oscuro con texto blanco al pasar el raton: eso la
   hacia parecer YA ELEGIDA sin haberla tocado. */
.car-modal label.containers.btn-agregar,
.car-modal .img-gallery:hover .containers,
.car-modal .img-gallery:focus .containers {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100% !important;
    height: 42px;
    margin: 0;
    padding: 0 12px 0 34px;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--car-texto-2);
    cursor: pointer;
}

.car-modal .checkmark,
.car-modal .img-gallery:hover .checkmark,
.car-modal .img-gallery:focus .checkmark {
    top: 50%;
    left: 12px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 1px solid var(--car-filete);
    background: transparent;
}

.car-modal .containers .checkmark:after {
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background: var(--car-marron);
}

/* Marcado: mismo trato que .car-opcion elegida. */
.car-modal .containers:has(input:checked) {
    background: var(--car-crema);
    border-color: var(--car-marron);
    color: var(--car-marron);
}

.car-modal .containers:has(input:checked) .checkmark {
    border-color: var(--car-marron);
}

.car-modal label.containers:focus-within {
    outline: 2px solid var(--car-marron);
    outline-offset: -2px;
}

/* --- El boton de anadir -------------------------------------------------
   Este SI es correcto que sea macizo marron: es la accion principal del modal,
   igual que PAGAR lo es de la pantalla. Se le dan las medidas exactas de
   .car-boton-pagar para que sean el mismo boton y no dos parecidos. */
.car-modal .btn-agregar-modal {
    margin: 20px 0 0;
    padding: 0;
}

.car-modal .btn-agregar-complemento {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    padding: 0 24px;
    background: var(--car-marron);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--car-blanco);
    cursor: pointer;
    transition: background-color .15s ease;
}

.car-modal .btn-agregar-complemento:hover,
.car-modal .btn-agregar-complemento:focus {
    background: var(--car-marron-hover);
    color: var(--car-blanco);
    box-shadow: none;
}

/* El efecto de onda de Material no pinta nada aqui y deja un div flotando con
   coordenadas fijas escritas a mano en el marcado. */
.car-modal .ripple-container,
.car-modal .ripple-decorator {
    display: none !important;
}


/* --------------------------------------------------------------------------
   URGENTE: un input invisible tapaba la pagina entera

   Los radios de .car-pago y .car-opcion van dentro del label y se estiran
   invisibles por encima para conservar el foco de teclado. Eso es correcto,
   PERO un elemento absoluto se estira contra el ancestro POSICIONADO mas
   cercano, y ni .car-pago ni .car-opcion lo eran.

   Resultado medido: el radio de formas_pago ocupaba 1440x941 px sobre toda la
   pagina. Ningun clic llegaba a su destino: ni la papelera, ni el boton de
   complementos, ni el mas, ni VALIDAR, ni el select de distrito. Y sin un solo
   error en consola, porque no falla nada: los clics llegan, solo que al
   elemento equivocado.

   Se arregla dandole position:relative al label, que es lo que faltaba.
   -------------------------------------------------------------------------- */
.car-pago,
.car-opcion,
.car-terminos {
    position: relative;
}

/* Y el mismo problema en los iconos de ayuda: sin ancestro posicionado se
   colocaban contra la pagina y acababan fuera del panel, sueltos a la derecha.
   El caso medido estaba en x:1355, fuera de la tarjeta. */
.car-campo,
.car-picker,
.car-entrega-campo {
    position: relative;
}


/* El bloque que habia aqui empataba especificidad con
   `.car-carrito label { position: static }` para que .car-pago, .car-opcion y
   .car-terminos recuperasen su relative. Ya no hace falta: el static de aquel
   selector paso a relative arriba del todo, que es donde estaba el problema. */


/* La X de cerrar del modal se define UNA sola vez, mas arriba, junto al resto
   de la cabecera. Aqui habia una segunda version en position:absolute que
   salia a 0x0 y peleaba con aquella. */


/* --------------------------------------------------------------------------
   Los iconos de ayuda se salian del panel

   Tres se apilaban en x:1355, fuera de la tarjeta, flotando sobre el fondo.

   Misma causa que el radio que tapaba la pagina: son absolutos y su contenedor
   .car-campo estaba en static, asi que se colocaban contra la PAGINA. Y estaba
   en static porque .car-campo es un <label>, y `.car-carrito label` lo forzaba
   ahi con mas peso (0,1,1) que `.car-campo` (0,1,0).

   Es el mismo conflicto de antes: el arreglo de las etiquetas flotantes,
   necesario, alcanzaba tambien a los contenedores que si necesitan ser
   relative. Se empata la especificidad.
   -------------------------------------------------------------------------- */

/* LOS INTERROGANTES SE DESPEGABAN DE SU LINEA EN EL TELEFONO.

   Colocar el icono dentro de su campo ya lo hace la regla de mas abajo,
   `.car-carrito .car-campo > .car-ayuda`, que declara position:absolute y lo
   centra con top:50% + translateY(-50%).

   Aqui habia un right/top/bottom/left suelto que caia sobre TODOS los
   .car-ayuda, tambien sobre los que no estan dentro de ningun campo. Hacia dos
   destrozos, ambos solo en movil, que es donde la hoja les pone
   position:relative para anclar el area tactil de 34x34:

     1. Los iconos SUELTOS -el de "Importante" y el de "Recordarme esta fecha
        dentro de 1 ano"- con `bottom:15px` sobre un elemento relative se
        levantaban 15px respecto a su sitio en la linea. Eso son los "iconos
        volando" que reporto la clienta el 2026-09-11.
     2. Los que SI van dentro de un campo recibian `top:50%` de aquella regla y
        `bottom:15px` de esta. Con top y bottom a la vez y altura automatica, la
        caja se estira: medidos en QA daban 13x8 px en vez de 13x13.

   En escritorio no se notaba porque alli los sueltos son static y un offset
   sobre un static no lo lee nadie.

   Se dejan los cuatro en auto y no se borran sin mas, para que ninguna otra
   regla los reponga por detras. */
.car-carrito .car-ayuda {
    right: auto;
    top: auto;
    bottom: auto;
    left: auto;
}


/* --------------------------------------------------------------------------
   El grupo de cantidad se leia como tres cajas sueltas

   El campo del medio tenia fondo TRANSPARENTE. Sobre la tarjeta crema eso
   significa que no habia ningun contraste entre el campo y los botones, y el
   conjunto no se leia como un control unico sino como tres piezas pegadas.

   En el artboard la tarjeta es blanca y los botones crema se recortan solos
   contra ella; con la tarjeta en crema esa logica se invierte y hay que
   declarar el blanco a mano.
   -------------------------------------------------------------------------- */
.car-carrito .car-cant {
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
}

.car-carrito .car-cant-campo {
    background: var(--car-blanco);
    border: 0;
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Las flechas nativas del campo numerico sobran: para eso estan los botones,
   y ademas se solapaban con el signo de mas. */
.car-carrito .car-cant-campo::-webkit-outer-spin-button,
.car-carrito .car-cant-campo::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.car-carrito .car-cant-boton {
    background: var(--car-crema);
    border: 0;
    color: var(--car-marron);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease;
}

/* Los filetes separan las tres celdas. Van en el campo y no en los botones
   para que no aparezcan tambien en los bordes exteriores del grupo. */
.car-carrito .car-cant-campo {
    border-left: 1px solid var(--car-filete);
    border-right: 1px solid var(--car-filete);
}

.car-carrito .car-cant-boton:hover { background: #f0e7dc; }

.car-carrito .car-cant-boton:focus-visible {
    outline: 2px solid var(--car-marron);
    outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   Miniatura del complemento

   DESVIACION DELIBERADA del artboard, pedida por el cliente: alli las filas de
   complemento no llevan foto. Se devuelve porque en el modal la persona elige
   POR LA FOTO -una tortita, un croissant, un globo- y al volver al carrito solo
   veia "Foto" y "Mini torta Cumple" en texto, teniendo que recordar que
   escogio justo en la pantalla donde confirma lo que compra.

   48px: la mitad del alto de la fila, que se lee de inmediato como accesorio y
   no como producto. El producto son 88px en escritorio y 64 en movil, asi que
   48 queda por debajo de los dos sin tener que elegir contra cual compararse.
   -------------------------------------------------------------------------- */
.car-carrito .car-linea-comp {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: start;
}

.car-carrito .car-linea-comp-foto {
    width: 48px;
    height: 48px;
    display: block;
    background-size: cover;
    background-position: center;
    background-color: var(--car-crema);
}

/* En movil el pie va bajo los TEXTOS, no bajo la miniatura: sin esto cae en la
   columna 1 y el grupo de cantidad se aprieta en 48px. En escritorio la regla
   no estorba, porque alli el pie es display:contents. */
.car-carrito .car-linea-comp-pie { grid-column: 2; }

@media (min-width: 768px) {
    .car-carrito .car-linea-comp {
        grid-template-columns: 48px minmax(0, 1fr) 126px 96px 34px;
    }
}


/* --------------------------------------------------------------------------
   Grupo de cantidad: version definitiva

   Lo anterior tenia tres desajustes que se sumaban y lo hacian ver roto:
   el borde del campo salia en gris oscuro #4c4c4c y no en el filete de marca,
   la caja del complemento media 34px de alto contra los 40 de la del producto,
   y el numero iba a 14px mientras los signos iban a 18.

   Ahora los dos grupos son el mismo control: mismo alto, mismo filete, mismo
   tamano de letra. El artboard da fondo #ffffff y borde 1px solid #e6ddd2, que
   es lo que se aplica aqui.
   -------------------------------------------------------------------------- */
.car-carrito .car-cant,
.car-carrito .car-linea-comp .car-cant {
    height: 40px;
    background: #ffffff;
    border: 1px solid #e6ddd2;
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
}

.car-carrito .car-cant-boton {
    width: 40px;
    flex: 0 0 40px;
    background: #faf6f1;
    border: 0;
    color: #8c6239;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease;
}

.car-carrito .car-cant-campo {
    width: 46px;
    flex: 0 0 46px;
    height: auto;
    background: #ffffff;
    border: 0;
    border-left: 1px solid #e6ddd2;
    border-right: 1px solid #e6ddd2;
    border-radius: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #4c4c4c;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.car-carrito .car-cant-campo::-webkit-outer-spin-button,
.car-carrito .car-cant-campo::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.car-carrito .car-cant-boton:hover { background: #f0e7dc; }

.car-carrito .car-cant-boton:focus-visible {
    outline: 2px solid #8c6239;
    outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   El numero de la cantidad quedaba pegado arriba

   El campo llevaba height:auto. En un <input> eso no significa "estirate hasta
   tu contenedor" sino "toma tu altura intrinseca", asi que media menos que la
   caja y el texto quedaba arriba con el hueco debajo, mientras los signos
   - y + si estaban centrados. De ahi que se leyera desalineado.

   Con height:100% el campo ocupa todo el alto del grupo y el navegador centra
   el texto verticalmente el solo, que es lo que hace de serie con los input de
   una sola linea.
   -------------------------------------------------------------------------- */
.car-carrito .car-cant-campo {
    height: 100%;
    align-self: stretch;
    line-height: normal;
}


/* --------------------------------------------------------------------------
   Los tres controles de la fila de complemento no se alineaban entre si

   La fila lleva align-items:start, asi que cada celda se pega ARRIBA con su
   propia altura. Medidos, sus centros caian en 33, 24 y 28 px: el grupo de
   cantidad mide 40, el importe 23 y la papelera 30, y al pegarse todos arriba
   ninguno quedaba a la misma altura que los demas.

   El start es correcto para la foto y los textos, que empiezan arriba y crecen
   hacia abajo. Para los tres controles del pie no: son piezas de una misma
   fila de acciones y tienen que leerse en una linea.
   -------------------------------------------------------------------------- */
.car-carrito .car-linea-comp-pie > .car-cant,
.car-carrito .car-linea-comp-pie > .car-linea-comp-total,
.car-carrito .car-linea-comp-pie > .car-linea-quitar {
    align-self: center;
}

@media (min-width: 768px) {
    .car-carrito .car-linea-comp > .car-linea-comp-foto {
        align-self: center;
    }
}


/* --------------------------------------------------------------------------
   Fila de descuento del resumen

   Va en el verde de un ahorro, no en el marron del resto de importes: es la
   unica cifra de la columna que RESTA, y distinguirla es justo lo que hace que
   el cliente la vea. Con el mismo marron pasaria por una linea mas.
   -------------------------------------------------------------------------- */
.car-carrito .car-resumen-descuento > span {
    color: #2e7d52;
    font-weight: 500;
}


/* --------------------------------------------------------------------------
   Flecha del desplegable de complementos

   Gira segun el aria-expanded del boton, que es el atributo que el JS ya
   cambia al pulsar. Colgar el giro de ahi y no de una clase propia significa
   que el estado visible y el estado que lee un lector de pantalla no pueden
   discrepar: son el mismo dato.

   Se dibuja con bordes en vez de con un icono para no depender de que una
   fuente de iconos haya cargado.
   -------------------------------------------------------------------------- */
.car-carrito .car-linea-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.car-carrito .car-linea-toggle-flecha {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-135deg);
    transform-origin: 60% 60%;
    transition: transform .18s ease;
}

/* Plegado: la flecha apunta hacia abajo, o sea "hay mas debajo". */
.car-carrito .car-linea-toggle[aria-expanded="false"] .car-linea-toggle-flecha {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .car-carrito .car-linea-toggle-flecha { transition: none; }
}


/* --------------------------------------------------------------------------
   El aro azul del foco al pulsar con el raton

   El navegador dibuja ese aro al enfocar, y enfocar pasa tanto al tabular como
   al hacer clic. Con el raton sobra: la persona ya sabe donde pulso.

   NO se quita el foco, se acota a :focus-visible, que el navegador solo activa
   cuando el foco viene del teclado. Quitarlo del todo -que es el atajo- deja a
   quien navega con teclado sin saber donde esta, y en un carrito eso significa
   no poder comprar.

   El azul ademas no es de la marca: donde el foco SI se ve, va en marron.
   -------------------------------------------------------------------------- */
.car-carrito button:focus:not(:focus-visible),
.car-carrito a:focus:not(:focus-visible),
.car-carrito input:focus:not(:focus-visible),
.car-carrito select:focus:not(:focus-visible),
.car-carrito textarea:focus:not(:focus-visible),
.car-carrito label:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.car-carrito button:focus-visible,
.car-carrito a:focus-visible,
.car-carrito input:focus-visible,
.car-carrito select:focus-visible,
.car-carrito textarea:focus-visible {
    outline: 2px solid #8c6239;
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   El icono de la papelera del producto llenaba su boton

   Medido: 32x32 dentro de un boton de 34, o sea pegado a los cuatro bordes.
   El artboard le da 16x16 en un boton de 34, y 14x14 en el de 30 del
   complemento. La regla existia para el complemento pero no para el producto,
   asi que ese heredaba el tamano natural del SVG.
   -------------------------------------------------------------------------- */
.car-carrito .car-linea > .car-linea-quitar img,
.car-carrito .car-linea > .car-linea-quitar svg {
    width: 16px;
    height: 16px;
    display: block;
}

.car-carrito .car-linea-comp .car-linea-quitar img,
.car-carrito .car-linea-comp .car-linea-quitar svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* Y el de la papelera del cupon, que comparte clase con la de producto pero
   vive en una fila de 46px: se alinea con el boton VALIDAR de al lado. */
.car-carrito #carrito_cupon_limpiar img {
    width: 16px;
    height: 16px;
    display: block;
}


/* --------------------------------------------------------------------------
   La papelera del cupon ni se centraba ni se separaba

   Medido: la fila mide 44 y la papelera 34, pero su centro caia en 17 mientras
   el campo y VALIDAR estaban en 22. Y empezaba pegada al boton, sin ningun
   hueco, porque la fila no declara separacion entre sus hijos.

   El campo y el boton VAN pegados a proposito -son una sola pieza, el input
   pierde su borde derecho contra el boton-, asi que la separacion no puede ir
   en la fila: tiene que ir solo delante de la papelera, que es lo unico que no
   forma parte de esa pieza.
   -------------------------------------------------------------------------- */
.car-carrito .car-promo-fila {
    align-items: center;
}

.car-carrito .car-promo-fila #carrito_cupon_limpiar {
    margin-left: 10px;
    flex: 0 0 auto;
}


/* ==========================================================================
   SUBIDA DE LA FOTO DEL COMPLEMENTO

   Bloque disenado aparte -el artboard del carrito no lo dibuja- siguiendo la
   linea de la columna. Dos estados: sin foto, con la caja de arrastre y los
   requisitos al lado; y con foto, donde la caja desaparece y manda la propia
   imagen al tamano en que se puede juzgar antes de pagar.
   ========================================================================== */

/* El rotulo y la insignia comparten linea: rotulo a la izquierda, estado a la
   derecha. Los demas bloques usan un <span> suelto; aqui hace falta la fila. */
.car-carrito .car-receta-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.car-carrito .car-receta-titulo .car-rotulo {
    margin-bottom: 0;
}

/* La insignia "Obligatoria" se quito el 12/09/2026 a peticion de la clienta,
   asi que aqui ya no queda su regla ni la que la escondia al subir la foto.

   Solo queda "Lista", que se enciende con :has sobre dz-started, la clase que
   pone la propia Dropzone. Donde :has no funcione no se enciende, y lo unico
   que se pierde es el acuse en verde: la zona de subida sigue igual. */
.car-carrito .car-receta-lista {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #2e7d52;
}

.car-carrito .car-receta-lista svg {
    width: 13px;
    height: 13px;
}

.car-carrito .car-receta-titulo:has(~ .car-receta .dz-started) .car-receta-lista {
    display: inline-flex;
}

.car-carrito .car-receta {
    display: block;
}

.car-carrito .car-receta-nota {
    margin: 0 0 20px;
    max-width: 62ch;
    font-size: 14px;
    line-height: 1.5;
    color: var(--car-texto-2);
}

.car-carrito .car-receta-nota strong {
    font-weight: 500;
    color: var(--car-texto-1);
}

.car-carrito .car-receta-cuerpo {
    display: flex;
    align-items: stretch;
    gap: 20px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   SIN FOTO: la caja de arrastre mide lo que UNA foto

   Dropzone esta en maxFiles:1. Una caja a todo el ancho prometia que cabian
   varias, y dejaba la miniatura perdida en una esquina.
   -------------------------------------------------------------------------- */
.car-carrito .car-dropzone.dropzone,
.car-carrito #mydropzone1 {
    flex: 0 0 auto;
    width: 260px;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    border: 1.5px dashed #d9cdbe;
    border-radius: 0;
    background: var(--car-crema);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.car-carrito #mydropzone1:hover {
    border-color: var(--car-marron);
    background: #f6efe6;
}

.car-carrito .car-dropzone-mensaje {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    pointer-events: none;
}

.car-carrito .car-dropzone-icono {
    width: 30px;
    height: 30px;
    color: var(--car-marron);
}

.car-carrito .car-dropzone-titulo {
    font-size: 14px;
    font-weight: 500;
    color: var(--car-marron);
}

.car-carrito .car-dropzone-pista {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--car-texto-3);
}

/* EL "CHOOSE FILES" QUE SE VEIA AL CARGAR.

   El div .fallback lleva dentro un <input type="file"> suelto, y Dropzone solo
   lo borra del marcado DESPUES de arrancar. Entre que el navegador pinta el
   HTML y corre el JS -que va al final de la pagina y detras de todo el paquete
   agrupado- ese input se ve tal cual, con su boton gris del sistema y su "No
   file chosen", encima de la caja de arrastre.

   Se esconde de entrada y se vuelve a ensenar solo en el caso para el que
   existe: un navegador que no sabe arrastrar y soltar, donde el propio
   Dropzone marca la caja con dz-browser-not-supported y el input es el unico
   camino que le queda a la persona. */
.car-carrito #mydropzone1 .fallback {
    display: none;
}

.car-carrito #mydropzone1.dz-browser-not-supported .fallback {
    display: block;
}

/* Dropzone inyecta ademas su propio mensaje (.dz-default.dz-message, que sale
   de dictDefaultMessage), asi que quedaban dos apilados. Se esconde el suyo en
   vez de vaciar dictDefaultMessage, porque ese texto tambien se usa en los
   avisos de error de la libreria. */
.car-carrito #mydropzone1 .dz-message {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Requisitos

   Salen de la configuracion real de Dropzone (maxFiles, maxFilesize,
   acceptedFiles). Antes no estaban en ninguna parte y el cliente descubria el
   limite al ver fallar la subida.
   -------------------------------------------------------------------------- */
.car-carrito .car-receta-requisitos {
    flex: 1 1 260px;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 11px;
}

.car-carrito .car-receta-requisitos li {
    position: relative;
    padding-left: 25px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--car-texto-2);
}

/* El tick se dibuja con dos bordes girados, no con un icono: asi no depende de
   que una fuente de iconos haya cargado. El reset de index.css pone
   list-style:none en todos los li del sitio, o sea que una vineta nativa
   tampoco se veria. */
.car-carrito .car-receta-requisitos li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 10px;
    height: 5px;
    border-left: 1.6px solid var(--car-texto-3);
    border-bottom: 1.6px solid var(--car-texto-3);
    transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   CON FOTO: manda la imagen

   La caja de arrastre deja de tener sentido en cuanto hay una foto dentro: ya
   no hay nada que arrastrar. Se le quitan el borde, el fondo y el ancho fijo,
   y lo que ocupa la fila es la foto con sus datos al lado. Los requisitos
   tambien sobran: ya se cumplieron.
   -------------------------------------------------------------------------- */
.car-carrito #mydropzone1.dz-started {
    width: 100%;
    min-height: 0;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    /* Cada vista previa ocupa la fila entera (regla de mas abajo), asi que sin
       wrap la casilla de "Agregar otra foto" se aplastaria contra ella en vez
       de caer debajo. */
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: default;
}

.car-carrito #mydropzone1.dz-started:hover {
    background: none;
}

/* --------------------------------------------------------------------------
   LA CAJA DE ARRASTRE NO SE VA HASTA QUE EL CUPO ESTE LLENO

   Aqui estaba el fallo que reporto la clienta el 16/09/2026: «cuando subo la
   primera, luego no me aparece una opcion para subir la segunda foto».

   Esta regla escondia el mensaje en cuanto Dropzone ponia dz-started, o sea
   con la PRIMERA foto. A partir de ahi la caja seguia existiendo y seguia
   siendo dz-clickable -pulsar la fila abria el selector-, pero sin borde, sin
   fondo, sin texto y con cursor:default. Nadie puede adivinar eso.

   El limite de fotos es dinamico desde el 12/09/2026 (una por unidad de
   complemento que pida imagen), asi que la senal correcta no es "ya hay una
   foto" sino "ya no caben mas", que es exactamente lo que marca la propia
   libreria con dz-max-files-reached.
   -------------------------------------------------------------------------- */
.car-carrito #mydropzone1.dz-started.dz-max-files-reached .car-dropzone-mensaje {
    display: none;
}

/* Con fotos dentro pero sitio libre, el mensaje deja de ser el protagonista y
   pasa a ser una casilla del tamano de una miniatura, en la misma fila. */
.car-carrito #mydropzone1.dz-started:not(.dz-max-files-reached) .car-dropzone-mensaje {
    /* Dropzone cuelga las miniaturas DETRAS de este div, asi que sin order la
       casilla de anadir saldria antes que las fotos ya subidas. */
    order: 2;
    flex: 0 0 auto;
    width: 168px;
    min-height: 168px;
    box-sizing: border-box;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border: 1.5px dashed #d9cdbe;
    background: var(--car-crema);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.car-carrito #mydropzone1.dz-started:not(.dz-max-files-reached):hover .car-dropzone-mensaje {
    border-color: var(--car-marron);
    background: #f6efe6;
}

/* El puntero vuelve: la caja sigue siendo pulsable mientras quede cupo. */
.car-carrito #mydropzone1.dz-started:not(.dz-max-files-reached) {
    cursor: pointer;
}

/* El rotulo cambia de "Elige tu foto" a "Agregar otra foto" segun haya o no
   fotos ya puestas. Son dos <span> y se ensena uno u otro, en vez de
   reescribir el texto por JS, para que no dependa de que la libreria emita
   ningun evento. */
.car-carrito .car-dropzone-titulo--otra {
    display: none;
}

.car-carrito #mydropzone1.dz-started .car-dropzone-titulo--primera {
    display: none;
}

.car-carrito #mydropzone1.dz-started .car-dropzone-titulo--otra {
    display: block;
}

/* El aviso de "esa foto no entra". Nace con el atributo hidden y solo lo
   quita el JS, asi que no hay estado inicial que mantener en dos sitios. */
.car-carrito .car-receta-aviso {
    flex: 1 1 100%;
    margin: 0;
    padding: 10px 14px;
    border-left: 3px solid #c0392b;
    background: #fdf3f2;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--car-texto-1);
}

.car-carrito .car-receta-aviso[hidden] {
    display: none;
}

/* Los requisitos solo sobran cuando ya no cabe ninguna foto mas: mientras
   quede cupo siguen diciendo cuantas y de que tipo. */
.car-carrito .car-receta-cuerpo:has(.dz-max-files-reached) .car-receta-requisitos {
    display: none;
}


.car-carrito #mydropzone1 .dz-preview.car-foto {
    /* Ancho completo: dropzone.css deja la vista previa como una tarjeta
       estrecha y blanca -pensada para una rejilla de miniaturas- y con eso los
       datos no cabian al lado de la foto y caian debajo. Aqui solo hay una
       foto, asi que la vista previa ES la fila. */
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0;
    min-height: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* 168px: lo bastante grande para juzgar si la foto es la correcta, que es lo
   unico que la persona necesita mirar antes de pagar. */
.car-carrito #mydropzone1 .car-foto .dz-image {
    flex: 0 0 auto;
    display: block;
    width: 168px;
    height: 168px;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--car-filete);
    background: var(--car-crema);
}

.car-carrito #mydropzone1 .car-foto .dz-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.car-carrito #mydropzone1 .car-foto .dz-details {
    position: static;
    /* 200px de base y no 240: con la foto de 168 mas los 20 de separacion, una
       base mayor no cabe en la columna y los datos se van debajo de la foto. */
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    opacity: 1;
    background: none;
    text-align: left;
}

.car-carrito #mydropzone1 .car-foto .dz-filename {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--car-texto-1);
    overflow-wrap: break-word;
}

.car-carrito #mydropzone1 .car-foto .dz-size {
    font-size: 12.5px;
    color: var(--car-texto-3);
}

.car-carrito #mydropzone1 .car-foto .dz-filename span,
.car-carrito #mydropzone1 .car-foto .dz-size span,
.car-carrito #mydropzone1 .car-foto .dz-size strong {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* La barra de progreso de Dropzone viene colocada en absoluto, con fondo
   blanco y z-index 1000, pensada para ir encima de la miniatura de una
   rejilla. Aqui caia justo sobre el boton QUITAR y lo dejaba lavado.

   No se borra del marcado -la libreria le escribe el ancho durante la subida-
   sino que se lleva al pie de la foto, que es donde tiene sentido mirarla, y
   se esconde en cuanto la subida termina o cuando la foto ya venia de la
   sesion y no hay nada que subir. */
.car-carrito #mydropzone1 .car-foto .dz-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 168px;
    height: 4px;
    background: var(--car-filete);
    border-radius: 0;
    z-index: 2;
}

.car-carrito #mydropzone1 .car-foto .dz-upload {
    display: block;
    height: 100%;
    background: var(--car-marron);
}

.car-carrito #mydropzone1 .car-foto.dz-complete .dz-progress,
.car-carrito #mydropzone1 .car-foto:not(.dz-processing) .dz-progress {
    display: none;
}

/* Lo mismo con el hueco de los errores: solo ocupa sitio cuando hay algo que
   decir. */
.car-carrito #mydropzone1 .car-foto .dz-error-message:empty,
.car-carrito #mydropzone1 .car-foto:not(.dz-error) .dz-error-message {
    display: none;
}

.car-carrito #mydropzone1 .car-foto.dz-error .dz-error-message {
    position: static;
    display: block;
    width: auto;
    padding: 10px 12px;
    background: #fbeee9;
    border: 1px solid #e9c9be;
    color: #c0522f;
    font-size: 12.5px;
    line-height: 1.5;
}

.car-carrito #mydropzone1 .car-foto-acciones {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.car-carrito #mydropzone1 .car-foto-boton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    background: var(--car-blanco);
    border: 1px solid var(--car-filete);
    color: var(--car-texto-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
}

.car-carrito #mydropzone1 .car-foto-boton:hover {
    border-color: var(--car-marron);
    color: var(--car-marron);
}

.car-carrito #mydropzone1 .car-foto-boton svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 575.98px) {
    .car-carrito .car-dropzone.dropzone,
    .car-carrito #mydropzone1 { width: 100%; }
}


/* Las <option> se quedaban en Brandon: la familia se hereda desde el <select>
   en casi todos los navegadores, pero no en todos, y en el desplegable abierto
   se notaba el cambio de letra. */
.car-carrito option {
    font-family: inherit;
}


/* EL RELOJ DEL DISENO, SOLO EN EL CAMPO DE HORA.

   El artboard dibuja un reloj a la derecha del horario, igual que el
   calendario del campo de fecha que va al lado. El bloque documentaba que no
   se podia poner porque chocaria con la flecha nativa del navegador, pero esa
   flecha ya no existe: appearance:none la quita, y lo que se veia era el
   chevron que dibuja la hoja a mano. O sea que el sitio esta libre.

   Va DESPUES y con su propio selector: el chevron se declara para .car-select
   y para este select a la vez, y sustituirlo alli le habria puesto el reloj
   tambien al desplegable de distrito. */
.car-carrito .car-picker-hora select {
    background-image: url("data:image/svg+xml,<svg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238c6239'%20stroke-width='1.6'%20stroke-linecap='round'><circle%20cx='12'%20cy='12'%20r='8.5'/><path%20d='M12%207.5V12l3.2%202'/></svg>");
    background-position: right 14px center;
    background-size: 17px 17px;
}


/* EL BOTON PAGAR SE MONTABA ENCIMA DE LA NOTA DE ABAJO.

   .car-resumen es una columna flexible, pegajosa y con max-height: no puede
   pasar del alto de la ventana. Cuando el contenido no cabe -y con la lista de
   campos que faltan no cabe casi nunca-, el reparto por defecto de flex
   encoge a los hijos: PAGAR, que mide 56, se quedaba en 15 y su texto salia
   por debajo, justo encima de "Precios en soles con IGV...". Los dos textos se
   leian superpuestos.

   Encoger un boton no arregla nada: el contenido sigue sin caber. Se prohibe
   el encogido y el sobrante se va al scroll del propio resumen, que ya lo
   tiene declarado con overflow:auto. */
.car-carrito .car-resumen > * {
    flex-shrink: 0;
}

/* LA IMAGEN ROTA SOBRE EL CAMPO DE CORREO.

   Es el indicador de "cargando" del formulario, y su src apunta a
   farmaciauniversal.com: un GIF colgado del sitio de OTRO cliente. Ademas de
   verse roto -ese servidor ya no lo sirve-, es una peticion a un tercero en
   cada carga de la pagina.

   Se esconde: es un indicador que solo tiene sentido mientras se envia algo, y
   el JS que lo ensenaba usaba .show(), que le pone display:inline-block en
   linea y gana a esta regla. O sea que si vuelve a hacer falta, sigue
   funcionando. La imagen habra que traerla a assets/ antes de que eso pase. */
/* El indicador de carga del campo de correo, dibujado en CSS.

   Antes era un <img> traido de farmaciauniversal.com que ya no existe: se veia
   roto y disparaba catorce errores de consola por carga. Ahora es un aro que
   gira, sin ninguna peticion de red.

   El JS lo enciende y lo apaga con visibility, asi que aqui NO se usa display:
   con display:none el elemento no ocuparia sitio y el campo daria un salto
   cada vez que se consulta el correo. */
.car-carrito .loading-form {
    visibility: hidden;
    position: absolute;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid #e6ddd2;
    border-top-color: #8c6239;
    border-radius: 50%;
    animation: car-girar .7s linear infinite;
}

@keyframes car-girar {
    to { transform: rotate(360deg); }
}

/* Quien no quiere animaciones no las ve: el aro se queda quieto pero sigue
   siendo visible, que es lo que importa. */
@media (prefers-reduced-motion: reduce) {
    .car-carrito .loading-form {
        animation: none;
    }
}


/* LOS INTERROGANTES DE AYUDA FLOTABAN SOBRE EL CAMPO.

   .car-ayuda declara right:12px pero no declara position, asi que ese right no
   lo lee nadie: el icono se quedaba estatico y caia arriba a la izquierda del
   campo, encima del hueco del rotulo. Se veia en Telefono, Documento y
   Direccion como un circulo suelto sin nada a lo que pertenecer.

   Se coloca dentro del campo, a la derecha y centrado. Solo cuando cuelga
   directamente de .car-campo: el de "Rango aproximado" va detras del texto, en
   linea, y ahi es correcto que siga en el flujo. */
.car-carrito .car-campo > .car-ayuda {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* Y el campo deja hueco a su derecha para que un texto largo no le pase por
   debajo, igual que se hace con la flecha de los desplegables. */
.car-carrito .car-campo:has(> .car-ayuda) .car-input {
    padding-right: 38px;
}


/* --------------------------------------------------------------------------
   La caja de sugerencias pesaba mas que el campo al que ayuda

   El artboard la dibuja como una nota al margen: rotulo pequeno y frases de
   13px. Aqui el desplegable de ocasion heredaba el tamano de los campos del
   formulario -50px de alto y 15px de letra- y el aviso de "elige una ocasion"
   salia a 16px y en tres lineas, asi que la ayuda ocupaba mas alto que la
   dedicatoria.

   El desplegable no esta en el artboard, que ya llega con las frases puestas,
   pero aqui hace falta: las frases se piden por ocasion. Se le da el tamano de
   la nota, no el de un campo del formulario.
   -------------------------------------------------------------------------- */
.car-carrito .car-sugerencias {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: flex-start;
}

.car-carrito .car-sugerencias .car-rotulo {
    margin-bottom: 0;
}

.car-carrito .car-sugerencias-ocasion.car-select {
    height: 40px;
    padding: 0 30px 0 10px;
    font-size: 13px;
    background-position: right 10px center;
}

.car-carrito .car-sugerencias-vacio {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--car-texto-3);
}


/* ==========================================================================
   EL CALENDARIO

   No se veia. index.css trae ".datepicker > div { display: none }" y la hoja
   propia de bootstrap-datepicker no esta cargada en el sitio, asi que las
   cinco vistas del calendario -dias, meses, anios...- se quedaban ocultas: al
   pulsar el campo se abria una caja de 2px de alto, una raya, con los 42 dias
   dentro sin poder verse.

   Se ensena la vista de dias sin !important a proposito: cuando la libreria
   cambia de vista lo hace con un display en linea, y el estilo en linea le
   gana a esta regla. Asi el cambio de vista sigue funcionando.

   El aspecto es el del artboard: cabecera con el mes y las dos flechas, la
   rejilla de siete columnas y las celdas de 38.
   ========================================================================== */
.datepicker.datepicker-dropdown {
    /* Las variables se redeclaran aqui, igual que en .car-modal: la libreria
       cuelga el calendario del <body>, o sea FUERA de .car-carrito, asi que no
       hereda ninguna. Sin esto, background: var(--car-blanco) no resuelve, la
       declaracion se descarta y el calendario sale TRANSPARENTE, con el
       formulario leyendose por debajo de los dias. */
    --car-marron: #8c6239;
    --car-crema: #faf6f1;
    --car-filete: #e6ddd2;
    --car-texto: #4c4c4c;
    --car-texto-3: #a8957f;
    --car-blanco: #ffffff;

    width: 322px;
    padding: 18px;
    border: 1px solid var(--car-marron);
    border-radius: 0;
    background: var(--car-blanco);
    box-shadow: 0 10px 30px rgba(76, 76, 76, .12);
    /* Por encima del resto del formulario y por debajo de la barra de movil. */
    z-index: 60;
    font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

.datepicker.datepicker-dropdown > div.datepicker-days {
    display: block;
}

.datepicker.datepicker-dropdown table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    margin: 0;
}

/* Cabecera: el mes al centro y las flechas a los lados, como dos botones
   pequenos de la marca. */
.datepicker.datepicker-dropdown thead th.datepicker-switch {
    height: 32px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--car-marron);
    cursor: pointer;
}

.datepicker.datepicker-dropdown thead th.prev,
.datepicker.datepicker-dropdown thead th.next {
    width: 32px;
    height: 32px;
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    color: var(--car-marron);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.datepicker.datepicker-dropdown thead th.prev:hover,
.datepicker.datepicker-dropdown thead th.next:hover,
.datepicker.datepicker-dropdown thead th.datepicker-switch:hover {
    background: #f2e9dd;
}

.datepicker.datepicker-dropdown thead th.dow {
    height: 24px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--car-texto-3);
}

/* --------------------------------------------------------------------------
   LOS DIAS, MEDIDOS CONTRA EL ARTBOARD

   La caja de cada dia -fondo blanco y filete #e6ddd2- la pone ahora la hoja
   importada, que la saca del diseno. Aqui habia un 'border: 1px solid
   transparent' escrito a mano que la tapaba: carrito.css se carga despues y
   ganaba. Por eso los dias salian como numeros sueltos, sin cuadro.

   Queda solo lo que la tabla necesita y el diseno no puede dar, porque alli
   cada dia es un <button> y aqui es un <td>.
   -------------------------------------------------------------------------- */
.datepicker.datepicker-dropdown td.day {
    height: 38px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.datepicker.datepicker-dropdown td.day:hover {
    background-color: #faf6f1;
    border-color: #8c6239;
}

/* LOS DIAS DE OTRO MES SE VACIAN, no se apagan.

   El diseno deja esos huecos en blanco: septiembre empieza en martes y las dos
   primeras casillas estan vacias, sin caja. La opcion showOtherMonths de la
   libreria no surte efecto en la version que trae el sitio -se probo-, asi que
   se vacian aqui: sin caja, sin numero y sin cursor. */
.datepicker.datepicker-dropdown td.day.old,
.datepicker.datepicker-dropdown td.day.new {
    background-color: transparent;
    border-color: transparent;
    color: transparent;
    cursor: default;
}

/* Un dia bloqueado SI se ve -hace falta para no perder la cuenta de la semana-
   pero apagado. Aqui llevaba ademas un tachado que el diseno no tiene y que
   ensuciaba la rejilla entera los domingos. */
.datepicker.datepicker-dropdown td.day.disabled,
.datepicker.datepicker-dropdown td.day.disabled:hover {
    background-color: transparent;
    border-color: transparent;
    color: #d8cec0;
    cursor: default;
}

/* HOY: filete naranja y fondo crema, como en el artboard. Antes se pintaba
   igual que el dia elegido -marron macizo- y no habia forma de distinguirlos. */
.datepicker.datepicker-dropdown td.day.today,
.datepicker.datepicker-dropdown td.day.today:hover {
    background-color: #faf6f1;
    border-color: #ffb466;
    font-weight: 600;
    color: #4c4c4c;
}

/* El dia ELEGIDO si va macizo: es el unico de la rejilla y tiene que cantar. */
.datepicker.datepicker-dropdown td.day.active,
.datepicker.datepicker-dropdown td.day.active:hover {
    background-color: #8c6239;
    border-color: #8c6239;
    color: #ffffff;
    font-weight: 600;
}

/* Las otras vistas -meses, anios- se ensenan solas cuando la libreria pone su
   display en linea; aqui solo se les da el mismo aspecto que a los dias. */
.datepicker.datepicker-dropdown span.month,
.datepicker.datepicker-dropdown span.year,
.datepicker.datepicker-dropdown span.decade {
    height: 44px;
    line-height: 44px;
    border-radius: 0;
    font-size: 13px;
    color: var(--car-texto);
}

.datepicker.datepicker-dropdown span.month:hover,
.datepicker.datepicker-dropdown span.year:hover {
    background: var(--car-crema);
}

.datepicker.datepicker-dropdown span.month.active,
.datepicker.datepicker-dropdown span.year.active {
    background: var(--car-marron);
    color: var(--car-blanco);
}

/* bootstrap-theme pinta la flechita de la esquina del dropdown; el artboard no
   la tiene y ademas sale descolocada respecto al campo. */
.datepicker.datepicker-dropdown:before,
.datepicker.datepicker-dropdown:after {
    display: none;
}


/* EL FONDO AZUL DE LOS CAMPOS RELLENADOS.

   No es del sitio: es el resalte de autocompletado de Chrome, que pinta el
   campo de azul palido y ademas cambia el color del texto. Rompe la paleta
   justo en los campos que el cliente acaba de escribir.

   No se puede quitar con background-color -el navegador lo aplica en una capa
   propia-, pero si tapar con una sombra interior del ancho del campo, que es
   el truco que usa todo el mundo desde que existe la regla. El color del texto
   se recupera con -webkit-text-fill-color, porque 'color' tampoco le llega. */
.car-carrito input:-webkit-autofill,
.car-carrito input:-webkit-autofill:hover,
.car-carrito input:-webkit-autofill:focus,
.car-carrito textarea:-webkit-autofill,
.car-carrito select:-webkit-autofill {
    box-shadow: 0 0 0 100px var(--car-blanco) inset;
    -webkit-text-fill-color: var(--car-texto);
    caret-color: var(--car-texto);
}


/* CORRECCION OPTICA DEL NUMERO, HECHA DONDE TOCA.

   Aqui habia un transform: translateY(1px) sobre .car-paso-num para centrar la
   cifra dentro de su cuadrado. Estaba mal puesto: .car-paso-num ES el cuadrado,
   asi que el transform bajaba la caja entera y descuadraba el cuadrado respecto
   al filete -medido: filete en 225, cuadrado en 226-.

   El pixel se le da al GLIFO, con un padding que la caja absorbe porque tiene
   el alto fijo en 28. */
.car-carrito .car-paso-num {
    padding-top: 2px;
}

/* Y EL TITULO SUBIA 4px.

   .car-paso-tit es un <h2>, y el margin-bottom: 8px que arrastra de la hoja
   base entra en el centrado de flex: el navegador centra la caja CON su margen,
   asi que el texto queda 4px por encima de la linea. Medido: filete en 225,
   titulo en 221. */
.car-carrito .car-paso-tit {
    margin: 0;
}


/* El pie del calendario: los dos atajos y la nota, como en el artboard.
   Va separado de la rejilla por un filete y con el mismo aire (18px) que el
   resto de la caja. */
/* EL HUECO ANTES DEL PIE ESTABA SUMADO DOS VECES.

   .datepicker-dropdown es flex en columna con gap:14 -valor del diseno-, asi
   que la separacion entre la tabla y el pie ya la pone el contenedor. El
   margin-top:14 que llevaba el pie se sumaba encima: medido, 34px de hueco
   donde el artboard tiene 26.

   Los 6 que sobran del final de la tabla son el border-spacing de la ultima
   fila, que el margen negativo de arriba solo recorta a los lados. */
.datepicker.datepicker-dropdown .car-cal-pie {
    margin-top: 0;
    /* !important, y no es pereza: index.css trae ".datepicker > div { display:
       none }", pensado para las cinco vistas de la libreria, y el pie es
       tambien un div hijo directo. Aqui la regla ajena y la propia acaban
       empatando en la practica porque la libreria reordena el nodo, asi que se
       zanja en vez de seguir subiendo especificidad. */
    display: flex !important;
    padding-top: 12px;
    border-top: 1px solid var(--car-filete);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.datepicker.datepicker-dropdown .car-cal-atajos {
    display: flex;
    gap: 8px;
}

.datepicker.datepicker-dropdown .car-cal-atajo {
    flex: 1;
    height: 38px;
    background: var(--car-crema);
    border: 1px solid var(--car-filete);
    color: var(--car-marron);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

.datepicker.datepicker-dropdown .car-cal-atajo:hover:not(:disabled) {
    background: #f2e9dd;
    border-color: var(--car-marron);
}

/* Un atajo apagado es un dia bloqueado: se deja a la vista para que se entienda
   que la opcion existe y hoy no se puede, en vez de desaparecer sin explicar. */
.datepicker.datepicker-dropdown .car-cal-atajo:disabled {
    color: #cbbfae;
    border-color: var(--car-filete);
    background: var(--car-blanco);
    cursor: default;
}

.datepicker.datepicker-dropdown .car-cal-nota {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--car-texto-3);
}


/* ==========================================================================
   EL HORARIO

   El aspecto YA NO SE ESCRIBE AQUI: viene de assets/css/importado-carrito.css,
   generado a partir del artboard. Lo que queda en este bloque es solo lo que
   el diseno no puede dar, porque alli no hay ni <select> ni datos reales:

     - esconder el select nativo, que sigue siendo el campo que vale,
     - el ancla del panel,
     - el estado "elegida" y el aviso de "sin fecha", que en el artboard no
       existen como estados.
   ========================================================================== */

/* El <select> nativo abre la lista del sistema operativo: fondo oscuro, fila
   en azul, tipografia del sistema. El navegador la dibuja FUERA de la pagina y
   no hay CSS que la alcance. Por eso se esconde y encima va el panel del
   diseno; el select sigue ahi y sigue siendo el que se envia. */
.car-carrito .car-picker-hora select {
    display: none;
}

.car-carrito .car-hora {
    position: relative;
}

.car-carrito .car-hora-campo {
    width: 100%;
    height: 52px;
    padding: 0 46px 0 16px;
    background-color: #ffffff;
    border: 1px solid #e6ddd2;
    color: #4c4c4c;
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    display: flex;
    align-items: center;
    cursor: pointer;
    /* El reloj va en el fondo y no como <svg> aparte: un elemento encima del
       boton se come los clics del borde derecho. */
    background-image: url("data:image/svg+xml,<svg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238c6239'%20stroke-width='1.6'%20stroke-linecap='round'><circle%20cx='12'%20cy='12'%20r='8.5'/><path%20d='M12%207.5V12l3.2%202'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 19px 19px;
}

.car-carrito .car-hora-campo.is-vacio {
    color: #a8957f;
}

.car-carrito .car-hora-campo.is-abierto,
.car-carrito .car-hora-campo:hover {
    border-color: #8c6239;
}

/* Los botones salian con el gris de fabrica del navegador por debajo del
   blanco del diseno: un <button> trae appearance:auto, y con eso el motor
   pinta su propio fondo y su propio borde antes que cualquier color. El
   artboard no lo declara porque alli tambien son botones pero dentro de su
   propio reset. */
.car-carrito .car-hora-franja,
.car-carrito .car-hora-campo {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* La franja elegida. En el artboard este estado se pinta con otros valores en
   linea, que el importador no puede recoger porque solo captura el estado que
   estaba a la vista; se copian los mismos colores. */
.car-carrito .car-hora-franja:hover,
.car-carrito .car-hora-franja.is-activa {
    background-color: #faf6f1;
    border-color: #8c6239;
}

.car-carrito .car-hora-franja.is-activa .car-hora-franja-txt {
    color: #8c6239;
}

/* Sin fecha elegida el servidor no manda franjas: se dice, en vez de abrir un
   panel vacio que parece roto. */
.car-carrito .car-hora-vacio {
    font-size: 13px;
    line-height: 1.45;
    color: #a8957f;
}

/* Rotulo que se conserva para los lectores de pantalla y no se ve. El artboard
   no dibuja rotulo encima de los campos de fecha y hora -el propio texto del
   campo ya dice lo que es-, pero quitarlo del marcado dejaria esos dos campos
   sin nombre para quien navega a ciegas. */
.car-carrito .car-solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* El aviso de entrega, con la tipografia que el artboard le da a esta linea:
   15px, semi, texto normal y centrada. Se deja SIN el icono de reloj, que el
   artboard tampoco tiene.

   El texto no se toca: es dinamico -cambia segun si todavia se puede entregar
   hoy- y sustituirlo por la frase fija del artboard seria prometer un horario
   que el sistema no cumple. */
.car-carrito .aviso-entrega {
    display: block;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--car-texto);
    margin: 0;
}

.car-carrito .aviso-entrega i {
    display: none;
}

/* Los dos campos de cuando: misma separacion que el artboard. */
.car-carrito .car-pickers {
    gap: 14px;
}


/* El desplegable de locacion y el campo que lo acompana no se alineaban: el de
   la derecha lleva rotulo encima -"Nro. de departamento", "Hospital / clinica"-
   y el desplegable no, asi que cada celda empezaba a una altura distinta y los
   dos controles quedaban a distinto nivel.

   Se alinean por ABAJO, que es donde estan los controles. Alinear por arriba
   obligaria a inventarse un rotulo para el desplegable, y el diseno no lo
   lleva: su texto ya dice "Seleccionar locacion". */
.car-carrito .car-campos {
    align-items: end;
}


/* El calendario dejaba un hueco vacio entre la ultima semana y los atajos.

   bootstrap-datepicker pinta SIEMPRE seis filas, tenga el mes cuatro semanas o
   cinco, para que la caja no cambie de alto al pasar de mes. Con los dias del
   mes de al lado ocultos, esa sexta fila se queda en blanco y se ve como un
   hueco. Se esconde cuando no tiene ningun dia del mes en curso.

   Se usa :not(:has(...)) y no una clase puesta por JS porque la libreria
   repinta la tabla entera en cada cambio de mes: cualquier clase que le
   pusieramos duraria hasta el primer clic en la flecha. */
.datepicker.datepicker-dropdown tbody tr:not(:has(td.day:not(.old):not(.new))) {
    display: none;
}


/* La etiqueta de la derecha de cada franja YA NO SE ESCRIBE AQUI: sus valores
   los pone la hoja importada, que los saca del artboard. Aqui queda solo lo
   que el diseno no puede dar: el margin-left:auto que la empuja contra el
   borde -en el artboard es un valor resuelto, y el importador descarta los
   margenes con decimales por ser medidas del navegador y no del diseno- y el
   nowrap, que evita que "Disponible" parta en dos en un movil estrecho. */
.car-carrito .car-hora-franja-tag {
    margin-left: auto;
    white-space: nowrap;
}

/* El panel mide 322 y el campo 381: en el diseno es MAS ESTRECHO que el campo,
   a proposito. Aqui lo ensanche pensando que estaba mal y era al reves; medido
   contra el artboard, 322 es el valor bueno y lo pone la hoja importada.

   Se deja esta nota en vez de la regla para que a nadie le vuelva a parecer un
   fallo: si el panel se ve mas corto que el campo, es el diseno. */


/* --------------------------------------------------------------------------
   MEDIDO CONTRA EL ARTBOARD: la tabla no reparte igual que la rejilla

   El calendario del diseno es un grid de siete columnas de 38 con 3 de hueco:
   38*7 + 3*6 = 284, que es justo el ancho util de la caja (322 menos 18 de
   relleno a cada lado y 1 de filete). Una <table> no hace eso: reparte el
   ancho disponible entre las celdas, asi que cada dia salia de 42 y las
   flechas de 44 en vez de 32.

   Se fijan los anchos y se reproduce el hueco con border-spacing. El margen
   negativo compensa que border-spacing tambien separa por FUERA, cosa que el
   gap de una rejilla no hace: sin el, la tabla mide 290 y no 284.
   -------------------------------------------------------------------------- */
.datepicker.datepicker-dropdown {
    /* El relleno de 18 que trae el diseno no llegaba: entre bootstrap,
       bootstrap-theme, main.min.css e index.css hay CINCO reglas que ponen
       padding a .dropdown-menu y a .datepicker, y alguna gana. Medido: la caja
       salia con 0 y la tabla pegada al filete. Se zanja aqui en vez de seguir
       subiendo especificidad contra cuatro hojas ajenas. */
    padding: 18px !important;
}

.datepicker.datepicker-dropdown table {
    /* 290 y no 284: border-spacing tambien separa por FUERA -cosa que el gap de
       una rejilla no hace-, asi que a lo util hay que sumarle los dos huecos de
       los extremos. El margen negativo los recorta y la tabla acaba midiendo
       los 284 del diseno, con las celdas a 38 exactos. */
    width: 290px;
    border-collapse: separate;
    border-spacing: 3px;
    /* Arriba y a los lados se recortan los 3 de border-spacing que sobran por
       fuera; ABAJO no. Se probo recortarlos tambien y el hueco hasta el filete
       del pie se quedaba en 20 cuando el artboard tiene 26: esos 3 de mas son
       justo parte de esa separacion. */
    margin: -3px -3px 0;
}

.datepicker.datepicker-dropdown td.day,
.datepicker.datepicker-dropdown th.dow {
    width: 38px;
}

/* Las flechas salian de 38 y no de 32: van en la misma columna que los dias,
   asi que heredan su ancho. max-width las obliga; el sobrante se lo queda el
   titulo del mes, que en el diseno tambien es el que se estira. */
.datepicker.datepicker-dropdown thead th.prev,
.datepicker.datepicker-dropdown thead th.next {
    width: 32px;
    max-width: 32px;
    min-width: 32px;
}

/* El titulo del mes se pintaba con un fondo amarillento que no es del diseno:
   sale de .datepicker-switch de index.css. En el artboard no tiene fondo. */
.datepicker.datepicker-dropdown thead th.datepicker-switch {
    background-color: transparent;
}


/* LA CABECERA DEL CALENDARIO, FUERA DEL REPARTO DE COLUMNAS.

   Las flechas salian de 38 y no de 32 porque comparten columna con los dias, y
   una tabla reparte el ancho por columna. En el artboard esa fila NO esta
   dentro de la rejilla: es una fila aparte.

   Se le da display:flex SOLO a la primera fila del thead. La segunda -DO LU MA
   ...- se queda como fila de tabla, que es lo que la mantiene alineada con los
   dias; ponerle flex a las dos fue lo que desarmo el calendario antes. */
.datepicker.datepicker-dropdown thead tr:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.datepicker.datepicker-dropdown thead tr:first-child th.datepicker-switch {
    flex: 1;
}

.datepicker.datepicker-dropdown thead tr:first-child th.prev,
.datepicker.datepicker-dropdown thead tr:first-child th.next {
    flex: 0 0 32px;
    width: 32px;
    max-width: 32px;
}


/* --------------------------------------------------------------------------
   TRES COSAS QUE SOLO SE VEN MIDIENDO

   1. LAS FLECHAS NO SON TEXTO. bootstrap-datepicker las pinta como
      <i class="icon-arrow-left">, un icono de la fuente de iconos del sitio,
      que trae SU PROPIO color: por eso se veian casi blancas aunque el <th>
      estuviera en marron. Se esconde el icono y se dibuja el caracter del
      diseno, que ademas no depende de que esa fuente haya cargado.

   2. LOS DIAS DEL MES DE AL LADO llegan con class="old disabled disabled-date
      day": son 'old' Y 'disabled' a la vez. La regla de .disabled va antes y
      pesa lo mismo, asi que les ganaba y los pintaba en gris en vez de
      vaciarlos. Por eso siguen apareciendo el 30 y el 31 de agosto. Esta va
      despues y zanja el empate.

   3. LOS <th> DE LA CABECERA siguen siendo table-cell aunque su fila sea flex:
      el navegador no los convierte en hijos flexibles solos. Sin display:block
      el ancho lo sigue mandando la columna de la tabla y las flechas se quedan
      en 38 en vez de 32.
   -------------------------------------------------------------------------- */

.datepicker.datepicker-dropdown thead th.prev i,
.datepicker.datepicker-dropdown thead th.next i {
    display: none;
}

.datepicker.datepicker-dropdown thead th.prev::before {
    content: "\2039";
}

.datepicker.datepicker-dropdown thead th.next::before {
    content: "\203A";
}

.datepicker.datepicker-dropdown thead th.prev::before,
.datepicker.datepicker-dropdown thead th.next::before {
    color: #8c6239;
    font-size: 15px;
    line-height: 1;
}

.datepicker.datepicker-dropdown thead tr:first-child th {
    display: block;
    text-align: center;
}

.datepicker.datepicker-dropdown thead tr:first-child th.prev,
.datepicker.datepicker-dropdown thead tr:first-child th.next {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
}

/* Va DESPUES de .disabled a proposito: ver el punto 2 de arriba. */
.datepicker.datepicker-dropdown td.day.old,
.datepicker.datepicker-dropdown td.day.new,
.datepicker.datepicker-dropdown td.day.old.disabled,
.datepicker.datepicker-dropdown td.day.new.disabled {
    background-color: transparent;
    border-color: transparent;
    color: transparent;
    cursor: default;
}


/* LOS DOS CAMPOS DE "CUANDO" SE COMPORTAN IGUAL AL PASAR Y AL ENFOCAR.

   El de fecha es un <input> y el de hora un <button>, y eso los hacia
   comportarse distinto sin que nadie lo hubiera decidido:

     - index.css trae ".formulario input:focus { border-bottom: 1px solid
       #ffb466 }", asi que al enfocar la fecha aparecia una linea NARANJA solo
       en el borde de abajo. El naranja es el color de acento de la marca, no el
       del foco, y ademas dejaba el campo con tres lados de un color y uno de
       otro.
     - El de hora, al no ser input, no recibia nada de eso: se ponia el borde
       entero en marron.

   Se unifican: borde COMPLETO en marron para los dos, en hover y en foco, que
   es lo que hace el resto de campos de la pantalla. */
.car-carrito .car-picker-campo:hover,
.car-carrito .car-picker-campo:focus,
.car-carrito .car-picker-campo:active:focus,
.car-carrito .car-hora-campo:hover,
.car-carrito .car-hora-campo.is-abierto {
    border: 1px solid #8c6239;
}


/* Dentro de .car-picker el calendario se coloca solo, pero hay que decirle que
   arranque bajo el campo -el contenedor tiene el rotulo oculto y el campo- y
   por encima de lo que venga despues. */
.car-carrito .car-picker .datepicker.datepicker-dropdown {
    /* 58 desde el borde del contenedor, que es el valor del artboard: el campo
       mide 52 y el diseno deja 6 de aire. Con 'top: 100%' caia 40px mas abajo,
       porque el contenedor incluye tambien la linea de la fecha en texto que
       aparece al elegir dia. */
    top: 58px;
    left: 0;
    z-index: 60;
}


/* --------------------------------------------------------------------------
   EL RESUMEN SE PEGABA DEBAJO DE LA CABECERA

   El artboard no tiene cabecera fija, asi que de alli viene un 'top: 0' que
   aqui deja la primera fila del resumen -"Productos (1)"- tapada por la barra
   del sitio. Medida: 89px de alto, position:fixed, z-index 100.

   Se declara ese alto como variable en vez de repetir el numero: lo necesitan
   el punto de pegado Y el alto maximo, y si la cabecera cambia se toca en un
   solo sitio.
   -------------------------------------------------------------------------- */
.car-carrito {
    --car-cabecera-alto: 89px;
}

@media (min-width: 992px) {

    .car-carrito .car-resumen {
        top: calc(var(--car-cabecera-alto) + 16px);
        /* Y el alto maximo descuenta lo mismo: con 100vh el resumen sobresalia
           por abajo justo lo que mide la cabecera, y la nota de "Precios en
           soles" se quedaba fuera de la ventana. */
        max-height: calc(100vh - var(--car-cabecera-alto) - 32px);
    }
}


/* --------------------------------------------------------------------------
   EL BOTON DE PAGAR NO PUEDE QUEDAR DETRAS DE UN SCROLL

   Con el resumen pegado y limitado al alto de la ventana, el conjunto no cabe
   cuando el formulario esta vacio: la lista de campos que faltan son once
   lineas. El aside tenia overflow:auto, asi que PAGAR seguia estando -medido:
   caja 722, contenido 964- pero solo se llegaba a el desplazando por dentro de
   una caja que no parece desplazable. En un checkout eso no vale.

   Lo que crece es la LISTA, no el resto. Asi que hace scroll ella sola y el
   total, la caja de entrega, los terminos y PAGAR se quedan siempre a la vista.

   El min-height:0 es imprescindible: sin el, un hijo flexible no baja de su
   contenido y la lista no se encoge, con lo que el scroll no aparece nunca.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

    /* Se recorta al alto disponible; lo que sobra lo cede la lista, no el
       boton. Con overflow visible el contenido salia por debajo del borde de
       la ventana y PAGAR quedaba fuera igual, solo que sin scroll. */
    .car-carrito .car-resumen {
        overflow: hidden;
    }

    /* LAS PIEZAS QUE CEDEN.

       Los hijos del resumen llevan flex-shrink: 0 -se puso para que PAGAR
       dejara de aplastarse hasta 15px de alto-, y ese mismo 0 impedia que la
       lista se encogiera: medido, la lista ocupaba sus 318px enteros y los 242
       que sobraban se los comia el final del resumen, con PAGAR fuera de la
       ventana.

       12/09/2026: la clienta volvio a reportarlo -«el boton se sigue
       escondiendo y al parecer es por los datos que se van llenando arriba»-, y
       tenia razon en el diagnostico. Arreglar solo la lista no bastaba porque
       la lista DESAPARECE cuando el formulario esta completo, que es justo
       cuando aparecen las otras dos que crecen:

         - `car-resumen-filas`, una fila por producto y por complemento
         - `car-resumen-entrega`, con la fecha y la direccion en varias lineas

       Medido con la ventana a 820px (viewport 643): el resumen pedia 600px
       contra un maximo de 522, o sea 78px recortados por el `overflow: hidden`
       de arriba, y dentro de esos 78 estaba PAGAR. Ningun hijo podia ceder.

       Ceden las tres que crecen con los datos. Lo que va DESPUES -los terminos,
       PAGAR y la nota- se queda entero siempre: en un checkout el boton de
       pagar no puede quedar recortado nunca. */
    .car-carrito .car-resumen-falta,
    .car-carrito .car-resumen-filas,
    .car-carrito .car-resumen-entrega {
        flex-shrink: 1;
        min-height: 0;
        overflow-y: auto;
    }
}


/* --------------------------------------------------------------------------
   EN MOVIL EL PANEL DE HORAS SE SALIA POR LA DERECHA

   Mide 322 -valor del diseno- y cuelga del borde IZQUIERDO de su campo. En
   escritorio da igual, pero en movil los dos campos de "cuando" van uno al
   lado del otro: el de hora empieza en x=199 y el panel llegaba a 521 con una
   ventana de 390. Medido.

   Se ancla por la derecha y se le pone un tope de ancho: asi cae hacia dentro
   de la pantalla en vez de hacia fuera, y nunca puede pasarse del viewport
   aunque el campo este pegado al borde.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .car-carrito .car-hora-panel {
        left: auto;
        right: 0;
        width: auto;
        min-width: 260px;
        max-width: calc(100vw - 32px);
    }
}


/* ==========================================================================
   LA LINEA DE PRODUCTO EN MOVIL

   Estaba apilada: la foto sola y grande arriba, el boton de complementos a
   todo el ancho, la cantidad estirada de lado a lado, los precios sueltos y
   la papelera perdida al final. Ocupaba tres pantallas por producto.

   El artboard movil la resuelve en filas apretadas:

       [foto] [nombre]              [papelera]
              [codigo]
              [tachado  actual]
       [cantidad]          [TOTAL LINEA / cifra]
       [Complementos (n) ................... ]

   Se hace con una rejilla de tres columnas y areas con nombre, que es lo que
   permite colocar cada pieza sin tocar el marcado.

   .car-linea-info se pone en display:contents: es un envoltorio sin
   significado propio -lleva nombre, codigo y el desplegable de complementos- y
   asi sus tres hijos entran en la rejilla por separado. Sin eso, el
   desplegable se quedaria encerrado en la columna del nombre en vez de cruzar
   a lo ancho.
   HASTA 1259px, NO HASTA 991.

   La rejilla de seis columnas de escritorio tiene cinco columnas fijas que
   suman, con huecos y relleno, 646px; el nombre se queda con lo que sobre.
   Desde 992 la columna del pedido comparte fila con el resumen (372px), y
   entre 992 y unos 1250 no sobra nada: medido a 1000px, la columna de textos
   media 0px y el nombre salia una letra por linea ("H/A/P/P/Y..."). Lo vio la
   clienta en su portatil. A 1280 ya mide 178px y cabe.
   Asi que la linea compacta sigue valiendo hasta 1259px. Solo la linea: lo
   demas de este bloque que era de movil se ha ido a su propio @media.
   ========================================================================== */
@media (max-width: 1259.98px) {

    .car-carrito .car-linea {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        /* El precio va en la MISMA columna que el nombre y el codigo, pegado
           debajo, no en una fila suelta a lo ancho: asi la foto tiene al lado
           todo lo que describe al producto y la fila de abajo queda libre para
           la cantidad y el total, como en el artboard. */
        grid-template-areas:
            "foto   nombre  quitar"
            "foto   codigo  quitar"
            "foto   precio  quitar"
            "cant   cant    total"
            "toggle toggle  toggle"
            "comps  comps   comps";
        align-items: center;
        gap: 6px 12px;
    }

    /* Solo la COLOCACION. El tamano lo pone la hoja importada, que lo saca del
       artboard: aqui estaba a ojo en 56 y el diseno la hace de 64. */
    .car-carrito .car-linea-foto {
        grid-area: foto;
        align-self: start;
    }

    /* El envoltorio desaparece como caja; sus hijos pasan a la rejilla. */
    .car-carrito .car-linea-info {
        display: contents;
    }

    .car-carrito .car-linea-nom { grid-area: nombre; align-self: end; }
    .car-carrito .car-linea-cod { grid-area: codigo; align-self: start; }

    .car-carrito .car-linea-quitar {
        grid-area: quitar;
        align-self: start;
    }

    /* Los dos precios en la misma linea, no uno debajo del otro. */
    /* EN FILA, no en columna.

       La regla de escritorio pone .car-linea-precio en flex COLUMN -alli el
       tachado va encima del precio- y aqui solo se cambiaba a flex sin decir la
       direccion, asi que seguia heredando column: medido, el tachado en y=486 y
       el actual en y=514, los dos en la misma x. En el artboard movil van uno
       al lado del otro con 8 de separacion. */
    .car-carrito .car-linea-precio {
        grid-area: precio;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        align-self: start;
    }

    /* La cantidad deja de estirarse: mide lo que mide en el diseno y se queda
       a la izquierda. 44 de alto y no 40, que es lo que pide el artboard y
       ademas el minimo comodo para el dedo. */
    .car-carrito .car-linea > .car-cant {
        grid-area: cant;
        width: 136px;
        height: 44px;
        justify-self: start;
    }

    /* Los botones a 44x42, que es lo que miden en el artboard. Estaban en
       40x38 y dejaban el campo del medio apretado entre ellos y con hueco
       arriba y abajo dentro de un grupo de 44 de alto. */
    .car-carrito .car-linea > .car-cant .car-cant-boton {
        /* flex y no solo width: el grupo es flexible y encogia los botones a 40
           aunque los tres hijos -44+46+44- caben de sobra en los 136. */
        flex: 0 0 44px;
        width: 44px;
        height: 42px;
    }

    .car-carrito .car-linea > .car-cant .car-cant-campo {
        width: 46px;
    }

    .car-carrito .car-linea-total {
        grid-area: total;
        text-align: right;
        justify-self: end;
    }

    /* El desplegable de complementos cruza las tres columnas, debajo de todo.
       Solo el del PRODUCTO: los complementos tienen el suyo ("Anadir mas") y
       ese no participa de esta rejilla. */
    .car-carrito .car-linea > .car-linea-info > .car-linea-toggle {
        grid-area: toggle;
        width: 100%;
        margin-top: 6px;
    }

    /* LA LISTA DE COMPLEMENTOS TAMBIEN ES HIJA DE .car-linea.

       Sin area declarada, el navegador le inventaba una celda: metia una
       columna de mas y el nombre del producto se quedaba en 20px de ancho,
       partido en una letra por linea. Se vio al anadir complementos.

       Con area propia, a lo ancho y en su fila, vuelve a su sitio. */
    .car-carrito .car-linea > .car-comps {
        grid-area: comps;
        width: 100%;
    }

    /* AQUI HABIA UNA "RED DE SEGURIDAD" QUE HACIA MAS DANO QUE BIEN.

       Era un '.car-linea > * { grid-column: 1 / -1 }' con excepciones, para que
       un hijo nuevo no inventara columnas. Pero grid-column PISA al grid-area:
       al listar .car-cant entre las excepciones con 'grid-column: auto' se
       anulaba su area, dejaba de abarcar dos columnas y su ancho fijo de 136
       empujaba la columna de la foto. Medido: las columnas pasaron de
       64/155/82 a 136/132/34 y el nombre se quedo sin sitio.

       Cada pieza se coloca por su grid-area y punto. Si algun dia aparece un
       hijo nuevo, se le da su area aqui, como a .car-comps. */
}

/* Movil de verdad: esto no es de la linea de producto, asi que no sube a
   1259 con el bloque de arriba. */
@media (max-width: 991.98px) {

    /* "SEGUIR COMPRANDO" no esta en el artboard movil: en una pantalla estrecha
       roba una fila entera justo encima del paso 2 y compite con PAGAR, que ya
       vive fijo en la barra de abajo. En escritorio si se queda, que es donde
       el diseno lo pone.

       SE OCULTA EL ENLACE, NO .car-promo-pie. Ese contenedor es el padre de
       TODO el bloque del cupon -rotulo, campo y boton VALIDAR-, no solo del
       enlace: ocultarlo dejo a los clientes de movil sin poder meter un cupon.
       El campo seguia en el DOM pero medido 0x0, asi que no daba ningun error;
       simplemente no estaba. */
    .car-carrito .car-promo-pie > .car-enlace {
        display: none;
    }
}

/* 992-1259: la linea va compacta, pero en una computadora "Añadir
   complementos" sigue siendo un enlace discreto a la izquierda, no una barra
   de lado a lado. A todo el ancho y con el texto centrado partia en dos
   lineas y parecia descolocado. */
@media (min-width: 992px) and (max-width: 1259.98px) {

    .car-carrito .car-linea > .car-linea-info > .car-linea-toggle {
        width: auto;
        justify-self: start;
        white-space: nowrap;
    }
}

/* Desde 1260, rejilla de seis columnas, pero con la columna de textos mas
   ancha.

   Medido a 1280 y mas: .car-grid topa en 1280px, asi que la columna de textos
   nunca pasaba de 178px, y "AÑADIR COMPLEMENTOS" medía 169. Le sobraban 9px.
   En Windows la letra sale un poco mas ancha, el boton partia en dos lineas y,
   como el texto de un <button> va centrado, la segunda linea quedaba metida
   hacia dentro. La clienta lo vio dos veces.

   Dos cosas:
   - Las columnas fijas se ajustan a lo que miden de verdad sus piezas: la
     cantidad mide 126 (la columna era de 136) y la papelera 34 (era de 40).
     El total pasa de 128 a 120 y el hueco de 18 a 14. Con eso la columna
     de textos pasa de 178 a 222px. El precio unitario se queda en 116: a 108
     ya partia en dos lineas con una letra ancha.
   - El enlace no se parte nunca y va alineado a la izquierda, debajo del
     codigo. Si un dia no cabe, se sale por el hueco de la derecha en vez de
     romperse en dos lineas. */
@media (min-width: 1260px) {

    .car-carrito .car-linea {
        grid-template-columns: 88px minmax(0, 1fr) 126px 116px 120px 34px;
        gap: 14px;
    }

    .car-carrito .car-linea-ahora,
    .car-carrito .car-linea-total-cifra {
        white-space: nowrap;
    }

    .car-carrito .car-linea-toggle {
        white-space: nowrap;
        text-align: left;
        justify-content: flex-start;
    }
}


/* Rotulos que solo valen para un tamano de pantalla. El artboard de escritorio
   separa "Distrito de envio" y "Costo de envio"; el de movil los junta en
   "Distrito y costo" y deja el importe como cifra suelta, sin rotulo propio. */
.car-carrito .car-solo-movil {
    display: none;
}

@media (max-width: 991.98px) {

    .car-carrito .car-solo-movil {
        display: block;
    }

    .car-carrito .car-solo-escritorio {
        display: none;
    }

    /* En movil el costo va sin rotulo: lo nombra el de arriba. */
    .car-carrito .car-entrega-campo--costo .car-rotulo {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   LA CONFIRMACION DE LA FECHA SALIA A 20px Y EN NEGRITA

   Es el <span id="diaSeleccionado"> que aparece bajo el campo cuando ya hay
   fecha elegida ("5 de septiembre de 2026"). main.min.css lo viste por su ID
   -20px y peso 700-, y un id pesa (1,0,0) mientras que .car-picker-nota pesa
   (0,1,0): pierde siempre. En escritorio no cantaba porque otra media query
   del mismo archivo lo baja a 16; en movil se quedaba en 20, en negrita, y
   partido en dos lineas junto al campo.

   Se le gana con el mismo id dentro del carrito, que es lo unico que pesa mas
   sin recurrir a !important. */
.car-carrito #diaSeleccionado {
    /* LA FAMILIA TAMBIEN, y esto es lo que se me escapo la primera vez.

       main.min.css le pone font-family: brandon_grotesquebold por el id. El
       peso computado dice 400 -y por eso al medirlo parecia correcto- pero la
       familia ES la variante negrita: Brandon son dos familias sueltas, no una
       con eje de peso, asi que el bold viene en el nombre y no en el numero.
       Se veia en negrita con un font-weight de 400.

       Es lo unico del carrito que quedaba fuera de Jost. */
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--car-texto-3);
    line-height: 1.4;
}

@media (min-width: 768px) {
    .car-carrito #diaSeleccionado {
        font-size: 12px;
    }
}

/* Y la papelera del cupon, centrada con el campo. Llevaba align-self:start de
   una regla anterior y quedaba 6px por encima -medido-. */
.car-carrito .car-promo-fila #carrito_cupon_limpiar {
    align-self: center;
}


/* --------------------------------------------------------------------------
   EN MOVIL EL CAMPO DE HORA MEDIA DOS PIXELES MAS QUE EL DE FECHA

   .car-picker-campo esta escrito primero-movil: 50px de alto y 13px de letra
   de base, y sube a 52 y 15 en el @media (min-width: 768px). La capa de hora
   sale del artboard de ESCRITORIO -de ahi salen sus 52px y sus 15px-, asi que
   nunca recibio ese escalon hacia abajo y en el movil se quedaba dos pixeles
   por encima del campo de fecha.

   El desnivel no acaba en el campo: .car-picker los apila con gap, o sea que
   las dos segundas lineas -la fecha en palabras y "Rango aproximado"- caian a
   distinta altura, 441 contra 443 medidos a 390px de ancho.

   Aqui la hora copia las medidas del campo de fecha en movil: mismo alto,
   misma letra, mismo icono y mismo hueco reservado para el. El panel baja los
   mismos dos pixeles, porque su top es el alto del campo mas el gap.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .car-carrito .car-hora-campo {
        height: 50px;
        padding: 0 32px 0 12px;
        font-size: 13px;
        background-position: right 12px center;
        background-size: 17px 17px;
    }

    .car-carrito .car-hora-panel {
        top: 56px;
    }
}


/* --------------------------------------------------------------------------
   LA BARRA DE PASOS SE QUEDA A LA VISTA MIENTRAS SE BAJA

   Se escribio como indicador de por donde va el scroll, pero se iba con el
   scroll: a los dos dedos de bajar ya no estaba, o sea que indicaba la
   posicion solo cuando el cliente todavia no se habia movido de sitio.

   Se pega bajo la cabecera del sitio, que es fija y mide 65px. Solo en movil:
   en escritorio la barra esta oculta -las dos columnas ya ensenan por donde va
   la cosa- y ahi esta regla no llega a aplicarse.

   El z-index es 15: por debajo del panel de horas, que va a 20, y por encima
   del calendario, que va a 10. Medido: los dos abren HACIA ABAJO del campo, o
   sea que en su sitio natural ninguno llega a la franja de la barra. La unica
   forma de cruzarse es seguir bajando con el panel abierto, y entonces que la
   barra tape lo que pasa por debajo es justo lo que tiene que ocurrir.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /*
     * Y ANTES QUE NADA: EL <main> IMPEDIA QUE SE PEGARA.
     *
     * index.css declara "main { overflow: hidden }" en este mismo ancho, para
     * que nada -un carrusel, una animacion- ensanche la pagina y aparezca
     * scroll horizontal en el telefono. Efecto de lado: un overflow distinto de
     * visible convierte al elemento en el contenedor de scroll de todo lo
     * pegajoso que lleve dentro. Como el <main> no tiene scroll propio, la
     * barra se quedaba pegada a EL y se iba con la pagina; position:sticky
     * estaba puesto y no hacia absolutamente nada.
     *
     * "clip" recorta igual que "hidden" pero NO crea contenedor de scroll, que
     * es justo la diferencia que hace falta. Solo en el eje horizontal, que es
     * el que se queria recortar; en vertical se deja ver, que es lo que permite
     * que la barra se pegue.
     *
     * Va dentro de @supports porque en un navegador sin "clip" la declaracion
     * entera se descarta y se queda el "hidden" de index.css: se pierde el
     * pegado, no se gana un scroll horizontal.
     */
    @supports (overflow: clip) {
        main.main-carrito {
            overflow: visible;
            overflow-x: clip;
        }
    }

    .car-carrito .car-progreso {
        position: sticky;
        /*
         * El tope NO se escribe a mano. carrito-pasos.js mide la cabecera fija
         * al arrancar y deja el alto en --car-cab-alto; asi este numero no se
         * queda viejo cuando la cabecera cambia -que es justo lo que acaba de
         * pasar al meter el recuadro del WhatsApp: 65 se quedo corto y la barra
         * se metia cuatro pixeles por debajo-. El 69 del respaldo es la suma
         * actual, por si el JS no llega a correr.
         */
        top: var(--car-cab-alto, 69px);
        z-index: 15;
    }

    /* Los pasos ya recorridos se leen distinto de los que faltan: el filete
       queda en el marron flojo de la paleta -el mismo de las notas- y no en el
       gris de "todavia no". No se inventa un color nuevo. */
    .car-carrito .car-progreso-paso.is-hecho .car-progreso-barra {
        background: var(--car-texto-3);
    }
}


/* --------------------------------------------------------------------------
   EL PRECIO DEL COMPLEMENTO SE APLASTABA HASTA DESBORDARSE SOBRE LA PAPELERA

   Medido a 390px: el pie de la fila mide 192px y dentro van cuatro cosas -el
   grupo de cantidad (128), el precio, la papelera (34) y dos huecos de 12-.
   No caben: hacen falta unos 219. Lo que pasaba es que el precio cedia TODO
   su ancho -quedaba en 6px con 55 de texto dentro- y las letras se salian de
   su caja y se pintaban encima de la papelera. Eso es la equis sobre el
   precio que se veia en movil.

   Lo permitia esta regla, que esta puesta al carrito entero:

       .car-carrito * { min-width: 0 }

   Sin ella un elemento flexible no baja de su ancho minimo de contenido; con
   ella, si. Es util en las rejillas -evita que un texto largo las ensanche-,
   asi que no se quita: se le devuelve el minimo a los dos elementos que aqui
   no pueden encogerse.

   Y como aun asi no caben, el pie pasa a poder partirse en dos lineas. Se
   parte solo cuando hace falta: en pantallas mas anchas los cuatro caben y la
   fila sigue siendo una sola linea.

   NO SE QUITA LA PAPELERA aunque el artboard no la tenga: alli un complemento
   se quita bajando la cantidad a cero -el propio artboard ensena una fila en
   0- y aqui la papelera es lo que borra la linea. Cambiar eso es una decision
   de producto, no de maquetacion.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .car-carrito .car-linea-comp-pie {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* El precio y la papelera conservan su tamano: el que cede es el hueco. */
    .car-carrito .car-linea-comp-pie > .car-linea-comp-total,
    .car-carrito .car-linea-comp-pie > .car-linea-quitar {
        flex: none;
        min-width: min-content;
    }

    /* Cuando el pie se parte, el precio y la papelera se van juntos a la
       segunda linea y quedan pegados a la derecha, debajo del grupo de
       cantidad. El margin-left:auto de .car-linea-comp-total ya los empuja. */
    .car-carrito .car-linea-comp-pie > .car-cant {
        flex: none;
    }
}


/* --------------------------------------------------------------------------
   LA EQUIS DEL MODAL SALIA A 48px, NO A 20

   El boton de cerrar es <button class="close"><span>&times;</span></button> y
   la regla que ya habia le fijaba 34x34 y 20px AL BOTON. Pero index.css trae:

       .close, .modal-header .close span { font-size: 3rem }

   ...y ese segundo selector apunta al SPAN de dentro, que no heredaba nada.
   Resultado medido: el boton 34x34 con un span de 29x48 dentro, o sea la equis
   sobresaliendo 14px de su propio boton. Se veia enorme y descolocada.

   Se le dice al span que herede del boton, que es quien manda el tamano, y se
   le quita el interlineado de 48px para que quede centrada en la caja.
   -------------------------------------------------------------------------- */
.car-modal .modal-header .close span,
.car-modal .car-modal-cerrar span {
    font-size: inherit;
    line-height: 1;
}


/* --------------------------------------------------------------------------
   EN MOVIL NO HABIA FORMA DE LEER LAS CONDICIONES DE REPARTO

   main.min.css esconde TODOS los interrogantes de ayuda por debajo de 992px:

     @media (max-width: 991px) and (min-width: 320px) {
         .fa-question-circle { display: none !important }
     }

   En el carrito eso deja fuera cinco ayudas, y una de ellas -la de "Rango
   aproximado"- es la unica parte del sitio donde se explica como funciona el
   reparto: que los horarios son rangos aproximados, que el conductor espera 15
   minutos en la direccion y que en fechas especiales -San Valentin, Dia de la
   Madre, Navidad...- los rangos varian. Son condiciones del servicio, no un
   adorno, y en movil no se podian leer de ninguna manera.

   El !important no es pereza: a un !important solo se le gana con otro. Se
   comprobo primero sin el y el icono seguia en display:none.

   Va acotado a `.car-carrito` a proposito. Fuera del carrito puede haber
   interrogantes escondidos por buenas razones, y aqui solo se arregla lo que
   se ha medido.

   Lo del ::after es el tamano del dedo. Con el icono a la vista la caja queda
   en 13x13 px (13x8 los que van dentro de un campo), muy por debajo de los
   24x24 que pide WCAG 2.2. En vez de agrandar el icono -que descuadraria la
   linea de "Rango aproximado" y el interior de los campos- se le pone encima
   una caja invisible de 34x34 centrada, que no ocupa sitio en el flujo.
   Medido en QA a 390px: los cinco responden a 14 px del centro en las cuatro
   direcciones. Y los 34px caben en el hueco que el campo ya reserva, porque
   `.car-carrito .car-campo:has(> .car-ayuda) .car-input` deja 38px de padding
   a la derecha.

   El `position: relative` es para que el ::after tenga contra que colocarse.
   Se repite `position: absolute` en los que van dentro de un campo porque esa
   regla existe mas arriba y aqui no se quiere tocar: ahi el absolute ya hace
   de ancla.

   Comprobado en QA a 390x844: los cinco tooltips abren con el FOCO, que es lo
   que dispara un toque real en un <a href="#">, y ninguno se sale por los
   lados ni es mas alto que la pantalla. El mas largo, el de los rangos, mide
   310x417. Y el clic no mueve la pagina pese al href="#".
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .car-carrito .car-ayuda {
        display: inline-block !important;
        position: relative;
    }

    .car-carrito .car-campo > .car-ayuda {
        position: absolute;
    }

    .car-carrito .car-ayuda::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 34px;
        height: 34px;
    }
}


/* --------------------------------------------------------------------------
   UN CAMPO EN ROJO CUANDO ESTA MAL

   Los validadores de carrito.js llevan desde siempre marcando los campos con
   la clase `is-invalid` de Bootstrap. En el carrito redisenado esa clase NO
   pintaba nada: medido sobre #email-comprador, con la clase y sin ella el
   borde salia igual -1px solid #e6ddd2- y el fondo tambien.

   Consecuencia: se pulsaba PAGAR, la validacion fallaba, el campo quedaba
   marcado por dentro y la persona no veia una sola senal. La clienta lo
   reporto el 12/09/2026: «no veo ningun mensaje en rojo que me diga que algo
   falta o esta mal escrito».

   El rojo es el mismo #c0522f que ya usa el aviso de error del pago, para no
   meter un color nuevo en la pantalla.
   -------------------------------------------------------------------------- */
.car-carrito .car-input.is-invalid,
.car-carrito .car-select.is-invalid,
.car-carrito input.is-invalid,
.car-carrito select.is-invalid,
.car-carrito textarea.is-invalid {
    border-color: #c0522f;
    background-color: #fdf5f2;
}

.car-carrito .is-invalid:focus {
    border-color: #c0522f;
    box-shadow: 0 0 0 3px rgba(192, 82, 47, .16);
    outline: none;
}

/* ==========================================================================
   EL CARRITO CON EL ESTILO DE LA WEB (02/10/2026)

   Se probo lo contrario -llevar los botones rectos y marrones del carrito a
   toda la web- y la clienta prefirio el de la web: "colores y formas
   redondeadas". Asi que es el carrito el que se alinea.

   Cada pieza toma su equivalente de rediseno.css:
     - botones          -> "Agregar al carrito" de la ficha: pildora terracota
     - campos           -> los de "Personaliza la entrega": radio 10px
     - cantidad         -> .rd-cantidad: pildora
     - paneles/lineas   -> las tarjetas: radio 16px
   El terracota es #A8432C, el de la franja de confianza que eligio.

   NO se toca --car-marron: tine tambien titulos, rotulos y precios -61 usos-
   y esos se quedan en marron. Solo cambian los elementos de accion.
   ========================================================================== */
.car-carrito,
.car-modal {
    --car-terracota: #A8432C;
    --car-terracota-hover: #8E3522;
}

/* --- Botones: PAGAR, "Aplicar" del codigo de promocion --- */
.car-carrito .car-boton,
.car-carrito a.car-boton {
    background: var(--car-terracota);
    border-radius: 999px;
    text-transform: none;
    letter-spacing: .01em;
    font-size: 15px;
}
.car-carrito .car-boton:hover,
.car-carrito .car-boton:focus,
.car-carrito a.car-boton:hover,
.car-carrito a.car-boton:focus {
    background: var(--car-terracota-hover);
}
/* "PAGAR" esta escrito en mayusculas en la vista; en la web los botones van
   en caja normal, pero cambiar el texto toca el JS que lo lee. Se deja y se
   le baja el espaciado para que no quede gritado. */
.car-carrito .car-boton-pagar {
    letter-spacing: .08em;
}

/* --- Campos --- */
.car-carrito .car-input,
.car-carrito .car-select,
.car-carrito .car-textarea,
.car-carrito .car-picker-campo,
.car-carrito .car-hora-campo {
    border-radius: 10px;
}
.car-carrito .car-input:focus,
.car-carrito .car-select:focus,
.car-carrito .car-textarea:focus,
.car-carrito .car-picker-campo:focus,
.car-carrito .car-hora-campo:focus {
    border-color: var(--car-terracota);
}

/* El codigo de promocion es campo + boton pegados: el campo redondea solo a
   la izquierda y el boton a la derecha, como .input-taza de la ficha. */
.car-carrito .car-promo-fila .car-input {
    border-radius: 999px 0 0 999px !important;
}
.car-carrito .car-promo-fila .car-boton {
    border-radius: 0 999px 999px 0;
}

/* --- Cantidad --- */
.car-carrito .car-cant {
    border-radius: 999px;
    overflow: hidden;
}
.car-carrito .car-cant-boton {
    background: transparent;
}
.car-carrito .car-cant-boton:hover {
    color: var(--car-terracota);
}

/* --- Paneles, lineas y resumen --- */
.car-carrito .car-linea,
.car-carrito .car-panel,
.car-carrito .car-sugerencias,
.car-carrito .car-resumen {
    border-radius: 16px;
}
.car-carrito .car-linea-foto,
.car-carrito .car-resumen-entrega,
.car-carrito .car-opcion,
.car-carrito .car-pago,
.car-carrito .car-linea-comp {
    border-radius: 10px;
}
.car-carrito .car-linea-quitar {
    border-radius: 50%;
}
/* "Añadir complementos": en el telefono es un boton con borde; en la
   computadora es un enlace sin borde y el radio no se nota. */
.car-carrito .car-linea-toggle {
    border-radius: 999px;
}

/* --- Seleccion activa (BOLETA/FACTURA, forma de pago) en terracota --- */
.car-carrito .car-opcion.is-activa,
.car-carrito .car-pago.is-activa {
    border-color: var(--car-terracota);
}
.car-carrito .car-opcion.is-activa {
    color: var(--car-terracota);
}
.car-carrito .car-opcion-dot {
    border-color: var(--car-terracota);
    color: var(--car-terracota);
}
.car-carrito input[type="checkbox"],
.car-carrito input[type="radio"] {
    accent-color: var(--car-terracota);
}

/* --- Numero de paso: circulo terracota, como .rd-step__n de la portada --- */
.car-carrito .car-paso-num {
    background-color: var(--car-terracota);
    border-radius: 50%;
}

/* --- Modal de complementos --- */
.car-modal .modal-content,
.car-modal .modc {
    border-radius: 16px;
    overflow: hidden;
}
.car-modal .btn-agregar-complemento {
    background: var(--car-terracota);
    border-radius: 999px;
}
.car-modal .btn-agregar-complemento:hover,
.car-modal .btn-agregar-complemento:focus {
    background: var(--car-terracota-hover);
}

/* ==========================================================================
   RESUMEN SIN BARRAS DE SCROLL Y SIN EL GLOBO ENCIMA (02/10/2026)

   La clienta, en Chrome de Windows: barras de scroll dentro de "Productos" y
   de "Entrega", y el globo de WhatsApp otra vez sobre PAGAR.

   1. Las barras. El arreglo del 12/09 hacia que la lista y la entrega
      cedieran alto y se desplazaran POR DENTRO (overflow-y:auto) cuando el
      resumen no cabia. En Mac las barras son flotantes y no se veian; en
      Windows salen siempre. Medido a 1366x657: el resumen pedia ~570px contra
      536 de maximo, y casi todo lo que sobraba era aire (160px de gap y 76 de
      relleno). Se compacta el aire y nada cede: las cajas vuelven a su alto.

   2. El globo. La regla de arriba (body:has(.car-carrito) ... bottom:104px)
      se hizo para el movil, para que no tapara la barra de PAGAR. En
      escritorio esos 104px lo dejan exactamente a la altura de PAGAR dentro
      del resumen pegajoso. Aqui baja a la esquina, 16px, un poco mas chico, y
      el resumen termina por encima de el: ya no pueden coincidir.

   3. Ultimo recurso. Si con todo eso no cabe (ventanas muy bajas, o muchos
      complementos), el resumen se desplaza ENTERO -una sola barra, y PAGAR
      siempre alcanzable- en vez de recortar o meter barras en cajitas.
   ========================================================================== */
@media (min-width: 992px) {

    body:has(.car-carrito) a[href*="api.whatsapp.com"][style*="fixed"] {
        bottom: 16px !important;
        right: 12px !important;
    }
    body:has(.car-carrito) a[href*="api.whatsapp.com"][style*="fixed"] img {
        width: 52px;
        height: 52px;
    }

    /* 16 de margen + 52 del globo + 16 de aire = 84 abajo */
    .car-carrito .car-resumen {
        max-height: calc(100vh - var(--car-cabecera-alto) - 16px - 84px);
        padding: 24px 26px 24px;
        gap: 12px;
        overflow-y: auto;
    }

    .car-carrito .car-resumen-falta,
    .car-carrito .car-resumen-filas,
    .car-carrito .car-resumen-entrega {
        flex-shrink: 0;
        overflow: visible;
    }

    .car-carrito .car-resumen-filas {
        gap: 8px;
    }

    .car-carrito .car-resumen-entrega {
        gap: 6px;
        padding: 12px 14px;
    }

    .car-carrito .car-resumen .car-terminos {
        margin-bottom: 0;
    }
}


/* 15/10/2026, observaciones de la clienta en el paso Entrega, en movil.

   1. El desplegable de locacion quedaba 8px mas arriba que "Nro. de
      departamento". La regla de align-items:end de mas arriba estaba bien,
      pero la <label> del desplegable arrastra el margin-bottom:.5rem que
      Bootstrap le pone a todo label, y con align-items:end ese margen la
      levanta. Las celdas de la rejilla se separan con gap; ese margen sobra.

   2. En movil la rejilla tiene dos columnas IMPLICITAS: la base dice una sola
      columna, pero importado-carrito.css le da span 2 a los campos anchos y
      eso crea la segunda columna de ancho auto (por eso median 152 y 162px).
      Se declaran las dos columnas iguales y el telefono del destinatario
      ocupa la fila entera, porque a 152px con el icono de ayuda no se leia
      el numero. */
.car-carrito .car-campos > .car-campo {
    margin-bottom: 0;
}

/* importado-carrito.css le fija height:16px al rotulo. A 157px de columna
   "NRO. DE DEPARTAMENTO" pasa a dos lineas y la segunda se montaba sobre la
   caja. Con alto automatico crece hacia arriba (la fila se alinea por abajo). */
.car-carrito .car-locacion > .car-rotulo {
    height: auto;
}

@media (max-width: 767.98px) {
    .car-carrito .car-campos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .car-carrito .car-campos > .car-campo--tel {
        grid-column: 1 / -1;
    }
}


/* 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;
    }
}


/* assets/css/cuentas.css */


/* ==========================================================================
   CUENTAS — acceso, recuperación y perfil

   Hoja del rediseño de las cuatro pantallas de cuenta, sobre el sistema del
   REDISEÑO 2026 -rediseno.css-: Karla para el texto, Newsreader para los
   titulares, paneles blancos con filete sobre el crema y rótulo en mayúscula
   encima de cada bloque.

   POR QUE ESTE SISTEMA Y NO EL DEL CARRITO. El carrito y la ficha van en Jost,
   que fue lo primero que se rehizo. Pero la portada y los catálogos ya están en
   Karla + Newsreader, que es a donde va el sitio entero: rediseno.css se llama
   así por eso y carga la última de todas. Poner estas pantallas en Jost las
   habría dejado encajando con el carrito y desencajando con la portada, y
   habría que rehacerlas otra vez al rediseñar el resto.

   POR QUE UNA HOJA APARTE. index.css pesa 19 KB minificados en una sola
   linea, con reglas de 2019 que nadie sabe quien usa. Tocarla para esto
   significaba arriesgar el resto del sitio. Esta hoja carga despues y solo
   toca lo que lleva el prefijo .cta-, mas cuatro anulaciones acotadas de las
   reglas viejas que hay que apagar por su nombre.

   TODOS LOS TAMANOS EN PIXELES A PROPOSITO: index.css trae un
   `* { font-size: 16px }` que gana a cualquier tamano heredado en em o rem.
   ========================================================================== */

.cta {
    /*
     * Se heredan los tokens de rediseno.css en vez de repetir sus hexadecimales:
     * si manana cambia la paleta del sitio, estas pantallas cambian con ella.
     * El respaldo tras la coma es por si esta hoja se carga suelta.
     */
    --cta-marron: var(--rd-brown, #8B5E34);
    --cta-marron-hover: #6F4926;
    --cta-acento: var(--rd-accent, #B4462F);
    --cta-crema: var(--rd-bg-soft, #FBF6F1);
    --cta-fondo: var(--rd-bg, #F3EAE1);
    --cta-filete: var(--rd-line-2, #E4D8CE);
    --cta-filete-suave: var(--rd-line, #EFE3D9);
    --cta-blanco: var(--rd-white, #FFFFFF);
    --cta-texto: var(--rd-ink, #3E2A20);
    --cta-texto-2: var(--rd-ink-2, #6B5346);
    --cta-texto-3: var(--rd-ink-3, #8A7466);
    --cta-error: var(--rd-accent-dark, #8E3522);
    --cta-error-fondo: #FBEFEA;
    --cta-error-filete: var(--rd-accent-line, #EFC9BB);
    --cta-ok: #3F7A48;
    --cta-ok-fondo: #EEF4EF;
    --cta-ok-filete: #CFE0D3;
    --cta-estampa: var(--rd-line-3, #D8BCAE);

    --cta-sans: var(--rd-sans, 'Karla', system-ui, sans-serif);
    --cta-serif: var(--rd-serif, 'Newsreader', Georgia, serif);

    font-family: var(--cta-sans);
    color: var(--cta-texto);
    background: var(--cta-fondo);
}

/* ---------- La sección: contiene las estampas ----------

   El fallo viejo: las estampas eran `position:absolute` sin ancestro
   posicionado, asi que se anclaban al BODY. Con `bottom:25%` dos de ellas
   caian por debajo del pie, en un vacio de 650px. `position:relative` aqui
   las encierra, y `overflow:hidden` recorta lo que sobresalga. */
.cta-seccion {
    position: relative;
    overflow: hidden;
    /*
     * Crece hasta llenar lo que queda de ventana bajo la cabecera y sobre el
     * pie. Sin esto, en una pantalla alta la pagina acababa antes que la
     * ventana y quedaba una banda de crema vacia debajo del pie, que parece un
     * fallo de maquetado aunque no lo sea. El max() mantiene el minimo para
     * pantallas bajas.
     */
    min-height: max(560px, calc(100vh - 420px));
    padding: 56px 20px 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cta-fondo);
}

/* ---------- Estampas ----------

   Antes eran cuatro JPG. El JPG no admite transparencia, asi que sobre el
   crema cada una salia dentro de su recuadro blanco. Ahora son SVG de trazo
   en el marcado: no tienen fondo que tapar y heredan el color. */
.cta-estampa {
    position: absolute;
    color: var(--cta-estampa);
    pointer-events: none;
    z-index: 0;
}
.cta-estampa--1 { left: 7%;  top: 12%;   width: 168px; height: 168px; opacity: .35; }
.cta-estampa--2 { right: 8%; top: 16%;   width: 150px; height: 150px; opacity: .32; }
.cta-estampa--3 { left: 12%; bottom: 8%; width: 132px; height: 132px; opacity: .28; }
.cta-estampa--4 { right: 11%; bottom: 10%; width: 140px; height: 140px; opacity: .26; }

/* ---------- Panel ---------- */
.cta-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    background: var(--cta-blanco);
    border: 1px solid var(--cta-filete);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cta-rotulo {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cta-texto-3);
    margin: 0;
}

.cta-titulo {
    margin: 0;
    /* Los titulares con caracter van en la serif del rediseno, como en la
       portada. El peso 400 y el interletrado son los que usa rediseno.css. */
    font-family: var(--cta-serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--cta-texto);
}

.cta-bajada {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--cta-texto-2);
}

/* ---------- Campos ---------- */
.cta-campo { display: flex; flex-direction: column; gap: 7px; }

.cta-campo label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cta-texto-3);
    margin: 0;
}

.cta-campo input {
    height: 48px;
    box-sizing: border-box;
    padding: 0 14px;
    font-family: var(--cta-sans);
    font-size: 16px;
    color: var(--cta-texto);
    background: var(--cta-blanco);
    border: 1px solid var(--cta-filete);
    border-radius: 8px;
    width: 100%;
}
.cta-campo input:focus {
    outline: none;
    border-color: var(--cta-marron);
    box-shadow: 0 0 0 3px rgba(139, 94, 52, .14);
}
.cta-campo input::placeholder { color: var(--cta-texto-3); }
.cta-campo--mal input { border-color: var(--cta-error-filete); }

/* ---------- Botones ---------- */
.cta-boton {
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 28px;
    font-family: var(--cta-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cta-blanco);
    background: var(--cta-marron);
    border: 1px solid var(--cta-marron);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease;
}
.cta-boton:hover { background: var(--cta-marron-hover); border-color: var(--cta-marron-hover); color: var(--cta-blanco); }
.cta-boton[disabled] { background: #b39472; border-color: #b39472; cursor: default; }

.cta-boton--claro {
    color: var(--cta-marron);
    background: var(--cta-blanco);
    border-color: var(--cta-filete);
}
.cta-boton--claro:hover { background: var(--cta-crema); color: var(--cta-marron-hover); }

.cta-boton--ancho { width: 100%; }

/* ---------- Avisos: el hueco que antes no existia ---------- */
.cta-aviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
}
.cta-aviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.cta-aviso--mal { background: var(--cta-error-fondo); border: 1px solid var(--cta-error-filete); color: var(--cta-error); }
.cta-aviso--bien { background: var(--cta-ok-fondo); border: 1px solid var(--cta-ok-filete); color: var(--cta-ok); }

/* ---------- Pie del panel ---------- */
.cta-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--cta-filete-suave);
    font-size: 14px;
    color: var(--cta-texto-3);
}
.cta-pie a { color: var(--cta-marron); }
.cta-pie a:hover { color: var(--cta-marron-hover); }
.cta-pie strong, .cta-pie .cta-fuerte { font-weight: 600; }

/* ---------- Estado "ya iniciaste sesión" ---------- */
.cta-medallon {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    background: var(--cta-crema);
    border: 1px solid var(--cta-filete);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cta-marron);
}
.cta-medallon svg { width: 26px; height: 26px; }
.cta-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-acciones .cta-boton { flex: 1 1 180px; }

/* ==========================================================================
   PERFIL
   ========================================================================== */
.cta-perfil {
    max-width: 1240px;
    margin: 0 auto;
    /*
     * El padding de arriba deja pasar la CABECERA FIJA. Medido en QA:
     * .cabeceramenu es `position:fixed` con z-index 100 y 180px de alto, asi
     * que el contenido que empieza en 0 le queda debajo. Sin esto, el titulo
     * "Mi perfil" y las tres pestanas salian tapados por el menu.
     *
     * Las pantallas de acceso no lo notaban porque su panel va centrado dentro
     * de una seccion alta; el perfil empieza arriba del todo y si lo sufre.
     */
    padding: 208px 20px 64px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cta-perfil-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.cta-perfil-cabecera .cta-titulo { font-size: 32px; }
.cta-perfil-dato { font-size: 14px; color: var(--cta-texto-2); }

/* Pestañas */
.cta-pestanas {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--cta-filete);
    overflow-x: auto;
}
.cta-pestana {
    flex: none;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cta-texto-3);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.cta-pestana:hover { color: var(--cta-marron); }
.cta-pestana.es-activa { color: var(--cta-marron); border-bottom-color: var(--cta-marron); }

.cta-rejilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}
.cta-caja {
    background: var(--cta-blanco);
    border: 1px solid var(--cta-filete);
    border-radius: 14px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-sizing: border-box;
}
.cta-caja--ancha { grid-column: span 2; }
.cta-caja--crema { background: var(--cta-crema); }
.cta-caja-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

/* Lista de pedidos */
.cta-pedido {
    background: var(--cta-blanco);
    border: 1px solid var(--cta-filete);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.cta-pedido-foto {
    width: 74px;
    height: 74px;
    flex: none;
    border-radius: 10px;
    background: var(--cta-crema);
    border: 1px solid var(--cta-filete-suave);
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cta-estampa);
}
.cta-pedido-cuerpo { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cta-pedido-nombre { font-size: 17px; font-weight: 500; color: var(--cta-texto); }
.cta-pedido-meta { font-size: 14px; color: var(--cta-texto-2); }
.cta-pedido-total { flex: none; font-size: 18px; font-weight: 600; color: var(--cta-texto); text-align: right; }

.cta-marca {
    flex: none;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--cta-crema);
    border: 1px solid var(--cta-filete);
    color: var(--cta-marron);
    white-space: nowrap;
}
.cta-marca--ok { background: var(--cta-ok-fondo); border-color: var(--cta-ok-filete); color: var(--cta-ok); }

/* Sin pedidos */
.cta-vacio {
    position: relative;
    overflow: hidden;
    background: var(--cta-blanco);
    border: 1px solid var(--cta-filete);
    border-radius: 14px;
    padding: 56px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}
/*
 * El contenido se levanta sobre las estampas. Se excluyen ELLAS del selector:
 * una version de esta regla decia `.cta-vacio > *` a secas y, como las
 * estampas son hijas directas, les cambiaba el position:absolute por relative.
 * Volvian al flujo, se apilaban una debajo de otra y la caja pasaba de 360px a
 * 1019px, con las figuras sueltas por el medio. Medido en QA.
 */
.cta-vacio > *:not(.cta-estampa) { position: relative; z-index: 1; }
.cta-vacio .cta-estampa { position: absolute; z-index: 0; }
.cta-vacio-medallon {
    width: 78px; height: 78px; border-radius: 50%;
    background: var(--cta-crema); border: 1px solid var(--cta-filete);
    display: flex; align-items: center; justify-content: center; color: var(--cta-marron);
}
.cta-vacio-medallon svg { width: 34px; height: 34px; }

/* Paginación */
.cta-paginacion { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 6px; }
.cta-paginacion .pagination { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cta-paginacion .pagination li a,
.cta-paginacion .pagination li > span {
    min-width: 40px; height: 40px; padding: 0 12px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--cta-texto-2);
    background: var(--cta-blanco); border: 1px solid var(--cta-filete);
    border-radius: 8px; text-decoration: none;
}
.cta-paginacion .pagination li.active > a,
.cta-paginacion .pagination li.active > span {
    color: var(--cta-blanco); background: var(--cta-marron); border-color: var(--cta-marron); font-weight: 600;
}

/* ==========================================================================
   MÓVIL. Se compra mucho desde el celular, asi que manda esta parte.
   ========================================================================== */
@media (max-width: 991.98px) {
    .cta-rejilla { grid-template-columns: minmax(0, 1fr); }
    .cta-caja--ancha { grid-column: auto; }
}

@media (max-width: 767.98px) {
    .cta-seccion { padding: 28px 16px 44px; min-height: 0; }
    .cta-panel { padding: 24px 20px; gap: 18px; border-radius: 14px; }
    .cta-titulo { font-size: 26px; }
    .cta-perfil-cabecera .cta-titulo { font-size: 27px; }
    /*
     * En movil la cabecera fija mide 150px, medido en un viewport de 390.
     * Con 130 el rotulo "Tu cuenta" quedaba justo debajo del menu y no se
     * leia. 174 deja 24px de aire.
     */
    .cta-perfil { padding: 174px 16px 48px; gap: 18px; }
    .cta-caja { padding: 20px; }
    .cta-caja-campos { grid-template-columns: minmax(0, 1fr); }

    /* Los campos van a 50px y 16px: por debajo de 16px el iPhone hace zoom
       solo al enfocar, y la pantalla salta. */
    .cta-campo input { height: 50px; font-size: 16px; }
    .cta-boton { height: 52px; width: 100%; }
    .cta-pie { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* Las estampas se van a los bordes para no meterse debajo del panel. */
    .cta-estampa--1 { left: auto; right: -34px; top: 4px; width: 140px; height: 140px; }
    .cta-estampa--2 { display: none; }
    .cta-estampa--3 { left: -38px; bottom: 12px; width: 132px; height: 132px; }
    .cta-estampa--4 { display: none; }

    .cta-pedido { flex-wrap: wrap; padding: 16px; gap: 14px; }
    .cta-pedido-total { width: 100%; text-align: left; }
    .cta-pedido .cta-boton { width: 100%; }
}

/* ==========================================================================
   ANULACIONES ACOTADAS DE LAS HOJAS VIEJAS

   Cuatro reglas de index.css que pintan estas pantallas y que hay que apagar
   por su nombre. Van dentro de .cta para que no alcancen a ninguna otra
   pagina: esa es la leccion del cambio global que piso el carrito.
   ========================================================================== */
.cta .img-oc-one,
.cta .img-oc-two,
.cta .img-oc-three,
.cta .img-oc-four { display: none !important; }

.cta h1, .cta h2, .cta h3, .cta p, .cta span, .cta a, .cta label, .cta button, .cta input {
    font-family: var(--cta-sans);
}

/*
 * .form-control de bootstrap y de bmd traen su propio alto, borde de una sola
 * linea y fondo con degradado de foco. Se apagan, PERO SIN TOCAR EL ALTO: una
 * version de esta regla puso `height:auto` y, al ir despues en la hoja, se
 * comio los 48px de .cta-campo input y los campos salieron aplastados.
 */
.cta .cta-campo .form-control {
    box-shadow: none;
    background-image: none;
    border: 1px solid var(--cta-filete);
    border-radius: 8px;
    padding: 0 14px;
}

/* La validacion de bootstrap pinta el borde; se respeta la paleta. */
.cta .cta-campo .form-control.is-invalid { border-color: var(--cta-error-filete); background-image: none; }
.cta .cta-campo .form-control.is-valid { border-color: var(--cta-ok-filete); background-image: none; }

/*
 * El alto, al final de la hoja y con el peso suficiente para ganar a bmd, que
 * declara los suyos sobre .form-control. Los 16px del texto no son estetica:
 * por debajo de 16px el iPhone hace zoom solo al enfocar el campo y la
 * pantalla da un salto.
 */
.cta .cta-campo input.form-control,
.cta .cta-campo input {
    height: 48px;
    font-size: 16px;
    line-height: normal;
}

@media (max-width: 767.98px) {
    .cta .cta-campo input.form-control,
    .cta .cta-campo input { height: 50px; }
}

/*
 * LAS ETIQUETAS FLOTANTES DE BOOTSTRAP MATERIAL.
 *
 * bmd.js convierte toda <label> en etiqueta flotante: la pone en
 * `position:absolute` y la sube sobre el campo. Medido aqui: position
 * absolute, top 7px. Con eso, los rotulos de estas pantallas se despegaban de
 * su campo y se amontonaban arriba del panel -se veia un "CONTRASEÑA" suelto
 * encima del titulo-.
 *
 * Se devuelven al flujo. Va con !important porque la regla de bmd tambien lo
 * lleva, y acotado a .cta para no tocar ningun otro formulario del sitio.
 */
.cta .cta-campo label {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    pointer-events: auto;
    font-size: 11px !important;
    line-height: 1.3;
    opacity: 1 !important;
    color: var(--cta-texto-3) !important;
}

/*
 * Y el contenedor deja de reservar el hueco que la etiqueta flotante ocupaba.
 */
.cta .form-group,
.cta .bmd-form-group {
    padding: 0;
    margin: 0;
}


/* assets/css/estaticas.css */
/* =============================================================================
 * PAGINAS ESTATICAS (07/10/2026)
 *
 * Nosotros, Trabaja con nosotros, Como comprar, Formas de pago, Costos de
 * envio, Terminos y condiciones, Ayuda al cliente y Libro de reclamaciones.
 *
 * La clienta noto que "las paginas estaticas tambien cambiaron". No se tocaron
 * a proposito: las alcanzaron dos cosas de la portada nueva.
 *
 *   1. El fondo pasa a crema (rediseno.css). Los GIF de la linea punteada
 *      tienen el fondo BLANCO dentro del archivo, asi que quedaron como cajas
 *      blancas sobre el crema.
 *   2. rediseno.css redefine Mellifret y Brandon para que apunten a Newsreader
 *      y Karla. Los titulos de los banners, que eran la letra script, salieron
 *      en la serif fina.
 *
 * Joseph pidio NO redisenarlas: dejarlas bien, balanceadas y con las mismas
 * imagenes. Asi que esta hoja no cambia el marcado ni las fotos. Hace cuatro
 * cosas:
 *
 *   - vuelve a poner la script en los titulos, con el MISMO archivo de
 *     siempre (assets/fonts/MELLIFRET.TTF) bajo otro nombre de familia, para
 *     que el mapeo de rediseno.css no la alcance;
 *   - esconde la linea punteada: era lo que abria los huecos de 200 px entre
 *     bloque y bloque, ya en produccion;
 *   - ordena cada pagina en una columna de lectura con el aire parejo;
 *   - cierra los acordeones de Ayuda y Terminos, que en QA salian abiertos
 *     (ver mas abajo).
 *
 * Todo cuelga de la clase del <main> de cada pagina, asi que no alcanza a
 * ninguna otra pantalla. Es la leccion del cambio global que piso el carrito.
 * -------------------------------------------------------------------------- */

@font-face {
    font-family: 'DS Mellifret';
    src: url('../../fonts/MELLIFRET.TTF') format('truetype');
    font-display: swap;
}

/* --- RAIZ ------------------------------------------------------------------ */

:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente, .main-libroreclamos) {
    background: var(--rd-bg, #F3EAE1);
    color: var(--rd-ink-2, #6B5346);
    padding-bottom: 72px;
}

/* La linea punteada animada. Son decoracion, no contenido: el contenido de
   cada pagina se queda entero. */
:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente, .main-libroreclamos) img[src*="gif/linea-animacion"] {
    display: none !important;
}

/* --- TITULOS: LA SCRIPT DE SIEMPRE ----------------------------------------- */

:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente, .main-libroreclamos) :is(.font-mellifret, .font-mellifret span) {
    font-family: 'DS Mellifret', var(--rd-serif) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/* El banner traia 48-72 px de margen debajo, y cada seccion suma su propio
   aire: entre la foto y el primer texto quedaban 130 px. Se deja solo el de
   la seccion. */
:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente) .banner-repeat {
    margin-bottom: 0 !important;
}

/* El titulo blanco va sobre fotos claras (el celeste de Nosotros, el
   amarillo de Costos): una sombra suave lo despega sin cambiar la foto. */
:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente) .title-banner-repeat h1 {
    text-shadow: 0 2px 18px rgba(62, 42, 32, .28);
}
/* La bajada blanca de Como comprar y Formas de pago cae sobre el piso blanco
   de la foto y no se leia. */
:is(.main-como-comprar, .main-formasdepago, .main-terminos-y-condiciones) .title-banner-repeat p {
    text-shadow: 0 1px 3px rgba(62, 42, 32, .55), 0 0 18px rgba(62, 42, 32, .35);
    font-weight: 600;
}

/* Las bajadas de los banners son blancas. Van despues de la regla general de
   parrafos (mas abajo) con mas especificidad, para que esa no las pinte de
   marron. Terminos traia ademas `padding: 0 304px`, que la dejaba en una
   columna de 150 px que se salia de la foto. */
:is(.main-como-comprar, .main-formasdepago, .main-terminos-y-condiciones) .banner-repeat .title-banner-repeat p {
    color: #fff !important;
    padding: 0 24px !important;
    max-width: 820px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Lo que era Brandon negrita (rotulos en mayuscula) pasa a la negrita de la
   sans del sitio, que es la que mas se le parece. */
:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente, .main-libroreclamos) .font-brandonB {
    font-family: var(--rd-sans) !important;
    font-weight: 700 !important;
}

/* --- TEXTO ----------------------------------------------------------------- */

:is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
    .main-terminos-y-condiciones, .main-ayudaalcliente, .main-libroreclamos) p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--rd-ink-2, #6B5346);
}

/* Los rotulos de seccion (ELIGE TU REGALO, TARJETA DE CREDITO...). Vienen como
   h1/h2 desde el editor del panel; se igualan todos. */
.main-como-comprar .icons-como-comprar h1,
.main-formasdepago .info-formasdepago h2,
.main-libroreclamos .titulorecla {
    font-family: var(--rd-sans) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rd-ink, #3E2A20) !important;
    margin: 0 0 12px;
    line-height: 1.3;
}

/* --- COMO COMPRAR ----------------------------------------------------------- */
/* Los tres pasos, uno al lado del otro con su numero, en vez de una columna
   con 300 px de linea punteada entre paso y paso. */

.main-como-comprar .icons-como-comprar {
    padding: 64px 24px 0;
}
.main-como-comprar .icons-como-comprar > .row {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: stretch !important;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    counter-reset: paso;
}
.main-como-comprar .icons-como-comprar > .row > .col {
    flex: 1 1 0;
    max-width: none;
    margin: 0;
    padding: 34px 28px 30px;
    background: var(--rd-white, #fff);
    border: 1px solid var(--rd-line-2, #E4D8CE);
    border-radius: 16px;
    counter-increment: paso;
    opacity: 1 !important;
}
.main-como-comprar .icons-como-comprar > .row > .col::before {
    content: counter(paso);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--rd-bg-warm, #F7E9E2);
    color: var(--rd-accent, #B4462F);
    font-family: var(--rd-serif);
    font-size: 20px;
}
.main-como-comprar .icons-como-comprar p {
    margin: 0;
    padding: 0 !important;
}

/* --- NOSOTROS Y TRABAJA CON NOSOTROS ---------------------------------------- */

.main-nosotros .sct-intro-nosotros {
    padding: 64px 24px 24px;
    max-width: 820px;
    margin: 0 auto;
}
.main-nosotros .sct-intro-nosotros h1.text-grande,
.main-nosotros .container h1.text-grande {
    font-size: 30px !important;
    color: var(--rd-ink, #3E2A20) !important;
    margin-bottom: 4px;
}
.main-nosotros .sct-intro-nosotros h1.color-beige,
.main-nosotros .container h1.color-beige {
    font-size: 22px !important;
    line-height: 1.3;
    color: var(--rd-brown, #8B5E34) !important;
    margin-bottom: 18px;
}
.main-nosotros .sct-intro-nosotros h1.text-two {
    font-size: 30px !important;
    color: var(--rd-accent-dot, #EFA48D) !important;
    margin: 10px 0 0;
}
.main-nosotros .sct-intro-nosotros h1.text-two .text-two-oscuro {
    font-size: 44px !important;
    color: var(--rd-brown, #8B5E34) !important;
}
.main-nosotros .sct-description-nosotros {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 24px 0;
}
.main-nosotros .sct-description-nosotros .p-md-5 {
    padding: 8px 24px 0 0 !important;
    font-size: 15.5px;
    line-height: 1.8;
}
/* El logo de la firma es un PNG con fondo blanco: con multiply el blanco toma
   el crema. Para que el fundido llegue al fondo de la pagina, el bloque no
   puede ser su propio contexto de apilamiento, y la animacion de entrada
   (fadeInLeftShort) lo era por el transform. Se queda quieto. */
.main-nosotros .sct-description-nosotros .animated {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}
.main-nosotros .sct-description-nosotros p img {
    mix-blend-mode: multiply;
    margin-top: 6px;
}
.main-nosotros .img-celebration-nosotros img {
    border-radius: 16px;
}

/* Trabaja con nosotros usa los colores de Bootstrap tal cual: azul en los
   iconos y en el boton. Se pasan a los de la marca. */
.main-nosotros > .container {
    padding-top: 56px !important;
}
.main-nosotros .container .lead {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 32px;
    font-size: 17px;
}
.main-nosotros .container h3 {
    font-size: 23px !important;
}
.main-nosotros .container h5 {
    font-size: 19px !important;
}
.main-nosotros .container h3,
.main-nosotros .container h4,
.main-nosotros .container h5 {
    font-family: var(--rd-serif) !important;
    color: var(--rd-ink, #3E2A20);
    font-weight: 500;
}
.main-nosotros .container .text-primary {
    color: var(--rd-accent, #B4462F) !important;
}
.main-nosotros .container .bg-light {
    background: var(--rd-white, #fff) !important;
    border: 1px solid var(--rd-line-2, #E4D8CE);
    border-radius: 16px !important;
}
.main-nosotros .container .btn-primary {
    background: var(--rd-ink, #3E2A20) !important;
    border-color: var(--rd-ink, #3E2A20) !important;
    border-radius: 999px !important;
    padding: 12px 30px;
    font-size: 16px;
}
.main-nosotros .container .btn-primary:hover {
    background: var(--rd-accent-dark, #8E3522) !important;
    border-color: var(--rd-accent-dark, #8E3522) !important;
}

/* --- FORMAS DE PAGO --------------------------------------------------------- */

.main-formasdepago .info-formasdepago {
    max-width: 1100px;
    margin: 0 auto 0 !important;
    padding: 56px 24px 0;
}
.main-formasdepago .info-formasdepago > .row {
    justify-content: center !important;
    gap: 24px;
    margin: 0;
}
.main-formasdepago .info-formasdepago > .row > .col {
    flex: 1 1 0;
    max-width: none;
    padding: 32px 28px;
    background: var(--rd-white, #fff);
    border: 1px solid var(--rd-line-2, #E4D8CE);
    border-radius: 16px;
}
.main-formasdepago .info-formasdepago > .row > .col h2:not(:first-child) {
    margin-top: 26px;
}
.main-formasdepago .content-img-credito {
    gap: 14px;
    justify-content: center !important;
    flex-wrap: wrap;
}
.main-formasdepago .img-creditos {
    max-height: 40px;
    width: auto;
}
.main-formasdepago .cuenta {
    font-size: 15px;
    color: var(--rd-ink, #3E2A20);
}
.main-formasdepago .info-formasdepago > .row > .col-12.m-auto {
    flex-basis: 100%;
    max-width: 760px;
    padding: 8px 0 0;
}
.main-formasdepago .info-formasdepago ul li span {
    font-size: 15px;
}

/* --- COSTOS DE ENVIO --------------------------------------------------------- */

.main-costodeenvio .sct-buscar-distrito {
    max-width: 1100px;
    margin: 48px auto 0;
    padding: 28px;
    background: var(--rd-white, #fff);
    border: 1px solid var(--rd-line-2, #E4D8CE);
    border-radius: 16px;
}
/* El selector de distrito con el mismo borde fino y redondeado que los
   campos del Libro de reclamaciones; tenia un marco oscuro de 1 px recto. */
.main-costodeenvio .sct-buscar-distrito .select select {
    border: 1px solid var(--rd-line-3, #D8BCAE) !important;
    border-radius: 10px !important;
    background: var(--rd-white, #fff) !important;
}
.main-costodeenvio .sct-buscar-distrito thead {
    background: var(--rd-bg-soft, #FBF6F1);
}
.main-costodeenvio .sct-buscar-distrito h3 {
    font-family: var(--rd-sans) !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .08em;
    color: var(--rd-ink, #3E2A20);
}
.main-costodeenvio .sct-description-costosdeenvio {
    max-width: 1100px;
    margin: 36px auto 0;
    padding: 0 24px;
}
/* La vista trae `.color-orange-dulce li span { font-size: 18px }` en linea: a
   ese tamaño la lista era mas grande que cualquier titulo de la pagina. */
.main-costodeenvio .sct-description-costosdeenvio .color-orange-dulce li span {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--rd-ink-2, #6B5346);
}
.main-costodeenvio .sct-description-costosdeenvio li {
    margin-bottom: 10px;
}

/* --- TERMINOS Y AYUDA: ACORDEONES ------------------------------------------- */
/*
 * POR QUE SALIAN ABIERTOS. index.css trae
 * `.no-js .accordionItem.is-collapsed { height: auto }`, el respaldo para
 * navegadores sin JavaScript. En produccion algo quita la clase `no-js` del
 * <html>; en QA ya no, porque esa pieza dejo de cargarse con el JS agrupado.
 * El acordeon funciona igual, pero la regla de respaldo lo dejaba todo
 * desplegado: Terminos media 5300 px en PC y 11500 en el telefono.
 *
 * Aqui se vuelve a cerrar con una regla mas especifica. El JavaScript del
 * acordeon (accordions.js) quita `is-collapsed` al abrir, asi que sigue
 * funcionando.
 */
:is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordionItem.is-collapsed {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.main-terminos-y-condiciones > section:not(.banner-repeat),
.main-ayudaalcliente .sct-accordions-preguntas {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px 0;
}
.main-terminos-y-condiciones .accordion,
.main-ayudaalcliente .accordion {
    background: var(--rd-white, #fff);
    border: 1px solid var(--rd-line-2, #E4D8CE);
    border-radius: 16px;
    padding: 8px 0;
}
.main-terminos-y-condiciones .accordion dl,
.main-ayudaalcliente .accordion dl {
    margin: 0;
    padding-left: 0 !important;
    border-left: 0 !important;
}
.main-terminos-y-condiciones .accordion dt + dd,
.main-ayudaalcliente .accordion dt {
    border-top: 1px solid var(--rd-line, #EFE3D9);
}
.main-terminos-y-condiciones .accordion dt:first-child,
.main-ayudaalcliente .accordion dt:first-child {
    border-top: 0;
}
.main-terminos-y-condiciones .accordion dt + dd {
    border-top: 0;
}
.main-terminos-y-condiciones .accordion dt:not(:first-child) {
    border-top: 1px solid var(--rd-line, #EFE3D9);
}
:is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordion .accordionTitle,
:is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordion .accordionTitle-ayuda {
    padding: 18px 28px;
    font-family: var(--rd-sans) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--rd-ink, #3E2A20);
}
:is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordion dd,
:is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordion .accordion-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--rd-ink-2, #6B5346);
}
.main-terminos-y-condiciones .accordion dd.is-expanded {
    padding: 0 28px 20px;
}
/* Las preguntas de Ayuda son un segundo nivel dentro de cada tema. */
.main-ayudaalcliente .accordion ul.accordionItem {
    margin: 0;
    padding-left: 28px;
}
.main-ayudaalcliente .accordion ul.accordionItem.is-expanded {
    padding-bottom: 14px;
}
.main-ayudaalcliente .accordion ul.accordionItem li a {
    font-family: var(--rd-sans) !important;
    font-size: 15px;
    font-weight: 600;
    color: var(--rd-ink, #3E2A20);
    padding: 10px 28px 10px 0;
    display: block;
}
.main-ayudaalcliente .accordion ul.accordionItem > div.is-expanded {
    padding: 0 28px 12px 0;
}

/* El texto de presentacion de Ayuda: ya no en naranja, que pesaba mas que las
   propias preguntas. Las mayusculas se quedan: estan escritas asi en el
   panel, no las pone el CSS, y pasarlas a minuscula con text-transform
   dejaria "dulce sorpresa" en minuscula. Se baja el tamaño y se abre el
   espaciado para que no griten. */
/* La hoja vieja le pone al .container-fluid un ancho fijo (699 px en PC) mas
   fuerte que esta regla sin !important: el recuadro quedaba corrido a la
   izquierda en todos los anchos. */
.main-ayudaalcliente .sct-accordions-preguntas :is(.container, .container-fluid) {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.main-ayudaalcliente .sct-text-medio {
    margin-bottom: 0 !important;
    padding-top: 48px;
}
.main-ayudaalcliente .sct-text-medio p {
    font-family: var(--rd-sans) !important;
    font-weight: 600 !important;
    color: var(--rd-ink-2, #6B5346) !important;
    font-size: 13.5px;
    letter-spacing: .05em;
    line-height: 1.9;
    margin-top: 14px;
}
.main-terminos-y-condiciones .title-p {
    max-width: 760px;
    margin: 0 auto;
}

/* --- LIBRO DE RECLAMACIONES -------------------------------------------------- */

/* El padding de arriba NO se toca: esta pagina no tiene banner y el <main>
   arranca en y=0, debajo de la cabecera fija. Ese padding es lo que deja el
   titulo a la vista; al bajarlo, el titulo quedo tapado por el menu. */
.main-libroreclamos .title-reclamos {
    padding-bottom: 8px !important;
}
.main-libroreclamos .title-reclamos h1 {
    font-size: 52px !important;
    color: var(--rd-brown, #8B5E34) !important;
}
.main-libroreclamos .title-reclamos p {
    max-width: 720px;
    margin: 6px auto 0;
}
.main-libroreclamos .formulario-libro {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 36px;
    background: var(--rd-white, #fff);
    border: 1px solid var(--rd-line-2, #E4D8CE);
    border-radius: 16px;
}
.main-libroreclamos .formulario-libro .form-control {
    background: var(--rd-white, #fff) !important;
    border: 1px solid var(--rd-line-2, #E4D8CE) !important;
    border-radius: 10px !important;
}
.main-libroreclamos .formulario-libro .form-control:focus {
    border-color: var(--rd-brown, #8B5E34) !important;
    box-shadow: 0 0 0 3px rgba(139, 94, 52, .12) !important;
}
/* Al escribir, la etiqueta sube y queda montada sobre el borde del campo: la
   linea la tachaba ("se ve mal", 15/10). Fondo blanco solido detras del texto
   para que corte el borde, como un fieldset. */
.main-libroreclamos .formulario-libro .bmd-form-group:is(.is-focused, .is-filled) > .bmd-label-floating {
    background: var(--rd-white, #fff);
    padding: 0 6px;
    margin-left: -6px;
    line-height: 1.3;
    height: auto !important;
    bottom: auto !important;
    border-radius: 4px;
    z-index: 2;
}
/* Los radios llevaban una franja blanca de fondo que, sobre el crema, se leia
   como un campo vacio. Dentro de la tarjeta blanca ya no hace falta. */
.main-libroreclamos .formulario-libro .radio {
    background: transparent !important;
}
.main-libroreclamos .formulario-libro button,
.main-libroreclamos .formulario-libro input[type="submit"] {
    border-radius: 999px !important;
    background: var(--rd-ink, #3E2A20) !important;
    border-color: var(--rd-ink, #3E2A20) !important;
}
.main-libroreclamos .sct-description-reclamo ~ section,
.main-libroreclamos .sct-description-reclamo > p,
.main-libroreclamos > section:last-child {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

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

@media (max-width: 991px) {
    .main-como-comprar .icons-como-comprar > .row {
        flex-direction: column !important;
        gap: 16px;
    }
    .main-formasdepago .info-formasdepago > .row > .col {
        flex-basis: 100%;
    }
}
@media (max-width: 767px) {
    :is(.main-nosotros, .main-como-comprar, .main-formasdepago, .main-costodeenvio,
        .main-terminos-y-condiciones, .main-ayudaalcliente, .main-libroreclamos) {
        padding-bottom: 48px;
    }
    /* index.css deja estas secciones con padding 0 en el telefono, con mas
       especificidad que la de arriba: las tarjetas quedaban pegadas a la
       foto del banner. */
    .main-como-comprar .icons-como-comprar,
    .main-formasdepago .info-formasdepago,
    .main-nosotros .sct-intro-nosotros {
        padding: 32px 16px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        /* Bootstrap les deja un ancho fijo (100% menos el margen de 15 px
           que se les quita arriba): sin esto la seccion quedaba corrida a
           la izquierda, con 16 px de un lado y 46 del otro. */
        width: auto !important;
    }
    .main-formasdepago .info-formasdepago > .row {
        gap: 16px;
    }
    .main-formasdepago .info-formasdepago > .row > .col {
        padding: 26px 20px !important;
    }
    .main-formasdepago .info-formasdepago > .row > .col-12.m-auto {
        padding: 8px 4px 0 !important;
    }
    /* La bajada de Formas de pago es un parrafo entero: en la foto de 244 px
       del telefono se salia por abajo. */
    .main-formasdepago .banner-repeat .title-banner-repeat p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        padding: 0 16px !important;
    }
    .main-como-comprar .icons-como-comprar > .row > .col {
        padding: 26px 22px 24px;
    }
    .main-nosotros .sct-intro-nosotros h1.text-two .text-two-oscuro {
        font-size: 36px !important;
    }
    .main-nosotros .sct-description-nosotros .p-md-5 {
        padding: 0 !important;
    }
    .main-nosotros .img-celebration-nosotros {
        margin-top: 24px;
    }
    /* index.css deja la tarjeta sin relleno y la fila de Bootstrap con -15 px
       a cada lado: el camion, el selector y la tabla tocaban el borde y se
       pasaban 28 px por la derecha. */
    .main-costodeenvio .sct-buscar-distrito {
        width: auto !important;
        max-width: none !important;
        margin: 28px 16px 0 !important;
        padding: 22px 18px 6px !important;
    }
    .main-costodeenvio .sct-buscar-distrito > .row {
        margin: 0 !important;
    }
    .main-costodeenvio .sct-buscar-distrito > .row > [class*="col"] {
        padding: 0 !important;
        border: 0 !important;
    }
    .main-costodeenvio .sct-buscar-distrito > .row > [class*="col"]:first-child {
        margin-bottom: 20px;
    }
    .main-costodeenvio .sct-buscar-distrito .img-cst-car {
        width: 64px;
    }
    .main-costodeenvio .sct-buscar-distrito h3 {
        font-size: 13px;
    }
    .main-costodeenvio .sct-description-costosdeenvio {
        width: auto !important;
        margin: 28px 0 0 !important;
        padding: 0 18px !important;
        max-width: none !important;
    }
    .main-costodeenvio .sct-description-costosdeenvio ul {
        padding-left: 18px !important;
    }
    .main-terminos-y-condiciones > section:not(.banner-repeat),
    .main-ayudaalcliente .sct-accordions-preguntas {
        padding: 28px 16px 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }
    /* La fila de Bootstrap trae -15 px a cada lado y el texto llegaba al
       borde de la pantalla. */
    .main-nosotros .sct-intro-nosotros > .row,
    .main-nosotros .sct-description-nosotros > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .main-nosotros .sct-intro-nosotros h1.text-two {
        margin-bottom: 8px !important;
    }
    .main-nosotros .sct-description-nosotros {
        padding: 16px 16px 0 !important;
    }
    :is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordion .accordionTitle,
    :is(.main-terminos-y-condiciones, .main-ayudaalcliente) .accordion .accordionTitle-ayuda {
        padding: 16px 20px;
    }
    .main-ayudaalcliente .accordion ul.accordionItem {
        padding-left: 20px;
    }
    /* En el telefono la cabecera tapaba el titulo: el padding de arriba que
       trae la pagina no alcanza para los 150 px del menu. */
    .main-libroreclamos .title-reclamos {
        padding-top: 48px !important;
    }
    .main-libroreclamos .title-reclamos h1 {
        font-size: 36px !important;
    }
    .main-libroreclamos .formulario-libro {
        width: auto !important;
        margin: 0 12px !important;
        padding: 22px 16px !important;
    }
    .main-libroreclamos .formulario-libro .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .main-libroreclamos .formulario-libro [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* =============================================================================
 * OBSERVACIONES DEL 08/10/2026
 * -------------------------------------------------------------------------- */

/* Nosotros: "mover un poco el logo y agrandar la foto".
   El PNG de la firma trae mucho blanco alrededor del dibujo, asi que a 165 px
   el logo parecia flotar suelto y corrido. Se achica y se arrima a "Atte.",
   alineado con el borde del texto. La foto se come el relleno del marco: era
   de 40 px arriba y 32 a los lados, y la foto quedaba chica dentro. */
.main-nosotros .sct-description-nosotros p img {
    width: 130px !important;
    height: auto !important;
    margin: 2px 0 0 -12px;
}
.main-nosotros .img-celebration-nosotros {
    padding: 14px 14px 10px !important;
}
.main-nosotros .img-celebration-nosotros > div,
.main-nosotros .img-celebration-nosotros img {
    width: 100% !important;
    max-width: none !important;
}
.main-nosotros .img-celebration-nosotros img {
    height: auto !important;
    margin-bottom: 8px !important;
}

/* Formas de pago: "estos logos se ven aplastados". Los archivos de Yape y
   Plin son verticales (80 x 100) y la hoja vieja les fijaba 73 x 40: se
   estiraban a lo ancho. Con contain cada logo se dibuja con su forma. */
.main-formasdepago .content-img-credito .img-creditos {
    width: 73px !important;
    height: 40px !important;
    max-height: none !important;
    object-fit: contain !important;
}
.main-formasdepago .content-img-credito .img-creditos:is([alt="Yape"], [alt="PLIN"]) {
    width: auto !important;
    height: 56px !important;
}

/* Formas de pago: la lista de horarios se quito desde el panel (campo
   «Pie»). formasdepago.php ya no pinta la columna cuando esta vacio. */

@media (max-width: 767px) {
    /* Terminos: "el texto se sale del banner en responsive". La bajada
       ocupaba 132 px y el banner del telefono mide 244: se salia 34 px por
       abajo. Mas chica y mas junta entra entera. */
    .main-terminos-y-condiciones .title-banner-repeat {
        padding-top: 26px !important;
    }
    .main-terminos-y-condiciones .title-banner-repeat h1 {
        font-size: 40px !important;
        line-height: 1 !important;
        margin-bottom: 4px !important;
    }
    .main-terminos-y-condiciones .banner-repeat .title-banner-repeat .title-p {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        letter-spacing: .02em !important;
        margin-top: 4px !important;
        padding: 0 18px !important;
    }
    .main-nosotros .img-celebration-nosotros {
        margin-top: 18px;
    }
}

/* --- /empresas ANTIGUA (10/10/2026) -----------------------------------------
 * La landing corporativa nueva no salio; /empresas sigue con su vista vieja.
 * rediseno.css le cambia el h1 a Newsreader grande con interlineado justo y
 * "Regalos Corporativos" se partia en dos lineas montadas. Se le devuelve su
 * script de siempre y un interlineado que no se monte si parte. Solo #empresas.
 * -------------------------------------------------------------------------- */
main#empresas :is(.font-mellifret, .font-mellifret span) {
    font-family: 'DS Mellifret', var(--rd-serif) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
}