/**
 * Twingital Grid Pro — TGP Call to Action Widget
 * v2.0 — Todos los colores controlados via CSS variables
 */

/* ============================================================
   BASE
   ========================================================== */
.tgp-cta-wrap {
    /* Variables con defaults — todas sobreescribibles desde PHP */
    --cta-bg:            #ffffff;
    --cta-border-color:  #e5e7eb;
    --cta-border-w:      1px;
    --cta-radius:        16px;
    --cta-btn1-bg:       #3b82f6;
    --cta-btn1-color:    #ffffff;
    --cta-btn1-radius:   8px;
    --cta-btn1-padding:  14px 28px;
    --cta-btn1-border:   transparent;
    --cta-btn2-bg:       rgba(0,0,0,0.06);
    --cta-btn2-color:    #374151;
    --cta-btn2-radius:   8px;
    --cta-btn2-padding:  14px 28px;
    --cta-btn2-border:   transparent;
    --cta-overlay:       rgba(17,24,39,0.65);
    --cta-overlay-blend: normal;
    --cta-btn-justify:   flex-start;
    --cta-badge-align:   flex-start;
    --cta-bg-image:      none;
    --cta-bg-size:       cover;
    --cta-bg-position:   center center;
    --cta-bg-attach:     scroll;
    --cta-bg-repeat:     no-repeat;

    position: relative;
    overflow: hidden;
    border-radius: var(--cta-radius);
    box-sizing: border-box;
    width: 100%;
}
.tgp-cta-wrap *, .tgp-cta-wrap *::before, .tgp-cta-wrap *::after { box-sizing: border-box; }

.tgp-cta-inner {
    position: relative;
    z-index: 2;
}

/* BADGE */
.tgp-cta-badge-wrap {
    display: flex;
    justify-content: var(--cta-badge-align, flex-start);
    margin-bottom: 12px;
}
.tgp-cta-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 100px;
    border: 1px solid currentColor;
    opacity: 0.9;
    line-height: 1.4;
}

/* TÍTULO */
.tgp-cta-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    line-height: 1.25;
    font-size: clamp(20px, 3vw, 32px);
}

/* DESCRIPCIÓN */
.tgp-cta-desc {
    margin: 0 !important;
    line-height: 1.65;
    font-size: 16px;
}

/* BOTONES */
.tgp-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    justify-content: var(--cta-btn-justify, flex-start);
}

.tgp-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    line-height: 1;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    white-space: nowrap;
    border: 2px solid transparent;
}
.tgp-cta-btn:hover { opacity: 0.88; transform: translateY(-1px); }

.tgp-cta-btn1 {
    background: var(--cta-btn1-bg);
    color: var(--cta-btn1-color) !important;
    padding: var(--cta-btn1-padding);
    border-radius: var(--cta-btn1-radius);
    border-color: var(--cta-btn1-border, transparent);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.tgp-cta-btn1:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.18); }

.tgp-cta-btn2 {
    background: var(--cta-btn2-bg);
    color: var(--cta-btn2-color) !important;
    padding: var(--cta-btn2-padding);
    border-radius: var(--cta-btn2-radius);
    border-color: var(--cta-btn2-border, transparent);
}
.tgp-cta-btn2--link {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    box-shadow: none !important;
    border: none !important;
}

/* PRUEBA SOCIAL */
.tgp-cta-proof { margin: 12px 0 0 !important; font-size: 13px; opacity: 0.75; }

/* MEDIA */
.tgp-cta-media { margin-bottom: 16px; }
.tgp-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 8px;
}
.tgp-cta-icon i { font-size: 48px; }
.tgp-cta-image img { border-radius: 8px; display: block; }


/* ============================================================
   01 · SPLIT
   ========================================================== */
.tgp-cta--split {
    background: var(--cta-bg, #ffffff);
    border: var(--cta-border-w) solid var(--cta-border-color);
}
.tgp-cta--split .tgp-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 40px 48px;
    flex-wrap: wrap;
}
.tgp-cta-split__left { flex: 1; min-width: 260px; }
.tgp-cta-split__right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.tgp-cta--split .tgp-cta-buttons {
    margin-top: 0;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
}
/* Alineación para split */
.tgp-cta--split.tgp-cta--align-center .tgp-cta-split__right { align-items: center; }
.tgp-cta--split.tgp-cta--align-center .tgp-cta-split__left  { text-align: center; }
.tgp-cta--split.tgp-cta--align-right  .tgp-cta-split__left  { text-align: right; }


/* ============================================================
   02 · CENTERED
   ========================================================== */
.tgp-cta--centered {
    background: var(--cta-bg, #f0f9ff);
    border: var(--cta-border-w) solid var(--cta-border-color, #bae6fd);
}
.tgp-cta--centered .tgp-cta-inner {
    padding: 64px 40px;
    max-width: 680px;
    margin: 0 auto;
}


/* ============================================================
   03 · GRADIENT
   ========================================================== */
.tgp-cta--gradient {
    background: var(--cta-bg, linear-gradient(135deg, #3b82f6, #8b5cf6));
}
.tgp-cta--gradient .tgp-cta-inner {
    padding: 64px 48px;
    position: relative;
    z-index: 2;
    /* Colores default para gradient — sobreescribibles desde configuración */
}
/* Default colors para gradient — si el usuario NO configura color, se usa blanco */
.tgp-cta--gradient .tgp-cta-title:not([style*="color"]) { color: #ffffff; }
.tgp-cta--gradient .tgp-cta-desc:not([style*="color"])  { color: rgba(255,255,255,0.88); }
.tgp-cta--gradient .tgp-cta-badge                       { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.12); }
.tgp-cta--gradient .tgp-cta-proof                       { color: rgba(255,255,255,0.65); }

/* Círculos decorativos */
.tgp-cta-deco {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    pointer-events: none;
    z-index: 1;
}
.tgp-cta-deco--1 { width: 300px; height: 300px; top: -100px; right: -80px; }
.tgp-cta-deco--2 { width: 180px; height: 180px; bottom: -60px; left: -40px; }


/* ============================================================
   04 · GLASS
   ========================================================== */
.tgp-cta--glass {
    background: var(--cta-bg, linear-gradient(135deg, #6366f1, #0ea5e9));
}
.tgp-cta--glass .tgp-cta-inner {
    background: rgba(255,255,255,0.13);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: calc(var(--cta-radius, 16px) - 2px);
    margin: 10px;
    padding: 52px 48px;
    position: relative;
    z-index: 2;
}
/* Default colors — sobreescribibles */
.tgp-cta--glass .tgp-cta-title:not([style*="color"]) { color: #ffffff; }
.tgp-cta--glass .tgp-cta-desc:not([style*="color"])  { color: rgba(255,255,255,0.82); }
.tgp-cta--glass .tgp-cta-badge  { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.12); }
.tgp-cta--glass .tgp-cta-proof  { color: rgba(255,255,255,0.6); }

/* Blobs */
.tgp-cta-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(55px);
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}
.tgp-cta-blob--1 { width: 220px; height: 220px; background: #c084fc; top: -30px; right: 10%; }
.tgp-cta-blob--2 { width: 160px; height: 160px; background: #38bdf8; bottom: -20px; left: 8%; }


/* ============================================================
   05 · DARK
   ========================================================== */
.tgp-cta--dark {
    background: var(--cta-bg, #0f172a);
    border-top: 3px solid var(--cta-btn1-bg, #3b82f6);
}
.tgp-cta--dark .tgp-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 48px 52px;
    flex-wrap: wrap;
}
.tgp-cta-dark__left { flex: 1; min-width: 260px; }
.tgp-cta-dark__right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
/* Defaults dark */
.tgp-cta--dark .tgp-cta-title:not([style*="color"]) { color: #f8fafc; }
.tgp-cta--dark .tgp-cta-desc:not([style*="color"])  { color: #94a3b8; }
.tgp-cta--dark .tgp-cta-badge   { color: var(--cta-btn1-bg,#3b82f6) !important; border-color: var(--cta-btn1-bg,#3b82f6) !important; }
.tgp-cta--dark .tgp-cta-proof   { color: #64748b; }
.tgp-cta--dark .tgp-cta-buttons { margin-top: 0; flex-direction: column; align-items: flex-end; justify-content: flex-end; }

/* Alineación dark */
.tgp-cta--dark.tgp-cta--align-center .tgp-cta-dark__left  { text-align: center; }
.tgp-cta--dark.tgp-cta--align-center .tgp-cta-dark__right { align-items: center; }
.tgp-cta--dark.tgp-cta--align-right  .tgp-cta-dark__left  { text-align: right; }


/* ============================================================
   06 · MINIMAL
   ========================================================== */
.tgp-cta--minimal {
    background: var(--cta-bg, transparent);
    border: var(--cta-border-w) solid var(--cta-border-color, #e5e7eb);
}
.tgp-cta--minimal .tgp-cta-inner { padding: 36px 40px; }
.tgp-cta-minimal__top {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.tgp-cta-minimal__top .tgp-cta-media { flex-shrink: 0; margin-bottom: 0; }
.tgp-cta-minimal__top .tgp-cta-icon  { margin-bottom: 0; }
.tgp-cta-minimal__text { flex: 1; }
.tgp-cta--minimal .tgp-cta-buttons { margin-top: 20px; }

/* Alineación minimal */
.tgp-cta--minimal.tgp-cta--align-center .tgp-cta-minimal__top { justify-content: center; }
.tgp-cta--minimal.tgp-cta--align-right  .tgp-cta-minimal__top { justify-content: flex-end; }


/* ============================================================
   07 · CARD
   ========================================================== */
.tgp-cta--card {
    background: var(--cta-bg, #ffffff);
    border: var(--cta-border-w) solid var(--cta-border-color, #e5e7eb);
    box-shadow: 0 10px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.04);
}
.tgp-cta--card .tgp-cta-inner {
    padding: 48px 44px;
}
.tgp-cta-card__accent {
    display: block;
    height: 4px;
    width: 100%;
    background: var(--cta-btn1-bg, #3b82f6);
    position: absolute;
    top: 0; left: 0;
    z-index: 3;
}


/* ============================================================
   08 · IMAGE BG
   ========================================================== */
.tgp-cta--image_bg { background: #111827; }

.tgp-cta-bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--cta-bg-image, none);
    background-size: var(--cta-bg-size, cover);
    background-position: var(--cta-bg-position, center center);
    background-attachment: var(--cta-bg-attach, scroll);
    background-repeat: var(--cta-bg-repeat, no-repeat);
}
.tgp-cta-overlay {
    position: absolute;
    inset: 0;
    background: var(--cta-overlay, rgba(17,24,39,0.65));
    mix-blend-mode: var(--cta-overlay-blend, normal);
    z-index: 1;
}
.tgp-cta--image_bg .tgp-cta-inner {
    padding: 72px 56px;
    max-width: 760px;
    margin: 0 auto;
}
/* Defaults image_bg */
.tgp-cta--image_bg .tgp-cta-title:not([style*="color"]) { color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.tgp-cta--image_bg .tgp-cta-desc:not([style*="color"])  { color: rgba(255,255,255,0.88); }
.tgp-cta--image_bg .tgp-cta-badge  { color: #fff !important; border-color: rgba(255,255,255,0.5) !important; background: rgba(255,255,255,0.1) !important; }
.tgp-cta--image_bg .tgp-cta-proof  { color: rgba(255,255,255,0.65); }


/* ============================================================
   09 · NEON
   ========================================================== */
.tgp-cta--neon {
    background: var(--cta-bg, #08080f);
    border: 1px solid var(--cta-btn1-bg, #3b82f6);
    box-shadow: 0 0 24px color-mix(in srgb, var(--cta-btn1-bg,#3b82f6) 30%, transparent),
                inset 0 0 30px color-mix(in srgb, var(--cta-btn1-bg,#3b82f6) 4%, transparent);
}
.tgp-cta--neon .tgp-cta-inner {
    padding: 56px 48px;
    position: relative;
    z-index: 2;
}
/* Defaults neon */
.tgp-cta--neon .tgp-cta-title:not([style*="color"]) { color: #f8fafc; }
.tgp-cta--neon .tgp-cta-desc:not([style*="color"])  { color: #94a3b8; }
.tgp-cta--neon .tgp-cta-badge {
    color: var(--cta-btn1-bg, #3b82f6) !important;
    border-color: var(--cta-btn1-bg, #3b82f6) !important;
    box-shadow: 0 0 8px var(--cta-btn1-bg, #3b82f6);
}
.tgp-cta--neon .tgp-cta-btn1 {
    box-shadow: 0 0 18px color-mix(in srgb, var(--cta-btn1-bg,#3b82f6) 60%, transparent), 0 4px 14px rgba(0,0,0,0.3) !important;
}

.tgp-cta-neon__corner {
    position: absolute;
    width: 22px; height: 22px;
    border-color: var(--cta-btn1-bg, #3b82f6);
    border-style: solid;
    opacity: 0.7;
    pointer-events: none;
    z-index: 3;
}
.tgp-cta-neon__corner--tl { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.tgp-cta-neon__corner--br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }


/* ============================================================
   10 · EDITORIAL
   ========================================================== */
.tgp-cta--editorial {
    background: var(--cta-bg, #ffffff);
    border: var(--cta-border-w) solid var(--cta-border-color, #e5e7eb);
}
.tgp-cta--editorial .tgp-cta-inner {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 40px 44px;
}
.tgp-cta-editorial__label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.tgp-cta-editorial__vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cta-btn1-bg, #3b82f6);
    opacity: 0.7;
    user-select: none;
    white-space: nowrap;
}
.tgp-cta-editorial__body .tgp-cta-buttons { margin-top: 20px; }
.tgp-cta-editorial__proof {
    border-left: 1px solid #e5e7eb;
    padding-left: 28px;
    max-width: 160px;
    text-align: center;
}
.tgp-cta-editorial__proof .tgp-cta-proof {
    margin: 0 !important;
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.75;
}


/* ============================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 768px) {
    .tgp-cta--split .tgp-cta-inner,
    .tgp-cta--dark  .tgp-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 32px 24px;
    }
    .tgp-cta-split__right,
    .tgp-cta-dark__right  { align-items: flex-start; width: 100%; }
    .tgp-cta--split .tgp-cta-buttons,
    .tgp-cta--dark  .tgp-cta-buttons { flex-direction: row; flex-wrap: wrap; }

    .tgp-cta--centered  .tgp-cta-inner,
    .tgp-cta--gradient  .tgp-cta-inner,
    .tgp-cta--card      .tgp-cta-inner,
    .tgp-cta--neon      .tgp-cta-inner { padding: 40px 24px; }
    .tgp-cta--glass     .tgp-cta-inner  { padding: 36px 20px; margin: 8px; }
    .tgp-cta--minimal   .tgp-cta-inner  { padding: 28px 20px; }
    .tgp-cta--image_bg  .tgp-cta-inner  { padding: 48px 24px; }
    .tgp-cta-minimal__top { flex-direction: column; }

    .tgp-cta--editorial .tgp-cta-inner {
        grid-template-columns: 1fr;
        padding: 32px 24px;
    }
    .tgp-cta-editorial__label  { display: none; }
    .tgp-cta-editorial__proof  { border-left: none; border-top: 1px solid #e5e7eb; padding-left: 0; padding-top: 16px; max-width: 100%; text-align: left; }
}