/* =========================================================
   ALESSANDRA NASCIMENTO — LANDING PAGE
   ========================================================= */

.alessandra-page {
  --a-bg: #fbf8f1;
  --a-bg-soft: #f1f5ed;
  --a-surface: rgba(255, 255, 255, 0.88);
  --a-surface-strong: #ffffff;

  --a-text: #173d34;
  --a-muted: #66736e;

  --a-accent: #7ea489;
  --a-accent-soft: #e8efe6;
  --a-accent-strong: #255b4d;

  --a-line: rgba(37, 91, 77, 0.14);
  --a-shadow: 0 16px 42px rgba(33, 64, 55, 0.08);

  background: var(--a-bg);
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .alessandra-page {
  --a-bg: #102b2a;
  --a-bg-soft: #163635;
  --a-surface: rgba(28, 61, 58, 0.92);
  --a-surface-strong: #1b403c;

  --a-text: #f5f0e6;
  --a-muted: #c2d0ca;

  --a-accent: #9bc6a8;
  --a-accent-soft: #234840;
  --a-accent-strong: #cce2cf;

  --a-line: rgba(211, 232, 219, 0.14);
  --a-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);

  background: var(--a-bg);
}


/* =========================================================
   BASE
   ========================================================= */

.alessandra-page main {
  background: var(--a-bg);
  color: var(--a-text);
}

.alessandra-page .profile-breadcrumb {
  color: var(--a-muted);
  padding-top: 18px;
  padding-bottom: 14px;
}

.alessandra-page .profile-breadcrumb a {
  color: inherit;
}


/* =========================================================
   HERO
   ========================================================= */

.alessandra-hero {
  position: relative;
  overflow: hidden;

  min-height: 620px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(251, 248, 241, 0.98) 0%,
      rgba(251, 248, 241, 0.95) 37%,
      rgba(251, 248, 241, 0.58) 55%,
      rgba(251, 248, 241, 0.12) 100%
    ),
    url("../assets/images/sobre-sessao.jpg") center / cover no-repeat;
}


/* curva orgânica */

.alessandra-hero::before {
  content: "";
  position: absolute;

  width: 55%;
  height: 135%;

  left: -15%;
  top: -17%;

  border-radius: 0 50% 50% 0;

  background: rgba(251, 248, 241, 0.78);

  pointer-events: none;
}


/* detalhe decorativo */

.alessandra-hero::after {
  content: "";
  position: absolute;

  width: 280px;
  height: 280px;

  left: 4%;
  bottom: -170px;

  border-radius: 50%;

  border: 1px solid rgba(109, 155, 120, 0.2);

  pointer-events: none;
}


/* DARK HERO */

html[data-theme="dark"] .alessandra-hero {
  background:
    linear-gradient(
      90deg,
      rgba(16, 43, 42, 0.98) 0%,
      rgba(16, 43, 42, 0.93) 38%,
      rgba(16, 43, 42, 0.62) 58%,
      rgba(16, 43, 42, 0.28) 100%
    ),
    url("../assets/images/sobre-sessao.jpg") center / cover no-repeat;
}

html[data-theme="dark"] .alessandra-hero::before {
  background: rgba(16, 43, 42, 0.66);
}


/* GRID HERO */

.alessandra-hero-grid {
  position: relative;
  z-index: 2;

  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(360px, 0.85fr);

  align-items: end;

  gap: clamp(40px, 5vw, 90px);

  min-height: 620px;
}


/* TEXTO HERO */

.alessandra-hero-copy {
  align-self: center;

  max-width: 650px;

  /*
    IMPORTANTE:
    esta margem resolve o nome grudado
    na lateral esquerda.
  */
  margin-left: clamp(32px, 5vw, 90px);

  padding-top: 70px;
  padding-bottom: 78px;
  padding-right: 20px;

  min-width: 0;
}


.alessandra-kicker,
.alessandra-page .eyebrow {
  display: inline-block;

  color: var(--a-accent);

  text-transform: uppercase;

  letter-spacing: 0.18em;

  font-size: 0.78rem;
  font-weight: 700;
}


.alessandra-hero h1 {
  color: var(--a-text);

  font-family: "Playfair Display", serif;

  font-size: clamp(3.3rem, 5vw, 5.8rem);

  line-height: 0.98;

  max-width: 650px;

  margin: 20px 0 18px;

  letter-spacing: -0.03em;

  overflow-wrap: normal;
  word-break: normal;
}


.alessandra-hero .credential {
  font-size: 1.05rem;

  font-weight: 700;

  color: var(--a-text);

  margin-bottom: 18px;
}


.alessandra-hero .intro {
  max-width: 570px;

  color: var(--a-muted);

  font-size: 1.06rem;

  line-height: 1.75;
}


/* FOTO */

.alessandra-hero-portrait {
  width: min(100%, 560px);

  justify-self: center;
  align-self: end;

  max-height: 570px;

  object-fit: contain;

  object-position: center bottom;

  filter: drop-shadow(
    0 22px 34px rgba(22, 49, 41, 0.13)
  );
}


/* BOTÕES HERO */

.alessandra-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;
}


.alessandra-page .btn-primary {
  background: var(--a-accent-strong);

  border-color: var(--a-accent-strong);

  color: #ffffff;
}


html[data-theme="dark"]
.alessandra-page
.btn-primary {
  color: #15332e;

  background: #b8d9c1;

  border-color: #b8d9c1;
}


/* =========================================================
   SEÇÕES
   ========================================================= */

.alessandra-section {
  padding: 88px 0;

  background: var(--a-bg);
}


.alessandra-section.soft {
  background: var(--a-bg-soft);
}


/* CABEÇALHO DAS SEÇÕES */

.alessandra-heading {
  text-align: center;

  max-width: 760px;

  margin: 0 auto 44px;
}


.alessandra-heading h2,
.alessandra-panel h2,
.alessandra-social h2 {
  color: var(--a-text);

  font-family: "Playfair Display", serif;

  font-size: clamp(2.1rem, 3vw, 3.3rem);

  line-height: 1.08;

  margin: 10px 0 14px;

  overflow-wrap: break-word;
}


.alessandra-heading p,
.alessandra-panel p,
.alessandra-social p {
  color: var(--a-muted);

  line-height: 1.7;
}


/* =========================================================
   ÁREA DE ATUAÇÃO
   ========================================================= */

.alessandra-specialty-grid {
  display: flex;

  justify-content: center;
}


.alessandra-specialty-card {
  width: min(100%, 620px);

  display: grid;

  grid-template-columns: auto 1fr;

  column-gap: 24px;

  align-items: center;

  padding: 32px 36px;

  background: var(--a-surface);

  border: 1px solid var(--a-line);

  border-radius: 24px;

  box-shadow: var(--a-shadow);
}


.alessandra-specialty-card .alessandra-icon {
  grid-row: 1 / 3;

  margin-bottom: 0;
}


.alessandra-specialty-card h3 {
  color: var(--a-text);

  margin: 0 0 7px;

  font-size: 1.2rem;
}


.alessandra-specialty-card p {
  color: var(--a-muted);

  line-height: 1.65;

  margin: 0;
}


/* =========================================================
   ÍCONES
   ========================================================= */

.alessandra-icon {
  width: 58px;
  height: 58px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  background: var(--a-accent-soft);

  color: var(--a-accent-strong);

  font-size: 1.4rem;

  margin-bottom: 18px;
}


/* =========================================================
   CUIDADO / PÚBLICO
   ========================================================= */

.alessandra-care-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  border: 1px solid var(--a-line);

  border-radius: 30px;

  overflow: hidden;

  background: var(--a-surface);

  box-shadow: var(--a-shadow);
}


.alessandra-panel {
  padding: clamp(38px, 4vw, 62px);

  min-width: 0;
}


.alessandra-panel + .alessandra-panel {
  border-left: 1px solid var(--a-line);
}


.alessandra-panel h2 {
  /*
    evita títulos gigantes vazando
    para a outra coluna
  */
  font-size: clamp(2rem, 2.8vw, 3.1rem);

  max-width: 520px;
}


/* CHECKLIST */

.alessandra-checks,
.alessandra-audience {
  list-style: none;

  margin: 26px 0 0;

  padding: 0;

  display: grid;

  gap: 13px;
}


.alessandra-checks li {
  position: relative;

  padding-left: 32px;

  color: var(--a-text);

  line-height: 1.5;
}


.alessandra-checks li::before {
  content: "\f058";

  font-family: "Font Awesome 6 Free";

  font-weight: 900;

  position: absolute;

  left: 0;
  top: 1px;

  color: var(--a-accent);
}


/* PÚBLICO */

.alessandra-audience li {
  display: flex;

  align-items: center;

  gap: 13px;

  background: var(--a-accent-soft);

  border: 1px solid var(--a-line);

  border-radius: 14px;

  padding: 14px 16px;

  color: var(--a-text);
}


.alessandra-audience i {
  color: var(--a-accent-strong);

  width: 22px;

  text-align: center;
}


/* =========================================================
   DIFERENCIAIS
   ========================================================= */

.alessandra-diff-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 20px;
}


.alessandra-diff-card {
  background: var(--a-surface);

  border: 1px solid var(--a-line);

  border-radius: 24px;

  box-shadow: var(--a-shadow);

  padding: 32px 24px;

  text-align: center;
}


.alessandra-diff-card .alessandra-icon {
  margin: 0 auto 18px;
}


.alessandra-diff-card h3 {
  color: var(--a-text);

  margin-bottom: 10px;
}


.alessandra-diff-card p {
  color: var(--a-muted);

  line-height: 1.65;

  margin: 0;
}


/* =========================================================
   CTA
   ========================================================= */

.alessandra-cta {
  position: relative;

  overflow: hidden;

  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 24px;

  padding: 32px 36px;

  border-radius: 28px;

  background:
    linear-gradient(
      90deg,
      rgba(31, 79, 66, 0.97),
      rgba(66, 99, 75, 0.88)
    ),
    url("../assets/images/hero-sessao.jpg")
      center / cover no-repeat;

  color: #ffffff;

  box-shadow: var(--a-shadow);
}


.alessandra-cta-icon {
  width: 74px;
  height: 74px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.94);

  color: #2d6654;

  display: grid;

  place-items: center;

  font-size: 1.55rem;
}


.alessandra-cta h2 {
  font-family: "Playfair Display", serif;

  font-size: clamp(1.8rem, 2.6vw, 2.8rem);

  line-height: 1.1;

  margin: 0 0 7px;
}


.alessandra-cta p {
  margin: 0;

  color: rgba(255, 255, 255, 0.82);
}


.alessandra-cta .btn {
  white-space: nowrap;
}


/* =========================================================
   REDES SOCIAIS
   ========================================================= */

.alessandra-social {
  text-align: center;

  padding-top: 64px;
}


.alessandra-social-links {
  display: flex;

  justify-content: center;

  margin-top: 22px;
}


.alessandra-social-link {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: var(--a-text);

  border: 1px solid var(--a-line);

  background: var(--a-surface);

  padding: 11px 19px;

  border-radius: 999px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.alessandra-page .site-footer {
  background: #123d35;
}


html[data-theme="dark"]
.alessandra-page
.site-footer {
  background: #0a211f;
}


/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-width: 1200px) {

  .alessandra-hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(330px, 0.8fr);

    gap: 30px;
  }


  .alessandra-hero-copy {
    margin-left: clamp(28px, 4vw, 55px);
  }


  .alessandra-hero h1 {
    font-size: clamp(3rem, 5.5vw, 4.8rem);
  }


  .alessandra-hero-portrait {
    max-height: 530px;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

  .alessandra-hero {
    min-height: 570px;
  }


  .alessandra-hero-grid {
    min-height: 570px;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.72fr);

    gap: 20px;
  }


  .alessandra-hero-copy {
    margin-left: 24px;

    padding-top: 50px;
    padding-bottom: 60px;
  }


  .alessandra-hero h1 {
    font-size: clamp(2.8rem, 6vw, 4.2rem);
  }


  .alessandra-diff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .alessandra-cta {
    grid-template-columns: auto 1fr;
  }


  .alessandra-cta .btn {
    grid-column: 2;

    justify-self: start;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .alessandra-hero {
    min-height: auto;

    background-position: 68% center;
  }


  .alessandra-hero::before {
    width: 115%;
    height: 65%;

    left: -20%;
    top: -12%;

    border-radius: 0 0 50% 50%;
  }


  .alessandra-hero-grid {
    grid-template-columns: 1fr;

    min-height: auto;
  }


  .alessandra-hero-copy {
    /*
      no celular usamos padding,
      e removemos a margem desktop
    */
    margin-left: 0;

    padding:
      50px
      24px
      24px;

    max-width: 100%;
  }


  .alessandra-hero h1 {
    font-size: clamp(2.8rem, 13vw, 4.2rem);

    line-height: 1;

    max-width: 9ch;

    margin-top: 16px;
  }


  .alessandra-hero .intro {
    font-size: 1rem;

    line-height: 1.65;
  }


  .alessandra-actions {
    gap: 10px;
  }


  .alessandra-hero-portrait {
    max-height: 460px;

    justify-self: center;
  }


  .alessandra-section {
    padding: 64px 0;
  }


  .alessandra-specialty-card {
    grid-template-columns: 1fr;

    text-align: center;

    padding: 28px 24px;
  }


  .alessandra-specialty-card
  .alessandra-icon {
    grid-row: auto;

    margin: 0 auto 16px;
  }


  .alessandra-care-grid {
    grid-template-columns: 1fr;
  }


  .alessandra-panel {
    padding: 32px 24px;
  }


  .alessandra-panel + .alessandra-panel {
    border-left: 0;

    border-top: 1px solid var(--a-line);
  }


  .alessandra-panel h2 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }


  .alessandra-diff-grid {
    grid-template-columns: 1fr;
  }


  .alessandra-cta {
    grid-template-columns: 1fr;

    text-align: center;

    padding: 30px 24px;
  }


  .alessandra-cta-icon {
    margin: 0 auto;
  }


  .alessandra-cta .btn {
    grid-column: auto;

    justify-self: center;
  }
}


/* =========================================================
   CELULARES PEQUENOS
   ========================================================= */

@media (max-width: 420px) {

  .alessandra-hero-copy {
    padding-left: 20px;
    padding-right: 20px;
  }


  .alessandra-hero h1 {
    font-size: clamp(2.6rem, 14vw, 3.5rem);
  }


  .alessandra-actions {
    flex-direction: column;

    align-items: stretch;
  }


  .alessandra-actions .btn {
    justify-content: center;

    width: 100%;
  }


  .alessandra-panel {
    padding: 28px 20px;
  }
}