/* styles/global.css */
/* ============================================================
   frontend/src/styles/global.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&family=Playfair+Display:wght@400;500&display=swap');

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --clr-bg:        #faf9f7;
  --clr-surface:   #ffffff;
  --clr-text:      #1a1a1a;
  --clr-muted:     #6b6b6b;
  --clr-border:    #e8e3dc;
  --clr-accent:    #8b6f5e;
  --clr-accent2:   #c4a882;
  --clr-dark:      #1a1a1a;
  --clr-danger:    #c0392b;
  --clr-success:   #27ae60;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sub:     'Playfair Display', Georgia, serif;
  --font-body:    'Jost', sans-serif;

  --radius:   6px;
  --radius-lg: 12px;
  --shadow:   0 2px 20px rgba(0,0,0,.08);
  --shadow-md:0 8px 40px rgba(0,0,0,.12);
  --transition: .25s ease;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── UTILITÁRIOS ─────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.page-loading { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.spinner { width: 32px; height: 32px; border: 3px solid var(--clr-border); border-top-color: var(--clr-accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── BOTÕES ──────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 24px; border-radius: var(--radius);
  background: var(--clr-accent); color: #fff;
  font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  transition: background var(--transition), transform var(--transition);
}
.btn-primary:hover { background: #7a5f50; transform: translateY(-1px); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 22px; border-radius: var(--radius);
  border: 1.5px solid var(--clr-accent); color: var(--clr-accent);
  font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  transition: all var(--transition);
}
.btn-ghost:hover { background: var(--clr-accent); color: #fff; }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 18px; border-radius: var(--radius);
  background: var(--clr-danger); color: #fff;
  font-size: 13px; font-weight: 500;
  transition: opacity var(--transition);
}
.btn-danger:hover { opacity: .85; }

/* ── SEÇÕES COMUNS ───────────────────────────────────────── */
.sec-over {
  display: block;
  font-size: 11px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--clr-accent); margin-bottom: 6px;
}
.sec-title {
  font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400; line-height: 1.1; color: var(--clr-text);
}
.divider {
  width: 48px; height: 2px; background: var(--clr-accent2); margin-bottom: 18px;
}

/* ── COURSE CARDS ────────────────────────────────────────── */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}
.course-card {
  background: var(--clr-surface); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.course-thumb {
  position: relative; height: 200px; overflow: hidden;
  background: #ede8e1;
}
.course-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.course-card:hover .course-thumb img { transform: scale(1.04); }
.course-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.25));
}
.course-info { padding: 18px 20px 20px; }
.course-cat {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--clr-accent); font-weight: 500;
}
.course-info h3 {
  font-family: var(--font-sub); font-size: 1.05rem; font-weight: 400;
  margin: 6px 0 8px; line-height: 1.3;
}
.course-price { font-size: 13px; color: var(--clr-muted); }
.course-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.course-link { font-size: 12px; letter-spacing: .06em; color: var(--clr-accent); font-weight: 500; }

/* ── TOAST ───────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  padding: 14px 20px; border-radius: var(--radius);
  font-size: 14px; font-weight: 500; color: #fff;
  box-shadow: var(--shadow-md);
  animation: toastIn .3s ease;
}
.toast.success { background: var(--clr-success); }
.toast.error   { background: var(--clr-danger); }
.toast.info    { background: var(--clr-accent); }
@keyframes toastIn { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }

/* ── MODAL GENÉRICO ──────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 900; display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .2s ease;
}
.modal-box {
  background: var(--clr-surface); border-radius: var(--radius-lg);
  padding: 36px; width: 100%; max-width: 460px;
  box-shadow: var(--shadow-md);
  animation: slideUp .25s ease;
  position: relative;
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--clr-muted);
  transition: background var(--transition);
}
.modal-close:hover { background: var(--clr-border); }

@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity:0; } to { transform: translateY(0); opacity:1; } }

/* ── FORM FIELDS ─────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-muted); }
.field input,
.field textarea,
.field select {
  padding: 11px 14px; border: 1.5px solid var(--clr-border); border-radius: var(--radius);
  font-size: 14px; color: var(--clr-text); background: var(--clr-bg);
  transition: border-color var(--transition);
  outline: none;
}
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--clr-accent); }
.field textarea { resize: vertical; min-height: 90px; }
.form-error { font-size: 12px; color: var(--clr-danger); margin-top: 4px; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .courses-grid { grid-template-columns: 1fr; }
}


/* components/AuthModal.css */
/* AuthModal.css */
.auth-modal-box { max-width: 420px; }

.auth-tabs {
  display: flex; border-bottom: 2px solid var(--clr-border); margin-bottom: 24px;
}
.auth-tab {
  flex: 1; padding: 10px; font-size: 14px; font-weight: 500;
  color: var(--clr-muted); border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all var(--transition);
}
.auth-tab.active { color: var(--clr-accent); border-bottom-color: var(--clr-accent); }
.auth-tab:hover:not(.active) { color: var(--clr-text); }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; }
.auth-sub { font-size: 13px; color: var(--clr-muted); margin-top: -8px; }

.auth-submit { width: 100%; padding: 13px; font-size: 14px; margin-top: 4px; }

.auth-error {
  background: #fdf0ee; border: 1px solid #f5c6c0; border-radius: var(--radius);
  padding: 10px 14px; font-size: 13px; color: var(--clr-danger);
}

.auth-link-btn {
  font-size: 13px; color: var(--clr-accent); text-align: center;
  text-decoration: underline; text-underline-offset: 3px;
}
.auth-link-btn:hover { color: var(--clr-text); }


/* components/CourseModal.css */
/* ============================================================
   frontend/src/components/CourseModal.css
   ============================================================ */

.course-modal-box {
  width: min(660px, calc(100% - 28px));
  max-height: 92vh;
  overflow-y: auto;
  padding: 0;
  scroll-behavior: smooth;
  border: 1px solid #eadfd6;
  background: #fffdf9;
}

.cm-thumb {
  height: 250px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: #e9ddd3;
}

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

.cm-body {
  padding: 30px 34px 34px;
}

.cm-body h2 {
  max-width: 520px;
  margin: 7px 0 12px;
  color: #2d211b;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.55rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.08;
}

.cm-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  color: #b78d3c;
  font-size: 15px;
}

.cm-rating span {
  color: var(--clr-muted);
  font-size: 12px;
}

.cm-desc {
  max-width: 560px;
  margin: 0 0 22px;
  color: #6f625b;
  font-size: 14px;
  line-height: 1.8;
}

.cm-benefits {
  display: grid;
  gap: 0;
  margin: 4px 0 28px;
  border-top: 1px solid #eadfd6;
}

.cm-benefits > div {
  display: grid;
  grid-template-columns: minmax(145px, .72fr) minmax(0, 1.28fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #eadfd6;
}

.cm-benefits strong {
  color: #593722;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
}

.cm-benefits span {
  color: #786b63;
  font-size: 12px;
  line-height: 1.55;
}

.cm-investment-label {
  margin-bottom: 4px;
  color: #9b6d5a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.cm-price {
  margin-bottom: 8px;
  color: var(--clr-accent);
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 400;
}

.cm-buy-note {
  margin: 0 0 18px;
  color: #8a7b72;
  font-size: 11px;
  line-height: 1.5;
}

.cm-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 30px;
}

.cm-btn-buy {
  min-height: 52px;
  padding: 13px 22px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.btn-whatsapp {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 8px;
  color: #fff;
  background: #25D366;
  font-size: 12px;
  font-weight: 700;
  transition: transform var(--transition), background var(--transition);
}

.btn-whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-1px);
}

.cm-purchased {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--clr-success);
  background: #e8f5e9;
  font-size: 14px;
  font-weight: 600;
}

/* Avaliações */
.cm-comments {
  padding-top: 25px;
  border-top: 1px solid var(--clr-border);
}

.cm-comments h3 {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
}

.cm-comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.cm-stars {
  display: flex;
  gap: 4px;
}

.star-btn {
  color: var(--clr-border);
  font-size: 22px;
  transition: color var(--transition);
}

.star-btn.active {
  color: #c4a14a;
}

.cm-comment-form textarea {
  padding: 10px 14px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius);
  outline: none;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  transition: border-color var(--transition);
}

.cm-comment-form textarea:focus {
  border-color: var(--clr-accent);
}

.cm-comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cm-comment {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--clr-bg);
}

.cm-comment-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.cm-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.cm-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--clr-accent);
  font-size: 14px;
  font-weight: 600;
}

.cm-comment-header strong {
  display: block;
  font-size: 14px;
}

.cm-username {
  color: var(--clr-muted);
  font-size: 12px;
}

.cm-star-display {
  margin-top: 2px;
  color: #c4a14a;
  font-size: 13px;
}

.cm-date {
  margin-left: auto;
  color: var(--clr-muted);
  font-size: 11px;
}

.cm-comment p {
  color: var(--clr-muted);
  font-size: 14px;
  line-height: 1.65;
}

.cm-no-comments {
  padding: 18px 0;
  color: var(--clr-muted);
  font-size: 13px;
  text-align: center;
}

.toast-inline {
  position: sticky;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.toast-inline.success { background: var(--clr-success); }
.toast-inline.error { background: var(--clr-danger); }
.toast-inline.info { background: var(--clr-accent); }

@media (max-width: 620px) {
  .cm-thumb {
    height: 190px;
  }

  .cm-body {
    padding: 24px 20px 28px;
  }

  .cm-benefits > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .cm-actions {
    grid-template-columns: 1fr;
  }

  .btn-whatsapp,
  .cm-btn-buy {
    width: 100%;
  }
}

/* ============================================================
   AJUSTE FINAL — MODAL NO PC
   Mantém o mesmo visual/componentes e muda apenas a disposição
   no desktop para deixar de ficar estreito/espremido.
   ============================================================ */
@media (min-width: 900px) {
  .modal-box.course-modal-box {
    width: min(1080px, calc(100vw - 64px)) !important;
    max-width: 1080px !important;
    height: min(720px, calc(100vh - 64px));
    max-height: min(720px, calc(100vh - 64px));
    display: grid;
    grid-template-columns: minmax(350px, 40%) minmax(0, 60%);
    grid-template-rows: 1fr;
    overflow: hidden;
    position: relative;
  }

  .course-modal-box .cm-thumb {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }

  .course-modal-box .cm-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .course-modal-box .cm-body {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    padding: 46px 52px 44px;
  }

  .course-modal-box .cm-body h2 {
    max-width: 100%;
    margin: 9px 0 15px;
    font-size: clamp(2.55rem, 3.25vw, 3.35rem);
    line-height: 1.02;
  }

  .course-modal-box .course-cat {
    font-size: 11px;
    letter-spacing: .20em;
  }

  .course-modal-box .cm-desc {
    max-width: 100%;
    margin-bottom: 27px;
    font-size: 15.5px;
    line-height: 1.85;
  }

  .course-modal-box .cm-investment-label {
    margin-bottom: 7px;
    font-size: 11px;
  }

  .course-modal-box .cm-price {
    margin-bottom: 10px;
    font-size: 2.65rem;
  }

  .course-modal-box .cm-buy-note {
    margin-bottom: 22px;
    font-size: 12px;
    line-height: 1.6;
  }

  .course-modal-box .cm-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 34px;
  }

  .course-modal-box .cm-btn-buy,
  .course-modal-box .btn-whatsapp {
    width: 100%;
    min-height: 58px;
    padding: 14px 18px;
    font-size: 13px;
  }

  .course-modal-box .cm-comments {
    padding-top: 30px;
  }

  .course-modal-box .cm-comments h3 {
    margin-bottom: 20px;
    font-size: 1.55rem;
  }
}

/* Em notebook menor, continua em uma coluna confortável em vez
   de forçar o layout de desktop. */
@media (min-width: 621px) and (max-width: 899px) {
  .modal-box.course-modal-box {
    width: min(720px, calc(100vw - 40px)) !important;
    max-width: 720px !important;
  }

  .course-modal-box .cm-body {
    padding: 34px 40px 38px;
  }

  .course-modal-box .cm-body h2 {
    font-size: 2.65rem;
  }

  .course-modal-box .cm-desc {
    font-size: 15px;
  }
}

/* Escolha de planos e canais de pagamento — extensão do visual existente. */
.cm-plans {
  display: grid;
  gap: 9px;
  margin: 10px 0 17px;
}
.cm-plan {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #eadfd6;
  border-radius: 10px;
  color: #3b2b22;
  background: #fffdf9;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.cm-plan:hover { border-color: #cda98f; }
.cm-plan.active { border-color: #965a38; background: #fbf5ef; box-shadow: 0 8px 20px rgba(82, 47, 28, .07); }
.cm-plan-radio { width: 16px; height: 16px; border: 1.5px solid #b49480; border-radius: 50%; box-shadow: inset 0 0 0 4px #fffdf9; background: transparent; }
.cm-plan.active .cm-plan-radio { border-color: #8b4f2d; background: #8b4f2d; }
.cm-plan-copy { min-width: 0; display: grid; gap: 2px; }
.cm-plan-copy strong { font-family: var(--font-display); font-size: 1.03rem; font-weight: 600; }
.cm-plan-copy small { color: #86756b; font-size: 10.5px; line-height: 1.4; }
.cm-plan-copy em { color: #71635a; font-size: 11px; line-height: 1.45; font-style: normal; }
.cm-plan-price { color: #75401f; font-family: var(--font-display); font-size: 1.1rem; white-space: nowrap; }
.cm-plan-unavailable { margin: 10px 0 18px; padding: 12px 14px; border: 1px solid #eadfd6; border-radius: 10px; color: #7d6d64; background: #fbf7f2; font-size: 12px; }
.cm-payment-options { display: grid; gap: 11px; margin-bottom: 30px; }
.cm-payment-main { width: 100%; min-height: 54px; }
.cm-online-payment { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 3px; }
.cm-online-payment > span { color: #8a7b72; font-size: 11px; }
.cm-btn-online { min-height: 42px; padding: 9px 14px; font-size: 11px; }
.cm-plan:disabled, .cm-payment-options button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

@media (max-width: 620px) {
  .cm-plan { grid-template-columns: auto minmax(0, 1fr); }
  .cm-plan-price { grid-column: 2; }
  .cm-online-payment { align-items: stretch; flex-direction: column; }
  .cm-btn-online { width: 100%; }
}


/* components/CourseTerms.css */
.cm-terms {
  margin: 22px 0 18px;
  padding: 16px 17px;
  border: 1px solid #e5d8cf;
  border-radius: 10px;
  background: #fbf8f5;
}

.cm-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.cm-terms-checkbox {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 1px;
  border: 1.5px solid #b9a79d;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.cm-terms-checkbox:hover {
  border-color: #8f6045;
}

.cm-terms-checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(64, 123, 255, 0.17);
}

.cm-terms-checkbox:checked {
  border-color: #865033;
  background: #865033;
}

.cm-terms-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cm-terms-text {
  color: #655850;
  font-size: 12px;
  line-height: 1.55;
}

.cm-terms-text strong {
  color: #43352e;
  font-weight: 600;
}

.cm-terms-link {
  display: inline-block;
  margin-left: 4px;
  color: #2767d8;
  font-size: inherit;
  font-weight: 700;
  text-decoration: none;
}

.cm-terms-link:hover {
  color: #174da9;
  text-decoration: underline;
}

.cm-terms-warning {
  margin: 10px 0 0 32px;
  color: #a04a3c;
  font-size: 10.5px;
  line-height: 1.45;
}

.cm-payment-options button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none !important;
}

@media (max-width: 620px) {
  .cm-terms {
    padding: 14px;
  }

  .cm-terms-text {
    font-size: 11.5px;
  }
}

/* components/Navbar.css */
/* ============================================================
   frontend/src/components/Navbar.css
   Navbar elegante do Studio SZ
   ============================================================ */

.sz-nav {
  position: sticky;
  top: 0;
  z-index: 500;
  height: 88px;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 clamp(28px, 4.8vw, 82px);
  border-bottom: 1px solid rgba(101, 67, 47, 0.12);
  background: rgba(250, 247, 242, 0.93);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px rgba(78, 45, 27, 0.03);
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #3b281e;
  text-decoration: none;
}

.nav-monogram {
  position: relative;
  width: 45px;
  height: 52px;
  display: inline-block;
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
}

.nav-monogram-s,
.nav-monogram-z {
  position: absolute;
  line-height: 1;
}

.nav-monogram-s {
  top: 1px;
  left: 0;
  font-size: 3.25rem;
  font-weight: 400;
}

.nav-monogram-z {
  right: 1px;
  bottom: 1px;
  font-size: 2rem;
  font-weight: 400;
}

.nav-logo-divider {
  width: 1px;
  height: 42px;
  margin: 0 18px 0 13px;
  background: rgba(117, 76, 52, 0.38);
}

.nav-logo-label {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.36rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: clamp(28px, 3.2vw, 58px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 11px;
  color: #56463d;
  font-size: 0.96rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 5px;
  left: 9px;
  height: 1px;
  background: #8b4f2d;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: #7a4327;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.nav-account,
.nav-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  color: #5f5047;
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: color 160ms ease;
}

.nav-account:hover,
.nav-user-trigger:hover {
  color: #7c472b;
}

.nav-account svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.nav-enroll,
.nav-mobile-enroll {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #955732, #75401f);
  box-shadow: 0 12px 24px rgba(91, 47, 25, 0.2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    transform 170ms ease,
    box-shadow 170ms ease;
}

.nav-enroll {
  padding: 0 28px;
  white-space: nowrap;
}

.nav-enroll:hover,
.nav-mobile-enroll:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(91, 47, 25, 0.27);
}

.nav-user {
  position: relative;
}

.nav-user-trigger {
  padding: 4px 8px;
}

.nav-user-avatar,
.nav-user-initial {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
}

.nav-user-avatar {
  display: block;
  object-fit: cover;
}

.nav-user-initial {
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #a86742, #75401f);
  font-size: 0.8rem;
  font-weight: 700;
}

.nav-user-name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-trigger > svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.nav-user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 600;
  min-width: 180px;
  overflow: hidden;
  border: 1px solid rgba(101, 67, 47, 0.14);
  border-radius: 14px;
  background: rgba(255, 253, 249, 0.98);
  box-shadow: 0 20px 46px rgba(68, 40, 25, 0.14);
}

.nav-user-dropdown a,
.nav-user-dropdown button {
  width: 100%;
  display: block;
  border: 0;
  padding: 13px 18px;
  color: #3c3029;
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease;
}

.nav-user-dropdown a:hover,
.nav-user-dropdown button:hover {
  background: #f5eee7;
}

.nav-user-dropdown button {
  color: #a23830;
}

.nav-hamburger {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.nav-hamburger span {
  width: 23px;
  height: 2px;
  display: block;
  background: #3b2a20;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.nav-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-mobile {
  position: fixed;
  z-index: 490;
  inset: 88px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding: 24px;
  background: rgba(255, 253, 249, 0.99);
  animation: navSlideDown 180ms ease;
}

.nav-mobile > a,
.nav-mobile > button {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  border: 0;
  border-bottom: 1px solid rgba(101, 67, 47, 0.12);
  color: #3a2e27;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
}

.nav-mobile .nav-mobile-enroll {
  margin-top: 16px;
  border-bottom: 0;
  color: #fff;
}

@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}



@media (min-width: 1041px) and (max-width: 1240px) {
  .sz-nav {
    gap: 20px;
    padding-inline: 24px;
  }

  .nav-logo-label {
    font-size: 1.14rem;
  }

  .nav-logo-divider {
    margin-right: 12px;
    margin-left: 9px;
  }

  .nav-links {
    gap: clamp(8px, 1.4vw, 18px);
  }

  .nav-links a {
    padding-inline: 7px;
    font-size: 0.86rem;
  }

  .nav-right {
    gap: 10px;
  }

  .nav-account,
  .nav-user-trigger {
    font-size: 0.82rem;
  }

  .nav-enroll {
    min-height: 50px;
    padding-inline: 18px;
    font-size: 0.7rem;
  }
}

@media (max-width: 1040px) {
  .sz-nav {
    height: 76px;
  }

  .nav-links,
  .nav-right {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-mobile {
    inset: 76px 0 0;
  }
}

@media (max-width: 520px) {
  .sz-nav {
    padding-inline: 18px;
  }

  .nav-logo-divider {
    margin-right: 12px;
    margin-left: 8px;
  }

  .nav-logo-label {
    font-size: 1rem;
    letter-spacing: 0.1em;
  }

  .nav-monogram {
    width: 39px;
  }

  .nav-monogram-s {
    font-size: 2.8rem;
  }

  .nav-monogram-z {
    font-size: 1.75rem;
  }
}



/* pages/Admin.css */
/* Admin.css */
.admin-page { min-height: 100vh; background: var(--clr-bg); }
.admin-header {
  background: linear-gradient(135deg, #1a1a1a 0%, var(--clr-accent) 100%);
  color: #fff; padding: 40px;
}
.admin-header h1 { font-family: var(--font-display); font-size: 2.2rem; font-weight: 300; }
.admin-header p  { opacity: .7; margin-top: 4px; }

.admin-tabs {
  display: flex; background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border); padding: 0 40px; overflow-x: auto;
}
.admin-tab {
  padding: 16px 24px; font-size: 14px; font-weight: 500; color: var(--clr-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all var(--transition); white-space: nowrap;
}
.admin-tab:hover { color: var(--clr-text); }
.admin-tab.active { color: var(--clr-accent); border-bottom-color: var(--clr-accent); }

.admin-content { max-width: 1200px; margin: 0 auto; padding: 40px; }
.admin-section h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; margin-bottom: 20px; }

.admin-form { display: flex; flex-direction: column; gap: 16px; max-width: 700px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.field-inline { display: flex; align-items: center; gap: 10px; }
.field-inline label { font-size: 14px; cursor: pointer; }

.admin-table-wrap { overflow-x: auto; margin-top: 8px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th {
  text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--clr-muted);
  border-bottom: 2px solid var(--clr-border); background: var(--clr-bg);
}
.admin-table td { padding: 14px 16px; border-bottom: 1px solid var(--clr-border); vertical-align: middle; }
.admin-table tr:hover td { background: var(--clr-bg); }
.td-actions { display: flex; gap: 8px; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 500;
  background: var(--clr-border); color: var(--clr-text);
}
.badge.active   { background: #e8f5e9; color: var(--clr-success); }
.badge.inactive { background: #fdf0ee; color: var(--clr-danger); }

/* Admin Chat */
.admin-chat {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  height: 620px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
}

.chat-convs {
  overflow-y: auto;
  border-right: 1px solid var(--clr-border);
  background: var(--clr-surface);
}

.chat-convs-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--clr-border);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
}

.chat-convs-header h2 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 1rem;
}

.chat-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  background: var(--clr-bg);
  transition: border-color var(--transition), background var(--transition);
}

.chat-search:focus-within {
  border-color: var(--clr-accent);
  background: var(--clr-surface);
}

.chat-search svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--clr-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.chat-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--clr-text);
  background: transparent;
  font: inherit;
  font-size: 13px;
}

.chat-search input::-webkit-search-cancel-button { cursor: pointer; }

.conv-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}

.conv-item:hover,
.conv-item.active { background: var(--clr-bg); }
.conv-item.active { box-shadow: inset 3px 0 0 var(--clr-accent); }

.conv-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.conv-avatar-i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--clr-accent);
  font-size: 15px;
  font-weight: 600;
}

.conv-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.conv-info strong {
  display: block;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-info > span {
  display: block;
  overflow: hidden;
  color: var(--clr-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-badge {
  min-width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  background: var(--clr-accent);
  font-size: 11px;
  font-weight: 700;
}

.chat-list-message { padding: 20px 16px !important; }

.chat-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fbf7f3;
}

.chat-panel-header {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--clr-border);
  background: rgba(255, 255, 255, .88);
}

.chat-panel-header strong { display: block; font-size: 15px; }
.chat-panel-header span { color: var(--clr-muted); font-size: 12px; }

.chat-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 24px;
  color: var(--clr-muted);
  text-align: center;
}

.chat-placeholder strong {
  color: var(--clr-text);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
}

.chat-placeholder span { max-width: 330px; font-size: 13px; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-empty-conversation {
  max-width: 420px;
  margin: auto;
  padding: 16px 20px;
  border: 1px dashed var(--clr-border);
  border-radius: 14px;
  color: var(--clr-muted);
  background: rgba(255, 255, 255, .62);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.chat-msg {
  max-width: min(72%, 620px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; }

.chat-msg p {
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.chat-msg.mine p {
  color: #fff;
  background: var(--clr-accent);
  border-bottom-right-radius: 5px;
}

.chat-msg.theirs p {
  border: 1px solid var(--clr-border);
  border-bottom-left-radius: 5px;
  background: var(--clr-surface);
}

.chat-time { color: var(--clr-muted); font-size: 10px; }

.chat-input-row {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--clr-border);
  background: rgba(255, 255, 255, .9);
}

.chat-input-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1.5px solid var(--clr-border);
  border-radius: 22px;
  outline: none;
  font-size: 14px;
}

.chat-input-row input:focus { border-color: var(--clr-accent); }
.chat-input-row .btn-primary { border-radius: 22px; padding: 10px 20px; }

/* Calendário */
.cal-day { margin-bottom: 28px; }
.cal-day h3 { font-family: var(--font-sub); font-size: 1rem; font-weight: 400; margin-bottom: 12px; color: var(--clr-muted); text-transform: capitalize; }
.cal-slots { display: flex; flex-wrap: wrap; gap: 10px; }
.cal-slot {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius);
  font-size: 13px;
}
.cal-slot.unavailable { opacity: .5; background: #fdf0ee; }
.cal-slot-actions { display: flex; gap: 6px; margin-left: 8px; }

.muted-text { color: var(--clr-muted); font-size: 14px; padding: 20px 0; }

@media (max-width: 768px) {
  .admin-content { padding: 20px; }
  .admin-header { padding: 24px 20px; }
  .admin-chat { grid-template-columns: 1fr; height: auto; min-height: 680px; }
  .chat-convs { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--clr-border); }
  .chat-panel { min-height: 420px; }
  .chat-msg { max-width: 86%; }
}

/* Produtos, pedidos e documentos adicionados */
.admin-field-help {
  display: block;
  margin-top: 6px;
  color: var(--clr-muted);
  font-size: 11px;
  line-height: 1.45;
}

.admin-course-count {
  border: 0;
  cursor: pointer;
}

.admin-course-count:hover {
  filter: brightness(.96);
  text-decoration: underline;
}

.admin-modal-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  overflow-y: auto;
  padding: 32px;
  background: rgba(20, 13, 9, .68);
  backdrop-filter: blur(6px);
}

.admin-modal {
  position: relative;
  width: min(940px, 100%);
  margin: 0 auto;
  border: 1px solid var(--clr-border);
  border-radius: 22px;
  padding: 30px;
  background: var(--clr-surface);
  box-shadow: 0 28px 80px rgba(20, 13, 9, .3);
}

.admin-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--clr-border);
  border-radius: 50%;
  color: var(--clr-text);
  background: var(--clr-surface);
  font-size: 24px;
  cursor: pointer;
}

.admin-modal h2 { padding-right: 52px; }

.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.admin-detail-grid > div,
.admin-address-box {
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  padding: 15px;
  background: var(--clr-bg);
}

.admin-detail-grid span,
.admin-detail-grid small {
  display: block;
  color: var(--clr-muted);
  font-size: 11px;
}

.admin-detail-grid strong {
  display: block;
  margin: 5px 0;
  font-size: 14px;
}

.admin-address-box { margin-bottom: 22px; }
.admin-address-box p { margin: 6px 0 0; color: var(--clr-muted); font-size: 13px; }
.admin-modal-form { max-width: none; }
.admin-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-modal-actions a { text-decoration: none; }

.admin-purchase-list {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.admin-purchase-card {
  border: 1px solid var(--clr-border);
  border-radius: 18px;
  padding: 20px;
  background: var(--clr-bg);
}

.admin-purchase-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-purchase-card h3 { margin: 8px 0 0; font-family: var(--font-display); font-weight: 500; }
.admin-purchase-card > p { margin: 10px 0; color: var(--clr-muted); font-size: 12px; }
.admin-purchase-links { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.admin-purchase-links a { color: var(--clr-accent); font-size: 12px; font-weight: 700; }
.admin-document-form { max-width: none; }

@media (max-width: 700px) {
  .admin-modal-backdrop { padding: 0; }
  .admin-modal { min-height: 100%; border-radius: 0; padding: 24px 18px 40px; }
  .admin-detail-grid { grid-template-columns: 1fr; }
  .admin-purchase-card header { flex-direction: column; }
}
/* Planos de curso — usa a mesma linguagem visual do painel existente. */
.admin-course-form { max-width: 920px; }
.admin-course-plans-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--clr-border);
}
.admin-course-plans-head h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
.admin-course-plans-head p { max-width: 650px; margin: 0; color: var(--clr-muted); font-size: 12px; line-height: 1.55; }
.admin-course-plans { display: grid; gap: 14px; }
.admin-course-plan { padding: 18px; border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); }
.admin-course-plan-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.admin-course-plan-title strong { font-family: var(--font-display); font-size: 1.08rem; font-weight: 500; }
.admin-course-plan-title .btn-danger { padding: 5px 10px; font-size: 11px; }
.admin-plan-description { grid-column: span 2; }
@media (max-width: 680px) {
  .admin-course-plans-head { align-items: stretch; flex-direction: column; }
  .admin-plan-description { grid-column: auto; }
}
.admin-manual-payment-actions {
  display: grid;
  gap: 7px;
  margin: 16px 0;
  padding: 15px;
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  background: var(--clr-surface);
}
.admin-manual-payment-actions strong { color: var(--clr-text); font-size: 13px; }
.admin-manual-payment-actions span { color: var(--clr-muted); font-size: 12px; line-height: 1.5; }
.admin-manual-payment-actions > div { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }


/* pages/Cursos.css */
/* Cursos.css */

/* ── PAGE HERO ───────────────────────────────────────────── */
.page-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid #e9ddd3;
  background:
    radial-gradient(circle at 18% 15%, rgba(166, 103, 66, .10), transparent 30%),
    linear-gradient(135deg, #fbf7f2 0%, #f3e9df 100%);
}

.page-hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -260px;
  top: -230px;
  border: 1px solid rgba(128, 78, 49, .13);
  border-radius: 50%;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 80px));
  margin: 0 auto;
  padding: 72px 0;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr);
  align-items: center;
  gap: clamp(55px, 7vw, 110px);
}

.page-hero-content {
  color: #2d211b;
}

.page-hero-kicker {
  display: block;
  margin-bottom: 18px;
  color: #965a38;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .30em;
  text-transform: uppercase;
}

.page-hero-content h1 {
  margin: 0 0 22px;
  color: #2b1e18;
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 5.4vw, 5.6rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .94;
}

.page-hero-content h1 em {
  color: #8b4f2d;
  font-weight: 400;
}

.page-hero-content p {
  max-width: 610px;
  margin: 0;
  color: #71635b;
  font-size: 15px;
  line-height: 1.8;
}

.page-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.page-hero-points span {
  padding: 8px 13px;
  border: 1px solid rgba(128, 80, 51, .19);
  border-radius: 999px;
  color: #74513d;
  background: rgba(255, 255, 255, .52);
  font-size: 11px;
  letter-spacing: .06em;
}

.page-hero-media {
  position: relative;
  height: 320px;
  overflow: visible;
}

.page-hero-media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 30px 30px 90px 30px;
  box-shadow: 0 26px 60px rgba(72, 43, 27, .17);
}

.page-hero-media::after {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  z-index: -1;
  border: 1px solid rgba(139, 79, 45, .23);
  border-radius: 30px 30px 90px 30px;
}

.page-hero-media-card {
  position: absolute;
  left: -42px;
  bottom: 24px;
  width: min(285px, 75%);
  padding: 18px 20px;
  border: 1px solid rgba(128, 80, 51, .13);
  border-radius: 16px;
  background: rgba(255, 252, 248, .94);
  box-shadow: 0 18px 40px rgba(64, 38, 24, .13);
  backdrop-filter: blur(10px);
}

.page-hero-media-card strong {
  display: block;
  margin-bottom: 4px;
  color: #5e3723;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
}

.page-hero-media-card span {
  color: #756860;
  font-size: 12px;
  line-height: 1.5;
}

.reveal-anim {
  animation: slideUp .6s ease both;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.cursos-layout {
  display: grid; grid-template-columns: 280px 1fr; gap: 40px;
  max-width: 1300px; margin: 0 auto; padding: 48px 40px;
  align-items: start;
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.cursos-sidebar {
  position: sticky; top: 80px;
  display: flex; flex-direction: column; gap: 32px;
}

.search-box { display: flex; flex-direction: column; gap: 10px; }
.search-label {
  font-size: 11px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--clr-muted);
}
.search-input-wrap {
  position: relative; display: flex; align-items: center;
}
.search-icon {
  position: absolute; left: 12px; width: 16px; height: 16px;
  stroke: var(--clr-muted); stroke-width: 2; fill: none;
}
.search-input {
  width: 100%; padding: 10px 36px 10px 36px;
  border: 1.5px solid var(--clr-border); border-radius: var(--radius);
  font-size: 14px; background: var(--clr-bg); outline: none;
  transition: border-color var(--transition);
}
.search-input:focus { border-color: var(--clr-accent); }
.search-clear {
  position: absolute; right: 10px;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  color: var(--clr-muted);
}
.search-clear svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; }
.search-results-count { font-size: 12px; color: var(--clr-muted); }

.sidebar-filters, .sidebar-price { display: flex; flex-direction: column; gap: 12px; }
.sidebar-section-label {
  font-size: 11px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--clr-muted);
}
.filter-buttons { display: flex; flex-direction: column; gap: 6px; }
.filter-buttons .btn-ghost {
  justify-content: flex-start; padding: 8px 14px; font-size: 13px;
  text-transform: none; letter-spacing: 0;
}
.filter-buttons .btn-ghost.active { background: var(--clr-accent); color: #fff; border-color: var(--clr-accent); }

.price-range { display: flex; flex-direction: column; gap: 8px; }
.price-slider {
  width: 100%; accent-color: var(--clr-accent); cursor: pointer;
}
.price-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--clr-muted); }

/* ── MAIN GRID ───────────────────────────────────────────── */
.cursos-main { display: flex; flex-direction: column; gap: 24px; }
.cursos-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid var(--clr-border);
}
.cursos-count { font-size: 14px; color: var(--clr-muted); }
.sort-select {
  padding: 7px 12px; border: 1.5px solid var(--clr-border); border-radius: var(--radius);
  font-size: 13px; background: var(--clr-bg); color: var(--clr-text); outline: none;
  cursor: pointer;
}

.course-rating { font-size: 12px; color: #c4a14a; font-weight: 500; }

.empty-state {
  text-align: center; padding: 80px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  color: var(--clr-muted);
}

/* Skeleton */
.skel-line { height: 12px; border-radius: 6px; background: var(--clr-border); margin: 8px 0; animation: shimmer 1.4s infinite; }
.skel-line.short { width: 60%; }
@keyframes shimmer { 0%,100%{opacity:1}50%{opacity:.4} }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .page-hero-inner {
    grid-template-columns: 1fr 360px;
    gap: 44px;
  }

  .page-hero-media {
    height: 290px;
  }

  .cursos-layout { grid-template-columns: 1fr; }
  .cursos-sidebar { position: static; }
  .filter-buttons { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .page-hero {
    min-height: auto;
  }

  .page-hero-inner {
    width: min(100% - 40px, 1240px);
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 54px 0 64px;
  }

  .page-hero-content h1 {
    font-size: clamp(3rem, 14vw, 4.6rem);
  }

  .page-hero-media {
    height: 270px;
  }

  .page-hero-media-card {
    left: 18px;
    bottom: -22px;
  }

  .cursos-layout { padding: 44px 20px 24px; }
}


/* ── GRID DE CURSOS DA PÁGINA ────────────────────────────── */
.cursos-main .courses-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .cursos-main .courses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .cursos-main .courses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .cursos-main .course-card {
    min-width: 0;
    border-radius: 12px;
  }

  .cursos-main .course-thumb {
    height: 150px;
  }

  .cursos-main .course-info {
    padding: 14px 12px 16px;
  }

  .cursos-main .course-cat {
    margin-bottom: 8px;
    font-size: 8px;
    letter-spacing: .15em;
  }

  .cursos-main .course-info h3 {
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.2;
  }

  .cursos-main .course-price,
  .cursos-main .course-link {
    font-size: 10px;
  }

  .cursos-topbar {
    gap: 10px;
  }

  .sort-select {
    max-width: 145px;
    font-size: 11px;
  }
}

/* pages/Home.css */
/* ============================================================
   frontend/src/pages/Home.css
   Nova identidade da Home do Studio SZ
   ============================================================ */

:root {
  --home-cream: #f8f3ed;
  --home-cream-2: #f2e9df;
  --home-paper: #fffdf9;
  --home-brown: #8b4f2d;
  --home-brown-dark: #5b3423;
  --home-brown-soft: #a66d4d;
  --home-ink: #2d211b;
  --home-muted: #6f625b;
  --home-line: rgba(108, 72, 50, 0.18);
  --home-shadow: 0 24px 60px rgba(79, 47, 31, 0.12);
  --home-display: var(--font-display, "Cormorant Garamond", Georgia, serif);
  --home-sans: var(--font-body, Inter, "Segoe UI", sans-serif);
}

.home-main {
  overflow: hidden;
}

.home-kicker,
.home-eyebrow {
  display: block;
  color: var(--home-brown);
  font-family: var(--home-sans);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.home-kicker-light {
  color: rgba(255, 255, 255, 0.72);
}

.home-primary-button,
.home-secondary-button,
.contact-light-button,
.contact-outline-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 30px;
  font-family: var(--home-sans);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.home-primary-button {
  width: min(100%, 450px);
  color: #fff;
  background: linear-gradient(135deg, #955732, #75401f);
  box-shadow: 0 16px 30px rgba(94, 48, 25, 0.24);
}

.home-primary-button:hover,
.home-secondary-button:hover,
.contact-light-button:hover,
.contact-outline-button:hover {
  transform: translateY(-2px);
}

.home-primary-button:hover {
  box-shadow: 0 20px 38px rgba(94, 48, 25, 0.3);
}

.home-secondary-button {
  width: fit-content;
  color: #fff;
  background: var(--home-brown);
  box-shadow: 0 12px 26px rgba(92, 50, 28, 0.18);
}

.home-secondary-button:hover {
  background: var(--home-brown-dark);
}

.home-ornament,
.section-thread {
  display: flex;
  align-items: center;
  width: min(100%, 420px);
  gap: 14px;
}

.home-ornament span:first-child,
.home-ornament span:last-child,
.section-thread span:first-child,
.section-thread span:last-child {
  height: 1px;
  flex: 1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139, 79, 45, 0.58)
  );
}

.home-ornament span:last-child,
.section-thread span:last-child {
  background: linear-gradient(
    90deg,
    rgba(139, 79, 45, 0.58),
    transparent
  );
}

.home-ornament-mark {
  color: rgba(139, 79, 45, 0.62);
  font-family: var(--home-display);
  font-size: 1rem;
  font-style: italic;
}

.thread-knot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cba488;
  transform: rotate(45deg);
}

/* HERO */
.home-hero {
  position: relative;
  min-height: calc(100svh - 78px);
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  background: var(--home-cream);
  isolation: isolate;
}

.home-hero-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  padding:
    clamp(76px, 9vw, 136px)
    0
    clamp(76px, 9vw, 136px)
    clamp(36px, 7vw, 118px);
}

.home-hero-copy h1 {
  max-width: 660px;
  margin: 26px 0 30px;
  color: var(--home-ink);
  font-family: var(--home-display);
  font-size: clamp(4rem, 6vw, 7.2rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.home-hero-copy h1 em {
  color: var(--home-brown);
  font-weight: 400;
}

.home-hero-copy .home-ornament {
  margin-bottom: 34px;
}

.home-hero-visual {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 36%;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 42%, rgba(204, 173, 148, 0.35), transparent 45%),
    #e7d9cc;
}

.home-hero-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.home-hero-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      var(--home-cream) 0%,
      rgba(248, 243, 237, 0.98) 8%,
      rgba(248, 243, 237, 0.86) 22%,
      rgba(248, 243, 237, 0.28) 47%,
      rgba(248, 243, 237, 0) 66%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05),
      rgba(61, 38, 25, 0.08)
    );
}

/* SOBRE */
.home-about {
  padding: clamp(80px, 10vw, 150px) clamp(24px, 6vw, 96px);
  background:
    radial-gradient(circle at 84% 20%, rgba(194, 155, 126, 0.12), transparent 28%),
    var(--home-paper);
}

.home-about-inner {
  width: min(1450px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(64px, 8vw, 132px);
}

.about-collage {
  position: relative;
  min-height: 720px;
}

.about-image {
  position: absolute;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.9);
  background:
    linear-gradient(135deg, #e7d8ca, #c7a98f);
  box-shadow: var(--home-shadow);
}

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

.about-image.image-fallback::after {
  content: "Studio SZ";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(75, 45, 29, 0.56);
  font-family: var(--home-display);
  font-size: 2rem;
}

.about-image-main {
  inset: 0 18% 0 0;
  border-radius: 28px;
}

.about-image-main img {
  object-position: center top;
}

.about-image-work {
  width: 39%;
  height: 38%;
  top: 17%;
  right: 0;
  border-radius: 24px;
}

.about-image-detail {
  width: 31%;
  height: 35%;
  right: 7%;
  bottom: 6%;
  border-radius: 22px;
}

.about-content h2,
.students-copy h2,
.testimonials-header h2 {
  margin: 22px 0 24px;
  color: var(--home-ink);
  font-family: var(--home-display);
  font-size: clamp(3.4rem, 5.2vw, 6.6rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.about-content h2 em,
.students-copy h2 em,
.testimonials-header h2 em {
  color: var(--home-brown);
  font-weight: 400;
}

.about-content .section-thread,
.students-copy .section-thread {
  margin: 0 0 30px;
}

.about-intro {
  max-width: 690px;
  margin: 0;
  color: var(--home-muted);
  font-size: 1.09rem;
  line-height: 1.8;
}

.founder-card {
  margin: 34px 0 26px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 26px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--home-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 18px 44px rgba(92, 57, 37, 0.06);
}

.founder-avatar {
  height: 150px;
  overflow: hidden;
  border-radius: 38% 38% 30% 30%;
  background: #e2d1c2;
}

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

.founder-card h3 {
  margin: 0;
  color: var(--home-brown);
  font-family: var(--home-display);
  font-size: 2rem;
  font-style: italic;
  font-weight: 500;
}

.founder-card span {
  display: block;
  margin: 4px 0 14px;
  color: var(--home-brown-soft);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.founder-card p {
  margin: 0;
  color: var(--home-muted);
  line-height: 1.65;
}

.about-content blockquote {
  margin: 0 0 30px;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--home-brown);
  color: var(--home-brown);
  font-family: var(--home-display);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-style: italic;
  line-height: 1.28;
}

/* ALUNOS */
.students-section {
  padding: clamp(86px, 10vw, 150px) clamp(24px, 6vw, 96px);
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.58), transparent 46%),
    var(--home-cream-2);
}

.students-inner {
  width: min(1500px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(56px, 7vw, 112px);
}

.students-copy p {
  max-width: 560px;
  margin: 0 0 32px;
  color: var(--home-muted);
  font-size: 1.08rem;
  line-height: 1.75;
}

.students-carousel {
  min-width: 0;
}

.students-viewport {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 28px 4px 28px;
}

.students-viewport::-webkit-scrollbar {
  display: none;
}

.students-card {
  position: relative;
  flex: 0 0 clamp(240px, 23vw, 340px);
  aspect-ratio: 0.72;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.85);
  border-radius: 28px;
  background: linear-gradient(135deg, #dbc6b5, #a9856c);
  box-shadow: 0 24px 48px rgba(79, 48, 31, 0.15);
  scroll-snap-align: start;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.students-card:nth-child(2n) {
  transform: translateY(-20px);
}

.students-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 56px rgba(79, 48, 31, 0.2);
}

.students-card:nth-child(2n):hover {
  transform: translateY(-28px);
}

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

.students-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(84, 52, 34, 0.08);
}

.students-card.image-fallback::before {
  content: "Studio SZ";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--home-display);
  font-size: 2rem;
}

.students-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 8px;
}

.carousel-control {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(112, 67, 41, 0.38);
  border-radius: 50%;
  color: var(--home-brown-dark);
  background: rgba(255, 255, 255, 0.66);
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.carousel-control:hover {
  color: #fff;
  border-color: var(--home-brown);
  background: var(--home-brown);
  transform: translateY(-2px);
}

.carousel-control svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.carousel-dot {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(126, 86, 62, 0.22);
  transition:
    width 180ms ease,
    background 180ms ease;
}

.carousel-dot.active {
  width: 28px;
  background: var(--home-brown);
}

.students-caption {
  max-width: 620px;
  margin: 18px auto 0;
  color: #7b675b;
  font-family: var(--home-sans);
  font-size: 0.92rem;
  line-height: 1.6;
  text-align: center;
}

/* DEPOIMENTOS */
.testimonials-section {
  padding: clamp(90px, 10vw, 150px) clamp(24px, 6vw, 96px);
  background:
    radial-gradient(circle at 15% 86%, rgba(193, 152, 120, 0.13), transparent 25%),
    var(--home-paper);
}

.testimonials-inner {
  width: min(1380px, 100%);
  margin: 0 auto;
}

.testimonials-header {
  max-width: 870px;
}

.testimonials-header h2 {
  margin-bottom: 20px;
}

.testimonials-header p {
  max-width: 650px;
  margin: 0;
  color: var(--home-muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 48px;
}

.testimonial-card {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--home-line);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 20px 50px rgba(80, 49, 31, 0.08);
}

.testimonial-top {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 16px;
  align-items: center;
}

.testimonial-avatar {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background:
    linear-gradient(135deg, #bb8968, #795039);
  font-family: var(--home-display);
  font-size: 1.25rem;
}

.testimonial-person h3 {
  margin: 0 0 6px;
  color: var(--home-brown);
  font-family: var(--home-display);
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 500;
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  color: #9b5d37;
  font-size: 0.88rem;
}

.testimonial-time {
  color: #8b7c72;
  font-size: 0.72rem;
  white-space: nowrap;
}

.testimonial-divider {
  height: 1px;
  margin: 22px 0 20px;
  background: var(--home-line);
}

.testimonial-card > p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--home-muted);
  font-size: 1rem;
  line-height: 1.72;
}

.testimonial-quote {
  position: absolute;
  right: 20px;
  bottom: -50px;
  color: rgba(139, 79, 45, 0.07);
  font-family: Georgia, serif;
  font-size: 12rem;
  line-height: 1;
}

.testimonials-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 34px;
  margin-top: 34px;
  color: var(--home-brown-soft);
  font-family: var(--home-display);
  font-size: 1.15rem;
}

/* CONTATO */
.contact-section {
  background: #f5eee6;
}

.contact-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
  padding:
    clamp(64px, 7vw, 105px)
    clamp(24px, 8vw, 132px);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(148, 86, 49, 0.95), rgba(80, 43, 25, 0.98)),
    #6e3e25;
}

.contact-cta h2 {
  max-width: 920px;
  margin: 18px 0 16px;
  font-family: var(--home-display);
  font-size: clamp(2.8rem, 4.8vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.contact-cta p {
  max-width: 700px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.04rem;
  line-height: 1.65;
}

.contact-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 280px;
}

.contact-light-button {
  color: var(--home-brown-dark);
  background: #fff8f0;
}

.contact-outline-button {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: transparent;
}

.contact-outline-button:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.contact-details {
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 76px 0;
}

.contact-card {
  min-height: 265px;
  padding: 32px 42px;
  border-right: 1px solid rgba(77, 49, 33, 0.18);
  text-align: center;
}

.contact-card:last-child {
  border-right: 0;
}

.contact-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  color: var(--home-brown);
}

.contact-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.contact-card h3 {
  margin: 0 0 18px;
  color: var(--home-ink);
  font-family: var(--home-display);
  font-size: 1.8rem;
  font-weight: 500;
}

.contact-card p,
.contact-card address {
  margin: 0 0 18px;
  color: var(--home-muted);
  font-style: normal;
  line-height: 1.75;
}

.contact-card a {
  color: var(--home-brown);
  font-weight: 700;
  text-decoration: none;
}

.contact-card a:hover {
  color: var(--home-brown-dark);
  text-decoration: underline;
}

/* RODAPÉ */
.home-footer {
  min-height: 120px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 38px;
  padding: 28px clamp(24px, 6vw, 96px);
  color: rgba(255, 255, 255, 0.74);
  background: #2f211a;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-family: var(--home-display);
  letter-spacing: 0.14em;
}

.footer-monogram {
  font-size: 1.8rem;
  letter-spacing: -0.1em;
}

.footer-divider {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.35);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
}

.footer-links a:hover {
  color: #fff;
}

.home-footer p {
  margin: 0;
  font-size: 0.77rem;
  text-align: right;
}

/* ANIMAÇÃO */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 650ms ease,
    transform 650ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .students-viewport {
    scroll-behavior: auto;
  }
}

/* RESPONSIVO */
@media (max-width: 1180px) {
  .home-hero-copy {
    padding-left: 48px;
  }

  .home-hero-copy h1 {
    font-size: clamp(3.7rem, 7.2vw, 6.2rem);
  }

  .home-about-inner,
  .students-inner {
    gap: 58px;
  }

  .about-collage {
    min-height: 620px;
  }

  .founder-card {
    grid-template-columns: 118px 1fr;
  }

  .founder-avatar {
    height: 125px;
  }

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

  .testimonial-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 650px);
    justify-self: center;
  }

  .home-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .home-footer p {
    text-align: center;
  }
}

@media (max-width: 900px) {
  .home-hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .home-hero-copy {
    min-height: 680px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 90px 32px;
  }

  .home-hero-copy h1 {
    max-width: 610px;
  }

  .home-hero-visual {
    inset: 0;
  }

  .home-hero-fade {
    background:
      linear-gradient(
        90deg,
        rgba(248, 243, 237, 0.98) 0%,
        rgba(248, 243, 237, 0.94) 47%,
        rgba(248, 243, 237, 0.46) 78%,
        rgba(248, 243, 237, 0.2) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05),
        rgba(61, 38, 25, 0.08)
      );
  }

  .home-about-inner,
  .students-inner {
    grid-template-columns: 1fr;
  }

  .about-collage {
    width: min(100%, 720px);
    min-height: 680px;
    margin: 0 auto;
  }

  .students-copy {
    max-width: 720px;
  }

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

  .contact-cta-actions {
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .contact-light-button,
  .contact-outline-button {
    flex: 1 1 250px;
  }

  .contact-details {
    grid-template-columns: 1fr;
  }

  .contact-card {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(77, 49, 33, 0.18);
  }

  .contact-card:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 680px) {
  .home-primary-button,
  .home-secondary-button,
  .contact-light-button,
  .contact-outline-button {
    width: 100%;
    min-height: 52px;
    padding-inline: 18px;
  }

  .home-hero-copy {
    min-height: 640px;
    padding: 76px 22px 62px;
  }

  .home-hero-copy h1 {
    margin-top: 20px;
    font-size: clamp(3.45rem, 16vw, 5.6rem);
  }

  .home-hero-visual {
    inset: 32% -38% 0 18%;
  }

  .home-hero-fade {
    background:
      linear-gradient(
        180deg,
        var(--home-cream) 0%,
        rgba(248, 243, 237, 0.96) 36%,
        rgba(248, 243, 237, 0.62) 68%,
        rgba(248, 243, 237, 0.18) 100%
      );
  }

  .home-about,
  .students-section,
  .testimonials-section {
    padding-inline: 20px;
  }

  .about-collage {
    min-height: 500px;
  }

  .about-image-main {
    inset: 0 13% 0 0;
  }

  .about-image-work {
    width: 42%;
    height: 35%;
    top: 12%;
  }

  .about-image-detail {
    width: 36%;
    height: 34%;
    right: 3%;
  }

  .about-content h2,
  .students-copy h2,
  .testimonials-header h2 {
    font-size: clamp(3.1rem, 15vw, 5rem);
  }

  .founder-card {
    grid-template-columns: 1fr;
  }

  .founder-avatar {
    width: 118px;
  }

  .students-card {
    flex-basis: min(78vw, 300px);
  }

  .students-card:nth-child(2n),
  .students-card:nth-child(2n):hover {
    transform: none;
  }

  .students-card:hover {
    transform: none;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-card:last-child {
    grid-column: auto;
    width: 100%;
  }

  .testimonial-top {
    grid-template-columns: 56px 1fr;
  }

  .testimonial-time {
    grid-column: 2;
  }

  .testimonials-footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .contact-cta {
    padding-inline: 20px;
  }

  .contact-cta-actions {
    flex-direction: column;
  }

  .contact-details {
    width: min(100% - 32px, 1380px);
  }

  .contact-card {
    padding-inline: 16px;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 18px 24px;
  }
}

/* pages/NotFound.css */
.not-found-page {
  position: relative;
  min-height: calc(100svh - 78px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 72px 24px;
  background:
    radial-gradient(circle at 75% 30%, rgba(166, 109, 77, .12), transparent 30%),
    #faf7f2;
}

.not-found-content {
  position: relative;
  z-index: 2;
  width: min(620px, 100%);
  text-align: center;
}

.not-found-label {
  display: block;
  margin-bottom: 18px;
  color: #8b4f2d;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.not-found-content h1 {
  margin: 0;
  color: var(--clr-text, #2d211b);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(3rem, 7vw, 5.8rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .98;
}

.not-found-content p {
  max-width: 510px;
  margin: 26px auto 0;
  color: var(--clr-muted, #6f625b);
  font-size: 1rem;
  line-height: 1.75;
}

.not-found-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.not-found-primary,
.not-found-secondary {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 24px;
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.not-found-primary {
  border: 1px solid #8b4f2d;
  color: #fff;
  background: #8b4f2d;
  box-shadow: 0 14px 28px rgba(91, 52, 35, .18);
}

.not-found-secondary {
  border: 1px solid rgba(91, 52, 35, .28);
  color: #5b3423;
  background: transparent;
}

.not-found-primary:hover,
.not-found-secondary:hover {
  transform: translateY(-2px);
}

.not-found-secondary:hover {
  background: rgba(139, 79, 45, .07);
}

.not-found-number {
  position: absolute;
  right: -2vw;
  bottom: -10vw;
  color: rgba(139, 79, 45, .045);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(15rem, 34vw, 34rem);
  line-height: .8;
  user-select: none;
}

@media (max-width: 560px) {
  .not-found-page {
    min-height: calc(100svh - 72px);
    padding-inline: 20px;
  }

  .not-found-actions {
    flex-direction: column;
  }

  .not-found-primary,
  .not-found-secondary {
    width: 100%;
  }
}

/* pages/Pagamento.css */
/* Pagamento.css */
.payment-page {
  min-height: 80vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px; gap: 16px;
}
.payment-icon {
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; margin-bottom: 8px;
}
.payment-icon.success { background: #e8f5e9; color: var(--clr-success); }
.payment-icon.fail    { background: #fdf0ee; color: var(--clr-danger); }
.payment-icon.pending { background: #fff8e1; color: #f59e0b; }
.payment-page h1 { font-family: var(--font-display); font-size: 2.2rem; font-weight: 400; }
.payment-page p  { color: var(--clr-muted); max-width: 400px; }
.payment-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }


/* pages/Perfil.css */
.perfil-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #fbf8f5 0%, #f7f2ee 100%);
  color: #2f2824;
}

.perfil-cover {
  width: 100%;
  height: 210px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.cover-edit-btn {
  position: absolute;
  right: 28px;
  top: 24px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  backdrop-filter: blur(10px);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.perfil-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px 70px;
}

.perfil-header {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 28px;
  align-items: center;
  margin-top: -70px;
  padding-bottom: 38px;
  position: relative;
}

.perfil-header::after {
  content: "";
  position: absolute;
  left: 160px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(141,105,83,.45),
    rgba(141,105,83,.08),
    transparent
  );
}

.perfil-avatar-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  z-index: 2;
}

.perfil-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #a58672;
  border: 6px solid #fff;
  object-fit: cover;
  box-shadow: 0 18px 45px rgba(70, 42, 25, .2);
}

.perfil-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 4.8rem;
  color: white;
}

.avatar-edit-btn {
  position: absolute;
  right: 9px;
  bottom: 12px;

  width: 38px;
  height: 38px;
  border-radius: 999px;

  background: #7d5b48;
  color: #fff;
  border: 4px solid #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-bottom: 2px;

  font-size: 24px;
  font-weight: 800;
  cursor: pointer;
}

.perfil-info {
  background: transparent;
  padding-top: 86px;
  padding-bottom: 0;
}

.perfil-info h1 {
  margin: 0 0 8px;
  font-size: 2.35rem;
  font-weight: 900;
  color: #2e2926;
  text-shadow: none;
}

.perfil-username {
  color: #776c65;
  font-size: 1rem;
  text-shadow: none;
}

.perfil-meta {
  margin-top: 16px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: #6f655e;
  font-size: 14px;
  text-shadow: none;
}

.edit-profile-btn {
  margin-top: 72px;
  border: 1px solid #e7dcd4;
  background: #fff;
  color: #7b5d4a;
  padding: 13px 22px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
}

.perfil-tabs {
  display: flex;
  gap: 12px;
  margin-top: 34px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}

.perfil-tab {
  border: 1px solid #e9ddd5;
  background: #fff;
  color: #7c6557;
  padding: 12px 20px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 800;
}

.perfil-tab.active {
  background: #7d5b48;
  color: #fff;
  border-color: #7d5b48;
}

.perfil-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.perfil-empty {
  background: #fff;
  border: 1px solid #eaded6;
  border-radius: 22px;
  padding: 60px 40px 72px;
  text-align: center;
  overflow: hidden;
}

.empty-illustration {
  width: 400px;
  height: 400px;
  object-fit: contain;
  display: block;
  margin: 0 auto 28px;
}

.perfil-empty h2 {
  margin: 0 0 14px;
  font-size: 2rem;
  font-weight: 900;
  color: #1f1f1f;
}

.perfil-empty p {
  color: #7d736d;
  max-width: 560px;
  margin: 0 auto 24px;
  line-height: 1.7;
}

.btn-primary {
  border: none;
  background: #7d5b48;
  color: white;
  padding: 14px 24px;
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.btn-ghost {
  border: 1px solid #e6d8cf;
  background: #fff;
  color: #6d5345;
  padding: 11px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
}

.btn-danger {
  border: none;
  background: #c64848;
  color: white;
  padding: 12px 18px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
}

.course-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #eaded6;
}

.course-thumb {
  height: 180px;
  position: relative;
  overflow: hidden;
}

.course-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d8c3b6, #b59078);
}

.owned-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255,255,255,.92);
  color: #6b4d3d;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.course-info {
  padding: 22px;
}

.course-cat {
  color: #9c8374;
  font-size: 13px;
  font-weight: 800;
}

.course-info h3 {
  margin: 12px 0 18px;
  font-size: 1.25rem;
}

.perfil-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.benefit-card {
  background: #fff;
  border: 1px solid #eaded6;
  border-radius: 18px;
  padding: 28px 26px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 118px;
}

.benefit-card img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  opacity: .98;
  flex-shrink: 0;
}

.benefit-card h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 900;
}

.benefit-card p {
  margin: 0;
  color: #7d736d;
  line-height: 1.6;
  font-size: 14px;
}

.perfil-panel {
  background: #fff;
  border: 1px solid #eaded6;
  border-radius: 24px;
  padding: 32px;
}

.perfil-panel h2 {
  margin-top: 0;
}

.bookings-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.booking-card {
  border: 1px solid #eee1d8;
  border-radius: 18px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.booking-card span {
  display: block;
  color: #7b7069;
  margin-top: 4px;
}

.chat-box {
  border: 1px solid #eadfd8;
  border-radius: 22px;
  overflow: hidden;
}

.chat-messages {
  height: 420px;
  overflow-y: auto;
  padding: 24px;
  background: #f8f3ef;
}

.chat-msg {
  max-width: 72%;
  padding: 14px 16px;
  border-radius: 18px;
  margin-bottom: 14px;
}

.chat-msg.mine {
  margin-left: auto;
  background: #7d5b48;
  color: white;
}

.chat-msg.theirs {
  background: white;
  border: 1px solid #eaded6;
}

.chat-msg p {
  margin: 0 0 6px;
}

.chat-msg span {
  font-size: 12px;
  opacity: .7;
}

.chat-input-row {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: white;
}

.chat-input-row input {
  flex: 1;
  border: 1px solid #e7dad2;
  border-radius: 14px;
  padding: 14px;
  outline: none;
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field label {
  font-weight: 800;
}

.field input,
.field textarea {
  border: 1px solid #e7dad2;
  border-radius: 14px;
  padding: 14px;
  outline: none;
  font-size: 15px;
  resize: vertical;
}

.simple-empty {
  text-align: center;
  padding: 40px;
  color: #7d736d;
}

.toast-container {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
}

.toast {
  background: #2d2d2d;
  color: white;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 700;
}

.toast.error {
  background: #b83b3b;
}

@media (max-width: 860px) {
  .perfil-cover {
    height: 190px;
  }

  .perfil-shell {
    padding: 0 18px 60px;
  }

  .perfil-header {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    margin-top: -64px;
    gap: 12px;
  }

  .perfil-header::after {
    left: 0;
  }

  .perfil-avatar-wrap {
    width: 142px;
    height: 142px;
  }

  .perfil-avatar {
    width: 142px;
    height: 142px;
  }

  .perfil-info {
    padding-top: 0;
  }

  .perfil-info h1 {
    font-size: 2rem;
  }

  .perfil-meta {
    justify-content: center;
  }

  .edit-profile-btn {
    margin-top: 4px;
  }

  .perfil-benefits {
    grid-template-columns: 1fr;
  }

  .benefit-card img {
    width: 92px;
    height: 92px;
  }

  .empty-illustration {
    width: 160px;
    height: 160px;
  }

  .booking-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .chat-msg {
    max-width: 100%;
  }
}
/* ── Documentos de cursos e pedidos físicos ───────────────── */
.course-documents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 12px 0 18px;
  color: #756a64;
  font-size: 12px;
  line-height: 1.5;
}

.course-documents a,
.perfil-order-links a {
  color: #7d5b48;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.invoice-pending {
  color: #9a7f6d;
}

.perfil-orders-section {
  margin-top: 42px;
  padding-top: 34px;
  border-top: 1px solid #e7d9d0;
}

.perfil-orders-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.perfil-orders-heading span {
  color: #9b6d5a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.perfil-orders-heading h2 {
  margin: 6px 0 0;
  font-family: Georgia, serif;
  font-size: 2rem;
  color: #2e2926;
}

.perfil-orders-heading small {
  color: #7d736d;
  font-weight: 800;
}

.perfil-orders-empty {
  border: 1px dashed #ddcdc2;
  border-radius: 18px;
  background: rgba(255, 255, 255, .55);
}

.perfil-orders-list {
  display: grid;
  gap: 16px;
}

.perfil-order-card {
  padding: 22px;
  border: 1px solid #eaded6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(74, 48, 33, .05);
}

.perfil-order-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.perfil-order-card header span {
  color: #9b6d5a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.perfil-order-card h3 {
  margin: 5px 0 0;
  font-size: 1.08rem;
  color: #302823;
}

.perfil-order-card header > strong {
  color: #7d5b48;
  white-space: nowrap;
}

.perfil-order-meta,
.perfil-order-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  color: #746a64;
  font-size: 13px;
}

.perfil-order-meta span:first-child {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  color: #72503d;
  background: #f2e8e0;
  font-weight: 900;
}

@media (max-width: 620px) {
  .perfil-orders-heading,
  .perfil-order-card header {
    align-items: flex-start;
    flex-direction: column;
  }

  .perfil-order-card header > strong {
    white-space: normal;
  }
}


/* pages/PrivateLabel.css */
/* ============================================================
   STUDIO SZ — PRIVATE LABEL
   ============================================================ */

.pl-page {
  --pl-bg: #f8f3ed;
  --pl-surface: #fffdf9;
  --pl-paper: #f1e7dd;
  --pl-text: #201b18;
  --pl-muted: #72675f;
  --pl-copper: #9b4f29;
  --pl-copper-dark: #75391d;
  --pl-line: rgba(100, 70, 51, 0.16);

  overflow-x: hidden;

  color: var(--pl-text);
  background: var(--pl-surface);
}


/* ============================================================
   ELEMENTOS GERAIS
   ============================================================ */

.pl-kicker {
  display: inline-flex;

  align-items: center;

  gap: 14px;

  color: var(--pl-copper);

  font-size: 0.72rem;
  font-weight: 800;

  letter-spacing: 0.24em;

  line-height: 1;

  text-transform: uppercase;
}

.pl-kicker::after {
  content: '';

  width: 48px;
  height: 1px;

  background: currentColor;

  opacity: 0.42;
}


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

.pl-hero {
  width: 100%;

  min-height: min(760px, calc(100vh - 88px));

  display: grid;

  grid-template-columns:
    minmax(0, 0.91fr)
    minmax(520px, 1.09fr);

  align-items: stretch;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 16% 10%,
      rgba(184, 111, 69, 0.09),
      transparent 25%
    ),
    linear-gradient(
      110deg,
      #fbf8f4 0%,
      #f8f3ed 55%,
      #f5eee7 100%
    );

  border-bottom: 1px solid var(--pl-line);
}


/* TEXTO DO HERO */

.pl-hero-copy {
  width: min(720px, 100%);

  justify-self: end;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    clamp(72px, 8vw, 118px)
    clamp(44px, 6vw, 94px)
    clamp(72px, 8vw, 118px)
    clamp(26px, 5vw, 80px);
}

.pl-hero-copy h1 {
  max-width: 780px;

  margin: 25px 0 26px;

  font-family:
    var(--font-display, 'Cormorant Garamond'),
    Georgia,
    serif;

  font-size: clamp(4.35rem, 6.7vw, 7.15rem);

  font-weight: 400;

  letter-spacing: -0.055em;

  line-height: 0.79;
}

.pl-hero-copy h1 em {
  display: block;

  margin-top: 0.11em;

  color: var(--pl-copper);

  font-weight: 400;

  line-height: 0.88;
}

.pl-hero-text {
  max-width: 635px;

  color: var(--pl-muted);

  font-size: clamp(0.98rem, 1.12vw, 1.12rem);

  line-height: 1.8;
}


/* BOTÃO */

.pl-hero-actions {
  width: min(530px, 100%);

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  margin-top: 34px;
}

.pl-primary-button {
  min-width: min(325px, 100%);
  min-height: 58px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 0 30px;

  border: 1px solid rgba(93, 42, 19, 0.08);

  border-radius: 7px;

  color: #fffaf6;

  background:
    linear-gradient(
      135deg,
      #a5542d,
      #86411f
    );

  box-shadow:
    0 16px 32px rgba(109, 54, 28, 0.18);

  font-family:
    var(--font-display, 'Cormorant Garamond'),
    Georgia,
    serif;

  font-size: 1.22rem;

  font-weight: 500;

  text-align: center;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.pl-primary-button:hover {
  transform: translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #944823,
      #713417
    );

  box-shadow:
    0 19px 36px rgba(109, 54, 28, 0.24);
}

.pl-primary-button[aria-disabled='true'],
.pl-contact-button[aria-disabled='true'] {
  pointer-events: none;

  opacity: 0.72;
}

.pl-hero-note {
  margin-top: 11px;

  color: #9b9088;

  font-size: 0.72rem;

  letter-spacing: 0.01em;
}


/* IMAGEM DO HERO */

.pl-hero-visual {
  position: relative;

  min-width: 0;
  min-height: 620px;

  overflow: hidden;

  background: #f6efe7;
}

.pl-hero-visual img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transform: scale(1.015);
}


/*
  Pequena integração visual entre texto e foto.
  Não cria margem e não mostra borda da imagem.
*/

.pl-hero-visual::after {
  content: '';

  position: absolute;

  inset:
    0
    auto
    0
    0;

  width: 80px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(248, 243, 237, 0.32),
      transparent
    );
}


/* ============================================================
   BENEFÍCIOS
   ============================================================ */

.pl-benefits {
  padding:
    0
    clamp(24px, 5vw, 76px);

  background: #fffdf9;
}

.pl-benefits-inner {
  width: min(1380px, 100%);

  margin: 0 auto;

  display: grid;

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

  border-bottom:
    1px solid var(--pl-line);
}

.pl-benefit {
  min-height: 180px;

  display: grid;

  grid-template-columns:
    38px
    1fr;

  gap: 14px;

  align-items: center;

  padding:
    34px
    clamp(24px, 3.1vw, 48px);

  border-right:
    1px solid var(--pl-line);
}

.pl-benefit:last-child {
  border-right: 0;
}

.pl-benefit-number {
  align-self: start;

  margin-top: 7px;

  color: #b79c8c;

  font-family:
    var(--font-display, Georgia),
    serif;

  font-size: 0.92rem;
}

.pl-benefit h2 {
  margin-bottom: 7px;

  font-family:
    var(--font-display, Georgia),
    serif;

  font-size:
    clamp(1.65rem, 2vw, 2rem);

  font-weight: 500;

  letter-spacing: -0.025em;

  line-height: 1.05;
}

.pl-benefit p {
  max-width: 340px;

  color: #7c7068;

  font-size: 0.85rem;

  line-height: 1.65;
}


/* ============================================================
   INTRODUÇÃO
   ============================================================ */

.pl-intro {
  width:
    min(1220px, calc(100% - 48px));

  margin: 0 auto;

  display: grid;

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

  gap:
    clamp(60px, 9vw, 130px);

  padding:
    clamp(100px, 10vw, 156px)
    0;
}

.pl-section-heading h2,
.pl-process-head h2,
.pl-possibilities-heading h2,
.pl-contact h2 {
  margin-top: 18px;

  font-family:
    var(--font-display, 'Cormorant Garamond'),
    Georgia,
    serif;

  font-size:
    clamp(3rem, 4.8vw, 5.2rem);

  font-weight: 400;

  letter-spacing: -0.045em;

  line-height: 0.94;
}

.pl-intro-copy {
  align-self: end;

  display: grid;

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

  gap: 34px;
}

.pl-intro-copy p {
  color: var(--pl-muted);

  font-size: 0.95rem;

  line-height: 1.9;
}


/* ============================================================
   PROCESSO
   ============================================================ */

.pl-process {
  position: relative;

  overflow: hidden;

  padding:
    clamp(100px, 9vw, 145px)
    clamp(24px, 6vw, 92px);

  color: #fdf9f5;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(167, 81, 43, 0.24),
      transparent 32%
    ),
    radial-gradient(
      circle at 8% 100%,
      rgba(127, 61, 33, 0.14),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #271b16 0%,
      #302019 50%,
      #40261b 100%
    );
}

.pl-process .pl-kicker {
  color: #d99672;
}

.pl-process-head {
  position: relative;

  z-index: 1;

  width: min(1220px, 100%);

  margin:
    0
    auto
    clamp(55px, 6vw, 86px);

  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(280px, 0.65fr);

  align-items: end;

  gap: 70px;
}

.pl-process-head h2 {
  max-width: 720px;

  color: #fffaf7;
}

.pl-process-head > p {
  max-width: 450px;

  justify-self: end;

  color: #c7b8ae;

  font-size: 0.92rem;

  line-height: 1.8;
}


/* ETAPAS */

.pl-steps {
  position: relative;

  z-index: 1;

  width: min(1220px, 100%);

  margin: 0 auto;

  display: grid;

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

  gap: 16px;
}

.pl-step {
  position: relative;

  min-height: 340px;

  display: flex;
  flex-direction: column;

  padding: 32px 30px 35px;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.1);

  border-radius: 8px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.022)
    );

  transition:
    transform 250ms ease,
    border-color 250ms ease,
    background 250ms ease,
    box-shadow 250ms ease;
}

.pl-step::before {
  content: '';

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      #d78d66,
      rgba(215, 141, 102, 0)
    );
}

.pl-step:hover {
  transform: translateY(-7px);

  border-color:
    rgba(222, 145, 103, 0.3);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.095),
      rgba(150, 72, 38, 0.1)
    );

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.12);
}

.pl-step-number {
  display: block;

  margin-bottom: auto;

  color: #d9916c;

  font-family:
    var(--font-display, Georgia),
    serif;

  font-size: 2.9rem;

  line-height: 1;
}

.pl-step h3 {
  margin:
    64px
    0
    14px;

  color: #fffaf6;

  font-family:
    var(--font-display, Georgia),
    serif;

  font-size: 1.85rem;

  font-weight: 500;

  line-height: 1.08;
}

.pl-step p {
  color: #c6b6ab;

  font-size: 0.83rem;

  line-height: 1.75;
}


/* ============================================================
   POSSIBILIDADES
   ============================================================ */

.pl-possibilities {
  padding:
    clamp(100px, 10vw, 152px)
    clamp(24px, 6vw, 92px);

  background:
    linear-gradient(
      180deg,
      #fffdf9 0%,
      #faf5ef 100%
    );
}

.pl-possibilities-heading {
  width: min(1220px, 100%);

  margin:
    0
    auto
    clamp(55px, 6vw, 84px);

  display: grid;

  grid-template-columns:
    0.65fr
    1.35fr;

  gap: 60px;

  align-items: start;
}

.pl-possibilities-heading h2 {
  max-width: 850px;

  margin-top: 0;
}

.pl-possibilities-grid {
  width: min(1220px, 100%);

  margin: 0 auto;

  display: grid;

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

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

  border-bottom:
    1px solid var(--pl-line);
}

.pl-possibility {
  min-height: 320px;

  padding:
    42px
    clamp(25px, 3vw, 44px)
    48px;

  border-right:
    1px solid var(--pl-line);
}

.pl-possibility:last-child {
  border-right: 0;
}

.pl-possibility > span {
  color: var(--pl-copper);

  font-size: 0.66rem;

  font-weight: 800;

  letter-spacing: 0.2em;

  text-transform: uppercase;
}

.pl-possibility h3 {
  max-width: 310px;

  margin:
    54px
    0
    17px;

  font-family:
    var(--font-display, Georgia),
    serif;

  font-size: 2.05rem;

  font-weight: 500;

  letter-spacing: -0.025em;

  line-height: 1.05;
}

.pl-possibility p {
  color: var(--pl-muted);

  font-size: 0.86rem;

  line-height: 1.75;
}


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

.pl-contact {
  min-height: 430px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 60px;

  padding:
    clamp(76px, 8vw, 122px)
    clamp(24px, 8vw, 128px);

  color: #fff;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(166, 85, 44, 0.28),
      transparent 30%
    ),
    #34241d;
}

.pl-contact .pl-kicker {
  color: #d59775;
}

.pl-contact h2 {
  max-width: 760px;

  color: #fffaf6;
}

.pl-contact-copy > p {
  max-width: 650px;

  margin-top: 21px;

  color: #c6b6ac;

  line-height: 1.75;
}

.pl-contact-button {
  min-width: 265px;
  min-height: 62px;

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    0
    30px;

  border:
    1px solid rgba(255, 255, 255, 0.32);

  border-radius: 6px;

  color: #fff;

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-align: center;

  text-transform: uppercase;

  transition:
    color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.pl-contact-button:hover {
  transform: translateY(-2px);

  color: #33231c;

  background: #fffaf5;
}


/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1120px) {

  .pl-hero {
    grid-template-columns:
      minmax(0, 0.92fr)
      minmax(430px, 1.08fr);
  }

  .pl-hero-copy {
    padding-right: 44px;
  }

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

}


@media (max-width: 920px) {

  .pl-hero {
    min-height: auto;

    grid-template-columns: 1fr;
  }

  .pl-hero-copy {
    width: min(760px, 100%);

    justify-self: center;

    padding:
      78px
      28px
      62px;
  }

  .pl-hero-copy h1 {
    font-size:
      clamp(4rem, 11.5vw, 6.5rem);
  }

  .pl-hero-visual {
    min-height: 650px;
  }

  .pl-hero-visual::after {
    inset:
      0
      0
      auto
      0;

    width: 100%;
    height: 60px;

    background:
      linear-gradient(
        180deg,
        rgba(248, 243, 237, 0.3),
        transparent
      );
  }

  .pl-benefits-inner {
    grid-template-columns: 1fr;
  }

  .pl-benefit {
    min-height: 138px;

    border-right: 0;

    border-bottom:
      1px solid var(--pl-line);
  }

  .pl-benefit:last-child {
    border-bottom: 0;
  }

  .pl-intro,
  .pl-process-head,
  .pl-possibilities-heading {
    grid-template-columns: 1fr;
  }

  .pl-intro {
    gap: 42px;
  }

  .pl-process-head {
    gap: 34px;
  }

  .pl-process-head > p {
    justify-self: start;
  }

  .pl-possibilities-heading {
    gap: 28px;
  }

  .pl-possibilities-grid {
    grid-template-columns: 1fr;
  }

  .pl-possibility {
    min-height: auto;

    border-right: 0;

    border-bottom:
      1px solid var(--pl-line);
  }

  .pl-possibility:last-child {
    border-bottom: 0;
  }

  .pl-possibility h3 {
    margin-top: 35px;
  }

  .pl-contact {
    align-items: flex-start;

    flex-direction: column;
  }

}


@media (max-width: 620px) {

  .pl-kicker {
    font-size: 0.64rem;

    letter-spacing: 0.2em;
  }

  .pl-kicker::after {
    width: 34px;
  }

  .pl-hero-copy {
    padding:
      58px
      20px
      48px;
  }

  .pl-hero-copy h1 {
    margin-top: 21px;

    font-size:
      clamp(3.8rem, 18vw, 5.2rem);

    line-height: 0.82;
  }

  .pl-primary-button {
    width: 100%;

    min-width: 0;
  }

  .pl-hero-visual {
    min-height: 110vw;
    max-height: 650px;
  }

  .pl-hero-visual img {
    object-position: center;
  }

  .pl-benefits {
    padding-inline: 20px;
  }

  .pl-benefit {
    grid-template-columns:
      30px
      1fr;

    padding:
      28px
      8px;
  }

  .pl-intro {
    width: calc(100% - 40px);

    padding:
      82px
      0;
  }

  .pl-intro-copy {
    grid-template-columns: 1fr;

    gap: 22px;
  }

  .pl-section-heading h2,
  .pl-process-head h2,
  .pl-possibilities-heading h2,
  .pl-contact h2 {
    font-size:
      clamp(2.85rem, 13vw, 4.2rem);
  }

  .pl-process {
    padding:
      80px
      20px;
  }

  .pl-steps {
    grid-template-columns: 1fr;
  }

  .pl-step {
    min-height: auto;

    padding:
      30px
      26px
      34px;
  }

  .pl-step-number {
    margin-bottom: 0;
  }

  .pl-step h3 {
    margin-top: 45px;
  }

  .pl-possibilities {
    padding:
      82px
      20px;
  }

  .pl-possibility {
    padding:
      34px
      0
      38px;
  }

  .pl-contact {
    padding:
      78px
      20px;
  }

  .pl-contact-button {
    width: 100%;

    min-width: 0;
  }

}

/* pages/Produtos.css */
.produtos-hero {
  min-height: 340px;
  position: relative;
  background:
    linear-gradient(rgba(42, 28, 20, .45), rgba(42, 28, 20, .45)),
    url('/Gallery/hero-sewing.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  color: #fff;
}

.produtos-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 32, 24, .25);
}

.produtos-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.produtos-hero h1 {
  margin: 10px 0 12px;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 500;
  font-family: Georgia, serif;
}

.produtos-hero p {
  max-width: 560px;
  line-height: 1.7;
  opacity: .95;
}

.produtos-layout {
  width: min(1180px, calc(100% - 40px));
  margin: 60px auto 90px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 34px;
}

.produtos-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.search-box,
.sidebar-filters {
  background: #fff;
  border: 1px solid #eaded6;
  border-radius: 22px;
  padding: 24px;
}

.search-label,
.sidebar-section-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #7d5b48;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.search-input-wrap {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 100%;
  border: 1px solid #eaded6;
  border-radius: 14px;
  padding: 13px 14px;
  outline: none;
  color: #3a302a;
}

.search-clear {
  border: none;
  background: transparent;
  color: #8a6652;
  font-weight: 800;
  cursor: pointer;
}

.filter-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.produtos-sidebar .btn-ghost {
  border: 1px solid #eaded6;
  background: #fff;
  color: #7c6557;
  padding: 12px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 800;
  text-align: left;
}

.produtos-sidebar .btn-ghost.active,
.produtos-sidebar .btn-ghost:hover {
  background: #7d5b48;
  border-color: #7d5b48;
  color: #fff;
}

.produtos-main { min-width: 0; }

.produtos-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.produtos-count {
  color: #7b7069;
  font-weight: 700;
}

.btn-encomenda {
  border: none;
  background: #7d5b48;
  color: #fff;
  padding: 13px 20px;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(80, 52, 34, .16);
  transition: transform .2s ease, background .2s ease;
}

.btn-encomenda:hover {
  background: #6b4d3d;
  transform: translateY(-1px);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.product-card {
  background: #fff;
  border: 1px solid #eaded6;
  border-radius: 24px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(80, 52, 34, .1);
}

.product-card-open {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.product-thumb {
  height: 220px;
  position: relative;
  overflow: hidden;
  background: #f3ebe6;
}

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

.product-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d8c3b6, #b59078);
}

.product-stock-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  border-radius: 999px;
  padding: 7px 11px;
  color: #fff;
  background: rgba(61, 41, 30, .86);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.product-stock-badge.sold-out { background: rgba(141, 50, 45, .9); }

.product-info { padding: 22px; }

.product-cat {
  display: block;
  color: #9c8374;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}

.product-info h3 {
  margin: 0 0 12px;
  color: #2f2824;
  font-size: 1.35rem;
}

.product-info p {
  margin: 0 0 20px;
  color: #7d736d;
  line-height: 1.6;
  font-size: 14px;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.product-footer strong {
  color: #7d5b48;
  font-size: 1.15rem;
}

.btn-order {
  border: none;
  background: #7d5b48;
  color: #fff;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.products-empty {
  min-height: 440px;
  background: #fff;
  border: 1px solid #eaded6;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 50px 32px;
}

.products-empty-img {
  width: 190px;
  height: 190px;
  object-fit: contain;
  margin-bottom: 24px;
  opacity: .95;
}

.products-empty h2 {
  margin: 0 0 12px;
  font-size: 2rem;
  color: #202020;
}

.products-empty p {
  margin: 0 0 24px;
  color: #7d736d;
  max-width: 460px;
  line-height: 1.7;
}

.skeleton { pointer-events: none; }

.skeleton .product-thumb,
.skel-line {
  background: linear-gradient(90deg, #eee5df, #f8f3ef, #eee5df);
  background-size: 200% 100%;
  animation: skel 1.4s infinite;
}

.skel-line {
  height: 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.skel-line.short { width: 50%; }

@keyframes skel {
  to { background-position: -200% 0; }
}

/* Modal de detalhes e checkout */
.product-modal-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  overflow-y: auto;
  padding: 34px;
  background: rgba(29, 19, 14, .72);
  backdrop-filter: blur(8px);
}

.product-modal {
  position: relative;
  width: min(1080px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(420px, 1.15fr);
  overflow: hidden;
  border-radius: 28px;
  background: #fffdfb;
  box-shadow: 0 28px 80px rgba(24, 14, 9, .34);
}

.product-modal-close {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(106, 71, 51, .16);
  border-radius: 50%;
  color: #4d382d;
  background: rgba(255, 255, 255, .92);
  font-size: 26px;
  cursor: pointer;
}

.product-modal-media {
  position: sticky;
  top: 0;
  height: min(820px, calc(100vh - 68px));
  min-height: 620px;
  background: #eaded5;
}

.product-modal-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.product-modal-content {
  padding: 50px clamp(26px, 4vw, 54px);
}

.product-modal-content h2 {
  margin: 2px 0 14px;
  color: #2c231f;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1;
}

.product-modal-description {
  margin: 0 0 24px;
  color: #756962;
  line-height: 1.75;
}

.product-specifications,
.product-option-block,
.delivery-selector,
.shipping-panel,
.purchase-summary {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #eaded6;
}

.product-specifications h3,
.delivery-selector h3,
.product-option-block strong,
.shipping-panel h4,
.delivery-address-form h4 {
  margin: 0 0 14px;
  color: #49372e;
  font-size: 1rem;
}

.product-specifications dl {
  margin: 0;
  display: grid;
  gap: 10px;
}

.product-specifications dl > div {
  display: grid;
  grid-template-columns: minmax(110px, .7fr) 1.3fr;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7f1ec;
}

.product-specifications dt { color: #755642; font-weight: 800; }
.product-specifications dd { margin: 0; color: #756962; }

.product-option-title {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.product-option-title span {
  color: #a54d45;
  font-size: 12px;
  font-weight: 800;
}

.size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.size-option {
  min-width: 94px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid #ddcdc1;
  border-radius: 12px;
  padding: 10px 14px;
  color: #4a3830;
  background: #fff;
  cursor: pointer;
}

.size-option span { font-weight: 900; }
.size-option small { color: #8d7d73; font-size: 10px; }
.size-option.active { border-color: #7d5b48; box-shadow: 0 0 0 2px rgba(125, 91, 72, .13); }
.size-option:disabled { opacity: .42; cursor: not-allowed; }

.product-purchase-line {
  margin-top: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.product-purchase-line > div span,
.quantity-control > span {
  display: block;
  margin-bottom: 6px;
  color: #8c7a70;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.product-purchase-line > div strong {
  display: block;
  color: #744f3b;
  font-size: 1.7rem;
}

.quantity-control select {
  min-width: 88px;
  border: 1px solid #dbcbbf;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}

.product-question-button {
  width: 100%;
  margin-top: 18px;
  border: 1px solid #7d5b48;
  border-radius: 12px;
  padding: 13px 16px;
  color: #7d5b48;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.product-question-button:hover { background: #f6eee9; }

.delivery-selector {
  display: grid;
  gap: 12px;
}

.delivery-option {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid #e1d3c9;
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  transition: border .18s ease, background .18s ease;
}

.delivery-option.active {
  border-color: #7d5b48;
  background: #faf4ef;
}

.delivery-option input { margin-top: 4px; accent-color: #7d5b48; }
.delivery-option strong { display: block; color: #4a372d; }
.delivery-option small { display: block; margin-top: 5px; color: #7d7068; line-height: 1.5; }
.delivery-option em { display: inline-block; margin-top: 8px; font-size: 11px; font-style: normal; font-weight: 900; }
.studio-open { color: #2f7b4b; }
.studio-closed { color: #9a5148; }

.shipping-cep-label {
  display: block;
  color: #5e483c;
  font-size: 13px;
  font-weight: 800;
}

.shipping-cep-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 8px;
}

.shipping-cep-row input,
.delivery-form-grid input {
  width: 100%;
  border: 1px solid #dbcbbf;
  border-radius: 11px;
  padding: 12px 13px;
  outline: none;
  background: #fff;
}

.shipping-cep-row input:focus,
.delivery-form-grid input:focus { border-color: #7d5b48; }

.shipping-cep-row button {
  border: 0;
  border-radius: 11px;
  padding: 0 18px;
  color: #fff;
  background: #7d5b48;
  font-weight: 800;
  cursor: pointer;
}

.shipping-cep-row button:disabled { opacity: .65; cursor: wait; }

.shipping-quotes {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.shipping-quote {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #e0d2c8;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
}

.shipping-quote.active { border-color: #7d5b48; background: #faf4ef; }
.shipping-quote input { accent-color: #7d5b48; }
.shipping-quote strong { display: block; color: #4c392f; font-size: 13px; }
.shipping-quote small { display: block; margin-top: 4px; color: #84756d; font-size: 11px; }
.shipping-quote b { color: #7d5b48; white-space: nowrap; }

.delivery-address-form { margin-top: 24px; }

.delivery-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.delivery-form-grid label {
  color: #67544a;
  font-size: 12px;
  font-weight: 800;
}

.delivery-form-grid label input { margin-top: 6px; }
.delivery-field-wide { grid-column: 1 / -1; }

.purchase-summary {
  display: grid;
  gap: 10px;
}

.purchase-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: #6f6159;
  font-size: 14px;
}

.purchase-summary > div strong { color: #44342c; }

.purchase-summary .purchase-total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed #d8c8bd;
  color: #382a23;
  font-size: 1.1rem;
  font-weight: 900;
}

.purchase-summary .purchase-total strong { color: #7d5b48; font-size: 1.35rem; }

.product-checkout-button {
  width: 100%;
  margin-top: 18px;
  border: 0;
  border-radius: 14px;
  padding: 16px 20px;
  color: #fff;
  background: linear-gradient(135deg, #8f6047, #6b4431);
  box-shadow: 0 14px 28px rgba(91, 55, 35, .2);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.product-checkout-button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.product-form-error {
  margin: 12px 0 0;
  border-radius: 10px;
  padding: 10px 12px;
  color: #943e38;
  background: #fff0ee;
  font-size: 12px;
  line-height: 1.5;
}

.checkout-security-note {
  display: block;
  margin-top: 10px;
  color: #8a7b72;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 900px) {
  .produtos-layout { grid-template-columns: 1fr; }
  .filter-buttons { flex-direction: row; flex-wrap: wrap; }
  .products-empty-img { width: 150px; height: 150px; }

  .product-modal {
    grid-template-columns: 1fr;
  }

  .product-modal-media {
    position: relative;
    height: 360px;
    min-height: 0;
  }
}

@media (max-width: 700px) {
  .produtos-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .btn-encomenda { width: 100%; }

  .product-modal-backdrop { padding: 0; }
  .product-modal { min-height: 100%; border-radius: 0; }
  .product-modal-media { height: 300px; }
  .product-modal-content { padding: 30px 20px 40px; }
  .product-modal-close { position: fixed; }
  .delivery-form-grid { grid-template-columns: 1fr; }
  .delivery-field-wide { grid-column: auto; }
  .shipping-cep-row { grid-template-columns: 1fr; }
  .shipping-cep-row button { min-height: 44px; }
  .shipping-quote { grid-template-columns: 20px 1fr; }
  .shipping-quote b { grid-column: 2; }
  .product-purchase-line { align-items: center; }
}


/* ── ENTREGA EM MANUTENÇÃO ───────────────────────────────── */
.delivery-option-maintenance {
  cursor: not-allowed;
  opacity: .72;
  border-style: dashed;
  background: #f7f3ef;
}

.delivery-option-maintenance input {
  cursor: not-allowed;
}

.delivery-option-maintenance strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.shipping-maintenance-badge {
  display: inline-flex !important;
  align-items: center;
  min-height: 22px;
  margin: 0 !important;
  padding: 3px 8px;
  border: 1px solid #d8bba8;
  border-radius: 999px;
  color: #8a5131;
  background: #fff8f2;
  font-size: 9px !important;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* pages/Sobre.css */
/* ============================================================
   frontend/src/pages/Sobre.css
   ============================================================ */

.sobre-page {
  overflow: hidden;
  color: #2c211b;
  background: #fbf8f4;
}

.sobre-kicker {
  display: block;
  color: #965a38;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .30em;
  text-transform: uppercase;
}

.sobre-hero {
  padding: clamp(72px, 8vw, 120px) clamp(24px, 6vw, 96px);
  border-bottom: 1px solid #eadfd6;
  background:
    radial-gradient(circle at 13% 16%, rgba(170, 108, 70, .10), transparent 28%),
    linear-gradient(135deg, #fbf7f2, #f2e8df);
}

.sobre-hero-inner {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, .72fr);
  align-items: center;
  gap: clamp(60px, 8vw, 120px);
}

.sobre-hero-copy h1 {
  margin: 22px 0 24px;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 6.4rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .92;
}

.sobre-hero-copy h1 em {
  color: #8b4f2d;
  font-weight: 400;
}

.sobre-hero-copy p {
  max-width: 650px;
  margin: 0;
  color: #6f625a;
  font-size: 1.02rem;
  line-height: 1.85;
}

.sobre-hero-media {
  position: relative;
  height: 520px;
}

.sobre-hero-media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 30px 30px 110px 30px;
  box-shadow: 0 28px 66px rgba(75, 44, 27, .16);
}

.sobre-hero-media::after {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  z-index: -1;
  border: 1px solid rgba(139, 79, 45, .22);
  border-radius: 30px 30px 110px 30px;
}

.sobre-photo-note {
  position: absolute;
  left: -44px;
  bottom: 34px;
  width: min(320px, 78%);
  padding: 20px 22px;
  border: 1px solid rgba(122, 73, 45, .14);
  border-radius: 17px;
  background: rgba(255, 253, 249, .94);
  box-shadow: 0 18px 44px rgba(71, 42, 26, .14);
  backdrop-filter: blur(9px);
}

.sobre-photo-note strong {
  display: block;
  margin-bottom: 5px;
  color: #613a25;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
}

.sobre-photo-note span {
  color: #75665d;
  font-size: 12px;
  line-height: 1.55;
}

.sobre-story {
  padding: clamp(80px, 9vw, 130px) clamp(24px, 6vw, 96px);
  background: #fffdf9;
}

.sobre-story-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(60px, 8vw, 120px);
}

.sobre-story-heading h2,
.sobre-method-copy h2,
.sobre-closing h2 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 4.5vw, 4.7rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1;
}

.sobre-story-text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}

.sobre-story-text p {
  margin: 0;
  color: #706159;
  line-height: 1.9;
}

.sobre-pillars {
  padding: 0 clamp(24px, 6vw, 96px) clamp(90px, 10vw, 145px);
  background: #fffdf9;
}

.sobre-pillars-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #e6d9cf;
  border-bottom: 1px solid #e6d9cf;
}

.sobre-pillar {
  padding: 42px 34px 46px;
  border-right: 1px solid #e6d9cf;
}

.sobre-pillar:last-child {
  border-right: 0;
}

.sobre-pillar > span {
  color: #b78a6e;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.sobre-pillar h3 {
  margin: 18px 0 13px;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
}

.sobre-pillar p {
  margin: 0;
  color: #74665e;
  font-size: 14px;
  line-height: 1.8;
}

.sobre-method {
  padding: clamp(85px, 10vw, 150px) clamp(24px, 6vw, 96px);
  background: #f2e8df;
}

.sobre-method-inner {
  width: min(1260px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(380px, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(58px, 8vw, 115px);
}

.sobre-method-photo {
  height: 560px;
  overflow: hidden;
  border-radius: 24px 80px 24px 24px;
  box-shadow: 0 24px 58px rgba(72, 44, 29, .13);
}

.sobre-method-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.sobre-method-copy > p {
  max-width: 670px;
  margin: 25px 0 30px;
  color: #6d6058;
  line-height: 1.85;
}

.sobre-method-list {
  display: grid;
  gap: 0;
  margin-bottom: 34px;
  border-top: 1px solid rgba(116, 73, 48, .17);
}

.sobre-method-list > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(116, 73, 48, .17);
}

.sobre-method-list strong {
  color: #563622;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
}

.sobre-method-list span {
  color: #796b62;
  font-size: 13px;
  line-height: 1.55;
}

.sobre-cta-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 27px;
  border-radius: 8px;
  color: #fff;
  background: #8b4f2d;
  box-shadow: 0 13px 28px rgba(83, 45, 24, .18);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  transition: transform .18s ease, background .18s ease;
}

.sobre-cta-button:hover {
  transform: translateY(-2px);
  background: #6f3d23;
}

.sobre-closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(70px, 8vw, 110px) clamp(24px, 8vw, 130px);
  color: #fff;
  background: #38251c;
}

.sobre-closing h2 {
  max-width: 760px;
  color: #fff;
}

.sobre-closing .sobre-kicker {
  color: #d3aa8d;
}

.sobre-closing > a {
  flex-shrink: 0;
  padding: 15px 24px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}

.sobre-closing > a:hover {
  color: #38251c;
  background: #fff;
}

@media (max-width: 980px) {
  .sobre-hero-inner,
  .sobre-method-inner {
    grid-template-columns: 1fr;
  }

  .sobre-hero-media {
    width: min(100%, 690px);
    height: 480px;
  }

  .sobre-story-inner {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .sobre-pillars-inner {
    grid-template-columns: 1fr;
  }

  .sobre-pillar {
    border-right: 0;
    border-bottom: 1px solid #e6d9cf;
  }

  .sobre-pillar:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 680px) {
  .sobre-hero {
    padding-inline: 20px;
  }

  .sobre-hero-copy h1 {
    font-size: clamp(3.2rem, 15vw, 4.8rem);
  }

  .sobre-hero-media {
    height: 410px;
  }

  .sobre-photo-note {
    left: 18px;
    right: 18px;
    bottom: 18px;
    width: auto;
  }

  .sobre-story,
  .sobre-pillars,
  .sobre-method {
    padding-inline: 20px;
  }

  .sobre-story-text {
    grid-template-columns: 1fr;
  }

  .sobre-method-photo {
    height: 410px;
  }

  .sobre-method-list > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .sobre-closing {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: 20px;
  }
}

@media (max-width: 1040px) {
  .nav-mobile .nav-mobile-enroll {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .home-main {
    overflow-x: clip;
    background: #f8f3ed;
  }

  .home-hero {
    position: relative;
    width: 100%;
    height: clamp(430px, 122vw, 560px);
    min-height: 0;
    display: block;
    overflow: hidden;
    background: #f8f3ed;
    isolation: isolate;
  }

  .home-hero-copy {
    position: relative;
    z-index: 4;
    width: 60%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(18px, 5.5vw, 34px) 0 clamp(18px, 5vw, 30px) clamp(14px, 5vw, 26px);
  }

  .home-eyebrow {
    margin: 0 0 clamp(8px, 2.8vw, 15px);
    color: transparent;
    font-size: 0;
    line-height: 1;
  }

  .home-eyebrow::before {
    content: "MODA REAL PARA PESSOAS REAIS";
    display: block;
    width: min(100%, 165px);
    color: #8b4f2d;
    font-family: var(--home-sans);
    font-size: clamp(0.46rem, 1.85vw, 0.62rem);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.21em;
  }

  .home-hero-copy h1 {
    width: 100%;
    max-width: 240px;
    margin: 0;
    color: #281b16;
    font-family: var(--home-display);
    font-size: clamp(2rem, 10.9vw, 3.3rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.05em;
  }

  .home-hero-copy h1 em {
    color: #955330;
    font-weight: 400;
  }

  .home-hero-copy h1::after {
    content: "Cursos de modelagem e costura para você desenvolver sua técnica, expressar sua criatividade e construir a vida que sempre sonhou.";
    display: block;
    width: min(100%, 218px);
    margin-top: clamp(9px, 2.7vw, 15px);
    color: #655950;
    font-family: var(--home-sans);
    font-size: clamp(0.56rem, 2.3vw, 0.76rem);
    font-style: normal;
    font-weight: 400;
    line-height: 1.38;
    letter-spacing: 0;
  }

  .home-primary-button {
    width: min(100%, 215px);
    min-height: clamp(38px, 10.5vw, 46px);
    height: auto;
    margin: clamp(11px, 3vw, 17px) 0 0;
    padding: 0 12px;
    border-radius: 7px;
    font-size: clamp(0.48rem, 1.85vw, 0.62rem);
    letter-spacing: 0.16em;
    box-shadow: 0 10px 22px rgba(94, 49, 27, 0.2);
  }

  .home-primary-button::after {
    content: "→";
    margin-left: 9px;
    font-size: 0.92rem;
    font-weight: 300;
    letter-spacing: 0;
  }

  .home-hero-copy .home-ornament {
    position: relative;
    width: min(100%, 205px);
    gap: 8px;
    margin: clamp(9px, 2.8vw, 14px) 0 0;
    padding-bottom: 13px;
  }

  .home-hero-copy .home-ornament-mark {
    font-size: 0.72rem;
  }

  .home-hero-copy .home-ornament::after {
    content: "SONHOS TAMBÉM SE COSTURAM";
    position: absolute;
    top: 11px;
    left: 0;
    width: 100%;
    color: rgba(139, 79, 45, 0.72);
    font-family: var(--home-sans);
    font-size: clamp(0.34rem, 1.25vw, 0.43rem);
    font-weight: 700;
    letter-spacing: 0.25em;
    text-align: center;
  }

  .home-hero-visual {
    position: absolute;
    z-index: 1;
    inset: 0 -7% 0 25%;
    width: auto;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
  }

  .home-hero-visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 61% center;
  }

  .home-hero-fade {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        90deg,
        #f8f3ed 0%,
        rgba(248, 243, 237, 0.99) 18%,
        rgba(248, 243, 237, 0.92) 35%,
        rgba(248, 243, 237, 0.48) 56%,
        rgba(248, 243, 237, 0.07) 80%,
        transparent 100%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.02),
        rgba(82, 45, 26, 0.08)
      );
  }

  .home-about {
    padding: clamp(9px, 3vw, 16px);
    background: #fffaf4;
  }

  .home-about-inner {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: clamp(7px, 2.4vw, 13px);
    row-gap: 6px;
    align-items: start;
    padding: clamp(13px, 4vw, 20px);
    border: 1px solid rgba(112, 74, 52, 0.09);
    border-radius: clamp(18px, 5vw, 26px);
    background:
      radial-gradient(circle at 88% 15%, rgba(177, 122, 88, 0.08), transparent 32%),
      linear-gradient(140deg, rgba(255,255,255,.96), rgba(250,242,234,.94));
    box-shadow: 0 10px 30px rgba(75, 44, 28, 0.055);
  }

  .home-about .about-content {
    display: contents;
  }

  .home-about .about-content.reveal,
  .home-about .about-collage.reveal {
    opacity: 1;
    transform: none;
  }

  .home-about .home-kicker {
    grid-column: 1;
    grid-row: 1;
    margin: 2px 0 2px;
    color: #955330;
    font-size: clamp(0.4rem, 1.55vw, 0.52rem);
    letter-spacing: 0.22em;
    line-height: 1.35;
  }

  .home-about .about-content h2 {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: clamp(1.62rem, 7.9vw, 2.45rem);
    line-height: 0.86;
    letter-spacing: -0.04em;
  }

  .home-about .about-content h2 em {
    color: #955330;
  }

  .home-about .about-content .section-thread,
  .home-about .about-content blockquote {
    display: none;
  }

  .home-about .about-intro {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    max-width: none;
    margin: clamp(4px, 1.5vw, 8px) 0 0;
    color: #675b53;
    font-size: clamp(0.48rem, 2.05vw, 0.67rem);
    line-height: 1.43;
  }

  .home-about .about-content > .home-secondary-button {
    grid-column: 1;
    grid-row: 4;
    align-self: end;
    width: 100%;
    min-height: clamp(29px, 8.5vw, 36px);
    margin: 5px 0 0;
    padding: 0 6px;
    border: 1px solid #9b5b38;
    border-radius: 6px;
    color: #8a4d2d;
    background: transparent;
    box-shadow: none;
    font-size: clamp(0.36rem, 1.45vw, 0.48rem);
    letter-spacing: 0.1em;
  }

  .home-about .about-content > .home-secondary-button::after {
    content: "→";
    margin-left: 5px;
    font-size: 0.72rem;
  }

  .home-about .about-collage {
    grid-column: 2;
    grid-row: 1 / 4;
    position: relative;
    width: 100%;
    height: clamp(170px, 49vw, 255px);
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: clamp(4px, 1.4vw, 7px);
    margin: 0;
  }

  .home-about .about-image {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: clamp(7px, 2.4vw, 11px);
    background: #eadfd4;
    box-shadow: none;
  }

  .home-about .about-image-main {
    grid-column: 1;
    grid-row: 1;
  }

  .home-about .about-image-work {
    grid-column: 2;
    grid-row: 1;
  }

  .home-about .about-image-detail {
    display: none;
  }

  .home-about .about-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .home-about .about-image-main img,
  .home-about .about-image-work img {
    object-position: center;
  }

  .home-about .founder-card {
    grid-column: 2;
    grid-row: 4;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: clamp(5px, 1.7vw, 8px);
    display: grid;
    grid-template-columns: clamp(46px, 15vw, 76px) minmax(0, 1fr);
    gap: clamp(5px, 1.7vw, 8px);
    align-items: center;
    border: 1px solid rgba(109,72,49,.11);
    border-radius: clamp(8px, 2.6vw, 12px);
    background: rgba(255, 252, 248, 0.9);
    box-shadow: none;
  }

  .home-about .founder-avatar {
    width: 100%;
    height: clamp(55px, 17vw, 84px);
    overflow: hidden;
    border-radius: clamp(7px, 2vw, 10px);
  }

  .home-about .founder-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .home-about .founder-card h3 {
    margin: 0 0 2px;
    color: #8d4e2c;
    font-size: clamp(0.88rem, 3.8vw, 1.24rem);
    line-height: 0.95;
  }

  .home-about .founder-card span {
    display: block;
    margin: 0;
    color: #8b4f2d;
    font-size: clamp(0.32rem, 1.28vw, 0.43rem);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: 0.08em;
  }

  .home-about .founder-card p {
    display: none;
  }

  .students-section {
    padding: clamp(20px, 6vw, 34px) clamp(9px, 3vw, 16px) clamp(14px, 4vw, 24px);
    background:
      linear-gradient(180deg, #f8f0e7 0%, #f1e4d8 100%);
  }

  .students-inner {
    position: relative;
    width: 100%;
    margin: 0;
    display: block;
  }

  .students-copy {
    position: relative;
    width: 100%;
    max-width: none;
    padding: 0 3px;
  }

  .students-copy.reveal,
  .students-carousel.reveal {
    opacity: 1;
    transform: none;
  }

  .students-copy .home-kicker {
    margin: 0 0 5px;
    font-size: clamp(0.4rem, 1.55vw, 0.52rem);
    letter-spacing: 0.23em;
  }

  .students-copy h2 {
    width: 67%;
    margin: 0 0 7px;
    font-size: clamp(1.85rem, 8.8vw, 2.7rem);
    line-height: 0.86;
    letter-spacing: -0.045em;
  }

  .students-copy h2 em {
    color: #955330;
  }

  .students-copy .section-thread,
  .students-copy .home-secondary-button {
    display: none;
  }

  .students-copy p {
    width: 68%;
    max-width: none;
    margin: 0 0 clamp(8px, 2.6vw, 13px);
    color: #695d54;
    font-size: clamp(0.48rem, 2vw, 0.66rem);
    line-height: 1.43;
  }

  .students-copy::after {
    content: "pessoas reais\Ahistórias reais\Anovos futuros\A♡";
    position: absolute;
    top: clamp(7px, 2vw, 12px);
    right: clamp(3px, 1.2vw, 8px);
    width: 28%;
    color: rgba(155, 87, 50, 0.8);
    font-family: var(--home-display);
    font-size: clamp(0.68rem, 3vw, 0.96rem);
    font-style: italic;
    line-height: 1.18;
    text-align: center;
    white-space: pre-line;
    transform: rotate(-5deg);
  }

  .students-carousel {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(92px, 0.82fr);
    grid-template-rows: auto auto;
    gap: clamp(5px, 1.8vw, 9px);
    margin: 0;
  }

  .students-viewport {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    display: flex;
    gap: clamp(5px, 1.6vw, 8px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .students-viewport::-webkit-scrollbar {
    display: none;
  }

  .students-card {
    flex: 0 0 calc(50% - 3px);
    width: auto;
    min-width: 0;
    aspect-ratio: 0.82;
    overflow: hidden;
    border: 0;
    border-radius: clamp(7px, 2.3vw, 11px);
    background: #e8dace;
    box-shadow: 0 7px 18px rgba(67, 43, 27, 0.09);
    scroll-snap-align: start;
    transform: none;
  }

  .students-card:nth-child(2n),
  .students-card:nth-child(2n):hover,
  .students-card:hover {
    transform: none;
  }

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

  .students-carousel::before {
    content: "“\AExperiência maravilhosa, super bem recebida. Aprender uma nova profissão fez toda a diferença para mim.\A\AAline S.   ★★★★★";
    grid-column: 2;
    grid-row: 1;
    display: block;
    min-width: 0;
    padding: clamp(8px, 2.7vw, 13px) clamp(7px, 2vw, 10px);
    overflow: hidden;
    border: 1px solid rgba(108,72,50,.1);
    border-radius: clamp(8px, 2.4vw, 12px);
    color: #62564e;
    background: rgba(255,253,249,.95);
    box-shadow: 0 7px 18px rgba(67,43,27,.05);
    font-family: var(--home-sans);
    font-size: clamp(0.39rem, 1.62vw, 0.54rem);
    line-height: 1.34;
    white-space: pre-line;
  }

  .students-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 2px 0 0;
  }

  .students-section .carousel-control {
    width: clamp(26px, 8vw, 34px);
    height: clamp(26px, 8vw, 34px);
    min-width: clamp(26px, 8vw, 34px);
  }

  .students-section .carousel-control svg {
    width: clamp(13px, 4vw, 17px);
    height: clamp(13px, 4vw, 17px);
  }

  .students-section .carousel-dots {
    gap: clamp(4px, 1.5vw, 7px);
  }

  .students-section .carousel-dot {
    width: clamp(5px, 1.5vw, 7px);
    height: clamp(5px, 1.5vw, 7px);
  }

  .students-section .carousel-dot.active {
    width: clamp(16px, 5vw, 22px);
  }

  .students-caption {
    display: none;
  }

  .testimonials-section {
    display: none;
  }

  .contact-section {
    padding: 0 clamp(8px, 3vw, 16px);
    background: #f1e4d8;
  }

  .contact-cta {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(102px, 0.75fr);
    gap: clamp(8px, 2.6vw, 14px);
    align-items: center;
    overflow: hidden;
    padding: clamp(14px, 4.4vw, 22px) clamp(12px, 4vw, 20px);
    border-radius: clamp(13px, 4vw, 18px) clamp(13px, 4vw, 18px) 0 0;
    color: #fff;
    background:
      linear-gradient(100deg, rgba(132, 66, 35, 0.96) 0%, rgba(117, 56, 31, 0.94) 55%, rgba(73, 40, 28, 0.9) 100%),
      url('/Gallery/hero-sewing.png') right center / cover no-repeat;
    box-shadow: none;
  }

  .contact-cta > div:first-child {
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  .contact-cta .home-kicker {
    margin: 0 0 6px;
    font-size: clamp(0.36rem, 1.35vw, 0.46rem);
    letter-spacing: 0.22em;
  }

  .contact-cta h2 {
    max-width: 250px;
    margin: 0 0 5px;
    font-size: clamp(1.38rem, 6.6vw, 2rem);
    font-weight: 400;
    line-height: 0.91;
    letter-spacing: -0.035em;
  }

  .contact-cta p {
    max-width: 250px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: clamp(0.43rem, 1.75vw, 0.58rem);
    line-height: 1.4;
  }

  .contact-cta-actions {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(5px, 1.6vw, 8px);
  }

  .contact-light-button,
  .contact-outline-button {
    flex: none;
    width: 100%;
    min-height: clamp(31px, 8.5vw, 38px);
    height: auto;
    padding: 0 5px;
    border-radius: 7px;
    font-size: clamp(0.36rem, 1.45vw, 0.48rem);
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  .contact-details {
    width: 100%;
    margin: 0;
    padding: clamp(8px, 2.8vw, 13px) clamp(6px, 2.2vw, 11px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(104,68,47,.1);
    border-top: 0;
    border-radius: 0;
    background: #fffaf4;
  }

  .contact-section .contact-card {
    min-width: 0;
    min-height: clamp(68px, 20vw, 92px);
    display: block;
    padding: clamp(4px, 1.5vw, 7px) clamp(5px, 2vw, 10px);
    border: 0;
    border-right: 1px solid rgba(104,68,47,.11);
    border-radius: 0;
    background: transparent;
    text-align: left;
  }

  .contact-section .contact-card:last-child {
    border-right: 0;
  }

  .contact-section .contact-icon {
    display: none;
  }

  .contact-section .contact-card h3 {
    margin: 0 0 5px;
    color: #4c3326;
    font-size: clamp(0.64rem, 2.8vw, 0.9rem);
    line-height: 1;
  }

  .contact-section .contact-card p,
  .contact-section .contact-card address,
  .contact-section .contact-card > a {
    margin: 0;
    color: #74665d;
    font-size: clamp(0.37rem, 1.5vw, 0.5rem);
    font-weight: 400;
    line-height: 1.42;
    overflow-wrap: anywhere;
  }

  .contact-section .contact-card p a {
    color: #754529;
    font-size: inherit;
    font-weight: 600;
  }

  .home-footer {
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 7px 12px;
    padding: clamp(9px, 3vw, 14px) clamp(11px, 3.5vw, 18px) calc(clamp(10px, 3vw, 14px) + env(safe-area-inset-bottom));
    color: #6d5d53;
    background: #fffaf4;
    border-top: 1px solid rgba(105,70,50,.12);
    text-align: left;
  }

  .home-footer .footer-brand {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    gap: 7px;
    color: #38271f;
  }

  .home-footer .footer-monogram {
    color: #38271f;
    font-size: clamp(1.25rem, 5vw, 1.6rem);
  }

  .home-footer .footer-divider {
    width: 1px;
    height: clamp(21px, 6vw, 28px);
    background: rgba(103,67,46,.25);
  }

  .home-footer .footer-brand > span:last-child {
    font-size: clamp(0.5rem, 2vw, 0.68rem);
    letter-spacing: 0.13em;
    white-space: nowrap;
  }

  .home-footer .footer-links {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px clamp(8px, 2.8vw, 14px);
  }

  .home-footer .footer-links a {
    color: #5f5047;
    font-size: clamp(0.4rem, 1.6vw, 0.53rem);
    white-space: nowrap;
  }

  .home-footer p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    color: #8a7b72;
    font-size: clamp(0.38rem, 1.45vw, 0.49rem);
    line-height: 1.4;
    text-align: right;
  }
}

@media (max-width: 420px) {
  .home-hero-copy {
    width: 62%;
    padding-left: 14px;
  }

  .home-hero-visual {
    left: 24%;
  }

  .home-hero-copy h1 {
    max-width: 205px;
  }

  .home-about-inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  .students-carousel {
    grid-template-columns: minmax(0, 1.82fr) minmax(88px, 0.82fr);
  }

  .contact-cta {
    grid-template-columns: minmax(0, 1.12fr) minmax(98px, 0.88fr);
  }
}

@media (max-width: 350px) {
  .home-hero-copy {
    width: 64%;
    padding-left: 12px;
  }

  .home-hero-copy h1 {
    font-size: 1.95rem;
  }

  .home-hero-copy h1::after {
    font-size: 0.53rem;
  }

  .home-primary-button {
    width: 182px;
  }

  .home-about-inner {
    padding-inline: 10px;
    column-gap: 6px;
  }

  .home-about .about-intro {
    font-size: 0.46rem;
  }

  .home-about .founder-card {
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 5px;
  }

  .students-copy p {
    width: 70%;
  }

  .students-copy::after {
    width: 26%;
    font-size: 0.64rem;
  }

  .students-carousel {
    grid-template-columns: minmax(0, 1.72fr) minmax(82px, 0.83fr);
  }

  .students-carousel::before {
    font-size: 0.36rem;
  }

  .contact-cta {
    grid-template-columns: minmax(0, 1fr) minmax(94px, 0.9fr);
    gap: 6px;
    padding-inline: 10px;
  }

  .contact-section .contact-light-button,
  .contact-section .contact-outline-button {
    font-size: 0.34rem;
  }

  .contact-section .contact-details {
    padding-inline: 4px;
  }

  .contact-section .contact-card {
    padding-inline: 4px;
  }

  .home-footer .footer-brand > span:last-child {
    display: none;
  }

  .home-footer .footer-links {
    gap: 4px 8px;
  }
}

@media (min-width: 600px) and (max-width: 900px) and (max-height: 500px) {
  .home-hero {
    height: max(390px, calc(100svh - 76px));
  }

  .home-hero-copy {
    width: 55%;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .home-hero-copy h1 {
    max-width: 310px;
    font-size: clamp(2.25rem, 6vw, 3rem);
  }

  .home-hero-copy h1::after {
    max-width: 255px;
    font-size: 0.63rem;
  }

  .home-primary-button {
    width: 220px;
    min-height: 40px;
  }

  .home-hero-copy .home-ornament {
    width: 210px;
  }
}