/* =========================================================
   Chocolates Deluxe - Estilos principales
   Tema: blanco con detalles rojos
========================================================= */
*, *::before, *::after { box-sizing: border-box; }

:root{
  --color-primario: #c1121f;
  --color-secundario: #780000;
  --blanco: #ffffff;
  --negro-suave: #241818;
  --gris-texto: #5b4f4f;
  --gris-claro: #f6efec;
  --gris-borde: #ece0dd;
  --radius: 14px;
  --sombra: 0 8px 24px rgba(120, 0, 0, 0.08);
  --sombra-hover: 0 14px 32px rgba(120, 0, 0, 0.14);
  --font: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

html, body{
  margin:0; padding:0;
  touch-action: pan-x pan-y;
}

body{
  font-family: var(--font);
  color: var(--negro-suave);
  background: var(--blanco);
  -webkit-text-size-adjust: 100%;
  padding-bottom: 78px;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

.icon{ width: 22px; height: 22px; flex-shrink:0; }
.icon-sm{ width: 16px; height:16px; vertical-align: -3px; margin-right:4px; color: var(--color-primario); }

/* ---------------- HEADER ---------------- */
.site-header{
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-borde);
  position: sticky; top:0; z-index: 50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 68px;
}
.brand-name{
  font-size: 22px; font-weight: 800; color: var(--color-primario);
  letter-spacing: .3px;
}
.brand-logo{ max-height: 44px; }
.nav-desktop{ display:none; gap: 30px; }
.nav-desktop a{ font-weight:600; font-size:15px; color: var(--negro-suave); transition: color .2s; }
.nav-desktop a:hover{ color: var(--color-primario); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.btn-icon{
  position: relative; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background: var(--gris-claro); color: var(--color-primario);
}
.cart-badge{
  position:absolute; top:-4px; right:-4px;
  background: var(--color-primario); color:#fff;
  font-size: 11px; font-weight:700; min-width:18px; height:18px;
  border-radius: 50%; display:flex; align-items:center; justify-content:center;
  padding: 0 3px;
}

@media (min-width: 900px){
  .nav-desktop{ display:flex; }
}

/* ---------------- SLIDER ---------------- */
.hero-slider{
  position: relative; width:100%; overflow:hidden;
  background: #ffffff;
  aspect-ratio: 16 / 7;
}
.hero-slider .slides{
  display:flex; width:100%; height:100%; transition: transform .6s ease;
}
.hero-slider .slide{
  min-width:100%; flex-shrink:0; height:100%;
}
.hero-slider .slide img{
  width:100%; height:100%; display:block; object-fit:contain;
}
.hero-slider .dots{
  position:absolute; bottom: 14px; left:0; right:0;
  display:flex; justify-content:center; gap:8px;
}
.hero-slider .dot{
  width:8px; height:8px; border-radius:50%;
  background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.1);
  cursor:pointer; transition: all .2s;
}
.hero-slider .dot.active{ background: var(--color-primario); width:22px; border-radius:5px; }

/* ---------------- HERO TEXT (opcional debajo del slider) ---------------- */
.hero-texto{
  text-align:center; padding: 34px 18px 10px;
}
.hero-texto h1{
  font-size: 28px; font-weight:800; margin:0 0 8px;
  color: var(--negro-suave);
}
.hero-texto p{
  color: var(--gris-texto); font-size:15px; margin:0;
}
@media (min-width:700px){
  .hero-texto h1{ font-size:38px; }
  .hero-texto p{ font-size:17px; }
}

/* ---------------- SECCIONES ---------------- */
.section{ padding: 34px 0; }
.section-title{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.section-title h2{
  font-size:22px; font-weight:800; margin:0;
  border-left: 5px solid var(--color-primario); padding-left:12px;
}
.section-title a{
  font-size:14px; font-weight:700; color: var(--color-primario);
  display:flex; align-items:center; gap:4px;
}

/* ---------------- CATEGORIAS ---------------- */
.categorias-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap:14px;
}
@media (min-width:640px){ .categorias-grid{ grid-template-columns: repeat(3,1fr);} }
@media (min-width:960px){ .categorias-grid{ grid-template-columns: repeat(5,1fr);} }

.categoria-card{
  position:relative; border-radius: var(--radius); overflow:hidden;
  aspect-ratio: 1/1; box-shadow: var(--sombra); transition: transform .25s, box-shadow .25s;
  background: var(--gris-claro);
}
.categoria-card:hover{ transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.categoria-card img{ width:100%; height:100%; object-fit:cover; }
.categoria-card .overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(36,24,24,.75), rgba(36,24,24,0) 55%);
  display:flex; align-items:flex-end; padding:12px;
}
.categoria-card .overlay span{ color:#fff; font-weight:700; font-size:14px; }

/* ---------------- PRODUCTOS GRID ---------------- */
.productos-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap:16px;
}
@media (min-width:640px){ .productos-grid{ grid-template-columns: repeat(3,1fr);} }
@media (min-width:960px){ .productos-grid{ grid-template-columns: repeat(4,1fr);} }

.producto-card{
  background:#fff; border:1px solid var(--gris-borde); border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow: var(--sombra); transition: transform .25s, box-shadow .25s;
}
.producto-card:hover{ transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.producto-imagen{ aspect-ratio: 1/1; background: var(--gris-claro); overflow:hidden; }
.producto-imagen img{ width:100%; height:100%; object-fit:cover; transition: transform .4s; }
.producto-card:hover .producto-imagen img{ transform: scale(1.06); }
.producto-info{ padding: 12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.producto-cat{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color: var(--color-primario); font-weight:700; }
.producto-nombre{ font-size:15px; font-weight:700; line-height:1.3; }
.producto-precio{ font-size:16px; font-weight:800; color: var(--color-secundario); margin-top:auto; }
.producto-precio small{ font-size:12px; font-weight:500; color: var(--gris-texto); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 18px; border-radius: 10px; border:none;
  font-weight:700; font-size:14px; transition: all .2s;
}
.btn-primario{ background: var(--color-primario); color:#fff; }
.btn-primario:hover{ background: var(--color-secundario); }
.btn-outline{ background:transparent; border:2px solid var(--color-primario); color: var(--color-primario); }
.btn-outline:hover{ background: var(--color-primario); color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 12px; font-size:13px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------------- PRODUCTO DETALLE ---------------- */
.producto-detalle{
  display:grid; grid-template-columns:1fr; gap: 28px; padding: 28px 0 50px;
}
@media (min-width:860px){ .producto-detalle{ grid-template-columns: 1fr 1fr; align-items:flex-start; } }
.detalle-imagen{ border-radius: var(--radius); overflow:hidden; background: var(--gris-claro); box-shadow: var(--sombra); }
.detalle-info h1{ font-size:26px; margin:0 0 6px; }
.detalle-precio{ font-size:26px; font-weight:800; color: var(--color-secundario); margin: 8px 0 16px; }
.detalle-descripcion{ color: var(--gris-texto); line-height:1.6; margin-bottom: 20px; }

.variacion-grupo{ margin-bottom:20px; }
.variacion-grupo h4{
  font-size:14px; margin:0 0 10px; display:flex; align-items:center; gap:8px;
}
.badge-obligatorio{
  font-size:10px; background: var(--color-primario); color:#fff; padding:2px 8px;
  border-radius: 20px; text-transform:uppercase; font-weight:700;
}
.opciones-row{ display:flex; flex-wrap:wrap; gap:10px; }
.opcion-btn{
  border:2px solid var(--gris-borde); background:#fff; padding: 9px 16px;
  border-radius: 30px; font-size:13.5px; font-weight:600; transition: all .2s;
}
.opcion-btn:hover{ border-color: var(--color-primario); }
.opcion-btn.selected{ border-color: var(--color-primario); background: var(--color-primario); color:#fff; }

.cantidad-selector{ display:flex; align-items:center; gap:14px; margin: 20px 0; }
.cantidad-selector button{
  width:38px; height:38px; border-radius:50%; border:2px solid var(--gris-borde); background:#fff;
  display:flex; align-items:center; justify-content:center; color: var(--color-primario);
}
.cantidad-selector span{ font-size:18px; font-weight:700; min-width:24px; text-align:center; }

/* ---------------- CARRITO ---------------- */
.carrito-item{
  display:flex; gap:14px; padding: 16px 0; border-bottom:1px solid var(--gris-borde);
}
.carrito-item img{ width:78px; height:78px; border-radius:10px; object-fit:cover; background: var(--gris-claro); }
.carrito-item-info{ flex:1; }
.carrito-item-info h4{ margin:0 0 4px; font-size:14.5px; }
.carrito-item-info .variantes{ font-size:12.5px; color: var(--gris-texto); margin-bottom:6px; }
.carrito-item-precio{ font-weight:800; color: var(--color-secundario); }
.carrito-item-acciones{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.carrito-resumen{
  background: var(--gris-claro); border-radius: var(--radius); padding:20px; margin-top: 20px;
}
.carrito-resumen .fila{ display:flex; justify-content:space-between; margin-bottom:10px; font-size:14.5px; }
.carrito-resumen .total{ font-size:20px; font-weight:800; }
.carrito-vacio{ text-align:center; padding: 60px 20px; color: var(--gris-texto); }
.carrito-vacio .icon{ width:64px; height:64px; color: var(--gris-borde); margin: 0 auto 16px; }

/* ---------------- CHECKOUT ---------------- */
.form-grupo{ margin-bottom:16px; }
.form-grupo label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; }
.form-grupo input, .form-grupo textarea, .form-grupo select{
  width:100%; padding: 11px 14px; border-radius:10px; border: 1.5px solid var(--gris-borde);
  font-size:14.5px; font-family: inherit; background:#fff;
}
.form-grupo input:focus, .form-grupo textarea:focus, .form-grupo select:focus{
  outline:none; border-color: var(--color-primario);
}
.form-hint{ font-size:12px; color:var(--gris-texto); margin-top:4px; }

.metodo-pago-opciones{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.metodo-pago-card{
  border:2px solid var(--gris-borde); border-radius:12px; padding:16px 10px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.metodo-pago-card.selected{ border-color: var(--color-primario); background: #fff5f5; }
.metodo-pago-card .icon{ width:28px; height:28px; color: var(--color-primario); }
.metodo-pago-card span{ font-size:13.5px; font-weight:700; }

.yape-info{
  background: var(--gris-claro); border-radius: var(--radius); padding:20px;
  text-align:center; margin-top:14px;
}
.yape-info img{ max-width:220px; margin: 12px auto; border-radius:10px; }

.pedido-confirmado{ text-align:center; padding: 60px 20px; }
.pedido-confirmado .icon{ width:74px; height:74px; color: var(--color-primario); margin:0 auto 18px; }

/* ---------------- LIBRO DE RECLAMACIONES ---------------- */
.reclamos-header{ text-align:center; padding: 30px 0 10px; }
.reclamos-header h1{ font-size:26px; }
.reclamos-header p{ color: var(--gris-texto); max-width:640px; margin:8px auto 0; }
.form-card{
  background:#fff; border:1px solid var(--gris-borde); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--sombra); margin: 24px 0 50px;
}
.form-card h3{
  font-size:16px; border-left: 4px solid var(--color-primario); padding-left:10px; margin: 26px 0 16px;
}
.form-card h3:first-child{ margin-top:0; }
.form-row{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .form-row-2{ grid-template-columns: 1fr 1fr; } .form-row-3{ grid-template-columns: 1fr 1fr 1fr; } }
.radio-row{ display:flex; gap:20px; flex-wrap:wrap; }
.radio-row label{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; }

/* ---------------- BOTTOM NAV ---------------- */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:#fff; border-top:1px solid var(--gris-borde);
  display:flex; justify-content:space-around; align-items:center;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
.bn-item{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:10.5px; font-weight:600; color: var(--gris-texto); flex:1;
  padding: 4px 2px;
}
.bn-item .icon{ width:22px; height:22px; }
.bn-item.active{ color: var(--color-primario); }
.bn-cart-wrap{ position:relative; }
.bn-cart-wrap .cart-badge{ top:-6px; right:-8px; }

@media (min-width:900px){
  .bottom-nav{ display:none; }
  body{ padding-bottom:0; }
}

/* ---------------- WHATSAPP FLOTANTE ---------------- */
.whatsapp-float{
  position: fixed; right: 16px; bottom: 90px; z-index: 110;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .2s;
}
.whatsapp-float:hover{ transform: scale(1.06); }
.whatsapp-float .icon{ width:28px; height:28px; }
@media (min-width:900px){
  .whatsapp-float{ bottom: 26px; }
}

/* ---------------- FOOTER ---------------- */
.site-footer{
  background: var(--negro-suave); color: #e9dede; margin-top: 40px;
}
.footer-inner{
  display:grid; grid-template-columns:1fr; gap: 26px; padding: 40px 18px 20px;
}
@media (min-width:700px){ .footer-inner{ grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-col h4{ color:#fff; margin:0 0 12px; font-size:15px; }
.footer-col p{ margin: 0 0 8px; font-size:13.5px; color:#cbb9b9; }
.footer-col a:hover{ color: var(--color-primario); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.1); text-align:center; padding: 16px; font-size:12.5px; color:#a99;
}

/* ---------------- UTIL ---------------- */
.empty-state{ text-align:center; padding: 50px 20px; color: var(--gris-texto); }
.empty-state .icon{ width:60px; height:60px; color: var(--gris-borde); margin:0 auto 14px; }
.toast{
  position:fixed; bottom: 90px; left:50%; transform: translateX(-50%);
  background: var(--negro-suave); color:#fff; padding: 12px 20px; border-radius: 30px;
  font-size:13.5px; font-weight:600; z-index:200; box-shadow: 0 8px 20px rgba(0,0,0,.2);
  opacity:0; pointer-events:none; transition: opacity .25s, transform .25s;
  display:flex; align-items:center; gap:8px;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(-6px); }
.toast .icon{ width:16px; height:16px; color: #6bd07a; }
@media (min-width:900px){ .toast{ bottom: 30px; } }

.badge-count-wrap{ position:relative; }

/* ---------------- NOSOTROS ---------------- */
.nosotros-wrap{ display:grid; grid-template-columns:1fr; gap:26px; }
@media (min-width:820px){ .nosotros-wrap{ grid-template-columns: 1fr 1.2fr; align-items:center; } }
.nosotros-imagen{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--sombra); background: var(--gris-claro); }
.nosotros-texto h1{ font-size:26px; margin:0 0 14px; }
.nosotros-contenido{ color: var(--gris-texto); line-height:1.7; font-size:15px; }

/* ---------------- CONTACTO ---------------- */
.contacto-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px){ .contacto-grid{ grid-template-columns: 1fr 1fr; } }
.contacto-card{
  display:flex; align-items:flex-start; gap:14px; background:#fff; border:1px solid var(--gris-borde);
  border-radius: var(--radius); padding:18px; box-shadow: var(--sombra); transition: transform .2s, box-shadow .2s;
}
.contacto-card:hover{ transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.contacto-card .icon{ width:26px; height:26px; color: var(--color-primario); flex-shrink:0; margin-top:2px; }
.contacto-card strong{ display:block; font-size:15px; margin-bottom:3px; }
.contacto-card span{ font-size:13.5px; color: var(--gris-texto); }

/* Skeleton en admin no aplica aqui */