/* ============================================================
   WOXANT.ai — base: reset, tipografía, contenedores, utilidades
   MOBILE FIRST: el CSS base es el de móvil; se escala con min-width.
   ============================================================ */

/* ---- Reset ------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* que los anclas no queden bajo el header fijo */
  scroll-padding-top: var(--wox-offset-top);
}

body {
  margin: 0;
  background: var(--wox-bg);
  color: var(--wox-text);
  font-family: var(--wox-font-body);
  font-size: var(--wox-fs-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clave: nada debe generar scroll horizontal en móvil */
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---- Tipografía -------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--wox-font-display);
  font-weight: 700;
  letter-spacing: var(--wox-tracking);
  margin: 0;
  line-height: 1.1;
}
p { margin: 0; }

/* Escala fluida: en 375px el H1 no puede ser 60px.
   clamp(min, preferido, max) cubre todo el rango sin media queries. */
.h1 { font-size: clamp(32px, 7.2vw, var(--wox-fs-h1)); }
.h2 { font-size: clamp(28px, 5.6vw, var(--wox-fs-h2)); }
.h2-sec { font-size: clamp(26px, 4.4vw, var(--wox-fs-h2-sec)); }
.h3 { font-size: clamp(22px, 3.4vw, var(--wox-fs-h3)); }
.h3-card { font-size: var(--wox-fs-h3-card); }
.h3-sm { font-size: var(--wox-fs-h3-sm); }

.text-sec   { font-size: var(--wox-fs-sec); }
.text-micro { font-size: var(--wox-fs-micro); }

/* ---- Contenedor (grilla de paleta.md §10) ------------------- */
.container {
  width: 100%;
  padding-left: var(--wox-container-pad);
  padding-right: var(--wox-container-pad);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1400px) { .container { max-width: 1400px; } }

/* ---- Secciones --------------------------------------------- */
.section { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 768px) {
  .section { padding-top: var(--wox-section-pad); padding-bottom: var(--wox-section-pad); }
}

/* ---- Botones ------------------------------------------------
   Regla de accesibilidad (no tocar):
   - --wox-cyan NUNCA como texto sobre fondo claro (usar --wox-cyan-deep)
   - sobre fondo --wox-cyan el texto va en --wox-navy, nunca blanco       */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: var(--wox-radius-btn);
  font-family: var(--wox-font-body);
  font-size: var(--wox-fs-sec);
  font-weight: 600;
  line-height: 1;
  transition: transform var(--wox-t-fast) var(--wox-ease),
              box-shadow var(--wox-t-comp) var(--wox-ease),
              background-color var(--wox-t-fast) var(--wox-ease),
              color var(--wox-t-fast) var(--wox-ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible {
  outline: 3px solid var(--wox-cyan-deep);
  outline-offset: 2px;
}

/* CTA principal: fondo navy, texto blanco */
.btn-primary { background: var(--wox-navy); color: #fff; }
.btn-primary:hover { background: #0A2748; }

/* CTA gradiente (navy → cyan-deep), texto blanco */
.btn-grad {
  background: var(--wox-grad-cta);
  color: #fff;
  border-radius: var(--wox-radius-pill);
  padding: 1rem 2rem;
  font-size: var(--wox-fs-body);
  box-shadow: var(--wox-shadow-2xl);
}

/* Botón de acento: fondo cian, texto NAVY (nunca blanco) */
.btn-accent { background: var(--wox-cyan); color: var(--wox-navy); }
.btn-accent:hover { background: var(--wox-cyan-glow); }

/* Botón blanco píldora */
.btn-white {
  background: var(--wox-surface);
  color: var(--wox-text);
  border-radius: var(--wox-radius-pill);
  box-shadow: var(--wox-shadow-lg);
  font-weight: 600;
}
.btn-white:hover { background: #fff; box-shadow: var(--wox-shadow-2xl); }

/* ---- Píldoras / chips -------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: var(--wox-radius-pill);
  padding: .5rem 1rem;
  font-size: var(--wox-fs-sec);
}

/* Glassmorphism sobre gradiente oscuro (referencia: chips de industria) */
.glass {
  background: rgba(255,255,255,.05);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: var(--wox-radius-card);
  color: #fff;
}

/* ---- Tarjeta ----------------------------------------------- */
.card {
  background: var(--wox-surface);
  border: 1px solid var(--wox-border);
  border-radius: var(--wox-radius-card);
  box-shadow: var(--wox-shadow-lg);
}

/* ---- PLACEHOLDER: estilo de "dato pendiente" ---------------
   Todo dato que Woxant todavía no confirmó se muestra así, atenuado
   y entre corchetes, para que se note que falta y se pueda grepear. */
.placeholder {
  color: var(--wox-text-soft);
  font-style: italic;
  font-weight: 400;
  border-bottom: 1px dashed var(--wox-text-soft);
  opacity: .9;
}
.placeholder-on-dark {
  color: rgba(255,255,255,.6);
  border-bottom-color: rgba(255,255,255,.35);
}

/* ---- Utilidades -------------------------------------------- */
.text-center { text-align: center; }
.text-accent { color: var(--wox-cyan-deep); }        /* acento SOBRE CLARO */
.text-accent-on-dark { color: var(--wox-cyan); }     /* acento SOBRE OSCURO */
.text-muted { color: var(--wox-text-muted); }
.text-soft  { color: var(--wox-text-soft); }

/* Sólo para lectores de pantalla */
.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;
}

/* Saltar al contenido (accesibilidad de teclado) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--wox-navy);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--wox-radius-btn) 0;
}
.skip-link:focus { left: 0; }