/* ==========================================================================
   Home — Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__imagen--marcador {
  background:
    linear-gradient(180deg, rgba(27,35,30,0.05), rgba(27,35,30,0.55)),
    repeating-linear-gradient(135deg, var(--color-piedra-oscura) 0 2px, var(--color-piedra) 2px 14px);
}

.hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,35,30,0.05) 40%, rgba(27,35,30,0.75) 100%);
}

.hero__contenido {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-6);
  color: var(--color-blanco);
}

.hero__titulo {
  color: var(--color-blanco);
  font-size: clamp(3.5rem, 9vw, var(--text-5xl));
  letter-spacing: 0.04em;
}
.hero__subtitulo {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--text-lg);
  max-width: 32ch;
  margin-bottom: var(--space-3);
  opacity: 0.95;
}

.hero__ctas {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.boton--sobre-foto {
  border-color: var(--color-blanco);
  color: var(--color-blanco);
}
.boton--sobre-foto:hover { background: var(--color-blanco); color: var(--color-noche); }

.hero__curva {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  filter: invert(1);
}

/* ==========================================================================
   Filosofía
   ========================================================================== */
.filosofia__interior {
  max-width: 46rem;
}
.filosofia__interior h2 { margin-bottom: var(--space-3); }
.filosofia__interior p:last-of-type { font-style: italic; }

/* ==========================================================================
   Categorías
   ========================================================================== */
.categorias__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.categoria-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: block;
  border: 1px solid var(--color-piedra-oscura);
}

.categoria-card__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.categoria-card:hover .categoria-card__imagen { transform: scale(1.04); }

.categoria-card__imagen--marcador {
  background: repeating-linear-gradient(135deg, var(--color-piedra-oscura) 0 2px, var(--color-piedra) 2px 14px);
}

.categoria-card::before {
  /* Franja de acento de la línea de producto: color como identificador, no como fondo. */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--color-linea);
  z-index: 2;
}

.categoria-card__etiqueta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--space-2);
  background: linear-gradient(0deg, rgba(27,35,30,0.85), transparent);
  color: var(--color-blanco);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.categoria-card__nombre {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.05em;
}
.categoria-card__frase {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--text-sm);
  opacity: 0.9;
}

@media (max-width: 900px) {
  .categorias__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .categorias__grid { grid-template-columns: 1fr; }
  .categoria-card { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   Productos destacados
   ========================================================================== */
.destacados__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.destacados__cabecera a { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 560px) {
  .destacados__cabecera { align-items: flex-start; flex-direction: column; }
}