/* ============================================================
   Outis — Página inicial v1
   Prefixo .ohm-  ·  tokens em outis-base.css
   ============================================================ */

.outis.ohm { background: var(--o-branco); overflow-x: hidden; }
.outis-v2 .ohm-aviso { padding: 24px 0; color: var(--o-laranja-h); font-size: 14px; }

/* cabeçalho de secção: título | texto | ligação */
.outis-v2 .ohm-cab { display: grid; gap: 20px 56px; align-items: end; margin-bottom: 40px; }
.outis-v2 .ohm-cab-3 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; }
.outis-v2 .ohm-cab-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.outis-v2 .ohm-cab .o-lede { max-width: 440px; padding-bottom: 4px; }
.outis-v2 .ohm-cab-link { padding-bottom: 8px; }
.outis-v2 .ohm-h2-cl { color: #fff; }


/* ============================================================
   HERO
   ============================================================ */
.outis-v2 .ohm-hero {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: clamp(480px, 62vh, 600px);
	background: var(--o-navy-900); color: #fff;
	display: grid;
}
.outis-v2 .ohm-slide {
	grid-area: 1 / 1; position: relative; display: flex; align-items: center;
	opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s;
}
.outis-v2 .ohm-slide.is-on { opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s; z-index: 1; }

.outis-v2 .ohm-slide-bg {
	position: absolute; inset: 0; z-index: -1;
	background-size: cover; background-position: center right;
	transform: scale(1.06); transition: transform 8s ease-out;
}
.outis-v2 .ohm-slide.is-on .ohm-slide-bg { transform: scale(1); }
.outis-v2 .ohm-slide-bg::after {
	content: ''; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(8,17,27,.96) 0%, rgba(8,17,27,.86) 32%, rgba(8,17,27,.35) 62%, rgba(8,17,27,.05) 100%),
		linear-gradient(0deg, rgba(8,17,27,.55) 0%, rgba(8,17,27,0) 30%);
}
/* sem imagem: fundo técnico em CSS */
.outis-v2 .ohm-slide-bg.is-vazio {
	background:
		radial-gradient(ellipse 60% 80% at 82% 40%, rgba(28,126,214,.35), transparent 60%),
		radial-gradient(ellipse 40% 50% at 70% 90%, rgba(127,194,237,.18), transparent 60%),
		linear-gradient(135deg, #0B1622 0%, #10202F 60%, #14304A 100%);
}
.outis-v2 .ohm-slide-bg.is-vazio::before {
	content: ''; position: absolute; inset: 0;
	background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%); mask-image: linear-gradient(90deg, transparent 20%, #000 75%);
}

.outis-v2 .ohm-slide-in { width: 100%; padding-top: 64px; padding-bottom: 104px; }
.outis-v2 .ohm-slide-txt { max-width: 560px; }
.outis-v2 .ohm-slide .o-eyebrow { color: var(--o-acento); margin-bottom: 18px; }
.outis-v2 .ohm-h1 {
	margin: 0 0 20px; color: #fff;
	font: 700 clamp(34px, 4.4vw, 56px)/1.08 var(--o-f); letter-spacing: -.03em;
}
.outis-v2 .ohm-hero-p { margin: 0 0 32px; max-width: 480px; font-size: 16.5px; line-height: 1.65; color: var(--o-texto-cl); }
.outis-v2 .ohm-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* entrada do texto em cada slide */
.outis-v2 .ohm-slide .ohm-slide-txt > * { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.outis-v2 .ohm-slide.is-on .ohm-slide-txt > * { opacity: 1; transform: none; }
.outis-v2 .ohm-slide.is-on .ohm-slide-txt > :nth-child(2) { transition-delay: .08s; }
.outis-v2 .ohm-slide.is-on .ohm-slide-txt > :nth-child(3) { transition-delay: .16s; }
.outis-v2 .ohm-slide.is-on .ohm-slide-txt > :nth-child(4) { transition-delay: .24s; }

/* controlos */
.outis-v2 .ohm-hero-ctl {
	position: absolute; left: 0; right: 0; bottom: 36px; z-index: 3;
	display: flex; align-items: center; justify-content: space-between;
}
.outis-v2 .ohm-hero-dots { display: flex; gap: 8px; }
.outis-v2 .ohm-hero-dot {
	width: 26px; height: 4px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
	background: rgba(255,255,255,.45); transition: background .3s, width .3s;
	position: relative;
}
.outis-v2 .ohm-hero-dot::before { content: ''; position: absolute; inset: -10px 0; }
.outis-v2 .ohm-hero-dot.is-on { background: var(--o-acento); width: 34px; }
.outis-v2 .ohm-setas { display: flex; gap: 8px; }
.outis-v2 .ohm-seta {
	width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
	border: 1px solid rgba(255,255,255,.18); border-radius: var(--o-r-s);
	background: rgba(8,17,27,.55); color: #fff; backdrop-filter: blur(6px);
	transition: background .2s, border-color .2s;
}
.outis-v2 .ohm-seta:hover { background: var(--o-laranja); border-color: var(--o-laranja); }
.outis-v2 .ohm-seta .o-ico { width: 20px; height: 20px; }


/* ============================================================
   LINHAS — 3 cartões
   ============================================================ */
.outis-v2 .ohm-linhas { background: var(--o-fundo); padding: 48px 0 56px; }
.outis-v2 .ohm-linhas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.outis-v2 .ohm-linha {
	position: relative; overflow: hidden; display: flex; min-height: 236px;
	background: #fff; border: 1px solid var(--o-linha); border-radius: var(--o-r);
	box-shadow: var(--o-sombra); text-decoration: none; color: var(--o-texto);
	transition: box-shadow .25s, transform .25s, border-color .25s;
}
.outis-v2 .ohm-linha:hover { box-shadow: var(--o-sombra-h); transform: translateY(-3px); border-color: rgba(47,114,176,.35); }
.outis-v2 .ohm-linha-txt {
	position: relative; z-index: 1; width: 58%; padding: 24px 8px 22px 24px;
	display: flex; flex-direction: column; align-items: flex-start;
}
.outis-v2 .ohm-linha-ico {
	width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
	background: var(--o-laranja); color: #fff; margin-bottom: 18px;
}
.outis-v2 .ohm-linha:nth-child(3n+2) .ohm-linha-ico { background: var(--o-navy-800); }
.outis-v2 .ohm-linha:nth-child(3n+3) .ohm-linha-ico { background: var(--o-azul); }
.outis-v2 .ohm-linha-ico .o-ico { width: 22px; height: 22px; }
.outis-v2 .ohm-linha h3 { margin: 0 0 10px; font: 700 19px/1.2 var(--o-f); letter-spacing: -.015em; color: var(--o-texto); }
.outis-v2 .ohm-linha p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--o-texto-2); }
.outis-v2 .ohm-linha .o-link { margin-top: auto; }
.outis-v2 .ohm-linha:hover .o-link .o-ico { transform: translateX(3px); }

.outis-v2 .ohm-linha-img {
	position: absolute; top: 0; right: 0; bottom: 0; width: 56%;
	background-size: cover; background-position: center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
	transition: transform .5s;
}
.outis-v2 .ohm-linha:hover .ohm-linha-img { transform: scale(1.04); }
.outis-v2 .ohm-linha-img.is-vazio { display: grid; place-items: center; background: linear-gradient(135deg, var(--o-fundo) 0%, #fff 100%); }
.outis-v2 .ohm-linha-wm { width: 120px; height: 120px; color: var(--o-fundo-2); stroke-width: 1; }


/* ============================================================
   DESTAQUES — carrossel
   ============================================================ */
.outis-v2 .ohm-dest { background: var(--o-fundo); padding: 56px 0 64px; border-top: 1px solid var(--o-linha); }

.outis-v2 .ohm-car { position: relative; }
.outis-v2 .ohm-car-pista {
	--vis: 5; --gap: 18px;
	display: grid; grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--vis) - 1) * var(--gap)) / var(--vis));
	gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding: 4px 2px 14px; margin: -4px -2px 0;
	scrollbar-width: none;
}
.outis-v2 .ohm-car-pista::-webkit-scrollbar { display: none; }
.outis-v2 .ohm-car-pista:focus-visible { outline: 3px solid var(--o-laranja-lt); outline-offset: 4px; border-radius: var(--o-r); }

.outis-v2 .ohm-prod {
	scroll-snap-align: start; display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--o-linha); border-radius: var(--o-r); overflow: hidden;
	box-shadow: var(--o-sombra); transition: box-shadow .25s, transform .25s;
}
.outis-v2 .ohm-prod:hover { box-shadow: var(--o-sombra-h); transform: translateY(-3px); }
.outis-v2 .ohm-prod-img {
	display: grid; place-items: center; aspect-ratio: 5 / 4; overflow: hidden;
	background: linear-gradient(180deg, #F7F9FB, #EEF2F6); color: var(--o-texto-2);
}
.outis-v2 .ohm-prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.outis-v2 .ohm-prod:hover .ohm-prod-img img { transform: scale(1.05); }
.outis-v2 .ohm-prod-img svg.tech { width: 46%; height: auto; opacity: .55; }
.outis-v2 .ohm-prod-corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.outis-v2 .ohm-prod h3 { margin: 0; font: 600 14px/1.35 var(--o-f); letter-spacing: -.005em; }
.outis-v2 .ohm-prod h3 a { color: var(--o-texto); text-decoration: none; }
.outis-v2 .ohm-prod h3 a:hover { color: var(--o-laranja); }

/* botão de cotação (vem do plugin de cotação, classe .prod-add) */
.outis-v2 .ohm-prod-acao { margin-top: auto; }
.outis-v2 .ohm-prod .prod-add {
	width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 9px 12px; margin: 0; min-height: 0;
	font: 600 12.5px/1 var(--o-f); color: var(--o-laranja); background: var(--o-laranja-bg);
	border: 1px solid transparent; border-radius: var(--o-r-s); cursor: pointer; text-decoration: none;
	transition: background .2s, color .2s;
}
.outis-v2 .ohm-prod .prod-add:hover { background: var(--o-laranja); color: #fff; }
.outis-v2 .ohm-prod .prod-add.added { background: #E8F6EF; color: #17804F; }
.outis-v2 .ohm-prod .prod-add svg { width: 14px; height: 14px; }

.outis-v2 .ohm-car-seta {
	position: absolute; top: calc(50% - 30px); z-index: 2;
	width: 36px; height: 36px; display: grid; place-items: center; padding: 0; cursor: pointer;
	border: 0; border-radius: 50%; background: transparent; color: var(--o-laranja);
	transition: background .2s, opacity .2s;
}
.outis-v2 .ohm-car-seta.is-esq { left: -46px; }
.outis-v2 .ohm-car-seta.is-dir { right: -46px; }
.outis-v2 .ohm-car-seta:hover { background: var(--o-laranja-bg); }
.outis-v2 .ohm-car-seta[disabled] { opacity: .25; cursor: default; background: transparent; }
.outis-v2 .ohm-car-seta .o-ico { width: 22px; height: 22px; stroke-width: 2.2; }

.outis-v2 .ohm-car-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; min-height: 4px; }
.outis-v2 .ohm-car-dots button {
	width: 16px; height: 4px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
	background: #CBD3DC; transition: background .25s, width .25s; position: relative;
}
.outis-v2 .ohm-car-dots button::before { content: ''; position: absolute; inset: -10px 0; }
.outis-v2 .ohm-car-dots button.is-on { background: var(--o-laranja); width: 24px; }


/* ============================================================
   PORQUÊ — banda escura
   ============================================================ */
.outis-v2 .ohm-porque { position: relative; isolation: isolate; overflow: hidden; background: var(--o-navy-900); padding: 64px 0; color: #fff; }
.outis-v2 .ohm-porque-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: .14; filter: grayscale(1); }
.outis-v2 .ohm-porque::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(ellipse 50% 90% at 0% 50%, rgba(127,194,237,.12), transparent 70%);
}
.outis-v2 .ohm-porque-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 40px 64px; align-items: center; }
.outis-v2 .ohm-porque .o-h2 { max-width: 470px; }
.outis-v2 .ohm-porque-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 32px; }
.outis-v2 .ohm-porque-lista li { display: flex; align-items: center; gap: 14px; font: 500 14px/1.45 var(--o-f); color: var(--o-texto-cl); }
.outis-v2 .ohm-porque-lista .o-ico { width: 34px; height: 34px; color: var(--o-acento); stroke-width: 1.5; }


/* ============================================================
   COMO FUNCIONA — 4 passos
   ============================================================ */
.outis-v2 .ohm-como { background: #fff; padding: 64px 0 72px; }
.outis-v2 .ohm-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 32px; }
.outis-v2 .ohm-passo { position: relative; }
.outis-v2 .ohm-passo-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.outis-v2 .ohm-passo-n {
	width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
	background: var(--o-laranja); color: #fff; font: 700 13px/1 var(--o-f);
}
.outis-v2 .ohm-passo-ico {
	width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
	background: var(--o-laranja-bg); color: var(--o-laranja);
}
.outis-v2 .ohm-passo-ico .o-ico { width: 23px; height: 23px; }
/* seta entre passos */
.outis-v2 .ohm-passo:not(:last-child)::after {
	content: ''; position: absolute; top: 20px; right: -27px; width: 22px; height: 12px;
	background: var(--o-laranja);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h19M15 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h19M15 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: .7;
}
.outis-v2 .ohm-passo h3 { margin: 0 0 8px; padding-left: 42px; font: 700 16px/1.3 var(--o-f); letter-spacing: -.01em; color: var(--o-texto); }
.outis-v2 .ohm-passo p { margin: 0; padding-left: 42px; max-width: 230px; font-size: 13.5px; line-height: 1.6; color: var(--o-texto-2); }


/* ============================================================
   SOBRE + CONTACTO
   ============================================================ */
.outis-v2 .ohm-sobre { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); min-height: 380px; }

.outis-v2 .ohm-sobre-esq { position: relative; isolation: isolate; overflow: hidden; background: var(--o-navy-900); display: flex; align-items: center; justify-content: flex-end; color: #fff; }
.outis-v2 .ohm-sobre-foto {
	position: absolute; top: 0; bottom: 0; left: 0; width: 46%; z-index: -1;
	background-size: cover; background-position: center;
	-webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
}
.outis-v2 .ohm-sobre-foto.is-vazio {
	background:
		radial-gradient(circle at 40% 45%, rgba(28,126,214,.35), transparent 55%),
		linear-gradient(135deg, #14304A, #0B1622);
}
.outis-v2 .ohm-sobre-txt { width: 54%; padding: 56px 48px 56px 0; }
.outis-v2 .ohm-sobre-txt .o-h2 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 18px; }
.outis-v2 .ohm-sobre-txt p { margin: 0 0 26px; font-size: 14.5px; line-height: 1.7; color: var(--o-texto-cl); max-width: 440px; }

.outis-v2 .ohm-sobre-dir {
	position: relative; isolation: isolate; display: flex; align-items: center;
	background: linear-gradient(135deg, #EEF4FA 0%, #DCE8F3 100%);
}
.outis-v2 .ohm-sobre-dir::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background-image: var(--c-img, none); background-size: cover; background-position: center; opacity: .55;
	-webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 70%); mask-image: linear-gradient(90deg, transparent 10%, #000 70%);
}
.outis-v2 .ohm-contacto { padding: 48px 40px; max-width: 420px; }
.outis-v2 .ohm-contacto-h { margin: 0 0 12px; font: 700 26px/1.2 var(--o-f); letter-spacing: -.02em; color: var(--o-texto); }
.outis-v2 .ohm-contacto .o-lede { font-size: 14px; margin-bottom: 22px; }
.outis-v2 .ohm-contacto-lista { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.outis-v2 .ohm-contacto-lista li { display: flex; align-items: center; gap: 12px; font: 500 14px/1.3 var(--o-f); color: var(--o-texto); }
.outis-v2 .ohm-contacto-lista .o-ico { width: 17px; height: 17px; color: var(--o-navy-800); }
.outis-v2 .ohm-contacto-lista a { color: inherit; text-decoration: none; }
.outis-v2 .ohm-contacto-lista a:hover { color: var(--o-laranja); }


/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1320px) {
	.outis-v2 .ohm-car-seta.is-esq { left: -8px; background: #fff; box-shadow: var(--o-sombra); }
	.outis-v2 .ohm-car-seta.is-dir { right: -8px; background: #fff; box-shadow: var(--o-sombra); }
}
@media (max-width: 1100px) {
	.outis-v2 .ohm-car-pista { --vis: 4; }
	.outis-v2 .ohm-porque-grid { grid-template-columns: 1fr; }
	.outis-v2 .ohm-porque .o-h2 { max-width: none; }
	.outis-v2 .ohm-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
	.outis-v2 .ohm-passo:nth-child(2n)::after { display: none; }
	.outis-v2 .ohm-sobre { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
	.outis-v2 .ohm-linhas-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
	.outis-v2 .ohm-cab-3, .outis-v2 .ohm-cab-2 { grid-template-columns: 1fr; gap: 14px; }
	.outis-v2 .ohm-car-pista { --vis: 3; }
	.outis-v2 .ohm-porque-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.outis-v2 .ohm-hero { min-height: 560px; }
	.outis-v2 .ohm-slide-bg { background-position: 70% center; }
	.outis-v2 .ohm-slide-bg::after { background: linear-gradient(0deg, rgba(8,17,27,.97) 0%, rgba(8,17,27,.85) 55%, rgba(8,17,27,.45) 100%); }
	.outis-v2 .ohm-slide-in { align-self: flex-end; padding-top: 40px; padding-bottom: 96px; }
	.outis-v2 .ohm-hero-btns .o-btn { flex: 1 1 100%; }
	.outis-v2 .ohm-setas { display: none; }
	.outis-v2 .ohm-car-pista { --vis: 2; --gap: 12px; }
	.outis-v2 .ohm-car-seta { display: none; }
	.outis-v2 .ohm-porque-lista { grid-template-columns: 1fr; gap: 20px; }
	.outis-v2 .ohm-passos { grid-template-columns: 1fr; }
	.outis-v2 .ohm-passo::after { display: none; }
	.outis-v2 .ohm-linha-txt { width: 64%; }
	.outis-v2 .ohm-sobre-esq { flex-direction: column; align-items: stretch; }
	.outis-v2 .ohm-sobre-foto { position: relative; width: 100%; height: 240px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
	.outis-v2 .ohm-sobre-txt { width: 100%; padding: 8px var(--o-gut) 44px; }
	.outis-v2 .ohm-contacto { padding: 40px var(--o-gut); }
	.outis-v2 .ohm-dest, .outis-v2 .ohm-como, .outis-v2 .ohm-porque { padding: 48px 0; }
}
@media (max-width: 420px) {
	.outis-v2 .ohm-car-pista { --vis: 1.4; }
}
