.cont_news {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgb(33, 36, 29) 40%,
    rgba(43, 58, 12, 0.285) 100%
  );
  padding-bottom: 1rem;
  padding-top: 1rem;
  width: auto;
}

/* 🔹 Tarjeta noticia */
.contmarkr {
  height: auto !important;
  width: 900px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2rem;
  align-items: start;
  padding: 2rem;
  margin: 0 auto 8rem auto;
  background: linear-gradient(
    90deg,
    rgba(140, 235, 57, 0.285) 0%,
    rgb(69, 78, 60) 40%,
    rgb(36, 36, 36) 100%
  );
  border-radius: 20px;

  /* estado inicial animado */
  opacity: 0;
  transform: translateX(0);
  will-change: opacity, transform, filter;
  
}

/* ➡️ Entrada desde la derecha (posición inicial animación) */
.contmarkr.from-right {
  transform: translateX();
}

/* 🔥 Cuando entra en pantalla — ANIMACIÓN */
.contmarkr.news-animate {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
  transition:
    opacity 0.9s ease-out,
    filter 0.9s ease-out,
    transform 0.9s cubic-bezier(.19, 1, .22, 1);
}

/* 🔹 Imagen derecha (layout base: h2 izq, imagen der) */
.logo-ihk {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  width: 550px;
  border-radius: 12px;
  object-fit: cover;
}

/* 🔹 Título */
.contmarkr h2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 1rem 0;
  color: #fff;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
}

/* 🔹 Botón info */
.info-toggle {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  background: #ffffff;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-family: "Bruno Ace", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
  transition: all .25s ease;
  color: rgb(0, 0, 0);
}

.info-toggle:hover {
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0,0,0,0.12);
  background: #2a2a29;
}

/* 🔹 Texto oculto */
.contmarkr h5 {
  grid-column: 1 / 2;
  grid-row: 3;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  margin: 0;
  line-height: 1.65;
  font-size: 1.17rem;
  color: #ddd;
  transition:
    max-height .45s ease,
    opacity .45s ease,
    transform .45s ease;
}

/* 🔹 Texto visible */
.contmarkr h5.visible {
  max-height: 1900px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 1rem;
}

/* El h5 ya está en grid-row:3, grid-column:1/3 → ocupa toda la fila bajo h2 */


/* 🔹 Responsive */
@media (max-width: 768px) {
  .contmarkr {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.5rem;
  }
  .contmarkr,
  .contmarkr.news-animate,
  .contmarkr.from-right {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .text_card{ display: none;}
  .contmarkr.from-right {
  transform: translateX(20px);
  }

  .titulo_ban4{ font-size: 15px;}

  .logo-ihk {
    grid-column: 1;
    grid-row: 1;
    width: 150px;
    margin-bottom: 1rem;
  }

  .contmarkr h2 {
    grid-row: 2;
    width: 300px;
  }

  .info-toggle {
    justify-self: start;
    grid-row: 3;
  }

  .contmarkr h5 {
    grid-row: 4;
    width: 300px;
    text-align: start;
  }
}

/* 🎬 CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRDDDDDDDDDDDDDDDDDDDDDSSSSSSSSSSSSS */


/* 🎬 Estado inicial: apiladas y desenfocadas */

.google_icon{
    width: 2rem;
}


#google-reviews .card {
  position: relative;
  transform: translateY(40px) scale(.92);
  opacity: 0;
  filter: blur(6px);
  transition: transform 1s cubic-bezier(.19,1,.22,1),
              opacity .8s ease,
              filter .8s ease;
}

/* 🔥 Estado animado: alineadas y nítidas */
#google-reviews .card.reviews-animate {
  opacity: 1;
  filter: blur(0);
}

/* ✨ Efecto alineado con foco en la central */
#google-reviews .col:nth-child(1) .card.reviews-animate {
  transform: translateX(-140px) translateY(0) scale(.96);
}
#google-reviews .col:nth-child(2) .card.reviews-animate {
  transform: translateX(-50px) translateY(0) scale(1.02); /* 🔥 foco */
}
#google-reviews .col:nth-child(3) .card.reviews-animate {
  transform: translateX(50px) translateY(0) scale(1.02);  /* 🔥 foco */
}
#google-reviews .col:nth-child(4) .card.reviews-animate {
  transform: translateX(140px) translateY(0) scale(.96);
}


/* 📱 Móvil — sin animación y en cuadrícula */
@media (max-width: 768px) {
  #google-reviews {
    width: 100%;
  }
  

  /* cada tarjeta ocupa 50% del ancho → 2 por fila */
  #google-reviews .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  #google-reviews .col,
  #google-reviews .col-2 {
    flex: 0 0 48%; /* 🔥 4 cards totales → 2 por fila */
    max-width: 48%;
    padding: 0;
  }

    #google-reviews .card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;   /* ⬅ centra horizontal */
    justify-content: center; /* opcional */
  }


  #google-reviews .card img .img_card {
    width: 60px; /* mini avatar */
    height: 60px;
  }
  #google-reviews .card img .google_icon {
    width: 40px; /* mini avatar */
    height: 20px;
  }
  .separacion{display: none;}
}