@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//alfa.digital/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.2.7") format("woff2");
}

:root {
	--wd-text-font: "Geist", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(48,48,48);
	--wd-text-font-size: 17px;
	--wd-title-font: "Geist", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 400;
	--wd-title-color: rgb(0,0,0);
	--wd-entities-title-font: "Geist", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 400;
	--wd-entities-title-color: rgb(0,0,0);
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Nimbus-sans", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Geist", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 400;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: rgb(0,0,0);
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Geist", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 17px;
	--wd-primary-color: rgb(0,51,255);
	--wd-alternative-color: #fbbc34;
	--wd-link-color: rgb(46,163,242);
	--wd-link-color-hover: rgb(46,163,242);
	--btn-default-transform: none;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-transform: none;
	--btn-accented-bgcolor: rgb(0,51,255);
	--btn-accented-bgcolor-hover: rgb(0,27,232);
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title {
	background-color: #0a0a0a;
	background-image: none;
	background-size: cover;
	background-position: center center;
}
.wd-footer {
	background-color: rgb(7,13,20);
	background-image: none;
}
 {
	text-transform: none;
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1480px;
--wd-form-brd-radius: 5px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 0px;
}

@media (min-width: 1480px) {
[data-vc-full-width]:not([data-vc-stretch-content]),
:is(.vc_section, .vc_row).wd-section-stretch {
padding-left: calc((100vw - 1480px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
padding-right: calc((100vw - 1480px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
}
}

rs-slides :is([data-type=text],[data-type=button]) {
font-family: Geist !important;
}
rs-slides :is(h1,h2,h3,h4,h5,h6)[data-type=text] {
font-family: Geist !important;
}


/* =====================================================================
   ALFA DIGITAL — CSS GENERAL  ·  alfa.digital (Woodmart)
     0. Variables (:root)
     1. Header sticky "píldora" (base + DESKTOP)
     2. Eyebrow / subtítulos
     3. Contadores
     4. Banner de clientes
     5. Hero section
   ===================================================================== */


/* =====================================================================
   0. VARIABLES GLOBALES
   ===================================================================== */
:root{
  --pill-radius: 40px;
  --pill-x: 0px;
  --pill-y: 6px;
  --pill-blur: 10px;
  --sticky-gap: 10px;

  --header-maxw: 1450px;
  --sticky-height: 70px;

  --pill-bg-base: rgba(255,255,255,0.02);
  --pill-shadow-base: 0 0 0 0 rgba(0,0,0,0);

  --pill-bg-sticky: rgba(255,255,255,0.86);
  --pill-shadow-sticky: 0 0 0 1px rgba(82,88,102,0.10), 0 16px 44px -8px rgba(9,9,21,0.20);

  --nav-color-base: #ffffff;
  --nav-color-sticky: #111111;

  --logo-white: url("https://alfa.digital/wp-content/uploads/2023/10/Logo-White.svg");
  --logo-blue: #0033ff;
}


/* =====================================================================
   1. HEADER STICKY "PÍLDORA" (base compartida + DESKTOP)
   ===================================================================== */

/* 1.0) Quitar el espaciador boxed de Woodmart en reposo (header a 70px arriba) */
header.whb-header.whb-boxed:not(.whb-sticked) .whb-main-header:before{
  height: 0 !important;
}

/* 1.1) Row sticky: fondo transparente + altura forzada */
header.whb-header.whb-sticked .whb-row.whb-general-header.whb-sticky-row{
  background-color: transparent !important;
  height: var(--sticky-height) !important;
  min-height: var(--sticky-height) !important;
}

/* 1.1b) Misma altura en el contenedor fijo y en la fila flex */
header.whb-header.whb-sticked .whb-main-header,
header.whb-header.whb-sticked .whb-general-header .whb-flex-row{
  height: var(--sticky-height) !important;
  min-height: var(--sticky-height) !important;
}

/* 1.2) Preparar el contenedor para alojar la píldora */
header.whb-header .whb-general-header > .container{
  position: relative;
}
header.whb-header .whb-general-header > .container > .whb-flex-row{
  position: relative;
  z-index: 2;
}

/* 1.3) La píldora (faint arriba → encendida en sticky, animación 0.4s) */
header.whb-header .whb-general-header > .container::before{
  content:"";
  position:absolute;
  z-index:1;
  top: var(--pill-y);
  bottom: var(--pill-y);
  left: var(--pill-x);
  right: var(--pill-x);
  border-radius: var(--pill-radius);
  background-color: var(--pill-bg-base);
  box-shadow: var(--pill-shadow-base);
  -webkit-backdrop-filter: blur(var(--pill-blur));
  backdrop-filter: blur(var(--pill-blur));
  transition: background-color .4s ease-out, box-shadow .4s ease-out;
  pointer-events:none;
}

/* 1.4) Píldora encendida en sticky */
header.whb-header.whb-sticked .whb-general-header > .container::before{
  background-color: var(--pill-bg-sticky);
  box-shadow: var(--pill-shadow-sticky);
}

/* 1.5) Logo: blanco recoloreado a azul vía máscara en sticky (desktop) */
header.whb-header.whb-sticked .site-logo a.wd-logo{
  display: inline-block;
  -webkit-mask: var(--logo-white) left center / contain no-repeat;
          mask: var(--logo-white) left center / contain no-repeat;
  background-color: var(--logo-blue);
}
header.whb-header.whb-sticked .site-logo a.wd-logo img{
  visibility: hidden;
}

/* 1.6) Botón del header: sin transform */
/* 1.6) Botón del header: sin transform y sin mayúsculas */
header.whb-header .wd-button-wrapper .btn,
header.whb-header .wd-button-wrapper .btn:hover,
header.whb-header .wd-button-wrapper .btn:focus,
header.whb-header .wd-button-wrapper .btn:active{
  transform: none !important;
  text-transform: none !important;
	font-size: 17px;
}

/* 1.7) SOLO DESKTOP (≥1025px) */
@media (min-width: 1025px){
  /* Conservar la caja boxed (Woodmart la pasa a full-width al fijar) */
  header.whb-header.whb-sticked .whb-main-header{
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: var(--header-maxw) !important;
    margin: var(--sticky-gap) auto 0 !important;
  }
  /* Menú en reposo (sobre hero): blanco */
  header.whb-header:not(.whb-sticked) .whb-general-header .whb-column li.menu-item.item-level-0 > a.woodmart-nav-link{
    color: var(--nav-color-base) !important;
  }
  /* Menú en sticky (sobre píldora blanca): negro */
  header.whb-header.whb-sticked .whb-general-header .whb-column li.menu-item.item-level-0 > a.woodmart-nav-link{
    color: var(--nav-color-sticky) !important;
  }
}


/* =====================================================================
   2. EYEBROW / SUBTÍTULOS
   ===================================================================== */
.eyebrow-subtitle .title-subtitle{
  color: #0033ff !important;
  font-size: 17px;
  background: #f2f4fb !important;
  border-radius: 50px;
  padding: 2px 12px;
}


/* =====================================================================
   3. CONTADORES
   ===================================================================== */
.percentage .counter-value:before{ content: "+"; }
.nopercentage .counter-value:after{ content: "%"; }


/* =====================================================================
   4. BANNER DE CLIENTES (overlay degradado + blur enmascarado)
   ===================================================================== */
.div-clients .wrapper-content-banner{
  position: absolute !important;
  inset: auto 0 0 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  z-index: 3 !important;
}

.div-clients .wrapper-content-banner::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0) 100%
  ) !important;

  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;

  -webkit-mask: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0) 100%
  ) !important;

  mask: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}

.div-clients .wrapper-content-banner > *{
  position: relative !important;
  z-index: 2 !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

.div-clients .title-subtitle{ margin-bottom: 20px !important; }


/* =====================================================================
   5. HERO SECTION · fondo dLocal + grilla de luces animada
   ===================================================================== */

/* 5.1) Fondo del row */
.vc_row.hero-section,
.vc_row.hero-section.vc_row-has-fill{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 5%, #3a66f0 0%, transparent 70%),
    linear-gradient(180deg, #1f44e0 0%, #0d1f9e 100%) !important;
}

/* 5.2) Contenido por encima de la grilla animada */
.vc_row.hero-section .wd-marquee-wrapp,
.vc_row.hero-section .vc_row.vc_inner{
  position: relative;
  z-index: 1;
}

/* 5.3) Grilla animada — extendida al 100% del row */
.vc_row.hero-section .adf-deco-grid{
  --_cell: max(5rem, 5vw);
  --_stroke: #ade2ff;
  position: absolute;
  inset: 0 -16px;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  hsl(200 100% 50% / 5%) 2px, transparent 2px),
    linear-gradient(to bottom, hsl(200 100% 50% / 5%) 2px, transparent 2px);
  background-size: var(--_cell) var(--_cell);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4rem, #000 50vh, transparent);
          mask-image: linear-gradient(180deg, transparent 0, #000 4rem, #000 50vh, transparent);
}
@media (min-width: 112.5rem){
  .vc_row.hero-section .adf-deco-grid{ --_cell: max(5rem, 4vw); }
}

/* 5.4) Cada SVG light-path */
.vc_row.hero-section .adf-light-path{
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--_cell) * var(--cols, 20));
  height: calc(var(--_cell) * var(--rows, 20));
  pointer-events: none;
  transform: translate(1px, 1px);
  opacity: 0.1;
}
.vc_row.hero-section .adf-light-path--full{ display: none; }
@media (min-width: 112.5rem){
  .vc_row.hero-section .adf-light-path--notfull{ display: none; }
  .vc_row.hero-section .adf-light-path--full{ display: block; --cols: 25; --rows: 25; }
}
@media (max-width: 47.9375rem){
  .vc_row.hero-section .adf-light-path--desktop{ display: none; }
}
@media (min-width: 48rem){
  .vc_row.hero-section .adf-light-path--mobile{ display: none; }
}

/* 5.5) Trazo + dots */
.vc_row.hero-section .adf-light-path__line{
  fill: none;
  stroke: var(--_stroke);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  will-change: stroke-dashoffset, opacity;
  opacity: 0;
  stroke-dasharray: 300 300;
  stroke-dashoffset: 0;
  animation: adf-moveLines 5s linear infinite;
}
.vc_row.hero-section .adf-light-path__start-dot,
.vc_row.hero-section .adf-light-path__final-dot{ fill: var(--_stroke); }
.vc_row.hero-section .adf-light-path__start-dot{
  opacity: 0;
  animation: adf-showStartDot 5s linear infinite;
  animation-delay: 1s;
}
.vc_row.hero-section .adf-light-path__final-dot{
  opacity: 0;
  animation: adf-showFinalDot 5s linear infinite;
}

/* 5.6) Delays escalonados */
.vc_row.hero-section .adf-deco-grid .adf-light-path:nth-child(2) .adf-light-path__line,
.vc_row.hero-section .adf-deco-grid .adf-light-path:nth-child(2) .adf-light-path__final-dot{ animation-delay: 1s; }
.vc_row.hero-section .adf-deco-grid .adf-light-path:nth-child(3) .adf-light-path__line,
.vc_row.hero-section .adf-deco-grid .adf-light-path:nth-child(3) .adf-light-path__final-dot{ animation-delay: 2s; }
.vc_row.hero-section .adf-deco-grid .adf-light-path:nth-child(4) .adf-light-path__line,
.vc_row.hero-section .adf-deco-grid .adf-light-path:nth-child(4) .adf-light-path__final-dot{ animation-delay: 3s; }

/* 5.7) Keyframes */
@keyframes adf-moveLines{
  0%   { stroke-dashoffset: 300; opacity: 0; }
  10%  { opacity: 1; }
  70%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -60; opacity: 0; }
}
@keyframes adf-showStartDot{
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes adf-showFinalDot{
  0%   { opacity: 0; }
  65%  { opacity: 0; }
  70%  { opacity: 1; }
  80%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .vc_row.hero-section .adf-light-path__line,
  .vc_row.hero-section .adf-light-path__start-dot,
  .vc_row.hero-section .adf-light-path__final-dot{ animation: none; opacity: 0.5; }
}

/* 5.8) "Sin límites." (<u> del título) */
.vc_row.hero-section .woodmart-title-container u{ color: #ade2ff; }@media (min-width: 1025px) {
	/*Footer */
.container.main-footer {
    padding-top: 60px;
    padding-bottom: 60px;
}
}

@media (max-width: 576px) {
	/* =====================================================================
   ALFA DIGITAL — CSS MOBILE · campo Mobile de Woodmart
   ===================================================================== */

/* --- Menú lateral mobile (panel deslizante) --- */
.mobile-nav.wd-side-hidden.wd-side-hidden-nav.wd-right.wd-opener-arrow.wd-opened {
    background: #000 !important;
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius: 20px;
}
.wd-side-hidden {
    --wd-side-hidden-w: min(440px, 80vw);
    padding: 20px;
}
ul#menu-main-menu-1 li a {
    color: #fff !important;
    font-size: 24px;
    text-transform: none;
}

/* --- Header sticky: mismo look que desktop (píldora blanca + logo azul) --- */

/* Altura sticky 58px (override del general que fuerza 70) */
header.whb-header.whb-sticky-real.whb-sticked .whb-row.whb-general-header.whb-sticky-row,
header.whb-header.whb-sticky-real.whb-sticked .whb-main-header,
header.whb-header.whb-sticky-real.whb-sticked .whb-general-header .whb-flex-row{
  height: 58px !important;
  min-height: 58px !important;
}

/* Píldora más compacta + gutter lateral (hereda fondo blanco y sombra del general) */
header.whb-header.whb-sticky-real .whb-general-header > .container::before{
  top: 5px;
  bottom: 5px;
  left: 12px;
  right: 12px;
  border-radius: 22px;
}

/* Separación superior flotante */
header.whb-header.whb-sticky-real.whb-sticked .whb-main-header{
  margin-top: 6px;
}

/* Hamburguesa oscura sobre la píldora blanca en sticky */
header.whb-header.whb-sticked .wd-header-mobile-nav .wd-tools-icon{
  color: #111111 !important;
}
}

