:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#475569;
  --grad-start:#2563eb; /* fucsia */
  --grad-mid:#0ea5e9;   /* morado */
  --card:#ffffff;
  --surface:#ffffff;
  --border:#e5e7eb;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
a{color:var(--fg);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin:0 auto;padding: 90px 20px 40px}
h1,h2{margin:0 0 12px}
p{color:var(--fg);line-height:1.7}

/* Header (gradiente) */
.header{
  position:fixed; top:0; left:0; right:0; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  background:linear-gradient(180deg,var(--grad-mid) 0%, var(--grad-start) 70% );
  color:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
  z-index:1000;
}
.header--hidden{ transform: translateY(-100%); }
.header__left{display:flex; align-items:center; gap:12px;}
.logo-box{
  width:160px; height:40px; background:rgba(255,255,255,.25);
  border:1px dashed rgba(255,255,255,.75); border-radius:10px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:12px;
}
.header__right{display:flex; align-items:center; gap:8px}

/* Botón hamburguesa (más visible) */
.burger{
  width:44px; height:44px; border-radius:12px; 
  border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.25);
  backdrop-filter:saturate(140%) blur(2px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: transform .15s ease, box-shadow .15s ease;
  color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.burger:hover{ box-shadow:0 4px 14px rgba(0,0,0,.2); }
.burger:active{ transform: scale(.97); }
.burger span,.burger::before,.burger::after{
  content:""; display:block; width:22px; height:3px; background:#fff; border-radius:3px;
}
.burger span{ box-shadow:0 7px 0 #fff, 0 -7px 0 #fff; }

/* Drawer (blanco para contraste) */
.drawer{
  position:fixed; top:0; right:0; width:280px; height:100vh; background:#ffffff;
  border-left:1px solid var(--border);
  transform: translateX(100%); transition: transform .25s ease; z-index:1100;
  padding:76px 18px 18px; color:var(--fg);
}
.drawer.open{ transform: translateX(0); }
.drawer a{
  display:block; padding:12px 10px; margin:6px 0; border-radius:10px;
  background:transparent; color:var(--fg);
}
.drawer a:hover{ background:#f3f4f6; text-decoration:none; }
.drawer__close{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--border); background:#ffffff; color:var(--fg);
}

/* Tarjetas (blancas) */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:20px; margin:14px 0; box-shadow: 0 6px 20px rgba(2,6,23,.06);
}

/* Footer (gradiente) */
.footer{ position:static; left:auto; right:auto; bottom:auto; background:linear-gradient(180deg, var(--grad-start) 0%, var(--grad-mid) 70%); border-top:1px solid rgba(0,0,0,.06); padding:12px 16px; z-index:1; color:#fff; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.footer .contact{ max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.footer .contact .info{ display:flex; flex-direction:column; gap:8px; color:#fff; font-size:14px; }
.footer .contact .info span{ display:flex; gap:6px; align-items:center; }
.footer .contact small{ color:#ffffff; }

/* Controles de formulario (bordes negros) */
input, textarea, select{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1.5px solid #000000;
  background:#ffffff;
  color:var(--fg);
}
input:focus, textarea:focus, select:focus{
  outline:2px solid #000000;
  outline-offset:2px;
}

/* Botón principal (degradado que combina con header/footer) */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px;
  background:linear-gradient(135deg, var(--grad-start) 0%, var(--grad-mid) 100%);
  color:#fff; border:0; cursor:pointer; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.footer--visible{ opacity:1; pointer-events:auto; }

.hero-img3{
  position:relative;
  min-height:350px;
  background:url('img/img3.jpg') center/cover no-repeat;
  border-radius:16px;
  overflow:hidden;
  margin: 0 0 20px 0;
}
.hero-img3 .hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.hero-img3 .hero-content{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#fff; padding:20px;
}

.hero-img3 [contenteditable]{ outline:2px dashed rgba(255,255,255,.6); outline-offset:10px; border-radius:12px; }
.hero-img3 [contenteditable]:focus{ outline-color:#fff; background:rgba(0,0,0,.15); }

.hero-img2{
  position:relative;
  min-height:350px;
  background:url('img/img2.jpg') center/cover no-repeat;
  border-radius:16px;
  overflow:hidden;
  margin: 0 0 20px 0;
}
.hero-img2 .hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.hero-img2 .hero-content{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#fff; padding:20px;
}
.hero-img2 [contenteditable]{ outline:2px dashed rgba(255,255,255,.6); outline-offset:10px; border-radius:12px; }
.hero-img2 [contenteditable]:focus{ outline-color:#fff; background:rgba(0,0,0,.15); }

.logo-link img{ display:block; }


/* === Modales de login y panel admin === */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1200}
.modal-backdrop.open{display:flex}
.modal{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;width:92%;max-width:820px;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(2,6,23,.25)}
.modal header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.modal header h3{margin:0}
.modal .close{border:1px solid var(--border);background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-2 .full{grid-column:1/-1}
.table{width:100%;border-collapse:collapse;margin-top:6px}
.table th,.table td{border:1px solid var(--border);padding:8px;font-size:14px}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.preview{display:block;max-width:160px;border:1px solid var(--border);border-radius:10px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#f3f4f6;border:1px solid var(--border);font-size:12px}
.btn.secondary{background:#fff;color:var(--fg);border:1px solid var(--border)}


/* Cart multi-item layout and image sizing */
.cart-list{ display:flex; flex-direction:column; gap:12px; }
.cart-item{ display:grid; grid-template-columns: 200px 1fr auto auto; gap:12px; align-items:center; }
.cart-item img{ width:200px; height:150px; object-fit:cover; border-radius:12px; border:1px solid var(--border); }
.cart-item .remove{ justify-self:end; }
.total{ font-weight:700; }
@media (max-width:720px){
  .cart-item{ grid-template-columns: 200px 1fr; grid-auto-rows:auto; }
  .cart-item .remove{ grid-column:1/-1; justify-self:start; }
  .cart-item .total{ justify-self:start; }
}