/* ============================================================
   Texas Ribs — header/footer embebibles para landings externas (WP/Elementor)
   Hosteado por el bridge TR: https://www.texasribs.com.mx/static/css/tr-embed.css
   Todo va namespaced bajo .tr-embed para NO chocar con el tema/Elementor.
   Identidad: Manual de identidad TR (azul #002855, rojo #d52b1e, Arvo/Montserrat)
   v1 — 2026-08-21 (ticket Mesa #18)
   ============================================================ */

.tr-embed, .tr-embed * { box-sizing: border-box; }
.tr-embed { font-family: 'Montserrat', Arial, sans-serif; line-height: 1.4; }
.tr-embed a { text-decoration: none; }
.tr-embed ul { list-style: none; margin: 0; padding: 0; }

/* ---------- HEADER ---------- */
.tr-embed.tr-header {
  position: sticky; top: 0; z-index: 1050;
  background: #fff;
  border-bottom: 2px solid #002855;
  box-shadow: 0 2px 0 rgba(0,40,85,.12);
}
.tr-embed .tr-nav {
  max-width: 1320px; margin: 0 auto; padding: .9rem 1rem;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: .5rem;
}
.tr-embed .tr-brand { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; }
.tr-embed .tr-logo { height: 64px; width: auto; max-width: 100%; display: block; }
.tr-embed .tr-links { display: none; }
.tr-embed .tr-links a {
  color: #002855; font-weight: 700; margin: 0 1rem; font-size: 1rem; letter-spacing: .01em;
}
.tr-embed .tr-links a:hover { color: #d52b1e; }
.tr-embed .tr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #002855; color: #fff !important;
  font-family: 'Arvo', Georgia, serif; font-weight: 700;
  padding: .5rem 2rem; white-space: nowrap; border: 0; border-radius: 0;
}
.tr-embed .tr-btn:hover { background: #d52b1e; color: #fff; }
.tr-embed .tr-btn-mobile { grid-column: 3; justify-self: end; padding: .45rem .85rem; font-size: .85rem; min-height: 38px; }
.tr-embed .tr-btn-desktop { display: none; }

/* hamburguesa (solo CSS, sin JS) */
.tr-embed .tr-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.tr-embed .tr-toggle {
  grid-column: 1; justify-self: start; cursor: pointer;
  width: 40px; height: 38px; display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 6px;
}
.tr-embed .tr-toggle span { display: block; height: 3px; background: #002855; border-radius: 2px; }
.tr-embed .tr-mobile-menu {
  display: none; border-top: 1px solid rgba(0,40,85,.15); background: #fff; padding: .75rem 1rem 1rem;
}
.tr-embed .tr-mobile-menu a { display: block; color: #002855; font-weight: 700; padding: .5rem 0; }
.tr-embed .tr-mobile-menu .tr-btn { width: 100%; margin-top: .75rem; }
.tr-embed .tr-toggle-input:checked ~ .tr-mobile-menu { display: block; }

@media (min-width: 992px) {
  .tr-embed .tr-nav { grid-template-columns: auto 1fr auto; }
  .tr-embed .tr-brand { grid-column: 1; justify-self: start; }
  .tr-embed .tr-links { grid-column: 2; display: flex; justify-content: center; align-items: center; }
  .tr-embed .tr-btn-desktop { grid-column: 3; display: inline-flex; }
  .tr-embed .tr-toggle, .tr-embed .tr-btn-mobile, .tr-embed .tr-mobile-menu { display: none !important; }
}

/* ---------- FOOTER ---------- */
.tr-embed.tr-footer { background: #042652; color: #fff; padding: 40px 0; }
.tr-embed .tr-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.tr-embed .tr-footer-grid {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 60px; padding: 40px 0; align-items: start;
}
.tr-embed .tr-footer h4 { font-size: 1.25rem; font-weight: 700; margin: 0 0 20px; color: #fff; font-family: 'Montserrat', Arial, sans-serif; }
.tr-embed .tr-footer-col { display: flex; flex-direction: column; gap: 12px; }
.tr-embed .tr-footer a { color: #fff; transition: color .3s; }
.tr-embed .tr-footer a:hover { color: #d32f2f; }
.tr-embed .tr-footer-logo { text-align: right; margin-left: auto; }
.tr-embed .tr-footer-logo img { height: 128px; width: auto; object-fit: contain; max-width: 100%; }
@media (max-width: 768px) {
  .tr-embed .tr-footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 20px 0; }
  .tr-embed .tr-footer-logo { text-align: left; margin-left: 0; }
  .tr-embed .tr-footer-logo img { height: 96px; }
}