:root{
  --verde:#6fa84f;
  --verde-oscuro:#2f8f2f;
  --negro:#050505;
  --borde:#1f1f1f;
  --texto:#ffffff;
  --texto-suave:#b5b5b5;
}

/* BASE */
*{box-sizing:border-box;font-family:'Poppins',Arial,sans-serif}
body{margin:0;background:radial-gradient(circle at top,#141414,#050505);color:var(--texto)}

/* ===== MENU FLOTANTE ===== */

.menu-float{
  position:fixed;
  top:4px;
  left:0;
  width:100%;
  z-index:10000;
  pointer-events:none;
}

.menu-bar{
  max-width:1200px;
  margin:0 auto;
  background:rgba(5,5,5,.88);
  backdrop-filter:blur(8px);
  border:1px solid #1f1f1f;
  border-radius:18px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 10px 25px rgba(0,0,0,.7);
  pointer-events:auto;
}

.menu-logo{
  height:38px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(111,168,79,.5));
}

.menu-btn{
  background:linear-gradient(135deg,var(--verde-oscuro),var(--verde));
  color:#081508;
  border:none;
  border-radius:30px;
  padding:10px 18px;
  font-weight:700;
  letter-spacing:1px;
  cursor:pointer;
  box-shadow:0 0 15px rgba(111,168,79,.7);
}

/* BOTÓN MARCAS PRO */
.menu-btn-pro{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  overflow:hidden;
  animation:marcasPulse 2.5s ease-in-out infinite;
}

.menu-btn-pro span{z-index:2;position:relative}

.menu-btn-pro .icon-menu{
  font-style:normal;
  font-size:18px;
  transition:.3s;
  z-index:2;
  position:relative;
}

.menu-btn-pro::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-70%;
  width:40%;
  height:220%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:rotate(25deg);
  animation:marcasShine 3.2s infinite;
}

.menu-btn-pro:hover{
  transform:scale(1.08);
  box-shadow:0 0 30px rgba(111,168,79,.9);
}

.menu-btn-pro:hover .icon-menu{
  transform:rotate(180deg);
}

/* MENÚ MARCAS ANIMADO */
.menu-marcas{
  max-width:320px;
  margin:8px auto 0;
  background:rgba(5,5,5,.96);
  border:1px solid #1f1f1f;
  border-radius:16px;
  overflow:hidden;
  pointer-events:auto;
  box-shadow:0 15px 35px rgba(0,0,0,.8);

  opacity:0;
  transform:translateY(-10px) scale(.96);
  filter:blur(4px);
  visibility:hidden;

  transition:.45s cubic-bezier(.2,.8,.2,1);
}

.menu-marcas.menu-open{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
  visibility:visible;
}

.menu-marcas a{
  display:block;
  padding:12px 18px;
  color:#eaffea;
  text-decoration:none;
  border-bottom:1px solid #1a1a1a;
  letter-spacing:1px;
  transition:.25s;
}

.menu-marcas a:hover{
  background:linear-gradient(90deg,rgba(111,168,79,.25),transparent);
  color:white;
  padding-left:26px;
}

.menu-marcas a:last-child{border-bottom:none}

/* espacio superior */
.hero{padding-top:95px}

/* ===== HERO ===== */

.hero{height:100vh;background-size:cover;background-position:center;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.88),rgba(0,0,0,.55))}
.hero-content{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}

/* LOGO HERO */
.hero-logo{
  width:210px;
  max-width:75%;
  margin-bottom:18px;
  opacity:0;
  transform:translateY(30px) scale(.85);
  filter:drop-shadow(0 0 18px rgba(111,168,79,.6));
  animation:logoEntrada 1.4s ease forwards,logoFloat 4s ease-in-out infinite 1.4s;
}

@keyframes logoEntrada{
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes logoFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
  100%{transform:translateY(0)}
}

/* ESLOGAN */
.hero-eslogan{
  margin-top:12px;
  font-size:20px;
  color:#dfffdc;
  letter-spacing:1.5px;
  text-shadow:0 0 12px rgba(111,168,79,.6);
  min-height:28px;
}
.cursor{margin-left:4px;color:var(--verde);animation:blink 1s infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* BOTÓN HERO */
.hero-btn{
  margin-top:22px;
  display:inline-block;
  padding:14px 36px;
  border-radius:40px;
  background:linear-gradient(135deg,var(--verde-oscuro),var(--verde));
  color:#081508;
  font-weight:700;
  letter-spacing:1px;
  text-decoration:none;
  box-shadow:0 0 25px rgba(111,168,79,.7);
  transition:.3s;
}

.hero-animado{
  display:inline-flex;
  align-items:center;
  gap:12px;
  position:relative;
  overflow:hidden;
  animation:heroPulse 2.8s ease-in-out infinite;
}

.hero-animado span{z-index:2;position:relative}
.hero-animado .icono-entrar{font-style:normal;font-size:20px;transition:.3s;z-index:2;position:relative}

.hero-animado::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-60%;
  width:40%;
  height:200%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:rotate(25deg);
  animation:heroShine 3.5s infinite;
}

.hero-animado:hover{transform:scale(1.1)}
.hero-animado:hover .icono-entrar{transform:translateX(6px)}

@keyframes heroPulse{
  0%{box-shadow:0 0 18px rgba(111,168,79,.4)}
  50%{box-shadow:0 0 35px rgba(111,168,79,.9)}
  100%{box-shadow:0 0 18px rgba(111,168,79,.4)}
}
@keyframes heroShine{0%{left:-60%}60%{left:120%}100%{left:120%}}

section{padding:50px 20px}

/* ANUNCIOS */
.anuncios-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;max-width:1200px;margin:auto}
.banner{
  background:linear-gradient(145deg,#121212,#0a0a0a);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 0 25px rgba(0,0,0,.7);
  border:1px solid var(--borde);
  animation:bannerIn .9s ease forwards,floatBanner 6s ease-in-out infinite;
  transition:.3s;
}
.banner img{width:100%;aspect-ratio:1080/1350;object-fit:cover;display:block}
.banner:hover{transform:scale(1.05);box-shadow:0 0 40px rgba(111,168,79,.7);animation-play-state:paused}

/* CATÁLOGO */
.catalogo{max-width:900px;margin:auto}
.catalogo table{margin-top:4px}
table{width:100%;border-collapse:collapse;background:linear-gradient(145deg,#141414,#0c0c0c);border-radius:18px;overflow:hidden;box-shadow:0 0 35px rgba(0,0,0,.7)}

th{
  background:linear-gradient(135deg,#0f2a0f,var(--verde-oscuro),#1f5f1f);
  color:#eaffea;
  padding:16px;
  font-size:14px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  border-bottom:1px solid rgba(111,168,79,.4);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.6);
}

td{padding:14px;text-align:center;border-bottom:1px solid #1f1f1f;color:#ddd;transition:.25s}
tr:hover{background:linear-gradient(90deg,rgba(111,168,79,.12),rgba(0,0,0,0));box-shadow:inset 0 0 20px rgba(111,168,79,.25);transform:scale(1.01)}
tr:hover td{color:#eaffea;text-shadow:0 0 8px rgba(111,168,79,.6)}

/* MARCAS */
.marca-header{
  position:sticky;
  top:68px;
  z-index:5;
  margin:8px 0 0;
  padding:18px 10px;
  text-align:center;
  font-size:28px;
  font-weight:900;
  letter-spacing:5px;
  color:#eaffea;
  text-transform:uppercase;
  background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.95)),linear-gradient(90deg,transparent,var(--verde),transparent);
  border-top:1px solid rgba(111,168,79,.6);
  border-bottom:1px solid rgba(111,168,79,.6);
  box-shadow:0 8px 22px rgba(0,0,0,.85),inset 0 0 20px rgba(111,168,79,.25);
  backdrop-filter:blur(6px);
}

/* PRECIO OFERTA */
.precio-oferta{color:#ffdf8a;font-weight:700;text-shadow:0 0 10px rgba(255,140,0,.6)}
.fuego{margin-left:6px;display:inline-block;animation:fuego 1s infinite alternate}
@keyframes fuego{
  from{transform:scale(1) rotate(-5deg);filter:drop-shadow(0 0 5px orange)}
  to{transform:scale(1.3) rotate(5deg);filter:drop-shadow(0 0 15px red)}
}

/* ÚLTIMA ACTUALIZACIÓN */
.ultima-actualizacion{
  max-width:900px;
  margin:0 auto 4px;
  padding:14px 22px;
  text-align:center;
  font-size:18px;
  font-weight:600;
  letter-spacing:2px;
  color:#eaffea;
  background:linear-gradient(135deg,#0a0a0a,#111);
  border:1px solid rgba(111,168,79,.55);
  border-radius:16px;
  box-shadow:0 0 18px rgba(111,168,79,.35),inset 0 0 20px rgba(0,0,0,.8);
  text-shadow:0 0 10px rgba(111,168,79,.6);
  animation:ultimaGlow 3s ease-in-out infinite;
}

@keyframes ultimaGlow{
  0%{box-shadow:0 0 12px rgba(111,168,79,.25),inset 0 0 20px rgba(0,0,0,.8);transform:scale(1)}
  50%{box-shadow:0 0 28px rgba(111,168,79,.65),inset 0 0 20px rgba(0,0,0,.8);transform:scale(1.02)}
  100%{box-shadow:0 0 12px rgba(111,168,79,.25),inset 0 0 20px rgba(0,0,0,.8);transform:scale(1)}
}

/* WHATSAPP */
.btn-whatsapp{position:fixed;right:22px;bottom:22px;z-index:9999;text-decoration:none}
.btn-whatsapp img{width:48px;height:auto;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.6));transition:.3s}
.btn-whatsapp img:hover{transform:scale(1.12);filter:drop-shadow(0 10px 20px rgba(37,211,102,.7))}

/* FOOTER */
.footer{background:#040404;border-top:1px solid #1a1a1a;padding:35px 20px 20px;margin-top:60px}
.footer-grid{max-width:1100px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center}
.footer-box h4{color:var(--verde);margin-bottom:8px}
.footer-box p{font-size:14px;color:#bfbfbf;line-height:1.6;margin:0}
.testimonio-mini{display:flex;align-items:center;gap:14px}
.testimonio-mini img{width:55px;height:55px;border-radius:50%;object-fit:cover;border:2px solid var(--verde)}
.testimonio-mini span{font-size:12px;color:var(--verde)}
.footer-copy{text-align:center;margin-top:20px;padding-top:12px;border-top:1px solid #1a1a1a;font-size:13px;color:#777}

/* RESPONSIVE */
@media(max-width:768px){
  table th{font-size:12px;padding:12px 6px;letter-spacing:1px}
  table td{font-size:13px;padding:10px 6px}
  .marca-header{font-size:22px;letter-spacing:3px;padding:14px 8px}
  .ultima-actualizacion{font-size:15px;padding:10px 14px;letter-spacing:1px}
  .hero-logo{width:170px}
}
@media(max-width:480px){
  table th{font-size:11px}
  table td{font-size:12px}
  .marca-header{font-size:20px}
  .ultima-actualizacion{font-size:14px}
  .hero-logo{width:150px}
}

/* ANIMACIONES */
@keyframes bannerIn{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes floatBanner{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes marcasPulse{0%{box-shadow:0 0 14px rgba(111,168,79,.4)}50%{box-shadow:0 0 30px rgba(111,168,79,.9)}100%{box-shadow:0 0 14px rgba(111,168,79,.4)}}
@keyframes marcasShine{0%{left:-70%}60%{left:120%}100%{left:120%}}

/* giro del icono */
.menu-btn-pro .icon-menu{
  transition:.4s ease;
}

.menu-btn-pro.btn-open .icon-menu{
  transform:rotate(180deg);
}

/* MARCA EN MENU */
.menu-brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.menu-title{
  font-size:14px;
  font-weight:800;
  letter-spacing:2px;
  color:#eaffea;
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(111,168,79,.6);
  white-space:nowrap;
}

/* ===== ACCIONES MENU ===== */

.menu-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* BOTÓN ADMIN SOLO ICONO */

.menu-admin{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(111,168,79,.5);
  background:linear-gradient(145deg,#0c0c0c,#050505);
  color:#6fa84f;
  font-size:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  box-shadow:0 0 15px rgba(111,168,79,.4);
  transition:.3s;
}

.menu-admin:hover{
  transform:scale(1.15) rotate(8deg);
  box-shadow:0 0 28px rgba(111,168,79,.9);
}


/* ===== LOGIN MODAL ===== */

.login-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20000;
  opacity:0;
  pointer-events:none;
  transition:.4s;
}

.login-modal.login-open{
  opacity:1;
  pointer-events:auto;
}

.login-box{
  width:100%;
  max-width:380px;
  background:linear-gradient(145deg,#0d0d0d,#050505);
  border:1px solid rgba(111,168,79,.5);
  border-radius:20px;
  padding:30px 24px;
  text-align:center;
  box-shadow:0 0 40px rgba(0,0,0,.9);
  transform:scale(.85);
  transition:.4s;
}

.login-open .login-box{
  transform:scale(1);
}

.login-box h3{
  margin-bottom:20px;
  color:#eaffea;
  letter-spacing:2px;
}

.login-box input{
  width:100%;
  padding:12px 14px;
  margin-bottom:12px;
  border-radius:12px;
  border:1px solid #1f1f1f;
  background:#0b0b0b;
  color:white;
  outline:none;
}

.login-box button{
  width:100%;
  padding:12px;
  margin-top:8px;
  border:none;
  border-radius:30px;
  background:linear-gradient(135deg,var(--verde-oscuro),var(--verde));
  font-weight:700;
  cursor:pointer;
  box-shadow:0 0 18px rgba(111,168,79,.7);
}

.login-close{
  position:absolute;
  top:16px;
  right:20px;
  font-size:20px;
  cursor:pointer;
  color:#aaa;
}
.login-close:hover{color:white}

/* =====================================
 FIX DEFINITIVO HEADER MENU FLOTANTE
===================================== */

.menu-floating-header,
.menu-floating .brand-box{
width:100%;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:6px 8px;
overflow:hidden;
}

/* LOGO */
.menu-floating-header img,
.menu-floating .brand-box img{
max-width:36px;
width:auto;
height:auto;
object-fit:contain;
flex-shrink:0;
filter:drop-shadow(0 0 6px rgba(0,0,0,.6));
}

/* TEXTO */
.menu-floating-header h2,
.menu-floating .brand-title{
font-size:clamp(13px, 4vw, 18px);
line-height:1.1;
margin:0;
padding:0;
white-space:normal;
word-break:break-word;
text-align:center;
max-width:150px;
}

/* evita que estire el menú */
.menu-floating-header *{
max-width:100%;
}

/* celulares pequeños */
@media(max-width:480px){

.menu-floating-header,
.menu-floating .brand-box{
  flex-direction:row;
  gap:6px;
  padding:4px 6px;
}

.menu-floating-header img,
.menu-floating .brand-box img{
  max-width:28px;
}

.menu-floating-header h2,
.menu-floating .brand-title{
  font-size:13px;
  max-width:120px;
}
}
/* =====================================
 FIX DEFINITIVO TITULO MENU FLOTANTE
===================================== */

.menu-floating-header{
width:100%;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:6px 8px;
overflow:hidden;
}

/* LOGO */
.menu-floating-header img{
width:auto;
max-width:34px;
min-width:24px;
height:auto;
object-fit:contain;
flex-shrink:0;
}

/* TITULO */
.menu-title{
font-weight:700;
letter-spacing:1.5px;
text-align:center;
line-height:1.1;
white-space:normal;
word-break:break-word;
overflow:hidden;

/* 🔥 esto lo hace 100% responsive */
font-size:clamp(12px, 4vw, 18px);

max-width:140px;
display:block;
}

/* celulares pequeños */
@media(max-width:480px){
.menu-title{
  font-size:12px;
  max-width:110px;
}

.menu-floating-header img{
  max-width:26px;
}
}

/* =====================================
   FORZAR MENU FLOTANTE SIEMPRE VISIBLE
===================================== */

.menu-floating{
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* por si usabas clases para esconderlo */
.menu-floating.hide,
.menu-floating.hidden,
.menu-floating.off,
.menu-floating.scroll-hide{
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  display: block !important;
}

/* =====================================
   BLOQUEAR ICONO WHATSAPP (NO SE MUEVE)
===================================== */

.whatsapp-float{
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}