/* Estilos para fondos modernos y elegantes por sección */

/* Clase base para todas las secciones */
.section-background {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  margin: 20px 0;
}

/* Patrón base con puntos sutiles */
.pattern-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.1;
}

/* Panaderías - Tons cálidos con patrón de trigo */
#panaderias {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 30%, #fffde7 100%);
  position: relative;
}

#panaderias::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='wheat' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M20,5 Q25,0 30,5 T40,5 Q35,10 30,10 T20,10 Q15,5 20,5 Z' fill='%23ff9800'/%3E%3Cpath d='M20,15 Q25,10 30,15 T40,15 Q35,20 30,20 T20,20 Q15,15 20,15 Z' fill='%23ff9800'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23wheat)'/%3E%3C/svg%3E");
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

/* Verdulerías - Verdes naturales con patrón de hojas */
#verdulerias {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 30%, #f1f8e9 100%);
  position: relative;
}

#verdulerias::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='leaves' x='0' y='0' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Cpath d='M15,10 C20,5 30,5 35,10 C30,15 20,15 15,20 C10,15 0,15 5,10 C10,5 20,5 15,10 Z' fill='%234caf50' opacity='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23leaves)'/%3E%3C/svg%3E");
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

/* Fiambrerías - Rosados suaves con patrón de queso */
#fiambrerias {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 30%, #fdf2f8 100%);
  position: relative;
}

#fiambrerias::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='cheese' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='10' r='3' fill='%23e91e63'/%3E%3Ccircle cx='30' cy='10' r='3' fill='%23e91e63'/%3E%3Ccircle cx='20' cy='30' r='3' fill='%23e91e63'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23cheese)'/%3E%3C/svg%3E");
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

/* Kioscos - Azul claro energético con patrón de ondas */
#kioscos {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 30%, #f5f9fd 100%);
  position: relative;
}

#kioscos::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='waves' x='0' y='0' width='60' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 10 Q15 5 30 10 T60 10 V20 H0 Z' fill='%232196f3' opacity='0.15'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23waves)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Mascotas - Tons amarillos cálidos con patrón de huellas */
#mascotas {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 30%, #fffde7 100%);
  position: relative;
}

#mascotas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='paws' x='0' y='0' width='50' height='50' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='15' r='3' fill='%23ffc107' opacity='0.3'/%3E%3Ccircle cx='20' cy='15' r='3' fill='%23ffc107' opacity='0.3'/%3E%3Ccircle cx='15' cy='25' r='4' fill='%23ffc107' opacity='0.3'/%3E%3Ccircle cx='15' cy='35' r='3' fill='%23ffc107' opacity='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23paws)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Ropa - Morado suave con patrón de telas */
#ropa {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 30%, #f9f5ff 100%);
  position: relative;
}

#ropa::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='fabric' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0,20 L40,20 M20,0 L20,40' stroke='%239c27b0' stroke-width='1' fill='none' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23fabric)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Carnicerías - Rojo tierra suave con patrón de cortes */
#carnicerias {
  background: linear-gradient(135deg, #efebe9 0%, #d7ccc8 30%, #fafafa 100%);
  position: relative;
}

#carnicerias::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='meat' x='0' y='0' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Crect x='5' y='5' width='20' height='20' rx='2' fill='%23d32f2f' opacity='0.15'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23meat)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Barberías - Grises elegantes con patrón de tijeras */
#barberias {
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 30%, #fafafa 100%);
  position: relative;
}

#barberias::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='scissors' x='0' y='0' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M15,15 L25,25 M35,15 L25,25 M25,25 L25,40' stroke='%23616161' stroke-width='2' fill='none' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23scissors)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Ferreterías - Azul acero con patrón de herramientas */
#ferreterias {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 30%, #e3f2fd 100%);
  position: relative;
}

#ferreterias::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='tools' x='0' y='0' width='50' height='50' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10,10 L20,20 M30,10 L20,20 M20,20 L20,35 M15,30 L25,30' stroke='%231976d2' stroke-width='1.5' fill='none' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23tools)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Pastas - Verde oliva suave con patrón de fideos */
#pastas {
  background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 30%, #f9f9f9 100%);
  position: relative;
}

#pastas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='pasta' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10,10 Q15,5 20,10 T30,10' stroke='%237cb342' stroke-width='2' fill='none' opacity='0.3'/%3E%3Cpath d='M10,25 Q15,20 20,25 T30,25' stroke='%237cb342' stroke-width='2' fill='none' opacity='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23pasta)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Veterinarias - Azul suave con patrón de cruces */
#veterinarias {
  background: linear-gradient(135deg, #e8f4f8 0%, #c7e9f1 30%, #f8fbfd 100%);
  position: relative;
}

#veterinarias::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='crosses' x='0' y='0' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Cpath d='M15,5 L15,25 M5,15 L25,15' stroke='%230288d1' stroke-width='2' fill='none' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23crosses)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Farmacias - Azul claro limpio con patrón de botellas */
#farmacias {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 30%, #f5f9fd 100%);
  position: relative;
}

#farmacias::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='bottles' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Crect x='15' y='10' width='10' height='20' rx='2' fill='none' stroke='%231976d2' stroke-width='1' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23bottles)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Cafeterías - Marrón café suave con patrón de granos */
#cafeterias {
  background: linear-gradient(135deg, #ede7d9 0%, #d7ccc8 30%, #f5f5f5 100%);
  position: relative;
}

#cafeterias::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='beans' x='0' y='0' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Cellipse cx='15' cy='15' rx='5' ry='3' fill='%235d4037' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23beans)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Talleres - Gris industrial con patrón de engranajes */
#talleres {
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 30%, #fafafa 100%);
  position: relative;
}

#talleres::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='gears' x='0' y='0' width='50' height='50' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='25' cy='25' r='15' stroke='%23616161' stroke-width='2' fill='none' opacity='0.2'/%3E%3Ccircle cx='25' cy='25' r='5' stroke='%23616161' stroke-width='1' fill='none' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23gears)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Librerías - Verde oscuro intelectual con patrón de libros */
#librerias {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c8 30%, #f9f9f9 100%);
  position: relative;
}

#librerias::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='books' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Crect x='5' y='5' width='10' height='30' rx='1' fill='none' stroke='%232e7d32' stroke-width='1' opacity='0.2'/%3E%3Crect x='20' y='10' width='10' height='25' rx='1' fill='none' stroke='%232e7d32' stroke-width='1' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23books)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Florerías - Rosa claro floral con patrón de flores */
#florerias {
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 30%, #fefefe 100%);
  position: relative;
}

#florerias::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='flowers' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='20' cy='20' r='5' fill='%23ec407a' opacity='0.2'/%3E%3Ccircle cx='15' cy='15' r='3' fill='%23ec407a' opacity='0.2'/%3E%3Ccircle cx='25' cy='15' r='3' fill='%23ec407a' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23flowers)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Mates - Verde mate natural con patrón de hojas de yerba */
#mates {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c8 30%, #f0f7f0 100%);
  position: relative;
}

#mates::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='yerba' x='0' y='0' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Cpath d='M15,5 Q20,10 15,15 Q10,10 15,5 Z' fill='%23388e3c' opacity='0.2'/%3E%3Cpath d='M15,15 Q20,20 15,25 Q10,20 15,15 Z' fill='%23388e3c' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23yerba)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Profesiones - Azul profesional con patrón de gráficos */
#profesiones {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 30%, #f5f9fd 100%);
  position: relative;
}

#profesiones::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='charts' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M5,35 L5,25 L10,25 L10,35' fill='%231976d2' opacity='0.2'/%3E%3Cpath d='M15,35 L15,20 L20,20 L20,35' fill='%231976d2' opacity='0.2'/%3E%3Cpath d='M25,35 L25,15 L30,15 L30,35' fill='%231976d2' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23charts)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Comida - Naranja vibrante con patrón de cubiertos */
#comida {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 30%, #fff8f0 100%);
  position: relative;
}

#comida::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='utensils' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M15,5 L15,25 M10,25 L20,25' stroke='%23fb8c00' stroke-width='2' fill='none' opacity='0.2'/%3E%3Cpath d='M25,10 L25,25 M20,25 L30,25' stroke='%23fb8c00' stroke-width='2' fill='none' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23utensils)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Granjas - Verde campo con patrón de animales */
#granjas {
  background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 30%, #e8f5e8 100%);
  position: relative;
}

#granjas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='animals' x='0' y='0' width='50' height='50' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='15' cy='15' r='5' fill='%23795548' opacity='0.2'/%3E%3Ccircle cx='35' cy='15' r='5' fill='%23795548' opacity='0.2'/%3E%3Ccircle cx='25' cy='35' r='7' fill='%23795548' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23animals)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Muebles - Marrón madera con patrón de vetas */
#muebles {
  background: linear-gradient(135deg, #ede7d9 0%, #d7ccc8 30%, #f5f5f5 100%);
  position: relative;
}

#muebles::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='wood' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0,20 Q10,15 20,20 T40,20' stroke='%238d6e63' stroke-width='1' fill='none' opacity='0.2'/%3E%3Cpath d='M0,10 Q10,5 20,10 T40,10' stroke='%238d6e63' stroke-width='1' fill='none' opacity='0.2'/%3E%3Cpath d='M0,30 Q10,25 20,30 T40,30' stroke='%238d6e63' stroke-width='1' fill='none' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23wood)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Uñas - Rosa suave con patrón de esmaltes */
#uñas {
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 30%, #fefefe 100%);
  position: relative;
}

#uñas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='nails' x='0' y='0' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Crect x='5' y='5' width='20' height='5' rx='2' fill='%23e91e63' opacity='0.2'/%3E%3Crect x='10' y='15' width='10' height='10' rx='2' fill='%23e91e63' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23nails)'/%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Estilos adicionales para mejorar la presentación */
.section-title {
  position: relative;
  z-index: 1;
  padding: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  text-align: center;
}

/* Efecto hover para las secciones */
.section-background:hover::before {
  opacity: 0.25;
  transition: opacity 0.3s ease;
}

/* Asegurar que el contenido esté por encima del patrón */
.section-content {
  position: relative;
  z-index: 1;
  padding: 20px;
}

/* Estilos para los botones de carga más */
.load-more-btn {
  position: relative;
  z-index: 2;
  margin-top: 20px;
}

/* Animación sutil para las secciones */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-background {
  animation: fadeIn 0.6s ease-out;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .section-background {
    margin: 15px 0;
    border-radius: 10px;
  }
  
  .section-title {
    padding: 15px;
    font-size: 1.5rem;
  }
  
  .section-content {
    padding: 15px;
  }
}

/* Estilos para el contenedor de tarjetas */
.cards-container {
  position: relative;
  z-index: 1;
}

/* Efecto de brillo sutil en los bordes */
.section-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 15px;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: 1;
}

/* Modal de Bienvenida */
.welcome-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(10px);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.welcome-modal.active {
  display: flex;
  opacity: 1;
}

.welcome-modal-content {
  background: #1e293b;
  border-radius: 20px;
  padding: 3px;
  max-width: 500px;
  width: 90%;
  height: 90vh;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 212, 255, 0.3);
  position: relative;
  border: 1px solid rgba(56, 189, 248, 0.2);
}
.welcome-modal-content .welcome-message {
     background: #1e293b;
    padding: 20px;
    border-radius: 15px;
    border-left: 4px solid #3498db;
    font-size: 14px;
    line-height: 1.5;
    color: #ffff;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1);
    width: 90%;
    margin: auto;
}
.welcome-logo {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  margin-bottom: 15px;
}

.welcome-title {
  color: #0ea5e9;
  font-size: 1.8rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.welcome-message {
  color: #e2e8f0;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 25px;
}

.welcome-features {
  text-align: left;
  margin: 20px 0;
  padding-left: 20px;
}

.welcome-features li {
  margin-bottom: 10px;
  color: #94a3b8;
}

.welcome-team {
  color: #64748b;
  font-style: italic;
  margin-top: 15px;
}

.welcome-btn {
  background: linear-gradient(135deg, #1e3a8a, #0ea5e9);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.welcome-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
}

/* Responsive */
@media (max-width: 576px) {
  .welcome-modal-content {
    padding: 20px;
  }
  .welcome-title {
    font-size: 1.5rem;
  }
  .welcome-message {
    font-size: 0.95rem;
  }
}

/*localStorage.removeItem('hasSeenWelcome');*/

/* Estilos generales para el modal */
.modal-xl {
  max-width: 90vw; /* Limita el ancho máximo del modal al 90% del viewport */
  margin: auto;
}

.search-results-body {
  max-height: 70vh; /* Limita la altura del cuerpo del modal */
  overflow-y: auto; /* Permite desplazamiento si hay muchos resultados */
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Cuadrícula responsiva */
  gap: 1.5rem;
}

/* Estilo para cada resultado de búsqueda (suponiendo que generas elementos dinámicamente) */
.search-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.search-result:hover {
  transform: scale(1.02); /* Efecto sutil al pasar el mouse */
}

/* Estilo para imágenes dentro de los resultados */
.search-result img {
  max-width: 100%; /* Asegura que la imagen no desborde su contenedor */
  max-height: 200px; /* Limita la altura máxima de la imagen */
  width: auto; /* Mantiene proporciones */
  height: auto;
  object-fit: contain; /* Mantiene la proporción sin recortar */
  border-radius: 8px; /* Bordes redondeados para mejor estética */
  margin-bottom: 1rem;
  transition: opacity 0.3s ease; /* Transición suave para la carga */
}

/* Ajustes para pantallas grandes */
@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1100px; /* Limita el ancho máximo en pantallas grandes */
  }

  .search-result img {
    max-height: 150px; /* Reduce la altura en pantallas grandes */
  }
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 576px) {
  .search-results-body {
    display: block !important;
    grid-template-columns: 1fr; /* Una sola columna en móviles */
    padding: 1rem;
  }

  .search-result img {
    max-height: 520px; /* Imágenes más pequeñas en móviles */
  }
}

/* Estilo para el encabezado y pie del modal */
.search-results-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.search-results-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #e0e0e0;
}

/* Asegura que las imágenes se carguen con opacidad inicial baja para transiciones suaves */
.search-result img:not([src]) {
  opacity: 0;
}

.search-result img[src] {
  opacity: 1;
}