@charset "utf-8";

/* ==============================
   FUENTES
============================== */
@font-face{
    font-family:"Lato";
    src:url("../../system/font/Lato/Lato-Light.ttf") format("truetype");
    font-weight:300;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Lato";
    src:url("../../system/font/Lato/Lato-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Lato";
    src:url("../../system/font/Lato/Lato-Bold.ttf") format("truetype");
    font-weight:700;
    font-style:normal;
    font-display:swap;
}

/* ==============================
   BASE
============================== */
*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    margin:0;
    overflow-x:hidden;
    background:#fff;
    color:#000;
    font-family:"Lato", sans-serif;
    font-size:18px;
    font-weight:400;
    line-height:30px;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

input,
select,
textarea,
button{
    font-family:inherit;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="telefono"]:focus,
input[type="checkbox"]:focus,
select:focus,
textarea:focus{
    outline:none;
    border:3px solid mediumblue;
    box-shadow:0 0 0 5px rgba(0,170,255,.5);
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="telefono"]:hover,
input[type="checkbox"]:hover,
select:hover,
textarea:hover{
    outline:none;
    border:3px solid mediumblue;
}

/* ==============================
   LOADER / OVERLAY
============================== */
.loader{
    position:fixed;
    inset:0;
    z-index:9999;
    background:url("../../system/img/loader.gif") 50% 50% no-repeat rgb(249,249,249);
    opacity:.8;
    cursor:wait;
}

.overlay{
    position:fixed;
    inset:0;
    z-index:-1;
    background:#000;
    opacity:0;
    transition:.3s ease;
}

.overlay.active{
    z-index:2;
    opacity:.5;
}

/* ==============================
   HEADER / MENU
============================== */
.headerWrap{
    position:relative;
    width:100%;
}

.headerLogo{
    position:absolute;
    top:4px;
    left:30px;
    z-index:10;
}

.headerLogo img{
    width:300px;
    height:auto;
}

.headerMenu{
    position:relative;
    width:100%;
    height:60px;
    padding-right:30px;
    background:#d3d3d3;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.headerMenu::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    width:100%;
    height:3px;
    background:linear-gradient(to right, #00aaff, #8c8c8c);
    box-shadow:
        0 0 8px rgba(0,170,255,.9),
        0 0 15px rgba(0,170,255,.5);
}

.menuItems{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:30px;
}

.btnHeader01{
    margin-right:20px;
    cursor:pointer;
    user-select:none;
    font-size:13px;
    font-weight:500;
    letter-spacing:1.5px;
}

.btnHeader01:hover{
    color:#ca0f16;
}

.btnHeader01 .ico50{
    margin-right:4px;
    font-size:22px;
    vertical-align:middle;
}

.hamburger{
    display:none;
    width:34px;
    height:28px;
    cursor:pointer;
    flex-direction:column;
    justify-content:space-between;
    z-index:20;
}

.hamburger span{
    width:100%;
    height:3px;
    background:#111;
    border-radius:3px;
    transition:.25s;
}

/* ==============================
   LAYOUT PRINCIPAL
============================== */
.contMain{
    width:75%;
    margin:0 auto;
    display:flex;
    justify-content:flex-start;
    align-items:stretch;
}

.contL{
    width:30%;
    margin:40px 930px 40px 0;
    padding:20px;
    background:#f5f5f5;
    border-radius:5px;
}

.contR{
    position: fixed;
    top: 100px;          /* debajo del header */
    right: 250px;

    width: 850px;
    height: 800px;

    padding:20px;
    background:#fff;
    border-radius:2px;

    box-shadow:
        rgba(0,0,0,.19) 0 10px 20px,
        rgba(0,0,0,.23) 0 6px 6px;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;

    z-index:100;
}
.previewTitle{
    width:100%;
    margin:0 0 16px;
    padding:10px 15px;
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
    background:#f8f8f8;
    border-left:5px solid #c50000;
    border-radius:5px;
    color:#050639;
    font-size:20px;
    font-weight:700;
    letter-spacing:.3px;
    line-height:1.4;
    user-select:none;
}

.previewIcon{
    flex:0 0 auto;
    color:#c50000;
    font-size:22px;
}

.visorContenido{
    width:100%;
    min-height:0;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:stretch;
}

.visor01{
    width:560px;
    display:flex;
    flex-direction:column;
}

.visor02{
    width:230px;
    display:flex;
    flex-direction:column;
}

/* ==============================
   TITULOS / TEXTOS
============================== */
.obl{
    padding-left:5px;
    color:red;
    font-size:18px;
}

.co01{
    margin:20px 0 40px -5px;
    font-size:38px;
    font-weight:700;
    text-align:center;
    user-select:none;
}

.line01{
    width:160px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.line02{
    margin:10px 0 30px;
    display:flex;
    justify-content:flex-start;
    align-items:center;
}

.subtit01{
    margin-top:20px;
    font-size:28px;
    font-weight:700;
    user-select:none;
}

.ico01{
    margin-top:20px;
    font-size:38px;
    font-weight:700;
    user-select:none;
}

.co02,
.co17{
    font-size:14px;
    font-weight:700;
    user-select:none;
}

.co17{
    margin-bottom:10px;
}

.co13{
    font-size:11px;
    font-weight:700;
    user-select:none;
}

.help1,
.help05,
.help06{
    margin-top:20px;
    font-size:12px;
    line-height:1.5;
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
}

.help05{
    font-weight:700;
}

.help2{
    margin:20px 0 15px;
    color:dimgray;
    font-size:12px;
    line-height:1.5;
}

.co04{
    margin-bottom:10px;
    font-size:16px;
    font-weight:700;
}

.co05,
.co06{
    display:inline-block;
    font-size:12px;
    line-height:1.6;
}

.co05{
    color:#96979a;
}

.co06{
    color:#000;
    font-weight:500;
}

.descr01{
    font-size:12px;
    line-height:1.6;
}

.co09{
    font-size:9px;
}

.co12{
    width:80%;
    margin:0 10px;
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
}

.co14{
    width:90%;
    margin:15px 10px;
    font-size:10px;
    line-height:1.6;
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
}

/* ==============================
   INPUTS / FORMULARIO
============================== */
.input01,
.input02{
    float:left;
    width:100%;
    height:50px;
    margin:0 auto;
    padding:10px;
    background:#fff;
    border:.5px solid #e0e0e0;
    border-radius:5px;
    text-indent:10px;
    font-size:13px;
    user-select:none;
}

.input03,
.input04{
    width:100%;
    padding:10px;
    border:.5px solid #e0e0e0;
    border-radius:5px;
    resize:none;
}

.input04{
    padding:12px;
}

.input05{
    float:left;
    width:90%;
    height:25px;
    margin:0 auto;
    padding:2px;
    background:#fff;
    border:.5px solid #e0e0e0;
    border-radius:4px;
    text-indent:10px;
    font-size:13px;
    user-select:none;
}

input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    position:relative;
    width:20px;
    height:20px;
    border:2px solid #555;
    border-radius:4px;
    background:#fff;
    cursor:pointer;
    transition:.2s;
    flex:0 0 auto;
}

input[type="checkbox"]:checked{
    background:#050639;
    border-color:#050639;
}

input[type="checkbox"]:checked::after{
    content:"";
    position:absolute;
    left:6px;
    top:2px;
    width:5px;
    height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.co03,
.co33{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    user-select:none;
}

.co03{
    margin-bottom:2px;
}

.co33{
    margin:15px 0 15px 10px;
    font-size:14px;
    font-weight:700;
}

/* ==============================
   BOTONES
============================== */
.btn03,
.btn04,
.btn05{
    margin:1px;
    border-radius:5px;
    letter-spacing:1px;
    font-weight:700;
    text-align:center;
}

.btn03{
    width:100%;
    padding:10px;
    border:.5px solid #e0e0e0;
    background:#c50000;
    color:#fff;
    cursor:pointer;
    font-size:14px;
}

.btn03:hover{
    background:#fff;
    border:.5px solid #c50000;
    box-shadow:0 0 30px #fff;
    color:#c50000;
    transition:.4s linear;
}

.btn04{
    width:95%;
    padding:10px;
    border:.5px solid #050639;
    background:#e0e0e0;
    color:#050639;
    cursor:pointer;
    font-size:14px;
}

.btn04:hover{
    background:#fff;
    border:.5px solid #c50000;
    box-shadow:0 0 30px #fff;
    color:#c50000;
    transition:.4s linear;
}

.btn05{
    width:100%;
    padding:2px 7px;
    border:.5px solid #e0e0e0;
    background-color:steelblue;
    color:#fff;
    cursor:not-allowed;
    font-size:10px;
}

/* ==============================
   VISTA PREVIA / VISOR
============================== */
.espe01{
    margin-bottom:20px;
    padding-bottom:20px;
    border-bottom:1px solid #96979a;
    display:flex;
    justify-content:space-between;
    align-items:stretch;
}

.seg01{
    width:49%;
    display:flex;
    justify-content:flex-start;
    align-items:stretch;
}

.co07,
.co08{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
}

.co07{
    width:50%;
}

.co08{
    width:57%;
}

.co11{
    margin-bottom:2px;
    display:flex;
    justify-content:flex-start;
    align-items:center;
}

.links02{
    margin-right:20px;
    color:blue;
    cursor:pointer;
    user-select:none;
    font-size:12px;
    font-weight:400;
}

.links02:hover{
    text-decoration:underline;
    transition:.4s linear;
}

.whats{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
}

.nego01{
    display:none;
    float:right;
    width:auto;
    padding:0 5px;
    border:1px solid #d11e21;
    color:#d11e21;
    font-size:12px;
}

.titmoto01{
    margin-bottom:15px;
    border-radius:5px;
}

.ico02{
    padding:4px;
    color:crimson;
    border:.5px solid crimson;
    border-radius:3px;
    cursor:not-allowed;
    font-size:15px;
}

.ico03,
.ico04{
    font-size:15px;
    user-select:none;
}

.ico03{
    margin-right:5px;
}

.redes01{
    margin-bottom:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.precio01{
    margin-bottom:10px;
    padding:10px;
    border:.5px solid #e0e0e0;
    border-radius:5px;
    font-weight:700;
}

.privado{
    margin-bottom:15px;
}

.contacto{
    width:100%;
    height:100%;
    padding:8px;
    background:#f3f4fa;
    border-radius:3px;
}

.contacto02{
    margin-bottom:15px;
    display:flex;
    justify-content:space-between;
    align-items:stretch;
}

.co10{
    margin:0 0 15px 10px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    user-select:none;
    font-size:10px;
    line-height:1.6;
}

/* ==============================
   IMAGENES / CARGA
============================== */
.img80{
    width:100%;
    height:200px;
    margin-top:10px;
    background:#eeeff8 url("../../system/img/bg01.png") center/80% no-repeat;
}

.preview-grid{
    margin-top:25px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:stretch;
    align-content:space-between;
    gap:10px;
}

.image-box{
    position:relative;
    width:100px;
    height:100px;
    overflow:hidden;
    border:1px solid transparent;
    cursor:move;
}

.image-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s;
}

.actions{
    position:absolute;
    bottom:0;
    width:100%;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:space-around;
}

.actions button{
    border:none;
    background:none;
    color:#fff;
    cursor:pointer;
}

#drop-zone{
    margin-bottom:10px;
    padding:15px;
    border:2px dashed #007bff;
    text-align:center;
    cursor:pointer;
    font-size:14px;
}

.dragging{
    opacity:.5;
}

.upload-container02{
    width:560px;
    height:280px;
    margin-bottom:15px;
    overflow:hidden;
    border:.5px solid #e0e0e0;
    border-radius:5px;
    background:#414c58;
}

.clone-grid{
    width:100%;
    height:100%;
    padding:10px;
    background:#414c58;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-content:flex-start;
    gap:10px;
}

.clone-grid .image-box{
    position:relative;
    overflow:hidden;
    border:1px solid transparent;
    cursor:move;
}

.clone-grid .image-box:first-child{
    width:100%;
    height:190px;
    background:transparent;
    display:flex;
    justify-content:center;
    align-items:center;
}

.clone-grid .image-box:first-child img{
    width:100%;
    height:100%;
    object-fit:contain !important;
}

.clone-grid .image-box:not(:first-child){
    width:18%;
    height:55px;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
}

.clone-grid .image-box:not(:first-child) img{
    width:100%;
    height:100%;
    object-fit:cover !important;
}

.clonePlaceholder{
    width:100%;
    height:100%;
    color:#c8cdd3;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    user-select:none;
}

.clonePlaceholder .icon-camera{
    margin-bottom:20px;
    color:#b7bec7;
    font-size:95px;
}

.cloneText{
    color:#d5dae0;
    font-size:20px;
    font-weight:700;
    line-height:1.6;
    letter-spacing:.5px;
    text-align:center;
}

/* ==============================
   RESPONSIVE: PC MEDIANA
============================== */
@media only screen and (max-width:1400px){

    .contMain{
        width:92%;
    }

    .contL{
        width:38%;
        margin-right:40px;
    }

    .contR{
        width:58%;
        right:auto;
    }

    .visor01{
        width:65%;
    }

    .visor02{
        width:32%;
    }

    .upload-container02,
    .clone-grid{
        width:100%;
    }
}

/* ==============================
   RESPONSIVE: TABLET
============================== */
@media only screen and (max-width:1024px){

    .headerLogo{
        left:20px;
    }

    .headerLogo img{
        width:240px;
    }

    .headerMenu{
        height:60px;
        padding-right:15px;
    }

    .btnHeader01{
        margin-right:15px;
        font-size:14px;
    }

    .contMain{
        width:95%;
        flex-direction:column;
        align-items:center;
    }

    .contL{
        width:100%;
        margin:30px 0 20px;
    }

    .contR{
        position:relative;
        top:auto;
        right:auto;
        width:100%;
        height:auto;
        margin:20px 0 40px;
    }

    .visorContenido{
        flex-direction:row;
    }

    .visor01{
        width:68%;
    }

    .visor02{
        width:30%;
    }

    .upload-container02,
    .clone-grid{
        width:100%;
    }

    .co01{
        font-size:34px;
    }

    .subtit01{
        font-size:24px;
    }
}

/* ==============================
   RESPONSIVE: CELULAR
============================== */
@media only screen and (max-width:767px){

    html,
    body{
        font-size:16px;
        line-height:24px;
    }

    .headerWrap{
        min-height:0;
    }

    .headerLogo{
        position:relative;
        top:auto;
        left:auto;
        text-align:center;
        padding-top:10px;
        z-index:10;
    }

    .headerLogo img{
        width:230px;
        margin:0 auto;
    }

    .headerMenu{
        height:auto;
        min-height:55px;
        padding:12px 15px;
        background:rgba(0,0,0,.70);
        justify-content:flex-start;
        align-items:flex-start;
        flex-wrap:wrap;
        gap:0;
    }

    .hamburger{
        display:flex;
    }

    .hamburger span{
        background:#fff;
    }

    .menuItems{
        display:none;
        width:100%;
        margin-top:15px;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .menuItems.menuActivo{
        display:flex;
    }

    .btnHeader01{
        width:100%;
        margin-right:0;
        padding:8px 0;
        color:#fff;
        text-align:left;
        font-size:12px;
    }

    .btnHeader01:hover{
        color:#ca0f16;
    }

    .contMain{
        width:100%;
        padding:0 10px;
        flex-direction:column;
    }

    .contL{
        width:100%;
        margin:20px 0;
        padding:15px;
    }

    .contR{
        position:relative;
        top:auto;
        right:auto;
        width:100%;
        height:auto;
        margin:10px 0 30px;
        padding:12px;
        flex-direction:column;
    }

    .previewTitle{
        margin-bottom:18px;
        padding:11px 12px;
        justify-content:center;
        text-align:center;
        font-size:18px;
    }

    .previewIcon{
        font-size:20px;
    }

    .visorContenido{
        flex-direction:column;
    }

    .visor01,
    .visor02{
        width:100%;
    }

    .co01{
        margin-bottom:25px;
        font-size:30px;
    }

    .subtit01{
        font-size:22px;
    }

    .ico01{
        font-size:30px;
    }

    .line02{
        margin-bottom:20px;
    }

    .input01,
    .input02,
    .input03,
    .input04{
        width:100%;
        font-size:14px;
    }

    .upload-container02{
        width:100%;
        height:auto;
        min-height:250px;
    }

    .clone-grid{
        width:100%;
        height:auto;
        min-height:200px;
    }

    .clone-grid .image-box:first-child{
        width:100%;
        height:190px;
    }

    .clone-grid .image-box:not(:first-child){
        width:30%;
        height:70px;
    }

    .espe01{
        flex-direction:column;
    }

    .seg01{
        width:100%;
        margin-bottom:10px;
    }

    .contacto02{
        flex-direction:column;
    }

    .contact50,
    .contact60{
        width:100%;
    }

    .input05{
        width:100%;
        height:35px;
        margin-bottom:8px;
    }

    .redes01{
        margin-top:15px;
    }

    .co10{
        margin-left:0;
    }

    .co12{
        width:90%;
    }
}


/* ==============================
   FIX MENU HAMBURGUESA
   Corrige menú abierto e icono oculto
============================== */
@media only screen and (min-width:768px){
    .hamburger{
        display:none !important;
    }

    .menuItems{
        display:flex !important;
        width:auto;
        margin-top:0;
        flex-direction:row;
        align-items:center;
        justify-content:flex-end;
        gap:30px;
    }
}

@media only screen and (max-width:767px){
    .headerMenu{
        position:relative;
    }

    .hamburger{
        display:flex !important;
        width:34px;
        height:28px;
        flex:0 0 34px;
        cursor:pointer;
        flex-direction:column;
        justify-content:space-between;
        align-items:stretch;
        z-index:30;
    }

    .hamburger span{
        display:block;
        width:100%;
        height:3px;
        background:#fff !important;
        border-radius:3px;
    }

    .menuItems{
        display:none !important;
        width:100%;
        margin-top:15px;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .menuItems.menuActivo{
        display:flex !important;
    }

    .btnHeader01 .ico50{
        color:inherit;
    }
}
/* =========================================================
   SORTABLEJS - ORDENAMIENTO DE FOTOGRAFÍAS
========================================================= */

#preview-container .image-box{
    cursor:grab;
    touch-action:manipulation;
    user-select:none;
    -webkit-user-select:none;
}

#preview-container .image-box:active{
    cursor:grabbing;
}

#preview-container .image-box img{
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
}

#preview-container .actions{
    position:absolute;
    z-index:20;
    pointer-events:auto;
}

#preview-container .actions button{
    min-width:34px;
    min-height:34px;
    padding:4px 8px;
    pointer-events:auto;
    touch-action:manipulation;
}

.sortable-ghost{
    opacity:.25;
}

.sortable-chosen{
    opacity:.75;
}

.sortable-drag{
    opacity:1;
    cursor:grabbing;
}


/* Mejor tamaño para tocar los botones en celular */

@media only screen and (max-width:767px){

    #preview-container .image-box{
        width:110px;
        height:110px;
    }

    #preview-container .actions button{
        min-width:40px;
        min-height:38px;
        font-size:17px;
    }
}