.contenedor-central-sandwich {
    max-width: 1200px;      /* Ancho máximo del contenido */
    margin: 40px auto;      /* Lo centra y le da 40px de espacio arriba y abajo */
    padding: 20px;          /* Espacio interno para que el texto no se pegue al borde */
    background-color: #fff; /* Fondo blanco para que se distinga de la página */
    border: 1px solid #eee; /* Un borde muy sutil para que veas la caja */
    border-radius: 8px;     /* Bordes redondeados */
}

.mensaje-bienvenida {
    text-align: center;      /* Centra el texto */
    padding: 30px 15px;      /* Le da espacio arriba/abajo y a los lados */
    background-color: #fff;
    padding-top: 0px;    /* Asegura que tenga fondo blanco */
}

.mensaje-bienvenida h1 {
    font-size: 2rem;         /* Tamaño del texto (ajusta si es necesario) */
    font-weight: 600;        /* Un poco de negrita */
    color: #444;             /* Color de texto gris oscuro */
    margin: 0; 
    padding-top: 0px;              /* Quita márgenes extra */
}

.campociudad{

  height:300px;
}

.mapacundi{

  height:300px;
}

.colombia{

  height:250px;
}

.subtitulo {
  font-weight: 500;       /* Un peso medio, ni 'bold' ni 'normal' */
  font-style: italic;     /* Ponerlo en cursiva */
  color: #A17A48;        /* Un color de acento (ejemplo: azul) */
}

.logofotter{

  height: 150px;
}

/* --- PASO 1: OCULTAR LA CAJA MARRÓN --- */

/* Necesitas encontrar la clase de esa caja marrón. 
  Haz clic derecho sobre ella > "Inspeccionar" y busca su clase.
  Reemplaza '.clase-de-la-caja-marron' con la clase real.
*/
.clase-de-la-caja-marron {
    display: none !important; /* La oculta por completo */
}


/* --- PASO 2: "SUBIR" EL BLOQUE DE BOTONES --- */

/* Necesitas encontrar la clase del bloque que CONTIENE tus dos botones.
  (el contenedor padre de los botones).
  Reemplaza '.clase-del-bloque-de-botones' con la clase real.
*/
.clase-del-bloque-de-botones {
    
    /* ¡ESTE ES EL TRUCO! */
    /* Mueve todo el bloque hacia arriba. 
       Ajusta -100px (ej. -80px, -120px) hasta que los botones 
       queden perfectamente sobre la parte inferior del banner.
    */
    margin-top: -100px; 
    
    position: relative;  /* Necesario para que se ponga encima del banner */
    z-index: 10;         /* Asegura que esté por encima de otros elementos */
    background: none;    /* Quita cualquier fondo blanco que pueda tener */
    border: none;        /* Quita cualquier borde que pueda tener */
    
    /* Opcional: Centra los botones si no lo están */
    text-align: center; 
}


/* --- PASO 3: ARREGLAR EL ESTILO DE LOS BOTONES --- */

/* Encuentra la clase de tu botón AZUL (probablemente .btn-primary) 
  y reemplázala si es diferente.
*/
.btn-primary {
    background-color: #af8025 !important; /* Tu color dorado/marrón */
    border-color: #af8025 !important;
    color: #FFFFFF !important; /* Texto blanco */
    font-weight: bold;
    border-radius: 50px; /* Bordes redondeados */
    padding: 12px 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin: 5px; /* Añade espacio entre botones */
}

.btn-primary:hover {
    background-color: #c99836 !important;
    border-color: #c99836 !important;
    transform: translateY(-2px); /* Efecto sutil al pasar el cursor */
}

/* Encuentra la clase de tu botón BLANCO (probablemente .btn-light o .btn-default)
  y reemplázala si es diferente.
*/
.btn-light { /* O la clase que sea tu botón blanco */
    background-color: transparent !important; /* Fondo transparente */
    border: 2px solid #FFFFFF !important;  /* Borde blanco */
    color: #FFFFFF !important;             /* Texto blanco */
    font-weight: bold;
    border-radius: 50px;
    padding: 12px 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin: 5px;
}

.btn-light:hover {
    background-color: #FFFFFF !important; /* Fondo blanco al pasar el cursor */
    color: #2a1a1a !important;       /* Texto color marrón (el de tu footer) */
    transform: translateY(-2px);
}


ul, ol{
  padding: 0;
  list-style: none;
  text-decoration: none;
}

a:link, a:visited,  a:hover, a:active{
    text-decoration: none !important;
    color: inherit !important;
}

.main-footer{
  border-top: 0 !important;
 
}

.bg-dark {
    background-color: #af8025 !important; /* El !important fuerza la sobrescritura */
}

/* --- Ajuste visual para centrar la columna "Explora" --- */

/* 1. Apuntamos a la SEGUNDA columna (la de "EXPLORA") */
.footer-background-custom .row .col:nth-child(2) {
    
    /* 2. Habilitamos el posicionamiento relativo */
    position: relative;
    
    /* 3. Lo "empujamos" hacia la derecha para centrarlo visualmente.
       ¡Ajusta este valor (ej: 15px, 25px, 30px) 
       hasta que se vea equilibrado para ti!
    */
    left: 60px; 
}




h5{

  color: black;
}

/* Ocultar las flechas (spinners) por defecto 
  en los campos de cantidad (input type="number")
*/

/* Para navegadores WebKit (Chrome, Safari, Edge, Opera) */
input.showQuantity::-webkit-outer-spin-button,
input.showQuantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Para Firefox */
input.showQuantity[type="number"] {
  -moz-appearance: textfield;
}



/* --- Estilos para la Imagen del Producto en el Carrito (60px) --- */

/* 1. Seleccionamos el contenedor <figure> DENTRO del carrito */
#bodyCart figure.imgProduct {
  /* Anulamos estilos anteriores */
  padding-top: 0 !important; 
  background-color: transparent !important; /* Quitamos el fondo gris */
  border: none !important; /* Quitamos cualquier borde */
  
  /* Establecemos el tamaño deseado (60x60) */
  width: 60px !important; 
  height: 60px !important; 
  
  /* Mantenemos lo necesario para alinear la imagen */
  position: relative; 
  overflow: hidden;
  border-radius: 6px; /* Borde redondeado más pequeño */
  margin-bottom: 0; 
  margin-right: 1rem; 
  vertical-align: middle; 
  display: inline-block; /* Asegura que se alinee bien con el texto */
}

/* 2. Ajustamos la imagen <img> DENTRO de esa figura */
#bodyCart figure.imgProduct img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Mantenemos el 'zoom' */
  object-position: center !important;
}

/* 3. (Opcional) Mejorar alineación vertical del texto al lado */
#bodyCart .media-body { /* Ajusta '.media-body' si tu clase es diferente */
  vertical-align: middle;
  display: inline-block; /* Ayuda a la alineación vertical */
}

/* --- Asegura que el icono de papelera sea visible (negro) --- */

/* Selecciona el icono <i> DENTRO del botón .remCart */
button.remCart i.fas.fa-trash-alt {
  color: #000000 !important; /* Fuerza el color a negro */
}

/* Opcional: Cambia el color al pasar el mouse si quieres */
button.remCart:hover i.fas.fa-trash-alt {
  color: #333333 !important; /* Un gris oscuro al pasar el mouse */
}

/* --- Alinear verticalmente los elementos en la fila del carrito --- */

/* Selecciona la fila principal de cada producto en el carrito */
#bodyCart .row.py-1 {
  align-items: center !important; /* ¡Esta es la clave! Centra verticalmente todos los hijos */
}

/* Opcional: Ajuste fino si el botón de eliminar aún se ve mal */
#bodyCart .remCart {
  /* Puede que necesites ajustar un poco el margen si 'align-items' no es suficiente */
  /* margin-top: 5px; */ 
}


@media (min-width: 768px) { 
  
  /* Selecciona la columna que contiene el botón. 
     Tu HTML usa col-md-9 para el botón y col-md-3 para la cantidad.
     Asegúrate de que esta clase coincida. 
  */
  .row.my-4 > .col-md-9 { 
    text-align: right; /* ¡Esta es la clave! Alinea el contenido (el botón) a la derecha */
  }

  /* Opcional: Asegura que el botón no sea 100% ancho si quitaste btn-block */
  .row.my-4 > .col-md-9 button.addCart {
     display: inline-block; /* Permite que text-align funcione */
     width: auto; /* Ancho automático basado en contenido y padding */
     /* Si quieres un ancho máximo específico, puedes añadirlo: */
     /* max-width: 300px; */
  }

  /* 1. Hacemos el contenedor general un poco más estrecho */
.blockQuantity .input-group {
  max-width: 180px; /* Ajusta este valor si quieres (ej: 120px, 140px) */
  margin-left: auto;  /* Centra el contador si la columna es más ancha */
  margin-right: auto; /* Centra el contador */
}

/* 2. Reducimos la altura y el tamaño de fuente del campo numérico */
.blockQuantity .form-control.showQuantity {
  height: calc(1.5em + 0.5rem + 2px); /* Altura estándar de input pequeño */
  padding: 0.25rem 0.5rem; /* Relleno más pequeño */
  font-size: 0.9rem; /* Fuente un poco más pequeña */
}

/* 3. Reducimos el padding y tamaño de fuente de los botones +/- */
.blockQuantity .input-group-text.btnInc {
  padding: 0.25rem 0.75rem; /* Relleno más pequeño */
  font-size: 0.8rem; /* Icono +/- más pequeño */
}

/* 4. Aseguramos que los iconos estén centrados verticalmente */
.blockQuantity .input-group-text.btnInc i {
  line-height: inherit; /* Ayuda a centrar verticalmente */
}





}


.text-facebook{

  color: #3b5999;
}

.text-instagram{

  color: #e4405f;
}

.text-twitter{

  color: #55acee;
}

.text-linkedin{

  color: #0077B5;
}

.text-youtube{

  color: #dd4b39;
}

.text-twitch{

  color: #A142F7;
}

[class*=sidebar-dark-] .sidebar a {
    color: #c2c7d0 !important;
}

[class*=sidebar-dark] .brand-link, [class*=sidebar-dark] .brand-link .pushmenu {
    color: rgba(255,255,255,.8) !important;
}

.page-error{
  height: 50vh !important;
}

.page-item.active .page-link{

  color: #fff !important;
}

.facebook{
  color:white;
  background:#46639f;
}

.google{
  color:white;
  background:#d6513e;
}





/* --- CSS PARA CENTRAR TODO EN EL FOOTER MÓVIL --- */

/* Esta 'media query' hace que el código de adentro
  SOLO se aplique en pantallas de menos de 768px (móviles).
*/
@media (max-width: 767.980px) {

    /* 1. Centra el contenido de las 3 columnas del footer marrón */
    .footer-background-custom .row .col {
        text-align: center !important;
    }

    /* 2. Centra el texto del copyright en la barra negra */
    .main-footer .container {
        text-align: center !important;
    }

/* --- Ajuste visual para centrar la columna "Explora" --- */

/* 1. Apuntamos a la SEGUNDA columna (la de "EXPLORA") */
.footer-background-custom .row .col:nth-child(2) {
    
    /* 2. Habilitamos el posicionamiento relativo */
    position: relative;
    
    /* 3. Lo "empujamos" hacia la derecha para centrarlo visualmente.
       ¡Ajusta este valor (ej: 15px, 25px, 30px) 
       hasta que se vea equilibrado para ti!
    */
    left: 0px!important; 
}

/* --- Forzar alineación izquierda en la columna "Dudas" --- */

/* 1. Apuntamos a la TERCERA columna del footer */
.footer-background-custom .row .col:nth-child(3) {
    
    /* 2. Forzamos que TODO el contenido de esta columna 
          (título, iconos y texto) se alinee a la izquierda. */
    text-align: left !important;
}


/* --- Centra SÓLO el título de la 3ra columna (Dudas) --- */

/* 1. Apuntamos Específicamente al TÍTULO (h5) 
   de la TERCERA columna del footer */
.footer-background-custom .row .col:nth-child(3) h5 {
    
    /* 2. Forzamos que SÓLO este título se alinee al centro */
    text-align: center !important;
}


/* Apunta al párrafo <p> en la primera columna del footer */
.footer-background-custom .row .col:nth-child(1) p {
    color: #000000 !important; /* ¡Fuerza el texto a negro! */
    text-align: center; /* Asegúrate de que esté centrado */
}

.ahorro-badge {
    display: block; /* Lo convierte en un bloque, forzando el salto de línea */
    margin-left: auto !important; /* Centra el badge */
    margin-right: auto !important; /* Centra el badge */
    margin-top: 8px !important; /* Añade un pequeño espacio arriba */
    position: static !important; /* Anula el 'position: relative' para evitar problemas de alineación */
    /* Opcional: ajustar el ancho si es necesario */
    /* width: fit-content; */ 
  }

  /* Opcional: quitar el padding-top del precio 'AHORA' si se ve mucho espacio */
  h3.text-center span.text-success.pt-4 {
    padding-top: 0 !important;
  }

  /* --- Ajustar tamaño del contador de cantidad --- */

/* 1. Hacemos el contenedor general un poco más estrecho */
.blockQuantity .input-group {
  max-width: 130px; /* Ajusta este valor si quieres (ej: 120px, 140px) */
  margin-left: auto;  /* Centra el contador si la columna es más ancha */
  margin-right: auto; /* Centra el contador */
}

/* 2. Reducimos la altura y el tamaño de fuente del campo numérico */
.blockQuantity .form-control.showQuantity {
  height: calc(1.5em + 0.5rem + 2px); /* Altura estándar de input pequeño */
  padding: 0.25rem 0.5rem; /* Relleno más pequeño */
  font-size: 0.9rem; /* Fuente un poco más pequeña */
}

/* 3. Reducimos el padding y tamaño de fuente de los botones +/- */
.blockQuantity .input-group-text.btnInc {
  padding: 0.25rem 0.75rem; /* Relleno más pequeño */
  font-size: 0.8rem; /* Icono +/- más pequeño */
}

/* 4. Aseguramos que los iconos estén centrados verticalmente */
.blockQuantity .input-group-text.btnInc i {
  line-height: inherit; /* Ayuda a centrar verticalmente */
}

/* Apuntamos a la columna que contiene el botón en móvil (col-12) */
  .row.my-4 > .col-12 { 
    text-align: center; /* Centra el botón si no ocupa el 100% */
  }

  /* Apuntamos al botón directamente */
  .row.my-4 button.addCart { /* Usamos un selector más específico */
    display: block !important; /* Asegura que sea un bloque */
    width: 100% !important; /* Ocupa todo el ancho disponible */
    max-width: none !important; /* Anula cualquier max-width de escritorio */
    margin-left: auto !important; /* Ayuda a centrar */
    margin-right: auto !important; /* Ayuda a centrar */
    text-align: center !important; /* Centra el texto DENTRO del botón */
    /* Resetea alineación por si acaso */
    float: none !important; 
  }
}