/**
 * ===========================================
 * LANDING PAGE - ESTILOS BASE
 * ===========================================
 *
 * Estilos base para la landing page.
 * Usa la clase .landing-page como wrapper
 * para aislar estos estilos del dashboard.
 *
 * ===========================================
 */

/*===========================================
 * WRAPPER PRINCIPAL
 * Todos los estilos de landing están
 * encapsulados bajo esta clase
 *===========================================*/

.landing-page {
  font-family: var(--landing-font-family);
  font-size: var(--landing-font-size-base);
  font-weight: var(--landing-font-weight-normal);
  line-height: var(--landing-line-height-normal);
  color: var(--landing-text-primary);
  background-color: var(--landing-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*===========================================
 * RESET BÁSICO (scoped)
 *===========================================*/

.landing-page *,
.landing-page *::before,
.landing-page *::after {
  box-sizing: border-box;
}

.landing-page img,
.landing-page picture,
.landing-page video,
.landing-page canvas,
.landing-page svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.landing-page input,
.landing-page button,
.landing-page textarea,
.landing-page select {
  font: inherit;
}

.landing-page p,
.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page h4,
.landing-page h5,
.landing-page h6 {
  overflow-wrap: break-word;
}

/*===========================================
 * TIPOGRAFÍA
 *===========================================*/

.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page h4,
.landing-page h5,
.landing-page h6 {
  font-family: var(--landing-font-family-heading);
  font-weight: var(--landing-font-weight-bold);
  line-height: var(--landing-line-height-tight);
  color: var(--landing-text-primary);
  margin-top: 0;
  margin-bottom: var(--landing-space-4);
}

.landing-page h1 {
  font-size: var(--landing-font-size-4xl);
  letter-spacing: var(--landing-letter-spacing-tight);
}

.landing-page h2 {
  font-size: var(--landing-font-size-3xl);
}

.landing-page h3 {
  font-size: var(--landing-font-size-2xl);
}

.landing-page h4 {
  font-size: var(--landing-font-size-xl);
}

.landing-page h5 {
  font-size: var(--landing-font-size-lg);
}

.landing-page h6 {
  font-size: var(--landing-font-size-base);
}

.landing-page p {
  margin-top: 0;
  margin-bottom: var(--landing-space-4);
}

.landing-page p:last-child {
  margin-bottom: 0;
}

.landing-page small {
  font-size: var(--landing-font-size-sm);
}

.landing-page strong,
.landing-page b {
  font-weight: var(--landing-font-weight-semibold);
}

/*===========================================
 * LINKS
 *===========================================*/

.landing-page a {
  color: var(--landing-accent);
  text-decoration: none;
  transition: color var(--landing-transition-fast);
}

.landing-page a:hover {
  color: var(--landing-accent-hover);
}

.landing-page a:focus-visible {
  outline: 2px solid var(--landing-accent);
  outline-offset: 2px;
  border-radius: var(--landing-radius-sm);
}

/*===========================================
 * LISTAS
 *===========================================*/

.landing-page ul,
.landing-page ol {
  margin-top: 0;
  margin-bottom: var(--landing-space-4);
  padding-left: var(--landing-space-6);
}

.landing-page li {
  margin-bottom: var(--landing-space-2);
}

.landing-page ul.l-list-none,
.landing-page ol.l-list-none {
  list-style: none;
  padding-left: 0;
}

/*===========================================
 * CONTENEDOR
 *===========================================*/

.landing-page .l-container {
  width: 100%;
  max-width: var(--landing-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--landing-container-padding);
  padding-right: var(--landing-container-padding);
}

.landing-page .l-container-fluid {
  width: 100%;
  padding-left: var(--landing-container-padding);
  padding-right: var(--landing-container-padding);
}

/*===========================================
 * SECCIONES
 *===========================================*/

.landing-page .l-section {
  padding-top: var(--landing-space-12);
  padding-bottom: var(--landing-space-12);
}

.landing-page .l-section-sm {
  padding-top: var(--landing-space-8);
  padding-bottom: var(--landing-space-8);
}

.landing-page .l-section-lg {
  padding-top: var(--landing-space-16);
  padding-bottom: var(--landing-space-16);
}

/* Fondos de sección */
.landing-page .l-section--gray {
  background-color: var(--landing-bg-secondary);
}

.landing-page .l-section--dark {
  background-color: var(--landing-bg-dark);
  color: var(--landing-text-inverse);
}

/*===========================================
 * TÍTULOS DE SECCIÓN
 *===========================================*/

.landing-page .l-section-title {
  font-size: var(--landing-font-size-3xl);
  font-weight: var(--landing-font-weight-bold);
  text-align: center;
  margin-bottom: var(--landing-space-4);
}

.landing-page .l-section-subtitle {
  font-size: var(--landing-font-size-lg);
  color: var(--landing-text-secondary);
  text-align: center;
  margin-bottom: var(--landing-space-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/*===========================================
 * SEPARADORES
 *===========================================*/

.landing-page hr {
  border: none;
  border-top: var(--landing-border-width) solid var(--landing-border-light);
  margin: var(--landing-space-8) 0;
}

/*===========================================
 * IMÁGENES
 *===========================================*/

.landing-page .l-img-fluid {
  max-width: 100%;
  height: auto;
}

.landing-page .l-img-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.landing-page .l-img-contain {
  object-fit: contain;
}

/*===========================================
 * ACCESIBILIDAD
 *===========================================*/

/* Screen reader only */
.landing-page .l-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.landing-page .l-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--landing-primary);
  color: var(--landing-white);
  padding: var(--landing-space-2) var(--landing-space-4);
  z-index: var(--landing-z-tooltip);
  transition: top var(--landing-transition-fast);
}

.landing-page .l-skip-link:focus {
  top: 0;
}

/* Focus visible para mejor accesibilidad */
.landing-page *:focus-visible {
  outline: 2px solid var(--landing-accent);
  outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .landing-page *,
  .landing-page *::before,
  .landing-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*===========================================
 * PLACEHOLDER PARA IMÁGENES
 *===========================================*/

.landing-page .l-placeholder {
  background-color: var(--landing-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--landing-gray-500);
}

.landing-page .l-placeholder--square {
  aspect-ratio: 1;
}

.landing-page .l-placeholder--video {
  aspect-ratio: 16 / 9;
}

.landing-page .l-placeholder--portrait {
  aspect-ratio: 3 / 4;
}