/*Esta es la clase para el contenedor de los transformables.
Mas que nada es por que es un grid con reglas especificas para que se deforme bien*/

/*
.contenedorCruzroja{
    position: relative;
    height: 50px;
}*/
/*Esto de transformable es la clase de boton que se transforma */
.transformable{
    color: white;
    font-size: xx-large;
    border : none;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    transition: .25s ease-in-out;
    overflow:  hidden;
    display:  flex;
    justify-content: center;
    align-items: center;
    cursor : pointer;
    position: relative;
    
}


/*Esta es una clase heredada que le da gradiente de color de ig al boton
En caso de querer agregar gradientes o cosas unicas de cada boton hay que heredar transformable
y modificar en una clase nueva
*/
.transformable.instagram{
    background: linear-gradient(to left , #833ab4,#fd1d1d,#fcb045);
}

/*No hay mucho que decir es el icono que crea transformable*/
.icono{
    opacity: 0%;
    width: 50px;
    height: 50px;
    object-fit: contain;
    transition: .25s;
    position : absolute;
    /*Top y left desplazan el contenido usando su borde */
    top : 50%;
    left: 50%;
    /*El translate mueve el contenido usando el centro del objeto*/
    transform: translate(-50%, -50%);

}
/*
Esto esta bueno para aclararlo

La primera parte es la accion osea hover en un transformable
Lo que esta despues del espacio es que va a ser afectado por esa accion.
En este caso afecta al icono creado dentro de el transformable
*/
.transformable:hover .icono{
    opacity: 0;
}
.transformable:hover .text{
    transform: translateX(0%);
}


.transformable:hover{

    border-radius: 8px;
    width: 175px;

}

/*La clase texto que usan los transformables */
.text{

    font-size: var(--TamNormal);
    object-fit: contain;
    transform: translate(-2000% , -50%);
    transition: .25s ease-in-out;

}


@property --b {
    syntax: '<length>';
    initial-value: 25px; /* Esto ahora controla la POSICIÓN, no el grosor */
    inherits: false;
}
@property --tam{
    syntax: '<length>';
    initial-value: 30px;
    inherits: false;
}
@property --DirPunta{
    syntax: '<number>';
    initial-value: 0.5;
    inherits: false;

}
@property --porcentaje{
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: false;
}


.plusTransformable.visible{
    pointer-events: all;
    opacity: 100;
}


.plusTransformable:hover {
    width: 100px; /* Se expande, pero las líneas mantienen sus 5px */
    --tam: 60px;
    --DirPunta: 0.3;
    --porcentaje : 0%;
}

.plusTransformable:hover .text{
    color: white;
    font-size: calc(var(--TamNormalGrande) + 2pt);
    transform: translateX(0%);
}
/*
1 punta izquierda
6 punta derecha 
*/













.CruzRoja.oculto{
    opacity: 0;
    pointer-events: none;
}
.CruzRoja img{

    height: 200px;
    object-fit: cover;
}

@keyframes pulso{
    0%{
        transform: translate(-50%, -50%);
        transform: scale(1);
    }
    100%{
        transform: translate(-50%, -50%);
        transform: scale(1.5);
    }
}














.conttransformables{
	display: flex;
    justify-content: center;
    gap: 20px;
    
    min-height: 100px;
    margin-top: 140px;
    margin-bottom: 140px;
    margin-left: auto;
    margin-right: auto;
    position: relative;

}


.CruzRoja{
 
    
    position: absolute;
    top: -45%;
    background-color: transparent;
    
    transform: translate(-50%, -50%);
    border: none;
    cursor: pointer;
    animation: pulso 1.5s infinite alternate;
    transition: opacity 0.2s ease;
}

.plusTransformable {
    pointer-events: none;
    opacity: 0;
    border : none;
    transition: .25s ease-in-out;
    overflow:  hidden;
    display:  flex;
    justify-content: center;
    align-items: center;
    cursor : pointer;
    --Color : red;
  --CambioDir : 1;
  
  --t: 30px; /* DEFINÍ ACÁ EL GROSOR FIJO (Thickness) */
  
  --c: #0000 90deg,var(--Color) 0;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  
  background:
    conic-gradient(from 90deg at var(--t) var(--t), var(--c)) 
   
    calc(100% + var(--t)*var(--DirPunta)) calc(100% + var(--t)/2) /
    calc(50%  + var(--t))   calc(var(--porcentaje)  + var(--t));

   transition: width 0.2s ease, --DirPunta 0.2s ease , opacity 0.2s  ease ;
}



@media (max-width : 768px){

    .CruzRoja img{
        height: 100px;
    };

    .conttransformables{
        min-height: 50px;
        margin-top: 80px;
        margin-bottom: 80px;
    }

    .plusTransformable{

    }

}