/* ============================================================
   OUTIS — página de contacto  [outis_contacto]
   Usa os tokens --o-* do outis-base (.outis-v2).
   ============================================================ */

/* o legado põe overflow-x:hidden em .outis (impede o sticky do lado) */
.outis-v2.oct { background: var(--o-fundo); padding-bottom: clamp(56px, 7vw, 96px); overflow: visible; overflow-x: clip; }
.oct h1, .oct h2, .oct p, .oct ul { margin: 0; }
.oct ul { padding: 0; list-style: none; }
.oct.outis-v2 a { text-decoration: none; }
.oct.sem-topo { padding-top: clamp(40px, 6vw, 72px); }

/* ---------- faixa navy ---------- */
.oct-topo {
	position: relative; overflow: hidden; background: var(--o-navy-900); color: #fff;
	padding: clamp(44px, 6vw, 80px) 0 clamp(96px, 10vw, 128px);
}
.oct-topo::after {
	content: ""; position: absolute; right: -10%; top: -60%; width: 55%; height: 220%;
	background: radial-gradient(closest-side, rgba(127,194,237,.16), transparent 70%); pointer-events: none;
}
.oct-topo .o-wrap { position: relative; z-index: 1; }
.oct .oct-h1 { font: 700 clamp(32px, 4.4vw, 52px)/1.08 var(--o-f); letter-spacing: -.03em; color: #fff; }
.oct .oct-lede { margin-top: 16px; max-width: 640px; font-size: 16px; line-height: 1.65; color: var(--o-texto-cl); }

.oct .oct-cartoes {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
	margin-top: 36px;
}
.oct-cartoes a {
	display: flex; align-items: center; gap: 14px; height: 100%;
	padding: 16px 18px; border-radius: var(--o-r);
	background: rgba(255,255,255,.05); border: 1px solid var(--o-linha-esc);
	transition: background .2s, border-color .2s, transform .2s;
}
.oct-cartoes a:hover { background: rgba(255,255,255,.09); border-color: rgba(127,194,237,.55); transform: translateY(-2px); }
.oct-cartao-ico {
	flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(127,194,237,.14); color: var(--o-laranja-lt);
}
.oct-cartao-ico .o-ico { width: 20px; height: 20px; }
.oct-cartoes small { display: block; margin-bottom: 4px; font: 600 11px/1 var(--o-f); letter-spacing: .12em; text-transform: uppercase; color: var(--o-texto-dim); }
.oct-cartoes strong { display: block; font: 600 15px/1.3 var(--o-f); color: #fff; word-break: break-word; }

/* ---------- grelha ---------- */
.oct .oct-grid {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; align-items: start;
	margin-top: clamp(-72px, -6vw, -56px); /* os cartões sobem para a faixa navy */
}
.oct.sem-topo .oct-grid { margin-top: 0; }
.oct-cartao {
	background: var(--o-branco); border: 1px solid var(--o-linha);
	border-radius: var(--o-r); box-shadow: var(--o-sombra-h);
}

/* formulário */
.oct-form-cab { padding: 26px 30px 0; }
.oct .oct-form-cab h2 { font: 700 22px/1.2 var(--o-f); letter-spacing: -.02em; color: var(--o-texto); }
.oct-form-cab p { margin-top: 6px; font-size: 13.5px; color: var(--o-texto-2); }
.oct-form-cab em, .oct-campo em { font-style: normal; color: var(--o-laranja); }
.oct-erro {
	margin: 18px 30px 0; padding: 12px 14px; border-radius: var(--o-r-s);
	background: #FDECEA; color: #A93226; font-size: 14px; line-height: 1.45;
}
.oct-form { display: grid; gap: 16px; padding: 22px 30px 30px; }
.oct-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.oct-campo { display: grid; gap: 7px; margin: 0; }
.oct-campo > span { font: 600 13px/1.2 var(--o-f); color: var(--o-texto); }
.oct .oct-campo input,
.oct .oct-campo select,
.oct .oct-campo textarea {
	width: 100%; margin: 0; padding: 12px 14px; min-height: 46px;
	background: var(--o-fundo); border: 1px solid transparent; border-radius: var(--o-r-s);
	box-shadow: none; font: 400 15px/1.4 var(--o-f); color: var(--o-texto);
	transition: border-color .2s, background .2s, box-shadow .2s;
}
.oct .oct-campo select {
	-webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 40px;
	background: var(--o-fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B7B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
}
.oct .oct-campo textarea { min-height: 132px; resize: vertical; }
.oct .oct-campo input::placeholder,
.oct .oct-campo textarea::placeholder { color: #98A3AF; }
.oct .oct-campo input:hover, .oct .oct-campo select:hover, .oct .oct-campo textarea:hover { border-color: var(--o-linha); }
.oct .oct-campo input:focus, .oct .oct-campo select:focus, .oct .oct-campo textarea:focus {
	outline: none; background-color: var(--o-branco);
	border-color: var(--o-laranja); box-shadow: 0 0 0 3px var(--o-laranja-bg);
}
.oct .oct-enviar { width: 100%; margin-top: 4px; min-height: 52px; font-size: 15.5px; }
.oct-nota { font-size: 12.5px; line-height: 1.5; color: var(--o-texto-2); text-align: center; }

/* enviado */
.oct-ok { display: grid; justify-items: center; gap: 12px; padding: 56px 30px; text-align: center; }
.oct-ok-ico {
	width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
	background: #E6F4EE; color: #17804F; margin-bottom: 6px;
}
.oct-ok-ico .o-ico { width: 28px; height: 28px; }
.oct .oct-ok h2 { font: 700 24px/1.2 var(--o-f); letter-spacing: -.02em; color: var(--o-texto); }
.oct-ok p { max-width: 380px; font-size: 15px; line-height: 1.6; color: var(--o-texto-2); margin-bottom: 6px; }

/* lado */
.oct-lado { position: sticky; top: 24px; display: grid; gap: 20px; }
.admin-bar .oct-lado { top: 56px; }
.oct-info { padding: 26px 28px; }
.oct .oct-info h2 { font: 700 18px/1.2 var(--o-f); letter-spacing: -.015em; color: var(--o-texto); margin-bottom: 18px; }
.oct-info ul { display: grid; gap: 16px; }
.oct-info li { display: flex; gap: 14px; align-items: flex-start; font: 500 14.5px/1.45 var(--o-f); color: var(--o-texto); }
.oct-info li > .o-ico { width: 20px; height: 20px; margin-top: 2px; color: var(--o-laranja); }
.oct-info small { display: block; margin-bottom: 2px; font: 600 11px/1.2 var(--o-f); letter-spacing: .12em; text-transform: uppercase; color: var(--o-texto-2); }
.oct-atalho {
	display: grid; gap: 6px; margin-top: 22px; padding: 18px; border-radius: var(--o-r-s);
	background: var(--o-laranja-bg);
}
.oct-atalho strong { font: 700 14.5px/1.3 var(--o-f); color: var(--o-texto); }
.oct-atalho p { font-size: 13.5px; line-height: 1.5; color: var(--o-texto-2); margin-bottom: 4px; }
.oct-mapa {
	overflow: hidden; border-radius: var(--o-r); border: 1px solid var(--o-linha);
	box-shadow: var(--o-sombra); aspect-ratio: 4 / 3; background: var(--o-fundo-2);
}
.oct-mapa iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.35); }

/* ---------- responsivo ---------- */
@media (max-width: 960px) {
	.oct .oct-grid { grid-template-columns: 1fr; }
	.oct-lado { position: static; }
}
@media (max-width: 680px) {
	.oct .oct-cartoes { grid-template-columns: 1fr; gap: 10px; }
	.oct-form-cab { padding: 22px 18px 0; }
	.oct-form { padding: 18px 18px 22px; }
	.oct-erro { margin: 16px 18px 0; }
	.oct-linha { grid-template-columns: 1fr; }
	.oct-info { padding: 22px 18px; }
}