/* AC Social Follow — hover overlay (icono sobre la imagen) para los tiles
   "Síguenos en nuestras redes sociales" de la home (Elementor CTA). */

/* Título "Síguenos en nuestras redes sociales": una sola fila, centrado,
   ancho completo. Vivía en la columna central (33%) de 3 columnas → se partía.
   Ocultamos las 2 columnas vacías y damos el 100% a la del título. */
.elementor-element-49eb038 > .elementor-container { justify-content: center; }
.elementor-element-7596d09,
.elementor-element-fa4003a { display: none !important; }
.elementor-element-c0bdfd0 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}
.elementor-element-787323b { width: 100% !important; max-width: 100% !important; }
.elementor-element-787323b .elementor-heading-title { text-align: center !important; }
@media (min-width: 768px) {
    .elementor-element-787323b .elementor-heading-title { white-space: nowrap !important; }
}

/* Los 4 tiles siempre en una sola fila (row), sin wrap en ningún breakpoint */
.elementor-element-de514d3 > .elementor-container {
    flex-wrap: nowrap !important;
}
.elementor-element-de514d3 > .elementor-container > .elementor-column {
    width: 25% !important;
    max-width: 25% !important;
    flex: 1 1 0 !important;
}
/* En pantallas chicas mantenemos proporción agradable (sin apilar) */
@media (max-width: 767px) {
    .elementor-element-de514d3 .elementor-cta__bg-wrapper { min-height: 30vw !important; }
}

.ac-social-tile .elementor-cta__bg-wrapper {
    position: relative;
    overflow: hidden;
}

/* Capa oscura translúcida que aparece sobre la imagen */
.ac-social-tile .elementor-cta__bg-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(11, 17, 30, .25), rgba(11, 17, 30, .60));
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}

/* Badge de la red social, centrado, escondido hasta el hover */
.ac-social-tile .elementor-cta__bg-wrapper::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 76px;
    height: 76px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .35));
    opacity: 0;
    transform: translate(-50%, -42%) scale(.55);
    transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .25, 1);
    pointer-events: none;
}

/* Imagen con un sutil zoom al pasar el mouse */
.ac-social-tile .elementor-cta__bg {
    transition: transform .6s cubic-bezier(.2, .8, .25, 1);
}

.ac-social-tile:hover .elementor-cta__bg-wrapper::before { opacity: 1; }

.ac-social-tile:hover .elementor-cta__bg-wrapper::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.ac-social-tile:hover .elementor-cta__bg { transform: scale(1.06); }

/* Afordancia de clic (los links se agregan más adelante) */
.ac-social-tile .elementor-cta { cursor: pointer; }

/* Icono por red social */
.ac-social--facebook   .elementor-cta__bg-wrapper::after { background-image: url("icons/facebook.svg"); }
.ac-social--instagram  .elementor-cta__bg-wrapper::after { background-image: url("icons/instagram.svg"); }
.ac-social--tiktok     .elementor-cta__bg-wrapper::after { background-image: url("icons/tiktok.svg"); }
.ac-social--distribuye .elementor-cta__bg-wrapper::after { background-image: url("icons/distribuye.svg"); }

/* Accesibilidad: respeta usuarios que reducen movimiento */
@media (prefers-reduced-motion: reduce) {
    .ac-social-tile .elementor-cta__bg-wrapper::before,
    .ac-social-tile .elementor-cta__bg-wrapper::after,
    .ac-social-tile .elementor-cta__bg {
        transition-duration: .01ms;
    }
}
