/* Valores tomados de blog.css (no define custom properties):
   fuente del body, color de enlaces (#00abff) y texto secundario (#666).
   blog.css no fija fondo ni color de texto del body: se usan los
   valores por defecto del navegador (blanco / negro). */
.landing {
  --lp-fondo: #ffffff;
  --lp-texto: #000000;
  --lp-secundario: #666666;
  --lp-acento: #00abff;
  --lp-fuente: helvetica, sans-serif;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--lp-fondo);
  color: var(--lp-texto);
  font-family: var(--lp-fuente);
}
/* blog.css añade body::after { display: table } como clearfix; en un body
   con display: grid sería un segundo item de la cuadrícula y rompería el
   centrado vertical. */
.landing::after {
  content: none;
}
.landing__contenido {
  max-width: 40rem;
  padding: 3rem 2rem;
  text-align: center;
}
.landing__marca {
  margin: 0 0 1.5rem;
  /* blog.css da a h1 border-bottom y padding inferior; se anulan aquí.
     El padding-left compensa el letter-spacing final para centrar. */
  border-bottom: 0;
  padding: 0 0 0 0.18em;
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.1;
}
.landing__semblanza {
  margin: 0 auto 2.5rem;
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--lp-secundario);
}
.landing__enlace {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border: 1px solid var(--lp-acento);
  color: var(--lp-acento);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.landing__enlace:hover,
.landing__enlace:focus-visible {
  background: var(--lp-acento);
  color: var(--lp-fondo);
}
@media (max-width: 768px) {
  .landing__contenido { padding: 2rem 1.25rem; }
  .landing__marca { letter-spacing: 0.1em; padding-left: 0.1em; }
  .landing__semblanza { font-size: 1rem; }
  .landing__enlace { display: block; }
}