/* Importar fuentes desde Google Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Lato:wght@400;700&family=Montserrat:wght@400;700&family=Merriweather:wght@400;700&display=swap');

/* ============================
   Estilos globales
   ============================ */
   body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(to bottom, #FFFFFF, #F0F0F0);
    padding: 0 !important;
    color: #333333;
}
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Montserrat', sans-serif;
    }
  .button {
    font-family: 'Lato', sans-serif;
  }
  p {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
  }

/* Buscador de productos */
header div.container div.row.text-center form {
    margin-top: 5px;
}
header div.container div.row.text-center form button {
    background: linear-gradient(to top, #003366, #0055aa);
    border: none;
    color: #fff;
    margin-bottom: 5px;
    padding: 5px 30px;
    border-radius: 5px;
    transition: background 0.3s ease; /* Asegura que la transición se aplique al cambio de fondo */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra ligera */
    border: 1px solid #0055aa; /* Borde delgado */
}

header div.container div.row.text-center form button:hover {
    background: linear-gradient(to bottom, #003366, #0055aa); /* Cambio de gradiente al pasar el mouse */
    transform: translateY(-1px); /* Levantar el botón al pasar el mouse */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}
header div.container div.row.text-center form button:active {
    transform: scale(0.95); /* Reducir ligeramente el tamaño al hacer clic */
    box-shadow: none; /* Quitar sombra al hacer clic */
}

/* ============================
   Navegación
   ============================ */
.navbar-nav.justify-content-end.flex-grow-1.pe-3 {
    background: linear-gradient(to right, #003366, #0055aa);
}
header nav.navbar.navbar-expand-md {
    background: linear-gradient(to right, #003366 19%, #0055aa) !important;
    font-family: 'Open Sans', sans-serif;
    /*text-transform: uppercase;*/
}
header nav.navbar.navbar-expand-md li.nav-item:hover {
    background: linear-gradient(to bottom, #FFCC00, #FFA500);
}
ul.dropdown-menu.dropdown-menu-nav-principal {
    background: linear-gradient(to right, #003366, #0055aa);
    /*box-shadow: 6px 6px 4px 2px #FFCC00;*/
}
ul.dropdown-menu.dropdown-menu-nav-principal li a {
    color: #fff;
}
ul.dropdown-menu.dropdown-menu-nav-principal li a.dropdown-item:hover {
    background-color: #FFCC00;
}

/* ============================
   Offcanvas
   ============================ */
div.offcanvas-header {
    background: linear-gradient(to right, #003366, #0055aa);
}
div.offcanvas-body {
    background: linear-gradient(to right, #003366, #0055aa);
}

form.d-flex#Carrito-cantidad button {
	border: 1px solid #fff;
	color: #fff;
}

form.d-flex#Carrito-cantidad span {
		background-color: #fff;
		color: #000;
}







/* ============================
   Contenido principal
   ============================ */
div.container.index article h4 {
    margin-top: 2rem;
    text-align: center;
    font-weight: 700;
    font-size: 30px;
}
div.row.productos-destacados {
    margin-bottom: 3rem;
    text-align: center;
}
div.row.productos-destacados div.col-lg-4 a {
    background: linear-gradient(to bottom, #FFCC00, #FFA500);
}
div.row.productos-destacados div.col-lg-4 a:hover {
    background: linear-gradient(to bottom, #FFA500, #FFCC00);
}
div.row.beneficios-clave {
    text-align: center;
}

div.container.index article h5 {
	margin-top: 15px;
}

/* --- Página Index --- */
.carousel-item {
    height: 600px; /* Ajusta esta altura según tus necesidades */
}
.carousel-item img {
    height: 100%;
    object-fit: cover;
}
div.carousel-caption.d-none.d-md-block {
    text-shadow: 2px 2px 2px #fff;
}
div.carousel-caption.d-none.d-md-block.texto-blanco {
    color: #fff;
    text-shadow: 2px 2px 2px #000;
}

/* --- Páginas genéricas --- */
div.container.paginas div.row:not(:first-child) {
    padding: 40px 0;
}
div.container.paginas div.row div.col-md-12 {
    margin-top: 30px;
}
div.container.paginas div.row div.col-md-12 h1 {
    /*margin: 45px 0;*/
}
/* Expande la fila para que ocupe todo el ancho de la pantalla */
.fila-personalizada-al-extremo-row {
    position: relative;  /* Necesario para que la pseudo-clase :before sea posicionalmente relativa */
    padding-left: 15px;  /* Padding base */
    padding-right: 15px; /* Padding base */
    box-sizing: border-box; /* Para incluir el padding en el ancho total */
    color: #fff;
}
/* Aplica el fondo expansivo usando :before */
.fila-personalizada-al-extremo-row:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;  /* 100% del ancho de la ventana de visualización */
    height: 100%;  /* 100% de la altura del padre */
    background: linear-gradient(to right, #003366, #0055aa);
    z-index: -1;  /* Coloca detrás del contenido */
    transform: translateX(-50%);  /* Centra el pseudo-elemento */
    left: 50%;  /* Ajuste para centrar el pseudo-elemento */
}








/* *** Productos destacados Calesita - Index *** */
.carousel-inner > .item {
  position: relative;
  display: none;
  transition: .6s ease-in-out left;
}

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  background-color: rgba(0, 0, 0, 0);
  opacity: .5;
}
.carousel-control.left {
  background-image:         linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);  
  background-repeat: repeat-x;
}
.carousel-control.right {
  right: 0;
  left: auto;
  background-image:         linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
  background-repeat: repeat-x;
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
}

/* Estaba en el HTML */
#miCarrusel.carousel {
	margin: 50px auto;
	padding: 0 70px;
}
#miCarrusel.carousel .item .img-box {
	height: 160px;
	width: 100%;
	position: relative;
}
#miCarrusel.carousel .item img {	
	max-width: 100%;
	max-height: 100%;
	display: inline-block;
	position: absolute;
	bottom: 0;
	margin: 0 auto;
	left: 0;
	right: 0;
}
#miCarrusel.carousel .item h4 {
	font-size: 18px;
	margin: 10px 0;
}
#miCarrusel.carousel .item .btn {
	color: #333;
    border-radius: 0;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
    background: none;
    border: 1px solid #ccc;
    padding: 5px 10px;
    margin-top: 5px;
    line-height: 16px;
}
#miCarrusel.carousel .item .btn:hover, .carousel .item .btn:focus {
	color: #fff;
	background: #000;
	border-color: #000;
	box-shadow: none;
}
#miCarrusel.carousel .item .btn i {
	font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}
#miCarrusel.carousel .thumb-wrapper {
	text-align: center;
}
#miCarrusel.carousel .thumb-content {
	padding: 15px;
}
#miCarrusel.carousel .carousel-control {
	height: 100px;
    width: 40px;
    background: none;
    margin: auto 0;
    background: rgba(0, 0, 0, 0.2);
}
#miCarrusel.carousel .carousel-control i {
    font-size: 30px;
    position: absolute;
    top: 50%;
    display: inline-block;
    margin: -16px 0 0 0;
    z-index: 5;
    left: 0;
    right: 0;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: none;
    font-weight: bold;
}
#miCarrusel.carousel .carousel-control.left i {
	margin-left: -3px;
}
#miCarrusel.carousel .carousel-control.left i {
	margin-right: -3px;
}
#miCarrusel.carousel .carousel-indicators {
	bottom: -50px;
}
#miCarrusel.carousel-indicators li, .carousel-indicators li.active {
	width: 10px;
	height: 10px;
	margin: 4px;
	border-radius: 50%;
	border-color: transparent;
}
.#miCarruselcarousel-indicators li {	
	background: rgba(0, 0, 0, 0.2);
}
#miCarrusel.carousel-indicators li.active {	
	background: rgba(0, 0, 0, 0.6);
}




/* Control de carrusel izquierdo y derecho */
#miCarrusel a.carousel-control.left,
#miCarrusel a.carousel-control.right {
    transition: background 0.3s ease; /* Transición suave para el fondo */
}

/* Ícono dentro de los controles de carrusel */
#miCarrusel a.carousel-control.left i,
#miCarrusel a.carousel-control.right i {
    transition: color 0.3s ease; /* Transición suave para el color */
}

/* Cuando se hace hover sobre los controles de carrusel */
#miCarrusel a.carousel-control.left:hover,
#miCarrusel a.carousel-control.right:hover {
    background: linear-gradient(to right, #003366, #0055aa);
}

/* Afectar el ícono cuando el padre está en hover */
#miCarrusel a.carousel-control.left:hover i,
#miCarrusel a.carousel-control.right:hover i {
    color: #fff;
}
/* ***** Fin del CSS para el carrusel de productos mejorado ***** */














/* --- Páginas genéricas (Marcas) --- */
.card {
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transition: transform 0.3s ease;
}
.card:hover img {
    transform: scale(1.1);
}
.card-body {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    color: #fff;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    text-shadow: 2px 2px 4px #000;
}
.card-text {
    font-family: 'Roboto', sans-serif;
    line-height: 1.5;
    margin-top: 10px;
}
/* --- Páginas genéricas (Contacto) --- */
div.social-media ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
div.social-media ul li {
    display: inline;
    margin-right: 15px;
}
div.social-media ul li a {
    color: #0055aa;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra suave por defecto */
    transition: color 0.3s, transform 0.3s, text-shadow 0.3s; /* Transiciones suaves */
}

div.social-media ul li a:hover {
    color: #aaa;
    text-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Sombra más intensa al pasar el ratón */
    transform: translateY(-2px); /* Eleva el texto al pasar el ratón */
}

/* Formulario */
div.col-md-6.form-contacto form button {
    background: linear-gradient(to top, #003366, #0055aa);
    border: none;
    color: #fff;
    margin-bottom: 5px;
    padding: 5px 30px;
    border-radius: 5px;
    transition: background 0.3s ease; /* Asegura que la transición se aplique al cambio de fondo */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra ligera */
    border: 1px solid #0055aa; /* Borde delgado */
}

div.col-md-6.form-contacto form button:hover {
    background: linear-gradient(to bottom, #003366, #0055aa); /* Cambio de gradiente al pasar el mouse */
    transform: translateY(-1px); /* Levantar el botón al pasar el mouse */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}
div.col-md-6.form-contacto form button:active {
    transform: scale(0.95); /* Reducir ligeramente el tamaño al hacer clic */
    box-shadow: none; /* Quitar sombra al hacer clic */
}



/* --- Páginas genéricas (Productos) --- */
/* Estilos para las columnas dentro de la fila "productos" */
.row.categoria-de-productos {
    
}







/* Estilos para el contenedor del breadcrumb */
div.container.paginas div.row div.col-12#miga-de-pan nav ol {
    background: linear-gradient(to left, #003366, #0055aa);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 700;
    display: flex;
    list-style: none;
}

/* Estilos para cada elemento de la lista */
div.container.paginas div.row div.col-12#miga-de-pan nav ol li {
    margin-right: 10px;
    position: relative;
}

/* Estilos para los enlaces */
div.container.paginas div.row div.col-12#miga-de-pan nav ol li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Efecto hover para los enlaces */
div.container.paginas div.row div.col-12#miga-de-pan nav ol li a:hover {
    background-color: #ffffff33; /* Fondo semi-transparente */
    color: #ffcc00; /* Color de texto diferente al pasar el ratón */
    border-radius: 5px;
}

/* Separadores entre los elementos */
div.container.paginas div.row div.col-12#miga-de-pan nav ol li::after {
    content: '/';
    margin-left: 10px;
    color: #fff;
}

/* Quitar el separador del último elemento */
div.container.paginas div.row div.col-12#miga-de-pan nav ol li:last-child::after {
    content: '';
}

/* Estilos para el enlace activo */
div.container.paginas div.row div.col-12#miga-de-pan nav ol li.active a {
    color: #ffcc00; /* Color de texto diferente para el enlace activo */
}
div.container.paginas div.row div.col-12#miga-de-pan nav ol li:last-child {
    background-color: #ffcc00 !important; /* Cambiar el color de fondo del último elemento */
    /*padding: 5px 10px;*/ /* Ajusta el padding para que se vea bien */
    border-radius: 5px; /* Añade bordes redondeados */
    padding-left: 8px;
}





.row.categoria-de-productos div.tarjeta {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    padding: 9px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 390px; /* Altura fija (ajusta este valor según tus necesidades) */
}

@media (max-width: 950px) {
    .row.categoria-de-productos div.tarjeta {
        height: 100%; /* Altura no fija (ajusta este valor según tus necesidades) */
    }
    
	 .row.categoria-de-productos div.tarjeta p.lead {
	 	  font-size: 1.6em;
	 }
}

.row.categoria-de-productos div.tarjeta:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.row.categoria-de-productos div.tarjeta p.lead {
    color: #0081c4;
    text-align: center;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.row.categoria-de-productos div.tarjeta p.lead:hover {
    color: #005f8a;
}

.row.categoria-de-productos div.tarjeta div.caja-imagen {
    background-color: #0081c4;
    border-radius: 10px;
    margin-bottom: 9px;
}

.row.categoria-de-productos div.tarjeta div.caja-imagen img {
    width: 100%; /* La imagen ocupará todo el ancho disponible */
    height: auto; /* Mantendrá la proporción de aspecto */
    object-fit: cover; /* Recortará la imagen si es necesario para que cubra el espacio */
    border-radius: 10px; /* Bordes redondeados */
}

.row.categoria-de-productos div.tarjeta a.hvr-shutter-out-vertical {
    margin-top: auto;
    text-align: center;
    width: 100%;
    padding: 10px 0;
    background-color: #0081c4;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.row.categoria-de-productos div.tarjeta a.hvr-shutter-out-vertical:hover {
    background-color: #005f8a;
    border-radius: 10px;
}
.row.categoria-de-productos {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* Todas las tarjetas tendrán la misma altura */
}


/* ******************** Características individuales de producto 
*********************** */

input.form-control.text-center.me-3.cantidad {
	width: 4rem;
}

ul.vistaprevia {
	padding: 0;
	text-align: center;
}

ul.vistaprevia li {
	display: inline-block;
	margin: 5px;
}





/* Shutter Out Vertical */
.hvr-shutter-out-vertical {
    padding: 10px;
    display: block;
    width: 150px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    color: #003366;

    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    transition-property: color;
    transition-duration: 0.3s;
  }
  .hvr-shutter-out-vertical:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, #003366, #0055aa);
    transform: scaleY(0);
    transform-origin: 50%;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;

    border-radius: 8px;
  }
  .hvr-shutter-out-vertical:hover, .hvr-shutter-out-vertical:focus, .hvr-shutter-out-vertical:active {
    color: white;
  }
  .hvr-shutter-out-vertical:hover:before, .hvr-shutter-out-vertical:focus:before, .hvr-shutter-out-vertical:active:before {
    transform: scaleY(1);
  }


/* --- Páginas genéricas (Productos unicamente) --- */
/* Estilos para las columnas dentro de la fila "productos" */
/* Estilos para la tarjeta del producto */
div.row div.col-lg-3.col-md-6 .producto-en-si {
    background: linear-gradient(to bottom, #003366, #0055aa); /* Gradiente de fondo */
    padding: 15px; /* Más espacio interno para un mejor diseño */
    margin-bottom: 20px; /* Más espacio entre tarjetas */
    color: #fff; /* Texto blanco */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil alrededor de las tarjetas */
    transition: transform 0.2s, box-shadow 0.2s; /* Transición suave para efectos */
    
    height: 
}

/* Efecto al pasar el cursor sobre la tarjeta */
div.row div.col-lg-3.col-md-6 .producto-en-si:hover {
    transform: translateY(-5px); /* Efecto de levantamiento al pasar el cursor */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* Sombra más pronunciada al pasar el cursor */
}

/* Estilos para la imagen dentro de la tarjeta */
div.row div.col-lg-3.col-md-6 .producto-en-si img {
    border-radius: 10px; /* Bordes redondeados para la imagen */
    max-width: 100%; /* La imagen no excede el ancho de la tarjeta */
    display: block; /* Asegura que la imagen se comporte como un bloque */
    margin: 0 auto; /* Centra la imagen */
}

/* Estilos para el texto descriptivo */
div.row div.col-lg-3.col-md-6 .producto-en-si p.lead {
    text-align: center; /* Centra el texto */
    font-size: 1em; /* Tamaño de fuente del texto descriptivo */
    margin: 10px 0 0; /* Espaciado alrededor del texto */
}

div.row div.col-lg-3.col-md-6 .producto-en-si .badge {
    display: inline-block;
    max-width: 100%; /* Asegura que no sobrepase el ancho del contenedor padre */
    overflow: hidden;
    text-overflow: ellipsis; /* Trunca el texto con puntos suspensivos */
    white-space: nowrap; /* Evita saltos de línea */
}

div.row div.col-lg-3.col-md-6 .producto-en-si a {
	background-color: #0055aa;
	padding: 10px;
	margin: 10px auto;
	width: 170px;
	display: block;
	text-align: center;
	border: 3px groove #fff;
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 2px 2px #000;
}

div.row div.col-lg-3.col-md-6 .producto-en-si a:hover {
	border: 3px inset #003366;
	color: #fff;
	background: linear-gradient(to bottom, #002244, #003366);
}

div.row.flaticon div.col-lg-12 {
    margin-top: -50px;
}
div.row.flaticon div.col-lg-12 a {
    display: block;
    text-align: center;
    width: 300px;
    margin: 0 auto;
    font-weight: bold;
    color: #afafaf;
    text-decoration: none;
    transition: 0.5s ease color;
}
div.row.flaticon div.col-lg-12 a:hover {
    text-decoration: underline;
    color: #333333;
}



/* ============================
   Pie de página
   ============================ */
footer {
    background: linear-gradient(to bottom, #003366, #002244);
    color: #FFFFFF;
    padding: 3rem 1.25rem 1.25rem 1.25rem;
}
footer div.container .personalizado-col {
    margin-bottom: 2rem;
}
footer div.container .personalizado-col h3 {
	font-size: 22px;
}
footer ul li a.nav-link.p-0.text-body-secondary {
    color: #fff;
    transition: color 0.3s ease;
}
footer ul li a.nav-link.p-0.text-body-secondary:hover {
    color: #FFCC00;
    background: linear-gradient(to right, #FFA500, #FFCC00);
    text-shadow: 2px 2px 2px #000;
  }
  footer div.personalizado-col ul.lista-contacto {
    padding-left: 6px;
  }
footer div.personalizado-col ul.lista-contacto li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    white-space: nowrap; /* Impide el ajuste de línea */
    overflow: hidden; /* Oculta el texto que desborda */
    text-overflow: ellipsis; /* Añade puntos suspensivos al final del texto truncado */
}

footer div.personalizado-col ul.lista-contacto li i {
    margin-right: 10px;
    font-size: 20px; /* Ajusta el tamaño del icono */
    background-color: #f1f1f1; /* Cambia el color de fondo según sea necesario */
    color: #000; /* Cambia el color del icono según sea necesario */
    padding: 10px; /* Ajusta el espacio interior del círculo */
    border-radius: 50%; /* Hace el círculo */
    display: inline-flex; /* Centra el icono dentro del círculo */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
  }

  footer .personalizado-col:nth-child(2) ul.nav.flex-column li a {
    transition: color 0.3s ease;
    color: #afafaf;
  }
  footer .personalizado-col:nth-child(2) ul.nav.flex-column li a:hover {
    color: #fff;
}





ul.list-unstyled.d-flex.pie-redessociales a {
    color: #fff; /* Color del texto del enlace */
    transition: color 0.3s, transform 0.3s, box-shadow 0.3s; /* Añade transición suave para el color, el transform y el box-shadow */
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.2); /* Sombra sutil blanca detrás del enlace */
}

ul.list-unstyled.d-flex.pie-redessociales a:hover {
    color: #003366; /* Cambia el color al pasar el ratón */
    transform: scale(1.1); /* Agranda el icono ligeramente al pasar el ratón */
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.4); /* Aumenta la sombra blanca al pasar el ratón */
}

ul.list-unstyled.d-flex.pie-redessociales a:active {
    color: #aaa; /* Cambia el color cuando el enlace está siendo clickeado */
    transform: scale(0.95); /* Reduce el tamaño del icono ligeramente cuando se hace clic */
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.2); /* Mantiene la sombra blanca original al hacer clic */
}






div.d-flex {
    padding-top: 1.3rem;
}
div.d-flex:nth-child(3) {
    
}

div.d-flex:nth-child(3) p a {
    position: relative;
    color: #0066cc;
    text-decoration: none;
}

.d-flex:nth-child(3) p a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #0066cc;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: bottom right;
}

.d-flex:nth-child(3) p a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* ============================
   ResultadoMensaje.php
   ============================ */

div.row div.col-md-12.gracias-mensaje p, div.row div.col-md-12.gracias-mensaje h1 {
	text-align: center;
}
   
div.row div.col-md-12.gracias-mensaje p a {
	display: block;
	width: 250px;
	border-radius: 25px;
	border: 3px solid #003366;
	padding: 10px 20px;
	text-decoration: none;
	margin: 0 auto;
	text-align: center;
	transition: 0.3s;
}

div.row div.col-md-12.gracias-mensaje p a:hover {
	background: linear-gradient(to bottom, #003366, #002244);
	color: #fff;
}

/* ============================
   Media Queries
   ============================ */

/* Estilos personalizados para pantallas pequeñas */
@media (max-width: 768px) {
    ul.dropdown-menu.dropdown-menu-nav-principal {
        box-shadow: none;
    }
    /* 
    .offcanvas-collapse.open {
        background-color: brown;
        margin-top: 44px;
    }
    .offcanvas-collapse {
        background-color: greenyellow;
        margin-top: 44px;
    }
    */
    div.row.productos-destacados div.col-lg-4 {
        margin-bottom: 2rem;
    }
    div.row.beneficios-clave div.col-lg-4 {
        margin-bottom: 2rem;
    }
    div.container.paginas div.row:nth-child(2) {
        padding-top: 10px;

    }
}
@media (max-width: 420px) {
    div.container.paginas div.row div.col h2 {
        margin: 25px 0;
    }
}

/* Estilos personalizados para pantallas medianas y grandes */
@media (min-width: 768px) {
    .dropdown:hover .dropdown-menu {
        display: block; /* Muestra el menú desplegable al pasar el cursor */
    }
    
    .dropdown-menu-nav-principal {
        left: -520px; /* Ajusta este valor según sea necesario */
    }
    /* .dropdown-menu {
        columns: 2; Divide en dos columnas 
    }*/
}
@media (min-width: 768px) {
    .dropdown-menu {
        columns: 2; /* Divide en dos columnas */
    }
}

/* row fila-personalizada-al-extremo-row */
/* Añade padding horizontal coherente con los márgenes de Bootstrap */
@media (min-width: 576px) {
    .fila-personalizada-al-extremo-row {
        padding-left: 5px;  /* Padding para pantallas SM y superiores */
        padding-right: 5px;
    }
    
    .row.categoria-de-productos div.tarjeta {
        margin-left: 30px;
    }
}
@media (max-width: 576px) {
    .fila-personalizada-al-extremo-row {
        padding-left: 2px;
        padding-right: 2px;
    }
}

@media (min-width: 768px) {
    .fila-personalizada-al-extremo-row {
        padding-left: 5px;  /* Padding para pantallas MD y superiores */
        padding-right: 5px;
    }
}

@media (min-width: 992px) {
    .fila-personalizada-al-extremo-row {
        padding-left: 5px;  /* Padding para pantallas LG y superiores */
        padding-right: 5px;
    }
}

@media (min-width: 1200px) {
    .fila-personalizada-al-extremo-row {
        padding-left: 5px;  /* Padding para pantallas XL y superiores */
        padding-right: 5px;
    }
}
@media (max-width: 740px) {
    .fila-personalizada-al-extremo-row {
        padding-left: 2px;  /* Padding para pantallas XXL y superiores */
        padding-right: 2px;
    }
}
@media (min-width: 1400px) {
    .fila-personalizada-al-extremo-row {
        padding-left: 5px;  /* Padding para pantallas XXL y superiores */
        padding-right: 5px;
    }
}

/* Para resoluciones menores o iguales a 400px */
@media (max-width: 400px) {
    footer .personalizado-col {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }
}

/* Para resoluciones entre 401px y 768px */
@media (min-width: 401px) and (max-width: 768px) {
    footer .personalizado-col {
        width: 50%;
        display: inline-block;
        vertical-align: top;
    }

    footer .personalizado-col:nth-child(3) {
        width: 100%;
    }
}

/* Para resoluciones mayores a 768px */
@media (min-width: 769px) {
    footer .personalizado-col {
        width: 33.33%;
        display: inline-block;
        vertical-align: top;
    }
}
/* --- Páginas genéricas (Productos) --- */
/* Adaptaciones para dispositivos móviles */
@media (max-width: 767.98px) {
    .row.productos .col-lg-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Estilos específicos para dispositivos móviles */
@media (max-width: 576px) {
    .row.categoria-de-productos div.tarjeta p.lead {
        font-size: 1.5rem; /* Ajusta el tamaño de la fuente para que sea legible en pantallas pequeñas */
        margin-bottom: 10px; /* Reduce el margen inferior para ahorrar espacio */
        text-shadow: none; /* Elimina la sombra del texto si es necesario */
    }
}