:root{--blue:#24345f;--orange:#ee751c;--yellow:#f8b726;--cream:#f3e7d7;--paper:#fffaf3;--line:#24345f26;--motion-duration:.7s;--motion-distance:18px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--blue);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}img{display:block;max-width:100%}button{color:inherit}h1,h2,h3,h4,p{margin:0}h1,h2{font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;letter-spacing:-.035em;line-height:1.02}h2{font-size:clamp(2.8rem,5.6vw,5.4rem)}h2 em{font-family:Georgia,'Times New Roman',serif;font-weight:400}h3{line-height:1.18}p{line-height:1.7}em{font-style:italic}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.skip{position:fixed;top:-100px;left:20px;z-index:1000;background:var(--blue);color:white;padding:12px}.skip:focus{top:10px}.site-header{height:106px;padding:12px 5%;display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--paper);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);transition:height .25s,box-shadow .25s}.site-header.scrolled{height:82px;box-shadow:0 4px 24px #24345f09}.brand img{width:110px;height:auto}.site-header nav{display:flex;gap:32px;font-size:.9rem;font-weight:600}.site-header nav a{position:relative;padding:10px 0}.site-header nav a:after{content:'';position:absolute;left:0;bottom:2px;width:0;height:2px;background:var(--orange);transition:width .2s}.site-header nav a:hover:after{width:100%}.header-cta{font-size:.88rem;border:1px solid var(--blue);border-radius:40px;padding:12px 20px;display:flex;gap:25px}.header-cta:hover{background:var(--blue);color:white}.menu-toggle{display:none}.hero{position:relative;background:#f3dcb3;min-height:690px;height:calc(100svh - 106px);max-height:920px;overflow:hidden;isolation:isolate}.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}.reference-window{position:absolute;top:0;left:50%;width:max(100%,calc((100svh - 106px) * 2.0415));min-width:1420px;aspect-ratio:1429/700;transform:translateX(-50%);overflow:hidden}.reference-window img{width:100%;height:auto;max-width:none}.poster,.hero-video{position:absolute;width:100%;height:100%;object-fit:cover;object-position:var(--position) center}.hero-video{opacity:0;transition:opacity .3s}.hero-video.ready{opacity:1}.media-overlay{position:absolute;inset:0}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#f3dcb3 0%,#f3dcb3ee 24%,#f3dcb370 45%,transparent 62%);pointer-events:none}.hero-content{position:relative;margin-left:6%;padding-top:clamp(55px,7vh,110px);max-width:610px;width:46%;padding-bottom:105px}.eyebrow{font-size:.73rem;letter-spacing:.17em;font-weight:700;display:block}.hero h1{font-size:clamp(4rem,6.4vw,7rem);margin:24px 0 16px;max-width:600px;line-height:.99}.title-dot{color:var(--orange)}.slogan{font:italic clamp(1.5rem,2.4vw,2.2rem)/1.3 Georgia,'Times New Roman',serif}.hero-description{max-width:345px;font-size:1rem;margin:25px 0 30px}.actions{display:flex;flex-direction:column;align-items:flex-start;gap:20px}.button{border:0;padding:16px 23px;border-radius:4px;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;font-size:.9rem;font-weight:600;transition:transform .2s,background .2s}.primary{background:var(--blue);color:white}.primary:hover{background:#344879;transform:translateY(-2px)}.text-link{font-size:.88rem;font-weight:600;border-bottom:1px solid var(--blue);padding-bottom:5px}.text-link span{margin-left:16px}.hero-bottom{position:absolute;bottom:0;left:0;width:100%;padding:21px 6%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#f3e7d7ed;border-top:1px solid #24345f20;font-size:.65rem;letter-spacing:.15em;font-weight:700}.hero-bottom a{letter-spacing:.03em;font-size:.78rem}.hero-bottom a span{margin-left:16px;font-size:1.2rem}.section-pad{padding:85px 6% 100px}.section-top{display:flex;justify-content:space-between;gap:25px;align-items:flex-start;border-top:1px solid var(--line);padding-top:20px}.section-top p{font-size:.85rem}.section-top>span:last-child:not(:first-child){font-size:.68rem;letter-spacing:.1em}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin:48px 0 52px}.section-heading>p{max-width:280px;font-size:.93rem}.product-group{margin-top:45px}.group-heading{display:flex;align-items:center;gap:24px;margin-bottom:20px}.group-heading h3{font-size:1.12rem}.group-heading>span{font-size:.82rem;color:#536078}.rail-controls{display:flex;gap:8px;margin-left:auto}.rail-controls button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent}.rail-controls button:hover{background:var(--blue);color:white}.product-rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#24345f40 transparent;padding:0 0 18px}.product-card{flex:0 0 calc((100% - 66px)/4);min-width:238px;scroll-snap-align:start}.product-visual{height:260px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:28px;background:var(--cream);transition:transform .4s}.tone-1{background:#eee6d5}.tone-2{background:#f3d8bd}.product-visual img{width:100%;height:100%;object-fit:contain;transition:transform .4s}.product-card:hover .product-visual img{transform:scale(1.05)}.product-number{position:absolute;top:18px;left:23px;font-size:.75rem;letter-spacing:.1em}.product-type{font:400 clamp(2.6rem,3.7vw,4.4rem)/1 Impact,'Arial Narrow',sans-serif;letter-spacing:-.02em}.product-caption{font-size:.58rem;letter-spacing:.13em;margin-top:16px}.weight{position:absolute;bottom:18px;right:18px;border:1px solid #24345f38;border-radius:30px;padding:3px 11px;font-size:.7rem}.product-info{display:grid;grid-template-columns:1fr 35px;align-items:center;padding:18px 0}.product-info h4{font-size:1.2rem;font-weight:600}.product-info>a{font-size:1.35rem;text-align:center}.product-info p{grid-column:1/-1;font-size:.82rem;max-width:220px;margin-top:8px;color:#536078}.essence{background:var(--blue);color:var(--cream)}.essence .section-top{border-color:#f3e7d743}.essence-intro{display:grid;grid-template-columns:1fr 1fr;gap:10%;margin:55px 0 65px}.essence-intro h2{font-size:clamp(2.8rem,5.3vw,5rem)}.essence-intro h2 em{color:var(--yellow)}.essence-copy p{font-size:1rem;line-height:1.85}.signature{display:block;color:var(--yellow);font:italic 1.7rem Georgia,serif;margin-top:27px}.purpose-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%;border-top:1px solid #f3e7d73a;padding:37px 0}.purpose-index{font-size:.67rem;letter-spacing:.15em;color:var(--yellow)}.purpose-grid h3{font:1.7rem Georgia,serif;margin:12px 0}.purpose-grid p{font-size:.91rem;color:#eee3d4}.values{border-top:1px solid #f3e7d73a;padding-top:27px;display:flex;justify-content:space-between;gap:20px;font:italic 1.35rem Georgia,serif}.values span:before{content:'✳';font:1.1rem Arial;color:var(--orange);margin-right:16px}.recipes{background:var(--cream)}.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.recipe-card{border-top:2px solid var(--blue);padding-top:20px}.recipe-number{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:30px}.recipe-number span{font-size:.65rem;letter-spacing:.13em}.recipe-card h3{font:2.2rem/1.1 Georgia,serif;max-width:290px;margin-bottom:20px}.recipe-card>p{font-size:.9rem;min-height:76px;max-width:290px}.recipe-card details{border-top:1px solid var(--line);margin-top:25px}.recipe-card summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px;font-size:.9rem;padding:15px 0;font-weight:600;list-style:none}.recipe-card summary::-webkit-details-marker{display:none}.recipe-card details[open] summary span{transform:rotate(45deg)}.recipe-card ol{font-size:.88rem;padding-left:23px;line-height:1.75}.recipe-card li{margin-bottom:14px}.recipe-photo{width:100%;height:230px;object-fit:cover;margin-bottom:22px}.contact{background:var(--paper)}.contact-grid{display:grid;grid-template-columns:1fr .9fr;gap:10%;margin-top:55px}.contact-copy>p{margin-top:24px;font-size:.93rem}.contact-paths{margin:34px 0}.contact-paths>a{display:block;padding:19px 0;border-bottom:1px solid var(--line);font-size:.96rem;font-weight:600}.contact-paths>a span{display:block;font-size:.61rem;letter-spacing:.14em;margin-bottom:5px;color:#57637a}.contact-paths b{float:right;font-size:1.3rem}.contact-copy address{font-style:normal;font-size:.85rem;margin-top:27px}.contact-copy address>a:first-child{font:1.7rem Georgia,serif}.contact-copy address p{margin-top:10px;max-width:320px}.contact-form{padding:35px;background:var(--cream);align-self:start}.contact-form h3{font:1.5rem/1.3 Georgia,serif;margin-bottom:24px}label{display:block;font-size:.82rem;font-weight:600;margin-bottom:18px}label>span{font-weight:400}input,textarea,select{width:100%;border:1px solid #24345f40;background:#fffaf3;color:var(--blue);padding:11px 12px;border-radius:3px;margin-top:7px;min-width:0}textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.consent{display:flex;align-items:flex-start;gap:10px;font-size:.73rem;line-height:1.6}.consent input{width:17px;height:17px;margin-top:3px;flex:none;accent-color:var(--blue)}.inline-link{padding:0;border:0;background:none;text-decoration:underline;cursor:pointer;font-size:inherit}.contact-form>.button{width:100%}.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.form-status{font-size:.84rem;margin-top:13px}.form-status.error{color:#9e2921}.form-status.success{color:#285b37}.site-footer{padding:38px 6% 25px;background:var(--cream);border-top:1px solid var(--line)}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-bottom:28px}.footer-top img{width:100px;height:auto}.footer-top p{font:italic 1.7rem Georgia,serif}.footer-top>a:last-child{font-size:.85rem}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding-top:23px;font-size:.65rem;color:#465575;padding-bottom:30px}.footer-bottom>div{display:flex;gap:14px;align-items:center}.seed{border:0;background:none;color:var(--orange);padding:7px;font-size:20px;min-width:30px;min-height:32px}.whatsapp-float{position:fixed;z-index:45;bottom:max(20px,env(safe-area-inset-bottom));right:20px;border-radius:50px;background:var(--blue);color:#fff;box-shadow:0 3px 15px #0002;display:flex;align-items:center;gap:9px;padding:15px 19px;font-size:.8rem;transition:transform .2s}.whatsapp-float:hover{transform:translateY(-3px)}dialog{border:0;background:var(--paper);color:var(--blue);width:min(560px,calc(100% - 32px));max-height:85svh;padding:40px;border-radius:8px;box-shadow:0 20px 80px #0003}dialog::backdrop{background:#10234499;backdrop-filter:blur(4px)}dialog h2{font:2rem/1.15 Georgia,serif;margin:10px 0 25px}dialog p{font-size:.92rem;margin-bottom:16px}.dialog-close{position:absolute;right:12px;top:6px;background:none;border:0;font-size:28px;width:36px;height:36px}.reveal{opacity:1}html.motion-ready[data-motion="1"] .reveal{opacity:0;transform:translateY(var(--motion-distance));transition:opacity var(--motion-duration) ease,transform var(--motion-duration) ease}html.motion-ready[data-motion="1"] .reveal.visible{opacity:1;transform:none}button:disabled{opacity:.55;cursor:wait}
@media(min-width:1500px){.reference-window{width:100%;min-height:100%}.hero-content{padding-top:90px}.actions{flex-direction:row;align-items:center}.hero-description{max-width:400px}}
@media(max-width:1100px){.site-header{gap:20px;padding-inline:4%}.site-header nav{gap:20px}.header-cta{padding:10px 14px;gap:12px}.hero-content{width:48%;margin-left:5%}.hero h1{font-size:clamp(3.6rem,7vw,5rem)}.hero:after{background:linear-gradient(90deg,#f3dcb3 0%,#f3dcb3dd 27%,#f3dcb360 49%,transparent 70%)}.reference-window{left:42%}.section-pad{padding-inline:5%}.product-card{flex-basis:calc((100% - 44px)/3)}.contact-grid{gap:6%}.contact-form{padding:25px}.values{font-size:1.1rem}.recipe-card h3{font-size:1.85rem}}
@media(max-width:760px){html{scroll-padding-top:77px}.site-header,.site-header.scrolled{height:78px;padding:8px 5%}.brand img{width:83px}.header-cta{display:none}.menu-toggle{display:flex;gap:12px;align-items:center;background:none;border:1px solid var(--line);padding:8px 12px;border-radius:4px;font-size:.85rem}.site-header nav{display:none;position:absolute;left:0;top:77px;background:var(--paper);width:100%;padding:14px 6% 23px;flex-direction:column;gap:3px;border-bottom:1px solid var(--line);box-shadow:0 12px 20px #24345f15}.site-header nav.open{display:flex}.site-header nav a{padding:11px}.hero{height:auto;min-height:870px;max-height:none;padding-bottom:390px}.hero-content{width:auto;max-width:550px;margin:0;padding:35px 6% 20px}.hero h1{font-size:clamp(3.4rem,13.5vw,5.5rem);max-width:410px;margin-top:18px}.eyebrow{font-size:.65rem}.slogan{font-size:1.7rem}.hero-description{margin:19px 0 23px;max-width:320px;font-size:.93rem}.hero-media{top:auto;height:440px;bottom:46px}.reference-window{min-width:880px;width:880px;left:14%;top:0;transform:translateX(-50%);aspect-ratio:1429/700}.hero:after{background:linear-gradient(#f3dcb3 0 53%,transparent 69%)}.hero-bottom{padding:14px 6%;font-size:.58rem}.hero-bottom>span:last-child{display:none}.hero-bottom a{font-size:.65rem}.actions{gap:16px}.button{font-size:.85rem;padding:14px 20px}.section-pad{padding:55px 6% 65px}.section-top{padding-top:15px}.section-top>p{display:none}.section-top>span:last-child:not(:first-child){font-size:.55rem;max-width:130px;text-align:right}.section-heading{display:block;margin:32px 0}.section-heading>p{margin-top:20px;max-width:330px;font-size:.9rem}h2{font-size:clamp(2.6rem,10.5vw,4rem)}.group-heading{flex-wrap:wrap;gap:8px}.group-heading h3{font-size:1rem}.group-heading>span{font-size:.72rem}.rail-controls{width:100%;justify-content:flex-end;margin-top:-5px}.rail-controls button{width:33px;height:33px}.product-group{margin-top:30px}.product-rail{gap:16px}.product-card{flex-basis:76%;min-width:220px}.product-visual{height:260px}.product-type{font-size:3.4rem}.essence-intro{grid-template-columns:1fr;gap:28px;margin:35px 0}.essence-intro h2{font-size:clamp(2.8rem,10vw,4rem)}.essence-copy p{font-size:.95rem}.purpose-grid{grid-template-columns:1fr;gap:30px;padding:30px 0}.values{flex-direction:column;gap:14px}.recipe-grid{grid-template-columns:1fr;gap:30px}.recipe-number{margin-bottom:20px}.recipe-card>p{min-height:0;max-width:none}.recipe-card h3{font-size:2.15rem;max-width:none}.recipe-card details{margin-top:20px}.contact-grid{grid-template-columns:1fr;gap:35px;margin-top:35px}.contact-form{padding:24px 20px}.footer-top{flex-wrap:wrap;gap:20px}.footer-top p{font-size:1.2rem}.footer-top>a:last-child{width:100%}.footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:65px}.whatsapp-float{padding:13px;right:15px;bottom:max(15px,env(safe-area-inset-bottom))}.whatsapp-float span{display:none}dialog{padding:32px 24px}.form-row{grid-template-columns:1fr;gap:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal,html.motion-ready[data-motion="1"] .reveal{opacity:1;transform:none}}
.reference-window{margin-left:var(--reference-shift,0px)}

/* Dely Nativa 1.0.1 — public visual update */
.site-header{background:transparent;border-bottom-color:transparent;margin-bottom:-106px;box-shadow:none}.site-header.scrolled{background:rgba(243,231,215,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:var(--line);box-shadow:0 5px 24px #24345f08}.site-header nav{margin-left:auto;gap:36px}.hero{min-height:800px;height:100svh;max-height:1020px}.hero-content{padding-top:165px;padding-bottom:150px}.reference-window{width:max(100%,calc(100svh * 2.0415))}.hero-bottom{background:transparent;border-top:1px solid #24345f20;padding-right:180px;backdrop-filter:none}.hero-bottom>span:last-child{display:none}.hero h1 .word{display:inline-block;white-space:nowrap;vertical-align:top}.hero h1 .word:first-child{margin-left:0}.hero h1{perspective:700px}.slogan{position:relative;width:fit-content}.slogan:after{content:'';position:absolute;height:2px;left:0;right:0;bottom:-8px;background:linear-gradient(90deg,var(--orange),var(--yellow),transparent);transform-origin:left;opacity:.8}.public-site .button,.public-site .header-cta{border-radius:999px;min-height:54px;padding:8px 8px 8px 24px;gap:22px;overflow:hidden}.public-site .button>span[aria-hidden]{display:grid;place-items:center;background:var(--cream);color:var(--blue);width:38px;height:38px;border-radius:50%;font-size:1.2rem;flex:none;transition:transform .3s,background .3s}.public-site .button:hover>span[aria-hidden]{transform:rotate(45deg);background:var(--yellow)}.public-site .primary{box-shadow:0 7px 24px #24345f15}.public-site .button:hover{transform:translateY(-3px);box-shadow:0 10px 28px #24345f28}.public-site .text-link{display:inline-flex;align-items:center;gap:13px;border:0}.public-site .text-link span{display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;width:32px;height:32px;margin:0;transition:transform .25s}.public-site .text-link:hover span{transform:translate(2px,-2px)}.whatsapp-float{background:#25d366;color:#083b22;box-shadow:0 7px 24px #075e5430}.whatsapp-float:hover{background:#20c55e}.public-site .hero .text-link{color:#075e54}.contact-paths a b{display:grid;place-items:center;background:var(--blue);color:var(--cream);border-radius:50%;width:34px;height:34px;margin-top:-18px;transition:transform .3s}.contact-paths a:hover b{transform:rotate(45deg);background:var(--orange)}.origin-seal{position:absolute;width:142px;height:142px;left:min(42%,620px);bottom:95px;color:var(--blue);z-index:2}.origin-seal svg{display:block;width:100%;overflow:visible}.origin-seal circle{fill:var(--cream);fill-opacity:.65;stroke:currentColor;stroke-opacity:.25;stroke-width:1}.seal-ring{transform-origin:90px 90px}.seal-ring text{font:600 10.5px Arial,sans-serif;fill:currentColor;letter-spacing:1.2px}.wheat-mark{color:#b96808}.essence{position:relative;isolation:isolate;overflow:hidden}.essence:before{content:'';position:absolute;inset:-35%;z-index:-1;background:radial-gradient(ellipse at 65% 40%,#f8b72613,transparent 43%);pointer-events:none}.essence-intro h2 em{display:inline-block;background:linear-gradient(110deg,#f8b726 20%,#fff0b0 45%,#f8b726 65%);background-size:220% 100%;color:transparent;background-clip:text;-webkit-background-clip:text}.purpose-grid article{position:relative;transition:transform .4s}.purpose-grid article:before{content:'';position:absolute;left:0;top:-39px;width:0;height:2px;background:var(--yellow);transition:width .6s}.purpose-grid article:hover:before{width:85%}.purpose-grid article:hover{transform:translateY(-5px)}.values span{display:inline-flex;align-items:center}.values span:before{display:inline-block;transition:transform .6s}.values span:hover:before{transform:rotate(180deg)}.product-info>a{border-radius:50%;border:1px solid var(--line);transition:background .2s,transform .2s}.product-info>a:hover{background:var(--yellow);transform:rotate(45deg)}
html[data-motion="1"] .seal-ring{animation:seal-orbit 28s linear infinite}html[data-motion="1"] .origin-seal:hover .seal-ring{animation-play-state:paused}html[data-motion="1"] .essence-intro h2 em{animation:gold-flow 8s ease-in-out infinite}html[data-motion="1"] .essence:before{animation:essence-glow 14s ease-in-out infinite alternate}html[data-motion="1"] .hero-title-ready .word{animation:word-rise var(--motion-duration) cubic-bezier(.2,.65,.25,1) both;animation-delay:calc(var(--word-index) * 95ms)}html[data-motion="1"] .slogan:after{animation:underline-in 1.2s .5s both}html.motion-ready[data-motion="1"] .purpose-grid .reveal:nth-child(2){transition-delay:.16s}html.motion-ready[data-motion="1"] .essence-copy.reveal{transition-delay:.12s}html.motion-ready[data-motion="1"] .values.reveal.visible span{animation:word-rise var(--motion-duration) both;animation-delay:calc(var(--value-index) * 150ms)}
@keyframes seal-orbit{to{transform:rotate(360deg)}}@keyframes word-rise{from{opacity:0;transform:translateY(var(--motion-distance)) rotateX(-18deg)}to{opacity:1;transform:none}}@keyframes underline-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes gold-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes essence-glow{to{transform:translate(6%,4%)}}
@media(max-width:1100px){.origin-seal{left:47%;width:122px;height:122px;bottom:96px}.hero-content{padding-top:155px}.site-header nav{gap:24px}}
@media(max-width:760px){.site-header,.site-header.scrolled{margin-bottom:-78px}.site-header nav{background:rgba(243,231,215,.96);backdrop-filter:blur(18px)}.hero{min-height:960px;height:auto;max-height:none}.hero-content{padding-top:113px;padding-bottom:40px}.hero h1{font-size:clamp(3.15rem,12.5vw,4.8rem)}.hero-bottom{padding-right:65px;gap:10px}.hero-media{height:440px}.reference-window{width:880px}.origin-seal{width:106px;height:106px;left:20px;bottom:310px}.hero:after{background:linear-gradient(#f3dcb3 0 55%,transparent 69%)}.actions{gap:18px}.public-site .button{padding:8px 8px 8px 19px}.public-site .contact-form .button{padding-left:22px}.hero-description{max-width:290px}.purpose-grid article:before{top:-15px}.hero-bottom>span{font-size:.51rem}.hero-bottom>a{font-size:.61rem}.whatsapp-float{color:#083b22}}
@media(prefers-reduced-motion:reduce){.seal-ring,.essence:before,.essence-intro h2 em,.hero h1 .word,.slogan:after,.values span{animation:none!important}.hero h1 .word{opacity:1;transform:none}}
html[data-motion="0"] .hero h1 .word{opacity:1;transform:none}

.hero-bottom>a{color:#fffaf3;text-shadow:0 1px 5px #102044,0 0 12px #102044}
@media(max-width:760px){.hero-bottom>span{color:#fffaf3;text-shadow:0 1px 5px #102044}}

/* Dely Nativa 1.0.2 — ajustes solicitados del hero */
.site-header{background:rgba(243,231,215,.3);border-bottom-color:#24345f20;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.origin-seal{left:3.5%}
.hero-bottom{padding-right:6%}
@media(max-width:1100px){.origin-seal{left:3.5%}}
@media(max-width:760px){.origin-seal{left:20px}}

/* Dely Nativa 1.0.3 — centrar espiga con texto del hero */
.origin-seal{left:15%}
@media(max-width:1100px){.origin-seal{left:15%}}


/* Dely Nativa 1.0.5 — delta visual acumulado */
html{scroll-padding-top:72px}
.site-header,.site-header.scrolled{
  height:68px;
  padding:6px 4.5%;
  margin-bottom:0;
  background:rgba(243,231,215,.88);
  border-bottom:1px solid rgba(36,52,95,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:none;
}
.brand img{width:88px}
.site-header nav{margin-left:auto;gap:38px;font-size:.86rem}
.site-header nav a{padding:7px 0}
.hero{height:calc(100svh - 68px);min-height:732px;max-height:960px}
.reference-window{width:max(100%,calc((100svh - 68px) * 2.0415))}
.hero-content{padding-top:clamp(48px,6vh,86px)}

/* El sello es un elemento gráfico: centrado dentro del bloque izquierdo del hero. */
.origin-seal{left:27%;transform:translateX(-50%);bottom:88px}

/* Quitar la línea que sobraba al inicio de Nuestras Pastas. */
.products .section-top{border-top:0;padding-top:0}

/* Encendido real del título de historia al acercar el mouse. */
.essence-intro h2{
  position:relative;
  cursor:default;
  transition:color .35s ease,text-shadow .35s ease,filter .35s ease,transform .35s ease;
}
.essence-intro h2 em{transition:text-shadow .35s ease,filter .35s ease,transform .35s ease}
.essence-intro h2:hover{
  color:#fff8e9;
  text-shadow:0 0 8px rgba(255,248,233,.46),0 0 24px rgba(255,248,233,.18);
  filter:brightness(1.12);
  transform:translateY(-1px);
}
.essence-intro h2:hover em{
  text-shadow:0 0 8px rgba(248,183,38,.92),0 0 20px rgba(248,183,38,.68),0 0 38px rgba(238,117,28,.28);
  filter:brightness(1.18) saturate(1.08);
}

/* Recetas: las tres tarjetas quedan alineadas aunque los títulos tengan 1 o 2 líneas. */
.recipe-grid{align-items:stretch}
.recipe-card{display:flex;flex-direction:column;min-height:100%}
.recipe-card .recipe-number{min-height:24px;margin-bottom:28px}
.recipe-card h3{min-height:2.45em;margin-bottom:18px}
.recipe-card>p{min-height:76px;margin-bottom:0}
.recipe-card details{margin-top:auto;border-top:1px solid rgba(36,52,95,.14)}
.recipe-card summary{align-items:center;padding:16px 0}
.recipe-arrow{width:30px;height:30px;display:grid;place-items:center;transition:transform .25s ease;background:transparent}
.recipe-card details[open] .recipe-arrow{transform:rotate(180deg)}

/* Jerarquía tipográfica invertida: ahora el remate fuerte es “tu mesa.” */
.contact-copy #contact-title em{
  display:inline-block;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-style:italic;
  letter-spacing:-.025em;
}
.contact-copy #contact-title strong{
  display:block;
  margin-top:.03em;
  font-family:Impact,'Arial Narrow',sans-serif;
  font-weight:400;
  font-style:normal;
  letter-spacing:-.035em;
  line-height:.98;
}

/* Flechas modernas y sin los “palitos” decorativos del diseño anterior. */
.modern-arrow,.modern-chevron{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rail-controls{gap:10px}
.rail-controls button{
  width:38px;height:38px;border:0;border-radius:12px;background:rgba(36,52,95,.06);
  display:grid;place-items:center;transition:transform .2s ease,background .2s ease,color .2s ease;
}
.rail-controls button:hover{background:var(--blue);color:var(--cream);transform:translateY(-2px)}
.rail-controls .modern-arrow{width:18px;height:18px}
.product-info>a{
  width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:10px;background:rgba(36,52,95,.06);
  transition:transform .22s ease,background .22s ease,color .22s ease;
}
.product-info>a:hover{background:var(--blue);color:var(--cream);transform:translate(2px,-2px)}
.product-info>a .modern-arrow{width:17px;height:17px}
.contact-paths{display:grid;gap:10px}
.contact-paths>a{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;
  padding:16px 18px;border:0;border-radius:14px;background:rgba(36,52,95,.045);
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease;
}
.contact-paths>a:hover{transform:translateX(3px);background:rgba(36,52,95,.075);box-shadow:0 10px 28px rgba(36,52,95,.07)}
.contact-paths>a span{grid-column:1;margin-bottom:3px}
.contact-paths b{grid-column:2;grid-row:1/3;float:none;margin:0;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--blue)}
.contact-paths a:hover b{transform:translate(2px,-2px);background:transparent;color:var(--orange)}
.contact-paths b .modern-arrow{width:19px;height:19px}
.footer-top>a:last-child{display:inline-flex;align-items:center;gap:8px}
.footer-arrow .modern-arrow{width:16px;height:16px}

/* Botón Talavera: limpio en reposo y patrón floral al hover. */
.talavera-button{position:relative;isolation:isolate;overflow:hidden;transition:color .35s ease,background .35s ease,box-shadow .35s ease,transform .25s ease}
.talavera-button::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;transform:scale(1.04);
  background-color:#fff8ec;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48' viewBox='0 0 72 48'%3E%3Cg fill='none' stroke='%2324345f' stroke-width='1.5' opacity='.92'%3E%3Cpath d='M16 24c5-9 13-9 18 0-5 9-13 9-18 0Z'/%3E%3Cpath d='M25 15c9 5 9 13 0 18-9-5-9-13 0-18Z'/%3E%3C/g%3E%3Ccircle cx='25' cy='24' r='2.4' fill='%23ee751c'/%3E%3Cg fill='none' stroke='%2324345f' stroke-width='1.3' opacity='.7'%3E%3Cpath d='M50 10c4-7 10-7 14 0-4 7-10 7-14 0Z'/%3E%3Cpath d='M57 3c7 4 7 10 0 14-7-4-7-10 0-14Z'/%3E%3C/g%3E%3Ccircle cx='57' cy='10' r='1.8' fill='%23f8b726'/%3E%3C/svg%3E");
  background-size:72px 48px;background-position:0 0;transition:opacity .35s ease,transform .45s ease,background-position .7s ease;
}
.talavera-button:hover{color:var(--blue);background:#fff8ec;box-shadow:0 12px 34px rgba(36,52,95,.18)}
.talavera-button:hover::before{opacity:1;transform:scale(1);background-position:12px 0}
.talavera-button .button-label,.talavera-button .button-arrow{position:relative;z-index:1}
.talavera-button .button-arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--blue);transition:transform .3s ease,background .3s ease}
.talavera-button:hover .button-arrow{transform:translate(2px,-2px);background:var(--yellow)}
.talavera-button .button-arrow .modern-arrow{width:18px;height:18px}

/* Acceso de administración: sustituye el punto naranja por espiga transparente a la izquierda. */
.seed{
  position:fixed;left:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:44;
  width:38px;height:48px;padding:4px;border:0;background:transparent;color:rgba(36,52,95,.18);
  opacity:.58;display:grid;place-items:center;transition:opacity .25s ease,color .25s ease,transform .25s ease;
}
.seed:hover,.seed:focus-visible{opacity:.95;color:rgba(36,52,95,.44);transform:translateY(-2px)}
.admin-wheat{width:30px;height:40px;display:block}

@media(max-width:1100px){
  .site-header nav{gap:26px}
  .origin-seal{left:28%;width:120px;height:120px}
}
@media(max-width:760px){
  html{scroll-padding-top:64px}
  .site-header,.site-header.scrolled{height:64px;margin-bottom:0;padding:5px 5%}
  .brand img{width:72px}
  .site-header nav{top:63px}
  .hero{min-height:920px;height:auto;max-height:none}
  .hero-content{padding-top:34px}
  .origin-seal{left:50%;transform:translateX(-50%);bottom:300px;width:100px;height:100px}
  .recipe-card h3,.recipe-card>p{min-height:0}
  .contact-copy #contact-title strong{margin-top:.08em}
  .seed{left:8px;bottom:8px;width:34px;height:42px}
  .admin-wheat{width:26px;height:34px}
}
@media(prefers-reduced-motion:reduce){
  .essence-intro h2,.essence-intro h2 em,.talavera-button::before,.talavera-button,.recipe-arrow{transition:none!important}
}

/* Dely Nativa build marker */
.site-version{opacity:.48;font-size:10px;letter-spacing:.08em;white-space:nowrap;margin-left:.45rem}
@media(max-width:720px){.site-version{font-size:9px;margin-left:.25rem}}


/* =========================================================
   Dely Nativa 1.0.9 — ajustes acumulados aprobados
   ========================================================= */

/* 1) Header: menú distribuido a lo ancho + "sopa dorada" líquida.
   Conserva la barra delgada para no tapar al actor. */
.site-header,.site-header.scrolled{
  height:68px;
  padding:6px 4.5%;
  margin-bottom:0;
  position:sticky;
  top:0;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 12% 10%,rgba(255,247,205,.72),transparent 28%),
    radial-gradient(ellipse at 80% 110%,rgba(173,104,10,.24),transparent 36%),
    linear-gradient(105deg,#e8b957 0%,#f6d98d 30%,#d99b2e 52%,#f7dea0 72%,#dca338 100%);
  background-size:160% 160%,170% 170%,260% 100%;
  border-bottom:1px solid rgba(117,76,14,.18);
  box-shadow:0 3px 16px rgba(116,74,10,.10);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  animation:dn-golden-soup 10s ease-in-out infinite;
}
.site-header::before{
  content:'';
  position:absolute;
  inset:-55% -10%;
  z-index:0;
  pointer-events:none;
  opacity:.48;
  background:
    radial-gradient(ellipse at 18% 50%,rgba(255,255,255,.55) 0 4%,transparent 15%),
    radial-gradient(ellipse at 47% 45%,rgba(255,246,186,.45) 0 5%,transparent 18%),
    radial-gradient(ellipse at 78% 55%,rgba(255,255,255,.38) 0 4%,transparent 16%);
  filter:blur(7px);
  animation:dn-liquid-glints 8s ease-in-out infinite alternate;
}
.site-header::after{
  content:'';
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-18px;
  height:34px;
  z-index:0;
  pointer-events:none;
  opacity:.35;
  background:
    radial-gradient(ellipse at 12% 0%,rgba(255,244,178,.9) 0 18%,transparent 20%),
    radial-gradient(ellipse at 38% 0%,rgba(255,233,145,.72) 0 16%,transparent 18%),
    radial-gradient(ellipse at 67% 0%,rgba(255,244,178,.85) 0 19%,transparent 21%),
    radial-gradient(ellipse at 92% 0%,rgba(255,228,126,.70) 0 16%,transparent 18%);
  animation:dn-liquid-wave 7s ease-in-out infinite alternate;
}
.site-header>*{position:relative;z-index:2}
.brand{flex:0 0 auto}
.brand img{width:88px}
.site-header nav{
  flex:1 1 auto;
  margin-left:clamp(48px,7vw,120px);
  max-width:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:clamp(18px,3.4vw,72px);
  font-size:.86rem;
  font-weight:600;
}
.site-header nav a{
  flex:0 0 auto;
  text-shadow:0 1px 0 rgba(255,255,255,.24);
}
@keyframes dn-golden-soup{
  0%,100%{background-position:0% 45%,100% 55%,0% 50%}
  50%{background-position:22% 55%,78% 45%,100% 50%}
}
@keyframes dn-liquid-glints{
  from{transform:translate3d(-3%,0,0) scale(1)}
  to{transform:translate3d(4%,3%,0) scale(1.05)}
}
@keyframes dn-liquid-wave{
  from{transform:translateX(-2%) scaleY(.9)}
  to{transform:translateX(3%) scaleY(1.08)}
}

/* 2) "Con el sabor de mamá": brillo dorado al acercar el mouse. */
.signature,.slogan{
  transition:filter .3s ease,text-shadow .3s ease,color .3s ease,transform .3s ease;
}
.signature:hover,.signature:focus-visible,
.slogan:hover,.slogan:focus-visible{
  color:#ffd45a;
  filter:brightness(1.18) saturate(1.12);
  text-shadow:
    0 0 7px rgba(255,212,90,.95),
    0 0 18px rgba(248,183,38,.75),
    0 0 34px rgba(238,117,28,.34);
  transform:translateY(-1px);
}

/* 3) Botón Enviar solicitud:
      se retira Talavera y aparecen espigas doradas transparentes al hover. */
.talavera-button{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--blue);
  color:#fff;
  transition:transform .25s ease,box-shadow .35s ease,filter .35s ease,background .35s ease;
}
.talavera-button::before{
  content:'';
  position:absolute;
  inset:-8px -4px;
  z-index:0;
  opacity:0;
  transform:translateX(-10px) scale(1.04);
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='54' viewBox='0 0 128 54'%3E%3Cg fill='none' stroke='%23f8b726' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' opacity='.78'%3E%3Cpath d='M18 50V12M18 23c-8 0-12-4-12-10 7 0 12 4 12 10ZM18 34c-8 0-12-4-12-10 7 0 12 4 12 10ZM18 45c-8 0-12-4-12-10 7 0 12 4 12 10ZM18 23c8 0 12-4 12-10-7 0-12 4-12 10ZM18 34c8 0 12-4 12-10-7 0-12 4-12 10ZM18 45c8 0 12-4 12-10-7 0-12 4-12 10Z'/%3E%3Cpath d='M108 50V12M108 23c-8 0-12-4-12-10 7 0 12 4 12 10ZM108 34c-8 0-12-4-12-10 7 0 12 4 12 10ZM108 45c-8 0-12-4-12-10 7 0 12 4 12 10ZM108 23c8 0 12-4 12-10-7 0-12 4-12 10ZM108 34c8 0 12-4 12-10-7 0-12 4-12 10ZM108 45c8 0 12-4 12-10-7 0-12 4-12 10Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:128px 54px;
  background-position:center;
  background-repeat:repeat-x;
  transition:opacity .35s ease,transform .5s ease,filter .35s ease;
}
.talavera-button::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 15%,rgba(255,222,111,.20) 45%,transparent 72%);
  transform:translateX(-100%);
}
.talavera-button:hover,
.talavera-button:focus-visible{
  background:var(--blue);
  color:#fff;
  filter:brightness(1.04);
  box-shadow:
    0 10px 30px rgba(36,52,95,.22),
    0 0 14px rgba(248,183,38,.32),
    inset 0 0 22px rgba(248,183,38,.10);
  transform:translateY(-2px);
}
.talavera-button:hover::before,
.talavera-button:focus-visible::before{
  opacity:.96;
  transform:translateX(0) scale(1);
  filter:drop-shadow(0 0 5px rgba(248,183,38,.88));
}
.talavera-button:hover::after,
.talavera-button:focus-visible::after{
  opacity:1;
  animation:dn-button-shine .9s ease forwards;
}
.talavera-button .button-label,
.talavera-button .button-arrow{position:relative;z-index:2}
.talavera-button .button-arrow{
  background:var(--cream);
  color:var(--blue);
  transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}
.talavera-button:hover .button-arrow,
.talavera-button:focus-visible .button-arrow{
  background:var(--yellow);
  transform:translate(2px,-2px);
  box-shadow:0 0 12px rgba(248,183,38,.75);
}
@keyframes dn-button-shine{to{transform:translateX(100%)}}

/* 4) Footer: WhatsApp textual eliminado en HTML.
      Privacidad se mantiene libre del botón flotante. */
.footer-top{justify-content:space-between}
.footer-top>p{margin-left:auto}
.footer-bottom>div{
  margin-right:clamp(92px,9vw,150px);
}

/* 5) La versión queda visible para confirmar el build desplegado. */
.site-version{
  opacity:.56;
  font-size:10px;
  letter-spacing:.08em;
  white-space:nowrap;
  margin-left:.45rem;
}

/* Responsive: menú móvil conserva legibilidad y el efecto dorado. */
@media(max-width:1100px){
  .site-header nav{
    margin-left:clamp(30px,4vw,60px);
    gap:clamp(14px,2vw,28px);
  }
}
@media(max-width:760px){
  .site-header,.site-header.scrolled{
    height:64px;
    padding:5px 5%;
  }
  .site-header nav{
    display:none;
    top:63px;
    margin-left:0;
    width:100%;
    background:linear-gradient(110deg,rgba(240,194,91,.97),rgba(250,224,158,.97));
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  .site-header nav.open{display:flex}
  .footer-top>p{margin-left:0}
  .footer-bottom>div{
    margin-right:68px;
    flex-wrap:wrap;
  }
  .site-version{font-size:9px;margin-left:.25rem}
}
@media(prefers-reduced-motion:reduce){
  .site-header,.site-header::before,.site-header::after,
  .talavera-button::after{
    animation:none!important;
  }
}


/* =========================================================
   Dely Nativa 1.0.10 — refinamientos visuales
   ========================================================= */

/* 1) Título historia: TODO el título usa el mismo dorado de "en casa." */
.story-title,
.story-title *,
.story-title strong,
.story-title em,
.story-title span{
  color:#f8b726 !important;
}
.story-title{
  transition:filter .3s ease,text-shadow .3s ease,transform .3s ease;
}
.story-title:hover,
.story-title:focus-within{
  filter:brightness(1.15) saturate(1.1);
  text-shadow:
    0 0 7px rgba(248,183,38,.90),
    0 0 18px rgba(248,183,38,.58),
    0 0 32px rgba(248,183,38,.26);
  transform:translateY(-1px);
}

/* 2) Enviar solicitud: sin flecha, texto perfectamente centrado,
      letras blancas con resplandor para que no se pierdan. */
.talavera-button,
.talavera-button:hover,
.talavera-button:focus-visible{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.talavera-button .button-arrow{
  display:none !important;
}
.talavera-button .button-label{
  position:relative;
  z-index:3;
  width:100%;
  text-align:center;
  color:#fff !important;
  font-weight:700;
  text-shadow:
    0 1px 2px rgba(0,0,0,.36),
    0 0 5px rgba(255,255,255,.82),
    0 0 11px rgba(255,255,255,.42);
  filter:drop-shadow(0 0 2px rgba(255,255,255,.35));
}

/* 3) Header: recuperar apariencia translúcida original.
      El dorado ahora es un fluido transparente en movimiento, no una franja sólida. */
.site-header,
.site-header.scrolled{
  position:sticky;
  top:0;
  isolation:isolate;
  overflow:hidden;
  background:rgba(250,239,220,.72) !important;
  backdrop-filter:blur(10px) saturate(1.08);
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
  border-bottom:1px solid rgba(36,52,95,.10);
  box-shadow:0 3px 14px rgba(36,52,95,.06);
  animation:none !important;
}

/* Capa líquida dorada principal */
.site-header::before{
  content:'';
  position:absolute;
  inset:-80% -22%;
  z-index:0;
  pointer-events:none;
  opacity:.70;
  background:
    radial-gradient(ellipse at 8% 52%,rgba(248,183,38,.34) 0 8%,transparent 22%),
    radial-gradient(ellipse at 28% 40%,rgba(255,213,92,.28) 0 10%,transparent 24%),
    radial-gradient(ellipse at 51% 61%,rgba(216,144,28,.24) 0 9%,transparent 23%),
    radial-gradient(ellipse at 74% 36%,rgba(255,225,132,.30) 0 10%,transparent 25%),
    radial-gradient(ellipse at 93% 58%,rgba(248,183,38,.30) 0 8%,transparent 22%);
  filter:blur(9px);
  transform:translateX(-9%) scale(1.06);
  animation:dn-gold-fluid-pass 9s ease-in-out infinite alternate;
}

/* Reflejo más fino, como luz recorriendo agua */
.site-header::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.36;
  background:
    linear-gradient(
      102deg,
      transparent 0%,
      transparent 16%,
      rgba(255,221,104,.10) 27%,
      rgba(255,240,174,.36) 39%,
      rgba(248,183,38,.13) 49%,
      transparent 62%,
      transparent 100%
    );
  transform:translateX(-75%);
  animation:dn-gold-glint 7.5s ease-in-out infinite;
}

.site-header>*{
  position:relative;
  z-index:3;
}

/* El fluido pasa visualmente por detrás de las letras; el texto queda estable. */
.site-header nav a{
  position:relative;
  z-index:4;
  color:var(--blue);
  text-shadow:0 1px 0 rgba(255,255,255,.42);
}
.site-header nav a::after{
  content:'';
  position:absolute;
  left:50%;
  right:50%;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#f8b726,transparent);
  box-shadow:0 0 7px rgba(248,183,38,.50);
  transition:left .25s ease,right .25s ease,opacity .25s ease;
  opacity:0;
}
.site-header nav a:hover::after,
.site-header nav a:focus-visible::after{
  left:8%;
  right:8%;
  opacity:.9;
}

@keyframes dn-gold-fluid-pass{
  0%{
    transform:translateX(-11%) translateY(-2%) scale(1.04,1.00) rotate(-1deg);
    filter:blur(10px);
  }
  45%{
    transform:translateX(3%) translateY(2%) scale(1.10,.96) rotate(.6deg);
    filter:blur(8px);
  }
  100%{
    transform:translateX(10%) translateY(-1%) scale(1.05,1.04) rotate(-.4deg);
    filter:blur(10px);
  }
}
@keyframes dn-gold-glint{
  0%,12%{transform:translateX(-78%);opacity:.16}
  48%{opacity:.42}
  82%,100%{transform:translateX(82%);opacity:.10}
}

@media(max-width:760px){
  .site-header,
  .site-header.scrolled{
    background:rgba(250,239,220,.82) !important;
  }
}
@media(prefers-reduced-motion:reduce){
  .site-header::before,
  .site-header::after{
    animation:none!important;
  }
}


/* =========================================================
   Dely Nativa 1.0.12 — correctivo quirúrgico
   Base visual recuperada desde 1.0.10
   ========================================================= */

/* A) HISTORIA — tamaño original intacto.
      Sólo unifica "en casa." con el resto: mismo dorado, tipografía,
      grosor y tamaño, sin tocar el font-size del h2. */
#essence-title{
  color:#f8b726 !important;
}
#essence-title em{
  font-family:inherit !important;
  font-style:normal !important;
  font-weight:inherit !important;
  font-size:1em !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
  color:#f8b726 !important;
  -webkit-text-fill-color:#f8b726 !important;
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
}
#essence-title{
  transition:text-shadow .28s ease,filter .28s ease,transform .28s ease;
}
#essence-title:hover{
  filter:brightness(1.13);
  text-shadow:
    0 0 8px rgba(248,183,38,.88),
    0 0 19px rgba(248,183,38,.54),
    0 0 34px rgba(248,183,38,.24);
  transform:translateY(-1px);
}

/* B) ENVIAR SOLICITUD — exactamente 6 espigas:
      3 izquierda + 3 derecha. Centro completamente libre.
      Sin flecha, sin box/cápsula alrededor del texto. */
.talavera-button{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--blue) !important;
  color:#fff !important;
}
.talavera-button::before,
.talavera-button::after{
  content:'';
  position:absolute;
  top:50%;
  width:126px;
  height:48px;
  z-index:1;
  opacity:.82;
  pointer-events:none;
  transform:translateY(-50%);
  transition:opacity .3s ease,filter .3s ease,transform .35s ease;
  background-repeat:no-repeat;
  background-position:center;
  background-size:126px 48px;
}
.talavera-button::before{
  left:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='48' viewBox='0 0 126 48'%3E%3Cg fill='none' stroke='%23f8b726' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8 2)'%3E%3Cpath d='M14 42V6M14 16c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 27c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 38c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 16c7 0 10-4 10-9-6 0-10 4-10 9ZM14 27c7 0 10-4 10-9-6 0-10 4-10 9ZM14 38c7 0 10-4 10-9-6 0-10 4-10 9Z'/%3E%3C/g%3E%3Cg transform='translate(48 2)'%3E%3Cpath d='M14 42V6M14 16c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 27c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 38c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 16c7 0 10-4 10-9-6 0-10 4-10 9ZM14 27c7 0 10-4 10-9-6 0-10 4-10 9ZM14 38c7 0 10-4 10-9-6 0-10 4-10 9Z'/%3E%3C/g%3E%3Cg transform='translate(88 2)'%3E%3Cpath d='M14 42V6M14 16c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 27c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 38c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 16c7 0 10-4 10-9-6 0-10 4-10 9ZM14 27c7 0 10-4 10-9-6 0-10 4-10 9ZM14 38c7 0 10-4 10-9-6 0-10 4-10 9Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.talavera-button::after{
  right:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='48' viewBox='0 0 126 48'%3E%3Cg fill='none' stroke='%23f8b726' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8 2)'%3E%3Cpath d='M14 42V6M14 16c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 27c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 38c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 16c7 0 10-4 10-9-6 0-10 4-10 9ZM14 27c7 0 10-4 10-9-6 0-10 4-10 9ZM14 38c7 0 10-4 10-9-6 0-10 4-10 9Z'/%3E%3C/g%3E%3Cg transform='translate(48 2)'%3E%3Cpath d='M14 42V6M14 16c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 27c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 38c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 16c7 0 10-4 10-9-6 0-10 4-10 9ZM14 27c7 0 10-4 10-9-6 0-10 4-10 9ZM14 38c7 0 10-4 10-9-6 0-10 4-10 9Z'/%3E%3C/g%3E%3Cg transform='translate(88 2)'%3E%3Cpath d='M14 42V6M14 16c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 27c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 38c-7 0-10-4-10-9 6 0 10 4 10 9ZM14 16c7 0 10-4 10-9-6 0-10 4-10 9ZM14 27c7 0 10-4 10-9-6 0-10 4-10 9ZM14 38c7 0 10-4 10-9-6 0-10 4-10 9Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.talavera-button .button-label{
  position:relative;
  z-index:3;
  width:auto !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 auto !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#fff !important;
  font-weight:700;
  text-align:center;
  text-shadow:
    0 1px 2px rgba(0,0,0,.38),
    0 0 5px rgba(255,255,255,.78),
    0 0 10px rgba(255,255,255,.36);
}
.talavera-button .button-arrow{display:none !important}
.talavera-button:hover::before{
  opacity:1;
  filter:drop-shadow(0 0 5px rgba(248,183,38,.92));
  transform:translateY(-50%) translateX(2px);
}
.talavera-button:hover::after{
  opacity:1;
  filter:drop-shadow(0 0 5px rgba(248,183,38,.92));
  transform:translateY(-50%) translateX(-2px);
}
.talavera-button:hover{
  background:var(--blue) !important;
  color:#fff !important;
}

/* C) PEQUEÑAS FORMAS / GRANDES MOMENTOS — sólo efecto de encendido. */
#products-title{
  transition:text-shadow .28s ease,filter .28s ease;
}
#products-title:hover{
  filter:brightness(1.16);
  text-shadow:
    0 0 7px rgba(255,255,255,.66),
    0 0 16px rgba(62,91,164,.42),
    0 0 28px rgba(36,52,95,.20);
}

/* D) HOY COCINAMOS / ALGO QUE NOS UNE — sólo efecto de encendido. */
#recipes-title{
  transition:text-shadow .28s ease,filter .28s ease;
}
#recipes-title:hover{
  filter:brightness(1.16);
  text-shadow:
    0 0 7px rgba(255,255,255,.66),
    0 0 16px rgba(62,91,164,.42),
    0 0 28px rgba(36,52,95,.20);
}

/* E) HAGAMOS LUGAR / EN TU MESA.
      Segunda línea permanece completa: "en tu mesa." */
#contact-title .contact-lastline{
  display:inline-flex;
  align-items:baseline;
  gap:.18em;
  white-space:nowrap;
}
#contact-title .contact-lastline em,
#contact-title .contact-lastline strong{
  display:inline !important;
  margin:0 !important;
}
#contact-title{
  transition:text-shadow .28s ease,filter .28s ease;
}
#contact-title:hover{
  filter:brightness(1.08);
  text-shadow:
    0 0 7px rgba(248,183,38,.66),
    0 0 17px rgba(248,183,38,.38),
    0 0 28px rgba(238,117,28,.16);
}

/* F) WHATSAPP — usar el SVG real existente, no icono genérico.
      Círculo verde, borde blanco fino y sombra limpia. */
.whatsapp-float{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:#25D366 !important;
  color:#fff !important;
  border:3px solid #fff !important;
  box-shadow:
    0 8px 22px rgba(7,94,84,.24),
    0 2px 7px rgba(0,0,0,.12) !important;
  overflow:hidden;
  transition:transform .24s ease,box-shadow .24s ease,filter .24s ease !important;
}
.whatsapp-float span{display:none !important}
.whatsapp-float svg{
  display:block !important;
  width:30px !important;
  height:30px !important;
  color:#fff !important;
}
.whatsapp-float:hover{
  background:#25D366 !important;
  color:#fff !important;
  transform:translateY(-2px) scale(1.035);
  filter:brightness(1.04);
  box-shadow:
    0 10px 26px rgba(7,94,84,.28),
    0 0 12px rgba(37,211,102,.20) !important;
}

/* Privacidad no debe quedar debajo del flotante */
.footer-bottom>div{
  margin-right:82px;
}

@media(max-width:760px){
  .talavera-button::before,
  .talavera-button::after{
    width:96px;
    background-size:96px 42px;
  }
  .talavera-button::before{left:5px}
  .talavera-button::after{right:5px}
  #contact-title .contact-lastline{
    gap:.14em;
  }
  .whatsapp-float{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
  }
  .whatsapp-float svg{
    width:28px !important;
    height:28px !important;
  }
  .footer-bottom>div{
    margin-right:68px;
  }
}


/* =========================================================
   Dely Nativa 1.0.13 — ajustes quirúrgicos
   ========================================================= */

/* 1) Historia: todo el título con la misma letra serif/cursiva
      de "Con el sabor de mamá", conservando tamaño de título. */
#essence-title,
#essence-title em{
  font-family:Georgia,'Times New Roman',serif !important;
  font-style:italic !important;
  font-weight:400 !important;
  letter-spacing:-.025em !important;
  color:#f8b726 !important;
  -webkit-text-fill-color:#f8b726 !important;
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
}
#essence-title em{
  font-size:1em !important;
  line-height:inherit !important;
}
#essence-title:hover{
  filter:brightness(1.14);
  text-shadow:
    0 0 7px rgba(248,183,38,.92),
    0 0 18px rgba(248,183,38,.58),
    0 0 32px rgba(248,183,38,.26);
}

/* 2) Recetas: el encendido es dorado, nunca azul. */
#recipes-title:hover{
  filter:brightness(1.08) !important;
  text-shadow:
    0 0 7px rgba(248,183,38,.92),
    0 0 17px rgba(248,183,38,.58),
    0 0 30px rgba(248,183,38,.24) !important;
}

/* 3) Contacto: "tu mesa." usa exactamente la misma tipografía
      que "Hagamos lugar en" y permanece en la misma línea. */
.contact-copy #contact-title strong{
  display:inline !important;
  margin:0 !important;
  font-family:Georgia,'Times New Roman',serif !important;
  font-weight:400 !important;
  font-style:italic !important;
  font-size:1em !important;
  letter-spacing:-.025em !important;
  line-height:inherit !important;
}
#contact-title .contact-lastline{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:.16em !important;
  white-space:nowrap !important;
}
#contact-title:hover{
  text-shadow:
    0 0 7px rgba(248,183,38,.90),
    0 0 17px rgba(248,183,38,.54),
    0 0 29px rgba(248,183,38,.22) !important;
}

/* 4) Enviar solicitud:
      estado normal limpio; las seis espigas aparecen SOLO al hover.
      3 izquierda + 3 derecha, sin acercarse al centro. */
.talavera-button::before,
.talavera-button::after{
  opacity:0 !important;
  width:118px !important;
  height:46px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  background-size:118px 45px !important;
  transition:opacity .28s ease,filter .28s ease !important;
}
.talavera-button::before{left:10px !important}
.talavera-button::after{right:10px !important}
.talavera-button:hover::before,
.talavera-button:focus-visible::before,
.talavera-button:hover::after,
.talavera-button:focus-visible::after{
  opacity:1 !important;
  transform:translateY(-50%) !important;
  filter:drop-shadow(0 0 5px rgba(248,183,38,.92)) !important;
}
.talavera-button .button-label{
  position:relative !important;
  z-index:4 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  min-width:0 !important;
  color:#fff !important;
  text-align:center !important;
}

/* 5) WhatsApp: icono interior un poco más pequeño y centrado visualmente,
      con más verde entre el glyph blanco y el borde exterior. */
.whatsapp-float svg{
  width:24px !important;
  height:24px !important;
  transform:translate(-0.5px,0.5px) !important;
  transform-origin:center !important;
}
.whatsapp-float{
  display:grid !important;
  place-items:center !important;
}

@media(max-width:760px){
  .talavera-button::before,
  .talavera-button::after{
    width:88px !important;
    background-size:88px 40px !important;
  }
  .whatsapp-float svg{
    width:23px !important;
    height:23px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.14 — hero + espigas + sello
   ========================================================= */

/* 1) Hero sin velo/tinte: fondo y overlay totalmente transparentes. */
.hero{
  background:transparent !important;
}
.hero::after{
  background:transparent !important;
}
.hero .media-overlay{
  background:transparent !important;
}

/* 2) El sello circular del hero queda fijo en su posición.
      Evita que reglas antiguas lo vuelvan a desplazar. */
.origin-seal{
  left:27% !important;
  bottom:88px !important;
  transform:translateX(-50%) !important;
}
@media(max-width:1100px){
  .origin-seal{
    left:27% !important;
    bottom:88px !important;
    transform:translateX(-50%) !important;
  }
}
@media(max-width:760px){
  .origin-seal{
    left:50% !important;
    bottom:300px !important;
    transform:translateX(-50%) !important;
  }
}

/* 3) Enviar solicitud: las espigas permanecen escondidas hasta hover.
      Tres fijas a la izquierda + tres fijas a la derecha.
      Se anulan animaciones antiguas que las desplazaban al mismo lado. */
.talavera-button::before,
.talavera-button::after{
  opacity:0 !important;
  animation:none !important;
  transition:opacity .28s ease,filter .28s ease !important;
  transform:translateY(-50%) !important;
  top:50% !important;
  width:118px !important;
  height:46px !important;
  background-size:118px 45px !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
}
.talavera-button::before{
  left:10px !important;
  right:auto !important;
}
.talavera-button::after{
  right:10px !important;
  left:auto !important;
}
.talavera-button:hover::before,
.talavera-button:focus-visible::before,
.talavera-button:hover::after,
.talavera-button:focus-visible::after{
  opacity:1 !important;
  animation:none !important;
  transform:translateY(-50%) !important;
  filter:drop-shadow(0 0 5px rgba(248,183,38,.92)) !important;
}
.talavera-button .button-label{
  position:relative !important;
  z-index:5 !important;
}
@media(max-width:760px){
  .talavera-button::before,
  .talavera-button::after{
    width:88px !important;
    height:42px !important;
    background-size:88px 40px !important;
  }
  .talavera-button::before{left:6px !important}
  .talavera-button::after{right:6px !important}
}


/* =========================================================
   Dely Nativa 1.0.17 — glow dorado unificado
   ========================================================= */
:root{
  --dn-title-gold:#f8b726;
  --dn-title-gold-bright:#ffd24d;
}

/* Limpia efectos previos de partes internas para evitar dobles halos. */
#essence-title *,
#recipes-title *,
#products-title *,
#contact-title *,
.hero-copy h1 *,
.editorial-title *{
  text-shadow:none !important;
  filter:none !important;
}

/* "Una historia..." permanece dorado completo y usa un único glow. */
#essence-title,
#essence-title *{
  color:var(--dn-title-gold) !important;
  -webkit-text-fill-color:var(--dn-title-gold) !important;
}

/* Todos los títulos principales comparten exactamente el mismo hover dorado. */
#essence-title,
#recipes-title,
#products-title,
#contact-title,
.hero-copy h1,
.editorial-title{
  transition:
    color .28s ease,
    -webkit-text-fill-color .28s ease,
    text-shadow .28s ease,
    filter .28s ease,
    transform .28s ease !important;
}

#essence-title:hover,
#essence-title:focus-within,
#recipes-title:hover,
#recipes-title:focus-within,
#products-title:hover,
#products-title:focus-within,
#contact-title:hover,
#contact-title:focus-within,
.hero-copy h1:hover,
.hero-copy h1:focus-within,
.editorial-title:hover,
.editorial-title:focus-within{
  color:var(--dn-title-gold-bright) !important;
  -webkit-text-fill-color:var(--dn-title-gold-bright) !important;
  filter:brightness(1.06) saturate(1.06) !important;
  text-shadow:
    0 0 6px rgba(248,183,38,.92),
    0 0 15px rgba(248,183,38,.64),
    0 0 28px rgba(248,183,38,.30) !important;
  transform:translateY(-1px);
}

/* Las partes internas cambian juntas y no generan un segundo resplandor. */
#essence-title:hover *,
#essence-title:focus-within *,
#recipes-title:hover *,
#recipes-title:focus-within *,
#products-title:hover *,
#products-title:focus-within *,
#contact-title:hover *,
#contact-title:focus-within *,
.hero-copy h1:hover *,
.hero-copy h1:focus-within *,
.editorial-title:hover *,
.editorial-title:focus-within *{
  color:var(--dn-title-gold-bright) !important;
  -webkit-text-fill-color:var(--dn-title-gold-bright) !important;
  text-shadow:none !important;
  filter:none !important;
}


/* =========================================================
   Dely Nativa 1.0.18 — reglas finales de glow
   ========================================================= */

/* 1) UNA HISTORIA...: dorado uniforme completo.
      Limpia cualquier brillo/tono distinto de "en casa.". */
#essence-title,
#essence-title *{
  color:#f8b726 !important;
  -webkit-text-fill-color:#f8b726 !important;
  text-shadow:none !important;
  filter:none !important;
}
#essence-title:hover,
#essence-title:focus-within{
  color:#ffd24d !important;
  -webkit-text-fill-color:#ffd24d !important;
  filter:brightness(1.06) saturate(1.06) !important;
  text-shadow:
    0 0 6px rgba(248,183,38,.92),
    0 0 15px rgba(248,183,38,.64),
    0 0 28px rgba(248,183,38,.30) !important;
}
#essence-title:hover *,
#essence-title:focus-within *{
  color:#ffd24d !important;
  -webkit-text-fill-color:#ffd24d !important;
  text-shadow:none !important;
  filter:none !important;
}

/* 2) TÍTULOS AZULES:
      mantienen azul y sólo reciben contorno/glow dorado al hover. */
#products-title,
#recipes-title,
#contact-title,
#products-title *,
#recipes-title *,
#contact-title *{
  color:var(--blue) !important;
  -webkit-text-fill-color:var(--blue) !important;
}

#products-title:hover,
#products-title:focus-within,
#recipes-title:hover,
#recipes-title:focus-within,
#contact-title:hover,
#contact-title:focus-within{
  color:var(--blue) !important;
  -webkit-text-fill-color:var(--blue) !important;
  filter:none !important;
  text-shadow:
    0 0 4px rgba(248,183,38,.96),
    0 0 10px rgba(248,183,38,.72),
    0 0 19px rgba(248,183,38,.34) !important;
}

#products-title:hover *,
#products-title:focus-within *,
#recipes-title:hover *,
#recipes-title:focus-within *,
#contact-title:hover *,
#contact-title:focus-within *{
  color:var(--blue) !important;
  -webkit-text-fill-color:var(--blue) !important;
  text-shadow:none !important;
  filter:none !important;
}

/* 3) ENVIAR SOLICITUD:
      texto blanco limpio, sin glow blanco.
      Las espigas conservan el protagonismo con glow dorado al hover. */
.talavera-button .button-label{
  color:#fff !important;
  text-shadow:none !important;
  filter:none !important;
  box-shadow:none !important;
}
.talavera-button:hover .button-label,
.talavera-button:focus-visible .button-label{
  color:#fff !important;
  text-shadow:none !important;
  filter:none !important;
  box-shadow:none !important;
}

.talavera-button:hover::before,
.talavera-button:focus-visible::before,
.talavera-button:hover::after,
.talavera-button:focus-visible::after{
  opacity:1 !important;
  filter:
    drop-shadow(0 0 4px rgba(248,183,38,.98))
    drop-shadow(0 0 9px rgba(248,183,38,.72)) !important;
}


/* =========================================================
   Dely Nativa 1.0.19 — corrección real de glow heredado
   ========================================================= */

/* REGLA GENERAL:
   Los títulos mantienen su color base y el glow se aplica tanto al h2
   como a cada elemento interno (<em>, <strong>, <span>), para que ninguna
   parte quede apagada. */

/* 1) UNA HISTORIA...
      Todo dorado. Mismo glow exacto en texto directo e hijos. */
#essence-title,
#essence-title *{
  color:#f8b726 !important;
  -webkit-text-fill-color:#f8b726 !important;
  filter:none !important;
}
#essence-title{
  text-shadow:none !important;
}
#essence-title:hover,
#essence-title:focus-within{
  color:#ffd24d !important;
  -webkit-text-fill-color:#ffd24d !important;
  filter:brightness(1.06) saturate(1.06) !important;
  text-shadow:
    0 0 6px rgba(248,183,38,.95),
    0 0 15px rgba(248,183,38,.68),
    0 0 28px rgba(248,183,38,.34) !important;
}
#essence-title:hover *,
#essence-title:focus-within *{
  color:#ffd24d !important;
  -webkit-text-fill-color:#ffd24d !important;
  filter:none !important;
  text-shadow:
    0 0 6px rgba(248,183,38,.95),
    0 0 15px rgba(248,183,38,.68),
    0 0 28px rgba(248,183,38,.34) !important;
}

/* 2) TÍTULOS AZULES:
      Permanecen azules; todos sus hijos reciben el mismo contorno/glow dorado. */
#products-title,
#products-title *,
#recipes-title,
#recipes-title *,
#contact-title,
#contact-title *{
  color:var(--blue) !important;
  -webkit-text-fill-color:var(--blue) !important;
  filter:none !important;
}
#products-title,
#recipes-title,
#contact-title{
  text-shadow:none !important;
}

#products-title:hover,
#products-title:focus-within,
#recipes-title:hover,
#recipes-title:focus-within,
#contact-title:hover,
#contact-title:focus-within{
  color:var(--blue) !important;
  -webkit-text-fill-color:var(--blue) !important;
  filter:none !important;
  text-shadow:
    0 0 4px rgba(248,183,38,.98),
    0 0 10px rgba(248,183,38,.76),
    0 0 19px rgba(248,183,38,.38) !important;
}

#products-title:hover *,
#products-title:focus-within *,
#recipes-title:hover *,
#recipes-title:focus-within *,
#contact-title:hover *,
#contact-title:focus-within *{
  color:var(--blue) !important;
  -webkit-text-fill-color:var(--blue) !important;
  filter:none !important;
  text-shadow:
    0 0 4px rgba(248,183,38,.98),
    0 0 10px rgba(248,183,38,.76),
    0 0 19px rgba(248,183,38,.38) !important;
}

/* 3) HERO PRINCIPAL:
      "El sabor que nace en familia." conserva su color normal y al hover
      cambia completo al dorado definido, incluyendo cualquier hijo interno. */
.hero-copy h1{
  text-shadow:none !important;
}
.hero-copy h1:hover,
.hero-copy h1:focus-within,
.hero-copy h1:hover *,
.hero-copy h1:focus-within *{
  color:#ffd24d !important;
  -webkit-text-fill-color:#ffd24d !important;
  filter:none !important;
  text-shadow:
    0 0 6px rgba(248,183,38,.95),
    0 0 15px rgba(248,183,38,.68),
    0 0 28px rgba(248,183,38,.34) !important;
}

/* 4) BOTÓN ENVIAR SOLICITUD:
      texto blanco limpio; espigas con glow y TODO el box azul con halo dorado. */
.talavera-button .button-label,
.talavera-button:hover .button-label,
.talavera-button:focus-visible .button-label{
  color:#fff !important;
  text-shadow:none !important;
  filter:none !important;
  box-shadow:none !important;
}

.talavera-button{
  transition:
    box-shadow .3s ease,
    transform .25s ease,
    filter .25s ease !important;
}
.talavera-button:hover,
.talavera-button:focus-visible{
  box-shadow:
    0 0 0 1px rgba(248,183,38,.42),
    0 0 10px rgba(248,183,38,.60),
    0 0 22px rgba(248,183,38,.34),
    0 10px 28px rgba(36,52,95,.18) !important;
  transform:translateY(-1px);
}

.talavera-button:hover::before,
.talavera-button:focus-visible::before,
.talavera-button:hover::after,
.talavera-button:focus-visible::after{
  opacity:1 !important;
  filter:
    drop-shadow(0 0 4px rgba(248,183,38,.98))
    drop-shadow(0 0 9px rgba(248,183,38,.76)) !important;
}

/* 5) Seguridad contra reglas viejas que vuelvan a apagar hijos en hover. */
#essence-title:hover *,
#products-title:hover *,
#recipes-title:hover *,
#contact-title:hover *{
  opacity:1 !important;
}


/* =========================================================
   Dely Nativa 1.0.20 — botón WhatsApp con imagen transparente
   ========================================================= */

.whatsapp-float{
  width:60px !important;
  height:60px !important;
  min-width:60px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:16px !important;
  background:
    transparent
    url("whatsapp-icon.png")
    center/contain
    no-repeat !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.16),
    0 0 0 1px rgba(37,211,102,.08) !important;
  overflow:visible !important;
  display:block !important;
  font-size:0 !important;
  line-height:0 !important;
  transition:transform .24s ease,filter .24s ease,box-shadow .24s ease !important;
}

/* El icono ya trae el teléfono y el blanco interior: ocultamos SVG/texto viejo. */
.whatsapp-float svg,
.whatsapp-float span,
.whatsapp-float::before,
.whatsapp-float::after{
  display:none !important;
  content:none !important;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible{
  transform:translateY(-2px) scale(1.035) !important;
  filter:brightness(1.03) saturate(1.03) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 14px rgba(37,211,102,.20) !important;
}

@media(max-width:760px){
  .whatsapp-float{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
  }
}


/* Dely Nativa 1.0.21 — WhatsApp libre, sin cuadro exterior */
.whatsapp-float{
  width:62px !important;
  height:62px !important;
  min-width:62px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:
    transparent
    url("whatsapp-icon.png")
    center/contain
    no-repeat !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible{
  transform:translateY(-2px) scale(1.04) !important;
  filter:brightness(1.04) drop-shadow(0 7px 12px rgba(0,0,0,.18)) !important;
  box-shadow:none !important;
}
@media(max-width:760px){
  .whatsapp-float{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.22 — FIX WhatsApp hover
   Mantener SIEMPRE el icono; hover sólo agranda suavemente.
   ========================================================= */

.whatsapp-float,
.whatsapp-float:hover,
.whatsapp-float:focus-visible,
.whatsapp-float:active{
  background:
    transparent
    url("whatsapp-icon.png")
    center/contain
    no-repeat !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Ningún pseudo-elemento o SVG viejo debe reaparecer. */
.whatsapp-float::before,
.whatsapp-float::after,
.whatsapp-float:hover::before,
.whatsapp-float:hover::after,
.whatsapp-float svg,
.whatsapp-float span{
  display:none !important;
  content:none !important;
}

/* Efecto correcto: sólo escala + sombra del propio icono. */
.whatsapp-float{
  transform:scale(1) !important;
  transition:
    transform .22s ease,
    filter .22s ease !important;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible{
  transform:scale(1.10) !important;
  filter:
    brightness(1.04)
    drop-shadow(0 7px 12px rgba(0,0,0,.20))
    drop-shadow(0 0 7px rgba(37,211,102,.18)) !important;
}

.whatsapp-float:active{
  transform:scale(1.04) !important;
}


/* =========================================================
   Dely Nativa 1.0.23 — fondo sección Productos
   ========================================================= */

/* La ilustración se usa únicamente en la sección #productos. */
#productos{
  position:relative;
  background:
    url("productos-fondo.jpg")
    center top / cover
    no-repeat !important;
}

/* Mantiene el contenido legible sin ocultar la ilustración. */
#productos::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:rgba(255,250,240,.08);
  z-index:0;
}

#productos > *{
  position:relative;
  z-index:1;
}

/* En pantallas angostas, prioriza que el marco siga visible. */
@media(max-width:760px){
  #productos{
    background-position:center top !important;
    background-size:auto 100% !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.24 — fondos Productos + Contacto
   Mostrar marcos completos sin recortar laterales.
   ========================================================= */

/* PRODUCTOS:
   Se prioriza ver el marco floral completo.
   Fondo crema cubre cualquier sobrante si cambia la proporción. */
#productos{
  background-color:#fbf3df !important;
  background-image:url("productos-fondo.jpg") !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
}

/* La capa anterior queda prácticamente transparente para no lavar las flores. */
#productos::before{
  background:rgba(255,250,240,.015) !important;
}

/* CONTACTO:
   Usa el nuevo marco botánico completo, sin recortar los laterales. */
#contacto{
  position:relative;
  background-color:#fbf3df !important;
  background-image:url("contacto-fondo.jpg") !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
}

/* Si la sección tiene pseudo-capa previa, no debe tapar la ilustración. */
#contacto::before{
  pointer-events:none;
  background:rgba(255,250,240,.015) !important;
}

/* El contenido permanece por encima del fondo. */
#contacto > *{
  position:relative;
  z-index:1;
}

/* En móvil se conserva el marco completo, aunque cambie la proporción. */
@media(max-width:760px){
  #productos,
  #contacto{
    background-position:center center !important;
    background-size:100% 100% !important;
  }
}


/* Dely Nativa 1.0.25 — Productos usa el mismo marco floral de Contacto */
#productos{
  background-image:url("productos-fondo.jpg") !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
}


/* =========================================================
   Dely Nativa 1.0.26 — colores de fondos en tarjetas Producto
   Colores tomados de las muestras proporcionadas.
   ========================================================= */

#productos .product-visual{
  background:transparent !important;
}

/* 1 naranja */
#productos .product-card:nth-child(5n+1) .product-visual{
  background:#fe8f0a !important;
}

/* 2 turquesa */
#productos .product-card:nth-child(5n+2) .product-visual{
  background:#379bb3 !important;
}

/* 3 rojo */
#productos .product-card:nth-child(5n+3) .product-visual{
  background:#f64117 !important;
}

/* 4 verde */
#productos .product-card:nth-child(5n+4) .product-visual{
  background:#21902f !important;
}

/* 5 amarillo */
#productos .product-card:nth-child(5n+5) .product-visual{
  background:#f7f401 !important;
}

/* Conserva la imagen protagonista y mejora separación visual */
#productos .product-visual img{
  position:relative;
  z-index:2;
  filter:drop-shadow(0 8px 14px rgba(36,52,95,.10));
}

#productos .product-visual .weight,
#productos .product-visual .product-number,
#productos .product-visual .product-caption{
  position:absolute;
  z-index:3;
}

/* El chip de peso queda limpio encima de cualquier color */
#productos .product-visual .weight{
  background:rgba(255,250,243,.84);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}


/* =========================================================
   Dely Nativa 1.0.27
   Productos: frases editoriales tipo poema
   Nosotros: Gradient Wave azul fuerte, limitado a la sección
   ========================================================= */

/* PRODUCTOS — pequeñas frases con intención editorial */
#productos .section-top > p{
  margin:0;
  max-width:360px;
  font-family:Georgia,'Times New Roman',serif !important;
  font-style:italic;
  font-size:clamp(20px,1.75vw,29px);
  line-height:1.42;
  letter-spacing:-.015em;
  color:var(--blue);
  text-align:left;
  text-wrap:balance;
}

#productos .section-top > p::before{
  content:'“';
  display:inline-block;
  margin-right:.08em;
  color:#f8b726;
  font-size:1.25em;
  line-height:.8;
  vertical-align:-.08em;
}

#productos .section-top > p::after{
  content:'”';
  color:#f8b726;
  font-size:1.25em;
  line-height:.8;
  vertical-align:-.08em;
}

#productos .section-heading > p{
  max-width:520px;
  margin:1.1rem auto 0;
  font-family:Georgia,'Times New Roman',serif !important;
  font-style:italic;
  font-size:clamp(22px,2vw,34px);
  line-height:1.38;
  letter-spacing:-.018em;
  color:var(--blue);
  text-align:center;
  text-wrap:balance;
}

#productos .section-heading > p::before,
#productos .section-heading > p::after{
  content:'';
  display:inline-block;
  width:34px;
  height:1px;
  margin:0 .65em .22em;
  vertical-align:middle;
  background:linear-gradient(90deg,transparent,#f8b726);
  opacity:.8;
}
#productos .section-heading > p::after{
  background:linear-gradient(90deg,#f8b726,transparent);
}

/* Hover muy sutil: el texto sigue azul y sólo recibe una luz dorada fina */
#productos .section-top > p,
#productos .section-heading > p{
  transition:text-shadow .28s ease,transform .28s ease;
}
#productos .section-top > p:hover,
#productos .section-heading > p:hover{
  text-shadow:
    0 0 4px rgba(248,183,38,.50),
    0 0 11px rgba(248,183,38,.20);
  transform:translateY(-1px);
}

/* NOSOTROS — contenedor de la ola, sin cambiar layout */
#nosotros{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#071d52 !important;
}

/* Canvas creado por JS */
#nosotros .nosotros-gradient-wave{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

/* Tint azul para mantenerlo profundo y corporativo */
#nosotros .nosotros-gradient-tint{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,19,58,.16),rgba(4,27,78,.32)),
    radial-gradient(circle at 20% 20%,rgba(62,122,255,.16),transparent 38%);
}

/* Todo el contenido de Nosotros queda por encima de la animación */
#nosotros > :not(.nosotros-gradient-wave):not(.nosotros-gradient-tint){
  position:relative;
  z-index:2;
}

/* Contraste de textos de la sección sobre el fondo azul */
#nosotros,
#nosotros p,
#nosotros .section-top,
#nosotros .section-top span,
#nosotros .purpose-index,
#nosotros .values span{
  color:rgba(255,255,255,.90);
}

#nosotros .section-top{
  border-color:rgba(255,255,255,.24);
}

#nosotros #essence-title,
#nosotros #essence-title *{
  color:#f8b726 !important;
  -webkit-text-fill-color:#f8b726 !important;
}

#nosotros .signature{
  color:#f8b726 !important;
}

#nosotros .purpose-grid{
  border-color:rgba(255,255,255,.24);
}

#nosotros .purpose-grid article{
  border-color:rgba(255,255,255,.18);
}

#nosotros .purpose-grid h3{
  color:#fff;
}

#nosotros .values span{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

@media(max-width:760px){
  #productos .section-top > p{
    max-width:100%;
    font-size:20px;
  }
  #productos .section-heading > p{
    max-width:92%;
    font-size:23px;
  }
  #productos .section-heading > p::before,
  #productos .section-heading > p::after{
    width:20px;
    margin-left:.35em;
    margin-right:.35em;
  }
}


/* =========================================================
   Dely Nativa 1.0.28 — Nosotros refinado
   Fondo azul más oscuro + valores sin cajas + títulos con glow
   ========================================================= */

/* 1) Fondo más oscuro y profundo */
#nosotros{
  background:#031334 !important;
}

/* Oscurece también la ola sin eliminarla */
#nosotros .nosotros-gradient-tint{
  background:
    linear-gradient(180deg,rgba(1,9,28,.44),rgba(2,15,44,.56)),
    radial-gradient(circle at 22% 18%,rgba(24,74,168,.12),transparent 38%) !important;
}

/* 2) Valores: quitar caja/fondo/borde */
#nosotros .values{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,64px);
  align-items:start;
}

#nosotros .values span{
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  font-family:Georgia,'Times New Roman',serif !important;
  font-style:italic !important;
  font-size:clamp(28px,2.5vw,44px) !important;
  line-height:1.08 !important;
  font-weight:400 !important;
  letter-spacing:-.02em !important;
  color:#f8b726 !important;

  text-align:center;
  position:relative;
  transition:
    color .28s ease,
    text-shadow .28s ease,
    transform .28s ease;
}

/* Quita cualquier marcador/asterisco heredado visible */
#nosotros .values span::before{
  content:none !important;
  display:none !important;
}

/* 3) Hover: encendido dorado uniforme */
#nosotros .values span:hover,
#nosotros .values span:focus-visible{
  color:#ffd24d !important;
  text-shadow:
    0 0 6px rgba(248,183,38,.92),
    0 0 15px rgba(248,183,38,.62),
    0 0 28px rgba(248,183,38,.28) !important;
  transform:translateY(-2px);
}

/* 4) Más presencia para los títulos de misión/visión */
#nosotros .purpose-grid h3{
  font-family:Georgia,'Times New Roman',serif !important;
  font-style:italic;
  font-size:clamp(32px,3vw,52px) !important;
  line-height:1.05 !important;
  font-weight:400 !important;
  color:#fff !important;
  transition:text-shadow .28s ease,color .28s ease;
}

#nosotros .purpose-grid h3:hover{
  color:#ffd24d !important;
  text-shadow:
    0 0 6px rgba(248,183,38,.90),
    0 0 15px rgba(248,183,38,.58),
    0 0 28px rgba(248,183,38,.24) !important;
}

/* 5) Mantener "Una historia..." como referencia visual dorada */
#nosotros #essence-title,
#nosotros #essence-title *{
  color:#f8b726 !important;
  -webkit-text-fill-color:#f8b726 !important;
}

#nosotros #essence-title:hover,
#nosotros #essence-title:focus-within,
#nosotros #essence-title:hover *,
#nosotros #essence-title:focus-within *{
  color:#ffd24d !important;
  -webkit-text-fill-color:#ffd24d !important;
  text-shadow:
    0 0 6px rgba(248,183,38,.92),
    0 0 15px rgba(248,183,38,.62),
    0 0 28px rgba(248,183,38,.28) !important;
}

/* 6) Separadores discretos, sin cajas */
#nosotros .purpose-grid{
  border-color:rgba(255,255,255,.14) !important;
}
#nosotros .purpose-grid article{
  border-color:rgba(255,255,255,.12) !important;
}

@media(max-width:900px){
  #nosotros .values{
    grid-template-columns:1fr;
    gap:24px;
  }
  #nosotros .values span{
    font-size:clamp(26px,7vw,38px) !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.29 — detalles cobrizos móviles en header
   ========================================================= */

/* Conserva la base translúcida actual */
.site-header,
.site-header.scrolled{
  position:sticky;
  isolation:isolate;
  overflow:hidden;
}

/* Vetas cobrizas finas y orgánicas */
.site-header::before{
  content:'';
  position:absolute;
  inset:-60% -20%;
  z-index:0;
  pointer-events:none;
  opacity:.52;
  background:
    radial-gradient(ellipse at 10% 52%, rgba(110,43,16,.38) 0 4%, transparent 12%),
    radial-gradient(ellipse at 25% 44%, rgba(161,72,26,.34) 0 5%, transparent 14%),
    radial-gradient(ellipse at 43% 58%, rgba(199,102,39,.30) 0 4%, transparent 13%),
    radial-gradient(ellipse at 62% 42%, rgba(130,52,19,.32) 0 5%, transparent 14%),
    radial-gradient(ellipse at 80% 56%, rgba(188,88,31,.34) 0 4%, transparent 13%),
    linear-gradient(
      112deg,
      transparent 0%,
      rgba(104,40,14,.12) 18%,
      rgba(196,101,37,.22) 33%,
      transparent 48%,
      rgba(118,46,16,.14) 66%,
      rgba(220,128,52,.20) 82%,
      transparent 100%
    );
  filter:blur(8px);
  transform:translate3d(-8%,0,0) rotate(-1deg) scale(1.06);
  animation:dn-copper-veins 11s ease-in-out infinite alternate;
}

/* Reflejo cálido que recorre la barra */
.site-header::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.34;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 14%,
      rgba(120,49,18,.08) 23%,
      rgba(214,122,46,.28) 36%,
      rgba(248,183,38,.12) 46%,
      transparent 59%,
      transparent 100%
    );
  transform:translateX(-75%);
  animation:dn-copper-glint 8.5s ease-in-out infinite;
}

/* Logo y menú por encima de las vetas */
.site-header > *{
  position:relative;
  z-index:3;
}

@keyframes dn-copper-veins{
  0%{
    transform:translate3d(-10%,-1%,0) rotate(-1.2deg) scale(1.05,1.00);
    opacity:.42;
  }
  48%{
    transform:translate3d(2%,2%,0) rotate(.5deg) scale(1.10,.97);
    opacity:.56;
  }
  100%{
    transform:translate3d(10%,-1%,0) rotate(-.4deg) scale(1.06,1.03);
    opacity:.46;
  }
}

@keyframes dn-copper-glint{
  0%,10%{
    transform:translateX(-80%);
    opacity:.14;
  }
  45%{
    opacity:.38;
  }
  82%,100%{
    transform:translateX(82%);
    opacity:.10;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header::before,
  .site-header::after{
    animation:none !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.30 — barra viva
   Revierte el efecto cobre/cenizo y usa destellos de color vivos.
   ========================================================= */

.site-header,
.site-header.scrolled{
  background:rgba(250,239,220,.72) !important;
  backdrop-filter:blur(10px) saturate(1.08);
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
}

/* Destellos vivos, translúcidos y suaves */
.site-header::before{
  content:'';
  position:absolute;
  inset:-65% -20%;
  z-index:0;
  pointer-events:none;
  opacity:.58;
  background:
    radial-gradient(ellipse at 8% 48%,  rgba(254,143,10,.40) 0 4%, transparent 13%),
    radial-gradient(ellipse at 25% 58%, rgba(55,155,179,.38) 0 4%, transparent 13%),
    radial-gradient(ellipse at 43% 42%, rgba(246,65,23,.34) 0 4%, transparent 12%),
    radial-gradient(ellipse at 61% 55%, rgba(33,144,47,.34) 0 4%, transparent 12%),
    radial-gradient(ellipse at 79% 40%, rgba(247,244,1,.36) 0 4%, transparent 12%),
    radial-gradient(ellipse at 94% 56%, rgba(254,143,10,.32) 0 4%, transparent 12%);
  filter:blur(8px);
  transform:translate3d(-10%,0,0) scale(1.05);
  animation:dn-vivid-stream 10s ease-in-out infinite alternate;
}

/* Barrido luminoso multicolor sutil */
.site-header::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.34;
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(254,143,10,.14) 18%,
      rgba(55,155,179,.18) 31%,
      rgba(246,65,23,.14) 44%,
      rgba(33,144,47,.16) 57%,
      rgba(247,244,1,.16) 70%,
      transparent 84%
    );
  transform:translateX(-85%);
  animation:dn-vivid-glint 8s ease-in-out infinite;
}

.site-header > *{
  position:relative;
  z-index:3;
}

@keyframes dn-vivid-stream{
  0%{
    transform:translate3d(-10%,-1%,0) scale(1.04,1.00);
    opacity:.48;
  }
  50%{
    transform:translate3d(2%,2%,0) scale(1.10,.98);
    opacity:.62;
  }
  100%{
    transform:translate3d(10%,-1%,0) scale(1.05,1.03);
    opacity:.52;
  }
}

@keyframes dn-vivid-glint{
  0%,10%{
    transform:translateX(-88%);
    opacity:.10;
  }
  48%{
    opacity:.36;
  }
  84%,100%{
    transform:translateX(88%);
    opacity:.08;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header::before,
  .site-header::after{
    animation:none !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.31 — barra fluida viva
   Colores más definidos, sin línea central y con movimiento real
   ========================================================= */

.site-header,
.site-header.scrolled{
  background:rgba(250,239,220,.74) !important;
  border-bottom:1px solid rgba(36,52,95,.07) !important;
  box-shadow:0 3px 14px rgba(36,52,95,.05) !important;
  overflow:hidden;
}

/* Elimina visualmente cualquier franja o unión central vieja */
.site-header{
  background-image:none !important;
}

/* Capa 1: ondas vivas y definidas */
.site-header::before{
  content:'';
  position:absolute;
  inset:-35% -18%;
  z-index:0;
  pointer-events:none;
  opacity:.78;

  background:
    radial-gradient(ellipse at 8% 50%, rgba(254,143,10,.62) 0 7%, transparent 17%),
    radial-gradient(ellipse at 24% 46%, rgba(55,155,179,.58) 0 7%, transparent 17%),
    radial-gradient(ellipse at 41% 56%, rgba(246,65,23,.52) 0 7%, transparent 16%),
    radial-gradient(ellipse at 60% 45%, rgba(33,144,47,.54) 0 7%, transparent 17%),
    radial-gradient(ellipse at 78% 54%, rgba(247,244,1,.50) 0 7%, transparent 16%),
    radial-gradient(ellipse at 94% 48%, rgba(254,143,10,.54) 0 7%, transparent 16%);

  filter:blur(3px) saturate(1.18);
  transform:translate3d(-12%,0,0) scale(1.04);
  animation:dn-vivid-fluid-a 7.5s cubic-bezier(.45,.05,.35,1) infinite alternate;
}

/* Capa 2: bandas líquidas más nítidas */
.site-header::after{
  content:'';
  position:absolute;
  inset:-10% -12%;
  z-index:1;
  pointer-events:none;
  opacity:.62;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(254,143,10,.00) 8%,
      rgba(254,143,10,.26) 15%,
      transparent 24%,
      rgba(55,155,179,.24) 34%,
      transparent 43%,
      rgba(246,65,23,.22) 52%,
      transparent 61%,
      rgba(33,144,47,.22) 70%,
      transparent 79%,
      rgba(247,244,1,.20) 88%,
      transparent 100%
    );

  filter:saturate(1.22);
  transform:translateX(-34%) skewX(-7deg);
  animation:dn-vivid-fluid-b 5.8s linear infinite;
}

/* Logo y navegación siempre por encima */
.site-header > *{
  position:relative;
  z-index:3;
}

/* Movimiento orgánico principal */
@keyframes dn-vivid-fluid-a{
  0%{
    transform:translate3d(-12%,-2%,0) scale(1.03,1.00);
  }
  35%{
    transform:translate3d(-2%,2%,0) scale(1.06,.98);
  }
  68%{
    transform:translate3d(6%,-1%,0) scale(1.03,1.02);
  }
  100%{
    transform:translate3d(12%,1%,0) scale(1.05,.99);
  }
}

/* Barrido secundario continuo, más rápido y definido */
@keyframes dn-vivid-fluid-b{
  0%{
    transform:translateX(-38%) skewX(-7deg);
  }
  100%{
    transform:translateX(38%) skewX(-7deg);
  }
}

/* Menú más limpio sobre los destellos */
.site-header nav a{
  text-shadow:
    0 1px 0 rgba(255,255,255,.52),
    0 0 4px rgba(255,255,255,.14) !important;
}

@media(prefers-reduced-motion:reduce){
  .site-header::before,
  .site-header::after{
    animation:none !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.32 — franja amarilla tipo luz en header
   ========================================================= */

/* La franja vive dentro de la capa superior y cruza suavemente la barra. */
.site-header::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.72;

  background:
    linear-gradient(
      96deg,
      transparent 0%,
      transparent 28%,
      rgba(255,214,64,.08) 35%,
      rgba(255,224,77,.34) 43%,
      rgba(255,240,140,.72) 50%,
      rgba(255,224,77,.34) 57%,
      rgba(255,214,64,.08) 65%,
      transparent 72%,
      transparent 100%
    );

  filter:blur(1.5px);
  transform:translateX(-72%) skewX(-8deg);
  animation:dn-yellow-light-band 6.8s ease-in-out infinite;
}

/* Halo sutil alrededor de la franja para que parezca luz, no línea sólida. */
.site-header{
  box-shadow:
    0 3px 14px rgba(36,52,95,.05),
    inset 0 0 18px rgba(255,221,85,.06) !important;
}

@keyframes dn-yellow-light-band{
  0%,12%{
    transform:translateX(-72%) skewX(-8deg);
    opacity:.16;
  }
  45%{
    opacity:.78;
  }
  88%,100%{
    transform:translateX(72%) skewX(-8deg);
    opacity:.12;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header::after{
    animation:none !important;
    opacity:.30;
    transform:translateX(0) skewX(-8deg);
  }
}


/* =========================================================
   Dely Nativa 1.0.33 — SOLO luz amarilla en header
   Elimina por completo las capas multicolor anteriores.
   ========================================================= */

/* Base limpia y translúcida */
.site-header,
.site-header.scrolled{
  background:rgba(250,239,220,.76) !important;
  background-image:none !important;
  border-bottom:1px solid rgba(36,52,95,.07) !important;
  box-shadow:
    0 3px 14px rgba(36,52,95,.05),
    inset 0 0 18px rgba(255,221,85,.05) !important;
}

/* Se anula completamente la capa multicolor */
.site-header::before{
  content:none !important;
  display:none !important;
  background:none !important;
  animation:none !important;
}

/* Única animación visual: franja amarilla/dorada luminosa */
.site-header::after{
  content:'';
  display:block !important;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    linear-gradient(
      96deg,
      transparent 0%,
      transparent 26%,
      rgba(255,212,48,.04) 34%,
      rgba(255,221,70,.20) 41%,
      rgba(255,236,118,.48) 47%,
      rgba(255,246,174,.82) 50%,
      rgba(255,236,118,.48) 53%,
      rgba(255,221,70,.20) 59%,
      rgba(255,212,48,.04) 66%,
      transparent 74%,
      transparent 100%
    ) !important;

  filter:blur(1.2px) !important;
  transform:translateX(-78%) skewX(-7deg);
  opacity:.78;
  animation:dn-yellow-only-band 6.4s ease-in-out infinite !important;
}

.site-header > *{
  position:relative;
  z-index:3;
}

@keyframes dn-yellow-only-band{
  0%,10%{
    transform:translateX(-78%) skewX(-7deg);
    opacity:.12;
  }
  45%{
    opacity:.82;
  }
  90%,100%{
    transform:translateX(78%) skewX(-7deg);
    opacity:.10;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header::after{
    animation:none !important;
    transform:translateX(0) skewX(-7deg);
    opacity:.28;
  }
}


/* =========================================================
   Dely Nativa 1.0.34 — luz amarilla continua en toda la barra
   ========================================================= */

/* Base: siempre hay una iluminación amarilla tenue en toda la barra */
.site-header,
.site-header.scrolled{
  background:
    linear-gradient(
      90deg,
      rgba(255,236,130,.14) 0%,
      rgba(255,226,76,.20) 24%,
      rgba(255,243,165,.24) 50%,
      rgba(255,226,76,.20) 76%,
      rgba(255,236,130,.14) 100%
    ),
    rgba(250,239,220,.76) !important;

  box-shadow:
    0 3px 14px rgba(36,52,95,.05),
    inset 0 0 22px rgba(255,220,70,.10) !important;
}

/* Sin capa extra multicolor */
.site-header::before{
  content:none !important;
  display:none !important;
}

/* Reflejo amarillo móvil que siempre cubre toda la barra */
.site-header::after{
  content:'';
  display:block !important;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.72;

  background:
    repeating-linear-gradient(
      100deg,
      rgba(255,224,72,.05) 0px,
      rgba(255,224,72,.10) 90px,
      rgba(255,244,170,.48) 180px,
      rgba(255,231,96,.24) 270px,
      rgba(255,224,72,.08) 360px
    ) !important;

  background-size:720px 100% !important;
  background-position:0 0;
  filter:blur(1px) saturate(1.08) !important;
  transform:none !important;

  animation:dn-yellow-flow-full 5.8s linear infinite !important;
}

.site-header > *{
  position:relative;
  z-index:3;
}

@keyframes dn-yellow-flow-full{
  from{
    background-position:0 0;
  }
  to{
    background-position:720px 0;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header::after{
    animation:none !important;
    background-position:0 0 !important;
    opacity:.46;
  }
}


/* =========================================================
   Dely Nativa 1.0.35 — reflejo blanco/dorado visible
   ========================================================= */

/* Mantiene la base amarilla continua, pero un poco más limpia */
.site-header,
.site-header.scrolled{
  background:
    linear-gradient(
      90deg,
      rgba(255,235,120,.15) 0%,
      rgba(255,222,65,.21) 26%,
      rgba(255,242,155,.26) 50%,
      rgba(255,222,65,.21) 74%,
      rgba(255,235,120,.15) 100%
    ),
    rgba(250,239,220,.78) !important;

  box-shadow:
    0 3px 14px rgba(36,52,95,.05),
    inset 0 0 18px rgba(255,220,70,.08) !important;
}

/* Sin capa multicolor */
.site-header::before{
  content:none !important;
  display:none !important;
}

/* Reflejo más formado: amarillo -> dorado -> blanco cálido -> dorado -> amarillo */
.site-header::after{
  content:'';
  display:block !important;
  position:absolute;
  top:0;
  bottom:0;
  left:-36%;
  width:42%;
  z-index:1;
  pointer-events:none;

  background:
    linear-gradient(
      96deg,
      transparent 0%,
      rgba(255,211,45,.10) 12%,
      rgba(255,220,58,.34) 25%,
      rgba(255,232,104,.60) 39%,
      rgba(255,250,224,.94) 50%,
      rgba(255,236,132,.68) 61%,
      rgba(255,220,58,.36) 75%,
      rgba(255,211,45,.10) 88%,
      transparent 100%
    ) !important;

  filter:blur(.35px) !important;
  opacity:.92;
  transform:skewX(-8deg);
  animation:dn-white-gold-glide 4.6s linear infinite !important;
}

/* pequeño halo que hace perceptible el paso del reflejo */
.site-header::after{
  box-shadow:
    0 0 12px rgba(255,245,190,.36),
    0 0 22px rgba(255,218,72,.18);
}

.site-header > *{
  position:relative;
  z-index:3;
}

@keyframes dn-white-gold-glide{
  0%{
    left:-42%;
  }
  100%{
    left:106%;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header::after{
    animation:none !important;
    left:29%;
    opacity:.46;
  }
}


/* =========================================================
   Dely Nativa 1.0.36 — barra dorada completa + luz en toda el área
   ========================================================= */

/* Toda la barra es dorada/amarilla, sin base crema */
.site-header,
.site-header.scrolled{
  background:
    linear-gradient(
      90deg,
      #f6cc4f 0%,
      #ffe071 22%,
      #ffd75d 50%,
      #ffe071 78%,
      #f6cc4f 100%
    ) !important;
  background-image:
    linear-gradient(
      90deg,
      #f6cc4f 0%,
      #ffe071 22%,
      #ffd75d 50%,
      #ffe071 78%,
      #f6cc4f 100%
    ) !important;

  border-bottom:1px solid rgba(128,88,0,.16) !important;
  box-shadow:
    0 3px 14px rgba(80,58,0,.10),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(174,117,0,.10) !important;
}

/* Se desactiva cualquier capa heredada */
.site-header::before{
  content:none !important;
  display:none !important;
}

/* Luz móvil de ancho completo: siempre visible en toda la barra */
.site-header::after{
  content:'';
  display:block !important;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.88;

  background:
    repeating-linear-gradient(
      100deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.16) 90px,
      rgba(255,252,224,.78) 180px,
      rgba(255,239,143,.38) 270px,
      rgba(255,255,255,.08) 360px
    ) !important;

  background-size:720px 100% !important;
  background-position:0 0;
  filter:none !important;
  transform:none !important;
  animation:dn-gold-full-flow 4.8s linear infinite !important;
}

.site-header > *{
  position:relative;
  z-index:3;
}

@keyframes dn-gold-full-flow{
  from{
    background-position:0 0;
  }
  to{
    background-position:720px 0;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header::after{
    animation:none !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.37 — barra blanca transparente + destello dorado total
   ========================================================= */

/* BASE: blanca, translúcida y limpia. Nada de amarillo/crema fijo. */
.site-header,
.site-header.scrolled{
  background:rgba(255,255,255,.72) !important;
  background-image:none !important;
  border-bottom:1px solid rgba(36,52,95,.08) !important;

  backdrop-filter:blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.05) !important;

  box-shadow:
    0 3px 14px rgba(20,30,70,.06),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/* Sin capa de color heredada */
.site-header::before{
  content:none !important;
  display:none !important;
  background:none !important;
  animation:none !important;
}

/*
  DESTELLO:
  ocupa TODA la barra y el movimiento se produce dentro de ella.
  Así nunca existe una "media barra" dorada.
*/
.site-header::after{
  content:'';
  display:block !important;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  opacity:.88;

  background:
    repeating-linear-gradient(
      102deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 120px,
      rgba(255,213,58,.10) 185px,
      rgba(255,225,92,.24) 235px,
      rgba(255,247,206,.74) 285px,
      rgba(255,220,67,.30) 335px,
      rgba(255,200,28,.12) 390px,
      rgba(255,255,255,0) 470px,
      rgba(255,255,255,0) 600px
    ) !important;

  background-size:1200px 100% !important;
  background-position:0 0;

  filter:none !important;
  transform:none !important;

  animation:dn-gold-shimmer-fullbar 4.2s linear infinite !important;
}

.site-header > *{
  position:relative;
  z-index:3;
}

@keyframes dn-gold-shimmer-fullbar{
  from{
    background-position:-1200px 0;
  }
  to{
    background-position:1200px 0;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header::after{
    animation:none !important;
    background-position:0 0 !important;
    opacity:.38;
  }
}


/* =========================================================
   Dely Nativa 1.0.38
   Barra blanca más transparente + destello dorado continuo total
   ========================================================= */

/* Base realmente translúcida */
.site-header,
.site-header.scrolled{
  background:rgba(255,255,255,.42) !important;
  background-image:none !important;

  backdrop-filter:blur(10px) saturate(1.04) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.04) !important;

  border-bottom:1px solid rgba(36,52,95,.055) !important;

  box-shadow:
    0 3px 12px rgba(20,30,70,.045),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
}

/* Nada de capas heredadas */
.site-header::before{
  content:none !important;
  display:none !important;
  background:none !important;
  animation:none !important;
}

/*
  Reflejos distribuidos de forma continua por toda la barra.
  No existe una mitad "vacía": siempre hay varios puntos de luz.
*/
.site-header::after{
  content:'';
  display:block !important;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  opacity:.78;

  background:
    repeating-linear-gradient(
      104deg,
      rgba(255,210,38,.08) 0px,
      rgba(255,221,67,.18) 55px,
      rgba(255,246,203,.62) 110px,
      rgba(255,231,103,.31) 165px,
      rgba(255,203,26,.12) 220px,
      rgba(255,255,255,.03) 275px,
      rgba(255,220,62,.16) 330px
    ) !important;

  background-size:660px 100% !important;
  background-position:0 0 !important;

  filter:none !important;
  transform:none !important;

  animation:dn-gold-continuous-flow 5.2s linear infinite !important;
}

.site-header > *{
  position:relative;
  z-index:3;
}

@keyframes dn-gold-continuous-flow{
  from{
    background-position:0 0;
  }
  to{
    background-position:660px 0;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header::after{
    animation:none !important;
    opacity:.48;
  }
}


/* =========================================================
   Dely Nativa 1.0.39 — HEADER RESET LIMPIO
   Elimina todos los efectos acumulados de versiones previas.
   ========================================================= */

.site-header,
.site-header.scrolled{
  background:rgba(255,255,255,.38) !important;
  background-image:none !important;
  border:0 !important;
  border-bottom:1px solid rgba(20,30,70,.06) !important;

  box-shadow:none !important;
  text-shadow:none !important;

  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;

  filter:none !important;
  isolation:isolate;
  overflow:hidden;
}

/* Elimina completamente cualquier efecto previo */
.site-header::before,
.site-header::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
  animation:none !important;
  transform:none !important;
}

/* Evita capas heredadas o fondos internos inesperados */
.site-header > *{
  position:relative;
  z-index:2;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Menú limpio */
.site-header nav,
.site-header nav ul,
.site-header nav li,
.site-header nav a{
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

.site-header nav a{
  text-shadow:none !important;
}


/* =========================================================
   Dely Nativa 1.0.40 — paisaje detrás del header al inicio
   ========================================================= */

/* Arriba de la página: paisaje recortado exactamente a la barra */
.site-header:not(.scrolled){
  background:
    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)),
    none center 48% / cover no-repeat !important;

  backdrop-filter:blur(2px) saturate(1.06) !important;
  -webkit-backdrop-filter:blur(2px) saturate(1.06) !important;

  border-bottom:1px solid rgba(20,30,70,.08) !important;
  box-shadow:none !important;
}

/* Al bajar: vuelve a ser una barra realmente transparente */
.site-header.scrolled{
  background:rgba(255,255,255,.26) !important;
  background-image:none !important;

  backdrop-filter:blur(9px) saturate(1.04) !important;
  -webkit-backdrop-filter:blur(9px) saturate(1.04) !important;

  border-bottom:1px solid rgba(20,30,70,.055) !important;
  box-shadow:none !important;
}

/* Continúa sin efectos adicionales */
.site-header::before,
.site-header::after{
  content:none !important;
  display:none !important;
}


/* =========================================================
   Dely Nativa 1.0.41 — paisaje DETRÁS de la transparencia
   ========================================================= */

/* El header vuelve a ser realmente transparente */
.site-header,
.site-header:not(.scrolled),
.site-header.scrolled{
  position:sticky;
  isolation:isolate;
  overflow:hidden;

  background:transparent !important;
  background-image:none !important;
  border-bottom:1px solid rgba(20,30,70,.055) !important;
  box-shadow:none !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* CAPA 1 — paisaje al fondo */
.site-header:not(.scrolled)::before{
  content:'' !important;
  display:block !important;
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    none center 48% / cover no-repeat !important;

  opacity:1 !important;
  filter:none !important;
  animation:none !important;
  transform:none !important;
}

/* CAPA 2 — vidrio blanco translúcido ENCIMA del paisaje */
.site-header:not(.scrolled)::after{
  content:'' !important;
  display:block !important;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:rgba(255,255,255,.34) !important;
  opacity:1 !important;

  backdrop-filter:blur(4px) saturate(1.04) !important;
  -webkit-backdrop-filter:blur(4px) saturate(1.04) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50) !important;

  filter:none !important;
  animation:none !important;
  transform:none !important;
}

/* Al hacer scroll, desaparece el paisaje y queda solo vidrio transparente */
.site-header.scrolled::before{
  content:none !important;
  display:none !important;
}

.site-header.scrolled::after{
  content:'' !important;
  display:block !important;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:rgba(255,255,255,.24) !important;
  opacity:1 !important;

  backdrop-filter:blur(8px) saturate(1.04) !important;
  -webkit-backdrop-filter:blur(8px) saturate(1.04) !important;

  box-shadow:none !important;
  filter:none !important;
  animation:none !important;
  transform:none !important;
}

/* CAPA 3 — contenido siempre arriba */
.site-header > *{
  position:relative;
  z-index:3;
  background:transparent !important;
}


/* =========================================================
   Dely Nativa 1.0.42 — encuadre corregido del paisaje en header
   ========================================================= */

/* Mantiene la arquitectura correcta: paisaje atrás, vidrio encima */
.site-header:not(.scrolled)::before{
  content:'' !important;
  display:block !important;
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  /* Encuadre panorámico: llena toda la barra y muestra más cielo/campo */
  background-image:none !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:center center !important;

  opacity:1 !important;
  filter:none !important;
  animation:none !important;
  transform:none !important;
}

/* Vidrio translúcido intacto */
.site-header:not(.scrolled)::after{
  content:'' !important;
  display:block !important;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:rgba(255,255,255,.34) !important;

  backdrop-filter:blur(3px) saturate(1.04) !important;
  -webkit-backdrop-filter:blur(3px) saturate(1.04) !important;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.48) !important;
  opacity:1 !important;
  filter:none !important;
  animation:none !important;
  transform:none !important;
}


/* =========================================================
   Dely Nativa 1.0.43 — HEADER REHECHO LIMPIO
   Paisaje full width detrás + transparencia full width encima
   ========================================================= */

/* RESET fuerte del header */
.site-header,
.site-header:not(.scrolled),
.site-header.scrolled{
  position:sticky !important;
  top:0 !important;
  width:100% !important;
  min-width:100% !important;
  max-width:none !important;

  overflow:hidden !important;
  isolation:isolate !important;

  background:none !important;
  background-image:none !important;

  border:0 !important;
  border-bottom:1px solid rgba(20,30,70,.06) !important;

  box-shadow:none !important;
  filter:none !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* PAISAJE: cubre TODO el ancho y TODA la altura */
.site-header:not(.scrolled)::before{
  content:'' !important;
  display:block !important;

  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;

  width:100% !important;
  height:100% !important;

  z-index:0 !important;
  pointer-events:none !important;

  background-image:none !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:100% 100% !important;

  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  animation:none !important;
}

/* VIDRIO: capa blanca translúcida que cubre TODO */
.site-header:not(.scrolled)::after{
  content:'' !important;
  display:block !important;

  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;

  width:100% !important;
  height:100% !important;

  z-index:1 !important;
  pointer-events:none !important;

  background:rgba(255,255,255,.30) !important;

  backdrop-filter:blur(3px) saturate(1.03) !important;
  -webkit-backdrop-filter:blur(3px) saturate(1.03) !important;

  opacity:1 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  animation:none !important;
}

/* SCROLL: quita paisaje y deja vidrio transparente limpio */
.site-header.scrolled::before{
  content:none !important;
  display:none !important;
}

.site-header.scrolled::after{
  content:'' !important;
  display:block !important;

  position:absolute !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;

  z-index:1 !important;
  pointer-events:none !important;

  background:rgba(255,255,255,.24) !important;

  backdrop-filter:blur(8px) saturate(1.03) !important;
  -webkit-backdrop-filter:blur(8px) saturate(1.03) !important;

  opacity:1 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  animation:none !important;
}

/* CONTENIDO: logo y menú siempre arriba */
.site-header > *{
  position:relative !important;
  z-index:3 !important;

  width:100% !important;
  max-width:none !important;

  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Evita que wrappers internos pinten franjas o zonas distintas */
.site-header .container,
.site-header .header-inner,
.site-header nav,
.site-header nav ul,
.site-header nav li,
.site-header nav a{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
}


/* =========================================================
   Dely Nativa 1.0.44 — restaura menú + limpia línea inferior
   ========================================================= */

/* Quita la línea marcada debajo de la barra */
.site-header,
.site-header:not(.scrolled),
.site-header.scrolled{
  border-bottom:0 !important;
  box-shadow:none !important;
}

/* Corrige el error de 1.0.43:
   los hijos NO deben ocupar cada uno 100% del ancho. */
.site-header > *{
  width:auto !important;
  max-width:none !important;
}

/* Logo conserva su tamaño natural */
.site-header .brand{
  flex:0 0 auto !important;
  width:auto !important;
  max-width:none !important;
}

/* Menú vuelve a ocupar el espacio restante */
.site-header nav{
  flex:1 1 auto !important;
  width:auto !important;
  max-width:none !important;
  margin-left:clamp(48px,7vw,120px) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:clamp(18px,3.4vw,72px) !important;
}

/* Evita cualquier franja interna */
.site-header nav,
.site-header nav a,
.site-header .brand,
.site-header .menu-toggle{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Separación inferior muy suave, sin línea visible */
.site-header::after{
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.10) !important;
}

@media(max-width:900px){
  .site-header nav{
    margin-left:0 !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.45 — header limpio + destello dorado único
   ========================================================= */

/* Base limpia: blanco transparente, sin imagen */
.site-header,
.site-header:not(.scrolled),
.site-header.scrolled{
  background:rgba(255,255,255,.34) !important;
  background-image:none !important;

  border:0 !important;
  box-shadow:none !important;

  backdrop-filter:blur(9px) saturate(1.03) !important;
  -webkit-backdrop-filter:blur(9px) saturate(1.03) !important;

  overflow:hidden !important;
  isolation:isolate !important;
}

/* Quita por completo cualquier paisaje o capa heredada */
.site-header::before{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  opacity:0 !important;
  filter:none !important;
  animation:none !important;
  transform:none !important;
}

/* ÚNICO efecto: destello dorado visible recorriendo toda la barra */
.site-header::after{
  content:'' !important;
  display:block !important;

  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  left:-34% !important;

  width:28% !important;
  height:100% !important;

  z-index:1 !important;
  pointer-events:none !important;

  background:
    linear-gradient(
      96deg,
      rgba(255,195,18,0) 0%,
      rgba(255,202,26,.12) 14%,
      rgba(255,215,48,.34) 30%,
      rgba(255,232,102,.58) 43%,
      rgba(255,250,221,.92) 50%,
      rgba(255,231,96,.60) 57%,
      rgba(255,213,43,.35) 70%,
      rgba(255,199,18,.12) 86%,
      rgba(255,195,18,0) 100%
    ) !important;

  opacity:.95 !important;
  filter:blur(.4px) !important;
  transform:skewX(-8deg) !important;

  animation:dn-gold-glint-clean 5s linear infinite !important;
}

@keyframes dn-gold-glint-clean{
  from{
    left:-34%;
  }
  to{
    left:106%;
  }
}

/* Logo y navegación por encima del destello */
.site-header > *{
  position:relative !important;
  z-index:3 !important;
  background:transparent !important;
}

.site-header nav,
.site-header nav ul,
.site-header nav li,
.site-header nav a,
.site-header .brand{
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

@media(prefers-reduced-motion:reduce){
  .site-header::after{
    animation:none !important;
    left:36% !important;
    opacity:.36 !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.46 — ELIMINACIÓN TOTAL DEL PAISAJE
   ========================================================= */

/* Header base: transparente, sin imagen bajo ninguna circunstancia */
html body .site-header,
html body .site-header:not(.scrolled),
html body .site-header.scrolled{
  background:rgba(255,255,255,.34) !important;
  background-color:rgba(255,255,255,.34) !important;
  background-image:none !important;
  box-shadow:none !important;
  border:0 !important;

  backdrop-filter:blur(9px) saturate(1.03) !important;
  -webkit-backdrop-filter:blur(9px) saturate(1.03) !important;

  isolation:isolate !important;
  overflow:hidden !important;
}

/* Asegura que ninguna capa antigua pueda volver a pintar el paisaje */
html body .site-header::before,
html body .site-header:not(.scrolled)::before,
html body .site-header.scrolled::before{
  content:none !important;
  display:none !important;
  position:static !important;
  background:none !important;
  background-image:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  box-shadow:none !important;
  filter:none !important;
  animation:none !important;
  transform:none !important;
}

/* ÚNICO efecto permitido: destello dorado */
html body .site-header::after,
html body .site-header:not(.scrolled)::after,
html body .site-header.scrolled::after{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  left:-32% !important;
  width:26% !important;
  height:100% !important;
  z-index:1 !important;
  pointer-events:none !important;

  background:
    linear-gradient(
      96deg,
      rgba(255,196,18,0) 0%,
      rgba(255,207,30,.14) 16%,
      rgba(255,218,54,.36) 31%,
      rgba(255,235,112,.62) 44%,
      rgba(255,252,228,.94) 50%,
      rgba(255,234,108,.62) 56%,
      rgba(255,217,50,.36) 69%,
      rgba(255,205,28,.14) 84%,
      rgba(255,196,18,0) 100%
    ) !important;

  background-image:
    linear-gradient(
      96deg,
      rgba(255,196,18,0) 0%,
      rgba(255,207,30,.14) 16%,
      rgba(255,218,54,.36) 31%,
      rgba(255,235,112,.62) 44%,
      rgba(255,252,228,.94) 50%,
      rgba(255,234,108,.62) 56%,
      rgba(255,217,50,.36) 69%,
      rgba(255,205,28,.14) 84%,
      rgba(255,196,18,0) 100%
    ) !important;

  opacity:.94 !important;
  visibility:visible !important;
  filter:blur(.35px) !important;
  transform:skewX(-8deg) !important;
  animation:dn-gold-glint-146 5s linear infinite !important;
}

@keyframes dn-gold-glint-146{
  from{ left:-32%; }
  to{ left:106%; }
}

/* Contenido del header arriba del destello */
html body .site-header > *{
  position:relative !important;
  z-index:3 !important;
  background:transparent !important;
}


/* =========================================================
   Dely Nativa 1.0.47 — luciérnagas doradas en el header
   ========================================================= */

/* Base intacta: blanca/transparente */
html body .site-header,
html body .site-header:not(.scrolled),
html body .site-header.scrolled{
  background:rgba(255,255,255,.34) !important;
  background-image:none !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

/* Capa 1: luciérnagas principales */
html body .site-header::before,
html body .site-header:not(.scrolled)::before,
html body .site-header.scrolled::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  inset:-14px -18px !important;
  z-index:1 !important;
  pointer-events:none !important;
  visibility:visible !important;
  opacity:.88 !important;

  background:
    radial-gradient(circle at 5% 32%, rgba(255,251,210,.98) 0 1.5px, rgba(255,207,45,.82) 2px, transparent 5px),
    radial-gradient(circle at 14% 68%, rgba(255,245,178,.92) 0 1px, rgba(255,195,26,.72) 2px, transparent 4.5px),
    radial-gradient(circle at 25% 38%, rgba(255,254,224,.96) 0 1.2px, rgba(255,218,72,.78) 2.2px, transparent 5px),
    radial-gradient(circle at 36% 74%, rgba(255,246,185,.90) 0 1.3px, rgba(255,199,30,.70) 2.2px, transparent 4.8px),
    radial-gradient(circle at 47% 24%, rgba(255,255,230,.98) 0 1.5px, rgba(255,221,78,.82) 2.5px, transparent 5.5px),
    radial-gradient(circle at 58% 62%, rgba(255,244,168,.92) 0 1.1px, rgba(255,191,20,.74) 2px, transparent 4.5px),
    radial-gradient(circle at 69% 36%, rgba(255,253,216,.98) 0 1.4px, rgba(255,215,58,.78) 2.3px, transparent 5.2px),
    radial-gradient(circle at 79% 70%, rgba(255,246,180,.90) 0 1px, rgba(255,198,27,.70) 2px, transparent 4.4px),
    radial-gradient(circle at 89% 28%, rgba(255,255,225,.98) 0 1.4px, rgba(255,222,73,.82) 2.4px, transparent 5.3px),
    radial-gradient(circle at 96% 58%, rgba(255,247,184,.92) 0 1.1px, rgba(255,202,35,.72) 2px, transparent 4.6px) !important;

  background-repeat:no-repeat !important;
  filter:
    drop-shadow(0 0 3px rgba(255,211,55,.58))
    drop-shadow(0 0 7px rgba(255,190,15,.22)) !important;

  transform:translate3d(0,0,0) !important;
  animation:dn-fireflies-a 7.4s ease-in-out infinite alternate !important;
}

/* Capa 2: partículas pequeñas con otra trayectoria */
html body .site-header::after,
html body .site-header:not(.scrolled)::after,
html body .site-header.scrolled::after{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  inset:-18px -22px !important;
  width:auto !important;
  height:auto !important;
  left:-22px !important;
  top:-18px !important;
  bottom:-18px !important;
  z-index:1 !important;
  pointer-events:none !important;
  visibility:visible !important;
  opacity:.68 !important;

  background:
    radial-gradient(circle at 10% 54%, rgba(255,255,225,.92) 0 1px, rgba(255,217,61,.72) 1.8px, transparent 4px),
    radial-gradient(circle at 20% 22%, rgba(255,243,160,.88) 0 .8px, rgba(255,188,13,.66) 1.8px, transparent 3.8px),
    radial-gradient(circle at 31% 61%, rgba(255,254,220,.92) 0 1px, rgba(255,211,48,.70) 1.9px, transparent 4px),
    radial-gradient(circle at 42% 42%, rgba(255,245,172,.88) 0 .9px, rgba(255,191,18,.65) 1.7px, transparent 3.8px),
    radial-gradient(circle at 53% 76%, rgba(255,255,224,.92) 0 1px, rgba(255,216,56,.72) 1.9px, transparent 4px),
    radial-gradient(circle at 64% 20%, rgba(255,243,160,.88) 0 .9px, rgba(255,188,14,.64) 1.7px, transparent 3.8px),
    radial-gradient(circle at 74% 53%, rgba(255,253,216,.92) 0 1px, rgba(255,211,49,.70) 1.9px, transparent 4px),
    radial-gradient(circle at 85% 42%, rgba(255,245,171,.88) 0 .9px, rgba(255,194,22,.66) 1.7px, transparent 3.8px),
    radial-gradient(circle at 93% 76%, rgba(255,255,222,.92) 0 1px, rgba(255,218,60,.72) 1.9px, transparent 4px) !important;

  background-repeat:no-repeat !important;
  filter:
    drop-shadow(0 0 2px rgba(255,214,53,.50))
    drop-shadow(0 0 5px rgba(255,185,8,.18)) !important;

  transform:translate3d(0,0,0) !important;
  animation:dn-fireflies-b 9.2s ease-in-out infinite alternate-reverse !important;
}

/* Trayectorias distintas para evitar sensación mecánica */
@keyframes dn-fireflies-a{
  0%   { transform:translate3d(-5px, 1px, 0) scale(1); opacity:.70; }
  28%  { transform:translate3d( 7px,-3px, 0) scale(1.03); opacity:.94; }
  57%  { transform:translate3d(-2px, 4px, 0) scale(.98); opacity:.76; }
  82%  { transform:translate3d( 9px, 1px, 0) scale(1.02); opacity:.96; }
  100% { transform:translate3d( 3px,-4px, 0) scale(1); opacity:.80; }
}

@keyframes dn-fireflies-b{
  0%   { transform:translate3d( 4px,-2px,0); opacity:.50; }
  33%  { transform:translate3d(-8px, 3px,0); opacity:.76; }
  61%  { transform:translate3d( 6px, 4px,0); opacity:.58; }
  100% { transform:translate3d(-3px,-3px,0); opacity:.82; }
}

/* Logo y menú siempre por encima */
html body .site-header > *{
  position:relative !important;
  z-index:3 !important;
}

@media(prefers-reduced-motion:reduce){
  html body .site-header::before,
  html body .site-header::after{
    animation:none !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.48 — luciérnagas independientes reales
   ========================================================= */

/* Desactiva las dos capas estáticas/agrupadas de 1.0.47 */
html body .site-header::before,
html body .site-header::after,
html body .site-header:not(.scrolled)::before,
html body .site-header:not(.scrolled)::after,
html body .site-header.scrolled::before,
html body .site-header.scrolled::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}

/* Capa dinámica generada por JS */
.dn-fireflies-layer{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.dn-firefly{
  position:absolute;
  left:var(--left);
  top:var(--top);

  width:var(--size);
  height:var(--size);
  border-radius:50%;

  background:rgba(255,250,205,.98);
  box-shadow:
    0 0 4px rgba(255,224,85,.95),
    0 0 9px rgba(255,198,30,.58),
    0 0 15px rgba(255,178,0,.28);

  opacity:.25;
  will-change:transform,opacity;

  animation:
    dn-firefly-path var(--dur) ease-in-out var(--delay) infinite alternate,
    dn-firefly-twinkle var(--twinkle) ease-in-out var(--delay2) infinite;
}

@keyframes dn-firefly-path{
  0%{
    transform:translate3d(var(--x0),var(--y0),0) scale(.82);
  }
  23%{
    transform:translate3d(var(--x1),var(--y1),0) scale(1.08);
  }
  51%{
    transform:translate3d(var(--x2),var(--y2),0) scale(.92);
  }
  76%{
    transform:translate3d(var(--x3),var(--y3),0) scale(1.12);
  }
  100%{
    transform:translate3d(var(--x4),var(--y4),0) scale(.88);
  }
}

@keyframes dn-firefly-twinkle{
  0%,100%{
    opacity:.18;
    filter:brightness(.85);
  }
  32%{
    opacity:.95;
    filter:brightness(1.35);
  }
  58%{
    opacity:.42;
    filter:brightness(1.02);
  }
  82%{
    opacity:1;
    filter:brightness(1.55);
  }
}

/* Logo y navegación siempre por encima */
html body .site-header > *:not(.dn-fireflies-layer){
  position:relative !important;
  z-index:3 !important;
}

@media(prefers-reduced-motion:reduce){
  .dn-firefly{
    animation:dn-firefly-twinkle 3.8s ease-in-out infinite !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.49 — FIX REAL capa de luciérnagas
   ========================================================= */

/* La regla antigua .site-header > * estaba pisando esta capa.
   Aquí la fijamos por encima de cualquier herencia previa. */
html body .site-header > .dn-fireflies-layer{
  position:absolute !important;
  inset:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;

  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;

  z-index:2 !important;
  pointer-events:none !important;
  overflow:hidden !important;

  display:block !important;
  visibility:visible !important;
  opacity:1 !important;

  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}

/* Luciérnagas más visibles, manteniendo elegancia */
html body .site-header .dn-firefly{
  position:absolute !important;
  display:block !important;

  left:var(--left) !important;
  top:var(--top) !important;

  width:var(--size) !important;
  height:var(--size) !important;
  min-width:var(--size) !important;
  min-height:var(--size) !important;

  border-radius:50% !important;

  background:#fff8b8 !important;
  box-shadow:
    0 0 3px #fff6b0,
    0 0 7px rgba(255,215,55,.98),
    0 0 13px rgba(255,183,0,.72),
    0 0 20px rgba(255,166,0,.34) !important;

  z-index:2 !important;
  visibility:visible !important;
  will-change:transform,opacity !important;

  animation:
    dn-firefly-path var(--dur) ease-in-out var(--delay) infinite alternate,
    dn-firefly-twinkle var(--twinkle) ease-in-out var(--delay2) infinite !important;
}

/* Contenido real del header permanece arriba */
html body .site-header > *:not(.dn-fireflies-layer){
  position:relative !important;
  z-index:4 !important;
}

/* Movimiento un poco más perceptible */
@keyframes dn-firefly-path{
  0%   { transform:translate3d(var(--x0),var(--y0),0) scale(.80); }
  23%  { transform:translate3d(var(--x1),var(--y1),0) scale(1.18); }
  51%  { transform:translate3d(var(--x2),var(--y2),0) scale(.92); }
  76%  { transform:translate3d(var(--x3),var(--y3),0) scale(1.22); }
  100% { transform:translate3d(var(--x4),var(--y4),0) scale(.86); }
}

@keyframes dn-firefly-twinkle{
  0%,100%{
    opacity:.30;
    filter:brightness(.95);
  }
  30%{
    opacity:1;
    filter:brightness(1.55);
  }
  56%{
    opacity:.48;
    filter:brightness(1.08);
  }
  82%{
    opacity:1;
    filter:brightness(1.80);
  }
}


/* =========================================================
   Dely Nativa 1.0.50 — luciérnagas POR ENCIMA del vidrio
   ========================================================= */

/* Header: el vidrio es solo el fondo, no una capa encima */
html body .site-header,
html body .site-header:not(.scrolled),
html body .site-header.scrolled{
  background:rgba(255,255,255,.30) !important;
  background-image:none !important;
  isolation:isolate !important;
  overflow:hidden !important;
}

/* Anula cualquier pseudo-capa antigua */
html body .site-header::before,
html body .site-header::after,
html body .site-header:not(.scrolled)::before,
html body .site-header:not(.scrolled)::after,
html body .site-header.scrolled::before,
html body .site-header.scrolled::after{
  content:none !important;
  display:none !important;
  z-index:auto !important;
}

/* Luciérnagas al frente del vidrio */
html body .site-header > .dn-fireflies-layer{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;

  z-index:50 !important;
  pointer-events:none !important;
  overflow:hidden !important;

  display:block !important;
  visibility:visible !important;
  opacity:1 !important;

  background:transparent !important;
  mix-blend-mode:normal !important;
}

/* Cada punto claramente visible */
html body .site-header .dn-firefly{
  z-index:51 !important;
  opacity:1;

  background:#fff4a8 !important;
  box-shadow:
    0 0 3px rgba(255,255,220,1),
    0 0 8px rgba(255,224,75,1),
    0 0 15px rgba(255,190,15,.88),
    0 0 24px rgba(255,160,0,.45) !important;
}

/* Logo y menú todavía por encima de las luciérnagas */
html body .site-header > *:not(.dn-fireflies-layer){
  position:relative !important;
  z-index:100 !important;
}

/* Cualquier wrapper del header queda transparente */
html body .site-header .container,
html body .site-header .header-inner,
html body .site-header .brand,
html body .site-header nav,
html body .site-header nav ul,
html body .site-header nav li,
html body .site-header nav a{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}


/* =========================================================
   Dely Nativa 1.0.51 — header floral + luciérnagas dispersas
   ========================================================= */

/* Fondo floral real en toda la barra */
html body .site-header,
html body .site-header:not(.scrolled),
html body .site-header.scrolled{
  background:
    linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
    url("header-floral.png") center center / 100% 100% no-repeat !important;

  background-color:transparent !important;
  background-image:
    linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)),
    url("header-floral.png") !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  border:0 !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

/* Luciérnagas al frente del fondo, debajo del contenido */
html body .site-header > .dn-fireflies-layer{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:50 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:transparent !important;
}

/* Más pequeñas y elegantes para no competir con el floral */
html body .site-header .dn-firefly{
  position:absolute !important;
  display:block !important;
  width:var(--size) !important;
  height:var(--size) !important;
  border-radius:50% !important;
  background:#fff7b2 !important;
  box-shadow:
    0 0 3px rgba(255,255,220,1),
    0 0 7px rgba(255,222,72,.95),
    0 0 13px rgba(255,185,0,.72),
    0 0 20px rgba(255,165,0,.30) !important;
  z-index:51 !important;
}

/* Logo y menú siempre al frente */
html body .site-header > *:not(.dn-fireflies-layer){
  position:relative !important;
  z-index:100 !important;
  background:transparent !important;
}


/* =========================================================
   Dely Nativa 1.0.52 — jerarquía definitiva del header
   Fondo floral -> velo blanco -> luciérnagas -> logo/menu
   ========================================================= */

/* 0. CONTENEDOR */
html body .site-header,
html body .site-header:not(.scrolled),
html body .site-header.scrolled{
  position:sticky !important;
  top:0 !important;
  isolation:isolate !important;
  overflow:hidden !important;

  /* Floral al fondo, sin estirarlo verticalmente */
  background:
    url("header-floral.png") center 78% / 100% auto no-repeat !important;

  background-color:#fffdf5 !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 1. VELO BLANCO TRANSPARENTE SOBRE EL FLORAL */
html body .site-header::before,
html body .site-header:not(.scrolled)::before,
html body .site-header.scrolled::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;

  z-index:10 !important;
  pointer-events:none !important;

  background:rgba(255,255,255,.48) !important;
  background-image:none !important;
  opacity:1 !important;

  filter:none !important;
  transform:none !important;
  animation:none !important;
  visibility:visible !important;
}

/* 2. NO usamos ::after: evita capas viejas/fantasmas */
html body .site-header::after,
html body .site-header:not(.scrolled)::after,
html body .site-header.scrolled::after{
  content:none !important;
  display:none !important;
}

/* 3. LUCIÉRNAGAS: encima del velo, debajo del contenido */
html body .site-header > .dn-fireflies-layer{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;

  z-index:40 !important;
  pointer-events:none !important;
  overflow:hidden !important;

  display:block !important;
  visibility:visible !important;
  opacity:1 !important;

  background:transparent !important;
}

/* 4. LOGO + MENÚ: capa superior */
html body .site-header > *:not(.dn-fireflies-layer){
  position:relative !important;
  z-index:100 !important;
  background:transparent !important;
}

/* Mantener wrappers internos limpios */
html body .site-header .brand,
html body .site-header nav,
html body .site-header nav a,
html body .site-header .menu-toggle{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* El floral queda visualmente más bajo y lejos del texto */
@media(min-width:901px){
  html body .site-header,
  html body .site-header:not(.scrolled),
  html body .site-header.scrolled{
    background-position:center 88% !important;
  }
}

/* Móvil: conservar legibilidad */
@media(max-width:900px){
  html body .site-header,
  html body .site-header:not(.scrolled),
  html body .site-header.scrolled{
    background-size:auto 82% !important;
    background-position:center bottom !important;
  }

  html body .site-header::before{
    background:rgba(255,255,255,.56) !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.53 — jerarquía final del header
   1) Floral fondo
   2) Transparencia blanca
   3) Luciérnagas doradas
   4) Logo + menú
   ========================================================= */

/* 1) FLORAL AL FONDO */
html body .site-header,
html body .site-header:not(.scrolled),
html body .site-header.scrolled{
  position:sticky !important;
  top:0 !important;
  isolation:isolate !important;
  overflow:hidden !important;

  background:
    url("header-floral.png") center 86% / 100% auto no-repeat !important;
  background-color:#fffdf8 !important;

  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 2) TRANSPARENCIA BLANCA ENCIMA DEL FLORAL */
html body .site-header::before,
html body .site-header:not(.scrolled)::before,
html body .site-header.scrolled::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;

  z-index:10 !important;
  pointer-events:none !important;

  background:rgba(255,255,255,.52) !important;
  background-image:none !important;

  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  animation:none !important;
  visibility:visible !important;
}

/* No usar ::after para evitar capas viejas */
html body .site-header::after,
html body .site-header:not(.scrolled)::after,
html body .site-header.scrolled::after{
  content:none !important;
  display:none !important;
}

/* 3) LUCIÉRNAGAS DORADAS ENCIMA DE LA TRANSPARENCIA */
html body .site-header > .dn-fireflies-layer{
  position:absolute !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;

  z-index:40 !important;
  pointer-events:none !important;
  overflow:hidden !important;

  display:block !important;
  visibility:visible !important;
  opacity:1 !important;

  background:transparent !important;
  box-shadow:none !important;
}

/* Más naturales: pequeñas, luminosas y sin formar patrón */
html body .site-header .dn-firefly{
  position:absolute !important;
  display:block !important;

  width:var(--size) !important;
  height:var(--size) !important;
  border-radius:50% !important;

  background:#fff6aa !important;

  box-shadow:
    0 0 3px rgba(255,255,220,1),
    0 0 7px rgba(255,223,72,.96),
    0 0 13px rgba(255,187,0,.76),
    0 0 20px rgba(255,165,0,.32) !important;

  z-index:41 !important;
}

/* 4) LOGO + MENÚ ARRIBA DE TODO */
html body .site-header > *:not(.dn-fireflies-layer){
  position:relative !important;
  z-index:100 !important;
  background:transparent !important;
}

/* Limpieza de wrappers */
html body .site-header .brand,
html body .site-header nav,
html body .site-header nav ul,
html body .site-header nav li,
html body .site-header nav a,
html body .site-header .menu-toggle{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Móvil */
@media(max-width:900px){
  html body .site-header,
  html body .site-header:not(.scrolled),
  html body .site-header.scrolled{
    background-size:auto 82% !important;
    background-position:center bottom !important;
  }

  html body .site-header::before{
    background:rgba(255,255,255,.58) !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.54
   Floral FIJO en el espacio superior.
   Header transparente FLOTANTE e independiente.
   Luciérnagas pertenecen al header.
   ========================================================= */

/* El body crea el espacio floral de fondo.
   NO forma parte del header sticky. */
html body{
  position:relative !important;
}

html body::before{
  content:'' !important;
  display:block !important;

  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;

  width:100% !important;
  height:68px !important;

  z-index:0 !important;
  pointer-events:none !important;

  background:
    #fffdf8 url("header-floral.png") center bottom / 100% auto no-repeat !important;

  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  animation:none !important;
}

/* HEADER: ya NO carga ni transporta el floral */
html body .site-header,
html body .site-header:not(.scrolled),
html body .site-header.scrolled{
  position:sticky !important;
  top:0 !important;
  z-index:40 !important;

  background:rgba(255,255,255,.36) !important;
  background-color:rgba(255,255,255,.36) !important;
  background-image:none !important;

  border:0 !important;
  box-shadow:none !important;

  backdrop-filter:blur(7px) saturate(1.03) !important;
  -webkit-backdrop-filter:blur(7px) saturate(1.03) !important;

  isolation:isolate !important;
  overflow:hidden !important;
}

/* No más velo floral pegado al header */
html body .site-header::before,
html body .site-header:not(.scrolled)::before,
html body .site-header.scrolled::before,
html body .site-header::after,
html body .site-header:not(.scrolled)::after,
html body .site-header.scrolled::after{
  content:none !important;
  display:none !important;
  background:none !important;
  animation:none !important;
}

/* LUCIÉRNAGAS: viajan con la barra transparente */
html body .site-header > .dn-fireflies-layer{
  position:absolute !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;

  z-index:40 !important;
  pointer-events:none !important;
  overflow:hidden !important;

  display:block !important;
  visibility:visible !important;
  opacity:1 !important;

  background:transparent !important;
}

/* LOGO/MENÚ al frente */
html body .site-header > *:not(.dn-fireflies-layer){
  position:relative !important;
  z-index:100 !important;
  background:transparent !important;
}

/* El contenido normal queda por encima del fondo decorativo del body */
html body #main,
html body footer{
  position:relative;
  z-index:1;
}

/* En móvil el header actual mide 78px */
@media(max-width:760px){
  html body::before{
    height:78px !important;
    background-size:auto 78px !important;
    background-position:center bottom !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.55 — MOBILE ORGANIZADO
   Solo <= 760px. Escritorio intacto.
   ========================================================= */
@media(max-width:760px){

  /* ---------- BASE ---------- */
  html{
    scroll-padding-top:70px !important;
    overflow-x:hidden;
  }

  body{
    overflow-x:hidden;
  }

  /* Floral fijo en el espacio superior */
  html body::before{
    height:70px !important;
    background-size:auto 70px !important;
    background-position:center bottom !important;
  }

  /* ---------- HEADER ---------- */
  html body .site-header,
  html body .site-header:not(.scrolled),
  html body .site-header.scrolled{
    height:70px !important;
    min-height:70px !important;
    padding:5px 16px !important;
    margin:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;

    background:rgba(255,255,255,.34) !important;
    backdrop-filter:blur(7px) saturate(1.03) !important;
    -webkit-backdrop-filter:blur(7px) saturate(1.03) !important;

    overflow:visible !important;
  }

  .site-header .brand{
    flex:0 0 auto !important;
    width:auto !important;
    margin:0 !important;
  }

  .site-header .brand img{
    width:76px !important;
    height:auto !important;
    display:block !important;
  }

  /* Botón menú limpio y cómodo */
  .site-header .menu-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;

    min-width:86px !important;
    height:38px !important;
    padding:0 13px !important;
    margin:0 !important;

    border:1px solid rgba(36,52,95,.16) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.72) !important;
    box-shadow:0 3px 12px rgba(36,52,95,.08) !important;

    color:var(--blue) !important;
    font-size:12px !important;
    font-weight:700 !important;
  }

  .site-header .menu-toggle span{
    font-size:17px !important;
    line-height:1 !important;
  }

  /* Menú desplegable móvil */
  html body .site-header nav{
    display:none !important;
    position:absolute !important;
    top:70px !important;
    left:10px !important;
    right:10px !important;

    width:auto !important;
    margin:0 !important;
    padding:10px !important;

    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:4px !important;

    background:rgba(255,255,255,.94) !important;
    backdrop-filter:blur(18px) saturate(1.06) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.06) !important;

    border:1px solid rgba(36,52,95,.10) !important;
    border-radius:18px !important;
    box-shadow:0 16px 35px rgba(36,52,95,.16) !important;

    z-index:200 !important;
  }

  html body .site-header nav.open{
    display:flex !important;
  }

  html body .site-header nav a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:44px !important;
    padding:10px 14px !important;

    border-radius:12px !important;
    color:var(--blue) !important;
    font-size:15px !important;
    font-weight:700 !important;
    text-align:center !important;
  }

  html body .site-header nav a:hover,
  html body .site-header nav a:focus-visible{
    background:rgba(248,183,38,.12) !important;
  }

  html body .site-header nav a::after{
    display:none !important;
  }

  /* Luciérnagas menos invasivas en móvil */
  html body .site-header > .dn-fireflies-layer{
    overflow:hidden !important;
  }

  html body .site-header .dn-firefly{
    transform:scale(.72);
  }

  /* ---------- HERO ---------- */
  .hero{
    min-height:790px !important;
    height:auto !important;
    max-height:none !important;
    padding-bottom:330px !important;
  }

  .hero-content{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:32px 20px 24px !important;
  }

  .eyebrow{
    font-size:10px !important;
    letter-spacing:.13em !important;
  }

  .hero h1{
    max-width:340px !important;
    margin:14px 0 12px !important;
    font-size:clamp(44px,13vw,62px) !important;
    line-height:.94 !important;
  }

  .slogan{
    max-width:320px !important;
    font-size:22px !important;
    line-height:1.22 !important;
  }

  .hero-description{
    max-width:330px !important;
    margin:15px 0 20px !important;
    font-size:14px !important;
    line-height:1.55 !important;
  }

  .actions{
    width:100% !important;
    max-width:330px !important;
    gap:11px !important;
  }

  .actions .button{
    width:100% !important;
    min-height:48px !important;
    padding:12px 17px !important;
  }

  .actions .text-link{
    align-self:center !important;
    margin-top:3px !important;
  }

  .hero-media{
    height:350px !important;
    bottom:38px !important;
  }

  .reference-window{
    width:720px !important;
    min-width:720px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }

  .origin-seal{
    width:82px !important;
    height:82px !important;
    left:20px !important;
    bottom:285px !important;
    transform:none !important;
  }

  .hero-bottom{
    min-height:38px !important;
    padding:9px 16px !important;
    gap:8px !important;
  }

  .hero-bottom > span{
    font-size:8px !important;
  }

  .hero-bottom > a{
    font-size:10px !important;
    white-space:nowrap !important;
  }

  /* ---------- SECCIONES ---------- */
  .section-pad{
    padding:46px 18px 54px !important;
  }

  .section-top{
    padding-top:4px !important;
    align-items:flex-start !important;
  }

  .section-top > span{
    font-size:10px !important;
  }

  .section-heading{
    margin:24px 0 28px !important;
  }

  h2{
    font-size:clamp(38px,11vw,52px) !important;
    line-height:.98 !important;
  }

  /* ---------- PRODUCTOS ---------- */
  #productos,
  #contacto{
    background-size:auto 100% !important;
    background-position:center center !important;
  }

  #productos .section-heading > p{
    max-width:100% !important;
    margin-top:15px !important;
    font-size:20px !important;
    line-height:1.35 !important;
  }

  .group-heading{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    align-items:center !important;
    gap:6px 10px !important;
  }

  .group-heading h3{
    font-size:18px !important;
  }

  .group-heading > span{
    font-size:10px !important;
    text-align:right !important;
  }

  .rail-controls{
    grid-column:1/-1 !important;
    width:auto !important;
    justify-content:flex-end !important;
    margin:2px 0 0 !important;
  }

  .product-rail{
    gap:12px !important;
    scroll-padding-inline:3px !important;
  }

  .product-card{
    flex:0 0 86% !important;
    min-width:0 !important;
  }

  .product-visual{
    height:230px !important;
  }

  .product-type{
    font-size:44px !important;
  }

  /* ---------- NOSOTROS ---------- */
  #nosotros .essence-intro{
    gap:20px !important;
    margin:24px 0 !important;
  }

  #nosotros .essence-intro h2{
    font-size:clamp(38px,11vw,52px) !important;
  }

  #nosotros .essence-copy p{
    font-size:14px !important;
    line-height:1.65 !important;
  }

  #nosotros .purpose-grid{
    gap:22px !important;
    padding:24px 0 !important;
  }

  #nosotros .purpose-grid article{
    padding:0 0 20px !important;
  }

  #nosotros .purpose-grid h3{
    font-size:34px !important;
  }

  #nosotros .values{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin-top:26px !important;
  }

  #nosotros .values span{
    font-size:28px !important;
    text-align:left !important;
  }

  /* ---------- RECETAS ---------- */
  .recipe-grid{
    gap:18px !important;
  }

  .recipe-card{
    padding-bottom:24px !important;
  }

  .recipe-card h3{
    font-size:30px !important;
    line-height:1.08 !important;
  }

  .recipe-card > p{
    font-size:14px !important;
    line-height:1.6 !important;
  }

  /* ---------- CONTACTO ---------- */
  .contact-grid{
    gap:24px !important;
    margin-top:24px !important;
  }

  .contact-form{
    padding:20px 16px !important;
    border-radius:16px !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select{
    min-height:46px !important;
    font-size:16px !important; /* evita zoom de iOS */
  }

  .contact-form textarea{
    min-height:120px !important;
  }

  /* ---------- FOOTER ---------- */
  .footer-top{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:14px !important;
  }

  .footer-top p{
    font-size:18px !important;
    line-height:1.35 !important;
  }

  .footer-bottom{
    gap:10px !important;
    padding-bottom:78px !important;
  }

  .footer-bottom > div{
    margin-right:0 !important;
  }

  /* WhatsApp sin tapar contenido */
  .whatsapp-float{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    right:12px !important;
    bottom:max(12px,env(safe-area-inset-bottom)) !important;
  }

  /* Dialogs */
  dialog{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    padding:24px 18px !important;
  }
}

/* Pantallas muy angostas */
@media(max-width:390px){
  .site-header .brand img{
    width:68px !important;
  }

  .site-header .menu-toggle{
    min-width:80px !important;
    padding:0 11px !important;
  }

  .hero{
    min-height:760px !important;
    padding-bottom:310px !important;
  }

  .hero h1{
    font-size:42px !important;
  }

  .slogan{
    font-size:20px !important;
  }

  .product-card{
    flex-basis:92% !important;
  }

  #nosotros .values span{
    font-size:25px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.56 — MOBILE REFINADO
   Corrige menú, hero integrado y alineación general.
   SOLO <= 760px
   ========================================================= */
@media(max-width:760px){

  /* ---------- HEADER ---------- */
  html body .site-header,
  html body .site-header:not(.scrolled),
  html body .site-header.scrolled{
    height:64px !important;
    min-height:64px !important;
    padding:4px 14px !important;
    gap:10px !important;
    overflow:visible !important;
  }

  html body::before{
    height:64px !important;
    background-size:auto 64px !important;
  }

  .site-header .brand img{
    width:72px !important;
  }

  .site-header .menu-toggle{
    min-width:auto !important;
    width:auto !important;
    height:36px !important;
    padding:0 12px !important;
    gap:6px !important;
    font-size:12px !important;
    border-radius:18px !important;
  }

  .site-header .menu-toggle span{
    font-size:16px !important;
  }

  /* Menú compacto, flotante y pegado al botón */
  html body .site-header nav{
    display:none !important;
    position:absolute !important;
    top:58px !important;
    right:10px !important;
    left:auto !important;

    width:188px !important;
    max-width:calc(100vw - 20px) !important;

    margin:0 !important;
    padding:7px !important;
    gap:2px !important;

    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(36,52,95,.10) !important;
    border-radius:15px !important;
    box-shadow:0 12px 30px rgba(36,52,95,.16) !important;

    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }

  html body .site-header nav.open{
    display:flex !important;
  }

  html body .site-header nav a{
    min-height:36px !important;
    padding:7px 10px !important;
    border-radius:9px !important;
    justify-content:flex-start !important;
    text-align:left !important;
    font-size:13px !important;
    line-height:1.15 !important;
  }

  /* ---------- HERO INTEGRADO ---------- */
  .hero{
    min-height:720px !important;
    height:calc(100svh - 64px) !important;
    max-height:820px !important;
    padding:0 !important;
    background:#f3dcb3 !important;
    overflow:hidden !important;
  }

  /* El video/poster vuelve a ser fondo del hero completo */
  .hero-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    bottom:auto !important;
    z-index:-2 !important;
    overflow:hidden !important;
  }

  .reference-window{
    position:absolute !important;
    inset:0 !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    min-width:0 !important;
    height:100% !important;
    aspect-ratio:auto !important;
    transform:none !important;
    overflow:hidden !important;
  }

  .reference-window img,
  .poster,
  .hero-video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:64% center !important;
  }

  /* Degradado fuerte arriba para texto, abriendo hacia la familia */
  .hero::after{
    content:'' !important;
    position:absolute !important;
    inset:0 !important;
    z-index:-1 !important;
    pointer-events:none !important;
    background:
      linear-gradient(
        180deg,
        rgba(249,239,222,.98) 0%,
        rgba(249,239,222,.96) 33%,
        rgba(249,239,222,.82) 50%,
        rgba(249,239,222,.30) 68%,
        rgba(249,239,222,.05) 86%,
        transparent 100%
      ) !important;
  }

  .hero-content{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    max-width:360px !important;
    margin:0 !important;
    padding:38px 22px 0 !important;
  }

  .hero .eyebrow{
    font-size:9px !important;
    letter-spacing:.15em !important;
    line-height:1.2 !important;
  }

  .hero h1{
    max-width:320px !important;
    margin:18px 0 12px !important;
    font-size:clamp(48px,13vw,58px) !important;
    line-height:.94 !important;
    letter-spacing:-.035em !important;
  }

  .slogan{
    max-width:310px !important;
    margin:0 !important;
    font-size:23px !important;
    line-height:1.18 !important;
  }

  .hero-description{
    max-width:300px !important;
    margin:16px 0 0 !important;
    font-size:14px !important;
    line-height:1.5 !important;
  }

  .origin-seal{
    width:70px !important;
    height:70px !important;
    left:18px !important;
    bottom:118px !important;
    z-index:2 !important;
  }

  .hero-bottom{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:2 !important;
    min-height:34px !important;
    padding:8px 16px !important;
  }

  /* ---------- ALINEACIÓN GENERAL ---------- */
  .section-pad{
    padding:42px 22px 50px !important;
  }

  .section-top{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:6px !important;
    padding-top:15px !important;
    text-align:left !important;
  }

  .section-top > *,
  .section-top p,
  .section-top span{
    width:auto !important;
    max-width:100% !important;
    margin:0 !important;
    text-align:left !important;
  }

  .section-top > span:last-child:not(:first-child){
    font-size:10px !important;
    line-height:1.35 !important;
    letter-spacing:.08em !important;
  }

  .section-heading{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:14px !important;
    margin:24px 0 30px !important;
  }

  .section-heading > h2,
  .section-heading > p{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    text-align:left !important;
  }

  .section-heading > p{
    font-size:14px !important;
    line-height:1.5 !important;
  }

  h2{
    font-size:clamp(36px,10.5vw,48px) !important;
    line-height:.98 !important;
  }

  /* ---------- PRODUCTOS ---------- */
  #productos .section-top > p{
    font-size:15px !important;
    line-height:1.45 !important;
  }

  #productos .section-heading > p{
    font-size:19px !important;
    line-height:1.30 !important;
  }

  .group-heading{
    grid-template-columns:1fr !important;
    gap:4px !important;
  }

  .group-heading > span{
    text-align:left !important;
  }

  .rail-controls{
    justify-content:flex-start !important;
    margin-top:8px !important;
  }

  /* ---------- NOSOTROS ---------- */
  #nosotros .section-top{
    gap:5px !important;
  }

  #nosotros .essence-intro{
    display:block !important;
  }

  #nosotros .essence-intro h2{
    margin-bottom:22px !important;
  }

  #nosotros .purpose-grid{
    grid-template-columns:1fr !important;
  }

  /* ---------- RECETAS ---------- */
  #recetas .section-top{
    gap:6px !important;
  }

  #recetas .section-heading{
    margin-bottom:24px !important;
  }

  /* ---------- CONTACTO ---------- */
  #contacto .section-top{
    gap:5px !important;
  }

  #contacto .section-top > span:last-child{
    max-width:260px !important;
  }

  #contacto .section-heading h2{
    max-width:320px !important;
    font-size:clamp(40px,11vw,50px) !important;
    line-height:.96 !important;
  }

  .contact-grid{
    display:block !important;
    margin-top:20px !important;
  }

  .contact-copy{
    margin-bottom:28px !important;
  }

  .contact-paths{
    margin:24px 0 28px !important;
  }

  .contact-paths > a{
    padding:16px 18px !important;
    margin-bottom:12px !important;
    border:1px solid rgba(36,52,95,.08) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.28) !important;
  }

  .contact-copy address > a:first-child{
    font-size:34px !important;
  }

  .contact-form{
    width:100% !important;
    margin:0 !important;
    padding:22px 18px !important;
  }

  .contact-form h3{
    font-size:26px !important;
    line-height:1.15 !important;
  }

  .form-row{
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  /* ---------- FOOTER / WHATSAPP ---------- */
  .whatsapp-float{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    right:12px !important;
    bottom:14px !important;
  }
}

/* Extra compacto */
@media(max-width:390px){
  .hero h1{
    font-size:46px !important;
  }

  .hero-content{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .section-pad{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  html body .site-header nav{
    width:176px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.57 — refinamiento visual general
   Hero nítido + niña visible + formularios translúcidos
   + textos protegidos de fondos florales
   ========================================================= */

/* ---------------------------------------------------------
   HERO — quitar velo excesivo sin perder legibilidad
   --------------------------------------------------------- */

/* Escritorio: menos velo sobre la familia */
.hero::after{
  background:
    linear-gradient(
      90deg,
      rgba(249,239,222,.94) 0%,
      rgba(249,239,222,.80) 31%,
      rgba(249,239,222,.36) 53%,
      rgba(249,239,222,.08) 72%,
      transparent 100%
    ) !important;
}

/* Mantener la imagen/video con contraste real */
.reference-window img,
.poster,
.hero-video{
  filter:none !important;
  opacity:1 !important;
}

/* ---------------------------------------------------------
   CONTACTO — formulario más transparente
   --------------------------------------------------------- */
.contact-form{
  background:rgba(246,234,219,.58) !important;
  backdrop-filter:blur(5px) !important;
  -webkit-backdrop-filter:blur(5px) !important;
  border:1px solid rgba(42,55,96,.08) !important;
  box-shadow:0 12px 34px rgba(36,52,95,.06) !important;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
  background:rgba(255,255,255,.72) !important;
}

/* ---------------------------------------------------------
   PROTECCIÓN DE TEXTO CONTRA FLORES
   --------------------------------------------------------- */

/* Los encabezados pequeños no deben caer encima de flores fuertes */
#productos .section-top,
#contacto .section-top{
  position:relative !important;
  z-index:2 !important;
  padding-inline:8px !important;
}

#productos .section-top::before,
#contacto .section-top::before{
  content:'' !important;
  position:absolute !important;
  inset:-8px -10px !important;
  z-index:-1 !important;
  pointer-events:none !important;
  border-radius:12px !important;
  background:linear-gradient(
    90deg,
    rgba(255,253,246,.88),
    rgba(255,253,246,.62),
    rgba(255,253,246,.18)
  ) !important;
}

/* Contacto: despejar la zona superior del texto */
#contacto .section-heading,
#contacto .contact-grid{
  position:relative !important;
  z-index:2 !important;
}

/* Productos: títulos y subtítulos siempre legibles */
#productos .section-heading,
#productos .product-groups{
  position:relative !important;
  z-index:2 !important;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media(max-width:760px){

  /* Hero: familia visible, sin velo lechoso sobre toda la foto */
  .hero::after{
    background:
      linear-gradient(
        180deg,
        rgba(249,239,222,.96) 0%,
        rgba(249,239,222,.90) 25%,
        rgba(249,239,222,.58) 43%,
        rgba(249,239,222,.18) 58%,
        rgba(249,239,222,.02) 72%,
        transparent 100%
      ) !important;
  }

  /* Reencuadre para mostrar también a la niña del lado derecho */
  .reference-window img,
  .poster,
  .hero-video{
    object-position:58% center !important;
  }

  /* El contenido textual queda arriba, pero deja respirar la imagen */
  .hero-content{
    max-width:350px !important;
    padding-top:34px !important;
  }

  .hero h1{
    max-width:305px !important;
  }

  .hero-description{
    max-width:290px !important;
  }

  /* Formulario aún más ligero en móvil */
  .contact-form{
    background:rgba(246,234,219,.48) !important;
    backdrop-filter:blur(4px) !important;
    -webkit-backdrop-filter:blur(4px) !important;
    border-color:rgba(42,55,96,.06) !important;
  }

  /* Flores de contacto: bajar visualmente para no chocar con encabezados */
  #contacto{
    background-position:center 72px !important;
  }

  /* Flores de productos: mismas reglas */
  #productos{
    background-position:center 68px !important;
  }

  /* Encabezados móviles con una pequeña zona limpia debajo */
  #productos .section-top,
  #contacto .section-top{
    padding:8px 10px !important;
    margin-bottom:10px !important;
  }

  #productos .section-top::before,
  #contacto .section-top::before{
    inset:0 !important;
    background:rgba(255,253,246,.78) !important;
    border-radius:10px !important;
  }

  /* Contacto: superior alineado, sin texto encima de flores */
  #contacto .section-top > span:last-child{
    max-width:220px !important;
  }

  /* Título contacto con un poco más de aire */
  #contacto .section-heading{
    margin-top:18px !important;
  }

  /* Footer */
  footer{
    position:relative !important;
    z-index:2 !important;
    background:rgba(246,234,219,.92) !important;
  }
}

/* Extra angosto */
@media(max-width:390px){
  .reference-window img,
  .poster,
  .hero-video{
    object-position:56% center !important;
  }

  .hero h1{
    font-size:45px !important;
  }

  .contact-form{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.58 — foco móvil en la niña
   ========================================================= */
@media(max-width:760px){
  .reference-window img,
  .poster,
  .hero-video{
    object-position:76% center !important;
  }
}

@media(max-width:390px){
  .reference-window img,
  .poster,
  .hero-video{
    object-position:79% center !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.59 — MOBILE HERO
   Caras libres + texto abajo sobre difuminado.
   SOLO móvil.
   ========================================================= */
@media(max-width:760px){

  /* Hero con foto limpia: sin velo arriba */
  .hero::after{
    content:'' !important;
    position:absolute !important;
    inset:auto 0 0 0 !important;
    height:58% !important;
    z-index:1 !important;
    pointer-events:none !important;

    background:
      linear-gradient(
        180deg,
        rgba(249,239,222,0) 0%,
        rgba(249,239,222,.12) 16%,
        rgba(249,239,222,.52) 40%,
        rgba(249,239,222,.86) 67%,
        rgba(249,239,222,.97) 100%
      ) !important;

    backdrop-filter:blur(1.5px) !important;
    -webkit-backdrop-filter:blur(1.5px) !important;
  }

  /* Mantener la niña y el grupo visibles */
  .reference-window img,
  .poster,
  .hero-video{
    object-position:76% center !important;
    filter:none !important;
    opacity:1 !important;
  }

  /* Todo el texto se baja al área difuminada */
  .hero-content{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:48px !important;

    z-index:3 !important;

    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 22px 22px !important;
  }

  .hero .eyebrow{
    margin:0 0 8px !important;
    font-size:8px !important;
    letter-spacing:.14em !important;
  }

  .hero h1{
    max-width:300px !important;
    margin:0 0 8px !important;

    font-size:clamp(39px,10.5vw,48px) !important;
    line-height:.92 !important;
    letter-spacing:-.035em !important;
  }

  .slogan{
    max-width:310px !important;
    margin:0 0 9px !important;

    font-size:20px !important;
    line-height:1.12 !important;
  }

  .hero-description{
    max-width:315px !important;
    margin:0 !important;

    font-size:13px !important;
    line-height:1.42 !important;
  }

  /* El sello no compite con caras ni texto */
  .origin-seal{
    width:62px !important;
    height:62px !important;
    left:17px !important;
    top:92px !important;
    bottom:auto !important;
    z-index:2 !important;
    opacity:.88 !important;
  }

  /* Franja inferior por encima del degradado */
  .hero-bottom{
    z-index:4 !important;
  }
}

@media(max-width:390px){
  .reference-window img,
  .poster,
  .hero-video{
    object-position:79% center !important;
  }

  .hero-content{
    bottom:44px !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .hero h1{
    max-width:280px !important;
    font-size:39px !important;
  }

  .slogan{
    font-size:18px !important;
  }

  .hero-description{
    font-size:12.5px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.60 — menú móvil + zonas de texto limpias
   ========================================================= */

/* ---------------------------------------------------------
   PRODUCTOS / CONTACTO
   Ningún texto importante debe competir con flores.
   --------------------------------------------------------- */

/* Encabezados superiores siempre sobre una base limpia */
#productos .section-top,
#contacto .section-top{
  position:relative !important;
  z-index:5 !important;

  padding:10px 14px !important;
  border-radius:12px !important;

  background:rgba(255,253,247,.94) !important;
  box-shadow:0 1px 0 rgba(36,52,95,.035) !important;
}

/* El bloque de título también tiene una zona visual limpia,
   sin convertirlo en una tarjeta evidente. */
#productos .section-heading,
#contacto .contact-copy{
  position:relative !important;
  z-index:4 !important;
}

#productos .section-heading::before,
#contacto .contact-copy::before{
  content:'' !important;
  position:absolute !important;
  z-index:-1 !important;
  pointer-events:none !important;

  top:-18px !important;
  right:-22px !important;
  bottom:-18px !important;
  left:-22px !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,252,242,.97) 0%,
      rgba(255,252,242,.93) 58%,
      rgba(255,252,242,.70) 76%,
      rgba(255,252,242,0) 100%
    ) !important;

  filter:none !important;
}

/* Texto siempre arriba */
#productos .section-heading > *,
#contacto .contact-copy > *{
  position:relative !important;
  z-index:1 !important;
}

/* ---------------------------------------------------------
   MENÚ MÓVIL — blanco, compacto y hacia abajo
   --------------------------------------------------------- */
@media(max-width:760px){

  html body .site-header{
    overflow:visible !important;
  }

  /* Botón permanece compacto */
  html body .site-header .menu-toggle{
    position:relative !important;
    z-index:310 !important;

    width:auto !important;
    min-width:82px !important;
    height:36px !important;

    padding:0 12px !important;
    margin:0 !important;

    background:#ffffff !important;
    color:var(--blue) !important;

    border:1px solid rgba(36,52,95,.14) !important;
    border-radius:999px !important;
    box-shadow:0 4px 14px rgba(36,52,95,.10) !important;

    font-size:12px !important;
  }

  /*
    Selector por ID para ganar a todas las reglas móviles antiguas.
    Se abre inmediatamente DEBAJO del header.
  */
  html body .site-header #navigation{
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:8px 14px 10px !important;

    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:2px !important;

    background:#ffffff !important;
    background-image:none !important;

    border:0 !important;
    border-top:1px solid rgba(36,52,95,.07) !important;
    border-radius:0 0 16px 16px !important;

    box-shadow:0 14px 28px rgba(36,52,95,.14) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    z-index:300 !important;
  }

  html body .site-header #navigation:not(.open){
    display:none !important;
  }

  html body .site-header #navigation.open{
    display:flex !important;
  }

  html body .site-header #navigation a{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:100% !important;
    min-height:38px !important;

    padding:8px 12px !important;
    margin:0 !important;

    background:#ffffff !important;
    color:var(--blue) !important;

    border:0 !important;
    border-radius:9px !important;

    box-shadow:none !important;
    text-shadow:none !important;

    font-size:14px !important;
    font-weight:700 !important;
    line-height:1.15 !important;
    text-align:left !important;
  }

  html body .site-header #navigation a:hover,
  html body .site-header #navigation a:focus-visible{
    background:#fff8e8 !important;
  }

  html body .site-header #navigation a::before,
  html body .site-header #navigation a::after{
    display:none !important;
    content:none !important;
  }

  /* -------------------------------------------------------
     FLORES EN MÓVIL: crear distancia real de los títulos
     ------------------------------------------------------- */

  #productos,
  #contacto{
    position:relative !important;
  }

  #productos .section-top,
  #contacto .section-top{
    margin-bottom:26px !important;
    padding:9px 12px !important;

    background:#fffdf7 !important;
    border-radius:10px !important;
  }

  /* El título de Productos no se monta en la franja floral */
  #productos .section-heading{
    margin-top:72px !important;
    padding:12px 2px 6px !important;
  }

  #productos .section-heading::before{
    top:-24px !important;
    right:-16px !important;
    bottom:-12px !important;
    left:-16px !important;

    background:rgba(255,252,242,.94) !important;
    border-radius:14px !important;
  }

  #productos .section-heading h2{
    font-size:clamp(38px,10.5vw,48px) !important;
    line-height:.96 !important;
  }

  #productos .section-heading > p{
    margin-top:12px !important;
    font-size:18px !important;
    line-height:1.28 !important;
  }

  /* Contacto: franja floral arriba, texto empieza debajo */
  #contacto .contact-grid{
    margin-top:70px !important;
  }

  #contacto .contact-copy{
    padding-top:4px !important;
  }

  #contacto .contact-copy::before{
    top:-24px !important;
    right:-16px !important;
    bottom:-20px !important;
    left:-16px !important;

    background:rgba(255,252,242,.92) !important;
    border-radius:14px !important;
  }

  /* Textos pequeños que estaban quedando sobre las flores */
  #productos .section-top > *,
  #contacto .section-top > *{
    position:relative !important;
    z-index:2 !important;
    max-width:100% !important;
  }
}

/* ---------------------------------------------------------
   ESCRITORIO / TABLET
   Crear colchón sutil contra el floral sin mover el layout.
   --------------------------------------------------------- */
@media(min-width:761px){
  #productos .section-heading{
    padding:16px 22px !important;
    border-radius:18px !important;
  }

  #contacto .contact-copy{
    padding:18px 22px !important;
    border-radius:18px !important;
  }

  #productos .section-heading::before,
  #contacto .contact-copy::before{
    background:rgba(255,252,242,.78) !important;
    border-radius:18px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.61 — MOBILE SIN CUADROS
   Flores visibles + textos más compactos + sello mejor ubicado
   ========================================================= */

/* ---------------------------------------------------------
   REVIERTE los fondos/cajas agregados en 1.0.60
   --------------------------------------------------------- */
#productos .section-top,
#contacto .section-top{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
}

#productos .section-top::before,
#contacto .section-top::before,
#productos .section-heading::before,
#contacto .contact-copy::before{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}

/* Escritorio: quitar también los colchones visuales de 1.0.60 */
@media(min-width:761px){
  #productos .section-heading,
  #contacto .contact-copy{
    padding:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media(max-width:760px){

  /* ---------- HERO: sello arriba, fuera de la actriz ---------- */
  .origin-seal{
    top:72px !important;
    left:14px !important;
    bottom:auto !important;

    width:58px !important;
    height:58px !important;

    opacity:.82 !important;
    transform:none !important;
  }

  /* ---------- PRODUCTOS ---------- */
  #productos .section-top{
    margin:0 0 18px !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:4px !important;
  }

  #productos .section-top > span,
  #productos .section-top > p{
    max-width:76% !important;
    margin:0 !important;

    font-size:9px !important;
    line-height:1.28 !important;
    letter-spacing:.12em !important;
    text-align:left !important;
  }

  /* El título vuelve a respirar sobre el floral, sin caja */
  #productos .section-heading{
    margin:20px 0 24px !important;
    padding:0 !important;
    background:transparent !important;
  }

  #productos .section-heading h2{
    max-width:90% !important;
    margin:0 !important;

    font-size:clamp(34px,9.2vw,42px) !important;
    line-height:.94 !important;
    letter-spacing:-.025em !important;
  }

  #productos .section-heading > p{
    max-width:82% !important;
    margin:12px 0 0 !important;

    font-size:16px !important;
    line-height:1.28 !important;
  }

  /* Sube un poco el contenido para usar mejor los huecos del floral */
  #productos .product-groups{
    margin-top:16px !important;
  }

  /* ---------- CONTACTO ---------- */
  #contacto .section-top{
    margin:0 0 20px !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:4px !important;
  }

  #contacto .section-top > span{
    max-width:72% !important;
    margin:0 !important;

    font-size:9px !important;
    line-height:1.28 !important;
    letter-spacing:.10em !important;
    text-align:left !important;
  }

  #contacto .section-heading{
    margin:18px 0 22px !important;
    padding:0 !important;
  }

  #contacto .section-heading h2{
    max-width:88% !important;

    font-size:clamp(36px,9.8vw,44px) !important;
    line-height:.94 !important;
    letter-spacing:-.02em !important;
  }

  #contacto .section-heading > p{
    max-width:84% !important;
    margin-top:10px !important;

    font-size:14px !important;
    line-height:1.42 !important;
  }

  #contacto .contact-grid{
    margin-top:26px !important;
  }

  #contacto .contact-copy{
    padding:0 !important;
    margin:0 0 28px !important;
    background:transparent !important;
  }

  #contacto .contact-copy > *{
    max-width:92% !important;
  }

  /* Mantener el formulario translúcido, pero no opaco */
  #contacto .contact-form{
    background:rgba(246,234,219,.42) !important;
    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter:blur(3px) !important;
  }

  /* ---------- GENERAL: títulos que no invadan decoraciones ---------- */
  #productos h2,
  #contacto h2{
    text-wrap:balance;
  }

  #productos p,
  #contacto p{
    text-wrap:pretty;
  }
}

/* Extra angosto */
@media(max-width:390px){
  #productos .section-heading h2{
    font-size:33px !important;
    max-width:88% !important;
  }

  #productos .section-heading > p{
    font-size:15px !important;
    max-width:80% !important;
  }

  #contacto .section-heading h2{
    font-size:35px !important;
    max-width:86% !important;
  }

  .origin-seal{
    top:68px !important;
    width:54px !important;
    height:54px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.62 — móvil: sin sello de trigo + título compacto
   ========================================================= */
@media(max-width:760px){

  /* Quitar por completo el sello/círculo del trigo en móvil */
  .origin-seal{
    display:none !important;
    visibility:hidden !important;
  }

  /* Productos: título más pequeño para respetar el floral */
  #productos .section-heading h2{
    max-width:78% !important;
    font-size:clamp(28px,7.8vw,36px) !important;
    line-height:.94 !important;
    letter-spacing:-.02em !important;
  }

  #productos .section-heading > p{
    max-width:76% !important;
    font-size:14px !important;
    line-height:1.24 !important;
  }

  /* Menos espacio vertical para que el bloque quede dentro del hueco limpio */
  #productos .section-heading{
    margin:14px 0 20px !important;
  }

  #productos .group-heading h3{
    font-size:16px !important;
  }

  #productos .group-heading > span{
    font-size:9px !important;
  }
}

@media(max-width:390px){
  #productos .section-heading h2{
    max-width:76% !important;
    font-size:27px !important;
  }

  #productos .section-heading > p{
    max-width:74% !important;
    font-size:13px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.63 — MOBILE AJUSTES FINALES
   ========================================================= */
@media(max-width:760px){

  /* PRODUCTOS: quitar título grande */
  #productos .section-heading h2{
    display:none !important;
  }

  /* Mantener la frase secundaria en su sitio */
  #productos .section-heading > p{
    max-width:82% !important;
    margin:0 !important;
    font-size:14px !important;
    line-height:1.28 !important;
  }

  /* 01 / NUESTRAS PASTAS más grande en la misma posición */
  #productos .section-top > span:first-child{
    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:.14em !important;
    line-height:1.2 !important;
  }

  /* CONTACTO: quitar título grande */
  #contacto .section-heading h2{
    display:none !important;
  }

  /* Texto secundario más grande en la misma zona */
  #contacto .section-heading > p{
    max-width:92% !important;
    margin:0 !important;
    font-size:18px !important;
    line-height:1.38 !important;
  }

  /* MENÚ: panel pequeño pegado a la derecha */
  html body .site-header #navigation{
    position:absolute !important;
    top:100% !important;
    right:10px !important;
    left:auto !important;

    width:190px !important;
    max-width:calc(100vw - 20px) !important;

    padding:7px !important;
    margin:0 !important;

    background:#ffffff !important;
    border:1px solid rgba(36,52,95,.10) !important;
    border-radius:0 0 14px 14px !important;
    box-shadow:0 12px 24px rgba(36,52,95,.14) !important;

    align-items:stretch !important;
  }

  html body .site-header #navigation a{
    width:100% !important;
    min-height:36px !important;
    padding:8px 10px !important;

    font-size:13px !important;
    line-height:1.15 !important;
    text-align:left !important;
    justify-content:flex-start !important;
  }
}

@media(max-width:390px){
  html body .site-header #navigation{
    width:178px !important;
  }

  #contacto .section-heading > p{
    font-size:17px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.64 — MOBILE posiciones marcadas por usuario
   SOLO <= 760px
   ========================================================= */
@media(max-width:760px){

  /* PRODUCTOS:
     subir 01 / NUESTRAS PASTAS y quitar frase sobre las flores */
  #productos .section-top{
    transform:translateY(-18px) !important;
    margin-bottom:-6px !important;
  }

  #productos .section-top > span:first-child{
    font-size:13px !important;
    font-weight:700 !important;
    letter-spacing:.13em !important;
    line-height:1.15 !important;
  }

  /* "Encuentra tu favorita y hazla parte de tu mesa." */
  #productos .section-heading > p{
    display:none !important;
  }

  /* Evita hueco dejado por el texto eliminado */
  #productos .section-heading{
    display:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  #productos .product-groups{
    margin-top:0 !important;
  }

  /* CONTACTO:
     quitar "Hagamos lugar en tu mesa." */
  #contacto .section-heading h2{
    display:none !important;
  }

  /* HABLEMOS más grande, conservando ese lugar */
  #contacto .section-top > span:first-child{
    font-size:13px !important;
    font-weight:700 !important;
    letter-spacing:.12em !important;
    line-height:1.15 !important;
  }

  /* Mantener la frase pequeña superior secundaria,
     pero sin invadir el floral */
  #contacto .section-top > span:last-child{
    font-size:9px !important;
    line-height:1.25 !important;
    max-width:82% !important;
  }

  /* "Para tu casa, tu tienda..." más visible en su posición */
  #contacto .section-heading{
    display:block !important;
    margin:12px 0 22px !important;
    padding:0 !important;
  }

  #contacto .section-heading > p{
    display:block !important;
    max-width:92% !important;
    margin:0 !important;
    font-size:17px !important;
    line-height:1.42 !important;
  }

  /* Quita cualquier caja/fondo residual de estos bloques */
  #productos .section-top,
  #contacto .section-top,
  #contacto .section-heading{
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    border-radius:0 !important;
  }
}

@media(max-width:390px){
  #productos .section-top{
    transform:translateY(-15px) !important;
  }

  #productos .section-top > span:first-child,
  #contacto .section-top > span:first-child{
    font-size:12px !important;
  }

  #contacto .section-heading > p{
    font-size:16px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.65 — MOBILE ONLY: ocultar textos exactos
   ========================================================= */
@media(max-width:760px){

  /* Productos: quitar completamente el título y la frase editorial */
  #productos .section-heading h2,
  #productos .section-heading > p{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  #productos .section-heading{
    display:none !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  /* Contacto: quitar "Hagamos lugar en tu mesa." solo en móvil */
  #contacto .section-heading h2,
  #contacto .contact-heading h2,
  #contacto h2#contact-title,
  #contacto [data-mobile-hide-title]{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  /* Mantener visible y más grande la frase secundaria */
  #contacto .section-heading > p,
  #contacto .contact-heading > p{
    display:block !important;
    visibility:visible !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    font-size:17px !important;
    line-height:1.4 !important;
    max-width:94% !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.66 — MOBILE: ocultar SIN colapsar espacios
   ========================================================= */
@media(max-width:760px){

  /* PRODUCTOS:
     Mantener el hueco editorial original para que el contenido
     de Mercado General NO suba sobre la franja floral. */
  #productos .section-heading{
    display:block !important;
    visibility:hidden !important;

    height:128px !important;
    min-height:128px !important;
    max-height:128px !important;

    margin:0 0 18px !important;
    padding:0 !important;

    overflow:hidden !important;
    pointer-events:none !important;
  }

  #productos .section-heading h2,
  #productos .section-heading > p{
    display:block !important;
    visibility:hidden !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;
  }

  /* CONTACTO:
     Ocultar Hagamos lugar..., pero conservar su altura para que
     "Para tu casa..." permanezca exactamente debajo del floral. */
  #contacto #contact-title{
    display:block !important;
    visibility:hidden !important;

    height:104px !important;
    min-height:104px !important;
    max-height:104px !important;

    margin:0 0 10px !important;
    padding:0 !important;

    overflow:hidden !important;
    pointer-events:none !important;
  }

  /* La frase secundaria sigue visible en su posición */
  #contacto .contact-copy > p{
    display:block !important;
    visibility:visible !important;

    margin:0 !important;
    padding:0 !important;

    font-size:17px !important;
    line-height:1.42 !important;
    max-width:94% !important;
  }

  /* Revertir cualquier regla previa que haya subido estos bloques */
  #productos .product-groups{
    margin-top:0 !important;
  }

  #contacto .contact-grid{
    margin-top:26px !important;
  }
}

@media(max-width:390px){
  #productos .section-heading{
    height:112px !important;
    min-height:112px !important;
    max-height:112px !important;
  }

  #contacto #contact-title{
    height:92px !important;
    min-height:92px !important;
    max-height:92px !important;
  }

  #contacto .contact-copy > p{
    font-size:16px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.67 — MOBILE SOLO HABLEMOS
   No modifica Productos ni Hero.
   ========================================================= */
@media(max-width:760px){

  /*
    Mantener 04 / HABLEMOS exactamente en su zona superior.
    Solo se corrige la frase que estaba atravesando las flores.
  */
  #contacto .section-top{
    margin-bottom:0 !important;
  }

  /* Conserva el hueco donde estaba el título oculto,
     para que el contenido no suba sobre la franja floral. */
  #contacto #contact-title{
    display:block !important;
    visibility:hidden !important;

    height:112px !important;
    min-height:112px !important;
    max-height:112px !important;

    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }

  /* "Para tu casa..." queda ya debajo de la franja floral */
  #contacto .contact-copy > p{
    display:block !important;
    visibility:visible !important;

    position:relative !important;
    z-index:3 !important;

    max-width:94% !important;
    margin:6px 0 18px !important;
    padding:0 !important;

    font-size:16px !important;
    line-height:1.42 !important;
  }

  /* Mantener las dos tarjetas donde están; solo pequeño aire */
  #contacto .contact-paths{
    margin-top:8px !important;
  }
}

@media(max-width:390px){
  #contacto #contact-title{
    height:102px !important;
    min-height:102px !important;
    max-height:102px !important;
  }

  #contacto .contact-copy > p{
    font-size:15px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.68 — MOBILE HABLEMOS por coordenadas
   Coordenadas calibradas:
   HABLEMOS x=11 y=6
   SUBTITULO x=10 y=25
   PARA_TU_CASA x=11 y=221
   TELEFONO x=15 y=272
   ========================================================= */
@media(max-width:760px){

  /* El bloque Hablemos usa coordenadas explícitas */
  #contacto{
    position:relative !important;
  }

  /* 04 / HABLEMOS + subtítulo superior */
  #contacto .section-top{
    position:relative !important;
    min-height:52px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  #contacto .section-top > span:first-child{
    position:absolute !important;
    left:11px !important;
    top:6px !important;

    margin:0 !important;
    padding:0 !important;

    font-size:12px !important;
    line-height:1 !important;
    letter-spacing:.12em !important;
    font-weight:700 !important;
  }

  #contacto .section-top > span:last-child{
    position:absolute !important;
    left:10px !important;
    top:25px !important;

    margin:0 !important;
    padding:0 !important;

    max-width:250px !important;
    font-size:9px !important;
    line-height:1.15 !important;
    letter-spacing:.08em !important;
  }

  /* Se mantiene oculto Hagamos lugar... */
  #contacto #contact-title{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  /* Área de contenido con altura suficiente para las coordenadas */
  #contacto .contact-grid{
    position:relative !important;
    display:block !important;

    min-height:430px !important;
    margin:0 !important;
    padding:0 !important;
  }

  #contacto .contact-copy{
    position:relative !important;
    min-height:430px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
  }

  /* Para tu casa... x=11 y=221 */
  #contacto .contact-copy > p{
    position:absolute !important;
    left:11px !important;
    top:221px !important;

    width:calc(100% - 28px) !important;
    max-width:340px !important;

    margin:0 !important;
    padding:0 !important;

    font-size:15px !important;
    line-height:1.38 !important;
    z-index:3 !important;
  }

  /* Teléfono x=15 y=272 */
  #contacto .contact-copy address{
    position:absolute !important;
    left:15px !important;
    top:272px !important;

    width:calc(100% - 30px) !important;
    margin:0 !important;
    padding:0 !important;

    font-style:normal !important;
    z-index:3 !important;
  }

  #contacto .contact-copy address > a:first-child{
    display:block !important;
    margin:0 0 12px !important;
    font-size:32px !important;
    line-height:1.05 !important;
  }

  /* Tarjetas comienzan debajo del teléfono, sin invadir el floral */
  #contacto .contact-paths{
    position:absolute !important;
    left:11px !important;
    right:11px !important;
    top:334px !important;

    margin:0 !important;
    padding:0 !important;
    z-index:3 !important;
  }

  /* El formulario vuelve a flujo normal debajo del bloque calibrado */
  #contacto .contact-form{
    position:relative !important;
    margin-top:22px !important;
  }
}

@media(max-width:390px){
  #contacto .contact-copy > p{
    font-size:14px !important;
    max-width:320px !important;
  }

  #contacto .contact-copy address > a:first-child{
    font-size:30px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.69 — MOBILE HABLEMOS: subir contenido inferior
   Hablemos + floral NO se mueven.
   ========================================================= */
@media(max-width:760px){

  /* Mantener exactamente Hablemos y subtítulo */
  #contacto .section-top > span:first-child{
    left:11px !important;
    top:6px !important;
  }

  #contacto .section-top > span:last-child{
    left:10px !important;
    top:25px !important;
  }

  /* Subir el bloque inferior completo ~62 px */
  #contacto .contact-copy > p{
    top:159px !important; /* antes 221 */
  }

  #contacto .contact-copy address{
    top:210px !important; /* antes 272 */
  }

  #contacto .contact-paths{
    top:272px !important; /* antes 334 */
  }

  /* Reducir altura reservada para que el formulario también suba */
  #contacto .contact-copy{
    min-height:368px !important;
  }

  #contacto .contact-grid{
    min-height:368px !important;
  }

  #contacto .contact-form{
    margin-top:10px !important;
  }
}

@media(max-width:390px){
  #contacto .contact-copy > p{
    top:154px !important;
  }

  #contacto .contact-copy address{
    top:204px !important;
  }

  #contacto .contact-paths{
    top:264px !important;
  }

  #contacto .contact-copy,
  #contacto .contact-grid{
    min-height:358px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.70 — MOBILE HABLEMOS: subir bloque mucho más
   Hablemos y floral permanecen intactos.
   ========================================================= */
@media(max-width:760px){

  /* Mantener encabezado calibrado */
  #contacto .section-top > span:first-child{
    left:11px !important;
    top:6px !important;
  }

  #contacto .section-top > span:last-child{
    left:10px !important;
    top:25px !important;
  }

  /* Subir fuertemente el contenido inferior */
  #contacto .contact-copy > p{
    top:92px !important;
  }

  #contacto .contact-copy address{
    top:143px !important;
  }

  #contacto .contact-paths{
    top:205px !important;
  }

  /* Recortar el espacio reservado para que el formulario suba también */
  #contacto .contact-copy{
    min-height:300px !important;
  }

  #contacto .contact-grid{
    min-height:300px !important;
  }

  #contacto .contact-form{
    margin-top:8px !important;
  }
}

@media(max-width:390px){
  #contacto .contact-copy > p{
    top:88px !important;
  }

  #contacto .contact-copy address{
    top:138px !important;
  }

  #contacto .contact-paths{
    top:198px !important;
  }

  #contacto .contact-copy,
  #contacto .contact-grid{
    min-height:292px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.71 — MOBILE HABLEMOS ORDENADO
   Mantiene Hablemos + floral intactos.
   Reordena únicamente el contenido inferior en flujo normal.
   ========================================================= */
@media(max-width:760px){

  /* NO mover encabezado calibrado */
  #contacto .section-top > span:first-child{
    left:11px !important;
    top:6px !important;
  }

  #contacto .section-top > span:last-child{
    left:10px !important;
    top:25px !important;
  }

  /* Hagamos lugar sigue oculto */
  #contacto #contact-title{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  /*
    Contact-copy vuelve a flujo normal.
    El padding superior conserva el hueco limpio bajo las flores.
  */
  #contacto .contact-copy{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;

    min-height:0 !important;
    height:auto !important;

    margin:0 !important;
    padding:92px 11px 0 !important;

    background:transparent !important;
  }

  /* Texto principal primero */
  #contacto .contact-copy > p{
    position:static !important;
    order:1 !important;

    width:auto !important;
    max-width:100% !important;

    margin:0 0 14px !important;
    padding:0 !important;

    font-size:15px !important;
    line-height:1.4 !important;
  }

  /* Teléfono + dirección después */
  #contacto .contact-copy address{
    position:static !important;
    order:2 !important;

    width:auto !important;

    margin:0 0 18px !important;
    padding:0 !important;

    font-style:normal !important;
  }

  #contacto .contact-copy address > a:first-child{
    display:block !important;

    margin:0 0 10px !important;

    font-size:31px !important;
    line-height:1.05 !important;
  }

  #contacto .contact-copy address p{
    margin:0 !important;
    max-width:92% !important;

    font-size:12px !important;
    line-height:1.45 !important;
  }

  /* Tarjetas debajo de dirección */
  #contacto .contact-paths{
    position:static !important;
    order:3 !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;
  }

  #contacto .contact-paths > a{
    min-height:66px !important;
    margin:0 0 12px !important;
    padding:13px 16px !important;

    border-radius:14px !important;
  }

  #contacto .contact-paths > a > span{
    font-size:9px !important;
    letter-spacing:.12em !important;
  }

  /* Contact-grid ya no necesita alturas artificiales */
  #contacto .contact-grid{
    position:relative !important;
    display:block !important;

    min-height:0 !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;
  }

  /* Formulario inicia después de las tarjetas, sin encimarse */
  #contacto .contact-form{
    position:relative !important;
    clear:both !important;

    width:100% !important;

    margin:18px 0 0 !important;
    padding:22px 18px !important;

    background:rgba(246,234,219,.42) !important;
  }

  #contacto .contact-form h3{
    margin:0 0 22px !important;

    font-size:27px !important;
    line-height:1.12 !important;
  }
}

@media(max-width:390px){
  #contacto .contact-copy{
    padding-top:88px !important;
  }

  #contacto .contact-copy > p{
    font-size:14px !important;
  }

  #contacto .contact-copy address > a:first-child{
    font-size:29px !important;
  }

  #contacto .contact-form h3{
    font-size:25px !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.72 — WhatsApp centrado
   Solo corrige el botón flotante. No toca layout móvil.
   ========================================================= */

.whatsapp-float{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:0 !important;
  margin:0 !important;

  background-color:transparent !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;

  line-height:0 !important;
  text-align:center !important;

  overflow:visible !important;
  transform-origin:center center !important;
}

/* El icono real queda exactamente centrado */
.whatsapp-float img{
  display:block !important;

  width:100% !important;
  height:100% !important;

  margin:0 !important;
  padding:0 !important;

  object-fit:contain !important;
  object-position:center center !important;

  transform:none !important;
}

/* Anular cualquier contenido heredado que pueda descentrarlo */
.whatsapp-float::before,
.whatsapp-float::after{
  content:none !important;
  display:none !important;
}

/* Si existe SVG/span heredado, no debe empujar el icono */
.whatsapp-float > svg,
.whatsapp-float > span{
  display:none !important;
}

@media(max-width:760px){
  .whatsapp-float{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;

    right:12px !important;
    bottom:max(14px,env(safe-area-inset-bottom)) !important;

    background-position:center center !important;
    background-size:contain !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.73 — WhatsApp mate definitivo
   Web + móvil
   ========================================================= */

.whatsapp-float{
  background:
    transparent url("whatsapp-icon.png") center center / contain no-repeat !important;

  background-color:transparent !important;
  background-position:center center !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;

  display:block !important;
  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  line-height:0 !important;
  overflow:visible !important;

  transform-origin:center center !important;
}

/* El asset ya contiene el icono completo */
.whatsapp-float img,
.whatsapp-float svg,
.whatsapp-float span,
.whatsapp-float::before,
.whatsapp-float::after{
  display:none !important;
  content:none !important;
}

/* Web */
@media(min-width:761px){
  .whatsapp-float{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
  }

  .whatsapp-float:hover{
    transform:scale(1.06) !important;
    filter:brightness(1.03) !important;
  }
}

/* Móvil */
@media(max-width:760px){
  .whatsapp-float{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;

    right:12px !important;
    bottom:max(14px,env(safe-area-inset-bottom)) !important;

    background-position:center center !important;
    background-size:contain !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.74 — MOBILE ONLY
   Header sticky + trigo/marca anclado al footer
   ========================================================= */
@media(max-width:760px){

  /* Barra superior: baja con el usuario igual que en web */
  html body .site-header,
  html body .site-header:not(.scrolled),
  html body .site-header.scrolled{
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
  }

  /* Footer se convierte en referencia para cualquier marca decorativa */
  html body footer,
  html body .site-footer{
    position:relative !important;
    overflow:hidden !important;
  }

  /*
    Trigo / marca decorativa:
    evita que cualquier sello flotante se quede fixed/sticky por toda la página.
    Se fuerza a vivir dentro del footer.
  */
  html body footer .footer-mark,
  html body footer .footer-wheat,
  html body footer .wheat-mark,
  html body footer .wheat,
  html body footer .grain-mark,
  html body footer .admin-mark,
  html body footer .admin-watermark,
  html body .site-footer .footer-mark,
  html body .site-footer .footer-wheat,
  html body .site-footer .wheat-mark,
  html body .site-footer .wheat,
  html body .site-footer .grain-mark,
  html body .site-footer .admin-mark,
  html body .site-footer .admin-watermark{
    position:absolute !important;
    left:18px !important;
    bottom:14px !important;
    top:auto !important;
    right:auto !important;
    transform:none !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  /* Si la marca aparece fuera del footer, deja de seguir el viewport */
  html body > .footer-mark,
  html body > .footer-wheat,
  html body > .wheat-mark,
  html body > .wheat,
  html body > .grain-mark,
  html body > .admin-mark,
  html body > .admin-watermark{
    position:absolute !important;
    top:auto !important;
    bottom:18px !important;
    left:18px !important;
    right:auto !important;
    transform:none !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.75 — MOBILE FIX REAL
   .seed en footer + header sticky efectivo
   ========================================================= */
@media(max-width:760px){

  /* =======================================================
     1) TRIGO / ADMIN SEED
     El elemento real es .seed y YA vive dentro del footer.
     Se elimina por completo su comportamiento fixed.
     ======================================================= */
  html body footer .seed,
  html body .site-footer .seed,
  html body .footer-bottom .seed{
    position:static !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    width:34px !important;
    height:42px !important;
    min-width:34px !important;
    min-height:42px !important;

    margin:8px 0 0 0 !important;
    padding:4px !important;

    transform:none !important;
    z-index:auto !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:rgba(36,52,95,.18) !important;
    opacity:.75 !important;

    pointer-events:auto !important;
  }

  html body footer .seed:hover,
  html body footer .seed:focus-visible{
    transform:none !important;
  }

  html body footer .admin-wheat,
  html body .site-footer .admin-wheat{
    width:26px !important;
    height:34px !important;
    display:block !important;
  }

  /* Footer conserva al trigo dentro de su flujo */
  html body .site-footer,
  html body footer{
    position:relative !important;
    overflow:visible !important;
  }

  html body .footer-bottom{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
  }

  /* =======================================================
     2) HEADER STICKY REAL
     ======================================================= */

  /* Ningún ancestro principal debe cortar sticky en móvil */
  html,
  body{
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  /* El header se mantiene pegado arriba */
  html body .site-header,
  html body .site-header:not(.scrolled),
  html body .site-header.scrolled{
    position:-webkit-sticky !important;
    position:sticky !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;

    z-index:9999 !important;

    margin:0 !important;

    transform:none !important;
    translate:none !important;

    overflow:visible !important;
    contain:none !important;

    will-change:auto !important;
  }

  /* Wrappers internos no deben romper el sticky */
  html body .site-header > *,
  html body .site-header .header-inner,
  html body .site-header .container{
    transform:none !important;
    contain:none !important;
  }

  /* El menú desplegable sigue colgando del header sticky */
  html body .site-header #navigation{
    position:absolute !important;
    top:100% !important;
    right:10px !important;
    left:auto !important;

    z-index:10000 !important;
  }
}


/* =========================================================
   Dely Nativa 1.0.77 — MOBILE ONLY
   WhatsApp mate definitivo + menú crema
   ========================================================= */
@media(max-width:760px){

  /* WhatsApp: fuerza el asset mate nuevo también en móvil */
  html body .whatsapp-float{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;

    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    background-color:transparent !important;
    background-image:url("whatsapp-icon.png") !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;

    right:12px !important;
    bottom:max(14px,env(safe-area-inset-bottom)) !important;
  }

  html body .whatsapp-float img,
  html body .whatsapp-float svg,
  html body .whatsapp-float span,
  html body .whatsapp-float::before,
  html body .whatsapp-float::after{
    display:none !important;
    content:none !important;
  }

  /* Menú desplegado móvil: crema/beige en lugar de blanco */
  html body .site-header #navigation{
    background:#f4ead9 !important;
    border:1px solid rgba(126,97,57,.16) !important;
    box-shadow:0 12px 28px rgba(74,55,31,.14) !important;
  }

  html body .site-header #navigation a{
    background:transparent !important;
  }

  html body .site-header #navigation a:hover,
  html body .site-header #navigation a:focus-visible{
    background:rgba(255,255,255,.34) !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.1 — ajustes públicos acumulados
   ========================================================= */

/* El trigo de acceso admin vive SOLO en el footer, web y móvil. */
html body .site-footer .seed,
html body .site-footer .footer-bottom .seed{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:34px!important;
  height:42px!important;
  min-width:34px!important;
  min-height:42px!important;
  margin:0!important;
  padding:4px!important;
  transform:none!important;
  translate:none!important;
  z-index:auto!important;
  display:inline-grid!important;
  place-items:center!important;
  vertical-align:middle;
}
html body .site-footer .seed:hover,
html body .site-footer .seed:focus-visible{
  transform:none!important;
  translate:0 -2px!important;
}

/* WhatsApp: flotación/rebote suave en web y móvil. */
html body .whatsapp-float{
  animation:dn-whatsapp-float 2.8s ease-in-out infinite;
  will-change:translate;
}
@keyframes dn-whatsapp-float{
  0%,100%{translate:0 0}
  42%{translate:0 -7px}
  58%{translate:0 -7px}
  72%{translate:0 -2px}
  82%{translate:0 -5px}
  90%{translate:0 -1px}
}

/* Footer: solo el logotipo se desplaza dentro de la barra. */
.site-footer .footer-top{
  overflow:hidden;
}
.site-footer .footer-logo-drift{
  position:relative;
  z-index:1;
  animation:dn-footer-logo-drift 8.5s ease-in-out infinite alternate;
  will-change:translate;
}
@keyframes dn-footer-logo-drift{
  0%{translate:0 0}
  35%{translate:clamp(35px,12vw,180px) -3px}
  70%{translate:clamp(75px,24vw,350px) 2px}
  100%{translate:clamp(45px,17vw,245px) -2px}
}

/* El slogan permanece fijo; solo enciende al pasar el mouse. */
.site-footer .footer-slogan{
  transition:color .28s ease,text-shadow .28s ease,filter .28s ease,transform .28s ease;
}
.site-footer .footer-slogan:hover{
  color:#b96808;
  text-shadow:0 0 7px rgba(248,183,38,.55),0 0 18px rgba(238,117,28,.28);
  filter:brightness(1.08);
  transform:scale(1.025);
}

/* Botón Entrar del diálogo público centrado. */
#login .api-form .button{
  display:flex;
  width:max-content;
  min-width:96px;
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
}

@media(max-width:760px){
  .site-footer .footer-logo-drift{
    animation-duration:7.5s;
  }
  @keyframes dn-footer-logo-drift{
    0%{translate:0 0}
    45%{translate:clamp(18px,12vw,55px) -2px}
    100%{translate:clamp(28px,18vw,78px) 1px}
  }
}

@media(prefers-reduced-motion:reduce){
  html body .whatsapp-float,
  .site-footer .footer-logo-drift{
    animation:none!important;
    translate:none!important;
  }
}


/* =========================================================
   Dely Nativa 1.1.2 — ajustes 2 y 3
   Logo juguetón + trigo admin a la izquierda SOLO en web
   ========================================================= */

/* Logo: recorrido con pequeños rebotes, no deriva aleatoria. */
.site-footer .footer-logo-drift{
  animation:dn-footer-logo-play 8s ease-in-out infinite !important;
  transform-origin:center bottom;
  will-change:translate,transform;
}
@keyframes dn-footer-logo-play{
  0%   {translate:0 0; transform:rotate(0deg)}
  10%  {translate:clamp(18px,5vw,70px) -8px; transform:rotate(-2deg)}
  16%  {translate:clamp(28px,8vw,110px) 0; transform:rotate(1deg)}
  31%  {translate:clamp(65px,16vw,220px) 0; transform:rotate(0deg)}
  39%  {translate:clamp(82px,20vw,280px) -10px; transform:rotate(2deg)}
  46%  {translate:clamp(95px,24vw,330px) 0; transform:rotate(-1deg)}
  62%  {translate:clamp(70px,18vw,250px) 0; transform:rotate(0deg)}
  70%  {translate:clamp(52px,13vw,185px) -8px; transform:rotate(-2deg)}
  78%  {translate:clamp(38px,9vw,125px) 0; transform:rotate(1deg)}
  92%  {translate:clamp(12px,3vw,42px) -5px; transform:rotate(-1deg)}
  100% {translate:0 0; transform:rotate(0deg)}
}

/* Desktop: trigo de acceso admin en el extremo izquierdo del footer.
   Sigue perteneciendo al footer; no vuelve a seguir la página. */
@media(min-width:761px){
  html body .site-footer .footer-bottom{
    position:relative !important;
    padding-left:52px !important;
  }

  html body .site-footer .footer-bottom .seed{
    position:absolute !important;
    left:0 !important;
    right:auto !important;
    top:50% !important;
    bottom:auto !important;
    translate:0 -50% !important;
    margin:0 !important;
    z-index:2 !important;
  }

  html body .site-footer .footer-bottom .seed:hover,
  html body .site-footer .footer-bottom .seed:focus-visible{
    translate:0 calc(-50% - 2px) !important;
  }
}

/* Móvil conserva exactamente el comportamiento ya aprobado. */
@media(max-width:760px){
  .site-footer .footer-logo-drift{
    animation:dn-footer-logo-play-mobile 7s ease-in-out infinite !important;
  }
  @keyframes dn-footer-logo-play-mobile{
    0%   {translate:0 0; transform:rotate(0deg)}
    16%  {translate:18px -6px; transform:rotate(-2deg)}
    28%  {translate:32px 0; transform:rotate(1deg)}
    48%  {translate:52px -7px; transform:rotate(2deg)}
    62%  {translate:38px 0; transform:rotate(-1deg)}
    82%  {translate:18px -5px; transform:rotate(1deg)}
    100% {translate:0 0; transform:rotate(0deg)}
  }
}


/* =========================================================
   Dely Nativa 1.1.3
   Logo footer flotando en su sitio + favicon dedicado
   ========================================================= */

/* El logo ya NO recorre la barra. Solo flota suavemente en su lugar. */
.site-footer .footer-logo-drift{
  animation:dn-footer-logo-float 2.9s ease-in-out infinite !important;
  transform-origin:center center !important;
  will-change:translate !important;
}
@keyframes dn-footer-logo-float{
  0%,100%{translate:0 0}
  50%{translate:0 -7px}
}

/* En móvil conserva la misma idea, con menos amplitud. */
@media(max-width:760px){
  .site-footer .footer-logo-drift{
    animation:dn-footer-logo-float-mobile 2.8s ease-in-out infinite !important;
  }
  @keyframes dn-footer-logo-float-mobile{
    0%,100%{translate:0 0}
    50%{translate:0 -5px}
  }
}

@media(prefers-reduced-motion:reduce){
  .site-footer .footer-logo-drift{
    animation:none !important;
    translate:none !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.6
   SOLO banner floral -> beige + textos azules -> negro.
   Transparencia, blur, luciérnagas y efectos del header: intactos.
   ========================================================= */

/* Solo sustituye la imagen floral existente por color beige. */
html body::before{
  background:#f3e7d7 !important;
  background-image:none !important;
}

/* Cambiar tipografía azul a negro, sin tocar fondos ni efectos. */
html body .site-header nav,
html body .site-header nav a,
html body .menu-toggle,
html body .hero-content,
html body .hero-content h1,
html body .hero-content h2,
html body .hero-content p,
html body .hero-bottom,
html body .section-top,
html body .section-heading,
html body .section-heading h2,
html body .section-heading p,
html body .group-heading,
html body .group-heading h3,
html body .group-heading span,
html body .product-info,
html body .product-info h3,
html body .product-info p,
html body .essence h2,
html body .essence h3,
html body .essence p,
html body .purpose-grid,
html body .purpose-grid h3,
html body .purpose-grid p,
html body .values,
html body .recipes,
html body .recipe-card,
html body .recipe-card h3,
html body .recipe-card p,
html body .recipe-card summary,
html body .contact,
html body .contact-copy,
html body .contact-copy h2,
html body .contact-copy p,
html body .contact-copy address,
html body .contact-copy address a,
html body .contact-paths a,
html body .contact-paths a span,
html body .contact-form,
html body .contact-form h3,
html body .site-footer,
html body .site-footer a,
html body .site-footer p,
html body .site-footer span,
html body .inline-link,
html body .origin-seal{
  color:#171717 !important;
}

html body .wheat-mark{color:#b96808 !important;}

html body .talavera-button,
html body .talavera-button *,
html body .whatsapp-float,
html body .whatsapp-float *{
  color:#fff !important;
}


/* =========================================================
   Dely Nativa 1.1.7
   Fondos solicitados + eliminación total de texto azul público
   ========================================================= */

/* Nuestras pastas: amarillo solicitado, sin flores. */
#productos{
  background:#F9C651 !important;
  background-image:none !important;
}
#productos::before,
#productos::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
}

/* Recetas: mismo amarillo solicitado, sin motivos florales. */
#recetas,
.recipes{
  background:#F9C651 !important;
  background-image:none !important;
}
#recetas::before,
#recetas::after,
.recipes::before,
.recipes::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
}

/* Contacto: naranja solicitado, sin fondo floral. */
#contacto,
.contact{
  background:#F19049 !important;
  background-image:none !important;
}
#contacto::before,
#contacto::after,
.contact::before,
.contact::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
}

/* ---------------------------------------------------------
   Texto público: eliminar azul restante de manera global.
   Se excluyen botones/elementos que deliberadamente usan blanco.
   --------------------------------------------------------- */
html body:not(.admin-page):not(.login-page){
  color:#171717 !important;
}

html body:not(.admin-page):not(.login-page) :where(
  h1,h2,h3,h4,h5,h6,p,span,strong,em,small,label,
  a:not(.talavera-button):not(.whatsapp-float),
  button:not(.talavera-button):not(.whatsapp-float),
  li,dt,dd,summary,address,
  .eyebrow,.section-top,.section-heading,.group-heading,
  .product-info,.product-info *,.recipe-card,.recipe-card *,
  .contact-copy,.contact-copy *,.contact-form,.contact-form *,
  .purpose-grid,.purpose-grid *,.values,.values *,
  .site-footer,.site-footer *,.origin-seal,.hero-content,.hero-content *,
  .hero-bottom,.hero-bottom *
){
  color:#171717 !important;
}

/* Mantener los acentos deliberados no azules */
html body .wheat-mark{
  color:#b96808 !important;
}

/* Botones con texto blanco deben permanecer legibles */
html body .talavera-button,
html body .talavera-button *,
html body .whatsapp-float,
html body .whatsapp-float *{
  color:#fff !important;
}

/* Inputs siguen legibles sobre el nuevo fondo naranja */
#contacto input,
#contacto textarea,
#contacto select{
  color:#171717 !important;
}

/* En móvil no permitir que reglas anteriores repongan fondos florales. */
@media(max-width:760px){
  #productos,
  #recetas,
  .recipes{
    background:#F9C651 !important;
    background-image:none !important;
  }

  #contacto,
  .contact{
    background:#F19049 !important;
    background-image:none !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.8
   SOLO: bloque "Pequeñas formas" beige + títulos azules a negro
   ========================================================= */

/* El bloque introductorio de Nuestras Pastas usa el beige exacto
   enviado por el cliente. El resto de Productos permanece igual. */
#productos .section-heading{
  position:relative !important;
  background:#F2E7D6 !important;
  background-image:none !important;
  border-radius:0 !important;
  padding:34px 6% !important;
  margin-left:-6.82% !important;
  margin-right:-6.82% !important;
  width:auto !important;
}

#productos .section-heading::before,
#productos .section-heading::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
}

/* Estos títulos tenían -webkit-text-fill-color azul en reglas antiguas.
   Se corrigen explícitamente, incluidos em/strong y estados hover. */
#products-title,
#products-title *,
#products-title:hover,
#products-title:hover *,
#products-title:focus-within,
#products-title:focus-within *,
#recipes-title,
#recipes-title *,
#recipes-title:hover,
#recipes-title:hover *,
#recipes-title:focus-within,
#recipes-title:focus-within *,
#contact-title,
#contact-title *,
#contact-title:hover,
#contact-title:hover *,
#contact-title:focus-within,
#contact-title:focus-within *{
  color:#171717 !important;
  -webkit-text-fill-color:#171717 !important;
  text-shadow:none !important;
  filter:none !important;
  background-image:none !important;
}

/* También impedir que los hijos itálicos recuperen azul por reglas previas. */
#products-title em,
#recipes-title em,
#contact-title em,
#contact-title strong,
#contact-title .contact-lastline,
#contact-title .contact-lastline *{
  color:#171717 !important;
  -webkit-text-fill-color:#171717 !important;
}

/* Móvil: mantener el comportamiento móvil aprobado;
   si el título está oculto, no forzar que reaparezca. */
@media(max-width:760px){
  #productos .section-heading{
    background:#F2E7D6 !important;
    background-image:none !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.9
   SOLO Nuestras Pastas: beige completo + composición compacta
   ========================================================= */

/* Toda la sección, completa, en beige. */
#productos{
  background:#F2E7D6 !important;
  background-image:none !important;
  padding-top:38px !important;
  padding-bottom:42px !important;
}
#productos::before,
#productos::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
}

/* Parte superior: mucho más compacta */
#productos .section-top{
  min-height:0 !important;
  margin:0 0 26px !important;
  padding:0 0 18px !important;
  align-items:flex-start !important;
  gap:24px !important;
}
#productos .section-top .eyebrow{
  font-size:11px !important;
  letter-spacing:.19em !important;
}
#productos .section-top > span:last-child{
  max-width:300px !important;
  font-size:18px !important;
  line-height:1.3 !important;
}

/* Bloque central: quitar la franja gigante y dejarlo integrado al beige */
#productos .section-heading{
  background:transparent !important;
  background-image:none !important;
  margin:0 0 28px !important;
  padding:0 !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr) !important;
  align-items:end !important;
  gap:34px !important;
}
#productos .section-heading::before,
#productos .section-heading::after{
  content:none !important;
  display:none !important;
}

/* Título grande, pero ya no desproporcionado */
#productos #products-title{
  margin:0 !important;
  max-width:760px !important;
  font-size:clamp(52px,6vw,88px) !important;
  line-height:.92 !important;
  letter-spacing:-.035em !important;
}
#productos #products-title em{
  display:block !important;
  font-size:.92em !important;
  line-height:1 !important;
}

/* Texto derecho más pequeño y limpio */
#productos .section-heading > p{
  margin:0 0 6px !important;
  max-width:330px !important;
  font-size:18px !important;
  line-height:1.35 !important;
}

/* Mercado General: menos aire */
#productos .group-heading{
  margin:0 0 20px !important;
  padding:18px 0 0 !important;
  min-height:0 !important;
  border-top:1px solid rgba(23,23,23,.14) !important;
}
#productos .group-heading h3{
  font-size:18px !important;
  margin:0 !important;
}
#productos .group-heading span{
  font-size:12px !important;
}

/* Evitar que reglas anteriores vuelvan a meter amarillo */
@media(min-width:761px){
  #productos,
  #productos .section-top,
  #productos .section-heading,
  #productos .group-heading{
    background-color:#F2E7D6 !important;
    background-image:none !important;
  }
}

/* Móvil: conservar estructura aprobada y solo usar beige completo */
@media(max-width:760px){
  #productos{
    background:#F2E7D6 !important;
    background-image:none !important;
    padding-top:24px !important;
    padding-bottom:30px !important;
  }

  #productos .section-top{
    margin-bottom:18px !important;
    padding-bottom:10px !important;
  }

  /* Los títulos grandes ya estaban ocultos en móvil; no reaparecerlos. */
  #productos .section-heading{
    background:transparent !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 0 16px !important;
    padding:0 !important;
    display:block !important;
  }

  #productos .group-heading{
    margin-bottom:16px !important;
    padding-top:14px !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.11
   Figura de trigo según solicitud del cliente
   - texto circular estático
   - solo gira el trigo
   - giro antihorario, lento
   ========================================================= */

/* Anular cualquier animación anterior del texto/anillo. */
html[data-motion="1"] .origin-seal .seal-ring,
.origin-seal .seal-ring{
  animation:none !important;
  transform:none !important;
  rotate:0deg !important;
}

/* El sello completo permanece fijo. */
.origin-seal{
  animation:none !important;
  transform:none !important;
}

/* Solo el trigo gira hacia la izquierda. */
html[data-motion="1"] .origin-seal .wheat-mark,
.origin-seal .wheat-mark{
  transform-origin:90px 90px !important;
  transform-box:fill-box !important;
  animation:dn-wheat-left-spin 16s linear infinite !important;
  will-change:transform;
}

@keyframes dn-wheat-left-spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}

/* El texto debe permanecer legible incluso al pasar el mouse. */
.origin-seal:hover .seal-ring,
.origin-seal:focus-within .seal-ring{
  animation:none !important;
  transform:none !important;
}

/* Accesibilidad: sin giro si el usuario reduce movimiento. */
@media(prefers-reduced-motion:reduce){
  html[data-motion="1"] .origin-seal .wheat-mark,
  .origin-seal .wheat-mark{
    animation:none !important;
    transform:none !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.14
   SOLO:
   1) sello trigo: balanceo elegante, no giro 360
   2) Contacto desktop: UX reacomodada y compacta
   ========================================================= */

/* ---------------------------------------------------------
   PORTADA — texto circular fijo; trigo balanceándose
   --------------------------------------------------------- */
html[data-motion="1"] .origin-seal .seal-ring,
.origin-seal .seal-ring{
  animation:none !important;
  transform:none !important;
  rotate:0deg !important;
}

.origin-seal{
  animation:none !important;
  transform:none !important;
}

/* El trigo permanece en su centro y hace un vaivén suave. */
html[data-motion="1"] .origin-seal .wheat-mark,
.origin-seal .wheat-mark{
  transform-origin:90px 90px !important;
  transform-box:view-box !important;
  animation:dn-wheat-sway 3.4s ease-in-out infinite !important;
  will-change:transform;
}

@keyframes dn-wheat-sway{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-4px) rotate(4deg)}
}

.origin-seal:hover .seal-ring,
.origin-seal:focus-within .seal-ring{
  animation:none !important;
  transform:none !important;
}

/* ---------------------------------------------------------
   CONTACTO DESKTOP — mejor proporción y lectura
   --------------------------------------------------------- */
@media(min-width:761px){
  #contacto{
    padding-top:46px !important;
    padding-bottom:54px !important;
  }

  #contacto .section-top{
    margin-bottom:22px !important;
    padding-bottom:14px !important;
  }

  #contacto .contact-grid{
    max-width:1180px !important;
    margin:22px auto 0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr) !important;
    gap:44px !important;
    align-items:start !important;
  }

  #contacto .contact-copy{
    min-width:0 !important;
    padding:0 !important;
  }

  #contacto #contact-title{
    max-width:780px !important;
    margin:0 !important;
    font-size:clamp(48px,5.2vw,78px) !important;
    line-height:.92 !important;
    letter-spacing:-.035em !important;
  }

  #contacto #contact-title em,
  #contacto #contact-title strong{
    display:inline !important;
  }

  #contacto .contact-copy > p{
    max-width:560px !important;
    margin:20px 0 0 !important;
    font-size:15px !important;
    line-height:1.5 !important;
  }

  #contacto .contact-paths{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
    margin:26px 0 24px !important;
  }

  #contacto .contact-paths > a{
    position:relative !important;
    min-height:92px !important;
    padding:18px 56px 18px 18px !important;
    border:1px solid rgba(23,23,23,.10) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.10) !important;
  }

  #contacto .contact-paths > a span{
    margin-bottom:7px !important;
    font-size:10px !important;
    letter-spacing:.13em !important;
  }

  #contacto .contact-paths > a b{
    position:absolute !important;
    right:16px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    float:none !important;
  }

  #contacto .contact-copy address{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    column-gap:24px !important;
    align-items:start !important;
    margin:0 !important;
    padding-top:20px !important;
    border-top:1px solid rgba(23,23,23,.12) !important;
  }

  #contacto .contact-copy address > a:first-child{
    margin:0 !important;
    font-size:30px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  #contacto .contact-copy address p{
    margin:0 !important;
    max-width:360px !important;
    font-size:13px !important;
    line-height:1.45 !important;
  }

  #contacto .contact-form{
    width:100% !important;
    max-width:430px !important;
    justify-self:end !important;
    margin:0 !important;
    padding:28px 30px 30px !important;
    border-radius:18px !important;
    box-sizing:border-box !important;
  }

  #contacto .contact-form h3{
    margin:0 0 22px !important;
    font-size:31px !important;
    line-height:1.05 !important;
  }

  #contacto .contact-form label{
    margin-bottom:14px !important;
    font-size:13px !important;
  }

  #contacto .contact-form .form-row{
    gap:12px !important;
  }

  #contacto .contact-form input,
  #contacto .contact-form select,
  #contacto .contact-form textarea{
    margin-top:6px !important;
    padding:11px 12px !important;
    min-height:44px !important;
    box-sizing:border-box !important;
  }

  #contacto .contact-form textarea{
    min-height:96px !important;
  }

  #contacto .contact-form .consent{
    margin-top:4px !important;
    line-height:1.35 !important;
  }

  #contacto .contact-form .talavera-button{
    width:100% !important;
    justify-content:center !important;
    margin-top:4px !important;
  }
}

/* Tablet: evitar que el formulario se vuelva demasiado angosto. */
@media(min-width:761px) and (max-width:1050px){
  #contacto .contact-grid{
    grid-template-columns:1fr 390px !important;
    gap:30px !important;
  }

  #contacto #contact-title{
    font-size:clamp(44px,5.5vw,64px) !important;
  }

  #contacto .contact-paths{
    grid-template-columns:1fr !important;
  }
}

@media(prefers-reduced-motion:reduce){
  html[data-motion="1"] .origin-seal .wheat-mark,
  .origin-seal .wheat-mark{
    animation:none !important;
    transform:none !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.15
   FIX CONTACTO DESKTOP — ancho real, sin desbordes
   ========================================================= */

@media(min-width:761px){

  #contacto{
    overflow:hidden !important;
  }

  #contacto .contact-grid{
    width:min(1180px, calc(100% - 80px)) !important;
    max-width:1180px !important;
    margin:24px auto 0 !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(360px, 420px) !important;
    gap:34px !important;
    align-items:start !important;
    box-sizing:border-box !important;
  }

  #contacto .contact-copy{
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  /* Título contenido para no invadir formulario */
  #contacto #contact-title{
    max-width:720px !important;
    font-size:clamp(44px,4.7vw,70px) !important;
    line-height:.96 !important;
    letter-spacing:-.03em !important;
    margin:0 !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  #contacto #contact-title em,
  #contacto #contact-title strong,
  #contacto #contact-title .contact-lastline{
    display:inline !important;
  }

  #contacto .contact-copy > p{
    max-width:520px !important;
    margin:18px 0 0 !important;
  }

  /* Tarjetas legibles, no comprimidas */
  #contacto .contact-paths{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
    margin:24px 0 24px !important;
  }

  #contacto .contact-paths > a{
    min-width:0 !important;
    min-height:88px !important;
    padding:16px 54px 16px 18px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    box-sizing:border-box !important;
  }

  #contacto .contact-paths > a > span{
    display:block !important;
    margin:0 0 6px !important;
    white-space:normal !important;
  }

  #contacto .contact-paths > a{
    font-size:15px !important;
    line-height:1.3 !important;
  }

  #contacto .contact-paths > a b{
    right:14px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
  }

  /* Teléfono + dirección con mejor balance */
  #contacto .contact-copy address{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:12px 28px !important;
    align-items:flex-start !important;
    margin:0 !important;
    padding-top:20px !important;
  }

  #contacto .contact-copy address > a:first-child{
    flex:0 0 auto !important;
    font-size:28px !important;
    line-height:1 !important;
  }

  #contacto .contact-copy address p{
    flex:1 1 280px !important;
    max-width:420px !important;
    margin:1px 0 0 !important;
    font-size:13px !important;
    line-height:1.45 !important;
  }

  /* Formulario siempre completo dentro del viewport */
  #contacto .contact-form{
    width:100% !important;
    max-width:420px !important;
    min-width:0 !important;
    justify-self:stretch !important;
    margin:0 !important;
    padding:26px 26px 28px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  #contacto .contact-form h3{
    font-size:28px !important;
    line-height:1.08 !important;
    margin:0 0 20px !important;
  }

  #contacto .contact-form .form-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }

  #contacto .contact-form label{
    min-width:0 !important;
  }

  #contacto .contact-form input,
  #contacto .contact-form textarea,
  #contacto .contact-form select{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* En pantallas desktop más angostas, apilar tarjetas antes de romper layout */
@media(min-width:761px) and (max-width:980px){
  #contacto .contact-grid{
    width:min(920px, calc(100% - 48px)) !important;
    grid-template-columns:minmax(0,1fr) 360px !important;
    gap:24px !important;
  }

  #contacto #contact-title{
    font-size:clamp(40px,5vw,58px) !important;
  }

  #contacto .contact-paths{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.16
   CONTACTO DESKTOP — corrección QA real
   - título contenido
   - checkbox normal
   - consentimiento dentro del formulario
   - sin recortes / overflow
   ========================================================= */

@media(min-width:1121px){

  #contacto{
    overflow:visible !important;
  }

  #contacto .contact-grid{
    width:calc(100% - 120px) !important;
    max-width:1200px !important;
    margin:24px auto 0 !important;

    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 400px !important;
    gap:42px !important;
    align-items:start !important;

    box-sizing:border-box !important;
  }

  #contacto .contact-copy{
    min-width:0 !important;
    max-width:100% !important;
    padding:0 !important;
    overflow:visible !important;
  }

  /* Título: dos líneas limpias y sin invadir formulario */
  #contacto #contact-title{
    width:100% !important;
    max-width:700px !important;

    margin:0 !important;
    padding:0 !important;

    font-size:clamp(48px,4.25vw,64px) !important;
    line-height:.98 !important;
    letter-spacing:-.028em !important;

    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  #contacto #contact-title > em{
    display:block !important;
  }

  #contacto #contact-title .contact-lastline{
    display:block !important;
    width:100% !important;
  }

  #contacto #contact-title .contact-lastline strong{
    display:block !important;
  }

  #contacto .contact-copy > p{
    max-width:520px !important;
    margin:18px 0 0 !important;

    font-size:15px !important;
    line-height:1.5 !important;
  }

  /* Tarjetas */
  #contacto .contact-paths{
    width:100% !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;

    margin:26px 0 24px !important;
    padding:0 !important;
  }

  #contacto .contact-paths > a{
    min-width:0 !important;
    min-height:90px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;

    padding:16px 58px 16px 18px !important;

    font-size:15px !important;
    line-height:1.3 !important;

    box-sizing:border-box !important;
  }

  #contacto .contact-paths > a > span{
    display:block !important;
    margin:0 0 6px !important;

    font-size:10px !important;
    line-height:1.2 !important;
    letter-spacing:.13em !important;
  }

  #contacto .contact-paths > a b{
    position:absolute !important;
    right:16px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
  }

  /* Teléfono y dirección */
  #contacto .contact-copy address{
    display:grid !important;
    grid-template-columns:max-content minmax(0,1fr) !important;
    gap:22px !important;
    align-items:start !important;

    margin:0 !important;
    padding-top:20px !important;

    border-top:1px solid rgba(23,23,23,.12) !important;
  }

  #contacto .contact-copy address > a:first-child{
    margin:0 !important;

    font-size:28px !important;
    line-height:1 !important;

    white-space:nowrap !important;
  }

  #contacto .contact-copy address p{
    max-width:390px !important;
    margin:1px 0 0 !important;

    font-size:13px !important;
    line-height:1.45 !important;
  }

  /* Formulario */
  #contacto .contact-form{
    width:400px !important;
    max-width:400px !important;
    min-width:0 !important;

    justify-self:end !important;

    margin:0 !important;
    padding:28px !important;

    box-sizing:border-box !important;
    overflow:visible !important;
  }

  #contacto .contact-form h3{
    margin:0 0 22px !important;

    font-size:29px !important;
    line-height:1.08 !important;
  }

  #contacto .contact-form > label:not(.consent):not(.honey){
    display:block !important;
    width:100% !important;
    min-width:0 !important;

    margin:0 0 14px !important;
  }

  #contacto .contact-form .form-row{
    width:100% !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;

    margin:0 !important;
  }

  #contacto .contact-form .form-row > label{
    min-width:0 !important;
    margin:0 0 14px !important;
  }

  /* SOLO campos de texto ocupan 100%.
     El checkbox queda excluido explícitamente. */
  #contacto .contact-form input:not([type="checkbox"]),
  #contacto .contact-form textarea,
  #contacto .contact-form select{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    margin-top:6px !important;
    padding:11px 12px !important;

    box-sizing:border-box !important;
  }

  #contacto .contact-form textarea{
    min-height:96px !important;
    resize:vertical !important;
  }

  /* Consentimiento: checkbox pequeño + texto que envuelve dentro del form */
  #contacto .contact-form .consent{
    width:100% !important;

    display:grid !important;
    grid-template-columns:18px minmax(0,1fr) !important;
    column-gap:10px !important;
    align-items:start !important;

    margin:4px 0 18px !important;
    padding:0 !important;

    box-sizing:border-box !important;

    font-size:12px !important;
    line-height:1.42 !important;
  }

  #contacto .contact-form .consent input[type="checkbox"]{
    appearance:auto !important;
    -webkit-appearance:checkbox !important;

    display:block !important;

    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;

    margin:2px 0 0 !important;
    padding:0 !important;

    box-shadow:none !important;
  }

  #contacto .contact-form .consent > span{
    display:block !important;
    min-width:0 !important;
    width:auto !important;

    margin:0 !important;
    padding:0 !important;

    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  #contacto .contact-form .consent .inline-link{
    display:inline !important;

    width:auto !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    vertical-align:baseline !important;
  }

  #contacto .contact-form .talavera-button{
    width:100% !important;
    min-height:46px !important;

    margin:0 !important;

    justify-content:center !important;
  }
}

/* Desktop/tablet angosto: mejor apilar antes de comprimir */
@media(min-width:761px) and (max-width:1120px){

  #contacto{
    overflow:visible !important;
  }

  #contacto .contact-grid{
    width:calc(100% - 64px) !important;
    max-width:900px !important;

    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;

    margin:24px auto 0 !important;
  }

  #contacto #contact-title{
    max-width:720px !important;
    font-size:clamp(44px,6vw,62px) !important;
  }

  #contacto .contact-form{
    width:100% !important;
    max-width:620px !important;

    justify-self:start !important;

    overflow:visible !important;
  }

  #contacto .contact-form input:not([type="checkbox"]),
  #contacto .contact-form textarea,
  #contacto .contact-form select{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  #contacto .contact-form .consent{
    display:grid !important;
    grid-template-columns:18px minmax(0,1fr) !important;
    gap:10px !important;

    width:100% !important;
  }

  #contacto .contact-form .consent input[type="checkbox"]{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;

    margin:2px 0 0 !important;
    padding:0 !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.17
   Ajustes marcados por cliente
   ========================================================= */

/* ---------------------------------------------------------
   NUESTRAS PASTAS
   Fondo fotográfico nuevo + menos aire en encabezado
   --------------------------------------------------------- */
#productos{
  position:relative !important;
  background:
    linear-gradient(rgba(242,231,214,.72), rgba(242,231,214,.72)),
    url("pastas-background.jpg") center center / cover no-repeat !important;
  background-attachment:scroll !important;
  padding-top:24px !important;
  padding-bottom:32px !important;
}

#productos::before,
#productos::after{
  content:none !important;
  display:none !important;
}

/* Reducir drásticamente el espacio del encabezado superior */
#productos .section-top{
  min-height:0 !important;
  height:auto !important;
  margin:0 0 12px !important;
  padding:0 0 10px !important;
}

/* Compactar el bloque de título que estaba enorme */
#productos .section-heading{
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  margin:0 0 18px !important;
  padding:0 !important;
  background:transparent !important;
}

#productos #products-title{
  max-width:680px !important;
  margin:0 !important;
  font-size:clamp(42px,5vw,68px) !important;
  line-height:.94 !important;
}

#productos .section-heading > p{
  max-width:300px !important;
  margin:0 0 2px !important;
  font-size:16px !important;
  line-height:1.3 !important;
}

#productos .group-heading{
  margin-top:8px !important;
  padding-top:14px !important;
}

/* Asegurar legibilidad sobre fotografía */
#productos .section-top,
#productos .section-heading,
#productos .group-heading,
#productos .product-info{
  position:relative !important;
  z-index:1 !important;
}

/* ---------------------------------------------------------
   CONTACTO
   Alinear correctamente el encabezado y el contenido izquierdo
   --------------------------------------------------------- */
@media(min-width:761px){
  #contacto .section-top{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-height:0 !important;
    margin-bottom:20px !important;
    padding-bottom:10px !important;
  }

  #contacto .section-top > span:first-child{
    margin:0 !important;
  }

  /* Ya no existe el texto derecho: no reservar espacio */
  #contacto .section-top > span:last-child:empty{
    display:none !important;
  }

  #contacto .contact-grid{
    align-items:start !important;
  }

  #contacto .contact-copy{
    text-align:left !important;
  }

  #contacto #contact-title,
  #contacto .contact-copy > p,
  #contacto .contact-paths,
  #contacto .contact-copy address{
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* Móvil: misma imagen, pero sin agregar alturas grandes */
@media(max-width:760px){
  #productos{
    background:
      linear-gradient(rgba(242,231,214,.78), rgba(242,231,214,.78)),
      url("pastas-background.jpg") center center / cover no-repeat !important;
    padding-top:18px !important;
    padding-bottom:26px !important;
  }

  #productos .section-top{
    margin-bottom:10px !important;
    padding-bottom:8px !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.18
   Nuestras Pastas — quitar cajas, conservar posiciones
   ========================================================= */

/* Quitar únicamente el fondo/caja del encabezado superior.
   No se cambian margin, padding, tamaño ni posición. */
#productos .section-top{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border-color:transparent !important;
}

/* Quitar únicamente la caja de Mercado General/Gourmet.
   Textos y controles permanecen exactamente en su layout. */
#productos .group-heading{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Evitar que pseudo-elementos antiguos reconstruyan las cajas. */
#productos .section-top::before,
#productos .section-top::after,
#productos .group-heading::before,
#productos .group-heading::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}


/* =========================================================
   Dely Nativa 1.1.19
   SOLO fondo de la sección Contacto
   ========================================================= */

#contacto,
.contact{
  background:
    linear-gradient(rgba(241,144,73,.68), rgba(241,144,73,.68)),
    url("contact-background.jpg") center center / cover no-repeat !important;
  background-attachment:scroll !important;
}

/* No tocar layout, posiciones, tamaños ni formulario */


/* =========================================================
   Dely Nativa 1.1.20
   SOLO CONTACTO
   - orden visual tarjetas / teléfono / dirección
   - flechas blancas
   - botón enviar más blanco y centrado real
   ========================================================= */

@media(min-width:761px){

  /* Mantener el bloque izquierdo compacto y ordenado */
  #contacto .contact-copy{
    display:block !important;
  }

  #contacto .contact-paths{
    width:100% !important;
    max-width:760px !important;
    margin:24px 0 18px !important;
    gap:14px !important;
  }

  #contacto .contact-paths > a{
    min-height:86px !important;
    padding:16px 58px 16px 18px !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    box-shadow:none !important;
  }

  /* Flechas circulares blancas para contraste */
  #contacto .contact-paths > a b{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;

    display:grid !important;
    place-items:center !important;

    right:14px !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    background:#fff !important;
    color:#171717 !important;
    border:1px solid rgba(23,23,23,.08) !important;
    border-radius:50% !important;

    box-shadow:0 5px 16px rgba(0,0,0,.10) !important;
  }

  #contacto .contact-paths > a:hover b,
  #contacto .contact-paths > a:focus-visible b{
    background:#fff !important;
    color:#171717 !important;
    transform:translateY(-50%) scale(1.05) !important;
  }

  /* Teléfono y dirección como una sola línea visual bien alineada */
  #contacto .contact-copy address{
    width:100% !important;
    max-width:760px !important;

    display:grid !important;
    grid-template-columns:max-content minmax(0,1fr) !important;
    gap:26px !important;
    align-items:center !important;

    margin:0 !important;
    padding:18px 0 0 !important;

    border-top:1px solid rgba(23,23,23,.15) !important;
  }

  #contacto .contact-copy address > a:first-child{
    margin:0 !important;
    font-size:28px !important;
    line-height:1 !important;
  }

  #contacto .contact-copy address p{
    margin:0 !important;
    max-width:420px !important;

    font-size:13px !important;
    line-height:1.4 !important;
  }

  /* Botón enviar: más blanco y centrado real */
  #contacto .contact-form .talavera-button{
    position:relative !important;

    width:100% !important;
    min-height:48px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:10px !important;

    margin:8px auto 0 !important;
    padding:12px 20px !important;

    color:#fff !important;
    text-align:center !important;

    border:1px solid rgba(255,255,255,.52) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.14),
      0 8px 22px rgba(36,52,95,.18) !important;
  }

  #contacto .contact-form .talavera-button,
  #contacto .contact-form .talavera-button *{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  /* Quitar desplazamientos que sacaban el texto del centro al hover */
  #contacto .contact-form .talavera-button:hover,
  #contacto .contact-form .talavera-button:focus-visible{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#fff !important;
    text-align:center !important;

    transform:translateY(-1px) !important;
  }

  #contacto .contact-form .talavera-button:hover *,
  #contacto .contact-form .talavera-button:focus-visible *{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    transform:none !important;
  }

  /* Si el botón lleva iconos decorativos, mantener simetría */
  #contacto .contact-form .talavera-button::before,
  #contacto .contact-form .talavera-button::after{
    opacity:.92 !important;
  }
}

/* Móvil: solo flechas blancas + botón centrado, sin reacomodar estructura */
@media(max-width:760px){

  #contacto .contact-paths > a b{
    background:#fff !important;
    color:#171717 !important;
    border-color:rgba(23,23,23,.08) !important;
  }

  #contacto .contact-form .talavera-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;

    color:#fff !important;
    text-align:center !important;

    border:1px solid rgba(255,255,255,.52) !important;
  }

  #contacto .contact-form .talavera-button,
  #contacto .contact-form .talavera-button *{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.21
   CONTACTO — layout según captura + trigo solo en hover
   ========================================================= */

@media(min-width:761px){

  /* Tarjetas exactamente en una fila, amplias y equilibradas */
  #contacto .contact-paths{
    width:100% !important;
    max-width:760px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
    margin:22px 0 18px !important;
  }

  #contacto .contact-paths > a{
    min-height:84px !important;
    padding:16px 58px 16px 18px !important;
    border-radius:14px !important;
    box-sizing:border-box !important;
  }

  /* Teléfono y dirección alineados en la misma línea como en tu captura */
  #contacto .contact-copy address{
    width:100% !important;
    max-width:760px !important;
    display:grid !important;
    grid-template-columns:max-content minmax(0,1fr) !important;
    align-items:center !important;
    gap:26px !important;
    margin:0 !important;
    padding:18px 0 0 !important;
    border-top:1px solid rgba(23,23,23,.15) !important;
  }

  #contacto .contact-copy address > a:first-child{
    margin:0 !important;
    font-size:28px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  #contacto .contact-copy address p{
    margin:0 !important;
    max-width:430px !important;
    font-size:13px !important;
    line-height:1.4 !important;
  }

  /* =======================================================
     BOTÓN ENVIAR
     Normal: limpio.
     Hover: aparecen los trigos decorativos.
     ======================================================= */

  #contacto .contact-form .talavera-button{
    position:relative !important;
    overflow:hidden !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-height:48px !important;
    margin:8px auto 0 !important;
    padding:12px 22px !important;

    text-align:center !important;
  }

  #contacto .contact-form .talavera-button > *{
    position:relative !important;
    z-index:2 !important;
    transform:none !important;
  }

  /* Decoración de trigo oculta normalmente */
  #contacto .contact-form .talavera-button::before,
  #contacto .contact-form .talavera-button::after{
    opacity:0 !important;
    visibility:hidden !important;
    transition:opacity .22s ease, visibility .22s ease !important;
    pointer-events:none !important;
  }

  /* Solo aparece al acercar el mouse o con foco */
  #contacto .contact-form .talavera-button:hover::before,
  #contacto .contact-form .talavera-button:hover::after,
  #contacto .contact-form .talavera-button:focus-visible::before,
  #contacto .contact-form .talavera-button:focus-visible::after{
    opacity:1 !important;
    visibility:visible !important;
  }

  /* Mantener texto centrado aun en hover */
  #contacto .contact-form .talavera-button:hover,
  #contacto .contact-form .talavera-button:focus-visible{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  #contacto .contact-form .talavera-button:hover > *,
  #contacto .contact-form .talavera-button:focus-visible > *{
    transform:none !important;
  }
}

/* En móvil: también ocultar trigo decorativo salvo interacción */
@media(max-width:760px){
  #contacto .contact-form .talavera-button::before,
  #contacto .contact-form .talavera-button::after{
    opacity:0 !important;
    visibility:hidden !important;
  }

  #contacto .contact-form .talavera-button:active::before,
  #contacto .contact-form .talavera-button:active::after,
  #contacto .contact-form .talavera-button:focus-visible::before,
  #contacto .contact-form .talavera-button:focus-visible::after{
    opacity:1 !important;
    visibility:visible !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.22
   SOLO bloque izquierdo de Contacto según marca del usuario
   ========================================================= */

@media(min-width:761px){

  /* Tarjetas una debajo de la otra, mismo ancho */
  #contacto .contact-paths{
    width:100% !important;
    max-width:360px !important;

    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;

    margin:22px 0 24px !important;
    padding:0 !important;
  }

  #contacto .contact-paths > a{
    width:100% !important;
    min-height:84px !important;

    margin:0 !important;
    padding:16px 56px 16px 18px !important;

    box-sizing:border-box !important;
  }

  /* Teléfono + dirección debajo, alineados como en la referencia */
  #contacto .contact-copy address{
    width:100% !important;
    max-width:620px !important;

    display:grid !important;
    grid-template-columns:max-content minmax(0,1fr) !important;
    gap:26px !important;
    align-items:center !important;

    margin:0 !important;
    padding:18px 0 0 !important;

    border-top:1px solid rgba(23,23,23,.15) !important;
  }

  #contacto .contact-copy address > a:first-child{
    margin:0 !important;

    font-size:28px !important;
    line-height:1 !important;

    white-space:nowrap !important;
  }

  #contacto .contact-copy address p{
    margin:0 !important;
    max-width:380px !important;

    font-size:13px !important;
    line-height:1.4 !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.23
   SOLO Contacto:
   - bajar teléfono/dirección
   - teléfono más pequeño
   - espigas del botón más pequeñas
   ========================================================= */

@media(min-width:761px){

  /* Baja únicamente teléfono + dirección */
  #contacto .contact-copy address{
    margin-top:96px !important;
  }

  /* Teléfono más discreto */
  #contacto .contact-copy address > a:first-child{
    font-size:21px !important;
    line-height:1.05 !important;
  }

  /* Dirección acompaña mejor al nuevo tamaño */
  #contacto .contact-copy address p{
    font-size:12px !important;
    line-height:1.4 !important;
  }

  /* Espigas decorativas más pequeñas */
  #contacto .contact-form .talavera-button::before,
  #contacto .contact-form .talavera-button::after{
    transform:scale(.78) !important;
    transform-origin:center !important;
  }

  #contacto .contact-form .talavera-button:hover::before,
  #contacto .contact-form .talavera-button:hover::after,
  #contacto .contact-form .talavera-button:focus-visible::before,
  #contacto .contact-form .talavera-button:focus-visible::after{
    transform:scale(.78) !important;
  }
}

/* Móvil: solo reducir ligeramente las espigas; layout intacto */
@media(max-width:760px){
  #contacto .contact-form .talavera-button::before,
  #contacto .contact-form .talavera-button::after{
    transform:scale(.82) !important;
    transform-origin:center !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.24
   SOLO sección Nuestra Esencia:
   texto oscuro -> blanco + ligera ampliación
   ========================================================= */

#nosotros,
#nosotros .essence-copy,
#nosotros .essence-copy p,
#nosotros .purpose-grid,
#nosotros .purpose-grid article,
#nosotros .purpose-grid p,
#nosotros .purpose-grid h3,
#nosotros .purpose-grid .purpose-index,
#nosotros .values,
#nosotros .values span,
#nosotros .section-top,
#nosotros .section-top span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Mantener los títulos dorados que ya funcionan */
#nosotros .essence-intro h2,
#nosotros .essence-intro h2 em,
#nosotros .signature{
  -webkit-text-fill-color:currentColor !important;
}

/* Párrafo principal un poco más grande y legible */
#nosotros .essence-copy p{
  font-size:17px !important;
  line-height:1.65 !important;
}

/* Etiquetas pequeñas: más legibles */
#nosotros .purpose-grid .purpose-index,
#nosotros .section-top{
  font-size:12px !important;
  letter-spacing:.13em !important;
}

/* Misión / Visión: textos descriptivos ligeramente mayores */
#nosotros .purpose-grid p{
  font-size:15px !important;
  line-height:1.6 !important;
}

/* Valores inferiores */
#nosotros .values{
  font-size:14px !important;
  line-height:1.5 !important;
}


/* =========================================================
   Dely Nativa 1.1.25
   CONTACTO — bajar datos + teléfono más discreto
   ========================================================= */

@media(min-width:761px){
  #contacto .contact-copy address{
    margin-top:128px !important;
  }

  #contacto .contact-copy address > a:first-child{
    font-size:18px !important;
    line-height:1.05 !important;
  }

  #contacto .contact-copy address p{
    font-size:11px !important;
    line-height:1.38 !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.26
   Ajustes acumulados solicitados
   ========================================================= */

/* ---------------------------------------------------------
   1) RECETAS — "Hoy cocinamos / algo que nos une."
   Solo flotación vertical suave, sin glow ni cambio de color.
   --------------------------------------------------------- */
#recipes-title{
  animation:dn-recipes-title-float 3.6s ease-in-out infinite !important;
  will-change:transform;
}

@keyframes dn-recipes-title-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@media(prefers-reduced-motion:reduce){
  #recipes-title{
    animation:none !important;
    transform:none !important;
  }
}

/* ---------------------------------------------------------
   2) CONTACTO — teléfono/dirección más abajo y mismo peso visual
   --------------------------------------------------------- */
@media(min-width:761px){

  #contacto .contact-copy address{
    margin-top:154px !important;
    align-items:center !important;
  }

  #contacto .contact-copy address > a:first-child{
    font-size:12px !important;
    line-height:1.4 !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
  }

  #contacto .contact-copy address p{
    font-size:12px !important;
    line-height:1.4 !important;
    margin:0 !important;
  }

  /* -------------------------------------------------------
     3) BOTÓN ENVIAR SOLICITUD
     Espigas visibles solo al hover/focus, centradas y sin recorte
     ------------------------------------------------------- */

  #contacto .contact-form .talavera-button{
    overflow:visible !important;
  }

  #contacto .contact-form .talavera-button::before,
  #contacto .contact-form .talavera-button::after{
    top:50% !important;
    bottom:auto !important;
    translate:0 -50% !important;
    transform:scale(.72) !important;
    transform-origin:center center !important;

    opacity:0 !important;
    visibility:hidden !important;

    transition:
      opacity .2s ease,
      visibility .2s ease,
      transform .2s ease !important;

    pointer-events:none !important;
  }

  #contacto .contact-form .talavera-button:hover::before,
  #contacto .contact-form .talavera-button:hover::after,
  #contacto .contact-form .talavera-button:focus-visible::before,
  #contacto .contact-form .talavera-button:focus-visible::after{
    opacity:1 !important;
    visibility:visible !important;
    translate:0 -50% !important;
    transform:scale(.72) !important;
  }

  /* Texto siempre centrado */
  #contacto .contact-form .talavera-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  #contacto .contact-form .talavera-button > *{
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
  }
}

/* Móvil: espigas centradas dentro del botón, visibles solo al toque/foco */
@media(max-width:760px){
  #contacto .contact-form .talavera-button{
    overflow:visible !important;
  }

  #contacto .contact-form .talavera-button::before,
  #contacto .contact-form .talavera-button::after{
    top:50% !important;
    bottom:auto !important;
    translate:0 -50% !important;
    transform:scale(.76) !important;

    opacity:0 !important;
    visibility:hidden !important;
  }

  #contacto .contact-form .talavera-button:active::before,
  #contacto .contact-form .talavera-button:active::after,
  #contacto .contact-form .talavera-button:focus-visible::before,
  #contacto .contact-form .talavera-button:focus-visible::after{
    opacity:1 !important;
    visibility:visible !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.28
   MODAL PÚBLICO DE ACCESO ADMIN — botón Entrar
   Este es el login que aparece encima de la página pública.
   ========================================================= */

#login .api-form{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}

#login .api-form > button[type="submit"],
#login .api-form > .button,
#login button[type="submit"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  align-self:center !important;

  width:auto !important;
  min-width:96px !important;
  max-width:max-content !important;

  margin:18px auto 0 !important;
  padding-left:26px !important;
  padding-right:26px !important;

  text-align:center !important;

  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

#login .api-form > button[type="submit"] *,
#login .api-form > .button *,
#login button[type="submit"] *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

#login .api-form > button[type="submit"]:hover,
#login .api-form > button[type="submit"]:focus-visible,
#login .api-form > .button:hover,
#login .api-form > .button:focus-visible{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;

  margin-left:auto !important;
  margin-right:auto !important;

  transform:none !important;
}


/* Dely Nativa 1.1.30 — redes sociales visibles en footer */
.site-footer .footer-social-link{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  margin-right:14px !important;
  opacity:1 !important;
  visibility:visible !important;
  text-decoration:none !important;
}

.site-footer .footer-social-link:hover,
.site-footer .footer-social-link:focus-visible{
  text-decoration:underline !important;
}


/* =========================================================
   Dely Nativa 1.1.31
   Redes sociales + UX móvil Contacto/Footer
   ========================================================= */

/* Redes en el footer: iconos reales, visibles al activar el check */
.site-footer .footer-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.site-footer .footer-socials{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}

.site-footer .footer-social-icon{
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  background:#24345f;
  color:#fff !important;
  text-decoration:none !important;
  transition:transform .2s ease, background .2s ease, opacity .2s ease;
}

.site-footer .footer-social-icon svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.site-footer .footer-facebook svg{
  fill:currentColor;
  stroke:none;
}

.site-footer .footer-social-icon:hover,
.site-footer .footer-social-icon:focus-visible{
  transform:translateY(-2px);
  background:#171717;
}

.site-footer .footer-social-icon.is-disabled{
  opacity:.48;
  cursor:default;
}

/* =========================================================
   MOBILE ONLY: CONTACTO
   ========================================================= */
@media(max-width:760px){

  #contacto{
    padding:24px 14px 30px !important;
    background-position:center center !important;
    overflow:hidden !important;
  }

  #contacto .section-top{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-height:0 !important;
    margin:0 0 16px !important;
    padding:0 0 10px !important;
  }

  #contacto .section-top > span:first-child{
    position:static !important;
    display:block !important;
    font-size:11px !important;
    letter-spacing:.16em !important;
  }

  #contacto .section-top > span:last-child{
    display:none !important;
  }

  #contacto .contact-grid{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  #contacto .contact-copy{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
  }

  /* En móvil el título grande se omite: UX compacta */
  #contacto #contact-title{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  #contacto .contact-copy > p{
    position:static !important;
    order:1 !important;
    width:100% !important;
    margin:0 0 14px !important;
    padding:0 !important;
    font-size:14px !important;
    line-height:1.45 !important;
  }

  /* Tarjetas claras, cómodas al tacto */
  #contacto .contact-paths{
    position:static !important;
    order:2 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 0 14px !important;
    padding:0 !important;
  }

  #contacto .contact-paths > a{
    position:relative !important;
    width:100% !important;
    min-height:68px !important;
    margin:0 !important;
    padding:13px 52px 13px 15px !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.30) !important;
    border:1px solid rgba(255,255,255,.48) !important;
    backdrop-filter:blur(4px) !important;
    box-sizing:border-box !important;
  }

  #contacto .contact-paths > a > span{
    margin:0 0 5px !important;
    font-size:9px !important;
    line-height:1.2 !important;
    letter-spacing:.13em !important;
  }

  #contacto .contact-paths > a b{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    right:12px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    display:grid !important;
    place-items:center !important;
    background:#fff !important;
    color:#171717 !important;
    border-radius:50% !important;
  }

  /* Teléfono + dirección como bloque compacto */
  #contacto .contact-copy address{
    position:static !important;
    order:3 !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:13px 14px !important;
    border:1px solid rgba(255,255,255,.34) !important;
    border-radius:14px !important;
    background:rgba(243,231,215,.64) !important;
    box-sizing:border-box !important;
  }

  #contacto .contact-copy address > a:first-child{
    display:block !important;
    margin:0 0 5px !important;
    font-size:15px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
  }

  #contacto .contact-copy address p{
    margin:0 !important;
    max-width:100% !important;
    font-size:11px !important;
    line-height:1.4 !important;
  }

  /* Formulario móvil limpio y ancho completo */
  #contacto .contact-form{
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    margin:16px 0 0 !important;
    padding:18px 16px 20px !important;
    background:rgba(243,231,215,.92) !important;
    border:1px solid rgba(255,255,255,.45) !important;
    border-radius:18px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  #contacto .contact-form h3{
    margin:0 0 18px !important;
    font-size:24px !important;
    line-height:1.1 !important;
  }

  #contacto .contact-form .form-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  #contacto .contact-form label{
    margin-bottom:12px !important;
    font-size:12px !important;
  }

  #contacto .contact-form input:not([type="checkbox"]),
  #contacto .contact-form textarea,
  #contacto .contact-form select{
    width:100% !important;
    max-width:100% !important;
    min-height:44px !important;
    margin-top:5px !important;
    padding:10px 11px !important;
    box-sizing:border-box !important;
    font-size:16px !important;
  }

  #contacto .contact-form textarea{
    min-height:96px !important;
  }

  #contacto .contact-form .consent{
    display:grid !important;
    grid-template-columns:18px minmax(0,1fr) !important;
    gap:9px !important;
    align-items:start !important;
    width:100% !important;
    margin:2px 0 16px !important;
    font-size:11px !important;
    line-height:1.4 !important;
  }

  #contacto .contact-form .consent input[type="checkbox"]{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
    margin:2px 0 0 !important;
    padding:0 !important;
  }

  #contacto .contact-form .talavera-button{
    width:100% !important;
    min-height:46px !important;
    margin:0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  /* =======================================================
     MOBILE ONLY: FOOTER
     ======================================================= */

  .site-footer{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .site-footer .footer-top{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    padding:22px 0 16px !important;
    text-align:center !important;
  }

  .site-footer .footer-top > a{
    display:block !important;
    margin:0 auto !important;
  }

  .site-footer .footer-top img{
    width:88px !important;
    height:auto !important;
  }

  .site-footer .footer-top p{
    margin:0 !important;
    font-size:18px !important;
    line-height:1.25 !important;
    text-align:center !important;
  }

  .site-footer .footer-bottom{
    position:relative !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:center !important;
    align-items:center !important;
    gap:10px !important;
    padding:16px 0 78px !important;
    text-align:center !important;
  }

  .site-footer .footer-bottom > span{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    line-height:1.45 !important;
  }

  .site-footer .footer-actions{
    width:100% !important;
    margin:2px 0 0 !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px 12px !important;
  }

  .site-footer .footer-socials{
    flex-basis:100% !important;
    order:-1 !important;
    margin:2px auto 5px !important;
    display:flex !important;
    justify-content:center !important;
    gap:11px !important;
  }

  .site-footer .footer-social-icon{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
  }

  .site-footer .footer-social-icon svg{
    width:21px !important;
    height:21px !important;
  }

  .site-footer .footer-whatsapp-link,
  .site-footer .inline-link,
  .site-footer .site-version{
    font-size:11px !important;
    margin:0 !important;
  }

  .site-footer .seed{
    margin:0 !important;
    width:30px !important;
    height:36px !important;
    min-width:30px !important;
    min-height:36px !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.32 — redes sociales completas
   Instagram / Facebook / TikTok / YouTube
   ========================================================= */

/* Desktop: bloque centrado entre logo y slogan */
.site-footer .footer-top{
  position:relative !important;
}

.site-footer .footer-top .footer-socials{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;

  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:44px !important;
  gap:12px !important;

  align-items:center !important;
  justify-content:center !important;

  z-index:3 !important;
}

.site-footer .footer-social-icon{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;

  display:grid !important;
  place-items:center !important;

  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  overflow:hidden !important;

  box-shadow:0 5px 16px rgba(23,23,23,.10) !important;
}

.site-footer .footer-social-icon img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
}

.site-footer .footer-social-icon:hover,
.site-footer .footer-social-icon:focus-visible{
  transform:translateY(-3px) scale(1.05) !important;
  background:transparent !important;
}

.site-footer .footer-social-icon.is-disabled{
  opacity:.45 !important;
  filter:grayscale(.45) !important;
}

/* Quitar estilos SVG antiguos */
.site-footer .footer-social-icon svg{
  display:none !important;
}

/* Footer bottom no debe volver a meter los iconos */


/* MÓVIL */
@media(max-width:760px){

  .site-footer .footer-top{
    position:relative !important;

    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:center !important;

    gap:12px !important;
    padding:20px 0 16px !important;
  }

  .site-footer .footer-top .footer-socials{
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;

    order:2 !important;

    display:grid !important;
    grid-template-columns:repeat(4,42px) !important;
    grid-auto-flow:row !important;
    grid-auto-columns:auto !important;

    gap:10px !important;

    width:auto !important;
    max-width:100% !important;

    margin:2px auto !important;
  }

  .site-footer .footer-top > a{
    order:1 !important;
  }

  .site-footer .footer-top .footer-slogan{
    order:3 !important;
  }

  .site-footer .footer-social-icon{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }
}

/* Pantallas muy angostas: 2 x 2, sin apretar iconos */
@media(max-width:330px){
  .site-footer .footer-top .footer-socials{
    grid-template-columns:repeat(2,42px) !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.33
   Redes: distribución amplia y color completo
   ========================================================= */
@media(min-width:761px){
  .site-footer .footer-top .footer-socials{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:min(46vw,620px) !important;
    min-width:420px !important;
    max-width:620px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:28px !important;
    margin:0 !important;
    padding:0 20px !important;
    box-sizing:border-box !important;
  }
  .site-footer .footer-social-icon{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
  }
}
.site-footer a.footer-social-icon,
.site-footer a.footer-social-icon img{
  opacity:1 !important;
  filter:none !important;
}
.site-footer .footer-social-icon.is-disabled{
  opacity:.32 !important;
  filter:grayscale(.65) !important;
}
@media(max-width:760px){
  .site-footer .footer-top .footer-socials{
    position:static !important;
    transform:none !important;
    width:100% !important;
    max-width:300px !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:12px !important;
    margin:4px auto 2px !important;
    padding:0 8px !important;
    box-sizing:border-box !important;
  }
  .site-footer .footer-social-icon{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    justify-self:center !important;
  }
}
@media(max-width:340px){
  .site-footer .footer-top .footer-socials{
    max-width:150px !important;
    grid-template-columns:repeat(2,1fr) !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.34
   SOLO FOOTER REDES
   - centrado real
   - iconos nítidos
   - sin opacidad/filtros aunque aún no haya URL
   ========================================================= */

/* Desktop: logo | redes | slogan */
@media(min-width:761px){
  .site-footer .footer-top{
    position:relative !important;

    display:grid !important;
    grid-template-columns:minmax(150px,1fr) minmax(320px,520px) minmax(280px,1fr) !important;
    align-items:center !important;
    column-gap:34px !important;

    width:100% !important;
  }

  .site-footer .footer-top > a{
    justify-self:start !important;
  }

  .site-footer .footer-top .footer-slogan,
  .site-footer .footer-top > p{
    justify-self:end !important;
    text-align:right !important;
  }

  .site-footer .footer-top .footer-socials{
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;

    width:100% !important;
    min-width:0 !important;
    max-width:520px !important;

    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    align-items:center !important;
    justify-items:center !important;

    gap:28px !important;

    margin:0 auto !important;
    padding:0 12px !important;

    box-sizing:border-box !important;
  }

  .site-footer .footer-social-icon{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;

    margin:0 !important;
    padding:0 !important;

    opacity:1 !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    box-shadow:0 4px 12px rgba(23,23,23,.10) !important;
  }

  .site-footer .footer-social-icon img{
    width:100% !important;
    height:100% !important;

    display:block !important;

    opacity:1 !important;
    filter:none !important;
    transform:none !important;

    object-fit:contain !important;
    image-rendering:auto !important;
  }
}

/* No volver a "apagar" iconos sin URL */
.site-footer .footer-social-icon.is-disabled,
.site-footer .footer-social-icon.is-disabled img{
  opacity:1 !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* No aplicar capas visuales viejas */
.site-footer .footer-social-icon::before,
.site-footer .footer-social-icon::after{
  content:none !important;
  display:none !important;
}

/* Móvil: misma nitidez + distribución limpia */
@media(max-width:760px){
  .site-footer .footer-top .footer-socials{
    width:100% !important;
    max-width:280px !important;

    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    justify-items:center !important;

    gap:12px !important;

    margin:6px auto 4px !important;
    padding:0 !important;
  }

  .site-footer .footer-social-icon{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;

    opacity:1 !important;
    filter:none !important;
    backdrop-filter:none !important;
  }

  .site-footer .footer-social-icon img{
    width:100% !important;
    height:100% !important;

    opacity:1 !important;
    filter:none !important;

    object-fit:contain !important;
    image-rendering:auto !important;
  }
}

@media(max-width:340px){
  .site-footer .footer-top .footer-socials{
    max-width:150px !important;
    grid-template-columns:repeat(2,1fr) !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.35
   SOLO posición del footer:
   LOGO | REDES | SLOGAN
   ========================================================= */

@media(min-width:761px){

  .site-footer .footer-top{
    display:grid !important;
    grid-template-columns:minmax(150px,1fr) minmax(360px,560px) minmax(300px,1fr) !important;
    align-items:center !important;
    column-gap:34px !important;
  }

  /* Logo siempre izquierda */
  .site-footer .footer-top > a{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:start !important;
  }

  /* Redes siempre centro */
  .site-footer .footer-top .footer-socials{
    grid-column:2 !important;
    grid-row:1 !important;

    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;

    width:100% !important;
    max-width:560px !important;
    min-width:0 !important;

    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    align-items:center !important;
    justify-items:center !important;

    gap:24px !important;

    margin:0 auto !important;
    padding:0 18px !important;
    box-sizing:border-box !important;
  }

  /* Slogan siempre derecha */
  .site-footer .footer-top .footer-slogan,
  .site-footer .footer-top > p{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    text-align:right !important;
    margin:0 !important;
  }
}

/* Móvil conserva el orden vertical aprobado */
@media(max-width:760px){
  .site-footer .footer-top > a{
    grid-column:auto !important;
    grid-row:auto !important;
  }

  .site-footer .footer-top .footer-socials{
    grid-column:auto !important;
    grid-row:auto !important;
  }

  .site-footer .footer-top .footer-slogan,
  .site-footer .footer-top > p{
    grid-column:auto !important;
    grid-row:auto !important;
    justify-self:center !important;
    text-align:center !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.36
   SOLO DESKTOP — centrar grupo de redes entre logo y slogan
   ========================================================= */
@media(min-width:761px){

  .site-footer .footer-top{
    grid-template-columns:180px minmax(0,1fr) 360px !important;
    column-gap:28px !important;
  }

  .site-footer .footer-top > a{
    grid-column:1 !important;
    justify-self:start !important;
  }

  .site-footer .footer-top .footer-socials{
    grid-column:2 !important;
    justify-self:center !important;

    width:min(560px,100%) !important;
    max-width:560px !important;

    margin:0 auto !important;
    padding:0 !important;

    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    align-items:center !important;
    justify-items:center !important;

    gap:34px !important;
  }

  .site-footer .footer-top .footer-slogan,
  .site-footer .footer-top > p{
    grid-column:3 !important;
    justify-self:end !important;
    text-align:right !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.42
   NUESTRAS PASTAS
   - mismo tamaño actual de cada marco
   - sin cuadros de color
   - fotografía ocupa todo el marco
   ========================================================= */

#productos .product-visual,
#productos .product-card:nth-child(5n+1) .product-visual,
#productos .product-card:nth-child(5n+2) .product-visual,
#productos .product-card:nth-child(5n+3) .product-visual,
#productos .product-card:nth-child(5n+4) .product-visual,
#productos .product-card:nth-child(5n+5) .product-visual{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;

  /* conserva exactamente el alto actual del marco */
  padding:0 !important;
}

/* La fotografía ocupa el marco completo que antes era de color. */
#productos .product-visual img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;

  display:block !important;
  position:absolute !important;
  inset:0 !important;

  filter:none !important;
  transform:none;
}

/* Hover sutil sin descubrir fondo detrás. */
#productos .product-card:hover .product-visual img{
  transform:scale(1.025) !important;
}

/* Elementos que deben seguir encima de la foto. */
#productos .product-visual .weight,
#productos .product-visual .product-number,
#productos .product-visual .product-caption{
  position:absolute !important;
  z-index:3 !important;
}

/* Peso legible sobre fotografía. */
#productos .product-visual .weight{
  background:rgba(255,250,244,.92) !important;
  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
}


/* =========================================================
   Dely Nativa 1.1.43
   Productos — mostrar fotografía completa dentro del marco
   ========================================================= */

#productos .product-visual img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;

  object-fit:fill !important;
  object-position:center !important;

  display:block !important;
  position:absolute !important;
  inset:0 !important;
}


/* =========================================================
   Dely Nativa 1.1.44
   Cambios escritos del cliente incluidos en el alcance
   SIN video / SIN secciones nuevas
   ========================================================= */

/* 1) Encabezado: tono marrón solicitado. Conserva sticky,
      transparencia, blur y luciérnagas existentes. */
html body .site-header,
html body .site-header:not(.scrolled),
html body .site-header.scrolled{
  background:rgba(111,78,55,.88) !important;
  background-image:none !important;
  backdrop-filter:blur(7px) saturate(1.03) !important;
  -webkit-backdrop-filter:blur(7px) saturate(1.03) !important;
}

html body .site-header #navigation a,
html body .site-header .menu-toggle{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

html body .site-header #navigation a:hover,
html body .site-header #navigation a:focus-visible{
  background:rgba(255,255,255,.14) !important;
}

/* 2) Productos: formato oficial de imagen 1200 x 1040 (15:13).
      Sin deformación. Si la foto se prepara a esa medida,
      ocupa el marco exactamente sin recorte ni franjas. */
#productos .product-visual{
  width:100% !important;
  aspect-ratio:15 / 13 !important;
  height:auto !important;
  overflow:hidden !important;
  padding:0 !important;
  background:transparent !important;
}

#productos .product-visual img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  transform:none !important;
  filter:none !important;
}

#productos .product-card:hover .product-visual img{
  transform:scale(1.015) !important;
}

/* Descripción desplegable dentro de la misma tarjeta. */
#productos .product-description{
  width:100% !important;
  margin-top:10px !important;
  border-top:1px solid rgba(23,23,23,.14) !important;
}

#productos .product-description summary{
  cursor:pointer !important;
  list-style:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:10px 0 !important;
  font-size:.82rem !important;
  font-weight:600 !important;
}

#productos .product-description summary::-webkit-details-marker{
  display:none !important;
}

#productos .product-description p{
  margin:0 !important;
  padding:0 0 10px !important;
  min-height:0 !important;
  font-size:.85rem !important;
  line-height:1.5 !important;
}

/* 3) Recetas: quitar fondo amarillo/tradicional.
      Usar crema neutra y limpia. */
#recetas,
.recipes{
  background:#F3E7D7 !important;
  background-image:none !important;
}

/* Descripción desplegable dentro de la misma receta. */
#recetas .recipe-description{
  border-top:1px solid rgba(23,23,23,.16) !important;
  margin-top:18px !important;
}

#recetas .recipe-description summary{
  cursor:pointer !important;
  list-style:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:13px 0 !important;
  font-size:.88rem !important;
  font-weight:600 !important;
}

#recetas .recipe-description summary::-webkit-details-marker{
  display:none !important;
}

#recetas .recipe-description p{
  min-height:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 0 12px !important;
  font-size:.9rem !important;
  line-height:1.55 !important;
}

/* 4) Contacto: fondo exacto indicado por el cliente
      en la diapositiva 6, con velo ligero para legibilidad. */
#contacto,
.contact{
  background:
    linear-gradient(rgba(243,231,215,.48), rgba(243,231,215,.48)),
    url("contact-background-client.png") center center / cover no-repeat !important;
  background-attachment:scroll !important;
}

/* El formulario mantiene su UX y gana contraste sobre el nuevo fondo. */
#contacto .contact-form{
  background:rgba(243,231,215,.92) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
}

/* Móvil: mismos cambios, sin alterar la estructura aprobada. */
@media(max-width:760px){
  html body .site-header,
  html body .site-header:not(.scrolled),
  html body .site-header.scrolled{
    background:rgba(111,78,55,.90) !important;
  }

  #productos .product-visual{
    aspect-ratio:15 / 13 !important;
  }

  #contacto,
  .contact{
    background:
      linear-gradient(rgba(243,231,215,.56), rgba(243,231,215,.56)),
      url("contact-background-client.png") center center / cover no-repeat !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.45
   SOLO encabezado — tono exacto solicitado por cliente
   Muestra: #E2C3A0 / rgb(226,195,160)
   ========================================================= */

html body .site-header,
html body .site-header:not(.scrolled),
html body .site-header.scrolled{
  background:rgba(226,195,160,.90) !important;
  background-image:none !important;
  backdrop-filter:blur(7px) saturate(1.03) !important;
  -webkit-backdrop-filter:blur(7px) saturate(1.03) !important;
}

/* Con este fondo claro, navegación negra para máxima legibilidad */
html body .site-header #navigation a,
html body .site-header .menu-toggle{
  color:#171717 !important;
  -webkit-text-fill-color:#171717 !important;
}

html body .site-header #navigation a:hover,
html body .site-header #navigation a:focus-visible{
  background:rgba(255,255,255,.28) !important;
}

@media(max-width:760px){
  html body .site-header,
  html body .site-header:not(.scrolled),
  html body .site-header.scrolled{
    background:rgba(226,195,160,.92) !important;
  }
}


/* =========================================================
   Dely Nativa 1.1.46
   SOLO CONTACTO — fondo limpio entregado por el cliente
   ========================================================= */

#contacto,
.contact{
  background:
    linear-gradient(rgba(243,231,215,.42), rgba(243,231,215,.42)),
    url("contact-background-client.png") center center / cover no-repeat !important;
  background-attachment:scroll !important;
}

@media(max-width:760px){
  #contacto,
  .contact{
    background:
      linear-gradient(rgba(243,231,215,.50), rgba(243,231,215,.50)),
      url("contact-background-client.png") center center / cover no-repeat !important;
  }
}