.results {
  position: relative;
  isolation: isolate;
  padding: 38px 35px 75px;
  scroll-margin-top: 28px;
}
.results::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -24px;
  background: var(--ivory) url('assets/resultados-background-optimized.webp') center / cover no-repeat;
  mask-image: linear-gradient(transparent, #000 12%, #000 85%, transparent);
  pointer-events: none;
}
.results-intro { text-align: center; max-width: 1000px; margin: 0 auto 28px; }
.results .eyebrow { font-size: 15px; letter-spacing: .4em; margin: 0 0 12px; }
.results h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(43px, 5.05vw, 78px);
  line-height: 1.04;
  letter-spacing: -.055em;
  margin: 0 0 16px;
}
.results h2 em { display: block; color: var(--gold); font-weight: 400; }
.results-support { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.5; margin: 0; letter-spacing: .015em; }
.results-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, .9fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  height: clamp(660px, 55vw, 880px);
}
.result-photo { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-width: 0; min-height: 0; margin: 0; }
.result-photo img { display: block; width: 100%; height: 100%; min-height: 0; border-radius: 10px; object-fit: cover; }
.result-photo figcaption { text-align: center; font-family: 'Playfair Display', Georgia, serif; font-size: 21px; line-height: 1.3; }
.result-hair { grid-column: 1; grid-row: 1 / span 2; }
@media (min-width: 1001px) {
  .result-hair { grid-row: 1; }
  .result-morena { grid-column: 1; grid-row: 2; }
}
.result-hair img { object-position: center; }
.result-lashes { grid-column: 2; grid-row: 1; }
.result-lashes img { object-position: center 22%; }
.result-hairstyle { grid-column: 2; grid-row: 2; }
.result-hairstyle img { object-position: 43% top; }
.result-pink { grid-column: 3; grid-row: 1; }
.result-lilac { grid-column: 3; grid-row: 2; }
/* Keep every nail and its original shape visible in these portrait sources. */
.result-pink img, .result-lilac img { object-fit: contain; width: auto; max-width: 100%; justify-self: center; }
.results-action { display: flex; justify-content: center; margin-top: 24px; }
.results-esthetics { margin-top: clamp(36px, 4vw, 56px); padding-block: 28px; border-block: 1px solid #a87b4038; text-align: center; }
.results-esthetics h3 { margin: 0; font: 400 clamp(25px, 3vw, 40px)/1.3 'Playfair Display', Georgia, serif; color: var(--brown); letter-spacing: -.025em; overflow-wrap: break-word; }
.results-cta { max-width: 100%; text-decoration: none; white-space: normal; line-height: 1.4; text-align: center; padding: 15px 32px; font-size: 19px; }
.results-cta svg { flex: 0 0 31px; }
@media (max-width: 1190px) {
  .results { padding: 35px 10px 65px; }
  .results-gallery { gap: 16px; height: 600px; }
  .results h2 { font-size: clamp(43px, 5.5vw, 64px); }
  .result-photo figcaption { font-size: 18px; }
}
@media (max-width: 900px) {
  .results-gallery { height: 570px; gap: 14px; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, .9fr); }
  .results .eyebrow { font-size: 12px; }
  .result-photo figcaption { font-size: 16px; }
  .results-cta { font-size: 17px; }
}
@media (max-width: 1000px) {
  .results { padding: 30px 0 60px; }
  .results-intro { margin-bottom: 26px; }
  .results h2 { font-size: clamp(39px, 9.5vw, 58px); line-height: 1.1; margin-bottom: 20px; }
  .results .eyebrow { font-size: 11px; margin-bottom: 16px; }
  .results-support { font-size: 18px; line-height: 1.5; letter-spacing: 0; }
  .results-gallery { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 24px 16px; }
  .result-photo { display: flex; flex-direction: column; grid-column: auto; grid-row: auto; gap: 9px; }
  .result-hair { grid-column: 1 / -1; }
  .result-photo img { width: 100%; max-width: 100%; height: auto; object-fit: contain; border-radius: 9px; }
  .result-photo figcaption { font-size: 18px; }
  .results-action { margin-top: 30px; }
  .results-cta { font-size: 17px; padding: 16px 24px; }
}
@media (max-width: 640px) { .results::before { inset-inline: -20px; } }
@media (max-width: 420px) {
  .results-gallery { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .results-cta { width: 100%; padding: 16px 18px; font-size: 16px; }
}
/* Seven results now share a consistent frame and follow the reading order. */
.results-gallery { height: auto; grid-template-rows: none; }
.results-gallery .result-photo { display: flex; flex-direction: column; grid-column: auto; grid-row: auto; gap: 10px; }
.results-gallery .result-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; }
.results-gallery .result-hairstyle img { object-position: 50% 25%; }
.results-gallery .result-pink img, .results-gallery .result-lilac img { object-fit: contain; }