/* =========================
   SEDEL - ESTILO PREMIUM
========================= */

:root{

--azul:#1e3a8a;
--azul2:#162d6b;

--cinza:#f5f6fa;

--preto:#222;

--branco:#fff;

}

/* RESET */

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

html{
scroll-behavior:smooth;
}

body{

font-family:Arial,sans-serif;

background:var(--cinza);

color:var(--preto);
}

/* =========================
   TOP BAR
========================= */

.top-bar{

background:
linear-gradient(
90deg,
#1e3a8a,
#162d6b
);

color:white;

padding:8px 15px;

display:flex;

align-items:center;

justify-content:center;

position:relative;

box-shadow:
0 2px 10px rgba(0,0,0,.08);
}

/* ESQUERDA */

.top-bar .left{

position:absolute;

left:15px;
}

/* CENTRO */

.top-bar .center{

font-size:13px;

font-weight:700;

text-align:center;

letter-spacing:.3px;
}

/* LINKS */

.top-bar a{

color:white;

font-size:18px;

text-decoration:none;

transition:.25s;
}

.top-bar a:hover{

opacity:.8;

transform:translateY(-2px);
}

/* =========================
   HEADER
========================= */

header{

background:
linear-gradient(
180deg,
#ffffff,
#f7f8fc
);

padding:24px;

display:flex;

justify-content:center;

align-items:center;

position:sticky;

top:0;

z-index:1000;

box-shadow:
0 4px 16px rgba(0,0,0,.06);

transition:.35s ease;
}

/* LOGO */

.top-content{

display:flex;

justify-content:center;

align-items:center;

width:100%;
}

header img{

height:135px;

max-width:95%;

object-fit:contain;

transition:.35s ease;
}

/* HEADER SHRINK */

header.shrink{

padding:10px 20px;
}

header.shrink img{

height:75px;
}

/* =========================
   TITULO
========================= */

.titulo{

text-align:center;

margin:28px 15px 20px;

font-size:30px;

font-weight:800;

color:var(--azul2);

letter-spacing:.5px;
}

/* =========================
   MENU CATEGORIAS
========================= */

.menu-categorias{

display:flex;

justify-content:center;

gap:14px;

flex-wrap:wrap;

margin:22px auto;

padding:0 15px;
}

.menu-categorias a{

background:
linear-gradient(
135deg,
#1e3a8a,
#162d6b
);

color:white;

text-decoration:none;

padding:13px 22px;

border-radius:999px;

font-weight:700;

font-size:15px;

transition:.25s ease;

box-shadow:
0 8px 18px rgba(22,45,107,.18);
}

.menu-categorias a:hover{

transform:
translateY(-3px);

box-shadow:
0 14px 28px rgba(22,45,107,.28);
}

/* =========================
   DIVISÃO CATEGORIA
========================= */

.categoria{

max-width:1000px;

margin:42px auto 18px;

padding:16px 22px;

background:white;

border-radius:18px;

font-size:26px;

font-weight:800;

color:#162d6b;

display:flex;

align-items:center;

overflow:hidden;

position:relative;

box-shadow:
0 6px 18px rgba(0,0,0,.05);
}

/* BARRA */

.categoria::before{

content:"";

position:absolute;

left:0;

top:0;

bottom:0;

width:8px;

background:
linear-gradient(
180deg,
#1e3a8a,
#162d6b
);
}

/* LINHA */

.categoria::after{

content:"";

flex:1;

height:2px;

margin-left:18px;

background:
linear-gradient(
90deg,
rgba(30,58,138,.30),
transparent
);
}

/* =========================
   GRID
========================= */

.container{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

gap:20px;

padding:20px;

max-width:1100px;

margin:auto;
}

/* =========================
   CARD
========================= */

.card{

background:white;

border-radius:22px;

overflow:hidden;

box-shadow:
0 6px 18px rgba(0,0,0,.08);

transition:.28s ease;

position:relative;
}

.card:hover{

transform:
translateY(-6px);

box-shadow:
0 14px 30px rgba(0,0,0,.14);
}

/* IMAGEM */

.img-box{

overflow:hidden;
}

.img-box img{

width:100%;

aspect-ratio:1/1;

object-fit:cover;

display:block;

transition:transform .35s ease;
}

.card:hover .img-box img{

transform:scale(1.05);
}

/* =========================
   BOTÃO
========================= */

.btn{

display:flex;

justify-content:center;

align-items:center;

width:calc(100% - 24px);

margin:14px auto;

padding:15px 18px;

border:none;

border-radius:16px;

background:
linear-gradient(
135deg,
#1e3a8a,
#162d6b
);

color:white;

font-size:15px;

font-weight:700;

cursor:pointer;

transition:.22s ease;

box-shadow:
0 8px 20px rgba(22,45,107,.22);
}

.btn:hover{

transform:
translateY(-3px);

box-shadow:
0 14px 28px rgba(22,45,107,.30);
}

.btn:active{

transform:scale(.98);
}

/* =========================
   MODAL
========================= */

.modal{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.6);

justify-content:center;

align-items:center;

padding:15px;

z-index:9999;
}

.modal-content{

background:white;

padding:28px;

border-radius:22px;

width:100%;

max-width:380px;

position:relative;

box-shadow:
0 20px 40px rgba(0,0,0,.18);

animation:popup .25s ease;
}

/* ANIMAÇÃO */

@keyframes popup{

from{
opacity:0;
transform:scale(.92);
}

to{
opacity:1;
transform:scale(1);
}
}

/* FECHAR */

.fechar{

position:absolute;

top:15px;
right:18px;

font-size:24px;

cursor:pointer;

color:#666;
}

/* INPUTS */

input{

width:100%;

padding:14px;

margin-top:12px;

border-radius:12px;

border:1px solid #ddd;

font-size:15px;

outline:none;

transition:.22s;
}

input:focus{

border-color:#1e3a8a;
}

/* =========================
   RESPONSIVO
========================= */

@media(max-width:900px){

.container{

grid-template-columns:
repeat(2,1fr);
}

header img{

height:95px;
}

.titulo{

font-size:26px;
}
}

@media(max-width:600px){

/* HEADER */

header{

padding:14px 10px;
}

header img{

height:75px;
}

header.shrink img{

height:55px;
}

/* TOP BAR */

.top-bar{

padding:10px;
}

.top-bar .center{

font-size:12px;
}

/* MENU */

.menu-categorias{

overflow-x:auto;

flex-wrap:nowrap;

justify-content:flex-start;

padding:12px;

gap:10px;

scrollbar-width:none;
}

.menu-categorias::-webkit-scrollbar{
display:none;
}

.menu-categorias a{

white-space:nowrap;

font-size:13px;

padding:11px 18px;

flex:none;
}

/* TITULO */

.titulo{

font-size:22px;

margin:20px 10px;
}

/* CATEGORIA */

.categoria{

margin:24px 10px 16px;

padding:14px 18px;

font-size:20px;

border-radius:16px;
}

/* GRID */

.container{

grid-template-columns:1fr 1fr;

gap:12px;

padding:10px;
}

/* CARD */

.card{

border-radius:18px;
}

/* BOTÃO */

.btn{

font-size:13px;

padding:13px;
}

/* MODAL */

.modal-content{

padding:24px;

border-radius:18px;
}
}

@media(max-width:420px){

.container{

grid-template-columns:1fr;
}
}
/* =========================
   TITULO PREMIUM
========================= */

.titulo{

max-width:1000px;

margin:28px auto 10px;

padding:18px 24px;

background:white;

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

position:relative;

overflow:hidden;

font-size:34px;

font-weight:800;

letter-spacing:.5px;

color:#162d6b;

box-shadow:
0 8px 20px rgba(0,0,0,.05);
}

/* LINHA ESQUERDA */

.titulo::before{

content:"";

width:70px;

height:4px;

border-radius:999px;

margin-right:18px;

background:
linear-gradient(
90deg,
#1e3a8a,
#162d6b
);
}

/* LINHA DIREITA */

.titulo::after{

content:"";

width:70px;

height:4px;

border-radius:999px;

margin-left:18px;

background:
linear-gradient(
90deg,
#162d6b,
#1e3a8a
);
}