/* Sitio de pruebas de Keravo — empresa ficticia.
   Deliberadamente neutro: NO usa la identidad de Keravo. Debe parecer la web
   de una pyme cualquiera, porque es lo que un chatbot se encuentra al
   instalarse. Si llevara la marca de Keravo, la captura no representaría el
   caso real. */

:root {
  --tinta: #23282e;
  --tinta-suave: #5c646e;
  --linea: #e2e5e9;
  --fondo: #ffffff;
  --fondo-alt: #f6f7f9;
  --acento: #2f6f5e;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.6;
  font-size: 16px;
}

/* Aviso de sitio de pruebas. Va arriba, visible y sin ambigüedad: esta web
   se sirve en un dominio público y nadie debe confundirla con un negocio
   real. No afecta al widget: los proveedores no leen el contenido. */
.aviso-pruebas {
  background: #3a3f46;
  color: #fff;
  font-size: 13px;
  padding: 10px 20px;
  text-align: center;
}
.aviso-pruebas strong { font-weight: 600; }

header {
  border-bottom: 1px solid var(--linea);
  padding: 22px 20px;
}
.contenedor {
  max-width: 940px;
  margin: 0 auto;
}
header .contenedor {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.logo {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.logo span { color: var(--acento); }
nav a {
  color: var(--tinta-suave);
  text-decoration: none;
  margin-left: 18px;
  font-size: 14px;
}
nav a:hover { color: var(--tinta); }

.hero {
  padding: 64px 20px 48px;
}
.hero h1 {
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
  max-width: 18ch;
}
.hero p {
  color: var(--tinta-suave);
  max-width: 56ch;
  margin: 0 0 28px;
}
.boton {
  display: inline-block;
  background: var(--acento);
  color: #fff;
  padding: 12px 22px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 15px;
}

section { padding: 44px 20px; }
section.alt { background: var(--fondo-alt); }
h2 {
  font-size: 22px;
  margin: 0 0 20px;
  letter-spacing: -0.2px;
}
.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 720px) {
  .rejilla { grid-template-columns: 1fr; }
}
.tarjeta h3 {
  font-size: 16px;
  margin: 0 0 8px;
}
.tarjeta p {
  color: var(--tinta-suave);
  font-size: 15px;
  margin: 0;
}

footer {
  border-top: 1px solid var(--linea);
  padding: 28px 20px 40px;
  color: var(--tinta-suave);
  font-size: 13px;
}
footer .caso {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  color: #8a919b;
  margin-top: 10px;
}