/*
 * Landing de NovaNok.
 *
 * Usa la misma identidad que el producto —fondo oscuro, naranja #FF5A1F— para
 * que quien entra a la demo desde acá no sienta que cambió de empresa. Los
 * valores están copiados de `erp-frontend/src/styles/tokens.scss`; si allá
 * cambian, acá hay que cambiarlos a mano: son dos proyectos separados a
 * propósito, porque una landing no debe depender del build del ERP.
 */
:root {
  --canvas: #0d0d0d;
  --panel: #141414;
  --card: #1c1c1c;
  --raised: #242424;
  --borde: #2b2b2b;
  --borde-fuerte: #333333;
  --texto: #ededed;
  --texto-2: #a3a3a3;
  --texto-3: #8f8f8f;
  --acento: #ff5a1f;
  --acento-suave: rgba(255, 90, 31, 0.12);
  --exito: #3ecf8e;
  --radio: 18px;
  --radio-chico: 11px;
  --ancho: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Encabezado ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 13, 13, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}

.barra .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.marca {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.marca span { color: var(--acento); }

.barra nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.barra nav a {
  color: var(--texto-2);
  text-decoration: none;
  font-size: 0.9rem;
}

.barra nav a:hover { color: var(--texto); }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 48px: cómodo para el pulgar en un teléfono, que es donde va a entrar la
     mitad de la gente. */
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}

.boton:active { transform: translateY(1px); }

.boton.primario {
  background: var(--acento);
  color: #1a1a1a;
}

.boton.primario:hover { opacity: .9; }

.boton.secundario {
  background: transparent;
  border-color: var(--borde-fuerte);
  color: var(--texto);
}

.boton.secundario:hover { background: var(--raised); }

/* ---------- Portada ---------- */

.portada {
  padding: 88px 0 64px;
  text-align: center;
}

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 24px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--acento-suave);
  color: var(--acento);
  font-size: 0.8rem;
  font-weight: 600;
}

.portada h1 {
  margin: 0 0 20px;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.portada h1 em {
  font-style: normal;
  color: var(--acento);
}

.bajada {
  max-width: 640px;
  margin: 0 auto 32px;
  color: var(--texto-2);
  font-size: clamp(1rem, 2vw, 1.15rem);
}

.acciones {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.credenciales {
  margin-top: 18px;
  color: var(--texto-3);
  font-size: 0.85rem;
}

.credenciales code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--panel);
  color: var(--texto-2);
}

/* ---------- Capturas ---------- */

.captura {
  margin: 48px auto 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  /* La sombra hace que la captura se despegue del fondo: sin ella, sobre un
     fondo oscuro una captura oscura se confunde con la página. */
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}

.captura img {
  display: block;
  width: 100%;
  height: auto;
}

.pie-captura {
  margin-top: 12px;
  color: var(--texto-3);
  font-size: 0.82rem;
  text-align: center;
}

/* ---------- Secciones ---------- */

section { padding: 72px 0; }

.titulo-seccion {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.subtitulo-seccion {
  max-width: 620px;
  margin: 0 0 40px;
  color: var(--texto-2);
}

/* ---------- Módulos ---------- */

.modulos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.modulo {
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.modulo h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.modulo .para {
  margin: 0 0 16px;
  color: var(--acento);
  font-size: 0.85rem;
  font-weight: 600;
}

.modulo ul {
  margin: 0;
  padding-left: 18px;
  color: var(--texto-2);
  font-size: 0.92rem;
}

.modulo li { margin-bottom: 6px; }

/* ---------- Combinaciones ---------- */

/*
 * Las cinco en una sola fila en escritorio.
 *
 * Con `minmax(220px, …)` entraban cuatro y la quinta quedaba sola abajo, que
 * es justo lo contrario de lo que la sección quiere decir: que son piezas de
 * un mismo set. A 200px entran las cinco y se leen como una escala.
 */
.combinaciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.combinacion {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.combinacion.destacada {
  border-color: var(--acento);
  background: linear-gradient(180deg, var(--acento-suave), var(--panel) 60%);
}

.piezas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.pieza {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--raised);
  color: var(--texto-2);
  font-size: 0.75rem;
  font-weight: 600;
}

.pieza.on {
  background: var(--acento);
  color: #1a1a1a;
}

.combinacion h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.combinacion p {
  margin: 0 0 20px;
  color: var(--texto-2);
  font-size: 0.9rem;
}

.precio {
  padding-top: 16px;
  border-top: 1px solid var(--borde);
  color: var(--texto-3);
  font-size: 0.85rem;
}

/* ---------- Diferenciales ---------- */

.diferenciales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.diferencial {
  padding-left: 18px;
  border-left: 2px solid var(--acento);
}

.diferencial h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.diferencial p {
  margin: 0;
  color: var(--texto-2);
  font-size: 0.93rem;
}

/* ---------- Cierre ---------- */

.cierre {
  margin: 40px 0 0;
  padding: 56px 32px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  text-align: center;
}

.cierre h2 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.cierre p {
  max-width: 520px;
  margin: 0 auto 28px;
  color: var(--texto-2);
}

footer {
  padding: 32px 0;
  border-top: 1px solid var(--borde);
  color: var(--texto-3);
  font-size: 0.85rem;
}

footer .contenedor {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Teléfono ---------- */

@media (max-width: 760px) {
  /*
   * El menú NO se esconde. Antes iba `display:none` y en un teléfono la página
   * quedaba sin navegación: sólo scroll. Pasa a ser una fila que se arrastra,
   * que es lo que hace cualquier app cuando no entra todo a lo ancho.
   */
  .barra nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    /* Sin esto Safari muestra la barra de scroll encima de los enlaces. */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .barra nav::-webkit-scrollbar { display: none; }

  .barra nav a {
    flex-shrink: 0;
    /* 44px: es lo mínimo que un pulgar acierta sin pelear. */
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 0.88rem;
  }

  .barra .contenedor { flex-direction: column; align-items: stretch; gap: 10px; }
  .marca { text-align: center; }

  .portada { padding: 40px 0 36px; }
  section { padding: 46px 0; }

  h1 { font-size: 2.05rem; line-height: 1.15; }
  .titulo-seccion { font-size: 1.6rem; }
  .bajada { font-size: 1rem; }

  .acciones { flex-direction: column; }
  .acciones .boton { width: 100%; min-height: 52px; }
  .cierre { padding: 34px 18px; }

  /*
   * Los precios en carrusel, no apilados. Cinco tarjetas una abajo de la otra
   * son 2500px de scroll para comparar dos números; de costado se comparan
   * arrastrando, que es como se miran los planes en un teléfono.
   */
  .combinaciones {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* El respiro a los lados hace que la primera y la última no queden pegadas
       al borde de la pantalla. */
    padding: 4px 16px 12px;
    margin: 0 -16px;
    scrollbar-width: none;
  }

  .combinaciones::-webkit-scrollbar { display: none; }

  .combinacion {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  /* Que se vea que hay más de una: la siguiente asoma por el borde. */
  .combinacion:last-child { margin-right: 16px; }

  .boton-combo { min-height: 48px; display: flex; align-items: center; justify-content: center; }

  /* La charla ocupa el ancho: en 390px el 85% dejaba renglones de tres palabras. */
  .dice-usuario, .dice-sistema { max-width: 100%; }

  .capacidades { gap: 12px; }
  .capacidad { padding: 18px; }

  .telefono { max-width: 260px; }
}

/*
 * Barra fija de acción, sólo en teléfono.
 *
 * En una landing larga el visitante decide a la mitad, no al final: si el botón
 * vive arriba y abajo del todo, en el medio no hay forma de entrar sin buscar.
 */
.accion-fija { display: none; }

@media (max-width: 760px) {
  .accion-fija {
    display: flex;
    gap: 8px;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(13, 13, 13, .94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--borde);
  }

  .accion-fija .boton {
    flex: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.94rem;
  }

  /* Para que la barra no tape el pie de la página. */
  footer { padding-bottom: 84px; }
}

/* ---------- Teléfono ---------- */

/*
 * Tres capturas de teléfono en fila. `auto-fit` con un mínimo de 240px las
 * pone en una sola fila en escritorio y las apila solas en pantalla chica,
 * que es donde esta sección más se va a mirar.
 */
.telefonos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  align-items: start;
}

.telefono {
  /* Tope de ancho: sin él, en escritorio cada captura se estira a un tercio del
     contenedor y la sección se vuelve una torre de 3400px. Un teléfono se lee
     igual a 300px y la sección entra de una. */
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
}

.telefono img {
  display: block;
  width: 100%;
  height: auto;
  /* El marco redondeado es lo que hace leer la captura como un teléfono sin
     tener que dibujar un aparato alrededor. */
  border: 1px solid var(--borde-fuerte);
  border-radius: 26px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
}

.telefono figcaption {
  margin-top: 14px;
  color: var(--texto-2);
  font-size: 0.88rem;
}


/* ==========================================================================
   Gestionado por IA
   ========================================================================== */

/*
 * Va apenas debajo de la portada porque es lo que separa a este producto del
 * resto: todos los ERP muestran una grilla de facturas. Fondo propio para que
 * se lea como un bloque aparte sin tener que gritar con colores.
 */
.seccion-ia {
  background:
    radial-gradient(1100px 420px at 50% -10%, rgba(255, 90, 31, .10), transparent 70%),
    var(--panel);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

.seccion-ia .pastilla { margin-bottom: 18px; }

/* ---- la conversación de ejemplo ---- */

/*
 * Una charla de verdad convence más que una lista de features: se ve el pedido
 * en el idioma en que uno hablaría, y abajo lo que el sistema efectivamente
 * hizo. Eso último es lo que separa «ejecuta» de «contesta».
 */
.charla {
  max-width: 640px;
  margin: 34px 0 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dice-usuario,
.dice-sistema {
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--radio);
  line-height: 1.5;
}

.dice-usuario {
  align-self: flex-end;
  max-width: 85%;
  background: var(--acento);
  color: #fff;
  font-weight: 600;
  /* La esquina cortada del lado del que habla: es la convención de cualquier
     app de mensajes y evita tener que rotular quién dice qué. */
  border-bottom-right-radius: 6px;
}

.dice-sistema {
  align-self: flex-start;
  max-width: 92%;
  background: var(--card);
  border: 1px solid var(--borde);
  border-bottom-left-radius: 6px;
}

.dice-sistema p { margin: 0; }

/* Lo que hizo, no lo que dijo: es el corazón del argumento. */
.hizo {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--borde);
  padding-top: 12px;
}

.hizo li {
  position: relative;
  padding-left: 20px;
  color: var(--texto-2);
  font-size: 0.9rem;
}

.hizo li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--exito);
  font-weight: 700;
}

/* ---- las cuatro capacidades ---- */
.capacidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.capacidad {
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.capacidad h3 {
  margin: 0 0 10px;
  font-size: 1.02rem;
  color: var(--texto);
}

.capacidad p {
  margin: 0;
  color: var(--texto-2);
  line-height: 1.6;
  font-size: 0.94rem;
}

/* La línea de IA dentro de cada módulo: se distingue del resto de la lista
   porque es la capacidad nueva, no una más. */
.con-ia {
  color: var(--acento) !important;
  font-weight: 600;
}

.letra-chica {
  max-width: 720px;
  font-size: 0.84rem;
  line-height: 1.55;
}

/* ==========================================================================
   Precios
   ========================================================================== */

.ancla-vieja {
  /* Conserva el enlace #combinaciones que ya circulaba, sin ocupar lugar. */
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden;
}

.precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 3px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--texto);
}

.precio .signo { font-size: 1.05rem; font-weight: 600; color: var(--texto-2); }

.precio .importe {
  /* Escala con el ancho disponible: en la grilla de cinco la tarjeta queda en
     203px y un tamaño fijo empujaba el número afuera. */
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  /* El importe no se parte nunca: un precio cortado en dos renglones se lee mal
     y encima cambia el alto de una sola tarjeta. */
  white-space: nowrap;
}

.precio .periodo {
  /* Renglón propio: al lado del importe no entra en una tarjeta de 203px. */
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--texto-3);
  white-space: nowrap;
}

.letra-precio {
  /* Separado de «por mes»: sin aire se leen como un solo párrafo y la
     condición se confunde con la periodicidad. */
  margin: 14px 0 16px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--texto-3);
}

.boton-combo {
  display: block;
  padding: 12px 16px;
  background: var(--raised);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  color: var(--texto);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
  transition: background .15s ease, border-color .15s ease;
}

.boton-combo:hover { background: var(--acento-suave); border-color: var(--acento); }

/* En la destacada el botón es sólido: es la que queremos que elijan. */
.combinacion.destacada .boton-combo {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.combinacion.destacada .boton-combo:hover { opacity: .9; }


/* ==========================================================================
   Contacto
   ========================================================================== */

.contacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.tarjeta-contacto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px;
  background: var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

/* Solo la que es enlace reacciona: si la otra también se iluminara, invitaría
   a un clic que no lleva a ningún lado. */
a.tarjeta-contacto:hover {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.tarjeta-contacto .rotulo {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-3);
}

.tarjeta-contacto .dato {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--texto);
  /* Un mail largo no puede desbordar la tarjeta en un teléfono. */
  overflow-wrap: anywhere;
}

a.tarjeta-contacto .dato { color: var(--acento); }

.tarjeta-contacto .detalle {
  color: var(--texto-2);
  font-size: 0.9rem;
  line-height: 1.55;
}

.tarjeta-contacto code {
  background: var(--raised);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.85em;
}

@media (max-width: 760px) {
  .tarjeta-contacto { padding: 20px; }
  /* Toda la tarjeta es el área de toque: en un teléfono apuntarle al texto del
     mail es pedir precisión que el pulgar no tiene. */
  a.tarjeta-contacto { min-height: 96px; }
}