/* ============================================================
   CECÍLIA CUCINA — tokens
   Verde petróleo #16332C / #1E3F35   Dourado #D9B96A / #C9A227
   Creme #F7F3EA   Texto claro #F3EFE4
   Display script: 'Alex Brush'  |  Serif: 'Cormorant Garamond' / 'Playfair Display'
   ============================================================ */

   :root{
    --verde-950: #0F241E;
    --verde-900: #16332C;
    --verde-800: #1E3F35;
    --verde-700: #2A4F43;
    --dourado:   #D9B96A;
    --dourado-forte: #C9A227;
    --creme:     #F7F3EA;
    --creme-100: #FBF9F4;
    --texto-claro: #F3EFE4;
    --texto-suave: #C9C2AE;
  
    --serif: 'Cormorant Garamond', 'Playfair Display', serif;
    --display: 'Playfair Display', serif;
    --script: 'Alex Brush', 'Brush Script MT', cursive;
  
    --container: 1120px;
    --ease: cubic-bezier(.22,.68,0,1);
  }
  
  *, *::before, *::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--creme);
    color:var(--verde-900);
    font-family:var(--serif);
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; }
  
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }
  
  /* ============================================================
     DOBRA 1 — HERO
     ============================================================ */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:6vh 6vw;
    background:
      radial-gradient(120% 90% at 50% -10%, rgba(217,185,106,.14), transparent 60%),
      linear-gradient(180deg, var(--verde-950) 0%, var(--verde-900) 55%, var(--verde-800) 100%);
    overflow:hidden;
  }
  .hero::before{ /* textura sutil de linho */
    content:"";
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px);
    pointer-events:none;
  }
  
  .hero__frame{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.6rem;
    animation:heroIn 1.1s var(--ease) both;
  }
  @keyframes heroIn{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
  }
  
  .hero__ring{
    position:absolute;
    top:-3.6rem;
    width:210px; height:210px;
    border-radius:50%;
    border:1px solid rgba(217,185,106,.35);
  }
  .hero__ring::after{
    content:"";
    position:absolute; inset:14px;
    border-radius:50%;
    border:1px solid rgba(217,185,106,.18);
  }
  
  .hero__logo{
    width:min(78vw, 460px);
    filter:drop-shadow(0 6px 24px rgba(0,0,0,.35));
  }
  
  .hero__eyebrow{
    margin:0;
    font-family:var(--serif);
    font-style:italic;
    font-weight:500;
    font-size:clamp(.95rem, 1.6vw, 1.15rem);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--texto-suave);
  }
  
  .hero__actions{
    margin-top:1.2rem;
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    justify-content:center;
  }
  
  .btn{
    appearance:none;
    border:none;
    cursor:pointer;
    font-family:var(--serif);
    font-size:1rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:.95rem 2.2rem;
    border-radius:2px;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  }
  .btn:active{ transform:translateY(1px); }
  
  .btn--gold{
    background:linear-gradient(180deg, var(--dourado) 0%, var(--dourado-forte) 100%);
    color:var(--verde-950);
    font-weight:600;
    box-shadow:0 10px 30px -12px rgba(201,162,39,.55);
  }
  .btn--gold:hover{ box-shadow:0 14px 34px -10px rgba(201,162,39,.7); transform:translateY(-2px); }
  
  .btn--ghost{
    background:transparent;
    color:var(--texto-claro);
    border:1px solid rgba(243,239,228,.45);
  }
  .btn--ghost:hover{
    border-color:var(--dourado);
    color:var(--dourado);
    transform:translateY(-2px);
  }
  
  .btn--full{ width:100%; }
  
  .hero__scroll{
    position:absolute;
    bottom:2.2rem; left:50%;
    transform:translateX(-50%);
    z-index:1;
  }
  .hero__scroll span{
    display:block;
    width:1px; height:44px;
    background:linear-gradient(180deg, var(--dourado), transparent);
    animation:scrollPulse 1.8s ease-in-out infinite;
  }
  @keyframes scrollPulse{
    0%,100%{ opacity:.3; }
    50%{ opacity:1; }
  }
  
  /* ============================================================
     DOBRA 2 — SOBRE
     ============================================================ */
  .about{
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8vh 6vw;
    background:var(--creme);
    position:relative;
  }
  .about__inner{
    max-width:640px;
    text-align:center;
  }
  .about__kicker{
    display:inline-block;
    font-family:var(--serif);
    font-style:italic;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-size:.85rem;
    color:var(--dourado-forte);
    margin-bottom:1rem;
  }
  .about__title{
    font-family:var(--script);
    font-size:clamp(2.8rem, 8vw, 4.6rem);
    font-weight:400;
    margin:0 0 .3rem;
    color:var(--verde-900);
  }
  .about__lede{
    font-family:var(--display);
    font-style:italic;
    font-size:clamp(1.15rem, 2.4vw, 1.5rem);
    color:var(--verde-800);
    margin:0;
  }
  .about__divider{
    width:64px; height:1px;
    background:var(--dourado-forte);
    margin:2.2rem auto;
  }
  .about__detail{
    font-size:clamp(1.05rem, 1.8vw, 1.25rem);
    line-height:1.7;
    color:var(--verde-800);
    margin:0 0 .9rem;
  }
  .about__detail a{
    color:var(--dourado-forte);
    text-decoration:none;
    border-bottom:1px solid rgba(201,162,39,.4);
    transition:border-color .25s var(--ease), color .25s var(--ease);
  }
  .about__detail a:hover{
    color:var(--verde-900);
    border-color:var(--verde-900);
  }
  
  /* ============================================================
     DOBRA 3 — GALERIA / CARROSSEL
     ============================================================ */
  .gallery{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2rem;
    padding:8vh 4vw;
    background:linear-gradient(180deg, var(--verde-900), var(--verde-950));
    position:relative;
  }
  .gallery__kicker{
    font-family:var(--serif);
    font-style:italic;
    letter-spacing:.2em;
    text-transform:uppercase;
    font-size:.9rem;
    color:var(--dourado);
  }
  
  .gallery__carousel{
    position:relative;
    width:100%;
    max-width:var(--container);
    display:flex;
    align-items:center;
    gap:1rem;
  }
  
  .gallery__track{
    display:flex;
    gap:1.25rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:.5rem .5rem 1.5rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .gallery__track::-webkit-scrollbar{ display:none; }
  
  .gallery__slide{
    flex:0 0 auto;
    width:min(78vw, 360px);
    aspect-ratio:4/5;
    scroll-snap-align:center;
    border-radius:4px;
    overflow:hidden;
    position:relative;
    border:1px solid rgba(217,185,106,.25);
    box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
  }
  .gallery__slide img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .8s var(--ease);
  }
  .gallery__slide:hover img{ transform:scale(1.06); }
  
  .gallery__nav{
    flex:0 0 auto;
    width:48px; height:48px;
    border-radius:50%;
    border:1px solid rgba(217,185,106,.4);
    background:rgba(255,255,255,.02);
    color:var(--dourado);
    font-size:1.6rem;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .3s var(--ease), transform .3s var(--ease);
  }
  .gallery__nav:hover{
    background:var(--dourado);
    color:var(--verde-950);
    transform:scale(1.06);
  }
  
  .gallery__dots{
    display:flex;
    gap:.5rem;
  }
  .gallery__dot{
    width:6px; height:6px;
    border-radius:50%;
    background:rgba(217,185,106,.3);
    cursor:pointer;
    border:none;
    padding:0;
    transition:background .3s var(--ease), transform .3s var(--ease);
  }
  .gallery__dot.is-active{
    background:var(--dourado);
    transform:scale(1.4);
  }
  
  @media (max-width: 640px){
    .gallery__nav{ display:none; }
  }
  
  /* ============================================================
     MODAL — AVALIAÇÃO
     ============================================================ */
  .modal{
    position:fixed; inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5vw;
    visibility:hidden;
    opacity:0;
    transition:opacity .35s var(--ease), visibility .35s var(--ease);
  }
  .modal.is-open{
    visibility:visible;
    opacity:1;
  }
  .modal__overlay{
    position:absolute; inset:0;
    background:rgba(15,36,30,.72);
    backdrop-filter:blur(3px);
  }
  .modal__box{
    position:relative;
    width:100%;
    max-width:460px;
    max-height:88vh;
    overflow-y:auto;
    background:var(--creme-100);
    border:1px solid rgba(201,162,39,.35);
    border-radius:6px;
    padding:2.4rem 2rem 2rem;
    transform:translateY(16px) scale(.98);
    transition:transform .4s var(--ease);
    box-shadow:0 40px 80px -24px rgba(0,0,0,.5);
  }
  .modal.is-open .modal__box{
    transform:translateY(0) scale(1);
  }
  
  .modal__close{
    position:absolute;
    top:.9rem; right:1rem;
    width:32px; height:32px;
    border:none;
    background:transparent;
    font-size:1.6rem;
    line-height:1;
    color:var(--verde-800);
    cursor:pointer;
  }
  .modal__close:hover{ color:var(--dourado-forte); }
  
  .modal__kicker{
    margin:0 0 .3rem;
    font-style:italic;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:.8rem;
    color:var(--dourado-forte);
  }
  .modal__title{
    font-family:var(--display);
    font-weight:600;
    font-size:1.5rem;
    margin:0 0 1.5rem;
    color:var(--verde-900);
  }
  
  .field{
    display:flex;
    flex-direction:column;
    gap:.4rem;
    margin-bottom:1.2rem;
    text-align:left;
  }
  .field > span, .field--group legend{
    font-size:.82rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--verde-800);
  }
  .field--group{ border:none; padding:0; margin:0 0 1.2rem; }
  .field--group legend{ padding:0; margin-bottom:.5rem; }
  
  .field input[type="text"],
  .field input[type="tel"]{
    font-family:var(--serif);
    font-size:1rem;
    padding:.75rem .9rem;
    border:1px solid rgba(22,51,44,.25);
    border-radius:3px;
    background:#fff;
    color:var(--verde-900);
    outline:none;
    transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
  }
  .field input:focus{
    border-color:var(--dourado-forte);
    box-shadow:0 0 0 3px rgba(201,162,39,.18);
  }
  
  .options{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
  }
  .option{
    position:relative;
    cursor:pointer;
  }
  .option input{
    position:absolute;
    opacity:0;
    width:0; height:0;
  }
  .option span{
    display:inline-block;
    padding:.5rem 1rem;
    border:1px solid rgba(22,51,44,.25);
    border-radius:20px;
    font-size:.88rem;
    color:var(--verde-800);
    transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  }
  .option input:checked + span{
    background:var(--verde-900);
    border-color:var(--verde-900);
    color:var(--dourado);
  }
  .option input:focus-visible + span{
    outline:2px solid var(--dourado-forte);
    outline-offset:2px;
  }
  
  .modal__status{
    min-height:1.4em;
    margin:.9rem 0 0;
    font-size:.9rem;
    text-align:center;
    color:var(--verde-800);
  }
  .modal__status.is-error{ color:#a33; }
  .modal__status.is-ok{ color:#2f6b4f; }
  
  .btn[disabled]{
    opacity:.6;
    cursor:not-allowed;
  }