/* Una hoja, tres paginas. Sin dependencias externas: este sitio tiene
   que poder servirse desde cualquier maquina, o desde un disco. */
:root {
  --fondo:#fbfaf8; --papel:#fff; --tinta:#1b1a18; --tenue:#6f6c67;
  --linea:#e6e3dd; --acento:#2f6f5e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo:#141310; --papel:#1c1b17; --tinta:#eceae4; --tenue:#9b968d;
    --linea:#312f29; --acento:#7fc3ad;
  }
}
:root[data-theme="dark"] {
  --fondo:#141310; --papel:#1c1b17; --tinta:#eceae4; --tenue:#9b968d;
  --linea:#312f29; --acento:#7fc3ad;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--fondo); color:var(--tinta);
  font:17px/1.65 ui-serif,Georgia,"Times New Roman",serif;
}
.envoltorio { max-width:720px; margin:0 auto; padding:56px 20px 80px; }
header { border-bottom:1px solid var(--linea); padding-bottom:28px; }
h1 { font-size:2.1rem; margin:0 0 6px; letter-spacing:-.02em; }
h2 { font-size:1.15rem; margin:44px 0 10px; letter-spacing:-.01em; }
.lema { color:var(--tenue); font-size:1.05rem; margin:0; }
p { margin:0 0 14px; }
.datos {
  background:var(--papel); border:1px solid var(--linea); border-radius:12px;
  padding:22px 24px; margin-top:16px;
}
.datos dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 22px; }
.datos dt {
  color:var(--tenue); font:600 .76rem/1.5 ui-sans-serif,system-ui,sans-serif;
  text-transform:uppercase; letter-spacing:.06em; padding-top:4px;
}
.datos dd { margin:0; }
a { color:var(--acento); }
footer {
  margin-top:56px; padding-top:22px; border-top:1px solid var(--linea);
  color:var(--tenue); font:14px/1.6 ui-sans-serif,system-ui,sans-serif;
}
footer a { margin-right:16px; }
@media (max-width:560px) {
  .datos dl { grid-template-columns:1fr; gap:3px 0; }
  .datos dt { padding-top:12px; }
}

/* ── lo que se anadio al pasar de "pagina de verificacion" a web de empresa ──
   Mismo criterio que el resto: sin dependencias, sin fuentes externas, y que
   se lea igual de bien en un movil que en un disco sin red. */

/* La entrada: lo primero que se lee, un punto mas grande que el cuerpo. */
.entrada { font-size:1.12rem; margin:28px 0 8px; }

/* El bloque del agente. Va destacado porque es la unica prueba que esta
   pagina puede dar de si misma: hay un agente funcionando dentro. */
.prueba {
  background:var(--papel); border:1px solid var(--linea); border-left:3px solid var(--acento);
  border-radius:12px; padding:20px 24px; margin:32px 0 8px;
}
.prueba h2 { margin:0 0 8px; }
.prueba p { margin:0 0 10px; }
.prueba .matiz { color:var(--tenue); font-size:.95rem; margin:0; }

/* Los principios. En <dl> y no en lista a proposito: cada uno es una
   afirmacion con su porque, y el porque es lo que la hace creible. */
.principios { margin:18px 0 0; }
.principios dt {
  font-weight:600; margin-top:22px; letter-spacing:-.01em;
}
.principios dt::before {
  content:"—"; color:var(--acento); margin-right:8px;
}
.principios dd {
  margin:6px 0 0 24px; color:var(--tenue);
}

/* El origen del nombre. Va en tono menor -- es un apunte, no un argumento de
   venta -- pero se queda: explica en una linea que estos agentes trabajan
   PARA alguien, que es justo lo que los distingue de un chatbot generico. */
.nombre {
  color:var(--tenue); font-size:.97rem;
  border-left:2px solid var(--linea); padding-left:16px; margin:18px 0 8px;
}
.nombre em { font-style:italic; }