/* 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-nav: #1d1d1d;  /* Color de fondo de la navbar */
    --bs-white: #b8b8b8;
    --bs-black: #000000;
    --bs-light-gray: #f5f5f5;
    --vinotinto: #800020; /* Código hexadecimal para un color vinotinto */
    --rojo: #dc3545;      /* Color rojo de Bootstrap */
    --negro: #212529;     /* Negro de Bootstrap */
    --blanco: #ffffff;    /* Blanco */
    --gris-oscuro: #6c757d; /* Gris oscuro para el texto */
}

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 */
}

/* Estilo del título principal */
.text-vinotinto {
    color: var(--vinotinto) !important;
}

.back-vinotinto {
    background: #800020;
}

/* Estilo para el subtítulo y texto descriptivo */
.text-dark-subtle {
    color: var(--gris-oscuro) !important;
}

/* Navbar */
.navbar {
    background-image: linear-gradient(to right, var(--bs-nav), var(--bs-white)) !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-dark,
.navbar-nav .nav-link.text-dark {
    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 {
    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-white); /* Fondo blanco al pasar el ratón */
    color: var(--bs-red); /* Texto rojo al pasar el ratón */
}

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

.custom-register-btn:hover {
    background-color: var(--bs-black); /* Fondo negro al pasar el ratón */
    border-color: var(--bs-black); /* Borde negro al pasar el ratón */
    color: var(--bs-light-gray); /* 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: 500px; /* 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 {
    background-color: var(--bs-white); /* Fondo blanco para el botón */
    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;
}

/* Estilos de las tarjetas */
.card-hover {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.125); /* Borde inicial sutil */
}

/* Efecto de HOVER en las tarjetas */
.card-hover:hover {
    transform: translateY(-5px); /* Eleva la tarjeta 5px */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
    border-color: var(--rojo); /* Cambia el color del borde a rojo */
    cursor: pointer; /* Cambia el cursor para indicar que es interactiva */
}

/* Estilos para el título y el ícono al pasar el mouse sobre la tarjeta */
.card-hover:hover .text-vinotinto {
    color: var(--rojo) !important; /* Cambia el color del título y el ícono a rojo */
}

.card-block {
    position: relative;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border-radius: 12px;
    padding: 40px 20px;
    box-shadow: 0 8px 0 #b3b3b3, 8px 0 0 #c2c2c2;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
    border: 2px solid transparent;
  }

  /* Parte inferior */
  .card-block::before {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 8px;
    background: #b3b3b3;
    border-radius: 0 0 12px 12px;
    transition: all 0.25s ease-in-out;
    z-index: -1;
  }

  /* Lado derecho */
  .card-block::after {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    width: 8px;
    height: 100%;
    background: #c2c2c2;
    border-radius: 0 12px 12px 0;
    transition: all 0.25s ease-in-out;
    z-index: -1;
  }

  /* Estado presionado */
  .card-block.pressed {
    transform: translate(8px, 8px);
    box-shadow: none;
    border: 2px solid red; /* borde rojo al presionar */
  }

  .card-block.pressed::before,
  .card-block.pressed::after {
    opacity: 0;
  }

  .card-block i {
    display: block;
    transition: transform 0.3s ease;
  }

  .card-block:hover i {
    transform: scale(1.15);
  }

/* Estilo inicial de la imagen */
.gallery-img-hover {
    /*
    La propiedad `transition` es clave.
    Aplica una transición suave de 0.3 segundos a las propiedades 'transform' y 'box-shadow'.
    El efecto 'ease-in-out' hace que la animación sea más natural.
    */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Estilo al pasar el mouse (hover) */
.gallery-img-hover:hover {
    /*
    `transform: scale(1.05)` agranda la imagen un 5% (zoom in).
    Esto crea un efecto de resalte.
    */
    transform: scale(1.05);

    /*
    `box-shadow` añade una sombra más pronunciada.
    Esto refuerza el efecto de "levantar" la imagen.
    */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

    /*
    `cursor: pointer` cambia el cursor a una mano,
    indicando al usuario que la imagen es interactiva.
    */
    cursor: pointer;
}

/* 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-black); /* 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;
}

/* 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;
}

/* Ajustar posición de los controles del carrusel */
#articlesCarousel .carousel-control-prev,
#articlesCarousel .carousel-control-next {
    width: 5%; /* más estrechos para que no invadan tanto */
}

#articlesCarousel .carousel-control-prev {
    left: -60px; /* mover hacia afuera */
}

#articlesCarousel .carousel-control-next {
    right: -60px; /* mover hacia afuera */
}