@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Manrope:wght@300;400;500;600&display=swap');

:root{
  --ink:#171513; --muted:#706a64; --paper:#f7f3ed; --paper2:#eee7df;
  --white:#fff; --line:#d9d1c8; --warm:#a98874;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;font-family:"Manrope",Arial,sans-serif;font-weight:400;letter-spacing:-.01em}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.topbar{background:#171513;color:#fff;text-align:center;padding:9px 16px;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(23,21,19,.07)}
.nav{max-width:1460px;margin:auto;min-height:82px;padding:0 30px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}
.brand{font-family:"Cormorant Garamond",Georgia,serif;font-size:35px;font-weight:600;letter-spacing:.12em}
.menu{display:flex;justify-content:center;gap:24px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.menu a{padding:31px 0 28px;border-bottom:1px solid transparent;transition:.2s}
.menu a:hover,.menu a.active{border-color:var(--ink)}
.nav-cta{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px}
.burger{display:none;border:0;background:none;font-size:25px;cursor:pointer}
.eyebrow{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:17px;font-weight:500}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;letter-spacing:-.025em}
.btn{display:inline-block;border:1px solid currentColor;padding:15px 25px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;transition:.25s}
.btn:hover{background:#171513;color:white}
.btn.light:hover{background:white;color:#171513}
.hero{min-height:85vh;position:relative;display:flex;align-items:flex-end;overflow:hidden;background:#ddd}
.hero img{position:absolute;inset:0}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,13,.58),rgba(20,16,13,.08) 56%,rgba(20,16,13,.01))}
.hero-copy{position:relative;z-index:2;color:#fff;width:min(860px,88vw);padding:0 7vw 9vh}
.hero h1{font-size:clamp(58px,7vw,105px);line-height:.9;margin:0 0 24px}
.hero p{font-size:15.5px;line-height:1.8;max-width:600px;margin:0 0 30px;font-weight:300}
.page-hero{min-height:54vh;position:relative;display:flex;align-items:flex-end;background:#ddd;overflow:hidden}
.page-hero img{position:absolute;inset:0}
.page-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,14,12,.55),rgba(18,14,12,.06))}
.page-hero .inner{position:relative;z-index:2;color:#fff;padding:0 7vw 7vh;max-width:850px}
.page-hero h1{font-size:clamp(54px,7vw,92px);line-height:.92;margin:0 0 12px}
.page-hero p{max-width:600px;line-height:1.75;font-weight:300}
.section{max-width:1440px;margin:auto;padding:105px 6vw}
.section-head{text-align:center;max-width:760px;margin:0 auto 56px}
.section-head h2{font-size:clamp(44px,5vw,70px);line-height:1;margin:0 0 18px}
.section-head p{color:var(--muted);line-height:1.8;font-size:14.5px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{position:relative;min-height:640px;overflow:hidden;background:#ece8e4}
.card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.52),rgba(0,0,0,0) 58%)}
.card img{transition:transform .7s ease}.card:hover img{transform:scale(1.035)}
.card-copy{position:absolute;z-index:2;left:31px;right:31px;bottom:30px;color:#fff}
.card-copy h3{font-size:42px;line-height:1;margin:0 0 8px}
.card-copy p{margin:0 0 18px;line-height:1.6;font-size:13.5px;font-weight:300}
.text-link{font-size:10px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:4px}
.story{background:var(--paper)}
.story-grid{max-width:1440px;margin:auto;display:grid;grid-template-columns:1.05fr .95fr;min-height:730px}
.story-copy{padding:95px 8vw;display:flex;flex-direction:column;justify-content:center}
.story-copy h2{font-size:clamp(46px,5vw,72px);line-height:.98;margin:0 0 26px}
.story-copy p{font-size:14.5px;line-height:1.9;color:#5d5853;margin:0 0 16px}
.quote{font-family:"Cormorant Garamond",Georgia,serif!important;color:var(--ink)!important;font-size:31px!important;line-height:1.2!important;margin-top:18px!important}
.split{max-width:1280px;margin:auto;display:grid;grid-template-columns:.95fr 1.05fr;gap:76px;align-items:center}
.split .photo{min-height:575px}
.split h2{font-size:clamp(48px,5vw,68px);line-height:1;margin:0 0 20px}
.split h3{font-size:30px;line-height:1.18;margin:0 0 22px}
.split p{line-height:1.85;color:var(--muted);font-size:14.5px;margin:0 0 28px}
.band{padding:100px 6vw;background:var(--paper2);text-align:center}
.band h2{font-size:clamp(43px,5vw,65px);line-height:1;margin:0 0 15px}
.band>p{color:var(--muted);line-height:1.75;max-width:700px;margin:0 auto 40px}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);max-width:1080px;margin:auto;gap:28px}
.benefit{border-top:1px solid #cfc4ba;padding:24px 10px 0}
.benefit strong{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:27px;font-weight:500;margin-bottom:8px}
.benefit span{font-size:13px;color:var(--muted);line-height:1.6}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 24px}
.product{background:#fff}
.product-image{height:510px;background:#eee;overflow:hidden}
.product-image img{transition:.6s}.product:hover .product-image img{transform:scale(1.025)}
.product-info{padding:18px 3px 0}
.product-info h3{font-size:29px;margin:0 0 6px}
.product-info p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0 0 12px}
.badge{display:inline-block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:6px 9px;margin-bottom:12px}
.collection-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.collection{position:relative;min-height:620px;overflow:hidden}
.collection:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.58),rgba(0,0,0,0) 62%)}
.collection .copy{position:absolute;z-index:2;left:36px;right:36px;bottom:34px;color:white}
.collection h3{font-size:46px;margin:0 0 8px}
.collection p{max-width:520px;line-height:1.65;font-size:13.5px;margin:0 0 18px}
.contact-wrap{max-width:1180px;margin:auto;padding:105px 6vw;display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}
.contact-copy h1{font-size:64px;line-height:.95;margin:0 0 22px}
.contact-copy p{line-height:1.85;color:var(--muted);font-size:14.5px}
.contact-details{margin-top:35px;border-top:1px solid var(--line);padding-top:25px}
.contact-details div{margin-bottom:15px;font-size:13px}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}.field.full{grid-column:1/-1}
label{font-size:10px;letter-spacing:.13em;text-transform:uppercase}
input,textarea{width:100%;border:1px solid var(--line);background:#fff;padding:14px 15px;outline:none}
textarea{min-height:160px;resize:vertical}
input:focus,textarea:focus{border-color:#8e8279}
.form-note{grid-column:1/-1;font-size:11px;color:var(--muted);line-height:1.6}
.success{display:none;grid-column:1/-1;padding:14px;border:1px solid #cfc4ba;background:var(--paper);font-size:13px}
footer{background:#171513;color:#fff;padding:72px 6vw 32px}
.footer-grid{max-width:1300px;margin:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:60px}
footer .brand{display:block;margin-bottom:18px}
footer p{color:#bbb5af;line-height:1.75;max-width:450px;font-size:13.5px}
footer h4{font-size:10px;letter-spacing:.17em;text-transform:uppercase;margin:0 0 17px}
footer a{display:block;color:#d9d4cf;margin:10px 0;font-size:13.5px}
.footnote{max-width:1300px;margin:44px auto 0;padding-top:21px;border-top:1px solid #302d2a;color:#827b75;font-size:11px}
@media(max-width:1040px){
  .menu{display:none;position:absolute;top:82px;left:0;right:0;background:#fff;flex-direction:column;padding:22px 28px;border-top:1px solid #eee}
  .menu.open{display:flex}.menu a{padding:9px 0}.burger{display:block}
  .nav{grid-template-columns:auto 1fr auto}.brand{justify-self:center}.nav-cta{font-size:0}.nav-cta:after{content:"Contacto";font-size:10px}
  .cards,.product-grid{grid-template-columns:1fr 1fr}.story-grid,.split,.contact-wrap{grid-template-columns:1fr}
  .story-image,.split .photo{min-height:520px}.collection-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .nav{min-height:68px;padding:0 18px}.brand{font-size:27px}.menu{top:68px}
  .hero{min-height:78vh}.hero-copy{padding:0 24px 55px}.page-hero .inner{padding:0 24px 48px}
  .section,.band{padding:72px 20px}.story-copy{padding:65px 24px}.split{gap:36px}
  .cards,.product-grid,.benefits{grid-template-columns:1fr}.card{min-height:570px}.product-image{height:500px}
  .collection{min-height:550px}.contact-wrap{padding:72px 22px;gap:45px}.contact-copy h1{font-size:50px}
  form{grid-template-columns:1fr}.field.full,.form-note,.success{grid-column:1}
  .footer-grid{grid-template-columns:1fr;gap:35px}
}





/* ===== LOGO OFICIAL BIKINÊ ===== */
.brand-logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  line-height:1;
  min-width:190px;
}
.brand-logo img{
  width:190px;
  height:auto;
  object-fit:contain;
  display:block;
}
.brand-logo .logo-on-dark{display:none;}
body.dark-mode header .brand-logo .logo-on-light{display:none;}
body.dark-mode header .brand-logo .logo-on-dark{display:block;}
.footer-logo{
  margin-bottom:22px;
}
.footer-logo img{
  width:220px;
}
@media(max-width:1180px){
  .brand-logo{min-width:165px;}
  .brand-logo img{width:165px;}
}
@media(max-width:650px){
  .brand-logo{min-width:138px;}
  .brand-logo img{width:138px;}
  .footer-logo img{width:185px;}
}

/* ===== MODO OSCURO ===== */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-soft:#f7f3ed;
  --surface-soft-2:#eee7df;
  --text:#171513;
  --text-muted:#706a64;
  --border:#d9d1c8;
  --header-bg:rgba(255,255,255,.96);
  --footer-bg:#171513;
  --footer-text:#ffffff;
}

body{
  background:var(--bg);
  color:var(--text);
  transition:background-color .28s ease,color .28s ease;
}

body.dark-mode{
  --bg:#0f0f0f;
  --surface:#151515;
  --surface-soft:#181818;
  --surface-soft-2:#202020;
  --text:#f3efe9;
  --text-muted:#b5aea7;
  --border:#34302c;
  --header-bg:rgba(15,15,15,.96);
  --footer-bg:#090909;
  --footer-text:#f7f3ed;
}

body.dark-mode header{
  background:var(--header-bg);
  border-bottom-color:rgba(255,255,255,.08);
}

body.dark-mode .menu{
  background:var(--surface);
}

body.dark-mode .menu a:hover,
body.dark-mode .menu a.active{
  border-color:var(--text);
}

body.dark-mode .nav-cta{
  border-color:var(--text);
}

body.dark-mode .section,
body.dark-mode .essence,
body.dark-mode .contact-wrap{
  background:var(--bg);
}

body.dark-mode .story,
body.dark-mode .band{
  background:var(--surface-soft);
}

body.dark-mode .product,
body.dark-mode input,
body.dark-mode textarea{
  background:var(--surface);
  color:var(--text);
}

body.dark-mode input,
body.dark-mode textarea{
  border-color:var(--border);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{
  color:#7f7872;
}

body.dark-mode .section-head p,
body.dark-mode .split p,
body.dark-mode .story-copy p,
body.dark-mode .contact-copy p,
body.dark-mode .product-info p,
body.dark-mode .benefit span,
body.dark-mode .band>p,
body.dark-mode .form-note{
  color:var(--text-muted);
}

body.dark-mode .quote,
body.dark-mode .story-copy .quote{
  color:var(--text)!important;
}

body.dark-mode .benefit,
body.dark-mode .contact-details{
  border-color:var(--border);
}

body.dark-mode .badge{
  border-color:var(--border);
  color:var(--text-muted);
}

body.dark-mode .btn:not(.light){
  color:var(--text);
  border-color:var(--text);
}

body.dark-mode .btn:not(.light):hover{
  background:var(--text);
  color:#111;
}

body.dark-mode footer{
  background:var(--footer-bg);
  color:var(--footer-text);
}

body.dark-mode .footnote{
  border-color:#242424;
}

.theme-toggle{
  width:38px;
  height:38px;
  border:1px solid rgba(23,21,19,.18);
  background:transparent;
  color:var(--text);
  border-radius:999px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.25s ease;
  padding:0;
  margin-left:4px;
}

.theme-toggle:hover{
  transform:translateY(-1px);
  border-color:currentColor;
}

body.dark-mode .theme-toggle{
  border-color:rgba(255,255,255,.22);
}

.theme-toggle svg{
  width:17px;
  height:17px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.theme-toggle .sun-icon{display:none}
body.dark-mode .theme-toggle .moon-icon{display:none}
body.dark-mode .theme-toggle .sun-icon{display:block}

@media(max-width:1040px){
  .theme-toggle{justify-self:end}
}