/* ==========================================================================
   CECILIA — site stylesheet (v1)
   Decisions from the client meeting:
   · Ink #111 (soft black), Bianco background
   · Cormorant (display) + Inter (body)
   · Dark red #5F1916 only on details / hover
   ========================================================================== */

:root{
  --bianco:#F4F1EB;          /* main background */
  --bianco-deep:#EAE4DA;     /* cards, image placeholders */
  --ink:#111111;             /* text + the single strong colour */
  --ink-soft:#4A453E;        /* secondary text */
  --muted:#8C857A;           /* labels, captions */
  --wine:#5F1916;            /* accent — hover only */
  --rule:rgba(17,17,17,.14);

  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
:where(p,h1,h2,h3,h4,ul,ol,li,figure,dl,dd,dt){margin:0;padding:0}
:where(ul,ol){list-style:none}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-height:100svh;display:flex;flex-direction:column;
  background:var(--bianco);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}
:focus-visible{outline:1.5px solid var(--wine);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.wrap{width:100%;max-width:70rem;margin:0 auto;padding:0 clamp(1.4rem,5vw,3rem)}
.wrap--narrow{max-width:48rem}

.label{
  font-family:var(--body);font-size:.68rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}

/* ---------- header / nav ------------------------------------------------- */
.head{
  position:sticky;top:0;z-index:60;background:var(--bianco);
  border-bottom:1px solid var(--rule);
}
.head__in{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-top:clamp(1rem,2.2vw,1.5rem);padding-bottom:clamp(1rem,2.2vw,1.5rem);
}
.head__logo img{width:clamp(4.5rem,9vw,6.5rem);height:auto}
.nav{display:none}
@media(min-width:60em){
  .nav{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(.8rem,1.8vw,1.5rem)}
  .nav a{font-size:.68rem;letter-spacing:.13em;white-space:nowrap}
}
.nav a{
  position:relative;font-size:.72rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);padding:.4rem 0;transition:color .2s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:.1rem;height:1px;
  background:var(--wine);transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--wine)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a.book{
  border:1px solid var(--ink);border-radius:2px;padding:.5rem 1.1rem;
  background:var(--ink);color:var(--bianco);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.nav a.book::after{display:none}
.nav a.book:hover{background:var(--wine);border-color:var(--wine);color:#fff}

/* mobile menu button */
.burger{
  display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;
  cursor:pointer;padding:.5rem;
}
@media(min-width:60em){.burger{display:none}}
.burger span{width:22px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:55;background:var(--bianco);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.6rem;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.mobile-nav.open{opacity:1;pointer-events:auto}
.mobile-nav a{font-family:var(--display);font-size:2rem;color:var(--ink)}
.mobile-nav a:hover{color:var(--wine)}

/* ---------- generic section --------------------------------------------- */
.main{flex:1}
.section{padding:clamp(2.5rem,5vw,4.5rem) 0}
.section--tight{padding:clamp(2rem,4vw,3rem) 0}
.section + .section{border-top:1px solid var(--rule)}

.eyebrow{display:block;margin-bottom:.7rem}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.01em}
.h-xl{font-size:clamp(2.6rem,7vw,5rem)}
.h-lg{font-size:clamp(2rem,5vw,3.4rem)}
.h-md{font-size:clamp(1.6rem,3.6vw,2.4rem)}
.lede{font-size:1.08rem;line-height:1.7;color:var(--ink-soft);max-width:52ch;text-wrap:pretty}
.prose p{color:var(--ink-soft);line-height:1.75;max-width:58ch;text-wrap:pretty}
.prose p + p{margin-top:1.1rem}
.prose strong{color:var(--ink);font-weight:600}

.btn{
  display:inline-block;font-family:var(--body);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--ink);border-radius:2px;padding:.9rem 2rem;color:var(--ink);
  transition:background .2s ease,color .2s ease,border-color .2s ease;cursor:pointer;
}
.btn:hover{background:var(--wine);border-color:var(--wine);color:#fff}
.btn--solid{background:var(--ink);color:var(--bianco)}
.btn--solid:hover{background:var(--wine);border-color:var(--wine);color:#fff}

.shot{background:var(--bianco-deep);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot--45{aspect-ratio:4/5}
.shot--11{aspect-ratio:1/1}
.shot--169{aspect-ratio:16/9}

/* ---------- home hero ---------------------------------------------------- */
.hero{position:relative}
.hero__grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  padding:clamp(3rem,7vw,6rem) 0}
@media(min-width:56em){.hero__grid{grid-template-columns:1fr 1fr}}
.hero__copy .h-xl{margin-bottom:1.4rem}
.hero__copy em{font-style:italic;color:var(--wine)}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.hero__shot{aspect-ratio:4/5;background:var(--bianco-deep);overflow:hidden}
.hero__shot img{width:100%;height:100%;object-fit:cover;object-position:center 45%;
  opacity:0;animation:fade 1.2s ease .1s forwards}
@keyframes fade{to{opacity:1}}

/* ---------- home info strips -------------------------------------------- */
.split{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
@media(min-width:56em){
  .split{grid-template-columns:1fr 1fr}
  .split--flip .split__media{order:2}
}
.trio{display:grid;gap:1.4rem}
@media(min-width:48em){.trio{grid-template-columns:repeat(3,1fr)}}
.trio__item .shot{margin-bottom:1rem}
.trio__item h3{font-size:1.5rem;margin-bottom:.4rem}
.trio__item p{color:var(--ink-soft);font-size:.95rem;line-height:1.6}

/* ---------- hours / contact facts --------------------------------------- */
.facts{display:grid;gap:1.8rem}
@media(min-width:44em){.facts{grid-template-columns:1fr 1fr}}
.facts .label{margin-bottom:.5rem}
.facts a:hover{color:var(--wine)}
.hours{display:grid;gap:.6rem;max-width:28rem}
.hours div{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  padding-bottom:.55rem;border-bottom:1px solid var(--rule)}
.hours dt{font-weight:500}
.hours dd{font-size:.86rem;color:var(--ink-soft);text-align:right}

/* ---------- footer ------------------------------------------------------- */
.foot{border-top:1px solid var(--rule);padding:clamp(2.5rem,5vw,3.5rem) 0}
.foot__grid{display:grid;gap:2rem}
@media(min-width:48em){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot__logo img{width:7rem;margin-bottom:1rem}
.foot h4{font-family:var(--body);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.9rem}
.foot ul{display:grid;gap:.5rem}
.foot a{color:var(--ink-soft);font-size:.92rem}
.foot a:hover{color:var(--wine)}
.foot__base{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:.75rem;color:var(--muted)}

/* ---------- what's on cards --------------------------------------------- */
.whats{display:grid;gap:1.5rem}
@media(min-width:48em){.whats{grid-template-columns:repeat(2,1fr)}}
.whats__card{border:1px solid var(--rule);padding:clamp(1.6rem,3vw,2.2rem);
  display:flex;flex-direction:column;transition:border-color .25s ease}
.whats__card:hover{border-color:var(--wine)}
.whats__card .when{font-family:var(--body);font-size:.66rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wine);margin-bottom:.9rem}
.whats__card h3{font-size:1.7rem;margin-bottom:.6rem}
.whats__card p{color:var(--ink-soft);font-size:.95rem;line-height:1.65}

.ig-cta{margin-top:2.5rem;text-align:center;padding:clamp(2rem,4vw,3rem);
  border:1px solid var(--rule)}
.ig-cta p{color:var(--ink-soft);margin-bottom:1.2rem}

/* ---------- forms (contact / functions / booking) ----------------------- */
.form{display:grid;gap:1.2rem;max-width:34rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{
  font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--bianco);
  border:1px solid var(--rule);border-radius:2px;padding:.8rem .9rem;transition:border-color .2s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--wine)}
.field textarea{resize:vertical;min-height:7rem}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.hero__shot img{opacity:1}}

/* ---------- minimal map (contact) --------------------------------------- */
.map{
  display:block;position:relative;aspect-ratio:1/1;overflow:hidden;
  border:1px solid var(--rule);background:var(--bianco-deep);
}
.map img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s ease}
.map:hover img{opacity:.9}
.map__pin{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--bianco);border-top:1px solid var(--rule);
  padding:.9rem 1.1rem;font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);transition:color .2s ease;
}
.map:hover .map__pin{color:var(--wine)}
@media(max-width:56em){.map{margin-top:1rem}}

/* functions: smaller photo + email link */
.func-shot{aspect-ratio:4/5;max-width:26rem;margin-left:auto;overflow:hidden;background:var(--bianco-deep)}
.func-shot img{width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:56em){.func-shot{max-width:100%;aspect-ratio:4/3}}
.mailto{font-family:var(--display);font-size:1.5rem;color:var(--wine);
  border-bottom:1px solid var(--rule);transition:border-color .2s ease}
.mailto:hover{border-color:var(--wine)}

/* ---------- home minimal (photo + address only) ------------------------- */
.home-hero{padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(2.5rem,5vw,4rem)}
/* big centred logo above the photo (home only) */
.home-hero__brand{text-align:center;margin-bottom:clamp(1.6rem,3.5vw,2.8rem)}
.home-hero__brand img{width:clamp(10rem,24vw,17rem);height:auto;margin:0 auto;
  opacity:0;animation:fade 1s ease .05s forwards}
/* on the home, hide the small header logo and let the nav sit alone on top */
body.home-page .head__logo{display:none}
@media(min-width:60em){
  body.home-page .head__in{justify-content:center}
  body.home-page .nav{gap:clamp(1rem,2.4vw,2.2rem)}
}
.home-hero__shot{aspect-ratio:3/4;background:var(--bianco-deep);overflow:hidden;
  width:100%;margin:0 auto;max-height:76svh}
.home-hero__shot img{width:100%;height:100%;object-fit:cover;object-position:center 55%;
  opacity:0;animation:fade 1.2s ease .1s forwards}
/* on the home, narrow the whole frame so nav + logo + photo align */
body.home-page .wrap{max-width:44rem}
.home-hero__addr{text-align:center;margin-top:clamp(1.6rem,3vw,2.4rem)}
.home-hero__addr .label{margin-bottom:.5rem}
.home-hero__addr .place{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.15;font-weight:400}

/* ---------- what's on: two cards side by side --------------------------- */
.wcards{display:grid;gap:clamp(1.4rem,3vw,2.2rem)}
@media(min-width:48em){.wcards{grid-template-columns:1fr 1fr}}
.wcard{display:flex;flex-direction:column;border:1px solid var(--rule);
  background:var(--bianco);transition:border-color .25s ease}
.wcard:hover{border-color:var(--wine)}
.wcard__shot{aspect-ratio:3/2;background:var(--bianco-deep);overflow:hidden;position:relative}
.wcard__shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transition:opacity .5s ease}
.wcard__shot .img-hover{opacity:0}
.wcard:hover .wcard__shot .img-base{opacity:0}
/* card com uma foto so: nao some no hover (nao ha imagem por baixo) */
.wcard:hover .wcard__shot img:only-of-type{opacity:1}
.wcard:hover .wcard__shot .img-hover{opacity:1}
.wcard__shot--offset .img-hover{object-position:center 42%}
.wcard__body{padding:clamp(1.3rem,2.5vw,1.8rem)}
.wcard__when{display:block;font-family:var(--body);font-size:.66rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wine);margin-bottom:.5rem}
.wcard h3{font-size:1.7rem;margin-bottom:.5rem;line-height:1.1}
.wcard__desc{color:var(--ink-soft);font-size:.95rem;line-height:1.6}

/* ---------- minimal footer bar (after removing full footer) ------------- */
.footbar{border-top:1px solid var(--rule);padding:clamp(1.4rem,3vw,2rem) 0}
.footbar__in{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  align-items:center;font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.footbar__end{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center}
.footbar a{color:var(--muted)}
.footbar a:hover{color:var(--wine)}
/* mobile: sem espaco para as duas pontas, tudo centralizado e empilhado */
@media(max-width:44em){
  .footbar__in{justify-content:center;text-align:center;gap:.5rem 1.2rem}
  .footbar__end{justify-content:center}
}

/* instagram link with icon (contact) */
.ig-link{display:inline-flex;align-items:center;gap:.4rem}
.ig-icon{flex-shrink:0;position:relative;top:.5px}