/* =====================================================
   LOBOZOLDYCK - FIX INDEPENDIENTE CONTACTO + FOOTER
   Cargar DESPUES de styles.css y pixaweb-pages-unified.css
   No toca home, carrito, catalogo ni carrusel.
===================================================== */

:root{
  --lobo-green: var(--green, #93ff16);
  --lobo-purple: var(--purple, #9d35ff);
  --lobo-bg: #120b18;
  --lobo-card: rgba(18, 12, 25, .94);
  --lobo-line: rgba(157, 53, 255, .34);
  --lobo-text: #fff;
  --lobo-muted: #d9d0e6;
}

/* =========================
   CONTACTO RESTAURADO
========================= */
.contact-page{
  position: relative !important;
  min-height: 70vh !important;
  color: var(--lobo-text) !important;
  background:
    radial-gradient(circle at 8% 4%, rgba(157,53,255,.18), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(147,255,22,.10), transparent 26%),
    linear-gradient(180deg, #21102f 0%, #2f1744 48%, #20102e 100%) !important;
}

.contact-hero{
  padding: 62px 0 34px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.contact-page .container{
  width: min(1180px, calc(100% - 36px)) !important;
  margin: 0 auto !important;
}

.contact-page-head{
  max-width: 920px !important;
  padding: 30px 34px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(18, 12, 25, .68) !important;
  border: 1px solid rgba(157,53,255,.28) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.22) !important;
}

.contact-page-head .eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--lobo-green) !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  font-family: Orbitron, sans-serif !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  margin-bottom: 16px !important;
}

.contact-page-head .eyebrow::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lobo-green);
  box-shadow: 0 0 12px rgba(147,255,22,.4);
}

.contact-page-head h1{
  color: #fff !important;
  font-family: Orbitron, sans-serif !important;
  font-size: clamp(34px, 5vw, 64px) !important;
  line-height: 1.04 !important;
  margin: 0 0 18px !important;
  text-shadow: 0 0 20px rgba(157,53,255,.16) !important;
}

.contact-page-head p{
  max-width: 820px !important;
  color: var(--lobo-muted) !important;
  font-size: 20px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.contact-section{
  padding: 42px 0 84px !important;
}

.contact-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

.contact-card{
  background:
    radial-gradient(circle at 12% 0%, rgba(157,53,255,.13), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(13, 9, 18, .95) !important;
  border: 1px solid rgba(157,53,255,.38) !important;
  border-radius: 30px !important;
  padding: 30px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow: hidden !important;
}

.contact-card h2{
  font-family: Orbitron, sans-serif !important;
  color: #fff !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.05 !important;
  margin: 0 0 16px !important;
}

.contact-card p{
  color: var(--lobo-muted) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  font-size: 18px !important;
}

.contact-info-list{
  display: grid !important;
  gap: 16px !important;
  margin: 28px 0 !important;
}

.contact-info-item{
  display: grid !important;
  grid-template-columns: 54px 1fr !important;
  gap: 16px !important;
  align-items: start !important;
  padding: 18px !important;
  border: 1px solid rgba(147,255,22,.18) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(147,255,22,.055), rgba(157,53,255,.055)) !important;
}

.contact-info-item strong{
  display: block !important;
  color: #fff !important;
  font-size: 17px !important;
  margin-bottom: 6px !important;
}

.contact-icon{
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 0 22px rgba(147,255,22,.22), 0 0 28px rgba(157,53,255,.18) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

.contact-icon svg{
  width: 24px !important;
  height: 24px !important;
  fill: #050506 !important;
}

.contact-icon-chat{background: linear-gradient(135deg, var(--lobo-green), #34e4ff) !important;}
.contact-icon-box{background: linear-gradient(135deg, var(--lobo-purple), var(--lobo-green)) !important;}
.contact-icon-star{background: linear-gradient(135deg, #ffcf33, var(--lobo-purple)) !important;}

.contact-social-box{
  margin-top: 14px !important;
  padding: 22px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(157,53,255,.18), rgba(147,255,22,.06)) !important;
  border: 1px solid rgba(157,53,255,.34) !important;
}

.contact-social-box h3{
  color: var(--lobo-green) !important;
  font-size: 22px !important;
  margin: 0 0 12px !important;
  font-family: Orbitron, sans-serif !important;
}

.contact-social-box p{
  margin: 8px 0 !important;
  color: #eee !important;
}

.contact-form{
  display: grid !important;
  gap: 16px !important;
}

.form-group{
  display: grid !important;
  gap: 8px !important;
}

.form-group label{
  font-weight: 900 !important;
  color: #fff !important;
  font-size: 17px !important;
}

.form-group input,
.form-group textarea{
  width: 100% !important;
  border-radius: 17px !important;
  border: 1px solid rgba(157,53,255,.42) !important;
  background: rgba(0,0,0,.42) !important;
  color: #fff !important;
  padding: 15px 17px !important;
  font-family: Rajdhani, sans-serif !important;
  font-size: 18px !important;
  outline: none !important;
}

.form-group textarea{
  resize: vertical !important;
  min-height: 150px !important;
}

.form-group input:focus,
.form-group textarea:focus{
  border-color: var(--lobo-green) !important;
  box-shadow: 0 0 0 4px rgba(147,255,22,.10) !important;
}

.alert-success,
.alert-error{
  padding: 14px 16px !important;
  border-radius: 16px !important;
  margin: 0 0 18px !important;
  font-weight: 900 !important;
}

.alert-success{
  background: rgba(147,255,22,.12) !important;
  color: var(--lobo-green) !important;
  border: 1px solid rgba(147,255,22,.30) !important;
}

.alert-error{
  background: rgba(255,60,80,.13) !important;
  color: #ff9aaa !important;
  border: 1px solid rgba(255,60,80,.35) !important;
}

.contact-form .btn-neon,
.lobo-whatsapp-btn{
  width: 100% !important;
  border: 0 !important;
  cursor: pointer !important;
  font-size: 17px !important;
}

.lobo-whatsapp-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  margin-top: 16px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, #25d366, var(--lobo-green)) !important;
  color: #050505 !important;
  box-shadow: 0 0 24px rgba(37,211,102,.24) !important;
}

.lobo-whatsapp-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 0 30px rgba(37,211,102,.34) !important;
}

/* =========================
   FOOTER RESTAURADO
========================= */
.site-footer.footer-premium,
.site-footer{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  margin-top: 70px !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 16% 28%, rgba(147,255,22,.10), transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(157,53,255,.22), transparent 28%),
    linear-gradient(135deg, #1a0f23 0%, #422a54 48%, #1b1024 100%) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 -16px 42px rgba(0,0,0,.26) !important;
}

.site-footer::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:8% !important;
  right:8% !important;
  height:4px !important;
  border-radius:0 0 999px 999px !important;
  background:linear-gradient(90deg, transparent, var(--lobo-green), rgba(157,53,255,.85), rgba(255,255,255,.55), rgba(157,53,255,.85), var(--lobo-green), transparent) !important;
  box-shadow:0 0 22px rgba(147,255,22,.20), 0 0 34px rgba(157,53,255,.18) !important;
  z-index:2 !important;
}

.footer-bg-layer{
  position:absolute !important;
  inset:0 !important;
  z-index:-2 !important;
  pointer-events:none !important;
  background:url('../img/ui/footer-bg.webp') center/cover no-repeat !important;
  opacity:.16 !important;
  filter:saturate(.9) contrast(.95) blur(.2px) !important;
  transform:scale(1.04) !important;
}

.site-footer::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg, rgba(10,5,15,.88), rgba(30,16,42,.68), rgba(10,5,15,.90)),
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 18px) !important;
}

.footer-shell,
.footer-grid{
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: 1.15fr .75fr .95fr 1fr !important;
  gap: 22px !important;
  padding: 58px 0 42px !important;
  align-items: stretch !important;
}

.footer-card,
.footer-grid > div{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  padding: 26px 24px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 45%, rgba(0,0,0,.06)), rgba(60,38,76,.48) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 34px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(6px) !important;
}

.footer-brand-col{
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

.footer-logo{
  width:112px !important;
  height:112px !important;
  object-fit:cover !important;
  border-radius:26px !important;
  margin:0 auto 18px !important;
  display:block !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 26px rgba(147,255,22,.18), 0 14px 30px rgba(0,0,0,.26) !important;
}

.footer-card h4,
.site-footer h4{
  margin:0 0 14px !important;
  padding-bottom:10px !important;
  color:#fff !important;
  font-family:Orbitron, sans-serif !important;
  font-size:15px !important;
  letter-spacing:.4px !important;
  position:relative !important;
}

.footer-card h4::after,
.site-footer h4::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  width:52px !important;
  height:3px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, var(--lobo-green), rgba(157,53,255,.9)) !important;
}

.footer-brand-col h4::after{left:50% !important; transform:translateX(-50%) !important;}

.site-footer p,
.site-footer a,
.footer-card p,
.footer-card a{
  color:rgba(255,255,255,.82) !important;
  font-size:16px !important;
  line-height:1.62 !important;
  text-decoration:none !important;
}

.footer-links a{
  display:block !important;
  margin:8px 0 !important;
  font-weight:800 !important;
}

.footer-links a:hover,
.footer-legal-links a:hover,
.site-footer a:hover{
  color:var(--lobo-green) !important;
}

.footer-legal-links{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:16px !important;
}

.footer-legal-links a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:10px 12px !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  text-align:center !important;
  font-weight:900 !important;
}

.footer-contact-list{
  display:grid !important;
  gap:8px !important;
}

.footer-contact-list p{
  margin:0 0 8px !important;
}

.footer-contact-list strong{
  color:#fff !important;
}

.footer-whatsapp-btn{
  width:100% !important;
  margin-top:14px !important;
}

.footer-bottom{
  position:relative !important;
  z-index:3 !important;
  margin-top:0 !important;
  padding:20px 14px 24px !important;
  text-align:center !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  background:linear-gradient(90deg, rgba(0,0,0,.16), rgba(255,255,255,.03), rgba(0,0,0,.16)) !important;
  color:rgba(255,255,255,.72) !important;
}

.footer-bottom a{
  display:inline !important;
  color:var(--lobo-green) !important;
  font-weight:900 !important;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:1050px){
  .footer-shell,
  .footer-grid{
    grid-template-columns:1fr 1fr !important;
  }
}

@media(max-width:900px){
  .contact-grid{
    grid-template-columns:1fr !important;
  }
  .contact-hero{
    padding:42px 0 24px !important;
  }
  .contact-page-head{
    padding:24px 22px !important;
  }
  .contact-card{
    padding:24px !important;
  }
}

@media(max-width:640px){
  .contact-page .container{
    width:min(100%, calc(100% - 22px)) !important;
  }
  .contact-page-head h1{
    font-size:clamp(30px, 9vw, 42px) !important;
  }
  .contact-page-head p{
    font-size:17px !important;
  }
  .contact-section{
    padding:26px 0 60px !important;
  }
  .contact-info-item{
    grid-template-columns:48px 1fr !important;
    padding:16px !important;
  }
  .contact-icon{
    width:44px !important;
    height:44px !important;
  }
  .footer-shell,
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
    padding:42px 0 30px !important;
  }
  .footer-card,
  .footer-grid > div{
    padding:22px !important;
  }
  .footer-brand-col,
  .footer-card,
  .site-footer h4,
  .site-footer p{
    text-align:center !important;
  }
  .footer-card h4::after,
  .site-footer h4::after{
    left:50% !important;
    transform:translateX(-50%) !important;
  }
  .footer-links a{
    text-align:center !important;
  }
  .footer-legal-links{
    grid-template-columns:1fr !important;
  }
}