/**
 * Variables base del proyecto LinkWork.
 *
 * ESTADO: valores reales de marca, tomados de "Guía de uso de marca"
 * (entregada por el cliente, 2023-06-27). Ver docs/decisiones-arquitectura.md.
 *
 * IMPORTANTE — colores aproximados de Pantone a hex:
 * Los valores PMS (Pantone) no tienen una conversión exacta a hex/RGB
 * sin una librería de color certificada (ej. Pantone Connect o el
 * archivo .ai/.psd original con los swatches ya definidos). Los valores
 * de abajo son una aproximación visual razonable. Antes del lanzamiento
 * del rediseño definitivo, confirmar el hex exacto abriendo el archivo
 * fuente de la guía (Illustrator/Figma) y copiando el valor RGB/hex
 * real de cada swatch — no depender solo de esta aproximación.
 */

:root {
  /* PMS 433 C — oscuro dominante (fondos, texto principal sobre claro) */
  --lw-color-dark: #383d42;

  /* PMS 2350 C — rojo de acento (plecas, CTAs, énfasis).
     Valor confirmado del CSS real del sitio (co-workshop-style-inline-css),
     más preciso que la aproximación inicial de Pantone a hex. */
  --lw-color-accent: #cc1108;

  /* PMS 429 C — gris claro, uso alterno / texto secundario */
  --lw-color-gray: #b0b7bd;

  --lw-color-bg: #ffffff;
  --lw-color-text: var(--lw-color-dark);
  --lw-color-text-light: #ffffff;

  /* Tipografía — ver nota de licencia en docs/decisiones-arquitectura.md */
  --lw-font-display: "Almaq Refined", "Helvetica Neue", Arial, sans-serif;
  --lw-font-base: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espaciados */
  --lw-space-sm: 12px;
  --lw-space-md: 20px;
  --lw-space-lg: 32px;
}

body {
  font-family: var(--lw-font-base);
  color: var(--lw-color-text);
}

h1, h2, h3, .lw-display {
  font-family: var(--lw-font-display);
}

/* Elemento auxiliar de marca: pleca curva, derivada de la geometría del
   logotipo. REDISEÑADA (05/08/2026) — la versión anterior era un círculo
   cerrado en una esquina, decoración puntual sin repetición. Esta versión
   es un arco ancho, pensado para marcar la transición ENTRE secciones
   (el "corte" hacia lo siguiente), reutilizable en cualquier punto del
   sitio donde dos bloques se encuentren — hero→siguiente sección,
   imagen→texto, sección→CTA final. Ver docs/manual-arquitectura-linkwork.md,
   Fase 4, para el razonamiento completo de esta dirección de diseño.

   Uso: agregar la clase .lw-pleca-arco a un contenedor con position:relative
   y suficiente overflow visible o hidden según el efecto buscado. El arco
   se dibuja como pseudo-elemento, no interfiere con el contenido real. */
.lw-pleca-arco {
  position: relative;
}

.lw-pleca-arco::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 140%;
  max-width: 1600px;
  aspect-ratio: 6 / 1;
  border-radius: 50% 50% 0 0;
  border-top: 5px solid var(--lw-color-accent);
  opacity: 0.85;
  pointer-events: none;
}

/* Variante para usar como máscara curva en el borde de una imagen
   (sección "Quiénes somos" y similares), en vez de arco de transición
   entre secciones completas. */
.lw-pleca-borde-imagen {
  position: relative;
  overflow: hidden;
}

.lw-pleca-borde-imagen::before {
  content: "";
  position: absolute;
  left: -10%;
  bottom: -8%;
  width: 120%;
  aspect-ratio: 3 / 1;
  border-radius: 50%;
  background: var(--lw-color-accent);
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}

/* Reset mínimo para páginas standalone (sin header/footer del tema
   padre) — evita márgenes/paddings heredados del body por defecto de
   co-workshop, que asumía la presencia de su propio header. */
body.lw-standalone {
  margin: 0;
  padding: 0;
}