/* ================================================= */
/* VARIABLES */
/* ================================================= */
:root{
  --primario:#EF7E25;
  --primarioOscuro:#E05711;
  --secundario:#515250;
  --blanco:#fff;
  --negro:#000;
  --fuente:"Poppins",sans-serif;
}
/* ================================================= */
/* TITULOS GENERALES */
/* ================================================= */
h2{
  font-size:10rem;
  text-align:center;
  margin:3rem;
}
h3 {
  text-transform: uppercase;
}
@media (max-width:768px){
  h2{ font-size: 7rem;
    margin:2rem;
  }
  
}
@media (max-width:520px){
  h2{ font-size: 5rem;
    margin:1.9rem;
  }
  
}
@media (max-width:417px){
  h2{ font-size: 4.3rem;
    margin:2rem;
  }
  
}
@media (max-width:360px){
  h2{ font-size: 4rem;
    margin:2rem;
  }
  
}
@media (max-width:290px){
  h2{ font-size: 3rem;margin:1rem;}
}

/*bloque 1*/
.bloque-servicio-1{
  display: flex;
  height: 460px;
  position: relative;
  overflow: hidden; /* IMPORTANTE */
}
.contenido-1{
  position: relative;
  z-index: 2;
  margin-left: -3px;
    background:linear-gradient(to right,#EF7E25, #ef7d25,#E05711);
}
.img-lado-1 {
  width: 35%;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #ef7d258a 70%,
      #EF7E25 100%
    ),
    url("/imagenes/produccion/1.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-1 {
  width: 80%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  padding-right: 6rem;
}
.contenido-1 h3{
    font-size: 7rem;
    text-align: end;
    padding-bottom: 1rem;
}
.contenido-1 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-1 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--blanco);
  color: var(--secundario);
}
.contenido-1 p{
  text-align: end;
  font-size: 3rem;
  padding-bottom: 1rem;
}
@media (max-width:768px){
  .bloque-servicio-1{
    flex-direction: column;
    height: auto;       /* CLAVE */
  }

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

  .contenido-1{
    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);
  }}
/*fin de contenido 1 +responsive*/
/*contenido 2*/
.bloque-servicio-blanco-2{
  display: flex;
  height: 460px;
  flex-direction: row-reverse;
  position: relative;
  overflow: hidden; /* IMPORTANTE */
}
.img-lado-blanco-2 {
  width: 40%;
  background:
    linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0%,
      #ffffff8a 70%,
      #ffffff 100%
    ),
    url("/imagenes/produccion/vinil-adhesivo.webp");
  background-size: cover;
  background-position: center;
}
.contenido-blanco-2 {
  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-2 h3{
    font-size: 7rem;
    text-align: start;
    padding-bottom: 1rem;
    color: var(--secundario);
}
.contenido-blanco-2 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-2 p{
  text-align: start;
  font-size: 3rem;
  padding-bottom: 1rem;
  color: var(--secundario);
  font-size: 3rem;
}
.contenido-blanco-2 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--secundario);
}
@media (max-width:768px){
    .img-lado-blanco-2{
    width: 100%;
    height: 460px;
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        #ffffff8a 75%,
        #ffffff 100%
      ),
      url("/imagenes/produccion/vinil-adhesivo.webp");
    background-size: cover;
    background-position: center;
  }

.contenido-blanco-2{
    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-2{
    flex-direction: column;
    height: auto;       /* CLAVE */
  }
}
/*bloque 3*/
.bloque-servicio-gris-3{
  display: flex;
  height: 460px;
  position: relative;
  overflow: hidden; /* IMPORTANTE */
}
.img-lado-gris-3 {
  width: 35%;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #51525088 70%,
      #515250 100%
    ),
    url("/imagenes/produccion/barniz.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-gris-3 {
  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-3 h3{
    font-size: 7rem;
    text-align: end;
    padding-bottom: 1rem;
}
.contenido-gris-3 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-3 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--primario0scuro);
  color: var(--blanco);
}
.contenido-gris-3 p{
  text-align: end;
  font-size: 3rem;
  padding-bottom: 1rem;
}
@media (max-width:768px){
    .img-lado-gris-3{
    width: 100%;
    height: 460px;
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        #51525088 75%,
        #515250 100%
      ),
      url("/imagenes/produccion/barniz.webp");
    background-size: cover;
    background-position: center;
  }

.contenido-gris-3{
    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-3{
    flex-direction: column;
    height: auto;       /* CLAVE */
    background:linear-gradient(to bottom,#515250, #515250,#515250,#1d1d1d);
  }
}


/**seccion 4*/

.bloque-servicio-reverse-4{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 486px;
  flex-direction: row-reverse;
}
.img-lado-reverse-4 {
  width: 40%;
  background:
    linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0%,
      #ef7d258a 70%,
      #EF7E25 100%
    ),
    url("/imagenes/produccion/blanci.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-reverse-4 {
  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-4 h3{
    font-size: 7rem;
    text-align: start;
    padding-bottom: 1rem;
}
.contenido-reverse-4 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-4 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--blanco);
  color: var(--secundario);
}
.contenido-reverse-4 p{
  text-align: start;
  font-size: 3rem;
  padding-bottom: 1rem;
}
@media (max-width:768px){
    .img-lado-reverse-4{
    width: 100%;
    height: 460px;
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        #ef7d258a 75%,
        #EF7E25 100%
      ),
      url("/imagenes/produccion/blanci.webp");
    background-size: cover;
    background-position: center;
  }

.contenido-reverse-4{
    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-4{
    flex-direction: column;
    height: auto;       /* CLAVE */
  }
}


/** bloque 5*/
.bloque-servicio-blanco-reverse-5{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
}
.img-lado-blanco-reverse-5 {
  width: 35%;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #ffffff8a 70%,
      #ffffff 100%
    ),
    url("/imagenes/produccion/plotter.webp");
  background-size: cover;
  background-position: center;
}
.contenido-blanco-reverse-5 {
  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-5 h3{
    font-size: 7rem;
    text-align: end;
    padding-bottom: 1rem;
    color: var(--secundario);
}
.contenido-blanco-reverse-5 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-5 p{
  text-align: end;
  font-size: 3rem;
  padding-bottom: 1rem;
  color: var(--secundario);
  font-size: 3rem;
}
.contenido-blanco-reverse-5 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--secundario);
}

@media (max-width:768px){
.img-lado-blanco-reverse-5{
  width: 100%;
  height: 460px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #ffffff8a 75%,
      #ffffff 100%
    ),
    url("/imagenes/produccion/plotter.webp");
  background-size: cover;
  background-position: center;
}

.contenido-blanco-reverse-5{
  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-5{
  flex-direction: column;
  height: auto;
}
}
/** bloque 6 */
.bloque-servicio-gris-reverse-6{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
  flex-direction: row-reverse;
}
.img-lado-gris-reverse-6 {
  width: 40%;
  background:
    linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0%,
      #51525088 70%,
      #515250 100%
    ),
    url("/imagenes/produccion/troquelado.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-gris-reverse-6 {
  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-6 h3{
    font-size: 7rem;
    text-align: start;
    padding-bottom: 1rem;
}
.contenido-gris-reverse-6 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-6 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--primario0scuro);
  color: var(--blanco);
}
.contenido-gris-reverse-6 p{
  text-align: start;
  font-size: 3rem;
  padding-bottom: 1rem;
}

@media (max-width:768px){

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

.contenido-gris-reverse-6{
  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-6{
  flex-direction: column;
  height: auto;
}}

/** bloque 7*/
.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/produccion/dtf.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;
}

@media (max-width: 768px){

.img-lado-7{
  width: 100%;
  height: 460px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #ef7d258a 75%,
      #EF7E25 100%
    ),
    url("/imagenes/produccion/dtf.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;
}}
/** bloque servicio 8*/
/*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/produccion/sublimado-textil.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);
}

@media (max-width: 768px){
.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/produccion/sublimado-textil.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;
}}



/*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/produccion/estampado-textil.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;
}

@media (max-width: 768px){
.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/produccion/estampado-textil.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;
}
}
/**/

/**seccion 10*/


.bloque-servicio-reverse-10{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
  flex-direction: row-reverse;
}
.img-lado-reverse-10 {
  width: 40%;
  background:
    linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0%,
      #ef7d258a 70%,
      #EF7E25 100%
    ),
    url("/imagenes/produccion/bordado.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-reverse-10 {
  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-10 h3{
    font-size: 7rem;
    text-align: start;
    padding-bottom: 1rem;
}
.contenido-reverse-10 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-10 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--blanco);
  color: var(--secundario);
}
.contenido-reverse-10 p{
  text-align: start;
  font-size: 3rem;
  padding-bottom: 1rem;
}
@media (max-width:768px){
    .img-lado-reverse-10{
    width: 100%;
    height: 460px;
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        #ef7d258a 75%,
        #EF7E25 100%
      ),
      url("/imagenes/produccion/bordado.webp");
    background-size: cover;
    background-position: center;
  }

.contenido-reverse-10{
    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-10{
    flex-direction: column;
    height: auto;       /* CLAVE */
  }
}

/** bloque 11*/
.bloque-servicio-blanco-reverse-11{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
}
.img-lado-blanco-reverse-11 {
  width: 35%;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #ffffff8a 70%,
      #ffffff 100%
    ),
    url("/imagenes/produccion/taza-gorra.webp");
  background-size: cover;
  background-position: center;
}
.contenido-blanco-reverse-11 {
  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-11 h3{
    font-size: 7rem;
    text-align: end;
    padding-bottom: 1rem;
    color: var(--secundario);
}
.contenido-blanco-reverse-11 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-11 p{
  text-align: end;
  font-size: 3rem;
  padding-bottom: 1rem;
  color: var(--secundario);
  font-size: 3rem;
}
.contenido-blanco-reverse-11 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--secundario);
}

@media (max-width:768px){
.img-lado-blanco-reverse-11{
  width: 100%;
  height: 460px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #ffffff8a 75%,
      #ffffff 100%
    ),
    url("/imagenes/produccion/taza-gorra.webp");
  background-size: cover;
  background-position: center;
}

.contenido-blanco-reverse-11{
  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-11{
  flex-direction: column;
  height: auto;
}
}


/** bloque 12 */
.bloque-servicio-gris-reverse-12{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
  flex-direction: row-reverse;
}
.img-lado-gris-reverse-12 {
  width: 40%;
  background:
    linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0%,
      #51525088 70%,
      #515250 100%
    ),
    url("/imagenes/produccion/merchandaising.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-gris-reverse-12{
  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-12 h3{
    font-size: 7rem;
    text-align: start;
    padding-bottom: 1rem;
}
.contenido-gris-reverse-12 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-12 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--primario0scuro);
  color: var(--blanco);
}
.contenido-gris-reverse-12 p{
  text-align: start;
  font-size: 3rem;
  padding-bottom: 1rem;
}

@media (max-width:768px){

.img-lado-gris-reverse-12{
  width: 100%;
  height: 460px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #51525088 75%,
      #515250 100%
    ),
    url("/imagenes/produccion/merchandaising.webp");
  background-size: cover;
  background-position: center;
}

.contenido-gris-reverse-12{
  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-12{
  flex-direction: column;
  height: auto;
}}


/**seccion 13*/
.bloque-servicio-13{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
}
.img-lado-13{
  width: 35%;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #ef7d258a 70%,
      #EF7E25 100%
    ),
    url("/imagenes/produccion/banners-publicitarios.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-13 {
  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-13 h3{
    font-size: 7rem;
    text-align: end;
    padding-bottom: 1rem;
}
.contenido-13 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-13 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--blanco);
  color: var(--secundario);
}
.contenido-13 p{
  text-align: end;
  font-size: 3rem;
  padding-bottom: 1rem;
}

@media (max-width: 768px){

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

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

.bloque-servicio-13{
  flex-direction: column;
  height: auto;
}}
/*bloque 14*/
/** bloque 14*/
.bloque-servicio-blanco-reverse-14{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
  flex-direction: row-reverse;
}
.img-lado-blanco-reverse-14{
  width: 40%;
  background:
    linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0%,
      #ffffff8a 70%,
      #ffffff 100%
    ),
    url("/imagenes/produccion/roll-up.webp");
  background-size: cover;
  background-position: center;
}
.contenido-blanco-reverse-14  {
  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-reverse-14  h3{
    font-size: 7rem;
    text-align: start;
    padding-bottom: 1rem;
    color: var(--secundario);
}
.contenido-blanco-reverse-14 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-reverse-14  p{
  text-align: start;
  font-size: 3rem;
  padding-bottom: 1rem;
  color: var(--secundario);
  font-size: 3rem;
}
.contenido-blanco-reverse-14  a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--secundario);
}

@media (max-width: 768px){
.img-lado-blanco-reverse-14{
  width: 100%;
  height: 460px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #ffffff8a 75%,
      #ffffff 100%
    ),
    url("/imagenes/produccion/roll-up.webp");
  background-size: cover;
  background-position: center;
}

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

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



/*seccion diseño gris9*/


.bloque-servicio-gris-15{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
}
.img-lado-gris-15{
  width: 35%;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #51525088 70%,
      #515250 100%
    ),
    url("/imagenes/produccion/lonas.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-gris-15 {
  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-15 h3{
    font-size: 7rem;
    text-align: end;
    padding-bottom: 1rem;
}
.contenido-gris-15 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-15 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--primario0scuro);
  color: var(--blanco);
}
.contenido-gris-15 p{
  text-align: end;
  font-size: 3rem;
  padding-bottom: 1rem;
}

@media (max-width: 768px){
.img-lado-gris-15{
  width: 100%;
  height: 460px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #51525088 75%,
      #515250 100%
    ),
    url("/imagenes/produccion/lonas.webp");
  background-size: cover;
  background-position: center;
}

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

.bloque-servicio-gris-15{
  flex-direction: column;
  height: auto;
}
}
/**/

/**seccion 16*/

.bloque-servicio-reverse-16{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
  flex-direction: row-reverse;
}
.img-lado-reverse-16 {
  width: 40%;
  background:
    linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0%,
      #ef7d258a 70%,
      #EF7E25 100%
    ),
    url("/imagenes/produccion/stickers-etiquetas.webp");
  background-size: cover;
  background-position: center;
} 
.contenido-reverse-16 {
  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-16 h3{
    font-size: 7rem;
    text-align: start;
    padding-bottom: 1rem;
}
.contenido-reverse-16 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-16 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--blanco);
  color: var(--secundario);
}
.contenido-reverse-16 p{
  text-align: start;
  font-size: 3rem;
  padding-bottom: 1rem;
}
@media (max-width:768px){
    .img-lado-reverse-16{
    width: 100%;
    height: 460px;
    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        #ef7d258a 75%,
        #EF7E25 100%
      ),
      url("/imagenes/produccion/stickers-etiquetas.webp");
    background-size: cover;
    background-position: center;
  }

.contenido-reverse-16{
    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-16{
    flex-direction: column;
    height: auto;       /* CLAVE */
  }
}

/** bloque 11*/
.bloque-servicio-blanco-reverse-17{
  position: relative;
  overflow: hidden; /* IMPORTANTE */
  display: flex;
  height: 460px;
}
.img-lado-blanco-reverse-17 {
  width: 35%;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #ffffff8a 70%,
      #ffffff 100%
    ),
    url("/imagenes/produccion/12.webp");
  background-size: cover;
  background-position: center;
}
.contenido-blanco-reverse-17 {
  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-17 h3{
    font-size: 7rem;
    text-align: end;
    padding-bottom: 1rem;
    color: var(--secundario);
}
.contenido-blanco-reverse-17 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-17 p{
  text-align: end;
  font-size: 3rem;
  padding-bottom: 1rem;
  color: var(--secundario);
  font-size: 3rem;
}
.contenido-blanco-reverse-17 a:hover {
  transform: scale(1.1) translateX(-5px);
  background-color: var(--secundario);
}

@media (max-width:768px){
.img-lado-blanco-reverse-17{
  width: 100%;
  height: 460px;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #ffffff8a 75%,
      #ffffff 100%
    ),
    url("/imagenes/produccion/12.webp");
  background-size: cover;
  background-position: center;
}

.contenido-blanco-reverse-17{
  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-17{
  flex-direction: column;
  height: auto;
}
}
/* ========================= */
/* 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-1,
  .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;
  }
}
/* 🔥 DESACTIVAR EFECTO HOVER EN MÓVIL Y TABLET */
@media (max-width: 768px) {

  .contenido-1 a:hover,
  .contenido-blanco-2 a:hover,
  .contenido-gris-3 a:hover,
  .contenido-reverse-4 a:hover,
  .contenido-blanco-reverse-5 a:hover,
  .contenido-gris-reverse-6 a:hover,
  .contenido-7 a:hover,
  .contenido-blanco-8 a:hover,
  .contenido-gris-9 a:hover,
  .contenido-reverse-10 a:hover,
  .contenido-blanco-reverse-11 a:hover,
  .contenido-gris-reverse-12 a:hover,
  .contenido-13 a:hover,
  .contenido-blanco-reverse-14 a:hover,
  .contenido-gris-15 a:hover,
  .contenido-reverse-16 a:hover,
  .contenido-blanco-reverse-17 a:hover {

    transform: none !important;

  }

}
a{
  -webkit-tap-highlight-color: transparent;
}