.etiquetas__content {
    display: flex;
    flex-direction: column; /* Coloca los elementos uno debajo del otro */
    justify-content: stretch; /*cambie este*/
    align-items: flex-start; /* cambie este */
    position: relative; 
    width: 50%; 
    top: 5px;
}

.imagen-seleccionable {
	cursor: pointer;
	border: 2px solid transparent;
	transition: border 0.3s;
}

.imagen-seleccionable:hover {
	border: 2px solid #0073aa;
}

.imagen-seleccionable.seleccionada {
	border: 2px solid #ff0000; /* Color para la imagen seleccionada */
}

.imagen-fondo-seleccionable {
	cursor: pointer; /* Indica que es clickeable */
	border: 2px solid transparent;
	transition: border 0.3s;
	
}

		.imagen-fondo-seleccionable:hover {
	border: 2px solid #0073aa;
}

		
.imagen-fondo-seleccionable.seleccionada {
    border: 2px solid blue; /* Cambia el borde de la imagen seleccionada */
}

.vinilo_redonda {
    border: 1px solid #ccc; /* Borde alrededor de la vista previa */
    width: 180px; /* Ancho del contenedor de vista previa */
    height: 180px; /* Alto del contenedor de vista previa */
    position: relative; /* Permitir posicionamiento absoluto de imágenes */
    overflow: hidden; /* Esconder cualquier imagen que se salga del contenedor */
    border-radius: 50%; /* Hace que el div sea redondo */
}


.vinilo_larga {
    border: 1px solid #ccc; /* Borde alrededor de la vista previa */
    width: 320px; /* Ancho del contenedor de vista previa */
    height: 72.5px; /* Alto del contenedor de vista previa */
    position: relative; /* Permitir posicionamiento absoluto de imágenes */
    overflow: hidden; /* Esconder cualquier imagen que se salga del contenedor */
	border-radius: 10px; /* Hace que el div sea redondo */
}

.vinilo_rectangular {
    border: 1px solid #ccc; /* Borde alrededor de la vista previa */
    width: 320px; /* Ancho del contenedor de vista previa */
    height: 157px; /* Alto del contenedor de vista previa */
    position: relative; /* Permitir posicionamiento absoluto de imágenes */
    overflow: hidden; /* Esconder cualquier imagen que se salga del contenedor */
	border-radius: 10px; /* Hace que el div sea redondo */
}

.tela_rectangular {
    border: 1px solid #ccc; /* Borde alrededor de la vista previa */
    width: 320px; /* Ancho del contenedor de vista previa */
    height: 170px; /* Alto del contenedor de vista previa */
    position: relative; /* Permitir posicionamiento absoluto de imágenes */
    overflow: hidden; /* Esconder cualquier imagen que se salga del contenedor */
}

.tela_larga {
    border: 1px solid #ccc; /* Borde alrededor de la vista previa */
    width: 320px; /* Ancho del contenedor de vista previa */
    height: 83px; /* Alto del contenedor de vista previa */
    position: relative; /* Permitir posicionamiento absoluto de imágenes */
    overflow: hidden; /* Esconder cualquier imagen que se salga del contenedor */
}

	
	
	.botones_fuente {
  background: #F1E6DB;
  padding: 1px 10px;
  border-radius: 5px;
  font-size: 20px;
  color: #686868;
  margin: 3px;
	}
  


/* Reseteo de márgenes y padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilo del cuerpo */
body {
    margin-bottom: 50px;
    font-family: PT Sans Narrow, sans-serif;
}

body > img {
    margin: 20px auto;
    width: 960px;
    display: block;
}

@media (max-width: 480px) {
    body > img {
        width: 100%;
        padding: 20px;
    }
}

/* Estilos generales para contenedores */






.fuente__container {
    display: flex;
    flex-wrap: wrap;
}

.fuente__content {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #34b7b3;
    padding: 5px;
    border-radius: 5px;
    font-size: 22px;
    color: #fff;
    margin: 5px;
}

.fuente__content input {
    display: none;
}

.fuente__label:hover {
    cursor: pointer;
}

/* Estilos para etiquetas */
.etiquetas__container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 80%;
    margin-left: 20%;
}

@media (max-width: 780px) {
    .ocultar-desktop {
        display: block;
    }

    .etiquetas__container {
        width: 100%;
        margin-left: 0;
        padding-top: 20px;
    }
}

@media (max-width: 480px) {
    .etiquetas__container {
        width: 100%;
        padding: 0 20px;
        -webkit-transform: scale(.88);
        transform: scale(.88);
    }
}




.etiqueta {
    position: relative;
    background: #fff;
    width: 320px;
    height: 83px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 8px 2px #dadada;
    
}

.etiqueta_tela_larga {
    position: relative;
    background: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
	 overflow: hidden; /* Ocultar desbordamientos */
 
    
}

.etiqueta_tela_rectangular {
    position: relative;
    background: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  
}

.etiqueta_vinilo_redonda {

    display: flex;
    width: 100%; /* Ancho del contenedor de vista previa */
    height: 100%; /* Alto del contenedor de vista previa */
    position: relative; /* Permitir posicionamiento absoluto de imágenes */
    overflow: hidden; /* Esconder cualquier imagen que se salga del contenedor */
    border-radius: 50%; /* Hace que el div sea redondo */
	 align-items: center;
	  justify-content: center;
}


.etiqueta_vinilo_rectangular {
    position: relative;
    background: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
	border-radius: 15px;
   
    
}
.etiqueta_vinilo_larga {
    position: relative;
    background: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  border-radius: 15px; /* Hace que el div sea redondo */
      
}




.etiqueta_FONDO_tela_larga{
	 width: 100%;
	  height: 100%;
 position: absolute;
 justify-content: center;
     display: flex;
}


.etiqueta_FONDO_vinilo_redonda{
 width: 100%;
 position: absolute;
 justify-content: center;
 
}

.etiqueta_FONDO_vinilo_larga{
	 width: 100%;
	  height: 100%;
 position: absolute;
 justify-content: center;
}



.etiqueta_FONDO_tela_rectangular{
	 width: 100%;
	  height: 100%;
 position: absolute;
 justify-content: center;
}
.etiqueta_FONDO_vinilo_rectangular{
	 width: 100%;
	  height: 100%;
 position: absolute;
 justify-content: center;
}


.etiqueta_ICONO_vinilo_redonda {
    width: 80px;
    position: absolute;
    bottom: 20px;
    left: 50%; /* Posiciona la imagen en el 50% del contenedor */
    transform: translateX(-50%); /* Ajusta la imagen para que esté centrada */
}


.etiqueta_ICONO_tela_larga{
 width: 70px;
 position: absolute;
 justify-content: center;
 right: 8px;
	    display: flex;
}


.etiqueta_ICONO_vinilo_larga{
 width: 60px;
 position: absolute;
 justify-content: center;
 right: 8px;
  display: flex;
	
}

.etiqueta_ICONO_tela_rectangular{
 width: 80px;
 position: absolute;
 justify-content: center;
 right: 10px;
	 display: flex;
}

.etiqueta_ICONO_vinilo_rectangular{
 width: 80px;
 position: absolute;
 justify-content: center;
 right: 8px;
  display: flex;
	
}

.etiqueta__text {
    position: absolute;
    text-align: center;
 display: flex;

    align-items: center;
	width: 100%; 
	justify-content: center; 
	left:15px;
	 color: black;
	
}
.etiqueta__text_redonda {
    position: absolute;
    text-align: center;
 display: flex;

    align-items: center;
	width: 100%; 
	justify-content: center; 
	top:20px;
	 color: black;
	
}

.etiqueta__icono {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.etiqueta__rect47x28,
.etiqueta__rect58x14,
.etiqueta__rect45x22,
.etiqueta__redonda30,
.etiqueta__rect53x12 {
    font-size: 35px;
	 margin: 10px 0px 0px 0px;
}

.etiqueta__rect47x28 {
    width: 283.62px;
    height: 150.655px;
}

.etiqueta__rect58x14 {
    width: 320px;
    height: 83px;
	justify-content: center;
}

.etiqueta__rect45x22 {
    width: 271.55px;
    height: 132.76px;
    border-radius: 15px;
}

.etiqueta__rect53x12 {
    width: 319.828px;
    height: 72.413px;
    border-radius: 15px;
}

.etiqueta__redonda30 {
    width: 181px;
    height: 181px;
    border-radius: 100%;
}

/* Estilos para contenedores de iconos y colores */
.container__fondos,
.container__iconos {
    display: flex;
    flex-wrap: wrap;
}

.icono {
    width: 50px;
    height: 50px;
    margin: 10px 10px 10px 0;
    background-size: contain;
    transition: all .2s;
    border-radius: 50%;
}

.icono:hover {
    box-shadow: 0 0 12px 0 #444;
    cursor: pointer;
}

/* Estilo para los títulos */
.titulo {
    background-color: #A8D7D6; /* Fondo verde */
    color: #686868;
	width: 100%;
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    margin-bottom: 2px;
	position: relative;
}


.carrusel-container_fondo {
    display: flex;
    align-items: center;
    justify-content: center; 
    position: relative;
    width: 100%;
    overflow: hidden; /* Oculta cualquier contenido que se salga del área visible */
}

.carrusel-container_icono {
    display: flex;
    align-items: center;
    justify-content: center; 
    position: relative;
    width: 100%;
    overflow: hidden; /* Oculta cualquier contenido que se salga del área visible */
}

.carrusel {
    display: flex; /* Flexbox para alinear elementos en fila */
    overflow-x: hidden; /* Permite el desplazamiento horizontal */
    scroll-behavior: smooth; /* Desplazamiento suave */
    width: 100%; /* Ajusta el ancho según el espacio de los botones */
    padding: 10px; /* Espaciado interno */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}

.carrusel img {
    flex: 0 0 auto; /* Evita que las imágenes se ajusten en la misma línea */
    width: 100px; /* Ajusta según el tamaño que necesites */
    margin-right: 10px; /* Espacio entre las imágenes */
}

.scroll-btn_icono,
 .scroll-btn_fondo{
    display: none; /* Oculta los botones inicialmente */
    background-color: #E8AFCD;
    color: 686868;
    border: none;
    padding: 0px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    border-radius: 10%;
    width: 20px; /* Ajusta según sea necesario */
    height: 40px; /* Ajusta según sea necesario */
}


.carrusel-container_fondo.visible .scroll-btn_fondo
 {
    display: block; /* Muestra los botones cuando el contenedor es visible */
}

.carrusel-container_icono.visible .scroll-btn_icono
 {
    display: block; /* Muestra los botones cuando el contenedor es visible */
}
.scroll-btn_icono.left_icono,
.scroll-btn_fondo.left_fondo
 {
    left: 0px; /* Espacio de la izquierda */
}

.scroll-btn_icono.right_icono,
.scroll-btn_fondo.right_fondo
 {
    right: 0px; /* Espacio de la derecha */
}


 
 
.carrusel img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 10px;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out;
}

.carrusel img:hover {
    transform: scale(1.5);      /* Efecto hover para hacer zoom */
}


.input-container {
    display: flex;               /* Usamos flexbox para centrar y apilar los elementos */
    flex-direction: column;     /* Por defecto, apilamos los inputs */
    align-items: center;        /* Centramos los inputs horizontalmente */
    justify-content: center;     /* Centramos verticalmente si hay espacio */
    height: 100px;              /* Ajusta la altura según sea necesario */
    width: 100%;                /* Ajusta el ancho según sea necesario */
    margin: 0 auto;             /* Centra el contenedor */
	position: relative;
}

.input-container input {
    margin: 2px 0;             /* Espaciado entre inputs */
    width: 80%;                /* Ancho de los inputs */
    padding: 0px;             /* Espaciado interno */
    box-sizing: border-box;    /* Incluye padding en el ancho total */
}