/* =========================================================
   SOFÍA STEFANI — sistema visual global
   ========================================================= */

:root{
  --ink:#11161D;         /* Ink Black — main dark background */
  --carbon:#343A40;      /* Graphite — secondary dark background/text */
  --carbon-2:#465866;    /* Deep Steel — accent dark state, restrained emphasis */
  --paper:#F7F8F9;       /* Cool White — default light section */
  --paper-2:#E8ECEF;     /* Mist Gray — subtle transitions */
  --paper-pure:#FFFFFF;  /* Pure White — books/media canvases */
  --white:#FFFFFF;
  --stone:#343A40;       /* Graphite, used at reduced opacity for body copy */
  --stone-2:#A7AFB7;     /* Cool Gray — secondary text/metadata/lines */
  --line-on-dark:rgba(255,255,255,0.14);
  --line-on-light:rgba(17,22,29,0.12);
  --bronze:#536575;      /* Steel Blue — the only chromatic accent */
  --bronze-soft:#536575; /* same family — no separate light tint per spec */
  --steel-hover:#465866; /* Deep Steel — hover/selected states */
  --text-dark:#343A40;   /* Graphite — titles/primary text on light surfaces */

  --font-display:'Cormorant Garamond', serif;
  --font-body:'Inter', sans-serif;
  --font-label:'Montserrat', sans-serif;

  --maxw:1360px;
  --gutter:64px;
  --gutter-m:24px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; }

.grid{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

@media (max-width:1100px){
  .grid{ padding:0 40px; column-gap:18px; }
}
@media (max-width:760px){
  .grid{ padding:0 var(--gutter-m); column-gap:14px; }
}

.eyebrow{
  font-family:var(--font-label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bronze);
}
.on-dark .eyebrow{ color:var(--bronze-soft); }

.link-editorial{
  font-family:var(--font-label);
  font-size:12px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-bottom:5px;
  border-bottom:1px solid currentColor;
  transition:gap .25s ease, opacity .25s ease;
}
.link-editorial:hover{ gap:13px; opacity:.75; }
.link-editorial:focus-visible{ outline:2px solid var(--bronze); outline-offset:4px; }

/* reveal-on-scroll (respects reduced motion) */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   HEADER
   ========================================================= */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:28px 0;
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.site.scrolled{
  background:rgba(11,15,23,.9);
  backdrop-filter:blur(10px);
  padding:16px 0;
  border-bottom:1px solid var(--line-on-dark);
}
header.site .bar{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
@media (max-width:1100px){ header.site .bar{ padding:0 40px; } }
@media (max-width:760px){ header.site .bar{ padding:0 var(--gutter-m); } }

.brandmark{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:21px;
  color:var(--white);
}
nav.primary{ display:flex; align-items:center; gap:40px; }
nav.primary ul{ list-style:none; display:flex; gap:34px; margin:0; padding:0; }
nav.primary a{
  font-family:var(--font-label);
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white); opacity:.82; transition:opacity .2s ease;
}
nav.primary a:hover{ opacity:1; }
nav.primary a.contact{
  opacity:1; color:var(--bronze-soft);
  border-bottom:1px solid var(--bronze); padding-bottom:3px;
}
.lang-switch{
  font-family:var(--font-label); font-size:11px; letter-spacing:.1em;
  color:var(--white); opacity:.75; display:flex; gap:6px; align-items:center;
}
.lang-switch button{
  background:none; border:none; color:inherit; cursor:pointer; opacity:.6; padding:2px;
}
.lang-switch button[aria-current="true"]{ opacity:1; color:var(--bronze-soft); }

.hamburger{ display:none; }
@media (max-width:900px){
  nav.primary ul{ display:none; }
  .hamburger{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;
    padding:6px; z-index:220;
  }
  .hamburger span{ width:22px; height:1px; background:var(--white); display:block; }
}

.mobile-menu{
  position:fixed; inset:0; z-index:210;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gutter-m);
  transform:translateY(-100%);
  transition:transform .4s ease;
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:26px; }
.mobile-menu a{
  font-family:var(--font-display); font-style:italic; font-size:34px; color:var(--white);
}
.mobile-menu a.contact{ color:var(--bronze-soft); }
.mobile-menu-close{
  position:absolute; top:26px; right:var(--gutter-m); background:none; border:none;
  color:var(--white); font-size:28px; cursor:pointer;
}

/* =========================================================
   SECTION SURFACES
   ========================================================= */
section{ position:relative; }
.surface-ink{ background:var(--ink); color:var(--white); }
.surface-carbon{ background:var(--carbon); color:var(--white); }
.surface-paper{ background:var(--paper); color:var(--text-dark); }

.section-pad{ padding:150px 0; }
@media (max-width:900px){ .section-pad{ padding:96px 0; } }

h2.headline{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.01em;
}
.body-copy{
  font-size:16.5px;
  line-height:1.75;
  color:var(--stone);
  opacity:.78;
}
.on-dark .body-copy{ color:rgba(255,255,255,.68); opacity:1; }

.closing-line{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  line-height:1.2;
}

/* convergence lines (shared abstract motif) */
svg.motif{ position:absolute; pointer-events:none; }
svg.motif path{ stroke:var(--bronze); fill:none; }

/* photo microzoom utility */
.photo-zoom{ overflow:hidden; }
.photo-zoom img, .photo-zoom .bg{ transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.photo-zoom:hover img, .photo-zoom:hover .bg{ transform:scale(1.035); }

/* editorial number */
.num{
  font-family:var(--font-label); font-size:11px; letter-spacing:.08em;
  color:var(--bronze); font-weight:600;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer.site{
  background:var(--ink);
  color:var(--white);
  border-top:1px solid var(--line-on-dark);
  padding:70px 0 0;
}
@media (max-width:900px){
  footer.site{ padding:40px 0 0; }
}
.footer-top{
  display:grid; grid-template-columns:0.9fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:56px;
}
.footer-id .sig-mark{ margin-bottom:16px; }
.footer-id .tag{
  display:flex; flex-direction:column; gap:4px;
  font-family:var(--font-label); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--stone-2);
}
.footer-col h4{
  font-family:var(--font-label); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bronze-soft); margin:0 0 18px; line-height:1;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.footer-col a{
  font-family:var(--font-body); font-size:14px; color:rgba(251,253,255,.72);
  transition:color .2s ease;
}
.footer-col a:hover{ color:var(--white); }

/* shared signature/logo sizing — applies on all pages */
.sig-mark{ height:26px; max-width:100%; display:block; }
.sig-mark img{ height:100%; width:auto; max-width:100%; display:block; object-fit:contain; }
.footer-id .sig-mark{ height:24px; }
.footer-legal{
  border-top:1px solid var(--line-on-dark);
  padding:22px var(--gutter);
  max-width:var(--maxw); margin:0 auto;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--font-label); font-size:10.5px; letter-spacing:.08em; color:var(--stone-2);
}
@media (max-width:900px){
  .footer-top{
    max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter-m) 24px;
    grid-template-columns:1fr 1fr; row-gap:24px; column-gap:16px;
  }
  .footer-id{
    display:flex; flex-direction:column; align-items:center; text-align:center;
  }
  .footer-id .sig-mark{ margin:0 auto 8px; }
  .footer-id .tag{ gap:2px; }
  .footer-col{ text-align:left; }
  .footer-col h4{ margin-bottom:11px; }
  .footer-col ul{ gap:7px; }
  .footer-legal{ padding:13px var(--gutter-m); flex-direction:column; gap:5px; }
}
@media (min-width:901px){
  .footer-top{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
}