/* ------------------------------------------------------------------
 * Gear Clutch — sección interactiva de componentes
 * Las variables se inyectan desde el admin en el atributo style.
 * ------------------------------------------------------------------ */

.gdgc {
    --gdgc-accent: #FF3300;
    --gdgc-accent-rgb: 255 51 0;
    --gdgc-pill-bg: #2E3136;
    --gdgc-bg-from: #001F52;
    --gdgc-bg-to: #0A0B0D;
    --gdgc-gear-w: 36%;
    --gdgc-glow: 1;
    --gdgc-radius: 40px;
    --gdgc-wire: 1.5px;

    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    /* El cambio a columnas depende del ancho de la SECCIÓN, no de la ventana:
       así funciona igual dentro de una columna angosta de Elementor. */
    container-type: inline-size;
    container-name: gdgc;
    padding: clamp(32px, 5vw, 72px) clamp(16px, 3vw, 40px) clamp(36px, 5vw, 64px);
    border-radius: var(--gdgc-radius);
    color: #fff;
    background-color: var(--gdgc-bg-to);
    background-image:
        radial-gradient(95% 120% at -8% 26%,
            var(--gdgc-bg-from) 0%,
            rgb(0 0 0 / 0) 68%),
        linear-gradient(118deg,
            rgb(0 0 0 / .55) 0%,
            rgb(0 0 0 / .25) 52%,
            rgb(255 255 255 / .07) 100%);
    text-align: center;
}

.gdgc *,
.gdgc *::before,
.gdgc *::after {
    box-sizing: border-box;
}


/* ---------------------------------------------------------------- Head */

.gdgc__head {
    position: relative;
    z-index: 2;
    max-width: 52em;
    margin: 0 auto clamp(24px, 4vw, 48px);
}

.gdgc__eyebrow {
    margin: 0 0 .75em;
    color: var(--gdgc-accent);
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.2;
}

.gdgc__title {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.015em;
}

.gdgc__subtitle {
    max-width: 34em;
    margin: 1em auto 0;
    color: rgb(255 255 255 / .62);
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.55;
}


/* --------------------------------------------------------------- Stage */

/* Elementor fuerza margin:0 en cualquier <figure> dentro de un widget, con
   especificidad (0,4,1):
     .elementor .elementor-widget:not(...):not(...) figure { margin: 0 }
   Contra eso no sirve subir especificidad razonablemente, así que el centrado
   NO depende de margin:auto: lo hace flex, que ignora ese margin:0. */
.gdgc__stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}

.gdgc__figure {
    position: relative;
    display: block;
    width: var(--gdgc-gear-w);
    min-width: 220px;
    /* El centrado real lo da align-items del stage; esto es solo el reset. */
    margin: 0 auto;
    padding: 0;
    border: 0;
}

/* Glow del componente: halo difuso (::before) + anillos finos (::after) */
.gdgc__figure::before,
.gdgc__figure::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    pointer-events: none;
}

/* Los porcentajes están calculados sobre el asset cuadrado: el disco ocupa
   el 97.5% del ancho, así que su borde cae al 54.8% (halo) / 58% (anillos). */
.gdgc__figure::before {
    width: 178%;
    background:
        radial-gradient(circle closest-side,
            rgb(var(--gdgc-accent-rgb) / calc(.15 * var(--gdgc-glow))) 0%,
            rgb(var(--gdgc-accent-rgb) / calc(.115 * var(--gdgc-glow))) 54%,
            rgb(var(--gdgc-accent-rgb) / calc(.065 * var(--gdgc-glow))) 68%,
            rgb(var(--gdgc-accent-rgb) / calc(.025 * var(--gdgc-glow))) 85%,
            rgb(var(--gdgc-accent-rgb) / 0) 100%);
    /* Luciérnaga: respiración permanente, sin hover */
    animation: gdgc-firefly-gear 5.2s ease-in-out infinite;
}

.gdgc__figure::after {
    width: 168%;
    background:
        radial-gradient(circle closest-side,
            rgb(var(--gdgc-accent-rgb) / 0) 0%,
            rgb(var(--gdgc-accent-rgb) / 0) 65.0%,
            rgb(var(--gdgc-accent-rgb) / calc(.14 * var(--gdgc-glow))) 65.4%,
            rgb(var(--gdgc-accent-rgb) / calc(.14 * var(--gdgc-glow))) 66.2%,
            rgb(var(--gdgc-accent-rgb) / 0) 66.6%,
            rgb(var(--gdgc-accent-rgb) / 0) 73.3%,
            rgb(var(--gdgc-accent-rgb) / calc(.07 * var(--gdgc-glow))) 73.7%,
            rgb(var(--gdgc-accent-rgb) / calc(.07 * var(--gdgc-glow))) 74.5%,
            rgb(var(--gdgc-accent-rgb) / 0) 74.9%);
    /* Los anillos respiran en otro ciclo para que no se sienta mecánico */
    animation: gdgc-firefly-rings 6.8s ease-in-out infinite;
}

/* Ciclos desiguales: la luz de una luciérnaga no late a compás */
@keyframes gdgc-firefly-gear {
      0% { opacity: .70; scale: .985; }
     26% { opacity: 1;   scale: 1.020; }
     44% { opacity: .82; scale: 1.000; }
     68% { opacity: .96; scale: 1.014; }
    100% { opacity: .70; scale: .985; }
}

@keyframes gdgc-firefly-rings {
      0% { opacity: .78; }
     35% { opacity: 1;   }
     58% { opacity: .70; }
     80% { opacity: .94; }
    100% { opacity: .78; }
}

/* Interruptor del admin para dejar el glow quieto */
.gdgc--no-glow-anim .gdgc__figure::before,
.gdgc--no-glow-anim .gdgc__figure::after {
    animation: none;
}

.gdgc__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}


/* --------------------------------------------------------------- Wires */

.gdgc__wires {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.gdgc__wire {
    fill: none;
    stroke: var(--gdgc-accent);
    stroke-width: var(--gdgc-wire);
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .9;
    transition: opacity .25s ease, stroke-width .25s ease;
}

.gdgc__wire.is-hot {
    opacity: 1;
    stroke-width: calc(var(--gdgc-wire) + 1px);
    filter: drop-shadow(0 0 6px rgb(var(--gdgc-accent-rgb) / calc(.9 * var(--gdgc-glow))));
}


/* ---------------------------------------------------------------- Dots */

/* Capa que calca exactamente la caja de la imagen */
.gdgc__marks {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: var(--gdgc-gear-w);
    min-width: 220px;
    translate: -50% 0;
    pointer-events: none;
}

.gdgc__dot {
    position: absolute;
    width: 10px;
    height: 10px;
    translate: -50% -50%;
    border-radius: 50%;
    background: var(--gdgc-accent);
    box-shadow: 0 0 0 3px rgb(var(--gdgc-accent-rgb) / calc(.18 * var(--gdgc-glow))),
                0 0 10px rgb(var(--gdgc-accent-rgb) / calc(.5 * var(--gdgc-glow)));
    transition: box-shadow .25s ease, scale .25s ease;
}

.gdgc__dot.is-hot {
    scale: 1.25;
    box-shadow: 0 0 0 6px rgb(var(--gdgc-accent-rgb) / calc(.32 * var(--gdgc-glow))),
                0 0 18px rgb(var(--gdgc-accent-rgb) / calc(.85 * var(--gdgc-glow)));
}


/* --------------------------------------------------------------- Pills */

.gdgc__pins {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.gdgc__pill {
    position: absolute;
    top: var(--pill-y, 50%);
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: 42%;
    min-height: 44px;
    padding: 10px 26px;
    translate: 0 -50%;
    border: 1px solid rgb(var(--gdgc-accent-rgb) / .85);
    border-radius: 999px;
    background: var(--gdgc-pill-bg);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
    /* Brillo de reposo: tenue y difuso */
    box-shadow:
        0 0 8px rgb(var(--gdgc-accent-rgb) / calc(.20 * var(--gdgc-glow))),
        0 0 20px rgb(var(--gdgc-accent-rgb) / calc(.10 * var(--gdgc-glow)));
    transition: border-color .4s ease, background-color .4s ease, color .4s ease;
}

.gdgc__pill--left  { left: var(--pill-x, 12%); }
.gdgc__pill--right { right: var(--pill-x, 12%); }

/* Capa de brillo: halos desenfocados en cascada, sin bordes duros.
   Va en un pseudo-elemento para poder animar solo la opacidad. */
.gdgc__pill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s ease;
    box-shadow:
        0 0 4px rgb(var(--gdgc-accent-rgb) / calc(.62 * var(--gdgc-glow))),
        0 0 14px rgb(var(--gdgc-accent-rgb) / calc(.50 * var(--gdgc-glow))),
        0 0 32px rgb(var(--gdgc-accent-rgb) / calc(.34 * var(--gdgc-glow))),
        0 0 62px rgb(var(--gdgc-accent-rgb) / calc(.22 * var(--gdgc-glow))),
        0 0 110px rgb(var(--gdgc-accent-rgb) / calc(.13 * var(--gdgc-glow)));
}

.gdgc__pill:hover,
.gdgc__pill:focus-visible,
.gdgc__pill.is-hot {
    outline: none;
    color: #fff;
    border-color: var(--gdgc-accent);
    /* Se enciende desde dentro, como la luz de una luciérnaga */
    background-image:
        radial-gradient(120% 200% at 50% 150%,
            rgb(var(--gdgc-accent-rgb) / calc(.22 * var(--gdgc-glow))) 0%,
            rgb(var(--gdgc-accent-rgb) / 0) 72%);
}

.gdgc__pill:hover::after,
.gdgc__pill:focus-visible::after,
.gdgc__pill.is-hot::after {
    opacity: 1;
    animation: gdgc-firefly 2.8s ease-in-out infinite;
}

/* Respiración lenta e irregular del brillo */
@keyframes gdgc-firefly {
      0% { opacity: .70; }
     28% { opacity: 1;   }
     46% { opacity: .82; }
     68% { opacity: .97; }
    100% { opacity: .70; }
}

.gdgc__pill-label {
    display: block;
}

/* El icono de WhatsApp aparece al pasar el cursor */
.gdgc__pill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 0;
    margin-right: 0;
    opacity: 0;
    overflow: hidden;
    transition: width .28s ease, margin-right .28s ease, opacity .2s ease;
}

.gdgc__pill:hover .gdgc__pill-icon,
.gdgc__pill:focus-visible .gdgc__pill-icon,
.gdgc__pill.is-hot .gdgc__pill-icon {
    width: 20px;
    margin-right: 10px;
    opacity: 1;
}

.gdgc-wa {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.gdgc-wa__bubble { fill: #fff; }
.gdgc__pill .gdgc-wa__phone { fill: var(--gdgc-pill-bg); }
.gdgc__cta .gdgc-wa__phone { fill: var(--gdgc-accent); }


/* ------------------------------------------- Blindaje contra temas/Elementor
   El kit de Elementor pinta TODOS los enlaces con el color de acento:
     .elementor-kit-N a { color; font-family; font-weight }   -> (0,1,1)
   Eso dejaba el texto de las píldoras naranja y el del botón naranja sobre
   naranja (invisible). Se contrarrestan exactamente esas tres propiedades
   con mayor especificidad. */

.gdgc a.gdgc__pill,
.gdgc a.gdgc__pill:link,
.gdgc a.gdgc__pill:visited,
.gdgc a.gdgc__pill:hover,
.gdgc a.gdgc__pill:focus,
.gdgc a.gdgc__pill:active,
.gdgc span.gdgc__pill {
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    text-decoration: none;
}

.gdgc a.gdgc__cta,
.gdgc a.gdgc__cta:link,
.gdgc a.gdgc__cta:visited,
.gdgc a.gdgc__cta:hover,
.gdgc a.gdgc__cta:focus,
.gdgc a.gdgc__cta:active {
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    text-decoration: none;
}


/* ---------------------------------------------------------------- Foot */

.gdgc__foot {
    position: relative;
    z-index: 2;
    margin-top: clamp(28px, 4vw, 52px);
}

.gdgc__foot-text {
    margin: 0 0 1.25em;
    color: rgb(255 255 255 / .55);
    font-size: clamp(14px, 1.2vw, 16px);
}

.gdgc__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    border-radius: 999px;
    background: var(--gdgc-accent);
    color: #fff;
    font-size: clamp(16px, 1.4vw, 19px);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow:
        0 10px 40px rgb(var(--gdgc-accent-rgb) / calc(.45 * var(--gdgc-glow))),
        0 0 0 0 rgb(var(--gdgc-accent-rgb) / calc(.35 * var(--gdgc-glow)));
    transition: box-shadow .28s ease, translate .28s ease, filter .28s ease;
}

.gdgc__cta:hover,
.gdgc__cta:focus-visible {
    outline: none;
    translate: 0 -2px;
    filter: brightness(1.07);
    box-shadow:
        0 14px 52px rgb(var(--gdgc-accent-rgb) / calc(.6 * var(--gdgc-glow))),
        0 0 0 8px rgb(var(--gdgc-accent-rgb) / calc(.22 * var(--gdgc-glow)));
}


/* -------------------------------------------------------- Responsive */

/* El radio se ajusta por ventana: un container query no puede dar estilo
   al propio contenedor. */
@media (max-width: 1023px) {
    .gdgc {
        --gdgc-radius: 20px;
    }
}

@container gdgc (max-width: 1023px) {
    .gdgc__wires,
    .gdgc__marks {
        display: none;
    }

    .gdgc__figure {
        width: min(78%, 420px);
        min-width: 0;
    }

    /* width:100% porque al volverse estático pasa a ser hijo flex del stage
       y align-items:center lo encogería al ancho del contenido */
    .gdgc__pins {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        width: 100%;
        margin-top: clamp(28px, 6vw, 48px);
    }

    /* position:relative para que el halo (::after) siga anclado a la píldora,
       anulando las coordenadas de escritorio */
    .gdgc__pill {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        justify-content: center;
        max-width: none;
        padding: 12px 14px;
        translate: none;
    }
}

@container gdgc (max-width: 400px) {
    .gdgc__pill {
        font-size: 14px;
    }
}


/* ------------------------------------------------------ Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .gdgc *,
    .gdgc *::before,
    .gdgc *::after {
        transition-duration: .01ms !important;
        animation: none !important;
    }
}