/* =========================================================
   carrito.css — Chipa Chips
   Los estilos del menu y del pedido que dibuja carrito.js.
   Usa las variables del motor: cambia la paleta en contenido.js
   y esto la sigue.
   ========================================================= */

#menu .contenedor > .bajada{margin-top:-24px}

/* ---------- categorias ---------- */
.cc-menu{margin-top:36px}
.cc-cats{
  position:sticky; top:64px; z-index:20;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  margin-inline:-20px; padding:12px 20px;
  background:color-mix(in srgb, var(--suave) 92%, transparent); backdrop-filter:blur(10px);
}
.cc-cats::-webkit-scrollbar{display:none}
.cc-cats button{
  flex:none; min-height:44px; padding:0 18px; cursor:pointer;
  border:1.5px solid var(--borde); border-radius:999px;
  background:var(--fondo); color:var(--tinta);
  font-size:15px; font-weight:600; white-space:nowrap;
  transition:border-color .2s, color .2s;
}
.cc-cats button:hover, .cc-cats button:focus-visible{border-color:var(--marca); color:var(--marca)}
@media(min-width:861px){ .cc-cats{justify-content:center} }

.cc-cat{padding-top:36px}
.cc-cat__titulo{display:flex; align-items:baseline; gap:6px 16px; flex-wrap:wrap; margin-bottom:18px;
  padding-bottom:12px; border-bottom:1px solid var(--borde)}
.cc-cat__titulo h3{font-size:34px; color:var(--marca)}
.cc-cat__titulo p{font-size:15px; color:var(--tinta-suave)}

/* ---------- productos ---------- */
.cc-productos{display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr))}
.cc-producto{
  background:var(--fondo); border:1px solid var(--borde); border-radius:var(--radio);
  padding:20px; display:flex; flex-direction:column; gap:12px;
}
.cc-producto header{display:flex; gap:12px; align-items:flex-start}
.cc-producto__icono{font-size:26px; line-height:1.1; flex:none}
.cc-producto__foto{width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--marca)}
.cc-elegir{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--marca); margin-bottom:-4px}
.cc-producto h4{font-size:26px; line-height:1}
.cc-producto header p{font-size:14.5px; line-height:1.45; color:var(--tinta-suave); margin-top:4px}
.cc-producto ul{list-style:none; margin:0; padding:0; display:grid; margin-top:auto}

.cc-fila{
  display:flex; align-items:center; gap:12px; min-height:56px;
  border-top:1px dashed var(--borde);
}
.cc-fila__nombre{font-weight:600; font-size:15.5px; min-width:64px}
.cc-fila__precio{font-weight:700; font-size:17px; font-variant-numeric:tabular-nums}
.cc-fila__nombre + .cc-fila__precio{color:var(--tinta-suave); font-weight:600; font-size:15.5px}
.cc-fila--elegida .cc-fila__precio{color:var(--marca)}
.cc-fila__accion{margin-left:auto}

/* ---------- + y contador ---------- */
.cc-mas, .cc-contador button{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:24px; font-weight:600; line-height:1;
  transition:transform .15s, background .2s;
}
.cc-mas{border:1.5px solid var(--marca); background:transparent; color:var(--marca)}
.cc-mas:hover{background:var(--marca); color:#0a1628}
.cc-mas:active, .cc-contador button:active{transform:scale(.9)}
.cc-contador{
  display:flex; align-items:center; border-radius:999px;
  background:var(--marca); color:#0a1628;
}
.cc-contador button{border:0; background:transparent; color:inherit}
.cc-contador span{min-width:22px; text-align:center; font-weight:800; font-size:16px; font-variant-numeric:tabular-nums}
.cc-mas:focus-visible, .cc-contador button:focus-visible, .cc-cerrar:focus-visible, .cc-vaciar:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
}

/* ---------- barra del pedido ---------- */
.cc-barra{
  position:fixed; z-index:75; left:50%; bottom:14px; transform:translateX(-50%);
  width:min(560px, calc(100% - 24px));
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 10px 10px 20px; border-radius:999px;
  background:#fff; color:#0a1628;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.7);
  animation:cc-sube .3s ease-out;
}
.cc-barra[hidden]{display:none}
.cc-barra__resumen{display:flex; flex-direction:column; line-height:1.2}
.cc-barra__resumen strong{font-size:19px; font-variant-numeric:tabular-nums}
.cc-barra__resumen span{font-size:13px; opacity:.7}
.cc-barra .btn{border-radius:999px; padding:13px 24px}
@keyframes cc-sube{from{transform:translate(-50%, 30px); opacity:0}}

/* Flotante de Instagram: mismo tamaño que el de WhatsApp, encima de el */
.cc-ig{
  position:fixed; left:16px; bottom:78px; z-index:70;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); color:#fff;
  display:grid; place-items:center; text-decoration:none;
  box-shadow:0 14px 30px -10px rgba(238,42,123,.7); transition:transform .2s;
}
.cc-ig:hover{transform:scale(1.08)}

/* Con pedido armado, los flotantes suben para no taparse con la barra */
.cc-con-pedido .wa{bottom:92px}
.cc-con-pedido .cc-ig{bottom:154px}
.cc-con-pedido .pie{padding-bottom:110px}

/* ---------- la hoja del pedido ---------- */
.cc-hoja{
  border:0; padding:0; margin:0 0 0 auto;
  width:min(460px, 100%); height:100dvh; max-height:100dvh; max-width:100%;
  background:var(--suave); color:var(--tinta);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.8);
}
.cc-hoja[open]{display:flex; flex-direction:column; animation:cc-entra .28s ease-out}
.cc-hoja::backdrop{background:rgba(3,8,16,.7); backdrop-filter:blur(3px)}
@keyframes cc-entra{from{transform:translateX(40px); opacity:0}}
@media(max-width:560px){
  .cc-hoja{margin:auto 0 0; height:auto; max-height:92dvh; border-radius:22px 22px 0 0}
  @keyframes cc-entra{from{transform:translateY(40px); opacity:0}}
}

.cc-hoja__cabeza{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 12px 14px 22px; border-bottom:1px solid var(--borde); flex:none;
}
.cc-hoja__cabeza h3{font-size:32px}
.cc-cerrar{
  width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:transparent; color:inherit; font-size:30px; line-height:1;
}
.cc-cerrar:hover{background:rgba(255,255,255,.08)}
.cc-hoja__cuerpo{overflow-y:auto; padding:6px 22px 28px; overscroll-behavior:contain}

.cc-lista{list-style:none; margin:0; padding:0}
.cc-lista li{
  display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center;
  padding:14px 0; border-bottom:1px dashed var(--borde);
}
.cc-lista__texto{display:flex; flex-direction:column; line-height:1.3}
.cc-lista__texto strong{font-size:15.5px}
.cc-lista__texto span{font-size:13.5px; color:var(--tinta-suave)}
.cc-lista .cc-contador button{width:38px; height:38px; font-size:21px}
.cc-lista__subtotal{grid-column:1 / -1; text-align:right; font-size:15px; font-variant-numeric:tabular-nums; color:var(--marca)}

.cc-vacio{padding:36px 0; text-align:center; color:var(--tinta-suave)}
.cc-total{display:flex; justify-content:space-between; align-items:baseline; padding:18px 0 6px}
.cc-total[hidden]{display:none}
.cc-total span{font-size:15px; text-transform:uppercase; letter-spacing:.1em; color:var(--tinta-suave); font-weight:700}
.cc-total strong{font-family:var(--fuente-titulo); font-weight:400; font-size:40px; line-height:1; letter-spacing:.02em}

.cc-datos{display:grid; gap:16px; margin-top:18px}
.cc-datos[hidden]{display:none}
.cc-datos .campo[hidden]{display:none}
.cc-datos textarea{min-height:0}
.cc-entrega{border:0; margin:0; padding:0; display:grid; gap:8px}
.cc-entrega legend{font-size:14px; font-weight:600; padding:0; margin-bottom:8px}
.cc-opcion{
  display:flex; gap:12px; align-items:center; padding:12px 14px; cursor:pointer;
  border:1.5px solid var(--borde); border-radius:calc(var(--radio) * .65); background:var(--fondo);
}
.cc-opcion:has(input:checked){border-color:var(--marca)}
.cc-opcion input{accent-color:var(--marca); width:20px; height:20px; flex:none; margin:0}
.cc-opcion span{display:flex; flex-direction:column; line-height:1.3}
.cc-opcion strong{font-size:15.5px}
.cc-opcion em{font-style:normal; font-size:13.5px; color:var(--tinta-suave)}

.cc-nota{font-size:13.5px; line-height:1.45; color:var(--tinta-suave)}
.cc-nota--centro{text-align:center; margin-top:-6px}
.cc-error{font-size:15px; font-weight:600; color:#ff8a7a}
.cc-error[hidden]{display:none}
.cc-enviar{white-space:normal; text-align:center}
.cc-vaciar{
  justify-self:center; min-height:44px; padding:0 14px; cursor:pointer;
  border:0; background:none; color:var(--tinta-suave); font-size:14px; text-decoration:underline;
}

/* ---------- la insignia del hero ---------- */
.hero__media.cc-insignia{border-radius:0; box-shadow:none; overflow:visible; display:grid; place-items:center}
.cc-insignia__disco{
  width:min(100%, 440px); aspect-ratio:1; border-radius:50%;
  display:grid; place-content:center; justify-items:center; gap:18px;
  background:radial-gradient(circle at 50% 38%, #123561, #0b2545 62%, #081c36);
  border:10px solid rgba(255,255,255,.06);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9), 0 0 0 1px var(--borde);
}
.cc-logo--grande{font-size:clamp(34px, 7vw, 58px)}
.cc-insignia__disco em{font-style:normal; font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:var(--marca)}

@media (prefers-reduced-motion: reduce){
  .cc-barra, .cc-hoja[open]{animation:none}
}