:root {
  --color-web-primario: #1b2845;
  --color-web-secundario: #d1e8ff;
  --color-web-acento: #0d6efd;
  --color-web-destacado: #f0f8ff;
  --color-web-claro: #e3f2fd;
  --color-web-verde: #d0ebff;
  --color-web-texto: #1c1c1c;
  --color-icono-web: #0d6efd;
}


body {
  font-family: var(--fuente-principal);
  color: var(--color-web-texto);
}

/* Intro */
.web-intro {
  background-color: var(--color-web-secundario);
  padding: 60px 0;
}

.web-intro .section-title {
  color: var(--color-web-primario);
  font-weight: bold;
}

.web-intro p {
  font-size: 1.15rem;
}

/* Características */
.web-caracteristicas {
  background-color: var(--color-web-claro);
}

.web-caracteristicas .section-title {
  color: var(--color-web-primario);
  margin-bottom: 1.5rem;
}

.web-caracteristicas i {
  font-size: 2.4rem;
  color: var(--color-icono-web);
}

.web-caracteristicas h5 {
  font-weight: 600;
  color: var(--color-web-primario);
  margin-top: 0.5rem;
}

.web-caracteristicas p {
  color: var(--color-web-texto);
}

/* Beneficios */
.web-beneficios {
  background-color: var(--color-web-verde);
}

.web-beneficios .section-title {
  color: var(--color-web-primario);
  margin-bottom: 1.5rem;
}

.web-beneficios ul {
  list-style: none;
  padding-left: 0;
}

.web-beneficios ul li {
  margin-bottom: 1rem;
  font-size: 1rem;
  position: relative;
  padding-left: 1.5rem;
}

.web-beneficios ul li i {
  position: absolute;
  left: 0;
  color: var(--color-icono-web);
  font-size: 1.1rem;
}

.web-beneficios img {
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

/* CTA */
.web-cta {
  background-color: var(--color-web-destacado);
  padding: 60px 0;
}

.web-cta h2 {
  font-size: 2rem;
  color: var(--color-web-primario);
  font-weight: bold;
  margin-bottom: 1rem;
}

.web-cta p {
  font-size: 1.1rem;
  color: var(--color-web-texto);
}

.web-cta .btn {
  background-color: var(--color-web-primario);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  transition: background-color 0.3s ease;
}

.web-cta .btn:hover {
  background-color: var(--color-icono-web);
}
/* Hero con fondo e overlay */
.web-hero {
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.1)), url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExM2piNXJrejQxempiYXN1bmdrZHN0YWk4anF1bDRibXNwNnpwaHg1cyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/26tn33aiTi1jkl6H6/giphy.gif');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 100px 0;
  min-height: 60vh;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* CTA con overlay */
.web-cta {
  position: relative;
  background-color: #3d3333;
  background-image: url('https://images.unsplash.com/photo-1605902711622-cfb43c4437d4?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center;
  padding: 80px 0;
  color: white;
}

.web-cta-overlay {
  background: rgba(255, 255, 255, 0.6);
  padding: 60px 0;
}