/**/.dmNewParagraph[data-version] .text-align-left{text-align:left!important}.dmNewParagraph[data-version] .text-align-center{text-align:center!important}.dmNewParagraph[data-version] .text-align-right{text-align:right!important}
.dmNewParagraph[data-version] .text-align-justify{text-align:justify!important}.dmNewParagraph[data-version] .ql-indent-1{padding:0 1em;padding-inline-end:0;padding-inline-start:3em}.dmNewParagraph[data-version] .ql-indent-2{padding:0 2em;padding-inline-end:0;padding-inline-start:6em}
.dmNewParagraph[data-version] .ql-indent-3{padding:0 3em;padding-inline-end:0;padding-inline-start:9em}.dmNewParagraph[data-version] .ql-indent-4{padding:0 4em;padding-inline-end:0;padding-inline-start:12em}
.dmNewParagraph[data-version] .ql-indent-5{padding:0 5em;padding-inline-end:0;padding-inline-start:15em}.dmNewParagraph[data-version] .ql-indent-6{padding:0 6em;padding-inline-end:0;padding-inline-start:18em}
.dmNewParagraph[data-version] .ql-indent-7{padding:0 7em;padding-inline-end:0;padding-inline-start:21em}.dmNewParagraph[data-version] .ql-indent-8{padding:0 8em;padding-inline-end:0;padding-inline-start:24em}
.dmNewParagraph[data-version] .ql-indent-9{padding:0 9em;padding-inline-end:0;padding-inline-start:27em}.dmNewParagraph[data-version]{line-height:initial}.dmNewParagraph[data-version] [class*=size-]{width:auto!important;height:auto!important}
.dmNewParagraph[data-version] h1,.dmNewParagraph[data-version] h2,.dmNewParagraph[data-version] h3,.dmNewParagraph[data-version] h4,.dmNewParagraph[data-version] h5,.dmNewParagraph[data-version] h6,.dmNewParagraph[data-version] ol,.dmNewParagraph[data-version] p,.dmNewParagraph[data-version] ul{margin-top:0;margin-bottom:0}
.dmNewParagraph[data-version] ol,.dmNewParagraph[data-version] ul{padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.dmNewParagraph[data-version] ol>li,.dmNewParagraph[data-version] ul>li{list-style-type:none;text-indent:-1.5em;margin:0 1em;margin-inline-end:0;margin-inline-start:2em}
.dmNewParagraph[data-version] ol>li:before,.dmNewParagraph[data-version] ul>li:before{min-width:1em;display:inline-block;margin-right:.5em;margin-inline-start:0;margin-inline-end:.5em;text-align:right;text-align:end}
.dmNewParagraph[data-version] ul .ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-1}.dmNewParagraph[data-version] ul .ql-indent-1:before{font-weight:700;content:"○"}
.dmNewParagraph[data-version] ul .ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-2}.dmNewParagraph[data-version] ul .ql-indent-2:before,.dmNewParagraph[data-version] ul .ql-indent-3:before,.dmNewParagraph[data-version] ul .ql-indent-4:before,.dmNewParagraph[data-version] ul .ql-indent-5:before,.dmNewParagraph[data-version] ul .ql-indent-6:before,.dmNewParagraph[data-version] ul .ql-indent-7:before,.dmNewParagraph[data-version] ul .ql-indent-8:before,.dmNewParagraph[data-version] ul .ql-indent-9:before{font-weight:700;content:"■"}
.dmNewParagraph[data-version] ul .ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-3}.dmNewParagraph[data-version] ul .ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9;counter-increment:list-4}
.dmNewParagraph[data-version] ul .ql-indent-5{counter-reset:list-6 list-7 list-8 list-9;counter-increment:list-5}.dmNewParagraph[data-version] ul .ql-indent-6{counter-reset:list-7 list-8 list-9;counter-increment:list-6}
.dmNewParagraph[data-version] ul .ql-indent-7{counter-reset:list-8 list-9;counter-increment:list-7}.dmNewParagraph[data-version] ul .ql-indent-8{counter-reset:list-9;counter-increment:list-8}.dmNewParagraph[data-version] ul .ql-indent-9{counter-reset:list-10 list-9;counter-increment:list-9}
.dmNewParagraph[data-version] ul>li:before{font-weight:700;content:"•";font-family:Arial}.dmNewParagraph[data-version] ul.custom-list-1>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"○";transform:scale(1);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-2>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"★";transform:scale(.7);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-3>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"➞";transform:scale(.8);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-4>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"＋";transform:scale(.7);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-5>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"－";transform:scale(.7);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-6>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"✓";transform:scale(.8);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-7>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"✗";transform:scale(.8);transform-origin:center right}
.dmNewParagraph[data-version] ol .ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-1}.dmNewParagraph[data-version] ol .ql-indent-1:before{content:counter(list-1,lower-alpha) ". "}
.dmNewParagraph[data-version] ol .ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-2}.dmNewParagraph[data-version] ol .ql-indent-2:before{content:counter(list-2,lower-roman) ". "}
.dmNewParagraph[data-version] ol .ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-3}.dmNewParagraph[data-version] ol .ql-indent-3:before{content:counter(list-3,decimal) ". "}
.dmNewParagraph[data-version] ol .ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9;counter-increment:list-4}.dmNewParagraph[data-version] ol .ql-indent-4:before{content:counter(list-4,lower-alpha) ". "}
.dmNewParagraph[data-version] ol .ql-indent-5{counter-reset:list-6 list-7 list-8 list-9;counter-increment:list-5}.dmNewParagraph[data-version] ol .ql-indent-5:before{content:counter(list-5,lower-roman) ". "}
.dmNewParagraph[data-version] ol .ql-indent-6{counter-reset:list-7 list-8 list-9;counter-increment:list-6}.dmNewParagraph[data-version] ol .ql-indent-6:before{content:counter(list-6,decimal) ". "}
.dmNewParagraph[data-version] ol .ql-indent-7{counter-reset:list-8 list-9;counter-increment:list-7}.dmNewParagraph[data-version] ol .ql-indent-7:before{content:counter(list-7,lower-alpha) ". "}
.dmNewParagraph[data-version] ol .ql-indent-8{counter-reset:list-9;counter-increment:list-8}.dmNewParagraph[data-version] ol .ql-indent-8:before{content:counter(list-8,lower-roman) ". "}
.dmNewParagraph[data-version] ol .ql-indent-9{counter-reset:list-10 list-9;counter-increment:list-9}.dmNewParagraph[data-version] ol .ql-indent-9:before{content:counter(list-9,decimal) ". "}
.dmNewParagraph[data-version] ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.dmNewParagraph[data-version] ol li:before{content:counter(list-0,decimal) ". "}
.dmNewParagraph[data-version] a{vertical-align:initial}@media(min-width:768px) and (max-width:1024px){.dmNewParagraph[data-version] .t-text-align-left{text-align:left!important}.dmNewParagraph[data-version] .t-text-align-center{text-align:center!important}
.dmNewParagraph[data-version] .t-text-align-right{text-align:right!important}.dmNewParagraph[data-version] .t-text-align-justify{text-align:justify!important}}@media(max-width:767px){.dmRoot .dmNewParagraph[data-version] .m-text-align-left{text-align:left!important}
.dmRoot .dmNewParagraph[data-version] .m-text-align-center{text-align:center!important}.dmRoot .dmNewParagraph[data-version] .m-text-align-right{text-align:right!important}.dmRoot .dmNewParagraph[data-version] .m-text-align-justify{text-align:justify!important}
}.inlineBindingLink{color:inherit!important;text-decoration:inherit!important}/**/.imageWidget{position:relative}.imageWidget a,.imageWidget span.image-caption{font-style:italic;text-align:center}.imageWidget a[data-caption]::after,.imageWidget span[data-caption]::after{content:attr(data-caption);display:block;line-height:100%}
.imageWidget.with-caption a::after,.imageWidget.with-caption span.image-caption::after{margin-top:12px}.imageWidget img[width][height]{height:auto}[data-flex-site] #fcontainer .imageWidget:after,[data-flex-site] #flex-footer .imageWidget:after,[data-flex-site] #flex-header .imageWidget:after{content:none}
[data-flex-site] #fcontainer .imageWidget:before,[data-flex-site] #flex-footer .imageWidget:before,[data-flex-site] #flex-header .imageWidget:before{font-size:80px;transform:none}.imageWidget.hover img.hover-image,.imageWidget:hover img.hover-image{display:initial}
.imageWidget.hover.hasHover img:not(.hover-image),.imageWidget:hover.hasHover img:not(.hover-image){display:none!important}.imageWidget img.hover-image,.imageWidget img.logo-on-scroll{display:none}/**/.hamburgerButton{display:block;background-color:transparent;border:0;padding:0;margin:0}.hamburgerButton,.hamburgerButton svg{width:100%;height:100%}/**/#dm .dmDivider{display:block;min-height:2px;margin:0;border:0;color:gray;background:0}#dm .dmDividerWrapper{display:block;margin:10px 0}
/* Custom Widgets Styles */
.size_map {
    display: inline;
    height:100%;
}

.layout_2 {
    filter: grayscale(100%);
}
.layout_3 {
    filter: saturate(3);
}
.layout_4 {
    filter: brightness(95%) hue-rotate(160deg);
}
.layout_5 {
    filter: invert(75%);
}
.pmsc{
    width: 100%;
    height: 100%;
}

.noHeigth{
   height: 10px; 
}

.pmsc-wrapper,
.pmsc-container,
.pmsc-data,
.pmsc-left,
.pmsc-right
{
	width: 100%;
	height: 100%;
}

.widget-bb2a04{
    width:100%;
    height: 400px; 
}


@charset "UTF-8";
/* ── Base ────────────────────────────────────────────── */
.select_padding {
  padding: 0;
}

.wa-root {
  box-sizing: border-box;
}

/* ── Shared: title ───────────────────────────────────── */
.style-title {
  color: #000000;
  font-size: 24px;
  font-weight: bolder;
  text-align: left;
  padding: 0;
  margin: 0 0 10px 0;
}

/* ── Shared: text ────────────────────────────────────── */
.style-text {
  font-size: 16px;
  text-align: left;
  line-height: 1.4;
}

/* ── Shared: icon colors (base, overridden by design panel) ─ */
.wa-location-icon {
  color: #555555;
}

.wa-hours-icon {
  color: #555555;
  stroke: #555555;
}

.wa-compact-icon {
  color: #555555;
}

.wa-compact-clock-icon svg {
  color: #555555;
  stroke: #555555;
}

.wa-sidebar-icon {
  color: #555555;
}

.wa-card-icon {
  color: #555555;
}

/* ── Shared: icon svg wrapper ────────────────────────── */
.wa-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wa-icon-svg svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

/* ── Navigation buttons (Waze + Google Maps) ─────────── */
.wa-nav-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.wa-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
  border: none;
  white-space: nowrap;
}

.wa-nav-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.wa-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Google Maps button */
.wa-gmaps-btn {
  background-color: #ffffff;
  color: #3c4043;
  border: 1px solid #dadce0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.wa-gmaps-btn:hover {
  background-color: #f8f9fa;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Waze button */
.wa-waze-btn {
  background-color: #33CCFF;
  color: #1a1a2e;
  border: 1px solid #22b8e8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.wa-waze-btn:hover {
  background-color: #22b8e8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Compact nav buttons (smaller) */
.wa-compact-nav-btn {
  font-size: 12px;
  padding: 3px 10px;
  gap: 5px;
}

.wa-compact-nav-btn .wa-nav-icon {
  width: 15px;
  height: 15px;
}

/* Card nav buttons (full width) */
.wa-card-nav-btn {
  flex: 1;
  justify-content: center;
}

/* ── Shared: embed map ───────────────────────────────── */
.wa-map-container {
  margin-top: 16px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.wa-map-iframe {
  width: 100%;
  height: 220px;
  display: block;
}

/* ════════════════════════════════════════════════════════
   LAYOUT 1 – STANDARD  (default vertical)
   ════════════════════════════════════════════════════════ */
.layout-standard .color-border {
  padding: 0;
  border-bottom: 2px solid #939393;
}

.layout-standard .wa-address-row,
.layout-standard .wa-hours-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}

.layout-standard .wa-icon-wrap,
.layout-standard .wa-hours-icon-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-top: 3px;
}

.layout-standard .wa-location-icon {
  width: 18px;
  height: 18px;
}

.layout-standard .wa-hours-icon {
  width: 16px;
  height: 16px;
}

/* ════════════════════════════════════════════════════════
   LAYOUT 2 – COMPACT  (header / footer – 1 línea)
   ════════════════════════════════════════════════════════ */
.layout-compact .wa-compact-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.layout-compact .wa-compact-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.layout-compact .wa-compact-clock-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.layout-compact .wa-compact-clock-icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
}

.layout-compact .wa-compact-address,
.layout-compact .wa-compact-hours {
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.layout-compact .wa-compact-sep {
  color: #cccccc;
  font-size: 14px;
  user-select: none;
}

.layout-compact .wa-nav-wrap {
  margin-top: 0;
  display: contents;
}

/* ════════════════════════════════════════════════════════
   LAYOUT 3 – SIDEBAR  (lista compacta)
   ════════════════════════════════════════════════════════ */
.layout-sidebar .wa-sidebar-title {
  font-size: 18px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}

.layout-sidebar .wa-sidebar-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.layout-sidebar .wa-sidebar-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 3px;
}

.layout-sidebar .wa-sidebar-icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
}

.layout-sidebar .wa-sidebar-address,
.layout-sidebar .wa-sidebar-hours {
  font-size: 14px;
  line-height: 1.4;
}

.layout-sidebar .wa-sidebar-nav-wrap {
  margin-top: 10px;
}

.layout-sidebar .wa-nav-btn {
  font-size: 13px;
  padding: 5px 12px;
}

/* ════════════════════════════════════════════════════════
   LAYOUT 4 – CARD  (tarjeta con mapa)
   ════════════════════════════════════════════════════════ */
.layout-card .wa-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.layout-card .wa-card-map {
  width: 100%;
  overflow: hidden;
}

.layout-card .wa-card-iframe {
  width: 100%;
  height: 200px;
  display: block;
  border: none;
  margin: 0;
}

.layout-card .wa-card-body {
  padding: 16px 18px 18px;
}

.layout-card .wa-card-title {
  font-size: 20px;
  margin-bottom: 12px;
}

.layout-card .wa-card-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.layout-card .wa-card-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
}

.layout-card .wa-card-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.layout-card .wa-card-address,
.layout-card .wa-card-hours {
  font-size: 14px;
  line-height: 1.4;
}

.layout-card .wa-card-nav-wrap {
  margin-top: 12px;
}

/* ════════════════════════════════════════════════════════
   LAYOUT 5 – MAP-HERO  (mapa grande arriba)
   ════════════════════════════════════════════════════════ */
.layout-map-hero .wa-hero-map {
  border-radius: 8px 8px 0 0;
  margin-top: 0;
  border-bottom: none;
}

.layout-map-hero .wa-hero-iframe {
  height: 320px;
}

.layout-map-hero .wa-hero-info {
  padding: 16px 0 0;
}

.layout-map-hero .wa-hero-title {
  font-size: 22px;
  margin-bottom: 10px;
}

.layout-map-hero .wa-address-row,
.layout-map-hero .wa-hours-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}

.layout-map-hero .wa-icon-wrap,
.layout-map-hero .wa-hours-icon-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-top: 3px;
}

.layout-map-hero .wa-location-icon {
  width: 18px;
  height: 18px;
}

.layout-map-hero .wa-hours-icon {
  width: 16px;
  height: 16px;
}

/* ════════════════════════════════════════════════════════
   LAYOUT 6 – MINIMAL  (solo texto plano)
   ════════════════════════════════════════════════════════ */
.layout-minimal .wa-minimal-title {
  font-size: 20px;
  margin-bottom: 6px;
}

.layout-minimal .wa-minimal-address,
.layout-minimal .wa-minimal-hours {
  margin: 0 0 4px 0;
  font-size: 15px;
  line-height: 1.5;
  color: #444444;
}

.layout-minimal .wa-minimal-nav-wrap {
  margin-top: 8px;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 600px) {
  .layout-compact .wa-compact-bar {
    flex-wrap: wrap;
  }
  .layout-compact .wa-compact-address,
  .layout-compact .wa-compact-hours {
    white-space: normal;
  }
  .wa-nav-wrap {
    flex-direction: column;
  }
  .wa-nav-btn {
    width: 100%;
    justify-content: center;
  }
  .layout-map-hero .wa-hero-iframe {
    height: 220px;
  }
  .layout-card .wa-card-iframe {
    height: 160px;
  }
}
@media (max-width: 767px) { .style-text {
  padding-top: 4px;
  font-size: 16px;
  text-align: center;
} }
@charset "UTF-8";
.widget-55f3c9 .scroll-gallery-container {
  width: 100%;
  max-width: 100%;
  padding: 40px 20px;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: transparent;
  box-sizing: border-box;
}

.widget-55f3c9 .gallery-header {
  width: 100%;
  text-align: center;
  margin-bottom: 2rem;
}

.widget-55f3c9 .gallery-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.widget-55f3c9 .gallery-title-accent {
  display: block;
  width: 5px;
  height: 2.2em;
  border-radius: 3px;
  flex-shrink: 0;
  align-self: center;
  transition: background 0.3s ease, width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
}

.widget-55f3c9 .gallery-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}

.widget-55f3c9 .gallery-subtitle {
  margin: 0.75rem 0 0 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
}

.widget-55f3c9 .gallery-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 1.5rem;
}

.widget-55f3c9 .gallery-loading p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.widget-55f3c9 .loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--spinner-color, #667eea);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.widget-55f3c9 .error-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  color: #e74c3c;
  text-align: center;
}

.widget-55f3c9 .error-message p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  max-width: 500px;
  line-height: 1.5;
}

/* ── EMPTY STATE ───────────────────────────── */
.widget-55f3c9 .gallery-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2.5rem 2rem;
  text-align: center;
}

.widget-55f3c9 .gallery-empty-icon {
  font-size: 3rem;
  line-height: 1;
  opacity: 0.4;
}

.widget-55f3c9 .gallery-empty-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.widget-55f3c9 .gallery-empty-sub {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}

.widget-55f3c9 .gallery-empty-hint {
  margin: 0;
  font-size: 0.875rem;
  color: #888;
  line-height: 1.5;
}

.widget-55f3c9 .gallery-load-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.5rem;
  padding: 12px 32px;
  border-radius: 50px;
  border: 2px solid #667eea;
  background: #667eea;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35);
}

.widget-55f3c9 .gallery-load-btn:hover {
  background: #5569d4;
  border-color: #5569d4;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.45);
}

.widget-55f3c9 .gallery-load-btn:active {
  transform: translateY(0);
}

/* ── CONTROLS ──────────────────────────────── */
.widget-55f3c9 .gallery-controls {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
  width: 100%;
}

.widget-55f3c9 .gallery-control-btn {
  all: unset;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  box-sizing: border-box;
}

.widget-55f3c9 .gallery-control-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

.widget-55f3c9 .gallery-control-btn:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.widget-55f3c9 .gallery-control-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.widget-55f3c9 .gallery-control-btn:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.widget-55f3c9 .gallery-indicators {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-height: 24px;
}

.widget-55f3c9 .indicator-dot {
  all: unset;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  background-color: #d0d0d0;
}

.widget-55f3c9 .indicator-dot:hover {
  transform: scale(1.2);
  background-color: #999999;
}

.widget-55f3c9 .indicator-dot.active {
  width: 24px;
  border-radius: 5px;
}

.widget-55f3c9 .indicator-number {
  all: unset;
  min-width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0 8px;
  box-sizing: border-box;
  background-color: #ffffff;
  color: #666666;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.widget-55f3c9 .indicator-number:hover {
  background-color: #f5f5f5;
  border-color: #999999;
}

.widget-55f3c9 .indicator-number.active {
  background-color: var(--indicator-active-color, #667eea);
  color: #ffffff;
  border-color: var(--indicator-active-color, #667eea);
}

.widget-55f3c9 .indicator-progress {
  all: unset;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.widget-55f3c9 .indicator-progress:hover {
  transform: scale(1.1);
}

.widget-55f3c9 .progress-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.widget-55f3c9 .progress-circle-bg {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 3;
}

.widget-55f3c9 .progress-circle-fill {
  fill: none;
  stroke: var(--indicator-active-color, #667eea);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}

.widget-55f3c9 .indicator-progress.active .progress-circle-fill {
  stroke-width: 4;
}

.widget-55f3c9 .progress-number {
  position: absolute;
  font-size: 0.625rem;
  font-weight: 700;
  color: #666666;
}

.widget-55f3c9 .indicator-progress.active .progress-number {
  color: var(--indicator-active-color, #667eea);
  font-size: 0.6875rem;
}

/* ── WRAPPER & TRACK ───────────────────────── */
.widget-55f3c9 .scroll-gallery-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  box-sizing: border-box;
}

.widget-55f3c9 .scroll-gallery-wrapper:active {
  cursor: grabbing;
}

.widget-55f3c9 .scroll-gallery-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  box-sizing: border-box;
}

/* ── MASONRY ───────────────────────────────── */
.widget-55f3c9 .scroll-gallery-wrapper[data-layout=masonry] {
  overflow: visible;
  cursor: default;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=masonry] .scroll-gallery-track {
  display: grid;
  grid-template-columns: repeat(var(--masonry-columns, 3), 1fr);
  gap: var(--masonry-gap, 20px);
  transition: none;
  transform: none !important;
  width: 100%;
  box-sizing: border-box;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=masonry] .scroll-gallery-item {
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=masonry] .scroll-item-image {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
}

/* ── GRID UNIFORME ─────────────────────────── */
.widget-55f3c9 .scroll-gallery-wrapper[data-layout=grid] {
  overflow: visible;
  cursor: default;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=grid] .scroll-gallery-track {
  display: grid;
  grid-template-columns: repeat(var(--masonry-columns, 3), 1fr);
  gap: var(--masonry-gap, 16px);
  transition: none;
  transform: none !important;
  width: 100%;
  box-sizing: border-box;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=grid] .scroll-gallery-item {
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 75% !important; /* 4:3 ratio */
  position: relative !important;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=grid] .scroll-item-inner {
  position: absolute !important;
  inset: 0 !important;
}

/* ── JUSTIFIED ─────────────────────────────── */
.widget-55f3c9 .scroll-gallery-wrapper[data-layout=justified] {
  overflow: visible;
  cursor: default;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=justified] .scroll-gallery-track {
  display: flex;
  flex-wrap: wrap;
  gap: var(--masonry-gap, 8px);
  transition: none;
  transform: none !important;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=justified] .scroll-gallery-item {
  flex: 1 1 200px;
  height: 220px !important;
  min-width: 150px;
  max-width: 400px;
  width: auto !important;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=justified] .scroll-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── FILMSTRIP ─────────────────────────────── */
.widget-55f3c9 .scroll-gallery-wrapper[data-layout=filmstrip] {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: #667eea #e0e0e0;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=filmstrip]:active {
  cursor: grabbing;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=filmstrip]::-webkit-scrollbar {
  height: 6px;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=filmstrip]::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 3px;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=filmstrip]::-webkit-scrollbar-thumb {
  background: #667eea;
  border-radius: 3px;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=filmstrip] .scroll-gallery-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  transition: none;
  transform: none !important;
  padding-bottom: 12px;
  width: max-content;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=filmstrip] .scroll-gallery-item {
  flex-shrink: 0;
  width: var(--item-width, 280px) !important;
  height: var(--item-height, 200px) !important;
  border-radius: 8px;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=filmstrip] .scroll-gallery-item:first-child {
  margin-left: 8px;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=filmstrip] .scroll-gallery-item:last-child {
  margin-right: 8px;
}

/* ── BENTO ─────────────────────────────────── */
.widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] {
  overflow: visible;
  cursor: default;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: var(--masonry-gap, 16px);
  transition: none;
  transform: none !important;
  width: 100%;
  box-sizing: border-box;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-item {
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-item:nth-child(5) {
  grid-column: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-item:nth-child(8) {
  grid-row: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-item:nth-child(11) {
  grid-column: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-item:nth-child(14) {
  grid-column: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-item:nth-child(17) {
  grid-row: span 2;
}

/* ── METRO ─────────────────────────────────── */
.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] {
  overflow: visible;
  cursor: default;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  gap: var(--masonry-gap, 12px);
  transition: none;
  transform: none !important;
  width: 100%;
  box-sizing: border-box;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(2) {
  grid-column: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(3) {
  grid-column: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(4) {
  grid-row: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(5) {
  grid-column: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(7) {
  grid-column: span 3;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(8) {
  grid-column: span 3;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(10) {
  grid-column: span 2;
  grid-row: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(12) {
  grid-column: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(14) {
  grid-column: span 4;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(16) {
  grid-column: span 2;
  grid-row: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(19) {
  grid-column: span 2;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(22) {
  grid-column: span 3;
}

.widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(25) {
  grid-column: span 2;
  grid-row: span 2;
}

/* ── SPOTLIGHT SCROLLBAR THEMES ───────────── */
/* Light theme (default) */
.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=light] {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.06);
}

.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=light]::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=light]::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=light]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=light]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.45);
}

/* Dark theme — neutral grey, works on any dark background */
.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=dark] {
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 160, 160, 0.6) rgba(80, 80, 80, 0.2);
}

.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=dark]::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=dark]::-webkit-scrollbar-track {
  background: rgba(80, 80, 80, 0.2);
  border-radius: 4px;
}

.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=dark]::-webkit-scrollbar-thumb {
  background: rgba(160, 160, 160, 0.6);
  border-radius: 4px;
}

.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=dark]::-webkit-scrollbar-thumb:hover {
  background: rgba(160, 160, 160, 0.9);
}

/* Accent theme — colors set via JS from design panel */
.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=accent] {
  scrollbar-width: thin;
  scrollbar-color: var(--spotlight-accent-thumb, #667eea) var(--spotlight-accent-track, #dde3fc);
}

.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=accent]::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=accent]::-webkit-scrollbar-track {
  background: var(--spotlight-accent-track, #dde3fc);
  border-radius: 4px;
}

.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=accent]::-webkit-scrollbar-thumb {
  background: var(--spotlight-accent-thumb, #667eea);
  border-radius: 4px;
}

.widget-55f3c9 .spotlight-thumbs[data-scroll-theme=accent]::-webkit-scrollbar-thumb:hover {
  background: var(--spotlight-accent-thumb-hover, #4f63d2);
}

/* ── SPOTLIGHT ─────────────────────────────── */
.widget-55f3c9 .spotlight-layout {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}

.widget-55f3c9 .spotlight-main {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  aspect-ratio: 16/9;
  cursor: pointer;
}

.widget-55f3c9 .spotlight-main-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.widget-55f3c9 .spotlight-main-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.widget-55f3c9 .spotlight-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
}

.widget-55f3c9 .spotlight-main-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.25rem 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  display: none;
}

.widget-55f3c9 .spotlight-nav {
  all: unset;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 5;
  backdrop-filter: blur(6px);
}

.widget-55f3c9 .spotlight-nav:hover {
  background: rgba(0, 0, 0, 0.75);
}

.widget-55f3c9 .spotlight-prev {
  left: 12px;
}

.widget-55f3c9 .spotlight-next {
  right: 12px;
}

.widget-55f3c9 .spotlight-counter {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 10px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
  z-index: 5;
}

.widget-55f3c9 .spotlight-thumbs {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.widget-55f3c9 .spotlight-thumb-item {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  opacity: 0.65;
}

.widget-55f3c9 .spotlight-thumb-item:hover {
  opacity: 0.9;
  transform: scale(1.03);
}

.widget-55f3c9 .spotlight-thumb-item.active {
  border-color: #667eea;
  opacity: 1;
}

.widget-55f3c9 .spotlight-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── ITEMS (shared) ────────────────────────── */
.widget-55f3c9 .scroll-gallery-item {
  flex-shrink: 0;
  width: var(--item-width, 400px);
  height: var(--item-height, 300px);
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #f5f5f5;
}

.widget-55f3c9 .scroll-gallery-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.widget-55f3c9 .scroll-gallery-item:hover .scroll-item-overlay {
  opacity: 1;
}

.widget-55f3c9 .scroll-gallery-item:hover .scroll-item-image {
  transform: scale(1.08);
}

/* Filmstrip: no lift on hover */
.widget-55f3c9 .scroll-gallery-wrapper[data-layout=filmstrip] .scroll-gallery-item:hover {
  transform: scale(1.03);
}

.widget-55f3c9 .scroll-item-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.widget-55f3c9 .scroll-item-image {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.widget-55f3c9 .scroll-item-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: #ffffff;
}

.widget-55f3c9 .scroll-item-caption p {
  margin: 0;
  font-weight: 500;
}

.widget-55f3c9 .scroll-item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.55);
}

.widget-55f3c9 .zoom-icon {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
  color: #ffffff;
}

.widget-55f3c9 .zoom-icon svg {
  display: block;
}

/* ── LOAD MORE ─────────────────────────────── */
.widget-55f3c9 .gallery-load-more-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.widget-55f3c9 .gallery-load-more-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  border-radius: 50px;
  border: 2px solid #667eea;
  color: #667eea;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  background-color: transparent;
}

.widget-55f3c9 .gallery-load-more-btn:hover {
  background-color: #667eea;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.35);
}

.widget-55f3c9 .gallery-load-more-btn:active {
  transform: translateY(0);
}

.widget-55f3c9 .load-more-count {
  font-size: 0.8125rem;
  opacity: 0.75;
  font-weight: 400;
}

/* ── PROGRESS BAR ──────────────────────────── */
.widget-55f3c9 .gallery-progress-bar {
  margin-top: 2rem;
  width: 100%;
  max-width: 600px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background-color: #e0e0e0;
}

.widget-55f3c9 .progress-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
  width: 0%;
  background-color: var(--indicator-active-color, #667eea);
}

/* ── LIGHTBOX ──────────────────────────────── */
.widget-55f3c9 .gallery-lightbox-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
  pointer-events: none !important;
}

.widget-55f3c9 .gallery-lightbox-modal.lightbox-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.widget-55f3c9 .lightbox-backdrop {
  position: absolute !important;
  inset: 0 !important;
  backdrop-filter: blur(10px) !important;
  z-index: 1 !important;
  background-color: rgba(0, 0, 0, 0.95);
}

.widget-55f3c9 .lightbox-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 80px 100px 100px !important;
  z-index: 2 !important;
}

.widget-55f3c9 .lightbox-close,
.widget-55f3c9 .lightbox-nav {
  all: unset;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  position: absolute !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  box-sizing: border-box !important;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.widget-55f3c9 .lightbox-close:hover,
.widget-55f3c9 .lightbox-nav:hover {
  transform: scale(1.1) !important;
  background-color: rgba(255, 255, 255, 0.2);
}

.widget-55f3c9 .lightbox-close {
  top: 20px !important;
  right: 20px !important;
}

.widget-55f3c9 .lightbox-close:hover {
  transform: rotate(90deg) scale(1.1) !important;
}

.widget-55f3c9 .lightbox-nav {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.widget-55f3c9 .lightbox-nav:hover {
  transform: translateY(-50%) scale(1.1) !important;
}

.widget-55f3c9 .lightbox-prev {
  left: 30px !important;
}

.widget-55f3c9 .lightbox-next {
  right: 30px !important;
}

.widget-55f3c9 .lightbox-image-container {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 5 !important;
}

.widget-55f3c9 .lightbox-image-container[data-fit=contain] .lightbox-image {
  max-width: 90vw !important;
  max-height: 80vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.widget-55f3c9 .lightbox-image-container[data-fit=cover] .lightbox-image {
  width: 90vw !important;
  height: 80vh !important;
  object-fit: cover !important;
}

.widget-55f3c9 .lightbox-image-container[data-fit=fill] .lightbox-image {
  width: 90vw !important;
  height: 80vh !important;
  object-fit: fill !important;
}

.widget-55f3c9 .lightbox-image-container[data-fit=scale-down] .lightbox-image {
  max-width: 90vw !important;
  max-height: 80vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: scale-down !important;
}

.widget-55f3c9 .lightbox-image {
  border-radius: 4px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
  transition: opacity 0.25s ease-in-out !important;
  display: block !important;
}

.widget-55f3c9 .lightbox-caption {
  position: absolute !important;
  bottom: 80px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  font-size: 1rem !important;
  max-width: 600px !important;
  line-height: 1.6 !important;
  padding: 0 20px !important;
  z-index: 8 !important;
  color: #ffffff;
}

.widget-55f3c9 .lightbox-counter {
  position: absolute !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px) !important;
  z-index: 8 !important;
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.9);
}

.widget-55f3c9 .lightbox-thumbnails {
  position: absolute !important;
  bottom: 80px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: none !important;
  gap: 8px !important;
  max-width: 90vw !important;
  overflow-x: auto !important;
  padding: 8px !important;
  z-index: 9 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.widget-55f3c9 .lightbox-thumbnails.show {
  display: flex !important;
}

.widget-55f3c9 .lightbox-thumbnail {
  flex-shrink: 0;
  width: 60px !important;
  height: 60px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  transition: all 0.3s ease !important;
  opacity: 0.6;
}

.widget-55f3c9 .lightbox-thumbnail:hover {
  opacity: 0.9;
  transform: scale(1.1);
}

.widget-55f3c9 .lightbox-thumbnail.active {
  border-color: #667eea !important;
  opacity: 1;
}

.widget-55f3c9 .lightbox-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.widget-55f3c9 .lightbox-image-container.zoomable {
  cursor: zoom-in;
}

.widget-55f3c9 .lightbox-image-container.zoomed {
  cursor: move;
  overflow: hidden;
}

.widget-55f3c9 .lightbox-image-container.zoomed .lightbox-image {
  cursor: move;
}

/* ── RESPONSIVE MOBILE ─────────────────────── */
@media (max-width: 767px) {
  .widget-55f3c9 .scroll-gallery-container {
    padding: 20px 10px;
  }
  .widget-55f3c9 .gallery-header {
    margin-bottom: 1.5rem;
  }
  .widget-55f3c9 .gallery-title {
    font-size: 1.5rem;
  }
  .widget-55f3c9 .gallery-subtitle {
    font-size: 0.9375rem;
    margin-top: 0.5rem;
  }
  .widget-55f3c9 .gallery-controls {
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0 4px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .widget-55f3c9 .gallery-control-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .widget-55f3c9 .gallery-control-btn svg {
    width: 18px;
    height: 18px;
  }
  .widget-55f3c9 .gallery-indicators {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .widget-55f3c9 .indicator-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
  }
  .widget-55f3c9 .indicator-dot.active {
    width: 18px;
  }
  .widget-55f3c9 .indicator-number {
    min-width: 26px;
    height: 26px;
    font-size: 0.75rem;
    padding: 0 5px;
    flex-shrink: 0;
  }
  .widget-55f3c9 .indicator-progress {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .widget-55f3c9 .progress-number {
    font-size: 0.55rem;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=masonry] .scroll-gallery-track {
    grid-template-columns: 1fr !important;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=grid] .scroll-gallery-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=justified] .scroll-gallery-item {
    flex: 1 1 140px;
    height: 160px !important;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=filmstrip] .scroll-gallery-track {
    gap: 8px;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=filmstrip] .scroll-gallery-item {
    width: 200px !important;
    height: 150px !important;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-track {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 140px !important;
    gap: 10px !important;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-item:first-child {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-item:nth-child(5),
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-item:nth-child(11),
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-item:nth-child(14) {
    grid-column: span 1 !important;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-track {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 110px !important;
    gap: 8px !important;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(1),
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(10),
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(16),
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(25) {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(7),
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(8),
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(12),
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(14),
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(19),
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-item:nth-child(22) {
    grid-column: span 1 !important;
  }
  /* Spotlight mobile: stacked */
  .widget-55f3c9 .spotlight-layout {
    flex-direction: column;
    gap: 10px;
  }
  .widget-55f3c9 .spotlight-main {
    width: 100%;
    aspect-ratio: 16/9;
  }
  .widget-55f3c9 .spotlight-thumbs {
    flex-direction: row;
    flex: none;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    gap: 6px;
    padding-right: 0;
    padding-bottom: 6px;
  }
  /* Mobile scrollbar themes — horizontal (height instead of width) */
  .widget-55f3c9 .spotlight-thumbs[data-scroll-theme=light]::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }
  .widget-55f3c9 .spotlight-thumbs[data-scroll-theme=dark]::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }
  .widget-55f3c9 .spotlight-thumbs[data-scroll-theme=accent]::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }
  .widget-55f3c9 .spotlight-thumb-item {
    width: 90px;
    height: 60px;
    flex-shrink: 0;
    aspect-ratio: unset;
  }
  .widget-55f3c9 .spotlight-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .widget-55f3c9 .scroll-gallery-item {
    width: calc(100vw - 40px);
    height: auto;
    aspect-ratio: 4/3;
  }
  .widget-55f3c9 .scroll-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .widget-55f3c9 .scroll-item-caption {
    padding: 1rem 0.75rem 0.75rem;
    font-size: 0.8125rem;
  }
  .widget-55f3c9 .gallery-progress-bar {
    max-width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 1.25rem;
    height: 3px;
  }
  .widget-55f3c9 .lightbox-wrapper {
    padding: 80px 15px 80px !important;
  }
  .widget-55f3c9 .lightbox-image-container[data-fit=contain] .lightbox-image,
  .widget-55f3c9 .lightbox-image-container[data-fit=scale-down] .lightbox-image {
    max-width: 95vw !important;
    max-height: 70vh !important;
  }
  .widget-55f3c9 .lightbox-image-container[data-fit=cover] .lightbox-image,
  .widget-55f3c9 .lightbox-image-container[data-fit=fill] .lightbox-image {
    width: 95vw !important;
    height: 70vh !important;
  }
  .widget-55f3c9 .lightbox-nav {
    width: 40px !important;
    height: 40px !important;
  }
  .widget-55f3c9 .lightbox-prev {
    left: 10px !important;
  }
  .widget-55f3c9 .lightbox-next {
    right: 10px !important;
  }
  .widget-55f3c9 .lightbox-close {
    top: 15px !important;
    right: 15px !important;
    width: 40px !important;
    height: 40px !important;
  }
  .widget-55f3c9 .lightbox-caption {
    bottom: 70px !important;
    font-size: 0.8125rem !important;
    max-width: 90% !important;
  }
  .widget-55f3c9 .lightbox-counter {
    bottom: 20px !important;
    font-size: 0.6875rem !important;
    padding: 5px 10px !important;
  }
  .widget-55f3c9 .lightbox-thumbnails {
    bottom: 60px !important;
  }
  .widget-55f3c9 .lightbox-thumbnail {
    width: 50px !important;
    height: 50px !important;
  }
  .widget-55f3c9 .gallery-load-more-btn {
    padding: 12px 28px;
    font-size: 0.875rem;
  }
}
/* ── RESPONSIVE TABLET ─────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .widget-55f3c9 .scroll-gallery-item {
    width: var(--item-width);
    height: var(--item-height);
  }
  .widget-55f3c9 .lightbox-wrapper {
    padding: 60px 40px 80px !important;
  }
  .widget-55f3c9 .lightbox-image-container[data-fit=contain] .lightbox-image,
  .widget-55f3c9 .lightbox-image-container[data-fit=scale-down] .lightbox-image {
    max-width: 85vw !important;
    max-height: 75vh !important;
  }
  .widget-55f3c9 .lightbox-image-container[data-fit=cover] .lightbox-image,
  .widget-55f3c9 .lightbox-image-container[data-fit=fill] .lightbox-image {
    width: 85vw !important;
    height: 75vh !important;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=masonry] .scroll-gallery-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=grid] .scroll-gallery-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=bento] .scroll-gallery-track {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 175px !important;
  }
  .widget-55f3c9 .scroll-gallery-wrapper[data-layout=metro] .scroll-gallery-track {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 125px !important;
  }
  .widget-55f3c9 .spotlight-layout {
    gap: 12px;
  }
  .widget-55f3c9 .spotlight-thumbs {
    flex: 0 0 110px;
  }
}

@charset "UTF-8";
/* =============================================
   OCULTAR UI PROPIA DE GOOGLE TRANSLATE
   ============================================= */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

.goog-te-balloon-frame {
  display: none !important;
}

div#goog-gt-tt, div#goog-gt-vt {
  display: none !important;
}

.skiptranslate iframe {
  visibility: hidden !important;
  display: none !important;
}

body {
  top: 0 !important;
}

/* Ocultar el div interno que usamos para inicializar GT */
.widget-32b4d3 .translate-gt-hidden {
  display: none !important;
}

.widget-32b4d3 .translate-gt-hidden * {
  display: none !important;
}

/* =============================================
   LISTA DE BOTONES DE IDIOMA
   ============================================= */
.widget-32b4d3 .translate-lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}

.widget-32b4d3 .translate-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1.5px solid #dee2e6;
  border-radius: 8px;
  background: #ffffff;
  color: #212529;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.widget-32b4d3 .translate-lang-btn:hover {
  border-color: #4285f4;
  background: #f0f4ff;
  color: #1a56db;
}

.widget-32b4d3 .translate-lang-btn.active {
  background: #4285f4;
  border-color: #4285f4;
  color: #ffffff;
  font-weight: 600;
}

.widget-32b4d3 .translate-lang-original {
  background: #f8f9fa;
}

.widget-32b4d3 .translate-lang-original.active {
  background: #e8eaed;
  border-color: #9aa0a6;
  color: #202124;
}

.widget-32b4d3 .tl-flag-img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.widget-32b4d3 .tl-name {
  line-height: 1;
}

/* =============================================
   MODO NORMAL - BASE
   ============================================= */
.widget-32b4d3 .translate-widget-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
}

/* LAYOUT: COMPACT */
.widget-32b4d3 .translate-widget-container.translate-layout-compact {
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.widget-32b4d3 .translate-layout-compact .translate-label {
  display: none;
}

/* LAYOUT: INLINE */
.widget-32b4d3 .translate-widget-container.translate-layout-inline {
  padding: 6px 10px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.widget-32b4d3 .translate-layout-inline .translate-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  white-space: nowrap;
  flex-shrink: 0;
}

/* LAYOUT: CARD */
.widget-32b4d3 .translate-widget-container.translate-layout-card {
  padding: 16px 20px;
  background-color: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.widget-32b4d3 .translate-layout-card .translate-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #212529;
}

.widget-32b4d3 .translate-selector-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* =============================================
   MODO FLOTANTE
   ============================================= */
.widget-32b4d3 .translate-floating-button {
  position: fixed;
  z-index: 99999;
}

/* Posiciones */
.widget-32b4d3 .translate-position-left-top,
.widget-32b4d3 .translate-position-left-middle,
.widget-32b4d3 .translate-position-left-bottom {
  left: 30px;
}

.widget-32b4d3 .translate-position-right-top,
.widget-32b4d3 .translate-position-right-middle,
.widget-32b4d3 .translate-position-right-bottom {
  right: 30px;
}

.widget-32b4d3 .translate-position-left-top,
.widget-32b4d3 .translate-position-right-top {
  top: 30px;
}

.widget-32b4d3 .translate-position-left-middle,
.widget-32b4d3 .translate-position-right-middle {
  top: 50%;
  transform: translateY(-50%);
}

.widget-32b4d3 .translate-position-left-bottom,
.widget-32b4d3 .translate-position-right-bottom {
  bottom: 30px;
}

/* Botón principal */
.widget-32b4d3 .translate-float-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
  border: none;
  box-shadow: 0 4px 20px rgba(66, 133, 244, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  overflow: visible;
  padding: 0;
}

.widget-32b4d3 .translate-float-btn:hover {
  width: auto;
  min-width: 56px;
  padding: 0 18px;
  border-radius: 28px;
  box-shadow: 0 6px 30px rgba(66, 133, 244, 0.6);
}

.widget-32b4d3 .translate-float-btn:active {
  transform: scale(0.95);
}

.widget-32b4d3 .translate-icon {
  width: 24px;
  height: 24px;
  color: white;
  flex-shrink: 0;
  transition: margin 0.2s ease;
}

.widget-32b4d3 .translate-text {
  font-size: 14px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.widget-32b4d3 .translate-float-btn:hover .translate-icon {
  margin-right: 8px;
}

.widget-32b4d3 .translate-float-btn:hover .translate-text {
  opacity: 1;
  max-width: 200px;
}

/* Panel flotante */
.widget-32b4d3 .translate-float-panel {
  position: absolute;
  width: 300px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: 22px 18px 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.95);
  transition: all 0.25s ease;
  pointer-events: none;
  z-index: 100000;
}

.widget-32b4d3 .translate-float-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* Posición del panel según posición del botón */
.widget-32b4d3 .translate-position-left-top .translate-float-panel,
.widget-32b4d3 .translate-position-right-top .translate-float-panel {
  top: 70px;
}

.widget-32b4d3 .translate-position-left-middle .translate-float-panel,
.widget-32b4d3 .translate-position-right-middle .translate-float-panel {
  top: 0;
}

.widget-32b4d3 .translate-position-left-bottom .translate-float-panel,
.widget-32b4d3 .translate-position-right-bottom .translate-float-panel {
  bottom: 70px;
  top: auto;
}

.widget-32b4d3 .translate-position-left-top .translate-float-panel,
.widget-32b4d3 .translate-position-left-middle .translate-float-panel,
.widget-32b4d3 .translate-position-left-bottom .translate-float-panel {
  left: 0;
}

.widget-32b4d3 .translate-position-right-top .translate-float-panel,
.widget-32b4d3 .translate-position-right-middle .translate-float-panel,
.widget-32b4d3 .translate-position-right-bottom .translate-float-panel {
  right: 0;
}

/* Botón cerrar */
.widget-32b4d3 .translate-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #f1f3f4;
  color: #5f6368;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.widget-32b4d3 .translate-close-btn:hover {
  background: #e8eaed;
  color: #202124;
  transform: rotate(90deg);
}

/* Título del panel */
.widget-32b4d3 .translate-title {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
  color: #212529;
  line-height: 1.4;
  padding-right: 30px;
}

/* Botones de idioma dentro del panel flotante (más compactos) */
.widget-32b4d3 .translate-float-panel .translate-lang-list {
  gap: 5px;
}

.widget-32b4d3 .translate-float-panel .translate-lang-btn {
  padding: 6px 10px;
  font-size: 13px;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 767px) {
  .widget-32b4d3 .translate-position-left-top,
  .widget-32b4d3 .translate-position-left-middle,
  .widget-32b4d3 .translate-position-left-bottom {
    left: 14px;
  }
  .widget-32b4d3 .translate-position-right-top,
  .widget-32b4d3 .translate-position-right-middle,
  .widget-32b4d3 .translate-position-right-bottom {
    right: 14px;
  }
  .widget-32b4d3 .translate-position-left-top,
  .widget-32b4d3 .translate-position-right-top {
    top: 14px;
  }
  .widget-32b4d3 .translate-position-left-bottom,
  .widget-32b4d3 .translate-position-right-bottom {
    bottom: 14px;
  }
  .widget-32b4d3 .translate-float-btn {
    width: 50px;
    height: 50px;
  }
  .widget-32b4d3 .translate-float-btn:hover {
    width: 50px;
    padding: 0;
  }
  .widget-32b4d3 .translate-float-btn:hover .translate-text {
    opacity: 0;
    max-width: 0;
  }
  .widget-32b4d3 .translate-float-btn:hover .translate-icon {
    margin-right: 0;
  }
  .widget-32b4d3 .translate-float-panel {
    width: calc(100vw - 28px);
    max-width: 290px;
  }
  .widget-32b4d3 .translate-lang-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
}

@charset "UTF-8";
/* =============================================
   BASE & LAYOUTS
   ============================================= */
.generalPhones {
  width: 100%;
  min-height: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* — Lista vertical (default) */
.generalPhones.layout-list,
.generalPhones:not([class*=layout-]) {
  flex-direction: column;
  align-items: flex-start;
}

/* — Fila horizontal */
.generalPhones.layout-row {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

/* — Grid 2 columnas */
.generalPhones.layout-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* — Grid 3 columnas */
.generalPhones.layout-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* — Compacto: separados por divisor */
.generalPhones.layout-divided {
  flex-direction: column;
  align-items: stretch;
}

.generalPhones.layout-divided .phoneConteiner + .phoneConteiner {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 10px;
  margin-top: 2px;
}

/* — Inline Bar: ultra compacto para header/footer */
.generalPhones.layout-inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}

.generalPhones.layout-inline .phoneConteiner {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

.generalPhones.layout-inline .phoneConteiner + .phoneConteiner {
  margin-left: 0;
}

/* Separador entre teléfonos — elemento insertado por JS */
.generalPhones.layout-inline .inline-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--inline-sep-color, currentColor);
  opacity: var(--inline-sep-opacity, 0.22);
  margin: 0 12px;
  flex-shrink: 0;
  align-self: center;
  pointer-events: none;
}

/* Separador para teléfonos manuales (Handlebars) */
.generalPhones.layout-inline .phoneConteiner + .phoneConteiner {
  margin-left: 0;
  padding-left: 0;
}

.generalPhones.layout-inline .phone-adsa {
  padding: 3px 0 !important;
  font-size: 0.875em;
  letter-spacing: 0.1px;
  gap: 5px;
}

.generalPhones.layout-inline .icono-phone {
  height: 14px !important;
  width: 14px !important;
  margin-right: 4px;
}

.generalPhones.layout-inline .phone-etiqueta {
  font-size: 10px;
  letter-spacing: 0.3px;
}

.generalPhones.layout-inline .phone-badge {
  font-size: 10px;
  margin-left: 5px;
}

.generalPhones.layout-inline .badge-dot {
  width: 5px;
  height: 5px;
}

/* Contenedores internos */
.phones-cms-container,
.phones-manual-container {
  display: contents;
}

/* =============================================
   PHONE CONTAINER
   ============================================= */
.phoneConteiner {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
}

.phoneConteiner.label-top,
.phoneConteiner.label-bottom {
  flex-direction: column;
  align-items: flex-start;
}

.phoneConteiner a.phone-adsa {
  display: flex;
  align-items: center;
  height: auto;
  text-decoration: none;
  cursor: pointer;
  gap: 6px;
}

.phoneConteiner a label {
  margin: 0 !important;
  cursor: pointer;
}

/* =============================================
   ETIQUETA
   ============================================= */
.phone-etiqueta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
  line-height: 1.2;
  pointer-events: none;
}

.etiqueta-top {
  display: block;
  margin-bottom: 3px;
}

.etiqueta-bottom {
  display: block;
  margin-top: 3px;
}

.etiqueta-inline {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* =============================================
   ICONO
   ============================================= */
.icono-phone {
  height: 20px;
  width: 20px;
  display: flex;
  margin-right: 8px;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.icono-phone svg {
  height: 100%;
  width: 100%;
}

/* =============================================
   TIPO DE ENLACE — chip WA
   ============================================= */
.phone-type-chip {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 5px;
  flex-shrink: 0;
  pointer-events: none;
  line-height: 1.4;
  vertical-align: middle;
}

.phone-type-wa {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

/* Ocultar chip en mobile para no recargar visualmente */
@media (max-width: 767px) {
  .phone-type-chip {
    display: none;
  }
}
/* =============================================
   INLINE-BAR — truncado de texto
   ============================================= */
.generalPhones.layout-inline .phone-labels label {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* =============================================
   ESTILOS DE ICONO
   ============================================= */
/* Base compartida para todos los estilos decorados */
.icon-style-circle,
.icon-style-circle-outline,
.icon-style-square,
.icon-style-square-outline,
.icon-style-soft-bg,
.icon-style-shadow,
.icon-style-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Círculo sólido */
.icon-style-circle {
  background: currentColor;
  border-radius: 50%;
  padding: 8px;
  width: auto !important;
  height: auto !important;
}

.icon-style-circle svg {
  width: 16px !important;
  height: 16px !important;
  filter: invert(1) brightness(10);
}

.phoneConteiner a.phone-adsa:hover .icon-style-circle {
  transform: scale(1.1);
  opacity: 0.85;
}

/* Círculo con borde */
.icon-style-circle-outline {
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  padding: 7px;
  width: auto !important;
  height: auto !important;
}

.icon-style-circle-outline svg {
  width: 16px !important;
  height: 16px !important;
}

.phoneConteiner a.phone-adsa:hover .icon-style-circle-outline {
  background: currentColor;
  transform: scale(1.05);
}

.phoneConteiner a.phone-adsa:hover .icon-style-circle-outline svg {
  filter: invert(1) brightness(10);
}

/* Cuadrado sólido */
.icon-style-square {
  background: currentColor;
  border-radius: 8px;
  padding: 8px;
  width: auto !important;
  height: auto !important;
}

.icon-style-square svg {
  width: 16px !important;
  height: 16px !important;
  filter: invert(1) brightness(10);
}

.phoneConteiner a.phone-adsa:hover .icon-style-square {
  transform: scale(1.08);
  border-radius: 10px;
}

/* Cuadrado con borde */
.icon-style-square-outline {
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 8px;
  padding: 7px;
  width: auto !important;
  height: auto !important;
}

.icon-style-square-outline svg {
  width: 16px !important;
  height: 16px !important;
}

.phoneConteiner a.phone-adsa:hover .icon-style-square-outline {
  background: currentColor;
  transform: scale(1.05);
}

.phoneConteiner a.phone-adsa:hover .icon-style-square-outline svg {
  filter: invert(1) brightness(10);
}

/* Fondo suave (sin borde, opacidad ligera) */
.icon-style-soft-bg {
  background: rgba(128, 128, 128, 0.12);
  border-radius: 10px;
  padding: 8px;
  width: auto !important;
  height: auto !important;
}

.icon-style-soft-bg svg {
  width: 16px !important;
  height: 16px !important;
}

.phoneConteiner a.phone-adsa:hover .icon-style-soft-bg {
  background: rgba(128, 128, 128, 0.22);
  transform: scale(1.05);
}

/* Flotante con sombra */
.icon-style-shadow {
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  width: auto !important;
  height: auto !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.icon-style-shadow svg {
  width: 16px !important;
  height: 16px !important;
}

.phoneConteiner a.phone-adsa:hover .icon-style-shadow {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}

/* Pastilla alargada */
.icon-style-pill {
  background: currentColor;
  border-radius: 999px;
  padding: 8px 14px;
  width: auto !important;
  height: auto !important;
}

.icon-style-pill svg {
  width: 16px !important;
  height: 16px !important;
  filter: invert(1) brightness(10);
}

.phoneConteiner a.phone-adsa:hover .icon-style-pill {
  opacity: 0.85;
  transform: scale(1.04);
}

/* Inline bar: reducir padding de estilos decorados para mejor proporción */
.generalPhones.layout-inline .icon-style-circle,
.generalPhones.layout-inline .icon-style-circle-outline,
.generalPhones.layout-inline .icon-style-square,
.generalPhones.layout-inline .icon-style-square-outline,
.generalPhones.layout-inline .icon-style-soft-bg,
.generalPhones.layout-inline .icon-style-shadow {
  padding: 5px !important;
}

.generalPhones.layout-inline .icon-style-circle svg,
.generalPhones.layout-inline .icon-style-circle-outline svg,
.generalPhones.layout-inline .icon-style-square svg,
.generalPhones.layout-inline .icon-style-square-outline svg,
.generalPhones.layout-inline .icon-style-soft-bg svg,
.generalPhones.layout-inline .icon-style-shadow svg {
  width: 12px !important;
  height: 12px !important;
}

.generalPhones.layout-inline .icon-style-pill {
  padding: 5px 9px !important;
}

.generalPhones.layout-inline .icon-style-pill svg {
  width: 12px !important;
  height: 12px !important;
}

/* Mobile: ajustar tamaño de iconos decorados */
@media (max-width: 767px) {
  .icon-style-circle svg,
  .icon-style-circle-outline svg,
  .icon-style-square svg,
  .icon-style-square-outline svg,
  .icon-style-soft-bg svg,
  .icon-style-shadow svg,
  .icon-style-pill svg {
    width: 18px !important;
    height: 18px !important;
  }
  /* En mobile, los estilos decorados no necesitan el padding forzado de icono plain */
  .icon-style-circle,
  .icon-style-circle-outline,
  .icon-style-square,
  .icon-style-square-outline,
  .icon-style-soft-bg,
  .icon-style-shadow,
  .icon-style-pill {
    height: auto !important;
    width: auto !important;
    margin-right: 0 !important;
  }
}
/* =============================================
   FOCUS VISIBLE — accesibilidad teclado
   ============================================= */
.phoneConteiner a.phone-adsa:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================
   TOOLTIP  (bidireccional: arriba por defecto, abajo si .tooltip-down)
   ============================================= */
.phone-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15, 15, 15, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
  letter-spacing: 0.3px;
}

/* Flecha hacia arriba (tooltip abajo del elemento) */
.phone-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(15, 15, 15, 0.92);
}

.phoneConteiner:hover .phone-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Tooltip hacia abajo (cuando está cerca del borde superior) ── */
.phone-tooltip.tooltip-down {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}

.phone-tooltip.tooltip-down::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(15, 15, 15, 0.92);
}

.phoneConteiner:hover .phone-tooltip.tooltip-down {
  transform: translateX(-50%) translateY(0);
}

/* =============================================
   BADGE
   ============================================= */
.phone-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #22c55e;
  flex-shrink: 0;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  }
  50% {
    opacity: 0.85;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
  }
}
/* =============================================
   RESPONSIVE
   ============================================= */
/* ── TABLET (768px – 1023px) ─────────────────────────────────────── */
@media (max-width: 1023px) and (min-width: 768px) {
  /* Etiquetas: visibles por defecto en tablet — forzar visibilidad */
  .phone-etiqueta {
    display: block !important;
  }
  .etiqueta-inline {
    display: inline-flex !important;
  }
  /* Se ocultan solo cuando el toggle está desactivado (.hide-label-tablet) */
  .hide-label-tablet .phone-etiqueta {
    display: none !important;
  }
  /* Icono plain: ligeramente más pequeño */
  .icono-phone.icon-style-plain,
  .icono-phone:not([class*=icon-style-]),
  .icono-phone.icon-style-plain svg,
  .icono-phone:not([class*=icon-style-]) svg {
    height: 17px !important;
    width: 17px !important;
  }
  .icono-phone {
    margin-right: 6px;
  }
  /* Iconos decorados: mantener proporciones, solo reducir SVG interno */
  .icon-style-circle svg,
  .icon-style-circle-outline svg,
  .icon-style-square svg,
  .icon-style-square-outline svg,
  .icon-style-soft-bg svg,
  .icon-style-shadow svg,
  .icon-style-pill svg {
    width: 14px !important;
    height: 14px !important;
  }
  .icon-style-circle,
  .icon-style-circle-outline,
  .icon-style-square,
  .icon-style-square-outline,
  .icon-style-soft-bg,
  .icon-style-shadow {
    padding: 7px !important;
    width: auto !important;
    height: auto !important;
  }
  .icon-style-pill {
    padding: 7px 11px !important;
    width: auto !important;
    height: auto !important;
  }
  /* Badge: ocultar en tablet */
  .phone-badge {
    display: none;
  }
  /* Grids: máximo 2 columnas */
  .generalPhones.layout-grid2,
  .generalPhones.layout-grid3 {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Inline bar: permitir wrap para que no se desborde */
  .generalPhones.layout-inline {
    flex-wrap: wrap;
    gap: 6px;
  }
  .generalPhones.layout-inline .inline-sep {
    display: none !important;
  }
  /* Fuente ligeramente reducida */
  .phoneConteiner a.phone-adsa {
    font-size: 0.88em;
  }
}
/* ── MOBILE (hasta 767px) ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Número, etiquetas y badge: ocultos por defecto */
  .phone-labels {
    display: none !important;
  }
  .phone-etiqueta {
    display: none !important;
  }
  .phone-badge {
    display: none !important;
  }
  /* Si el toggle está activo, se muestran etiquetas */
  .show-label-mobile .phone-etiqueta {
    display: inline !important;
  }
  .show-label-mobile .etiqueta-top {
    display: block !important;
  }
  .show-label-mobile .etiqueta-bottom {
    display: block !important;
  }
  .show-label-mobile .etiqueta-inline {
    display: inline-flex !important;
  }
  /* ── Icono en mobile: área táctil cómoda con fondo sutil ── */
  .phoneConteiner {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .icono-phone {
    height: 24px !important;
    width: 24px !important;
    margin-right: 0 !important;
  }
  /* Enlace ocupa toda el área táctil del contenedor */
  .phoneConteiner a.phone-adsa {
    padding: 10px !important;
    gap: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Hover/active: feedback visual claro en mobile */
  .phoneConteiner a.phone-adsa:hover,
  .phoneConteiner a.phone-adsa:active {
    background: rgba(0, 0, 0, 0.06);
  }
  /* Cuando las etiquetas están activas: layout completo que no se desborde */
  .show-label-mobile .phoneConteiner {
    min-width: 0;
    min-height: unset;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .show-label-mobile .icono-phone {
    flex-shrink: 0;
    margin-right: 8px !important;
  }
  .show-label-mobile .phoneConteiner a.phone-adsa {
    padding: 6px 8px !important;
    gap: 6px;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* El número y la etiqueta se ajustan al ancho disponible */
  .show-label-mobile .phone-labels {
    display: block !important;
    min-width: 0;
    overflow: hidden;
  }
  .show-label-mobile .phone-labels label {
    display: block !important;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    line-height: 1.3;
  }
  .show-label-mobile .phone-etiqueta {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    line-height: 1.3;
  }
  /* Etiqueta top/bottom ocupa ancho completo */
  .show-label-mobile .etiqueta-top,
  .show-label-mobile .etiqueta-bottom {
    display: block !important;
    width: 100%;
  }
  /* Etiqueta inline puede saltar a segunda línea */
  .show-label-mobile .etiqueta-inline {
    display: inline !important;
    flex-shrink: 1;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
  }
  /* Contenedor general: columna para que cada teléfono ocupe su línea */
  .show-label-mobile.generalPhones {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }
  /* Inline bar con etiquetas: también apilar */
  .show-label-mobile.generalPhones.layout-inline {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* Grids → 2 columnas iguales */
  .generalPhones.layout-grid2,
  .generalPhones.layout-grid3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  /* Inline bar: wrap, sin separadores, gap cómodo */
  .generalPhones.layout-inline {
    flex-wrap: wrap;
    gap: 4px;
  }
  .generalPhones.layout-inline .inline-sep {
    display: none !important;
  }
  /* Inline bar: icono ligeramente más grande para mejor toque */
  .generalPhones.layout-inline .icono-phone {
    height: 20px !important;
    width: 20px !important;
  }
  /* Row: wrap */
  .generalPhones.layout-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Lista/divided: alineación izquierda natural */
  .generalPhones.layout-list .phoneConteiner,
  .generalPhones.layout-divided .phoneConteiner {
    align-items: center;
  }
}
/* ═══════════════════════════════════════════════════════
   TEMAS VISUALES
   ═══════════════════════════════════════════════════════ */
/* 0 — SIN ESTILO */
/* ────────────────────────────────────────────────────────
   1. MINIMAL LINE — solo línea inferior, ultra limpio
   ──────────────────────────────────────────────────────── */
.tema-minimal .phone-adsa {
  background: transparent;
  color: inherit !important;
  padding: 4px 0;
  border-radius: 0;
  font-weight: 500;
  border: none;
  border-bottom: 1.5px solid currentColor;
  box-shadow: none;
  transition: opacity 0.2s ease;
}

.tema-minimal .phone-adsa:hover {
  opacity: 0.6;
}

.tema-minimal .icono-phone {
  margin-right: 6px;
}

/* ────────────────────────────────────────────────────────
   2. MINIMAL CHIP — pastilla neutra
   ──────────────────────────────────────────────────────── */
.tema-chip .phone-adsa {
  background: #f3f4f6;
  color: #111827 !important;
  padding: 7px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9em;
  border: 1px solid #e5e7eb;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.tema-chip .phone-adsa:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
  transform: translateY(-1px);
}

.tema-chip .icono-phone svg {
  fill: #374151;
}

/* ────────────────────────────────────────────────────────
   3. CLEAN CARD — tarjeta blanca sin sombra
   ──────────────────────────────────────────────────────── */
.tema-card .phone-adsa {
  background: #fafafa;
  color: #1a1a1a !important;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 500;
  border: 1px solid #ebebeb;
  transition: background 0.2s, box-shadow 0.2s;
}

.tema-card .phone-adsa:hover {
  background: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.tema-card .icono-phone svg {
  fill: #1a1a1a;
}

/* ────────────────────────────────────────────────────────
   4. SOLID FLAT — fondo sólido oscuro
   ──────────────────────────────────────────────────────── */
.tema-solid .phone-adsa {
  background: #111827;
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.25s, transform 0.15s;
}

.tema-solid .phone-adsa:hover {
  background: #1f2937;
  transform: translateY(-1px);
}

.tema-solid .icono-phone svg {
  fill: #fff;
}

/* ────────────────────────────────────────────────────────
   5. OUTLINE — borde limpio, sin relleno
   ──────────────────────────────────────────────────────── */
.tema-outline .phone-adsa {
  background: transparent;
  border: 2px solid currentColor;
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.2s;
}

.tema-outline .phone-adsa:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* ────────────────────────────────────────────────────────
   6. SOFT SHADOW — card flotante
   ──────────────────────────────────────────────────────── */
.tema-soft .phone-adsa {
  background: #fff;
  color: #111827 !important;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.25s, transform 0.15s;
}

.tema-soft .phone-adsa:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.tema-soft .icono-phone svg {
  fill: #111827;
}

/* ────────────────────────────────────────────────────────
   7. PILL GRADIENT — degradado vibrante
   ──────────────────────────────────────────────────────── */
.tema-gradient .phone-adsa {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
  transition: box-shadow 0.25s, transform 0.15s, filter 0.2s;
}

.tema-gradient .phone-adsa:hover {
  box-shadow: 0 6px 22px rgba(99, 102, 241, 0.6);
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.tema-gradient .icono-phone svg {
  fill: #fff;
}

/* ────────────────────────────────────────────────────────
   8. GLASS DARK — cristal oscuro
   ──────────────────────────────────────────────────────── */
.tema-glass .phone-adsa {
  background: rgba(15, 15, 15, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 14px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: background 0.2s, box-shadow 0.2s;
}

.tema-glass .phone-adsa:hover {
  background: rgba(15, 15, 15, 0.72);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

.tema-glass .icono-phone svg {
  fill: #fff;
}

/* ────────────────────────────────────────────────────────
   9. FROSTED LIGHT — cristal claro
   ──────────────────────────────────────────────────────── */
.tema-frosted .phone-adsa {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 14px;
  font-weight: 600;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.tema-frosted .phone-adsa:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.tema-frosted .icono-phone svg {
  fill: #fff;
}

/* ────────────────────────────────────────────────────────
   10. NEON CYAN
   ──────────────────────────────────────────────────────── */
.tema-neon .phone-adsa {
  background: #050d14;
  border: 2px solid #00f5d4;
  color: #00f5d4 !important;
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(0, 245, 212, 0.8);
  box-shadow: 0 0 10px rgba(0, 245, 212, 0.3), inset 0 0 10px rgba(0, 245, 212, 0.05);
  transition: box-shadow 0.25s, text-shadow 0.25s;
}

.tema-neon .phone-adsa:hover {
  box-shadow: 0 0 22px rgba(0, 245, 212, 0.65), inset 0 0 18px rgba(0, 245, 212, 0.12);
  text-shadow: 0 0 16px #00f5d4;
}

.tema-neon .icono-phone svg {
  fill: #00f5d4;
  filter: drop-shadow(0 0 5px rgba(0, 245, 212, 0.8));
}

/* ────────────────────────────────────────────────────────
   11. NEON MAGENTA
   ──────────────────────────────────────────────────────── */
.tema-neon-pink .phone-adsa {
  background: #0d0010;
  border: 2px solid #f700ff;
  color: #f700ff !important;
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(247, 0, 255, 0.8);
  box-shadow: 0 0 10px rgba(247, 0, 255, 0.3), inset 0 0 10px rgba(247, 0, 255, 0.05);
  transition: box-shadow 0.25s, text-shadow 0.25s;
}

.tema-neon-pink .phone-adsa:hover {
  box-shadow: 0 0 22px rgba(247, 0, 255, 0.65);
  text-shadow: 0 0 16px #f700ff;
}

.tema-neon-pink .icono-phone svg {
  fill: #f700ff;
  filter: drop-shadow(0 0 5px rgba(247, 0, 255, 0.8));
}

/* ────────────────────────────────────────────────────────
   12. AURORA — gradiente animado
   ──────────────────────────────────────────────────────── */
.tema-aurora .phone-adsa {
  background: linear-gradient(270deg, #00c9ff, #92fe9d, #00c9ff, #a78bfa);
  background-size: 400% 400%;
  animation: auroraMove 6s ease infinite;
  color: #0d1117 !important;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 18px rgba(0, 201, 255, 0.35);
  transition: box-shadow 0.3s, transform 0.15s;
}

.tema-aurora .phone-adsa:hover {
  box-shadow: 0 6px 28px rgba(0, 201, 255, 0.5);
  transform: translateY(-2px);
}

.tema-aurora .icono-phone svg {
  fill: #0d1117;
}

@keyframes auroraMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* ────────────────────────────────────────────────────────
   13. RAINBOW BORDER
   ──────────────────────────────────────────────────────── */
.tema-rainbow .phone-adsa {
  position: relative;
  background: #fff;
  color: #111827 !important;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 700;
  border: none;
  z-index: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s, box-shadow 0.2s;
}

.tema-rainbow .phone-adsa::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  background: linear-gradient(90deg, #ff0080, #ff6a00, #ffcc00, #00e676, #00b0ff, #651fff, #ff0080);
  background-size: 300% 100%;
  animation: rainbowShift 3s linear infinite;
  z-index: -1;
}

.tema-rainbow .phone-adsa::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 9px;
  background: #fff;
  z-index: -1;
}

.tema-rainbow .phone-adsa:hover {
  transform: translateY(-2px);
}

.tema-rainbow .icono-phone svg {
  fill: #111827;
}

@keyframes rainbowShift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}
/* ════════════════════════════════════════════════════════
   NUEVOS TEMAS MODERNOS
   ════════════════════════════════════════════════════════ */
/* ────────────────────────────────────────────────────────
   14. INK — tipografía bold, sin decoración, hover slide
   ──────────────────────────────────────────────────────── */
.tema-ink .phone-adsa {
  background: transparent;
  color: inherit !important;
  padding: 2px 0;
  font-weight: 800;
  font-size: 1.05em;
  letter-spacing: -0.5px;
  border: none;
  position: relative;
  overflow: hidden;
  transition: color 0.25s ease;
}

.tema-ink .phone-adsa::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tema-ink .phone-adsa:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.tema-ink .icono-phone {
  margin-right: 7px;
}

/* ────────────────────────────────────────────────────────
   15. ZINC — superficie gris zinc elegante
   ──────────────────────────────────────────────────────── */
.tema-zinc .phone-adsa {
  background: #18181b;
  color: #f4f4f5 !important;
  padding: 9px 20px;
  border-radius: 6px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border: 1px solid #27272a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background 0.2s, box-shadow 0.2s;
}

.tema-zinc .phone-adsa:hover {
  background: #27272a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 1px #3f3f46;
}

.tema-zinc .icono-phone svg {
  fill: #a1a1aa;
}

.tema-zinc .phone-etiqueta {
  color: #71717a;
  opacity: 1;
}

/* ────────────────────────────────────────────────────────
   16. IVORY — crema cálido premium
   ──────────────────────────────────────────────────────── */
.tema-ivory .phone-adsa {
  background: #fdf6ec;
  color: #292524 !important;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  border: 1px solid #e7ddd1;
  box-shadow: 0 1px 3px rgba(120, 80, 20, 0.06);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.tema-ivory .phone-adsa:hover {
  background: #f5ead7;
  box-shadow: 0 3px 12px rgba(120, 80, 20, 0.1);
  transform: translateY(-1px);
}

.tema-ivory .icono-phone svg {
  fill: #78350f;
}

.tema-ivory .phone-etiqueta {
  color: #92400e;
  opacity: 1;
}

/* ────────────────────────────────────────────────────────
   17. SLATE — azul pizarra corporativo
   ──────────────────────────────────────────────────────── */
.tema-slate .phone-adsa {
  background: #1e293b;
  color: #e2e8f0 !important;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 600;
  border: 1px solid #334155;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.tema-slate .phone-adsa:hover {
  background: #273549;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.4);
  transform: translateY(-1px);
}

.tema-slate .icono-phone svg {
  fill: #94a3b8;
}

.tema-slate .phone-etiqueta {
  color: #64748b;
  opacity: 1;
}

/* ────────────────────────────────────────────────────────
   18. EMBER — acento naranja ardiente
   ──────────────────────────────────────────────────────── */
.tema-ember .phone-adsa {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.4);
  transition: box-shadow 0.25s, transform 0.15s, filter 0.2s;
}

.tema-ember .phone-adsa:hover {
  box-shadow: 0 6px 22px rgba(234, 88, 12, 0.55);
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.tema-ember .icono-phone svg {
  fill: #fff;
}

/* ────────────────────────────────────────────────────────
   19. ARCTIC — azul hielo limpio
   ──────────────────────────────────────────────────────── */
.tema-arctic .phone-adsa {
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  color: #1d4ed8 !important;
  padding: 10px 22px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid #bfdbfe;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
  transition: box-shadow 0.2s, transform 0.15s;
}

.tema-arctic .phone-adsa:hover {
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.22);
  transform: translateY(-1px);
}

.tema-arctic .icono-phone svg {
  fill: #2563eb;
}

.tema-arctic .phone-etiqueta {
  color: #3b82f6;
  opacity: 1;
}

/* ────────────────────────────────────────────────────────
   20. OBSIDIAN — negro con acento blanco preciso
   ──────────────────────────────────────────────────────── */
.tema-obsidian .phone-adsa {
  background: #09090b;
  color: #fafafa !important;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 32px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.25s, transform 0.15s;
}

.tema-obsidian .phone-adsa:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 40px rgba(0, 0, 0, 0.7);
  transform: translateY(-1px);
}

.tema-obsidian .icono-phone svg {
  fill: #e4e4e7;
}

.tema-obsidian .phone-etiqueta {
  color: #71717a;
  opacity: 1;
}

/* ────────────────────────────────────────────────────────
   21. SAGE — verde salvia orgánico
   ──────────────────────────────────────────────────────── */
.tema-sage .phone-adsa {
  background: #f0fdf4;
  color: #166534 !important;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  border: 1px solid #bbf7d0;
  box-shadow: 0 1px 4px rgba(22, 101, 52, 0.08);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.tema-sage .phone-adsa:hover {
  background: #dcfce7;
  box-shadow: 0 3px 12px rgba(22, 101, 52, 0.14);
  transform: translateY(-1px);
}

.tema-sage .icono-phone svg {
  fill: #15803d;
}

.tema-sage .phone-etiqueta {
  color: #16a34a;
  opacity: 1;
}

/* ────────────────────────────────────────────────────────
   22. VELVET — morado profundo aterciopelado
   ──────────────────────────────────────────────────────── */
.tema-velvet .phone-adsa {
  background: linear-gradient(135deg, #3b0764, #581c87);
  color: #e9d5ff !important;
  padding: 10px 22px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid rgba(167, 139, 250, 0.2);
  box-shadow: 0 4px 18px rgba(88, 28, 135, 0.45);
  transition: box-shadow 0.25s, transform 0.15s;
}

.tema-velvet .phone-adsa:hover {
  box-shadow: 0 6px 28px rgba(88, 28, 135, 0.6);
  transform: translateY(-2px);
}

.tema-velvet .icono-phone svg {
  fill: #c4b5fd;
}

.tema-velvet .phone-etiqueta {
  color: #a78bfa;
  opacity: 1;
}

/* ────────────────────────────────────────────────────────
   23. MONO BORDER — borde único con línea lateral izquierda
   ──────────────────────────────────────────────────────── */
.tema-mono-border .phoneConteiner {
  border-left: 3px solid currentColor;
  padding-left: 12px;
}

.tema-mono-border .phone-adsa {
  background: transparent;
  color: inherit !important;
  padding: 6px 0;
  font-weight: 600;
  border: none;
  transition: opacity 0.2s, transform 0.15s;
}

.tema-mono-border .phone-adsa:hover {
  opacity: 0.7;
  transform: translateX(3px);
}

.tema-mono-border .icono-phone {
  margin-right: 8px;
}

/* ────────────────────────────────────────────────────────
   24. TICKER — fondo oscuro número en mono grande
   ──────────────────────────────────────────────────────── */
.tema-ticker .phone-adsa {
  background: #000;
  color: #00ff87 !important;
  padding: 8px 18px;
  border-radius: 6px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: 2px;
  border: 1px solid rgba(0, 255, 135, 0.2);
  box-shadow: 0 0 14px rgba(0, 255, 135, 0.18);
  transition: box-shadow 0.25s, letter-spacing 0.2s;
}

.tema-ticker .phone-adsa:hover {
  box-shadow: 0 0 26px rgba(0, 255, 135, 0.35);
  letter-spacing: 3px;
}

.tema-ticker .icono-phone svg {
  fill: #00ff87;
}

.tema-ticker .phone-etiqueta {
  color: #00ff87;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════
   ANIMACIONES — aplicadas solo al icono, no al contenedor
   ═══════════════════════════════════════════════════════ */
.icono-phone.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite both;
}

@keyframes heartbeat {
  from, 45% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.91);
  }
  17% {
    transform: scale(0.98);
  }
  33% {
    transform: scale(0.87);
  }
}
.icono-phone.pulsate-bck {
  animation: pulsate-bck 0.5s ease-in-out infinite both;
}

@keyframes pulsate-bck {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
}
/* ── WhatsApp: icono con tinte verde cuando no hay override de tema ── */
.is-whatsapp .icono-phone svg path {
  fill: #25D366;
}

/* Si el tema ya define color de icono, no sobreescribir */
.tema-solid .is-whatsapp .icono-phone svg path,
.tema-gradient .is-whatsapp .icono-phone svg path,
.tema-glass .is-whatsapp .icono-phone svg path,
.tema-frosted .is-whatsapp .icono-phone svg path,
.tema-neon .is-whatsapp .icono-phone svg path,
.tema-neon-pink .is-whatsapp .icono-phone svg path,
.tema-aurora .is-whatsapp .icono-phone svg path,
.tema-ember .is-whatsapp .icono-phone svg path,
.tema-velvet .is-whatsapp .icono-phone svg path,
.tema-obsidian .is-whatsapp .icono-phone svg path,
.tema-slate .is-whatsapp .icono-phone svg path,
.tema-zinc .is-whatsapp .icono-phone svg path,
.tema-ticker .is-whatsapp .icono-phone svg path {
  fill: inherit;
}
@media (max-width: 767px) { .phoneConteiner a {
  display: flex;
  align-items: center;
  justify-content: center !important;
} }
@charset "UTF-8";
/* ============================================
   CONTENEDOR RAÍZ — se adapta al padre
   ============================================ */
.widget-260504 {
  position: relative;
  display: inline-block;
  max-width: 100%;
  min-height: 35px;
  text-align: left;
  box-sizing: border-box;
}

.widget-260504 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

/* Bloque raíz interno — nunca desborda */
.contenedorGralWP {
  display: inline-block;
  max-width: 100%;
  position: relative;
}

/* Mensaje de advertencia */
.nohay {
  color: #ff6b00 !important;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  background: #fff3e0;
  border-radius: 4px;
  border-left: 3px solid #ff6b00;
  display: inline-block;
}

/* ============================================
   ENLACE BASE
   ============================================ */
.whatsapp-link {
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.widget-260504 .text {
  padding: 0 !important;
  line-height: 1.5;
  font-weight: 500;
}

/* ============================================
   BASE COMPARTIDA PARA EFECTOS HOVER
   ============================================ */
.dmWidget {
  overflow: hidden;
  position: relative;
  max-width: 100%;
  isolation: isolate;
}

/* ============================================
   EFECTO 1: SHIMMER — Reflejo diagonal
   ============================================ */
.dmWidget.hover-shimmer {
  overflow: hidden !important;
}

.dmWidget.hover-shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 75%, transparent 100%);
  transform: skewX(-15deg);
  transition: none;
  pointer-events: none;
  z-index: 2;
}

.whatsapp-link:hover .dmWidget.hover-shimmer::before {
  left: 120%;
  transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.btnGradientPop.hover-shimmer::before {
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 75%, transparent 100%);
}

.btnNeumorphism.hover-shimmer::before,
.btnAppleStyle.hover-shimmer::before,
.btnMinimalOutline.hover-shimmer::before {
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 75%, transparent 100%);
}

/* ============================================
   EFECTO 2: RIPPLE — Onda expansiva
   ============================================ */
.dmWidget.hover-ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: none;
}

@keyframes ripple-expand {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }
  100% {
    width: 320%;
    height: 320%;
    opacity: 0;
  }
}
.whatsapp-link:hover .dmWidget.hover-ripple::after {
  animation: ripple-expand 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.btnNeumorphism.hover-ripple::after,
.btnAppleStyle.hover-ripple::after,
.btnMinimalOutline.hover-ripple::after {
  background: rgba(18, 140, 126, 0.15);
}

/* ============================================
   EFECTO 3: GLOW AURA
   ============================================ */
.dmWidget.hover-glow-aura {
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.whatsapp-link:hover .dmWidget.hover-glow-aura {
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 0 20px 4px rgba(37, 211, 102, 0.45), 0 0 50px 10px rgba(37, 211, 102, 0.2), 0 8px 25px rgba(37, 211, 102, 0.35) !important;
}

.whatsapp-link:hover .btnGradientPop.hover-glow-aura {
  box-shadow: 0 0 20px 4px rgba(196, 113, 237, 0.5), 0 0 50px 10px rgba(196, 113, 237, 0.25), 0 8px 25px rgba(196, 113, 237, 0.4) !important;
}

.whatsapp-link:hover .btnNeumorphism.hover-glow-aura {
  box-shadow: 0 0 20px 4px rgba(37, 211, 102, 0.3), 0 0 40px 8px rgba(37, 211, 102, 0.12), inset 4px 4px 8px rgba(7, 94, 84, 0.15), inset -4px -4px 8px rgba(255, 255, 255, 0.9) !important;
}

.whatsapp-link:hover .btnAppleStyle.hover-glow-aura {
  box-shadow: 0 0 20px 4px rgba(37, 211, 102, 0.25), 0 0 40px 8px rgba(37, 211, 102, 0.1), 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.whatsapp-link:hover .btnGold.hover-glow-aura,
.whatsapp-link:hover .btnGoldDark.hover-glow-aura {
  box-shadow: 0 0 20px 4px rgba(212, 175, 55, 0.55), 0 0 50px 10px rgba(212, 175, 55, 0.25), 0 8px 25px rgba(180, 140, 20, 0.4) !important;
}

.whatsapp-link:hover .btnRose.hover-glow-aura {
  box-shadow: 0 0 20px 4px rgba(244, 114, 182, 0.5), 0 0 50px 10px rgba(244, 114, 182, 0.25), 0 8px 25px rgba(236, 72, 153, 0.4) !important;
}

.whatsapp-link:hover .btnNeon.hover-glow-aura {
  box-shadow: 0 0 20px 6px rgba(0, 255, 136, 0.6), 0 0 50px 12px rgba(0, 255, 136, 0.3), 0 8px 25px rgba(0, 200, 100, 0.5) !important;
}

.whatsapp-link:hover .btnDark.hover-glow-aura {
  box-shadow: 0 0 20px 4px rgba(37, 211, 102, 0.4), 0 0 50px 10px rgba(37, 211, 102, 0.2), 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================
   EFECTO 4: LIFT
   ============================================ */
.dmWidget.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.whatsapp-link:hover .dmWidget.hover-lift {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 20px 40px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06) !important;
}

.whatsapp-link:hover .btnDisenoDos.hover-lift {
  box-shadow: 0 10px 20px rgba(18, 140, 126, 0.35), 0 20px 40px rgba(18, 140, 126, 0.18), 0 4px 8px rgba(7, 94, 84, 0.15) !important;
}

.whatsapp-link:hover .btnGlassmorphism.hover-lift {
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.28), 0 20px 48px rgba(37, 211, 102, 0.14) !important;
}

.whatsapp-link:hover .btnGradientPop.hover-lift {
  box-shadow: 0 10px 24px rgba(196, 113, 237, 0.45), 0 20px 48px rgba(196, 113, 237, 0.22) !important;
}

.whatsapp-link:hover .btnNeumorphism.hover-lift {
  box-shadow: 0 10px 20px rgba(7, 94, 84, 0.2), 0 20px 40px rgba(7, 94, 84, 0.1), -4px -4px 10px rgba(255, 255, 255, 0.8) !important;
}

/* ============================================
   ANIMACIONES DE ENTRADA (loop)
   ============================================ */
/* 1. PULSO */
.animated-pulso {
  animation: anim-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.animated-pulso::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.4);
  transform: translate(-50%, -50%);
  animation: anim-pulse-ring 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes anim-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes anim-pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.35);
    opacity: 0;
  }
}
/* 2. BOUNCE */
.animated-bounce {
  animation: anim-bounce 2s ease-in-out infinite;
}

@keyframes anim-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-5px);
  }
}
/* 3. SHAKE */
.animated-shake {
  animation: anim-shake 2s ease-in-out infinite;
}

@keyframes anim-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}
/* 4. SWING */
.animated-swing {
  transform-origin: top center;
  animation: anim-swing 2s ease-in-out infinite;
}

@keyframes anim-swing {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}
/* 5. GLOW */
.animated-glow {
  animation: anim-glow 2s ease-in-out infinite;
}

@keyframes anim-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(37, 211, 102, 0.5), 0 0 10px rgba(37, 211, 102, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.8), 0 0 30px rgba(37, 211, 102, 0.5), 0 0 40px rgba(37, 211, 102, 0.3);
  }
}
/* Velocidades */
.speed-lento {
  animation-duration: 3s !important;
}

.speed-lento::before {
  animation-duration: 3s !important;
}

.speed-normal {
  animation-duration: 2s !important;
}

.speed-normal::before {
  animation-duration: 2s !important;
}

.speed-rapido {
  animation-duration: 1.2s !important;
}

.speed-rapido::before {
  animation-duration: 1.2s !important;
}

/* ============================================
   MENSAJE DE BIENVENIDA
   ============================================ */
.wa-welcome-bubble {
  position: absolute;
  bottom: calc(100% + 15px);
  left: 0;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  max-width: 280px;
  min-width: 220px;
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  pointer-events: all;
}

.wa-welcome-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
}

.wa-welcome-bubble.show-below {
  bottom: auto;
  top: calc(100% + 15px);
  transform: translateY(-10px) scale(0.95);
}

.wa-welcome-bubble.show-below::after {
  top: auto;
  bottom: 100%;
  border-top: none;
  border-bottom: 10px solid #fff;
}

.wa-welcome-bubble.show-below.wa-welcome-visible {
  transform: translateY(0) scale(1);
}

.wa-welcome-bubble.wa-welcome-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wa-welcome-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #999;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.wa-welcome-close:hover {
  background: #f0f0f0;
  color: #333;
}

.wa-welcome-content {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
  cursor: pointer;
}

.wa-welcome-content:hover {
  opacity: 0.9;
}

.wa-welcome-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E8F5E9;
  border-radius: 50%;
}

.wa-welcome-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 0;
  padding-right: 20px;
}

/* ============================================
   CLASES SVG ÍCONOS DISEÑOS 2 y 3
   ============================================ */
.tamanoIconoW {
  width: 24px;
  height: 24px;
  display: block;
  fill: #fff;
}

.tamanoIconoW2 {
  width: 28px;
  height: 28px;
  display: block;
}

/* ============================================
   TOOLTIP
   ============================================ */
.wa-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 10000;
  left: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Tooltip arriba (por defecto) */
.wa-tooltip:not(.tooltip-below) {
  bottom: calc(100% + 12px);
  top: auto;
  transform: translateX(-50%) translateY(-10px);
}

.wa-tooltip:not(.tooltip-below)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
}

/* Tooltip abajo (cuando el widget está en la parte superior) */
.wa-tooltip.tooltip-below {
  top: calc(100% + 12px);
  bottom: auto;
  transform: translateX(-50%) translateY(10px);
}

.wa-tooltip.tooltip-below::after {
  content: "";
  position: absolute;
  bottom: 100%;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.9);
}

.wa-tooltip.tooltip-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.wa-tooltip.tooltip-touch {
  pointer-events: auto;
}

/* ============================================
   BADGE
   ============================================ */
.whatsapp-link {
  position: relative !important;
}

.wa-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 12px;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  pointer-events: none;
}

.wa-badge.badge-dot {
  width: 14px;
  height: 14px;
  background: #ff4444;
  border: 2px solid #fff;
  top: -4px;
  right: -4px;
  border-radius: 50%;
  animation: badge-pulse 2s infinite;
}

.wa-badge.badge-texto {
  background: #ff4444;
  color: #fff;
  padding: 3px 8px;
  min-width: 45px;
  top: -10px;
  right: -12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wa-badge.badge-numero {
  background: #ff4444;
  color: #fff;
  padding: 2px 6px;
  min-width: 20px;
  height: 20px;
  top: -10px;
  right: -10px;
}

/* Posiciones del badge */
.wa-badge.badge-pos-top-right {
  top: -10px;
  right: -10px;
  left: auto;
  bottom: auto;
}

.wa-badge.badge-pos-top-left {
  top: -10px;
  left: -10px;
  right: auto;
  bottom: auto;
}

.wa-badge.badge-pos-bottom-right {
  bottom: -10px;
  right: -10px;
  top: auto;
  left: auto;
}

.wa-badge.badge-pos-bottom-left {
  bottom: -10px;
  left: -10px;
  top: auto;
  right: auto;
}

.wa-badge.badge-dot.badge-pos-top-right {
  top: -4px;
  right: -4px;
  left: auto;
  bottom: auto;
}

.wa-badge.badge-dot.badge-pos-top-left {
  top: -4px;
  left: -4px;
  right: auto;
  bottom: auto;
}

.wa-badge.badge-dot.badge-pos-bottom-right {
  bottom: -4px;
  right: -4px;
  top: auto;
  left: auto;
}

.wa-badge.badge-dot.badge-pos-bottom-left {
  bottom: -4px;
  left: -4px;
  top: auto;
  right: auto;
}

@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}
/* ============================================
   SHARED BUTTON BASE — todos los botones
   usan display:inline-flex y fluyen normalmente
   ============================================ */
.btnDisenoDos,
.btnDisenotres,
.btnGlassmorphism,
.btnNeumorphism,
.btnGradientPop,
.btnMinimalOutline,
.btnAppleStyle,
.btnGold,
.btnGoldDark,
.btnRose,
.btnNeon,
.btnDark,
.btnChatCard,
.btnPillBadge,
.btnRetro {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
}

/* ============================================
   DISEÑO 1 - Solo Ícono Redondo
   ============================================ */
.btnSoloIcono {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px;
  min-height: 60px;
  border-radius: 50% !important;
  background: #25D366 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 !important;
  cursor: pointer;
}

.btnSoloIcono:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6);
}

.iconoSoloSvg {
  width: 32px;
  height: 32px;
  fill: #ffffff;
  display: block;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.btnSoloIcono:hover .iconoSoloSvg {
  transform: scale(1.1) rotate(-5deg);
}

/* Mobile: mantiene el mismo círculo */
@media (max-width: 767px) {
  .widget-260504 .btnSoloIcono {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }
}
/* ============================================
   DISEÑO 2 - Redondeado
   ============================================ */
.btnDisenoDos {
  background: linear-gradient(135deg, #128C7E 0%, #25D366 100%) !important;
  color: #fff !important;
  width: auto !important;
  min-width: 180px;
  height: auto !important;
  min-height: 50px;
  border-radius: 30px;
  padding: 12px 24px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(18, 140, 126, 0.4);
  border: none !important;
  font-size: 15px;
  font-weight: 600;
}

.btnDisenoDos:hover {
  background: linear-gradient(135deg, #075E54 0%, #128C7E 100%) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(7, 94, 84, 0.5);
}

.btnDisenoDos span {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  text-decoration: none !important;
}

.iconoDisenoDos {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 120px;
  max-height: 120px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.iconoDisenoDos svg {
  fill: #fff;
  transition: all 0.3s ease;
}

.btnDisenoDos:hover .iconoDisenoDos {
  transform: scale(1.1) rotate(-5deg);
}

/* ============================================
   DISEÑO 3 - Texto + Icono
   ============================================ */
.btnDisenotres {
  background-color: transparent !important;
  color: #128C7E !important;
  width: auto !important;
  min-width: 140px;
  height: auto !important;
  min-height: 42px;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 10px 15px;
  border: 2px solid transparent !important;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 15px;
  font-weight: 600;
}

.btnDisenotres:hover {
  background-color: #f0f9f6 !important;
  border-color: #25D366 !important;
  transform: translateX(5px);
}

.btnDisenotres span {
  margin: 0 !important;
  padding: 0 !important;
  color: #128C7E !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.btnDisenotres:hover span {
  color: #075E54 !important;
}

.iconoDisenotres {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  max-width: 120px;
  max-height: 120px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btnDisenotres:hover .iconoDisenotres {
  transform: scale(1.15) rotate(10deg);
}

/* ============================================
   DISEÑO 4 - Solo Icono Flotante
   ============================================ */
.iconoDisenoCuatro {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px;
  min-height: 60px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
}

.iconoDisenoCuatro svg {
  width: 100% !important;
  height: 100% !important;
  fill: #25D366 !important;
  filter: drop-shadow(0 4px 12px rgba(37, 211, 102, 0.4));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.whatsapp-link:hover .iconoDisenoCuatro svg {
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 6px 20px rgba(37, 211, 102, 0.7));
}

/* ============================================
   DISEÑO 5 - Glassmorphism
   ============================================ */
.btnGlassmorphism {
  background: rgba(37, 211, 102, 0.15) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #075E54 !important;
  width: auto !important;
  min-width: 190px;
  height: auto !important;
  min-height: 52px;
  border-radius: 20px;
  padding: 14px 28px;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.15);
  font-size: 16px;
  font-weight: 600;
}

.btnGlassmorphism:hover {
  background: rgba(37, 211, 102, 0.25) !important;
  border-color: rgba(37, 211, 102, 0.5) !important;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 40px rgba(37, 211, 102, 0.3);
}

.btnGlassmorphism span {
  margin: 0 !important;
  padding: 0 !important;
  color: #075E54 !important;
  text-decoration: none !important;
}

.iconoGlass {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}

.iconoGlass svg {
  fill: #25D366;
  filter: drop-shadow(0 2px 8px rgba(37, 211, 102, 0.3));
  transition: all 0.4s ease;
}

.btnGlassmorphism:hover .iconoGlass {
  transform: scale(1.15) rotate(-10deg);
}

/* ============================================
   DISEÑO 6 - Neumorphism
   ============================================ */
.btnNeumorphism {
  background: #e8f5e9 !important;
  color: #075E54 !important;
  width: auto !important;
  min-width: 185px;
  height: auto !important;
  min-height: 52px;
  border-radius: 15px;
  padding: 14px 26px;
  border: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 8px 8px 16px rgba(7, 94, 84, 0.15), -8px -8px 16px rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 600;
}

.btnNeumorphism:hover {
  box-shadow: inset 4px 4px 8px rgba(7, 94, 84, 0.15), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
  transform: scale(0.98);
}

.btnNeumorphism span {
  margin: 0 !important;
  padding: 0 !important;
  color: #075E54 !important;
  text-decoration: none !important;
}

.iconoNeumo {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.iconoNeumo svg {
  fill: #25D366;
  transition: all 0.3s ease;
}

.btnNeumorphism:hover .iconoNeumo {
  transform: scale(1.1) rotate(5deg);
}

/* ============================================
   DISEÑO 7 - Gradient Pop
   ============================================ */
.btnGradientPop {
  background: linear-gradient(135deg, var(--gradient-color1, #FF6B9D) 0%, var(--gradient-color2, #C471ED) 50%, var(--gradient-color3, #12C2E9) 100%) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  width: auto !important;
  min-width: 170px;
  height: auto !important;
  min-height: 48px;
  border-radius: 26px;
  padding: 12px 24px;
  border: none !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(196, 113, 237, 0.4);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.btnGradientPop:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 30px rgba(196, 113, 237, 0.6);
  animation: gradient-shift 1s ease infinite;
}

.btnGradientPop span {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  text-decoration: none !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.iconoGradient {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease;
}

.iconoGradient svg {
  fill: #fff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: all 0.5s ease;
}

.btnGradientPop:hover .iconoGradient {
  transform: scale(1.2) rotate(360deg);
}

/* ============================================
   DISEÑO 8 - Minimal Outline
   ============================================ */
.btnMinimalOutline {
  background: transparent !important;
  color: #075E54 !important;
  width: auto !important;
  min-width: 150px;
  height: auto !important;
  min-height: 44px;
  border-radius: 10px;
  padding: 10px 20px;
  border: 2px solid #128C7E !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
  font-size: 15px;
  font-weight: 600;
}

.btnMinimalOutline:hover {
  background: #128C7E !important;
  color: #fff !important;
  border-color: #128C7E !important;
  transform: scale(1.03);
}

.btnMinimalOutline span {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.btnMinimalOutline:hover span {
  color: #fff !important;
}

.iconoMinimal {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.iconoMinimal svg {
  fill: #128C7E;
  transition: all 0.3s ease;
}

.btnMinimalOutline:hover .iconoMinimal svg {
  fill: #fff;
}

.btnMinimalOutline:hover .iconoMinimal {
  transform: scale(1.1);
}

/* ============================================
   DISEÑO 9 - Apple Style
   ============================================ */
.btnAppleStyle {
  background: #fff !important;
  color: #000 !important;
  width: auto !important;
  min-width: 160px;
  height: auto !important;
  min-height: 46px;
  border-radius: 12px;
  padding: 12px 24px;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.3px;
}

.btnAppleStyle:hover {
  background: #f5f5f7 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btnAppleStyle span {
  margin: 0 !important;
  padding: 0 !important;
  color: #000 !important;
  text-decoration: none !important;
}

.iconoApple {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}

.iconoApple svg {
  fill: #25D366;
  transition: all 0.25s ease;
}

.btnAppleStyle:hover .iconoApple {
  transform: scale(1.08);
}

/* ============================================
   DISEÑO 10 - Gold Luxury
   ============================================ */
.btnGold {
  background: linear-gradient(135deg, #BF953F 0%, #FCF6BA 40%, #D4AF37 60%, #FBF5B7 80%, #AA771C 100%) !important;
  background-size: 200% 200% !important;
  color: #3a2000 !important;
  width: auto !important;
  min-width: 170px;
  height: auto !important;
  min-height: 50px;
  border-radius: 27px;
  padding: 12px 24px;
  border: 1px solid rgba(212, 175, 55, 0.6) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  animation: gold-shimmer 4s ease infinite;
}

@keyframes gold-shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.btnGold:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 28px rgba(212, 175, 55, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btnGold span {
  margin: 0 !important;
  padding: 0 !important;
  color: #3a2000 !important;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

.iconoGold {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}

.iconoGold svg {
  fill: #3a2000;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.4));
  transition: all 0.4s ease;
}

.btnGold:hover .iconoGold {
  transform: scale(1.15) rotate(-5deg);
}

.btnGold.hover-shimmer::before {
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 75%, transparent 100%);
}

/* ============================================
   DISEÑO 11 - Gold Dark
   ============================================ */
.btnGoldDark {
  background: linear-gradient(135deg, #1a0f00 0%, #3d2b00 30%, #6b4a00 60%, #3d2b00 80%, #1a0f00 100%) !important;
  background-size: 200% 200% !important;
  color: #D4AF37 !important;
  width: auto !important;
  min-width: 170px;
  height: auto !important;
  min-height: 50px;
  border-radius: 27px;
  padding: 12px 24px;
  border: 1px solid #D4AF37 !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3), 0 0 0 1px rgba(212, 175, 55, 0.15);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  animation: gold-dark-shift 4s ease infinite;
}

@keyframes gold-dark-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.btnGoldDark:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.5), 0 0 20px rgba(212, 175, 55, 0.25);
  border-color: #FCF6BA !important;
}

.btnGoldDark span {
  margin: 0 !important;
  padding: 0 !important;
  color: #D4AF37 !important;
  text-decoration: none !important;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.iconoGoldDark {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}

.iconoGoldDark svg {
  fill: #D4AF37;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
  transition: all 0.4s ease;
}

.btnGoldDark:hover .iconoGoldDark {
  transform: scale(1.15) rotate(-5deg);
}

.btnGoldDark.hover-shimmer::before {
  background: linear-gradient(120deg, transparent 0%, rgba(212, 175, 55, 0) 25%, rgba(212, 175, 55, 0.4) 50%, rgba(212, 175, 55, 0) 75%, transparent 100%);
}

/* ============================================
   DISEÑO 12 - Rose / Pink
   ============================================ */
.btnRose {
  background: linear-gradient(135deg, #ec4899 0%, #f472b6 50%, #fb7185 100%) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  width: auto !important;
  min-width: 170px;
  height: auto !important;
  min-height: 48px;
  border-radius: 26px;
  padding: 12px 24px;
  border: none !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 18px rgba(236, 72, 153, 0.45);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  animation: rose-shift 3s ease infinite;
}

@keyframes rose-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.btnRose:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 28px rgba(236, 72, 153, 0.65);
}

.btnRose span {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  text-decoration: none !important;
}

.iconoRose {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}

.iconoRose svg {
  fill: #fff;
  transition: all 0.4s ease;
}

.btnRose:hover .iconoRose {
  transform: scale(1.15) rotate(-5deg);
}

.btnRose.hover-shimmer::before {
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 75%, transparent 100%);
}

/* ============================================
   DISEÑO 13 - Neon Cyber
   ============================================ */
.btnNeon {
  background: #0a0a0a !important;
  color: #00ff88 !important;
  width: auto !important;
  min-width: 170px;
  height: auto !important;
  min-height: 50px;
  border-radius: 6px;
  padding: 12px 24px;
  border: 1px solid #00ff88 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.4), inset 0 0 8px rgba(0, 255, 136, 0.05);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  animation: neon-flicker 4s ease-in-out infinite;
}

@keyframes neon-flicker {
  0%, 95%, 100% {
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.4), inset 0 0 8px rgba(0, 255, 136, 0.05);
  }
  96% {
    box-shadow: 0 0 2px rgba(0, 255, 136, 0.1), inset 0 0 2px rgba(0, 255, 136, 0.02);
  }
  97% {
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.6), inset 0 0 12px rgba(0, 255, 136, 0.1);
  }
}
.btnNeon:hover {
  background: rgba(0, 255, 136, 0.08) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(0, 255, 136, 0.7), 0 0 40px rgba(0, 255, 136, 0.3), inset 0 0 12px rgba(0, 255, 136, 0.08);
}

.btnNeon span {
  margin: 0 !important;
  padding: 0 !important;
  color: #00ff88 !important;
  text-decoration: none !important;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
}

.iconoNeon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.iconoNeon svg {
  fill: #00ff88;
  filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.8));
  transition: all 0.3s ease;
}

.btnNeon:hover .iconoNeon {
  transform: scale(1.1);
}

.btnNeon.hover-shimmer::before {
  background: linear-gradient(120deg, transparent 0%, rgba(0, 255, 136, 0) 25%, rgba(0, 255, 136, 0.3) 50%, rgba(0, 255, 136, 0) 75%, transparent 100%);
}

/* ============================================
   DISEÑO 14 - Dark Mode Premium
   ============================================ */
.btnDark {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  width: auto !important;
  min-width: 170px;
  height: auto !important;
  min-height: 50px;
  border-radius: 14px;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  animation: dark-shift 5s ease infinite;
}

@keyframes dark-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.btnDark:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(37, 211, 102, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border-color: rgba(37, 211, 102, 0.3) !important;
}

.btnDark span {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  text-decoration: none !important;
}

.iconoDark {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}

.iconoDark svg {
  fill: #25D366;
  filter: drop-shadow(0 0 4px rgba(37, 211, 102, 0.5));
  transition: all 0.4s ease;
}

.btnDark:hover .iconoDark {
  transform: scale(1.12) rotate(-5deg);
}

.btnDark.hover-shimmer::before {
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 75%, transparent 100%);
}

/* ============================================
   DISEÑO 15 - Chat Card (Agent Card)
   ============================================ */
.btnChatCard {
  background: #ffffff !important;
  width: auto !important;
  min-width: 260px;
  max-width: 320px;
  height: auto !important;
  min-height: 72px;
  border-radius: 16px;
  padding: 14px 16px;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 12px;
  justify-content: flex-start !important;
  text-align: left !important;
  cursor: pointer;
}

.btnChatCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 16px 40px rgba(37, 211, 102, 0.15);
}

/* Avatar */
.chatcard-avatar {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatcard-avatar-img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #e8f5e9;
}

.chatcard-avatar-initials {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #128C7E 0%, #25D366 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatcard-avatar-svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;
  display: block;
}

.chatcard-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  background: #25D366;
  border: 2px solid #ffffff;
  border-radius: 50%;
  animation: chatcard-pulse 2s ease-in-out infinite;
  display: block;
}

@keyframes chatcard-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}
/* Info */
.chatcard-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chatcard-name {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatcard-status {
  font-size: 11px;
  font-weight: 500;
  color: #25D366;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chatcard-cta {
  font-size: 12px;
  font-weight: 500;
  color: #666;
  margin-top: 4px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Flecha */
.chatcard-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.chatcard-arrow svg {
  width: 20px;
  height: 20px;
}

.btnChatCard:hover .chatcard-arrow {
  transform: translateX(4px);
}

/* Shimmer adaptado */
.btnChatCard.hover-shimmer::before {
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 75%, transparent 100%);
}

/* ============================================
   DISEÑO 16 - Pill Badge con Pulso
   ============================================ */
.btnPillBadge {
  background: #ffffff !important;
  width: auto !important;
  min-width: 140px;
  height: auto !important;
  min-height: 42px;
  border-radius: 999px;
  padding: 10px 20px 10px 14px;
  border: 1.5px solid #e0f2e9 !important;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.15), 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 10px;
  justify-content: center !important;
}

.btnPillBadge:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3), 0 2px 6px rgba(0, 0, 0, 0.08);
  border-color: #25D366 !important;
}

/* Punto pulsante */
.pill-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #25D366;
  position: relative;
  display: inline-block;
}

.pill-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.45);
  transform: translate(-50%, -50%);
  animation: pill-dot-ring 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pill-dot-ring {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  70% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
.pill-text {
  font-size: 14px;
  font-weight: 600;
  color: #075E54;
  line-height: 1;
  white-space: nowrap;
}

.btnPillBadge.hover-shimmer::before {
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 75%, transparent 100%);
}

/* ============================================
   DISEÑO 17 - Retro / 90s Bold
   ============================================ */
.btnRetro {
  background: #25D366 !important;
  color: #000 !important;
  width: auto !important;
  min-width: 180px;
  height: auto !important;
  min-height: 52px;
  border-radius: 6px;
  padding: 12px 22px;
  border: 3px solid #000 !important;
  box-shadow: 5px 5px 0px #000;
  transition: all 0.15s ease;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  gap: 10px;
}

.btnRetro:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0px #000;
}

.btnRetro:active,
.whatsapp-link:active .btnRetro {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0px #000;
}

.btnRetro span {
  margin: 0 !important;
  padding: 0 !important;
  color: #000 !important;
  text-decoration: none !important;
}

.iconoRetro {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.iconoRetro svg {
  fill: #000;
  transition: all 0.15s ease;
}

.btnRetro:hover .iconoRetro {
  transform: scale(1.1);
}

.btnRetro.hover-shimmer::before {
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%, transparent 100%);
}

/* Glow aura adaptado para nuevos diseños */
.whatsapp-link:hover .btnChatCard.hover-glow-aura {
  box-shadow: 0 0 20px 4px rgba(37, 211, 102, 0.3), 0 0 40px 8px rgba(37, 211, 102, 0.12), 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

.whatsapp-link:hover .btnPillBadge.hover-glow-aura {
  box-shadow: 0 0 20px 4px rgba(37, 211, 102, 0.4), 0 0 40px 8px rgba(37, 211, 102, 0.18), 0 4px 12px rgba(37, 211, 102, 0.25) !important;
}

.whatsapp-link:hover .btnRetro.hover-glow-aura {
  box-shadow: 7px 7px 0px #000, 0 0 20px 4px rgba(37, 211, 102, 0.5), 0 0 40px 8px rgba(37, 211, 102, 0.25) !important;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  .btnDisenoDos {
    min-width: 190px;
    font-size: 14px;
  }
  .btnDisenotres {
    min-width: 150px;
    font-size: 14px;
  }
  .iconoDisenoCuatro {
    width: 55px !important;
    height: 55px !important;
  }
  .btnGlassmorphism {
    min-width: 200px;
    font-size: 15px;
  }
  .btnNeumorphism {
    min-width: 190px;
    font-size: 15px;
  }
  .btnGradientPop {
    min-width: 160px;
    font-size: 14px;
  }
  .btnMinimalOutline {
    min-width: 150px;
    font-size: 14px;
  }
  .btnAppleStyle {
    min-width: 160px;
    font-size: 14px;
  }
  .btnGold {
    min-width: 170px;
    font-size: 14px;
  }
  .btnGoldDark {
    min-width: 170px;
    font-size: 14px;
  }
  .btnRose {
    min-width: 170px;
    font-size: 14px;
  }
  .btnNeon {
    min-width: 170px;
    font-size: 13px;
  }
  .btnDark {
    min-width: 170px;
    font-size: 14px;
  }
  .btnChatCard {
    min-width: 240px;
  }
  .btnPillBadge {
    min-width: 130px;
  }
  .btnRetro {
    min-width: 170px;
    font-size: 14px;
  }
  .wa-tooltip {
    font-size: 12px;
    padding: 8px 12px;
  }
  .wa-welcome-bubble {
    max-width: 260px;
    min-width: 200px;
  }
}
/* ============================================
   RESPONSIVE - MOBILE (SOLO ICONO) 📱
   Usa .widget-260504 como prefijo para superar
   la especificidad de los estilos inline del
   panel de diseño (sliders de width/height)
   ============================================ */
@media (max-width: 767px) {
  /* Ocultar textos en mobile */
  .widget-260504 .btnDisenoDos .text,
  .widget-260504 .btnDisenotres .text,
  .widget-260504 .btnGlassmorphism .text,
  .widget-260504 .btnNeumorphism .text,
  .widget-260504 .btnGradientPop .text,
  .widget-260504 .btnMinimalOutline .text,
  .widget-260504 .btnAppleStyle .text,
  .widget-260504 .btnGold .text,
  .widget-260504 .btnGoldDark .text,
  .widget-260504 .btnRose .text,
  .widget-260504 .btnNeon .text,
  .widget-260504 .btnDark .text,
  .widget-260504 .btnRetro .text,
  .widget-260504 .btnPillBadge .pill-text {
    display: none !important;
  }
  /* ── Diseño 2: Redondeado → círculo verde ── */
  .widget-260504 .btnDisenoDos {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(18, 140, 126, 0.4) !important;
  }
  .widget-260504 .iconoDisenoDos {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
  }
  /* ── Diseño 3: Texto+Icono → círculo verde sólido ── */
  .widget-260504 .btnDisenotres {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4) !important;
  }
  .widget-260504 .iconoDisenotres {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
  }
  .widget-260504 .iconoDisenotres svg {
    fill: #fff !important;
  }
  /* ── Diseño 4: Solo Icono ── */
  .widget-260504 .iconoDisenoCuatro {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }
  /* ── Diseño 5: Glassmorphism → círculo glass ── */
  .widget-260504 .btnGlassmorphism {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(37, 211, 102, 0.18) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1.5px solid rgba(37, 211, 102, 0.4) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.2) !important;
  }
  .widget-260504 .iconoGlass {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
  }
  /* ── Diseño 6: Neumorphism → círculo neumorfo ── */
  .widget-260504 .btnNeumorphism {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 6px 6px 12px rgba(7, 94, 84, 0.15), -6px -6px 12px rgba(255, 255, 255, 0.9) !important;
  }
  .widget-260504 .iconoNeumo {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
  }
  /* ── Diseño 7: Gradient Pop → círculo gradiente ── */
  .widget-260504 .btnGradientPop {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 20px rgba(196, 113, 237, 0.4) !important;
  }
  .widget-260504 .iconoGradient {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
  }
  /* ── Diseño 8: Minimal Outline → cuadrado outline ── */
  .widget-260504 .btnMinimalOutline {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    max-width: 54px !important;
    border-radius: 10px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #128C7E !important;
    background: transparent !important;
  }
  .widget-260504 .iconoMinimal {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
  }
  /* ── Diseño 9: Apple Style → cuadrado blanco ── */
  .widget-260504 .btnAppleStyle {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    max-width: 54px !important;
    border-radius: 14px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  }
  .widget-260504 .iconoApple {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
  }
  /* ── Diseño 10: Gold Luxury → cuadrado dorado ── */
  .widget-260504 .btnGold {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    border-radius: 14px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  }
  .widget-260504 .iconoGold {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
  }
  /* ── Diseño 11: Gold Dark → cuadrado gold oscuro ── */
  .widget-260504 .btnGoldDark {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    border-radius: 14px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #D4AF37 !important;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4), 0 0 0 1px rgba(212, 175, 55, 0.3) !important;
  }
  .iconoGoldDark {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
  }
  /* ── Diseño 12: Rose Pink → círculo rosa ── */
  .widget-260504 .btnRose {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.55) !important;
  }
  .widget-260504 .iconoRose {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
  }
  /* ── Diseño 13: Neon Cyber → cuadrado neon ── */
  .widget-260504 .btnNeon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    border-radius: 10px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0 !important;
    border: 1px solid #00ff88 !important;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5), 0 0 22px rgba(0, 255, 136, 0.25), inset 0 0 8px rgba(0, 255, 136, 0.06) !important;
  }
  .widget-260504 .iconoNeon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
  }
  /* ── Diseño 14: Dark Premium → cuadrado oscuro ── */
  .widget-260504 .btnDark {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    border-radius: 14px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }
  .widget-260504 .iconoDark {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
  }
  /* ── Diseño 15: Chat Card — colapsa a mini-card: avatar + nombre, sin CTA ── */
  .widget-260504 .btnChatCard {
    min-width: 0 !important;
    width: auto !important;
    max-width: 220px !important;
    padding: 10px 14px 10px 10px !important;
    gap: 10px !important;
    border-radius: 40px !important;
  }
  .widget-260504 .chatcard-avatar {
    width: 36px !important;
    height: 36px !important;
  }
  .widget-260504 .chatcard-avatar-img {
    width: 36px !important;
    height: 36px !important;
  }
  .widget-260504 .chatcard-avatar-initials {
    width: 36px !important;
    height: 36px !important;
  }
  .widget-260504 .chatcard-name {
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .widget-260504 .chatcard-status {
    display: none !important;
  }
  .widget-260504 .chatcard-cta {
    display: none !important;
  }
  .widget-260504 .chatcard-arrow {
    display: none !important;
  }
  /* ── Diseño 16: Pill Badge — mantiene forma píldora compacta ── */
  .widget-260504 .btnPillBadge {
    min-width: 0 !important;
    width: auto !important;
    padding: 10px 16px 10px 12px !important;
    gap: 8px !important;
  }
  .widget-260504 .pill-text {
    display: block !important;
    font-size: 13px !important;
  }
  /* ── Diseño 17: Retro Bold → cuadrado retro ── */
  .widget-260504 .btnRetro {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    border-radius: 6px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 4px 4px 0px #000 !important;
    letter-spacing: 0 !important;
  }
  .widget-260504 .iconoRetro {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
  }
  /* Tooltip mobile */
  .widget-260504 .wa-tooltip {
    font-size: 12px;
    padding: 8px 12px;
    white-space: normal;
    max-width: 200px;
  }
  /* Badge mobile */
  .widget-260504 .wa-badge.badge-texto {
    font-size: 9px;
    padding: 2px 6px;
    min-width: 35px;
    top: -6px;
    right: -8px;
  }
  .widget-260504 .wa-badge.badge-numero {
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    top: -6px;
    right: -6px;
  }
  .widget-260504 .wa-badge.badge-dot {
    width: 10px;
    height: 10px;
    top: -2px;
    right: -2px;
  }
  /* Mensaje bienvenida mobile */
  .widget-260504 .wa-welcome-bubble {
    max-width: 260px;
    min-width: 200px;
    padding: 14px;
    bottom: calc(100% + 12px);
  }
  .widget-260504 .wa-welcome-text {
    font-size: 13px;
  }
  .widget-260504 .wa-welcome-icon {
    width: 36px;
    height: 36px;
  }
  .widget-260504 .wa-welcome-icon svg {
    width: 20px;
    height: 20px;
  }
}
/* Accesibilidad */
.whatsapp-link:focus {
  outline: 3px solid #25D366;
  outline-offset: 2px;
}

.whatsapp-link:focus-visible {
  outline: 3px solid #25D366;
  outline-offset: 2px;
}

/* ============================================
   BOTÓN FLOTANTE FIXED (WAF)
   ============================================ */
.waf-wrap {
  position: fixed;
  right: var(--waf-right, 28px);
  bottom: var(--waf-bottom, 28px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.waf-btn {
  position: relative;
  width: var(--waf-btn-size, 60px);
  height: var(--waf-btn-size, 60px);
  border-radius: var(--waf-radius, 50%);
  background: #25D366;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  pointer-events: auto;
  overflow: visible;
  padding: 0;
  flex-shrink: 0;
  gap: 0;
}

.waf-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55);
}

.waf-btn:active {
  transform: scale(0.95);
}

.waf-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.waf-btn-icon svg {
  width: 28px;
  height: 28px;
}

.waf-btn-label {
  display: none;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}

/* Badge */
.waf-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
  z-index: 1;
  animation: waf-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes waf-badge-pop {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* Tooltip */
.waf-tooltip {
  background: #1e293b;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  position: relative;
}

.waf-tooltip::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #1e293b;
  border-right: none;
}

.waf-wrap.waf-tooltip-visible .waf-tooltip {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Burbuja de bienvenida */
.waf-welcome {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  width: 300px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.waf-welcome.waf-welcome-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.waf-welcome-header {
  background: #128C7E;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.waf-welcome-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}

.waf-welcome-avatar svg {
  width: 24px;
  height: 24px;
}

.waf-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.waf-welcome-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.waf-welcome-agent {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.waf-welcome-status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 5px;
}

.waf-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: waf-pulse 2s ease-in-out infinite;
}

@keyframes waf-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.waf-welcome-close {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.waf-welcome-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.waf-welcome-close svg {
  width: 16px;
  height: 16px;
}

.waf-welcome-body {
  padding: 16px;
  background: #f0f0f0;
}

.waf-welcome-text {
  font-size: 14px;
  line-height: 1.55;
  color: #1e293b;
  background: #fff;
  padding: 12px 14px;
  border-radius: 12px 12px 12px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  margin: 0;
}

.waf-welcome-text::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: -6px;
  border: 6px solid transparent;
  border-top-color: #fff;
  border-right-color: #fff;
}

.waf-welcome-footer {
  padding: 12px 16px 14px;
  border-top: 1px solid #f1f5f9;
}

.waf-welcome-cta {
  display: block;
  width: 100%;
  text-align: center;
  background: #25D366;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 11px;
  border-radius: 10px;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.waf-welcome-cta:hover {
  background: #128C7E;
  transform: translateY(-1px);
}

/* ── Estilos del botón flotante ── */
/* Círculo verde clásico — default */
.waf-style-classic .waf-btn {
  border-radius: 50% !important;
  background: #25D366 !important;
}

.waf-style-dark .waf-btn {
  border-radius: 50% !important;
  background: #075e54 !important;
  box-shadow: 0 4px 20px rgba(7, 94, 84, 0.45) !important;
}

.waf-style-dark .waf-btn:hover {
  box-shadow: 0 6px 28px rgba(7, 94, 84, 0.6) !important;
}

.waf-style-gradient .waf-btn {
  border-radius: 50% !important;
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
}

.waf-style-neon .waf-btn {
  border-radius: 50% !important;
  background: #111827 !important;
  border: 2px solid #25D366 !important;
  box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.2), 0 4px 20px rgba(37, 211, 102, 0.3) !important;
}

.waf-style-neon .waf-btn:hover {
  box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.25), 0 6px 28px rgba(37, 211, 102, 0.5) !important;
}

.waf-style-outline .waf-btn {
  border-radius: 50% !important;
  background: transparent !important;
  border: 3px solid #25D366 !important;
  color: #25D366 !important;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.2) !important;
}

.waf-style-outline .waf-btn:hover {
  background: rgba(37, 211, 102, 0.08) !important;
}

.waf-style-glass .waf-btn {
  border-radius: 50% !important;
  background: rgba(37, 211, 102, 0.18) !important;
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(37, 211, 102, 0.4) !important;
}

/* Píldoras */
.waf-style-pill .waf-btn {
  border-radius: 40px !important;
  width: auto !important;
  padding: 0 20px !important;
  gap: 10px;
  background: #25D366 !important;
}

.waf-style-pill .waf-btn-label {
  display: block;
}

.waf-style-pill-dark .waf-btn {
  border-radius: 40px !important;
  width: auto !important;
  padding: 0 20px !important;
  gap: 10px;
  background: #075e54 !important;
}

.waf-style-pill-dark .waf-btn-label {
  display: block;
}

.waf-style-pill-outline .waf-btn {
  border-radius: 40px !important;
  width: auto !important;
  padding: 0 20px !important;
  gap: 10px;
  background: transparent !important;
  border: 2.5px solid #25D366 !important;
  color: #25D366 !important;
}

.waf-style-pill-outline .waf-btn-label {
  display: block;
  color: #25D366;
}

.waf-style-pill-outline .waf-btn:hover {
  background: rgba(37, 211, 102, 0.08) !important;
}

.waf-style-pill-gradient .waf-btn {
  border-radius: 40px !important;
  width: auto !important;
  padding: 0 20px !important;
  gap: 10px;
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
}

.waf-style-pill-gradient .waf-btn-label {
  display: block;
}

.waf-style-pill-glass .waf-btn {
  border-radius: 40px !important;
  width: auto !important;
  padding: 0 20px !important;
  gap: 10px;
  background: rgba(37, 211, 102, 0.18) !important;
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(37, 211, 102, 0.4) !important;
}

.waf-style-pill-glass .waf-btn-label {
  display: block;
}

/* Cuadrados */
.waf-style-square .waf-btn {
  border-radius: 14px !important;
  background: #25D366 !important;
}

.waf-style-square-dark .waf-btn {
  border-radius: 14px !important;
  background: #075e54 !important;
}

.waf-style-square-gradient .waf-btn {
  border-radius: 14px !important;
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
}

/* Otros */
.waf-style-minimal .waf-btn {
  border-radius: 50% !important;
  background: #fff !important;
  color: #25D366 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(37, 211, 102, 0.3) !important;
}

.waf-style-shadow .waf-btn {
  border-radius: 50% !important;
  background: #25D366 !important;
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.6), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.waf-style-pulse .waf-btn {
  border-radius: 50% !important;
  background: #25D366 !important;
}

.waf-style-pulse .waf-btn::before,
.waf-style-pulse .waf-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  animation: waf-ring 2.5s ease-out infinite;
}

.waf-style-pulse .waf-btn::after {
  animation-delay: 1.25s;
}

@keyframes waf-ring {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
/* Animaciones de entrada */
.waf-anim-bounce .waf-btn {
  animation: waf-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes waf-bounce-in {
  from {
    transform: scale(0) rotate(-20deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
.waf-anim-slide .waf-btn {
  animation: waf-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes waf-slide-in {
  from {
    transform: translateX(80px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.waf-anim-fade .waf-btn {
  animation: waf-fade-in 0.5s ease;
}

@keyframes waf-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.waf-anim-zoom .waf-btn {
  animation: waf-zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes waf-zoom-in {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* Posición izquierda */
.waf-pos-left {
  right: auto !important;
  left: var(--waf-right, 28px);
  align-items: flex-start;
}

.waf-pos-left .waf-tooltip::after {
  right: auto;
  left: -6px;
  border: 6px solid transparent;
  border-right-color: #1e293b;
  border-left: none;
}

@media (max-width: 480px) {
  .waf-wrap {
    right: 16px;
    bottom: 16px;
  }
  .waf-welcome {
    width: calc(100vw - 32px);
  }
  .waf-pos-left {
    left: 16px;
  }
}
/* ============================================
   MOBILE: VISTA COMPLETA (toggle activado)
   Usa .widget-260504 para superar estilos inline
   ============================================ */
@media (max-width: 767px) {
  /* Restaurar textos cuando mobile-full está activo */
  .widget-260504 .mobile-full .btnDisenoDos .text,
  .widget-260504 .mobile-full .btnDisenotres .text,
  .widget-260504 .mobile-full .btnGlassmorphism .text,
  .widget-260504 .mobile-full .btnNeumorphism .text,
  .widget-260504 .mobile-full .btnGradientPop .text,
  .widget-260504 .mobile-full .btnMinimalOutline .text,
  .widget-260504 .mobile-full .btnAppleStyle .text,
  .widget-260504 .mobile-full .btnGold .text,
  .widget-260504 .mobile-full .btnGoldDark .text,
  .widget-260504 .mobile-full .btnRose .text,
  .widget-260504 .mobile-full .btnNeon .text,
  .widget-260504 .mobile-full .btnDark .text,
  .widget-260504 .mobile-full .btnRetro .text {
    display: inline !important;
  }
  .widget-260504 .mobile-full .btnDisenoDos {
    width: auto !important;
    max-width: none !important;
    min-width: 180px !important;
    height: auto !important;
    min-height: 50px !important;
    border-radius: 30px !important;
    padding: 12px 24px !important;
    box-shadow: 0 4px 15px rgba(18, 140, 126, 0.4) !important;
  }
  .widget-260504 .mobile-full .iconoDisenoDos {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin-right: 10px !important;
  }
  .widget-260504 .mobile-full .btnDisenotres {
    width: auto !important;
    max-width: none !important;
    min-width: 140px !important;
    height: auto !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .widget-260504 .mobile-full .iconoDisenotres {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin-right: 10px !important;
  }
  .widget-260504 .mobile-full .iconoDisenotres svg {
    fill: #128C7E !important;
  }
  .widget-260504 .mobile-full .btnGlassmorphism {
    width: auto !important;
    max-width: none !important;
    min-width: 190px !important;
    height: auto !important;
    min-height: 52px !important;
    border-radius: 20px !important;
    padding: 14px 28px !important;
  }
  .widget-260504 .mobile-full .iconoGlass {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin-right: 12px !important;
  }
  .widget-260504 .mobile-full .btnNeumorphism {
    width: auto !important;
    max-width: none !important;
    min-width: 185px !important;
    height: auto !important;
    min-height: 52px !important;
    border-radius: 15px !important;
    padding: 14px 26px !important;
  }
  .widget-260504 .mobile-full .iconoNeumo {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin-right: 12px !important;
  }
  .widget-260504 .mobile-full .btnGradientPop {
    width: auto !important;
    max-width: none !important;
    min-width: 170px !important;
    height: auto !important;
    min-height: 48px !important;
    border-radius: 26px !important;
    padding: 12px 24px !important;
  }
  .widget-260504 .mobile-full .iconoGradient {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin-right: 10px !important;
  }
  .widget-260504 .mobile-full .btnMinimalOutline {
    width: auto !important;
    max-width: none !important;
    min-width: 150px !important;
    height: auto !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
  }
  .widget-260504 .mobile-full .iconoMinimal {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin-right: 10px !important;
  }
  .widget-260504 .mobile-full .btnAppleStyle {
    width: auto !important;
    max-width: none !important;
    min-width: 160px !important;
    height: auto !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
  }
  .widget-260504 .mobile-full .iconoApple {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    margin-right: 8px !important;
  }
  .widget-260504 .mobile-full .btnGold {
    width: auto !important;
    max-width: none !important;
    min-width: 170px !important;
    height: auto !important;
    min-height: 50px !important;
    border-radius: 27px !important;
    padding: 12px 24px !important;
  }
  .widget-260504 .mobile-full .iconoGold {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin-right: 10px !important;
  }
  .widget-260504 .mobile-full .btnGoldDark {
    width: auto !important;
    max-width: none !important;
    min-width: 170px !important;
    height: auto !important;
    min-height: 50px !important;
    border-radius: 27px !important;
    padding: 12px 24px !important;
  }
  .widget-260504 .mobile-full .iconoGoldDark {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin-right: 10px !important;
  }
  .widget-260504 .mobile-full .btnRose {
    width: auto !important;
    max-width: none !important;
    min-width: 170px !important;
    height: auto !important;
    min-height: 48px !important;
    border-radius: 26px !important;
    padding: 12px 24px !important;
  }
  .widget-260504 .mobile-full .iconoRose {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin-right: 10px !important;
  }
  .widget-260504 .mobile-full .btnNeon {
    width: auto !important;
    max-width: none !important;
    min-width: 170px !important;
    height: auto !important;
    min-height: 50px !important;
    border-radius: 6px !important;
    padding: 12px 24px !important;
    letter-spacing: 1.5px !important;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.4), inset 0 0 8px rgba(0, 255, 136, 0.05) !important;
  }
  .widget-260504 .mobile-full .iconoNeon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin-right: 10px !important;
  }
  .widget-260504 .mobile-full .btnDark {
    width: auto !important;
    max-width: none !important;
    min-width: 170px !important;
    height: auto !important;
    min-height: 50px !important;
    border-radius: 14px !important;
    padding: 12px 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }
  .widget-260504 .mobile-full .iconoDark {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin-right: 10px !important;
  }
  /* Chat Card — mobile-full: restaurar forma de tarjeta completa */
  .widget-260504 .mobile-full .btnChatCard {
    min-width: 240px !important;
    max-width: 300px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    height: auto !important;
  }
  .widget-260504 .mobile-full .chatcard-avatar {
    width: 44px !important;
    height: 44px !important;
  }
  .widget-260504 .mobile-full .chatcard-avatar-img {
    width: 44px !important;
    height: 44px !important;
  }
  .widget-260504 .mobile-full .chatcard-avatar-initials {
    width: 44px !important;
    height: 44px !important;
  }
  .widget-260504 .mobile-full .chatcard-name {
    font-size: 14px !important;
  }
  .widget-260504 .mobile-full .chatcard-status {
    display: flex !important;
    font-size: 11px !important;
  }
  .widget-260504 .mobile-full .chatcard-cta {
    display: block !important;
    font-size: 12px !important;
  }
  .widget-260504 .mobile-full .chatcard-arrow {
    display: flex !important;
  }
  /* Pill Badge — mobile-full: restaurar forma completa con punto y texto */
  .widget-260504 .mobile-full .pill-text {
    display: inline !important;
    font-size: 14px !important;
  }
  .widget-260504 .mobile-full .btnPillBadge {
    min-width: 140px !important;
    padding: 10px 20px 10px 14px !important;
    gap: 10px !important;
  }
  /* Retro — mobile-full: restaurar botón completo */
  .widget-260504 .mobile-full .btnRetro {
    width: auto !important;
    max-width: none !important;
    min-width: 180px !important;
    height: auto !important;
    min-height: 52px !important;
    border-radius: 6px !important;
    padding: 12px 22px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 5px 5px 0px #000 !important;
  }
  .widget-260504 .mobile-full .iconoRetro {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin-right: 10px !important;
  }
}
@media (min-width: 768px) { .iconoDisenoCuatro {
  color: none;
  position: absolute;
  width: 100%;
  height: 100%;
  min-width: 25px;
  text-align: left !important;
  min-height: 20px;
  display: inline-flex !important;
  /*    justify-content: flex-start !important;*/
  flex-direction: row;
  align-items: center;
} }
@media (max-width: 767px) { .iconoDisenoCuatro {
  color: none;
  position: absolute;
  width: 100%;
  height: 100%;
  min-width: 50px;
  text-align: left !important;
  min-height: 50px;
  display: inline-flex !important;
  /*    justify-content: flex-start !important;*/
  flex-direction: row;
  align-items: center;
}

.btnDisenoDos {
  padding: 10px 20px !important;
}

.btnDisenoDos svg {
  height: 100%;
  width: 100%;
} }
.imagenLogo {
  width: 120px;
  height: auto;
}

.contentLogo {
  text-align: center;
  padding: 10px 0;
}

.emailConteiner a {
    display: flex;
    align-items: center;
    margin-bottom:10px;
    height:auto;
    text-align:left;
    color:#000!important;
    text-decoration: none;
    cursor:pointer;
}

.emailConteiner a:hover{
    color:gray!important;
}

.icono-email {
 
    height:25px!important;
    width:25px!important;
    display:flex;
    margin-right:10px;
    text-align:center;
    align-items: center;
}

.icono-email svg{

    height:100%;
    width:100%;

}

.generalEmail{
    width:100%;
    min-height:20px;
}
@media (max-width: 767px) { .emailConteiner a{
    text-align:center;
} }
.widget-1f5975 .copyright {
    font-size: 13px;
    display: flex;
    text-align: left;
    justify-content: flex-start;
}