/* =================================================================
   VIVAO - Hoja de Estilos Principal (Versión con Paleta de Marca)
   ================================================================= */

/* -----------------------------------------------------------------
   1. Globales y Variables de Color
   ----------------------------------------------------------------- */
:root {
  --azul-confianza: #2563EB;
  --amarillo-accion: #F2C107;
  --azul-noche: #1E293B;      /* Para texto */
  --gris-suave: #F1F5F9;      /* Para fondos de sección */
  --blanco-claridad: #FFFFFF;
}

body {
  font-family: 'Poppins', sans-serif;
  color: var(--azul-noche); /* CORRECTO: Usar Azul Noche para texto */
  background-color: var(--blanco-claridad);
  margin: 0;
  padding-top: 80px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--azul-confianza); /* CORRECTO: Títulos con el azul principal */
}

/* -----------------------------------------------------------------
   2. Botones y Elementos de Formulario
   ----------------------------------------------------------------- */
.btn-primary {
  background-color: var(--amarillo-accion); /* CORRECTO: Amarillo para acción */
  color: var(--azul-noche); /* Texto oscuro para máximo contraste */
  padding: 1rem 2rem;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-block;
}

.btn-primary:hover {
  background-color: #d8ae06; /* Un amarillo ligeramente más oscuro para el hover */
  color: var(--azul-noche);
  transform: translateY(-2px);
}

/* -----------------------------------------------------------------
   3. Secciones y Componentes Reutilizables
   ----------------------------------------------------------------- */
.section {
    padding: 4rem 2rem;
}

.section-light {
    background-color: var(--gris-suave); /* CORRECTO: Usar Gris Suave para fondos */
}

.card {
  background-color: var(--blanco-claridad);
  border: 1px solid #e2e8f0; /* Un borde sutil para definir mejor las tarjetas */
  box-shadow: 0 4px 15px rgba(30, 41, 59, 0.05); /* Sombra con el color del texto */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 12px;
  height: 100%;
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: 0 8px 25px rgba(30, 41, 59, 0.1);
}

footer {
  background-color: var(--azul-noche); /* CORRECTO: Footer con el azul oscuro */
  color: var(--blanco-claridad);
  padding: 2rem 1rem;
  text-align: center;
}
footer p {
    color: var(--gris-suave); /* Texto del footer más suave */
}

/* -----------------------------------------------------------------
   4. Estilos de Héroe y Testimonios
   ----------------------------------------------------------------- */
.hero-video-section {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    color: var(--blanco-claridad);
    text-align: center;
    background-color: var(--azul-confianza); /* Fallback si la imagen no carga */
    background-image: url('URL_DE_TU_IMAGEN_AQUI');
    background-size: cover;
    background-position: center center;
}
.hero-video-section::after { 
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, rgba(37, 99, 235, 0.85), rgba(30, 41, 59, 0.85)); /* Degradado sutil */
    z-index: 1;
}
.hero-video-section .container {
    position: relative;
    z-index: 2;
}
.hero-video-section h1, .hero-video-section p {
    color: var(--blanco-claridad);
}

.testimonial-card {
    background-color: var(--gris-suave);
    padding: 2rem;
    border-radius: 10px;
    border-left: 5px solid var(--amarillo-accion); /* Acento amarillo */
}
.testimonial-card blockquote {
    font-style: italic;
    color: var(--azul-noche);
}
.testimonial-card footer {
    background: none;
    padding: 0;
    margin-top: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--azul-confianza);
}