/* === ECD · Efectos dinámicos v4 (Cursor Mini-Quemador + Marco Quemador + Llama Azul Corta) === */

/* Cursor de Mini-Quemador industrial (punta de llama azul en coordenada 4,4) */
html, body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 3 C4 9, 8 12, 12 10 C10 6, 7 4, 3 3 Z' fill='%230284C7'/%3E%3Cpath d='M4 4 C5 8, 8 10, 10 9 C9 6, 7 5, 4 4 Z' fill='%237DD3FC'/%3E%3Cg transform='rotate(45 16 16)'%3E%3Crect x='13' y='11' width='6' height='4' rx='1' fill='%2394A3B8' stroke='%230F172A' stroke-width='1'/%3E%3Crect x='12' y='15' width='8' height='11' rx='2' fill='%231E293B' stroke='%2338BDF8' stroke-width='1'/%3E%3Cline x1='14' y1='18' x2='18' y2='18' stroke='%2338BDF8' stroke-width='1.2'/%3E%3Cline x1='14' y1='21' x2='18' y2='21' stroke='%2394A3B8' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") 4 4, auto;
}

/* Cursor de Quemador avivado al posarse sobre enlaces y botones */
a, button, [role="button"], .flame-logo, label.checkbox, select {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M2 2 C3 11, 9 14, 14 11 C12 6, 8 3, 2 2 Z' fill='%2300B4D8'/%3E%3Cpath d='M3.5 3.5 C4.5 9, 8.5 11, 11.5 9.5 C10 6, 7.5 4.5, 3.5 3.5 Z' fill='%23E0F2FE'/%3E%3Cg transform='rotate(45 16 16)'%3E%3Crect x='13' y='11' width='6' height='4' rx='1' fill='%23E2E8F0' stroke='%230284C7' stroke-width='1'/%3E%3Crect x='12' y='15' width='8' height='11' rx='2' fill='%230F172A' stroke='%2338BDF8' stroke-width='1.3'/%3E%3Cline x1='14' y1='18' x2='18' y2='18' stroke='%237DD3FC' stroke-width='1.4'/%3E%3Cline x1='14' y1='21' x2='18' y2='21' stroke='%2338BDF8' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") 3 3, pointer !important;
}

#ecd-flame {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

#ecd-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--color-blue-deep), var(--color-accent-blue), var(--color-accent-yellow), var(--color-accent-red));
  z-index: 10000;
  pointer-events: none;
}

/* Efecto de quemador azul en tarjetas e ítems interactivos al posar el mouse */
.service-card, .case-card, .brand-cell {
  position: relative;
  overflow: hidden;
  will-change: transform;
  transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1), border-color .28s ease, box-shadow .28s ease;
}
.service-card:hover, .case-card:hover, .brand-cell:hover {
  border-color: #00B4D8 !important;
  box-shadow: 0 12px 28px -10px rgba(2, 132, 199, 0.38), 0 0 14px rgba(0, 180, 216, 0.28) !important;
}
.service-card::after, .case-card::after, .brand-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 180, 216, 0.16), rgba(2, 132, 199, 0.05) 48%, transparent 70%);
}
.service-card:hover::after, .case-card:hover::after, .brand-cell:hover::after {
  opacity: 1;
}

.btn-primary, .nav-cta {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .nav-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 42%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
}
.btn-primary:hover::after, .nav-cta:hover::after {
  animation: ecd-shine .65s ease;
}
@keyframes ecd-shine {
  to { left: 135%; }
}