/* web-n — estilos del sitio público. Fase de diseño: exploración 3a.
   Tipografía: Inter variable autoalojada (v4.1, rsms.is/inter) en /fonts/inter/. */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/InterVariable-Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---- Base: sin relleno de página; el contenido ocupa hasta 1230px centrado ---- */
body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; }
header, main {
  width: 100%;
  max-width: 1230px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
main { flex: 1; }

/* ---- Barra superior de la red (3a): tira negra con los sitios ---- */
.barra-red {
  background: #141414;
  display: flex;
  align-items: center;
  gap: 18px;
  /* fondo a todo el ancho; contenido alineado con el contenedor de 1230px */
  padding: 6px max(16px, calc((100% - 1230px) / 2));
  font: 500 12.5px 'Inter', system-ui, sans-serif;
  color: #8a8a8a;
}
.barra-red a {
  color: inherit;
  text-decoration: none;
  transition: color .12s ease;
}
.barra-red a:hover { color: #fff; }
/* Logo fijo a la izquierda: flor + marca bekia en blanco */
.barra-red .red-logo { display: flex; align-items: center; gap: 5px; flex: none; }
.barra-red .red-logo img { display: block; height: 22px; width: auto; }
.barra-red .red-logo .red-marca { height: 18px; }
/* Los sitios se desplazan en horizontal cuando no caben (el logo no) */
.barra-red .red-sitios {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.barra-red .red-sitios::-webkit-scrollbar { display: none; }
.barra-red .red-actual {
  font-weight: 700;
}
@media (max-width: 900px) {
  /* Degradado de corte SOLO cuando de verdad hay scroll (pantallas estrechas);
     en escritorio la barra entera es visible, sin desvanecer nada. */
  .barra-red .red-sitios {
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
}
@media (max-width: 600px) {
  .barra-red { gap: 12px; }
  .barra-red .red-sitios { gap: 13px; }
}

/* ---- Pie (1e): banda del color de marca con borde superior oscuro ---- */
.pie {
  background: var(--c);
  border-top: 6px solid color-mix(in srgb, var(--c) 62%, #000);
  padding: 38px max(16px, calc((100% - 1230px) / 2)) 56px;
  font: 500 14px 'Inter', system-ui, sans-serif;
  color: #fff;
  margin-top: 48px;
}
.pie a { color: inherit; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Logo del pie: flor con el hueso "recortado" (del color del fondo) + nombre */
.pie-logo { display: flex; align-items: center; gap: 10px; }
.pie-logo:hover { text-decoration: none; }
.flor-sitio { height: 42px; width: 42px; display: block; }
.flor-petalo { fill: #fff; stroke: #fff; }
.flor-hueso { fill: var(--c); }
.pie-marca { font-size: 23px; font-weight: 500; letter-spacing: -.01em; }
.pie-marca b { font-weight: 800; }
.pie-secciones { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 700; font-size: 15px; }
.pie-red {
  margin-top: 18px;
  font-size: 14px;
  color: color-mix(in srgb, var(--c) 18%, #fff);
}
.pie-legal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .28);
  color: color-mix(in srgb, var(--c) 18%, #fff);
}
.pie-legal nav { display: flex; gap: 16px; flex-wrap: wrap; }