/* ================================================================
   Infy Theme — Base
   Variables, reset y estilos tipográficos globales
   ================================================================ */

/* ── Tokens de diseño ─────────────────────────────────────────── */
:root {
  /* Colores */
  --color-primary:       #2ff7d0;
  --color-primary-hover: #082944;
  --color-primary-hover-fg: #2ff7d0;
  --color-dark:          #082944;
  --color-dark-hover:    #2ff7d0;
  --color-dark-hover-fg: #082944;
  --color-white:         #ffffff;
  --color-gray:          #eeeeee;
  --color-gray-mid:      #cccccc;
  --color-text:          #082944;
  --color-text-muted:    #5a7a99;

  /* Tipografía — hereda WoodMart Theme Settings */
  --font-family:       var(--wd-text-font, sans-serif);
  --font-family-title: var(--wd-title-font, var(--wd-text-font, sans-serif));
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* Escala de fuentes */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  2rem;       /* 32px */
  --fs-3xl:  2.75rem;    /* 44px */
  --fs-4xl:  3.5rem;     /* 56px */
  --fs-5xl:  4rem;       /* 64px */
  --fs-6xl:  4.5rem;     /* 72px */
  --fs-7xl:  5rem;       /* 80px */
  --fs-8xl:  5.5rem;     /* 88px */
  --fs-9xl:  6rem;       /* 96px */
  --fs-10xl: 6.5rem;     /* 104px */
  --fs-11xl: 7rem;       /* 112px */
  --fs-12xl: 7.5rem;     /* 120px */
  --fs-13xl: 8rem;       /* 128px */
  --fs-14xl: 8.5rem;     /* 136px */
  --fs-15xl: 9rem;       /* 144px */

  /* Espaciado */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */

  /* Bordes */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 4px rgba(8, 41, 68, 0.08);
  --shadow-md: 0 4px 16px rgba(8, 41, 68, 0.12);
  --shadow-lg: 0 8px 32px rgba(8, 41, 68, 0.16);

  /* Transiciones */
  --transition: 0.2s ease;

  /* Contenedor */
  --container-max: 1280px;
  --container-pad: var(--sp-8);
}

/* ── Reset ────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--wd-text-font-size, var(--fs-base));
  font-weight: var(--wd-text-font-weight, var(--fw-regular));
  font-style: var(--wd-text-font-style, normal);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  /* clip (no hidden) para no romper position: sticky del header */
  overflow-x: clip;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input,
select,
textarea {
  font-family: inherit;
}

/* ── Contenedor Infy (no afecta .container del Header Builder de WoodMart) */
body.infy-custom-layout .wd-content-layout .container,
body.infy-custom-layout .site-footer .container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.wd-content-layout{
  padding-block: 0px;
}

/* ── Utilidades ───────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Durante la entrada GSAP, el hover no debe interrumpir transform/opacity. */
.is-intro-animating,
.is-intro-animating * {
  pointer-events: none !important;
  transition: none !important;
}