/* ============================================================================
   Tienda · MC Frenos Deportivos — partes funcionales
   ----------------------------------------------------------------------------
   Lo que dibuja app.js a partir de la API: botones, avisos, ficha técnica,
   carrito, checkout, envío y transferencia. La estructura de la página (hero,
   catálogo, quiénes somos, videos, reseñas, contacto, pie) y las reglas
   responsive del diseño aprobado están en diseno.css.

   Los valores salen del snapshot aprobado por Celes (31/08/2026): fondo
   #0B0B0C, paneles #111114/#141417, líneas #26262B/#3A3A40, rojo #E30613,
   Archivo Black para títulos y precios, Barlow Condensed para botones y
   etiquetas, Barlow para texto.

   Contraste ya medido en el panel: #E30613 como TEXTO da 4.03:1 y no llega al
   mínimo; sirve de relleno (blanco encima da 4.88:1). Para texto rojo va
   #FF1F28 (5.13:1). #8B8B8F es el gris más tenue legible (5.80:1).
   ============================================================================ */

:root {
  --fondo: #0B0B0C;
  --panel: #111114;
  --panel-2: #141417;
  --linea: #26262B;
  --linea-2: #3A3A40;

  --tx: #FFFFFF;
  --tx-2: #D6D6DB;
  --tx-3: #A4A4AB;
  --tx-4: #8B8B8F;

  --rojo: #E30613;      /* relleno */
  --rojo-hover: #FF1F28;
  --rojo-tx: #FF1F28;   /* texto */
  --verde: #25D366;
  --ambar: #F5A524;

  --display: 'Archivo Black', system-ui, sans-serif;
  --titulo: 'Barlow Condensed', system-ui, sans-serif;
  --texto: Barlow, system-ui, -apple-system, sans-serif;
}

.tenue { color: var(--tx-4); font-size: 14px; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 0 18px; border: 2px solid transparent;
  font-family: var(--titulo); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-rojo { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.btn-rojo:hover { background: var(--rojo-hover); border-color: var(--rojo-hover); color: #fff; }
.btn-linea { background: transparent; border-color: var(--linea-2); color: #fff; }
.btn-linea:hover { border-color: var(--rojo); color: #fff; }
.btn-wa { background: var(--verde); border-color: var(--verde); color: var(--fondo); }
.btn-wa:hover { background: #1FB857; border-color: #1FB857; color: var(--fondo); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-chico { min-height: 36px; padding: 0 10px; font-size: 13px; border-width: 1px; }
.btn-bloque { width: 100%; }

/* ── Estados de la grilla ────────────────────────────────────────────────── */
.estado { grid-column: 1 / -1; padding: 56px 20px; text-align: center; color: var(--tx-4); border: 1px dashed var(--linea-2); }
.estado h3 { font-family: var(--display); font-weight: 400; font-size: 19px; text-transform: uppercase; color: #fff; margin: 0 0 8px; }
.estado p { margin: 0; font-size: 15px; color: var(--tx-3); }
.estado .btn { margin-top: 16px; }

/* Esqueletos: dan la forma de lo que viene, en vez de un cartel de "cargando"
   que hace saltar el layout cuando llegan los datos. */
.esqueleto { background: var(--panel-2); border: 1px solid var(--linea); }
.esqueleto .barra { height: 12px; margin: 10px 14px; background: var(--panel); }
.esqueleto .foto { aspect-ratio: 4 / 3; background: var(--panel); }
@media (prefers-reduced-motion: no-preference) {
  .esqueleto .barra, .esqueleto .foto { animation: latir 1.4s ease-in-out infinite; }
  @keyframes latir { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
}

/* ── Velo, ficha técnica y carrito ───────────────────────────────────────── */
.velo { position: fixed; inset: 0; z-index: 88; background: rgba(0,0,0,.72); animation: mcFade .18s ease-out; }

/* Carrito: panel lateral, como el del diseño aprobado. */
.cajon {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(420px, 100%); background: var(--panel);
  border-left: 2px solid var(--rojo);
  display: flex; flex-direction: column; animation: mcSlide .22s ease-out;
}
.cajon-cabecera { padding: 18px 16px; border-bottom: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
.cajon-cabecera h2, .cajon-cabecera h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 18px; text-transform: uppercase; color: #fff; }
#cajon-cuerpo { flex: 1; overflow-y: auto; padding: 16px; }
#cajon-cuerpo .cajon-cabecera { padding: 0 0 12px; border-bottom: 1px solid var(--linea); margin-bottom: 14px; }

/* Checkout: diálogo central, amplio y separado del carrito lateral. */
.checkout-modal {
  position: fixed; inset: 0; z-index: 91; display: grid; place-items: center;
  padding: 20px; overflow: hidden;
}
.checkout-caja {
  width: min(900px, 100%); max-height: calc(100dvh - 40px); overflow: hidden;
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--linea-2); border-top: 3px solid var(--rojo);
  box-shadow: 0 28px 80px rgba(0,0,0,.72); animation: mcFade .18s ease-out;
}
#checkout-cuerpo { overflow-y: auto; overscroll-behavior: contain; padding: clamp(18px, 3vw, 32px); }
#checkout-cuerpo > .cajon-cabecera { padding: 0 0 14px; margin-bottom: 18px; border-bottom: 1px solid var(--linea); }
#checkout-cuerpo #form-checkout { width: min(720px, 100%); margin: 0 auto; }

.linea { display: grid; grid-template-columns: 74px 1fr; gap: 12px; border: 1px solid var(--linea); background: var(--fondo); padding: 10px; margin-bottom: 12px; }
.linea-foto { width: 74px; height: 74px; background: #fff; object-fit: contain; display: block; }
.linea-datos { min-width: 0; }
.linea-titulo { font-family: var(--display); font-size: 14px; text-transform: uppercase; line-height: 1.2; color: #fff; }
.linea-precio { font-size: 13px; color: var(--tx-4); margin-top: 3px; }
.linea-controles { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.linea-cantidad { display: flex; align-items: center; border: 1px solid var(--linea-2); }
.linea-cantidad button { width: 36px; height: 36px; background: transparent; border: 0; color: #fff; font-size: 18px; cursor: pointer; }
.linea-cantidad button:disabled { opacity: .35; cursor: not-allowed; }
.linea-cantidad input {
  width: 44px; height: 36px; padding: 0; text-align: center; font-weight: 700; font-size: 15px;
  background: transparent; border: 0; color: #fff; -moz-appearance: textfield;
}
.linea-cantidad input::-webkit-outer-spin-button, .linea-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.total { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0; padding-top: 12px; border-top: 1px solid var(--linea); font-family: var(--titulo); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 15px; color: #fff; }
.total b { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: 0; color: #fff; }
.fila-total { display: flex; justify-content: space-between; font-size: 15px; color: var(--tx-3); margin: 6px 0; }

.aviso { padding: 11px 13px; border: 1px solid var(--linea-2); background: var(--panel-2); font-size: 14px; line-height: 1.5; margin-bottom: 14px; color: var(--tx-2); }
.aviso-error { border-color: rgba(255,31,40,.5); background: rgba(255,31,40,.08); color: var(--rojo-tx); }
.aviso-ambar { border-color: rgba(245,165,36,.45); background: rgba(245,165,36,.08); color: var(--ambar); }
.aviso-ok { border-color: rgba(37,211,102,.5); background: rgba(37,211,102,.08); color: var(--verde); }

/* ── Formulario del checkout ─────────────────────────────────────────────── */
.form-campo { margin-bottom: 12px; }
.form-campo label { display: block; margin-bottom: 6px; font-family: var(--display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.form-campo input, .form-campo textarea, .form-campo select {
  width: 100%; min-height: 48px; padding: 10px 12px; font-size: 16px; border-radius: 0;
  background: var(--fondo); border: 1px solid var(--linea-2); color: #fff;
}
.form-campo textarea { min-height: 74px; resize: vertical; }
.form-campo .ayuda { margin-top: 4px; font-size: 13px; color: var(--tx-4); }
.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Ficha técnica (modal centrado, como el diseño aprobado) ─────────────── */
.ficha {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; overflow-y: auto;
}
#ficha-cuerpo {
  position: relative; width: min(720px, 100%); background: var(--panel); border: 1px solid var(--linea);
  border-top: 3px solid var(--rojo); animation: mcFade .18s ease-out;
}
.ficha-cabecera { padding: 16px 20px; border-bottom: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ficha-sobretitulo { font-family: var(--titulo); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--tx-4); }
#ficha-cuerpo > .estado, #ficha-cuerpo > .aviso { margin: 20px; }
.ficha-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; padding: 20px; }
.ficha-fotos { min-width: 0; }
.ficha-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; display: block; }
.ficha-miniaturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.ficha-miniaturas img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.ficha-datos { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ficha-marca { font-family: var(--titulo); font-weight: 700; font-size: 13px; letter-spacing: .16em; color: var(--tx-4); text-transform: uppercase; margin-bottom: 5px; }
.ficha-titulo { margin: 0; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.15; text-transform: uppercase; color: #fff; }
.ficha-variante { display: inline-flex; align-items: center; margin-top: 10px; font-family: var(--titulo); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; color: #fff; background: var(--rojo); }
.ficha-detalle { font-size: 14px; line-height: 1.5; color: #C9C9CF; margin-top: 8px; }
.ficha-tabla { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.ficha-celda { background: var(--fondo); padding: 11px 13px; min-width: 0; }
.ficha-clave { font-family: var(--titulo); font-weight: 700; font-size: 11px; letter-spacing: .16em; color: #6B6B71; text-transform: uppercase; margin-bottom: 4px; }
.ficha-clave-rojo { color: var(--rojo-tx); margin-bottom: 5px; }
.ficha-valor { font-size: 14px; line-height: 1.35; color: #E6E6EA; overflow-wrap: anywhere; }
.ficha-nota { border-left: 3px solid var(--rojo); background: var(--panel-2); padding: 12px 14px; font-size: 14px; line-height: 1.5; color: #C9C9CF; }
.lista-compat { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--tx-3); max-height: 150px; overflow-y: auto; }
.ficha-compra { margin-top: auto; }
.ficha-precio-fila { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ficha-precio { font-family: var(--display); font-size: 26px; color: #fff; }
.ficha-unidad { font-family: var(--titulo); font-weight: 700; font-size: 11px; letter-spacing: .12em; color: var(--tx-4); text-transform: uppercase; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ficha-agregar {
  flex: 1; min-width: 180px; background: var(--rojo); border: 0; color: #fff; font-family: var(--titulo); font-weight: 700;
  font-size: 16px; letter-spacing: .12em; text-transform: uppercase; padding: 14px; min-height: 50px; cursor: pointer;
}
.ficha-agregar:disabled { opacity: .45; cursor: not-allowed; }
.ficha-consultar {
  flex: none; border: 1px solid var(--linea-2); color: #fff; font-family: var(--titulo); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; padding: 13px 18px; min-height: 50px; display: flex; align-items: center;
}

/* ── Envío en el checkout (sólo con la integración de envíos activa) ─────── */
.envio { border: 1px solid var(--linea); padding: 14px 14px 4px; margin: 6px 0 14px; }
.envio legend { padding: 0 6px; font-family: var(--titulo); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-4); }
#envio-resultado { margin: 12px 0; }
.opciones-envio { display: grid; gap: 8px; margin-bottom: 8px; }
.opcion-envio { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linea-2); background: var(--fondo); cursor: pointer; font-size: 14px; color: var(--tx-2); }
.opcion-envio span { flex: 1; }
.opcion-envio:has(input:checked) { border-color: var(--rojo); }
#sucursales-resultado { margin: 10px 0; }

/* ── Transferencia: datos para copiar ────────────────────────────────────── */
.datos-transferencia { display: grid; gap: 8px; margin-bottom: 8px; }
.dato-transferencia { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo boton" "valor boton"; align-items: center; column-gap: 10px; padding: 10px 12px; border: 1px solid var(--linea-2); background: var(--fondo); }
.dato-transferencia .tenue { grid-area: titulo; font-size: 12px; }
.dato-transferencia b { grid-area: valor; overflow-wrap: anywhere; font-size: 15px; color: #fff; }
.dato-transferencia .btn { grid-area: boton; }

@media (max-width: 620px) {
  .cajon { width: 100%; }
  .checkout-modal { padding: 0; place-items: stretch; }
  .checkout-caja { width: 100%; max-height: 100dvh; min-height: 100dvh; border-left: 0; border-right: 0; border-bottom: 0; }
  #checkout-cuerpo { padding: 16px; }
}