.elementor-kit-7{--e-global-color-primary:#0F2A4A;--e-global-color-secondary:#F5B800;--e-global-color-text:#1B2733;--e-global-color-accent:#17783F;--e-global-color-aygtex2:#4A5A6A;--e-global-color-aygsup:#F1F4F7;--e-global-color-ayglin:#D5DCE3;--e-global-color-aygurg:#C8321E;--e-global-color-aygpie:#0A1F38;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-size:52px;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-line-height:1.08em;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-size:21px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.25em;--e-global-typography-text-font-family:"Hanken Grotesk";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Hanken Grotesk";--e-global-typography-accent-font-size:17px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.2em;color:#1B2733;font-family:"Hanken Grotesk", Sans-serif;font-size:18px;line-height:1.6em;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:#163A63;}.elementor-kit-7 h2{color:#0F2A4A;font-family:"Archivo", Sans-serif;font-size:38px;font-weight:700;line-height:1.15em;}.elementor-kit-7 h3{color:#0F2A4A;font-family:"Archivo", Sans-serif;font-weight:700;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:16px;}.elementor-element{--widgets-spacing:16px 16px;--widgets-spacing-row:16px;--widgets-spacing-column:16px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-primary-font-size:34px;--e-global-typography-secondary-font-size:19px;--e-global-typography-text-font-size:17px;--e-global-typography-accent-font-size:17px;}.elementor-kit-7 h2{font-size:28px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   AYG Electricistas en Bogotá — animaciones y acabados (solo CSS)
   Pegar completo en: Elementor > Ajustes del sitio > CSS personalizado
   Las clases .ayg-* se asignan en cada widget: Avanzado > Clases CSS
   ========================================================================== */

:root {
  --ayg-azul: #0F2A4A;
  --ayg-azul-2: #163A63;
  --ayg-amarillo: #F5B800;
  --ayg-verde: #17783F;
  --ayg-rojo: #C8321E;
  --ayg-fondo: #FFFFFF;
  --ayg-superficie: #F1F4F7;
  --ayg-texto: #1B2733;
  --ayg-texto-2: #4A5A6A;
  --ayg-linea: #D5DCE3;
  --ayg-salida: cubic-bezier(.16, 1, .3, 1);
}

/* 1. Superficies del navegador ------------------------------------------- */
::selection { background: var(--ayg-amarillo); color: var(--ayg-azul); }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--ayg-amarillo); outline-offset: 3px; border-radius: 4px; }
.ayg-cifra { font-variant-numeric: tabular-nums; }

/* 2. Iconos SVG ----------------------------------------------------------- */
/* Clase .ayg-ico en el widget Icono / Caja de icono / Lista de iconos       */
.ayg-ico svg { overflow: visible; }
.ayg-ico svg g { fill: none; stroke: currentColor; }
.ayg-ico .ayg-draw { stroke-dasharray: 240; stroke-dashoffset: 0; }
.ayg-ico .ayg-flow { stroke-dasharray: 5 5; }
.ayg-ico .ayg-spark { color: var(--ayg-amarillo); stroke: var(--ayg-amarillo); }
/* sobre fondo amarillo o claro el destello pasa a azul para conservar contraste */
.ayg-ico--claro .ayg-spark { stroke: var(--ayg-azul-2); }

@keyframes ayg-trazo   { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes ayg-flujo   { to { stroke-dashoffset: -20; } }
@keyframes ayg-destello {
  0%, 100% { opacity: 1; }
  40% { opacity: .15; }
  52% { opacity: 1; }
  66% { opacity: .35; }
  80% { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Al pasar el cursor o enfocar la tarjeta: el icono se redibuja y la corriente fluye */
  .ayg-card:hover .ayg-draw,
  .ayg-card:focus-within .ayg-draw,
  .ayg-ico:hover .ayg-draw {
    animation: ayg-trazo .9s var(--ayg-salida) both;
  }
  .ayg-card:hover .ayg-flow,
  .ayg-card:focus-within .ayg-flow,
  .ayg-ico:hover .ayg-flow {
    animation: ayg-flujo .7s linear infinite;
  }
  .ayg-card:hover .ayg-spark,
  .ayg-card:focus-within .ayg-spark,
  .ayg-ico:hover .ayg-spark {
    animation: ayg-destello 1.1s ease-in-out both;
  }

  /* Único icono con movimiento permanente: la franja de urgencias */
  .ayg-urgente .ayg-spark { animation: ayg-destello 1.6s ease-in-out infinite; }
  .ayg-urgente .ayg-flow  { animation: ayg-flujo .7s linear infinite; }

  /* Al entrar en pantalla (navegadores con scroll-driven animations).
     Sin soporte, el icono simplemente ya está dibujado. */
  @supports (animation-timeline: view()) {
    .ayg-ico .ayg-draw {
      animation: ayg-trazo linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 90%;
    }
    .ayg-card:hover .ayg-draw,
    .ayg-card:focus-within .ayg-draw,
    .ayg-ico:hover .ayg-draw {
      animation: ayg-trazo .9s var(--ayg-salida) both;
      animation-timeline: auto;
    }
  }
}

/* 3. Tarjetas y filas de servicio ---------------------------------------- */
/* Clase .ayg-card en el contenedor que envuelve icono + título + enlace     */
.ayg-card {
  transition: box-shadow .35s var(--ayg-salida), transform .35s var(--ayg-salida), border-color .2s;
}
.ayg-card:hover,
.ayg-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px rgba(15, 42, 74, .35);
  border-color: var(--ayg-azul);
}

/* Lista de servicios (widget Lista de iconos con clase .ayg-lista) */
.ayg-lista .elementor-icon-list-item > a {
  padding-block: 10px;
  border-bottom: 1px solid var(--ayg-linea);
  transition: padding-left .3s var(--ayg-salida), color .2s;
}
.ayg-lista .elementor-icon-list-item > a:hover,
.ayg-lista .elementor-icon-list-item > a:focus-visible {
  padding-left: 8px;
  color: var(--ayg-azul-2);
}
.ayg-lista .elementor-icon-list-icon svg { transition: transform .3s var(--ayg-salida); }
.ayg-lista .elementor-icon-list-item > a:hover .elementor-icon-list-icon svg { transform: translateX(4px); }

/* 4. Botones -------------------------------------------------------------- */
/* Clase .ayg-btn en el widget Botón. El icono del botón se desplaza al pasar */
.ayg-btn .elementor-button {
  transition: background-color .2s, box-shadow .3s var(--ayg-salida), transform .15s;
}
.ayg-btn .elementor-button:hover { box-shadow: 0 10px 20px -10px rgba(15, 42, 74, .5); }
.ayg-btn .elementor-button:active { transform: translateY(1px); }
.ayg-btn .elementor-button-icon svg { transition: transform .3s var(--ayg-salida); }
.ayg-btn .elementor-button:hover .elementor-button-icon svg { transform: translateX(4px); }

/* 5. Entrada del hero (una sola vez, al cargar) -------------------------- */
/* .ayg-hero-texto en el contenedor de texto, .ayg-hero-foto en el widget Imagen */
@keyframes ayg-sube  { from { opacity: 0; transform: translateY(18px); } }
@keyframes ayg-abre  { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: no-preference) {
  .ayg-hero-texto > * { animation: ayg-sube .8s var(--ayg-salida) both; }
  .ayg-hero-texto > *:nth-child(2) { animation-delay: .08s; }
  .ayg-hero-texto > *:nth-child(3) { animation-delay: .16s; }
  .ayg-hero-texto > *:nth-child(4) { animation-delay: .24s; }
  .ayg-hero-foto img { animation: ayg-abre 1s var(--ayg-salida) .1s both; }
}

/* 6. Cabecera fija -------------------------------------------------------- */
/* Clase .ayg-header en el contenedor principal de la plantilla de cabecera  */
.elementor-location-header { position: sticky; top: 0; z-index: 100; }
body.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .elementor-location-header { top: 0; } }
.ayg-header { background: var(--ayg-fondo); }
@keyframes ayg-sombra { to { box-shadow: 0 6px 18px -10px rgba(15, 42, 74, .45); } }
@supports (animation-timeline: scroll()) {
  .elementor-location-header {
    animation: ayg-sombra linear both;
    animation-timeline: scroll();
    animation-range: 0 120px;
  }
}

/* 7. Barra de urgencia en celular ---------------------------------------- */
/* Clase .ayg-barra-movil en un contenedor de la plantilla de pie de página  */
.ayg-barra-movil { display: none; }
@media (max-width: 767px) {
  .ayg-barra-movil {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 20px -12px rgba(15, 42, 74, .5);
  }
  body { padding-bottom: 64px; }
}

/* 8. Pasos del proceso ---------------------------------------------------- */
/* Clase .ayg-pasos en el contenedor de los 4 pasos (escritorio, en fila)    */
@keyframes ayg-linea { from { transform: scaleX(0); } }
@media (min-width: 1025px) {
  .ayg-pasos { position: relative; }
  .ayg-pasos::before {
    content: "";
    position: absolute;
    top: 24px; left: 0; right: 0;
    height: 2px;
    background: var(--ayg-amarillo);
    transform-origin: left;
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .ayg-pasos::before {
        animation: ayg-linea linear both;
        animation-timeline: view();
        animation-range: entry 20% cover 45%;
      }
    }
  }
}

/* 9. Ajustes de Elementor --------------------------------------------------- */
.ayg-ico-badge .elementor-icon { box-shadow: 0 6px 14px -6px rgba(15, 42, 74, .45); }
.ayg-card .elementor-widget-image img { display: block; }
.ayg-card .elementor-widget-button .elementor-button { width: 100%; justify-content: center; }
.ayg-servicios > .e-con:last-child { grid-column: span 2; }
@media (max-width: 767px) { .ayg-servicios > .e-con:last-child { grid-column: auto; } }
.ayg-faq .elementor-accordion-item { border: 0 !important; border-bottom: 1px solid var(--ayg-linea) !important; }
.ayg-faq .elementor-tab-content { border: 0 !important; }
.ayg-barra-movil .elementor-widget-button { flex: 1 1 50%; }
.ayg-barra-movil .elementor-button { width: 100%; min-height: 64px; justify-content: center; }
.ayg-card > .e-con:last-child { margin-top: auto; }
.ayg-header .elementor-nav-menu--main .elementor-nav-menu { flex-wrap: nowrap; }
.ayg-header .elementor-widget-nav-menu { flex: 0 1 auto; margin-left: auto; }
.ayg-header .elementor-nav-menu--main .elementor-item { padding-left: 11px; padding-right: 11px; }
.ayg-header .ayg-tel { display: none; }
.ayg-header > .e-con-inner > .e-con:first-child { flex: 0 0 auto; width: auto; }
.ayg-header .elementor-button-text, .ayg-header .elementor-nav-menu a { white-space: nowrap; }
.ayg-logo-claro img { filter: brightness(0) invert(1); }
.ayg-galeria .elementor-widget-image img { transition: transform .5s var(--ayg-salida); }
.ayg-galeria .elementor-widget-image { overflow: hidden; border-radius: 10px; }
.ayg-galeria .elementor-widget-image:hover img { transform: scale(1.04); }
@media (max-width: 767px) {
  .ayg-header > .e-con-inner, .ayg-header .e-con { flex-wrap: nowrap; }
  .ayg-header .elementor-widget-button { display: none; }
  .ayg-header .elementor-widget-nav-menu { margin-left: auto; }
}

/* 10. Muro de fotos deslizante (sección final, clase .ayg-cta-muro) ------- */
.ayg-cta-muro { position: relative; overflow: hidden; isolation: isolate; }
.ayg-cta-muro::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(8, 26, 48, .92) 0%, rgba(8, 26, 48, .78) 55%, rgba(8, 26, 48, .55) 100%),
    linear-gradient(180deg, rgba(8, 26, 48, .9) 0%, rgba(8, 26, 48, 0) 18%, rgba(8, 26, 48, 0) 82%, rgba(8, 26, 48, .9) 100%);
}
.ayg-cta-muro > .ayg-muro {
  position: absolute; z-index: 0; inset: -35% -12%; width: auto; max-width: none;
  transform: rotate(-9deg); flex-wrap: nowrap; pointer-events: none;
}
.ayg-muro > .ayg-muro-col { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; will-change: transform; }
.ayg-muro-foto, .ayg-muro-foto img { width: 100%; }
.ayg-muro-foto img { display: block; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); filter: saturate(.85); }
.ayg-cta-muro > .ayg-cta-contenido { position: relative; z-index: 2; max-width: 760px; }
.ayg-cta-contenido .elementor-heading-title { text-shadow: 0 4px 30px rgba(0, 0, 0, .45); }
@keyframes ayg-desliza-arriba { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes ayg-desliza-abajo { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .ayg-muro > .ayg-muro-col:nth-child(odd) { animation: ayg-desliza-arriba 70s linear infinite; }
  .ayg-muro > .ayg-muro-col:nth-child(even) { animation: ayg-desliza-abajo 85s linear infinite; }
  .ayg-cta-muro:hover .ayg-muro-col { animation-play-state: paused; }
}
@media (max-width: 767px) {
  .ayg-muro > .ayg-muro-col:nth-child(n+4) { display: none; }
  .ayg-cta-muro > .ayg-muro { inset: -25% -30%; }
}

/* 11. Módulo confianza: CONTE + medios de pago ------------------------------ */
#confianza .ayg-conte-logo { align-self: flex-start; width: auto; max-width: 100%; }
.ayg-pago .elementor-widget-text-editor p { margin: 0; }
.ayg-pago { flex-wrap: nowrap !important; }
@media (max-width: 767px) { .ayg-pago .elementor-widget-image img { width: 96px; } }
.ayg-pago { transition: border-color .2s, box-shadow .3s var(--ayg-salida); }
.ayg-pago:hover { border-color: var(--ayg-azul) !important; box-shadow: 0 10px 22px -14px rgba(15, 42, 74, .45); }/* End custom CSS */