/* =========================================================
   STYLE.CSS
   Archivo global del sitio
   Controla:
   - Fondo general
   - Logo principal
   - Menú Categorías
   - Icono futurista de Categorías
   - Carrusel de logos
   - Ventanas generales
   - Bloque legal
   - WhatsApp flotante global
========================================================= */

/* =========================================================
   1. BASE GENERAL
========================================================= */

html{
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  background:#ffffff;
}

body{
  margin:0;
  min-height:100dvh;

  overflow-x:hidden;
  overflow-y:auto;

  background:#ffffff;

  font-family:Arial;
}

/* =========================================================
   2. LOGO PRINCIPAL
   Control TOTAL responsive
========================================================= */

.logo{

  /* LOGO INICIAL */
  --logo-start-top: 20%;
  --logo-start-left: 50%;
  --logo-start-size: clamp(120px, 30vw, 320px);

  /* LOGO FINAL */
  --logo-small-top: clamp(18px, 3vw, 40px);
  --logo-small-left: clamp(18px, 3vw, 40px);
  --logo-small-size: clamp(90px, 10vw, 150px);

  position:absolute;

  top:var(--logo-start-top);
  left:var(--logo-start-left);

  width:var(--logo-start-size);

  transform:translate(-50%,-50%);

  transition:
  top 2s ease,
  left 2s ease,
  width 2s ease,
  transform 2s ease;

  z-index:30;
}

/* LOGO PEQUEÑO */

.logo.small{

  top:var(--logo-small-top);
  left:var(--logo-small-left);

  width:var(--logo-small-size);

  transform:none;
}

/* =========================================================
   3. MENÚ CATEGORÍAS
========================================================= */

.menu{
  --cat-top: clamp(34px, 5vh, 70px);
  --cat-right: clamp(54px, 8vw, 180px);
  --cat-gap: clamp(10px, 2vw, 25px);

  position:absolute;
  top:var(--cat-top);
  right:var(--cat-right);

  display:flex;
  flex-direction:row;
  gap:var(--cat-gap);

  z-index:3000;
}

/* Texto principal Categorías */
.menu-title{
  --cat-title-left: clamp(-60px, -4vw, 0px);
  --cat-title-size: clamp(18px, 6vw, 36px);
  --cat-title-spacing: clamp(0.8px, 0.4vw, 2px);

  --cat-grid-top: clamp(3px, 0.8vw, 6px);
  --cat-grid-left: auto;
  --cat-grid-right: clamp(-46px, -8vw, -24px);
  --cat-grid-size: clamp(20px, 6vw, 30px);
  --cat-grid-gap: clamp(3px, 1vw, 5px);
  --cat-grid-dot-size: clamp(3px, 1vw, 5px);
  --cat-grid-dot-color:#7fb3ff;
  --cat-grid-dot-radius:50%;
  --cat-grid-dot-glow:0 0 10px rgba(127,179,255,0.95);
  --cat-grid-shadow:0 0 16px rgba(127,179,255,0.9);

  position:relative;
  left:var(--cat-title-left);

  font-size:var(--cat-title-size);
  font-weight:600;
  color:#7fb3ff;
  letter-spacing:var(--cat-title-spacing);
  text-transform:uppercase;
}

.menu-title:hover{
  transform:scale(1.15);
  transition:0.3s;
  cursor:pointer;
}

/* Icono futurista 3x3 al lado de Categorías */
.menu-title-grid{
  position:absolute;
  top:var(--cat-grid-top);
  left:var(--cat-grid-left);
  right:var(--cat-grid-right);
  width:var(--cat-grid-size);
  height:var(--cat-grid-size);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--cat-grid-gap);
  filter:drop-shadow(var(--cat-grid-shadow));
  pointer-events:none;
}

.menu-title-grid span{
  width:var(--cat-grid-dot-size);
  height:var(--cat-grid-dot-size);
  background:var(--cat-grid-dot-color);
  border-radius:var(--cat-grid-dot-radius);
  box-shadow:var(--cat-grid-dot-glow);
}

/* Caja desplegable de categorías */
.menu-dropdown{
  --cat-menu-top: calc(100% + clamp(18px, 3vh, 42px));
  --cat-menu-right: 0;
  --cat-menu-left: auto;

  --cat-menu-width: min(92vw, clamp(240px, 32vw, 420px));
  --cat-menu-height: clamp(170px, 32vh, 360px);
  --cat-menu-padding: clamp(22px, 4vw, 42px);

  --cat-menu-gap: clamp(18px, 3vh, 34px);

  --cat-menu-bg:rgba(6,0,19,0.90);

  --cat-menu-border-width:1px;
  --cat-menu-border-color:rgba(127,179,255,0.45);
  --cat-menu-radius:clamp(12px, 2vw, 18px);

  --cat-menu-shadow:
    0 16px 38px rgba(0,0,0,0.52),
    inset 0 0 26px rgba(127,179,255,0.08);

  --cat-menu-blur:12px;

  --cat-menu-hidden-y:-10px;
  --cat-menu-transition:0.35s ease;

  position:absolute;
  top:var(--cat-menu-top);
  right:var(--cat-menu-right);
  left:var(--cat-menu-left);

  display:flex;
  flex-direction:column;

  justify-content:center;
  align-items:center;

  gap:var(--cat-menu-gap);
  text-align:center;

  width:var(--cat-menu-width);
  min-height:var(--cat-menu-height);
  padding:var(--cat-menu-padding);

  background:var(--cat-menu-bg);

  border:var(--cat-menu-border-width) solid var(--cat-menu-border-color);
  border-radius:var(--cat-menu-radius);

  box-shadow:var(--cat-menu-shadow);
  backdrop-filter:blur(var(--cat-menu-blur));

  opacity:0;
  pointer-events:none;

  transform:translateY(var(--cat-menu-hidden-y));
  transition:var(--cat-menu-transition);
  z-index:3100;
  overflow:hidden;
}

/* Guion antes de cada opción */

.menu-dropdown a::before{
  display:none;
}

/* Menú desplegado */
.menu-dropdown.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* Opciones del menú */
.menu-dropdown a{
  --cat-item-size: clamp(20px, 2.2vw, 18px);
  --cat-item-weight:800;
  --cat-item-letter-spacing:0.2px;
  --cat-item-color:#ffffff;
  --cat-item-opacity:1;
  --cat-item-padding:clamp(6px, 1.8vw, 12px) 0;
  --cat-item-x:0px;
  --cat-item-line-height:1.25;

  display:block;
  position:relative;

  font-size:var(--cat-item-size);
  line-height:var(--cat-item-line-height);
  font-weight:var(--cat-item-weight);
  letter-spacing:var(--cat-item-letter-spacing);

  text-decoration:none;
  color:var(--cat-item-color);

  margin:0;
  padding:var(--cat-item-padding);

  opacity:var(--cat-item-opacity);

  transition:0.3s;
  transform:none;
width:max-content;
min-width:220px;

text-align:left;

margin-left:auto;
margin-right:auto;
}

/* =========================================
   ICONOS CATEGORÍAS
========================================= */

.cat-link{

  display:flex !important;
  align-items:center;
  justify-content:flex-start;

  gap:clamp(10px, 2vw, 18px);

  width:100%;

  text-align:left;
}

.cat-icon{

    filter:
    brightness(0)
    saturate(100%)
    invert(84%)
    sepia(90%)
    saturate(900%)
    hue-rotate(0deg)
    brightness(105%);

  width:clamp(22px, 4vw, 34px);
  height:clamp(22px, 4vw, 34px);

  flex-shrink:0;

  object-fit:contain;
}

.cat-icon-aseo{
  width:40px;
  height:40px;
}

.cat-icon-carnes{
  width:35px;
  height:35px;
}

.cat-text{

  font-size:inherit;
  color:inherit;
  font-weight:inherit;
}

.menu-dropdown a:hover{
  color:#ffffff;
}

/* Enlaces internos generales del menú */
.menu a{
  text-decoration:none;
  color:rgb(255,255,255);
  font-weight:500;
  transition:0.3s;
}

.menu a:hover{
  color:#ffffff;
}

/* =========================================================
   4. DESTELLO INICIAL
========================================================= */

.flash{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:white;
  opacity:0;
  pointer-events:none;
  animation:flashEffect 2s ease;
}

@keyframes flashEffect{
  0%{
    opacity:1;
  }

  100%{
    opacity:0;
  }
}

/* =========================================================
   5. BLOQUE LEGAL BASE
========================================================= */

.legal-info{
  position:absolute;
  display:flex;
  flex-direction:column;
  z-index:20;
}

/* =========================================================
   LÍNEA DECORATIVA LEGAL
   Detalle futurista al lado del bloque legal
========================================================= */

.legal-line{
  position:absolute;

  top:var(--legal-line-top);
  left:var(--legal-line-left);

  width:var(--legal-line-width);
  height:var(--legal-line-height);

  pointer-events:none;
}

.legal-line-bar{
  position:absolute;

  top:0;
  left:50%;

  width:var(--legal-line-bar-width);
  height:100%;

  transform:translateX(-50%);

  background:linear-gradient(
    to bottom,
    rgba(56,189,248,1),
    rgba(56,189,248,0.25),
    rgba(56,189,248,1)
  );

  border-radius:20px;

  box-shadow:
    0 0 8px rgba(56,189,248,0.95),
    0 0 18px rgba(56,189,248,0.45);
}

.legal-line-dot{
  position:absolute;

  left:50%;

  width:var(--legal-line-dot-size);
  height:var(--legal-line-dot-size);

  transform:translateX(-50%);

  background:#38bdf8;
  border-radius:50%;

  box-shadow:
    0 0 8px rgba(56,189,248,1),
    0 0 18px rgba(56,189,248,0.85);
}

.legal-line-dot-top{
  top:0;
}

.legal-line-dot-bottom{
  bottom:0;
}

/* =========================================================
   ICONOS LEGALES
   Control independiente para cada icono
========================================================= */

.legal-row{
  position:relative;
  display:flex;
  align-items:center;
}

.legal-icon{
  position:absolute;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(var(--legal-icon-shadow));
}

.legal-icon-terms{
  top:var(--legal-terms-icon-top);
  left:var(--legal-terms-icon-left);
  width:var(--legal-terms-icon-size);
}

.legal-icon-data{
  top:var(--legal-data-icon-top);
  left:var(--legal-data-icon-left);
  width:var(--legal-data-icon-size);
}

.legal-icon-email{
  top:var(--legal-email-icon-top);
  left:var(--legal-email-icon-left);
  width:var(--legal-email-icon-size);
}

/* =========================================================
   TEXTOS LEGALES
   Control independiente para cada texto
========================================================= */

.legal-terms,
.legal-data,
.legal-email{
  position:relative;
  text-decoration:none;
}

/* =========================
   TÉRMINOS Y CONDICIONES
========================= */

.legal-terms{
  top:var(--legal-terms-top);
  left:var(--legal-terms-left);

  font-size:var(--legal-terms-size);
  color:var(--legal-terms-color);
  font-weight:var(--legal-terms-weight);
}

/* =========================
   POLÍTICA DE DATOS
========================= */

.legal-data{
  top:var(--legal-data-top);
  left:var(--legal-data-left);

  font-size:var(--legal-data-size);
  color:var(--legal-data-color);
  font-weight:var(--legal-data-weight);
}

/* =========================
   CORREO
========================= */

.legal-email{
  top:var(--legal-email-top);
  left:var(--legal-email-left);

  font-size:var(--legal-email-size);
  color:var(--legal-email-color);
  font-weight:var(--legal-email-weight);
}

/* =========================================================
   6. VENTANAS DE DIVISIÓN
========================================================= */

.division-window{
  position:absolute;
  z-index:50;
  top:var(--ventana-y,120px);
  left:var(--ventana-x,570px);
  background:rgba(255,5,5,0);
  display:none;
  opacity:0;
  pointer-events:none;
  transition:0.3s;
}

.division-window.show{
  display:flex;
  opacity:1;
  pointer-events:auto;
}

.division-content{
  background:rgba(6,0,19,1);
  padding:30px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  width:220px;
  animation:popup 0.3s ease;
}

.division-logo{
  width:120px;
}

.division-link{
  text-decoration:none;
  background:#0b2a4a;
  color:white;
  padding:10px 20px;
  border-radius:6px;
}

@keyframes popup{
  0%{
    transform:scale(0.8);
    opacity:0;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }
}

/* =========================================================
   7. VISIBILIDAD INICIAL
========================================================= */

.hidden-start{
  opacity:0;
  transition:opacity 1.2s ease;
}

.hidden-start.show{
  opacity:1;
}

/* =========================================================
   8. BOTÓN X DE VENTANAS PEQUEÑAS
========================================================= */

.close-window{
  position:absolute;
  top:10px;
  right:15px;
  font-size:22px;
  cursor:pointer;
  color:#fffcfc;
  font-weight:bold;
}

/* =========================================================
   9. VENTANA PUBLICITARIA GLOBAL
========================================================= */

.ads-window{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.4);
  opacity:0;
  pointer-events:none;
  transition:0.3s;
  z-index:1000;
}

.ads-window.show{
  display:flex;
  opacity:1;
  pointer-events:auto;
}

.ads-content{
  background:url("../assets/img/fondo_tablas.jpg");
  background-size:cover;
  background-position:center;

  width:100vw;
  height:100dvh;
  min-height:100dvh;

  border-radius:0;
  text-align:center;
  position:relative;

  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

.close-ads{
  position:absolute;
  top:10px;
  right:15px;
  cursor:pointer;
  font-size:30px;
  color:#fff7f7;
}

/* =========================================================
   10. ENLACES PUBLICITARIOS
========================================================= */

.ads-link{
  color:#0b2a4a;
  text-decoration:none;
  font-weight:bold;
  display:inline-block;
  transition:all 0.3s ease;
}

.ads-link:hover{
  color:#1e90ff;
  transform:scale(1.08);
  text-shadow:
    0 0 5px rgba(30,144,255,0.6),
    0 0 10px rgba(30,144,255,0.4),
    0 0 20px rgba(30,144,255,0.3);
}

/* =========================================================
   11. ELEMENTOS PUBLICITARIOS GENERALES
========================================================= */

.ads-logo{
  position:absolute;
  top:40px;
  left:5%;
  width:25%;
  min-width:70px;
  pointer-events:none;
}

.ads-animals{
  position:absolute;
  left:-330px;
  top:220px;
  width:150%;
  max-width:none;
  opacity:0.5;
  pointer-events:none;
  transition:all 0.6s ease;
}

.ads-title{
  position:absolute;
  top:-2%;
  left:32%;
  transform:translateX(-50%);
  text-align:center;
  font-size:clamp(28px,5vw,50px);
  color:rgb(253,228,2);
  opacity:0;
  transition:all 1s ease;
}

.ads-text1{
  position:absolute;
  top:10%;
  left:30%;
  transform:translateX(-50%);
  text-align:center;
  font-size:clamp(14px,2vw,25px);
  color:rgb(255,255,255);
  opacity:0;
  transition:all 1s ease;
}

/* Elementos que aparecen cuando una ventana publicitaria abre */
.ads-window.show .ads-title,
.ads-window.show .ads-text1,
.ads-window.show .ads-text2,
.ads-window.show .ads-text3,
.ads-window.show .ads-facebook,
.ads-window.show .ads-tiktok,
.ads-window.show .ads-promo,
.ads-window.show .ads-email,
.ads-window.show .ads-facebook-text,
.ads-window.show .ads-tiktok-text{
  opacity:1;
}

.ads-window.show h2,
.ads-window.show p{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   12. CARRUSEL DE LOGOS
   Se mantiene el carrusel.
   Las flechas quedan eliminadas visualmente.
========================================================= */

.logo-carousel{
  position:absolute;
  top:50%;
  left:55%;
  transform:translate(-50%,-50%);
  perspective:1200px;
  display:none;
  z-index:5;
}

.logo-carousel.show{
  display:block;
}

.carousel-track{
  position:relative;
  width:5px;
  height:5px;
  transform-style:preserve-3d;
  transition:transform 1s;
}

.carousel-logo{
  position:absolute;
  width:70px;
  height:70px;
  left:50%;
  top:80%;
  object-fit:contain;
  transform-style:preserve-3d;
  transform-origin:center center;
  transition:
    transform 1.2s cubic-bezier(.25,.8,.25,1),
    opacity 0.6s;
  opacity:0.8;
}

.carousel-logo:nth-child(1){
  transform:rotateY(0deg) translateZ(50px);
}

.carousel-logo:nth-child(2){
  transform:rotateY(90deg) translateZ(50px);
}

.carousel-logo:nth-child(3){
  transform:rotateY(180deg) translateZ(50px);
}

.carousel-logo:nth-child(4){
  transform:rotateY(270deg) translateZ(50px);
}

.carousel-logo.active{
  transform:scale(1.6);
  filter:brightness(1);
  opacity:1;
}

/* Flechas del carrusel eliminadas */
.carousel-controls{
  display:none !important;
}

/* =========================================================
   13. TEXTO PROMOCIONAL
========================================================= */

.ads-promo{
  position:absolute;
  top:5%;
  left:35%;
  font-size:35px;
  color:white;
  line-height:1.4;
  opacity:0.10;
  transition:all 1s ease;
  text-align:center;
  max-width:560px;
}

/* =========================================================
   14. LOGO ASEO GENÉRICO
========================================================= */

.logo-aseo{
  width:330px;
}

/* =========================================================
   15. HOVER CONTACTO
========================================================= */

.ads-email:hover,
.ads-facebook-text:hover,
.ads-tiktok-text:hover,
.ads-link:hover{
  transform:scale(1.15);
  transition:0.3s;
  cursor:pointer;
}

/* =========================================================
   16. WHATSAPP FLOTANTE GLOBAL
========================================================= */

.floating-whatsapp{
  position:fixed;
  top:var(--wa-top);
  left:var(--wa-left);
  right:var(--wa-right);
  bottom:var(--wa-bottom);
  width:var(--wa-size);
  height:var(--wa-size);
  opacity:var(--wa-opacity);
  z-index:1500;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.floating-whatsapp-icon{
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(var(--wa-icon-white-shadow));
}

.floating-whatsapp-text{
  position:absolute;
  top:var(--wa-text-top);
  left:var(--wa-text-left);
  transform:translateX(var(--wa-text-translate-x));
  width:var(--wa-text-width);
  height:var(--wa-text-height);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--wa-text-bg);
  border:var(--wa-text-border-width) solid var(--wa-text-border-color);
  border-radius:var(--wa-text-radius);
  box-shadow:var(--wa-text-shadow);
  font-size:var(--wa-text-size);
  color:var(--wa-text-color);
  font-weight:var(--wa-text-weight);
  white-space:nowrap;
  pointer-events:none;
}

.floating-whatsapp:hover{
  transform:scale(1.06);
}

.floating-whatsapp.is-hidden{
  display:none;
}

/* =========================================================
   17. AJUSTES MÓVIL
   Único media query para móvil
========================================================= */

@media (max-width:768px){

  .logo{
  --logo-start-top: 20%;
  --logo-start-size: clamp(210px, 62vw, 340px);
}

    /* =========================
     MODAL CATEGORÍAS CENTRADO
     SOLO MÓVIL
  ========================= */

.menu-dropdown{
  position:fixed;

  top:clamp(100px, 18vh, 70px);
  left:50vw;
  right:auto;

  width:min(82vw, 320px);

  transform:
    translateX(-50%)
    translateY(var(--cat-menu-hidden-y));
}

.menu-dropdown.show{
  transform:
    translateX(-50%)
    translateY(0);
}


  .carousel-logo{
    width:55px;
    height:55px;
  }

  .carousel-logo.tata{
    width:150px;
  }

  .carousel-logo.essence{
    width:265px;
  }

  .carousel-logo.carnes{
    width:120px;
  }

  .carousel-logo.aseo{
    width:250px;
  }

  .legal-info{
    bottom:20px;
    left:20px;
    gap:4px;
    align-items:flex-start;
    --legal-line-top:-12px;
--legal-line-left:-22px;
--legal-line-width:10px;
--legal-line-height:82px;
--legal-line-bar-width:2px;
--legal-line-dot-size:6px;
--legal-icon-shadow:0 0 6px rgba(56,189,248,0.7);

--legal-terms-icon-top:-15px;
--legal-terms-icon-left:-8px;
--legal-terms-icon-size:40px;

--legal-data-icon-top:2px;
--legal-data-icon-left:2px;
--legal-data-icon-size:20px;

--legal-email-icon-top:7px;
--legal-email-icon-left:5px;
--legal-email-icon-size:20px;
/* =========================
   TEXTOS LEGALES MÓVIL
========================= */

--legal-terms-top:0px;
--legal-terms-left:30px;
--legal-terms-size:14px;
--legal-terms-color:#ffffff;
--legal-terms-weight:400;

--legal-data-top:0px;
--legal-data-left:30px;
--legal-data-size:14px;
--legal-data-color:#ffffff;
--legal-data-weight:400;

--legal-email-top:0px;
--legal-email-left:30px;
--legal-email-size:13px;
--legal-email-color:#9ecbff;
--legal-email-weight:400;

  }

  .floating-whatsapp{
    --wa-top:auto;
    --wa-left:auto;
    --wa-right:16px;
    --wa-bottom:18px;
    --wa-size:54px;
    --wa-opacity:1;

    --wa-icon-white-shadow:0 0 0px rgba(255,255,255,0.95);

    --wa-text-top:48px;
    --wa-text-left:50%;
    --wa-text-translate-x:-50%;
    --wa-text-width:78px;
    --wa-text-height:22px;
    --wa-text-bg:#0059d6;
    --wa-text-border-width:0px;
    --wa-text-border-color:transparent;
    --wa-text-radius:18px;
    --wa-text-shadow:0 4px 10px rgba(0,0,0,0.25);
    --wa-text-size:11px;
    --wa-text-color:#ffffff;
    --wa-text-weight:800;
  }
}

/* =========================================================
   18. AJUSTES ESCRITORIO
   Único media query para escritorio
========================================================= */

@media (min-width:769px){

  .logo{
  --logo-start-top: 20%;
  --logo-start-size: clamp(180px, 20vw, 520px);
}

  .carousel-logo{
    width:85px;
    height:85px;
  }

  .carousel-logo.tata{
    width:50px;
  }

  .carousel-logo.essence{
    width:250px;
  }

  .carousel-logo.carnes{
    width:80px;
  }

  .carousel-logo.aseo{
    width:600px;
  }

  .legal-info{
    bottom:50px;
    left:70px;
    gap:8px;
    align-items:flex-start;
    --legal-line-top:-18px;
--legal-line-left:-34px;
--legal-line-width:12px;
--legal-line-height:120px;
--legal-line-bar-width:2px;
--legal-line-dot-size:7px;
--legal-icon-shadow:0 0 8px rgba(56,189,248,0.8);

--legal-terms-icon-top:-15px;
--legal-terms-icon-left:-20px;
--legal-terms-icon-size:70px;

--legal-data-icon-top:5px;
--legal-data-icon-left:-2px;
--legal-data-icon-size:38px;

--legal-email-icon-top:12px;
--legal-email-icon-left:2px;
--legal-email-icon-size:35px;
/* =========================
   TEXTOS LEGALES ESCRITORIO
========================= */

--legal-terms-top:0px;
--legal-terms-left:50px;
--legal-terms-size:28px;
--legal-terms-color:#ffffff;
--legal-terms-weight:400;

--legal-data-top:0px;
--legal-data-left:50px;
--legal-data-size:28px;
--legal-data-color:#ffffff;
--legal-data-weight:400;

--legal-email-top:0px;
--legal-email-left:50px;
--legal-email-size:22px;
--legal-email-color:#9ecbff;
--legal-email-weight:400;

  }

  .floating-whatsapp{
    --wa-top:auto;
    --wa-left:auto;
    --wa-right:28px;
    --wa-bottom:24px;
    --wa-size:68px;
    --wa-opacity:1;

    --wa-icon-white-shadow:0 0 0px rgba(255,255,255,1);

    --wa-text-top:62px;
    --wa-text-left:50%;
    --wa-text-translate-x:-50%;
    --wa-text-width:95px;
    --wa-text-height:26px;
    --wa-text-bg:#0059d6;
    --wa-text-border-width:0px;
    --wa-text-border-color:transparent;
    --wa-text-radius:20px;
    --wa-text-shadow:0 5px 12px rgba(0,0,0,0.28);
    --wa-text-size:13px;
    --wa-text-color:#ffffff;
    --wa-text-weight:800;
  }
}