:root{
  --blanco:#ffffff;
  --azul-marino:#0b2545;
  --rojo-logo:#b5121b;
  --amarillo-logo:#ffc800;
  --gris-claro:#f5f5f5;
  --gris-oscuro:#333333;
  --primary-shadow: rgba(0,0,0,0.1);
}

/* HERO */
.hero-exito{
  background: var(--gris-claro);
  color: var(--azul-marino);
  text-align:center;
  padding: 4rem 2rem;
  border-bottom: 3px solid var(--amarillo-logo);
}
.hero-exito h1{
  margin:0;
  font-size: 2.5rem;
  font-family: 'Aileron', sans-serif;
}

/* CONTENIDO */
.contenido-exito{
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.seccion-exito{
  background: var(--blanco);
  padding: 2rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px var(--primary-shadow);
}

.seccion-exito h2{
  text-align: center;
  margin-top: 0;
  color: var(--azul-marino);
  font-family: 'Aileron', sans-serif;
}

/* SWIPER */
#testimonials{
  padding: 2rem 0;
}

.testimonial-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  height: 100%;
  background: var(--gris-claro);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px var(--primary-shadow);
  text-align:center;
  color: var(--gris-oscuro);
}
.testimonial-card .quote{
  font-style: italic;
  margin-bottom: 1rem;
  color: var(--azul-marino);
}
.testimonial-card .author{
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.testimonial-card .source{
  font-size: 0.85rem;
  color: #777;
}

/* SOCIAL */
.social-section{
  text-align:center;
}
.fb-page, .instagram-media{
  margin: 0 auto;
}

/* CTA */
.cta-final-exito{
  text-align:center;
  margin: 3rem 0;
}
.cta-final-exito .cta-button{
  display:inline-block;
  background: var(--rojo-logo);
  color: var(--blanco);
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 50px;
  box-shadow: 0 4px 8px var(--primary-shadow);
  transition: transform 0.2s, background 0.3s;
}
.cta-final-exito .cta-button:hover{
  background: var(--amarillo-logo);
  color: var(--azul-marino);
  transform: translateY(-3px);
}

/* RESPONSIVE */
@media (max-width: 768px){
  .hero-exito{ padding: 2rem 1rem; }
  .hero-exito h1{ font-size: 2rem; }
  .seccion-exito{ padding: 1.5rem; }
  #testimonials{ padding: 1.5rem 0; }
}
@media (max-width: 480px){
  .hero-exito h1{ font-size: 1.5rem; }
  .seccion-exito{ padding: 1rem; }
  .cta-final-exito .cta-button{ padding: 0.75rem 1.5rem; font-size: 1rem; }
}