:root{
--fc-blue:      #0a4c96;
--fc-blue-dark: #08386e;
--fc-blue-mid: #064d8d;
--fc-green:     #00913f;
--fc-yellow:    #ffd200;
--fc-gray:      #9a9a9a;
--fc-text:      #14181f;
--fc-radius:    6px;
--fc-gap:       16px;   /* espaço entre os itens da esteira */
--fc-arrow:     44px;   /* tamanho do botão de seta */
--fc-ease:      cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }

.demo-wrap{ max-width:1180px; margin:0 auto; }

/* ===================================================================
    ESTEIRA (carousel)
    =================================================================== */

.fc-carousel-section{
    margin-top: 20px;
    padding:20px;
}
.fc-inspire-title{
    font-size:17px;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--fc-blue-mid);
    margin:0 0 14px;
    text-transform:uppercase;
    text-indent:65px;
}

.fc-carousel{
    position:relative;
    padding:0 56px;               /* espaço para as setas nas laterais */
}

.fc-viewport{
    overflow:hidden;
}

.fc-track{
    display:flex;
    gap:var(--fc-gap);
    will-change:transform;
    transition:transform .45s var(--fc-ease);
}

.fc-item{
    flex:0 0 auto;               /* a largura é definida via JS */
    border:0;
    padding:0;
    margin:0;
    background:#f4f4f4;
    border-radius:var(--fc-radius);
    overflow:hidden;
    cursor:zoom-in;
    aspect-ratio:1/1;            /* quadrado, como no layout */
    display:block;
    position:relative;
    outline-offset:3px;
    height:100%; /* ajuste para safari */
}
.fc-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s var(--fc-ease);
}
.fc-item:hover img{ transform:scale(1.05); }
.fc-item:focus-visible{ outline:3px solid var(--fc-blue); }

/* Setas da esteira */
.fc-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:var(--fc-arrow);
height:var(--fc-arrow);
border:none;
border-radius:50%;
background:#fff;
color:var(--fc-blue);
box-shadow:0 2px 10px rgba(0,0,0,.16);
cursor:pointer;
display:grid;
place-items:center;
z-index:2;
transition:background .2s,color .2s,opacity .2s,transform .2s;
}
.fc-arrow:hover{ background:var(--fc-blue); color:#fff; }
.fc-arrow:focus-visible{ outline:3px solid var(--fc-blue-dark); outline-offset:2px; }
.fc-arrow svg{ width:22px; height:22px; }
.fc-prev{ left:0; }
.fc-next{ right:0; }
.fc-arrow[disabled]{
opacity:.35;
cursor:default;
pointer-events:none;
}

/* ===================================================================
    LIGHTBOX (zoom com fundo branco)
    =================================================================== */
.fc-lightbox{
position:fixed;
inset:0;
background:rgba(60,60,60,.55);
display:flex;
align-items:center;
justify-content:center;
padding:24px;
z-index:1000;
opacity:0;
visibility:hidden;
transition:opacity .25s ease, visibility .25s ease;
}
.fc-lightbox.is-open{ opacity:1; visibility:visible; }

.fc-lightbox-panel{
position:relative;
background:#fff;
border-radius:14px;
width:min(960px, 100%);
max-height:calc(100vh - 48px);
padding:56px 88px;
display:flex;
align-items:center;
justify-content:center;
transform:scale(.96);
transition:transform .25s var(--fc-ease);
}
.fc-lightbox.is-open .fc-lightbox-panel{ transform:scale(1); }

.fc-lightbox-img{
max-width:100%;
max-height:calc(100vh - 160px);
object-fit:contain;
border-radius:6px;
display:block;
}

.fc-lb-close{
position:absolute;
top:16px;
right:18px;
width:40px;height:40px;
border:none;background:transparent;
color:var(--fc-blue);
cursor:pointer;
display:grid;place-items:center;
border-radius:50%;
transition:background .2s;
}
.fc-lb-close:hover{ background:#eef3fa; }
.fc-lb-close svg{ width:26px;height:26px; }

.fc-lb-arrow{
position:absolute;
top:50%;transform:translateY(-50%);
width:46px;height:46px;
border:none;background:transparent;
color:var(--fc-blue);
cursor:pointer;
display:grid;place-items:center;
border-radius:50%;
transition:background .2s;
}
.fc-lb-arrow:hover{ background:#eef3fa; }
.fc-lb-arrow svg{ width:30px;height:30px; }
.fc-lb-prev{ left:14px; }
.fc-lb-next{ right:14px; }

.fc-lb-close:focus-visible,
.fc-lb-arrow:focus-visible{ outline:3px solid var(--fc-blue); outline-offset:2px; }

/* Lightbox em telas pequenas */
@media (max-width:600px){
.fc-lightbox-panel{ padding:52px 12px; border-radius:10px; }
.fc-lb-prev{ left:2px; } .fc-lb-next{ right:2px; }
.fc-lb-arrow{ width:40px;height:40px; }
.fc-inspire-title{ text-indent: 125px; }
}

/* Respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce){
.fc-track, .fc-item img, .fc-lightbox, .fc-lightbox-panel{ transition:none; }
}

/* Rótulo do bloco de demonstração (remova no site) */
.demo-note{
font-size:13px;color:#667; margin:6px 0 30px;
padding:10px 14px;background:#f5f7fa;border-radius:6px;
border-left:3px solid var(--fc-blue);
}