/* ============================================
   FAMILY STRIP — Plan-O Global · Plan-O · OHM
   Cinta familiar superior, sobre el header de cada hijo
   ============================================ */

/* Variable de altura para coordinar con headers de marca */
:root { --family-strip-h: 40px; }

.family-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--family-strip-h);
  background: #0a0a0a;
  border-bottom: 1px solid rgba(245, 240, 235, 0.06);
  z-index: 1100;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.family-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  padding: 0 clamp(18px, 3.5vw, 56px);
  max-width: 1400px;
  margin: 0 auto;
}

/* Empujar todo el contenido para que no quede debajo de la cinta */
body.brand-plano,
body.brand-ohm {
  padding-top: var(--family-strip-h);
}

/* Empujar headers fixed de cada marca por debajo de la cinta */
body.brand-plano .nav { top: var(--family-strip-h); }
body.brand-ohm .header { top: var(--family-strip-h); }

/* OHM: el visor 3D ocupa toda la pantalla; ajustar para no quedar tapado */
body.brand-ohm .stage,
body.brand-ohm #viewer {
  height: calc(100vh - var(--family-strip-h));
  height: calc(100dvh - var(--family-strip-h));
}

/* Logo Plan-O Global a la izquierda */
.family-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  color: rgba(245, 240, 235, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.family-logo:hover { color: #F5F0EB; }
.family-logo:focus-visible { outline: 1px solid #F5F0EB; outline-offset: 4px; }

.family-logo-divider {
  color: rgba(245, 240, 235, 0.3);
  font-weight: 300;
}

/* Marcas a la derecha */
.family-marcas {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.family-marca {
  position: relative;
  color: rgba(245, 240, 235, 0.5);
  padding: 6px 0;
  text-decoration: none;
  transition: color 0.3s ease;
}

.family-marca:hover { color: #F5F0EB; }

.family-marca:focus-visible {
  outline: 1px solid #F5F0EB;
  outline-offset: 4px;
}

.family-divider {
  color: rgba(245, 240, 235, 0.28);
  font-size: 0.9em;
  letter-spacing: 0;
}

/* Estado activo según body class */
body.brand-plano .family-marca-plano,
body.brand-ohm .family-marca-ohm {
  color: #F5F0EB;
}

body.brand-plano .family-marca-plano::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #B5C327; /* oliva — Plan-O */
}

body.brand-ohm .family-marca-ohm::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #d4a574; /* miel — OHM */
}

@media (max-width: 600px) {
  .family-strip-inner {
    padding: 8px 14px;
    gap: 12px;
  }
  .family-logo { font-size: 0.78rem; letter-spacing: 0.14em; }
  .family-marcas { font-size: 0.66rem; gap: 0.6em; }
}