/* ===== El Pecat Vermell · versión Noria ===== */
:root{--rojo:#d9202c;--rojo-neon:#d9202c;--choco:#4a2511;--choco2:#a65a3a;--crema:#fff6ec;--texto-suave:#a1a1a6;--tarjeta-cristal-dark:rgba(22,22,26,.8);--borde-cristal:rgba(217,32,44,.35)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;color:var(--choco);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.45;background:#fbf1e6 url('/imgs/FondoCrema.webp') center top/600px auto repeat}
.wheel-pre main{visibility:hidden}

/* Cabecera */
header{position:sticky;top:8px;z-index:100;margin:8px auto 0;width:calc(100% - 20px);max-width:1100px;display:flex;justify-content:space-between;align-items:center;padding:6px 14px;background:rgba(255,246,236,.88);backdrop-filter:blur(12px);border:1px solid rgba(166,90,58,.3);border-radius:999px;box-shadow:0 6px 22px rgba(110,50,20,.2)}
.logo-container{display:flex}.logo-container img{height:44px;display:block}
.header-actions{display:flex;align-items:center;gap:10px}
.lang-switch{display:flex;gap:3px;background:rgba(166,90,58,.1);padding:3px;border-radius:20px}
.lang-btn{background:transparent;border:0;color:var(--choco2);padding:5px 10px;border-radius:15px;font-size:12px;font-weight:700;cursor:pointer}
.lang-btn.active{background:var(--rojo);color:#fff}
.btn-fidelidad,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:10px 20px;border-radius:999px;font:700 1rem 'Fredoka',system-ui,sans-serif;transition:transform .2s,box-shadow .2s}
.btn-fidelidad{background:linear-gradient(135deg,#e0222d,#b3121c);color:#fff;box-shadow:0 6px 16px rgba(179,18,28,.35)}
.btn-ghost{color:var(--choco);border:2px solid var(--choco2);background:rgba(255,255,255,.5)}
.btn-fidelidad:hover,.btn-ghost:hover{transform:translateY(-2px)}

/* Versión clásica (respaldo sin JS / movimiento reducido) */
.cabin-group{max-width:1100px;margin:0 auto}
.cabin-head{font:400 2.2rem 'Pacifico',cursive;color:var(--rojo);text-align:center;margin:40px 0 16px;text-shadow:0 2px 0 #fff6ec}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;padding:0 16px}
.card{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:18px;border-radius:22px;background:rgba(255,251,246,.88);border:1px solid rgba(166,90,58,.25);box-shadow:0 12px 30px rgba(110,50,20,.2);overflow:auto}
.img-card{padding:8px;overflow:hidden}
.img-card img{width:100%;height:auto;display:block;border-radius:14px;cursor:zoom-in}
.hero-logo{height:clamp(120px,24vh,230px);width:auto;max-width:90%;object-fit:contain}
.hero-title{font:400 clamp(1.8rem,5.5vw,3.4rem) 'Pacifico',cursive;color:var(--rojo);margin:8px 0;line-height:1.25;text-shadow:0 2px 0 #fff6ec,0 5px 12px rgba(110,50,20,.25)}
.hero-title span{display:inline-block}
.neon-sub{font:700 clamp(1.5rem,3.5vw,2.1rem) 'Caveat',cursive;color:var(--choco2)}
.hero-desc{margin:4px 0 14px;font-size:clamp(.95rem,2vw,1.15rem)}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:12px}
.slogan-badge{display:inline-block;background:var(--choco);color:var(--crema);padding:7px 18px;border-radius:20px;font:.85rem 'Righteous',cursive;letter-spacing:1px;text-transform:uppercase}
.feature .ico,.loyalty-card .ico{font-size:3rem}
.feature h3,.price-card h3{font:400 1.7rem 'Pacifico',cursive;color:var(--rojo);margin:.2em 0}
.feature p{margin:0}
.price-card{align-items:stretch}.price-card h3{text-align:center}
.price-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed rgba(166,90,58,.4);font-weight:600}
.price-tag{font:700 1.8rem 'Caveat',cursive;color:var(--rojo);white-space:nowrap}
.address-info{margin-bottom:12px}.address-title{color:var(--rojo)}
.map-wrapper{width:100%;height:260px;border-radius:14px;overflow:hidden;border:1px solid rgba(166,90,58,.3)}
.map-wrapper iframe{width:100%;height:100%;border:0}
footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;padding:10px 16px;background:#2a140a;border-top:2px solid var(--rojo);color:#ffd9c2}
.footer-copyright{margin:0;font-size:.8rem;color:#ffd9c2}

/* Modo noria */
body.wheel-on{overflow:hidden;height:100%}
.wheel-on main{display:none}
.wheel-on .admin-toolbar{position:fixed;left:0;right:0;top:0}
.wheel-on header{position:fixed;left:10px;right:10px;width:auto;margin:0 auto;top:calc(var(--tb,0px) + 8px)}
.wheel-on footer{position:fixed;bottom:0;left:0;right:0;z-index:60}
.stage{position:fixed;left:0;right:0;bottom:var(--ft,0px);top:calc(var(--tb,0px) + 70px);perspective:1500px;overflow:hidden}
.wheel{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.65,0,.25,1)}
.cabin{position:absolute;top:50%;left:50%;width:min(94vw,1120px);height:min(72vh,calc(100vh - var(--tb,0px) - var(--ft,0px) - 120px),660px);display:flex;flex-direction:column;gap:8px;padding:24px 14px 12px;transition:opacity .6s,filter .6s;backface-visibility:hidden}
.cabin::before{content:"";position:absolute;top:-8px;left:3%;right:3%;height:14px;border-radius:14px 14px 4px 4px;background:repeating-linear-gradient(90deg,#d9202c 0 28px,#fff3e8 28px 56px);box-shadow:0 4px 10px rgba(110,50,20,.3)}
.cabin::after{content:"";position:absolute;top:-32px;left:50%;width:4px;height:24px;background:var(--choco2)}
.cabin-head{margin:0;font-size:clamp(1.4rem,3.4vw,2rem)}
.cabin-cards{flex:1;min-height:0;display:flex;gap:14px}
.cabin .card{flex:1;min-width:0;min-height:0}
.wheel-on .img-card img{height:100%;min-height:0;object-fit:contain}
.cabin.d0{opacity:1}
.cabin.d1{opacity:.6;filter:blur(2px);cursor:pointer}
.cabin.d2{opacity:.28;filter:blur(4px)}
.cabin.d3{opacity:0;pointer-events:none}
.cabin:not(.d0) .cabin-cards{pointer-events:none}
.wheel-on .map-wrapper{height:100%;flex:1;min-height:0}
.wheel-on .map-wrapper iframe{pointer-events:none}
.wheel-on .map-wrapper.on iframe{pointer-events:auto}
.dots{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px;z-index:5}
.dots button{width:10px;height:10px;padding:0;border-radius:50%;border:1.5px solid var(--choco2);background:rgba(255,246,236,.8);cursor:pointer}
.dots button.on{background:var(--rojo);border-color:var(--rojo);transform:scale(1.5)}

/* Lightbox */
.image-modal{display:none;position:fixed;inset:0;background:rgba(40,18,8,.88);z-index:1000;justify-content:center;align-items:center;opacity:0;transition:opacity .2s;padding:15px}
.image-modal.active{display:flex;opacity:1}
.image-modal img{max-width:95%;max-height:90vh;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.modal-close{position:absolute;top:18px;right:24px;color:#fff;font-size:36px;font-weight:700;cursor:pointer;user-select:none}
@media(max-width:600px){.btn-fidelidad,.btn-ghost{padding:8px 14px;font-size:.9rem}.logo-container img{height:38px}.cabin{padding:22px 8px 10px}}

/* Cesta de portada: fondo negro y titulo de neon rojo parpadeante */
.hero-card{background:radial-gradient(ellipse at 50% 30%,#2b0912 0,#0a0507 72%);border:1px solid rgba(255,42,85,.55);box-shadow:0 0 34px rgba(255,42,85,.4),0 14px 34px rgba(0,0,0,.5);color:#f5e6da}
.hero-logo{filter:drop-shadow(0 0 10px rgba(255,255,255,.55))}
.hero-title{color:#ffe0e6;letter-spacing:1px;text-shadow:0 0 3px #fff,0 0 8px #ff2a55,0 0 18px #ff2a55,0 0 36px #ff0033,0 0 70px #d4002d}
.hero-title span:first-child{animation:flicker 6s infinite}
.hero-title span:last-child{animation:flicker 4.5s infinite .8s}
@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.3}}
.hero-card .neon-sub{color:#ffd9c2;text-shadow:0 0 10px rgba(255,107,129,.6)}
.hero-card .hero-desc{color:#f5e6da}
.hero-card .btn-fidelidad{box-shadow:0 0 18px rgba(255,42,85,.65)}
.hero-card .btn-ghost{color:#ffe9ee;border-color:rgba(255,120,140,.7);background:rgba(255,255,255,.07)}
.hero-card .slogan-badge{background:linear-gradient(135deg,#ff2a55,#c01138);color:#fff;box-shadow:0 0 16px rgba(255,42,85,.5)}
@media(prefers-reduced-motion:reduce){.hero-title span{animation:none}}

/* Destacados: una sola cesta con tres filas */
.features-card{align-items:stretch;justify-content:space-around;gap:4px}
.feature-row{display:flex;align-items:center;gap:16px;text-align:left;padding:8px 6px}
.feature-row+.feature-row{border-top:1px dashed rgba(166,90,58,.4)}
.feature-row .ico{font-size:2.6rem;flex:none}
.feature-row h3{font:400 1.5rem 'Pacifico',cursive;color:var(--rojo);margin:0}
.feature-row p{margin:2px 0 0}
/* Galeria: carrusel horizontal */
.gallery-card{position:relative;padding:8px;overflow:hidden;align-items:stretch;justify-content:stretch}
.gal-track{display:flex;width:100%;height:min(70vh,520px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:14px}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center}
.gal-slide img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in}
.cabin .gal-track{height:100%}
.gal-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,246,236,.92);color:var(--rojo);font-size:1.9rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(110,50,20,.35)}
.gal-btn.prev{left:14px}.gal-btn.next{right:14px}
.gal-btn:hover{background:#fff}

/* Cestas negras con borde de neon palpitante (solo palpita la cesta activa, para no cargar el movil) */
.cabin{background:#050304;border:2px solid #ff2a55;border-radius:24px;box-shadow:0 0 8px #ff2a55,0 0 22px rgba(255,42,85,.45),inset 0 0 12px rgba(255,42,85,.2)}
.cabin .cabin-head{color:#ff8da1;text-shadow:0 0 5px #ff2a55,0 0 14px #ff2a55,0 0 30px rgba(255,0,51,.65)}
.cabin .card{border:1.5px solid #ff6b81;box-shadow:0 0 6px rgba(255,107,129,.8),0 0 16px rgba(255,107,129,.4)}
.cabin.d0{animation:neonCabin 2.6s ease-in-out infinite}
.cabin.d0 .card{animation:neonCard 2.6s ease-in-out infinite}
.cabin.d0 .card:nth-child(2){animation-delay:-.9s}
.cabin.d0 .card:nth-child(3){animation-delay:-1.7s}
@keyframes neonCabin{0%,100%{box-shadow:0 0 6px #ff2a55,0 0 14px rgba(255,42,85,.7),0 0 28px rgba(255,42,85,.4),inset 0 0 10px rgba(255,42,85,.2)}50%{box-shadow:0 0 12px #ff2a55,0 0 28px #ff2a55,0 0 56px rgba(255,42,85,.7),inset 0 0 22px rgba(255,42,85,.45)}}
@keyframes neonCard{0%,100%{box-shadow:0 0 4px rgba(255,107,129,.8),0 0 10px rgba(255,107,129,.5)}50%{box-shadow:0 0 9px #ff6b81,0 0 22px rgba(255,107,129,.95),0 0 34px rgba(255,107,129,.45)}}
@media(prefers-reduced-motion:reduce){.cabin.d0,.cabin.d0 .card{animation:none}}

/* ===== Barra Staff y modal de login (movido desde index.php) ===== */
        /* Estilos de la Barra de Herramientas para Staff autenticado */
        .admin-toolbar {
            background: rgba(13, 13, 15, 0.95);
            border-bottom: 1px solid var(--rojo-neon);
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
            backdrop-filter: blur(10px);
            font-family: system-ui, -apple-system, sans-serif;
        }
        .admin-toolbar-title {
            color: #fff;
            font-weight: bold;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .admin-menu {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .admin-menu a {
            background: rgba(255, 42, 85, 0.15);
            color: #fff;
            text-decoration: none;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            border: 1px solid rgba(255, 42, 85, 0.4);
            transition: all 0.2s ease;
        }
        .admin-menu a:hover {
            background: var(--rojo-neon);
            box-shadow: 0 0 10px var(--rojo-neon);
        }
        .btn-logout-link {
            color: var(--texto-suave);
            text-decoration: none;
            font-size: 0.85rem;
            margin-left: 10px;
        }
        .btn-logout-link:hover {
            color: var(--rojo-neon);
        }

        /* Estilos Modal de Login */
        .staff-modal {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(5, 5, 8, 0.85);
            backdrop-filter: blur(8px);
            z-index: 9999;
            align-items: center;
            justify-content: center;
            padding: 15px;
            box-sizing: border-box;
        }
        .staff-modal-card {
            background: var(--tarjeta-cristal-dark);
            border: 1px solid var(--borde-cristal);
            border-radius: 20px;
            padding: 30px 25px;
            width: 100%;
            max-width: 340px;
            text-align: center;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
            font-family: system-ui, -apple-system, sans-serif;
        }
        .staff-modal-card h3 {
            font-family: 'Pacifico', cursive;
            color: #fff;
            font-size: 1.8rem;
            margin-top: 0;
            margin-bottom: 15px;
            text-shadow: 0 0 10px var(--rojo-neon);
        }
        .staff-input {
            width: 100%;
            padding: 12px;
            border-radius: 10px;
            border: 1px solid rgba(255, 42, 85, 0.3);
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            font-size: 1rem;
            box-sizing: border-box;
            margin-bottom: 15px;
            outline: none;
        }
        .staff-input:focus {
            border-color: var(--rojo-neon);
            box-shadow: 0 0 10px rgba(255, 42, 85, 0.5);
        }
        .staff-btn-submit {
            width: 100%;
            padding: 12px;
            border-radius: 10px;
            border: none;
            background: var(--rojo-neon);
            color: white;
            font-weight: bold;
            font-size: 1rem;
            cursor: pointer;
            box-shadow: 0 0 15px rgba(255, 42, 85, 0.5);
            transition: all 0.3s ease;
        }
        .staff-btn-submit:hover {
            transform: scale(1.02);
            box-shadow: 0 0 25px rgba(255, 42, 85, 0.8);
        }
        .staff-btn-cancel {
            background: transparent;
            border: none;
            color: var(--texto-suave);
            margin-top: 12px;
            cursor: pointer;
            font-size: 0.85rem;
        }
        .staff-btn-cancel:hover {
            color: #fff;
        }
        .staff-footer-link {
            display: inline-block;
            margin-top: 15px;
            color: rgba(255, 255, 255, 0.2);
            text-decoration: none;
            font-size: 0.75rem;
            transition: color 0.3s ease;
        }
        .staff-footer-link:hover {
            color: var(--rojo-neon);
        }
    
.staff-modal.open{display:flex}
.staff-error{color:#ff2a55;font-size:.85rem;margin-bottom:12px;font-weight:700}
.wheel-on .admin-toolbar{position:fixed;left:0;right:0;top:0}
footer .staff-footer-link{position:static;display:inline-block;margin:0;padding:6px 10px;border:0;background:none;opacity:1;color:rgba(255,217,194,.22);font-size:.7rem;letter-spacing:.1em;text-decoration:none}footer .staff-footer-link:hover{color:rgba(255,217,194,.6)}

.features-card p {
    white-space: pre-line;
}