body{margin:0;background:#0d0d0d;color:#fff;font-family:Barlow,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#e5b80b;text-decoration:none}
a:hover{color:#f5d465}
::selection{background:#e5b80b;color:#0d0d0d}
input,select,textarea,button{font-family:Barlow,system-ui,sans-serif}
@keyframes jmbSpin{to{transform:rotate(360deg)}}

/* Estados hover / focus (reemplazan style-hover / style-focus del formato dc) */
.g-btn{transition:background .15s ease}
.g-btn:hover{background:linear-gradient(180deg,#ffdf63,#e5b80b)!important}

.o-btn{transition:border-color .15s ease,color .15s ease,background .15s ease}
.o-btn:hover{border-color:#e5b80b!important;color:#e5b80b!important}

.o-btn-solid:hover{border-color:#e5b80b!important;background:#1b1809!important}

.nav-btn{transition:color .15s ease}
.nav-btn:hover{color:#ffffff!important}

.foot-btn{transition:color .15s ease}
.foot-btn:hover{color:#e5b80b!important}

.link-btn{transition:color .15s ease}
.link-btn:hover{color:#ffdf63!important}

.plan-card{transition:border-color .15s ease}
.plan-card:hover{border-color:#e5b80b!important}

.value-card{transition:border-color .15s ease,border-left-color .15s ease}
.value-card:hover{border-color:#4d3f14!important;border-left-color:#ffdf63!important}

.service-cell{transition:background .15s ease}
.service-cell:hover{background:#161511!important}

.product-card{transition:border-color .15s ease}
.product-card:hover{border-color:#4d3f14!important}

.chip{transition:border-color .15s ease}
.chip:hover{border-color:#e5b80b!important}

/* Marcas: cuadrados iguales */
.brand-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:900px){.brand-grid{grid-template-columns:repeat(2,1fr)}}
.brand-cell{aspect-ratio:1/1;border:1px solid #2a2a2a;background:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.brand-cell:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.7)}
.brand-cell img{max-width:100%;max-height:100%;object-fit:contain}
.brand-cell.no-logo{background:#151515;border-color:#262626}
.brand-cell.no-logo::after{content:attr(data-name);font:600 12px/1.3 Barlow,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7a7a7a;text-align:center}

/* Botón flotante de WhatsApp */
.wa-btn{position:fixed;right:24px;bottom:24px;z-index:60;width:60px;height:60px;border-radius:50%;background:#25d366;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -6px rgba(0,0,0,.5),0 0 0 0 rgba(37,211,102,.6);transition:transform .15s ease,box-shadow .2s ease;animation:waPulse 2.4s infinite}
.wa-btn:hover{transform:scale(1.06)}
.wa-btn svg{width:34px;height:34px;display:block}
@keyframes waPulse{0%{box-shadow:0 8px 24px -6px rgba(0,0,0,.5),0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 8px 24px -6px rgba(0,0,0,.5),0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 8px 24px -6px rgba(0,0,0,.5),0 0 0 0 rgba(37,211,102,0)}}

input:focus,textarea:focus{border-color:#e5b80b!important;outline:none}

@media(max-width:900px){
  .grid-collapse{grid-template-columns:1fr!important}
}

/* ---------- Menú responsive ---------- */
.nav-toggle{display:none;flex:none;width:48px;height:48px;align-items:center;justify-content:center;background:#141414;border:1px solid #2f2f2f;border-radius:3px;cursor:pointer;color:#e5b80b;margin-left:auto;transition:border-color .15s ease}
.nav-toggle:hover{border-color:#e5b80b}
.nav-toggle svg{width:24px;height:24px;display:block}
.mobile-nav{display:none}
.mobile-nav .nav-btn{transition:background .15s ease,color .15s ease}

@media(max-width:960px){
  .desktop-nav{display:none!important}
  .desktop-cta{display:none!important}
  .nav-toggle{display:flex!important}
  .mobile-nav.open{display:flex!important}
}

/* Tarjetas de propuesta de valor (home) apiladas en móvil */
@media(max-width:900px){
  .vprop{border-right:none!important;border-bottom:1px solid #1f1f1f;padding:32px 0!important}
  .vprop:last-child{border-bottom:none}
}

/* Formulario de contacto en una columna en pantallas chicas */
@media(max-width:640px){
  .contact-form{grid-template-columns:1fr!important;padding:28px 22px!important}
}

/* Márgenes laterales más ajustados en teléfonos */
@media(max-width:520px){
  .wa-btn{right:16px;bottom:16px;width:54px;height:54px}
  .wa-btn svg{width:30px;height:30px}
}

/* Foto del generador (hero): en móvil se muestra completa respetando su proporción 16:9 */
@media(max-width:900px){
  .hero-photo{height:auto!important;aspect-ratio:16/9}
}