@import url('./tokens.css?v=c62e55ca1f2e');
@import url('./legacy-palette.css?v=dc79deb9a393');

/* Contact page: channels on the night stage beside a white form card.
   The stage itself (background, grid, aurora) is defined in site.css. */
.contact-page { padding: clamp(8rem, 13vw, 10rem) 0 clamp(4rem, 8vw, 6rem); }
.contact-page-grid { display: grid; align-items: start; gap: clamp(2rem, 6vw, 5rem); }
.contact-page-info { min-width: 0; padding-top: .75rem; }

.contact-page h1 { margin: 1.1rem 0; font-size: clamp(2.3rem, 4.6vw, 3.8rem); letter-spacing: -.045em; line-height: 1.08; text-wrap: balance; }
.contact-page h1 span:not([class]) { color: var(--accent); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.contact-page-intro { max-width: 470px; color: var(--muted); font-size: clamp(.98rem, 1.2vw, 1.08rem); line-height: 1.8; }

.contact-page-channels { display: grid; gap: .75rem; margin: 1.75rem 0; }
.contact-channel { display: flex; align-items: center; gap: .9rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 1.1rem; background: color-mix(in srgb, var(--white) 7%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: opacity 700ms var(--ease), transform 450ms var(--ease), filter 700ms var(--ease), border-color var(--duration), background var(--duration), box-shadow 400ms; }
.contact-channel.reveal-visible { transition-delay: var(--reveal-delay, 0ms); }
.contact-channel > span:nth-child(2) { min-width: 0; }
.contact-channel:focus-visible { outline: 2px solid var(--logo-cyan); outline-offset: 4px; }
.contact-channel .contact-icon { color: var(--white); background: color-mix(in srgb, var(--white) 12%, transparent); }
.contact-channel-label { display: block; color: var(--muted); font-size: .72rem; letter-spacing: .04em; }
.contact-channel-value { display: block; margin-top: 3px; color: var(--white); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.contact-channel .contact-note { display: block; margin-top: 2px; color: var(--muted); font-size: .68rem; }
.contact-channel-arrow { margin-left: auto; color: var(--logo-cyan); font-size: 1.3rem; transition: transform 400ms var(--ease); }

.contact-channel-email { border-color: transparent; background: var(--grad-button); box-shadow: var(--shadow-glow); }
.contact-channel-whatsapp { border-color: transparent; background: linear-gradient(120deg, #16a34a, #11883f); box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--button-cta) 80%, transparent); }
.contact-channel-whatsapp:focus-visible { outline-color: var(--white); }
:is(.contact-channel-email, .contact-channel-whatsapp) :is(.contact-channel-label, .contact-channel-arrow) { color: color-mix(in srgb, var(--white) 88%, transparent); }
:is(.contact-channel-email, .contact-channel-whatsapp) .contact-icon { background: color-mix(in srgb, var(--white) 20%, transparent); }

.contact-channel-social { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; }
.contact-channel-social > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
.contact-channel-social .contact-channel-arrow { grid-column: 2; grid-row: 1; }

.contact-next-step { position: relative; padding-left: 1.25rem; }
.contact-next-step::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 3px; background: var(--grad-brand); }
.contact-next-step h2 { margin-bottom: .4rem; font-size: .95rem; font-weight: 600; }
.contact-next-step p { color: var(--muted); font-size: .9rem; line-height: 1.7; }

/* The form card returns to the light palette inside the dark stage. */
.contact-page .form-panel { --ink: var(--text); --muted: color-mix(in srgb, var(--text) 65%, var(--white)); --line: var(--paper-line); --accent: var(--logo-blue-dark); min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); color: var(--ink); box-shadow: 0 50px 110px -50px color-mix(in srgb, var(--logo-blue) 80%, transparent); scroll-margin-top: 96px; }
.contact-form-title { font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.3; }
.contact-form-intro { margin: .6rem 0 1.5rem; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.contact-page .submit-button { width: 100%; text-align: center; }
.contact-page .submit-button svg { flex-shrink: 0; }
.contact-page .submit-button:disabled { cursor: wait; opacity: .65; }
.contact-page .recaptcha-notice { font-size: .68rem; }
body:has(.contact-page .recaptcha-notice) .grecaptcha-badge { visibility: hidden; }

@media (hover: hover) and (pointer: fine) {
  .contact-channel:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--logo-cyan) 60%, transparent); background: color-mix(in srgb, var(--white) 12%, transparent); transition-delay: 0ms; }
  .contact-channel-email:hover { border-color: transparent; background: var(--grad-button); box-shadow: 0 22px 50px -12px color-mix(in srgb, var(--logo-blue) 75%, transparent); }
  .contact-channel-whatsapp:hover { border-color: transparent; background: linear-gradient(120deg, #19b352, #13964a); box-shadow: 0 20px 44px -12px color-mix(in srgb, var(--button-cta) 90%, transparent); }
  .contact-channel:hover .contact-channel-arrow { transform: translate(3px, -3px); }
}
@media (min-width: 901px) {
  .contact-page-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .contact-page-grid { max-width: 620px; margin-inline: auto; }
  .contact-page-info { order: 2; padding-top: 0; }
  .contact-page-intro { max-width: none; }
  .contact-page .form-panel { order: 1; }
}
@media (max-width: 600px) {
  .contact-channel { padding: .9rem; gap: .65rem; }
}