/**
 * Twingital Grid Pro — TGP Heading Pro Widget
 * 15 estilos · Variables CSS por instancia
 * Version: 2.0.0
 */

/* ============================================================
   BASE
   ========================================================== */
.tgp-heading-wrap {
    position: relative;
    box-sizing: border-box;
}
.tgp-heading-wrap *,
.tgp-heading-wrap *::before,
.tgp-heading-wrap *::after { box-sizing: border-box; }

.tgp-heading-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
    color: var(--tgp-hd-color, #111827) !important;
}
.tgp-heading-subtitle {
    margin: 16px 0 0 !important;
    line-height: 1.65;
}
.tgp-heading-pretitle {
    display: inline-block;
    line-height: 1.2;
}

/* ============================================================
   01 · CLASSIC
   Línea corta debajo del título — ancho, color y grosor libres
   ========================================================== */
.tgp-heading-classic {
    display: flex;
    flex-direction: column;
}
.tgp-heading-classic .tgp-heading-title {
    padding-bottom: var(--tgp-hd-line-gap, 12px) !important;
}
.tgp-hd-classic__line {
    display: block;
    width: var(--tgp-hd-line-w, 60px);
    height: var(--tgp-hd-line-h, 4px);
    background: var(--tgp-hd-line-bg, #3b82f6);
    border-radius: var(--tgp-hd-line-radius, 4px);
    flex-shrink: 0;
}

/* Alineación de la línea */
.tgp-heading-wrap[style*="text-align: center"] .tgp-hd-classic__line { margin: 0 auto; }
.tgp-heading-wrap[style*="text-align: right"]  .tgp-hd-classic__line { margin-left: auto; }

/* ============================================================
   02 · LINE FULL
   Líneas horizontales de ancho completo arriba y/o abajo
   ========================================================== */
.tgp-heading-line-full {
    display: flex;
    flex-direction: column;
    gap: var(--tgp-hd-lf-gap, 14px);
}
.tgp-hd-lf__line {
    display: block;
    width: 100%;
    height: var(--tgp-hd-lf-h, 2px);
    background: var(--tgp-hd-lf-bg, #3b82f6);
    flex-shrink: 0;
}

/* ============================================================
   03 · LINE SIDES
   Líneas a los costados del texto centrado
   ========================================================== */
.tgp-heading-line-sides {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.tgp-hd-ls__pre {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--tgp-hd-color, #111827) !important;
    margin: 0 !important;
    opacity: 0.55;
}
.tgp-hd-ls__row {
    display: flex;
    align-items: center;
    gap: var(--tgp-hd-ls-gap, 20px);
}
.tgp-hd-ls__line {
    flex: 1;
    height: var(--tgp-hd-ls-h, 1px);
    background: var(--tgp-hd-ls-color, #e5e7eb);
    display: block;
    min-width: 20px;
}
.tgp-heading-line-sides .tgp-heading-title {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================
   04 · UNDERLINE — Trazo SVG con animación de dibujo
   ========================================================== */
.tgp-heading-underline .tgp-heading-title {
    display: inline-block;
    position: relative;
}
.tgp-hd-ul__wrap {
    position: absolute;
    left: 0;
    bottom: calc(var(--tgp-hd-ul-h, 10px) * -0.9);
    width: 100%;
    height: var(--tgp-hd-ul-h, 10px);
    display: block;
    pointer-events: none;
    overflow: visible;
}
.tgp-hd-ul__svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}
/* Animación SVG draw */
.tgp-hd-ul__path {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
}
.tgp-hd-ul--ani .tgp-hd-ul__path {
    animation: tgp-hd-draw 0.9s ease forwards 0.25s;
}
@keyframes tgp-hd-draw { to { stroke-dashoffset: 0; } }

/* ============================================================
   05 · GRADIENT — texto background-clip
   ========================================================== */
.tgp-hd-grad__text {
    background: var(--tgp-hd-grad, linear-gradient(135deg,#3b82f6,#8b5cf6)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    display: inline-block;
    /* Animated gradient */
    background-size: 200% 200% !important;
}
.tgp-hd-grad--ani {
    animation: tgp-hd-grad-move 4s ease infinite;
}
@keyframes tgp-hd-grad-move {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============================================================
   06 · HIGHLIGHT — marca de resaltado en fragmento
   ========================================================== */
.tgp-heading-mark {
    color: var(--tgp-hd-hl-color, inherit);
    padding: 2px var(--tgp-hd-hl-pad, 8px);
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Estilo: marcador */
.tgp-hd-mark--marker {
    background: var(--tgp-hd-hl-bg, #fde047);
    border-radius: 3px;
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(var(--tgp-hd-hl-bg, #fde047), var(--tgp-hd-hl-bg, #fde047));
    padding: 1px var(--tgp-hd-hl-pad, 8px) 3px;
}
.tgp-hd-mark--marker.tgp-hd-mark--ani {
    animation: tgp-hd-mark 0.55s ease forwards 0.35s;
}
@keyframes tgp-hd-mark {
    from { background-size: 0% 100%; }
    to   { background-size: 100% 100%; }
}

/* Estilo: caja */
.tgp-hd-mark--box {
    background: var(--tgp-hd-hl-bg, #fde047);
    border-radius: 6px;
    padding: 2px var(--tgp-hd-hl-pad, 8px) 4px;
}

/* Estilo: subrayado grueso */
.tgp-hd-mark--underline {
    background: transparent !important;
    background-image: linear-gradient(var(--tgp-hd-hl-bg, #fde047), var(--tgp-hd-hl-bg, #fde047)) !important;
    background-size: 100% 35% !important;
    background-position: 0 90% !important;
    background-repeat: no-repeat !important;
    padding: 0 2px !important;
}

/* Estilo: tachado */
.tgp-hd-mark--strike {
    background: transparent !important;
    background-image: linear-gradient(var(--tgp-hd-hl-bg, #fde047), var(--tgp-hd-hl-bg, #fde047)) !important;
    background-size: 100% 35% !important;
    background-position: 0 50% !important;
    background-repeat: no-repeat !important;
    padding: 0 2px !important;
}

/* ============================================================
   07 · OUTLINE — solo contorno
   ========================================================== */
.tgp-hd-outline__text {
    -webkit-text-stroke: var(--tgp-hd-out-w, 2px) var(--tgp-hd-out-color, #3b82f6) !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    transition: -webkit-text-fill-color 0.3s;
}
.tgp-hd-outline__text:hover {
    -webkit-text-fill-color: var(--tgp-hd-out-fill, transparent) !important;
}

/* ============================================================
   08 · SPLIT — palabra con color de acento
   ========================================================== */
.tgp-hd-split__accent {
    color: var(--tgp-hd-split-color, #3b82f6);
}
.tgp-hd-split--italic  { font-style: italic; }
.tgp-hd-split--underline { text-decoration: underline; }

/* ============================================================
   09 · BADGE — etiqueta pill + título
   ========================================================== */
.tgp-heading-badge {
    display: flex;
    flex-direction: column;
    gap: var(--tgp-hd-badge-gap, 12px);
}
.tgp-hd-badge__pill {
    display: inline-flex;
    align-items: center;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--tgp-hd-badge-color, #3b82f6) !important;
    background-color: var(--tgp-hd-badge-bg, transparent) !important;
    border: 1px solid var(--tgp-hd-badge-border, transparent) !important;
    border-radius: var(--tgp-hd-badge-radius, 100px) !important;
    padding: 5px 14px !important;
    line-height: 1 !important;
    align-self: flex-start;
}
/* Auto-bg cuando no hay color manual */
.tgp-hd-badge--auto-bg {
    background-color: transparent !important;
    box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--tgp-hd-badge-color, #3b82f6) 12%, transparent) !important;
}
/* Alineación badge */
.tgp-heading-wrap[style*="text-align: center"] .tgp-hd-badge__pill { align-self: center; }
.tgp-heading-wrap[style*="text-align: right"]  .tgp-hd-badge__pill { align-self: flex-end; }

/* ============================================================
   10 · STACKED — supertítulo + título
   ========================================================== */
.tgp-heading-stacked {
    display: flex;
    flex-direction: column;
    gap: var(--tgp-hd-stack-gap, 8px);
}
.tgp-hd-stacked__super {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tgp-hd-stack-ls, 0.12em) !important;
    color: var(--tgp-hd-stack-color, #3b82f6) !important;
}

/* ============================================================
   11 · OVERLINE — línea + etiqueta + título
   ========================================================== */
.tgp-heading-overline {
    display: flex;
    flex-direction: column;
    gap: var(--tgp-hd-ov-gap, 12px);
}
.tgp-hd-ov__row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tgp-hd-ov__line {
    display: block;
    width: var(--tgp-hd-ov-lw, 40px);
    height: var(--tgp-hd-ov-lh, 2px);
    background: var(--tgp-hd-ov-lc, #3b82f6);
    border-radius: 100px;
    flex-shrink: 0;
}
.tgp-hd-ov__label {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--tgp-hd-ov-tc, #3b82f6) !important;
}
/* Centrado */
.tgp-heading-wrap[style*="text-align: center"] .tgp-hd-ov__row { justify-content: center; }
.tgp-heading-wrap[style*="text-align: right"]  .tgp-hd-ov__row { justify-content: flex-end; flex-direction: row-reverse; }

/* ============================================================
   12 · BORDERED — fondo + borde lateral degradado
   ========================================================== */
.tgp-heading-bordered {
    position: relative;
    background: var(--tgp-hd-brd-bg, #f8fafc);
    border: 1px solid var(--tgp-hd-brd-border, #e5e7eb);
    border-radius: var(--tgp-hd-brd-radius, 8px);
    padding: 24px 32px;
    overflow: hidden;
}
.tgp-hd-brd__accent {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--tgp-hd-brd-accent-w, 4px);
    background: var(--tgp-hd-brd-accent, linear-gradient(to bottom,#3b82f6,#8b5cf6));
    border-radius: 0 2px 2px 0;
}

/* ============================================================
   13 · NUMBER — número decorativo
   ========================================================== */
.tgp-heading-number {
    position: relative;
    overflow: hidden;
    min-height: 1.4em;
}
.tgp-hd-num__deco {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    font-size: var(--tgp-hd-num-size, 7em);
    font-weight: 900;
    line-height: 1;
    color: var(--tgp-hd-num-color, #3b82f6);
    opacity: var(--tgp-hd-num-opacity, 0.08);
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: -0.04em;
}
/* Posición del número */
.tgp-hd-num--left   .tgp-hd-num__deco { left: -0.04em; }
.tgp-hd-num--center .tgp-hd-num__deco { left: 50%; transform: translate(-50%, -50%); }
.tgp-hd-num--right  .tgp-hd-num__deco { right: -0.04em; left: auto; }
.tgp-heading-number .tgp-heading-title {
    position: relative;
    z-index: 1;
    padding: 0.3em 0 !important;
}

/* ============================================================
   14 · RIBBON — banda ancho completo con línea de acento
   ========================================================== */
.tgp-heading-ribbon {
    position: relative;
    background: var(--tgp-hd-rib-bg, #1e293b);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Ancho completo — se extiende al ancho del contenedor */
    width: 100%;
}
.tgp-heading-ribbon .tgp-heading-title {
    position: relative;
    z-index: 1;
}
.tgp-hd-rib__accent {
    display: block;
    width: 100%;
    height: var(--tgp-hd-rib-ah, 4px);
    background: var(--tgp-hd-rib-accent, #3b82f6);
    flex-shrink: 0;
}
.tgp-hd-rib__sub {
    color: rgba(255,255,255,0.7) !important;
}

/* ============================================================
   15 · TYPEWRITER — texto animado con cursor
   ========================================================== */
.tgp-hd-tw__word {
    color: var(--tgp-hd-tw-color, #3b82f6);
}
.tgp-hd-tw--italic   .tgp-hd-tw__word { font-style: italic; }
.tgp-hd-tw--underline .tgp-hd-tw__word { text-decoration: underline; text-decoration-color: var(--tgp-hd-tw-color, #3b82f6); }
.tgp-hd-tw--highlight .tgp-hd-tw__word {
    background: var(--tgp-hd-tw-hl-bg, #dbeafe);
    padding: 0 6px 2px;
    border-radius: 4px;
}
.tgp-hd-tw__cursor {
    color: var(--tgp-hd-tw-cursor, #3b82f6);
    font-weight: 300;
    animation: tgp-hd-blink 0.75s step-start infinite;
    margin-left: 1px;
}
@keyframes tgp-hd-blink {
    0%,100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ============================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 768px) {
    .tgp-hd-num__deco { font-size: calc(var(--tgp-hd-num-size, 7em) * 0.65); }
    .tgp-heading-bordered { padding: 18px 20px; }
    .tgp-heading-ribbon { padding: 18px 24px !important; }
    .tgp-heading-line-sides .tgp-heading-title { white-space: normal; }
}