/* Estructura que se repite en todas las páginas: barra de anuncio, cabecera y pie. */

/* ---- Barra de anuncio: discreta, para que el verde lima quede como acento ---- */
.anuncio { background: var(--grafito-profundo); color: #B9BEC2; font-size: 0.75rem; letter-spacing: 0.02em; text-align: center; padding: 0.45rem var(--espacio-2); }
.anuncio p { margin: 0; }
.anuncio strong { color: var(--lima); font-weight: 600; }

/* ---- Cabecera ---- */
.cabecera { background: var(--grafito); color: var(--blanco-calido); }
.cabecera__fila {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "logo carrito" "busqueda busqueda";
  align-items: center;
  gap: var(--espacio-1) var(--espacio-2);
  padding-top: var(--espacio-2);
  padding-bottom: var(--espacio-2);
}

.logo { grid-area: logo; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; margin: 0; justify-self: start; }
.logo__marca { color: var(--lima); flex: none; }
.logo__texto { font: 800 1.375rem var(--fuente-titulos); letter-spacing: 0.06em; line-height: 1; }
.logo__texto span { color: var(--lima); }

.busqueda { grid-area: busqueda; display: flex; }
.busqueda input {
  flex: 1; min-width: 0; min-height: var(--alto-toque);
  padding: 0 var(--espacio-2);
  border: 1px solid rgba(246, 246, 242, 0.16); border-right: 0; border-radius: var(--radio) 0 0 var(--radio);
  font: 1rem var(--fuente-texto); color: var(--blanco-calido); background: var(--grafito-claro);
}
.busqueda input::placeholder { color: #9AA0A5; }
.busqueda input:focus { border-color: var(--lima); outline: none; }
.busqueda input:focus-visible { outline: 2px solid var(--lima); outline-offset: 0; }
.busqueda__boton {
  min-width: var(--alto-toque); border: 0; border-radius: 0 var(--radio) var(--radio) 0;
  background: var(--lima); color: var(--grafito); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.busqueda__boton:hover { background: #B5E652; }

.carrito-enlace {
  grid-area: carrito; display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: var(--alto-toque); color: var(--blanco-calido); text-decoration: none;
}
.carrito-enlace__icono { position: relative; display: inline-flex; width: var(--alto-toque); height: var(--alto-toque); align-items: center; justify-content: center; }
.carrito-enlace__texto { display: none; flex-direction: column; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.carrito-enlace__total { font-weight: 400; color: #B9BEC2; }
.carrito-enlace:hover .carrito-enlace__icono { color: var(--lima); }
.insignia {
  position: absolute; top: 0.1rem; right: 0.1rem; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lima); color: var(--grafito); border-radius: 999px; font-size: 0.75rem; font-weight: 700;
}

/* ---- Categorías: rótulos en mayúsculas, con subrayado verde lima en la activa ---- */
.categorias { border-top: 1px solid rgba(246, 246, 242, 0.12); }
.categorias ul { display: flex; flex-wrap: wrap; gap: 0 var(--espacio-3); }
.categorias a {
  display: inline-flex; align-items: center; min-height: var(--alto-toque);
  color: var(--blanco-calido); text-decoration: none; font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.07em; text-transform: uppercase;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
.categorias a:hover { border-bottom-color: rgba(246, 246, 242, 0.5); }
.categorias a[aria-current="page"] { border-bottom-color: var(--lima); }
.categorias li:last-child a { color: var(--lima); }
.cabecera :focus-visible, .pie :focus-visible { outline-color: var(--lima); }

@media (max-width: 23.9375rem) {
  .categorias ul { gap: 0 var(--espacio-2); }
  .categorias a { font-size: 0.75rem; letter-spacing: 0.04em; }
}

@media (min-width: 48rem) {
  .cabecera { position: sticky; top: 0; z-index: 50; }
  .cabecera__fila {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo busqueda carrito";
    gap: var(--espacio-4);
  }
  .logo__texto { font-size: 1.5rem; }
  .busqueda { max-width: 40rem; width: 100%; justify-self: center; }
  .carrito-enlace__texto { display: flex; }
}

/* ---- Pie de página ---- */
.pie { background: var(--grafito-profundo); color: var(--blanco-calido); margin-top: var(--espacio-4); padding: var(--espacio-4) 0 var(--espacio-3); }
.pie__cuerpo { display: grid; gap: var(--espacio-3); grid-template-columns: 1fr 1fr; }
.pie__cuerpo > div { grid-column: 1 / -1; }
.pie .logo__texto { font-size: 1.25rem; }
.pie__titulo { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--lima); margin-bottom: var(--espacio-1); }
.pie li a { display: inline-block; padding: 0.25rem 0; color: var(--blanco-calido); }
.pie__aviso { margin-top: var(--espacio-3); padding-top: var(--espacio-2); border-top: 1px solid rgba(246, 246, 242, 0.15); font-size: 0.8125rem; color: #B9BEC2; }
@media (min-width: 48rem) {
  .pie__cuerpo { grid-template-columns: 2fr 1fr 1fr; }
  .pie__cuerpo > div { grid-column: auto; }
}

.aviso-js { margin: var(--espacio-2); padding: var(--espacio-2); background: var(--lima); border-radius: var(--radio); }
.cargando { padding-top: var(--espacio-4); color: var(--acero-oscuro); }