/* Bloques de texto SEO del final de la pagina.
   Se anadieron al HTML sin ninguna regla de estilo, asi que se pintaban a
   sangre y con los tipos por defecto del navegador. Esta hoja les da el ancho,
   el centrado y la tipografia del resto del sitio.

   Se seleccionan con [class*="ted-seo-depth"] y no clase por clase: hay tres
   variantes (ted-seo-depth, -more y -final) que aparecieron en momentos
   distintos, asi que cualquier variante nueva queda cubierta sola. No alcanza
   a .ted-seo-footer, que lleva sus propios estilos en linea.

   Los colores usan las variables de cada pagina con un valor de reserva,
   porque no todas las declaran (las del blog, por ejemplo, no tienen :root). */

[class*="ted-seo-depth"] {
  width: min(720px, 100% - 40px);
  margin-right: auto;
  margin-left: auto;
  padding: 30px 0 0;
}

/* El primero abre la tanda: algo mas de aire tras la banda que lo precede. */
.ted-seo-depth {
  padding-top: 44px;
}

/* El ultimo necesita separacion antes del pie. */
[class*="ted-seo-depth"]:last-child {
  padding-bottom: 52px;
}

/* Paginas del blog y las de aterrizaje: el bloque vive dentro de
   <main class="wrap">, que ya limita el ancho. Alli no debe volver a
   centrarse, o quedaria indentado respecto al resto del articulo: llena el
   contenedor como los demas parrafos. */
.wrap [class*="ted-seo-depth"] {
  width: auto;
  margin-right: 0;
  margin-left: 0;
}

[class*="ted-seo-depth"] h2 {
  margin: 0 0 12px;
  color: var(--ink, #20262d);
  font-size: clamp(21px, 3vw, 29px);
  line-height: 1.25;
}

[class*="ted-seo-depth"] p {
  margin: 0 0 14px;
  color: var(--muted, #667085);
  font-size: 17px;
  line-height: 1.7;
}

[class*="ted-seo-depth"] p:last-child {
  margin-bottom: 0;
}

[class*="ted-seo-depth"] a {
  color: var(--pink, #ec2d78);
  font-weight: 600;
  text-decoration: none;
}

[class*="ted-seo-depth"] a:hover {
  text-decoration: underline;
}

@media (max-width: 620px) {
  [class*="ted-seo-depth"] {
    width: min(720px, 100% - 28px);
    padding-top: 24px;
  }

  .ted-seo-depth { padding-top: 34px; }

  [class*="ted-seo-depth"]:last-child {
    padding-bottom: 40px;
  }

  [class*="ted-seo-depth"] p {
    font-size: 16px;
  }
}