/*
Theme Name: Mari_01
Author: Mari
Description: 01
Version: 1.0
Template: twentytwentythree

This is the child theme for Twenty Twenty-Three theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/
:root {
	--cream: #f8f4ee;
    --warm-white: #fdfbf8;
    --ink: #1c1410;
    --ink-soft: #3d3028;
    --muted: #8a7a6a;
    --gold: #b8954a;
    --gold-light: #d4b06a;
    --gold-pale: #f0e4c8;
    --rose: #7a3d4a;
    --border: #e4ddd4;
}
body { background: var(--cream); color: var(--ink); }
a { color: var(--gold); }


.section-label {
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

/* ── PROCESSO / STEPS ── */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 3rem;
  position: relative;
}

/* linha horizontal conectando os círculos */
.steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--border);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  position: relative;
}

/* círculo numerado */
.step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  color: var(--gold);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1; /* fica sobre a linha ::before */
}

.step h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--ink);
}

.step p {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ── RESPONSIVO ── */
@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr;
  }
  /* esconde a linha horizontal no mobile */
  .steps::before {
    display: none;
  }
  .step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 1rem;
    padding: 0;
    margin-bottom: 1.5rem;
  }
  .step-num {
    flex-shrink: 0;
    margin-bottom: 0;
  }
}


.wp-site-blocks .wp-block-group .servico-card ul li {
    font-size: 0.82rem;
    color: var(--ink-soft);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.wp-site-blocks .wp-block-group .servico-card ul li::before {
    content: '\2736';
    color: var(--gold);
    font-size: 0.6rem;
    margin-top: 4px;
    flex-shrink: 0;
}

.full-bleed {
    margin-left: calc(var(--wp--style--root--padding-left) * -1);
    margin-right: calc(var(--wp--style--root--padding-right) * -1);
    width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
    max-width: 100vw;
}

  /* ── CARROSSEL ── */
  /* ── WRAPPER ── */
  .carousel-section {
    width: 100%;
    max-width: 1100px;
    padding: 0 2rem;
  }
 
  .carousel-header {
    text-align: center;
    margin-bottom: 3.5rem;
  }
 
  .carousel-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .section-eyebrow::before,
  .section-eyebrow::after,
  .carousel-eyebrow::before,
  .carousel-eyebrow::after {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--gold);
    opacity: 0.5;
  }
 
  .carousel-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--cream);
    line-height: 1.2;
  }
 
  .carousel-title em {
    font-style: italic;
    color: var(--gold-light);
  }
 
  /* ── STAGE ── */
  .carousel-stage {
    position: relative;
    overflow: hidden;
    padding: 2rem 0 1rem;
  }
 
  .carousel-track {
    display: flex;
    gap: 2rem;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    align-items: center;
  }
 
  /* ── SLIDE ── */
  .slide {
    flex: 0 0 calc(33.333% - 1.34rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    opacity: 0.45;
    transform: scale(0.88);
  }
 
  .slide.active {
    opacity: 1;
    transform: scale(1);
  }
 
  .slide.adjacent {
    opacity: 0.6;
    transform: scale(0.93);
  }
 
  /* ── COVER IMAGE ── */
  .cover-wrap {
    position: relative;
    width: 100%;
    max-width: 220px;
    height: 300px; /* altura fixa — todas as imagens ocupam o mesmo espaço */
    display: flex;
    align-items: center;
    justify-content: center;
  }
 
  .cover-wrap::before {
    content: '';
    position: absolute;
    inset: -1px;
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 0;
    border-radius: 2px;
  }
 
  .slide.active .cover-wrap::before {
    opacity: 0.4;
  }
 
  .cover-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
    border-radius: 2px;
    box-shadow:
      0 4px 12px rgba(0,0,0,0.4),
      0 20px 60px rgba(0,0,0,0.5);
    transition: box-shadow 0.4s;
  }
 
  .slide.active .cover-img {
    box-shadow:
      0 8px 24px rgba(0,0,0,0.5),
      0 30px 80px rgba(0,0,0,0.6),
      0 0 0 1px rgba(184,149,74,0.2);
  }
 
  /* placeholder quando nao tem imagem */
  .cover-placeholder {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.15);
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-radius: 2px;
  }
  .cover-placeholder span { font-size: 1.5rem; opacity: 0.3; }
 
  /* ── SLIDE TYPE TAG ── */
  .slide-type {
    font-family: 'Cinzel', serif;
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(184,149,74,0.5);
    border: 1px solid rgba(184,149,74,0.2);
    padding: 3px 8px;
    border-radius: 2px;
    margin-bottom: 0.6rem;
    display: inline-block;
    opacity: 0;
    transition: all 0.4s 0.05s;
  }
 
  .slide.active .slide-type { opacity: 1; }
 
  /* ── SLIDE INFO ── */
  .slide-info {
    text-align: center;
    max-width: 220px;
    transition: all 0.4s;
  }
 
  .slide-publisher {
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.4s 0.1s;
  }
 
  .slide-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--cream);
    line-height: 1.3;
    margin-bottom: 0.6rem;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.4s 0.15s;
  }
 
  .slide-desc {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.4s 0.2s;
  }
 
  .slide.active .slide-publisher,
  .slide.active .slide-title,
  .slide.active .slide-desc {
    opacity: 1;
    transform: translateY(0);
  }
 
  .slide.adjacent .slide-title {
    opacity: 0.5;
    transform: translateY(0);
    font-size: 0.85rem;
  }
 
  /* ── CONTROLS ── */
  .carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
  }
 
  .carousel-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(184,149,74,0.3);
    background: transparent;
    color: var(--gold);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
  }
 
  .carousel-btn:hover {
    border-color: var(--gold);
    background: rgba(184,149,74,0.08);
  }
 
  .carousel-btn:disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
  }
 
  /* ── DOTS ── */
  .carousel-dots {
    display: flex;
    gap: 8px;
    align-items: center;
  }
 
  .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(184,149,74,0.25);
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    padding: 0;
  }
 
  .dot.active {
    background: var(--gold);
    width: 20px;
    border-radius: 3px;
  }
 
  /* ── COUNTER ── */
  .carousel-counter {
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: var(--muted);
    min-width: 60px;
    text-align: center;
  }
 
  /* ── RESPONSIVE ── */
  @media (max-width: 700px) {
    .slide {
      flex: 0 0 80%;
      opacity: 1;
      transform: scale(1);
    }
    .slide.active { transform: scale(1); }
    .slide.adjacent { opacity: 0.5; transform: scale(0.95); }
    .slide-publisher,
    .slide-title,
    .slide-desc {
      opacity: 1 !important;
      transform: none !important;
    }
  }