/* Reset General de Estilos */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #000000; /* Fondo negro profundo del Layout global */
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 0;
}

/* Contenedor Principal (Mantiene la estructura centrada idéntica a la captura) */
.main-container {
    width: 100%;
    max-width: 1000px; /* Ancho estándar de visualización web de la imagen */
    background-color: #0b0b0b; /* Fondo sutilmente grisáceo/oscuro del cuerpo interior */
    min-height: 100vh;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

/* Encabezado / Banner Superior */
.site-header {
    width: 100%;
    line-height: 0; /* Remueve espaciados fantasma debajo de la imagen */
}

.main-banner-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Barra de Navegación */
.nav-bar {
    background: linear-gradient(to bottom, #3a3a3a 0%, #1c1c1c 100%);
    border-top: 1px solid #4a4a4a;
    border-bottom: 1px solid #222222;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 15px;
}

.nav-links li a {
    color: #b3b3b3;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    transition: color 0.2s ease;
}

.nav-links li a:hover,
.nav-links li a.active {
    color: #ffffff;
}

/* Caja de Búsqueda */
.search-box input {
    background-color: #444444;
    border: 1px solid #111111;
    color: #ffffff;
    font-size: 11px;
    padding: 3px 8px 3px 22px;
    border-radius: 2px;
    width: 150px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%23888888" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
    background-repeat: no-repeat;
    background-position: 6px center;
}

.search-box input::placeholder {
    color: #888888;
    font-style: italic;
}

/* Área de Contenido Central */
.content-wrapper {
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Tarjeta Morada Central */
.purple-card {
    background-color: #420b5d; /* Color morado exacto institucional visible en la captura */
    width: 100%;
    max-width: 440px; /* Ancho ajustado a la proporción de la tarjeta en la imagen */
    padding: 30px 25px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* Logotipo Pequeño Circular */
.small-logo-container {
    width: 75px;
    height: 75px;
    margin: 0 auto 15px auto;
    border-radius: 50%;
    border: 1px solid #5a197e;
    background-color: #12011a;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.small-logo {
    width: 90%;
    height: 90%;
    object-fit: contain;
    border-radius: 50%;
}

/* Títulos */
.main-title {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 4px;
    color: #ffffff;
}

.subtitle {
    font-size: 11px;
    color: #ffffff;
    margin-bottom: 20px;
    font-weight: 500;
}

/* Contenedor y Reproductor de Video */
.video-container {
    width: 100%;
    margin-bottom: 25px;
    background-color: #000000;
    line-height: 0;
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #333333;
}

/* Texto de Bienvenida */
.welcome-text {
    font-size: 11px;
    line-height: 1.6;
    color: #ffffff;
    text-align: center;
    margin-bottom: 25px;
    font-weight: normal;
    padding: 0 5px;
}

/* Cita Bíblica */
.bible-verse {
    font-size: 10px;
    font-style: italic;
    color: #ffffff;
    margin-bottom: 25px;
    line-height: 1.4;
    padding: 0 10px;
}

.verse-reference {
    color: #ff3b3b; /* Color rojo exacto para el texto de la cita bibliográfica */
    font-weight: bold;
    font-style: italic;
}

/* Botón de Acción */
.action-button-container {
    margin-top: 10px;
}

.btn-reflexiones {
    display: inline-block;
    background-color: #24162a; /* Fondo ultra oscuro del botón */
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    padding: 10px 24px;
    border-radius: 15px; /* Bordes redondeados píldora */
    border: 1px solid #3d2347;
    transition: background-color 0.2s ease;
}

.btn-reflexiones:hover {
    background-color: #150c18;
}

/* Pie de Página */
.site-footer {
    padding: 30px 0;
    text-align: center;
    font-size: 11px;
    color: #777777;
    line-height: 1.6;
}

.site-footer p {
    margin-bottom: 2px;
}

.design-credit {
    margin-top: 10px;
}

.design-credit strong {
    color: #999999;
}

.highlight-link {
    color: #c84141; /* Color rojo del link del footer */
    text-decoration: none;
}