@import url("/assets/css/site.css");

html.has-open-support-modal, html.has-open-support-modal body { overflow: hidden; }
.support-site-header { background: #07182b; }
.support-hero { padding: calc(var(--site-header-height) + 3.5rem) 0 5rem; color: var(--white); background: radial-gradient(circle at 85% 10%, rgba(48,211,220,.18), transparent 31%), linear-gradient(135deg,#07182b,#0a3150); }
.support-hero .breadcrumb { margin-bottom: clamp(3rem,8vw,6rem); }
.support-hero-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.6fr); gap: clamp(3rem,10vw,8rem); align-items: end; }
.support-hero h1 { max-width: 850px; margin: .5rem 0 1.25rem; font-size: clamp(3rem,7vw,6.4rem); line-height: .96; }
.support-hero-layout > div > p:last-child { max-width: 760px; color: rgba(255,255,255,.72); font-size: clamp(1rem,2vw,1.25rem); }
.support-hero aside { padding: 1.5rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; background: rgba(255,255,255,.06); }
.support-hero aside strong { display: block; margin-bottom: .6rem; color: var(--cyan); }
.support-hero aside p { margin: 0; color: rgba(255,255,255,.7); font-size: .88rem; }
.support-routing { padding: clamp(3.5rem,8vw,7rem) 0; background: var(--paper); }
.support-routing-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.support-routing article { scroll-margin-top: calc(var(--site-header-height) + 1rem); display: flex; min-height: 420px; flex-direction: column; padding: clamp(1.5rem,4vw,2.5rem); border: 1px solid var(--line); border-radius: 1.2rem; background: var(--white); box-shadow: 0 16px 44px rgba(5,25,45,.06); transition: transform .24s ease,border-color .24s ease,box-shadow .24s ease,background-color .24s ease; }
.support-routing article:hover, .support-routing article:focus-within { z-index: 1; border-color: rgba(13,113,131,.48); background: #fbfeff; box-shadow: 0 26px 60px rgba(5,36,61,.16); transform: translateY(-7px); }
.support-channel-heading { display: flex; align-items: center; justify-content: space-between; color: var(--blue); }
.support-channel-heading span { font-size: 2rem; font-weight: 850; transition: color .24s ease,transform .24s ease; }
.support-routing article:hover .support-channel-heading span, .support-routing article:focus-within .support-channel-heading span { color: #a82339; transform: translateX(.2rem); }
.support-channel-heading small { font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.support-routing h2 { max-width: 520px; margin: 3.5rem 0 .75rem; font-size: clamp(1.8rem,3vw,2.8rem); }
.support-routing p, .support-routing li { color: var(--muted); }
.support-routing ul { display: grid; gap: .45rem; margin: 1rem 0 2rem; padding-left: 1.15rem; font-size: .88rem; }
.support-routing article > a { margin-top: auto; color: var(--blue); font-weight: 850; text-decoration: none; }
.support-safety-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem,10vw,8rem); }
.support-safety h2 { font-size: clamp(2.2rem,5vw,4rem); line-height: 1; }
.support-safety-layout > div:last-child { color: var(--muted); font-size: 1.05rem; }
.support-modal { width: min(1080px,calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; overflow: auto; border: 0; border-radius: 1.25rem; color: var(--ink); background: #eef3f6; box-shadow: 0 30px 90px rgba(3,15,28,.4); }
.support-modal::backdrop { background: rgba(3,15,28,.76); backdrop-filter: blur(5px); }
.support-modal-card { padding: clamp(1.25rem,4vw,2.6rem); }
.support-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.support-modal-header h2 { margin: .35rem 0 0; font-size: clamp(2rem,4vw,3.5rem); line-height: 1; }
.support-modal-header button { width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--white); font-size: 1.7rem; cursor: pointer; }
.support-form-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem,6vw,5rem); align-items: start; }
.support-form-layout > div > p, .support-form-layout > div li { color: var(--muted); }
.support-form-layout > div ul { display: grid; gap: .5rem; padding-left: 1.15rem; }
.support-form { position: relative; display: grid; gap: 1.25rem; padding: clamp(1.4rem,4vw,2.4rem); border: 1px solid var(--line); border-radius: 1.2rem; background: var(--white); box-shadow: 0 18px 50px rgba(5,25,45,.08); }
.support-form-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.support-form label { display: grid; gap: .4rem; font-size: .82rem; font-weight: 800; }
.support-form input, .support-form select, .support-form textarea { width: 100%; padding: .85rem 1rem; border: 1px solid #cbd6dd; border-radius: .7rem; color: var(--ink); background: var(--white); font: inherit; font-weight: 500; }
.support-form input:focus, .support-form select:focus, .support-form textarea:focus { border-color: var(--blue); outline: 3px solid rgba(49,109,179,.14); }
.support-phone-field { grid-column: 1 / -1; }
.support-phone-controls { display: grid; grid-template-columns: minmax(220px,.75fr) minmax(0,1.25fr); gap: .75rem; }
.support-phone-controls select { min-width: 0; font-size: .82rem; }
.support-field-wide { grid-column: 1 / -1; }
.support-form label small, .support-field-error { color: #a82339; font-weight: 700; }
.support-attachment-field input[type="file"] { padding: .65rem; border-style: dashed; background: #f7f9fb; }
.support-attachment-field small { color: var(--muted) !important; font-weight: 500 !important; }
.support-consent { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 500 !important; line-height: 1.5; }
.support-consent input { width: auto; margin-top: .2rem; }
.support-consent a { color: var(--blue); }
.support-newsletter-choice { grid-template-columns: auto 1fr !important; align-items: start; padding: 1rem; border: 1px solid #d8e2e8; border-radius: .75rem; background: #f7f9fb; font-weight: 500 !important; }
.support-newsletter-choice input { width: auto; margin-top: .2rem; }
.support-newsletter-choice span { display: grid; gap: .25rem; }
.support-newsletter-choice strong { color: var(--ink); }
.support-newsletter-choice small { color: var(--muted) !important; font-weight: 500 !important; line-height: 1.45; }
.remote-program-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.remote-program-field legend { margin-bottom: .55rem; font-size: .82rem; font-weight: 800; }
.remote-program-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .5rem; }
.remote-program-grid label { position: relative; display: block; cursor: pointer; }
.remote-program-grid input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.remote-program-grid span { min-height: 46px; display: grid; place-items: center; padding: .55rem .4rem; border: 1px solid #cbd6dd; border-radius: .7rem; color: var(--muted); background: var(--white); font-size: .72rem; text-align: center; }
.remote-program-grid input:checked + span { border-color: var(--blue); color: var(--blue); background: #eaf3fb; box-shadow: inset 0 0 0 1px var(--blue); }
.remote-program-grid input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.remote-program-field > small { display: block; margin-top: .4rem; color: #a82339; }
.remote-schedule { display: grid; gap: .8rem; padding: 1rem; border: 1px solid #d8e2e8; border-radius: .8rem; background: #f7f9fb; }
.remote-schedule-choice { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 500 !important; cursor: pointer; }
.remote-schedule-choice input { width: auto; margin-top: .2rem; }
.remote-schedule-choice span { display: grid; gap: .25rem; }
.remote-schedule-choice small { color: var(--muted) !important; font-weight: 500 !important; line-height: 1.45; }
.remote-schedule [data-remote-schedule-field] { display: none; }
.remote-schedule.is-enabled [data-remote-schedule-field] { display: grid; }
.support-honeypot { position: absolute; left: -10000px; }
.support-form-success, .support-form-error, .support-form-notice { display: grid; gap: .25rem; padding: 1rem; border-radius: .75rem; }
.support-form-success { color: #164e35; background: #e7f6ee; }
.support-form-success { grid-template-columns: 1fr auto; align-items: start; }
.support-form-success > div { display: grid; gap: .25rem; }
.support-form-success button { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid rgba(22,78,53,.2); border-radius: 50%; color: #164e35; background: rgba(255,255,255,.55); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.support-form-success button:hover, .support-form-success button:focus-visible { background: var(--white); }
.support-form-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.support-clear-button { border: 1px solid #aebdc7; color: var(--ink); background: var(--white); }
.support-clear-button:hover, .support-clear-button:focus-visible { border-color: var(--blue); color: var(--blue); background: #f4f8fb; }
.phone-support-intro { max-width: 760px; color: var(--muted); font-size: 1.02rem; }
.phone-support-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 2rem 0; }
.phone-support-grid a { display: grid; gap: .55rem; padding: clamp(1.3rem,4vw,2rem); border: 1px solid #cbd6dd; border-radius: 1rem; color: var(--ink); background: var(--white); text-decoration: none; box-shadow: 0 12px 34px rgba(5,25,45,.07); }
.phone-support-grid a:hover, .phone-support-grid a:focus-visible { border-color: var(--blue); transform: translateY(-2px); }
.phone-support-grid a.is-urgent { border-color: rgba(168,35,57,.35); background: #fff7f8; }
.phone-support-grid a.is-whatsapp { grid-column: 1 / -1; border-color: rgba(24,128,73,.3); background: #f2fbf6; }
.phone-support-grid span { color: var(--blue); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.phone-support-grid .is-urgent span { color: #a82339; }
.phone-support-grid .is-whatsapp span, .phone-support-grid .is-whatsapp strong { color: #187f49; }
.phone-support-grid strong { font-size: clamp(1.35rem,3vw,2.2rem); }
.phone-support-grid small { color: var(--muted); }
.phone-support-followup { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.25rem; border: 1px solid #d8e2e8; border-radius: .85rem; background: #f7f9fb; }
.phone-support-followup p { max-width: 680px; margin: .35rem 0 0; color: var(--muted); }
.phone-support-followup .button { flex: 0 0 auto; }
.phone-support-note { margin: 1.25rem 0 0; padding-left: 1rem; border-left: 4px solid #a82339; color: var(--muted); }
.phone-support-note strong { color: #8c2034; }
.schedule-confirmation-note { display: grid; gap: .25rem; padding: 1rem; border: 1px solid #e3c979; border-radius: .75rem; color: #5f4914; background: #fff8df; }
.schedule-confirmation-note span { font-size: .8rem; line-height: 1.45; }
.schedule-date-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .55rem; }
.schedule-date-label > span { white-space: nowrap; }
.schedule-date-label em { color: var(--muted); font-size: .68rem; font-style: normal; font-weight: 600; }
.support-form-error { color: #761c2c; background: #fdecef; }
.support-form-notice { color: #614812; background: #fff7dd; }
.support-escalation { padding: clamp(4rem,8vw,7rem) 0; color: var(--white); background: linear-gradient(125deg,#5f1422,#9d2437); }
.support-escalation-layout { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3rem; align-items: center; }
.support-escalation h2 { max-width: 850px; margin: .5rem 0 1rem; font-size: clamp(2.2rem,5vw,4.2rem); line-height: 1; }
.support-escalation p:last-child { max-width: 760px; color: rgba(255,255,255,.76); }
.support-escalation .button { position: relative; z-index: 1; isolation: isolate; }
.support-escalation .button::before, .support-escalation .button::after { position: absolute; inset: -3px; z-index: -1; border: 2px solid rgba(255,255,255,.72); border-radius: inherit; content: ""; pointer-events: none; animation: csirt-button-wave 2.6s ease-out infinite; }
.support-escalation .button::after { animation-delay: 1.3s; }
@keyframes csirt-button-wave {
    0% { opacity: .72; transform: scale(.96); }
    72%, 100% { opacity: 0; transform: scale(1.55,1.9); }
}
.support-general .shell { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.support-general p { margin: 0; color: var(--muted); }
.support-general a { color: var(--blue); font-weight: 850; text-decoration: none; white-space: nowrap; }

@media (max-width: 760px) {
    .support-hero-layout, .support-routing-grid, .support-safety-layout, .support-form-layout, .support-escalation-layout { grid-template-columns: 1fr; }
    .support-form-fields { grid-template-columns: 1fr; }
    .support-field-wide, .support-phone-field { grid-column: auto; }
    .support-phone-controls { grid-template-columns: 1fr; }
    .remote-program-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .phone-support-grid { grid-template-columns: 1fr; }
    .phone-support-grid a.is-whatsapp { grid-column: auto; }
    .phone-support-followup { align-items: stretch; flex-direction: column; }
    .support-form-actions { align-items: stretch; flex-direction: column; }
    .support-form-actions .button { width: 100%; }
    .support-routing article { min-height: 0; }
    .support-routing h2 { margin-top: 2rem; }
    .support-general .shell { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .support-routing article, .support-channel-heading span { transition: none; }
    .support-routing article:hover, .support-routing article:focus-within, .support-routing article:hover .support-channel-heading span, .support-routing article:focus-within .support-channel-heading span { transform: none; }
    .support-escalation .button::before, .support-escalation .button::after { display: none; animation: none; }
}