/* =============================================================
   ASTIC Design System
   Estilos globales + clases reutilizables para Avada Builder
   ============================================================= */

/* -----------------------------------------------------------
   0a. Full-bleed: quitar padding de Avada cuando hay secciones a sangre
   ----------------------------------------------------------- */
#main:has(.astic-hero-gradient, .astic-bg-dark, .astic-bg-brand, .astic-hero-light),
.post-content:has(.astic-hero-gradient, .astic-bg-dark, .astic-bg-brand, .astic-hero-light),
#content:has(.astic-hero-gradient, .astic-bg-dark, .astic-bg-brand, .astic-hero-light) {
  padding: 0 !important;
  margin: 0 !important;
}
/* Sidebar layout wrapper */
.fusion-content-area:has(.astic-hero-gradient) {
  padding: 0 !important;
}

/* -----------------------------------------------------------
   0b. Variables (design tokens)
   ----------------------------------------------------------- */
:root {
  --astic-brand: #6badde;
  --astic-brand-dark: #1a80b6;
  --astic-brand-glow: rgba(107,173,222,.4);
  --astic-blue-deep: #0b3a5c;
  --astic-blue-mid: #165e8a;
  --astic-blue-btn: #007cba;
  --astic-blue-btn-dark: #005a87;
  --astic-heading: #1d2a3a;
  --astic-text: #4c5b6a;
  --astic-text-light: #5f6f82;
  --astic-surface: #ffffff;
  --astic-muted: #f5f7fa;
  --astic-border: #e6ebf0;
  --astic-border-light: #eaeaea;
  --astic-radius-sm: 6px;
  --astic-radius: 8px;
  --astic-radius-md: 12px;
  --astic-radius-lg: 14px;
  --astic-radius-xl: 16px;
  --astic-radius-2xl: 20px;
  --astic-shadow-sm: 0 2px 4px rgba(0,0,0,.05);
  --astic-shadow: 0 4px 14px rgba(0,0,0,.08);
  --astic-shadow-md: 0 8px 24px rgba(20,30,50,.08);
  --astic-shadow-lg: 0 16px 40px rgba(11,58,92,.18);
  --astic-shadow-hover: 0 10px 24px rgba(0,0,0,.15);
  --astic-shadow-glow: 0 8px 32px rgba(107,173,222,.3);
  --astic-transition: .3s cubic-bezier(.4,0,.2,1);
}

/* -----------------------------------------------------------
   1. Menú global (submenú bold + barrita azul)
   Migrado de Avada Custom CSS
   ----------------------------------------------------------- */
.fusion-main-menu .sub-menu li > a {
  font-weight: 700 !important;
  position: relative;
  display: block;
}
.fusion-main-menu .sub-menu li > a:hover,
.fusion-main-menu .sub-menu li.current-menu-item > a,
.fusion-main-menu .sub-menu li.current-menu-ancestor > a {
  color: var(--astic-brand-dark) !important;
}
.fusion-main-menu .sub-menu li > a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.fusion-main-menu .sub-menu li > a:hover:after,
.fusion-main-menu .sub-menu li.current-menu-item > a:after {
  background-color: var(--astic-brand-dark);
}
.fusion-mobile-nav-item a {
  font-weight: 700 !important;
  position: relative;
  display: block;
}
.fusion-mobile-nav-item a:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  transition: background-color .2s ease;
}
.fusion-mobile-nav-item a:hover,
.fusion-mobile-nav-item.current-menu-item > a,
.fusion-mobile-nav-item.current-menu-ancestor > a {
  color: var(--astic-brand-dark) !important;
}
.fusion-mobile-nav-item a:hover:before,
.fusion-mobile-nav-item.current-menu-item > a:before,
.fusion-mobile-nav-item.current-menu-ancestor > a:before {
  background: var(--astic-brand-dark);
}

/* -----------------------------------------------------------
   2. Google Calendar embed (agenda)
   Migrado de Avada Custom CSS
   ----------------------------------------------------------- */
.gcal-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px;
}
.gcal-embed {
  border: 0;
  width: 100%;
  height: 800px;
}
@media (max-width: 1024px) {
  .gcal-embed { height: 85vh; }
}
@media (max-width: 480px) {
  .gcal-embed { height: 75vh; }
}

/* -----------------------------------------------------------
   3. Botones globales (gradient azul)
   Migrado de Avada Custom CSS
   ----------------------------------------------------------- */
.fusion-button.button-flat.fusion-button-default-size.button-default,
.acceso-form input[type="submit"] {
  background: linear-gradient(135deg, var(--astic-blue-btn) 0%, var(--astic-blue-btn-dark) 100%) !important;
  color: white !important;
  border: none !important;
  padding: 12px 30px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  width: auto !important;
  min-width: 120px !important;
  max-width: 100% !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  text-align: center !important;
}
.fusion-button.button-flat.fusion-button-default-size.button-default .fusion-button-text,
.fusion-button.button-flat.fusion-button-default-size.button-default .awb-button__text,
.fusion-button.button-flat.fusion-button-default-size.button-default span,
.acceso-form input[type="submit"] {
  color: white !important;
}
.fusion-button.button-flat.fusion-button-default-size.button-default:hover,
.acceso-form input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--astic-blue-btn-dark) 0%, #004066 100%) !important;
  transform: translateY(-1px) !important;
}
@media (max-width: 768px) {
  .fusion-button.button-flat.fusion-button-default-size.button-default,
  .acceso-form input[type="submit"] {
    width: 100% !important;
    min-width: auto !important;
  }
}

/* -----------------------------------------------------------
   4. Imagen con tamaño máximo
   Migrado de Avada Custom CSS
   ----------------------------------------------------------- */
.max-img-height {
  width: 300px;
  height: 220px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* =============================================================
   DESIGN SYSTEM — Clases para Avada Builder
   Aplicar en campo "CSS Class" de cada elemento
   ============================================================= */

/* -----------------------------------------------------------
   5. HERO — Gradiente animado con mesh + glow
   Container > CSS Class: astic-hero-gradient
   ----------------------------------------------------------- */
.astic-hero-gradient {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(107,173,222,.3), transparent),
    radial-gradient(ellipse 60% 60% at 80% 20%, rgba(22,94,138,.4), transparent),
    radial-gradient(ellipse 50% 70% at 50% 80%, rgba(11,58,92,.3), transparent),
    linear-gradient(160deg, #061e30 0%, var(--astic-blue-deep) 30%, var(--astic-blue-mid) 60%, var(--astic-brand) 100%) !important;
  border-radius: var(--astic-radius-2xl);
  box-shadow: var(--astic-shadow-lg), 0 0 80px rgba(107,173,222,.15);
  padding: 56px 40px !important;
  margin-bottom: 36px;
}
/* Animated floating orb */
.astic-hero-gradient::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107,173,222,.2) 0%, transparent 70%);
  animation: asticFloat 8s ease-in-out infinite;
  pointer-events: none;
}
.astic-hero-gradient::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  animation: asticFloat 10s ease-in-out 2s infinite reverse;
  pointer-events: none;
}
.astic-hero-gradient,
.astic-hero-gradient h1,
.astic-hero-gradient h2,
.astic-hero-gradient h3,
.astic-hero-gradient .fusion-title,
.astic-hero-gradient .fusion-title h1,
.astic-hero-gradient .fusion-title h2,
.astic-hero-gradient .fusion-text p {
  color: #fff !important;
}
.astic-hero-gradient .fusion-title h1,
.astic-hero-gradient .fusion-title h2 {
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.astic-hero-gradient .fusion-text p {
  font-size: clamp(16px, 1.5vw, 20px);
  opacity: .9;
  text-shadow: 0 1px 8px rgba(0,0,0,.2);
}
/* Buttons inside hero: glass style */
.astic-hero-gradient .fusion-button {
  background: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: var(--astic-radius) !important;
  color: #fff !important;
  transition: all var(--astic-transition) !important;
}
.astic-hero-gradient .fusion-button:hover {
  background: rgba(255,255,255,.25) !important;
  border-color: rgba(255,255,255,.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.2) !important;
}
.astic-hero-gradient .fusion-button .fusion-button-text,
.astic-hero-gradient .fusion-button span {
  color: #fff !important;
}
@media (max-width: 768px) {
  .astic-hero-gradient { padding: 36px 22px !important; border-radius: var(--astic-radius-xl); }
  .astic-hero-gradient::before, .astic-hero-gradient::after { display: none; }
}

/* Hero claro con glass effect */
.astic-hero-light {
  position: relative;
  background: linear-gradient(135deg, #f0f4f8 0%, #e8edf3 50%, #f5f7fa 100%) !important;
  border-radius: var(--astic-radius-2xl);
  padding: 56px 40px !important;
  margin-bottom: 36px;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--astic-shadow-md), inset 0 1px 0 rgba(255,255,255,.8);
}
.astic-hero-light h1,
.astic-hero-light h2,
.astic-hero-light .fusion-title h1,
.astic-hero-light .fusion-title h2 { color: var(--astic-heading) !important; }
.astic-hero-light .fusion-text p { color: var(--astic-text) !important; }
@media (max-width: 768px) {
  .astic-hero-light { padding: 36px 22px !important; }
}

/* -----------------------------------------------------------
   6. GLASS CARD — Glassmorphism moderno
   Columna > CSS Class: astic-glass
   ----------------------------------------------------------- */
.astic-glass > .fusion-column-wrapper {
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--astic-radius-2xl) !important;
  padding: 32px 28px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform var(--astic-transition), box-shadow var(--astic-transition);
  height: 100%;
}
.astic-glass:hover > .fusion-column-wrapper {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6);
}

/* Glass sobre fondo oscuro */
.astic-glass-dark > .fusion-column-wrapper {
  background: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--astic-radius-2xl) !important;
  padding: 32px 28px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  transition: all var(--astic-transition);
  height: 100%;
}
.astic-glass-dark:hover > .fusion-column-wrapper {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.2);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.3);
}
.astic-glass-dark h2, .astic-glass-dark h3, .astic-glass-dark h4,
.astic-glass-dark .fusion-title,
.astic-glass-dark .fusion-text p { color: #fff !important; }

/* -----------------------------------------------------------
   7. TARJETAS modernas
   Columna > CSS Class: astic-card
   ----------------------------------------------------------- */
.astic-card > .fusion-column-wrapper {
  background: var(--astic-surface);
  border: 1px solid var(--astic-border-light);
  border-radius: var(--astic-radius-xl) !important;
  padding: 28px 24px !important;
  box-shadow: var(--astic-shadow);
  transition: all var(--astic-transition);
  height: 100%;
  position: relative;
}
.astic-card:hover > .fusion-column-wrapper {
  transform: translateY(-4px);
  box-shadow: var(--astic-shadow-hover);
  border-color: var(--astic-brand);
}

/* Elevated card con glow al hover */
.astic-card-elevated > .fusion-column-wrapper {
  background: var(--astic-surface);
  border: 1px solid var(--astic-border);
  border-radius: var(--astic-radius-xl) !important;
  padding: 36px 30px !important;
  box-shadow: var(--astic-shadow-md);
  transition: all var(--astic-transition);
  height: 100%;
}
.astic-card-elevated:hover > .fusion-column-wrapper {
  transform: translateY(-6px);
  box-shadow: var(--astic-shadow-lg), var(--astic-shadow-glow);
  border-color: rgba(107,173,222,.3);
}

/* Card con borde gradiente */
.astic-card-accent > .fusion-column-wrapper {
  background: var(--astic-surface);
  border-radius: var(--astic-radius-xl) !important;
  padding: 28px 24px !important;
  box-shadow: var(--astic-shadow);
  transition: all var(--astic-transition);
  height: 100%;
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.astic-card-accent::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--astic-radius-xl) + 2px);
  background: linear-gradient(135deg, var(--astic-brand), var(--astic-blue-mid), var(--astic-brand));
  z-index: -1;
  transition: opacity var(--astic-transition);
  opacity: .6;
}
.astic-card-accent:hover::before { opacity: 1; }
.astic-card-accent:hover > .fusion-column-wrapper {
  transform: translateY(-4px);
  box-shadow: var(--astic-shadow-glow);
}

/* -----------------------------------------------------------
   8. SECCIONES DE FONDO
   Container > CSS Class
   ----------------------------------------------------------- */
.astic-bg-muted {
  background: var(--astic-muted) !important;
  padding: 48px 0 !important;
}

/* Sección oscura con mesh gradient */
.astic-bg-dark {
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 70% 30%, rgba(22,94,138,.5), transparent),
    radial-gradient(ellipse 50% 60% at 20% 70%, rgba(107,173,222,.15), transparent),
    linear-gradient(160deg, #061e30 0%, #0a2e47 50%, var(--astic-blue-deep) 100%) !important;
  padding: 56px 0 !important;
  overflow: hidden;
}
.astic-bg-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.astic-bg-dark,
.astic-bg-dark h1, .astic-bg-dark h2, .astic-bg-dark h3, .astic-bg-dark h4,
.astic-bg-dark .fusion-title, .astic-bg-dark .fusion-title h1, .astic-bg-dark .fusion-title h2,
.astic-bg-dark .fusion-text p,
.astic-bg-dark .fusion-text li {
  color: #fff !important;
}
.astic-bg-dark .fusion-text p { opacity: .9; }

/* Brand section con gradiente vivo */
.astic-bg-brand {
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255,255,255,.1), transparent),
    linear-gradient(135deg, var(--astic-blue-mid) 0%, var(--astic-brand) 50%, #8ec5e8 100%) !important;
  padding: 56px 0 !important;
}
.astic-bg-brand,
.astic-bg-brand h1, .astic-bg-brand h2, .astic-bg-brand h3,
.astic-bg-brand .fusion-title, .astic-bg-brand .fusion-title h1,
.astic-bg-brand .fusion-text p {
  color: #fff !important;
}

/* -----------------------------------------------------------
   9. HIGHLIGHT — Callout moderno con icono lateral
   Container > CSS Class: astic-highlight
   ----------------------------------------------------------- */
.astic-highlight {
  position: relative;
  background: linear-gradient(135deg, rgba(107,173,222,.08) 0%, rgba(107,173,222,.04) 100%) !important;
  border: 1px solid rgba(107,173,222,.2) !important;
  border-left: 4px solid var(--astic-brand) !important;
  border-radius: 0 var(--astic-radius-md) var(--astic-radius-md) 0 !important;
  padding: 28px 32px !important;
  backdrop-filter: blur(4px);
}
.astic-highlight h2, .astic-highlight h3,
.astic-highlight .fusion-title { color: var(--astic-blue-deep) !important; }
.astic-highlight .fusion-text p { color: var(--astic-text) !important; }

/* -----------------------------------------------------------
   10. STATS — Números grandes con gradiente
   Columna > CSS Class: astic-stat
   ----------------------------------------------------------- */
.astic-stat > .fusion-column-wrapper {
  text-align: center;
  padding: 28px 16px !important;
}
.astic-stat .fusion-title,
.astic-stat .fusion-title h1,
.astic-stat .fusion-title h2 {
  font-size: clamp(40px, 5vw, 64px) !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--astic-brand), var(--astic-blue-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}
.astic-stat .fusion-text p {
  font-size: 14px;
  color: var(--astic-text-light) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* -----------------------------------------------------------
   11. ICONO REDONDO con glow
   Imagen > CSS Class: astic-icon-circle
   ----------------------------------------------------------- */
.astic-icon-circle {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(107,173,222,.15), rgba(107,173,222,.08));
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px !important;
  box-shadow: 0 4px 12px rgba(20,30,50,.08), 0 0 0 1px rgba(107,173,222,.1);
  transition: all var(--astic-transition);
}
.astic-icon-circle:hover {
  box-shadow: 0 4px 20px rgba(107,173,222,.25), 0 0 0 1px rgba(107,173,222,.2);
  transform: scale(1.05);
}
.astic-icon-circle img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain;
}

/* -----------------------------------------------------------
   12. SEPARADOR con gradiente
   Separator > CSS Class: astic-divider
   ----------------------------------------------------------- */
.astic-divider .fusion-separator {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--astic-brand), transparent) !important;
  max-width: 200px;
  margin: 28px auto !important;
}

/* -----------------------------------------------------------
   13. ANIMACIONES de entrada
   Cualquier elemento > CSS Class
   ----------------------------------------------------------- */
.astic-fade-in {
  animation: asticFadeIn .7s cubic-bezier(.4,0,.2,1) both;
}
.astic-fade-in-up {
  animation: asticFadeInUp .7s cubic-bezier(.4,0,.2,1) both;
}
.astic-fade-in-delay {
  animation: asticFadeIn .7s cubic-bezier(.4,0,.2,1) .15s both;
}
.astic-fade-in-up-delay {
  animation: asticFadeInUp .7s cubic-bezier(.4,0,.2,1) .15s both;
}
.astic-scale-in {
  animation: asticScaleIn .5s cubic-bezier(.4,0,.2,1) both;
}
@keyframes asticFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes asticFadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes asticScaleIn {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes asticFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(.95); }
}

/* -----------------------------------------------------------
   14. TEXTO centrado
   Column > CSS Class: astic-text-center
   ----------------------------------------------------------- */
.astic-text-center > .fusion-column-wrapper {
  text-align: center;
}
.astic-text-center .fusion-text p {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* -----------------------------------------------------------
   15. GRADIENT TEXT — Texto con gradiente
   Title > CSS Class: astic-gradient-text
   ----------------------------------------------------------- */
.astic-gradient-text h1,
.astic-gradient-text h2,
.astic-gradient-text h3 {
  background: linear-gradient(135deg, var(--astic-blue-deep) 0%, var(--astic-brand) 50%, var(--astic-blue-mid) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -----------------------------------------------------------
   16. LISTA con checks animados
   Text > CSS Class: astic-check-list
   ----------------------------------------------------------- */
.astic-check-list ul {
  list-style: none !important;
  padding-left: 0 !important;
}
.astic-check-list ul li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  color: var(--astic-text);
  transition: transform .2s ease;
}
.astic-check-list ul li:hover {
  transform: translateX(4px);
}
.astic-check-list ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--astic-brand), var(--astic-blue-mid));
  display: flex;
  align-items: center;
  justify-content: center;
}
.astic-check-list ul li:after {
  content: "\2713";
  position: absolute;
  left: 5px;
  top: 2px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
}

/* -----------------------------------------------------------
   17. BADGE / Etiquetas modernas
   ----------------------------------------------------------- */
.astic-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  backdrop-filter: blur(4px);
}
.astic-badge-blue {
  background: rgba(107,173,222,.12);
  color: var(--astic-brand-dark);
  border: 1px solid rgba(107,173,222,.2);
}
.astic-badge-green {
  background: rgba(46,125,50,.08);
  color: #2e7d32;
  border: 1px solid rgba(46,125,50,.15);
}
.astic-badge-orange {
  background: rgba(245,124,0,.08);
  color: #f57c00;
  border: 1px solid rgba(245,124,0,.15);
}

/* -----------------------------------------------------------
   18. TIMELINE / Línea temporal
   Container > CSS Class: astic-timeline
   ----------------------------------------------------------- */
.astic-timeline .fusion-layout-column {
  position: relative;
  padding-left: 40px !important;
}
.astic-timeline .fusion-layout-column::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--astic-brand), rgba(107,173,222,.2));
}
.astic-timeline .fusion-layout-column::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--astic-brand);
  box-shadow: 0 0 0 4px rgba(107,173,222,.2);
}

/* -----------------------------------------------------------
   19. HOVER GLOW — Glow azul al pasar el ratón
   Cualquier elemento > CSS Class: astic-hover-glow
   ----------------------------------------------------------- */
.astic-hover-glow {
  transition: all var(--astic-transition);
}
.astic-hover-glow:hover {
  box-shadow: 0 0 30px rgba(107,173,222,.3), 0 0 60px rgba(107,173,222,.1);
}

/* -----------------------------------------------------------
   20. ANIMATED BORDER — Borde con gradiente animado
   Columna > CSS Class: astic-animated-border
   ----------------------------------------------------------- */
.astic-animated-border > .fusion-column-wrapper {
  border-radius: var(--astic-radius-xl) !important;
  padding: 32px 28px !important;
  position: relative;
  background: var(--astic-surface);
  height: 100%;
}
.astic-animated-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--astic-radius-xl) + 2px);
  background: conic-gradient(from var(--angle, 0deg), var(--astic-brand), var(--astic-blue-mid), var(--astic-brand-dark), var(--astic-brand));
  z-index: -1;
  animation: asticRotateBorder 4s linear infinite;
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes asticRotateBorder {
  to { --angle: 360deg; }
}

/* -----------------------------------------------------------
   21. COUNTER UP — Para números que crecen
   Título dentro de astic-stat se anima
   ----------------------------------------------------------- */
.astic-counter > .fusion-column-wrapper {
  text-align: center;
  padding: 32px 20px !important;
  position: relative;
}
.astic-counter .fusion-title h1,
.astic-counter .fusion-title h2 {
  font-size: clamp(44px, 6vw, 72px) !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--astic-brand), #4fc3f7, var(--astic-brand));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: asticShimmer 3s linear infinite;
  line-height: 1 !important;
}
.astic-counter .fusion-text p {
  font-size: 14px;
  color: var(--astic-text-light) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 8px;
}
@keyframes asticShimmer {
  to { background-position: 200% center; }
}