/* ============================================================
   Joyas de la Paz — sistema de diseño
   Paleta tomada de las fotos: madera oscura, plata, turquesa, hoja.
   Prioridad: legibilidad para público 48+ (tipos grandes, botones grandes).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Nunito+Sans:wght@400;600;700;800&display=swap');

:root{
  --tinta:#191E1B;        /* casi negro verdoso, como la madera */
  --tinta-2:#2A322D;
  --hueso:#F4EFE4;        /* papel cálido, fondo */
  --hueso-2:#FBF8F1;      /* tarjetas */
  --plata:#8C948B;        /* texto tenue */
  --plata-2:#B9C0B7;
  --turquesa:#2E9D96;     /* acento / botones */
  --turquesa-d:#22796F;   /* hover */
  --verde:#5C7A50;        /* botánico */
  --oro:#B98A2E;          /* toque premium (precio) */
  --linea:rgba(25,30,27,.12);
  --sombra:0 1px 2px rgba(25,30,27,.06), 0 8px 30px rgba(25,30,27,.08);
  --radio:14px;
  --ancho:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--hueso); color:var(--tinta);
  font-family:'Nunito Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--turquesa-d); text-decoration:none}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:500; line-height:1.12; letter-spacing:-.01em; margin:0}
.wrap{max-width:var(--ancho); margin:0 auto; padding:0 22px}

/* ---------- Header ---------- */
.site-header{padding:22px 0; border-bottom:1px solid var(--linea)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; font-family:'Fraunces',serif; font-size:24px; color:var(--tinta)}
.brand .leaf{width:30px; height:30px; color:var(--verde); flex:none}
.brand small{display:block; font-family:'Nunito Sans'; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--plata); font-weight:700}
.header-ship{font-size:14px; color:var(--verde); font-weight:700; display:flex; align-items:center; gap:7px}
.header-ship .dot{width:8px;height:8px;border-radius:50%;background:var(--verde)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:60px; padding:0 30px; border-radius:999px; border:0; cursor:pointer;
  font-family:'Nunito Sans'; font-size:19px; font-weight:800; letter-spacing:.01em;
  background:var(--turquesa); color:#fff; box-shadow:var(--sombra); width:100%;
  transition:transform .12s ease, background .15s ease;
}
.btn:hover{background:var(--turquesa-d)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--tinta); outline-offset:3px}
.btn-ghost{background:transparent; color:var(--tinta); border:2px solid var(--tinta); box-shadow:none}
.btn-ghost:hover{background:var(--tinta); color:#fff}
.btn-wa{background:#25D366; color:#0b3d1f}
.btn-wa:hover{background:#1eb457}
.btn-sm{min-height:44px; font-size:16px; padding:0 20px; width:auto}

/* ---------- Hero home ---------- */
.hero{padding:64px 0 40px; text-align:center}
.hero .eyebrow{font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:var(--verde); font-weight:800; margin-bottom:18px}
.hero h1{font-size:clamp(38px,6vw,64px)}
.hero p{max-width:620px; margin:20px auto 0; color:var(--tinta-2); font-size:20px}
.leaf-divider{display:flex; justify-content:center; margin:34px 0 6px; color:var(--verde)}
.leaf-divider svg{width:56px;height:56px;opacity:.9}

/* ---------- Grilla de productos ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:26px 0 60px}
.card{
  background:var(--hueso-2); border-radius:var(--radio); overflow:hidden;
  box-shadow:var(--sombra); display:flex; flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 4px 12px rgba(25,30,27,.10),0 18px 44px rgba(25,30,27,.14)}
.card .ph{aspect-ratio:4/5; background:var(--tinta) center/cover no-repeat; position:relative}
.card .ph .badge{position:absolute; top:12px; left:12px; background:rgba(255,255,255,.92); color:var(--verde); font-size:12px; font-weight:800; letter-spacing:.06em; padding:6px 12px; border-radius:999px}
.card-body{padding:22px 20px 24px; display:flex; flex-direction:column; gap:8px; flex:1}
.card h3{font-size:26px}
.card .tag{color:var(--plata); font-size:15px; min-height:44px}
.card .price{font-family:'Fraunces',serif; font-size:30px; color:var(--oro); margin-top:2px}
.card .btn{margin-top:14px}
.card.sold .ph{filter:grayscale(.5) brightness(.85)}

/* ---------- Landing de producto ---------- */
.pd{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; padding:44px 0 24px; align-items:start}
.gallery{display:flex; flex-direction:column; gap:14px}
.gallery .main{aspect-ratio:4/5; border-radius:var(--radio); background:var(--tinta) center/cover no-repeat; box-shadow:var(--sombra)}
.gallery .thumbs{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.gallery .thumbs div{aspect-ratio:1/1; border-radius:10px; background:var(--tinta) center/cover no-repeat}
.pd-info .eyebrow{font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--verde); font-weight:800}
.pd-info h1{font-size:clamp(34px,5vw,48px); margin:10px 0 8px}
.pd-info .tag{font-size:20px; color:var(--tinta-2)}
.pd-info .price{font-family:'Fraunces',serif; font-size:44px; color:var(--oro); margin:20px 0 6px}
.pd-info .ship{color:var(--verde); font-weight:800; margin-bottom:22px; display:flex; align-items:center; gap:8px}
.pd-info .desc{font-size:18px; color:var(--tinta-2); margin:0 0 26px}
.trust{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px}
.trust li{display:flex; gap:12px; align-items:flex-start; font-size:17px; color:var(--tinta-2)}
.trust li svg{width:24px;height:24px;color:var(--turquesa);flex:none;margin-top:1px}
.maker{margin-top:34px; padding:22px; background:var(--hueso-2); border-radius:var(--radio); display:flex; gap:16px; align-items:center; box-shadow:var(--sombra)}
.maker .pic{width:76px;height:76px;border-radius:50%;background:var(--tinta) center/cover no-repeat;flex:none}
.maker p{margin:0; font-size:16px; color:var(--tinta-2)}
.maker strong{font-family:'Fraunces',serif; font-weight:600; font-size:19px; color:var(--tinta); display:block; margin-bottom:2px}
.buybar-space{height:0}

/* ---------- Checkout ---------- */
.checkout{display:grid; grid-template-columns:1fr .8fr; gap:40px; padding:40px 0 60px; align-items:start}
.form-card{background:var(--hueso-2); border-radius:var(--radio); box-shadow:var(--sombra); padding:30px}
.form-card h2{font-size:28px; margin-bottom:6px}
.form-card .sub{color:var(--plata); margin-bottom:22px}
.field{margin-bottom:18px}
.field label{display:block; font-weight:700; margin-bottom:7px; font-size:16px}
.field input,.field select,.field textarea{
  width:100%; font-size:18px; font-family:inherit; color:var(--tinta);
  padding:15px 16px; border:2px solid var(--linea); border-radius:12px; background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--turquesa)}
.field .err{color:#b3261e; font-size:15px; font-weight:700; margin-top:6px}
.field.bad input,.field.bad select{border-color:#b3261e}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.summary{position:sticky; top:20px; background:var(--tinta); color:#fff; border-radius:var(--radio); padding:28px; box-shadow:var(--sombra)}
.summary .ph{aspect-ratio:4/3; border-radius:10px; background:#0e120f center/cover no-repeat; margin-bottom:18px}
.summary h3{color:#fff; font-size:24px}
.summary .line{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.14); font-size:17px}
.summary .line.total{border:0; font-size:22px; font-weight:800; padding-top:16px}
.summary .free{color:#8fe0b3; font-weight:800}
.summary small{color:var(--plata-2); display:block; margin-top:14px}
.pay-note{display:flex; align-items:center; gap:10px; margin-top:18px; color:var(--plata-2); font-size:14px}
.pay-note svg{width:20px;height:20px;flex:none}

/* ---------- Gracias ---------- */
.thanks{max-width:640px; margin:0 auto; text-align:center; padding:70px 0}
.thanks .mark{width:88px;height:88px;margin:0 auto 24px;border-radius:50%;background:var(--turquesa);display:flex;align-items:center;justify-content:center;color:#fff}
.thanks .mark svg{width:46px;height:46px}
.thanks h1{font-size:44px}
.thanks p{font-size:20px;color:var(--tinta-2);margin:16px 0}
.refbox{display:inline-block;background:var(--hueso-2);border:2px dashed var(--linea);border-radius:12px;padding:14px 22px;font-family:'Fraunces',serif;font-size:26px;margin:10px 0 24px}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:50; background:#25D366; color:#0b3d1f; display:flex; align-items:center; gap:10px; padding:14px 20px; border-radius:999px; font-weight:800; box-shadow:0 10px 30px rgba(0,0,0,.2)}
.wa-float svg{width:26px;height:26px}
.wa-float:hover{background:#1eb457}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--linea); padding:38px 0; margin-top:20px; color:var(--plata); font-size:15px}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center}

/* ---------- Notices ---------- */
.notice{background:#fff4e5;border:1px solid #f0c98a;color:#8a5a12;padding:14px 18px;border-radius:12px;margin-bottom:20px;font-weight:600}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:1fr; gap:20px}
  .pd{grid-template-columns:1fr; gap:26px}
  .checkout{grid-template-columns:1fr; gap:24px}
  .summary{position:static; order:-1}
  .header-ship{display:none}
}
@media (max-width:560px){
  body{font-size:17px}
  .hero{padding:44px 0 24px}
  .row2{grid-template-columns:1fr}
  .brand{font-size:20px}
}