/* =========================================================
   Ilha Náutica — folha de estilo
   Layout fixo de 1000px (igual ao original), montado com grid/flexbox.
   Organização: 1) base  2) layout  3) cabeçalho  4) componentes
                5) páginas  6) home  7) rodapé  8) utilidades
   ========================================================= */

/* ---------- 1. base ---------- */
@font-face{font-family:"Fjalla One";src:url("../fonts/fjalla-one.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/open-sans.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
:root{
  --f-titulo:"Fjalla One","Arial Narrow",Impact,sans-serif;
  --f-texto:Arial,Helvetica,sans-serif;
  --f-open:"Open Sans",Arial,Helvetica,sans-serif;
  --vermelho:#da251d;
  --vermelho-escuro:#921f0f;
  --cinza-texto:#3d3d3d;
  --amarelo-hover:#fef98e;
  --azul-rodape:#2b3d93;
  --largura:1000px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--azul-rodape);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:var(--largura);overflow-x:hidden;font:16px/1.2 var(--f-texto);color:var(--cinza-texto);background:#fff}
img{display:block;border:0;max-width:none}
a{color:inherit;text-decoration:none}
h1,h2,p,figure,address{margin:0}
address{font-style:normal}
ul{list-style:none;margin:0;padding:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,iframe:focus-visible{outline:2px solid var(--amarelo-hover);outline-offset:2px}

/* ---------- 2. layout ---------- */
.container{position:relative;width:var(--largura);margin:0 auto}
.topo{background:url("../../img/textura-clara.webp") repeat}
.topo>.container{min-height:604px}
.topo>.container::before{               /* painel claro atrás do conteúdo */
  content:"";position:absolute;inset:53px 0 0;background:rgba(255,255,255,.38)}
.conteudo{position:relative;height:434px}

/* ---------- 3. cabeçalho (páginas internas) ---------- */
.cabecalho{position:relative}
.cabecalho::before{                      /* sombra sob o menu */
  content:"";position:absolute;left:0;top:41px;width:var(--largura);height:45px;
  background:url("../../img/sombra.webp") no-repeat 0 0/100% 100%}
.menu{position:relative;z-index:2}
.menu ul{display:grid;grid-template-columns:175px 200px 200px 200px 160px;height:65px;padding-left:25px}
.menu a{display:flex;align-items:center;justify-content:center;height:100%;
  font:23px/1 var(--f-titulo);color:var(--vermelho);text-transform:uppercase;transition:color .15s}
.menu a:hover{color:var(--vermelho-escuro)}
.pg-home .menu a[href="/"],.pg-empresa .menu a[href="/empresa.html"],.pg-produtos .menu a[href="/produtos.html"],
.pg-contato .menu a[href="/contato.html"],.pg-localizacao .menu a[href="/localizacao.html"]{color:var(--vermelho-escuro)}

.marca{position:relative;z-index:1;display:flex;align-items:flex-start;height:105px;padding-top:9px}
.marca-faixa{height:33px;margin-top:52px;background:var(--vermelho-escuro)}
.marca-faixa--curta{flex:0 0 20px}
.marca-faixa--longa{flex:1;margin-left:19px}
.marca-logo{display:flex;align-items:flex-start;margin-left:11px}
.marca-texto{margin:47px 0 0 17px}

/* ---------- 4. componentes ---------- */
.titulo-pagina{display:flex;align-items:center;gap:23px;min-height:50px;
  font:28px/1.2 var(--f-titulo);color:var(--cinza-texto);text-transform:uppercase}
.titulo-pagina::before{content:"";flex:0 0 47px;height:50px;background:url("../../img/svg/titulo-seta.svg") no-repeat center/contain}
.texto p{margin-bottom:1.2em;text-align:justify}
.texto strong{font-weight:bold}

.card{position:relative;height:215px;border-radius:2px;background:linear-gradient(180deg,#fff 4px,#c7c7c7 215px)}
.card-titulo{font:24px/1.2 var(--f-titulo);color:#000;text-transform:uppercase}
.card p{font-size:16px;line-height:1.2}
.card-imagem{position:absolute}

/* formulário */
.formulario{display:flex;flex-direction:column;gap:8px;width:480px;font:12px var(--f-texto)}
.campo label{display:block;margin:0 3px 2px;font-size:11px;color:#5c5c5c}
.campo input,.campo textarea{display:block;width:100%;border:1px solid #959595;background:#e0e0e0;
  font:13px var(--f-texto);padding:2px 4px;border-radius:0}
.campo input{height:25px}
.campo textarea{height:95px;resize:none}
.campo .touched:invalid{border-color:#c62828;background:#fff5f5}
.formulario-botoes{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.formulario button{width:100px;height:25px;border:1px solid #c7c7c7;border-radius:3px;background:var(--cinza-texto);
  color:#e0e0e0;font:12px var(--f-texto);cursor:pointer}
.formulario button:hover{background:#555}
.formulario button[disabled]{opacity:.6;cursor:wait}
.formulario-msg{min-height:1em;text-align:right}
.formulario-msg.ok{color:#1b7f3b}.formulario-msg.err{color:#c62828}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 5. páginas ---------- */
/* A Empresa */
.empresa{display:grid;grid-template-columns:403px 500px;column-gap:63px;height:100%;padding-left:35px}
.empresa-texto{padding-top:74px}
.empresa .titulo-pagina{gap:11px}
.empresa .texto{margin-top:25px;font-size:18px}
.empresa-imagem{position:relative;margin-top:33px}
.empresa-heliponto{margin-top:135px}
.empresa-helicoptero{position:absolute;left:0;top:0}

/* Produtos */
.produtos{display:grid;grid-template-columns:475px 503px;height:100%}
.produtos-texto{position:relative;padding:82px 0 0 15px}
.produtos .texto{width:420px;margin-top:25px;font-size:19px}
.produtos-navio{position:absolute;left:0;top:230px;width:240px;height:215px}
.produtos-agua{position:absolute;left:0;top:129px}
.catalogo{position:relative;display:block;width:503px;height:326px;margin-top:44px}
.catalogo::before{content:"";position:absolute;left:96px;top:35px;width:407px;height:291px;background:rgba(0,0,0,.32)}
.catalogo-capa{position:absolute;left:92px;top:28px}
.catalogo-botao{position:absolute;left:0;top:0;transition:transform .2s ease}
.catalogo:hover .catalogo-botao,.catalogo:focus-visible .catalogo-botao{transform:scale(1.04)}

/* Destaques */
.destaques{padding-top:10px}
.destaques .titulo-pagina{gap:15px;margin-left:417px;font-size:26px}
.destaques-cards{display:grid;grid-template-columns:380px 472px;column-gap:103px;margin:48px 0 0 1px}
.card--rede{padding:13px 21px 0 10px}
.card--rede .card-titulo{margin-bottom:21px}
.card--rede .card-imagem{left:-1px;top:157px}
.card--escada{padding:10px 15px 0 13px}
.card--escada .card-titulo{margin-bottom:13px}
.card--escada .card-imagem{left:365px;top:86px}

/* Localização */
.localizacao{display:grid;grid-template-columns:416px 568px;height:100%}
.localizacao-texto{padding:84px 0 0 15px}
.localizacao .titulo-pagina{align-items:flex-start;max-width:330px}
.localizacao .titulo-pagina::before{margin-top:7px}
.endereco{display:flex;align-items:flex-start;gap:14px;margin:48px 0 0 0}
.endereco-pin{flex:0 0 56px;margin-top:11px}
.endereco address{font:17px/1.3 var(--f-open)}
.mapa{width:568px;height:400px;margin-top:12px;border:0;border-radius:2px;background:#ddd}

/* Contato */
.contato{display:grid;grid-template-columns:455px 545px;height:100%}
.contato-canais{padding:65px 0 0 15px}
.canais{display:flex;flex-direction:column;gap:22px;margin:5px 0 0 -3px}
.canais li{display:flex;align-items:center;gap:24px}
.canal-icone{flex:0 0 56px}
.canal-icone img,.endereco-pin img{width:56px;height:56px}   /* ícones de contato e localização: 56px */
.canais p{font-size:17px;line-height:1.3}
.canais a:hover{text-decoration:underline}
.canal-email{color:#0445c9}
.contato .formulario{position:relative;margin-top:10px;padding:80px 0 0 41px;width:521px}
.contato .formulario::before{             /* divisória vertical do original */
  content:"";position:absolute;left:0;top:19px;width:2px;height:380px;
  background:linear-gradient(90deg,rgba(61,61,61,.68) 50%,rgba(255,255,255,.68) 50%)}

/* 404 */
.aviso{padding:90px 0 0 15px;font-size:18px}
.aviso p{margin-top:20px}
.aviso a{color:var(--vermelho);text-decoration:underline}

/* ---------- 6. home ---------- */
.cabecalho-home .container{display:flex;align-items:flex-start;height:134px}
.cabecalho-home .container::after{content:"";position:absolute;left:0;top:92px;width:var(--largura);height:45px;
  background:url("../../img/sombra.webp") no-repeat 0 0/100% 100%;pointer-events:none}
.marca-home{display:flex;align-items:flex-start;margin:13px 0 0 42px}
.marca-home img+img{margin:25px 0 0 13px}
.menu--home{margin:28px 0 0 17px}
.menu--home ul{grid-template-columns:repeat(5,134px);height:44px;padding:0}

.hero img{width:var(--largura);height:459px;object-fit:cover}

.faixa{margin-top:15px}
.faixa+.faixa{margin-top:0}
.faixa--azul{height:233px;background:url("../../img/textura-azul.webp") repeat-x}
.faixa--escura{height:412px;background:url("../../img/textura-escura.webp") repeat-x}

.boas-vindas{display:grid;grid-template-columns:732px 268px;grid-template-areas:"titulo titulo" "texto navio";height:100%}
.boas-vindas h1{grid-area:titulo;padding-top:4px;font:36px/50px var(--f-titulo);color:#fff;text-align:center;text-transform:uppercase;letter-spacing:.5px}
.boas-vindas-texto{grid-area:texto;padding:28px 0 0 32px;width:732px;font:19px/1.45 var(--f-open);color:#fff}
.boas-vindas-texto strong{font-weight:400;color:var(--vermelho)}
.boas-vindas-navio{grid-area:navio;position:relative;margin:-14px 0 0 27px}
.boas-vindas-agua{position:absolute;left:-28px;top:104px}

.fita{width:245px;height:90px;margin:0 auto;padding-top:10px;background:url("../../img/faixa_fw0.webp") no-repeat;
  font:22px/40px var(--f-titulo);color:var(--vermelho);text-align:center;text-transform:uppercase}
.segmentos{display:grid;grid-template-columns:repeat(4,250px);margin-top:15px}
.segmentos a{display:flex;flex-direction:column;align-items:center}
.segmentos img{transition:transform .2s ease}
.segmentos a:hover img,.segmentos a:focus-visible img{transform:scale(1.03)}
.segmentos span{margin-top:28px;font:22px/34px var(--f-titulo);color:#fff;text-transform:uppercase;white-space:nowrap}

/* ---------- 7. rodapé ---------- */
.rodape{height:350px;background:var(--azul-rodape) url("../../img/textura-rodape.webp") repeat-x;color:#fff}
.rodape-colunas{display:grid;grid-template-columns:254px 385px 320px;padding-top:33px}
.rodape-titulo{width:320px;height:20px;padding:0 6px;background:#000;font:15px/20px var(--f-texto);
  text-transform:uppercase;white-space:nowrap;text-align:center}
.rodape-titulo--curto{width:120px;text-align:left}
#rodape-contato{text-align:left}
.rodape-mapa{margin-top:6px}
.rodape-mapa a{display:block;padding-left:2px;font:16px/27px var(--f-texto);white-space:nowrap}
.rodape-mapa a::before{content:">> "}
.rodape-mapa a:hover,.rodape-mapa a:focus-visible{color:var(--amarelo-hover)}
.rodape-produtos{display:flex;gap:18px;margin:23px 0 0 34px}
.rodape-contato{display:flex;flex-direction:column;gap:6px;margin-top:16px;font-size:17px}
.rodape-contato li{display:flex;align-items:center;height:40px;background:#000}
.rodape-contato a:hover{text-decoration:underline}
/* ícones do rodapé: todos 24px (mesma grade e traço 2px da família), texto alinhado em 48px */
.rodape-contato li{gap:12px;padding-left:12px}
.rodape-contato img{flex:0 0 24px;width:24px;height:24px}
.rodape-contato--end{height:95px!important;align-items:center!important}
.rodape-contato address{font:15px/1.25 var(--f-open)}
.rodape-base{display:flex;justify-content:space-between;align-items:center;height:72px;margin-top:22px;padding:0 15px;
  font-size:15px;color:#e0e0e0}
.rodape-base a{color:#fff}
.rodape-base a:hover{color:#cbc327;text-decoration:underline}

/* ---------- 8. utilidades ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:99999;background:#fff;color:#000;padding:8px 12px}
.skip:focus{left:8px;top:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.topo,.rodape,.faixa{background:none}}