/* General */
body {
  margin: 0;
  font-family: 'Inter', Arial, sans-serif;
  box-sizing: border-box;
}

/*-----FONTS-----*/
@font-face {
  font-family: 'Inter-Regular';
  src: url('../fonts/Inter-Regular.woff2') format('woff2'),
    url('../fonts/Inter-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Inter-Semi';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2'),
    url('../fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Inter-Bold';
  src: url('../fonts/Inter-Bold.woff2') format('woff2'),
    url('../fonts/Inter-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {

  /*COLORS*/
  --color-azul: #003DA5;
  --color-gris-principal: #1C262F;
  --color-gris-claro: #f4f4f4;
  --color-gris: #797878;
  --color-naranja1: #FF8000;
  --color-naranja2: #E3A51A;
  --color-azul-gumidog: #0a529a;
  --color-celeste: #009CDD;
  --color-morado-gumicat: #622181;
  --color-amarillo-mascotas: #edc100;
  --color-gris2: #e4e1e1;

  /*FONTS*/
  --font-regular: 'Inter-Regular';
  --font-semi: 'Inter-Semi';
  --font-bold: 'Inter-Bold';

  --global-url: "https://www.grupojimenez.info/";
}

/*SELECCIÓN DE TEXTO*/
::selection {
  background: var(--color-naranja1);
  color: white;
}

::-moz-selection {
  background: var(--color-naranja1);
  color: white;
}

/**************************
     ANCHO LAPTOP
***************************/
.ancho {
  box-sizing: border-box;
  height: 100%;
  margin: 0 auto;
  width: 100%;
  /*  padding: 0 15px; */
  min-width: 320px;
  max-width: 1600px;
}

@media (min-width: 1025px) {
  .ancho {
    width: 85%;
    min-width: 1025px;
  }
}

/**************************
     BOTONES
***************************/
.gumi-btn-container {
  font-family: 'inter';
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.gumi-btn-gris,
.gumi-btn-naranja {
  display: inline-flex;
  padding: 13px 20px;
  color: white;
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  border: none;
  max-width: 100%;
  width: auto;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.gumi-btn-gris::before,
.gumi-btn-naranja::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1;
  transition: width 0.4s ease;
}

.gumi-btn-gris {
  background-color: var(--color-gris-principal);
}

.gumi-btn-gris::before {
  background-color: var(--color-naranja1);
}

.gumi-btn-gris:hover::before {
  width: 120%;
}

.gumi-btn-naranja {
  background-color: var(--color-naranja1);
  font-family: var(--font-boton);
}

.gumi-btn-naranja::before {
  background-color: var(--color-gris-principal);
}

.gumi-btn-naranja:hover::before {
  width: 120%;
}

@media (max-width: 768px) {

  .gumi-btn-gris,
  .gumi-btn-naranja {
    font-size: 14px;
    padding: 10px 20px;
  }
}

/**************************
  NOTICIAS-HOME
***************************/
.noticias-home-container {
  background-color: white;
  padding-top: 50px;
  padding-bottom: 50px;
}

.noticias-home-title {
  font-family: var(--font-title);
  font-size: 35px;
  color: var(--color-gris-principal);
  text-align: center;
}

.noticias-home-subtitle {
  font-family: var(--font-regular);
  font-size: 20px;
  color: var(--color-gris-principal);
  text-align: center;
}

.noticias-home-slider-wrapper {
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  cursor: grab;
}

.noticias-home-card-list {
  display: flex;
  transition: transform 0.5s ease;
}

.noticias-home-card-item {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  /* border: 1px solid var(--color-gris);
  border-radius: 10px;
  margin: 10px; */
}

.noticias-home-image-container {
  position: relative;
  width: 100%;
  height: 250px;
  margin-bottom: 15px;
  overflow: hidden;
}

.noticias-home-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}

.noticias-home-card-item:hover .noticias-home-card-image {
  transform: scale(1.1);
}

/* ========== TEXTOS / LINKS ========== */
.noticias-home-product-link {
  text-decoration: none;
  color: inherit;
  display: block;
  border: 1px solid var(--color-gris-claro);
  border-radius: 0 0 10px 10px;
  margin: 10px; 
}

.noticias-home-text {
  font-family: var(--font-bold);
  color: var(--color-gris-principal);
  font-size: 20px;
  font-weight: normal;
  text-align: center;
  line-height: 1.3;
  transition: color 0.3s ease;
  cursor: pointer;
}

.noticias-home-product-link:hover .noticias-home-text {
  color: var(--color-naranja1);
}

/* ========== PAGINACIÓN ========== */
.noticias-home-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.noticias-home-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--color-naranja1);
  border-radius: 50%;
  cursor: pointer;
}

.noticias-home-pagination-bullet.active {
  background-color: var(--color-gris-principal);
}

/* ========== NAVEGACIÓN ========== */
.noticias-home-nav-button {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.noticias-home-nav-button.noticias-home-prev {
  left: -0px;
}

.noticias-home-nav-button.noticias-home-next {
  right: -0px;
}

.noticias-home-nav-button img {
  width: 45px;
  height: 45px;
}

/* En desktop: pegados a los bordes */
.noticias-home-nav-button.noticias-home-prev {
  left: -5px;
}

.noticias-home-nav-button.noticias-home-next {
  right: -5px;
}


/* ========== RESPONSIVE ========== */
@media screen and (max-width: 1024px) {
  .noticias-home-card-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 620px) {
  .noticias-home-card-item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .noticias-home-image-container {
    height: 220px;
    /* 🔹 aumentado en mobile */
  }

  .noticias-home-card-image {
    object-position: center center;
    /* 🔹 centrada en ambos ejes */
  }
}

@media (max-width: 768px) {
  .noticias-home-container {
    padding: 20px;
  }

  .noticias-home-title {
    margin-top: 30px;
    font-size: 30px;
    font-weight: bold;
  }

  .noticias-home-text {
    font-size: 18px;
  }

  .noticias-home-nav-button img {
    width: 40px;
    height: 40px;
  }

  .noticias-home-nav-button.noticias-home-prev {
    left: -5px;
  }

  .noticias-home-nav-button.noticias-home-next {
    right: -5px;
  }
}

/**************************
  NUESTRAS MARCAS HOME
***************************/
.container-carrucel {
  background-color: white;
  padding-top: 50px;
  padding-bottom: 50px;
}

.title_carrucel {
  font-family: var(--font-bold);
  font-size: 35px;
  font-weight: normal;
  color: var(--color-gris-principal);
  text-align: center;
}

.parrafo_carrucel {
  font-size: 23px;
  color: #009CDD;
  text-align: center;
  margin-bottom: 50px;
}

.slider-wrapper {
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  cursor: grab;
}

.card-list {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}

.card-item {
  flex: 0 0 25%;   /* Desktop: 4 logos */
  max-width: 25%;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #003DA5;
}

.card-item p {
  font-family: var(--font-bold);
  font-weight: normal;
  color: var(--color-azul);
  font-size: 25px;
  margin-top: 10px;
}

.card-image {
  width: 100%;
  max-width: 160px; /* logos grandes */
  height: auto;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--color-gris-principal);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.pagination-bullet.active {
  background-color: var(--color-naranja1);
}

.nav-boton {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.nav-boton.prev {
  left: -6px;
}

.nav-boton.next {
  right: -6px;
}

.nav-boton img {
  width: 45px;
  height: 45px;
}

/* Tablet */
@media screen and (max-width: 1024px) {
  .card-item {
    flex: 0 0 50%;  /* 2 logos visibles */
    max-width: 50%;
  }
}

/* Móvil */
@media screen and (max-width: 620px) {
  .card-item {
    flex: 0 0 100%; /* 1 logo */
    max-width: 100%;
  }

  .nav-boton.prev {
    left: 13px;
  }

  .nav-boton.next {
    right: 13px;
  }

  .title_carrucel {
  font-size: 30px;
  padding: 20px;
}
}

.product-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/**************************
        FOOTER
***************************/
.footer {
  position: relative;
 /* clip-path: ellipse(118vw 100% at 50% 100%); */
  background-color: var(--color-gris-principal);
  color: white;
  padding-top: 40px;
  z-index: 1;
}

.footer-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding-bottom: 20px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}

.footer-column img {
  max-width: 160px;
  margin: 10px 0;
}

.footer-column h2 {
  font-family: var(--font-bold);
  color: var(--color-naranja2);
  font-weight: normal;
  font-size: 25px;
  margin-bottom: 10px;
}

.parrafo-razon {
  font-family: 'Inter';
  color: var(--dorado);
  font-size: 14px;
  line-height: 1.6;
}

.phone-number {
  font-family: var(--font-bold);
  font-size: 25px;
  color: white;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 10px;
  transition: color 0.3s;
}

.phone-number:hover {
  color: var(--color-naranja2);
}

.address {
  font-size: 14px;
  color: white;
  text-decoration: none;
  transition: color 0.3s;
  display: block;
}

.address:hover {
  color: var(--color-naranja2);
}

.menu-footer {
  font-family: var(--font-regular);
  font-size: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-footer li {
  margin-bottom: 6px;
  transition: transform 0.3s;
}

.menu-footer a {
  color: white;
  text-decoration: none;
  transition: color 0.3s, transform 0.3s;
}

.menu-footer a:hover {
  color: var(--color-naranja2);
}

.menu-footer li:hover {
  transform: translateX(6px);
}

.menu-posicion {
  margin-left: 100px;
}

.redes-posicion {
  margin-left: 100px;
}

.social-iconos {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.social-iconos img {
  width: 35px;
  transition: transform 0.3s, filter 0.3s;
}

.social-iconos a:hover img {
  filter: brightness(0) saturate(100%) invert(45%) sepia(84%) saturate(383%) hue-rotate(11deg);
  transform: scale(1.2);
}

.links {
  font-family: var(--font-regular);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.links a {
  color: white;
  text-decoration: none;
  transition: color 0.3s, transform 0.3s;
}

.links a:hover {
  color: var(--color-naranja2);
  transform: translateX(6px);
}

.footer-botom {
  max-width: 1200px;
  margin: 30px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid white;
  padding-top: 10px;
  font-size: 13px;
}

.footer-botom a {
  color: var(--color-naranja1);
  text-decoration: none;
}

.footer-botom a:hover {
  color: var(--color-naranja2);
}

/* Responsive */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-column {
    margin: 10px 0;
  }

  .social-iconos {
    justify-content: center;
  }

  .links {
    align-items: center;
  }

  .footer-botom {
    flex-direction: column;
    text-align: center;
    gap: 5px;
  }

  .footer {
    clip-path: ellipse(300vw 100% at 50% 100%);
  }
}