:root{
  --bg-dark: #0b1220;
  --card: #111a2e;
  --soft: rgba(255,255,255,.08);
}

* { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.brand-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: #ffc107; display: inline-block;
}

.hero{
  background: radial-gradient(1200px 600px at 20% 20%, rgba(255,193,7,.25), transparent 60%),
              radial-gradient(1000px 500px at 80% 10%, rgba(13,110,253,.22), transparent 55%),
              linear-gradient(180deg, #0b1220, #070b14);
}

.card-glass{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  backdrop-filter: blur(10px);
}

.icon-circle{
  width: 42px; height: 42px; border-radius: 14px;
  background: rgba(255,193,7,.14);
  display:flex; align-items:center; justify-content:center;
  color: #ffc107;
  font-size: 20px;
}

.chip{
  display:inline-flex; align-items:center;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.10);
}
.chip:hover{ background: rgba(255,255,255,.12); }

.product-card{
  border-radius: 18px;
  overflow:hidden;
}

.product-img-wrap{
  position: relative;
  background: #f6f7fb;
  border-bottom: 1px solid #eee;
  padding: 18px;
}
.product-img{
  width: 100%;
  height: 210px;
  object-fit: contain;
}

.badge-float{
  position:absolute;
  top: 12px; left: 12px;
}

.price{
  font-weight: 800;
  font-size: 1.1rem;
}

.price-lg{
  font-weight: 900;
  font-size: 1.6rem;
}

.footer-link{
  color: rgba(255,255,255,.65);
  text-decoration:none;
}
.footer-link:hover{ color: white; }

.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 54px; height: 54px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: #25D366;
  color: white;
  text-decoration:none;
  font-size: 26px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.banner-wrap{ position: relative; }
.banner-img{ height: 360px; object-fit: cover; }
.banner-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.10));
  display:flex; align-items:center;
}
.banner-content{ padding: 28px; max-width: 720px; }
@media (max-width: 768px){
  .banner-img{ height: 260px; }
}
/* Logo del header: se adapta sin deformarse */
.brand-logo{
  height: 28px;        /* ajusta a tu gusto: 24-34px suele verse bien */
  width: auto;         /* mantiene proporción */
  max-width: 220px;    /* evita que un logo muy largo rompa el navbar */
  object-fit: contain; /* asegura que no se deforme */
  display: block;
}
.navbar-brand .brand-logo{
  height: 30px !important;   /* tamaño visible en header */
  width: auto !important;    /* mantiene proporción */
  max-width: 220px;          /* evita que invada el menú */
  object-fit: contain;       /* no se deforma */
}

/* Opcional: si querés ocultar el texto en pantallas pequeñas */
@media (max-width: 576px){
  .brand-text{ display:none; }
}
/* Tamaño normal (PC) */
.navbar-brand .brand-logo{
  height: 30px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

/* Tablets */
@media (max-width: 992px){
  .navbar-brand .brand-logo{
    height: 26px;
    max-width: 250px;
  }
}

/* Teléfonos */
@media (max-width: 576px){
  .navbar-brand .brand-logo{
    height: 22px;
    max-width: 250px;
  }
}

/* Logo en footer (más grande que el header) */
.footer-logo{
  height: 42px;        /* más grande */
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

/* Teléfonos */
@media (max-width: 576px){
  .footer-logo{
    height: 34px;
    max-width: 180px;
  }
}