/* =========================================================
   Biblioteca de componentes — Yhure Cabral
   ========================================================= */

/* ---------------------------------------------------------
   Estruturas
   --------------------------------------------------------- */

.yc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--yc-stack-gap, var(--yc-space-6));
}

.yc-cluster {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--yc-cluster-gap, var(--yc-space-4));
}

.yc-grid {
  display: grid;
  gap: var(--yc-grid-gap, var(--yc-space-6));
  grid-template-columns:
    repeat(
      var(--yc-grid-columns, 3),
      minmax(0, 1fr)
    );
}

.yc-grid--2 {
  --yc-grid-columns: 2;
}

.yc-grid--3 {
  --yc-grid-columns: 3;
}

.yc-grid--4 {
  --yc-grid-columns: 4;
}

/* ---------------------------------------------------------
   Cabeçalhos de seção
   --------------------------------------------------------- */

.yc-section-heading {
  margin-bottom: var(--yc-space-10);
  max-width: 760px;
}

.yc-section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.yc-section-heading__eyebrow {
  color: var(--yc-color-secondary);
  font-size: var(--yc-font-size-sm);
  font-weight: var(--yc-font-weight-semibold);
  letter-spacing: 0.08em;
  margin: 0 0 var(--yc-space-3);
  text-transform: uppercase;
}

.yc-section-heading__title {
  margin: 0;
}

.yc-section-heading__text {
  color: var(--yc-color-text-muted);
  font-size: var(--yc-font-size-md);
  margin: var(--yc-space-4) 0 0;
  max-width: 65ch;
}

.yc-section-heading--center .yc-section-heading__text {
  margin-inline: auto;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.yc-hero {
  overflow: hidden;
  padding-block:
    clamp(
      var(--yc-space-16),
      9vw,
      var(--yc-space-24)
    );
}

.yc-hero--surface {
  background: var(--yc-color-surface);
}

.yc-hero--muted {
  background: var(--yc-color-surface-muted);
}

.yc-hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(var(--yc-space-8), 6vw, var(--yc-space-16));
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
}

.yc-hero__content {
  max-width: 720px;
}

.yc-hero__title {
  font-size: clamp(2.25rem, 5vw, 4rem);
  letter-spacing: -0.035em;
  margin: 0;
}

.yc-hero__text {
  color: var(--yc-color-text-muted);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  margin: var(--yc-space-6) 0 0;
  max-width: 62ch;
}

.yc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yc-space-3);
  margin-top: var(--yc-space-8);
}

.yc-hero__media {
  overflow: hidden;
}

.yc-hero__media img {
  aspect-ratio: 4 / 5;
  border-radius: var(--yc-radius-xl);
  box-shadow: var(--yc-shadow-lg);
  object-fit: cover;
  width: 100%;
}

/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */

.yc-card {
  background: var(--yc-color-surface);
  border: 1px solid var(--yc-color-border);
  border-radius: var(--yc-radius-lg);
  box-shadow: var(--yc-shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--yc-space-8);
  transition:
    border-color var(--yc-transition-base),
    box-shadow var(--yc-transition-base),
    transform var(--yc-transition-base);
}

.yc-card:hover {
  border-color: var(--yc-color-border-strong);
  box-shadow: var(--yc-shadow-md);
  transform: translateY(-2px);
}

.yc-card__icon {
  align-items: center;
  background: var(--yc-color-primary-soft);
  border-radius: var(--yc-radius-md);
  color: var(--yc-color-primary);
  display: inline-flex;
  height: 48px;
  justify-content: center;
  margin-bottom: var(--yc-space-6);
  width: 48px;
}

.yc-card__title {
  font-size: var(--yc-font-size-lg);
  margin: 0;
}

.yc-card__text {
  color: var(--yc-color-text-muted);
  margin: var(--yc-space-3) 0 0;
}

.yc-card__action {
  margin-top: auto;
  padding-top: var(--yc-space-6);
}

.yc-card__link {
  align-items: center;
  display: inline-flex;
  font-weight: var(--yc-font-weight-semibold);
  gap: var(--yc-space-2);
  text-decoration: none;
}

.yc-card--specialty {
  border-top: 4px solid var(--yc-color-primary);
}

.yc-card--info {
  box-shadow: none;
}

/* ---------------------------------------------------------
   Lista de benefícios
   --------------------------------------------------------- */

.yc-check-list {
  display: grid;
  gap: var(--yc-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.yc-check-list__item {
  align-items: flex-start;
  display: flex;
  gap: var(--yc-space-3);
}

.yc-check-list__icon {
  align-items: center;
  background: var(--yc-color-secondary-soft);
  border-radius: var(--yc-radius-pill);
  color: var(--yc-color-secondary);
  display: inline-flex;
  flex: 0 0 28px;
  height: 28px;
  justify-content: center;
  margin-top: 0.1em;
}

/* ---------------------------------------------------------
   Processo em etapas
   --------------------------------------------------------- */

.yc-process {
  counter-reset: yc-process;
  display: grid;
  gap: var(--yc-space-6);
  grid-template-columns:
    repeat(
      var(--yc-process-columns, 3),
      minmax(0, 1fr)
    );
}

.yc-process__item {
  counter-increment: yc-process;
  position: relative;
}

.yc-process__number {
  align-items: center;
  background: var(--yc-color-primary);
  border-radius: var(--yc-radius-pill);
  color: var(--yc-color-white);
  display: inline-flex;
  font-weight: var(--yc-font-weight-semibold);
  height: 44px;
  justify-content: center;
  margin-bottom: var(--yc-space-5);
  width: 44px;
}

.yc-process__number::before {
  content: counter(yc-process);
}

.yc-process__title {
  font-size: var(--yc-font-size-lg);
  margin: 0;
}

.yc-process__text {
  color: var(--yc-color-text-muted);
  margin: var(--yc-space-3) 0 0;
}

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */

.yc-faq {
  border-top: 1px solid var(--yc-color-border);
}

.yc-faq__item {
  border-bottom: 1px solid var(--yc-color-border);
}

.yc-faq__question {
  color: var(--yc-color-heading);
  cursor: pointer;
  font-size: var(--yc-font-size-md);
  font-weight: var(--yc-font-weight-semibold);
  list-style: none;
  padding: var(--yc-space-6) var(--yc-space-10)
    var(--yc-space-6) 0;
  position: relative;
}

.yc-faq__question::-webkit-details-marker {
  display: none;
}

.yc-faq__question::after {
  content: "+";
  font-size: var(--yc-font-size-xl);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.yc-faq__item[open] .yc-faq__question::after {
  content: "−";
}

.yc-faq__answer {
  color: var(--yc-color-text-muted);
  max-width: 70ch;
  padding: 0 var(--yc-space-8) var(--yc-space-6) 0;
}

/* ---------------------------------------------------------
   Avisos
   --------------------------------------------------------- */

.yc-notice {
  background: var(--yc-color-primary-soft);
  border-left: 4px solid var(--yc-color-primary);
  border-radius:
    0
    var(--yc-radius-md)
    var(--yc-radius-md)
    0;
  padding: var(--yc-space-5) var(--yc-space-6);
}

.yc-notice--warning {
  background: var(--yc-color-accent-soft);
  border-left-color: var(--yc-color-accent);
}

.yc-notice--emergency {
  background: #fef3f2;
  border-left-color: var(--yc-color-error);
}

.yc-notice__title {
  font-size: var(--yc-font-size-base);
  margin: 0;
}

.yc-notice__text {
  margin: var(--yc-space-2) 0 0;
}

/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.yc-cta {
  background:
    linear-gradient(
      135deg,
      var(--yc-color-primary),
      var(--yc-color-secondary)
    );
  border-radius: var(--yc-radius-xl);
  color: var(--yc-color-white);
  overflow: hidden;
  padding:
    clamp(
      var(--yc-space-8),
      6vw,
      var(--yc-space-16)
    );
  position: relative;
}

.yc-cta__grid {
  align-items: center;
  display: grid;
  gap: var(--yc-space-8);
  grid-template-columns: minmax(0, 1fr) auto;
}

.yc-cta__title {
  color: var(--yc-color-white);
  margin: 0;
}

.yc-cta__text {
  color: rgb(255 255 255 / 82%);
  margin: var(--yc-space-3) 0 0;
  max-width: 62ch;
}

.yc-cta .yc-button--primary {
  background: var(--yc-color-white);
  color: var(--yc-color-primary);
}

.yc-cta .yc-button--primary:hover {
  background: var(--yc-color-primary-soft);
  color: var(--yc-color-primary-hover);
}

/* ---------------------------------------------------------
   Responsividade
   --------------------------------------------------------- */

@media (max-width: 999px) {
  .yc-grid--3,
  .yc-grid--4 {
    --yc-grid-columns: 2;
  }

  .yc-hero__grid {
    grid-template-columns: 1fr;
  }

  .yc-hero__media {
    max-width: 620px;
  }

  .yc-process {
    --yc-process-columns: 1;
  }

  .yc-cta__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .yc-grid,
  .yc-grid--2,
  .yc-grid--3,
  .yc-grid--4 {
    --yc-grid-columns: 1;
  }

  .yc-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .yc-hero__actions .yc-button {
    width: 100%;
  }

  .yc-card {
    padding: var(--yc-space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yc-card,
  .yc-button {
    transform: none !important;
  }
}

/* =========================================================
   Homepage preview
   ========================================================= */

.yc-home-preview__section-footer {
  margin-top: var(--token-space-8);
}

.yc-home-preview__media-placeholder,
.yc-home-preview__portrait-placeholder {
  align-items: center;
  background:
    linear-gradient(
      135deg,
      var(--token-color-primary-soft),
      var(--token-color-secondary-soft)
    );
  border: 1px solid var(--token-color-border);
  border-radius: var(--token-radius-xl);
  color: var(--token-color-text-muted);
  display: flex;
  justify-content: center;
  min-height: 420px;
  padding: var(--token-space-8);
  text-align: center;
}

.yc-home-preview__professional {
  align-items: center;
  display: grid;
  gap: clamp(
    var(--token-space-8),
    6vw,
    var(--token-space-16)
  );
  grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
}

.yc-home-preview__professional > div:first-child {
  max-width: 680px;
}

.yc-home-preview__professional h2 {
  margin-top: var(--token-space-3);
}

.yc-home-preview__professional p {
  color: var(--token-color-text-muted);
  margin-bottom: var(--token-space-6);
}

.yc-home-preview__cta-note {
  color: rgb(255 255 255 / 72%);
  font-size: var(--token-font-size-sm);
  margin: var(--token-space-4) 0 0;
}

@media (max-width: 999px) {
  .yc-home-preview__professional {
    grid-template-columns: 1fr;
  }

  .yc-home-preview__portrait-placeholder {
    max-width: 620px;
  }
}

@media (max-width: 767px) {
  .yc-home-preview__media-placeholder,
  .yc-home-preview__portrait-placeholder {
    min-height: 320px;
  }
}

/* =========================================================
   Homepage — refinamento mobile
   Review HP-011 até HP-014
   ========================================================= */

@media (max-width: 767px) {

  /*
   * Seções
   */

  .yc-home-preview .yc-section {
    padding-block: var(--token-space-12);
  }

  .yc-home-preview .yc-container {
    padding-inline: var(--token-space-5);
  }

  /*
   * Hero
   */

  .yc-home-preview .yc-hero {
    padding-block:
      var(--token-space-12)
      var(--token-space-16);
  }

  .yc-home-preview .yc-hero__grid {
    gap: var(--token-space-8);
  }

  .yc-home-preview .yc-hero__title {
    font-size: clamp(
      2rem,
      9vw,
      2.5rem
    );
    line-height: 1.08;
  }

  .yc-home-preview .yc-hero__text {
    font-size: var(--token-font-size-base);
    line-height: var(--token-line-height-body);
  }

  .yc-home-preview .yc-hero__actions {
    gap: var(--token-space-3);
  }

  .yc-home-preview .yc-hero__actions .yc-button {
    justify-content: center;
    min-height: 48px;
    width: 100%;
  }

  /*
   * Imagem do hero
   */

  .yc-home-preview__media-placeholder {
    min-height: 300px;
  }

  /*
   * Cards
   *
   * Em mobile, todas as grades da homepage devem
   * assumir uma única coluna.
   */

  .yc-home-preview .yc-grid,
  .yc-home-preview .yc-grid--2,
  .yc-home-preview .yc-grid--3,
  .yc-home-preview .yc-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .yc-home-preview .yc-card {
    min-width: 0;
    padding: var(--token-space-6);
  }

  /*
   * Cabeçalhos
   */

  .yc-home-preview .yc-section-heading {
    margin-bottom: var(--token-space-8);
  }

  .yc-home-preview .yc-section-heading__title {
    font-size: clamp(
      1.5rem,
      7vw,
      2rem
    );
    line-height: 1.15;
  }

  /*
   * Processo
   */

  .yc-home-preview .yc-process {
    gap: var(--token-space-8);
  }

  /*
   * Sobre
   */

  .yc-home-preview__professional {
    gap: var(--token-space-8);
  }

  .yc-home-preview__portrait-placeholder {
    min-height: 280px;
    width: 100%;
  }

  /*
   * FAQ
   */

  .yc-home-preview .yc-faq__question {
    padding-block: var(--token-space-5);
  }

  /*
   * CTA final
   */

  .yc-home-preview .yc-cta {
    border-radius: var(--token-radius-lg);
    padding: var(--token-space-8);
  }

  .yc-home-preview .yc-cta__grid {
    gap: var(--token-space-6);
  }

  .yc-home-preview .yc-cta .yc-button {
    justify-content: center;
    min-height: 48px;
    width: 100%;
  }
}

/* =========================================================
   Specialties carousel
   ========================================================= */

.yc-specialties-carousel {
  min-width: 0;
}

.yc-specialties-carousel__viewport {
  min-width: 0;
}

.yc-specialties-carousel__controls {
  display: none;
}

@media (max-width: 767px) {
  .yc-specialties-carousel {
    overflow: hidden;
  }

  .yc-specialties-carousel__viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .yc-specialties-carousel__viewport::-webkit-scrollbar {
    display: none;
  }

  .yc-home-preview
    .yc-specialties-carousel__track {
    display: flex;
    gap: var(--yc-space-4);
    grid-template-columns: none;
    width: max-content;
  }

  .yc-specialties-carousel
    [data-yc-carousel-slide] {
    flex: 0 0 calc(100vw - 48px);
    max-width: calc(100vw - 48px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .yc-specialties-carousel__controls {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: var(--yc-space-5);
  }

  .yc-specialties-carousel__button {
    align-items: center;
    appearance: none;
    background: var(--yc-color-surface);
    border: 1px solid var(--yc-color-border);
    border-radius: 999px;
    color: var(--yc-color-primary);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    height: 44px;
    justify-content: center;
    padding: 0;
    transition:
      border-color var(--yc-transition-base),
      box-shadow var(--yc-transition-base),
      transform var(--yc-transition-base);
    width: 44px;
  }

  .yc-specialties-carousel__button:hover,
  .yc-specialties-carousel__button:focus-visible {
    border-color: var(--yc-color-border-strong);
    box-shadow: var(--yc-shadow-sm);
  }

  .yc-specialties-carousel__button:active {
    transform: translateY(1px);
  }

  .yc-specialties-carousel__counter {
    color: var(--yc-color-text-muted);
    font-size: var(--yc-font-size-sm);
    font-weight: var(--yc-font-weight-semibold);
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yc-specialties-carousel__viewport {
    scroll-behavior: auto;
  }

  .yc-specialties-carousel__button {
    transition: none;
  }
}

/* =========================================================
   Specialties Carousel
   Desktop/tablet: grade normal
   Mobile: carrossel assistido
   ========================================================= */

.yc-specialties-carousel__controls {
  display: none;
}

@media (max-width: 767px) {

  .yc-specialties-carousel {
    --yc-carousel-gap: var(--token-space-4);
  }

  /*
   * A viewport é a única região rolável.
   * Mantemos overflow visível no restante da página.
   */

  .yc-specialties-carousel__viewport {
    margin-inline:
      calc(var(--token-space-5) * -1);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-inline: var(--token-space-5);
    scroll-padding-inline: var(--token-space-5);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .yc-specialties-carousel__viewport::-webkit-scrollbar {
    display: none;
  }

  /*
   * Sobrescreve apenas a grade desta instância.
   */

  .yc-home-preview
  .yc-specialties-carousel__track {
    display: flex;
    gap: var(--yc-carousel-gap);
    grid-template-columns: none;
    width: max-content;
  }

  .yc-home-preview
  .yc-specialties-carousel__slide {
    flex: 0 0 clamp(260px, 78vi, 340px);
    max-width: none;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /*
   * Prévia do próximo card.
   *
   * A largura deixa aproximadamente 15–20% do viewport
   * disponível para sinalizar continuidade.
   */

  .yc-specialties-carousel__controls {
    align-items: center;
    display: flex;
    gap: var(--token-space-4);
    justify-content: center;
    margin-top: var(--token-space-5);
  }

  .yc-specialties-carousel__button {
    align-items: center;
    appearance: none;
    background: var(--token-color-surface);
    border: 1px solid var(--token-color-border-strong);
    border-radius: var(--token-radius-pill);
    color: var(--token-color-primary);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    height: 44px;
    justify-content: center;
    padding: 0;
    transition:
      background var(--token-transition-fast),
      border-color var(--token-transition-fast),
      color var(--token-transition-fast);
    width: 44px;
  }

  .yc-specialties-carousel__button:hover {
    background: var(--token-color-primary-soft);
    border-color: var(--token-color-primary);
  }

  .yc-specialties-carousel__button:focus-visible,
  .yc-specialties-carousel__viewport:focus-visible {
    box-shadow: var(--token-focus-ring);
    outline: none;
  }

  .yc-specialties-carousel__position {
    color: var(--token-color-text-muted);
    font-size: var(--token-font-size-sm);
    font-variant-numeric: tabular-nums;
    margin: 0;
    min-width: 52px;
    text-align: center;
  }

  .yc-specialties-carousel__slide[aria-current="true"] {
    border-color: var(--token-color-primary);
  }
}

@media (prefers-reduced-motion: reduce) {

  .yc-specialties-carousel__viewport {
    scroll-behavior: auto;
  }

  .yc-specialties-carousel__button {
    transition: none;
  }
}

/* =========================================================
   Specialties Carousel — refinamento visual mobile
   HP-024 até HP-028
   ========================================================= */

@media (max-width: 767px) {

  /*
   * Deixa uma faixa real do próximo card visível.
   */

  .yc-home-preview
  .yc-specialties-carousel__slide {
    flex-basis: clamp(250px, 74vi, 300px);
  }

  /*
   * Aproxima os controles do conteúdo.
   */

  .yc-specialties-carousel__controls {
    gap: var(--token-space-3);
    margin-top: var(--token-space-4);
  }

  /*
   * Controles mais fáceis de perceber e tocar.
   */

  .yc-specialties-carousel__button {
    border-color: var(--token-color-primary);
    height: 46px;
    width: 46px;
  }

  .yc-specialties-carousel__button span {
    font-size: 1.125rem;
    line-height: 1;
  }

  /*
   * Indicador explícito.
   */

  .yc-specialties-carousel__position {
    align-items: center;
    background: var(--token-color-primary-soft);
    border-radius: var(--token-radius-pill);
    color: var(--token-color-primary);
    display: inline-flex;
    font-weight: var(--token-font-weight-medium);
    justify-content: center;
    min-height: 36px;
    min-width: 64px;
    padding-inline: var(--token-space-3);
  }

  /*
   * O card atual recebe destaque mínimo,
   * sem criar aparência de seleção clínica.
   */

  .yc-specialties-carousel__slide[aria-current="true"] {
    box-shadow: var(--token-shadow-sm);
  }
}

/* =========================================================
   Preview badge
   Não participa da composição da homepage.
   ========================================================= */

.yc-home-preview::before {
  background: var(--token-color-heading);
  border-radius: var(--token-radius-pill);
  bottom: var(--token-space-4);
  box-shadow: var(--token-shadow-md);
  color: var(--token-color-white);
  content: "PREVIEW — NÃO PUBLICADA";
  display: block;
  font-size: var(--token-font-size-xs);
  font-weight: var(--token-font-weight-semibold);
  left: 50%;
  letter-spacing: 0.04em;
  padding:
    var(--token-space-2)
    var(--token-space-4);
  position: fixed;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 999;
}

/* =========================================================
   Homepage — refinamento desktop/tablet
   HP-017 e HP-018
   ========================================================= */

@media (min-width: 1000px) {

  .yc-home-preview .yc-container {
    width: min(
      calc(100% - (var(--token-space-12) * 2)),
      var(--token-container-xl)
    );
  }

  .yc-home-preview .yc-hero {
    padding-block:
      clamp(
        var(--token-space-16),
        7vw,
        var(--token-space-24)
      );
  }

  .yc-home-preview .yc-hero__grid {
    align-items: center;
    gap: clamp(
      var(--token-space-12),
      7vw,
      var(--token-space-20)
    );
    grid-template-columns:
      minmax(0, 1.12fr)
      minmax(320px, 0.88fr);
  }

  .yc-home-preview .yc-hero__content {
    max-width: 720px;
  }

  .yc-home-preview .yc-hero__title {
    font-size: clamp(
      2.75rem,
      4.25vw,
      4rem
    );
    letter-spacing: -0.025em;
    line-height: 1.06;
  }

  .yc-home-preview .yc-hero__text {
    font-size: var(--token-font-size-md);
    max-width: 62ch;
  }

  .yc-home-preview
  .yc-hero__media
  .yc-home-preview__portrait-placeholder {
    min-height: 500px;
  }
}

@media (min-width: 768px) and (max-width: 999px) {

  .yc-home-preview .yc-hero {
    padding-block:
      var(--token-space-16);
  }

  .yc-home-preview .yc-hero__grid {
    gap: var(--token-space-10);
  }

  .yc-home-preview .yc-hero__title {
    font-size: clamp(
      2.25rem,
      5vw,
      3rem
    );
  }
}

@media (min-width: 768px) {

  .yc-home-preview .yc-section {
    padding-block:
      clamp(
        var(--token-space-16),
        6vw,
        var(--token-space-24)
      );
  }

  .yc-home-preview .yc-section-heading {
    margin-bottom: var(--token-space-10);
  }

  .yc-home-preview .yc-section-heading__text {
    max-width: 68ch;
  }

  .yc-home-preview .yc-grid {
    row-gap: var(--token-space-6);
  }

  .yc-home-preview .yc-faq {
    max-width: 900px;
  }

  .yc-home-preview .yc-cta {
    margin-inline: auto;
    max-width: var(--token-container-lg);
  }
}

/* =========================================================
   Homepage — tablet refinement
   HP-030
   ========================================================= */

@media (min-width: 768px) and (max-width: 999px) {

  .yc-home-preview .yc-container {
    width: min(
      calc(100% - var(--token-space-12)),
      var(--token-container-md)
    );
  }

  .yc-home-preview .yc-hero__grid {
    align-items: center;
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(260px, 0.95fr);
  }

  .yc-home-preview .yc-grid--3 {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .yc-home-preview .yc-grid--2 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .yc-home-preview__professional {
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(260px, 0.95fr);
  }
}

/* =========================================================
   Homepage — fechamento
   HP-020
   ========================================================= */

.yc-home-preview .yc-faq + * {
  scroll-margin-top: var(--token-space-8);
}

@media (min-width: 768px) {

  .yc-home-preview .yc-cta {
    padding:
      var(--token-space-12)
      var(--token-space-16);
  }

  .yc-home-preview .yc-cta__grid {
    align-items: center;
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }

  .yc-home-preview .yc-cta__text {
    max-width: 58ch;
  }
}

/* =========================================================
   Homepage — mídia real
   Hero: Foto 3
   Sobre: Foto 9
   ========================================================= */

.yc-hero__picture,
.yc-professional__picture {
  display: block;
  margin: 0;
  overflow: hidden;
  width: 100%;
}

.yc-hero__picture {
  aspect-ratio: 4 / 5;
  border-radius: var(--token-radius-xl);
}

.yc-hero__picture img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}

.yc-professional__picture {
  aspect-ratio: 3 / 2;
  border-radius: var(--token-radius-xl);
}

.yc-professional__picture img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.yc-hero__media {
  min-height: 0;
}

@media (max-width: 767px) {

  .yc-hero__picture {
    max-width: 480px;
  }

  .yc-professional__picture {
    max-width: 560px;
  }
}

@media (min-width: 1000px) {

  .yc-home-preview .yc-hero__media {
    justify-self: end;
    max-width: 456px;
    width: 100%;
  }

  .yc-home-preview__professional
  .yc-professional__picture {
    justify-self: end;
    max-width: 555px;
    width: 100%;
  }
}

/* =========================================================
   Página Sobre — composição
   ========================================================= */

.yc-about-preview {
  background: var(--token-color-background);
}

.yc-about-hero {
  padding-top: var(--token-space-16);
  padding-bottom: var(--token-space-16);
}

.yc-about-hero__grid {
  align-items: center;
  display: grid;
  gap: var(--token-space-12);
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
}

.yc-about-hero__content {
  max-width: 720px;
}

.yc-about-hero__lead {
  color: var(--token-color-text);
  font-size: var(--token-font-size-lg);
  line-height: 1.7;
  max-width: 62ch;
}

.yc-about-hero__media {
  min-width: 0;
}

.yc-about-hero__picture {
  aspect-ratio: 489 / 286;
  border-radius: var(--token-radius-xl);
  display: block;
  margin: 0;
  overflow: hidden;
  width: 100%;
}

.yc-about-hero__picture img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.yc-about-step {
  position: relative;
}

.yc-about-step__number {
  color: var(--token-color-primary);
  display: block;
  font-size: var(--token-font-size-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: var(--token-space-3);
}

.yc-about-notice-section {
  padding-top: var(--token-space-8);
  padding-bottom: var(--token-space-8);
}

.yc-about-preview .yc-check-list {
  max-width: 760px;
}

.yc-about-preview .yc-cta {
  margin-top: 0;
}

@media (max-width: 999px) {

  .yc-about-hero__grid {
    gap: var(--token-space-8);
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.78fr);
  }

  .yc-about-hero__lead {
    font-size: var(--token-font-size-md);
  }
}

@media (max-width: 767px) {

  .yc-about-hero {
    padding-top: var(--token-space-10);
    padding-bottom: var(--token-space-10);
  }

  .yc-about-hero__grid {
    gap: var(--token-space-8);
    grid-template-columns: minmax(0, 1fr);
  }

  .yc-about-hero__content {
    max-width: none;
  }

  .yc-about-hero__media {
    margin-top: var(--token-space-2);
  }

  .yc-about-hero__picture {
    border-radius: var(--token-radius-lg);
  }
}

/* Página Sobre — contraste do CTA */

.yc-about-preview .yc-cta,
.yc-about-preview .yc-cta h2,
.yc-about-preview .yc-cta p {
  color: var(--token-color-white);
}

.yc-about-preview .yc-cta .yc-button--primary {
  background: var(--token-color-white);
  border-color: var(--token-color-white);
  color: var(--token-color-primary);
}

.yc-about-preview .yc-cta .yc-button--primary:hover,
.yc-about-preview .yc-cta .yc-button--primary:focus-visible {
  background: var(--token-color-primary-soft);
  border-color: var(--token-color-primary-soft);
  color: var(--token-color-primary);
}

.yc-about-preview .yc-cta .yc-button--outline {
  background: transparent;
  border-color: var(--token-color-white);
  color: var(--token-color-white);
}

.yc-about-preview .yc-cta .yc-button--outline:hover,
.yc-about-preview .yc-cta .yc-button--outline:focus-visible {
  background: var(--token-color-white);
  border-color: var(--token-color-white);
  color: var(--token-color-primary);
}

/* =========================================================
   Página Atendimento — composição
   ========================================================= */

.yc-attendance-preview {
  background: var(--token-color-background);
}

.yc-attendance-hero {
  padding-top: var(--token-space-16);
  padding-bottom: var(--token-space-16);
}

.yc-attendance-hero__content {
  max-width: 850px;
}

.yc-attendance-hero__lead {
  color: var(--token-color-text);
  font-size: var(--token-font-size-lg);
  line-height: 1.7;
  max-width: 68ch;
}

.yc-attendance-reasons__notice {
  margin-top: var(--token-space-8);
}

.yc-attendance-step__number {
  color: var(--token-color-primary);
  display: block;
  font-size: var(--token-font-size-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: var(--token-space-3);
}

.yc-attendance-preparation {
  max-width: 820px;
}

.yc-attendance-limits {
  max-width: none;
}

.yc-attendance-limits .yc-eyebrow {
  margin-bottom: var(--token-space-3);
}

.yc-attendance-limits h2 {
  margin-top: 0;
}

.yc-attendance-cta,
.yc-attendance-cta h2,
.yc-attendance-cta p {
  color: var(--token-color-white);
}

.yc-attendance-cta .yc-button--primary {
  background: var(--token-color-white);
  border-color: var(--token-color-white);
  color: var(--token-color-primary);
}

.yc-attendance-cta .yc-button--outline {
  background: transparent;
  border-color: var(--token-color-white);
  color: var(--token-color-white);
}

.yc-attendance-cta .yc-button--outline:hover,
.yc-attendance-cta .yc-button--outline:focus-visible {
  background: var(--token-color-white);
  color: var(--token-color-primary);
}

@media (max-width: 767px) {

  .yc-attendance-hero {
    padding-top: var(--token-space-10);
    padding-bottom: var(--token-space-10);
  }

  .yc-attendance-hero__lead {
    font-size: var(--token-font-size-md);
  }
}

/* Atendimento — refinamento final */

.yc-attendance-limits {
  background: var(--token-color-primary-soft);
  border-left: 3px solid var(--token-color-primary);
  border-radius: var(--token-radius-lg);
  padding: var(--token-space-8);
}

.yc-attendance-limits h2 {
  color: var(--token-color-heading);
}

.yc-attendance-limits p:last-child {
  margin-bottom: 0;
}

.yc-attendance-cta,
.yc-attendance-cta h2,
.yc-attendance-cta p {
  color: var(--token-color-white);
}

.yc-attendance-cta .yc-button--primary {
  background: var(--token-color-white);
  border-color: var(--token-color-white);
  color: var(--token-color-primary);
}

.yc-attendance-cta .yc-button--primary:hover,
.yc-attendance-cta .yc-button--primary:focus-visible {
  background: var(--token-color-primary-soft);
  border-color: var(--token-color-primary-soft);
  color: var(--token-color-primary);
}

.yc-attendance-cta .yc-button--outline {
  background: transparent;
  border-color: var(--token-color-white);
  color: var(--token-color-white);
}

.yc-attendance-cta .yc-button--outline:hover,
.yc-attendance-cta .yc-button--outline:focus-visible {
  background: var(--token-color-white);
  border-color: var(--token-color-white);
  color: var(--token-color-primary);
}

@media (min-width: 1000px) {

  .yc-attendance-preview > .yc-section {
    padding-top: var(--token-space-14);
    padding-bottom: var(--token-space-14);
  }

  .yc-attendance-preview > .yc-section:first-child {
    padding-top: var(--token-space-16);
    padding-bottom: var(--token-space-16);
  }
}

@media (max-width: 767px) {

  .yc-attendance-limits {
    padding: var(--token-space-6);
  }
}

/* =========================================================
   Página Teleconsulta — composição
   ========================================================= */

.yc-teleconsultation-preview {
  background: var(--token-color-background);
}

.yc-teleconsultation-hero {
  padding-top: var(--token-space-16);
  padding-bottom: var(--token-space-16);
}

.yc-teleconsultation-hero__content {
  max-width: 880px;
}

.yc-teleconsultation-hero__lead {
  color: var(--token-color-text);
  font-size: var(--token-font-size-lg);
  line-height: 1.7;
  max-width: 68ch;
}

.yc-teleconsultation-suitability__notice {
  margin-top: var(--token-space-8);
}

.yc-teleconsultation-requirements {
  max-width: 820px;
}

.yc-teleconsultation-step__number {
  color: var(--token-color-primary);
  display: block;
  font-size: var(--token-font-size-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: var(--token-space-3);
}

.yc-teleconsultation-limitations {
  max-width: 900px;
}

.yc-teleconsultation-limitations p:last-child {
  margin-bottom: 0;
}

.yc-teleconsultation-emergency-section {
  padding-top: var(--token-space-4);
}

.yc-teleconsultation-emergency {
  background: var(--token-color-primary-soft);
  border-left: 3px solid var(--token-color-primary);
  border-radius: var(--token-radius-lg);
  padding: var(--token-space-8);
}

.yc-teleconsultation-emergency h2 {
  color: var(--token-color-heading);
  margin-top: 0;
}

.yc-teleconsultation-emergency p:last-child {
  margin-bottom: 0;
}

.yc-teleconsultation-cta,
.yc-teleconsultation-cta h2,
.yc-teleconsultation-cta p {
  color: var(--token-color-white);
}

.yc-teleconsultation-cta .yc-button--primary {
  background: var(--token-color-white);
  border-color: var(--token-color-white);
  color: var(--token-color-primary);
}

.yc-teleconsultation-cta .yc-button--outline {
  background: transparent;
  border-color: var(--token-color-white);
  color: var(--token-color-white);
}

.yc-teleconsultation-cta .yc-button--outline:hover,
.yc-teleconsultation-cta .yc-button--outline:focus-visible {
  background: var(--token-color-white);
  color: var(--token-color-primary);
}

@media (max-width: 767px) {

  .yc-teleconsultation-hero {
    padding-top: var(--token-space-10);
    padding-bottom: var(--token-space-10);
  }

  .yc-teleconsultation-hero__lead {
    font-size: var(--token-font-size-md);
  }

  .yc-teleconsultation-emergency {
    padding: var(--token-space-6);
  }
}

/* =========================================================
   Teleconsulta — refinamento final antes da promoção
   ========================================================= */

/*
 * Aviso de emergência
 *
 * Deve ser claramente percebido como informação clínica
 * importante sem assumir aparência alarmista.
 */
.yc-teleconsultation-preview
.yc-teleconsultation-emergency {
  background:
    linear-gradient(
      135deg,
      var(--token-color-primary-soft) 0%,
      var(--token-color-surface) 100%
    );
  border:
    1px solid
    var(--token-color-primary);
  border-left-width: 5px;
  border-radius: var(--token-radius-lg);
  box-shadow:
    0 8px 24px
    rgb(23 32 51 / 7%);
  padding: var(--token-space-8);
  position: relative;
}

.yc-teleconsultation-preview
.yc-teleconsultation-emergency
.yc-eyebrow {
  color: var(--token-color-primary);
  font-weight: 700;
}

.yc-teleconsultation-preview
.yc-teleconsultation-emergency
h2 {
  color: var(--token-color-heading);
  margin-bottom: var(--token-space-4);
  max-width: 34ch;
}

.yc-teleconsultation-preview
.yc-teleconsultation-emergency
p:last-child {
  color: var(--token-color-text);
  margin-bottom: 0;
  max-width: 78ch;
}


/*
 * CTA final
 *
 * O botão primário utiliza superfície branca.
 * O secundário permanece transparente com contraste branco.
 *
 * A especificidade deste escopo impede que regras genéricas
 * de .yc-button sobrescrevam o contraste desta composição.
 */
.yc-teleconsultation-preview
.yc-teleconsultation-cta
.yc-button--primary {
  background: var(--token-color-white);
  border:
    1px solid
    var(--token-color-white);
  color: var(--token-color-primary);
}

.yc-teleconsultation-preview
.yc-teleconsultation-cta
.yc-button--primary:hover,
.yc-teleconsultation-preview
.yc-teleconsultation-cta
.yc-button--primary:focus-visible {
  background: var(--token-color-primary-soft);
  border-color: var(--token-color-primary-soft);
  color: var(--token-color-primary);
}

.yc-teleconsultation-preview
.yc-teleconsultation-cta
.yc-button--outline {
  background: transparent;
  border:
    1px solid
    var(--token-color-white);
  color: var(--token-color-white);
}

.yc-teleconsultation-preview
.yc-teleconsultation-cta
.yc-button--outline:hover,
.yc-teleconsultation-preview
.yc-teleconsultation-cta
.yc-button--outline:focus-visible {
  background: var(--token-color-white);
  border-color: var(--token-color-white);
  color: var(--token-color-primary);
}

.yc-teleconsultation-preview
.yc-teleconsultation-cta
.yc-button--primary:focus-visible,
.yc-teleconsultation-preview
.yc-teleconsultation-cta
.yc-button--outline:focus-visible {
  outline:
    3px solid
    var(--token-color-accent-soft);
  outline-offset: 3px;
}


/*
 * Mobile
 */
@media (max-width: 767px) {

  .yc-teleconsultation-preview
  .yc-teleconsultation-emergency {
    border-left-width: 4px;
    padding: var(--token-space-6);
  }

  .yc-teleconsultation-preview
  .yc-teleconsultation-cta
  .yc-hero__actions {
    align-items: stretch;
  }

  .yc-teleconsultation-preview
  .yc-teleconsultation-cta
  .yc-button {
    justify-content: center;
    text-align: center;
  }
}

/* =========================================================
   Consultório — composição
   ========================================================= */

.yc-office-preview {
  background: var(--token-color-background);
}

.yc-office-hero {
  padding-top: var(--token-space-16);
  padding-bottom: var(--token-space-16);
}

.yc-office-hero__grid {
  align-items: center;
  display: grid;
  gap: var(--token-space-12);
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(300px, 0.9fr);
}

.yc-office-hero__content {
  max-width: 720px;
}

.yc-office-hero__lead {
  color: var(--token-color-text);
  font-size: var(--token-font-size-lg);
  line-height: 1.7;
  max-width: 62ch;
}

.yc-office-hero__media {
  border-radius: var(--token-radius-xl);
  display: block;
  overflow: hidden;
  width: 100%;
}

.yc-office-hero__media img {
  aspect-ratio: 491 / 304;
  display: block;
  height: auto;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.yc-office-step__number {
  color: var(--token-color-primary);
  display: block;
  font-size: var(--token-font-size-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: var(--token-space-3);
}

.yc-office-practical__list {
  margin-top: var(--token-space-8);
  max-width: 820px;
}

.yc-office-notice-section {
  padding-top: var(--token-space-8);
  padding-bottom: var(--token-space-8);
}

.yc-office-emergency {
  background:
    linear-gradient(
      135deg,
      var(--token-color-primary-soft) 0%,
      var(--token-color-surface) 100%
    );
  border:
    1px solid
    var(--token-color-primary);
  border-left-width: 5px;
  border-radius: var(--token-radius-lg);
  box-shadow:
    0 8px 24px
    rgb(23 32 51 / 7%);
  padding: var(--token-space-8);
}

.yc-office-emergency h2 {
  max-width: 38ch;
}

.yc-office-cta .yc-button--primary {
  background: var(--token-color-white);
  border: 1px solid var(--token-color-white);
  color: var(--token-color-primary);
}

.yc-office-cta .yc-button--outline {
  background: transparent;
  border: 1px solid var(--token-color-white);
  color: var(--token-color-white);
}

.yc-office-cta .yc-button--primary:hover,
.yc-office-cta .yc-button--primary:focus-visible {
  background: var(--token-color-primary-soft);
  border-color: var(--token-color-primary-soft);
  color: var(--token-color-primary);
}

.yc-office-cta .yc-button--outline:hover,
.yc-office-cta .yc-button--outline:focus-visible {
  background: var(--token-color-white);
  border-color: var(--token-color-white);
  color: var(--token-color-primary);
}

@media (max-width: 999px) {

  .yc-office-hero__grid {
    gap: var(--token-space-8);
    grid-template-columns:
      minmax(0, 1fr)
      minmax(230px, 0.72fr);
  }

}

@media (max-width: 767px) {

  .yc-office-hero {
    padding-top: var(--token-space-10);
    padding-bottom: var(--token-space-10);
  }

  .yc-office-hero__grid {
    grid-template-columns: 1fr;
  }

  .yc-office-hero__lead {
    font-size: var(--token-font-size-md);
  }

  .yc-office-hero__media {
    border-radius: var(--token-radius-lg);
  }

  .yc-office-emergency {
    border-left-width: 4px;
    padding: var(--token-space-6);
  }

  .yc-office-cta .yc-hero__actions {
    align-items: stretch;
  }

  .yc-office-cta .yc-button {
    justify-content: center;
    text-align: center;
  }

}

/* =========================================================
   Consultório — refinamento visual final
   ========================================================= */

/*
 * CTA final
 *
 * Garante contraste previsível sobre o fundo institucional,
 * independentemente das regras globais de headings e parágrafos.
 */
.yc-office-preview .yc-office-cta,
.yc-office-preview .yc-office-cta h2,
.yc-office-preview .yc-office-cta p {
  color: var(--token-color-white);
}

.yc-office-preview .yc-office-cta h2 {
  max-width: 24ch;
}

.yc-office-preview .yc-office-cta p {
  max-width: 52ch;
  opacity: 0.92;
}


/*
 * Informações práticas
 *
 * Mantém a lista simples, mas cria uma superfície editorial
 * coerente com os demais componentes da página.
 */
.yc-office-preview .yc-office-practical__list {
  background: var(--token-color-surface);
  border:
    1px solid
    var(--token-color-border);
  border-radius: var(--token-radius-lg);
  padding:
    var(--token-space-6)
    var(--token-space-7);
}

.yc-office-preview .yc-office-practical__list li {
  line-height: 1.65;
}

.yc-office-preview .yc-office-practical__list li + li {
  margin-top: var(--token-space-3);
}


/*
 * FAQ
 *
 * Aumenta a área interativa e torna o conjunto mais facilmente
 * escaneável em desktop, tablet e celular.
 */
.yc-office-preview .yc-faq {
  border-top:
    1px solid
    var(--token-color-border);
}

.yc-office-preview .yc-faq__item {
  border-bottom:
    1px solid
    var(--token-color-border);
}

.yc-office-preview .yc-faq__item summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 600;
  justify-content: space-between;
  line-height: 1.45;
  min-height: 48px;
  padding:
    var(--token-space-4)
    0;
}

.yc-office-preview .yc-faq__answer {
  max-width: 72ch;
  padding-bottom: var(--token-space-5);
}

.yc-office-preview .yc-faq__answer p {
  margin-bottom: 0;
}


/*
 * Ajustes responsivos finais
 */
@media (max-width: 767px) {

  .yc-office-preview .yc-office-practical__list {
    padding:
      var(--token-space-5)
      var(--token-space-5);
  }

  .yc-office-preview .yc-faq__item summary {
    min-height: 52px;
    padding:
      var(--token-space-4)
      0;
  }

  .yc-office-preview .yc-office-cta h2 {
    max-width: 18ch;
  }

}

/* =========================================================
   Página Contato — composição
   ========================================================= */

.yc-contact-preview {
  background: var(--token-color-background);
}

.yc-contact-hero {
  padding-top: var(--token-space-16);
  padding-bottom: var(--token-space-16);
}

.yc-contact-hero__content {
  max-width: 820px;
}

.yc-contact-hero__lead {
  color: var(--token-color-text);
  font-size: var(--token-font-size-lg);
  line-height: 1.7;
  max-width: 66ch;
}

.yc-contact-email .yc-section-heading {
  margin-bottom: var(--token-space-6);
}

.yc-contact-email__action {
  margin-top: var(--token-space-6);
}

.yc-contact-step {
  position: relative;
}

.yc-contact-step__number {
  color: var(--token-color-primary);
  display: block;
  font-size: var(--token-font-size-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: var(--token-space-3);
}

.yc-contact-emergency-section {
  padding-top: var(--token-space-8);
  padding-bottom: var(--token-space-8);
}

.yc-contact-emergency {
  border-left: 3px solid var(--token-color-primary);
}

.yc-contact-emergency h2 {
  margin-top: var(--token-space-2);
}

.yc-contact-preview .yc-check-list {
  max-width: 780px;
}

.yc-contact-preview .yc-cta {
  margin-top: 0;
}

.yc-contact-preview .yc-cta__actions {
  align-items: center;
}

/*
 * O CTA final possui dois caminhos de mesma importância operacional.
 * O botão secundário precisa manter contraste sobre o fundo escuro.
 */
.yc-contact-preview .yc-cta .yc-button--outline {
  border-color: var(--token-color-white);
  color: var(--token-color-white);
}

.yc-contact-preview .yc-cta .yc-button--outline:hover,
.yc-contact-preview .yc-cta .yc-button--outline:focus-visible {
  background: var(--token-color-white);
  color: var(--token-color-primary);
}

@media (max-width: 767px) {

  .yc-contact-hero {
    padding-top: var(--token-space-10);
    padding-bottom: var(--token-space-10);
  }

  .yc-contact-hero__lead {
    font-size: var(--token-font-size-md);
  }

  .yc-contact-preview .yc-cta__actions {
    align-items: stretch;
  }

  .yc-contact-preview .yc-cta__actions .yc-button {
    justify-content: center;
    width: 100%;
  }
}

/* =========================================================
   Contato Preview — refinamento final
   ========================================================= */

/*
 * O aviso de emergência deve ser percebido como informação
 * operacional importante sem assumir aparência alarmista.
 */
.yc-contact-preview .yc-contact-emergency {
  background: var(--token-color-surface);
  border: 1px solid var(--token-color-border);
  border-left: 4px solid var(--token-color-primary);
  border-radius: var(--token-radius-lg);
  padding: var(--token-space-6);
}

.yc-contact-preview .yc-contact-emergency .yc-eyebrow {
  margin-bottom: var(--token-space-2);
}

.yc-contact-preview .yc-contact-emergency h2 {
  margin-bottom: var(--token-space-3);
  margin-top: 0;
}

/*
 * Contraste consistente para as duas ações sobre o CTA escuro.
 */
.yc-contact-preview .yc-cta .yc-button--outline {
  background: transparent;
  border: 1px solid var(--token-color-white);
  color: var(--token-color-white);
}

.yc-contact-preview .yc-cta .yc-button--outline:hover,
.yc-contact-preview .yc-cta .yc-button--outline:focus-visible {
  background: var(--token-color-white);
  border-color: var(--token-color-white);
  color: var(--token-color-primary);
}

@media (max-width: 767px) {

  .yc-contact-preview .yc-contact-emergency {
    padding: var(--token-space-5);
  }
}

/* =========================================================
   Agendamento Preview — implementação final
   ========================================================= */

.yc-appointment-preview,
.yc-appointment-preview *,
.yc-appointment-preview *::before,
.yc-appointment-preview *::after {
  box-sizing: border-box;
}

.yc-appointment-preview {
  background: #f7f9fa;
  color: #172033;
}

.yc-appointment-preview [hidden] {
  display: none !important;
}

.yc-appointment-preview .yc-container {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1180px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: min(100% - 48px, 1180px) !important;
}


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

.yc-appointment-preview .yc-appointment-hero {
  background: #ffffff;
  padding-bottom: 56px;
  padding-top: 56px;
}

.yc-appointment-preview
.yc-appointment-hero__content {
  max-width: 720px;
}

.yc-appointment-preview
.yc-appointment-hero h1 {
  font-size: clamp(
    2rem,
    4vw,
    3rem
  );
  line-height: 1.12;
  margin:
    10px
    0
    20px;
}

.yc-appointment-preview
.yc-appointment-hero__lead {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 26px;
  max-width: 680px;
}


/* =========================================================
   ÁREA DE AGENDAMENTO
   ========================================================= */

.yc-appointment-preview
.yc-appointment-booking {
  background: #ffffff;
  padding:
    44px
    0
    64px;
}

.yc-appointment-preview
.yc-appointment-modality {
  display: block !important;
  margin:
    0
    0
    48px !important;
  padding: 0 !important;
  width: 100% !important;
}

.yc-appointment-preview
.yc-appointment-modality h2 {
  display: block !important;
  font-size: clamp(
    1.5rem,
    3vw,
    2rem
  );
  line-height: 1.2;
  margin:
    8px
    0
    24px !important;
  max-width: 700px;
}


/* =========================================================
   MODALIDADE — REGRA PRINCIPAL
   ========================================================= */

.yc-appointment-preview
.yc-appointment-modality__buttons {
  align-items: stretch !important;
  clear: both !important;
  display: grid !important;
  float: none !important;
  gap: 12px !important;
  grid-auto-flow: row !important;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;
  justify-content: stretch !important;
  margin: 0 !important;
  max-width: 720px !important;
  padding: 0 !important;
  position: static !important;
  width: 100% !important;
}

.yc-appointment-preview
.yc-appointment-modality__buttons
> button {
  align-self: stretch !important;
  clear: none !important;
  float: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  inset: auto !important;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
}

.yc-appointment-preview
button.yc-appointment-modality-button {
  align-items: center !important;
  appearance: none !important;
  background: #ffffff !important;
  border:
    1px solid
    #bfd0d6 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #172033 !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  font: inherit !important;
  height: auto !important;
  justify-content: center !important;
  min-height: 104px !important;
  padding:
    18px
    12px !important;
  text-align: center !important;
}

.yc-appointment-preview
button.yc-appointment-modality-button:hover {
  border-color: #176176 !important;
}

.yc-appointment-preview
button.yc-appointment-modality-button[
  aria-pressed="true"
] {
  background:
    linear-gradient(
      135deg,
      #176176,
      #087e79
    ) !important;
  border-color: #176176 !important;
  color: #ffffff !important;
}

.yc-appointment-preview
.yc-appointment-modality-button__title {
  color: inherit !important;
  display: block !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.yc-appointment-preview
.yc-appointment-modality-button__subtitle {
  color: inherit !important;
  display: block !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  margin:
    7px
    0
    0 !important;
  opacity: 0.82;
  padding: 0 !important;
  width: auto !important;
}


/* =========================================================
   CALENDÁRIO
   ========================================================= */

.yc-appointment-preview
.yc-appointment-calendar-stage {
  border-top:
    1px solid
    #e2e8eb;
  padding-top: 44px;
}

.yc-appointment-preview
.yc-appointment-calendar-layout {
  align-items: start !important;
  display: grid !important;
  gap: 28px !important;
  grid-template-columns:
    minmax(0, 1fr)
    300px !important;
  margin-top: 28px;
  width: 100% !important;
}

.yc-appointment-preview
.yc-appointment-calendar-panel {
  background: #ffffff;
  border:
    1px solid
    #e0e7ea;
  border-radius: 14px;
  box-shadow:
    0 6px 24px
    rgba(
      23,
      32,
      51,
      0.05
    );
  min-width: 0;
  padding: 24px;
  width: 100%;
}

.yc-appointment-preview
.yc-appointment-calendar__header {
  align-items: center !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns:
    44px
    minmax(0, 1fr)
    44px !important;
  margin-bottom: 20px;
}

.yc-appointment-preview
.yc-appointment-calendar__month {
  color: #172033;
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

.yc-appointment-preview
button.yc-appointment-calendar__nav {
  align-items: center !important;
  appearance: none !important;
  background: #ffffff !important;
  border:
    1px solid
    #d1dce1 !important;
  border-radius: 9px !important;
  color: #425466 !important;
  cursor: pointer !important;
  display: flex !important;
  float: none !important;
  font-size: 1.6rem !important;
  height: 42px !important;
  justify-content: center !important;
  margin: 0 !important;
  min-height: 42px !important;
  padding: 0 !important;
  position: static !important;
  width: 42px !important;
}

.yc-appointment-preview
.yc-appointment-calendar__weekdays {
  display: grid !important;
  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    ) !important;
  margin-bottom: 7px;
  width: 100%;
}

.yc-appointment-preview
.yc-appointment-calendar__weekdays
span {
  color: #52616d;
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 7px 0;
  text-align: center;
}

.yc-appointment-preview
.yc-appointment-calendar {
  border-left:
    1px solid
    #e3e8eb;
  border-top:
    1px solid
    #e3e8eb;
  display: grid !important;
  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    ) !important;
  overflow: hidden;
  width: 100% !important;
}

.yc-appointment-preview
.yc-appointment-calendar-day {
  align-items: center !important;
  border: 0 !important;
  border-bottom:
    1px solid
    #e3e8eb !important;
  border-radius: 0 !important;
  border-right:
    1px solid
    #e3e8eb !important;
  box-shadow: none !important;
  display: flex !important;
  float: none !important;
  font: inherit !important;
  height: auto !important;
  justify-content: center !important;
  margin: 0 !important;
  min-height: 66px !important;
  min-width: 0 !important;
  padding: 4px !important;
  position: static !important;
  text-align: center !important;
  transform: none !important;
  width: auto !important;
}

.yc-appointment-preview
.yc-appointment-calendar-day
> span {
  align-items: center;
  border-radius: 999px;
  display: flex;
  font-size: 0.88rem;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.yc-appointment-preview
.yc-appointment-calendar-day--outside {
  background:
    #fafbfc !important;
  color:
    #b2bbc1 !important;
}

.yc-appointment-preview
.yc-appointment-calendar-day--sunday {
  background:
    #eef1f3 !important;
  color:
    #89939a !important;
}

.yc-appointment-preview
.yc-appointment-calendar-day--unavailable {
  background:
    #fff1f0 !important;
  color:
    #c43228 !important;
}

.yc-appointment-preview
button.yc-appointment-calendar-day--available {
  background:
    #eaf8ef !important;
  color:
    #087a3e !important;
  cursor: pointer !important;
}

.yc-appointment-preview
button.yc-appointment-calendar-day--available:hover {
  background:
    #d8f2e2 !important;
}

.yc-appointment-preview
button.yc-appointment-calendar-day[
  aria-pressed="true"
] {
  background:
    #cef0db !important;
  box-shadow:
    inset
    0
    0
    0
    2px
    #087e79 !important;
}

.yc-appointment-preview
button.yc-appointment-calendar-day[
  aria-pressed="true"
]
> span {
  background: #087e79;
  color: #ffffff;
}


/* =========================================================
   LEGENDA
   ========================================================= */

.yc-appointment-preview
.yc-appointment-calendar__legend {
  align-items: center;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  margin-top: 18px;
}

.yc-appointment-preview
.yc-appointment-calendar__legend
span {
  align-items: center;
  color: #52616d;
  display: inline-flex;
  font-size: 0.78rem;
  gap: 7px;
}

.yc-appointment-preview
.yc-calendar-legend {
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  min-width: 10px;
  width: 10px;
}

.yc-appointment-preview
.yc-calendar-legend--sunday {
  background: #aab3b9;
}

.yc-appointment-preview
.yc-calendar-legend--unavailable {
  background: #d84b43;
}

.yc-appointment-preview
.yc-calendar-legend--available {
  background: #15924a;
}


/* =========================================================
   HORÁRIOS
   ========================================================= */

.yc-appointment-preview
.yc-appointment-slots-panel {
  background: #ffffff;
  border:
    1px solid
    #dce5e8;
  border-radius: 14px;
  box-shadow:
    0 6px 24px
    rgba(
      23,
      32,
      51,
      0.05
    );
  padding: 22px;
  position: sticky;
  top: 110px;
}

.yc-appointment-preview
.yc-appointment-slots-panel__date {
  color: #087e79;
  font-size: 0.86rem;
  font-weight: 700;
}

.yc-appointment-preview
.yc-appointment-slots {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;
  margin-top: 18px;
}

.yc-appointment-preview
button.yc-appointment-slot {
  appearance: none !important;
  background: #ffffff !important;
  border:
    1px solid
    #cbd8dd !important;
  border-radius: 8px !important;
  color: #172033 !important;
  cursor: pointer;
  float: none !important;
  font: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  height: 46px !important;
  margin: 0 !important;
  min-height: 46px !important;
  padding: 8px !important;
  position: static !important;
  width: 100% !important;
}

.yc-appointment-preview
button.yc-appointment-slot[
  aria-pressed="true"
] {
  background:
    #087e79 !important;
  border-color:
    #087e79 !important;
  color:
    #ffffff !important;
}


/* =========================================================
   FORMULÁRIO
   ========================================================= */

.yc-appointment-preview
.yc-appointment-patient-stage {
  border-top:
    1px solid
    #e2e8eb;
  margin-top: 52px;
  padding-top: 44px;
}

.yc-appointment-preview
.yc-appointment-form {
  background: #ffffff !important;
  border:
    1px solid
    #dce5e8 !important;
  border-radius: 14px !important;
  box-shadow:
    0 6px 24px
    rgba(
      23,
      32,
      51,
      0.05
    );
  display: grid !important;
  gap: 18px !important;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;
  margin-top: 24px !important;
  padding: 26px !important;
}

.yc-appointment-preview
.yc-appointment-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
  min-width: 0;
}

.yc-appointment-preview
.yc-appointment-field:first-child {
  grid-column: 1 / -1;
}

.yc-appointment-preview
.yc-appointment-field label {
  color: #172033;
  font-size: 0.88rem;
  font-weight: 700;
}

.yc-appointment-preview
.yc-appointment-field input {
  appearance: none !important;
  background: #ffffff !important;
  border:
    1px solid
    #cbd8dd !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #172033 !important;
  float: none !important;
  font: inherit !important;
  height: 48px !important;
  margin: 0 !important;
  min-height: 48px !important;
  padding:
    10px
    13px !important;
  position: static !important;
  width: 100% !important;
}

.yc-appointment-preview
.yc-appointment-field input:focus {
  border-color:
    #087e79 !important;
  box-shadow:
    0
    0
    0
    3px
    rgba(
      8,
      126,
      121,
      0.13
    ) !important;
  outline: 0 !important;
}

.yc-appointment-preview
.yc-appointment-field
input[aria-invalid="true"] {
  border-color:
    #c43228 !important;
}

.yc-appointment-preview
.yc-appointment-form__summary {
  background: #f4f7f8;
  border-radius: 10px;
  display: grid !important;
  gap: 1px;
  grid-column: 1 / -1;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;
  overflow: hidden;
}

.yc-appointment-preview
.yc-appointment-form__summary
div {
  background: #f4f7f8;
  padding: 15px;
}

.yc-appointment-preview
.yc-appointment-form__summary
span {
  color: #6b7780;
  display: block;
  font-size: 0.72rem;
  margin-bottom: 4px;
}

.yc-appointment-preview
.yc-appointment-form__summary
strong {
  color: #172033;
  display: block;
  font-size: 0.88rem;
}

.yc-appointment-preview
.yc-appointment-form__privacy {
  background: #eef9f2;
  border:
    1px solid
    #d3ebdc;
  border-radius: 10px;
  grid-column: 1 / -1;
  padding: 17px;
}

.yc-appointment-preview
.yc-appointment-form__privacy
strong {
  color: #14733c;
  display: block;
  margin-bottom: 5px;
}

.yc-appointment-preview
button.yc-appointment-submit {
  appearance: none !important;
  background:
    #176176 !important;
  border:
    1px solid
    #176176 !important;
  border-radius:
    8px !important;
  color:
    #ffffff !important;
  float: none !important;
  grid-column: 1 / -1;
  justify-self: stretch !important;
  margin: 0 !important;
  min-height: 50px !important;
  padding:
    12px
    22px !important;
  position: static !important;
  width: 100% !important;
}

.yc-appointment-preview
button.yc-appointment-submit:disabled {
  background:
    #a3c2c7 !important;
  border-color:
    #a3c2c7 !important;
  color:
    rgba(
      255,
      255,
      255,
      0.9
    ) !important;
  cursor:
    not-allowed !important;
  opacity: 1 !important;
}


/* =========================================================
   AVISO DE EMERGÊNCIA
   ========================================================= */

.yc-appointment-preview
.yc-appointment-emergency-section {
  background: #ffffff;
  padding:
    28px
    0
    64px;
}

.yc-appointment-preview
.yc-appointment-emergency {
  background:
    #edf8fa !important;
  border:
    1px solid
    #b9dce0 !important;
  border-left:
    5px solid
    #176176 !important;
  border-radius:
    12px !important;
  box-shadow:
    none !important;
  padding:
    24px !important;
}


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

@media (max-width: 999px) {

  .yc-appointment-preview
  .yc-appointment-calendar-layout {
    grid-template-columns:
      1fr !important;
  }

  .yc-appointment-preview
  .yc-appointment-slots-panel {
    position: static !important;
  }

  .yc-appointment-preview
  .yc-appointment-slots {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      ) !important;
  }
}


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

@media (max-width: 767px) {

  .yc-appointment-preview
  .yc-container {
    width:
      calc(
        100% - 32px
      ) !important;
  }

  .yc-appointment-preview
  .yc-appointment-hero {
    padding:
      38px
      0
      34px;
  }

  .yc-appointment-preview
  .yc-appointment-booking {
    padding:
      34px
      0
      46px;
  }

  /*
   * Requisito obrigatório:
   * dois botões, lado a lado.
   */
  .yc-appointment-preview
  .yc-appointment-modality__buttons {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
    max-width: none !important;
    width: 100% !important;
  }

  .yc-appointment-preview
  button.yc-appointment-modality-button {
    align-items:
      center !important;
    justify-content:
      center !important;
    min-height:
      104px !important;
    padding:
      14px
      8px !important;
    text-align:
      center !important;
  }

  .yc-appointment-preview
  .yc-appointment-modality-button__title {
    font-size:
      0.86rem !important;
  }

  .yc-appointment-preview
  .yc-appointment-modality-button__subtitle {
    font-size:
      0.68rem !important;
    line-height:
      1.35 !important;
  }

  .yc-appointment-preview
  .yc-appointment-calendar-stage {
    padding-top: 34px;
  }

  .yc-appointment-preview
  .yc-appointment-calendar-panel {
    border-radius: 12px;
    padding:
      14px
      10px;
  }

  .yc-appointment-preview
  .yc-appointment-calendar__header {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      38px !important;
  }

  .yc-appointment-preview
  button.yc-appointment-calendar__nav {
    height:
      36px !important;
    min-height:
      36px !important;
    width:
      36px !important;
  }

  .yc-appointment-preview
  .yc-appointment-calendar__month {
    font-size: 1rem;
  }

  .yc-appointment-preview
  .yc-appointment-calendar__weekdays
  span {
    font-size: 0.61rem;
  }

  .yc-appointment-preview
  .yc-appointment-calendar-day {
    min-height:
      45px !important;
    padding:
      2px !important;
  }

  .yc-appointment-preview
  .yc-appointment-calendar-day
  > span {
    font-size: 0.72rem;
    height: 27px;
    width: 27px;
  }

  .yc-appointment-preview
  .yc-appointment-calendar__legend {
    align-items:
      flex-start;
    flex-direction:
      column;
    gap: 7px !important;
  }

  .yc-appointment-preview
  .yc-appointment-slots-panel {
    padding: 18px;
  }

  .yc-appointment-preview
  .yc-appointment-slots {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      ) !important;
  }

  .yc-appointment-preview
  .yc-appointment-form {
    grid-template-columns:
      1fr !important;
    padding:
      18px !important;
  }

  .yc-appointment-preview
  .yc-appointment-field:first-child,
  .yc-appointment-preview
  .yc-appointment-form__summary,
  .yc-appointment-preview
  .yc-appointment-form__privacy,
  .yc-appointment-preview
  button.yc-appointment-submit {
    grid-column:
      auto !important;
  }

  .yc-appointment-preview
  .yc-appointment-form__summary {
    grid-template-columns:
      1fr !important;
  }
}


/* =========================================================
   MOBILE MUITO ESTREITO
   ========================================================= */

@media (max-width: 390px) {

  .yc-appointment-preview
  .yc-container {
    width:
      calc(
        100% - 24px
      ) !important;
  }

  .yc-appointment-preview
  button.yc-appointment-modality-button {
    min-height:
      96px !important;
    padding:
      12px
      5px !important;
  }

  .yc-appointment-preview
  .yc-appointment-modality-button__title {
    font-size:
      0.8rem !important;
  }

  .yc-appointment-preview
  .yc-appointment-modality-button__subtitle {
    font-size:
      0.61rem !important;
  }

  .yc-appointment-preview
  .yc-appointment-calendar-panel {
    padding:
      12px
      6px;
  }

  .yc-appointment-preview
  .yc-appointment-calendar-day {
    min-height:
      42px !important;
  }

  .yc-appointment-preview
  .yc-appointment-calendar-day
  > span {
    font-size:
      0.68rem;
    height: 25px;
    width: 25px;
  }

  .yc-appointment-preview
  .yc-appointment-slots {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }
}


@media (
  prefers-reduced-motion: reduce
) {

  .yc-appointment-preview * {
    scroll-behavior:
      auto !important;
    transition:
      none !important;
  }
}

/* =========================================================
   Agendamento — modalidade V5
   DOM estrutural preservado sem wpautop
   ========================================================= */

/*
 * Esta é a regra canônica após a correção do wpautop.
 *
 * Os dois <button> são agora filhos diretos do container.
 * Portanto não são necessários hacks de width:0,
 * flex-basis:0, position ou transform.
 */

.yc-is-appointment-preview
.yc-appointment-modality
.yc-appointment-modality__buttons {
  align-items: stretch !important;
  display: grid !important;
  gap: 12px !important;
  grid-auto-flow: row !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  margin: 24px 0 0 !important;
  max-width: 720px !important;
  padding: 0 !important;
  width: 100% !important;
}

.yc-is-appointment-preview
.yc-appointment-modality
.yc-appointment-modality__buttons
> button.yc-appointment-modality-button {
  align-items: center !important;
  align-self: stretch !important;

  appearance: none !important;

  background: #ffffff !important;

  border:
    1px solid
    #bfd0d6 !important;

  border-radius:
    12px !important;

  box-shadow:
    none !important;

  color:
    #172033 !important;

  cursor:
    pointer !important;

  display:
    flex !important;

  flex:
    none !important;

  flex-basis:
    auto !important;

  flex-direction:
    column !important;

  flex-grow:
    0 !important;

  flex-shrink:
    1 !important;

  float:
    none !important;

  grid-column:
    auto !important;

  grid-row:
    auto !important;

  height:
    auto !important;

  inset:
    auto !important;

  justify-content:
    center !important;

  margin:
    0 !important;

  max-width:
    none !important;

  min-height:
    112px !important;

  min-width:
    0 !important;

  order:
    initial !important;

  overflow:
    hidden !important;

  padding:
    16px 12px !important;

  position:
    static !important;

  text-align:
    center !important;

  transform:
    none !important;

  width:
    100% !important;
}

.yc-is-appointment-preview
.yc-appointment-modality-button__title {
  color:
    inherit !important;

  display:
    block !important;

  font-size:
    0.95rem !important;

  font-weight:
    700 !important;

  line-height:
    1.25 !important;

  margin:
    0 !important;

  overflow-wrap:
    normal !important;

  padding:
    0 !important;

  text-align:
    center !important;

  white-space:
    normal !important;

  width:
    100% !important;

  word-break:
    normal !important;
}

.yc-is-appointment-preview
.yc-appointment-modality-button__subtitle {
  color:
    inherit !important;

  display:
    block !important;

  font-size:
    0.75rem !important;

  line-height:
    1.4 !important;

  margin:
    8px 0 0 !important;

  opacity:
    0.78;

  overflow-wrap:
    normal !important;

  padding:
    0 !important;

  text-align:
    center !important;

  white-space:
    normal !important;

  width:
    100% !important;

  word-break:
    normal !important;
}

.yc-is-appointment-preview
.yc-appointment-modality__buttons
> button.yc-appointment-modality-button[
  aria-pressed="true"
] {
  background:
    linear-gradient(
      135deg,
      #176176,
      #087e79
    ) !important;

  border-color:
    #176176 !important;

  color:
    #ffffff !important;
}


/* Tablet e celular */

@media (max-width: 767px) {

  .yc-is-appointment-preview
  .yc-appointment-modality
  .yc-appointment-modality__buttons {
    gap:
      10px !important;

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

    max-width:
      none !important;
  }

  .yc-is-appointment-preview
  .yc-appointment-modality
  .yc-appointment-modality__buttons
  > button.yc-appointment-modality-button {
    min-height:
      104px !important;

    padding:
      14px 8px !important;

    width:
      100% !important;
  }

  .yc-is-appointment-preview
  .yc-appointment-modality-button__title {
    font-size:
      0.84rem !important;
  }

  .yc-is-appointment-preview
  .yc-appointment-modality-button__subtitle {
    font-size:
      0.68rem !important;
  }
}


@media (max-width: 390px) {

  .yc-is-appointment-preview
  .yc-appointment-modality
  .yc-appointment-modality__buttons {
    gap:
      8px !important;
  }

  .yc-is-appointment-preview
  .yc-appointment-modality
  .yc-appointment-modality__buttons
  > button.yc-appointment-modality-button {
    min-height:
      102px !important;

    padding:
      12px 6px !important;
  }

  .yc-is-appointment-preview
  .yc-appointment-modality-button__title {
    font-size:
      0.78rem !important;
  }

  .yc-is-appointment-preview
  .yc-appointment-modality-button__subtitle {
    font-size:
      0.63rem !important;

    line-height:
      1.3 !important;
  }
}