.hero {
  position: relative;
  height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;
  z-index: 20;
}

.hero::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -10px;
  width: 104%;
  height: 104%;
  background-image: url("../img/ruta-uruguay.jpg");
  background-size: cover;
  background-position: center;
  filter: brightness(0.7) blur(4px);
  z-index: 1;
}

/* Coverage Section */
.coverage-section {
  display: flex;
  flex-direction: column;
  min-height: 600px;
}

.map-container {
  position: relative;
  height: 600px;
}

.background-image {
  position: absolute;
  inset: 0;
  background-image: url("placeholder.svg?height=600&width=800");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.map-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: auto;
}

.content-container {
  padding: 2rem;
  color: #4a4a4a;
}

.content-container > h2 {
  color: #8b0000; /* Cambiado a rojo oscuro */
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.subtitle {
  margin-bottom: 1.5rem;
}

.site-section ul li {
    position: relative;
    padding-left: 0;
    margin-bottom: 7px;
}

.question-list {
  list-style-type: none;
  padding: 0;
}

.question-list li {
  display: flex;
  align-items: start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.list-icon {
  flex-shrink: 0;
  margin-top: 0.7rem;
  color: #8b0000; /* Rojo oscuro */
}

.contact-text {
  margin-bottom: 1rem;
}

.button-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.btn svg {
  margin-right: 0.5rem;
}

.btn-phone {
  background-color: #000; /* Cambiado a negro */
  color: #fff;
}

.btn-phone:hover {
  background-color: #333; /* Cambiado a tono más claro */
}

.btn-whatsapp {
  background-color: #8b0000; /* Cambiado a rojo oscuro */
  color: #fff;
}

.btn-whatsapp:hover {
  background-color: #a00000; /* Cambiado a otro rojo */
}

@media (min-width: 768px) {
  .coverage-section {
    flex-direction: row;
  }

  .map-container {
    flex: 1;
    height: auto;
  }

  .content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .button-container {
    flex-direction: row;
  }

  h2 {
    font-size: 3rem;
  }
}

/* Marcas Section */
.marcas-hero-content {
  position: relative;
  max-width: 1200px;
  padding: 0 20px;
  z-index: 2;
  text-align: center;
  opacity: 0.9;
}

.hero-title {
  font-family: Arial, sans-serif;
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  color: white;
}

.hero-description {
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  color: white;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-description {
    font-size: 1rem;
  }
}

h1:first-of-type {
  margin-top: 1em;
}

.news-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1em;
  text-align: center;
}

.article-title {
  font-size: 3rem; /* Increase font size */
  font-weight: bold;
  text-transform: uppercase;
  color: #1f2937; /* text-gray-900 */
  text-align: center; /* Center the title */
}
.article-wrapper {
  display: grid;
  gap: 20px; /* Espacio entre columnas */
  padding: 20px;
}
.article-container {
  display: flex;
  background-color: white;
  transition: box-shadow 0.3s;
}

.article-container:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.article-date {
  transform: rotate(180deg);
  padding: 0.5rem;
  writing-mode: vertical-lr;
}

.time-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: bold;
  color: #1f2937;
  /* text-gray-900 */
}

.divider {
  width: 1px;
  flex-grow: 1;
  background-color: rgba(31, 41, 55, 0.1);
  /* bg-gray-900/10 */
}

.article-image {
  display: none;
}

@media screen and (min-width: 640px) {
  .article-image {
    display: block;
    flex-basis: 14rem;
    /* sm:basis-56 */
  }

  .article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
  }
}

.article-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.article-text {
  border-left: 1px solid rgba(31, 41, 55, 0.1);
  /* border-gray-900/10 */
  padding: 1rem;
}

@media screen and (min-width: 640px) {
  .article-text {
    padding: 1.5rem;
    border-left-color: transparent;
  }
}

.article-title {
  font-size: 1.125rem;
  /* text-lg */
  font-weight: bold;
  text-transform: uppercase;
  color: #1f2937;
  /* text-gray-900 */
}

.article-description {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  /* text-sm */
  line-height: 1.75rem;
  color: #374151;
  /* text-gray-700 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-button {
  display: flex;
  justify-content: flex-end;
}

.button-read {
  display: block;
  background-color: #fbbf24;
  /* bg-yellow-300 */
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  /* text-xs */
  font-weight: bold;
  text-transform: uppercase;
  color: #1f2937;
  /* text-gray-900 */
  transition: background-color 0.3s;
}

.button-read:hover {
  background-color: #f59e0b;
  /* hover:bg-yellow-400 */
}

.image-grid {
  display: grid;
  gap: 20px;
}

@media (max-width: 640px) {
  .image-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1025px) {
  .image-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

img {
  display: block;
  max-width: 150%;
}

@media (max-width: 640px) {
  .hero {
    height: 50vh;
  }
  .map-container {
    height: 400px;
  }
}

/* Product Card Styles (Text-Based) */
.brand-text-logo {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    color: white;
    text-align: center;
    width: 100%;
    padding: 0 10px;
    z-index: 10;
}

.brand-text-logo.dark-text {
    color: #333;
}

/* Background Utility Classes */
.bg-blue { background-color: #004685; }
.bg-light-blue { background-color: #4AA0E6; }
.bg-dark-blue { background-color: #002366; }
.bg-green { background-color: #009045; }
.bg-light-green { background-color: #7AC142; }
.bg-red { background-color: #E3001B; }
.bg-orange { background-color: #FF6600; }
.bg-yellow { background-color: #FFC107; }
.bg-purple { background-color: #662D91; }
.bg-pink { background-color: #E91E63; }
.bg-gray { background-color: #808080; }
.bg-light-gray { background-color: #F0F0F0; }
.bg-white { background-color: #FFFFFF; }
.bg-black { background-color: #000000; }

/* Specific Brand Colors */
.bg-nevex { background-color: #003399c4; }
.bg-granby { background-color: #0055aad5; }
.bg-vivere { background-color: #fa9eccf3; }
.bg-comfort { background-color: #0099FF; }
.bg-lux { background-color: #D4AF37; }
.bg-suave { background-color: #FF6666; }
.bg-ponds { background-color: #FFCCCC; }
.bg-savora { background-color: #FFCC00; }
.bg-maizena { background-color: #FFFF00; }

.bg-contrast-astral { background-color: #E8F1FF; }
.bg-contrast-fabuloso { background-color: #FFF1B8; }
.bg-contrast-kolynos { background-color: #FBE1E6; }
.bg-contrast-speed { background-color: #E4F7E7; }
.bg-contrast-periodont { background-color: #DDEEFF; }
.bg-contrast-pico { background-color: #FFE0C2; }
.bg-contrast-colgate { background-color: #E4F7E7; }
.bg-contrast-palmolive { background-color: #FAD6D1; }
.bg-contrast-protex { background-color: #DCEBFF; }
.bg-contrast-elite { background-color: #FBE1E6; }
.bg-contrast-babysec { background-color: #EDE8FF; }
.bg-contrast-ladysoft { background-color: #FBE1E6; }
.bg-contrast-higienol { background-color: #DDEEFF; }
.bg-contrast-nova { background-color: #E8F1FF; }
.bg-contrast-sublime { background-color: #FFE0C2; }
.bg-contrast-noble { background-color: #FAD6D1; }
.bg-contrast-cotidian { background-color: #FBE1E6; }
.bg-contrast-coopar { background-color: #FFF1B8; }
.bg-contrast-greenchef { background-color: #FAD6D1; }
.bg-contrast-bluepatna { background-color: #FFD8B5; }
.bg-contrast-shiva { background-color: #DCEBFF; }
.bg-contrast-dolcelight { background-color: #E4F7E7; }
.bg-contrast-saint-cafe { background-color: #F3E6D3; }
.bg-contrast-sweetlife { background-color: #FFF3C4; }
.bg-contrast-manzanares { background-color: #F3D6C2; }
.bg-contrast-sugar-free { background-color: #FFE0C2; }

.image-overlay.nevex {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/nevex-back.jpg');
}

.image-overlay.granby {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/granby-back.jpg');
}

.image-overlay.vivere {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/vivere-back.jpg');
}

.image-overlay.comfort {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/comfort-back.png');
}

.image-overlay.bulldog {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/bulldog-back.png');
}

.image-overlay.tresemme {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/tresemme-back.jpg');
}

.image-overlay.lux {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/lux-back.png');
}

.image-overlay.suave {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/suave-back.png');
}

.image-overlay.ponds {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/ponds-back.webp');
}

.image-overlay.savora {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/savora-back.png');
}

.image-overlay.maizena {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/maizena-back.png');
}

.image-overlay.huggies {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/huggies-back.png');
}

.image-overlay.kotex {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/kotex-back.jpg');
}

.image-overlay.mimosa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/mimosa-back.png');
}

.image-overlay.kolynos {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/kolynos-back.jpg');
}

.image-overlay.periodont {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/periodont-back.jpg');
}

.image-overlay.pico {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/pico-back.jpg');
}

.image-overlay.astral {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/astral-back.jpg');
}

.image-overlay.fabuloso {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/fabuloso-back.jpg');
}

.image-overlay.speed {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/speedstick-back.webp');
}

.image-overlay.colgate {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/marcas/fondo-colgate.avif');
}

.image-overlay.palmolive {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/palmolive-back.avif');
}

.image-overlay.axion {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/axion-back.jpg');
}

.image-overlay.protex {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/protex-back.png');
}

.image-overlay.elite {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/elite-back.jpg');
}

.image-overlay.babysec {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/babysec-back.jpg');
}

.image-overlay.ladysoft {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/ladysoft-back.jpg');
}

.image-overlay.higienol {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/higienol-back.jpg');
}

.image-overlay.nova {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/nova-back.jpg');
}

.image-overlay.sublime {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/sublime-back.jpg');
}

.image-overlay.noble {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/noble-back.jpg');
}

.image-overlay.cotidian {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/cotidian-back.jpg');
}

.image-overlay.coopar {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/coopar-back.png');
}

.image-overlay.greenchef {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/greenchef-back.png');
}

.image-overlay.bluepatna {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/bluepatna-back.png');
}

.image-overlay.dolcelight {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/dolcelight-back.png');
}

.image-overlay.shivapatna {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/shiva-back.png');
}

.image-overlay.saint-cafe {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/saintcafe-back.png');
}

.image-overlay.sweetlife {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/sweetlife-back.png');
}

.image-overlay.manzanares {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/manzanares-back.png');
}

.image-overlay.sugarfree {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/fondos-distribucion/sugarfree-back.png');
}

/* Ensure text logos visibility */
.image-column .solid-background {
    opacity: 1; /* Always visible for text cards */
}

.image-column .image-overlay + .solid-background {
    opacity: 0;
}

/* Hover effect for text cards to match image cards */
.image-column:hover .solid-background {
    opacity: 0.9;
}

.image-column:hover .image-overlay + .solid-background {
    opacity: 1;
}

/* Logo container adjustment for text */
.logo-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    z-index: 2;
}

.logo-container::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64%;
    height: 46%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.72) 42%, rgba(255, 255, 255, 0) 76%);
    filter: blur(12px);
    opacity: 0.88;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.logo-container .logo {
    position: relative;
    z-index: 1;
}

.colgate-palmolive-logos .logo-container,
.softys-logos .logo-container {
    padding: 1.25rem;
}

.colgate-palmolive-logos .logo,
.softys-logos .logo {
    max-height: 90% !important;
    width: auto;
}

.colgate-palmolive-logos .logo-container::before,
.softys-logos .logo-container::before,
.maestros-cafeteros-logos .logo-container::before {
    width: 78%;
    height: 56%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.34) 44%, rgba(255, 255, 255, 0) 78%);
    opacity: 0.72;
}

.colgate-palmolive-logos .image-column:hover .logo,
.softys-logos .image-column:hover .logo {
    transform: scale(1.18);
}

.colgate-palmolive-logos .image-column,
.softys-logos .image-column {
    min-height: 220px;
}

.colgate-palmolive-logos img[alt="Astral Logo"] { max-width: 118% !important; }
.colgate-palmolive-logos img[alt="Fabuloso Logo"] { max-width: 108% !important; }
.colgate-palmolive-logos img[alt="Kolynos Logo"] { max-width: 118% !important; }
.colgate-palmolive-logos img[alt="Speed Stick Logo"] { max-width: 104% !important; }
.colgate-palmolive-logos img[alt="Periodont Logo"] { max-width: 118% !important; }
.colgate-palmolive-logos img[alt="Pico Jenner Logo"] { max-width: 118% !important; }
.colgate-palmolive-logos img[alt="Colgate Logo"] { max-width: 92% !important; }
.colgate-palmolive-logos img[alt="Palmolive Logo"] { max-width: 84% !important; }
.colgate-palmolive-logos img[alt="Protex Logo"] { max-width: 116% !important; }

.softys-logos img[alt="Elite Logo"] { max-width: 72% !important; }
.softys-logos img[alt="Babysec Logo"] { max-width: 112% !important; }
.softys-logos img[alt="Ladysoft Logo"] { max-width: 108% !important; }
.softys-logos img[alt="Higienol Logo"] { max-width: 108% !important; }
.softys-logos img[alt="Nova Logo"] { max-width: 108% !important; }
.softys-logos img[alt="Sublime Logo"] { max-width: 108% !important; }
.softys-logos img[alt="Noble Logo"] { max-width: 108% !important; }
.softys-logos img[alt="Cotidian Logo"] { max-width: 108% !important; }

.maestros-cafeteros-logos img[alt="Sweetlife Logo"] { max-width: 112% !important; }
.maestros-cafeteros-logos img[alt="Manzanares Logo"] { max-width: 126% !important; }

/* Remove old product list container margin if present in HTML */
.product-list-container {
    display: none;
}