:root{--b:#09090A;--w:#FBFBF9;--amb:#FFAE1A;--ice:#A9D2F5;--g:#b9b9b6;
--d:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;--s:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--b);scroll-padding-top:calc(68px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--w);color:var(--b);font:400 1.0625rem/1.65 var(--s);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}p{margin:0}
:focus-visible{outline:3px solid var(--amb);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:110px 0}
h2,h3{font-family:var(--d);font-weight:800;line-height:.98;letter-spacing:-.03em;margin:0}
h2{font-size:clamp(2.4rem,6vw,4.8rem);max-width:15ch}
.blk{background:var(--b);color:#fff}
.blk .mut{color:var(--g)}
/* nav */
nav{position:fixed;left:0;right:0;top:0;z-index:30;color:#fff;background:rgba(9,9,10,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid rgba(255,255,255,.14)}
nav .wrap{max-width:none;display:flex;gap:26px;align-items:center;height:68px}
nav a{text-decoration:none;font-weight:500;font-size:.95rem;transition:color .2s}nav a:not(.br):hover{color:var(--amb)}
nav .br{font:800 1.2rem var(--d);letter-spacing:-.02em;margin-right:auto}
@media(max-width:760px){nav .lk{display:none}.mp{display:flex}.mg{grid-template-columns:1fr 1fr;gap:22px 16px;padding-top:22px}}@media(min-width:761px) and (max-width:1000px){.mg{grid-template-columns:repeat(3,1fr)}}
/* hero */
.hero{position:relative;isolation:isolate;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;background:var(--w)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--b);clip-path:polygon(55% 0,100% 0,100% 100%,45% 100%)}
.hl{padding:130px 6vw 20px 24px;align-self:center;max-width:620px}
.hl .k{font:600 .95rem var(--s);margin-bottom:18px;display:inline-block;background:var(--b);color:var(--w);padding:6px 14px;border-radius:99px}
.hl .tg{font:700 clamp(1.7rem,3.2vw,2.7rem)/1.05 var(--d);letter-spacing:-.025em}
.hl .tg+p{margin-top:16px;color:#444;max-width:40ch}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-block;padding:14px 26px;border-radius:99px;font-weight:600;text-decoration:none;border:2px solid currentColor;transition:transform .2s,background .2s,color .2s}
.btn.p{background:var(--b);color:var(--w);border-color:var(--b)}
.btn:hover{transform:translateY(-3px);background:var(--amb);color:var(--b);border-color:var(--amb)}
.hr{display:flex;align-items:center;justify-content:center;padding:100px 24px 10px 4vw}
.panel{width:100%;max-width:620px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;color:#fff;text-align:center}
.panel svg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 26px rgba(255,160,30,.45))}
.panel small{display:block;opacity:.6;font-size:.9rem;margin-top:8px}
.wm{grid-column:1/-1;margin:0;padding:0 24px 22px;font:800 clamp(2.2rem,12.4vw,11.5rem)/.82 var(--d);letter-spacing:-.045em;color:#fff;mix-blend-mode:difference;white-space:nowrap;animation:up 1s cubic-bezier(.2,.8,.2,1) both}
.panel{animation:fade 1.4s .3s both}
@keyframes up{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.eye{transform-box:fill-box;transform-origin:center;animation:blink 6s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.06)}}
.pup{transform-box:fill-box;transform-origin:center;transition:transform .35s}
.panel.wide .pup{transform:scaleX(2.3)}
.look{transition:transform .12s ease-out}
@media(max-width:860px){
.hero{grid-template-columns:1fr;grid-template-rows:auto auto auto}
.hero::before{display:none}
.hr{order:-1;background:var(--b);padding:90px 24px 24px}
.hl{padding:40px 24px 20px;max-width:none}
}
/* cintas */
.x{position:relative;height:230px;overflow:hidden;background:var(--w)}
.s{position:absolute;left:-6%;width:112%;top:50%;height:74px;margin-top:-37px;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.s1{background:var(--b);color:#fff;transform:rotate(-2.4deg)}
.s2{background:var(--amb);color:var(--b);transform:rotate(2.4deg);z-index:2;border-block:2px solid var(--b)}
.tr{display:flex;width:max-content;font:700 1.6rem var(--d);letter-spacing:-.01em;animation:sl 38s linear infinite}
.s2 .tr{animation-direction:reverse;animation-duration:46s}
.tr span{padding:0 22px}
@keyframes sl{to{transform:translateX(-50%)}}
/* concepto */
.cn .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.eq{font:800 clamp(3.2rem,9vw,8rem)/.9 var(--d);letter-spacing:-.045em}
.eq div+div{margin-top:.08em}
.eq .c{color:var(--amb)}.eq .a{color:var(--ice)}.eq small{font-size:.45em;color:var(--g);font-weight:700;margin-right:.2em}
.cn .tx p+p{margin-top:16px}
.cn .tx p{color:#d4d4d2;font-size:1.12rem}
.cn .tx .bg{font:700 clamp(1.5rem,2.6vw,2rem)/1.15 var(--d);color:#fff;letter-spacing:-.02em;margin-bottom:22px}
@media(max-width:860px){.cn .wrap{grid-template-columns:1fr;gap:36px}}
/* mosaico */
.dc{padding-bottom:0}
.dc .wrap{position:relative;padding-bottom:50px}
.dc p.l{font-size:1.2rem;color:#555;max-width:50ch;margin-top:18px}
.mos{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--b)}
.t{min-height:310px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;background:var(--w);color:var(--b);box-shadow:inset 0 0 0 1px var(--b);transition:background .25s,color .25s}
.t .e{font-size:2.6rem;line-height:1;display:inline-block;transition:transform .35s cubic-bezier(.2,1.5,.4,1)}
.t h3{font-size:1.6rem;line-height:1.02;margin-bottom:10px}
.t p{font-size:.98rem;opacity:.82;line-height:1.5}
.t:hover{background:var(--amb);color:var(--b)}
.t:hover .e{transform:scale(1.25) rotate(-10deg)}
.t.z{background:var(--amb);color:var(--b);justify-content:flex-end}
.t.z:hover{background:var(--b);color:var(--amb)}
.t.z h3{font-size:2.1rem}
@media(min-width:1000px){.t:nth-child(8n+1),.t:nth-child(8n+3),.t:nth-child(8n+6),.t:nth-child(8n+8){background:var(--b);color:#fff}.t:nth-child(8n+1):hover,.t:nth-child(8n+3):hover,.t:nth-child(8n+6):hover,.t:nth-child(8n+8):hover{background:var(--amb);color:var(--b)}}
@media(max-width:999px) and (min-width:601px){.mos{grid-template-columns:1fr 1fr}.t:nth-child(4n+1),.t:nth-child(4n+4){background:var(--b);color:#fff}.t:nth-child(4n+1):hover,.t:nth-child(4n+4):hover{background:var(--amb);color:var(--b)}}
@media(max-width:600px){.mos{grid-template-columns:1fr}.t{min-height:240px}.t:nth-child(odd){background:var(--b);color:#fff}.t:nth-child(odd):hover{background:var(--amb);color:var(--b)}}
.t.z,.t.z:nth-child(n){background:var(--amb);color:var(--b)}
.t.z:hover,.t.z:nth-child(n):hover{background:var(--b);color:var(--amb)}
/* más */
.mr h2{max-width:14ch}
.mr .l{font-size:1.25rem;color:var(--g);max-width:56ch;margin:24px 0 56px}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tri div{border-top:3px solid var(--ice);padding-top:18px;font:700 clamp(1.4rem,2.4vw,1.9rem)/1.12 var(--d);letter-spacing:-.02em}
.tri div:nth-child(2){border-color:var(--amb)}
.tri div:nth-child(3){border-color:#fff}
.tri small{display:block;margin-bottom:10px;font:600 .95rem var(--s);color:var(--g);letter-spacing:0}
@media(max-width:760px){.tri{grid-template-columns:1fr}}
/* personalidad */
.pe .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.pe .st{position:sticky;top:96px;align-self:start}
.pe .st p{margin-top:20px;font-size:1.15rem;color:#555;max-width:34ch}
details{border-top:2px solid var(--b)}
details:last-of-type{border-bottom:2px solid var(--b)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 12px;font:800 clamp(2rem,5vw,3.6rem)/1 var(--d);letter-spacing:-.035em;transition:background .2s}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font:500 2.4rem var(--s);transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
summary:hover,details[open] summary{background:var(--amb)}
details p{padding:18px 12px 26px;font-size:1.2rem;color:#333;max-width:42ch}
@media(max-width:860px){.pe .wrap{grid-template-columns:1fr;gap:32px}.pe .st{position:static}}
/* público */
.au{padding-bottom:120px}
.au h2{margin-bottom:46px;max-width:20ch}
.mq{overflow:hidden}
.mq+.mq{margin-top:12px}
.mq .tk{display:flex;gap:12px;width:max-content;animation:sl 70s linear infinite}
.mq+.mq .tk{animation-direction:reverse;animation-duration:85s}
.mq:hover .tk{animation-play-state:paused}
.ch{white-space:nowrap;padding:14px 26px;border-radius:99px;font-weight:600;background:var(--w);color:var(--b)}
.ch:nth-child(even){background:transparent;color:#fff;border:2px solid #fff;padding:12px 24px}
/* visión misión */
.vm{display:grid;grid-template-columns:1fr 1fr}
.vm article{position:relative;padding:100px max(24px,5vw) calc(var(--mh) + 50px)}
.vm article:first-child{background:var(--b);color:#fff}
.vm article:last-child{background:var(--w);color:var(--b)}
.vm h3{font-size:clamp(2.6rem,6vw,5rem);margin-bottom:22px}
.vm p{font-size:1.2rem;max-width:42ch}
.vm article:first-child p{color:#d4d4d2}
.vm article:last-child p{color:#333}
@media(max-width:860px){.vm{grid-template-columns:1fr}.vm article{padding:70px 24px calc(var(--mh) + 40px)}}
/* esencia */
.es{text-align:center;padding:120px 0 100px}
.es .k{font-size:1.2rem;color:var(--g);margin-bottom:34px}
.es .k b{color:#fff}
.sm{font:800 clamp(2.4rem,7.4vw,6.4rem)/.98 var(--d);letter-spacing:-.04em;min-height:3.1em;max-width:14ch;margin:0 auto;transition:opacity .35s,transform .35s}
.sm.out{opacity:0;transform:translateY(16px)}
.sm .a{color:var(--amb)}.sm .r{color:var(--ice)}
.dt{display:flex;gap:10px;justify-content:center;margin-top:32px}
.dt button{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;padding:0;cursor:pointer;transition:background .2s,transform .2s}
.dt button[aria-current="true"]{background:var(--amb);border-color:var(--amb);transform:scale(1.35)}
/* footer */
footer{background:var(--w);text-align:center;padding:100px 0 calc(60px + env(safe-area-inset-bottom,0px))}
footer .cats{font-size:3rem;letter-spacing:.2em}
footer .big{font:800 clamp(2.4rem,7vw,6rem)/.95 var(--d);letter-spacing:-.04em;max-width:14ch;margin:18px auto 0}
footer .btns{justify-content:center}
footer small{display:block;margin-top:60px;color:#666;font-size:.9rem}
/* menú tienda */
.tb{font:600 .95rem var(--s);color:#fff;background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:8px 18px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tb:hover,.tb[aria-expanded="true"]{background:var(--amb);color:var(--b);border-color:var(--amb)}
.tb span{display:inline-block;transition:transform .25s}
.tb[aria-expanded="true"] span{transform:rotate(180deg)}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:rgba(9,9,10,.98);border-bottom:1px solid rgba(255,255,255,.14);max-height:calc(100svh - 68px - env(safe-area-inset-top,0px));overflow-y:auto;-webkit-overflow-scrolling:touch}
.mega.open{display:block;animation:dd .25s ease-out}
@keyframes dd{from{opacity:0;transform:translateY(-8px)}}
.mg{max-width:1200px;margin:0 auto;padding:30px 24px 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px}
.mg .c a.h{display:flex;gap:8px;align-items:flex-start;font:700 1.05rem/1.15 var(--d);letter-spacing:-.01em;margin-bottom:8px;color:#fff}
.mg .c a.h:hover{color:var(--amb)}
.mg .c ul{list-style:none;margin:0;padding:0}
.mg .c li a{display:block;padding:2px 0;font-size:.92rem;font-weight:400;color:var(--g)}
.mg .c li a:hover{color:#fff}
.mp{display:none;max-width:1200px;margin:0 auto;padding:18px 24px 0;gap:8px;flex-wrap:wrap}
.mp a{border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:7px 15px}
.mf{max-width:1200px;margin:0 auto;padding:0 24px 28px}
.mf a{display:inline-block;background:var(--amb);color:var(--b);padding:12px 22px;border-radius:99px;font-weight:700}
.mf a:hover{color:var(--b)}
.t.flash{background:var(--amb)!important;color:var(--b)!important;box-shadow:inset 0 0 0 6px var(--b)}
/* mascotas */
:root{--mh:clamp(130px,16vw,220px)}
.has-m{position:relative;padding-bottom:calc(var(--mh) + 50px)}
.mas{position:absolute;bottom:0;z-index:5;display:block;border:0;background:none;padding:0;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite}
.mas img{display:block;height:var(--mh);width:auto;transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.mas.fl img{transform:scaleX(-1)}
.mas:hover img,.mas:focus-visible img{transform:scale(1.06) rotate(-3deg)}
.mas.fl:hover img,.mas.fl:focus-visible img{transform:scale(-1.06,1.06) rotate(3deg)}
.mas.in{position:relative;bottom:auto}
.bub{position:absolute;bottom:100%;left:50%;width:max-content;max-width:min(240px,72vw);padding:10px 14px;border-radius:16px;background:var(--amb);color:var(--b);font:700 .95rem/1.25 var(--d);letter-spacing:-.01em;text-align:center;opacity:0;pointer-events:none;transform:translate(-50%,10px) scale(.9);transition:opacity .25s,transform .3s cubic-bezier(.2,1.4,.4,1)}
.bub b{display:block;margin-bottom:3px;font:800 .8rem var(--s);opacity:.65}
.bub::after{content:"";position:absolute;top:100%;left:50%;margin-left:-7px;border:7px solid transparent;border-top-color:var(--amb)}
.mas.r .bub{left:auto;right:0;transform:translate(0,10px) scale(.9)}
.mas.l .bub{left:0;transform:translate(0,10px) scale(.9)}
.mas.r .bub::after{left:auto;right:34px;margin:0}
.mas.l .bub::after{left:34px;margin:0}
.mas:hover .bub,.mas:focus-visible .bub,.mas.on .bub{opacity:1;transform:translate(-50%,-6px) scale(1)}
.mas.r:hover .bub,.mas.r:focus-visible .bub,.mas.r.on .bub,.mas.l:hover .bub,.mas.l:focus-visible .bub,.mas.l.on .bub{transform:translate(0,-6px) scale(1)}
.st .mas.in{display:inline-block;margin-top:34px}
footer .mas.in{display:block;margin:0 auto 18px;width:max-content}
@keyframes sway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.tr,.mq .tk{width:auto;flex-wrap:wrap}}

/* páginas internas */
a.t{text-decoration:none}
.t .go{align-self:flex-start;margin-top:14px;display:inline-block;font:700 .9rem var(--s);border-bottom:2px solid currentColor;padding-bottom:1px}
.ph{position:relative;padding:130px 0 40px;background:var(--w);color:var(--b)}
.ph.d{background:var(--b);color:#fff}
.ph.has-m{padding-bottom:calc(var(--mh) + 40px)}
.ph .bc{font-size:.92rem;margin-bottom:36px;opacity:.75}
.ph .bc a{text-decoration:none;border-bottom:1px solid currentColor}
.ph .bc a:hover{color:var(--amb);border-color:var(--amb)}
.ph .bc i{font-style:normal;margin:0 8px}
.ph .em{display:block;font-size:clamp(3rem,7vw,5rem);line-height:1;margin-bottom:16px}
.ph h1{margin:0;max-width:16ch;font:800 clamp(2.6rem,9vw,7.5rem)/.92 var(--d);letter-spacing:-.04em}
.ph p.lead{font-size:1.25rem;max-width:46ch;margin-top:22px;opacity:.8}
.cb{position:sticky;top:calc(68px + env(safe-area-inset-top,0px));z-index:20;background:var(--w);color:var(--b);border-block:2px solid var(--b)}
.cb .wrap{display:flex;gap:8px;overflow-x:auto;padding-block:12px;scrollbar-width:none}
.cb a{white-space:nowrap;border:2px solid var(--b);border-radius:99px;padding:7px 16px;text-decoration:none;font-weight:600;font-size:.95rem;transition:background .2s}
.cb a:hover,.cb a.on{background:var(--amb)}
.cat{padding-bottom:70px}
.sb{padding:64px 0 10px;scroll-margin-top:150px}
.sb h2{max-width:none;font-size:clamp(2rem,4.6vw,3.4rem);margin-bottom:26px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.pc{display:flex;flex-direction:column;gap:10px;padding:18px;border:2px solid var(--b);border-radius:20px;background:var(--w)}
.pc img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#ececea}
.pc h3{font-size:1.3rem;line-height:1.05}
.pc p{font-size:.95rem;color:#555;line-height:1.5}
.pc .pr{font:800 1.2rem var(--d)}
.pc .q{align-self:flex-start;margin-top:auto;padding:10px 18px;font-size:.95rem}
.pc.soon{border-style:dashed;background:transparent;min-height:170px;justify-content:center}
.pc.soon .e{font-size:2rem}
.oth{background:var(--b);color:#fff;padding:90px 0}
.oth h2{max-width:none;font-size:clamp(2rem,4.6vw,3.4rem)}
.oth .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.oth a.ch{text-decoration:none;transition:background .2s,color .2s}
.oth a.ch:hover{background:var(--amb);color:var(--b);border-color:var(--amb)}
.pn{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px}
.pn a{text-decoration:none;font:700 1.15rem var(--d);border-bottom:2px solid var(--amb);padding-bottom:3px}
.pn a:hover{color:var(--amb)}
.pn small{display:block;font:500 .85rem var(--s);color:var(--g)}

/* ojos fijos al bajar */
.fe{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:25;width:104px;padding:9px 12px;border-radius:99px;background:#000;border:1px solid rgba(255,255,255,.25);box-shadow:0 0 22px rgba(255,160,30,.35);opacity:0;transform:translateY(20px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s,box-shadow .2s}
.fe.on{opacity:1;transform:none;pointer-events:auto}
.fe:hover{box-shadow:0 0 30px rgba(255,160,30,.75)}
.fe svg{display:block;width:100%;height:auto}