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




.col-sm-12.col-md {
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
    min-height: 80px;        /* Ajusta la altura según necesites */
}

#contacto-encabezado {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center; /* Centrado horizontal interno */
    align-items: center;  /* ¡Esta línea es crucial! */
}

.enlace-contacto {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #2d3748;
    font-family: 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    gap: 10px;
    white-space: nowrap;
}

.enlace-contacto:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.enlace-contacto:first-child:hover {
    background-color: #25d366;
    color: white;
    border-color: #25d366;
}

.enlace-contacto:last-child:hover {
    background-color: #ea4335;
    color: white;
    border-color: #ea4335;
}

.enlace-contacto i {
    font-size: 18px;
    width: 20px;
    text-align: center;
}

/* Responsive para tablets */
@media (max-width: 768px) {
    #contacto-encabezado {
        gap: 15px;
    }
    
    .enlace-contacto {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* Responsive para móviles */
@media (max-width: 576px) {
    #contacto-encabezado {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    
    .enlace-contacto {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }
}

/* Efectos adicionales opcionales */
.enlace-contacto {
    position: relative;
    overflow: hidden;
}

.enlace-contacto::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.enlace-contacto:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}








/* CONTENEDOR PRINCIPAL */
.contenedor-buscador {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    width: 100%;
}

/* FORMULARIO */
.formulario-busqueda {
    width: 100%;
    max-width: 500px;
}

/* GRUPO DE BÚSQUEDA */
.grupo-busqueda {
    display: flex;
    position: relative;
    width: 100%;
    border-radius: 50px;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.grupo-busqueda:focus-within {
    border-color: #007bff;
    box-shadow: 0 4px 25px rgba(0, 123, 255, 0.2);
    transform: translateY(-2px);
}

/* CAMPO DE BÚSQUEDA */
.campo-busqueda {
    flex: 1;
    padding: 10px 20px;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #2d3748;
    outline: none;
    border-radius: 50px 0 0 50px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.campo-busqueda::placeholder {
    color: #a0aec0;
    font-weight: 400;
}

.campo-busqueda:focus {
    background: #f8f9fa;
}

/* BOTÓN DE BÚSQUEDA */
.boton-busqueda {
    padding: 15px 20px;
    border: none;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    cursor: pointer;
    border-radius: 0 50px 50px 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
}

.boton-busqueda:hover {
    background: linear-gradient(135deg, #0056b3, #004494);
    transform: scale(1.05);
}

.boton-busqueda:active {
    transform: scale(0.95);
}

.boton-busqueda i {
    font-size: 18px;
}

/* EFECTO DE FOCO MEJORADO */
.campo-busqueda:focus + .boton-busqueda {
    background: linear-gradient(135deg, #0056b3, #004494);
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .contenedor-buscador {
        padding: 10px 0;
    }
    
    .grupo-busqueda {
        border-radius: 12px;
        border-width: 1px;
    }
    
    .campo-busqueda {
        padding: 12px 16px;
        font-size: 15px;
        border-radius: 12px 0 0 12px;
    }
    
    .boton-busqueda {
        padding: 12px 18px;
        border-radius: 0 12px 12px 0;
        min-width: 50px;
    }
    
    .boton-busqueda i {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .formulario-busqueda {
        max-width: 100%;
    }
    
    .campo-busqueda {
        padding: 10px 14px;
        font-size: 14px;
    }
    
    .boton-busqueda {
        padding: 10px 16px;
        min-width: 45px;
    }
    
    .boton-busqueda i {
        font-size: 15px;
    }
}

/* ANIMACIÓN DE PLACEHOLDER */
@keyframes placeholderPulse {
    0% { opacity: 0.6; }
    50% { opacity: 0.8; }
    100% { opacity: 0.6; }
}

.campo-busqueda::placeholder {
    animation: placeholderPulse 2s infinite;
}

/* ESTADO DE VALIDACIÓN */
.campo-busqueda:invalid:not(:focus) {
    border-color: #e53e3e;
}

.campo-busqueda:valid {
    border-color: #38a169;
}

/* DARK MODE SUPPORT */
@media (prefers-color-scheme: dark) {
    .grupo-busqueda {
        background: #2d3748;
        border-color: #4a5568;
    }
    
    .campo-busqueda {
        color: #e2e8f0;
        background: transparent;
    }
    
    .campo-busqueda:focus {
        background: #4a5568;
    }
    
    .campo-busqueda::placeholder {
        color: #a0aec0;
    }
}


/* ============================
   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 {
    transition: all 0.3s ease;
    border-radius: 4px;
}

header nav.navbar.navbar-expand-md li.nav-item:hover {
    background-color: #FFCC00;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 3;
}

header nav.navbar.navbar-expand-md li.nav-item .nav-link {
    transition: color 0.3s ease;
}

header nav.navbar.navbar-expand-md li.nav-item:hover .nav-link {
    color: #000 !important;
    /*font-weight: 600;*/
}







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);
}

button.navbar-toggler {
	margin-right: 15px;
}



/* Código viejo que puede servir */
#usuario-carrito {
   display: flex;
   align-items: center;
   gap: 10px;
   color: #fff;
}

/* ============================
   DROPABAJO PERSONALIZADO
   ============================ */

/* Contenedor principal */
.dropabajo {
    position: relative;
    display: inline-block;
}

/* Botón/toggle del dropabajo */
.dropabajo-toggle {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: #fff;
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.dropabajo-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Menú del dropabajo */
.dropabajo-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: none;
    min-width: 200px;
    padding: 8px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

/* Para el carrito que necesita alineación a la izquierda */
.dropabajo:first-child .dropabajo-menu {
    right: auto;
    left: 0;
}

/* Items del menú */
.dropabajo-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.dropabajo-item:hover {
    background-color: #f8f9fa;
    color: #212529;
    text-decoration: none;
}

/* Divisor */
.dropabajo-divider {
    height: 1px;
    margin: 8px 0;
    overflow: hidden;
    background-color: #e9ecef;
}

/* Estado abierto */
.dropabajo.show .dropabajo-menu {
    display: block;
}

/* Para el botón del carrito específicamente */
#dropdownCarrito {
    position: relative;
    background: transparent;
    border: none;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#dropdownCarrito:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Badge del carrito */
#contador-carrito {
    font-size: 11px;
    padding: 3px 6px;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .dropabajo-menu {
        position: fixed;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: 90%;
        max-width: 300px;
    }
    
    .dropabajo-menu-end {
        left: auto !important;
        right: 0 !important;
        transform: none;
    }
    
    div.dropabajo-contenido div.carrito-items {
    	max-height: 200px;
    }
}

@media (min-width: 800px) {    
    div.dropabajo-contenido div.carrito-items {
    	max-height: 400px;
    }
}


.dropabajo-menu-end {
	background: linear-gradient(to right, #003366, #0055aa);
}

.dropabajo-menu-end li a {
	color: #fff;
}

div.dropabajo-contenido {
	min-width: 350px;
	padding-top: 15px;
}

h6.dropabajo-header {
	text-align: center;
	/*color: #0081C4;*/
	color: #fff;
}

div.dropabajo-contenido div.carrito-items,
div.dropabajo-contenido div.d-flex.justify-content-between.mb-3,
div.dropabajo-contenido div.d-grid.gap-2 {
	padding: 0 20px;
}
	
	


















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


.alineacion-vertical {
    display: flex;
    align-items: center; /* Centra verticalmente */
    min-height: 100%; /* Asegura que ocupe toda la altura disponible */
}



/* Hero Section con Efecto Zoom */
        .hero-section {
            position: relative;
            overflow: hidden;
            color: white;
            padding: 150px 0;
            text-align: center;
        }
        
        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(0, 51, 102, 0.8), rgba(0, 51, 102, 0.8)), url('../img/inicio/hombre-vista-posterior-equipo-seguridad.webp');
            background-size: cover;
            background-position: center;
            z-index: 1;
            transition: transform 20s ease-in-out;
            animation: zoomEffect 25s infinite alternate;
        }
        
        @keyframes zoomEffect {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.15);
            }
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
        }
        
        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }
        
        .hero-subtitle {
            font-size: 1.5rem;
            margin-bottom: 30px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        }
        
        
        .btn-outline-light {
            padding: 15px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50px;
            transition: all 0.3s ease;
        }
        
        /* Sección de productos */
        .products-section {
            padding: 80px 0;
            background-color: #f8f9fa;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
            color: #2c3e50;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }
  
a.boton-destacados-hero {
   background: linear-gradient(135deg, #E65C00 0%, #FF7F32 100%);
    display: flex;
    align-items: center;     /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	padding: 0 20px;
	border-radius: 40px;
	min-height: 48px;
	transition: all 0.4s ease; /* Transición suave para todos los cambios */
}

a.boton-destacados-hero:hover {
	background: linear-gradient(135deg, #CC5200 0%, #E65C00 100%);
	transform: translateY(-3px); /* Efecto de elevación */
	box-shadow: 0 7px 15px rgba(230, 92, 0, 0.4);
}

a#contacto-btn-inicio:hover {
	transform: translateY(-3px); /* Efecto de elevación */	
	box-shadow: 0 7px 15px rgba(255, 255, 255, 0.4);
}
  
  /* Sección de beneficios mejorada */
  .benefit-card {
      text-align: center;
      padding: 30px 20px;
      border-radius: 8px;
      transition: transform 0.3s;
      height: 100%;
  }
  
  .benefit-card:hover {
      transform: translateY(-5px);
  }
  
  .benefit-icon {
      color: #0062cc;
      margin-bottom: 20px;
      font-size: 3.5rem;
  }
  
  /* Trust badges */
  .trust-badges {
      background-color: #f8f9fa;
      padding: 40px 0;
  }
  
  .badge-item {
      text-align: center;
  }
  
  .client-logo {
      max-height: 60px;
      max-width: 120px;
      margin-bottom: 15px;
  }
  
  /* Llamados a la acción estratégicos */
  .cta-section {
      background-color: #003366;
      color: white;
      padding: 60px 0;
      text-align: center;
  }
  
  /* Mejoras responsivas */
  @media (max-width: 768px) {
      .hero-title {
          font-size: 2rem;
      }
      
      .hero-subtitle {
          font-size: 1.1rem;
      }
      
      .benefit-icon {
          font-size: 2.5rem;
      }
  }


/* *** 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 .thumb-content p a {
	color: #000;
	text-decoration: none;
	transition: ease 0.5s color;
}

#miCarrusel.carousel .thumb-content p a:hover {
	color: #DB5800;
	text-decoration: underline;
}






a.estilo-boton-cotizador {
	padding: 15px 10px;
	background-color: #F9DF43;
	font-size: 15px;
	border-radius: 30px;
	color: #000;
	text-decoration: none;
}

/* En tu archivo CSS */
.estilo-boton-cotizador span.texto-boton {
    display: inline;
}

@media (max-width: 950px) and (min-width: 768px) {
    .estilo-boton-cotizador span.texto-boton {
        display: none;
    }
}










#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;
}

/* Ajustes para mostrar 2 productos en pantallas medianas */
@media (max-width: 767px) and (min-width: 576px) {
    .col-xs-12.col-sm-3 {
        width: 50%;
        float: left;
    }
    
    #miCarrusel.carousel {
        padding: 0 20px;
    }
}
/* ***** Fin del CSS para el carrusel de productos mejorado ***** */



section.seccion-llamado-a-la-accion {
	padding: 55px 0;
	background: linear-gradient(0deg, #00509E, #002A54);
	color: #fff;
}






.trust-badges {
   padding: 60px 0;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  }
  
  .trust-badges h3 {
   font-size: 2rem;
   font-weight: 700;
   color: #2c3e50;
   margin-bottom: 1.5rem;
   position: relative;
   padding-bottom: 15px;
  }
  
  .trust-badges h3:after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 80px;
   height: 4px;
   background: #3498db;
   border-radius: 2px;
  }
  
  .badge-item {
   padding: 25px;
   text-align: center;
   transition: all 0.3s ease;
   margin-bottom: 15px;
  }
  
  .badge-item img {
   filter: grayscale(30%);
   opacity: 0.8;
   transition: all 0.4s ease;
   max-height: 70px;
   width: auto;
  }
  
  .badge-item:hover {
   transform: translateY(-5px);
  }
  
  .badge-item:hover img {
   filter: grayscale(0%);
   opacity: 1;
   transform: scale(1.05);
  }
  
  /* Efecto de tarjeta en hover */
  .badge-item {
   background: white;
   border-radius: 12px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   padding: 25px 15px;
  }
  
  .badge-item:hover {
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
   .trust-badges {
       padding: 40px 0;
   }
   
   .trust-badges h3 {
       font-size: 1.5rem;
   }
   
   .badge-item {
       margin-bottom: 20px;
   }
  }








/* --- 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, #e3f2fd 0%, #bbdefb 100%);
    color: #002A54;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.card-text {
    font-family: 'Roboto', sans-serif;
    line-height: 1.5;
    margin-top: 10px;
}

.encabezado-tarjeta-personalizado {
    /* Flexbox */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    /* Estilos visuales */
    background: linear-gradient(135deg, #002A54 0%, #1e4a7a 100%);
    color: #FCFCFC;
    border-bottom: 3px solid #bbdefb;
    border-radius: 12px 12px 0 0;
    padding: 1rem 1.5rem;
    font-weight: 600;
}

.contador-productos {
    background: rgba(255,255,255,0.9) !important;
    color: #002A54 !important;
    border: 1px solid rgba(255,255,255,0.3);
    font-weight: 600;
    padding: 0.5rem 0.8rem;
    font-size: 15px;
    border-radius: 20px;
}

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

div.info-contacto p a:hover {
	text-decoration: none;
}

@media (max-width: 450px) {
	div.info-contacto {
		margin-top: 25px;
	}
}


/* --- 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;
    align-items: center; /* Centra verticalmente todos los items */
    height: auto; /* Asegura que la altura se ajuste al contenido */
    min-height: 40px; /* Altura mínima para mejor apariencia */
}

/* Centrado vertical para todos los items del breadcrumb */
div.container.paginas div.row div.col-12#miga-de-pan nav ol .breadcrumb-item {
    display: flex;
    align-items: center; /* Centrado vertical interno */
    height: 100%; /* Ocupa toda la altura disponible */
}

/* Separadores entre los elementos - CENTRADOS VERTICALMENTE */
div.container.paginas div.row div.col-12#miga-de-pan nav ol .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: #fff;
    padding: 0 10px;
    display: flex;
    align-items: center; /* Centra el separador verticalmente */
    height: 100%; /* Ocupa toda la altura */
}

/* Estilo para el texto activo - TAMBIÉN CENTRADO */
div.container.paginas div.row div.col-12#miga-de-pan .breadcrumb-item.active span {
    background-color: #ffcc00 !important;
    border-radius: 5px;
    padding: 5px 12px;
    color: #003366 !important;
    font-weight: 700;
    display: flex;
    align-items: center; /* Centrado vertical */
    height: 100%; /* Misma altura que los demás items */
    min-height: 30px; /* Altura mínima consistente */
}

/* Estilos para los enlaces - TAMBIÉN CENTRADOS */
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;
    border-radius: 5px;
    display: flex;
    align-items: center; /* Centrado vertical */
    height: 100%; /* Misma altura */
    min-height: 30px; /* Altura mínima consistente */
}





.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;
}



}
        
    .faq-item {
        margin-bottom: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .faq-item:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .faq-question {
        color: #2c3e50;
        background-color: #f8f9fa;
        font-weight: 600;
        padding: 15px 20px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background-color 0.3s ease;
    }
    
    .faq-question:hover {
        background-color: #e9ecef;
    }
    
    .faq-answer {
        color: #34495e;
        line-height: 1.4;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease, padding 0.5s ease;
    }
    
    .faq-answer.active {
        max-height: 1000px; /* Valor suficientemente alto para contener el contenido */
        padding: 15px 20px;
    }
    
    .category-list {
        columns: 2;
        column-gap: 20px;
        margin: 15px 0;
    }
    
    .category-list li {
        margin-bottom: 8px;
        break-inside: avoid;
    }
    
    .highlight {
        background-color: #fff8e1;
        padding: 15px;
        border-radius: 5px;
        border-left: 4px solid #ffc107;
        margin-top: 15px;
    }
    
    .contact-info {
        background-color: #e3f2fd;
        padding: 15px;
        border-radius: 5px;
        margin-top: 20px;
    }
    
    @media (max-width: 768px) {
        .category-list {
            columns: 1;
        }
        
        .faq-question {
            padding: 12px 15px;
        }
        
        .faq-answer.active {
            padding: 12px 15px;
        }
    }


div.card#productos-cotizacion {
	margin-bottom: 50px;
}


/* ============================
   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 a {
	color: #fff;
	text-decoration: none;
}

footer div.personalizado-col ul.lista-contacto li a:hover {
	text-decoration: underline;
}

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(3) ul.nav.flex-column li a {
    transition: color 0.3s ease;
    color: #afafaf;
  }
  footer .personalizado-col:nth-child(3) ul.nav.flex-column li a:hover {
    color: #fff;
}





/*Mover Recaptcha a la izquierda*/
.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: -2px !important;
bottom: 20px !important;
}
.grecaptcha-badge:hover {
width: 256px !important;
}






   .payment-methods {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0 20px 0;
        }
        
        .payment-icon {
            background: white;
            border-radius: 5px;
            padding: 5px;
            width: 50px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .payment-icon i {
            font-size: 20px;
            color: #2c3e50;
        }
        
        .legal-links {
            display: flex;
            gap: 20px;
        }
        
        .legal-links a {
            color: #ccc !important;
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s;
        }
        
        .legal-links a:hover {
            color: white !important;
        }
        
        @media (max-width: 768px) {
            .personalizado-col {
                margin-bottom: 30px;
            }
            
            .legal-links {
                flex-direction: column;
                gap: 10px;
                /*margin: 15px 0;*/
                margin-bottom: 15px;
            }
        }
        
        @media (min-width: 1185px) {
				.legal-links {
                margin-top: 4px;
            }
        }







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.pie-enlace-da p a {
    position: relative;
    color: #0066cc;
    text-decoration: none;
}

.d-flex.pie-enlace-da 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.pie-enlace-da p a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.whatsapp-flotante {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at center, #25d366, #128C7E);
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.whatsapp-flotante a {
	color: #fff;
}

.whatsapp-flotante:hover {
    background-color: #128C7E;
    transform: scale(1.1);
}

.whatsapp-flotante i {
    margin-top: 5px;
}

/* Ajuste para pantallas pequeñas (hasta 490px) */
  @media (max-width: 490px) {
      .whatsapp-flotante {
          bottom: 70px; /* Más alto que en pantallas grandes */
          width: 55px;  /* Ligeramente más pequeño */
          height: 55px; /* Ligeramente más pequeño */
          font-size: 26px; /* Ajuste del tamaño del icono */
      }
  }

/* ============================
   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;
    }
    img.img-qs {
    	margin-bottom: 30px;
    }
}
@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 430px */
  @media (max-width: 430px) {
      footer .personalizado-col {
          width: 100%;
          display: block;
          margin-bottom: 30px;
      }
  }

  /* Para resoluciones entre 431px y 768px */
  @media (min-width: 431px) and (max-width: 768px) {
      footer .personalizado-col {
          width: 50%;
          display: inline-block;
          vertical-align: top;
          /*margin-bottom: 30px;*/
      }
      
      /* Aseguramos que el formulario ocupe el ancho completo en esta resolución */
      footer .personalizado-col:nth-child(4) {
          width: 100%;
      }
  }

  /* Para resoluciones entre 769px y 992px */
  @media (min-width: 769px) and (max-width: 992px) {
      footer .personalizado-col {
          width: 50%;
          display: inline-block;
          vertical-align: top;
      }
      
      /* Aseguramos que el formulario ocupe el ancho completo en esta resolución */
      footer .personalizado-col:nth-child(4) {
          width: 100%;
      }
  }

  /* Para resoluciones mayores a 992px */
  @media (min-width: 993px) {
      footer .personalizado-col {
          width: 25%; /* Cambiado de 33.33% a 25% para 4 columnas */
          display: inline-block;
          vertical-align: top;
      }
      
      /* Aseguramos que no haya margin-right en la última columna */
      footer .personalizado-col:last-child {
          margin-right: 0;
      }
  }
/* --- 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 */
    }
}