/* =========================================================
   OS OLHOS MORTOS — A Arte de R. Gabrio
   Paleta: preto absoluto, osso/bege claro, vinho escuro (accent)
   Versão com compatibilidade ampliada (Safari antigo / iPhone 7)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Butcherman&family=Oswald:wght@400;500;600;700&family=EB+Garamond:ital@0;1&display=swap');

:root{
    --preto: #0a0a0a;
    --preto-suave: #121212;
    --osso: #e8e4d8;
    --osso-fraco: #b9b3a2;
    --vinho: #6e1414;
    --vinho-claro: #9c2323;
    --linha: #2a2a2a;
    --fonte-titulo: 'Playfair Display SC', serif;
    --fonte-menu: 'Oswald', sans-serif;
    --fonte-corpo: 'EB Garamond', serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

/* [COMPAT] CHAVE FECHANDO O BODY — era isso que derrubava o CSS inteiro no Safari antigo */
body {
    background-color: var(--preto);
    color: var(--osso);
    font-family: var(--fonte-corpo);
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    background-image:
        url("https://olhosmortos.com/img/background-escuro.webp"),
        radial-gradient(ellipse at top, rgba(255,255,255,0.03), transparent 60%),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.008) 0px,
            transparent 1px,
            transparent 2px
        );
} /* <-- chave que faltava */

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--vinho); color:var(--osso); }

/* Foco visível para acessibilidade via teclado
   (navegadores sem :focus-visible apenas ignoram estas regras, sem quebrar o resto) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--vinho-claro);
    outline-offset:3px;
}

/* ---------- CABEÇALHO ---------- */
.topo{
    text-align:center;
    padding:16px 20px 28px;
    position:relative;
}

.logoheader{ width:100%; height:16vh; }

.marca h1{
    font-family:var(--fonte-titulo);
    font-weight:400;
    font-size:3rem;                                  /* [COMPAT] fallback p/ clamp() */
    font-size:clamp(2.4rem, 6vw, 4.2rem);
    letter-spacing:3px;
    color:var(--osso);
    text-shadow: 0 0 18px rgba(230,225,216,0.15);
    line-height:1;
}

.marca .subtitulo{
    font-family:var(--fonte-menu);
    text-transform:uppercase;
    letter-spacing:8px;
    font-size:0.78rem;
    color:var(--osso-fraco);
    margin-top:10px;
}

/* Linha "rasgada" separando o título do menu — o elemento assinatura da página */
.linha-rasgada{
    width:86%;                                       /* [COMPAT] fallback p/ min() */
    max-width:720px;
    width:min(720px, 86%);
    height:14px;
    margin:26px auto 22px;
    background:
        repeating-linear-gradient(100deg,
            transparent 0 6px,
            var(--linha) 6px 7px);
    /* [COMPAT] prefixo para Safari < 13.1 */
    -webkit-clip-path: polygon(
        0% 40%, 4% 60%, 9% 35%, 14% 65%, 19% 45%, 24% 70%, 29% 30%,
        34% 55%, 39% 40%, 44% 65%, 49% 35%, 54% 60%, 59% 42%, 64% 68%,
        69% 33%, 74% 58%, 79% 40%, 84% 66%, 89% 38%, 94% 62%, 100% 45%,
        100% 55%, 94% 70%, 89% 46%, 84% 74%, 79% 48%, 74% 66%, 69% 41%,
        64% 76%, 59% 50%, 54% 68%, 49% 43%, 44% 73%, 39% 48%, 34% 63%,
        29% 38%, 24% 78%, 19% 53%, 14% 73%, 9% 43%, 4% 68%, 0% 48%
    );
    clip-path: polygon(
        0% 40%, 4% 60%, 9% 35%, 14% 65%, 19% 45%, 24% 70%, 29% 30%,
        34% 55%, 39% 40%, 44% 65%, 49% 35%, 54% 60%, 59% 42%, 64% 68%,
        69% 33%, 74% 58%, 79% 40%, 84% 66%, 89% 38%, 94% 62%, 100% 45%,
        100% 55%, 94% 70%, 89% 46%, 84% 74%, 79% 48%, 74% 66%, 69% 41%,
        64% 76%, 59% 50%, 54% 68%, 49% 43%, 44% 73%, 39% 48%, 34% 63%,
        29% 38%, 24% 78%, 19% 53%, 14% 73%, 9% 43%, 4% 68%, 0% 48%
    );
    opacity:0.7;
}

nav.menu-principal{
    font-family:var(--fonte-menu);
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:0.95rem;
    font-weight:500;
}

nav.menu-principal ul{
    list-style:none;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    /* [COMPAT] gap:0 removido (não fazia efeito e flex-gap não existe em Safari < 14.1) */
}

nav.menu-principal li{
    display:flex;
    align-items:center;
}

nav.menu-principal li + li::before{
    content:'|';
    color:var(--linha);
    margin:0 18px;
    font-weight:300;
}

nav.menu-principal a{
    padding:6px 2px;
    position:relative;
    transition:color .25s ease;
}

nav.menu-principal a::after{
    content:'';
    position:absolute;
    left:0; right:0; bottom:-4px;
    height:1px;
    background:var(--vinho-claro);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .25s ease;
}

nav.menu-principal a:hover,
nav.menu-principal a.ativo{
    color:var(--vinho-claro);
}
nav.menu-principal a:hover::after,
nav.menu-principal a.ativo::after{
    transform:scaleX(1);
}

/* ---------- CONTEÚDO ---------- */
main{
    flex:1;
    width:100%;
}

.container{
    max-width:1100px;
    margin:0 auto;
    padding:0 24px;
}

/* ---------- SLIDESHOW (Home) ---------- */
.slideshow{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    /* [COMPAT] gap trocado por margem equivalente (mesmo espaçamento de 24px) */
    padding:38px 20px 10px;
    max-width:1000px;
    margin:0 auto;
}
.slideshow > * + *{ margin-left:24px; }   /* [COMPAT] substitui gap:24px */

.slide-seta{
    background:none;
    border:none;
    cursor:pointer;
    color:var(--osso-fraco);
    font-size:2.2rem;
    line-height:1;
    padding:10px;
    transition:color .2s ease, transform .2s ease;
    flex-shrink:0;
}
.slide-seta:hover{ color:var(--vinho-claro); transform:scale(1.15); }

.slide-palco{
    width:78vw;                 /* [COMPAT] fallback p/ min() */
    max-width:430px;
    width:min(430px, 78vw);
}

.slide-item{
    display:none;
    text-align:center;
    -webkit-animation:aparecer .5s ease;   /* [COMPAT] */
    animation:aparecer .5s ease;
}
.slide-item.ativo{ display:block; }

@-webkit-keyframes aparecer{   /* [COMPAT] */
    from{ opacity:0; -webkit-transform:translateY(8px); transform:translateY(8px); }
    to{ opacity:1; -webkit-transform:translateY(0); transform:translateY(0); }
}
@keyframes aparecer{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
}

.slide-item .moldura{
    display:block;
    cursor:pointer;
    border:1px solid var(--linha);
    background:var(--preto-suave);
    overflow:hidden;
}

.slide-item img{
    width:100%;
    display:block;
    -webkit-filter:grayscale(1) contrast(1.05);   /* [COMPAT] */
    filter:grayscale(1) contrast(1.05);
    transition:transform .4s ease, filter .4s ease;
}

.slide-item .moldura:hover img{
    transform:scale(1.04);
    -webkit-filter:grayscale(0.4) contrast(1.05);
    filter:grayscale(0.4) contrast(1.05);
}

.slide-legenda{
    display:flex;
    justify-content:space-between;
    font-family:var(--fonte-menu);
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:0.78rem;
    color:var(--osso-fraco);
    margin-top:14px;
    padding:0 2px;
}

.slide-pontos{
    display:flex;
    justify-content:center;
    /* [COMPAT] gap trocado por margem */
    margin:26px 0 50px;
}
.slide-pontos button + button{ margin-left:8px; }   /* substitui gap:8px */
.slide-pontos button{
    width:8px; height:8px; border-radius:50%;
    border:1px solid var(--osso-fraco);
    background:transparent;
    cursor:pointer;
    padding:0;
}
.slide-pontos button.ativo{ background:var(--vinho-claro); border-color:var(--vinho-claro); }

.intro-home{
    text-align:center;
    max-width:640px;
    margin:0 auto 10px;
    color:var(--osso-fraco);
    font-size:1.20rem;
    font-style:italic;
    padding:0 20px;
}

/* ---------- PÁGINAS DE TEXTO (Sobre / Contato) ---------- */
.pagina-titulo{
    font-family:var(--fonte-menu);
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:1.6rem;
    text-align:center;
    margin:10px 0 40px;
    color:var(--osso);
}
.pagina-titulo::after{
    content:'';
    display:block;
    width:60px;
    height:2px;
    background:var(--vinho);
    margin:16px auto 0;
}

.texto-conteudo{
    max-width:720px;
    margin:0 auto 60px;
    font-size:1.12rem;
    line-height:1.85;
    color:var(--osso-fraco);
}
.texto-conteudo p{ margin-bottom:20px; }
.texto-conteudo strong{ color:var(--osso); }

/* ---------- GALERIA (Portfólio) ---------- */
.galeria{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    grid-gap:22px;   /* [COMPAT] Safari 10.1–12 */
    gap:22px;
    margin:10px 0 60px;
}

.galeria-item{
    position:relative;
    border:1px solid var(--linha);
    background:var(--preto-suave);
    overflow:hidden;
    cursor:pointer;
}
.galeria-item img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    display:block;
    -webkit-filter:grayscale(1) contrast(1.05);
    filter:grayscale(1) contrast(1.05);
    transition:transform .4s ease, filter .4s ease;
}
.galeria-item:hover img{
    transform:scale(1.06);
    -webkit-filter:grayscale(0.3) contrast(1.05);
    filter:grayscale(0.3) contrast(1.05);
}
.galeria-legenda{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:14px 12px;
    background:linear-gradient(to top, rgba(0,0,0,0.92), transparent);
    font-family:var(--fonte-menu);
    text-transform:uppercase;
    font-size:0.75rem;
    letter-spacing:1px;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .3s ease, transform .3s ease;
}
.galeria-item:hover .galeria-legenda{ opacity:1; transform:translateY(0); }

.galeria-vazia{
    text-align:center;
    color:var(--osso-fraco);
    font-style:italic;
    padding:60px 0;
}

/* [COMPAT] fallback p/ navegadores sem aspect-ratio (iOS < 15) — altura fixa equivalente */
@supports not (aspect-ratio: 1 / 1){
    .galeria-item img{ height:320px; }
    .admin-card img{ height:260px; }
}

/* Lightbox */
.lightbox{
    position:fixed;
    /* [COMPAT] inset:0 trocado pelas 4 propriedades (Safari < 14.1) */
    top:0; right:0; bottom:0; left:0;
    background:rgba(5,5,5,0.96);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:200;
    padding:30px;
}
.lightbox.aberto{ display:flex; }
.lightbox img{
    max-width:90vw;                      /* [COMPAT] fallback p/ min() */
    max-width:min(760px, 90vw);
    max-height:82vh;
    border:1px solid var(--linha);
}
.lightbox-legenda{
    position:absolute;
    bottom:26px; left:0; right:0;
    text-align:center;
    font-family:var(--fonte-menu);
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:0.8rem;
    color:var(--osso-fraco);
}
.lightbox-fechar{
    position:absolute;
    top:22px; right:30px;
    background:none; border:none;
    color:var(--osso);
    font-size:2rem;
    cursor:pointer;
    line-height:1;
}
.lightbox-fechar:hover{ color:var(--vinho-claro); }

/* ---------- FORMULÁRIO DE CONTATO ---------- */
.form-contato{
    max-width:560px;
    margin:0 auto 70px;
    display:flex;
    flex-direction:column;
    /* [COMPAT] gap trocado por margem equivalente */
}
.form-contato > * + *{ margin-top:18px; }   /* substitui gap:18px */
.form-contato label{
    font-family:var(--fonte-menu);
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:0.78rem;
    color:var(--osso-fraco);
    margin-bottom:8px;
    display:block;
}
.form-contato input,
.form-contato textarea{
    width:100%;
    background:var(--preto-suave);
    border:1px solid var(--linha);
    color:var(--osso);
    padding:12px 14px;
    font-family:var(--fonte-corpo);
    font-size:1rem;
}
.form-contato textarea{ min-height:150px; resize:vertical; }
.form-contato input:focus,
.form-contato textarea:focus{ border-color:var(--vinho-claro); }

.btn{
    display:inline-block;
    background:transparent;
    border:1px solid var(--osso-fraco);
    color:var(--osso);
    font-family:var(--fonte-menu);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:0.85rem;
    padding:13px 28px;
    cursor:pointer;
    transition:all .25s ease;
    align-self:center;
}
.btn:hover{ border-color:var(--vinho-claro); color:var(--vinho-claro); }

.alerta{
    max-width:560px;
    margin:0 auto 24px;
    padding:14px 18px;
    border-left:3px solid var(--vinho-claro);
    background:var(--preto-suave);
    font-family:var(--fonte-menu);
    font-size:0.85rem;
    letter-spacing:0.5px;
}
.alerta.erro{ border-color:#a33; }

.contato-info{
    text-align:center;
    color:var(--osso-fraco);
    margin-bottom:40px;
    font-family:var(--fonte-menu);
    letter-spacing:1px;
    font-size:0.85rem;
}

/* ---------- RODAPÉ ---------- */
footer{
    text-align:center;
    padding:34px 20px 40px;
    border-top:1px solid var(--linha);
    margin-top:20px;
    font-family:var(--fonte-menu);
    letter-spacing:1px;
    font-size:0.75rem;
    color:#555;
}
footer a{ color:#777; }
footer a:hover{ color:var(--vinho-claro); }

/* ---------- ADMIN ---------- */
.admin-body{
    background:var(--preto);
    color:var(--osso);
    font-family:var(--fonte-menu);
}
.admin-login{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.admin-caixa{
    width:100%;
    max-width:380px;
    border:1px solid var(--linha);
    background:var(--preto-suave);
    padding:40px 32px;
}
.admin-caixa h1{
    font-family:var(--fonte-titulo);
    font-weight:400;
    font-size:2rem;
    text-align:center;
    margin-bottom:6px;
}
.admin-caixa .legenda-topo{
    text-align:center;
    text-transform:uppercase;
    font-size:0.7rem;
    letter-spacing:2px;
    color:var(--osso-fraco);
    margin-bottom:30px;
}
.campo{ margin-bottom:18px; }
.campo label{
    display:block;
    text-transform:uppercase;
    font-size:0.72rem;
    letter-spacing:1.5px;
    color:var(--osso-fraco);
    margin-bottom:7px;
}
.campo input, .campo select, .campo textarea{
    width:100%;
    background:var(--preto);
    border:1px solid var(--linha);
    color:var(--osso);
    padding:11px 12px;
    font-family:var(--fonte-corpo);
    font-size:1rem;
}
.campo textarea{ min-height:100px; resize:vertical; }
.campo input:focus, .campo textarea:focus{ border-color:var(--vinho-claro); }

.admin-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 30px;
    border-bottom:1px solid var(--linha);
    flex-wrap:wrap;
    /* [COMPAT] gap trocado por margem */
}
.admin-topbar > * + *{ margin-left:12px; }
.admin-topbar .marca-admin{
    font-family:var(--fonte-titulo);
    font-size:1.5rem;
}
.admin-nav{
    display:flex;
    /* [COMPAT] gap trocado por margem */
    text-transform:uppercase;
    font-size:0.8rem;
    letter-spacing:1px;
    flex-wrap:wrap;
}
.admin-nav a + a{ margin-left:22px; }   /* substitui gap:22px */
.admin-nav a{ color:var(--osso-fraco); transition:color .2s; }
.admin-nav a:hover, .admin-nav a.ativo{ color:var(--vinho-claro); }

.admin-conteudo{
    max-width:1100px;
    margin:0 auto;
    padding:40px 24px 80px;
}
.admin-conteudo h2{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:1.3rem;
    margin-bottom:26px;
    font-weight:500;
}
.admin-painel{
    border:1px solid var(--linha);
    background:var(--preto-suave);
    padding:28px;
    margin-bottom:36px;
}
.admin-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
    grid-gap:18px;   /* [COMPAT] */
    gap:18px;
}
.admin-card{
    border:1px solid var(--linha);
    background:var(--preto-suave);
}
.admin-card img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    display:block;
    -webkit-filter:grayscale(1);
    filter:grayscale(1);
}
.admin-card-corpo{ padding:12px 14px; }
.admin-card-corpo .titulo{ font-size:0.85rem; margin-bottom:4px;}
.admin-card-corpo .ano{ font-size:0.72rem; color:var(--osso-fraco); margin-bottom:12px; }
.admin-card-corpo form{ margin:0; }
.btn-excluir{
    background:none;
    border:1px solid #5a2323;
    color:#c46060;
    font-family:var(--fonte-menu);
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:0.7rem;
    padding:7px 12px;
    cursor:pointer;
    width:100%;
}
.btn-excluir:hover{ background:#5a2323; color:var(--osso); }

.stat-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
    grid-gap:18px;   /* [COMPAT] */
    gap:18px;
    margin-bottom:40px;
}
.stat-card{
    border:1px solid var(--linha);
    background:var(--preto-suave);
    padding:24px;
    text-align:center;
}
.stat-card .numero{
    font-family:var(--fonte-titulo);
    font-size:2.4rem;
    color:var(--vinho-claro);
}
.stat-card .rotulo{
    text-transform:uppercase;
    font-size:0.72rem;
    letter-spacing:2px;
    color:var(--osso-fraco);
    margin-top:6px;
}

.tabela-msgs{
    width:100%;
    border-collapse:collapse;
    font-size:0.9rem;
    table-layout:fixed;
}
.tabela-msgs th, .tabela-msgs td{
    border-bottom:1px solid var(--linha);
    padding:12px 10px;
    text-align:left;
    vertical-align:top;
    word-break:break-word;
    overflow-wrap:break-word;
    overflow-x:hidden;
    overflow-y:auto;
}
.tabela-msgs th{
    text-transform:uppercase;
    font-size:0.7rem;
    letter-spacing:1px;
    color:var(--osso-fraco);
}


/* ---------- TABELA DE MENSAGENS NO MOBILE ---------- */
@media (max-width:640px){
    .tabela-msgs,
    .tabela-msgs tbody,
    .tabela-msgs tr,
    .tabela-msgs td{
        display:block;
        width:100%;
    }

    .tabela-msgs thead{ display:none; }

    .tabela-msgs tr{
        border:1px solid var(--linha);
        background:var(--preto-suave);
        margin-bottom:16px;
        padding:6px 0;
    }

    .tabela-msgs td{
        border:none;
        border-bottom:1px solid var(--linha);
        padding:10px 14px;
        word-break:break-word;
        overflow-wrap:break-word;
    }
    .tabela-msgs td:last-child{ border-bottom:none; }

    .tabela-msgs td::before{
        display:block;
        text-transform:uppercase;
        font-size:0.65rem;
        letter-spacing:1px;
        color:var(--osso-fraco);
        margin-bottom:4px;
    }
    .tabela-msgs td:nth-child(1)::before{ content:'Data'; }
    .tabela-msgs td:nth-child(2)::before{ content:'Nome'; }
    .tabela-msgs td:nth-child(3)::before{ content:'E-mail'; }
    .tabela-msgs td:nth-child(4)::before{ content:'Assunto'; }
    .tabela-msgs td:nth-child(5)::before{ content:'Mensagem'; }
    .tabela-msgs td:nth-child(6)::before{ content:'Ações'; }
}


.btn-acao-msg{
    display:inline-block;
    border:1px solid var(--linha);
    background:transparent;
    color:var(--osso-fraco);
    font-family:var(--fonte-menu);
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-size:0.68rem;
    padding:6px 10px;
    cursor:pointer;
    transition:all .2s ease;
    white-space:nowrap;
}
.btn-acao-msg:hover{ border-color:var(--osso-fraco); color:var(--osso); }
.btn-acao-msg.excluir{ border-color:#5a2323; color:#c46060; }
.btn-acao-msg.excluir:hover{ background:#5a2323; color:var(--osso); }

/* ---------- RESPONSIVO ---------- */

/* Até 640px — cobre 360, 375, 414 etc.
   Margem 2px nos separadores = o visual que você aprovou na primeira imagem */
@media (max-width:640px){
    nav.menu-principal li + li::before{ margin:0 2px; }
    .slideshow > * + *{ margin-left:8px; }   /* [COMPAT] substitui gap:8px */
    .slide-seta{ font-size:1.6rem; padding:4px; }
    .admin-conteudo{ padding:30px 16px 60px; }
}

/* 375px–640px — mantém o texto do menu no tamanho normal */
@media (min-width:375px) and (max-width:640px){
    nav.menu-principal{ font-size:0.95rem; letter-spacing:3px; }
}

/* Até 374px (telas de 360, 320 etc.) — aperta o menu pra caber em UMA linha */
@media (max-width:374px){
    nav.menu-principal{ font-size:0.78rem; letter-spacing:2px; }
    nav.menu-principal li + li::before{ margin:0 3px; }
    nav.menu-principal a{ padding:6px 1px; }
    .slideshow > * + *{ margin-left:8px; }
    .slide-seta{ font-size:1.6rem; padding:4px; }
    .admin-conteudo{ padding:30px 16px 60px; }
}