/* ===================================
   LAYOUT COMPONENTS
   =================================== */

.main-container {
   max-width: var(--container-max-width);
   margin: 0 auto;
   background-color: var(--bg-primary);
   box-shadow: var(--shadow-lg);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

/* ===================================
   HEADER COMPONENT
   =================================== */

.main-header {
   position: sticky;
   top: 0;
   background-color: var(--bg-primary);
   border-bottom: 1px solid var(--border-primary);
   box-shadow: var(--shadow-sm);
   z-index: var(--z-header);
   height: var(--header-height);
}

.header-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 100%;
   padding: 0 clamp(var(--space-4), 5vw, var(--space-8));
   max-width: var(--container-max-width);
   margin: 0 auto;
}

/* AÑADIR ESTO: */
.logo-link {
   text-decoration: none;
}

/* ===================================
   GRADIENT TEXT UTILITIES
   =================================== */

.gradient-text-base {
   font-weight: var(--font-weight-extrabold);
   letter-spacing: -0.02em;
   -webkit-background-clip: text;
   background-clip: text;
}

.gradient-blue {
   color: var(--color-primary); /* fallback */
   background: var(--gradient-blue-ocean);
}

.gradient-primary {
   color: var(--color-primary); /* fallback */
   background: var(--gradient-primary);
}

.text-3d {
   transform: perspective(500px) rotateX(15deg);
}

.fw-text {
   color: var(--color-primary); /* fallback */
   background: var(--gradient-blue-ocean);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-weight: var(--font-weight-extrabold);
   letter-spacing: -0.02em;
}

.backups-text {
   color: var(--color-primary); /* fallback */
   line-height: 1.25;
   margin-bottom: 0;
   background: var(--gradient-primary);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   letter-spacing: -0.02em;
}

.logo {
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
   line-height: 1;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.header-nav {
   display: flex;
   align-items: center;
   gap: var(--space-1);
}

/* ===================================
   MAIN CONTENT
   =================================== */

.content-container {
   flex: 1;
   padding: clamp(var(--space-6), 5vw, var(--space-12));
   background-color: var(--bg-secondary);
}

/* ===================================
   HERO SECTION
   =================================== */
.hero-section {
   text-align: center;
   margin-bottom: clamp(var(--space-8), 8vw, var(--space-16));
}

.hero-container {
   max-width: var(--text-max-width);
   margin: 0 auto;
}

.fw-hero-text {
   color: var(--color-primary); /* fallback */
   background: var(--gradient-blue-ocean);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-weight: var(--font-weight-extrabold);
   letter-spacing: -0.02em;
}

.hero-title {
   color: var(--color-primary); /* fallback */
   font-size: clamp(var(--font-size-3xl), 6vw, var(--font-size-5xl));
   font-weight: var(--font-weight-extrabold);
   line-height: 1.25;
   margin-bottom: 0;
   background: var(--gradient-primary);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   letter-spacing: -0.02em;
}

.hero-description {
   font-size: var(--font-size-lg);
   color: var(--text-secondary);
   line-height: 1.75;
   max-width: 60ch;
   margin: 0 auto;
}

/* ===================================
   FOOTER
   =================================== */

.main-footer {
   background-color: var(--bg-tertiary);
   border-top: 1px solid var(--border-primary);
   margin-top: auto;
   box-shadow: 0 -1px 3px var(--shadow-color, rgba(0, 0, 0, 0.1));
}

.footer-container {
   max-width: var(--container-max-width);
   margin: 0 auto;
   padding: var(--space-6) clamp(var(--space-4), 5vw, var(--space-8));
   text-align: center;
}

.footer-container p {
   color: var(--text-secondary);
   font-size: var(--font-size-sm);
   margin: 0;
}

.footer-links {
   margin-bottom: var(--space-4);
}

.footer-links a {
   color: var(--text-secondary);
   text-decoration: none;
   margin: 0 var(--space-4);
   font-size: var(--font-size-sm);
}

.footer-links a:hover {
   text-decoration: underline;
   color: var(--text-primary);
}

.footer-links a:focus {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
}

/* ===================================
   ACCESSIBILITY MEDIA QUERIES
   =================================== */

/* Support for browsers that don't support background-clip */
@supports not (-webkit-background-clip: text) {
   .fw-text, .backups-text, .fw-hero-text, .hero-title {
      color: var(--color-primary);
   }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: no-preference) {
   .fw-hero-text, .hero-title {
      transform: perspective(500px) rotateX(15deg);
   }
}

@media (prefers-reduced-motion: reduce) {
   .fw-hero-text, .hero-title {
      transform: none;
   }
}

/* ===================================
   HIGH CONTRAST MODE SUPPORT
   =================================== */

@media (prefers-contrast: high) {
   :root {
      --border-primary: var(--color-gray-800);
      --border-secondary: var(--color-gray-900);
   }
   
   .fw-text, .backups-text, .fw-hero-text, .hero-title {
      -webkit-text-fill-color: unset;
      background: none;
      color: var(--text-primary);
   }
}