/* CAMBIA LA FUENTE */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');

:root{
--bg:#FAF9FC; /* COLOR FONDO */
--card:#EEE8FA; /* COLOR VENTANAS */
--accent:#D8CCF8; /* COLOR BARRA */
--text:#3D3552; /* COLOR TEXTO */
}

*{box-sizing:border-box}
body{
margin:0;
font-family:'Quicksand',sans-serif;
background:linear-gradient(135deg,var(--bg),#f2edff);
color:var(--text);
}

body {
    cursor: url("Cursores/vibing-cat.cur"), auto;
}

.titlebar{
background:var(--accent);
padding:25px;
text-align:center;
box-shadow:0 4px 15px rgba(0,0,0,.15);
}
.menu{
display:flex;
justify-content:center;
gap:18px;
padding:15px;
position:sticky;
top:0;
background:white;
}
.menu a{
text-decoration:none;
color:var(--text);
padding:10px 16px;
border-radius:12px;
transition:.3s;
}
.menu a:hover{
background:var(--accent);
transform:translateY(-4px) scale(1.05);
}
.card{
width:min(900px,90%);
margin:30px auto;
padding:20px;
background:var(--card);
border-radius:18px;
box-shadow:0 8px 20px rgba(0,0,0,.12);
transition:.35s;
}
.card:hover{
transform:translateY(-6px) rotate(-.4deg);
}
.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
}
.gallery img{
width:100%;
border-radius:10px;
transition:.35s;
}
.gallery img:hover{
transform:rotate(-4deg) scale(1.06);
}
footer{
text-align:center;
padding:30px;
opacity:.8;
}

/*=========================
    HEADER
=========================*/

.titlebar{
    background:linear-gradient(135deg,#D8CCF8,#EEE8FA);
    text-align:center;
    padding:35px;
    border-bottom:4px solid #CDB8F8;
}

.titlebar h1{
    font-size:40px;
    margin-bottom:20px;
    color:#3D3552;
}

.titlebar img{
    width:420px;
    max-width:90%;
    display:block;
    margin:auto;
    transition:.4s;
}

.titlebar img:hover{
    transform:scale(1.05) rotate(-1deg);
    filter:drop-shadow(0 0 18px #D8CCF8);
}

.titlebar p{
    width:70%;
    margin:auto;
    font-size:18px;
    line-height:1.8;
    color:#4A4266;
}

.sparkle{
    position:absolute;
    width:8px;
    height:8px;
    pointer-events:none;
    background:#fff;
    border-radius:50%;
    box-shadow:
        0 0 5px #fff,
        0 0 10px #d8ccf8,
        0 0 15px #b98cff;
    animation: sparkle 0.7s linear forwards;
}

@keyframes sparkle{
    from{
        opacity:1;
        transform:scale(1);
    }
    to{
        opacity:0;
        transform:translateY(-20px) scale(0);
    }
}


/*=========================
    ¿TE FALLA O TE FALTA?
=========================*/

.columnas{

    width:80%;

    max-width:950px;

    margin:50px auto;

}

/* Cada artículo */

.columna{

    background:#F9F7FF;

    border-radius:15px;

    margin-bottom:25px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

/* Barra del expediente */

summary{

    list-style:none;

    cursor:pointer;

    background:linear-gradient(#DCCEFF,#C7B4F5);

    padding:20px;

    transition:.3s;

}

summary:hover{

    background:linear-gradient(#CDB8F8,#B69CF0);

}

summary::-webkit-details-marker{

    display:none;

}

.titulo{

    display:flex;

    flex-direction:column;

}

.titulo h3{

    margin:8px 0;

    color:#4B3E67;

}

.titulo span{

    color:#6F6590;

    font-size:14px;

}

/* Contenido */

.contenido{

    padding:30px;

    background:white;

    line-height:1.9;

    color:#47415A;

    font-size:17px;

}

.contenido p{

    margin-bottom:20px;

}

.firma{

    text-align:right;

    font-style:italic;

    color:#8A7CB3;

}

/* =========================
   CHAT DE VISITANTES
========================= */

.visitor-chat {
    max-width: 850px;
    margin: 40px auto;
    padding: 0;
    overflow: hidden;

    background: #F1ECFF;
    border: 2px solid #B9A4EC;
    border-radius: 14px;

    box-shadow: 0 10px 25px rgba(82, 65, 112, 0.16);
}


/* Barra superior estilo Windows */

.chat-titlebar {
    padding: 9px 12px;

    background: linear-gradient(
        to right,
        #806DA4,
        #B9A4EC
    );

    color: white;

    font-family: "Courier New", monospace;
    font-size: 13px;
    font-weight: bold;

    text-align: left;

    border-bottom: 2px solid #62527F;
}


/* Texto de bienvenida */

.chat-intro {
    padding: 12px 18px;

    background: #FFFFFF;

    text-align: center;

    color: #62527F;

    font-size: 13px;
}

.chat-intro p {
    margin: 0;
}


/* Ventana donde está Cbox */

.chat-window {
    margin: 0 15px 15px;

    background: white;

    border: 2px solid #D8CCF8;
    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        inset 0 0 8px rgba(98, 82, 127, 0.12),
        0 5px 12px rgba(0, 0, 0, 0.08);
}


/* El iframe */

.chat-window iframe {
    display: block;
    width: 100%;
    height: 450px;

    border: none;
}


/* Efecto al pasar el cursor */

.visitor-chat {
    transition: transform .3s ease, box-shadow .3s ease;
}

.visitor-chat:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(82, 65, 112, 0.20);
}


/* =========================
   CELULAR
========================= */

@media (max-width: 600px) {

    .visitor-chat {
        width: 94%;
    }

    .chat-window {
        margin: 0 8px 8px;
    }

    .chat-window iframe {
        height: 450px;
    }
}