/* Tepcomex · páginas de expertise · Elemento Digital (usa site.css e paginas.css) */

/* abertura: texto + imagem da expertise; fundo parado (sem vídeo) */
.ph-fundo{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.8)}
.ph-ex .ph-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.ex-capa{position:relative;margin:0;animation:sobe 1s .3s var(--ease) both}
.ex-capa img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;border:1px solid rgba(255,255,255,.14);box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
.ex-capa figcaption{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:rgba(2,31,51,.82);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#cfe3ee}
.ex-capa figcaption b{color:var(--ouro2);font-size:18px;letter-spacing:.04em}

/* palavras com hífen que não podem quebrar (ex-tarifário, DU-E, door-to-door) */
.nw{white-space:nowrap}

/* títulos de seção das expertises */
.ex-sec{padding:110px 0}
.ex-sec h2{margin-top:18px;font-size:clamp(34px,3.6vw,54px);font-weight:800;color:var(--azul)}
.ex-sec h2 em{color:var(--azul2)}
.ex-sec-cab{max-width:900px}
.ex-sec-cab .ex-lead{margin-top:18px;font-size:19px;line-height:1.6;color:var(--tinta2);text-align:justify;hyphens:manual}
.ex-claro{background:#fff}
.ex-gelo{background:linear-gradient(180deg,var(--gelo),#fff)}
.ex-noite{background:linear-gradient(165deg,var(--noite2),var(--noite));color:#fff}
.ex-noite h2{color:#fff}
.ex-noite h2 em{color:var(--ciano)}
.ex-noite .ex-sec-cab .ex-lead{color:#cfe3ee}

/* lista do que avaliamos / da atuação */
/* flex: a última linha se estica e nunca sobra vão */
.ex-itens{list-style:none;margin:44px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.ex-itens li{flex:1 1 calc(33.333% - 12px);min-width:0;display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:12px;background:#fff;border:1px solid var(--linha);font-size:17.5px;font-weight:600;line-height:1.35;color:var(--tinta);transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.ex-itens li:hover{border-color:#b9d9e6;box-shadow:0 18px 34px -26px rgba(0,73,117,.45);transform:translateY(-2px)}
.ex-itens li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:6px;background:var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.ex-noite .ex-itens li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#fff}
.ex-noite .ex-itens li::before{background-color:var(--ouro)}
.ex-itens-2 li{flex-basis:calc(50% - 12px)}

/* frase de fechamento da expertise (do material) */
.ex-frase{margin:56px auto 0;max-width:980px;padding:30px 34px;border-radius:16px;background:var(--noite);color:#fff;font-size:clamp(22px,2vw,28px);font-weight:700;line-height:1.3;text-align:center;position:relative;overflow:hidden}
.ex-frase::before{content:"";position:absolute;left:34px;right:34px;top:0;height:2px;background:linear-gradient(90deg,var(--ciano),var(--ouro))}
.ex-frase em{font-style:normal;color:var(--ouro2)}
.ex-noite .ex-frase{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}

/* blocos de texto com título (aspectos, abordagem, benefícios) */
.ex-blocos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:44px}
.ex-blocos-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ex-blocos-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ex-bl{display:flex;flex-direction:column;padding:28px 28px 30px;border-radius:16px;background:#fff;border:1px solid var(--linha);position:relative;overflow:hidden;transition:box-shadow .3s,transform .3s var(--ease)}
.ex-bl:hover{box-shadow:var(--sombra);transform:translateY(-3px)}
.ex-bl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--ciano),var(--azul2))}
.ex-bl h3{font-size:22px;font-weight:800;line-height:1.15;color:var(--azul)}
.ex-bl p{margin-top:12px;font-size:16.5px;line-height:1.58;color:var(--tinta2)}
.ex-bl .ex-n{display:grid;place-items:center;width:44px;height:44px;margin-bottom:18px;border-radius:10px;background:var(--gelo);font-weight:800;font-size:19px;color:var(--azul)}
.ex-noite .ex-bl{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.ex-noite .ex-bl h3{color:#fff}
.ex-noite .ex-bl p{color:#cfe3ee}
.ex-noite .ex-bl .ex-n{background:rgba(217,164,65,.16);color:var(--ouro2)}

/* último cartão sozinho na linha ocupa a linha inteira (sem vão) */
.ex-blocos>:last-child:nth-child(odd){grid-column:1/-1}
.ex-blocos-3>:last-child:nth-child(odd){grid-column:auto}
.ex-blocos-3>:last-child:nth-child(3n+1){grid-column:1/-1}
.ex-blocos-3>:nth-last-child(2):nth-child(3n+1),.ex-blocos-3>:last-child:nth-child(3n+2){grid-column:span 1}
.ex-bl ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.ex-bl li{display:flex;align-items:baseline;gap:10px;font-size:16.5px;font-weight:500;line-height:1.4;color:var(--tinta)}
.ex-bl li::before{content:"";width:7px;height:7px;flex:none;border-radius:2px;background:var(--ciano);transform:translateY(-2px)}

/* passos numerados em linha */
.ex-passos{list-style:none;margin:44px 0 0;padding:0;counter-reset:ps;display:grid;gap:12px}
.ex-passos>li{counter-increment:ps;display:grid;grid-template-columns:64px minmax(0,.9fr) minmax(0,1.6fr);align-items:start;gap:24px;padding:24px 28px;border-radius:14px;background:#fff;border:1px solid var(--linha);transition:border-color .25s,box-shadow .25s}
.ex-passos>li:hover{border-color:#b9d9e6;box-shadow:0 18px 34px -26px rgba(0,73,117,.45)}
.ex-passos>li::before{content:counter(ps);display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--noite);color:var(--ouro2);font-weight:800;font-size:22px}
.ex-passos h3{font-size:21px;font-weight:800;line-height:1.2;color:var(--azul);padding-top:12px}
.ex-passos p{font-size:17px;line-height:1.58;color:var(--tinta2);padding-top:12px}
/* passos curtos: trilha horizontal, número em cima */
.ex-passos-curtos{display:flex;flex-wrap:wrap}
.ex-passos-curtos>li{flex:1 1 calc(20% - 12px);min-width:0;grid-template-columns:1fr;gap:16px;align-content:start;padding:26px 24px 28px}
.ex-passos-curtos h3{padding-top:0;font-size:19px;line-height:1.3}
.ex-noite .ex-passos>li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.ex-noite .ex-passos h3{color:#fff}
.ex-noite .ex-passos p{color:#cfe3ee}

/* texto corrido em duas colunas */
.ex-txt2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:36px}
.ex-txt2 p{font-size:18px;line-height:1.62;color:var(--tinta2);text-align:justify;hyphens:manual}
.ex-txt2 p+p{margin-top:16px}
.ex-noite .ex-txt2 p{color:#cfe3ee}

/* tabela (tipos de drawback e afins) */
.ex-tab{width:100%;margin-top:40px;border-collapse:separate;border-spacing:0;border:1px solid var(--linha);border-radius:16px;overflow:hidden;background:#fff}
.ex-tab th,.ex-tab td{padding:20px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linha)}
.ex-tab tr:last-child td{border-bottom:0}
.ex-tab thead th{background:var(--noite);color:#fff;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.ex-tab td:first-child{width:30%;font-weight:800;font-size:18px;color:var(--azul)}
.ex-tab td:nth-child(2){width:26%;font-weight:600;color:var(--azul2)}
.ex-tab td{font-size:16.5px;line-height:1.5;color:var(--tinta2)}
.ex-tab tbody tr{transition:background-color .2s}
.ex-tab tbody tr:hover{background:var(--gelo)}

/* onde atuamos e rotas */
.ex-onde{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
.ex-onde>div{padding:24px 24px 26px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.ex-onde h3{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro2)}
.ex-onde h3::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--ouro)}
.ex-onde ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.ex-onde li{font-size:18px;font-weight:600;color:#fff}
.ex-onde li small{font-weight:500;font-size:15px;color:#8fc3d6}
.ex-rotas{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ex-rotas li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;padding:18px 22px;border-radius:12px;background:#fff;border:1px solid var(--linha)}
.ex-rotas li b{font-size:19px;font-weight:800;color:var(--azul)}
.ex-rotas li span{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600;color:var(--tinta)}
.ex-rotas li span::before{content:"";flex:none;width:36px;height:2px;background:linear-gradient(90deg,var(--ciano),var(--ouro))}

/* parceria (assessoria jurídica) */
.ex-noite .ex-parc p{color:#cfe3ee}
.ex-noite .ex-parc-ct{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.ex-parc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;margin-top:44px}
.ex-parc p{font-size:18px;line-height:1.62;color:var(--tinta2);text-align:justify;hyphens:manual}
.ex-parc-ct{padding:28px 30px;border-radius:16px;background:var(--noite);color:#fff}
.ex-parc-ct ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.ex-parc-ct li{display:flex;align-items:baseline;gap:10px;font-size:16.5px;font-weight:600}
.ex-parc-ct li::before{content:"";width:7px;height:7px;flex:none;border-radius:2px;background:var(--ouro);transform:translateY(-2px)}
.ex-parc-ct a{display:grid;gap:2px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-weight:800;font-size:22px}
.ex-parc-ct a small{font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#8fc3d6}

/* outras expertises */
.ex-outras{padding:90px 0;background:var(--gelo)}
.ex-outras-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.ex-outras h2{margin-top:16px;font-size:clamp(30px,3vw,42px);font-weight:800;color:var(--azul)}
.ex-outras-lista{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ex-outras-lista a{display:grid;grid-template-columns:56px minmax(0,1fr) 18px;align-items:center;gap:16px;padding:12px 18px 12px 12px;border-radius:12px;background:#fff;border:1px solid var(--linha);transition:border-color .25s,box-shadow .25s}
.ex-outras-lista a:hover{border-color:var(--ciano);box-shadow:0 18px 34px -26px rgba(0,73,117,.45)}
.ex-outras-lista img{width:56px;height:56px;border-radius:9px;object-fit:cover}
.ex-outras-lista b{font-size:17.5px;font-weight:700;line-height:1.25;color:var(--tinta)}
.ex-outras-lista a::after{content:"";width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%230E8DB2' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s var(--ease)}
.ex-outras-lista a:hover::after{transform:translateX(4px)}

/* chamada final */
.ex-fim{padding:100px 0;background:linear-gradient(90deg,rgba(2,31,51,.98) 0%,rgba(2,31,51,.94) 50%,rgba(2,31,51,.74) 100%),url(../img/x-porto.webp) right center/cover;color:#fff}
.ex-fim-in{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:48px;align-items:center}
.ex-fim h2{margin-top:16px;font-size:clamp(34px,3.6vw,54px);font-weight:800;line-height:1.05}
.ex-fim h2 em{display:block;color:var(--ouro2)}
.ex-fim p{margin-top:16px;font-size:19px;color:#cfe3ee}
.ex-fim-bts{display:grid;gap:12px}

/* página-resumo: as sete expertises */
.ph-exr .ph-in{grid-template-columns:minmax(0,860px);justify-content:center;text-align:center}
.ph-exr .migalha,.ph-exr .ph-bts{justify-content:center}
.ph-exr .ph-p{text-align:center}
.exr-grade{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.exr-grade>li{grid-column:span 2}
.exr-grade>li:nth-child(-n+2),.exr-grade>li:nth-last-child(-n+2){grid-column:span 3}
.exr-c{display:flex;flex-direction:column;height:100%;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--linha);transition:box-shadow .3s,transform .3s var(--ease)}
.exr-c:hover{box-shadow:var(--sombra);transform:translateY(-4px)}
.exr-c figure{margin:0;aspect-ratio:16/8;overflow:hidden}
.exr-c figure img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.exr-c:hover figure img{transform:scale(1.05)}
.exr-txt{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.exr-txt small{font-weight:800;font-size:15px;letter-spacing:.14em;color:var(--azul2);margin-bottom:8px}
.exr-txt h3{font-size:24px;font-weight:800;line-height:1.12;color:var(--azul)}
.exr-txt p{margin-top:10px;font-size:16.5px;line-height:1.55;color:var(--tinta2)}
.exr-txt .mt-link{margin-top:auto;padding-top:18px}

@media (max-width:1060px){
  .ph-ex .ph-in{grid-template-columns:1fr}
  .ex-capa{max-width:520px}
  .ex-sec{padding:90px 0}
  .ex-itens li{flex-basis:calc(50% - 12px)}
  .ex-passos-curtos>li{flex-basis:calc(33.333% - 12px)}
  .ex-blocos-4{grid-template-columns:1fr 1fr}
  .ex-blocos-3{grid-template-columns:1fr 1fr}
  .ex-txt2,.ex-parc{grid-template-columns:1fr;gap:24px}
  .ex-onde{grid-template-columns:1fr 1fr}
  .ex-outras-lista{grid-template-columns:1fr 1fr}
  .ex-fim-in{grid-template-columns:1fr}
  .ex-fim-bts{grid-auto-flow:column;justify-content:start}
  .exr-grade{grid-template-columns:1fr 1fr}
  .exr-grade>li,.exr-grade>li:nth-child(-n+2),.exr-grade>li:nth-last-child(-n+2){grid-column:auto}
  .exr-grade>li:last-child{grid-column:1/-1}
}
@media (max-width:720px){
  .ex-capa{margin:0 auto}
  .ex-capa figcaption{left:12px;bottom:12px;font-size:12.5px}
  .ex-sec{padding:72px 0}
  .ex-sec-cab{text-align:center}
  .ex-sec-cab .sup{justify-content:center}
  .ex-sec h2{font-size:clamp(30px,8.4vw,38px);text-align:center}
  .ex-sec-cab .ex-lead{text-align:left;font-size:17.5px}
  .ex-itens,.ex-itens-2,.ex-blocos,.ex-blocos-4,.ex-blocos-3,.ex-onde,.ex-rotas,.ex-outras-lista{grid-template-columns:1fr}
  .ex-itens{margin-top:32px}
  .ex-itens li,.ex-itens-2 li{flex-basis:100%}
  .ex-itens li{font-size:16.5px;padding:15px 16px}
  .ex-frase{margin-top:40px;padding:24px 18px;font-size:21px}
  .ex-bl{padding:24px 20px 24px;text-align:center}
  .ex-bl .ex-n{margin:0 auto 14px}
  .ex-bl p{text-align:left}
  .ex-txt2 p,.ex-parc p{text-align:left;font-size:17px}
  .ex-passos-curtos>li{flex-basis:100%}
  .ex-passos>li,.ex-passos-curtos>li{grid-template-columns:1fr;gap:6px;padding:20px 18px;text-align:center;justify-items:center}
  .ex-passos h3,.ex-passos p{padding-top:6px}
  .ex-passos p{text-align:left}
  .ex-tab,.ex-tab tbody,.ex-tab tr,.ex-tab td{display:block;width:100%!important}
  .ex-tab thead{display:none}
  .ex-tab tr{border-bottom:1px solid var(--linha)}
  .ex-tab td{border-bottom:0;padding:6px 18px}
  .ex-tab td:first-child{padding-top:18px}
  .ex-tab td:last-child{padding-bottom:18px}
  .ex-onde>div{text-align:center}
  .ex-onde h3{justify-content:center}
  .ex-rotas li{grid-template-columns:1fr;text-align:center;justify-items:center;gap:6px}
  .ex-parc-ct{padding:22px 18px}
  .ex-parc-ct ul{grid-template-columns:1fr}
  .ex-outras{padding:64px 0}
  .ex-outras-cab{flex-direction:column;align-items:center;text-align:center}
  .ex-outras-cab .mt-link{align-self:center}
  .ex-outras h2{font-size:clamp(28px,7.6vw,34px)}
  .ex-fim{padding:72px 0;text-align:center}
  .ex-fim .sup{justify-content:center}
  .ex-fim h2{font-size:clamp(30px,8.4vw,38px)}
  .ex-fim-bts{grid-auto-flow:row;justify-content:stretch}
  .exr-grade{grid-template-columns:1fr}
  .exr-grade>li:last-child{grid-column:auto}
  .exr-txt{text-align:center}
  .exr-txt p{text-align:left}
  .exr-txt .mt-link{align-self:center}
}