@charset "utf-8";
    /* ============================
       MODULOCOL – CSS
    ============================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --modulocol-white: #ffffff;
    }


    /* ── Wrapper ── */
    .modulocol-section {
      position: relative;
      width: 100%;
      height: 606px;
      overflow: hidden;
    }

    /* ── Background image ── */
    .modulocol-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    /* ── Overlay oscuro doble gradiente ── */
    .modulocol-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          to top,
          rgba(0,0,0,0.75) 0%,
          rgba(0,0,0,0.30) 42%,
          rgba(0,0,0,0.08) 100%
        ),
        linear-gradient(
          to right,
          rgba(0,0,0,0.50) 0%,
          rgba(0,0,0,0) 65%
        );
    }

    /* ── Content ── */
    .modulocol-content {
      position: absolute;
      bottom: 10%;
      left: 5%;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .modulocol-title {
      font-family: 'Jost', sans-serif;
      font-size: clamp(15px, 2.2vw, 26px);
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--modulocol-white);
      line-height: 1.2;
      opacity: 0;
      transform: translateY(18px);
      animation: modocolFadeUp 0.9s ease 0.3s forwards;
    }

    .modulocol-links {
      display: flex;
      gap: 28px;
      flex-wrap: wrap;
      opacity: 0;
      transform: translateY(14px);
      animation: modocolFadeUp 0.9s ease 0.55s forwards;
    }

    .modulocol-link {
      font-family: 'Jost', sans-serif;
      font-size: clamp(11px, 1.1vw, 14px);
      font-weight: 400;
      letter-spacing: 0.06em;
      color: var(--modulocol-white);
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,0.85);
      padding-bottom: 2px;
      transition: opacity 0.25s, border-color 0.25s;
    }
    .modulocol-link:hover {
      opacity: 0.6;
      border-color: transparent;
    }

    /* ── Animación ── */
    @keyframes modocolFadeUp {
      to { opacity: 1; transform: translateY(0); }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 768px) {
      .modulocol-section { height: 606px; }
      .modulocol-bg { object-position: 65% top; }
      .modulocol-content { bottom: 8%; left: 6%; right: 6%; gap: 16px; }
    }

    @media (max-width: 480px) {
      .modulocol-section { height: 480px; }
      .modulocol-content { bottom: 7%; }
      .modulocol-links { gap: 18px; }
    }