/* Theme refinado: import de fuente y ajustes visuales */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --bg: #ffffff;
  --page-bg: #fbfbfb;
  --card: #ffffff;
  --muted: #6b7280;
  --text: #0f1724;
  --primary: #0aa17a; /* verde suave */
  --primary-600: #078b63;
  --accent: #f59e0b;
  --glass: rgba(255,255,255,0.6);
  --radius: 14px;
  --shadow-sm: 0 6px 18px rgba(18,24,33,0.06);
  --shadow-md: 0 18px 50px rgba(18,24,33,0.08);
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial;
  background:var(--page-bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Sidebar móvil */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 280px;
  background: var(--card);
  box-shadow: 2px 0 12px rgba(0,0,0,0.08);
  transform: translateX(-100%);
  transition: transform 240ms ease-in-out;
  z-index: 1200;
  padding: 1rem;
  overflow-y: auto;
}
.sidebar.open {
  transform: translateX(0);
}
.sidebar .close-sidebar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

/* Overlay for sidebar */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-in-out;
  z-index: 1100;
}
.sidebar-overlay.open { opacity: 1; pointer-events: auto; }

/* Sidebar content examples: cart summary and nav */
.sidebar .cart-summary { margin-bottom: 1rem; }
.sidebar nav { margin-top: 1rem; }

/* Mobile: show sidebar toggle in header and hide desktop-specific layout tweaks */
@media (max-width: 768px) {
  .main-header .desktop-only, .site-header .desktop-only { display: none; }
  .main-header .mobile-only, .site-header .mobile-only { display: inline-flex; }

  .productos {
    grid-template-columns: repeat(2, 1fr);
    gap: .9rem;
    padding: 1rem;
  }

  .hero { padding: 1.2rem 1rem; }
}

/* Mobile: oferta-like structure (sin duplicar HTML) */
@media (max-width: 768px) {
  /* Hero compacto */
  .hero { padding: 12px 12px; border-bottom: 1px solid rgba(0,0,0,0.04); }
  .hero h1 { font-size: 1.25rem; margin: 6px 0; }
  .hero p { font-size: .95rem; margin: 0 0 8px; color: var(--muted); }

  /* Productos en una o dos columnas según ancho */
  .productos { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .producto { display:flex;gap:10px;align-items:flex-start }
  .producto .producto-img{width:30%;height:100px}
  .producto .producto-body{width:70%}

  /* Destacar badge de oferta y CTA en móvil */
  .oferta-label{font-size:.85rem;padding:6px 8px}
  .agregar{flex:0 0 auto;padding:8px 10px;border-radius:10px}

  /* Simplificar carrusel altura en móvil */
  .carrusel-imgs img{height:180px}
}

/* Desktop: ensure catalog full grid and hide sidebar elements */
@media (min-width: 769px) {
  .sidebar, .sidebar-overlay { display: none; }
  .main-container { max-width: 1180px; margin: 0 auto; }
  .productos { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

/* Utility classes to switch template by device */
.show-desktop { display: none; }
.show-mobile { display: block; }

@media (min-width: 769px) {
  .show-desktop { display: block !important; }
  .show-mobile { display: none !important; }
}

/* Layout wrapper visibility: keep catalog visible; we change structure by CSS in mobile
   rather than duplicating content. oferta-layout is unused by default. */
.catalog-layout { display: block; }
.oferta-layout { display: none; }

.show-desktop { display: none; }
.show-mobile { display: block; }

@media (min-width: 769px) {
  .show-desktop { display: block !important; }
  .show-mobile { display: none !important; }
}

/* Container */
.content{max-width:1200px;margin:36px auto;padding:20px}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:transparent;position:relative}
.brand{display:flex;align-items:center;gap:14px;position:absolute;left:20px;top:12px}
.logo{width:150px;height:auto;border-radius:10px;background:transparent;padding:4px;display:block}
.header-actions{display:flex;align-items:center;gap:10px}
.sidebar-toggle,.cart-toggle{background:transparent;border:none;font-size:1.4rem;cursor:pointer;color:var(--primary)}

/* Top nav (desktop) */
.main-nav{display:flex;gap:18px;align-items:center;padding-left:190px}
.main-nav .nav-end{margin-left:auto}
.main-nav a{color:var(--text);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px}
.main-nav a[aria-current="page"]{background:rgba(6,120,90,0.06)}

/* Hero / Carrusel */
.carrusel{max-width:1200px;margin:18px auto;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#fff,#fbfbfb);position:relative}
.carrusel-imgs{display:flex;transition:transform .45s ease}
.carrusel-imgs img{
  width:100%;
  height:380px;
  object-fit:cover;
  flex: 0 0 100%; /* cada imagen ocupa el 100% del slide */
  min-width:100%;
}
.carrusel-btn{background:rgba(0,0,0,0.5);color:#fff;border:none;padding:8px 12px;border-radius:8px;position:absolute;top:45%;transform:translateY(-50%);cursor:pointer}
.carrusel-btn.prev{left:20px}
.carrusel-btn.next{right:20px}

/* Grid productos */
.productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
.producto{background:var(--card);padding:16px;border-radius:12px;box-shadow:var(--shadow-sm);border:1px solid rgba(18,24,33,0.03);display:flex;flex-direction:column;align-items:stretch;transition:transform .18s,box-shadow .2s}
.producto:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.producto-img{width:100%;height:200px;object-fit:cover;border-radius:10px;border:1px solid rgba(18,24,33,0.04)}
.producto-imgs{display:flex;gap:8px;margin-top:10px;align-items:center}
.producto-imgs img{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid rgba(18,24,33,0.04)}
.producto h3{margin:12px 0 6px;font-size:1.05rem}
.descripcion{color:var(--muted);font-size:.94rem;line-height:1.4;margin:6px 0}
.precio{font-weight:700;color:var(--text);margin:10px 0}
.botones-producto{display:flex;gap:10px;align-items:center}
.agregar,.btn{padding:10px 14px;border-radius:10px;border:none;cursor:pointer}
.agregar{background:linear-gradient(90deg,var(--primary),var(--primary-600));color:#fff;font-weight:700;box-shadow:0 8px 30px rgba(8,138,99,0.06)}
.agregar:hover{filter:brightness(.97)}
.btn.secondary{background:transparent;border:1px solid rgba(18,24,33,0.06);color:var(--muted)}
.favorito-btn{background:transparent;border:1px dashed rgba(18,24,33,0.06);padding:8px 10px;border-radius:8px}

/* Oferta badge */
.oferta-label{display:inline-block;background:linear-gradient(90deg,#fff6e6,#fff1db);color:var(--accent);padding:6px 8px;border-radius:8px;font-weight:700;font-size:.85rem}

/* Sidebar */
.sidebar{position:fixed;left:0;top:0;height:100%;width:320px;background:var(--card);box-shadow:var(--shadow-md);transform:translateX(-110%);transition:transform .28s ease;z-index:1200;padding:22px;display:flex;flex-direction:column;gap:8px}
.sidebar.open{transform:translateX(0)}
.sidebar-nav{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.sidebar-nav a{padding:12px;border-radius:10px;text-decoration:none;color:var(--text);font-weight:700}
.sidebar-nav a[aria-current="page"]{background:rgba(6,120,90,0.06)}
.close-sidebar{align-self:flex-end;border:none;background:transparent;font-size:1.1rem;cursor:pointer}

/* Carrito */
.cart{position:fixed;right:22px;top:22px;width:380px;max-width:92vw;height:calc(100vh - 44px);background:var(--card);border-radius:14px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;overflow:hidden;transform:translateX(24px);opacity:0;pointer-events:none;transition:transform .22s,opacity .22s}
.cart.open{transform:translateX(0);opacity:1;pointer-events:auto}
.cart header{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid rgba(18,24,33,0.04)}
.cart-items{padding:12px;overflow:auto;flex:1}
.cart-item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px}
.cart-item img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.cart-footer{padding:12px;border-top:1px solid rgba(18,24,33,0.04);display:flex;flex-direction:column;gap:10px}
.cart-total{font-weight:800;font-size:1.05rem}

/* Utilities */
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Forms */
form label{display:block;margin-bottom:6px;font-weight:700}
input,textarea,select{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(18,24,33,0.06);background:transparent}

/* Print (boleta) */
@media print{
  body{background:#fff}
  .sidebar, .cart, .carrusel-btn, .header-actions, footer{display:none}
  .content{max-width:100%;margin:0;padding:0}
}

/* Responsive tweaks */
@media (max-width:900px){
  .producto{padding:12px}
  .producto-img{height:160px}
  .carrusel-imgs img{height:220px}
  .logo{width:120px}
  .sidebar{width:86vw}
  .cart{right:10px;width:92vw}
}

@media (max-width:480px){
  .productos{grid-template-columns:1fr}
  .header-actions{gap:6px}
  .logo{width:88px}
  .main-nav{padding-left:120px}
  .carrusel-imgs img{height:160px}
}