* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', cursive;
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3, #ff2400, #e81d1d);
    background-size: 1800% 1800%;
    animation: rainbowBG 12s ease infinite;
    min-height: 100vh;
    color: #000;
    overflow-x: hidden;
}

@keyframes rainbowBG { 0%{background-position:0% 82%} 50%{background-position:100% 19%} 100%{background-position:0% 82%} }
@keyframes wobble { 0%,100%{transform:rotate(-2deg) scale(1)} 25%{transform:rotate(2deg) scale(1.03)} 50%{transform:rotate(-1deg) scale(1.05)} 75%{transform:rotate(1.5deg) scale(1.02)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes spin3d { 0%{transform:perspective(400px) rotateY(0)} 100%{transform:perspective(400px) rotateY(360deg)} }
@keyframes marquee { 0%{transform:translateX(100vw)} 100%{transform:translateX(-100%)} }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@keyframes sparkleAnim { 0%{opacity:1;transform:scale(1) translateY(0)} 100%{opacity:0;transform:scale(.3) translateY(-40px)} }

/* HEADER */
.header { text-align: center; padding: 40px 20px 20px; }
.header h1 { font-size: 3.5rem; color: #fff; text-shadow: 3px 3px 0 #ff00ff, -3px -3px 0 #00ffff, 6px 6px 0 #000; animation: wobble 2s ease-in-out infinite; letter-spacing: 3px; }
.header .subtitle { font-size: 1.6rem; color: #ffff00; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; margin-top: 10px; animation: blink 1.2s step-end infinite; }
.header .badge { display: inline-block; background: #ff00ff; color: #fff; padding: 8px 24px; border-radius: 30px; font-size: 1.1rem; margin-top: 15px; border: 3px dashed #ffff00; text-shadow: 1px 1px 0 #000; animation: spin3d 4s linear infinite; }

/* MARQUEE */
.marquee-bar { background: #000; color: #0f0; font-size: 1.3rem; padding: 10px 0; overflow: hidden; white-space: nowrap; border-top: 4px solid #ff00ff; border-bottom: 4px solid #00ffff; margin: 20px 0; }
.marquee-bar span { display: inline-block; animation: marquee 14s linear infinite; }

/* VISITOR COUNTER */
.visitor-counter { text-align: center; margin: 10px 0 20px; font-size: 1.1rem; color: #fff; text-shadow: 1px 1px 0 #000; }
.counter-box { display: inline-block; background: #000; color: #0f0; font-family: 'Courier New', monospace; padding: 4px 12px; border: 2px solid #0f0; font-size: 1.3rem; letter-spacing: 4px; margin: 0 5px; }

/* CAROUSEL */
.carousel-section { max-width: 1100px; margin: 0 auto; padding: 0 20px 40px; }
.carousel-section h2 { text-align: center; font-size: 2.2rem; color: #fff; text-shadow: 3px 3px 0 #000; margin-bottom: 25px; }
.carousel-wrapper { position: relative; overflow: hidden; border: 5px dashed #ffff00; border-radius: 20px; background: rgba(0,0,0,.35); padding: 30px 20px; }
.carousel-track { display: flex; transition: transform .6s cubic-bezier(.68,-.55,.27,1.55); }
.carousel-slide { min-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px; padding: 10px; }

/* MEME CARD */
.meme-card { flex: 1 1 320px; max-width: 420px; background: #fff; border: 5px solid #ff00ff; border-radius: 18px; overflow: hidden; box-shadow: 8px 8px 0 #000; transform: rotate(-1deg); transition: transform .3s; }
.meme-card:hover { transform: rotate(1deg) scale(1.03); }
.meme-card img { width: 100%; display: block; border-bottom: 4px dashed #00ffff; }
.meme-caption { padding: 10px; text-align: center; font-size: 1rem; background: #ffff00; color: #000; font-weight: bold; }

/* REVIEW CARD */
.review-card { flex: 1 1 320px; max-width: 420px; background: linear-gradient(135deg, #ffe4f9, #e4f9ff); border: 4px solid #00ff00; border-radius: 18px; padding: 22px; box-shadow: 8px 8px 0 #000; transform: rotate(1deg); transition: transform .3s; }
.review-card:hover { transform: rotate(-1deg) scale(1.03); }
.review-card .stars { font-size: 1.8rem; margin-bottom: 8px; }
.review-card .review-text { font-size: 1.05rem; line-height: 1.5; color: #222; margin-bottom: 12px; }
.review-card .reviewer { font-weight: bold; color: #ff00ff; font-size: 1rem; text-align: right; }
.review-card .reviewer-title { font-size: .85rem; color: #666; text-align: right; font-style: italic; }

/* CAROUSEL BUTTONS */
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: #ff00ff; color: #fff; border: 4px solid #ffff00; font-size: 2.5rem; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; z-index: 10; font-family: 'Comic Sans MS', cursive; box-shadow: 4px 4px 0 #000; transition: background .2s, transform .2s; }
.carousel-btn:hover { background: #00ffff; color: #000; transform: translateY(-50%) scale(1.15); }
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

/* DOTS */
.carousel-dots { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.carousel-dots .dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #ff00ff; cursor: pointer; transition: background .3s, transform .3s; }
.carousel-dots .dot.active { background: #ff00ff; transform: scale(1.3); }

/* TESTIMONIAL */
.testimonial { max-width: 800px; margin: 30px auto; text-align: center; padding: 20px; }
.testimonial-box { background: rgba(0,0,0,.5); border: 4px dashed #0f0; border-radius: 16px; padding: 25px; color: #0f0; font-size: 1.2rem; }

/* FOOTER */
.footer { text-align: center; padding: 30px 20px 20px; font-size: 1rem; color: #fff; text-shadow: 1px 1px 0 #000; }
.footer a { color: #ffff00; text-decoration: none; }
.guestbook-btn { display: inline-block; margin-top: 12px; padding: 12px 30px; background: #ff00ff; color: #fff; border: 3px solid #ffff00; border-radius: 10px; font-family: 'Comic Sans MS', cursive; font-size: 1.1rem; cursor: pointer; box-shadow: 4px 4px 0 #000; text-decoration: none; animation: pulse 1.5s ease-in-out infinite; }

/* SPARKLE */
.sparkle { position: fixed; pointer-events: none; font-size: 1.5rem; animation: sparkleAnim .8s forwards; z-index: 9999; }

/* UNDER CONSTRUCTION */
.under-construction { text-align: center; margin: 10px 0; }

/* RESPONSIVO */
@media (max-width: 768px) {
    .header h1 { font-size: 2.2rem; }
    .header .subtitle { font-size: 1.2rem; }
    .carousel-slide { flex-direction: column; align-items: center; }
    .meme-card, .review-card { max-width: 95%; }
    .carousel-btn { width: 45px; height: 45px; font-size: 1.8rem; }
}