:root{
  --bg:#f3f2ef;
  --fg:#111;
  --muted:#555;
  --rule:#d9d7d2;

  --max:1100px;
  --pad:40px;
  --gap:18px;

  --h1:28px;
  --h2:14px;
  --body:16px;
  --meta:13px;

  --wordmark-size:14px;         /* tamaño base del texto */
  --wordmark-size-mobile:14px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:var(--body);
  line-height:1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:inherit; text-decoration:none}
a.underline{border-bottom:1px solid #999}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:var(--pad);
}

/* Header */
.header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.brand{
  display:flex;
  align-items:flex-start;
}

.brand a{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  line-height:1.1;
}

/* Logo: control por altura, estable */
.brand img{
  display:block;
  height:40px;
  width:auto;
  object-fit:contain;
  object-position:left center;
}

/* El JS hará que este bloque tenga EXACTAMENTE el ancho del logo */
.brand-name{
  display:block;
  font-size:var(--wordmark-size);
  letter-spacing:0px;   /* el JS lo ajusta */
  opacity:0.82;
  white-space:nowrap;
}

.nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.nav a{border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:#999}

.lang{
  color:var(--muted);
  font-size:var(--meta);
  text-align:right;
  margin-top:6px;
}

.rule{border-top:1px solid var(--rule); margin:18px 0 26px 0}

h1{font-size:var(--h1); margin:0 0 10px 0; font-weight:600}
h2{font-size:var(--h2); margin:26px 0 8px 0; font-weight:600; letter-spacing:0.02em}
p{margin:0 0 10px 0}
.muted{color:var(--muted); font-size:var(--meta)}

/* Grids */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--gap);
}

.card{border-top:1px solid var(--rule); padding-top:12px}
.card img{width:100%; height:180px; object-fit:cover; display:block; background:#e6e3dc}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:14px;
}
.gallery img{width:100%; height:auto; display:block; background:#e6e3dc}

/* Home hero */
.hero{ margin: 10px 0 18px 0; }
.hero a{display:block}
.hero img{
  width:100%;
  height:380px;
  object-fit:cover;
  display:block;
  background:#e6e3dc;
  border: 1px solid color-mix(in srgb, var(--rule) 75%, transparent);
  border-radius: 3px;
}

/* Micro refinamiento */
p a.underline{
  border-bottom-color: color-mix(in srgb, #999 70%, transparent);
}

/* Responsive */
@media (max-width:720px){
  :root{ --pad:22px; --h1:24px; }

  .header{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .brand img{height:32px}
  .brand-name{font-size:var(--wordmark-size-mobile); opacity:0.86}

  .nav{justify-content:flex-start; gap:12px}

  .lang{text-align:left; margin-top:4px}

  .hero img{ height:240px; }
}