/**
 * Dapta Lead Magnet Widget Styles
 * 
 * ALL styles are scoped to .dapta-lead-magnet-widget to prevent
 * conflicts with WordPress themes and Elementor.
 * 
 * NEVER use global selectors like *, body, :root, or generic element selectors.
 */

/* ===========================================
   WIDGET CONTAINER - All styles scoped here
   =========================================== */

.dapta-lead-magnet-widget {
  /* CSS Variables scoped to widget */
  --dlm-bg-start: #050507;
  --dlm-bg-mid: #110b1c;
  --dlm-bg-end: #060608;
  --dlm-card-bg: linear-gradient(135deg, rgba(37, 25, 58, 0.98), rgba(10, 13, 28, 0.92));
  --dlm-accent: #BDE83A;
  --dlm-text-primary: #f7f7fb;
  --dlm-text-secondary: #c3c5d9;
  --dlm-text-muted: #8d8ea3;
  --dlm-error: #ff6b6b;
  --dlm-radius-lg: 28px;
  --dlm-field-border: #a679ff;
  
  /* Elementor integration */
  width: 100% !important; /* Forzar 100% del contenedor Elementor */
  max-width: none !important; /* Sin restricciones de ancho */
  
  font-family: 'Inter', 'Segoe UI', sans-serif;
  box-sizing: border-box;
  color: var(--dlm-text-primary);
  line-height: 1.5;
}

.dapta-lead-magnet-widget *,
.dapta-lead-magnet-widget *::before,
.dapta-lead-magnet-widget *::after {
  box-sizing: border-box;
}

/* ===========================================
   LAYOUT PRINCIPAL - Responsive Grid
   =========================================== */

.dapta-lead-magnet-widget .page {
  width: 100% !important;
  max-width: 100% !important;
  display: grid;
  /* Responsive grid: auto-fit columns based on container width */
  grid-template-columns: 1fr minmax(min(345px, 100%), 345px);
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ===========================================
   HERO CARD - Contenedor principal izquierdo
   =========================================== */

.dapta-lead-magnet-widget .hero-card {
  position: relative;
  overflow: hidden; /* Changed from visible to prevent overflow */
  background: #1a1a1c;
  border-radius: var(--dlm-radius-lg);
  border: none;
  /* Responsive padding using clamp() */
  padding: clamp(24px, 4vw, 40px);
  padding-right: clamp(10px, 2vw, 20px);
  padding-bottom: clamp(40px, 6vw, 60px);
  display: grid;
  /* Responsive inner grid */
  grid-template-columns: minmax(min(280px, 100%), 1fr) minmax(0, 0.8fr);
  align-items: stretch;
  min-height: clamp(380px, 50vh, 440px);
  gap: clamp(16px, 2vw, 24px);
}

/* Stroke con gradiente dinámico */
.dapta-lead-magnet-widget .hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--dlm-radius-lg);
  padding: 1px;
  background: linear-gradient(
    270deg,
    rgba(153, 153, 153, 0.1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* Elipse con gradiente verde-morado */
.dapta-lead-magnet-widget .hero-card::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-75deg);
  width: 460px;
  height: 200px;
  background: linear-gradient(90deg, #BDE83A 0%, #8033F4 100%);
  opacity: 0.6;
  filter: blur(80px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* ===========================================
   FORMULARIO - Columna izquierda del hero
   =========================================== */

.dapta-lead-magnet-widget .form-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 2;
  justify-content: flex-start;
  align-self: stretch;
}

.dapta-lead-magnet-widget .form-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dapta-lead-magnet-widget .hero-title {
  margin: 0;
  font-size: clamp(1.8rem, 2.64vw, 2.28rem);
  line-height: 1.25;
  color: var(--dlm-accent);
  font-weight: 700;
  letter-spacing: 0.2px;
  max-width: 380px;
}

.dapta-lead-magnet-widget .eyebrow {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.dapta-lead-magnet-widget .form-description {
  margin: 0;
  color: var(--dlm-text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.dapta-lead-magnet-widget .input-group {
  display: flex;
  flex-direction: column;
}

.dapta-lead-magnet-widget .label-text {
  font-size: 0.92rem;
  color: var(--dlm-text-secondary);
  margin-bottom: 8px;
}

.dapta-lead-magnet-widget .required {
  color: var(--dlm-accent);
  margin-left: 4px;
}

.dapta-lead-magnet-widget .phone-row,
.dapta-lead-magnet-widget .input-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.dapta-lead-magnet-widget .input-row select,
.dapta-lead-magnet-widget .area-code-select {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 90px !important;
  max-width: 120px !important;
}

.dapta-lead-magnet-widget .input-row input[type="tel"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.dapta-lead-magnet-widget #formPanel {
  display: flex;
  width: 100%;
}

.dapta-lead-magnet-widget .panel {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dapta-lead-magnet-widget .hidden-panel {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.dapta-lead-magnet-widget #formPanel form.form-grid,
.dapta-lead-magnet-widget #callPanel .form-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dapta-lead-magnet-widget #formPanel .fields,
.dapta-lead-magnet-widget #callPanel .fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dapta-lead-magnet-widget .cta-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 20px !important;
}

.dapta-lead-magnet-widget .form-group {
  margin-bottom: 16px !important;
}

.dapta-lead-magnet-widget .form-group:last-of-type {
  margin-bottom: 0 !important;
}

/* ===========================================
   FORM INPUTS - Scoped to widget
   =========================================== */

.dapta-lead-magnet-widget select,
.dapta-lead-magnet-widget input[type="text"],
.dapta-lead-magnet-widget input[type="email"],
.dapta-lead-magnet-widget input[type="tel"] {
  background-color: transparent !important;
  border-radius: 8px !important;
  border: 1px solid #A679FF !important;
  box-shadow: none !important;
  color: var(--dlm-text-primary) !important;
  padding: 10px 16px !important;
  font-size: 0.95rem !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  width: 100% !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  height: auto !important;
  margin: 0 !important;
}

.dapta-lead-magnet-widget input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

.dapta-lead-magnet-widget select {
  width: 120px !important;
  min-width: 110px !important;
  appearance: none !important;
  position: relative !important;
  cursor: pointer !important;
  /* Agregar espacio para el icono */
  padding-right: 30px !important;
  /* Icono de dropdown morado */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23A679FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
}

.dapta-lead-magnet-widget select:focus,
.dapta-lead-magnet-widget input:focus {
  outline: none !important;
  border-color: #A679FF !important;
  box-shadow: 0 0 0 2px rgba(166, 121, 255, 0.3) !important;
}

.dapta-lead-magnet-widget select option {
  background: #08080f !important;
  color: var(--dlm-text-primary) !important;
}

/* ===========================================
   CTA BUTTONS
   =========================================== */

.dapta-lead-magnet-widget .cta {
  background: var(--dlm-accent) !important;
  color: #141408 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 18px !important;
  height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  width: 100% !important;
  letter-spacing: 0.4px !important;
  margin: 0 !important;
  text-decoration: none !important;
  font-family: inherit !important;
  line-height: 1 !important;
}

.dapta-lead-magnet-widget .cta:hover {
  background: var(--dlm-accent) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 18px 35px rgba(189, 232, 58, 0.18) !important;
}

.dapta-lead-magnet-widget .cta:active {
  transform: translateY(0) !important;
}

.dapta-lead-magnet-widget .cta-primary {
  background: var(--dlm-accent) !important;
  color: #141408 !important;
  text-decoration: none !important;
}

.dapta-lead-magnet-widget .cta-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

.dapta-lead-magnet-widget .cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

.dapta-lead-magnet-widget .call-ended-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 12px;
  max-width: 300px;
  margin-top: 24px;
}

.dapta-lead-magnet-widget .try-other-text {
  text-align: center;
  font-size: 0.85rem;
  color: var(--dlm-text-muted);
  margin: 8px 0 0;
}

.dapta-lead-magnet-widget .secondary {
  margin-top: 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: var(--dlm-text-primary);
  padding: 14px 18px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  width: 100%;
}

.dapta-lead-magnet-widget .secondary:hover {
  border-color: var(--dlm-accent);
  color: var(--dlm-accent);
}

/* ===========================================
   CALL PANEL - Estados durante la llamada
   =========================================== */

.dapta-lead-magnet-widget .call-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
}

.dapta-lead-magnet-widget .call-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.dapta-lead-magnet-widget .call-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 12px;
  max-width: 300px;
  margin-top: 24px;
}

.dapta-lead-magnet-widget .status {
  margin: 0 0 16px 0; /* Reduced bottom margin */
  font-size: 1rem;
  color: var(--dlm-text-secondary);
  text-align: left;
  min-height: 24px;
}

.dapta-lead-magnet-widget .status[data-type='connecting'] {
  color: var(--dlm-accent);
  animation: dlm-statusPulse 1.5s ease-in-out infinite;
}

.dapta-lead-magnet-widget .status[data-type='active'] {
  color: #BDE83A;
}

.dapta-lead-magnet-widget .status[data-type='error'] {
  color: var(--dlm-error);
}

@keyframes dlm-statusPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.dapta-lead-magnet-widget .cta-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: white !important;
}

.dapta-lead-magnet-widget .cta-danger:hover {
  background: linear-gradient(135deg, #f87171, #ef4444) !important;
  box-shadow: 0 18px 35px rgba(239, 68, 68, 0.25) !important;
}

.dapta-lead-magnet-widget .error {
  color: var(--dlm-error);
  font-size: 0.8rem;
  margin: 6px 0 0;
  display: none;
}

/* ===========================================
   DAPTI - Columna derecha del hero (agente)
   =========================================== */

.dapta-lead-magnet-widget .visual-column {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Alineado a la derecha */
  position: relative;
  align-self: center;
  margin-right: 0; /* Removed negative margin to prevent overflow */
  overflow: visible;
  max-width: 100%; /* Prevent overflow */
}

.dapta-lead-magnet-widget .agent-wrapper {
  --orb-size: 100%;
  position: relative;
  /* Responsive size using clamp() for fluid scaling */
  width: clamp(280px, 30vw, 361px);
  height: clamp(280px, 30vw, 361px);
  max-width: 100%; /* Prevent overflow */
  aspect-ratio: 1 / 1; /* Maintain square shape */
  overflow: visible; /* Permitir que Dapti sobresalga */
}

.dapta-lead-magnet-widget .agent-circle {
  position: absolute;
  width: var(--orb-size);
  aspect-ratio: 1;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #BDE83A;
  z-index: 0;
  box-shadow: none;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  overflow: hidden;
}

.dapta-lead-magnet-widget .agent-wrapper::before {
  content: '';
  position: absolute;
  width: var(--orb-size);
  aspect-ratio: 1;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    rgba(189, 232, 58, 0) 0%,
    rgba(189, 232, 58, 1) 55%,
    rgba(144, 89, 252, 1) 100%
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 0%,
    transparent 85%,
    black 85%,
    black 100%
  );
  mask: radial-gradient(
    circle,
    transparent 0%,
    transparent 85%,
    black 85%,
    black 100%
  );
  pointer-events: none;
  z-index: 1;
}

.dapta-lead-magnet-widget .agent-illustration {
  width: 95%;
  height: auto;
  object-fit: contain;
  /* object-position: calc(50% + 15px) center; */
  position: absolute;
  bottom: -3px;
  left: 50%;
  /* Slightly responsive scale based on container */
  transform: translateX(-50%) scaleX(clamp(1.02, 1.06, 1.08));
  z-index: 2;
}

/* ===========================================
   ORB STYLES - Registrar propiedad CSS
   =========================================== */
@property --orb-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ===========================================
   OCULTAR TODOS LOS EFECTOS POR DEFECTO
   =========================================== */
.dapta-lead-magnet-widget .orb-effect {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.dapta-lead-magnet-widget .orb-ring {
  display: none;
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.dapta-lead-magnet-widget .orb-particles,
.dapta-lead-magnet-widget .orb-plasma {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ===========================================
   ESTILO 3: ELECTRIC (Default style for WP)
   =========================================== */
.dapta-lead-magnet-widget .agent-circle {
  --audio-intensity: 1;
  --speaking: 0;
}

/* Pseudo-elements for electric effect */
.dapta-lead-magnet-widget .agent-circle::before {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(189, 232, 58, 0.9) 5deg,
    rgba(166, 121, 255, 0.6) 10deg,
    transparent 15deg,
    transparent 90deg,
    rgba(166, 121, 255, 0.9) 95deg,
    rgba(189, 232, 58, 0.6) 100deg,
    transparent 105deg,
    transparent 180deg,
    rgba(189, 232, 58, 0.8) 185deg,
    transparent 195deg,
    transparent 270deg,
    rgba(166, 121, 255, 0.8) 275deg,
    transparent 285deg,
    transparent 360deg
  );
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.dapta-lead-magnet-widget .agent-circle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 30px rgba(189, 232, 58, 0.2);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.dapta-lead-magnet-widget .agent-circle.active::before {
  opacity: 0.8;
  animation: dlm-electricSpark 1.5s linear infinite;
}

.dapta-lead-magnet-widget .agent-circle.active::after {
  opacity: 1;
}

@keyframes dlm-electricSpark {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.02); }
  50% { transform: rotate(180deg) scale(0.98); }
  75% { transform: rotate(270deg) scale(1.01); }
  100% { transform: rotate(360deg) scale(1); }
}

.dapta-lead-magnet-widget .agent-circle .orb-ring {
  display: block;
  background: transparent;
  border: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dapta-lead-magnet-widget .agent-circle .orb-ring-1 {
  inset: -12%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #BDE83A 8deg,
    rgba(189, 232, 58, 0.8) 12deg,
    transparent 18deg,
    transparent 50deg,
    #a679ff 58deg,
    rgba(166, 121, 255, 0.8) 62deg,
    transparent 68deg,
    transparent 100deg,
    #BDE83A 108deg,
    transparent 118deg,
    transparent 150deg,
    #a679ff 158deg,
    transparent 168deg,
    transparent 200deg,
    #BDE83A 208deg,
    rgba(189, 232, 58, 0.6) 215deg,
    transparent 225deg,
    transparent 260deg,
    #a679ff 268deg,
    transparent 278deg,
    transparent 310deg,
    #BDE83A 318deg,
    transparent 328deg,
    transparent 360deg
  );
  filter: blur(2px);
}

.dapta-lead-magnet-widget .agent-circle .orb-ring-2 {
  inset: -22%;
  background: conic-gradient(
    from 30deg,
    transparent 0deg,
    rgba(189, 232, 58, 0.7) 12deg,
    #BDE83A 18deg,
    transparent 28deg,
    transparent 75deg,
    rgba(166, 121, 255, 0.7) 87deg,
    #a679ff 93deg,
    transparent 103deg,
    transparent 150deg,
    rgba(189, 232, 58, 0.7) 162deg,
    transparent 175deg,
    transparent 225deg,
    rgba(166, 121, 255, 0.7) 237deg,
    transparent 250deg,
    transparent 300deg,
    rgba(189, 232, 58, 0.5) 315deg,
    transparent 330deg,
    transparent 360deg
  );
  filter: blur(4px);
}

.dapta-lead-magnet-widget .agent-circle .orb-ring-3 {
  inset: -35%;
  background: radial-gradient(
    circle,
    transparent 35%,
    rgba(189, 232, 58, 0.15) 45%,
    rgba(166, 121, 255, 0.12) 55%,
    rgba(189, 232, 58, 0.08) 65%,
    transparent 75%
  );
}

.dapta-lead-magnet-widget .agent-circle.active .orb-ring {
  opacity: 1;
}

.dapta-lead-magnet-widget .agent-circle.active .orb-ring-1 {
  animation: dlm-electricSpin 1.8s linear infinite;
}

.dapta-lead-magnet-widget .agent-circle.active .orb-ring-2 {
  animation: dlm-electricSpin 2.5s linear infinite reverse;
}

.dapta-lead-magnet-widget .agent-circle.active .orb-ring-3 {
  animation: dlm-electricPulse 0.8s ease-in-out infinite;
}

.dapta-lead-magnet-widget .agent-circle.active {
  box-shadow: 
    0 0 25px rgba(189, 232, 58, 0.9),
    0 0 50px rgba(166, 121, 255, 0.6),
    0 0 80px rgba(189, 232, 58, 0.4);
}

/* Speaking state */
.dapta-lead-magnet-widget .agent-circle.speaking .orb-ring-1 {
  animation: dlm-electricSpin 1.2s linear infinite;
  filter: blur(1px) brightness(1.5);
  inset: -18% !important;
}

.dapta-lead-magnet-widget .agent-circle.speaking .orb-ring-2 {
  animation: dlm-electricSpin 1.8s linear infinite reverse;
  filter: blur(2px) brightness(1.4);
  inset: -28% !important;
}

.dapta-lead-magnet-widget .agent-circle.speaking .orb-ring-3 {
  animation: dlm-electricPulseSpeaking 1s ease-in-out infinite;
  filter: brightness(1.3);
  inset: -40% !important;
  opacity: 0.8;
}

.dapta-lead-magnet-widget .agent-circle.speaking {
  box-shadow: 
    0 0 50px rgba(189, 232, 58, 1),
    0 0 100px rgba(166, 121, 255, 0.8);
  transform: translateX(-50%); /* Sin scale - mantiene radio fijo */
}

/* Listening state */
.dapta-lead-magnet-widget .agent-circle.listening .orb-ring-1 {
  animation: dlm-electricSpin 4s linear infinite;
  opacity: 0.5;
  filter: blur(3px);
}

.dapta-lead-magnet-widget .agent-circle.listening .orb-ring-2 {
  animation: dlm-electricSpin 5s linear infinite reverse;
  opacity: 0.4;
  filter: blur(4px);
}

.dapta-lead-magnet-widget .agent-circle.listening .orb-ring-3 {
  animation: dlm-electricPulse 2.5s ease-in-out infinite;
  opacity: 0.5;
}

.dapta-lead-magnet-widget .agent-circle.listening {
  box-shadow: 
    0 0 25px rgba(166, 121, 255, 0.6),
    0 0 50px rgba(166, 121, 255, 0.3);
  transform: translateX(-50%); /* Sin scale - mantiene radio fijo */
}

/* Idle state */
.dapta-lead-magnet-widget .agent-circle.active:not(.speaking):not(.listening) .orb-ring-1 {
  animation: dlm-electricSpin 8s linear infinite;
  opacity: 0.4;
  filter: blur(4px);
}

.dapta-lead-magnet-widget .agent-circle.active:not(.speaking):not(.listening) .orb-ring-2 {
  animation: dlm-electricSpin 10s linear infinite reverse;
  opacity: 0.3;
  filter: blur(5px);
}

.dapta-lead-magnet-widget .agent-circle.active:not(.speaking):not(.listening) .orb-ring-3 {
  animation: dlm-electricBreathing 4s ease-in-out infinite;
  opacity: 0.4;
}

.dapta-lead-magnet-widget .agent-circle.active:not(.speaking):not(.listening) {
  box-shadow: 
    0 0 20px rgba(189, 232, 58, 0.4),
    0 0 40px rgba(166, 121, 255, 0.2);
  /* Sin animación - solo glow estático muy suave (idle) */
}

@keyframes dlm-electricSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dlm-electricPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.6;
  }
  50% { 
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes dlm-electricBreathing {
  0%, 100% { 
    transform: translateX(-50%) scale(1);
  }
  50% { 
    transform: translateX(-50%) scale(1.01);
  }
}

@keyframes dlm-electricPulseSpeaking {
  0%, 100% { 
    transform: scale(1);
  opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

/* ===========================================
   SERVICES GRID - Tarjetas de casos de uso
   =========================================== */

.dapta-lead-magnet-widget .services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  align-self: stretch;
}

.dapta-lead-magnet-widget .service-card {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  box-shadow: none;
  text-align: center;
  color: #ffffff;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  outline: none;
  aspect-ratio: 1;
}

.dapta-lead-magnet-widget .service-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(189, 232, 58, 0.35);
}

.dapta-lead-magnet-widget .service-card-icon {
  width: 36px;
  height: 36px;
  display: inline-block;
  background-color: #ffffff;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.dapta-lead-magnet-widget .service-card:hover .service-card-icon {
  transform: translateY(-2px);
}

.dapta-lead-magnet-widget .service-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
}

.dapta-lead-magnet-widget .service-card.selected {
  border-color: var(--dlm-accent);
  background: rgba(255, 255, 255, 0.08);
}

.dapta-lead-magnet-widget .service-card.selected .service-card-icon {
  background-color: var(--dlm-accent);
}

.dapta-lead-magnet-widget .service-card.selected span {
  color: var(--dlm-accent);
}

.dapta-lead-magnet-widget .service-card span {
  font-size: 1rem;
}

/* Icon masks - using plugin URL */
.dapta-lead-magnet-widget .service-card[data-icon="appointment"] .service-card-icon {
  mask-image: var(--icon-appointment);
  -webkit-mask-image: var(--icon-appointment);
}

.dapta-lead-magnet-widget .service-card[data-icon="receptionist"] .service-card-icon {
  mask-image: var(--icon-receptionist);
  -webkit-mask-image: var(--icon-receptionist);
}

.dapta-lead-magnet-widget .service-card[data-icon="lead"] .service-card-icon {
  mask-image: var(--icon-lead);
  -webkit-mask-image: var(--icon-lead);
}

.dapta-lead-magnet-widget .service-card[data-icon="customer"] .service-card-icon {
  mask-image: var(--icon-customer);
  -webkit-mask-image: var(--icon-customer);
}

.dapta-lead-magnet-widget .service-card[data-icon="client"] .service-card-icon {
  mask-image: var(--icon-client);
  -webkit-mask-image: var(--icon-client);
}

.dapta-lead-magnet-widget .service-card[data-icon="outbound"] .service-card-icon {
  mask-image: var(--icon-outbound);
  -webkit-mask-image: var(--icon-outbound);
}

/* ===========================================
   RESPONSIVE - Tablet (< 1024px)
   =========================================== */

@media (max-width: 1024px) {
  .dapta-lead-magnet-widget .page {
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 24px);
    max-width: 100%; /* Remove fixed max-width */
  }

  .dapta-lead-magnet-widget .hero-card {
    grid-template-columns: 1fr 1fr;
    min-height: auto;
    padding: clamp(24px, 4vw, 32px);
  }

  .dapta-lead-magnet-widget .agent-wrapper {
    /* Responsive size instead of fixed */
    width: clamp(200px, 25vw, 269px);
    height: clamp(200px, 25vw, 269px);
  }

  .dapta-lead-magnet-widget .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(12px, 2vw, 16px);
  }

  .dapta-lead-magnet-widget .service-card {
    aspect-ratio: auto;
    padding: clamp(16px, 3vw, 20px);
  }
}

/* ===========================================
   RESPONSIVE - Mobile (< 768px)
   =========================================== */

@media (max-width: 768px) {
  .dapta-lead-magnet-widget .page {
    max-width: 100%;
    padding-right: 0; /* Sin compensación en mobile */
  }

  .dapta-lead-magnet-widget .hero-card {
    grid-template-columns: 1fr;
    padding: 24px;
    padding-right: 24px;
    gap: 24px;
  }

  .dapta-lead-magnet-widget .visual-column {
    order: -1;
    justify-content: center;
    align-items: center;
    margin-right: 0;
    width: 100%;
  }

  .dapta-lead-magnet-widget .agent-wrapper {
    width: 247px;
    height: 247px;
    margin: 0 auto;
  }

  .dapta-lead-magnet-widget .form-column {
    max-width: 100%;
    align-items: stretch;
  }

  .dapta-lead-magnet-widget .form-header {
    text-align: center;
  }

  .dapta-lead-magnet-widget .hero-title {
    max-width: 100%;
    text-align: center;
  }

  .dapta-lead-magnet-widget .form-grid {
    width: 100%;
  }

  .dapta-lead-magnet-widget .label-text {
    text-align: left;
    display: block;
  }

  .dapta-lead-magnet-widget .input-group {
    text-align: left;
  }

  .dapta-lead-magnet-widget .cta-wrapper {
    width: 100%;
  }

  .dapta-lead-magnet-widget .cta-wrapper .cta {
    width: 100%;
  }

  .dapta-lead-magnet-widget .call-panel,
  .dapta-lead-magnet-widget .call-content {
    text-align: center;
    align-items: center;
  }

  .dapta-lead-magnet-widget .status {
    text-align: center;
    width: 100%;
  }

  .dapta-lead-magnet-widget .call-ended-buttons {
    text-align: center;
    align-items: center;
    margin-top: 16px; /* Reduced spacing in mobile */
  }

  .dapta-lead-magnet-widget .call-buttons {
    justify-content: center;
    width: 100%;
    margin-top: 16px; /* Reduced spacing in mobile */
  }

  .dapta-lead-magnet-widget .call-buttons .cta {
    width: 100%;
  }

  .dapta-lead-magnet-widget .services-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
  }

  .dapta-lead-magnet-widget .service-card {
    aspect-ratio: auto;
    padding: 16px 12px;
  }
}

/* ===========================================
   RESPONSIVE - Small Mobile (< 480px)
   =========================================== */

@media (max-width: 480px) {
  .dapta-lead-magnet-widget .hero-card {
    padding: 20px;
  }

  .dapta-lead-magnet-widget .hero-title {
    font-size: 1.4rem;
  }

  .dapta-lead-magnet-widget .agent-wrapper {
    width: 202px;
    height: 202px;
  }

  .dapta-lead-magnet-widget .service-card-icon {
    width: 28px;
    height: 28px;
  }

  .dapta-lead-magnet-widget .service-card span {
    font-size: 0.75rem;
  }

  .dapta-lead-magnet-widget select {
    width: 85px !important;
    min-width: 85px !important;
  }
}

/* ===========================================
   UTILITY CLASSES - Hidden elements
   =========================================== */

.dapta-lead-magnet-widget [hidden],
.dapta-lead-magnet-widget .cta[hidden],
.dapta-lead-magnet-widget .call-buttons button[hidden],
.dapta-lead-magnet-widget #endCall[hidden],
.dapta-lead-magnet-widget #callEndedButtons[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}