/* --- Variables globales --- */
    :root {
      --color-primary: #009887;
      --color-secondary: #C90166;
      --color-danger: #D0021B;
      --color-dark: #0C0206;
      --color-gray: #585f69;
      --color-light: #f6f6f6;
      --color-bg: #FFFFFF;
      --color-alt: #D3C2B4;
      --color-reddeep: #AE1922;
    }

    [data-theme="dark"] {
      --color-bg: #0C0206;
      --color-text: #f6f6f6;
      --color-card: #1A1A1A;
    }

    body {
      background: var(--color-light);
       /* background: linear-gradient(180deg, #0C0206, #1a1a1a); */
      color: var(--color-dark);
      font-family: 'Gilroy', sans-serif;
      transition: background .3s, color .3s;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    .navbar-brand,
    .btn {
      font-family: 'Novecento Wide', sans-serif;
      letter-spacing: .5px;
    }

    /**/
    .text-primary{
       color: var(--color-primary) !important;
      font-weight: 500;
      font-size: 2em;
    }

    #reelsFeed video {
  height: 400px;
  object-fit: cover;
}


    /* --- Navbar --- */
    .navbar {
      background: var(--color-bg);
      border-bottom: 3px solid var(--color-primary);
    }

    .navbar-brand {
      color: var(--color-primary) !important;
      font-weight: 700;
      text-transform: uppercase;
    }

    .nav-link {
      color: var(--color-gray);
      font-weight: 500;
    }

    .nav-link:hover {
      color: var(--color-secondary);
    }

    /* --- Hero --- */
    .hero {
      /* background: linear-gradient(to right, rgba(0, 152, 135, 0.25), rgba(201, 1, 102, 0.4)),
        url('../library-hero3.jpg') center/cover no-repeat; */
         background: linear-gradient(to right, rgba(0, 152, 135, 0.25), rgba(201, 1, 102, 0.4));
      color: #fff;
      padding: 6rem 1rem;
    }

        .hero-logo {
      animation: fadeInScale 900ms ease-out;
      display: inline-block;
      margin-bottom: 1rem;
      max-width: 220px;
    }

    
    /* ---------- Carousel styling ---------- */
    .carousel .carousel-item {
      height: 420px;
    }

    .carousel .carousel-item>img {
      object-fit: cover;
      height: 100%;
      width: 100%;
      filter: contrast(.95) saturate(.95);
    }

    /* ---------- Cartelera (billboard) ---------- */
    .billboard .card {
      border-radius: 12px;
      box-shadow: 0 8px 28px rgba(3, 10, 30, 0.08);
      border: none;
    }

    .tag {
      background: var(--accent2);
      color: #fff;
      padding: .25rem .6rem;
      border-radius: .5rem;
      font-weight: 700;
      font-size: .8rem;
    }
  

    /* --- Buttons --- */
    .btn-primary {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
    }

    .btn-primary:hover {
      background-color: var(--color-secondary);
      border-color: var(--color-secondary);
    }

    .btn-outline-primary {
      color: var(--color-primary);
      border-color: var(--color-primary);
    }

    .btn-outline-primary:hover {
      background-color: var(--color-primary);
      color: #fff;
    }

      .btn-cta {
      background-color: #009887;
      color: #fff;
      border-radius: 30px;
      border: none;
    }

    .btn-cta:hover {
      background-color: #007d74;
      color: #fff;
    }

       /* ---------- Sections ---------- */
    section {
      padding: 4rem 0;
    }

    /* --- Cards --- */
    .card {
      border: none;
      border-radius: 1rem;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
      background: var(--color-bg);
      transition: transform .2s, box-shadow .2s;
    }

    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }


    /* small screens adjustments */
    @media (max-width: 768px) {
      .navbar .nav-link {
        font-size: .95rem;
      }

      .hero {
        padding-top: 5rem;
        padding-bottom: 3rem;
      }
    }

    /* --- Footer --- */
    footer {
      background: var(--color-secondary);
      color: #fff;
      padding: 2rem 0;
      text-align: center;
    }
      footer a {
      color: #fff;
      margin: 0 10px;
      font-size: 3rem;
      text-decoration: none;
    }

    footer a:hover {
      color: #000;
    }

    /* --- Misc --- */
    .muted {
      color: var(--color-gray);
    }

    .badge-accent {
      background: var(--color-secondary);
      color: #fff;
      padding: .5em 1em;
      border-radius: 1rem;
    }

    /* --- Dark Mode --- */
    [data-theme="dark"] body {
      background: #0C0206;
      color: #f6f6f6;
    }

    [data-theme="dark"] .card {
      background: var(--color-card);
      color: var(--color-text);
    }

    /* Scrollbar aesthetic */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--color-primary);
      border-radius: 5px;
    }
    @keyframes fadeInLogo {
      0% {
        opacity: 0;
        transform: scale(0.9);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    #inicio img {
      animation: fadeInLogo 1.2s ease-out;
    }