/* estilo minimalista y carrusel — paleta más colorida */
:root{
    --bg-gradient: linear-gradient(180deg,#f3f8ff 0%, #fffaf6 100%);
    --fg:#0b1220;
    --muted:#6b7280;
    --accent:#6c5ce7;      /* morado */
    --accent-2:#ff6b6b;    /* coral */
    --accent-3:#00c3a3;    /* turquesa */
    --card-bg: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(245,243,255,0.9));
    --shadow: 0 10px 30px rgba(12, 20, 40, 0.08);
    --maxw:920px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;
    background:var(--bg-gradient);
    color:var(--fg);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:36px 18px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* header */
header{max-width:var(--maxw);width:100%;margin:0 0 18px;text-align:center}
h1{
    font-weight:700;
    margin:0;
    font-size:1.5rem;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.lead{color:var(--muted);margin-top:6px;font-size:.95rem}

/* main / gallery */
main{max-width:var(--maxw);width:100%}
.gallery{
    background:var(--card-bg);
    border-radius:14px;
    padding:18px;
    box-shadow:var(--shadow);
    border:1px solid rgba(108,92,231,0.06);
}
.carousel h2{margin:0 0 12px;font-size:1.05rem;color:rgba(11,18,32,0.85)}

.viewport{
    overflow:hidden;
    border-radius:10px;
    background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(250,247,255,0.7));
    border:1px solid rgba(16,24,40,0.03);
}

.track{
    display:flex;
    transition:transform .38s ease;
    gap:12px;
    padding:12px;
}

.slide{
    min-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.slide img{
    width:100%;
    max-height:520px;
    object-fit:cover;
    border-radius:10px;
    display:block;
    box-shadow:0 6px 22px rgba(12,18,30,0.06);
    border:4px solid transparent;
    transition:transform .28s ease, border-color .28s ease;
}
.slide img:hover{
    transform:scale(1.02);
    border-color:rgba(108,92,231,0.09);
}

/* controls */
.controls{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.controls .prev,
.controls .next{
    background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,255,0.85));
    border:1px solid rgba(11,18,32,0.06);
    color:var(--fg);
    width:44px;height:44px;border-radius:10px;font-size:18px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:transform .12s ease, box-shadow .12s ease;
}
.controls .prev:hover,
.controls .next:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(16,24,40,0.08);}

/* colorful next/prev variants */
.controls .prev{color:var(--accent);border-color:rgba(108,92,231,0.12)}
.controls .next{color:var(--accent-2);border-color:rgba(255,107,107,0.12)}

/* dots */
.dots{display:flex;gap:10px;flex:1;justify-content:center}
.dot{
    width:12px;height:12px;border-radius:99px;background:linear-gradient(90deg,#ececf7,#f6f1ff);
    border:1px solid rgba(0,0,0,.04);
    cursor:pointer;opacity:.95;transition:transform .14s ease, box-shadow .14s ease;
}
.dot:hover{transform:scale(1.12);box-shadow:0 6px 18px rgba(16,24,40,0.06)}
.dot.active{
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    box-shadow:0 6px 18px rgba(108,92,231,0.12);
    opacity:1;transform:scale(1.18)
}

/* footer */
footer{max-width:var(--maxw);width:100%;margin-top:18px;text-align:center;color:var(--muted);font-size:.9rem}
footer p{margin:6px 0}

/* responsive */
@media (max-width:640px){
    body{padding:18px}
    .slide img{max-height:360px}
    header{padding:0 6px}
}