/* Carrito de la web pública: botón del menú, aviso al agregar y (más abajo) el modal. */

.sitio-carrito-btn {
  position: relative;
  overflow: visible; /* el contador sobresale del círculo */
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform 120ms var(--ease-out);
}
.sitio-carrito-btn::after { display: none; } /* sin el barrido de brillo global de los botones */
.sitio-carrito-btn:hover { color: var(--color-gold); border-color: var(--color-gold); background: transparent; box-shadow: none; transform: none; }
.sitio-carrito-btn:active { transform: scale(.94); }
.sitio-carrito-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.sitio-carrito-n {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1;
  color: var(--color-bg);
  background: var(--color-gold);
  border-radius: var(--radius-full);
}

/* Aviso al agregar: flota abajo (a la izquierda del botón de WhatsApp) o, con --inline, va pegado
   debajo del botón "Add to cart". Lleva una barra que se vacía durante su tiempo en pantalla. */
.cm-aviso {
  position: fixed;
  left: var(--space-4);
  right: calc(58px + var(--space-4) * 2);
  bottom: var(--space-4);
  z-index: 60;
  display: grid;
  gap: var(--space-2);
  max-width: 440px;
  padding: var(--space-4) var(--space-5) var(--space-5);
  overflow: hidden;
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), var(--glow-gold-sm);
  transform: translateY(24px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}
.cm-aviso.visible { transform: none; opacity: 1; pointer-events: auto; }
/* Flotante (tienda): compacto, a la derecha sobre el botón de WhatsApp, entra deslizándose con un pequeño rebote. */
.cm-aviso:not(.cm-aviso--inline) {
  left: auto;
  right: var(--space-4);
  bottom: calc(58px + var(--space-4) * 2);
  width: min(264px, calc(100vw - 2rem));
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-radius: var(--radius-lg);
  transform: translateX(calc(100% + var(--space-6)));
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity var(--duration-base) var(--ease-out);
}
.cm-aviso:not(.cm-aviso--inline).visible { transform: none; }
.cm-aviso:not(.cm-aviso--inline) .cm-aviso-titulo { font-size: var(--text-sm); padding-right: var(--space-5); }
.cm-aviso:not(.cm-aviso--inline) .cm-aviso-sug { font-size: var(--text-xs); color: var(--color-text-muted); }
.cm-aviso:not(.cm-aviso--inline) .cm-aviso-acciones { margin-top: var(--space-2); }
.cm-aviso:not(.cm-aviso--inline) .btn-sm { height: 30px; padding: 0 var(--space-3); }
.cm-aviso:not(.cm-aviso--inline) .cm-aviso-x { top: var(--space-1); right: var(--space-1); width: 28px; height: 28px; }
.cm-aviso--inline { position: static; max-width: none; margin-top: var(--space-4); animation: cm-aviso-llamada 1.6s ease-out 2; }
@keyframes cm-aviso-llamada { 0%, 100% { box-shadow: var(--shadow-lg), var(--glow-gold-sm); } 50% { box-shadow: var(--shadow-lg), 0 0 26px rgba(232, 201, 109, .55); } }
.cm-aviso-titulo { margin: 0; padding-right: var(--space-6); font-weight: 700; color: var(--color-gold-bright); }
.cm-aviso-sug { margin: 0; font-size: var(--text-sm); color: var(--color-text); }
.cm-aviso-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.cm .cm-aviso-x, .cm-aviso-x { position: absolute; top: var(--space-2); right: var(--space-2); width: 32px; height: 32px; padding: 0; font-size: var(--text-xl); line-height: 1; color: var(--color-text-muted); background: transparent; border: 0; box-shadow: none; }
.cm-aviso-x:hover { color: var(--color-gold); transform: none; box-shadow: none; background: transparent; }
.cm-aviso-barra { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--color-gold); transform-origin: left; animation-name: cm-aviso-cuenta; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes cm-aviso-cuenta { to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .cm-aviso, .sitio-carrito-btn { transition: none; }
  .cm-aviso--inline { animation: none; }
  .cm, .cm::backdrop { transition: none; }
}

/* Escritorio (menú en línea): el carrito va al final, no entre el logo y los enlaces. Con el menú
   desplegable (hasta 1100px) el carrito se queda junto al botón Menu, que es el último a la derecha. */
@media (min-width: 1101px) {
  .sitio-carrito-btn { order: 3; margin-left: 0; }
}

/* ── Modal del carrito ── */
body.cm-abierto { overflow: hidden; }

/* Siempre una ventana centrada y acotada (no pantalla completa, tampoco hoja pegada al fondo): ancho
   y alto máximos dejan un margen de 1rem por lado, y el cuerpo es lo que se desplaza. --cm-alto-max
   lo comparten el diálogo y su panel para que el pie con el total nunca quede recortado. */
.cm {
  --cm-alto-max: min(calc(100dvh - 2rem), 860px);
  width: min(640px, calc(100vw - 2rem));
  max-height: var(--cm-alto-max);
  margin: auto;
  padding: 0;
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cm::backdrop { background: rgba(0, 0, 0, .78); opacity: 0; transition: opacity 200ms var(--ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete; }
.cm[open]::backdrop { opacity: 1; }
.cm { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity 200ms var(--ease-out), transform 220ms var(--ease-out), overlay 220ms allow-discrete, display 220ms allow-discrete; }
.cm[open] { display: flex; opacity: 1; transform: none; }
@starting-style {
  .cm[open] { opacity: 0; transform: translateY(14px) scale(.98); }
  .cm[open]::backdrop { opacity: 0; }
}

.cm-panel { display: flex; flex-direction: column; width: 100%; max-height: var(--cm-alto-max); min-height: 0; }
.cm-cab { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-soft); }
.cm-cab h2 { margin: 0; font-size: var(--text-xl); }
.cm-cerrar { width: 40px; height: 40px; font-size: var(--text-2xl); line-height: 1; color: var(--color-text-muted); background: transparent; border: 0; cursor: pointer; border-radius: var(--radius-full); }
.cm-cerrar:hover { color: var(--color-gold); }

.cm-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); overscroll-behavior: contain; }
#cm-resto { display: flex; flex-direction: column; gap: var(--space-5); }
#cm-resto[hidden] { display: none; }
.cm-vacio { margin: 0; padding: var(--space-6) 0; text-align: center; color: var(--color-text-muted); }
.cm-sec { display: flex; flex-direction: column; gap: var(--space-3); }
.cm-sec-titulo { margin: 0; font-size: var(--text-sm); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-gold); }
.cm-lista { display: flex; flex-direction: column; gap: var(--space-3); }
.cm-mas { align-self: flex-start; font-size: var(--text-sm); color: var(--color-gold); text-decoration: none; }
.cm-mas:hover { text-decoration: underline; }

.cm-item { border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-3) var(--space-4); }
.cm-item-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cm-item-tag { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.cm-item-nombre { margin: var(--space-1) 0 0; font-weight: 600; overflow-wrap: anywhere; }
.cm-item-meta { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.cm-item-deposito { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text); }

.cm-producto { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--space-3); }
.cm-foto { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface-sunken); display: block; }
.cm-producto-datos { display: flex; flex-direction: column; min-width: 0; }
.cm-cant { display: inline-flex; align-items: center; gap: var(--space-2); }
.cm-cant button { width: 32px; height: 32px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: transparent; color: var(--color-text); cursor: pointer; }
.cm-cant button:disabled { opacity: .4; cursor: not-allowed; }
.cm-item-precio { font-weight: 600; white-space: nowrap; text-align: right; }

/* Pie fijo: el total siempre a la vista, también con el formulario largo. */
.cm-pie { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border-soft); background: var(--color-surface-raised); }
.cm-totales { display: flex; flex-direction: column; gap: var(--space-1); }
.cm-total-fila { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.cm-total-fila.cm-total-final { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); }
.cm-nota-deposito { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.cm-pie .btn-primary { width: 100%; }

/* ── Pulido: tipografía y controles del sitio, sin los botones gordos globales ── */
.cm-cab h2 { font-size: var(--text-lg); }
.cm .cm-cerrar { align-self: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-border-soft); border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted); box-shadow: none; font-size: var(--text-xl); }
.cm .cm-cerrar:hover { color: var(--color-gold); border-color: var(--color-gold); transform: none; box-shadow: none; }
.cm-sec-titulo { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); color: var(--color-gold); }
.cm .btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
.cm .cm-quitar-producto { width: 32px; padding: 0; font-size: var(--text-base); }
.cm .cm-cant button { width: 30px; height: 30px; padding: 0; align-self: auto; }
.cm .cm-cant button:hover { transform: none; }
.cm-item-nombre { font-size: var(--text-base); }
.cm .field-grid { gap: var(--space-3); }
.cm input, .cm select, .cm textarea { font-size: var(--text-sm); letter-spacing: normal; }
.cm .card-hint { margin: 0; font-size: var(--text-xs); line-height: 1.5; }

/* Métodos de pago: cuadrícula 2×2 compacta, siempre pareja. */
.cm .reservar-pago-opciones { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.cm .reservar-pago-opcion { padding: var(--space-3); gap: var(--space-2); border-radius: var(--radius-md); min-height: 60px; box-shadow: none; transform: none; }
.cm .reservar-pago-opcion:hover { transform: none; }
.cm .reservar-pago-opcion:has(input:checked) { box-shadow: var(--glow-gold-sm); }
.cm .reservar-pago-marca { font-size: var(--text-sm); }
.cm .reservar-pago-marca small { font-size: var(--text-xs); line-height: 1.3; }

/* Cobro manual (Zelle / Venmo): dos pasos numerados — pagar a esa cuenta y adjuntar el comprobante. */
.cm-manual { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-sunken); }
.cm-paso { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.cm-paso + .cm-paso { padding-top: var(--space-4); border-top: 1px dashed var(--color-border-soft); }
.cm-paso-n { display: grid; place-items: center; width: 24px; height: 24px; font-size: var(--text-xs); font-weight: 700; color: var(--color-bg); background: var(--color-gold); border-radius: var(--radius-full); }
.cm-paso-cuerpo { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cm-paso-texto { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); }
.cm-paso-texto strong { color: var(--color-gold-bright); }
.cm-cuenta { margin: 0; padding: var(--space-3); font-size: var(--text-sm); font-weight: 700; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); overflow-wrap: anywhere; user-select: all; }
.cm-paso-nota { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }
.cm-paso-nota:empty { display: none; }

/* Móvil: misma ventana centrada (antes era una hoja pegada al fondo); solo se compacta el interior. */
@media (max-width: 600px) {
  /* Un poco más de aire arriba y abajo: con el carrito lleno es una ventana, no la pantalla entera. */
  .cm { --cm-alto-max: min(calc(100dvh - 4.5rem), 860px); }
  /* Totales: la etiqueta no se parte y el monto en pesos baja a su propia línea, alineado a la derecha. */
  .cm-total-fila { align-items: baseline; }
  .cm-total-fila > span:first-child { flex: none; white-space: nowrap; }
  .cm-total-fila > span:last-child { text-align: right; }
  .cm-total-fila .precio-mxn { display: block; margin: 0; }
  .cm-cab, .cm-cuerpo, .cm-pie { padding-left: var(--space-4); padding-right: var(--space-4); }
  .cm-cab { padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .cm-pie { padding-top: var(--space-3); padding-bottom: var(--space-3); gap: var(--space-2); }
  .cm-producto { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .cm-producto .cm-foto { width: 48px; height: 48px; }
  .cm-producto .cm-item-precio { grid-column: 2; text-align: left; }
  .cm-producto .cm-quitar-producto { grid-row: 1; grid-column: 3; }
  .cm-producto .cm-cant { grid-column: 3; grid-row: 2; }
}

/* Fecha, hora y notas de cada trabajo dentro de su tarjeta del carrito. */
.cm-servicio-campos { margin-top: var(--space-3); }

/* Teléfono: lada + número en una sola fila. */
.cm .cm-tel { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: var(--space-2); }

/* Tarjeta de regalo: códigos aplicados como fichas con su botón de quitar; objetivos táctiles de 44 px. */
.cm-tarjetas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cm-tarjetas:empty { display: none; }
.cm-tarjeta-chip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-surface); font-size: var(--text-sm); color: var(--color-gold-bright); }
.cm #cm-sec-tarjeta .btn-sm { height: auto; min-height: 44px; }
.cm #cm-sec-tarjeta input { min-height: 44px; }
#cm-tarjeta-aviso:empty { display: none; }
.cm-total-fila.cm-total-tarjeta { color: var(--color-gold-bright); }