:root{
  --paper:#EEDBC6; --paper-hi:#F7EBDA;
  --ink:#5B2E20; --body:#6A5042; --clay:#A0502B; --clay-d:#85401F; --cream:#F4E9D6;
  --serif:"Cormorant Garamond","Cormorant","EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --script:"Mrs Saint Delafield","Snell Roundhand","Segoe Script","Brush Script MT",cursive;
  --u:calc(100vw / 724);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .22  0 0 0 0 .1  0.9 0 0 0 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:300;color:var(--body);background:#E8D4BC;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
svg{display:block}
:focus-visible{outline:2px solid var(--clay);outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--clay);color:#fff;padding:.6rem 1rem;z-index:200}
.skip:focus{top:1rem}

/* ================= header ================= */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;height:calc(66*var(--u));color:#5E3A2B;transition:background .45s,box-shadow .45s,height .45s}
.hdr.is-stuck{background:rgba(238,219,198,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(91,46,32,.16);height:calc(54*var(--u))}
.hdr>*{position:absolute}
.logo{left:calc(58*var(--u));top:calc(15*var(--u));display:flex;flex-direction:column;font:300 calc(12.6*var(--u))/calc(16*var(--u)) var(--sans);letter-spacing:.34em;transition:top .45s}
.is-stuck .logo{top:calc(6*var(--u))}
.nav a{position:absolute;top:calc(25*var(--u));font:400 calc(6.3*var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;padding:.8em 0;transition:top .45s}
.is-stuck .nav a{top:calc(18*var(--u))}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.35em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.pill{left:calc(583.5*var(--u));top:calc(21*var(--u));width:calc(71*var(--u));height:calc(25*var(--u));border:1px solid currentColor;border-radius:99px;display:flex;align-items:center;justify-content:center;font:400 calc(6.1*var(--u))/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;transition:background .3s,color .3s,top .45s}
.is-stuck .pill{top:calc(15*var(--u))}
.pill:hover{background:#5B2E20;color:var(--cream)}
.bag{left:calc(669*var(--u));top:calc(24*var(--u));width:calc(15*var(--u));height:calc(17*var(--u));color:inherit;background:none;border:0;cursor:pointer;transition:top .45s}
.is-stuck .bag{top:calc(18*var(--u))}
.bag svg{width:100%;height:100%}
.burger{display:none}
.menu{display:none}

/* ================= página escritorio ================= */
.page{position:relative;width:100%;height:calc(2172*var(--u));background-size:100% 100%;background-repeat:no-repeat;overflow:hidden}
.page{background-image:url(../img/fondo-escritorio.jpg)}
.sec{position:absolute;left:0;width:100%}
.m-only{display:none}
.t{position:absolute;white-space:nowrap}
.ln{display:block;width:max-content}
.eyebrow{font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.24em;color:#6E5446}
.h{font-family:var(--serif);font-weight:500;color:var(--ink);letter-spacing:-.01em}
.h em{font-style:italic;font-weight:400}
.p{font-family:var(--sans);font-weight:300;color:var(--body)}
.lnk{font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.17em;color:#5E3A2B;display:flex;align-items:center;gap:1.1em}
.lnk .ln{padding-bottom:.55em;border-bottom:1px solid currentColor}
.arr{width:2em;height:.8em;flex:none;transition:transform .35s}
.lnk:hover .arr{transform:translateX(.5em)}
.on-dark .h,.on-dark .p,.on-dark .eyebrow,.on-dark .lnk{color:#F4EBDA}
.on-dark .p{color:#EDE3D0}
.btn{position:absolute;left:calc(62*var(--u));top:calc(328*var(--u));width:calc(188*var(--u));height:calc(28*var(--u));background:linear-gradient(180deg,#A5532D,#954724);color:#F4E4CD;display:flex;align-items:center;justify-content:center;gap:calc(10*var(--u));font:400 calc(6.3*var(--u))/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;box-shadow:0 calc(3*var(--u)) calc(7*var(--u)) rgba(80,35,12,.28);transition:background .3s}
.btn:hover{background:#85401F}
.btn svg{width:calc(10*var(--u));height:calc(4*var(--u));transition:transform .35s}
.btn:hover svg{transform:translateX(.5em)}
.script{font-family:var(--script);color:#A8532E;font-weight:400;transform-origin:0 0}
.script .ln{width:max-content}
.on-dark .script{color:#F1DFC6}
.keys{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;color:#5E3A2B}
.keys .ln{width:auto}

/* animación de texto */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .08em .2em 0;margin:-.1em -.08em -.2em 0}
.js .wi{display:inline-block;transform:translateY(118%);transition:transform 1.05s cubic-bezier(.2,.7,.1,1) calc(var(--i)*70ms + var(--d,0ms))}
.js .is-in .wi{transform:none}
.js .fade{opacity:0;transform:translateY(10px);transition:opacity 1s ease var(--d,.4s),transform 1s ease var(--d,.4s)}
.js .is-in .fade,.js .fade.is-in{opacity:1;transform:none}
.js .script .ln{clip-path:inset(-30% 104% -30% -8%);transition:clip-path 1.25s cubic-bezier(.55,0,.25,1) calc(.3s + var(--l,0)*.7s)}
.js .script.is-in .ln{clip-path:inset(-30% -12% -30% -8%)}
.js .btn{opacity:0;transform:translateY(10px);transition:opacity 1s ease 1.4s,transform 1s ease 1.4s,background .3s}
.js .btn.is-in{opacity:1;transform:none}
.js .btn.is-in:hover{transform:none}

/* ================= móvil ================= */
@media (max-width:900px){
  :root{--u:1px}
  body{font-size:16px}
  .hdr{height:64px;color:#5E3A2B;transition:background .4s,box-shadow .4s}
  .hdr.is-stuck{height:56px}
  .logo{left:20px;top:11px;font:300 13px/15px var(--sans)}
  .is-stuck .logo{top:8px}
  .nav,.pill{display:none}
  .bag{left:auto;right:64px;top:19px;width:22px;height:24px}
  .is-stuck .bag{top:16px}
  .burger{display:block;position:absolute;right:12px;top:10px;width:42px;height:42px;background:none;border:0;color:inherit;cursor:pointer;z-index:80}
  .burger span{position:absolute;left:9px;right:9px;height:1px;background:currentColor;transition:transform .45s,top .45s}
  .burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:25px}
  .menu-open .burger span:nth-child(1){top:21px;transform:rotate(45deg)}
  .menu-open .burger span:nth-child(2){top:21px;transform:rotate(-45deg)}
  .menu{display:flex;position:fixed;inset:0;z-index:55;flex-direction:column;justify-content:center;padding:6rem 2rem 3rem;background:var(--grain),radial-gradient(90% 60% at 20% 0,rgba(255,200,150,.28),transparent),#9A4825;color:var(--cream);clip-path:circle(0 at calc(100% - 33px) 31px);transition:clip-path .8s cubic-bezier(.7,0,.2,1);visibility:hidden}
  .menu li{overflow:hidden}
  .menu li a{display:block;font:500 clamp(2.1rem,9.5vw,3.2rem)/1.3 var(--serif);transform:translateY(110%);transition:transform .8s cubic-bezier(.2,.7,.1,1)}
  .menu-open{overflow:hidden}
  .menu-open .menu{clip-path:circle(150% at calc(100% - 33px) 31px);visibility:visible}
  .menu-open .menu li a{transform:none}
  .menu-open .menu li:nth-child(1) a{transition-delay:.25s}.menu-open .menu li:nth-child(2) a{transition-delay:.31s}.menu-open .menu li:nth-child(3) a{transition-delay:.37s}.menu-open .menu li:nth-child(4) a{transition-delay:.43s}.menu-open .menu li:nth-child(5) a{transition-delay:.49s}.menu-open .menu li:nth-child(6) a{transition-delay:.55s}
  .menu p{margin-top:2.4rem;font:400 .66rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;opacity:.75}
  .menu-open .hdr{color:var(--cream);background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

  .page{height:auto;background:none;overflow:visible}
  .page{background:#EEDBC6;overflow-x:clip}
  .sec{position:relative;top:auto!important;height:auto!important;display:block;padding:0}
  .m-only{display:block}
  .t{position:static;white-space:normal;left:auto!important;top:auto!important;transform:none}
  .ln{display:inline;width:auto}
  .ln::after{content:" "}
  .t br{display:none}
  .d-only{display:none!important}
  /* hero */
  .hero-m{position:relative;aspect-ratio:780/1507;background:url(../img/mobile/hero-movil.jpg) top center/100% 100% no-repeat}
  .hero-m .copy-m{padding:84px 24px 0}
  .hero-m .eyebrow{margin-bottom:.9rem}
  .hero-m .h{font-size:clamp(3.1rem,14.4vw,4.6rem);line-height:.98}
  .hero-m .p{font-size:.95rem;line-height:1.62;margin-top:1.05rem;max-width:19.5em}
  .hero-m .btn{margin-top:1.2rem;padding:1.1em 1.9em}
  /* hojas de papel superpuestas */
  .sheet-m{position:relative;margin-top:-56px}
  #esencia.sheet-m{margin-top:-30px}
  .sheet-m::before{content:"";position:absolute;left:0;right:0;top:-41px;height:87px;background:url(../img/mobile/edge-paper-1.webp) 0 0/100% 100% no-repeat;pointer-events:none}
  .sheet-m.e2::before{background-image:url(../img/mobile/edge-paper-2.webp)}
  .sheet-m.e3::before{background-image:url(../img/mobile/edge-paper-3.webp)}
  .sheet-m.sec--green::before{background-image:url(../img/mobile/edge-green.webp)}
  .sheet-m.sec--terra::before{background-image:url(../img/mobile/edge-terra.webp)}
  .sheet-m>.fib{display:none}
  .sheet-m>.pap{position:relative;padding:34px 24px 84px;background:url(../img/mobile/paper-tile.jpg) 0 0/384px 384px repeat}
  .sec--green>.pap{background-image:url(../img/mobile/green-tile.jpg);padding-bottom:230px}
  .sec--terra>.pap{background-image:url(../img/mobile/terra-tile.jpg);padding-bottom:36px}
  /* piezas fotográficas con borde natural */
  .piece{position:relative;display:block;height:auto;margin-top:-34px;pointer-events:none;-webkit-user-drag:none}
  .piece--agave{width:86%;margin-left:-2%}
  .piece--pot{width:97%;margin-left:auto;margin-right:-1%}
  .piece--label{width:100%}
  .piece--landscape{width:108%;margin-left:-4%;margin-top:-196px}
  .piece--table{width:100%;margin-top:-52px}
  .collage{display:block;width:calc(100% + 48px);max-width:none;margin:1.4rem -24px -1rem;pointer-events:none}
  .la{position:relative;pointer-events:none}
  .la img{display:block;width:100%;height:auto}
  /* tipografía */
  .copy-m{display:block}
  .copy-m .t{display:block}
  .copy-m .lnk{display:flex}
  .eyebrow{font-size:.7rem;letter-spacing:.28em;margin-bottom:1rem}
  .h{font-size:clamp(2.25rem,9.8vw,3.2rem);line-height:1.04}
  .p{font-size:.95rem;line-height:1.72;margin-top:1.2rem;max-width:30em}
  .lnk{font-size:.68rem;margin-top:1.6rem}
  .lnk .ln{display:block}
  .lnk .ln::after{content:none}
  .arr{width:1.9em;height:.75em}
  .btn{position:relative;left:auto;top:auto;width:auto;height:auto;padding:1.2em 2em;margin-top:1.6rem;display:inline-flex;font-size:.68rem;gap:1.1em}
  .btn svg{width:1.9em;height:.75em}
  .script{font-size:2.5rem;line-height:.9;margin-top:1.4rem;transform:rotate(-7deg);transform-origin:0 50%}
  .script .ln{display:block}
  .script .ln::after{content:none}
  .hero-m .script{display:none}
  .keys{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:1.5rem;font-size:.66rem}
  .keys .ln{display:inline}
  .keys .ln::after{content:none}
  .keys.t{width:auto;height:auto}
  .on-dark .script{color:#F3E2C9}
  /* pie */
  .foot-m{display:flex;flex-direction:column;gap:1.7rem;color:#F3E5D0}
  .foot-m .logo-m{display:flex;flex-direction:column;font:300 22px/1.2 var(--sans);letter-spacing:.34em}
  .foot-m .tag{font:400 .62rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;opacity:.9;margin-top:.9rem}
  .foot-m nav{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem}
  .foot-m nav a{font:400 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:.4rem 0}
  .foot-m .soc{display:flex;gap:1.1rem}
  .foot-m .soc svg{width:20px;height:20px}
  .foot-m .base{display:flex;flex-direction:column;gap:.5rem;font:400 .6rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.85;margin-top:.8rem}
  .foot-m .sc{font:400 2.7rem/.95 var(--script);align-self:flex-end;text-align:right;transform:rotate(-6deg)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .wi{transform:none}.js .fade,.js .btn{opacity:1;transform:none}.js .script .ln{clip-path:none}
}