:root {
      --bg-parchment: #FBF7EE;
      --bg-card: #FAF4E8;
      --bg-card-hover: #FFFDF9;
      --teal-dark: #133832;
      --teal-deep: #1B443D;
      --teal-light: #2C5B53;
      --gold-accent: #C59D5F;
      --gold-light: #D9B882;
      --gold-border: #E2C99B;
      --text-dark: #2B2621;
      --text-muted: #655E53;
      --border-soft: #E9DEC9;
  }

  body {
      background-color: var(--bg-parchment);
      color: var(--text-dark);
      font-family: 'Montserrat', sans-serif;
      position: relative;
      min-height: 100vh;
      overflow-x: hidden;
      background-image:
          radial-gradient(circle at 50% 0%, rgba(245, 237, 220, 0.8) 0%, rgba(251, 247, 238, 0.95) 70%),
          url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c59d5f' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
  }

  /* Typography */
  .font-serif {
      font-family: 'Cormorant Garamond', serif;
  }

  /* Ornate Decorative Elements */
  .flourish-text {
      color: var(--gold-accent);
      font-size: 0.9rem;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
  }

  .flourish-text::before,
  .flourish-text::after {
      content: '';
      height: 1px;
      width: 50px;
      background: linear-gradient(to var(--dir, right), transparent, var(--gold-accent));
  }

  .flourish-text::before {
      --dir: right;
  }

  .flourish-text::after {
      --dir: left;
  }

  /* Header Section */
  .main-header {
      padding: 2.5rem 1rem 1.5rem;
      position: relative;
      text-align: center;
  }

  .main-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 4rem;
      font-weight: 700;
      color: var(--teal-dark);
      margin-bottom: 0.2rem;
      letter-spacing: 0.5px;
      line-height: 1.1;
  }

  .main-subtitle {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--teal-dark);
      letter-spacing: 0.5px;
  }

  /* Corner Decorative Botanicals */
  .botanical-bg-left,
  .botanical-bg-right {
      position: absolute;
      top: 0;
      width: 298px;
      pointer-events: none;
      z-index: 1;
  }

  .botanical-bg-left {
      left: 0px;
  }

  .botanical-bg-right {
      right: 0px;
  }

  /* Main Container Wrap */
  .page-container {
      max-width: 960px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
  }

  /* Section Titles */
  .section-header {
      text-align: center;
      margin-top: 2.5rem;
      margin-bottom: 1.25rem;
  }

  .section-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
      font-weight: 700;
      color: var(--teal-dark);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      position: relative;
  }

  .section-title i {
      color: var(--gold-accent);
      font-size: 1.5rem;
  }

  /* Card Styled Containers */
  .parchment-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(19, 56, 50, 0.04);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* Leitura do Mês Feature Card */
  .hero-card {
      background-color: var(--bg-card);
      border: 1px solid var(--gold-border);
      border-radius: 14px;
      padding: 1.5rem;
      position: relative;
      box-shadow: 0 6px 20px rgba(19, 56, 50, 0.06);
  }

  .hero-badge-box {
      background: linear-gradient(145deg, var(--teal-dark), var(--teal-deep));
      color: #FAF6EE;
      border-radius: 10px;
      border: 2px solid var(--gold-accent);
      padding: 2.2rem 1.2rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      position: relative;
      box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
  }

  .hero-badge-box::before {
      content: '';
      position: absolute;
      top: 6px;
      left: 6px;
      right: 6px;
      bottom: 6px;
      border: 1px solid rgba(197, 157, 95, 0.4);
      border-radius: 6px;
      pointer-events: none;
  }

  .hero-badge-box i {
      font-size: 2.2rem;
      color: var(--gold-accent);
      margin-bottom: 0.8rem;
  }

  .hero-badge-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 1.2;
  }

  /* Table Info Grid */
  .info-grid {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
  }

  .info-row {
      display: flex;
      align-items: center;
      border-bottom: 1px dashed var(--border-soft);
      padding-bottom: 0.6rem;
  }

  .info-row:last-child {
      border-bottom: none;
      padding-bottom: 0;
  }

  .info-label {
      width: 42%;
      color: var(--text-dark);
      font-size: 0.95rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .info-label i {
      color: var(--teal-dark);
      font-size: 1.1rem;
      width: 20px;
      text-align: center;
  }

  .info-value {
      width: 58%;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--teal-dark);
  }

  .hero-quote {
      text-align: center;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.25rem;
      font-style: italic;
      color: var(--text-dark);
      margin-top: 1.5rem;
      padding: 0 1rem;
  }

  /* Action Buttons Grid (4 Cols) */
  .action-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: 12px;
      padding: 1.2rem 1rem;
      text-align: center;
      text-decoration: none;
      color: var(--text-dark);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      transition: all 0.25s ease;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.02);
  }

  .action-card:hover {
      transform: translateY(-4px);
      background-color: var(--bg-card-hover);
      border-color: var(--gold-accent);
      box-shadow: 0 8px 20px rgba(19, 56, 50, 0.08);
      color: var(--teal-dark);
  }

  .action-icon-circle {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background-color: var(--teal-dark);
      color: #FAF6EE;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 0.8rem;
      transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .action-card:hover .action-icon-circle {
      background-color: var(--teal-light);
      transform: scale(1.05);
  }

  .action-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--teal-dark);
      line-height: 1.2;
      margin-bottom: 0.4rem;
  }

  .action-arrow {
      color: var(--gold-accent);
      font-size: 1.1rem;
      transition: transform 0.2s ease;
  }

  .action-card:hover .action-arrow {
      transform: translateX(4px);
  }

  /* Presentation Box */
  .presentation-card {
      padding: 1.5rem 2rem;
      text-align: center;
      background-color: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: 12px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      line-height: 1.6;
      color: var(--text-dark);
  }

  .presentation-card p {
      margin: 0;
  }

  /* Percurso (Timeline Steps) */
  .timeline-container {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
      margin: 1.5rem 0;
  }

  .timeline-step {
      flex: 1;
      text-align: center;
      padding: 0 0.5rem;
      position: relative;
      z-index: 2;
  }

  .step-number {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background-color: var(--teal-dark);
      color: #FAF6EE;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.8rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 0.8rem;
      border: 2px solid var(--gold-accent);
      box-shadow: 0 4px 10px rgba(19, 56, 50, 0.15);
  }

  .step-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--teal-dark);
      margin-bottom: 0.2rem;
  }

  .step-desc {
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.3;
  }

  .timeline-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 14px;
      color: var(--gold-accent);
      font-size: 1.2rem;
  }

  /* Resource Cards (Materiais de estudo) */
  .resource-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: 12px;
      padding: 1.4rem 1.1rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: all 0.25s ease;
  }

  .resource-card:hover {
      transform: translateY(-3px);
      background-color: var(--bg-card-hover);
      border-color: var(--gold-accent);
      box-shadow: 0 6px 16px rgba(19, 56, 50, 0.06);
  }

  .resource-icon {
      font-size: 2.2rem;
      color: var(--teal-dark);
      margin-bottom: 0.8rem;
  }

  .resource-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--teal-dark);
      margin-bottom: 0.4rem;
  }

  .resource-desc {
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.4;
      margin-bottom: 1.2rem;
      flex-grow: 1;
  }

  .resource-link {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--gold-accent);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: gap 0.2s ease;
  }

  .resource-card:hover .resource-link {
      gap: 8px;
      color: var(--teal-dark);
  }

  /* Registros Cards (3 Cols) */
  .registro-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: 12px;
      padding: 1.2rem;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 15px;
      transition: all 0.25s ease;
      text-decoration: none;
      color: var(--text-dark);
  }

  .registro-card:hover {
      transform: translateY(-2px);
      border-color: var(--gold-accent);
      background-color: var(--bg-card-hover);
      box-shadow: 0 4px 12px rgba(19, 56, 50, 0.06);
  }

  .registro-icon-box {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: var(--teal-dark);
      color: #FAF6EE;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      flex-shrink: 0;
  }

  .registro-content {
      flex-grow: 1;
  }

  .registro-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--teal-dark);
      margin-bottom: 0.1rem;
  }

  .registro-desc {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.2;
  }

  .registro-arrow {
      color: var(--gold-accent);
      font-size: 1.1rem;
  }

  /* Ganhadores Sorteio */
  .winner-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: 12px;
      padding: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      height: 100%;
  }

  .winner-badge {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 2px solid var(--gold-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--teal-dark);
      background: radial-gradient(circle, #FFFDF8 0%, #F5EAD4 100%);
      position: relative;
  }

  .winner-info {
      text-align: left;
  }

  .winner-rank {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--teal-dark);
  }

  .winner-name {
      font-size: 0.85rem;
      color: var(--text-muted);
  }

  .donation-note {
      text-align: center;
      font-size: 0.85rem;
      color: var(--text-muted);
      margin-top: 1.5rem;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
  }

  /* Footer Nav & Credits */
  .bottom-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 3rem;
      margin-bottom: 2rem;
      padding: 0 0.5rem;
  }

  .btn-nav-custom {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--teal-dark);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: color 0.2s ease;
  }

  .btn-nav-custom:hover {
      color: var(--gold-accent);
  }

  .btn-center-all {
      background-color: transparent;
      border: 1px solid var(--gold-border);
      padding: 0.5rem 1.2rem;
      border-radius: 8px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--teal-dark);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s ease;
  }

  .btn-center-all:hover {
      background-color: var(--teal-dark);
      color: #FAF6EE;
      border-color: var(--teal-dark);
  }

  .quote-footer {
      text-align: center;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem;
      font-style: italic;
      color: var(--teal-dark);
      margin-bottom: 0.5rem;
  }

  .credits-footer {
      text-align: center;
      font-size: 0.9rem;
      color: var(--text-dark);
      font-weight: 500;
      margin-bottom: 2rem;
  }

  /* Bottom Decorative Frame Corners */
  .bottom-frame-left,
  .bottom-frame-right {
      position: fixed;
      bottom: 0;
      width: 180px;
      pointer-events: none;
      z-index: 1;
  }

  .bottom-frame-left {
      left: 0;
  }

  .bottom-frame-right {
      right: 0;
  }

  /* Ornate Decorative Dividers */
  .divider-ornament {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      margin: 1rem 0;
  }

  .divider-line {
      height: 1px;
      background: linear-gradient(to var(--dir, right), transparent, var(--gold-accent), transparent);
      width: 120px;
  }

  @media (max-width: 768px) {
      .main-title {
          font-size: 2.8rem;
      }

      .main-subtitle {
          font-size: 1.4rem;
      }

      .botanical-bg-left,
      .botanical-bg-right {
          display: none;
      }

      .info-label {
          width: 48%;
          font-size: 0.85rem;
      }

      .info-value {
          width: 52%;
          font-size: 1.1rem;
      }

      .timeline-container {
          flex-direction: column;
          gap: 1.5rem;
      }

      .timeline-arrow {
          transform: rotate(90deg);
          padding: 0;
          margin: -0.5rem 0;
      }

      .bottom-nav {
          flex-direction: column;
          gap: 1rem;
          text-align: center;
      }
  }