/* La portada (spec 5c). Celular primero: todo apilado; desde 768 px se acomoda como el
   boceto de Luca (docs/bocetos/referencias/landing-luca-v1.webp). */

/* --- Hero --- */

/* La foto del público va de fondo (hero__fondo) y todo lo demás encima, con un degradé
   oscuro en el medio para que el texto se lea sobre cualquier parte de la foto.
   En el celular, el hero ocupa justo la pantalla debajo del encabezado fijo y tiene tres
   zonas, una debajo de la otra: HENDRIX, las remeras, protagonistas
   (1fr: todo lo que sobra), y el texto, compacto (auto: lo que mida). */
.hero {
  position: relative;
  display: grid;
  grid-template-areas:
    "marca"
    "remeras"
    "texto";
  grid-template-rows: auto 1fr auto;
  min-height: calc(100svh - var(--alto-encabezado-celular));
  padding: 16px var(--espacio) 20px;
  overflow: hidden;
  background: var(--color-fondo);
  border-bottom: 3px solid var(--color-acento);
}

.hero__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Abajo, donde va el texto en el celular, más oscuro; arriba se ve el público. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-fondo-tapa) 35%, var(--color-fondo-transparente));
}

/* El texto, las remeras y el rayo, por encima de la foto y del degradé. */
.hero__marca,
.hero__texto,
.hero__remeras,
.hero__rayo {
  z-index: 1;
}

/* --- Las tres remeras: profundidad con tamaño, giro y sombra ---
   Las tres con el mismo filtro (la misma sombra), así se ven del mismo color. La de
   adelante es más grande y derecha; las de atrás, más chicas, giradas hacia afuera y
   tapadas en parte. En el celular van entre HENDRIX y el texto; en la compu, a la
   derecha. */
.hero__remeras {
  grid-area: remeras;
  position: relative;
  /* Una caja de proporción fija (8 de ancho por 7 de alto): las remeras se ubican en % de su
     ancho, así que al achicarse la caja se achica todo junto y nada se sale. */
  aspect-ratio: 8 / 7;
  /* El ancho sale del alto que queda libre (100svh: lo visible, sin la barra del navegador)
     después del encabezado y del texto; × 8 / 7 pasa de alto a ancho. Así el hero entero
     entra al abrir la página, también en celulares bajos. */
  width: clamp(
    180px,
    (100svh - var(--alto-encabezado-celular) - var(--hero-texto-celular)) * 8 / 7,
    min(100%, 500px)
  );
  justify-self: center;
  align-self: center;
  /* Aire entre la remera de adelante y la frase de abajo, para que no queden pegadas. */
  margin-bottom: 12px;
}

/* Un resplandor rojo detrás de la de adelante: la separa del fondo. */
.hero__remeras::before {
  content: "";
  position: absolute;
  inset: 0 5% -10%;
  background: radial-gradient(closest-side, var(--color-acento-brillo), transparent);
}

.hero__remera {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 20px 24px var(--color-velo-oscuro));
}

.hero__remera--izquierda,
.hero__remera--derecha {
  top: 4%;
  width: 50%;
}

/* En el celular, abiertas hasta el borde para que se vean; en la compu, más juntas. */
.hero__remera--izquierda {
  left: 0;
  transform: rotate(-14deg);
}

.hero__remera--derecha {
  right: 0;
  transform: rotate(12deg);
}

.hero__remera--frente {
  bottom: 0;
  left: 12%;
  width: 76%;
  transform: rotate(-2deg);
}

/* En la compu la caja es más ancha que alta: las de atrás un poco más chicas y más juntas,
   y la de adelante también más chica, para que no tape a las otras dos. */
@media (min-width: 768px) {
  .hero__remera--izquierda,
  .hero__remera--derecha {
    width: 46%;
  }

  .hero__remera--izquierda {
    left: 4%;
  }

  .hero__remera--derecha {
    right: 4%;
  }

  .hero__remera--frente {
    left: 17%;
    width: 66%;
  }
}

.hero__texto {
  grid-area: texto;
  position: relative;
}

/* "HENDRIX" grande y espaciado: el nombre de la tienda es lo primero que se lee. En el
   celular va centrado arriba de las remeras, entre dos rayas rojas; en la compu, arriba de
   la frase, con una raya roja antes. */
.hero__marca {
  grid-area: marca;
  justify-self: center;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 8px;
  /* El espaciado de letras deja aire después de la última X: esto lo compensa, así queda
     centrado de verdad. */
  margin-right: -0.2em;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.8rem, 8vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero__marca::before,
.hero__marca::after {
  content: "";
  flex-shrink: 0;
  width: clamp(32px, 6vw, 56px);
  height: 5px;
  background: var(--color-acento);
}

/* En el celular, la frase en una sola línea, de borde a borde: el ancho disponible (la
   pantalla menos los dos márgenes) dividido lo que mide la frase en letras da un tamaño
   que entra justo. */
.hero__titulo {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: calc((100vw - 2 * var(--espacio)) / var(--hero-frase-proporcion));
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
  white-space: nowrap;
}

/* En el celular el rojo va en "rock"; en la compu, en "su lugar" (más abajo). */
.hero__titulo-rock {
  color: var(--color-acento);
}

.hero__bajada {
  margin: 6px 0 14px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* "nacional e internacional": en el celular no entra en una línea; aparece en la compu. */
.hero__bajada-extra {
  display: none;
}

.hero__boton {
  display: inline-block;
  padding-inline: 32px;
  font-family: var(--fuente-titulos);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Talles y envíos: en fila, y si no entran, uno debajo del otro. */
.hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero__datos li {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Un tilde rojo dibujado con dos bordes de una caja girada: no es texto, así el lector de
   pantalla no lo lee. */
.hero__datos li::before {
  content: "";
  width: 6px;
  height: 12px;
  margin-top: -4px;
  border-right: 3px solid var(--color-acento);
  border-bottom: 3px solid var(--color-acento);
  transform: rotate(45deg);
}

/* El rayo del kit: decoración pura (alt=""), arriba a la derecha. */
.hero__rayo {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: auto;
  pointer-events: none;
}

@media (min-width: 768px) {
  /* Dos columnas: a la izquierda HENDRIX y, debajo, el texto; a la derecha las remeras,
     ocupando las dos filas. */
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "marca remeras"
      "texto remeras";
    grid-template-rows: auto auto;
    column-gap: 32px;
    align-content: center;
    min-height: 560px;
    padding: 64px max(var(--espacio), calc((100% - 1200px) / 2));
  }

  .hero::after {
    background: linear-gradient(
      90deg,
      var(--color-fondo-tapa) 30%,
      var(--color-fondo-transparente) 75%
    );
  }

  .hero__texto {
    align-self: start;
    max-width: 560px;
  }

  .hero__marca {
    justify-self: start;
    align-self: end;
    margin-right: 0;
  }

  .hero__marca::after {
    display: none;
  }

  /* La frase en dos líneas, con "su lugar" abajo y en rojo.
     clamp(mínimo, ideal, máximo): crece con el ancho de la pantalla, sin pasarse. */
  .hero__titulo {
    font-size: clamp(2.6rem, 9vw, 6.5rem);
    white-space: normal;
  }

  .hero__titulo-rock {
    color: inherit;
  }

  .hero__titulo-lugar {
    display: block;
    color: var(--color-acento);
  }

  .hero__bajada {
    margin: 8px 0 16px;
    font-size: 1.15rem;
  }

  .hero__bajada-extra {
    display: inline;
  }

  .hero__datos {
    font-size: 1rem;
  }

  .hero__remeras {
    /* En la compu, una caja cuadrada: hay más alto disponible al lado del texto. Mide lo que
       queda de pantalla después de la reserva (encabezado, aire y el pedacito de
       categorías). Como máximo, el ancho de su columna. */
    aspect-ratio: 1;
    width: clamp(400px, 100svh - var(--hero-reserva-compu), 100%);
    margin-bottom: 0;
  }

  .hero__rayo {
    top: 40px;
    right: max(var(--espacio), calc((100% - 1200px) / 2));
    width: 48px;
  }
}

/* --- Secciones --- */

.portada-seccion {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px var(--espacio) 0;
}

.portada-seccion__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio);
}

.portada-seccion__titulo {
  margin: 0 0 var(--espacio);
  font-family: var(--fuente-titulos);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.portada-seccion__mas {
  color: var(--color-texto);
  font-weight: 600;
  text-underline-offset: 4px;
  white-space: nowrap;
}

/* --- Categorías: una debajo de la otra en el celular, de a tres desde 768 px --- */

.categorias {
  display: grid;
  gap: 12px;
}

@media (min-width: 768px) {
  .categorias {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio);
  }
}

.categoria {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  color: var(--color-texto);
  text-decoration: none;
}

.categoria__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Un degradé oscuro abajo, donde va el nombre, para que se lea sobre cualquier foto. */
.categoria::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-velo-oscuro) 15%, transparent 60%);
}

.categoria__nombre {
  position: absolute;
  left: 20px;
  /* Deja libre el lugar de la flecha (40 px más sus 16 px de borde, y aire): si el texto
     no entra, baja de renglón en vez de pasar por abajo de la flecha. */
  right: 72px;
  bottom: 16px;
  z-index: 1;
  font-family: var(--fuente-titulos);
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
}

/* De a tres, cada tarjeta es más angosta: "INTERNACIONAL" tiene que entrar. */
@media (min-width: 768px) {
  .categoria__nombre {
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  }
}

.categoria__nombre span {
  display: block;
  color: var(--color-acento);
}

.categoria__flecha {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-texto);
  font-size: 1.4rem;
}

.categoria:hover .categoria__imagen {
  transform: scale(1.04);
}

.categoria:hover .categoria__flecha {
  border-color: var(--color-acento);
  background: var(--color-acento);
}

/* --- Novedades --- */

.novedades__boton {
  width: fit-content;
  margin: 24px auto 0;
  padding-inline: 40px;
  font-family: var(--fuente-titulos);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- El local --- */

.local {
  margin-top: 48px;
  padding: 40px var(--espacio);
  background:
    radial-gradient(circle at 90% 10%, var(--color-acento-tenue), transparent 40%),
    var(--color-superficie);
  border-top: 3px solid var(--color-acento);
  text-align: center;
}

.local__titulo {
  margin: 0 0 8px;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
}

.local__horarios {
  margin: 0 0 12px;
  color: var(--color-texto-suave);
  font-weight: 600;
}

.local__texto {
  max-width: 34em;
  margin: 0 auto 20px;
  font-size: 1.1rem;
}

/* WhatsApp e Instagram: lado a lado y centrados; si no entran, uno debajo del otro. */
.local__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.local__boton {
  padding-inline: 32px;
  font-family: var(--fuente-titulos);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Buscá tu banda: círculos con logo. 4 por fila en el celular (se ven los primeros 8);
   en la compu, todos en una fila si entran --- */

.logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

/* En el celular, del noveno en adelante no se muestran: dos filas de 4 se ven parejas.
   Las demás bandas se encuentran con el buscador o en Ver todas las bandas. */
.logos li:nth-child(n + 9) {
  display: none;
}

@media (min-width: 768px) {
  .logos {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  }

  .logos li:nth-child(n + 9) {
    display: block;
  }
}

.logos__enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--color-texto);
  text-align: center;
  text-decoration: none;
}

.logos__imagen {
  width: 100%;
  max-width: 96px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.logos__nombre {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.15;
}

.logos__enlace:hover .logos__imagen {
  transform: scale(1.06);
}

.logos__enlace:hover .logos__nombre {
  color: var(--color-acento);
}

/* Créditos de las fotos: chicos, al final, pero legibles (contraste del texto suave). */
.creditos {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px var(--espacio) 0;
  color: var(--color-texto-suave);
  font-size: var(--tamano-texto-nota);
}

.creditos a {
  color: inherit;
}