:root{--button-primary:#5f800d;--button-primary-hover:#4d6a0a}/* Verde de la palma del logo (#78a011) oscurecido para que el texto blanco cumpla contraste AA (4.6:1). Para volver al dorado: --button-primary:var(--brand-gold), hover #e7b851 y color de texto var(--brand-charcoal). *//* Componente de botón. Se carga al final en todas las páginas.
   :not(#_) sube la especificidad para que ninguna regla antigua de .nav-contact,
   .float-wa, etc. cambie fuente, tamaño o color del botón.
   Uso: class="button button--primary" · --outline · --link · --sm · --block · --light (sobre fondo oscuro) */
.button:not(#_){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 24px;border:1px solid transparent;border-radius:4px;font-family:inherit;font-size:15px;font-weight:600;line-height:20px;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;transition:background-color .18s,color .18s,border-color .18s,opacity .18s}
.button:not(#_) .hgi-stroke{font-size:18px;line-height:1;vertical-align:0;margin:0;transition:transform .18s}
/* La flecha queda oculta y entra al pasar el mouse o con foco de teclado. */.button:not(#_) .hgi-arrow-right-01{display:inline-block;max-width:0;margin-left:-8px;opacity:0;overflow:hidden;transform:translateX(-6px);transition:max-width .22s ease,margin-left .22s ease,opacity .18s ease,transform .22s ease}.button:not(#_):hover .hgi-arrow-right-01,.button:not(#_):focus-visible .hgi-arrow-right-01{max-width:18px;margin-left:0;opacity:1;transform:none}
.button:not(#_):focus-visible{outline:2px solid var(--brand-green);outline-offset:3px}
.button[hidden]:not(#_){display:none}
.button--primary:not(#_){background:var(--button-primary);border-color:var(--button-primary);color:#fff}
.button--primary:not(#_):hover{background:var(--button-primary-hover);border-color:var(--button-primary-hover);color:#fff}
.button--outline:not(#_){background:transparent;border-color:currentColor;color:inherit}
.button--outline:not(#_):hover{background:var(--brand-charcoal);border-color:var(--brand-charcoal);color:#fff}
.button--link:not(#_){min-height:0;padding:2px 0;border:0;background:transparent;color:inherit;font-weight:500;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .18s}/* La línea aparece al pasar el mouse sobre el enlace, o sobre la card que lo contiene. */.button--link:not(#_):hover,.button--link:not(#_):focus-visible,a:hover .button--link:not(#_){text-decoration-color:currentColor}.button--link:not(#_) .hgi-stroke{text-decoration:none}.button--light.button--outline:not(#_){border-color:rgba(255,255,255,.7);color:#fff}.button--light.button--outline:not(#_):hover{background:#fff;border-color:#fff;color:var(--brand-charcoal)}
.button--sm:not(#_){min-height:40px;padding:10px 16px;font-size:14px}
.button--sm:not(#_) .hgi-stroke{font-size:16px}
.button--block:not(#_){display:flex;width:100%}
@media(max-width:650px){.nav-contact.button:not(#_){min-height:40px;padding:9px 14px;font-size:14px}.nav-contact.button:not(#_) .hgi-stroke{font-size:16px}.button--block:not(#_),.order-btn.button:not(#_){white-space:normal}}

/* CTA del nav: en móvil vive dentro del menú desplegable. */
.site-header .links .nav-menu-cta:not(#_){display:none}
@media(max-width:650px){.site-header .nav-contact:not(#_){display:none}.site-header .menu{margin-left:auto}.site-header .links a.nav-menu-cta:not(#_){display:inline-flex;margin-top:16px;opacity:1}}