/* X de cierre: dos barras cruzadas que giran al pasar el mouse.
   Misma X que .box-info-close del index de megaphoto.com.ar (2026-10-22).
   Reemplaza:
   - la "X" de texto de .form-close (popups bPopup de index, canvas y enmarcados);
   - las X propias de canvas-a-medida: .modal-info-close (Ajuste de color,
     Resolución) y .modal-close (Vista Espacial, clara sobre fondo oscuro).
   Selectores con un nivel más de especificidad para ganarle al CSS de cada
   página sin importar el orden de carga. */

div.form-close a,
.modal-info-box .modal-info-close {
    position: absolute;
    top: 8px;
    right: 8px;

    display: block;
    width: 30px;
    height: 30px;

    margin: 0;
    padding: 0;

    color: #111;
    font-size: 0;
    line-height: 0;

    cursor: pointer;

    transition: color 0.3s ease;
}

/* la letra X / el símbolo ✕ / el svg que había antes */
div.form-close a > *,
.modal-espacial .modal-close > svg {
    display: none;
}

.modal-espacial .modal-close {
    color: #eee;
    transition: color 0.3s ease;
}

div.form-close a::before,
div.form-close a::after,
.modal-info-box .modal-info-close::before,
.modal-info-box .modal-info-close::after,
.modal-espacial .modal-close::before,
.modal-espacial .modal-close::after {
    content: "";

    position: absolute;
    top: 14px;
    left: 3px;

    width: 23px;
    height: 2px;

    background-color: currentColor;

    transition:
        transform 0.35s ease,
        background-color 0.35s ease;
}

/* .modal-close mide 34x34: barras centradas */
.modal-espacial .modal-close::before,
.modal-espacial .modal-close::after {
    top: 16px;
    left: 5px;
}

div.form-close a::before,
.modal-info-box .modal-info-close::before,
.modal-espacial .modal-close::before {
    transform: rotate(45deg);
}

div.form-close a::after,
.modal-info-box .modal-info-close::after,
.modal-espacial .modal-close::after {
    transform: rotate(-45deg);
}

div.form-close a:hover::before,
.modal-info-box .modal-info-close:hover::before,
.modal-espacial .modal-close:hover::before {
    transform: rotate(135deg);
}

div.form-close a:hover::after,
.modal-info-box .modal-info-close:hover::after,
.modal-espacial .modal-close:hover::after {
    transform: rotate(45deg);
}

div.form-close a:hover,
.modal-info-box .modal-info-close:hover {
    color: #555;
}

.modal-espacial .modal-close:hover {
    color: #fff;
}

/* 2026-10-24: la X va sin href: la regla de Bootstrap a:not([href]):not([class]) { color: inherit }
   le ganaba al color de arriba y la X tomaba el color del popup. En la Vista Espacial de
   enmarcados (.message-espacial { color: transparent }) quedaba invisible. */
div.form-close a:not([href]) {
    color: #111;
}

div.form-close a:not([href]):hover {
    color: #555;
}