/* apps/web/styles.css — estilos propios de la landing pública de Gesfact (gesfact.cl).
   El grueso del layout viene de Tailwind por CDN; aquí van los componentes de marca
   reutilizables, para que el sitio se vea bien aunque alguna utilidad de Tailwind
   no cargue. Misma identidad visual que el dashboard. Todo pensado en español. */

:root {
  --korex-azul: #1F8A4C;       /* verde primario de marca (Boleta OK) */
  --korex-azul-osc: #176B3C;   /* verde oscuro (hover) */
  --korex-azul-claro: #46AD6E; /* verde claro (acentos sobre fondo oscuro) */
  --korex-oscuro: #0A2615;     /* verde casi negro */
}

html { scroll-behavior: smooth; }
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Compensa la barra superior fija al saltar con anclas (#seccion). */
section[id], main[id] { scroll-margin-top: 5rem; }

/* ----------------------------------------------------------------------------
   Marca / logo (idéntico al dashboard)
---------------------------------------------------------------------------- */
.korex-logo-mark {
  display: inline-block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: url("/logo-gesfact.png") center / contain no-repeat;
}

.gesfact-brand {
  font-family: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Cuadrícula tenue del hero */
.korex-hero-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ----------------------------------------------------------------------------
   Etiquetas de sección ("eyebrow")
---------------------------------------------------------------------------- */
.korex-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--korex-azul);
}
.korex-eyebrow-dark { color: var(--korex-azul-claro); }

/* ----------------------------------------------------------------------------
   Botones
---------------------------------------------------------------------------- */
.korex-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--korex-azul);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: 0.625rem;
  transition: background 0.15s, transform 0.05s;
  cursor: pointer;
}
.korex-btn-primary:hover { background: var(--korex-azul-osc); }
.korex-btn-primary:active { transform: translateY(1px); }
.korex-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.korex-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: 0.625rem;
  transition: background 0.15s;
}
.korex-btn-ghost:hover { background: rgba(255, 255, 255, 0.16); }

.korex-btn-white {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: var(--korex-azul-osc);
  font-weight: 700;
  border-radius: 0.625rem;
  transition: background 0.15s, transform 0.05s;
}
.korex-btn-white:hover { background: #ECF6EF; }
.korex-btn-white:active { transform: translateY(1px); }

/* ----------------------------------------------------------------------------
   Campos de formulario (igual que el dashboard)
---------------------------------------------------------------------------- */
.korex-input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.625rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  color: #0f172a;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.korex-input:focus {
  outline: none;
  border-color: var(--korex-azul);
  box-shadow: 0 0 0 3px rgba(31, 138, 76, 0.15);
}
.korex-input::placeholder { color: #94a3b8; }
.korex-input:invalid:not(:placeholder-shown) { border-color: #f87171; }

/* ----------------------------------------------------------------------------
   Tarjetas
---------------------------------------------------------------------------- */
.korex-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1rem;
  padding: 1.6rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.18s, transform 0.18s;
}
.korex-card:hover {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
  transform: translateY(-3px);
}

.korex-card-dark {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 1.4rem;
}

.kpi-card {
  background: #fff;
  border-radius: 0.875rem;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  border: 1px solid #eef2f7;
}
.kpi-value { font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: #0f172a; }
.kpi-label { font-size: 0.7rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }

/* ----------------------------------------------------------------------------
   Cajas de íconos
---------------------------------------------------------------------------- */
.korex-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  background: #ECF6EF;
  color: var(--korex-azul);
}
.korex-icon-box svg { width: 26px; height: 26px; }

.korex-icon-box-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  background: rgba(70, 173, 110, 0.18);
  color: var(--korex-azul-claro);
}
.korex-icon-box-dark svg { width: 24px; height: 24px; }

/* ----------------------------------------------------------------------------
   Pasos "Cómo funciona"
---------------------------------------------------------------------------- */
.korex-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  margin: 0 auto;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #46AD6E 0%, #1F8A4C 60%, #143D2A 100%);
  box-shadow: 0 6px 18px rgba(31, 138, 76, 0.35);
}

/* Vistos / checks de beneficios */
.korex-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: #dcfce7;
  color: #15803d;
  font-weight: 700;
  font-size: 0.8rem;
}

/* ----------------------------------------------------------------------------
   Badges (reutilizados del dashboard)
---------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-anomalia { background: #fee2e2; color: #b91c1c; }
.badge-normal { background: #dcfce7; color: #15803d; }

/* ----------------------------------------------------------------------------
   Preguntas frecuentes (acordeón nativo <details>)
---------------------------------------------------------------------------- */
.korex-faq {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  overflow: hidden;
}
.korex-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.2rem;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.korex-faq summary::-webkit-details-marker { display: none; }
.korex-faq summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: #94a3b8;
  transition: transform 0.2s;
}
.korex-faq[open] summary::after { content: "−"; }
.korex-faq[open] summary { color: var(--korex-azul); }
.korex-faq p {
  padding: 0 1.2rem 1.1rem;
  color: #475569;
  font-size: 0.925rem;
  line-height: 1.55;
}

/* ----------------------------------------------------------------------------
   Páginas de contenido (privacidad)
---------------------------------------------------------------------------- */
.korex-prose h2 { font-size: 1.4rem; font-weight: 800; color: #0f172a; margin-top: 2.2rem; margin-bottom: 0.6rem; }
.korex-prose h3 { font-size: 1.05rem; font-weight: 700; color: #1e293b; margin-top: 1.4rem; margin-bottom: 0.4rem; }
.korex-prose p { color: #475569; line-height: 1.7; margin-bottom: 0.9rem; }
.korex-prose ul { list-style: disc; padding-left: 1.4rem; color: #475569; line-height: 1.7; margin-bottom: 0.9rem; }
.korex-prose li { margin-bottom: 0.3rem; }
.korex-prose a { color: var(--korex-azul-osc); text-decoration: underline; }

/* ----------------------------------------------------------------------------
   Animaciones (entrada al hacer scroll + vida en el hero)
---------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal-1 { transition-delay: .08s; }
.reveal-2 { transition-delay: .16s; }
.reveal-3 { transition-delay: .24s; }

/* La cuadrícula del hero deriva lentamente (sutil) */
.korex-hero-grid { animation: grid-drift 24s linear infinite; }
@keyframes grid-drift { from { background-position: 0 0; } to { background-position: 44px 44px; } }

/* ----------------------------------------------------------------------------
   Feed de cámara con visión por computadora (hero)
---------------------------------------------------------------------------- */
.cv-feed {
  position: relative;
  border-radius: 1.1rem;
  overflow: hidden;
  background: #0a1f15;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}
.cv-float { animation: cv-float 6s ease-in-out infinite; }
@keyframes cv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Línea de escaneo que barre el feed */
.cv-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 38%;
  top: -38%;
  background: linear-gradient(to bottom, transparent, rgba(70, 173, 110, 0.22), transparent);
  animation: cv-scan 3.4s linear infinite;
  pointer-events: none;
}
@keyframes cv-scan { 0% { transform: translateY(0); } 100% { transform: translateY(360%); } }

/* Punto "EN VIVO" parpadeante */
.cv-rec { animation: cv-blink 1.3s steps(1) infinite; }
@keyframes cv-blink { 50% { opacity: 0.2; } }

/* Cajas de detección: aparecen escalonadas y luego laten suave */
.cv-box { opacity: 0; animation: cv-box-in 0.55s ease forwards, cv-box-pulse 3s ease-in-out infinite 1.2s; }
.cv-box-2 { animation-delay: 0.5s, 1.7s; }
.cv-box-3 { animation-delay: 1.0s, 2.2s; }
.cv-box-4 { animation-delay: 1.5s, 2.7s; }
@keyframes cv-box-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes cv-box-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .korex-hero-grid, .cv-float, .cv-scanline, .cv-rec, .cv-box { animation: none; }
  .cv-box { opacity: 1; }
}