/* ─── Secciones de Home ─── */

/* ─── Editorial Drop (Asymmetric) ─── */
.editorial-drop {
  padding: var(--space-xl) var(--space-md);
  max-width: 1440px;
  margin: 0 auto;
}

.editorial-drop__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  gap: 2rem;
}

.editorial-drop__title {
  font-family: var(--font-serif);
  font-size: var(--size-4xl);
  font-weight: 400;
  line-height: 1;
}
.editorial-drop__title em { font-style: italic; color: var(--color-dark-grey); }

.editorial-drop__cta {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-grey);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.editorial-drop__cta:hover { color: var(--color-black); border-color: var(--color-black); }

/* Grid asimétrico */
.editorial-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 1px;
  background: var(--color-off-black);
  min-height: 560px;
}

.editorial-card {
  position: relative;
  overflow: hidden;
  background: var(--color-off-black);
}

/* Card grande (izquierda) */
.editorial-card--main {
  grid-row: 1 / 3;
  aspect-ratio: 3 / 4;
}

/* Cards pequeñas (derecha) */
.editorial-card--secondary { aspect-ratio: 16 / 11; }

.editorial-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--dur-xslow) var(--ease);
}
.editorial-card:hover .editorial-card__img { transform: scale(1.03); }

.editorial-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0.15) 50%, transparent 75%);
  opacity: 0.45;
  transition: opacity var(--dur-slow) var(--ease);
}
.editorial-card:hover .editorial-card__overlay { opacity: 0.9; }

.editorial-card__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
  color: var(--color-bone);
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--dur-base) var(--ease);
}
.editorial-card:hover .editorial-card__info { transform: translateY(-4px); }

.editorial-card__drop {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sand);
  display: block;
  margin-bottom: 0.3rem;
}

.editorial-card__name {
  font-family: var(--font-serif);
  font-size: var(--size-xl);
  font-weight: 400;
}

.editorial-card__price {
  font-size: var(--size-sm);
  color: rgba(245,245,240,0.75);
  margin-top: 0.25rem;
  display: block;
}

/* ─── Lookbook (Horizontal Drag) ─── */
.lookbook {
  padding: var(--space-xl) 0 0;
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.lookbook__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--space-md) var(--space-md);
  gap: 2rem;
}

.lookbook__title {
  font-family: var(--font-serif);
  font-size: var(--size-3xl);
  font-weight: 400;
  line-height: 1.1;
}
.lookbook__title em { font-style: italic; color: var(--color-dark-grey); }

.lookbook__hint {
  font-size: var(--size-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.lookbook__track {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  cursor: grab;
  scrollbar-width: none;
  background: var(--color-off-black);
  padding: 0;
  height: clamp(480px, 62vh, 700px);
  align-items: stretch;
  overscroll-behavior-x: contain;
}
.lookbook__track::-webkit-scrollbar { display: none; }
.lookbook__track.is-dragging { cursor: grabbing; user-select: none; }

.lookbook__item {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: var(--color-off-black);
}

.lookbook__item:nth-child(odd)  { width: clamp(300px, 30vw, 460px); }
.lookbook__item:nth-child(even) { width: clamp(220px, 22vw, 340px); }

.lookbook__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--dur-xslow) var(--ease);
  pointer-events: none;
  display: block;
}
.lookbook__track:not(.is-dragging) .lookbook__item:hover img { transform: scale(1.04); }

.lookbook__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.55) 0%, transparent 45%);
  pointer-events: none;
}

.lookbook__item-label {
  position: absolute;
  bottom: 1.25rem; left: 1.25rem;
  z-index: 1;
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-bone);
  background: rgba(10,10,10,0.45);
  padding: 0.3rem 0.7rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  backdrop-filter: blur(4px);
}
.lookbook__track:not(.is-dragging) .lookbook__item:hover .lookbook__item-label {
  opacity: 1; transform: translateY(0);
}

/* ─── Brand Statement ─── */
.brand-statement {
  padding: var(--space-xl) var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
  border-top: 1px solid var(--border);
  max-width: 1440px;
  margin: 0 auto;
}

.brand-statement__text { display: flex; flex-direction: column; gap: 1.5rem; }

.brand-statement__eyebrow {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.brand-statement__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, var(--size-3xl));
  font-weight: 400;
  line-height: 1.2;
}
.brand-statement__quote em { font-style: italic; color: var(--color-dark-grey); }

.brand-statement__body {
  font-size: var(--size-base);
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 480px;
}

.brand-statement__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-sand);
}

.brand-statement__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-xslow) var(--ease);
}
.brand-statement__media:hover .brand-statement__img { transform: scale(1.03); }

/* ─── Values ─── */
.values {
  background: var(--color-off-black);
  color: var(--color-bone);
  padding: var(--space-xl) var(--space-md);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  border-top: 1px solid var(--border-dark);
}

.value-item { display: flex; flex-direction: column; gap: 1rem; padding: var(--space-sm) 0; }

.value-item__number {
  font-family: var(--font-serif);
  font-size: var(--size-4xl);
  font-weight: 400;
  color: var(--color-sand);
  line-height: 1;
  font-style: italic;
}

.value-item__title {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-bone);
}

.value-item__text {
  font-size: var(--size-sm);
  color: rgba(245,245,240,0.6);
  line-height: 1.8;
}

/* ─── Testimonios ─── */
.testimonials {
  background: var(--color-off-black);
  padding: var(--space-xl) var(--space-md);
  border-top: 1px solid var(--border-dark);
}

.testimonials__header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.testimonials__eyebrow {
  display: block;
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin-bottom: 0.75rem;
}

.testimonials__title {
  font-family: var(--font-serif);
  font-size: var(--size-3xl);
  font-weight: 400;
  color: var(--color-bone);
  line-height: 1.15;
}
.testimonials__title em { font-style: italic; color: var(--color-dark-grey); }

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-dark);
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-card {
  background: var(--color-off-black);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.testimonial-card__stars {
  color: var(--color-sand);
  font-size: var(--size-base);
  letter-spacing: 0.15em;
}

.testimonial-card__quote {
  font-family: var(--font-serif);
  font-size: var(--size-lg);
  font-weight: 400;
  color: var(--color-bone);
  line-height: 1.65;
  flex: 1;
}

.testimonial-card__author {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-dark);
}

.testimonial-card__name {
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--color-bone);
  letter-spacing: 0.05em;
}

.testimonial-card__location {
  font-size: var(--size-xs);
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .editorial-grid { grid-template-columns: 1fr; }
  .editorial-card--main { grid-row: auto; aspect-ratio: 4 / 5; }
  .brand-statement { grid-template-columns: 1fr; }
  .brand-statement__media { aspect-ratio: 3 / 2; order: -1; }
  .values { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Editorial */
  .editorial-drop { padding: var(--space-lg) var(--space-sm); }
  .editorial-drop__header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .editorial-drop__title { font-size: var(--size-3xl); }
  .editorial-card--main  { aspect-ratio: 3 / 4; }
  .editorial-card--secondary { aspect-ratio: 4 / 3; }

  /* Lookbook */
  .lookbook { padding-top: var(--space-lg); }
  .lookbook__header { padding: 0 var(--space-sm) var(--space-sm); flex-direction: column; gap: 0.5rem; }
  .lookbook__title { font-size: var(--size-2xl); }
  .lookbook__track { height: clamp(320px, 55vw, 460px); }
  .lookbook__item:nth-child(odd)  { width: clamp(200px, 72vw, 320px); }
  .lookbook__item:nth-child(even) { width: clamp(160px, 60vw, 260px); }
  .lookbook__item-label { opacity: 1; transform: translateY(0); }

  /* Brand Statement */
  .brand-statement { padding: var(--space-lg) var(--space-sm); gap: var(--space-md); text-align: center; }
  .brand-statement__text { align-items: center; }
  .brand-statement__body { max-width: 100%; }
  .brand-statement__media { aspect-ratio: 4 / 3; }

  /* Values */
  .values { padding: var(--space-lg) var(--space-sm); gap: var(--space-sm); }
  .value-item { text-align: center; align-items: center; }

  /* Testimonios */
  .testimonials { padding: var(--space-lg) var(--space-sm); }
  .testimonials__grid { grid-template-columns: 1fr; }
  .testimonials__title { font-size: var(--size-2xl); }
}