@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');

:root{
  --marfil: #f8f5f0;
  --dorado: #d4af37;
  --negro: #111;
  --gris: #444;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Cinzel',serif;
  background:var(--marfil);
  color:var(--negro);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* header / nav */
header{padding:18px 16px}
header h1{margin:0;font-size:1.6rem;color:var(--negro)}

nav{
  position:sticky;top:0;background:#fff;border-bottom:1px solid var(--dorado);
  overflow-x:auto;white-space:nowrap;z-index:10;padding:8px 12px;
}
nav a{display:inline-block;padding:10px 16px;color:var(--negro);text-decoration:none;font-weight:600}
nav a:hover{color:var(--dorado)}

/* secciones */
section{padding:26px 14px}
section h2{display:inline-block;padding-bottom:6px;border-bottom:2px solid var(--dorado);margin-bottom:18px;font-size:1.5rem}

/* tarjetas */
.tarjeta{
  background:#fff;border-radius:14px;padding:12px;margin:12px auto;max-width:340px;
  box-shadow:0 8px 18px rgba(0,0,0,0.12), inset 0 0 8px rgba(212,175,55,0.08);
  text-align:center;
}
.tarjeta img{width:100%;height:auto;border-radius:10px;margin-bottom:10px}
.tarjeta h3{font-size:1.05rem;margin:6px 0}
.precio-display{color:var(--gris);font-weight:700;margin:6px 0}

/* botones generales */
button{background:linear-gradient(135deg,var(--dorado),#b8860b);color:#fff;border:0;padding:10px 14px;border-radius:22px;font-weight:700;cursor:pointer}
button:active{transform:scale(0.97)}
.btn-finalizar{padding:8px 12px;font-size:0.95rem}

/* carrito fijo (centrado abajo de la pantalla) */
#carrito{
  display:none; /* aparece con JS */
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  max-width:420px;
  background:#fff8e1;
  border:2px solid var(--dorado);
  border-radius:14px;
  padding:10px 14px;
  text-align:center;
  box-shadow:0 10px 26px rgba(0,0,0,0.18);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
#carrito .icono{font-size:1.3rem;color:var(--dorado)}
#contador-resumen{font-weight:700;color:var(--negro);font-size:0.95rem}

/* detalle carrito (mini panel sobre el carrito) */
#detalle-carrito{
  position:fixed;
  bottom:78px; /* sobre el carrito */
  left:50%;
  transform:translateX(-50%);
  width:92%;
  max-width:420px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:12px;
  padding:10px;
  box-shadow:0 12px 30px rgba(0,0,0,0.2);
  z-index:1001;
  max-height:50vh;
  overflow:auto;
  display:none; /* controlado por JS */
}
#detalle-carrito h3{margin:0 0 8px 0;font-size:1rem}
#lista-items{list-style:none;padding:0;margin:0 0 8px 0}
#lista-items li{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-bottom:1px solid rgba(0,0,0,0.03)}
#lista-items .nombre-item{flex:1;margin-right:8px;font-size:0.95rem}
#lista-items .controls{display:flex;gap:6px;align-items:center}
.remove-btn{background:#eee;color:#222;border-radius:6px;padding:6px 8px;border:0}
.cantidad-btn{background:#ddd;padding:6px 8px;border-radius:6px;border:0}

/* total */
.detalle-total{font-weight:800;margin:8px 0}

/* modal confirmación */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:2000;
}
.modal-contenido{
  background:#fff;padding:18px;border-radius:12px;max-width:320px;width:90%;text-align:center;
}
.modal-botones{display:flex;gap:10px;justify-content:center;margin-top:12px}
.btn-confirmar{background:#0b7a3a}
.btn-cancelar{background:#b03a3a}

/* flecha fija (burbuja) */
#btn-arriba{
  display:none;
  position:fixed;
  bottom:98px; /* arriba del detalle-carrito cuando aparece */
  right:18px;
  width:46px;height:46px;border-radius:50%;background:var(--dorado);color:#fff;font-size:20px;border:0;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,0.2);z-index:1010;cursor:pointer;
}
#btn-arriba.mostrar{display:flex}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:200px;background:#222;color:#fff;padding:10px 14px;border-radius:8px;opacity:0;transition:opacity .25s}
.toast.show{opacity:1}

/* utilidades */
.oculto{display:none}