/* ==========================================================================
   QWorkLab · base.css
   Tokens, reset, tipografía y piezas compartidas por todas las páginas.
   Sin radios, sin sombras, sin degradados, sin iconos.
   ========================================================================== */

:root {
  /* --- Grafito ---------------------------------------------------------- */
  --grafito:            #0B0D0E;   /* fondo de header, hero y secciones oscuras */
  --grafito-superficie: #14181A;   /* tarjetas y formularios sobre grafito */
  --grafito-borde:      #232a2c;   /* divisores sobre oscuro */
  --grafito-borde-nav:  #1b2022;   /* borde inferior del header */
  --grafito-borde-in:   #2a2f31;   /* borde de input */
  --grafito-borde-alt:  #2f3739;   /* chips y botón de WhatsApp */
  --grafito-linea:      #2a3133;   /* línea del rótulo DESPUÉS */

  /* --- Papel ------------------------------------------------------------ */
  --papel:              #F4F5F2;   /* fondo por defecto */
  --papel-alt:          #E6E9E4;   /* tarjetas y bandas sobre papel */
  --papel-hover:        #EDEFEA;   /* hover de filas clicables */
  --papel-borde:        #cdd2cb;   /* divisor principal sobre claro */
  --papel-borde-alt:    #d6dad4;   /* divisor de sección */
  --papel-borde-fino:   #c3c9c2;   /* borde de chips sobre claro */
  --papel-rayado:       #dde1db;   /* pista de barra y patrón de placeholder */
  --papel-input:        #FFFFFF;   /* opciones sin seleccionar */

  /* --- Verdes ----------------------------------------------------------- */
  --verde-profundo:       #0F3D2E; /* rótulos y flechas sobre papel */
  --verde-profundo-borde: #1c5340;
  --verde-senal:          #A6F04B; /* SOLO sobre fondo oscuro */
  --verde-senal-hover:    #93d942;

  /* --- Grises y funcional ----------------------------------------------- */
  --gris-verdoso:       #5C6B60;   /* secundario sobre papel */
  --gris-verdoso-tenue: #8f9693;   /* secundario sobre grafito */
  --terracota:          #C9762F;   /* solo advertencias y marcas de "esto no" */

  /* --- Texto sobre papel ------------------------------------------------ */
  --tinta:         #0B0D0E;        /* títulos */
  --tinta-cuerpo:  #222826;        /* cuerpo */
  --tinta-cuerpo2: #1c2220;        /* cuerpo en listas y tarjetas */
  --tinta-suave:   #39413D;        /* secundario */

  /* --- Texto sobre grafito ---------------------------------------------- */
  --claro:         #F4F5F2;        /* títulos */
  --claro-cuerpo:  #c2c8c4;        /* cuerpo */
  --claro-cuerpo2: #a9b0ab;        /* cuerpo secundario */

  /* --- Texto sobre verde profundo --------------------------------------- */
  --sobre-verde:        #cfe3d7;
  --sobre-verde-fuerte: #e8f2ea;
  --sobre-verde-rotulo: #9dc4b0;

  /* --- Tipografía ------------------------------------------------------- */
  --fuente-titulo: Outfit, sans-serif;
  --fuente-texto:  Archivo, Helvetica, sans-serif;
  --fuente-mono:   "IBM Plex Mono", monospace;

  /* Escala fluida: cada token trae su tamaño; el interletrado y la
     interlínea viajan con la clase que lo usa. */
  --h1:          clamp(42px, 8vw, 96px);
  --h2:          clamp(33px, 4.8vw, 54px);
  --h2-sec:      clamp(30px, 4.2vw, 48px);
  --h3:          clamp(22px, 2.6vw, 27px);
  --bajada:      clamp(17px, 2.1vw, 21px);
  --cuerpo-dest: clamp(16px, 1.9vw, 19px);

  /* --- Layout ----------------------------------------------------------- */
  --ancho:          1200px;
  --ancho-articulo: 820px;
  --ancho-legal:    780px;
  --ancho-auto:     920px;
  --lateral:        clamp(20px, 4vw, 40px);
  --vertical:       clamp(60px, 7.6vw, 108px);

  /* --- Radios: exclusivos del módulo "Lab" del logo y de los puntos ------ */
  --radio-modulo:    10px;
  --radio-modulo-sm: 7px;
  --radio-modulo-xs: 6px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--papel);
  font-family: var(--fuente-texto);
  color: var(--tinta-cuerpo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--verde-profundo);
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
  border-radius: 0;
}

::selection {
  background: var(--verde-senal);
  color: var(--grafito);
}

/* Foco visible en todo elemento interactivo, con el verde que corresponde
   al fondo sobre el que está. */
:focus-visible {
  outline: 2px solid var(--verde-profundo);
  outline-offset: 3px;
}

.fondo-grafito :focus-visible,
.fondo-verde :focus-visible {
  outline-color: var(--verde-senal);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Layout
   ========================================================================== */

/* Los anchos del README son de contenido, no de caja: el prototipo usa
   content-box. Con border-box hay que sumarle el padding lateral para
   obtener la misma medida útil. */
.contenedor {
  --ancho-actual: var(--ancho);
  max-width: calc(var(--ancho-actual) + var(--lateral) * 2);
  margin-inline: auto;
  padding-inline: var(--lateral);
}

.contenedor--articulo { --ancho-actual: var(--ancho-articulo); }
.contenedor--legal    { --ancho-actual: var(--ancho-legal); }
.contenedor--auto     { --ancho-actual: var(--ancho-auto); }

.seccion { padding-block: var(--vertical); }

.fondo-grafito   { background: var(--grafito); }
.fondo-papel     { background: var(--papel); }
.fondo-papel-alt { background: var(--papel-alt); }
.fondo-verde     { background: var(--verde-profundo); }

/* Los destinos de ancla no deben quedar bajo el header sticky. */
[id] { scroll-margin-top: 90px; }

.pila {
  display: flex;
  flex-direction: column;
}

/* Grilla que se apila sola. Cada sección ajusta --min y --gap.
   El min(100%, …) evita el desborde cuando la columna queda más angosta
   que el mínimo declarado. */
.grilla {
  --min: 300px;
  --gap: clamp(16px, 2vw, 22px);
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

/* ==========================================================================
   Tipografía
   ========================================================================== */

.rotulo {
  font-family: var(--fuente-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde-profundo);
}

.rotulo--claro { color: var(--verde-senal); }
.rotulo--tenue-oscuro { color: var(--gris-verdoso-tenue); letter-spacing: 0.14em; }

.rotulo-min {
  font-family: var(--fuente-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
}

.rotulo-min--sobre-grafito { color: var(--gris-verdoso-tenue); }

/* Rótulo seguido de una línea de continuación hasta el borde. */
.rotulo-linea {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rotulo-linea::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--papel-borde);
}

.titulo-1 {
  font-family: var(--fuente-titulo);
  font-size: var(--h1);
  font-weight: 600;
  letter-spacing: -0.042em;
  line-height: 0.99;
  text-wrap: balance;
}

.titulo-2 {
  font-family: var(--fuente-titulo);
  font-size: var(--h2);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.05;
  color: var(--tinta);
  text-wrap: balance;
}

.titulo-2--sec {
  font-size: var(--h2-sec);
  line-height: 1.06;
}

.titulo-tarjeta {
  font-family: var(--fuente-titulo);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--tinta);
}

.bajada {
  font-size: var(--bajada);
  line-height: 1.55;
  text-wrap: pretty;
}

.cuerpo-dest {
  font-size: var(--cuerpo-dest);
  line-height: 1.6;
  color: var(--tinta-cuerpo);
  text-wrap: pretty;
}

.cuerpo {
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta-cuerpo);
  text-wrap: pretty;
}

.sobre-oscuro { color: var(--claro); }

/* Enlace dentro de un párrafo: subrayado fino, sin cambio de tamaño. */
.enlace-texto {
  color: var(--verde-profundo);
  border-bottom: 1px solid var(--papel-borde-fino);
}

.enlace-texto:hover { border-bottom-color: var(--verde-profundo); }

/* Encabezado de sección: rótulo + título. */
.encabezado {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: clamp(30px, 4vw, 42px);
}

/* ==========================================================================
   Botones y enlaces de acción
   ========================================================================== */

.boton {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  padding: 17px 28px;
  border: none;
  cursor: pointer;
}

/* Sólido verde: solo sobre fondo oscuro o verde profundo. */
.boton--verde {
  background: var(--verde-senal);
  color: var(--grafito);
}

.boton--verde:hover { background: var(--verde-senal-hover); }

/* Sólido oscuro: el primario sobre papel. */
.boton--oscuro {
  background: var(--grafito);
  color: var(--claro);
}

.boton--oscuro:hover { background: var(--verde-profundo); }

/* Suave: solo subrayado. Sobre papel el acento es el verde profundo. */
.boton--suave {
  padding: 8px 2px;
  color: var(--tinta);
  border-bottom: 2px solid var(--verde-senal);
  background: none;
}

.boton--suave:hover { border-bottom-color: var(--verde-profundo); }

/* Suave sobre grafito. */
.boton--suave-oscuro {
  padding: 8px 2px;
  color: var(--claro);
  border-bottom: 2px solid #3f4a45;
  background: none;
}

.boton--suave-oscuro:hover { border-bottom-color: var(--verde-senal); }

/* ==========================================================================
   Chips
   ========================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  font-family: var(--fuente-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--claro);
  border: 1px solid var(--grafito-borde-alt);
  padding: 11px 15px;
}

/* ==========================================================================
   Filas numeradas
   Reconocimiento del home y checklists de los artículos.
   ========================================================================== */

.lista-filas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.lista-filas--cerrada > :last-child {
  border-bottom: 1px solid var(--papel-borde);
}

.fila-num {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: clamp(14px, 2vw, 26px);
  padding-block: clamp(18px, 2vw, 22px);
  border-top: 1px solid var(--papel-borde);
}

.fila-num__num {
  font-family: var(--fuente-mono);
  font-size: 13px;
  color: var(--gris-verdoso);
}

.fila-num__texto {
  font-size: var(--cuerpo-dest);
  line-height: 1.55;
  color: var(--tinta-cuerpo2);
  text-wrap: pretty;
}

/* ==========================================================================
   Lista de guion
   Sistema sin iconos: la viñeta es un guion en verde.
   ========================================================================== */

.lista-guion {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lista-guion > li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-cuerpo2);
}

.lista-guion > li::before {
  content: "—";
  flex: 0 0 auto;
  color: var(--verde-profundo);
}

/* Sobre grafito el guion toma el verde señal. */
.lista-guion--oscura > li::before { color: var(--verde-senal); }

/* ==========================================================================
   Campos de formulario
   Compartidos por el formulario de contacto y la captura de correo de la
   autoevaluación. Sin radios, sobre fondo oscuro.
   ========================================================================== */

.campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.campo__etiqueta {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-verdoso-tenue);
  padding: 0;
}

.campo__control {
  font-family: var(--fuente-texto);
  font-size: 16px;
  color: var(--claro);
  background: var(--grafito);
  border: 1px solid var(--grafito-borde-in);
  padding: 14px;
  outline: none;
  width: 100%;
}

.campo__control:focus-visible { border-color: var(--verde-senal); }

.campo__control::placeholder { color: var(--gris-verdoso-tenue); }

.campo__control--area {
  line-height: 1.5;
  resize: vertical;
}

/* Cuando el bloque contenedor ya es grafito, el campo sube un tono. */
.campo__control--superficie { background: var(--grafito-superficie); }

/* Campo trampa contra bots.
   Fuera del flujo y sin tamaño, pero sin display:none ni visibility:hidden,
   que son justamente lo que un bot revisa para saltárselo. Va además con
   aria-hidden y tabindex="-1" en el HTML: nadie que use teclado o lector de
   pantalla debería tropezar con él. Si llega con contenido, lo llenó un
   programa y la consulta se descarta en el servidor. */
.trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.formulario__nota {
  max-width: 280px;
  font-family: var(--fuente-mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-verdoso-tenue);
}

.boton[disabled] {
  opacity: 0.6;
  cursor: default;
}

.formulario__error {
  font-size: 15px;
  line-height: 1.5;
  color: var(--terracota);
}

.formulario__error[hidden],
.confirmacion[hidden] { display: none; }

.confirmacion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  background: var(--verde-profundo);
}

.confirmacion__rotulo {
  font-family: var(--fuente-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-senal);
}

.confirmacion__texto {
  font-size: 15px;
  color: var(--sobre-verde-fuerte);
}

/* ==========================================================================
   Wordmark
   ========================================================================== */

.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  line-height: 1;
}

.wordmark__qwork {
  font-family: var(--fuente-titulo);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--claro);
  line-height: 1;
}

.wordmark__lab {
  font-family: var(--fuente-titulo);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 5px 9px 6px;
  border-radius: var(--radio-modulo);
  background: var(--verde-senal);
  color: var(--grafito);
}

/* Reducido: footer y headers de documento. */
.wordmark--chico { gap: 6px; }
.wordmark--chico .wordmark__qwork { font-size: 22px; }
.wordmark--chico .wordmark__lab {
  font-size: 16px;
  padding: 3px 6px 4px;
  border-radius: var(--radio-modulo-sm);
}

/* Sobre papel el módulo invierte: fondo verde profundo, texto verde señal. */
.wordmark--papel .wordmark__qwork { color: var(--tinta); }
.wordmark--papel .wordmark__lab {
  background: var(--verde-profundo);
  color: var(--verde-senal);
}

/* ==========================================================================
   Header del sitio (sticky)
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11, 13, 14, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--grafito-borde-nav);
}

.header__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-block: 24px;
}

.header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 22px;
  min-width: 0;
}

/* En anchos intermedios las anclas envuelven y el CTA nunca se corta. */
.header__anclas {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 22px;
  min-width: 0;
}

/* Única media query del sitio. Bajo este ancho las cuatro anclas caerían
   una por línea y el header sticky ocuparía media pantalla. En teléfono
   quedan la marca y el CTA; las secciones se alcanzan scrolleando y desde
   el pie. */
@media (max-width: 720px) {
  .header__anclas { display: none; }
}

.header__enlace {
  font-size: 16px;
  color: var(--claro-cuerpo);
  white-space: nowrap;
}

.header__enlace:hover { color: var(--claro); }

.header__cta {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 16px;
  padding: 14px 22px;
}

/* Header reducido de documento: wordmark sobre papel y un enlace de vuelta. */
.header-doc {
  border-bottom: 1px solid var(--papel-borde-alt);
}

.header-doc__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
}

.header-doc__volver {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
}

.header-doc__volver:hover { color: var(--tinta); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--grafito);
  border-top: 1px solid var(--grafito-borde);
}

.footer__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding-block: clamp(32px, 4vw, 44px) clamp(26px, 3vw, 32px);
}

.footer__marca {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.footer__enlace {
  font-size: 14px;
  color: var(--claro-cuerpo2);
  white-space: nowrap;
}

.footer__enlace:hover { color: var(--verde-senal); }

/* --- Banda de crédito ----------------------------------------------------
   Prueba la promesa central de la marca. Tono seco, sin enlaces.
   El padding inferior grande reserva sitio al botón flotante en móvil. */

.credito { border-top: 1px solid var(--grafito-borde-nav); }

.credito__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 16px clamp(76px, 8vw, 30px);
}

.credito__texto {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gris-verdoso-tenue);
}

.credito__punto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--verde-senal);
  flex: 0 0 auto;
}

.credito__sello {
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f7472;
  white-space: nowrap;
}

/* ==========================================================================
   Botón flotante de WhatsApp
   La única sombra del sistema.
   ========================================================================== */

.whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--grafito);
  border: 1px solid var(--grafito-borde-alt);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.whatsapp:hover { border-color: var(--verde-senal); }

.whatsapp__punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--verde-senal);
  flex: 0 0 auto;
}

.whatsapp__texto {
  font-family: var(--fuente-titulo);
  font-size: 15px;
  font-weight: 500;
  color: var(--claro);
  white-space: nowrap;
}

/* ==========================================================================
   Utilidades mínimas
   ========================================================================== */

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}