/* ==========================================================================
   Valsteel: página de contactos [vs_contactos]
   ========================================================================== */

/* Ocupa toda a largura dentro do Elementor */
.e-con:has(> .elementor-widget-shortcode [data-vs="vs_contactos"]),
.e-con:has(> .e-con-inner > .elementor-widget-shortcode [data-vs="vs_contactos"]),
.e-con-inner:has(> .elementor-widget-shortcode [data-vs="vs_contactos"]),
.elementor-widget-shortcode:has([data-vs="vs_contactos"]),
.elementor-widget-shortcode:has([data-vs="vs_contactos"]) > .elementor-widget-container {
  --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0;
  --container-max-width: 100%; --content-width: 100%; --margin-top: 0; --margin-bottom: 0; --gap: 0;
  max-width: none; width: 100%; margin: 0; padding: 0;
}
.vs.vs-contact { flex: 1 1 100%; width: 100%; min-width: 0; overflow-x: clip; background: var(--vs-white); }
.vs-contact ul { margin: 0; padding: 0; list-style: none; }
.vs-contact .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Abertura: azul-escuro por baixo do header transparente do Grupo ---------- */
.vs .vs-cth { --vs-cth-header: 80px; position: relative; padding-top: var(--vs-cth-header); color: var(--vs-white); background: var(--vs-navy); isolation: isolate; }
.vs .vs-cth::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 30%, #000 100%); }
.vs .vs-cth::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 72px; background: var(--vs-white); }
.vs .vs-cth-mark { position: absolute; right: max(-4vw, -60px); top: calc(var(--vs-cth-header) + 1.5rem); z-index: -1; width: clamp(280px, 38vw, 560px); height: auto; opacity: .09; pointer-events: none; user-select: none; }
.vs .vs-cth-inner { display: grid; gap: clamp(2rem, 4vw, 3.5rem); padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.vs .vs-cth-copy { display: grid; justify-items: start; gap: var(--vs-space-4); max-width: 720px; }
.vs .vs-cth-kicker { display: inline-flex; align-items: center; gap: var(--vs-space-3); margin: 0; font-size: var(--vs-fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vs-steel-200); }
.vs .vs-cth-kicker::before { content: ""; width: 24px; height: 2px; background: var(--vs-orange); }
.vs .vs-cth-kicker--dark { color: var(--vs-steel-600); }
.vs .vs-cth-title { margin: 0; font-family: var(--vs-font); font-size: clamp(2.375rem, 1.4rem + 3.4vw, 4rem); font-weight: 750; line-height: 1.04; letter-spacing: -.035em; text-transform: none; color: var(--vs-white); }
.vs .vs-cth-lead { max-width: 52ch; margin: 0; font-size: var(--vs-fs-lead); line-height: 1.55; color: var(--vs-steel-100); }
.vs .vs-cth-open { display: inline-flex; align-items: center; gap: var(--vs-space-2); margin: 0; padding: .375rem .75rem; font-size: var(--vs-fs-sm); font-weight: 600; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.vs .vs-cth-open[hidden] { display: none; }
.vs .vs-cth-dot { position: relative; width: 9px; height: 9px; background: var(--vs-steel-400); border-radius: 50%; }
.vs .vs-cth-open.is-open .vs-cth-dot { background: #3ccf7e; }
.vs .vs-cth-open.is-open .vs-cth-dot::after { content: ""; position: absolute; inset: -4px; border: 2px solid #3ccf7e; border-radius: 50%; opacity: 0; animation: vs-ping 1.8s ease-out infinite; }
.vs .vs-cth-open.is-lunch .vs-cth-dot { background: #f2b33d; }
@keyframes vs-ping { 0% { opacity: .8; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .vs .vs-cth-open .vs-cth-dot::after { animation: none; } }

/* Três contactos diretos, a cair sobre a linha branca */
.vs .vs-cth-cards { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1px; background: var(--vs-steel-200); border: 1px solid var(--vs-steel-200); box-shadow: 0 30px 60px -30px rgba(15, 35, 48, .55); }
.vs a.vs-cth-card { position: relative; display: grid; align-content: start; gap: 4px; height: 100%; padding: var(--vs-space-5) var(--vs-space-5) var(--vs-space-6); color: var(--vs-ink); text-decoration: none; background: var(--vs-white); transition: background-color var(--vs-fast); }
.vs a.vs-cth-card::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 4px; background: var(--vs-orange); transform: scaleX(0); transform-origin: left; transition: transform var(--vs-mid) var(--vs-ease); }
.vs a.vs-cth-card:hover { color: var(--vs-ink); background: var(--vs-orange-50); }
.vs a.vs-cth-card:hover::before { transform: scaleX(1); }
.vs .vs-cth-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--vs-space-3); color: var(--vs-orange-text); background: var(--vs-orange-100); }
.vs .vs-cth-ico .vs-icon { width: 22px; height: 22px; }
.vs .vs-cth-card--main .vs-cth-ico { color: var(--vs-white); background: var(--vs-orange); }
.vs .vs-cth-label { font-size: var(--vs-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vs-steel-600); }
.vs a.vs-cth-card strong { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--vs-navy); overflow-wrap: anywhere; }
.vs .vs-cth-card--main strong { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); letter-spacing: -.01em; }
.vs .vs-cth-note { font-size: var(--vs-fs-sm); color: var(--vs-steel-600); }

/* Formulário e coluna lateral --------------------------------------------- */
.vs .vs-ctm { padding-block: var(--vs-space-8); scroll-margin-top: 90px; }
.vs .vs-ctm-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.5fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.vs .vs-ctm-title { margin: 0; font-family: var(--vs-font); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; text-transform: none; color: var(--vs-navy); }
.vs .vs-ctm-sub { margin: var(--vs-space-3) 0 var(--vs-space-6); color: var(--vs-steel-600); }

.vs .vs-cf { display: grid; gap: var(--vs-space-5); }
.vs .vs-cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vs .vs-cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vs-space-5); }
.vs .vs-cf .vs-input.vs-input { min-height: 50px; border-radius: 2px; }
.vs .vs-cf .vs-input.vs-input:focus { border-color: var(--vs-orange); box-shadow: 0 0 0 3px rgba(236, 115, 40, .18); }
.vs .vs-cf-textarea.vs-input { min-height: 160px; padding-block: .75rem; line-height: 1.5; resize: vertical; }
.vs .vs-cf-msg-foot { display: flex; justify-content: space-between; gap: var(--vs-space-3); }
.vs .vs-cf-counter { margin-left: auto; font-size: var(--vs-fs-xs); font-variant-numeric: tabular-nums; color: var(--vs-steel-500); }
.vs .vs-field-msg[hidden] { display: none; }

/* Assunto em botões, como separadores */
.vs .vs-cf-subjects { margin: 0; padding: 0; border: 0; }
.vs .vs-cf-subjects legend { margin-bottom: var(--vs-space-2); padding: 0; }
.vs .vs-cf-subject-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vs-space-2); }
.vs .vs-cf-subject { position: relative; cursor: pointer; }
.vs .vs-cf-subject input { position: absolute; opacity: 0; pointer-events: none; }
.vs .vs-cf-subject span { display: flex; align-items: center; min-height: 52px; height: 100%; padding: .5rem .875rem .5rem 2.25rem; font-size: var(--vs-fs-sm); font-weight: 500; line-height: 1.3; color: var(--vs-navy); background: var(--vs-white); border: 1px solid var(--vs-steel-200); transition: border-color var(--vs-fast), background-color var(--vs-fast); }
.vs .vs-cf-subject span::before { content: ""; position: absolute; left: .875rem; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--vs-steel-300); border-radius: 50%; transition: border-color var(--vs-fast), box-shadow var(--vs-fast); }
.vs .vs-cf-subject:hover span { border-color: var(--vs-steel-400); }
.vs .vs-cf-subject input:checked + span { font-weight: 600; background: var(--vs-orange-50); border-color: var(--vs-orange); box-shadow: inset 0 0 0 1px var(--vs-orange); }
.vs .vs-cf-subject input:checked + span::before { border-color: var(--vs-orange); box-shadow: inset 0 0 0 3px var(--vs-white); background: var(--vs-orange); }
.vs .vs-cf-subject input:focus-visible + span { outline: 2px solid var(--vs-orange); outline-offset: 2px; }

.vs .vs-cf-consent { color: var(--vs-steel-700); line-height: 1.5; }
.vs .vs-cf-consent a { color: var(--vs-navy); text-decoration: underline; text-underline-offset: 3px; }
.vs .vs-cf-consent input { accent-color: var(--vs-orange); }
.vs .vs-cf-consent.is-error { color: var(--vs-danger); }
.vs .vs-cf-req { color: var(--vs-danger); }
.vs .vs-cf-consent-msg { margin-top: calc(-1 * var(--vs-space-3)); }

.vs .vs-cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vs-space-3) var(--vs-space-5); padding-top: var(--vs-space-2); }
.vs .vs-cf-submit { border-radius: 2px; }
.vs .vs-cf-submit[disabled] { opacity: .7; cursor: progress; }
.vs .vs-cf-routing { display: flex; align-items: center; gap: var(--vs-space-2); margin: 0; font-size: var(--vs-fs-sm); color: var(--vs-steel-600); }
.vs .vs-cf-routing:not(:empty)::before { content: ""; width: 6px; height: 6px; background: var(--vs-orange); border-radius: 50%; }
.vs .vs-cf-live:empty { display: none; }
.vs .vs-cf-live { font-size: var(--vs-fs-sm); font-weight: 500; color: var(--vs-steel-700); }
.vs .vs-cf-live.is-error { color: var(--vs-danger); }

.vs .vs-cf-result { display: flex; align-items: flex-start; gap: var(--vs-space-3); margin-bottom: var(--vs-space-5); padding: var(--vs-space-4) var(--vs-space-5); border: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.vs .vs-cf-result .vs-icon { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.vs .vs-cf-result p { margin: 0; }
.vs .vs-cf-result.is-ok { color: #14532d; background: #ecfdf3; border-color: var(--vs-success); }
.vs .vs-cf-result.is-ok .vs-icon { color: var(--vs-success); }
.vs .vs-cf-result.is-error { color: #7f1d1d; background: #fef2f2; border-color: var(--vs-danger); }
.vs .vs-cf-result:focus { outline: none; }

/* Coluna lateral */
.vs .vs-ctm-aside { display: grid; gap: var(--vs-space-5); }
.vs .vs-ctm-box { border: 1px solid var(--vs-steel-200); }
.vs .vs-ctm-box-title { display: flex; align-items: center; gap: var(--vs-space-2); margin: 0; padding: var(--vs-space-4) var(--vs-space-5); font-family: var(--vs-font); font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--vs-white); background: var(--vs-navy); }
.vs .vs-ctm-box-title .vs-icon { width: 18px; height: 18px; color: var(--vs-orange); }
.vs .vs-ctm-depts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--vs-space-2) var(--vs-space-3); align-items: center; padding: var(--vs-space-4) var(--vs-space-5); border-top: 1px solid var(--vs-steel-100); }
.vs .vs-ctm-depts li:first-child { border-top: 0; }
.vs .vs-ctm-depts div { grid-column: 1 / -1; display: grid; gap: 2px; }
.vs .vs-ctm-depts strong { font-weight: 600; color: var(--vs-navy); }
.vs .vs-ctm-depts div span { font-size: var(--vs-fs-xs); color: var(--vs-steel-600); }
.vs .vs-ctm-depts a { display: inline-flex; align-items: center; gap: var(--vs-space-2); min-width: 0; font-size: var(--vs-fs-sm); font-weight: 500; color: var(--vs-orange-text); text-decoration: none; overflow-wrap: anywhere; }
.vs .vs-ctm-depts a .vs-icon { flex: none; width: 16px; height: 16px; }
.vs .vs-ctm-depts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vs .vs-ctm-copy { min-height: 30px; padding: 0 .625rem; font-family: var(--vs-font); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vs-steel-600); background: var(--vs-white); border: 1px solid var(--vs-steel-200); border-radius: 2px; cursor: pointer; }
.vs .vs-ctm-copy:hover { color: var(--vs-navy); background: var(--vs-white); border-color: var(--vs-navy); }
.vs .vs-ctm-copy.is-done { color: var(--vs-success); border-color: var(--vs-success); }

.vs .vs-ctm-hours dl { margin: 0; padding: var(--vs-space-2) var(--vs-space-5); }
.vs .vs-ctm-hours dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--vs-space-1) var(--vs-space-3); padding: var(--vs-space-3) 0; border-top: 1px solid var(--vs-steel-100); }
.vs .vs-ctm-hours dl > div:first-child { border-top: 0; }
.vs .vs-ctm-hours dt { font-weight: 500; color: var(--vs-navy); }
.vs .vs-ctm-hours dd { margin: 0; font-size: var(--vs-fs-sm); font-variant-numeric: tabular-nums; color: var(--vs-steel-700); }
.vs .vs-ctm-hours .is-today { position: relative; }
.vs .vs-ctm-hours .is-today dt::after { content: "Hoje"; margin-left: var(--vs-space-2); padding: 1px 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vs-white); background: var(--vs-orange); vertical-align: 2px; }
.vs .vs-ctm-note { margin: 0; padding: 0 var(--vs-space-5) var(--vs-space-4); font-size: var(--vs-fs-xs); color: var(--vs-steel-600); }

.vs a.vs-ctm-quote { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--vs-space-4); padding: var(--vs-space-5); color: var(--vs-white); text-decoration: none; background: var(--vs-navy-900); transition: background-color var(--vs-fast); }
.vs a.vs-ctm-quote:hover { color: var(--vs-white); background: var(--vs-navy); }
.vs .vs-ctm-quote-ico { display: grid; place-items: center; width: 44px; height: 44px; color: var(--vs-white); background: var(--vs-orange); }
.vs .vs-ctm-quote-ico .vs-icon { width: 22px; height: 22px; }
.vs a.vs-ctm-quote span:not(.vs-ctm-quote-ico) { font-size: var(--vs-fs-sm); line-height: 1.45; color: var(--vs-steel-200); }
.vs a.vs-ctm-quote strong { display: block; font-size: 1rem; color: var(--vs-white); }
.vs a.vs-ctm-quote > .vs-icon { width: 20px; height: 20px; color: var(--vs-orange); transition: transform var(--vs-fast); }
.vs a.vs-ctm-quote:hover > .vs-icon { transform: translateX(4px); }

/* Mapa: cartão sobre um fundo técnico, o iframe só depois do clique -------- */
.vs .vs-ctmap-frame { position: relative; min-height: 420px; background-color: var(--vs-steel-100); background-image: linear-gradient(var(--vs-steel-200) 1px, transparent 1px), linear-gradient(90deg, var(--vs-steel-200) 1px, transparent 1px); background-size: 32px 32px; }
.vs .vs-ctmap-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vs .vs-ctmap-frame.is-loaded .vs-ctmap-placeholder { display: none; }
.vs .vs-ctmap-placeholder { position: absolute; inset: 0; display: flex; align-items: center; }
.vs .vs-ctmap-placeholder::before { content: ""; position: absolute; left: 62%; top: 50%; width: 22px; height: 22px; margin: -30px 0 0 -11px; background: var(--vs-orange); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 0 0 10px rgba(236, 115, 40, .18), 0 0 0 24px rgba(236, 115, 40, .08); }
.vs .vs-ctmap-inner { width: 100%; }
.vs .vs-ctmap-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--vs-space-2) var(--vs-space-4); max-width: 520px; padding: var(--vs-space-5); background: var(--vs-white); border-top: 4px solid var(--vs-orange); box-shadow: 0 24px 48px -24px rgba(15, 35, 48, .4); }
.vs .vs-ctmap-card .vs-cth-ico { margin: 0; }
.vs .vs-ctmap-card strong { display: block; font-size: 1.0625rem; color: var(--vs-navy); }
.vs .vs-ctmap-card p { margin: 4px 0 0; color: var(--vs-steel-700); }
.vs .vs-ctmap-card .vs-cluster { grid-column: 1 / -1; margin-top: var(--vs-space-3); }
.vs .vs-ctmap-card .vs-btn { border-radius: 2px; }
.vs .vs-ctmap-privacy { grid-column: 1 / -1; font-size: var(--vs-fs-xs); color: var(--vs-steel-500) !important; }

/* Perguntas frequentes ---------------------------------------------------- */
.vs .vs-ctfaq { padding-block: var(--vs-space-8); background: var(--vs-steel-50); }
.vs .vs-ctfaq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.vs .vs-ctfaq-grid .vs-cth-kicker { margin-bottom: var(--vs-space-3); }
.vs .vs-ctfaq-list { display: grid; gap: var(--vs-space-2); }
.vs .vs-ctfaq-item { background: var(--vs-white); border: 1px solid var(--vs-steel-200); transition: border-color var(--vs-fast); }
.vs .vs-ctfaq-item[open] { border-color: var(--vs-steel-300); box-shadow: 0 16px 32px -24px rgba(15, 35, 48, .3); }
.vs .vs-ctfaq-item summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--vs-space-4); min-height: 64px; padding: var(--vs-space-4) var(--vs-space-5); font-size: 1.0625rem; font-weight: 600; color: var(--vs-navy); list-style: none; cursor: pointer; }
.vs .vs-ctfaq-item summary::-webkit-details-marker { display: none; }
.vs .vs-ctfaq-item summary:hover { color: var(--vs-orange-text); }
.vs .vs-ctfaq-ico { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--vs-steel-200); }
.vs .vs-ctfaq-ico::before, .vs .vs-ctfaq-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--vs-orange); transition: transform var(--vs-mid) var(--vs-ease); }
.vs .vs-ctfaq-ico::after { transform: rotate(90deg); }
.vs .vs-ctfaq-item[open] .vs-ctfaq-ico::after { transform: rotate(0deg); }
.vs .vs-ctfaq-body { padding: 0 var(--vs-space-5) var(--vs-space-5); color: var(--vs-steel-700); line-height: 1.65; }
.vs .vs-ctfaq-body p { margin: 0 0 var(--vs-space-3); }
.vs .vs-ctfaq-body p:last-child { margin-bottom: 0; }
.vs .vs-ctfaq-body ul { display: grid; gap: var(--vs-space-2); margin: 0 0 var(--vs-space-3) !important; padding-left: var(--vs-space-5) !important; list-style: disc !important; }
.vs .vs-ctfaq-body a { color: var(--vs-orange-text); }

/* Responsivo ------------------------------------------------------------- */
@media (max-width: 1099.98px) {
  .vs .vs-cth { --vs-cth-header: 68px; }
  .vs .vs-ctm-grid { grid-template-columns: minmax(0, 1fr); }
  .vs .vs-ctm-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .vs a.vs-ctm-quote { grid-column: 1 / -1; }
  .vs .vs-cf-subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .vs .vs-cth-cards { grid-template-columns: minmax(0, 1fr); }
  .vs .vs-cth-mark { right: -25vw; top: calc(var(--vs-cth-header) + 1rem); width: 80vw; opacity: .06; }
  .vs .vs-cth::after { height: 48px; }
  .vs .vs-ctfaq-grid { grid-template-columns: minmax(0, 1fr); }
  .vs .vs-ctmap-frame { min-height: 0; }
  .vs .vs-ctmap-placeholder { position: relative; padding-block: var(--vs-space-7); }
  .vs .vs-ctmap-placeholder::before { display: none; }
  .vs .vs-ctmap-frame.is-loaded { min-height: 380px; }
}
@media (max-width: 640px) {
  .vs .vs-cf-row, .vs .vs-ctm-aside { grid-template-columns: minmax(0, 1fr); }
  .vs .vs-cf-subject-grid { grid-template-columns: minmax(0, 1fr); }
  .vs .vs-cf-subject span { min-height: 48px; }
  .vs .vs-cf-actions .vs-btn { width: 100%; justify-content: center; }
  .vs .vs-ctmap-card { grid-template-columns: minmax(0, 1fr); }
  .vs .vs-ctmap-card .vs-cluster { display: grid; }
  .vs .vs-ctmap-card .vs-btn { justify-content: center; }
}