body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #222;
  background-color: #000000;
}

.hero {
    background: url('assests-seo/img/hero-bg/bg-1.jpg') center center/cover no-repeat;
    color: white;
    padding: 80px 20px;
    text-align: center;
    height: 100dvh;
}

.hero .cta {
    margin-top: 25px;
    display: inline-block;
    padding: 15px 25px;
    background: #93754c;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: background 0.3s ease, transform 0.2s;
    animation: cta-bounce 1.2s infinite;
}

@keyframes cta-bounce {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 16px 0 rgba(173, 141, 95, 0.3);
    }
    20% {
        transform: scale(1.08);
        box-shadow: 0 8px 24px 0 rgba(173, 141, 95, 0.4);
    }
    40% {
        transform: scale(0.97);
        box-shadow: 0 2px 8px 0 rgba(173, 141, 95, 0.2);
    }
    60% {
        transform: scale(1.04);
        box-shadow: 0 6px 20px 0 rgba(173, 141, 95, 0.35);
    }
    80% {
        transform: scale(0.98);
        box-shadow: 0 3px 12px 0 rgba(173, 141, 95, 0.25);
    }
}
.hero .cta:hover {
  background: #ad8d5f;
}

section, article {
    padding: 40px 20px;
    max-width: 900px;
    margin: auto;
    background: white;
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
    border: 1px solid #ececec;
}

article + article {
    margin-top: 40px;
    border-top: 3px solid #ad8d5f;
    box-shadow: 0 8px 32px 0 rgba(173, 141, 95, 0.08);
}

ul {
  list-style: none;
  padding-left: 0;
}
ul li::before {
  content: "✅ ";
  color: #10b981;
}

blockquote {
  background: #f1f5f9;
  padding: 15px 20px;
  border-left: 5px solid #8b0051;
  margin: 20px 0;
  border-radius: 5px;
  font-style: italic;
}

.cta-secundario {
    display: inline-block;
    margin-top: 30px;
    padding: 15px 25px;
    background-color: #8b0051;
    color: white;
    font-size: 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease;
    animation: cta-secundario-pulse 1.3s infinite;
}

@keyframes cta-secundario-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 16px 0 rgba(139, 0, 81, 0.25);
    }
    20% {
        transform: scale(1.07);
        box-shadow: 0 8px 24px 0 rgba(139, 0, 81, 0.35);
    }
    40% {
        transform: scale(0.96);
        box-shadow: 0 2px 8px 0 rgba(139, 0, 81, 0.15);
    }
    60% {
        transform: scale(1.04);
        box-shadow: 0 6px 20px 0 rgba(139, 0, 81, 0.3);
    }
    80% {
        transform: scale(0.98);
        box-shadow: 0 3px 12px 0 rgba(139, 0, 81, 0.2);
    }
}
.cta-secundario:hover {
  background-color: #a50a64;
}

footer {
  text-align: center;
  padding: 20px;
  font-size: 14px;
  background: #000000;
  color: #374151;
  margin-top: 40px;
}

footer {
color: azure;
}

footer a{
color: #ad8d5f;
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 15px;
  }

  section, article {
    padding: 25px 15px;
  }

  .hero h1 {
    font-size: 24px;
  }

  .hero p, ul li, blockquote, .cta-secundario {
    font-size: 16px;
  }
}