/* Layout — header, nav, whatsapp flotante, footer. Compartido en todas las páginas. */

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--gh-ink);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 200;
}
.skip-link:focus {
  left: var(--gh-space-2);
  top: var(--gh-space-2);
}

/* ---- header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--gh-header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gh-gray-line-soft);
}
.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--gh-space-4);
  height: 4.6rem;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 1.9rem; width: auto; }

.main-nav { flex: 1; }
.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--gh-space-4);
  margin: 0;
  padding: 0;
}
.nav-list > li > a {
  display: block;
  padding: 0.4rem 0;
  color: var(--gh-text);
  font-weight: 600;
  font-size: var(--gh-text-sm);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-list > li > a:hover { border-color: var(--gh-blue); color: var(--gh-text); }

.has-sub { position: relative; }
.sub-nav {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  position: absolute;
  top: 100%;
  left: -0.5rem;
  min-width: 13rem;
  background: var(--gh-surface);
  border: 1px solid var(--gh-gray-line-soft);
  box-shadow: var(--gh-shadow-md);
  border-radius: var(--gh-radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.has-sub:hover .sub-nav,
.has-sub:focus-within .sub-nav {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.sub-nav a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 3px;
  color: var(--gh-text-muted);
  font-size: var(--gh-text-sm);
  text-decoration: none;
}
.sub-nav a:hover { background: var(--gh-blue-tint); color: var(--gh-link); }

.header-actions { display: flex; align-items: center; gap: var(--gh-space-3); flex-shrink: 0; }
.header-whatsapp {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--gh-text-muted);
  font-size: var(--gh-text-sm);
  font-weight: 600;
  text-decoration: none;
}
.header-whatsapp:hover { color: #25D366; }

.header-lang-switch {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border: 1.5px solid var(--gh-gray-line);
  border-radius: 999px;
  font-size: var(--gh-text-xs);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
  text-decoration: none;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.header-lang-switch:hover { border-color: var(--gh-link); filter: brightness(1.08); }

/* Bandera de fondo del botón de idioma: el rótulo indica el idioma AL QUE
   se cambia, así que la bandera es la de ese idioma destino — "ES" (viendo
   la página en inglés) muestra bandera de México; "EN" (viendo en español)
   muestra bandera de EE.UU. Degradado oscuro central para que el texto
   siga siendo legible sobre cualquiera de las dos banderas. */
.header-lang-switch--es {
  background-image:
    radial-gradient(circle, rgba(0,0,0,.4) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 78%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23006341'/%3E%3Crect x='1' width='1' height='2' fill='%23ffffff'/%3E%3Crect x='2' width='1' height='2' fill='%23ce1126'/%3E%3C/svg%3E");
}
.header-lang-switch--en {
  background-image:
    radial-gradient(circle, rgba(0,0,0,.4) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 78%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 100'%3E%3Crect width='190' height='100' fill='%23B22234'/%3E%3Cg fill='%23fff'%3E%3Crect y='7.7' width='190' height='7.7'/%3E%3Crect y='23.1' width='190' height='7.7'/%3E%3Crect y='38.5' width='190' height='7.7'/%3E%3Crect y='53.8' width='190' height='7.7'/%3E%3Crect y='69.2' width='190' height='7.7'/%3E%3Crect y='84.6' width='190' height='7.7'/%3E%3C/g%3E%3Crect width='76' height='53.8' fill='%233C3B6E'/%3E%3C/svg%3E");
}

/* Bocinita de sonido de interfaz — mismo tamaño/forma que .header-lang-switch
   (su vecino inmediato en el header), mudo por defecto en cada visita. Los
   dos íconos (bocina tachada / bocina con ondas) se alternan por CSS según
   .is-on, sin JS de por medio más allá de agregar/quitar esa clase
   (sound-fx.js). Pedido explícito 2026-08-19. */
.header-sound-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border: 1.5px solid var(--gh-gray-line);
  border-radius: 999px;
  background: none;
  color: var(--gh-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.header-sound-toggle:hover { border-color: var(--gh-link); color: var(--gh-link); }
.header-sound-toggle svg { width: 1.05rem; height: 1.05rem; }
.header-sound-toggle .icon-sound-on { display: none; }
.header-sound-toggle.is-on .icon-sound-off { display: none; }
.header-sound-toggle.is-on .icon-sound-on { display: block; }
.header-sound-toggle.is-on { color: var(--gh-link); border-color: var(--gh-link); }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 2.4rem; height: 2.4rem;
  position: relative;
}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  content: ""; position: absolute; left: 0.5rem; right: 0.5rem;
  height: 2px; background: var(--gh-text);
}
.nav-toggle-bar { top: 50%; transform: translateY(-50%); }
.nav-toggle-bar::before { top: -7px; }
.nav-toggle-bar::after { top: 7px; }

/* ---- whatsapp flotante ---- */
.whatsapp-float {
  position: fixed;
  right: var(--gh-space-4);
  bottom: var(--gh-space-4);
  z-index: 150;
  width: 3.4rem; height: 3.4rem;
  /* Círculo — única excepción a la homologación cuadrado/círculo de
     2026-08-19: pedido explícito de que el botón de WhatsApp (ícono verde
     reconocible de la marca WhatsApp) se quede redondo en ambos sitios. */
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--gh-shadow-md);
  transition: transform 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.06); color: #fff; }

/* ---- firma de desarrollo + marketing ----
   Pedido explícito 2026-09-12: ya no debe ser un elemento flotante
   (position:fixed) superpuesto sobre el contenido — se integra como un
   renglón más de .footer-bottom, junto al copyright y el aviso de
   privacidad. Al dejar de ser un elemento flotante que tapaba contenido,
   ya no aplica la regla anterior de ocultarla en móvil (esa queja era
   sobre que "flotaba" encima de la página, no sobre el crédito en sí). */
.dev-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: inherit;
  color: inherit;
}
.dev-credit a { color: inherit; text-decoration: none; }
.dev-credit a:hover { color: #fff; }
.dev-credit strong { font-weight: 700; }
.dev-credit-sep { color: #8A8D92; }

/* ---- footer ---- */
.site-footer {
  background: var(--gh-ink);
  color: #C7C9CC;
  margin-top: var(--gh-space-7);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--gh-space-5);
  padding: var(--gh-space-6) 0 var(--gh-space-5);
}
.footer-brand img { height: 1.7rem; width: auto; margin-bottom: var(--gh-space-2); }
.footer-brand p { color: #9CA0A6; font-size: var(--gh-text-sm); max-width: 26ch; }
.footer-social { display: flex; gap: var(--gh-space-2); margin-top: var(--gh-space-3); }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.08);
  color: #C7C9CC;
  transition: background 0.15s ease, color 0.15s ease;
}
.footer-social a:hover { background: var(--gh-blue-deep); color: #fff; }
.footer-col h3 {
  color: #fff;
  font-size: var(--gh-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--gh-space-2);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col a { color: #C7C9CC; font-size: var(--gh-text-sm); text-decoration: none; }
.footer-col a:hover { color: #fff; }
.footer-contact li { color: #9CA0A6; font-size: var(--gh-text-sm); }

.footer-bottom {
  border-top: 1px solid #3A3D42;
  /* padding-top SOLO (no el shorthand "X 0") — .footer-bottom también lleva
     .container, que ya da el margen lateral real; el shorthand de 2 valores
     ponía 0 de padding horizontal explícito, ganándole a .container por
     venir después en la cascada — mismo bug real de .manifiesto-inner/
     .linea-hero-inner, encontrado en la misma auditoría 2026-09-01. */
  padding-top: var(--gh-space-3);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem;
  font-size: var(--gh-text-xs);
  color: #8A8D92;
}
.footer-bottom a { color: #8A8D92; }
.footer-bottom a:hover { color: #fff; }

@media (max-width: 880px) {
  .site-header-inner { gap: var(--gh-space-2); }
  .nav-toggle { display: block; }
  .main-nav { position: relative; }
  .nav-list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 3.2rem;
    left: -1rem;
    right: -1rem;
    background: var(--gh-surface);
    border: 1px solid var(--gh-gray-line-soft);
    box-shadow: var(--gh-shadow-md);
    padding: var(--gh-space-2);
  }
  .nav-list.is-open { display: flex; }
  .sub-nav { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; display: none; }
  .has-sub.is-open .sub-nav { display: block; }
  .header-whatsapp span { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .header-actions .btn { display: none; }
  .brand img { height: 1.6rem; }
}

/* red de seguridad: nada debe forzar scroll horizontal de la página */
body { overflow-x: hidden; }