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

/* 1. Estilo General de la Sección */
.process-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* 2. Contenedor de la Imagen/Ilustración */
.process-img-container {
    /* Eliminamos el border-radius para que la imagen se vea completa */
    width: 150px;   /* Un tamaño fijo para el contenedor */
    height: 150px;  /* Asegura un espacio adecuado para la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem !important;
    margin-left: auto; /* Para centrar el contenedor si no ocupa el 100% del ancho */
    margin-right: auto;
}

.process-img {
    max-width: 100%; /* La imagen se ajusta al tamaño máximo del contenedor */
    max-height: 100%; /* La imagen se ajusta al tamaño máximo del contenedor */
    object-fit: contain; /* Asegura que la imagen se vea completa sin recortarse */
    border-radius: 8px; /* Opcional: un ligero borde redondeado para la imagen */
}

/* 3. Estilo de las Tarjetas (Pasos) */
.process-step-card {
    border-top: 5px solid transparent; /* Bordes invisibles por defecto */
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden; /* Para contener los pseudoelementos */
}

/* Efecto de 'Hover' */
.process-step-card:hover {
    border-top-color: var(--vinotinto); /* Resalta el paso al pasar el ratón */
    transform: translateY(-5px); /* Un sutil levantamiento */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* 4. Número de Paso (Con un toque de diseño) */
.step-number {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 3rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.05); /* Muy transparente para ser un fondo visual */
    line-height: 1;
    z-index: 1;
    transition: color 0.3s ease-in-out;
}

/* Resalta el número al hacer hover */
.process-step-card:hover .step-number {
    color: rgba(var(--vinotinto), 0.1);
}


/* 5. Conectores Visuales (Solo en escritorio) */
/* Estos añaden líneas entre los pasos para un flujo visual */
@media (min-width: 768px) {
    .process-flow-container {
        position: relative;
    }

    /* Línea conectora base */
    .process-flow-container::before {
        content: '';
        position: absolute;
        top: 25%; /* Ajusta la posición vertical de la línea */
        left: 10%;
        right: 10%;
        height: 2px;
        background-color: #dee2e6; /* Gris claro */
        z-index: 0;
    }
    
    /* Pequeños puntos de conexión */
    .col-md-4:not(:last-child)::after {
        content: '\2022'; /* Símbolo de punto o puedes usar una imagen */
        position: absolute;
        top: 25%;
        right: 0;
        transform: translate(50%, -50%);
        font-size: 2rem;
        color: var(--vinotinto);
        background-color: #f8f9fa; /* Mismo color de fondo de la sección para 'romper' la línea */
        padding: 0 5px;
        z-index: 2;
    }
}

/* Nuevos estilos para la sección Zig-Zag */

.future-zigzag-section {
    padding-top: 7rem;
    padding-bottom: 7rem;
    /* back-vinotinto debe estar definido con tu color de fondo principal */
}

/* Espaciado entre los bloques de contenido */
.future-item {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
}

/* Etiqueta descriptiva sobre el título */
.feature-tag {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 50px;
    
    /* Colores que contrastan: Fondo blanco/claro y texto vinotinto */
    background-color: #ffffff; 
    color: var(--vinotinto); /* Asegúrate de que esta variable esté definida */
}

/* Títulos */
.future-item h3 {
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

/* Texto de párrafo */
.future-item p {
    line-height: 1.7;
    margin-bottom: 0;
}

/* Ajuste para que las imágenes se vean un poco elevadas */
.future-item img {
    max-height: 400px; /* Limita la altura de la imagen en escritorios */
    object-fit: cover;
    width: 100%;
    /* Opcional: una sombra más fuerte */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important; 
}

/* Estilos específicos del Portafolio */

.portfolio-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.portfolio-item {
    position: relative;
    cursor: pointer;
    line-height: 0; /* Corrige el espacio inferior de las imágenes */
}

/* Imagen y Efecto de Zoom */
.portfolio-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

/* Superposición (Overlay) */
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75); /* Fondo oscuro transparente */
    color: #fff;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end; /* Alinea el contenido abajo */
    padding: 1.5rem;
    text-align: left;
}

/* Contenido dentro del Overlay */
.overlay-content {
    /* Utiliza flexbox o grid para alinear el contenido */
    width: 100%;
}

/* Etiqueta del Proyecto */
.project-tag {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--vinotinto); /* Color de acento */
    background-color: #ffffff;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    width: fit-content;
}

/* Título del Proyecto */
.portfolio-overlay h4 {
    font-size: 1.4rem;
    line-height: 1.2;
}

/* Efecto al Pasar el Ratón (Hover) */
.portfolio-item:hover .portfolio-img {
    transform: scale(1.05); /* Ligerísimo zoom */
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1; /* Muestra el overlay */
}

/* Estilo para el botón CTA */
.portfolio-cta {
    border-color: #ffffff !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease;
}

.portfolio-cta:hover {
    background-color: var(--vinotinto); /* Utiliza tu color principal al hacer hover */
    color: #ffffff !important;
    border-color: var(--vinotinto) !important;
}

/* Estilos para el CTA Final */

/* 1. Contenedor de la Sección */
.cta-final-section {
    padding-top: 6rem; /* Más espacio en la parte superior */
    padding-bottom: 6rem; /* Más espacio en la parte inferior */
    /* back-vinotinto y text-white ya están definidos en tu HTML */
    /* Asegúrate de que back-vinotinto tenga un color oscuro */
}

/* 2. Subtítulo */
.cta-subtitle {
    max-width: 800px; /* Limita el ancho del texto para mejor lectura */
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9; /* Hace el texto un poco menos brillante que el título */
    line-height: 1.4;
}

/* 3. Botón Principal (El más importante) */
.btn-cta-main {
    /* Usar un color que contraste con el fondo vinotinto */
    background-color: #ffffff; 
    color: var(--vinotinto); /* El texto del botón debe ser tu color principal */
    border: none;
    padding: 0.8rem 2.5rem; /* Ajuste del tamaño */
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

/* Efecto Hover del Botón */
.btn-cta-main:hover {
    background-color: var(--negro); /* Una variante más clara del color principal para el hover */
    color: var(--blanco);
    transform: translateY(-2px); /* Un sutil levantamiento */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

/* Efecto de degradado vinotinto a blanco en la parte inferior de una sección */
.vinotinto-to-white-fade {
    /* El degradado se coloca en la parte superior del elemento */
    position: relative; /* Necesario para posicionar el pseudoelemento */
    z-index: 1; /* Asegura que el contenido quede por encima */
}

.vinotinto-to-white-fade::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Altura del difuminado, puedes ajustar */
    z-index: 10; /* Debe estar encima de todo el contenido */

    /* Degradado de abajo hacia arriba: De vinotinto (sólido) a transparente (que se funde con el blanco) */
    background: linear-gradient(
        to bottom, 
        var(--vinotinto) 0%, /* Vinotinto en la parte superior del difuminado */
        rgba(255, 255, 255, 0) 100% /* Transparente total al final */
    );
}

/* De blanco a vinotinto parte superior */
.white-to-vinotinto-fade {
    /* El difuminado se coloca en la parte inferior del elemento */
    position: relative; 
    z-index: 1;
    /* Necesitas que la sección blanca tenga un fondo blanco explícito si no lo tiene */
    background-color: #ffffff; 
}

.white-to-vinotinto-fade::after { /* Usamos ::after para el fondo inferior */
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Altura del difuminado, puedes ajustar */
    z-index: 10;

    /* Degradado de abajo hacia arriba: De transparente (abajo) a vinotinto (arriba del difuminado) */
    background: linear-gradient(
        to top, 
        var(--vinotinto) 0%, /* Vinotinto sólido en la parte inferior */
        rgba(255, 255, 255, 0) 100% /* Transparente total en la parte superior */
    );
}


/* De vinotinto a Gris parte inferior */
.vinotinto-to-gray-fade {
    /* El degradado se coloca en la parte superior del elemento */
    position: relative; /* Necesario para posicionar el pseudoelemento */
    z-index: 1; /* Asegura que el contenido quede por encima */
}

.vinotinto-to-gray-fade::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Altura del difuminado, puedes ajustar */
    z-index: 10; /* Debe estar encima de todo el contenido */

    /* Degradado de abajo hacia arriba: De vinotinto (sólido) a transparente (que se funde con el blanco) */
    background: linear-gradient(
        to bottom, 
        var(--vinotinto) 0%, 
        #212529 100% 
    );
}