/* ============================================
   VICUGNA - Estilos Globales
   Paleta: marrón corporativo + dorado/cobrizo
   ============================================ */

:root {
    /* Colores corporativos (paleta boceto Vicugna) */
    --color-brown: #864c24;          /* barra footer y menú activado */
    --color-brown-dark: #73543b;     /* títulos producto */
    --color-brown-light: #8b5a2b;
    --color-brown-active: #7f644f;   /* animales activos / barra producto activo */
    --color-gold: #b8895a;
    --color-gold-dark: #9a7048;
    --color-bronze: #7f644f;
.nav__soporte-panel.is-visible {
  display: none !important;
}
    /* Neutros */
    --color-white: #ffffff;
    --color-bg: #ffffff;
    --color-bg-soft: #dfdfe1;        /* gris claro de los bloques (boceto) */
    --color-bg-footer: #dfdfe1;      /* fondo footer info (boceto) */
    --color-border: #e5e5e5;
    --color-text: #000000;
    --color-text-soft: #636364;      /* texto cuerpo de listas */
    --color-text-muted: #645e5a;     /* subtítulos */
    --color-text-title: #7a7a7b;     /* títulos sección quiénes somos */
    --color-grey-icon: #999999;      /* animales apagados (off) */
    --color-grey-menu-off: #cdcdcf;  /* menú dropdown apagado */

    /* Accent */
    --color-whatsapp: #25d366;
    --color-red: #d32f2f;

    /* Tipografía */
    --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

    /* Layout */
    --container-max: 1280px;
    --header-height: 110px;

    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

    /* Transiciones */
    --t-fast: 180ms ease;
    --t-base: 280ms ease;
    --t-slow: 600ms cubic-bezier(.4,.0,.2,1);
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.55;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul { list-style: none; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; }

/* ============================================
   CONTAINER
   ============================================ */
.container {
    max-width: none ;
    margin: 0 auto;
    padding: 0 32px;
}

/* ============================================
   HEADER
   ============================================ */
.header {
    background: var(--color-white);
    padding: 18px 0 0;
    position: relative;
    z-index: 100;
}
.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center; /* alinear logo grande con el bloque derecho */
    gap: 32px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-right: auto; /* fuerza alineación izquierda */
}
.logo__mark {
    width: 56px;
    height: auto;
}
.logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.logo__text img {
    height: 110px !important;  /* logo más grande según boceto */
    width: auto;
}
.logo__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 38px;
    color: var(--color-brown);
    letter-spacing: 4px;
}
.logo__since {
    font-size: 9px;
    letter-spacing: 4px;
    color: var(--color-brown-light);
    margin-top: 4px;
}

/* Header right */
.header__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;          /* menú más cerca de los iconos = "secciones un poco más arriba" */
    flex: 1;
}
.header__top {
    display: flex;
    align-items: center;
    gap: 28px;         /* iconos sociales con más separación (boceto: "no tan juntos") */
}
.social-icons {
    display: flex;
    align-items: center;
    gap: 22px;         /* iconos sociales separados */
}
.social-icons > a + a,
.social-icons > a + button,
.social-icons > button + a {
    margin-left: 22px; /* fallback gap */
}
/* anular doble cuando hay gap nativo */
@supports (gap: 1px) {
    .social-icons > a + a,
    .social-icons > a + button,
    .social-icons > button + a { margin-left: 0; }
}
.social-icons a {
    width: 22px;
    height: 22px;
    color: var(--color-text-soft);
    transition: color var(--t-fast);
}
.social-icons a:hover { color: var(--color-brown); }
.social-icons svg { width: 100%; height: 100%; fill: currentColor; }

.search-btn {
    width: 22px;
    height: 22px;
    color: var(--color-text-soft);
    transition: color var(--t-fast);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.search-btn:hover { color: var(--color-brown); }
.search-btn svg { width: 100%; height: 100%; fill: currentColor; }

/* ===== Caja de búsqueda expandible ===== */
.search-box {
    display: flex;
    align-items: center;
    gap: 6px;
}
.search-box__input {
    width: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--color-text);
    outline: none;
    opacity: 0;
    transition: width var(--t-base, 0.25s) ease,
                opacity var(--t-base, 0.25s) ease,
                padding var(--t-base, 0.25s) ease,
                border-color var(--t-base, 0.25s) ease;
}
.search-box.is-open .search-box__input {
    width: 180px;
    padding: 4px 6px;
    opacity: 1;
    border-bottom-color: var(--color-brown, #7f644f);
}
.search-box__input::placeholder { color: #aaa; }
@media (max-width: 640px) {
    .search-box.is-open .search-box__input { width: 130px; }
}

.whatsapp-fab {
    width: 38px;
    height: 38px;
    background: var(--color-whatsapp);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(37,211,102,0.4);
    transition: transform var(--t-fast);
}
.whatsapp-fab:hover { transform: scale(1.08); }
.whatsapp-fab svg { width: 22px; height: 22px; fill: currentColor; }

/* Nav */
.nav {
    display: flex;
    align-items: center;
    gap: 42px;
}
.nav__item {
    position: relative;
    /* Fallback margin para navegadores que no soportan gap en flex */
    margin-left: 42px;
}
.nav__item:first-child { margin-left: 0; }
@supports (gap: 1px) {
    .nav__item { margin-left: 0; }
}
.nav__link {
    font-family: Arial, var(--font-display), sans-serif;
    font-weight: 500;
    font-size: 13px;        /* Arial 13pts según boceto */
    letter-spacing: 1.5px;
    color: var(--color-text);
    padding: 8px 0;
    position: relative;
    transition: color var(--t-fast);
    display: inline-block;
}
.nav__link:hover { color: var(--color-brown); }
.nav__link.is-active {
    color: var(--color-text);
    border-bottom: 1px solid var(--color-text);
    padding-bottom: 6px;
}

/* Dropdown del menú PRODUCTOS - jerarquía equipos esquila profesional */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  min-width: 600px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--t-base);
  z-index: 200;
  min-height: 500px;
}
/* Puente invisible para mantener el hover al pasar del link al dropdown */
.nav__dropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
    background: transparent;
}
.nav__item:hover .nav__dropdown,
.nav__item.is-open .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Columna izquierda (marrón, alineada bajo PRODUCTOS) */
.nav__dropdown-left {
    background: var(--color-brown);     /* marrón sólido 864c24 */
    flex: 0 0 auto;
    box-shadow: var(--shadow-md);
}
.nav__dropdown-header {
    display: flex;
    align-items: center;
    padding: 14px 22px;
    color: var(--color-white);
    font-family: Arial, var(--font-display), sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    min-height: 44px;
}

/* Columna derecha (gris con items) */
.nav__dropdown-right {
    background: var(--color-bg-soft);   /* gris claro dfdfe1 */
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
}

/* Título de sección (subcategoría con hijos) - barra marrón con texto blanco subrayado */
.nav__dropdown-section-title {
    background: var(--color-brown);
    color: var(--color-white);
    padding: 14px 22px;
    font-family: Arial, var(--font-display), sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Items dentro de la columna gris */
.nav__dropdown-item {
    display: block;
    background: #CDCDCF !important;
    padding: 12px 22px;
    color: var(--color-text);
    font-family: Arial, var(--font-display), sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 600;
    text-transform: uppercase;
    transition: color var(--t-fast), background var(--t-fast);
    cursor: pointer;
}
.nav__dropdown-item:hover,
.nav__dropdown-item.is-active {
    background: var(--color-brown) !important;
    color: var(--color-white);
    text-decoration: underline;
}

/* ----- Subcategoría PADRE con hijos (grupo desplegable) ----- */
.nav__dropdown-group { display: block; }

/* Cabecera del grupo: el link del padre + el chevron en una misma fila */
.nav__dropdown-grouphead {
    display: flex;
    align-items: stretch;
}
.nav__dropdown-item--parent {
    flex: 1 1 auto;
    min-width: 0;
}

/* Botón chevron para desplegar/ocultar los hijos */
.nav__dropdown-toggle {
    flex: 0 0 auto;
    width: 42px;
    border: none;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.nav__dropdown-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform var(--t-base);
}
/* El chevron rota cuando el grupo está desplegado (hover o .is-open) */
.nav__dropdown-group:hover .nav__dropdown-toggle svg,
.nav__dropdown-group.is-open .nav__dropdown-toggle svg,
.nav__dropdown-toggle.is-open svg {
    transform: rotate(180deg);
}
/* La cabecera completa se resalta cuando el grupo está activo/hover */
.nav__dropdown-group:hover .nav__dropdown-toggle,
.nav__dropdown-group.is-open .nav__dropdown-toggle {
    background: var(--color-brown);
    color: var(--color-white);
}

/* Lista de hijos: oculta por defecto, se despliega en hover o al abrir.
   IMPORTANTE: el ESTADO CERRADO define la transición de CIERRE.
   Le damos un pequeño retardo (delay) para que, si el cursor se sale un
   instante al bajar hacia un hijo, el submenú NO se cierre de golpe y dé
   tiempo a volver a entrar. */
.nav__dropdown-sub {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background: #7d4e31;
    transition: max-height var(--t-base) ease 140ms,
                opacity   var(--t-fast) ease 140ms;
}

/* Apertura por CLIC / táctil (chevron): animada y sin retardo. */
.nav__dropdown-group.is-open > .nav__dropdown-sub {
    max-height: 600px;
    opacity: 1;
    transition: max-height var(--t-base) ease 0s,
                opacity   var(--t-fast) ease 0s;
}

@media (hover: hover) and (pointer: fine) {
    /* Apertura por HOVER: la altura aparece AL INSTANTE (0s) para que los
       hijos ocupen ya su posición final. Así, al bajar el cursor para hacer
       clic, no hay un "objetivo móvil" que se escape y el menú no se retrae.
       Solo la opacidad hace un fundido suave. */
    .nav__dropdown-group:hover > .nav__dropdown-sub {
        max-height: 600px;
        opacity: 1;
        transition: max-height 0s,
                    opacity var(--t-fast) ease 0s;
    }
}

/* Cada subcategoría hija: indentada respecto al padre */
.nav__dropdown-subitem {
  display: block;
  padding: 11px 22px 11px 38px;
  color: var(--color-text);
  font-family: Arial,var(--font-display) , sans-serif;
  font-size: 12.5px;
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
  border-left: 3px solid var(--color-brown);
  transition: color red, background var(--t-fast);
  cursor: pointer;
  background: #8e4d1e !important;
}
.nav__dropdown-subitem:hover,
.nav__dropdown-subitem.is-active {
    background: var(--color-brown);
    color: var(--color-white);
    text-decoration: underline;
}

.menu-toggle {
    display: none;
    width: 32px;
    height: 32px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.menu-toggle span {
    display: block;
    height: 2px;
    background: var(--color-brown);
    border-radius: 1px;
    transition: all var(--t-fast);
}

/* ============================================
   WHATSAPP FLOATING SIDE BUTTON
   ============================================ */
.fab-chat {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 52px;
    height: 52px;
    background: #2a2a2a;
    color: var(--color-white);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    z-index: 90;
    transition: transform var(--t-fast);
}
.fab-chat:hover { transform: translateY(-3px); }
.fab-chat svg { width: 26px; height: 26px; fill: currentColor; }

/* ============================================
   CONTACT BAR (debajo del banner)
   ============================================ */
.contact-bar {
    padding: 18px 0;
    background: var(--color-white);
    border-bottom: 1px solid #ececec;
}
.contact-bar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
}
.contact-bar__wsp {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    color: var(--color-text);
}
.contact-bar__icons {
    display: flex;
    gap: 18px;
    align-items: center;
}
.contact-bar__icons > * + * { margin-left: 0; }
 .contact-bar__icons a {
  width: 36px;
  height: 27px;
  color: #1a1a1a;
  transition: color var(--t-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-bar__icons a:hover { color: var(--color-brown); }
.contact-bar__icons svg { width: 100%; height: 100%; fill: currentColor; }
.contact-bar__chat {
    width: 40px;
    height: 40px;
    background: #2a2a2a;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    margin-left: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.contact-bar__chat svg { width: 20px; height: 20px; fill: currentColor; }

/* ============================================
   DOT PATTERN (decoración esquina izquierda)
   ============================================ */
.dot-pattern {
    width: 93px;
    height: 93px;
    background-image: radial-gradient(circle, var(--color-grey-icon) 1.5px, transparent 1.8px);
    background-size: 12px 12px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--color-bg-footer);   /* dfdfe1 */
    margin-top: 80px;
}
.footer__main {
    padding: 42px 0;
    display: grid;
    grid-template-columns: 1.2fr 1.1fr 1.1fr 1.3fr;
    gap: 40px;
    align-items: center;   /* logo no cortado y centrado verticalmente */
}
.footer__logo {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer__logo .logo__mark { width: 42px; }
.footer__logo .logo__name { font-size: 26px; letter-spacing: 3px; color: var(--color-brown); }
.footer__logo .logo__since { font-size: 8px; }
.footer__logo img {
    height: 60px !important;
    width: auto;
    display: block;
}

.footer__block { font-size: 13px; }
.footer__block-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    color: var(--color-text);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.footer__block-line {
    color: var(--color-text-soft);
    font-size: 13px;
    margin-bottom: 4px;
}
.footer__block-email {
    margin-top: 10px;
    color: var(--color-text-soft);
    font-size: 12px;
}

.footer__wsp {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
}
.footer__wsp-icon {
   
      color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.footer__wsp-icon svg { width: 22px; height: 22px; fill: currentColor; }
.footer__wsp-text {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 1.2px;
    font-size: 14px;
    color: var(--color-text);
}

.footer__bar {
    background: var(--color-brown);   /* 864c24 boceto */
    color: var(--color-white);
    text-align: center;
    padding: 22px 16px;               /* barra más ancha */
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 2.5px;
    font-style: italic;
}

/* ============================================
   RESPONSIVO BASE
   ============================================ */
@media (max-width: 1024px) {
    .container { padding: 0 24px; }
    .nav { gap: 26px; }
    .footer__main { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer__wsp { justify-self: start; }
}

@media (max-width: 768px) {
    .header { padding: 16px 0 0; }
    .header__inner { flex-wrap: wrap; }
    .logo__name { font-size: 28px; letter-spacing: 3px; }
    .logo__mark { width: 44px; }
    .menu-toggle { display: flex; }
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--color-white);
        padding: 18px 24px;
        gap: 4px;
        box-shadow: var(--shadow-md);
        align-items: stretch;
        z-index: 90;
    }
    .nav.is-open { display: flex; }
    .nav__link { padding: 14px 0; border-bottom: 1px solid var(--color-border); display: block; }
    /* PRODUCTOS en móvil: el menú arranca PLEGADO y se despliega al pulsar
       PRODUCTOS (toggle .is-open desde JS). Al volver a pulsar, se retrae. */
    .nav__dropdown {
        position: static;
        transform: none;
        margin-top: 0;
        box-shadow: none;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        opacity: 1;
        visibility: visible;
        display: none;            /* plegado por defecto */
    }    .nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  min-width: 600px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--t-base);
  z-index: 200;
  min-height: 300px !important;
} .header__top { gap: 14px; margin: auto !important;}
    .nav__item.is-open > .nav__dropdown {
        display: flex;            /* desplegado tras pulsar PRODUCTOS */
    }
    .nav__dropdown-left,
    .nav__dropdown-right { width: 100%; }

    /* Chevron que indica que PRODUCTOS despliega el menú (solo móvil) */
    .nav__item--products > .nav__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .nav__item--products > .nav__link::after {
        content: "";
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        margin-left: 12px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform var(--t-base);
    }
    .nav__item--products.is-open > .nav__link::after {
        transform: rotate(-135deg);
    }
    .nav__dropdown-header { white-space: normal; }
    .header__top { gap: 14px; }
    .whatsapp-fab { width: 36px; height: 36px; }
    .whatsapp-fab svg { width: 22px; height: 22px; }
    .footer__main {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 24px;
    }
    .footer__wsp { justify-self: center; }
}
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: #00000073 !important;
  z-index: 4;
  pointer-events: none;
}

.qs-hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: : #00000073 !important;
  z-index: 1;
  pointer-events: none;
}


.p-hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: : #00000073 !important;
  z-index: 1;
  pointer-events: none;
}
/* ============================================
   DROPDOWN del menú SOPORTE TÉCNICO
   Columna izquierda (marrón) = servicios nivel 1.
   Columna derecha (gris)     = sub-servicios del servicio
   con hijos (cambia al pasar el cursor sobre cada servicio).
   No afecta al dropdown de PRODUCTOS.
   ============================================ */
.nav__dropdown--soporte {
    left: auto;
    right: -140px;            /* extiende el panel hasta aprox. el borde derecho del menú */
    min-width: 560px;
    min-height: 0 !important; /* compacto: solo la altura de sus items */
    max-width: calc(100vw - 24px);
}
.nav__soporte-services {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    max-width: 280px;
}
.nav__soporte-service {
    display: block;
    padding: 14px 20px;
    color: var(--color-white);
    background: var(--color-brown);
    font-family: Arial, var(--font-display), sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    transition: background var(--t-fast);
    cursor: pointer;
}
.nav__soporte-service:last-child { border-bottom: none; }
.nav__soporte-service:hover,
.nav__soporte-service.is-active {
    background: #5e3315;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.nav__soporte-panels {
    display: flex;
    flex-direction: column;
}
.nav__soporte-panel {
    display: none;
    flex-direction: column;
}
.nav__soporte-panel.is-visible { display: flex; }
.nav__soporte-empty {
    display: block;
    padding: 14px 22px;
    color: #8b8b8d;
    font-family: Arial, var(--font-display), sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    font-style: italic;
}

@media (max-width: 768px) {
    /* En móvil el dropdown de soporte se comporta como el de productos:
       columnas a lo ancho y todos los paneles visibles apilados. */
    .nav__dropdown--soporte {
        left: 0;
        right: auto;
        min-width: 0;
        max-width: none;
    }
    .nav__soporte-services { max-width: none; }
    .nav__soporte-panel { display: flex; }
}

/* ============================================
   BOTÓN FLOTANTE DE WHATSAPP
   Fijo abajo a la derecha, visible en todas las páginas.
   ============================================ */
.wsp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.wsp-float:hover,
.wsp-float:focus-visible {
    background: #1ebe5a;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .34);
    color: #fff;
}

.wsp-float:focus-visible {
    outline: 3px solid rgba(37, 211, 102, .45);
    outline-offset: 3px;
}

.wsp-float__icon {
    width: 34px;
    height: 34px;
    fill: currentColor;
    display: block;
}

/* Halo animado sutil para llamar la atención */
.wsp-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .55);
    animation: wspFloatPulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes wspFloatPulse {
    0%   { transform: scale(1);   opacity: .7; }
    70%  { transform: scale(1.5); opacity: 0;  }
    100% { transform: scale(1.5); opacity: 0;  }
}

@media (prefers-reduced-motion: reduce) {
    .wsp-float,
    .wsp-float::after { animation: none; transition: none; }
}

@media (max-width: 640px) {
    .wsp-float {
        right: 16px;
        bottom: 16px;
        width: 54px;
        height: 54px;
    }
    .wsp-float__icon { width: 30px; height: 30px; }
}