/* ==========================================================
   TPG — Fase 1: Header / Footer / WhatsApp (global)
   Todos los selectores usan prefijo .tpg-* para no afectar
   el diseñador ni otras páginas.
   ========================================================== */
:root{
  --tpg-navy:#0b3d78;
  --tpg-navy-900:#072a54;
  --tpg-orange:#e07b24;
  --tpg-orange-600:#c96a17;
  --tpg-sky:#6f9fd3;
  --tpg-sky-100:#eaf2fb;
  --tpg-white:#fff;
  --tpg-ink:#14213d;
  --tpg-muted:#5b6b82;
  --tpg-wa:#25d366;
  --tpg-wa-600:#1ebe5b;
  --tpg-radius:14px;
  --tpg-font:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --tpg-header-h:72px;
}
html{scroll-padding-top:calc(var(--tpg-header-h) + 12px)}
/* reset.css fuerza font-weight:normal en span/li/i; dentro de bloques TPG se hereda.
   Especificidad (0,0,1): gana a reset.css por orden, pierde ante cualquier clase. */
:where(.tpg-header-wrap,.tpg-footer,.tpg-wa-float,.tpg-mbar,.tpg-hero,.tpg-benefits,.tpg-section,.tpg-designer,.tpg-visit,.tpg-final) span,
:where(.tpg-header-wrap,.tpg-footer,.tpg-wa-float,.tpg-mbar,.tpg-hero,.tpg-benefits,.tpg-section,.tpg-designer,.tpg-visit,.tpg-final) li,
:where(.tpg-header-wrap,.tpg-footer,.tpg-wa-float,.tpg-mbar,.tpg-hero,.tpg-benefits,.tpg-section,.tpg-designer,.tpg-visit,.tpg-final) i{font-weight:inherit}

/* ---------- Botones ---------- */
.tpg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--tpg-font);font-weight:700;font-size:.95rem;line-height:1.1;padding:.8rem 1.4rem;border-radius:999px;border:2px solid transparent;text-decoration:none!important;transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease,color .15s ease;white-space:nowrap;cursor:pointer}
.tpg-btn:hover{transform:translateY(-2px)}
.tpg-btn:focus-visible{outline:3px solid var(--tpg-sky);outline-offset:3px}
.tpg-btn .bi{font-size:1.1em;line-height:1}
.tpg-btn--sm{font-size:.85rem;padding:.55rem 1rem}
.tpg-btn--lg{font-size:1rem;padding:1rem 1.7rem}
.tpg-btn--wa{background:var(--tpg-wa);color:#fff!important;box-shadow:0 6px 18px rgba(37,211,102,.35)}
.tpg-btn--wa:hover{background:var(--tpg-wa-600);color:#fff}
.tpg-btn--wa-outline{background:#fff;color:#128c4a!important;border-color:var(--tpg-wa)}
.tpg-btn--wa-outline:hover{background:var(--tpg-wa);color:#fff!important}
.tpg-btn--accent{background:var(--tpg-orange);color:#fff!important;box-shadow:0 6px 18px rgba(224,123,36,.35)}
.tpg-btn--accent:hover{background:var(--tpg-orange-600)}
.tpg-btn--primary{background:var(--tpg-navy);color:#fff!important}
.tpg-btn--primary:hover{background:var(--tpg-navy-900)}

/* ---------- Header ---------- */
.tpg-header-wrap{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.97);-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid rgba(11,61,120,.08);transition:box-shadow .2s ease;font-family:var(--tpg-font)}
.tpg-header-wrap.is-scrolled{box-shadow:0 6px 24px rgba(7,42,84,.12)}
.tpg-header-wrap--static{position:relative}
.tpg-header{max-width:1280px;margin:0 auto;padding:0 16px}
.tpg-header__bar{display:flex;align-items:center;flex-wrap:wrap;min-height:var(--tpg-header-h);gap:12px}
.tpg-header__logo{display:block;flex:0 0 auto;margin-right:auto}
.tpg-header__logo img{display:block;height:46px;width:auto}
.tpg-header__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.tpg-header__account{align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--tpg-muted)!important;text-decoration:none!important;padding:.4rem .5rem;border-radius:8px}
.tpg-header__account:hover{color:var(--tpg-navy)!important;background:var(--tpg-sky-100)}
.tpg-header__account .bi{font-size:1.15rem}
.tpg-header__wa{padding:.6rem 1.1rem;font-size:.85rem}

/* menú: anula estilos heredados de estilo-sns (header .navbar-nav ...) */
.tpg-header .navbar-nav{background:transparent!important}
.tpg-header .navbar-nav .nav-item .nav-link{font-family:var(--tpg-font);font-size:.9rem;font-weight:600;text-transform:none;color:var(--tpg-ink);border-bottom:0;padding:.55rem .75rem;border-radius:8px;background:transparent;position:relative;transition:color .15s ease,background-color .15s ease}
.tpg-header .navbar-nav .nav-item .nav-link:hover{color:var(--tpg-navy);background:var(--tpg-sky-100)}
.tpg-header .navbar-nav .nav-item.active .nav-link{color:var(--tpg-navy);background:transparent}
.tpg-header .navbar-nav .nav-item.active .nav-link::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.2rem;height:3px;border-radius:3px;background:var(--tpg-orange)}

/* hamburguesa */
.tpg-header__toggler{width:44px;height:44px;border:0;border-radius:10px;background:var(--tpg-sky-100);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.tpg-burger{display:inline-flex;flex-direction:column;gap:5px}
.tpg-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--tpg-navy);transition:transform .2s ease,opacity .2s ease}
.tpg-header__toggler[aria-expanded="true"] .tpg-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tpg-header__toggler[aria-expanded="true"] .tpg-burger span:nth-child(2){opacity:0}
.tpg-header__toggler[aria-expanded="true"] .tpg-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (min-width:992px){
  .tpg-header__bar{flex-wrap:nowrap}
  .tpg-nav__collapse{flex:1 1 auto;min-width:0;justify-content:center;order:0}
  .tpg-header__logo{margin-right:8px}
  .tpg-header__logo img{height:50px}
  .tpg-header .navbar-nav .nav-item .nav-link{font-size:.86rem;padding:.5rem .6rem;white-space:nowrap}
}
@media (min-width:992px) and (max-width:1319.98px){
  .tpg-header__account span{display:none}
  .tpg-header__account .bi{font-size:1.35rem}
}
@media (min-width:992px) and (max-width:1199.98px){
  .tpg-header__logo img{height:42px}
  .tpg-header .navbar-nav .nav-item .nav-link{font-size:.8rem;padding:.5rem .45rem}
  .tpg-header__wa-text{display:none}
  .tpg-header__wa{width:44px;height:44px;padding:0}
}
@media (max-width:991.98px){
  :root{--tpg-header-h:64px}
  .tpg-header__logo img{height:40px}
  .tpg-nav__collapse{order:3;flex:0 0 100%}
  .tpg-nav__list{padding:.25rem 0 1rem;border-top:1px solid rgba(11,61,120,.08)}
  .tpg-header .navbar-nav .nav-item .nav-link{font-size:1rem;padding:.8rem .5rem;border-radius:0;border-bottom:1px solid rgba(11,61,120,.06)}
  .tpg-header .navbar-nav .nav-item.active .nav-link::after{left:0;right:auto;top:.8rem;bottom:.8rem;width:3px;height:auto}
  .tpg-header .navbar-nav .nav-item.active .nav-link{padding-left:.9rem}
  .tpg-nav__account-mobile .nav-link{color:var(--tpg-muted)!important;font-size:.9rem!important}
  .tpg-nav__collapse.show,.tpg-nav__collapse.collapsing{max-height:calc(100vh - var(--tpg-header-h));overflow-y:auto}
}
@media (max-width:575.98px){
  .tpg-header__wa-text{display:none}
  .tpg-header__wa{width:44px;height:44px;padding:0}
  .tpg-header__logo img{height:36px}
}

/* ---------- Footer ---------- */
.tpg-footer{background:var(--tpg-navy-900);color:#c9d6e8;font-family:var(--tpg-font);font-size:.92rem;padding:56px 0 0;height:auto!important}/* estilo-sns fija footer{height:10rem/17rem} */
.tpg-footer__grid{row-gap:32px;padding-bottom:40px}
.tpg-footer__logo{display:inline-block;background:#fff;border-radius:12px;padding:10px 16px;margin-bottom:16px}
.tpg-footer__logo img{display:block;height:46px;width:auto}
.tpg-footer__claim{max-width:340px;line-height:1.6;margin-bottom:18px}
.tpg-footer__title{color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.tpg-footer__links{list-style:none;margin:0;padding:0}
.tpg-footer__links li{margin:0 0 10px}
.tpg-footer__links a{color:#c9d6e8;text-decoration:none;transition:color .15s ease}
.tpg-footer__links a:hover{color:var(--tpg-orange)}
.tpg-footer__contact .bi{width:1.3em;display:inline-block;color:var(--tpg-sky)}
.tpg-footer__map{line-height:0;filter:grayscale(.35)}
.tpg-footer__map iframe{display:block}
.tpg-footer__bottom{background:#05203f;padding:18px 0;text-align:center}
.tpg-footer__bottom p{margin:0;font-size:.82rem;color:#9fb2cc}

/* ---------- WhatsApp flotante ---------- */
.tpg-wa-float{position:fixed;right:20px;bottom:64px;z-index:1040;display:inline-flex;align-items:center;gap:10px;background:var(--tpg-wa);color:#fff!important;text-decoration:none!important;border-radius:999px;padding:12px;box-shadow:0 10px 28px rgba(0,0,0,.22);font-family:var(--tpg-font);font-weight:700;font-size:.9rem;transition:transform .15s ease,background-color .15s ease}
.tpg-wa-float:hover{background:var(--tpg-wa-600);transform:translateY(-2px)}
.tpg-wa-float .bi{font-size:1.75rem;line-height:1}
.tpg-wa-float__label{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .25s ease,padding .25s ease}
.tpg-wa-float:hover .tpg-wa-float__label{max-width:220px;padding-right:6px}

/* ---------- Barra sticky inferior (móvil) ---------- */
.tpg-mbar{display:none}
@media (max-width:767.98px){
  .tpg-wa-float{display:none}
  .tpg-mbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:1040;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(7,42,84,.12);font-family:var(--tpg-font)}
  .tpg-mbar__btn{flex:1 1 50%;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:12px;font-weight:700;font-size:.95rem;text-decoration:none!important}
  .tpg-mbar__btn--design{background:var(--tpg-orange);color:#fff!important}
  .tpg-mbar__btn--wa{background:var(--tpg-wa);color:#fff!important}
  .tpg-mbar__btn .bi{font-size:1.2rem}
  /* no tapar contenido */
  body.tpg-has-mbar{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  /* el tab "Contáctenos" se reemplaza por la barra en móvil */
  body.tpg-has-mbar #contact_express{display:none}
}

/* ---------- Impresión (diseñador exporta con window.print) ---------- */
@media print{
  .tpg-header-wrap,.tpg-footer,.tpg-wa-float,.tpg-mbar{display:none!important}
  body.tpg-has-mbar{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .tpg-btn,.tpg-wa-float,.tpg-burger span{transition:none}
}