/* ============ TOKENS ============ */
:root{
--navy:        #1c2a3a;   /* azul-marinho dos selos e títulos */
--navy-dark:   #17222e;
--terra:       #b5764a;   /* terracota/marrom */
--teal:        #2f5d68;   /* verde-azulado */
--ink:         #1c2a3a;
--text:        #2b2b2b;
--muted:       #5b6570;
--line:        #1c2a3a;
--page:        #ffffff;

--revide-red:  #e30613;   /* acento da marca Revide (menu/rodapé) */
--header-bg:   #14181d;
--footer-bg:   #14181d;

--container:   1280px;
--radius:      10px;
--font-body:   'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
--font-head:   'Montserrat', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ============ TOPO / MENU REVIDE ============ */
.rv-header{
background:var(--header-bg);
color:#fff;
position:sticky;
top:0;
z-index:50;
box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.rv-header__inner{
max-width:1180px;
margin:0 auto;
padding:0 18px;
display:flex;
align-items:center;
gap:22px;
min-height:64px;
}
.rv-logo{
font-family:var(--font-head);
font-weight:800;
font-size:28px;
letter-spacing:-1px;
color:#fff;
line-height:1;
display:flex;
align-items:baseline;
gap:2px;
}
.rv-logo b{ color:var(--revide-red); }
.rv-logo span{
font-size:10px;
font-weight:500;
letter-spacing:.5px;
color:#aeb6bf;
margin-left:6px;
}

.rv-nav{ margin-left:auto; }
.rv-nav ul{
list-style:none;
margin:0; padding:0;
display:flex;
gap:20px;
}
.rv-nav a{
font-family:var(--font-head);
font-weight:700;
font-size:13px;
text-transform:uppercase;
letter-spacing:.3px;
color:#e8ebee;
padding:6px 0;
border-bottom:2px solid transparent;
transition:color .15s, border-color .15s;
}
.rv-nav a:hover{ color:#fff; border-color:var(--revide-red); }

.rv-burger{ display:none; }
.rv-burger-btn{
display:none;
margin-left:auto;
width:42px; height:42px;
border:0; background:transparent; cursor:pointer;
flex-direction:column; justify-content:center; gap:5px;
}
.rv-burger-btn span{
display:block; height:2px; width:24px; background:#fff; border-radius:2px;
}

/* ============ ÁREA DA PÁGINA (AGENDA) ============ */
.page{
background:var(--page);
max-width:var(--container);
margin:0px auto 26px auto;
position:relative;
overflow:hidden;
}
.page__pad{ padding:34px 40px 70px; }

.page__pad{ padding-bottom:30px !important; }

/* --- Cabeçalho da Agenda: logo + seletor --- */
.agenda-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:660px;
flex-wrap:wrap;
margin-bottom:30px;
}

/* Logotipo tipográfico "Agenda Cultural" (substitui o logo ilustrado do layout) */
.agenda-logo{
font-family:var(--font-head);
font-weight:800;
line-height:.9;
color:var(--navy);
position:relative;
letter-spacing:-1.5px;
text-indent:-9999px;
background-image:url('../img/logo-agenda-cultural.svg');
background-size: cover;
width:249px; height:89px;
}
.agenda-logo .l1{ display:block; font-size:44px; }
.agenda-logo .l2{ display:block; font-size:44px; }
.agenda-logo::after{  /* círculo terracota decorativo atrás do texto */
content:"";
position:absolute;
right:-30px; top:6px;
width:74px; height:74px;
background:var(--terra);
border-radius:50%;
z-index:-1;
opacity:.95;
}

/* Seletor de mês/ano */
.selector{ display:flex; flex-direction:column; gap:10px; }
.selector__row{ display:flex; align-items:stretch; gap:8px; }
.sel-arrow{
width:38px;
background:var(--navy);
border:none;
border-radius:6px;
color:#fff;
cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.sel-arrow svg{ width:16px; height:16px; }
.sel-field{
min-width:150px;
border:2px solid var(--navy);
border-radius:6px;
background:#fff;
color:var(--navy);
font-family:var(--font-head);
font-weight:700;
font-size:15px;
letter-spacing:.5px;
padding:8px 12px;
appearance:none;
-webkit-appearance:none;
cursor:pointer;
}
.sel-ok{
background:var(--navy);
color:#fff;
border:none;
border-radius:6px;
font-family:var(--font-head);
font-weight:700;
font-size:14px;
padding:0 16px;
cursor:pointer;
}
.sel-ok:hover{ background:var(--navy-dark); }

/* ============ CARTÕES DE EVENTO ============ */
.event{ margin-bottom:42px; }
.event:first-child{ margin-top: -60px; }

/* Selo de data com "sombra" terracota deslocada */
.event__badge{
display:inline-flex;
align-items:stretch;
background:var(--navy);
color:#fff;
border-radius:8px;
box-shadow:5px 6px 0 0 var(--terra);
overflow:hidden;
margin-bottom:20px;
}

.event--past .event__badge{ 
    background:gray;
    box-shadow:5px 6px 0 0 black;
}
.event__date,
.event__day{
font-family:var(--font-head);
font-weight:800;
font-size:19px;
padding:9px 18px;
white-space:nowrap;
}
.event__day{ font-style:italic; border-left:2px solid rgba(255,255,255,.35); }

.event__title{
font-family:var(--font-head);
font-weight:800;
font-size:21px;
letter-spacing:.2px;
text-transform:uppercase;
color:var(--navy);
margin:0 0 12px;
}

.event--past .event__title{
    color:gray;
}
.event__rule{
height:3px;
background:var(--line);
border:0;
margin:0 0 20px;
}

.event__body{ display:flex; gap:10px; align-items:flex-start; }
.event__media{
flex:0 0 230px;
aspect-ratio:230/170;
background:#000;
border-radius:2px;
overflow:hidden;
}
.event__media img{ width:100%; height:100%; object-fit:cover; }

.event--past .event__media{
    filter: grayscale(100%);
}

.event__content{ flex:1 1 auto; min-width:0; }
.event__desc{
margin:0 0 18px;
color:#333;
font-size:15.5px;
line-height:1.55;
}
.event__meta{
display:flex;
flex-wrap:wrap;
gap:12px 34px;
align-items:center;
}
.meta-item{
display:inline-flex;
align-items:center;
gap:8px;
font-family:var(--font-head);
font-weight:700;
font-size:16px;
color:var(--navy);
}
.meta-item svg{ width:20px; height:20px; flex:0 0 auto; }

/* ============ FORMAS DECORATIVAS (rodapé do layout) ============ */
.page__shapes{
position:absolute;
right:0; bottom:0;
width:300px; height:150px;
pointer-events:none;
overflow:hidden;
}
.shape-teal{
position:absolute;
right:78px; bottom:-70px;
width:170px; height:170px;
background:var(--teal);
border-radius:50%;
}
.shape-terra{
position:absolute;
right:-40px; bottom:-60px;
width:150px; height:150px;
background:var(--terra);
border-radius:50%;
}

/* ============ RODAPÉ REVIDE ============ */
.rv-footer{
background:var(--footer-bg);
color:#c7ced5;
font-size:14px;
}
.rv-footer__inner{
max-width:1180px;
margin:0 auto;
padding:44px 18px 20px;
}
.rv-footer__cities{
color:#9aa4ad;
font-size:13px;
line-height:1.7;
margin:0 0 30px;
padding-bottom:26px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.rv-footer__cols{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:26px;
}
.rv-footer h4{
font-family:var(--font-head);
font-weight:700;
font-size:14px;
text-transform:uppercase;
letter-spacing:.4px;
color:#fff;
margin:0 0 14px;
}
.rv-footer ul{ list-style:none; margin:0; padding:0; }
.rv-footer li{ margin-bottom:9px; }
.rv-footer a:hover{ color:#fff; }

.rv-footer__about{
margin-top:34px;
padding-top:26px;
border-top:1px solid rgba(255,255,255,.08);
color:#9aa4ad;
font-size:13px;
line-height:1.7;
}
.rv-footer__bottom{
max-width:1180px;
margin:0 auto;
padding:16px 18px;
border-top:1px solid rgba(255,255,255,.08);
display:flex;
flex-wrap:wrap;
gap:10px 22px;
align-items:center;
justify-content:space-between;
font-size:12.5px;
color:#8a949d;
}
.rv-footer__bottom nav{ display:flex; gap:20px; flex-wrap:wrap; }

/* ============ RESPONSIVO ============ */
@media (max-width: 900px){
    .rv-nav{ display:none; }
    .rv-burger-btn{ display:flex; }
    .rv-burger:checked ~ .rv-nav{
        display:block;
        position:absolute;
        left:0; right:0; top:64px;
        background:var(--header-bg);
        padding:10px 18px 18px;
        box-shadow:0 8px 14px rgba(0,0,0,.3);
    }
    .agenda-top{ gap:30px; }
    .rv-burger:checked ~ .rv-nav ul{
        flex-direction:column;
        gap:2px;
    }
    .rv-burger:checked ~ .rv-nav a{ display:block; padding:10px 0; }
}

@media (max-width: 760px){
.page{ margin:16px 12px; }
.page__pad{ padding:26px 20px 60px; }
.agenda-logo .l1, .agenda-logo .l2{ font-size:38px; }
.selector{ width:100%; }
.sel-field{ flex:1 1 auto; min-width:0; }
.rv-footer__cols{ grid-template-columns:repeat(2, 1fr); }
.agenda-top{ gap:30px; }
}

/* Empilha imagem em cima e texto embaixo já em telas de celular/tablet estreito */
@media (max-width: 680px){
.event__body{ flex-direction:column; align-items:stretch; }
.event__media{
    flex-basis:auto;
    width:100%;
    max-width:340px;
    aspect-ratio:230/170;
    margin:0 auto;      /* centraliza o quadrado na tela */
}
.event__content{ width:100%; }
.agenda-top{ gap:30px; }
}

@media (max-width: 560px){
.event__badge{ flex-wrap:wrap; }
.event__date, .event__day{ font-size:16px; padding:8px 14px; }
.event__title{ font-size:18px; }
.agenda-logo::after{ width:60px; height:60px; right:-18px; }
.agenda-top{ gap:30px; }
}

@media (max-width: 430px){
.rv-footer__cols{ grid-template-columns:1fr; }
.selector__row{ flex-wrap:wrap; }
.agenda-top{ gap:30px; }
}

@media (prefers-reduced-motion: reduce){
*{ transition:none !important; }
}