/* ══════════════════════════════════════════════════════════════
   COMBUST DIESEL — MOTION LIB (CSS)
   Subir por FTP a /wp-content/uploads/cd-motion/cd-motion-lib.css
   Sistema "liquid glass" + tokens propios de Combust Diesel.
   ══════════════════════════════════════════════════════════════ */

:root{
  --cd-bg:#10130B;
  --cd-bg-soft:#171B10;
  --cd-acento:#E29A3C;
  --cd-acento-soft:rgba(226,154,60,0.16);
  --cd-texto:#ffffff;
  --cd-texto-muted:rgba(255,246,232,0.55);
  --cd-linea:rgba(255,255,255,0.14);
}

.cd-motion-page{
  background:var(--cd-bg);
  color:var(--cd-texto);
  font-family:'DM Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.cd-motion-page *,.cd-motion-page *::before,.cd-motion-page *::after{box-sizing:border-box}
.cd-motion-page a{color:inherit}
.cd-motion-page img,.cd-motion-page video{display:block;max-width:100%}
.font-heading{font-family:'Bebas Neue',sans-serif;text-transform:uppercase}
.font-body{font-family:'DM Sans',sans-serif}
.font-accent{font-family:'Cormorant Garamond',serif;font-style:italic}

/* ── LIQUID GLASS — sutil (nav, chips, cards) ── */
.liquid-glass{
  background: rgba(255,255,255,0.04);
  background-blend-mode: luminosity;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── LIQUID GLASS — fuerte (CTA primario) ── */
.liquid-glass-strong{
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: none;
  box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0.2) 20%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.2) 80%,
    rgba(255,255,255,0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Botón primario — sólido acento (gasoil), no blanco/negro como el demo original */
.cd-btn-acento{
  background: var(--cd-acento);
  color: var(--cd-bg);
}

/* Video de fondo full-bleed */
.cd-bg-video-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;background:var(--cd-bg)}
.cd-bg-video{position:absolute;left:50%;top:0;transform:translateX(-50%);width:120%;height:120%;object-fit:cover;object-position:top center;opacity:0}
.cd-bg-video.cd-bg-video-cover{width:100%;height:100%;top:0;left:0;transform:none;object-position:center}

/* Separador camión — silueta simple, liviana, sin video ni 3D */
.cd-sep{position:relative;height:110px;background:var(--cd-bg-soft);overflow:hidden;display:flex;align-items:flex-end;border-top:1px solid var(--cd-linea);border-bottom:1px solid var(--cd-linea)}
.cd-sep-linea{position:absolute;left:0;right:0;bottom:22px;height:2px;background-image:repeating-linear-gradient(90deg,var(--cd-linea) 0 24px,transparent 24px 44px)}
.cd-sep-camion{position:absolute;bottom:12px;left:-140px;width:110px;height:auto;fill:var(--cd-acento);animation:cd-sep-anda 9s linear infinite}
@keyframes cd-sep-anda{from{left:-140px}to{left:110%}}
@media(prefers-reduced-motion:reduce){.cd-sep-camion{animation:none;left:20%}}

@media(max-width:860px){
  .cd-nav-links,.cd-nav-cta{display:none !important}
  .cd-burger{display:flex !important}
}

/* ── MODAL — ficha de producto / diálogos ── */
.cd-modal-backdrop{
  position:fixed; inset:0; z-index:100;
  background:rgba(8,10,6,0.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.cd-modal-panel{
  position:relative;
  width:100%; max-width:640px;
  max-height:88vh; overflow-y:auto;
  padding:40px 32px 32px;
}
.cd-modal-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none;
}

/* ── CAMPOS DE FORMULARIO — inputs sobre fondo oscuro ── */
.cd-field{margin-bottom:16px}
.cd-field-label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cd-texto-muted);margin-bottom:7px}
.cd-input{
  width:100%;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--cd-linea);
  color:var(--cd-texto);
  padding:12px 16px;
  border-radius:0.75rem;
  font-size:14px;
  font-family:'DM Sans',sans-serif;
  transition:border-color .2s, background .2s;
}
.cd-input::placeholder{color:rgba(255,246,232,0.35)}
.cd-input:focus{outline:none;border-color:var(--cd-acento);background:rgba(255,255,255,0.08)}
.cd-textarea{resize:vertical;min-height:90px}
select.cd-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E29A3C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}

/* ── SEGMENTED TOGGLE (Empresa / Persona, filtros de catálogo) ── */
.cd-segment{display:inline-flex;padding:5px;gap:4px}
.cd-segment-btn{
  display:flex; align-items:center; gap:6px;
  padding:9px 18px; border-radius:9999px; border:none; background:transparent;
  color:rgba(255,255,255,0.65); font-size:13px; font-weight:500; cursor:pointer;
  transition:background .2s, color .2s;
  white-space:nowrap;
}
.cd-segment-btn-active{background:var(--cd-acento);color:var(--cd-bg)}

/* ── CHIPS DE FILTRO (catálogo) ── */
.cd-chip{
  padding:8px 16px; border-radius:9999px; font-size:12px; font-family:'DM Sans',sans-serif;
  font-weight:500; color:rgba(255,255,255,0.75); cursor:pointer; white-space:nowrap;
  transition:background .2s, color .2s;
}
.cd-chip-active{background:var(--cd-acento);color:var(--cd-bg)}

/* ── GATE (bloqueo por login) ── */
.cd-gate-box{max-width:440px;margin:0 auto;text-align:center;padding:48px 32px}

/* ── SCRIM DE LEGIBILIDAD — sobre video de fondo, detrás del texto del hero ──
   Oscurece de forma pareja donde va el texto (no solo arriba/abajo), para
   que el contraste no dependa de qué tan clara sea esa parte del video. */
.cd-hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,12,7,0.55) 0%, rgba(10,12,7,0.5) 20%, rgba(10,12,7,0.58) 50%, rgba(10,12,7,0.68) 75%, rgba(10,12,7,0.92) 100%),
    radial-gradient(65% 55% at 50% 34%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 72%);
}

/* ── FOOTER — links con transición de color al hover ── */
.cd-footer-link{transition:color .2s}
.cd-footer-link:hover{color:var(--cd-acento) !important}

/* ── MENÚ HAMBURGUESA MÓVIL — liquid glass, pantalla completa ── */
.cd-mobile-menu-backdrop{
  position:fixed; inset:0; z-index:200;
  width:100vw; height:100vh; height:100dvh;
  background:var(--cd-bg);
  display:flex; align-items:stretch; justify-content:stretch;
  padding:0; margin:0;
}
.cd-mobile-menu-panel{
  position:relative;
  width:100%; height:100%; max-width:none !important;
  border-radius:0 !important;
  padding:100px 32px 48px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  overflow-y:auto;
  box-sizing:border-box;
  /* Fondo sólido (no "glass") a propósito: en un panel de pantalla
     completa animado con scale/opacity, el backdrop-filter de vidrio
     puede fallar en algunos navegadores móviles (Safari sobre todo) y
     dejar ver el texto de fondo — con un fondo opaco eso no puede
     pasar, sea cual sea el navegador. */
  background:var(--cd-bg) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.cd-mobile-menu-panel::before{display:none !important}
.cd-mobile-menu-panel::before{border-radius:0}
.cd-mobile-menu-link{
  display:block; width:100%; max-width:320px; text-align:center;
  font-size:24px; padding:14px 0;
  color:rgba(255,255,255,0.88);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:color .2s, letter-spacing .2s;
}
.cd-mobile-menu-link:last-child{border-bottom:none}
.cd-mobile-menu-link:hover{color:var(--cd-acento)}
.cd-mobile-menu-panel > .cd-btn-acento{width:100%; max-width:320px; padding:15px 0; margin-top:8px}

/* ── WIZARD DE PEDIDO — pasos, conector y gota "liquid glass" ── */
.cd-wizard-dots{display:flex; align-items:center; margin-bottom:28px}
.cd-wizard-dot{
  flex-shrink:0; width:28px; height:28px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-family:'DM Sans',sans-serif; font-weight:600;
  background:rgba(255,255,255,0.05); border:1px solid var(--cd-linea);
  color:var(--cd-texto-muted);
  transition:background .3s, border-color .3s, color .3s, transform .3s;
}
.cd-wizard-dot-active{
  background:var(--cd-acento); border-color:var(--cd-acento); color:var(--cd-bg);
  transform:scale(1.12);
  box-shadow:0 0 0 4px var(--cd-acento-soft);
}
.cd-wizard-dot-done{background:var(--cd-acento-soft); border-color:var(--cd-acento); color:var(--cd-acento)}
.cd-wizard-line{position:relative; flex:1; min-width:20px; height:2px; margin:0 6px; background:var(--cd-linea); border-radius:2px; overflow:visible}
.cd-wizard-line-fill{position:absolute; inset:0; width:0%; background:var(--cd-acento); border-radius:2px; transition:width .5s ease}
.cd-wizard-line-fill-on{width:100%}
.cd-wizard-drop{position:absolute; top:50%; transform:translate(-50%,-50%); color:var(--cd-acento); pointer-events:none; filter:drop-shadow(0 0 4px rgba(226,154,60,0.7))}

/* ══════════════════════════════════════════════════════════════
   LIQUID GLASS — variantes animadas nuevas (brillo, flote, pulso,
   progreso, orbes ambiente, FAB). Se suman a .liquid-glass y
   .liquid-glass-strong ya existentes; nunca las reemplazan.
   ══════════════════════════════════════════════════════════════ */

/* Brillo que recorre el vidrio — para chips/tarjetas destacadas
   (accesos rápidos, franja de confianza). */
.liquid-glass-shimmer{ position:relative; overflow:hidden }
.liquid-glass-shimmer::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 48%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.16) 52%, transparent 70%);
  background-size:220% 100%; background-position:145% 0;
  animation:cd-shimmer-recorre 5.5s ease-in-out infinite;
}
@keyframes cd-shimmer-recorre{ 0%,55%{background-position:145% 0} 100%{background-position:-45% 0} }

/* Flote suave — para íconos y orbes decorativos */
.liquid-glass-float{ animation:cd-flota 6s ease-in-out infinite }
.liquid-glass-float-lento{ animation:cd-flota 9s ease-in-out infinite }
@keyframes cd-flota{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* Anillo pulsante — estado "en curso" (ej. pedido en camino) */
.cd-glass-ring{ position:relative }
.cd-glass-ring::after{
  content:""; position:absolute; inset:-4px; z-index:-1; border-radius:inherit;
  border:1.5px solid var(--cd-acento); opacity:0.55;
  animation:cd-anillo-pulso 2.2s ease-out infinite;
}
@keyframes cd-anillo-pulso{ 0%{transform:scale(0.92); opacity:0.6} 80%{transform:scale(1.14); opacity:0} 100%{opacity:0} }

/* Levantar + brillo al pasar el mouse — tarjetas clickeables */
.cd-glass-tilt{ transition:transform .25s ease, box-shadow .25s ease }
.cd-glass-tilt:hover{ transform:translateY(-4px) scale(1.012); box-shadow:0 18px 40px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.14) }
@media(prefers-reduced-motion:reduce){
  .liquid-glass-shimmer::after,.liquid-glass-float,.liquid-glass-float-lento,.cd-glass-ring::after{ animation:none }
  .cd-glass-tilt:hover{ transform:none }
}

/* Barra de progreso vidriada — seguimiento de estado del pedido */
.cd-glass-progress{ position:relative; height:6px; border-radius:9999px; background:rgba(255,255,255,0.08); overflow:hidden }
.cd-glass-progress-fill{
  position:absolute; inset:0 auto 0 0; height:100%; border-radius:9999px;
  background:linear-gradient(90deg, var(--cd-acento), #ffd18a, var(--cd-acento));
  background-size:200% 100%; animation:cd-progress-brillo 2.6s linear infinite;
  transition:width .6s ease;
}
@keyframes cd-progress-brillo{ 0%{background-position:0% 0} 100%{background-position:200% 0} }
@media(prefers-reduced-motion:reduce){ .cd-glass-progress-fill{ animation:none } }

/* Orbes ambiente — manchas de luz difusas de fondo, decorativas */
.cd-orb{ position:absolute; border-radius:9999px; filter:blur(60px); pointer-events:none; z-index:0; opacity:0.35 }
.cd-orb-acento{ background:var(--cd-acento) }

/* Botón flotante (FAB) — WhatsApp / volver arriba */
.cd-fab{
  position:fixed; z-index:60; width:54px; height:54px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none;
}
.cd-fab-wsp{ right:20px; bottom:20px; background:#25D366; box-shadow:0 8px 24px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.25) }
.cd-fab-top{ right:20px; bottom:84px }
@media(max-width:640px){ .cd-fab-wsp{ right:14px; bottom:14px; width:50px; height:50px } .cd-fab-top{ right:14px; bottom:74px; width:46px; height:46px } }

/* Insignias de estado del pedido (coinciden con el panel de admin) */
.cd-badge-estado{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:9999px; font-size:11px; font-weight:600; font-family:'DM Sans',sans-serif; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap }
.cd-badge-estado-dot{ width:7px; height:7px; border-radius:9999px; flex-shrink:0 }
.cd-badge-pendiente{ background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.75) }
.cd-badge-pendiente .cd-badge-estado-dot{ background:rgba(255,255,255,0.6) }
.cd-badge-en_camino{ background:var(--cd-acento-soft); color:var(--cd-acento) }
.cd-badge-en_camino .cd-badge-estado-dot{ background:var(--cd-acento) }
.cd-badge-entregado{ background:rgba(122,201,138,0.16); color:#8fd6a0 }
.cd-badge-entregado .cd-badge-estado-dot{ background:#7ac98a }

/* ── TARJETAS DE OPCIÓN — presentación / método de pago / producto ── */
.cd-choice-card{
  display:flex; align-items:center; gap:10px;
  padding:16px 18px; border-radius:1rem;
  color:rgba(255,255,255,0.85); font-size:14px; font-family:'DM Sans',sans-serif; font-weight:500;
  cursor:pointer; text-align:left; width:100%;
  transition:color .2s, transform .15s;
}
.cd-choice-card:hover{transform:translateY(-1px)}
.cd-choice-card-active{color:var(--cd-acento)}
.cd-choice-card-active::before{
  background:linear-gradient(180deg, var(--cd-acento) 0%, rgba(226,154,60,0.25) 40%, rgba(226,154,60,0.25) 60%, var(--cd-acento) 100%) !important;
}