/* Pata & Casa - the flyer, moved to the web.
   Everything here comes off Érica's panfleto: the cream ground, the eucalyptus and
   paw ornaments, the brushstroke blobs, the arch-topped photo cards, the round
   medallions, the sage band and the big rose "Fale comigo!" pill. */

:root {
  --cream:      #FCF6EC;
  --cream-deep: #F5E9DA;
  --card:       #FFFCF7;
  --sage-pale:  #DEDECB;
  --sage-mid:   #C9CDB4;
  --sage:       #6E7A5E;
  --rose-pale:  #F4DED6;
  --rose-mid:   #E8C4BA;
  --rose:       #CB8D7B;
  --rose-deep:  #B46A54;
  --ink:        #4B2B1C;
  --ink-soft:   #80604E;
  --white:      #FFFFFF;

  --t-small:  0.9375rem;
  --t-body:   clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-lead:   clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --t-h3:     clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --t-h2:     clamp(1.875rem, 1.4rem + 1.9vw, 3rem);
  --t-h1:     clamp(2.125rem, 1.5rem + 2.8vw, 3.75rem);

  --m:    clamp(20px, 5vw, 48px);
  --wrap: 1180px;
  --r:    28px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Nunito, "Segoe UI", system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

h1, h2, h3 { font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

:focus-visible { outline: 3px solid var(--rose-deep); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--rose-mid); color: var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--m); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- ornaments */

.orn { position: absolute; pointer-events: none; z-index: 0; }
.orn--leaf { opacity: 0.55; }
.orn--paw  { opacity: 0.3; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0.9em 1.9em;
  background: var(--ink);
  color: var(--cream);
  font-size: var(--t-body);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.btn:hover { background: #38200f; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: var(--card); color: var(--ink); }
.btn--ghost:hover { background: var(--rose-pale); }

/* ------------------------------------------------------------------ nav */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 244, 234, 0.9);
  backdrop-filter: blur(10px);
}
.topbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 10px;
}
.topbar__mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; }
.topbar__mark img { width: 46px; height: 46px; object-fit: contain; }
.topbar__mark span { font-size: var(--t-body); }
.topbar__mark i { font-style: normal; color: var(--rose); }
.topbar nav { display: flex; gap: 26px; font-weight: 700; font-size: var(--t-small); }
.topbar nav a { text-decoration: none; color: var(--ink-soft); }
.topbar nav a:hover { color: var(--ink); }
.topbar .btn { padding: 0.62em 1.3em; font-size: var(--t-small); }

/* ----------------------------------------------------------------- hero */

.hero { position: relative; text-align: center; padding-block: clamp(8px, 1.5vw, 20px) clamp(44px, 6vw, 84px); }
.hero .wrap { position: relative; }
.hero__in { position: relative; z-index: 2; }
.hero__logo { max-width: min(360px, 68vw); margin-inline: auto; }
.hero h1 { margin-top: clamp(4px, 1vw, 14px); max-width: 15ch; margin-inline: auto; }
.hero__say { margin: 16px auto 0; max-width: 46ch; font-size: var(--t-lead); color: var(--ink-soft); }
.hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* the two brushstroke taglines off her flyer */
.blob {
  position: absolute;
  z-index: 1;
  width: min(220px, 26vw);
  padding: 30px 30px;
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}
.blob--rose {
  left: -10px; top: 74px;
  background: var(--rose-pale);
  border-radius: 62% 38% 52% 48% / 58% 46% 54% 42%;
  transform: rotate(-5deg);
}
.blob--sage {
  right: -10px; top: 40px;
  background: var(--sage-pale);
  border-radius: 44% 56% 40% 60% / 48% 56% 44% 52%;
  transform: rotate(4deg);
}

/* ------------------------------------------------------------- sections */

.sec { position: relative; padding-block: clamp(48px, 6vw, 88px); }
.sec__head { text-align: center; max-width: 36ch; margin: 0 auto clamp(30px, 4vw, 48px); }
.sec__head p { margin-top: 14px; color: var(--ink-soft); font-size: var(--t-lead); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(22px, 2.6vw, 34px);
  position: relative;
  z-index: 2;
}

.card { position: relative; display: flex; flex-direction: column; }
.card__pic { border-radius: var(--r) var(--r) 12px 12px; overflow: hidden; aspect-ratio: 316 / 268; }
.card__pic img { width: 100%; height: 100%; object-fit: cover; }

.medal {
  width: 86px; height: 86px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 5px solid var(--card);
  position: relative; z-index: 3;
}
.medal--sage { background: var(--sage-pale); color: var(--sage); }
.medal--rose { background: var(--rose-pale); color: var(--rose-deep); }
.card .medal { margin: -46px auto 0; }
.card--sage .medal { border-color: #EFF1E6; }
.card--rose .medal { border-color: #FCEDE7; }

.card__body {
  flex: 1;
  margin-top: -43px;
  padding: 56px 26px 30px;
  background: var(--card);
  border-radius: 12px 12px var(--r) var(--r);
  text-align: center;
}
.card--sage .card__body { background: #EFF1E6; }
.card--rose .card__body { background: #FCEDE7; }
.card__promise { margin-top: 6px; color: var(--ink-soft); font-weight: 700; }
.card__desc { margin-top: 12px; font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }
.card ul { margin-top: 20px; text-align: left; display: grid; gap: 11px; }
.card li { display: flex; align-items: flex-start; gap: 11px; font-size: var(--t-small); line-height: 1.45; }
.card li svg { flex: 0 0 auto; margin-top: 3px; color: var(--rose); }
.card--sage li svg { color: var(--sage); }

/* ------------------------------------------------- the live thing: blocos */

.blocos {
  position: relative; z-index: 2;
  background: var(--card);
  border-radius: 40px;
  padding: clamp(26px, 3.4vw, 48px);
}
.blocos__head { text-align: center; max-width: 42ch; margin: 0 auto 26px; }
.blocos__head p { margin-top: 10px; color: var(--ink-soft); }

.chooser { display: grid; gap: 20px; justify-items: center; }
.chooser fieldset { border: 0; margin: 0; padding: 0; text-align: center; }
.chooser legend { padding: 0 0 10px; font-size: var(--t-small); font-weight: 700; color: var(--ink-soft); }
.opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.opt { position: relative; }
.opt input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt span {
  display: block;
  padding: 0.7em 1.3em;
  background: var(--cream-deep);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 700;
  border-radius: 999px;
  transition: background 180ms ease, color 180ms ease;
}
.opt input:hover + span { background: var(--rose-pale); }
.opt input:checked + span { background: var(--rose-deep); color: var(--white); }
.opt input:focus-visible + span { outline: 3px solid var(--rose-deep); outline-offset: 3px; }

.linha {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 16px;
}
.momento {
  background: var(--cream);
  border-radius: 24px;
  padding: 20px 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.momento--sage { background: #EFF1E6; }
.momento--rose { background: #FCEDE7; }
.momento__top { display: flex; align-items: center; gap: 12px; }
.momento__med {
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--card);
  display: grid; place-items: center;
  color: var(--ink);
}
.momento__when { font-size: 0.8125rem; font-weight: 800; color: var(--rose-deep); }
.momento h4 { margin: 2px 0 0; font-size: var(--t-body); font-weight: 800; line-height: 1.25; }
.momento p { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }

/* ----------------------------------------------------------- trust band */

.confianca {
  background: var(--sage-pale);
  border-radius: 44px;
  padding: clamp(32px, 4vw, 54px) clamp(20px, 3vw, 40px);
  position: relative; z-index: 2;
}
.confianca ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(22px, 3vw, 36px);
  text-align: center;
}
.confianca li { display: grid; justify-items: center; gap: 14px; font-weight: 700; line-height: 1.45; }
.confianca .medal { border-color: #EAEBDE; }

/* -------------------------------------------------------------- the ask */

.ask {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(22px, 3vw, 44px);
  align-items: stretch;
  position: relative; z-index: 2;
}

/* left: the sage pill, with its note underneath, as on the panfleto */
.ask__tempo { display: flex; flex-direction: column; justify-content: center; gap: 16px; text-align: center; }
.ask__pill {
  align-self: center;
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--sage);
  color: var(--cream);
  border-radius: 999px;
  padding: 16px 30px 16px 22px;
  font-size: var(--t-lead);
  font-weight: 800;
  line-height: 1.2;
}
.ask__pill svg { flex: 0 0 auto; }
.ask__tempo .ask__pill { color: var(--cream); max-width: none; }
.ask__tempo p { max-width: 32ch; margin-inline: auto; color: var(--ink-soft); font-weight: 700; line-height: 1.45; }

/* right: one rose panel holding the call to action and the number */
.ask__zap {
  background: var(--rose);
  border-radius: 44px;
  padding: clamp(22px, 2.6vw, 32px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center;
}
.ask__frase {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--white);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.375rem);
  font-weight: 800;
  line-height: 1.1;
}
.ask__numero {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--card);
  border-radius: 999px;
  padding: 14px 34px;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  font-weight: 800;
  color: var(--rose-deep);
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms ease, transform 200ms ease;
}
.ask__numero:hover { background: var(--white); transform: translateY(-2px); }

/* ------------------------------------------------------------------ faq */

.factos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; position: relative; z-index: 2; }
.facto { background: var(--sage-pale); border-radius: 999px; padding: 9px 20px; font-size: var(--t-small); font-weight: 700; }
.facto--rose { background: var(--rose-pale); color: var(--rose-deep); }

.faq__list { display: grid; gap: 14px; max-width: 820px; margin-inline: auto; position: relative; z-index: 2; }
.faq__list details { background: var(--card); border-radius: 24px; padding: 2px 26px; }
.faq__list summary {
  list-style: none; cursor: pointer; padding: 18px 0;
  font-weight: 800; font-size: var(--t-lead);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 44px;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list .chev { flex: 0 0 auto; color: var(--rose-deep); transition: transform 240ms ease; }
.faq__list details[open] .chev { transform: rotate(180deg); }
.faq__list details p { padding-bottom: 20px; color: var(--ink-soft); }

/* --------------------------------------------------------------- footer */

.footer { background: var(--cream-deep); padding-block: clamp(44px, 6vw, 76px); text-align: center; position: relative; overflow: hidden; }
.footer__in { position: relative; z-index: 2; }
.footer__logo { max-width: 250px; margin-inline: auto; background: var(--cream); border-radius: 32px; padding: 14px; }
.footer nav { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; font-weight: 700; }
.footer nav a { text-decoration: none; }
.footer nav a:hover { color: var(--rose-deep); }
.credito {
  margin-top: 26px;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: center; justify-content: center;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.credito__dp { display: inline-flex; align-items: center; gap: 8px; }
.credito__dp a { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; text-decoration: none; transition: color 180ms ease; }
.credito__dp a:hover { color: var(--rose-deep); }
.credito__dp img { width: 20px; height: 20px; }

.footer__legal { margin-top: 24px; font-size: 0.8125rem; color: var(--ink-soft); max-width: 70ch; margin-inline: auto; }

/* ------------------------------------------------------- floating cta */

.zap {
  position: fixed;
  right: clamp(14px, 2.4vw, 26px);
  bottom: clamp(14px, 2.4vw, 26px);
  z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px 14px 17px;
  background: #4F5A44;
  color: var(--white);
  font-size: var(--t-small);
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(75, 43, 28, 0.26);
  transition: background 200ms ease, transform 200ms ease;
}
.zap:hover { background: #3E4736; transform: translateY(-2px); }

/* ---------------------------------------------------------------- motion */

.rise { opacity: 0; transform: translateY(22px); transition: opacity 620ms ease, transform 620ms cubic-bezier(.22,.61,.36,1); }
.rise.in { opacity: 1; transform: none; }

/* ----------------------------------------------------------------- small */

@media (max-width: 880px) {
  .topbar nav { display: none; }
  .hero .wrap { display: flex; flex-direction: column; }
  .hero__in { order: 1; }
  .blobs { order: 2; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
  .blob { position: static; width: auto; max-width: 30ch; transform: none; padding: 24px 28px; }
  .ask { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .rise { opacity: 1 !important; transform: none !important; }
}