/* ============================================================
   layout.css — Rastro Fitness
   Las piezas que se repiten en todas las páginas: marquee,
   cabecera y pie. Móvil primero. Ningún valor de marca literal.
   ============================================================ */

/* ============================================================
   Marquee — la franja bordeaux de arriba de todo
   ============================================================ */

.marquee {
  display: flex;
  overflow: hidden;
  background-color: var(--color-accent-base);
  color: var(--color-accent-on);
  user-select: none;
}

.marquee__pista {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--espaciado-16);
  min-width: max-content;
  padding-block: var(--espaciado-8);
  padding-right: var(--espaciado-16);

  /* La duración acompaña al ancho de la pista para que la velocidad no
     cambie: ~53 px/s. Si se toca $repeticiones en marquee.php, se toca acá. */
  animation: marquee-desplazar 74s linear infinite;
}

/* Tipografía: .t-display-xs y .t-mono-texto-sm, puestas en el marcado.
   Acá solo va lo que la escala no resuelve. */
.marquee__item {
  white-space: nowrap;
}

.marquee__barra {
  opacity: 0.5;
}

@keyframes marquee-desplazar {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__pista {
    animation: none;
  }
}

/* ============================================================
   Cabecera

   ORDEN DE FOCO = ORDEN VISUAL, en los dos anchos. Ninguna regla de
   este bloque reordena la barra: lo que no corresponde a un ancho se
   apaga con display:none —que además lo saca del árbol de
   accesibilidad— y el resto cae en su columna por orden de marcado.

     celular    [hamburguesa] [logo] [buscar] [carrito]
     escritorio [logo] [nav] [buscador] [cuenta] [carrito]

   El corte es 1280 px, el mismo que usan nav.css y nav.js.
   ============================================================ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--color-bg-base);
  border-bottom: var(--hairline) solid var(--color-border-subtle);
}

/* Tres columnas con los flancos iguales: así el logo queda centrado de
   verdad y no “centrado en lo que sobra”. */
.cabecera__barra {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--espaciado-8);
  min-height: 56px;
}

.cabecera__hamburguesa {
  display: grid;
  place-items: center;
  justify-self: start;
  width: 44px;
  height: 44px;
  color: var(--color-text-primary);

  /* El área táctil mide 44 y el dibujo 24: sin este tirón, la línea del
     ícono arrancaría 10 px adentro del margen y rompería la vertical
     que forman el logo, el hero y las cards. */
  margin-left: calc(var(--espaciado-20) / -2);
}

.cabecera__logo {
  justify-self: center;
  display: block;
}

.cabecera__logo img {
  width: auto;
  height: 28px;
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: var(--espaciado-4);
  min-width: 0;
}

/* Cuenta vive en el cajón cuando no hay lugar en la barra. */
.cabecera__cuenta {
  display: none;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--espaciado-8);
  color: var(--color-text-secondary);
  transition: color 0.15s ease;
}

.cabecera__cuenta:hover,
.cabecera__cuenta.es-activo {
  color: var(--color-text-primary);
}

/* --- Navegación numerada -------------------------------------
   Cuatro puertas fijas: 01 Productos · 02 Mayoristas · 03 Nosotros ·
   04 Contacto. Ya no se arma con las categorías del panel, así que el
   ancho del menú dejó de depender de los datos y la cabecera puede
   volver a una sola línea sin calcular nada.

   Abajo del corte no se dibuja: el menú de celular es el cajón. */

.nav {
  display: none;
  min-width: 0;
}

.nav__lista {
  display: flex;
  align-items: center;
  gap: var(--espaciado-24);
}

/* Sin position: el panel del mega-menú es hijo de este <li> y se
   posiciona contra .cabecera para salir a sangre. Si este elemento se
   vuelve posicionado, el panel se encoge al ancho del ítem. */
.nav__item--mega {
  position: static;
}

.nav__enlace {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--espaciado-8);
  white-space: nowrap;
  min-height: 44px;
  color: var(--color-text-secondary);
  transition: color 0.15s ease;
}

/* text/secondary y no text/disabled: el índice es dato legible, no un
   elemento apagado. CLAUDE.md §5.3 reserva disabled para lo inhabilitado. */
.nav__indice {
  color: var(--color-text-secondary);
  transition: color 0.15s ease;
}

.nav__enlace:hover,
.nav__enlace.es-activo,
.nav__disparador[aria-expanded="true"] {
  color: var(--color-text-primary);
}

.nav__enlace:hover .nav__indice,
.nav__enlace.es-activo .nav__indice,
.nav__disparador[aria-expanded="true"] .nav__indice {
  color: var(--color-accent-text);
}

.nav__chevron {
  display: flex;
  color: currentColor;
  transition: transform 0.2s ease;
}

.nav__chevron .icono {
  width: 16px;
  height: 16px;
}

.nav__disparador[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

/* La página actual y el panel abierto llevan la misma barra bordeaux al
   pie del ítem. Nunca un recuadro. */
.nav__enlace.es-actual::after,
.nav__disparador[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--color-accent-base);
}

/* --- Buscador -----------------------------------------------
   Uno solo para los dos anchos. En escritorio está siempre abierto;
   en celular lo despliega la lupa y ahí se queda con la barra entera,
   en vez de empujar el resto a una segunda fila. */

.busqueda {
  display: flex;
  align-items: center;
  min-width: 0;
}

.busqueda__abrir {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--color-text-primary);
}

.busqueda__cerrar {
  display: none;
}

.buscador {
  display: none;
  align-items: stretch;
  min-width: 0;
  border: var(--hairline) solid var(--color-border-strong);
  transition: border-color 0.15s ease;
}

.buscador:hover {
  border-color: var(--color-plata-3);
}

/* 2 px, igual que el :focus-visible de base.css. Con el hairline el
   buscador era el único control del sitio con un anillo más fino. */
.buscador:focus-within {
  border-color: var(--color-border-focus);
  outline: 2px solid var(--color-border-focus);
  outline-offset: 0;
}

.buscador__campo {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--espaciado-8) var(--espaciado-12);
  color: var(--color-text-primary);
}

.buscador__campo::placeholder {
  color: var(--color-text-secondary);
}

/* El contorno del conjunto ya avisa que el campo tiene el foco. */
.buscador__campo:focus-visible {
  outline: none;
}

.buscador__boton {
  flex: 0 0 auto;
  padding-inline: var(--espaciado-12);
  border-left: var(--hairline) solid var(--color-border-strong);
  color: var(--color-text-secondary);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.buscador__boton:hover {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

/* Modo búsqueda: solo existe abajo del corte, así que se escribe con
   max-width. Arriba del corte el campo está siempre visible y el estado
   no significa nada; encerrarlo acá evita que quede pegado si alguien
   agranda la ventana con la búsqueda abierta. */
@media (max-width: 1279px) {
  .cabecera[data-buscando] .cabecera__hamburguesa,
  .cabecera[data-buscando] .cabecera__logo,
  .cabecera[data-buscando] .busqueda__abrir,
  .cabecera[data-buscando] .boton-carrito {
    display: none;
  }

  .cabecera[data-buscando] .cabecera__acciones {
    grid-column: 1 / -1;
    width: 100%;
  }

  .cabecera[data-buscando] .busqueda {
    flex: 1 1 auto;
    gap: var(--espaciado-8);
  }

  .cabecera[data-buscando] .buscador {
    display: flex;
    flex: 1 1 auto;
  }

  .cabecera[data-buscando] .busqueda__cerrar {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-text-secondary);
  }
}

/* --- Botón de carrito --------------------------------------- */

/* En celular es la cuarta celda de la barra y se comporta como las otras
   tres: ícono, sin fondo y sin la palabra. El bordeaux vuelve en
   escritorio, donde el carrito sí es un botón y no una celda.

   La celda mide un poco más de 44 porque además del ícono lleva el
   contador, que es dato y no adorno: sacarlo para respetar el cuadrado
   dejaría al visitante sin saber cuántas unidades tiene cargadas. Con el
   contador puesto y sin fondo, los dos flancos de la barra quedan casi
   iguales y el logo se lee centrado. */
.boton-carrito {
  display: inline-flex;
  align-items: center;
  gap: var(--espaciado-4);
  min-height: 44px;
  color: var(--color-text-primary);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* La palabra entra recién cuando hay ancho. */
.boton-carrito__texto {
  display: none;
}

/* La familia la hereda de .t-mono-label; acá solo hace falta que el
   contador no baile de ancho al pasar de [09] a [10]. */
.boton-carrito__contador {
  font-variant-numeric: tabular-nums;
}

/* --- Escritorio: una sola línea ------------------------------ */

@media (min-width: 1280px) {
  .cabecera__barra {
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: var(--espaciado-32);
    min-height: 72px;
  }

  .cabecera__hamburguesa {
    display: none;
  }

  .cabecera__logo {
    justify-self: start;
  }

  .cabecera__logo img {
    height: 30px;
  }

  .nav {
    display: block;
  }

  .cabecera__acciones {
    flex: 1 1 auto;
    gap: var(--espaciado-16);
  }

  .cabecera__cuenta {
    display: inline-flex;
  }

  .busqueda {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .busqueda__abrir {
    display: none;
  }

  .buscador {
    display: flex;
    width: 100%;
    max-width: 320px;
  }

  .boton-carrito {
    gap: var(--espaciado-8);
    padding-inline: var(--espaciado-16);
    background-color: var(--color-accent-base);
    color: var(--color-accent-on);
  }

  .boton-carrito:hover {
    background-color: var(--color-accent-hover);
  }

  .boton-carrito:active {
    background-color: var(--color-accent-pressed);
  }

  .boton-carrito__texto {
    display: inline;
  }
}

/* ============================================================
   Pie
   ============================================================ */

.pie {
  position: relative;
  margin-top: var(--espaciado-64);
  background-color: var(--color-bg-surface);
  border-top: var(--hairline) solid var(--color-border-subtle);
}

.pie__cuerpo {
  padding-block: var(--espaciado-40) var(--espaciado-24);
}

.pie__columnas {
  grid-template-columns: 1fr;
}

.pie__columna {
  padding: var(--espaciado-20) 0;
}

.pie__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--espaciado-12);
  color: var(--color-text-primary);
  margin-bottom: var(--espaciado-16);
}

.pie__letra {
  color: var(--color-accent-text);
}

.pie__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-8);
}

.pie__enlace {
  color: var(--color-text-secondary);
  transition: color 0.15s ease;
}

.pie__enlace:hover {
  color: var(--color-text-primary);
}

.pie__dato {
  color: var(--color-text-secondary);
}

.pie__regla {
  margin-top: var(--espaciado-24);
  padding-top: var(--espaciado-8);
  border-top: var(--hairline) solid var(--color-border-subtle);
}

@media (min-width: 640px) {
  .pie__columnas {
    grid-template-columns: repeat(2, 1fr);
  }

  .pie__columna {
    padding: var(--espaciado-24);
  }
}

@media (min-width: 1040px) {
  .pie__cuerpo {
    padding-block: var(--espaciado-64) var(--espaciado-32);
  }

  .pie__columnas {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Barra de legales --------------------------------------- */

.pie__legales {
  border-top: var(--hairline) solid var(--color-border-subtle);
  background-color: var(--color-bg-base);
}

.pie__legales-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaciado-16);
  padding-block: var(--espaciado-20);
}

/* Razón social y CUIT: por ley tienen que poder leerse. */
.pie__razon {
  color: var(--color-text-secondary);
}

.pie__legales-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaciado-16);
}

.pie__legal {
  color: var(--color-text-secondary);
  transition: color 0.15s ease;
}

.pie__legal:hover {
  color: var(--color-text-primary);
}

/* Obligatorio por ley y tiene que encontrarse a la primera. */
.pie__arrepentimiento {
  display: inline-block;
  padding: var(--espaciado-8) var(--espaciado-12);
  border: var(--hairline) solid var(--color-border-strong);
  color: var(--color-text-primary);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.pie__arrepentimiento:hover {
  border-color: var(--color-accent-text);
  color: var(--color-accent-text);
}

/* --- La marca sangrando por el borde inferior ---------------- */

.pie__marca {
  overflow: hidden;
  height: clamp(34px, 7vw, 96px);
  background-color: var(--color-bg-base);
  user-select: none;
  pointer-events: none;
}

/* Único texto del sitio fuera de la escala tipográfica, y a propósito:
   es una marca de agua a sangre que tiene que medir lo mismo que el ancho
   de la ventana. Ninguna clase de la escala puede ser fluida. La familia
   sí sale del token. */
.pie__marca span {
  display: block;
  font-family: var(--fuente-display);
  font-size: clamp(72px, 15vw, 208px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-text-primary);
  opacity: 0.08;
  transform: translateY(-0.19em);
}