/* ============================================================================
   ad.css — ForHosting.com/AD: la landing del ad server.

   La primera versión de la página eran seis tarjetas grises y una lista de
   preguntas. Vendía un producto que decide, en milisegundos y en el borde de
   la red, qué anuncio ve cada visitante — y se leía como un folleto de
   cualquier cosa.

   🔴 ALCANCE. Esta hoja la carga SOLO `/ad` y sus siete slugs traducidos
   (`core.js`, EXTRA_HEAD). `/ad/panel` y `/ad/documentation` son claves
   distintas y NO la heredan. Por eso aquí sí se puede tratar la página entera
   —el chrome compartido incluido— sin riesgo para nada más: es la misma
   situación de `voice.css`, y la contraria a `kit.css`, que la comparten el
   hub, las landings de capacidades y la documentación y por eso allí TODO va
   bajo `.kithub`.

   🔴 LOS TOKENS SON LOS DEL SITIO. `site.css` define `--fondo`, `--tinta`,
   `--txt`, `--linea`, `--lima`, `--verde`, `--naranja`, `--azul`, las tres
   familias tipográficas y `--max`. Un `var(--acento, #2f6df6)` inventado pinta
   la página del color equivocado y queda perfectamente bonito, que es como no
   se nota. Aquí no se inventa ninguno.

   🔴 Y NO SE INVIERTE EL SIGNIFICADO DE UN TOKEN. `--tinta` quiere decir
   tinta; darle la vuelta para oscurecer la página convertiría en manchas
   claras los bloques que ya la usan de fondo. Lo oscuro se hace por SELECTOR.
   ========================================================================= */

/* ---------- 1 · el lienzo del hero ----------------------------------------
   La señal: impresiones entrando por la izquierda, decisión en el centro,
   anuncio saliendo. Es canvas y no SVG porque se anima y porque hacerlo con
   nodos costaría más DOM del que vale un adorno. Decorativo de verdad:
   aria-hidden, y si el visitante pide movimiento reducido, ni se instancia
   (lo decide ad.js — apagarlo aquí dejaría el <canvas> ocupando su hueco). */
.page-hero { position: relative; overflow: hidden; }
.ad-signal {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
  opacity: .55;
  /* Por debajo del texto del hero, siempre. El .glow que ya traía la página
     vive en el mismo sitio y se lleva bien: uno da color, este da movimiento. */
  z-index: 0;
}
.page-hero .wrap > *:not(.glow):not(.ad-signal) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ad-signal { display: none; } }

/* ---------- 2 · la sección de velocidad -----------------------------------
   Es el argumento que ninguna red de anuncios puede hacer, así que se le da
   el único bloque con fondo propio de la página. Numerada porque SÍ es una
   secuencia: la página carga, el hueco espera, el anuncio llega. */
.ad-speed {
  background: var(--tinta);
  color: var(--fondo);
  padding-top: 56px; padding-bottom: 56px;
  margin-top: 8px;
}
.ad-speed h2, .ad-speed h3 { color: var(--fondo); }
.ad-speed .eyebrow { color: var(--lima); }
.ad-speed .section-lead { color: color-mix(in srgb, var(--fondo) 78%, transparent); }

.ad-speed-grid {
  display: grid; gap: 22px; margin-top: 28px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ad-speed-card {
  border: 1px solid color-mix(in srgb, var(--fondo) 22%, transparent);
  border-radius: 14px; padding: 22px 20px 20px;
  background: color-mix(in srgb, var(--fondo) 5%, transparent);
  position: relative;
}
.ad-speed-card h3 { margin: 10px 0 8px; font-size: 19px; }
.ad-speed-card p { margin: 0; color: color-mix(in srgb, var(--fondo) 76%, transparent); font-size: 15px; line-height: 1.62; }
/* El número es tipografía, no un adorno: va en la display y en lima, que es
   el acento de la marca. `font-variant-numeric` porque en la display los
   dígitos son proporcionales y tres cajas seguidas se descuadran. */
.ad-speed-n {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: .12em;
  color: var(--lima); font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ---------- 3 · las dos listas: formatos y segmentación ------------------- */
.ad-two {
  display: grid; gap: 26px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.ad-list {
  border: 1px solid var(--linea); border-radius: 14px;
  padding: 24px 22px 20px; background: var(--fondo);
}
.ad-list h3 { margin: 0 0 6px; font-size: 20px; }
.ad-list-lead { margin: 0 0 16px; color: var(--txt); font-size: 15px; }
.ad-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
/* La marca de viñeta es una barra, no un punto: el catálogo de un ad server
   se lee como un inventario. Se apoya en el borde, así que sigue al texto en
   RTL sin una regla aparte. */
.ad-list li {
  border-inline-start: 2px solid var(--lima);
  padding-inline-start: 12px;
  font-size: 15px; line-height: 1.6; color: var(--txt);
}
.ad-list li b { color: var(--tinta); font-weight: 600; }

/* ---------- 4 · el dinero, por los dos lados ------------------------------ */
.ad-money {
  display: grid; gap: 22px; margin-top: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.ad-money-side {
  border: 1px solid var(--linea); border-radius: 14px;
  padding: 24px 22px; background: var(--fondo);
  /* La barra superior distingue los dos lados sin escribir «anunciante» y
     «publisher» dos veces: naranja compra, verde cobra. */
  border-top: 3px solid var(--naranja);
}
.ad-money-side + .ad-money-side { border-top-color: var(--verde); }
.ad-money-side h3 { margin: 0 0 10px; font-size: 20px; }
.ad-money-side p { margin: 0; font-size: 15px; line-height: 1.68; color: var(--txt); }
.ad-api { margin: 22px 0 0; font-size: 15px; color: var(--txt); }
.ad-api a { font-weight: 600; }

@media (max-width: 640px) {
  .ad-speed { padding-top: 40px; padding-bottom: 40px; }
  .ad-list, .ad-money-side { padding: 20px 18px; }
}