/* ==========================================================
   BOTÓN FLOTANTE DE WHATSAPP

   Hoja del componente que el plugin imprime al cerrar cada
   página. Es editable desde «Contacto» en el panel y se puede
   restaurar en cualquier momento, así que aquí no hay nada
   que el plugin necesite para funcionar: solo el aspecto.

   Tres valores los pone el panel como variables en el propio
   botón, así que se usan en lugar de escribir medidas fijas:

     --h2e-whatsapp-size        lado del círculo (siempre 1:1)
     --h2e-whatsapp-offset      separación a los bordes
     --h2e-whatsapp-background  color de fondo

   El valor de respaldo de cada `var()` es lo que se ve si la
   hoja se usa fuera del botón, no lo que manda: el panel
   siempre las declara.

   Todo cuelga de `.h2e-whatsapp`, que es la raíz del
   componente, de modo que la hoja no puede afectar a nada más
   del sitio.
   ========================================================== */

.h2e-whatsapp {
    /* Colores propios del componente, agrupados para que
       cambiar la marca sea tocar estas cuatro líneas. */
    --h2e-whatsapp-foreground: #ffffff;
    --h2e-whatsapp-label-background: #ffffff;
    --h2e-whatsapp-label-color: #1f2b2e;
    --h2e-whatsapp-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);

    align-items: center;
    background: var(--h2e-whatsapp-background, #25d366);
    border-radius: 50%;
    bottom: var(--h2e-whatsapp-offset, 24px);
    box-shadow: var(--h2e-whatsapp-shadow);
    color: var(--h2e-whatsapp-foreground);
    display: flex;
    height: var(--h2e-whatsapp-size, 56px);
    justify-content: center;
    position: fixed;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
    width: var(--h2e-whatsapp-size, 56px);
    z-index: 9990;
}

.h2e-whatsapp--right {
    right: var(--h2e-whatsapp-offset, 24px);
}

.h2e-whatsapp--left {
    left: var(--h2e-whatsapp-offset, 24px);
}

.h2e-whatsapp:hover,
.h2e-whatsapp:focus-visible {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
    color: var(--h2e-whatsapp-foreground);
    transform: scale(1.06);
}

.h2e-whatsapp:focus-visible {
    outline: 3px solid var(--h2e-whatsapp-background, #25d366);
    outline-offset: 3px;
}

/* --- Icono ------------------------------------------------ */

.h2e-whatsapp__icon {
    align-items: center;
    display: flex;
    justify-content: center;
    /* Proporción del glifo dentro del círculo: al ir en
       porcentaje, el icono crece con el tamaño del botón. */
    width: 56%;
}

.h2e-whatsapp__icon svg {
    display: block;
    height: auto;
    width: 100%;
}

/* --- Etiqueta ---------------------------------------------
   Va fuera del círculo para que el botón siga siendo 1:1 pase
   lo que pase con el texto. */

.h2e-whatsapp__label {
    background: var(--h2e-whatsapp-label-background);
    border-radius: 999px;
    box-shadow: var(--h2e-whatsapp-shadow);
    color: var(--h2e-whatsapp-label-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    padding: 9px 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

.h2e-whatsapp--right .h2e-whatsapp__label {
    right: calc(100% + 12px);
}

.h2e-whatsapp--left .h2e-whatsapp__label {
    left: calc(100% + 12px);
}

/* --- Nombre para lectores de pantalla --------------------- */

.h2e-whatsapp__assistive {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* --- Dónde se ve ------------------------------------------
   El corte coincide con el de la mayoría de diseños: por
   debajo se considera móvil. */

@media (max-width: 767px) {
    .h2e-whatsapp--desktop-only {
        display: none;
    }

    /* En una pantalla estrecha la etiqueta le come el sitio al
       contenido, así que se retira. El botón conserva su nombre
       accesible por el texto oculto. */
    .h2e-whatsapp__label {
        display: none;
    }
}

@media (min-width: 768px) {
    .h2e-whatsapp--mobile-only {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .h2e-whatsapp {
        transition: none;
    }

    .h2e-whatsapp:hover,
    .h2e-whatsapp:focus-visible {
        transform: none;
    }
}