/*
Archivo: assets/css/styles.css
Versión: 8.0.0
Fecha: 2026-05-30 16:25 hrs.
Descripción: Corrección funcional del arrastre, menú hamburguesa real, logo visible SVG y piezas sin desaparición.
*/

:root{
    --sky: #ffffff;
    --nav:#82c900;
    --nav-dark:#68ad00;
    --ink:#1f1f1f;
    --paper:#ffffff;
    --blue:#0f67ab;
    --shadow:0 8px 18px rgba(0,0,0,.16);
    --soft:0 4px 10px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-height:100vh;
    font-family:Arial, Helvetica, sans-serif;
    color:var(--ink);
    background: linear-gradient(180deg, #379dff 0%, #76d0ff 45%, #f9ffff 100%);
    overflow-x:hidden;
    padding-bottom:54px;
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 12% 6%, rgba(255,255,255,.30) 0 2px, transparent 3px),
        radial-gradient(circle at 75% 12%, rgba(255,255,255,.28) 0 2px, transparent 3px),
        radial-gradient(circle at 92% 24%, rgba(255,255,255,.28) 0 2px, transparent 3px);
}
body,button,img,.basket,.board-wrap{
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
}
input,textarea{
    -webkit-user-select:text;
    user-select:text;
}
body.dragging-now,
body.dragging-now *{
    cursor:grabbing!important;
    user-select:none;
}

.sky-shell{
    width:min(100%, 980px);
    margin:0 auto;
    padding:8px 8px 0;
    position:relative;
}
.top-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:6px 6px 8px;
    background-color: white;
}
.logo-link{
    display:block;
    width:min(380px, 72vw);
    line-height:0;
    flex:1 1 auto;
    max-width:430px;
}
.logo-svg{
    width: 80%;
    max-width: 150px;
    max-height: 90px;
    height:auto;
    display:block;
    /* filter:drop-shadow(0 5px 0 rgba(0,0,0,.12)); */
}
.top-actions{
    display:flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
}
.music-toggle{
    border:0;
    background:transparent;
    color:white;
    letter-spacing:.10em;
    font-size:.72rem;
    cursor:pointer;
    text-transform:uppercase;
    white-space:nowrap;
}
.hamburger{
    width:42px;
    height:38px;
    border:1px solid rgba(255,255,255,.62);
    background:linear-gradient(180deg,#97de00,#70ba00);
    border-radius:6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    cursor:pointer;
    box-shadow:var(--soft);
    padding:0;
}
.hamburger span{
    width:24px;
    height:3px;
    background:white;
    border-radius:99px;
    display:block;
    box-shadow:0 1px 0 rgba(0,0,0,.18);
}
.main-nav{
    display:none;
    grid-template-columns:1fr;
    background:linear-gradient(180deg,#93d700,#74be00);
    border-radius:7px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.58);
    box-shadow:var(--soft);
    margin-bottom:8px;
}
.main-nav.open{display:grid}
.nav-btn{
    border:0;
    background:linear-gradient(180deg,#91d700,#79bf00);
    color:white;
    padding:13px 10px;
    font-size:.82rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,.18);
}
.nav-btn:last-child{border-bottom:0}
.nav-btn span{font-size:1rem}
.nav-btn.active,.nav-btn:hover{background:linear-gradient(180deg,#9de000,#6fb000)}

.site-stage{
    background:var(--paper);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:var(--shadow);
    min-height:620px;
}
.site-page{display:none;padding:8px 8px 16px}
.site-page.active{display:block}

.mode-strip{
    display:grid;
    grid-template-columns:1fr 1fr;
    border:1px solid #d0d0d0;
    margin-bottom:8px;
    display: none;
}
.mode-tab{
    border:0;
    min-height:38px;
    font-size:.75rem;
    font-weight:900;
    letter-spacing:.08em;
    cursor:pointer;
    background:linear-gradient(180deg,#f8f8f8,#e8e8e8);
    color:#2a2a2a;
}
.mode-tab.active{
    background:linear-gradient(180deg,#8fd600,#77c000);
    color:white;
}

.board-area{
    background:#fff;
    padding:0;
    border:1px solid #dfdfdf;
    box-shadow:inset 0 0 0 1px #fff;
    perspective:1200px;
}
.board-wrap{
    width:100%;
    aspect-ratio:994 / 767;
    position:relative;
    background:#fff;
    overflow:hidden;
    touch-action:none;
    transform-style:preserve-3d;
}
.board-area.board-flip .board-wrap{
    animation:boardFlip 1s ease-in-out both;
}
@keyframes boardFlip{
    0%{transform:rotateY(0deg)}
    50%{transform:rotateY(92deg)}
    100%{transform:rotateY(0deg)}
}
.board-vector{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    pointer-events:none;
    opacity: 0.5!important;
}
.target-layer,.placed-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
}
.target,.placed-piece{
    position:absolute;
    left:var(--x);
    top:var(--y);
    width:var(--w);
    height:var(--h);
    pointer-events:none;
}
.target svg,.placed-piece svg,.piece svg{
    width:100%;
    height:100%;
    display:block;
    overflow:visible;
}
.target path{
    fill:transparent;
    stroke:transparent;
}
.placed-piece{
    filter:drop-shadow(1px 2px 1px rgba(0,0,0,.22));
    animation:pieceSnap .22s ease-out both;
}
@keyframes pieceSnap{
    0%{transform:scale(.92)}
    70%{transform:scale(1.04)}
    100%{transform:scale(1)}
}
.piece path,.placed-piece path{
    fill:var(--fill);
    stroke:#201e20;
    stroke-width:7;
    vector-effect:non-scaling-stroke;
    stroke-linejoin:round;
    stroke-linecap:round;
    paint-order:stroke fill;
}

.basket-zone{
    padding-top:12px;
}
.basket-title-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:10px;
    margin-bottom:10px;
    display: none;
}
.basket-title-row h1{
    margin:0 0 3px;
    font-size:1.02rem;
    text-transform:uppercase;
    color:#444;
    letter-spacing:.05em;
}
.basket-title-row p{
    margin:0;
    color:#0f67ab;
    font-size:.9rem;
    font-weight:900;
    line-height:1.25;
}
.small-actions{
    display:flex;
    align-items:center;
    gap:8px;
}
.score-box{
    min-width:68px;
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:3px;
    background:#0f67ab;
    color:white;
    padding:8px 10px;
    border-radius:6px;
    font-weight:900;
}
.score-box strong{
    font-size:1.35rem;
    line-height:1;
}
.score-box span{font-size:.84rem}
.reset-action{
    border:0;
    border-radius:999px;
    background:#111;
    color:white;
    min-height:36px;
    padding:0 14px;
    font-weight:900;
    text-transform:uppercase;
    cursor:pointer;
}
.basket{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    grid-auto-rows:86px;
    gap:14px 12px;
    padding:16px 12px 22px;
    min-height:auto;
    background:#fff;
    border:1px solid #dedede;
    overflow:visible;
    align-items:center;
    justify-items:center;
}
.piece{
    border:0;
    background:transparent;
    padding:0;
    position:relative;
    left:auto;
    top:auto;
    /* width:100%; */
    max-width:74px;
    height:auto;
    max-height:74px;
    justify-self:center;
    align-self:center;
    cursor:grab;
    transform:rotate(var(--rot));
    filter:drop-shadow(4px 6px 2px rgba(0,0,0,.28));
    z-index:5;
    transition:transform .16s ease, filter .16s ease;
    touch-action:none;
}
.piece svg{
    max-width:100%;
    max-height:74px;
    object-fit:contain;
}
.piece.next-piece{
    grid-column:span 2;
    justify-self:start;
    max-width:88px;
    max-height:88px;
    transform:rotate(var(--rot)) scale(1.12);
    z-index: 999;
}
.piece.next-piece svg{max-height:88px}
.piece.next-piece::after{
    content:attr(data-question);
    position:absolute;
    left:calc(100% + 8px);
    top:50%;
    transform:translateY(-50%);
    width:min(180px,44vw);
    background:#0f67ab;
    color:white;
    padding:9px 10px;
    border-radius:8px;
    font-size:.78rem;
    line-height:1.2;
    font-weight:900;
    box-shadow:var(--soft);
    text-align:left;
    z-index: 999999999999999999999999999999999999999;
}
.piece.next-piece::before{
    content:"";
    position:absolute;
    left:calc(100% + 1px);
    top:50%;
    transform:translateY(-50%);
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-right:8px solid #0f67ab;
    z-index:51;
}
.piece.dragging{
    max-width:none!important;
    max-height:none!important;
    transform:rotate(0deg) scale(1.05)!important;
    filter:drop-shadow(10px 12px 8px rgba(0,0,0,.24));
    z-index:10000;
    position:fixed!important;
}
.piece.dragging svg{max-height:none}
.piece.dragging::before,.piece.dragging::after{display:none!important}
.piece.assist-glow{
    filter:
        drop-shadow(4px 6px 2px rgba(0,0,0,.28))
        drop-shadow(0 0 8px rgba(255,255,255,1))
        drop-shadow(0 0 18px rgba(255,222,0,.96));
}
.piece.dragging.assist-glow{
    filter:
        drop-shadow(10px 12px 8px rgba(0,0,0,.24))
        drop-shadow(0 0 10px rgba(255,255,255,1))
        drop-shadow(0 0 24px rgba(255,222,0,.96))
        drop-shadow(0 0 34px rgba(255,124,0,.70));
}

.content-page{padding:10px 4px 0}
.content-page h2{
    margin:0 0 10px;
    font-size:1.15rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#444;
}
.content-grid.two-col,.contact-layout{display:grid;gap:14px}
.content-photo,.gallery-main{margin:0}
.content-photo img,.gallery-main img,.contact-data img,.testimonial-block img,.testimonial-grid img{
    width:100%;
    display:block;
    border:1px solid #ddd;
}
.content-photo figcaption{font-size:.86rem;color:#666;padding-top:6px}
.content-copy p{line-height:1.48;margin:.2rem 0 .9rem}
.content-copy ul{padding-left:1.2rem;margin:.3rem 0 0}
.content-copy li{margin-bottom:.45rem;line-height:1.4}
.gallery-layout{display:grid;gap:10px}
.gallery-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gallery-thumb{padding:0;border:2px solid #ececec;background:#fff;cursor:pointer}
.gallery-thumb.active{border-color:#89cb00}
.gallery-thumb img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.testimonial-block{display:grid;gap:12px;margin-bottom:12px}
.testimonial-block p{line-height:1.5;margin:.2rem 0}
.testimonial-block strong{display:block;margin-top:.6rem}
.testimonial-block span{color:#666;font-size:.94rem}
.testimonial-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contact-data p{line-height:1.45;margin:.6rem 0}
.contact-form{display:grid;gap:10px}
.contact-form label{display:grid;gap:4px;font-weight:900;color:#5c7b00}
.contact-form input,.contact-form textarea{
    width:100%;
    border:1px solid #b8d26a;
    background:#f7f8ef;
    padding:10px;
    font:inherit;
    outline:none;
}
.contact-form button{
    justify-self:end;
    min-width:120px;
    border:0;
    padding:10px 14px;
    background:#8bcc00;
    color:white;
    font-weight:900;
    cursor:pointer;
}
#formResult{min-height:1.2em;margin:0;color:#0f67ab;font-weight:900}

.site-footer{
    min-height:44px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    color:white;
    background:linear-gradient(180deg,#8fd400,#74be00);
    border:1px solid rgba(255,255,255,.72);
    border-top:0;
    border-radius:0 0 8px 8px;
    box-shadow:var(--soft);
    font-size:.85rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.site-footer span{
    width:20px;
    height:20px;
    border:2px solid white;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.82rem;
}
.grass-strip{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:54px;
    background:
        repeating-linear-gradient(100deg, transparent 0 8px,#69b100 8px 11px,transparent 11px 20px),
        repeating-linear-gradient(80deg, transparent 0 7px,#7cc205 7px 10px,transparent 10px 18px),
        linear-gradient(180deg,#8ccf00,#5eaa00);
    z-index:-1;
}
.game-modal{
    position:fixed;
    inset:0;
    z-index:20000;
    background:rgba(0,0,0,.42);
    display:grid;
    place-items:center;
    padding:18px;
}
.game-modal.hidden{display:none}
.modal-card{
    width:min(420px,calc(100vw - 36px));
    background:white;
    border-radius:14px;
    padding:22px 18px;
    text-align:center;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
    border:4px solid #85cc00;
}
.modal-card h2{
    margin:0 0 8px;
    color:#7ac700;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-size:1.45rem;
}
.modal-card p{
    margin:0 0 18px;
    font-size:1.08rem;
    font-weight:900;
    line-height:1.35;
}
.modal-card button{
    border:0;
    border-radius:999px;
    background:linear-gradient(180deg,#ffdf35,#ff9d1d);
    color:#342200;
    font-weight:1000;
    padding:13px 18px;
    cursor:pointer;
    box-shadow:var(--soft);
    text-transform:uppercase;
}
.toast{
    position:fixed;
    left:50%;
    bottom:68px;
    transform:translateX(-50%) translateY(18px);
    z-index:18000;
    width:min(92vw,480px);
    background:#0f67ab;
    color:white;
    border-radius:10px;
    padding:12px 14px;
    font-weight:900;
    box-shadow:0 10px 30px rgba(0,0,0,.22);
    opacity:0;
    pointer-events:none;
    transition:.22s ease;
    text-align:center;
}
.toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
.toast.ok{background:#69bd00}
.toast.error{background:#d5311a}
.drag-hand{
    position:fixed;
    z-index:10000;
    pointer-events:none;
    display:none;
    font-size:44px;
    filter:drop-shadow(0 3px 2px rgba(0,0,0,.35));
    transform:translate(-12px,-12px);
}
.drag-hand.show{display:block}
.celebrate-label{
    position:fixed;
    left:var(--x);
    top:var(--y);
    z-index:10001;
    transform:translate(-50%,-50%);
    background:linear-gradient(180deg,#ffffff,#fff185);
    color:#189000;
    font-weight:1000;
    padding:8px 14px;
    border-radius:999px;
    border:3px solid white;
    box-shadow:0 8px 22px rgba(0,0,0,.16);
    animation:labelPop .9s ease forwards;
}
@keyframes labelPop{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}
    20%{opacity:1;transform:translate(-50%,-90%) scale(1.06)}
    100%{opacity:0;transform:translate(-50%,-150%) scale(.92)}
}
.confetti-root{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9999;
    overflow:hidden;
}
.confetti{
    position:absolute;
    left:var(--x);
    top:var(--y);
    width:8px;
    height:13px;
    border-radius:2px;
    background:var(--c);
    transform:translate(-50%,-50%) rotate(var(--r));
    animation:confettiFly var(--d) ease-out forwards;
}
@keyframes confettiFly{
    0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scale(1)}
    100%{opacity:0;transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rr)) scale(.6)}
}

@media (min-width:860px){
    .top-header{align-items:center}
    .logo-link{width:460px}
    .main-nav{
        position:absolute;
        right:8px;
        top:78px;
        width:260px;
        z-index:9000;
    }
    .site-page{padding:10px 10px 18px}
    .basket{
        grid-template-columns:repeat(10,minmax(0,1fr));
        grid-auto-rows:82px;
        gap:12px;
        padding:16px 14px 20px;
    }
    .piece{
        max-width:70px;
        max-height:70px;
    }
    .piece svg{max-height:70px}
    .piece.next-piece{
        grid-column:span 2;
        max-width:84px;
        max-height:84px;
    }
    .piece.next-piece svg{max-height:84px}
    .piece.next-piece::after{
        width:170px;
        font-size:.82rem;
    }
    .content-grid.two-col,.contact-layout{grid-template-columns:1fr 1fr}
    .gallery-layout{grid-template-columns:minmax(0,1fr) 180px;align-items:start}
    .gallery-thumbs{grid-template-columns:1fr}
    .testimonial-block{grid-template-columns:.9fr 1.1fr;align-items:start}
}
@media (max-width:430px){
    .sky-shell{padding-left:6px;padding-right:6px}
    .logo-link{width:min(268px,66vw)}
    .music-toggle{font-size:.58rem}
    .hamburger{width:38px;height:34px}
    .hamburger span{width:21px}
    .mode-tab{font-size:.66rem}
    .basket-title-row{
        align-items:flex-start;
        flex-direction:column;
    }
    .small-actions{
        width:100%;
        justify-content:space-between;
    }
    .basket{
        grid-template-columns:repeat(3,minmax(0,1fr));
        grid-auto-rows:82px;
        gap:12px 10px;
        padding:14px 10px 24px;
    }
    .piece{
        max-width:66px;
        max-height:66px;
    }
    .piece svg{max-height:66px}
    .piece.next-piece{
        grid-column:span 2;
        max-width:78px;
        max-height:78px;
    }
    .piece.next-piece svg{max-height:78px}
    .piece.next-piece::after{
        width:min(142px,42vw);
        font-size:.70rem;
        padding:7px 8px;
    }
    .gallery-thumbs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:350px){
    .basket{grid-auto-rows:76px}
    .piece.next-piece::after{
        width:118px;
        font-size:.66rem;
    }
}