/* Intercultural Preparation survey (FPP Intercultural Academy), 2026-10-27, contact step + e-book 2026-10-27.
   Built on creative-design.css, the same vocabulary as the fpp.world pages:
   dark hero with photo and gradient, teal pill badge, rounded cards with the
   gradient stripe, teal pill buttons and the dark closing band. */

body { background: var(--ivory); }
/* creative-design.css sets display on the hero and the CTA band; [hidden] must still win. */
[hidden] { display: none !important; }
main { position: relative; }

/* ── Top bar: the site's dark header, reduced to brand + language ─── */
.sv-top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: var(--ink); }
.sv-top-inner { max-width: 1440px; margin: 0 auto; padding: 0 2em; height: 72px; display: flex; align-items: center; justify-content: space-between; }
.sv-brand { display: inline-flex; align-items: center; gap: 14px; }
.sv-brand img { height: 28px; width: auto; display: block; }
.sv-brand img.sv-tsw { height: 30px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.25); }
.sv-brand span { font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.8); padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.25); line-height: 1.2; }
.sv-lang { display: flex; gap: 2px; background: rgba(255,255,255,0.08); border-radius: 50px; padding: 4px; }
.sv-lang a { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; color: rgba(255,255,255,0.65); padding: 6px 12px; border-radius: 50px; transition: all .2s; }
.sv-lang a:hover { color: #fff; }
.sv-lang a.is-on { background: var(--teal); color: var(--ink); }

.sv-loading { padding: 160px 2rem 80px; text-align: center; color: var(--slate); }

/* ── Intro hero: same scale as the site pages (badge, title, text and button
   like /new/professional-training), so it reads as one family. Julio, 27/10/2026. ── */
.sv-hero .creative-hero-content { max-width: 1040px; padding-bottom: 9rem; }
.sv-hero h1 { font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.1; margin-bottom: 1.1rem; }
/* Desktop: the English title breaks as "Survey on Intercultural / Preparation in / International Education" (Julio). */
.sv-hero h1 br.desk { display: none; }
@media (min-width: 769px) { .sv-hero h1 br.desk { display: inline; } }
.sv-time { font-size: 0.95rem; color: rgba(255,255,255,0.75); margin: 0 0 1.75rem; }
.sv-intro-text { max-width: 760px; margin-bottom: 1.75rem; }
.sv-intro-text p { font-size: 1.15rem; color: rgba(255,255,255,0.9); margin-bottom: 0.9rem; line-height: 1.6; }
.sv-intro-text p:last-child { color: #fff; font-weight: 600; margin-top: 0.5rem; }
/* The gift: everyone who completes the survey gets Andrea Sebben's e-book. */
.sv-gift { display: flex; align-items: flex-start; gap: 0.8rem; max-width: 760px; margin: 0 0 2.5rem; padding: 1rem 1.25rem; background: rgba(45, 212, 191, 0.14); border: 1px solid rgba(45, 212, 191, 0.4); border-radius: 16px; font-size: 1rem; line-height: 1.55; color: #fff; }
.sv-gift-icon { font-size: 1.4rem; line-height: 1.2; }
.creative-hero-cta { border: 0; cursor: pointer; font-family: inherit; font-size: 1rem; }

/* ── Form ──────────────────────────────────────────────────────────── */
.sv-form { background: linear-gradient(180deg, var(--ivory) 0%, var(--pearl) 18%); padding: 110px 2rem 5rem; min-height: 100vh; }
.sv-form-inner { max-width: 860px; margin: 0 auto; }
.sv-progress { height: 8px; background: #dfe4ef; border-radius: 50px; overflow: hidden; }
.sv-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--amber)); border-radius: 50px; transition: width .35s ease; }
.sv-step { display: inline-block; margin-top: 1.25rem; background: var(--teal); color: #fff; padding: 0.35rem 1rem; border-radius: 50px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

.block { display: none; }
.block.is-on { display: block; }
.block h2 { font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1.2; margin: 0.9rem 0 1.5rem; }

.q { position: relative; overflow: hidden; background: #fff; border-radius: 28px; padding: 2rem 2.25rem 2rem; margin-top: 1.25rem; box-shadow: 0 20px 50px rgba(20, 25, 51, 0.07); border: 2px solid transparent; transition: border-color .2s; }
.q::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--coral), var(--amber), var(--teal)); }
.q.has-error { border-color: var(--coral); }
.q-title { font-size: 1.05rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
.q-title .num { display: inline-block; min-width: 2rem; height: 2rem; line-height: 2rem; text-align: center; border-radius: 50%; background: var(--pearl); color: #0d9488; font-size: 0.8rem; font-weight: 700; margin-right: 0.6rem; vertical-align: middle; }
.q-title .req { color: var(--coral); margin-left: 4px; }
.q-help { margin-top: 0.4rem; font-size: 0.85rem; color: var(--slate); }
.q-err { display: none; margin-top: 0.6rem; font-size: 0.8rem; color: var(--coral); font-weight: 600; }
.q.has-error .q-err { display: block; }

/* Options as soft pills */
.opts, .scale { margin-top: 1.1rem; display: grid; gap: 0.6rem; }
.opt { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.85rem 1.1rem; background: var(--pearl); border: 2px solid var(--pearl); border-radius: 16px; cursor: pointer; font-size: 0.92rem; line-height: 1.5; color: var(--ink); transition: all .18s; }
.opt:hover { border-color: #c9d6f2; background: #f6f8fd; }
.opt input { margin-top: 5px; accent-color: #0d9488; flex: 0 0 auto; width: 18px; height: 18px; }
.opt.is-checked { background: #e6faf6; border-color: var(--teal); }
.opt.is-disabled { opacity: .45; cursor: not-allowed; }
.scale .opt b { display: inline-block; min-width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 8px; background: #fff; color: var(--slate); font-size: 0.78rem; margin-right: 6px; }
.scale .opt.is-checked b { background: var(--teal); color: #fff; }
.scale-hint { font-size: 0.78rem; color: var(--slate); margin-top: 0.8rem; }

.other-wrap, .main-wrap { margin-top: 0.8rem; }
.other-wrap input, .open input, .open textarea, .main-wrap select {
    width: 100%; font: inherit; font-size: 0.92rem; color: var(--ink); background: var(--pearl);
    border: 2px solid var(--pearl); border-radius: 16px; padding: 0.85rem 1.1rem; transition: all .18s;
}
.open input, .open textarea { margin-top: 1rem; }
.open textarea { min-height: 130px; resize: vertical; }
.other-wrap input:focus, .open input:focus, .open textarea:focus, .main-wrap select:focus { outline: none; border-color: var(--teal); background: #fff; }
.main-wrap label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--slate); margin-bottom: 0.4rem; }

/* Matrix */
.matrix { margin-top: 1.1rem; display: grid; gap: 0.75rem; }
.mrow { background: var(--pearl); border-radius: 16px; padding: 0.9rem 1.1rem; }
.mrow .mlabel { font-size: 0.92rem; line-height: 1.5; margin-bottom: 0.6rem; }
.mrow .mvals { display: flex; gap: 6px; }
.mrow .mvals label { flex: 1 1 0; text-align: center; background: #fff; border: 2px solid #fff; border-radius: 12px; padding: 0.55rem 0; cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--slate); position: relative; transition: all .15s; }
.mrow .mvals input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mrow .mvals label:hover { border-color: #c9d6f2; }
.mrow .mvals label.is-checked { background: var(--teal); border-color: var(--teal); color: #fff; }
.mrow .mends { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--slate); margin-top: 0.4rem; }

/* Last step: name and e-mail */
.block-contact .contact-text { font-size: 0.95rem; color: var(--slate); margin-top: -0.75rem; }
.contact-q .q-title { font-weight: 600; font-size: 0.95rem; }
.contact-q .open input { margin-top: 0.8rem; }
.block-contact .contact-gift { margin-top: 1.25rem; padding: 0.9rem 1.1rem; background: #e6faf6; border-left: 4px solid var(--teal); border-radius: 12px; font-size: 0.85rem; color: var(--ink); line-height: 1.5; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.sv-msg { display: none; margin-top: 1.25rem; padding: 0.85rem 1.1rem; border-radius: 16px; font-size: 0.88rem; font-weight: 500; }
.sv-msg.err { display: block; background: #fff0f0; color: #9b1c1c; border-left: 4px solid var(--coral); }
.sv-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.sv-back { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--slate); padding: 0.75rem 0; }
.sv-back:hover { color: var(--ink); }
#next-btn:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }

/* ── Thanks ────────────────────────────────────────────────────────── */
.sv-thanks { padding-top: 10rem; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.sv-thanks::before { display: none; }
.sv-check { width: 72px; height: 72px; border-radius: 50%; background: rgba(45, 212, 191, 0.18); color: var(--teal); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.sv-check svg { width: 34px; height: 34px; }
.sv-thanks p { font-size: 1.05rem; }
.sv-thanks .sv-thanks-gift { margin-top: 1rem; font-size: 0.95rem; color: rgba(255,255,255,0.85); }
.sv-thanks-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.sv-thanks-link { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 2px; }
.sv-thanks-link:hover { color: #fff; border-color: #fff; }

/* ── Footer ────────────────────────────────────────────────────────── */
.sv-foot { background: var(--ink); color: rgba(255,255,255,0.6); font-size: 0.75rem; }
.sv-foot-inner { max-width: 1440px; margin: 0 auto; padding: 1.25rem 2em; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sv-foot a { color: rgba(255,255,255,0.8); }

@media (max-width: 768px) {
    .sv-top-inner { padding: 0 1.25em; height: 64px; }
    .sv-brand span { display: none; }
    .sv-brand img.sv-tsw { height: 26px; }
    .sv-hero .creative-hero-content { padding-bottom: 3rem; }
    .sv-time { font-size: 0.85rem; margin-bottom: 1.25rem; }
    .sv-intro-text p { font-size: 1rem; }
    .sv-form { padding: 90px 1.25rem 4rem; }
    .block h2 { font-size: 1.5rem; }
    .q { padding: 1.5rem 1.25rem; border-radius: 22px; }
    .q-title { font-size: 1rem; }
    .sv-actions { flex-direction: column-reverse; align-items: stretch; }
    .sv-actions .creative-hero-cta { justify-content: center; }
    .sv-back { text-align: center; }
    .mrow .mvals label { padding: 0.5rem 0; font-size: 0.85rem; }
}