/* Landing de marketing de Normae. Mismos tokens de color/tipografia que la
   app (web/static/estilos.css) copiados a proposito, no importados: este
   sitio se sirve como archivos estaticos aparte por Caddy (ver Caddyfile),
   nunca comparte pagina con la app real, y no tiene sentido acoplar los
   dos stylesheets solo para no repetir un puñado de variables. */

:root {
  --tinta: #17202a;
  --fondo: #f5f7fa;
  --superficie: #ffffff;
  --borde: #e3e8ef;
  --institucional: #21406b;
  --vigente: #2e6b57;
  --revisar: #b67a17;

  --tinta-tenue: rgba(23, 32, 42, 0.66);
  --tinta-debil: rgba(23, 32, 42, 0.44);
  --institucional-suave: rgba(33, 64, 107, 0.07);
  --vigente-suave: rgba(46, 107, 87, 0.08);
  --revisar-suave: rgba(182, 122, 23, 0.1);

  --fuente-display: "Newsreader", Georgia, "Times New Roman", serif;
  --fuente-cuerpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --fuente-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --texto-pequeno: 0.875rem;
  --texto-base: 1.0625rem;
  --texto-grande: 1.25rem;
  --titulo-3: 1.5rem;
  --titulo-2: 2rem;
  --titulo-1: clamp(2.25rem, 1.7rem + 2.2vw, 3.4rem);

  --espacio-xs: 0.5rem;
  --espacio-sm: 1rem;
  --espacio-md: 1.75rem;
  --espacio-lg: 3rem;
  --espacio-xl: 5rem;
  --espacio-2xl: 8rem;

  --radio-sm: 6px;
  --radio-base: 10px;
  --radio-grande: 16px;

  --ancho-contenido: 1140px;
  --ancho-lectura: 700px;

  --duracion-revelado: 0.6s;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--fuente-display);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 var(--espacio-sm);
  color: var(--tinta);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--espacio-sm);
}

a {
  color: var(--institucional);
}

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

.contenedor {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 var(--espacio-md);
}

.seccion__ancho-lectura {
  max-width: var(--ancho-lectura);
}

:focus-visible {
  outline: 2px solid var(--institucional);
  outline-offset: 2px;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--institucional);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radio-sm);
  z-index: 100;
}

.salto-contenido:focus {
  left: var(--espacio-sm);
  top: var(--espacio-sm);
}

/* --- botones -------------------------------------------------------------- */

.boton {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radio-sm);
  border: 1px solid var(--institucional);
  font-size: var(--texto-pequeno);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.boton--primario {
  background: var(--institucional);
  color: #ffffff;
}

.boton--primario:hover {
  background: #16283f;
  border-color: #16283f;
}

.boton--fantasma {
  background: transparent;
  color: var(--institucional);
}

.boton--fantasma:hover {
  background: var(--institucional-suave);
}

.boton--grande {
  padding: 0.85rem 1.75rem;
  font-size: var(--texto-base);
}

.boton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- encabezado ------------------------------------------------------------- */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 247, 250, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

.encabezado__fila {
  display: flex;
  align-items: center;
  gap: var(--espacio-md);
  padding: var(--espacio-sm) var(--espacio-md);
}

.marca {
  font-family: var(--fuente-display);
  font-size: var(--titulo-3);
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav-principal {
  display: flex;
  gap: var(--espacio-md);
  margin-left: var(--espacio-md);
  flex: 1;
}

.nav-principal a {
  color: var(--tinta-tenue);
  text-decoration: none;
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

.nav-principal a:hover {
  color: var(--institucional);
}

.encabezado__acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
}

/* --- hero ------------------------------------------------------------------- */

.hero {
  padding: var(--espacio-2xl) 0 var(--espacio-xl);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--espacio-xl);
  align-items: center;
}

.hero__etiqueta {
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--institucional);
  margin-bottom: var(--espacio-sm);
}

.hero__texto h1 {
  font-size: var(--titulo-1);
  margin-bottom: var(--espacio-md);
}

.hero__subtitulo {
  font-size: var(--texto-grande);
  color: var(--tinta-tenue);
  max-width: 46ch;
}

.hero__cta {
  display: flex;
  gap: var(--espacio-sm);
  flex-wrap: wrap;
  margin: var(--espacio-md) 0 var(--espacio-xs);
}

.hero__nota {
  font-size: var(--texto-pequeno);
  color: var(--tinta-debil);
  margin: 0;
}

/* tarjeta de respuesta del hero -- la firma visual de la marca. Reusa el
   mismo vocabulario visual (insignia de clase de fuente + sello de
   vigencia) que la app real bajo /app, para que la promesa del hero sea
   literalmente lo que el cliente ve una vez logueado. */
.hero__maqueta {
  perspective: 1000px;
}

.tarjeta-chat {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  padding: var(--espacio-md);
  box-shadow: 0 24px 60px -24px rgba(23, 32, 42, 0.25);
  transform: rotate(-1deg);
}

.tarjeta-chat__pregunta {
  background: var(--institucional-suave);
  border-radius: var(--radio-base);
  padding: 0.75rem 1rem;
  font-size: var(--texto-pequeno);
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: var(--espacio-sm);
}

.tarjeta-chat__firma {
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--institucional);
  margin-bottom: 0.35rem;
}

.tarjeta-chat__respuesta {
  font-size: 0.95rem;
  color: var(--tinta);
  border-top: 1px solid var(--borde);
  padding-top: var(--espacio-xs);
}

.tarjeta-chat__fuentes {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: var(--espacio-sm);
}

.fuente-mini {
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 0.55rem 0.7rem;
}

.fuente-mini__cabecera {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.insignia-familia {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

.insignia-familia--ley {
  background: var(--institucional);
  color: #fff;
}

.insignia-familia--normativa {
  background: var(--institucional-suave);
  color: var(--institucional);
}

.fuente-mini__folio {
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
  color: var(--tinta);
}

.fuente-mini__fecha {
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  color: var(--tinta-debil);
}

.sello-vigencia {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--revisar);
  background: var(--revisar-suave);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radio-sm);
}

/* --- secciones generales ----------------------------------------------------- */

.seccion {
  padding: var(--espacio-xl) 0;
}

.seccion--superficie {
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

.seccion--angosta {
  padding: var(--espacio-lg) 0;
}

.seccion h2 {
  font-size: var(--titulo-2);
}

/* --- cómo funciona ------------------------------------------------------------ */

.pasos {
  list-style: none;
  margin: var(--espacio-lg) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-lg);
}

.pasos__numero {
  display: block;
  font-family: var(--fuente-mono);
  font-size: 0.85rem;
  color: var(--institucional);
  margin-bottom: var(--espacio-xs);
}

.pasos__item h3 {
  font-size: var(--texto-grande);
}

.pasos__item p {
  color: var(--tinta-tenue);
}

/* --- diferenciadores ------------------------------------------------------------ */

.tarjetas-diferenciadores {
  margin-top: var(--espacio-lg);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-md);
}

.tarjeta-diferenciador {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-base);
  padding: var(--espacio-md);
}

.tarjeta-diferenciador h3 {
  font-size: var(--texto-grande);
}

.tarjeta-diferenciador p {
  color: var(--tinta-tenue);
  margin: 0;
}

/* --- FAQ ------------------------------------------------------------------------ */

.faq {
  margin-top: var(--espacio-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-xs);
}

.faq__item {
  border: 1px solid var(--borde);
  border-radius: var(--radio-base);
  background: var(--superficie);
  padding: var(--espacio-sm) var(--espacio-md);
}

.faq__item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-sm);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  font-family: var(--fuente-mono);
  color: var(--institucional);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.faq__item[open] summary::after {
  content: "−";
}

.faq__item p {
  color: var(--tinta-tenue);
  margin: var(--espacio-xs) 0 0;
}

/* --- formulario de demo ----------------------------------------------------------- */

.seccion--demo {
  background: var(--tinta);
  color: #f5f7fa;
}

.seccion--demo h2,
.seccion--demo > .contenedor > p {
  color: #f5f7fa;
}

.seccion--demo p {
  color: rgba(245, 247, 250, 0.75);
}

.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario-demo {
  margin-top: var(--espacio-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radio-grande);
  padding: var(--espacio-lg);
}

.formulario-demo__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-sm);
}

.campo {
  margin-bottom: var(--espacio-sm);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.campo label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(245, 247, 250, 0.85);
}

.campo input,
.campo textarea {
  padding: 0.65rem 0.8rem;
  border-radius: var(--radio-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f7fa;
  font-family: inherit;
  font-size: var(--texto-base);
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: rgba(245, 247, 250, 0.4);
}

.campo input:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

.formulario-demo__error {
  color: #f3b8b0;
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

.formulario-demo__privacidad {
  font-size: 0.8rem;
  margin-top: var(--espacio-sm);
  margin-bottom: 0;
}

.formulario-demo__privacidad a {
  color: #f5f7fa;
  text-decoration: underline;
}

.formulario-demo__exito {
  background: rgba(46, 107, 87, 0.2);
  border: 1px solid rgba(46, 107, 87, 0.5);
  border-radius: var(--radio-base);
  padding: var(--espacio-md);
}

.formulario-demo__exito p {
  color: #f5f7fa;
}

/* --- pie ------------------------------------------------------------------------- */

.pie {
  background: var(--tinta);
  color: rgba(245, 247, 250, 0.7);
  padding: var(--espacio-lg) 0 var(--espacio-md);
}

.pie__grid {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-lg);
  flex-wrap: wrap;
  margin-bottom: var(--espacio-lg);
}

.marca--pie {
  color: #f5f7fa;
  margin-bottom: 0.25rem;
}

.pie__tagline {
  margin: 0;
  font-size: var(--texto-pequeno);
}

.pie__titulo-visual {
  font-family: var(--fuente-cuerpo);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(245, 247, 250, 0.5);
  margin-bottom: var(--espacio-xs);
}

.pie__contacto p {
  margin: 0.3rem 0;
}

.pie__contacto a {
  color: rgba(245, 247, 250, 0.85);
  text-decoration: none;
}

.pie__contacto a:hover {
  text-decoration: underline;
}

.pie__legal {
  border-top: 1px solid rgba(245, 247, 250, 0.12);
  padding-top: var(--espacio-md);
  font-size: 0.8rem;
}

/* --- revelado al scroll ------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duracion-revelado) ease, transform var(--duracion-revelado) ease;
}

.reveal.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .tarjeta-chat {
    transform: none;
  }
}

/* --- responsive ------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: var(--espacio-xl) 0;
  }

  .pasos,
  .tarjetas-diferenciadores {
    grid-template-columns: 1fr;
  }

  .nav-principal {
    display: none;
  }

  .tarjeta-chat {
    transform: none;
  }
}

@media (max-width: 640px) {
  .encabezado__fila {
    padding: var(--espacio-xs) var(--espacio-sm);
  }

  .encabezado__acciones .boton--fantasma {
    display: none;
  }

  .contenedor {
    padding: 0 var(--espacio-sm);
  }

  .formulario-demo {
    padding: var(--espacio-md);
  }

  .formulario-demo__fila {
    grid-template-columns: 1fr;
  }

  .pie__grid {
    flex-direction: column;
    gap: var(--espacio-md);
  }
}