/* Variables CSS para facilitar la gestión de colores si necesitas override */
:root {
    --bs-red: #FF0000; /* Re-definiendo el rojo de Bootstrap si quisieras uno específico */
    --bs-vino: #800020;
    --bs-nav: #1d1d1d;  /* Color de fondo de la navbar */
    --bs-white: #FFFFFF;
    --bs-black: #000000;
    --bs-light-gray: #f5f5f5;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bs-light-gray); /* Usamos la variable para el fondo */
    color: var(--bs-black);
    /* AJUSTE CLAVE: Empuja el contenido del body hacia abajo para dejar espacio a la navbar fija */
    padding-top: 130px; /* Incrementado para dar más espacio a la navbar */
}

/* Navbar */
.navbar {
    background-image: linear-gradient(to right, var(--bs-white), var(--bs-red), var(--bs-vino)) !important;
    transition: background-color 0.3s ease;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    width: 100%;
}

/* Estilo para el logo y enlaces de navegación en blanco */
.navbar-brand .text-white,
.navbar-nav .nav-link.text-white {
    color: #ffffff !important; /* Texto blanco para la navbar */
}

/* Fuente específica para el texto del logo */
.navbar-brand .fw-bold {
    font-family: 'IBM Plex Serif', serif; /* Mantener fuente para el logo */
}

/* Icono del toggler (hamburguesa) en blanco */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Estilos para el menú desplegable */
.navbar .dropdown-menu {
    background-color: #f8f9fa; /* Fondo claro para el dropdown */
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.navbar .dropdown-item {
    color: #343a40; /* Color de texto oscuro para los ítems */
}

.navbar .dropdown-item:hover {
    background-color: #1d1d1d; /* Fondo ligeramente gris al pasar el ratón */
    color: #007bff; /* Color azul para el texto al pasar el ratón */
}

/* Dropdown personalizado */
.dropdown-menu {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease-in-out;
    min-width: 220px;
    z-index: 1000;
}

.dropdown-item {
    color: #212529 !important;
    padding: 10px 20px;
    font-weight: 500;
    transition: background 0.3s ease;
}

.dropdown-item:hover {
    background: #e63946;
    color: #fff !important;
}

.dropdown-divider {
    border-top: 1px solid #dee2e6;
    margin: 5px 0;
}

/* Mostrar dropdown al hacer hover */
.dropdown.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: block;
}

/* Estilos para el texto del menú centrado y con fuente serif */
.serif-title .nav-link {
    font-family: 'IBM Plex Serif', serif;
}

/* Estilos para los botones de Iniciar Sesión y Regístrate */
.custom-login-btn {
    background-color: var(--bs-white);
    border-color: var(--bs-black); /* Borde blanco */
    color: var(--bs-black); /* Texto blanco */
    transition: all 0.3s ease;
    font-weight: bold;
}

.custom-login-btn:hover {
    background-color: var(--bs-vino); /* Fondo blanco al pasar el ratón */
    color: var(--bs-white); /* Texto rojo al pasar el ratón */
}

.custom-register-btn {
    background-color: var(--bs-black); /* Fondo rojo */
    border-color: var(--bs-white); /* Borde rojo */
    color: var(--bs-white); /* Texto blanco */
    transition: all 0.3s ease;
    font-weight: bold;
}

.custom-register-btn:hover {
    background-color: var(--bs-red); /* Fondo negro al pasar el ratón */
    border-color: var(--bs-white); /* Borde negro al pasar el ratón */
    color: var(--bs-white); /* Texto blanco */
}

/* Estilos personalizados para las formas abstractas y placeholders */
.hero-section {
    position: relative;
    overflow: hidden; /* Asegura que las formas no se salgan */
    /* AJUSTE CLAVE: Compensa el padding-top del body y ajusta el padding de la sección hero */
    margin-top: -90px; /* Negativo del padding-top del body para que el color de fondo suba */
    padding-top: calc(90px + 50px); /* El padding-top de la navbar + el padding original de la hero */
}

.abstract-shape-1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 30%; /* Ajusta el tamaño según sea necesario */
    height: 100%;
    background-color: rgba(0,0,0,0.1); /* Negro semitransparente para la forma */
    clip-path: polygon(75% 0%, 100% 0%, 100% 100%, 50% 100%); /* Ejemplo de forma poligonal */
    z-index: 0;
}

.abstract-shape-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 25%;
    height: 70%;
    background-color: rgba(0,0,0,0.1);
    clip-path: polygon(0% 0%, 25% 0%, 50% 100%, 0% 100%);
    z-index: 0;
}

.image-placeholder-custom {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GOoJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAB+SURBVEhL7ZExEQAQCEOtE/mnyrTj2R3YxMIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIszLIc/w6d42zCAyF5AAAAAElFTkSuQmCC');
    background-size: 10px 10px;
    border: 1px solid var(--bs-white);
    overflow: hidden;
    z-index: 1;
    height: 250px; /* Altura fija para el placeholder grande */
    display: flex; /* Para centrar si es necesario */
    justify-content: center;
    align-items: center;
}

.image-placeholder-custom.small {
    height: 200px; /* Altura fija para el placeholder pequeño */
}

.image-placeholder-custom img {
    width: 100%; /* Asegura que la imagen intente ocupar todo el ancho del contenedor */
    height: 100%; /* Asegura que la imagen intente ocupar toda la altura del contenedor */
    object-fit: cover; /* **Clave:** Cubre el contenedor, recortando si es necesario, sin deformar */
}

/* Estilos para las tarjetas de servicios */
.content-blocks-section .card {
    transition: all 0.3s ease-in-out; /* Transición suave para todos los cambios */
    cursor: pointer; /* Indica que es interactuable */
}

/* Efecto general del botón de la tarjeta al hacer hover sobre la tarjeta */
.content-blocks-section .card:hover .btn {
    color: var(--bs-red); /* Texto rojo para el botón */
    border-color: var(--bs-white); /* Borde blanco para el botón */
}

/* Definir los colores de hover para cada tarjeta */

/* Tarjeta 1: Social Media - Degradado de 3 colores al hover */
.card-hover-1:hover {
    /* Ejemplo: Azul claro -> Azul medio -> Azul oscuro */
    background: linear-gradient(90deg, #1d1d1d, #e63946, #1d1d1d) !important;
    transform: translateY(-5px);
}

/* Tarjeta 2: Campañas Publicitarias - Degradado de 3 colores al hover */
.card-hover-2:hover {
    /* Ejemplo: Verde claro -> Verde medio -> Verde oscuro */
    background: linear-gradient(90deg, #1d1d1d, #e63946, #1d1d1d) !important;
    transform: translateY(-5px);
}

/* Tarjeta 3: Diseño de páginas web - Degradado de 3 colores al hover */
.card-hover-3:hover {
    /* Ejemplo: Morado claro -> Morado medio -> Morado oscuro */
    background: linear-gradient(90deg, #1d1d1d, #e63946, #1d1d1d) !important;
    transform: translateY(-5px);
}

/* Ajustes de tipografía para h3 en las cards */
.card-body h3 {
    font-size: 1.8em;
    font-weight: 700;
}

/* Sección de Marketing Digital: Contenedor principal de la imagen */
.marketing-digital-image-placeholder {
    width: 100%;
    height: 100%;
    /* Display flex centrará el texto MKT si no hay íconos absolutos,
    pero los íconos absolutos no son afectados por esto. */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido (MKT text) verticalmente */
    align-items: center;   /* Centra el contenido (MKT text) horizontalmente */

    /* Degradado de fondo más claro y coherente con el rojo de Bootstrap */
    color: var(--bs-white); /* Color del texto y elementos principales */
    position: relative; /* Esencial para posicionar los íconos hijos absolutamente */
    overflow: hidden; /* Asegura que ningún elemento se desborde del contenedor */
    padding: 1rem; /* Espacio interno para el contenido */
    padding-bottom: 2rem; /* Espacio adicional en la parte inferior para evitar que el texto se superponga con los íconos */
    box-sizing: border-box; /* Asegura que el padding se incluya en el ancho/alto total */
}

.degrade {
    background: linear-gradient(45deg, #e63946, #000000);
}

/* Estilos para el texto "MKT" */
.mkt-text {
    font-family: 'Great Vibes', cursive;
    font-size: 5.0em; /* Ligeramente más grande para mayor impacto */
    font-weight: bold;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada para mayor profundidad */
    z-index: 2; /* Asegura que esté por encima de los iconos */
    letter-spacing: 0.05em; /* Espaciado entre letras para mejor legibilidad en tamaño grande */
    color: #e63946;
    padding: 0.5rem 1rem;
    border-radius: 10px;
}

.slogan-text {
    font-family: 'Dancing Script', cursive !important;
    font-size: 3.0em; /* Ligeramente más grande para mayor impacto */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada para mayor profundidad */
    z-index: 2; /* Asegura que esté por encima de los iconos */
    letter-spacing: 0.05em; /* Espaciado entre letras para mejor legibilidad en tamaño grande */
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 10px;
}

/* Estilos base para todos los contenedores de íconos */
.icon-container {
    position: absolute; /* Permite posicionar libremente los iconos */
    font-size: 2.8em; /* Tamaño base para los iconos, ajustado ligeramente */
    opacity: 0.7; /* Ligeramente más visible que 0.6 */
    z-index: 1; /* Detrás del texto "MKT" */
    filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.3)); /* Sombra más suave para los iconos */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Transición para posibles efectos de hover futuros */

    /* Animación de flotación: aplicada a todos los íconos aquí */
    animation: floatEffect 4s ease-in-out infinite;
}

/* Posiciones y colores específicos para cada icono */

/* Icono de Facebook */
.icon-face {
    top: 10%; /* Posición desde arriba */
    left: 10%; /* Posición desde la izquierda */
    color: #3b5998; /* Color azul de Facebook */
    animation-delay: 0s; /* Sin retraso inicial */
}

/* Icono de LinkedIn */
.icon-linkedin {
    bottom: 15%; /* Posición desde abajo */
    right: 12%; /* Posición desde la derecha */
    color: #0A66C2; /* Color azul de LinkedIn */
    animation-delay: 0.7s; /* Retraso para que flote de forma asíncrona */
}

/* Icono de Instagram */
.icon-insta {
    bottom: 12%; /* Posición desde abajo */
    left: 12%; /* Posición desde la izquierda */
    color: #E1306C; /* Un tono vibrante de rosa/morado de Instagram */
    animation-delay: 1.4s; /* Retraso para que flote de forma asíncrona */
}

/* Icono de X (Twitter) */
.icon-x {
    top: 20%; /* Posición desde arriba */
    right: 10%; /* Posición desde la derecha */
    color: #000000; /* Negro para X */
    animation-delay: 2.1s; /* Retraso para que flote de forma asíncrona */
}

/* Definición de la animación de flotación */
@keyframes floatEffect {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); } /* Ligeramente más de movimiento */
}

/* Ajustes para la versión pequeña (col-md-4) del contenedor */
.image-placeholder-custom.small .marketing-digital-image-placeholder .mkt-text {
    font-size: 2.8em; /* Ajuste para que el texto sea más pequeño en la versión reducida */
}
.image-placeholder-custom.small .marketing-digital-image-placeholder .icon-container {
    font-size: 2em; /* Ajuste para que los íconos sean más pequeños en la versión reducida */
}

.image-placeholder-custom video:hover {
    transform: scale(1.03);
    transition: transform 0.5s ease-in-out;
}

#particles-js {
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    background-color: #1d1d1d; /* Fondo oscuro */
    z-index: -1; /* Detrás de todo */
    overflow: hidden;
}

:root {
    --bs-primary: #800020; 
    --bs-gray-800: #343a40; /* Usamos un gris oscuro para texto en fondo claro */
}

.bg-vinotinto {
    background-color: var(--bs-vino);
}

/* 1. Ajuste del Contenedor */
.page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 50px; 
    border-radius: 12px;
}

/* 2. Estilos para el contenedor Swiper */
.swiper {
    width: 100%;
    /* Aumentamos el padding inferior para separar la paginación */
    padding: 35px 60px 80px 60px !important; /* Incrementado a 80px */
    position: relative !important; 
}

/* 3. Estilos de las Tarjetas (Se mantiene la lógica de realce) */
.swiper-slide {
    display: flex !important; 
    justify-content: center; 
    align-items: stretch; 
}

.swiper-slide .card {
    transition: all 0.3s ease; 
    transform: scale(0.95); 
    filter: brightness(0.9); 
    border: none !important; 
    width: 100%; 
    max-width: 350px; 
    border-radius: 12px;
    overflow: hidden;
}

/* CLAVE: Estilo para la tarjeta activa (la del centro, ya que usamos centeredSlides: true) */
.swiper-slide-active .card {
    transform: scale(1.05); /* Se agranda para el centrado */
    filter: brightness(1); 
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25) !important;
}

/* El paquete popular siempre se realza más (el Profesional) */
.swiper-slide.package-popular .card {
        border: 2px solid var(--bs-primary) !important;
}

/* 4. Estilos de FLECHAS: Más grandes, blancas y con sombra */
.swiper-button-next,
.swiper-button-prev {
    color: var(--bs-primary); /* Color primario para el icono */
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 50%;
    width: 50px; /* Aumentado */
    height: 50px; /* Aumentado */
    top: 50%; 
    transform: translateY(-50%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Sombra suave */
    transition: all 0.3s ease;
    margin-top: 0; 
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: var(--bs-primary); /* Fondo primario al pasar el mouse */
    color: white; /* Icono blanco */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* Posicionamiento de flechas con respecto al padding del .swiper */
.swiper-button-prev { left: 0; }
.swiper-button-next { right: 0; }

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1rem !important; /* Icono más pequeño dentro del círculo grande */
    font-weight: bold;
}

/* 5. Estilos de PAGINACIÓN (Puntos) */
.swiper-pagination {
    bottom: 20px !important; /* Separación del fondo del contenedor */
}

.swiper-pagination-bullet {
    width: 10px; /* Tamaño del punto */
    height: 10px;
    background: #adb5bd; /* Gris claro para inactivo */
    opacity: 1; /* Asegura que se vea bien */
    margin: 0 6px !important; /* Espacio entre puntos */
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: var(--bs-primary); /* Color primario para el activo */
    width: 12px; /* Ligeramente más grande el activo */
    height: 12px;
}