[hidden]{display:none !important}

:root{
  color-scheme: light;
  --paper:#FBF6EE;
  --paper-deep:#F4EADB;
  --blush:#F8E3CA;
  --ink:#2E4C59;
  --ink-soft:#6C8189;
  --sienna:#B9683B;
  --sienna-soft:#D9A377;
  --rule:#DFD2BE;

  --f-display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --f-body:"EB Garamond","Iowan Old Style",Georgia,serif;
  --f-script:"Sacramento","Snell Roundhand",cursive;

  --gutter:clamp(20px,5vw,64px);
  --max:1180px;

}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.64;
  -webkit-font-smoothing:antialiased;
}

/* ---------- background layers ---------- */
.toile{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.057;
}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.5; mix-blend-mode:multiply;
}
.page{position:relative; z-index:2}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(.66rem,1.6vw,.78rem);
  letter-spacing:.44em; text-transform:uppercase;
  color:var(--ink-soft); margin:0;
}
h2{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.15rem);
  letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 1.1rem; text-wrap:balance;
}
h3{
  font-family:var(--f-display); font-weight:400;
  font-size:.74rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 .5rem;
}
p{margin:0 0 1.05rem; max-width:62ch}
.lede{font-size:clamp(1.08rem,2.2vw,1.28rem)}
a{color:inherit}
:focus-visible{outline:2px solid var(--sienna); outline-offset:3px}

.rule{width:44px; height:1px; background:var(--sienna-soft); border:0; margin:1.6rem 0}
.rule.center{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:.72rem; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  padding:.95rem 2.4rem; border:1px solid var(--ink);
  background:transparent; color:var(--ink);
  text-decoration:none; cursor:pointer;
  transition:background .35s ease, color .35s ease;
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn--solid{background:var(--ink); color:var(--paper)}
.btn--solid:hover{background:var(--sienna); border-color:var(--sienna); color:#fff}
.btn--wide{width:100%}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:.8rem var(--gutter);
  background:rgba(251,246,238,.93);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav-left,.nav-right{display:flex; gap:1.6rem; align-items:center}
.nav-right{justify-content:flex-end}
.navlink{
  font-family:var(--f-display); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-soft);
}
.navlink:hover{color:var(--ink)}
.mark img{display:block; height:30px; width:auto}

/* ---------- hero ---------- */
.hero{
  padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,6vw,4rem);
  padding-inline:var(--gutter);
  text-align:center; position:relative;
}
.hero-inner{position:relative; max-width:760px; margin-inline:auto}
.hero-logo{
  display:block; margin:0 auto 1.5rem;
  width:clamp(100px,13.5vw,150px); height:auto;
}
.hero .title{
  font-family:var(--f-script); font-style:normal; font-weight:400;
  font-size:clamp(3.4rem,12vw,6rem);
  line-height:.92; margin:.7rem 0 0; color:var(--ink);
}
.hero p{margin-inline:auto}
.hero .stamp{
  display:inline-block; margin-top:2rem;
  font-family:var(--f-display); font-size:.68rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--sienna);
}
.hero .btn{margin-top:1.7rem}

/* ---------- sections ---------- */
section{padding-inline:var(--gutter)}
.wrap{max-width:var(--max); margin-inline:auto}
.split{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,6vw,5.5rem); align-items:center;
  padding-block:clamp(3.5rem,9vw,7rem);
}
.split--flip .visual{order:2}
.split--flip .copy{order:1}

/* ---------- photos with dispersed edges ---------- */
.visual{position:relative}
.photo{display:block; width:100%; height:auto}
.photo{object-fit:cover}
.inset{
  position:absolute; right:-5%; bottom:-8%;
  width:41%; max-width:268px;
}
.visual--flip .inset{right:auto; left:-4%}

/* wide photo that dissolves across the hero edge */
.hero-photo{
  position:relative; z-index:5;
  max-width:var(--max); margin-inline:auto;
  margin-top:0;
  padding-inline:var(--gutter);
}

/* ---------- order card ---------- */
.order{
  padding-block:clamp(3.5rem,9vw,7rem);
}
.order-grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,6vw,4.5rem); align-items:start;
}
.card{
  background:var(--paper); border:1px solid var(--rule);
  padding:clamp(1.5rem,4vw,2.25rem);
}
.card-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.card-head .name{font-family:var(--f-script); font-size:2rem; line-height:1}
.card-head .price{font-family:var(--f-display); font-size:1.05rem; letter-spacing:.06em}
.stepper{
  display:flex; align-items:center; margin:1.6rem 0 .6rem;
  border:1px solid var(--ink); width:max-content;
}
.stepper button{
  width:52px; height:48px; border:0; background:transparent; cursor:pointer;
  font-family:var(--f-display); font-size:1.1rem; color:var(--ink); line-height:1;
}
.stepper button:hover{background:var(--blush)}
.stepper .qty{
  min-width:64px; text-align:center;
  font-family:var(--f-display); font-size:1.05rem;
  font-variant-numeric:tabular-nums;
  border-inline:1px solid var(--ink); height:48px; line-height:48px;
}
.hint{
  font-family:var(--f-display); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sienna); min-height:1.2em; margin:0 0 1.4rem;
}
.hint[data-free="true"]{color:var(--ink-soft)}
.totals{border-top:1px solid var(--rule); padding-top:1rem; margin-bottom:1.5rem}
.line{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--f-display); font-size:.82rem; letter-spacing:.08em;
  padding:.35rem 0; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.line--total{
  color:var(--ink); font-size:1rem; border-top:1px solid var(--rule);
  margin-top:.5rem; padding-top:.8rem;
}
.pay-note{
  font-family:var(--f-display); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); text-align:center;
  margin:.9rem 0 0;
}
.facts{display:grid; gap:1.7rem}
.fact p{margin:0}

/* ---------- gift block ---------- */
/* ---------- modo de entrega ---------- */
.modes{display:flex; gap:.5rem; margin-top:1.5rem; flex-wrap:wrap}
.mode{
  font-family:var(--f-display); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; padding:.7rem 1.1rem; cursor:pointer;
  border:1px solid var(--rule); background:transparent; color:var(--ink-soft);
  transition:border-color .25s ease, color .25s ease;
}
.mode:hover{border-color:var(--ink-soft)}
.mode.is-on{border-color:var(--ink); color:var(--ink)}

/* ---------- la nota ---------- */
.note{padding-block:clamp(3.5rem,9vw,7rem)}
.note-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5rem); align-items:center;
}
.note-box textarea{
  width:100%; resize:vertical; min-height:130px;
  background:var(--paper); border:1px solid var(--rule); color:var(--ink);
  font-family:var(--f-body); font-size:1.05rem; line-height:1.6;
  padding:1.1rem 1.2rem;
}
.note-box textarea::placeholder{color:var(--ink-soft); font-style:italic}
.note-box textarea:focus{border-color:var(--ink); outline:none}
.note-meta{
  display:flex; justify-content:space-between; gap:1rem; margin-top:.6rem;
  font-family:var(--f-display); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.note-meta [data-full="true"]{color:var(--sienna)}

/* ---------- así se hace ---------- */
.craft{padding-block:0}
.craft video{
  display:block; width:100%; max-width:430px; height:auto;
  aspect-ratio:9/16; object-fit:cover; background:var(--paper-deep);
}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--rule);
  padding-block:clamp(3rem,7vw,4.5rem); padding-inline:var(--gutter);
}
.foot-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr;
  gap:clamp(2rem,5vw,3.5rem); max-width:var(--max); margin-inline:auto;
}
.foot-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.foot-grid a{
  font-family:var(--f-display); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-soft);
}
.foot-grid a:hover{color:var(--ink)}
.signup{display:flex; max-width:340px; margin-top:1rem}
.signup input{
  flex:1; min-width:0; border:1px solid var(--rule); border-right:0; background:var(--paper);
  padding:.8rem .9rem; font-family:var(--f-display); font-size:.78rem;
  letter-spacing:.1em; color:var(--ink);
}
.signup input::placeholder{color:var(--ink-soft); text-transform:uppercase; font-size:.66rem; letter-spacing:.18em}
.signup button{
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  font-family:var(--f-display); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; padding:0 1.2rem; cursor:pointer;
}
.colophon{
  max-width:var(--max); margin:clamp(2.5rem,6vw,3.5rem) auto 0;
  padding-top:1.4rem; border-top:1px solid var(--rule);
  font-family:var(--f-display); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .split,.order-grid{grid-template-columns:1fr}
  .note-grid{grid-template-columns:1fr}
  .craft video{max-width:320px; margin-inline:auto}
  .split--flip .visual{order:0}
  .split--flip .copy{order:1}
  .inset{width:32%; right:2%; bottom:-6%}
  .visual--flip .inset{left:2%}
  .foot-grid{grid-template-columns:1fr 1fr}
  .site-head{grid-template-columns:1fr; justify-items:center; row-gap:.6rem}
  .nav-left{order:2; gap:1.1rem}
  .nav-right{order:3; gap:1.1rem}
  .mark{order:1}
  .navlink{font-size:.6rem; letter-spacing:.16em}
}
@media (max-width:460px){
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* ---------- checkout ---------- */
.checkout{
  width:min(560px, calc(100vw - 24px)); max-height:calc(100dvh - 24px);
  padding:0; border:1px solid var(--rule); background:var(--paper); color:var(--ink);
  overflow:auto;
}
.checkout::backdrop{background:rgba(46,76,89,.38); backdrop-filter:blur(3px)}
.checkout form{padding:clamp(1.4rem,4vw,2.2rem)}
.co-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem}
.co-head h2{margin:.3rem 0 .4rem}
.co-close{
  border:0; background:transparent; color:var(--ink-soft); cursor:pointer;
  font-size:1.8rem; line-height:1; padding:.2rem .4rem;
}
.co-close:hover{color:var(--ink)}
.co-summary{
  font-family:var(--f-display); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sienna); margin:0 0 1.4rem;
}
.checkout fieldset{border:0; padding:0; margin:0 0 .4rem; min-width:0}
.field{display:grid; gap:.35rem; margin-bottom:1rem}
.field > span{
  font-family:var(--f-display); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft);
}
.field em{font-style:normal; letter-spacing:.1em; text-transform:none}
.field input,.field select{
  width:100%; border:1px solid var(--rule); background:#fffdf9; color:var(--ink);
  font-family:var(--f-body); font-size:1.05rem; padding:.7rem .85rem; border-radius:0;
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size:5px 5px; background-repeat:no-repeat; padding-right:2.2rem;
}
.field input:focus,.field select:focus{border-color:var(--ink); outline:none}
.field input[aria-invalid="true"]{border-color:var(--sienna)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 .9rem}
.field-row .field--cp{max-width:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.co-totals{margin:.6rem 0 1rem; border-top:0; padding-top:0}
.co-error{
  font-family:var(--f-display); font-size:.72rem; letter-spacing:.08em;
  color:var(--sienna); min-height:1.1em; margin:0 0 .8rem;
}
#coSubmit[disabled],#pay[disabled]{opacity:.55; cursor:progress}
@media (max-width:520px){
  .field-row{grid-template-columns:1fr}
  .checkout{width:100vw; max-width:100vw; max-height:100dvh; height:100dvh; border:0}
}

/* ---------- gracias ---------- */
.thanks{min-height:70vh; display:grid; place-items:center; text-align:center; padding:4rem var(--gutter)}
.thanks .folio{font-family:var(--f-display); letter-spacing:.24em; font-size:1rem; margin:1rem 0}