/* ============================================================
   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;
  /* Fase 6: el titulo tiene su propio token (Azul Estrategico sobre claro,
     Blanco Tecnico sobre oscuro). Va en el selector de ELEMENTO, con
     especificidad 0,0,1, para que cualquier .clase que fije un color sobre
     fondo oscuro (.cta__title, .industrias__title...) le siga ganando. */
  color: var(--wox-titulo);
}
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: var(--wox-on-dark); }
.btn-primary:hover { background: var(--wox-navy-hover); }

/* CTA gradiente (navy → cyan-deep), texto blanco */
.btn-grad {
  background: var(--wox-grad-cta);
  color: var(--wox-on-dark);
  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: var(--wox-surface); 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: color-mix(in srgb, var(--wox-on-dark) 5%, transparent);
  border: 2px solid color-mix(in srgb, var(--wox-on-dark) 20%, transparent);
  border-radius: var(--wox-radius-card);
  color: var(--wox-on-dark);
}

/* ---- 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: color-mix(in srgb, var(--wox-on-dark) 60%, transparent);
  border-bottom-color: color-mix(in srgb, var(--wox-on-dark) 35%, transparent);
}

/* ---- 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: var(--wox-on-dark);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--wox-radius-btn) 0;
}
.skip-link:focus { left: 0; }