/* RESET */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:'Roboto', sans-serif; background:#f8f9fa; color:#333; line-height:1.6;}
a {text-decoration:none;}

/* HEADER */
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 40px;
  background-color:#0d1b2a;
  color:#fff;
  position:sticky;
  top:0;
  z-index:1000;
}
header img {height:50px;}
header h1 {margin-left:20px; font-size:24px;}
header .btn {
  background:#F50505;
  color:#FFFFFF;
  padding:8px 12px;
  border-radius:5px;
  font-weight:bold;
  transition:0.3s;
}
header .btn:hover {background:#F52727;}

/* HERO */
.hero {
  text-align:center;
  padding:120px 20px 80px 20px;
  background:linear-gradient(to right, #16162E, #052F42);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero h2 {font-size:48px; margin-bottom:20px; animation:fadeInDown 1s ease;}
.hero h3 {font-size:24px; margin-bottom:40px; font-weight:400; animation:fadeInDown 1.2s ease;}
.hero ul {list-style:none; padding:0; margin:0 auto 40px auto; max-width:600px; text-align:left;}
.hero ul li {margin-bottom:15px; font-size:18px; animation:fadeIn 1.4s ease;}
.hero .price {font-size:28px; font-weight:bold; color:#FFF405; margin-bottom:30px; animation:fadeIn 1.6s ease;}
.hero .btn {font-size:20px; animation:fadeInUp 1.8s ease;}

@keyframes fadeInDown {from {opacity:0; transform:translateY(-50px);} to {opacity:1; transform:translateY(0);}}
@keyframes fadeIn {from {opacity:0;} to {opacity:1;}}
@keyframes fadeInUp {from {opacity:0; transform:translateY(50px);} to {opacity:1; transform:translateY(0);}}

 /* SECTIONS */
.section {padding:80px 20px; max-width:1200px; margin:0 auto;}
.section h2 {text-align:center; font-size:36px; margin-bottom:60px; position:relative;}
.section h2::after {
  content:"";
  display:block;
  width:100px;
  height:5px;
  background:#FFF405;
  margin:20px auto 0 auto;
  border-radius:3px;
}

/* FEATURES */
.features {
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:center;
}
.feature-card {
  background:#fff;
  border-radius:15px;
  padding:30px 20px;
  flex:1 1 260px;
  max-width:300px;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
  text-align:center;
  transition:transform 0.3s, box-shadow 0.3s;
}
.feature-card:hover {transform:translateY(-10px); box-shadow:0 15px 30px rgba(0,0,0,0.15);}
.feature-card img {width:60px; margin-bottom:20px;}
.feature-card h3 {margin-bottom:15px; font-size:22px;}
.feature-card p {font-size:16px; color:#555;}

/* ===== FEATURE SLIDERS ===== */
.feature-slider {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.feature-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.feature-slider img.active {opacity: 1;}

/* TESTIMONIOS SLIDER */
.slider {
  position:relative;
  max-width:800px;
  margin:0 auto;
  overflow:hidden;
}
.slides {
  display:flex;
  transition:all 0.5s ease;
}
.slide {
  min-width:100%;
  padding:40px 20px;
  box-sizing:border-box;
  background:#fff;
  border-radius:15px;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
  text-align:center;
}
.slide p {font-size:18px; margin-bottom:15px;}
.slide h4 {font-weight:bold; color:#ff6b6b;}
.slider-controls {
  text-align:center;
  margin-top:20px;
}
.slider-controls button {
  border:none;
  background:#ff6b6b;
  width:15px;
  height:15px;
  border-radius:50%;
  margin:0 5px;
  cursor:pointer;
  transition:0.3s;
}
.slider-controls button.active {background:#333;}

/* PRICING */
.pricing {
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:center;
}
.pricing-card {
  background:#fff;
  border-radius:15px;
  padding:40px 30px;
  flex:1 1 260px;
  max-width:300px;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
  text-align:center;
  transition:transform 0.3s, box-shadow 0.3s;
}
.pricing-card:hover {transform:translateY(-10px); box-shadow:0 15px 30px rgba(0,0,0,0.15);}
.pricing-card h3 {margin-bottom:15px; font-size:22px;}
.pricing-card p {margin-bottom:20px; color:#555;}
.pricing-card .price {font-size:28px; font-weight:bold; color:#ff6b6b; margin-bottom:20px;}
.pricing-card .btn {background:#ff6b6b; color:#fff; padding:10px 25px; border-radius:5px; font-weight:bold;}
.pricing-card .btn:hover {background:#ff3b3b;}

/* BLOQUE DE MARKETING NUEVO (2 TARJETAS) */
.marketing-block {
  padding: 60px 20px;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
}
.marketing-wrapper {
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.marketing-card {
  display: flex;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  min-height: 200px;
}
.card-image {
  flex: 1;
  max-width: 40%;
  height: 100%;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-content {
  flex: 1.5;
  padding: 30px;
}
.card-dark {
  background-color: #1a252f;
  color: #ffffff;
}
.card-dark h2 {
  font-size: 24px;
  margin-bottom: 15px;
}
.card-light {
  background-color: #ffffff;
  color: #333333;
}
.card-light h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #1a252f;
}
.card-light p {
  font-size: 16px;
  margin-bottom: 20px;
  color: #666;
}
.marketing-card ul {
  list-style: none;
  padding: 0;
}
.marketing-card ul li {
  font-size: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}
.marketing-card ul li::before {
  content: "•";
  margin-right: 10px;
  color: #3182ce;
  font-weight: bold;
}
.btn-contratar {
  display: inline-block;
  margin-top: 15px;
  background-color: #3182ce;
  color: #fff;
  padding: 10px 25px;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s;
}
.btn-contratar:hover {
  background-color: #2c5282;
}
@media (max-width: 768px) {
  .marketing-card {
    flex-direction: column;
  }
  .card-image {
    max-width: 100%;
    width: 100%;
    height: 180px;
  }
  .card-content {
    text-align: center;
  }
  .marketing-card ul li {
    justify-content: center;
  }
}

/* CTA */
.cta {
  background:#ff6b6b;
  color:#fff;
  text-align:center;
  padding:80px 20px;
  border-radius:15px;
  margin:80px 20px;
  position:relative;
  overflow:hidden;
}
.cta h2 {font-size:36px; margin-bottom:30px;}
.cta p {font-size:20px; margin-bottom:40px;}
.cta .btn {background:#fff; color:#ff6b6b; padding:15px 35px; font-size:20px; font-weight:bold;}
.cta .btn:hover {background:#ffe6e6;}

/* FOOTER */
footer {
  background:#0d1b2a;
  color:#fff;
  text-align:center;
  padding:60px 20px;
}
footer a {color:#ff6b6b; transition:0.3s;}
footer a:hover {color:#fff;}

@media(max-width:900px){
  .marketing-container {flex-direction: column; gap: 30px;}
  .marketing-content h2, .marketing-content p, .marketing-content ul {text-align:center;}
}
@media(max-width:768px){
  .features, .pricing {flex-direction:column; align-items:center;}
}

/* BOTÓN CUSTOM */
.btn-custom {
  display: inline-block;
  background-color: #F50505; 
  color: #FFFFFF;            
  padding: 6px 60px;       
  font-size: 20px;           
  font-weight: bold;
  border-radius: 8px;        
  text-align: center;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.btn-custom:hover {
  background-color: #F52727; 
  transform: scale(1.03);    
}