/* ==========================================================================
   Socequi blog — estilos proprios
   --------------------------------------------------------------------------
   Aqui vao os estilos das seccoes da landing page, portadas do design em
   _design-reference/Lps/ (export Figma Make: Vite + React + Tailwind v4).

   Neste momento so contem os tokens da marca e um reset minimo, para o
   header/footer portados assentarem. As seccoes entram a seguir, uma a uma.

   Cores da marca, lidas de socequi.pt/media/css/custom.css:
     --sq-azul   #003E7E   barra de navegacao, botoes primarios
     --sq-lima   #C2D500   destaques, underline de hover, icones
     --sq-texto  #333333   texto corrente
   ========================================================================== */

:root {
    --sq-azul:         #003E7E;
    --sq-azul-escuro:  #102538;  /* fundo do hero — vem do design Lps, nao do site principal */
    --sq-lima:         #C2D500;
    --sq-lima-hover:   #afc100;
    --sq-texto:        #333333;
    --sq-texto-claro:  #636363;
    --sq-cinza:        #353535;
    --sq-fonte:        'Montserrat', sans-serif;

    --sq-raio:         .5rem;
    --sq-raio-lg:      .75rem;
    --sq-largura-max:  80rem;    /* = max-w-7xl do design */
}

body {
    font-family: var(--sq-fonte);
    color: var(--sq-texto);
    margin: 0;
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: black;
}

ul {
    list-style: none;
}

/* O header do site principal assume que .fluid nao limita a largura —
   o base.css do SM8 base nao garante isso em todos os contextos. */
.fluid {
    width: 100%;
}

/**
 * Tamanho por omissao dos icones SVG.
 *
 * Os SVG do sq_icone() sao emitidos sem width/height, so com viewBox, para o
 * CSS mandar. Cada contexto define o seu tamanho (.sqBtn .sqIcone,
 * .sqFaqPergunta .sqIcone, ...), mas sem uma regra base um icone num
 * contexto novo cresce ate ao tamanho do contentor — foi o que aconteceu com
 * o botao .sqFormSubmeter do formulario de contacto, que nao e um .sqBtn.
 *
 * Esta regra tem especificidade 0,1,0, por isso qualquer regra de contexto
 * continua a ganhar.
 */
.sqIcone {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   SECCOES DA LANDING
   --------------------------------------------------------------------------
   [x] .sqHero              <- HeroSection.tsx
   [ ] .sqIntro             <- IntroSection.tsx
   [ ] .sqSolucoes          <- SolutionsSection.tsx
   [ ] .sqAplicacoes        <- ApplicationsSection.tsx
   [ ] .sqEncontrarSolucao  <- FindSolutionSection.tsx
   [ ] .sqArtigos           <- ArticlesSection.tsx
   [ ] .sqFaq               <- FaqSection.tsx
   [ ] .sqCta               <- CtaSection.tsx
   [ ] .sqContactos         <- ContactSection.tsx
   -------------------------------------------------------------------------- */


/* ==========================================================================
   HERO  <- _design-reference/Lps/src/app/components/HeroSection.tsx
   --------------------------------------------------------------------------
   O design usa Tailwind + motion/react. Aqui e' CSS simples: as classes
   utilitarias viraram classes proprias e as animacoes do motion viraram
   @keyframes com animation-delay equivalente aos delays do componente.

   Equivalencias de breakpoint (Tailwind -> aqui):
     sm: 640px    lg: 1024px
   ========================================================================== */

.sqHero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 500px;
    background-color: var(--sq-azul-escuro);
}

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

.sqHeroFundo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .30;
}

/* Degrade da esquerda para a direita: o texto assenta sobre a zona opaca */
.sqHeroFundo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
                var(--sq-azul-escuro) 0%,
                rgba(16, 37, 56, .8) 50%,
                rgba(16, 37, 56, 0) 100%);
}

.sqHeroConteudo {
    position: relative;   /* acima do fundo */
    width: 100%;
    max-width: var(--sq-largura-max);
    margin: 0 auto;
    padding: 4rem 1rem;
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

/* min-width:0 — por defeito um filho de grid tem min-width:auto e nao encolhe
   abaixo do seu conteudo, o que faz palavras longas transbordarem a coluna. */
.sqHeroTexto {
    min-width: 0;
}

.sqHeroEyebrow {
    color: var(--sq-lima);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 .75rem;
}

.sqHeroTitulo {
    color: #fff;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1.25rem;
    font-size: clamp(1.8rem, 5vw, 3.2rem);
}

.sqHeroLead {
    color: rgba(255, 255, 255, .8);
    font-size: .875rem;
    line-height: 1.65;
    margin: 0 0 1.75rem;
    max-width: 36rem;
}

.sqHeroAccoes {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.sqBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .875rem 1.5rem;
    border-radius: var(--sq-raio);
    font-family: var(--sq-fonte);
    font-size: .875rem;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.sqBtnPrimario {
    background-color: var(--sq-lima);
    color: var(--sq-azul);
    font-weight: 700;
    border: 1px solid transparent;
}

.sqBtnPrimario:hover,
.sqBtnPrimario:focus-visible {
    background-color: var(--sq-lima-hover);
    color: var(--sq-azul);
}

.sqBtnSecundario {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, .2);
}

.sqBtnSecundario:hover,
.sqBtnSecundario:focus-visible {
    background-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.sqBtn .sqIcone {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

/* --- cartoes de numeros --- */

.sqHeroNumeros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.sqHeroNumeroCartao {
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--sq-raio-lg);
    padding: .75rem 1rem;
}

.sqHeroNumeroValor {
    color: var(--sq-lima);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 0 .125rem;
}

.sqHeroNumeroLabel {
    color: rgba(255, 255, 255, .7);
    font-size: .75rem;
    margin: 0;
}

/* Ate lg mostra-se a versao curta (2 cartoes); a partir de lg, a completa (4) */
.sqHeroNumerosCompletos { display: none; }

@media (min-width: 640px) {
    .sqHero            { min-height: 580px; }
    .sqHeroConteudo    { padding: 5rem 1.5rem; }
    .sqHeroEyebrow     { margin-bottom: 1rem; }
    .sqHeroTitulo      { margin-bottom: 1.5rem; }
    .sqHeroLead        { font-size: 1rem; margin-bottom: 2rem; }
    .sqHeroAccoes      { flex-direction: row; }
}

@media (min-width: 1024px) {
    .sqHeroConteudo         { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
    .sqHeroNumerosCurtos    { display: none; }
    .sqHeroNumerosCompletos { display: grid; gap: 1rem; }

    .sqHeroNumerosCompletos .sqHeroNumeroCartao {
        padding: 1.25rem;
        -webkit-backdrop-filter: blur(4px);
                backdrop-filter: blur(4px);
    }
    .sqHeroNumerosCompletos .sqHeroNumeroValor { font-size: 1.875rem; }
    .sqHeroNumerosCompletos .sqHeroNumeroLabel { font-size: .875rem; }
}

/* --- animacoes de entrada (equivalente ao motion/react do design) ---------
   animation-fill-mode: both -> o elemento fica no estado inicial antes de
   comecar, e mantem o final depois. Sem isto havia um salto visivel.        */

@keyframes sqSubir {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sqEntrarDireita {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.sqHeroEyebrow          { animation: sqSubir .5s cubic-bezier(.22,1,.36,1) .10s both; }
.sqHeroTitulo           { animation: sqSubir .6s cubic-bezier(.22,1,.36,1) .20s both; }
.sqHeroLead             { animation: sqSubir .6s cubic-bezier(.22,1,.36,1) .35s both; }
.sqHeroAccoes           { animation: sqSubir .5s cubic-bezier(.22,1,.36,1) .50s both; }
.sqHeroNumerosCurtos    { animation: sqSubir .6s cubic-bezier(.22,1,.36,1) .40s both; }
.sqHeroNumerosCompletos { animation: sqEntrarDireita .7s cubic-bezier(.22,1,.36,1) .40s both; }

/* escalonamento dos 4 cartoes, como no map() com delay 0.5 + i*0.08 */
.sqHeroNumerosCompletos .sqHeroNumeroCartao:nth-child(1) { animation: sqSubir .5s ease-out .50s both; }
.sqHeroNumerosCompletos .sqHeroNumeroCartao:nth-child(2) { animation: sqSubir .5s ease-out .58s both; }
.sqHeroNumerosCompletos .sqHeroNumeroCartao:nth-child(3) { animation: sqSubir .5s ease-out .66s both; }
.sqHeroNumerosCompletos .sqHeroNumeroCartao:nth-child(4) { animation: sqSubir .5s ease-out .74s both; }

/* Acessibilidade: sem animacao para quem a desactivou no sistema.
   Importante — sem este bloco o conteudo ficaria invisivel (opacity:0)
   se as animacoes nao corressem. */
@media (prefers-reduced-motion: reduce) {
    .sqHeroEyebrow,
    .sqHeroTitulo,
    .sqHeroLead,
    .sqHeroAccoes,
    .sqHeroNumerosCurtos,
    .sqHeroNumerosCompletos,
    .sqHeroNumerosCompletos .sqHeroNumeroCartao {
        animation: none;
        opacity: 1;
        transform: none;
    }
}