:root{
  --primario: #EF7E25;
  --primarioOscuro: #E05711;
  --secundario: #515250;
  --blanco: #fff;
  --negro: #000;
  --fuente: "Poppins", sans-serif;
  --fuente2: "Oswald", sans-serif;
}
/* ===== GRID BASE ===== */
.beneficios{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  justify-items: center;
}
.height{
 max-width: 110rem;
 margin: auto;
}
section{
  font-family: var(--fuente2);
}
section h3{
  font-weight: 750;
}
h3{
  line-height:1.1;
}

/* ===== TITULO ===== */
h1{
  text-align: center;
}
/* ===== IMAGEN ===== */
.beneficios img{
  width: 100%;
  max-width: 340px;   /* GRANDE */
  margin: 0 auto 2rem;
}

/* ===== TEXTO ===== */
.beneficios h3{
  font-size: 3rem;
}

.beneficios p{
  font-size: 2rem;
  text-align: center;
}

.section{
  margin-bottom: 5rem;
}

/* ========================= */
/* LAPTOP / PANTALLA MEDIANA */
/* ========================= */
@media (max-width: 1020px){
  .beneficios{
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }

  .beneficio:nth-child(3){
    grid-column: 1 / -1;
    max-width: 75%;
    margin: 0 auto;
  }

  .beneficios img{
    max-width: 320px;
  }
}

/* ========= TABLET ========= */
@media (max-width: 768px){
  h1{
    font-size: 5rem;
  }

  .beneficios img{
    max-width: 300px;
  }

  .beneficios h3{
    font-size: 2.5rem;
  }

  .beneficios p{
    font-size: 1.8rem;
  }
}

/* ========= MOBILE ========= */
@media (max-width: 469px){
  .beneficios{
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .beneficios img{
    max-width: 320px;   /* AQUÍ SE VEN GRANDES */
  }

  h1{
    font-size: 3.8rem;
  }

  .beneficios h3{
    font-size: 2.2rem;
  }

  .beneficios p{
    font-size: 1.6rem;
  }
}

/* ===== MOBILE CHICO ===== */
@media (max-width: 410px){
  .beneficios img{
    max-width: 280px;
  }

  h1{
    font-size: 3rem;
  }

  .beneficios h3{
    font-size: 2rem;
  }

  .beneficios p{
    font-size: 1.4rem;

  }
}
h1{
  font-size:6rem;
  text-align:center;
  margin:3rem;
}
@media (max-width:768px){
  h1{ font-size: 7rem;
    margin:2rem;
  }
  
}
@media (max-width:520px){
  h1{ font-size: 5rem;
    margin:1.9rem;
  }
  
}
@media (max-width:417px){
  h1{ font-size: 4.3rem;
    margin:2rem;
  }
  
}
@media (max-width:360px){
  h1{ font-size: 4rem;
    margin:2rem;
  }
  
}
@media (max-width:290px){
  h1{ font-size: 3rem;margin:1rem;}
}
/**
/*seccion diseño degradado1*/

.bloque-servicio{
  display: flex;
  height: 460px;
  position: relative;
  overflow: hidden; /* IMPORTANTE */
}
.contenido{
  position: relative;
  z-index:2;
  margin-left: -3px;
  background:linear-gradient(to right,#EF7E25, #ef7d25,#E05711);
}
.img-lado {
  width: 35%;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #ef7d258a 70%,
      #EF7E25 100%
    ),
    url("/imagenes/dising/edicion.webp");
  background-size: cover;
  background-position: center;
} 
.contenido {
  width: 80%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  padding-right: 6rem;
}
.contenido h3{
    font-size:7rem;
    text-align: end;
    padding-bottom: 1rem;
    margin-right: 0;
}
.contenido a{
  width: 21rem;
  padding: 1rem;
  border-radius:40PX;
  border: none;
  background: #444;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font-size: 2.5rem;
  text-align: center ;
    transition: 
  transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
  background-color 0.6s ease;
  color: 0.6s ease;
  transform-origin: right center;
}
.contenido a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--blanco);
  color: var(--secundario);
}
.contenido p{
  text-align: end;
  font-size: 3rem;
  padding-bottom: 1rem;
}
/*seccion diseño blanco2*/
.bloque-servicio-blanco{
  display: flex;
  height: 460px;
  flex-direction: row-reverse;
  position: relative;
  overflow: hidden; /* IMPORTANTE */
}
.img-lado-blanco {
  width: 40%;
  background:
    linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0%,
      #ffffff8a 70%,
      #ffffff 100%
    ),
    url("/imagenes/dising/tarjeta-papeleria.webp");
  background-size: cover;
  background-position: center;
}
.contenido-blanco {
  width: 80%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding-left: 6rem;
  position: relative;
  z-index: 2;
  margin-right: -3px;
  background:linear-gradient(to left,#ffffff, #ffffff,#dddddd);
}
.contenido-blanco h3{
    font-size: 7rem;
    text-align: start;
    padding-bottom: 1rem;
    color: var(--secundario);
}
.contenido-blanco a{
  width: 21rem;
  padding: 1rem;
  border-radius:40PX;
  border: none;
  background: var(--primario);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font-size: 2.5rem;
  text-align: center;
  transition: 
  transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
  background-color 0.6s ease;
  transform-origin: left center;
}
.contenido-blanco p{
  text-align: start;
  font-size: 3rem;
  padding-bottom: 1rem;
  color: var(--secundario);
  font-size: 3rem;
}
.contenido-blanco a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--secundario);
}



/*seccion diseño gris3*/
.bloque-servicio-gris{
  display: flex;
  height: 460px;
  position: relative;
  overflow: hidden; /* IMPORTANTE */
}
.img-lado-gris {
  width: 35%;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #51525088 70%,
      #515250 100%
    ),
    url("/imagenes/dising/flyer-afiches.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-gris {
  width: 80%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  padding-right: 6rem;
  position: relative;
  z-index: 2;
  margin-left: -3px;
  background:linear-gradient(to right,#515250, #515250,#1d1d1d);
}
.contenido-gris h3{
    font-size: 7rem;
    text-align: end;
    padding-bottom: 1rem;
}
.contenido-gris a{
  width: 21rem;
  padding: 1rem;
  border-radius:40PX;
  border: none;
  background: #EF7E25;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font-size: 2.5rem;
  text-align: center ;
    transition: 
  transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
  background-color 0.6s ease;
  color: 0.6s ease;
  transform-origin: right center;
}
.contenido-gris a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--primario0scuro);
  color: var(--blanco);
}
.contenido-gris p{
  text-align: end;
  font-size: 3rem;
  padding-bottom: 1rem;
}

/*degrado reverse4*/

.bloque-servicio-reverse{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
  flex-direction: row-reverse;
}
.img-lado-reverse {
  width: 40%;
  background:
    linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0%,
      #ef7d258a 70%,
      #EF7E25 100%
    ),
    url("/imagenes/dising/branding-locales.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-reverse {
  width: 80%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding-left: 6rem;
  position: relative;
  z-index: 2;
  margin-right: -3px;
  background:linear-gradient(to left,#EF7E25, #ef7d25,#E05711);
}
.contenido-reverse h3{
    font-size: 7rem;
    text-align: start;
    padding-bottom: 1rem;
}
.contenido-reverse a{
  width: 21rem;
  padding: 1rem;
  border-radius:40PX;
  border: none;
  background: #444;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font-size: 2.5rem;
  text-align: center ;
  transition: 
  transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
  background-color 0.6s ease;
  color: 0.6s ease;
  transform-origin: left center;
}
.contenido-reverse a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--blanco);
  color: var(--secundario);
}
.contenido-reverse p{
  text-align: start;
  font-size: 3rem;
  padding-bottom: 1rem;
}


/*seccion diseño blanco reverse5*/
.bloque-servicio-blanco-reverse{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
}
.img-lado-blanco-reverse {
  width: 35%;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #ffffff8a 70%,
      #ffffff 100%
    ),
    url("/imagenes/dising/rotulo-senalitica.webp");
  background-size: cover;
  background-position: center;
}
.contenido-blanco-reverse {
  width: 80%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  padding-right: 6rem;
  position: relative;
  z-index: 2;
  margin-left: -3px;
  background:linear-gradient(to right,#ffffff, #ffffff,#dddddd);
}
.contenido-blanco-reverse h3{
    font-size: 7rem;
    text-align: end;
    padding-bottom: 1rem;
    color: var(--secundario);
}
.contenido-blanco-reverse a{
  width: 21rem;
  padding: 1rem;
  border-radius:40PX;
  border: none;
  background: var(--primario);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font-size: 2.5rem;
  text-align: center;
  transition: 
  transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
  background-color 0.6s ease;
  transform-origin: right center;
}
.contenido-blanco-reverse p{
  text-align: end;
  font-size: 3rem;
  padding-bottom: 1rem;
  color: var(--secundario);
  font-size: 3rem;
}
.contenido-blanco-reverse a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--secundario);
}


/*seccion diseño gris reverse6*/
.bloque-servicio-gris-reverse{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
  flex-direction: row-reverse;
}
.img-lado-gris-reverse {
  width: 40%;
  background:
    linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0%,
      #51525088 70%,
      #515250 100%
    ),
    url("/imagenes/dising/empaques-stickers.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-gris-reverse {
  width: 80%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: e;
  padding-left: 6rem;
  position: relative;
  z-index: 2;
  margin-right: -3px;
  background:linear-gradient(to left,#515250, #515250,#1d1d1d);
}
.contenido-gris-reverse h3{
    font-size: 7rem;
    text-align: start;
    padding-bottom: 1rem;
}
.contenido-gris-reverse a{
  width: 21rem;
  padding: 1rem;
  border-radius:40PX;
  border: none;
  background: #EF7E25;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font-size: 2.5rem;
  text-align: center ;
    transition: 
  transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
  background-color 0.6s ease;
  color: 0.6s ease;
  transform-origin: left center;
}
.contenido-gris-reverse a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--primario0scuro);
  color: var(--blanco);
}
.contenido-gris-reverse p{
  text-align: start;
  font-size: 3rem;
  padding-bottom: 1rem;
}


/*seccion diseño degradado7*/
.bloque-servicio-7{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
}
.img-lado-7{
  width: 35%;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #ef7d258a 70%,
      #EF7E25 100%
    ),
    url("/imagenes/dising/web-corporativo.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-7 {
  width: 80%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  padding-right: 6rem;
  position: relative;
  z-index: 2;
  margin-left: -3px;
  background:linear-gradient(to right,#EF7E25, #ef7d25,#E05711);
}
.contenido-7 h3{
    font-size: 7rem;
    text-align: end;
    padding-bottom: 1rem;
}
.contenido-7 a{
  width: 21rem;
  padding: 1rem;
  border-radius:40PX;
  border: none;
  background: #444;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font-size: 2.5rem;
  text-align: center ;
    transition: 
  transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
  background-color 0.6s ease;
  color: 0.6s ease;
  transform-origin: right center;
}
.contenido-7 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--blanco);
  color: var(--secundario);
}
.contenido-7 p{
  text-align: end;
  font-size: 3rem;
  padding-bottom: 1rem;
}





/*seccion diseño blanco8*/
.bloque-servicio-blanco-8{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
  flex-direction: row-reverse;
}
.img-lado-blanco-8 {
  width: 40%;
  background:
    linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0%,
      #ffffff8a 70%,
      #ffffff 100%
    ),
    url("/imagenes/dising/redes-sociales.webp");
  background-size: cover;
  background-position: center;
}
.contenido-blanco-8 {
  width: 80%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding-left: 6rem;
  position: relative;
  z-index: 2;
  margin-right: -3px;
  background:linear-gradient(to left,#ffffff, #ffffff,#dddddd);
}
.contenido-blanco-8 h3{
    font-size: 7rem;
    text-align: start;
    padding-bottom: 1rem;
    color: var(--secundario);
}
.contenido-blanco-8 a{
  width: 21rem;
  padding: 1rem;
  border-radius:40PX;
  border: none;
  background: var(--primario);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font-size: 2.5rem;
  text-align: center;
  transition: 
  transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
  background-color 0.6s ease;
  transform-origin: left center;
}
.contenido-blanco-8 p{
  text-align: start;
  font-size: 3rem;
  padding-bottom: 1rem;
  color: var(--secundario);
  font-size: 3rem;
}
.contenido-blanco-8 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--secundario);
}


/*seccion diseño gris9*/
.bloque-servicio-gris-9{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
}
.img-lado-gris-9 {
  width: 35%;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #51525088 70%,
      #515250 100%
    ),
    url("/imagenes/dising/dise-arqui.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-gris-9 {
  width: 80%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  padding-right: 6rem;
  position: relative;
  z-index: 2;
  margin-left: -3px;
  background:linear-gradient(to right,#515250, #515250,#1d1d1d);
}
.contenido-gris-9 h3{
    font-size: 7rem;
    text-align: end;
    padding-bottom: 1rem;
}
.contenido-gris-9 a{
  width: 21rem;
  padding: 1rem;
  border-radius:40PX;
  border: none;
  background: #EF7E25;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  font-size: 2.5rem;
  text-align: center ;
    transition: 
  transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
  background-color 0.6s ease;
  color: 0.6s ease;
  transform-origin: right center;
}
.contenido-gris-9 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--primario0scuro);
  color: var(--blanco);
}
.contenido-gris-9 p{
  text-align: end;
  font-size: 3rem;
  padding-bottom: 1rem;
}
/*mediaqueris*/
@media (max-width:1284px){
    .bloque-servicio{
    min-height: 420px;
  }

  .contenido{
    padding: 3rem 4rem;
  }

  .contenido h3{
    font-size: 4.7rem;
  }

  .contenido p{
    font-size: 2.5rem;
  }
}
@media (max-width:1020px){
  .bloque-servicio{
    min-height: 420px;
  }

  .contenido{
    padding: 3rem 4rem;
  }

  .contenido h3{
    font-size: 5rem;
  }

  .contenido p{
    font-size: 2.3rem;
  }
}
@media (max-width:768px){
  .bloque-servicio{
    flex-direction: column;
    height: auto;       /* CLAVE */
  }

  .img-lado{
    width: 100%;
    height: 460px;
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        #ef7d258a 75%,
        #EF7E25 100%
      ),
      url("/imagenes/dising/edicion.webp");
    background-size: cover;
    background-position: center;
  }

  .contenido{
    width: 100%;
    margin-top: -3px;   /* 👈 elimina la raya */
    text-align: center;
    align-items: center;
    padding: 3rem 2.5rem;
    margin-left: 0;
    background:linear-gradient(to bottom,#EF7E25, #ef7d25,#E05711);
  }
  .contenido a{
    width: 70%;
  }

  .contenido h3,
  .contenido p{
    text-align: center;
  }

  .contenido h3{
    font-size: 4.2rem;
  }

  .contenido p{
    font-size: 2.1rem;
  }

@media (max-width:520px){
  
  .contenido h3{
    font-size: 3.5rem;
  }

  .contenido p{
    font-size: 1.9rem;
  }
}}
@media (max-width:430px){
  .img-lado{
    height: 400px; /* mismo alto visual */}

  .contenido{
    padding: 2.5rem 1.8rem;
  }

  .contenido h3{
    font-size: 3rem;
  }

  .contenido p{
    font-size: 1.7rem;
  }

  .contenido a{
    width: 100%;
  }
}
@media (max-width:375px){
    .img-lado{
    height: 470px; /* mismo alto visual */}

  .contenido h3{
    font-size: 2.6rem;
  }

  .contenido p{
    font-size: 1.6rem;
  }
}
@media (max-width:220px){
    .img-lado{
    height: 400px; /* mismo alto visual */}

  .contenido h3{
    font-size: 2.2rem;
  }

  .contenido p{
    font-size: 1.4rem;
  }
  }
/* ========================= */
/* RESPONSIVE GLOBAL */
/* ========================= */
@media (max-width: 1368px){

  [class^="contenido"]{
    padding-left: 4rem;
    padding-right: 4rem;
  }

  [class^="contenido"] h3{
    font-size: 5.8rem;
  }

  [class^="contenido"] p{
    font-size: 2.6rem;
  }

  [class^="contenido"] a{
    width: 20rem;
    font-size: 2.3rem;
  }
}
@media (max-width: 1020px){

  [class^="contenido"]{
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  [class^="contenido"] h3{
    font-size: 4.8rem;
  }

  [class^="contenido"] p{
    font-size: 2.2rem;
  }

  [class^="contenido"] a{
    width: 18rem;
    font-size: 2.1rem;
  }
}

@media (max-width: 768px){

  /* TODOS los bloques */
  .bloque-servicio,
  .bloque-servicio-blanco,
  .bloque-servicio-gris,
  .bloque-servicio-reverse,
  .bloque-servicio-blanco-reverse,
  .bloque-servicio-gris-reverse,
  .bloque-servicio-7,
  .bloque-servicio-blanco-8,
  .bloque-servicio-gris-9{
    flex-direction: column;
    height: auto;
  }

  /* TODAS las imágenes */
  [class^="img-lado"]{
    width: 100%;
    height: 460px;
    background-size: cover;
    background-position: center;
  }

  /* TODOS los contenidos */
  [class^="contenido"]{
    width: 100%;
    margin: -3px 0 0 0; /* elimina la raya */
    padding: 3rem 2.5rem;
    text-align: center;
    align-items: center;
  }

  /* Textos */
  [class^="contenido"] h3,
  [class^="contenido"] p{
    text-align: center;
  }

  [class^="contenido"] h3{
    font-size: 4.2rem;
  }

  [class^="contenido"] p{
    font-size: 2.1rem;
  }

  /* Botones */
  [class^="contenido"] a{
    width: 70%;
    text-align: center;
  }
}
@media (max-width: 520px){
  [class^="contenido"] h3{
    font-size: 3.5rem;
  }

  [class^="contenido"] p{
    font-size: 1.9rem;
  }
}

@media (max-width: 430px){
  [class^="img-lado"]{
    height: 400px;
  }

  [class^="contenido"]{
    padding: 2.5rem 1.8rem;
  }

  [class^="contenido"] h3{
    font-size: 3rem;
  }

  [class^="contenido"] p{
    font-size: 1.7rem;
  }

  [class^="contenido"] a{
    width: 100%;
  }
}

@media (max-width: 375px){
  [class^="contenido"] h3{
    font-size: 2.6rem;
  }

  [class^="contenido"] p{
    font-size: 1.6rem;
  }
}
@media (max-width:768px){
    .img-lado-blanco{
    width: 100%;
    height: 460px;
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        #ffffff8a 75%,
        #ffffff 100%
      ),
      url("/imagenes/dising/tarjeta-papeleria.webp");
    background-size: cover;
    background-position: center;
  }

.contenido-blanco{
    width: 100%;
    margin-top: -3px;   /* 👈 elimina la raya */
    padding: 3rem 2.5rem;
  background:linear-gradient(to bottom,#ffffff, #ffffff,#dddddd);
    margin-left: 0;
  }
  .bloque-servicio-blanco{
    flex-direction: column;
    height: auto;       /* CLAVE */
  }
}
@media (max-width:768px){
    .img-lado-gris{
    width: 100%;
    height: 460px;
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        #51525088 75%,
        #515250 100%
      ),
      url("/imagenes/dising/flyer-afiches.webp");
    background-size: cover;
    background-position: center;
  }

.contenido-gris{
    width: 100%;
    margin-top: -5px;   /* 👈 elimina la raya */
    padding: 3rem 2.5rem;
    margin-left: 0;
    background:linear-gradient(to bottom,#515250, #515250,#1d1d1d);
  }
  .bloque-servicio-gris{
    flex-direction: column;
    height: auto;       /* CLAVE */
    background:linear-gradient(to bottom,#515250, #515250,#515250,#1d1d1d);
  }
}
@media (max-width:768px){
    .img-lado-reverse{
    width: 100%;
    height: 460px;
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        #ef7d258a 75%,
        #EF7E25 100%
      ),
      url("/imagenes/dising/branding-locales.webp");
    background-size: cover;
    background-position: center;
  }

.contenido-reverse{
    width: 100%;
    margin-top: -5px;   /* 👈 elimina la raya */
    padding: 3rem 2.5rem;
    margin-left: 0;
    background:linear-gradient(to bottom,#EF7E25, #EF7E25,#EF7E25,#E05711);
  }
  .bloque-servicio-reverse{
    flex-direction: column;
    height: auto;       /* CLAVE */
  }
}
/* ========================= */
/* BLANCO REVERSE 5 */
/* ========================= */
@media (max-width:768px){
.img-lado-blanco-reverse{
  width: 100%;
  height: 460px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #ffffff8a 75%,
      #ffffff 100%
    ),
    url("/imagenes/dising/rotulo-senalitica.webp");
  background-size: cover;
  background-position: center;
}

.contenido-blanco-reverse{
  width: 100%;
  margin-top: -5px;
  padding: 3rem 2.5rem;
  margin-left: 0;
  background: linear-gradient(to bottom,#ffffff,#ffffff,#ffffff,#dddddd);
}

.bloque-servicio-blanco-reverse{
  flex-direction: column;
  height: auto;
}


/* ========================= */
/* GRIS REVERSE 6 */
/* ========================= */
.img-lado-gris-reverse{
  width: 100%;
  height: 460px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #51525088 75%,
      #515250 100%
    ),
    url("/imagenes/dising/empaques-stickers.webp");
  background-size: cover;
  background-position: center;
}

.contenido-gris-reverse{
  width: 100%;
  margin-top: -5px;
  padding: 3rem 2.5rem;
  margin-right: 0;
  background: linear-gradient(to bottom,#515250,#515250,#515250,#1d1d1d);
}

.bloque-servicio-gris-reverse{
  flex-direction: column;
  height: auto;
}


/* ========================= */
/* DEGRADADO 7 */
/* ========================= */
.img-lado-7{
  width: 100%;
  height: 460px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #ef7d258a 75%,
      #EF7E25 100%
    ),
    url("/imagenes/dising/web-corporativo.webp");
  background-size: cover;
  background-position: center;
}

.contenido-7{
  width: 100%;
  margin-top: -5px;
  padding: 3rem 2.5rem;
  margin-left: 0;
  background: linear-gradient(to bottom,#EF7E25,#ef7d25,#ef7d25,#E05711);
}

.bloque-servicio-7{
  flex-direction: column;
  height: auto;
}


/* ========================= */
/* BLANCO 8 */
/* ========================= */
.img-lado-blanco-8{
  width: 100%;
  height: 460px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #ffffff8a 75%,
      #ffffff 100%
    ),
    url("/imagenes/dising/redes-sociales.webp");
  background-size: cover;
  background-position: center;
}

.contenido-blanco-8{
  width: 100%;
  margin-top: -5px;
  padding: 3rem 2.5rem;
  margin-right: 0;
  background: linear-gradient(to bottom,#ffffff,#ffffff,#ffffff,#dddddd);
}

.bloque-servicio-blanco-8{
  flex-direction: column;
  height: auto;
}


/* ========================= */
/* GRIS 9 */
/* ========================= */
.img-lado-gris-9{
  width: 100%;
  height: 460px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #51525088 75%,
      #515250 100%
    ),
    url("/imagenes/dising/dise-arqui.webp");
  background-size: cover;
  background-position: center;
}

.contenido-gris-9{
  width: 100%;
  margin-top: -5px;
  padding: 3rem 2.5rem;
  margin-left: 0;
  background: linear-gradient(to bottom,#515250,#515250,#515250, #1d1d1d);
}

.bloque-servicio-gris-9{
  flex-direction: column;
  height: auto;
}
}
a{
  margin-left: 0;
  margin-right: 0;
}

/* Evita que en móvil se quede el efecto hover pegado */
a:focus,
a:active {
  outline: none;
}

/* Solo aplica hover en dispositivos que realmente tengan hover (desktop) */
@media (hover: hover) {
  [class^="contenido"] a:hover {
    transform: scale(1.1) translateX(-5px);
  }
}
@media (hover: hover) {
  .contenido a:hover,
  .contenido-blanco a:hover,
  .contenido-gris a:hover,
  .contenido-reverse a:hover,
  .contenido-blanco-reverse a:hover,
  .contenido-gris-reverse a:hover,
  .contenido-7 a:hover,
  .contenido-blanco-8 a:hover,
  .contenido-gris-9 a:hover {
    transform: scale(1.1) translateX(-5px);
  }
}
a {
  -webkit-tap-highlight-color: transparent;
}
/* 🔥 DESACTIVAR EFECTO HOVER EN MÓVIL Y TABLET */
@media (max-width: 768px) {

  .contenido a:hover,
  .contenido-blanco a:hover,
  .contenido-gris a:hover,
  .contenido-reverse a:hover,
  .contenido-blanco-reverse a:hover,
  .contenido-gris-reverse a:hover,
  .contenido-7 a:hover,
  .contenido-blanco-8 a:hover,
  .contenido-gris-9 a:hover {

    transform: none !important;
  }

}
@media (min-width: 768px) {

  [class^="contenido"] a:hover {
    transform: scale(1.1) translateX(-5px);
  }

}