/* themes/service-app/theme.css
 * Estilos del tema Service App. Aplica al container + descendientes.
 * Compone con los tokens (tokens.css) y las primitivas (_shared/primitives.css).
 *
 * Identidad: SaaS técnico, blanco frío, acento azul/índigo, titulares Space Grotesk, cuerpo IBM
 * Plex Sans, etiquetas/eyebrows en IBM Plex Mono, botones de esquina media, líneas finas de 1px y
 * sombras frías suaves. La GEOMETRÍA de cada sección vive en su módulo (frontend/assets/*.css);
 * acá va el color/tipografía/forma (§5).
 *
 * Reglas CLAUDE.md §11: cero !important salvo utilidades atómicas; cero overrides defensivos.
 */

.lcl-container.theme-lemoncode {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--label-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lcl-container.theme-lemoncode body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--label-primary);
}

/* Apariencia por sección: el wrapper con esquema forzado pinta su propio fondo/texto (las secciones
   de contenido son transparentes y heredan del container). Los tokens del subárbol ya los recalcula
   tokens.css vía data-color-scheme. */
.lcl-container.theme-lemoncode .lcl-section-appearance {
  background: var(--bg-primary);
  color: var(--label-primary);
}

/* ─── Tipografía ─── */
.lcl-container.theme-lemoncode h1,
.lcl-container.theme-lemoncode h2,
.lcl-container.theme-lemoncode h3,
.lcl-container.theme-lemoncode h4,
.lcl-container.theme-lemoncode .lcl-h1,
.lcl-container.theme-lemoncode .lcl-h2,
.lcl-container.theme-lemoncode .lcl-h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--label-primary);
}

.lcl-container.theme-lemoncode h1,
.lcl-container.theme-lemoncode .lcl-h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.lcl-container.theme-lemoncode h2,
.lcl-container.theme-lemoncode .lcl-h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.lcl-container.theme-lemoncode h3,
.lcl-container.theme-lemoncode .lcl-h3 {
  font-size: var(--fs-title-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.lcl-container.theme-lemoncode p,
.lcl-container.theme-lemoncode .lcl-body {
  font-size: var(--fs-body);
  color: var(--label-secondary);
}

.lcl-container.theme-lemoncode .lcl-lead {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--label-secondary);
  line-height: var(--lh-relaxed);
}

/* Eyebrow = la etiqueta en IBM Plex Mono: mayúsculas, tracking ancho, azul. La firma del diseño. */
.lcl-container.theme-lemoncode .lcl-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-footnote);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-pressed);
}

/* Énfasis inline: el texto entre *asteriscos* del subtítulo (HeroRenderer::render_emphasis). */
.lcl-container.theme-lemoncode .lcl-em {
  color: var(--accent);
  font-weight: var(--fw-semibold);
  font-style: normal;
}

/* Links */
.lcl-container.theme-lemoncode a {
  color: var(--accent);
  transition: color var(--dur-fast) var(--ease);
}
.lcl-container.theme-lemoncode a:hover { color: var(--accent-hover); }

/* ─── Botones (esquina media) — el componente más reusado de una landing. ─── */
.lcl-container.theme-lemoncode .lcl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 24px;
  font-family: var(--font-sans);
  font-size: var(--fs-callout);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-mid) var(--ease),
    box-shadow var(--dur-mid) var(--ease);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
}

.lcl-container.theme-lemoncode .lcl-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-accent);
}
.lcl-container.theme-lemoncode .lcl-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-contrast);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px var(--accent);
}
.lcl-container.theme-lemoncode .lcl-btn--primary:active { transform: translateY(0); }

.lcl-container.theme-lemoncode .lcl-btn--ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--label-primary);
}
.lcl-container.theme-lemoncode .lcl-btn--ghost:hover {
  background: var(--label-primary);
  border-color: var(--label-primary);
  color: var(--bg-primary);
}

.lcl-container.theme-lemoncode .lcl-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
  padding-inline: 0;
  min-height: auto;
  box-shadow: none;
}

/* ─── Card: superficie agrupadora base. ─── */
.lcl-container.theme-lemoncode .lcl-card {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  padding: var(--space-6);
  transition: border-color var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.lcl-container.theme-lemoncode .lcl-card:hover {
  border-color: var(--line-2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}

/* Badge */
.lcl-container.theme-lemoncode .lcl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 7px 13px;
  font-size: var(--fs-footnote);
  font-weight: var(--fw-bold);
  background: var(--fill-2);
  color: var(--label-primary);
  border-radius: var(--r-full);
}
.lcl-container.theme-lemoncode .lcl-badge--accent {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* Divider */
.lcl-container.theme-lemoncode .lcl-divider {
  height: 1px;
  background: var(--separator);
  width: 100%;
}

/* ─── Header (navegación superior) — identidad. Geometría en el módulo Header. ─── */
.lcl-container.theme-lemoncode .lcl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg-primary) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--separator);
}
.lcl-container.theme-lemoncode .lcl-header--static { position: static; }

/* Estilo 'Transparente' (overlay): flota fijo sobre el hero, sin caja; al bajar (is-scrolled, lo
   togglea theme.js) gana el fondo translúcido + blur para que los links se lean. */
.lcl-container.theme-lemoncode .lcl-header--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.lcl-container.theme-lemoncode .lcl-header--overlay.is-scrolled {
  background: color-mix(in oklab, var(--bg-primary) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--separator);
}

.lcl-container.theme-lemoncode .lcl-header__brand {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  color: var(--label-primary);
}

/* Logo-lockup: ícono de marca + nombre con tagline mono debajo (1:1 mockup Service App). */
.lcl-container.theme-lemoncode .lcl-header__brand--lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.lcl-container.theme-lemoncode .lcl-header__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.lcl-container.theme-lemoncode .lcl-header__brand-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 17px;
  letter-spacing: -0.01em;
}
.lcl-container.theme-lemoncode .lcl-header__brand-tagline {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label-tertiary);
  margin-top: 3px;
}

/* Acción secundaria de texto en el header (ej. "Ingresar"). */
.lcl-container.theme-lemoncode .lcl-header__link {
  font-size: var(--fs-callout);
  font-weight: var(--fw-semibold);
  color: var(--label-primary);
  padding: 9px 14px;
  border-radius: var(--r-md);
  transition: color var(--dur-fast) var(--ease);
}
.lcl-container.theme-lemoncode .lcl-header__link:hover { color: var(--accent); }

/* Links de nav con subrayado que crece al hover (detalle de identidad). */
.lcl-container.theme-lemoncode .lcl-header__nav a {
  position: relative;
  color: var(--label-secondary);
  font-size: var(--fs-callout);
  font-weight: var(--fw-semibold);
}
.lcl-container.theme-lemoncode .lcl-header__nav a:hover { color: var(--label-primary); }
.lcl-container.theme-lemoncode .lcl-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
  transition: width var(--dur-mid) var(--ease);
}
.lcl-container.theme-lemoncode .lcl-header__nav a:hover::after { width: 100%; }

/* Botón de acción del header (azul, esquina media). Le da peso a la barra, como en el mockup. Reusa
   .lcl-btn--primary pero más compacto: el header pide un botón liviano, no el grande del hero. */
.lcl-container.theme-lemoncode .lcl-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.lcl-container.theme-lemoncode .lcl-header__cta {
  padding: 10px 18px;
  min-height: 0;
  font-size: var(--fs-callout);
}

/* ─── Footer ─── */
.lcl-container.theme-lemoncode .lcl-footer {
  border-top: 1px solid var(--separator);
  padding-block: var(--space-8);
  background: var(--surface);
  color: var(--label-tertiary);
  font-size: var(--fs-callout);
}

/* ─── CTA de scroll por sección (core: SectionCta) ─── */
.lcl-container.theme-lemoncode .lcl-cta-cue {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 3;
  display: flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  text-decoration: none;
  box-shadow: var(--shadow-accent);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease);
}
.lcl-container.theme-lemoncode .lcl-cta-cue:hover {
  background: var(--accent-hover);
  color: var(--accent-contrast);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px var(--accent);
}
.lcl-container.theme-lemoncode .lcl-cta-cue__arrow {
  width: 22px;
  height: 22px;
  flex: none;
  animation: lcl-cta-bounce 1.6s ease-in-out infinite;
}
.lcl-container.theme-lemoncode .lcl-cta-cue:hover .lcl-cta-cue__arrow {
  animation-play-state: paused;
  transform: translateY(2px);
}
@keyframes lcl-cta-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* Ancla invisible que emite el core (id de la instancia y ancla nombrada). El descuento del
   header al saltar lo da scroll-padding-top del scroll root (themes/_shared/reset.css). */
.lcl-container.theme-lemoncode .lcl-section-anchor {
  display: block;
  height: 0;
}

/* ─── Reveal on scroll (lo dispara theme.js sobre [data-lcl-reveal]). Identidad de BeFound:
   aparición sutil hacia arriba. El estado final visible es la base con reduced-motion. ─── */
.lcl-container.theme-lemoncode [data-lcl-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.lcl-container.theme-lemoncode [data-lcl-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lcl-container.theme-lemoncode .lcl-cta-cue__arrow { animation: none; }
  .lcl-container.theme-lemoncode .lcl-cta-cue { transition: none; }
  .lcl-container.theme-lemoncode [data-lcl-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ─── Isotipo de marca (rombo + </>) en el header, 1:1 con el mockup LemonCode. ───
   El header rinde la marca como texto "LemonCode" (Sora); el rombo amarillo con el
   guiño </> se dibuja acá con dos pseudo-elementos scopeados al tema: ::before es el
   cuadrado rotado (rombo) y ::after el "</>" upright encima. Así el wordmark queda
   como texto vivo (SEO/fuente) y el isotipo es identidad del tema (§5/§6). */
.lcl-container.theme-lemoncode .lcl-header__brand {
  position: relative;
  padding-left: 46px;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.lcl-container.theme-lemoncode .lcl-header__brand::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  background: var(--accent);
  border-radius: 10px;
  transform: rotate(45deg);
}
.lcl-container.theme-lemoncode .lcl-header__brand::after {
  content: "</>";
  position: absolute;
  left: 0;
  top: 50%;
  width: 34px;
  margin-top: -8px;
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  line-height: 1;
  text-align: center;
  color: var(--bg-primary);
}