/* =====================================================================
   gig.mx Fase 1 · Base (reset acotado a .gx-page, tipografía, utilidades)
   ===================================================================== */
.gx-page, .gx-page *, .gx-page *::before, .gx-page *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.gx-page { margin: 0; background: var(--gx-bg); color: var(--gx-purple); font-family: var(--gx-font); font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
:where(.gx-page) :where(img, video, svg) { display: block; max-width: 100%; }
:where(.gx-page) a { color: inherit; text-decoration: none; }
:where(.gx-page) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.gx-page) :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; padding: 0; font-weight: inherit; }
:where(.gx-page) :where(ul, ol) { list-style: none; }
.gx-page em { font-style: normal; color: var(--gx-green); }
.gx-page :focus-visible { outline: 2px solid var(--gx-green); outline-offset: 3px; }
.gx-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.gx-main { display: block; max-width: var(--gx-max); margin: 0 auto; position: relative; }

/* Tipografía (ERS 4.2) */
.gx-display-xl { font-size: var(--gx-fs-display-xl); line-height: .48; letter-spacing: -.015em; font-weight: 500; }
.gx-display-l  { font-size: var(--gx-fs-display-l);  line-height: .9;  letter-spacing: -.015em; font-weight: 500; }
.gx-display-m  { font-size: var(--gx-fs-display-m);  line-height: 1.1; letter-spacing: -.015em; font-weight: 500; }
.gx-page-title { font-size: var(--gx-fs-display-m);  line-height: 1;   letter-spacing: -.015em; font-weight: 400; }
.gx-h2   { font-size: var(--gx-fs-h2);   line-height: 1.033; letter-spacing: -.015em; }
.gx-h3   { font-size: var(--gx-fs-h3);   line-height: 1.1;   letter-spacing: -.015em; }
.gx-h4   { font-size: var(--gx-fs-h4);   line-height: 1.2;   letter-spacing: -.015em; }
.gx-num  { font-size: var(--gx-fs-num);  line-height: 1.3;   letter-spacing: -.015em; }
.gx-lead { font-size: var(--gx-fs-lead); line-height: 1.5;   letter-spacing: -.015em; }
.gx-card-title { font-size: var(--gx-fs-lead); line-height: 1.07; letter-spacing: -.015em; }
.gx-body-l { font-size: var(--gx-fs-body-l); line-height: 1.136; letter-spacing: -.015em; }
.gx-body   { font-size: var(--gx-fs-body);   line-height: 1.25; }
.gx-small  { font-size: var(--gx-fs-small);  line-height: 1.333; letter-spacing: -.015em; }
.gx-eyebrow { font-size: var(--gx-fs-eyebrow); line-height: 1.235; }
.gx-medium { font-weight: 500; }

/* Colores de texto */
.gx-c-96 { color: var(--gx-t-96); } .gx-c-85 { color: var(--gx-t-85); } .gx-c-80 { color: var(--gx-t-80); }
.gx-c-70 { color: var(--gx-t-70); } .gx-c-60 { color: var(--gx-t-60); } .gx-c-50 { color: var(--gx-t-50); }
.gx-c-40 { color: var(--gx-t-40); } .gx-c-ink { color: var(--gx-ink); } .gx-c-green { color: var(--gx-green); }
.gx-c-light { color: var(--gx-surface); } .gx-c-l95 { color: var(--gx-l-95); } .gx-c-l60 { color: var(--gx-l-60); }
.gx-c-l50 { color: var(--gx-l-50); }

/* Contenedores de sección */
.gx-section { position: relative; padding: 0 var(--gx-pad-x); }
.gx-section--sm { padding: 0 var(--gx-pad-x-sm); }
.gx-rounded-top { border-radius: var(--gx-r-xl) var(--gx-r-xl) 0 0; background: var(--gx-bg); }
.gx-block-dark { background: var(--gx-purple); color: var(--gx-surface); border-radius: var(--gx-r-md); }
.gx-bg-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.gx-bg-photo img { width: 100%; height: 100%; object-fit: cover; }
.gx-bg-photo::after { content: ""; position: absolute; inset: 0; background: rgba(250, 250, 250, .85); }

/* Reveal al hacer scroll (ERS 4.5) */
.gx-reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--gx-d-reveal) var(--gx-reveal), transform var(--gx-d-reveal) var(--gx-reveal); }
.gx-reveal.is-in { opacity: 1; transform: none; }
.gx-no-js .gx-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gx-page *, .gx-page *::before, .gx-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .gx-reveal { opacity: 1; transform: none; }
}
