:root {
/* GEENRAL */
--c-tudor-red: #be0100;
--c-white: #ffffff;
--c-black: #000000;
--c-transparent: transparent;
}


/* COLORES */
.c-tudor-red-text { color: var(--c-tudor-red); }
.c-white-text { color: var(--c-white); }
.c-black-text { color: var(--c-black); }
.c-tudor-red-bg { background-color: var(--c-tudor-red); }
.c-white-bg { background-color: var(--c-white); }
.c-black-bg { background-color: var(--c-black); }


/* BUTONS -tud */
.btn-primary-tud { background: var(--c-tudor-red); color: var(--c-white); font-size: 14px; font-weight: 700; line-height: 1.6; padding: 12px 30px; border-radius: 200px; border: 0px solid transparent; text-decoration: none; }
.btn-primary-tud:hover,
.btn-primary-tud:focus,
.btn-primary-tud:active { background: var(--c-tudor-red); color: var(--c-white); }
.btn-primary-icon-tud { background: var(--c-green); color: var(--c-white) !important; font-size: 14px; font-weight: 700; line-height: 1.6; padding: 12px 30px; border-radius: 200px; border: 0px solid transparent; text-decoration: none; }
.btn-primary-icon-tud:hover,
.btn-primary-icon-tud:focus,
.btn-primary-icon-tud:active { background: var(--c-tudor-red); }
.btn-primary-icon-tud svg { margin-left: 8px; }
.btn-label-icon-tud { color: var(--c-tudor-red); font-size: 14px; font-weight: 700; line-height: 1.6; text-decoration: none; }
.btn-label-icon-tud:hover,
.btn-label-icon-tud:focus,
.btn-label-icon-tud:active { color: #212121; }
.btn-label-icon-tud svg path { fill: var(--c-tudor-red); }
.btn-label-icon-tud:hover svg path { fill: #212121; }
.btn-label-icon-tud svg { margin-left: 6px; }
.btn-primary-tud-outline { background: var(--c-transparent); color: var(--c-tudor-red); font-size: 14px; font-weight: 700; line-height: 1.6; padding: 12px 30px; border-radius: 200px; border: 2px solid var(--c-tudor-red);  text-decoration: none; }
.btn-primary-tud-outline:hover,
.btn-primary-tud-outline:focus,
.btn-primary-tud-outline:active { background: var(--c-tudor-red); color: var(--c-white); }

/* BANNERS */

.hero-parallax-image { height: 650px;  width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; }
.hero-parallax-image.relojes { background-image: url('https://casabanchero.com/tudor/img-tud/Tudor-Watches-Banner.webp'); }
.hero-parallax-image.beckham{ background-image: url('https://casabanchero.com/tudor/img-tud/Ambassador-fullwidth-banner-beckham.webp'); }
.hero-parallax-image.abouttudor { background-image: url('https://casabanchero.com/tudor/img-tud/About-Tudor-Banner.webp'); }

/* 1. Estilos para los botones custom */
.swiper-button-prev-custom,
.swiper-button-next-custom {
    /* Puedes usar un ícono o un símbolo como flecha */
    font-size: 30px;
    color: #333; /* Cambia el color si lo deseas */
    padding: 10px;
    transition: color 0.3s;
}

.swiper-button-prev-custom:hover,
.swiper-button-next-custom:hover {
    color: #007aff; /* Color de hover */
}

/* 2. Opcional: Define los íconos (puedes usar Font Awesome o símbolos) */
.swiper-button-prev-custom::after {
    content: '❮'; /* Símbolo de flecha izquierda */
}

.swiper-button-next-custom::after {
    content: '❯'; /* Símbolo de flecha derecha */
}

/* 3. Opcional: Asegúrate de que los botones originales de Swiper estén ocultos si no los borraste del HTML */
.swiper-button-next,
.swiper-button-prev {
    display: none !important;
}

@media only screen and (max-width: 767px) {
	.hero-parallax-image { height: 240px; background-attachment: unset; background-size: contain; }
}

/* Responsive TABLET */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.hero-parallax-image { height: 460px; }
}	

/* Responsive dDESKTOP */
@media only screen and (min-width: 1025px) {
	
}