/* ==========================================================
   UVAN BATTERY - PREMIUM UI v2.1 (Performance Edition)
   ========================================================== */

:root{
  --bg:#f4f6f9;
  --card:rgba(255,255,255,.88);
  --text:#1d1d1f;
  --muted:#6b7280;
  --primary:#d60000;
  --primary2:#ff3030;
  --success:#16a34a;
  --warning:#f59e0b;
  --danger:#dc2626;
  --radius:22px;
  --shadow:0 8px 22px rgba(0,0,0,.10);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html{scroll-behavior:smooth}

body{
  font-family:Inter,Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  background:
  radial-gradient(circle at top,#ffd9d9 0,#fff 35%),
  linear-gradient(#fff,#f4f6f9);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

a{text-decoration:none;color:inherit}

.hero{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:90px 20px 45px;
}

.hero::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  background:#ff3a3a;
  filter:blur(120px);
  opacity:.08;
  top:-200px;
  left:50%;
  transform:translateX(-50%);
}

.logo{width:140px;position:relative;z-index:2}

.hero h1{font-size:2.2rem;margin-top:10px}
.hero p{color:var(--muted)}

.promo,.buscador,.card,.popup{
  backdrop-filter:blur(8px);
  background:var(--card);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:var(--shadow);
}

.promo,.buscador{
  max-width:760px;
  margin:28px auto;
  padding:28px;
  border-radius:var(--radius);
}

.btn{
  display:inline-block;
  margin-top:16px;
  padding:15px 22px;
  border:none;
  border-radius:18px;
  color:#fff;
  font-weight:700;
  background:linear-gradient(135deg,var(--primary2),var(--primary));
  box-shadow:0 8px 18px rgba(214,0,0,.22);
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
  cursor:pointer;
}

.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}

.titulo{text-align:center;margin:40px 0 25px;color:var(--primary)}

select,button{
  width:100%;
  height:58px;
  border-radius:18px;
  font-size:16px;
}

select{
  margin-bottom:16px;
  border:2px solid #ececec;
  padding:0 18px;
  background:#fafafa;
}

#resultado{margin-top:24px;padding-top:20px;border-top:1px solid #eee}
#resultado h1{font-size:62px;color:var(--primary)}

.card{
  display:block;
  margin:18px;
  padding:24px;
  border-radius:24px;
  transition:transform .2s ease,box-shadow .2s ease;
  content-visibility:auto;
  contain-intrinsic-size:280px;
}

.card:hover{transform:translateY(-4px)}

.estado{
  margin:12px 0;
  padding:14px 16px;
  border-radius:18px;
  background:#fff;
  border:1px solid #ececec;
}

.estado-box{display:flex;gap:12px;align-items:flex-start}
.estado-dot{width:12px;height:12px;border-radius:50%;margin-top:6px}
.open .estado-dot{background:#22c55e}
.closed .estado-dot{background:#dc2626}
.closing-soon .estado-dot,.opening-soon .estado-dot{background:#f59e0b}

.float{
 position:fixed;
 right:20px;
 bottom:20px;
 background:#25D366;
 color:#fff;
 padding:17px 22px;
 border-radius:999px;
 box-shadow:0 10px 20px rgba(0,0,0,.22);
 z-index:999;
}

.popup{
 position:fixed;
 left:20px;
 bottom:95px;
 max-width:330px;
 padding:16px;
 border-radius:20px;
 transform:translateY(150%);
 transition:transform .35s ease;
 z-index:999;
}

.popup.show{transform:translateY(0)}

body.dark{
 --card:rgba(28,32,40,.90);
 --text:#f5f5f5;
 --muted:#a5acb8;
 background:
 radial-gradient(circle at top,#4a0000 0,#0d1117 35%),
 #0d1117;
}

body.dark .promo,
body.dark .buscador,
body.dark .card,
body.dark .popup,
body.dark .estado{
 background:var(--card);
 color:var(--text);
 border-color:#303845;
}

@media(max-width:700px){
.hero{padding:90px 16px 35px}
.logo{width:120px}
.card{margin:12px;padding:20px}
.buscador{margin:20px 12px;padding:20px}
.popup{left:10px;right:10px;max-width:none}
#resultado h1{font-size:48px}
}

.footer{
    background:#0f0f0f;
    color:#fff;
    text-align:center;
    padding:50px 20px 30px;
    border-top:2px solid #d40000;
}

.footer-logo{
    width:90px;
    margin-bottom:15px;
}

.footer h3{
    font-size:1.8rem;
    margin-bottom:8px;
}

.footer p{
    color:#cfcfcf;
}

.footer-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    margin:30px 0;
}

.footer-links a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
    font-weight:bold;
}

.footer-links a:hover{
    color:#ff2d2d;
}

.footer-social{
    display:flex;
    justify-content:center;
    gap:18px;
    margin:25px 0;
}

.social-section{
    padding:60px 20px;
    text-align:center;
    background:#111;
    color:#fff;
}

.social-section h2{
    font-size:2rem;
    margin-bottom:10px;
}

.social-section p{
    color:#ccc;
    margin-bottom:35px;
}

.social-links{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.social-links a{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#fff;
    padding:15px 25px;
    border-radius:12px;
    font-weight:bold;
    transition:.3s;
}

.facebook{
    background:#1877F2;
}

.instagram{
    background:linear-gradient(45deg,#833AB4,#FD1D1D,#FCAF45);
}

.tiktok{
    background:#000;
    border:1px solid #444;
}

.social-links a:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.3);
}

.social-links i{
    font-size:22px;
}

.footer-social a{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#1d1d1d;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    transition:.3s;
}

.footer-social a:hover{
    background:#d40000;
    transform:translateY(-5px);
}

.footer-horario{
    margin:25px 0;
    color:#bfbfbf;
    line-height:1.8;
}

.copyright{
    margin-top:25px;
    font-size:.9rem;
    color:#888;
}