/* ===== Paleta e fontes (tiradas da identidade Harada) ===== */
:root {
    --washi: #F6F5F1;          /* 和紙 papel japonês: fundo */
    --washi-escuro: #EFECE6;   /* seções alternadas */
    --sumi: #141B2B;           /* 墨 tinta nanquim: texto e títulos */
    --ai: #2B4470;             /* 藍 índigo: cor principal */
    --aka: #C8102E;            /* 赤 vermelho: destaque e botão */
    --aka-escuro: #A50E25;     /* vermelho do botão com o mouse em cima */
    --branco: #FFFFFF;         /* fundo dos cartões */
    --texto-suave: #5B6478;    /* descrições */
    --linha: #DCD7CE;          /* bordas finas e cantoneiras */

    --fonte-titulo: "Montserrat", sans-serif;
    --fonte-texto: "Inter", sans-serif;
    --fonte-jp: "Noto Serif JP", serif;
}

/* ===== Base ===== */
html {
    scroll-behavior: smooth;   /* links como #contato rolam suave, em vez de "pular" */
}

body {
    margin: 0;
    font-family: var(--fonte-texto);
    color: var(--sumi);
    background-color: var(--washi);
    line-height: 1.6;
}

h1, h2 {
    font-family: var(--fonte-titulo);
}

a {
    color: var(--ai);
}

/* ===== Topo com menu (igual em todas as páginas) ===== */
.topo {
    display: flex;
    flex-wrap: wrap;                  /* no celular, o menu desce para a linha de baixo */
    align-items: center;
    justify-content: space-between;   /* marca na esquerda, menu na direita */
    gap: 8px 24px;
    /* o max() deixa no mínimo 16px nas laterais e centraliza o conteúdo em telas largas */
    padding: 12px max(16px, calc((100% - 1100px) / 2));
    background-color: var(--washi);   /* mesmo fundo do cerebro.png, para não aparecer um quadrado em volta */
    border-bottom: 1px solid var(--linha);
}

.topo-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sumi);
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;   /* "HARADA TECNOLOGIAS" nunca quebra em duas linhas */
}

.topo-marca img {
    width: 44px;
    height: auto;
}

.topo-sub {
    font-family: var(--fonte-texto);
    font-weight: 400;
    letter-spacing: 0.2em;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
}

.menu a {
    display: block;
    padding: 6px 0;
    color: var(--sumi);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;   /* reserva o espaço do tracinho, sem "pular" */
}

/* página atual (aria-current) e link com o mouse em cima: tracinho vermelho */
.menu a:hover,
.menu a[aria-current="page"] {
    color: var(--ai);
    border-bottom-color: var(--aka);
}

/* telas médias e celular: marca em cima e menu embaixo, centralizados
   (o menu tem 6 links e não cabe ao lado da marca abaixo de ~900px) */
@media (max-width: 900px) {
    .topo {
        flex-direction: column;
    }

    .menu ul {
        justify-content: center;
    }
}

/* celular: links do menu menores */
@media (max-width: 600px) {
    .menu ul {
        gap: 0 12px;
    }

    .menu a {
        font-size: 0.85rem;
    }
}

/* celulares bem estreitos (320px): nome e menu um pouco menores */
@media (max-width: 360px) {
    .topo-marca {
        font-size: 0.85rem;
    }

    .menu ul {
        gap: 0 10px;
    }

    .menu a {
        font-size: 0.78rem;
    }
}

/* ===== Abertura da página inicial (hero) ===== */
.hero {
    position: relative;   /* referência para o carimbo e as cantoneiras */
    text-align: center;
    padding: 32px 16px;
}

/* cantoneiras finas nos cantos, como no cartaz */
.hero::before,
.hero::after,
.titulo-pagina::before,
.titulo-pagina::after {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    border: 0 solid var(--linha);
}

.hero::before,
.titulo-pagina::before {
    top: 16px;
    left: 16px;
    border-top-width: 2px;
    border-left-width: 2px;
}

.hero::after,
.titulo-pagina::after {
    bottom: 16px;
    right: 16px;
    border-bottom-width: 2px;
    border-right-width: 2px;
}

/* carimbo 原田 (hanko) */
.hanko {
    position: absolute;
    top: 24px;
    right: 24px;
    writing-mode: vertical-rl;   /* texto na vertical, como na escrita japonesa */
    padding: 8px 6px;
    background-color: var(--aka);
    color: var(--branco);
    font-family: var(--fonte-jp);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.1;
    border-radius: 8px;
}

.cerebro {
    display: block;
    width: 100%;
    max-width: 104px;   /* celular: pequeno, para a frase e os botões caberem na 1ª tela */
    height: auto;       /* mantém a proporção */
    margin: 0 auto;
}

.marca {
    margin: 8px 0 0;
    font-family: var(--fonte-titulo);   /* agora é um <p>, então a fonte dos títulos vem daqui */
}

.marca span {
    display: block;   /* cada parte do nome em uma linha */
    text-transform: uppercase;
}

.marca-nome {
    font-weight: 800;
    font-size: clamp(2.4rem, 11vw, 3.5rem);   /* mínimo, ideal, máximo */
    line-height: 1;
    letter-spacing: 0.02em;
}

.marca-sub {
    margin-top: 8px;
    margin-right: -0.5em;   /* compensa o espaço depois da última letra */
    font-family: var(--fonte-texto);
    font-weight: 400;
    font-size: clamp(0.85rem, 3.6vw, 1.1rem);
    letter-spacing: 0.5em;
}

.marca-jp {
    margin: 8px -0.6em 0 0;
    font-size: 0.85rem;
    font-family: var(--fonte-jp);
    font-weight: 600;
    color: var(--aka);
    letter-spacing: 0.6em;
}

.slogan {
    margin: 12px 0 0;
    font-size: 1rem;
}

/* linhas vermelhas antes e depois do slogan */
.slogan::before,
.slogan::after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 2px;
    margin: 0 12px;
    vertical-align: middle;
    background-color: var(--aka);
}

.destaque {
    color: var(--aka);
}

/* a frase principal (h1): diz o que fazemos */
.chamada {
    max-width: 30ch;   /* "ch" = largura de um caractere: quebra a frase em ~30 letras */
    margin: 20px auto 0;
    font-size: clamp(1.15rem, 4.6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;   /* divide a frase em linhas de tamanho parecido */
}

.hero .botoes {
    margin: 20px 0 0;
    gap: 10px;
}

/* botões da abertura um pouco menores, para os dois caberem lado a lado no celular */
.hero .botao,
.hero .botao-secundario {
    padding: 10px 14px;
    font-size: 0.85rem;
}

/* em telas estreitas (celular), slogan e traços menores para caber em uma linha */
@media (max-width: 480px) {
    .slogan {
        font-size: 0.85rem;
    }

    .slogan::before,
    .slogan::after {
        width: 20px;
        margin: 0 8px;
    }
}

/* celulares bem estreitos (320px): slogan ainda menor. Precisa vir DEPOIS do bloco
   de 480px: com o mesmo peso, a regra que está mais abaixo no arquivo vence */
@media (max-width: 360px) {
    .slogan {
        font-size: 0.8rem;
    }

    .slogan::before,
    .slogan::after {
        width: 12px;
        margin: 0 6px;
    }
}

/* em telas largas (computador): cérebro ao lado do nome, como na prévia do WhatsApp.
   Em telas menores fica empilhado. */
@media (min-width: 768px) {
    .hero {
        display: flex;              /* filhos lado a lado */
        align-items: center;        /* centralizados na vertical */
        justify-content: center;    /* e na horizontal */
        gap: 48px;                  /* espaço entre o cérebro e os textos */
        padding: 48px 32px;
    }

    .cerebro {
        width: 200px;
        max-width: 200px;
        margin: 0;
    }

    .marca {
        margin-top: 0;
    }
}

/* ===== Título das páginas internas (Computadores, Celulares, PDV, Desenvolvimento) ===== */
.titulo-pagina {
    position: relative;   /* referência para as cantoneiras */
    text-align: center;
    padding: 56px 16px 48px;
}

/* 支援 / 開発 em vermelho, acima do título */
.titulo-jp {
    margin: 0 -0.4em 8px 0;
    font-family: var(--fonte-jp);
    font-weight: 600;
    color: var(--aka);
    letter-spacing: 0.4em;
}

.titulo-pagina h1 {
    margin: 0;
    font-size: clamp(1.8rem, 7vw, 2.8rem);
    line-height: 1.2;
}

.titulo-pagina > p:last-of-type {
    max-width: 560px;
    margin: 12px auto 0;
    color: var(--texto-suave);
}

/* abas: atalhos para as seções da página */
.abas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.abas a {
    padding: 6px 16px;
    color: var(--ai);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    background-color: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 999px;   /* formato de pílula */
    transition: border-color 0.2s, color 0.2s;
}

.abas a:hover {
    color: var(--aka);
    border-color: var(--aka);
}

/* ===== Seções ===== */
section {
    padding: 56px 16px;
}

/* seções com papel um pouco mais escuro (alternando com as claras) */
.fundo-escuro {
    background-color: var(--washi-escuro);
}

/* seções com o texto centralizado */
.centro {
    text-align: center;
}

/* o conteúdo de cada seção fica centralizado e com largura máxima */
section > * {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

section h2,
footer h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 32px;
}

/* tracinho vermelho embaixo de cada título */
section h2::after,
footer h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin: 12px auto 0;
    background-color: var(--aka);
}

.intro {
    max-width: 640px;
    margin-bottom: 32px;
    color: var(--texto-suave);
}

.acao {
    margin-top: 40px;
    text-align: center;   /* o botão fica no meio, mesmo em seções alinhadas à esquerda */
}

/* ===== Portas da página inicial (um cartão para cada página de serviço) ===== */
.portas {
    display: grid;
    grid-template-columns: 1fr;   /* celular: uma embaixo da outra */
    gap: 24px;
    max-width: 880px;
}

@media (min-width: 720px) {
    .portas {
        grid-template-columns: 1fr 1fr;   /* computador: lado a lado */
    }
}

/* o cartão inteiro é um link */
.porta {
    display: flex;
    flex-direction: column;   /* ícone, título, frase, lista e link um embaixo do outro */
    padding: 32px 24px;
    text-align: center;
    color: var(--sumi);
    text-decoration: none;
    background-color: var(--branco);
    border: 1px solid var(--linha);
    border-top: 3px solid var(--aka);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(20, 27, 43, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.porta:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(20, 27, 43, 0.10);
}

.porta h3 {
    margin: 0 0 4px;
    font-family: var(--fonte-titulo);
    font-size: 1.3rem;
}

.porta p {
    margin: 0 0 16px;
    color: var(--texto-suave);
}

/* lista com ✓: o bloco fica no centro do cartão, mas o texto alinhado à esquerda */
.checklist {
    list-style: none;
    width: fit-content;   /* a lista ocupa só a largura do item mais comprido */
    margin: 0 auto 24px;
    padding: 0;
    text-align: left;
}

.checklist li {
    margin-bottom: 6px;
}

.checklist li::before {
    content: "✓";
    margin-right: 10px;
    color: var(--aka);
    font-weight: 700;
}

/* item que ainda não existe: círculo vazio e texto mais apagado */
.checklist .breve {
    color: var(--texto-suave);
}

.checklist .breve::before {
    content: "◌";
    color: var(--texto-suave);
}

/* margin-top: auto empurra o link para o fundo: todos ficam alinhados */
.porta-link {
    margin-top: auto;
    color: var(--ai);
    font-weight: 600;
}

/* ===== Cartões (serviços e benefícios) ===== */
.cartoes {
    list-style: none;   /* tira as bolinhas da lista */
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;   /* celular: 1 coluna */
    gap: 16px;
}

/* colunas definidas por largura de tela, para nunca sobrar um cartão sozinho */
@media (min-width: 720px) {
    .cartoes {
        grid-template-columns: repeat(3, 1fr);   /* listas de 3: 3 colunas */
    }
}

/* listas de 2 (celulares): 2 colunas, mais estreitas e centralizadas */
@media (min-width: 480px) {
    .cartoes-2 {
        grid-template-columns: repeat(2, 1fr);
        max-width: 680px;
    }
}

/* ">" = só os filhos diretos (os cartões) */
.cartoes > li {
    background-color: var(--branco);
    border: 1px solid var(--linha);
    border-top: 3px solid var(--ai);
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(20, 27, 43, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.cartoes > li:hover {
    transform: translateY(-4px);   /* o cartão "sobe" um pouquinho */
    box-shadow: 0 8px 20px rgba(20, 27, 43, 0.10);
}

/* ícone redondo dos cartões de serviço e das portas */
.icone {
    display: block;
    box-sizing: content-box;   /* o padding fica em volta dos 32px do ícone */
    margin: 0 auto 16px;
    padding: 14px;
    color: var(--ai);          /* o ícone usa esta cor (stroke="currentColor") */
    background-color: var(--washi);
    border-radius: 50%;        /* fundo redondo */
}

.cartoes h3 {
    margin: 0 0 8px;
    font-family: var(--fonte-titulo);
    font-size: 1rem;
}

.cartoes p {
    margin: 0;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--texto-suave);
}

/* ===== Botões lado a lado (catálogo e Instagram) ===== */
.botoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* ===== Portfólio (página Desenvolvimento) ===== */
#cardapios h3 {
    margin-top: 48px;
    margin-bottom: 24px;
    font-family: var(--fonte-titulo);
}

/* outros projetos do portfólio (abaixo do destaque): cartões de até 300px, centralizados */
.portfolio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
}

.projeto {
    background-color: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 8px;
    overflow: hidden;   /* a imagem respeita os cantos arredondados */
    box-shadow: 0 4px 12px rgba(20, 27, 43, 0.05);
}

/* imagem (ou espaço vazio) sempre no formato 4:3, sem distorcer */
.projeto img,
.projeto-vazio {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.projeto-info {
    padding: 16px 20px 24px;
}

.projeto-info h3,
.projeto-info h4 {
    margin: 0 0 8px;
    font-family: var(--fonte-titulo);
}

.projeto-info p {
    margin: 0 0 12px;
    color: var(--texto-suave);
    font-size: 0.95rem;
}

.projeto-info a {
    font-weight: 600;
    text-decoration: none;
}

/* ===== Projeto em destaque (carro-chefe do portfólio) ===== */
.projeto-destaque {
    max-width: 880px;
    margin: 0 auto;
    border-top: 3px solid var(--aka);
    box-shadow: 0 8px 24px rgba(20, 27, 43, 0.08);
}

.projeto-destaque .projeto-info {
    padding: 24px;
}

.projeto-destaque h4 {
    font-size: 1.4rem;
}

.projeto-destaque .projeto-info p {
    margin-bottom: 20px;
    font-size: 1rem;
}

/* no computador: imagem de um lado, textos do outro */
@media (min-width: 768px) {
    .projeto-destaque {
        display: grid;
        grid-template-columns: 1fr 1fr;   /* duas colunas iguais */
        align-items: center;              /* textos centralizados na vertical */
        text-align: left;
    }

    .projeto-destaque .projeto-info {
        padding: 32px 40px;
    }
}

/* cartão "Em breve": borda tracejada e 準備中 (em preparação) na vertical */
.em-breve {
    background-color: transparent;
    border-style: dashed;
    box-shadow: none;
}

.projeto-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px dashed var(--linha);
}

.projeto-vazio span {
    writing-mode: vertical-rl;   /* 準備中 na vertical */
    font-family: var(--fonte-jp);
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 0.3em;
    color: var(--linha);
}

/* etiqueta vermelha pequena ("Em breve") */
.etiqueta {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 10px;
    color: var(--aka);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--aka);
    border-radius: 999px;
}

/* ===== Botões ===== */
/* botão principal (vermelho): a ação mais importante da seção */
.botao {
    display: inline-block;
    margin-top: 8px;
    padding: 14px 28px;
    background-color: var(--aka);
    color: var(--branco);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    text-decoration: none;   /* tira o sublinhado do link */
    border-radius: 8px;      /* cantos como os do carimbo */
    box-shadow: 0 4px 12px rgba(200, 16, 46, 0.30);
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.botao:hover {
    background-color: var(--aka-escuro);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(200, 16, 46, 0.40);
}

/* botão "contornado": chama atenção sem competir com o botão vermelho principal */
.botao-secundario {
    display: inline-block;
    padding: 10px 22px;
    color: var(--ai);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--ai);
    border-radius: 8px;
    transition: background-color 0.2s, color 0.2s;
}

.botao-secundario:hover {
    background-color: var(--ai);
    color: var(--branco);
}

/* dentro de .botoes, o margin-top do .botao desalinharia os dois botões */
.botoes .botao {
    margin-top: 0;
}

/* ===== Rodapé com contato ===== */
footer {
    background-color: var(--sumi);
    color: var(--washi);
    text-align: center;
    padding: 56px 16px 24px;
}

/* links claros sobre o fundo escuro (menos o botão, que já tem cor) */
footer a:not(.botao) {
    color: var(--washi);
}

/* margem de cima = respiro entre o botão e a lista */
.contato-lista {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.contato-lista li {
    margin-bottom: 4px;
}

.copyright {
    margin: 40px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(246, 245, 241, 0.15);
    font-size: 0.85rem;
    opacity: 0.7;
}