/* Obrena — página Marca & Design (/marca-e-design/). Só o que é desta página; o compartilhado das internas vive em interna.css.
   Material real: a família de marcas do Residencial Maria Rita (media/marca/maria-rita/). */

/* ===== Hero: copy + família de marcas ===== */
.mk-hero{position:relative;overflow:hidden;padding:64px 0 88px;background:radial-gradient(50% 60% at 82% 30%,rgba(0,194,168,.14),transparent 70%),var(--bg)}
.mk-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:56px;max-width:var(--max);margin:auto;padding:0 26px}
.mk-hero-copy{padding-top:24px}
.mk-hero-copy h1{margin:0;font-size:clamp(38px,4.3vw,62px);line-height:1.02;letter-spacing:-.04em}
.mk-hero-copy h1 span{color:var(--accent)}
.mk-hero-text{max-width:520px;margin:22px 0 0;color:#4c515b;font-size:17px;line-height:1.7}
.mk-hero-text a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(14,18,32,.3)}
.mk-hero-text a:hover{text-decoration-color:var(--ink)}
.mk-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.mk-familia{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:18px}
.mk-mae{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:0;padding:28px 22px 22px;border-radius:24px;background:#fff;border:1.5px solid var(--line);box-shadow:0 30px 60px -48px rgba(14,18,32,.55)}
.mk-mae img{display:block;width:100%;max-width:330px;height:auto}
.mk-mae figcaption,.mk-casas-titulo{margin:0;color:#666c77;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.mk-casas-wrap{display:flex;flex-direction:column;gap:12px;padding:20px 20px 20px;border-radius:24px;background:#fff;border:1.5px solid var(--line);box-shadow:0 30px 60px -48px rgba(14,18,32,.55)}
.mk-casas{display:none;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.mk-familia.js .mk-casas{display:grid}
.mk-casa{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:10px 4px 9px;border:1.5px solid transparent;border-radius:16px;background:transparent;font:inherit;color:#4c515b;font-size:12.5px;font-weight:750;letter-spacing:-.01em;line-height:1.1;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.mk-casa img{display:block;width:52px;height:52px;transition:transform .25s}
.mk-casa:hover,.mk-casa:focus-visible{border-color:var(--line);background:var(--bg);color:var(--ink)}
.mk-casa:hover img{transform:scale(1.08)}
.mk-casa[aria-pressed="true"]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,#fff);color:var(--ink)}
.mk-casa:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mk-detalhe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mk-familia.js .mk-detalhe{display:block;flex:1}
.mk-lockup{display:flex;align-items:center;justify-content:center;margin:0;padding:14px 8px;border-radius:18px;background:var(--bg);background:color-mix(in srgb,var(--acc) 12%,#fff)}
.mk-lockup img{display:block;width:100%;height:auto}
.mk-familia.js .mk-lockup{display:none;height:100%;min-height:300px;padding:22px}
.mk-familia.js .mk-lockup.is-on{display:flex;animation:mk-entra .35s ease-out}
.mk-familia.js .mk-lockup img{max-height:300px;width:auto;max-width:100%}
@keyframes mk-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== Aplicada: do favicon ao cartão ===== */
.mk-aplic{padding:104px 0 96px;background:#fff}
.mk-escala{display:grid;grid-template-columns:.9fr 1.5fr 1.1fr;align-items:start;gap:20px;margin:0;padding:0;list-style:none;counter-reset:esc}
.mk-esc{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
.mk-esc-visual{display:flex;align-items:center;justify-content:center;min-height:180px;padding:22px;border-radius:20px;background:var(--bg);border:1.5px solid var(--line);overflow:hidden}
.mk-esc>p{margin:0;padding-left:34px;color:#4c515b;font-size:14.5px;line-height:1.55;counter-increment:esc}
.mk-esc>p::before{content:counter(esc);position:absolute;left:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--display);font-size:12px;font-weight:800}
.mk-esc>p b{display:block;margin-bottom:2px;color:var(--ink);font-family:var(--display);font-size:17px;letter-spacing:-.02em}
.mk-esc-favicon .mk-esc-visual{gap:22px}
.mk-fav-real{width:32px;height:32px;flex:none;image-rendering:auto}
.mk-fav-grande{width:120px;height:120px;flex:none;filter:drop-shadow(0 10px 20px rgba(14,18,32,.15))}
.mk-esc-cabecalho .mk-esc-visual{padding:0;background:#1a2a20;min-height:0}
.mk-esc-cabecalho img{display:block;width:100%;height:auto}
.mk-esc-cartao .mk-esc-visual{padding:26px}
.mk-esc-cartao img{display:block;width:100%;max-width:360px;height:auto;border-radius:8px;box-shadow:0 22px 40px -22px rgba(14,18,32,.55)}

.mk-versoes{display:grid;grid-template-columns:repeat(3,150px) minmax(0,1fr);align-items:stretch;gap:14px;margin-top:22px}
.mk-versao{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin:0;padding:22px 12px 16px;border-radius:20px;background:var(--bg);border:1.5px solid var(--line)}
.mk-versao img{display:block;width:88px;height:88px}
.mk-versao figcaption{color:#666c77;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.mk-versao-escura{background:#234A2C;border-color:#234A2C}
.mk-versao-escura figcaption{color:rgba(255,255,255,.75)}
.mk-versoes-nota{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px 26px;border-radius:20px;border:1.5px solid var(--line)}
.mk-versoes-nota p{margin:0;color:#4c515b;font-size:15px;line-height:1.6}
.mk-versoes-nota b{color:var(--ink)}
.mk-cor{display:inline-block;width:14px;height:14px;margin:0 2px -2px 4px;border-radius:4px;background:var(--c);border:1px solid rgba(14,18,32,.15)}

.mk-decisao{display:grid;grid-template-columns:200px 240px minmax(0,1fr);align-items:center;gap:22px;margin-top:22px;padding:26px 30px;border-radius:24px;background:var(--ink);color:#fff}
.mk-decisao-fig{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0;text-align:center}
.mk-decisao-fig img{display:block}
.mk-decisao-fig>img{width:120px;height:120px}
.mk-decisao-par{display:flex;align-items:center;gap:18px}
.mk-decisao-par img:first-child{width:120px;height:120px}
.mk-decisao-par .mk-24{width:24px;height:24px;padding:4px;border-radius:6px;background:#fff;box-sizing:content-box}
.mk-decisao-fig figcaption{color:rgba(255,255,255,.72);font-size:12px;font-weight:750;letter-spacing:.04em}
.mk-decisao-texto .eyebrow{color:rgba(255,255,255,.7)}
.mk-decisao-texto .eyebrow::before{background:var(--accent-2)}
.mk-decisao-texto p:not(.eyebrow){margin:10px 0 0;color:rgba(255,255,255,.85);font-size:15.5px;line-height:1.65}

/* ===== Imagem & fotografia: recortes ===== */
.mk-imagem{padding:104px 0 110px;background:var(--ink);color:#fff}
.mk-imagem-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:64px}
.mk-imagem-copy .eyebrow{color:rgba(255,255,255,.7)}
.mk-imagem-copy .eyebrow::before{background:var(--accent-2)}
.mk-imagem-copy h2{margin:0;font-size:clamp(34px,3.4vw,50px);line-height:1.06;letter-spacing:-.035em}
.mk-imagem-copy h2 span{color:var(--accent-2)}
.mk-imagem-copy>p{max-width:560px;margin:20px 0 0;color:rgba(255,255,255,.78);font-size:16.5px;line-height:1.7}
.mk-imagem-lista{margin:26px 0 0;padding:0;list-style:none}
.mk-imagem-lista li{position:relative;padding:12px 0 12px 26px;color:rgba(255,255,255,.8);font-size:15.5px;line-height:1.6;border-top:1px solid rgba(255,255,255,.14)}
.mk-imagem-lista li::before{content:"";position:absolute;left:4px;top:20px;width:8px;height:8px;border-radius:2px;background:var(--accent-2)}
.mk-imagem-lista strong{color:#fff;font-weight:750}
.mk-recortes{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;gap:14px;align-items:start}
.mk-recorte{position:relative;margin:0;overflow:hidden;border-radius:16px;background:#1a2036;box-shadow:0 30px 60px -40px rgba(0,0,0,.9)}
.mk-recorte img{display:block;width:100%;height:100%;object-fit:cover}
.mk-recorte figcaption{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:99px;background:rgba(14,18,32,.72);color:#fff;font-size:11.5px;font-weight:750;letter-spacing:.04em;backdrop-filter:blur(4px)}
.mk-recorte-site{grid-column:1/-1;aspect-ratio:16/9}
.mk-recorte-site img{object-position:50% 40%}
.mk-recorte-perfil{grid-column:1/3;aspect-ratio:1/1}
.mk-recorte-perfil img{object-position:96% 55%}
.mk-recorte-previa{grid-column:3/7;aspect-ratio:1.91/1}
.mk-recorte-previa img{object-position:50% 45%}
.mk-recorte-story{grid-column:1/3;aspect-ratio:4/5}
.mk-recorte-story img{object-position:8% 50%}
.mk-recortes-nota{grid-column:3/7;align-self:stretch;display:flex;flex-direction:column;justify-content:center;margin:0;padding:22px 24px;border-radius:16px;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8);font-size:15px;line-height:1.6}
.mk-recortes-nota b{display:block;margin-bottom:6px;color:#fff;font-family:var(--display);font-size:18px;letter-spacing:-.02em}

/* ===== Larguras ===== */
@media (max-width:1180px){
  .mk-hero-inner{grid-template-columns:1fr;gap:40px}
  .mk-hero-copy{padding-top:0}
  .mk-hero-text{max-width:640px}
  .mk-escala{grid-template-columns:1fr 1fr;align-items:start}
  .mk-esc-cabecalho{grid-column:1/-1}
  .mk-versoes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mk-versoes-nota{grid-column:1/-1}
  .mk-decisao{grid-template-columns:1fr 1fr}
  .mk-decisao-texto{grid-column:1/-1}
  .mk-imagem-grid{gap:40px}
}
@media (max-width:960px){
  .mk-hero{padding:48px 0 72px}
  .mk-familia{grid-template-columns:1fr}
  .mk-mae{padding:18px 22px 16px}
  .mk-mae img{max-width:240px}
  .mk-aplic{padding:84px 0 80px}
  .mk-imagem{padding:84px 0 90px}
  .mk-imagem-grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:700px){
  .mk-hero-inner{padding-inline:18px}
  .mk-hero-copy h1{font-size:clamp(33px,9.6vw,46px)}
  .mk-hero-text{font-size:15.5px}
  .mk-mae{padding:14px 16px 12px}
  .mk-mae img{max-width:210px}
  .mk-casas-wrap{padding:16px 12px}
  .mk-casas{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
  .mk-casa{padding:8px 2px;font-size:10.5px;gap:5px}
  .mk-casa img{width:38px;height:38px}
  .mk-familia.js .mk-lockup{min-height:240px;padding:16px}
  .mk-familia.js .mk-lockup img{max-height:240px}
  .mk-detalhe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-escala{grid-template-columns:1fr;gap:18px}
  .mk-esc-visual{min-height:140px}
  .mk-esc-favicon .mk-esc-visual{gap:18px}
  .mk-fav-grande{width:96px;height:96px}
  .mk-versoes{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .mk-versao{padding:16px 6px 12px}
  .mk-versao img{width:64px;height:64px}
  .mk-versao figcaption{font-size:10.5px}
  .mk-versoes-nota{padding:18px 20px}
  .mk-decisao{grid-template-columns:1fr 1fr;gap:14px;padding:20px 18px}
  .mk-decisao-par img:first-child{width:88px;height:88px}
  .mk-decisao-par{gap:12px}
  .mk-recortes{gap:10px}
  .mk-recortes-nota{padding:16px 18px;font-size:14px}
}
@media (max-width:390px){
  .mk-hero-actions .button{width:100%;min-height:48px;padding:12px 18px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .mk-familia.js .mk-lockup.is-on{animation:none}
  .mk-casa img{transition:none}
}