/* ============================================================
   EUROFORTE — Soluções & Produtos (compartilhado)
   Usado por: solucoes.html (landing) e produto-*.html
   Depende de euroforte.css (tokens/base). Cores por segmento via --accent.
   ============================================================ */

/* Segmento define a cor de destaque da página/card */
[data-seg]{--accent:var(--indigo)}
[data-seg="cana"]{--accent:var(--blue)}
[data-seg="floresta"]{--accent:var(--green)}

/* ---------- Breadcrumb ---------- */
.crumb{padding-top:18px}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ink-55)}
.crumb a{color:var(--ink-55)}
.crumb a:hover{color:var(--indigo)}
.crumb li[aria-current]{color:var(--ink);font-weight:600}
.crumb .sep{color:var(--ink-40)}

/* ============================================================
   LANDING — solucoes.html
   ============================================================ */
.sol-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--indigo) 72%,#1a1852 100%);color:#fff;padding:64px 0 72px}
.sol-hero .eyebrow{color:var(--blue)}
.sol-hero h1{margin-top:12px;font-size:clamp(32px,8vw,58px);line-height:1.02;max-width:16ch}
.sol-hero p{margin-top:18px;max-width:56ch;font-size:clamp(16px,4vw,19px);color:rgba(255,255,255,.9)}

.seg{padding:56px 0}
.seg + .seg{padding-top:8px}
.seg-head{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.seg-head .tag{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
.seg-head h2{font-size:clamp(24px,6vw,34px)}
.seg-head .count{margin-left:auto;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40)}

.prod-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:600px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.prod-grid{grid-template-columns:repeat(3,1fr)}}

.prod-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;color:inherit}
.prod-card:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(1,0,27,.08),0 18px 44px rgba(1,0,27,.12);color:inherit}
.prod-card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bone)}
.prod-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.prod-card:hover .thumb img{transform:scale(1.04)}
.prod-card .body{padding:22px 20px 8px;flex:1}
.prod-card .body h3{font-size:22px;color:var(--ink)}
.prod-card .body p{margin-top:8px;color:var(--ink-70);font-size:15px;line-height:1.5}
.prod-card .foot{padding:14px 20px 22px}
.prod-card .foot .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--accent)}
.prod-card .foot .go svg{transition:transform .2s}
.prod-card:hover .foot .go svg{transform:translateX(4px)}

/* Thumb que exibe o LOGO do produto (catálogo) — logo inteiro, sem corte, sobre painel claro */
.prod-card .thumb--logo{aspect-ratio:16/10;background:linear-gradient(158deg,#fff 0%,var(--bone) 100%);display:grid;place-items:center;padding:26px 30px;border-bottom:1px solid var(--line)}
.prod-card .thumb--logo img{width:100%;height:100%;object-fit:contain}
.prod-card:hover .thumb--logo img{transform:none}

/* Placeholder para produto cujo logo ainda não foi fornecido */
.logo-pending{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--accent);font-weight:800;font-size:clamp(22px,5vw,30px);letter-spacing:.01em;line-height:1}
.logo-pending small{font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.thumb--logo .logo-pending{font-size:26px}

/* Marcador de conteúdo pendente (descrições de floresta, etc.) */
.pending-note{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9a6a00;background:#fff6e0;border:1px solid #f0d48a;padding:6px 12px;border-radius:999px}

/* "Falta o logo / falta a descrição" — sinaliza lacunas de conteúdo de forma visível */
.prod-card .body p.miss{color:#9a6a00;font-weight:700}
.prod-hero .lead.miss-lead{color:#9a6a00;font-weight:700}

/* ============================================================
   PÁGINA DE PRODUTO — produto-*.html
   ============================================================ */
.produto .prod-hero{padding:24px 0 40px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,white),var(--white))}
.prod-hero .eyebrow{color:var(--accent)}
.prod-hero h1{margin-top:10px;font-size:clamp(34px,9vw,64px);line-height:1;color:var(--ink)}
/* Lockup oficial do produto no topo (logo como H1; alt = nome do produto) */
.prod-hero h1.prod-logo{margin-top:8px;line-height:0}
.prod-hero h1.prod-logo img{width:auto;height:auto;max-width:min(460px,82vw);max-height:clamp(52px,13vw,92px)}
.prod-hero .tagline{margin-top:14px;font-size:clamp(18px,5vw,26px);font-weight:700;color:var(--accent);max-width:20ch}
.prod-hero .lead{margin-top:18px;max-width:56ch;font-size:clamp(16px,4vw,18px);color:var(--ink-70);line-height:1.6}
.prod-hero .lead.lead-clamp{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lead-more{margin-top:10px;background:none;border:0;padding:0;font-family:inherit;font-weight:800;font-size:14.5px;color:var(--accent);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.lead-more:hover{text-decoration:underline}
.lead-more svg{transition:transform .2s}
.lead-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.prod-hero .actions{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}
/* CTA em destaque: botão maior com leve sombra na cor do segmento */
.prod-hero .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);padding:18px 30px;font-size:18px;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 38%,transparent)}
.prod-hero .btn-primary:hover{filter:brightness(.92);background:var(--accent);color:#fff}
/* "Assistir ao vídeo" vira link discreto para não competir com o CTA */
.prod-hero .btn-ghost{border:0;padding:6px 2px;color:var(--ink-70);text-decoration:underline;text-underline-offset:4px;box-shadow:none}
.prod-hero .btn-ghost:hover{background:none;color:var(--accent)}
/* colapsa a ficha rápida quando sobra vazia (após remover o chip de segmento) */
.prod-hero .spec-row:empty{display:none}

/* KV showcase (imagem-chave inteira, sem corte) */
.kv-show{padding:8px 0 8px}
.kv-show img{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.kv-show img.ef-zoomable{cursor:zoom-in}

/* Lightbox — amplia a imagem do produto (criado via JS em euroforte.js) */
.ef-lightbox{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(1,0,27,.93);padding:16px;overflow:auto;overscroll-behavior:contain}
.ef-lightbox.open{display:flex}
.ef-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;cursor:zoom-in}
/* estado ampliado: mostra a imagem em tamanho natural e permite rolar para ler os detalhes */
.ef-lightbox.zoom{align-items:flex-start;justify-content:flex-start}
.ef-lightbox.zoom img{max-width:none;max-height:none;width:auto;height:auto;cursor:zoom-out}
.ef-lb-close{position:fixed;top:12px;right:14px;z-index:1;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:44px;text-align:center;cursor:pointer}
.ef-lb-close:hover{background:rgba(255,255,255,.3)}
.ef-lb-hint{position:fixed;bottom:14px;left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.06em;pointer-events:none}
.ef-lightbox.zoom .ef-lb-hint{display:none}

/* Benefícios */
.benes-sec{padding:56px 0}
.benes{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:768px){.benes{grid-template-columns:repeat(3,1fr)}}
.bene{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--accent) 4%,#fff));
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));border-radius:18px;
  padding:30px 24px 26px;box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
/* barra superior na cor do segmento, revelada no hover */
.bene::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 42%,#fff));
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
/* halo suave atrás do ícone */
.bene::after{content:"";position:absolute;top:-40px;left:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%);
  pointer-events:none;opacity:.7;transition:opacity .22s ease}
.bene:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
  box-shadow:0 6px 16px rgba(1,0,27,.07),0 20px 46px rgba(1,0,27,.12)}
.bene:hover::before{transform:scaleX(1)}
.bene:hover::after{opacity:1}
.bene .ic{position:relative;z-index:1;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));color:#fff;
  margin-bottom:18px;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 34%,transparent);
  transition:transform .22s ease}
.bene .ic svg{width:26px;height:26px}
.bene:hover .ic{transform:scale(1.07) rotate(-3deg)}
.bene h3{position:relative;z-index:1;font-size:18px;color:var(--ink);line-height:1.25;letter-spacing:-.01em}
.bene p{position:relative;z-index:1;margin-top:9px;color:var(--ink-70);font-size:14.5px;line-height:1.55}

/* Vídeo do produto */
.vid-sec{padding:16px 0 56px}
.vid-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:var(--shadow);aspect-ratio:16/9}
.vid-frame video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
/* Em tela cheia, mostra o vídeo inteiro (sem corte), respeitando a proporção da tela */
.vid-frame video:fullscreen{object-fit:contain;width:100%;height:100%;background:#000}
.vid-frame video:-webkit-full-screen{object-fit:contain;width:100%;height:100%;background:#000}

/* Rodapé de navegação da página de produto */
.prod-back{padding:8px 0 8px}
.prod-back a{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--indigo)}
.prod-back a svg{transform:rotate(180deg)}

/* Ficha rápida (segmento / linha) */
.spec-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.spec{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-70);background:var(--bone);border:1px solid var(--line);padding:8px 14px;border-radius:999px}
.spec b{color:var(--ink)}

/* ===== Fases de cultivo — desenho + colunas (Soluções e páginas de produto) ===== */
.fase-rec-sec{padding:10px 0 24px}
.fase-rec-sec .section-head{margin-bottom:8px}
.cf-block{margin-top:18px}
/* Recomendação recolhida: botão "Ver recomendação de aplicação" */
.cf-more{margin-top:18px;display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-weight:800;font-size:15px;color:var(--green);background:#fff;border:1.5px solid color-mix(in srgb,var(--green) 45%,white);border-radius:999px;padding:12px 22px;cursor:pointer;transition:background .2s,border-color .2s}
.cf-more:hover{background:color-mix(in srgb,var(--green) 7%,white);border-color:var(--green)}
.cf-more svg{transition:transform .2s}
.cf-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.cf-body[hidden]{display:none}
/* Seletor planta/soca nas páginas de produto (produtos que atendem os dois) */
.cf-toggle{display:inline-flex;background:var(--bone);border:1px solid var(--line);border-radius:999px;padding:4px;margin-top:14px}
.cf-toggle button{border:0;background:transparent;font-family:inherit;font-weight:700;font-size:13.5px;color:var(--ink-70);padding:8px 16px;border-radius:999px;cursor:pointer;transition:.15s}
.cf-toggle button:hover{color:var(--green)}
.cf-toggle button.is-active{background:var(--green);color:#fff}
.cf-banner{display:inline-block;background:linear-gradient(180deg,#0a7d33,#00602b);color:#fff;font-weight:800;font-size:14.5px;letter-spacing:.02em;padding:9px 22px;border-radius:12px 12px 0 0;margin-left:2px}
.cf-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:0 16px 16px 16px;background:#fff;box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
/* Cartela oficial com zonas clicáveis por fase */
.cf-figure{position:relative;min-width:680px;container-type:inline-size}
/* Lista de logos redesenhada sobre a cartela: produto da página primeiro e em destaque, demais esmaecidos */
.cf-list{position:absolute;background:#fff}
.cf-col{position:absolute;transform:translateX(-50%);list-style:none;margin:0;padding:.9cqw 0 0;display:flex;flex-direction:column;align-items:center;gap:.65cqw}
.cf-col li{display:flex;align-items:center;justify-content:center;border-radius:.6cqw;opacity:.4;filter:grayscale(.4)}
.cf-col img{display:block;height:2.2cqw;width:auto;max-width:9.5cqw}
.cf-col li.is-focus{opacity:1;filter:none;background:#fff;box-shadow:0 0 0 .45cqw #fff,0 0 0 .6cqw var(--green),0 .5cqw 1.4cqw .45cqw rgba(0,96,43,.18)}
.cf-cartela{display:block;width:100%;height:auto}
.cf-zones{position:absolute;inset:0}
.cf-zone{position:absolute;top:0;bottom:0;padding:0;margin:0;border:0;background:transparent;border-radius:8px;transition:background .15s,box-shadow .15s}
.cf-figure--btn .cf-zone{cursor:pointer}
.cf-figure--btn .cf-zone:hover{background:color-mix(in srgb,var(--green) 10%,transparent)}
.cf-zone.is-on,.cf-zone.is-active{background:color-mix(in srgb,var(--green) 16%,transparent);box-shadow:inset 0 0 0 3px var(--green)}

/* ===== Modalidades de aplicação (páginas de produto) ===== */
.modalidades-sec{padding:40px 0 56px}
.mod-tech{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:6px 6px 6px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--accent,var(--indigo)) 7%,#fff);border:1px solid color-mix(in srgb,var(--accent,var(--indigo)) 22%,var(--line))}
.mod-tech span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.mod-tech b{font-size:14px;font-weight:800;color:var(--ink);background:#fff;border:1px solid color-mix(in srgb,var(--accent,var(--indigo)) 30%,var(--line));padding:6px 14px;border-radius:999px}
.mod-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:479px){.mod-grid{grid-template-columns:1fr}}
@media(min-width:600px){.mod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:960px){.mod-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mod-card{display:flex;align-items:center;gap:14px;min-width:0;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--accent) 4%,#fff));
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));border-radius:14px;
  padding:16px 18px;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.mod-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 38%,var(--line));
  box-shadow:0 6px 16px rgba(1,0,27,.07),0 16px 36px rgba(1,0,27,.1)}
.mod-ic{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));color:#fff;
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 32%,transparent)}
.mod-ic svg{width:24px;height:24px;display:block}
.mod-label{min-width:0;overflow-wrap:break-word;font-size:15px;font-weight:700;color:var(--ink);line-height:1.25;letter-spacing:-.01em}

/* Hero com imagem do produto (artes do designer, sem a faixa branca da esquerda).
   A imagem vem inline no HTML (background-image) p/ resolver a URL relativa à página.
   Mobile: imagem vira faixa acima do texto. Desktop: foto ocupa a largura toda
   (como o hero do Trabalhe Conosco) e um véu branco acompanha a coluna de texto,
   em qualquer largura de tela e com o "Ver mais" aberto. */
.produto .prod-hero.has-bg{--band:min(56vw,360px);position:relative;background-color:#fff;background-repeat:no-repeat;background-position:center 0;background-size:auto var(--band);padding-top:calc(var(--band) + 18px)}
.prod-hero.has-bg::before{content:"";position:absolute;left:0;right:0;top:calc(var(--band) * .6);height:calc(var(--band) * .4 + 1px);background:linear-gradient(to top,#fff,rgba(255,255,255,0));pointer-events:none}
.prod-hero.has-bg > .wrap{position:relative;z-index:1}
@media(min-width:900px){
  .produto .prod-hero.has-bg{
    --te:calc(max(40px, 50% - var(--wrap) / 2 + 40px) + 640px); /* fim da coluna de texto */
    padding:32px 0 48px;min-height:calc(min(100vw,1512px) * var(--hero-r));background-size:cover;background-position:right center}
  .prod-hero.has-bg::before{inset:0;height:auto;
    background:linear-gradient(90deg,rgba(255,255,255,.94) 0,rgba(255,255,255,.86) calc(var(--te) - 60px),rgba(255,255,255,0) calc(var(--te) + 260px));
    /* desfoque da foto só atrás do texto (efeito "com blur" do designer), sumindo em direção à foto */
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--te) - 40px),transparent calc(var(--te) + 300px));
    mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--te) - 40px),transparent calc(var(--te) + 300px))}
  .prod-hero.has-bg .lead{max-width:50ch;color:var(--ink)}
  /* saída suave da foto para o branco na base do hero (pedido do cliente) */
  .prod-hero.has-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(42%,220px);pointer-events:none;
    background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.55) 45%,rgba(255,255,255,.9) 75%,#fff 100%)}
}