/* menu.css — portal do Exotic.
 *
 * Reescrito em 12/08/2026. O arquivo trazia o mesmo CSS duas vezes (a
 * segunda cópia vencia, então ajustes na primeira não faziam efeito) e o
 * bloco de mobile estava malformado: um body sem fechamento engolia todas
 * as regras de celular, e o @media 400 acabava aninhado dentro do 768.
 */


/* --- Ajuste específico para o botão de Conduta não encostar nos arabescos --- */
        .title-conduta { font-size: 0.75rem !important; letter-spacing: 0px !important; }
        @media (max-width: 850px) { .title-conduta { font-size: 0.70rem !important; } }
        @media (max-width: 400px) { .title-conduta { font-size: 0.60rem !important; } }
        
        /* --- PALETA DE CORES --- */
        :root {
            --copper-light: #c2846b;
            --copper-main: #9c6650;
            --copper-dark: #4a271d;
            --bg-dark: #0f0805;
            --text-cream: #d4c5a3;
            --text-contrast: #1a0500;
            --gold-title: #B87333; 
            --glow-gold: #ffdfba;
            --glow-orange: #ff6600;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        a { text-decoration: none; color: inherit; }
        body {
            background: url('../../images/medieval-bg.png') no-repeat center center fixed;
            background-size: cover;
            background-color: #050201;
            color: var(--copper-main);
            font-family: 'Cinzel', serif;
            display: flex; flex-direction: column; align-items: center;
            min-height: 100vh; overflow-x: hidden;
        }
        /* =========================================================
           O ESPELHO DA VISÃO (Lanterna Clean)
           ========================================================= */
        .lantern-container {
            position: relative; 
            width: 100%; 
            max-width: 900px; 
            height: 400px; 
            margin: 40px auto 20px;
            background-color: #050201; 
            border: 1px solid rgba(184, 115, 51, 0.3); 
            box-shadow: 0 20px 50px rgba(0,0,0,0.95), inset 0 0 60px rgba(0,0,0,1); 
            transition: border-color 0.5s ease, box-shadow 0.5s ease;
            overflow: visible; 
        }
        
        .lantern-container::before, .lantern-container::after {
            content: ''; position: absolute; left: 50%; transform: translateX(-50%) rotate(45deg);
            width: 10px; height: 10px; background: radial-gradient(circle, #ffdf73 0%, #b87333 100%); 
            border: 1px solid #5c300d; box-shadow: 0 0 10px rgba(255, 223, 115, 0.5), inset 0 0 2px rgba(255,255,255,0.8);
            z-index: 30; transition: all 0.4s ease;
        }
        .lantern-container::before { top: -6px; } 
        .lantern-container::after { bottom: -6px; }
        .lantern-container:hover {
            border-color: rgba(184, 115, 51, 0.8);
            box-shadow: 0 20px 50px rgba(0,0,0,0.95), 0 0 35px rgba(184, 115, 51, 0.2), inset 0 0 60px rgba(0,0,0,1);
        }
        
        .lantern-container:hover::before, .lantern-container:hover::after {
            box-shadow: 0 0 15px rgba(255, 223, 115, 0.9), inset 0 0 5px rgba(255,255,255,1);
            background: radial-gradient(circle, #fff 0%, #ffdf73 100%);
            transform: translateX(-50%) rotate(225deg); 
        }
        
        /* As fotos ficam EMPILHADAS e trocam por transparencia.
           Antes era uma fila horizontal com overflow-x: cada foto ocupava
           metade da largura e so aparecia se a pessoa rolasse o bloco de
           lado — coisa que ninguem faz num retangulo escuro sem barra de
           rolagem visivel. Na pratica via-se sempre a mesma imagem. */
        .images-track { position: absolute; inset: 0; }

        .slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 1.4s ease;
        }
        .slide.ativa { opacity: 1; }

        .slide img {
            width: 100%; height: 100%; object-fit: cover;
            /* Escura por padrao: a graca e a lanterna revelar. */
            filter: sepia(60%) hue-rotate(-10deg) contrast(1.1) brightness(0.25);
            transition: filter 0.8s ease;
        }
        
        .lantern-overlay { 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; background: rgba(5, 2, 1, 0.98); 
            transition: background 0.1s ease; box-shadow: inset 0 0 80px rgba(0,0,0,1); 
        }
        .lantern-container:hover .lantern-overlay,
        .lantern-container.lanterna-acesa .lantern-overlay { background: radial-gradient(circle at var(--x) var(--y), rgba(255, 223, 115, 0.15) 0%, rgba(5, 2, 1, 0.95) 60%); }
        .lantern-container:hover .slide img,
        .lantern-container.lanterna-acesa .slide img { filter: sepia(20%) hue-rotate(-5deg) contrast(1.2) brightness(0.9); }
        
        .hint { 
            position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); color: rgba(234, 227, 210, 0.6); 
            font-size: 0.9rem; pointer-events: none; z-index: 20; letter-spacing: 6px; text-transform: uppercase; 
            text-shadow: 0 2px 5px #000; transition: opacity 0.5s; font-family: 'Cinzel', serif;
        }
        .lantern-container:hover .hint { opacity: 0; }
        /* --- Cantoneiras da Lanterna --- */
        .lantern-container .corner { position: absolute; width: 20px; height: 20px; border-color: var(--copper-main); border-style: solid; opacity: 0.7; transition: 0.4s; z-index: 40; }
        .lantern-container .tl { top: 10px; left: 10px; border-width: 2px 0 0 2px; }
        .lantern-container .tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; }
        .lantern-container .bl { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; }
        .lantern-container .br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }
        .lantern-container:hover .corner { border-color: var(--gold-title); width: 25px; height: 25px; opacity: 1; }
        
        /* =========================
            GALERIA (SEMPRE ABERTA)
        ========================= */
        .gallery-header { text-align: center; margin-top: 40px; margin-bottom: 15px; width: 100%; }
        .gallery-title {
            font-family: 'Cinzel Decorative', cursive; font-size: 1.6rem; white-space: normal;
            color: #F5EFE1;
            text-transform: uppercase; letter-spacing: 3px; 
            position: relative; display: inline-block; 
            padding-bottom: 10px; font-weight: 700;
        }

        .gallery-wrapper {
            display: flex; justify-content: center; align-items: flex-start;
            width: 100%; max-width: 1100px; margin: 0 auto 20px auto; 
            padding: 25px 0; gap: 14px; position: relative; z-index: 50; overflow: visible;
        }

        .album-item {
            width: 148px; margin: 0; 
            display: flex; flex-direction: column; align-items: center; text-decoration: none; 
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; z-index: 1;
        }
        
        .album-frame {
            /* A moldura é uma camada por cima, não uma borda: assim o
               arabesco aparece inteiro, com os cantos, em vez de ser
               esticado como acontece com border-image. */
            position: relative;
            display: block;
            width: 100%;
            aspect-ratio: 1;
            isolation: isolate;
            filter: drop-shadow(0 9px 8px rgba(0,0,0,0.8));
            transition: transform 0.35s ease, filter 0.35s ease;
        }

        .album-frame::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background: url('../../images/moldura-album-exotic.webp') center / 100% 100% no-repeat;
        }

        .album-art {
            /* Recuo medido no canal alfa da própria arte: a abertura
               começa a 16% nas laterais e a 22% em cima e embaixo, porque
               os medalhões do meio de cada lado avançam para dentro.

               Estava em 14% uniforme — a foto passava por baixo do
               ornamento e o retângulo preto dela aparecia nos vãos.

               Só inset, sem width/height: as duas coisas juntas se
               contradiziam e quem mandava era a ordem da folha. */
            position: absolute;
            /* Posição E tamanho explícitos. Só "inset" não serve aqui:
               em <img>, que é elemento substituído, o navegador ignora as
               distâncias e usa a dimensão natural da foto — 900x900 numa
               moldura de 148px. Foi o que aconteceu quando tirei o
               width/height. */
            /* Medido no canal alfa da arte: a abertura e mais larga do
               que a caixa da foto estava. O ornamento avanca mais no meio
               de cada lado (os medalhoes) e menos nos cantos, entao a
               abertura vai de 14,4% a 85,4% na horizontal e de 16,8% a
               83,1% na vertical.

               A caixa antiga comecava a 21% em cima e terminava a 79%:
               sobravam 4,2% de preto no topo e 4,1% embaixo, que era o
               vao que a dona apontou.

               Agora a foto alcanca o MENOR recuo de cada lado e passa um
               pouco por baixo dos medalhoes. Isso e de proposito: a arte
               e pintada por cima (z-index 2), entao o que invade fica
               escondido, e nenhum vao sobra. */
            top: 16%;
            left: 14%;
            width: 72%;
            height: 68%;
            z-index: 1;
            min-width: 0;
            display: block;
            object-fit: cover;
            background: #050201;
            filter: sepia(20%) brightness(0.88) contrast(1.05);
            transition: filter 0.35s ease;
            cursor: pointer;
        }
        
        .album-text {
            font-family: 'Cinzel', serif; color: #F5EFE1; font-weight: 700; font-size: 0.85rem; 
            letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); 
            white-space: nowrap; margin-top: 10px; padding-bottom: 5px; transition: color 0.3s;
        }

        .album-item:hover .album-frame { transform: translateY(-5px) scale(1.04); }
        .album-item:hover .album-art { filter: drop-shadow(0 15px 15px rgba(0,0,0,0.6)) sepia(0%) brightness(1.1); transform: translateY(-5px) scale(1.05); }
        .album-item:hover .album-text { color: var(--gold-title); text-shadow: 0 0 8px rgba(184, 115, 51, 0.6); }

        /* --- CONTAINER GERAL (SOLUÇÃO MATEMÁTICA DEFINITIVA - DESKTOP) --- */
        .external-menu-container {background-color: #050201; background-image: linear-gradient(145deg, #0f0805 0%, #050201 100%); background-clip: padding-box; /* Desconta os 30px de cada lado (60px total) para não dar barra de rolagem */
            width: calc(100% - 60px); 
            max-width: 1050px; 
            margin: 50px auto 30px auto; 
            display: flex; flex-wrap: wrap; gap: 30px;
            
            background: linear-gradient(rgba(10,5,2,0.95), rgba(10,5,2,0.95)); 
            background-clip: padding-box; 
            
            border: 50px solid transparent; 
            border-image-source: url('../../images/moldura-casa.webp'); 
            border-image-slice: 250; 
            border-image-repeat: round;
            border-image-width: 125px; 
            border-image-outset: 0; 
            
            padding: 83px 83px 83px 83px; 
            box-shadow: inset 0 0 60px rgba(0,0,0,1); 
            filter: drop-shadow(0 15px 25px rgba(0,0,0,0.85)); 
            position: relative; z-index: 10; background-color: #050201; background-clip: padding-box; }
        .royal-card {
            flex: 1; min-width: 300px; background: linear-gradient(145deg, rgba(18, 10, 5, 0.6) 0%, rgba(8, 4, 2, 0.8) 100%);
            padding: 40px 30px; position: relative; box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
            border: 1px solid rgba(156, 102, 80, 0.2); display: flex; flex-direction: column; justify-content: space-between;
        }
        
        .info-title { color: var(--gold-title); font-size: 1.3rem; text-align: center; font-weight: 600; letter-spacing: 2px; margin-bottom: 25px; text-transform: uppercase; border-bottom: 1px solid rgba(156, 102, 80, 0.2); padding-bottom: 15px; }
        .info-text { font-family: 'Cormorant Garamond', serif; color: #bfb3a8; font-size: 1.2rem; line-height: 1.6; text-align: justify; margin-bottom: 20px; font-weight: 300; }
        
        /* =========================================================
            BOTÕES MAGIA COM ÍCONES ALINHADOS E FONTES AJUSTADAS
           ========================================================= */
        .btn-image-based {
            position: relative; display: flex; align-items: center; justify-content: center;
            background-image: url('../../images/botao.png'); 
            background-size: 100% 100%; background-repeat: no-repeat; background-position: center; background-color: transparent;
            border: none; width: 360px; height: 90px; max-width: 100%;
            padding: 0 15px; margin: 0 auto 15px auto; 
            text-decoration: none; cursor: pointer; transition: transform 0.2s ease-in-out;
        }
        
        .btn-content-wrapper { 
            display: flex; align-items: center; width: 100%; height: 100%; justify-content: center; position: relative; 
        }
        
        .menu-icon { 
            position: absolute; 
            left: 45px; 
            top: 50%; transform: translateY(-50%);
            width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; transition: 0.3s ease; margin: 0;
        }
        
        .menu-icon img {
            width: 100%; height: 100%; object-fit: contain; 
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)) drop-shadow(0 0 5px rgba(184, 115, 51, 0.3)); transition: transform 0.4s ease, filter 0.4s ease;
        }
        .text-group { 
            display: flex;
            flex-direction: column;
            text-align: center;
            /* O icone fica absoluto e a arte do botao tambem avanca pelas
               laterais. Esta reserva simetrica mantem o texto somente no
               miolo livre, sem passar por baixo de nenhum dos dois. */
            padding: 0 94px;
            width: 100%;
            align-items: center;
            min-width: 0;
        }
        
        .menu-title { 
            font-family: 'Cinzel Decorative', serif; font-size: 0.85rem; color: #d4c5a3; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; text-shadow: 0 2px 3px rgba(0,0,0,1); transition: 0.3s; line-height: 1.1; 
        }
        .menu-desc { font-family: 'Cormorant Garamond', serif; font-size: 0.75rem; color: #7a5e53; margin-top: 2px; font-style: italic; transition: 0.3s; }
        
        .btn-image-based:hover { background-image: url('../../images/botaoa.png'); transform: scale(1.02); }
        .btn-image-based:hover .menu-title { color: var(--glow-gold); text-shadow: 0 0 10px var(--glow-orange), 0 2px 2px #000; }
        .btn-image-based:hover .menu-desc { color: #d4a086; }
        .btn-image-based:hover .menu-icon img { transform: scale(1.1); filter: drop-shadow(0 4px 6px rgba(0,0,0,1)) drop-shadow(0 0 12px var(--glow-orange)); }
        
        .menu-section { flex: 1.2; min-width: 300px; display: flex; flex-direction: column; gap: 5px; }
        .menu-header { display: flex; justify-content: flex-start; align-items: center; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--copper-dark); padding-bottom: 10px; }
        .welcome-text { 
            font-family: 'Cinzel Decorative', cursive; 
            font-size: 1.8rem; 
            color: var(--gold-title); 
            letter-spacing: 2px; 
            font-weight: 700;
            text-shadow: 0 2px 5px rgba(0,0,0,1), 0 0 15px rgba(184, 115, 51, 0.3);
            text-transform: uppercase;
        }

@media (max-width: 400px) {
    .exotic-portal .royal-card,
    .exotic-portal .menu-section,
    .exotic-portal .menu-header,
    .exotic-portal .btn-content-wrapper,
    .exotic-portal .text-group {
        min-width: 0;
        max-width: 100%;
    }

    .exotic-portal .external-menu-container {
        box-sizing: border-box;
    }

    .exotic-portal .btn-image-based {
        min-height: 75px;
        height: auto;
    }

    .exotic-portal :is(a, button, input, select, textarea):focus-visible {
        outline: 2px solid var(--gold-title);
        outline-offset: 3px;
    }
}

/* =========================================================
   O AJUSTE FINO DO MOBILE
   ========================================================= */
@media (max-width: 768px) {
    body {
        /* Fundo próprio para telas altas e estreitas. */
        background-image: url('../../images/bg-mobile.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        /* 'fixed' foi trocado por 'scroll': fundo fixo trava e pisca
           durante o scroll no Safari do iPhone. */
        background-attachment: scroll;
    }

    .gallery-wrapper {
        flex-wrap: wrap;
        padding: 20px 0;
        gap: 10px;
        justify-content: center;
        margin-bottom: 20px;
    }
    .album-item { width: 95px; margin: 5px; }
    /* A largura no celular é da MOLDURA, não da foto. A regra antiga
       dava 95px à foto — o tamanho do card inteiro — e ela transbordava
       por cima do ornamento. A foto continua com os 68% x 58% da
       abertura, medidos no alfa da arte. */
    .album-frame { width: 95px; }
    .album-text { font-size: 0.75rem; white-space: normal; text-align: center; }

    .external-menu-container {
        flex-direction: column;
        /* A arte avanca 35px para dentro nesta faixa; o topo precisa
           dessa folga para o titulo nao passar por cima dela. */
        padding: 30px 22px 22px 22px;
        gap: 20px;
        width: calc(100% - 40px);
        margin: 40px auto 30px auto;
        border-width: 10px;
        border-image-width: 24px;
        border-image-outset: 0;
    }

    .lantern-container { height: 250px; margin-top: 20px; }

    .royal-card { padding: 25px 15px; }
    .menu-header { flex-direction: column; justify-content: center; text-align: center; gap: 5px; }
    .welcome-text { font-size: 1.3rem; text-align: center; width: 100%; }
    .btn-image-based { width: 100%; max-width: 100%; height: 85px; padding: 0 10px; }
    .menu-title { font-size: 0.8rem; }
    .text-group { padding: 0 74px; }
    .menu-icon { width: 40px; height: 40px; left: 30px; }
}

@media (max-width: 400px) {
    .btn-image-based { height: 75px; }
    .menu-title { font-size: 0.7rem; }
    .menu-icon { width: 35px; height: 35px; left: 20px; }
    .text-group { padding: 0 60px; }

    .external-menu-container {
        width: calc(100% - 30px);
        margin: 30px auto;
        border-width: 10px;
        border-image-width: 24px;
        border-image-outset: 0;
        /* A arte avanca 25px para dentro nesta faixa. Sem esta folga o
           conteudo comeca a 15px e passa por cima do ornamento. */
        padding: 22px 22px 22px 22px;
    }
}

/* =========================================================
   CELULAR — os blocos empilham em vez de encolher
   =========================================================

   .royal-card e .menu-section pediam min-width de 300px lado
   a lado. Num aparelho de 360px, descontada a moldura, os
   dois teriam 150px cada — e o texto empilha letra por letra.

   Zerar o min-width sozinho não resolve: os blocos apenas
   encolhem à vontade e o texto continua na vertical. O que
   resolve é o container parar de dividir a linha no celular.
   ========================================================= */
@media (max-width: 768px) {
    .external-menu-container,
    .menu-wrapper {
        flex-direction: column;
    }

    .royal-card,
    .menu-section {
        min-width: 0;
        width: 100%;
    }
}


/* ---------------------------------------------------------------------
   Lanterna no celular

   A revelacao estava presa a :hover. Num telefone nao existe hover, e o
   retangulo ficava preto do inicio ao fim — a pessoa lia "Ilumine o
   Ambiente" sobre um vazio e nao havia como iluminar. Era o mesmo
   defeito apontado no Raio-X do site antigo.

   Agora o JS acende a classe .lanterna-acesa ao toque, e as regras
   acima respondem tanto ao mouse quanto a ela.
   --------------------------------------------------------------------- */

/* Sem ponteiro fino (telefone e tablet), a lanterna comeca acesa de leve:
   sem isso a primeira impressao continua sendo um retangulo preto. */
@media (hover: none) {
    .lantern-overlay {
        background: radial-gradient(circle at 50% 50%,
            rgba(255, 223, 115, .10) 0%,
            rgba(5, 2, 1, .93) 62%);
    }

    .slide img {
        filter: sepia(45%) hue-rotate(-8deg) contrast(1.12) brightness(.42);
    }
}

/* Quem pediu menos movimento nao recebe a troca automatica de fotos:
   o JS respeita isso, e aqui a transicao tambem para de correr. */
@media (prefers-reduced-motion: reduce) {
    .slide { transition-duration: .01ms; }
}


/* ---------------------------------------------------------------------
   Moldura do retangulo da home

   O bloco era uma caixa preta com uma linha de 1px e quatro cantoneiras
   — lia-se como um buraco na pagina, nao como uma peca da casa.

   A moldura e desenhada na camada da lanterna, e nao no proprio
   retangulo, por um motivo: o border-image e pintado ANTES dos filhos,
   e as fotos, sendo opacas e ocupando a caixa inteira, passariam por
   cima do ornamento. Na camada da lanterna, que ja esta acima de tudo,
   a moldura fica sempre por cima do contorno — como pedido.

   A escala e menor que a das caixas de texto (20px de borda com 50px de
   arte, contra 50 e 125). Nao e inconsistencia: aqui a moldura cerca uma
   FOTO de 400px de altura, e o ornamento das caixas de texto tomaria
   250px dos 400, sobrando quase nada de imagem.

   O degrade e o que evita o corte seco entre o ornamento e a fotografia:
   a arte termina e a imagem escurece por baixo dela, em vez de haver uma
   linha dura separando as duas.
   --------------------------------------------------------------------- */
.lantern-container {
    /* a linha fina sai: quem faz o contorno agora e a moldura */
    border-color: transparent;
}

/* As cantoneiras eram o substituto pobre de uma moldura. Com a moldura
   de verdade elas viram sujeira sobre o ornamento. */
.lantern-container .corner { display: none; }

.lantern-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    border: 20px solid transparent;
    border-image-source: url('../../images/moldura-casa.webp');
    border-image-slice: 250;
    border-image-repeat: round;
    border-image-width: 50px;
    border-image-outset: 0;
}

/* O degrade: escurece a fotografia sob a faixa da arte, nos quatro
   lados, para que a imagem se dissolva na moldura. A espessura acompanha
   o avanco da arte (50px). */
.lantern-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to right,  #050201 0, rgba(5,2,1,0) 62px),
        linear-gradient(to left,   #050201 0, rgba(5,2,1,0) 62px),
        linear-gradient(to bottom, #050201 0, rgba(5,2,1,0) 62px),
        linear-gradient(to top,    #050201 0, rgba(5,2,1,0) 62px);
}

/* No celular o retangulo tem 250px de altura; a moldura encolhe junto,
   senao o ornamento come metade da fotografia. */
@media (max-width: 768px) {
    .lantern-overlay::after {
        border-width: 12px;
        border-image-width: 30px;
    }

    .lantern-overlay::before {
        background:
            linear-gradient(to right,  #050201 0, rgba(5,2,1,0) 38px),
            linear-gradient(to left,   #050201 0, rgba(5,2,1,0) 38px),
            linear-gradient(to bottom, #050201 0, rgba(5,2,1,0) 38px),
            linear-gradient(to top,    #050201 0, rgba(5,2,1,0) 38px);
    }
}


/* ---------------------------------------------------------------------
   SEM PRETO POR FORA DA MOLDURA — e a foto inteira dentro dela

   Duas coisas pintavam preto ALÉM da moldura:

     · a borda de 1px do retângulo. A moldura mora na camada da
       lanterna, que ocupa a caixa de conteúdo — ou seja, começa DEPOIS
       da borda. Sobrava um anel preto de 1px por fora do ornamento.

     · a sombra externa, 0 20px 50px: um borrão escuro de cinquenta
       pixels em volta do quadro. É o retângulo preto que ela viu.

   A sombra interna também sai: ela existia para escurecer as beiradas
   da foto, papel que agora é do degradê da própria moldura.

   A FOTO INTEIRA, SEM CORTE. O object-fit era 'cover', que preenche o
   quadro cortando o que sobra — e o retângulo é deitado (900x400)
   enquanto boa parte do acervo é em pé, então cortava muito. Com
   'contain' a fotografia aparece inteira, seja qual for o formato, e o
   que sobra fica no preto da casa. É álbum, não recorte.
   --------------------------------------------------------------------- */
.lantern-container {
    border: 0;
    box-shadow: none;
}

.lantern-overlay {
    /* sem a borda de 1px, a camada passa a coincidir com o retângulo */
    box-shadow: none;
}

.slide img {
    object-fit: contain;
    background-color: #050201;
}


/* ---------------------------------------------------------------------
   A CAIXA TOMA A FORMA DA FOTO

   Pedido: album de fotos, cada imagem 100% encaixada, sem zoom e sem
   corte. Com um quadro fixo isso e geometricamente impossivel — medido:
   o retangulo era 900x400, proporcao 2,25, e o acervo tem 41 fotos em pe
   contra 18 deitadas. Uma foto de proporcao 0,67 ali dentro, sem cortar,
   ocupava 30% da area: virava uma tira no meio de um vazio preto.

   Cortar resolveria o vazio, mas foi justamente o que ela proibiu.

   Entao quem se adapta e a caixa. A proporcao vem da fotografia em
   cartaz, escrita pelo JS em --proporcao a cada troca:

     computador  a ALTURA e fixa e a largura acompanha. A linha nao muda
                 de altura ao passar de foto, entao nada salta na pagina,
                 e cada foto preenche o quadro inteiro.

     celular     a LARGURA e fixa, porque a tela ja e estreita, e a
                 altura acompanha. Uma foto em pe fica alta, que e como
                 se ve foto em pe no telefone.

   A moldura mora na camada de dentro, com inset 0, entao acompanha
   sozinha: o ornamento abraca a foto seja qual for o formato.
   --------------------------------------------------------------------- */
.lantern-container {
    width: 100%;
    max-width: 900px;
    height: auto;
    aspect-ratio: var(--proporcao, 9 / 4);
    transition: aspect-ratio .5s ease;
}

@media (min-width: 900px) {
    .lantern-container {
        height: 460px;
        width: auto;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lantern-container { transition: none; }
}

/* Com a caixa na proporcao da foto, contain e cover dao o mesmo
   resultado. Fica contain como rede: se um dia a proporcao nao for
   escrita, a foto encolhe em vez de ser cortada. */
.slide img {
    object-fit: contain;
}


/* ---------------------------------------------------------------------
   A FOTO APARECE EM REPOUSO

   A imagem sempre esteve 100% encaixada — medido: caixa de 690x460 e
   <img> renderizada em 690x460, sem um pixel de sobra. O que parecia
   vazamento preto era a lanterna: em repouso a camada cobria tudo com
   rgba(5, 2, 1, .98) e a foto ficava em brightness(.25). Só o cursor
   revelava.

   Isso funciona como brincadeira para quem já está no site. Não
   funciona para apresentar: quem abre a página vê um retângulo preto, e
   num print é exatamente isso que sai.

   Agora a fotografia aparece desde o primeiro instante, com uma vinheta
   que escurece as beiradas — a lanterna deixa de esconder e passa a
   destacar: passar o mouse ou tocar acende o ponto de luz dourado e
   levanta o brilho, como antes.
   --------------------------------------------------------------------- */
.lantern-overlay {
    background: radial-gradient(ellipse at center,
        rgba(5, 2, 1, .10) 0%,
        rgba(5, 2, 1, .38) 58%,
        rgba(5, 2, 1, .72) 100%);
    transition: background .45s ease;
}

.slide img {
    filter: sepia(24%) hue-rotate(-6deg) contrast(1.08) brightness(.82);
}

.lantern-container:hover .lantern-overlay,
.lantern-container.lanterna-acesa .lantern-overlay {
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
        rgba(255, 223, 115, .18) 0%,
        rgba(5, 2, 1, .22) 42%,
        rgba(5, 2, 1, .68) 100%);
}

.lantern-container:hover .slide img,
.lantern-container.lanterna-acesa .slide img {
    filter: sepia(12%) hue-rotate(-4deg) contrast(1.14) brightness(1);
}

/* No celular nao existe passar o mouse: a foto ja fica no estado claro,
   e o toque so acrescenta o ponto de luz. */
@media (hover: none) {
    .slide img {
        filter: sepia(16%) hue-rotate(-5deg) contrast(1.1) brightness(.92);
    }
}


/* ---------------------------------------------------------------------
   CORTA EM VEZ DE DEIXAR SOBRA

   A caixa toma a forma da fotografia, então com tudo assentado 'cover'
   e 'contain' dão o mesmo resultado: a foto preenche o quadro e a
   moldura a contorna.

   A diferença aparece nos meios-segundos da troca. A caixa muda de
   forma com transição de meio segundo; a fotografia nova entra na hora.
   Nesse intervalo as duas proporções não batem, e com 'contain' isso
   vira faixa preta piscando entre uma foto e outra — só não aparece
   hoje porque as cinco fotos têm a mesma proporção, o que deixa de ser
   verdade no dia em que o dono subir outra pelo painel.

   Com 'cover' o intervalo se resolve cortando alguns pixels da beirada
   em vez de mostrar vazio. Foi o que ele pediu: a moldura contorna
   sempre a imagem, e se precisar, corta.
   --------------------------------------------------------------------- */
.slide img {
    object-fit: cover;
}

/* ---------------------------------------------------------------------
   A MOLDURA UM POUCO ALÉM DOS ÁLBUNS, COM DUAS PEÇAS

   A primeira revisão alinhou a moldura à fileira de álbuns. O novo pedido
   do proprietário foi deixá-la um pouco mais larga; o acréscimo de 82px
   mantém a relação com a conta original sem virar um número desconectado.

   A largura não é um número solto. Ela é a conta da própria fileira de
   álbuns: seis cards de 148px mais os cinco vãos de 14px entre eles.
   Escrita assim, mexer no card ou no vão move as duas coisas juntas —
   um número copiado sairia do lugar no primeiro ajuste da galeria.
   --------------------------------------------------------------------- */
:root {
    --album-card: 148px;
    --album-vao: 14px;
    --album-largura: calc(6 * var(--album-card) + 5 * var(--album-vao));
    /* O quadro ganha um pouco mais de respiro que a fileira de álbuns,
       conforme o novo ajuste visual pedido pelo proprietário. */
    --lanterna-largura: calc(var(--album-largura) + 82px);
}

.lantern-container {
    max-width: var(--lanterna-largura);
}

@media (min-width: 900px) {
    .lantern-container {
        /* A altura deixa de mandar: ela sai da largura nova e da proporção
           das peças em cartaz. */
        width: 100%;
        max-width: var(--lanterna-largura);
        height: auto;
    }
}

/* Cada página do slide traz uma ou duas peças, lado a lado. O número
   vem do PHP: com uma peça só cadastrada, ela ocupa o quadro inteiro na
   própria proporção em vez de deixar metade preta. */
.slide {
    display: grid;
    grid-template-columns: repeat(var(--por-pagina, 2), 1fr);
    gap: 10px;
}

.slide .peca {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    background-color: #050201;
}

/* Onde as duas lado a lado ainda cabem, elas ficam lado a lado. Só nas
   telas realmente estreitas passam a empilhar.

   O corte é em 600px, e não em 768: medido, num tablet de 768px duas
   peças empilhadas davam 1034px de altura — cada uma com a largura
   inteira. Uma peça de hero com mais de mil pixels toma a tela toda e
   empurra o resto da página para fora de vista. Lado a lado no mesmo
   768px, a moldura fica com 253px. */
@media (max-width: 900px) {
    .lantern-container {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .slide {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
   A ALTURA VEM DAS PEÇAS, NÃO DA CAIXA

   Enquanto era uma fotografia só, a caixa tomava a proporção dela e
   tudo encaixava. Com duas lado a lado a conta muda: a caixa continuava
   com a proporção de UMA (1,5), então em 958px de largura ela pedia
   639px de altura — e cada peça, com metade da largura, era esticada e
   recortada para preencher esse pé-direito.

   Agora é o contrário: cada peça tem a proporção da casa, 3 por 2, e a
   altura da moldura sai daí. Em 958px de largura dá cerca de 316px de
   altura, que é o que duas fotografias deitadas pedem.

   A proporção fixa em cada peça também resolve o caso de duas fotos de
   formatos diferentes na mesma página: sem ela, a mais baixa deixaria
   uma faixa preta ao lado da mais alta. Com ela, as duas têm a mesma
   altura e o excedente é recortado — foi o que ele aprovou.
   --------------------------------------------------------------------- */
.lantern-container {
    aspect-ratio: auto;
    height: auto;
}

@media (min-width: 900px) {
    .lantern-container {
        height: auto;
    }
}

.slide .peca {
    height: auto;
    aspect-ratio: 3 / 2;
}

/* ---------------------------------------------------------------------
   QUEM DÁ ALTURA À MOLDURA

   As páginas do slide são camadas empilhadas, uma por cima da outra —
   é assim que a troca acontece por transparência. O efeito colateral é
   que camada empilhada não ocupa espaço: com a altura vindo do
   conteúdo, a moldura media zero.

   A primeira página fica no fluxo e é ela quem dá a altura. As outras
   continuam empilhadas por cima. Todas têm a mesma estrutura — peças
   de 3 por 2, mesma quantidade — então a altura não muda ao trocar de
   página, e nada salta.
   --------------------------------------------------------------------- */
.images-track {
    position: relative;
    inset: auto;
}

.slide {
    position: absolute;
    inset: 0;
}

.slide:first-child {
    position: relative;
}


/* Colunas por página. A última página de um acervo ímpar tem uma peça
   só; com a contagem global ela ficava numa grade de duas e a metade
   vazia aparecia preta dentro da moldura. */
.slide {
    grid-template-columns: repeat(var(--colunas, 2), 1fr);
}

@media (max-width: 600px) {
    .slide {
        grid-template-columns: 1fr;
    }
}


/* Sem vão entre as peças: as duas fotografias se encostam e a moldura
   abraça uma faixa contínua. Os 10px de separação que havia antes eram
   uma linha escura no meio do quadro — pequena, mas era preto dentro da
   moldura, e é justamente isso que ele não quer ver. */
.slide {
    gap: 0;
}

/* ---------------------------------------------------------------------
   O PRETO SOB A MOLDURA — a mesma solução das outras molduras do site

   Ampliando o canto em 4x aparece o que estava errado: entre a borda do
   retângulo e o ornamento havia preto chapado, e o próprio ornamento,
   que tem vãos transparentes entre os arabescos, mostrava preto por
   dentro deles.

   As demais molduras do site não têm esse problema porque fazem uma
   coisa que esta não fazia: `background-clip: padding-box`. Com ela o
   fundo da caixa PARA antes da faixa da moldura, e pelos vãos do
   ornamento se vê a textura da página — não um retângulo preto.

   Aqui a caixa ganha uma borda transparente de 20px, que é a faixa
   reservada para a moldura, e o fundo passa a ser recortado no padding.
   A moldura, que mora na camada da lanterna, estende-se 20px para fora
   para alcançar essa borda: assim o ornamento ocupa exatamente a faixa
   que ficou livre de preto.
   --------------------------------------------------------------------- */
.lantern-container {
    border: 20px solid transparent;
    background-clip: padding-box;
}

.lantern-overlay::after {
    /* alcança a borda externa do retângulo, onde a faixa está livre */
    inset: -20px;
}

@media (max-width: 900px) {
    .lantern-container {
        border-width: 12px;
    }

    .lantern-overlay::after {
        inset: -12px;
    }
}

/* ---------------------------------------------------------------------
   FORA O DEGRADÊ QUE VIROU FAIXA PRETA

   O degradê da beirada foi posto quando a moldura ainda encostava seca
   na fotografia: ele existia para suavizar esse encontro. Pintava
   #050201 sólido na borda, desaparecendo só aos 62px.

   Com a moldura assentada na própria faixa, ele deixou de suavizar
   coisa nenhuma e passou a ser o problema: medido, 70% das amostras a
   40px para dentro do quadro davam preto chapado. Era essa a faixa que
   ele via vazando.

   O ornamento já faz a passagem entre a página e a fotografia. A
   vinheta de repouso também recua: escurecer as pontas ajudava quando a
   foto estava escondida pela lanterna, mas agora ela aparece desde o
   início e o escuro só come a imagem.
   --------------------------------------------------------------------- */
.lantern-overlay::before {
    content: none;
}

.lantern-overlay {
    background: radial-gradient(ellipse at center,
        rgba(5, 2, 1, .04) 0%,
        rgba(5, 2, 1, .16) 70%,
        rgba(5, 2, 1, .34) 100%);
}

/* ---------------------------------------------------------------------
   SEM O BRILHO AO PASSAR O MOUSE

   A regra de hover reacendia um box-shadow de 35px em cobre em volta do
   retângulo — um halo amarelado que contornava a moldura inteira por
   trás. Fazia sentido quando o bloco era uma caixa preta que precisava
   se destacar; com a moldura ornamentada ali, virou sujeira em volta
   dela.

   O `none` vale para o estado de repouso e para o hover: a regra base
   já tinha sido zerada, mas a de hover a reescrevia.
   --------------------------------------------------------------------- */
.lantern-container,
.lantern-container:hover {
    box-shadow: none;
}

/* ---------------------------------------------------------------------
   O CONVITE CENTRADO NO CELULAR

   O texto já era centrado como bloco, por left: 50% com translate. O
   que não estava centrado eram as LINHAS dentro dele: sem text-align,
   cada uma encosta à esquerda. No computador isso não aparece porque
   "Ilumine o Ambiente" cabe numa linha só; no celular quebra em duas e
   a segunda fica desalinhada.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    .lantern-container .hint {
        text-align: center;
    }
}

/* A borda de 20px do retângulo é apenas a faixa reservada para a
   moldura: tem de ficar transparente sempre. A regra de hover a pintava
   de cobre — e como a moldura mora numa camada de cima, essa borda
   aparecia como um anel claro contornando o ornamento inteiro. Era isso
   que ele via como sombra amarela ao passar o mouse. */
.lantern-container,
.lantern-container:hover {
    border-color: transparent;
}

/* ---------------------------------------------------------------------
   A LANTERNA DE VOLTA

   O retângulo volta a nascer escuro e a se revelar sob o cursor — é o
   que o "Ilumine o Ambiente" promete, e sem isso a frase não fazia
   sentido nenhum.

   A calibragem não é a original. Antes a camada era rgba(5,2,1,.98) com
   a foto em brightness(.25): escuro demais a ponto de o bloco virar um
   retângulo preto chapado em qualquer print, que foi o que ele apontou
   na hora de apresentar. Aqui a fotografia fica insinuada em repouso —
   dá para perceber que HÁ algo ali, e é justamente isso que convida a
   passar o cursor.

   O ponto de luz segue o cursor por --x e --y, escritos pelo JS.
   --------------------------------------------------------------------- */
.lantern-overlay {
    /* Calibrado medindo o brilho do quadro, não no olho. Com a camada em
       .94 e a foto em .38 o quadro dava brilho 5 — o mesmo "retângulo
       preto" de antes, porque estas fotografias já são escuras por si.
       Em .62 com .70 o brilho fica em 20: escuro, mas a fotografia se
       insinua, que é o que convida a passar o cursor. */
    background: radial-gradient(ellipse at center,
        rgba(5, 2, 1, .50) 0%,
        rgba(5, 2, 1, .56) 55%,
        rgba(5, 2, 1, .62) 100%);
    transition: background .35s ease;
}

.slide .peca {
    filter: sepia(38%) hue-rotate(-8deg) contrast(1.05) brightness(.70);
    transition: filter .55s ease;
}

.lantern-container:hover .lantern-overlay,
.lantern-container.lanterna-acesa .lantern-overlay {
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
        rgba(255, 223, 115, .10) 0%,
        rgba(5, 2, 1, .12) 26%,
        rgba(5, 2, 1, .90) 62%);
}

.lantern-container:hover .slide .peca,
.lantern-container.lanterna-acesa .slide .peca {
    filter: sepia(10%) hue-rotate(-4deg) contrast(1.12) brightness(1);
}

/* No celular não existe passar o cursor: a lanterna acende ao toque,
   pela classe que o JS aplica, e em repouso o quadro fica um pouco
   menos fechado — sem isso a pessoa vê um retângulo escuro e não tem
   como saber que dá para tocar. */
@media (hover: none) {
    .lantern-overlay {
        background: radial-gradient(ellipse at center,
            rgba(5, 2, 1, .62) 0%,
            rgba(5, 2, 1, .74) 60%,
            rgba(5, 2, 1, .86) 100%);
    }

    .slide .peca {
        filter: sepia(32%) hue-rotate(-6deg) contrast(1.06) brightness(.58);
    }
}

/* ---------------------------------------------------------------------
   "GALERIA DE MEMÓRIAS" NÃO PODE ESTOURAR A TELA

   O dono viu o título saindo da tela; no aparelho do Saul não aparecia.
   A diferença não é só a largura: é a fonte aumentada nos ajustes do
   iPhone. O tamanho estava em rem, que cresce junto com essa
   preferência, e "Memórias" é uma palavra longa numa fonte de exibição
   larga.

   Medido na produção, com a fonte do sistema ampliada:

       360px  +50%    6px de rolagem lateral
       360px  +100%  29px
       390px  +100%  15px
       430px         nunca estoura

   O `min()` mantém o rem — quem aumenta a fonte do sistema continua
   sendo atendido — mas põe um teto em vw, que NÃO cresce com essa
   preferência. Na prática: o título cresce com o ajuste da pessoa até o
   ponto em que passaria da tela, e para ali.

   O padding lateral garante que a palavra nunca encoste na borda, que é
   o que fazia parecer "saindo da tela" mesmo quando ainda cabia.
   --------------------------------------------------------------------- */
.gallery-title {
    font-size: min(1.6rem, 11vw);
    max-width: 100%;
    overflow-wrap: break-word;

    /* SOMBRA, PARA SE DESCOLAR DO FUNDO.
       Este é o único título do site que fica sobre a parte CLARA da
       textura — os outros ficam dentro de caixas escuras. E era o único
       sem sombra nenhuma.

       Medido no pior pedaço do fundo atrás dele: contraste 1,66 com o
       ouro atual e 1,90 com o marfim de antes. Os dois abaixo do mínimo
       de 3 para texto grande, ou seja, já era defeito antes da troca de
       cor — ela só piorou um pouco.

       A sombra resolve sem mexer na cor nem na fonte: dá ao título um
       fundo escuro próprio, seja qual for a foto por trás. É a mesma
       solução que os outros títulos da casa já usavam. */
    text-shadow:
        0 2px 6px rgba(0, 0, 0, .95),
        0 0 16px rgba(0, 0, 0, .8),
        0 0 3px rgba(0, 0, 0, .9);
}

.gallery-header {
    padding-left: 14px;
    padding-right: 14px;
}