body {
  margin: 0;
  background-color: var(--background-color);
}

.contenedor {
  margin: 0;
}



main {
  align-items: center;
  justify-content: center;
  padding: 0.5em 0em;
  display: block;
}

/* Panel: panel contenedor de carouselPanel */
/* Define el ancho y alto máximo para el contenedor del carouselPanel */
.Panel {
  align-items: center;
  justify-content: center;
  /* W 1500 X 300  C/U 200X300 */
  max-width: 100%;
  min-height: 300px;
  height: 300px;
  border: 0px solid var(--card-border-color);
  object-fit: cover !important;
}
.carousel-generos h2 {
  font-family: var(--font-title);
  text-align: center;
  color: var(--txt);
  margin-bottom: 0.5em;
}
/* Ajuste para carousel #carouselPanel */
/* Ajusta el panel tamaño */
.Panel #carouselPanel {
  perspective: none;
  min-height: 300px !important;
  height: auto !important;
  background-color: var(--card-bg-color);
  padding: 0px !important;
  margin: 0px !important;
  object-fit: cover !important;
  border: none !important;
}

/* div contenedor de card para carouselPanel */
#carouselPanel .carousel-item {
  /* Asegúrate de que la imagen no se salga de la card */
  overflow: hidden !important;
  width: 200px !important;
  min-height: 100% !important;
  height: 100% !important;
  background-color: var(--card-bg-color);
  border: none !important;
  border-radius: 2em;
  object-fit: cover !important;
  margin: 0px !important;
  padding: 10px !important;

}

/* div .card contenedor de datos de tarjeta de carouselPanel */
#carouselPanel .carousel-item .card {
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  border-radius: 2em;
  border: 1px solid var(--card-border-color);
  margin: 0 !important;
  padding: 0 !important;
}

/* div contenedor de img y card-title */
#carouselPanel .carousel-item .card .card-image {
  width: 100%;
  height: 100% !important;
  /* Ajuste del tamaño de la imagen */
  overflow: hidden;
  /* Asegúrate de que la imagen no se salga de la card */
  border-radius: 1em;
  object-fit: cover;
  object-position: center;
  border: none !important;

}

/* Controla de img de carosuselPanel */
#carouselPanel .carousel-item .card .card-image img {
  border-radius: 2em;
  height: 100%;
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  border: none !important;
}

/* Texto de imagen de la card de carouselPanel */
#carouselPanel .carousel-item .card .card-image .card-title {
  position: absolute;
  top: 20px;
  left: 0px;
  text-align: center;
  color: var(--txt-muted);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 50px !important;
  padding: 0 !important;  
}

/*************************************************/
/*--------- Seccion de Envios------------------*/
/*seccion contenedora*/
.envios {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--card-border-color);
  margin: 1em 0em 1em 0em;
  justify-content: center;
}

/*titulo de seccion*/
.envios h3 {
  width: 100%;
  margin-top: 0;
  text-align: center;
  background-color: var(--card-bg-color);
  font-family: var(--font-title);
}

.envios .detalleEnvios {
  margin-top: 0.5em;
  border-radius: 1em;
  gap: 1.5em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.envios .detalleEnvios .empresaEnvios {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  
}

/* Carta */
.envios .detalleEnvios .empresaEnvios .card {
  border: 1px solid var(--card-border-color);
  display: flex;
  flex-direction: column;
  max-width: 600px;
  width: 600px;
  height: 300px;
  border-radius: 1em;
  transition: transform 0.2s ease-in-out;
  

}

.envios .detalleEnvios .card:hover {
  transform: scale(1.03);
}

/* Contenedor de imagen */
.envios .card .card-image {
  background-color: var(--btn-txt);
  height: 300px;
  width: 100%;
  border-radius: 1em 1em 0em 0em;
}

/* Tamaño de imagen de logo */
.envios .card .card-image img {
  width: 100%;
  height: 100%;
}

.envios #viaCargo img {
  padding: 1em;
}

.envios #correoArg img {
  margin-bottom: 1em;
}

/* Contenido de la tarjeta */
.envios .detalleEnvios .card .card-content {
  height: 100%;
  border-radius: 0em 0em 1em 1em;
  background-color: var(--green) !important;
}

.envios .detalleEnvios .empresaEnvios .card .card-content .card-title {
  color: var(--btn-txt) !important;
}

.envios .detalleEnvios .empresaEnvios .card .card-content .card-title:hover {
  color: var(--red-accent) !important;
}

.envios .card .card-content p {
  color: var(--btn-txt) !important;
  font-family: var(--font-primary) !important;
  
}

/* COSTO DE ENVIO REVEAL */
/* Div contenedor de colección */
.envios .card .card-reveal {
  width: 100%;
  align-items: center;
  color: var(--btn-txt) !important;
}

/*card content en comun */
.envios .card .card-reveal .card-content {
  background-color: var(--btn-txt) !important;
  padding: 0;
}

/*datos*/
.envios .card .card-reveal .card-content .datos p {
  color: var(--txt) !important;
  font-family: var(--font-primary);
}

/*card content => clasico - prioritario*/
.envios .card .card-reveal .cla-pri {
  height: 450px;
}

/*nacional-regional */
.envios .card .card-reveal .nac-reg {
  margin: 0;
  padding: 0;
}

.envios .card .card-reveal .nac-reg .costoEnvioC {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.envios .card .card-reveal .costoEnvioC section {
  width: 100%;
}

.envios .card .card-reveal .costoEnvioC section ul li {
  color: var(--txt-light) !important;
  font-family: var(--font-primary);
}

/* referencia de envios*/
.envios .detalleEnvios .empresaEnvios .card .card-reveal .referencia {
  color: var(--txt);
  font-family: var(--font-primary);
}

.envios .detalleEnvios .empresaEnvios .card .card-reveal .referencia a {
  color: var(--red-accent) !important;
}

#viaCargo .card .card-reveal p {
  color: var(--txt) !important;
}

/*--------------- Seccion Retiros ----------*/
.retirosDiv {
  text-align: center;
  margin-top: 2em;
  padding: 1em;
}

.retirosDiv h5 {
  font-size: 1.6em;
  color: var(--txt);
  font-weight: 500;
  font-family: var(--font-title);
}

/* Contenedor de las tarjetas */
.retirosDiv .retiros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
  margin-top: 1.5em;
}

/* Cada tarjeta */
.retiros-article {
  flex: 1 1 300px;
  max-width: 350px;
}

/* Tarjeta general */
.retiros .card {
  background-color:var(--green);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
  overflow: hidden;
}

.retiros .card:hover {
  transform: scale(1.03);
}

/* Contenido tarjeta */
.retiros .card-content {
  padding: 1.2em 1.4em;
  color: var(--btn-txt) !important;
  flex-grow: 1;
}

/* Título */
.retiros .card-title {
  font-size: 1.6em;
  color: var(--green-light);
  margin-bottom: 0.5em;
}

/* Texto */
.retiros .card p {
  font-size: 1.1em;
  line-height: 1.5em;
  margin-bottom: 0.5em;
}

/* Zona de enlaces */
.retiros .card-action {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5em;
  padding: 0.8em 0.5em;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.retiros .card-action a {
  color: #c6ff00;
  font-weight: bold;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.3em;
  transition: color 0.2s;
}

.retiros .card-action a:hover {
  color: #ffff99;
}

/* Íconos dentro de los enlaces */
.retiros .card-action i.material-icons {
  font-size: 1.3em;
}

/*------------------ Sección Contacto ---------------------------*/
#contactoLink .card-content {
  text-align: center;
}

#contactoLink .card-action {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5em;
}

#contactoLink .card-action ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

#contactoLink .card-action ul li {
  list-style: none;
}

#contactoLink .card-action ul img {
  width: 45px;
  height: 45px;
  transition: transform 0.2s;
}

#contactoLink .card-action ul img:hover {
  transform: scale(1.1);
}

/******************** Media Queries ***************/
@media (max-width: 700px) {
  /*************************************************/
  /*--------- Ajustes Responsive ------------------*/

  /* Título */
  .detalleEnvios h4 {
    font-size: 1.1em;
    padding: 0.5em;
  }

  /* Contenedor de todas las cards */
  .envios .detalleEnvios {
    gap: 1rem;
    padding: 0rem;
  }

  .envios .detalleEnvios .empresaEnvios {
    width: 100%;
  }

  /* Cada card ocupa casi todo el ancho */
  .envios .detalleEnvios .empresaEnvios .card {
    width: 90%;
    height: auto;
    /* deja que crezca con el contenido */
  }

  /* Imagen más pequeña para móviles */
  .envios .card .card-image {
    height: 150px;
  }

  .envios .card .card-image img {
    padding: 0.3em;
  }

  /* Texto dentro del contenido */
  .envios .card .card-content {
    padding: 0.8em;
  }

  .envios .card .card-content p {
    font-size: 0.9em;
  }

  /* Contenido del card-reveal */
  .envios .card .card-reveal {
    max-height: none;
    /* permite scroll total */
    padding: 1em;
  }

  /* Tablas y secciones de costos */

  .envios .card .card-reveal .costoEnvioC section {
    width: 100%;
    min-width: auto;
  }

  /* Texto general */
  .envios .card .card-reveal p,
  .envios .card .card-reveal .datos p {
    font-size: 0.85em;
  }

  /* Retiros   -----------------------------------------------------------------*/
  .retirosDiv .retiros {
    flex-direction: column;
    align-items: center;
  }

  .retiros-article {
    flex: 1 1 200px;
    width: 90%;
    height: auto;
  }

  .retiros .card {
    height: auto;
  }

  #contactoLink .card-action ul img {
    width: 40px;
    height: 40px;
  }
}



@media (max-width: 480px) {

  /* Cards más compactas */
  .envios .card {
    width: 95%;
    max-width: 350px;
  }

  .envios .card .card-image {
    height: 120px;
  }

  .envios .card .card-content p {
    font-size: 0.85em;
    line-height: 1.3;
  }

  .envios .card .card-reveal {
    font-size: 0.85em;
  }

  /* Tabs centradas y más grandes al tacto */
  .envios .card .card-reveal .tabs {
    font-size: 0.9em;
  }

  /* Ajustes de título */
  .detalleEnvios h4 {
    font-size: 1em;
  }
}