/* ============================================================
   STYLES.CSS — Wide Agencia
   Modo oscuro automático · Diseño premium tipo Apple / Linear
   ============================================================ */

/* VARIABLES GLOBAL */
:root {
    --wide-red: #e40514;
    --wide-red-hover: #b10310;
    --wide-red-soft: rgba(228, 5, 20, 0.15);

    --text-main: #1a1a1a;
    --text-secondary: #4a4a4a;

    --bg-main: #ffffff;
    --bg-alt: #f5f5f7;

    --border-color: rgba(0,0,0,0.1);
    --transition: all .25s ease;
}

/* MODO OSCURO AUTOMÁTICO */
@media (prefers-color-scheme: dark) {
    :root {
        --text-main: #ffffff;
        --text-secondary: #c8c8c8;

        --bg-main: #0e1116;
        --bg-alt: #161b22;

        --border-color: rgba(255,255,255,0.08);
        --wide-red-soft: rgba(228, 5, 20, 0.32);
    }
}

/* BODY BASE */
body {
    background: var(--bg-main);
    color: var(--text-main);
    transition: background .3s ease, color .3s ease;
}

/* GLOW CORPORATIVO */
.wide-glow {
    background: radial-gradient(
        circle at center,
        var(--wide-red-soft) 0%,
        transparent 70%
    );
    filter: blur(55px);
    opacity: 0.9;
}

/* BOTÓN CTA PRINCIPAL */
.btn-primary {
    background: var(--wide-red);
    color: #fff;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
    border: 1px solid var(--wide-red);
    box-shadow: 0 6px 18px rgba(228,5,20,0.25);
    font-size: 0.875rem;
}

.btn-primary:hover {
    background: var(--wide-red-hover);
    border-color: var(--wide-red-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(228,5,20,0.33);
}

.btn-primary:active {
    transform: translateY(0px);
    box-shadow: 0 4px 12px rgba(228,5,20,0.18);
}

/* BOTÓN CTA SECUNDARIO */
.btn-secondary {
    background: transparent;
    color: var(--text-main);
    border-radius: 999px;
    padding: 12px 24px;
    border: 1.8px solid var(--wide-red);
    font-weight: 600;
    transition: var(--transition);
    font-size: 0.875rem;
}

@media (prefers-color-scheme: dark) {
    .btn-secondary {
        color: #ffffff;
    }
}

.btn-secondary:hover {
    background: var(--wide-red-soft);
    color: var(--wide-red);
    border-color: var(--wide-red);
}

/* CARDS */
.card {
    background: var(--bg-alt);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.card:hover {
    border-color: var(--wide-red);
    transform: translateY(-3px);
}

/* BADGE base (hay variantes en Tailwind de la maquetación) */
.badge {
    border-radius: 999px;
}

/* HERO IMAGE */
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .9;
}

@media (prefers-color-scheme: dark) {
    .hero-image {
        filter: brightness(.75) contrast(1.1) saturate(1.05);
    }
}

/* ANIMACIONES */
@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fade-in-up .7s ease forwards;
}

/* UTILIDADES */
.rounded-xl { border-radius: 1rem; }
.rounded-2xl { border-radius: 1.5rem; }
.shadow-soft { box-shadow: 0 8px 18px rgba(0,0,0,0.06); }




.footer-title {
  @apply text-sm font-semibold text-gray-900 dark:text-white mb-3;
}

.footer-list li a {
  @apply text-gray-600 dark:text-gray-400 text-sm hover:text-wide-red dark:hover:text-wide-red transition block py-1;
}

.footer-social {
  @apply w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 
         text-gray-700 dark:text-gray-300 hover:bg-wide-red hover:text-white dark:hover:bg-wide-red 
         transition shadow-sm;
}

.navlink {
    color: #444;
    transition: .25s;
}
.dark .navlink { color: #ccc; }

.navlink:hover {
    color: #e40514;
}

.mobile-link {
    padding: 0.75rem 0;
    color: #333;
    transition: .25s;
}
.dark .mobile-link { color: #ddd; }

.mobile-link:hover {
    color: #e40514;
}




  @keyframes fadeInUpSoft {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes floatGlow {
    0%, 100% {
      transform: translateY(0px) translateX(0px);
    }
    50% {
      transform: translateY(-10px) translateX(6px);
    }
  }

  @keyframes heroImageSlowZoom {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.04);
    }
  }

  .animate-fade-in-up {
    animation: fadeInUpSoft 0.8s ease-out both;
  }

  .hero-glow-1,
  .hero-glow-2 {
    animation: floatGlow 10s ease-in-out infinite;
  }

  .hero-image-desktop {
    animation: heroImageSlowZoom 12s ease-out forwards;
    will-change: transform;
    transform-origin: center center;
  }

  @media (prefers-reduced-motion: reduce) {
    .animate-fade-in-up,
    .hero-glow-1,
    .hero-glow-2,
    .hero-image-desktop {
      animation: none !important;
      transition: none !important;
    }
  }