/* =====================================================
   MODAL CON EFECTO DE ROTACION - Aretes Mauricio Alarcon
   ===================================================== */

/* --- Overlay de fondo --- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.modal-overlay.active {
    display: flex;
    animation: fadeInOverlay 0.35s ease forwards;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Escenario 3D --- */
.modal-scene {
    perspective: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Tarjeta que gira (aqui va el marco dorado) --- */
.modal-card {
    position: relative;
    transform-style: preserve-3d;

/* MARCO DE LA IMAGEN
    border: grosor  estilo  color
    Grosor:  2px (delgado)  4px (medio)  8px (grueso)
    Estilo:  solid (linea)  double (doble)
    Color:   rgba(255, 220, 100, 0.90) = dorado actual */
    border: 8px solid rgba(255, 220, 100, 0.90);

/* RADIO DE LAS ESQUINAS DEL MARCO
    Ejemplos: 5px (poco)  15px (medio)  30px (muy redondeado) */
    border-radius: 25px;

/* Espacio entre el marco y la imagen */
    padding: 15px;

    box-shadow: 0 24px 64px rgba(0,0,0,0.7);

/* VELOCIDAD DEL GIRO
    Cambia el numero de segundos (actualmente 2.4s)
    Mas alto = mas lento  /  Mas bajo = mas rapido
    Ejemplos: 1.5s  2.4s  3.5s  5.0s */
    animation: spinReveal 2.4s linear forwards;
    cursor: default;
}

@keyframes spinReveal {
/* TAMANO INICIAL (escala de inicio del giro)
    scale(0.5) = empieza al 50% del tamano final
    Puedes cambiar entre 0.1 (muy chico) y 0.9 */
    0%   { transform: rotateY(0deg)   scale(0.5); opacity: 0; }
    20%  { opacity: 1; }

/* NUMERO DE GIROS y TAMANO FINAL

    rotateY(Xdeg) controla las vueltas:
    360deg  = 1 vuelta  <- actual
    720deg  = 2 vueltas
    1080deg = 3 vueltas
    1440deg = 4 vueltas

    scale(X) controla el tamano final:
    scale(1.0) = tamano normal
    scale(1.5) = 50% mas grande <- actual
    scale(1.8) = 80% mas grande
    scale(2.0) = el doble de tamano */
    100% { transform: rotateY(360deg) scale(1.5); opacity: 1; }
}

/* --- Imagen ampliada dentro del modal --- */
.modal-card img {
    display: block;
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    height: auto;

/* RADIO DE LAS ESQUINAS DE LA IMAGEN
    Ejemplos: 5px (poco)  10px (medio)  30px (muy redondeado) */
    border-radius: 15px;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* --- Etiqueta del nombre del producto --- */
.modal-label {
    position: absolute;

/* DISTANCIA DEL TITULO DEBAJO DE LA IMAGEN
    Aumenta el numero para bajar mas el bloque
    Ejemplos: -80px  -90px  -110px  */
    bottom: -90px;
    left: 0;
    right: 0;
    transform: none;
    white-space: nowrap;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 25px; /* <- tamano de letra del titulo */
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase;
    animation: fadeUp 0.5s 0.7s both;
}

/* --- Precio debajo del titulo --- */
.modal-price {
    display: block;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px; /* <- tamano de letra del precio */
    font-weight: normal;
    letter-spacing: 0.08em;
    color: rgba(255, 220, 100, 0.90); /* <- color del precio (dorado) */
    margin-top: 6px;
    animation: fadeUp 0.5s 0.9s both;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Boton de cerrar --- */
.modal-close {
    position: absolute;

/* POSICION VERTICAL  (top)
    Controla que tan arriba o abajo esta el boton
    Si mayor es el numero negativo = sube el boton encima del borde superior
    Si mayor es el numero positivo = baja el boton hacia adentro de la imagen
    Ejemplos:  top: -30px   top: 0px   top: 20px  */
    top: 330px;

/* POSICION HORIZONTAL
    left: 50%  +  transform: translateX(-50%)
    mantienen el boton centrado horizontalmente.
    Si quieres moverlo a la derecha cambia left por right
    y quita el transform de abajo.
    Ejemplo derecha:  right: 20px;  (y borra las 2 lineas de left y transform) */
    right: 5%;
    /* --transform: translateX(-50%);-- */

/* TAMANO DEL BOTON
    width y height deben ser iguales para que sea un circulo
    Ejemplos: 36px  44px  58px  70px */
    width: 80px;
    height: 80px;
    border: 4px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    background: rgba(30, 30, 30, 0.85);
    color: #fff;

/* TAMANO DEL ICONO  (la X)
    Ejemplos: 16px  20px  26px  32px */
    font-size: 50px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    z-index: 1010;
}

.modal-close:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.6);
}

/* --- Cursor pointer en las imagenes clicables --- */
.image-aretes {
    cursor: zoom-in;
    transition: transform 0.2s, box-shadow 0.2s;
}

.image-aretes:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}