/* Tipografía y colores globales */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

:root {
  --green: #25D366;       /* WhatsApp principal */
  --green-dark: #128C7E;  /* WhatsApp oscuro */
  --grey: #ECE5DD;        /* fondo claro */
  --text: #1f2d3d;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg: #fafafa;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: Poppins, sans-serif; color: var(--text); background: var(--bg); }

a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 16px; }

.header { display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--border); padding-bottom:12px; }
.header .logo {
  width:72px; height:72px; border-radius:50%; overflow:hidden; border:3px solid var(--green);
  cursor: pointer; flex-shrink:0;
}
.header .logo img { width:100%; height:100%; object-fit: cover; }
@media (max-width: 640px) {
  .header .logo { width:88px; height:88px; }
}

.header .brand { flex:1; }
.brand h1 { margin:0; font-size:24px; }
.brand p { margin:4px 0 0; color: var(--muted); font-size:14px; }

.banner {
  width:100%; aspect-ratio: 16/6; /* alargado horizontal */
  border-radius:12px; overflow:hidden; border:1px solid var(--border); margin:16px 0;
}
.banner img { width:100%; height:100%; object-fit: cover; }

.top-flags { display:flex; gap:8px; align-items:center; }
.flag { width:24px; height:24px; border-radius:50%; border:1px solid var(--border); overflow:hidden; cursor:pointer; }
.flag img { width:100%; height:100%; object-fit: cover; }

.menu { display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; }
.category { grid-column: span 12; }
.category h2 { border-bottom:2px solid var(--border); padding-bottom:8px; margin:16px 0 8px; }

.products { display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; }
.product-card { grid-column: span 6; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
@media (max-width: 900px) { .product-card { grid-column: span 12; } }

.product-image { width:100%; aspect-ratio: 16/9; /* misma proporción en móvil y PC */ }
.product-image img { width:100%; height:100%; object-fit: cover; }

.product-body { padding:12px; display:flex; flex-direction:column; gap:6px; }
.product-title { font-weight:600; }
.product-desc { color:var(--muted); font-size:14px; }
.product-price { font-weight:600; color: var(--green-dark); }

.product-actions { display:flex; gap:8px; margin-top:8px; }
.btn {
  background: var(--green); color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600;
}
.btn.secondary { background:#fff; color: var(--text); border:1px solid var(--border); }
.btn.danger { background:#ef4444; }

.line { border-top:1px solid var(--border); margin:16px 0; }

.footer {
  position: fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--border);
  padding:10px 16px; text-align:center; font-size:12px; z-index:50;
}
.page-content { padding-bottom:64px; /* evita que el footer tape el contenido */ }

.cart {
  position: fixed; right:16px; bottom:80px; background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:12px; width:320px; max-width:90vw; z-index:60;
}
.cart h3 { margin:0 0 8px; }
.cart .note { font-size:12px; color:var(--muted); }

.cart-list { max-height:220px; overflow:auto; border-top:1px solid var(--border); margin-top:8px; padding-top:8px; }
.cart-item { display:flex; justify-content:space-between; margin-bottom:6px; font-size:14px; }

.observations { width:100%; margin-top:8px; border:1px solid var(--border); border-radius:8px; padding:8px; font-family: Poppins, sans-serif; }

.dashboard {
  max-width: 1000px; margin: 0 auto; padding: 16px;
}
.dash-header { display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--border); padding-bottom:8px; margin-bottom:16px; }
.dash-actions { display:flex; gap:8px; }
.section { border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:16px; background:#fff; }
.section h3 { margin-top:0; }
.input, .select { width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; font-family: Poppins, sans-serif; }
.helper { font-size:12px; color:var(--muted); margin-top:4px; }

/* Nota de tamaños recomendados */
.note { font-size:12px; color:var(--muted); }

/* Modal zoom logo (en móviles al tocar) */
.logo-zoom {
  position: fixed; inset:0; background: rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:100;
}
.logo-zoom img { width:70vw; max-width:360px; height:auto; border-radius:50%; border:6px solid #fff; }