/* Uroconfort — responsive institutional layout */
:root {
  --navy: #172543;
  --blue: #244e82;
  --yellow: #ffc629;
  --muted: #586779;
  --line: #dce4ed;
  --light: #f1f6fb;
  --gutter: clamp(20px, 5vw, 80px);
  --content: 1280px;
  font-size: 16px
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px
}

body {
  margin: 0;
  background: #fff;
  color: var(--navy);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit;
  cursor: pointer
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent
}

button {
  color: inherit
}

button,
a {
  touch-action: manipulation
}

img {
  max-width: 100%
}

p {
  color: var(--muted);
  margin: 0 0 20px
}

h1,
h2,
h3 {
  margin-top: 0;
  text-wrap: balance
}

h2 {
  font-size: clamp(2rem, 3.5vw, 3.15rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.15;
  margin-bottom: 26px
}

h3 {
  font-size: 1.3rem;
  line-height: 1.3;
  margin-bottom: 12px
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #0085b5;
  outline-offset: 5px
}

a,
button {
  transition: background .2s, color .2s, box-shadow .2s, transform .2s
}

.skip {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 100;
  background: white;
  padding: 12px 20px;
  border: 2px solid var(--blue)
}

.skip:focus {
  top: 12px
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  background: var(--navy);
  color: #fff;
  border-radius: 9px;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center
}

.button:hover {
  background: #315b90;
  box-shadow: 0 6px 18px #17254318;
  transform: translateY(-2px)
}

.button.small {
  min-height: 46px;
  padding: 12px 18px
}

.button.yellow {
  background: var(--yellow);
  color: var(--navy)
}

.button.yellow:hover {
  background: #ffda70
}

.hero {
  max-width: 1440px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: 56px var(--gutter) 64px
}

.hero-copy {
  min-width: 0
}

.eyebrow {
  font-size: .75rem;
  letter-spacing: .14em;
  line-height: 1.6;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 22px
}

.hero h1 {
  font-size: clamp(2.75rem, 5.3vw, 4.7rem);
  letter-spacing: -.055em;
  line-height: 1.08;
  font-weight: 600;
  margin-bottom: 26px
}

.hero h1 span {
  color: #315b90;
  display: inline-block;
  position: relative
}

.hero h1 span:after {
  content: '';
  display: block;
  height: 6px;
  background: var(--yellow);
  border-radius: 8px;
  width: 70%;
  margin-top: 10px
}

.lead {
  font-size: 1.125rem;
  max-width: 465px;
  line-height: 1.75
}

.actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 30px
}

.textlink {
  font-weight: 700;
  font-size: .875rem;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: #9eafc2;
  line-height: 1.7
}

.textlink:hover {
  text-decoration-color: var(--blue);
  color: #216b9f
}

.hero-bottom {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: 34px
}

.hero-bottom p {
  font-size: .875rem;
  line-height: 1.6;
  margin: 0
}

.mini-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid #bfccda;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue);
  font-size: 1.5rem;
  font-style: italic;
  background: #f8fafc
}

.hero-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(145deg, #f0f6fc, #e5eff8);
  border: 1px solid #e0eaf4;
  border-radius: 140px 24px 24px 24px;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 55px 48px 135px;
  box-shadow: 0 24px 55px -38px #244e8270
}

.product-hero {
  width: min(100%, 285px);
  aspect-ratio: 195/229;
  background-image: var(--img-linha);
  background-size: 689.23% auto;
  background-position: 10.44% 22.04%;
  background-repeat: no-repeat;
  mix-blend-mode: multiply
}

.vertical-label {
  position: absolute;
  top: 35px;
  right: 20px;
  writing-mode: vertical-rl;
  letter-spacing: .12em;
  font-size: .75rem;
  color: #5b728d
}

.art-label {
  position: absolute;
  bottom: 37px;
  left: 30px;
  font-size: 1rem;
  line-height: 1.6
}

.seal {
  position: absolute;
  right: 22px;
  bottom: 30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--yellow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: .875rem;
  line-height: 1.35;
  transform: rotate(7deg);
  box-shadow: 0 6px 20px #a77c0012
}

.benefit-strip {
  background: var(--navy);
  color: white;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 23px max(var(--gutter), calc((100% - var(--content))/2));
  font-size: .9375rem;
  gap: 20px;
  text-align: center
}

.benefit-strip span+span {
  border-left: 1px solid #5b6a80
}

.section {
  padding: clamp(64px, 7vw, 104px) max(var(--gutter), calc((100% - var(--content))/2));
  scroll-margin-top: 20px
}

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px
}

.large-text {
  font-size: 1.625rem;
  line-height: 1.4;
  color: var(--navy)
}

.about p:not(.eyebrow) {
  max-width: 560px
}

.lineup {
  background: #f6f8fb
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px
}

.section-head>p {
  font-size: 1rem;
  margin-bottom: 30px;
  max-width: 360px
}

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 32px
}

.filters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd6e2;
  border-radius: 30px;
  background: white;
  min-height: 46px;
  padding: 10px 22px;
  font-size: .875rem;
  font-weight: 600
}

.filters a:hover {
  background: #e3ebf4
}

.filters .selected {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
  box-shadow: 0 4px 12px #17254315
}

.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch
}

.product {
  background: white;
  padding: 24px 20px 20px;
  border-radius: 16px;
  border: 1px solid #e0e7ef;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-shadow: 0 4px 16px #17254303;
  transition: box-shadow .2s, transform .2s
}

.product:hover {
  box-shadow: 0 14px 28px #1725430c;
  transform: translateY(-4px)
}

.product[hidden] {
  display: none
}

.product-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px
}

.size {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 9px;
  border-radius: 10px;
  background: #edf4fb;
  color: var(--blue);
  font-size: 1.25rem;
  font-weight: 700
}

.product[data-category=cuidado] .size {
  background: #172543;
  color: white
}

.product-top>span:last-child {
  font-size: .75rem;
  letter-spacing: .035em;
  font-weight: 700;
  color: #61738a
}

.pack {
  width: 100%;
  max-width: 205px;
  aspect-ratio: 195/229;
  margin: 24px auto 18px;
  background-image: var(--img-linha);
  background-repeat: no-repeat;
  background-size: 689.23% auto;
  mix-blend-mode: multiply
}

.pack.p {
  background-position: 10.44% 22.04%
}

.pack.m {
  background-position: 36.9% 22.04%
}

.pack.g {
  background-position: 63.7% 22.04%
}

.pack.gg {
  background-position: 90.1% 22.04%
}

.product h3 {
  font-size: 1.2rem;
  margin: 0 0 12px
}

.product p {
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 24px
}

.product a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: auto;
  font-size: .875rem;
  font-weight: 700;
  color: var(--blue)
}

.product a:hover {
  text-decoration: underline;
  text-underline-offset: 4px
}

.note {
  font-size: .8125rem;
  line-height: 1.8;
  margin: 26px 0 0;
  max-width: 1050px
}

.care {
  background: var(--navy);
  color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px
}

.care p {
  color: #ccd7e6
}

.care .eyebrow {
  color: #ffd05a
}

.care em,
.contact em {
  font-style: normal;
  color: var(--yellow)
}

.care>div>p:not(.eyebrow) {
  max-width: 450px;
  margin-bottom: 30px
}

.care-list article {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid #425069;
  padding: 25px 0
}

.care-list article:first-child {
  padding-top: 0
}

.care-list article>span {
  font-size: .875rem;
  color: #ffce49;
  flex-shrink: 0;
  padding-top: 4px
}

.care-list h3 {
  font-size: 1.4rem;
  margin: 0 0 12px
}

.care-list p {
  font-size: 1rem;
  margin: 0 0 12px
}

.impact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center
}

.impact-number {
  background: #f1f6fb;
  border: 1px solid #e1eaf3;
  border-radius: 22px;
  padding: 38px
}

.impact-number>strong {
  font-size: clamp(4.5rem, 7vw, 6.75rem);
  line-height: 1.1;
  letter-spacing: -.065em;
  color: var(--blue);
  font-weight: 500;
  display: block
}

.impact-number>strong span {
  font-size: .52em;
  letter-spacing: -.04em
}

.impact-number h3 {
  font-size: 1.25rem;
  margin-top: 18px
}

.impact-number p {
  font-size: .875rem;
  margin-bottom: 0
}

.resources {
  background: var(--light)
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 22px
}

.resource {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: white;
  border: 1px solid #dae5ef;
  border-top: 3px solid #315b90;
  border-radius: 8px 8px 16px 16px
}

.resource>span {
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--blue);
  font-weight: 700
}

.resource h3 {
  font-size: 1.5rem;
  margin: 30px 0 18px
}

.resource p {
  font-size: 1rem;
  margin-bottom: 26px
}

.resource b {
  font-size: .875rem;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line)
}

.resource:hover {
  box-shadow: 0 12px 30px #17254310;
  transform: translateY(-3px)
}

.faq {
  padding-inline: max(var(--gutter), calc((100% - 1150px)/2))
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 23px 0
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 30px;
  list-style: none;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer
}

.faq summary::-webkit-details-marker {
  display: none
}

.faq summary:after {
  content: '+';
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--blue);
  flex-shrink: 0
}

.faq details[open] summary:after {
  content: '−'
}

.faq details[open] summary {
  color: var(--blue)
}

.faq details p {
  max-width: 820px;
  font-size: 1rem;
  padding-top: 20px;
  margin: 0
}

.contact {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 70px;
  background: #244e82;
  color: white
}

.contact .eyebrow {
  color: #e2ebf8
}

.contact h2 {
  margin: 0
}

.contact p {
  color: #e2ebf8;
  font-size: 1.25rem;
  margin: 0 0 26px
}

.contact-link {
  display: block;
  width: fit-content;
  margin-top: 18px;
  font-size: 1rem;
  overflow-wrap: anywhere
}

.contact-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px
}

@media(min-width:1600px) {
  .hero {
    padding-inline: 0;
    max-width: 1280px
  }

  .hero-art {
    min-height: 600px
  }

  .product-hero {
    width: 310px
  }
}

@media(max-width:1100px) {
  .hero {
    gap: 30px;
    padding-top: 38px
  }

  .hero-art {
    min-height: 490px;
    padding-inline: 38px;
    border-top-left-radius: 100px
  }

  .hero h1 {
    font-size: clamp(2.65rem, 5.4vw, 3.7rem)
  }

  .seal {
    width: 96px;
    height: 96px;
    font-size: .8125rem;
    right: 18px
  }

  .art-label {
    font-size: .875rem;
    left: 24px
  }

  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px
  }

  .product {
    padding: 26px
  }

  .product-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between
  }

  .product p {
    max-width: 350px
  }

  .about,
  .care,
  .impact,
  .contact {
    gap: 40px
  }

  .resource-grid {
    gap: 16px
  }

  .resource {
    padding: 24px
  }

  .resource h3 {
    font-size: 1.3rem
  }

  .benefit-strip {
    font-size: .875rem
  }

  .section-head {
    align-items: start
  }

  .section-head>p {
    padding-top: 36px
  }
}

@media(max-width:760px) {
  :root {
    --gutter: 24px
  }

  html {
    scroll-padding-top: 105px
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 32px;
    padding-bottom: 40px;
    gap: 30px
  }

  .hero h1 {
    font-size: clamp(2.5rem, 7.8vw, 3.6rem);
    line-height: 1.12
  }

  .hero h1 span:after {
    height: 5px
  }

  .hero-copy {
    max-width: 580px
  }

  .lead {
    font-size: 1.0625rem;
    max-width: 520px
  }

  .eyebrow {
    font-size: .75rem;
    letter-spacing: .1em;
    margin-bottom: 18px
  }

  .hero-bottom {
    margin-top: 24px
  }

  .hero-art {
    min-height: 0;
    max-width: 540px;
    width: 100%;
    margin: auto;
    padding: 35px 42px 125px;
    border-radius: 90px 20px 20px 20px
  }

  .product-hero {
    width: min(65%, 245px)
  }

  .vertical-label {
    font-size: .6875rem;
    right: 16px;
    top: 30px
  }

  .art-label {
    bottom: 25px
  }

  .seal {
    bottom: 20px
  }

  .benefit-strip {
    gap: 16px;
    padding-block: 22px;
    line-height: 1.55
  }

  .benefit-strip span+span {
    padding-left: 12px
  }

  .section {
    padding-block: 64px
  }

  .about,
  .care,
  .impact,
  .contact {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .section-head {
    display: block
  }

  .section-head>p {
    padding: 0;
    margin: 0 0 25px
  }

  h2 {
    font-size: clamp(2rem, 5.6vw, 2.7rem)
  }

  .large-text {
    font-size: 1.4rem
  }

  .filters {
    gap: 8px;
    margin-bottom: 26px
  }

  .filters a {
    padding: 10px 16px
  }

  .product-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px
  }

  .product {
    padding: 20px
  }

  .product h3 {
    font-size: 1.25rem
  }

  .pack {
    max-width: 180px
  }

  .resource-grid {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .resource {
    padding: 28px
  }

  .resource h3 {
    font-size: 1.5rem;
    margin-top: 22px
  }

  .resource h3 br {
    display: none
  }

  .impact-number {
    padding: 30px
  }

  .impact-number>strong {
    font-size: 5.5rem
  }

  .care-list article {
    gap: 18px
  }

  .care h2 br {
    display: none
  }

  .care>div>p:not(.eyebrow) {
    max-width: none
  }

  .care .button {
    margin-bottom: 10px
  }

  .faq summary {
    font-size: 1rem
  }

  .contact {
    gap: 32px
  }

  .contact p {
    font-size: 1.125rem
  }

  .note {
    font-size: .8125rem
  }

  .actions {
    gap: 20px
  }
}

@media(max-width:540px) {
  :root {
    --gutter: 20px
  }

  .products {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .product {
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .product-top {
    flex-direction: row;
    align-items: center
  }

  .pack {
    max-width: 185px;
    margin-block: 18px
  }

  .product h3 {
    font-size: 1.4rem
  }

  .product p {
    max-width: none;
    margin-bottom: 18px
  }

  .product a {
    padding-top: 18px
  }

  .filters {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .filters a:first-child {
    grid-column: 1/-1
  }

  .filters a {
    font-size: .875rem;
    padding: 10px 12px
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 18px
  }

  .actions .textlink {
    text-align: center;
    padding: 5px
  }

  .hero-art {
    padding-top: 32px
  }

  .benefit-strip {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
    padding-block: 12px
  }

  .benefit-strip span {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 !important
  }

  .benefit-strip span:before {
    content: '✓';
    color: var(--yellow);
    font-size: 1rem
  }

  .benefit-strip span+span {
    border-left: none;
    border-top: 1px solid #ffffff24
  }

  .section {
    padding-block: 52px
  }

  .hero h1 {
    font-size: clamp(2.2rem, 9.7vw, 3rem)
  }

  .hero h1 br {
    display: block
  }

  .hero-bottom p {
    font-size: .8125rem
  }

  .hero-bottom {
    gap: 12px
  }

  .hero-art .art-label {
    font-size: .875rem;
    left: 20px;
    bottom: 27px
  }

  .seal {
    width: 88px;
    height: 88px;
    right: 15px;
    font-size: .75rem
  }

  .contact .button,
  .care .button {
    width: 100%
  }

  .contact-link {
    font-size: 1rem
  }

  .section-head>p br {
    display: none
  }

  .impact-number {
    padding: 24px
  }

  .impact-number>strong {
    font-size: 4.8rem
  }

  .resource>span {
    letter-spacing: .025em
  }

  .faq summary {
    gap: 15px
  }

  .vertical-label {
    font-size: .625rem
  }

  .hero-art {
    border-top-left-radius: 75px
  }

  .product-hero {
    width: 90%
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important
  }
}

.filters .selected:hover {
  background: #244e82;
  color: #fff
}

.page-head {
  padding: clamp(48px, 6vw, 88px) max(var(--gutter), calc((100% - var(--content))/2)) clamp(40px, 5vw, 64px);
  background: linear-gradient(145deg, #f0f6fc, #e5eff8);
  border-bottom: 1px solid #e0eaf4
}

.page-head h1 {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  letter-spacing: -.05em;
  line-height: 1.1;
  font-weight: 600;
  margin-bottom: 20px;
  max-width: 900px
}

.page-head .lead {
  max-width: 640px;
  margin: 0
}

.lineup .button.more {
  margin-top: 32px
}

.more-link {
  display: inline-block;
  margin-top: 28px
}

.video-section {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  align-items: center
}

.video {
  width: 100%;
  aspect-ratio: 16/9;
  background: #0f1a30;
  border-radius: 20px;
  box-shadow: 0 24px 55px -38px #244e8270;
  display: block
}

.detail {
  display: grid;
  gap: 44px
}

.detail.alt {
  background: #f6f8fb
}

.detail-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: start
}

.detail-head h2 {
  margin-bottom: 16px
}

.detail-head p:not(.eyebrow) {
  max-width: 720px;
  margin: 0
}

.detail-sizes {
  display: grid;
  place-items: center;
  min-width: 120px;
  height: 120px;
  padding: 0 18px;
  border-radius: 24px;
  background: var(--navy);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.02em
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px
}

.detail-grid>div {
  background: #fff;
  border: 1px solid #e0e7ef;
  border-radius: 16px;
  padding: 28px
}

.detail-grid h3 {
  font-size: 1.1rem;
  margin-bottom: 18px;
  color: var(--blue)
}

.detail-grid dl {
  margin: 0
}

.detail-grid dt {
  font-weight: 700;
  font-size: .9375rem
}

.detail-grid dd {
  margin: 2px 0 14px;
  color: var(--muted);
  font-size: .9375rem
}

.detail-grid dd:last-child {
  margin-bottom: 0
}

.detail-benefits {
  display: flex;
  flex-direction: column
}

.detail-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px
}

.detail-benefits li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: .9375rem
}

.detail-benefits li:before {
  content: '✓';
  color: #bb8500;
  font-weight: 700
}

.detail-quote {
  margin: auto 0 0;
  padding: 18px;
  border-radius: 12px;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 700;
  line-height: 1.45
}

.pillars {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px
}

.pillars article {
  border-top: 3px solid var(--yellow);
  padding-top: 24px
}

.pillars p:not(.eyebrow) {
  font-size: 1.25rem;
  line-height: 1.5;
  color: #fff;
  margin: 0
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 12px
}

.values-grid article {
  padding: 28px;
  border: 1px solid #e0e7ef;
  border-radius: 16px;
  background: #fff
}

.values-grid span {
  font-size: .875rem;
  font-weight: 700;
  color: #bb8500
}

.values-grid h3 {
  margin: 14px 0 8px
}

.values-grid p {
  margin: 0;
  font-size: .9375rem
}

.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px
}

.channel {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: #fff;
  border: 1px solid #dae5ef;
  border-top: 3px solid #315b90;
  border-radius: 8px 8px 16px 16px
}

.channel>span {
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--blue);
  font-weight: 700
}

.channel h3 {
  font-size: 1.35rem;
  margin: 22px 0 10px;
  overflow-wrap: anywhere
}

.channel p {
  font-size: .9375rem;
  margin-bottom: 22px
}

.channel b {
  font-size: .875rem;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line)
}

.channel:hover {
  box-shadow: 0 12px 30px #17254310;
  transform: translateY(-3px)
}

.channel.featured {
  background: var(--navy);
  border-color: var(--navy);
  border-top-color: var(--yellow);
  color: #fff
}

.channel.featured>span {
  color: var(--yellow)
}

.channel.featured p {
  color: #ccd7e6
}

.channel.featured b {
  border-color: #425069
}

.address {
  background: var(--light)
}

.address .large-text {
  margin-bottom: 24px
}

.map {
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: 16px;
  display: block
}

@media(max-width:1100px) {
  .video-section {
    gap: 36px
  }

  .detail-grid {
    grid-template-columns: 1fr 1fr
  }

  .detail-benefits {
    grid-column: 1/-1
  }

  .values-grid {
    grid-template-columns: 1fr 1fr
  }

  .pillars {
    gap: 28px
  }
}

@media(max-width:760px) {

  .video-section,
  .pillars {
    grid-template-columns: 1fr
  }

  .detail-head {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .detail-sizes {
    min-width: 0;
    width: fit-content;
    height: 72px;
    font-size: 1.4rem;
    border-radius: 16px
  }

  .detail-grid,
  .values-grid {
    grid-template-columns: 1fr
  }

  .detail-grid>div {
    padding: 22px
  }

  .map {
    height: 300px
  }
}

.page-head+.section {
  padding-top: clamp(40px, 4vw, 56px)
}

.channel h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  overflow-wrap: break-word
}

/* 4 canais: auto-fit deixava 3 + 1 sobrando sozinho; vira 4 colunas no largo e 2x2 no medio */
.channels:has(>:nth-child(4)) {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

@media(min-width:1200px) {
  .channels:has(>:nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

@media(max-width:600px) {
  .channels:has(>:nth-child(4)) {
    grid-template-columns: 1fr
  }
}

/* @ longo do Instagram (ex.: @uroconfortabsorventes): fonte menor em vez de quebrar no meio e sobrar 1 letra */
.channel h3.long {
  font-size: clamp(.95rem, 1.15vw, 1.1rem);
  letter-spacing: -.02em
}

/* ===== Tema suave: formas organicas, ondas e cantos arredondados =====
   Inspirado no flyer (onda azul) e em sites de fralda. Fica por cima das
   regras acima; para voltar ao visual "reto" basta remover este bloco. */
:root {
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 85 480 85 720 45S1200-5 1440 35V80H0Z'/%3E%3C/svg%3E");
  --radius: 28px;
  --soft: #eaf3fb;
  --cream: #fff8e6
}

body {
  font-family: 'Nunito', Arial, Helvetica, sans-serif
}

h1,
h2,
h3 {
  font-weight: 800
}

.hero h1,
.page-head h1 {
  font-weight: 900;
  letter-spacing: -.035em
}

h2 {
  letter-spacing: -.03em
}

.button,
.channel b,
.filters a {
  border-radius: 999px
}

.button {
  padding-inline: 30px
}

.button:hover {
  transform: translateY(-2px) scale(1.02)
}

/* gota amarela (a do logo) antes dos rotulos */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px
}

.eyebrow:before {
  content: '';
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background: var(--yellow);
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg)
}

.hero {
  position: relative
}

.hero-art {
  border-radius: 58% 42% 48% 52%/46% 50% 50% 54%;
  border: 0;
  background: radial-gradient(circle at 30% 30%, #fff 0, #eaf3fb 45%, #d6e7f6 100%);
  overflow: visible
}

.hero-art:before,
.hero-art:after {
  content: '';
  position: absolute;
  border-radius: 50%;
  z-index: -1
}

.hero-art:before {
  width: 120px;
  height: 120px;
  left: -26px;
  top: 12%;
  background: var(--yellow);
  opacity: .9
}

.hero-art:after {
  width: 220px;
  height: 220px;
  right: -40px;
  top: -30px;
  border: 3px dotted #9cc2e4
}

.seal {
  border-radius: 50%;
  box-shadow: 0 12px 26px -12px #a77c0060
}

.vertical-label {
  right: 34px
}

.benefit-strip {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 2*var(--gutter)));
  margin: -8px auto 0;
  border-radius: 999px;
  padding: 22px 40px;
  box-shadow: 0 18px 40px -22px #17254380
}

.benefit-strip span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px
}

.benefit-strip span:before {
  content: '✓';
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 900;
  font-size: .8rem;
  flex-shrink: 0
}

.benefit-strip span+span {
  border-left: 0
}

/* secoes coloridas viram paineis com onda no topo */
.lineup,
.care,
.resources,
.contact,
.detail.alt,
.address,
.page-head {
  position: relative
}

.lineup:before,
.care:before,
.resources:before,
.contact:before,
.detail.alt:before,
.address:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -59px;
  height: 60px;
  background: inherit;
  -webkit-mask: var(--wave) center/100% 100% no-repeat;
  mask: var(--wave) center/100% 100% no-repeat;
  pointer-events: none
}

.lineup,
.care,
.resources,
.contact,
.detail.alt,
.address {
  margin-top: 60px
}

.lineup {
  background: var(--soft)
}

.resources {
  background: var(--cream)
}

.care {
  background: linear-gradient(180deg, #1d2f55, #172543 70%)
}

.care:before {
  background: #1d2f55
}

.contact {
  background: #244e82
}

.page-head {
  background: var(--soft);
  border: 0;
  overflow: hidden;
  padding-bottom: clamp(64px, 7vw, 96px)
}

.page-head:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 60px;
  background: #fff;
  -webkit-mask: var(--wave) center/100% 100% no-repeat;
  mask: var(--wave) center/100% 100% no-repeat;
  transform: scaleX(-1)
}

.page-head:before {
  content: '';
  position: absolute;
  right: -60px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 3px dotted #9cc2e4
}

.page-head>* {
  position: relative;
  z-index: 1
}

.page-head+.section {
  padding-top: clamp(24px, 3vw, 40px)
}

.page-head+.lineup,
.page-head+.detail.alt {
  margin-top: 0
}

.page-head+.lineup:before {
  display: none
}

/* cards arredondados, sem borda dura */
.product,
.resource,
.channel,
.values-grid article,
.detail-grid>div,
.impact-number {
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 14px 36px -24px #17254355
}

.product {
  padding: 26px 22px 22px
}

.product:hover,
.resource:hover,
.channel:hover {
  transform: translateY(-6px) rotate(-.4deg)
}

.size {
  border-radius: 50%;
  width: 52px;
  height: 52px;
  min-width: 52px;
  padding: 0
}

.product-top>span:last-child {
  background: #eef4fb;
  border-radius: 999px;
  padding: 4px 12px
}

.resource {
  border-top: 0;
  position: relative;
  overflow: hidden
}

.resource:after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--yellow);
  opacity: .18
}

.resource b,
.product a,
.channel b {
  border-top: 0
}

.resource b {
  color: var(--blue)
}

.channel {
  border-top: 0
}

.channel.featured {
  border: 0
}

.channel b {
  align-self: flex-start;
  background: #eef4fb;
  padding: 10px 18px;
  margin-top: auto
}

.channel.featured b {
  background: var(--yellow);
  color: var(--navy)
}

.impact-number {
  background: var(--soft);
  border-radius: 48% 52% 40% 60%/50% 44% 56% 50%;
  padding: 56px 48px;
  text-align: center
}

.detail-sizes {
  border-radius: 50%;
  width: 120px;
  padding: 0
}

.detail-quote {
  border-radius: 22px 22px 22px 4px
}

.values-grid span,
.care-list article>span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 900;
  padding: 0
}

.care-list article {
  border-bottom: 0;
  background: #ffffff0d;
  border-radius: 22px;
  padding: 22px !important;
  margin-bottom: 14px
}

.pillars article {
  border-top: 0;
  background: #ffffff0f;
  border-radius: var(--radius);
  padding: 30px
}

.video {
  border-radius: 36px 36px 36px 8px
}

.faq details {
  border: 0;
  background: #f6f9fc;
  border-radius: 22px;
  padding: 20px 26px;
  margin-bottom: 12px
}

.faq details[open] {
  background: var(--soft)
}

.contact {
  overflow: visible
}

.contact .button {
  box-shadow: 0 12px 24px -12px #00000060
}

.map {
  border-radius: var(--radius)
}

@media(max-width:1100px) {
  .hero-art:after {
    width: 160px;
    height: 160px
  }
}

@media(max-width:760px) {
  .benefit-strip {
    border-radius: 28px;
    padding: 18px 24px
  }

  .benefit-strip span {
    justify-content: flex-start
  }

  .hero-art:before {
    width: 80px;
    height: 80px;
    left: -10px
  }

  .hero-art:after {
    display: none
  }

  .impact-number {
    border-radius: 40px
  }

  .lineup:before,
  .care:before,
  .resources:before,
  .contact:before,
  .detail.alt:before,
  .address:before {
    top: -29px;
    height: 30px
  }

  .lineup,
  .care,
  .resources,
  .contact,
  .detail.alt,
  .address {
    margin-top: 30px
  }

  .page-head:after {
    height: 30px
  }
}

@media(max-width:540px) {
  .benefit-strip {
    grid-template-columns: 1fr;
    text-align: left
  }

  .benefit-strip span:before {
    content: '✓'
  }

  .benefit-strip span+span {
    border-top: 1px solid #ffffff1f
  }
}

.page-head:has(+.lineup):after {
  display: none
}

.page-head:has(+.lineup) {
  padding-bottom: 0
}

.lineup,
.care,
.resources,
.contact,
.detail.alt,
.address {
  border-radius: 0 0 50% 50%/0 0 clamp(24px, 4vw, 60px) clamp(24px, 4vw, 60px)
}

/* cards da linha: medidor de absorcao (gotas) + ficha curta */
.level {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--blue);
  margin: 0 0 10px
}

.drops {
  display: flex;
  gap: 4px
}

.drops i {
  width: 11px;
  height: 11px;
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  background: #d7e3ef
}

.drops i.on {
  background: var(--yellow)
}

.product p {
  margin-bottom: 16px
}

.product-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 6px
}

.product-meta li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: .8125rem;
  color: var(--muted)
}

.product-meta li:before {
  content: '✓';
  color: #bb8500;
  font-weight: 900
}

.product-meta li:first-child {
  font-weight: 700;
  color: var(--navy)
}

.product-meta li:first-child {
  gap: 0
}

.product-meta li:first-child:before {
  content: none
}

.capacity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: -2px 0 14px;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--soft)
}

.capacity strong {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--blue);
  letter-spacing: -.02em;
  line-height: 1.1
}

.capacity small {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--muted)
}

.product[data-category=cuidado] .capacity {
  background: #fff6d9
}

/* janelinha ao passar o mouse no card: embalagem maior + ficha resumida */
.peek {
  display: none
}

@media(hover:hover) and (pointer:fine) and (min-width:761px) {

  /* a .peek fechada (invisivel, mas absoluta) do card da ponta passava da tela e criava rolagem lateral;
   aberta, o JS ja a desloca para dentro. clip so no eixo x: a onda do topo (:before) continua aparecendo */
  .lineup {
    overflow-x: clip
  }

  .product {
    position: relative
  }

  .product.peek-open {
    z-index: 6
  }

  .peek {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 24px;
    align-items: center;
    position: absolute;
    left: 50%;
    top: -14px;
    width: min(560px, calc(100vw - 32px));
    padding: 24px 28px 24px 20px;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 30px 70px -20px #17254370, 0 0 0 1px #17254310;
    opacity: 0;
    visibility: hidden;
    transform: translate(calc(-50% + var(--peek-shift, 0px)), 10px) scale(.96);
    transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
    pointer-events: none
  }

  .product.peek-open .peek {
    opacity: 1;
    visibility: visible;
    transform: translate(calc(-50% + var(--peek-shift, 0px)), 0) scale(1);
    transition: opacity .2s ease, transform .2s ease, visibility 0s
  }

  .peek .pack {
    margin: 0;
    max-width: none;
    width: 230px
  }

  .peek-info {
    min-width: 0
  }

  .peek-tag {
    display: inline-block;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--blue);
    background: #eef4fb;
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 10px
  }

  .peek-cap {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.05;
    color: var(--navy);
    letter-spacing: -.03em
  }

  .peek-info small {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--muted);
    margin-top: 2px
  }

  .peek .level {
    margin: 12px 0 10px
  }

  .peek p {
    font-size: .875rem;
    line-height: 1.5;
    margin: 0 0 12px
  }

  .peek p b {
    color: var(--navy)
  }

  .peek .product-meta {
    margin: 0
  }

  .peek .product-meta li:first-child {
    font-weight: 400;
    color: var(--muted);
    gap: 8px
  }

  .peek .product-meta li:first-child:before {
    content: '✓'
  }

  .product:hover {
    transform: none
  }
}

/* /instituicoes */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 12px 0 28px
}

.stat {
  padding: 30px;
  border-radius: var(--radius);
  background: var(--soft)
}

.stat strong {
  display: block;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
  color: var(--blue);
  letter-spacing: -.04em;
  margin-bottom: 14px
}

.stat p {
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 12px
}

.stat small {
  color: var(--muted);
  font-size: .8125rem
}

.key-points {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 10px;
  max-width: 860px
}

.key-points li {
  display: flex;
  gap: 12px;
  color: var(--muted)
}

.key-points li:before {
  content: '';
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-top: 8px;
  background: var(--yellow);
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg)
}

.calc {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  padding: 30px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 14px 36px -24px #17254355
}

.calc-inputs {
  display: grid;
  gap: 16px
}

.calc label {
  display: grid;
  gap: 6px;
  font-weight: 700;
  font-size: .875rem
}

.calc input {
  font: inherit;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  padding: 12px 18px;
  border: 2px solid #dce6f0;
  border-radius: 16px;
  background: #f8fbfe;
  width: 100%
}

.calc input:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff
}

.calc-results {
  display: grid;
  gap: 14px;
  align-content: center
}

.calc-results div {
  padding: 22px 24px;
  border-radius: 22px;
  background: var(--navy);
  color: #fff
}

.calc-results div+div {
  background: var(--yellow);
  color: var(--navy)
}

.calc-results span {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  opacity: .85
}

.calc-results strong {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.15
}

.note a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--blue)
}

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: 0 14px 36px -24px #17254355;
  margin: 12px 0 0
}

.scenario table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  min-width: 560px
}

.scenario th {
  background: var(--navy);
  color: #fff;
  text-align: left;
  font-size: .8125rem;
  padding: 16px 20px
}

.scenario td {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted)
}

.scenario td strong {
  color: var(--blue);
  font-size: 1.1rem
}

@media(max-width:760px) {

  .stat-grid,
  .calc {
    grid-template-columns: 1fr
  }

  .calc {
    padding: 22px
  }
}

/* com JS a calculadora atualiza ao digitar (script.js): o botao so serve sem JS */
.calc.ao-vivo .button {
  display: none
}

.care-link {
  display: inline-block;
  margin-left: 20px;
  color: #fff;
  text-decoration-color: #ffffff80
}

@media(max-width:540px) {
  .care-link {
    margin: 14px 0 0
  }
}

/* fotos passando na janelinha */
.peek-slides {
  position: relative;
  width: 230px;
  aspect-ratio: 195/229;
  border-radius: 22px;
  overflow: hidden;
  background: #f3f8fd
}

.peek-slides>* {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
  opacity: 0;
  transition: opacity .5s ease
}

.peek-slides>.on {
  opacity: 1
}

.peek-slides img {
  object-fit: cover
}

/* loja: pagina do produto (custom_views/product/detail) e listagem (product/menu) */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 28px
}

.crumbs a {
  color: var(--blue)
}

.crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 3px
}

.crumbs>*+*:before {
  content: '›';
  margin-right: 10px;
  color: #9fb0c3
}

.buy {
  padding-top: clamp(28px, 3vw, 44px)
}

.buy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start
}

.buy-gallery {
  position: sticky;
  top: 120px
}

.buy-stage {
  position: relative;
  aspect-ratio: 195/229;
  max-width: 520px;
  margin: auto;
  border-radius: 44px 44px 44px 12px;
  overflow: hidden;
  background: radial-gradient(circle at 30% 30%, #fff 0, #eaf3fb 50%, #d6e7f6 100%)
}

.buy-gallery>input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.buy-stage>* {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  opacity: 0;
  transition: opacity .35s ease
}

.buy-stage>:only-child,
#foto-0:checked~.buy-stage>:nth-child(1),
#foto-1:checked~.buy-stage>:nth-child(2),
#foto-2:checked~.buy-stage>:nth-child(3),
#foto-3:checked~.buy-stage>:nth-child(4),
#foto-4:checked~.buy-stage>:nth-child(5),
#foto-5:checked~.buy-stage>:nth-child(6),
#foto-6:checked~.buy-stage>:nth-child(7),
#foto-7:checked~.buy-stage>:nth-child(8),
#foto-8:checked~.buy-stage>:nth-child(9),
#foto-9:checked~.buy-stage>:nth-child(10),
#foto-10:checked~.buy-stage>:nth-child(11),
#foto-11:checked~.buy-stage>:nth-child(12) {
  opacity: 1
}

.buy-stage img {
  object-fit: cover
}

.buy-stage .pack {
  inset: 8%;
  width: 84%;
  height: 84%
}

.buy-nophoto {
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 900;
  font-style: italic;
  color: #9cc2e4
}

.buy-thumbs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px
}

.buy-thumbs label {
  cursor: pointer;
  width: 68px;
  aspect-ratio: 195/229;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 16px;
  overflow: hidden;
  background: #f3f8fd;
  transition: border-color .2s
}

#foto-0:checked~.buy-thumbs>:nth-child(1),
#foto-1:checked~.buy-thumbs>:nth-child(2),
#foto-2:checked~.buy-thumbs>:nth-child(3),
#foto-3:checked~.buy-thumbs>:nth-child(4),
#foto-4:checked~.buy-thumbs>:nth-child(5),
#foto-5:checked~.buy-thumbs>:nth-child(6),
#foto-6:checked~.buy-thumbs>:nth-child(7),
#foto-7:checked~.buy-thumbs>:nth-child(8),
#foto-8:checked~.buy-thumbs>:nth-child(9),
#foto-9:checked~.buy-thumbs>:nth-child(10),
#foto-10:checked~.buy-thumbs>:nth-child(11),
#foto-11:checked~.buy-thumbs>:nth-child(12) {
  border-color: var(--yellow)
}

.buy-gallery>input:focus-visible~.buy-thumbs {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 16px
}

.buy-thumbs img,
.buy-thumbs .pack {
  display: block;
  pointer-events: none;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover
}

.buy-info h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.08;
  margin: 18px 0 6px
}

.buy-sub {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--blue);
  margin: 0 0 14px
}

.buy-info .product-top {
  flex-direction: row;
  align-items: center
}

.buy-info .product-top>span:last-child {
  background: #eef4fb;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .035em;
  color: #61738a
}

.buy-box {
  margin: 24px 0;
  padding: 26px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 14px 36px -24px #17254355, 0 0 0 1px #17254310;
  display: grid;
  gap: 16px
}

.buy-price s {
  display: block;
  font-size: .9375rem;
  color: var(--muted)
}

.buy-price strong {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1
}

.buy-price small {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--muted)
}

.buy-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.buy-form .button,
.calc .button {
  border: 0
}

.buy-form .button {
  flex: 1;
  min-width: 180px;
  font-size: 1.0625rem
}

.qty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 0 18px;
  border: 2px solid #dce6f0;
  border-radius: 999px;
  background: #f8fbfe;
  font-size: .8125rem;
  font-weight: 800;
  color: var(--muted)
}

.qty input {
  width: 64px;
  height: 48px;
  border: 0;
  background: none;
  text-align: center;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--navy)
}

.buy-out {
  margin: 0;
  font-weight: 800;
  color: #b3261e
}

.buy-wa {
  font-size: .875rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px
}

.buy-wa.button {
  text-decoration: none;
  background: #1f9d55;
  color: #fff
}

.buy-wa.button:hover {
  background: #178a49
}

.buy-for {
  font-size: .9375rem;
  margin-bottom: 16px
}

.buy-for p {
  margin: 0 0 .75em
}

.buy-for p:last-child {
  margin-bottom: 0
}

.buy-for b {
  color: var(--navy)
}

.product a.product-media {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  min-height: 0
}

.product-photo {
  display: block;
  width: 100%;
  aspect-ratio: 195/229;
  object-fit: cover;
  border-radius: 20px;
  margin: 18px 0
}

.product-price {
  font-size: 1.5rem !important;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 12px !important
}

@media(max-width:900px) {
  .buy-grid {
    grid-template-columns: 1fr
  }

  .buy-gallery {
    position: static
  }

  .buy-stage {
    max-width: 420px
  }
}

@media(max-width:540px) {
  .buy-thumbs {
    gap: 8px
  }

  .buy-thumbs label {
    cursor: pointer;
    width: 56px;
    border-radius: 12px
  }

  .buy-box {
    padding: 20px
  }

  .buy-form .button {
    min-width: 0
  }
}

/* cards da linha: rodape de compra (preco + botao Comprar, que leva a pagina do produto).
   Reseta o .product a (link de rodape com borda) para os elementos daqui. */
.product-buy {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px
}

.card-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px
}

.card-price strong {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--navy)
}

.card-price small {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--muted)
}

.product .product-buy .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 20px;
  border: 0;
  border-top: 0;
  font-size: 1rem;
  font-weight: 900;
  color: var(--navy)
}

.product .product-buy a.button {
  background: var(--navy);
  color: #fff
}

.product .product-buy a.button:hover {
  background: #315b90;
  text-decoration: none
}

.product .product-buy a.button.yellow {
  background: var(--yellow);
  color: var(--navy)
}

.product .product-buy a.button.yellow:hover {
  background: #ffda70
}

.product .product-buy .button.yellow {
  box-shadow: 0 10px 22px -14px #a77c0090
}

/* Diferenciais (categoria "diferenciais" do CMS) e respostas do FAQ (conteudo do CMS) */
.diferenciais {
  background: var(--cream)
}

.diferenciais-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}

.diferenciais-grid article {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px
}

.diferenciais-grid span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 900;
  font-size: .875rem
}

.diferenciais-grid h3 {
  font-size: 1.25rem;
  margin: 18px 0 10px
}

.diferenciais-grid p {
  font-size: 1rem;
  margin: 0
}

.faq-answer {
  max-width: 820px;
  padding-top: 20px
}

.faq .faq-answer p {
  padding-top: 0;
  margin: 0 0 .75em
}

.faq .faq-answer p:last-child {
  margin-bottom: 0
}

@media(max-width:960px) {
  .diferenciais-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:540px) {
  .diferenciais-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .diferenciais-grid article {
    padding: 22px
  }
}

/* Pagina do produto: "Sobre o produto" (Conteudo do CMS a partir do 1o titulo) */
.buy-desc {
  background: var(--light)
}

.buy-content {
  max-width: 820px;
  font-size: 1.0625rem;
  color: var(--muted)
}

.buy-content h2,
.buy-content h3 {
  font-size: 1.5rem;
  color: var(--navy);
  margin: 36px 0 12px
}

.buy-content>h2:first-child,
.buy-content>h3:first-child {
  margin-top: 0
}

.buy-content p {
  margin: 0 0 14px
}

.buy-content b,
.buy-content strong {
  color: var(--navy)
}

.buy-content ul {
  margin: 0 0 14px;
  padding-left: 0;
  list-style: none
}

.buy-content li {
  position: relative;
  padding: 0 0 10px 30px
}

.buy-content li:before {
  content: '';
  position: absolute;
  left: 4px;
  top: .45em;
  width: 12px;
  height: 12px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--yellow)
}

.buy-content small {
  font-size: .875rem
}

.buy-content img {
  max-width: 100%;
  height: auto;
  border-radius: 16px
}

/* ===== Blog (category_templates/blog.phtml, components/blog-card e blog-ultimos) ===== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 14px 34px -22px #17254345;
  transition: transform .2s, box-shadow .2s
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -22px #17254366
}

.blog-card-img {
  aspect-ratio: 16/10;
  background: var(--soft)
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.blog-card-img.sem-foto {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--soft), #d7e7f6)
}

.blog-card-img.sem-foto:before {
  content: '';
  width: 56px;
  height: 56px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--yellow);
  box-shadow: 0 12px 24px -10px #a77c0080
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 26px
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 12px
}

.blog-card-meta .tag {
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--cream);
  color: var(--navy)
}

.blog-card h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--navy)
}

.blog-card p {
  font-size: .9375rem;
  margin: 0 0 18px
}

.blog-card-ler {
  margin-top: auto;
  font-size: .9375rem;
  font-weight: 800;
  color: var(--blue)
}

.blog-card-ler:after {
  content: ' →'
}

.blog-lista .blog-grid {
  margin-top: 8px
}

.blog-relacionados,
.blog-home {
  background: var(--light)
}

.blog-home .more-link {
  display: inline-block;
  margin-top: 28px
}

.blog-paginacao {
  margin-top: 40px;
  display: flex;
  justify-content: center
}

.blog-vazio {
  text-align: center;
  font-size: 1.125rem;
  padding: 40px 0
}

.blog-artigo {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--gutter)
}

.blog-artigo-head h1 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 900;
  margin: 0 0 18px
}

.blog-artigo-head .lead {
  font-size: 1.1875rem;
  max-width: none
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: .875rem;
  font-weight: 700;
  color: var(--muted);
  margin: 18px 0 0
}

.blog-meta span+span:before {
  content: '•';
  margin-right: 18px;
  color: var(--yellow)
}

.blog-capa {
  margin: 32px 0 0
}

.blog-capa img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block
}

.blog-texto {
  margin-top: 36px;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #3c4a5c
}

.blog-texto h2 {
  font-size: 1.625rem;
  color: var(--navy);
  margin: 44px 0 14px;
  line-height: 1.25
}

.blog-texto h3 {
  font-size: 1.25rem;
  color: var(--navy);
  margin: 32px 0 10px
}

.blog-texto p {
  margin: 0 0 18px
}

.blog-texto b,
.blog-texto strong {
  color: var(--navy)
}

.blog-texto a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px
}

.blog-texto ul,
.blog-texto ol {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
  counter-reset: passo
}

.blog-texto li {
  position: relative;
  padding: 0 0 10px 32px
}

.blog-texto ul li:before {
  content: '';
  position: absolute;
  left: 5px;
  top: .6em;
  width: 12px;
  height: 12px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--yellow)
}

.blog-texto ol li {
  counter-increment: passo
}

.blog-texto ol li:before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: .15em;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  display: grid;
  place-items: center
}

.blog-texto blockquote {
  margin: 28px 0;
  padding: 22px 26px;
  border-radius: 22px;
  background: var(--cream);
  color: var(--navy);
  font-weight: 600
}

.blog-texto blockquote p:last-child {
  margin: 0
}

.blog-texto small {
  font-size: .875rem;
  color: var(--muted)
}

.blog-texto img {
  max-width: 100%;
  height: auto;
  border-radius: 18px
}

.blog-artigo-fim {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line)
}

.blog-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 99px;
  background: #1f9d55;
  color: #fff;
  font-size: .875rem;
  font-weight: 800
}

.blog-share:hover {
  background: #178a49
}

@media(max-width:960px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:600px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .blog-card-body {
    padding: 20px 22px 22px
  }

  .blog-texto {
    font-size: 1rem
  }
}

.como-colocar img {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 8px auto 0;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 14px 36px -24px #17254355
}