:root{
  --choco-dark:#2b1a12;
  --choco:#4a2c1d;
  --choco-mid:#6b4226;
  --cream:#f6ead8;
  --cream-soft:#efe0c8;
  --gold:#c99a45;
  --gold-soft:#e0bd7e;
}
*{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;height:auto}
body{
  font-family:'Josefin Sans',sans-serif;
  background:#1d120c;
  display:flex;justify-content:center;
  min-height:100vh;
  padding:18px 10px 90px;
}
.banner{
  width:100%;max-width:430px;min-width:0;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(201,154,69,.22), transparent 60%),
    linear-gradient(175deg,#3a2315 0%, #2b1a12 45%, #241209 100%);
  border:1px solid rgba(201,154,69,.35);
  border-radius:22px;
  overflow:hidden;
  color:var(--cream);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  position:relative;
}
.banner::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:radial-gradient(rgba(246,234,216,.9) 1px, transparent 1.4px);
  background-size:14px 14px;
}
.inner{position:relative;padding:34px 26px 30px;text-align:center}

.badge{
  display:inline-block;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-soft);
  border:1px solid rgba(201,154,69,.55);
  border-radius:999px;
  padding:8px 16px 6px;
  margin-bottom:18px;
}
h1{
  font-family:'Cormorant Garamond',serif;
  font-size:64px;font-weight:700;line-height:.95;
  color:var(--cream);
  letter-spacing:.02em;
}
h1 span{color:var(--gold)}
.tagline{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:20px;color:var(--cream-soft);
  margin-top:10px;
}

.divider{
  display:flex;align-items:center;gap:12px;
  margin:24px 0 18px;
}
.divider::before,.divider::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,154,69,.6));
}
.divider::after{background:linear-gradient(90deg,rgba(201,154,69,.6),transparent)}
.divider svg{flex:none}

.ing-title{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:14px;
}
ul.ingredientes{
  list-style:none;
  display:flex;flex-direction:column;gap:9px;
  font-family:'Cormorant Garamond',serif;
  font-size:22px;font-weight:600;color:var(--cream);
}
ul.ingredientes li{
  display:flex;align-items:center;justify-content:center;gap:10px;
}
ul.ingredientes li::before,
ul.ingredientes li::after{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--gold);opacity:.8;transform:rotate(45deg);
}

.galeria{
  display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;
  margin-top:28px;
}
.galeria figure{margin:0}
.galeria img{
  width:100%;height:auto;display:block;
  border-radius:14px;
  border:1px solid rgba(201,154,69,.45);
}
.galeria figcaption{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:15px;line-height:1.4;color:var(--cream-soft);
  margin-top:10px;padding:0 10px;
}

.precio{
  margin:26px auto 6px;
  display:inline-flex;align-items:baseline;gap:10px;
  background:linear-gradient(135deg, rgba(201,154,69,.16), rgba(201,154,69,.05));
  border:1px solid rgba(201,154,69,.5);
  border-radius:14px;
  padding:12px 26px 10px;
}
.precio .label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
.precio .valor{
  font-family:'Cormorant Garamond',serif;
  font-size:40px;font-weight:700;color:var(--gold);
}
.precio-nota{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:17px;color:var(--cream-soft);
  margin-top:6px;
}

a.wsp{
  display:block;margin-top:20px;
  background:linear-gradient(135deg,#c99a45,#a97b2e);
  color:#241209;text-decoration:none;
  font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;padding:16px 10px 14px;
  box-shadow:0 8px 22px rgba(201,154,69,.25);
}

.pago{
  margin-top:22px;
  background:var(--cream);
  border-radius:18px;
  padding:22px 20px 20px;
  color:var(--choco);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.pago .pago-title{
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--choco-mid);font-weight:600;margin-bottom:4px;
}
.pago .pago-sub{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:17px;color:var(--choco-mid);margin-bottom:14px;
}
.qr-frame{
  width:min(230px,70%);margin:0 auto;
  background:#fff;border-radius:12px;padding:10px;
  border:1px solid #e2d3ba;
}
.qr-frame img{width:100%;height:auto;display:block;border-radius:6px}
.llave{
  margin-top:14px;font-size:15px;color:var(--choco);
}
.llave strong{font-weight:600;letter-spacing:.06em}
.copiar{
  margin-top:10px;
  font-family:'Josefin Sans',sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--choco);
  background:transparent;
  border:1px solid var(--choco-mid);
  border-radius:999px;
  padding:9px 18px 7px;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.copiar:active,.copiar.copiado{
  background:var(--choco);color:var(--cream);
}
.breb{
  display:inline-block;margin-top:12px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--choco-mid);
  border-top:1px solid #dcc9a8;padding-top:8px;
}

.pie{
  margin-top:18px;font-size:12px;letter-spacing:.14em;
  color:rgba(246,234,216,.55);text-transform:uppercase;
}

.wsp-flotante{
  position:fixed;right:18px;bottom:18px;z-index:10;
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:#25d366;
  border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}

@media (max-width:420px){
  .badge{font-size:10px;letter-spacing:.2em;padding:8px 12px 6px}
  h1{font-size:52px}
  .tagline{font-size:18px}
  a.wsp{font-size:13px;letter-spacing:.04em;padding:15px 12px 13px}
}