/* ============================================= */
/* ===         TABLA DE CONTENIDOS           === */
/* ============================================= */
/*
    1. Variables Globales y Configuración
    2. Estilos Generales y Tipografía
    3. Estilos de Componentes Reutilizables
       - Barra de Navegación
       - Botones
       - Formularios
    4. Estilos Específicos por Sección
       - Hero Section
       - Beneficios
       - Plantillas
       - Precios
       - Contacto y Footer
    5. Media Queries para Responsividad
    6. Utilidades y Correcciones de Librerías
*/

/* ============================================= */
/* === 1. VARIABLES GLOBALES Y CONFIGURACIÓN === */
/* ============================================= */
/* Define la paleta de colores y variables globales para mantener la consistencia en todo el sitio. */
:root {
    --primary-color: #C59527;
    --primary-color-darker: #ab7f20;
    --secondary-color: #000000;
    --navbar-bg-color: #0F0F0F;
    --text-color-light: #ffffff;
    --text-color-dark: #333333;
    --transition-speed: 0.25s;
}

/* Ajuste global para que el anclaje de las secciones no quede oculto bajo la navbar fija. */
html {
    scroll-padding-top: 70px;
}

/* ============================================= */
/* === 2. ESTILOS GENERALES Y TIPOGRAFÍA     === */
/* ============================================= */
/* Establece la fuente base del sitio y los estilos para los encabezados principales de sección (h2). */
body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-color-dark);
}

h2 {
    font-size: 2.2rem;
    color: var(--secondary-color);
}

/* Línea decorativa dorada que aparece debajo de cada título de sección (h2). */
h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
    margin: 10px auto 40px;
}

/* ============================================= */
/* === 3. ESTILOS DE COMPONENTES REUTILIZABLES === */
/* ============================================= */

/* --- Barra de Navegación --- */
/* Personaliza el fondo, los enlaces y el ícono del menú hamburguesa de la barra de navegación. */
.bg-dark {
    background-color: var(--navbar-bg-color) !important;
}
.navbar-dark .navbar-nav .nav-link {
    color: var(--text-color-light);
    opacity: 0.8;
    transition: opacity var(--transition-speed) ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--primary-color);
    opacity: 1;
}
.navbar-toggler {
    border: 0;
}
.navbar-toggler:focus {
    box-shadow: none;
}
@media (max-width: 991.98px) {
    .navbar-nav { text-align: center; }
}

/* --- Botones --- */
/* Define los estilos para los dos tipos de botones principales del sitio: primario y secundario. */
.btn-primary { 
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--navbar-bg-color);
    font-weight: bold;
    border-radius: 25px;
}
.btn-primary:hover { 
    background-color: var(--primary-color-darker);
    border-color: var(--primary-color-darker);
    color: var(--secondary-color); 
}
.btn-secondary { 
    background-color: var(--secondary-color); 
    color: var(--primary-color); 
    border: 2px solid var(--primary-color); 
    font-weight: bold;
    border-radius: 30px; 
}
.btn-secondary:hover {
    background-color: var(--primary-color); 
    color: var(--secondary-color); 
    border: 2px solid var(--primary-color); 
}
.btn-primary:active, .btn-secondary:active {
    background-color: var(--text-color-dark) !important;
    border-color: var(--text-color-dark) !important;
    color: var(--text-color-light) !important;
}

/* --- Formularios --- */
/* Resalta los campos del formulario con el color primario cuando están activos (en foco). */
.form-control:focus { 
    border-color: var(--primary-color); 
    box-shadow: 0 0 0 0.25rem rgba(197, 149, 39, 0.25); 
}

/* ============================================= */
/* === 4. ESTILOS ESPECÍFICOS POR SECCIÓN    === */
/* ============================================= */

/* --- Hero Section (#inicio) --- */
/* Estilos para la sección principal: imagen de fondo, superposición oscura y altura de pantalla completa. */
.hero-section { 
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/hero-background.webp') no-repeat center center/cover;
    min-height: 100dvh; 
    padding-top: 70px; 
}

/* --- Sección Beneficios (#beneficios) --- */
/* Define la apariencia de las tarjetas de la sección de beneficios, incluyendo íconos y efectos al pasar el mouse. */
#beneficios { 
    background-color: #f9f9f9; 
}
#beneficios .card { 
    transition: transform var(--transition-speed) ease;
    border-radius: 15px;
}
#beneficios .card:hover { 
    transform: translateY(-5px); 
}
#beneficios .card-title { 
    color: var(--primary-color);
}
.benefit-icon { 
    width: 40px; 
    height: 40px; 
}

/* --- Sección Plantillas (#plantillas) --- */
/* Estilos unificados para las tarjetas de plantillas, asegurando proporciones cuadradas y un pie de tarjeta oscuro. */
.template-card, .sub-template-card {
    border-radius: 15px;
    border: 0;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    cursor: pointer;
    text-decoration: none;
}
.template-card:hover, .sub-template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.template-card .card-img-top, .sub-template-card .card-img-top {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.template-card .card-body, .sub-template-card .card-body {
    background-color: var(--navbar-bg-color);
    text-align: center;
}
.template-card .card-title, .sub-template-card .card-title {
    color: var(--text-color-light);
    font-weight: 600;
}

/* --- Sección Precios (#precios) --- */
#precios { 
    background-color: #f0f0f0;
}
#precios .card { 
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    border: 0;
    border-radius: 10px;
}
#precios .card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; 
}
.card-header-content {
    min-height: 90px; /* Estandariza la altura del cabecero de la tarjeta para alinear el contenido. */
}
#precios .card-title {
    margin-top: 20px;
    font-size: 1.6rem;
    font-weight: 700;
}
.package-description {
    font-size: 0.9rem;
    font-style: italic;
    padding: 0 15px;
}
#precios .price-amount {
    font-weight: bold;
    color: var(--primary-color);
}
#precios .list-unstyled {
    text-align: left;
    padding: 0 20px; 
}
#precios .list-unstyled li { 
    border-bottom: 1px dotted #ccc; 
}
#precios .list-unstyled li:last-child { 
    border-bottom: none; 
}
.additional-item {
    font-size: 0.8rem;
    font-style: italic;
    color: #6c757d;
    border-top: 1px dotted #ccc;
    padding: 15px 0 15px 0;
    margin: 0;
}
#pricing-toggle .nav-link {
    color: var(--text-color-dark);
    font-weight: bold;
    background-color: #e2e6ea;
    margin: 0 5px;
    border-radius: 50px;
    transition: all 0.3s ease;
}
#pricing-toggle .nav-link.active {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#pricing-toggle .nav-link:not(.active):hover {
    background-color: #d4d8db;
}

/* --- Footer (#main-footer) --- */
#main-footer { 
    padding-top: 2rem; 
    padding-bottom: 2rem;
}

/* ============================================= */
/* === 5. MEDIA QUERIES PARA RESPONSIVIDAD   === */
/* ============================================= */
/* Ajusta los tamaños de fuente en dispositivos más pequeños para mejorar la legibilidad y la experiencia de usuario. */
@media (max-width: 768px) { 
    .hero-section h1 { font-size: 2.5rem; }
    .hero-section p { font-size: 1.1rem; }
    h2 { font-size: 2rem; }
}
@media (max-width: 480px) {
    .hero-section h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
}

/* ============================================= */
/* === 6. UTILIDADES Y CORRECCIONES          === */
/* ============================================= */
/* Asegura que el campo de teléfono de la librería externa 'IntlTelInput' ocupe el 100% del ancho disponible. */
.iti {
    display: block;
    width: 100%;
}