.elementor-9638 .elementor-element.elementor-element-cba17ba{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-8bc7e13 *//* ==========================================================================
   16_Global_Footer_WhatsApp.css (Footer Global Negro Carbón & Oro Gamers)
   CDKeys Perú — Inspirado en PremiumCDKeys (#0C0D11 / #121317 / #E5A93C)
   ========================================================================== */

:root {
  --max-w: 1440px !important;
  --container-max-width: 1440px !important;
  --cdk-black-bg: #0C0D11 !important;
  --cdk-black-surface: #121317 !important;
  --cdk-black-card: #181920 !important;
  --cdk-black-border: rgba(255, 255, 255, 0.08) !important;
  --cdk-black-border-hover: rgba(255, 255, 255, 0.16) !important;
  --cdk-gold: #E5A93C !important;
  --cdk-gold-light: #F5B027 !important;
  --cdk-gold-hover: #D49520 !important;
  --cdk-gold-glow: rgba(229, 169, 60, 0.25) !important;
  --cdk-blue: #E5A93C !important;
  --cdk-blue-light: #F5B027 !important;
  --cdk-cyan: #06B6D4 !important;
  --cdk-emerald: #10B981 !important;
  --cdk-trustpilot: #00B67A !important;
  --cdk-text-main: #FFFFFF !important;
  --cdk-text-muted: #9CA3AF !important;
  --cdk-text-dim: #64748B !important;
}

/* --- FOOTER GLOBAL WRAPPER --- */
.main-footer {
  background-color: var(--cdk-black-bg) !important;
  color: var(--cdk-text-main) !important;
  border-top: 1px solid var(--cdk-black-border) !important;
  font-family: 'Roboto', 'Inter', system-ui, -apple-system, sans-serif !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ==========================================================================
   1. PRE-FOOTER TRUST BAR (4 PILARES DE CONVERSIÓN Y CONFIANZA PERÚ)
   ========================================================================== */
.footer-trust-bar {
  background-color: var(--cdk-black-surface) !important;
  border-bottom: 1px solid var(--cdk-black-border) !important;
  padding: 24px 0 !important;
  width: 100% !important;
}

.footer-trust-bar__inner {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  box-sizing: border-box !important;
}

.trust-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--cdk-black-border) !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
}

.trust-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(229, 169, 60, 0.45) !important;
  transform: translateY(-2px) !important;
}

.trust-item__icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: rgba(229, 169, 60, 0.12) !important;
  border: 1px solid rgba(229, 169, 60, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--cdk-gold-light) !important;
}

.trust-item__icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.trust-item__icon svg.trust-item__wa-icon,
.trust-item__icon--wa svg {
  fill: currentColor !important;
  stroke: none !important;
  stroke-width: 0 !important;
}

.trust-item__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.trust-item__title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
}

.trust-item__desc {
  font-size: 11.5px !important;
  color: var(--cdk-text-muted) !important;
  line-height: 1.3 !important;
}

/* ==========================================================================
   2. MAIN FOOTER CONTENT (4 COLUMNAS GEOMÉTRICAS EQUILIBRADAS)
   ========================================================================== */
.main-footer__body {
  padding: 56px 0 36px !important;
}

.main-footer__inner {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: grid !important;
  grid-template-columns: 1.35fr 0.95fr 1.05fr 1.15fr !important;
  gap: 40px !important;
  box-sizing: border-box !important;
}

/* --- COLUMNA 1: MARCA Y CONFIANZA --- */
.footer-col--brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.footer-logo {
  height: 38px !important;
  width: auto !important;
  max-width: 200px !important;
  display: block !important;
  filter: brightness(0) invert(1) !important;
  transition: opacity 0.2s ease !important;
}

.footer-logo:hover {
  opacity: 0.9 !important;
}

.footer-slogan {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--cdk-text-muted) !important;
  margin: 0 !important;
}

.footer-slogan strong {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* Badge Trustpilot Oficial */
.cdkeys-trust-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(0, 182, 122, 0.08) !important;
  border: 1px solid rgba(0, 182, 122, 0.25) !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  width: fit-content !important;
  transition: all 0.25s ease !important;
}

.cdkeys-trust-badge:hover {
  background: rgba(0, 182, 122, 0.15) !important;
  border-color: rgba(0, 182, 122, 0.5) !important;
  transform: translateY(-1px) !important;
}

.cdkeys-trust-badge__star-box {
  width: 22px !important;
  height: 22px !important;
  background: var(--cdk-trustpilot) !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.cdkeys-trust-badge__star-box svg {
  width: 14px !important;
  height: 14px !important;
  fill: #FFFFFF !important;
}

.cdkeys-trust-badge__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.cdkeys-trust-badge__stars {
  font-size: 12px !important;
  letter-spacing: 2px !important;
  color: var(--cdk-trustpilot) !important;
  line-height: 1 !important;
}

.cdkeys-trust-badge__score {
  font-size: 11.5px !important;
  color: #E2E8F0 !important;
  line-height: 1.2 !important;
}

.cdkeys-trust-badge__score strong {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Pills de garantía y ubicación */
.footer-meta-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.footer-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--cdk-black-border) !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  color: var(--cdk-text-muted) !important;
  font-weight: 500 !important;
}

.footer-pill svg {
  width: 12px !important;
  height: 12px !important;
  stroke: var(--cdk-gold-light) !important;
  fill: none !important;
  stroke-width: 2 !important;
}

/* --- TÍTULOS DE COLUMNAS (ORO PREMIUMCDKEYS) --- */
.footer-col h3,
.footer-col__title {
  display: block !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--cdk-gold) !important;
  margin: 0 0 20px 0 !important;
  padding-bottom: 12px !important;
  position: relative !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
}

.footer-col h3::after,
.footer-col__title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 32px !important;
  height: 2.5px !important;
  background: var(--cdk-gold) !important;
  border-radius: 2px !important;
}

/* --- LISTAS DE ENLACES (COL 2 Y 3) --- */
.footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.footer-col ul li a {
  font-size: 13px !important;
  color: var(--cdk-text-muted) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  line-height: 1.4 !important;
}

.footer-col ul li a::before {
  content: '›' !important;
  font-size: 14px !important;
  color: var(--cdk-text-dim) !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.footer-col ul li a:hover {
  color: var(--cdk-gold-light) !important;
  transform: translateX(3px) !important;
}

.footer-col ul li a:hover::before {
  color: var(--cdk-gold) !important;
}

/* Destacado Libro de Reclamaciones */
.footer-libro-card {
  margin-top: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  background: rgba(6, 182, 212, 0.08) !important;
  border: 1px solid rgba(6, 182, 212, 0.25) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.footer-libro-card:hover {
  background: rgba(6, 182, 212, 0.15) !important;
  border-color: rgba(6, 182, 212, 0.45) !important;
  transform: translateY(-1px) !important;
}

.footer-libro-card svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--cdk-cyan) !important;
  fill: none !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
}

.footer-libro-card span {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #E0F2FE !important;
}

/* --- COLUMNA 4: ATENCIÓN Y PAGOS --- */
.footer-contact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}

.footer-contact-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--cdk-black-border) !important;
  border-radius: 8px !important;
  color: var(--cdk-text-main) !important;
  text-decoration: none !important;
  font-size: 12.5px !important;
  transition: all 0.2s ease !important;
}

.footer-contact-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.footer-contact-btn--wa {
  border-color: rgba(37, 211, 102, 0.25) !important;
  background: rgba(37, 211, 102, 0.06) !important;
}

.footer-contact-btn--wa:hover {
  background: rgba(37, 211, 102, 0.12) !important;
  border-color: rgba(37, 211, 102, 0.5) !important;
}

.footer-contact-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.footer-contact-btn img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.trust-item__icon img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* Redes Sociales Vectoriales */
.footer-social-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}

.footer-social-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #cbd5e1 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.footer-social-icon svg {
  width: 17px !important;
  height: 17px !important;
  fill: currentColor !important;
}

.footer-social-icon:hover {
  color: #0C0D11 !important;
  background: var(--cdk-gold) !important;
  border-color: var(--cdk-gold-light) !important;
  transform: translateY(-2px) !important;
}

/* Badges de Medios de Pago Perú */
.footer-pay-header {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.footer-pay-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.pay-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--cdk-black-border) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #E2E8F0 !important;
  line-height: 1 !important;
}

.pay-chip svg {
  height: 14px !important;
  width: auto !important;
}

.pay-chip--yape {
  border-color: rgba(139, 92, 246, 0.3) !important;
  color: #C4B5FD !important;
}

.pay-chip--plin {
  border-color: rgba(6, 182, 212, 0.3) !important;
  color: #67E8F9 !important;
}

.pay-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.pay-dot--yape {
  background-color: #8B5CF6 !important;
  box-shadow: 0 0 6px rgba(139, 92, 246, 0.8) !important;
}

.pay-dot--plin {
  background-color: #06B6D4 !important;
  box-shadow: 0 0 6px rgba(6, 182, 212, 0.8) !important;
}

.mc-circles {
  display: inline-flex !important;
  width: 14px !important;
  height: 8px !important;
  position: relative !important;
}

.mc-circles::before,
.mc-circles::after {
  content: '' !important;
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  top: 0 !important;
}

.mc-circles::before {
  left: 0 !important;
  background-color: #EB001B !important;
}

.mc-circles::after {
  right: 0 !important;
  background-color: #F79E1B !important;
  opacity: 0.9 !important;
}

/* ==========================================================================
   3. BOTTOM BAR (COPYRIGHT, LEGAL & SSL ENCRYPTION)
   ========================================================================== */
.footer-bottom {
  border-top: 1px solid var(--cdk-black-border) !important;
  background-color: var(--cdk-black-surface) !important;
  padding: 20px 0 !important;
}

.footer-bottom__inner {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

.footer-legal-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
}

.footer-legal-nav a {
  font-size: 12px !important;
  color: var(--cdk-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.footer-legal-nav a:hover {
  color: #FFFFFF !important;
  text-decoration: underline !important;
}

.footer-legal-nav .footer-sep {
  color: var(--cdk-text-dim) !important;
  font-size: 11px !important;
}

.footer-copyright {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.footer-copyright p {
  font-size: 11.5px !important;
  color: #94A3B8 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.ssl-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  color: #A7F3D0 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.ssl-badge svg {
  width: 12px !important;
  height: 12px !important;
  stroke: var(--cdk-emerald) !important;
  fill: none !important;
  stroke-width: 2 !important;
}

/* ==========================================================================
   4. RESPONSIVE MOBILE (ACCORDIONS & ERGONOMÍA <= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .footer-trust-bar {
    padding: 16px 0 !important;
  }

  .footer-trust-bar__inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 14px !important;
  }

  .trust-item {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .trust-item__icon {
    width: 34px !important;
    height: 34px !important;
  }

  .trust-item__icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .trust-item__icon svg.trust-item__wa-icon,
  .trust-item__icon--wa svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    stroke: none !important;
  }

  .trust-item__title {
    font-size: 12px !important;
  }

  .trust-item__desc {
    display: none !important; /* Oculta descripción para mantener 1 sola fila táctil en móvil */
  }

  .main-footer__body {
    padding: 28px 0 20px !important;
  }

  .main-footer__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 16px !important;
  }

  .footer-col--brand {
    padding-bottom: 20px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid var(--cdk-black-border) !important;
  }

  .footer-col--links,
  .footer-col--legal,
  .footer-col--contact {
    border-bottom: 1px solid var(--cdk-black-border) !important;
    padding: 0 !important;
  }

  .footer-col--links .footer-col__title,
  .footer-col--legal .footer-col__title,
  .footer-col--contact .footer-col__title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    padding: 14px 0 !important;
    margin-bottom: 0 !important;
    font-size: 13.5px !important;
    user-select: none !important;
    min-height: 44px !important; /* Touch target accesible */
    box-sizing: border-box !important;
  }

  .footer-col--links .footer-col__title::after,
  .footer-col--legal .footer-col__title::after,
  .footer-col--contact .footer-col__title::after {
    display: none !important;
  }

  .footer-col--links .footer-col__title::before,
  .footer-col--legal .footer-col__title::before,
  .footer-col--contact .footer-col__title::before {
    content: '+' !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--cdk-gold) !important;
    order: 2 !important;
    transition: transform 0.2s ease !important;
  }

  .footer-col.is-open .footer-col__title::before {
    content: '−' !important;
    color: #FFFFFF !important;
  }

  .footer-col--links ul,
  .footer-col--legal ul,
  .footer-col--legal .footer-libro-card,
  .footer-col--contact .footer-contact-list,
  .footer-col--contact .footer-social-row,
  .footer-col--contact .footer-pay-header,
  .footer-col--contact .footer-pay-grid {
    display: none !important;
    padding-bottom: 16px !important;
  }

  .footer-col--links.is-open ul,
  .footer-col--legal.is-open ul,
  .footer-col--contact.is-open .footer-contact-list {
    display: flex !important;
    animation: cdkFooterFade 0.25s ease-out !important;
  }

  .footer-col--legal.is-open .footer-libro-card {
    display: inline-flex !important;
  }

  .footer-col--contact.is-open .footer-social-row,
  .footer-col--contact.is-open .footer-pay-grid {
    display: flex !important;
  }

  .footer-col--contact.is-open .footer-pay-header {
    display: block !important;
  }

  .footer-bottom__inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }

  .footer-legal-nav {
    justify-content: center !important;
    gap: 10px !important;
  }

  .footer-copyright {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

@keyframes cdkFooterFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   5. WIDGET FLOTANTE WHATSAPP V2 — MINIMALISTA & CLARO (LIGHT THEME)
   Tipografía grande y legible, diseño limpio sin ruido visual.
   ========================================================================== */
.cdk-wa-widget {
  position: fixed !important;
  bottom: 125px !important;
  right: 24px !important;
  z-index: 99998 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

.cdk-wa-panel {
  width: 380px !important;
  max-width: calc(100vw - 32px) !important;
  background: #FFFFFF !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18), 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #E2E8F0 !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  display: none !important;
  flex-direction: column !important;
  animation: waSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cdk-wa-widget.wa-is-open .cdk-wa-panel {
  display: flex !important;
  flex-direction: column !important;
}

@keyframes waSlideUp {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header WhatsApp Oficial Limpio */
.cdk-wa-panel__header {
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.cdk-wa-panel__brand-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.cdk-wa-panel__brand-badge {
  background: #040508 !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}
.cdk-wa-panel__brand-badge img {
  height: 20px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
  display: block !important;
}

.cdk-wa-panel__header-text strong {
  display: block !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #FFFFFF !important;
}

.cdk-wa-panel__status-sub {
  font-size: 12px !important;
  color: #A7F3D0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 2px !important;
}
.cdk-wa-panel__status-sub::before {
  content: '' !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  box-shadow: 0 0 8px #25D366 !important;
}

.cdk-wa-panel__close {
  background: rgba(255, 255, 255, 0.16) !important;
  border: none !important;
  color: #FFFFFF !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  transition: background 0.2s, transform 0.2s !important;
}
.cdk-wa-panel__close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: rotate(90deg) !important;
}

/* Body */
.cdk-wa-panel__body {
  padding: 20px !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
  min-height: 280px !important;
  box-sizing: border-box !important;
}

/* Vistas Step 1 vs Step 2 */
.cdk-wa-step {
  display: none !important;
  flex-direction: column !important;
  gap: 14px !important;
  animation: waFadeIn 0.22s ease-out forwards !important;
}
.cdk-wa-step.is-active {
  display: flex !important;
}

@keyframes waFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Título Step 1 (Sin subtítulos redundantes) */
.cdk-wa-heading {
  padding-bottom: 2px !important;
}
.cdk-wa-heading h3,
.cdk-wa-heading-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  display: block !important;
}

/* Tarjetas Minimalistas de Opción (Step 1 - Sin subtítulos, solo título) */
.cdk-wa-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}
.cdk-wa-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Opción 1: Directo 1-Tap WhatsApp */
.cdk-wa-card--direct {
  background: #F0FDF4 !important;
  border-color: #86EFAC !important;
}
.cdk-wa-card--direct:hover {
  border-color: #22C55E !important;
  box-shadow: 0 8px 22px rgba(34, 197, 94, 0.16) !important;
}

/* Opción 2: Formulario WhatsApp */
.cdk-wa-card--form {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}
.cdk-wa-card--form:hover {
  border-color: #86EFAC !important;
  background: #F0FDF4 !important;
}

.cdk-wa-card__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.cdk-wa-card__icon--wa {
  background: #25D366 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35) !important;
}
.cdk-wa-card__icon--form {
  background: #DCFCE7 !important;
  border: 1.5px solid #86EFAC !important;
  color: #15803D !important;
}

.cdk-wa-card__title {
  flex: 1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.3 !important;
}

.cdk-wa-card__arrow {
  color: #94A3B8 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  transition: transform 0.2s, color 0.2s !important;
}
.cdk-wa-card:hover .cdk-wa-card__arrow {
  color: #15803D !important;
  transform: translateX(4px) !important;
}

/* Footnote de Confianza */
.cdk-wa-footnote {
  text-align: center !important;
  padding-top: 4px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  line-height: 1.4 !important;
}

/* ================= STEP 2: ASISTENCIA GUIADA ================= */
.cdk-wa-nav-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
.cdk-wa-back-btn {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s !important;
}
.cdk-wa-back-btn:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}
.cdk-wa-nav-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

/* Pestañas Segmented Control */
.cdk-wa-tabs {
  display: flex !important;
  background: #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 3px !important;
  gap: 4px !important;
}
.cdk-wa-tab {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: #475569 !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-family: inherit !important;
}
.cdk-wa-tab.is-active {
  background: #FFFFFF !important;
  color: #0F172A !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* Vistas */
.cdk-wa-view {
  display: none !important;
  flex-direction: column !important;
  gap: 13px !important;
}
.cdk-wa-view.is-active {
  display: flex !important;
}

.cdk-wa-form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.cdk-wa-label-sm {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

/* Input del Formulario */
.cdk-wa-input {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  outline: none !important;
  font-family: inherit !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.cdk-wa-input:focus {
  border-color: #22C55E !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
}
.cdk-wa-input::placeholder {
  color: #94A3B8 !important;
}


/* Selector Dinámico de Sistema */
.cdk-wa-pills-row {
  display: flex !important;
  gap: 8px !important;
}
.cdk-wa-pills-row.is-hidden {
  display: none !important;
}
.cdk-wa-pill-btn {
  flex: 1 !important;
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 9px !important;
  padding: 8px 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-family: inherit !important;
}
.cdk-wa-pill-btn:hover {
  border-color: #86EFAC !important;
  background: #F0FDF4 !important;
}
.cdk-wa-pill-btn.is-active {
  background: #F0FDF4 !important;
  border-color: #22C55E !important;
  color: #15803D !important;
  font-weight: 700 !important;
}

/* Bloque exclusivo cuando es Windows */
.cdk-wa-pill-locked {
  display: none !important;
  background: #F1F5F9 !important;
  border: 1.5px dashed #94A3B8 !important;
  border-radius: 9px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.cdk-wa-pill-locked.is-visible {
  display: flex !important;
}

/* Botón Principal Submit */
.cdk-wa-submit-btn {
  background: linear-gradient(135deg, #25D366 0%, #16A34A 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  padding: 13px 18px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35) !important;
  margin-top: 4px !important;
  transition: all 0.2s !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}
.cdk-wa-submit-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.45) !important;
}
.cdk-wa-submit-btn--support {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}

/* Chips de Soporte */
.cdk-wa-reasons {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.cdk-wa-reason {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #334155 !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-family: inherit !important;
}
.cdk-wa-reason:hover {
  border-color: #38BDF8 !important;
  background: #F0F9FF !important;
}
.cdk-wa-reason.is-active {
  background: #E0F2FE !important;
  border-color: #0284C7 !important;
  color: #0369A1 !important;
  font-weight: 700 !important;
}

/* Botón Flotante Pulsante (Inicio: Burbuja Circular -> Expande a Píldora) */
.cdk-wa-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #25D366 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 50% !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  padding: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4) !important;
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  overflow: hidden !important;
}
.cdk-wa-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.5) !important;
}

/* Estado Expandido con Texto Completo */
.cdk-wa-btn.is-expanded,
.cdk-wa-btn:hover {
  width: auto !important;
  border-radius: 999px !important;
  padding: 0 20px 0 16px !important;
}

.cdk-wa-aura {
  position: absolute !important;
  top: -6px !important;
  left: -6px !important;
  right: -6px !important;
  bottom: -6px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(37, 211, 102, 0.5) !important;
  animation: cdkAuraPulse 2.4s infinite cubic-bezier(0.25, 0.8, 0.5, 1) !important;
  pointer-events: none !important;
}
@keyframes cdkAuraPulse {
  0% { transform: scale(0.92); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(0.92); opacity: 0; }
}
.cdk-wa-btn__icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
}
.cdk-wa-btn__text {
  color: #FFFFFF !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  max-width: 0 !important;
  opacity: 0 !important;
  margin-left: 0 !important;
  overflow: hidden !important;
  transition: max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, margin-left 0.35s ease !important;
}
.cdk-wa-btn.is-expanded .cdk-wa-btn__text,
.cdk-wa-btn:hover .cdk-wa-btn__text {
  max-width: 220px !important;
  opacity: 1 !important;
  margin-left: 8px !important;
}
.cdk-wa-icon-close {
  display: none !important;
}
.cdk-wa-widget.wa-is-open .cdk-wa-icon-default {
  display: none !important;
}
.cdk-wa-widget.wa-is-open .cdk-wa-icon-close {
  display: block !important;
}
.cdk-wa-widget.wa-is-open .cdk-wa-aura {
  display: none !important;
}

@media (max-width: 768px) {
  .cdk-wa-widget {
    bottom: 125px !important;
    right: 16px !important;
  }
  .cdk-wa-panel {
    width: calc(100vw - 32px) !important;
    right: 0 !important;
  }
}/* End custom CSS */