/* =========================================
   Gourmetize • index.en.css (English) — TOP NAV INSIDE TOPBAR + BIGGER LOGO
========================================= */

/* ---------- Reset & helpers ---------- */
*,*::before,*::after{ box-sizing:border-box }
html:focus-within{ scroll-behavior:smooth }
html,body{ height:100%; width:100%; overflow-x:hidden }
body{
  margin:0;
  font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:#F2E9E0;
  color:#3D2F24;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer }
:focus-visible{ outline:2px solid #E6C068; outline-offset:2px }

/* ---------- Tokens ---------- */
:root{
  --brand:#7c0130;
  --brand-2:#5b0125;
  --cream:#F2E9E0;
  --ink2:#3D2F24;
  --ink: 124, 1, 48;
  --padron: rgb(96 60 32);
  --muted:#E6C068A6;
  --accent:#E6C068;
  --radius:18px;
  --radius2:10px;
  --shadow:0 22px 60px rgba(61,47,36,.45);
  --container:1180px;
  --gap:24px;

  /* Topbar mais alta p/ logo maior e nav dentro */
  --topbar-h:96px;

  /* Safe areas para a NAV não invadir logo nem idiomas/CTA */
  --nav-left-safe: 120px;   /* perto da logo */
  --nav-right-safe: 420px;  /* idiomas + CTA (aumentado) */
}
.container{ max-width:var(--container); margin:0 auto; padding:0 20px }
.center{ text-align:center }


/* ---------- i18n ---------- */
[data-i18n].i18n-pt{ display:none !important; }
:where(.i18n-pt){ display:none !important; }
/* Quando o JS colocar body.lang-pt, alterna os textos */
body.lang-pt [data-i18n]:not(.i18n-pt){ display:none !important; }
body.lang-pt .i18n-pt{ display:initial !important; }

/* =========================================================
   TOPBAR (logo à esquerda + idiomas/cta à direita)
========================================================= */
.topbar{
  position:sticky; top:0; z-index:60;
  background:var(--brand);
  border-bottom:1px solid rgba(242,233,224,.12);
}
.topbar .container{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--topbar-h);
  padding-inline:20px;
}

.brand{ display:flex; align-items:center; gap:12px }
.brand-logo{
  height:clamp(56px, 7.2vw, 78px);
  width:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))
}
.brand-name{ font-weight:700; letter-spacing:.5px }

/* Bloco da direita (acima da nav e clicável) */
.topbar-right{
  position:relative; z-index:90;   /* acima da .nav */
  display:flex; align-items:center; gap:10px;
}
.lang-switch{ display:flex; gap:8px; margin-right:6px }
.lang-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:12px;
  border:1px solid rgba(242,233,224,.16);
  background:rgba(91,1,37,.9); color:#fff; opacity:.95; transition:.2s
}
.lang-btn:hover{ opacity:1; border-color:rgba(242,233,224,.28) }
.lang-btn .fi{ width:18px; height:18px; border-radius:4px; box-shadow:0 0 0 2px rgba(0,0,0,.2) inset }
.lang-btn small{ opacity:.85; letter-spacing:.02em }
.lang-btn.active{ outline:2px solid var(--accent); outline-offset:2px }

/* CTA Topbar */
.topbar-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:rgba(var(--ink),1);
  padding:10px 14px; border-radius:14px; font-weight:700; white-space:nowrap; transition:.25s
}
.topbar-cta:hover{ filter:brightness(1.06); box-shadow:0 8px 24px rgba(230,192,104,.35); transform:translateY(-1px) }

/* Hamburger (mobile) */
.hamburger{ display:none; position:relative; width:42px; height:36px; border:0; background:transparent; z-index:90 }
.hamburger span{ position:absolute; left:9px; right:9px; height:2px; background:#fff; border-radius:1px; transition:.3s }
.hamburger span:nth-child(1){ top:11px } .hamburger span:nth-child(2){ top:17px } .hamburger span:nth-child(3){ top:23px }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* =========================================================
   HEADER/NAV – menu dentro da TOPBAR (desktop)
========================================================= */
.header{ background:transparent; border:0; height:0; overflow:visible }
.header .container{ padding:0 }

/* NAV centralizada entre as safe-areas */
.nav{
  position:fixed;
  left:var(--nav-left-safe);
  right:var(--nav-right-safe);
  top:calc(var(--topbar-h)/2);
  transform:translateY(-50%);
  z-index:65;
  pointer-events:none;              /* área vazia NÃO clica */
}
.nav ul{
  display:flex; justify-content:center; gap:56px;
  list-style:none; margin:0; padding:0;
  pointer-events:auto;              /* itens são clicáveis */
}
.nav a{
  display:inline-block; padding:12px 6px; border-radius:10px;
  color:#E6C068; font-weight:600; letter-spacing:.02em; transition:.2s;
  text-shadow:0 0 1px rgba(0,0,0,.12);
  pointer-events:auto;
}
.nav a:hover{ background:rgba(242,233,224,.08); color:#fff }

/* Submenu “Our Services” */
.nav li.has-submenu{ position:relative }
.nav li.has-submenu > a{ padding-right:22px }
.nav li.has-submenu > a::after{
  content:""; display:inline-block; margin-left:8px; width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px); opacity:.85; transition:transform .2s ease;
}
.nav li.has-submenu:hover > a::after{ transform:rotate(225deg) translateY(2px) }
.nav .submenu{
  position:absolute; left:0; top:calc(100% + 12px); min-width:220px;
  background:linear-gradient(180deg,rgba(124,1,48,.98),rgba(91,1,37,.98));
  border:1px solid rgba(242,233,224,.12);
  border-radius:14px; padding:8px;
  box-shadow:0 18px 36px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease; z-index:70;
  pointer-events:auto;
}
.nav .submenu li{ list-style:none }
.nav .submenu a{ display:block; padding:10px 12px; border-radius:10px; color:#F2E9E0; white-space:nowrap }
.nav .submenu a:hover{ background:rgba(242,233,224,.10) }
.nav li.has-submenu:hover > .submenu{ opacity:1; visibility:visible }

/* =========================================================
   HERO (restante do CSS original abaixo)
========================================================= */
.hero{ position:relative; min-height:74vh; display:grid; align-items:center; isolation:isolate; padding-bottom:150px }
.hero-media{ position:absolute; inset:0; background:url("../img/hero1.jpg") center/cover no-repeat; z-index:-2 }
.hero-inner{ padding:120px 0; display:flex; flex-direction:column; align-items:flex-start; gap:18px }
.eyebrow{ margin:0; font-weight:700; color:var(--brand); text-transform:uppercase; letter-spacing:.22em; font-size:13px }
h1{ margin:0 0 16px; font-size:clamp(28px,5vw,56px); line-height:1.05; color:var(--brand) }
.rotator{ display:block; min-height:1.2em }
.rotator-item{ display:none }
.rotator-item.is-active{ display:inline-block; animation:fadeSlide .7s ease both }
@keyframes fadeSlide{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

.hero-controls{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none }
.hero-btn{
  pointer-events:auto; display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; border:1px solid rgba(255,255,255,.25);
  margin:0 10px; transition:.2s; backdrop-filter:blur(2px);
}
.hero-btn:hover{ background:rgba(0,0,0,.5) }

.btn{ display:inline-flex; align-items:center; justify-content:center;  gap:10px; padding:14px 22px; border-radius:14px; border:1px solid transparent; font-weight:700; transition:.25s; background:transparent }
.btn.primary{ background:var(--accent); color:rgba(var(--padron),1); box-shadow:0 10px 30px rgba(230,192,104,.35) }
.btn.primary:hover{ filter:brightness(1.06); transform:translateY(-1px) }
.btn.ghost{ border-color:rgba(242,233,224,.22); color:#F2E9E0 }
.btn.ghost:hover{ background:rgba(242,233,224,.10) }

.hero h1{ position:relative; display:inline-block; padding:2px 6px; z-index:1 }
.hero h1::before{
  content:""; position:absolute; inset:-8px -14px; border-radius:16px;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(2px);
  box-shadow:0 10px 26px rgba(0,0,0,.20);
  z-index:-1;
}
.hero .eyebrow{ position:relative; display:inline-block; padding:4px 8px; z-index:1 }
.hero .eyebrow::before{
  content:""; position:absolute; inset:-6px -10px; border-radius:12px;
  background:rgba(255,255,255,.36);
  backdrop-filter:blur(1.5px); z-index:-1;
}

/* “Explore Services” vermelho do site */
.hero .btn.ghost{
  background:var(--brand);
  border-color:rgba(242,233,224,.25);
  color:#fff;
  box-shadow:0 10px 26px rgba(124,1,48,.35);
}
.hero .btn.ghost:hover{ background:var(--brand-2); color:#fff }

/* Subcopy */
.subcopy{
  position:absolute; left:50%; bottom:-70px; transform:translateX(-50%); z-index:5;
  display:block; width:min(980px, calc(100% - 64px)); padding:18px 22px;
  text-align:center; color:#E6C068; background:var(--brand);
  border-radius:12px; font-weight:700; line-height:1.5;
  box-shadow:0 18px 50px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}
.subcopy.i18n-pt{ display:none !important }

/* ---------- Sections ---------- */
.section{ padding:50px 0 }
.section.about{ background:#F2E9E0 !important; color:var(--ink); padding-top:140px }
.section.values{ background:#F2E9E0 !important; color:var(--ink); padding-top:2px }

/* ---------- About ---------- */
.grid-2{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--gap); align-items:center }
.about-media{ border-radius:var(--radius2); overflow:hidden; box-shadow:var(--shadow) }
.about-copy h2{ margin:0 0 16px;  line-height:1.2; color:var(--ink) }
.about-copy p{ line-height:1.65; margin:0 0 14px; color:var(--padron) }

/* ---------- OUR SERVICES (parallax + overlay) ---------- */
.section.services{
  position:relative; color:#3D2F24 !important;
  padding-top:84px; padding-bottom:92px;
  background:url("../img/service.jpg") center/cover fixed no-repeat !important;
}
.section.services::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(124,1,48,.95) 0%,
                                    rgba(124,1,48,.82) 22%,
                                    rgba(124,1,48,.55) 55%,
                                    rgba(124,1,48,.22) 80%,
                                    rgba(124,1,48,0) 100%);
  pointer-events:none; z-index:0;
}
.section.services > .container{ position:relative; z-index:1 }
.section.services .section-head{ margin-bottom:26px }
.section.services .section-head h2,
.section.services .section-head p{ color:#fff; opacity:1 }
.section.services .section-head p{ max-width:940px }



/* Cabeçalho da seção limitado ao “quadrado” das tiles (~540px) */
.section.services .section-head{ margin-bottom:26px; max-width:540px }
.section.services .section-head h2,
.section.services .section-head p{ color:#fff; opacity:1 }
.section.services .section-head p{ max-width:540px }
/* Cards (EN — align colors to PT) */
.service-list.tiles{
  display:grid; grid-template-columns:minmax(320px,520px);
  row-gap:18px; justify-content:start; margin:20px 0 28px;
}
.tile{
  position:relative;
  background:#F2E9E0;                 /* was #d4af37 */
  border:1px solid rgba(242,233,224,.18);
  border-radius:16px;
  padding:18px 20px;
  box-shadow:0 16px 36px rgba(0,0,0,.33);
  color:#E6C068;                       /* was rgb(124 1 48) */
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 44px rgba(0,0,0,.38);
  border-color:rgba(230,192,104,.45);
}
.tile h3{
  margin:0 0 8px; font-size:19px; font-weight:800; line-height:1.25;
  color:#3D2F24;                       /* was rgb(124 1 48) */
}
.tile-sub{
  margin:0 0 8px; opacity:.98; line-height:1.55; font-size:15px;
  color:#3D2F24;                       /* was rgb(124 1 48) */
}
.tile .features{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px }
.tile .features li{
  display:grid; grid-template-columns:16px 1fr; align-items:start; column-gap:8px;
  font-size:14.5px; line-height:1.5; opacity:.98; color:#3D2F24;
}
.tile .features li::before{
  content:""; width:10px; height:10px; margin-top:6px; border-radius:50%;
  background:#E6C068;                  /* was rgb(124 1 48) */
  box-shadow:0 0 0 1px rgba(0,0,0,.12) inset;
}
.tile-link{ position:absolute; inset:0; border-radius:inherit }
.tile-icon{ display:none }


.section.services .center{ display:flex; justify-content:flex-start }
.section.services .center .btn.primary{
  box-shadow:0 12px 34px rgba(230,192,104,.35);
  border:1px solid rgba(61,47,36,.1);
}

/* ---------- OUR VALUES ---------- */
.values .cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:28px; align-items:start; justify-items:center }
.values .card{ background:transparent; border:0; box-shadow:none; padding:0; text-align:center; color:var(--ink) }
.values .card h3{
  --circle:170px; --ring:8px;
  width:var(--circle); height:var(--circle); margin:0 auto 14px;
  display:grid; place-items:center;
  background:radial-gradient(70% 70% at 50% 30%, #99073f 0%, var(--brand) 70%);
  color:#E6C068; font-weight:800; letter-spacing:.2px;
  font-size:clamp(16px,2.3vw,20px); line-height:1.15; text-align:center;
  border-radius:50%; position:relative; box-shadow:0 16px 42px rgba(124,1,48,.28); z-index:0;
  transform: translateZ(0); backface-visibility: hidden;
}
.values .card h3::after{
  content:""; position:absolute; inset:calc(-1 * var(--ring)); border-radius:50%;
  background:conic-gradient(#F0D58A, #D6A43C, #C38A18, #F0D58A);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--ring) - 1px), #000 calc(100% - var(--ring) + 0px));
          mask:radial-gradient(farthest-side, transparent calc(100% - var(--ring) - 1px), #000 calc(100% - var(--ring) + 0px));
  filter: blur(.35px) drop-shadow(0 4px 10px rgba(195,138,24,.22)); z-index:-1;
}
.values .card p{
  margin:25px auto 0;         /* start a bit lower and center */
  max-width:360px;            /* keep a neat line length */
  text-align:center;
  color:var(--padron);
  font-size:15px;
  line-height:1.6;
  font-weight:400;

  /* fine-tuning for cleaner lines */
  letter-spacing:-0.15px;
  word-spacing:-0.15px;
  text-rendering:optimizeLegibility;
  hyphens:auto;
  -webkit-hyphens:auto;
  text-wrap:balance;          /* modern browsers: avoids ragged last lines */
}


/* ---------- Testimonials / Gallery ---------- */
.section.testimonials{ background:linear-gradient(180deg,var(--brand) 0%, var(--brand-2) 100%) !important; color:#F2E9E0 }

.section.testimonials h2,
.section.testimonials blockquote,
.section.testimonials figcaption span{
  color:#E6C068 !important;
}

.section.gallery{ background:#F2E9E0 !important; color:var(--ink) }

/* ---------- Footer ---------- */
.footer{
  background:linear-gradient(180deg,var(--brand) 0%, var(--brand-2) 100%);
  border-top:1px solid rgba(242,233,224,.12); color:#E6C068; padding:48px 0 24px;
}
.grid-3{ display:grid; grid-template-columns:1.2fr .9fr .9fr; gap:var(--gap); align-items:flex-start }
.footer h4{ margin:0 0 10px; color:#E6C068 }
.footer .list{ list-style:none; padding:0; margin:0 }
.footer .list li{ margin:8px 0 }
.footer a{ color:#E6C068 }

.social{ display:flex; gap:12px }
.social__link{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:12px; background:rgba(242,233,224,.10);
  border:1px solid rgba(230,192,104,.35); transition:.25s; font-size:18px; color:#F2E9E0;
}
.social__link:hover{ background:rgba(230,192,104,.22); color:#3D2F24; transform:translateY(-1px); box-shadow:0 10px 22px rgba(230,192,104,.25) }

.footer-credit{
  margin-top:28px; display:flex; justify-content:center; align-items:center; gap:8px;
  padding-top:16px; border-top:1px solid rgba(242,233,224,.15);
  font-weight:600; letter-spacing:.02em;
  color:#E6C068;
}
.footer-credit a{
  color:#E6C068; text-decoration:none; padding:6px 12px; border-radius:999px;
  background:rgba(230,192,104,.18); border:1px solid rgba(230,192,104,.45);
}
.footer-credit a:hover{ background:rgba(230,192,104,.28) }

/* =========================================================
   RESPONSIVO
========================================================= */
@media (max-width:1180px){
  .service-list.tiles{ grid-template-columns:minmax(280px,1fr) }
}
@media (max-width:1024px){
  .grid-2{ grid-template-columns:1fr; gap:18px }
  .about-media{ order:2 }
  .values .cards{ grid-template-columns:1fr 1fr }
}
@media (max-width:760px){
  .container{ padding:0 16px }

  :root{ --topbar-h:64px }
  .topbar .container{ height:var(--topbar-h); padding:0 12px }
  .brand-name{ display:none }
  .hamburger{ display:block }

  /* Painel mobile */
  .nav{
    position:fixed; inset:var(--topbar-h) 0 auto 0;
    background:rgba(124,1,48,.96);
    transform:translateY(-120%); transition:transform .35s ease;
    z-index:85; border-bottom:1px solid rgba(242,233,224,.12);
    pointer-events:auto;           /* painel precisa clicar */
  }
  .nav.open{ transform:translateY(0) }
  .nav ul{ flex-direction:column; padding:16px 20px; gap:6px }
  .nav a{ padding:12px; color:#d4af37 }            /* dourado no mobile */
  .nav .submenu a{ color:#d4af37 }
  .nav a:hover{ background:rgba(242,233,224,.10) }

  /* Submenu mobile tipo acordeão */
  .nav li.has-submenu{ position:static }
  .nav li.has-submenu > a{ padding-right:36px; position:relative }
  .nav li.has-submenu > a::after{ position:absolute; right:16px; top:50%; transform:translateY(-50%) rotate(45deg) }
  .nav .submenu{
    position:static; margin:0; border:0; border-radius:12px; padding:0;
    background:rgba(242,233,224,.06); box-shadow:none;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .28s ease, opacity .18s ease, visibility .18s ease, padding .18s ease, margin .18s ease;
  }
  .nav li.has-submenu:hover > .submenu{
    margin:6px 0 8px; padding:6px; max-height:500px; opacity:1; visibility:visible;
  }
  .nav li.has-submenu:hover > a::after{ transform:translateY(-50%) rotate(225deg) }

  .values .cards{ grid-template-columns:1fr; gap:24px }
  .subcopy{ bottom:-36px; width:min(980px, calc(100% - 32px)); padding:16px }
}

/* microfolga visual à direita no desktop */
@media (min-width:761px){
  .topbar-right{ padding-left:6px }
}


/* Thumb comum (imagem e “no-img”) */
.opt-item img,
.opt-item .thumb{
  width:84px;
  height:84px;
  border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.15);
}

/* Selo quando não há imagem */
.opt-item .thumb.no-img{
  display:grid;
  place-items:center;
  background:#F2E9E0;
  color:#7c0130;
  border:1px solid rgba(61,47,36,.12);
  font-size:10px;
  line-height:1.1;
  font-weight:800;
  text-transform:uppercase;
  text-align:center;
  padding:8px;
  transition:transform .15s ease;
}
.opt-item:hover .thumb.no-img{ transform:translateY(-1px) scale(1.02); }