:root {
  --skyskin-v47-panel: rgba(255, 248, 245, 0.48);
  --skyskin-v47-panel-strong: rgba(255, 248, 245, 0.56);
  --skyskin-v47-card: rgba(255, 248, 245, 0.58);
  --skyskin-v47-border: rgba(143, 54, 82, 0.13);
  --skyskin-v47-shadow: 0 14px 36px rgba(70, 37, 48, 0.08);
  --skyskin-v47-rose: #A14E70;
  --skyskin-v47-copy: #4B3E42;
}

/* Panel principal: deja ver claramente la trama floral sin perder legibilidad. */
body.home .skyskin-sophisticated-overview,
body.front-page .skyskin-sophisticated-overview,
body.blog .skyskin-sophisticated-overview {
  position: relative !important;
  overflow: hidden !important;
  background: var(--skyskin-v47-panel) !important;
  border: 1px solid var(--skyskin-v47-border) !important;
  box-shadow: var(--skyskin-v47-shadow) !important;
  backdrop-filter: blur(7px) saturate(105%);
  -webkit-backdrop-filter: blur(7px) saturate(105%);
}

/* Boxes internos del panel principal. */
body.home .skyskin-sophisticated-overview .skyskin-card,
body.front-page .skyskin-sophisticated-overview .skyskin-card,
body.blog .skyskin-sophisticated-overview .skyskin-card {
  background: var(--skyskin-v47-card) !important;
  border-color: rgba(143, 54, 82, 0.11) !important;
  box-shadow: 0 9px 22px rgba(70, 37, 48, 0.055) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Box introductorio de “¿Qué te preocupa?”. */
body.home .skyskin-concerns-intro-panel,
body.front-page .skyskin-concerns-intro-panel,
body.blog .skyskin-concerns-intro-panel,
body.home .skyskin-sophisticated-concerns > .skyskin-section-head,
body.front-page .skyskin-sophisticated-concerns > .skyskin-section-head,
body.blog .skyskin-sophisticated-concerns > .skyskin-section-head {
  background: var(--skyskin-v47-panel-strong) !important;
  border: 1px solid var(--skyskin-v47-border) !important;
  box-shadow: var(--skyskin-v47-shadow) !important;
  backdrop-filter: blur(7px) saturate(106%);
  -webkit-backdrop-filter: blur(7px) saturate(106%);
}

/* Tarjetas de preocupaciones también ligeramente translúcidas. */
body.home .skyskin-sophisticated-concerns .skyskin-concern-card,
body.front-page .skyskin-sophisticated-concerns .skyskin-concern-card,
body.blog .skyskin-sophisticated-concerns .skyskin-concern-card {
  background: rgba(255, 248, 245, 0.67) !important;
  border: 1px solid rgba(143, 54, 82, 0.11) !important;
  box-shadow: 0 9px 24px rgba(70, 37, 48, 0.06) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Logo original dorado dentro del panel principal. */
body.home .skyskin-v47-overview-logo,
body.front-page .skyskin-v47-overview-logo,
body.blog .skyskin-v47-overview-logo {
  position: absolute;
  right: 34px;
  top: 34px;
  width: clamp(175px, 18vw, 250px);
  height: auto;
  display: block;
  object-fit: contain;
  opacity: 0.92;
  pointer-events: none;
  z-index: 3;
}

/* Reserva espacio para que el logo no pise el texto. */
body.home .skyskin-sophisticated-overview > .skyskin-section-head,
body.front-page .skyskin-sophisticated-overview > .skyskin-section-head,
body.blog .skyskin-sophisticated-overview > .skyskin-section-head {
  padding-right: min(31vw, 320px) !important;
}

body.home .skyskin-sophisticated-overview .skyskin-section-title,
body.front-page .skyskin-sophisticated-overview .skyskin-section-title,
body.blog .skyskin-sophisticated-overview .skyskin-section-title {
  color: var(--skyskin-v47-rose) !important;
}

body.home .skyskin-sophisticated-overview .skyskin-section-intro,
body.front-page .skyskin-sophisticated-overview .skyskin-section-intro,
body.blog .skyskin-sophisticated-overview .skyskin-section-intro {
  color: var(--skyskin-v47-copy) !important;
}

@media (max-width: 820px) {
  body.home .skyskin-v47-overview-logo,
  body.front-page .skyskin-v47-overview-logo,
  body.blog .skyskin-v47-overview-logo {
    position: static;
    width: min(230px, 62vw);
    margin: 0 auto 18px;
  }

  body.home .skyskin-sophisticated-overview > .skyskin-section-head,
  body.front-page .skyskin-sophisticated-overview > .skyskin-section-head,
  body.blog .skyskin-sophisticated-overview > .skyskin-section-head {
    padding-right: 4px !important;
  }
}