.elementor-1533 .elementor-element.elementor-element-caa6fe3{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:300px;--padding-bottom:260px;--padding-left:0px;--padding-right:0px;}.elementor-1533 .elementor-element.elementor-element-caa6fe3:not(.elementor-motion-effects-element-type-background), .elementor-1533 .elementor-element.elementor-element-caa6fe3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://personalizados.norteabanicos.com/wp-content/uploads/2025/10/Funciones-Norte_q90.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1533 .elementor-element.elementor-element-caa6fe3.e-con{--align-self:center;}.elementor-1533 .elementor-element.elementor-element-fbc4fec{--display:flex;--min-height:0px;--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:110px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1533 .elementor-element.elementor-element-fbc4fec.e-con{--align-self:center;}.elementor-1533 .elementor-element.elementor-element-8e16c8e.elementor-element{--align-self:center;}.elementor-1533 .elementor-element.elementor-element-8e16c8e{text-align:left;font-size:60px;line-height:75px;color:var( --e-global-color-blocksy_palette_8 );}.elementor-1533 .elementor-element.elementor-element-8e16c8e p{margin-block-end:0px;}.elementor-1533 .elementor-element.elementor-element-bd04f7b{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--margin-top:70px;--margin-bottom:00px;--margin-left:0px;--margin-right:0px;}.elementor-1533 .elementor-element.elementor-element-2073a36{text-align:center;}.elementor-1533 .elementor-element.elementor-element-2073a36 .elementor-heading-title{font-size:42px;text-transform:uppercase;}.elementor-1533 .elementor-element.elementor-element-1c303c2{width:var( --container-widget-width, 100% );max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:left;font-size:20px;}.elementor-1533 .elementor-element.elementor-element-1c303c2.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1533 .elementor-element.elementor-element-a5356f4{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1533 .elementor-element.elementor-element-a5356f4.e-con{--align-self:center;}.elementor-1533 .elementor-element.elementor-element-4782cde.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1533 .elementor-element.elementor-element-99f01d4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1533 .elementor-element.elementor-element-2645aca{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1533 .elementor-element.elementor-element-7477a3e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1533 .elementor-element.elementor-element-2b009c3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1533 .elementor-element.elementor-element-d0997b7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1533 .elementor-element.elementor-element-3460959{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-1533 .elementor-element.elementor-element-bd04f7b{--content-width:1600px;}.elementor-1533 .elementor-element.elementor-element-a5356f4{--content-width:1600px;}.elementor-1533 .elementor-element.elementor-element-99f01d4{--content-width:1600px;}.elementor-1533 .elementor-element.elementor-element-2645aca{--content-width:1600px;}.elementor-1533 .elementor-element.elementor-element-7477a3e{--content-width:1600px;}.elementor-1533 .elementor-element.elementor-element-2b009c3{--content-width:1600px;}.elementor-1533 .elementor-element.elementor-element-d0997b7{--content-width:1600px;}}@media(max-width:1024px){.elementor-1533 .elementor-element.elementor-element-caa6fe3:not(.elementor-motion-effects-element-type-background), .elementor-1533 .elementor-element.elementor-element-caa6fe3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center right;}}@media(max-width:767px){.elementor-1533 .elementor-element.elementor-element-caa6fe3{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-1533 .elementor-element.elementor-element-caa6fe3:not(.elementor-motion-effects-element-type-background), .elementor-1533 .elementor-element.elementor-element-caa6fe3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-size:cover;}.elementor-1533 .elementor-element.elementor-element-fbc4fec{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1533 .elementor-element.elementor-element-fbc4fec.e-con{--align-self:center;}.elementor-1533 .elementor-element.elementor-element-8e16c8e{text-align:center;font-size:50px;}.elementor-1533 .elementor-element.elementor-element-bd04f7b{--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1533 .elementor-element.elementor-element-2073a36 .elementor-heading-title{font-size:30px;}.elementor-1533 .elementor-element.elementor-element-1c303c2{text-align:center;font-size:14px;}.elementor-1533 .elementor-element.elementor-element-4782cde{width:var( --container-widget-width, 387.059px );max-width:387.059px;--container-widget-width:387.059px;--container-widget-flex-grow:0;}}/* Start custom CSS for html, class: .elementor-element-4782cde */.timeline { padding: 32px 0; }

.timeline-years{
  display:flex; justify-content:center; align-items:center; gap:0; flex-wrap:wrap;
  position:relative; margin-bottom:24px;
}

/* Botones-año */
.timeline .year{
  position:relative;
  display:inline-flex; align-items:center;
  background:none; border:0; padding:0 8px; cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600; font-size:40px; color:#999; line-height:1;
  z-index:1; background:#fff; white-space:nowrap;
  transition: color .2s ease, font-size .2s ease;
}

/* Divider reservado (no mueve layout) */
.timeline .year::after{
  content:""; display:inline-block; width:100px; height:1px;
  margin-left:20px; background:#000; transform:translateY(-4px);
  opacity:0; transition:opacity .2s ease;
}

/* Activo (year-main) */
.timeline .year.year-main{
  color:#000; font-weight:800; font-size:102px;
}
.timeline .year.year-main::after{ opacity:1; }

/* Paneles (widgets Shortcode) */
.panel{ display:none; opacity:0; transition:opacity .25s ease; }
.panel.is-active{ display:block; opacity:1; }

/* Responsive */
@media (max-width:768px){
  .timeline-years{ gap:22px; }
  .timeline .year{ font-size:24px; }
  .timeline .year.year-main{ font-size:48px; }
  .timeline .year::after{ width:48px; margin-left:12px; }
}



/* Estado base: visibles pero sin ocupar si no están activos */
.panel{
  display: block;                   /* mantenemos block para transicionar */
  opacity: 0;
  transform: translateY(8px);
  height: 0;
  overflow: hidden;
  transition:
    opacity .25s ease,
    transform .25s ease,
    height .35s ease;
}

/* entrando (activo): */
.panel.is-active{
  opacity: 1;
  transform: translateY(0);
  height: auto;                     /* JS convertirá a una altura fija para animar */
}

/* saliendo (clase temporal) */
.panel.is-leaving{
  opacity: 0;
  transform: translateY(8px);
}


.timeline .year::after{ height:1px; opacity:.6; }
.timeline .year.year-main::after{ opacity:.9; }


.timeline .year.year-main{ letter-spacing: .5px; }


/* ================================
   Desktop: snap limpio (sin barras)
   ================================ */
@media (min-width: 1025px) {
  .timeline {
    overflow: visible; /* no encerrar en caja */
    position: relative;
  }

  .timeline-years{
    position: relative;
    flex-wrap: nowrap;            /* una sola fila */
    overflow-x: auto;             /* sólo scroll horizontal */
    overflow-y: hidden;           /* sin barra vertical */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* Ocultar barras (todas las engines) */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge legacy */
  }
  .timeline-years::-webkit-scrollbar { display: none; } /* WebKit */

  /* Cada año “engancha” centrado, sin óvalos ni cambios de layout */
  .timeline .year{
    flex: 0 0 auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* mantenemos tu estilo tipográfico original */
  }

  /* Fade lateral sutil sobre el carril de años */
  .timeline-years::before,
  .timeline-years::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:48px; pointer-events:none;
  }
  .timeline-years::before{
    left:0;
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
  }
  .timeline-years::after{
    right:0;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
  }
}

/* ================================
   Tablet/Mobile: vertical
   ================================ */
@media (max-width: 1024px) {
  .timeline-years{
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 22px;
    overflow: visible;            /* sin scroll horizontal */
  }
  .timeline .year::after{ display: none; } /* sin divisores en vertical */
  .timeline .year{
    display: block;
    padding: 0;
    white-space: normal;
  }
}
/* ================================
   Tablet/Mobile: divider horizontal a la derecha del activo
   ================================ */
@media (max-width: 1024px) {
  .timeline-years {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 22px;
  }

  /* oculta los divisores normales */
  .timeline .year::after {
    display: none;
  }

  /* muestra el divider solo en el activo */
  .timeline .year.year-main {
    position: relative;
  }

  .timeline .year.year-main::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;                 /* centrado verticalmente */
    left: 100%;               /* sale desde el borde derecho del texto */
    transform: translateY(-50%);
    width: 48px;              /* largo de la línea */
    height: 1.5px;
    background: #000;
    opacity: 0.8;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-96c3580 *//* ================================
   Norte Slogan – estilos base (desktop-first suave)
   ================================ */
.norte-slogan {
  display: flex;
  justify-content: center;
  align-items: center;            /* mantiene icono y textos a la misma altura visual */
  gap: 24px;                      /* espacio entre textos e icono */
  text-align: center;
  padding: 20px 0;
}

/* Izquierda: CS Harley (forzado) */
.ns-left {
  font-family: "CS Harley", "CS Harley Outline", system-ui, sans-serif !important;
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: #000;
}

/* Icono/divisor */
.norte-slogan .ns-divider {
  width: 36px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  transform: translateY(2px);     /* micro-ajuste para alinear con la altura visual del texto */
}

/* Derecha: Plus Jakarta Sans (principal del sitio) */
.norte-slogan .ns-right {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;               /* Extra Bold */
  font-size: 46px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: #000;
}

/* ================================
   Tablet (768–1024): vertical y un poco más grande
   ================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  .norte-slogan {
    flex-direction: column;
    gap: 10px;
    padding: 24px 0;
  }
  .norte-slogan .ns-left {
    font-size: 34px;
  }
  .norte-slogan .ns-divider {
    width: 50px;
    transform: translateY(0);     /* en columna no hace falta micro-ajuste */
  }
  .norte-slogan .ns-right {
    font-size: 36px;
  }
}

/* ================================
   Mobile (≤767): vertical y compacto
   ================================ */
@media (max-width: 767px) {
  .norte-slogan {
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
  }
  .norte-slogan .ns-left {
    font-size: 25px;
    font-weight: 400;             /* mantiene el look Harley */
  }
  .norte-slogan .ns-divider {
    width: 55px;
    transform: translateY(0);
  }
  .norte-slogan .ns-right {
    font-size: 25px;
    font-weight: 800;
  }
}

/* ================================
   (Opcional) Scope por página
   Reemplazá 123 por el ID de la página si querés limitarlo
   ================================ */
/*
.page-id-123 .norte-slogan { ... }
*/
/* CS Harley – normalizado para “TU ESTILO” */
.norte-slogan .ns-left {
  font-family: "CS Harley", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1 !important;

  /* Ajustá esto para que calce con tu Figma */
  letter-spacing: 0.02em; /* si en Figma ves ≈20 de tracking; si es 0, poné 0em */

  /* Suavizado / kerning */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: "kern";
}

/* Por si Elementor/tema mete mayúsculas: mejor no transformarlo */
.norte-slogan .ns-left {
  text-transform: none !important;
}

/* Alineación del icono a altura visual (tuneable) */
.norte-slogan .ns-divider {
  vertical-align: middle;
  transform: translateY(1px); /* ajustá entre 0–2px según el peso */
}

.norte-slogan .ns-left {
  font-family: "CS Harley", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em;       /* cierra un poco el espaciado */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0 0 0.3px #000;    /* da un grosor óptico mayor sin desenfocar */
}

/* CS Harley servido directo desde uploads */
@font-face {
  font-family: "CS Harley Local";
  src: url("/wp-content/uploads/2025/10/CS-Harley-Regular.woff2?v=1") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Aplica SOLO al texto izquierdo del slogan */
.norte-slogan .ns-left{
  font-family: "CS Harley Local", "CS Harley", "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 0em; /* ajustá si querés igualar Figma: p.ej. -0.005em / 0.02em */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; /* probá geometricPrecision si preferís */
}
/* Permite usar .ns-left fuera de .norte-slogan */
.ns-left {
  font-family: "CS Harley Local", "CS Harley", "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 0em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #000;
}/* End custom CSS */