/* Base — reset + fundamentos tipográficos, sobre los tokens de tokens.css */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--gh-bg);
  color: var(--gh-text);
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, picture, video { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--gh-font-display);
  font-weight: 700;
  color: var(--gh-text);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 var(--gh-space-2);
}
h1 { font-size: var(--gh-text-3xl); }
h2 { font-size: var(--gh-text-2xl); }
h3 { font-size: var(--gh-text-lg); }

p { margin: 0 0 var(--gh-space-3); max-width: 68ch; color: var(--gh-text); }
p.lede { font-size: var(--gh-text-md); color: var(--gh-text-muted); }

a { color: var(--gh-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gh-link-hover); }

/* Anillo de foco en dos tonos: el sitio alterna fondos claros (mayoría de
   secciones) y oscuros (--gh-ink, en footer/trust-band/recognition-band/cta
   oscuro) — ningún color único de foco pasa 3:1 (WCAG 1.4.11) contra ambos a
   la vez. El aro blanco interior se ve sobre fondo oscuro; el halo azul
   exterior se ve sobre fondo claro — siempre hay uno visible sin importar
   dónde caiga el foco. */
:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--gh-blue-deep);
  border-radius: var(--gh-radius);
}

.container {
  width: 100%;
  max-width: var(--gh-content-width);
  margin: 0 auto;
  padding: 0 var(--gh-space-4);
}

.eyebrow {
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gh-link);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--gh-font-display);
  font-weight: 700;
  font-size: var(--gh-text-sm);
  letter-spacing: 0.01em;
  padding: 0.85rem 1.5rem;
  border-radius: var(--gh-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--gh-ink);
  color: #fff;
}
.btn-primary:hover { background: var(--gh-blue-deep); color: #fff; }

.btn-secondary {
  background: transparent;
  color: var(--gh-text);
  border-color: var(--gh-gray-line);
}
.btn-secondary:hover { border-color: var(--gh-text); }

.btn-accent {
  background: var(--gh-blue-deep);
  color: #fff;
}
.btn-accent:hover { background: var(--gh-blue-darker); }

.btn-sm { padding: 0.55rem 1.1rem; font-size: var(--gh-text-xs); }

/* Brillo animado sutil — reservado para el CTA de mayor intención (ej. el
   hero). Barrido diagonal de luz cada 4.5s, no un pulso constante — "sutil"
   a propósito. */
.btn-glow { position: relative; overflow: hidden; }
.btn-glow::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%; /* posición base fija — el barrido se anima con transform, no left (ver nota) */
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  transform: translateX(0%) skewX(-18deg);
  animation: gh-btn-glow-sweep 4.5s ease-in-out infinite;
}
/* Animar "left" fuerza layout/paint en cada frame (marcado por Lighthouse como
   animación no compuesta, sube CLS) — se anima "transform: translateX()" en su
   lugar (compositado en GPU, sin reflow). 475% es relativo al ANCHO PROPIO del
   elemento (40% del botón): 4.75 × 40% = 190% del ancho del botón, la misma
   distancia de recorrido que antes cubría "left: -60% → 130%". */
@keyframes gh-btn-glow-sweep {
  0%, 55% { transform: translateX(0%) skewX(-18deg); }
  85%, 100% { transform: translateX(475%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-glow::after { animation: none; display: none; }
}

.section {
  padding: var(--gh-space-6) 0;
}
.section-tight { padding: var(--gh-space-5) 0; }
.section-alt { background: var(--gh-paper-raised); border-top: 1px solid var(--gh-gray-line-soft); border-bottom: 1px solid var(--gh-gray-line-soft); }

/* Franja de CTA de cierre — compartida por varias páginas (home, proyectos,
   nosotros...). Antes solo existía en home.css, así que en cualquier otra
   página que la usara (proyectos.php) se veía sin estilo — movida aquí para
   que funcione en todas por igual. */
.cta-band { background: var(--gh-blue-tint); padding: var(--gh-space-5) 0; }
.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gh-space-4);
}
.cta-band h2 { margin-bottom: 0.2rem; }
.cta-band .lede { margin: 0; }
/* Cuando una página termina justo en un cta-band (que ya trae su propio
   padding vertical generoso), el margin-top por defecto del footer se ve
   como un espacio en blanco extra encima — se cancela solo en ese caso
   puntual (selector de hermano adyacente), sin afectar páginas donde el
   footer viene después de contenido normal. */
.cta-band + .site-footer, .faq-band + .site-footer { margin-top: 0; }

.grid {
  display: grid;
  gap: var(--gh-space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 880px) {
  .cta-band-inner { flex-direction: column; align-items: flex-start; }
}

/* Miniatura con badge "+N" cuando hay más fotos migradas de las que se ven
   en la vista previa — componente compartido por productos.php y
   proyectos.php (ambos usan gallery.js para el lightbox). */
.gallery-thumb { position: relative; display: block; }
.gallery-thumb-more img { filter: brightness(0.55); }
.gallery-more-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--gh-font-display); font-weight: 700; font-size: var(--gh-text-md);
  pointer-events: none;
}

/* Modal de galería (gallery.js) — mismo lightbox reutilizado por cualquier
   página con fotos reales agrupadas: productos.php (subcategorías) y
   proyectos.php (casos de éxito). */
.gallery-modal {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: rgba(18, 19, 22, 0.92);
  align-items: center; justify-content: center;
  padding: var(--gh-space-4);
}
.gallery-modal.is-open { display: flex; }
body.gallery-modal-lock { overflow: hidden; }
.gallery-modal-inner { position: relative; width: 100%; max-width: 56rem; }
.gallery-modal-close {
  position: absolute; top: -3rem; right: 0;
  /* Cuadrado redondeado, no círculo — homologado en todo el sitio 2026-08-19. */
  width: 2.4rem; height: 2.4rem; border-radius: 0.65rem;
  border: none; background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gallery-modal-close:hover { background: rgba(255, 255, 255, 0.24); }
.gallery-modal-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.gallery-modal-img { max-width: 100%; max-height: 74vh; border-radius: var(--gh-radius); display: block; }
.gallery-modal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; border: none;
  background: rgba(255, 255, 255, 0.85); color: var(--gh-text);
  font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gallery-modal-arrow:hover { background: #fff; }
.gallery-modal-prev { left: var(--gh-space-2); }
.gallery-modal-next { right: var(--gh-space-2); }
.gallery-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--gh-space-2); color: #fff; font-size: var(--gh-text-sm);
}
.gallery-modal-counter { color: #B7BAC0; }

::selection { background: var(--gh-blue-tint); color: var(--gh-text); }

/* ---- Breadcrumb ---- */
.breadcrumb { font-size: var(--gh-text-sm); color: var(--gh-text-muted); margin-bottom: var(--gh-space-2); }
.breadcrumb a { color: var(--gh-text-muted); }

/* ---- Hero de foto a pantalla completa ("landing" de página secundaria) ----
   Construido 2026-08-27 para las líneas de producto, reusado desde entonces
   en cualquier página que necesite sentirse como landing propia para
   campañas (distribuidores, proyectos) — mismo patrón visual de foto +
   degradado ya usado en .manifiesto (home.css), adaptado a página
   secundaria (min-height menor). */
.linea-hero-visual {
  position: relative;
  overflow: hidden;
  min-height: 46vh;
  display: flex;
  align-items: center;
  color: #fff;
}
.linea-hero-bg { position: absolute; inset: 0; z-index: 0; }
.linea-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.linea-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(15,17,20,0.86) 0%, rgba(15,17,20,0.68) 42%, rgba(15,17,20,0.4) 100%);
}
/* padding-top/bottom SOLO (nunca el shorthand "X 0") — .linea-hero-inner
   también lleva .container, que ya da el margen lateral real del sitio; el
   shorthand de 2 valores ponía 0 de padding horizontal explícito, ganándole
   a .container por venir después en la cascada (misma especificidad) — el
   título/breadcrumb del hero quedaba pegado al borde en móvil en las 6
   páginas que usan esta clase (distribuidores, productos, proyectos,
   pvc-vs-aluminio, ventanas-pvc-queretaro). Bug real reportado 2026-09-01
   ("le faltan márgenes, está muy en los bordes"), mismo patrón que
   .manifiesto-inner/.footer-bottom, corregido en la misma auditoría. */
.linea-hero-inner { position: relative; z-index: 2; padding-top: var(--gh-space-6); padding-bottom: var(--gh-space-6); }
.linea-hero-visual .breadcrumb, .linea-hero-visual .breadcrumb a { color: rgba(255,255,255,0.7); }
.linea-hero-visual .eyebrow { color: var(--gh-blue-tint); }
.linea-hero-visual h1 { color: #fff; }
.linea-hero-visual .lede { color: rgba(255,255,255,0.88); max-width: 34rem; }
.linea-hero-beneficios {
  list-style: none;
  margin: var(--gh-space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 34rem;
}
.linea-hero-beneficios li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--gh-text-sm);
  color: rgba(255,255,255,0.92);
}
.linea-hero-beneficios li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--gh-blue);
}
.linea-hero-actions { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin-top: var(--gh-space-4); }
.btn-text-light { color: #fff; font-weight: 600; font-size: var(--gh-text-sm); text-decoration: underline; text-underline-offset: 2px; }
.btn-text-light:hover { color: var(--gh-blue-tint); }
.btn-text { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--gh-link); font-weight: 600; font-size: var(--gh-text-sm); text-decoration: underline; text-underline-offset: 2px; }
.btn-text:hover { color: var(--gh-link-hover); }
@media (max-width: 720px) { .linea-hero-visual { min-height: 56vh; } }

/* Variante "split" del hero de foto (pvc-vs-aluminio.php) — dos fotos reales
   lado a lado con una insignia "VS" al centro, en vez de una sola imagen de
   fondo. Reusa el mismo degradado/texto de .linea-hero-visual. */
.linea-hero-split-bg { position: absolute; inset: 0; z-index: 0; display: flex; }
.linea-hero-split-bg picture { flex: 1 1 50%; height: 100%; overflow: hidden; display: block; }
.linea-hero-split-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
.linea-hero-split-vs {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: var(--gh-ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gh-font-display);
  font-weight: 700;
  font-size: var(--gh-text-sm);
  letter-spacing: 0.03em;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  border: 2px solid rgba(255,255,255,0.85);
}
@media (max-width: 720px) { .linea-hero-split-vs { width: 2.6rem; height: 2.6rem; font-size: var(--gh-text-xs); } }

/* "PVC vs. Aluminio" — comparación cualitativa (sin puntajes/números
   inventados), ambos materiales reales que GHIMEL fabrica. Compartido entre
   garantia.php, pvc-vs-aluminio.php e index.php — movido de home.css a
   base.css el 2026-08-27 (las dos primeras no cargan home.css). */
.material-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gh-space-4);
  margin-top: var(--gh-space-5);
}
.material-card {
  padding: var(--gh-space-4);
  background: var(--gh-surface);
  border: 1px solid var(--gh-gray-line-soft);
  border-radius: var(--gh-radius);
}
.material-card h2, .material-card h3 { font-family: var(--gh-font-display); font-size: var(--gh-text-lg); margin-bottom: var(--gh-space-3); }
.material-list { list-style: none; margin: 0 0 var(--gh-space-4); padding: 0; display: flex; flex-direction: column; gap: var(--gh-space-2); }
.material-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--gh-text-sm);
  color: var(--gh-text-muted);
}
.material-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--gh-link);
  font-weight: 700;
}
.material-note {
  margin-top: var(--gh-space-4);
  font-size: var(--gh-text-sm);
  color: var(--gh-text-muted);
  font-style: italic;
}
@media (max-width: 880px) {
  .material-grid { grid-template-columns: 1fr; }
}

/* Grid de temas/servicios para landings de producto (2026-09-11: /ventanas,
   /mosquiteros, /ventanas-queretaro) — mismo look que .material-card, pero
   con columnas fluidas (auto-fit) para acomodar cualquier número de
   tarjetas (4, 6, 8...) sin tener que fijar un conteo de columnas a mano. */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gh-space-4);
  margin-top: var(--gh-space-5);
}
.topic-card {
  padding: var(--gh-space-4);
  background: var(--gh-surface);
  border: 1px solid var(--gh-gray-line-soft);
  border-radius: var(--gh-radius);
}
.topic-card h3 { font-family: var(--gh-font-display); font-size: var(--gh-text-md); margin-bottom: 0.4rem; }
.topic-card p { font-size: var(--gh-text-sm); color: var(--gh-text-muted); margin: 0; }