/** Shopify CDN: Minification failed

Line 7009:0 Expected "}" to go with "{"

**/
/* ============================================================
   SKINOLOGY — Brand Design System
   Premium Skincare / Editorial Aesthetic
   ============================================================ */

/* ── 1. BRAND CSS CUSTOM PROPERTIES ─────────────────────── */
:root {
  /* Paleta SKINOLOGY */
  --sk-ivory:   #FAF9F7;
  --sk-dark:    #1C1C1C;
  --sk-beige:   #E8E0D5;
  --sk-taupe:   #C5B9A8;
  --sk-accent:  #8B7355;
  --sk-deep:    #3D3028;
  --sk-muted:   #6B6057;
  --sk-light:   #F4F0EA;
  --sk-white:   #FFFFFF;
  --sk-charcoal:#262626;

  /* Tipografía */
  --sk-font-serif: var(--font-heading--family, 'Playfair Display', Georgia, serif);
  --sk-font-sans:  var(--font-body--family, 'Archivo', system-ui, sans-serif);

  /* Espaciado editorial */
  --sk-space-xs:  0.75rem;
  --sk-space-sm:  1.5rem;
  --sk-space-md:  3rem;
  --sk-space-lg:  5rem;
  --sk-space-xl:  8rem;
  --sk-space-2xl: 12rem;

  /* Transiciones */
  --sk-ease:      0.3s ease;
  --sk-ease-slow: 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Anchos */
  --sk-max:       1320px;
  --sk-text-max:  680px;
  --sk-narrow:    480px;

  /* Eyebrow */
  --sk-eyebrow-size:    0.6875rem;
  --sk-eyebrow-spacing: 0.18em;

  /* Márgenes laterales escritorio */
  --sk-page-margin: clamp(2rem, 3.5vw, 4.5rem);
}

/* ── 2. TIPOGRAFÍA GLOBAL ────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sk-font-serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ── 3. BOTONES GLOBALES ─────────────────────────────────── */
.sk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--sk-ease), color var(--sk-ease), border-color var(--sk-ease);
  white-space: nowrap;
}

.sk-btn--primary {
  background: var(--sk-dark);
  color: var(--sk-ivory);
  border-color: var(--sk-dark);
}
.sk-btn--primary:hover {
  background: var(--sk-deep);
  border-color: var(--sk-deep);
}

.sk-btn--outline {
  background: transparent;
  color: var(--sk-dark);
  border-color: var(--sk-dark);
}
.sk-btn--outline:hover {
  background: var(--sk-dark);
  color: var(--sk-ivory);
}

.sk-btn--outline-light {
  background: transparent;
  color: var(--sk-ivory);
  border-color: var(--sk-ivory);
}
.sk-btn--outline-light:hover {
  background: var(--sk-ivory);
  color: var(--sk-dark);
}

/* ── 4. UTILITIES ────────────────────────────────────────── */
.sk-eyebrow {
  display: block;
  font-family: var(--sk-font-sans);
  font-size: var(--sk-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--sk-eyebrow-spacing);
  text-transform: uppercase;
  color: var(--sk-accent);
  margin-bottom: 1rem;
}

.sk-section-header {
  margin-bottom: var(--sk-space-md);
}

.sk-section-header--centered {
  text-align: center;
  max-width: var(--sk-text-max);
  margin-inline: auto;
  margin-bottom: var(--sk-space-md);
}

/* Scroll reveal base */
.sk-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.sk-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .sk-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── 5. HERO SECTION ─────────────────────────────────────── */
.sk-hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--sk-beige);
}

.sk-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sk-hero__media img,
.sk-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.sk-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sk-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--sk-max);
  margin-inline: auto;
  padding: var(--sk-space-xl) var(--sk-space-sm) var(--sk-space-lg);
  display: flex;
  justify-content: flex-start;
}

.sk-hero .sk-reveal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 720px;
  margin-left: 0;
  margin-right: auto;
}

.sk-hero .sk-eyebrow {
  margin-bottom: 0.15rem;
  text-align: left;
}

.sk-hero__heading {
  font-size: clamp(1.875rem, 4.5vw, 4.125rem);
  color: var(--sk-ivory);
  max-width: none;
  margin-top: 0;
  margin-bottom: 1.25rem;
  text-align: left;
  line-height: 1.12;
}

.sk-hero__subheading {
  font-family: var(--sk-font-sans);
  font-size: clamp(0.85rem, 1.25vw, 1.05rem);
  color: rgba(250, 249, 247, 0.85);
  max-width: 46ch;
  line-height: 1.7;
  margin-bottom: var(--sk-space-sm);
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

.sk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-start;
}

@media (max-width: 749px) {
  .sk-hero__heading {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
  }
  .sk-hero__content {
    padding-inline: 1.25rem;
    padding-bottom: var(--sk-space-md);
    justify-content: flex-start;
  }
  .sk-hero .sk-reveal {
    align-items: flex-start;
    text-align: left;
  }
}

/* ── 6. TRUST BAR ────────────────────────────────────────── */
.sk-trust-bar {
  background: var(--sk-ivory);
  border-top: 1px solid var(--sk-beige);
  border-bottom: 1px solid var(--sk-beige);
}

.sk-trust-bar__inner {
  max-width: var(--sk-max);
  margin-inline: auto;
  padding: 1.125rem var(--sk-space-sm);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sk-space-sm);
  align-items: center;
}

.sk-trust-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.875rem;
  padding-inline-end: var(--sk-space-sm);
}

.sk-trust-item + .sk-trust-item {
  border-left: 1px solid var(--sk-beige);
  padding-inline-start: var(--sk-space-sm);
}

.sk-trust-item__icon {
  width: 63px;
  height: 63px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.sk-trust-item__icon img {
  width: 100%;
  height: 100%;
  max-width: 63px;
  max-height: 63px;
  object-fit: contain;
  display: block;
}

.sk-trust-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
}

.sk-trust-item__number {
  display: none;
}

.sk-trust-item__title {
  font-family: var(--sk-font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sk-dark);
  line-height: 1.25;
  margin: 0;
}

.sk-trust-item__desc {
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  color: var(--sk-muted);
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 989px) and (min-width: 750px) {
  .sk-trust-bar__inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .sk-trust-item:nth-child(3) {
    border-left: none;
    padding-inline-start: 0;
  }
}

@media (max-width: 749px) {
  .sk-trust-bar__inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem 0.5rem !important;
    padding: 0.85rem 0.75rem !important;
  }
  .sk-trust-item {
    gap: 0.5rem !important;
    padding: 0 !important;
  }
  .sk-trust-item + .sk-trust-item {
    border-left: none !important;
    padding-inline-start: 0 !important;
    border-top: none !important;
    padding-top: 0 !important;
  }
  .sk-trust-item__icon {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
  }
  .sk-trust-item__icon img {
    max-width: 38px !important;
    max-height: 38px !important;
  }
  .sk-trust-item__title {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
  }
  .sk-trust-item__desc {
    font-size: 0.6875rem !important;
    line-height: 1.3 !important;
  }
}

/* ── 7. SPECIALIST SECTION & BANNER ──────────────────────── */
.sk-specialist {
  background: var(--sk-ivory);
  position: relative;
}

.sk-specialist__banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 520px;
  background: var(--sk-charcoal);
}

.sk-specialist__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.sk-specialist__media img,
.sk-specialist__media picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
  transition: transform var(--sk-ease-slow);
}

.sk-specialist__banner:hover .sk-specialist__media img {
  transform: scale(1.015);
}

.sk-specialist__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(20, 18, 16, 0.72) 0%, rgba(20, 18, 16, 0) 55%),
    linear-gradient(to right, rgba(20, 18, 16, 0) 0%, rgba(20, 18, 16, 0.08) 30%, rgba(20, 18, 16, 0.6) 65%, rgba(20, 18, 16, 0.82) 85%, rgba(20, 18, 16, 0.9) 100%);
}

.sk-specialist__banner .sk-specialist__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--sk-max);
  margin-inline: auto;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: clamp(1.5rem, 4vh, 3.5rem) var(--sk-space-sm);
  box-sizing: border-box;
}

.sk-specialist__banner .sk-specialist__content {
  max-width: 540px;
  width: 100%;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding-inline: 0;
}

.sk-specialist__banner .sk-specialist__content .sk-eyebrow {
  color: rgba(250, 249, 247, 0.75);
  margin-bottom: 0.35rem;
  letter-spacing: 0.12em;
  text-align: right;
}

.sk-specialist__banner .sk-specialist__heading {
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--sk-ivory);
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 1rem;
  text-wrap: balance;
  text-align: right;
}

.sk-specialist__banner .sk-specialist__body {
  font-family: var(--sk-font-sans);
  font-size: clamp(0.9375rem, 1.2vw, 1.05rem);
  line-height: 1.65;
  color: rgba(250, 249, 247, 0.88);
  max-width: 48ch;
  margin-bottom: 1.5rem;
  text-align: right;
}

.sk-specialist__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.sk-specialist__banner .sk-btn {
  background: var(--sk-ivory);
  color: var(--sk-charcoal);
  border-color: var(--sk-ivory);
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: all var(--sk-ease);
}

.sk-specialist__banner .sk-btn:hover {
  background: transparent;
  color: var(--sk-ivory);
  border-color: var(--sk-ivory);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

/* Two-column layout for About Story pages */
.sk-specialist__inner {
  max-width: var(--sk-max);
  margin-inline: auto;
  padding: var(--sk-space-xl) var(--sk-space-sm);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sk-space-lg);
  align-items: center;
}

.sk-specialist__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.sk-specialist__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sk-ease-slow);
}

.sk-specialist__image-wrap:hover img {
  transform: scale(1.02);
}

.sk-specialist__content {
  padding-inline: var(--sk-space-sm);
}

.sk-specialist__heading {
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: 1.25rem;
}

.sk-specialist__body {
  font-family: var(--sk-font-sans);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--sk-muted);
  max-width: 46ch;
  margin-bottom: var(--sk-space-sm);
}

@media (max-width: 749px) {
  .sk-specialist__banner {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    height: auto !important;
    position: relative !important;
    background: #242220 !important;
    overflow: hidden !important;
  }
  .sk-specialist__media {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 380px !important;
    overflow: hidden !important;
    background: #DDDBD4 !important;
  }
  .sk-specialist__media img,
  .sk-specialist__media picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: left bottom !important;
    display: block !important;
  }
  .sk-specialist__overlay {
    display: none !important;
  }
  .sk-specialist__banner .sk-specialist__inner {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    padding: 1.75rem 1.25rem 2.25rem !important;
    background: #242220 !important;
    box-sizing: border-box !important;
    display: block !important;
  }
  .sk-specialist__banner .sk-specialist__content {
    max-width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .sk-specialist__banner .sk-specialist__content .sk-eyebrow {
    color: #898C79 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 0.4rem !important;
  }
  .sk-specialist__banner .sk-specialist__heading {
    font-size: clamp(1.55rem, 6.5vw, 2rem) !important;
    color: #F0F1F3 !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
    text-align: left !important;
  }
  .sk-specialist__banner .sk-specialist__body {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: #DDDBD4 !important;
    margin-bottom: 1.35rem !important;
    text-align: left !important;
    max-width: 100% !important;
  }
  .sk-specialist__actions {
    width: 100% !important;
  }
  .sk-specialist__banner .sk-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    padding-block: 0.85rem !important;
  }
  .sk-specialist__inner {
    grid-template-columns: 1fr;
    gap: var(--sk-space-md);
    padding-block: var(--sk-space-md);
  }
  .sk-specialist__content {
    padding-inline: 0;
  }
}

/* ── 8. TWO PATHS ────────────────────────────────────────── */
.sk-two-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  background: #ffffff;
  padding: clamp(1.5rem, 4vh, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  box-sizing: border-box;
}

.sk-path-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.5rem, 3.5vh, 2.5rem);
  min-height: 50vh;
  text-decoration: none;
  border-radius: 16px;
  background: var(--sk-charcoal);
  box-shadow: 0 6px 20px rgba(28, 28, 28, 0.08);
  transition: transform 0.4s var(--sk-ease), box-shadow 0.4s var(--sk-ease);
}

.sk-path-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(28, 28, 28, 0.16);
}

.sk-path-card__media {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
}

.sk-path-card__media img,
.sk-path-card__media picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  filter: brightness(0.9) contrast(1.05);
  transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.4s var(--sk-ease);
}

.sk-path-card:hover .sk-path-card__media img,
.sk-path-card:hover .sk-path-card__media picture img {
  transform: scale(1.04);
  filter: brightness(0.84) contrast(1.08);
}

.sk-path-card__overlay {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(20, 18, 16, 0.82) 0%, rgba(20, 18, 16, 0.42) 45%, rgba(20, 18, 16, 0.08) 75%, transparent 100%),
    linear-gradient(to bottom, rgba(20, 18, 16, 0.22) 0%, transparent 40%);
  transition: opacity var(--sk-ease);
}

.sk-path-card:hover .sk-path-card__overlay {
  opacity: 0.95;
}

.sk-path-card__content {
  position: relative;
  z-index: 1;
  color: var(--sk-ivory);
}

.sk-path-card__eyebrow {
  font-family: var(--sk-font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 249, 247, 0.8);
  margin-bottom: 0.4rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.sk-path-card__heading {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  color: var(--sk-ivory);
  margin-bottom: 0.65rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  line-height: 1.15;
}

.sk-path-card__desc {
  font-family: var(--sk-font-sans);
  font-size: clamp(0.875rem, 1.1vw, 0.975rem);
  line-height: 1.6;
  color: rgba(250, 249, 247, 0.9);
  max-width: 40ch;
  margin-bottom: 1.25rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.sk-path-card .sk-btn {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

@media (max-width: 749px) {
  .sk-two-paths {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 1.5rem 1rem !important;
    background: #ffffff !important;
  }
  .sk-path-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    border-radius: 16px !important;
    background: #242220 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
  }
  .sk-path-card__media {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 250px !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    background: #DDDBD4 !important;
  }
  .sk-path-card__media img,
  .sk-path-card__media picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px 16px 0 0 !important;
    filter: none !important;
    display: block !important;
  }
  .sk-path-card:first-child .sk-path-card__media img,
  .sk-path-card:first-child .sk-path-card__media picture img {
    object-position: center 25% !important;
  }
  .sk-path-card:last-child .sk-path-card__media img,
  .sk-path-card:last-child .sk-path-card__media picture img {
    object-position: center center !important;
  }
  .sk-path-card__overlay {
    display: none !important;
  }
  .sk-path-card__content {
    position: relative !important;
    z-index: 1 !important;
    padding: 1.5rem 1.25rem 1.75rem !important;
    background: #242220 !important;
    border-radius: 0 0 16px 16px !important;
    box-sizing: border-box !important;
  }
  .sk-path-card__eyebrow {
    color: #898C79 !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 0.35rem !important;
    text-shadow: none !important;
  }
  .sk-path-card__heading {
    font-size: 1.45rem !important;
    color: #F0F1F3 !important;
    margin-bottom: 0.5rem !important;
    text-shadow: none !important;
    line-height: 1.2 !important;
  }
  .sk-path-card__desc {
    font-size: 0.875rem !important;
    color: #DDDBD4 !important;
    line-height: 1.55 !important;
    margin-bottom: 1.25rem !important;
    text-shadow: none !important;
    max-width: 100% !important;
  }
  .sk-path-card .sk-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    padding-block: 0.8rem !important;
  }
}

/* ── 9. SHOP BY NEED ─────────────────────────────────────── */
.sk-shop-by-need {
  background: var(--sk-ivory);
  padding-block: var(--sk-space-xl);
}

.sk-shop-by-need__inner {
  max-width: var(--sk-max);
  margin-inline: auto;
  padding-inline: var(--sk-space-sm);
}

.sk-shop-by-need__heading {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  text-align: center;
  margin-bottom: var(--sk-space-md);
}

.sk-need-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.sk-need-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  display: block;
}

.sk-need-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.sk-need-card:hover .sk-need-card__media img {
  transform: scale(1.05);
}

.sk-need-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,28,28,0.55) 0%, transparent 55%);
}

.sk-need-card__label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  font-family: var(--sk-font-serif);
  font-size: 1rem;
  color: var(--sk-ivory);
  line-height: 1.3;
}

@media (max-width: 989px) {
  .sk-need-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 599px) {
  .sk-need-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }
}

/* ── 10. PHILOSOPHY / CRITERIO ───────────────────────────── */
.sk-philosophy {
  background: var(--sk-beige);
  padding-block: var(--sk-space-xl);
  text-align: center;
}

.sk-philosophy__inner {
  max-width: var(--sk-text-max);
  margin-inline: auto;
  padding-inline: var(--sk-space-sm);
}

.sk-philosophy__heading {
  font-size: clamp(1.875rem, 3.5vw, 3rem);
  margin-bottom: 1.5rem;
}

.sk-philosophy__body {
  font-family: var(--sk-font-sans);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--sk-muted);
  margin-bottom: var(--sk-space-sm);
}

/* ── 10B. COMBINED PHILOSOPHY & FINAL CTA (2 COLUMNS) ─────── */
.sk-philosophy-cta {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.sk-philosophy-cta__inner {
  max-width: var(--sk-max);
  margin-inline: auto;
  padding: clamp(1.75rem, 3.5vh, 3rem) clamp(1.5rem, 3.5vw, 4rem);
  box-sizing: border-box;
  width: 100%;
}

.sk-philosophy-cta__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

.sk-philosophy-cta__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.sk-philosophy-cta__divider {
  width: 1px;
  height: 75%;
  min-height: 130px;
  background: currentColor;
  opacity: 0.18;
  align-self: center;
}

.sk-philosophy-cta__heading {
  font-family: var(--sk-font-serif);
  font-size: clamp(1.35rem, 1.8vw, 1.85rem);
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: clamp(0.5rem, 1.2vh, 0.85rem);
  text-wrap: balance;
}

.sk-philosophy-cta__body {
  font-family: var(--sk-font-sans);
  font-size: clamp(0.875rem, 0.95vw, 0.975rem);
  line-height: 1.55;
  margin-top: 0;
  margin-bottom: clamp(0.75rem, 1.5vh, 1.15rem);
  max-width: 44ch;
}

.sk-philosophy-cta__col--right .sk-philosophy-cta__body {
  margin-bottom: clamp(1rem, 2vh, 1.35rem);
}

.sk-philosophy-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}


/* Light Scheme */
.sk-philosophy-cta--light {
  color: var(--sk-charcoal);
}
.sk-philosophy-cta--light .sk-eyebrow {
  color: #7D7571;
  margin-bottom: 0.45rem;
}
.sk-philosophy-cta--light .sk-philosophy-cta__heading {
  color: var(--sk-charcoal);
}
.sk-philosophy-cta--light .sk-philosophy-cta__body {
  color: #4A4643;
}
.sk-philosophy-cta--light .sk-btn--primary {
  background: var(--sk-charcoal);
  color: var(--sk-ivory);
  border-color: var(--sk-charcoal);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: all var(--sk-ease);
}
.sk-philosophy-cta--light .sk-btn--primary:hover {
  background: var(--sk-gold);
  border-color: var(--sk-gold);
  color: var(--sk-charcoal);
  transform: translateY(-1px);
}
.sk-philosophy-cta--light .sk-btn--outline {
  border-color: var(--sk-charcoal);
  color: var(--sk-charcoal);
  background: transparent;
  transition: all var(--sk-ease);
}
.sk-philosophy-cta--light .sk-btn--outline:hover {
  background: var(--sk-charcoal);
  color: var(--sk-ivory);
  transform: translateY(-1px);
}

/* Dark Scheme */
.sk-philosophy-cta--dark {
  color: var(--sk-ivory);
}
.sk-philosophy-cta--dark .sk-eyebrow {
  color: rgba(250, 249, 247, 0.7);
  margin-bottom: 0.45rem;
}
.sk-philosophy-cta--dark .sk-philosophy-cta__heading {
  color: var(--sk-ivory);
}
.sk-philosophy-cta--dark .sk-philosophy-cta__body {
  color: rgba(250, 249, 247, 0.85);
}
.sk-philosophy-cta--dark .sk-btn--primary {
  background: var(--sk-ivory);
  color: var(--sk-charcoal);
  border-color: var(--sk-ivory);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: all var(--sk-ease);
}
.sk-philosophy-cta--dark .sk-btn--primary:hover {
  background: transparent;
  color: var(--sk-ivory);
  border-color: var(--sk-ivory);
  transform: translateY(-1px);
}
.sk-philosophy-cta--dark .sk-btn--outline-light {
  border-color: rgba(250, 249, 247, 0.8);
  color: var(--sk-ivory);
  background: transparent;
  transition: all var(--sk-ease);
}
.sk-philosophy-cta--dark .sk-btn--outline-light:hover {
  background: var(--sk-ivory);
  color: var(--sk-charcoal);
  border-color: var(--sk-ivory);
  transform: translateY(-1px);
}

/* Subsección de Marcas dentro de Filosofía & CTA */
.sk-philosophy-brands {
  margin-top: clamp(1.75rem, 3.2vh, 3rem);
  padding-top: clamp(1.25rem, 2.2vh, 2.25rem);
  border-top: 1px solid rgba(197, 185, 168, 0.4);
  text-align: center;
  width: 100%;
}

.sk-philosophy-cta--dark .sk-philosophy-brands {
  border-top-color: rgba(250, 249, 247, 0.15);
}

.sk-philosophy-brands__heading {
  font-family: var(--sk-font-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--sk-muted, #7A7269);
  margin-bottom: clamp(0.75rem, 1.8vh, 1.5rem);
}

.sk-philosophy-cta--dark .sk-philosophy-brands__heading {
  color: rgba(250, 249, 247, 0.65);
}

.sk-philosophy-brands .sk-brands__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 0;
}

@media (max-width: 749px) {
  .sk-philosophy-cta__inner {
    padding: 2.25rem 1.25rem 2.5rem !important;
  }
  .sk-philosophy-cta__grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .sk-philosophy-cta__heading {
    font-size: clamp(1.45rem, 6vw, 1.8rem) !important;
    margin-bottom: 0.65rem !important;
  }
  .sk-philosophy-cta__body {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0.85rem !important;
  }
  .sk-philosophy-cta__col--right .sk-philosophy-cta__body {
    margin-bottom: 1.25rem !important;
  }
  .sk-philosophy-cta__divider {
    width: 100% !important;
    height: 1px !important;
    min-height: 0 !important;
    opacity: 0.15 !important;
    margin-block: 0.25rem !important;
  }
  .sk-philosophy-cta__actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.65rem !important;
  }
  .sk-philosophy-cta__actions .sk-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    padding-block: 0.85rem !important;
  }
  .sk-philosophy-brands {
    margin-top: 1.75rem !important;
    padding-top: 1.25rem !important;
  }
  .sk-philosophy-brands .sk-brands__logos {
    gap: 1.25rem 1.75rem !important;
  }
}


/* ── 11. ROUTINE ─────────────────────────────────────────── */
.sk-routine {
  background: var(--sk-ivory);
  padding-block: var(--sk-space-xl);
}

.sk-routine__inner {
  max-width: var(--sk-max);
  margin-inline: auto;
  padding-inline: var(--sk-space-sm);
}

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

.sk-routine__heading {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  margin-bottom: 0.75rem;
}

.sk-routine__subheading {
  font-family: var(--sk-font-sans);
  font-size: 1rem;
  color: var(--sk-muted);
  max-width: 40ch;
  margin-inline: auto;
  line-height: 1.7;
}

.sk-routine__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: var(--sk-space-md);
}

.sk-routine-step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sk-routine-step__number {
  font-family: var(--sk-font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--sk-accent);
  text-transform: uppercase;
}

.sk-routine-step__title {
  font-family: var(--sk-font-serif);
  font-size: 1.25rem;
  color: var(--sk-dark);
}

.sk-routine-step__desc {
  font-family: var(--sk-font-sans);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--sk-muted);
}

.sk-routine-step__product {
  margin-top: auto;
  border: 1px solid var(--sk-beige);
  overflow: hidden;
}

.sk-routine-step__product-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.sk-routine-step__product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sk-routine-step__product-info {
  padding: 0.75rem;
}

.sk-routine-step__product-name {
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  color: var(--sk-dark);
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

.sk-routine-step__product-price {
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  color: var(--sk-muted);
}

.sk-routine-step__product-btn {
  display: block;
  width: 100%;
  padding: 0.625rem;
  background: transparent;
  border: none;
  border-top: 1px solid var(--sk-beige);
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sk-dark);
  cursor: pointer;
  transition: background var(--sk-ease), color var(--sk-ease);
}

.sk-routine-step__product-btn:hover {
  background: var(--sk-dark);
  color: var(--sk-ivory);
}

.sk-routine__add-all {
  text-align: center;
}

@media (max-width: 989px) {
  .sk-routine__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .sk-routine__steps {
    grid-template-columns: 1fr;
  }
}

/* ── 12. ADVISORY ────────────────────────────────────────── */
.sk-advisory {
  background: var(--sk-light);
  border-top: 1px solid var(--sk-taupe);
  border-bottom: 1px solid var(--sk-taupe);
  padding-block: var(--sk-space-xl);
  text-align: center;
}

.sk-advisory__inner {
  max-width: var(--sk-text-max);
  margin-inline: auto;
  padding-inline: var(--sk-space-sm);
}

.sk-advisory__heading {
  font-size: clamp(1.875rem, 3.5vw, 3rem);
  margin-bottom: 1.25rem;
}

.sk-advisory__body {
  font-family: var(--sk-font-sans);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--sk-muted);
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: var(--sk-space-sm);
}

/* ── 13. TESTIMONIALS ────────────────────────────────────── */
.sk-testimonials {
  background: var(--sk-ivory);
  padding-block: var(--sk-space-xl);
}

.sk-testimonials__inner {
  max-width: var(--sk-max);
  margin-inline: auto;
  padding-inline: var(--sk-space-sm);
}

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

.sk-testimonials__heading {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
}

.sk-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.sk-testimonial-card {
  border: 1px solid var(--sk-beige);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sk-testimonial-card__quote {
  font-family: var(--sk-font-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--sk-dark);
  font-style: italic;
}

.sk-testimonial-card__author {
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sk-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: auto;
}

.sk-testimonial-card__type {
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  color: var(--sk-accent);
}

.sk-comparison-slider {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: ew-resize;
  user-select: none;
}

.sk-comparison-slider__before,
.sk-comparison-slider__after {
  position: absolute;
  inset: 0;
}

.sk-comparison-slider__after {
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.05s;
}

.sk-comparison-slider__before img,
.sk-comparison-slider__after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sk-comparison-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--sk-ivory);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sk-comparison-slider__handle::before {
  content: '';
  width: 36px;
  height: 36px;
  background: var(--sk-ivory);
  border-radius: 50%;
}

@media (max-width: 749px) {
  .sk-testimonial-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 14. TREATMENTS PREVIEW ──────────────────────────────── */
.sk-treatments-preview {
  background: var(--sk-ivory);
  padding-block: var(--sk-space-xl);
}

.sk-treatments-preview__inner {
  max-width: var(--sk-max);
  margin-inline: auto;
  padding-inline: var(--sk-space-sm);
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sk-space-lg);
  align-items: center;
}

.sk-treatments-preview__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.sk-treatments-preview__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sk-ease-slow);
}

.sk-treatments-preview__media:hover img {
  transform: scale(1.02);
}

.sk-treatments-preview__heading {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  margin-bottom: 1.25rem;
}

.sk-treatments-preview__body {
  font-family: var(--sk-font-sans);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--sk-muted);
  margin-bottom: var(--sk-space-sm);
}

@media (max-width: 749px) {
  .sk-treatments-preview__inner {
    grid-template-columns: 1fr;
  }
}

/* ── 15. BRANDS ──────────────────────────────────────────── */
.sk-brands {
  background: var(--sk-ivory);
  border-top: 1px solid var(--sk-beige);
  padding-block: var(--sk-space-lg);
}

.sk-brands__inner {
  max-width: var(--sk-max);
  margin-inline: auto;
  padding-inline: var(--sk-space-sm);
  text-align: center;
}

.sk-brands__heading {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  margin-bottom: var(--sk-space-md);
  color: var(--sk-muted);
}

.sk-brands__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.75rem);
  padding: 1rem 0;
}

.sk-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  opacity: 0.72;
  filter: grayscale(100%);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  text-decoration: none;
}

.sk-brand-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-2px);
}

.sk-brand-logo img {
  max-height: 3.38rem;
  max-width: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.sk-brand-logo--revitalash img {
  max-height: 4.35rem;
}

.sk-brand-logo--colorescience img {
  max-height: 2.5rem;
}

.sk-brand-logo--siv img {
  max-height: 2.85rem;
}



/* ── 16. FINAL CTA ───────────────────────────────────────── */
.sk-final-cta {
  background: var(--sk-deep);
  padding-block: var(--sk-space-xl);
  text-align: center;
}

.sk-final-cta__inner {
  max-width: var(--sk-text-max);
  margin-inline: auto;
  padding-inline: var(--sk-space-sm);
}

.sk-final-cta__heading {
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--sk-ivory);
  margin-bottom: 1.25rem;
}

.sk-final-cta__body {
  font-family: var(--sk-font-sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(250,249,247,0.75);
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: var(--sk-space-sm);
}

.sk-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ── 17. ABOUT PAGE ──────────────────────────────────────── */
.sk-about-hero {
  position: relative;
  background: var(--sk-beige);
  padding-block: var(--sk-space-xl);
  overflow: hidden;
}

.sk-about-hero__inner {
  max-width: var(--sk-max);
  margin-inline: auto;
  padding-inline: var(--sk-space-sm);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sk-space-lg);
  align-items: center;
}

.sk-about-hero__media {
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.sk-about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sk-about-hero__heading {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  margin-bottom: 1.25rem;
}

.sk-about-hero__desc {
  font-family: var(--sk-font-sans);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--sk-muted);
}

@media (max-width: 749px) {
  .sk-about-hero__inner {
    grid-template-columns: 1fr;
  }
}

/* ── 18. CREDENTIALS ─────────────────────────────────────── */
.sk-credentials {
  background: var(--sk-ivory);
  padding-block: var(--sk-space-xl);
}

.sk-credentials__inner {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--sk-space-sm);
}

.sk-credentials__heading {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  margin-bottom: var(--sk-space-md);
  text-align: center;
}

.sk-credentials__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sk-credential-item {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  align-items: start;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--sk-beige);
}

.sk-credential-item__year {
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  color: var(--sk-accent);
  letter-spacing: 0.05em;
  padding-top: 0.25rem;
}

.sk-credential-item__title {
  font-family: var(--sk-font-serif);
  font-size: 1rem;
  color: var(--sk-dark);
  margin-bottom: 0.25rem;
}

.sk-credential-item__institution {
  font-family: var(--sk-font-sans);
  font-size: 0.875rem;
  color: var(--sk-muted);
}

/* ── 19. TREATMENTS PAGE ─────────────────────────────────── */
.sk-treatments-list {
  background: var(--sk-ivory);
  padding-block: var(--sk-space-xl);
}

.sk-treatments-list__inner {
  max-width: var(--sk-max);
  margin-inline: auto;
  padding-inline: var(--sk-space-sm);
}

.sk-treatments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.sk-treatment-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sk-beige);
  overflow: hidden;
}

.sk-treatment-card__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.sk-treatment-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.sk-treatment-card:hover .sk-treatment-card__media img {
  transform: scale(1.04);
}

.sk-treatment-card__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
}

.sk-treatment-card__title {
  font-family: var(--sk-font-serif);
  font-size: 1.1875rem;
  color: var(--sk-dark);
}

.sk-treatment-card__desc {
  font-family: var(--sk-font-sans);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--sk-muted);
  flex: 1;
}

.sk-treatment-card__duration {
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  color: var(--sk-accent);
  letter-spacing: 0.05em;
}

.sk-treatment-card__cta {
  margin-top: 0.5rem;
}

@media (max-width: 989px) {
  .sk-treatments-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .sk-treatments-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 20. POLICY PAGE ─────────────────────────────────────── */
.sk-policy {
  background: var(--sk-ivory);
  padding-block: var(--sk-space-xl);
}

.sk-policy__inner {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--sk-space-sm);
}

.sk-policy__title {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  margin-bottom: var(--sk-space-md);
}

.sk-policy__content {
  font-family: var(--sk-font-sans);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--sk-muted);
}

.sk-policy__content h2 {
  font-size: 1.25rem;
  color: var(--sk-dark);
  margin-top: var(--sk-space-sm);
  margin-bottom: 0.75rem;
}

.sk-policy__content p {
  margin-bottom: 1rem;
}

.sk-policy__content a {
  color: var(--sk-accent);
  text-decoration: underline;
}

/* ── 21. BREADCRUMB ──────────────────────────────────────── */
.sk-breadcrumb {
  padding-block: 1rem;
  padding-inline: var(--sk-space-sm);
  max-width: var(--sk-max);
  margin-inline: auto;
}

.sk-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  color: var(--sk-muted);
}

.sk-breadcrumb__item a {
  color: var(--sk-muted);
  text-decoration: none;
}

.sk-breadcrumb__item a:hover {
  color: var(--sk-dark);
}

.sk-breadcrumb__separator {
  color: var(--sk-taupe);
}

/* ── 22. HEADER ADVISORY CTA ─────────────────────────────── */
.sk-header-advisory {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.125rem;
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sk-dark);
  border: 1px solid currentColor;
  text-decoration: none;
  transition: background var(--sk-ease), color var(--sk-ease);
  white-space: nowrap;
}

.sk-header-advisory:hover {
  background: var(--sk-dark);
  color: var(--sk-ivory);
}

@media (max-width: 989px) {
  .sk-header-advisory {
    display: none;
  }
}

/* ── 23. FOOTER SKINOLOGY (Brand Manual Design) ─────────── */
.sk-footer {
  width: 100%;
  background: #262626;
  color: #F0F1F3;
  position: relative;
  box-sizing: border-box;
}

/* Slogan Bar */
.sk-footer__tagline-bar {
  background: #1F1F1F;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.15rem 1.5rem;
}

.sk-footer__tagline-inner {
  max-width: var(--sk-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  text-align: center;
}

.sk-footer__motto,
.sk-footer__submotto {
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #DDDBD4;
}

.sk-footer__submotto {
  color: #898C79;
}

.sk-footer__motto-sep {
  color: rgba(255, 255, 255, 0.2);
}

/* Main Footer */
.sk-footer__main {
  padding: clamp(3rem, 6vh, 5rem) var(--sk-space-sm) clamp(2.5rem, 5vh, 4rem);
}

.sk-footer__container {
  max-width: var(--sk-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.35fr 0.88fr 0.92fr 1.4fr 1.25fr;
  gap: clamp(1.5rem, 2vw, 2.75rem);
  box-sizing: border-box;
}

.sk-footer__col {
  display: flex;
  flex-direction: column;
}

/* Brand Column */
.sk-footer__logo-link {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 1.25rem;
}

.sk-footer__logo-img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block;
}

.sk-footer__logo-fallback {
  display: flex;
  flex-direction: column;
}

.sk-footer__logo-text {
  font-family: var(--sk-font-serif);
  font-size: 1.75rem;
  color: #F0F1F3;
  letter-spacing: -0.01em;
  line-height: 1;
}

.sk-footer__logo-tagline {
  font-family: var(--sk-font-sans);
  font-size: 0.5625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #898C79;
  margin-top: 0.35rem;
}

.sk-footer__brand-desc {
  font-family: var(--sk-font-sans);
  font-size: 0.875rem;
  line-height: 1.7;
  color: #A8A6A1;
  max-width: 32ch;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.sk-footer__socials {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sk-footer__social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F0F1F3;
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition: all var(--sk-ease);
}

.sk-footer__social-btn:hover {
  background: #F0F1F3;
  color: #262626;
  border-color: #F0F1F3;
  transform: translateY(-2px);
}

/* Headings and Links */
.sk-footer__col-heading {
  font-family: var(--sk-font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  color: #F0F1F3;
  letter-spacing: 0.02em;
  margin-top: 0;
  margin-bottom: 1.35rem;
}

.sk-footer__linklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sk-footer__linklist a {
  font-family: var(--sk-font-sans);
  font-size: 0.875rem;
  color: #A8A6A1;
  text-decoration: none;
  transition: color var(--sk-ease), transform var(--sk-ease);
  display: inline-block;
}

.sk-footer__linklist a:hover {
  color: #F0F1F3;
  transform: translateX(3px);
}

/* Policies Column (Acceso Directo a Políticas de la Tienda) */
.sk-footer__policies-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.sk-footer__policy-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.55rem;
}

.sk-footer__policy-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sk-footer__policy-link {
  font-family: var(--sk-font-sans);
  font-size: 0.84rem;
  color: #A8A6A1;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  line-height: 1.35;
  transition: color var(--sk-ease), transform var(--sk-ease);
}

.sk-footer__policy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #C5B9A8;
  flex-shrink: 0;
  transition: color var(--sk-ease), transform var(--sk-ease);
}

.sk-footer__policy-icon svg {
  display: block;
}

.sk-footer__policy-text {
  transition: color var(--sk-ease);
}

.sk-footer__policy-link:hover {
  color: #F0F1F3;
  transform: translateX(3px);
}

.sk-footer__policy-link:hover .sk-footer__policy-icon {
  color: #FAF9F7;
  transform: scale(1.1);
}

/* Newsletter Column */
.sk-footer__newsletter-desc {
  font-family: var(--sk-font-sans);
  font-size: 0.875rem;
  line-height: 1.6;
  color: #A8A6A1;
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.sk-footer__input-group {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  transition: border-color var(--sk-ease);
}

.sk-footer__input-group:focus-within {
  border-color: #F0F1F3;
}

.sk-footer__input {
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.75rem 2.5rem 0.75rem 0;
  font-family: var(--sk-font-sans);
  font-size: 0.875rem;
  color: #F0F1F3 !important;
  outline: none !important;
  -webkit-appearance: none;
}

.sk-footer__input::placeholder {
  color: #73716E;
}

.sk-footer__submit-btn {
  position: absolute;
  right: 0;
  background: transparent;
  border: none;
  color: #F0F1F3;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--sk-ease), color var(--sk-ease);
}

.sk-footer__submit-btn:hover {
  color: #DDDBD4;
  transform: translateX(3px);
}

.sk-footer__form-success {
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  color: #898C79;
  margin-top: 0.75rem;
}

/* Bottom Bar */
.sk-footer__bottom {
  background: #1E1E1E;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.35rem var(--sk-space-sm);
}

.sk-footer__bottom-container {
  max-width: var(--sk-max);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  color: #7E7C77;
}

.sk-footer__copyright {
  color: #7E7C77;
}

.sk-footer__legal-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.sk-footer__legal-links a {
  color: #7E7C77;
  text-decoration: none;
  transition: color var(--sk-ease);
}

.sk-footer__legal-links a:hover {
  color: #F0F1F3;
}

.sk-footer__dot {
  color: #4A4A4A;
}

/* ImpulsaDigital Credit */
.sk-footer__credit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: #7E7C77;
  opacity: 0.85;
  transition: opacity var(--sk-ease), color var(--sk-ease);
}

.sk-footer__credit-link:hover {
  opacity: 1;
  color: #F0F1F3;
}

.sk-footer__credit-text {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.sk-footer__credit-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 3px;
  display: inline-block;
  vertical-align: middle;
  transition: transform var(--sk-ease);
}

.sk-footer__credit-link:hover .sk-footer__credit-logo {
  transform: scale(1.12);
}

@media (max-width: 1100px) {
  .sk-footer__container {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .sk-footer__col--brand {
    grid-column: span 2;
  }
}

@media (max-width: 599px) {
  .sk-footer__tagline-inner {
    flex-direction: column;
    gap: 0.35rem;
  }
  .sk-footer__motto-sep {
    display: none;
  }
  .sk-footer__container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .sk-footer__col--brand {
    grid-column: span 1;
  }
  .sk-footer__bottom-container {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 0.75rem;
  }
  .sk-footer__legal-links {
    justify-content: center;
  }
}

/* ── 24. MEDIA QUERIES GLOBALES ──────────────────────────── */
@media (max-width: 749px) {
  .sk-section-header--centered {
    text-align: left;
  }

  .sk-philosophy,
  .sk-advisory,
  .sk-final-cta {
    text-align: left;
  }

  .sk-philosophy__inner,
  .sk-advisory__inner,
  .sk-final-cta__inner {
    text-align: left;
  }

  .sk-advisory__body,
  .sk-philosophy__body,
  .sk-final-cta__body {
    margin-inline: 0;
  }

  .sk-final-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    justify-content: flex-start;
  }
  .sk-final-cta__actions .sk-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding-block: 0.85rem;
  }
}

/* ── 25. HOMEPAGE SCROLL SNAPPING & VIEWPORT SIZING ──────── */
:root,
body {
  --sk-snap-height: calc(100dvh - var(--header-height, 66px));
}

@supports not (height: 100dvh) {
  :root,
  body {
    --sk-snap-height: calc(100vh - var(--header-height, 66px));
  }
}

/* Scroll Container Snapping (Desktop / Tablet only) — ONLY WHEN ACTIVE */
@media (min-width: 750px) {
  html.html--homepage-snap,
  html.html--homepage-snap body.template-index,
  body.template-index.sk-snap-enabled {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height, 66px);
  }

  body.template-index.sk-snap-enabled .page-wrapper {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height, 66px);
  }

  /* Base snapping for all homepage sections (Active only with Snap Enabled) */
  body.template-index.sk-snap-enabled #MainContent > .shopify-section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    min-height: var(--sk-snap-height);
    height: var(--sk-snap-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
  }

  body.template-index.sk-snap-enabled footer {
    scroll-snap-align: end;
  }

  /* Fluid scrolling defaults when Snap is disabled (Default state) */
  body.template-index:not(.sk-snap-enabled),
  body.template-index.sk-snap-disabled {
    scroll-snap-type: none !important;
  }

  body.template-index:not(.sk-snap-enabled) .page-wrapper,
  body.template-index.sk-snap-disabled .page-wrapper {
    scroll-snap-type: none !important;
  }

  body.template-index:not(.sk-snap-enabled) #MainContent > .shopify-section,
  body.template-index.sk-snap-disabled #MainContent > .shopify-section {
    scroll-snap-align: none !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }
}

/* Desktop lateral margins (exempting headerbar, hero banner, and footer) */
@media (min-width: 750px) {
  body.template-index #MainContent > .shopify-section {
    padding-inline: var(--sk-page-margin);
  }

  body.template-index #MainContent > .shopify-section:has(.sk-hero),
  body.template-index #MainContent > [id*="sk_hero"] {
    padding-inline: 0 !important;
  }

  body.template-index.sk-snap-enabled #MainContent > .shopify-section:not(:has(.sk-hero)) > section,
  body.template-index.sk-snap-enabled #MainContent > .shopify-section:not(:has(.sk-hero)) > div,
  body.template-index.sk-snap-enabled #MainContent > .shopify-section:not([id*="sk_hero"]) > section,
  body.template-index.sk-snap-enabled #MainContent > .shopify-section:not([id*="sk_hero"]) > div {
    border-radius: 6px;
    overflow: hidden;
  }

  body:not(.template-index) #MainContent {
    padding-inline: var(--sk-page-margin);
    box-sizing: border-box;
  }
}

/* Mobile: Fluid scrolling without snapping or forced height clips */
@media (max-width: 749px) {
  html.html--homepage-snap,
  html:has(body.template-index),
  body.template-index {
    scroll-snap-type: none !important;
    scroll-padding-top: 0 !important;
  }

  body.template-index #MainContent > .shopify-section {
    scroll-snap-align: none !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: block !important;
    padding-inline: 0 !important;
  }

  body.template-index #MainContent > .shopify-section > section,
  body.template-index #MainContent > .shopify-section > div,
  body.template-index #MainContent > .shopify-section > .sk-section-wrapper {
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    width: 100% !important;
  }

  body:not(.template-index) #MainContent {
    padding-inline: 0 !important;
  }
}

/* Section-specific viewport optimizations: Desktop */
@media (min-width: 750px) {
  /* 1. Hero */
  body.template-index .sk-hero {
    min-height: calc(100vh - var(--header-height, 66px));
    height: auto;
    align-items: flex-end;
    justify-content: flex-start;
  }
  body.template-index.sk-snap-enabled .sk-hero {
    min-height: var(--sk-snap-height);
    height: var(--sk-snap-height);
  }
  body.template-index .sk-hero__content {
    padding: clamp(1.5rem, 5vh, 4rem) var(--sk-space-sm) clamp(1.5rem, 4vh, 3rem);
    justify-content: flex-start;
  }

  /* 2. Specialist: Barra de confianza + Cuidar tu piel empieza por entenderla */
  body.template-index.sk-snap-enabled #MainContent > .shopify-section:has(.sk-specialist),
  body.template-index.sk-snap-enabled #MainContent > [id*="sk_specialist"] {
    height: var(--sk-snap-height) !important;
    min-height: var(--sk-snap-height) !important;
    max-height: var(--sk-snap-height) !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  body.template-index.sk-snap-enabled .sk-specialist {
    height: var(--sk-snap-height) !important;
    min-height: var(--sk-snap-height) !important;
    max-height: var(--sk-snap-height) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding-block: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  body.template-index:not(.sk-snap-enabled) #MainContent > .shopify-section:has(.sk-specialist),
  body.template-index:not(.sk-snap-enabled) #MainContent > [id*="sk_specialist"],
  body.template-index.sk-snap-disabled #MainContent > .shopify-section:has(.sk-specialist),
  body.template-index.sk-snap-disabled #MainContent > [id*="sk_specialist"] {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    scroll-snap-align: none !important;
    display: block !important;
  }
  body.template-index:not(.sk-snap-enabled) .sk-specialist,
  body.template-index.sk-snap-disabled .sk-specialist {
    height: auto !important;
    min-height: 560px !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  body.template-index:not(.sk-snap-enabled) .sk-specialist__banner,
  body.template-index.sk-snap-disabled .sk-specialist__banner {
    min-height: 480px !important;
  }
  body.template-index .sk-specialist .sk-trust-bar {
    flex-shrink: 0 !important;
    width: 100% !important;
    border-top: none !important;
  }
  body.template-index .sk-specialist__banner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-end !important;
    background: #1c1a17 !important;
  }
  body.template-index .sk-specialist__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  body.template-index .sk-specialist__media img,
  body.template-index .sk-specialist__media picture img {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: left bottom !important;
    mask-image: linear-gradient(to right, black 50%, rgba(0, 0, 0, 0.85) 65%, transparent 92%) !important;
    -webkit-mask-image: linear-gradient(to right, black 50%, rgba(0, 0, 0, 0.85) 65%, transparent 92%) !important;
  }
  body.template-index .sk-specialist__banner .sk-specialist__inner {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: clamp(1.25rem, 3.5vh, 3rem) var(--sk-space-sm);
    box-sizing: border-box;
    overflow: hidden;
  }
  body.template-index .sk-specialist__banner .sk-specialist__content {
    max-width: 520px;
    margin-left: auto;
    align-items: flex-end;
    text-align: right;
  }
  body.template-index .sk-specialist__banner .sk-specialist__heading {
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    margin-bottom: clamp(0.5rem, 1.2vh, 0.85rem);
    text-align: right;
  }
  body.template-index .sk-specialist__banner .sk-specialist__body {
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    margin-bottom: clamp(0.75rem, 1.6vh, 1.25rem);
    line-height: 1.55;
    text-align: right;
  }

  /* 3. Two Paths */
  body.template-index.sk-snap-enabled .sk-two-paths,
  body.template-index.sk-snap-enabled #MainContent > .shopify-section > section.sk-two-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: var(--sk-snap-height);
    height: var(--sk-snap-height);
    flex-direction: unset;
    overflow: hidden;
    background: #ffffff;
    padding: clamp(1.25rem, 3.5vh, 2.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    box-sizing: border-box;
    align-items: center;
  }
  body.template-index:not(.sk-snap-enabled) .sk-two-paths,
  body.template-index.sk-snap-disabled .sk-two-paths,
  body.template-index:not(.sk-snap-enabled) #MainContent > .shopify-section > section.sk-two-paths,
  body.template-index.sk-snap-disabled #MainContent > .shopify-section > section.sk-two-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: auto;
    height: auto;
    flex-direction: unset;
    overflow: visible;
    background: #ffffff;
    padding: clamp(2.5rem, 5vh, 4rem) clamp(1.5rem, 2.5vw, 2.5rem);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    box-sizing: border-box;
    align-items: stretch;
  }
  body.template-index.sk-snap-enabled .sk-path-card {
    height: min(68vh, 560px);
    min-height: min(68vh, 500px);
    max-height: 100%;
    padding: clamp(1.5rem, 3.5vh, 2.5rem);
    box-sizing: border-box;
    border-radius: 16px;
    overflow: hidden;
  }
  body.template-index:not(.sk-snap-enabled) .sk-path-card,
  body.template-index.sk-snap-disabled .sk-path-card {
    height: auto;
    min-height: 480px;
    padding: clamp(2rem, 4vh, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
    box-sizing: border-box;
    border-radius: 16px;
    overflow: hidden;
  }
}

/* Section-specific viewport optimizations: Mobile (Preserving Faces & Preventing Text Overlap) */
@media (max-width: 749px) {
  .sk-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* 1. Hero Mobile */
  body.template-index .sk-hero,
  .sk-hero {
    min-height: 92svh !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    position: relative !important;
    overflow: hidden !important;
    background: #1C1C1C !important;
  }
  body.template-index .sk-hero__media,
  .sk-hero__media {
    position: absolute !important;
    inset: 0 !important;
  }
  body.template-index .sk-hero__media img,
  body.template-index .sk-hero__media picture img,
  .sk-hero__media img,
  .sk-hero__media picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 53% 6% !important; /* Preserves face perfectly, hand on chin */
  }
  body.template-index .sk-hero__overlay,
  .sk-hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 42%,
      rgba(20, 19, 18, 0.45) 56%,
      rgba(20, 19, 18, 0.88) 75%,
      rgba(20, 19, 18, 0.98) 100%
    ) !important;
    opacity: 1 !important;
  }
  body.template-index .sk-hero__content,
  .sk-hero__content {
    position: relative !important;
    z-index: 2 !important;
    padding: 0 1.25rem 2rem !important;
    margin-top: 48svh !important; /* Leaves face completely free */
    display: block !important;
  }
  .sk-hero .sk-reveal {
    align-items: flex-start !important;
    text-align: left !important;
    max-width: 100% !important;
  }
  .sk-hero .sk-eyebrow {
    font-size: 0.72rem !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 0.25rem !important;
  }
  .sk-hero__heading {
    font-size: clamp(1.6rem, 6.8vw, 2.15rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.55rem !important;
    text-align: left !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
  }
  .sk-hero__subheading {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.15rem !important;
    text-align: left !important;
    color: rgba(250, 249, 247, 0.9) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
    max-width: 100% !important;
  }
  .sk-hero__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }
  .sk-hero__actions .sk-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding-block: 0.85rem !important;
  }

  /* 2. Specialist Mobile: Stacked layout with pristine face visibility */
  body.template-index .sk-specialist {
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    padding-block: 0 !important;
    overflow: visible !important;
  }
  body.template-index .sk-specialist .sk-trust-bar {
    border-radius: 0 !important;
  }
  body.template-index .sk-specialist__banner,
  .sk-specialist__banner {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    height: auto !important;
    position: relative !important;
    background: #242220 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  body.template-index .sk-specialist__media,
  .sk-specialist__media {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 380px !important;
    overflow: hidden !important;
    background: #DDDBD4 !important;
  }
  body.template-index .sk-specialist__media img,
  body.template-index .sk-specialist__media picture img,
  .sk-specialist__media img,
  .sk-specialist__media picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: left bottom !important;
    display: block !important;
  }
  body.template-index .sk-specialist__overlay,
  .sk-specialist__overlay {
    display: none !important;
  }
  body.template-index .sk-specialist__banner .sk-specialist__inner,
  .sk-specialist__banner .sk-specialist__inner {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 1.75rem 1.25rem 2.25rem !important;
    background: #242220 !important;
    box-sizing: border-box !important;
    display: block !important;
    transform: none !important;
  }
  body.template-index .sk-specialist__banner .sk-specialist__content,
  .sk-specialist__banner .sk-specialist__content {
    max-width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .sk-specialist__banner .sk-specialist__content .sk-eyebrow {
    color: #898C79 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 0.4rem !important;
    text-align: left !important;
  }
  body.template-index .sk-specialist__banner .sk-specialist__heading,
  .sk-specialist__banner .sk-specialist__heading {
    font-size: clamp(1.55rem, 6.5vw, 2rem) !important;
    color: #F0F1F3 !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
    text-align: left !important;
  }
  body.template-index .sk-specialist__banner .sk-specialist__body,
  .sk-specialist__banner .sk-specialist__body {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: #DDDBD4 !important;
    margin-bottom: 1.35rem !important;
    text-align: left !important;
    max-width: 100% !important;
  }
  .sk-specialist__actions {
    width: 100% !important;
  }
  .sk-specialist__banner .sk-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    padding-block: 0.85rem !important;
    background: #FAF9F7 !important;
    color: #1C1C1C !important;
    border: 1px solid #FAF9F7 !important;
    font-weight: 600 !important;
  }

  /* 3. Two Paths Mobile: Stacked cards with pristine facial treatment photo */
  body.template-index .sk-two-paths,
  body.template-index #MainContent > .shopify-section > section.sk-two-paths,
  .sk-two-paths {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: auto !important;
    padding: 1.75rem 1rem !important;
    gap: 1.5rem !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }
  body.template-index .sk-path-card,
  .sk-path-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    border-radius: 16px !important;
    background: #242220 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
  }
  body.template-index .sk-path-card__media,
  .sk-path-card__media {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 250px !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    background: #DDDBD4 !important;
  }
  body.template-index .sk-path-card__media img,
  body.template-index .sk-path-card__media picture img,
  .sk-path-card__media img,
  .sk-path-card__media picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px 16px 0 0 !important;
    filter: none !important;
    display: block !important;
  }
  /* Card 1: Treatments (shows patient face receiving facial + specialist hands) */
  .sk-path-card:first-child .sk-path-card__media img,
  .sk-path-card:first-child .sk-path-card__media picture img {
    object-position: center 25% !important;
  }
  /* Card 2: Skincare products */
  .sk-path-card:last-child .sk-path-card__media img,
  .sk-path-card:last-child .sk-path-card__media picture img {
    object-position: center center !important;
  }
  body.template-index .sk-path-card__overlay,
  .sk-path-card__overlay {
    display: none !important;
  }
  body.template-index .sk-path-card__content,
  .sk-path-card__content {
    position: relative !important;
    z-index: 1 !important;
    padding: 1.5rem 1.25rem 1.75rem !important;
    background: #242220 !important;
    border-radius: 0 0 16px 16px !important;
    box-sizing: border-box !important;
  }
  .sk-path-card__eyebrow {
    color: #898C79 !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 0.35rem !important;
    text-shadow: none !important;
  }
  .sk-path-card__heading {
    font-size: 1.45rem !important;
    color: #F0F1F3 !important;
    margin-bottom: 0.5rem !important;
    text-shadow: none !important;
    line-height: 1.2 !important;
  }
  .sk-path-card__desc {
    font-size: 0.875rem !important;
    color: #DDDBD4 !important;
    line-height: 1.55 !important;
    margin-bottom: 1.25rem !important;
    text-shadow: none !important;
    max-width: 100% !important;
  }
  .sk-path-card .sk-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    padding-block: 0.8rem !important;
  }
}

/* 4. Shop By Need */
body.template-index .sk-shop-by-need {
  min-height: var(--sk-snap-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(1.5rem, 4vh, 3rem);
}
body.template-index .sk-shop-by-need__inner {
  width: 100%;
}
@media (min-width: 750px) {
  body.template-index .sk-shop-by-need__heading {
    margin-bottom: clamp(1rem, 2.5vh, 2rem);
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  }
  body.template-index .sk-need-card {
    max-height: min(48vh, 360px);
  }
}

/* 5. Featured Products */
body.template-index.sk-snap-enabled .ui-test-product-list {
  min-height: var(--sk-snap-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1.5rem, 4vh, 3rem);
}

/* 6. Philosophy, Combined CTA & Trusted Brands */
body.template-index.sk-snap-enabled #MainContent > .shopify-section:has(.sk-philosophy-cta),
body.template-index.sk-snap-enabled #MainContent > [id*="sk_philosophy_cta"] {
  min-height: var(--sk-snap-height) !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: normal !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

@media (min-width: 990px) {
  body.template-index.sk-snap-enabled #MainContent > .shopify-section:has(.sk-philosophy-cta),
  body.template-index.sk-snap-enabled #MainContent > [id*="sk_philosophy_cta"] {
    min-height: var(--sk-snap-height) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.template-index.sk-snap-enabled .sk-philosophy-cta {
    min-height: var(--sk-snap-height) !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-block: clamp(2rem, 4.5vh, 4rem) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
}

body.template-index:not(.sk-snap-enabled) #MainContent > .shopify-section:has(.sk-philosophy-cta),
body.template-index.sk-snap-disabled #MainContent > .shopify-section:has(.sk-philosophy-cta),
body.template-index:not(.sk-snap-enabled) #MainContent > [id*="sk_philosophy_cta"],
body.template-index.sk-snap-disabled #MainContent > [id*="sk_philosophy_cta"] {
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  scroll-snap-align: none !important;
  display: block !important;
}

body.template-index:not(.sk-snap-enabled) .sk-philosophy-cta,
body.template-index.sk-snap-disabled .sk-philosophy-cta {
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  padding-block: clamp(2.5rem, 5vh, 4.5rem) !important;
  overflow: visible !important;
}



body.template-index .sk-philosophy {
  min-height: var(--sk-snap-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(1.5rem, 5vh, 4rem);
}
body.template-index .sk-philosophy__heading {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
}
body.template-index .sk-philosophy__body {
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
}

/* 7. Routine */
body.template-index .sk-routine {
  min-height: var(--sk-snap-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(1.25rem, 3vh, 2.5rem);
}
body.template-index .sk-routine__inner {
  width: 100%;
}
@media (min-width: 750px) {
  body.template-index .sk-routine__header {
    margin-bottom: clamp(1rem, 2vh, 1.75rem);
  }
  body.template-index .sk-routine__heading {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    margin-bottom: 0.35rem;
  }
  body.template-index .sk-routine__steps {
    gap: clamp(1rem, 1.8vw, 1.5rem);
    margin-bottom: clamp(1rem, 2vh, 1.75rem);
  }
  body.template-index .sk-routine-step__product-img {
    max-height: min(18vh, 140px);
  }
}

/* 8. Advisory */
body.template-index .sk-advisory {
  min-height: var(--sk-snap-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(1.5rem, 5vh, 4rem);
}
body.template-index .sk-advisory__heading {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  margin-bottom: clamp(0.75rem, 1.5vh, 1.25rem);
}

/* 9. Treatments Preview */
body.template-index .sk-treatments-preview {
  min-height: var(--sk-snap-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(1.5rem, 4vh, 3rem);
}
@media (min-width: 750px) {
  body.template-index .sk-treatments-preview__inner {
    padding-block: 0;
    gap: clamp(1.5rem, 4vw, 4rem);
  }
  body.template-index .sk-treatments-preview__media {
    max-height: min(58vh, 460px);
  }
  body.template-index .sk-treatments-preview__heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: clamp(0.75rem, 1.5vh, 1.25rem);
  }
}

/* 10. Brands */
body.template-index .sk-brands {
  min-height: var(--sk-snap-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(1.5rem, 5vh, 4rem);
}
body.template-index .sk-brands__inner {
  width: 100%;
}
body.template-index .sk-brands__heading {
  margin-bottom: clamp(1.25rem, 3vh, 2.5rem);
}
body.template-index .sk-brands__logos {
  gap: clamp(1rem, 3vw, 2.5rem);
}

/* 11. Final CTA */
body.template-index .sk-final-cta {
  min-height: var(--sk-snap-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(1.5rem, 5vh, 4rem);
}
body.template-index .sk-final-cta__heading {
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  margin-bottom: clamp(0.75rem, 1.5vh, 1.25rem);
}

/* Media picture wrappers */
.sk-specialist__image-wrap picture,
.sk-specialist__media picture,
.sk-path-card__media picture,
.sk-need-card__media picture,
.sk-routine-step__product-img picture,
.sk-treatments-preview__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.sk-specialist__image-wrap picture img,
.sk-specialist__media picture img,
.sk-path-card__media picture img,
.sk-need-card__media picture img,
.sk-routine-step__product-img picture img,
.sk-treatments-preview__media picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sk-specialist__image-wrap picture img,
.sk-specialist__image-wrap img {
  object-position: center 15%;
}

@media (min-width: 750px) {
  .sk-specialist__media picture img,
  .sk-specialist__media img {
    object-position: left center;
  }
}

/* ============================================================
   SKINOLOGY — Página Conóceme / Manuela del Valle
   ============================================================ */

.sk-eyebrow {
  display: inline-block;
  font-family: var(--sk-font-sans);
  font-size: var(--sk-eyebrow-size, 0.6875rem);
  font-weight: 600;
  letter-spacing: var(--sk-eyebrow-spacing, 0.18em);
  text-transform: uppercase;
  color: var(--sk-accent, #8B7355);
  margin-bottom: 0.75rem;
}

.sk-conoceme {
  background-color: var(--sk-ivory, #FAF9F7);
  color: var(--sk-dark, #1C1C1C);
  width: 100%;
  overflow-x: hidden;
}

.sk-conoceme__container {
  width: 100%;
  max-width: var(--sk-max, 1320px);
  margin-inline: auto;
  padding-inline: var(--sk-page-margin, clamp(1.5rem, 4vw, 4rem));
}

/* ── Hero / Biografía Principal ──────────────────────────── */
.sk-conoceme__hero {
  padding-block: clamp(3rem, 6vh, 6rem) clamp(3rem, 6vh, 5rem);
  position: relative;
}

.sk-conoceme__grid {
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
}

/* Columna Imagen / Encuadre Editorial */
.sk-conoceme__media-col {
  position: relative;
}

.sk-conoceme__frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 48px -12px rgba(28, 28, 28, 0.12),
              0 4px 16px -4px rgba(28, 28, 28, 0.06);
  border: 1px solid rgba(197, 185, 168, 0.35);
  background-color: var(--sk-beige, #E8E0D5);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.sk-conoceme__frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 56px -12px rgba(28, 28, 28, 0.16),
              0 8px 24px -4px rgba(28, 28, 28, 0.08);
}

.sk-conoceme__frame picture,
.sk-conoceme__photo {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
}

/* Badge flotante en el encuadre */
.sk-conoceme__badge {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  background: rgba(250, 249, 247, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(197, 185, 168, 0.5);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  pointer-events: none;
}

.sk-conoceme__badge-role {
  font-family: var(--sk-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sk-accent, #8B7355);
}

.sk-conoceme__badge-name {
  font-family: var(--sk-font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--sk-dark, #1C1C1C);
  letter-spacing: -0.01em;
}

/* Columna Contenido */
.sk-conoceme__content-col {
  display: flex;
  flex-direction: column;
}

.sk-conoceme__heading {
  font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--sk-dark, #1C1C1C);
  margin-block: 0.5rem 1.25rem;
  letter-spacing: -0.025em;
}

.sk-conoceme__lead {
  font-family: var(--sk-font-serif);
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--sk-accent, #8B7355);
  margin-bottom: 1.75rem;
  border-left: 2px solid var(--sk-taupe, #C5B9A8);
  padding-left: 1.25rem;
}

.sk-conoceme__story {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.sk-conoceme__p {
  font-family: var(--sk-font-sans);
  font-size: clamp(0.95rem, 1.05vw, 1.0625rem);
  line-height: 1.75;
  color: var(--sk-muted, #6B6057);
  margin: 0;
}

.sk-conoceme__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
}

/* Botones especiales de la sección */
.sk-btn--lg {
  padding: 1.125rem 2.25rem;
  font-size: 0.875rem;
  letter-spacing: 0.09em;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(28, 28, 28, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.sk-btn--lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(28, 28, 28, 0.22);
}

/* ── Sección de Pilares ──────────────────────────────────── */
.sk-conoceme__pillars {
  background: var(--sk-light, #F4F0EA);
  border-top: 1px solid var(--sk-beige, #E8E0D5);
  border-bottom: 1px solid var(--sk-beige, #E8E0D5);
  padding-block: clamp(3.5rem, 7vh, 6rem);
}

.sk-conoceme__pillars-title {
  font-size: clamp(1.85rem, 2.8vw, 2.5rem);
  color: var(--sk-dark, #1C1C1C);
  margin: 0;
}

.sk-conoceme__pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

.sk-conoceme__pillar-card {
  background: var(--sk-white, #FFFFFF);
  border: 1px solid rgba(197, 185, 168, 0.45);
  border-radius: 14px;
  padding: clamp(2rem, 3.5vh, 2.75rem) clamp(1.5rem, 2vw, 2rem);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  display: flex;
  flex-direction: column;
}

.sk-conoceme__pillar-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px -10px rgba(28, 28, 28, 0.1);
  border-color: var(--sk-taupe, #C5B9A8);
}

.sk-conoceme__pillar-num {
  font-family: var(--sk-font-serif);
  font-size: 2.25rem;
  font-weight: 300;
  color: var(--sk-taupe, #C5B9A8);
  line-height: 1;
  margin-bottom: 1.25rem;
}

.sk-conoceme__pillar-name {
  font-family: var(--sk-font-serif);
  font-size: clamp(1.2rem, 1.4vw, 1.35rem);
  font-weight: 500;
  color: var(--sk-dark, #1C1C1C);
  margin: 0 0 0.85rem 0;
  line-height: 1.25;
}

.sk-conoceme__pillar-desc {
  font-family: var(--sk-font-sans);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--sk-muted, #6B6057);
  margin: 0;
}

/* ── Banner de Cierre con CTA ────────────────────────────── */
.sk-conoceme__cta-banner {
  background: linear-gradient(145deg, #2B211A 0%, #1A1715 100%);
  color: var(--sk-ivory, #FAF9F7);
  padding-block: clamp(4rem, 8vh, 6.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sk-conoceme__cta-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 185, 168, 0.4), transparent);
}

.sk-conoceme__cta-box {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sk-conoceme__cta-heading {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.18;
  color: var(--sk-ivory, #FAF9F7);
  margin-block: 0.75rem 1.25rem;
  font-weight: 400;
}

.sk-conoceme__cta-sub {
  font-family: var(--sk-font-sans);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--sk-beige, #E8E0D5);
  max-width: 580px;
  margin: 0 auto 2.25rem auto;
  opacity: 0.9;
}

.sk-conoceme__cta-actions .sk-btn--primary {
  background: var(--sk-ivory, #FAF9F7);
  color: var(--sk-dark, #1C1C1C);
  border-color: var(--sk-ivory, #FAF9F7);
}

.sk-conoceme__cta-actions .sk-btn--primary:hover {
  background: var(--sk-beige, #E8E0D5);
  border-color: var(--sk-beige, #E8E0D5);
  color: var(--sk-dark, #1C1C1C);
}

/* ── Responsive Mobile & Tablet ──────────────────────────── */
@media (max-width: 900px) {
  .sk-conoceme__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .sk-conoceme__media-col {
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
  }

  .sk-conoceme__pillars-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .sk-conoceme__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sk-conoceme__actions .sk-btn {
    justify-content: center;
    width: 100%;
  }
}

/* ============================================================
   SKINOLOGY — Catálogo de Servicios & Medicina Estética
   ============================================================ */

.sk-services-page {
  background-color: var(--sk-ivory, #FAF9F7);
  color: var(--sk-dark, #1C1C1C);
  width: 100%;
  overflow-x: hidden;
}

.sk-services-container {
  width: 100%;
  max-width: var(--sk-max, 1320px);
  margin-inline: auto;
  padding-inline: var(--sk-page-margin, clamp(1.5rem, 4vw, 4rem));
}

/* ── Hero de Servicios ───────────────────────────────────── */
.sk-services-hero {
  padding-block: clamp(3.5rem, 6vh, 5.5rem) clamp(2rem, 3.5vh, 3rem);
  text-align: center;
  background: var(--sk-ivory, #FAF9F7);
}

.sk-services-hero__heading {
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  font-family: var(--sk-font-serif);
  font-weight: 400;
  line-height: 1.12;
  color: var(--sk-dark, #1C1C1C);
  margin-block: 0.5rem 1rem;
  letter-spacing: -0.025em;
}

.sk-services-hero__lead {
  font-family: var(--sk-font-sans);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.7;
  color: var(--sk-muted, #6B6057);
  max-width: 660px;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

/* Filtros de Categoría */
.sk-services-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.sk-filter-btn {
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.65rem 1.4rem;
  border-radius: 40px;
  background: var(--sk-white, #FFFFFF);
  color: var(--sk-muted, #6B6057);
  border: 1px solid rgba(197, 185, 168, 0.6);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.sk-filter-btn:hover {
  border-color: var(--sk-dark, #1C1C1C);
  color: var(--sk-dark, #1C1C1C);
  transform: translateY(-1px);
}

.sk-filter-btn.is-active {
  background: var(--sk-dark, #1C1C1C);
  color: var(--sk-ivory, #FAF9F7);
  border-color: var(--sk-dark, #1C1C1C);
  box-shadow: 0 4px 12px rgba(28, 28, 28, 0.16);
  transform: translateY(-1px);
}

/* ── Catálogo y Grid de Tarjetas ─────────────────────────── */
.sk-services-catalog {
  padding-block: clamp(1rem, 2vh, 2rem) clamp(4rem, 8vh, 6.5rem);
}

.sk-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: clamp(1.75rem, 2.5vw, 2.5rem);
}

/* Tarjeta de Servicio Individual */
.sk-service-card {
  background: var(--sk-white, #FFFFFF);
  border: 1px solid rgba(197, 185, 168, 0.45);
  border-radius: 16px;
  padding: clamp(1.75rem, 3vh, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, opacity 0.25s ease;
  position: relative;
}

.sk-service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px -12px rgba(28, 28, 28, 0.12);
  border-color: var(--sk-taupe, #C5B9A8);
}

/* Cabecera de la Tarjeta */
.sk-service-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(232, 224, 213, 0.65);
  padding-bottom: 1.15rem;
}

.sk-service-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}

.sk-service-card__category-tag {
  font-family: var(--sk-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sk-accent, #8B7355);
}

.sk-service-card__badge {
  display: inline-block;
  background: var(--sk-beige, #E8E0D5);
  color: var(--sk-deep, #3D3028);
  font-family: var(--sk-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
}

/* Bloque de Precio Editable */
.sk-service-card__pricing {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-shrink: 0;
  background: var(--sk-light, #F4F0EA);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(197, 185, 168, 0.4);
}

/* ── Tarjetas de Servicio Visuales con Fotografía & Popup ──────────────── */
.sk-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-block: 1rem 3.5rem;
}

.sk-service-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid rgba(220, 212, 203, 0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(43, 33, 26, 0.04);
}

.sk-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(43, 33, 26, 0.1);
  border-color: rgba(139, 115, 85, 0.45);
}

.sk-service-card:focus-visible {
  outline: 2px solid var(--sk-accent, #8B7355);
  outline-offset: 3px;
}

/* Media de la tarjeta */
.sk-service-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #201A16;
}

.sk-service-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sk-service-card:hover .sk-service-card__img {
  transform: scale(1.06);
}

.sk-service-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: rgba(28, 28, 28, 0.85);
  color: var(--sk-ivory, #FAF9F7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--sk-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sk-service-card__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 28, 28, 0.5) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.sk-service-card:hover .sk-service-card__media-overlay {
  opacity: 1;
}

.sk-service-card__media-hint {
  background: rgba(250, 249, 247, 0.95);
  color: var(--sk-dark, #1C1C1C);
  padding: 0.5rem 1rem;
  border-radius: 30px;
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transform: translateY(6px);
  transition: transform 0.3s ease;
}

.sk-service-card:hover .sk-service-card__media-hint {
  transform: translateY(0);
}

/* Cuerpo de la tarjeta */
.sk-service-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.sk-service-card__meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 0.75rem;
}

.sk-service-card__category-tag {
  font-family: var(--sk-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sk-accent, #8B7355);
}

.sk-service-card__pricing {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  background: var(--sk-light, #F4F0EA);
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(197, 185, 168, 0.35);
}

.sk-service-card__price-prefix {
  font-size: 0.6875rem;
  color: var(--sk-muted, #6B6057);
}

.sk-service-card__price-amount {
  font-family: var(--sk-font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--sk-dark, #1C1C1C);
  line-height: 1;
}

.sk-service-card__price-suffix {
  font-size: 0.625rem;
  color: var(--sk-muted, #6B6057);
  font-weight: 600;
  text-transform: uppercase;
}

.sk-service-card__title {
  font-family: var(--sk-font-serif);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--sk-dark, #1C1C1C);
  line-height: 1.25;
  margin: 0 0 0.35rem 0;
}

.sk-service-card__tagline {
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--sk-muted, #6B6057);
  margin: 0 0 0.85rem 0;
  line-height: 1.4;
  min-height: 2.2em;
}

.sk-service-card__view-prompt {
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sk-accent, #8B7355);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  transition: gap 0.2s ease, color 0.2s ease;
}

.sk-service-card:hover .sk-service-card__view-prompt {
  gap: 0.6rem;
  color: var(--sk-dark, #1C1C1C);
}

.sk-service-card__footer {
  margin-top: auto;
  padding-top: 0.5rem;
}

.sk-service-card__btn {
  width: 100%;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(28, 28, 28, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.sk-service-card__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(28, 28, 28, 0.2);
}

/* ── Modal Popup de Detalles de Servicio ──────────────────── */
body.sk-modal-open {
  overflow: hidden !important;
  touch-action: none;
}

.sk-service-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sk-service-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

.sk-service-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 19, 17, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.sk-service-modal__dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 920px;
  max-height: 88vh;
  background: var(--sk-ivory, #FAF9F7);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(220, 212, 203, 0.7);
}

.sk-service-modal.is-active .sk-service-modal__dialog {
  transform: scale(1) translateY(0);
}

.sk-service-modal__close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(220, 212, 203, 0.7);
  color: var(--sk-dark, #1C1C1C);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: all 0.25s ease;
}

.sk-service-modal__close-btn:hover {
  background: var(--sk-dark, #1C1C1C);
  color: var(--sk-ivory, #FAF9F7);
  transform: rotate(90deg);
}

.sk-service-modal__scroll {
  overflow-y: auto;
  max-height: 88vh;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

/* Modal Grid */
.sk-modal-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: 480px;
}

.sk-modal-media-col {
  background: #F4F0EA;
  padding: 1.75rem;
  border-right: 1px solid rgba(220, 212, 203, 0.6);
  display: flex;
  flex-direction: column;
}

.sk-modal-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: #201A16;
  box-shadow: 0 6px 18px rgba(43, 33, 26, 0.1);
}

.sk-modal-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sk-modal-badge {
  top: 10px;
  left: 10px;
}

.sk-modal-price-box {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(197, 185, 168, 0.4);
  text-align: center;
  margin-bottom: 1.25rem;
}

.sk-modal-price-label {
  font-family: var(--sk-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sk-muted, #6B6057);
  display: block;
  margin-bottom: 0.25rem;
}

.sk-modal-price-value {
  font-family: var(--sk-font-serif);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--sk-dark, #1C1C1C);
  line-height: 1.1;
}

.sk-modal-price-value small {
  font-size: 0.8125rem;
  font-family: var(--sk-font-sans);
  font-weight: 500;
  color: var(--sk-muted, #6B6057);
}

.sk-modal-quick-info {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  color: var(--sk-muted, #6B6057);
  margin-top: auto;
}

.sk-modal-quick-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sk-modal-quick-item svg {
  color: var(--sk-accent, #8B7355);
  flex-shrink: 0;
}

.sk-modal-info-col {
  padding: 2.25rem 2.25rem 2rem;
  display: flex;
  flex-direction: column;
}

.sk-modal-category {
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--sk-accent, #8B7355);
  margin-bottom: 0.4rem;
}

.sk-modal-title {
  font-family: var(--sk-font-serif);
  font-size: clamp(1.65rem, 2.5vw, 2.2rem);
  font-weight: 400;
  line-height: 1.18;
  color: var(--sk-dark, #1C1C1C);
  margin: 0 0 0.4rem 0;
}

.sk-modal-tagline {
  font-family: var(--sk-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sk-accent, #8B7355);
  margin: 0 0 1.25rem 0;
  line-height: 1.4;
}

.sk-modal-desc {
  font-family: var(--sk-font-sans);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #4A4037;
  margin-bottom: 1.25rem;
}

.sk-modal-box {
  background: var(--sk-light, #F4F0EA);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  border-left: 3px solid var(--sk-taupe, #C5B9A8);
}

.sk-modal-box--accent {
  background: #EFECE6;
  border-left-color: var(--sk-accent, #8B7355);
}

.sk-modal-box__title {
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sk-dark, #1C1C1C);
  margin: 0 0 0.5rem 0;
}

.sk-modal-box__content {
  font-family: var(--sk-font-sans);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--sk-muted, #6B6057);
}

.sk-modal-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(220, 212, 203, 0.6);
  flex-wrap: wrap;
}

.sk-modal-book-btn {
  flex: 1;
  min-width: 180px;
  justify-content: center;
  padding: 0.95rem 1.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
}

.sk-modal-close-action {
  padding: 0.95rem 1.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.07em;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(197, 185, 168, 0.6);
  color: var(--sk-dark, #1C1C1C);
  border-radius: 6px;
  transition: all 0.25s ease;
}

.sk-modal-close-action:hover {
  background: var(--sk-dark, #1C1C1C);
  color: #FFFFFF;
  border-color: var(--sk-dark, #1C1C1C);
}

/* ── Banner de Asesoría Inferior ─────────────────────────── */
.sk-services-advisory {
  background: linear-gradient(145deg, #2B211A 0%, #1A1715 100%);
  color: var(--sk-ivory, #FAF9F7);
  padding-block: clamp(4rem, 8vh, 6.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sk-services-advisory::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 185, 168, 0.4), transparent);
}

.sk-services-advisory__box {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sk-services-advisory__title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.18;
  color: var(--sk-ivory, #FAF9F7);
  margin-block: 0.75rem 1.25rem;
  font-weight: 400;
}

.sk-services-advisory__desc {
  font-family: var(--sk-font-sans);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--sk-beige, #E8E0D5);
  max-width: 580px;
  margin: 0 auto 2.25rem auto;
  opacity: 0.9;
}

.sk-services-advisory__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.sk-services-advisory__actions .sk-btn--primary {
  background: var(--sk-ivory, #FAF9F7);
  color: var(--sk-dark, #1C1C1C);
  border-color: var(--sk-ivory, #FAF9F7);
}

.sk-services-advisory__actions .sk-btn--primary:hover {
  background: var(--sk-beige, #E8E0D5);
  border-color: var(--sk-beige, #E8E0D5);
  color: var(--sk-dark, #1C1C1C);
}

/* ── Responsive Tablet & Mobile ──────────────────────────── */
@media (max-width: 980px) {
  .sk-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .sk-modal-grid {
    grid-template-columns: 1fr;
  }

  .sk-modal-media-col {
    border-right: none;
    border-bottom: 1px solid rgba(220, 212, 203, 0.6);
    padding: 1.5rem;
  }

  .sk-modal-img-wrap {
    max-height: 260px;
  }

  .sk-modal-info-col {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .sk-services-filters {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sk-services-filters::-webkit-scrollbar {
    display: none;
  }

  .sk-filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .sk-services-advisory__actions {
    flex-direction: column;
    width: 100%;
  }

  .sk-services-advisory__actions .sk-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .sk-services-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .sk-service-card__body {
    padding: 1.25rem;
  }

  .sk-modal-actions {
    flex-direction: column;
    width: 100%;
  }

  .sk-modal-actions .sk-btn,
  .sk-modal-close-action {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ── 25. BOTÓN FLOTANTE DE WHATSAPP (BRANDED LUXURY) ─────── */
.sk-whatsapp-float {
  position: fixed;
  bottom: clamp(1.25rem, 3.5vh, 2rem);
  right: clamp(1.25rem, 3.5vw, 2.25rem);
  z-index: 99990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  gap: 0.75rem;
}

/* Tooltip / Globo de ayuda */
.sk-whatsapp-float__tooltip {
  max-width: 290px;
  background: var(--sk-ivory, #FAF9F7);
  border: 1px solid rgba(197, 185, 168, 0.7);
  border-radius: 14px;
  padding: 0.9rem 1.15rem;
  box-shadow: 0 12px 32px rgba(28, 28, 28, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  color: var(--sk-dark, #1C1C1C);
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  margin-right: 0.5rem;
  display: flex;
  flex-direction: column;
}

.sk-whatsapp-float__tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.sk-whatsapp-float__tooltip.is-dismissed {
  display: none !important;
}

/* Flecha inferior del tooltip */
.sk-whatsapp-float__tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 22px;
  width: 12px;
  height: 12px;
  background: var(--sk-ivory, #FAF9F7);
  border-right: 1px solid rgba(197, 185, 168, 0.7);
  border-bottom: 1px solid rgba(197, 185, 168, 0.7);
  transform: rotate(45deg);
}

.sk-whatsapp-float__tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.sk-whatsapp-float__tooltip-header-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sk-whatsapp-float__status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
  flex-shrink: 0;
}

.sk-whatsapp-float__tooltip-title {
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sk-accent, #8B7355);
}

.sk-whatsapp-float__tooltip-close {
  background: transparent;
  border: none;
  color: var(--sk-muted, #6B6057);
  cursor: pointer;
  padding: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
}

.sk-whatsapp-float__tooltip-close:hover {
  color: var(--sk-dark, #1C1C1C);
  transform: scale(1.15);
}

.sk-whatsapp-float__tooltip-body {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.sk-whatsapp-float__tooltip-body:hover {
  opacity: 0.88;
}

.sk-whatsapp-float__tooltip-body:focus-visible {
  outline: 2px solid var(--sk-accent, #8B7355);
  outline-offset: 2px;
  border-radius: 6px;
}

.sk-whatsapp-float__tooltip-text {
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #3D3028;
  margin: 0;
}

.sk-whatsapp-float__tooltip-text strong {
  color: var(--sk-dark, #1C1C1C);
  font-weight: 600;
}

/* Botón Circular Principal */
.sk-whatsapp-float__btn {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #1C1C1C;
  color: #FAF9F7;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(197, 185, 168, 0.65);
  box-shadow: 0 8px 24px rgba(28, 28, 28, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease;
  animation: sk-wa-breathe 4s ease-in-out infinite;
}

.sk-whatsapp-float__btn:hover {
  background: #2B211A;
  border-color: #FAF9F7;
  transform: scale(1.08) translateY(-3px);
  box-shadow: 0 14px 32px rgba(43, 33, 26, 0.45), 0 4px 10px rgba(0, 0, 0, 0.2);
  animation-play-state: paused;
}

.sk-whatsapp-float__btn:focus-visible {
  outline: 2px solid var(--sk-accent, #8B7355);
  outline-offset: 4px;
}

.sk-whatsapp-float__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FAF9F7;
  transition: transform 0.3s ease;
}

.sk-whatsapp-float__btn:hover .sk-whatsapp-float__icon {
  transform: scale(1.06);
}

/* Ondas de Pulso Suave */
.sk-whatsapp-float__pulse-wave {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid #8B7355;
  pointer-events: none;
  opacity: 0;
}

.sk-whatsapp-float__pulse-wave--1 {
  animation: sk-wa-pulse 3s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.sk-whatsapp-float__pulse-wave--2 {
  animation: sk-wa-pulse 3s cubic-bezier(0.25, 1, 0.5, 1) infinite 1.4s;
}

@keyframes sk-wa-pulse {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    opacity: 0.35;
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

@keyframes sk-wa-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

/* Adaptación a dispositivos móviles */
@media (max-width: 600px) {
  .sk-whatsapp-float {
    bottom: 1.25rem;
    right: 1.25rem;
    gap: 0.5rem;
  }

  .sk-whatsapp-float__btn {
    width: 56px;
    height: 56px;
  }

  .sk-whatsapp-float__icon svg {
    width: 25px;
    height: 25px;
  }

  .sk-whatsapp-float__tooltip {
    max-width: calc(100vw - 2.5rem);
    margin-right: 0;
  }
}

/* ============================================================
   26. PÁGINA DE CONTACTO EDITORIAL & BRANDED FORM
   ============================================================ */

.sk-contact-page {
  background-color: var(--sk-ivory, #FAF9F7);
  color: var(--sk-dark, #1C1C1C);
  min-height: 100vh;
}

.sk-contact-container {
  width: 100%;
  max-width: var(--sk-max, 1320px);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3.5vw, 3rem);
}

/* Header Editorial Hero */
.sk-contact-hero {
  padding: clamp(3.5rem, 7vh, 6rem) 0 clamp(2rem, 4vh, 3.5rem);
  text-align: center;
  border-bottom: 1px solid rgba(197, 185, 168, 0.4);
}

.sk-contact-hero__content {
  max-width: 780px;
  margin: 0 auto;
}

.sk-contact-hero__title {
  font-family: var(--sk-font-serif);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  color: var(--sk-dark, #1C1C1C);
  margin: 0.75rem 0 1rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.sk-contact-hero__subtitle {
  font-family: var(--sk-font-sans);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  color: var(--sk-muted, #6B6057);
  margin: 0 auto;
}

/* Layout Principal de 2 Columnas */
.sk-contact-main {
  padding: clamp(3rem, 6vh, 5.5rem) 0;
}

.sk-contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

/* Columna Izquierda: Información Institucional */
.sk-contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sk-contact-card {
  background: var(--sk-white, #FFFFFF);
  border: 1px solid rgba(197, 185, 168, 0.55);
  border-radius: 16px;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  box-shadow: 0 4px 20px rgba(28, 28, 28, 0.04);
}

.sk-contact-card--brand {
  background: linear-gradient(135deg, #FFFFFF 0%, #F9F7F4 100%);
  border-left: 4px solid var(--sk-accent, #8B7355);
}

.sk-contact-brand-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sk-contact-brand-title {
  font-family: var(--sk-font-serif);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sk-dark, #1C1C1C);
}

.sk-contact-brand-tag {
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sk-accent, #8B7355);
  font-weight: 700;
}

.sk-contact-legal-text {
  font-family: var(--sk-font-sans);
  font-size: 0.9375rem;
  color: var(--sk-deep, #3D3028);
  margin: 0 0 0.85rem;
}

.sk-contact-brand-desc {
  font-family: var(--sk-font-sans);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--sk-muted, #6B6057);
  margin: 0;
}

/* Canales de Contacto */
.sk-contact-channels {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sk-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
  background: var(--sk-white, #FFFFFF);
  border: 1px solid rgba(197, 185, 168, 0.45);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.sk-contact-item:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 115, 85, 0.5);
  box-shadow: 0 8px 24px rgba(28, 28, 28, 0.06);
}

.sk-contact-item__icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(139, 115, 85, 0.08);
  color: var(--sk-accent, #8B7355);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease;
}

.sk-contact-item:hover .sk-contact-item__icon-wrap {
  background: var(--sk-dark, #1C1C1C);
  color: var(--sk-ivory, #FAF9F7);
}

.sk-contact-item__content {
  flex: 1;
}

.sk-contact-item__label {
  display: block;
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sk-accent, #8B7355);
  margin-bottom: 0.25rem;
}

.sk-contact-item__val {
  font-family: var(--sk-font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--sk-dark, #1C1C1C);
  margin: 0 0 0.25rem;
}

.sk-contact-item__link {
  display: inline-block;
  font-family: var(--sk-font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--sk-dark, #1C1C1C);
  text-decoration: none;
  margin-bottom: 0.35rem;
  transition: color 0.2s ease;
}

.sk-contact-item__link:hover {
  color: var(--sk-accent, #8B7355);
}

.sk-contact-item__sub {
  display: block;
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  color: var(--sk-muted, #6B6057);
  line-height: 1.45;
}

.sk-contact-item__actions {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.65rem;
  flex-wrap: wrap;
}

.sk-contact-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.sk-contact-action-btn--wa {
  background: var(--sk-dark, #1C1C1C);
  color: var(--sk-ivory, #FAF9F7);
}

.sk-contact-action-btn--wa:hover {
  background: var(--sk-accent, #8B7355);
  transform: translateY(-1px);
}

.sk-contact-action-btn--phone {
  background: rgba(197, 185, 168, 0.2);
  color: var(--sk-dark, #1C1C1C);
  border: 1px solid rgba(197, 185, 168, 0.5);
}

.sk-contact-action-btn--phone:hover {
  background: rgba(197, 185, 168, 0.35);
  color: var(--sk-dark, #1C1C1C);
}

/* Card de Horarios de Atención */
.sk-contact-card--hours {
  background: #FFFFFF;
  border: 1px solid rgba(197, 185, 168, 0.55);
}

.sk-contact-hours-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(197, 185, 168, 0.3);
  margin-bottom: 1.15rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sk-contact-hours-icon-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sk-accent, #8B7355);
}

.sk-contact-hours-title {
  font-family: var(--sk-font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sk-dark, #1C1C1C);
}

.sk-contact-status-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sk-font-sans);
  font-size: 0.75rem;
  color: var(--sk-muted, #6B6057);
}

.sk-contact-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.sk-contact-hours-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sk-contact-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sk-font-sans);
  font-size: 0.9375rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed rgba(197, 185, 168, 0.3);
}

.sk-contact-hours-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sk-contact-hours-day {
  color: var(--sk-deep, #3D3028);
  font-weight: 500;
}

.sk-contact-hours-time {
  font-weight: 600;
  color: var(--sk-dark, #1C1C1C);
}

.sk-contact-badge-closed {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 12px;
  background: rgba(139, 115, 85, 0.12);
  color: var(--sk-accent, #8B7355);
  font-size: 0.8125rem;
  font-weight: 700;
}

.sk-contact-hours-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--sk-muted, #6B6057);
  background: rgba(244, 240, 234, 0.5);
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

.sk-contact-hours-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--sk-accent, #8B7355);
}

/* Columna Derecha: Formulario de Contacto Branded */
.sk-contact-form-card {
  background: var(--sk-white, #FFFFFF);
  border: 1px solid rgba(197, 185, 168, 0.6);
  border-radius: 20px;
  padding: clamp(2rem, 3.5vw, 3rem);
  box-shadow: 0 16px 40px rgba(28, 28, 28, 0.05);
}

.sk-contact-form-header {
  margin-bottom: 2rem;
}

.sk-contact-form-title {
  font-family: var(--sk-font-serif);
  font-size: clamp(1.8rem, 2.8vw, 2.35rem);
  color: var(--sk-dark, #1C1C1C);
  margin: 0.5rem 0 0.65rem;
  letter-spacing: -0.02em;
}

.sk-contact-form-desc {
  font-family: var(--sk-font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sk-muted, #6B6057);
  margin: 0;
}

/* Alertas de Formulario */
.sk-form-alert {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-radius: 12px;
  margin-bottom: 1.75rem;
  font-family: var(--sk-font-sans);
}

.sk-form-alert--success {
  background: #F0FDF4;
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #065F46;
}

.sk-form-alert--success svg {
  color: #10B981;
  flex-shrink: 0;
  margin-top: 2px;
}

.sk-form-alert--error {
  background: #FEF2F2;
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #991B1B;
}

.sk-form-alert--error svg {
  color: #EF4444;
  flex-shrink: 0;
  margin-top: 2px;
}

.sk-form-alert__title {
  display: block;
  font-size: 0.9375rem;
  margin-bottom: 0.2rem;
}

.sk-form-alert__msg {
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.45;
}

/* Grid de Formulario */
.sk-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.35rem 1.25rem;
}

.sk-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sk-form-group--full {
  grid-column: 1 / -1;
}

.sk-form-label {
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sk-deep, #3D3028);
}

.sk-form-req {
  color: #B91C1C;
  font-weight: 700;
}

.sk-form-input,
.sk-form-select,
.sk-form-textarea {
  width: 100%;
  font-family: var(--sk-font-sans);
  font-size: 0.9375rem;
  color: var(--sk-dark, #1C1C1C);
  background: var(--sk-ivory, #FAF9F7);
  border: 1.5px solid rgba(197, 185, 168, 0.55);
  border-radius: 10px;
  padding: 0.85rem 1.15rem;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.sk-form-input:focus,
.sk-form-select:focus,
.sk-form-textarea:focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--sk-accent, #8B7355);
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.15);
}

.sk-form-input::placeholder,
.sk-form-textarea::placeholder {
  color: #A3978B;
}

.sk-select-wrapper {
  position: relative;
  width: 100%;
}

.sk-form-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.5rem;
}

.sk-select-arrow {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--sk-accent, #8B7355);
}

.sk-form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

/* Footer del Formulario */
.sk-form-footer {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(197, 185, 168, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.sk-form-privacy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sk-font-sans);
  font-size: 0.8125rem;
  color: var(--sk-muted, #6B6057);
  max-width: 320px;
  line-height: 1.4;
}

.sk-form-privacy svg {
  flex-shrink: 0;
  color: var(--sk-accent, #8B7355);
}

.sk-contact-submit {
  flex-shrink: 0;
}

/* Sección FAQ Complementaria */
.sk-contact-faq {
  padding: clamp(3.5rem, 6vh, 5.5rem) 0;
  background: #FFFFFF;
  border-top: 1px solid rgba(197, 185, 168, 0.4);
  border-bottom: 1px solid rgba(197, 185, 168, 0.4);
}

.sk-contact-faq-heading {
  font-family: var(--sk-font-serif);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  color: var(--sk-dark, #1C1C1C);
  margin: 0.5rem 0 0.75rem;
}

.sk-contact-faq-sub {
  font-family: var(--sk-font-sans);
  font-size: 1rem;
  color: var(--sk-muted, #6B6057);
  margin: 0;
}

.sk-contact-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

.sk-contact-faq-card {
  background: var(--sk-ivory, #FAF9F7);
  border: 1px solid rgba(197, 185, 168, 0.45);
  border-radius: 14px;
  padding: clamp(1.5rem, 2.2vw, 2rem);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.sk-contact-faq-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 115, 85, 0.5);
  box-shadow: 0 10px 28px rgba(28, 28, 28, 0.06);
}

.sk-contact-faq-num {
  font-family: var(--sk-font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: rgba(139, 115, 85, 0.4);
  margin-bottom: 0.5rem;
}

.sk-contact-faq-q {
  font-family: var(--sk-font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--sk-dark, #1C1C1C);
  margin: 0 0 0.65rem;
  line-height: 1.3;
}

.sk-contact-faq-a {
  font-family: var(--sk-font-sans);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--sk-deep, #3D3028);
  margin: 0;
}

/* Banner de Cierre: WhatsApp Inmediato */
.sk-contact-cta-banner {
  padding: clamp(3.5rem, 7vh, 6rem) 0;
  background: var(--sk-ivory, #FAF9F7);
}

.sk-contact-cta-box {
  background: var(--sk-dark, #1C1C1C);
  color: var(--sk-ivory, #FAF9F7);
  border-radius: 24px;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  text-align: center;
  box-shadow: 0 24px 60px rgba(28, 28, 28, 0.25);
  border: 1px solid rgba(197, 185, 168, 0.2);
}

.sk-contact-cta-title {
  font-family: var(--sk-font-serif);
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  color: #FFFFFF;
  margin: 0.65rem 0 1rem;
}

.sk-contact-cta-desc {
  font-family: var(--sk-font-sans);
  font-size: clamp(0.95rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: rgba(250, 249, 247, 0.8);
  max-width: 650px;
  margin: 0 auto 2rem;
}

.sk-contact-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Responsividad para Móviles y Tablets */
@media (max-width: 990px) {
  .sk-contact-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .sk-contact-faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .sk-form-grid {
    grid-template-columns: 1fr;
  }

  .sk-form-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .sk-contact-submit {
    width: 100%;
    justify-content: center;
  }

  .sk-contact-cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .sk-contact-cta-actions .sk-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   27. SPAM PROTECTION BADGES (hCaptcha & reCAPTCHA)
   Reposicionar en el lado izquierdo para evitar solapamiento con WhatsApp
   ========================================================================== */
#shop-hcaptcha-badge-container,
.grecaptcha-badge {
  left: 24px !important;
  right: auto !important;
  bottom: 24px !important;
  transform: none !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  z-index: 9999 !important;
}

#shop-hcaptcha-badge-container:hover,
#shop-hcaptcha-badge-container:focus,
.grecaptcha-badge:hover,
.grecaptcha-badge:focus {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
}

@media (max-width: 768px) {
  #shop-hcaptcha-badge-container,
  .grecaptcha-badge {
    left: 14px !important;
    bottom: 16px !important;
    transform: scale(0.88) !important;
    transform-origin: bottom left !important;
  }

  #shop-hcaptcha-badge-container:hover,
  .grecaptcha-badge:hover {
    transform: scale(0.88) !important;
  }
}

/* ============================================================
   SKINOLOGY — LUXURY PRODUCT PRESENTATION & CATALOG SUITE
   ============================================================ */

/* ── 1. COLLECTION PAGE EDITORIAL HEADER ─────────────────── */
.sk-collection-eyebrow {
  display: block;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sk-accent, #8B7355);
  margin-bottom: 0.65rem;
}

.sk-collection-title {
  font-family: var(--sk-font-serif, 'Playfair Display', Georgia, serif);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--sk-dark, #1C1C1C);
  margin: 0 0 1rem 0;
  letter-spacing: -0.02em;
}

.sk-collection-description {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--sk-muted, #6B6057);
  max-width: 720px;
  margin: 0;
}

/* ── 2. PRODUCT CARDS (LUXURY PRESENTATION) ──────────────── */
.sk-product-card-luxury {
  border-radius: 14px !important;
  background: var(--sk-white, #FFFFFF) !important;
  border: 1px solid rgba(28, 28, 28, 0.07) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.35s ease !important;
  overflow: hidden !important;
  padding: 0 0 1.25rem 0 !important;
}

.sk-product-card-luxury:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px rgba(28, 28, 28, 0.09) !important;
  border-color: rgba(197, 185, 168, 0.45) !important;
}

/* Card titles */
.sk-product-card-luxury h4,
.sk-product-card-luxury .product-title,
.sk-product-card-luxury .product-title * {
  font-family: var(--sk-font-serif, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--sk-dark, #1C1C1C) !important;
  padding-inline: 1rem !important;
  margin-top: 0.75rem !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.sk-product-card-luxury:hover h4,
.sk-product-card-luxury:hover .product-title,
.sk-product-card-luxury:hover .product-title * {
  color: var(--sk-accent, #8B7355) !important;
}

/* Card price */
.sk-product-card-luxury .price,
.sk-product-card-luxury .price * {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif) !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: var(--sk-deep, #3D3028) !important;
  padding-inline: 1rem !important;
  letter-spacing: 0.02em !important;
}

/* Overlay brand badge on cards with image */
.sk-card-brand-badge-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(250, 249, 247, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--sk-dark, #1C1C1C);
  border: 1px solid rgba(197, 185, 168, 0.35);
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ── 3. LUXURY PLACEHOLDER CARDS (NO IMAGE UPLOADED YET) ──── */
.sk-card-placeholder-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #FAF8F5 0%, #F1ECE3 100%);
  border-bottom: 1px solid rgba(197, 185, 168, 0.25);
}

.sk-card-placeholder-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: inherit;
  padding: 1.25rem;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  position: relative;
  transition: background 0.3s ease;
}

.sk-card-placeholder-wrap:hover .sk-card-placeholder-link {
  background: linear-gradient(145deg, #FAF8F5 0%, #EAE4D8 100%);
}

.sk-card-placeholder-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.sk-card-placeholder-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(197, 185, 168, 0.3);
  padding: 3px 9px;
  border-radius: 12px;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--sk-accent, #8B7355);
}

.sk-card-placeholder-tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sk-accent, #8B7355);
  display: inline-block;
}

.sk-card-placeholder-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
  padding: 0.75rem 0;
  gap: 0.75rem;
}

.sk-card-placeholder-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 180px;
  height: 55px;
  transition: transform 0.35s ease;
}

.sk-card-placeholder-wrap:hover .sk-card-placeholder-logo-container {
  transform: scale(1.05);
}

.sk-card-placeholder-logo-img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: contrast(1.05);
}

.sk-placeholder-logo--revitalash img {
  max-height: 52px;
}
.sk-placeholder-logo--colorescience img {
  max-height: 38px;
}
.sk-placeholder-logo--siv img {
  max-height: 42px;
}
.sk-placeholder-logo--adipeau img {
  max-height: 38px;
}
.sk-placeholder-logo--hydrinity img {
  max-height: 44px;
}

.sk-card-placeholder-brand-name {
  font-family: var(--sk-font-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--sk-dark, #1C1C1C);
  text-align: center;
}

.sk-card-placeholder-emblem {
  color: var(--sk-taupe, #C5B9A8);
  opacity: 0.65;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sk-card-placeholder-wrap:hover .sk-card-placeholder-emblem {
  opacity: 1;
  color: var(--sk-accent, #8B7355);
  transform: rotate(45deg);
}

.sk-card-placeholder-footer {
  width: 100%;
  text-align: center;
}

.sk-card-placeholder-seal {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--sk-muted, #6B6057);
  opacity: 0.8;
  text-transform: uppercase;
}

/* ── 4. PRODUCT DETAIL PAGE (PDP) SHOWCASE (NO MEDIA) ────── */
.sk-pdp-showcase {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(150deg, #FAF8F5 0%, #EDE6DC 100%);
  border: 1px solid rgba(197, 185, 168, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-sizing: border-box;
}

.sk-pdp-showcase-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.75rem;
}

.sk-pdp-showcase-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.sk-pdp-showcase-pill {
  display: inline-block;
  background: var(--sk-dark, #1C1C1C);
  color: var(--sk-ivory, #FAF9F7);
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  padding: 5px 14px;
  border-radius: 20px;
}

.sk-pdp-showcase-sub {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--sk-accent, #8B7355);
}

.sk-pdp-showcase-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.sk-pdp-showcase-logo-frame {
  max-width: 260px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.sk-pdp-showcase-img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sk-pdp-showcase-logo--revitalash img { max-height: 72px; }
.sk-pdp-showcase-logo--colorescience img { max-height: 52px; }
.sk-pdp-showcase-logo--siv img { max-height: 58px; }
.sk-pdp-showcase-logo--adipeau img { max-height: 54px; }
.sk-pdp-showcase-logo--hydrinity img { max-height: 60px; }

.sk-pdp-showcase-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 60%;
  margin: 0.75rem auto 1.25rem auto;
}

.sk-pdp-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(197, 185, 168, 0.45);
}

.sk-pdp-divider-emblem {
  color: var(--sk-accent, #8B7355);
  font-size: 0.75rem;
}

.sk-pdp-showcase-product-name {
  font-family: var(--sk-font-serif, 'Playfair Display', Georgia, serif);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--sk-dark, #1C1C1C);
  max-width: 440px;
}

.sk-pdp-showcase-badges {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 420px;
  border-top: 1px solid rgba(197, 185, 168, 0.35);
  padding-top: 1.25rem;
}

.sk-pdp-showcase-badge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.8125rem;
  color: var(--sk-deep, #3D3028);
  text-align: left;
}

.sk-pdp-showcase-badge-item svg {
  color: var(--sk-accent, #8B7355);
  flex-shrink: 0;
}

/* ── 5. PDP DIRECT WHATSAPP BUTTON & CLINICAL TRUST BAR ──── */
.sk-pdp-direct-whatsapp-action {
  margin-top: 0.85rem;
  width: 100%;
}

.sk-pdp-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 1rem 1.5rem;
  background: #25D366;
  color: #FFFFFF !important;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  box-sizing: border-box;
}

.sk-pdp-whatsapp-btn:hover {
  background: #20bd5a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.38);
}

.sk-pdp-wa-svg {
  flex-shrink: 0;
}

.sk-pdp-clinical-trust {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border-radius: 12px;
  background: rgba(244, 240, 234, 0.7);
  border: 1px solid rgba(197, 185, 168, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sk-pdp-trust-pill {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
}

.sk-pdp-trust-icon {
  color: var(--sk-accent, #8B7355);
  font-size: 0.95rem;
  line-height: 1.2;
}

.sk-pdp-trust-desc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sk-pdp-trust-desc strong {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sk-dark, #1C1C1C);
}

.sk-pdp-trust-desc span {
  font-size: 0.75rem;
  color: var(--sk-muted, #6B6057);
}

/* ── 6. PDP GENERAL REFINEMENTS (BUTTONS, INPUTS, VARIANTS) ─ */
.product-information h1,
.product-information .product-title h1 {
  font-family: var(--sk-font-serif, 'Playfair Display', Georgia, serif) !important;
  font-size: clamp(1.85rem, 3.2vw, 2.6rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--sk-dark, #1C1C1C) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0.5rem !important;
}

.product-information .price,
.product-information .price * {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif) !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: var(--sk-deep, #3D3028) !important;
}

/* Variant picker luxury pill buttons */
.variant-picker button,
.variant-picker .variant-option,
.variant-picker input[type="radio"] + label {
  border-radius: 8px !important;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em !important;
  transition: all 0.2s ease !important;
  border: 1px solid rgba(28, 28, 28, 0.18) !important;
}

.variant-picker button:hover,
.variant-picker input[type="radio"] + label:hover {
  border-color: var(--sk-accent, #8B7355) !important;
}

/* Add to cart and buy now buttons */
.add-to-cart-button,
.product-form-buttons button.button {
  border-radius: 8px !important;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  transition: all 0.25s ease !important;
}

.quantity-selector {
  border-radius: 8px !important;
  border-color: rgba(28, 28, 28, 0.2) !important;
}

/* ── 7. CONTACT PAGE MAP SECTION ─────────────────────────── */
.sk-contact-map-section {
  padding-block: clamp(3rem, 6vh, 5.5rem);
  background: var(--sk-ivory, #FAF9F7);
  border-top: 1px solid rgba(197, 185, 168, 0.3);
}

.sk-contact-map-heading {
  font-family: var(--sk-font-serif, 'Playfair Display', Georgia, serif);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 400;
  color: var(--sk-dark, #1C1C1C);
  margin: 0.5rem 0 0.75rem 0;
  letter-spacing: -0.02em;
}

.sk-contact-map-sub {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 1.05rem;
  color: var(--sk-muted, #6B6057);
  max-width: 620px;
  margin: 0 auto;
}

.sk-map-wrapper {
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  gap: 0;
  background: var(--sk-white, #FFFFFF);
  border-radius: 18px;
  border: 1px solid rgba(197, 185, 168, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  align-items: stretch;
}

.sk-map-info-card {
  padding: clamp(2rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
  background: linear-gradient(160deg, #FFFFFF 0%, #FAF8F5 100%);
  border-right: 1px solid rgba(197, 185, 168, 0.3);
}

.sk-map-badge {
  display: inline-block;
  background: var(--sk-dark, #1C1C1C);
  color: var(--sk-ivory, #FAF9F7);
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 0.85rem;
}

.sk-map-info-title {
  font-family: var(--sk-font-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--sk-dark, #1C1C1C);
  margin: 0 0 0.75rem 0;
}

.sk-map-info-address {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sk-deep, #3D3028);
  margin: 0;
}

.sk-map-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sk-map-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
}

.sk-map-feat-icon {
  font-size: 1.1rem;
  line-height: 1.2;
}

.sk-map-feat-item strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sk-dark, #1C1C1C);
  margin-bottom: 2px;
}

.sk-map-feat-item span {
  display: block;
  font-size: 0.785rem;
  color: var(--sk-muted, #6B6057);
}

.sk-map-info-actions {
  margin-top: auto;
}

.sk-map-btn {
  width: 100%;
  justify-content: center;
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}

.sk-map-frame-container {
  width: 100%;
  min-height: 480px;
  position: relative;
  background: #EFEBE5;
}

.sk-map-iframe {
  width: 100%;
  height: 100%;
  min-height: 480px;
  display: block;
}

@media (max-width: 900px) {
  .sk-map-wrapper {
    grid-template-columns: 1fr;
  }
  .sk-map-info-card {
    border-right: none;
    border-bottom: 1px solid rgba(197, 185, 168, 0.3);
  }
/* ── 26. CARRITO DE COMPRAS, CHECKOUT & CUENTA DE USUARIO ── */

/* ========================================================
   26.1 CARRITO DE COMPRAS (Página & Drawer)
   ======================================================== */
.cart-items {
  border-radius: 12px;
}

.cart-item {
  padding-block: 1.5rem !important;
  border-bottom: 1px solid rgba(197, 185, 168, 0.25) !important;
}

.cart-item:last-child {
  border-bottom: none !important;
}

.cart-item__media,
.cart-items__media-image {
  border-radius: 8px !important;
  overflow: hidden;
  border: 1px solid rgba(197, 185, 168, 0.35);
  background: #FFFFFF;
}

.cart-item__title a,
.cart-item__title {
  font-family: var(--sk-font-serif, 'Playfair Display', serif);
  font-size: 1.05rem;
  color: #1C1C1C;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.cart-item__title a:hover {
  color: #8B7355;
}

.cart-item__variant-title,
.cart-item__options {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.8125rem;
  color: #6B6057;
  margin-top: 3px;
}

.cart-item__price,
.cart-item__final-price {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-weight: 600;
  color: #1C1C1C;
  font-size: 0.95rem;
}

/* Quantity Selector in Cart */
quantity-selector,
.quantity-selector {
  border: 1px solid rgba(197, 185, 168, 0.6) !important;
  border-radius: 6px !important;
  background: #FAF9F7 !important;
  overflow: hidden;
}

quantity-selector button,
.quantity-selector button {
  color: #1C1C1C !important;
  transition: background 0.2s ease, color 0.2s ease;
}

quantity-selector button:hover,
.quantity-selector button:hover {
  background: rgba(139, 115, 85, 0.12) !important;
  color: #8B7355 !important;
}

quantity-selector input,
.quantity-selector input {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif) !important;
  font-weight: 600 !important;
  color: #1C1C1C !important;
}

/* Cart Summary Card */
.cart-summary,
.cart-page-summary,
.cart__summary {
  background: #FFFFFF !important;
  border: 1px solid rgba(197, 185, 168, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(28, 28, 28, 0.03) !important;
  padding: clamp(1.5rem, 2.5vw, 2rem) !important;
}

.cart-totals__total-label {
  font-family: var(--sk-font-serif, 'Playfair Display', serif) !important;
  font-size: 1.15rem !important;
  color: #1C1C1C !important;
  font-weight: 500 !important;
}

.cart-totals__total-value {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #1C1C1C !important;
  letter-spacing: -0.01em;
}

/* Checkout Button */
.cart__checkout-button,
button[name="checkout"] {
  background: #1C1C1C !important;
  color: #FAF9F7 !important;
  border: 1px solid #1C1C1C !important;
  border-radius: 8px !important;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(28, 28, 28, 0.12) !important;
}

.cart__checkout-button:hover,
button[name="checkout"]:hover {
  background: #8B7355 !important;
  border-color: #8B7355 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(139, 115, 85, 0.28) !important;
}

/* Discount Form in Cart */
.cart-discount__input {
  background: #FAF9F7 !important;
  border: 1px solid rgba(197, 185, 168, 0.6) !important;
  border-radius: 6px !important;
  color: #1C1C1C !important;
  font-size: 0.85rem !important;
}

.cart-discount__input:focus {
  border-color: #8B7355 !important;
  outline: none !important;
}

.cart-discount__button {
  background: #FAF9F7 !important;
  color: #1C1C1C !important;
  border: 1px solid rgba(197, 185, 168, 0.8) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
}

.cart-discount__button:hover {
  background: #1C1C1C !important;
  border-color: #1C1C1C !important;
  color: #FAF9F7 !important;
}

/* Trust Badges in Cart Summary */
.sk-cart-trust-badge {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  background: rgba(232, 224, 213, 0.3);
  border: 1px solid rgba(197, 185, 168, 0.35);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sk-cart-trust-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.775rem;
  color: #6B6057;
  line-height: 1.3;
}

.sk-cart-trust-item svg {
  color: #8B7355;
  flex-shrink: 0;
}

/* ========================================================
   26.2 PERFIL DE USUARIO Y CUENTA (Auth & Dashboard)
   ======================================================== */
.sk-customer-wrapper {
  background: var(--sk-ivory, #FAF9F7);
  min-height: 75vh;
  padding: clamp(3rem, 6vw, 5.5rem) 1.5rem;
  box-sizing: border-box;
}

.sk-customer-container {
  max-width: 480px;
  margin-inline: auto;
}

.sk-customer-dashboard-wrapper {
  padding: clamp(2.5rem, 5vw, 4.5rem) 1.5rem;
}

.sk-customer-dashboard-container {
  max-width: 1200px;
  margin-inline: auto;
}

/* Cards & Panels */
.sk-customer-card,
.sk-customer-panel {
  background: #FFFFFF;
  border: 1px solid rgba(197, 185, 168, 0.35);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(28, 28, 28, 0.035);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-sizing: border-box;
  margin-bottom: 1.75rem;
}

.sk-customer-panel:last-child {
  margin-bottom: 0;
}

/* Header Text */
.sk-customer-header {
  text-align: center;
  margin-bottom: 2rem;
}

.sk-customer-eyebrow {
  display: inline-block;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8B7355;
  margin-bottom: 0.5rem;
}

.sk-customer-title {
  font-family: var(--sk-font-serif, 'Playfair Display', serif);
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  font-weight: 500;
  color: #1C1C1C;
  line-height: 1.2;
  margin: 0 0 0.65rem 0;
}

.sk-customer-subtitle {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.9rem;
  line-height: 1.6;
  color: #6B6057;
  margin: 0;
}

/* Form Fields */
.sk-customer-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
}

.sk-customer-field:last-of-type {
  margin-bottom: 1.5rem;
}

.sk-customer-field-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.sk-customer-label {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1C1C1C;
  letter-spacing: 0.02em;
}

.sk-customer-input {
  width: 100%;
  box-sizing: border-box;
  background: #FAF9F7;
  border: 1px solid rgba(197, 185, 168, 0.6);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.92rem;
  color: #1C1C1C;
  transition: all 0.2s ease;
  outline: none;
}

.sk-customer-input:focus {
  background: #FFFFFF;
  border-color: #8B7355;
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.14);
}

.sk-customer-select {
  appearance: auto;
  cursor: pointer;
}

.sk-customer-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 599px) {
  .sk-customer-row {
    grid-template-columns: 1fr;
  }
}

.sk-customer-checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-block: 1rem 1.5rem;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.84rem;
  color: #6B6057;
  cursor: pointer;
}

.sk-customer-checkbox-field input[type="checkbox"] {
  accent-color: #8B7355;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Buttons & Links */
.sk-customer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sk-customer-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.sk-customer-btn-primary {
  width: 100%;
  box-sizing: border-box;
  background: #1C1C1C;
  color: #FAF9F7;
  border: 1px solid #1C1C1C;
  border-radius: 8px;
  padding: 0.85rem 1.5rem;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(28, 28, 28, 0.08);
}

.sk-customer-btn-primary:hover {
  background: #8B7355;
  border-color: #8B7355;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(139, 115, 85, 0.25);
}

.sk-customer-btn-secondary {
  width: 100%;
  box-sizing: border-box;
  background: #FAF9F7;
  color: #1C1C1C;
  border: 1px solid rgba(197, 185, 168, 0.8);
  border-radius: 8px;
  padding: 0.75rem 1.25rem;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all 0.2s ease;
}

.sk-customer-btn-secondary:hover {
  background: #FFFFFF;
  border-color: #1C1C1C;
  color: #1C1C1C;
}

.sk-customer-btn-outline {
  box-sizing: border-box;
  background: transparent;
  color: #1C1C1C;
  border: 1px solid rgba(28, 28, 28, 0.25);
  border-radius: 8px;
  padding: 0.65rem 1.15rem;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all 0.2s ease;
}

.sk-customer-btn-outline:hover {
  border-color: #1C1C1C;
  background: rgba(28, 28, 28, 0.04);
}

.sk-btn-sm {
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
  width: auto;
}

.sk-btn-danger:hover {
  border-color: #B3261E;
  color: #B3261E;
  background: rgba(179, 38, 30, 0.05);
}

.sk-customer-link-gold {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.78rem;
  color: #8B7355;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sk-customer-link-gold:hover {
  color: #1C1C1C;
  text-decoration: underline;
}

.sk-customer-link-subtle {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.8125rem;
  color: #6B6057;
  text-align: center;
  text-decoration: none;
  transition: color 0.2s ease;
  display: block;
}

.sk-customer-link-subtle:hover {
  color: #1C1C1C;
}

.sk-customer-divider {
  display: flex;
  align-items: center;
  margin-block: 1.75rem 1.25rem;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.78rem;
  color: #8C827A;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sk-customer-divider::before,
.sk-customer-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid rgba(197, 185, 168, 0.4);
}

.sk-customer-divider span {
  padding-inline: 0.85rem;
}

/* Feedback Messages */
.sk-customer-error,
.sk-customer-success {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.85rem;
  line-height: 1.45;
  margin-bottom: 1.5rem;
}

.sk-customer-error {
  background: rgba(179, 38, 30, 0.07);
  border: 1px solid rgba(179, 38, 30, 0.25);
  color: #8C1D18;
}

.sk-customer-error svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.sk-customer-success {
  background: rgba(46, 125, 50, 0.08);
  border: 1px solid rgba(46, 125, 50, 0.25);
  color: #1B5E20;
}

.sk-customer-success svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ========================================================
   26.3 DASHBOARD DEL USUARIO (Mi Cuenta)
   ======================================================== */
.sk-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(197, 185, 168, 0.35);
}

.sk-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.82rem;
  color: #8B7355;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.2s ease, color 0.2s ease;
}

.sk-back-link:hover {
  color: #1C1C1C;
  transform: translateX(-3px);
}

.sk-dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 989px) {
  .sk-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Panel Header */
.sk-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(197, 185, 168, 0.25);
}

.sk-panel-title {
  font-family: var(--sk-font-serif, 'Playfair Display', serif);
  font-size: 1.25rem;
  color: #1C1C1C;
  margin: 0;
  font-weight: 500;
}

.sk-panel-subtitle-sm {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8B7355;
  margin: 0 0 0.5rem 0;
}

.sk-panel-badge {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.75rem;
  color: #6B6057;
  background: #FAF9F7;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(197, 185, 168, 0.4);
}

/* Orders Table */
.sk-orders-table-wrapper {
  overflow-x: auto;
}

.sk-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.88rem;
}

.sk-orders-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B6057;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid rgba(197, 185, 168, 0.4);
}

.sk-orders-table td {
  padding: 1rem 0.85rem;
  border-bottom: 1px solid rgba(197, 185, 168, 0.2);
  color: #1C1C1C;
}

.sk-orders-table tr:hover td {
  background: rgba(250, 249, 247, 0.6);
}

.sk-order-link {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-weight: 600;
  color: #1C1C1C;
  text-decoration: underline;
  text-decoration-color: #8B7355;
  transition: color 0.2s;
}

.sk-order-link:hover {
  color: #8B7355;
}

.sk-order-total {
  font-weight: 600;
}

.text-right {
  text-align: right !important;
}

/* Status Badges */
.sk-status-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}

.sk-status-paid,
.sk-status-fulfilled {
  background: rgba(46, 125, 50, 0.1);
  color: #2E7D32;
  border: 1px solid rgba(46, 125, 50, 0.25);
}

.sk-status-pending,
.sk-status-unfulfilled {
  background: rgba(139, 115, 85, 0.1);
  color: #8B7355;
  border: 1px solid rgba(139, 115, 85, 0.25);
}

.sk-status-refunded,
.sk-status-voided,
.sk-status-unpaid {
  background: rgba(179, 38, 30, 0.08);
  color: #B3261E;
  border: 1px solid rgba(179, 38, 30, 0.2);
}

.sk-default-badge {
  background: rgba(139, 115, 85, 0.12);
  color: #8B7355;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid rgba(139, 115, 85, 0.25);
}

.sk-secondary-badge {
  background: #FAF9F7;
  color: #6B6057;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid rgba(197, 185, 168, 0.4);
}

.sk-cancelled-badge {
  display: inline-block;
  margin-left: 0.5rem;
  background: rgba(179, 38, 30, 0.1);
  color: #B3261E;
  font-size: 0.75rem;
  padding: 2px 7px;
  border-radius: 4px;
}

/* Empty Orders State */
.sk-empty-orders {
  text-align: center;
  padding: 3rem 1.5rem;
}

.sk-empty-icon {
  width: 72px;
  height: 72px;
  margin-inline: auto;
  border-radius: 50%;
  background: rgba(232, 224, 213, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8B7355;
  margin-bottom: 1.25rem;
}

.sk-empty-title {
  font-family: var(--sk-font-serif, 'Playfair Display', serif);
  font-size: 1.35rem;
  color: #1C1C1C;
  margin: 0 0 0.5rem 0;
  font-weight: 500;
}

.sk-empty-desc {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.9rem;
  color: #6B6057;
  max-width: 36ch;
  margin: 0 auto 1.5rem auto;
  line-height: 1.5;
}

/* Profile Info Card */
.sk-profile-info {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.sk-profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1C1C1C;
  color: #FAF9F7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sk-font-serif, 'Playfair Display', serif);
  font-size: 1.15rem;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(28, 28, 28, 0.15);
}

.sk-profile-meta {
  display: flex;
  flex-direction: column;
}

.sk-profile-name {
  font-family: var(--sk-font-serif, 'Playfair Display', serif);
  font-size: 1.15rem;
  color: #1C1C1C;
  margin: 0 0 3px 0;
  font-weight: 500;
}

.sk-profile-email {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.84rem;
  color: #6B6057;
  margin: 0;
}

/* Address Card Details */
.sk-address-details {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.88rem;
  line-height: 1.6;
  color: #4A4A4A;
}

.sk-address-details p {
  margin: 0 0 3px 0;
}

.sk-address-name {
  font-weight: 600;
  color: #1C1C1C;
}

.sk-address-empty {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.85rem;
  color: #6B6057;
  margin: 0 0 1rem 0;
  font-style: italic;
}

.sk-address-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(197, 185, 168, 0.25);
}

/* ========================================================
   26.4 DIRECCIONES (Address Book)
   ======================================================== */
.sk-addresses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.sk-address-card-item {
  display: flex;
  flex-direction: column;
  position: relative;
}

.sk-address-card-default {
  border-color: rgba(139, 115, 85, 0.5);
  box-shadow: 0 4px 20px rgba(139, 115, 85, 0.08);
}

.sk-address-card-header {
  margin-bottom: 0.85rem;
}

.sk-address-recipient {
  font-family: var(--sk-font-serif, 'Playfair Display', serif);
  font-size: 1.1rem;
  color: #1C1C1C;
  margin: 0 0 0.5rem 0;
  font-weight: 500;
}

.sk-address-line {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.86rem;
  color: #555;
  margin: 0 0 3px 0;
  line-height: 1.5;
}

.sk-address-card-actions {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

/* ========================================================
   26.5 DETALLES DE PEDIDO (Order Page)
   ======================================================== */
.sk-order-items-list {
  display: flex;
  flex-direction: column;
}

.sk-order-item-row {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(197, 185, 168, 0.25);
}

.sk-order-item-row:last-child {
  border-bottom: none;
}

.sk-order-item-media img {
  border-radius: 6px;
  border: 1px solid rgba(197, 185, 168, 0.35);
  object-fit: cover;
  display: block;
}

.sk-order-item-placeholder {
  width: 60px;
  height: 60px;
  background: #FAF9F7;
  border-radius: 6px;
  border: 1px solid rgba(197, 185, 168, 0.35);
}

.sk-order-item-title {
  font-family: var(--sk-font-serif, 'Playfair Display', serif);
  font-size: 0.95rem;
  color: #1C1C1C;
  margin: 0 0 2px 0;
  font-weight: 500;
}

.sk-order-item-variant {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.78rem;
  color: #6B6057;
  margin: 0 0 2px 0;
}

.sk-order-item-sku {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.72rem;
  color: #8C827A;
  margin: 0;
}

.sk-order-item-meta-mobile {
  display: none;
}

.sk-order-item-price-col {
  text-align: right;
  display: flex;
  flex-direction: column;
}

.sk-order-item-unit-price {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.88rem;
  color: #6B6057;
}

.sk-order-item-qty {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.78rem;
  color: #8C827A;
}

.sk-order-item-total-col {
  text-align: right;
  padding-left: 1rem;
}

.sk-order-item-line-total {
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: #1C1C1C;
}

@media (max-width: 599px) {
  .sk-order-item-row {
    grid-template-columns: 50px 1fr;
    gap: 0.75rem;
  }
  .sk-order-item-price-col {
    display: none;
  }
  .sk-order-item-total-col {
    display: none;
  }
  .sk-order-item-meta-mobile {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1C1C1C;
    margin-top: 4px;
  }
}

/* Order Financial Breakdown */
.sk-order-summary-breakdown {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(197, 185, 168, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-family: var(--sk-font-sans, 'Archivo', sans-serif);
  font-size: 0.88rem;
}

.sk-summary-line {
  display: flex;
  justify-content: space-between;
  color: #555;
}

.sk-summary-discount {
  color: #2E7D32;
}

.sk-summary-total {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(197, 185, 168, 0.4);
  font-family: var(--sk-font-serif, 'Playfair Display', serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: #1C1C1C;
}