/* =========================================================
   Marília Neri — landing page
   Paleta viva: creme + coral + verde-água + amarelo-sol
   ========================================================= */

:root{
  --cream:#fbf3e2;
  --cream-hi:#fffaf0;
  --ink:#3a2a30;
  --ink-soft:#6d5a5f;
  --coral:#f0604a;      /* Escritora */
  --coral-deep:#d94a35;
  --teal:#1fa08e;       /* Psicóloga */
  --teal-deep:#158173;
  --sun:#f7b13c;        /* destaque compartilhado */
  --pink:#f39ab0;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  min-height:100dvh;
  background:
    radial-gradient(90% 60% at 12% 0%, #fef6e6, transparent 60%),
    radial-gradient(80% 60% at 92% 100%, #fbeede, transparent 60%),
    var(--cream);
  color:var(--ink);
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:clamp(1.5rem,4vw,3rem);
  position:relative;overflow-x:hidden;
}

/* ---------- formas decorativas ao fundo ---------- */
.blob{position:fixed;border-radius:50%;filter:blur(8px);opacity:.28;z-index:0;pointer-events:none}
.blob.b1{width:min(38vw,320px);aspect-ratio:1;background:var(--coral);top:-6%;left:-8%}
.blob.b2{width:min(34vw,300px);aspect-ratio:1;background:var(--teal);bottom:-8%;right:-6%}
.blob.b3{width:min(20vw,160px);aspect-ratio:1;background:var(--sun);top:64%;left:6%;opacity:.22}
.squiggle{position:fixed;top:9%;right:7%;width:120px;color:var(--sun);opacity:.6;z-index:0;pointer-events:none}

.wrap{position:relative;z-index:1;width:100%;max-width:1000px;text-align:center}

/* ---------- cabeçalho ---------- */
h1{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;font-size:clamp(2.6rem,7.5vw,4.6rem);
  line-height:.98;letter-spacing:-.02em;margin:.9rem 0 0;
}
.tagline{
  margin:1rem auto 0;max-width:44ch;
  font-family:"Instrument Serif",serif;font-style:normal;
  font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:1.45;color:var(--ink-soft);
}

/* ---------- cartões ---------- */
.cards{
  margin-top:clamp(2rem,5vw,3.2rem);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.6rem);
}
.card{
  position:relative;display:block;text-align:left;
  text-decoration:none;border-radius:28px;overflow:hidden;
  color:var(--cream-hi);
  min-height:clamp(320px,46vw,440px);
  box-shadow:0 18px 40px -20px rgba(58,42,48,.55);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  outline:none;
}
.card--writer{background:var(--coral)}
.card--psy{background:var(--teal)}

/* foto de fundo de cada cartão (URLs das fotos no site) */
.photo{
  position:absolute;inset:0;
  background-size:cover;background-position:center top;
  transition:transform .8s var(--ease);
}
.card--writer .photo{background-image:url("https://escritora.marilianeri.com.br/wp-content/uploads/2025/01/IMG_8014-scaled-e1737841503149.jpg");background-position:center 80%}
.card--psy .photo{background-image:url("https://psicologa.marilianeri.com.br/wp-content/uploads/2025/01/IMG_8223-scaled.jpg")}
.card:hover .photo,.card:focus-visible .photo{transform:scale(1.06)}

/* véu de cor pra o texto ficar legível */
.scrim{position:absolute;inset:0;transition:opacity .5s var(--ease)}
.card--writer .scrim{background:linear-gradient(to top,rgba(217,74,53,.94) 8%,rgba(217,74,53,.35) 42%,rgba(217,74,53,0) 72%)}
.card--psy .scrim{background:linear-gradient(to top,rgba(21,129,115,.94) 8%,rgba(21,129,115,.35) 42%,rgba(21,129,115,0) 72%)}
.card:hover,.card:focus-visible{box-shadow:0 34px 60px -24px rgba(58,42,48,.6)}
.card--writer:hover,.card--writer:focus-visible{transform:translateY(-10px) rotate(-1.2deg)}
.card--psy:hover,.card--psy:focus-visible{transform:translateY(-10px) rotate(1.2deg)}
.card:focus-visible{box-shadow:0 0 0 4px var(--cream-hi),0 0 0 8px currentColor}

.body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(1.4rem,2.6vw,2rem);
  display:flex;flex-direction:column;gap:.5rem;
}
.kicker{font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;font-weight:700;opacity:.9}
.card h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1;margin-top:.1rem;
}
.card p{font-size:1rem;line-height:1.5;opacity:.94;margin-bottom:.5rem}
.btn{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--cream-hi);color:var(--ink);
  padding:.78rem 1.35rem;border-radius:100px;
  font-weight:700;font-size:.85rem;
  transition:gap .3s var(--ease);
}
.card--writer .btn{color:var(--coral-deep)}
.card--psy .btn{color:var(--teal-deep)}
.btn svg{transition:transform .35s var(--ease)}
.card:hover .btn svg,.card:focus-visible .btn svg{transform:translateX(4px)}

/* ---------- contatos ---------- */
.contact{
  margin-top:clamp(2rem,4vw,2.8rem);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem 1.3rem;
}
.contact a{
  color:var(--ink-soft);text-decoration:none;font-weight:700;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;
  transition:color .3s;
}
.contact a:hover,.contact a:focus-visible{color:var(--coral-deep)}

/* ---------- responsivo ---------- */
@media (max-width:720px){
  .cards{grid-template-columns:1fr}
  .card{min-height:380px}
  .squiggle{display:none}
}

/* ---------- movimento ---------- */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
h1{animation:rise .8s var(--ease) .05s both}
.tagline{animation:rise .8s var(--ease) .2s both}
.card--writer{animation:rise .8s var(--ease) .3s both}
.card--psy{animation:rise .8s var(--ease) .4s both}
.contact{animation:rise .8s var(--ease) .5s both}
.blob{animation:float 9s ease-in-out infinite}
.blob.b2{animation-duration:11s}
.blob.b3{animation-duration:7s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}