/* Iridescent art direction. Content and information architecture stay intact. */
:root {
  --ink: #252528;
  --muted: #62616a;
  --surface: #f8f7f8;
  --line: #e5e1e4;
  --blue: #4c4d69;
  --section: clamp(65px, 7vw, 105px);
  --display: "Bodoni MT", Didot, "Times New Roman", serif;
}
body { background: #fdfcfc; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.045em; }
h2 { font-size: clamp(35px, 3.8vw, 53px); }
h3 { font-size: clamp(27px, 2.5vw, 34px); }
p { line-height: 1.7; }
.soft-text { color: #55535a; font-style: italic; }
.eyebrow { font-size: 10px; letter-spacing: .24em; }
.site-header { background: #fcfbfbdf; border-color: #ece8e8; }
.wordmark { font-size: 26px; font-weight: 500; letter-spacing: -1.2px; }
.wordmark img { width: 52px; height: 52px; mix-blend-mode: multiply; }
.header-cta {
  min-height: 42px; padding-inline: 23px; border-color: #d8d4d4;
  background: linear-gradient(140deg, #fff 10%, #e9e6e5 48%, #fff 90%);
  box-shadow: inset 0 2px 3px white, inset 0 -2px 3px #b6b0ad35, 0 4px 10px #64606b08;
}
.button.primary {
  background: linear-gradient(145deg, #474747, #1e1e20 55%, #323234);
  border: 1px solid #39393d;
  box-shadow: inset 0 1px 2px #ffffff45, 0 5px 12px #3e394220;
  font-weight: 400;
}
.button.primary:hover { background: linear-gradient(145deg, #555, #28282b 55%, #424246); }
.text-link { color: #35323b; }
.hero-scene { position: relative; isolation: isolate; overflow: hidden; min-height: 760px; }
.page-index .hero {
  text-align: left; max-width: var(--container); padding-block: 76px 85px;
  position: relative; z-index: 2; pointer-events: none;
}
.page-index .hero > * { max-width: 530px; pointer-events: auto; }
.page-index .hero-eyebrow { justify-content: flex-start; margin-bottom: 23px; }
.page-index .hero h1 { font-size: clamp(48px, 4.6vw, 65px); line-height: .99; text-wrap: initial; }
.page-index .hero-description { margin: 24px 0 0; max-width: 470px; font-size: 15px; line-height: 1.7; }
.page-index .hero-actions { justify-content: flex-start; margin-top: 28px; gap: 20px; flex-wrap: nowrap; max-width: 560px; }
.page-index .hero-actions .button { padding: 15px 20px; gap: 15px; font-size: 12px; white-space: nowrap; }
.page-index .hero-actions .text-link { font-size: 12px; white-space: nowrap; }
.hero-scene .hero-visual {
  position: absolute; inset: 0; z-index: 0; width: 100%; max-width: none;
  border-radius: 0; margin: 0; height: 100%; background: #f5f2ef;
}
.hero-scene .hero-visual picture { height: 100%; }
.hero-scene .hero-visual img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 52%; }
.hero-scene .hero-visual:after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #fffc 0%, #ffffffa8 29%, transparent 55%), linear-gradient(0deg, #fdfcfc 0%, transparent 11%);
}
.image-explore { z-index: 3; left: auto; right: 42px; bottom: 25px; color: #56525b; border-color: #aaa5ac66; background: #ffffff80; }
.page-index #descubri > .editorial:first-child { padding-top: 65px; }
.brand-story {
  padding: 70px 55px; gap: 65px; border-radius: 20px;
  background: linear-gradient(90deg, #ffffff10, #ffffffdc 60%), url('images/pearl-waves.webp') center bottom / cover;
  box-shadow: inset 0 0 0 1px #fff, 0 10px 50px #71626a09;
  margin: 15px 0 75px;
}
.brand-object {
  padding: 15px; border-radius: 36px; transform: rotate(-7deg);
  border: 1px solid #fff; background: #ffffff7a;
  box-shadow: inset 2px 2px 6px #fff, inset -2px -2px 4px #9e969a30, 14px 23px 35px #7e72791a;
}
.brand-object img { mix-blend-mode: multiply; border-radius: 25px; }
.brand-story h2 { font-size: 49px; }
.features { padding-top: 0; }
.feature-grid { gap: 24px; }
.feature {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 20px;
  border: 1px solid #e1dce1; padding: 34px 36px 56px;
  background: linear-gradient(145deg, #fff, #faf9fa 65%, #f6f5f7);
  box-shadow: inset 2px 2px 4px #fff, inset -3px -3px 5px #c1bac14a, 0 7px 20px #56506306;
}
.feature:after {
  content: ""; position: absolute; inset: 4px; border: 1px solid #ffffffb3;
  border-radius: 16px; z-index: -1; pointer-events: none;
}
.feature p { color: #56525e; }
.feature-index { margin-bottom: 25px; }
.feature-index > span { width: 12px; height: 12px; box-shadow: 0 0 0 9px #ffffff7a, 2px 3px 14px #7772; }
.feature h3 { max-width: 400px; }
.feature-4 { background-position: center 60%; }
.audience { padding-top: 15px; }
.honest { background: linear-gradient(130deg, #fff, #f5f3f5, #fff); box-shadow: inset 1px 1px 3px #fff; }
.faq h2 { font-size: 42px; }
.faq summary { font-size: 16px; font-weight: 400; }
.closing {
  position: relative; background: url('images/pearl-waves.webp') center 70% / cover;
  padding: 100px 30px 110px; border-top: 1px solid #f2eef1;
}
.closing-inner { padding: 20px; background: radial-gradient(ellipse, #ffffffe6, #ffffff8a 55%, transparent 73%); }
.closing h2 { font-size: clamp(42px, 4.8vw, 65px); font-style: italic; }
.closing p { color: #55505d; }
.site-footer { background: #fdfcfc; }
/* The same material and type system carries through both internal pages. */
.page-como-funciona main, .page-diagnostico-gratis main {
  background: linear-gradient(180deg, #ffffff65, #ffffff75 650px, #fdfcfc 760px), url('images/pearl-waves.webp') center -180px / 100% 830px no-repeat;
}
.page-como-funciona .hero, .page-diagnostico-gratis .hero { padding-bottom: 85px; }
.page-como-funciona h1, .page-diagnostico-gratis h1 { font-size: clamp(44px, 5.5vw, 76px); }
.page-como-funciona .hero-description, .page-diagnostico-gratis .hero-description { background: #ffffffb8; border-radius: 18px; padding: 12px; }
.steps-list { padding-inline: 35px; background: #ffffffc4; border-radius: 22px; border: 1px solid #eee9ec; }
.step:first-child { border-top: 0; }
.step-number { font-family: var(--display); color: #99939d; font-weight: 400; }
.manifesto, .results { background: linear-gradient(90deg, #ffffffdb, #ffffffc9), url('images/pearl-waves.webp') center / cover; border: 1px solid #e8e2e7; box-shadow: inset 2px 2px 4px white; }
.area-grid { gap: 20px; }
.area { border: 1px solid #e9e3e8; border-radius: 18px; padding: 30px; background: linear-gradient(140deg, #fff, #f7f5f7, #fff); box-shadow: inset 2px 2px 5px #fff; }
.area h3 { font-size: 30px; }
@media (min-width: 1600px) {
  .hero-scene { min-height: 830px; }
  .page-index .hero { padding-top: 100px; }
  .page-index .hero h1 { font-size: 72px; }
  .page-index .hero > * { max-width: 560px; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .page-index .hero > * { max-width: 48%; }
  .page-index .hero h1 { font-size: 53px; }
  .page-index .hero-actions { flex-direction: column; align-items: flex-start; gap: 5px; }
  .hero-scene { min-height: 830px; }
  .brand-story { padding: 40px 30px; gap: 35px; }
  .area { padding: 22px; }
}
@media (max-width: 700px) {
  h2 { font-size: 37px; }
  .wordmark img { width: 43px; height: 43px; }
  .hero-scene { min-height: 0; padding-bottom: 290px; }
  .page-index .hero { padding-top: 45px; padding-bottom: 22px; text-align: left; }
  .page-index .hero > * { max-width: 100%; }
  .page-index .hero h1 { font-size: clamp(43px, 10vw, 62px); line-height: 1.02; }
  .page-index .hero-description { max-width: 100%; font-size: 14px; line-height: 1.7; }
  .page-index .hero-actions { align-items: flex-start; flex-direction: column; gap: 7px; margin-top: 23px; }
  .hero-scene .hero-visual { top: auto; height: 365px; }
  .hero-scene .hero-visual img { object-fit: cover; object-position: 82% 50%; width: 150%; max-width: none; margin-left: -50%; }
  .hero-scene .hero-visual:after { background: linear-gradient(180deg, #fdfcfc 0%, transparent 25%, transparent 87%, #fdfcfc); }
  .image-explore { right: 8px; bottom: 22px; }
  .page-index #descubri > .editorial:first-child { padding-top: 38px; }
  .brand-story { padding: 30px 24px 44px; gap: 35px; margin-bottom: 65px; }
  .brand-object { max-width: 270px; margin: auto; }
  .brand-story h2 { font-size: 39px; }
  .feature { padding: 28px 27px 45px; }
  .feature h3 { font-size: 29px; }
  .feature p { font-size: 15px; }
  .faq h2 { font-size: 37px; }
  .closing { padding: 65px 18px 80px; background-position: center bottom; }
  .closing-inner { padding-inline: 0; }
  .closing h2 { font-size: 43px; }
  .area-grid { grid-template-columns: 1fr; gap: 15px; }
  .area { padding: 27px; }
  .area p { font-size: 15px; }
  .steps-list { padding-inline: 22px; }
  .step h3 { font-size: 28px; }
  .step-number { font-size: 44px; }
  .page-como-funciona main, .page-diagnostico-gratis main { background-size: auto 700px; }
  .page-como-funciona .hero, .page-diagnostico-gratis .hero { padding-bottom: 55px; }
}