/* ============================================================
   OUTIS v2 — tokens e componentes partilhados
   Tudo confinado a .outis-v2 (cabeçalho, home, rodapé v2).
   ============================================================ */

.outis-v2 {
	--o-navy-950: #08111B;
	--o-navy-900: #0B1622;
	--o-navy-800: #10202F;
	--o-navy-700: #172B3D;
	--o-navy-600: #22384D;
	/* Cor de destaque = azul da marca (logótipo: #7FC2ED → #4388C2).
	   Os nomes "laranja" ficaram de quando o destaque era laranja; mudá-los
	   obrigava a mexer em todos os plugins. (2026-11-03)
	   --o-laranja    preenchimentos e texto sobre fundo claro. É o tom
	                  fundo da marca: texto branco por cima lê-se (5:1).
	   --o-laranja-lt o azul claro do logótipo, para fundos escuros.
	   --o-acento     cor de texto/ícones de destaque: o tom fundo sobre
	                  claro; nas faixas navy passa ao claro (ver abaixo). */
	--o-laranja:   #2F72B0;
	--o-laranja-h: #245C93;
	--o-laranja-lt:#7FC2ED;
	--o-laranja-bg:#EEF5FC;
	--o-marca-1:   #7FC2ED;   /* topo do anel do logótipo */
	--o-marca-2:   #5DA0D5;
	--o-marca-3:   #4388C2;   /* base do anel */
	--o-acento:    var(--o-laranja);
	--o-azul:      #1C7ED6;
	--o-fundo:     #F3F5F8;
	--o-fundo-2:   #E9EDF2;
	--o-branco:    #FFFFFF;
	--o-texto:     #0F1B2A;
	--o-texto-2:   #5B6B7B;
	--o-texto-cl:  rgba(255,255,255,.82);
	--o-texto-dim: rgba(255,255,255,.60);
	--o-linha:     rgba(15,27,42,.10);
	--o-linha-esc: rgba(255,255,255,.12);
	--o-sombra:    0 1px 2px rgba(15,27,42,.06), 0 8px 24px -12px rgba(15,27,42,.18);
	--o-sombra-h:  0 2px 4px rgba(15,27,42,.06), 0 18px 40px -16px rgba(15,27,42,.28);
	--o-r:   8px;
	--o-r-s: 5px;
	--o-wrap: 1240px;
	--o-gut: 32px;
	--o-f: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	font-family: var(--o-f);
	color: var(--o-texto);
	background: transparent;
	-webkit-font-smoothing: antialiased;
}
.outis-v2 *, .outis-v2 *::before, .outis-v2 *::after { box-sizing: border-box; }

.outis-v2 .o-wrap { max-width: var(--o-wrap); margin: 0 auto; padding: 0 var(--o-gut); }
@media (max-width: 680px) { .outis-v2 { --o-gut: 18px; } }

/* ---------- tipografia ---------- */
.outis-v2 .o-eyebrow {
	display: block; margin: 0 0 14px;
	font: 700 11.5px/1.2 var(--o-f); letter-spacing: .16em; text-transform: uppercase;
	color: var(--o-acento);
}
.outis-v2 .o-eyebrow::before { content: none; }
.outis-v2 .o-h2 {
	margin: 0; font: 700 clamp(26px, 3vw, 38px)/1.15 var(--o-f);
	letter-spacing: -.025em; color: var(--o-texto);
}
.outis-v2 .o-acc { color: var(--o-acento); }
.outis-v2 .o-lede { margin: 0; font-size: 15px; line-height: 1.65; color: var(--o-texto-2); }

/* ---------- ícones ---------- */
.outis-v2 .o-ico { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* ---------- botões ---------- */
.outis-v2 .o-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 14px 24px; min-height: 48px;
	font: 600 15px/1 var(--o-f); letter-spacing: -.005em; text-decoration: none;
	border-radius: var(--o-r-s); border: 1.5px solid transparent; cursor: pointer;
	transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
	white-space: nowrap;
}
.outis-v2 .o-btn .o-ico { width: 16px; height: 16px; transition: transform .2s; }
.outis-v2 .o-btn:hover .o-ico { transform: translateX(3px); }
.outis-v2 .o-btn:focus-visible { outline: 3px solid var(--o-laranja-lt); outline-offset: 2px; }

.outis-v2 .o-btn-pri { background: var(--o-laranja); color: #fff; box-shadow: 0 10px 24px -12px rgba(47,114,176,.65); }
.outis-v2 .o-btn-pri:hover { background: var(--o-laranja-h); color: #fff; transform: translateY(-1px); }

.outis-v2 .o-btn-cl { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.outis-v2 .o-btn-cl:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.outis-v2 .o-btn-lr { background: transparent; color: #fff; border-color: var(--o-laranja-lt); }
.outis-v2 .o-btn-lr:hover { background: var(--o-laranja); color: #fff; }

.outis-v2 .o-btn-s { padding: 10px 18px; min-height: 40px; font-size: 13.5px; }

/* ligação com seta ("Ver produtos →") */
.outis-v2 .o-link {
	display: inline-flex; align-items: center; gap: 6px;
	font: 600 13.5px/1 var(--o-f); color: var(--o-acento); text-decoration: none;
}
.outis-v2 .o-link .o-ico { width: 15px; height: 15px; transition: transform .2s; }
.outis-v2 .o-link:hover { color: var(--o-laranja-h); }
.outis-v2 .o-link:hover .o-ico { transform: translateX(3px); }

/* ---------- Elementor: largura total ----------
   Um bloco Outis (home, contacto, lista…) traz a sua própria largura
   (.o-wrap). Se a secção do Elementor estiver "Em caixa", tira-se o limite
   de 1140px e o padding, para as faixas de cor irem de ponta a ponta.
   Selectores com html body para ganharem às regras de cada elemento. */
html body .e-con:has(.elementor-widget-shortcode .outis-v2),
html body .elementor-section:has(.elementor-widget-shortcode .outis-v2) {
	padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0;
}
html body .e-con:has(.elementor-widget-shortcode .outis-v2) > .e-con-inner,
html body .elementor-section:has(.elementor-widget-shortcode .outis-v2) > .elementor-container {
	max-width: none; width: 100%; padding: 0; gap: 0;
}
html body .elementor-section:has(.elementor-widget-shortcode .outis-v2) .elementor-widget-wrap { padding: 0; }

/* ---------- faixas escuras: o destaque passa ao azul claro do logótipo ----------
   Sobre navy, o azul fundo (#2F72B0) tem pouco contraste para texto
   pequeno; o claro (#7FC2ED) lê-se bem. Os botões continuam no azul
   fundo (texto branco por cima). */
.outis-v2 .ocab, .outis-v2 .ocab-movel, .outis-v2 .orod,
.outis-v2 .ohm-hero, .outis-v2 .ohm-porque, .outis-v2 .ohm-sobre-esq,
.outis-v2 .olj-topo, .outis-v2 .oct-topo, .outis-v2 .osb-topo, .outis-v2 .osb-valores,
.outis-v2 .olc-garantias, .outis-v2 .osb-area-ico {
	--o-acento: var(--o-laranja-lt);
}

/* acessibilidade */
.outis-v2 .o-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	.outis-v2 *, .outis-v2 *::before, .outis-v2 *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}