/* USAVisa V4 — institutional pages in the V4 journey (nosotros, preguntas frecuentes,
   contacto, legales, visa de estudiante, partners, DS-160 Solo, asistencia y anexos).
   Requires tokens.css + components.css + home.css (loaded by the journey head).
   Part 1: page layout for the *_v4 views (wrap in <main class="uv inst">).
   Part 2: adapters for legacy markup that keeps its forms, scoped to html.uv-v4-journey. */

/* ================= Part 1 — V4 views ================= */

.inst { background: var(--surface-000); }

/* Page hero: eyebrow + title + lead, light ground */
.inst-hero { padding: var(--space-32) var(--space-16) var(--space-48); }
.inst-hero__title { font: 800 38px/42px var(--font-sans); letter-spacing: -0.02em; margin: 0 0 var(--space-12); max-width: 760px; }
.inst-hero__lead { font: 400 17px/26px var(--font-sans); color: var(--ink-muted); margin: 0; max-width: 520px; }
.inst-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-24); }
.inst-hero__note { margin: var(--space-12) 0 0; font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
.inst-hero--center { text-align: center; }
.inst-hero--center .inst-hero__title, .inst-hero--center .inst-hero__lead { margin-left: auto; margin-right: auto; }
.inst-hero--center .inst-hero__actions { justify-content: center; }
.inst-hero .uv-trust { margin-top: var(--space-32); border: 1px solid var(--line); }
.inst-hero__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

/* Section head: title + lead */
.inst-head { margin: 0 0 var(--space-24); }
.inst-head .uv-section__title { margin-bottom: var(--space-8); }
.inst-head__lead { margin: 0; color: var(--ink-muted); max-width: 520px; font: 400 17px/26px var(--font-sans); }

/* Card grid built from .uv-plan + .uv-link__icon */
.inst-grid { display: grid; gap: var(--space-12); }
.inst-card .uv-link__icon { margin-bottom: var(--space-4); }
.inst-card .uv-plan__desc { line-height: 20px; }

/* Trust item that links to its source */
.inst a.inst-trust-link, .inst a.inst-trust-link:hover { color: var(--ink); text-decoration: none; }
.inst a.inst-trust-link:hover .uv-trust__label { text-decoration: underline; }

/* Steps and FAQ keep the reading measure */
.inst-measure { max-width: var(--measure); }
.inst-steps { max-width: var(--measure); }

/* Photo next to text */
.inst-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.inst-text p { margin: 0 0 var(--space-16); color: var(--ink-muted); }
.inst-text p strong { color: var(--ink); }

/* Small print under a block */
.inst-note { margin: var(--space-16) 0 0; font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
.v3-closing .inst-note { color: var(--on-inverse-muted); }

/* Confirmation card (thank-you pages) */
.inst-done { max-width: 560px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-16); }
.inst-done__icon { width: 64px; height: 64px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--success-soft); color: var(--success); }
.inst-done__icon .uv-icon { width: 32px; height: 32px; }
.inst-done__title { font: 800 30px/36px var(--font-sans); letter-spacing: -0.015em; margin: 0; }
.inst-done__lead { margin: 0; color: var(--ink-muted); }
.inst-done__actions { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; max-width: 360px; }

/* Legal documents */
.inst-prose { max-width: var(--measure); }
/* Legal pages: hero and body share one centered reading column (the body alone at the left
   left the right half of a very long page empty on desktop). */
.v3-container.inst-legal { max-width: var(--measure); } /* beats .v3-container from home.css, which loads later */
.inst-prose h2 { font: 700 22px/28px var(--font-sans); letter-spacing: -0.01em; margin: var(--space-32) 0 var(--space-8); }
.inst-prose h3 { font: 700 17px/24px var(--font-sans); margin: var(--space-24) 0 var(--space-8); }
.inst-prose p, .inst-prose li { margin: 0 0 var(--space-12); color: var(--ink); }
.inst-prose ul, .inst-prose ol { margin: 0 0 var(--space-16); padding-left: var(--space-24); }
.inst-prose a { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
.inst-prose b, .inst-prose strong { font-weight: 700; }
.inst-prose__updated { font: 500 13px/20px var(--font-sans); color: var(--ink-muted); margin: 0 0 var(--space-24); }

/* Bootstrap 3 link states must not repaint V4 buttons and rows */
.inst a.uv-btn:hover, .inst a.uv-btn:focus, .inst a.uv-link:hover, .inst a.uv-link:focus { text-decoration: none; }
.inst a.uv-btn--primary:hover, .inst a.uv-btn--primary:focus { color: var(--on-action); }
.inst a.uv-btn--secondary:hover, .inst a.uv-btn--secondary:focus, .inst a.uv-link:hover, .inst a.uv-link:focus { color: var(--ink); }
.inst a.uv-btn--inverse:hover, .inst a.uv-btn--inverse:focus { color: var(--brand-navy); }
.inst a.uv-btn--ghost:hover, .inst a.uv-btn--ghost:focus { color: var(--ink); text-decoration: underline; }
.inst .v3-closing a.v3-closing__wa:hover, .inst .v3-closing a.v3-closing__wa:focus { color: var(--on-inverse); }
.inst .uv-faq summary:focus-visible { outline-offset: -2px; }
.inst .uv-faq details p + p { margin-top: calc(-1 * var(--space-8)); }
.inst .uv-faq details a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 720px) {
  .inst-grid--2, .inst-grid--4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-24); }
  .inst-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
  .inst-done__actions { flex-direction: row; justify-content: center; max-width: none; }
}
@media (min-width: 960px) {
  .inst-hero { padding: var(--space-80) var(--space-24) var(--space-48); }
  .inst-hero__title { font-size: 56px; line-height: 60px; letter-spacing: -0.025em; }
  .inst-hero__lead { font-size: 18px; line-height: 28px; }
  .inst-hero--split { display: grid; grid-template-columns: 1fr 440px; gap: var(--space-48); align-items: center; }
  .inst-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* The closing band already separates the page from the footer */
html.uv-v4-journey .inst + .v3-footer { margin-top: 0; }

/* ================= Part 2 — legacy markup in the journey ================= */

/* ---------- Contacto (/contacto): same form, V4 card and controls ---------- */
.inst-contact { display: grid; gap: var(--space-24); align-items: start; }
.inst-contact__channels { order: 2; }
.inst .inst-link--static { grid-template-columns: 40px 1fr; }
html.uv-v4-journey .inst .inst-form-card {
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-24) var(--space-16);
}
html.uv-v4-journey .inst .inst-form-card h2 { font: 700 22px/28px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 var(--space-8); }
html.uv-v4-journey .inst .inst-form-card .form-subtitle { font: 500 13px/20px var(--font-sans); color: var(--ink-muted); margin: 0 0 var(--space-24); }
html.uv-v4-journey .inst .contact-form .form-group { margin-bottom: var(--space-16); }
html.uv-v4-journey .inst .contact-form label { font: 600 14px/20px var(--font-sans); color: var(--ink); margin-bottom: var(--space-4); }
html.uv-v4-journey .inst .contact-form .form-control {
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-000);
  color: var(--ink); font: 400 16px/24px var(--font-sans); min-height: var(--tap-min); padding: var(--space-12) var(--space-16);
  box-shadow: none; transition: border-color .15s ease;
}
html.uv-v4-journey .inst .contact-form .form-control:hover { border-color: var(--ink); }
html.uv-v4-journey .inst .contact-form .form-control:focus { border-color: var(--ink); box-shadow: none; outline: 2px solid var(--focus); outline-offset: 2px; }
html.uv-v4-journey .inst .contact-form .form-control::placeholder { color: var(--ink-subtle); }
html.uv-v4-journey .inst .contact-form .form-control[aria-invalid="true"] { border-color: var(--danger); }
html.uv-v4-journey .inst .contact-form .form-error { color: var(--danger); font: 600 13px/20px var(--font-sans); margin-top: var(--space-4); }
html.uv-v4-journey .inst .contact-form .privacy-check { gap: var(--space-12); margin-bottom: var(--space-24); }
html.uv-v4-journey .inst .contact-form .privacy-check input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand-navy); }
html.uv-v4-journey .inst .contact-form .privacy-check label { font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
html.uv-v4-journey .inst .contact-form .privacy-check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
html.uv-v4-journey .inst .contact-form .btn-submit {
  background: var(--action); color: var(--on-action); border: 0; border-radius: var(--radius-pill);
  min-height: var(--button-lg); font: 700 17px/20px var(--font-sans); box-shadow: none; filter: none; transform: none;
}
html.uv-v4-journey .inst .contact-form .btn-submit:hover { background: var(--action-hover); box-shadow: none; filter: none; transform: none; }
html.uv-v4-journey .inst .contact-form .btn-submit:active { transform: translateY(1px); }
html.uv-v4-journey .inst .contact-form .btn-submit:disabled { opacity: .45; }
html.uv-v4-journey .inst .contact-trust { font: 500 13px/20px var(--font-sans); color: var(--ink-muted); margin-top: var(--space-16); }
html.uv-v4-journey .inst .contact-trust .uv-icon { width: 16px; height: 16px; color: var(--success); }
@media (min-width: 720px) { html.uv-v4-journey .inst .inst-form-card { padding: var(--space-32); } }
@media (min-width: 960px) {
  .inst-contact { grid-template-columns: 1fr 1.2fr; gap: var(--space-48); }
  /* Sticky: the channels are much shorter than the form; they follow the scroll instead of
     leaving an empty column below them. */
  .inst-contact__channels { order: 0; position: sticky; top: calc(var(--header-h) + var(--space-24)); }
}

/* ---------- Thank-you pages ---------- */
.inst .inst-done .inst-note a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.inst > .uv-section:only-child { min-height: 60vh; display: flex; align-items: center; }
.inst > .uv-section:only-child > * { width: 100%; }

/* Progress list on confirmation pages (done / current / pending) */
.inst-progress { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); width: 100%; max-width: 420px; text-align: left; }
.inst-progress__item { display: flex; align-items: center; gap: var(--space-12); font: 500 15px/24px var(--font-sans); color: var(--ink-muted); }
.inst-progress__dot { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); font: 700 13px/1 var(--font-sans); color: var(--ink-muted); background: var(--surface-000); }
.inst-progress__dot .uv-icon { width: 16px; height: 16px; }
.inst-progress__item.is-done .inst-progress__dot { background: var(--success-soft); border-color: var(--success-soft); color: var(--success); }
.inst-progress__item.is-current { color: var(--ink); font-weight: 700; }
.inst-progress__item.is-current .inst-progress__dot { background: var(--ink); border-color: var(--ink); color: var(--on-inverse); }

/* ---------- Partners (/partners/apply): same form, V4 card and controls ---------- */
html.uv-v4-journey .apply-header { padding: var(--space-32) var(--space-16) 0; }
html.uv-v4-journey .apply-header h1 { font: 800 30px/36px var(--font-sans); letter-spacing: -0.015em; color: var(--ink); margin: 0 0 var(--space-8); }
html.uv-v4-journey .apply-header .sub { font: 400 17px/26px var(--font-sans); color: var(--ink-muted); max-width: 520px; margin: 0; }
html.uv-v4-journey .apply-layout { padding-left: var(--space-16); padding-right: var(--space-16); }
html.uv-v4-journey .apply-main .card { background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-24) var(--space-16); }
html.uv-v4-journey .apply-main label { font: 600 14px/20px var(--font-sans); color: var(--ink); }
html.uv-v4-journey .apply-main .optional-mark { font-weight: 500; color: var(--ink-muted); }
html.uv-v4-journey .apply-main .req-mark { color: var(--danger); }
html.uv-v4-journey .apply-main input[type="text"],
html.uv-v4-journey .apply-main input[type="email"],
html.uv-v4-journey .apply-main input[type="tel"],
html.uv-v4-journey .apply-main select,
html.uv-v4-journey .apply-main textarea {
  background: var(--surface-000); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--ink); font: 400 16px/24px var(--font-sans); min-height: var(--tap-min); padding: var(--space-12) var(--space-16);
}
html.uv-v4-journey .apply-main input:hover, html.uv-v4-journey .apply-main select:hover, html.uv-v4-journey .apply-main textarea:hover { border-color: var(--ink); }
html.uv-v4-journey .apply-main input:focus, html.uv-v4-journey .apply-main select:focus, html.uv-v4-journey .apply-main textarea:focus { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 2px; }
html.uv-v4-journey .apply-main input::placeholder, html.uv-v4-journey .apply-main textarea::placeholder { color: var(--ink-subtle); }
html.uv-v4-journey .apply-main input.is-invalid, html.uv-v4-journey .apply-main select.is-invalid, html.uv-v4-journey .apply-main textarea.is-invalid { border-color: var(--danger); background: var(--surface-000); }
html.uv-v4-journey .apply-main input.is-valid, html.uv-v4-journey .apply-main select.is-valid, html.uv-v4-journey .apply-main textarea.is-valid { border-color: var(--line-strong); }
html.uv-v4-journey .apply-main .sub { font: 500 13px/20px var(--font-sans); color: var(--ink-muted); }
html.uv-v4-journey .partner-apply-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-24); }
html.uv-v4-journey .partner-apply-actions .uv-btn { flex: 1 1 100%; }
html.uv-v4-journey .partner-apply-actions a.uv-btn--secondary:hover, html.uv-v4-journey .partner-apply-actions a.uv-btn--secondary:focus { color: var(--ink); text-decoration: none; }
html.uv-v4-journey .trust-card { background: var(--surface-000); border: 1px solid var(--line); border-radius: var(--radius-md); }
html.uv-v4-journey .trust-card h3 { font: 700 12px/16px var(--font-sans); letter-spacing: .08em; color: var(--ink-muted); }
html.uv-v4-journey .trust-row { font-size: 14px; border-bottom-color: var(--line); }
html.uv-v4-journey .trust-row .label, html.uv-v4-journey .trust-type-item { color: var(--ink-muted); font-size: 14px; }
html.uv-v4-journey .trust-row .value, html.uv-v4-journey .trust-row .value.accent { color: var(--ink); font-weight: 700; }
html.uv-v4-journey .trust-type-dot { background: var(--ink-muted); }
@media (min-width: 720px) {
  html.uv-v4-journey .apply-main .card { padding: var(--space-32); }
  html.uv-v4-journey .partner-apply-actions .uv-btn { flex: 0 0 auto; }
}
@media (min-width: 960px) {
  html.uv-v4-journey .apply-header { padding-top: var(--space-48); }
  html.uv-v4-journey .apply-header h1 { font-size: 38px; line-height: 42px; letter-spacing: -0.02em; }
}

/* ---------- DS-160 Solo (/ds160): same form, V4 card and controls ---------- */
.inst-ds160 { display: grid; gap: var(--space-32); align-items: start; }
.inst-ds160__form { order: -1; }
.inst-nowrap { white-space: nowrap; }
.inst-ds160__info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.inst-ds160__info .uv-section__title { margin: 0; }
.inst-ds160__info .uv-checks { font: 400 15px/24px var(--font-sans); color: var(--ink); }
.inst-ds160__info .uv-trust { width: 100%; border: 1px solid var(--line); grid-template-columns: repeat(3, 1fr); }
.inst-ds160__info .uv-trust__value { font-size: 22px; line-height: 28px; }
.inst-ds160__info .inst-note, .inst-ds160__info .uv-btn--ghost { margin: 0; }
html.uv-v4-journey .inst-ds160 .ds160v3-form-inner h2 { font: 700 22px/28px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 var(--space-8); }
html.uv-v4-journey .inst-ds160 .ds160v3-form-subtitle { font: 500 13px/20px var(--font-sans); color: var(--ink-muted); margin: 0 0 var(--space-24); }
html.uv-v4-journey .inst-ds160 .form-group { margin-bottom: var(--space-16); }
html.uv-v4-journey .inst-ds160 .form-group label { font: 600 14px/20px var(--font-sans); color: var(--ink); gap: var(--space-4); margin-bottom: var(--space-4); }
html.uv-v4-journey .inst-ds160 .form-group label .required { color: var(--danger); font-size: 14px; }
html.uv-v4-journey .inst-ds160 .form-control {
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background-color: var(--surface-000);
  color: var(--ink); font: 400 16px/24px var(--font-sans); min-height: var(--tap-min); padding: var(--space-12) var(--space-16);
  box-shadow: none; transition: border-color .15s ease;
}
html.uv-v4-journey .inst-ds160 .quantity-select {
  font-weight: 600; padding-right: 44px;
  background: var(--surface-000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230a1f44' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 20px;
}
html.uv-v4-journey .inst-ds160 .form-control:hover { border-color: var(--ink); }
html.uv-v4-journey .inst-ds160 .form-control:focus { border-color: var(--ink); background-color: var(--surface-000); box-shadow: none; outline: 2px solid var(--focus); outline-offset: 2px; }
html.uv-v4-journey .inst-ds160 .form-control::placeholder { color: var(--ink-subtle); }
html.uv-v4-journey .inst-ds160 .form-control.error { border-color: var(--danger); animation: none; }
html.uv-v4-journey .inst-ds160 .form-control.success { border-color: var(--line-strong); }
html.uv-v4-journey .inst-ds160 .error-message { color: var(--danger); font: 600 13px/20px var(--font-sans); margin-top: var(--space-4); }
html.uv-v4-journey .inst-ds160 .success-message { color: var(--success); font: 500 13px/20px var(--font-sans); margin-top: var(--space-4); }
html.uv-v4-journey .inst-ds160 .ds160v3-msg-icon .uv-icon { width: 16px; height: 16px; }
html.uv-v4-journey .inst-ds160 .alert-danger { background: var(--surface-000); border: 1.5px solid var(--danger); color: var(--danger); border-radius: var(--radius-md); }
html.uv-v4-journey .inst-ds160 .ds160v3-button {
  background: var(--action); color: var(--on-action); border: 0; border-radius: var(--radius-pill);
  min-height: var(--button-lg); padding: 0 28px; font: 700 17px/20px var(--font-sans); box-shadow: none; transform: none;
}
html.uv-v4-journey .inst-ds160 .ds160v3-button::before { content: none; }
html.uv-v4-journey .inst-ds160 .ds160v3-button:hover { background: var(--action-hover); box-shadow: none; transform: none; }
html.uv-v4-journey .inst-ds160 .ds160v3-button:active { transform: translateY(1px); }
html.uv-v4-journey .inst-ds160 .ds160v3-button:disabled { opacity: .45; }
html.uv-v4-journey .inst-ds160 .ds160v3-button.loading { color: transparent; }
html.uv-v4-journey .inst-ds160 .ds160v3-microcopy,
html.uv-v4-journey .inst-ds160 .ds160v3-footer-note { font: 500 13px/20px var(--font-sans); color: var(--ink-muted); margin-top: var(--space-16); }
html.uv-v4-journey .inst-ds160 .ds160v3-footer-note a { color: var(--ink); font-weight: 700; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
html.uv-v4-journey .inst-ds160 .ds160v3-footer-note a:hover { background: none; color: var(--ink); }
html.uv-v4-journey .inst .inst-ds160 a.uv-btn--ghost { padding: 0; }
@media (min-width: 960px) {
  .inst-ds160 { grid-template-columns: 1fr 1.1fr; gap: var(--space-48); }
  .inst-ds160__form { order: 0; }
  .inst-ds160__info { position: sticky; top: calc(var(--header-h) + var(--space-24)); }
}

/* ---------- Dejá tu testimonio (/testimonios/nuevo): same form, V4 card ---------- */
.inst-testimonial { max-width: var(--measure); }
.inst-testimonial .uv-section__title { margin: 0 0 var(--space-8); }
.inst-testimonial .inst-head__lead { margin-bottom: var(--space-24); }
html.uv-v4-journey .inst .inst-testimonial .inst-form-card {
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-24) var(--space-16);
}
html.uv-v4-journey .inst-testimonial label { font: 600 14px/20px var(--font-sans); color: var(--ink); margin-bottom: var(--space-4); }
html.uv-v4-journey .inst-testimonial .form-control {
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-000);
  color: var(--ink); font: 400 16px/24px var(--font-sans); min-height: var(--tap-min); height: auto; padding: var(--space-12) var(--space-16); box-shadow: none;
}
html.uv-v4-journey .inst-testimonial .form-control:hover { border-color: var(--ink); }
html.uv-v4-journey .inst-testimonial .form-control:focus { border-color: var(--ink); box-shadow: none; outline: 2px solid var(--focus); outline-offset: 2px; }
html.uv-v4-journey .inst-testimonial .form-control::placeholder { color: var(--ink-subtle); }
html.uv-v4-journey .inst-testimonial form p { color: var(--danger); font: 600 13px/20px var(--font-sans); }
@media (min-width: 720px) { html.uv-v4-journey .inst .inst-testimonial .inst-form-card { padding: var(--space-32); } }