body{margin:0;background:#482415}
html{scroll-behavior:smooth}
a{color:#73350C}a:hover{color:#482415}
.pg{--esp:#482415;--tos:#73350C;--amb:#FF9700;--cer:#B65538;--cre:#EAD7C6;--paper:#FAF6F2;--ink2:#5b3322;font-family:"Poppins",system-ui,sans-serif;color:var(--esp);background:var(--paper);overflow:hidden;-webkit-font-smoothing:antialiased}
.pg *{box-sizing:border-box}
img{display:block}
.wrap{position:relative;max-width:1440px;margin:0 auto;padding:0 96px}
.kick{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.kick::before{content:"";width:32px;height:1.5px;background:currentColor}
.h2{margin:18px 0 0;font-weight:700;font-size:60px;line-height:1.05;letter-spacing:-.035em}
.lead{margin:22px 0 0;font-size:18px;line-height:1.7;color:var(--ink2)}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}
.sec-head p{margin:0;font-size:17px;line-height:1.7}

/* NAV */
.nav{position:absolute;z-index:20;left:0;right:0;top:0;animation:navIn 1s cubic-bezier(.2,.7,.2,1) .1s both}
.nav-in{max-width:1440px;margin:0 auto;padding:28px 96px;display:flex;align-items:center;gap:72px}
.nav-links{display:flex;gap:40px;align-items:center}
.nl{position:relative;color:#FFFFFF;text-decoration:none;font-size:15px;font-weight:500;padding:10px 0}
.nl::after{content:"";position:absolute;left:50%;right:50%;bottom:4px;height:2px;border-radius:2px;background:var(--amb);transition:left .45s cubic-bezier(.7,0,.2,1),right .45s cubic-bezier(.7,0,.2,1)}
.nl:hover{color:var(--amb)}.nl:hover::after{left:0;right:0}
.nl.on{font-weight:600}.nl.on::after{left:0;right:0}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav-tel{color:#FAF6F2;text-decoration:none;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:10px;min-height:44px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.nav-tel:hover{color:var(--amb)}

/* BUTTONS */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border-radius:3px;white-space:nowrap;font-family:"Poppins",sans-serif;font-size:15px;font-weight:600;text-decoration:none;border:0;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .45s cubic-bezier(.7,0,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .45s cubic-bezier(.7,0,.2,1)}.btn:hover .ar{transform:translateX(5px)}
.btn-amb{background:var(--amb);color:var(--esp)}.btn-amb::before{background:#FFB03D}
.btn-esp{background:var(--esp);color:var(--paper)}.btn-esp::before{background:var(--tos)}
.btn-oe{background:transparent;color:var(--esp);box-shadow:inset 0 0 0 1.5px rgba(72,36,21,.45)}.btn-oe::before{background:var(--esp)}.btn-oe:hover{color:var(--paper)}
.btn-line{background:transparent;color:var(--cre);box-shadow:inset 0 0 0 1.5px rgba(234,215,198,.55)}.btn-line::before{background:var(--cre)}.btn-line:hover{color:var(--esp)}
.tlink{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;text-decoration:none;color:var(--tos);padding:10px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .5s cubic-bezier(.7,0,.2,1)}
.tlink:hover{background-size:100% 1.5px;color:var(--esp)}
.tlink .ar{transition:transform .45s}.tlink:hover .ar{transform:translateX(5px)}

/* HERO */
.hero{position:relative;height:900px;overflow:hidden;background:linear-gradient(105deg,#2E160C 0%,#3A1D10 40%,#482415 100%)}
.h-photo{position:absolute;top:0;right:0;bottom:0;width:64%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 20%,#000 50%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 20%,#000 50%);animation:photoIn 1.8s cubic-bezier(.2,.7,.2,1) .1s both}
.h-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 36%;animation:imgSettle 3.4s cubic-bezier(.2,.7,.2,1) .1s both}
.h-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(46,22,12,.6) 0%,rgba(46,22,12,0) 35%),linear-gradient(180deg,rgba(46,22,12,.5) 0%,rgba(46,22,12,0) 22%)}
.h-copy{position:absolute;left:96px;top:190px;width:720px;z-index:2}
.h1{margin:0;font-weight:400;font-size:76px;line-height:1;letter-spacing:-.02em;color:#FFFFFF}
.ln.l2{font-size:2.375em;line-height:.78;padding-top:.12em;margin-top:-.16em}
.ln.l3{font-size:1.551em;line-height:.9;letter-spacing:0;margin-top:-.12em}
.cf{font-weight:600;color:var(--amb)}
.hl{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) both}
.hl1{animation-delay:.3s}.hl2{animation-delay:.45s}.hl3{animation-delay:.6s}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block;animation:lineUp 1.1s cubic-bezier(.75,0,.2,1) both}
.ln.l1>span{animation-delay:.35s}.ln.l2>span{animation-delay:.5s}.ln.l3>span{animation-delay:.65s}
.h-sub{margin:28px 0 0;max-width:460px;font-size:19px;line-height:1.65;color:rgba(255,255,255,.84);animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) 1s both}
.h-ctas{margin-top:40px;display:flex;gap:32px;align-items:center;animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) 1.2s both}
.h-ctas .tlink{color:#FFFFFF}
.h-ctas .tlink .ar{color:var(--amb)}
.h-ctas .tlink:hover{color:var(--amb)}

/* EXPERIENCIA */
.exp{position:relative;padding:150px 0 150px;background:var(--paper)}
.exp-iso{position:absolute;left:-180px;bottom:-200px;width:560px;opacity:.05;pointer-events:none}
.exp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:center}
.pts{margin-top:40px;display:flex;flex-direction:column}
.pt{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;padding:22px 0;border-top:1px solid rgba(72,36,21,.14)}
.pt:last-child{border-bottom:1px solid rgba(72,36,21,.14)}
.pt b{font-size:13px;font-weight:600;color:var(--cer);padding-top:3px}
.pt h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em}
.pt p{margin:6px 0 0;font-size:16px;line-height:1.6;color:var(--ink2)}
.exp-photos{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:300px 300px;gap:16px}
.exp-photos figure{margin:0;overflow:hidden;border-radius:6px;position:relative}
.exp-photos figure:first-child{grid-row:span 2}
.exp-photos img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.exp-photos figure:hover img{transform:scale(1.05)}

/* ORIGEN */
.origen{position:relative;background:var(--esp);color:var(--cre);padding:140px 0 150px}
.origen .h2{color:var(--paper)}
.o-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.o-lead{margin:24px 0 0;font-size:18px;line-height:1.7;color:rgba(234,215,198,.85);max-width:460px}
.fincas{margin-top:44px;display:flex;flex-direction:column}
.fz{padding:20px 0;border-top:1px solid rgba(234,215,198,.18)}
.fz:last-child{border-bottom:1px solid rgba(234,215,198,.18)}
.fz h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--paper)}
.fz p{margin:6px 0 0;font-size:15px;line-height:1.6;color:rgba(234,215,198,.75)}
.fz.home h3{color:var(--amb)}
.o-note{margin:18px 0 0;font-size:13px;color:rgba(234,215,198,.55)}
.nic{display:block;width:100%;height:auto;overflow:visible}
.nic .dep{fill:none;stroke:#EAD7C6;stroke-opacity:.6;stroke-width:1.3;stroke-linejoin:round}
.nic .dep.hi{fill:#EAD7C6;stroke:#482415;stroke-opacity:1;stroke-width:1.6}
.nic .lake{fill:none;stroke:#EAD7C6;stroke-opacity:.6;stroke-width:1.3;stroke-linejoin:round}
.nic .mtag line{stroke:#EAD7C6;stroke-width:1.5}
.nic .mtag circle{fill:#482415;stroke:#EAD7C6;stroke-width:2}
.nic .mtag rect{fill:#482415;stroke:#EAD7C6;stroke-width:1.5}
.nic .mtag text{font-family:Poppins,sans-serif;font-size:17px;font-weight:600;fill:#FAF6F2}
.nic .mtag.home rect{fill:#FF9700;stroke:#FF9700}
.nic .mtag.home text{fill:#482415}
.nic .mtag.home circle{fill:#FF9700;stroke:#482415}
.nic .mtag.home line{stroke:#FF9700}

/* MARQUEE */
.mq{background:var(--cre);color:var(--esp);overflow:hidden;padding:26px 0}
.mq-t{display:flex;width:max-content;animation:mq 42s linear infinite}
.mq-t span{display:flex;align-items:center;gap:36px;padding-right:36px;font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.mq-t i{display:block;width:12px;height:16px;border-radius:50%;background:var(--cer);transform:rotate(25deg)}
.mq:hover .mq-t{animation-play-state:paused}

/* METODOS */
.met{padding:140px 0 140px;background:var(--paper)}
.met .sec-head p{color:var(--ink2)}
.shelf{margin-top:72px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.mf{display:flex;flex-direction:column;text-decoration:none;color:var(--esp)}
.mf .pic{position:relative;height:380px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1.5px solid rgba(72,36,21,.2)}
.mf .pic::before{content:"";position:absolute;left:50%;bottom:0;width:240px;height:240px;margin-left:-120px;border-radius:50%;background:var(--cre);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.mf:hover .pic::before{transform:scale(1.08)}
.mf .pic img{position:relative;z-index:1;width:auto;max-width:92%;object-fit:contain;transition:transform .8s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 22px 20px rgba(72,36,21,.2))}
.mf:hover .pic img{transform:translateY(-16px)}
.mf .cap{padding-top:20px;display:flex;flex-direction:column;gap:6px}
.mf .no{font-size:13px;font-weight:600;color:var(--cer)}
.mf .nm{font-size:26px;font-weight:600;letter-spacing:-.02em}
.mf .pr{font-size:15px;color:var(--ink2)}
.mf .more{margin-top:6px;font-size:14px;line-height:1.55;color:var(--ink2);min-height:44px;opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.mf:hover .more{opacity:1;transform:none}
.met-foot{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-top:48px;padding-top:28px;border-top:1px solid rgba(72,36,21,.14);font-size:15px;color:var(--ink2)}

/* MENUS */
.menus{position:relative;background:var(--esp);color:var(--cre);padding:140px 0 150px}
.menus .h2{color:var(--paper)}
.menus .sec-head p{color:rgba(234,215,198,.82)}
.mcols{margin-top:72px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.mcard{display:block;text-decoration:none;color:var(--cre)}
.mcard .ph{position:relative;height:440px;border-radius:8px;overflow:hidden}
.mcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.mcard:hover .ph img{transform:scale(1.05)}
.mcard .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(72,36,21,0) 45%,rgba(72,36,21,.88))}
.mcard .ttl{position:absolute;z-index:2;left:32px;right:32px;bottom:28px}
.mcard .ttl span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--amb)}
.mcard .ttl h3{margin:8px 0 0;font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--paper)}
.cats{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.cats span{padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(234,215,198,.25);font-size:14px;color:rgba(234,215,198,.88)}
.mrow{margin-top:28px;display:flex;gap:20px;align-items:center}
.pdfl{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--cre);font-size:15px;font-weight:500;text-decoration:none;border-bottom:1px solid rgba(234,215,198,.35)}
.pdfl:hover{color:var(--amb);border-color:var(--amb)}

/* RESERVAS */
.res{position:relative;color:var(--cre);padding:140px 0;overflow:hidden}
.res-bg{position:absolute;inset:-80px 0;background:url("../img/dripper-1600.jpg") center 40%/cover no-repeat;background-image:image-set(url("../img/dripper-1600.avif") type("image/avif"),url("../img/dripper-1600.webp") type("image/webp"),url("../img/dripper-1600.jpg") type("image/jpeg"))}
.res-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(72,36,21,.97) 0%,rgba(72,36,21,.92) 45%,rgba(72,36,21,.8) 100%)}
.res-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:start}
.res .h2{color:var(--paper)}
.res .lead{color:rgba(234,215,198,.84)}
.hrs{margin-top:40px;display:flex;flex-direction:column}
.hrs div{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-top:1px solid rgba(234,215,198,.18);font-size:16px}
.hrs div span:first-child{color:rgba(234,215,198,.7)}
.hrs a{color:var(--cre);font-weight:600}
.form{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 20px;align-content:start;padding:40px;border-radius:10px;background:rgba(250,246,242,.06);box-shadow:inset 0 0 0 1px rgba(234,215,198,.14)}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{font-size:13px;font-weight:600;color:var(--cre)}
.fld label i{font-style:normal;font-weight:400;color:rgba(234,215,198,.6)}
.fld input,.fld textarea{width:100%;font-family:"Poppins",sans-serif;font-size:16px;color:var(--paper);background:rgba(72,36,21,.6);border:1px solid rgba(234,215,198,.28);border-radius:8px;padding:14px 16px;outline:none;color-scheme:dark;transition:border-color .3s,box-shadow .3s}
.fld textarea{resize:vertical;min-height:104px;line-height:1.5}
.fld input:focus,.fld textarea:focus{border-color:var(--amb);box-shadow:0 0 0 3px rgba(255,151,0,.18)}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(234,215,198,.45)}
.fld.has-err input{border-color:var(--amb)}
.err{font-size:13px;font-weight:500;color:var(--amb)}
.span6{grid-column:span 6}.span2{grid-column:span 2}
.send{grid-column:span 6;display:flex;align-items:center;gap:24px;margin-top:4px}
.send p{margin:0;font-size:14px;line-height:1.5;color:rgba(234,215,198,.7)}
.ok{grid-column:span 6;display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:8px;background:rgba(255,151,0,.12);font-size:15px;line-height:1.5}

/* CONTACTO */
.con{position:relative;background:var(--paper);padding:140px 0 150px}
.con-grid{display:grid;grid-template-columns:minmax(0,1fr) 820px;gap:64px;align-items:start}
.info{margin-top:36px;display:flex;flex-direction:column}
.irow{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px 0;border-top:1px solid rgba(72,36,21,.14);align-items:start}
.irow svg{color:var(--cer);margin-top:2px}
.irow b{display:block;font-size:13px;font-weight:600;color:var(--cer);margin-bottom:2px}
.irow span,.irow a{font-size:17px;line-height:1.5;color:var(--esp);text-decoration:none}
.irow a:hover{color:var(--tos);text-decoration:underline}
.soc{display:flex;gap:10px;margin-top:6px}
.soc a{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(72,36,21,.3);color:var(--esp);transition:background .35s,color .35s,transform .35s}
.soc a:hover{background:var(--esp);color:var(--cre);transform:translateY(-3px)}
.con-ctas{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.map{position:relative;width:820px;height:560px;background:var(--cre);overflow:hidden;border-radius:10px}
.map svg.base{position:absolute;inset:0;width:820px;height:560px}
.st{fill:none;stroke:#FAF6F2;stroke-linecap:butt}
.blk{fill:#73350C;opacity:.07}
.lbl{font-family:"Poppins",sans-serif;font-size:11.5px;font-weight:500;fill:#482415;paint-order:stroke;stroke:#EAD7C6;stroke-width:4px;stroke-linejoin:round}
.lbl.st-n{font-size:10.5px;letter-spacing:.14em;font-weight:600;fill:#73350C;stroke:#FAF6F2}
.pin{fill:#73350C}
.route-dash{fill:none;stroke:#73350C;stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round;opacity:.45}
.route-live{fill:none;stroke:#FF9700;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.is-walking .route-live{animation:draw 5.2s cubic-bezier(.45,.05,.4,1) .5s forwards}
.cafe-b{fill:#B65538;opacity:.35}
.is-walking .cafe-b{animation:glow 1.2s ease 5.7s 2 alternate}
.walker{position:absolute;left:0;top:0;width:46px;height:58px;offset-path:path("M82 272 L338 302 L340 330");offset-rotate:0deg;offset-anchor:50% 96%;offset-distance:0%;z-index:4}
.is-walking .walker{animation:walk 5.2s cubic-bezier(.45,.05,.4,1) .5s forwards}
.walker svg{width:100%;height:100%;overflow:visible}
.w-body{transform-box:fill-box;transform-origin:50% 100%}
.is-walking .w-body{animation:bob .3s ease-in-out .5s 17 alternate,hop .5s cubic-bezier(.3,1.6,.5,1) 5.8s 2}
.leg{transform-box:fill-box;transform-origin:50% 0}
.is-walking .leg.a{animation:legA .3s ease-in-out .5s 17 alternate}
.is-walking .leg.b{animation:legB .3s ease-in-out .5s 17 alternate}
.arm{transform-box:fill-box;transform-origin:0% 100%}
.is-walking .arm{animation:wave .35s ease-in-out 5.9s 4 alternate}
.start-tag,.arrive{position:absolute;z-index:5;white-space:nowrap}
.start-tag{left:30px;top:226px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cre);background:var(--tos);padding:6px 10px;border-radius:4px}
.arrive{left:352px;top:228px;display:flex;align-items:center;gap:10px;background:var(--esp);color:var(--cre);padding:8px 14px 8px 8px;border-radius:999px;opacity:0;transform:translateY(10px) scale(.8);transform-origin:0 100%}
.arrive img{width:30px;height:30px}
.arrive b{display:block;font-size:14px;font-weight:600}
.arrive small{display:block;font-size:11.5px;color:rgba(234,215,198,.75)}
.is-walking .arrive{animation:popTag .6s cubic-bezier(.3,1.5,.5,1) 5.75s forwards}
.map-bar{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-between;align-items:center;padding:10px 12px 10px 18px;background:rgba(250,246,242,.94);border-top:1px solid rgba(72,36,21,.12)}
.map-bar span{font-size:13px;color:var(--ink2)}
.replay{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:transparent;font-family:"Poppins",sans-serif;font-size:14px;font-weight:600;color:var(--tos);cursor:pointer}
.replay:hover{color:var(--esp);background:rgba(72,36,21,.07)}
.compass{position:absolute;right:18px;top:18px;z-index:3;width:44px;height:44px}

/* FOOTER */
.foot{position:relative;background:var(--esp);color:var(--cre);padding:110px 0 44px;overflow:hidden}
.foot-iso{position:absolute;right:-160px;top:-140px;width:640px;opacity:.06;pointer-events:none}
.foot-top{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:56px;align-items:start}
.foot-q{margin:28px 0 0;font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.2;max-width:380px;color:var(--paper)}
.foot h4,.foot .fh{margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--amb)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.foot ul a,.foot ul span{color:var(--cre);text-decoration:none;font-size:16px;line-height:1.5;display:inline-block;padding:5px 0}
.foot ul a:hover{color:var(--amb)}
.foot-bot{position:relative;margin-top:80px;padding-top:24px;border-top:1px solid rgba(234,215,198,.18);display:flex;justify-content:space-between;font-size:13px;color:rgba(234,215,198,.6)}

/* KEYFRAMES */
@keyframes navIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes photoIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes imgSettle{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes isoIn{from{opacity:0}to{opacity:.045}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes lineUp{from{transform:translateY(110%)}to{transform:none}}
@keyframes cue{to{top:110%}}
@keyframes ring{0%{transform:scale(1);opacity:1}100%{transform:scale(3.2);opacity:0}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes walk{to{offset-distance:100%}}
@keyframes bob{to{transform:translateY(-3px) rotate(3deg)}}
@keyframes hop{0%{transform:none}50%{transform:translateY(-12px)}100%{transform:none}}
@keyframes legA{from{transform:rotate(22deg)}to{transform:rotate(-22deg)}}
@keyframes legB{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
@keyframes wave{from{transform:rotate(0)}to{transform:rotate(-55deg)}}
@keyframes glow{to{opacity:.85}}
@keyframes popTag{to{opacity:1;transform:none}}

@supports (animation-timeline: view()){
  .rv{animation:rvUp linear both;animation-timeline:view();animation-range:entry 5% entry 65%}
  .rv.d1{animation-range:entry 12% entry 75%}
  .rv.d2{animation-range:entry 20% entry 85%}
  .rvc{animation:rvClip linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  .px{animation:px linear both;animation-timeline:view();animation-range:cover}
  .nic .rt{animation:drawv linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
  .nic .pinw{animation:pinIn linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
  .mf{animation:rvUp linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  .mf:nth-child(2){animation-range:entry 6% entry 66%}.mf:nth-child(3){animation-range:entry 12% entry 72%}.mf:nth-child(4){animation-range:entry 18% entry 78%}
}
@keyframes rvUp{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes rvClip{from{clip-path:inset(14% 10% 14% 10% round 6px)}to{clip-path:inset(0 0 0 0 round 6px)}}
@keyframes px{from{transform:translateY(60px)}to{transform:translateY(-60px)}}
@keyframes drawv{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pinIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .pg *,.pg *::before,.pg *::after{animation:none !important;transition:none !important}
  .h-photo,.h-kick,.h-sub,.h-ctas,.h-info,.h-tag{opacity:1;transform:none}.h-photo img,.ln>span{transform:none}.h-iso{opacity:.06}
  .walker{offset-distance:100%}.route-live{stroke-dashoffset:0}.arrive{opacity:1;transform:none}
}

/* ===== Ajustes del lienzo (antes estilos en línea) ===== */
.x1{width: 160px !important;height: auto !important}
.x2{object-position: 50% 40% !important}
.x3{height: 300px !important}
.x4{height: 360px !important}
.x5{height: 310px !important}
.x6{height: 250px !important}
.x7{width: 180px !important;height: auto !important}
.x8{display: block !important;padding: 6px 0 !important}
.x9{min-height: 48px !important;padding: 0 24px !important;font-size: 14px !important}
.x10{right: -124px !important;position: absolute !important;width: 1045px !important;height: 1163px !important;top: -263px !important}
.x11{margin: 0 !important;display: flex !important;flex-direction: column !important;align-items: flex-start !important;width: 666px !important;height: 352px !important;font-size: 60px !important;letter-spacing: -7.5px !important}
.x12{display: block !important;font-size: 52px !important;font-weight: 300 !important;line-height: 1 !important;letter-spacing: -0.02em !important;color: #FFFFFF !important}
.x13{font-weight: 600 !important}
.x14{display: block !important;font-size: 225px !important;font-weight: 600 !important;line-height: 0.82 !important;letter-spacing: -0.03em !important;color: #FF9700 !important;margin-top: 6px !important}
.x15{display: block !important;font-size: 115px !important;font-weight: 300 !important;line-height: 0.95 !important;letter-spacing: -0.03em !important;color: #FFFFFF !important;margin-top: 0px !important}
.x16{background-color: #ead7c6 !important}
.x17{color: #73350C !important}
.x18{margin-top: 28px !important}
.x19{color: #FF9700 !important}
.x20{background-color: #faf6f2 !important}
.x21{background-color: #73350c !important}
.x22{flex: none !important;margin-top: 2px !important}
.x23{font-size: 75px !important}

/* ===== Accesibilidad ===== */
[hidden]{display:none !important}
picture{display:contents}
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:3px;background:#FF9700;color:#482415;font:600 15px/1.2 "Poppins",sans-serif;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}
.pg a:focus-visible,.pg button:focus-visible{outline:2px solid #FF9700;outline-offset:3px}
.fld input:focus-visible,.fld textarea:focus-visible{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== MÓVIL (solo pantallas angostas; no afecta escritorio) ===== */
.nic-leg{display:none;flex-wrap:wrap;gap:10px 18px;margin-top:20px}
.nic-leg span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--cre)}
.nic-leg i{display:block;width:12px;height:12px;border-radius:3px;background:var(--cre)}
.nic-leg .home{color:var(--amb)}
@media (max-width: 760px){
  .wrap{padding:0 20px}
  .kick{font-size:11px;letter-spacing:.2em}
  .h2{font-size:36px;line-height:1.08}
  .lead{font-size:16px}
  .sec-head{grid-template-columns:1fr;gap:16px}
  .sec-head p{font-size:15.5px}
  .nav-in{padding:16px 20px;gap:8px 16px;flex-wrap:wrap}
  .nav-in>a:first-child img{width:118px !important}
  .nav-links{order:3;width:100%;gap:26px}
  .nl{font-size:14px;padding:8px 0}
  .nav-tel{display:none}
  .nav-cta .btn{min-height:44px !important;padding:0 16px !important;font-size:13px !important}
  .hero{height:auto;min-height:0;display:block;container-type:inline-size}
  .h-photo{width:100% !important;height:520px !important;top:0 !important;right:0 !important;left:0 !important;bottom:auto;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
  .h-photo img{object-position:46% 42%}
  .h-photo::after{background:linear-gradient(180deg,rgba(46,22,12,.6) 0%,rgba(46,22,12,0) 24%),linear-gradient(0deg,rgba(46,22,12,.75) 0%,rgba(46,22,12,0) 40%)}
  .h-copy{position:relative;left:auto;top:auto;width:auto;padding:410px 20px 52px}
  .h-copy .h1{width:auto !important;height:auto !important}
  .hl{white-space:nowrap}
  .hl1{font-size:calc((100cqw - 40px) * .0778) !important}
  .hl2{font-size:calc((100cqw - 40px) * .3366) !important;margin-top:3px !important}
  .hl3{font-size:calc((100cqw - 40px) * .1720) !important}
  .h-sub{font-size:16px;max-width:none;margin-top:20px}
  .h-ctas{flex-wrap:wrap;gap:14px 24px;margin-top:28px}
  .exp{padding:80px 0}
  .exp-grid{grid-template-columns:1fr;gap:44px}
  .exp-photos{grid-template-rows:180px 180px;gap:10px}
  .pt{grid-template-columns:40px minmax(0,1fr)}
  .exp-iso,.foot-iso{width:360px}
  .origen{padding:80px 0}
  .o-grid{grid-template-columns:1fr;gap:36px}
  .o-lead{font-size:16px}
  .nic .mtag{display:none}
  .nic-leg{display:flex}
  .mq{padding:18px 0}
  .mq-t span{font-size:26px;gap:22px;padding-right:22px}
  .mq-t i{width:8px;height:11px}
  .met{padding:80px 0}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px;margin-top:40px}
  .mf .pic{height:220px}
  .mf .pic::before{width:150px;height:150px;margin-left:-75px}
  .mf .pic img{height:auto !important;max-height:190px}
  .mf .cap{padding-top:14px;gap:4px}
  .mf .nm{font-size:19px}
  .mf .pr{font-size:13px}
  .mf .more{display:none}
  .met-foot{flex-direction:column;align-items:flex-start;gap:20px;margin-top:36px}
  .menus{padding:80px 0}
  .mcols{grid-template-columns:1fr;gap:48px;margin-top:40px}
  .mcard .ph{height:260px}
  .mcard .ttl{left:20px;right:20px;bottom:20px}
  .mcard .ttl h3{font-size:30px}
  .cats span{font-size:13px;padding:6px 12px}
  .mrow{flex-wrap:wrap;gap:12px 20px}
  .res{padding:80px 0}
  .res-grid{grid-template-columns:1fr;gap:40px}
  .hrs div{flex-direction:column;gap:4px}
  .form{padding:22px 18px;gap:18px 12px}
  .span2{grid-column:span 3}
  .form > div:nth-child(4){grid-column:span 6}
  .send{flex-direction:column;align-items:stretch;gap:14px}
  .send .btn{width:100%}
  .con{padding:80px 0}
  .con .h2{font-size:44px !important}
  .con-grid{grid-template-columns:1fr;gap:40px}
  .irow span,.irow a{font-size:16px}
  .con-ctas .btn{flex:1 1 100%}
  .map{width:470px;height:480px;zoom:.745;margin:0 auto}
  .map .lbl:not(.st-n),.map .pin{display:none}
  .lbl.st-n{font-size:13px}
  .walker{width:58px;height:73px}
  .start-tag{font-size:10px;letter-spacing:.08em;padding:4px 7px;top:288px;left:46px}
  .arrive{padding:8px 16px 8px 8px;gap:10px;top:150px;left:200px}
  .arrive img{width:34px;height:34px}
  .arrive b{font-size:17px}
  .arrive small{font-size:13px}
  .map-bar{padding:8px 12px}
  .map-bar span{display:none}
  .replay{min-height:60px;font-size:19px;padding:0 20px;margin-left:auto}
  .replay svg{width:22px;height:22px}
  .compass{width:52px;height:52px}
  .foot{padding:48px 0 32px}
  .foot-top{display:flex;justify-content:center}
  .foot-top>div:not(:first-child){display:none}
  .foot-top img{margin:0 auto}
  .foot-bot{flex-direction:column;align-items:center;text-align:center;gap:6px;margin-top:28px}
}
@media (max-width: 760px){ .res-bg{background-image:image-set(url("../img/dripper-800.avif") type("image/avif"),url("../img/dripper-800.webp") type("image/webp"),url("../img/dripper-800.jpg") type("image/jpeg"))} }
@media (max-width: 380px){ .map{zoom:.68} }
@media (min-width: 421px) and (max-width: 760px){ .map{zoom:.83} }
@media (min-width: 500px) and (max-width: 760px){ .map{zoom:1} }

/* ===== INTERMEDIO 761–1439 px (laptop/tablet): solo encaja el diseño de escritorio; no afecta 1440+ ni móvil ===== */
@media (min-width: 761px) and (max-width: 1439px){
  .con-grid{grid-template-columns:minmax(0,1fr) auto}
  .map{zoom:.85}
}
@media (min-width: 1100px) and (max-width: 1279px){ .map{zoom:.72} }
@media (min-width: 761px) and (max-width: 1099px){
  .wrap{padding:0 48px}
  .nav-in{padding:24px 48px;gap:40px}
  .nav-tel{display:none}
  .h-copy{left:48px}
  .sec-head{gap:40px}
  .exp-grid,.o-grid,.res-grid{gap:48px}
  .shelf{gap:20px}
  .con-grid{grid-template-columns:1fr;gap:48px}
  .map{zoom:.8;margin:0 auto}
}
@media (min-width: 900px) and (max-width: 1099px){ .map{zoom:1} }
/* ===== Pantallas muy angostas (≤340 px) ===== */
@media (max-width: 340px){ .map{zoom:.59} }